/* RIHARA Architects & Interiors — v2 "white gallery"
   Layout concept: a quiet white gallery. Pages open with a large title, then a room image that
   expands from a framed print to full-bleed as you scroll in. Home keeps the dark room-by-room walkthrough. */
:root{
  --bg:#FFFFFF;           /* page ground */
  --bg-2:#F5F4F1;         /* warm stone wash for cards */
  --ink:#121513;          /* text */
  --ink-2:#454B46;        /* secondary text */
  --muted:#757A74;        /* captions */
  --line:rgba(18,21,19,.10);
  --sage:#28352C;         /* brand deep sage */
  --green:#0E4A36;        /* bottle green — primary colour */
  --green-2:#0A3829;      /* bottle green, pressed/hover */
  --green-tint:#EEF4F0;   /* white with a breath of green, for section washes */
  --brass:#A9854E;        /* brand brass, decorative */
  --brass-text:#7B5E31;   /* brass for small text on white */
  --stage:#0F1311;        /* walkthrough stage */
  --on-dark:#F4F2EE;
  --on-dark-2:rgba(244,242,238,.72);

  --f-sans:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-serif:'Instrument Serif','Cormorant Garamond',Georgia,'Times New Roman',serif;

  --gut:clamp(16px,4vw,64px);
  --r:20px;--r-sm:12px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.76,0,.2,1);
  color-scheme:light;
}
@property --p{syntax:'<number>';inherits:true;initial-value:0}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .5s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .8s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-3vh) scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:translateY(6vh)}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
body{margin:0;background:var(--bg);color:var(--ink);font:350 16.5px/1.6 var(--f-sans);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:300;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
::selection{background:var(--sage);color:var(--on-dark)}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px}
.skip:focus{left:8px}
.wrap{max-width:1400px;margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(90px,12vw,170px)}
.sec.sm{padding-block:clamp(60px,8vw,110px)}
.wash{background:var(--green-tint)}
section{scroll-margin-top:80px}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .72rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.h1{font:250 clamp(3.4rem,11vw,11.5rem)/.9 var(--f-sans);letter-spacing:-.055em}
.h2{font:300 clamp(2.4rem,5.6vw,5.4rem)/.98 var(--f-sans);letter-spacing:-.045em}
.h3{font:300 clamp(1.8rem,3.2vw,2.9rem)/1.05 var(--f-sans);letter-spacing:-.035em}
.h1 em,.h2 em,.h3 em,.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:var(--ink-2);max-width:36em}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(48px,6vw,90px)}
.head .eyebrow{margin-bottom:26px}
@media (max-width:860px){.head{grid-template-columns:1fr}}

/* buttons */
.btn{--bh:52px;position:relative;display:inline-flex;align-items:center;gap:14px;height:var(--bh);padding:0 8px 0 24px;border-radius:99px;border:0;background:var(--green);color:#fff;
  font:500 .8rem/1 var(--f-sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;isolation:isolate;overflow:hidden;transition:background .4s var(--ease),color .4s,transform .5s var(--ease)}
.btn .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:transform .5s var(--ease),background .4s}
.btn .ic svg{width:14px;height:14px}
.btn:hover{background:var(--green-2)}
.btn:hover .ic{transform:rotate(-45deg);background:var(--brass)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.line .ic{background:var(--bg-2)}
.btn.line:hover{background:var(--green);color:#fff}
.btn.line:hover .ic{background:var(--brass)}
.btn.light{background:#fff;color:var(--ink)}
.btn.light .ic{background:var(--bg-2)}
.btn.light:hover{background:var(--brass);color:var(--ink)}
.btn.light:hover .ic{background:rgba(255,255,255,.4)}
.btn.glass{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.btn.glass:hover{background:#fff;color:var(--ink)}
.btn.sm{--bh:42px;padding-left:18px}
.btn.sm .ic{width:28px;height:28px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:500 .82rem/1 var(--f-sans);padding-bottom:5px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}

/* progress */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:90;background:var(--green);transform-origin:left;transform:scaleX(var(--sp,0));pointer-events:none}
@supports (animation-timeline:scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root)}@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}}


/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:80;view-transition-name:nav;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gut) 16px;color:var(--ink);transition:background .5s,color .5s,padding .5s var(--ease),transform .6s var(--ease),box-shadow .5s}
.nav.solid{background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 1px 0 var(--line);padding-block:calc(env(safe-area-inset-top,0px) + 10px) 10px}
.nav.dark{color:var(--on-dark)}
.nav.hide{transform:translateY(-110%)}
.mark{display:block;justify-self:start;width:clamp(96px,8.4vw,122px);aspect-ratio:810/220;background:currentColor;
  -webkit-mask:url(../assets/logo/rihara-wordmark.svg) center/contain no-repeat;mask:url(../assets/logo/rihara-wordmark.svg) center/contain no-repeat}
