/* ============================================================
   MT Construction — heavy-timber · dusk-on-the-water · matter-of-fact
   Site-kit standard styles.css, adapted from snippets/styles-skeleton.css.
   Order is fixed: 1 tokens → 2 base → 3 utilities → 4 components (in the
   order they appear on system.html) → 5 page sections in page order.
   Every value a page uses comes from a token here. Direction: BUILD-BRIEF.md §3
   ("the design in B with the dark colors of C" — Ryan, 8/18/2026).
   Design rules that govern the numbers: ..\site-kit\6-DESIGN-RULES.md
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette — dark-first. Ground is bayou water at dusk; type is foam; the one
     accent is the half sun in his logo mark and it lives on the action only. */
  --water:      #14201F;   /* bayou at dusk — page ground */
  --water-soft: #1E2E2C;   /* second ground / alternate bands */
  --water-line: #2F4341;   /* hairlines and input borders on dark — decorative, never carries meaning */
  --foam:       #EEF1EC;   /* type on dark; the light band's ground; beams on dark */
  --foam-deep:  #DCE2DA;   /* light band second tone, secondary text on dark photos */
  --reed:       #A9B7A5;   /* soft text on dark — 8:1 on --water */
  --ink:        #16201F;   /* type on the light band */
  --ink-soft:   #4E5C58;   /* soft text on light — 6.2:1 on --foam */
  --sun:        #E9A23B;   /* the half sun — the ACTION only: buttons, focus ring, current nav */
  --sun-deep:   #8A5713;   /* hover / error text on light — 5.3:1 on --foam; also the primary button’s shadow line */
  --sun-pale:   #FBEBD3;   /* rare tint (form error ground) */
  --scrim:      20, 32, 31; /* rgb of --water, for photo overlays */

  /* Type — two families max (Google Fonts). Never repeat literal stacks in rules. */
  /* Titillium's squared bowls and even stroke are the closest match on Google Fonts
     to the logo's lettering, so the header reads as one hand (Ryan, 8/19/2026). */
  --display: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* Type scale — hand-picked; body 17-19px desktop, ≥ 16px phones. */
  --fs-sm:   0.9375rem;                                   /* 15px — captions, footer meta */
  --fs-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17-19px body */
  --fs-lg:   clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);     /* lead paragraphs */
  --fs-h3:   clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-h2:   clamp(1.85rem, 1.5rem + 1.7vw, 2.9rem);
  --fs-h1:   clamp(2.5rem, 1.9rem + 3.4vw, 4.4rem);
  --lh-body: 1.55;
  --lh-tight: 1.05;
  --measure: 62ch;

  /* Spacing scale */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section-y: clamp(var(--s-8), 8vw, var(--s-10));

  /* Shape, depth, layout — flat; depth by ground change, not shadow */
  --radius:    4px;
  --radius-sm: 2px;
  --shadow-1:  0 1px 2px rgba(0, 0, 0, .25);                              /* resting (raised on dark) */
  --shadow-2:  0 6px 18px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3); /* raised */
  --container: 1160px;
  --gutter:    24px;
  --edge:      clamp(24px, 3vw, 56px);  /* header bar only — it spans the page, not the column */
  --header-h:  76px;
  --beam:      14px;       /* the beam thickness — section headers, bay frames */
  --post:      22px;       /* post height under the beam */
}
/* --pitch (hero gable) removed 8/19/2026 — Ryan cut the roof pitch off the hero;
   the photo now runs to a straight bottom edge on every page. */

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--water);
  color: var(--foam);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 0.45em;
  color: inherit;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.005em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--sun); }
.on-light a:hover { color: var(--sun-deep); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: var(--radius-sm); }
.section--light :focus-visible, .on-light :focus-visible { outline-color: var(--sun-deep); }  /* 5.3:1 on --foam */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sun); color: var(--ink);
  padding: 0.6em 1.2em; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }
strong { font-weight: 700; }
blockquote { margin: 0; }
cite { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--water-line); margin: var(--s-6) 0; }

