@charset "utf-8";
/* ==========================================================================
   LUXURY & N — Home
   Implemented from Figma  ·  file QNQE7qNau1nzrJ9Iw7dICM  ·  node 10003:2719
   Design canvas 1920px. Every size below is the Figma value expressed as
   clamp(min, <px/1920*100>vw, <figma px>) so the layout scales down fluidly
   and never exceeds the designed size on wide screens.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css');

:root{
  /* colour — sampled from Figma */
  --gold:#aa9477;
  --ink:#1a1a1a;
  --ink-2:#343434;
  --ink-3:#4a4a4a;
  --gray:#717171;
  --gray-2:#818181;
  --line:#d1d1d1;
  --white:#fff;
  --black:#000;

  --ff:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  --ff-en:'Cormorant Garamond','Times New Roman',serif;
  /* numerals + dates — v2 switched these to Libre Caslon Display */
  --ff-num:'Libre Caslon Display','Cormorant Garamond','Times New Roman',serif;

  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-door:cubic-bezier(.76,0,.24,1);

  /* 70px page gutter at 1920 */
  --gut:clamp(20px,3.6458vw,70px);
  --hd-h:clamp(64px,5.7292vw,110px);
  /* vertical rhythm between sections (~300px at 1920) */
  --sec-gap:clamp(70px,15.625vw,300px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ff);background:var(--white);color:var(--ink);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
address{font-style:normal}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- reveal primitives ---------- */
[data-rv]{--d:0ms}
[data-rv="up"]{opacity:0;transform:translateY(46px);
  transition:opacity .9s var(--ease-out) var(--d),transform .9s var(--ease-out) var(--d)}
[data-rv="fade"]{opacity:0;transition:opacity 1.1s var(--ease) var(--d)}
/* long, unhurried fade-up used by Our Portfolio and 문의리스트 */
[data-rv="slow"]{opacity:0;transform:translateY(34px);
  transition:opacity 1.7s var(--ease) var(--d),transform 1.7s var(--ease-out) var(--d)}
[data-rv].is-in{opacity:1;transform:none}

/* Masked line reveal — values taken verbatim from kium's
   `.vis .sd .txt .tit p span`: translate(0,100%) rotateX(-40deg), 1s,
   with perspective:10vw on the clipping parent. */
.mask{display:block;overflow:hidden;perspective:10vw}
.mask > span{display:block;transform:translateY(100%) rotateX(-40deg);transform-origin:top center;
  transition:transform 1s var(--ease-out) var(--d)}
.is-in .mask > span,.mask.is-in > span{transform:none}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s,background-color .4s;
  will-change:transform;mix-blend-mode:difference;
}
.cursor.is-active{opacity:1}
.cursor span{font-family:var(--ff-en);font-size:11px;letter-spacing:.14em;color:#fff;opacity:0;transition:opacity .3s}
.cursor.is-hover span{opacity:1}
@media (hover:none){.cursor{display:none}}

/* ==========================================================================
   HEADER   node 10013:4736
   ========================================================================== */
/* Always floating, fully transparent — no background, no rule, no blur.
   Only the mark colour flips, and it flips because a light section is under
   the header band, not because of a scroll distance. Sections opt in with
   data-hd="light"; home.js probes which one sits under the bar. */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--hd-h);
  display:flex;align-items:center;padding:0 var(--gut);
  background:none;border:0;box-shadow:none;
}
/* Figma 10013:4736 — logo flush to the 70px gutter, GNB absolutely centred
   in the viewport (x 610–1311, centre 960.5), burger flush right at 1850.
   Not space-between: with three unequal groups that would shift the nav
   off-centre. */
.hd__in{position:relative;width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(16px,2vw,40px)}

/* logo — two supplied PNGs, cross-faded so the mark stays legible
   against the hero photo and against the white scrolled state */
/* Figma 10013:4736 — 188×44 at (70, 33); y-centre 55 = half of the 110 bar */
.hd__logo{position:relative;display:block;
  width:clamp(112px,9.7917vw,188px);height:clamp(26px,2.2917vw,44px);flex:0 0 auto}
.hd__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s var(--ease)}
.hd__logo .on-dark{opacity:1}
.hd__logo .on-light{opacity:0}
.hd.is-light .hd__logo .on-dark,body.nav-open .hd__logo .on-dark{opacity:0}
.hd.is-light .hd__logo .on-light,body.nav-open .hd__logo .on-light{opacity:1}

.gnb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:clamp(20px,3.4375vw,66px);align-items:center;white-space:nowrap}
/* line-height:1 with no padding, so the box is exactly the glyph box and
   flex centring lands on the optical middle. The previous .4em padding plus
   the inherited 1.6 line-height left half-leading above the caps, which read
   as the menu sitting high. */
.gnb a{
  position:relative;display:block;white-space:nowrap;
  font-size:clamp(14px,1.0417vw,20px);font-weight:800;line-height:1;
  color:var(--white);transition:color .4s var(--ease);
}
.hd.is-light .gnb a,body.nav-open .gnb a{color:var(--ink)}
.gnb a::after{content:"";position:absolute;left:0;bottom:-8px;width:100%;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--ease-out)}
.gnb a:hover::after,.gnb a[aria-current]::after{transform:scaleX(1);transform-origin:left center}
.gnb a:hover,.gnb a[aria-current]{color:var(--gold)}

/* ---------- family site  ·  node 10053:2104 ----------
   Pill matches the Figma exactly (1px @50% white, r100, 11/14/11/16, 12px
   Regular + 16px chevron). The dropdown is mine — same pill language, but
   softened to a 12px radius so it reads as a panel rather than a giant
   lozenge, and it inherits the header's light/dark mode. */
