/* ============================================
   MOHAMMAD SAKR — SHARED STYLES
   ============================================ */

/* Self-hosted, subset (latin) woff2 — no third-party font request, no
   render-blocking round-trip to Google. Paths are relative to shared.css
   at the site root, so they resolve from every page depth. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/dm-sans-300.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/dm-sans-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/dm-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-500.woff2') format('woff2'); }

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

/* SAKR Brand Identity System (Beirut 2025) — exact pigments.
   Carbon-dominant dark canvas, single Timber oak accent, Sand for light fills.
   Variable names kept stable so all pages inherit the palette without per-page edits. */
:root {
  --ink:      #0D0D0D;   /* Carbon — dominant dark surface */
  --ink2:     #1A1A1A;   /* Carbon-90 — raised dark panel */
  --bone:     #FFFFFF;   /* White — primary text on dark */
  --warm:     #C9C5BE;   /* Warm grey — body text on carbon */
  --gold:     #C8A882;   /* Timber — single accent */
  --gold-lt:  #B08F66;   /* Timber deep — hover/pressed */
  --walnut:   #8A6A45;   /* Dark timber */
  --limestone:#E9E3D8;   /* Sand deep — borders/fills on sand */
  --mid:      #ABA8A3;   /* Neutral warm grey — comfortable on carbon */
  --faint:    #222222;   /* Faint panel on carbon */
  --sand-pure:#F5F2EC;   /* Sand — true page-background pigment for light sections */
  --rule:     rgba(200,168,130,0.22);
  --rule-dim: rgba(200,168,130,0.10);

  /* ── Design system primitive aliases (map existing vars) ── */
  --carbon:    var(--ink);
  --graphite:  var(--ink2);
  --sand:      var(--warm);
  --timber:    var(--gold);
  --white:     var(--bone);

  /* Extended neutrals */
  --carbon-90:    #262626;
  --graphite-70:  #4A4A4A;
  --graphite-50:  #6E6E6E;
  --sand-70:      #D8CFBB;
  --sand-40:      #F0EBE0;
  --line-dark:    rgba(245,245,245,0.14);
  --line-light:   rgba(28,28,28,0.12);
  --timber-deep:  #B08F66;
  --timber-tint:  #D8BE9C;

  /* Semantic surface + text */
  --surface-ink:        var(--ink);
  --surface-panel:      var(--ink2);
  --surface-paper:      var(--bone);
  --surface-sand:       var(--warm);
  --surface-sand-soft:  #F0EBE0;
  --text-strong:        var(--ink);
  --text-body:          var(--ink2);
  --text-muted:         #6E6E6E;
  --text-faint:         #4A4A4A;
  --text-on-ink-strong: var(--bone);
  --text-on-ink-body:   #CFCBC3;
  --text-on-ink-muted:  #8C8881;
  --accent:             var(--gold);
  --accent-hover:       #B08F66;
  --accent-on-ink:      #C8A882;
  --border-light:       rgba(28,28,28,0.12);
  --border-dark:        rgba(245,245,245,0.14);
  --border-solid:       var(--ink);
  --focus-ring:         var(--gold);

  /* Font families */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Inter', system-ui, sans-serif;

  /* Fluid type scale */
  --fs-mega:    clamp(3.5rem, 9vw, 8rem);
  --fs-display: clamp(2.75rem, 6vw, 5rem);
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.35rem, 2vw, 1.75rem);
  --fs-h4:      1.25rem;
  --fs-lead:    1.375rem;
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* Line heights */
  --lh-tight:   0.98;
  --lh-snug:    1.08;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-mega:    -0.03em;
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:     0em;
  --ls-eyebrow:  0.22em;
  --ls-mono:     0.02em;

  /* Weights */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-extra:   800;

  /* Spacing scale (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 10rem;
  --section-y:       clamp(4rem, 10vw, 10rem);
  --section-y-tight: clamp(3rem, 6vw, 6rem);
  --container:        1320px;
  --container-narrow: 820px;
  --gutter:           clamp(1.25rem, 5vw, 4rem);
  --grid-gap:         clamp(1rem, 2vw, 2rem);

  /* Radii — square brand */
  --radius-0:   0;
  --radius-1:   2px;
  --radius-pill:999px;

  /* Borders */
  --bw-hair: 1px;
  --bw-rule: 2px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;

  /* Z */
  --z-nav:     100;
  --z-overlay: 900;
}

