/* ================================================================
   FANNY PACK HOME SERVICES — Design System Tokens
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --brand-navy:        #2C3E50;
  --brand-navy-deep:   #1F2D3A;
  --brand-navy-soft:   #3D5670;
  --brand-orange:      #ED7D31;
  --brand-orange-deep: #C9621A;
  --brand-orange-soft: #FBD9BD;

  /* Canvas / Neutrals */
  --bone:       #F8F5F0;
  --bone-deep:  #EFEAE1;
  --paper:      #FFFFFF;
  --ink-900:    #1B232C;
  --ink-700:    #3A4754;
  --ink-500:    #6A7785;
  --ink-300:    #A8B1BB;
  --ink-200:    #D6DAE0;
  --ink-100:    #EAEDF1;

  /* Semantic */
  --ok:       #2E8B57;
  --ok-soft:  #DCEEE3;

  /* Aliases */
  --fg-1:       var(--ink-900);
  --fg-2:       var(--ink-700);
  --fg-3:       var(--ink-500);
  --fg-on-navy: #F8F5F0;

  /* Borders */
  --line-1: #E4DFD4;
  --line-2: #D6DAE0;

  /* Type */
  --font-display: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Type scale */
  --t-display: clamp(46px, 6vw, 84px);
  --t-h1:      clamp(34px, 4.5vw, 56px);
  --t-h2:      clamp(26px, 3.2vw, 40px);
  --t-h3:      22px;
  --t-body:    16px;
  --t-body-lg: 18px;
  --t-small:   14px;
  --t-micro:   12px;
  --t-eyebrow: 13px;

  /* Spacing — 8pt scale */
  --s-1:  4px;  --s-2: 8px;   --s-3: 12px;
  --s-4:  16px; --s-5: 24px;  --s-6: 32px;
  --s-7:  48px; --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* Radii */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 999px;

  /* Shadows */
  --shadow-1:     0 1px 0 rgba(28,35,44,.04), 0 1px 2px rgba(28,35,44,.06);
  --shadow-2:     0 2px 0 rgba(28,35,44,.04), 0 6px 18px rgba(28,35,44,.08);
  --shadow-3:     0 4px 0 rgba(28,35,44,.05), 0 18px 40px rgba(28,35,44,.12);
  --shadow-press: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.06);

  /* Motion */
  --ease-out:  cubic-bezier(.2,.8,.2,1);
  --ease-snap: cubic-bezier(.4,1.4,.5,1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ================================================================
   BASE
   ================================================================ */
html  { color: var(--fg-1); background: var(--bone); font-family: var(--font-body); scroll-behavior: smooth; }
body  { font-size: var(--t-body); line-height: 1.55; color: var(--fg-2); -webkit-font-smoothing: antialiased; background: var(--bone); }
a     { color: var(--brand-navy); }
img   { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-5); }
section    { padding: var(--s-9) 0; }

/* ================================================================
   SHARED COMPONENTS
   ================================================================ */

/* Eyebrow label */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: var(--s-3);
}

/* Section header block */
.sec-head { margin-bottom: var(--s-7); }
.sec-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -.005em;
  color: var(--ink-900);
  margin-bottom: var(--s-3);
}
.sec-head p {
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 64ch;
}

/* Buttons */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 14px 28px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background var(--dur-2) cubic-bezier(.23,1,.32,1),
              transform var(--dur-2) cubic-bezier(.23,1,.32,1),
              box-shadow var(--dur-2) cubic-bezier(.23,1,.32,1);
  position: relative;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