.hd__right{display:flex;align-items:center;gap:clamp(12px,1.7188vw,33px)}
.fam{position:relative}
.fam__btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 14px 11px 16px;border-radius:100px;
  border:1px solid var(--hd-line,rgba(255,255,255,.5));
  font-size:12px;font-weight:400;color:var(--hd-fg,var(--white));white-space:nowrap;
  transition:border-color .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease);
}
.hd:not(.is-light) .fam__btn{border-color:rgba(255,255,255,.5);color:var(--white)}
.hd.is-light .fam__btn,body.nav-open .fam__btn{border-color:rgba(26,26,26,.28);color:var(--ink)}
.fam__btn:hover{border-color:var(--gold);color:var(--gold)}
.fam__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.fam.is-open .fam__btn svg{transform:rotate(180deg)}
.fam.is-open .fam__btn{border-color:var(--gold);color:var(--gold)}

.fam__list{
  position:absolute;top:calc(100% + 10px);right:0;min-width:196px;z-index:10;
  padding:8px;border-radius:12px;
  background:rgba(18,18,18,.92);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease-out),visibility .35s;
}
.hd.is-light .fam__list,body.nav-open .fam__list{
  background:rgba(255,255,255,.97);border-color:rgba(26,26,26,.12);
  box-shadow:0 18px 44px rgba(20,18,16,.14);
}
.fam.is-open .fam__list{opacity:1;visibility:visible;transform:none}
.fam__list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:8px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.78);white-space:nowrap;
  transition:background-color .3s,color .3s;
}
.hd.is-light .fam__list a,body.nav-open .fam__list a{color:rgba(26,26,26,.72)}
.fam__list a::after{content:"↗";font-size:11px;opacity:.45}
.fam__list a:hover{background:rgba(170,148,119,.2);color:var(--gold)}

/* hamburger — 45×3 bars, 8px apart (Figma) */
.hd__menu{display:grid;gap:clamp(5px,.4167vw,8px);width:clamp(28px,2.3438vw,45px);flex:0 0 auto;justify-items:end}
.hd__menu span{display:block;width:100%;height:3px;background:var(--white);
  transition:transform .55s var(--ease-door),background-color .45s var(--ease),width .4s var(--ease)}
.hd.is-light .hd__menu span{background:var(--ink)}
body.nav-open .hd__menu span{background:var(--ink)}
/* bars are 3px on an 8px gap → each travels half the 11px pitch.
   The negative direction must be a calc(), not clamp(-4px,…,-5.5px):
   that has min > max and collapses to a constant. */
body.nav-open .hd__menu span:nth-child(1){transform:translateY(clamp(4px,.5729vw,5.5px)) rotate(45deg)}
body.nav-open .hd__menu span:nth-child(2){transform:translateY(calc(-1 * clamp(4px,.5729vw,5.5px))) rotate(-45deg)}

/* ---------- fullscreen nav ---------- */
.navp{position:fixed;inset:0;z-index:880;visibility:hidden;pointer-events:none;
  display:flex;align-items:center;padding:var(--hd-h) var(--gut) 0}
.navp::before{content:"";position:absolute;inset:0;background:var(--white);
  transform:scaleY(0);transform-origin:top center;transition:transform .8s var(--ease-door)}
body.nav-open .navp{visibility:visible;pointer-events:auto}
body.nav-open .navp::before{transform:scaleY(1);transform-origin:bottom center}
.navp__list{position:relative;z-index:2;width:100%;max-width:1780px;margin:0 auto}
.navp__g{border-bottom:1px solid var(--line);padding:clamp(14px,1.5625vw,30px) 0}
.navp__g > strong{display:block;font-size:clamp(24px,2.6042vw,50px);font-weight:800;letter-spacing:-.03em;
  opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
body.nav-open .navp__g > strong{opacity:1;transform:none}
.navp__g:nth-child(1) > strong{transition-delay:.42s}
.navp__g:nth-child(2) > strong{transition-delay:.5s}
.navp__g:nth-child(3) > strong{transition-delay:.58s}
.navp__g:nth-child(4) > strong{transition-delay:.66s}
.navp__g:nth-child(5) > strong{transition-delay:.74s}
.navp__g > strong a{transition:color .4s}
.navp__g > strong a:hover{color:var(--gold)}
.navp__s{display:flex;flex-wrap:wrap;gap:.4em clamp(14px,1.5625vw,30px);margin-top:.7em}
.navp__s a{font-size:clamp(12px,.8333vw,16px);color:var(--gray);transition:color .35s}
.navp__s a:hover{color:var(--gold)}

/* ==========================================================================
   HERO STAGE — 4 scenes pinned, scrubbed by GSAP ScrollTrigger
   sc0 Hero      node 10003:2855   (3 rotating text slides, Swiper)
   scA Hero2     node 10003:2761   (emblem → wordmark → doors part)
   scB Hero3     node 10003:2781   (privacy · protection · promise)
   scC Hero4     node 10003:2802   (diamond aperture reveal)
   ========================================================================== */
/* Scroll is locked while hero2→hero4 plays, so the pin no longer has to be
   long enough to outlast the animation. 240vh = 100vh for hero1 + 100vh of
   pinned viewport + ~40vh of rest on hero4 before the pin releases. */
.stage{position:relative;height:240vh}
/* belt-and-braces against rubber-banding while the sequence is locked */
body.is-seqlock{overscroll-behavior:none}
.stage__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--black)}

.sc{position:absolute;inset:0;overflow:hidden}
/* opaque backdrop behind the slides, so any momentary gap in slide opacity
   resolves to black rather than exposing scA/scB underneath */
