/* ============================================================
   CezDesigns — design system + site styles
   Editorial studio aesthetic: huge type, sharp imagery, thin
   dividers, restrained colour. Numbers are the signature device.
   No glassmorphism, no glow, no gradients-for-effect.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --bg:            #FAF8F5;
  --bg-alt:        #EFEFD0;
  --surface:       #FFFFFF;
  --navy:          #0A192F;
  --text:          #334155;
  --text-faint:    rgba(51, 65, 85, 0.58);
  --border:        rgba(10, 25, 47, 0.08);
  --border-soft:   rgba(10, 25, 47, 0.05);
  --blue:          #1A659E;
  --blue-deep:     #004E89;
  --blue-dim:      rgba(26, 101, 158, 0.10);
  --on-blue:       #FFFFFF;
  --on-navy:       #FAF8F5;

  /* ---- Type ---- */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --container: 78rem;
  --container-narrow: 44rem;
  --edge: 1.5rem;
  --radius: 3px;
  --section-pad: clamp(5rem, 9vw, 9rem);
  --nav-h: 4.5rem;

  /* ---- Shadow / motion ---- */
  --shadow-soft: 0 18px 44px -26px rgba(10, 25, 47, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--blue); color: var(--on-blue); }

/* Visible focus ring everywhere — no outline: none without a replacement */
:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--navy);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout helpers ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge);
}

@media (min-width: 640px) { .container { --edge: 2.5rem; } }
@media (min-width: 1400px) { .container { --edge: 3.5rem; } }

section { padding: var(--section-pad) 0; }

.section-tight { padding-top: calc(var(--section-pad) * 0.4); }

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head.wide { max-width: 56rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--blue);
  flex-shrink: 0;
}

.section-title {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  margin-bottom: 1.1rem;
}

.section-lede {
  color: var(--text);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 36rem;
}

.section-head.center .section-lede { margin-left: auto; margin-right: auto; }

.accent-highlight {
  color: var(--blue);
}

.text-accent { color: var(--blue); }

.bg-alt { background: var(--bg-alt); }
.bg-ink { background: var(--navy); color: var(--bg); }
.bg-ink .eyebrow { color: rgba(250, 248, 245, 0.55); }
.bg-ink .section-title { color: var(--bg); }
.bg-ink .section-lede { color: rgba(250, 248, 245, 0.72); }

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.95rem 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; transition: transform 0.25s var(--ease); }

.btn-primary { background: var(--navy); color: var(--bg); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-accent { background: var(--blue); color: var(--on-blue); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(26, 101, 158, 0.4); }
.btn-accent:hover svg { transform: translateX(3px); }

.btn-secondary { background: transparent; border-color: var(--border); color: var(--navy); }
.btn-secondary:hover { border-color: var(--navy); transform: translateY(-2px); }

.btn-ghost-light { background: transparent; border-color: rgba(250, 248, 245, 0.32); color: var(--bg); }
.btn-ghost-light:hover { background: rgba(250, 248, 245, 0.1); transform: translateY(-2px); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 0.15rem;
  transition: border-color 0.2s ease, gap 0.2s ease, color 0.2s ease;
}
.link-arrow:hover { border-color: var(--blue); color: var(--blue); gap: 0.6rem; }
.link-arrow svg { width: 1rem; height: 1rem; }

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Parallax drift ----------
   Wraps a block (see js/main.js) so it drifts up a little faster than
   the page as it passes through the viewport — independent of, and on
   top of, any .reveal fade-up the wrapped element already has. Kept
   as a wrapper rather than added to the element itself so it never
   fights .reveal's own transform on the same element. js/main.js
   skips this entirely under prefers-reduced-motion, leaving the
   wrapper untransformed. */
.parallax-drift { will-change: transform; }

/* ============================================================
   Nav
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 248, 245, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
/* Pages with a pinned hero cover (currently just index.html) override
   this to start hidden and reveal on scroll — see css/intro.css. Kept
   out of this shared rule because every other page loads style.css
   without js/intro.js, and would have no way to ever un-hide it. */

.site-nav .container {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo { display: inline-flex; align-items: center; }

.logo-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-transform: lowercase;
}
.logo-dot { color: var(--blue); }
.footer-brand .logo-mark { font-size: 1.6rem; display: inline-block; margin-bottom: 1rem; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}

.nav-links a:not(.btn) {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s ease;
}
.nav-links a:not(.btn):hover { color: var(--navy); }

.nav-cta { display: none; }
@media (min-width: 900px) { .nav-cta { display: inline-flex; } }

.nav-social {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.nav-social svg { width: 1.4rem; height: 1.4rem; }
.nav-social:hover { transform: translateY(-2px); }
@media (min-width: 900px) { .nav-social { display: inline-flex; } }

.mobile-menu-social {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
}
.mobile-menu-social svg { width: 1.5rem; height: 1.5rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
}
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-toggle .icon-close { display: none; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}
@media (max-width: 899px) {
  .nav-links { display: none; }
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 190;
  background: var(--bg);
  padding: 1rem var(--edge) 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
  overflow-y: auto;
}
.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0s;
}
.mobile-menu a:not(.btn) {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 0.9rem 0.1rem;
  border-bottom: 1px solid var(--border-soft);
}
.mobile-menu .btn { margin-top: 1.5rem; align-self: center; }
body.menu-open { overflow: hidden; }
body.menu-open .nav-toggle .icon-open { display: none; }
body.menu-open .nav-toggle .icon-close { display: block; }

/* ============================================================
   Introduction statement
   ============================================================ */

.intro { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  border-top: 1px solid var(--border);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 780px) { .intro-grid { grid-template-columns: 1fr; } }

.intro-lede {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 22rem;
}

.intro-body { color: var(--text); font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 28rem; }

/* ============================================================
   Portfolio — homepage preview (asymmetric compositions)
   ============================================================ */

.work-preview-list {
  display: flex;
  flex-direction: column;
}

.work-preview-item {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--border);
}
.work-preview-item:last-child { border-bottom: 1px solid var(--border); }