.btn-primary {
  background: var(--brand-orange);
  color: #fff;
  box-shadow: var(--shadow-press);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.2);
  opacity: 0;
  transition: opacity var(--dur-2) ease-out;
  pointer-events: none;
}
.btn-primary:hover {
  background: var(--brand-orange-deep);
  color: #fff;
}
.btn-primary:hover::before { opacity: 1; }
.btn-secondary {
  background: var(--brand-navy);
  color: var(--fg-on-navy);
  box-shadow: var(--shadow-press);
}
.btn-secondary:hover {
  background: var(--brand-navy-deep);
  color: var(--fg-on-navy);
}
.btn-ghost {
  background: transparent;
  color: var(--brand-navy);
  box-shadow: inset 0 0 0 1.5px var(--brand-navy);
  transition: background var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.btn-ghost:hover {
  background: rgba(44,62,80,.08);
  box-shadow: inset 0 0 0 1.5px var(--brand-navy-deep);
}

/* ================================================================
   NAV
   ================================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-navy);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-mark {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-wordmark strong {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--fg-on-navy);
}
.nav-wordmark small {
  display: block;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248,245,240,.55);
  margin-top: 3px;
}
.nav-links {
  display: flex;
  gap: var(--s-7);
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--fg-on-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: color var(--dur-1) var(--ease-out);
}
.nav-links a:hover { color: var(--brand-orange); }
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-shrink: 0;
}
.nav-phone {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(248,245,240,.8);
  text-decoration: none;
  transition: color var(--dur-1);
}
.nav-phone:hover { color: var(--brand-orange); }
.nav-cta { padding: 10px 20px; font-size: 13px; }
.nav-cta-short { display: none; }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg-on-navy);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-2);
}
.nav-toggle:hover { background: rgba(255,255,255,.08); }

/* Mobile menu */
.nav-mobile {
  display: none;
  background: var(--brand-navy-deep);
  border-top: 1px solid rgba(255,255,255,.08);
}
.nav-mobile.open { display: block; }
.nav-mobile ul   { list-style: none; padding: var(--s-3) 0 var(--s-2); }
.nav-mobile a {
  display: block;
  padding: 14px var(--s-5);
  color: var(--fg-on-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.nav-mobile a:hover { color: var(--brand-orange); }
.nav-mobile .mobile-cta { padding: var(--s-2) var(--s-5) var(--s-4); }

/* ================================================================
   HERO
   ================================================================ */
.hero { padding: var(--s-9) 0; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.hero-text h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--t-display);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--ink-900);
  margin-bottom: var(--s-5);
}
.hero-text h1 .hl {
  background: linear-gradient(transparent 85%, var(--brand-orange) 85%, var(--brand-orange) 92%, transparent 92%);
  padding: 0 0px;
  display: inline-block;
  position: relative;
}
.hero-text .lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 52ch;
  margin-bottom: var(--s-6);
}
.hero-cta-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
.hero-trust {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.hero-trust .item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}
.hero-trust .item svg { color: var(--brand-orange); }

/* Photo placeholder */
.photo-slot {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--bone-deep);
}
.photo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.photo-slide.active { opacity: 1; }
.photo-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.48) 0%, transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.photo-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
  text-align: center;
  z-index: 1;
  pointer-events: none;
}
.photo-badge {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  background: var(--brand-navy);
  color: var(--fg-on-navy);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  z-index: 2;
}
.photo-float {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  right: var(--s-5);
  background: var(--paper);
  border-radius: var(--r-3);
  padding: 12px 14px;
  box-shadow: var(--shadow-3);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.photo-float .avi {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--brand-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-body);
  flex-shrink: 0;
}
.photo-float .info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}
.photo-float .info span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-500);
  margin-top: 2px;
}

/* ================================================================
   SERVICES
   ================================================================ */
.services { background: var(--bone); }

