/* Strugar Grigore SRL — craft proven in brick. System rules: docs/DESIGN.md */

:root {
  --cream:        oklch(98.4% 0.004 75); /* page surface: near-white, barely warm (owner's choice, 30 September 2026; was a warm cream) */
  --cream-deep:   oklch(92% 0.024 72);
  --sand:         oklch(90% 0.012 68); /* photo placeholders */
  --terracotta:   oklch(57% 0.135 36);
  --terracotta-d: oklch(46% 0.125 33);
  --terracotta-l: oklch(72% 0.10 42);
  --brick:        var(--terracotta-d);
  --brick-deep:   oklch(40% 0.115 32);
  --charcoal:     oklch(23% 0.016 45);
  --ink:          oklch(29% 0.02 45);
  --muted:        oklch(47% 0.03 50);
  --line:         oklch(86% 0.012 65);
  --line-strong:  oklch(60% 0.035 55); /* control borders: 3:1 against inputs and cream */
  --white-warm:   oklch(99.6% 0.002 75);
  --on-dark:      oklch(96.5% 0.014 78);
  --on-dark-2:    oklch(85% 0.02 70);

  /* One family: Manrope (owner's choice, 30 September 2026, after Inter). Hierarchy by size, weight and tracking */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-brand: var(--font-body);

  --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem); /* never under 14px */
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  /* Display scale: hero : section is 1.35-1.5 at every width (checked 375-1440px) */
  --t-hero:      clamp(2.4rem, 1.4rem + 4vw, 4.6rem);   /* 38 / 46 / 69 / 74px at 375 / 583 / 1157 / 1440 */
  --t-section:   clamp(1.75rem, 1.25rem + 2.2vw, 3.4rem); /* 28 / 33 / 46 / 52px: every section title */
  --t-statement: clamp(2rem, 1.2rem + 3.2vw, 4.25rem);  /* 32 / 38 / 56 / 65px: the Despre noi statement, between section and hero */
  --t-item:      clamp(1.25rem, 1.05rem + 1.1vw, 2rem); /* 21 / 23 / 29 / 32px: service titles, a clear step below --t-section */

  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-s:  clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-m:  clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --space-l:  clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  --space-xl: clamp(4rem, 2.8rem + 6vw, 8rem);
  --sec-pad:  var(--space-xl); /* section padding; capped by screen height on desktop */
  --screen:   calc(100svh - var(--header-h) - 1px); /* visible area under the sticky header and its border */

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 1320px;
  --header-h: 4.25rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;
  --r-control: 6px;
  --r-photo: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12; /* Manrope is tall: room for ă â î above and ș ț below */
  letter-spacing: -0.03em; /* tight display tracking for h1/h2; h3 uses less below */
  margin: 0;
  color: var(--charcoal);
  text-wrap: balance;
}
h2 { font-size: var(--t-section); }
@media (max-width: 599px) { h1, h2 { letter-spacing: -0.02em; } } /* less tightening at phone sizes */
h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; } /* two-line titles keep room for ă î ș ț */
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
[id] { scroll-margin-top: var(--header-h); } /* section top meets the header border: no double hairline */
@media (max-width: 860px) { [id] { scroll-margin-top: 0; } } /* phones hide the bar once scrolled */

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--charcoal); color: var(--on-dark); padding: 0.75rem 1rem; text-decoration: none; border-radius: var(--r-control); }
.skip-link:focus { top: 0.5rem; }

/* Captions are sentences: normal case. Uppercase is kept for short labels (card meta, tags). */
figcaption { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.8rem 1.5rem;
  font-weight: 600; font-size: var(--step-0); line-height: 1.2; text-align: center;
  text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-control);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.btn--sm { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: var(--step--1); }
.btn--primary { background: var(--brick); color: var(--on-dark); border-color: var(--brick); }
.btn--outline { border-color: var(--charcoal); color: var(--charcoal); }
.btn--quiet-light { color: var(--on-dark); border-color: color-mix(in oklch, var(--on-dark) 55%, transparent); }
.btn:active { transform: translateY(1px); }

