@font-face{font-family:Fraunces;src:url("./assets/fonts/fraunces-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;src:url("./assets/fonts/fraunces-latin-ext.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Kabana Display";src:url("./assets/fonts/kabana-display/web/KabanaDisplay-Light.woff2") format("woff2");font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:"Kabana Display";src:url("./assets/fonts/kabana-display/web/KabanaDisplay-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Kabana Display";src:url("./assets/fonts/kabana-display/web/KabanaDisplay-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Kabana Display";src:url("./assets/fonts/kabana-display/web/KabanaDisplay-Semibold.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Kabana Display";src:url("./assets/fonts/kabana-display/web/KabanaDisplay-Bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Space Mono;src:url("./assets/fonts/space-mono.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Space Mono;src:url("./assets/fonts/space-mono-bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--bg:#716b5c;--ink:#f4f1ea;--dark:#1d1d1c;--orange:#ff9617;--orange-ink:#a65100;--line:rgba(244,241,234,.27);--edge:clamp(24px,4.3vw,76px);--serif:"Kabana Display",Fraunces,Georgia,serif;--sans:Arial,Helvetica,sans-serif;--mono:"Space Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}img{display:block;width:100%}::selection{background:var(--orange);color:var(--dark)}
.skip-link{position:fixed;z-index:1000;top:10px;left:10px;padding:10px;background:var(--dark);transform:translateY(-160%);font:10px var(--mono)}.skip-link:focus{transform:none}
.terrain{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 53% 19%,rgba(255,255,255,.08),transparent 20%),linear-gradient(180deg,#777162 0%,#6a6557 55%,#625d50 100%)}.terrain:after{content:"";position:absolute;inset:0;opacity:.045;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='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.terrain svg{width:100%;height:100%;opacity:.65;transform:scale(1.06)}.terrain path{fill:none;stroke:var(--line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:78px;padding:0 var(--edge);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(244,241,234,.72);background:rgba(113,107,92,.82);backdrop-filter:blur(15px);transition:background .4s,color .4s}.header-left,.header-right{display:flex;align-items:center;gap:34px}.header-right{justify-content:flex-end}.site-header nav a{font:9px var(--mono);letter-spacing:.07em;text-transform:uppercase}.logo{grid-column:2;font:650 31px/.8 var(--serif);letter-spacing:-.065em}.logo span,.brief span{color:var(--orange)}.menu-toggle{display:none;border:0;background:none;font:9px var(--mono);text-transform:uppercase}.mobile-nav{display:none}
.roadmap{position:fixed;z-index:80;right:15px;top:104px;bottom:26px;width:72px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.section{position:relative;min-height:100svh;padding:120px calc(var(--edge) + 36px) 80px}.micro,.station{font:8px var(--mono);text-transform:uppercase;letter-spacing:.09em}.station{display:flex;align-items:center;gap:11px}.station b{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 13px rgba(255,150,23,.6)}.station span{color:var(--orange)}.station em{font-style:normal;opacity:.75}.underlink{width:max-content;padding-bottom:5px;border-bottom:1px solid currentColor;font:9px var(--mono);text-transform:uppercase}.underlink span{margin-left:12px;color:var(--orange)}
.hero{min-height:118svh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;overflow:hidden}.hero-kicker{grid-column:1/-1}.hero-kicker:before{content:"";display:inline-block;width:24px;height:1px;margin:0 10px 3px 0;background:var(--orange)}.lookout{position:absolute;left:50%;top:46%;width:min(42vw,620px);aspect-ratio:1;transform:translate(-50%,-50%);transition:transform 1.2s var(--ease)}.lookout-core{position:absolute;z-index:3;left:50%;top:50%;width:31%;aspect-ratio:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:var(--dark);box-shadow:0 0 0 1px rgba(255,150,23,.75),0 25px 90px rgba(29,29,28,.35)}.lookout-core small{margin-top:7px;font:6px var(--mono);text-transform:uppercase;opacity:.5}.hero-copy{position:relative;z-index:4;grid-column:1/-1;align-self:end;display:grid;grid-template-columns:1.4fr .6fr;align-items:end;gap:6vw}.hero-copy h1{margin:0;font:420 clamp(70px,10vw,155px)/.8 var(--serif);letter-spacing:-.067em}.hero-copy h1 em,.work-heading h2 em,.events-copy h2 em,.contact h2 em{color:var(--orange);font-weight:330}.hero-copy>p{max-width:430px;margin:0 0 50px;font-size:clamp(18px,1.7vw,25px);line-height:1.3}.hero-copy .underlink{grid-column:2;margin-top:-22px}.coordinate{position:absolute;right:calc(var(--edge) + 45px);top:110px;margin:0;text-align:right;font:7px/1.5 var(--mono);text-transform:uppercase}
.position{min-height:115svh;display:flex;flex-direction:column;justify-content:center}.position h2{max-width:1280px;margin:12vh 0;font:410 clamp(54px,7.4vw,112px)/.92 var(--serif);letter-spacing:-.055em}.position-points{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin-left:auto;border-top:1px solid var(--line)}.position-points p{margin:0;padding:18px 22px 0 0}.position-points b{display:block;color:var(--orange);font:7px var(--mono);text-transform:uppercase}.position-points span{display:block;margin-top:9px;font-size:16px}
.work{min-height:145svh}.work-heading{display:flex;justify-content:space-between;align-items:end;margin:5vh 0 0}.work-heading h2,.cap-head h2,.events-copy h2,.studio-head h2,.contact h2{margin:0;font:410 clamp(57px,7.3vw,112px)/.86 var(--serif);letter-spacing:-.06em}.work-heading p,.cap-head>p{margin:0;font:8px var(--mono);text-transform:uppercase}.work-map{position:relative;height:78vh;min-height:600px;margin:3vh -2vw 0}.work-map>svg{position:absolute;inset:0;width:100%;height:100%}.work-map>svg path{fill:none;stroke:rgba(244,241,234,.5);stroke-width:1;vector-effect:non-scaling-stroke}.work-window{position:absolute;left:50%;top:49%;width:min(34vw,520px);height:min(59vh,590px);margin:0;transform:translate(-50%,-50%);clip-path:polygon(7% 0,94% 4%,100% 79%,84% 100%,0 91%,3% 14%);background:var(--dark);box-shadow:0 28px 90px rgba(29,29,28,.3)}.work-images{position:absolute;inset:0}.work-images img{position:absolute;inset:0;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity .6s,transform 1.2s var(--ease)}.work-images img.active{opacity:1;transform:scale(1)}.work-window figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:65px 22px 22px;display:flex;justify-content:space-between;align-items:end;background:linear-gradient(transparent,rgba(29,29,28,.82))}.work-window strong{font:420 clamp(28px,3.2vw,50px)/1 var(--serif)}.work-window figcaption span{font:7px var(--mono);text-transform:uppercase}.map-node{position:absolute;border:0;background:none;padding:0;display:flex;align-items:center;gap:10px;cursor:pointer;font:7px var(--mono);text-transform:uppercase}.map-node i{position:relative;width:14px;height:14px;border:1px solid currentColor;border-radius:50%;transition:.35s}.map-node i:after{content:"";position:absolute;inset:-9px;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(.5);transition:.35s}.map-node:hover i,.map-node.active i{background:var(--orange);border-color:var(--orange);box-shadow:0 0 12px var(--orange)}.map-node.active i:after{opacity:.7;transform:scale(1)}.node-1{left:14%;top:28%}.node-2{right:12%;top:19%}.node-3{right:8%;bottom:23%}.node-4{left:13%;bottom:17%}
.capabilities{min-height:135svh;background:rgba(29,29,28,.97);margin-top:12vh}.cap-head{display:flex;justify-content:space-between;align-items:end;margin-top:5vh}.ring-system{position:relative;min-height:760px;margin-top:2vh}.rings{position:absolute;left:50%;top:50%;width:min(48vw,650px);aspect-ratio:1;transform:translate(-50%,-50%)}.rings-core{position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:var(--orange);color:var(--dark)}.rings-core span{font:600 19px var(--serif);letter-spacing:-.06em}.rings-core i{font-style:normal}.rings-core small{font:5px var(--mono);text-transform:uppercase}.cap-nav{position:absolute;z-index:3;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:15px}.cap-nav button{padding:0;border:0;background:none;cursor:pointer;font:400 clamp(26px,3vw,44px)/1 var(--serif);opacity:.35;transition:.35s}.cap-nav button:before{content:"";display:inline-block;width:0;height:1px;margin-right:0;vertical-align:middle;background:var(--orange);transition:.35s}.cap-nav button:hover,.cap-nav button.active{opacity:1;transform:translateX(8px)}.cap-nav button.active:before{width:26px;margin-right:12px}.cap-copy{position:absolute;z-index:3;right:0;top:50%;width:min(31vw,440px);transform:translateY(-50%)}.cap-kicker,.cap-tags{font:7px var(--mono);text-transform:uppercase;color:var(--orange)}.cap-copy h3{margin:18px 0;font:410 clamp(37px,4.5vw,67px)/.91 var(--serif);letter-spacing:-.045em}.cap-body{font-size:17px;line-height:1.45}.cap-tags{margin-top:25px;color:inherit;opacity:.48}
.events{min-height:125svh;overflow:hidden}.events figure{position:absolute;inset:0;margin:0}.events figure:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,29,28,.82),rgba(29,29,28,.16) 70%)}.events img{height:100%;object-fit:cover;filter:saturate(.65) contrast(1.05)}.events .station{position:relative;z-index:2}.events-copy{position:relative;z-index:2;min-height:calc(125svh - 200px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}.events-copy h2{font-size:clamp(67px,9.5vw,150px)}.events-copy>p{max-width:590px;margin:35px 0;font-size:clamp(18px,1.8vw,27px);line-height:1.32}
.studio{min-height:120svh}.studio-head{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:8vw;margin:10vh 0}.studio-head p{max-width:470px;margin:0;font-size:clamp(19px,2vw,28px);line-height:1.32}.founder-map{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:5vw;min-height:300px;padding-top:95px}.founder-map svg{position:absolute;inset:0;width:100%;height:100%}.founder-map svg path{fill:none;stroke:var(--line);stroke-width:1}.founder-map article{position:relative}.founder-map article:nth-of-type(2){margin-top:74px}.founder-map article:nth-of-type(3){margin-top:24px}.founder-map i{display:block;width:13px;height:13px;margin-bottom:35px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange)}.founder-map h3{margin:0;font:430 clamp(29px,3.2vw,47px)/1 var(--serif);letter-spacing:-.04em}.founder-map p{font:7px var(--mono);text-transform:uppercase}
.contact{min-height:105svh;background:var(--orange);color:var(--dark);display:flex;flex-direction:column;justify-content:space-between}.contact .station b{background:var(--dark);box-shadow:none}.contact .station span{color:var(--dark)}.contact h2{margin:6vh 0;font-size:clamp(69px,9.8vw,154px)}.contact h2 em{color:var(--ink)}.contact-ring{position:absolute;right:9vw;top:38%;width:clamp(160px,18vw,270px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--dark);color:var(--ink);transition:.6s var(--ease)}.contact-ring:hover{transform:scale(1.07) rotate(-7deg)}.contact-ring span{font:10px/1.2 var(--mono);text-align:center;text-transform:uppercase}.contact-ring b{position:absolute;right:22%;top:20%;color:var(--orange)}.email{width:max-content;font:420 clamp(37px,5.6vw,85px)/1 var(--serif);letter-spacing:-.045em;border-bottom:1px solid}.contact footer{display:grid;grid-template-columns:1fr 1fr auto;gap:25px;padding-top:50px;border-top:1px solid rgba(29,29,28,.45);font:7px var(--mono);text-transform:uppercase}
@media(max-width:900px){.site-header{height:66px;grid-template-columns:1fr auto}.header-left,.header-right{display:none}.logo{grid-column:1;justify-self:start}.menu-toggle{display:block;justify-self:end}.mobile-nav{position:fixed;z-index:95;inset:0;padding:100px var(--edge) 45px;background:var(--dark);flex-direction:column;justify-content:center}.mobile-nav.open{display:flex}.mobile-nav a{padding:15px 0;border-bottom:1px solid rgba(244,241,234,.3);font:400 clamp(45px,13vw,75px)/1 var(--serif)}body.menu-open .site-header{background:transparent}.roadmap{display:none}.section{padding:95px var(--edge) 65px}.hero{min-height:1020px;display:flex;flex-direction:column}.lookout{top:41%;width:108vw}.hero-copy{margin-top:auto;display:block}.hero-copy h1{font-size:clamp(61px,18vw,104px)}.hero-copy>p{margin:30px 0 24px}.hero-copy .underlink{display:block}.coordinate{right:var(--edge);top:88px}.position h2{font-size:clamp(48px,13vw,76px)}.position-points{grid-template-columns:1fr;margin-left:0}.position-points p{padding-bottom:18px;border-bottom:1px solid var(--line)}.work{min-height:1120px}.work-heading{display:block}.work-heading h2,.cap-head h2{font-size:clamp(49px,14vw,82px)}.work-heading p{margin-top:20px}.work-map{height:720px;margin-inline:-28vw}.work-window{width:62vw;height:470px}.node-1{left:18%}.node-2{right:14%}.node-4{left:17%}.node-3{right:10%}.capabilities{min-height:1250px}.cap-head{display:block}.cap-head>p{margin-top:20px}.ring-system{min-height:960px}.rings{top:33%;width:112vw}.cap-nav{top:66%;transform:none}.cap-nav button{font-size:29px}.cap-copy{top:auto;bottom:0;width:100%;transform:none}.cap-copy h3{font-size:43px}.studio-head{grid-template-columns:1fr}.founder-map{grid-template-columns:1fr;gap:45px;padding-top:50px}.founder-map svg{display:none}.founder-map article:nth-of-type(2),.founder-map article:nth-of-type(3){margin-top:0}.founder-map i{margin-bottom:18px}.contact{min-height:900px}.contact h2{font-size:clamp(62px,17vw,105px)}.contact-ring{right:-8vw;top:55%;width:180px}.contact footer{grid-template-columns:1fr auto}}
@media(max-width:520px){.work-window{width:69vw}.map-node{flex-direction:column;align-items:flex-start}.work-window figcaption{display:block}.work-window figcaption span{display:block;margin-top:7px}.events figure:after{background:linear-gradient(0deg,rgba(29,29,28,.85),rgba(29,29,28,.1) 80%)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}.lookout{transform:translate(-50%,-50%)!important}}

/* Density refinement: every section gets one map gesture, not three. */
.terrain{opacity:1;transform:scale(1);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}.terrain svg{opacity:.28}.terrain path{stroke:rgba(244,241,234,.5)}
body[data-scene="work"] .terrain,body[data-scene="dark"] .terrain,body[data-scene="photo"] .terrain,body[data-scene="arrival"] .terrain{opacity:0;transform:scale(1.035)}body[data-scene="terrain-soft"] .terrain{opacity:.58;transform:scale(1.018)}
.hero{background:transparent}.work{background:linear-gradient(180deg,rgba(109,104,89,.98),rgba(101,96,82,.98))}
.hero{min-height:100svh}.lookout{top:41%;width:min(36vw,520px)}.hero-copy h1{font-size:clamp(66px,8.3vw,128px)}
.work{min-height:130svh;background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.045),transparent 28%),#6d6859}.work-map>svg path{vector-effect:non-scaling-stroke}.work-window{width:min(31vw,470px);height:min(56vh,550px);box-shadow:0 35px 95px rgba(29,29,28,.42)}
.contact{min-height:100svh;overflow:hidden;background:var(--dark);color:var(--ink)}.contact .station b{background:var(--orange);box-shadow:0 0 13px rgba(255,150,23,.6)}.contact .station span{color:var(--orange)}.contact-layout{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:8vw;margin:12vh 0 auto}.contact h2{margin:0;font-size:clamp(64px,8.7vw,136px)}.contact h2 em{color:var(--orange)}.contact footer{position:relative;z-index:2;border-color:rgba(244,241,234,.28)}

