/* ==========================================================================
   Son Concrete LLC — sonconcrete.com
   Static rebuild of the Divi 4.27.7 original. Fidelity mode: PIXEL-FAITHFUL.
   Every value here was measured from the live site at ?nowprocket=1 and is
   recorded in the capture's geometry.md. Do not "improve" these numbers.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Geologica ships as ONE variable file covering 300/500/700 (25KB total).
   Russo One has a single weight; the original computes font-weight:500 on it,
   so the face is declared 400-500 to avoid synthetic bolding at 500.        */
@font-face {
  font-family: 'Geologica';
  src: url('../fonts/geologica-var.woff2') format('woff2-variations'),
       url('../fonts/geologica-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Russo One';
  src: url('../fonts/russoone-400.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #ba1b1d;
  --blue: #004e98;
  --ink: #040f0f;
  --body: #666666;
  --tint: #f0f0f0;
  --white: #ffffff;
  /* placeholder darkened from the original #999999 (2.85:1 on white, fails AA)
     to the minimum that clears with a buffer. Approved by David 2026-07-21.   */
  --placeholder: #757575;          /* 4.61:1 on #ffffff */
  --row: 1336px;                   /* measured; NOT Divi's 1080px default */
  --gutter: 73.47px;               /* measured column gap, used sitewide */
  --rowpad: 33px;                  /* every Divi row carries 33px block padding */
  --display: 'Russo One', Impact, 'Arial Narrow', sans-serif;
  --text: 'Geologica', Helvetica, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; }

/* Visible keyboard focus. The original has none — this is an accessibility
   addition, invisible to mouse users, so it does not alter the design.       */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; font-size: 15px;
}
.skip-link:focus { left: 0; }

/* --- Layout --------------------------------------------------------------
   Measured across 1200/1366/1440/1920: the row is width:100% capped at
   1336px and centred. At 1366 it renders 1336 with 15px margins; at 1200 it
   renders full-bleed 1200 with none. Reproduced exactly.                     */
.row {
  width: 100%;
  max-width: var(--row);
  margin-inline: auto;
}
.row--full { max-width: none; }          /* ABOUT US is full-bleed 1920 */

.section { position: relative; }

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; margin: 0; }

/* 38px Russo One, uppercase, ink. The family/weight must be declared here and
   not left to the h1-h4 rule: these headings render on <p class="eyebrow"> so
   the element selector never reaches them, and they silently fell back to
   Geologica 300. Caught by the Phase 2b type-scale diff. */
.h-section {
  font-family: var(--display);
  font-weight: 500;
  font-size: 38px;
  line-height: 48px;               /* measured: heading modules are 48px tall */
  color: var(--ink);
  text-transform: uppercase;
}

/* the red dot-and-rule that precedes every section heading (Line-1.svg).
   Heading modules measure 48px tall on the original with a -3px bottom margin. */
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 -3px; }
.eyebrow img { width: 64px; height: 13px; flex: none; }

p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }

/* Divi spaces body paragraphs with padding-bottom:1em, not margin, and runs
   list items at a 26px line-height. Reproducing the mechanism (not just the
   look) is what makes the measured block heights land: 109/38/118/85 px. */
.copy { color: var(--ink); font-size: 14px; line-height: 23.8px; }
.copy p { margin: 0; padding-bottom: 1em; }
.copy p:last-child { padding-bottom: 1em; }
.copy ul { margin: 0; padding-bottom: 1em; padding-left: 20px; }
.copy li { line-height: 26px; }

/* --- Buttons -------------------------------------------------------------
   One variant sitewide. The angled corners are the site's signature device.
   NOTE: the original carries an ETmodules ::after arrow with content "5",
   but it computes to display:none in BOTH the rest and hover states, so it
   never renders. The dead pseudo-element and its 6KB icon font are omitted;
   this is a measured no-op, not a design change. (See Phase 2b notes.)       */
.btn {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--text);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 43px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 35%, 10% 0, 100% 0, 100% 65%, 90% 100%, 0 100%);
  cursor: pointer;
}
.btn--hero { font-size: 24px; }