/* Header */
/* Three states, set in main.js:
   .is-top        page top, over the hero: transparent, all-white logo and light links
   (default)      a solid warm-white bar with a visible line (desktop once scrolled, any open menu)
   .is-collapsed  phones once scrolled: no bar, only the menu button, so nothing overlaps the page text */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white-warm);
  border-bottom: 1px solid var(--line);
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.site-header.is-top { background: transparent; border-bottom-color: transparent; }
.site-header.is-top .wordmark, .site-header.is-top .wordmark__mark,
.site-header.is-top .nav__links a { color: var(--on-dark); }
.site-header.is-top .wordmark__mark-back { fill: var(--on-dark); } /* all-white mark over the photo */
.site-header.is-top .nav__toggle { color: var(--on-dark); }
.site-header.is-top .nav__cta { visibility: hidden; } /* over the hero, the hero's own "Sună acum" is the one call button */
.nav { min-height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-m); }
.wordmark {
  display: inline-flex; align-items: center; gap: 0.8rem; min-height: 2.75rem;
  text-decoration: none; font-family: var(--font-brand);
  font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; color: var(--charcoal);
  transition: color 240ms var(--ease-out), opacity 200ms var(--ease-out), visibility 200ms;
}
.wordmark__mark { width: 30px; height: 28px; flex: none; color: var(--charcoal); display: block; transition: color 240ms var(--ease-out); } /* about 1.6× the name's cap height */
.wordmark__mark-back { fill: var(--terracotta); transition: fill 240ms var(--ease-out); }
.nav__links { display: flex; justify-content: flex-end; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  text-decoration: none; font-weight: 500; font-size: var(--step--1); letter-spacing: 0.02em; color: var(--ink);
  border-bottom: 2px solid transparent; transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav__links a[aria-current] { color: var(--charcoal); border-bottom-color: var(--terracotta); }
/* Menu button (phones): a two-line mark (shorter lower line) that turns into an × */
.nav__toggle {
  display: none; place-items: center; width: 44px; height: 44px;
  margin-right: -11px; /* the icon lines up with the page edge; the rest is tap area */
  color: var(--charcoal);
}
.nav__toggle-icon { position: relative; width: 22px; height: 12px; }
.nav__toggle-icon i {
  position: absolute; right: 0; width: 22px; height: 2px; border-radius: 1px; background: currentColor;
  transform-origin: right center; transition: transform 220ms var(--ease-out);
}
.nav__toggle-icon i:first-child { top: 0; }
.nav__toggle-icon i:last-child { bottom: 0; transform: scaleX(0.64); } /* the shorter lower line */
.nav__toggle[aria-expanded="true"] .nav__toggle-icon i { transform-origin: center; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon i:first-child { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon i:last-child { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__toggle { grid-column: 2; grid-row: 1; }
  .nav__cta { display: none; }
  /* The menu drops over the page as a panel under the bar: only opacity and position animate, no height */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; display: block;
    padding: 0 var(--gutter) 0.5rem; background: var(--white-warm); border-bottom: 1px solid var(--line);
    opacity: 0; translate: 0 -0.5rem; visibility: hidden;
    transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .nav__links.is-open { opacity: 1; translate: none; visibility: visible; transition-delay: 0s; }
  .nav__links a { display: flex; min-height: 3.25rem; border: 0; border-top: 1px solid var(--line); font-size: var(--step-1); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; }
  .nav__links a[aria-current] { color: var(--terracotta-d); }
  .nav__toggle { display: grid; border-radius: var(--r-control); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
  /* Collapsed: the bar and logo step away; the menu button stays on a soft, slightly see-through chip */
  .site-header.is-collapsed { background: transparent; border-bottom-color: transparent; pointer-events: none; }
  .site-header.is-collapsed .wordmark { opacity: 0; visibility: hidden; }
  .site-header.is-collapsed .nav__toggle {
    pointer-events: auto; margin-right: 0;
    background: color-mix(in oklch, var(--charcoal) 80%, transparent); color: var(--on-dark);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-dark) 25%, transparent);
  }
}

/* Hero: the finished house fills the first screen under a charcoal scrim; the header floats over it */
.hero {
  position: relative; isolation: isolate; color: var(--on-dark); background: var(--charcoal);
  margin-top: calc(-1 * var(--header-h) - 1px); /* slide under the sticky header */
  min-height: 100svh; display: grid; align-items: end;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* The one gradient the system allows: a scrim, darker where the text and the header sit */
  background:
    linear-gradient(to bottom, oklch(20% 0.015 45 / 0.6), oklch(20% 0.015 45 / 0) 22%),
    linear-gradient(to top, oklch(20% 0.015 45 / 0.94) 0%, oklch(20% 0.015 45 / 0.72) 45%, oklch(20% 0.015 45 / 0.35) 100%);
}
.hero__content { padding-block: calc(var(--header-h) + var(--space-l)) var(--space-l); }
.hero h1 { color: var(--on-dark); font-size: var(--t-hero); line-height: 1.15; max-width: 14ch; }
.hero h1 span, .hero h1 em { display: block; }
@media (min-width: 600px) { .hero h1 span, .hero h1 em { white-space: nowrap; } } /* the three lines never re-wrap, even while the font loads */
.hero h1 em { font-style: normal; color: oklch(78% 0.095 45); } /* lighter than --terracotta-l: stays 4.3:1+ over the red-brick balcony */
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 1rem + 3vw, 4rem); } /* about 0.7-0.85x the headline size */