.sc0{z-index:30;background:var(--black)}
.scA{z-index:20}
.scB{z-index:10}
.scC{z-index:40}

.sc__bg{position:absolute;inset:0;overflow:hidden}
.sc__bg img{width:100%;height:100%;object-fit:cover}
/* each scene carries its own scrim strength, per its Figma node */
.sc__bg--dim3::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.sc__bg--dim::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.sc__bg--dim5::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.sc__bg--dim6::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}

/* ---------- sc0 : hero + swiper ----------
   The background now lives INSIDE each slide, so Swiper's crossFade moves
   the photo and the copy together — the image changes with the text. */
.heroSw{position:absolute;inset:0;z-index:2}
/* Opaque per-slide backdrop. All three slides are stacked in the same space,
   so if one is mid-decode its transparent area would let a NEIGHBOUR's photo
   show through during the crossfade. */
.heroSw .swiper-slide{position:relative;overflow:hidden;background:var(--black);
  display:flex;align-items:center;justify-content:center;padding:0 var(--gut)}

/* Image entrance, copied from kium's `.vis .sd .bg::before`:
   scale(1.3) + blur(1.5vw) settling to scale(1) + blur(0) over 2s.
   The 1.3 scale is what keeps the blur's soft edge outside the viewport —
   blurring an unscaled image would feather its borders into the backdrop.

   Keyed on .is-live, NOT .swiper-slide-active: Swiper drops -active at the
   START of the transition, so the outgoing photo would snap back to
   scale(1.3)+blur instantly while still half-visible — a hard zoom/blur
   flash mid-crossfade. .is-live is cleared only once the fade has finished
   (see home.js), so the outgoing slide holds its settled frame and resets
   while invisible. */
.heroSw .swiper-slide .sc__bg img{transform:scale(1.3);filter:blur(1.5vw)}
.heroSw .swiper-slide.is-live .sc__bg img{
  transform:none;filter:blur(0);
  transition:transform 2s var(--ease),filter 2s var(--ease);
}

/* +10px below centre, per review */
.hero__in{position:relative;z-index:2;transform:translateY(10px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(26px,3.125vw,60px);text-align:center}
.hero__txt{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.6667vw,32px)}
/* Figma 10037:682 / 705 / 728 — all three hero scenes share one type spec:
   title Pretendard SemiBold 64 / lh 1.32
   body  Pretendard Regular  21 / lh 1.6 / +0.63px tracking */
.hero__tit{font-size:clamp(23px,3.3333vw,64px);font-weight:600;color:var(--white);
  line-height:1.32;letter-spacing:-.02em}
/* Light (300) — 21px is well clear of the size where thin weights break down */
.hero__desc{font-size:clamp(14px,1.0938vw,21px);font-weight:300;color:var(--white);
  line-height:1.6;letter-spacing:.03em}

/* Bottom-up push, re-armed on every slide change. Timings are kium's:
     .tit p span   → 1s,   delay 0.6s (line 1) / 0.8s (line 2)
     .link         → 0.8s, delay 1.3s, from translate(0,70%)
   Note the button travels 70% of its OWN height, not a pixel offset. */
.heroSw .hero__cta{opacity:0;transform:translateY(70%);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.heroSw .swiper-slide.is-live .hero__tit .mask > span,
.heroSw .swiper-slide.is-live .hero__desc .mask > span{transform:none}
.heroSw .swiper-slide.is-live .hero__tit .mask:nth-child(1) > span{transition-delay:.6s}
.heroSw .swiper-slide.is-live .hero__tit .mask:nth-child(2) > span{transition-delay:.8s}
/* body lines take the same masked push-up, continuing the cascade */
.heroSw .swiper-slide.is-live .hero__desc .mask:nth-child(1) > span{transition-delay:1s}
.heroSw .swiper-slide.is-live .hero__desc .mask:nth-child(2) > span{transition-delay:1.15s}
.heroSw .swiper-slide.is-live .hero__cta{
  opacity:1;transform:none;transition-delay:1.3s}

/* ---------- slide indicator · node 10015:5779 ----------
   Figma: x=70 (the gutter), spans y392–688 so it is vertically centred;
   uniform 10px gaps; 1px × 200px rail, track white@50%, fill solid white.
   Behaviour copied from kium's `.vis .cont`: the fill sweeps top→bottom
   over one autoplay interval and restarts on every slide. */
.scr{
  position:absolute;left:var(--gut);top:50%;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  /* kium `.vis .cont`: transition 0.8s, delay 0.6s */
  opacity:0;animation:scrIn .8s var(--ease-out) .6s forwards;
}
@keyframes scrIn{
  from{opacity:0;transform:translate(calc(-100% - var(--gut)),-50%)}
  to{opacity:1;transform:translate(0,-50%)}
}
.scr p{font-size:12px;font-weight:500;color:var(--white);letter-spacing:.05em;line-height:1}
.scr__tot{opacity:.5}
.scr__bar{width:1px;height:clamp(120px,10.4167vw,200px);background:rgba(255,255,255,.5);
  position:relative;overflow:hidden}
.scr__bar i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--white);
  transform:scaleY(0);transform-origin:top center}