.svc-filter {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.svc-filter button {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-1);
  background: var(--bone);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.svc-filter button:hover { border-color: var(--brand-navy-soft); }
.svc-filter button.on    { background: var(--brand-navy); color: var(--fg-on-navy); border-color: var(--brand-navy); }
.svc-filter button:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.service-card {
  background: var(--paper);
  border-radius: var(--r-4);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border: 1px solid transparent;
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.service-card:first-child { grid-column: span 2; }
.service-card:nth-child(6) { grid-column: span 2; }
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--brand-orange);
  background: var(--paper);
}
.service-card:nth-child(odd):hover { background: rgba(237, 125, 49, .04); }
a.service-card        { text-decoration: none; color: inherit; }
.service-card.hidden  { display: none; }
.service-card .ico {
  width: 44px;
  height: 44px;
  border-radius: var(--r-3);
  background: var(--brand-orange-soft);
  color: var(--brand-orange-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              transform var(--dur-2) cubic-bezier(.23,1,.32,1);
}
.service-card:hover .ico {
  background: var(--brand-orange);
  color: #fff;
  transform: scale(1.08) rotate(2deg);
}
.service-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-900);
}
.service-card p   { font-size: 14px; line-height: 1.5; color: var(--ink-700); flex: 1; }
.service-card .from {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.how {
  background: var(--paper);
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  padding: var(--s-6) 0;
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.step .num {
  font-family: var(--font-display);
  font-size: clamp(64px, 8vw, 96px);
  line-height: 0.9;
  color: var(--brand-orange);
  letter-spacing: -.02em;
  font-weight: 900;
}
.step h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--ink-900);
  line-height: 1.1;
  letter-spacing: -.005em;
}
.step p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 52ch;
}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testimonials { background: var(--brand-navy); }
.testimonials .sec-head h2 { color: var(--fg-on-navy); }
.testimonials .sec-head p  { color: rgba(248, 245, 240, .78); }
.testimonials .eyebrow     { color: var(--brand-orange); }

.t-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.t-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-4);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 240px;
}
.t-stars {
  color: var(--brand-orange);
  letter-spacing: 4px;
  font-size: 18px;
  line-height: 1;
}
.t-quote {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-on-navy);
  flex: 1;
  margin: 0;
}
.t-author { display: flex; align-items: center; gap: 12px; }
.t-author .avi {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--r-pill);
  background: var(--brand-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
}
.t-author .avi img { width: 100%; height: 100%; object-fit: cover; }
.t-author .who { display: flex; flex-direction: column; min-width: 0; }
.t-author .name { font-weight: 700; font-size: 14px; color: var(--fg-on-navy); }
.t-author .where {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(248, 245, 240, .6);
}
.t-author a.name:hover { text-decoration: underline; }
.t-note {
  margin: var(--s-5) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(248, 245, 240, .55);
}
.t-note a { color: rgba(248, 245, 240, .8); text-decoration: underline; }

/* ================================================================
   QUOTE FORM
   ================================================================ */
.quote { background: var(--bone); }
.quote-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-2);
  padding: var(--s-7);
}
.quote-wrap > .eyebrow { margin-bottom: var(--s-2); }
.quote-wrap > h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05;
  color: var(--ink-900);
  margin-bottom: var(--s-2);
}
.quote-wrap > .subline {
  font-size: 16px;
  color: var(--ink-700);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line-1);
  padding-bottom: var(--s-5);
}
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); }
.q-grid.cols-1 { grid-template-columns: 1fr; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 13px; color: var(--ink-900); }
.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  border: 1.5px solid var(--line-2);
  background: var(--paper);
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 4px rgba(237,125,49,.12), inset 0 0 0 1px rgba(237,125,49,.24);
  background-color: rgba(237,125,49,.02);
}
.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--brand-navy-soft);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-300); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #C0392B; }

.q-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-6);
  gap: var(--s-4);
  flex-wrap: wrap;
}
.q-footer .privacy {
  font-size: 13px;
  color: var(--ink-500);
  max-width: 40ch;
  line-height: 1.45;
}
/* Formspree field-level error spans */
.field-error {
  font-size: 13px;
  color: #C0392B;
  min-height: 18px;
  display: block;
}
/* Form-level error block */
.q-form-error {
  font-size: 14px;
  color: #C0392B;
  margin-bottom: var(--s-4);
  min-height: 0;
}
/* Formspree marks invalid fields with aria-invalid="true" */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: #C0392B; }