@media (max-width: 519px) {
  .hero__actions .btn { flex: 1 1 100%; }
}
@media (max-width: 899px) {
  .hero__content { padding-bottom: calc(var(--space-l) + 4.5rem); } /* keep the call button clear of the call bar's strip */
}
@media (min-width: 520px) {
  .hero__actions .btn { min-width: 12rem; }
}
@media (min-width: 960px) {
  .hero { align-items: center; max-height: 70rem; }
  .hero::before {
    background:
      linear-gradient(to bottom, oklch(20% 0.015 45 / 0.55), oklch(20% 0.015 45 / 0) 20%),
      linear-gradient(to right, oklch(20% 0.015 45 / 0.9) 0%, oklch(20% 0.015 45 / 0.8) 45%, oklch(20% 0.015 45 / 0.3) 75%, oklch(20% 0.015 45 / 0.15) 100%);
  }
  .hero__content { padding-block: calc(var(--header-h) + var(--space-l)) calc(var(--space-l) + 6svh); } /* optical centre: a touch above the middle */
}

.reveal-once { animation: rise 600ms var(--ease-out) both; }
.reveal-once:nth-child(2) { animation-delay: 80ms; }
.reveal-once:nth-child(3) { animation-delay: 160ms; }
.reveal-once:nth-child(4) { animation-delay: 240ms; }
.reveal-once:nth-child(5) { animation-delay: 320ms; }
@keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