.proj-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.25rem, 8vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--navy);
  display: block;
  margin-bottom: 1.5rem;
}

.work-preview-media {
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.work-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--ease);
}
.work-preview-item:hover .work-preview-media img { transform: scale(1.035); }

.work-preview-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.75rem;
  display: block;
}

.work-preview-body h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: 0.9rem; }
.work-preview-body p { color: var(--text); font-size: 1.02rem; margin-bottom: 1.5rem; max-width: 30rem; }
.work-preview-links { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }

/* Layout: full — number + full-width image, title row split beneath */
.layout-full .work-preview-media { aspect-ratio: 16 / 9; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.layout-full .work-preview-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border);
}
@media (max-width: 700px) { .layout-full .work-preview-split { grid-template-columns: 1fr; } }

/* Layout: wide — image dominant ~68%, text beside */
.layout-wide .work-preview-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}
.layout-wide .work-preview-media { aspect-ratio: 5 / 4; }
@media (max-width: 860px) {
  .layout-wide .work-preview-grid { grid-template-columns: 1fr; }
}

/* Layout: airy — smaller image, lots of whitespace, number leads */
.layout-airy .work-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.layout-airy .work-preview-media { aspect-ratio: 21 / 5; }
.layout-airy { padding-top: clamp(5.5rem, 10vw, 8rem); padding-bottom: clamp(5.5rem, 10vw, 8rem); }
@media (max-width: 860px) {
  .layout-airy .work-preview-grid { grid-template-columns: 1fr; }
  .layout-airy .work-preview-media { order: 2; margin-top: 2rem; }
}

/* Layout: lead — text first, image inset and offset right */
.layout-lead .work-preview-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.layout-lead .work-preview-media { aspect-ratio: 21 / 5; }
@media (max-width: 860px) {
  .layout-lead .work-preview-grid { grid-template-columns: 1fr; }
  .layout-lead .work-preview-media { order: -1; margin-bottom: 2rem; }
}

.work-cta-row { margin-top: clamp(3rem, 6vw, 4.5rem); text-align: center; }

/* ============================================================
   Work index page — full list
   ============================================================ */

.work-index-list { border-top: 1px solid var(--border); }

.work-index-item {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 780px) { .work-index-item { grid-template-columns: 1fr; } }
.work-index-item:nth-child(even) .work-index-media { order: 2; }
@media (max-width: 780px) { .work-index-item:nth-child(even) .work-index-media { order: -1; } }

.work-index-media {
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 11;
}
.work-index-media.media-flat { aspect-ratio: 21 / 5; }
.work-index-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform 0.6s var(--ease);
}
.work-index-media.media-flat img { object-position: center; }
.work-index-item:hover .work-index-media img { transform: scale(1.04); }

.work-index-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  display: block;
}