/* ---------- 3. Utilities ---------- */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--narrow { max-width: 780px; }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--soft { background: var(--water-soft); }
.section--light, .on-light { background: var(--foam); color: var(--ink); }
.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--reed); margin: 0 0 var(--s-2);
}
.on-light .eyebrow, .section--light .eyebrow { color: var(--ink-soft); }
.lead { font-size: var(--fs-lg); }
.muted { color: var(--reed); }
.on-light .muted, .section--light .muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flag { color: var(--reed); font-size: var(--fs-sm); }              /* [U] marker on pitch sites */
.on-light .flag { color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.stack > * + * { margin-top: var(--s-4); }
.list-plain { list-style: none; padding: 0; margin: 0; }

/* ---------- 4. Components — same order as system.html ---------- */

/* ---------- Header / nav ---------- */
.site-header { background: var(--water); border-bottom: 1px solid var(--water-line); position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--foam); }
.brand:hover { color: var(--foam); }
.brand__mark { display: block; flex: none; width: 180px; height: 52px; }

/* ---------- Brand: owner's full logo, recolored to the palette, and it
   builds itself on load — slab, post, gable, beams, window, then the name. */
.brand__mark .lm-ground, .brand__mark .lm-gable, .brand__mark .lm-beam1,
.brand__mark .lm-beam2, .brand__mark .lm-word { fill: currentColor; }
.brand__mark .lm-post { fill: var(--reed); }
.brand__mark .lm-pane { fill: var(--sun); }
.brand__mark [class^="lm-"] { transform-box: fill-box; }
.lm-ground { transform: scaleX(0); transform-origin: left center;
  animation: lm-grow-x .6s cubic-bezier(.25,.7,.3,1) .15s forwards; }
.lm-post { transform: scaleY(0); transform-origin: center bottom;
  animation: lm-grow-y .4s cubic-bezier(.25,.7,.3,1) .6s forwards; }
.lm-gable { opacity: 0; transform: translateY(-60px);
  animation: lm-set .45s cubic-bezier(.2,.8,.35,1.1) .9s forwards; }
.lm-beam1 { opacity: 0; transform: translate(-48px,-48px);
  animation: lm-set .4s cubic-bezier(.2,.8,.35,1.1) 1.2s forwards; }
.lm-beam2 { opacity: 0; transform: translate(-48px,-48px);
  animation: lm-set .4s cubic-bezier(.2,.8,.35,1.1) 1.35s forwards; }
.lm-pane { opacity: 0; transform: scale(0); transform-origin: center;
  animation: lm-pop .3s cubic-bezier(.3,1.4,.5,1) forwards; }
.lm-pane:nth-child(1) { animation-delay: 1.5s; }
.lm-pane:nth-child(2) { animation-delay: 1.58s; }
.lm-pane:nth-child(3) { animation-delay: 1.66s; }
.lm-pane:nth-child(4) { animation-delay: 1.74s; }
.lm-letter { opacity: 0; transform: translateY(26px);
  animation: lm-set .4s cubic-bezier(.2,.8,.35,1) var(--d) forwards; }
@keyframes lm-grow-x { to { transform: scaleX(1); } }
@keyframes lm-grow-y { to { transform: scaleY(1); } }
@keyframes lm-set { to { opacity: 1; transform: translate(0,0); } }
@keyframes lm-pop { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .lm-ground, .lm-post, .lm-gable, .lm-beam1, .lm-beam2, .lm-pane, .lm-letter { animation: none; opacity: 1; transform: none; }
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); font-weight: 600; white-space: nowrap; }
.nav a { text-decoration: none; padding: 6px 0; }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sun); }
.nav .btn { padding: 0.55em 1em; min-height: 42px; font-size: 1.05rem; }
.nav .btn--tel { margin-left: var(--s-4); }      /* call + estimate read as one pair, set apart from the links (L3) */
.site-header .btn--tel-bar { display: none; }    /* the bar pill only exists once the nav collapses */
/* Wide desktop: the bar is chrome, not content, so it spans the page instead of
   the 1160 column — logo on the left edge, the call/estimate pair on the right,
   links riding the middle (Ryan, 8/19/2026). The two auto margins split the slack
   in half, so the links keep equal air to the logo and to the buttons at every
   width and can never collide with either. Below 1161px the column already fills
   the screen, so nothing here changes. */
