/* ============================================================
   100x — Fit-Out & Interiors vertical landing page
   Loads AFTER style.css. Only additive rules live here so the
   shared brand system stays the single source of truth.
   This file is the TEMPLATE for the other 7 vertical pages —
   keep everything here generic enough to reuse.
   ============================================================ */

:root {
  --stone: #E3DCCB;   /* warmer than --card, reads as travertine */
  --deep:  #1B1713;   /* near-black band, softer than pure ink */
}

/* ---------- Vertical hero (image-backed) ---------- */
.vhero {
  position: relative;
  background: var(--deep);
  overflow: hidden;
}
.vhero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  filter: saturate(.92);
}
/* Keeps the headline legible over any render, at any crop. */
.vhero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(27,23,19,.92) 0%, rgba(27,23,19,.72) 48%, rgba(27,23,19,.28) 100%);
}
.vhero__inner {
  position: relative; z-index: 2;
  padding: 104px 24px 96px;
  max-width: 880px;
  margin: 0 auto;
  color: var(--cream);
}
.vhero__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 22px;
}
.vhero__title {
  font-size: clamp(38px, 6.4vw, 68px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: 24px;
}
.vhero__sub {
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.55; color: #E6E0D2; max-width: 640px; margin-bottom: 34px;
}
.vhero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.vhero .btn--ghost { color: var(--cream); border-color: var(--cream); }
.vhero .btn--ghost:hover { background: var(--cream); color: var(--ink); }
.vhero__trust {
  font-size: 14px; line-height: 1.6; color: #B8B1A2;
  border-left: 3px solid var(--orange); padding-left: 14px; max-width: 560px;
}

/* ---------- The leak: a clock, not a paragraph ----------
   Alexis: "make the time more visual, big number, shorter and easier to read."
   The time IS the argument, so it carries the type weight. */
.clock { max-width: 780px; margin: 0 auto; }
.clock__row {
  display: grid; grid-template-columns: minmax(150px, 240px) 1fr;
  gap: 8px 32px;
  /* centre, not baseline: on baseline a two-line beat hangs below the big
     number and reads as misaligned. Centring balances 1- and 2-line rows. */
  align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.clock__row:first-child { border-top: 1px solid var(--rule); }
.clock__t {
  font-size: clamp(30px, 4.6vw, 50px); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* "07:52 Sat" must never break across two lines */
}
.clock__s { font-size: clamp(16px, 2vw, 19px); line-height: 1.45; color: #3A352E; }
/* The last beat is the one that costs money. */
.clock__row--lose .clock__t, .clock__row--lose .clock__s { color: var(--orange); }
.clock__row--lose .clock__s { font-weight: 700; }
.clock__punch {
  margin-top: 40px; text-align: center;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.2;
}

/* ---------- Client proof band ---------- */
.client { background: var(--stone); }
.client__logo {
  height: 46px; width: auto; margin: 0 auto 26px;
  mix-blend-mode: multiply;   /* the JPEG ships a white box, not alpha */
}
.client__quote {
  font-size: clamp(21px, 2.9vw, 30px); font-weight: 700;
  line-height: 1.3; letter-spacing: -.02em; max-width: 760px;
  margin: 0 auto 14px; text-align: center;
}
.client__who {
  text-align: center; font-size: 14px; color: var(--muted);
  margin-bottom: 40px;
}
.client__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  border-top: 1px solid rgba(0,0,0,.12); padding-top: 34px;
}
.cstat__num {
  font-size: clamp(32px, 4.4vw, 46px); font-weight: 800;
  letter-spacing: -.03em; color: var(--orange); line-height: 1;
}
.cstat__lab {
  font-size: 13px; line-height: 1.45; color: var(--ink);
  margin-top: 10px; font-weight: 600;
}

/* ---------- Feature sections (one per capability) ---------- */
.feat { border-top: 1px solid var(--rule); }
.feat__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
/* Every other feature flips, so the eye zig-zags down the page. */
.feat--flip .feat__inner { direction: rtl; }
.feat--flip .feat__copy, .feat--flip .feat__media { direction: ltr; }

/* Dense product screenshots are illegible squeezed into a half column —
   these sections stack instead, so the shot renders at full container width. */
.feat--wide .feat__inner { grid-template-columns: 1fr; gap: 34px; }
.feat--wide .feat__copy { max-width: 720px; }
.feat--wide .feat__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 700px) { .feat--wide .feat__lists { grid-template-columns: 1fr; } }

.feat__no {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 16px;
}
/* Title = what the thing is called. Baseline = why you'd want it.
   The name is the anchor, the baseline is the hook — so the name is
   ink and heavy, the baseline is orange and one line. */
.feat__title {
  font-size: clamp(30px, 4vw, 42px); font-weight: 800;
  line-height: 1.05; letter-spacing: -.035em; margin-bottom: 10px;
}
.feat__base {
  font-size: clamp(18px, 2.3vw, 24px); font-weight: 700;
  line-height: 1.25; letter-spacing: -.02em;
  color: var(--orange); margin-bottom: 20px; max-width: 30ch;
}
.feat__body { font-size: 17px; line-height: 1.6; color: #3A352E; margin-bottom: 24px; }
.feat__list { list-style: none; margin-bottom: 28px; }
.feat__list li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-size: 15.5px; line-height: 1.5;
}
.feat__list li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--orange); font-weight: 700;
}

/* The one KPI per section — the thing that must be remembered. */
.kpi {
  display: inline-flex; flex-direction: column;
  border-left: 5px solid var(--orange);
  padding: 4px 0 4px 18px;
}
.kpi__num {
  font-size: clamp(40px, 5.6vw, 60px); font-weight: 800;
  letter-spacing: -.04em; line-height: .96; color: var(--ink);
}
.kpi__lab {
  font-size: 13.5px; font-weight: 700; line-height: 1.4;
  color: var(--muted); margin-top: 10px; max-width: 300px;
}
.kpi__src { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 6px; }

/* ---------- Feature media ---------- */
.shot {
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--white); box-shadow: 0 18px 44px rgba(0,0,0,.13);
}
.shot img { width: 100%; height: auto; }
.shot--phone { max-width: 330px; margin: 0 auto; border-radius: 22px; }
.shot__cap {
  font-size: 12.5px; color: var(--muted); text-align: center;
  margin-top: 12px; line-height: 1.45;
}
.media-stack { display: grid; gap: 16px; }

/* Before / after pair for the Design Studio section */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba figure { margin: 0; }
.ba img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); }
.ba figcaption {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: 9px;
}

/* An honest illustration, not a screenshot — styled as a data card. */
.callcard {
  background: var(--deep); color: var(--cream);
  border-radius: 14px; padding: 26px 26px 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.callcard__top {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: #B8B1A2; border-bottom: 1px solid rgba(255,255,255,.14);
  padding-bottom: 14px; margin-bottom: 18px;
}
.callcard__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(254,94,45,.22);
}
.callcard__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14.5px;
}
.callcard__row span:first-child { color: #9C958A; }
.callcard__row span:last-child { font-weight: 700; text-align: right; }
.callcard__foot {
  margin-top: 18px; font-size: 13px; color: #B8B1A2; line-height: 1.5;
}
.callcard__score {
  display: inline-block; background: var(--orange); color: var(--white);
  font-weight: 800; font-size: 12px; letter-spacing: .1em;
  padding: 5px 11px; border-radius: 5px; margin-top: 14px;
}

/* ---------- WhatsApp thread (an in-page illustration, not a screenshot) ---------- */
.wa {
  background: #0B141A; border-radius: 20px; padding: 14px;
  max-width: 340px; margin: 0 auto;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.wa__top {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 12px; border-bottom: 1px solid rgba(255,255,255,.09);
  margin-bottom: 14px;
}
.wa__av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--orange);
  color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.wa__who { font-size: 14px; font-weight: 700; color: #E9EDEF; line-height: 1.25; }
.wa__stat { font-size: 11.5px; color: #8FA6A0; }
.wa__msg {
  max-width: 84%; padding: 8px 11px; border-radius: 9px;
  font-size: 13.5px; line-height: 1.45; margin-bottom: 8px;
  position: relative; color: #E9EDEF;
}
.wa__msg--in  { background: #202C33; border-top-left-radius: 2px; }
.wa__msg--out { background: #0A5C4B; margin-left: auto; border-top-right-radius: 2px; }
.wa__t { display: block; font-size: 10.5px; color: #8FA6A0; margin-top: 4px; text-align: right; }
.wa__msg--out .wa__t { color: #9FD8C4; }
.wa__sys {
  text-align: center; font-size: 11px; color: #8FA6A0;
  background: rgba(255,255,255,.05); border-radius: 6px;
  padding: 6px 10px; margin: 12px 0 8px;
}

/* ---------- Timeline ---------- */
.tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tl__step { border-top: 4px solid var(--orange); padding-top: 18px; }
.tl__when {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 10px;
}
.tl__what { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.tl__how { font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .feat__inner { grid-template-columns: 1fr; gap: 34px; }
  .feat--flip .feat__inner { direction: ltr; }
  .feat__media { order: 2; }          /* copy first on a phone, always */
  .feat__copy  { order: 1; }
  .client__stats { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .tl { grid-template-columns: 1fr; gap: 22px; }
  .vhero__inner { padding: 76px 24px 68px; }
}
@media (max-width: 460px) {
  .ba { grid-template-columns: 1fr; }
  .client__stats { grid-template-columns: 1fr; }
  .clock__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
}

/* ---------- RTL (matches the pattern at the end of style.css) ---------- */
body.rtl .kpi { border-left: none; border-right: 5px solid var(--orange); padding: 4px 18px 4px 0; }
body.rtl .vhero__trust { border-left: none; border-right: 3px solid var(--orange); padding: 0 14px 0 0; }
body.rtl .feat__list li { padding-left: 0; padding-right: 26px; }
body.rtl .feat__list li::before { content: "←"; left: auto; right: 0; }

/* ---------- Hero fit strip: who it's for, what you own ---------- */
.vhero__fit {
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--orange); margin-bottom: 30px;
}

/* ---------- Reference-call offer under the client band ---------- */
.client__ref {
  max-width: 700px; margin: -22px auto 40px; text-align: center;
  font-size: 15px; line-height: 1.55; color: #3A352E;
  border-top: 1px solid rgba(0,0,0,.12); padding-top: 22px;
}

/* Two-column bullets where a section carries four long ones */
.feat__list--split { columns: 2; column-gap: 44px; }
.feat__list--split li { break-inside: avoid; }
@media (max-width: 760px) { .feat__list--split { columns: 1; } }

/* ---------- Cost: curiosity, not a price list ----------
   Alexis pulled the published ladder — he wants the number to be the reason
   they pick up the phone. The sales-hire comparison still anchors it. */
.cost { max-width: 700px; margin: 0 auto; }
.cost__lead {
  font-size: clamp(20px, 2.7vw, 26px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25; color: var(--orange);
  margin-bottom: 22px;
}
.cost__body { font-size: 17px; line-height: 1.6; color: #3A352E; margin-bottom: 18px; }
.cost .btn { margin-top: 14px; }
.cost__note { font-size: 14px; color: var(--muted); margin-top: 22px; }

/* ---------- Objections ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq__q {
  font-size: clamp(18px, 2.2vw, 21px); font-weight: 800;
  letter-spacing: -.02em; padding-top: 26px;
}
.faq__a {
  font-size: 16px; line-height: 1.6; color: #3A352E;
  padding: 10px 0 26px; border-bottom: 1px solid var(--rule);
}

/* ---------- Who you're dealing with ---------- */
.who {
  display: grid; grid-template-columns: 168px 1fr;
  gap: 40px; align-items: start; max-width: 900px; margin: 30px auto 0;
}
.who__photo { width: 168px; height: 168px; border-radius: 50%; }
.who__body { font-size: 17px; line-height: 1.6; margin-bottom: 16px; }
.who__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin: 26px 0 22px;
}
.who__ops { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 760px) {
  .who { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
  .who__stats { grid-template-columns: repeat(2, 1fr); }
}

/* style.css sets .stat__num to 86px for the homepage founder band — far too wide
   for a 4-up inside a 2-column grid on a phone (it blew the viewport). Scope it down. */
.who__stats .stat__num {
  font-size: clamp(26px, 4.4vw, 38px); line-height: 1;
  letter-spacing: -.03em; word-break: normal;
}
.who__stats .stat__lab { font-size: 12.5px; line-height: 1.35; margin-top: 6px; }

/* The client's own photo leads, full width; the two directions sit under it.
   The old 2x2 also carried a reception render in a marble-and-gold language,
   captioned as the house style the villa renders learned from — the grid
   disproved its own caption, so the reception tile is gone. */
.ba__hero { margin: 0; }
.ba__hero img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); }
.ba__hero figcaption {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: 9px;
}
/* Highlight both AFTER directions, not "whichever figure ends the row". */
.ba figure figcaption { color: var(--orange); }