.work-index-body h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 0.85rem; }
.work-index-body p { color: var(--text); max-width: 30rem; margin-bottom: 1.4rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.chip {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.75rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
}
.chip-concept { background: rgba(26, 101, 158, 0.07); border-color: rgba(26, 101, 158, 0.22); color: var(--blue); }

/* ============================================================
   Case study page
   ============================================================ */

.cs-hero { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 2.5rem;
}
.cs-back svg { width: 1.05rem; height: 1.05rem; }
.cs-back:hover { color: var(--navy); }

.cs-title-row { margin-bottom: 2.5rem; }
.cs-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
  display: block;
  margin-bottom: 1rem;
}
.cs-title-row h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); max-width: 42rem; }

.cs-hero-media { overflow: hidden; border: 1px solid var(--border); }
.cs-hero-media img { width: 100%; display: block; }

.cs-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--border);
}
.cs-meta-item h4 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.5rem;
}
.cs-meta-item p, .cs-meta-item a { font-size: 1.02rem; font-weight: 600; }
.cs-meta-item a:hover { color: var(--blue); }

.cs-story {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
@media (max-width: 780px) { .cs-story { grid-template-columns: 1fr; gap: 2.5rem; } }
.cs-story-block h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cs-story-block p { color: var(--text); }

.cs-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.cs-gallery img { border: 1px solid var(--border); width: 100%; }
.cs-gallery .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .cs-gallery { grid-template-columns: 1fr; } }

.cs-mobile-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 15rem)); justify-content: start; gap: 1.25rem; max-width: 44rem; }
.cs-mobile-strip img { border: 1px solid var(--border); }

.cs-next {
  border-top: 1px solid var(--border);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cs-next-label { font-size: 0.85rem; color: var(--text-faint); font-weight: 600; margin-bottom: 0.4rem; }
.cs-next h3 { font-size: clamp(1.4rem, 3vw, 2rem); }

/* ============================================================
   Interactive case-study preview ("browser frame")
   A real cross-origin <iframe> of the live sibling site, not a
   screenshot — see js/preview.js. Inert by default (poster image
   + click-to-activate overlay): a cross-origin iframe's internal
   scroll-chaining at its own top/bottom boundary can't be
   suppressed from this side (that CSS would have to live inside
   the embedded document, which belongs to a separate project, not
   touched here) — so activating it is an explicit, reversible act
   instead, and a visitor is never scrolling one thing while
   meaning to scroll the other.
   ============================================================ */

.cs-preview { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

.cs-preview-chrome {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.cs-preview-titlebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.cs-preview-dots { display: flex; gap: 0.35rem; flex-shrink: 0; }
.cs-preview-dots span { width: 0.45rem; height: 0.45rem; border-radius: 50%; display: block; }
.cs-preview-dots span:nth-child(1) { background: var(--border); }
.cs-preview-dots span:nth-child(2) { background: var(--text-faint); }
.cs-preview-dots span:nth-child(3) { background: var(--blue); }

.cs-preview-url {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: var(--blue-dim);
  color: var(--blue);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  transition: color 0.2s ease;
}
.cs-preview-url:hover, .cs-preview-url:focus-visible { color: var(--blue-deep); }
.cs-preview-url svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.cs-preview-url-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.cs-preview-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.cs-preview-refresh {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  border-radius: var(--radius);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cs-preview-refresh svg { width: 1.05rem; height: 1.05rem; }
.cs-preview-refresh:hover, .cs-preview-refresh:focus-visible { background: var(--bg-alt); color: var(--navy); }

.cs-preview-mode { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cs-preview-mode-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-faint);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cs-preview-mode-btn + .cs-preview-mode-btn { border-left: 1px solid var(--border); }
.cs-preview-mode-btn:hover { color: var(--navy); }
.cs-preview-mode-btn.is-active { background: var(--navy); color: var(--bg); }

.cs-preview-frame {
  position: relative;
  overflow: hidden;
  height: clamp(24rem, 55vh, 34rem);
  background: var(--bg-alt);
}

.cs-preview-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 0; }

.cs-preview-iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: top left;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s var(--ease);
}
.cs-preview-iframe.is-ready { opacity: 1; }
.cs-preview.is-active .cs-preview-iframe { pointer-events: auto; }

.cs-preview-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(10, 25, 47, 0.55);
  text-align: center;
  padding: 1.5rem;
}
.cs-preview.is-active .cs-preview-overlay { display: none; }

.cs-preview-hint { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(250, 248, 245, 0.85); font-size: 0.85rem; font-weight: 600; }
.cs-preview-hint svg { width: 1rem; height: 1rem; animation: cs-preview-hint-bounce 1.6s ease-in-out infinite; }
@keyframes cs-preview-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.cs-preview-exit {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  background: rgba(10, 25, 47, 0.55);
  color: var(--bg);
  border-radius: var(--radius);
  transition: background-color 0.2s ease;
}
.cs-preview-exit svg { width: 1.1rem; height: 1.1rem; }
.cs-preview-exit:hover, .cs-preview-exit:focus-visible { background: rgba(10, 25, 47, 0.8); }
.cs-preview.is-active .cs-preview-exit { display: inline-flex; }

@media (max-width: 780px) {
  .cs-preview-titlebar { padding: 0.6rem; }
}
@media (max-width: 700px) {
  .cs-preview-titlebar { flex-wrap: wrap; }
  .cs-preview-toolbar { width: 100%; justify-content: space-between; }
}

/* ---- Fullscreen "View Full Site" dialog ----
   Same centering/backdrop/open-animation technique as
   #qualify-modal (see the Qualification dialog section below),
   just sized for content instead of a form. ---- */

body.preview-open { overflow: hidden; }

.cs-preview-dialog {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  padding: 0;
  width: min(96vw, 100rem);
  height: min(92vh, 100rem);
  background: var(--surface);
  box-shadow: 0 30px 80px -20px rgba(10, 25, 47, 0.45);
}
/* display must stay scoped to [open] — an unconditional `display: flex`
   here would beat the browser's own `dialog:not([open]) { display: none }`
   default (an author stylesheet's normal rule always wins over a user-
   agent rule, regardless of selector specificity), permanently showing
   this as a fixed white box even while closed. */
.cs-preview-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: cs-preview-dialog-in 0.3s var(--ease) forwards;
}
.cs-preview-dialog::backdrop { background: rgba(10, 25, 47, 0.6); }