.mark.full{width:min(250px,60vw);aspect-ratio:860/319;-webkit-mask-image:url(../assets/logo/rihara-logo.svg);mask-image:url(../assets/logo/rihara-logo.svg)}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:5px;border-radius:99px;background:rgba(18,21,19,.04);box-shadow:inset 0 0 0 1px var(--line)}
.nav.dark:not(.solid) ul{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav ul a{display:block;text-decoration:none;font:450 .8rem/1 var(--f-sans);padding:10px 16px;border-radius:99px;transition:background .35s,color .35s}
.nav ul a:hover{background:rgba(18,21,19,.06)}
.nav.dark:not(.solid) ul a:hover{background:rgba(255,255,255,.12)}
.nav ul a[aria-current="page"]{background:var(--green);color:#fff}
.nav.dark:not(.solid) ul a[aria-current="page"]{background:#fff;color:var(--ink)}
.nav-r{justify-self:end;display:flex;align-items:center;gap:16px}
.nav-r .tel{font:450 .8rem/1 var(--f-sans);text-decoration:none;white-space:nowrap;opacity:.8}
.nav.dark:not(.solid) .btn{background:#fff;color:var(--ink)}
.nav.dark:not(.solid) .btn .ic{background:var(--bg-2)}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--green);color:#fff;cursor:pointer;place-items:center}
.nav.dark:not(.solid) .menu-btn{background:#fff;color:var(--ink)}
.menu-btn i{display:block;width:16px;height:1.5px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
@media (max-width:1080px){.nav{grid-template-columns:1fr auto}.nav ul{display:none}.nav-r .tel{display:none}.menu-btn{display:grid}}
@media (max-width:520px){.nav-r .btn{display:none}}

.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:calc(env(safe-area-inset-top,0px) + 90px) var(--gut) 40px;background:var(--bg);color:var(--ink);
  display:none;flex-direction:column;justify-content:space-between;overflow:auto}
.menu:popover-open,.menu.open{display:flex}
.menu:popover-open{animation:menuIn .7s var(--ease-io) both}
@keyframes menuIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.menu nav{display:grid;gap:4px}
.menu nav a{font:250 clamp(2.6rem,11vw,4.6rem)/1.08 var(--f-sans);letter-spacing:-.05em;text-decoration:none;display:flex;align-items:baseline;gap:14px}
.menu nav a[aria-current="page"]{font-family:var(--f-serif);font-style:italic;letter-spacing:-.01em}
.menu .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:var(--gut);width:46px;height:46px;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink);font-size:1.1rem;cursor:pointer}
.menu .meta{display:grid;gap:6px;color:var(--ink-2);font-size:.95rem;margin-top:40px}
.menu .meta a{text-decoration:none}

/* ---------- reveal system ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal="fade"]{transform:none}
html.js [data-reveal="img"]{opacity:1;transform:none;clip-path:inset(12% 12% 12% 12% round var(--r));transition:clip-path 1.4s var(--ease-io);transition-delay:calc(var(--d,0) * 100ms)}
html.js [data-reveal="img"]>img{transform:scale(1.25);transition:transform 1.8s var(--ease);transition-delay:calc(var(--d,0) * 100ms)}
html.js [data-reveal="img"].in{clip-path:inset(0 0 0 0 round var(--r))}
html.js [data-reveal="img"].in>img{transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block}
html.js [data-split] .w>span{transform:translateY(110%) rotate(4deg);transform-origin:left bottom;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 40ms + var(--d,0) * 80ms)}
html.js [data-split].in .w>span{transform:none}
/* word-by-word fill (driven by --p) */
.fill .wd{opacity:clamp(.13,calc(var(--p) * var(--n) * 1.15 - var(--i)),1)}

/* scroll-linked progress (--p). Modern browsers: native scroll-driven animations. Others: JS sets --p. */
@keyframes pp{from{--p:0}to{--p:1}}
@supports (animation-timeline:view()){
  [data-p]{animation:pp linear both;animation-timeline:view()}
  [data-p="cover"]{animation-range:cover 0% cover 100%}
  [data-p="contain"]{animation-range:contain 0% contain 100%}
  [data-p="read"]{animation-range:cover 12% cover 52%}
  [data-p="line"]{animation-range:entry 60% exit 40%}
}

/* ---------- HOME: film walkthrough (scroll-scrubbed frame sequence) ---------- */
.film{position:relative;height:700vh;background:var(--bg)}
.film-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.film-head{position:absolute;left:0;right:0;top:0;padding-top:calc(env(safe-area-inset-top,0px) + clamp(104px,13vh,150px));z-index:2;will-change:transform,opacity}
.hero-t{font:250 clamp(2.9rem,7.2vw,7.6rem)/.92 var(--f-sans);letter-spacing:-.055em;margin:22px 0 0;max-width:12em}
.hero-t em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.film-sub{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-top:clamp(18px,2.4vw,30px)}
.film-sub .lede{max-width:30em}
.film-frame{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--bg-2);clip-path:inset(var(--ft,60vh) var(--fs,4vw) var(--fb,24px) var(--fs,4vw) round var(--fr,20px))}
.film-frame img.film-poster,.film-frame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-frame canvas{opacity:0;transition:opacity .4s}
.film-frame canvas.ready{opacity:1}
.film-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(15,19,17,.62) 0%,rgba(15,19,17,0) 38%),linear-gradient(180deg,rgba(15,19,17,.5) 0%,rgba(15,19,17,.18) 12%,rgba(15,19,17,0) 26%);opacity:var(--fe,0)}
.film-cap{position:absolute;left:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(70px,10vh,104px));color:#fff;z-index:3;opacity:var(--co,0);max-width:min(640px,80vw)}
.film-n{display:inline-flex;align-items:center;gap:10px;font:500 .72rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.film-n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass)}
.film-t{font:250 clamp(2.6rem,6.4vw,6.4rem)/.92 var(--f-sans);letter-spacing:-.05em;margin:16px 0 12px;display:block}
.film-t em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.film-d{font:400 1rem/1.5 var(--f-sans);color:rgba(255,255,255,.82)}
.film-cap .swap{display:block;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.film-cap.out .swap{opacity:0;transform:translateY(14px)}
.film-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 30px);z-index:3;display:grid;grid-template-columns:repeat(var(--segs,6),minmax(0,1fr));gap:8px;opacity:var(--co,0)}
.film-bar span{position:relative;display:block;padding-top:12px;font:500 .64rem/1.2 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-bar span::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(255,255,255,.28)}
.film-bar span::after{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px;background:#fff;width:calc(var(--f,0) * 100%)}
.film-bar span.on{color:#fff}
.film-hint{position:absolute;right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(70px,10vh,104px));z-index:3;display:flex;align-items:center;gap:12px;color:#fff;font:500 .66rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;opacity:calc(var(--co,0) * (1 - var(--fp,0) * 6))}
.film-hint i{width:22px;height:34px;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8);position:relative}
.film-hint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.film-end{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:26px;text-align:center;color:#fff;background:rgba(15,19,17,.38);opacity:var(--eo,0);pointer-events:none;padding-inline:var(--gut)}
.film-end.on{pointer-events:auto}
.film-end .h2 em{font-family:var(--f-serif);font-style:italic}
.film-end p.small{color:rgba(255,255,255,.8)}
.film-credit{position:absolute;right:var(--gut);top:calc(env(safe-area-inset-top,0px) + 86px);z-index:3;font:450 .62rem/1 var(--f-sans);letter-spacing:.08em;color:rgba(255,255,255,.55);opacity:var(--co,0)}
@media (max-width:760px){
  .film{height:560vh}
  .film-bar span{font-size:0;padding-top:0}
  .film-hint span{display:none}
  .film-sub .btns{width:100%}
}

/* ---------- INNER PAGE HEAD + expanding image ---------- */
.phead{padding:calc(env(safe-area-inset-top,0px) + clamp(130px,16vw,200px)) 0 clamp(40px,5vw,70px)}
.crumb{display:flex;gap:8px;align-items:center;font:450 .8rem/1 var(--f-sans);color:var(--muted);margin-bottom:clamp(26px,3vw,40px)}
.crumb a{text-decoration:none;color:var(--ink-2)}
.crumb a:hover{color:var(--ink)}
.phead-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(30px,4vw,56px)}
.phead-row .meta{justify-self:end;text-align:right;font:450 .8rem/1.7 var(--f-sans);color:var(--muted)}
.phead-row .meta b{display:block;font:italic 400 1.35rem/1.2 var(--f-serif);color:var(--ink)}
@media (max-width:760px){.phead-row{grid-template-columns:1fr}.phead-row .meta{justify-self:start;text-align:left}}
.expand{position:relative;height:190vh}
.expand .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.expand .frame{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(calc((1 - var(--p)) * 9vh) calc((1 - var(--p)) * max(var(--gut),10vw)) calc((1 - var(--p)) * 9vh) round calc((1 - var(--p)) * var(--r)))}
.expand .frame img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.2 - var(--p) * .2))}
.expand .tag{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,4vw,48px);display:flex;justify-content:space-between;align-items:end;gap:20px;color:#fff;
  opacity:clamp(0,calc((var(--p) - .7) * 4),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .7) * 4),1)) * 20px))}