@media (min-width: 1161px) {
  .site-header .wrap { max-width: none; padding-left: var(--edge); padding-right: var(--edge); }
  .nav { margin-left: 0; flex: 1 1 auto; }
  .nav > a:first-child { margin-left: auto; }   /* air before the links… */
  .nav .btn--tel { margin-left: auto; }         /* …and the same after, so the pair holds the right edge (L3) */
}
.menu-btn {
  display: none; background: none; color: var(--foam); border: 2px solid var(--foam);
  border-radius: var(--radius); padding: 8px 12px; min-height: 44px;
  font: 600 1rem var(--body); cursor: pointer;
}
@media (max-width: 1340px) {
  .nav { gap: var(--s-4); }
  .nav .btn { font-size: 0.98rem; padding: 0.5em 0.85em; }
}
@media (max-width: 1140px) {
  .nav .btn--tel span { display: none; }   /* icon-only phone pill until the hamburger takes over (aria-label carries the name) */
  .nav .btn--tel { padding: 0.5em 0.75em; }
}
@media (max-width: 1000px) {
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--water); border-bottom: 1px solid var(--water-line); box-shadow: var(--shadow-2);
    flex-direction: column; align-items: stretch; padding: var(--s-3) var(--gutter) var(--s-5); gap: 0;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--water-line); }
  .nav a[aria-current="page"] { box-shadow: none; border-bottom: 3px solid var(--sun); }
  .nav .btn { margin-top: var(--s-4); border-bottom: 0; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav .btn--tel { display: none; }                /* one phone per viewport */
  .site-header .btn--tel-bar { display: inline-flex; margin-left: auto; padding: 0.5em 0.75em; }
}
@media (max-width: 640px) {
  .site-header .wrap { gap: var(--s-3); }
}
@media (max-width: 480px) {
  .site-header .wrap { gap: var(--s-2); }
  .brand__mark { width: 150px; height: 44px; }
  .menu-btn { padding: 8px 10px; }
}
@media (max-width: 340px) {
  .brand__mark { width: 128px; height: 37px; }
  .site-header .wrap { gap: var(--s-1); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.8em 1.4em;
  font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  border-radius: var(--radius); border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary   { background: var(--sun); color: var(--ink); box-shadow: 0 2px 0 var(--sun-deep); }
.btn--primary:hover { background: #F0B455; color: var(--ink); }
.btn--secondary { background: transparent; color: inherit; border-color: currentColor; }
.btn--secondary:hover { background: var(--foam); color: var(--ink); border-color: var(--foam); }
.on-light .btn--secondary:hover, .section--light .btn--secondary:hover { background: var(--ink); color: var(--foam); border-color: var(--ink); }
.btn--tertiary  { background: transparent; color: inherit; padding-left: 0; padding-right: 0; min-height: 0; text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.btn--tertiary:hover { color: var(--sun); }
.on-light .btn--tertiary:hover { color: var(--sun-deep); }
/* Header call pill: the solid half of the top-right pair. Foam, not the accent —
   the accent stays the one primary action per screen (L4, K4). */
.btn--tel {
  background: var(--foam); color: var(--ink); border-color: var(--foam);
  min-height: 44px; padding: 0.5em 1em; font-size: 1.15rem; white-space: nowrap;
}
.btn--tel:hover { background: var(--foam-deep); color: var(--ink); border-color: var(--foam-deep); }
.btn--tel svg { width: 18px; height: 18px; flex: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ---------- Hero (photo, straight bottom edge — the gable cut came off 8/19) ---------- */
.hero { position: relative; color: var(--foam); background: var(--water); overflow: hidden; }
.hero__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(var(--scrim), .74) 0%, rgba(var(--scrim), .38) 50%, rgba(var(--scrim), .1) 100%),
    linear-gradient(180deg, rgba(var(--scrim), 0) 30%, rgba(var(--scrim), .82) 100%);
}
.hero .wrap {
  position: relative; z-index: 2;
  min-height: min(76vh, 740px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: var(--s-9); padding-bottom: var(--s-8);
}
.hero h1 { max-width: 16ch; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* the turn in the line: heavy roman, then the same face spoken lighter and italic
   (italic only, never bold-italic — 6-DESIGN-RULES F8) */
.hero h1 em { font-style: italic; font-weight: 400; letter-spacing: 0; }
.hero .lead { max-width: 46ch; color: var(--foam-deep); margin-bottom: var(--s-5); }
/* the gable notch (.hero::after) and the foam ridge line that rode on it came off
   8/19/2026 (Ryan) — the photo now meets the next section on a straight edge */
.hero--page .wrap { min-height: min(52vh, 520px); padding-top: var(--s-8); }
.hero--page h1 { max-width: 18ch; }

/* ---- Home hero intro: the drawing goes up, then the built thing scans in.
   Ryan's AI-cleaned "before" photo (same framing, no pavilion) sits under a
   graph-paper grid; the pavilion's structural lines snap on in white, in
   build order, bottom to top, and hold; then the real photo scans in from
   the bottom and the same edge wipes the drawing away; headline, lead and
   buttons arrive last, as one block. Plays on every load, refresh included (Ryan, 8/19).
   Reduced motion: the plain photo. Ryan, 8/19/2026.
   Timeline (s): 0-.4 yard · .25-2.1 lines · 2.2-3.5 a straight edge rises, revealing the photo (no beat
   between — a pause read as a bug, Ryan 8/19) · 2.6-3.3 the type block (headline, lead,
   buttons) rises as one, carried by the sweep — it starts under the tail of the photo
   reveal rather than waiting for it, and there is no internal stagger: the buttons sit
   below the type, so lagging them fought the upward motion (Ryan, 8/19). */
.hero--intro { isolation: isolate; --pencil: var(--foam); }
.hero--intro .hero__img { object-position: center 50%;  /* the line overlay slices xMidYMid — keep the crop centred so it registers */
  clip-path: polygon(0 100%, 100% 100%, 100% 300%, 0 300%);
  animation: hero-rise 1.3s cubic-bezier(.5,.05,.35,1) 2.2s forwards; }
.hero--intro::before { clip-path: polygon(0 100%, 100% 100%, 100% 300%, 0 300%);
  animation: hero-rise 1.3s cubic-bezier(.5,.05,.35,1) 2.2s forwards; }
/* the reveal edge is a straight horizontal wipe rising through the drawing with the
   foam line riding on it (was the site's gable pitch until Ryan cut it, 8/19) */
@keyframes hero-rise { to { clip-path: polygon(0 0, 100% 0, 100% 300%, 0 300%); } }
@keyframes hero-rise-lines { to { clip-path: polygon(0 -200%, 100% -200%, 100% 0, 0 0); } }
.hero__sweep { position: absolute; left: 0; right: 0; top: 100%; height: 8%; z-index: 3; pointer-events: none;
  animation: hero-sweep 1.3s cubic-bezier(.5,.05,.35,1) 2.2s forwards; }
.hero__sweep svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes hero-sweep { to { transform: translateY(-1350%); } }
@keyframes hero-in { to { opacity: 1; } }
@keyframes hero-set { to { opacity: var(--o, 1); } }
.hero__before { position: absolute; inset: 0; z-index: -1; opacity: 0; animation: hero-in .4s ease 0s forwards; }
.hero__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%;
  filter: saturate(.9) brightness(.82) contrast(.95); }
.hero__before::after { content: ""; position: absolute; inset: 0;  /* the graph paper */
  background-image: linear-gradient(rgba(238,241,236,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(238,241,236,.22) 1px, transparent 1px);
  background-size: 48px 48px; }
.hero__lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; color: var(--pencil);
  filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
  clip-path: polygon(0 -200%, 100% -200%, 100% 100%, 0 100%);
  animation: hero-rise-lines 1.3s cubic-bezier(.5,.05,.35,1) 2.2s forwards; }
.hero__lines line, .hero__lines polyline { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; opacity: 0; animation: hero-set .12s ease-out var(--d, .3s) forwards; }
.hero__lines .faint { stroke-width: 1.4; --o: .7; }
.hero__lines .hidden { stroke-width: 1.4; stroke-dasharray: 10 7; --o: .8; }
.hero__lines .centre { stroke-width: 1.1; stroke-dasharray: 26 7 4 7; --o: .75; }
.hero__lines .hatch, .hero__lines .hatch * { stroke-width: 1; --o: .6; }
.hero--intro .wrap { opacity: 0; transform: translateY(14px); animation: hero-up .7s cubic-bezier(.2,.7,.3,1) 2.6s forwards; }
@keyframes hero-up { to { opacity: 1; transform: translateY(0); } }
/* reduced motion: the finished hero, no sheet */
@media (prefers-reduced-motion: reduce) {
  .hero__before, .hero__lines, .hero__sweep { display: none; }
  .hero--intro .hero__img, .hero--intro::before { clip-path: none; }
  .hero--intro .wrap, .hero--intro .actions { opacity: 1; transform: none; }
}
@media (max-width: 820px) {
  .hero .wrap { min-height: min(80vh, 640px); padding-top: var(--s-8); }
  .hero--page .wrap { min-height: min(56vh, 460px); }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(var(--scrim), .55) 0%, rgba(var(--scrim), .25) 100%),
      linear-gradient(180deg, rgba(var(--scrim), .1) 0%, rgba(var(--scrim), .9) 100%);
  }
}

/* ---------- Section header (signature: post and beam) ---------- */
.beam { position: relative; padding-top: calc(var(--beam) + 12px); margin-bottom: var(--s-6); }
.beam::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--beam); background: var(--foam); }
.beam::after  { content: ""; position: absolute; left: 18px; top: var(--beam); width: var(--beam); height: var(--post); background: var(--foam); }
.beam__post   { position: absolute; right: 18px; top: var(--beam); width: var(--beam); height: var(--post); background: var(--foam); }
.beam .eyebrow, .beam h1, .beam h2 { padding-left: 0; text-align: center; }
.beam .eyebrow { margin-left: auto; margin-right: auto; }
.beam h2, .beam h1 { margin-bottom: 0; }
.beam .lead { padding-left: 0; margin-top: var(--s-3); text-align: center; margin-left: auto; margin-right: auto; }
.on-light .beam::before, .on-light .beam::after, .on-light .beam__post,
.section--light .beam::before, .section--light .beam::after, .section--light .beam__post { background: var(--water); }