/* Work: photos first, one line each */
.work { padding-block: var(--sec-pad) var(--space-l); }
.work__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-m); margin-bottom: var(--space-m); }
.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m) var(--space-s); }
.work-card { display: grid; gap: 0.7rem; align-content: start; }
.work-card--feature { grid-column: 1 / -1; }
.work-card button { display: block; width: 100%; overflow: hidden; border-radius: var(--r-photo); background: var(--sand); cursor: zoom-in; }
.work-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 240ms var(--ease-out); }
.work-card--feature img { aspect-ratio: 16 / 9; }
.work-card__img--portrait { object-position: 50% 38%; }
.work-card__cap { display: grid; gap: 0.15rem; }
.work-card--feature .work-card__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; }
.work-card__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--charcoal); }
.work-card__meta { font-size: var(--step--1); font-weight: 500; color: var(--muted); } /* sentence case: quieter than the caps labels */
.work__all { display: flex; justify-content: center; margin-top: var(--space-l); }
.js .work-card { opacity: 0; transform: translateY(0.75rem); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.js .work-card.is-in { opacity: 1; transform: none; }
/* Section text: the same soft rise as the hero, once (classes added in main.js only when motion is allowed) */
.reveal { opacity: 0; translate: 0 0.75rem; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } /* translate, not transform: buttons keep their press effect */
.reveal.is-in { opacity: 1; translate: none; }
@media (max-width: 699px) {
  .works-grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .work-card--feature img { aspect-ratio: 4 / 3; }
  .work-card--feature .work-card__cap { display: grid; gap: 0.15rem; }
  .work__all .btn { flex: 1; }
}

/* Proof: who we are. Text only: a short rule, then the statement on the page's left edge (like every
   other section), wrapped into balanced lines; "din Italia" in terracotta (colour only) */
.proof { position: relative; isolation: isolate; background: var(--charcoal); color: var(--on-dark); padding-block: var(--sec-pad); }
/* A faint running-bond brick outline, never behind the words: on desktop it lives right of the text
   column and fades in from it; on phones it fills the empty space above and below the statement */
.proof::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23f6f1e6' stroke-width='1'%3E%3Cpath d='M0 0.5H120M0 40.5H120M0.5 0V40M60.5 40V80'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 48px; background-position: right top; /* bricks about 72×24px */
  opacity: var(--brick-alpha, 0.045);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 14%, transparent 32%, transparent 68%, #000 86%, #000 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 14%, transparent 32%, transparent 68%, #000 86%, #000 100%);
}
@media (min-width: 900px) {
  .proof::after {
    inset: 0 0 0 72%; /* the statement ends at about 66-72% of the width; the pattern fades in from there */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-composite: intersect;
  }
}
.proof__inner { display: grid; justify-items: start; gap: var(--space-m); }
.proof__rule { display: block; width: 3.5rem; height: 2px; background: var(--terracotta-l); }
.proof__statement { font-size: var(--t-statement); line-height: 1.12; color: var(--on-dark); max-width: 26ch; text-wrap: balance; }
.proof__statement em { font-style: normal; color: var(--terracotta-l); }

/* Every section is at least one screen tall under the header, with its content centred (owner request) */
main > section:not(.hero) { min-height: var(--screen); display: flex; flex-direction: column; justify-content: center; }
main > section:not(.hero) > .container { width: 100%; }

/* Services: an index */
.services { padding-block: var(--sec-pad); }
.services__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l); align-items: start; }
.services__title { position: sticky; top: calc(var(--header-h) + var(--space-m)); align-self: start; }
.service-index { border-top: 1px solid var(--line); }
.service { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); column-gap: var(--space-s); row-gap: 0.35rem; padding-block: var(--space-s); border-bottom: 1px solid var(--line); }
.service::before { content: ""; grid-row: 1; width: 1rem; height: 0.5rem; margin-top: 0.55em; border-radius: 3px; background: var(--terracotta); }
.service h3 { grid-column: 2; font-size: var(--t-item); }
.service p { grid-column: 2; max-width: 48ch; color: var(--ink); }
@media (max-width: 899px) {
  .services__grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .services__title { position: static; }
}

/* Process: a construction sequence */
.process { background: var(--charcoal); color: var(--on-dark); padding-block: var(--sec-pad); }
.process__title { color: var(--on-dark); margin-bottom: var(--space-m); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-m); position: relative; }
.step { position: relative; display: grid; gap: 0.6rem; align-content: start; }
.step__mark {
  width: 1rem; height: 0.5rem; border-radius: 3px; position: relative; z-index: 1; /* softly rounded brick */
  background: var(--charcoal); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--on-dark) 45%, transparent);
  transition: background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.steps.is-live .step__mark { background: var(--terracotta-l); box-shadow: inset 0 0 0 2px var(--terracotta-l); }
