/* =============================================================================
   chisinauspa.com — shared stylesheet
   Single file, no build step, no external dependency except the webfont link.
   Sections:
     01 tokens            08 hero
     02 reset & base      09 plates (CSS picture placeholders)
     03 typography        10 content components
     04 layout & grids    11 closing panel / CTA band / footer
     05 rules & marks     12 floating contact widget
     06 buttons & links   13 mobile action bar
     07 nav & drawer      14 motion, responsive, reduced motion
   ============================================================================= */


/* 01 — tokens ============================================================== */
:root{
  /* surfaces — light field */
  --paper:        #F6F2EC;
  --paper-2:      #EDE7DE;
  --paper-3:      #E4DCD0;
  --travertine:   #DED5C8;

  /* lines */
  --line:         #D7CDBE;
  --line-strong:  #BFB3A1;
  --line-inv:     #34403C;

  /* ink — dark surfaces and body text */
  --ink:          #1E2422;
  --ink-2:        #2B3330;
  --ink-3:        #161B1A;

  /* accent — patinated copper, the only accent in the system */
  --verdigris:    #3F6B5C;
  --verdigris-d:  #315448;
  --verdigris-l:  #6FA08D;

  /* text */
  /* darkened from #6E6A61: on --paper-2 bands the lighter value measured
     4.38:1, just under the 4.5:1 floor for body text */
  --muted:        #67635A;
  --muted-inv:    #A9AFA8;
  --on-ink:       #F1EEE8;

  --focus:        #3F6B5C;

  /* families */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-text:    "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* spacing */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --gut:      clamp(1.25rem, 4vw, 3.5rem);
  --maxw:     1240px;
  /* strans fata de clamp(4rem,6.5vw,6rem): clientul voia sa se scrolleze repede,
     iar spatiile dintre sectiuni adunau mai multa inaltime decat pozele */
  --sec-y:    clamp(2.75rem, 4.6vw, 4.25rem);
  /* era clamp(5rem,8.5vw,8rem) = 122px sus SI jos pe fiecare banda mare,
     adica mai multa inaltime decat o fotografie intreaga */
  --sec-y-lg: clamp(3.25rem, 5.4vw, 5rem);

  /* distance from the container edge to the viewport edge, used for bleeds */
  --bleed: calc(var(--gut) + max(0px, (100vw - var(--maxw)) / 2));

  /* geometry */
  --r-0: 0;
  --r-full: 999px;
  --nav-h: 84px;
  --nav-h-stuck: 64px;

  /* aspect ratios for picture plates */
  --ar-tall: 4 / 5;
  --ar-wide: 16 / 9;
  --ar-sq:   1 / 1;

  /* shadows — the system uses exactly three */
  --sh-plate: 0 1px 0 rgba(30,36,34,.05);
  --sh-fab:   0 6px 28px rgba(30,36,34,.22);
  --sh-nav:   0 1px 0 var(--line);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast:   .28s;
  --t-mid:    .55s;
  --t-slow:   .9s;
  --t-reveal: 1.15s;
  --t-curtain:1.5s;

  /* mineral grain, declared once and reused by every plate */
  --grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* 02 — reset & base ======================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h-stuck) + 1rem);
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  color:var(--muted);
  font-family:var(--font-text);
  font-size:1rem;
  line-height:1.72;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:1200px){ body{ font-size:1.0625rem; } }

h1,h2,h3,h4,p,figure,blockquote,dl,dd,table{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg{ display:block; }

::selection{ background:var(--verdigris); color:var(--paper); }

:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.on-ink :focus-visible,
.band--ink :focus-visible{ outline-color:var(--verdigris-l); }

/* keyboard escape hatch to the main landmark */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.9rem 1.4rem;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:0; }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* 03 — typography ========================================================== */
h1,.d-1,h2,.d-2,h3,.d-3,h4,.d-4{
  font-family:var(--font-display);
  color:var(--ink);
  text-wrap:balance;
}

h1,.d-1{
  font-weight:300;
  font-size:clamp(2.9rem, 6.2vw, 5.6rem);
  line-height:.98;
  letter-spacing:-.022em;
  max-width:18ch;
}
h2,.d-2{
  font-weight:300;
  font-size:clamp(2.1rem, 3.7vw, 3.4rem);
  line-height:1.06;
  letter-spacing:-.018em;
  max-width:22ch;
}
h3,.d-3{
  font-weight:400;
  font-size:clamp(1.35rem, 1.7vw, 1.7rem);
  line-height:1.22;
  letter-spacing:-.01em;
}
h4,.d-4{
  font-weight:400;
  font-size:clamp(1.1rem, 1.3vw, 1.3rem);
  line-height:1.3;
  letter-spacing:-.006em;
}

p{ text-wrap:pretty; max-width:62ch; }
p + p{ margin-top:var(--sp-4); }

.lede{
  font-size:clamp(1.05rem, 1.25vw, 1.22rem);
  line-height:1.62;
  color:var(--ink);
  max-width:60ch;
}

