/* ==========================================================================
   KREAKOV — kovové kuchyne
   Built to the visual identity v1.1 (direction: OHYB + the HRANA edge rule).

   Palette is deliberately achromatic — the steel is the colour. Oxid is an
   INTERFACE ACCENT ONLY: keep it under ~2% of any screen, and never put it
   in the logo. Type is Archivo + IBM Plex Mono (mono carries specs,
   dimensions, prices and labels — never body copy).
   ========================================================================== */

:root {
  /* Brand palette — do not add colours to this list. */
  --ink:    #191C1E;   /* Grafit — logo, body text */
  --steel:  #6F787E;   /* Oceľ — folded plane, secondary text */
  --grain:  #C3C8CB;   /* Zrno — hairlines, rules */
  --paper:  #EFF0EF;   /* Papier — default ground */
  --white:  #FFFFFF;   /* Biela — print stock, product photography */
  --oxid:   #8C4A2F;   /* interface accent only, ≤2% of surface */

  /* Working tones derived from the palette (no new hues). */
  --ink-80: #43484B;
  --rule:   #D9DDDC;
  --plate:  #E7E9E8;
  --ink-r:  25, 28, 30;      /* --ink as rgb parts, for alpha use */

  --sans: 'Archivo', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sheet metal doesn't have soft corners. */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;

  --container: 1180px;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* Must come before any rule that sets an explicit `display` on a hideable
   element — otherwise `display: grid/flex` beats the browser's default
   [hidden] rule and "hidden" elements stay visible. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.62;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.014em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
button { font-family: inherit; }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--oxid); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Mono is for specs, dimensions, prices and labels — not for prose. */
.mono, .estimate-value, .calc-breakdown li span:last-child,
.hero-stats .stat strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 16px;
}

/* The header is sticky at 74px, so anchor targets need to clear it —
   otherwise clicking a nav link parks the heading underneath it. */
section[id], #top { scroll-margin-top: 92px; }

section { padding: 104px 0; }
@media (max-width: 720px) { section { padding: 68px 0; } }