/* ==========================================================================
   Header — a 130px #040f0f bar whose blue nav row overflows below it.
   Desktop (>=981px): row 1 visible, background #004e98.
   Mobile  (<=980px): row 1 hidden, row 2 visible, background #ba1b1d.
   ========================================================================== */
.site-header {
  position: relative;
  height: 130px;
  background: var(--ink);
  z-index: 3;
}

/* The phone/hours band is 135 tall on the original: 33px padding, a 69px
   content row, 33px padding. The 69 is NOT the 32px item height — Divi's
   inline-block modules sit in a taller line box. Getting this wrong made the
   band 98 tall and pulled the blue bar up 37px, eating the black above it. */
.header-top { padding: 33px 0; }
.header-top .row { display: block; height: 69px; }

/* Measured on the original at 1920: call icon at x292, phone text at x339
   (15px apart), alarm icon at x600. So the phone block is 176 wide and there
   are 132px between it and the hours — not the 37px this used to carry.
   inline-flex + gap gives the 15px icon/text spacing exactly, without the
   inline-block whitespace fudge. */
.header-item {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  vertical-align: top;
  color: var(--white);
  font-size: 20px;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
}
.header-item img { width: 32px; height: 32px; flex: none; }
.header-phone { margin-right: 129px; text-transform: none; }

/* The blue bar: pulled up 40px so it straddles the dark strip and the hero.
   Measured y95->245, so 150 tall — its own content overflows it, which means
   the height is set, not content-driven. */
.header-bar {
  background: var(--blue);
  margin-top: -40px;
  padding: 20px;
  height: 150px;
  display: flex;
  align-items: flex-start;
}
/* Logo module 162 wide (122 + 20px side padding) then 179.5 of gap, which puts
   the nav at x654. Do NOT use margin-left:auto on the nav — right-aligning it
   against the bar put every item 21px too far right. */
.header-bar .logo { display: block; padding: 10px 20px; margin-right: 13.85%; flex: none; }
.header-bar .logo img { width: 122px; height: 95px; display: block; }

/* flex:1 gives the nav a DEFINITE width (the bar's remaining space, 954.5 at a
   1336 row). Without it the container is shrink-to-fit, the children's
   percentage widths have nothing to resolve against, and every item collapsed
   to 136px with "WHY CHOOSE US" wrapping to three lines — at every width. */
.site-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; padding: 44px 0 0; }
/* The original renders these as <p> inside JS-clickable divs — dead without
   JavaScript and unreachable by keyboard. Real anchors here, styled to the
   same measured box (219x24, 24px Geologica 300, uppercase, white).          */
.site-nav a {
  display: inline-block;
  width: 22.96%;
  color: var(--white);
  font-size: 24px;
  line-height: 24px;
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: 2%;
  /* Divi aligns these INSIDE their 219px boxes: the first module carries
     et_pb_text_align_right, the other three et_pb_text_align_center. Left-
     aligning them all lines the boxes up but puts every label in the wrong
     place — which reads as bad spacing even when the geometry measures right. */
  text-align: center;
}
.site-nav a:first-child { text-align: right; }
.site-nav a:last-child { margin-right: 0; }

/* mobile header row + its dropdown — both hidden on desktop.
   .mobile-nav needs its display:none HERE, not only inside the media query,
   or the four links render as loose text under the desktop bar. */
.header-bar-mobile { display: none; }
.mobile-nav { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  margin-top: -9px;                       /* measured: hero starts at y=121 */
  padding: 200px 0 66px;
  background: var(--white) url('../img/hero.jpg') center/cover no-repeat;
  text-align: center;
  color: var(--white);
}
.hero .row { padding: var(--rowpad) 0; }
/* h1 box measures 221 on the original: 2 lines at 105.6 plus a 10px bottom pad.
   The 10px left pad is Divi's and is reproduced too. */
.hero h1 {
  font-size: 96px;
  line-height: 105.6px;
  color: var(--white);
  margin: 0;
  padding: 0 0 10px 10px;
}
.hero .lede {
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 300;
  color: var(--white);
  margin: 20px 0 0;
}
.hero .btn { margin-top: 50px; }
/* Divi bottom inside divider — a 60px curved white SVG, reproduced inline */
.hero-divider {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  line-height: 0;
}
.hero-divider svg { width: 100%; height: 60px; display: block; }