/* Technical/spec text — the architect's drawing language (Inter) */
.mono, .spec-value, .pm-val {
  font-family: 'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ---- NAV ---- */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 52px;
  background: rgba(13,13,13,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-dim);
  transition: background .3s, padding .3s;
}
@supports not (backdrop-filter: blur(1px)) {
  nav.site-nav { background: rgba(13,13,13,.97); }
}
.nav-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; flex-direction: column; line-height: 0.86;
}
.nav-logo .nl-first {
  font-size: 14px; letter-spacing: .22em;
  color: var(--bone); font-weight: 700;
}
.nav-logo .nl-last {
  font-size: 30px; letter-spacing: .08em;
  color: var(--gold);
}
.nav-links { display: flex; gap: 34px; list-style: none; }
.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--warm); text-decoration: none; transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-cta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 9px 22px; text-decoration: none; transition: background .2s;
  display: inline-flex; align-items: center; min-height: 44px;
  touch-action: manipulation;
}
.nav-cta:hover { background: var(--gold-lt); }
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: 0; }
.nav-burger span { display: block; width: 24px; height: 1px; background: var(--warm); transition: .3s; }

/* ---- SERVICES DROPDOWN ---- */
.nav-has-sub { position: relative; }
.nav-has-sub > a { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-caret { font-size: 8px; line-height: 1; transition: transform .2s; }
.nav-has-sub:hover .nav-caret, .nav-has-sub:focus-within .nav-caret { transform: rotate(180deg); }
.nav-sub {
  list-style: none; margin: 0; padding: 12px 0;
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px; background: rgba(13,13,13,.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rule-dim);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: 210;
}
.nav-has-sub:hover .nav-sub, .nav-has-sub:focus-within .nav-sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* invisible bridge so the pointer can cross the gap without the menu closing */
.nav-has-sub::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.nav-sub li { display: block; }
.nav-sub a { display: block; padding: 11px 24px; white-space: nowrap; font-size: 11px; }
.nav-sub a:hover { color: var(--gold); background: rgba(200,168,130,.06); }

/* ---- PAGE HEADER ---- */
.page-header {
  padding: 160px 52px 96px;
  border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end;
}
.page-header-left {}
.page-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.page-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); }
/* when combined with tech-eyebrow, suppress the duplicate dash */
.page-eyebrow.tech-eyebrow::before { display: none; }
.page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(48px, 6vw, 80px); font-weight: 600; line-height: 1.0;
}
.page-title em { font-style: italic; color: var(--gold); }
.page-header-right { padding-bottom: 4px; }
.page-desc {
  font-size: 14px; line-height: 1.9; color: var(--warm); max-width: 420px;
}

/* ---- SECTION UTILITIES ---- */
.section-pad { padding: 100px 52px; }
.section-pad-sm { padding: 72px 52px; }

.section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold);
}
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.1;
  margin-top: 16px;
}
.section-title em { font-style: italic; color: var(--gold); }
.rule { height: 1px; background: var(--rule); margin: 0 52px; }

/* ---- BUTTONS ---- */
.btn-primary {
  display: inline-flex; align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 13px 30px; text-decoration: none; transition: background .2s;
  border: none; cursor: pointer; touch-action: manipulation; min-height: 44px;
}
.btn-primary:hover { background: var(--gold-lt); }
.btn-ghost {
  display: inline-flex; align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--warm); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
  transition: color .2s, border-color .2s; cursor: pointer;
  touch-action: manipulation; min-height: 44px;
}
.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

/* Guard: never allow horizontal scroll / off-canvas black area (esp. mobile) */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---- FOOTER ---- */
footer.site-footer {
  padding: 72px 52px 44px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  background: var(--ink2);
}
.footer-brand-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 700; letter-spacing: .1em; margin-bottom: 14px;
  text-transform: uppercase; color: var(--gold); /* SAKR — always Timber */
}
.footer-brand-name span { color: var(--gold); }
.footer-tagline { font-size: 12px; color: var(--mid); line-height: 1.8; }
.footer-col-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; color: var(--mid);
  text-decoration: none; transition: color .2s;
}
.footer-links a:hover { color: var(--bone); }
.footer-bottom {
  margin: 40px 52px 0;
  padding: 22px 0;
  border-top: 1px solid var(--rule-dim);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: .14em; color: var(--mid);
  background: var(--ink2);
}