.section-head { max-width: 660px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
.section-head p { color: var(--steel); font-size: 1.02rem; margin-bottom: 0; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* The HRANA device — a section through a worktop with a downturned front
   edge. Used as the divider between sections, per the identity guide. */
.edge-rule {
  display: block;
  width: 100%;
  height: 20px;
  color: var(--steel);
  opacity: 0.45;
}
.edge-rule.flip { transform: scaleX(-1); }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(255,255,255,0.08); }
.btn-block { width: 100%; }
.btn-small { padding: 9px 16px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* On a graphite ground the primary button inverts. */
.on-ink .btn-primary { background: var(--paper); color: var(--ink); }
.on-ink .btn-primary:hover { background: var(--white); }
.on-ink .btn-outline { color: var(--paper); border-color: rgba(255,255,255,0.45); }
.on-ink .btn-outline:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Header / Nav -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(239, 240, 239, 0.92);
  backdrop-filter: saturate(130%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 24px;
}

/* The logo: compact lockup (monogram + wordmark). The identity guide sets
   the site header at 17px cap height, which is below the 28px threshold
   where the descriptor stops being readable — so no descriptor here. */
.brand { display: flex; align-items: center; flex: none; }
/* Wordmark only — the K's carry the fold, so no separate monogram here.
   The viewBox is exactly the cap height, so this value IS the cap height.
   The identity guide puts the site header at ~17px; 20px keeps the crease on
   the two K's readable (below ~16px the fold closes up). */
.brand-lockup { height: 20px; width: auto; display: block; }
.lk-ink { fill: var(--ink); }
.lk-steel { fill: var(--steel); }
.on-ink .lk-ink { fill: var(--paper); }
.on-ink .lk-steel { fill: #8C959B; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-80);
  transition: color .15s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch { position: relative; }
.lang-switch button {
  background: transparent;
  border: 1px solid var(--grain);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-switch button:hover { border-color: var(--steel); }
.lang-switch .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  min-width: 168px;
  padding: 4px;
  display: none;
}
.lang-switch.open .menu { display: block; }
.lang-switch .menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
}
.lang-switch .menu a span { font-family: var(--mono); font-size: 0.7rem; color: var(--steel); letter-spacing: 0.08em; }
.lang-switch .menu a:hover { background: var(--paper); }
.lang-switch .menu a.active { color: var(--oxid); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--grain);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 1.05rem;
  padding: 7px 11px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-links {
    position: absolute;
    top: 74px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }
  .nav-links.mobile-open { display: flex; }
  .nav-links a { padding: 13px 0; width: 100%; border-bottom: 1px solid var(--rule); }
  .nav-toggle { display: block; }
}

/* Partner login area (header) -------------------------------------------- */
.partner-area { display: flex; align-items: center; }
.partner-status {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--steel);
}
.partner-status strong {
  color: var(--ink);
  font-weight: 500;
  /* A partner's address can be long; without a cap it pushes the whole
     header row into horizontal scroll on wide screens. */
  display: inline-block;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Header responsive trims — MUST stay after the rules above, since a media
   query adds no specificity and would otherwise lose the cascade. */
@media (max-width: 1200px) {
  /* Drop the whole "Partner: name@firm.sk" label, not just the address.
     German nav items are long enough ("Unsere Geschichte", "Warum
     Edelstahl", "Preisrechner") that keeping even the word "Partner"
     pushed the row past 1024px into horizontal scroll. The log-out button
     alone still says they are signed in, and so does the unlocked
     calculator. */
  .partner-status > span { display: none; }
  .nav-links { gap: 22px; }
}
/* Set by main.js while a partner is signed in — see applyPartnerState(). */
body.partner-in .header-actions .btn-primary { display: none; }

@media (max-width: 1100px) {
  /* Below this width the header runs out of room, and partner login matters
     more than the "get a price" button (the locked calculator offers it).
     Measured: at 1024px the actions row reached 1132px and pushed the page
     into horizontal scroll, so this has to fire before then. */
  .header-actions .btn-primary { display: none; }
}
@media (max-width: 600px) {
  .header-actions { gap: 8px; }
  .partner-area { display: none; }
  .brand-lockup { height: 17px; }
  .lang-switch button { padding: 7px 9px; }
}

/* Hero ------------------------------------------------------------------ */
.hero {
  background: var(--paper);
  padding: 96px 0 88px;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) { .hero { padding: 56px 0; } }

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.5rem);
  letter-spacing: -0.022em;
  margin-bottom: 20px;
}
.hero h1 span { color: var(--steel); }
.hero .lede {
  font-size: 1.1rem;
  color: var(--ink-80);
  max-width: 500px;
  margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-stats {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink);
}
.hero-stats .stat {
  padding: 14px 26px 0 0;
  margin-right: 26px;
  border-right: 1px solid var(--rule);
  padding-right: 26px;
}
.hero-stats .stat:last-child { border-right: none; margin-right: 0; }
@media (max-width: 560px) {
  /* Once the stats wrap onto two rows the vertical dividers stop lining up
     with anything, so they come off. */
  .hero-stats .stat { border-right: none; padding-right: 0; margin-right: 26px; }
}
.hero-stats .stat strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero-stats .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* One looping clip instead of a photo grid. Silent, 10s, and always moving
   forward — the last second is cross-dissolved back into the first, so the
   loop closes without ever running backwards. The point is the light
   travelling across brushed steel, which no still can show. */
.hero-visual {
  aspect-ratio: 4 / 4.4;
  max-height: 620px;
  overflow: hidden;
  background: var(--plate);
}
.hero-video, .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  /* Hold the strongest still rather than animating. */
  .hero-video { display: none; }
  .hero-visual {
    background: var(--plate) url("../video/hero-still.jpg") center / cover no-repeat;
  }
}

.marquee {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
  color: var(--steel);
  padding: 15px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track { display: inline-flex; gap: 46px; animation: scroll 32s linear infinite; }
.marquee span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Position pillars ---------------------------------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

/* No boxes, no soft shadows — a rule above each column, the way the
   identity sheet sets them. */
.feature-card {
  border-top: 1px solid var(--ink);
  padding: 16px 0 0;
}
.feature-card .icon {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 10px;
}
.feature-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.feature-card p { color: var(--steel); font-size: 0.93rem; margin-bottom: 0; line-height: 1.55; }

/* Story ------------------------------------------------------------------ */
.story { background: var(--white); }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 40px; } }