/* ==========================================================================
   Feature cards (3 up) — clip variant B (15/85)
   ========================================================================== */
.features {
  padding: 45px 0 66px;
  background: var(--white) url('../img/blueprint-cards.png') center/cover no-repeat;
}
.features .row { display: flex; gap: var(--gutter); padding: var(--rowpad) 0; align-items: flex-start; }
.card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--blue);
  color: var(--white);
  padding: 50px 40px;
  text-align: center;
  clip-path: polygon(0 15%, 10% 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
}
.card h2 { font-size: 32px; line-height: 1.15; color: var(--white); margin: 0 0 29.31px; }
.card p { font-size: 18px; line-height: 1.32; font-weight: 300; margin: 0; }
/* The middle card renders at 35px on the original, not 32px, because it is
   marked up differently there (a <span>, not the <h2> its siblings use).
   Reproduced deliberately — fidelity mode is pixel-faithful. */
.card--35 h2 { font-size: 35px; }

/* ==========================================================================
   ABOUT US — full-bleed 1920 row, photo left, copy right
   ========================================================================== */
/* The section itself is white, but its full-bleed row carries #f0f0f0 plus the
   blueprint watermark, bottom-right, no-repeat, at the artwork's intrinsic
   1204x287. Missed on the first build because the harness only ever compared
   SECTION backgrounds — this one lives on the row.
   The source is an SVG wrapping a PNG at mix-blend-mode:luminosity/opacity .12;
   it is pre-rendered over the grey so it ships as 136KB rather than 478KB. */
.about { background: var(--white); }
.about .row--full {
  background: var(--tint) url('../img/blueprint-about.png') 100% 100% no-repeat;
}
.about .row { display: flex; align-items: stretch; gap: 5.5%; }
.about .about-media { width: 47.25%; flex: none; }
.about .about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about .about-body { width: 47.25%; flex: none; padding: 96px 100px 0 66px; }

/* ==========================================================================
   SERVICES — copy + photo left, four blurb cards right
   ========================================================================== */
.services { padding: 66px 0; }
.services .row { display: flex; gap: 5.5%; padding: var(--rowpad) 0; align-items: flex-start; }
.services-col { width: 47.25%; flex: none; }
.services .copy { margin: 20px 0 36.73px; }
.services-photo {
  display: block; width: 100%; aspect-ratio: 631 / 473; height: auto; object-fit: cover;
  margin: 0 0 36.73px;
  clip-path: polygon(0 15%, 10% 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
}
.services-col > p:last-child { margin: 20px 0 0; }
.blurb {
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--blue);
  color: var(--white);
  padding: 38px 40px;
  margin-bottom: 36.73px;
  clip-path: polygon(0 35%, 10% 0, 100% 0, 100% 65%, 90% 100%, 0 100%);
}
.blurb:last-child { margin-bottom: 0; }
.blurb img { width: 100px; height: 100px; flex: none; }
.blurb h3 { font-size: 28px; line-height: 1; color: var(--white); margin: 0 0 10px; }
.blurb p { font-size: 18px; line-height: 1.32; font-weight: 300; margin: 0; }

/* ==========================================================================
   IMAGE GALLERY — 4x2, clip variant B
   ========================================================================== */
.gallery { padding: 66px 0; }
.gallery .row { padding: 2px 0; }        /* measured: this row is 2px, not 33px */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 73.33px;                          /* 4x279 + 3x73.33 = 1336 */
  margin-top: 50px;
}
.gallery-grid a { display: block; line-height: 0; }
.gallery-grid img {
  width: 100%;
  aspect-ratio: 279 / 198;
  object-fit: cover;
  display: block;
  clip-path: polygon(0 15%, 10% 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
}

/* ==========================================================================
   WHY CHOOSE US — photo is the section background, copy right on #f0f0f0
   ========================================================================== */
.why {
  background: var(--tint) url('../img/why-choose-us.jpg') left center/cover no-repeat;
}
.why .row { display: flex; gap: 5.5%; padding: var(--rowpad) 0 0; }
.why-spacer { width: 36.68%; flex: none; }
.why-body { width: 57.78%; flex: none; padding: 15px 0; }
.why-body .copy { margin: 20px 0 36.73px; }
/* the original carries an empty <p> between the lead-in line and the list;
   reproduced as a 14px offset rather than an empty element */
.why-body .copy ul { margin-top: 14px; }
.why-body li { color: var(--ink); font-weight: 700; }
.why-body > p:last-child { margin: 20px 0 36.73px; }

/* ==========================================================================
   LOCATION AREA
   ========================================================================== */
/* The original composes this section by overlap: the state map hangs out of a
   1px-tall column and the address sits in an absolutely-positioned blue card
   over the map's corner. Coordinates below are measured section-relative and
   then expressed relative to the row (row starts 66px down, 292px in at 1920). */
.location { padding: 66px 0; }
.location .row { position: relative; padding: var(--rowpad) 0; }
.location-intro { width: 36.68%; }
.location-intro .copy p:last-child { padding-bottom: 0; }   /* measured 95, not 109 */
.location-map {
  position: absolute;
  left: 46.18%;                /* (909-292)/1336 */
  top: 24px;                   /* 90 - 66 */
  width: 57.78%;               /* 772/1336 */
  aspect-ratio: 772 / 259;
  height: auto;
  object-fit: contain;
}
.location-strip {
  display: block;
  width: 100%;
  aspect-ratio: 1336 / 559;
  height: auto;
  object-fit: contain;
  margin: 66px 0 36.73px;
}
.location-address {
  position: absolute;
  left: 61.08%;                /* (1108-292)/1336 */
  top: 239px;                  /* 305 - 66 */
  width: 19.84%;               /* 265/1336 */
  margin: 0;
  background: var(--blue);
  color: var(--white);
  font-size: 18px;
  line-height: 23.8px;
  /* Divi's blurb adds a 15px inner left pad, so the text wraps at 190px, not
     205 — that is what makes the address break onto three lines and the card
     measure 121px tall. */
  padding: 25px 30px 25px 45px;
  clip-path: polygon(0 35%, 10% 0, 100% 0, 100% 65%, 90% 100%, 0 100%);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  background: var(--tint) url('../img/contact-bg.jpg') center/cover no-repeat;
}
.why-photo, .contact-photo { display: none; }   /* mobile-only, see media query */
.location-strip-m { display: none; }            /* phone-only, see media query */

.contact .row { display: flex; gap: 5.5%; padding: var(--rowpad) 0; }
.contact-spacer { width: 36.68%; flex: none; }
.contact-body { width: 57.78%; flex: none; padding: 15px 0; }
/* this intro measures 24px on the original — a single line with no trailing
   padding, unlike the body copy elsewhere */
.contact-body .copy { margin: 20px 0 36.73px; }
.contact-body .copy p { padding-bottom: 0; }

.form-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 0; }
.field { flex: 1 1 calc(50% - 12px); min-width: 0; }
.field--wide { flex: 1 1 100%; }
.field label {
  display: block;
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 10px;
}
.field input, .field textarea {
  display: block;                  /* kills the inline baseline gap under textarea */
  width: 100%;
  background: var(--white);
  color: var(--ink);
  border: 1px solid #000000;
  border-radius: 0;
  padding: 16px;
  font-family: var(--text);
  font-size: 14px;                 /* matches the original's 52px-tall field */
  font-weight: 300;
  line-height: 1.4;
}
.field textarea { height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color: var(--red); }

.field-error {
  display: none;
  color: #a5161a;                  /* 5.55:1 on the #f0f0f0 band */
  font-size: 14px;
  font-weight: 500;
  margin-top: 6px;
}
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea { border-color: var(--red); border-width: 2px; }

.form-actions { margin-top: 10px; }   /* form measures 369 on the original */
.btn--submit { font-weight: 500; padding: 15px 50px; }

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

