:root{--ink:#1d1e20;--paper:#fff;--saffron:#F5A302;--slate:#3a4556;--lightblue:#eef4f6;--aqua:#c9f0ef;--font:"Josefin Sans",sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.7}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
h2{font-weight:600;font-size:clamp(1.9rem,4vw,2.9rem)}
.btn{display:inline-flex;align-items:center;gap:.7rem;border:none;padding:.9rem 2.2rem;font-family:var(--font);font-weight:600;letter-spacing:.1em;cursor:pointer;font-size:.85rem}
.btn--black{background:#0c0c0c;color:#fff}
.btn--pill{background:#fff;color:#111;border-radius:2.5rem}
.btn--hoverfx{transition:transform .3s ease,background .3s ease,color .3s ease}
.btn--hoverfx:hover{transform:scale(1.07);background:var(--saffron);color:#111}
.btn__book{width:18px;height:18px;border:2px solid var(--saffron);border-radius:3px;position:relative}
.btn__book:before{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:2px;background:var(--saffron)}

.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.35rem clamp(1.25rem,4vw,3rem);background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
.nav__logo{height:68px;width:auto}.nav__links{display:flex;gap:2rem;font-weight:500}

/* S1 hero: boxed rounded frame */
.hero{padding:5.6rem clamp(1.25rem,3vw,2.5rem) 10px;background:#fff}
.hero__frame{width:100%;max-width:1500px;margin:0 auto}
.hero__stage{position:relative;height:calc(100svh - 5.6rem - 10px);width:min(100%,calc((100svh - 5.6rem - 10px)*1.9));aspect-ratio:auto;margin:0 auto;border-radius:22px;overflow:hidden;background:#0e0e0e;isolation:isolate;transform:translateZ(0);clip-path:inset(0 round 22px)}
.hslide{position:absolute;inset:0;opacity:0}
.hslide:first-child{opacity:1}
.hslide img{width:100%;height:100%;object-fit:cover}
.hero__plusbadge{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hero__plusbadge span{background:#F5A302;border-radius:2px}



/* S2 welcome */
.welcome{background:var(--lightblue);padding:clamp(3.5rem,9vh,6rem) clamp(1.25rem,5vw,4.5rem)}
.welcome__cols{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;max-width:90rem;margin:0 auto;align-items:start}
.welcome__text h2 strong{font-weight:700}
.welcome__sub{font-weight:500;margin:.4rem 0 1.4rem}
.welcome__text p{margin-bottom:1.3rem;text-align:justify}
.welcome__text .btn{margin:0.6rem 0 1.6rem}
.snapgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.snap{overflow:hidden;aspect-ratio:1/1;background:#dfe7ea}
.snap img{width:100%;height:100%;object-fit:cover;transform:scale(.7);opacity:0}
.welcome__caption{text-align:right;margin-top:.8rem;font-weight:500}

/* S3/S6 quotes */
.quote{background:var(--slate);color:#fff;padding:clamp(3rem,8vh,5rem) clamp(1.25rem,5vw,4.5rem)}
.quote__cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:80rem;margin:0 auto;align-items:center}
.quote__cols--rev .quote__blob{order:2}
.quote__blob{width:100%;max-width:34rem;aspect-ratio:1.35/1;overflow:hidden}
.quote__blob--a{border-radius:58% 42% 47% 53%/55% 48% 52% 45%}
.quote__blob--b{border-radius:45% 55% 52% 48%/50% 46% 54% 50%}
.quote__blob img{width:100%;height:100%;object-fit:cover}
.colorhover img{filter:grayscale(1);transition:filter .5s ease}
.colorhover:hover img{filter:grayscale(0)}
.tinthover img{transition:filter .5s ease}
.tinthover:hover img{filter:sepia(.9) saturate(2.4) hue-rotate(-12deg)}
.quote__bq{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:500;line-height:1.5}
.brighten .w{color:rgba(255,255,255,.22)}

/* S4 + S9 */
.domains{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:.4rem;padding:.4rem;background:#fff}
.gallery .dom{aspect-ratio:auto;min-height:0}
.gallery .span2{grid-column:span 2}
.dom{position:relative;aspect-ratio:3/4;overflow:hidden;display:block}
.dom img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.001);transition:filter .5s ease,transform .8s ease}
.dom:hover img{filter:grayscale(0);transform:scale(1.05)}
.dom span{position:absolute;left:1.2rem;bottom:1.2rem;color:#fff;font-weight:600;font-size:1.25rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* S5 growth */
.growth{background:#f4f6f7;text-align:center;padding:clamp(3.5rem,9vh,6rem) clamp(1.25rem,5vw,4.5rem)}
.growth h2{min-height:1.4em}
.growth__text{max-width:44rem;margin:1rem auto 3.2rem}
.typewords .w{opacity:0}
.growth__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:76rem;margin:0 auto}
.g__icon{width:52px;height:52px;margin:0 auto .9rem;color:var(--saffron)}
.g__label{display:block;font-weight:500;margin-bottom:.4rem}
.g__row{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:600}
.g__plus{margin-left:.15em}

/* S7 skills */
.skills{background:var(--aqua);text-align:center;padding:clamp(3.5rem,9vh,6rem) clamp(1.25rem,5vw,4.5rem)}
.skills__intro{max-width:52rem;margin:.8rem auto 3rem}
.skills__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;max-width:76rem;margin:0 auto;align-items:start}
.skill--raised{margin-top:-2.2rem}
.skill h3{font-weight:600;font-size:1.35rem;margin-bottom:.8rem}
.skill .btn{margin-top:1.6rem}
.brighten-dark .w{color:rgba(29,30,32,.18)}

/* S8 collab */
.collab{padding:0;background-size:cover;background-position:center}
.collab__veil{background:rgba(5,5,8,.82);color:#fff;min-height:100svh;padding:clamp(2rem,4vh,3rem) clamp(1.25rem,4vw,4rem);display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;align-items:center}
.collab__form{display:grid;gap:1.1rem;max-width:26rem;justify-self:end;width:100%}
.collab__form label{display:grid;gap:.45rem;font-weight:500;font-size:.95rem}
.collab__form input,.collab__form textarea{font-family:var(--font);padding:.65rem .8rem;border:none;font-size:.92rem;background:#fff}
.collab__form .btn{justify-self:start}
.collab__pitch{max-width:34rem}
.collab__pitch h2{margin-bottom:1.2rem}
.collab__pitch>p{margin-bottom:1.8rem}
.collab__fig{position:relative}
.collab__fig img{width:100%;max-height:30svh;object-fit:cover}
.collab__cta{position:absolute;right:1rem;bottom:1rem}
.collab__closing{margin-top:1.2rem;font-weight:500}

/* footer */
.foot{border-top:1px solid #e6e4df;padding:3rem clamp(1.25rem,5vw,4.5rem) 1.5rem}
.foot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:2.5rem}
.foot h4{font-weight:600;margin-bottom:.6rem}
.foot a{transition:color .25s}.foot a:hover{text-decoration:underline;color:var(--saffron)}
.foot__legal{text-align:center;font-size:.85rem;color:#777}

/* reduced-motion / no-js */
@media (prefers-reduced-motion:reduce){
  .hslide:first-child{opacity:1!important}
  .snap img{opacity:1!important;transform:none!important}
  .brighten .w{color:#fff!important}.brighten-dark .w{color:var(--ink)!important}
  .typewords .w{opacity:1!important}
}
.no-js .hslide:first-child{opacity:1}
.no-js .snap img{opacity:1;transform:none}
.no-js .brighten .w{color:#fff}.no-js .brighten-dark .w{color:var(--ink)}
.no-js .typewords .w{opacity:1}
.no-js .growth h2:after{content:"Our Growth"}

@media (max-width:960px){
  .welcome__cols,.quote__cols,.collab__veil{grid-template-columns:1fr}
  .quote__cols--rev .quote__blob{order:0}
  .snapgrid{grid-template-columns:repeat(3,1fr)}
  .domains,.gallery,.growth__grid{grid-template-columns:repeat(2,1fr)}
  .skills__grid{grid-template-columns:1fr}
  .skill--raised{margin-top:0}
  .collab__form{justify-self:stretch;max-width:none}
  .foot__grid{grid-template-columns:1fr 1fr}
}

/* v3.02 stacking panels */
.panel{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate}
.panel--flush{padding:0}
.hero-spacer{height:800svh}
.s2-spacer{height:70svh}
.q-spacer{height:90svh}
.s7-spacer{height:70svh}
.hero.panel{background:#fff}
.welcome.panel{background:var(--lightblue)}
.quote.panel{background:var(--slate)}
.growth.panel{background:#f4f6f7}
.skills.panel{background:var(--aqua)}
.gallery.panel{background:#fff}
.foot{position:relative;z-index:5;background:#fff}
@media (max-width:960px){
  .panel{position:static;min-height:0;display:block}
  .hero-spacer,.s2-spacer,.q-spacer,.s7-spacer{height:0}
}

/* v3.04 hero dots */
.hero__dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:9px;z-index:5}
.hero__dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
.hero__dots i.on{background:var(--saffron);transform:scale(1.25)}

/* v3.13 S2 camouflage reveal */
.welcome__text .w{color:#dfe9ec}
.welcome__text h2{color:#dfe9ec}
.welcome__text .btn{opacity:0}
.welcome__text .btn .w{color:inherit}
.snap img{filter:grayscale(1);transition:filter .45s ease}
.snap:hover img{filter:grayscale(0)}
@media (prefers-reduced-motion:reduce){.welcome__text .w{color:inherit!important}.welcome__text h2{color:var(--ink)!important}.welcome__text .btn{opacity:1!important}.snap img{filter:none}}
.no-js .welcome__text .w{color:inherit}.no-js .welcome__text h2{color:var(--ink)}.no-js .welcome__text .btn{opacity:1}
.no-js .snap img{filter:none}

/* v3.10: grid sections must beat the panel flex rule (source-order fix) */
.domains.panel{display:grid;grid-template-columns:repeat(4,1fr);align-content:center}
.gallery.panel{display:flex;flex-direction:column;justify-content:center}
@media (max-width:960px){
  .domains.panel{grid-template-columns:repeat(2,1fr)}
  
}


/* v3.12 recognition wall: exact live composition, bounded frame */
.wallabs{position:relative;width:min(96vw,1980px,calc((100svh - 60px)*2.922));aspect-ratio:1513/518;margin:0 auto}
.wtile{position:absolute;overflow:hidden}
.wtile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .45s ease}
.wtile:hover img{filter:grayscale(0)}
@media (prefers-reduced-motion:reduce){.wtile img{filter:none}}
.no-js .wtile img{filter:none}
@media (max-width:960px){
  .gallery.panel{padding:8px 0}
  .wallabs{position:static;width:100%;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px}
  .wtile{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;aspect-ratio:1/1}
}

.foot__logoCol img{height:130px;width:auto}

/* v3.15: v2 typology showcase, verbatim palette */
.typ{background:#111111;color:#fff}
.typ__pin{display:grid;grid-template-columns:58% 42%;min-height:100svh;align-items:stretch}
.typ__media{position:relative;overflow:hidden}
.typ__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s ease,transform 1.1s ease}
.typ__img.is-active{opacity:1;transform:scale(1)}
.typ__panel{display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:clamp(2rem,5vw,4.5rem)}
.typ__sheet{color:rgba(255,255,255,.6)}
.typ__sheetnum{color:#F5B301}
.typ__items{position:relative;min-height:11rem}
.typ__item{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.typ__item.is-active{opacity:1;transform:none;pointer-events:auto}
.typ__item h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,3rem);margin-bottom:.75rem}
.typ__item p{color:rgba(255,255,255,.78);max-width:26rem}
.typ__progress{display:flex;gap:.5rem}
.typ__progress b{width:1.9rem;height:.45rem;background:#262626;transition:background .3s}
.typ__progress b.is-on{background:#F5B301}
.typ.panel{background:#111111;padding:0}
.typ .btn--light{border:1.5px solid #fff;color:#fff;border-radius:2.5rem;padding:.8rem 1.9rem;display:inline-block;font-weight:600}
.typ .btn--light:hover{background:#fff;color:#111}
.typ-spacer{height:360svh}
@media (max-width:960px){.typ__pin{grid-template-columns:1fr;grid-template-rows:52svh auto;min-height:0}.typ-spacer{height:0}}

/* v3.16 footer socials */
.foot__logoCol{display:flex;flex-direction:column;align-items:flex-end;gap:.8rem}
.foot__social{display:flex;gap:.55rem;justify-content:flex-end}
.foot__social a{width:30px;height:30px;display:grid;place-items:center;color:var(--ink);border:1px solid #d8d6d0;border-radius:50%;transition:color .25s,border-color .25s,transform .25s}
.foot__social a:hover{color:var(--saffron);border-color:var(--saffron);transform:translateY(-2px)}
.foot__social svg{width:15px;height:15px}

/* v3.19 brand cursor */
html,body{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><rect x='0' y='0' width='7' height='7' fill='%23F5A302'/><rect x='11' y='0' width='7' height='7' fill='%23F5A302'/><rect x='0' y='11' width='7' height='7' fill='%23F5A302'/><rect x='11' y='11' width='7' height='7' fill='%23F5A302'/></svg>") 9 9, auto}
a,button,.dom,.wtile,.snap,input,textarea,label{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><rect x='0' y='0' width='7' height='7' fill='%23F5A302'/><rect x='11' y='0' width='7' height='7' fill='%23F5A302'/><rect x='0' y='11' width='7' height='7' fill='%23F5A302'/><rect x='11' y='11' width='7' height='7' fill='%23F5A302'/></svg>") 9 9, auto}