@font-face{font-family:'Feijoa Display';src:url('feijoa-display.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#EEE9DF; --surface:#C9C1B1; --ink:#1B2632; --deep:#2C3B4D;
  --flame:#FFB162; --truffle:#A35139; --eucalypt:#67705C;
  --sans:'Inter',sans-serif;
  --serif:'Feijoa Display',serif;
  --radius:6px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.55}
a.label:hover{opacity:1;color:var(--truffle)}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.015em}
h3{font-weight:500;line-height:1.12;letter-spacing:-.025em}
h2{font-size:clamp(30px,3.6vw,46px)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:999px;font-weight:500;font-size:14.5px;transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn-flame{background:var(--flame);color:var(--ink)}
.btn-flame:hover{background:#ffc389}
.btn-light{background:rgba(238,233,223,.14);color:var(--bg);backdrop-filter:blur(6px);border:1px solid rgba(238,233,223,.28)}
.btn-light:hover{border-color:var(--flame);color:var(--flame)}
.btn-ink{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:var(--bg)}
.arr{font-size:16px;line-height:1}

/* HERO */
/* svh keeps the hero a fixed height when mobile browser chrome retracts,
   otherwise the box grows on scroll and the cover-fit image appears to zoom */
.hero{position:relative;overflow:clip;min-height:92vh;min-height:92svh;display:flex;flex-direction:column;justify-content:space-between}
/* image box is pinned to the large-viewport height (stable during URL-bar collapse)
   so browsers that resize the hero mid-scroll (Brave) don't rescale the photo */
.hero-rail{position:absolute;top:0;left:0;width:100%;height:100vh;height:100lvh;overflow:hidden}
/* desktop: slides stack in place and the 4s autoplay crossfades them - the rail
   itself is inert (overflow hidden, nothing to drag) */
.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;opacity:0;transition:opacity 1.1s ease}
.hero-slide.active{opacity:1}
/* portrait interior shot is mobile-only: too tall to crop well on a wide screen */
@media(min-width:921px){.hero-slide-tall{display:none}}
.hero-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;transform:scale(1.15);will-change:transform}
/* pointer-events:none so the gradient doesn't swallow swipes aimed at the rail below it */
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(27,38,50,.82),rgba(27,38,50,.18) 45%,rgba(27,38,50,.28))}
/* top navigation: big logo left, page links + search right */
.topnav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 40px}
/* on the hero the nav rides down with you (sticky) until the headline zone pushes it out */
.topnav-zone{flex:1;align-self:stretch;z-index:3}
.hero .topnav{position:sticky;top:0}
@media(min-width:921px){
  .hero .topnav{padding-left:90px}
  /* 103px lines the headline up with the wordmark inside the logo SVG (90px padding + ~13px internal inset).
     .hero prefix keeps this from losing to the base .hero-bottom rule later in the sheet */
  .hero .hero-bottom{padding-left:103px;padding-bottom:76px}
}
.hero-link{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.hero-link:hover{color:var(--bg)}
.hero-link .arr{transition:transform .2s}
.hero-link:hover .arr{transform:translateX(4px)}
.hero .hero-ctas{margin-top:40px}
.topnav .logo img{height:150px;width:auto}
.topnav-links{display:flex;align-items:center;gap:36px}
.topnav-links a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink);opacity:.72;transition:opacity .2s}
.topnav-links a:hover{opacity:1}
.topnav.on-dark .topnav-links a{color:#fff;opacity:.88}
.topnav.on-dark .topnav-links a:hover{opacity:1}
.search-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;padding:4px;color:var(--ink);opacity:.72;transition:opacity .2s}
.search-btn:hover{opacity:1}
.topnav.on-dark .search-btn{color:#fff;opacity:.88}
.search-btn svg{width:19px;height:19px}
@media(max-width:760px){
  .topnav{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 24px}
  .topnav .logo img{height:96px}
  .topnav-links{gap:20px;flex-wrap:wrap}
  .topnav-links a{font-size:11.5px;letter-spacing:.07em}
  /* index hero nav: no search icon on phones — the scroll-up banner still has one */
  .hero .topnav .search-btn{display:none}
}

/* search overlay */
.search-overlay{position:fixed;inset:0;z-index:100;background:rgba(27,38,50,.97);display:flex;flex-direction:column;align-items:center;padding:90px 24px 40px;opacity:0;pointer-events:none;transition:opacity .25s;overflow-y:auto}
.search-overlay.open{opacity:1;pointer-events:auto}
.search-overlay input{background:none;border:none;border-bottom:1px solid rgba(238,233,223,.3);color:var(--bg);font-family:var(--serif);font-size:clamp(28px,4vw,44px);padding:10px 4px;width:min(640px,92%);outline:none}
.search-overlay input::placeholder{color:rgba(238,233,223,.35)}
.search-results{margin-top:34px;width:min(640px,92%);display:flex;flex-direction:column}
.search-results a{font-family:var(--serif);font-size:21px;color:var(--bg);padding:14px 4px;border-bottom:1px solid rgba(238,233,223,.12);display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.search-results a .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(238,233,223,.45);white-space:nowrap}
.search-results a:hover{color:var(--flame)}
.search-close{position:absolute;top:22px;right:30px;background:none;border:none;color:var(--bg);font-size:36px;cursor:pointer;line-height:1;padding:6px}
.hero-bottom{position:relative;z-index:2;padding:0 46px 44px;display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap;color:var(--bg)}
.hero h1{font-size:clamp(36px,4vw,56px);color:var(--bg);max-width:960px}
.hero .tag{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--flame);margin-bottom:16px}
.hero .tag i{width:6px;height:6px;border-radius:50%;background:var(--flame)}
.hero p{max-width:470px;margin:18px 0 26px;color:rgba(238,233,223,.85);font-size:16.5px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-chip{background:rgba(27,38,50,.42);backdrop-filter:blur(10px);border:1px solid rgba(238,233,223,.16);border-radius:16px;padding:18px 22px;max-width:290px}
.hero-chip .label{color:var(--flame);opacity:1;display:block;margin-bottom:6px}
.hero-chip p{margin:0;font-size:14px;color:rgba(238,233,223,.85)}
@media(max-width:920px){.hero-bottom{padding:0 26px 30px}.hero-chip{display:none}}
.scroll-cue{display:none}
/* phones: the hero becomes a swipeable snap rail of the same photos (plus the portrait
   interior). Autoplay advances it every 3s; swiping pauses that. No dots by design.
   overflow-y:hidden keeps vertical drags going to the page, so normal scrolling is unaffected. */
@media(max-width:920px){
  .hero-rail{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hero-rail::-webkit-scrollbar{display:none}
  /* min-width guard: a flex-basis alone can still be squeezed below the rail width.
     opacity comes back to 1 for every slide: on phones position does the work, not fades */
  .hero-slide{position:relative;flex:0 0 100%;min-width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;opacity:1;transition:none}
  /* .topnav-zone is flex:1/stretch so it covers the entire upper hero, and .hero-bottom
     covers the rest - between them they swallowed every swipe before it reached the rail.
     Let touches fall through both, and hand them back to the parts that are actually
     interactive (the nav bar and the hero link). */
  .hero .topnav-zone,.hero .hero-bottom{pointer-events:none}
  .hero .topnav,.hero .hero-bottom a{pointer-events:auto}
  /* phones: no hero button; a bobbing chevron invites the scroll instead and fades
     out (.gone, set from site.js) as soon as scrolling starts */
  .hero .hero-ctas{display:none}
  .scroll-cue{display:block;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;color:#fff;opacity:.85;pointer-events:none;transition:opacity .45s ease}
  .scroll-cue.gone{opacity:0}
  .scroll-cue svg{width:30px;height:30px;animation:cue-bob 2.2s ease-in-out infinite}
}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(prefers-reduced-motion: reduce){.scroll-cue svg{animation:none}}
.fade{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.fade.in{opacity:1;transform:none}

/* STATEMENT */
.statement{padding:120px 0 90px;background:var(--surface)}
.statement .grid{display:grid;grid-template-columns:180px 1fr;gap:40px}
/* generic version of the statement grid: empty first column indents content to the mission text line */
.offset-grid{display:grid;grid-template-columns:180px 1fr;gap:40px}
@media(max-width:920px){.offset-grid{grid-template-columns:1fr}.offset-grid>span:empty{display:none}}
.statement p.big{font-family:var(--serif);font-size:clamp(38px,4.8vw,62px);line-height:1.18;letter-spacing:-.015em;font-weight:400;max-width:1020px;color:#1B2632}
/* about-page mission: truffle band with flame text */
.statement-flame{background:var(--truffle)}
.statement-flame p.big{color:var(--flame)}
.statement-flame .label{color:var(--flame);opacity:.85}
.statement .statement-centre{text-align:center;margin:0 auto;line-height:1.3}
.statement .statement-centre span{display:block}
.statement .statement-centre span+span{margin-top:.28em}
/* mobile: smaller type, roomier breaks with faint hairlines */
@media(max-width:640px){
  .statement p.big{font-size:26px}
  .statement .statement-centre span+span{margin-top:.75em;padding-top:.75em;position:relative}
  .statement .statement-centre span+span::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:56px;height:1px;background:rgba(27,38,50,.25)}
}
.statement p.big b{font-weight:400;color:var(--ink)}
.statement p.big .hl{color:var(--truffle);font-weight:500}
@media(max-width:920px){.statement .grid{grid-template-columns:1fr}}
.trust-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:70px;padding-top:44px;border-top:1px solid rgba(27,38,50,.14)}
.trust-item .num{font-size:11.5px;letter-spacing:.12em;font-weight:500;color:var(--truffle);display:block;margin-bottom:10px}
.trust-item p{font-size:14px;font-weight:500;line-height:1.4}
@media(max-width:920px){.trust-row{grid-template-columns:repeat(2,1fr)}}

/* DARK BAND - WHY */
.why{background:var(--ink);color:var(--bg);padding:100px 0}
.why .label{color:var(--flame);opacity:1}
.why h2{color:var(--bg);max-width:560px;margin-top:16px}
.why-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:64px}
.why-head p{max-width:380px;font-size:15.5px;color:rgba(238,233,223,.65)}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.why-grid .why-card:last-child:nth-child(odd){grid-column:1/-1}
.why-card{background:var(--deep);border:1px solid rgba(238,233,223,.08);border-radius:var(--radius);padding:34px 32px}
.why-card .num{font-size:11.5px;letter-spacing:.12em;color:var(--flame);font-weight:500;display:block;margin-bottom:22px}
.why-card h3{font-size:19px;margin-bottom:12px;color:var(--bg)}
.why-card p{font-size:14.5px;color:rgba(238,233,223,.68)}
.why-link{font-weight:500;color:var(--flame);white-space:nowrap}
.why-link .arr{display:inline-block;margin-left:6px;transition:transform .2s}
.why-link:hover .arr{transform:translateX(4px)}
@media(max-width:920px){.why-grid{grid-template-columns:1fr}}
.round-band{margin-top:14px;border:1px solid rgba(238,233,223,.18);border-radius:var(--radius);padding:38px 40px;display:grid;grid-template-columns:250px 1fr;gap:16px 44px;align-items:start}
.round-band .num{font-size:11.5px;letter-spacing:.12em;color:var(--flame);font-weight:500;text-transform:uppercase;display:block;margin-bottom:14px}
.round-band h3{font-size:21px;color:var(--bg)}
.round-band p{font-size:14.5px;color:rgba(238,233,223,.68)}
.round-band p a{color:var(--flame)}
.round-band p a:hover{color:#ffc389}
@media(max-width:920px){.round-band{grid-template-columns:1fr;padding:32px 30px}}
/* FOUNDERS - alternating photo / text rows */
.founders{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.founder{display:grid;grid-template-columns:340px 1fr;gap:14px}
.founder-flip{grid-template-columns:1fr 340px}
.founder-flip .founder-img{order:2}
.founder-card{background:var(--deep);border:1px solid rgba(238,233,223,.08);border-radius:var(--radius);padding:44px 46px;display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.founder-bio{font-size:15.5px;line-height:1.62;color:rgba(238,233,223,.72)}
.founder-bio p+p{margin-top:14px}
.founder-card cite{font-style:normal;font-size:13px;color:var(--flame);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.founder-img{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(238,233,223,.08);min-height:380px}
.founder-img img{width:100%;height:100%;object-fit:cover}
.why .draft-note{color:var(--flame);border-color:rgba(255,177,98,.32);background:rgba(255,177,98,.1);margin-top:0}
@media(max-width:920px){
  .founder,.founder-flip{grid-template-columns:1fr}
  .founder-flip .founder-img{order:0}
  .founder-img{height:min(60vh,440px);min-height:0}
}

/* MODELS */
.models-sec{padding:120px 0}
.models-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:60px}
.models-head h2{max-width:520px;margin-top:16px}
.models-head p{max-width:360px;font-size:15.5px;color:rgba(27,38,50,.65)}
.c5{width:112px;height:112px}.c7{width:156px;height:156px}.c9{width:200px;height:200px}

/* YURT TYPE CARDS (homepage) */
.lattice-feature{display:grid;grid-template-columns:minmax(340px,5fr) 7fr;gap:14px;align-items:stretch}
.lattice-info{background:var(--surface);border-radius:var(--radius);padding:42px 40px;display:flex;flex-direction:column}
.lattice-info .oak-note{font-size:17px}
.lattice-info .desc{font-size:15px;color:rgba(27,38,50,.7);margin-bottom:26px}
.lattice-info .type-points{flex:1;margin:0}
.lattice-info .type-points li{font-size:14px;margin-bottom:10px;padding-left:19px}
.lattice-info .btn{margin-top:32px;align-self:flex-start}
.lattice-media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface);min-height:480px}
.lattice-media img{width:100%;height:100%;object-fit:cover}
.models-head-sub{margin-top:110px}
.models-head h2 .soon-badge{display:inline-block;vertical-align:middle;margin-left:16px;position:relative;top:-3px}
.feature-flip{grid-template-columns:7fr minmax(340px,5fr)}
.media-soon{background:repeating-linear-gradient(-45deg,rgba(27,38,50,.05),rgba(27,38,50,.05) 12px,transparent 12px,transparent 24px);border:1px solid rgba(27,38,50,.12);display:flex;align-items:center;justify-content:center}
.media-soon span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(27,38,50,.4);font-weight:500}
@media(max-width:920px){.lattice-feature{grid-template-columns:1fr}.lattice-media{min-height:0;height:320px;order:-1}.lattice-info{padding:32px 28px}.media-soon{height:200px}.models-head-sub{margin-top:80px}}
.type-card{position:relative;border:1px solid rgba(27,38,50,.16);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s}
.type-card:hover{border-color:var(--truffle)}
.type-card .type-img{height:280px;background:var(--surface);position:relative;overflow:hidden}
.type-card .type-img img{width:100%;height:100%;object-fit:cover;display:block}
.type-carousel img{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.type-carousel img.active{opacity:1}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;border:none;background:rgba(27,38,50,.42);backdrop-filter:blur(4px);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,background .2s}
.car-arrow:hover{background:rgba(27,38,50,.65)}
.type-carousel:hover .car-arrow{opacity:1}
.car-prev{left:14px}
.car-next{right:14px}
.car-dots{position:absolute;bottom:14px;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:7px}
.car-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .2s,transform .2s;cursor:pointer}
.car-dots span.active{background:#fff;transform:scale(1.3)}
@media(max-width:640px){.car-arrow{opacity:1}}
.type-card .type-body{padding:20px 30px 32px;display:flex;flex-direction:column;flex:1}
.oak-note{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:10px}
.type-card p.desc{font-size:14.5px;color:rgba(27,38,50,.65);margin-bottom:16px}
.type-points{list-style:none;margin:0 0 6px;padding:0;flex:1}
.type-points li{position:relative;padding-left:17px;font-size:13.5px;color:rgba(27,38,50,.65);margin-bottom:8px}
.type-points li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--truffle)}
.type-card .more{margin-top:16px;font-size:13.5px;font-weight:500;letter-spacing:.04em;display:inline-flex;gap:8px;color:var(--truffle);transition:gap .2s}
.type-body:hover .more{gap:14px}
.custom{margin-top:14px;border:1px solid rgba(27,38,50,.16);border-radius:var(--radius);padding:34px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.custom h3{font-size:21px;margin-bottom:6px}
.custom p{font-size:14.5px;color:rgba(27,38,50,.65)}

/* USES */
.uses-sec{padding:120px 0;background:var(--flame)}
.uses-sec h2{color:var(--truffle)}
.uses-sec .label{color:var(--truffle);opacity:.85}
.uses-sec .uses-caption-track span{color:var(--truffle)}
.uses-actions .btn-ink{border-color:var(--truffle);color:var(--truffle)}
.uses-actions .btn-ink:hover{background:var(--truffle);color:#fff}
.uses-head-mobile{display:none}
.uses-caption-clip{overflow:hidden;margin:10px 0 20px}
.uses-caption-track{display:flex;will-change:transform}
.uses-caption-track span{flex:0 0 100%;min-width:100%;font-size:14px;color:var(--truffle);font-weight:500}
.uses-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.uses-rail{position:relative}
.uses-img{border-radius:var(--radius);overflow:hidden;min-height:420px;height:100%;position:relative}
.uses-dots{display:none}
.uses-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.uses-img img.active{opacity:1}
.uses-card{background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
/* desktop: label + title above the grid, matching the other section heads */
.uses-head-desktop{display:none}
@media(min-width:921px){
  .uses-head-desktop{display:block;margin-bottom:60px}
  .uses-head-desktop h2{margin-top:16px;max-width:560px}
}
.uses-list{list-style:none;columns:1}
.uses-list li{padding:12px 0;border-bottom:1px solid rgba(238,233,223,.16);font-size:15px;font-weight:500;display:flex;justify-content:space-between;align-items:center;cursor:default;transition:color .2s,padding-left .2s}
.uses-list li:last-child{border-bottom:none}
.uses-list li:hover,.uses-list li.active{color:var(--flame);padding-left:6px}
.uses-list li span.n{font-size:11px;color:var(--flame);letter-spacing:.1em;font-weight:500}
.uses-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
/* desktop: buttons live inside the dark card so card and picture line up; the
   duplicate .uses-actions-mobile shows under the rail on phones instead */
.uses-card .uses-actions{margin-top:36px}
.uses-card .uses-actions .btn-ink{border-color:#fff;color:#fff}
.uses-card .uses-actions .btn-ink:hover{background:#fff;color:var(--ink)}
@media(min-width:921px){
  .uses-card{grid-column:1;grid-row:1}
  .uses-rail{grid-column:2;grid-row:1;min-height:620px}
  .uses-actions-mobile{display:none}
}
@media(max-width:920px){
  .uses-grid{grid-template-columns:1fr}
  /* mobile: heading + caption above a swipeable auto-advancing image rail; the desktop list is hidden */
  .uses-head-mobile{display:block}
  .uses-card{display:none}
  .uses-actions{margin-top:10px}
  .uses-img{position:relative;min-height:0;height:340px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .uses-img::-webkit-scrollbar{display:none}
  /* translucent position dots over the bottom of the photo */
  .uses-dots{display:flex;gap:7px;justify-content:center;position:absolute;left:0;right:0;bottom:12px;pointer-events:none;z-index:2}
  .uses-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .25s}
  .uses-dots span.active{background:#fff}
  .uses-img img{position:static;flex:0 0 100%;width:100%;min-width:100%;height:100%;object-fit:cover;opacity:1;transition:none;scroll-snap-align:center}
}

/* GALLERY */
.gallery-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.gf{padding:9px 20px;border-radius:999px;border:1px solid rgba(27,38,50,.25);background:transparent;color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.gf:hover{border-color:var(--truffle);color:var(--truffle)}
.gf.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.gallery-grid{columns:3;column-gap:14px}
.g-item{break-inside:avoid;margin:0 0 14px;border-radius:var(--radius);overflow:hidden;cursor:pointer}
.g-item img{width:100%;display:block;transition:transform .5s ease}
.g-item:hover img{transform:scale(1.04)}
@media(max-width:920px){.gallery-grid{columns:2;column-gap:10px}.g-item{margin-bottom:10px;border-radius:12px}}
.lightbox{position:fixed;inset:0;background:rgba(27,38,50,.93);display:none;align-items:center;justify-content:center;z-index:300;padding:26px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;border-radius:10px}
.lb-close{position:absolute;top:14px;right:20px;background:none;border:none;color:var(--bg);font-size:42px;line-height:1;cursor:pointer;font-family:inherit}

/* CTA */
.photo-band{overflow:hidden;position:relative;height:clamp(320px,44vw,600px)}
.cta{overflow:hidden;position:relative;min-height:520px;display:flex;align-items:flex-end}
.cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.cta::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(27,38,50,.85),rgba(27,38,50,.12) 60%)}
.cta-inner{position:relative;z-index:2;width:100%;padding:0 46px 46px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;color:var(--bg)}
.cta .label{display:inline-block;background:rgba(27,38,50,.45);backdrop-filter:blur(6px);padding:7px 15px;border-radius:999px;margin-bottom:6px}
.cta h2{color:var(--bg)}
.cta p{max-width:420px;margin-top:14px;color:rgba(238,233,223,.85);font-size:15.5px}
@media(max-width:920px){.cta-inner{padding:0 26px 30px}}

/* FOOTER */
footer{background:var(--bg);padding:64px 28px 34px;border-top:1px solid rgba(27,38,50,.16)}
.foot{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:40px}
.foot img{height:100px;width:auto}
.foot .col{font-size:14px;line-height:2.1}
.foot .col b{display:block;font-weight:500;letter-spacing:.13em;text-transform:uppercase;font-size:11px;color:var(--truffle);margin-bottom:8px}
.foot a{opacity:.75;transition:opacity .2s}
.foot a:hover{opacity:1}
.legal{max-width:1240px;margin:46px auto 0;padding-top:22px;border-top:1px solid rgba(27,38,50,.12);font-size:12.5px;opacity:.5;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.legal a{text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .2s}
.legal a:hover{text-decoration-color:currentColor}
.legal .sep{margin:0 8px;opacity:.6}
.social-row{display:flex;gap:10px;margin-top:18px}
.social-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(27,38,50,.18);display:flex;align-items:center;justify-content:center;color:rgba(27,38,50,.55);transition:border-color .2s,color .2s}
.social-btn:hover{border-color:var(--truffle);color:var(--truffle)}
.social-btn svg{width:16px;height:16px}
.social-btn.soon{opacity:.4;cursor:default;pointer-events:none}
@media(max-width:920px){.foot{grid-template-columns:1fr 1fr}}

/* ---------- inner pages ---------- */
.page-hero{padding:250px 0 70px}
.page-hero .label{color:var(--truffle);opacity:1}
.page-hero h1{font-size:clamp(38px,5vw,64px);margin-top:16px;max-width:760px}
.page-hero p.intro{max-width:560px;margin-top:22px;font-size:17px;color:rgba(27,38,50,.7)}
.navbar{position:absolute;top:16px;left:16px;right:16px;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 24px}
.navbar .logo img{height:115.625px}
.testi-sec{padding:120px 0;background:var(--truffle)}
.testi-sec .label{color:#fff;opacity:.75}
.testi-sec h2{color:var(--bg)}
.testi-sec .testi-card:hover{border-color:var(--ink)}
.testi-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px)/3);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.testi-rail::-webkit-scrollbar{display:none}
.testi-card{scroll-snap-align:start;background:var(--bg);border:1px solid rgba(27,38,50,.1);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;transition:border-color .25s}
.testi-card:hover{border-color:var(--truffle)}
.testi-card blockquote{font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.55;flex:1}
.testi-who{display:flex;align-items:center;gap:10px;margin-top:20px}
.testi-card cite{font-style:normal;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--truffle)}
/* who-block at the top of the card: bigger avatar, big name over small location */
.testi-card .testi-who:first-child{margin-top:0;margin-bottom:20px;gap:14px}
.testi-card .testi-who:first-child .avatar-photo,.testi-card .testi-who:first-child .avatar-soon{width:56px;height:56px}
.testi-card .testi-who:first-child cite b{display:block;font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.01em;text-transform:none;color:var(--ink);line-height:1.15}
.testi-card .testi-who:first-child cite span{font-size:11px;letter-spacing:.13em}
.testi-card .proj{font-size:13.5px;color:rgba(27,38,50,.6);margin-top:8px}
.testi-card .more{margin-top:20px;font-size:13.5px;font-weight:500;letter-spacing:.04em;display:inline-flex;gap:8px;color:var(--truffle);transition:gap .2s}
.testi-card:hover .more{gap:14px}
.soon-quote{font-style:italic;color:rgba(27,38,50,.4)}
@media(max-width:1000px){.testi-rail{grid-auto-columns:46%}}
@media(max-width:640px){.testi-rail{grid-auto-columns:82%}}
.project{display:grid;grid-template-columns:5fr 6fr;gap:48px;align-items:center;padding:56px 0;border-top:1px solid rgba(27,38,50,.12);scroll-margin-top:90px}
.project:first-of-type{border-top:none;padding-top:0}
.project-media{border-radius:var(--radius);min-height:340px;position:relative;overflow:hidden}
.project-media span{max-width:200px;text-align:center;line-height:1.7}
.project h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px}
.project-body p{font-size:15px;color:rgba(27,38,50,.7)}
.project .post-meta{display:block}
.project-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-media:has(img){align-self:stretch}
.project-quote{margin-top:26px;background:rgba(27,38,50,.04);border:1px solid rgba(27,38,50,.1);border-radius:var(--radius);padding:24px 26px}
.project-quote blockquote{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.55}
.project-quote blockquote p+p{margin-top:10px}
.client-row{display:flex;align-items:center;gap:12px;margin-top:16px}
.avatar-soon{width:44px;height:44px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:rgba(27,38,50,.55);flex:none}
.avatar-photo{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none}
.avatar-photo img{width:100%;height:100%;object-fit:cover;display:block}
.client-row cite{font-style:normal;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--truffle)}
.client-row cite a:hover{text-decoration:underline}
@media(min-width:921px){.project-flip .project-media{order:2}}
@media(max-width:920px){.project{grid-template-columns:1fr;gap:26px;padding:44px 0}.project-media{min-height:220px}}
/* YURT TYPE TABS */
.yurt-tabs{display:inline-flex;gap:4px;background:rgba(27,38,50,.05);border:1px solid rgba(27,38,50,.12);border-radius:999px;padding:5px;margin-bottom:50px;flex-wrap:wrap}
.yurt-tab{display:inline-flex;align-items:center;gap:9px;border:none;background:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:500;color:rgba(27,38,50,.55);padding:11px 22px;border-radius:999px;transition:background .2s,color .2s}
.yurt-tab:hover{color:var(--ink)}
.yurt-tab.active{background:var(--ink);color:var(--bg)}
.soon-badge{background:#C5432F;color:#fff;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;line-height:1;transform:rotate(-3deg)}
.yurt-panel{display:none}
.yurt-panel.active{display:block}

.yurt-intro{margin-bottom:40px;max-width:760px}
.yurt-intro p{font-size:16.5px;line-height:1.65;color:rgba(27,38,50,.72)}
.yurt-intro p+p{margin-top:16px}

.yurt-hero-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:stretch;margin-bottom:56px}

.yurt-media{display:flex;flex-direction:column;min-width:0}
.yurt-media-main{position:relative;border-radius:var(--radius);overflow:hidden;flex:1;min-height:460px;background:var(--surface)}
.yurt-media-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.yurt-media-main img.active{opacity:1}
.yurt-media-main .car-arrow{opacity:1}
.media-size-note{font-size:12px;color:var(--truffle);background:rgba(255,177,98,.16);border:1px solid rgba(163,81,57,.3);border-radius:8px;padding:9px 14px;margin-top:10px}
.yurt-thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.yurt-thumbs .thumb{flex:0 0 84px;height:64px;border-radius:calc(var(--radius) - 3px);overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:none;transition:border-color .2s;opacity:.7}
.yurt-thumbs .thumb:hover{opacity:1}
.yurt-thumbs .thumb.active{border-color:var(--truffle);opacity:1}
.yurt-thumbs .thumb img{width:100%;height:100%;object-fit:cover;display:block}

.size-topbar{display:flex;align-items:center;gap:28px;margin-bottom:18px}
.diameter-stat{display:flex;flex-direction:column;gap:5px;min-width:56px;flex:none}
.size-tabs{display:flex;gap:7px;flex-wrap:wrap}
.size-tab{padding:9px 18px;border-radius:999px;border:1px solid rgba(27,38,50,.22);background:transparent;font-size:13px;font-weight:500;color:rgba(27,38,50,.6);cursor:pointer;transition:all .2s}
.size-tab:hover{border-color:var(--truffle);color:var(--ink)}
.size-tab.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.bar-stats{display:grid;grid-template-columns:100px 100px 100px 100px 1fr;gap:24px}
.media-stats{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(27,38,50,.14)}
.bar-stats>div,.diameter-stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.bar-stats span,.diameter-stat span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(27,38,50,.5);font-weight:500;white-space:nowrap}
.bar-stats b,.diameter-stat b{font-size:15px;color:var(--ink);font-weight:500}
.stat-tbc{color:rgba(27,38,50,.4)!important;font-style:italic;font-weight:400!important}
@media(max-width:640px){.bar-stats{grid-template-columns:repeat(2,1fr);row-gap:16px}}

