/* ============================================================================
   Case din panouri SIP by Moldo — design system  ·  direction: FUTURIST GLASS
   Adopted from the futurist prototype: near-black ground with teal signal,
   glass panels over a masked grid, Space Grotesk / Inter / JetBrains Mono.

   Two things carried over from the previous pass because they do the selling:
   1. Every price is monospace, tabular, right-aligned — a bill of quantities.
   2. The exclusions block is the one place a WARM colour appears. Everything
      else on the site is teal. That contrast is the honesty signal.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  --bg0:      #06080b;
  --bg1:      #0b0e13;
  --bg2:      #10141b;

  --glass:    rgba(255, 255, 255, .035);
  --glass2:   rgba(255, 255, 255, .06);
  --stroke:   rgba(255, 255, 255, .09);
  --stroke2:  rgba(255, 255, 255, .16);

  --txt:      #eceef2;
  --mut:      #969eab;
  --dim:      #5a626e;

  /* signal — teal. CTA, featured, focus, technical labels. */
  --cyan:     #46e6c0;
  --cyan2:    #14c79e;
  --cyan-dim: rgba(70, 230, 192, .55);
  --cyan-bg:  rgba(70, 230, 192, .10);

  /* flag — warm amber. EXCLUSIONS ONLY. The only non-teal accent on the site. */
  --flag:     #ff9d3d;
  --flag2:    #ff7a2f;
  --flag-bg:  rgba(255, 157, 61, .07);
  --flag-bd:  rgba(255, 157, 61, .38);

  --fd: 'Space Grotesk', 'Segoe UI', sans-serif;
  --fb: 'Inter', 'Segoe UI', sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --t-hero:  clamp(34px, 5.2vw, 62px);
  --t-h1:    clamp(30px, 4.4vw, 52px);
  --t-h2:    clamp(26px, 3.4vw, 40px);
  --t-h3:    clamp(17px, 1.1vw, 21px);
  --t-body:  16px;
  --t-sm:    14px;
  --t-xs:    13px;
  --t-mono:  11.5px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 140px;

  --rad: 14px;
  --rad-sm: 10px;
  --gut: clamp(20px, 4vw, 28px);
  --maxw: 1240px;
  --measure: 66ch;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------------- 2. RESET/BASE */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg0);
  color: var(--txt);
  font-family: var(--fb);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* atmosphere: two teal glows, one from each corner */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(70, 230, 192, .07), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(70, 230, 192, .06), transparent 60%);
}
/* faint drafting grid, masked so it fades out down the page */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}

main, header, footer, .sheet, .fabs { position: relative; z-index: 1; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--fd); font-weight: 700; line-height: 1.06;
  letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.012em; }

p { margin: 0 0 1em; max-width: min(var(--measure), 100%); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(70, 230, 192, .3); }

.grad {
  background: linear-gradient(92deg, #7df0d4 5%, #d9fff5 45%, #14c79e 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------------------------------------- 3. LAYOUT PRIMS */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.sec { padding-block: clamp(56px, 7vw, 92px); position: relative; }
.sec--tight { padding-block: clamp(40px, 5vw, 64px); }
.sec--attach { padding-top: 0; }

.sec__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-bottom: var(--s7); }
@media (min-width: 900px) {
  .sec__head { grid-template-columns: 168px minmax(0, 1fr); gap: var(--s6); }
}

/* eyebrow — mono, teal, with a glowing rule */
.sec__idx {
  font-family: var(--fm); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
  display: flex; align-items: center; gap: var(--s3); margin: 0;
  padding-top: .5em;
}
.sec__idx::before {
  content: ''; width: 26px; height: 1px; flex: none;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}
@media (min-width: 900px) { .sec__idx { align-items: flex-start; flex-direction: column; gap: var(--s3); } }

.sec__lede { max-width: min(var(--measure), 100%); color: var(--mut); margin-top: var(--s4); font-size: 17px; }

/* a composed band that lifts off the base — the dark-mode equivalent of an
   inverted section. Same class name as before, so no markup changed. */
.band-ink {
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));
  border-block: 1px solid var(--stroke);
}

/* --------------------------------------------------------- 4. MONO FURNITURE */

.mono {
  font-family: var(--fm); font-size: var(--t-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mut); font-weight: 400;
}

/* HUD measure line */
.dim {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--fm); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-dim);
  padding-block: var(--s3);
}
.dim::before, .dim::after {
  content: ''; flex: 1; height: 1px; min-width: 20px;
  background: linear-gradient(90deg, transparent, rgba(70,230,192,.35), transparent);
}
.dim__cap { white-space: normal; }
@media (min-width: 560px) { .dim__cap { white-space: nowrap; } }
.dim__t { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); flex: none; }

.tick { position: relative; }

/* ------------------------------------------------------------- 5. BUTTONS */

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--fd); font-weight: 600; font-size: 15px;
  padding: 14px 24px; border-radius: 11px; border: 1px solid var(--stroke2);
  background: var(--glass); color: var(--txt);
  text-decoration: none; cursor: pointer; position: relative;
  transition: transform .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.btn:hover { border-color: var(--cyan-dim); color: var(--cyan); box-shadow: 0 0 24px rgba(70,230,192,.18); }
.btn:active { transform: translateY(1px); }

.btn--signal {
  background: linear-gradient(135deg, var(--cyan), var(--cyan2));
  color: #06241c; border-color: transparent;
  box-shadow: 0 6px 28px rgba(20,199,158,.30);
}
.btn--signal:hover {
  color: #06241c; transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(20,199,158,.45); border-color: transparent;
}

.btn--ink { background: rgba(70,230,192,.12); border-color: rgba(70,230,192,.5); color: var(--cyan); }
.btn--ink:hover { background: rgba(70,230,192,.2); }

.btn__ar { transition: transform .28s var(--ease); }
.btn:hover .btn__ar { transform: translateX(4px); }

/* ------------------------------------------------------------- 6. HEADER */

.skip {
  position: absolute; left: var(--s4); top: -60px; z-index: 200;
  background: var(--cyan); color: #06241c; padding: 10px 16px;
  font-family: var(--fm); font-size: var(--t-sm); text-decoration: none; border-radius: var(--rad-sm);
  transition: top .2s var(--ease);
}
.skip:focus { top: var(--s4); }

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(6, 8, 11, .72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--stroke);
}
.hdr__in { display: flex; align-items: center; gap: var(--s5); min-height: 68px; flex-wrap: nowrap; }

.logo {
  font-family: var(--fd); font-weight: 700; font-size: 21px; letter-spacing: .05em;
  text-decoration: none; display: flex; align-items: center; gap: 2px; flex: none;
  line-height: 1; min-width: 0;
}
.logo b { font-weight: 700; }
.logo i {
  font-style: normal; font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), #aef5e2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo::after {
  content: ''; width: 7px; height: 7px; border-radius: 2px; margin-left: 7px;
  background: linear-gradient(135deg, var(--cyan), var(--cyan2));
  box-shadow: 0 0 14px rgba(70,230,192,.6); align-self: center; flex: none;
}

.nav { display: none; gap: 2px; margin-left: auto; }
@media (min-width: 1120px) { .nav { display: flex; } }
.nav a {
  font-family: var(--fd); font-weight: 500; font-size: 14.5px;
  text-decoration: none; padding: 9px 14px; border-radius: 9px;
  color: var(--mut); transition: .18s; white-space: nowrap;
}
.nav a:hover { color: var(--txt); background: var(--glass2); }
.nav a[aria-current='page'] {
  color: #0a0c10; background: linear-gradient(135deg, var(--cyan), var(--cyan2));
  box-shadow: 0 0 18px rgba(70,230,192,.3);
}