@keyframes cs-preview-dialog-in {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-preview-dialog[open] { animation: none; }
}

.cs-preview-dialog-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cs-preview-dialog-title { font-family: var(--font-display); font-weight: 700; color: var(--navy); flex: 1; }
.cs-preview-dialog-tab-link, .cs-preview-dialog-close { flex-shrink: 0; }

.cs-preview-dialog-iframe { flex: 1; width: 100%; border: 0; display: block; }

@media (max-width: 700px) {
  .cs-preview-dialog { width: 100vw; height: 100vh; }
  .cs-preview-dialog-tab-link span { display: none; }
}

/* ============================================================
   Process
   (also reused for the homepage's "Built properly. Priced
   fairly." section — same 4-up numbered-card language, one
   less component to maintain)
   ============================================================ */

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
@media (max-width: 860px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process-grid { grid-template-columns: 1fr; } }

.process-step { padding-top: 1.75rem; border-top: 2px solid var(--navy); }
.process-step-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
  display: block;
  margin-bottom: 0.85rem;
}
.process-step h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.process-step p { color: var(--text); font-size: 0.95rem; }

/* ============================================================
   Pricing — homepage teaser
   ============================================================ */

/* Landscape photo behind the whole section. The gradient is layered
   *above* the image (first background-image listed paints on top),
   fading it to the page background at the top and bottom edges so
   the photo dissolves into the surrounding white sections instead of
   ending in a hard rectangular edge. Percentage stops so the fade
   band is always ~15% of the section's own height, whatever that is
   at a given viewport, rather than a fixed px band that would look
   too thin on a tall section or too thick on a short one.
   background-position favours the right/lower part of the frame,
   since that's where the wheat sits — cover crops the sides on most
   viewports, and centering would cut the wheat off entirely. */
#pricing {
  background-image:
    linear-gradient(to bottom, var(--bg) 0%, transparent 15%, transparent 85%, var(--bg) 100%),
    url('../assets/pricing-background.png');
  background-size: cover;
  background-position: right 70%;
  background-repeat: no-repeat;
}

/* Hosting section — scenic photo instead of the old --bg-alt cream/
   yellow fill. background-color is the fallback if the photo file is
   ever missing — var(--bg), the site's neutral off-white, never the
   yellow --bg-alt tone, so there's no yellow at any point either way.
   The wash is a flat, moderate tint (not top/bottom-fading like
   #pricing above) because body copy runs the full height of this
   section, not just a hero card at the top — it needs even contrast
   everywhere, not just at the edges. Lighter than a first pass would
   suggest because the photo itself is already very pale — a heavy
   wash over it just erases the coastline, the one part of the frame
   with any visual interest. Position favours the left, where that
   coastline sits, since cover crops the sides on most viewports and
   centering would crop straight into it. */