/* kium: 3.9s linear against a 4000ms autoplay, so it lands just before the flip */
.scr__bar.is-run i{transform:none;transition:transform 3.9s linear}
.scr__btn{width:14px;height:14px;display:block;opacity:.7;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.scr__btn:hover{opacity:1}
.scr__up:hover{transform:translateY(-3px)}
.scr__dn:hover{transform:translateY(3px)}
.scr__btn img{width:100%;height:100%}

/* ---------- scroll-down badge · node 10015:5810 ----------
   Figma: 137.56 box inset 56.4px from right and bottom, ring text on a
   110px circle. kium rotates the ring 6s linear and leaves the arrow
   upright — same here. */
.sdown{
  position:absolute;z-index:6;
  right:clamp(20px,2.9375vw,56.4px);bottom:clamp(20px,2.9375vw,56.4px);
  width:clamp(84px,7.1648vw,137.56px);height:clamp(84px,7.1648vw,137.56px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;animation:sdIn 1s var(--ease-out) 1.5s forwards;
}
@keyframes sdIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.sdown__ring{position:absolute;inset:0;width:100%;height:100%;
  animation:sdSpin 6s linear infinite}
@keyframes sdSpin{to{transform:rotate(360deg)}}
.sdown__ring text{font-family:var(--ff-en);font-size:12.5px;font-weight:500;
  letter-spacing:.12em;fill:var(--white)}
.sdown__arw{position:relative;z-index:2;width:clamp(11px,.8333vw,16px);height:auto;
  transition:transform .4s var(--ease-out)}
.sdown:hover .sdown__arw{transform:translateY(4px)}

/* ---------- scA : doors ---------- */
.doors{position:absolute;inset:0;z-index:2}
.door{position:absolute;top:0;height:100%;width:50%;overflow:hidden;will-change:transform}
.door--l{left:0}
.door--r{right:0}
.door i{position:absolute;top:0;height:100%;width:100vw;display:block}
.door--l i{left:0}
.door--r i{right:0}
.door i img{width:100%;height:100%;object-fit:cover}
.door i::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
/* Each leaf is 50% wide holding a 100vw image. On fractional viewport widths
   50% + 50% can round to a sub-pixel gap that shows the black stage behind
   as a seam. Widening the right leaf by 1px makes its left edge sit at
   50% - 1px, so the leaves overlap instead of meeting. Its image stays
   right-aligned to the viewport, so the halves remain in register. */
.door--r{width:calc(50% + 1px)}

/* logo lockup — Figma: emblem 90 @x769, gap 18, logo_text 274 @x877.
   Group spans 769–1151 → 382 wide, centred on 960. */
.lockup{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  display:flex;align-items:center;white-space:nowrap}
.lockup__em{flex:0 0 auto;width:clamp(48px,4.6875vw,90px);height:clamp(48px,4.6875vw,90px);
  margin-right:clamp(10px,.9375vw,18px);will-change:transform}
.lockup__em img{width:100%;height:100%;object-fit:contain}
.lockup__wd{flex:0 0 auto;width:clamp(146px,14.2708vw,274px);will-change:transform}
.lockup__wd img{width:100%;height:auto}

/* ---------- scB : privacy · protection · promise ---------- */
.p3{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:100%;padding:0 var(--gut);display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.5104vw,29px)}
.p3__l{font-family:var(--ff-en);font-weight:500;font-size:clamp(30px,4.1667vw,80px);
  line-height:1.15;letter-spacing:clamp(3px,.5208vw,10px);text-transform:uppercase;
  color:var(--white);text-align:center}
.p3__d{display:block;width:2px;height:clamp(26px,3.6458vw,70px);flex:0 0 auto}
.p3__d img{width:100%;height:100%}

/* ---------- scC : diamond aperture ----------
   A true aperture: the artwork inside never moves or scales, only the
   clip-path polygon grows. (Scaling the wrapper and counter-scaling the
   child would need a 1000× inner layer at the start of the reveal.)
   The polygon is written in px by home.js, not %, so the diamond stays a
   true 90° rhombus — equal width and height — instead of being stretched
   to the viewport's aspect ratio. */
.dia{position:absolute;inset:0;z-index:2;
  clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);
  will-change:clip-path}
.dia__in{position:absolute;inset:0}
/* Figma 10014:4846 places this block 20px below true centre */
.scC__txt{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + 20px));z-index:3;
  width:100%;padding:0 var(--gut);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(26px,3.125vw,60px);text-align:center}
.scC__txt h2{font-size:clamp(22px,2.9167vw,56px);font-weight:600;color:var(--white);
  line-height:1.32;letter-spacing:-.02em}
/* hero4 body is 20px Light (hero1–3 run 21px) */
.scC__txt p{font-size:clamp(14px,1.0417vw,20px);font-weight:300;color:var(--white);
  line-height:1.6;letter-spacing:.03em;max-width:min(96vw,1500px)}

/* ghost pill — Figma 10014:4865: 292×63, bg rgba(0,0,0,.6), 1px rgba(255,255,255,.6),
   blurred gold orb (btn-ellipse.svg) sitting at the right edge.

   Hover replicates kiumcnd's `.brand_area3 .r_t .link a` exactly: the orb
   swells (5vw → 18vw, i.e. ×3.6) and its blur deepens (1.2vw → 5vw), which
   `overflow:hidden` clips into a gold flood across the pill, while the arrow
   slides 30% of its own width. */
.btn-ghost{position:relative;display:inline-flex;align-items:center;
  width:clamp(212px,15.2083vw,292px);height:clamp(48px,3.2813vw,63px);
  padding:0 clamp(14px,1.5625vw,30px) 0 clamp(16px,1.5625vw,30px);
  border:1px solid rgba(255,255,255,.6);border-radius:100px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  overflow:hidden;transition:border-color .6s var(--ease)}
.btn-ghost span{position:relative;z-index:2;flex:1;text-align:center;
  font-size:clamp(12px,.7292vw,14px);font-weight:600;color:var(--white)}