.hdr__act { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
@media (min-width: 1120px) { .hdr__act { margin-left: 0; } }

.hdr__tel {
  font-family: var(--fm); font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(70,230,192,.45); color: var(--cyan);
  padding: 9px 14px; border-radius: 9px; white-space: nowrap;
  text-shadow: 0 0 14px rgba(70,230,192,.5); transition: .18s; display: none;
}
@media (min-width: 680px) { .hdr__tel { display: block; } }
.hdr__tel:hover { background: rgba(70,230,192,.1); box-shadow: 0 0 22px rgba(70,230,192,.25); }

.hdr .btn { padding: 10px 18px; font-size: 14px; }
.hdr .btn--quote { display: none; }
@media (min-width: 860px) { .hdr .btn--quote { display: inline-flex; } }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 42px; padding: 0 11px; cursor: pointer; flex: none;
  background: var(--glass2); border: 1px solid var(--stroke2); border-radius: 9px;
}
@media (min-width: 1120px) { .burger { display: none; } }
.burger span { height: 1.5px; background: var(--txt); transition: transform .28s var(--ease), opacity .2s; }
.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); }

.sheet {
  position: fixed; inset: 68px 0 0; z-index: 89;
  background: rgba(6, 8, 11, .97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: var(--s6) var(--gut); display: flex; flex-direction: column; gap: var(--s2);
  transform: translateY(-8px); opacity: 0; pointer-events: none; overflow-y: auto;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.sheet[data-open='true'] { opacity: 1; transform: none; pointer-events: auto; }
.sheet a {
  font-family: var(--fd); font-size: clamp(21px, 5.4vw, 28px); font-weight: 600;
  letter-spacing: -.02em; text-decoration: none;
  padding: var(--s3) 0; border-bottom: 1px solid var(--stroke);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
}
.sheet a:hover { color: var(--cyan); }
.sheet a span { font-family: var(--fm); font-size: var(--t-mono); color: var(--cyan-dim); letter-spacing: .18em; }
.sheet__foot { margin-top: auto; padding-top: var(--s6); display: grid; gap: var(--s3); }
.sheet__foot a { font-size: 15px; border-bottom: 0; justify-content: center; }

/* ------------------------------------------------------------- 7. HERO */

.hero { padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px); position: relative; }
.hero__grid { display: grid; gap: var(--s7); }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.02fr .98fr; align-items: center; gap: var(--s8); } }

.hero__kicker {
  font-family: var(--fm); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
  display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5);
}
.hero__kicker::before { content: ''; width: 26px; height: 1px; flex: none; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.hero h1 { font-size: var(--t-hero); }
.hero h1 em {
  font-style: normal; display: block; font-weight: 700;
  background: linear-gradient(92deg, #7df0d4 5%, #d9fff5 45%, #14c79e 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { margin-top: var(--s5); color: var(--mut); max-width: min(48ch, 100%); font-size: 17px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__fig { position: relative; }

/* glass image frame with HUD tag */
.figframe {
  position: relative; border: 1px solid var(--stroke); border-radius: 18px;
  overflow: hidden; background: linear-gradient(180deg, #0a0e15, #0d1118);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.figframe img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.figframe--tall img { aspect-ratio: 4 / 3; }
.figframe--sq img { aspect-ratio: 1 / 1; }

.render-tag {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(10, 13, 18, .78); backdrop-filter: blur(6px);
  border: 1px solid var(--stroke2); border-radius: 8px;
  color: var(--cyan); font-family: var(--fm); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px;
  display: flex; align-items: center; gap: 8px;
}
.render-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  animation: blink 1.8s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --------------------------------------------------------- 8. GLASS PANEL */

.lane, .mcard, .step, .trust__i, .acc details, .channels a, .channels div,
.fencerow__fig, .calc__panel {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--rad);
  backdrop-filter: blur(8px);
}

.split { display: grid; gap: var(--s5); }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.split > * { min-width: 0; }

.lane {
  display: flex; flex-direction: column; text-decoration: none;
  overflow: hidden; position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lane::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--rad); padding: 1px;
  background: linear-gradient(135deg, rgba(70,230,192,.5), transparent 35%, transparent 65%, rgba(70,230,192,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; z-index: 2;
}
.lane:hover { transform: translateY(-5px); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
.lane:hover::before { opacity: 1; }
.lane__media { position: relative; overflow: hidden; background: var(--bg2); }
.lane__media img, .lane__media .swatch { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s var(--ease); }
.lane:hover .lane__media img { transform: scale(1.035); }
.lane__body { padding: var(--s5) var(--s6) var(--s6); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.lane__body h3 { font-size: 22px; }
.lane__from { font-family: var(--fm); font-size: 13px; font-weight: 500; color: var(--cyan); letter-spacing: .04em; }
.lane__from small { display: block; font-size: 10.5px; color: var(--mut); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
.lane__go {
  margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--stroke);
  font-family: var(--fm); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut);
  display: flex; justify-content: space-between;
}
.lane:hover .lane__go { color: var(--cyan); }
.lane__go span:last-child { transition: transform .28s var(--ease); }
.lane:hover .lane__go span:last-child { transform: translateX(4px); }

/* ------------------------------------------------------ 9. TRUST POINTS */

.trust { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust > * { min-width: 0; }
.trust__i { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); position: relative; overflow: hidden; }
.trust__i::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.trust__n { font-family: var(--fm); font-size: 11px; color: var(--cyan); letter-spacing: .18em; margin-bottom: var(--s2); }
.trust__i h3 { font-size: 15.5px; }
.trust__i p { font-size: 13.5px; color: var(--mut); margin: 0; }

/* -------------------------------------------------- 10. PRICE — THE CORE */

.fig-price {
  font-family: var(--fm); font-variant-numeric: tabular-nums;
  font-weight: 600; white-space: nowrap; color: var(--txt);
}
.fig-price .q { font-size: .68em; color: var(--mut); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; margin-right: .5em; }
.fig-price .cur { font-size: .78em; color: var(--mut); margin-left: .15em; font-weight: 400; }

/* --- price matrix --- */
.matrix-scroll {
  overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain;
  border: 1px solid var(--stroke); border-radius: var(--rad);
  background: var(--glass); backdrop-filter: blur(8px);
}
.matrix { width: 100%; border-collapse: collapse; min-width: 780px; }
.matrix caption { text-align: left; padding: var(--s4) var(--s5) 0; color: var(--mut); font-size: 13px; caption-side: top; }
.matrix th, .matrix td { text-align: right; padding: var(--s4) var(--s5); border-bottom: 1px dashed var(--stroke); vertical-align: baseline; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix thead th {
  font-family: var(--fm); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mut); font-weight: 400;
  border-bottom: 1px solid var(--stroke2); padding-top: var(--s5);
}
.matrix thead th b { display: block; color: var(--cyan); font-weight: 500; letter-spacing: .12em; margin-bottom: 5px; }
.matrix tbody th { font-family: var(--fd); font-weight: 600; font-size: 19px; }
.matrix tbody th small { display: block; font-family: var(--fm); font-size: 10.5px; font-weight: 400; color: var(--mut); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.matrix tbody tr { transition: background .2s var(--ease); }
.matrix tbody tr:hover { background: rgba(255,255,255,.025); }
.matrix tr[data-featured] { background: rgba(70,230,192,.055); }
.matrix tr[data-featured]:hover { background: rgba(70,230,192,.085); }
.matrix tr[data-featured] .fig-price { color: var(--cyan); text-shadow: 0 0 16px rgba(70,230,192,.35); }
.matrix .fig-price { font-size: 14px; }
.matrix .tagged { position: relative; padding-top: 34px; }
.matrix .tagged::before {
  content: 'CEL MAI CERUT'; position: absolute; top: var(--s3); left: var(--s5);
  font-family: var(--fm); font-size: 9px; font-weight: 600; letter-spacing: .2em;
  background: linear-gradient(90deg, var(--cyan), var(--cyan2));
  color: #06241c; padding: 3px 8px; border-radius: 4px;
}

/* --- price ladder --- */
.ladder { display: flex; flex-direction: column; border-top: 1px solid var(--stroke); }
.ladder__r {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s5);
  align-items: baseline; padding: var(--s4) 0;
  border-bottom: 1px dashed var(--stroke); position: relative;
}
.ladder__r > * { min-width: 0; }
.ladder__r::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), rgba(70,230,192,0));
  width: var(--fill, 0%); transition: width 1.1s var(--ease);
}
.ladder__lbl { display: flex; flex-direction: column; gap: 4px; }
.ladder__lbl b { font-family: var(--fd); font-weight: 600; font-size: 16px; }
.ladder__lbl span { font-family: var(--fm); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.ladder .fig-price { font-size: clamp(16px, 1.4vw, 20px); color: var(--cyan); text-shadow: 0 0 18px rgba(70,230,192,.3); }

/* -------------------------------------------------- 11. EXCLUSIONS STAMP */

/* The only warm colour on the site. Never collapsible, never in an accordion. */
.excl {
  border: 1px solid var(--flag-bd); border-radius: var(--rad);
  background: var(--flag-bg); padding: var(--s5);
  display: grid; gap: var(--s4); position: relative; overflow: hidden;
  backdrop-filter: blur(8px);
}
.excl::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--flag), transparent);
}
@media (min-width: 780px) { .excl { grid-template-columns: auto minmax(0, 1fr); gap: var(--s6); align-items: start; padding: var(--s6); } }
.excl > * { min-width: 0; }
.excl__stamp {
  font-family: var(--fm); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--flag);
  border: 1.5px solid var(--flag-bd); padding: 9px 14px; border-radius: 8px;
  justify-self: start; white-space: nowrap; line-height: 1;
  text-shadow: 0 0 14px rgba(255,157,61,.4);
}
@media (min-width: 780px) { .excl__stamp { transform: rotate(-3deg); margin-top: 4px; } }
.excl h3 { color: var(--flag); font-size: 17px; margin-bottom: var(--s3); }
.excl p { font-size: var(--t-sm); color: var(--mut); }
.excl ul { margin: 0 0 var(--s3); padding-left: 1.1em; font-size: var(--t-sm); color: var(--mut); }
.excl li { margin-bottom: 6px; }
.excl li b, .excl p b { color: var(--txt); font-weight: 600; }
.excl a { color: var(--flag); }