#hosting {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(250, 248, 245, 0.65), rgba(250, 248, 245, 0.65)),
    url('../assets/hosting-background.png');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

.pricing-teaser {
  max-width: 28rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--navy);
  color: var(--bg);
  text-align: center;
}
.pricing-teaser-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 4rem);
  letter-spacing: -0.02em;
}
.pricing-teaser-note {
  display: block;
  font-size: 0.85rem;
  color: rgba(250, 248, 245, 0.6);
  margin-bottom: 1.75rem;
}
.pricing-teaser .feature-checklist {
  margin: 0 auto 2rem;
  text-align: left;
}
.pricing-teaser .btn { margin: 0 auto; }

.eyebrow.center { justify-content: center; }

/* ============================================================
   Local Business Offer — finder entry + homepage promo banner
   .finder-entry is a blank-by-design <button> trigger for
   #qualify-modal (see js/main.js) — no copy, icon or discount amount,
   per the current brief. .local-offer-ad is a plain <a> to #pricing;
   the image fills it edge-to-edge with no border/padding — background-
   color is a fallback layer only (shows if the image 404s), not a
   visible frame around it.
   ============================================================ */

.finder-entry {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: clamp(3.5rem, 8vw, 4.5rem);
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  border: 1px solid var(--border);
  background-color: var(--surface);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s ease;
}
.finder-entry:hover, .finder-entry:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--blue); }

.local-offer-ad {
  display: block;
  width: 100%;
  max-width: 60rem;
  aspect-ratio: 2.5 / 1;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  background-color: var(--surface);
  background-image: url('../assets/local-business-offer.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.local-offer-ad:hover, .local-offer-ad:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

/* ============================================================
   Qualification dialog (Local Business Offer)
   Native <dialog> — showModal() provides focus-trapping, ESC-to-close
   and focus-restore for free; only the open-transition and step
   switching are custom (see js/main.js).
   ============================================================ */

.qualify-modal {
  /* Centering a native <dialog> normally relies on the UA stylesheet's
     dialog:modal { margin: auto } inside its fixed, inset:0 box — but
     the site-wide * { margin: 0 } reset (an author rule) always beats
     that regardless of source order, and re-declaring margin: auto
     here didn't reliably resolve back to a centered used value either.
     A fixed-position, translate-based center sidesteps the auto-margin
     algorithm entirely, so it isn't at the mercy of either. */
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  padding: 0;
  width: calc(100% - 2rem);
  max-width: 28rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 30px 80px -20px rgba(10, 25, 47, 0.45);
}
.qualify-modal::backdrop { background: rgba(10, 25, 47, 0.6); }

/* forwards: after the animation ends, the used transform stays
   whatever "to" says rather than reverting to the un-animated
   .qualify-modal rule — the two happen to compute to the same value,
   but pinning it to "forwards" means the dialog's resting position is
   never depending on that revert actually happening cleanly. */
.qualify-modal[open] { animation: qualify-in 0.3s var(--ease) forwards; }
@keyframes qualify-in {
  /* Composes with the static translate(-50%, -50%) above — a
     keyframe's transform replaces the base value outright rather than
     stacking with it, so the centering offset has to be repeated in
     both steps or the dialog would jump off-center once this runs. */
  from { opacity: 0; transform: translate(-50%, -50%) translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .qualify-modal[open] { animation: none; }
}

.qualify-modal-close-row { display: flex; justify-content: flex-end; margin: 0; padding: 0.6rem 0.6rem 0; }
.qualify-close {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.qualify-close svg { width: 1.1rem; height: 1.1rem; }
.qualify-close:hover, .qualify-close:focus-visible { background: var(--bg-alt); color: var(--navy); }

.qualify-step { padding: 0 clamp(1.5rem, 6vw, 2.5rem) clamp(1.75rem, 6vw, 2.5rem); text-align: center; }
.qualify-step h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-bottom: 0.75rem; }
.qualify-step > p { color: var(--text); margin-bottom: 1.5rem; }
.qualify-step .field { text-align: left; margin-bottom: 1.25rem; }
.qualify-step .btn { margin: 0 auto; }

.qualify-field-wrap { position: relative; }

.qualify-hint { font-size: 0.8rem; color: var(--text-faint); margin-top: 0.5rem; }
.qualify-hint label { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.qualify-hint input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--blue); flex-shrink: 0; }

.qualify-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 20;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.qualify-suggestions li {
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.qualify-suggestions li:last-child { border-bottom: none; }
.qualify-suggestions li:hover, .qualify-suggestions li.is-active { background: var(--bg-alt); }

.qualify-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0;
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.qualify-or::before, .qualify-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.qualify-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--blue-dim);
  color: var(--blue);
  margin-bottom: 1rem;
}
.qualify-badge svg { width: 1.5rem; height: 1.5rem; }

.qualify-retry {
  display: block;
  margin: 1rem auto 0;
  font-size: 0.85rem;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.qualify-retry:hover { color: var(--navy); }

/* ============================================================
   Pricing page — Own it / Go pro comparison
   ============================================================ */

.plan-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 860px) { .plan-compare { grid-template-columns: 1fr; } }

.plan-compare-card { padding: clamp(2.25rem, 4vw, 3rem); background: var(--surface); display: flex; flex-direction: column; }
.plan-compare-card.featured { background: var(--navy); color: var(--bg); }

.plan-compare-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
}

