@font-face{font-family:Sora;src:url(assets/sora.ttf) format("truetype");font-weight:100 800;font-display:swap}
@font-face{font-family:Inter;src:url(assets/inter.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{
  --shell:#f9f7f3;--sand:#e8dccb;--stone:#d8d1c6;--sage:#a9b29a;--olive:#6b7756;--ink:#2e2e2b;
  color:var(--ink);background:var(--shell);font-family:Inter,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,p{margin:0}
body{line-height:1.55}
a{color:inherit;text-underline-offset:.28em}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
img,svg{display:block;max-width:100%}
.frame{width:min(100% - clamp(2.5rem,10vw,10rem),86rem);margin-inline:auto}
.skip{position:absolute;top:.5rem;left:.5rem;z-index:5;padding:.75rem;background:var(--shell);transform:translateY(-150%)}
.skip:focus{transform:none}
.visually-hidden,.journey input{position:absolute;inline-size:1px;block-size:1px;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.mast{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:6rem;border-bottom:1px solid var(--stone)}
.brand,.nav-link{display:flex;align-items:center;min-height:44px}
.nav-link{gap:1.2rem;font-weight:600;font-size:.875rem}
.hero-inner{position:relative;isolation:isolate;padding-block:clamp(3.3rem,7.2vw,7rem) clamp(2.5rem,5vw,4.7rem)}
.hero-watermark{position:absolute;z-index:-1;right:0;top:45%;width:clamp(10rem,32vw,29rem);transform:translateY(-50%);opacity:.105;pointer-events:none}
.eyebrow,.studio-label{font-size:.69rem;font-weight:650;text-transform:uppercase;letter-spacing:.13em}
h1,h2,h3,.studio-name{font-family:Sora,system-ui,sans-serif}
h1{font-size:clamp(2.05rem,5.35vw,5.4rem);font-weight:650;line-height:1.12;letter-spacing:-.057em;max-width:23ch;text-wrap:balance}
.hero-description{max-width:62ch;margin-top:clamp(1.2rem,2.5vw,2rem);font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.65}
.hero-close{display:flex;align-items:center;gap:.75rem 1.6rem;flex-wrap:wrap;margin-top:clamp(1.25rem,2.6vw,2.5rem)}
.action{display:inline-flex;align-items:center;gap:1rem;min-height:46px;padding:.6rem .9rem;background:#4e5b40;color:var(--shell);font-size:.875rem;font-weight:600;text-decoration:none}
.action:hover{background:#394531}
.action:focus-visible{outline-color:#4e5b40}
.work{background:var(--sand);color:var(--ink);padding-block:clamp(2.5rem,6vw,6.5rem);scroll-margin-top:1rem}
.work-index{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;color:#4e5b40;border-bottom:1px solid #a39c8f;padding-bottom:1rem}
.work-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.25rem,7vw,7rem);align-items:end;margin-block:clamp(1.65rem,4.5vw,4rem)}
.work-intro h2{max-width:15ch;font-size:clamp(2rem,4.6vw,5rem);line-height:1.07;letter-spacing:-.062em;font-weight:600}
.work-intro p{max-width:36ch}
.journey{border:0;min-inline-size:0;margin:0;padding:0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#777970;border:1px solid #777970;border-bottom:0}
.steps label{display:flex;align-items:center;gap:clamp(.35rem,2vw,1.5rem);min-height:52px;background:var(--ink);color:var(--shell);padding:.65rem clamp(.5rem,2vw,1.5rem);cursor:pointer;font-size:.875rem;font-weight:600;line-height:1.25}
.steps label span{font-size:.68rem;color:var(--sage);font-weight:650}
.steps label:hover{background:#3c4036}
#discover:checked~.steps label[for=discover],#book:checked~.steps label[for=book],#arrive:checked~.steps label[for=arrive]{background:var(--sand);color:var(--ink)}
#discover:checked~.steps label[for=discover] span,#book:checked~.steps label[for=book] span,#arrive:checked~.steps label[for=arrive] span{color:#49573d}
#discover:focus-visible~.steps label[for=discover],#book:focus-visible~.steps label[for=book],#arrive:focus-visible~.steps label[for=arrive]{outline:2px solid currentColor;outline-offset:-5px}
.specimen{background:var(--shell);border:1px solid #777970;color:#30392a;padding:clamp(1rem,4vw,3.5rem)}
.specimen-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;border-bottom:1px solid #9fa792;padding-bottom:clamp(.75rem,2vw,1.5rem)}
.studio-name{font-size:clamp(1.05rem,2.4vw,2rem);line-height:.96;letter-spacing:-.075em;font-weight:750}
.studio-name span{color:var(--olive)}
.studio-meta{text-align:right;font-size:.61rem}
.panel{display:none;grid-template-columns:1fr minmax(0,.84fr);gap:clamp(1rem,5vw,5rem);align-items:center;padding-top:clamp(1rem,3vw,2.5rem)}
#discover:checked~.specimen .panel-discover,#book:checked~.specimen .panel-book,#arrive:checked~.specimen .panel-arrive{display:grid}
.studio-copy h3{font-size:clamp(1.6rem,3.65vw,4.2rem);letter-spacing:-.07em;line-height:1.04;font-weight:650;margin:.7rem 0 1rem;max-width:13ch}
.studio-copy p{max-width:37ch}
.studio-note{font-size:.85rem;margin-top:1rem;font-weight:650}
.art{background:#dfe1d1;min-width:0}
.art svg{width:100%;max-height:15rem}
.mat-art,.map-art{padding:.7rem}
.mat-art span{display:block;text-align:right;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}
.ticket{padding:clamp(1rem,2.8vw,2.4rem)}
.ticket strong{display:block;font-size:clamp(1.1rem,2.3vw,2.2rem);margin:.4rem 0}
.ticket div{display:flex;justify-content:space-between;gap:.5rem;border-top:1px solid #87917d;margin-top:1rem;padding-top:.75rem}
.ticket small{display:block;margin-top:.8rem}
.map-art text{font:600 11px Inter,sans-serif;fill:#30392a}
.note{display:none;padding-top:1.05rem;font-size:.875rem}
.note strong{color:#4e5b40;margin-right:.8rem}
#discover:checked~.annotations .note-discover,#book:checked~.annotations .note-book,#arrive:checked~.annotations .note-arrive{display:block}
.footer{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding-block:1.1rem;font-size:.8rem}
.footer span{color:#55574e}
.footer a{min-height:44px;display:flex;align-items:center;flex-shrink:0}
@media (max-width:640px){
  .mast{min-height:4.5rem}
  .brand img{width:8rem}
  .nav-link{gap:.45rem;font-size:.76rem}
  .hero-watermark{width:clamp(8rem,42vw,12rem);top:39%;opacity:.075}
  .hero-close{align-items:flex-start;flex-direction:column;gap:.85rem}
  h1{font-size:clamp(1.85rem,7.7vw,3.1rem);text-wrap:initial}
  .work-intro,.panel{grid-template-columns:1fr}
  .steps label{font-size:.75rem;flex-wrap:wrap;align-content:center}
  .art svg{max-height:12rem}
}

.mast-nav{display:flex;gap:clamp(.65rem,3vw,2.6rem);align-items:center}
.mast-nav .nav-link{gap:.4rem}
.chapter{padding-block:clamp(2.8rem,7vw,7rem);scroll-margin-top:1rem}
.chapter-index{display:flex;gap:1.3rem;color:#4e5b40;border-bottom:1px solid #a39c8f;padding-bottom:1rem}
.chapter-intro,.founder-layout,.contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.25rem,7vw,7rem);margin-top:clamp(1.6rem,4vw,3.8rem)}
.chapter-intro{align-items:end;margin-bottom:clamp(1.6rem,4vw,3.8rem)}
.chapter h2{font-size:clamp(2rem,4.4vw,4.7rem);font-weight:600;line-height:1.08;letter-spacing:-.061em;text-wrap:balance;max-width:16ch}
.chapter-intro p,.founder-note p,.contact-layout p{max-width:44ch}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--stone)}
.service-grid article{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;padding:clamp(1.25rem,3vw,2.6rem)}
.service-grid article+article{border-left:1px solid var(--stone)}
.service-grid article:first-child{padding-left:0}
.service-grid article:last-child{padding-right:0}
.service-top{width:100%;display:flex;justify-content:space-between;align-items:center;color:#4e5b40;font-size:.75rem;letter-spacing:.08em}
.service-top svg{width:2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-grid h3,.principles h3{font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.04em;line-height:1.22;font-weight:650}
.service-grid .problem{font-weight:600;color:#4e5b40}
.service-grid ul{margin:.15rem 0 .45rem;padding-left:1.1rem}
.service-grid li+li{margin-top:.25rem}
.service-grid a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;margin-top:auto;font-size:.875rem;font-weight:650}
.why{background:var(--ink);color:var(--shell)}
.why .chapter-index{color:var(--sage);border-color:#777970}
.why-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.6rem,7vw,7rem);margin-top:clamp(1.6rem,4vw,3.8rem)}
.why-layout p{max-width:41ch;color:#eeebe4}
.why-description{margin:1.1rem 0 .7rem}
.principles{border-top:1px solid #777970}
.principles article{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid #777970}
.principles article>span{font-size:.75rem;color:var(--sage);padding-top:.2rem}
.principles article p{margin-top:.35rem;font-size:.93rem}
.founder{background:#e8eadf;padding-block:0}
.founder-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:0;margin-top:0}
.founder-visual{position:relative;isolation:isolate;display:grid;place-items:center;min-height:0}
.founder-leaves{position:absolute;z-index:-1;top:10%;right:8%;width:78%;height:80%;object-fit:contain;opacity:.15}
.founder-portrait{position:relative;width:min(74%,18rem);height:auto;object-fit:contain;mask-image:radial-gradient(ellipse 71% 67% at 50% 37%,#000 72%,transparent 100%),linear-gradient(#000 76%,transparent 99%);mask-composite:intersect}
.founder-note{align-self:center;padding:clamp(2.25rem,6vw,6rem) 0 clamp(2.25rem,6vw,6rem) clamp(1.5rem,6vw,6.5rem)}
.founder-kicker{color:#4e5b40;margin-bottom:1rem}
.founder-note h2{margin-bottom:1.25rem}
.founder-note h2 span{color:#526041}
.founder-note p+p{margin-top:1rem}
.founder-note a{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;margin-top:.75rem;font-weight:600}
.contact-layout>div:first-child>p{margin-top:1rem}
.enquiry{border-left:1px solid var(--stone);padding-left:clamp(1rem,3vw,2rem)}
.enquiry label{display:block;margin:1rem 0 .4rem;font-size:.84rem;font-weight:650}
.enquiry textarea{width:100%;resize:vertical;background:transparent;color:inherit;border:1px solid #8b8b7e;padding:.75rem;font:inherit;display:block}
.enquiry button{min-height:44px;margin-top:.8rem;padding:.55rem .9rem;background:#4e5b40;color:var(--shell);border:0;font:600 .875rem Inter,sans-serif;cursor:pointer}
.enquiry button:focus-visible{outline-color:var(--ink)}
.enquiry button span{margin-left:.65rem}
#copy-status{font-size:.82rem;margin-top:.7rem}
.footer{border-top:1px solid var(--stone)}
@media (max-width:640px){
  .chapter-intro,.founder-layout,.contact-layout,.why-layout{grid-template-columns:1fr}
  .founder-visual{width:min(100%,15rem);justify-items:start;margin-top:1.5rem}
  .founder-portrait{width:82%}
  .founder-note{padding:1.8rem 0 2.5rem}
  .service-grid{grid-template-columns:1fr}
  .service-grid article,.service-grid article:first-child,.service-grid article:last-child{padding-inline:0}
  .service-grid article+article{border-left:0;border-top:1px solid var(--stone)}
  .enquiry{border-left:0;border-top:1px solid var(--stone);padding:1rem 0 0}
  .mast-nav .nav-link{font-size:.7rem}
  .mast{gap:.65rem}
  .brand img{width:clamp(5.6rem,29vw,8rem)}
}

/* The opening is part of normal page flow, with scroll-linked motion where supported. */
.brand-intro{background:var(--shell)}
.brand-intro-stage{
  position:relative;display:grid;place-items:center;
  min-height:100svh;padding:3.5rem 1.25rem 5rem;overflow:clip;
}
.intro-logo{width:min(81vw,35rem);height:auto;overflow:visible}
.intro-link{
  position:absolute;bottom:max(1.25rem,env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);display:inline-flex;gap:.7rem;align-items:center;
  min-height:44px;font-size:.875rem;font-weight:600;white-space:nowrap;
}
.intro-link:hover{color:#4e5b40}
.intro-leaf-left,.intro-leaf-right{transform-box:fill-box;transform-origin:center}
@supports (animation-timeline:scroll()) {
  @media (prefers-reduced-motion:no-preference){
    .brand-intro{min-height:136svh}
    .brand-intro-stage{position:sticky;top:0}
    .intro-leaf-left,.intro-leaf-right{
      animation:leaf-drift 1s cubic-bezier(.23,.6,.36,1) both;
      animation-timeline:scroll(root block);
      animation-range:0px 37svh;
    }
    .intro-leaf-left{--drift-x:-230%;--drift-y:-140%;--drift-turn:-33deg}
    .intro-leaf-right{--drift-x:230%;--drift-y:-185%;--drift-turn:32deg}
    @keyframes leaf-drift{
      to{transform:translate(var(--drift-x),var(--drift-y)) rotate(var(--drift-turn));opacity:0}
    }
  }
}