@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@400;500;600&display=swap');
:root{--ink:#31253d;--paper:#eee8f6;--violet:#9060c2}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:#9886b5;color:white;font-family:'Manrope',sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}.skip{position:fixed;left:20px;top:-100px;z-index:100;background:#31253d;padding:12px}.skip:focus{top:10px}.world{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;background:#b7a2d7}.landscape{position:absolute;inset:-4%;background:url('landscape.webp') center 57%/cover;transform:scale(1.03);will-change:transform}.wash{position:absolute;inset:0;background:linear-gradient(180deg,#39224920 5%,transparent 38%,#27133688 100%)}canvas{position:absolute;inset:0;width:100%;height:100%}.grain{position:absolute;inset:0;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{height:92px;position:fixed;top:0;left:0;width:100%;padding:0 3.4%;display:flex;align-items:center;justify-content:space-between;z-index:20;transition:background .4s,color .4s}header.dark{color:var(--ink);background:#eee8f6ec;backdrop-filter:blur(12px)}.logo{font-family:'Cormorant Garamond',serif;font-size:49px;letter-spacing:-4px;font-weight:600;line-height:1}.logo span{font-family:serif;letter-spacing:0;font-size:13px;vertical-align:top;margin-left:6px;display:inline-block;padding-top:10px}nav{display:flex;gap:35px;margin-left:8%}nav a,#motion,.talk{font-size:12px;text-transform:uppercase;letter-spacing:.06em}nav a{position:relative;padding:8px 0}nav a:after{content:'';position:absolute;left:0;bottom:0;height:1px;background:currentColor;width:0;transition:width .3s}nav a:hover:after{width:100%}#motion{background:none;border:0;display:flex;align-items:center;gap:9px}.motion-icon{font-size:22px}.talk{border:1px solid #ffffff60;border-radius:50px;padding:11px 19px;background:#ffffff0c}.talk span{margin-left:20px}.dark .talk{border-color:#31253d40}.scene{position:relative;min-height:100svh;padding:115px 3.4% 35px}.hero{height:100svh;min-height:710px}.eyebrow{font-size:11px;letter-spacing:.08em;line-height:1.55;position:absolute;top:49%;text-shadow:0 1px 8px #342144}.hero-title{position:absolute;bottom:100px;left:3.4%;right:3.4%;display:flex;align-items:flex-start;gap:6vw}.intro{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(32px,4.9vw,85px);white-space:nowrap;padding-top:4px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:400}h1{font-size:clamp(70px,8.8vw,156px);line-height:.84;letter-spacing:-.055em;text-shadow:0 2px 30px #39264530}h1 span{margin-left:5vw}.bottomline{position:absolute;bottom:30px;left:3.4%;right:3.4%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em}.bottomline a span{display:inline-block;margin-left:30px;font-size:20px}.vertical-note{position:absolute;right:0;bottom:155px;writing-mode:vertical-rl;font-size:10px}.orb-caption{position:absolute;top:58%;left:50%;font-size:9px;letter-spacing:.14em;color:#fff9}.section-kicker{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em}.manifesto{min-height:115svh}.manifesto-copy{margin-top:21vh;max-width:780px}.small-label{font-size:11px;letter-spacing:.12em;margin-bottom:28px}.manifesto h2{font-size:clamp(80px,10vw,170px);line-height:.8;letter-spacing:-.05em;margin-bottom:42px}em{font-weight:400}.manifesto-copy>p:last-child{line-height:1.8;font-size:15px;text-shadow:0 1px 8px #271336}.scene-foot{position:absolute;bottom:35px;font-size:11px;letter-spacing:.1em}.studio,.explorations{position:relative;background:var(--paper);color:var(--ink);padding:75px 5% 110px}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;margin-top:110px}.studio h2{font-size:clamp(70px,7.5vw,125px);letter-spacing:-.05em;line-height:.94}.studio-right{padding-top:40px}.statement{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3vw,46px);line-height:1.12}.services{margin-top:55px}details{border-bottom:1px solid #31253d30}summary{cursor:pointer;list-style:none;display:flex;align-items:center;padding:23px 0;font-size:17px}summary::-webkit-details-marker{display:none}summary span{font-size:10px;color:#72677e;margin-right:30px}summary i{font-style:normal;margin-left:auto;font-size:23px;font-weight:400;transition:transform .3s}details[open] summary i{transform:rotate(45deg)}details p{font-size:15px;line-height:1.7;padding:0 15px 25px 44px;color:#665872}.explorations{padding-top:45px}.explorations>h2{font-size:clamp(64px,7.5vw,130px);letter-spacing:-.045em;margin:95px 0 70px}.study-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:8%}.study{background:transparent;text-align:left;padding:0;border:0;color:var(--ink)}.study-two{margin-top:170px}.study-image{height:440px;position:relative;overflow:hidden;background:#9581ad url('landscape.webp') 34% center/cover;transition:border-radius .6s,transform .6s}.study:hover .study-image{border-radius:90px 8px 90px 8px;transform:translateY(-8px)}.study-two .study-image{height:350px;background:#372245;background-image:radial-gradient(ellipse at 65% 90%,#bc83de,transparent 65%),radial-gradient(ellipse at 10% 0%,#705591,transparent 65%)}.study-tag{position:absolute;bottom:20px;left:24px;font-size:10px;color:white;letter-spacing:.1em}.study-open{position:absolute;top:20px;right:22px;background:#ffffff25;border:1px solid #fff7;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;color:white;font-size:23px}.study-type{font-family:'Cormorant Garamond',serif;color:#eee1ff;font-size:clamp(45px,5vw,90px);position:absolute;top:21%;left:8%;line-height:.95;letter-spacing:-.05em;transition:transform .7s}.study:hover .study-type{transform:translate(12px,-8px) rotate(-4deg)}.study-name{padding-top:18px;display:flex;gap:15px;justify-content:space-between;align-items:center}.study-name h3{font-size:29px;letter-spacing:-.04em}.study-name>span{font-size:9px;max-width:140px;line-height:1.7;text-align:right}.explore-note{font-size:12px;color:#766b80;margin-top:60px}.contact{min-height:110svh;padding-bottom:120px}.contact>.small-label{margin-top:110px}.contact h2{font-size:clamp(80px,10vw,165px);line-height:.84;letter-spacing:-.05em}.contact h2 em{margin-left:7vw}.contact-link{display:inline-flex;gap:60px;font-size:19px;border-bottom:1px solid #ffffff80;padding:20px 0 13px;margin-top:30px}.contact-link span{transition:transform .3s}.contact-link:hover span{transform:translate(5px,-5px)}footer{position:absolute;bottom:25px;left:3.4%;right:3.4%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff50;padding-top:22px}footer>span,footer>a:last-child{font-size:10px;letter-spacing:.08em}.reveal{opacity:0;transform:translateY(45px);transition:opacity 1s,transform 1s}.reveal.visible{opacity:1;transform:none}#cursor{position:fixed;top:0;left:0;width:24px;height:24px;border:1px solid #fff9;border-radius:50%;pointer-events:none;z-index:40;mix-blend-mode:difference;opacity:0}dialog{background:#ede6f6;color:var(--ink);border:0;padding:70px;width:min(620px,90vw);box-shadow:0 20px 120px #1d0d4290}dialog::backdrop{background:#20102e80;backdrop-filter:blur(9px)}dialog h2{font-size:64px;letter-spacing:-.05em;line-height:1;margin:20px 0}dialog p{line-height:1.8;font-size:16px}dialog .close{position:absolute;right:22px;top:20px;border:0;background:none;font-size:13px}.experience{background:var(--ink);border:0;border-radius:30px;color:white;padding:15px 23px;margin-top:30px;font-size:14px}@media(min-width:1600px){.hero-title{gap:8vw}.hero{min-height:900px}}@media(max-width:800px){header{height:78px;padding:0 6%}.logo{font-size:40px}nav{gap:18px;margin:0}nav a{font-size:10px}#motion{position:fixed;bottom:18px;right:18px;background:#34214399;backdrop-filter:blur(8px);color:white;padding:8px 12px;border-radius:30px;font-size:10px}.talk{display:none}.scene{padding-left:6%;padding-right:6%}.hero{min-height:680px}.eyebrow{top:47%;font-size:9px}.hero-title{display:block;left:6%;bottom:100px}.intro{font-size:43px;display:block;margin-bottom:20px}h1{font-size:clamp(58px,12vw,96px)}h1 span{margin-left:0}.orb-caption{top:41%;left:30%;font-size:8px}.bottomline{left:6%;right:6%;bottom:42px;font-size:8px}.bottomline>span:first-child{max-width:100px;line-height:1.6}.vertical-note{display:none}.manifesto-copy{margin-top:22vh}.manifesto h2{font-size:95px}.section-kicker{font-size:9px;gap:25px}.section-kicker span:last-child{text-align:right}.studio,.explorations{padding:55px 6% 70px}.studio-grid{grid-template-columns:1fr;gap:35px;margin-top:65px}.studio h2{font-size:83px}.studio-right{padding:0}.statement{font-size:33px}.study-layout{grid-template-columns:1fr;gap:45px}.study-two{margin-top:0}.study-image{height:370px}.study-two .study-image{height:340px}.study-type{font-size:72px}.explorations>h2{font-size:64px;margin:65px 0 45px}.study-name h3{font-size:28px}.contact{min-height:850px}.contact h2{font-size:83px}.contact>.small-label{margin-top:150px}footer{left:6%;right:6%;bottom:60px}footer>a:last-child{font-size:8px}dialog{padding:60px 30px 35px}dialog h2{font-size:48px}#cursor{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}

/* Layer water refraction below the scene lighting and particles. */
#water-surface{opacity:0;z-index:0;transition:opacity .6s}.world .wash{z-index:1}#particles{z-index:2}.world .grain{z-index:3}
/* Animated type keeps its original layout, line breaks and italic styling. */
.text-motion{opacity:1!important;transform:none!important;transition:none!important;perspective:800px}
.text-motion .tx-word{display:inline-block;white-space:nowrap;margin:0;padding:0;vertical-align:baseline}
.text-motion .tx-char{display:inline-block;margin:0;padding:0;transform-origin:50% 65%;backface-visibility:hidden;line-height:inherit}
h1 .tx-word,h1 .tx-char{margin-left:0}
.text-motion em{font-weight:inherit}
@media(prefers-reduced-motion:reduce){.text-motion .tx-char{transform:none!important;opacity:1!important;color:inherit!important;text-shadow:none!important}}
@media(forced-colors:active){.text-motion .tx-char{color:CanvasText!important;text-shadow:none!important}}
/* The opening stays in view while petals move through the brand sequence. */
.intro-journey{height:500svh;position:relative}
.intro-journey .hero{position:sticky;top:0;height:100svh;min-height:0}
#white-transition{position:absolute;inset:0;background:#fff;z-index:5;opacity:0;pointer-events:none}
.hero-title,.hero .eyebrow,.orb-caption{will-change:opacity}
.manifesto,.contact{background:#fff;color:var(--ink)}
.studio,.explorations{background:#fff}
.manifesto-copy>p:last-child{text-shadow:none}
.contact-link,footer{border-color:#31253d40}
header.dark{background:#ffffffed}
@media(prefers-reduced-motion:reduce){.intro-journey{height:100svh}.intro-journey .hero{position:relative}}
.hero-title[data-journey-stage]:not([data-journey-stage="0"]){opacity:0;visibility:hidden}
.hero-title h2{font-size:clamp(70px,8.8vw,156px);line-height:.84;letter-spacing:-.055em;text-shadow:0 2px 30px #39264530}
.hero-title h2>span{margin-left:5vw}
.hero-title h2 .tx-word,.hero-title h2 .tx-char{margin-left:0}
#white-transition{inset:auto;position:absolute;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 18px 10px #fff,0 0 50px 22px #ffe9ff;will-change:width,height,opacity}
@media(max-width:800px){.hero-title h2{font-size:clamp(58px,12vw,96px)}.hero-title h2>span{margin-left:0}}

/* Keep the landscape texture crisp beneath the atmospheric styling. */
.world .grain{opacity:.025}
.hero-title .heart-heading{font-size:clamp(70px,8.5vw,145px);line-height:.95;letter-spacing:-.05em}
.hero-title .heart-heading em{font-weight:400}
@media(max-width:800px){.hero-title .heart-heading{font-size:clamp(54px,11vw,88px)}}
/* The closing scene returns to the opening landscape and interactive petals. */
.contact{background:transparent;color:#fff;min-height:125svh;padding-bottom:170px}
.contact-address{font-style:normal;font-size:15px;line-height:1.7;margin-top:18px;color:#fff;letter-spacing:.02em}
.contact .contact-link,.contact footer{border-color:#ffffff60}
@media(max-width:800px){.contact{min-height:980px;padding-bottom:180px}.contact-address{font-size:14px}}
/* Keep the closing wordmark, message and footer together. */
.contact{min-height:100svh;display:flex;flex-direction:column;padding:110px 3.4% 24px}
.contact>.small-label{margin-top:clamp(28px,6svh,70px);margin-bottom:24px}
.contact>h2{font-size:clamp(72px,min(9vw,14svh),140px);line-height:.86}
.contact>.contact-link{align-self:flex-start;margin-top:22px;padding-top:10px}
.contact>.contact-address{margin-top:14px;margin-bottom:30px}
.contact>footer{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:auto;flex-shrink:0;padding-top:20px}
@media(max-width:800px){.contact{padding:100px 6% 24px;min-height:100svh}.contact>.small-label{margin-top:175px}.contact>h2{font-size:clamp(56px,10vw,78px)}.contact>.contact-address{margin-bottom:28px}.contact>footer{gap:12px}}

/* Let the white transition hand directly into the next section. */
.intro-journey + .studio{margin-top:-100svh;z-index:1;padding-top:clamp(48px,6svh,75px)}
.intro-journey + .studio .studio-grid{margin-top:clamp(40px,6svh,70px)}
@media(prefers-reduced-motion:reduce){.intro-journey + .studio{margin-top:0}}
