/* ============================================================
   FELFRI — Apple-style monochrome, alternating light/dark panels
   Accent: steel/metallic. No red.
   ============================================================ */

:root{
  --f: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1180px;
  --pad: clamp(22px, 6vw, 96px);
  --ease: cubic-bezier(.22,1,.36,1);
  --steel-grad: linear-gradient(118deg,#c9ced3,#8c9399 26%,#eef1f3 52%,#9aa1a8 78%,#c9ced3);

  /* softened warm mono */
  --white:#f5f4f1; --near-white:#faf9f6;
  --ink:#22201d; --ink-soft:#6f6c67; --hair-light:#dedcd6;
  --black:#1a1a1c; --paper:#f0efec; --paper-soft:#8c8b88; --hair-dark:rgba(255,255,255,.12);
  --accent:#d82818;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--f); font-weight:400; line-height:1.5; color:var(--ink);
  background:var(--black); -webkit-font-smoothing:antialiased; overflow-x:hidden;
  letter-spacing:-.01em;
}
img,video,picture{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:#1d1d1f; color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{ background:#c4c4c9; border-radius:99px; }

/* ---------------- PANEL THEMING ---------------- */
.panel{
  position:relative; width:100%;
  padding:clamp(80px,12vh,150px) var(--pad);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; scroll-margin-top:66px;
}
.panel--light{ background:var(--white); color:var(--ink); --fg:var(--ink); --fg-soft:var(--ink-soft); --hair:var(--hair-light); }
.panel--dark{ background:var(--black); color:var(--paper); --fg:var(--paper); --fg-soft:var(--paper-soft); --hair:var(--hair-dark); }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; }

/* ---------------- SHARED ATOMS ---------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.75em;
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-soft);
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--accent); flex:0 0 auto; }
.display{
  font-weight:600; font-size:clamp(2.1rem,6vw,4.9rem); line-height:.98; letter-spacing:-.03em;
  margin-top:.4em;
}
.display--sm{ font-size:clamp(1.9rem,4.4vw,3.5rem); }
.steel{
  background:var(--steel-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:500; font-size:.98rem; padding:.85em 1.7em; border-radius:99px;
  background:var(--fg); color:var(--panel-inv, #fff); border:1px solid transparent;
  transition:transform .4s var(--ease), opacity .3s;
}
.panel--dark .pill{ background:#fff; color:#000; }
.panel--light .pill{ background:#1d1d1f; color:#fff; }
.pill:hover{ transform:translateY(-2px); opacity:.9; }
.pill:active{ transform:scale(.97); }
.pill--dark{ background:#1d1d1f; color:#fff; }
.textlink{ font-weight:500; font-size:.98rem; color:var(--fg); opacity:.85; transition:opacity .3s; }
.textlink:hover{ opacity:1; }
.textlink span{ transition:transform .3s var(--ease); display:inline-block; color:var(--accent); }
.textlink:hover span{ transform:translateX(4px); }

.phead{ width:100%; max-width:var(--maxw); margin:0 auto clamp(40px,6vw,72px); }
.phead--center{ text-align:center; }

/* focus rings */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;
}

/* ============================================================
   NAV — adaptive over light/dark panels
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad); transition:padding .4s var(--ease), background .5s, backdrop-filter .5s, border-color .5s, color .4s;
  border-bottom:1px solid transparent;
}
.nav--on-dark{ color:#f5f5f7; }
.nav--on-light{ color:#1d1d1f; }
.nav.is-scrolled{
  padding:11px var(--pad); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
}
.nav--on-dark.is-scrolled{ background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.10); }
.nav--on-light.is-scrolled{ background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.08); }
.nav__brand{ display:flex; align-items:center; }
.nav__logo{ height:56px; width:auto; display:block; transition:height .4s var(--ease); }
.nav.is-scrolled .nav__logo{ height:46px; }
@media (max-width:560px){ .nav__logo{ height:46px; } }
.nav__links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.nav__links a{ font-size:.9rem; font-weight:450; opacity:.8; transition:opacity .3s; }
.nav__links a:hover{ opacity:1; }
.nav__cta{ opacity:1 !important; padding:.5em 1.1em; border:1px solid currentColor; border-radius:99px; font-weight:500; }
.nav__cta:hover{ background:currentColor; }
.nav--on-dark .nav__cta:hover{ color:#000; }
.nav--on-light .nav__cta:hover{ color:#fff; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:currentColor; transition:transform .35s var(--ease), opacity .3s; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:840px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,360px); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:26px; padding:0 44px;
    background:rgba(0,0,0,.94); backdrop-filter:blur(24px); color:#f5f5f7;
    transform:translateX(100%); transition:transform .55s var(--ease);
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ font-size:1.5rem; opacity:.95; }
  .nav__cta{ border-color:#f5f5f7; }
}

/* ============================================================
   1 · HERO
   ============================================================ */