@keyframes successPulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes successCheckmark {
  0% { opacity: 0; transform: scale(0.6) rotate(-45deg); }
  50% { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.q-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-7) 0 var(--s-5);
  animation: fadeIn var(--dur-3) ease-out forwards;
}
.q-success.show { display: flex; }
.q-success .ok-ring {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successPulse var(--dur-3) cubic-bezier(.23,1,.32,1);
  box-shadow: 0 8px 24px rgba(46,139,87,.12);
}
.q-success .ok-ring i {
  animation: successCheckmark 500ms cubic-bezier(.34,1.56,.64,1) 200ms backwards;
}
.q-success h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 28px;
  color: var(--ink-900);
  animation: fadeInUp var(--dur-3) cubic-bezier(.23,1,.32,1) 150ms backwards;
}
.q-success p {
  color: var(--ink-700);
  max-width: 44ch;
  font-size: 16px;
  animation: fadeInUp var(--dur-3) cubic-bezier(.23,1,.32,1) 250ms backwards;
}
.q-success a {
  animation: fadeInUp var(--dur-3) cubic-bezier(.23,1,.32,1) 350ms backwards;
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background: var(--brand-navy-deep);
  color: var(--fg-on-navy);
  padding: var(--s-8) 0 var(--s-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(248,245,240,.1);
  margin-bottom: var(--s-5);
}
.footer-brand .f-mark {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--brand-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
}
.footer-brand .f-wm {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1;
  color: var(--fg-on-navy);
  display: block;
}
.footer-brand .f-sub {
  display: block;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248,245,240,.5);
  margin-top: 3px;
}
.footer-brand .blurb {
  margin-top: var(--s-4);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(248,245,240,.62);
  max-width: 34ch;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: var(--s-4);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col li a {
  color: rgba(248,245,240,.72);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--dur-1);
}
.footer-col li a:hover { color: var(--brand-orange); }
.footer-contact .phone {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--fg-on-navy);
  text-decoration: none;
  display: block;
  margin-bottom: var(--s-2);
}
.footer-contact .phone:hover { color: var(--brand-orange); }
.footer-contact .area {
  margin-top: var(--s-4);
  font-size: 13px;
  color: rgba(248,245,240,.45);
  line-height: 1.5;
}
.footer-colophon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(248,245,240,.38);
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer-colophon a { color: rgba(248,245,240,.38); text-decoration: none; }
.footer-colophon a:hover { color: var(--brand-orange); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: flex; }
  .hero-grid  { grid-template-columns: 1fr; }
  .hero-photo { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid    { grid-template-columns: 1fr; gap: var(--s-5); }
  .t-grid        { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
  section        { padding: var(--s-7) 0; }
}
/* Header fits down to 320px: tighter gaps under 420, and under 340 the
   CTA steps aside since the mobile menu already carries it. */
@media (max-width: 420px) {
  .nav-inner { gap: var(--s-3); }
  .nav-right { gap: var(--s-2); }
}
@media (max-width: 340px) {
  .nav-cta { display: none; }
}
@media (max-width: 600px) {
  /* The header needs 380px of content in a 342px container at 390px wide,
     which pushed the hamburger off the right edge. Short label plus tighter
     padding reclaims about 65px. */
  .nav-cta { padding: 9px 14px; font-size: 12px; }
  .nav-cta-full  { display: none; }
  .nav-cta-short { display: inline; }
  .services-grid { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr; }
  .hero-cta-row  { flex-direction: column; align-items: flex-start; }
  .q-grid        { grid-template-columns: 1fr; }
  .q-footer      { flex-direction: column; align-items: flex-start; }
  .quote-wrap    { padding: var(--s-5); }
  .services-grid .service-card:first-child { grid-column: span 1; }
  .services-grid .service-card:nth-child(6) { grid-column: span 1; }
}

/* Scroll-triggered animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in-up {
  animation: fadeInUp var(--dur-3) cubic-bezier(.23,1,.32,1) forwards;
  opacity: 0;
}

.fade-in {
  animation: fadeIn var(--dur-3) ease-out forwards;
  opacity: 0;
}

.delay-1 { animation-delay: 0ms; }
.delay-2 { animation-delay: 80ms; }
.delay-3 { animation-delay: 160ms; }
.delay-4 { animation-delay: 240ms; }
.delay-5 { animation-delay: 320ms; }
.delay-6 { animation-delay: 400ms; }
.delay-7 { animation-delay: 480ms; }
.delay-8 { animation-delay: 560ms; }
.delay-9 { animation-delay: 640ms; }

/* Before / after — job walkthrough */
.beforeafter { background: var(--paper); border-top: 1px solid var(--line-1); }
.ba-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.ba-step {
  margin: 0;
  position: relative;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--line-1);
  box-shadow: var(--shadow-1);
  background: var(--paper);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.ba-step:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
.ba-step img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.ba-tag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(27,35,44,.82);
  color: var(--fg-on-navy);
}
.ba-tag-after { background: var(--brand-orange); color: #FFFFFF; }
.ba-caption {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-700);
  background: var(--paper);
  border-top: 1px solid var(--line-1);
}
@media (max-width: 760px) {
  .ba-steps { grid-template-columns: 1fr; }
  .ba-step img { height: 260px; }
}

