/* ==========================================================================
   SOMERVILLE-BISHOP SITES — styles.css
   Design system:
     Palette   : Ink #101418 · Paper #FBFAF7 · Stone #70757A · Brass #A9894E
     Type      : Fraunces (display serif) · Archivo (body / UI)
     Feel      : luxury, minimal, clean whites with dark accent sections
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color */
  --ink: #101418;            /* near-black blue — dark sections, headings   */
  --ink-soft: #1A1F26;       /* raised surfaces on dark                     */
  --paper: #FBFAF7;          /* warm white — main background                */
  --paper-tint: #F3F1EB;     /* tinted section background                   */
  --stone: #70757A;          /* muted body text                             */
  --stone-light: #A7ABAF;    /* muted text on dark                          */
  --brass: #A9894E;          /* accent — restrained, expensive              */
  --brass-bright: #C4A468;   /* accent hover / on-dark                      */
  --line: #E6E2D9;           /* hairline borders on light                   */
  --line-dark: #2A3038;      /* hairline borders on dark                    */

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", sans-serif;

  /* Scale & rhythm */
  --radius: 20px;
  --radius-small: 12px;
  --section-pad: clamp(5rem, 12vw, 9.5rem);
  --container: 1180px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* keep anchored sections clear of fixed nav */
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; }

/* Visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Accessibility helpers */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; border-radius: var(--radius-small);
  text-decoration: none; transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }


/* ---------- Gold frame lines ---------- */
/* Two hairline gold lines running horizontally across the top and bottom
   of the viewport — a subtle frame above and below the site. They fade out
   toward the left and right ends so they never stop abruptly, and they
   ignore the mouse. */
body::before,
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(169, 137, 78, 0.45) 8%,
              rgba(169, 137, 78, 0.45) 92%,
              transparent 100%);
  z-index: 60;
  pointer-events: none;
}
body::before { top: clamp(8px, 1.2vh, 16px); }
body::after { bottom: clamp(8px, 1.2vh, 16px); }



/* Gold trim on the dark (navy) sections only: each dark section — and the
   footer — carries a hairline gold rule just inside its top and bottom
   edges, echoing the frame lines at the top and bottom of the viewport.
   White sections stay clean. */
.section--dark, .footer { position: relative; }
.section--dark::before,
.section--dark::after,
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(169, 137, 78, 0.5) 8%,
              rgba(169, 137, 78, 0.5) 92%,
              transparent 100%);
  pointer-events: none;
}
.section--dark::before { top: 10px; }
.section--dark::after { bottom: 10px; }
.footer::before { top: 10px; }

/* ---------- 3. Layout primitives ---------- */
.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section-pad); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--tint { background: var(--paper-tint); }

/* ---------- 4. Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }

h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); max-width: 20ch; }
h2 em, h1 em { font-style: italic; font-weight: 400; color: var(--brass); }
.section--dark h2 em { color: var(--brass-bright); }

h3 { font-size: 1.35rem; line-height: 1.25; }

.eyebrow {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 1.25rem;
}
.eyebrow--brass { color: var(--brass-bright); }

.section__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.section__lede {
  margin-top: 1.5rem; max-width: 56ch;
  font-size: 1.15rem; color: var(--stone);
}
.section__head--light .section__lede { color: var(--stone-light); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  border-radius: 999px; padding: 0.85rem 1.9rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { box-shadow: 0 12px 30px rgba(16, 20, 24, 0.25); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--brass { background: var(--brass); color: #fff; }
.btn--brass:hover { background: var(--brass-bright); box-shadow: 0 12px 30px rgba(169, 137, 78, 0.35); }

.btn--large { padding: 1.05rem 2.4rem; font-size: 1rem; }
.btn--small { padding: 0.6rem 1.4rem; font-size: 0.85rem; }
.btn--full { width: 100%; }

/* ---------- 6. Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
              backdrop-filter 0.35s var(--ease);
}
.nav.is-scrolled {
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
}
.nav__brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.nav__mark {
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  color: var(--paper); background: var(--ink);
  border-radius: 10px; padding: 0.45rem 0.55rem; letter-spacing: 0.05em;
}

/* SB monogram logo (replaces the old text mark). The original artwork sits
   on white, so it lives on a small white rounded tile that reads cleanly
   over both the dark hero photo and the light scrolled nav. */