.hero{ min-height:100svh; justify-content:flex-end; padding-bottom:clamp(70px,11vh,130px); }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,20,22,.5) 0%, rgba(20,20,22,.08) 34%, rgba(20,20,22,.5) 76%, var(--black) 100%); }
.hero__content{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; }
.hero__title{ font-weight:600; font-size:clamp(2.7rem,7.6vw,6.6rem); line-height:.94; letter-spacing:-.04em; margin:.3em 0 0; }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.05em; }
.hero__title .line__in{ display:block; }
.hero__sub{ margin-top:1.2em; max-width:34ch; font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:400; color:rgba(245,245,247,.82); }
.hero__links{ margin-top:2.2em; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.scrollcue{ position:absolute; z-index:2; left:50%; bottom:30px; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid rgba(245,245,247,.4); border-radius:99px; }
.scrollcue span{ position:absolute; left:50%; top:9px; width:3px; height:8px; border-radius:99px; background:var(--accent); transform:translateX(-50%); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1;transform:translate(-50%,12px)} 100%{opacity:0;transform:translate(-50%,14px)} }
@media (max-width:560px){ .scrollcue{ display:none; } }

/* ============================================================
   2 · PRODUCT / FINISH (white — product floats via multiply)
   ============================================================ */
/* pure white so the multiply-blended product cutout stays invisible even mid-animation */
.product{ background:#ffffff; }
.phead .display{ margin-top:.3em; }
.product__stage{ width:100%; max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.product__shots{ position:relative; width:min(860px,94%); aspect-ratio:5/4; }
.pshot{ position:absolute; inset:0; opacity:0; transform:scale(.98); transition:opacity .7s var(--ease), transform 1s var(--ease); }
.pshot img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.pshot.is-active{ opacity:1; transform:scale(1); }
.finishrow{ display:flex; gap:16px; margin-top:14px; }
.fdot{ width:44px; height:44px; border-radius:99px; background:none; border:0; cursor:pointer; display:grid; place-items:center; padding:0; position:relative; }
.fdot::after{ content:""; position:absolute; inset:4px; border-radius:99px; border:1.5px solid transparent; transition:border-color .3s; }
.fdot.is-active::after{ border-color:var(--accent); }
.fdot__d{ width:26px; height:26px; border-radius:99px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.fdot__d--grey{ background:linear-gradient(135deg,#4a4e54,#23262a); }
.fdot__d--nickel{ background:linear-gradient(135deg,#eef0f1,#a7adb2); }
.finishname{ margin-top:14px; font-weight:500; font-size:1.1rem; letter-spacing:-.02em; color:var(--ink); }

/* ============================================================
   3 · FEATURE (dark full-bleed macro)
   ============================================================ */
.feature{ min-height:100svh; justify-content:flex-end; padding-bottom:clamp(80px,12vh,150px); }
.feature__bg{ position:absolute; inset:0; z-index:0; }
.feature__bg img{ width:100%; height:100%; object-fit:cover; }
.feature__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,20,22,.5) 0%, transparent 30%, rgba(20,20,22,.35) 62%, var(--black) 100%); }
.feature__content{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; text-shadow:0 2px 40px rgba(0,0,0,.45); }
.hero__content{ text-shadow:0 2px 44px rgba(0,0,0,.35); }
.feature__content .eyebrow{ color:#f5f5f7; opacity:.9; }
.feature__sub{ margin-top:1em; max-width:40ch; font-size:clamp(1.05rem,1.6vw,1.35rem); color:rgba(245,245,247,.82); }

/* ============================================================
   4 · SPLIT (faucet on white)
   ============================================================ */
.split{ background:#ffffff; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center; }
.split__media{ display:grid; place-items:center; }
.split__media img{ width:100%; max-width:560px; object-fit:contain; mix-blend-mode:multiply; }
.split__sub{ margin-top:1.1em; max-width:40ch; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--ink-soft); }
.minlist{ list-style:none; margin-top:2em; }
.minlist li{ padding:16px 0; border-top:1px solid var(--hair-light); font-size:1.05rem; color:var(--ink); }
.minlist li:last-child{ border-bottom:1px solid var(--hair-light); }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } .split__media{ order:-1; } }

/* ============================================================
   5 · FILM (dark, vertical video)
   ============================================================ */
.film{ align-items:center; text-align:center; }
.film__ambient{ position:absolute; inset:-10%; z-index:0; background:url('/assets/video/poster.jpg') center/cover no-repeat; filter:blur(80px) brightness(.28) saturate(1.05); transform:scale(1.2); }
.film::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--black),rgba(20,20,22,.35) 42%,var(--black)); z-index:0; }
.film .phead, .film__wrap{ position:relative; z-index:1; }
.film__wrap{ margin:0 auto; width:min(400px,86vw); aspect-ratio:9/16; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#111; box-shadow:0 60px 140px -40px rgba(0,0,0,.9); }
.film__el{ width:100%; height:100%; object-fit:cover; }
.film__play{ position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:99px; cursor:pointer; background:rgba(255,255,255,.92); color:#000; border:0; display:grid; place-items:center; box-shadow:0 12px 44px rgba(0,0,0,.4); transition:transform .4s var(--ease), opacity .4s; }
.film__play:hover{ transform:scale(1.08); }
.film__play:active{ transform:scale(.93); }
.film__play.is-hidden{ opacity:0; pointer-events:none; transform:scale(.8); }
.film__play svg{ margin-left:3px; }

/* ============================================================
   6 · GALLERY (white)
   ============================================================ */
.gallery{ overflow:hidden; }
.gallery__rail{ overflow:hidden; margin:0 calc(-1*var(--pad)); }
.gallery__track{ display:flex; gap:clamp(14px,1.6vw,22px); width:max-content; padding:4px var(--pad) 20px; will-change:transform; }
.gallery__rail figure{ flex:0 0 auto; width:clamp(280px,44vw,600px); border-radius:18px; overflow:hidden; background:#f5f5f7; margin:0; }
.gallery__rail img{ width:100%; height:clamp(320px,54vh,640px); object-fit:cover; transition:transform 1s var(--ease); }
.gallery__rail figure:hover img{ transform:scale(1.04); }
/* no-JS / reduced-motion: allow native horizontal scroll of the track */
html:not(.gsap-ready) .gallery__rail{ overflow-x:auto; }

/* ============================================================
   7 · SPEC (dark)
   ============================================================ */
.spec__list{ width:100%; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(30px,5vw,70px); }
.spec__list > div{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:22px 0; border-top:1px solid var(--hair-dark); }
.spec__list dt{ color:var(--paper-soft); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; }
.spec__list dd{ font-weight:500; font-size:clamp(1.05rem,1.8vw,1.5rem); letter-spacing:-.02em; text-align:right; }
@media (max-width:720px){ .spec__list{ grid-template-columns:1fr; } }

/* ============================================================
   8 · CONTACT (white) + FOOTER
   ============================================================ */
.contact{ padding-bottom:0; }
.contact__grid{ width:100%; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,100px); padding-bottom:clamp(70px,9vw,120px); }
.contact__sub{ margin-top:1em; color:var(--ink-soft); max-width:36ch; }
.contact__info{ list-style:none; margin-top:2.4em; }
.contact__info li{ display:flex; flex-direction:column; gap:5px; padding:16px 0; border-top:1px solid var(--hair-light); }
.contact__info li span:first-child{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.contact__info li a, .contact__info li span:not(:first-child){ font-weight:500; font-size:clamp(1.05rem,1.8vw,1.4rem); letter-spacing:-.02em; }
.contact__form{ display:flex; flex-direction:column; gap:16px; align-self:start; }
.field{ position:relative; }
.field input,.field textarea{ width:100%; background:#f5f5f7; border:1px solid transparent; border-radius:12px; color:#1d1d1f; font-family:var(--f); font-size:1rem; padding:20px 16px 8px; transition:border-color .3s, background .3s; resize:vertical; }
.field textarea{ padding-top:24px; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); background:#fff; }
.field label{ position:absolute; left:16px; top:15px; color:var(--ink-soft); pointer-events:none; transition:transform .25s var(--ease), font-size .25s; transform-origin:left; }
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{ transform:translateY(-11px) scale(.78); color:var(--accent); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.formstatus{ font-size:.92rem; min-height:1.3em; }
.formstatus.ok{ color:#1a7f43; } .formstatus.err{ color:#c0362c; }
@media (max-width:820px){ .contact__grid{ grid-template-columns:1fr; } }

.footer{ border-top:1px solid var(--hair-light); padding:40px var(--pad); margin:0 calc(-1*var(--pad)); display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer__logo{ height:100px; width:auto; display:block; }
.footer__cr{ margin-left:auto; font-size:.82rem; color:var(--ink-soft); }
@media (max-width:560px){ .footer__cr{ margin-left:0; } }

/* ============================================================
   MOTION
   ============================================================ */
.anim{ opacity:0; transform:translateY(24px); }
.gsap-ready .anim{ opacity:0; } /* GSAP owns it */
html:not(.gsap-ready) .anim{ opacity:1; transform:none; } /* fallback visible */
@media (prefers-reduced-motion:reduce){
  .anim{ opacity:1 !important; transform:none !important; }
  .hero__bg img,.feature__bg img{ transform:none !important; }
  .scrollcue span,.film__ambient{ animation:none; }
}

/* ============================================================
   LIGHTBOX — click gallery image to enlarge
   ============================================================ */
.gallery__rail figure{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:4vw;
  background:rgba(12,12,14,.9); backdrop-filter:blur(22px) saturate(1.1); -webkit-backdrop-filter:blur(22px) saturate(1.1);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease); cursor:zoom-out;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox__img{
  max-width:94vw; max-height:90vh; object-fit:contain; border-radius:14px;
  box-shadow:0 50px 140px rgba(0,0,0,.65); transform:scale(.94); transition:transform .5s var(--ease);
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:20px; right:24px; width:48px; height:48px; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:1.7rem; line-height:1;
  display:grid; place-items:center; transition:background .3s, transform .3s var(--ease);
}
.lightbox__close:hover{ background:rgba(255,255,255,.24); transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .lightbox,.lightbox__img{ transition:none; } }