/* KYVRE shared styles
   Type scale matched to the reference site at 1440px wide, then fluid below it. */
:root{
  /* Backgrounds come only from the reference palette:
     sand for sections, cream for the loader, brown for footer, menu and dark buttons.
     Near black is used only behind photos and video. */
  --sand:#D6CBBC;
  --cream:#FBEEDB;
  --brown:#332820;
  --obsidian:#121212;
  --charcoal:#2B2926;
  --ivory:#FBEEDB;
  --gold:#C8A96B;
  --gold-deep:#8C6E3C;
  --gold-soft:rgba(200,169,107,.38);
  --line:rgba(51,40,32,.18);
  --taupe:#C8C1B6;
  --stone:#6B5F52;
  --ink:#333333;
  --muted:#E6DDD0;
  --display:"Marcellus", "Times New Roman", serif;
  --sans:"Jost", system-ui, sans-serif;
  --gutter:clamp(16px, 3vw, 44px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.77,0,.18,1);

  /* Type scale (reference px at 1440 wide) */
  --fs-mega:clamp(64px, 10.55vw, 152px);     /* 152 giant moving text */
  --fs-feature:clamp(46px, 6.25vw, 90px);    /* 90  featured project titles */
  --fs-h2:clamp(36px, 4.5vw, 65px);          /* 65  section headings */
  --fs-menu:clamp(32px, 3.26vw, 47px);       /* 47  menu links */
  --fs-statement:clamp(28px, 3.125vw, 45px); /* 45  statements */
  --fs-title:clamp(22px, 2.08vw, 30px);      /* 30  card titles, counters */
  --fs-lead:clamp(16px, 1.32vw, 19px);       /* 19  lead paragraphs */
  --fs-ui:16px;                              /* 16  buttons, tags, labels */
  --fs-body:15px;                            /* 15  body text */
  --fs-flabel:14.4px;                        /* 14.4 footer headings */
  --fs-small:12px;                           /* 12  legal line */
  --fs-micro:11.2px;                         /* 11.2 footer contact lines */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sand);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:var(--fs-body);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--obsidian)}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.1;letter-spacing:.01em}

/* Film grain, very light, for a printed, tactile finish */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Buttons */
.pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.7em;padding:.8em 1.7em;border-radius:999px;font-family:var(--display);font-size:var(--fs-ui);line-height:1;letter-spacing:.06em;text-transform:uppercase;isolation:isolate;transition:color .5s var(--ease),border-color .5s var(--ease)}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);transform:translateY(101%);transition:transform .55s var(--ease)}
.pill:hover::before{transform:none}
.pill::after{content:"\2192";font-family:var(--sans);font-size:.95em;transition:transform .5s var(--ease)}
.pill:hover::after{transform:translateX(4px)}
.pill.dark{background:var(--brown);color:var(--cream)}
.pill.dark:hover{color:var(--obsidian)}
.pill.line{border:1px solid currentColor}
.pill.line:hover{border-color:var(--gold);color:var(--obsidian)}
.pill.gold{background:var(--gold);color:var(--obsidian)}
.pill.gold::before{background:var(--ivory)}
.pill.noarrow::after{display:none}

/* Loader */
#loader{position:fixed;inset:0;z-index:100;background:var(--cream);display:grid;place-items:center;transition:opacity 1s var(--ease), visibility 1s}
#loader::before,#loader::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--brown);opacity:.6}
#loader::before{left:var(--gutter)} #loader::after{right:var(--gutter)}
#loader .vline{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--gold);opacity:.5;transform-origin:top;animation:grow 1.4s var(--ease) forwards}
#loader img{width:92px;height:auto;position:relative;z-index:1;opacity:0;animation:fade 1.2s .3s var(--ease) forwards}
#loader .ltext{position:absolute;bottom:40px;left:0;right:0;text-align:center;font-family:var(--display);letter-spacing:.5em;font-size:var(--fs-ui);color:var(--brown);opacity:0;animation:fade 1.2s .6s var(--ease) forwards}
body.loaded #loader{opacity:0;visibility:hidden}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fade{to{opacity:1}}

/* Header */
/* Floating over every page as a frosted strip: a light blur and a faint tint,
   so the page stays partly visible but text behind no longer competes with the header.
   Text is cream over photos and video and switches to brown over sand sections;
   the tint switches with it. */
header.top{position:fixed;top:0;left:0;right:0;z-index:50;height:68px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(16px,3.7vw,53px);background:rgba(51,40,32,.18);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);color:var(--sand);transition:color .5s var(--ease),background .5s var(--ease)}
header.top.on-light{color:var(--brown);background:rgba(214,203,188,.55)}
body.menu-open header.top{color:var(--sand);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
header.top .pill{min-width:191px;height:36px;padding:0 1.6em;justify-content:center}
header.top .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:clamp(10px,1.1vw,16px);color:inherit}
/* Visible width matches the reference wordmark: 145px on phones up to 229px at 1440 wide */
header.top .brand .word{font-family:var(--display);font-size:clamp(22px,2.8vw,40px);line-height:1;letter-spacing:1.15em;margin-right:-1.15em;text-transform:uppercase}
header.top .brand img{width:clamp(36px,4.3vw,62px);height:clamp(36px,4.3vw,62px);flex:none}
.top-right{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:var(--fs-body);letter-spacing:.02em}
.top-right .est{text-transform:uppercase}
@media (max-width:1024px){.top-right .est{display:none}}
.burger{width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:inherit}
.burger span{width:30px;height:1px;background:currentColor;display:block;transition:transform .5s var(--ease),opacity .3s}
body.menu-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Menu: sand panel over a dimmed page, links in uppercase sans */
nav.menu{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:minmax(300px,40vw) 1fr;visibility:hidden;transition:visibility 0s 1s}
body.menu-open nav.menu{visibility:visible;transition:none}
nav.menu::before{content:"";position:absolute;inset:0;background:rgba(18,18,18,.33);opacity:0;transition:opacity .8s var(--ease)}
body.menu-open nav.menu::before{opacity:1}
nav.menu ul{position:relative;background:var(--sand);color:var(--brown);list-style:none;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 120px;counter-reset:m;transform:translateX(-101%);transition:transform 1s var(--ease-io)}
body.menu-open nav.menu ul{transform:none}
nav.menu li{counter-increment:m;overflow:hidden}
nav.menu li a{font-family:var(--sans);font-weight:500;font-size:clamp(24px,2.22vw,32px);letter-spacing:2px;text-transform:uppercase;line-height:1.5;display:inline-flex;align-items:baseline;gap:18px;transform:translateY(110%);transition:color .4s,transform .9s var(--ease)}
nav.menu li a::before{content:"0" counter(m);font-family:var(--sans);font-size:var(--fs-small);letter-spacing:.2em;color:var(--gold-deep)}
body.menu-open nav.menu li a{transform:none}
body.menu-open nav.menu li:nth-child(2) a{transition-delay:.05s}
body.menu-open nav.menu li:nth-child(3) a{transition-delay:.1s}
body.menu-open nav.menu li:nth-child(4) a{transition-delay:.15s}
body.menu-open nav.menu li:nth-child(5) a{transition-delay:.2s}
body.menu-open nav.menu li:nth-child(6) a{transition-delay:.25s}
body.menu-open nav.menu li:nth-child(7) a{transition-delay:.3s}
body.menu-open nav.menu li:nth-child(8) a{transition-delay:.35s}
nav.menu li a:hover{color:var(--gold-deep)}
nav.menu .menu-img{position:relative;overflow:hidden;opacity:0;transition:opacity .8s .3s var(--ease)}
body.menu-open nav.menu .menu-img{opacity:1}
nav.menu .menu-foot{position:absolute;left:var(--pad);bottom:30px;font-size:var(--fs-body);color:var(--stone);letter-spacing:.04em;opacity:0;transition:opacity .6s .5s}
body.menu-open nav.menu .menu-foot{opacity:1}
/* Language switch (built by i18n.js), above the tagline */
nav.menu .menu-lang{position:absolute;left:var(--pad);bottom:72px;display:flex;gap:6px;font-size:var(--fs-small);letter-spacing:.2em;opacity:0;transition:opacity .6s .5s}
body.menu-open nav.menu .menu-lang{opacity:1}
nav.menu .menu-lang a{padding:6px 10px;border:1px solid var(--line);color:var(--stone);transition:color .3s,border-color .3s,background .3s}
nav.menu .menu-lang a:hover{color:var(--brown);border-color:var(--brown)}
nav.menu .menu-lang a.on{background:var(--brown);border-color:var(--brown);color:var(--sand)}
body.menu-open header.top{color:var(--brown)}

