/* =====================================================================
   Cartonia — single page
   Requires brand/tokens.css, brand/type.css, brand/components.css.
   Every value here comes from a token. Motion lives at the bottom.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { overflow-x: hidden; }

/* ---------- structure ------------------------------------------------ */

.rail {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.rail--narrow { max-width: 860px; }

.band { padding-block: clamp(72px, 10vw, 152px); position: relative; }
.band--paper   { background: var(--surface-canvas); }
.band--card    { background: var(--surface-card); }
.band--sunken  { background: var(--surface-sunken); }
.band--manilla { background: var(--surface-feature); }

/* Dark bands hold their own palette regardless of the visitor's theme —
   they are a designed surface, not a themed one. */
.band--ink {
  background: #141413;
  color: #F0EEE6;
  --text-primary: #F0EEE6;
  --text-muted:   #A8A093;
  --text-faint:   #8B8478;
  --line-hairline: #302D29;
  --brand-mark-back: #8A5A2B;
}
.band--ink h1, .band--ink h2, .band--ink h3 { color: #F0EEE6; }

/* Corrugation, felt rather than seen. A soft ramp on a wider period —
   hard 1px lines at a 7px pitch shimmer badly when the page is scaled. */
.flute {
  background-image: repeating-linear-gradient(
    90deg, transparent 0, rgb(96 57 19 / .016) 9px, transparent 19px);
}
.band--ink.flute {
  background-image: repeating-linear-gradient(
    90deg, transparent 0, rgb(255 255 255 / .018) 9px, transparent 19px);
}

/* Video band. Same layering as the hero: media at -2, tint at -1, content
   above. isolation gives the band its own stacking context so the negative
   z-index children sit above its background rather than behind the page. */
.band--video {
  position: relative; isolation: isolate; overflow: hidden;
  /* Live footage reads brighter and busier than flat ink, so the secondary
     tones step up to keep AA against the brightest frames of the loop. */
  --text-muted: #D6D0C4;
  --text-faint: #B8B1A4;
}
.video-bg {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.video-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.band--video::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgb(20 20 19 / .74);
}
/* Reduced motion keeps the poster still behind the same tint. */
@media (prefers-reduced-motion: reduce) {
  .video-bg video { display: none; }
}

.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.row     { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

.grid { display: grid; gap: var(--space-5); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.sec-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: clamp(32px, 5vw, 64px); }
.sec-head .lead { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-muted); }

/* ---------- header --------------------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-canvas) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.hdr[data-stuck] { border-bottom-color: var(--line-hairline); }
.hdr .rail { display: flex; align-items: center; justify-content: space-between;
             gap: var(--space-3); min-height: 68px; }
@media (min-width: 900px) { .hdr .rail { gap: var(--space-5); } }
.hdr-logo { display: block; width: 120px; height: auto; }
@media (min-width: 460px) { .hdr-logo { width: 132px; } }
@media (min-width: 560px) { .hdr-logo { width: 168px; } }
.hdr .btn { white-space: nowrap; }
@media (max-width: 559px) { .hdr .btn { padding-inline: var(--space-4); } }

/* CTA and menu button travel together on the right. */
.hdr-actions { display: flex; align-items: center; gap: var(--space-2); }

.hdr-nav { display: flex; gap: var(--space-5); align-items: center; }

/* ---------- mobile menu ----------------------------------------------
   Below the nav breakpoint the same <nav> becomes a drop panel, so there
   is one set of links and one landmark rather than a duplicated menu. */
.hdr-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-primary); border-radius: var(--radius-md);
}
.hdr-toggle-bars { position: relative; display: block; width: 20px; height: 14px; }
.hdr-toggle-bars i {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.hdr-toggle-bars i:nth-child(1) { top: 0; }
.hdr-toggle-bars i:nth-child(2) { top: 6px; }
.hdr-toggle-bars i:nth-child(3) { top: 12px; }
.hdr-toggle[aria-expanded="true"] .hdr-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr-toggle[aria-expanded="true"] .hdr-toggle-bars i:nth-child(2) { opacity: 0; }
.hdr-toggle[aria-expanded="true"] .hdr-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hdr-nav-tel { display: none; }

@media (max-width: 899px) {
  .hdr-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: var(--surface-canvas);
    border-bottom: 1px solid var(--line-hairline);
    max-height: calc(100svh - 68px); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease),
                visibility 0s linear var(--dur-2);
  }
  .hdr[data-menu] .hdr-nav {
    visibility: visible; opacity: 1; transform: none;
    pointer-events: auto; transition-delay: 0s;
  }
  .hdr-nav a {
    display: flex; align-items: center; min-height: 48px;
    padding-block: var(--space-3); border-bottom: 1px solid var(--line-hairline);
    font-size: var(--text-body); color: var(--text-primary);
  }
  .hdr-nav a:last-child { border-bottom: 0; }
  .hdr-nav-tel {
    display: flex; font-family: var(--font-mono);
    font-size: var(--text-sm); color: var(--text-muted) !important;
  }
}
@media (min-width: 900px) { .hdr-toggle { display: none; } }
.hdr-nav a {
  font-family: var(--font-brand); font-weight: var(--weight-medium);
  font-size: var(--text-sm); font-variation-settings: 'wdth' var(--wdth-ui);
  text-decoration: none; color: var(--text-muted);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.hdr-nav a:hover { color: var(--text-primary); border-bottom-color: var(--c-kraft); }

/* ---------- hero ----------------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  min-height: min(94svh, 900px);
  display: flex; align-items: flex-end;
  padding-block: clamp(96px, 16vw, 180px) clamp(48px, 7vw, 88px);
  background: #141413; color: #F0EEE6;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: -6% -2% -2%; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, #141413 4%, rgb(20 20 19 / .82) 38%, rgb(20 20 19 / .30) 72%, rgb(20 20 19 / .55) 100%);
}
.hero .rail { width: 100%; display: flex; flex-direction: column; gap: var(--space-6); }

.hero h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: var(--weight-bold);
  color: #FAF9F5;
  /* Wide enough for the longest of the three masked lines to stay whole.
     In em, not ch: ch tracks the variable font's width axis and drifts from
     the actual text width as the display size clamps down. */
  max-width: 13em;
}
.hero .lead { font-size: var(--text-body-lg); line-height: var(--leading-body-lg);
              color: #D6D0C4; max-width: 54ch; }
.hero-note { font-size: var(--text-sm); color: #A8A093; max-width: 46ch; }

/* ---------- figures -------------------------------------------------- */

figure { margin: 0; }
.fig {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig--43  { aspect-ratio: 4 / 3; }
.fig--169 { aspect-ratio: 16 / 9; }
.fig--219 { aspect-ratio: 21 / 9; }
/* Fills the height of whatever sits beside it in a two-column row. Keeps a
   ratio while the row is still stacked, so it never collapses to nothing. */
.fig--fill { aspect-ratio: 16 / 9; }
@media (min-width: 780px) {
  .fig--fill { aspect-ratio: auto; height: 100%; min-height: 260px; }
}
.fig figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-spec);
  letter-spacing: var(--tracking-spec); text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- reason blocks ------------------------------------------- */

.reason { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4);
          border-top: 2px solid var(--c-kraft); }
.reason h3 { font-size: var(--text-h4); }
.reason p { font-size: var(--text-sm); color: var(--text-muted); }

.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-n {
  font-family: var(--font-brand); font-weight: var(--weight-bold);
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1; letter-spacing: -0.03em;
  font-variation-settings: 'wdth' var(--wdth-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-kraft);
}
.stat-l { font-family: var(--font-mono); font-size: var(--text-spec);
          letter-spacing: var(--tracking-spec); text-transform: uppercase;
          color: var(--text-muted); }

/* ---------- need cards ----------------------------------------------- */

.need {
  display: grid; gap: var(--space-5); align-items: center;
  padding-block: clamp(28px, 4vw, 52px);
  border-top: 1px solid var(--line-hairline);
}
@media (min-width: 820px) {
  /* Text left, image right. Even rows mirror — the ratio flips with the
     order so the image keeps the same width down the whole column. */
  .need { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .needs .need:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .needs .need:nth-child(even) .need-fig { order: -1; }
}
.need-body { display: flex; flex-direction: column; gap: var(--space-3); }
.need-body h3 { font-size: var(--text-h3); }
.need-q {
  font-family: var(--font-mono); font-size: var(--text-spec);
  letter-spacing: var(--tracking-spec); text-transform: uppercase;
  color: var(--text-marker);
}
.band--ink .need-q { color: var(--c-kraft); }
.need-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  font-family: var(--font-mono); font-size: var(--text-spec);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text-muted);
}