/* ------------------------------------------------------- 12. STAGE STEPPER */

.stepper { display: grid; gap: var(--s4); counter-reset: st; }
@media (min-width: 700px) { .stepper { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .stepper { grid-template-columns: repeat(4, 1fr); } }
.stepper > * { min-width: 0; }
.step {
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2);
  position: relative; overflow: hidden; counter-increment: st;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.step:hover { border-color: rgba(70,230,192,.4); transform: translateY(-3px); }
.step::before {
  content: '0' counter(st); font-family: var(--fm); font-size: 38px; font-weight: 600;
  position: absolute; top: 8px; right: 16px; color: rgba(255,255,255,.05); line-height: 1;
}
.step h3 { font-size: 17px; margin-top: var(--s2); }
.step p { font-size: 13.5px; color: var(--mut); margin: 0; }
.step__meta {
  margin-top: auto; padding-top: var(--s4); border-top: 1px dashed var(--stroke2);
  font-family: var(--fm); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
}
.step[data-cumulative]::after {
  content: '+ tot ce e mai sus'; position: absolute; top: var(--s5); left: var(--s5);
  font-family: var(--fm); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan-dim);
}
.step[data-cumulative] h3 { margin-top: var(--s5); }

/* ------------------------------------------------------- 13. MODEL CARDS */

.models { display: grid; gap: var(--s5); }
@media (min-width: 720px) { .models { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.models > * { min-width: 0; }

.mcard {
  text-decoration: none; display: flex; flex-direction: column; overflow: hidden;
  position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mcard:hover { transform: translateY(-5px); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
.mcard[data-featured] {
  border-color: rgba(70,230,192,.55);
  box-shadow: 0 0 0 1px rgba(70,230,192,.2), 0 14px 50px rgba(20,199,158,.1);
}
.mcard[data-featured]::before {
  content: 'CEL MAI CERUT'; display: block; z-index: 2;
  font-family: var(--fm); font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; text-align: center; padding: 7px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan2)); color: #06241c;
}
.mcard__media { position: relative; background: var(--bg2); overflow: hidden; }
.mcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease); }
.mcard:hover .mcard__media img { transform: scale(1.04); }
.mcard__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.mcard__body h3 { font-size: 23px; }
.mcard__spec { font-family: var(--fm); font-size: 11.5px; letter-spacing: .06em; color: var(--mut); }
.mcard__price {
  padding-top: var(--s4); margin-top: auto; border-top: 1px solid var(--stroke);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
}
.mcard__price .fig-price { font-size: 17px; color: var(--cyan); text-shadow: 0 0 16px rgba(70,230,192,.3); }
.mcard__price .mono { color: var(--cyan-dim); }

/* ------------------------------------------------------- 14. FENCE SWATCH */

/* No fence photography exists (content model §3.4). CSS stand-ins that still
   communicate the texture difference. Swap for real images when supplied. */