/* server-side failure message, revealed by site.js — never a window.alert */
.form-status {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: #fdecec;
  border-left: 4px solid var(--red);
  color: #8c1214;                  /* 6.4:1 on #fdecec */
  font-size: 14px;
  font-weight: 500;
}
.form-status[hidden] { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding: 33px 0; text-align: center; }
.site-footer p { color: var(--body); font-size: 14px; margin: 0; }

/* ==========================================================================
   Thank-you page
   ========================================================================== */
.thanks { padding: 120px 0 140px; text-align: center; }
.thanks .kicker {
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.thanks h1 { font-size: 56px; line-height: 1.1; color: var(--ink); margin: 0 0 26px; }
.thanks .copy { max-width: 860px; margin: 0 auto 40px; }
.thanks .mark { width: 47px; height: 50px; margin-bottom: 24px; }

/* ==========================================================================
   404
   ========================================================================== */
.err { padding: 120px 0 140px; text-align: center; }
.err h1 { font-size: 96px; line-height: 1; color: var(--ink); margin: 0 0 16px; }
.err h2 { font-size: 38px; text-transform: uppercase; color: var(--ink); margin: 0 0 24px; }
.err .copy { max-width: 700px; margin: 0 auto 40px; }

/* ==========================================================================
   Lightbox (progressive enhancement over plain image links)
   ========================================================================== */
.lb {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 15, 15, 0.92);
  display: none; align-items: center; justify-content: center; padding: 40px;
}
.lb[open], .lb.is-open { display: flex; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-close {
  position: absolute; top: 20px; right: 24px;
  width: 48px; height: 48px;
  background: none; border: 0; cursor: pointer;
  color: var(--white); font-size: 34px; line-height: 1;
}

/* ==========================================================================
   Responsive — Divi's real breakpoint is 980px. Verified against the original
   at 981 (blue desktop bar) and 980 (red mobile bar).
   ========================================================================== */
@media (max-width: 980px) {
  /* Measured on the original at 360: band is 15px + 63 + 15 = 93 tall, so the
     red bar starts at y93. Each row is a centred block — icon 20x20, 15px gap,
     16px/23.8 text, rows 15px apart. The desktop values (32px icons, 20px text,
     a 69px row) made the band 6px too tall and every element the wrong size. */
  .header-phone { margin-right: auto; }

  .header-bar { display: none; }
  /* 768-980: the bar goes red and gains a hamburger, but the phone/hours band
     keeps its DESKTOP sizing (32px icons, 20px text, 135 tall). Only below 767
     does the original shrink them. */
  .header-bar-mobile {
    height: 150px;
    margin-top: -21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--red);
    padding: 20px 15px;
  }
  .header-bar-mobile .logo img { width: 83px; height: 64px; display: block; }

  .nav-toggle {
    width: 45px; height: 45px;      /* measured; still clears the 44px target floor */
    margin-right: 6px;              /* the original sits 6px in from the bar's padding */
    background: none; border: 0; padding: 0;
    cursor: pointer; color: var(--white);
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    align-items: flex-end;
  }
  .nav-toggle span { display: block; width: 30px; height: 3px; background: currentColor; }

  .mobile-nav {
    display: none;
    background: var(--red);
    padding: 0 15px 20px;
  }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a {
    display: block;
    color: var(--white);
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* One column everywhere; 30px side gutters -> 300px inner at 360.
     These MUST be section-scoped. A bare `.row { padding-inline: 30px }` at
     (0,1,0) loses to the desktop `.features .row { padding: 33px 0 }` at
     (0,2,0), which shipped every mobile section full-bleed with no gutters. */
  .section .row,
  .features .row, .services .row, .why .row,
  .contact .row, .gallery .row, .hero .row, .location .row {
    padding: 0 30px;
    gap: 0;
  }
  .about .row--full { padding: 0; }

  /* measured: h1 module 208, lede 108 (18px), button 71, gaps 20 then 50 */
  .hero { margin-top: 0; padding: 225px 0 50px; }
  .hero .row { padding: 30px; }
  .hero h1 { font-size: 45px; line-height: 49.5px; padding: 0 0 10px; }
  .hero .lede { font-size: 18px; line-height: 23.8px; margin: 20px 0 30px; }
  .hero .btn { margin-top: 50px; }
  /* Buttons keep their desktop size on mobile — the original does not shrink
     them (measured 277x74 / 241x64 at 360, same as desktop). An earlier
     16px/20px-30px override made every button ~25% too small.
     The hero CTA is the one exception: it drops 24px -> 18px so the label
     stays on a single line (measured 283x71). */
  .btn--hero { font-size: 18px; }

  /* The original does NOT shrink its card type on mobile — headings stay at
     32/35/28px and card body at 18px. Only the h1 (96 -> 45) and the section
     headings change. Shrinking them was an unrequested redesign. */
  .card p, .blurb p { line-height: 21.6px; }

  /* cards stack, each 300 wide with 50/40 padding and a 30px gap.
     align-items must be stretch here — the desktop rule's flex-start makes a
     column-direction card size to its content (317px) and overflow the page. */
  /* the blueprint watermark IS painted at 360 on the original — an earlier note
     in geometry.md wrongly said it dropped out */
  .features { padding: 45px 0 50px; }
  .features .row { flex-direction: column; gap: 30px; align-items: stretch; }

  /* the team photo moves BELOW the copy on mobile */
  .about .row { flex-direction: column-reverse; }
  .about .about-media, .about .about-body { width: 100%; }
  .about .about-body { padding: 0 30px; }
  .about .about-media img { height: auto; }

  /* mobile order is: heading, copy, the four service cards, photo, button —
     the photo and CTA jump below the cards. display:contents lets the single
     column reorder without duplicating markup. */
  .services { padding: 50px 0 0; }
  .services .row { flex-direction: column; gap: 0; }
  .services-col { width: 100%; }
  .services-col:first-child { display: contents; }
  .services-col:first-child > .eyebrow { order: 1; }
  .services-col:first-child > .copy { order: 2; margin: 20px 0 30px; }
  .services-col:nth-child(2) { order: 3; }
  .services-col:first-child > .services-photo { order: 4; }
  .services-col:first-child > p:last-child { order: 5; margin: 20px 0 0; }
  .services-photo { width: 100%; height: auto; aspect-ratio: 631 / 473; margin: 30px 0; }
  /* the service cards stack on mobile: icon centred above the text, not beside it */
  .blurb {
    flex-direction: column;
    align-items: center;
    text-align: left;
    padding: 38px 40px;
    margin-bottom: 30px;
    gap: 20px;
  }
  .blurb > div { width: 100%; }
  .blurb p { line-height: 23.8px; }

  /* one column on mobile, not two */
  .gallery { padding: 50px 0; }
  .gallery-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 50px; }

  /* the original drops this one heading to 26px on mobile while every other
     section heading stays at 38px — reproduced, inconsistency and all */
  .why .h-section { font-size: 26px; line-height: 1; }
  .why .row { flex-direction: column; padding-inline: 0; }
  .why-spacer { display: none; }
  .why-body { width: 100%; padding: 0 30px; }
  .why-body .copy { margin: 20px 0 30px; }
  .why-body > p:last-child { margin: 20px 0 30px; }


  /* the desktop overlap composition unwinds into a plain stack */
  .location { padding: 50px 0; }
  .location .row { padding: 0 30px; }
  .location-intro { width: 100%; }
  /* measured mobile stack: copy 30, map 101 +30, address 210x145 +30,
     strip 126 +30 — module gaps are 30px, not the desktop 36.73 */
  .location-intro .copy { margin: 20px 0 30px; }
  .location-map {
    position: static; width: 100%; height: auto; margin: 0 0 30px;
  }
  /* the original splits this into two rows; the extra 30px above the strip is
     row 1's top padding */
  .location .row { padding-bottom: 30px; }
  .location-strip { width: 100%; height: auto; margin: 30px 0 0; }
  .location-address {
    /* keeps the 15px Divi inner pad, so the text wraps at 135px onto four
       lines and the card measures 145 tall, as the original does */
    position: static; width: 210px; margin: 0 45px 30px 0;
    padding: 25px 30px 25px 45px;
  }

  .contact .row { flex-direction: column; padding: 30px 0 0; }
  .contact-spacer { display: none; }
  .contact-body { width: 100%; padding: 15px 30px 0; }
  .contact-body .copy { margin: 20px 0 30px; }
  .field { flex: 1 1 100%; }
  /* 16px is the floor that stops iOS Safari zooming the page on focus */
  .field input, .field textarea { font-size: 16px; }

  .thanks { padding: 60px 0 70px; }
  .thanks h1 { font-size: 32px; }
  .err { padding: 60px 0 70px; }
  .err h1 { font-size: 64px; }
  .err h2 { font-size: 26px; }

  .site-footer .row { padding-inline: 36px; }
}