.plan-compare-price { display: flex; align-items: baseline; gap: 0.65rem; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 0.35rem; }
.plan-compare-price .price-was { order: 2; font-size: 0.45em; font-weight: 500; text-decoration: line-through; opacity: 0.5; }
.plan-compare-price .price-period { font-size: 1.1rem; font-weight: 500; opacity: 0.6; }

.plan-compare-note { display: block; font-size: 0.82rem; color: var(--text-faint); margin-bottom: 1.5rem; }
.plan-compare-card.featured .plan-compare-note { color: rgba(250, 248, 245, 0.55); }

.plan-compare-sub { color: var(--text); margin-bottom: 1.75rem; max-width: 26rem; }
.plan-compare-card.featured .plan-compare-sub { color: rgba(250, 248, 245, 0.72); }

.plan-compare-card .link-arrow { margin-top: auto; align-self: flex-start; }
.plan-compare-card.featured .link-arrow { color: var(--bg); border-color: rgba(250, 248, 245, 0.32); }
.plan-compare-card.featured .link-arrow:hover { color: var(--blue); border-color: var(--blue); }

.pricing-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 700px) { .pricing-extra { grid-template-columns: 1fr; } }

.pricing-extra-item { padding: clamp(1.75rem, 3vw, 2.25rem); border: 1px solid var(--border); background: var(--surface); }
.pricing-extra-item h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.pricing-extra-item p { color: var(--text); font-size: 0.96rem; margin-bottom: 1.1rem; }

.pricing-footnote { font-size: 0.92rem; color: var(--text-faint); }
.pricing-footnote a { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--border); transition: color 0.2s ease, border-color 0.2s ease; }
.pricing-footnote a:hover { color: var(--blue); border-color: var(--blue); }

/* ============================================================
   Pricing page — shared building blocks
   (jump nav, split layout, checklists, callouts, comparisons)
   ============================================================ */

.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border);
}
.jump-nav a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.jump-nav a:hover { border-color: var(--blue); color: var(--blue); }

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.split-grid.uneven { grid-template-columns: 1.3fr 1fr; align-items: start; }
@media (max-width: 780px) {
  .split-grid, .split-grid.uneven { grid-template-columns: 1fr; gap: 2rem; }
}
.split-col h3 { font-size: 1.3rem; margin-bottom: 0.9rem; }
.split-col p { color: var(--text); margin-bottom: 1rem; }
.split-col p:last-child { margin-bottom: 0; }

.price-intro-note { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--blue); margin-bottom: 0.75rem; }

.feature-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.feature-checklist.single { grid-template-columns: 1fr; max-width: 34rem; }
@media (max-width: 640px) { .feature-checklist { grid-template-columns: 1fr; } }
.feature-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--text);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.feature-checklist li svg { width: 1.1rem; height: 1.1rem; color: var(--blue); flex-shrink: 0; margin-top: 0.15rem; }
.feature-checklist.on-dark { border-top-color: rgba(250, 248, 245, 0.16); }
.feature-checklist.on-dark li { color: rgba(250, 248, 245, 0.82); border-bottom-color: rgba(250, 248, 245, 0.14); }