/* ---------- product tiles -------------------------------------------- */

.prod { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; }
.prod .fig { transition: transform var(--dur-2) var(--ease); }
.prod:hover .fig { transform: translateY(-3px); }
.prod img { transition: transform 640ms var(--ease); }
.prod:hover img { transform: scale(1.04); }
.prod h3 { font-size: var(--text-h4); }
.prod p { font-size: var(--text-sm); color: var(--text-muted); }
.prod .cap {
  font-family: var(--font-mono); font-size: var(--text-spec);
  letter-spacing: var(--tracking-spec); text-transform: uppercase;
  color: var(--text-marker);
}

/* ---------- capability chart ----------------------------------------- */

.cap-row { display: grid; gap: var(--space-3); padding-block: var(--space-4);
           border-top: 1px solid var(--line-hairline); align-items: center; }
@media (min-width: 720px) { .cap-row { grid-template-columns: 130px 1fr 120px; } }
.cap-bar { height: 12px; background: var(--surface-sunken); border-radius: 2px; overflow: hidden; }
.cap-bar i { display: block; height: 100%; width: 0; background: var(--c-kraft);
             transition: width 1100ms var(--ease); }
.cap-row[data-eco] .cap-bar i { background: var(--c-eco); }
.cap-val { font-family: var(--font-mono); font-size: var(--text-sm);
           font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cap-key { font-family: var(--font-mono); font-size: var(--text-spec);
           letter-spacing: var(--tracking-spec); text-transform: uppercase; color: var(--text-faint); }

/* ---------- industries ----------------------------------------------- */

.ind {
  display: grid; gap: var(--space-3); align-items: baseline;
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-hairline);
}
@media (min-width: 760px) { .ind { grid-template-columns: 40px minmax(0,4fr) minmax(0,6fr); } }
.ind-n { font-family: var(--font-mono); font-size: var(--text-spec);
         letter-spacing: var(--tracking-spec); color: var(--text-faint); }