/* ---- FADE ANIMATIONS ---- */
.fade-up {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s cubic-bezier(.22,.88,.14,1), transform .55s cubic-bezier(.22,.88,.14,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up-d1 { transition-delay: .08s; }
.fade-up-d2 { transition-delay: .16s; }
.fade-up-d3 { transition-delay: .24s; }
.fade-up-d4 { transition-delay: .32s; }

/* ---- MOBILE NAV ---- */
/* Overlay-only CTA link: hidden everywhere except the open mobile overlay */
.nav-links .nav-link-cta { display: none; }
@media (max-width: 960px) {
  nav.site-nav { padding: 22px 28px; }
  .nav-links { display: none; }
  .nav-burger {
    display: flex;
    /* Positioned + above the overlay so it stays tappable as a close control */
    position: relative; z-index: 195;
    padding: 10px; margin: -10px;   /* 44px tap target */
  }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    /* nav.site-nav uses backdrop-filter, which makes it the containing block
       for this fixed child — so inset:0 alone collapses to the nav's height.
       Pin full-viewport explicitly so the overlay covers the page. */
    width: 100vw; height: 100vh; height: 100dvh;
    background: var(--ink); justify-content: center; align-items: center;
    gap: 28px; z-index: 190;
  }
  .nav-links.open a { font-size: 22px; min-height: 44px; display: flex; align-items: center; }
  /* Burger → X while the menu is open, pinned to the conventional corner */
  nav.site-nav.menu-open .nav-burger { position: fixed; top: 24px; right: 28px; }
  nav.site-nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  nav.site-nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  nav.site-nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  /* Primary CTA link shown only inside the open overlay */
  .nav-links .nav-link-cta { display: none; }
  .nav-links.open .nav-link-cta {
    display: flex; margin-top: 12px;
    color: var(--ink); background: var(--gold);
    padding: 12px 30px; font-size: 15px !important;
    letter-spacing: .18em; text-transform: uppercase;
  }
  .nav-links.open .nav-link-cta:hover { background: var(--gold-lt); color: var(--ink); }
  /* Services sub-menu: shown inline inside the open overlay (no hover needed) */
  .nav-links.open .nav-has-sub { flex-direction: column; align-items: center; gap: 20px; }
  .nav-links.open .nav-sub {
    position: static; transform: none; opacity: 1; visibility: visible;
    background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 16px 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  .nav-links.open .nav-sub a { font-size: 15px !important; color: var(--mid); padding: 0; }
  .nav-links.open .nav-caret { display: none; }
  .nav-has-sub::after { display: none; }
  .page-header { grid-template-columns: 1fr; padding: 140px 28px 72px; gap: 28px; }
  .section-pad { padding: 72px 28px; }
  .section-pad-sm { padding: 52px 28px; }
  .rule { margin: 0 28px; }
  footer.site-footer { grid-template-columns: 1fr; padding: 56px 28px 36px; gap: 32px; }
  .footer-bottom { margin: 32px 28px 0; flex-direction: column; gap: 10px; }
}

/* ============================================
   BRAND TECHNICAL COMPONENT LIBRARY
   Shared patterns that make the site read as a
   fabricator's document, not a furniture catalogue.
   ============================================ */

/* Technical eyebrow — mono, used above section heads */
.tech-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: 12px;
}
.tech-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }

/* Spec table — the architect's data row */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--rule-dim); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td { padding: 18px 0; vertical-align: top; }
.spec-table .st-key {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mid); width: 38%;
}
.spec-table .st-val {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; color: var(--bone); line-height: 1.6;
}
.spec-table .st-val em { color: var(--gold); font-style: normal; }

/* Dimension annotation — drawing-style measure line */
.dim-annotation {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .08em; color: var(--gold);
  display: inline-flex; align-items: center; gap: 8px;
}
.dim-annotation::before, .dim-annotation::after { content: ''; width: 14px; height: 1px; background: var(--gold); }

/* Technical callout card */
.tcard {
  border: 1px solid var(--rule-dim); padding: 36px 30px;
  position: relative; transition: border-color .3s, background .3s;
}
.tcard:hover { border-color: var(--gold); background: rgba(200,168,130,.03); }
.tcard-code {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .06em; color: var(--gold);
  margin-bottom: 18px; display: block;
}
.tcard h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.15; margin-bottom: 12px;
}
.tcard h3 em { font-style: italic; color: var(--gold); }
.tcard p { font-size: 13px; color: var(--mid); line-height: 1.8; }
.tcard .tcard-spec {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; color: var(--warm); margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--rule-dim);
  letter-spacing: .04em;
}