.btn-ghost .glow{
  position:absolute;right:clamp(-8px,-.26vw,-5px);top:50%;z-index:1;
  width:clamp(52px,4.1667vw,80px);height:clamp(52px,4.1667vw,80px);
  transform:translateY(-50%);pointer-events:none;
  transition:width .6s var(--ease),height .6s var(--ease),filter .6s var(--ease);
}
.btn-ghost .arw{position:relative;z-index:2;width:18px;height:10px;flex:0 0 auto;
  transition:transform .4s var(--ease-out)}
.btn-ghost:hover{border-color:rgba(255,255,255,.85)}
.btn-ghost:hover .glow{
  width:clamp(190px,15vw,288px);height:clamp(190px,15vw,288px);
  filter:blur(6px);
}
.btn-ghost:hover .arw{transform:translateX(30%)}

/* gold pill — Figma: bg #aa9477, radius 100, pad 22/30, gap 60 */
.btn-gold{
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,3.125vw,60px);
  padding:clamp(13px,1.1458vw,22px) clamp(18px,1.5625vw,30px);
  border-radius:100px;background:var(--gold);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  font-size:clamp(12px,.7292vw,14px);font-weight:600;color:var(--white);
  position:relative;overflow:hidden;transition:color .5s var(--ease);
}
.btn-gold > *{position:relative;z-index:2}
.btn-gold::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:1;
  transform:translateX(-101%);transition:transform .6s var(--ease-out)}
.btn-gold:hover::before{transform:translateX(0)}
/* kium: `a em{transition:0.4s}` and `a:hover em{transform:translate(30%,0)}` */
.btn-gold img{width:18px;height:10px;transition:transform .4s var(--ease-out)}
.btn-gold:hover img{transform:translateX(30%)}
.btn-gold:hover{box-shadow:0 5px 15px rgba(0,0,0,.3)}

/* ==========================================================================
   MARQUEE   node 10010:4152  ·  Cormorant Medium 200px / +10px tracking
   ========================================================================== */
.mq{padding:clamp(70px,8.8542vw,170px) 0 clamp(120px,19.7917vw,380px);overflow:hidden}
/* Driven by a GSAP repeat:-1 tween in home.js so it runs continuously,
   independent of scroll position and of the browser's offscreen
   CSS-animation throttling. The keyframe below is only the no-JS fallback. */
.mq__row{display:flex;width:max-content;animation:mqSlide 38s linear infinite}
.js-ready .mq__row{animation:none}
.mq__row span{
  font-family:var(--ff-en);font-weight:500;
  font-size:clamp(58px,10.4167vw,200px);line-height:1.1;
  letter-spacing:clamp(3px,.5208vw,10px);
  text-transform:uppercase;color:var(--black);white-space:nowrap;
  padding-right:clamp(30px,3.125vw,60px);
}
@keyframes mqSlide{to{transform:translateX(-50%)}}

/* ==========================================================================
   INTRO + COUNTERS   node 10013:4678
   ========================================================================== */
/* Figma 10014:4871 "count num_con" — a full-screen frame: content vertically
   centred, world map anchored to the bottom edge, 114px between the title
   block and the number row. The outer .introStage holds the pin. */
.introStage{position:relative;height:190vh}
/* Optical centring. In a flex `justify-content:center` box the block shifts
   by (padding-top − padding-bottom) / 2, so a 20px padding surplus at the
   bottom lifts it 10px above true centre.
   Review trail: 40px up → 10px down → 20px down = 10px up. */
.intro{
  position:sticky;top:0;height:100vh;height:100svh;min-height:560px;
  overflow:hidden;
  padding:var(--hd-h) var(--gut) calc(var(--hd-h) + 13px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* the three blocks sit on unequal gaps (104 / 50), so they carry their own
     margins rather than sharing one flex gap */
  gap:0;
}
/* v3: the two title lines sit on a 10px gap */
.intro__head{position:relative;z-index:2;max-width:845px;text-align:center;
  display:flex;flex-direction:column;gap:10px}
.intro__head .ko{font-size:clamp(16px,1.7708vw,34px);font-weight:600;color:var(--black);letter-spacing:-.02em}
.intro__head .en{font-family:var(--ff-en);font-weight:600;font-size:clamp(30px,3.6458vw,70px);
  line-height:1.15;color:var(--black)}

/* faint world map — Figma places the 2142.6×612.17 artwork inside a
   1920×555 clip at x -110.6 / y +113.4 */
/* map is bottom-anchored in the full-screen frame */
.intro__map{position:absolute;left:0;right:0;bottom:0;
  height:clamp(240px,28.9063vw,555px);overflow:hidden;pointer-events:none;z-index:0}
.intro__map img{position:absolute;left:-5.76%;top:20.43%;width:111.59%;height:auto;max-width:none}

/* business-line tabs · node 10051:2064 — active pill is solid gold, the rest
   are 1px #d1d1d1 outlines. 18px Medium, 20/10 padding, 16px gap. */
/* Figma con: title ends 136, tab starts 240 → 104px */
.tabs{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(8px,.8333vw,16px);margin-top:clamp(34px,5.4167vw,104px)}
.tabs button{
  padding:10px 20px;border-radius:100px;border:1px solid var(--line);
  font-size:clamp(13px,.9375vw,18px);font-weight:500;color:var(--ink);
  white-space:nowrap;transition:background-color .35s,border-color .35s,color .35s;
}
.tabs button:hover{border-color:var(--gold);color:var(--gold)}
.tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--white)}

/* Figma: tab ends 283, num starts 333 → 50px. Four 181px columns spread
   across 1300 with space-between (192px gaps), not an even 4-track grid. */
.counts{position:relative;z-index:2;width:100%;max-width:1300px;
  margin-top:clamp(20px,2.6042vw,50px);
  display:flex;justify-content:space-between;gap:clamp(12px,2vw,30px);
  transition:opacity .4s var(--ease),transform .4s var(--ease-out)}
