/* ===========================================================================
   SOLAR ENERGY SOLUTIONS — visual system
   Graphite + paper + gold. Diagonal cut as the signature device.
   =========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* ink */
  --ink:        #0A0D11;
  --ink-2:      #11161C;
  --ink-3:      #192028;
  --ink-4:      #232C36;

  /* paper — warm sand, never pure white */
  --paper:      #EBE2D2;
  --paper-2:    #F6EFE0;
  --paper-3:    #E0D4BB;

  /* gold */
  --gold:       #C08A22;   /* fills, rules, large type */
  --gold-ink:   #8A6413;   /* small gold type on sand (AA) */
  --gold-2:     #DDA736;   /* gold on graphite */
  --gold-3:     #F0CE7C;
  --gold-head:  #AF7E19;   /* gold display type on sand */
  --gold-tint:  #F2E6C9;   /* gold-washed surface */
  --gold-line:  rgba(192,138,34,.34);

  /* eco accent, used sparingly */
  --green:      #1E4032;

  /* text */
  --tx:         #10151B;
  --tx-2:       #4E5866;
  --tx-3:       #838C99;
  --tx-on-dark:   #F3F1ED;
  --tx-on-dark-2: #A6AEB9;

  /* lines */
  --line:       #D2C3A4;
  --line-2:     #DCCFB4;
  --line-dark:  rgba(255,255,255,.13);

  /* geometry */
  --shell:      1360px;
  --pad:        clamp(20px, 4.2vw, 56px);
  --sec:        clamp(76px, 9vw, 148px);
  --hdr:        78px;

  /* motion */
  --ease:       cubic-bezier(.22,1,.36,1);
  --fast:       .22s var(--ease);
  --slow:       .55s var(--ease);

  --shadow-1:   0 1px 2px rgba(10,13,17,.05), 0 8px 24px -12px rgba(10,13,17,.18);
  --shadow-2:   0 2px 6px rgba(10,13,17,.07), 0 26px 60px -26px rgba(10,13,17,.34);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--tx);
  font-family:'Golos Text','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.65;
  font-feature-settings:'ss01' 1,'cv05' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--gold-2); color:var(--ink); }

/* ---------- typography ---------- */
.d1,.d2,.d3,.d4{
  font-family:'Montserrat','Segoe UI',system-ui,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.96;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.d1{ font-size:clamp(2.05rem, 4.35vw, 4.25rem); }
.d2{ font-size:clamp(1.5rem, 3.7vw, 3.5rem); }
@media(min-width:420px){ .d2{ font-size:clamp(1.75rem, 3.7vw, 3.5rem); } }
.d3{ font-size:clamp(1.45rem, 2.3vw, 2.15rem); line-height:1.04; }
.d4{ font-size:clamp(1.05rem, 1.35vw, 1.3rem); line-height:1.15; letter-spacing:.005em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-ink);
}
.eyebrow::before{
  content:''; width:38px; height:2px; background:currentColor; opacity:.85; flex:none;
}
.eyebrow--plain::before{ display:none; }
.on-dark .eyebrow{ color:var(--gold-2); }

.lead{ font-size:clamp(1rem, 1.15vw, 1.125rem); line-height:1.7; color:var(--tx-2); }
.on-dark .lead{ color:var(--tx-on-dark-2); }
.muted{ color:var(--tx-2); }
.on-dark .muted{ color:var(--tx-on-dark-2); }
.small{ font-size:.875rem; line-height:1.6; }
.tiny{ font-size:.78rem; line-height:1.55; color:var(--tx-3); }
.on-dark .tiny{ color:#7D8794; }
.gold{ color:var(--gold-head); }
.on-dark .gold{ color:var(--gold-2); }
.num{ font-family:'Montserrat',sans-serif; font-weight:800; font-variant-numeric:tabular-nums; }

/* ---------- layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.shell--wide{ max-width:1560px; }
.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:clamp(56px,6vw,96px); }
/* the header is fixed — anchor jumps must clear it */
section[id],[id]:target{ scroll-margin-top:calc(var(--hdr) + 14px); }
.on-dark{ background:var(--ink); color:var(--tx-on-dark); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--tx-on-dark); }
.paper-2{ background:var(--paper-2); }

/* ---------- gold surface ----------
   The third material. Used once per page, on the moment that asks for action. */