.ownership-callout {
  border-left: 3px solid var(--blue);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--bg-alt);
}
.ownership-callout h3 { font-size: 1.15rem; margin-bottom: 0.85rem; }
.ownership-callout p { color: var(--text); font-size: 0.96rem; margin-bottom: 0.9rem; }
.ownership-callout p:last-child { margin-bottom: 0; }
.ownership-callout a { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--border); }
.ownership-callout a:hover { color: var(--blue); border-color: var(--blue); }
.ownership-callout .text-faint-note { font-size: 0.85rem; opacity: 0.75; }

.ownership-callout.on-dark { background: rgba(250, 248, 245, 0.06); border-left-color: var(--blue); }
.ownership-callout.on-dark p { color: rgba(250, 248, 245, 0.75); }
.ownership-callout.on-dark a { color: var(--bg); }
.ownership-callout.on-dark a:hover { color: var(--blue); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.example-list { display: flex; flex-direction: column; gap: 0.65rem; }
.example-list li { position: relative; padding-left: 1.1rem; font-size: 0.93rem; color: var(--text); }
.example-list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.4rem; height: 0.4rem; background: var(--blue); }

/* ---- Quick fixes ---- */

.quickfix-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 14rem)) 1fr; gap: clamp(1.5rem, 3vw, 2rem); align-items: start; }
@media (max-width: 900px) { .quickfix-layout { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .quickfix-layout { grid-template-columns: 1fr; } }

.quickfix-price-card { padding: clamp(1.75rem, 3vw, 2rem); border: 1px solid var(--border); background: var(--surface); }
.quickfix-price-card.alt { background: var(--navy); color: var(--bg); }
.quickfix-price-card .plan-compare-price { font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 0.5rem; }
.quickfix-price-card p { font-size: 0.9rem; color: var(--text); }
.quickfix-price-card.alt p { color: rgba(250, 248, 245, 0.68); }

.quickfix-examples h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.quickfix-note { color: var(--text-faint); font-size: 0.88rem; margin-top: 1.25rem; max-width: 34rem; }

/* ---- Industry-specific features ---- */

.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 2.5rem); }
@media (max-width: 700px) { .industry-grid { grid-template-columns: 1fr; } }
.industry-card { padding-top: 1.5rem; border-top: 2px solid var(--navy); }
.industry-card h3 { font-size: 1.3rem; margin-bottom: 1.1rem; }

/* ---- Add-ons ---- */

.addon-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 2.5rem); }
@media (max-width: 900px) { .addon-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .addon-groups { grid-template-columns: 1fr; } }

.addon-group h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--navy);
}
.addon-list { display: flex; flex-direction: column; }
.addon-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.94rem; }
.addon-list li:last-child { border-bottom: none; }
.addon-price { color: var(--text-faint); font-size: 0.83rem; font-weight: 600; white-space: nowrap; }

/* ---- Revisions / bug fix vs change ---- */

.revision-note { max-width: 42rem; padding-left: 1.5rem; border-left: 3px solid var(--blue); margin-bottom: clamp(2.5rem, 5vw, 3rem); }
.revision-note h3 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.revision-note p { color: var(--text); }

.compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 700px) { .compare-cards { grid-template-columns: 1fr; } }
.compare-card { padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--surface); border: 1px solid var(--border); }
.compare-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--bg-alt); color: var(--text-faint); margin-bottom: 1.1rem; }
.compare-card-icon svg { width: 1.15rem; height: 1.15rem; }
.compare-card-icon.good { background: var(--blue-dim); color: var(--blue); }
.compare-card h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.compare-card > p { color: var(--text); font-size: 0.95rem; margin-bottom: 1.25rem; }

/* ============================================================
   Legal content (Terms of Service)
   ============================================================ */

.legal-meta { color: var(--text-faint); font-size: 0.92rem; }