.swatch { aspect-ratio: 16 / 9; background: #6d7178; position: relative; overflow: hidden; }
.swatch::after {
  content: 'IMAGINE LIPSĂ — PLACEHOLDER'; position: absolute; inset: auto 0 0 0;
  background: rgba(6,8,11,.82); color: var(--flag); backdrop-filter: blur(4px);
  font-family: var(--fm); font-size: 9.5px; letter-spacing: .18em; padding: 6px 12px;
}
.swatch[data-tex='linear'] { background-image: repeating-linear-gradient(180deg, #6d7178 0 9px, #5e6268 9px 11px, #797d84 11px 13px); }
.swatch[data-tex='piatra'] {
  background-color: #686c73;
  background-image:
    radial-gradient(ellipse 34px 20px at 18% 24%, #595d63 0 48%, transparent 50%),
    radial-gradient(ellipse 40px 22px at 62% 40%, #7a7e85 0 46%, transparent 48%),
    radial-gradient(ellipse 30px 26px at 84% 70%, #5d6167 0 50%, transparent 52%),
    radial-gradient(ellipse 46px 18px at 34% 78%, #767a81 0 44%, transparent 46%),
    radial-gradient(ellipse 26px 24px at 8% 62%, #6d7178 0 50%, transparent 52%);
}
.swatch[data-tex='lemn'] {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(0,0,0,.22) 34px 36px),
    repeating-linear-gradient(92deg, #6a6e75 0 3px, #71757c 3px 5px, #63676d 5px 9px);
}
.swatch[data-tex='neted'] { background-image: linear-gradient(158deg, #787c83 0%, #63676d 52%, #6f737a 100%); }

.fence { display: grid; gap: var(--s7); }
.fencerow { display: grid; gap: var(--s5); scroll-margin-top: 100px; }
@media (min-width: 900px) { .fencerow { grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
  .fencerow:nth-child(even) .fencerow__fig { order: 2; } }
.fencerow > * { min-width: 0; }
.fencerow__fig { overflow: hidden; }
.fencerow__code { font-family: var(--fm); font-size: 11px; color: var(--cyan); letter-spacing: .18em; margin-bottom: var(--s2); }
.fencerow h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: var(--s3); }
.fencerow__prices { display: flex; flex-direction: column; border-top: 1px solid var(--stroke); margin: var(--s5) 0; }
.fencerow__prices div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px dashed var(--stroke); }
.fencerow__prices dt { font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.fencerow__prices dd { color: var(--cyan); }

/* ------------------------------------------------------------ 15. SPECS */

.specs { display: flex; flex-direction: column; border-top: 1px solid var(--stroke); margin: 0; }
.specs > div { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); padding: var(--s3) 0; align-items: baseline; border-bottom: 1px dashed var(--stroke); }
.specs dt { font-family: var(--fm); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 0; }
.specs dd { margin: 0; font-family: var(--fm); font-size: 13.5px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); font-size: var(--t-sm); color: var(--mut); }
.checks li::before { content: '▸'; font-family: var(--fm); color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }

/* ------------------------------------------------------- 16. ACCORDION */

.acc { display: flex; flex-direction: column; gap: var(--s3); }
.acc details { overflow: hidden; transition: border-color .2s var(--ease); }
.acc details[open] { border-color: rgba(70,230,192,.35); }
.acc summary {
  cursor: pointer; list-style: none; padding: var(--s4) var(--s7) var(--s4) var(--s5);
  font-family: var(--fd); font-weight: 600; font-size: 16px; position: relative;
  transition: color .2s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+'; position: absolute; right: var(--s5); top: 50%; transform: translateY(-50%);
  font-family: var(--fm); font-size: 20px; font-weight: 400; color: var(--cyan);
  transition: transform .3s var(--ease);
}
.acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acc summary:hover { color: var(--cyan); }
.acc__body { padding: 0 var(--s5) var(--s5); color: var(--mut); font-size: var(--t-sm); }

/* ------------------------------------------------------------- 17. FORM */

.formsec { display: grid; gap: var(--s7); }
@media (min-width: 960px) { .formsec { grid-template-columns: .8fr 1.2fr; gap: var(--s8); } }
.formsec > * { min-width: 0; }

.channels { display: flex; flex-direction: column; gap: var(--s3); }
.channels a, .channels div {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s4);
  padding: var(--s4); text-decoration: none; align-items: center;
  transition: border-color .2s var(--ease);
}
.channels a:hover { border-color: rgba(70,230,192,.4); }
.channels .k {
  font-family: var(--fm); font-size: 11px; color: var(--cyan);
  letter-spacing: .1em; text-transform: uppercase;
  display: grid; place-items: center; height: 42px; border-radius: var(--rad-sm);
  background: rgba(70,230,192,.1); border: 1px solid rgba(70,230,192,.35);
}
.channels .v { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.channels .v b { font-family: var(--fd); font-weight: 600; font-size: 15px; }
.channels .v span { font-size: 12.5px; color: var(--mut); }
.channels a:hover .v b { color: var(--cyan); }

.form {
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 18px;
  padding: var(--s6); backdrop-filter: blur(8px);
  position: relative; overflow: hidden; display: grid; gap: var(--s4);
}
.form::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan2), transparent);
}
.form__row { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--fm); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mut);
}
.field label .req { color: var(--cyan); }
.field input, .field select, .field textarea {
  font-family: var(--fb); font-size: 15px; padding: 13px 15px;
  border: 1px solid var(--stroke2); border-radius: var(--rad-sm);
  background: rgba(0, 0, 0, .3); color: var(--txt); width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field select option { background: var(--bg2); color: var(--txt); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan-dim); box-shadow: 0 0 0 3px rgba(70,230,192,.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.consent input { accent-color: var(--cyan); width: 17px; height: 17px; margin-top: 3px; }
.consent label { font-size: 12.5px; color: var(--mut); line-height: 1.5; }
.consent a { color: var(--cyan); }


/* ------------------------------------------------------- 18. BREADCRUMB */

.crumb {
  font-family: var(--fm); font-size: var(--t-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mut); padding-block: var(--s5) 0;
  display: flex; gap: var(--s3); flex-wrap: wrap;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--cyan); }
.crumb [aria-current] { color: var(--cyan); }

/* ------------------------------------------------------------ 19. FOOTER */

.ftr {
  border-top: 1px solid var(--stroke); margin-top: var(--s9);
  background: rgba(0, 0, 0, .28); padding-block: var(--s8) var(--s6);
}
.ftr__grid { display: grid; gap: var(--s7); }
@media (min-width: 760px) { .ftr__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .ftr__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.ftr h2 {
  font-family: var(--fm); font-size: 10.5px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: var(--s4);
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ftr a { text-decoration: none; font-size: var(--t-sm); color: var(--mut); }
.ftr a:hover { color: var(--cyan); }
.ftr .logo { margin-bottom: var(--s4); }
.ftr__legalnote { font-size: 12.5px; color: var(--dim); margin-top: var(--s4); max-width: 36ch; }
.ftr__bot {
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--stroke);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  font-family: var(--fm); font-size: 11px; color: var(--dim); letter-spacing: .06em;
}
.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--stroke2); border-radius: 8px; padding: 6px 11px;
  font-family: var(--fm); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mut); text-decoration: none;
}
.badge:hover { border-color: var(--cyan-dim); color: var(--cyan); }

/* --------------------------------------------------- 20. FLOATING ACTIONS */

.fabs {
  position: fixed; right: 18px; bottom: 18px; z-index: 88;
  display: flex; flex-direction: column; gap: 12px;
}
.fab {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  border: 1px solid var(--stroke2);
  background: rgba(10, 13, 18, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  position: relative;
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab svg { width: 24px; height: 24px; }

.fab--wa { color: #25D366; border-color: rgba(37, 211, 102, .45); }
.fab--wa:hover { box-shadow: 0 0 28px rgba(37, 211, 102, .35); border-color: #25D366; }

.fab--tel {
  color: #06241c; border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--cyan2));
  box-shadow: 0 8px 28px rgba(20, 199, 158, .38);
}
.fab--tel:hover { box-shadow: 0 12px 38px rgba(20, 199, 158, .55); }
/* attention pulse on the call button only — one pulsing thing, not two */
.fab--tel::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--cyan); animation: fabpulse 2.6s var(--ease) infinite;
}
@keyframes fabpulse {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.fab__lbl {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(10, 13, 18, .92); border: 1px solid var(--stroke2); color: var(--txt);
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.fab:hover .fab__lbl { opacity: 1; }
@media (max-width: 899px) { .fab__lbl { display: none; } }

/* --------------------------------------------------------- 21. UTILITIES */

.stack { display: grid; gap: var(--s5); }
.stack--lg { gap: var(--s7); }
.muted { color: var(--mut); }
.center { text-align: center; }
.hr { height: 1px; background: var(--stroke); border: 0; margin-block: var(--s7); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.hero__grid > *, .sec__head > * { min-width: 0; }

/* placeholder marker — everything faked for the frame carries this.
   ALT+P toggles .is-audit to make them all obvious before a client review. */
.ph { border-bottom: 1px dashed rgba(255, 157, 61, .5); }
body.is-audit .ph { background: rgba(255, 157, 61, .16); outline: 1px dashed var(--flag); }

/* ------------------------------------------------------------ 22. MOTION */

[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s var(--ease);
  transition-delay: var(--d, 0s);
}

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

/* ======================================================== 23. CALCULATOR */

.calc { display: grid; gap: var(--s6); }
@media (min-width: 1040px) { .calc { grid-template-columns: 1.25fr .75fr; gap: var(--s7); align-items: start; } }
.calc > * { min-width: 0; }

.calc__panel { padding: var(--s5); display: grid; gap: var(--s6); border: 0; }
@media (min-width: 700px) { .calc__panel { padding: var(--s6); } }

.calc__group { display: grid; gap: var(--s4); border: 0; padding: 0; margin: 0; min-width: 0; }
.calc__legend {
  font-family: var(--fm); font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cyan); display: flex; align-items: center; gap: var(--s3);
  padding: 0; margin-bottom: var(--s2); grid-column: 1 / -1;
}
.calc__legend::before { content: ''; width: 20px; height: 1px; flex: none; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* radio / checkbox cards */
.opts { display: grid; gap: var(--s3); }
/* auto-fit against the PANEL width — the calc panel is much narrower than the
   viewport, so viewport breakpoints squeezed these cards to ~160px. */
@media (min-width: 480px) {
  .opts--2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .opts--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .opts--4 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
}
.opts > * { min-width: 0; }

.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__box {
  display: flex; flex-direction: column; gap: 5px; cursor: pointer; height: 100%;
  padding: var(--s4); border: 1px solid var(--stroke2); border-radius: var(--rad-sm);
  background: rgba(0, 0, 0, .25); transition: .18s var(--ease);
}
.opt__box:hover { border-color: var(--cyan-dim); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--cyan); outline-offset: 2px; }
.opt input:checked + .opt__box {
  border-color: var(--cyan); background: rgba(70, 230, 192, .1);
  box-shadow: 0 0 22px rgba(70, 230, 192, .16);
}
.opt__t { font-family: var(--fd); font-weight: 600; font-size: 15px; }
.opt__s { font-family: var(--fm); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.opt__p { font-family: var(--fm); font-size: 13px; font-weight: 600; color: var(--cyan); margin-top: auto; padding-top: var(--s2); }
.opt input:checked + .opt__box .opt__s { color: var(--txt); }
/* the custom-project card is the one warm thing in the picker */
.opt--custom .opt__box { border-style: dashed; }
.opt--custom .opt__p { color: var(--flag); }
.opt--custom input:checked + .opt__box {
  border-color: var(--flag); border-style: solid;
  background: rgba(255, 157, 61, .1); box-shadow: 0 0 22px rgba(255, 157, 61, .16);
}

/* numeric fields */
.numrow { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .numrow { grid-template-columns: 1fr 1fr; } }
.numrow > * { min-width: 0; }
.numfield { display: grid; gap: 7px; }
.numfield label { font-family: var(--fm); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.numfield .wrapin { position: relative; display: flex; align-items: center; }
.numfield input {
  font-family: var(--fm); font-variant-numeric: tabular-nums; font-size: 16px;
  padding: 13px 62px 13px 15px; width: 100%;
  border: 1px solid var(--stroke2); border-radius: var(--rad-sm);
  background: rgba(0, 0, 0, .3); color: var(--txt); transition: .18s;
}
.numfield input:focus { outline: none; border-color: var(--cyan-dim); box-shadow: 0 0 0 3px rgba(70,230,192,.12); }
.numfield .unit {
  position: absolute; right: 14px; font-family: var(--fm); font-size: 12px;
  color: var(--mut); pointer-events: none; letter-spacing: .08em;
}
.numfield .hint { font-family: var(--fm); font-size: 10.5px; color: var(--dim); letter-spacing: .04em; }
.numfield input[readonly] { color: var(--mut); background: rgba(0,0,0,.15); }

/* range slider */
.rangefield { display: grid; gap: var(--s3); }
.rangefield .rlabel { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.rangefield .rlabel b { font-family: var(--fm); font-size: 14px; font-weight: 600; color: var(--cyan); }
.rangefield input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  background: var(--stroke2); border-radius: 3px; outline: none;
}
.rangefield input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--cyan2)); cursor: pointer;
  box-shadow: 0 0 16px rgba(70,230,192,.5); border: 0;
}
.rangefield input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--cyan), var(--cyan2)); cursor: pointer;
  box-shadow: 0 0 16px rgba(70,230,192,.5);
}

/* --- the running total --- */
.tally {
  border: 1px solid rgba(70, 230, 192, .3); border-radius: 18px;
  background: linear-gradient(180deg, rgba(70,230,192,.07), rgba(70,230,192,.02));
  backdrop-filter: blur(10px); padding: var(--s5); position: relative; overflow: hidden;
}
@media (min-width: 1040px) { .tally { position: sticky; top: 90px; } }
.tally::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan2), transparent);
}
.tally h2 { font-size: 17px; margin-bottom: var(--s4); }
.tally__lines { display: flex; flex-direction: column; border-top: 1px solid var(--stroke); margin-bottom: var(--s5); }
.tally__l {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px dashed var(--stroke); align-items: baseline;
}
.tally__l > span:first-child { font-size: 13px; color: var(--mut); min-width: 0; }
.tally__l > span:first-child b { display: block; color: var(--txt); font-weight: 600; font-size: 14.5px; }
.tally__l[hidden] { display: none; }
.tally__l .fig-price { font-size: 14px; }

.tally__sum {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--cyan-dim); flex-wrap: wrap;
}
/* :not() is load-bearing — a bare `.tally__sum > span` outranks `.tally__total`
   (0,1,1 vs 0,1,0) and silently rendered the total at label size. */
.tally__sum > span:not(.tally__total) { font-family: var(--fm); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); }
.tally__total {
  font-family: var(--fm); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: clamp(26px, 3.2vw, 34px); color: var(--cyan);
  text-shadow: 0 0 26px rgba(70, 230, 192, .45); white-space: nowrap; line-height: 1.1;
}
.tally__eur { font-size: .5em; color: var(--mut); font-weight: 400; margin-left: .2em; }
.tally__note { font-family: var(--fm); font-size: 10.5px; letter-spacing: .04em; color: var(--dim); margin-top: var(--s4); line-height: 1.7; }
.tally .btn { width: 100%; justify-content: center; margin-top: var(--s5); }

/* custom-project state: the calculator refuses to price it, on purpose */
.tally[data-mode='custom'] {
  border-color: var(--flag-bd);
  background: linear-gradient(180deg, rgba(255,157,61,.07), rgba(255,157,61,.02));
}
.tally[data-mode='custom']::after { background: linear-gradient(90deg, var(--flag), var(--flag2), transparent); }
.tally[data-mode='custom'] .tally__total {
  color: var(--flag); text-shadow: 0 0 26px rgba(255,157,61,.4);
  font-size: clamp(17px, 1.8vw, 21px); white-space: normal;
}
.tally[data-mode='custom'] .btn--signal {
  background: linear-gradient(135deg, var(--flag), var(--flag2)); color: #2a1200;
  box-shadow: 0 6px 28px rgba(255,122,47,.3);
}
.tally[data-mode='custom'] .tally__sum { border-top-color: var(--flag-bd); }

/* which blocks show in which mode */
.calc__custom { display: none; }
.calc[data-mode='custom'] .calc__custom { display: grid; gap: var(--s4); }
.calc[data-mode='custom'] .calc__stages { display: none; }

/* --- checkbox options need a visible box; radios do not (the card is the state) */
.opt--check .opt__box { padding-left: 52px; position: relative; }
.opt--check .opt__box::before {
  content: ''; position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--stroke2); background: rgba(0, 0, 0, .35);
  transition: .18s var(--ease);
}
.opt--check .opt__box::after {
  content: ''; position: absolute; left: 23px; top: 50%;
  width: 5px; height: 10px; border: solid #06241c; border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg) scale(.4); opacity: 0;
  transition: .18s var(--ease);
}
.opt--check input:checked + .opt__box::before { background: var(--cyan); border-color: var(--cyan); }
.opt--check input:checked + .opt__box::after { opacity: 1; transform: translateY(-65%) rotate(45deg) scale(1); }

/* fence controls read as inactive until the gard is actually added */
.calc__fence { display: grid; gap: var(--s5); transition: opacity .22s var(--ease); }
.calc:not([data-fence="on"]) .calc__fence { opacity: .42; }

/* the custom-project card is a different KIND of choice, not a fourth model —
   give it its own full-width row so 3-up + 1 orphan reads as intent */
