/* ==========================================================================
   Johnson Construction Management
   Brand: navy #081D35 · orange #FC8900 · white · black
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted — no third-party request) ----------
   Montserrat variable, 400–700 in a single file per subset.
   latin-ext only downloads when a page actually uses those glyphs. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root {
  --navy:        #081d35;
  --navy-800:    #0c2947;
  --navy-700:    #12365b;
  --navy-line:   rgba(255, 255, 255, .14);

  --orange:      #fc8900;
  --orange-600:  #e07a00;
  --orange-soft: rgba(252, 137, 0, .12);

  --white:       #ffffff;
  --black:       #000000;
  --sand:        #f5f6f8;
  --sand-200:    #e8eaee;
  --ink:         #1a1a1a;
  --ink-soft:    #55606d;

  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 10vw, 140px);

  --ease: cubic-bezier(.25, .8, .25, 1);
  --header-h: 84px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

::selection {
  background: var(--orange);
  color: var(--navy);
}

/* ---------- 3. Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section--sand { background: var(--sand); }
.section--navy { background: var(--navy); color: var(--white); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--orange);
  color: var(--navy);
  padding: 12px 20px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.h-display { font-size: clamp(2.4rem, 6.2vw, 4.75rem); }
.h-1       { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.h-2       { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
.h-3       { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.01em; }

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.75;
  color: var(--ink-soft);
}
.section--navy .lead { color: rgba(255, 255, 255, .74); }

.prose p + p { margin-top: 1.35em; }
.prose { color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }

.accent { color: var(--orange); }

/* Eyebrow label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--orange);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head .lead { margin-top: 20px; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--navy);
  --btn-bd: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  transform: translateY(-2px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, .45);
}
.btn--ghost:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn--dark {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-bd: var(--navy);
}
.btn--dark:hover {
  background: var(--orange);
  color: var(--navy);
  border-color: var(--orange);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  --btn-bd: rgba(8, 29, 53, .25);
}
.btn--outline:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.btn svg { width: 16px; height: 16px; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 12px 0 8px;   /* 44px+ tap target */
  border-bottom: 2px solid var(--orange);
  transition: gap .28s var(--ease), color .28s var(--ease);
}
.link-arrow:hover { gap: 16px; color: var(--orange); }
.section--navy .link-arrow { color: var(--white); }
.section--navy .link-arrow:hover { color: var(--orange); }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 29, 53, .65), transparent);
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.site-header.is-solid,
.site-header.is-open {
  background: var(--navy);
  box-shadow: 0 1px 0 var(--navy-line), 0 18px 40px -30px rgba(0, 0, 0, .9);
}
.site-header.is-solid::before,
.site-header.is-open::before { opacity: 0; }

/* Pages without a dark hero start solid */
.site-header--static { position: sticky; background: var(--navy); }
.site-header--static::before { opacity: 0; }

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: var(--header-h);
}

/* padding-block keeps the tap target at 44px+ without changing the logo size */
.brand { display: flex; align-items: center; flex: none; padding-block: 8px; }
.brand img { width: auto; height: 30px; }
.brand span.sr-only { position: absolute; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 38px); }
.nav a {
  position: relative;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  padding-block: 6px;
  transition: color .25s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width .3s var(--ease);
}
.nav a:hover { color: var(--orange); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--orange); }

/* The nav CTA is a mobile-drawer affordance only — the desktop CTA lives in .header-cta */
.nav > .btn { display: none; }
/* .nav a sets colour with higher specificity than .btn, so restore the button's own tokens */
.nav > a.btn { color: var(--btn-fg); }
.nav > a.btn:hover { color: var(--white); }

.header-cta { display: flex; align-items: center; gap: 18px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--white);
  transition: color .25s var(--ease);
}
.header-phone svg { width: 15px; height: 15px; color: var(--orange); }
.header-phone:hover { color: var(--orange); }
.header-cta .btn { padding: 13px 24px; }

/* Burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  flex: none;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  position: relative;
  transition: background .2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.site-header.is-open .burger span { background: transparent; }
.site-header.is-open .burger span::before { top: 0; transform: rotate(45deg); }
.site-header.is-open .burger span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: grid; }
  .header-cta { display: none; }
  .nav {
    /* Containing block is .header-inner's padding box, so 0/0 spans the full width */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-top: 1px solid var(--navy-line);
    padding: 8px var(--gutter) 28px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .4s var(--ease), visibility .4s;
  }
  .site-header.is-open .nav {
    max-height: 70vh;
    visibility: visible;
    overflow-y: auto;
  }
  .nav a {
    padding: 16px 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--navy-line);
  }
  .nav a::after { display: none; }
  .nav > .btn {
    display: flex;
    margin-top: 22px;
    width: 100%;
  }
}

/* ---------- 7. Placeholder media ---------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(252, 137, 0, .07) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(150deg, var(--navy-800), var(--navy) 70%);
  border: 1px solid rgba(252, 137, 0, .28);
  overflow: hidden;
  isolation: isolate;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(255, 255, 255, .14);
  pointer-events: none;
}
.ph__label {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, .82);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.6;
}
.ph__label svg {
  width: 30px;
  height: 30px;
  color: var(--orange);
  opacity: .9;
}
.ph__label em {
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .2em;
  color: var(--orange);
}
.ph--light {
  background:
    repeating-linear-gradient(-45deg, rgba(8, 29, 53, .05) 0 2px, transparent 2px 14px),
    var(--sand-200);
  border-color: rgba(8, 29, 53, .16);
}
.ph--light .ph__label { color: rgba(8, 29, 53, .6); }
.ph--light::after { border-color: rgba(8, 29, 53, .12); }

/* Real photo in the same ratio box. Keeps every --ratio rule below untouched:
   the .ph div stays as the sizing box, the image just fills it. */
.ph--filled {
  background: var(--navy-800);
  border-color: transparent;
}
.ph--filled::after { content: none; }
.ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  min-height: min(96vh, 900px);
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(56px, 8vw, 104px);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, rgba(252, 137, 0, .05) 0 2px, transparent 2px 16px),
    radial-gradient(120% 90% at 78% 12%, var(--navy-700) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy) 60%);
}
/* Photo sits above the gradient (which stays as the fallback while it loads)
   and below ::after, so the dark overlay keeps the headline readable. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
/* Two layers: the horizontal one darkens the left column where the headline sits
   (it lands on pale brick), the vertical one anchors the text block at the bottom
   and keeps the header legible at the top. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 29, 53, .86) 0%, rgba(8, 29, 53, .44) 50%, rgba(8, 29, 53, .1) 80%),
    linear-gradient(to top, rgba(8, 29, 53, .92) 0%, rgba(8, 29, 53, .58) 45%, rgba(8, 29, 53, .36) 100%);
}
/* Narrow screens: the text runs edge to edge, so the left-column gradient stops
   making sense — flatten it and let the vertical one carry the contrast. */