/* Our Work gallery — asymmetric masonry layout */
.gallery { background: var(--bone-deep); border-top: 1px solid var(--line-1); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  gap: var(--s-5);
}
.gallery-item {
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--line-1);
  box-shadow: var(--shadow-1);
  background: var(--paper);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(2) { grid-column: span 2; }
.gallery-item:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(4) { grid-column: span 2; }
.gallery-item:nth-child(5) { grid-column: span 2; }
.gallery-item:nth-child(6) { grid-column: span 3; }
.gallery-item:nth-child(7) { grid-column: span 3; }
.gallery-item:nth-child(8) { grid-column: span 2; }
.gallery-item:nth-child(9) { grid-column: span 3; }
.gallery-item:nth-child(10) { grid-column: span 3; }
.gallery-item:nth-child(11) { grid-column: span 3; }
.gallery-item:nth-child(12) { grid-column: span 3; }
/* Newer tiles run a fixed image band so portrait and landscape shots
   sit in rows of equal height instead of over-cropping each other. */
.gallery-item:nth-child(n+9) img { height: 360px; min-height: 0; }
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  transition: transform var(--dur-3) cubic-bezier(.23,1,.32,1);
}
.gallery-item:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-4px);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: .02em;
  background: var(--paper);
}
@media (max-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .gallery-item:nth-child(2) { grid-column: span 2; }
  .gallery-item:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .gallery-item:nth-child(4) { grid-column: span 2; }
  .gallery-item:nth-child(5) { grid-column: span 2; }
  .gallery-item:nth-child(6) { grid-column: span 2; }
  .gallery-item:nth-child(7) { grid-column: span 2; }
  .gallery-item:nth-child(8) { grid-column: span 2; }
  .gallery-item:nth-child(9) { grid-column: span 2; }
  .gallery-item:nth-child(10) { grid-column: span 2; }
  .gallery-item:nth-child(11) { grid-column: span 2; }
  .gallery-item:nth-child(12) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .gallery-item { grid-column: span 1 !important; grid-row: span 1 !important; }
  .gallery-item img { min-height: 180px; }
}

/* ================================================================
   V2 — PRECISION INSTRUMENT LAYER (2026-09-06)
   Warm base kept. Futurist cues: mono system voice, hairlines,
   grid texture, single signal accent, measured motion.
   ================================================================ */

:root {
  /* Cool accent — used only for system/telemetry cues, never for brand */
  --steel-100: #E8EDF2;
  --steel-300: #B9C6D4;
  --steel-500: #7C93A8;

  /* Hairlines */
  --hairline:        rgba(44, 62, 80, .13);
  --hairline-strong: rgba(44, 62, 80, .26);
  --hairline-onnavy: rgba(248, 245, 240, .16);

  /* Grid texture */
  --grid-unit: 34px;
  --grid-ink:  rgba(44, 62, 80, .045);
  --grid-ink-onnavy: rgba(248, 245, 240, .05);

  /* Signal */
  --glow-orange: 0 0 0 1px rgba(237,125,49,.30), 0 8px 26px rgba(237,125,49,.22);
  --glow-soft:   0 0 0 1px rgba(237,125,49,.18);

  /* Motion */
  --dur-4:     480ms;
  --ease-tech: cubic-bezier(.16, 1, .3, 1);
}

/* ----------------------------------------------------------------
   1. TYPE — tighten display, promote mono to system voice
   ---------------------------------------------------------------- */