/* the one italic on the page, reserved for the statement band */
.d-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.6rem, 2.6vw, 2.5rem);
  line-height:1.3;
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:26ch;
  text-wrap:balance;
}

.eyebrow{
  display:flex; align-items:center; gap:.75em;
  font-size:.6875rem; font-weight:600;
  line-height:1.2; letter-spacing:.22em; text-transform:uppercase;
  color:var(--verdigris);
}
/* vertical mark — the signature stroke of the site */
.eyebrow::before{
  content:""; flex:none;
  width:2px; height:1.05em;
  background:var(--verdigris);
}
.eyebrow--center{ justify-content:center; }

.label{
  font-size:.75rem; font-weight:600;
  line-height:1.3; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

.price{
  font-size:.9375rem; font-weight:500;
  line-height:1.4; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

.foot{
  font-size:.875rem;
  line-height:1.75;
  color:var(--muted);
}

.mark{ color:var(--verdigris); }

/* inverted text colours, applied by the dark bands */
.on-ink{ color:var(--muted-inv); }
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4,
.on-ink .d-1,.on-ink .d-2,.on-ink .d-3,.on-ink .d-4,
.on-ink .lede,.on-ink .d-quote{ color:var(--on-ink); }
.on-ink .eyebrow{ color:var(--verdigris-l); }
.on-ink .eyebrow::before{ background:var(--verdigris-l); }
.on-ink .label{ color:var(--muted-inv); }
.on-ink .foot{ color:var(--muted-inv); }
.on-ink .price{ color:var(--on-ink); }


/* 04 — layout & grids ====================================================== */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.sec{ padding-block:var(--sec-y); }
.sec--lg{ padding-block:var(--sec-y-lg); }
.sec--tight{ padding-block:clamp(3rem,5vw,4.5rem); }

.band--paper2{ background:var(--paper-2); }
.band--paper3{ background:var(--paper-3); }
.band--ink{
  background:var(--ink);
  background-image:linear-gradient(150deg, var(--ink-2) 0%, var(--ink) 55%, var(--ink-3) 100%);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2.5rem);
}
.g-split{ display:grid; grid-template-columns:1fr .76fr; gap:clamp(2rem,4vw,4.5rem); }
.g-7-5  { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,4vw,4.5rem); }
.g-6-6  { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.75rem,3.4vw,4rem); }
.g-4-8  { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(2rem,4vw,5rem); }

/* sticky heading column used by .g-4-8 sections */
.stick{ position:sticky; top:calc(var(--nav-h-stuck) + 2.5rem); align-self:start; }

.stack > * + *{ margin-top:var(--sp-5); }
.stack-sm > * + *{ margin-top:var(--sp-3); }
.stack-lg > * + *{ margin-top:var(--sp-7); }

.center{ text-align:center; }
.center h1,.center h2,.center .lede,.center p,.center .d-quote{ margin-inline:auto; }

.head{ max-width:56ch; }
.head > * + *{ margin-top:var(--sp-4); }


/* 05 — rules & marks ======================================================= */
.rule{ height:1px; border:0; margin:0; background:var(--line); }
.rule--inv{ background:var(--line-inv); }
.rule--accent{ background:var(--verdigris); }

/* short vertical stroke used above centred statements */
.tick-v{
  width:2px; height:48px;
  background:var(--verdigris);
  margin-inline:auto;
}
.on-ink .tick-v{ background:var(--verdigris-l); }


/* 06 — buttons & links ===================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.62rem;
  padding:1.15rem 1.9rem;
  border-radius:var(--r-0);
  font-size:.8125rem; font-weight:600;
  line-height:1.35; letter-spacing:.1em; text-transform:uppercase; text-align:center;
  transition:background-color var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.btn svg{ width:14px; height:14px; flex:none; transition:transform var(--t-mid) var(--ease); }

.btn--solid{ background:var(--ink); color:var(--paper); border:1px solid var(--ink); }
.btn--solid:hover{ background:var(--verdigris); border-color:var(--verdigris); }
.btn--solid:hover svg{ transform:translate(3px,-3px); }
.btn--solid:active{ background:var(--verdigris-d); border-color:var(--verdigris-d); }

.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.btn--ghost:hover{ color:var(--verdigris); border-color:var(--verdigris); }
.btn--ghost:hover svg{ transform:translate(3px,-3px); }

/* accent fill, used on basalt where a solid ink button would disappear */
.btn--accent{ background:var(--verdigris); color:var(--paper); border:1px solid var(--verdigris); }
.btn--accent:hover{ background:var(--verdigris-d); border-color:var(--verdigris-d); }
.btn--accent:hover svg{ transform:translate(3px,-3px); }

.on-ink .btn--ghost{ color:var(--on-ink); border-color:var(--line-inv); }
.on-ink .btn--ghost:hover{ color:var(--on-ink); border-color:var(--verdigris-l); }

.btn--block{ display:flex; width:100%; justify-content:center; }