@media (max-width: 900px) {
  .hero__bg::after {
    background:
      linear-gradient(to right, rgba(8, 29, 53, .62) 0%, rgba(8, 29, 53, .62) 100%),
      linear-gradient(to top, rgba(8, 29, 53, .94) 0%, rgba(8, 29, 53, .64) 55%, rgba(8, 29, 53, .44) 100%);
  }
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__kicker {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 26px;
}
.hero h1 { max-width: 17ch; margin-bottom: 34px; }
.hero .btn-row { margin-top: 8px; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: 32px;
  border-top: 1px solid var(--navy-line);
}
.hero__meta div { max-width: 210px; }
.hero__meta dt {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -.02em;
}
.hero__meta dd {
  margin-top: 10px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(96px, 12vw, 150px) clamp(64px, 8vw, 104px);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, rgba(252, 137, 0, .05) 0 2px, transparent 2px 16px),
    radial-gradient(100% 120% at 85% 0%, var(--navy-700) 0%, transparent 60%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 820px; }
.page-hero .lead { margin-top: 24px; max-width: 62ch; color: rgba(255, 255, 255, .78); }

.breadcrumb {
  display: flex;
  gap: 10px;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 26px;
}
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb span { color: var(--orange); }

/* ---------- 9. Split (text + media) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.split--media-first .split__media { order: -1; }
.split__media { position: relative; }
.split__media .ph { --ratio: 4 / 5; }

.split__media-badge {
  position: absolute;
  right: -14px;
  bottom: -14px;
  background: var(--orange);
  color: var(--navy);
  padding: 22px 26px;
  max-width: 210px;
}
.split__media-badge strong {
  display: block;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -.02em;
}
.split__media-badge span {
  display: block;
  margin-top: 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.split__body .btn-row,
.split__body .link-arrow { margin-top: 34px; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
  .split__media .ph { --ratio: 4 / 3; }
}

/* ---------- 10. Services ---------- */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sand-200);
  border: 1px solid var(--sand-200);
}
.service {
  position: relative;
  background: var(--white);
  padding: clamp(32px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.service::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.service:hover::before { transform: scaleX(1); }
.service:hover { background: var(--sand); }

.service__num {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--orange);
}
.service__title {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.25;
}
.service p { color: var(--ink-soft); font-size: .97rem; }

@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }

/* ---------- 11. Project grid ---------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.projects-grid .project:first-child { grid-column: span 2; grid-row: span 2; }
.projects-grid .project:first-child .ph { --ratio: 3 / 2.42; }
/* 5-item layout: item 4 widens so the last row fills the full 3 columns */
.projects-grid .project:nth-child(4):not(:last-child) { grid-column: span 2; }
.projects-grid .project:nth-child(4):not(:last-child) .ph { --ratio: 2 / .78; }

.project { position: relative; overflow: hidden; }
.project .ph { --ratio: 4 / 3; transition: transform .6s var(--ease); }
.project:hover .ph { transform: scale(1.03); }
.project__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 22px 24px;
  background: linear-gradient(to top, rgba(8, 29, 53, .95), transparent);
  color: var(--white);
  pointer-events: none;
}
.project__caption strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.project__caption span {
  display: block;
  margin-top: 5px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}

@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid .project:first-child { grid-column: span 2; grid-row: auto; }
  .projects-grid .project:first-child .ph { --ratio: 16 / 9; }
  /* two columns pair up evenly, so item 4 goes back to a single track */
  .projects-grid .project:nth-child(4):not(:last-child) { grid-column: auto; }
  .projects-grid .project:nth-child(4):not(:last-child) .ph { --ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .projects-grid { grid-template-columns: 1fr; }
  .projects-grid .project:first-child,
  .projects-grid .project:nth-child(4):not(:last-child) { grid-column: auto; }
  .projects-grid .project:first-child .ph { --ratio: 4 / 3; }
}

/* Projects page — alternating rows */
.project-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding-block: clamp(38px, 5vw, 62px);
  border-bottom: 1px solid var(--sand-200);
}
.project-row:last-of-type { border-bottom: 0; }
.project-row:nth-child(even) .project-row__media { order: 2; }
.project-row__media .ph { --ratio: 16 / 11; }
.project-row__index {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--orange);
  margin-bottom: 16px;
}
.project-row h3 { color: var(--navy); margin-bottom: 16px; }
.project-row p { color: var(--ink-soft); }
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.tag {
  display: inline-block;
  padding: 7px 14px;
  background: var(--orange-soft);
  color: var(--navy);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .project-row { grid-template-columns: 1fr; }
  .project-row:nth-child(even) .project-row__media { order: -1; }
}

/* ---------- 12. Reviews ---------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.review {
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-top: 3px solid var(--orange);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section--navy .review {
  background: var(--navy-800);
  border-color: var(--navy-line);
  border-top-color: var(--orange);
}
.review__quote {
  font-size: 2.4rem;
  line-height: .6;
  color: var(--orange);
  font-family: Georgia, serif;
}
.review p { color: var(--ink-soft); font-size: .97rem; }
.section--navy .review p { color: rgba(255, 255, 255, .7); }
.review__author {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--sand-200);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}
.section--navy .review__author { color: var(--white); border-top-color: var(--navy-line); }
.review__author span { display: block; color: var(--orange); margin-top: 5px; }

@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

/* Editor note (visible placeholder for pending client content) */
.note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--orange-soft);
  border-left: 3px solid var(--orange);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.section--navy .note { color: rgba(255, 255, 255, .72); background: rgba(252, 137, 0, .1); }
.note strong {
  flex: none;
  color: var(--orange);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .7rem;
  line-height: 1.9;
}
.note a { color: var(--orange); text-decoration: underline; }

/* ---------- 13. Contact info cards ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--sand-200);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.contact-card:hover { border-color: var(--orange); transform: translateY(-4px); }
.contact-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--orange);
}
.contact-card__icon svg { width: 20px; height: 20px; }
.contact-card h3 {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}
.contact-card p, .contact-card a { color: var(--ink-soft); font-size: 1rem; }
.contact-card a:hover { color: var(--orange); }
.contact-card strong { display: block; color: var(--navy); font-size: 1.12rem; font-weight: 700; }

@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr; } }

.map-frame {
  border: 1px solid var(--sand-200);
  background: var(--sand);
  height: clamp(300px, 42vw, 460px);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter .4s var(--ease); }
.map-frame:hover iframe { filter: grayscale(0); }

/* ---------- 14. Form ---------- */
.form-section {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 900px) { .form-section { grid-template-columns: 1fr; } }

.form-aside .lead { margin-top: 20px; }
.form-aside__list {
  display: grid;
  gap: 16px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--navy-line);
}
.form-aside__list li {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: .95rem;
  color: rgba(255, 255, 255, .78);
}
.form-aside__list svg { width: 17px; height: 17px; color: var(--orange); flex: none; }
.form-aside__list a:hover { color: var(--orange); }

.form-card {
  background: var(--white);
  padding: clamp(28px, 3.4vw, 48px);
  border-top: 4px solid var(--orange);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
.field label .req { color: var(--orange); }

.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--sand);
  border: 1px solid var(--sand-200);
  border-radius: 2px;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #9aa3ae; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #d13b3b;
  background: #fdf4f4;
}

.field__error {
  font-size: .76rem;
  font-weight: 600;
  color: #d13b3b;
  min-height: 0;
  display: none;
}
.field__error.is-shown { display: block; }

/* Checkbox group */
.choice-group { border: 0; }
.choice-group legend {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
}
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}
.choice span {
  display: block;
  padding: 11px 18px;
  border: 1px solid var(--sand-200);
  background: var(--sand);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.choice input:hover + span { border-color: var(--orange); color: var(--navy); }
.choice input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.choice input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Honeypot — hidden from humans and screen readers, visible to naive bots.
   Not display:none, because some bots skip those. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}
.form-foot .btn { flex: none; }
.form-note { font-size: .78rem; color: var(--ink-soft); }

.form-status {
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
  display: none;
}
.form-status.is-shown { display: block; }
.form-status.is-error { border-color: #d13b3b; background: #fdf4f4; color: #a32a2a; }

@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- 15. CTA band ---------- */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(36px, 4.5vw, 60px);
  background: var(--orange);
  color: var(--navy);
}
.cta-band h2 { max-width: 20ch; }
.cta-band .btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-bd: var(--navy);
}
.cta-band .btn:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .68);
  padding-top: clamp(56px, 7vw, 88px);
}
.footer-grid {
  display: grid;
  /* the contact column carries the longest string on the page (the email) */
  grid-template-columns: 1.35fr .85fr 1.7fr .85fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(44px, 5vw, 64px);
}
.footer-brand img { height: 30px; width: auto; margin-bottom: 22px; }
.footer-brand p { max-width: 32ch; font-size: .97rem; line-height: 1.7; }