.legal-content { border-top: 1px solid var(--border); }
.legal-section { padding: clamp(2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--border); max-width: 46rem; }
.legal-num { font-family: var(--font-display); color: var(--blue); font-weight: 700; margin-right: 0.6rem; }
.legal-section h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: 1.1rem; }
.legal-section h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; margin: 1.5rem 0 0.6rem; }
.legal-section p { color: var(--text); margin-bottom: 1rem; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { list-style: disc; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.25rem 0 1.25rem; padding-left: 1.15rem; }
.legal-section ul li { color: var(--text); }
.legal-section ul li::marker { color: var(--blue); }

/* Inline prose links have no distinguishing style site-wide (a { color:
   inherit; text-decoration: none; } from the reset) — fine where a link
   sits inside an otherwise-linked component, but legal content, form
   notes and the qualify dialog reference other pages constantly, so
   those need a visible cue. */
.legal-section p a, .legal-section li a, .form-note a, .qualify-step p a, .faq-answer a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-section p a:hover, .legal-section li a:hover, .form-note a:hover, .qualify-step p a:hover, .faq-answer a:hover { color: var(--blue-deep); }

.legal-disclaimer { max-width: 46rem; padding-top: clamp(2rem, 4vw, 2.5rem); color: var(--text-faint); font-size: 0.88rem; }

/* ============================================================
   About
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.about-body p { color: var(--text); margin-bottom: 1.25rem; max-width: 32rem; }
.about-body p:last-of-type { margin-bottom: 0; }

.about-portrait { border: 1px solid var(--border); overflow: hidden; aspect-ratio: 3 / 2; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   FAQ
   ============================================================ */

.faq-list { border-top: 1px solid var(--border); max-width: 48rem; }
.faq-item { border-bottom: 1px solid var(--border); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: transform 0.3s var(--ease), border-color 0.2s ease;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--navy);
  transition: background-color 0.2s ease;
}
.faq-icon::before { width: 0.65rem; height: 1.5px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1.5px; height: 0.65rem; transform: translate(-50%, -50%); }
.faq-item[open] .faq-icon { border-color: var(--blue); transform: rotate(45deg); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--blue); }

.faq-answer { padding: 0 0 1.75rem; max-width: 40rem; }
.faq-answer p { color: var(--text); }

/* ============================================================
   Final CTA — dramatic close
   ============================================================ */

.final-cta { background: var(--navy); color: var(--bg); padding: clamp(5rem, 12vw, 9rem) 0; }
.final-cta .container { text-align: center; }
.final-cta h2 {
  font-size: clamp(2.6rem, 8vw, 6rem);
  margin-bottom: 1rem;
  color: var(--bg);
}
.final-cta p {
  color: rgba(250, 248, 245, 0.7);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.final-cta-link {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease, gap 0.25s ease, transform 0.25s var(--ease);
}
.final-cta-link:hover { border-color: var(--blue); gap: 1.1rem; transform: translateY(-2px); }
.final-cta-link svg { width: 1.6em; height: 1.6em; }

/* ============================================================
   Contact
   ============================================================ */

.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-form { display: flex; flex-direction: column; gap: 1.15rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }

.field input, .field select, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.85rem 1rem;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.98rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field input:disabled { background: var(--bg-alt); color: var(--text-faint); cursor: not-allowed; }
.field textarea { resize: vertical; min-height: 8rem; }

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

.form-note { font-size: 0.88rem; color: var(--text-faint); }

.form-error {
  color: #B3261E;
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.28);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
}

.form-success { border: 1px solid rgba(26, 101, 158, 0.3); background: rgba(26, 101, 158, 0.06); padding: 2rem; }
.form-success h3 { color: var(--blue); font-size: 1.15rem; margin-bottom: 0.5rem; }
.form-success p { color: var(--text); }

.contact-details { display: flex; flex-direction: column; }

.detail-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  transition: gap 0.2s ease, color 0.2s ease;
}
.detail-card:hover { gap: 1.3rem; color: var(--blue); }

.detail-card .icon-wrap {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}
.detail-card .icon-wrap svg { width: 1.2rem; height: 1.2rem; }

.detail-card .detail-label { font-size: 0.75rem; color: var(--text-faint); }
.detail-card .detail-value { font-size: 1.05rem; font-weight: 600; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer { border-top: 1px solid var(--border); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-brand p { color: var(--text); max-width: 20rem; font-size: 0.95rem; }

.footer-links { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.footer-col h4 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 1rem;
}
.footer-col a, .footer-col span { display: block; color: var(--text); font-size: 0.95rem; margin-bottom: 0.65rem; }
.footer-col a:hover { color: var(--navy); }

.footer-col a.footer-social-link { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-social-link svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* ============================================================
   Utility
   ============================================================ */

.text-center { text-align: center; }
.self-start { align-self: flex-start; }
.price-block { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.static-card { cursor: default; }
.work-cta-note { display: block; text-align: center; margin: 0 auto 1.5rem; }
.btn-row-spaced { margin-top: 2.5rem; }
.mt-0 { margin-top: 0 !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}