.on-gold{
  background:
    radial-gradient(130% 150% at 8% -10%, #E8B94E 0%, #D29B2C 42%, #B57F16 100%);
  color:#241905;
  position:relative; overflow:hidden;
}
.on-gold::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(103deg, rgba(255,255,255,.16) 0 34%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.13) 100%);
  clip-path:polygon(0 0, 46% 0, 62% 100%, 0 100%);
}
.on-gold > *{ position:relative; z-index:1; }
/* the diagonal reads as a hard seam once the viewport is narrow */
@media(max-width:900px){
  .on-gold::after{
    clip-path:none;
    background:linear-gradient(180deg, rgba(255,255,255,.13) 0 30%, rgba(0,0,0,.07) 100%);
  }
}
.on-gold h1,.on-gold h2,.on-gold h3,.on-gold h4{ color:#1B1304; }
.on-gold .gold{ color:#5C4109; }
.on-gold .eyebrow{ color:#5C4109; }
.on-gold .lead,.on-gold .muted{ color:#3D2C0B; }
.on-gold .tiny{ color:#5C4109; }
.on-gold .hint{ color:#5C4109; }
.on-gold .btn{ --bg:var(--ink); --fg:#F6EFE0; --bd:var(--ink); }
.on-gold .btn::before{ background:#F6EFE0; }
.on-gold .btn:hover{ color:var(--ink); border-color:#F6EFE0; }
.on-gold .btn--ghost{ --bg:transparent; --fg:#241905; --bd:rgba(36,25,5,.45); }
.on-gold .btn--ghost::before{ background:var(--ink); }
.on-gold .btn--ghost:hover{ color:#F6EFE0; border-color:var(--ink); }
.on-gold .field label{ color:#3D2C0B; }
.on-gold .field .hint{ color:#5C4109; }
.on-gold .calc__form > .note{ background:rgba(255,252,244,.62); }
.on-gold .inp{ background:rgba(255,252,244,.82); border-color:rgba(36,25,5,.28); color:#241905; }
.on-gold .inp:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(36,25,5,.16); }
.on-gold .note{ background:rgba(255,252,244,.5); border-color:var(--ink); color:#3D2C0B; }
.on-gold .note svg{ color:#5C4109; }
.on-gold .ticks svg{ color:#5C4109; }
.on-gold .range::-webkit-slider-runnable-track{ background:rgba(36,25,5,.3); }
.on-gold .range::-webkit-slider-thumb{ background:var(--ink); }
.on-gold .range::-moz-range-track{ background:rgba(36,25,5,.3); }
.on-gold .range::-moz-range-thumb{ background:var(--ink); }
.on-gold :focus-visible{ outline-color:var(--ink); }

/* ---------- gold band ----------
   A slim strip of the brand's own light between two sections. */
.strip{
  background:linear-gradient(96deg, #D9A233 0%, #C08A22 52%, #A87614 100%);
  color:#241905;
  border-block:1px solid rgba(36,25,5,.22);
}
.strip__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 28px; padding-block:16px;
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.strip b{ font-weight:800; }
.strip__a{
  font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:.06em;
  font-size:.9rem; text-transform:none;
  display:inline-flex; align-items:center; gap:.6em;
  transition:opacity var(--fast);
}
.strip__a svg{ width:16px; height:16px; }
.strip__a:hover{ opacity:.68; }

.sec-head{ display:grid; gap:20px; max-width:760px; margin-bottom:clamp(40px,4.6vw,68px); }
.sec-head--wide{ max-width:none; }
.sec-head--split{
  max-width:none; grid-template-columns:minmax(0,1fr);
  align-items:end; gap:24px;
}
@media(min-width:900px){
  .sec-head--split{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; }
}

/* diagonal seam between light and dark blocks */
.seam{ position:relative; }
.seam::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:64px;
  background:inherit;
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
  pointer-events:none;
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--gold); --fg:#12161B; --bd:var(--gold);
  position:relative; display:inline-flex; align-items:center; gap:.85em;
  padding:15px 26px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:0;
  font-size:.775rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform var(--fast); }
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:translateX(-101%); transition:transform .4s var(--ease);
}
.btn:hover{ color:#F6F3EE; border-color:var(--ink); }
.btn:hover::before{ transform:translateX(0); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }

.btn--ghost{ --bg:transparent; --fg:var(--tx); --bd:var(--gold); }
.btn--ghost:hover{ color:#F6F3EE; }
.on-dark .btn--ghost{ --fg:#F3F1ED; --bd:rgba(255,255,255,.32); }
.on-dark .btn--ghost::before{ background:#F3F1ED; }
.on-dark .btn--ghost:hover{ color:var(--ink); border-color:#F3F1ED; }

.btn--sm{ padding:11px 18px; font-size:.7rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.link-more{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.775rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-ink); padding-bottom:4px; position:relative;
}
.link-more svg{ width:15px; height:15px; transition:transform var(--fast); }
.link-more::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform-origin:left; transform:scaleX(.34);
  transition:transform .4s var(--ease);
}
.link-more:hover::after{ transform:scaleX(1); }
.link-more:hover svg{ transform:translateX(4px); }

/* ---------- header ---------- */
/* The header floats over the dark first screen and only takes on a surface
   once that screen has scrolled past. It is never light: the mark is light. */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
.hdr.is-stuck{
  background:rgba(10,13,17,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:rgba(222,167,54,.3);
  box-shadow:0 20px 46px -34px rgba(0,0,0,.9);
}
.hdr__in{
  height:var(--hdr);
  display:flex; align-items:center; gap:clamp(16px,2.4vw,40px);
}
.brand{ display:flex; align-items:center; gap:12px; flex:none; margin-right:auto; }
.brand__mark{
  width:auto; height:40px; flex:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.brand__txt{ display:grid; line-height:1; }
.brand__t1{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.98rem;
  letter-spacing:.045em; text-transform:uppercase; color:#F5F3EF;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.brand__t2{
  font-size:.56rem; font-weight:600; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-2); margin-top:5px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

.nav{ display:none; align-items:center; gap:clamp(14px,1.8vw,30px); }
@media(min-width:1060px){ .nav{ display:flex; } }
.nav a{
  position:relative; padding:6px 0;
  font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(243,241,237,.74); transition:color var(--fast);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--gold-2); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a[aria-current="page"]{ color:#fff; }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.hdr__cta{ display:none; align-items:center; gap:18px; flex:none; }
@media(min-width:1160px){ .hdr__cta{ display:flex; } }
.hdr__tel{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:.86rem;
  letter-spacing:.02em; white-space:nowrap; color:#F5F3EF;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  transition:color var(--fast);
}
.hdr__tel:hover{ color:var(--gold-2); }

.burger{
  display:grid; place-content:center; justify-items:center; gap:5px;
  width:46px; height:46px; flex:none;
  margin-left:auto; background:rgba(10,13,17,.28); border:1px solid rgba(255,255,255,.34); cursor:pointer;
}
@media(min-width:1060px){ .burger{ display:none; } }
.burger span{ display:block; width:20px; height:1.5px; background:#F5F3EF; transition:transform var(--fast), opacity var(--fast); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:calc(var(--hdr) + 1px) 0 0 0; z-index:70;
  background:var(--ink); color:var(--tx-on-dark);
  padding:clamp(28px,6vw,56px) var(--pad) 40px;
  display:grid; align-content:start; gap:6px;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y:auto;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.drawer a.drawer__link{
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.4rem,6vw,2rem); letter-spacing:-.01em;
  padding:14px 0; border-bottom:1px solid var(--line-dark);
  display:flex; align-items:baseline; gap:14px;
}
.drawer a.drawer__link .idx{ font-size:.65rem; letter-spacing:.2em; color:var(--gold-2); font-weight:700; }
.drawer__foot{ margin-top:30px; display:grid; gap:10px; }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink);
  min-height:clamp(540px, 92svh, 940px);
  display:flex; align-items:stretch;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:62% 50%; }
/* top scrim keeps the floating header legible over any part of the photo */
.hero__wash{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,13,17,.74) 0%, rgba(10,13,17,.28) 14%, rgba(10,13,17,0) 34%, rgba(10,13,17,.62) 100%);
}
/* the diagonal dark plate — the signature.
   It thins out toward the cut so the warm photo bleeds through, the same way
   it does on the inner pages; that bleed is what makes the seam glow. */
.hero__plate{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(103deg,
      rgba(7,9,12,.985) 0%,
      rgba(7,9,12,.965) 44%,
      rgba(8,11,15,.85) 72%,
      rgba(9,12,16,.52) 90%,
      rgba(10,13,17,.3) 100%);
  clip-path:polygon(0 0, 55% 0, 68% 100%, 0 100%);
}
/* sun bloom painted onto the plate itself — the parent's clip-path trims it,
   so the warm band ends exactly on the gold cut, as it does on inner pages */
.hero__plate::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(50% 122% at 60% 50%,
      rgba(242,192,96,.36) 0%,
      rgba(222,162,52,.15) 44%,
      rgba(222,162,52,0) 74%);
}
.hero__plate-glow{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, rgba(7,9,12,.5) 0%, rgba(7,9,12,.2) 50%, rgba(7,9,12,0) 76%);
}
/* the gold hairline that rides the diagonal: a slightly wider twin of the
   plate, sitting one layer below it, so only its edge shows */
.hero__edge{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(168deg, var(--gold-3) 0%, var(--gold-2) 42%, rgba(192,138,34,.35) 100%);
  clip-path:polygon(0 0, calc(55% + 2px) 0, calc(68% + 2px) 100%, 0 100%);
}
.hero__in{
  position:relative; z-index:4;
  width:100%; display:flex; align-items:center;
  padding-block:clamp(40px,4.4vw,70px);
  padding-top:calc(var(--hdr) + clamp(18px,2.2vw,42px));
  padding-bottom:clamp(72px,6vw,96px);
}
.hero__col{ max-width:min(660px, 92%); color:var(--tx-on-dark); }
@media(min-width:1100px){ .hero__col{ max-width:min(700px, 52%); } }
/* the display size is tied to the window height too, so the whole first
   screen fits on a laptop without the buttons falling below the fold */
.hero h1{ margin:16px 0 0; font-size:clamp(2.05rem, min(4.35vw, 7svh), 4.25rem); }
.hero h1 .l1{ display:block; color:#fff; }
.hero h1 .l2{ display:block; color:var(--gold-2); }
.hero__lead{ margin-top:16px; max-width:50ch; color:#C3C9D2; font-size:clamp(.95rem,1.05vw,1.06rem); }
.hero__cycle{
  margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto auto; gap:18px 24px;
}
@media(min-width:720px){ .hero__cycle{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } }
.hero__cycle li{ display:grid; gap:7px; align-content:start; }
@supports(grid-template-rows:subgrid){
  .hero__cycle li{ grid-row:span 3; grid-template-rows:subgrid; }
}
.hero__cycle .n{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.7rem;
  letter-spacing:.16em; color:var(--gold-2);
}
.hero__cycle .t{
  font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#EDEBE7;
}
/* lifted from #8F98A4: the sun bloom sits under the right-hand columns and
   dropped the old grey below 4.5:1 */
.hero__cycle .d{ font-size:.76rem; line-height:1.45; color:#B6BDC7; }
.hero .btn-row{ margin-top:22px; }
.hero__foot{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  border-top:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(7,9,12,0), rgba(7,9,12,.55));
}
.hero__foot-in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:15px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#8F98A4;
}
.hero__foot b{ color:var(--gold-2); font-weight:700; }
.hero__scroll{ display:none; align-items:center; gap:10px; }
@media(min-width:760px){ .hero__scroll{ display:inline-flex; } }
.hero__scroll i{
  display:block; width:44px; height:1px; background:rgba(255,255,255,.3); position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:''; position:absolute; inset:0; background:var(--gold-2);
  transform-origin:left; animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{ 0%{transform:scaleX(0)} 45%{transform:scaleX(1); transform-origin:left} 55%{transform:scaleX(1); transform-origin:right} 100%{transform:scaleX(0); transform-origin:right} }

@media(max-width:1099px){
  .hero__plate{
    clip-path:none;
    background:linear-gradient(180deg, rgba(7,9,12,.94) 0%, rgba(7,9,12,.88) 45%, rgba(7,9,12,.93) 100%);
  }
  .hero__plate-glow,.hero__edge{ display:none; }
  /* no diagonal below this width, so the bloom would just wash the copy */
  .hero__plate::after{ display:none; }
}
/* short laptop windows: squeeze the rhythm further so nothing falls below the fold */
@media(min-width:900px) and (max-height:780px){
  .hero__in{ padding-top:calc(var(--hdr) + 16px); padding-bottom:64px; }
  .hero h1{ margin-top:12px; }
  .hero__lead{ margin-top:12px; }
  .hero__cycle{ margin-top:16px; padding-top:14px; gap:14px 22px; }
  .hero .btn-row{ margin-top:18px; }
  .hero__foot-in{ padding-block:11px; }
  .phero__in{ padding-top:calc(var(--hdr) + 26px); padding-bottom:44px; }
}

/* page hero (inner pages) */
.phero{
  position:relative; isolation:isolate; overflow:hidden; background:var(--ink);
  color:var(--tx-on-dark);
}
.phero__media{ position:absolute; inset:0; z-index:0; }
.phero__media img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; }
.phero__edge{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(168deg, var(--gold-3) 0%, var(--gold-2) 42%, rgba(192,138,34,.35) 100%);
  clip-path:polygon(0 0, calc(62% + 2px) 0, calc(76% + 2px) 100%, 0 100%);
}
.phero__plate{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(102deg, rgba(7,9,12,.97) 0%, rgba(7,9,12,.93) 48%, rgba(8,11,15,.6) 76%, rgba(8,11,15,.25) 100%);
  clip-path:polygon(0 0, 62% 0, 76% 100%, 0 100%);
}
.phero__wash{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,13,17,.74) 0%, rgba(10,13,17,.3) 16%, rgba(10,13,17,.15) 42%, rgba(10,13,17,.75) 100%); }
.phero__in{
  position:relative; z-index:2;
  padding-block:clamp(58px,7.5vw,120px);
  padding-top:calc(var(--hdr) + clamp(34px,4.2vw,76px));
}
.phero__col{ max-width:min(720px,94%); }
@media(min-width:1000px){ .phero__col{ max-width:56%; } }
.phero h1{ margin:20px 0 0; }
.phero h1 em{ font-style:normal; color:var(--gold-2); display:block; }
.phero__lead{ margin-top:20px; color:#C3C9D2; max-width:54ch; }
.phero__tags{ margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; }
.phero__tags li{
  padding:8px 14px; border:1px solid rgba(255,255,255,.2);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#D6DAE0;
  transition:border-color var(--fast), color var(--fast), background var(--fast);
}
.phero__tags li:hover{ border-color:var(--gold-2); color:#fff; }
.phero__tags a{ display:block; margin:-8px -14px; padding:8px 14px; }
@media(max-width:999px){
  .phero__plate{ clip-path:none; background:linear-gradient(180deg, rgba(7,9,12,.93), rgba(7,9,12,.9)); }
  .phero__edge{ display:none; }
}

/* breadcrumbs */
.crumbs{ display:flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:#8F98A4; }
.crumbs a:hover{ color:var(--gold-2); }
.crumbs span{ opacity:.5; }

/* ---------- cards ---------- */
.grid{ display:grid; gap:clamp(16px,1.6vw,24px); }
.grid-2{ grid-template-columns:minmax(0,1fr); }
.grid-3{ grid-template-columns:minmax(0,1fr); }
.grid-4{ grid-template-columns:minmax(0,1fr); }
@media(min-width:600px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:960px){
  .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.card{
  position:relative; background:var(--paper-2);
  border:1px solid var(--line-2);
  padding:clamp(24px,2.2vw,34px);
  display:grid; gap:14px; align-content:start;
  transition:border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.card::before{
  content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:2px;
  background:var(--gold); transform:scaleX(.16); transform-origin:left;
  transition:transform .45s var(--ease);
}
.card:hover{ border-color:var(--gold-line); transform:translateY(-3px); box-shadow:var(--shadow-1); }
.card:hover::before{ transform:scaleX(1); }
.card__n{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.72rem;
  letter-spacing:.18em; color:var(--gold-ink);
}
.card h3{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1rem; letter-spacing:.045em; text-transform:uppercase; }
.card p{ font-size:.9rem; line-height:1.65; color:var(--tx-2); }

.on-dark .card{ background:var(--ink-2); border-color:rgba(255,255,255,.09); }
.on-dark .card:hover{ border-color:rgba(255,255,255,.18); box-shadow:none; }
.on-dark .card p{ color:var(--tx-on-dark-2); }
.on-dark .card__n{ color:var(--gold-2); }

/* icon chip */
.chip{
  width:52px; height:52px; flex:none; display:grid; place-items:center;
  border:1px solid var(--gold-line); background:var(--gold-tint);
  transition:border-color var(--fast), background var(--fast), color var(--fast);
  color:var(--gold-ink);
}
.chip svg{ width:24px; height:24px; }
.card:hover .chip{ border-color:var(--gold); background:#F7E9C8; }
.on-dark .chip{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:var(--gold-2); }
.on-dark .card:hover .chip{ border-color:var(--gold-2); background:rgba(222,167,54,.08); }
.chip--sm{ width:42px; height:42px; }
.chip--sm svg{ width:20px; height:20px; }

/* feature row (icon + text, no box) */
.feat{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; }
.feat h4{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:.86rem; letter-spacing:.07em; text-transform:uppercase; margin-bottom:6px; }
.feat p{ font-size:.86rem; line-height:1.6; color:var(--tx-2); }
.on-dark .feat p{ color:var(--tx-on-dark-2); }

/* ---------- process rail ---------- */
.rail{ display:grid; gap:0; counter-reset:step; }
@media(min-width:860px){ .rail{ grid-auto-flow:column; grid-auto-columns:1fr; } }
.rail li{
  position:relative; padding:26px 24px 26px 0;
  border-top:2px solid var(--gold-line);
  display:grid; gap:10px; align-content:start;
}
@media(min-width:860px){
  .rail li{ padding:28px 26px 8px 0; }
  .rail li + li{ padding-left:26px; }
  .rail li + li::before{
    content:''; position:absolute; left:0; top:28px; bottom:8px; width:1px; background:var(--gold-line);
  }
}
.rail .s-n{
  font-family:'Montserrat',sans-serif; font-weight:900; font-size:2.1rem; line-height:1;
  color:var(--gold); letter-spacing:-.02em;
}
.rail .s-t{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; }
.rail .s-d{ font-size:.85rem; line-height:1.6; color:var(--tx-2); }
.on-dark .rail li{ border-color:rgba(222,167,54,.42); }
.on-dark .rail li + li::before{ background:rgba(255,255,255,.12); }
.on-dark .rail .s-n{ color:var(--gold-2); }
.on-dark .rail .s-d{ color:var(--tx-on-dark-2); }

/* ---------- value chain (vertical numbered) ---------- */
.chain{ display:grid; }
.chain li{
  position:relative; display:grid; grid-template-columns:54px minmax(0,1fr);
  gap:22px; padding-bottom:clamp(22px,2.2vw,30px);
}
.chain li:last-child{ padding-bottom:0; }
.chain li:not(:last-child)::before{
  content:''; position:absolute; left:26.5px; top:54px; bottom:0; width:1px; background:var(--line);
}
.on-dark .chain li:not(:last-child)::before{ background:rgba(255,255,255,.14); }
.chain .cn{
  position:relative; z-index:1;
  width:54px; height:54px; display:grid; place-items:center;
  border:1px solid var(--gold-line); background:var(--gold-tint); color:var(--gold-ink);
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.9rem;
  transition:border-color var(--fast), background var(--fast);
}
.on-dark .chain .cn{ border-color:rgba(255,255,255,.16); background:var(--ink-2); color:var(--gold-2); }
.chain li:hover .cn{ border-color:var(--gold); }
.chain h4{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.92rem;
  letter-spacing:.06em; text-transform:uppercase; margin:11px 0 7px;
}
.chain p{ font-size:.88rem; line-height:1.6; color:var(--tx-2); }
.on-dark .chain p{ color:var(--tx-on-dark-2); }

/* ---------- split media block ---------- */
.split{ display:grid; gap:clamp(28px,4vw,64px); align-items:center; }
@media(min-width:940px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split--41{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
  .split--rev .split__media{ order:-1; }
}
.frame{
  position:relative; overflow:hidden; background:var(--ink-2); isolation:isolate;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
}
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.frame:hover img{ transform:scale(1.035); }
/* gold light falling across the image, same direction as the diagonal */
.frame::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(103deg, rgba(10,13,17,.34) 0 12%, rgba(10,13,17,0) 46%),
    linear-gradient(283deg, rgba(240,206,124,.20) 0 26%, rgba(240,206,124,0) 62%);
}
.frame--tall{ aspect-ratio:4/5; max-height:min(74vh, 620px); }
.frame--wide{ aspect-ratio:16/9; }
.frame--sq{ aspect-ratio:1/1; }
.frame--band{ aspect-ratio:24/7; min-height:200px; }
.frame__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  background:linear-gradient(96deg, #D9A233, #B57F16);
  color:#241905;
  padding:11px 18px; font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); }
@media(min-width:860px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stats li{ background:var(--paper-2); padding:clamp(24px,2.6vw,38px) clamp(18px,2vw,28px); display:grid; gap:8px; }
.on-dark .stats,.cta .stats{ background:rgba(222,167,54,.34); }
.on-dark .stats li,.cta .stats li{ background:rgba(10,13,17,.72); backdrop-filter:blur(2px); }
.stats .v{
  font-family:'Montserrat',sans-serif; font-weight:900; letter-spacing:-.03em;
  font-size:clamp(2.2rem,4.2vw,3.5rem); line-height:1; color:var(--tx);
}
.on-dark .stats .v,.cta .stats .v{ color:var(--gold-2); }
.stats .v em{ font-style:normal; color:var(--gold-head); font-size:.5em; letter-spacing:0; margin-left:.14em; }
.on-dark .stats .v em,.cta .stats .v em{ color:var(--gold-3); }
.stats .k{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-2); }
.on-dark .stats .k,.cta .stats .k{ color:var(--tx-on-dark-2); }

/* ---------- brand list ---------- */
.brands{ display:flex; flex-wrap:wrap; gap:1px; background:var(--gold-line); border:1px solid var(--gold-line); }
.brands li{
  flex:1 1 180px; background:var(--paper-2); padding:26px 20px; text-align:center;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.95rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx); transition:color var(--fast), background var(--fast);
}
.brands li:hover{ color:var(--gold-ink); background:var(--gold-tint); }
.brands li span{ display:block; margin-top:6px; font-family:'Golos Text',sans-serif; font-weight:500; font-size:.7rem; letter-spacing:.1em; color:var(--tx-3); }

/* ---------- tick list ---------- */
.ticks{ display:grid; gap:14px; }
.ticks li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:13px; align-items:start; font-size:.92rem; line-height:1.6; }
.ticks svg{ width:18px; height:18px; margin-top:3px; color:var(--gold-ink); flex:none; }
.on-dark .ticks svg{ color:var(--gold-2); }
.ticks b{ font-weight:600; }

/* ---------- pill notes ---------- */
.note{
  display:flex; align-items:flex-start; gap:14px;
  border-left:2px solid var(--gold); background:var(--gold-tint);
  padding:18px 22px; font-size:.9rem; line-height:1.6; color:var(--tx-2);
}
.on-dark .note{ background:rgba(255,255,255,.045); color:var(--tx-on-dark-2); border-color:var(--gold-2); }
.note svg{ width:20px; height:20px; color:var(--gold-ink); flex:none; margin-top:2px; }
.on-dark .note svg{ color:var(--gold-2); }

/* ---------- CTA band ---------- */
.cta{ position:relative; overflow:hidden; background:var(--ink); color:var(--tx-on-dark); }
.cta__bg{ position:absolute; inset:0; opacity:.28; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta__veil{ position:absolute; inset:0; background:linear-gradient(95deg, var(--ink) 24%, rgba(10,13,17,.72) 62%, rgba(10,13,17,.5) 100%); }
.cta__in{ position:relative; z-index:2; padding-block:clamp(60px,6.5vw,110px); display:grid; gap:34px; align-items:center; }
@media(min-width:940px){ .cta__in{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:60px; } }

/* .cta is a dark surface too — inherit the dark-context treatments */
.cta .eyebrow{ color:var(--gold-2); }
.cta .gold{ color:var(--gold-2); }
.cta .lead,.cta .muted{ color:var(--tx-on-dark-2); }
.cta .tiny{ color:#7D8794; }
.cta .ticks svg{ color:var(--gold-2); }
.cta .btn--ghost{ --fg:#F3F1ED; --bd:rgba(255,255,255,.32); }
.cta .btn--ghost::before{ background:#F3F1ED; }
.cta .btn--ghost:hover{ color:var(--ink); border-color:#F3F1ED; }
.cta .note{ background:rgba(255,255,255,.045); color:var(--tx-on-dark-2); border-color:var(--gold-2); }
.cta .note svg{ color:var(--gold-2); }
.cta .card{ background:var(--ink-2); border-color:rgba(255,255,255,.09); }
.cta .card p{ color:var(--tx-on-dark-2); }
.cta .chip{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:var(--gold-2); }
.cta .feat p{ color:var(--tx-on-dark-2); }

/* ---------- calculator ---------- */
.calc{ display:grid; gap:clamp(24px,3vw,48px); }
@media(min-width:980px){ .calc{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); } }
.calc__form{ display:grid; gap:22px; align-content:start; }
.field{ display:grid; gap:9px; }
.field label{ font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-2); }
.field .hint{ font-size:.74rem; color:var(--tx-3); letter-spacing:0; text-transform:none; font-weight:400; }
.inp{
  width:100%; padding:14px 16px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:0; color:var(--tx);
  font-size:.98rem; transition:border-color var(--fast), box-shadow var(--fast);
}
.inp:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(190,138,33,.14); }
select.inp{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--tx-2) 50%),linear-gradient(135deg,var(--tx-2) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.range-row{ display:flex; align-items:center; gap:20px; }
.range-val{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.05rem; min-width:118px; text-align:right; }
.range{
  flex:1; -webkit-appearance:none; appearance:none;
  width:100%; height:24px; padding:0; border:0; background:transparent; cursor:pointer;
}
.range::-webkit-slider-runnable-track{ height:2px; background:var(--line); }
.range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; margin-top:-9px;
  background:var(--gold); border:0;
  transition:transform var(--fast), box-shadow var(--fast);
}
.range::-webkit-slider-thumb:hover{ transform:scale(1.1); box-shadow:0 0 0 7px rgba(190,138,33,.15); }
.range::-moz-range-track{ height:2px; background:var(--line); }
.range::-moz-range-thumb{
  width:20px; height:20px; border:0; border-radius:0; background:var(--gold);
  transition:transform var(--fast), box-shadow var(--fast);
}
.range::-moz-range-thumb:hover{ transform:scale(1.1); box-shadow:0 0 0 7px rgba(190,138,33,.15); }

.calc__out{ background:var(--ink); color:var(--tx-on-dark); padding:clamp(26px,2.6vw,40px); display:grid; gap:0; align-content:start; }
.calc__out h3{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); margin-bottom:20px; }
.calc__row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:15px 0; border-top:1px solid rgba(255,255,255,.11); }
.calc__row:first-of-type{ border-top:none; }
.calc__row .k{ font-size:.82rem; color:var(--tx-on-dark-2); }
.calc__row .v{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.25rem; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc__row .v small{ font-size:.62em; font-weight:600; color:var(--gold-2); margin-left:.35em; }
.calc__hero{ padding:20px 0 6px; }
.calc__hero .v{ font-size:clamp(2rem,3.4vw,2.9rem); color:var(--gold-2); line-height:1; }

/* ---------- form ---------- */
.form{ display:grid; gap:16px; }
.form__row{ display:grid; gap:16px; }
@media(min-width:640px){ .form__row{ grid-template-columns:1fr 1fr; } }
.on-dark .inp{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:#F3F1ED; }
.on-dark .inp::placeholder{ color:#7D8794; }
.on-dark .inp:focus{ border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(222,167,54,.16); }
.on-dark .field label{ color:var(--tx-on-dark-2); }
textarea.inp{ resize:vertical; min-height:104px; }
.form__ok{
  display:none; align-items:flex-start; gap:14px; padding:18px 20px;
  border:1px solid var(--gold); background:rgba(222,167,54,.09); font-size:.9rem; line-height:1.6;
}
.form__ok.is-on{ display:flex; }
.form__ok svg{ width:20px; height:20px; color:var(--gold-2); flex:none; margin-top:2px; }

/* ---------- contact tiles ---------- */
.ctile{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center;
  padding:22px 24px; border:1px solid var(--gold-line); background:var(--paper-2);
  transition:border-color var(--fast), transform var(--fast), background var(--fast);
}
.ctile:hover{ border-color:var(--gold); background:var(--gold-tint); transform:translateY(-2px); }
.ctile .k{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); margin-bottom:5px; }
.ctile .v{ display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:.98rem; letter-spacing:.01em; overflow-wrap:anywhere; }

/* ---------- footer ---------- */
.ftr{ background:var(--ink); color:var(--tx-on-dark-2); }
.ftr__top{ padding-block:clamp(48px,5vw,84px); display:grid; gap:44px; }
@media(min-width:900px){ .ftr__top{ grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr) minmax(0,1fr); gap:52px; } }
.ftr__brand{ display:flex; align-items:center; gap:13px; }
.ftr__brand img{ height:40px; width:auto; }
.ftr__brand .t1{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1rem; letter-spacing:.045em; text-transform:uppercase; color:#F3F1ED; }
.ftr__brand .t2{ font-size:.56rem; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-2); margin-top:5px; }
.ftr h4{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:#F3F1ED; margin-bottom:18px; }
.ftr__links{ display:grid; gap:11px; }
.ftr__links a{ font-size:.88rem; transition:color var(--fast); }
.ftr__links a:hover{ color:var(--gold-2); }
.ftr__contacts{ display:grid; gap:13px; }
.ftr__contacts a,.ftr__contacts span{ display:flex; align-items:center; gap:11px; font-size:.92rem; }
.ftr__contacts svg{ width:17px; height:17px; color:var(--gold-2); flex:none; }
.ftr__contacts a:hover{ color:#fff; }
.ftr__bot{
  border-top:1px solid rgba(255,255,255,.1); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between;
  font-size:.76rem; letter-spacing:.06em; color:#767F8B;
}
.ftr__slogan{ font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; color:#F3F1ED; }
.ftr__slogan em{ font-style:normal; color:var(--gold-2); }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); }
.reveal-ready [data-reveal]{ transition:opacity .62s var(--ease), transform .62s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- utility ---------- */
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.on-dark .hr{ background:rgba(255,255,255,.12); }
.stack-sm{ display:grid; gap:12px; }
.stack{ display:grid; gap:22px; }
.stack-lg{ display:grid; gap:36px; }
/* inline-flex children in a grid stack must not stretch to the column */
.stack > .btn, .stack > .link-more, .stack > .eyebrow,
.stack-sm > .btn, .stack-sm > .link-more, .stack-sm > .eyebrow,
.card > .link-more, .card > .btn,
.form > .btn, .calc__form > .btn{ justify-self:start; }
.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; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; font-size:.8rem;
}
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }