/* ==========================================================================
   RCW108 — design system
   Colors, type and spacing below mirror the approved design handoff.
   Edit the variables in :root to restyle the whole site from one place.
   ========================================================================== */

:root {
  /* colors */
  --paper: #F4F4F1;
  --paper-alt: #EDEDE8;
  --white: #FFFFFF;
  --ink: #15140F;
  --ink-raised: #1D1B14;
  --ink-line: #2C2A22;
  --body-text: #45433A;
  --muted: #6E6B60;
  --muted-dark: #A8A49A;
  --body-on-dark: #C9C5BA;
  --line: #DCDAD0;
  --line-strong: #C9C6BB;
  --accent: #FF4B32;
  --accent-text: #FFE6E0;

  /* type */
  --font: "Montserrat", system-ui, sans-serif;

  /* layout */
  --container-max: 1280px;
  --container-pad: 28px;
  --section-pad: 88px;
  --section-pad-segment: 80px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { letter-spacing: -0.035em; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font: inherit; color: inherit; }
/* Every button on this site sets its own background/border/padding
   explicitly (.btn, .chip, .faq-item__q, .modal-close, .nav-toggle...),
   so this reset is purely a safety net — without it, a bare <button>
   used for something small (like a project card's "Details" link) picks
   up the browser's native button chrome (a boxy border + background)
   instead of matching the site's surrounding text/link styling. */
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
}

/* Replace each browser's native focus ring (often blue) with the site
   accent. Form inputs override this further down with their own inset ring. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes rcwmarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  /* Longhand on purpose — see the .section comment below. .container
     must never touch padding-top/padding-bottom, only left/right, or it
     silently overwrites whichever section-level class supplies the
     vertical padding on the same element. */
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Longhand top/bottom only, deliberately: these classes are always
   combined on the same element as .container (e.g. class="container
   section"), which is equal specificity. A shorthand `padding` here
   would fully win-or-lose against .container's own padding (including
   its responsive overrides) purely by source order, silently zeroing
   out either the side padding (desktop) or the top/bottom padding
   (mobile) depending on which rule happens to come later. Side padding
   stays exclusively .container's job at every breakpoint. */
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.section--segment { padding-top: var(--section-pad-segment); padding-bottom: var(--section-pad-segment); }
.section--tight { padding-top: 72px; padding-bottom: 72px; }

.section--dark { background: var(--ink); color: var(--paper); }
.section--alt { background: var(--paper-alt); }
.section--accent { background: var(--accent); color: var(--white); }
.bordered-top { border-top: 1px solid var(--line); }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.intro--end { align-items: end; }

.eyebrow {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.eyebrow--dark { color: var(--muted-dark); }

.lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--body-text);
  max-width: 56ch;
}

.h2 {
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.02;
  font-weight: 600;
}
.h2--segment { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-block;
  padding: 16px 26px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* Hover: a light diagonal shine sweeps across the button once. Pure CSS,
   the button itself never moves, resizes or rescales — nothing to race
   against the color transition above or against a click's own state, so
   there's no risk of the jittery fighting-tweens look a transform-based
   hover (lift/scale) had here before. */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .btn::after { transition: none; display: none; }
}
.btn--sm { padding: 13px 20px; font-size: 14.5px; }
.btn--xs {
  padding: 13px 20px;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
}

.btn--accent { background: var(--accent); color: var(--white); }
.btn--accent:hover { background: var(--ink); color: var(--white); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--accent); color: var(--white); }

.btn--outline-ink { border-color: var(--ink); color: var(--ink); }
.btn--outline-ink:hover { background: var(--ink); color: var(--paper); }

.btn--outline-light { border-color: var(--paper); color: var(--paper); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); }

.btn--outline-white { border-color: var(--white); color: var(--white); }
.btn--outline-white:hover { background: var(--white); color: var(--ink); }

.btn--block { width: 100%; }
.btn--disabled { opacity: 0.55; pointer-events: none; }

.text-link {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  transition: color 0.18s ease;
}
.text-link:hover { color: var(--accent); }
.text-link--light { color: var(--paper); }
.text-link--light:hover { color: var(--accent); }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 244, 241, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 28px;
  /* Longhand — combined with .container in the markup (segment pages).
     Side padding is .container's job; this only sets top/bottom. */
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ink);
}
.site-header__brand img { width: 100%; max-width: 168px; height: auto; }
.site-header__kicker {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--accent); }

.site-header__cta { flex: none; padding: 11px 18px; font-size: 13.5px; }

.nav-toggle {
  display: none;
  flex: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  padding: 9px 11px;
  gap: 4px;
  flex-direction: column;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); }

/* Homepage header: two rows (row 1 = brand/phone/CTA, row 2 = nav below a
   hairline). Segment pages keep the original single-row .site-header__bar
   above — renderHeaderHTML() in render.js only outputs this row-1/row-2
   markup when the page's content has a header.phone entry. */
.site-header__row1 {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px var(--container-pad);
}
.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header__phone {
  display: grid;
  gap: 1px;
  color: var(--ink);
  text-align: right;
}
.site-header__phone:hover { color: var(--accent); }
.site-header__phone-label {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-header__phone-number { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.site-header__row2 { border-top: 1px solid var(--line); }
.site-header__row2-inner { padding: 11px var(--container-pad); }
.site-header__row2 .site-nav { margin-left: 0; font-size: 13.5px; font-weight: 600; gap: 24px; }

/* ==========================================================================
   Hero — fills the first screen exactly: header + hero share 100vh, the
   marquee sits flush against the bottom edge. .hero-screen wraps the
   header, hero and marquee in index.html; header keeps its natural
   height and .hero (flex: 1) takes whatever is left, so the two always
   add up to viewport height regardless of header height. On short
   viewports where content genuinely doesn't fit, min-height lets the
   wrapper grow past 100vh rather than clipping anything.
   ========================================================================== */

.hero-screen { display: flex; flex-direction: column; min-height: 100vh; }
.hero-screen .marquee { flex: none; }

.hero {
  flex: 1 0 auto;
  /* .container's `margin: 0 auto` centers via auto margins, which as a
     flex item would otherwise shrink .hero to its content width instead
     of stretching to max-width — width: 100% (capped by max-width, same
     as always) keeps it a definite size so auto-centering still works. */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  /* Longhand on purpose: .hero and .container share equal specificity
     (one class each), so a shorthand `padding` here would fully clobber
     — or be clobbered by — .container's own padding rules (including its
     640px override) depending purely on source order. Left/right padding
     stays exclusively .container's job at every breakpoint; this only
     ever touches top/bottom. */
  padding-top: 28px;
  padding-bottom: 24px;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 24px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(40px, 6.6vw, 88px);
  line-height: 1;
  max-width: 16ch;
}
.hero__lead { max-width: 56ch; color: var(--body-text); font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__reassurance {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.hero__video {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1000px;
  min-width: 0;
}
.hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(21, 20, 15, 0.28) 0%, rgba(21, 20, 15, 0.04) 50%, rgba(21, 20, 15, 0.55) 100%);
}
.hero__video-labels {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px;
  gap: 16px;
}
.hero__video-label {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}
/* No source video yet, or the visitor prefers reduced motion: the dark
   panel + overlay + labels above double as the intended fallback state
   (see README.md in the design handoff — this is deliberate, not a bug). */
@media (prefers-reduced-motion: reduce) {
  .hero__video video { display: none; }
}

.hero__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px 32px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  flex: none;
}
.hero__strip-item { display: grid; gap: 6px; align-content: start; }
.hero__strip-label {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__strip-title { font-size: 16px; font-weight: 600; }
.hero__strip-desc { font-size: 13.5px; line-height: 1.5; color: var(--body-text); }
.hero__strip-value { font-family: var(--font); font-size: 28px; font-weight: 600; line-height: 1; }
.hero__strip-phone { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; justify-self: start; }
.hero__strip-phone:hover { color: var(--accent); }

/* .hero-card__label is also reused by the "Not a fit if" card in the Why
   us section — keep even though the hero card itself is gone. */
.hero-card__label {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-number { font-family: var(--font); font-weight: 600; font-size: 26px; }
.stat-label {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Marquee
   ========================================================================== */

.marquee {
  border-block: 1px solid var(--line);
  background: var(--paper-alt);
  overflow: hidden;
  padding: 14px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: rcwmarquee 38s linear infinite;
  font-family: var(--font);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.marquee__track span { padding-right: 40px; }

/* ==========================================================================
   Hairline card grids
   ========================================================================== */

.hairline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 48px;
}
.hairline-grid--3col { grid-template-columns: repeat(auto-fit, minmax(max(280px, 30%), 1fr)); }
.hairline-grid--included { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.hairline-grid--dark { background: var(--ink-line); border-color: var(--ink-line); }
.hairline-grid--alt { background: var(--line-strong); border-color: var(--line-strong); }

.hairline-card {
  background: var(--paper);
  padding: 30px 26px 34px;
  display: grid;
  gap: 12px;
}
.hairline-card:hover { background: var(--white); }
.hairline-card--dark { background: var(--ink); }
.hairline-card--dark:hover { background: var(--ink-raised); }
.hairline-card--white { background: var(--white); }
.hairline-card--alt { background: var(--paper-alt); padding: 28px 24px 32px; }

.hairline-card__index { font-family: var(--font); font-size: 11px; color: var(--accent); font-weight: 600; }
.hairline-card__row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font); font-size: 11px; color: var(--muted-dark); }
.hairline-card__row span:last-child.tag { color: var(--accent); }
.hairline-card h3 { font-size: 20px; font-weight: 600; line-height: 1.2; }
.hairline-card p { font-size: 14.5px; line-height: 1.55; color: var(--body-text); }
.hairline-card--dark p { color: var(--body-on-dark); }
.hairline-card--dark h3 { color: var(--paper); }

/* ==========================================================================
   Sections: problem / services / elementor / process / why-us
   ========================================================================== */

.services-grid .hairline-card h3 { font-size: 22px; }
.services-grid .hairline-card__row span:last-child { color: var(--accent); }

.section-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.callout-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 26px 28px;
  margin-top: 20px;
}
.callout-bar p { font-size: 15.5px; line-height: 1.5; color: var(--body-text); max-width: 62ch; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 52px;
}
.process-step {
  border-top: 2px solid var(--ink);
  padding-top: 24px;
  display: grid;
  gap: 12px;
}
.process-step__stage {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.process-step h3 { font-size: 24px; font-weight: 600; }
.process-step p { font-size: 15px; line-height: 1.6; color: var(--body-text); }
.process-step__meta { font-family: var(--font); font-size: 11px; color: var(--ink); }

.why-us-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}
.why-us-copy { display: grid; gap: 24px; align-content: start; }
.disqualify-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 24px;
  display: grid;
  gap: 14px;
}
.disqualify-card ul {
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body-text);
}
.why-us-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.why-us-row { background: var(--paper); padding: 26px; display: grid; gap: 8px; }
.why-us-row h3 { font-size: 19px; font-weight: 600; }
.why-us-row p { font-size: 14.5px; line-height: 1.55; color: var(--body-text); }

/* ==========================================================================
   Work / portfolio
   ========================================================================== */

.featured-case {
  margin-top: 48px;
  border: 1px solid var(--line);
  background: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.featured-case__media {
  min-height: 420px;
  border-right: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  background-color: var(--paper-alt);
}
.featured-case__body { padding: 40px 36px; display: grid; align-content: start; gap: 18px; }
.tag-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag {
  background: var(--accent);
  color: var(--white);
  padding: 4px 8px;
}
.featured-case__body h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.05; }
.featured-case__body p { font-size: 15.5px; line-height: 1.6; color: var(--body-text); }
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  margin-top: 4px;
}
.stat-row .stat-number { font-size: 24px; }
.stat-row .stat-label { font-size: 10px; letter-spacing: 0.1em; }
.featured-case__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.project-grid {
  display: grid;
  /* 320px min keeps this at 3 columns max on desktop (container is 1224px
     of usable width, so a 4th column would only fit below 320px each) —
     a 4th+ card wraps to its own row instead of squeezing the row to 4. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
/* The "load more" grid reuses this class and starts with the `hidden`
   attribute — but author styles always beat the browser's own
   `[hidden] { display: none }` default, so without this rule
   `display: grid` above wins and the "hidden" grid still takes up real
   layout space (a blank gap before the button, and its cards fading in
   inside dead space when GSAP touches their opacity on scroll). */
.project-grid[hidden] { display: none; }
.project-card { border: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; height: 100%; }
.project-card__footer {
  margin-top: auto;
  padding: 14px 22px;
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
}
.project-card__media {
  height: 200px;
  border-bottom: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  background-color: var(--paper-alt);
}
.project-card__body { padding: 22px; display: grid; gap: 8px; }
.project-card__tag {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-card h3 { font-size: 19px; font-weight: 600; }
.project-card p { font-size: 14px; line-height: 1.55; color: var(--body-text); }

.load-more-wrap { display: flex; justify-content: center; margin-top: 36px; }
.load-more-wrap[hidden] { display: none; }

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.testimonial-card {
  border: 1px solid var(--ink-line);
  padding: 30px;
  display: grid;
  gap: 20px;
  align-content: start;
}
.testimonial-card__mark { font-family: var(--font); font-size: 40px; line-height: 0.6; color: var(--accent); }
.testimonial-card p { font-size: 16.5px; line-height: 1.6; color: #E8E5DC; }
.testimonial-card__by { border-top: 1px solid var(--ink-line); padding-top: 16px; font-size: 14px; color: var(--muted-dark); }

.proof-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.proof-chips span { border: 1px solid var(--ink-line); padding: 10px 14px; }

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.price-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 30px;
  display: grid;
  gap: 20px;
  align-content: start;
}
.price-card--featured {
  border-color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.price-card__head { display: grid; gap: 4px; }
.price-card__head-row { display: flex; justify-content: space-between; align-items: center; }
.price-card__name { font-family: var(--font); font-weight: 600; font-size: 20px; }
.price-card__chip {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--white);
  padding: 4px 8px;
}
.price-card__sub {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-card__price { display: flex; align-items: baseline; gap: 6px; }
.price-card__amount { font-family: var(--font); font-weight: 600; font-size: 40px; }
.price-card__term { font-size: 14px; color: var(--muted); }
.price-card ul {
  padding-left: 18px;
  display: grid;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body-text);
}

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

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 22px 0;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: var(--font);
  font-weight: 600;
  font-size: 17.5px;
  color: var(--ink);
  transition: color 0.18s ease;
}
.faq-item__q:hover { color: var(--accent); }
.faq-item__sign { flex: none; font-family: var(--font); font-size: 18px; color: var(--accent); }
.faq-item__a { display: none; padding: 0 0 26px; }
.faq-item__a p { font-size: 15.5px; line-height: 1.65; color: var(--body-text); max-width: 66ch; }
.faq-item.is-open .faq-item__a { display: block; }

/* segment page FAQ variant (smaller heading col) */
.faq-grid--segment { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.faq-grid--segment .faq-list { border-top: 1px solid var(--line); }
.faq-grid--segment .faq-item { border-bottom: 1px solid var(--line); }
.faq-grid--segment .faq-item__q { padding: 20px 0; font-size: 17px; }
.faq-grid--segment .faq-item__a { padding: 0 0 24px; }

/* ==========================================================================
   Apply / application form
   ========================================================================== */

.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-top: 96px;
  padding-bottom: 96px;
}
.apply-copy { display: grid; gap: 24px; align-content: start; }
.apply-copy h2 { font-size: clamp(34px, 4.8vw, 60px); line-height: 1; color: var(--paper); }
.apply-copy > p { font-size: 17.5px; line-height: 1.6; color: var(--body-on-dark); max-width: 50ch; }

.spec-block { display: grid; gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); max-width: 520px; }
.spec-row { background: var(--ink-raised); padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.spec-row span:first-child { color: var(--body-on-dark); }
.spec-row span:last-child { font-family: var(--font); color: var(--paper); }
.apply-email { font-size: 15px; color: var(--body-on-dark); }
.apply-email a { color: var(--paper); border-bottom: 1px solid var(--accent); }
.apply-email a:hover { color: var(--accent); }

.apply-panel { background: var(--paper); color: var(--ink); padding: 34px; }
.apply-panel__intro { display: grid; gap: 6px; margin-bottom: 18px; }
.apply-panel__intro h3 { font-family: var(--font); font-size: 22px; font-weight: 600; }
.apply-panel__intro p { font-size: 14px; color: var(--muted); }

.apply-panel form { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; font-family: var(--font); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 12px;
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field textarea { resize: vertical; }
.field-error { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 12.5px; display: none; }
.field.has-error input, .field.has-error textarea { outline: 2px solid var(--accent); outline-offset: -1px; }
.field.has-error .field-error { display: block; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.chip.is-selected { border-color: var(--accent); background: var(--accent); color: var(--white); }

/* Spam honeypot: invisible to real visitors, bots that auto-fill every
   field tend to fill this too — see js/main.js and send-application.php. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apply-panel form > button[type="submit"] { width: 100%; border: 0; padding: 16px; font-size: 15.5px; }
.apply-disclaimer { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.apply-confirm { display: grid; gap: 14px; padding: 40px 0; }
.apply-confirm__eyebrow { font-family: var(--font); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.apply-confirm h3 { font-size: 28px; font-weight: 600; line-height: 1.1; }
.apply-confirm p { font-size: 15.5px; line-height: 1.6; color: var(--body-text); }
.apply-panel[hidden], .apply-confirm[hidden] { display: none; }

/* ==========================================================================
   Case-study modal
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(21, 20, 15, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  padding: 24px;
  /* Not scrollable itself — see .modal-panel. If this element scrolled,
     the 24px padding above would only be the panel's *resting* position,
     not a protected gap: once scrolled, content slides straight through
     that space (padding doesn't clip a scroll container's own content),
     surfacing a random sliver of text above the sticky header instead of
     the backdrop staying there. */
}
.modal-overlay[hidden] { display: none; }
[data-case-live-link][hidden] { display: none; }
[data-case-specs][hidden] { display: none; }
.modal-panel {
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  max-width: 1100px;
  max-height: 100%;
  border: 1px solid var(--line);
  margin: auto;
  /* The panel itself scrolls, and clips at its own edge — so the 24px
     gap from the overlay's padding, and the sticky header's position
     within the panel, both stay exactly where they visually appear
     regardless of how far the body is scrolled. */
  overflow-y: auto;
}
.modal-panel__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.modal-close {
  background: none;
  border: 1px solid var(--line);
  padding: 9px 14px;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.modal-close:hover { background: var(--ink); color: var(--paper); }
.modal-panel__body { padding: 36px 28px 44px; display: grid; gap: 40px; }
.modal-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: start; }
.modal-intro__copy { display: grid; gap: 18px; align-content: start; }
.modal-intro__copy h3 { font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.02; }
.modal-intro__copy p { font-size: 16px; line-height: 1.65; color: var(--body-text); }
.spec-table { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.spec-table-row { background: var(--white); padding: 18px 20px; display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; }
.spec-table-row span:first-child { color: var(--muted); }
.spec-table-row span:last-child { font-weight: 600; }

.gallery-label { font-family: var(--font); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gallery-main {
  height: clamp(260px, 42vw, 520px);
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  background-color: var(--paper-alt);
}
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gallery-thumb {
  height: 220px;
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  background-color: var(--paper-alt);
}
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); padding-top: 28px; }

/* ==========================================================================
   Segment pages: at-a-glance card, problem cards, FAQ, CTA band
   ========================================================================== */

.glance-card { border: 1px solid var(--line); background: var(--white); padding: 26px; display: grid; gap: 1px; }
.glance-card__label { font-family: var(--font); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-bottom: 16px; }
.glance-row { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; border-top: 1px solid var(--line); padding: 16px 0; }
.glance-row span:first-child { color: var(--muted); }
.glance-row span:last-child { font-weight: 600; }

.field-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
}
.field-columns h3 { font-size: 22px; font-weight: 600; color: var(--paper); }
.field-columns p { font-size: 15px; line-height: 1.6; color: var(--body-on-dark); }

.cta-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px; align-items: center; }
.cta-band h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.04; color: var(--white); }
.cta-band p { font-size: 16.5px; line-height: 1.6; color: var(--accent-text); max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

.reference-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: start; }
.reference-copy { display: grid; gap: 16px; }
.reference-copy h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.04; color: var(--paper); }
.reference-copy p { font-size: 16px; line-height: 1.65; color: var(--body-on-dark); }

.segment-footer .container {
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.segment-footer a { color: var(--body-on-dark); }
.segment-footer a:hover { color: var(--accent); }
.segment-footer__links { display: flex; gap: 20px; }

/* ==========================================================================
   Footer (homepage)
   ========================================================================== */

.site-footer { background: var(--ink); color: var(--muted-dark); border-top: 1px solid var(--ink-line); }
.site-footer__grid {
  /* Longhand — combined with .container in the markup, same reasoning as
     .section above. */
  padding-top: 56px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}
.site-footer__brand { display: grid; gap: 10px; align-content: start; }
.site-footer__brand img { width: 100%; max-width: 200px; }
.site-footer__brand p { font-size: 14px; line-height: 1.55; max-width: 34ch; }
.site-footer__col { display: grid; gap: 10px; align-content: start; font-size: 14px; }
.site-footer__col-label { font-family: var(--font); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.site-footer__col a { color: var(--body-on-dark); }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__col span { color: var(--body-on-dark); }
.site-footer__col span.muted { color: var(--muted); }
.site-footer__bottom { border-top: 1px solid var(--ink-line); }
.site-footer__bottom .container {
  padding: 20px var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .intro,
  .why-us-grid,
  .faq-grid,
  .apply-grid,
  .featured-case,
  .modal-intro,
  .reference-grid,
  .field-columns {
    grid-template-columns: 1fr;
  }
  .featured-case__media { min-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
  .cta-band__actions { justify-content: flex-start; }
  .apply-grid { padding-top: 64px; padding-bottom: 64px; }
}

@media (max-width: 760px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header.is-open .site-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--container-pad) 16px;
    margin-left: 0;
  }
  .site-header.is-open .site-nav a { padding: 10px 0; }
  .site-header__bar, .site-header__row1 { position: relative; flex-wrap: wrap; }
  .site-header__cta { order: 3; margin-left: auto; }

  /* Two-row (homepage) header only: row 2 collapses as a whole, not just
     the nav inside it, so its hairline border doesn't show while closed —
     and once open, the nav sits statically inside row 2 instead of the
     absolutely-positioned dropdown the single-row header above uses. */
  .site-header__row2 { display: none; }
  .site-header.is-open .site-header__row2 { display: block; }
  .site-header.is-open .site-header__row2 .site-nav {
    display: flex;
    position: static;
    background: none;
    border-bottom: 0;
    padding: 8px var(--container-pad) 16px;
  }

  /* Row 1 becomes two lines: brand + burger on line 1 (burger's own
     margin-left: auto, set unconditionally on .nav-toggle, pushes it to
     the right edge); phone + CTA on line 2, forced there by
     flex-basis: 100% since there's no room left on line 1 once the
     burger claims it. Inside that line, .site-header__cta's existing
     mobile margin-left: auto (above) spaces it from the phone number. */
  .site-header__actions {
    flex-basis: 100%;
    margin-left: 0;
  }
  .site-header__phone { text-align: left; }
}

@media (max-width: 640px) {
  :root { --section-pad: 64px; --section-pad-segment: 56px; }
  .container { padding-left: 20px; padding-right: 20px; }
  .price-card--featured { box-shadow: 6px 6px 0 var(--ink); }
}