/* Blueprint grid texture utility */
.blueprint-tex {
  position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--gold) 0, var(--gold) 1px, transparent 0, transparent 40px),
    repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 1px, transparent 0, transparent 40px);
}
.diagonal-tex {
  position: absolute; inset: 0; opacity: .04; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, var(--gold) 0, var(--gold) 1px, transparent 0, transparent 44px);
}

/* Real-photo slot — drop an <img class="photo-cover"> into any gradient image
   block and it fills the block, covering the placeholder gradient behind it.
   Relies on DOM order (gradient fill first, photo after) for stacking, so
   labels/badges placed after the photo stay on top. See README §Photography. */
.photo-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Mono inline tag */
.mono-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .06em; color: var(--mid);
  border: 1px solid var(--rule-dim); padding: 5px 11px; display: inline-block;
}

/* Brand footer logo refinement */
.footer-brand-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 10px;
}
.footer-brand-name span { color: var(--gold); }

/* ============================================
   SAKR TYPE SYSTEM
   Barlow Condensed ExtraBold (headings) / DM Sans (body)
   Inter reserved for spec/technical data only.
   ============================================ */

/* Wordmark / logo — Barlow Condensed 800, tight, uppercase */
.nav-logo, .footer-brand-name, .cover-mark, .logo-lockup .ll-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}
.nav-logo { letter-spacing: .08em !important; }

/* All display / section headings: Barlow Condensed, negative tracking */
.hero-title, .page-title, .section-title, .sec-head,
.cap-head h2, .standards-head h2, .spec-split-content h2,
.process-strip-head h2, .featured-title, .trade-title,
.positioning-body, .statement-body, .pos-statement,
h1, h2, h3 {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: -.02em;
}

/* Large hero/display: ExtraBold */
.hero-title, .page-title, .trade-title {
  font-weight: 700;
  letter-spacing: -.03em;
}

/* Section/supporting headings */
.section-title, .sec-head, .featured-title, h2, h3 {
  font-weight: 700;
}

/* Emphasis: timber color — headings are already at max weight */
.hero-title em, .page-title em, .section-title em, .sec-head em,
.cap-head h2 em, .standards-head h2 em, .spec-split-content h2 em,
.process-strip-head h2 em, .featured-title em, .trade-title em,
.positioning-body em, .statement-body em, .pos-statement em,
.display-italic, h2 em, h3 em {
  font-style: normal !important;
  color: var(--gold);
}

/* Body copy: DM Sans */
.hero-sub, .page-desc, .featured-desc, .trade-body,
.positioning-body, body {
  font-family: 'DM Sans', sans-serif;
}

/* Technical — Inter, reserved for spec values and codes only */
.mono, .hs-val, .hs-key, .cc-code, .cc-spec,
.sc-metric, .st-val, .pss-num, .mono-tag,
.spec-value, .pm-val {
  font-family: 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Nav, labels, buttons: DM Sans 500 */
.nav-links a, .nav-cta, .btn-primary, .btn-ghost,
.section-label, .footer-col-title, .cap-card .cc-code,
.tech-eyebrow, .featured-type {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}

/* ============================================
   ACCESSIBILITY & INPUT MODALITY
   ============================================ */

/* Skip link */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%,-120%);
  z-index: 1000; background: var(--gold); color: var(--bone);
  font-family: 'DM Sans', sans-serif; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 22px; text-decoration: none; transition: transform .2s;
}
.skip-link:focus { transform: translate(-50%,0); outline: none; }

/* Keyboard focus */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.btn-primary:focus-visible, .btn-ghost:focus-visible, .nav-cta:focus-visible,
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible,
.filter-btn:focus-visible, .sort-select:focus-visible, .checkbox-item:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Touch / no-mouse devices */
@media (hover: none), (pointer: coarse) {
  a, button, .nav-cta, .btn-primary, .btn-ghost,
  .checkbox-item, .checkbox-item input, .file-drop,
  .form-submit, .filter-btn { cursor: pointer; }
  .form-input, .form-select, .form-textarea, .sort-select { cursor: auto; }
}

/* ============================================
   SAKR DESIGN SYSTEM — COMPONENTS
   Button · Field · Tag · Utilities
   ============================================ */