.nav__logo {
  height: 40px; width: auto; display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 5px 6px;
}
.nav__logo--footer { height: 38px; border-color: var(--line-dark); }

.nav__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; }
.nav__name em { color: var(--brass); }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a:not(.btn) {
  font-size: 0.9rem; font-weight: 500; text-decoration: none;
  color: var(--ink); opacity: 0.75;
  transition: opacity 0.25s var(--ease);
}
.nav__links a:not(.btn):hover { opacity: 1; }

/* Mobile toggle (hidden on desktop) */
.nav__toggle {
  display: none; flex-direction: column; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 0.5rem;
}
.nav__toggle span {
  display: block; width: 26px; height: 2px; background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding-block: 9rem 6rem;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__glow {
  position: absolute; top: -20%; right: -10%;
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle at center,
              rgba(169, 137, 78, 0.14), rgba(169, 137, 78, 0) 65%);
  border-radius: 50%;
  will-change: transform; /* parallax target */
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 0%, transparent 75%);
  opacity: 0.55;
}
.hero__inner { position: relative; text-align: center; max-width: 900px; }
.hero__title {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  font-weight: 500; margin-bottom: 1.75rem;
}
.hero__title em { display: block; margin-top: 0.15em; }
.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--stone); max-width: 58ch; margin-inline: auto;
  margin-bottom: 2.5rem;
}
.hero__actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.hero__note { font-size: 0.85rem; color: var(--stone); letter-spacing: 0.02em; }

.hero__scrollcue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
}
.hero__scrollcue span {
  display: block; width: 1px; height: 52px;
  background: linear-gradient(var(--ink), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* On phones the hero keeps only the headline and buttons; its supporting
   line moves off the photo and reappears as an italic bridge line at the
   top of the next section. Desktop is unchanged. */
.hero-bridge { display: none; }
@media (max-width: 700px) {
  .hero__sub { display: none; }
  .hero__title { margin-bottom: 2.25rem; }
  .hero-bridge {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--ink);
    max-width: 34ch;
    margin-bottom: clamp(2.5rem, 8vw, 3.5rem);
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
  }
}


/* Hero buttons scaled down to roughly half their former size */
.hero__actions .btn {
  padding: 0.55rem 1.2rem;
  font-size: 0.8rem;
}

/* ---------- 8. Why section ---------- */
.why__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.stat { padding: 2.25rem 1.5rem; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat__num, .stat__unit {
  font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500; line-height: 1;
}
.stat__unit { font-size: 1.2rem; color: var(--brass); margin-left: 0.15rem; }
.stat__label { margin-top: 0.9rem; font-size: 0.9rem; color: var(--stone); max-width: 24ch; }

.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.why__card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.25rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.why__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(16, 20, 24, 0.08);
}
.why__icon {
  width: 46px; height: 46px; margin-bottom: 1.4rem;
  display: grid; place-items: center;
  color: var(--brass);
  background: rgba(169, 137, 78, 0.09);
  border-radius: 14px;
}
.why__icon svg { width: 24px; height: 24px; }
.why__card h3 { margin-bottom: 0.7rem; }
.why__card p { color: var(--stone); font-size: 0.98rem; }

/* ---------- 9. Outcomes (dark) ---------- */
.outcomes__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2.75rem 2rem;
}
.outcome { position: relative; padding-top: 1.4rem; }
.outcome__marker {
  position: absolute; top: 0; left: 0;
  width: 34px; height: 2px; background: var(--brass-bright);
}
.outcome h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.outcome p { color: var(--stone-light); font-size: 0.92rem; }

.outcomes__cta {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: 3rem;
  border-top: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.outcomes__cta p {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.35rem; max-width: 34ch;
}

/* ---------- 10. Services ---------- */
.services__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.service {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.75rem;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.service::after { /* subtle brass sheen on hover */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(169, 137, 78, 0.07), transparent 55%);
  opacity: 0; transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.service:hover {
  transform: translateY(-6px);
  border-color: rgba(169, 137, 78, 0.4);
  box-shadow: 0 28px 60px rgba(16, 20, 24, 0.1);
}
.service:hover::after { opacity: 1; }

.service__icon {
  width: 52px; height: 52px; margin-bottom: 1.6rem;
  display: grid; place-items: center;
  color: var(--paper); background: var(--ink);
  border-radius: 16px;
}
.service__icon svg { width: 26px; height: 26px; }
.service h3 { font-size: 1.55rem; margin-bottom: 0.9rem; }
.service > p { color: var(--stone); margin-bottom: 1.4rem; }

.service__points { list-style: none; margin-bottom: 1.75rem; }
.service__points li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.95rem; color: var(--ink);
  margin-bottom: 0.5rem;
}
.service__points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 14px; height: 2px; background: var(--brass);
}