/* Hero */
.hero{position:relative;height:100vh;min-height:580px;overflow:hidden;color:var(--ivory);background:var(--brown)}
video.bgv{display:block;width:100%;height:100%;object-fit:cover;background:var(--brown)}
.hero > video,.hero > img{position:absolute;inset:0;opacity:0;transition:opacity 1.8s var(--ease)}
body.loaded .hero > video,body.loaded .hero > img{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 26%,transparent 52%,rgba(0,0,0,.72))}
.hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:44px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.hero-copy p{max-width:560px;font-size:var(--fs-lead);line-height:1.35;font-weight:300}
.explore{font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.06em;text-transform:uppercase;display:flex;gap:10px;align-items:center;padding-bottom:6px;white-space:nowrap;position:relative}
.explore::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .6s var(--ease)}
.explore:hover::after{transform:scaleX(.4)}
.scroll-cue{position:absolute;left:50%;bottom:0;z-index:2;width:1px;height:64px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Section basics */
section{position:relative}
.wrap{padding:clamp(96px,11vw,170px) var(--gutter)}
.label{font-family:var(--display);font-size:var(--fs-ui);line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);display:flex;align-items:center;gap:14px;margin-bottom:28px}
.label::before{content:"";width:36px;height:1px;background:var(--gold)}
.lead{font-size:var(--fs-lead);line-height:1.4}
.reveal{opacity:0;transform:translateY(46px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Image wipe reveal */
.mask{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease-io)}
.mask img,.mask video{transform:scale(1.18);transition:transform 2.2s var(--ease)}
.mask.in{clip-path:inset(0 0 0 0)}
.mask.in img,.mask.in video{transform:scale(1)}
/* Slow zoom on hover */
.zoom{overflow:hidden}
.zoom img{transition:transform 1.6s var(--ease)}
.zoom:hover img{transform:scale(1.04)}

/* Split intro */
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,7vw,110px);align-items:center}
.split h2{font-size:var(--fs-h2);margin-bottom:28px}
.split p{max-width:430px;margin-bottom:34px}
.split .media{aspect-ratio:16/11;overflow:hidden}

/* Full band */
.band{height:92vh;overflow:hidden;background:var(--brown)}

/* Portfolio carousel */
.portfolio{display:grid;grid-template-columns:4fr 8fr;gap:clamp(36px,7vw,110px);align-items:center}
.portfolio h2{font-size:var(--fs-h2);margin-bottom:24px}
.portfolio p{max-width:360px;margin-bottom:34px}
.carousel{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--charcoal)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.slide.active{opacity:1;z-index:1}
.slide img{transition:transform 7s linear}
.slide.active img{transform:scale(1.06)}
.slide .cap{position:absolute;left:28px;bottom:26px;right:28px;color:var(--ivory);z-index:2}
.slide .cap h3{font-size:var(--fs-title);line-height:1.2}
.slide .cap span{font-size:var(--fs-body);color:var(--muted)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 50%)}
.slide .tag{position:absolute;top:0;right:0;z-index:3;background:var(--brown);color:var(--gold);font-family:var(--display);font-size:var(--fs-ui);line-height:1;letter-spacing:.06em;padding:9px 16px;text-transform:uppercase}
.c-btn{position:absolute;top:50%;z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,240,234,.6);background:rgba(51,40,32,.3);backdrop-filter:blur(6px);color:var(--ivory);cursor:pointer;transform:translateY(-50%);font-size:18px;display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s}
.c-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--obsidian)}
.c-btn.prev{left:18px}.c-btn.next{right:18px}
.c-count{position:absolute;right:28px;bottom:26px;z-index:4;font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.2em;color:var(--ivory)}

/* Featured case study (home) */
.case{position:relative;height:100vh;min-height:620px;overflow:hidden;color:var(--ivory);display:block}
.case img{position:absolute;inset:0;transition:transform 2.4s var(--ease)}
.case:hover img{transform:scale(1.03)}
.case::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.1) 60%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 40%)}
.case .txt{position:absolute;z-index:2;left:var(--gutter);bottom:14vh;max-width:640px}
.case .kicker{display:block;font-family:var(--display);font-size:var(--fs-title);line-height:1.1;text-transform:uppercase;color:var(--taupe);margin-bottom:12px}
.case h2{font-size:var(--fs-feature);margin-bottom:10px}
.case .loc{display:block;font-size:var(--fs-lead);color:var(--muted);margin-bottom:22px}
.case p{max-width:470px;color:#E6E0D6;margin-bottom:30px}
.case .pill{color:var(--ivory)}
.case .badge{position:absolute;z-index:2;right:var(--gutter);top:16vh;font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);padding:10px 16px}

/* Featured stacked videos */
.featured{background:var(--brown)}
.feat{position:sticky;top:0;height:100vh;overflow:hidden;color:var(--ivory)}
.feat video{position:absolute;inset:0}
.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),transparent 58%)}
.feat .txt{position:absolute;left:var(--gutter);bottom:24vh;z-index:2;max-width:600px}
.feat .kicker{font-family:var(--display);font-size:var(--fs-title);letter-spacing:.02em;text-transform:uppercase;color:var(--taupe);display:block;margin-bottom:12px;line-height:1.1}
.feat h3{font-size:var(--fs-feature);margin-bottom:16px}
.feat p{max-width:440px;color:#E6E0D6}
.feat .count{position:absolute;right:var(--gutter);top:16vh;z-index:2;font-family:var(--display);font-size:var(--fs-title);letter-spacing:.1em}
/* View sits under the project name, frosted like the top bar so it reads over any photo */
.feat .txt .pill{display:inline-flex;margin-top:24px;color:var(--ivory);background:rgba(51,40,32,.18);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}

/* About */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,110px);align-items:center}
.about .mark{width:68px;height:68px;margin-bottom:32px}
.about h2{font-size:var(--fs-statement);line-height:1.2;margin-bottom:26px;max-width:560px}
.about p{max-width:480px;margin-bottom:18px}
.about .pill{margin-top:16px}
.about .media{aspect-ratio:4/5;overflow:hidden}

/* Kinetic type */
.kinetic{height:260vh;border-top:1px solid rgba(42,38,34,.14)}
.k-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter)}
.kinetic .intro{max-width:320px;margin-bottom:34px}
.kinetic .intro b{font-weight:500}
.k-line{width:max-content;display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-family:var(--display);text-transform:uppercase;font-size:var(--fs-mega);line-height:1;white-space:nowrap;will-change:transform;margin:.06em 0}
.k-line .chip{flex:none;width:clamp(96px,14vw,230px);height:clamp(64px,9vw,148px);overflow:hidden;border-radius:3px}
.k-line .gold{color:var(--gold-deep)}

/* Sections that share the sand background are separated by a hairline */
.wrap + .wrap,.kinetic + .wrap{border-top:1px solid var(--line)}