/* ---------- Bays — the services grid framed as three timber bays ---------- */
.bays { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--beam) solid var(--foam); }
.bay { position: relative; padding: 0 var(--s-5) var(--s-6); border-left: var(--beam) solid var(--foam); min-width: 0; }
.bay:last-child { border-right: var(--beam) solid var(--foam); }
.bay__img { margin: 0 calc(-1 * var(--s-5)) var(--s-5); aspect-ratio: 4 / 3; overflow: hidden; background: var(--water-soft); }
.bay__img img { width: 100%; height: 100%; object-fit: cover; }
.bay h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 700; margin-bottom: var(--s-2); }
.bay p { font-size: 1rem; color: var(--reed); }
.bay ul { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-5); font-size: 1rem; }
.bay li { padding: 6px 0; border-top: 1px solid var(--water-line); }
.bay li:last-child { border-bottom: 1px solid var(--water-line); }
@media (max-width: 900px) {
  .bay ul { columns: 2; column-gap: var(--s-5); }
  .bay li { break-inside: avoid; }
  .bays { grid-template-columns: 1fr; border-top: 0; }
  .bay { border-left: 0; border-top: var(--beam) solid var(--foam); padding-left: 0; padding-right: 0; }
  .bay:last-child { border-right: 0; }
  .bay__img { margin-left: 0; margin-right: 0; }
}

/* ---------- Split — text + image, image offset ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8) var(--s-8); align-items: center; }
.split--img-first > figure { order: -1; }
.split figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split figure.tall img { aspect-ratio: 4 / 5; }
.split figcaption { font-size: var(--fs-sm); color: var(--reed); margin-top: var(--s-2); }
.on-light .split figcaption, .section--light .split figcaption { color: var(--ink-soft); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } .split--img-first > figure { order: 0; } }

/* ---------- Detail lists (specs) + FAQ ---------- */
.specs { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--s-6); }
.specs li { break-inside: avoid; padding: 8px 0; border-top: 1px solid var(--water-line); }
.on-light .specs li, .section--light .specs li { border-color: var(--foam-deep); }
@media (max-width: 640px) { .specs { columns: 1; } }
.faq details { border-top: 1px solid var(--water-line); }
.faq details:last-child { border-bottom: 1px solid var(--water-line); }
.on-light .faq details, .section--light .faq details { border-color: #C9D2C7; }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4) 0; padding-right: 2.5rem; position: relative;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px;
  border-right: 3px solid var(--sun); border-bottom: 3px solid var(--sun);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 var(--s-5); }
.faq details > div p { max-width: var(--measure); }

/* ---------- Review / trust ---------- */
.quote { border-left: 6px solid var(--foam-deep); padding: var(--s-2) 0 var(--s-2) var(--s-5); max-width: 40ch; }
.quote p { font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.3; font-weight: 400; margin: 0 0 var(--s-3); max-width: none; }
.quote cite { font-size: var(--fs-sm); color: var(--reed); display: block; }
.on-light .quote, .section--light .quote { border-left-color: var(--water); }
.on-light .quote cite, .section--light .quote cite { color: var(--ink-soft); }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-7) var(--s-8); }
.quotes .quote { max-width: none; }
.proof { border-top: 1px solid var(--water-line); border-bottom: 1px solid var(--water-line); background: var(--water); }
.proof .wrap { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-8); padding-top: var(--s-4); padding-bottom: var(--s-4); font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
@media (min-width: 900px) { .proof .wrap { justify-content: space-between; } }
.proof b { color: var(--foam); font-weight: 700; }
.proof small { font-family: var(--body); font-weight: 400; font-size: var(--fs-sm); color: var(--reed); }