.steps.is-live .step:nth-child(2) .step__mark { transition-delay: 350ms; }
.steps.is-live .step:nth-child(3) .step__mark { transition-delay: 700ms; }
.steps.is-live .step:nth-child(4) .step__mark { transition-delay: 1050ms; }
.steps.is-live .step:nth-child(5) .step__mark { transition-delay: 1400ms; }
.step h3 { color: var(--on-dark); font-size: var(--step-1); margin-top: 0.4rem; min-height: 2.4em; } /* 2 lines (line-height 1.2), so every description starts on one line */
.step p { color: var(--on-dark-2); font-size: var(--step-0); line-height: 1.6; max-width: 26ch; }
@media (min-width: 960px) { .steps { gap: var(--space-s); } .step p { font-size: 1rem; max-width: none; } } /* about 25 characters per line instead of 19 */
/* The process line: an SVG polyline through the marks (horizontal on desktop, vertical on phones), drawn once; it ends at the last mark */
.steps__path { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.steps__path polyline { fill: none; stroke-width: 1; stroke-linejoin: round; }
.steps__path .base { stroke: color-mix(in oklch, var(--on-dark) 22%, transparent); }
.steps__path .draw { stroke: var(--terracotta-l); stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); transition: stroke-dashoffset 1600ms var(--ease-out); }
.steps.is-live .steps__path .draw { stroke-dashoffset: 0; }
@media (max-width: 959px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--space-s); padding-block: var(--space-s); }
  .step__mark { grid-row: 1 / span 2; margin-top: 0.55rem; }
  .step h3 { margin-top: 0; min-height: 0; }
  .step p { max-width: 44ch; }
}

/* Craft: summer kitchens; the photos carry the warmth */
.craft { padding-block: var(--sec-pad); }
.craft__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-l); align-items: center; }
/* Kitchen carousel: photos side by side, snapping; swipe, trackpad, arrow keys or the bar below */
.craft__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--r-photo); scrollbar-width: none;
}
.craft__track::-webkit-scrollbar { display: none; }
.craft__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }
.craft__slide { flex: 0 0 100%; scroll-snap-align: start; display: block; background: var(--sand); cursor: zoom-in; }
.craft__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.craft__nav { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.craft__bar { position: relative; flex: 1; height: 2.75rem; cursor: pointer; touch-action: none; }
/* Autoplay pause/play: a quiet 44px icon at the end of the bar (required for moving content, WCAG 2.2.2) */
.craft__play { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; margin-right: -0.75rem; color: var(--muted); border-radius: var(--r-control); transition: color var(--dur) var(--ease-out); }
.craft__play[hidden] { display: none; }
.craft__play .craft__play-play, .craft__play.is-paused .craft__play-pause { display: none; }
.craft__play.is-paused .craft__play-play { display: block; }
.craft__bar::before, .craft__bar-thumb { position: absolute; top: 50%; height: 3px; translate: 0 -50%; border-radius: 2px; }
.craft__bar::before { content: ""; left: 0; right: 0; background: var(--line); }
.craft__bar-thumb { left: 0; width: calc(100% / 3); background: var(--charcoal); transition: height var(--dur) var(--ease-out); }
.craft__bar:hover .craft__bar-thumb, .craft__bar.is-dragging .craft__bar-thumb { height: 5px; }
.craft__text { display: grid; gap: var(--space-s); align-content: center; }
.craft__text p { color: var(--ink); font-size: var(--step-1); line-height: 1.45; max-width: 30ch; }
.craft__text .btn { justify-self: start; margin-top: var(--space-xs); }
@media (max-width: 899px) {
  .craft__grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .craft__text .btn { justify-self: stretch; }
}

/* Contact */
.contact { border-top: 1px solid var(--line); padding-block: var(--sec-pad); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l); } /* same second-column start as Servicii */
.contact__info { display: grid; gap: var(--space-s); align-content: start; }
.contact__info h2 { max-width: 14ch; }
/* One row per channel, each a whole-row link: icon (what happens), label and value, arrow (it goes somewhere) */
.contact__list { margin: var(--space-xs) 0 0; border-top: 1px solid var(--line); }
.contact__item { border-bottom: 1px solid var(--line); }
.contact__row {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-s);
  margin-inline: -0.6rem; padding: var(--space-s) 0.6rem; border-radius: var(--r-control);
  color: var(--charcoal); text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}
