/* ==========================================================================
   Fayman Group — hero
   Desktop geometry is authored in design pixels of the 1672×941 reference
   (assets/hero_full.png): 1 design px = var(--u). --u scales the frame so it
   always fits the viewport (by width or by height, whichever is tighter);
   the photo stage covers the viewport independently, anchored left.
   ========================================================================== */

@font-face{font-family:"Source Serif 4";src:url("../assets/fonts/source-serif-4-cyrillic.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Source Serif 4";src:url("../assets/fonts/source-serif-4-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("../assets/fonts/manrope-cyrillic.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";src:url("../assets/fonts/manrope-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* palette — sampled from the reference */
  --cream:#f8f4ed;
  --ink:#191a11;
  --ink-soft:#37372f;
  --olive-ink:#1d210e;
  --text:#5a5a48;
  --muted:#686752;
  --feature:#4b4840;
  --gold:#c99446;
  --gold-icon:#9a671f;
  --divider:#d3cdc0;

  --grad-btn:linear-gradient(90deg,#b5843d 0%,#a67532 48%,#8f6220 100%);
  --grad-btn-hover:linear-gradient(90deg,#c39248 0%,#b0803a 48%,#9a6c27 100%);
  --grad-cta:linear-gradient(90deg,#a87b40 0%,#97692c 50%,#845b1c 100%);
  --grad-underline:linear-gradient(90deg,#b47e30 0%,#d39b45 45%,#edbc62 75%,#e7b158 100%);
  --grad-t1:linear-gradient(90deg,#93672a 0%,#9c753c 30%,#86714a 58%,#756a45 84%,#7b6e4b 100%);
  --grad-t2:linear-gradient(90deg,#30341b 0%,#36381e 14%,#4f5036 31%,#77755a 49%,#4d4e34 62%,#33351d 80%,#33361c 100%);
  --grad-t3:linear-gradient(90deg,#54553a 0%,#626148 30%,#605f47 55%,#56563d 78%,#4d4e33 100%);

  --serif:"Source Serif 4","Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-louvre:cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p,h1,h2,h3{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;transition:top .2s}
.skip:focus-visible{top:16px}
:focus-visible{outline:2px solid #b47e30;outline-offset:4px;border-radius:6px}

/* lenis (smooth scroll) base rules — mirrors lenis/dist/lenis.css */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ----------------------------------------------------------------- page */
.page{position:relative;container-type:inline-size}

/* ---------------------------------------------------------------- shell */
.shell{
  position:relative;
  height:max(100svh,560px);
  container-type:size;
  overflow:hidden;
  isolation:isolate;
  background:var(--cream);
}

/* --------------------------------------------------------------- stage */
.stage{
  position:absolute;z-index:0;
  left:0;
  width:max(100cqw,100cqh * 1.776833);
  aspect-ratio:1672/941;
  top:calc((100cqh - max(100cqw / 1.776833,100cqh)) / 2); /* centred without transforms (js owns transform) */
  pointer-events:none;
}
.stage__scene{position:absolute;inset:0;transform-origin:72% 46%}
/* layer boxes in % of the 1672×941 stage (bleed = 24 design px, see tools/hero_layers.py) */
.stage__photo,.stage__louvre,.stage__glow{
  position:absolute;
  left:26.3158%;top:-2.5505%;
  width:75.1196%;height:105.1010%;
}
.stage__photo img{width:100%;height:100%}
.stage__glow{mix-blend-mode:screen;opacity:0}
.stage__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.line{fill:none;stroke-linecap:round}
.line--a{stroke-width:2.3}
.line--b{stroke-width:2.6}
.spark{fill:none;stroke:#fff4d2;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.045 2;stroke-dashoffset:.045;opacity:0}
.stage__olive{
  position:absolute;
  left:-1.4354%;top:57.3858%;
  width:29.5455%;height:45.1647%;
  transform-origin:6% 96%;
}
.stage__olive img{width:100%;height:100%}

/* louvre slats (built by js/hero.js) */
.slat{
  position:absolute;inset:0;
  background:var(--src) center/100% 100% no-repeat;
  clip-path:inset(calc(var(--i) * 100% / var(--n)) 0 calc((var(--n) - var(--i) - 1) * 100% / var(--n)) 0);
  will-change:clip-path;
}

/* --------------------------------------------------------------- frame */
/* width-driven scale with a floor for small laptops, but never taller than the viewport */
.hero{--u:min(max(100cqw / 1672,.72px),100cqh / 941)}
/* the header sits outside the hero container: same scale, from .page width + hero height */
.header{--u:min(max(100cqw / 1672,.72px),max(100svh,560px) / 941)}
.hero{
  position:absolute;z-index:2;left:0;
  top:calc((100cqh - 941 * var(--u)) / 2);
  width:calc(1672 * var(--u));
  height:calc(941 * var(--u));
}

/* -------------------------------------------------------------- header */
.header{position:absolute;z-index:5;inset:0 0 auto 0;height:calc(110 * var(--u))}
.header__logo{position:absolute;display:block;left:calc(85 * var(--u));top:calc(26 * var(--u));width:calc(176 * var(--u));border-radius:50%}
.header__logo img{width:100%;height:auto}

.nav{position:absolute;left:calc(397 * var(--u));top:calc(38 * var(--u))}
.nav__list{display:flex;gap:calc(var(--nav-gap,45.4) * var(--u))}
.nav__link{
  position:relative;display:block;
  padding-bottom:calc(16 * var(--u));
  font-size:calc(var(--nav-fs,16.1) * var(--u));
  line-height:calc(24 * var(--u));
  font-weight:500;letter-spacing:-.005em;word-spacing:.18em;
  color:var(--ink-soft);
  transition:color .3s var(--ease-out);
}
.nav__link[aria-current="page"]{color:var(--ink);font-weight:600}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(3 * var(--u));min-height:2px;border-radius:2px;
  background:var(--grad-underline);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--ease-out);
}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left center}

.header .header__cta{
  position:absolute;right:calc(63 * var(--u));top:calc(27 * var(--u));
  width:calc(190 * var(--u));height:calc(53 * var(--u));
  font-size:calc(20 * var(--u));
  --arrow:calc(21 * var(--u));
  gap:calc(19 * var(--u));
  padding-left:calc(5 * var(--u));
  background:var(--grad-cta);
}

.burger{display:none}

/* ------------------------------------------------------------- buttons */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  border-radius:calc(15 * var(--u));
  transition:box-shadow .4s var(--ease-out),color .3s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn__label,.btn__arrow{position:relative;z-index:1}
.btn__arrow{width:var(--arrow);height:auto;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(calc(5 * var(--u)))}

.btn--gold{
  color:#fffdf8;
  background:var(--grad-btn);
  border:1px solid #d8af6b;
  box-shadow:inset 0 1px 0 rgba(255,232,190,.42),inset 0 -1px 0 rgba(255,226,180,.35),0 8px 16px -14px rgba(110,72,18,.4);
}
/* sheen sweep */
.btn--gold::before{
  content:"";position:absolute;z-index:0;inset:-1px;
  background:linear-gradient(105deg,transparent 30%,rgba(255,240,205,.38) 48%,rgba(255,240,205,.08) 56%,transparent 70%);
  transform:translateX(-110%);
  transition:transform .9s var(--ease-out);
}
.btn--gold:hover::before{transform:translateX(110%)}
.btn--gold:hover{box-shadow:inset 0 1px 0 rgba(255,232,190,.5),inset 0 -1px 0 rgba(255,226,180,.35),0 18px 30px -16px rgba(110,72,18,.7)}
.btn--pill{border-radius:999px;border-width:1.5px;border-color:#d7ac68}

.btn--outline{
  color:var(--olive-ink);
  background:rgba(255,255,255,.14);
  border:1.75px solid #d3aa6c;
}
.btn--outline::before{
  content:"";position:absolute;z-index:0;inset:0;
  background:linear-gradient(90deg,rgba(214,176,119,.16),rgba(214,176,119,.26));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease-out);
}
.btn--outline:hover::before{transform:scaleX(1)}

.btn--lg{height:calc(68 * var(--u));font-size:calc(21 * var(--u));--arrow:calc(22 * var(--u));gap:calc(14 * var(--u))}

/* -------------------------------------------------------------- content */
.hero__content{position:absolute;left:calc(85 * var(--u));top:0;padding-top:calc(var(--y-eyebrow,241.5) * var(--u))}

.eyebrow{
  display:flex;align-items:center;
  font-size:max(10.5px,calc(14.6 * var(--u)));line-height:1;
  font-weight:500;letter-spacing:.285em;word-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow__item{display:block;margin-right:-.285em}
.eyebrow__dot{
  width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:50%;
  margin:0 calc(17 * var(--u));flex:none;
  background:var(--gold);
}

.title{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-top:calc(var(--y-title,37.3) * var(--u));
  font-family:var(--serif);font-optical-sizing:auto;font-weight:500;
  letter-spacing:-.006em;
  color:var(--ink);
}
.title__line{display:block;width:max-content}
.title__text{
  display:inline-block;
  padding:.1em 0 .26em;margin:-.1em 0 -.26em; /* keep ascenders/descenders inside the clipped background */
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.title__line--1{--grad:var(--grad-t1);font-size:calc(88.8 * var(--u));line-height:calc(var(--lh1,74) * var(--u));font-weight:650;letter-spacing:-.02em}
.title__line--2{--grad:var(--grad-t2);font-size:calc(88.8 * var(--u));line-height:calc(var(--lh2,76.5) * var(--u));font-weight:665;letter-spacing:.002em}
.title__line--3{--grad:var(--grad-t3);font-size:calc(70.4 * var(--u));line-height:calc(var(--lh3,76.5) * var(--u));font-weight:600;letter-spacing:-.006em}
/* one-shot light sweep over the gold line (played by js) */
.title__line--1 .title__text{position:relative}
.title__line--1 .title__text::after{
  content:attr(data-text);position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,236,190,.95) 50%,transparent 65%) var(--sheen,-120%) 0/250% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  pointer-events:none;
}

.lead{
  margin-top:calc(var(--y-lead,20) * var(--u));
  max-width:calc(640 * var(--u));
  font-size:calc(21.9 * var(--u));line-height:calc(30.6 * var(--u));
  font-weight:400;letter-spacing:-.004em;word-spacing:.025em;
  color:var(--text);
}

.actions{display:flex;gap:calc(23 * var(--u));margin-top:calc(var(--y-actions,24) * var(--u))}
.actions .btn--gold{width:calc(261 * var(--u))}
.actions .btn--outline{width:calc(225 * var(--u))}

.features{
  display:flex;align-items:center;
  margin-top:calc(var(--y-features,68) * var(--u));
  margin-left:calc(100 * var(--u));
}
.feature{display:flex;align-items:center;gap:calc(11 * var(--u))}
.feature:nth-child(1){width:calc(210 * var(--u))}
.feature:nth-child(3){width:calc(226.5 * var(--u));margin-left:calc(14.5 * var(--u))}
.feature:nth-child(5){margin-left:calc(14 * var(--u))}
.feature__icon{
  position:relative;flex:none;
  display:grid;place-items:center;
  width:calc(70 * var(--u));height:calc(70 * var(--u));border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.22),rgba(255,255,255,.06) 70%);
  box-shadow:inset 0 0 0 calc(1.6 * var(--u)) rgba(255,255,255,.92),0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(122,98,62,.09);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.feature__icon svg{width:calc(50 * var(--u));height:calc(50 * var(--u));fill:none;stroke:var(--gold-icon);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.feature__icon path{stroke-dasharray:1;stroke-dashoffset:0}
.feature:hover .feature__icon{transform:translateY(calc(-3 * var(--u)));box-shadow:inset 0 0 0 calc(1.6 * var(--u)) #fff,0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(122,98,62,.14)}
.feature:hover .feature__icon path{animation:redraw 1s var(--ease-out) both}
@keyframes redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.feature__text{
  font-size:max(12px,calc(16 * var(--u)));line-height:max(17px,calc(23 * var(--u)));
  font-weight:500;letter-spacing:-.006em;color:var(--feature);
}
.feature__divider{flex:none;width:1px;height:calc(47 * var(--u));background:var(--divider)}

/* ------------------------------------------------- motion start states
   Only with html.motion (set inline when motion is allowed); js reveals. */
.motion [data-reveal],.motion .title__line .title__text,.motion .lead{visibility:hidden}
.motion .stage__olive,.motion .stage__photo{opacity:0}
.motion .line{stroke-dasharray:1;stroke-dashoffset:1}
.title__line{padding:.12em 0 .26em;margin:-.12em 0 -.26em}

/* --------------------------------------------------------- burger menu */
.menu{
  position:fixed;z-index:20;inset:0;
  display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:110px 24px max(40px,env(safe-area-inset-bottom));
  background:var(--cream);
}
.menu[hidden]{display:none}
.menu__nav ul{display:grid;gap:6px}
.menu__nav a{
  display:block;padding:6px 0;
  font-family:var(--serif);font-size:clamp(34px,9vw,52px);line-height:1.1;font-weight:500;
  color:var(--ink);
}
.menu__nav a[aria-current="page"]{background:var(--grad-t1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.menu__close{
  position:absolute;right:16px;top:max(18px,calc(env(safe-area-inset-top) + 6px));
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(201,148,70,.45);
}
.menu__close .burger__bars i:first-child{transform:translateY(3.8px) rotate(45deg)}
.menu__close .burger__bars i:last-child{transform:translateY(-3.8px) rotate(-45deg)}
.menu__cta{align-self:flex-start;height:58px;padding:0 28px;font-size:18px;--arrow:20px;gap:14px;border-radius:14px}

/* -------------------------------------------- narrow desktop: burger nav */
@media (max-width:1199.98px){
  .nav{display:none}
  .burger{
    display:grid;place-items:center;
    position:absolute;right:calc(63 * var(--u));top:calc(27 * var(--u));
    width:max(48px,calc(53 * var(--u)));height:max(48px,calc(53 * var(--u)));
    border-radius:50%;
    background:rgba(248,244,237,.82);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(201,148,70,.45);
  }
  .header .header__cta{right:calc(63 * var(--u) + max(48px,calc(53 * var(--u))) + 12px)}
}
.burger__bars{display:grid;gap:6px;width:20px}
.burger__bars i{display:block;height:1.6px;border-radius:2px;background:var(--ink);transition:transform .5s var(--ease-out)}
.burger[aria-expanded="true"] .burger__bars i:first-child{transform:translateY(3.8px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars i:last-child{transform:translateY(-3.8px) rotate(-45deg)}

/* ===================================================================
   Stacked layout — phones, tablets in portrait, landscape phones
   =================================================================== */
@media (max-width:1023.98px),(max-aspect-ratio:6/5){
  .shell{height:auto;min-height:100svh;container-type:normal;padding-bottom:max(36px,env(safe-area-inset-bottom))}
  .stage{
    --ph:clamp(300px,min(112vw,58svh),820px);
    left:auto;right:0;top:0;
    height:var(--ph);width:auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
    mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
  }
  .stage__olive{display:none}

  .header,.hero{--u:1px}
  .header{height:auto;padding:max(12px,env(safe-area-inset-top)) 16px 0}
  .header__logo{position:relative;display:block;left:auto;top:auto;width:clamp(72px,19vw,104px)}
  .nav,.header .header__cta{display:none}
  .burger{
    display:grid;place-items:center;
    position:absolute;right:16px;top:max(18px,calc(env(safe-area-inset-top) + 6px));
    width:48px;height:48px;border-radius:50%;
    background:rgba(248,244,237,.86);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(201,148,70,.45),0 6px 18px -10px rgba(60,45,20,.35);
  }

  .hero{position:relative;top:auto;left:auto;width:auto;height:auto;padding-top:calc(clamp(300px,min(112vw,58svh),820px) - 36px)}
  .hero__content{position:static;padding:0 20px;max-width:640px;margin:0 auto}
  .hero__content{padding-top:0}

  .eyebrow{flex-wrap:wrap;row-gap:8px;font-size:11px;letter-spacing:.24em}
  .eyebrow__item{margin-right:-.24em}
  .eyebrow__dot{width:4px;height:4px;margin:0 11px}

  .title{margin-top:16px}
  .title__line{width:auto}
  .title__line--1,.title__line--2{font-size:clamp(34px,10.4vw,60px);line-height:1.04}
  .title__line--3{font-size:clamp(27px,8.3vw,48px);line-height:1.12}

  .lead{margin-top:16px;max-width:34em;font-size:clamp(15.5px,4.2vw,18px);line-height:1.55}

  .actions{margin-top:24px;gap:12px}
  .actions .btn{flex:1 1 0;width:auto;min-width:0;height:56px;border-radius:14px;font-size:16px;--arrow:18px;gap:10px}
  .actions .btn--gold{font-size:17px;font-weight:700} /* light-on-gold: keep it in large/bold territory */

  .features{margin:32px 0 0;align-items:stretch;justify-content:space-between}
  .feature,.feature:nth-child(n){width:auto;margin:0;flex:1 1 0;flex-direction:column;align-items:center;text-align:center;gap:10px}
  .feature__icon{width:58px;height:58px;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.95),0 6px 16px rgba(122,98,62,.1)}
  .feature__icon svg{width:42px;height:42px}
  .feature__text{font-size:12.5px;line-height:1.4}
  .feature__divider{align-self:center;height:56px}
}
@media (max-width:479.98px){
  /* two deliberate lines instead of a dangling bullet */
  .eyebrow__dot:nth-child(6){display:none}
  .eyebrow__item:last-child{flex-basis:100%}
}
@media (max-width:359.98px){
  .feature__text{font-size:11.5px}
  .actions{flex-direction:column}
}
@media (min-width:640px) and (max-width:1023.98px),(min-width:640px) and (max-aspect-ratio:6/5){
  .header{padding:24px 32px 0}
  .burger{right:32px;top:30px}
  .hero__content{padding:0 32px}
  .eyebrow{font-size:13px}
  .feature__text{font-size:15px}
  .feature__icon{width:66px;height:66px}
  .feature__icon svg{width:48px;height:48px}
}

/* dev aid: index.html?overlay — reference image over the page, "o" toggles */
.debug-overlay{
  position:absolute;z-index:50;left:0;top:calc((100cqh - max(100cqw / 1.776833,100cqh)) / 2);
  width:max(100cqw,100cqh * 1.776833);aspect-ratio:1672/941;max-width:none;
  opacity:.5;pointer-events:none;
}

/* reduced motion: no transitions beyond colour */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}