/* text link with a rule that grows from the left */
.btn--text,
.link-line{
  display:inline-flex; align-items:center; gap:.55rem;
  padding-bottom:.35rem;
  color:var(--ink);
  font-size:.8125rem; font-weight:600;
  line-height:1; letter-spacing:.1em; text-transform:uppercase;
  background-image:linear-gradient(var(--verdigris),var(--verdigris));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.btn--text svg,.link-line svg{ width:13px; height:13px; flex:none; transition:transform var(--t-mid) var(--ease); }
.btn--text:hover,.link-line:hover{ background-size:100% 1px; color:var(--verdigris); }
.btn--text:hover svg,.link-line:hover svg{ transform:translate(3px,-3px); }
.on-ink .btn--text,.on-ink .link-line{ color:var(--on-ink); background-image:linear-gradient(var(--verdigris-l),var(--verdigris-l)); }
.on-ink .btn--text:hover,.on-ink .link-line:hover{ color:var(--verdigris-l); }

/* inline text link inside running copy */
.a-inline{
  color:var(--ink);
  border-bottom:1px solid var(--line-strong);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.a-inline:hover{ color:var(--verdigris); border-color:var(--verdigris); }
.on-ink .a-inline{ color:var(--on-ink); border-color:rgba(255,255,255,.3); }
.on-ink .a-inline:hover{ color:var(--verdigris-l); border-color:var(--verdigris-l); }

.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1rem,2vw,2rem); }
.fine{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); line-height:1.6;
}
.on-ink .fine{ color:var(--muted-inv); }


/* 07 — nav & drawer ======================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-slow) var(--ease);
}
.nav.is-stuck{ background:var(--paper); box-shadow:var(--sh-nav); }
.nav.is-stuck::after{ transform:scaleX(1); }

.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);
  height:var(--nav-h);
  transition:height var(--t-fast) var(--ease);
}
.nav.is-stuck .nav__in{ height:var(--nav-h-stuck); }

.logo{ display:flex; align-items:baseline; gap:6px; flex:none; }
.logo b{
  font-family:var(--font-display); font-weight:400;
  font-size:1.35rem; letter-spacing:-.01em; color:var(--ink);
}
.logo span{
  font-size:.625rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--verdigris);
}

.nav__links{ display:flex; gap:clamp(1.1rem,2.4vw,2.1rem); }
.nav__link{
  display:inline-block;
  padding-bottom:4px;
  font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  background-image:linear-gradient(var(--verdigris),var(--verdigris));
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:color var(--t-fast) var(--ease), background-size var(--t-mid) var(--ease);
}
.nav__link:hover{ color:var(--ink); background-size:100% 1px; }
.nav__link[aria-current="page"]{ color:var(--ink); background-size:100% 1px; }

.nav__cta{ flex:none; padding:.85rem 1.35rem; font-size:.6875rem; }

.nav__burger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
  flex:none;
}
.nav__burger i{
  display:block; position:relative;
  width:18px; height:1px; background:var(--ink);
  transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav__burger i::before,
.nav__burger i::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:var(--ink);
  transition:transform var(--t-fast) var(--ease);
}
.nav__burger i::before{ top:-6px; }
.nav__burger i::after{ top:6px; }
.nav__burger[aria-expanded="true"] i{ background:transparent; }
.nav__burger[aria-expanded="true"] i::before{ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i::after{ transform:translateY(-6px) rotate(-45deg); }

/* drawer opens by animating the grid track, no hardcoded heights */
.drawer{
  display:grid; grid-template-rows:0fr;
  background:var(--paper);
  transition:grid-template-rows var(--t-mid) var(--ease);
}
.drawer.is-open{ grid-template-rows:1fr; }
.drawer__in{ min-height:0; overflow:hidden; }
/* the rule sits inside the clipped area so it cannot leak while closed */
.drawer__list{ padding-block:var(--sp-2); border-top:1px solid var(--line); }
.drawer__list li + li{ border-top:1px solid var(--line); }
.drawer__list a{
  display:flex; align-items:center; gap:.6rem;
  padding:1rem 0;
  font-family:var(--font-display); font-weight:400;
  font-size:1.35rem; letter-spacing:-.01em; color:var(--ink);
}
.drawer__list a[aria-current="page"]::before{
  content:""; width:7px; height:7px; border-radius:var(--r-full);
  background:var(--verdigris); flex:none;
}
.drawer__foot{ padding:var(--sp-4) 0 var(--sp-6); }
body.is-locked{ overflow:hidden; }


/* 08 — hero ================================================================ */
.hero{
  padding-top:calc(var(--nav-h) + clamp(2.5rem,6vw,5.5rem));
  padding-bottom:clamp(3rem,6vw,5.5rem);
}
.hero__in{
  display:grid;
  /* coloana pozei ingustata de la .76fr: poza se micsoreaza proportional,
     deci nu se taie nimic din ea, doar ocupa mai putin ecran */
  grid-template-columns:1fr .62fr;
  gap:clamp(2rem,4vw,4.5rem);
  align-items:center;
  min-height:min(80vh,760px);
}
.hero__copy > * + *{ margin-top:var(--sp-5); }
.hero__copy h1{ margin-top:var(--sp-5); }
.hero__copy .lede{ max-width:44ch; }
.hero__actions{ margin-top:var(--sp-7); }