@media(max-width:900px){.hero{min-height:940px}.lookout{top:39%;width:92vw}.hero-copy h1{font-size:clamp(58px,17vw,94px)}.work{min-height:1080px}.work-map{margin-inline:-17vw}.work-window{width:65vw;height:450px}.contact{min-height:850px}.contact-layout{grid-template-columns:1fr;gap:50px;margin:8vh 0 auto}.contact h2{font-size:clamp(57px,15.5vw,90px)}}
@media(max-width:520px){.terrain svg{opacity:.18}.work-map{margin-inline:-14vw}.work-window{width:70vw}}

/* Original Kabana viewpoint atmosphere for the light scenes. */
:root{--paper:#f3efe6}
body{background:var(--paper)}
.terrain{background:var(--paper);color:var(--dark)}.terrain svg{position:absolute;inset:0;width:100%;height:100%;opacity:.25;transform:none}.terrain path{fill:none;stroke:currentColor}.terrain-focal{fill:var(--orange);stroke:none}.terrain-horizon{position:absolute;inset:0;background:radial-gradient(135% 90% at 50% 26%,transparent 52%,rgba(19,18,16,.1) 100%),linear-gradient(180deg,rgba(255,253,247,0) 40%,rgba(255,253,247,.24) 49.2%,rgba(19,18,16,.19) 50.6%,rgba(19,18,16,.055) 54%,transparent 66%)}.terrain-sun{position:absolute;z-index:2;left:56%;top:28%;width:26px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 38%,#ffd487 0%,var(--orange) 55%,#f2760e 100%);box-shadow:0 0 25px 8px rgba(255,150,23,.35)}.terrain-sun:before{content:"";position:absolute;left:50%;top:50%;width:94px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,150,23,.22),transparent 70%)}.terrain-sun i{position:absolute;left:50%;top:-115px;width:1px;height:94px;background:linear-gradient(transparent,rgba(255,150,23,.65))}
.hero,.position,.studio{color:var(--dark)}.hero .lookout-core{width:150px;color:var(--ink);box-shadow:0 0 0 1px var(--orange),0 18px 50px rgba(29,29,28,.18)}.position-points{border-color:rgba(29,29,28,.25)}.studio .founder-map svg path{stroke:rgba(29,29,28,.24)}
body[data-scene="terrain"] .site-header,body[data-scene="terrain-soft"] .site-header{background:rgba(243,239,230,.78);color:var(--dark);border-color:rgba(29,29,28,.28)}body[data-scene="terrain"] .roadmap,body[data-scene="terrain-soft"] .roadmap{color:var(--dark)}
body[data-scene="work"] .site-header{background:rgba(109,104,89,.86);color:var(--ink);border-color:rgba(244,241,234,.45)}body[data-scene="dark"] .site-header,body[data-scene="photo"] .site-header{background:rgba(29,29,28,.84);color:var(--ink);border-color:rgba(244,241,234,.3)}

@media(max-width:900px){.terrain-sun{left:57%;top:27%}body.menu-open .site-header{color:var(--ink)}}

/* Direction refinement: original sun rail, route-map work, five interactive rings. */
/* Clean dotted sun rail (from the redesign): moving sun on a dashed curve, time above, place below. */
.roadmap{position:fixed;z-index:80;right:16px;top:50%;width:56px;height:min(70vh,560px);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:inherit;pointer-events:none;transition:color .5s}.roadmap-time,.roadmap-place{font:7px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.roadmap-place{text-align:center}.roadmap-curve{width:52px;height:470px;overflow:visible}.roadmap-path{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:2 6;opacity:.45;vector-effect:non-scaling-stroke}.roadmap-sun{fill:var(--orange);stroke:none;filter:drop-shadow(0 0 8px rgba(255,150,23,.6))}
/* The rail only earns its keep on wide viewports; below that it would crowd the content. */
@media(max-width:1180px){.roadmap{display:none}}
.hero .lookout-core{width:clamp(146px,12vw,178px);padding:0 13px;overflow:hidden;cursor:pointer;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}.hero .lookout-core:hover,.hero .lookout-core:focus-visible{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 0 1px var(--orange),0 24px 70px rgba(29,29,28,.25)}.hero .lookout-core small{font-size:5px;white-space:nowrap}
.terrain-sun{display:none}.work{min-height:145svh;overflow:hidden}.work-heading{position:relative;z-index:3;pointer-events:none}.work-map{position:absolute;inset:90px calc(var(--edge) + 36px) 55px;height:auto;min-height:0;margin:0}.work-window{left:72%;top:17%;width:min(37vw,540px);height:min(68vh,610px);transform:translateX(-50%);clip-path:none;border-radius:2px}.work-window figcaption{padding:72px 20px 20px}.work-count{position:absolute;left:0;right:0;bottom:-25px;display:flex;justify-content:space-between;font:7px var(--mono);text-transform:uppercase}.map-node{gap:8px}.map-node span{opacity:.76}.node-1{left:44%;top:10%}.node-2{left:1%;right:auto;top:27%}.node-3{left:25%;right:auto;top:50%}.node-4{left:3%;bottom:auto;top:77%}.node-5{left:34%;bottom:2%}.map-node.active span{color:var(--orange);opacity:1}
.rings-core{width:15%;z-index:2}.ring-system[data-active] .cap-ring{transform:none!important}
.founder-map{padding-top:35px}.founder-map article:nth-of-type(2),.founder-map article:nth-of-type(3){margin-top:0}
.contact{min-height:105svh;background:var(--orange);color:var(--dark);overflow:hidden}.contact .station b{background:var(--dark);box-shadow:none}.contact .station span{color:var(--dark)}.contact h2{margin:6vh 0;font-size:clamp(69px,9.8vw,154px)}.contact h2 em{color:var(--ink)}.contact-ring{display:grid}.contact .email{display:block}.contact footer{border-color:rgba(29,29,28,.45)}body.at-contact .site-header{background:rgba(255,150,23,.88);color:var(--dark);border-color:rgba(29,29,28,.46)}body.at-contact .site-header .logo span,body.at-contact .site-header .brief span{color:var(--dark)}body.at-contact .roadmap{color:var(--dark)}body.at-contact .roadmap-sun{fill:var(--dark);filter:none}

@media(max-width:900px){.roadmap{display:none}.hero .lookout-core{width:150px}.work{min-height:1200px}.work-map{inset:150px -7vw 55px;height:auto;margin:0}.work-window{left:60%;top:27%;width:66vw;height:500px}.node-1{left:34%;top:14%}.node-2{left:3%;top:29%}.node-3{left:8%;top:54%}.node-4{left:2%;top:79%}.node-5{left:31%;bottom:0}.contact{min-height:900px}.contact h2{font-size:clamp(62px,17vw,105px)}.contact-ring{right:-8vw;top:55%;width:180px}}
@media(max-width:520px){.work-window{left:60%;width:69vw;height:470px}.map-node span{font-size:6px}.work-count{bottom:-21px}.contact .email{font-size:clamp(32px,11vw,48px)}}

.work-heading h2{font-size:clamp(54px,6vw,86px)}
@media(max-width:900px){.work-heading h2{font-size:clamp(50px,13vw,76px)}}

/* Pinned work roadmap — adapted from the supplied scroll driver. */
.work{height:calc(5 * 72svh + 100svh);min-height:4400px;padding:0;overflow:visible;background:#6d6859}.work-scene{position:relative;height:100svh;min-height:660px;padding:116px calc(var(--edge) + 34px) 58px;overflow:hidden;background:radial-gradient(120% 80% at 82% 10%,rgba(255,150,23,.08),transparent 48%),linear-gradient(180deg,#716b5c,#655f50)}.work-scene.is-pinned{position:fixed;z-index:70;inset:0;width:100%;height:100svh}.work-scene:after{content:"";position:absolute;z-index:0;left:0;right:0;top:49%;height:18%;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(244,241,234,.12) 45%,rgba(29,29,28,.14) 53%,transparent 100%)}.work-scene .station,.work-heading{position:relative;z-index:4}.work-heading{display:flex;justify-content:space-between;align-items:end;margin:42px 0 0}.work-heading h2{font-size:clamp(54px,6.1vw,90px);max-width:780px}.work-heading p{padding-bottom:8px}.work-map{position:absolute;z-index:1;inset:92px calc(var(--edge) + 34px) 48px;height:auto;min-height:0;margin:0}.work-route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.work-route-svg .work-route-bg{fill:none;stroke:rgba(244,241,234,.5);stroke-width:1.2;vector-effect:non-scaling-stroke}.work-route-svg .work-route-draw{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,150,23,.7));vector-effect:non-scaling-stroke}.work-window{left:auto;right:9%;top:50%;width:clamp(250px,28vw,445px);height:auto;aspect-ratio:3/4;transform:translateY(-50%);clip-path:none;border-radius:2px;box-shadow:0 30px 80px rgba(29,29,28,.34)}.work-window figcaption{padding:70px 20px 20px}.work-count{bottom:-25px}.map-node{z-index:3}.node-1{left:55%;top:9%}.node-2{left:4%;top:42%;right:auto}.node-3{left:31%;top:51%;right:auto}.node-4{left:7%;top:75%;bottom:auto}.node-5{left:37%;top:91%;bottom:auto}.map-node i{width:10px;height:10px}.map-node.active i{transform:scale(1.35)}.map-node.active i:after{inset:-8px}.map-node span{font-size:7px}.map-node.active span{color:var(--ink)}

/* Five rings, each clickable on its line; no floating dot controls. */
.cap-ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.cap-ring-svg .cap-ring{fill:none;stroke:rgba(244,241,234,.35);stroke-width:1.2;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer;transition:stroke .35s,filter .35s}.cap-ring-svg .cap-ring:hover,.cap-ring-svg .cap-ring:focus,.cap-ring-svg .cap-ring.active{stroke:var(--orange);stroke-width:1.6;filter:drop-shadow(0 0 7px rgba(255,150,23,.45));outline:none}.rings-core{z-index:4;width:16%;text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s}.rings-core:hover,.rings-core:focus-visible{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 0 1px var(--ink),0 0 28px rgba(255,150,23,.38);outline:none}.rings-core small{font-size:4.5px;text-align:center}

/* Contact stays readable at narrow desktop and landscape tablet widths. */
@media (max-width:1080px) and (min-width:901px){.contact h2{max-width:63%;font-size:clamp(59px,8.2vw,94px)}.contact-ring{right:4vw;top:36%;width:clamp(145px,17vw,190px)}.email{font-size:clamp(35px,5.1vw,58px)}}
@media (max-width:900px){.work{height:auto;min-height:1180px;padding:0}.work-scene{position:relative;height:1180px;min-height:0;padding:95px var(--edge) 60px}.work-heading{display:block;margin-top:26px}.work-heading h2{font-size:clamp(48px,12vw,74px);max-width:90%}.work-heading p{margin-top:14px;padding-bottom:0}.work-map{inset:300px -6vw 42px}.work-window{right:6%;width:60vw;max-width:360px;top:50%;aspect-ratio:3/4}.node-1{left:48%;top:8%}.node-2{left:4%;top:28%}.node-3{left:20%;top:53%}.node-4{left:5%;top:76%}.node-5{left:31%;top:92%}.rings{width:112vw}.cap-ring-svg .cap-ring{stroke-width:1.4}.rings-core{width:16%}.contact h2{max-width:62%;font-size:clamp(54px,10vw,84px)}.contact-ring{right:4vw;top:33%;width:155px}.email{font-size:clamp(31px,6vw,52px)}}
@media (max-width:900px) and (orientation:landscape){.contact{min-height:100svh;padding-top:78px;padding-bottom:38px}.contact h2{max-width:63%;margin:5vh 0;font-size:clamp(50px,8.6vw,76px)}.contact-ring{top:29%;right:4vw;width:148px}.contact footer{padding-top:22px}.email{font-size:clamp(30px,5vw,44px)}}
@media (max-width:520px){.work-scene{height:1160px}.work-map{inset:290px -9vw 36px}.work-window{right:3%;width:66vw;max-width:none}.work-heading h2{max-width:100%;font-size:clamp(47px,13vw,67px)}.map-node span{font-size:6px}.contact h2{max-width:100%;font-size:clamp(53px,15vw,76px)}.contact-ring{top:auto;bottom:290px;right:-6px;width:132px}.email{position:relative;z-index:2;font-size:clamp(31px,10vw,44px)}}

/* On wide desktop the headline must clear the orb; the core is a real button, so reset it. */
@media (min-width:1081px){.contact h2{max-width:64%}.contact-ring{top:32%}}
.rings-core{border:0;padding:0;-webkit-appearance:none;appearance:none}

/* Mobile capabilities: stack rings → legend → copy so nothing overlaps (last rule wins). */
@media (max-width:900px){
  .capabilities{min-height:0}
  .ring-system{min-height:0;display:flex;flex-direction:column;margin-top:6vh}
  .rings{position:relative;left:auto;top:auto;order:1;width:min(84vw,400px);margin:0 auto 42px;transform:none}
  .rings-core{width:20%}
  .cap-nav{position:relative;left:auto;top:auto;order:2;transform:none;margin-bottom:30px}
  .cap-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;order:3;width:100%;transform:none}
}

/* ============ Seamless stage (v2) ============ */
/* One continuous fixed background. Tone layers cross-fade by scene; the paper
   terrain (.terrain) already fades per scene, so together they dissolve with
   zero seams. Sections themselves become transparent. */
.stage{position:fixed;inset:0;z-index:-4;pointer-events:none}
.stage-layer{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.stage-olive{background:radial-gradient(120% 80% at 82% 12%,rgba(255,150,23,.09),transparent 46%),linear-gradient(180deg,#726c5d,#645f50)}
.stage-dark{background:radial-gradient(90% 70% at 50% 30%,#232120,#141312 70%)}
.stage-orange{background:var(--orange)}
body[data-scene="work"] .stage-olive{opacity:1}
body[data-scene="dark"] .stage-dark,body[data-scene="photo"] .stage-dark{opacity:1}
body[data-scene="arrival"] .stage-orange{opacity:1}

/* Sections ride on the stage — no opaque blocks, no margins that reveal the page. */
.hero,.position,.work,.work-scene,.clients,.proof,.capabilities,.events,.studio,.contact{background:transparent!important}
.capabilities{margin-top:0!important}
.work-scene:after{opacity:.5}

/* Caption no longer sits on the photo: instruction drops under the heading, left. */
.work-heading{display:block!important}
.work-heading p{margin-top:16px;padding-bottom:0;opacity:.75}
@media(prefers-reduced-motion:reduce){.stage-layer{transition:opacity .3s}}


/* ============ Four founders — title + short role under each name ============ */
.founder-map{grid-template-columns:repeat(4,1fr);gap:2.6vw}
.founder-map h3{font-size:clamp(22px,2.2vw,33px)}
.founder-map .founder-title{margin:11px 0 0;color:var(--orange);font:7px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.founder-map .founder-role{margin:8px 0 0;max-width:23ch;font:400 13px/1.46 var(--sans);text-transform:none;letter-spacing:0;opacity:.68}
@media(max-width:900px){.founder-map{grid-template-columns:1fr;gap:38px}.founder-map .founder-role{max-width:42ch}}

/* ============ Leadership block + warmer work scene ============ */
.studio-label{margin:5vh 0 24px;color:var(--orange);letter-spacing:.14em}
.founder-map{gap:2.4vw}
.founder-map .founder-title{margin:10px 0 0}
.founder-map .founder-role{max-width:none;font-size:12.5px;line-height:1.5;opacity:.6}
@media(max-width:900px){.founder-map .founder-role{font-size:14px}}

/* The work scene reads warmer — an amber earth tone, not gray-green. */
.stage-olive{background:radial-gradient(120% 78% at 79% 6%,rgba(255,150,23,.2),transparent 44%),linear-gradient(180deg,#8a6f4c 0%,#785d3d 52%,#654c33 100%)}

/* ============ Team row — aligned names, each linking out ============ */
.founder-map{grid-template-columns:repeat(4,1fr);align-items:start;gap:2.1vw}
.founder-map article{margin-top:0!important}
.founder-map h3{white-space:nowrap;font-size:clamp(17px,1.9vw,26px)}
.founder-map h3 a{color:inherit;text-decoration:none;transition:color .25s}
.founder-map h3 a:hover,.founder-map h3 a:focus-visible{color:var(--orange);outline:none}
.studio-head h2 em{color:var(--orange);font-weight:330}
.footer-ig{border-bottom:1px solid currentColor;transition:color .25s,border-color .25s}
.footer-ig:hover{color:var(--orange);border-color:var(--orange)}
@media(max-width:900px){.founder-map h3{white-space:normal}}

/* ============ Launch audit fixes: legibility, focus, sticky route, mobile ============ */
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.contact-ring:focus-visible{outline-offset:-7px}
.site-header nav a,.menu-toggle,.underlink{font-size:10px!important}
.micro,.station{font-size:10px!important}
.roadmap-time,.roadmap-place,.coordinate{font-size:9px!important}
.hero .lookout-core small,.rings-core small{font-size:9px!important;opacity:.7}
.position-points b,.work-heading p,.cap-head>p,.work-window figcaption span,.work-count,.cap-kicker,.cap-tags,.founder-map .founder-title,.founder-map p,.contact footer{font-size:10px!important}
.map-node,.map-node span{font-size:9px!important}
.hero .hero-copy h1 em,.hero .underlink span,.position .station span,.position .position-points b,.studio .station span,.studio .studio-label,.studio .studio-head h2 em,.studio .founder-title{color:var(--orange-ink)}
.contact h2 em{color:var(--dark)}
@media(min-width:901px){.work-scene,.work-scene.is-pinned{position:sticky;z-index:70;top:0;right:auto;bottom:auto;left:auto;width:auto;height:100svh}}
@media(max-width:900px){.founder-map{grid-template-columns:1fr;gap:38px}.founder-map article{width:100%}.founder-map h3{font-size:clamp(25px,8vw,36px)}.mobile-nav a{font-size:clamp(42px,13vw,68px)}}

/* ============ Final brand assets — generated responsive logo system ============ */
.logo{position:relative;grid-column:2;display:grid;place-items:center;width:clamp(108px,9vw,132px);height:58px;line-height:0;letter-spacing:0}
.logo-master{display:block;width:100%}
.logo-art{display:none;width:100%;height:auto}
.logo-art-primary{display:block}
body[data-scene="work"] .logo-art-primary,
body[data-scene="dark"] .logo-art-primary,
body[data-scene="photo"] .logo-art-primary,
body[data-scene="arrival"] .logo-art-primary{display:none}
body[data-scene="work"] .logo-art-reverse,
body[data-scene="dark"] .logo-art-reverse,
body[data-scene="photo"] .logo-art-reverse{display:block}
body[data-scene="arrival"] .logo-art-mono{display:block}
body.menu-open .logo-art{display:none}
body.menu-open .logo-art-reverse{display:block}
.logo-capabilities{position:absolute;inset:0;display:none;place-items:center}
.logo-capability{position:absolute;left:50%;top:50%;display:block;width:60px;max-height:50px;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.78) rotate(-3deg);transition:opacity .26s ease,transform .55s var(--ease)}
.logo-capability.active{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
body.capability-signature .logo-master{display:none}
body.capability-signature .logo-capabilities{display:grid}
body.capability-signature .logo{width:74px}
.rings-core .rings-logo{display:block;width:50%;height:auto}
.rings-core .rings-icon{position:absolute;left:50%;top:50%;display:block;width:72%;height:72%;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(-4deg);transition:opacity .22s ease,transform .48s var(--ease);pointer-events:none}
.rings-core .rings-icon.active{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
@media(max-width:900px){.logo{grid-column:1;width:108px;justify-self:start}}

/* ============ Selected clients — an open route, not a logo-card grid ============ */
.clients{position:relative;padding:112px calc(var(--edge) + 36px) 132px;background:var(--dark);color:var(--ink);overflow:hidden}
.clients-head{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:8vw;margin:5vh 0 48px}
.clients-head h2{margin:0;font:410 clamp(57px,7.3vw,112px)/.86 var(--serif);letter-spacing:-.06em}
.clients-head h2 em{color:var(--orange);font-weight:330}
.clients-head p{max-width:390px;margin:0 0 8px;font-size:clamp(17px,1.45vw,22px);line-height:1.4}
.clients-field{position:relative;min-height:420px}
.clients-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.clients-route-line{fill:none;stroke:rgba(244,241,234,.3);stroke-width:1.15;vector-effect:non-scaling-stroke}
.clients-route-stops{display:none}
.client-grid{position:absolute;z-index:1;inset:0;margin:0;padding:0;list-style:none}
.client-grid li{position:absolute;top:50%;width:clamp(165px,16vw,270px);height:0;color:var(--ink);transition:color .3s}
.client-grid li:nth-child(1){left:5%;transform:none}
.client-grid li:nth-child(2){left:27.5%;transform:translateX(-50%)}
.client-grid li:nth-child(3){left:50%;transform:translateX(-50%)}
.client-grid li:nth-child(4){left:72.5%;transform:translateX(-50%)}
.client-grid li:nth-child(5){left:95%;transform:translateX(-100%)}
.client-grid li:before{content:"";position:absolute;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px rgba(255,150,23,.75)}
.client-grid li:nth-child(1):before{left:0}
.client-grid li:nth-child(n+2):nth-child(-n+4):before{left:50%;transform:translateX(-50%)}
.client-grid li:nth-child(5):before{right:0}
.client-label{position:absolute;display:block;width:100%;transition:transform .35s var(--ease)}
.client-grid li:nth-child(odd) .client-label{bottom:25px}
.client-grid li:nth-child(even) .client-label{top:25px}
.client-grid li:nth-child(n+2):nth-child(-n+4) .client-label{text-align:center}
.client-grid li:nth-child(5) .client-label{text-align:right}
.client-grid li:hover{color:var(--orange)}
.client-grid li:hover .client-label{transform:translateY(-5px)}
.client-index,.client-grid small{font:9px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;opacity:.62}
.client-mark{display:block;margin:12px 0 10px;font:600 clamp(38px,4vw,68px)/.82 var(--serif);letter-spacing:-.06em}
.client-mark-cheekys{font-style:italic;font-weight:430}
.client-mark-rambo{font-weight:360;letter-spacing:-.045em}
.client-mark-idesuss{font-weight:470}
.client-mark-storybeat{font-size:clamp(34px,3.6vw,61px);font-weight:350;letter-spacing:-.045em}
@media(max-width:900px){.clients{padding:95px var(--edge) 105px}.clients-head{grid-template-columns:1fr;gap:28px;margin:5vh 0 44px}.clients-head h2{font-size:clamp(49px,14vw,82px)}.clients-head p{font-size:17px}.clients-field{min-height:0}.clients-route{display:none}.client-grid{position:relative;inset:auto}.client-grid li,.client-grid li:nth-child(n){position:relative;left:auto;right:auto;top:auto;width:auto;height:auto;margin:0 0 42px;padding:0 0 0 22px;transform:none;text-align:left}.client-label,.client-grid li:nth-child(n) .client-label{position:relative;top:auto;bottom:auto;width:auto;text-align:left}.client-grid li:nth-child(n):before{left:0;right:auto;top:4px;width:7px;height:7px;transform:none}.client-grid li:hover .client-label{transform:translateX(6px)}.client-mark{margin:12px 0 10px;font-size:clamp(47px,14vw,70px)}.client-grid small{display:block}}

/* ============ Experience proof — one combined team-wide total ============ */
.proof{position:relative;min-height:760px;padding-top:112px;padding-bottom:132px;color:var(--ink);overflow:hidden}
.proof-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:8vw;min-height:510px;margin-top:4vh}
.proof-stat{position:relative;align-self:center;display:flex;min-height:350px;padding:30px;align-items:center;justify-content:center;text-align:center}
.proof-number{display:flex;align-items:flex-start;justify-content:center;font:390 clamp(132px,13vw,218px)/.78 var(--serif);letter-spacing:-.075em;white-space:nowrap}
.proof-number sup{position:relative;top:.04em;margin-left:.12em;color:var(--orange);font:400 .2em/1 var(--mono);letter-spacing:0}
.proof-copy{position:relative;z-index:1;max-width:760px;padding-bottom:8px}
.proof-copy h2{margin:0;font:410 clamp(57px,6.4vw,100px)/.88 var(--serif);letter-spacing:-.055em}
.proof-copy h2 em{color:var(--orange);font-weight:330}
.proof-copy>p{max-width:650px;margin:38px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.52}
@media(max-width:900px){.proof{min-height:0;padding-top:95px;padding-bottom:105px}.proof-grid{grid-template-columns:1fr;gap:38px;min-height:0;margin-top:38px}.proof-stat{min-height:230px;padding:26px 0}.proof-number{font-size:clamp(108px,36vw,166px)}.proof-copy h2{font-size:clamp(49px,14vw,82px)}.proof-copy>p{margin-top:28px;font-size:17px}}

/* The capability hub is intentionally only Kabana's orange point. */
.rings-core{width:11%;min-width:54px;background:var(--orange);cursor:pointer;pointer-events:auto}
@media(max-width:900px){.rings-core{width:13%;min-width:48px}}

/* ============ Commercial copy pass — clearer offer and lower-friction CTA ============ */
.hero-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:-22px}
.hero-copy .hero-actions .underlink{grid-column:auto;margin:0}
.hero-copy>p{max-width:520px}
.cap-head h2 em{color:var(--orange);font-weight:330}
.work-heading p{max-width:410px;text-align:right;line-height:1.5}
.work-window figcaption span{max-width:48%;text-align:right;line-height:1.45}
.contact-layout h2{max-width:none!important}
.contact-intro{max-width:620px;margin:28px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.45}
@media(max-width:900px){.hero-actions{display:flex;margin-top:0;gap:14px 24px}.hero-copy .hero-actions .underlink{display:block}.hero .coordinate{top:150px}.work-heading p{max-width:330px;text-align:left}.contact{min-height:980px}.contact-layout{gap:38px;margin:6vh 0 auto}.contact-intro{margin-top:22px;font-size:17px}}

/* The enquiry is a destination marker, not a rectangular UI card. */
.contact-ring.contact-ring-offer{position:relative;inset:auto;right:auto;top:auto;width:clamp(210px,22vw,300px);justify-self:center;display:grid;place-items:center;padding:28px;border:0;background:var(--dark);color:var(--ink);box-shadow:0 22px 65px rgba(29,29,28,.18)}
.contact-ring-offer span{display:block;font:inherit;text-align:center;text-transform:none}
.contact-ring-offer small{display:block;margin-bottom:16px;font:8px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.contact-ring-offer strong{display:block;font:410 clamp(25px,2.6vw,39px)/.92 var(--serif);letter-spacing:-.045em}
.contact-ring-offer b{right:20%;top:17%;font:400 18px var(--mono)}
.contact-ring-offer:hover,.contact-ring-offer:focus-visible{transform:scale(1.05) rotate(-4deg);outline:2px solid var(--dark);outline-offset:7px}
@media(max-width:900px){.contact-ring.contact-ring-offer{position:relative;inset:auto;right:auto;top:auto;width:min(66vw,245px);justify-self:start}.contact-ring-offer strong{font-size:30px}}

/* ============ Bilingual navigation ============ */
.language-switch{display:flex;align-items:center;gap:6px;white-space:nowrap}
.language-switch button{position:relative;padding:3px 0;border:0;background:none;color:inherit;cursor:pointer;font:9px var(--mono);letter-spacing:.08em;opacity:.42;transition:opacity .25s}
.language-switch button:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--orange);transform:scaleX(0);transition:transform .25s var(--ease)}
.language-switch button:hover,.language-switch button:focus-visible,.language-switch button.active{opacity:1;outline:none}
.language-switch button.active:after{transform:scaleX(1)}
.language-switch>span{font:8px var(--mono);opacity:.35}
.language-switch-mobile{display:none}
body.at-contact .language-switch button.active:after{background:var(--dark)}
@media(max-width:900px){.site-header{grid-template-columns:1fr auto auto;column-gap:15px}.language-switch-mobile{display:flex;grid-column:2}.menu-toggle{grid-column:3}.language-switch button{font-size:9px}}

/* ============ Approved logo placements ============ */
.header-studio-group{display:flex;align-items:center;gap:18px}
.hero .lookout-symbol{display:block;width:clamp(62px,5.4vw,78px);height:auto;margin:0 auto 5px}
.hero .lookout-core small{margin-top:0}
.contact footer{grid-template-columns:78px minmax(0,1fr) minmax(0,1fr) auto;align-items:end}
.footer-stacked-logo{display:block;width:58px;height:auto;align-self:end}
@media(max-width:900px){
  .contact footer{grid-template-columns:58px 1fr auto;align-items:end}
  .footer-stacked-logo{width:46px}
  /* Mobile footer: services line hidden, Instagram line stays — the only mobile footer rule now. */
  .contact footer span.footer-ig-line{display:block}
  .contact footer span.footer-services{display:none}
}

/* ============ BRAND MARK FAMILY — per-capability ratios + work frames ============ */
/* One ratio per capability (client: "cinematic for cinematic, social for social"):
   strategy→wide, identity→square, production→cinema, social→portrait, events→wide.
   Sizes are NOT constant-width or constant-height — a 2.35:1 cinema frame and a 4:5
   portrait frame only read at the same optical size if normalised. Each mark is scaled
   by the geometric mean of equal-frame-area and equal-frame-diagonal, then converted
   from frame size back to element size through that file's own fill fraction (the
   viewBox carries different dead margin per ratio: 88.1/81.1/91.9/81.1% wide). */

/* Header signature — cream on the dark scenes. width:auto, so the ratio sets the width;
   heights are tuned so all four element diagonals land within 3% (50.8–52.4px) and the
   tallest member (portrait, 40px) still clears the 66px mobile header. */
.logo-capability{width:auto;max-width:none;max-height:none}
.logo-capability[data-cap-logo="strategy"],
.logo-capability[data-cap-logo="events"]{height:27px}      /* wide 1.6:1   → 43.1 x 27 */
.logo-capability[data-cap-logo="identity"]{height:36.5px}  /* square 1:1   → 36.5 x 36.5 */
.logo-capability[data-cap-logo="production"]{height:20.5px}/* cinema 2.35:1→ 48.2 x 20.5 */
.logo-capability[data-cap-logo="social"]{height:40px}      /* portrait 4:5 → 32 x 40 */

/* Orange core — black, dot dropped (the disc is already the dot). Both maxima are given
   in % of the core diameter and agree with the intrinsic ratio, so the image lands
   exactly on them; if % max-height ever fails to resolve, max-width alone gives the same
   result. Largest element diagonal is 68% of the diameter — every corner point sits on
   the same inner circle with 16% clear all round. */
.rings-core .rings-icon{width:auto;height:auto;object-fit:contain}
.rings-core .rings-icon[data-ring-logo="strategy"],
.rings-core .rings-icon[data-ring-logo="events"]{max-width:56%;max-height:35.1%}
.rings-core .rings-icon[data-ring-logo="identity"]{max-width:47.3%;max-height:47.3%}
.rings-core .rings-icon[data-ring-logo="production"]{max-width:62.6%;max-height:26.6%}
.rings-core .rings-icon[data-ring-logo="social"]{max-width:41.3%;max-height:51.6%}

/* Hero: the dark disc is gone — the wide master stands on the paper terrain as the hero's
   focal object. Everything below unwinds the disc chrome set in the earlier layers
   (background / border-radius / ring shadow / fixed circular box / padding / overflow). */
.hero .lookout-core{width:auto;aspect-ratio:auto;padding:0;overflow:visible;border-radius:0;background:none;box-shadow:none;color:var(--dark);transition:transform .5s var(--ease)}
/* Affordance is now motion, not contrast: the mark lifts and the dot opens up. No
   outline:none anywhere here, so the site-wide a:focus-visible ring still applies. */
.hero .lookout-core:hover,.hero .lookout-core:focus-visible{transform:translate(-50%,-50%) translateY(-7px);box-shadow:none}
.hero .lookout-core .lookout-dot{transform-box:fill-box;transform-origin:center;transition:transform .45s var(--ease)}
.hero .lookout-core:hover .lookout-dot,.hero .lookout-core:focus-visible .lookout-dot{transform:scale(1.3)}
.hero .lookout-symbol{width:clamp(180px,17vw,260px);height:auto;margin:0 auto 18px}
.hero .lookout-core small{margin-top:0;opacity:.6}
/* Raised from 41%: .hero-copy is bottom-anchored and grows UPWARD, and the HU headline
   runs a line longer than the EN one, so the mark has to clear the taller of the two. */
.hero .lookout{top:36%}

/* Footer stacked wordmark — the new art carries less ink in its box (90.4% tall vs the
   old master's 97.4%), so the width goes up ~10% to hold the same optical weight. */
.footer-stacked-logo{width:64px}

/* ---- Selected work: the mark IS the frame ---- */
/* 4:5 maps 1:1 onto logo-portrait (1000x1250), so the frame art and the clip agree.
   If clip-path is unsupported the photo simply stays rectangular behind the frame. */
.brand-clip-defs{position:absolute;width:0;height:0;overflow:hidden}
.work-window{aspect-ratio:4/5;background:none;box-shadow:none;border-radius:0}
.work-images{clip-path:url(#mark-window-portrait)}
.work-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 18px 42px rgba(29,29,28,.34))}
/* Caption lives inside the aperture: its bottom edge at 83% clears the inner window's
   bottom (84.9% at centre, 85.9% at the corners) and the sides clear the bowed inner
   edges (20.8%/70.3% at the caption's top). */
.work-window figcaption{left:21%;right:30%;bottom:17%;padding:34px 0 6px;background:linear-gradient(transparent,rgba(29,29,28,.72))}
.work-window strong{font-size:clamp(19px,2vw,30px)}
.work-window figcaption span{max-width:54%}
@media (max-width:900px){
  .work-window{aspect-ratio:4/5}
  /* Stacked, and held to the same aperture inset as desktop — the scope line is 10px
     mono (locked by the audit), so it wraps to 3 lines rather than spilling on the frame. */
  .work-window figcaption{display:block;left:23%;right:30%;bottom:17%;padding:26px 0 5px}
  .work-window figcaption span{display:block;max-width:100%;margin-top:6px;text-align:left}
  .footer-stacked-logo{width:51px}
  .hero .lookout-symbol{width:min(48vw,236px);margin-bottom:15px}
}
/* Structural fix for the headline collision. .hero-copy is bottom-anchored and grows
   UPWARD, so an absolutely-positioned mark is hit whenever the headline gains a line —
   the HU copy always runs longer than the EN, and a short viewport does the same thing.
   Wherever that can happen, the mark leaves absolute positioning and becomes a normal
   flow item ahead of .hero-copy, which makes the collision impossible. One rule set
   covers both cases: ≤900px .hero is a flex column (align-self centres on the cross
   axis, grid-column is ignored); above it .hero is a grid and the mark takes the 1fr
   row. Overlapping layers stay the composition only on tall, wide desktop. */
@media (max-width:900px), (max-height:760px){
  .hero .lookout{position:relative;left:auto;top:auto;width:auto;aspect-ratio:auto;grid-column:1/-1;justify-self:center;align-self:center;margin:26px auto 0;transform:none}
  .hero .lookout-core{position:relative;left:auto;top:auto;width:auto;transform:none}
  .hero .lookout-core:hover,.hero .lookout-core:focus-visible{transform:translateY(-7px)}
}
/* Reduced motion pins .lookout to translate(-50%,-50%); in flow that would shove it off
   the column, so neutralise it wherever the mark is no longer absolutely positioned. */
@media (prefers-reduced-motion:reduce) and (max-width:900px),
       (prefers-reduced-motion:reduce) and (max-height:760px){
  .hero .lookout{transform:none!important}
}
@media (max-width:520px){
  .hero .lookout-symbol{width:min(62vw,214px);margin-bottom:13px}
  /* Smaller title keeps the caption block short enough to stay in the wide part of the
     aperture; the scope line's 10px floor is an audit rule and is left alone. */
  .work-window strong{font-size:17px}
}
/* ============ Typeface system — Playfair Display + Archivo ============
   Self-hosted (no CDN, no third-party requests). Both are VARIABLE fonts, so
   every weight in the range renders exactly as written — the old in-between
   values (410/420/650) no longer snap to a neighbouring static cut.
   latin-ext is mandatory here: Hungarian ő and ű live there. */
@font-face{font-family:Playfair Display;src:url("./assets/fonts/playfair-normal-latin.woff2") format("woff2");font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Playfair Display;src:url("./assets/fonts/playfair-normal-latin-ext.woff2") format("woff2");font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Playfair Display;src:url("./assets/fonts/playfair-italic-latin.woff2") format("woff2");font-style:italic;font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Playfair Display;src:url("./assets/fonts/playfair-italic-latin-ext.woff2") format("woff2");font-style:italic;font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url("./assets/fonts/archivo-normal-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url("./assets/fonts/archivo-normal-latin-ext.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url("./assets/fonts/archivo-italic-latin.woff2") format("woff2");font-style:italic;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url("./assets/fonts/archivo-italic-latin-ext.woff2") format("woff2");font-style:italic;font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* The two families replace Kabana Display (incomplete: no true A–Z at weight)
   and the Arial body stack. One token each — dial the display weight here. */
:root{
  --serif:"Playfair Display",Georgia,serif;
  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;
  --w-display:900;   /* Playfair Black — the headline voice */
  --w-display-2:700; /* secondary display: names, plate titles, client marks */
}

/* Headlines go Black. Playfair's contrast climbs steeply with weight, so the
   optical sizes need re-tuning: at 900 the same clamp reads much heavier and
   the tight tracking closes up. Letter-spacing is opened slightly and the
   largest sizes pulled back a touch to hold the line. */
.hero-copy h1,
.position h2,
.work-heading h2,.cap-head h2,.events-copy h2,.studio-head h2,.contact h2,
.clients-head h2,.proof-copy h2{
  font-family:var(--serif);font-weight:var(--w-display);
  letter-spacing:-.035em;
}
.hero-copy h1{font-size:clamp(58px,8.4vw,132px);line-height:.86}
.position h2{font-size:clamp(46px,6.2vw,94px);line-height:.98}
.work-heading h2,.cap-head h2,.events-copy h2,.studio-head h2,.contact h2,
.clients-head h2,.proof-copy h2{line-height:.92}

/* Secondary display — smaller, so they keep a little more air than Black. */
.cap-copy h3,.work-window strong,.founder-map h3,.email,.client-mark,
.cap-nav button,.mobile-nav a,.contact-ring-offer strong,.proof-number{
  font-family:var(--serif);font-weight:var(--w-display-2);letter-spacing:-.03em;
}
.proof-number{font-weight:var(--w-display)}

/* Body: Archivo. Tall x-height means the old sizes read larger — nudge the
   long-form paragraphs down a hair and open the leading. */
body{font-family:var(--sans)}
.hero-copy>p,.clients-head p,.proof-copy>p,.contact-intro,.studio-head p,
.cap-body,.position-points span,.founder-map .founder-role{
  font-family:var(--sans);letter-spacing:.002em;
}
.founder-map .founder-role{line-height:1.55}

/* ============ Hero: the mark is always a flow item ============
   Playfair Black is wider than the face it replaced, so the Hungarian headline
   grew from 4 lines to 5 and drove straight through the absolutely-positioned
   mark (measured: −203px at 1440×900). Rather than chase per-language sizes,
   the mark now sits in the hero's column at EVERY width — the copy can grow
   without limit and can never reach it. Visually near-identical to the previous
   desktop composition, but language- and typeface-proof. */
.hero .lookout{position:relative;left:auto;top:auto;width:auto;aspect-ratio:auto;grid-column:1/-1;justify-self:center;align-self:center;margin:0 auto;transform:none}
.hero .lookout-core{position:relative;left:auto;top:auto;width:auto;transform:none}
.hero .lookout-core:hover,.hero .lookout-core:focus-visible{transform:translateY(-7px)}
@media(prefers-reduced-motion:reduce){.hero .lookout{transform:none!important}}
/* Held one notch below the old max so Hungarian settles at 4 lines, not 5. */
.hero-copy h1{font-size:clamp(58px,7.8vw,112px)}

/* ============ Work frame: aperture, not slab ============
   The full mark's bars are 44% of its width, so framing a photo with the whole
   logo left the image a small window in a cream slab. Instead the photo is
   clipped to the mark's APERTURE scaled to fill the frame, traced with a
   hairline. The anamorphic silhouette carries the brand; the picture gets the
   room. Caption returns to the window edges since there are no bars to clear. */
.work-images{clip-path:url(#mark-aperture-portrait)}
.work-frame{filter:drop-shadow(0 14px 34px rgba(29,29,28,.28))}
.work-window figcaption{left:6%;right:7%;bottom:4%;padding:44px 0 8px}
.work-window figcaption span{max-width:52%}
@media (max-width:900px){
  .work-window figcaption{left:6%;right:7%;bottom:4%;padding:30px 0 6px}
  .work-window figcaption span{max-width:100%}
}

/* ============ One scene, one screen ============
   The scenes were sized in fixed pixels and vw only, so on a laptop screen the
   tall ones ran past the fold: a headline cropped by the header, a portrait cut
   at the chin, a CTA below the edge. Every vertical value here also takes a
   height-aware cap (svh), so each scene resolves inside the screen it is read
   on. Desktop only — under 900px the stack keeps scrolling as before. */
@media (min-width:901px){
  .position,.clients,.proof,.capabilities,.events,.studio,.contact{
    min-height:100svh;
    padding-top:clamp(76px,10svh,120px);
    padding-bottom:clamp(46px,6svh,80px);
  }

  /* The position statement: the headline keeps its scale, the air around it gives. */
  .position h2{margin:clamp(26px,5svh,96px) 0}

  /* Clients: route field breathes with the screen instead of a fixed 420px. */
  .clients-head{margin:clamp(12px,2.6svh,40px) 0 clamp(20px,3.4svh,48px)}
  .clients-head h2{font-size:min(clamp(57px,7.3vw,112px),11svh)}
  .clients-field{min-height:min(420px,40svh)}

  /* Capabilities: the ring system is the tallest object on the page — it now
     scales to the space left under the heading, and the rings stay circular. */
  .cap-head{margin-top:clamp(12px,2.6svh,40px)}
  .cap-head h2{font-size:min(clamp(57px,7.3vw,112px),11svh)}
  .ring-system{min-height:min(760px,55svh);margin-top:clamp(8px,1.6svh,20px)}
  .rings{width:min(48vw,650px,52svh)}
  .cap-copy h3{font-size:min(clamp(37px,4.5vw,67px),7.4svh)}

  /* Live moments: scene is exactly one screen and the frame holds the subject's
     head, so the crop lands on the room, not on the performer. */
  .events{height:100svh;display:flex;flex-direction:column}
  .events img{object-position:50% 30%}
  .events-copy{flex:1;min-height:0}
  .events-copy h2{font-size:min(clamp(67px,9.5vw,150px),16svh)}
  .events-copy>p{margin:clamp(16px,2.8svh,35px) 0}

  /* Studio: two-line headline on a short screen instead of four. */
  .studio-head{margin:clamp(24px,4svh,80px) 0}
  .studio-head h2{font-size:min(clamp(57px,7.3vw,112px),8.6svh)}
  .studio-label{margin:clamp(16px,3svh,40px) 0 clamp(14px,2svh,24px)}

  /* Contact: headline, address and footer all inside the last screen. */
  .contact{padding-bottom:clamp(30px,4svh,80px)}
  .contact-layout{margin:clamp(18px,2svh,96px) 0 auto}
  .contact h2{margin:clamp(14px,1.7svh,48px) 0;font-size:min(clamp(69px,9.8vw,154px),6.2vw,12svh)}
  .email{font-size:min(clamp(37px,5.6vw,85px),6svh)}
}

/* The work aperture is sized in JS from the active photograph's own ratio
   (fitWorkWindow) so nothing is cropped; these are the fallbacks for before
   the first image decodes and for the mobile stack, which keeps 4:5. */
@media (min-width:901px){
  .work-window{aspect-ratio:auto;width:clamp(250px,28vw,445px);height:auto}
  .work-images img{object-fit:contain}
}

/* Caption type follows the frame height set by fitWorkWindow, so a wide/short
   aperture keeps the picture readable instead of being covered by the title. */
@media (min-width:901px){
  .work-window strong{font-size:min(clamp(28px,3.2vw,50px),calc(var(--work-h,420px) * .095))}
  .work-window figcaption{padding:calc(var(--work-h,420px) * .1) 0 8px;gap:16px}
}

/* The frame is the mark itself, not a drawn outline: logo-portrait layered over
   the photograph, with the picture clipped to that same mark's inner window so
   art and aperture stay in register at whatever ratio the photo sets. */
.work-images{clip-path:url(#mark-window-portrait)}
.work-frame{inset:0;width:100%;height:100%}

/* Caption moves inside the mark's window, over the photograph, now that the
   cream bars of the mark itself are the frame. */
@media (min-width:901px){
  .work-window figcaption{left:21%;right:30%;bottom:15%;padding:34px 0 6px}
  .work-window strong{font-size:min(clamp(24px,2.6vw,40px),calc(var(--work-h,420px) * .085))}
}

/* ============ Selected work: the supplied artwork, untouched ============
   Each file is the photograph already cropped into its brand-mark frame. The
   site adds nothing: no frame of its own, no aperture clip, and no caption over
   the picture. The box takes the file's ratio and the caption sits beneath it. */
.work-images{clip-path:none}
@media (min-width:901px){
  .work-images img{object-fit:contain}
  .work-window figcaption{
    left:0;right:0;bottom:auto;top:calc(100% + 14px);
    padding:0;background:none;
    display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  }
  .work-window strong{font-size:min(clamp(22px,2.3vw,36px),calc(var(--work-h,420px) * .12))}
  .work-count{bottom:-70px}
}

/* ============ Phone ============
   The work map is a desktop conceit: a route across a wide plane. On a phone
   it collapses to a stack — heading, the framed piece at full width, its
   caption, then the five stations as a row of taps. Everything else mainly
   needs room to clear the fixed header. */
@media (max-width:900px){
  .section,.clients{padding-top:118px}

  .work{height:auto;min-height:0;padding:0}
  .work-scene{position:relative;height:auto;min-height:0;padding:118px var(--edge) 64px}
  .work-map{position:relative;inset:auto;display:grid;grid-template-columns:repeat(5,1fr);
    align-items:center;gap:22px 6px;margin:34px 0 0;height:auto;min-height:0}
  .work-route-svg{display:none}

  /* The artwork is sized in JS from its own ratio, so it is never cropped. */
  .work-window{position:relative;grid-column:1/-1;justify-self:center;
    left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:100%;height:auto;
    aspect-ratio:auto;transform:none;margin:0;clip-path:none;background:none;box-shadow:none;
    display:flex;flex-direction:column;align-items:flex-start}
  .work-images{position:relative;inset:auto;flex:none}
  .work-images img{object-fit:contain}
  .work-window figcaption{position:static;left:auto;right:auto;bottom:auto;
    display:block;padding:16px 0 0;background:none}
  .work-window strong{font-size:clamp(24px,7vw,34px)}
  .work-window figcaption span{display:block;margin-top:6px;max-width:100%}
  .work-count{position:static;align-self:stretch;display:flex;justify-content:space-between;margin-top:4px}
  .work-window figcaption{align-self:stretch}

  /* Stations become a row of taps under the picture. */
  .map-node,.map-node:nth-child(n){position:relative;left:auto;right:auto;top:auto;bottom:auto;
    flex-direction:column;gap:7px;justify-content:center;padding:8px 0}
  .map-node span{font-size:8px}
}

/* Tap targets: the type stays the size it is, the touchable area grows around
   it. Negative margins keep the layout identical to before. */
@media (max-width:900px){
  .menu-toggle{padding:16px 10px;margin:-16px -10px}
  .language-switch button{padding:15px 9px;margin:-15px -9px}
  .hero-actions a,.events-copy .underlink{padding:14px 0;margin:-14px 0}
  .email{padding-bottom:6px}
  .header-left a,.header-right a{padding:12px 0;margin:-12px 0}
}

/* ============ The name ============
   A dictionary entry set with the coordinates in the hero: both are ways of
   saying where this is. Small, quiet, right-aligned under the latitude — the
   page leans on height and view as metaphors and this is their source. */
.etymology{position:absolute;z-index:4;right:calc(var(--edge) + 45px);top:184px;
  width:min(23vw,232px);text-align:right;color:var(--dark)}
.etymology-label{margin:0 0 10px;color:var(--orange-ink,var(--orange));letter-spacing:.14em}
.etymology-entry{margin:0}
.etymology-entry dt{display:flex;align-items:baseline;justify-content:flex-end;gap:8px}
.etymology-word{font:420 clamp(19px,1.5vw,24px)/1 var(--serif);letter-spacing:-.02em}
.etymology-pos{font:7px var(--mono);text-transform:uppercase;opacity:.45}
.etymology-origin{margin:7px 0 0;font:7px/1.6 var(--mono);text-transform:uppercase;
  letter-spacing:.06em;opacity:.66}
.etymology-origin em{font-style:normal;color:var(--orange-ink,var(--orange))}
.etymology-gloss{margin:5px 0 0;font:7px/1.6 var(--mono);text-transform:uppercase;
  letter-spacing:.06em;opacity:.66}
/* The two Aymara words are one term: never let a line break split them. */
.nowrap{white-space:nowrap}

/* On a phone the hero corner is too tight for it, so it sits under the hero
   copy as a footnote instead, left-aligned with everything else. */
@media (max-width:900px){
  .etymology{position:relative;right:auto;top:auto;width:auto;max-width:38ch;
    text-align:left;margin:30px 0 0;grid-column:1/-1;align-self:start}
  .etymology-entry dt{justify-content:flex-start}
  .etymology-origin,.etymology-gloss{font-size:8px}
}

/* ============ Selected work: a darker room ============
   The scene tone is painted by the fixed stage layer, not the section (which
   is transparent !important), so the colour lives here. The tan-olive was flat
   and sat too close to the cream of the artwork; this is a warm espresso dark
   with an amber glow behind the piece, so the framed work reads as lit. It
   stays browner than the neutral charcoal of the scenes that follow, so the
   descent still moves. */
.stage-olive{background:
  radial-gradient(86% 66% at 70% 44%,rgba(255,150,23,.17),transparent 62%),
  radial-gradient(120% 90% at 50% 0%,rgba(244,241,234,.05),transparent 55%),
  linear-gradient(180deg,#2b221a 0%,#1e1712 58%,#171210 100%)}
body[data-scene="work"] .site-header{background:rgba(30,23,18,.86);color:var(--ink);
  border-color:rgba(244,241,234,.28)}
@media (max-width:900px){
  .stage-olive{background:
    radial-gradient(130% 44% at 50% 44%,rgba(255,150,23,.17),transparent 66%),
    linear-gradient(180deg,#2b221a 0%,#1e1712 62%,#171210 100%)}
}

/* ============ Capability panels + current section ============
   All five panels ship in the HTML so every service is readable and indexable;
   only the chosen one is shown. */
.cap-panel{display:none}
.cap-panel.active{display:block}
.cap-panel[hidden]{display:none}

/* On a page this long the nav should say where you are. The mark is the same
   orange rule the language switch uses, so it reads as one system. */
.site-header a[href^="#"],.mobile-nav a[href^="#"]{position:relative}
.site-header a.at-section,.mobile-nav a.at-section{opacity:1}
.site-header a.at-section:after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:1px;background:var(--orange);transform-origin:left;animation:mark-section .32s var(--ease)}
.mobile-nav a.at-section{color:var(--orange)}
@keyframes mark-section{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.site-header a.at-section:after{animation:none}}

/* The brief is a button, not a section link: it keeps its own treatment. */
.site-header .brief.at-section:after{display:none}

/* ============ One tone change, not five ============
   The stage layers cross-faded over a second while the header tint, the paper
   terrain, the roadmap and the section text switched instantly. The background
   easing under hard-switching foreground is what read as an abrupt change.
   Everything the scene drives now moves on the same curve. */
:root{--tone:1.15s cubic-bezier(.33,.1,.25,1)}
.stage-layer{transition:opacity var(--tone)}
.terrain{transition:opacity var(--tone),transform 1.9s cubic-bezier(.33,.1,.25,1)}
.site-header{transition:background-color var(--tone),color var(--tone),border-color var(--tone)}
.roadmap,.roadmap-place,.roadmap-time{transition:color var(--tone),opacity var(--tone)}
.roadmap-path,.roadmap-sun,.terrain path,.terrain-focal{transition:stroke var(--tone),fill var(--tone)}
main > section,main > section h2,main > section p,main > section span,main > section b,
main > section em,main > section small,main > section strong,.station,.etymology{
  transition:color var(--tone),border-color var(--tone)}
@media(prefers-reduced-motion:reduce){
  :root{--tone:.2s linear}
}

/* ============ Reveal on approach ============
   Nothing moved as you arrived at a section: everything was simply there. Each
   block now rises a little as it comes into view, grouped items in sequence.
   The hiding rule is applied by script, so with no JavaScript the page is
   simply visible. */
html.reveals [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
html.reveals [data-reveal].in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.reveals [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ============ Restored ============
   These four were appended between two markers that a later block replaced
   wholesale, so they were lost. Kept together at the end of the cascade. */

/* The arrival scene is orange: an orange accent word disappears into it and a
   dark one just reads as more headline. Cream separates it. */
.contact h2 em{color:var(--ink)}

/* The horizon band read as a seam across the page rather than depth. The soft
   vignette stays; the same band goes from the work scene. */
.terrain-horizon{background:radial-gradient(135% 90% at 50% 26%,transparent 52%,rgba(19,18,16,.1) 100%)}
.work-scene:after{display:none}

@media (max-width:900px){
  /* The enquiry marker centres on a phone instead of hugging the left edge. */
  .contact-ring.contact-ring-offer{justify-self:center;margin:8px auto 0}
  .contact-layout{justify-items:center;text-align:left}

  /* The clients route is a scattered map on desktop; on phones it is a plain
     stacked list with each marker to the left of its own text. The nth-child
     pair below matches the specificity of the desktop rules it has to beat. */
  .clients-field{min-height:0}
  .clients-route{display:none}
  .client-grid{position:relative;inset:auto;display:block}
  .client-grid li,.client-grid li:nth-child(n){position:relative;left:auto;right:auto;top:auto;bottom:auto;
    width:auto;height:auto;margin:0 0 40px;padding:0 0 0 26px;transform:none;text-align:left}
  .client-grid li:before,.client-grid li:nth-child(n):before{left:0;right:auto;top:7px;
    width:8px;height:8px;transform:none}
  .client-label,.client-grid li:nth-child(n) .client-label{position:relative;left:auto;right:auto;
    top:auto;bottom:auto;width:auto;text-align:left;transform:none}
  .client-grid li:nth-child(n+2):nth-child(-n+4):before{left:0;transform:none}
  .client-grid li:nth-child(n+2):nth-child(-n+4) .client-label{text-align:left}
  .client-grid li:nth-child(5) .client-label{text-align:left}
}

/* ============ Headlines by the line ============
   Each declared line sits in its own overflow box and climbs from beneath it.
   The box carries a little extra room so italic overhang and descenders are not
   shaved by the very mask that reveals them. */
.rl{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.rl-i{display:block;transform:translateY(112%);
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1)}
.rl-host.in-view .rl-i{transform:none}
@media(prefers-reduced-motion:reduce){.rl-i{transform:none;transition:none}}

/* The magnets are moved by script; the easing back to rest lives here. */
.contact-ring-offer{transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .3s,color var(--tone)}

/* ============ Capability core, legible ============
   Measured against the 54px disc the marks were 17x21 to 34x14, small enough
   that the capability reads as a smudge rather than a symbol. All five are
   stated here, including strategy which previously had no rule of its own, at
   roughly 1.35x. The disc itself does not grow: the critique was right that the
   dot should stay the size it is. Hover states on the rings and the core
   already existed and are untouched. */
/* Explicit dimensions, not maxima: three of these marks render below their cap
   at intrinsic size, so a max-* can only ever shrink them. object-fit keeps the
   ratio inside the box each is given. */
.rings-core .rings-icon[data-ring-logo="strategy"]{width:75%;height:47%;max-width:none;max-height:none}
.rings-core .rings-icon[data-ring-logo="identity"]{width:62%;height:62%;max-width:none;max-height:none}
.rings-core .rings-icon[data-ring-logo="production"]{width:82%;height:35%;max-width:none;max-height:none}
.rings-core .rings-icon[data-ring-logo="social"]{width:56%;height:68%;max-width:none;max-height:none}
.rings-core .rings-icon[data-ring-logo="events"]{width:75%;height:47%;max-width:none;max-height:none}

/* ============ A 10px floor on the smallest labels ============
   Mono uppercase still reads as technical annotation at 10px. At 12px it starts
   competing with the body copy, so the floor is 10, applied to the two sizes
   that were below it: the name block and the coordinates. */
.etymology-origin,.etymology-gloss{font-size:10px}
.coordinate{font-size:10px!important}
@media (max-width:900px){
  .etymology-origin,.etymology-gloss{font-size:11px}
}