.hero-text h1,
.sec-head h2 { letter-spacing: -.022em; }

.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: .16em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(237,125,49,.18);
  flex: none;
}

/* Mono data label — prices, timings, counts, statuses */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   2. STATUS CHIP — the core "instrument" element
   ---------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-700);
  white-space: nowrap;
}
.status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  position: relative;
}
.status .dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  opacity: .55;
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.status--onnavy {
  background: rgba(31,45,58,.62);
  border-color: var(--hairline-onnavy);
  color: rgba(248,245,240,.92);
}
@keyframes pulse-ring {
  0%   { transform: scale(.7); opacity: .65; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ----------------------------------------------------------------
   3. HAIRLINES + GRID TEXTURE
   ---------------------------------------------------------------- */
.section-line { border-top: 1px solid var(--hairline); }

.gridtex { position: relative; isolation: isolate; }
.gridtex::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 35%, transparent 100%);
  pointer-events: none;
}
.gridtex--navy::before {
  background-image:
    linear-gradient(to right,  var(--grid-ink-onnavy) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink-onnavy) 1px, transparent 1px);
}

/* Corner ticks — machined-edge cue on key cards */
.ticks { position: relative; }
.ticks::before,
.ticks::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border: 1px solid var(--hairline-strong);
  transition: border-color var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.ticks::before { top: 9px;    left: 9px;  border-right: 0; border-bottom: 0; }
.ticks::after  { bottom: 9px; right: 9px; border-left: 0;  border-top: 0;    }
.ticks:hover::before,
.ticks:hover::after { border-color: var(--brand-orange); }

/* ----------------------------------------------------------------
   4. SIGNAL ACCENT — buttons and focus
   ---------------------------------------------------------------- */
.btn-primary { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-tech); }
.btn-primary:hover { box-shadow: var(--glow-orange); }
.btn-secondary:hover,
.btn-ghost:hover { box-shadow: var(--glow-soft); }

/* ----------------------------------------------------------------
   5. MOTION — moderate
   ---------------------------------------------------------------- */

/* Parallax target (JS sets --par) */
.parallax { will-change: transform; transform: translate3d(0, var(--par, 0px), 0); }

/* Scan sweep across the hero photo */
.photo-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg,
              transparent 42%,
              rgba(255,255,255,.16) 50%,
              transparent 58%);
  transform: translateX(-120%);
  animation: scan-sweep 7.5s var(--ease-tech) infinite;
}
@keyframes scan-sweep {
  0%, 62% { transform: translateX(-120%); }
  86%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}