.contact__row:active { background: var(--white-warm); }
.contact__icon {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-control); color: var(--charcoal);
}
.contact__row--call .contact__icon { background: var(--brick); border-color: var(--brick); color: var(--on-dark); }
.contact__text { display: grid; gap: 0.2rem; min-width: 0; }
.contact__label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.contact__value { font-size: var(--step-0); font-weight: 500; overflow-wrap: normal; }
.contact__phone {
  font-family: var(--font-display); font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--brick); font-variant-numeric: tabular-nums; /* terracotta means call; 26px phone to 40px desktop, a clear step under the h2 */
}
.contact__go { color: var(--muted); transition: translate var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.contact__form { display: grid; gap: var(--space-s); align-content: start; }
@media (min-width: 960px) { .contact__form { max-width: 34rem; width: 100%; } } /* narrower than its column, on the same edge as the Servicii list */
.contact__form > :not(.field:nth-of-type(-n+2)) { grid-column: 1 / -1; }
@media (min-width: 600px) { .contact__form { grid-template-columns: 1fr 1fr; } }
.contact__form-title { font-weight: 500; color: var(--muted); } /* a note, not a second heading */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--charcoal); }
.field__opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  font: inherit; min-height: 3rem; padding: 0.8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--white-warm); color: var(--ink); width: 100%;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 4.75rem; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--terracotta); box-shadow: 0 0 0 3px color-mix(in oklch, var(--terracotta) 28%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--brick); background: color-mix(in oklch, var(--terracotta) 6%, var(--white-warm)); }
.field__error { color: var(--brick); font-size: var(--step--1); font-weight: 600; }
.contact__form-actions { display: flex; }
.contact__form-actions .btn[disabled] { opacity: 0.7; cursor: progress; }
.form-status:empty { display: none; }
.form-status { font-size: var(--step--1); padding: 0.75rem 1rem; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--white-warm); color: var(--ink); }
.form-status[data-state="success"] { border-color: var(--terracotta); color: var(--charcoal); font-weight: 600; }
.form-status[data-state="error"] { border-color: var(--brick); color: var(--brick); font-weight: 600; }
.form-status a { color: inherit; }
.contact__form-note { font-size: var(--step--1); color: var(--muted); }
.contact__form-note a { display: flex; width: fit-content; align-items: center; min-height: 2.75rem; color: var(--charcoal); } /* always on its own line, under the sentence */
@media (max-width: 899px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .contact__form-actions .btn { flex: 1; }
}

/* Desktop: every section fits one screen under the header */
@media (min-width: 960px) and (min-height: 600px) {
  :root { --sec-pad: clamp(3rem, 10svh, 7rem); }

  /* Work: a mosaic that fills exactly one screen; the portrait house gets a tall cell */
  .work { display: flex; flex-direction: column; height: var(--screen); min-height: 36rem; max-height: 62rem; padding-block: var(--sec-pad); }
  .work > .container { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: var(--space-m); row-gap: var(--space-m); }
  .work__head { grid-column: 1; grid-row: 1; margin-bottom: 0; } /* the space lives in row-gap, so the button centres on the title itself */
  .work__all { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .works-grid { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
  .work-card { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; }
  .work-card--feature { grid-column: 1; grid-row: 1 / span 2; }
  .work-card:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .work-card button { flex: 1; min-height: 0; }
  .work-card--feature .work-card__cap { display: grid; gap: 0.15rem; } /* two-line caption like its neighbours: photo bottoms align */
  .work-card { container-type: inline-size; }
  .work-card__title { font-size: min(var(--step-1), 8.6cqi); white-space: nowrap; } /* one-line titles at every desktop width, so captions stay two lines */
  .work-card img, .work-card--feature img { height: 100%; aspect-ratio: auto; }
  .work-card .work-card__img--portrait { transform: scale(1.3); transform-origin: 50% 32%; }
  .work-card button:hover .work-card__img--portrait { transform: scale(1.33); }

  .service { padding-block: clamp(0.5rem, 1.8svh, 1.5rem); }
  .craft__slide img { max-height: calc(var(--screen) - 2 * var(--sec-pad) - 3.5rem); }
  .contact__form { gap: clamp(0.6rem, 1.6svh, 1.5rem); }
  .contact__row { padding-block: clamp(0.5rem, 1.6svh, 1.5rem); }
  .contact__info { gap: clamp(0.5rem, 1.6svh, 1.5rem); }
  .contact__list { margin-top: 0; }
}

/* Footer */
.site-footer { background: var(--charcoal); color: var(--on-dark); }
.site-footer__inner { padding-block: var(--space-m); }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.site-footer__legal { font-size: var(--step--1); color: var(--on-dark-2); }

/* Simple text page (confidentialitate.html) */
.page { max-width: 42rem; margin: 0 auto; padding: var(--space-l) var(--gutter) var(--space-xl); }
.page h1 { font-size: var(--step-3); margin-bottom: var(--space-m); }
.page h2 { font-size: var(--step-1); margin: var(--space-m) 0 var(--space-xs); }
.page p, .page li { color: var(--ink); margin-bottom: 0.6rem; }
.page ul { list-style: disc; padding-left: 1.25rem; }
.page a { color: var(--terracotta-d); }
.page .back { display: inline-block; margin-top: var(--space-m); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--terracotta); color: var(--charcoal); }

/* Contact access: call bar on small screens */
.contact-bar { display: none; }
@media (max-width: 899px) {
  .contact-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--charcoal);
    border-top: 1px solid color-mix(in oklch, var(--on-dark) 15%, transparent);
    transform: translateY(110%); transition: transform 220ms var(--ease-out);
  }
  .contact-bar.is-visible { transform: none; }
  .contact-bar a { display: flex; align-items: center; justify-content: center; min-height: 3rem; border-radius: var(--r-control); font-weight: 600; text-decoration: none; color: var(--on-dark); }
  .contact-bar__call { background: var(--brick); }
  .contact-bar__wa { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-dark) 35%, transparent); }
  body:has([data-agentation-portal]) .contact-bar { right: 4.5rem; }
}