/* three-fact rail under a hairline */
.meta{
  margin-top:var(--sp-7);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--sp-3) clamp(1.75rem,4vw,3.5rem);
}
.meta > div{ min-width:0; }
.meta dt{
  font-size:.625rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.meta dd{ margin-top:.35rem; font-size:.9375rem; color:var(--ink); }
.meta dd a{ transition:color var(--t-fast) var(--ease); }
.meta dd a:hover{ color:var(--verdigris); }
.on-ink .meta{ border-color:var(--line-inv); }
.on-ink .meta dt{ color:var(--muted-inv); }
.on-ink .meta dd{ color:var(--on-ink); }

/* picture column, bleeding to the right edge of the viewport */
.hero__media{ position:relative; }

/* basalt square resting over the left edge of the plate */
/* Sta pe muchia din dreapta: pe stanga acoperea logoul TerraLux de pe peretele
   receptiei, adica exact subiectul fotografiei. */
.seal{
  position:absolute; top:8%; right:-28px; z-index:3;
  width:132px; height:132px;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--sp-4);
  background:var(--ink); color:var(--on-ink);
}
.seal b{
  display:block;
  font-family:var(--font-display); font-weight:400; font-size:1.3rem;
  letter-spacing:-.01em; line-height:1;
}
.seal span{
  display:block; margin-top:.6rem;
  font-size:.5625rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; line-height:1.5;
  color:var(--verdigris-l);
}

/* legend plaque anchored to the lower left edge of the plate */
.plate__cap--float{
  position:absolute; bottom:7%; left:-32px; z-index:3;
  margin:0;
  padding:.85rem 1.15rem;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--sh-plate);
  color:var(--muted);
  font-size:.6875rem; letter-spacing:.16em;
}


/* 09 — plates (CSS picture placeholders) =================================== */
/* Every picture lives in .plate. The stone is drawn in CSS, so the page is
   finished even with an empty image folder; a delivered file covers it. */
.plate{
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--ar-wide);
  background-color:var(--travertine);
  background-image:
    /* hem: three verdigris hairlines above the bottom edge */
    linear-gradient(to top,
      transparent 0 18px,
      rgba(63,107,92,.14) 18px 19px,
      transparent 19px 21px,
      rgba(63,107,92,.10) 21px 22px,
      transparent 22px 24px,
      rgba(63,107,92,.06) 24px 25px,
      transparent 25px),
    /* concentric rings, opposite the light */
    repeating-radial-gradient(circle at 78% 82%, rgba(30,36,34,.03) 0 1px, transparent 1px 46px),
    /* vertical weft */
    repeating-linear-gradient(90deg, rgba(30,36,34,.05) 0 1px, transparent 1px 5px),
    /* sedimentary strata, light and dark bedding planes */
    repeating-linear-gradient(178deg, rgba(30,36,34,.032) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(178deg, rgba(255,255,255,.075) 0 2px, transparent 2px 9px),
    /* quarry vignette, deepest away from the light */
    radial-gradient(130% 108% at 24% 12%, rgba(255,255,255,.38) 0 32%, rgba(30,36,34,.17) 100%),
    /* travertine body */
    linear-gradient(168deg, #EFE9DF 0%, #DBD1C2 46%, #BFB19D 100%);
}
/* grain */
.plate::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:var(--grain);
  background-size:180px 180px;
  opacity:.2;
  mix-blend-mode:multiply;
  pointer-events:none;
}
/* daylight drifting across the stone — the only ambient motion on the page */
.plate::after{
  content:""; position:absolute; inset:-20%; z-index:1;
  background:radial-gradient(38% 46% at 26% 18%, rgba(255,255,255,.52), rgba(255,255,255,0) 70%);
  mix-blend-mode:soft-light;
  animation:drift 28s var(--ease) infinite alternate;
  will-change:transform;
  pointer-events:none;
}
@keyframes drift{
  from{ transform:translate3d(-6%,-4%,0) scale(1); }
  to  { transform:translate3d(8%,6%,0) scale(1.16); }
}

.plate img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  /* keeps a missing file readable instead of breaking the layout */
  color:var(--muted);
  font:400 .8125rem/1.4 var(--font-text);
}

.plate--tall{ aspect-ratio:var(--ar-tall); }
.plate--wide{ aspect-ratio:var(--ar-wide); }
.plate--sq  { aspect-ratio:var(--ar-sq); }
/* This used to be a fixed 500px band, which sounds cinematic but on a 1240px
   wrap it cropped 28% off a 16/9 photograph — enough that every wide picture
   read as shoved up against the lens. The picture is shown whole now; the
   max-height is only there so it cannot swallow a short screen. */