.service__link {
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  color: var(--ink); display: inline-flex; gap: 0.4rem; align-items: center;
}
.service__link span { transition: transform 0.3s var(--ease); }
.service__link:hover span { transform: translateX(5px); }
.service__link:hover { color: var(--brass); }

/* ---------- 11. Process timeline ---------- */
.timeline {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  counter-reset: step;
}
.timeline__step {
  position: relative; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.timeline__num {
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; color: var(--brass);
  position: absolute; top: -0.7rem; left: 0;
  background: var(--paper-tint); padding-right: 0.9rem;
}
.timeline__step h3 { margin-bottom: 0.5rem; }
.timeline__step p { color: var(--stone); font-size: 0.95rem; }

/* ---------- 12. Portfolio & before/after compare ---------- */
/* Signature element: draggable before/after redesign slider */
.compare {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 8.5;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(16, 20, 24, 0.12);
  user-select: none;
  touch-action: none; /* let JS own horizontal drags on touch */
  background: var(--ink);
}
.compare__pane { position: absolute; inset: 0; }
.compare__pane--before {
  /* clipped from the right; width controlled by JS via --pos */
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.compare__tag {
  position: absolute; top: 1.1rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: 999px;
}
.compare__tag--before { left: 1.1rem; background: rgba(255,255,255,0.9); color: var(--ink); }
.compare__tag--after { right: 1.1rem; background: rgba(16,20,24,0.75); color: var(--paper); border: 1px solid var(--line-dark); }

.compare__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%); transform: translateX(-50%);
  width: 44px; cursor: ew-resize;
  display: grid; place-items: center;
}
.compare__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(16, 20, 24, 0.15);
}
.compare__grip {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  display: grid; place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 8px 24px rgba(16, 20, 24, 0.3);
  transition: transform 0.25s var(--ease);
}
.compare__handle:hover .compare__grip,
.compare__handle:focus-visible .compare__grip { transform: scale(1.1); }

.compare__caption {
  text-align: center; font-size: 0.9rem; color: var(--stone);
  margin: 1.25rem 0 clamp(3rem, 6vw, 5rem);
}