.size-carousel{display:block}
.size-carousel .size-select{display:none}
.size-carousel .size-select.active{display:block}
.size-select{background:var(--surface);border-radius:var(--radius);padding:28px 30px 32px;min-width:0}
.product-title{font-family:var(--sans);font-weight:500;letter-spacing:-.025em;font-size:24px;color:var(--ink);margin-bottom:20px}

.size-total{background:var(--bg);border-radius:calc(var(--radius) - 4px);padding:18px 20px;margin-bottom:16px}
.size-total .label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--truffle);font-weight:500;display:block;margin-bottom:6px}
.total-amount{font-size:26px;font-weight:500;color:var(--ink)}
.total-note{font-size:12px;color:rgba(27,38,50,.75);margin-top:4px}
.total-assumption{font-size:11px;color:rgba(27,38,50,.65);margin-top:6px;font-style:italic}

.price-breakdown{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.price-item{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid rgba(27,38,50,.08);font-size:13px;color:rgba(27,38,50,.75)}
.price-item:last-child{border-bottom:none}
.inc-tick{color:var(--truffle);font-weight:600;flex:none!important;width:15px}
.price-item span{flex:1}
.price-item b{font-size:12px;font-weight:500}
.price-item-install{position:relative;border-top:1px solid rgba(27,38,50,.18);margin-top:4px;cursor:default}
.price-item-install>span{font-weight:500;color:var(--ink);display:flex;align-items:center;gap:7px}

.price-item .info-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none!important}
.info-icon{border-radius:50%;background:rgba(27,38,50,.15);color:rgba(27,38,50,.6);font-size:10.5px;font-style:italic;font-weight:600;font-family:Georgia,serif;cursor:help}
.info-icon:hover,.info-icon:focus{background:var(--truffle);color:#fff;outline:none}
.info-tip{position:absolute;bottom:calc(100% + 9px);left:0;right:0;background:var(--ink);color:var(--bg);font-family:var(--sans);font-size:12.5px;font-weight:400;line-height:1.55;letter-spacing:normal;text-transform:none;font-style:normal;padding:12px 14px;border-radius:10px;opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none;z-index:10}
.info-tip::after{content:'';position:absolute;top:100%;left:80px;border:6px solid transparent;border-top-color:var(--ink)}
.info-icon:hover+.info-tip,.info-icon:focus+.info-tip,.info-icon.open+.info-tip{opacity:1;visibility:visible}

.quote-notes-block{border-top:1px solid rgba(27,38,50,.14);margin-top:18px;padding-top:22px}
.quote-notes{list-style:none;font-size:12.5px;color:rgba(27,38,50,.65);display:flex;flex-direction:column;gap:8px}
.quote-notes b{color:var(--ink);font-weight:500}
.quote-disclaimer{font-size:11px;color:rgba(27,38,50,.45);margin-top:12px;line-height:1.5}
.quote-features{display:flex;flex-direction:column;gap:12px;margin-top:22px;padding-top:22px;border-top:1px solid rgba(27,38,50,.14)}
.quote-features>div{display:flex;gap:10px;align-items:flex-start}
.qf-dot{width:6px;height:6px;border-radius:50%;background:var(--truffle);margin-top:6px;flex:none}
.quote-features b{color:var(--ink);font-weight:500}
.quote-features div div{font-size:12.5px;line-height:1.55;color:rgba(27,38,50,.65)}
.quote-cta{width:100%;justify-content:center;margin-top:22px}

@media(max-width:920px){
  .yurt-hero-grid{grid-template-columns:1fr}
  .yurt-media-main{flex:none;min-height:0;height:340px}
  .size-select{padding:26px 24px 30px}
  .bar-stats{gap:22px}
  .size-topbar{flex-wrap:wrap;gap:16px}
}

@media(max-width:760px){
  .size-carousel{display:flex;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .size-carousel::-webkit-scrollbar{display:none}
  .size-carousel .size-select{display:block;flex:0 0 88%;scroll-snap-align:center}
}

.coming-soon-panel{border:1px solid rgba(27,38,50,.16);border-radius:var(--radius);padding:64px 40px;text-align:center;background:repeating-linear-gradient(-45deg,rgba(27,38,50,.03),rgba(27,38,50,.03) 12px,transparent 12px,transparent 24px)}
.coming-soon-panel .soon-badge{display:inline-block;margin-bottom:22px;transform:none}
.coming-soon-panel h2{font-size:26px;margin-bottom:14px}
.coming-soon-panel p{font-size:15.5px;color:rgba(27,38,50,.62);max-width:460px;margin:0 auto}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.feature-card{background:var(--surface);border-radius:var(--radius);padding:34px 28px}
.feature-card svg{width:36px;height:36px;color:var(--truffle);margin-bottom:20px}
.feature-card h3{font-size:16.5px;color:var(--ink);margin-bottom:10px}
.feature-card p{font-size:13.5px;line-height:1.6;color:rgba(27,38,50,.65)}

/* photo fades in behind the text on hover/tap */
.feature-reveal{position:relative;overflow:hidden;cursor:pointer}
.feature-reveal .feature-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.feature-reveal::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(27,38,50,.9) 0%,rgba(27,38,50,.45) 55%,rgba(27,38,50,.2) 100%);opacity:0;transition:opacity .35s ease}
.feature-reveal .feature-body{position:relative;z-index:1}
.feature-reveal .feature-body svg,.feature-reveal .feature-body h3,.feature-reveal .feature-body p{transition:color .35s ease}
.feature-reveal:hover .feature-photo,.feature-reveal.active .feature-photo,
.feature-reveal:hover::after,.feature-reveal.active::after{opacity:1}
.feature-reveal:hover .feature-body svg,.feature-reveal.active .feature-body svg{color:var(--flame)}
.feature-reveal:hover .feature-body h3,.feature-reveal.active .feature-body h3{color:#fff}
.feature-reveal:hover .feature-body p,.feature-reveal.active .feature-body p{color:rgba(255,255,255,.85)}

@media(max-width:1080px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr}}
.steps{counter-reset:step;display:grid;gap:14px;margin-top:20px}
.step{display:grid;grid-template-columns:120px 1fr;gap:34px;border:1px solid rgba(27,38,50,.16);border-radius:var(--radius);padding:34px 36px;align-items:start}
.step .n{font-size:34px;font-weight:500;letter-spacing:-.03em;color:var(--truffle)}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14.5px;color:rgba(27,38,50,.68);max-width:640px}
@media(max-width:920px){.step{grid-template-columns:1fr;gap:12px}}
.faq-list{max-width:820px}
.faq-list details{border-bottom:1px solid rgba(27,38,50,.14)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:500;font-size:16.5px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';font-size:22px;font-weight:400;color:var(--truffle);transition:transform .25s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 0 22px;font-size:15px;color:rgba(27,38,50,.7);max-width:680px}
.gal{columns:3;column-gap:14px}
.gal figure{break-inside:avoid;margin-bottom:14px;border-radius:var(--radius);overflow:hidden;position:relative}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 20px 16px;background:linear-gradient(to top,rgba(27,38,50,.75),transparent);color:var(--bg);font-size:13px;font-weight:500}
@media(max-width:920px){.gal{columns:1}}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.form-card{border:1px solid rgba(27,38,50,.16);border-radius:var(--radius);padding:40px 42px}
.form-card label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:rgba(27,38,50,.55);margin:20px 0 8px}
.form-card label:first-of-type{margin-top:0}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:13px 16px;border:1px solid rgba(27,38,50,.2);border-radius:12px;background:transparent;font-family:var(--sans);font-size:15px;color:var(--ink)}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:2px solid var(--flame);outline-offset:1px;border-color:transparent}
.form-card input[type=file]{padding:11px 14px;font-size:13.5px;cursor:pointer}
.form-card input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:none;border-radius:999px;background:var(--ink);color:var(--bg);font-family:var(--sans);font-size:12.5px;font-weight:500;cursor:pointer}
.form-card .field-hint{font-size:12px;color:rgba(27,38,50,.5);margin-top:6px}
.form-card button{margin-top:26px;border:none;cursor:pointer}
.contact-side{background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:40px 42px}
.contact-side h3{color:var(--bg);font-size:20px;margin-bottom:18px}
.contact-side p{font-size:14.5px;color:rgba(238,233,223,.7);margin-bottom:22px}
.contact-side .row{padding:14px 0;border-bottom:1px solid rgba(238,233,223,.12);font-size:14.5px;display:flex;justify-content:space-between;gap:20px}
.contact-side .row span:first-child{color:rgba(238,233,223,.5)}
.contact-side a:hover{color:var(--flame)}
@media(max-width:920px){.contact-grid{grid-template-columns:1fr}}
.prose{max-width:720px;font-size:16.5px;color:rgba(27,38,50,.78)}
.prose p{margin-bottom:22px}
.prose .big-note{font-family:var(--serif);font-size:clamp(20px,2.3vw,27px);line-height:1.42;letter-spacing:-.01em;color:var(--ink);font-weight:400;margin:34px 0}
.prose .big-note .hl{color:var(--truffle);font-weight:500}
.prose h2{font-size:24px;color:var(--ink);margin:44px 0 18px}
.prose h2:first-child{margin-top:0}
.prose ul{margin:0 0 22px 20px}
.prose li{margin-bottom:10px}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#behind-the-scenes .type-card{background:var(--bg);border:none}
#behind-the-scenes .models-head h2{color:var(--surface)}
#behind-the-scenes .models-head .label{color:var(--surface);opacity:.75}
#behind-the-scenes .models-head p{color:rgba(238,233,223,.68)}
/* phones and tablets: the cards become a swipeable rail with native momentum, like the testimonials */
@media(max-width:920px){
  .blog-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .blog-grid::-webkit-scrollbar{display:none}
  .blog-grid .type-card{scroll-snap-align:start}
}
@media(max-width:640px){.blog-grid{grid-auto-columns:82%}}
.blog-grid .type-img{height:220px}
.post-meta{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(27,38,50,.45);margin-bottom:10px}
.video-note{background:rgba(27,38,50,.045);border:1px solid rgba(27,38,50,.14);border-radius:12px;padding:20px 22px;margin:30px 0;font-size:14.5px;color:rgba(27,38,50,.7)}
.video-note b{color:var(--ink);display:block;margin-bottom:4px;font-weight:500}
.about-grid{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start}
.about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:sticky;top:20px}
.about-imgs figure{margin:0}
.about-imgs img{border-radius:var(--radius);width:100%;height:auto;display:block}
.about-imgs figcaption{margin-top:9px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--truffle)}
@media(max-width:920px){
  .about-grid{grid-template-columns:1fr}
  .about-imgs{position:static;max-width:420px}
}
.draft-note{background:rgba(255,177,98,.16);border:1px solid rgba(163,81,57,.3);border-radius:12px;padding:12px 18px;font-size:13px;color:var(--truffle);margin-top:26px;max-width:560px}