.opt--custom { grid-column: 1 / -1; }
.opt--custom .opt__box { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.opt--custom .opt__p { margin-top: 0; padding-top: 0; margin-left: auto; }

/* four equal texture choices read better 2×2 than 3 + 1 */
.opts--tex { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.tally__eur { font-size: .62em; }


/* ---------------------------------------------- 21. LIGHT THEME + TOGGLE */

.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; cursor: pointer;
  background: var(--glass2); border: 1px solid var(--stroke); border-radius: 9px;
  color: var(--txt); font-size: 16px; line-height: 1;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.theme-btn:hover { border-color: var(--cyan-dim); color: var(--cyan); background: var(--cyan-bg); }

html[data-theme='light'] {
  --bg0: #eef1f3;
  --bg1: #f6f8f9;
  --bg2: #ffffff;

  --glass:   rgba(255, 255, 255, .70);
  --glass2:  rgba(8, 40, 50, .05);
  --stroke:  rgba(8, 40, 50, .12);
  --stroke2: rgba(8, 40, 50, .20);

  --txt: #0e1a20;
  --mut: #4d5b64;
  --dim: #7b8891;

  --cyan:     #078e72;
  --cyan2:    #056b56;
  --cyan-dim: rgba(7, 142, 114, .5);
  --cyan-bg:  rgba(7, 142, 114, .08);

  --flag:    #c2610a;
  --flag2:   #a34f05;
  --flag-bg: rgba(194, 97, 10, .07);
  --flag-bd: rgba(194, 97, 10, .35);
}
html[data-theme='light'] body::before {
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(7,142,114,.10), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(7,142,114,.07), transparent 60%);
}
html[data-theme='light'] body::after {
  background-image:
    linear-gradient(rgba(8,40,50,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,40,50,.05) 1px, transparent 1px);
}
html[data-theme='light'] ::selection { background: rgba(7,142,114,.22); }
html[data-theme='light'] .grad,
html[data-theme='light'] .hero h1 em {
  background: linear-gradient(92deg, #0ab390 5%, #067a62 50%, #04503f 95%);
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme='light'] .band-ink {
  background: linear-gradient(180deg, rgba(8,40,50,.035), rgba(8,40,50,.012));
}
html[data-theme='light'] .hdr { background: rgba(246,248,249,.80); }
html[data-theme='light'] .sheet { background: rgba(246,248,249,.98); }
html[data-theme='light'] .nav a[aria-current='page'] { color: #fff; box-shadow: 0 4px 16px rgba(7,142,114,.32); }
html[data-theme='light'] .btn--signal,
html[data-theme='light'] .btn--signal:hover { color: #fff; }
html[data-theme='light'] .btn--signal { box-shadow: 0 6px 22px rgba(7,142,114,.28); }
html[data-theme='light'] .btn--signal:hover { box-shadow: 0 10px 30px rgba(7,142,114,.4); }
html[data-theme='light'] .btn:hover { box-shadow: 0 0 20px rgba(7,142,114,.14); }
html[data-theme='light'] .skip { color: #fff; }
html[data-theme='light'] .hdr__tel { border-color: rgba(7,142,114,.45); text-shadow: none; }
html[data-theme='light'] .hdr__tel:hover { background: rgba(7,142,114,.08); box-shadow: none; }
html[data-theme='light'] .logo i { background: linear-gradient(90deg, #067a62, #0ab390); -webkit-background-clip: text; background-clip: text; }
html[data-theme='light'] .logo::after { box-shadow: 0 0 12px rgba(7,142,114,.45); }
html[data-theme='light'] .figframe {
  background: linear-gradient(180deg, #ffffff, #f2f5f6);
  box-shadow: 0 20px 54px rgba(15,35,45,.14);
}
html[data-theme='light'] .render-tag { background: rgba(255,255,255,.86); }
html[data-theme='light'] .lane:hover,
html[data-theme='light'] .mcard:hover { box-shadow: 0 20px 50px rgba(15,35,45,.14); }
html[data-theme='light'] .lane::before {
  background: linear-gradient(135deg, rgba(7,142,114,.5), transparent 35%, transparent 65%, rgba(7,142,114,.45));
}
html[data-theme='light'] .step:hover { border-color: rgba(7,142,114,.4); }
html[data-theme='light'] .step::before { color: rgba(8,40,50,.07); }
html[data-theme='light'] .trust__i::after { background: linear-gradient(90deg, var(--cyan), transparent); }
html[data-theme='light'] .matrix tbody tr:hover { background: rgba(8,40,50,.03); }
html[data-theme='light'] .matrix tr[data-featured] { background: rgba(7,142,114,.06); }
html[data-theme='light'] .matrix tr[data-featured]:hover { background: rgba(7,142,114,.09); }
html[data-theme='light'] .matrix tr[data-featured] .fig-price,
html[data-theme='light'] .ladder .fig-price,
html[data-theme='light'] .mcard__price .fig-price { text-shadow: none; }
html[data-theme='light'] .matrix .tagged::before,
html[data-theme='light'] .mcard[data-featured]::before { color: #fff; }
html[data-theme='light'] .mcard[data-featured] {
  border-color: rgba(7,142,114,.5);
  box-shadow: 0 0 0 1px rgba(7,142,114,.18), 0 14px 40px rgba(7,142,114,.12);
}
html[data-theme='light'] .ladder__r::after { background: linear-gradient(90deg, var(--cyan), rgba(7,142,114,0)); }
html[data-theme='light'] .excl__stamp { text-shadow: none; }
html[data-theme='light'] .dim::before,
html[data-theme='light'] .dim::after { background: linear-gradient(90deg, transparent, rgba(7,142,114,.3), transparent); }
html[data-theme='light'] .field input,
html[data-theme='light'] .field select,
html[data-theme='light'] .field textarea { background: #f2f5f6; }
html[data-theme='light'] .field input:focus,
html[data-theme='light'] .field select:focus,
html[data-theme='light'] .field textarea:focus { box-shadow: 0 0 0 3px rgba(7,142,114,.14); }
html[data-theme='light'] .field select option { background: #fff; }
html[data-theme='light'] .ftr { background: rgba(8,40,50,.04); }
html[data-theme='light'] .swatch { background: #b8bec4; }


/* ------------------------------------------- 22. HOUSE MODEL TILES (01) */

@media (min-width: 880px) { .split--3 { grid-template-columns: repeat(3, 1fr); } }

.hcard__media { aspect-ratio: 4 / 3; }
.hcard__media > img,
.hcard__media > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; object-fit: cover; opacity: 0;
  transition: opacity .35s var(--ease), transform .7s var(--ease);
}
.hcard__media > img[data-active],
.hcard__media > video[data-active] { opacity: 1; }
.hcard:hover .hcard__media > img[data-active] { transform: scale(1.035); }

.hcard__thumbs {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: flex; gap: 6px;
}
.hcard__thumb {
  width: 46px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--stroke2); border-radius: 6px; overflow: hidden;
  background: var(--bg2); opacity: .62;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.hcard__thumb img,
.hcard__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcard__thumb:hover { opacity: 1; }
.hcard__thumb[aria-current='true'] { opacity: 1; border-color: var(--cyan); }

.hcard__spec {
  font-family: var(--fm); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut);
}
.hcard__spec span { color: var(--stroke2); margin: 0 2px; }

.hcard .lane__go { text-decoration: none; color: var(--dim); }
.hcard .lane__go:hover { color: var(--cyan); }
.hcard .lane__go:hover span:last-child { transform: translateX(4px); }


/* logo — full wordmark */
.logo { font-size: 15px; letter-spacing: .02em; gap: 6px; flex-wrap: wrap; }
@media (max-width: 720px) { .logo { font-size: 13px; } }


/* channel keys as icons */
.channels .k { display: grid; place-items: center; padding: 0; height: 44px; }
.channels .k svg { width: 20px; height: 20px; display: block; }

/* ============================================================ 24. LIGHT THEME
   — CALCULATOR + FENCE SWATCHES
   The canvas didn't cover /calculator/ (kept on its existing design) or the
   fence texture stand-ins, so their hardcoded rgba(0,0,0,…) fills survived into
   light mode as heavy grey blocks. These are the missing overrides. */

html[data-theme='light'] .opt__box { background: #f2f5f6; }
html[data-theme='light'] .opt input:checked + .opt__box {
  background: rgba(7, 142, 114, .10);
  box-shadow: 0 0 20px rgba(7, 142, 114, .14);
}
html[data-theme='light'] .opt--custom input:checked + .opt__box {
  background: rgba(194, 97, 10, .10);
  box-shadow: 0 0 20px rgba(194, 97, 10, .14);
}
/* checkbox: white tick on the teal fill, not the dark-mode near-black */
html[data-theme='light'] .opt--check .opt__box::before { background: #fff; }
html[data-theme='light'] .opt--check input:checked + .opt__box::after { border-color: #fff; }

html[data-theme='light'] .numfield input { background: #f2f5f6; }
html[data-theme='light'] .numfield input[readonly] { background: #e8ecee; }
html[data-theme='light'] .numfield input:focus { box-shadow: 0 0 0 3px rgba(7, 142, 114, .14); }
html[data-theme='light'] .rangefield input[type=range] { background: rgba(8, 40, 50, .18); }

html[data-theme='light'] .tally__total { text-shadow: none; }
html[data-theme='light'] .tally { background: linear-gradient(180deg, rgba(7,142,114,.07), rgba(7,142,114,.02)); }
html[data-theme='light'] .tally[data-mode='custom'] {
  background: linear-gradient(180deg, rgba(194,97,10,.07), rgba(194,97,10,.02));
}
html[data-theme='light'] .tally[data-mode='custom'] .tally__total { text-shadow: none; }
html[data-theme='light'] .tally[data-mode='custom'] .btn--signal { color: #fff; }

/* fence textures are concrete — they should read as light grey stone on paper,
   not as the darker greys tuned for a near-black ground */
html[data-theme='light'] .swatch { background: #c9c5bb; }
html[data-theme='light'] .swatch[data-tex='linear'] {
  background-image: repeating-linear-gradient(180deg, #c9c5bb 0 9px, #bcb8ae 9px 11px, #d2cec4 11px 13px);
}
html[data-theme='light'] .swatch[data-tex='piatra'] {
  background-color: #c4c0b6;
  background-image:
    radial-gradient(ellipse 34px 20px at 18% 24%, #b4b0a6 0 48%, transparent 50%),
    radial-gradient(ellipse 40px 22px at 62% 40%, #d0ccc2 0 46%, transparent 48%),
    radial-gradient(ellipse 30px 26px at 84% 70%, #b8b4aa 0 50%, transparent 52%),
    radial-gradient(ellipse 46px 18px at 34% 78%, #cfcbc1 0 44%, transparent 46%),
    radial-gradient(ellipse 26px 24px at 8% 62%, #c9c5bb 0 50%, transparent 52%);
}
html[data-theme='light'] .swatch[data-tex='lemn'] {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(23,25,27,.16) 34px 36px),
    repeating-linear-gradient(92deg, #c6c2b8 0 3px, #ccc8be 3px 5px, #c0bcb2 5px 9px);
}
html[data-theme='light'] .swatch[data-tex='neted'] {
  background-image: linear-gradient(158deg, #d2cec4 0%, #c4c0b6 52%, #cbc7bd 100%);
}
html[data-theme='light'] .swatch::after { background: rgba(255, 255, 255, .88); }

/* ===================================== 25. MODEL-PAGE HERO GALLERY (canvas)
   Imported 2026-09-01. NOTE: in the canvas export this block had been pasted
   into the middle of `html[data-theme='light'] .render-tag {…}`, which both
   scoped the gallery to light mode and left .render-tag unscoped (white
   background in dark mode). Kept top-level here; the light .render-tag rule
   above is intact. */

.gal__main { position: relative; aspect-ratio: 16 / 10; }
.gal__main > img,
.gal__main > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; object-fit: cover; opacity: 0;
  transition: opacity .35s var(--ease);
}
.gal__main > img[data-active],
.gal__main > video[data-active] { opacity: 1; }
.gal__main > [data-fit='contain'] { object-fit: contain; background: #fff; }

.gal__t {
  position: relative; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid var(--stroke); border-radius: 14px; background: var(--bg2);
  aspect-ratio: 1 / 1; display: block; width: 100%;
  transition: border-color .2s var(--ease), opacity .2s var(--ease);
  opacity: .62;
}
.gal__t > img, .gal__t > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__t > img[data-fit='contain'] { object-fit: contain; background: #fff; }
.gal__t:hover { opacity: 1; }
.gal__t[aria-current='true'] { opacity: 1; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan-dim); }
.gal__t--empty { cursor: default; border-style: dashed; display: grid; place-items: center; }
.gal__t--empty:hover { opacity: .62; }
.gal__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s3); }

/* ================================================= 26. COOKIE CONSENT (GDPR)
   Reject must be exactly as easy as accept — same size, same weight, same
   prominence. Anything that makes refusing harder than accepting is not valid
   consent under GDPR, and a "reject" styled as a faint text link is the most
   common way sites get that wrong. */

.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: var(--s4) var(--gut) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg1) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--stroke2);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
  transform: translateY(110%);
  transition: transform .38s var(--ease);
}
.cc[data-open] { transform: none; }
@media (prefers-reduced-motion: reduce) { .cc { transition: none; } }

.cc__in {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: var(--s4); align-items: center;
}
@media (min-width: 900px) { .cc__in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); } }

.cc__txt { font-size: 13.5px; color: var(--mut); margin: 0; max-width: 74ch; }
.cc__txt b { color: var(--txt); font-weight: 600; display: block; margin-bottom: 4px; font-family: var(--fd); font-size: 15px; }
.cc__txt a { color: var(--cyan); text-underline-offset: 3px; }

.cc__act { display: flex; gap: var(--s3); flex-wrap: wrap; }
.cc__act .btn { padding: 11px 20px; font-size: 14px; flex: 1 1 auto; justify-content: center; }
@media (min-width: 560px) { .cc__act .btn { flex: 0 0 auto; } }

/* the re-open control, in the footer legal column */
.cc-reopen {
  font: inherit; font-size: var(--t-sm); color: var(--mut);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.cc-reopen:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* Equal weight, not just equal size: a ghost-outlined "reject" next to a filled
   "accept" is the nudge regulators object to. Both get a solid surface; only the
   hue differs. */
.cc__act .btn:not(.btn--signal) {
  background: var(--glass2);
  border-color: var(--stroke2);
  color: var(--txt);
  font-weight: 600;
}
html[data-theme='light'] .cc__act .btn:not(.btn--signal) { background: rgba(8, 40, 50, .07); }
.cc__act .btn:not(.btn--signal):hover { border-color: var(--cyan-dim); color: var(--cyan); }

/* Keep the floating actions clear of the banner while it is open.
   NOT a sibling selector: the banner is appended to <body> AFTER .fabs, so this
   is a previous-sibling problem, which only :has() can express. */
:has(> .cc[data-open]) .fabs { transform: translateY(-140px); }
@media (min-width: 900px) { :has(> .cc[data-open]) .fabs { transform: translateY(-104px); } }
.fabs { transition: transform .38s var(--ease); }

/* The design shows the video AS a video: the thumbnail is a live video element at
   #t=0.1 with preload="metadata", so it renders a real frame from the clip, and
   the model-page hero autoplays. An earlier pass here swapped that for
   poster= + preload="none" + a play badge, which turned it into a still image
   with a button on it. Reverted — see site/README.md. */

/* ==================================================== 28. FORM ANTI-SPAM + STATE
   The honeypot must be invisible to people but NOT display:none — some bots skip
   hidden inputs, and some screen readers announce them. Positioned off-screen
   and removed from the a11y tree via aria-hidden + tabindex="-1" in the markup. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}

/* --- submit states ---------------------------------------------------------- */
.form[data-state='sending'] button[type='submit'] { opacity: .6; pointer-events: none; }
.form[data-state='sending'] button[type='submit'] span:first-child::after {
  content: '…';
}
.form__msg {
  display: none; border-radius: var(--rad-sm); padding: var(--s4);
  font-family: var(--fm); font-size: 13px; line-height: 1.5;
}
.form[data-state='ok']  .form__msg--ok,
.form[data-state='err'] .form__msg--err { display: block; }
.form__msg--ok  { border: 1px solid var(--cyan-dim); color: var(--cyan); background: rgba(70,230,192,.07); }
.form__msg--err { border: 1px solid var(--flag-bd);  color: var(--flag); background: var(--flag-bg); }
html[data-theme='light'] .form__msg--ok  { background: rgba(7,142,114,.07); }
html[data-theme='light'] .form__msg--err { background: rgba(194,97,10,.07); }

/* ============================================== 29. MOBILE TAP TARGETS
   Measured at 390px across all 13 pages: layout had zero horizontal overflow,
   but 11-17 interactive elements per page were under the 44px minimum —
   footer links at 18px, gallery thumbs at 34px, buttons one pixel short.

   Width-scoped rather than `pointer: coarse` so it is verifiable in a desktop
   harness; a 900px-wide mouse user getting roomier tap areas costs nothing. */

@media (max-width: 900px) {

  /* footer + breadcrumb links: the worst offenders, ~18px line boxes */
  .ftr ul a,
  .ftr__bot a,
  .cc-reopen {
    display: inline-block;
    padding-block: 12px;
    min-height: 44px;
    box-sizing: content-box;
  }
  .ftr ul { gap: 0; }                 /* padding now supplies the rhythm */

  .crumb a { display: inline-block; padding-block: 12px; }

  /* header controls — 40-43px, just short of the line */
  .btn        { min-height: 44px; }
  .burger     { width: 46px; height: 46px; }
  .theme-btn  { width: 46px; height: 46px; }
  .logo       { padding-block: 14px; }

  /* home tile gallery thumbs were 46x34 */
  .hcard__thumb { width: 58px; height: 44px; }

  /* accordion rows and mobile sheet links */
  .acc summary { min-height: 44px; display: flex; align-items: center; }
  .sheet a     { min-height: 48px; align-items: center; }

  /* the GDPR consent checkbox: enlarge the box and let the whole label take
     the tap, which is what people actually aim at */
  .consent input { width: 22px; height: 22px; }
  .consent label { padding-block: 10px; }

  /* calculator option cards are already large; the numeric inputs are not */
  .numfield input,
  .field input,
  .field select { min-height: 46px; }

  /* fence texture "Solicită deviz" links and any bare inline link in a card */
  .fencerow .btn,
  .lane__go { min-height: 44px; align-items: center; }
}

/* Second pass, from the re-measure. What is left after this is deliberate:
   - a.skip (42px) is visually hidden until focused, so it is not a tap target
   - inline links inside sentences (legal text, exclusions, consent copy) fall
     under the WCAG 2.5.8 "inline" exception; padding them would wreck the
     line rhythm of body copy for no accessibility gain */
@media (max-width: 900px) {
  .logo  { padding-block: 16px; }        /* 41-42px -> 46px */
  .badge { min-height: 44px; }           /* ANPC footer badges were 36px */

  /* the range slider's TRACK is 3px; the thumb is 20px. Pad the control so the
     finger has something to land on without changing how it looks. */
  .rangefield input[type=range] {
    height: 44px;
    background: transparent;
  }
  .rangefield input[type=range]::-webkit-slider-runnable-track {
    height: 3px; background: var(--stroke2); border-radius: 3px;
  }
  .rangefield input[type=range]::-moz-range-track {
    height: 3px; background: var(--stroke2); border-radius: 3px;
  }
  .rangefield input[type=range]::-webkit-slider-thumb { margin-top: -8px; }

  .consent input { width: 24px; height: 24px; }   /* WCAG 2.5.8 minimum */
}

/* The HUD measure line wraps its rule/dot terminators onto separate lines at
   phone width, leaving stray dots floating above and below the caption. Keep it
   on one line and drop the trailing half — the leading rule reads fine alone. */
@media (max-width: 560px) {
  .dim { flex-wrap: nowrap; align-items: flex-start; }
  .dim::before { flex: 0 0 18px; margin-top: .7em; }
  .dim::after  { display: none; }
  .dim .dim__t:last-of-type { display: none; }
  .dim .dim__t { margin-top: .55em; }
}