@media (min-width:900px){
  /* ingustata, nu scurtata: la 16/9 pastrat, o latime mai mica inseamna automat
     o inaltime mai mica, si poza ramane intreaga. Daca as fi taiat din inaltime,
     s-ar fi intors exact senzatia de "prea aproape" reclamata inainte. */
  .plate--wide{
    aspect-ratio:16 / 9; height:auto;
    max-width:900px; margin-inline:auto;
  }
}

/* basalt variant — capped in height so it never reads as a hole */
.plate--dark{
  /* inaltime fixa doar cat timp placa e goala; cand poarta o poza, proportia ei
     vine pe element (style="aspect-ratio:..") si inaltimea fixa ar fi impins
     latimea peste ecran. */
  aspect-ratio:auto;
  height:min(38vh,340px);
  width:100%;
  background-color:var(--ink-2);
  background-image:
    linear-gradient(to top,
      transparent 0 18px,
      rgba(111,160,141,.22) 18px 19px,
      transparent 19px 21px,
      rgba(111,160,141,.16) 21px 22px,
      transparent 22px 24px,
      rgba(111,160,141,.10) 24px 25px,
      transparent 25px),
    repeating-radial-gradient(circle at 78% 82%, rgba(255,255,255,.022) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(178deg, rgba(255,255,255,.028) 0 2px, transparent 2px 9px),
    linear-gradient(168deg, #26302C 0%, #1E2422 52%, #171D1B 100%);
}
.plate--dark[style*="aspect-ratio"]{ height:auto; }
.plate--dark::before{ opacity:.22; mix-blend-mode:screen; }
.plate--dark::after{ opacity:.28; }

.plate__cap{
  display:block;
  margin-top:14px;
  font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.on-ink .plate__cap{ color:var(--muted-inv); }

/* offset pair of plates */
.plate-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,2.5rem); align-items:start; }
.plate-pair > figure:last-child{ margin-top:clamp(1.5rem,4vw,4rem); }


/* 10 — content components ================================================== */

/* 10.1 intro block: lede plus two running columns ------------------------- */
.intro .lede{ max-width:52ch; }
.intro__cols{ margin-top:clamp(2rem,3.5vw,3.5rem); }

/* 10.2 index rows — typographic replacement for card grids ---------------- */
.idx{ border-top:1px solid var(--line); }
.idx > li{ border-bottom:1px solid var(--line); }
.idx__row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1.25rem,3.5vw,3.5rem);
  align-items:start;
  padding:clamp(1.75rem,3vw,2.6rem) clamp(.75rem,1.6vw,1.5rem);
  margin-inline:calc(-1 * clamp(.75rem,1.6vw,1.5rem));
  transition:background-color var(--t-mid) var(--ease);
}
a.idx__row::after{ content:""; position:absolute; inset:0; }
a.idx__row:hover{ background:var(--paper-3); }
.idx__num{
  padding-top:.55em;
  font-size:.75rem; font-weight:500;
  letter-spacing:.16em; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--verdigris);
  transition:color var(--t-mid) var(--ease);
}
.idx__body p{ margin-top:var(--sp-3); max-width:62ch; }
.idx__body .label{ margin-top:var(--sp-3); }
.idx__go{
  align-self:center; flex:none;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--r-full);
  color:var(--ink);
  transition:background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.idx__go svg{ width:15px; height:15px; transition:transform var(--t-mid) var(--ease); }
a.idx__row:hover .idx__go{ background:var(--verdigris); border-color:var(--verdigris); color:var(--paper); }
a.idx__row:hover .idx__go svg{ transform:translateX(3px); }

.on-ink .idx{ border-color:var(--line-inv); }
.on-ink .idx > li{ border-color:var(--line-inv); }
.on-ink .idx__num{ color:var(--verdigris-l); }
.on-ink a.idx__row:hover{ background:var(--ink-2); }
.on-ink .idx__go{ border-color:var(--line-inv); color:var(--on-ink); }
.on-ink a.idx__row:hover .idx__go{ background:var(--verdigris); border-color:var(--verdigris); color:var(--paper); }

/* 10.3 reasons — definition pairs, two columns, no boxes ------------------ */
.reasons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2rem,4vw,4.5rem); }
.reasons > div{ padding-block:var(--sp-6); border-top:1px solid var(--line); }
.reasons > div:nth-child(-n+2){ border-top:0; padding-top:0; }
.reasons dt{
  display:flex; align-items:baseline; gap:.75rem;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.35rem,1.7vw,1.7rem); line-height:1.22; letter-spacing:-.01em;
  color:var(--ink);
}
.reasons dt::before{
  content:""; flex:none; width:2px; height:.85em; background:var(--verdigris);
}
.reasons dd{ margin-top:var(--sp-3); }
.on-ink .reasons > div{ border-color:var(--line-inv); }
.on-ink .reasons dt{ color:var(--on-ink); }
.on-ink .reasons dt::before{ background:var(--verdigris-l); }