.story-portrait { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--plate); }
.story-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-portrait .caption {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: rgba(var(--ink-r), 0.82);
  color: var(--paper);
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.story-body p { color: var(--ink-80); font-size: 1.02rem; }
.story-quote {
  border-left: 2px solid var(--ink);
  padding-left: 20px;
  margin: 28px 0;
  font-size: 1.18rem;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.story-signature { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.story-signature .initials {
  width: 42px; height: 42px;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.story-signature strong { display: block; font-size: 0.94rem; font-weight: 500; }
.story-signature span { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--steel); }

/* The three architect projects under the story — Visit Košice. */
.story-strip { margin-top: 72px; }
.strip-head {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 26px;
}
/* One photo, shown properly: the image kept narrow so a tall interior shot
   doesn't run away down the page, with its caption set beside it. */
.strip-figure {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 320px);
  gap: 28px;
  align-items: end;
  /* Capped so the photo and its caption read as one block. Left to stretch
     across the container, the caption ended up marooned beside a tall image
     with 400px of dead space after it. */
  max-width: 700px;
}
@media (max-width: 700px) {
  .strip-figure { grid-template-columns: 1fr; gap: 14px; align-items: start; }
}
.strip-figure img {
  width: 100%;
  aspect-ratio: 3/5;
  object-fit: cover;
  background: var(--plate);
}
.strip-figure figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--steel);
  max-width: 40ch;
  padding-bottom: 4px;
}

.edit-note {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--oxid);
  border: 1px solid currentColor;
  padding: 5px 10px;
}

/* Inspiration wall --------------------------------------------------------
   A column ("masonry") layout rather than a fixed grid, so every photo keeps
   its own proportions — these come from a dozen sources and cropping them all
   to one ratio would butcher half of them. Kreakov's own jobs carry a tag;
   everything else is a reference photo. */
.inspiration { background: var(--plate); }
.wall {
  columns: 3;
  column-gap: 20px;
  margin-bottom: 26px;
}
@media (max-width: 900px) { .wall { columns: 2; column-gap: 16px; } }
@media (max-width: 520px) { .wall { columns: 1; } }

.wall-item {
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 20px;
  background: var(--white);
}
.wall-item img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--grain);
}
/* No captions on the wall — but the two Kreakov photos still have to be
   distinguishable from the reference shots, otherwise the credit line below
   reads as if it covered all of them. A chip on the image does that without
   putting text back under the pictures. */
.wall-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 7px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
}

.insp-disclaimer {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--steel);
  max-width: 760px;
  margin: 0;
}

/* Calculator — a graphite plate, the way the identity sheet sets specimens
   on a dark ground. Reversed logo rules apply inside (.on-ink).
   ------------------------------------------------------------------------ */
.calculator { background: var(--ink); color: var(--paper); }
.calculator .eyebrow { color: #8C959B; }
.calculator .section-head h2 { color: var(--paper); }
.calculator .section-head p { color: #9AA1A5; }

.calc-wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  background: #202426;
  border: 1px solid rgba(255,255,255,0.09);
}
@media (max-width: 900px) { .calc-wrap { grid-template-columns: 1fr; } }

.calc-form { padding: 38px; }
.calc-summary {
  padding: 38px;
  background: #16191B;
  border-left: 1px solid rgba(255,255,255,0.09);
}
@media (max-width: 900px) { .calc-summary { border-left: none; border-top: 1px solid rgba(255,255,255,0.09); } }

.field { margin-bottom: 26px; }
.field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #9AA1A5;
}
.field label .val { color: var(--paper); letter-spacing: 0.04em; }

input[type="range"] { width: 100%; accent-color: var(--paper); height: 4px; }
select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.16);
  background: #16191B;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.92rem;
}
.radio-group, .check-group { display: flex; flex-direction: column; gap: 8px; }
.radio-row, .check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: #C6CBCD;
  transition: border-color .15s ease;
}
.radio-row:hover, .check-row:hover { border-color: rgba(255,255,255,0.32); }
/* These rows are <label> elements inside .field, so `.field label` (0,1,1)
   outranks a bare `.check-row` (0,1,0) and its `justify-content: space-between`
   applied here too. That was invisible while a price hint sat on the right of
   each row; now the hints are gone (prices moved server-side) it would push
   each option's text hard right of its own checkbox. Hence the extra weight. */
