/* =========================================================
   Akohl Interiors — Global Stylesheet
   Modern luxury: charcoal / black base, warm gold accent.

   Contents
   01. Tokens
   02. Reset & base
   03. Layout primitives
   04. Buttons
   05. Header & navigation
   06. Heroes
   07. Media & placeholder blocks
   08. Trust bar
   09. Service cards & service rows
   10. Comparison table
   11. Process steps
   12. Portfolio
   13. Testimonials
   14. About & values
   15. FAQ
   16. Contact & forms
   17. CTA banners
   18. Footer
   19. Sticky mobile CTA
   20. Motion & reveal
   21. Utilities
   22. Responsive
   ========================================================= */

/* ---------- 00. Metric-matched font fallbacks ----------
   These load no files. They reshape the local fallback fonts so the text does
   not jump when Playfair Display and Jost arrive from Google Fonts, which is
   the site's only meaningful layout-shift source (the h1 is the LCP element).
   If a device has neither local face, the stack falls through harmlessly. */
@font-face {
  font-family: "Playfair Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 107%;
  ascent-override: 97%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 94%;
  ascent-override: 105%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* ---------- 01. Tokens ---------- */
:root {
  --color-black: #14130f;
  --color-charcoal: #1e1c17;
  --color-charcoal-light: #2b2822;
  --color-cream: #f4efe6;
  --color-cream-dim: #e8e1d3;
  --color-white: #fffdf9;

  /* Gold has two tones: --color-gold sits on dark, --color-gold-deep on light.
     --color-gold on cream is only 2.6:1, so it is never used for small text
     on a light background. */
  --color-gold: #b78d4f;
  --color-gold-light: #d4b57f;
  --color-gold-deep: #8a6428;

  /* Text tones, all >= 4.5:1 against their intended background. */
  --color-ink: #1e1c17;          /* body text on cream        */
  --color-muted: #6b665c;        /* secondary text on cream   */
  --color-ink-invert: #f4efe6;   /* body text on charcoal     */
  --color-muted-invert: rgba(244, 239, 230, 0.72);

  --color-line: rgba(244, 239, 230, 0.14);
  --color-line-dark: rgba(20, 19, 15, 0.12);
  --color-error: #a3341f;
  --color-success: #3f6b46;

  --font-display: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Jost Fallback", "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 140px;

  --header-h: 72px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-soft: 0 10px 30px rgba(20, 19, 15, 0.08);
  --shadow-header: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ---------- 02. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Keeps anchor targets AND keyboard-focused controls clear of the fixed
     header when the browser scrolls them into view. */
  scroll-padding-top: calc(var(--header-h) + var(--space-2));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-cream);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.01em;
  text-wrap: balance;
}
p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }
button { font-family: inherit; cursor: pointer; }

/* Anything the fixed header could cover when jumped to via an anchor. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }

/* Visible keyboard focus everywhere — never removed, only restyled.
   The deep gold is the only one that clears 3:1 against cream (4.66:1);
   the light gold takes over on every dark surface. */
:focus-visible {
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 3px;
}
.section--dark :focus-visible,
.section--black :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.trust-bar :focus-visible,
.mobile-cta :focus-visible,
.skip-link:focus-visible {
  outline-color: var(--color-gold-light);
}
main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-gold);
  color: var(--color-black);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-2); }

/* ---------- 03. Layout primitives ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.container--narrow { max-width: 820px; }

.section { padding: var(--space-6) 0; }
.section--tight { padding: var(--space-5) 0; }
.section--dark {
  background: var(--color-charcoal);
  color: var(--color-ink-invert);
}
.section--black { background: var(--color-black); color: var(--color-ink-invert); }
.section--dark .eyebrow,
.section--black .eyebrow { color: var(--color-gold-light); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-2);
}

.section-head {
  max-width: 660px;
  margin: 0 0 var(--space-5);
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head h2 { font-size: clamp(28px, 3.6vw, 40px); }
.section-head p {
  color: var(--color-muted);
  font-size: 18px;
}
.section--dark .section-head p,
.section--black .section-head p { color: var(--color-muted-invert); }

/* ---------- 04. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 16px 34px;
  min-height: 48px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--color-charcoal);
  background: none;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-charcoal);
  color: var(--color-cream);
}
.btn-primary:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
  color: var(--color-white);
}
.btn-outline {
  background: transparent;
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}
.btn-outline:hover {
  background: var(--color-charcoal);
  color: var(--color-cream);
}
.section--dark .btn-outline,
.section--black .btn-outline,
.hero .btn-outline,
.page-hero .btn-outline,
.mobile-cta .btn-outline,
.trust-bar .btn-outline {
  border-color: var(--color-cream);
  color: var(--color-cream);
}
.section--dark .btn-outline:hover,
.section--black .btn-outline:hover,
.hero .btn-outline:hover,
.page-hero .btn-outline:hover,
.mobile-cta .btn-outline:hover,
.trust-bar .btn-outline:hover {
  background: var(--color-cream);
  color: var(--color-charcoal);
}
.btn-gold {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-black);
}
.btn-gold:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-black);
}
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.75; /* lower than this and the label drops below 4.5:1 */
  cursor: not-allowed;
}