/* ---------- Forms ---------- */
.form { max-width: 560px; }
.form-row { margin-bottom: var(--s-5); }
.form-row label { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.form-row .hint { display: block; font-size: var(--fs-sm); color: var(--reed); margin-top: var(--s-1); }
.on-light .form-row .hint, .section--light .form-row .hint { color: var(--ink-soft); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; font: inherit; font-size: max(1rem, var(--fs-base));
  color: var(--ink); background: var(--foam); border: 2px solid var(--water-line);
  border-radius: var(--radius); padding: 0.7em 0.9em; min-height: 48px;
}
.form-row textarea { min-height: 8em; resize: vertical; }
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.form-row.is-error input, .form-row.is-error textarea, .form-row.is-error select { border-color: var(--sun-deep); background: var(--sun-pale); }
.form-row .error { display: block; color: var(--sun); font-weight: 600; font-size: var(--fs-sm); margin-top: var(--s-2); }
.on-light .form-row .error, .section--light .form-row .error { color: var(--sun-deep); }
.form .actions { margin-top: var(--s-5); }

/* ---------- CTA band ---------- */
.cta { background: var(--water-soft); }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--s-6) var(--s-8); align-items: center; padding-top: var(--section-y); padding-bottom: var(--section-y); }
.cta .beam { margin-bottom: var(--s-4); }
.cta__actions { display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; }
.cta__meta { font-size: var(--fs-sm); color: var(--reed); margin-top: var(--s-4); }
@media (max-width: 820px) { .cta .wrap { grid-template-columns: 1fr; } }