/* Card tilt — JS sets --rx/--ry from pointer position */
.tilt {
  transform: perspective(900px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateY(var(--ty, 0px));
  transition: transform var(--dur-3) var(--ease-tech), box-shadow var(--dur-3) var(--ease-tech);
  transform-style: preserve-3d;
}
.tilt:hover { --ty: -3px; }

/* Hairline that draws in when its section enters view */
.rule-draw {
  height: 1px;
  background: var(--hairline-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-tech);
}
.rule-draw.in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .photo-slot::after,
  .status .dot::after { animation: none; }
  .parallax { transform: none; }
  .tilt     { transform: none; transition: none; }
  .rule-draw { transform: scaleX(1); transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------------
   6. STICKY MOBILE ACTION BAR
   ---------------------------------------------------------------- */
.actionbar { display: none; }

@media (max-width: 860px) {
  .actionbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.45fr;
    gap: 1px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: var(--hairline-strong);
    border-top: 1px solid var(--hairline-strong);
    box-shadow: 0 -6px 22px rgba(28,35,44,.14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .actionbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 6px;
    background: var(--paper);
    color: var(--brand-navy);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    min-height: 52px;
    white-space: nowrap;
  }
  .actionbar a.primary { font-size: 11.5px; letter-spacing: .05em; }
  @media (max-width: 359px) {
    .actionbar a { font-size: 10.5px; letter-spacing: .03em; gap: 5px; }
  }
  .actionbar a.primary {
    background: var(--brand-orange);
    color: #fff;
  }
  .actionbar a:active { background: var(--bone-deep); }
  .actionbar a.primary:active { background: var(--brand-orange-deep); }
  .actionbar svg { flex: none; }
  body { padding-bottom: 72px; }
}

/* ----------------------------------------------------------------
   7. NAV — hairline base, blur on scroll
   ---------------------------------------------------------------- */
.nav { border-bottom: 1px solid var(--hairline-onnavy); }
.nav.scrolled {
  background: rgba(31,45,58,.86);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}

/* ----------------------------------------------------------------
   8. V2 OVERRIDES — must sit after the base rules they replace
   ---------------------------------------------------------------- */

/* Services grid: 11 cards + one span-2 = 12 units across 4 columns,
   which is exactly 3 full rows. The old nth-child(6) span left a
   ragged trailing row once the grid grew. */
.service-card:nth-child(6) { grid-column: auto; }

/* The hero float is now a positioning wrapper for a status chip */
.photo-float {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hero badge picks up the instrument voice */
.photo-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 1px solid var(--hairline-onnavy);
}

/* Service cards: hairline edge + orange signal on hover */
.service-card {
  border: 1px solid var(--hairline);
  transition: border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out),
              transform var(--dur-3) var(--ease-tech),
              box-shadow var(--dur-3) var(--ease-tech);
}
.service-card:hover { border-color: var(--brand-orange); }
.service-card .from {
  font-family: var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Process step numbers read as instrument counters */
.step .num {
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

/* Testimonials sit on navy: grid texture + hairline cards */
.t-card { border: 1px solid var(--hairline-onnavy); }

@media (max-width: 960px) {
  .services-grid .service-card:nth-child(6) { grid-column: auto; }
}

/* ----------------------------------------------------------------
   9. GRID BLOWOUT FIX (pre-existing, service page quote forms)
   A grid child defaults to min-width:auto, so a <select> whose
   longest <option> is wider than its track pushes the track past
   the viewport. The page then zooms out to fit and every fixed
   element (including the action bar) is laid out against the wider
   viewport. Verified present in the 2026-09-06 pre-change archive.
   ---------------------------------------------------------------- */
.form-row > *,
.form-group,
.form-grid > * { min-width: 0; }

.form-group input,
.form-group select,
.form-group textarea,
.form-row input,
.form-row select,
.form-row textarea { max-width: 100%; }

/* ----------------------------------------------------------------
   10. NAV RESPONSIVE, CASCADE-PROOF
   site.css is linked BEFORE each page's own <style>, so a page rule
   like `.btn { padding: ... }` outranks `.nav-cta` on equal
   specificity and the header grows past the viewport. These selectors
   carry enough specificity to win from where they sit. Measured: the
   header overflowed by 52px at 375 on 13 pages before this block.
   ---------------------------------------------------------------- */
@media (max-width: 960px) {
  .nav .nav-right .nav-phone,
  .nav .nav-links { display: none; }
  .nav .nav-right .nav-toggle { display: flex; }
}
@media (max-width: 600px) {
  .nav .nav-right .nav-cta {
    padding: 9px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .nav .nav-inner { gap: var(--s-3); }
  .nav .nav-right { gap: var(--s-2); }
}
@media (max-width: 340px) {
  .nav .nav-right .nav-cta { display: none; }
}

/* Long headings and eyebrows must not set the page width */
.section__heading,
.section__eyebrow,
.hero__eyebrow,
h1, h2, h3 { overflow-wrap: break-word; }

/* Same min-width:auto blowout as section 9, in the two-column intro
   splits and stat grids on the service pages. A grid or flex child
   refuses to shrink below its min-content width unless told to. */
[class*="grid"] > *,
[class*="split"] > *,
[class*="-row"] > * { min-width: 0; }

/* Stat cards go single column on the narrowest phones. At 320 the
   two-up grid leaves 78px of content width and the stat word needs
   113px, so the text spilled and set the page width. Class doubled
   for specificity: the page's own stylesheet loads after this one. */
@media (max-width: 380px) {
  .stats-grid.stats-grid { grid-template-columns: 1fr; }
}