/* SCROLL BANNER */
.scroll-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:8px 26px;background:var(--bg);border-bottom:1px solid rgba(27,38,50,.1);box-shadow:0 8px 28px rgba(27,38,50,.08);transform:translateY(-100%);transition:transform .3s ease}
.scroll-nav.show{transform:translateY(0)}
.scroll-nav .logo img{height:56px;width:auto}
/* banner logo: sunburst + wordmark on desktop, sunburst only on phones */
.scroll-nav .logo{display:flex;align-items:center;gap:14px}
.scroll-nav .logo .logo-text{height:34px;width:auto}
.scroll-nav .logo .logo-mark{display:block;height:42px;width:auto;order:-1}
.scroll-nav .topnav-links{gap:26px}
@media(max-width:760px){
  .scroll-nav .topnav-links a{font-size:10.5px;letter-spacing:.05em;white-space:nowrap}
  .scroll-nav .topnav-links{gap:14px;flex-wrap:nowrap}
  .scroll-nav .logo .logo-text{display:none}
  .scroll-nav .logo .logo-mark{display:block;height:42px;width:auto}
  .scroll-nav .search-btn{display:none}
}
.menu-btn{width:44px;height:44px;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:10px;justify-self:start}
.menu-btn:hover{background:rgba(27,38,50,.06)}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}