/* Small supporting line under a CTA, to reduce hesitation before the click. */
.btn-note {
  font-size: 14px;
  color: var(--color-muted);
  margin-top: var(--space-2);
}
.section--dark .btn-note,
.section--black .btn-note,
.hero .btn-note { color: var(--color-muted-invert); }

.text-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-gold-deep);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.text-link:hover { color: var(--color-gold-deep); }
.section--dark .text-link,
.section--black .text-link { border-color: var(--color-gold); }
.section--dark .text-link:hover,
.section--black .text-link:hover { color: var(--color-gold-light); }

/* ---------- 05. Header & navigation ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(20, 19, 15, 0.97);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-header); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
  padding: 14px 0;
}
.logo {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--color-cream);
  white-space: nowrap;
}
.logo span { color: var(--color-gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cream-dim);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-gold-light);
  border-color: var(--color-gold);
}
.nav-cta {
  border: 1px solid var(--color-gold) !important;
  padding: 11px 22px !important;
  color: var(--color-gold-light) !important;
}
.nav-cta:hover {
  background: var(--color-gold);
  color: var(--color-black) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 1px;
  background: var(--color-cream);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 06. Heroes ---------- */
.hero {
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  position: relative;
  background: linear-gradient(160deg, var(--color-black) 0%, var(--color-charcoal) 55%, var(--color-charcoal-light) 100%);
  color: var(--color-ink-invert);
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--space-5);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 239, 230, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 230, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.4;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  margin-bottom: var(--space-3);
}
.hero h1 em {
  font-style: italic;
  color: var(--color-gold-light);
}
.hero p.lead {
  font-size: 20px;
  color: var(--color-muted-invert);
  max-width: 560px;
  margin-bottom: var(--space-4);
}
.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.hero-reassure {
  margin-top: var(--space-3);
  font-size: 15px;
  color: var(--color-muted-invert);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.hero-reassure span { display: inline-flex; align-items: center; gap: 8px; }
.hero-reassure span::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  transform: rotate(45deg);
  flex: none;
}

.page-hero {
  padding: calc(var(--header-h) + var(--space-6)) 0 var(--space-6);
  background: var(--color-charcoal);
  color: var(--color-ink-invert);
  text-align: center;
}
.page-hero h1 { font-size: clamp(36px, 5vw, 54px); }
.page-hero p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--color-muted-invert);
  font-size: 18px;
}
.page-hero .btn { margin-top: var(--space-4); }

/* Breadcrumbs */
.breadcrumb {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 230, 0.72);
  margin-bottom: var(--space-2);
}
.breadcrumb ol {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.breadcrumb a { display: inline-block; padding: 2px 0; border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--color-gold-light); border-bottom-color: currentColor; }

/* ---------- 07. Media & placeholder blocks ---------- */
.media { position: relative; overflow: hidden; background: var(--color-cream-dim); }
.media img { width: 100%; height: 100%; object-fit: cover; }