/* 10.4 statement band ----------------------------------------------------- */
.quote{ text-align:center; }
.quote .d-quote{ margin-top:var(--sp-6); margin-inline:auto; }
.quote p:not(.d-quote){ margin-top:var(--sp-5); margin-inline:auto; max-width:56ch; }

/* 10.5 typographic cells — words separated by rules only ------------------ */
.cells{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cells > li{
  padding:clamp(1.75rem,3vw,2.75rem) clamp(1rem,2vw,1.75rem);
  border-left:1px solid var(--line);
}
.cells > li:first-child{ border-left:0; padding-left:0; }
.cells h3,.cells .d-3{ font-size:clamp(1.3rem,2.2vw,2rem); }
.cells p{ margin-top:var(--sp-3); font-size:.9375rem; }
.on-ink .cells,.on-ink .cells > li{ border-color:var(--line-inv); }

/* 10.6 service lists — dot separated lines from the client copy ----------- */
.svc-line{
  margin-top:var(--sp-3);
  font-size:.9375rem; line-height:1.7; letter-spacing:.01em;
  color:var(--ink);
  max-width:64ch;
}
.on-ink .svc-line{ color:var(--on-ink); }

/* 10.7 pricing table ------------------------------------------------------ */
.pricing{ width:100%; border-collapse:collapse; }
.pricing caption{ text-align:left; padding-bottom:var(--sp-4); }
.pricing th{
  text-align:left;
  padding:0 0 var(--sp-3);
  border-bottom:1px solid var(--line-strong);
  font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.pricing th:last-child,.pricing td:last-child{ text-align:right; }
.pricing td{
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);
  vertical-align:baseline;
}
.pricing tbody tr{ transition:background-color var(--t-mid) var(--ease); }
.pricing tbody tr:hover{ background:var(--paper-3); }
.pricing .pricing__name{ color:var(--ink); }
.pricing .pricing__note{ display:block; margin-top:.2rem; font-size:.8125rem; color:var(--muted); }
.pricing__from{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:.4rem; }

/* 10.8 gift card block ---------------------------------------------------- */
.gift{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,4vw,4.5rem); align-items:start; }
.gift__body > * + *{ margin-top:var(--sp-5); }
.ticks{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); }
.ticks li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.ticks svg{ width:14px; height:14px; flex:none; color:var(--verdigris); }
.on-ink .ticks li{ color:var(--on-ink); }
.on-ink .ticks svg{ color:var(--verdigris-l); }


/* 11 — closing panel, CTA band, footer ===================================== */

/* 11.1 closing panel — the strongest block on every page ------------------ */
.close{ position:relative; }
.close::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--verdigris);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-slow) var(--ease);
}
.close.is-in::before{ transform:scaleX(1); }
.close__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,4vw,4.5rem); align-items:start; }
.close__copy > * + *{ margin-top:var(--sp-5); }
.close__copy .btn{ margin-top:var(--sp-6); }

.plaques{ display:grid; gap:var(--sp-3); }
.plaque{
  display:block;
  padding:var(--sp-4) var(--sp-5);
  background:var(--ink-2);
  border:1px solid var(--line-inv);
  transition:border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
a.plaque:hover{ border-color:var(--verdigris-l); background:var(--ink); }
.plaque .label{ color:var(--muted-inv); }
.plaque b{
  display:block; margin-top:.4rem;
  font-weight:400; font-size:1.0625rem; color:var(--on-ink);
}

.social{ display:flex; flex-wrap:wrap; gap:var(--sp-5); margin-top:var(--sp-5); }
.social a{ color:var(--muted-inv); transition:color var(--t-fast) var(--ease); }
.social a:hover{ color:var(--verdigris-l); }
.social svg{ width:20px; height:20px; }

/* 11.2 final CTA band ----------------------------------------------------- */
.cta{ text-align:center; }
/* every <p> carries a 62ch cap from the base rules, so without an auto margin
   the eyebrow and the fine print stay pinned left while the heading centres */
.cta p{ margin-inline:auto; }
.cta .eyebrow{ justify-content:center; }
.cta h2{ margin:var(--sp-5) auto 0; }
.cta .btn{ margin-top:var(--sp-6); }
.cta .fine{ margin-top:var(--sp-4); max-width:none; }

/* 11.3 footer ------------------------------------------------------------- */
.footer{ background:var(--ink); padding-block:var(--sec-y) var(--sp-6); }
/* Subsolul sta pe randuri, nu pe coloane: intai marca si adresa, apoi „Pages" pe
   un rand, apoi „On terralux.md" pe alt rand. In turn vertical, cele zece linkuri
   lasau jumatate de subsol gol. */
.footer__top{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:start; }
.footer__top .stack-sm{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); }
.footer__top .stack-sm > * + *{ margin-top:0; }
.footer__top .logo b{ color:var(--on-ink); }
.footer__top .logo span{ color:var(--verdigris-l); }
.footer__addr{ margin-top:var(--sp-4); }
.footer__addr a{ transition:color var(--t-fast) var(--ease); }
.footer__addr a:hover{ color:var(--verdigris-l); }