/* Stylized website mockups inside the comparison (pure CSS, no images) */
.mock {
  position: absolute; inset: 0; padding: 4% 6%;
  display: flex; flex-direction: column; gap: 4%;
}
.mock--after { background: linear-gradient(160deg, #14181D, #101418 60%); }
.mock--before { background: #DDD8CC; }

.mock__bar { display: flex; gap: 6px; }
.mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.mock__bar--old span { background: rgba(16,20,24,0.25); }

.mock__hero { margin-top: 3%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mock__headline { width: 52%; height: 16px; border-radius: 6px; background: rgba(255,255,255,0.85); }
.mock__sub { width: 38%; height: 9px; border-radius: 5px; background: rgba(255,255,255,0.35); }
.mock__cta { width: 110px; height: 26px; border-radius: 999px; background: var(--brass-bright); margin-top: 6px; }
.mock__cards { display: flex; gap: 3%; margin-top: auto; }
.mock__cards i { flex: 1; height: 64px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); }

.mock__old-banner { height: 34px; background: repeating-linear-gradient(45deg, #B9B2A2, #B9B2A2 10px, #C6BFAF 10px, #C6BFAF 20px); border: 2px solid #9A9384; }
.mock__old-cols { display: flex; gap: 3%; }
.mock__old-cols i { flex: 1; height: 46px; background: #CBC5B6; border: 1px solid #ABA595; }
.mock__old-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 2%; }
.mock__old-lines i { height: 7px; background: #B4AD9D; width: 92%; }
.mock__old-lines i:nth-child(2) { width: 84%; }
.mock__old-lines i:nth-child(3) { width: 88%; }
.mock__old-lines i:nth-child(4) { width: 60%; }

/* Project grid */
.work__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.project {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.project:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(16, 20, 24, 0.1);
}
.project__media {
  aspect-ratio: 16 / 9;
  transition: transform 0.6s var(--ease);
}
.project:hover .project__media { transform: scale(1.035); }
/* Elegant gradient placeholders in place of photography */
.project__media--1 { background: linear-gradient(135deg, #1B2129, #3A4657 55%, #7A6A48); }
.project__media--2 { background: linear-gradient(135deg, #23201B, #5A4E38 60%, #A9894E); }
.project__media--3 { background: linear-gradient(135deg, #14181D, #2C3640 55%, #8B8271); }
.project__media--4 {
  background:
    linear-gradient(135deg, rgba(169,137,78,0.12), transparent),
    repeating-linear-gradient(45deg, var(--paper-tint), var(--paper-tint) 14px, #EDEAE2 14px, #EDEAE2 28px);
}
.project__info { padding: 1.75rem 2rem 2rem; }
.project__info h3 { margin-bottom: 0.5rem; }
.project__info p { color: var(--stone); font-size: 0.95rem; margin-bottom: 1rem; }
.project__meta {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass);
}

/* ---------- 13. Testimonials (dark) ---------- */
.testimonials .section__head { margin-bottom: 3rem; }
.testimonials__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.quote {
  background: var(--ink-soft); border: 1px solid var(--line-dark);
  border-radius: var(--radius); padding: 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.quote:hover { transform: translateY(-5px); border-color: rgba(196, 164, 104, 0.4); }
.quote blockquote p {
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4;
  font-weight: 400; margin-bottom: 2rem;
}
.quote figcaption { display: flex; flex-direction: column; gap: 0.15rem; }
.quote__name { font-weight: 600; font-size: 0.95rem; }
.quote__role { font-size: 0.85rem; color: var(--stone-light); }

/* ---------- 14. FAQ ---------- */
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.6rem 0.25rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 500;
  transition: color 0.25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brass); }

.faq__chevron {
  flex-shrink: 0; width: 12px; height: 12px; position: relative;
  transition: transform 0.35s var(--ease);
}
.faq__chevron::before, .faq__chevron::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: currentColor; transform: translate(-50%, -50%);
}
.faq__chevron::before { width: 12px; height: 1.5px; }
.faq__chevron::after { width: 1.5px; height: 12px; transition: transform 0.35s var(--ease); }
.faq__item[open] .faq__chevron::after { transform: translate(-50%, -50%) scaleY(0); }

.faq__answer { overflow: hidden; }
.faq__answer p {
  padding: 0 0.25rem 1.6rem;
  color: var(--stone); max-width: 62ch;
}

/* ---------- 15. Final CTA ---------- */
.cta__layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.cta__lede { color: var(--stone-light); margin: 1.5rem 0 2.5rem; max-width: 46ch; }

.cta__contacts { display: flex; flex-direction: column; gap: 1.5rem; }
.cta__contact-label {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone-light); margin-bottom: 0.3rem;
}
.cta__contact-value {
  font-family: var(--font-display); font-size: 1.5rem;
  text-decoration: none; color: var(--paper);
  transition: color 0.25s var(--ease);
}
.cta__contact-value:hover { color: var(--brass-bright); }

.cta__form {
  background: var(--ink-soft); border: 1px solid var(--line-dark);
  border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.75rem);
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: block; font-size: 0.85rem; font-weight: 500;
  margin-bottom: 0.45rem; color: var(--stone-light);
}
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--paper);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-small);
  padding: 0.85rem 1rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--brass-bright);
  background: rgba(255, 255, 255, 0.07);
}
.field textarea { resize: vertical; min-height: 110px; }
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field input.is-invalid { border-color: #C46A5A; }

.cta__form-note {
  text-align: center; font-size: 0.85rem;
  color: var(--stone-light); margin-top: 1rem;
}
.cta__form-success {
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  background: rgba(196, 164, 104, 0.12);
  border: 1px solid rgba(196, 164, 104, 0.4);
  border-radius: var(--radius-small);
  font-size: 0.95rem; color: var(--brass-bright);
}

/* ---------- 15b. Pricing ---------- */
.pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem; align-items: stretch;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.5rem;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(16, 20, 24, 0.1);
  border-color: rgba(169, 137, 78, 0.4);
}
/* Featured tier: dark card that anchors the row */
.plan--featured {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.plan--featured:hover { box-shadow: 0 32px 70px rgba(16, 20, 24, 0.3); }
.plan__badge {
  position: absolute; top: -0.85rem; left: 2.5rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--brass); color: #fff;
  padding: 0.4rem 1rem; border-radius: 999px;
}
.plan__head { margin-bottom: 1.75rem; }
.plan h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.plan__for { font-size: 0.92rem; color: var(--stone); max-width: 30ch; }
.plan--featured .plan__for { color: var(--stone-light); }

.plan__price { margin-top: 1.5rem; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.plan__from {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stone); width: 100%;
}
.plan--featured .plan__from { color: var(--stone-light); }
.plan__amount {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 3vw, 2.8rem); line-height: 1;
}
.plan--featured .plan__amount { color: var(--brass-bright); }
.plan__term { font-size: 0.88rem; color: var(--stone); }
.plan--featured .plan__term { color: var(--stone-light); }

.plan__points { flex: 1; margin-bottom: 2rem; }
.plan__points li {
  position: relative; padding: 0.45rem 0 0.45rem 1.6rem;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.plan__points li:last-child { border-bottom: none; }
.plan--featured .plan__points li { border-color: var(--line-dark); }
.plan__points li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 14px; height: 2px; background: var(--brass);
}
.plan--featured .plan__points li::before { background: var(--brass-bright); }
.plan--featured .btn--ghost { color: var(--paper); border-color: var(--line-dark); }


/* The Essential tier reads deliberately quieter than its neighbors:
   muted heading, softer hover, and grey "not included" lines. */
.plan--basic h3 { color: var(--stone); }
.plan--basic .plan__amount { color: var(--stone); }
.plan--basic:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: 0 16px 36px rgba(16, 20, 24, 0.06); }
.plan__points li.minus { color: var(--stone); }
.plan__points li.minus::before { background: var(--stone-light); }

/* Maintenance / care plans band */
.care {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--paper-tint); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.care__intro h3 { font-size: 1.6rem; margin-bottom: 0.8rem; }
.care__intro p { color: var(--stone); font-size: 0.98rem; max-width: 34ch; }

.care__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.care__plan {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-small); padding: 1.75rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.care__plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,20,24,0.08); }
.care__plan--accent { border-color: rgba(169, 137, 78, 0.45); }
.care__plan-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.care__plan h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.care__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--brass); }
.care__price span { font-family: var(--font-body); font-size: 0.85rem; color: var(--stone); }
.care__plan ul li {
  position: relative; padding: 0.3rem 0 0.3rem 1.4rem;
  font-size: 0.9rem; color: var(--ink);
}
.care__plan ul li::before {
  content: ""; position: absolute; left: 0; top: 0.9em;
  width: 12px; height: 2px; background: var(--brass);
}