/* ==========================================================================
   Phone tier — the original's THIRD breakpoint, at 767. Between 768 and 980 it
   still uses desktop-sized header type and keeps its section background images;
   only below 767 do they shrink and drop. Collapsing these two tiers into one
   made every tablet width wrong.
   ========================================================================== */
@media (max-width: 767px) {
  .header-top { padding: 15px 0; }
  .header-top .row { height: auto; }
  .header-item {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 15px;
    gap: 15px;
    font-size: 16px;
    line-height: 23.8px;
  }
  .header-item:last-child { margin-bottom: 0; }
  .header-item img { width: 20px; height: 20px; }
  /* The phone link is only 24px tall here, under the touch-target floor (the
     original has the same flaw). Padding grows the hit area to 44px and the
     negative top margin pulls the layout back, so the band still measures 93.
     Longhand margins on purpose: a  shorthand in .header-item would
     silently reset them. */
  .header-phone { padding-block: 10px; margin-top: -10px; margin-bottom: 5px; }

  .header-bar-mobile { height: auto; margin-top: 0; }

  /* ---- David's mobile punch list, 2026-07-22. These override the original's
     mobile rendering on purpose — approved deviations, not drift. ---- */

  /* Hero: text brought up (225px -> 120px) and the forced <br> released so
     text-wrap:balance can set even, orphan-free lines. */
  .hero { padding: 120px 0 50px; }
  .hero h1 br { display: none; }
  .hero h1 { text-wrap: balance; }

  /* No orphan words: balance headings, and let paragraphs avoid single-word
     last lines. The eyebrow rule moves onto its own line so headings get the
     full column width instead of wrapping at 222px ("CONTACT / US"). */
  .h-section, .card h2, .blurb h3 { text-wrap: balance; }
  .copy p, .card p, .blurb p, .hero .lede { text-wrap: pretty; }
  .eyebrow { display: block; }
  .eyebrow img { display: block; margin: 0 0 12px; }

  /* Section rhythm: every section opens with the same 50px the SERVICES
     header has. CTA buttons centre and get real space below so each section
     flows into the next. */
  .about .row--full { padding: 50px 0 0; }
  .about-body > p:last-child { margin-bottom: 50px; text-align: center; }
  .services { padding: 50px 0; }
  .services-col:first-child > p:last-child { text-align: center; }
  .services-photo { margin: 30px 0; }
  .why-body > p:last-child { margin: 20px 0 40px; text-align: center; }
  .form-actions { margin: 10px 0 50px; text-align: center; }

  /* Photographs win over the design art. These are the ORIGINAL SITE'S own
     purpose-made mobile images (why-choose-us-mobile.png, the contact mobile
     SVG composition), shown at their full intrinsic aspect so nothing is
     sliced — the previous fixed-height cover crops cut them mid-photo. */
  .why { background-image: none; padding: 20px 0 0; }
  .contact { background-image: none; }
  .why-photo, .contact-photo {
    display: block;
    width: 100%;
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .why-photo { aspect-ratio: 948 / 787; background-image: url('../img/why-mobile.jpg'); }
  .contact-photo { aspect-ratio: 950 / 860; background-image: url('../img/contact-mobile.jpg'); }

  /* The two-photo strip composite reads as "one big, one small" at 360, so on
     phones it splits into its two photographs, stacked full width. */
  .location-strip { display: none; }
  .location-strip-m { display: block; margin: 0 0 30px; }
  .location-strip-m img { display: block; width: 100%; height: auto; }
  .location-strip-m img + img { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}