.footer__seo{ margin-top:var(--sp-8); padding-top:var(--sp-7); border-top:1px solid var(--line-inv); }
.footer__seo .cols{
  margin-top:var(--sp-5);
  column-count:2; column-gap:var(--sp-8);
}
/* pe ecran lat blocul SEO intra pe trei coloane: acelasi text, o treime din
   inaltime. Era 18% din toata pagina doar el. */
@media (min-width:1100px){
  .footer__seo .cols{ column-count:3; column-gap:var(--sp-7); }
}
.footer__seo .cols p{ max-width:none; break-inside:avoid; }
.footer__seo .cols p + p{ margin-top:var(--sp-4); }
.footer__keys{ margin-top:var(--sp-6); }

.footer__bottom{
  margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid var(--line-inv);
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6);
  align-items:center; justify-content:space-between;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:var(--sp-5); }
.footer__legal a,.footer__bottom a{ transition:color var(--t-fast) var(--ease); }
.footer__legal a:hover,.footer__bottom a:hover{ color:var(--verdigris-l); }


/* 12 — floating contact widget ============================================= */
.fab{
  position:fixed; z-index:95;
  right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem);
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-4);
}
.fab__menu{
  display:flex; flex-direction:column; align-items:flex-end; gap:.55rem;
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear var(--t-mid);
}
.fab__item{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .85rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  box-shadow:var(--sh-fab);
  color:var(--ink);
  opacity:0;
  transition:opacity var(--t-mid) var(--ease), border-color var(--t-fast) var(--ease);
  transition-delay:var(--d,0s);
}
.fab__item svg{ width:20px; height:20px; flex:none; color:var(--verdigris); }
.fab__item span{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  transition:max-width var(--t-mid) var(--ease), padding-right var(--t-mid) var(--ease);
}
.fab__item:hover span,.fab__item:focus-visible span{ max-width:9rem; padding-right:.3rem; }
.fab__item:hover{ border-color:var(--verdigris); }

.fab.is-open .fab__menu{ visibility:visible; pointer-events:auto; transition-delay:0s; }
.fab.is-open .fab__item{ opacity:1; }
/* cascade from the bottom pill upwards */
.fab.is-open .fab__item:nth-last-child(1){ --d:0s; }
.fab.is-open .fab__item:nth-last-child(2){ --d:.06s; }
.fab.is-open .fab__item:nth-last-child(3){ --d:.11s; }
.fab.is-open .fab__item:nth-last-child(4){ --d:.16s; }

.fab__toggle{
  position:relative;
  width:60px; height:60px;
  border-radius:var(--r-full);
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  box-shadow:var(--sh-fab);
  transition:background-color var(--t-mid) var(--ease);
}
.fab__toggle:hover{ background:var(--verdigris); }
.fab__toggle svg{ width:22px; height:22px; transition:transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease); }
.fab__toggle .ic-close{ position:absolute; opacity:0; transform:rotate(-45deg); }
.fab.is-open .fab__toggle{ background:var(--verdigris); }
.fab.is-open .fab__toggle .ic-open{ opacity:0; transform:rotate(45deg); }
.fab.is-open .fab__toggle .ic-close{ opacity:1; transform:rotate(0); }

/* quiet ring, slower than a notification pulse */
.fab__toggle::after{
  content:""; position:absolute; inset:0;
  border:1px solid var(--verdigris);
  border-radius:var(--r-full);
  animation:ring 3.2s var(--ease) infinite;
  pointer-events:none;
}
@keyframes ring{
  0%  { transform:scale(.92); opacity:.5; }
  70% { transform:scale(1.34); opacity:0; }
  100%{ transform:scale(1.34); opacity:0; }
}
.fab.is-open .fab__toggle::after{ animation:none; opacity:0; }


/* 13 — mobile action bar =================================================== */
.bar{
  position:fixed; inset:auto 0 0 0; z-index:80;
  display:none;
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
}
.bar .btn{ padding:.95rem 1rem; font-size:.6875rem; }
/* the drawer owns the screen while it is open */
body.is-locked .bar,
body.is-locked .fab{ display:none; }


/* 14 — motion ============================================================== */
@view-transition{ navigation:auto; }

/* the reveal state only exists when the script is running */
.js .rise{ opacity:0; transform:translateY(22px); }
.rise{
  transition:opacity var(--t-reveal) var(--ease) var(--d,0s),
             transform var(--t-reveal) var(--ease) var(--d,0s);
}
.rise.is-in{ opacity:1; transform:none; }

.js .rule.rise{ opacity:1; transform:scaleX(0); transform-origin:left; }
.rule.rise{ transition:transform var(--t-slow) var(--ease) var(--d,0s); }
.rule.rise.is-in{ transform:scaleX(1); }