.field label.radio-row, .field label.check-row {
  justify-content: flex-start;
  margin-bottom: 0;
}
.radio-row input, .check-row input { accent-color: var(--paper); }

/* Where the kitchen gets fitted. Travel is billed per km from the workshop,
   so this is part of the price, not an address collected for later. */
.where-row {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 420px) { .where-row { grid-template-columns: 1fr; } }

.calc-form input[type="text"],
.calc-form input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.16);
  background: #16191B;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.9rem;
}
.calc-form input::placeholder { color: #6E767A; }
.calc-form input[type="text"]:focus,
.calc-form input[type="number"]:focus {
  outline: none;
  border-color: rgba(255,255,255,0.4);
}

.where-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: #8C959B;
  margin: 10px 0 0;
  min-height: 1em;
}
.where-manual { margin-top: 14px; }
.where-manual label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9AA1A5;
  margin-bottom: 8px;
}

.calc-error {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: #C08463;
  margin: -14px 0 22px;
}

.calc-summary .estimate-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #8C959B;
  margin-bottom: 10px;
}
.calc-summary .estimate-value {
  font-size: 2.3rem;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.calc-summary .estimate-value small { font-size: 0.9rem; color: #8C959B; }
.calc-summary .estimate-note { font-size: 0.8rem; color: #8C959B; margin-bottom: 26px; line-height: 1.55; }

.calc-breakdown { list-style: none; padding: 0; margin: 0 0 26px; }
.calc-breakdown li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  font-size: 0.86rem;
  color: #C6CBCD;
}
.calc-breakdown li span:last-child { color: var(--paper); font-size: 0.82rem; }

.lead-form { display: none; margin-top: 18px; }
.lead-form.open { display: block; }
.lead-form input, .lead-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.16);
  background: #202426;
  color: var(--paper);
  font-size: 0.9rem;
  font-family: inherit;
}
.lead-form textarea { resize: vertical; min-height: 80px; }
.lead-success {
  display: none;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--paper);
  font-size: 0.85rem;
}
.lead-success.open { display: block; }

/* Locked calculator (partners only) --------------------------------------- */
.calc-locked {
  background: #202426;
  border: 1px solid rgba(255,255,255,0.09);
  padding: 62px 40px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.calc-locked .lock-icon {
  width: 34px;
  margin: 0 auto 20px;
  color: var(--oxid);   /* one of the few oxid moments on the page */
}
.calc-locked h3 { color: var(--paper); font-size: 1.4rem; margin-bottom: 12px; }
.calc-locked p { color: #9AA1A5; margin-bottom: 28px; font-size: 0.96rem; }
.calc-locked-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Login / signup modals ---------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--ink-r), 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 38px;
  color: var(--ink);
}
.modal-box h3 { margin-bottom: 6px; font-size: 1.28rem; }
.modal-box .modal-lede { color: var(--steel); font-size: 0.9rem; margin-bottom: 18px; }
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  color: var(--steel);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.modal-box form { margin-top: 18px; }
.modal-box input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--grain);
  background: var(--white);
  color: var(--ink);
  font-size: 0.9rem;
  font-family: inherit;
}
.modal-box input:focus { border-color: var(--steel); outline: none; }
.form-msg { min-height: 1.2em; font-size: 0.83rem; color: var(--oxid); margin-bottom: 6px; }
.form-msg.success { color: var(--ink); }
.modal-switch { font-size: 0.85rem; color: var(--steel); text-align: center; margin: 16px 0 0; }
.modal-switch a { color: var(--oxid); font-weight: 500; }
.modal-switch a:hover { text-decoration: underline; }

/* CTA band ---------------------------------------------------------------- */
.cta-band { background: var(--white); text-align: center; border-top: 1px solid var(--rule); }
.cta-band h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); margin-bottom: 12px; }
.cta-band p { color: var(--steel); max-width: 540px; margin: 0 auto 26px; }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--ink); color: #9AA1A5; padding: 68px 0 30px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 46px;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.site-footer .brand-lockup { height: 22px; margin-bottom: 18px; }
.footer-grid h4 {
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-grid a, .footer-grid p { font-size: 0.88rem; color: #9AA1A5; margin-bottom: 9px; display: block; }
.footer-grid a:hover { color: var(--paper); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

/* Utility -------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}