.expand .tag b{font:italic 400 clamp(1.6rem,3vw,2.6rem)/1 var(--f-serif)}
.expand .tag span{font:500 .72rem/1.4 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.expand .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,19,17,.5),rgba(15,19,17,0) 40%);opacity:var(--p)}

/* ---------- intro / word fill ---------- */
.statement{font:300 clamp(1.9rem,4.1vw,3.9rem)/1.12 var(--f-sans);letter-spacing:-.035em;max-width:22em}
.statement em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.intro-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,60px);margin-top:clamp(50px,6vw,90px);max-width:900px;margin-left:auto;color:var(--ink-2)}
@media (max-width:700px){.intro-foot{grid-template-columns:1fr}}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.tile{background:var(--bg-2);border-radius:var(--r);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:240px;position:relative;overflow:hidden}
.tile .k{font:500 .7rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tile .num{font:200 clamp(3.6rem,7vw,6.6rem)/.85 var(--f-sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.tile .num sup{font:italic 400 .42em/1 var(--f-serif);color:var(--brass-text);vertical-align:.95em;margin-left:4px;letter-spacing:0}
.tile.dark{background:var(--green);color:var(--on-dark)}
.tile.dark .k{color:var(--on-dark-2)}
.tile.dark .num sup{color:var(--brass)}
.tile.img{padding:0;min-height:320px}
.tile.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile.img:hover img{transform:scale(1.05)}
.tile.img .over{position:relative;margin-top:auto;padding:clamp(22px,2.6vw,36px);color:#fff;background:linear-gradient(0deg,rgba(15,19,17,.72),rgba(15,19,17,0));display:grid;gap:8px}
.tile.img .over q{font:italic 400 clamp(1.5rem,2.4vw,2.2rem)/1.1 var(--f-serif);quotes:"“" "”"}
.tile.img .over span{font:500 .72rem/1.4 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.stars{display:flex;gap:3px;color:var(--brass)}
.stars svg{width:16px;height:16px}
.chipset{display:flex;flex-wrap:wrap;gap:6px}
.chipset span{font:450 .78rem/1 var(--f-sans);padding:9px 13px;border-radius:99px;background:#fff;color:var(--ink-2)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
.r2{grid-row:span 2}
@media (max-width:980px){.c3,.c4,.c5{grid-column:span 6}.c6,.c7,.c8{grid-column:span 12}.r2{grid-row:auto}}
@media (max-width:560px){.c3,.c4,.c5{grid-column:span 12}}

/* ---------- hover-preview list (services) ---------- */
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.plist li{border-bottom:1px solid var(--line)}
.plist a{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:20px;padding:clamp(18px,2.2vw,30px) 4px;text-decoration:none;transition:padding .6s var(--ease),color .4s}
.plist .n{font:450 .8rem/1 var(--f-sans);color:var(--muted);font-variant-numeric:tabular-nums}
.plist .t{font:300 clamp(1.6rem,3.4vw,3.1rem)/1.05 var(--f-sans);letter-spacing:-.04em}
.plist .ar{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:.5s var(--ease)}
.plist .ar svg{width:14px;height:14px}
.plist .th{display:none}
.plist a:hover{padding-left:20px}
.plist a:hover .t{font-family:var(--f-serif);font-style:italic;letter-spacing:-.01em}
.plist a:hover .ar{background:var(--ink);color:#fff;box-shadow:none;transform:rotate(-45deg)}
.preview{position:fixed;left:0;top:0;z-index:70;width:clamp(220px,20vw,320px);aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .35s,transform .5s var(--ease);box-shadow:0 30px 60px -20px rgba(18,21,19,.35)}
.preview.on{opacity:1;transform:scale(1)}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.preview img.on{opacity:1}
@media (pointer:coarse),(max-width:760px){
  .preview{display:none}
  .plist a{grid-template-columns:64px minmax(0,1fr) auto;gap:16px}
  .plist .n{display:none}
  .plist .th{display:block;width:64px;height:64px;border-radius:10px;overflow:hidden}
  .plist .th img{width:100%;height:100%;object-fit:cover}
}

/* ---------- horizontal gallery ---------- */
.hs{position:relative}
.hs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4vh,48px)}
.hs-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.hs-track{display:flex;gap:clamp(14px,1.6vw,24px);padding-inline:var(--gut);width:max-content;transform:translate3d(calc(var(--p) * var(--dist,0px) * -1),0,0);will-change:transform}
.hs-item{flex:none;text-decoration:none;display:grid;gap:14px}
.hs-item .ph{height:min(56vh,560px);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.hs-item.l .ph{aspect-ratio:4/3}
.hs-item.p .ph{aspect-ratio:3/4}
.hs-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.hs-item:hover img{transform:scale(1.05)}
.hs-item .meta{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding-inline:4px}
.hs-item .meta b{font:400 1.05rem/1.2 var(--f-sans);letter-spacing:-.01em}
.hs-item .meta span{font:450 .75rem/1 var(--f-sans);color:var(--muted);white-space:nowrap}
.hs-end{flex:none;width:min(70vw,360px);height:min(56vh,560px);border-radius:var(--r);background:var(--green);color:#fff;display:grid;place-content:center;gap:16px;text-align:center;text-decoration:none;transition:background .5s}
.hs-end:hover{background:var(--green-2)}
.hs-end b{font:200 clamp(4rem,7vw,6rem)/.9 var(--f-sans);letter-spacing:-.06em}
.hs-end span{font:450 .85rem/1.6 var(--f-sans);color:var(--on-dark-2)}
.hs-bar{height:2px;border-radius:2px;background:var(--line);margin-inline:var(--gut);overflow:hidden}
.hs-bar i{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(var(--p))}
.hs.static{--p:0}
.hs.static .hs-pin{position:relative;height:auto;padding-block:clamp(80px,10vw,120px)}
.hs.static .hs-track{transform:none;overflow-x:auto;width:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.hs.static .hs-track::-webkit-scrollbar{display:none}
.hs.static .hs-item,.hs.static .hs-end{scroll-snap-align:start}
.hs.static .hs-item .ph,.hs.static .hs-end{height:min(50vh,400px)}
.hs.static .hs-bar{display:none}

/* ---------- process (sticky) ---------- */
.proc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,110px);align-items:start}
.proc-l{position:sticky;top:120px}
.proc ol{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:clamp(40px,6vw,80px)}
.proc ol::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.proc ol::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--green);transform-origin:top;transform:scaleY(var(--p))}
.proc li{position:relative;display:grid;gap:12px}
.proc li::before{content:"";position:absolute;left:-38px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--ink-2)}
.proc li b{font:450 .8rem/1 var(--f-sans);color:var(--brass-text);font-variant-numeric:tabular-nums}
.proc li h3{font:300 clamp(1.7rem,2.8vw,2.5rem)/1.05 var(--f-sans);letter-spacing:-.035em}
.proc li p{color:var(--ink-2);max-width:30em}
.wash .proc li::before{background:var(--green-tint)}
@media (max-width:860px){.proc{grid-template-columns:1fr}.proc-l{position:static}}

/* ---------- stories ---------- */
.stories{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.story{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.story video{width:100%;aspect-ratio:4/5;object-fit:cover}
.story p{position:absolute;left:0;right:0;top:0;padding:20px 22px;color:#fff;font:500 .7rem/1.4 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(180deg,rgba(15,19,17,.6),rgba(15,19,17,0));pointer-events:none}
.story p b{display:block;font:italic 400 1.5rem/1.2 var(--f-serif);letter-spacing:0;text-transform:none}
@media (max-width:900px){.stories{grid-template-columns:1fr 1fr}.stories .tile{grid-column:1/-1}}
@media (max-width:520px){.stories{grid-template-columns:1fr}}

/* ---------- about ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,6vw,110px);align-items:center}
.split.top{align-items:start}
.photo{border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.tall{aspect-ratio:4/5}
.photo.wide{aspect-ratio:4/3}
.par{overflow:hidden;position:relative}
.par>img{height:118%!important;transform:translate3d(0,calc((var(--p) - 1) * 15%),0)}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.founder{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(30px,6vw,110px);align-items:center}
.founder blockquote{margin:0 0 30px;font:italic 400 clamp(2.2rem,4.4vw,4rem)/1.02 var(--f-serif);letter-spacing:-.01em}
.founder .who{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.founder .who b{display:block;font:450 1.05rem/1.3 var(--f-sans)}
.founder .who span{font-size:.85rem;color:var(--muted)}
.founder .who::before{content:"";width:40px;height:1px;background:var(--ink)}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.creds li{font:450 .8rem/1 var(--f-sans);padding:11px 15px;border-radius:99px;background:var(--bg-2)}
@media (max-width:760px){.founder{grid-template-columns:1fr}.founder .photo{max-width:360px}}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mv .tile{min-height:360px}
.mv .tile p{font:300 clamp(1.5rem,2.6vw,2.3rem)/1.18 var(--f-sans);letter-spacing:-.03em}
@media (max-width:760px){.mv{grid-template-columns:1fr}}
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,80px);border-top:1px solid var(--line)}
.values li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.values b{font:300 clamp(1.4rem,2.4vw,2.1rem)/1.1 var(--f-sans);letter-spacing:-.03em;transition:.4s}
.values li:hover b{font-family:var(--f-serif);font-style:italic;letter-spacing:-.01em}
.values span{font-size:.85rem;color:var(--muted);text-align:right;max-width:16em}
@media (max-width:760px){.values{grid-template-columns:1fr}.values span{display:none}}
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.why>div{background:#fff;border-radius:var(--r);padding:28px 26px 30px;display:grid;gap:12px;align-content:start}
.why .ic{width:40px;height:40px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;font:450 .75rem var(--f-sans);color:var(--brass-text)}
.why h3{font:400 1.12rem/1.25 var(--f-sans);letter-spacing:-.015em}
.why p{font-size:.92rem;color:var(--ink-2)}
@media (max-width:980px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why{grid-template-columns:1fr}}

/* ---------- services page: sticky swap ---------- */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:start}
.svc-view{position:sticky;top:13vh;height:74vh;margin:0}
.svc-view .frame{position:relative;height:100%;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.svc-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity .9s var(--ease),transform 1.8s var(--ease)}
.svc-view img.on{opacity:1;transform:none}
.svc-view .ct{position:absolute;left:20px;bottom:18px;z-index:2;padding:10px 16px;border-radius:99px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:450 .8rem/1 var(--f-sans);font-variant-numeric:tabular-nums}
.svc-row{min-height:64vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:40px;opacity:.28;transition:opacity .7s var(--ease)}
.svc-row.on{opacity:1}
.svc-row .n{font:450 .8rem/1 var(--f-sans);color:var(--brass-text);font-variant-numeric:tabular-nums}
.svc-row h2{font:300 clamp(2.3rem,4.4vw,4.2rem)/1 var(--f-sans);letter-spacing:-.045em}
.svc-row p{color:var(--ink-2);max-width:30em;font-size:1.05rem}
.svc-row .ph{display:none}
@media (max-width:860px){
  .svc{grid-template-columns:1fr}.svc-view{display:none}
  .svc-row{min-height:0;opacity:1;padding-block:30px;border-top:1px solid var(--line)}
  .svc-row .ph{display:block;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;order:-1}
  .svc-row .ph img{width:100%;height:100%;object-fit:cover}
}

/* ---------- projects ---------- */
.case{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(30px,5vw,90px);align-items:center}
.case.rev{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}
.case.rev .case-text{order:2}
.case-text{display:grid;gap:22px;align-content:start}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:.88rem;border-top:1px solid var(--line);padding-top:20px}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.collage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(64px,7.5vw,118px);gap:10px}
.collage figure{margin:0;overflow:hidden;cursor:zoom-in;border-radius:var(--r-sm);background:var(--bg-2)}
.collage img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
html.js .collage figure.in:hover>img,.collage figure:hover>img{transform:scale(1.06)}
.collage .a{grid-column:1/5;grid-row:1/4}.collage .b{grid-column:5/7;grid-row:1/3}.collage .c{grid-column:5/7;grid-row:3/5}
.collage .d{grid-column:1/3;grid-row:4/6}.collage .e{grid-column:3/5;grid-row:4/6}.collage .f{grid-column:5/7;grid-row:5/6}
@media (max-width:860px){.case,.case.rev{grid-template-columns:1fr}.case.rev .case-text{order:0}}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:28px;background:var(--bg-2);margin-bottom:34px;position:relative}
.seg button{position:relative;z-index:1;border:0;background:transparent;color:var(--ink-2);padding:11px 16px;border-radius:99px;cursor:pointer;font:450 .82rem/1 var(--f-sans);transition:color .3s}
.seg button sup{font-size:.7em;color:var(--muted);margin-left:3px}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg .pill{position:absolute;z-index:0;border-radius:99px;background:#fff;box-shadow:0 1px 2px rgba(18,21,19,.08),0 6px 16px -8px rgba(18,21,19,.2);transition:all .5s var(--ease)}
.masonry{columns:3 300px;column-gap:14px;transition:opacity .35s}
.masonry.fade{opacity:0}
.masonry figure{break-inside:avoid;margin:0 0 14px;position:relative;cursor:zoom-in;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-2)}
.masonry img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.masonry figure:hover img{transform:scale(1.04)}
.masonry figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;font:450 .88rem/1.25 var(--f-sans);opacity:0;transform:translateY(10px);transition:.45s var(--ease)}
.masonry figcaption small{font-size:.72rem;color:var(--muted);white-space:nowrap}
.masonry figure:hover figcaption,.masonry figure:focus-visible figcaption{opacity:1;transform:none}
@media (hover:none){.masonry figcaption{opacity:1;transform:none}}
@media (max-width:640px){.masonry{columns:2;column-gap:8px}.masonry figure{margin-bottom:8px}.masonry figcaption{display:none}}
.insta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.insta a{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:170px;padding:24px;border-radius:var(--r);background:var(--bg-2);text-decoration:none;transition:background .4s,color .4s,transform .6s var(--ease)}
.insta a:hover{background:var(--ink);color:#fff;transform:translateY(-4px)}
.insta small{font:500 .7rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text)}
.insta a:hover small{color:var(--brass)}
.insta b{font:300 1.6rem/1.1 var(--f-sans);letter-spacing:-.03em}
.insta .row{display:flex;justify-content:space-between;align-items:end}
@media (max-width:860px){.insta{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.insta{grid-template-columns:1fr}}

/* lightbox (native dialog) */
dialog.lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:calc(env(safe-area-inset-top,0px) + 70px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 22px);border:0;background:rgba(255,255,255,.96);color:var(--ink);
  opacity:0;transition:opacity .45s,display .45s allow-discrete,overlay .45s allow-discrete}
dialog.lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;opacity:1}
@starting-style{dialog.lb[open]{opacity:0}}
dialog.lb::backdrop{background:rgba(255,255,255,.6);backdrop-filter:blur(12px)}
.lb img{max-width:100%;max-height:100%;margin:auto;object-fit:contain;min-height:0;border-radius:var(--r-sm);transition:opacity .3s,transform .6s var(--ease)}
.lb img.swap{opacity:0;transform:scale(.98)}
.lb .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px}
.lb .row p{font:400 1.05rem/1.3 var(--f-sans)}
.lb .row small{display:block;font-size:.8rem;color:var(--muted)}
.lb .ctl{display:flex;gap:8px;align-items:center}
.lb .ctl span{font:450 .8rem var(--f-sans);color:var(--muted);margin-right:8px;font-variant-numeric:tabular-nums}
.rb{width:48px;height:48px;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink);cursor:pointer;font-size:1rem;transition:background .3s,color .3s}
.rb:hover{background:var(--ink);color:#fff}
.lb .x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:var(--gut)}