.ph-block {
  position: relative;
  background: linear-gradient(135deg, #d8cdb8 0%, #c7b995 45%, #a98f63 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(20, 19, 15, 0.78);
}
.ph-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(20, 19, 15, 0.06) 0 2px, transparent 2px 26px);
}
.ph-block span {
  position: relative;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 var(--space-2);
}
.ph-block--dark {
  background: linear-gradient(135deg, #3a362c 0%, #26241d 100%);
  color: rgba(244, 239, 230, 0.78);
}

/* A real photo dropped into a placeholder slot. Each .ph-block holds an <img>
   pointing at a fixed filename in /images; when that file exists the photo
   covers the placeholder, and when it doesn't the img removes itself and the
   styled placeholder shows through. That means swapping a photo is purely an
   upload — no markup change. See EDITING-GUIDE.md. */
.ph-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 08. Trust bar ---------- */
.trust-bar {
  background: var(--color-black);
  color: var(--color-ink-invert);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}
.trust-bar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  text-align: center;
}
.trust-bar li {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.82);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.trust-bar li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--color-gold);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- 09. Service cards & rows ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line-dark);
  padding: var(--space-4) var(--space-3);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-soft);
}
.service-card .num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-gold-deep);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  display: block;
}
.service-card h3 { font-size: 22px; margin-bottom: var(--space-1); }
.service-card p {
  font-size: 16px;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.service-card .price-tag { margin-bottom: var(--space-2); }
.service-card .card-link { margin-top: auto; align-self: flex-start; }
/* Whole card is clickable; the link text remains the accessible name. */
.service-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.service-card--featured { border-color: var(--color-gold); }
.service-card__flag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-gold-deep);
  color: var(--color-white);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.price-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-ink);
}
.price-tag small {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.service-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line-dark);
}
.service-row:last-child { border-bottom: none; }
.service-row.reverse .ph-block,
.service-row.reverse .media { order: 2; }
.service-row .ph-block,
.service-row .media { aspect-ratio: 4 / 3; }
.service-row .num-tag {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--color-gold-deep);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  display: block;
}
.service-row h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: var(--space-2); }
.service-row .meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.service-row .meta strong {
  display: block;
  color: var(--color-ink);
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-display);
  font-weight: 500;
  margin-top: 4px;
}
.service-row ul.includes { margin-top: var(--space-2); }
.service-row ul.includes li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--color-ink);
}
.service-row ul.includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 1px;
  background: var(--color-gold-deep);
}
.service-row .row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

/* ---------- 10. Comparison table ---------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
.compare caption {
  caption-side: top;
  text-align: left;
  font-size: 14px;
  color: var(--color-muted);
  padding-bottom: var(--space-2);
}
.compare th, .compare td {
  padding: 16px var(--space-2);
  border-bottom: 1px solid var(--color-line-dark);
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  border-bottom: 1px solid var(--color-gold-deep);
}
.compare tbody th {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.compare tbody tr:last-child td,
.compare tbody tr:last-child th { border-bottom: none; }

/* ---------- 11. Process steps ---------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.process-step {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line-dark);
}
.section--dark .process-step,
.section--black .process-step { border-top-color: var(--color-line); }
.process-step .step-num {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-2);
  display: block;
}
.section--dark .process-step .step-num,
.section--black .process-step .step-num { color: var(--color-gold); }
.process-step h3,
.process-step h4 { font-size: 18px; margin-bottom: 8px; }
.process-step p { font-size: 15px; color: var(--color-muted); }
.section--dark .process-step p,
.section--black .process-step p { color: var(--color-muted-invert); }

/* ---------- 12. Portfolio ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.filter-bar button {
  background: none;
  border: 1px solid var(--color-line-dark);
  padding: 10px 20px;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.filter-bar button:hover { border-color: var(--color-gold-deep); color: var(--color-ink); }
.filter-bar button[aria-pressed="true"] {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-cream);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.portfolio-item { position: relative; }
.portfolio-item[hidden] { display: none; }
.portfolio-item .ph-block,
.portfolio-item .media { aspect-ratio: 1 / 1.1; margin-bottom: var(--space-2); }
.portfolio-item h2,
.portfolio-item h3,
.portfolio-item h4 { font-size: 18px; margin-bottom: 2px; }
.portfolio-item .tag {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
.portfolio-item.wide { grid-column: span 2; }
.portfolio-item.wide .ph-block,
.portfolio-item.wide .media { aspect-ratio: 16 / 9; }

/* ---------- 13. Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.testimonial {
  background: var(--color-white);
  border: 1px solid var(--color-line-dark);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.section--dark .testimonial,
.section--black .testimonial {
  background: var(--color-charcoal-light);
  border-color: var(--color-line);
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
}
.testimonial figcaption {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: auto;
}
.section--dark .testimonial figcaption,
.section--black .testimonial figcaption { color: var(--color-muted-invert); }
.testimonial .stars { color: var(--color-gold-deep); letter-spacing: 0.2em; font-size: 14px; }
.section--dark .testimonial .stars,
.section--black .testimonial .stars { color: var(--color-gold); }

/* ---------- 14. About & values ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.about-grid .ph-block,
.about-grid .media { aspect-ratio: 4 / 5; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.value-item h3,
.value-item h4 { font-size: 19px; margin-bottom: 8px; }
.value-item p { font-size: 16px; color: var(--color-muted); }
.section--dark .value-item p,
.section--black .value-item p { color: var(--color-muted-invert); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.stat {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-line-dark);
}
.section--dark .stat,
.section--black .stat { border-color: var(--color-line); }
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  color: var(--color-gold-deep);
  line-height: 1.1;
}
.section--dark .stat strong,
.section--black .stat strong { color: var(--color-gold-light); }
.stat span {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.section--dark .stat span,
.section--black .stat span { color: var(--color-muted-invert); }

/* ---------- 15. FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-line-dark); }
.section--dark .faq-item,
.section--black .faq-item { border-bottom-color: var(--color-line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.35;
  list-style: none;
  min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--color-gold-deep);
  flex: none;
  transition: transform var(--transition);
}
.section--dark .faq-item summary::after,
.section--black .faq-item summary::after { color: var(--color-gold); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding-bottom: var(--space-3);
  color: var(--color-muted);
  font-size: 16px;
  max-width: 68ch;
}
.section--dark .faq-item .faq-answer,
.section--black .faq-item .faq-answer { color: var(--color-muted-invert); }

/* ---------- 16. Contact & forms ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-6);
  align-items: start;
}
.contact-info h2 { font-size: 24px; margin-bottom: var(--space-3); }
.contact-info .info-block { margin-bottom: var(--space-4); }
.contact-info .info-block .label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  display: block;
  margin-bottom: 4px;
}
.contact-info .info-block a,
.contact-info .info-block p { font-size: 17px; margin: 0; }
.contact-info .info-block a { border-bottom: 1px solid var(--color-line-dark); }
.contact-info .info-block a:hover { border-color: var(--color-gold-deep); }
.social-links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.social-links a {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-gold-deep);
  padding-bottom: 2px;
}

.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-line-dark);
  padding: var(--space-4);
}
.form-group { margin-bottom: var(--space-3); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}
label .optional { text-transform: none; letter-spacing: 0; font-size: 13px; }
input, select, textarea {
  width: 100%;
  padding: 14px 16px;
  min-height: 48px;
  /* 0.55 is the lightest border that still clears 3:1 on the form card — an
     empty field has nothing but this outline to identify it. */
  border: 1px solid rgba(20, 19, 15, 0.55);
  border-radius: 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: rgba(20, 19, 15, 0.72); }