/* ---- SAKR BUTTON ---- */
.sakr-btn {
  --_bg: var(--carbon); --_fg: var(--white); --_bd: var(--carbon);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: var(--w-semibold);
  letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  border: var(--bw-hair) solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  border-radius: var(--radius-0); cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  touch-action: manipulation;
}
.sakr-btn:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset, 2px); }
.sakr-btn[disabled] { opacity: 0.4; pointer-events: none; }

.sakr-btn--sm { font-size: var(--fs-xs); padding: 0.6rem 1rem; }
.sakr-btn--md { font-size: var(--fs-sm); padding: 0.85rem 1.5rem; min-height: 44px; }
.sakr-btn--lg { font-size: var(--fs-body); padding: 1.05rem 2rem; min-height: 44px; }

.sakr-btn--solid  { --_bg: var(--carbon); --_fg: var(--white); --_bd: var(--carbon); }
.sakr-btn--solid:hover { --_bg: var(--graphite); --_bd: var(--graphite); }
.sakr-btn--accent { --_bg: var(--timber); --_fg: var(--white); --_bd: var(--timber); }
.sakr-btn--accent:hover { --_bg: var(--timber-deep); --_bd: var(--timber-deep); }
.sakr-btn--outline { --_bg: transparent; --_fg: var(--carbon); --_bd: var(--carbon); }
.sakr-btn--outline:hover { --_bg: var(--carbon); --_fg: var(--white); }
.sakr-btn--ghost { --_bg: transparent; --_fg: var(--carbon); --_bd: transparent; padding-inline: 0.25rem; }
.sakr-btn--ghost:hover { --_fg: var(--timber); }

.sakr-btn--on-ink.sakr-btn--solid  { --_bg: var(--white); --_fg: var(--carbon); --_bd: var(--white); }
.sakr-btn--on-ink.sakr-btn--solid:hover { --_bg: var(--sand); }
.sakr-btn--on-ink.sakr-btn--outline { --_fg: var(--white); --_bd: var(--line-dark); }
.sakr-btn--on-ink.sakr-btn--outline:hover { --_bg: var(--white); --_fg: var(--carbon); --_bd: var(--white); }
.sakr-btn--on-ink.sakr-btn--ghost { --_fg: var(--white); }
.sakr-btn--on-ink.sakr-btn--ghost:hover { --_fg: var(--timber-tint); }

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

.sakr-btn__arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.sakr-btn:hover .sakr-btn__arrow { transform: translateX(4px); }

/* ---- SAKR FIELD (underline inputs) ---- */
.sakr-field { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.sakr-field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sakr-field__label .req { color: var(--timber); margin-left: 0.35em; }
.sakr-field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.sakr-field--error .sakr-field__hint { color: var(--timber); }

.sakr-control {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--text-on-ink-strong); background: transparent;
  border: 0; border-bottom: var(--bw-hair) solid rgba(245,245,245,0.3);
  border-radius: 0; padding: 0.7rem 0; line-height: var(--lh-normal);
  transition: border-color var(--dur-base) var(--ease-out);
}
.sakr-control::placeholder { color: var(--text-on-ink-muted); }
.sakr-control:hover { border-color: rgba(245,245,245,0.55); }
.sakr-control:focus { outline: none; border-color: var(--timber-tint); border-bottom-width: var(--bw-rule); }
.sakr-control:disabled { opacity: 0.4; cursor: not-allowed; }
textarea.sakr-control { resize: vertical; min-height: 7rem; }
.sakr-field--error .sakr-control { border-color: var(--timber); }

/* on light surfaces */
.sakr-field--light .sakr-field__label { color: var(--text-muted); }
.sakr-field--light .sakr-control { color: var(--text-strong); border-bottom-color: var(--border-light); }
.sakr-field--light .sakr-control::placeholder { color: var(--text-muted); }
.sakr-field--light .sakr-control:focus { border-color: var(--timber); }

/* ---- SAKR TAG / FILTER CHIP ---- */
.sakr-tag {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.06em; line-height: 1; white-space: nowrap;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-1);
  border: var(--bw-hair) solid rgba(245,245,245,0.18);
  color: var(--text-on-ink-body); background: transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  cursor: pointer; text-transform: uppercase;
  touch-action: manipulation;
}
.sakr-tag:hover { border-color: var(--white); color: var(--white); }
.sakr-tag:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.sakr-tag.active,
.sakr-tag--active { background: var(--white); border-color: var(--white); color: var(--carbon); }
.sakr-tag.active:hover,
.sakr-tag--active:hover { background: var(--sand); border-color: var(--sand); }
.sakr-tag--accent { color: var(--timber-tint); border-color: rgba(201,118,75,0.45); }
.sakr-tag--label { letter-spacing: var(--ls-eyebrow); }