.pricing__note {
  margin-top: 2.5rem; text-align: center;
  font-size: 0.92rem; color: var(--stone);
  max-width: 62ch; margin-inline: auto;
}

/* ---------- 15b. Multi-page components ---------- */
/* Active page indicator in the navigation */
.nav__links a[aria-current="page"]:not(.btn) {
  opacity: 1; color: var(--brass); font-weight: 600;
}

/* Interior page hero (smaller than the homepage hero) */
.page-hero {
  position: relative;
  padding: clamp(9rem, 16vw, 12rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
}
.page-hero::before { /* faint brass glow, echoing the homepage */
  content: ""; position: absolute; top: -30%; right: -12%;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle at center,
              rgba(169, 137, 78, 0.13), rgba(169, 137, 78, 0) 65%);
  border-radius: 50%; pointer-events: none;
}
.page-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 500; max-width: 18ch; margin-bottom: 1.5rem;
}
.page-hero h1 em { font-style: italic; font-weight: 400; color: var(--brass); }
.page-hero__lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--stone); max-width: 60ch;
}

/* Reusable end-of-page CTA banner */
.cta-banner { padding-bottom: var(--section-pad); }
.cta-banner__inner {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius);
  padding: clamp(3rem, 7vw, 5.5rem);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-banner__inner::before {
  content: ""; position: absolute; top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 120%;
  background: radial-gradient(ellipse at top,
              rgba(196, 164, 104, 0.14), transparent 65%);
  pointer-events: none;
}
.cta-banner h2 { margin-inline: auto; margin-bottom: 1.25rem; }
.cta-banner h2 em { color: var(--brass-bright); }
.cta-banner p {
  color: var(--stone-light); max-width: 52ch;
  margin: 0 auto 2.25rem;
}
.cta-banner__actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  position: relative;
}
.cta-banner__phone {
  display: block; margin-top: 1.5rem;
  font-size: 0.92rem; color: var(--stone-light);
}
.cta-banner__phone a { color: var(--brass-bright); text-decoration: none; font-weight: 600; }
.cta-banner__phone a:hover { text-decoration: underline; }