/* brief dip while a tab swaps the four figures */
.counts.is-swap{opacity:0;transform:translateY(10px);transition-duration:.18s}
/* Figma 10014:4871 — label SemiBold 16 / number Bold 70 @ -3px / cap Regular 14.
   The 16px and 14px steps are held fixed: shrinking them with the viewport
   is what made them illegible before. Only the 70px numeral scales. */
/* 181px column; label→numeral and numeral→caption both sit on 19px */
.count{flex:0 1 clamp(120px,9.4271vw,181px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(8px,.9896vw,19px);text-align:center}

/* Entrance. .intro is position:sticky, so its children are inside the
   viewport long before the reader actually arrives — an observer on the
   elements themselves fires far too early and the reveal is over by the
   time it is on screen. home.js drives these from a ScrollTrigger on
   .introStage instead. */
.intro__head,.tabs,.counts{
  opacity:0;transform:translateY(32px);
  transition:opacity 1s var(--ease) var(--d,0ms),transform 1s var(--ease-out) var(--d,0ms);
}
.intro__head.is-in,.tabs.is-in,.counts.is-in{opacity:1;transform:none}
/* the tab swap dip has to out-specify the revealed state */
.counts.is-in.is-swap{opacity:0;transform:translateY(10px);transition-duration:.18s}
/* v2 (node 10037:662): label 20 / numeral Libre Caslon Display 80 @ -3px / cap 18 */
.count__lb{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.count__nm{font-family:var(--ff-num);font-size:clamp(38px,4.1667vw,80px);font-weight:400;
  color:var(--gold);letter-spacing:-.0375em;line-height:1;white-space:nowrap}
.count__cap{font-size:18px;font-weight:400;color:var(--ink-2);text-transform:uppercase;letter-spacing:0}

/* ==========================================================================
   OUR BUSINESS   node 10040:1161
   The gold BG, the "Our Business" heading and the giant outlined LUXURYN are
   PINNED full-screen and never move; only the two card columns travel inside
   them. When the columns run out the pin releases and the next section rises.
   ========================================================================== */
/* v4: white panel, and the section takes over the whole screen while its
   contents travel. The LUXURYN wordmark is the only thing that holds still —
   the heading rides up with the cards. The page resumes scrolling once the
   cards have run out. Section height is set from the content by home.js. */
.ob{position:relative;background:var(--white)}
.ob__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* the fixed watermark */
.ob__word{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:0;
  display:flex;justify-content:center;pointer-events:none;user-select:none;
}
.ob__word img{width:100%;max-width:1684px;height:auto;display:block;opacity:.35}

/* everything that travels */
.ob__vp{position:absolute;inset:0;z-index:1;overflow:hidden}
.ob__scroller{
  width:100%;max-width:1440px;margin:0 auto;
  padding:calc(var(--hd-h) + clamp(24px,3.6458vw,70px)) var(--gut) 0;
  will-change:transform;
}
.ob__head{
  text-align:center;font-size:clamp(22px,2.0833vw,40px);font-weight:700;
  color:var(--black);letter-spacing:-.02em;
  margin-bottom:clamp(56px,11.3542vw,218px);
}
.ob__track{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(20px,13.9583vw,268px);
}
.ob__col{display:flex;flex-direction:column;gap:clamp(56px,27.7083vw,532px)}
/* the right column starts 602px lower — the design's zigzag */
.ob__col--r{padding-top:clamp(40px,31.3542vw,602px)}

.obcard{display:flex;flex-direction:column;gap:clamp(14px,1.5625vw,30px)}
.obcard__img{position:relative;width:100%;aspect-ratio:586/472;overflow:hidden;
  background:rgba(0,0,0,.08)}
.obcard__img img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
.obcard:hover .obcard__img img{transform:scale(1.1)}
.obcard__txt{display:flex;flex-direction:column;gap:clamp(10px,1.0417vw,20px);
  max-width:clamp(240px,25.1563vw,483px)}
/* ink now that the panel behind them is white */
.obcard__en{font-family:var(--ff-en);font-weight:700;color:var(--black);
  font-size:clamp(20px,2.0833vw,40px);line-height:1.15;text-transform:uppercase}
.obcard__ko{font-weight:400;color:var(--ink);
  font-size:clamp(15px,1.5625vw,30px);line-height:1.4}

/* ==========================================================================
   SHARED section title row  (Our Portfolio / 문의리스트)
   ========================================================================== */
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rowhead__l{display:flex;align-items:center;gap:clamp(10px,1.0417vw,20px)}
.rowhead h2{font-size:clamp(22px,2.0833vw,40px);font-weight:700;color:var(--black);letter-spacing:-.03em;white-space:nowrap}
.navbtns{display:flex;gap:clamp(4px,.3125vw,6px)}
.navbtns button{
  width:clamp(36px,2.6042vw,50px);height:clamp(36px,2.6042vw,50px);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:border-color .4s,background-color .4s,opacity .3s;
}
.navbtns button img{width:80%;height:80%;transition:filter .4s}
.navbtns button:hover{border-color:var(--gold);background:var(--gold)}
.navbtns button:hover img{filter:brightness(0) invert(1)}
.navbtns button[disabled]{opacity:.3;cursor:default}
.navbtns button[disabled]:hover{border-color:var(--line);background:none}
.navbtns button[disabled]:hover img{filter:none}
.more{display:inline-flex;align-items:center;gap:clamp(6px,.5208vw,10px);
  font-size:clamp(14px,1.25vw,24px);font-weight:400;color:var(--black)}
.more img{width:clamp(20px,1.5625vw,30px);height:clamp(20px,1.5625vw,30px);
  transition:transform .5s var(--ease-out)}
.more:hover img{transform:translateX(5px)}

/* ==========================================================================
   OUR PORTFOLIO   node 10009:3157
   ========================================================================== */
.pf{padding:var(--sec-gap) 0 0}
.pf__head{padding:0 var(--gut);max-width:1920px;margin:0 auto}
.pf__rail{
  display:flex;gap:clamp(6px,.5208vw,10px);
  /* Figma: title block ends 15199, list starts 15259 → 60px */
  margin-top:clamp(22px,3.125vw,60px);
  padding-left:var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
/* trailing gutter — padding-right is dropped by some engines on a flex scroller */
.pf__rail::after{content:"";flex:0 0 var(--gut)}
.pf__rail::-webkit-scrollbar{display:none}
.pf__rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.pfc{
  position:relative;flex:0 0 clamp(260px,43.4896vw,835px);
  aspect-ratio:835/715;overflow:hidden;scroll-snap-align:start;background:#eee;
}
.pfc img.shot{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.pfc:hover img.shot{transform:scale(1.06)}
/* hover state — Figma: rgba(0,0,0,.7) dim, copy inset 80px, gap 40 */
.pfc__ov{
  position:absolute;inset:0;background:rgba(0,0,0,.7);
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:clamp(14px,2.0833vw,40px);
  padding:clamp(20px,4.1667vw,80px);
  opacity:0;transition:opacity .6s var(--ease);
}
.pfc:hover .pfc__ov,.pfc:focus-visible .pfc__ov{opacity:1}
.pfc__ov dt{font-size:clamp(17px,1.875vw,36px);font-weight:700;color:var(--white);letter-spacing:-.03em;line-height:1.3;
  transform:translateY(18px);transition:transform .7s var(--ease-out) .05s}
.pfc__ov dd{font-size:clamp(12px,.9375vw,18px);font-weight:700;color:var(--white);line-height:1.5;
  transform:translateY(18px);transition:transform .7s var(--ease-out) .12s}
.pfc:hover .pfc__ov dt,.pfc:hover .pfc__ov dd{transform:none}

/* ==========================================================================
   문의리스트   node 10013:4677
   ========================================================================== */
/* Figma 10037:49 — the left photo is gone. Title + More stack on the left,
   the 878px table sits on the right, the two justified apart. */
.inq{padding:var(--sec-gap) var(--gut) 0}
.inq__in{max-width:1780px;margin:0 auto;
  display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(24px,4vw,80px)}
.inq__head{display:flex;flex-direction:column;gap:clamp(10px,1.0417vw,20px);flex:0 0 auto}
.inq__head h2{font-size:clamp(22px,2.0833vw,40px);font-weight:700;color:var(--black);
  letter-spacing:-.03em;white-space:nowrap}

.inqtable{flex:0 1 878px;max-width:878px;width:100%;
  display:flex;flex-direction:column;gap:clamp(16px,1.7708vw,34px)}
.inqtable__top{height:2px;background:var(--ink);flex:0 0 auto}
.inqrow{display:flex;flex-direction:column;gap:clamp(16px,1.7708vw,34px)}
.inqrow__con{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.inqrow__l{display:flex;align-items:flex-start;gap:clamp(6px,.5208vw,10px);min-width:0}
.inqrow__l p{font-size:clamp(14px,1.1458vw,22px);font-weight:500;color:var(--black);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "new" is a plain gold label now, not a pill. Rows without one keep an
   invisible copy so every name still starts at the same x. */
.badge-new{flex:0 0 auto;font-size:clamp(11px,.7292vw,14px);font-weight:700;
  color:var(--gold);text-transform:uppercase;line-height:1.7}
.badge-new.is-blank{color:transparent}
.inqrow__d{flex:0 0 auto;font-family:var(--ff-num);font-weight:400;
  font-size:clamp(13px,1.1458vw,22px);color:var(--black);text-align:center}
.inqrow__line{height:1px;background:var(--line);transition:background-color .4s}
.inqrow:hover .inqrow__line{background:var(--gold)}
.inqrow:hover .inqrow__l p{color:var(--gold)}

/* ==========================================================================
   FOOTER   node 10013:4602
   ========================================================================== */
.ft{margin-top:var(--sec-gap);border-top:1px solid var(--line);padding:clamp(30px,2.1354vw,41px) var(--gut) 0}
.ft__in{max-width:1440px;margin:0 auto}
.ft__cols{display:grid;grid-template-columns:40.35% 27.08% 32.57%;gap:clamp(24px,2vw,40px) 0}
.ft__logo{width:clamp(120px,8.8542vw,170px);height:auto;margin-bottom:clamp(12px,1.0938vw,21px)}
/* Figma: tag 16px / labels 14px / body 15px, all with 3px tracking.
   Cormorant Garamond at 14px + 3px tracking is already at its legibility
   floor, so these do NOT scale below the design size — they hold a fixed
   minimum instead of shrinking with the viewport. */
.ft__tag{font-family:var(--ff-en);font-weight:700;font-size:16px;
  letter-spacing:3px;color:var(--gray)}
.ft__col h3{font-family:var(--ff-en);font-weight:700;font-size:14px;
  letter-spacing:3px;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:clamp(12px,1.0938vw,21px)}
.ft__col p{font-size:15px;font-weight:400;line-height:1.8;color:var(--gray-2)}
.ft__col p b{font-weight:400;color:var(--ink-3)}
.ft__col a{transition:color .35s}
.ft__col a:hover{color:var(--gold)}
.ft__sns{display:flex;gap:clamp(10px,.8333vw,16px);margin-top:clamp(12px,1.0938vw,21px)}
.ft__sns a{display:block;width:clamp(32px,2.0833vw,40px);height:clamp(32px,2.0833vw,40px);
  transition:transform .4s var(--ease-out),opacity .35s}
.ft__sns a:hover{transform:translateY(-3px)}
.ft__sns img{width:100%;height:100%}
/* sns-2 is a bare white 20px glyph — without the disc it is white-on-white */
.ft__sns a.is-disc{background:var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.ft__sns a.is-disc img{width:50%;height:50%}

.ft__copy{margin-top:clamp(24px,2.6042vw,50px);border-top:1px solid var(--line);
  padding:clamp(18px,1.5625vw,30px) 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ft__copy address{font-family:var(--ff-en);font-weight:700;font-size:16px;
  letter-spacing:3px;color:var(--gray);line-height:1.8}
.ft__fam{display:flex;gap:clamp(10px,1.0417vw,20px);flex-wrap:wrap}
.ft__fam a{font-size:13px;font-weight:500;color:var(--gray);transition:color .35s}
.ft__fam a:hover{color:var(--gold)}

/* ---------- to-top ---------- */
.topbtn{
  position:fixed;right:var(--gut);bottom:clamp(18px,1.8229vw,35px);z-index:700;
  width:clamp(42px,2.8646vw,55px);height:clamp(42px,2.8646vw,55px);border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s,visibility .45s,transform .45s var(--ease-out),background-color .4s,border-color .4s;
}
.topbtn.is-on{opacity:1;visibility:visible;transform:none}
.topbtn:hover{border-color:var(--gold);background:var(--gold)}
.topbtn svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.6;transition:stroke .4s}
.topbtn:hover svg{stroke:#fff}

/* ==========================================================================
   Responsive — the Figma canvas is desktop-only, so these are my rules
   ========================================================================== */
@media (max-width:1180px){
  .gnb{display:none}
  .ft__cols{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:1/-1}
}
@media (max-width:860px){
  .stage{height:220vh}
  .p3{gap:clamp(6px,2vw,14px)}

  /* the vertical rail would sit on top of the centred hero copy, so it lays
     down into a horizontal bar at the bottom — the same move kium makes.
     The fill axis flips with it. */
  .scr{
    left:50%;top:auto;bottom:clamp(76px,20vw,120px);
    flex-direction:row;align-items:center;gap:12px;
    opacity:1;transform:translateX(-50%);animation:none;
  }
  .scr__bar{width:36vw;height:1px}
  .scr__bar i{transform:scaleX(0);transform-origin:left center}
  .scr__btn{order:1}
  .sdown{right:14px;bottom:14px;width:76px;height:76px}
  .sdown__ring text{font-size:9px;letter-spacing:.08em}
  /* counters do not fit one phone screen — let the section flow normally */
  .introStage{height:auto}
  .intro{position:static;height:auto;min-height:0;
    padding:clamp(60px,14vw,110px) var(--gut);gap:clamp(30px,8vw,60px)}
  .intro__map{opacity:.5}
  .counts{flex-wrap:wrap;justify-content:center;gap:clamp(26px,5vw,40px) 16px}
  .count{flex:0 0 calc(50% - 8px)}
  /* the two blocks stack, but the heading row itself stays left/right:
     "문의리스트" on the left, More on the right */
  .inq__in{flex-direction:column;gap:clamp(20px,4vw,36px)}
  .inq__head{flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;gap:16px}
  .inqtable{flex:1 1 auto;max-width:none}
  /* unpin on phones — a 10-card pinned run is punishing on touch */
  .ob{height:auto!important}
  .ob__pin{position:relative;height:auto;overflow:visible}
  .ob__vp{position:relative;inset:auto;overflow:visible}
  .ob__scroller{transform:none!important;
    padding:clamp(70px,16vw,130px) var(--gut) clamp(50px,12vw,90px)}
  .ob__word{position:absolute;top:clamp(150px,40vw,300px);transform:none}
  .ob__word img{width:150%;max-width:none}
  .ob__track{grid-template-columns:1fr;row-gap:clamp(48px,12vw,90px)}
  .ob__col{gap:clamp(48px,12vw,90px)}
  .ob__col--r{padding-top:0}
  .ob__head{margin-bottom:clamp(40px,10vw,80px)}
  .pfc{flex:0 0 82vw}
  .ft__cols{grid-template-columns:1fr}
  .rowhead{align-items:flex-start}
}
@media (max-width:560px){
  .hero__desc br{display:none}
  /* keep name and date on one line — stacking the date under the name was
     what threw the list out. The name truncates so the date always fits. */
  .inqrow__con{flex-direction:row;align-items:flex-end;gap:10px}
  .inqrow__l{flex:1 1 auto;min-width:0;flex-wrap:nowrap}
  .inqrow__l p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inqrow__d{flex:0 0 auto;white-space:nowrap}
  .ft__copy{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important}
  .mask > span{transform:none!important}
  .sc0 .sc__bg img{transform:scale(1)!important;filter:none!important}
  .heroSw .hero__desc,.heroSw .hero__cta{opacity:1!important;transform:none!important}
  /* no scrub: the stage collapses to four plainly stacked full-height scenes */
  .stage{height:auto}
  .stage__pin{position:static;height:auto;overflow:visible}
  .sc{position:relative;inset:auto;height:100vh}
  .introStage{height:auto}
  .intro{position:static;height:auto;min-height:0;padding:clamp(60px,10vw,120px) var(--gut)}
  .dia{clip-path:none;transform:none!important}
  .dia__in{transform:none!important}
  .door{position:relative;width:100%;height:50%}
  .door--r{display:none}
  .lockup{position:absolute}
}