/* SIDE DRAWER MENU */
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:90;width:min(430px,86vw);background:var(--bg);display:flex;flex-direction:column;padding:26px 34px 34px;transform:translateX(-100%);transition:transform .38s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer-veil{position:fixed;inset:0;z-index:85;background:rgba(27,38,50,.42);opacity:0;pointer-events:none;transition:opacity .38s ease}
.drawer-veil.open{opacity:1;pointer-events:auto}
.drawer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.drawer-top .logo img{height:88px;width:auto}
.drawer-close{border:none;background:none;cursor:pointer;font-size:30px;line-height:1;color:var(--ink);width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.drawer-close:hover{background:rgba(27,38,50,.06)}
.drawer-links{display:flex;flex-direction:column;align-items:stretch;margin-top:44px;padding:0;z-index:auto}
.drawer-links a{font-family:var(--serif);font-size:25px;font-weight:400;letter-spacing:-.01em;padding:15px 0;border-bottom:1px solid rgba(27,38,50,.1);transition:color .2s,padding-left .2s}
.drawer-links a:hover{color:var(--truffle);padding-left:8px}
.drawer-cta{margin-top:auto;padding-top:30px;display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:var(--truffle)}
.drawer-cta:hover{gap:14px}
body.drawer-open{overflow:hidden}
@media(max-width:560px){.drawer{padding:20px 24px 28px}.drawer-links a{font-size:20px;padding:13px 0}}

/* header CTA */
.nav-cta{justify-self:end;padding:10px 20px;font-size:13.5px;white-space:nowrap}
.scroll-nav .nav-cta{background:none;border:1px solid rgba(27,38,50,.28);color:var(--ink);padding:9px 20px;font-size:13px}
.scroll-nav .nav-cta:hover{background:none;border-color:var(--ink);transform:none}
@media(max-width:560px){
  nav{padding:16px}
  .navbar{left:8px;right:8px;padding:12px 14px}
  .nav-cta{padding:9px 13px;font-size:12.5px}
  .scroll-nav{padding:8px 14px}
  .scroll-nav .nav-cta{padding:8px 14px}
}
@media(max-width:370px){
  nav .logo img,.navbar .logo img{height:92px}
}

/* phones: tighter, even rhythm between the colour bands.
   Kept at the end of the file so it wins the cascade over every base section rule. */
@media(max-width:640px){
  .statement{padding:70px 0}
  .uses-sec{padding:70px 0}
  .testi-sec{padding:70px 0}
  .why{padding:70px 0}
  #behind-the-scenes{padding:70px 0!important}
  .models-head{margin-bottom:38px}
  .why-head{margin-bottom:40px}
}