/* hero curtain */
.js .h1-curtain{ clip-path:inset(0 0 102% 0); }
.h1-curtain{ animation:curtain var(--t-curtain) var(--ease) .12s forwards; }
@keyframes curtain{
  from{ clip-path:inset(0 0 102% 0); }
  to  { clip-path:inset(0 0 -14% 0); }
}

/* staged entrance for the rest of the hero */
.js .hero__copy .rise{ transition-delay:var(--d,0s); }

/* progressive enhancement: let the scroll timeline drive the reveal where the
   browser supports it, the observer stays as the fallback everywhere else */
@supports (animation-timeline:view()){
  .js .rise-scroll{
    opacity:0;
    animation:rise-in linear both;
    animation-timeline:view();
    animation-range:entry 12% cover 32%;
  }
  @keyframes rise-in{
    from{ opacity:0; transform:translateY(22px); }
    to  { opacity:1; transform:none; }
  }
}


/* 15 — responsive ========================================================== */
@media (max-width:1200px){
  .nav__links{ gap:1.1rem; }
}

@media (max-width:1024px){
  .g-4-8{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .cells{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cells > li:nth-child(3){ border-left:0; padding-left:0; }
  .cells > li:nth-child(n+3){ border-top:1px solid var(--line); }
  .on-ink .cells > li:nth-child(n+3){ border-top-color:var(--line-inv); }
}

@media (max-width:900px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open{ background:var(--paper); box-shadow:var(--sh-nav); }

  .hero{ padding-top:calc(var(--nav-h) + 2rem); }
  .hero__in{ grid-template-columns:1fr; min-height:0; gap:clamp(2.5rem,6vw,3.5rem); }
  .hero__media{ margin-right:0; }
  .hero__media .plate{ aspect-ratio:4 / 3; }
  .seal{ top:1.25rem; right:1.25rem; left:auto; width:104px; height:104px; }
  .plate__cap--float{
    position:static; margin-top:14px; padding:0;
    background:none; border:0; box-shadow:none;
  }

  .g-split,.g-7-5,.g-4-8,.gift,.close__grid,.footer__top{ grid-template-columns:1fr; }
  .stick{ position:static; }
  .close__grid .plaques{ margin-top:var(--sp-2); }
}

@media (max-width:768px){
  .g-6-6,.reasons,.plate-pair{ grid-template-columns:1fr; }
  .reasons > div{ padding-block:var(--sp-5); }
  .reasons > div:nth-child(2){ border-top:1px solid var(--line); padding-top:var(--sp-5); }
  .on-ink .reasons > div:nth-child(2){ border-top-color:var(--line-inv); }
  .plate-pair > figure:last-child{ margin-top:0; }
  .footer__seo .cols{ column-count:1; }
  .idx__row{ grid-template-columns:auto minmax(0,1fr); }
  .idx__go{ display:none; }
}

@media (max-width:760px){
  .bar{ display:block; }
  body{ padding-bottom:76px; }
  .fab{ bottom:calc(76px + clamp(.5rem,2vw,1rem)); }
}

@media (max-width:640px){
  .cells{ grid-template-columns:1fr; }
  .cells > li{ border-left:0; padding-inline:0; border-top:1px solid var(--line); }
  .cells > li:first-child{ border-top:0; padding-top:0; }
  .on-ink .cells > li{ border-top-color:var(--line-inv); }

  /* the price table becomes a list, never a horizontal scroller */
  .pricing thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .pricing tr{ display:block; padding-block:var(--sp-4); border-bottom:1px solid var(--line); }
  .pricing td{ display:block; padding:0; border:0; }
  .pricing td:last-child{ text-align:left; margin-top:var(--sp-2); }

  .actions{ gap:var(--sp-4); }
  .actions .btn--solid{ width:100%; justify-content:center; }
  .footer__bottom{ justify-content:flex-start; }
}

@media (max-width:390px){
  .seal{ width:92px; height:92px; padding:0 .75rem; }
  .seal b{ font-size:1.05rem; }
  .seal span{ font-size:.5rem; letter-spacing:.14em; }
}

@media (min-width:1600px){
  :root{ --maxw:1320px; }
}

@media (min-width:1900px){
  :root{ --maxw:1400px; }
  body{ font-size:1.09375rem; }
}


/* 16 — reduced motion ====================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rise,.js .rise{ opacity:1 !important; transform:none !important; }
  .h1-curtain,.js .h1-curtain{ clip-path:none !important; }
  .close::before{ transform:scaleX(1) !important; }
  .fab__item{ opacity:1; }
}


/* logo TerraLux in subsol ==================================================== */
.logo--mark{ display:inline-block; line-height:0; }
.logo--mark img{
  width:150px; height:auto; display:block;
  opacity:.92; transition:opacity var(--t-fast) var(--ease);
}
.logo--mark:hover img{ opacity:1; }
@media (max-width:640px){ .logo--mark img{ width:120px; } }