/* ---------- contact ---------- */
.c-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,110px);align-items:start}
.c-info{display:grid;gap:34px}
.c-info h3{font:500 .7rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.c-info .big{font:300 clamp(1.7rem,3.2vw,2.8rem)/1.1 var(--f-sans);letter-spacing:-.04em;text-decoration:none;display:inline-block}
.c-info .big:hover{font-family:var(--f-serif);font-style:italic;letter-spacing:-.01em}
.c-info .two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.c-info a{text-decoration:none}
form.lead{display:grid;gap:30px;background:var(--bg-2);border-radius:var(--r);padding:clamp(24px,4vw,52px)}
form.lead h2{font:300 clamp(2rem,3.4vw,3rem)/1 var(--f-sans);letter-spacing:-.04em}
.fl{position:relative;display:block}
.fl input,.fl textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(18,21,19,.2);color:var(--ink);padding:26px 0 10px;font:400 1.08rem/1.4 var(--f-sans);border-radius:0;transition:border-color .3s}
.fl textarea{resize:vertical;min-height:110px}
.fl label{position:absolute;left:0;top:26px;font:400 1.02rem/1.4 var(--f-sans);color:var(--muted);pointer-events:none;transform-origin:left top;transition:transform .4s var(--ease),color .3s}
.fl input:focus,.fl textarea:focus{outline:0;border-bottom-color:var(--ink)}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label{transform:translateY(-22px) scale(.74);color:var(--ink-2)}
.fl .err{display:block;font-size:.8rem;color:#A2432C;min-height:1.1em;margin-top:6px}
.fl:has(input:user-invalid) input{border-bottom-color:#A2432C}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:560px){.grid2,.c-info .two{grid-template-columns:1fr}}
fieldset.pick{border:0;margin:0;padding:0}
fieldset.pick legend{font:450 .85rem/1 var(--f-sans);color:var(--muted);margin-bottom:14px;padding:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.pills input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.pills label{padding:12px 16px;border-radius:99px;background:#fff;cursor:pointer;font:450 .84rem/1 var(--f-sans);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:.3s}
.pills label:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.pills input:checked+label{background:var(--green);color:#fff;box-shadow:none}
.pills input:focus-visible+label{outline:2px solid var(--brass);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{font-size:.82rem;color:var(--muted)}
.fine a{color:var(--ink)}
.areas{display:flex;flex-wrap:wrap;gap:6px}
.areas span{font:450 .8rem/1 var(--f-sans);padding:10px 14px;border-radius:99px;background:var(--bg-2);color:var(--ink-2)}
.mapcard{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;background:var(--ink)}
.mapcard>img{width:100%;aspect-ratio:21/8;object-fit:cover;opacity:.7;transition:transform 1.6s var(--ease),opacity .6s}
.mapcard:hover>img{transform:scale(1.04);opacity:.8}
.mapcard .in2{position:absolute;inset:auto 0 0;padding:clamp(22px,4vw,48px);display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;background:linear-gradient(0deg,rgba(15,19,17,.7),rgba(15,19,17,0))}
.mapcard b{font:300 clamp(1.6rem,3.2vw,2.8rem)/1.05 var(--f-sans);letter-spacing:-.035em;display:block;margin-top:12px}
@media (max-width:860px){.c-grid{grid-template-columns:1fr}.mapcard>img{aspect-ratio:4/5}}

/* ---------- CTA + footer ---------- */
.cta-card{position:relative;border-radius:calc(var(--r) + 8px);overflow:hidden;color:#fff;min-height:min(78vh,720px);display:grid;align-content:end;background:var(--ink)}
.cta-card .bg{position:absolute;inset:0}
.cta-card .bg img{width:100%;height:118%;object-fit:cover}
.cta-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,19,17,.78),rgba(15,19,17,.15) 70%)}
.cta-card .in2{position:relative;z-index:1;padding:clamp(28px,5vw,72px);display:grid;gap:28px}
.cta-card h2{font:250 clamp(3rem,8.4vw,8.6rem)/.9 var(--f-sans);letter-spacing:-.055em}
.cta-card h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.cta-card p{max-width:30em;color:rgba(255,255,255,.8)}
.cta-card .row{display:flex;justify-content:space-between;align-items:end;gap:26px;flex-wrap:wrap}
.marquee{overflow:hidden;white-space:nowrap;padding-block:clamp(30px,4vw,50px);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee div{display:inline-flex;gap:36px;padding-right:36px;animation:mq 50s linear infinite;font:250 clamp(1.8rem,4vw,3.6rem)/1 var(--f-sans);letter-spacing:-.04em;color:var(--ink)}
.marquee div span:nth-child(even){font-family:var(--f-serif);font-style:italic;letter-spacing:-.01em;color:var(--muted)}
.marquee div span::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brass);margin-left:36px;vertical-align:.3em}
@keyframes mq{to{transform:translateX(-100%)}}
.marquee:hover div{animation-play-state:paused}
footer.foot{padding-block:clamp(70px,9vw,110px) calc(env(safe-area-inset-bottom,0px) + 26px);overflow:hidden;background:var(--green);color:#EAF1EC}
.foot .mark{color:#fff}
.foot .btn{background:#fff;color:var(--green)}
.foot .btn .ic{background:var(--green-tint)}
.foot .btn:hover{background:var(--green-tint)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px 30px}
.foot p{color:rgba(234,241,236,.74);max-width:26em}
.foot h4{font:500 .7rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(234,241,236,.55);margin-bottom:18px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{text-decoration:none;transition:color .3s}
.foot ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot .news{display:grid;gap:18px}
.wordmark{display:block;width:100%;aspect-ratio:810/220;margin:clamp(60px,8vw,110px) 0 0;background:linear-gradient(180deg,rgba(255,255,255,.95) 30%,rgba(255,255,255,.08));
  -webkit-mask:url(../assets/logo/rihara-wordmark.svg) center/contain no-repeat;mask:url(../assets/logo/rihara-wordmark.svg) center/contain no-repeat}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:22px;padding-top:22px;border-top:1px solid rgba(234,241,236,.16);font-size:.82rem;color:rgba(234,241,236,.62)}
.foot-bot a{text-decoration:none}
.foot-bot a:hover{color:#fff}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}}
@media (max-width:340px){.foot-grid{grid-template-columns:1fr}}

.wa-float{position:fixed;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:60;width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 34px -10px rgba(18,21,19,.45);opacity:0;transform:translateY(16px) scale(.9);transition:.5s var(--ease);pointer-events:none}
.wa-float.show{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{background:var(--green-2)}
.wa-float svg{width:25px;height:25px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  [data-p]{animation:none!important;--p:1}
  .preview{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* bottle-green accents on white */
.h1 em,.h2 em,.h3 em,.hero-t em,.statement em,.founder blockquote,.menu nav a[aria-current="page"],.plist a:hover .t,.values li:hover b{color:var(--green)}
.film-end .h2 em{color:#fff}
.plist a:hover .ar{background:var(--green)}
.seg button[aria-pressed="true"]{color:var(--green)}
.stars{color:var(--green)}
.c-info .big:hover{color:var(--green)}
/* studio credit */
.credit{display:inline-flex;align-items:center;gap:8px;color:rgba(234,241,236,.62)}
.credit a{color:#fff;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:border-color .3s}
.credit a:hover{border-color:#fff}
.wa-float{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 14px 34px -10px rgba(14,74,54,.45)}