/* on light surfaces */
.sakr-tag--light { color: var(--text-body); border-color: var(--border-light); }
.sakr-tag--light:hover { border-color: var(--carbon); color: var(--carbon); }
.sakr-tag--light.active,
.sakr-tag--light.sakr-tag--active { background: var(--carbon); border-color: var(--carbon); color: var(--white); }

/* ---- SAKR UTILITIES ---- */
/* Wide-tracked overline label above headings */
.sakr-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-ink-muted);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.sakr-eyebrow--accent { color: var(--accent-on-ink); }
.sakr-eyebrow--ink { color: var(--text-muted); }

/* Signature index marker — e.g. 01 / 04 */
.sakr-index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  color: var(--text-on-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Constrained container */
.sakr-container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}

/* Structural full-strength hairline */
.sakr-rule { border: 0; border-top: var(--bw-hair) solid var(--border-solid); }

/* ============================================
   SAND SECTION — light surface variant
   Apply class="sand-section" to any <section>.
   CSS custom property cascade inverts colours
   for all children automatically.
   ============================================ */
.sand-section {
  background: var(--sand-pure);   /* #F5F2EC */
  color: #0D0D0D;
  /* Re-scope colour tokens for children.
     Surfaces flip too: components that paint panels with
     var(--ink)/var(--ink2) become light cards on sand. */
  --bone:     #0D0D0D;
  --warm:     #3D3A35;
  --mid:      #6B6560;
  --rule:     rgba(13,13,13,0.14);
  --rule-dim: rgba(13,13,13,0.07);
  --gold:     #8A6A45;   /* deeper Timber — passes WCAG AA on sand */
  --gold-lt:  #75593A;
  --ink:      #FDFCFA;   /* panel surface on sand */
  --ink2:     #ECE6DA;   /* raised/hover panel on sand */
  --faint:    #E9E3D6;
}
/* Buttons on sand: flip to Carbon bg + Timber text */
.sand-section .btn-primary {
  background: #0D0D0D;
  color: #C8A882;
}
.sand-section .btn-primary:hover { background: #262626; }
.sand-section .btn-ghost {
  color: #0D0D0D;
  border-color: rgba(13,13,13,0.28);
}
.sand-section .btn-ghost:hover { color: var(--gold); border-color: var(--gold); }
/* Panel components on sand get a hairline so white-on-sand cards read */
.sand-section .cap-card,
.sand-section .hand,
.sand-section .tcard,
.sand-section .value-item { border: 1px solid rgba(13,13,13,0.10); }
/* Blueprint/diagonal textures are gold-on-dark decorations — too loud on sand */
.sand-section .blueprint-tex,
.sand-section .diagonal-tex { opacity: .03; }

/* ============================================
   WHATSAPP BRIEF — fixed floating CTA
   Injected by site-config.js on every page.
   ============================================ */
.wa-brief {
  position: fixed; bottom: 28px; right: 28px; z-index: 800;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  background: var(--ink2);
  border: 1px solid var(--rule);
  color: var(--gold);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  transition: border-color .25s, background .25s;
  white-space: nowrap;
  touch-action: manipulation;
}
.wa-brief:hover { border-color: var(--gold); background: rgba(200,168,130,0.07); }
.wa-brief svg { flex-shrink: 0; }

/* ---- MOBILE ACTION BAR (Call · WhatsApp · Start a Project) ---- */
.action-bar { display: none; }
@media (max-width: 640px) {
  .wa-brief { display: none; }   /* the action bar replaces the chip on phones */
  .action-bar {
    display: grid; grid-template-columns: 1fr 1fr 1.6fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
    background: rgba(13,13,13,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .ab-item {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 54px; text-decoration: none;
    font-family: 'DM Sans', sans-serif; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--warm); border-right: 1px solid var(--rule-dim);
    touch-action: manipulation;
  }
  .ab-item svg { flex-shrink: 0; color: var(--gold); }
  .ab-primary { color: var(--ink); background: var(--gold); border-right: none; font-weight: 600; }
  /* keep page content clear of the fixed bar */
  body { padding-bottom: 54px; }
  .footer-bottom { margin-bottom: 12px; }
}

/* ---- REDUCED MOTION ---- */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none !important; }
  .fade-up { opacity: 1 !important; transform: none !important; }
}