.ind h3 { font-size: var(--text-h4); }
.ind p { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- process -------------------------------------------------- */

.step { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3);
        border-top: 1px solid var(--line-hairline); }
.step-n { font-family: var(--font-mono); font-size: var(--text-spec);
          letter-spacing: var(--tracking-spec); color: var(--text-marker); }
.step h3 { font-size: var(--text-body-lg); font-family: var(--font-brand);
           font-weight: var(--weight-semibold); }
.step p { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- final CTA ------------------------------------------------ */

.cta-grid { display: grid; gap: var(--space-6); }
@media (min-width: 880px) { .cta-grid { grid-template-columns: minmax(0,6fr) minmax(0,5fr); } }
.entry { display: flex; gap: var(--space-3); padding-block: var(--space-4);
         border-top: 1px solid var(--line-hairline); }
.entry-n { font-family: var(--font-mono); font-size: var(--text-spec);
           letter-spacing: var(--tracking-spec); color: var(--c-kraft); flex: none; }
.entry p { font-size: var(--text-sm); color: #C6C0B4; }
.entry b { font-family: var(--font-brand); font-weight: var(--weight-semibold); color: #F0EEE6; }

/* ---------- footer --------------------------------------------------- */

.foot { padding-block: var(--space-7) var(--space-8); background: var(--surface-sunken); }
.foot-grid { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: minmax(0,2fr) repeat(2, minmax(0,1fr)); } }
.foot a { font-size: var(--text-sm); }
.foot-logo { width: 190px; height: auto; display: block; }

/* Unverified claim. Nothing here has been confirmed by the client yet —
   see docs/08-RAPORT-VALIDARE.md. Add ?verificare to the URL to reveal. */
.claim { border-bottom: 1px dotted transparent; }
body[data-verify] .claim {
  border-bottom-color: currentColor;
  background: color-mix(in srgb, var(--c-amber-tint) 60%, transparent);
}
body[data-verify] .claim::after {
  content: '?'; vertical-align: super; font-size: .7em;
  color: var(--status-warn-fg); font-family: var(--font-mono);
}

/* =====================================================================
   MOTION
   Every reveal mirrors something the material does: sheets stack, rules
   score, boards unfold. One easing curve throughout.
   ===================================================================== */

/* No blanket will-change: it promoted 81 elements to their own
   compositing layers, which on a phone costs memory and made the
   multi-line masked headline paint only its first line box. */

/* rise — the default */
[data-r="up"]      { opacity: 0; transform: translateY(28px); }
/* sheets sliding onto a stack */
[data-r="left"]    { opacity: 0; transform: translateX(-40px); }
[data-r="right"]   { opacity: 0; transform: translateX(40px); }
/* a score line drawn across the sheet */
[data-r="rule"]    { transform: scaleX(0); transform-origin: left; }
/* A sheet laid down over the frame. The figure fades while the image
   settles out of a slight oversize, so nothing snaps into place. Opacity
   rather than clip-path: a clipped element also confuses Chrome, which
   folds a target's own clip-path into the IntersectionObserver rect, so a
   clipped figure reports zero intersection and never reveals at all. */
[data-r="wipe"]     { opacity: 0; }
[data-r="wipe"] img { transform: scale(1.05); }
/* type set line by line */
/* Type set line by line. The span MUST be a block. As an inline element a
   wrapped headline splits into one fragment per line, and inside the
   clipping .mask-line only the first fragment ever painted — the rest of
   the line was laid out correctly but never drawn (verified on a 390px
   viewport: "pentru produsul" vanished). A block box also makes the
   translateY below apply, which is what the mask was written for. */
[data-r="mask"]    { display: block; opacity: 0; transform: translateY(0.42em); }

[data-r] { transition:
    opacity 760ms var(--ease) var(--d, 0ms),
    transform 760ms var(--ease) var(--d, 0ms),
    clip-path 900ms var(--ease) var(--d, 0ms); }
[data-r="wipe"]     { transition: opacity 1000ms var(--ease) var(--d, 0ms); }
[data-r="wipe"] img { transition: transform 1600ms var(--ease) var(--d, 0ms); }

[data-r].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* Single column: a side entrance means nothing, and the offset pushes
   content past the viewport before it reveals. Rise instead. */
@media (max-width: 819px) {
  [data-r="left"], [data-r="right"] { transform: translateY(24px); }
}
[data-r="wipe"].is-in img { transform: scale(1); }

/* Screen-reader-only label, used on the menu button. */
.u-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Touch targets. The type scale is compact by design, so on coarse
   pointers the hit area grows without the text changing size. */
@media (pointer: coarse) {
  .foot-grid a, .need-tags .tag { min-height: 44px; display: flex; align-items: center; }
  .foot-grid .stack-2 a { padding-block: var(--space-2); }
  /* the logo is a home link, and the artwork alone is only ~25px tall */
  .hdr .rail > a { min-height: 44px; display: flex; align-items: center; }
}

.mask-line { display: block; overflow: hidden; padding-bottom: .08em; }

@media (prefers-reduced-motion: reduce) {
  [data-r] { opacity: 1 !important; transform: none !important;
             clip-path: none !important; transition: none !important; }
  [data-r="wipe"] img { transform: none !important; }
}