/* Detailed service rows (services page) — alternating layout */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.detail + .detail { margin-top: clamp(4rem, 9vw, 7rem); }
.detail:nth-child(even) .detail__visual { order: 2; }
.detail__eyebrow-num {
  font-family: var(--font-display); font-style: italic;
  color: var(--brass); font-size: 1rem; display: block; margin-bottom: 0.9rem;
}
.detail h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 1.1rem; }
.detail__pitch { font-size: 1.1rem; color: var(--ink); margin-bottom: 1rem; font-weight: 500; }
.detail p { color: var(--stone); margin-bottom: 1rem; max-width: 54ch; }
.detail .service__points { margin: 1.4rem 0 1.9rem; }
.detail__visual {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(16, 20, 24, 0.1);
}
.detail__visual--design { background: linear-gradient(140deg, #14181D 0%, #2C3640 55%, #A9894E 130%); }
.detail__visual--redesign { background: linear-gradient(140deg, #23201B 0%, #5A4E38 60%, #C4A468 135%); }
.detail__visual--commerce { background: linear-gradient(140deg, #1B2129 0%, #3A4657 55%, #7A6A48 130%); }
.detail__visual--care { background: linear-gradient(140deg, #101418 0%, #1A1F26 50%, #8B8271 140%); }


/* Services page visuals: real photography replaces the gradient panels.
   Focal points chosen per image so the subject stays in frame. */
.detail__visual--design {
  background: url("images/svc-design.jpg") 42% center / cover no-repeat;
}
.detail__visual--redesign {
  background: url("images/svc-redesign.jpg") center / cover no-repeat;
}
.detail__visual--commerce {
  background: url("images/svc-commerce.jpg") center / cover no-repeat;
}
.detail__visual--care {
  background: url("images/svc-care.jpg") center / cover no-repeat;
}

@media (max-width: 820px) {
  .detail { grid-template-columns: 1fr; }
  .detail:nth-child(even) .detail__visual { order: 0; }
}

/* ---------- 16. Footer ---------- */
.footer { background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-dark); }
.footer__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem; padding-block: 4.5rem 3rem;
}
.footer__brand p { font-family: var(--font-display); font-size: 1.15rem; margin-top: 1rem; }
.footer__brand em { color: var(--brass-bright); }
.footer__tag { font-family: var(--font-body) !important; font-size: 0.9rem !important; color: var(--stone-light); margin-top: 0.4rem !important; }

.footer__links, .footer__contact { display: flex; flex-direction: column; gap: 0.8rem; }
.footer__links a, .footer__contact a {
  text-decoration: none; font-size: 0.95rem; color: var(--stone-light);
  transition: color 0.25s var(--ease); width: fit-content;
}
.footer__links a:hover, .footer__contact a:hover { color: var(--paper); }

.footer__legal {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.75rem;
  font-size: 0.85rem; color: var(--stone-light);
}

/* ---------- 17. Scroll-reveal animation ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Gentle stagger for grids of revealed items */
.is-visible:nth-child(2) { transition-delay: 0.07s; }
.is-visible:nth-child(3) { transition-delay: 0.14s; }
.is-visible:nth-child(4) { transition-delay: 0.21s; }
.is-visible:nth-child(5) { transition-delay: 0.28s; }
.is-visible:nth-child(6) { transition-delay: 0.35s; }

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 19. Responsive ---------- */
@media (max-width: 1024px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .outcomes__list { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}

@media (max-width: 820px) {
  /* Mobile navigation */
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 2.25rem;
    background: var(--paper);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s var(--ease);
  }
  .nav__links.is-open { opacity: 1; pointer-events: auto; }
  .nav__links a:not(.btn) { font-size: 1.4rem; font-family: var(--font-display); opacity: 1; }
  .nav.is-menu-open { background: var(--paper); }

  .why__stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }

  .services__grid, .work__grid { grid-template-columns: 1fr; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .care { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
  .cta__layout { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .compare { aspect-ratio: 16 / 11; }
}

@media (max-width: 560px) {
  .why__grid, .outcomes__list, .timeline { grid-template-columns: 1fr; }
  .why__stats { grid-template-columns: 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: none; }
  .field--split { grid-template-columns: 1fr; }
  .care__plans { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .outcomes__cta { flex-direction: column; align-items: flex-start; }
  .compare { aspect-ratio: 4 / 5; }
}



/* ---------- 21. Photographic hero ---------- */
/* The hero now sits on a photograph (embedded below as a data URI), so all
   hero text flips to light and gets a dark gradient overlay for contrast. */
.hero {
  background:
    linear-gradient(180deg, rgba(16,20,24,0.72) 0%, rgba(16,20,24,0.55) 45%, rgba(16,20,24,0.72) 100%),
    url("images/hero.jpg") 66% 45% / cover no-repeat;
  background-color: var(--ink);
  color: var(--paper);
}
.hero__grid { display: none; }

/* On phones, swap in a dedicated portrait crop of the same photo, cut
   directly around the man and the glowing laptop, so the subject is
   guaranteed to sit centered on screen no matter the device size. */
@media (max-width: 820px), (orientation: portrait) {
  .hero {
    background:
      linear-gradient(180deg, rgba(16,20,24,0.72) 0%, rgba(16,20,24,0.55) 45%, rgba(16,20,24,0.72) 100%),
      url("images/hero-mobile.jpg") center 40% / cover no-repeat;
    background-color: var(--ink);
  }
}

/* Soft transition between the hero photograph and the light page below:
   the photo gently dissolves into the paper background instead of
   stopping at a hard horizontal line. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(140px, 24vh, 240px);
  background: linear-gradient(180deg,
              rgba(251, 250, 247, 0) 0%,
              rgba(251, 250, 247, 0.4) 55%,
              var(--paper) 100%);
  pointer-events: none;
}
.hero__inner, .hero__scrollcue { position: relative; z-index: 1; }
.hero__scrollcue span {
  background: linear-gradient(var(--brass), transparent); /* reads over both photo and fade */
}               /* line grid doesn't read over a photo */
.hero__glow { opacity: 0.7; }                /* keep a faint brass warmth */
.hero .eyebrow { color: var(--brass-bright); }
.hero__title { color: var(--paper); text-shadow: 0 2px 30px rgba(0,0,0,0.45); }
.hero__title em { color: var(--brass-bright); }
.hero__sub { color: rgba(251, 250, 247, 0.82); }
.hero__note { color: rgba(251, 250, 247, 0.6); }
.hero .btn--dark { background: var(--paper); color: var(--ink); }
.hero .btn--dark:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.hero .btn--ghost { color: var(--paper); border-color: rgba(251, 250, 247, 0.35); }
.hero .btn--ghost:hover { border-color: var(--paper); }
.hero__scrollcue span { background: linear-gradient(rgba(251,250,247,0.9), transparent); }

/* While the (transparent) nav floats over the dark hero on the Home page,
   its text flips to light. Once scrolled, the frosted light nav takes over. */
body.route-home .nav:not(.is-scrolled) .nav__name,
body.route-home .nav:not(.is-scrolled) .nav__links a:not(.btn) { color: var(--paper); }
body.route-home .nav:not(.is-scrolled) .nav__links a[aria-current="page"]:not(.btn) { color: var(--brass-bright); }
body.route-home .nav:not(.is-scrolled) .nav__toggle span { background: var(--paper); }
body.route-home .nav:not(.is-scrolled) .nav__mark { background: var(--paper); color: var(--ink); }
body.route-home .nav:not(.is-scrolled) .btn--dark { background: var(--paper); color: var(--ink); }
@media (max-width: 820px) {
  /* Inside the opened mobile menu the background is light again */
  body.route-home .nav.is-menu-open .nav__links a:not(.btn) { color: var(--ink); }
  body.route-home .nav.is-menu-open .nav__toggle span { background: var(--ink); }
}