.site-footer h4 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 22px;
}
.footer-list { display: grid; gap: 12px; font-size: .95rem; }
.footer-list a { transition: color .25s var(--ease), padding-left .25s var(--ease); }
.footer-list a:hover { color: var(--orange); }
.footer-list--nav a:hover { padding-left: 6px; }

.footer-contact li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; }
.footer-contact svg { width: 16px; height: 16px; color: var(--orange); flex: none; margin-top: 4px; }

.socials { display: flex; gap: 12px; }
.socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--navy-line);
  color: var(--white);
  transition: all .28s var(--ease);
}
.socials a svg { width: 17px; height: 17px; }
.socials a:hover { background: var(--orange); border-color: var(--orange); color: var(--navy); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  padding-block: 26px;
  border-top: 1px solid var(--navy-line);
  font-size: .8rem;
  color: rgba(255, 255, 255, .48);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal a { position: relative; }
.footer-legal a + a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: var(--navy-line);
}

/* Inline padding widens the hit area without shifting the line box */
.footer-bottom a { padding-block: 6px; }
.footer-bottom a:hover { color: var(--orange); }

/* Long unbreakable strings (emails, URLs) must not set the page's minimum
   width — without this the layout bottoms out around 364px instead of 320px. */
.footer-contact li,
.footer-contact span,
.form-aside__list li,
.contact-card p,
.contact-card a,
.note span,
.note a,
a[href^="mailto:"] { overflow-wrap: anywhere; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 16b. Legal / long-form pages ---------- */
.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  /* keeps the measure comfortable instead of stranding the text beside dead space */
  max-width: 1010px;
}

.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
.legal-toc h2 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sand-200);
}
.legal-toc ol { counter-reset: toc; display: grid; gap: 2px; }
.legal-toc a {
  display: block;
  padding: 7px 0 7px 30px;
  position: relative;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  transition: color .25s var(--ease);
}
.legal-toc li { counter-increment: toc; }
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 7px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--orange);
}
.legal-toc a:hover { color: var(--navy); }

.legal { max-width: 74ch; }
.legal__updated {
  display: inline-block;
  padding: 8px 16px;
  margin-bottom: 40px;
  background: var(--sand);
  border-left: 3px solid var(--orange);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.legal section + section { margin-top: clamp(38px, 4vw, 56px); }
.legal h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  color: var(--navy);
  margin-bottom: 16px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal h2 span {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--orange);
  margin-bottom: 8px;
}
.legal h3 {
  font-size: 1rem;
  color: var(--navy);
  margin: 28px 0 10px;
}
.legal p, .legal li { color: var(--ink-soft); }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 1.1em; }
.legal ul {
  list-style: disc;
  padding-left: 1.3em;
  display: grid;
  gap: 8px;
}
.legal ul ul { margin-top: 8px; }
.legal a:not(.btn) {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--orange);
  overflow-wrap: anywhere;
}
.legal a:not(.btn):hover { color: var(--orange); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal address {
  font-style: normal;
  margin-top: 14px;
  padding: 22px 26px;
  background: var(--sand);
  border-left: 3px solid var(--orange);
  line-height: 1.9;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc {
    position: static;
    padding: 24px 26px;
    background: var(--sand);
  }
  .legal-toc h2 { border-bottom-color: rgba(8, 29, 53, .14); }
}

/* ---------- 17. Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Spacing utilities — these exist so no inline style="" is needed anywhere,
   which lets the CSP ship without 'unsafe-inline' for styles. */
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: clamp(28px, 3vw, 44px); }
.mt-44 { margin-top: clamp(32px, 4vw, 44px); }

.prose--invert { color: rgba(255, 255, 255, .74); }
.prose--invert strong { color: var(--white); }

/* Outlined button sitting on the orange CTA band */
.btn--on-orange {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  --btn-bd: var(--navy);
}
.btn--on-orange:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--navy);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .35s var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy); color: var(--white); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- 18. Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 19. Print ---------- */
@media print {
  .site-header, .to-top, .hero__bg, .cta-band, form { display: none !important; }
  body { color: #000; }
}