/* Services */
.services{background:var(--sand);color:var(--ink)}
.services .mark{width:46px;height:46px;margin-bottom:32px}
.services h2{font-size:var(--fs-statement);line-height:1.2;max-width:800px;margin-bottom:clamp(56px,7vw,100px)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--brown)}
.svc{padding:32px 26px 38px 0;border-right:1px solid var(--line);margin-right:26px}
.svc:last-child{border-right:0;margin-right:0}
.svc .n{font-family:var(--display);color:var(--gold-deep);font-size:var(--fs-ui);letter-spacing:.12em}
.svc h3{font-size:var(--fs-title);line-height:1.2;margin:16px 0 14px}
.svc p{color:var(--stone)}
.svc-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:64px;gap:24px;flex-wrap:wrap}
.svc-foot p{max-width:340px}

/* Rental Inventory Report */
.rir{background:var(--sand);color:var(--ink)}
.rir-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,7vw,110px);align-items:center}
.rir h2{font-size:var(--fs-h2);margin-bottom:24px}
.rir .lead{max-width:500px;color:var(--stone);margin-bottom:38px}
.rir-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;margin-bottom:44px}
.rir-list li{border-top:1px solid var(--line);padding-top:14px;color:var(--stone)}
.rir-list b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:var(--fs-ui);color:var(--ink);margin-bottom:6px}
.rir-actions{display:flex;gap:14px;flex-wrap:wrap}
.rir .pill.gold{background:var(--brown);color:var(--cream)}
.rir .pill.gold::before{background:var(--gold)}
.rir .pill.gold:hover{color:var(--brown)}
.report{background:var(--cream);color:var(--ink);padding:clamp(24px,2.6vw,36px);box-shadow:0 34px 70px rgba(51,40,32,.28);transform:rotate(1.2deg);position:relative;font-size:13px}
.report::after{content:"Sample";position:absolute;top:18px;right:-8px;background:var(--gold);color:var(--obsidian);font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-micro);padding:5px 12px}
.report-head{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:14px}
.report-head img{width:38px;height:38px}
.report-head h3{font-size:17px;letter-spacing:.06em}
.report-head span{display:block;font-size:var(--fs-micro);color:var(--stone);letter-spacing:.1em;text-transform:uppercase}
.report-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:16px;color:var(--stone);font-size:var(--fs-small)}
.report-meta b{color:var(--ink);font-weight:500}
.report table{width:100%;border-collapse:collapse;margin-bottom:16px}
.report th{text-align:left;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:var(--fs-micro);letter-spacing:.12em;color:var(--stone);padding:6px 0;border-bottom:1px solid var(--taupe)}
.report td{padding:8px 0;border-bottom:1px solid #E2DDD4;vertical-align:top}
.report td.room{font-family:var(--display);text-transform:uppercase;font-size:var(--fs-small);letter-spacing:.04em}
.tagc{display:inline-block;font-size:var(--fs-micro);padding:2px 9px;border-radius:999px;white-space:nowrap}
.tagc.good{background:#E3EADB;color:#3D5230}
.tagc.wear{background:#F1E6CF;color:#7A5A1C}
.tagc.fix{background:#F0DCD6;color:#7D3524}
.report .photos{color:var(--stone);font-size:var(--fs-small);white-space:nowrap}
.report-sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
.report-sign div{border-top:1px solid var(--ink);padding-top:6px;font-size:var(--fs-micro);color:var(--stone);text-transform:uppercase;letter-spacing:.1em}
.rir-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,52px);margin-top:clamp(64px,8vw,110px);border-top:1px solid var(--line);padding-top:40px}
.rir-steps .n{font-family:var(--display);color:var(--gold-deep);font-size:var(--fs-ui);letter-spacing:.12em}
.rir-steps h3{font-size:var(--fs-title);line-height:1.2;margin:12px 0 10px}
.rir-steps p{color:var(--stone)}

/* Method */
.method{background:var(--sand)}
.method h2{font-size:var(--fs-h2);margin-bottom:56px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(22px,2.5vw,44px)}
.step{border-top:1px solid var(--brown);padding-top:26px}
.step .n{font-family:var(--display);font-size:var(--fs-feature);color:var(--gold-deep);line-height:1}
.step h3{font-size:var(--fs-title);line-height:1.2;margin:18px 0 12px}

/* Founder */
.founder{position:relative;min-height:100vh;overflow:hidden;color:var(--ivory);display:grid;place-items:center;padding:120px var(--gutter)}
.founder .bg{position:absolute;inset:0;filter:blur(16px) brightness(.42);transform:scale(1.12)}
.founder .card{position:relative;z-index:2;width:min(400px,80vw)}
.founder .card .ph{aspect-ratio:3/4.4;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.founder .card h3{font-size:var(--fs-title);margin-top:18px}
.founder .card span{font-size:var(--fs-body);color:var(--taupe)}
.founder blockquote{position:absolute;z-index:2;left:var(--gutter);bottom:64px;max-width:340px;font-family:var(--display);font-size:var(--fs-title);line-height:1.2}
.founder .side{position:absolute;z-index:2;right:var(--gutter);bottom:64px;max-width:300px;text-align:right;color:var(--muted)}

/* CTA */
.cta{background:var(--sand);text-align:center}
.cta .label{justify-content:center}
.cta .label::after{content:"";width:36px;height:1px;background:var(--gold)}
.cta h2{font-size:var(--fs-feature);margin:0 auto 30px;max-width:1150px}
.cta p{max-width:540px;margin:0 auto 40px;font-size:var(--fs-lead);line-height:1.4}

/* Footer */
footer{background:var(--brown);color:var(--sand);padding:clamp(80px,10vw,150px) clamp(16px,3.7vw,53px) 32px;overflow:hidden}
.f-grid{display:grid;grid-template-columns:38.7vw 1fr 1fr;gap:36px;align-items:start}
.f-grid ul{list-style:none}
.f-grid li a{font-family:var(--display);font-size:var(--fs-menu);line-height:1.85;transition:color .4s}
.f-grid li a:hover{color:var(--gold)}
.f-grid .col{padding-top:clamp(40px,6vw,94px)}
.f-grid h4{font-family:var(--display);font-weight:400;font-size:var(--fs-ui);margin-bottom:4px}
.f-grid .blk{margin-bottom:44px;font-size:var(--fs-body);line-height:1.35}
.f-note{max-width:486px;margin:40px auto 0;text-align:center;font-size:var(--fs-lead);line-height:1.35}
/* Animated logo: the clip has a black background, so screen blending drops the black
   and leaves only the gold logo over the brown footer. The clip's "black" is really a
   dark stone texture, so contrast crushes it to true black first (otherwise it lifts the
   brown into a visible box), and the mask feathers the frame edge into the footer.
   The mask sits on the video, not the wrapper: a mask on the wrapper would isolate
   the blend and show the black. */
.f-logo{width:min(100%,1100px);aspect-ratio:16/9;margin:30px auto 0;overflow:hidden}
.f-logo video{background:transparent;mix-blend-mode:screen;filter:contrast(1.6) brightness(.85);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)}
.f-legal{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:var(--fs-small);color:#FFFFFF;margin-top:44px}
.f-legal a{color:var(--sand)}

/* ===== Homepage sections, in the reference site's order ===== */
:root{--pad:clamp(16px,4.4vw,63px)}

/* Intro split: text column left, large square image flush right */
.intro-split{display:grid;grid-template-columns:minmax(0,1fr) 56.7vw;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(64px,7.9vw,114px) 0 clamp(40px,3vw,42px) var(--pad)}
.intro-split h2{font-size:var(--fs-h2);margin-bottom:24px;max-width:440px}
.intro-split p{max-width:437px;margin-bottom:30px}
.intro-split .media{aspect-ratio:1;overflow:hidden}

/* Small centred mark between blocks */

/* Projects: text left, horizontally scrolling project cards right */
.projects{display:grid;grid-template-columns:minmax(260px,437px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(56px,7vw,110px) 0 clamp(56px,7vw,110px) var(--pad);overflow:hidden}
.projects h2{font-size:var(--fs-h2);margin-bottom:22px}
.projects p{margin-bottom:30px}
.track-wrap{position:relative;min-width:0}
.track{display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:var(--pad);cursor:grab}
.track::-webkit-scrollbar{display:none}
.track.dragging{cursor:grabbing;scroll-snap-type:none}
.card{position:relative;flex:none;width:clamp(260px,34vw,491px);aspect-ratio:491/470;overflow:hidden;scroll-snap-align:start;color:var(--sand)}
.card img{transition:transform 1.6s var(--ease);pointer-events:none}
.card:hover img{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 45%)}
.card .tag{position:absolute;top:16px;right:16px;z-index:2;background:var(--brown);color:var(--sand);font-family:var(--display);font-size:var(--fs-ui);line-height:1;padding:6px 14px;border-radius:999px}
.card .cap{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.card h3{font-size:var(--fs-title);line-height:1.2}
.card span.loc{display:block;font-size:var(--fs-lead);margin-top:4px}
.t-btn{position:absolute;top:calc(50% - 17px);z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:var(--sand);color:var(--brown);display:grid;place-items:center;font-size:18px;cursor:pointer;transition:background .4s}
.t-btn:hover{background:var(--gold)}
.t-btn.prev{left:12px}.t-btn.next{right:calc(var(--pad) + 12px)}

/* Featured projects stacked full screen (images) */
.feat > img{position:absolute;inset:0}
.feat .title{font-family:var(--display);text-transform:uppercase;font-size:var(--fs-feature);line-height:1.1;max-width:520px}

/* About: narrow text column and two square images */
.about2{display:grid;grid-template-columns:minmax(240px,316px) 1fr 1fr;gap:clamp(20px,3.5vw,60px);align-items:start;padding:clamp(64px,7.9vw,114px) var(--pad) clamp(56px,6vw,90px)}
.about2 .txt{padding-top:clamp(40px,7.5vw,110px)}
.about2 h2{font-size:var(--fs-h2);margin-bottom:24px}
.about2 p{margin-bottom:30px}
.about2 .media{aspect-ratio:1;overflow:hidden}

/* Statement over a full screen photograph */
.statement{position:relative;height:100vh;min-height:620px;overflow:hidden;color:var(--sand)}
.statement > img{position:absolute;inset:0}
.statement::after{content:"";position:absolute;inset:0;background:rgba(51,40,32,.45)}
.statement .in{position:relative;z-index:2;height:100%;padding:53px clamp(16px,3.7vw,53px)}
.statement .mk{width:55px;height:55px;object-fit:contain}
.statement h2{font-size:var(--fs-statement);line-height:1.2;max-width:640px;margin-top:30px}
.statement .side{position:absolute;right:clamp(16px,3.7vw,53px);bottom:clamp(60px,9vw,130px);width:min(352px,80vw)}
.statement .side p{margin-bottom:22px}
.statement .pill{color:var(--sand)}

/* Founder: text left, large square portrait right */
.founder2{display:grid;grid-template-columns:minmax(0,1fr) 59.6vw;gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(64px,7.9vw,114px) 0 clamp(40px,3vw,43px) var(--pad)}
.founder2 .mk{width:55px;height:55px;object-fit:contain;margin:20px 0 40px}
.founder2 h2{font-size:var(--fs-h2);margin-bottom:24px}
.founder2 p{max-width:369px;margin-bottom:16px}
.founder2 .pill{margin-top:20px}
.founder2 .media{aspect-ratio:1;overflow:hidden}

/* Services carousel: blurred full screen background, centred card, next preview */
.svc-car{position:relative;height:100vh;min-height:640px;overflow:hidden;color:#F1F1F1;background:var(--brown)}
.svc-car .bgs img{position:absolute;inset:0;filter:blur(14px) brightness(.5);transform:scale(1.1);opacity:0;transition:opacity 1s var(--ease)}
.svc-car .bgs img.on{opacity:1}
.svc-car .head{position:absolute;z-index:2;left:clamp(16px,10vw,145px);top:84px;font-family:var(--display);font-size:var(--fs-title);text-transform:uppercase}
.svc-car .num{position:absolute;z-index:2;right:clamp(16px,10vw,145px);top:92px;letter-spacing:16px;text-transform:uppercase}
/* Card sizes follow the viewport height as well as its width, so the title and line
   under each card always fit on short laptop screens. The preview card is bottom
   aligned with the current one, so both titles sit on the same line. Cards that are
   neither current nor next wait off screen to the right and slide in from there. */
.svc-car{--vh:max(100svh,640px);--top:154px;
  --cw:clamp(220px,min(27.8vw,(var(--vh) - 360px) * .75),400px);
  --nw:clamp(120px,min(13.9vw,(var(--vh) - 360px) * .375),200px);
  --ntop:calc(var(--top) + (var(--cw) - var(--nw)) * 4 / 3)}
.svc-car .stage{position:absolute;inset:0;z-index:2}
.svc-car .sl{position:absolute;left:100%;top:var(--ntop);width:var(--nw);transition:all 1s var(--ease);opacity:0;pointer-events:none}
.svc-car .sl .ph{overflow:hidden;width:100%;aspect-ratio:3/4}
.svc-car .sl .ph img{width:100%;height:100%;object-fit:cover}
.svc-car .sl h3{font-size:var(--fs-title);margin-top:16px;line-height:1.2}
.svc-car .sl span{display:block;margin-top:4px;font-size:var(--fs-body);line-height:1.45}
.svc-car .sl.cur{left:35.6vw;top:var(--top);width:var(--cw);opacity:1;pointer-events:auto}
.svc-car .sl.nxt{left:70.3vw;top:var(--ntop);width:var(--nw);opacity:.85}
.svc-car .sl.nxt h3{font-size:clamp(18px,1.5vw,22px)}
.svc-car .ctrl{position:absolute;z-index:3;left:clamp(16px,10vw,145px);bottom:36px;display:flex;gap:20px}
.svc-car .ctrl button{background:none;border:0;color:inherit;font-family:var(--display);font-size:var(--fs-ui);text-transform:uppercase;cursor:pointer;letter-spacing:.04em}
.svc-car .ctrl button:hover{color:var(--gold)}
.svc-car .sl[data-svc]{cursor:pointer}
.svc-car .sl.nxt{pointer-events:auto}
.svc-car .sl .more{display:inline-block;margin-top:14px;font-style:normal;font-size:var(--fs-small);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold-soft);padding-bottom:3px;transition:border-color .3s}
.svc-car .sl .more::after{content:" +"}
.svc-car .sl:hover .more,.svc-car .sl:focus-visible .more{border-color:var(--gold)}
.svc-car .sl.nxt .more{display:none}
/* Service detail panel */
.svc-dlg{margin:auto;border:0;padding:clamp(28px,4vw,56px);width:min(760px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;background:var(--sand);color:var(--brown)}
.svc-dlg::backdrop{background:rgba(18,18,18,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.svc-dlg[open]{animation:dlgIn .6s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(24px)}}
.svc-dlg h2{font-size:var(--fs-h2);line-height:1.05;margin:10px 0 16px}
.svc-dlg .lead{color:var(--stone);max-width:60ch}
.dlg-x{position:absolute;top:12px;right:16px;width:44px;height:44px;background:none;border:0;font-size:32px;line-height:1;color:var(--brown);cursor:pointer}
.dlg-x:hover{color:var(--gold-deep)}
.dlg-x:focus-visible{outline:1px solid var(--gold-deep);outline-offset:-4px}
.dlg-list{list-style:none;margin:28px 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:22px 36px}
.dlg-list li{border-top:1px solid var(--line);padding-top:14px;font-size:var(--fs-body);line-height:1.5}
.dlg-list b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.4vw,20px);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.dlg-cta{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:640px){.dlg-list{grid-template-columns:1fr}}

/* ===== Case study page ===== */
.cs-hero .txt{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:48px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.cs-hero .kicker{display:block;font-family:var(--display);font-size:var(--fs-title);line-height:1.1;text-transform:uppercase;color:var(--taupe);margin-bottom:12px}
.cs-hero h1{font-size:var(--fs-mega);line-height:.95}
.cs-hero .sub{display:block;font-family:var(--display);font-size:var(--fs-title);text-transform:uppercase;margin-top:14px}
.cs-hero .loc{font-size:var(--fs-lead);color:var(--muted);text-align:right;line-height:1.4}

.cs-intro{background:var(--sand)}
.cs-intro-grid{display:grid;grid-template-columns:7fr 4fr;gap:clamp(40px,7vw,120px);align-items:start}
.cs-intro h2{font-size:var(--fs-statement);line-height:1.2;max-width:820px}
.facts{list-style:none;border-top:1px solid var(--brown)}
.facts li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts span{font-family:var(--display);font-size:var(--fs-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--stone)}
.cs-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);margin-top:clamp(64px,8vw,120px)}
.cs-body p{font-size:var(--fs-lead);line-height:1.5}
.cs-body p:first-child::first-letter{font-family:var(--display);float:left;font-size:4.2em;line-height:.82;padding:6px 12px 0 0;color:var(--gold-deep)}

.cs-full{height:100vh;min-height:560px;overflow:hidden}
.cs-full figcaption,.cs-pair figcaption{font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-top:12px}

.pieces{background:var(--sand);color:var(--ink)}
.pieces > h2{font-size:var(--fs-h2);margin-bottom:clamp(56px,7vw,100px);max-width:900px}
.piece{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,100px);align-items:center;padding:clamp(40px,5vw,70px) 0;border-top:1px solid var(--line)}
.piece:nth-of-type(even){grid-template-columns:5fr 7fr}
.piece:nth-of-type(even) .media{order:2}
.piece .media{aspect-ratio:16/9;overflow:hidden}
.piece .n{font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.12em;color:var(--gold-deep)}
.piece h3{font-size:var(--fs-title);line-height:1.2;margin:14px 0 16px}
.piece p{color:var(--stone);max-width:440px;font-size:var(--fs-lead);line-height:1.5}

.palette{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap;margin-top:40px}
.swatch{display:flex;flex-direction:column;gap:10px;font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.swatch i{display:block;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);background:var(--sand)}
.cs-pair .media{aspect-ratio:4/3.3;overflow:hidden}

.cs-close{background:var(--sand);text-align:center}
.cs-close blockquote{font-family:var(--display);text-transform:uppercase;font-size:var(--fs-feature);line-height:1.08;max-width:1200px;margin:0 auto 28px}
.cs-close .sig{font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--stone)}

.cs-next{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--sand)}
.cs-next a.back{font-family:var(--display);font-size:var(--fs-h2);text-transform:uppercase;line-height:1.05;transition:color .4s}
.cs-next a.back:hover{color:var(--gold-deep)}

/* Responsive */
@media (max-width:900px){
  .split,.portfolio,.about,.cs-intro-grid,.cs-body{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc:nth-child(2){border-right:0;margin-right:0}
  .steps{grid-template-columns:1fr 1fr}
  .rir-grid,.rir-steps{grid-template-columns:1fr}
  .piece,.piece:nth-of-type(even){grid-template-columns:1fr}
  .piece:nth-of-type(even) .media{order:0}
  .f-grid{grid-template-columns:1fr 1fr}
  nav.menu{grid-template-columns:1fr}
  nav.menu .menu-img{display:none}
  .top-right .est{display:none}
  .intro-split,.founder2{grid-template-columns:1fr;padding-right:var(--pad)}
  .projects{grid-template-columns:1fr}
  .about2{grid-template-columns:1fr 1fr}
  .about2 .txt{grid-column:1 / -1;padding-top:0}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid ul{grid-column:1 / -1}
  .svc-car{--top:150px;--cw:clamp(220px,min(62vw,(var(--vh) - 360px) * .75),360px);--nw:24vw}
  .svc-car .head,.svc-car .ctrl{left:var(--pad)}
  .svc-car .num{right:var(--pad)}
  .svc-car .sl.cur{left:var(--pad)}
  .svc-car .sl.nxt{left:calc(100% - var(--pad) - var(--nw))}
}
@media (max-width:600px){
  .hero-copy,.cs-hero .txt{flex-direction:column;align-items:flex-start}
  .cs-hero .loc{text-align:left}
  .svc-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .rir-list{grid-template-columns:1fr}
  .report{transform:none}
  .report::after{right:0}
  .svc{border-right:0;margin-right:0;border-bottom:1px solid rgba(243,240,234,.18)}
  .founder blockquote,.founder .side{position:relative;left:auto;right:auto;bottom:auto;text-align:left;margin-top:28px}
  .founder{display:flex;flex-direction:column;align-items:flex-start}
  .f-grid{grid-template-columns:1fr}
  .about2{grid-template-columns:1fr}
  .svc-car .sl.nxt{display:none}
  .svc-car{--cw:calc(100vw - 2 * var(--pad))}
  .svc-car .num{letter-spacing:8px}
  .svc-car .sl .ph{aspect-ratio:4/3.4}
  .statement .side{left:clamp(16px,3.7vw,53px);right:auto}
  .cs-pair{grid-template-columns:1fr}
  .facts li{grid-template-columns:100px 1fr}
  header.top .pill{display:none}
  .burger{width:40px;height:40px}
  header.top .brand{left:clamp(16px,3.7vw,53px);transform:translateY(-50%)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  .mask{clip-path:none}
  .mask img,.mask video{transform:none}
}

/* Services named one per line above the Portfolio heading, at the 30px label size */
.svc-lines{list-style:none;text-transform:uppercase;margin:0 0 26px;font-family:var(--display);font-size:var(--fs-title);line-height:1.2;color:var(--brown);-webkit-text-stroke:.6px var(--brown);letter-spacing:.01em}
.svc-lines li + li{margin-top:2px}

/* ===== Spatial strategy (Saloma): sticky plan that builds step by step ===== */
.strategy{background:var(--sand)}
.st-head{display:grid;grid-template-columns:7fr 4fr;gap:clamp(40px,7vw,120px);align-items:end;margin-bottom:clamp(56px,7vw,100px)}
.st-head h2{font-size:var(--fs-h2);line-height:1.08;max-width:900px}
.st-head p{font-size:var(--fs-lead);line-height:1.5;color:var(--stone)}
.st-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:start}
.st-plan{position:sticky;top:84px}
.st-plan figure{background:var(--cream);border:1px solid var(--line);padding:clamp(14px,1.6vw,24px)}
.st-now{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.st-now b{font-family:var(--display);font-weight:400;font-size:var(--fs-title);color:var(--gold-deep);line-height:1}
.st-now span{font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.06em;text-transform:uppercase}
.plan{display:block;width:100%;height:auto;max-height:calc(100vh - 230px);font-family:var(--sans)}
.plan .ly{transition:opacity .7s var(--ease)}
.plan .ly.off{opacity:0}
.plan .floor{fill:#F3E7D6}
.plan .grid{stroke:rgba(51,40,32,.08);stroke-width:2;fill:none}
.plan .wall{fill:none;stroke:#332820;stroke-width:10}
.plan .glass{fill:none;stroke:#F3E7D6;stroke-width:3}
.plan .dim{fill:none;stroke:#6B5F52;stroke-width:2}
.plan .lbl{font-size:26px;letter-spacing:.08em;fill:#332820}
.plan .sm{font-size:24px;fill:#6B5F52}
.plan .big{font-size:38px;letter-spacing:.06em;fill:#332820}
.plan .halo{paint-order:stroke;stroke:#FBEEDB;stroke-width:6px;stroke-linejoin:round}
.plan .big.halo{stroke-width:8px}
.plan .mark{fill:none;stroke:#332820;stroke-width:3;stroke-dasharray:6 5}
.plan .y-l{font-size:26px;letter-spacing:.06em;fill:#A4532F;font-weight:500}
.plan .y-ring{fill:none;stroke:#A4532F;stroke-width:3;stroke-dasharray:10 8}
.plan .y-fill{fill:#A4532F;opacity:.2}
.plan .rm{fill:#E6DACA}
.plan .iw{fill:none;stroke:#332820;stroke-width:5}
.plan .pass{stroke:#332820;stroke-width:2;stroke-dasharray:4 6}
.plan .dooralley{stroke:#F3E7D6;stroke-width:12}
.plan .counter{fill:#9C948A;stroke:#332820;stroke-width:2}
.plan .screen{fill:none;stroke:#B8914F;stroke-width:9;stroke-dasharray:3 4}
.plan .z-l{font-size:26px;letter-spacing:.1em;fill:#8C6E3C;font-weight:500}
.plan .proc{fill:none;stroke:#8C6E3C;stroke-width:4;stroke-dasharray:14 10}
.plan .island{fill:#2F4536;stroke:#B8914F;stroke-width:6}
.plan .sight{fill:none;stroke:#C8A96B;stroke-width:2;stroke-dasharray:6 6}
.plan .loop{fill:none;stroke:#332820;stroke-width:2;stroke-dasharray:3 9;opacity:.6}
.plan .tb{fill:#2E4535;stroke:#B8914F;stroke-width:3}
.plan .ch{fill:#9C4A2A}
.plan .lc,.plan .st circle{fill:#A3592C}
.plan .ban{fill:#2F4536}
.plan .cove{fill:none;stroke:#C8A96B;stroke-width:4}
.plan .glows circle{fill:url(#glow);opacity:.75}
.plan .r-guest{fill:none;stroke:#B8914F;stroke-width:7;stroke-linecap:round}
.plan .r-staff,.plan .r-staff2{fill:none;stroke:#3E5A45;stroke-width:5;stroke-dasharray:12 8}
.plan .r-del{fill:none;stroke:#3E5A45;stroke-width:5;stroke-dasharray:3 7;stroke-linecap:round}
.plan .kit > ellipse,.plan .kit > rect{fill:none;stroke:#8C6E3C;stroke-width:4}
.plan .badge circle{fill:#332820}
.plan .badge text{fill:#FBEEDB;font-family:var(--display);font-size:24px}
.plan .seats,.plan .island{transition:opacity .7s var(--ease)}
.plan[data-step="10"] .seats,.plan[data-step="10"] .island{opacity:.25}
.plan[data-step="11"] .seats{opacity:.45}
.st-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.st-legend li{display:flex;align-items:center;gap:8px}
.st-legend i{display:block;width:26px;height:0;border-top:4px solid}
.st-legend .lg-guest{border-color:#B8914F}
.st-legend .lg-staff{border-top-style:dashed;border-color:#3E5A45}
.st-legend .lg-fire{border-color:#D9772B}
.st-legend .lg-screen{border-top-style:dotted;border-color:#B8914F}

.st-phase{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:baseline;padding:clamp(40px,5vw,72px) 0 18px;border-bottom:1px solid var(--brown)}
.st-phase:first-child{padding-top:0}
.st-phase b{grid-row:span 2;font-family:var(--display);font-weight:400;font-size:var(--fs-feature);line-height:.85;color:var(--gold-deep)}
.st-phase span{font-family:var(--display);font-size:var(--fs-title);text-transform:uppercase;letter-spacing:.04em}
.st-phase em{font-style:normal;font-size:var(--fs-body);color:var(--stone)}
.st-step{padding:clamp(36px,4vw,56px) 0;min-height:52vh;border-bottom:1px solid var(--line);opacity:.38;transition:opacity .6s var(--ease)}
.st-step.on{opacity:1}
.st-step .n{font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.12em;color:var(--gold-deep)}
.st-step h3{font-size:var(--fs-title);line-height:1.2;margin:12px 0 16px}
.st-step p{font-size:var(--fs-lead);line-height:1.55;color:var(--stone)}
.st-step p + p,.st-step ol + p,.st-step ul + p,.st-step p + ol{margin-top:14px}
.st-list{padding-left:1.4em;font-size:var(--fs-lead);line-height:1.5;color:var(--stone)}
.st-list li + li{margin-top:6px}
.st-list li::marker{font-family:var(--display);color:var(--gold-deep)}
.st-figs{list-style:none;display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:22px}
.st-figs li{font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.st-figs b{display:block;font-family:var(--display);font-weight:400;font-size:var(--fs-title);letter-spacing:0;color:var(--brown);margin-bottom:4px}
.st-out{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.st-out span{display:block;font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--brown);margin-bottom:6px}
.st-seats{list-style:none;border-top:1px solid var(--brown);margin-bottom:16px}
.st-seats li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:var(--fs-ui)}
.st-seats span{font-family:var(--sans);color:var(--stone)}
.st-bar{display:flex;height:44px;margin-bottom:10px}
.st-bar i{display:flex;align-items:center;justify-content:center;min-width:0}
.st-bar span{font-family:var(--display);font-size:var(--fs-ui);color:var(--cream)}
.st-step .st-key{font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.st-step .st-note{font-size:var(--fs-body);font-style:italic;margin-top:18px}

@media (max-width:900px){
  .st-head,.st-grid{grid-template-columns:1fr}
  .st-plan{top:68px;z-index:3;background:var(--sand);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px}
  .st-plan figure{padding:10px}
  .plan{max-height:38vh}
  .st-now{padding-bottom:8px;margin-bottom:4px}
  .st-legend{display:none}
  .st-step{min-height:auto;padding:32px 0}
}
@media (prefers-reduced-motion:reduce){.st-step{opacity:1}}

/* ===== Project intake (start.html): one step at a time ===== */
.intake{background:var(--sand);color:var(--brown)}
.in-grid{display:grid;grid-template-columns:minmax(220px,1fr) 2.2fr;gap:clamp(40px,7vw,120px);align-items:start}
.in-side{position:sticky;top:110px}
.in-steps{list-style:none;border-top:1px solid var(--brown)}
.in-steps li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--stone);transition:color .4s}
.in-steps b{font-weight:400;color:var(--gold-deep);min-width:48px}
.intake [hidden]{display:none!important}
.in-steps li.on{color:var(--brown)}
.in-steps li.done{color:var(--brown)}
.in-steps li.done b::after{content:" \2713"}
.in-prog{height:2px;background:var(--line);margin-top:24px}
.in-prog i{display:block;height:100%;width:20%;background:var(--gold-deep);transition:width .6s var(--ease)}
.in-note{margin-top:20px;color:var(--stone);max-width:300px}
.in-side.sent .in-steps li{color:var(--brown)}
.in-form{min-width:0}
.in-step{display:none;border:0;min-width:0}
.in-step.on{display:block;animation:inFade .6s var(--ease)}
@keyframes inFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.in-step legend{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-size:var(--fs-h2);line-height:1.05;text-transform:uppercase;margin-bottom:clamp(28px,4vw,48px)}
.in-step legend .n{font-size:var(--fs-ui);letter-spacing:.12em;color:var(--gold-deep)}
.in-row{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.fld{display:block;margin-bottom:28px}
.fld > span,.q-t{display:block;font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--brown);margin-bottom:12px}
.fld input,.fld textarea{display:block;width:100%;border:0;border-bottom:1px solid var(--brown);background:transparent;padding:10px 0;font:inherit;font-size:var(--fs-lead);color:var(--brown);border-radius:0;outline:none;transition:border-color .3s}
.fld textarea{resize:vertical;min-height:3em}
.fld input:focus,.fld textarea:focus{border-color:var(--gold-deep);box-shadow:0 1px 0 var(--gold-deep)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--stone);opacity:.7}
.q{margin-bottom:32px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips + .chips{margin-top:12px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:.7em 1.3em;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-body);line-height:1.2;color:var(--brown);transition:background .3s,border-color .3s,color .3s}
.chips label:hover span{border-color:var(--brown)}
.chips input:checked + span{background:var(--brown);border-color:var(--brown);color:var(--cream)}
.chips input:focus-visible + span{outline:2px solid var(--gold-deep);outline-offset:2px}
.chips.small span{padding:.45em 1em;font-size:var(--fs-small);letter-spacing:.08em}
.in-sub{border-top:1px solid var(--brown);padding-top:24px;margin-top:8px}
.in-sub-t{font-family:var(--display);font-size:var(--fs-title);text-transform:uppercase;margin-bottom:22px}
.in-alt{margin-top:14px;font-size:var(--fs-body);color:var(--stone)}
.in-alt a{color:var(--brown);border-bottom:1px solid var(--gold-deep)}
.in-alt a:hover{color:var(--gold-deep)}
/* Start page: one card per brief */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(32px,4vw,56px)}
.pick a{display:block;color:var(--brown)}
.pick .ph{overflow:hidden;aspect-ratio:4/3;margin-bottom:22px}
.pick .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pick a:hover .ph img{transform:scale(1.05)}
.pick .n{font-size:var(--fs-small);letter-spacing:.2em;color:var(--gold-deep)}
.pick h3{font-size:var(--fs-title);margin:6px 0 10px;line-height:1.2}
.pick p{font-size:var(--fs-body);line-height:1.55;color:var(--stone);max-width:42ch}
.pick em{display:inline-block;margin-top:16px;font-style:normal;font-size:var(--fs-small);letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--gold-deep);padding-bottom:3px}
.pick em::after{content:" →"}
.pick a:hover em{color:var(--gold-deep)}
.intake > .in-alt{margin-top:40px}
@media (max-width:900px){.pick{grid-template-columns:1fr}}
.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;color:var(--brown);margin-top:8px}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--brown);flex:none}
.in-err{min-height:1.6em;color:#A4532F;margin:8px 0 12px}
.in-nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
.in-nav .pill{border:0;cursor:pointer;margin-left:auto}
.in-nav .pill:disabled{opacity:.5;cursor:wait}
.in-back{background:none;border:0;cursor:pointer;font-family:var(--display);font-size:var(--fs-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--brown)}
.in-back::before{content:"\2190  "}
.in-done h2{font-size:var(--fs-h2);margin-bottom:24px}
.in-done .lead{max-width:560px;margin-bottom:32px;color:var(--stone)}
@media (max-width:900px){
  .in-grid{grid-template-columns:1fr}
  .in-side{position:static}
  .in-steps{display:none}
  .in-prog{margin-top:0}
  .in-row{grid-template-columns:1fr}
}

/* Services: interactive method, before and after compares, report toggles */
.m-intro{max-width:620px;color:var(--stone);font-size:var(--fs-lead);margin:-28px 0 56px}
.m-steps .step{cursor:pointer;outline:none;transition:border-color .4s var(--ease),opacity .4s var(--ease)}
.m-steps .step:not(.on){opacity:.55}
.m-steps .step:hover,.m-steps .step:focus-visible{opacity:1}
.m-steps .step.on{border-top:3px solid var(--gold-deep);padding-top:24px}
.m-pane[hidden]{display:none}
.m-pane .mini,.ba-key,.roi span,.roi em,.tg,.swatches div,.seg button{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-micro)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.ba{position:relative;overflow:hidden;margin-bottom:12px;cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;--p:50%;outline:none}
.ba:focus-visible{box-shadow:0 0 0 2px var(--gold)}
.ba .after,.ba .before img,.ba .before svg{display:block;width:100%;height:auto;pointer-events:none}
.ba .before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba .before img{height:100%;object-fit:cover}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--gold);pointer-events:none}
.ba .bar::after{content:"\2039\2002\203A";position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;background:var(--cream);border:1px solid var(--gold);color:var(--gold-deep);font-size:15px;line-height:27px;text-align:center;box-shadow:0 4px 14px rgba(51,40,32,.25)}
.ba .tg{position:absolute;top:8px;background:rgba(251,238,219,.92);color:var(--brown);padding:4px 9px;pointer-events:none;font-size:10px}
.ba .tg.l{left:8px}.ba .tg.r{right:8px}
.ba.view{aspect-ratio:16/9}
.ba.view .after{height:100%;object-fit:cover}
.ba-key{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--stone);margin-bottom:16px;font-size:10px}
.ba-key span{display:inline-flex;align-items:center;gap:6px}
.ba-key .k{display:inline-block;width:16px;height:0;border-top:2px dashed var(--gold-deep)}
.ba-key .k.neck{width:10px;height:10px;border:1px solid #7D3524;background:rgba(125,53,36,.12);border-radius:50%}
.roi{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;border-top:1px solid var(--taupe);border-bottom:1px solid var(--taupe);padding:12px 0;margin-bottom:12px}
.roi div{display:flex;flex-direction:column}
.roi span{color:var(--stone);font-size:10px}
.roi b{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1;color:var(--ink)}
.roi b.up{color:#3D5230}
.roi em{font-style:normal;color:var(--gold-deep);font-size:10px}
.roi .arrow{font-size:20px;color:var(--gold-deep)}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:4px 0 14px;color:var(--stone);font-size:9.5px;letter-spacing:.08em}
.swatches i{display:block;aspect-ratio:1.6;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(51,40,32,.12)}
.hs{position:absolute;z-index:2;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--cream);color:var(--brown);font-family:var(--display);font-size:11px;line-height:22px;text-align:center;cursor:pointer;box-shadow:0 0 0 4px rgba(251,238,219,.35),0 4px 10px rgba(0,0,0,.3);transition:transform .3s var(--ease),background .3s}
.hs:hover,.hs:focus-visible,.hs.hl{transform:scale(1.18);background:var(--gold);outline:none}
.report table.spec tr{transition:background .3s}
.report table.spec tr.hl{background:#F1E6CF}
.report table.spec tbody tr{cursor:default}
.rir-grid.flip{grid-template-columns:5fr 6fr}
.rir-grid.flip > :first-child{order:2}
.seg{display:inline-flex;border:1px solid var(--taupe);border-radius:999px;padding:3px;margin-bottom:14px}
.seg button{padding:6px 14px;border-radius:999px;color:var(--stone);transition:background .35s var(--ease),color .35s var(--ease)}
.seg button.on{background:var(--brown);color:var(--cream)}
.report .tagc{transition:background .4s,color .4s}
.report-note{display:none;font-size:var(--fs-small);color:#7D3524;margin:-6px 0 14px}
.report.is-out .report-note{display:block}
.report.is-out tr.chg{background:#F7EBD6}
.report.is-out tr.chg td.room::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--gold-deep);vertical-align:middle}
@media (max-width:900px){
  .m-pane{grid-template-columns:1fr}
  .m-pane .q{grid-row:auto;min-height:0}
  .rir-grid.flip{grid-template-columns:1fr}
  .rir-grid.flip > :first-child{order:0}
}
@media (max-width:600px){
  .rir-grid.flip .report{transform:none}
  .m-intro{margin-top:-20px}
}
.m-panel{margin-top:clamp(40px,5vw,64px)}
.m-pane{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:clamp(14px,1.6vw,22px)}
.m-pane .q{grid-row:span 2;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(320px,30vw,420px);background:var(--brown);color:var(--cream);padding:clamp(28px,3.4vw,52px);animation:paneIn .7s var(--ease) both}
.m-pane .q .mini{color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:22px;position:relative}
.m-pane .q .mini::before{content:"";width:28px;height:1px;background:var(--gold)}
.m-pane .q p{position:relative;font-family:var(--display);font-size:var(--fs-statement);line-height:1.18;max-width:14em}
.m-letter{position:absolute;right:-.04em;bottom:-.22em;font-family:var(--display);font-size:clamp(200px,24vw,340px);line-height:1;color:var(--gold);opacity:.13;pointer-events:none;transition:opacity .6s var(--ease)}
.m-pane .q:hover .m-letter{opacity:.22}
.m-nav{position:relative;display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:36px}
.m-count{margin-right:auto;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-micro);color:rgba(251,238,219,.7)}
.m-prev{width:42px;height:42px;border-radius:50%;border:1px solid rgba(251,238,219,.35);color:var(--cream);font-size:22px;line-height:1;transition:border-color .4s,color .4s}
.m-prev:hover,.m-prev:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.m-next{padding:.85em 1.5em;border-radius:999px;border:1px solid var(--gold);color:var(--gold);font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-small);transition:background .4s,color .4s}
.m-next::after{content:"  \2192"}
.m-next:hover,.m-next:focus-visible{background:var(--gold);color:var(--brown);outline:none}
.m-pane .a{position:relative;background:var(--cream);padding:clamp(22px,2.6vw,36px);border-top:3px solid var(--gold-deep);transition:transform .5s var(--ease),box-shadow .5s var(--ease);animation:paneIn .7s .12s var(--ease) both}
.m-pane .a + .a{animation-delay:.24s}
.m-pane .a:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(51,40,32,.16)}
.m-pane .a .no{position:absolute;top:clamp(18px,2.2vw,30px);right:clamp(22px,2.6vw,36px);font-family:var(--display);font-size:var(--fs-title);color:var(--gold-deep);opacity:.55}
.m-pane .a .mini{display:block;color:var(--gold-deep);margin-bottom:12px}
.m-pane .a p{color:var(--ink);font-size:var(--fs-lead);line-height:1.5;max-width:30em}
@media (max-width:900px){
  .m-pane{grid-template-columns:1fr}
  .m-pane .q{grid-row:auto;min-height:0}
}
.rir-grid.flip .report{transform:rotate(-1.2deg)}
.ba-plan{background:var(--cream);border:1px solid var(--taupe)}
.ba-plan .plan{max-height:none;padding:4px}
.ba-key .k.guest{border-top:3px solid #B8914F}
.ba-key .k.staff{border-top:2px dashed #3E5A45}
.ba-key .k.neck{width:12px;height:12px;border:1px solid #A4532F;border-radius:2px;background:repeating-linear-gradient(45deg,rgba(164,83,47,.45) 0 2px,transparent 2px 5px)}
.report table.fix-table td.room{width:44%;padding-right:12px;line-height:1.35}
.report table.fix-table td.photos{white-space:normal;line-height:1.4;color:var(--ink)}
.report table.fix-table td.photos::before{content:"\2192\00a0";color:#3D5230}
.roi.three{grid-template-columns:repeat(3,1fr);gap:10px}
.roi.three b{font-size:26px}
.after-strip{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:4px 0 16px;overflow:hidden}
.after-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.after-strip:hover img{transform:scale(1.05)}
.after-strip span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;background:linear-gradient(transparent,rgba(51,40,32,.85));color:var(--cream);font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-micro)}
.after-strip span::after{content:"  \2192"}
.hs.dim{opacity:0;pointer-events:none}
.hs{transition:transform .3s var(--ease),background .3s,opacity .3s}
.m-pane .p{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);background:var(--cream);overflow:hidden;animation:paneIn .7s .36s var(--ease) both}
.m-pane .p img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block}
.m-pane .p > div{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.m-pane .p .mini{color:var(--gold-deep);display:block;margin-bottom:14px}
.m-pane .p p{font-size:var(--fs-lead);line-height:1.55;color:var(--ink);margin-bottom:20px}
.p-link{align-self:flex-start;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-small);color:var(--brown);border-bottom:1px solid var(--gold);padding-bottom:4px;transition:color .3s}
.p-link::after{content:"  \2192"}
.p-link:hover{color:var(--gold-deep)}
.seg.rounds{margin-bottom:10px}
@media (max-width:900px){
  .m-pane .p{grid-template-columns:1fr}
  .m-pane .p img{min-height:0;aspect-ratio:16/9}
}
@media (max-width:600px){
  .rir-grid.flip .report{transform:none}
  .roi.three b{font-size:20px}
}
.m-prev,.m-next,.seg button{background:none;cursor:pointer;font-family:var(--display)}
.seg button.on{background:var(--brown)}
#strategy .rir-grid{grid-template-columns:5fr 6fr}
.ba-plan{padding-top:30px}
.ba-plan .before{top:30px}
.ba-plan .tg{top:6px;background:none;padding:0;font-size:10px}
.ba-plan .tg.l{left:10px;color:#A4532F}.ba-plan .tg.r{right:10px;color:#3D5230}
@media (max-width:900px){ #strategy .rir-grid{grid-template-columns:1fr} }

/* Founder: path, selected work, figures */
.founder2 .f-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.founder2 .f-actions .pill{margin-top:0}
.fpath{background:var(--sand);color:var(--ink)}
.fpath h2{font-size:var(--fs-h2);max-width:900px;margin-bottom:clamp(40px,5vw,64px)}
.fsub{margin-top:clamp(64px,8vw,110px)}
.fstats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--brown)}
.fstats div{padding:26px clamp(14px,2vw,28px) 0 0}
.fstats div + div{border-left:1px solid var(--line);padding-left:clamp(14px,2vw,28px)}
.fstats b{display:block;font-family:var(--display);font-weight:400;font-size:var(--fs-feature);line-height:1;color:var(--gold-deep);margin-bottom:12px}
.fstats span{color:var(--stone);display:block;max-width:220px}
.fwork{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.fwork article{position:relative;background:var(--cream);padding:clamp(24px,2.6vw,36px);border-top:3px solid var(--gold-deep);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fwork article:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(51,40,32,.16)}
.fwork .n{position:absolute;top:clamp(20px,2.4vw,32px);right:clamp(22px,2.6vw,36px);font-family:var(--display);font-size:var(--fs-title);color:var(--gold-deep);opacity:.55}
.fwork h3{font-size:var(--fs-title);line-height:1.15;margin:0 64px 8px 0}
.fwork em,.ftime em{display:block;font-style:normal;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-micro);color:var(--gold-deep);margin-bottom:14px}
.fwork p{color:var(--ink)}
.ftime{list-style:none;position:relative;max-width:980px}
.ftime::before{content:"";position:absolute;left:118px;top:8px;bottom:8px;width:1px;background:var(--line)}
.ftime li{display:grid;grid-template-columns:118px 1fr;gap:0 clamp(28px,4vw,56px);padding:0 0 clamp(26px,3vw,40px);position:relative}
.ftime li::before{content:"";position:absolute;left:113px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--sand);border:1px solid var(--gold-deep);transition:background .4s}
.ftime li:hover::before,.ftime li.now::before{background:var(--gold-deep)}
.ftime .yr{font-family:var(--display);font-size:var(--fs-title);color:var(--gold-deep);line-height:1}
.ftime h3{font-size:var(--fs-title);line-height:1.15;margin-bottom:6px}
.ftime em{margin-bottom:8px}
.ftime p{color:var(--stone);max-width:620px}
.faff{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 40px;border-top:1px solid var(--line);padding-top:28px;margin-top:clamp(20px,3vw,40px)}
.faff .label{margin:0}
.faff p{color:var(--stone)}
.faff b{font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:.06em;margin-right:10px}
@media (max-width:900px){
  .fstats{grid-template-columns:1fr 1fr;row-gap:28px}
  .fstats div:nth-child(3){border-left:0;padding-left:0}
  .fwork{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .fwork{grid-template-columns:1fr}
  .ftime::before{left:6px}
  .ftime li{grid-template-columns:1fr;padding-left:30px}
  .ftime li::before{left:1px}
  .ftime .yr{margin-bottom:8px}
}

/* Names written in mixed case (BiBi) keep their spelling inside uppercase display type */
.nc{text-transform:none !important}
.f-grid.f-menu-only{grid-template-columns:1fr}