input:focus, select:focus, textarea:focus {
  border-color: var(--color-gold-deep);
  box-shadow: 0 0 0 3px rgba(138, 100, 40, 0.18);
}
/* The glow alone is invisible in forced-colors mode, so keyboard focus keeps
   a real outline on top of it. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 2px;
}
textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
::placeholder { color: var(--color-muted); opacity: 1; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b665c' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
[aria-invalid="true"] { border-color: var(--color-error) !important; }
/* Collapsed rather than display:none — a removed element is not in the
   accessibility tree, so role="alert" would never announce. */
.field-error {
  display: block;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 14px;
  color: var(--color-error);
}
.field-error.visible { max-height: none; margin: 6px 0 0; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-1);
}
.choice {
  position: relative;
  display: block;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  color: var(--color-ink);
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
}
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 12px;
  border: 1px solid rgba(20, 19, 15, 0.55);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.choice input:checked + span {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-cream);
}
.choice input:focus-visible + span {
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 3px;
}

fieldset { border: none; margin: 0 0 var(--space-3); padding: 0; }
legend {
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 14px;
  color: var(--color-muted);
  margin-top: var(--space-2);
}
.form-note a { border-bottom: 1px solid var(--color-line-dark); }

.form-callout {
  display: none;
  padding: var(--space-3);
  background: rgba(183, 141, 79, 0.14);
  border: 1px solid var(--color-gold-deep);
  font-size: 16px;
  margin-top: var(--space-3);
}
.form-callout.visible { display: block; }
.form-callout--error {
  background: rgba(163, 52, 31, 0.08);
  border-color: var(--color-error);
}
.form-callout a { border-bottom: 1px solid currentColor; }

.form-actions { margin-top: var(--space-4); }