/* Lightbox */
.lightbox { border: 0; padding: 0; background: var(--charcoal); max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; display: none; place-items: center; color: var(--on-dark); }
.lightbox[open] { display: grid; animation: fade 180ms var(--ease-out); }
.lightbox::backdrop { background: var(--charcoal); }
.lightbox__figure { display: grid; gap: 0.75rem; justify-items: center; max-width: min(92vw, 1400px); touch-action: pan-y; }
.lightbox img { max-width: 92vw; max-height: 80dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-photo); transition: opacity 180ms var(--ease-out); }
.lightbox img.is-swapping { opacity: 0; }
.lightbox figcaption { text-align: center; color: var(--on-dark-2); padding-inline: 1rem; font-size: var(--step-0); text-transform: none; letter-spacing: 0; }
.lightbox__count { margin-left: 0.5rem; color: var(--terracotta-l); white-space: nowrap; }
.lightbox__close, .lightbox__nav {
  position: fixed; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--r-control);
  font-size: 2rem; line-height: 1; color: var(--on-dark);
  background: color-mix(in oklch, var(--charcoal) 70%, transparent); transition: background-color var(--dur) var(--ease-out);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-dark) 35%, transparent);
}
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav[hidden] { display: none; }
.lightbox__call { position: fixed; top: 1rem; left: 1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
@media (max-width: 699px) {
  .lightbox__nav { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Hover only for mouse and trackpad users */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--brick-deep); border-color: var(--brick-deep); }
  .btn--outline:hover { background: var(--charcoal); color: var(--on-dark); }
  .btn--quiet-light:hover { border-color: var(--on-dark); }
  .nav__links a:hover { color: var(--charcoal); border-bottom-color: var(--terracotta); }
  .work-card button:hover img { transform: scale(1.02); }
  .contact__row:hover { background: var(--white-warm); }
  .craft__play:hover { color: var(--charcoal); }
  .contact__row:hover .contact__go { translate: 4px 0; color: var(--charcoal); }
  .lightbox__close:hover, .lightbox__nav:hover { background: var(--brick); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-once, .lightbox[open] { animation: none; }
  .js .work-card { opacity: 1; transform: none; transition: none; }
  .reveal { opacity: 1; translate: none; transition: none; }
  .craft__track { scroll-behavior: auto; }
  .steps__path .draw { transition: none; }
  .steps.is-live .step__mark { transition-delay: 0ms !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}