/* ---------- Media / image treatment ---------- */
.frame { overflow: hidden; background: var(--water-soft); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--4x3 { aspect-ratio: 4 / 3; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame--placeholder { display: grid; place-items: center; border: 2px dashed var(--water-line); color: var(--reed); font-size: var(--fs-sm); text-align: center; padding: var(--s-4); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr 1fr; gap: var(--s-3); } .gallery figcaption { font-size: 0.8125rem; } }
.gallery figure { margin: 0; }
.gallery .frame { aspect-ratio: 4 / 3; }
.gallery figcaption { font-size: var(--fs-sm); color: var(--reed); padding: var(--s-2) 0 0; }
.gallery a { display: block; }
.gallery a:focus-visible { outline-offset: 4px; }
/* ---------- Free design set piece — the owner's own phone composite ----------
   The frames are pale pink with white screens, so the section rides the soft dark
   ground (--water-soft) to give them something to sit on. Native res only. */
.design__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.design .quote { margin: var(--s-6) 0; }
.design .btn { margin-top: var(--s-5); }
.design__phones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); max-width: 560px; margin-left: auto; margin-right: auto; }
.design__phones img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
.design__phones .phone--landscape { grid-column: 1 / -1; }
.design__phones figcaption { font-size: var(--fs-sm); color: var(--reed); margin-top: var(--s-2); text-align: center; }
@media (min-width: 900px) {
  .design__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
  .design__phones { max-width: none; }
}

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.pair-wrap { min-width: 0; }
.pair figcaption { font-size: var(--fs-sm); color: var(--reed); margin-top: var(--s-2); }
.on-light .pair figcaption, .section--light .pair figcaption { color: var(--ink-soft); }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } }
.empty { border: 1px solid var(--water-line); padding: var(--s-5); color: var(--reed); font-size: var(--fs-sm); max-width: 48ch; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--water-line); background: var(--water); color: var(--reed); font-size: var(--fs-sm); }
.site-footer .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-6) var(--s-8); padding-top: var(--s-7); padding-bottom: var(--s-6); }
.site-footer h2 { font-size: 1.1rem; font-weight: 700; color: var(--foam); margin-bottom: var(--s-3); }
.site-footer a { color: var(--foam); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 0; }
.site-footer li a { display: inline-block; padding: 8px 0; }
.site-footer li:not(:has(a)) { padding: 6px 0; }
.site-footer address { font-style: normal; }
.site-footer .credit { grid-column: 1 / -1; border-top: 1px solid var(--water-line); padding-top: var(--s-4); margin: 0; font-size: 0.8125rem; }
.site-footer .credit a { color: var(--reed); }

/* ---------- 5. Page sections, in page order ---------- */

/* ---------- Home: what we build ---------- */
.lines .beam { margin-bottom: var(--s-7); }

/* ---------- Home: towns ---------- */
.towns { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-6); font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
/* No middots: centred and wrapping, a leading separator lands at the start of every
   new line and reads as a stray mark. The gap does the separating (Ryan, 8/19/2026). */

/* ---------- Service pages: line blocks ---------- */
.line + .line { margin-top: var(--s-9); }
.line h2 { margin-bottom: var(--s-3); }

/* ---------- Projects ---------- */
.gallery-group + .gallery-group { margin-top: var(--s-9); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: var(--s-3) 0; border-top: 1px solid var(--water-line); }
.contact-list li:last-child { border-bottom: 1px solid var(--water-line); }
.contact-list a { display: inline-block; padding: 6px 0; }
.contact-list b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--reed); font-weight: 600; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Not found / thank you ---------- */
.plain-page .wrap { padding-top: var(--s-9); padding-bottom: var(--s-9); }

/* ---------- Motion ---------- */
@media (scripting: enabled) {
  [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .45s ease-out, transform .45s ease-out; }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* Beam headers raise as they scroll in: the beam settles up into place,
     then its two posts extend down from it. Done in .5s — quiet, not a show.
     The generic reveal above is overridden so the text never blinks. */
  [data-reveal="beam"] { opacity: 1; transform: none; transition: none; }
  [data-reveal="beam"]::before { opacity: 0; transform: translateY(12px); transition: transform .35s ease-out, opacity .35s ease-out; }
  [data-reveal="beam"]::after, [data-reveal="beam"] .beam__post { transform: scaleY(0); transform-origin: top; transition: transform .3s ease-out .15s; }
  [data-reveal="beam"].is-in::before { opacity: 1; transform: none; }
  [data-reveal="beam"].is-in::after, [data-reveal="beam"].is-in .beam__post { transform: none; }

  /* The three phones arrive one after the other, left to right then the wide one. */
  .design__phones .phone:nth-child(2) { transition-delay: .12s; }
  .design__phones .phone:nth-child(3) { transition-delay: .24s; }

  /* The bays' top plate is part of the frame, not the page, so it waits for the
     first bay instead of hanging there as a bare white bar over an empty box
     (Ryan, 8/19/2026). Phones never had this — there each bay carries its own
     plate and it fades with the bay. */
  .bays { border-top-color: transparent; transition: border-top-color .4s ease-out; }
  .bays:has(.bay.is-in) { border-top-color: var(--foam); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}