/* ---------- 17. CTA banners ---------- */
.cta-banner { text-align: center; }
.cta-banner h2 { font-size: clamp(28px, 4vw, 42px); }
.cta-banner p {
  max-width: 520px;
  margin: 0 auto var(--space-4);
  color: var(--color-muted-invert);
  font-size: 18px;
}
.cta-banner .cta-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- 18. Footer ---------- */
.site-footer {
  background: var(--color-black);
  color: rgba(244, 239, 230, 0.72);
  padding: var(--space-5) 0 var(--space-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.footer-grid .logo { margin-bottom: var(--space-2); display: inline-block; }
.footer-grid p { font-size: 15px; max-width: 320px; }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cream-dim);
  margin-bottom: var(--space-2);
}
.footer-col a, .footer-col p {
  display: block;
  font-size: 15px;
  margin-bottom: 10px;
  color: rgba(244, 239, 230, 0.72);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--color-gold-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  font-size: 13px;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(244, 239, 230, 0.72);
}
.footer-bottom a { display: inline-block; padding: 2px 0; }
.footer-bottom a:hover { color: var(--color-gold-light); }

/* ---------- 19. Sticky mobile CTA ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 10px var(--space-2) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 19, 15, 0.97);
  border-top: 1px solid var(--color-line);
  gap: var(--space-1);
  transform: translateY(110%);
  /* visibility, not just transform — a transformed element is still in the tab
     order, and an off-screen link a keyboard user can reach is a trap. */
  visibility: hidden;
  transition: transform var(--transition), visibility var(--transition);
}
.mobile-cta.is-visible { transform: translateY(0); visibility: visible; }
.mobile-cta .btn {
  flex: 1;
  padding: 14px 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
}
body.nav-open .mobile-cta { transform: translateY(110%); visibility: hidden; }

/* ---------- 20. Motion & reveal ---------- */
/* Content is visible by default and the animation is opted into by script.js
   itself. That way a script that 404s, is blocked, or throws can never leave a
   section stuck at opacity 0 — the failure mode is "no animation", not
   "no content". */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Must match .js .reveal's specificity to win. */
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 21. Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--space-5); font-size: 28px; }
.prose h3 { margin-top: var(--space-4); font-size: 21px; }
.prose ul { margin: 0 0 var(--space-2); }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 1px;
  background: var(--color-gold-deep);
}
.prose a { border-bottom: 1px solid var(--color-gold-deep); }

/* ---------- 22. Responsive ---------- */
@media (max-width: 1024px) {
  /* Three service cards stay in one row down to the mobile breakpoint — a
     two-column grid would leave the third card stranded on its own row. */
  .testimonial-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 900px) {
  .section { padding: var(--space-5) 0; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .service-row, .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .service-row.reverse .ph-block,
  .service-row.reverse .media { order: 0; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-item.wide { grid-column: span 2; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .values-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-charcoal);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--space-4) var(--space-3) var(--space-6);
    gap: var(--space-2);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition), visibility var(--transition);
    visibility: hidden;
  }
  .nav-links.open { transform: translateX(0); visibility: visible; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; font-size: 15px; }
  .nav-cta { text-align: center; margin-top: var(--space-2); }
  .nav-toggle { display: flex; }
  /* At 320px with user-increased letter spacing the nowrap logo overflows. */
  .logo { font-size: 19px; white-space: normal; }
  /* Keeps focused controls clear of the sticky bar, as scroll-padding-top
     does for the header. */
  html { scroll-padding-bottom: 88px; }

  .services-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-item.wide { grid-column: span 1; }
  .portfolio-item.wide .ph-block,
  .portfolio-item.wide .media { aspect-ratio: 1 / 1.1; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Keep the primary CTA and the "free, no obligation" line inside the first
     screen on a phone, and stop the secondary CTA competing with the primary. */
  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--space-4)); }
  .hero p.lead { font-size: 18px; margin-bottom: var(--space-3); }
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .hero-actions .btn { width: 100%; }
  .hero-actions .btn-outline {
    background: none;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 6px;
    padding: 12px 0;
  }
  .hero-actions .btn-outline:hover {
    background: none;
    color: var(--color-gold-light);
  }
  .hero-reassure { gap: 6px var(--space-2); font-size: 14px; }
  .cta-banner .cta-actions { flex-direction: column; align-items: stretch; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .form-card { padding: var(--space-3); }

  .mobile-cta { display: flex; }
  /* Room for the sticky bar so it never covers page content. The class is
     added by script.js only on pages that actually have the bar. */
  body.has-mobile-cta { padding-bottom: 76px; }
}

@media print {
  .site-header, .mobile-cta, .nav-toggle, .filter-bar, .skip-link { display: none !important; }
  body { color: #000; background: #fff; padding-bottom: 0; }
  .section--dark, .section--black, .site-footer { background: #fff !important; color: #000 !important; }
}