/* ============================================================
   50-aesthetic-overhaul.css — 2026 "perfect site" refinement

   The brief: aesthetic overhaul only. No HTML structure changes,
   no logo changes, no copy rewrites. Brand identity intact —
   navy + gold + green palette, Inter font, pill buttons.

   What this file does:
   - Refines colour TONES (slight shifts toward warmer / deeper)
   - Confidently scales up display type (premium sites lean BIG)
   - Generous spacing rhythm (more whitespace around modules)
   - Layered, perceptual shadows (3-4 layers per shadow level)
   - Larger card radii (2026 leans 18-24px on cards)
   - Tighter, optical-size-aware tracking on display text
   - More premium body type (line-height 1.7, ss01 stylistic set)
   - Refined card design (warm bg, layered depth, generous padding)
   - Refined button design (bigger padding, better hover lift)
   - Refined section heads (eyebrow + h2 + lead rhythm)
   - Subtle paper-grain texture in the body background

   Loaded LAST (after every other module) so it gets to win
   specificity battles. Every override uses `:root` for vars or
   specific selectors at the same depth as the original rule, so
   nothing depends on `!important`.

   This module is the single source of truth for the 2026 visual
   direction. Tune values here, not across 30 modules.
   ============================================================ */

/* ============================================================
   1. REFINED COLOUR TOKENS
   Subtle shifts toward warmth and depth. Brand recognisable.
   ============================================================ */
:root {
  /* Ink — slightly deeper than the original #1a1a1a so display
     type punches harder on the warm bone-white background */
  --c-ink:        #0d0e12;
  --c-ink-soft:   #262830;

  /* Navy — shifted from #1e3a5f → #112c4e. Deeper, more confident
     in large fills (bento feature card, hero gradient). Reads as
     "navy blazer" rather than "dark denim". */
  --c-blue:       #112c4e;
  --c-blue-dark:  #0a1e38;
  --c-blue-light: #2e6091;

  /* Green — slightly less olive, slightly more crafted */
  --c-green:      #226148;
  --c-green-dark: #143a29;

  /* Yellow — shifted from #f9c74f → #fbbf24 (Tailwind amber-400).
     Slightly warmer, slightly more saturated. On the navy bento card
     the old yellow read as muddy gold; the new amber reads as
     intentional premium accent. */
  --c-yellow:      #fbbf24;
  --c-yellow-dark: #d97706;
  --c-gold:        #b88419;     /* deep heritage gold for accents on light bg */

  /* Backgrounds — warm bone-white. Reads as paper, not digital chrome.
     Card stays slightly richer-warm so it differentiates from bg without
     a cool/warm clash. */
  --c-bg:    #f7f5ef;
  --c-card:  #f0ede5;
  --c-line:  #dcd5c8;

  /* Muted text — slightly warmer */
  --c-muted: #5a5e68;

  /* Backwards-compat — anything still using --c-amber gets the refined navy */
  --c-amber:      var(--c-blue);
  --c-amber-dark: var(--c-blue-dark);
  --c-timber:     var(--c-blue);

  /* ============================================================
     2. EXPANDED SPACING SCALE
     Premium sites lean generous. Adding s-10 / s-11 / s-12 for
     hero + major module gaps so we don't keep stretching s-9.
     ============================================================ */
  --s-10: 144px;
  --s-11: 192px;
  --s-12: 240px;

  /* ============================================================
     3. EXPANDED RADIUS SCALE
     2026 leans larger on cards. Keeping pills as 999px for CTAs.
     ============================================================ */
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-3xl: 40px;

  /* ============================================================
     4. LAYERED SHADOW SYSTEM
     Each shadow level gets 3-4 layers — close + mid + far — so
     depth reads perceptually correct rather than blob-and-done.
     Colour stays in the navy family (not pure black) for warmth.
     ============================================================ */
  --shadow-sm:
    0 1px 1px rgba(13, 18, 30, 0.04),
    0 1px 2px rgba(13, 18, 30, 0.04);
  --shadow-md:
    0 1px 2px rgba(13, 18, 30, 0.04),
    0 4px 8px rgba(13, 18, 30, 0.06),
    0 8px 16px rgba(13, 18, 30, 0.04);
  --shadow-lg:
    0 1px 2px rgba(13, 18, 30, 0.04),
    0 6px 12px rgba(13, 18, 30, 0.07),
    0 18px 32px rgba(13, 18, 30, 0.10),
    0 30px 56px rgba(13, 18, 30, 0.06);
  --shadow-xl:
    0 2px 4px rgba(13, 18, 30, 0.05),
    0 12px 24px rgba(13, 18, 30, 0.10),
    0 28px 56px rgba(13, 18, 30, 0.12),
    0 48px 96px rgba(13, 18, 30, 0.08);

  /* Coloured halo for premium feature cards (replaces flat coloured shadow) */
  --shadow-gold:
    0 0 0 1px color-mix(in srgb, var(--c-yellow) 30%, transparent),
    0 4px 12px color-mix(in srgb, var(--c-yellow-dark) 25%, transparent),
    0 12px 28px color-mix(in srgb, var(--c-yellow) 15%, transparent);
}

/* ============================================================
   5. BACKGROUND TEXTURE — paper grain
   A barely-perceptible noise overlay on the body background.
   Adds tactile depth to the warm bone-white. Threshold tuned
   so it reads as "this site has texture" not "look, I added
   noise." Single SVG data URI, no extra HTTP cost.
   ============================================================ */
body {
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

/* ============================================================
   6. CONFIDENT DISPLAY TYPE
   Bigger H1 ceiling. Tighter tracking. Aggressive weight axis.
   Inter is variable so we use opsz + wght together for the
   most polished render at large sizes.
   ============================================================ */
/* Inter's variable wght axis goes up to 950 — "Black Plus". At display
   sizes, the extra weight + tighter tracking reads as premium editorial
   rather than tech-startup-bold. The opsz axis is set per element so
   Inter optimises shape for the actual rendered size. */
h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  font-variation-settings: "wght" 950, "opsz" 48;
  line-height: 1.06;
  margin-bottom: var(--s-4);
}
h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  letter-spacing: -0.025em;
  font-variation-settings: "wght" 900, "opsz" 32;
  line-height: 1.1;
  margin-bottom: var(--s-3);
}
h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.018em;
  font-variation-settings: "wght" 820, "opsz" 24;
}

/* ============================================================
   7. PREMIUM BODY TYPE
   Line-height bumped 1.6 → 1.7 for editorial calm. Inter
   stylistic sets switched on (ss01 = rounder a/g, cv11 =
   crossless 4) so the alphabet reads friendlier. Both already
   set in 33-typography-premium.css — this raises them above
   that file's specificity by repeating at :root level.
   ============================================================ */
body {
  line-height: 1.7;
  font-feature-settings: "ss01" on, "cv01" on, "cv11" on, "calt" on, "kern" on;
  font-variation-settings: "wght" 420;
}
p, li {
  text-wrap: pretty;
}

/* Eyebrow — pill chip on light backgrounds. The 7% navy tint reads
   as "designed element" not "just coloured text". On dark surfaces
   (hero, footer, banner) the .bg-dark / .bg-timber overrides in
   01-layout.css still win, but we also pill those for consistency. */
.eyebrow,
.section-head .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--c-blue);
  background: rgba(17, 44, 78, 0.07);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: var(--s-4);
}
/* Dark sections need a high-contrast eyebrow chip — yellow text on
   a yellow-tinted background with a faint yellow ring.

   IMPORTANT: only apply to sections that are GENUINELY dark.
   #testimonials, #projects, #trust-row all use the warm-white page
   background, so yellow-on-yellow on them would be unreadable
   (Brandon flagged this on 2026-05-19 — "make it easier to read"
   on the testimonials eyebrow). Restricted to:
   - explicit .bg-dark / .bg-timber / .bg-ink utility classes
   - #availability (which 20-availability.css explicitly sets to
     var(--c-ink) — confirmed dark) */
.bg-dark .eyebrow,
.bg-timber .eyebrow,
.bg-ink .eyebrow,
#availability .eyebrow {
  background: color-mix(in srgb, var(--c-yellow) 22%, transparent);
  color: var(--c-yellow);
  border: 1px solid color-mix(in srgb, var(--c-yellow) 45%, transparent);
}

/* ============================================================
   8. SECTION SPACING + HEAD RHYTHM
   Modules breathe more. Section heads get a tighter
   eyebrow-to-h2 gap but more space below the lead paragraph.
   ============================================================ */
/* Section rhythm — 120px on desktop, --s-7 (64px) on mobile.
   The gap between chapters in a premium book vs a paperback. */
@media (min-width: 1024px) {
  section.module { padding: 120px 0; }
}
@media (max-width: 720px) {
  section.module { padding: var(--s-7) 0; }
}
.section-head {
  margin: 0 auto var(--s-7);
  max-width: 760px;
}
.section-head p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--c-muted);
}

/* ============================================================
   9. PREMIUM CARD DESIGN
   Bigger radii. Layered shadows. Warm-white background that
   sits just slightly off the page bg. Border softens. Hover
   lifts more confidently.
   ============================================================ */
/* Cards: replace the external border with an inset box-shadow ring
   (1px hairline of brand-tinted navy at 8% opacity). Reads as glass-
   edge rather than stuck-on frame. Combined with the layered drop
   shadow it gives proper perceptual depth. */
.svc-block,
.tst-card,
.pj-card,
.project-card,
.value-prop,
.trust-item,
.build-card,
.product-card,
.faq-item,
.page-card,
.fb-block {
  border-radius: var(--radius-xl);
  border: none;
  background-color: var(--c-white);
  box-shadow:
    inset 0 0 0 1px rgba(17, 44, 78, 0.08),
    var(--shadow-md);
  transition:
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Inset padding for cards that didn't originally have it ----
   .svc-block was a layout grid (no card before this overhaul). When
   it got card treatment above, the grid columns went edge-to-edge
   with the card border — text touched the left edge and buttons
   ran off the bottom. The padding here insets both the image and
   the body content. The other card classes (.tst-card, .pj-card,
   .value-prop, etc.) already have their own internal padding so
   they don't need this rule. */
.svc-block {
  padding: var(--s-5);
}
/* Tighter inset on mobile so the card doesn't waste vertical space */
@media (max-width: 720px) {
  .svc-block { padding: var(--s-4); }
}
@media (hover: hover) {
  .svc-block:hover,
  .tst-card:hover,
  .pj-card:hover,
  .project-card:hover,
  .value-prop:hover,
  .trust-item:hover,
  .build-card:hover,
  .product-card:hover,
  .page-card:hover {
    box-shadow:
      inset 0 0 0 1px rgba(17, 44, 78, 0.12),
      var(--shadow-lg);
  }
}

/* ============================================================
   10. REFINED BUTTONS
   More confident padding. Tracking tightens slightly. Hover
   lift increases from -1px to -2px for a more satisfying tap.
   Pill shape stays.
   ============================================================ */
.btn {
  padding: 16px 30px;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    filter 0.22s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--shadow-sm);
}
/* Primary CTA: shadow takes the green hue so it looks like light
   from the button itself, not a generic dark drop shadow. Same
   principle as a torch casting coloured light on the surface below. */
.btn-primary {
  background: var(--c-green);
  color: var(--c-white);
  box-shadow:
    0 2px 4px rgba(34, 97, 72, 0.18),
    0 8px 20px rgba(34, 97, 72, 0.22);
}
.btn-primary:hover {
  background: var(--c-green-dark);
  filter: brightness(1.05);
  box-shadow:
    0 4px 8px rgba(34, 97, 72, 0.24),
    0 14px 32px rgba(34, 97, 72, 0.30);
}
/* Yellow CTA: amber-tinted shadow */
.btn-yellow {
  box-shadow:
    0 2px 4px rgba(217, 119, 6, 0.18),
    0 8px 20px rgba(217, 119, 6, 0.20);
}
.btn-yellow:hover {
  box-shadow:
    0 4px 8px rgba(217, 119, 6, 0.22),
    0 14px 32px rgba(217, 119, 6, 0.28);
}
.btn-dark {
  background: var(--c-ink);
  color: var(--c-white);
}

/* ============================================================
   11. PHOTO TREATMENT
   Subtle warm tone wash + slight contrast lift so photos
   from different sources (Nathan's phone shots vs Unsplash)
   feel like they came from the same photographer.
   Applied only to content photos (not logos, not floor plans).
   ============================================================ */
.svc-image img,
.pj-card-image img,
.project-card img,
.hero-card img,
.about-photo img {
  filter:
    saturate(0.92)
    contrast(1.04)
    brightness(0.98);
  transition: filter 0.5s ease;
}
@media (hover: hover) {
  .svc-image:hover img,
  .pj-card:hover img,
  .project-card:hover img {
    filter:
      saturate(1.05)
      contrast(1.06)
      brightness(1.02);
  }
}

/* ============================================================
   12. THE BOLD MOVE — editorial hero + oversized stat display

   Two moves that together signal "this is a 2026 premium site":

   (a) Hero H1 goes to clamp(3rem, 7vw, 6rem) at weight 950 with
       tight -0.035em tracking. Becomes a statement, not a header.

   (b) The hero trust strip (Years · 2027 booking · Owner-built ·
       Licence · HBCF) gets oversized editorial numbers — 4.2rem
       gold figures with tight tracking, set on a strict 0.12em
       caps grid label beneath. Reads like the back cover of an
       architecture monograph, not a data row.
   ============================================================ */
.hero-copy h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: -0.035em;
  line-height: 1.0;
  font-variation-settings: "wght" 950, "opsz" 96;
  margin-bottom: var(--s-4);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-yellow) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--c-yellow) 50%, transparent);
  color: var(--c-yellow);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.hero-lead {
  font-size: 1.22rem;
  line-height: 1.6;
  max-width: 56ch;
}

/* THE EDITORIAL STAT STRIP — the big visual move.
   Numbers jump from 1.7rem to clamp(3rem, 5.5vw, 5.5rem) at
   weight 950 with -0.05em tracking, in gold. Labels under each
   stat get caps + 0.12em tracking + muted white at 0.65 opacity.

   White-space: nowrap on the strong keeps multi-character values
   like "10+" on one line (the data-bind span + the "+" text node
   were occasionally wrapping at narrow widths, making the "+"
   appear stacked below the "10").

   Any inner data-bind <span> inherits font-size cleanly so the
   number and its suffix render at the same weight + size. */
.hero-trust {
  gap: var(--s-6);
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-trust div strong {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-variation-settings: "wght" 950, "opsz" 96;
  letter-spacing: -0.05em;
  line-height: 0.92;
  display: block;
  white-space: nowrap;
  color: var(--c-yellow);
  margin-bottom: 6px;
}
/* Force inner <span data-bind> to inherit the parent strong's size
   cleanly so the dynamic number and its static suffix render as
   one continuous stat block. */
.hero-trust div strong > span,
.hero-trust div strong > span[data-bind] {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-variation-settings: inherit;
  color: inherit;
  display: inline;
  vertical-align: baseline;
}
.hero-trust div span {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  display: block;
}
@media (max-width: 720px) {
  .hero-trust { gap: var(--s-4); }
  .hero-trust div strong { font-size: 2.6rem; }
}

/* The bento trust-row first cell also has a big stat — size to
   match so "10+" in the hero AND "10+" in the bento feature card
   read as a consistent design language. */
#trust-row .trust-item:first-child strong {
  font-size: clamp(3.4rem, 6vw, 5.8rem);
  font-variation-settings: "wght" 950, "opsz" 96;
  letter-spacing: -0.05em;
  line-height: 0.92;
  white-space: nowrap;
}
#trust-row .trust-item:first-child strong > span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ============================================================
   13. FORM-FIELD REFINEMENT
   Inputs read as crafted, not generic. Borders soften. Focus
   ring is full brand gold with offset for keyboard accessibility.
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 18%, transparent);
}

/* ============================================================
   14. STATUS BANNER POLISH
   The "STATUS: Fully booked through 2026 and 2027" strip at
   the top of every page. Deeper navy bg + warmer gold dot,
   tighter type, more confident.
   ============================================================ */
.banner {
  background: var(--c-ink);
  color: var(--c-white);
}
.banner strong {
  color: var(--c-yellow);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ============================================================
   15. FOOTER REFINEMENT
   Deeper bg, warmer dividers, more breathing room.
   ============================================================ */
footer.site-footer {
  background: var(--c-blue-dark);
  padding-top: var(--s-9);
  padding-bottom: var(--s-7);
}
footer.site-footer a {
  transition: color 0.2s ease;
}
footer.site-footer a:hover {
  color: var(--c-yellow);
}

/* ============================================================
   16. CONTAINMENT + WRAP DEFENSE
   Two classic CSS bugs the overhaul has to defend against:

   (a) GRID BLOWOUT — when a grid cell contains text with
       hyphenated compound words ("deck-and-room", "line-for-line",
       "owner-operated"), the cell defaults to `min-width: auto`
       which refuses to shrink past the longest token, pushing
       sibling cells out. The fix is `min-width: 0` on every
       grid child that contains text.

   (b) ANY MODULE THAT ESCAPES — slideshow slides, marquee rows,
       gradient overlays. `overflow-x: clip` on the body is a
       defensive net so nothing can ever cause horizontal scroll.
       `clip` is preferred over `hidden` because it allows
       position: sticky inside the body to keep working.
   ============================================================ */
body {
  /* overflow-x: clip on `body` only (not `html, body` together).
     Safari treats `clip` on `html` differently from `body` and
     having both can defeat `position: sticky` containment in
     subtle ways. Caught by the production code review 2026-05-19. */
  overflow-x: clip;
}
.svc-body,
.svc-image,
.svc-block > *,
.tst-card > *,
.pj-card > *,
.value-prop > *,
.trust-item > * {
  min-width: 0;
}
p, li, .svc-body p, .svc-body li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================================
   17. REDUCE-MOTION GUARDS
   The overhaul respects user motion preferences — all our
   refined transitions are short enough to be benign, but
   we drop the hover lifts and photo filter transitions under
   reduce-motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn, .svc-block, .tst-card, .pj-card, .project-card,
  .value-prop, .trust-item, .build-card, .product-card,
  .page-card, .svc-image img {
    transition: none !important;
  }
  .btn:hover, .svc-block:hover, .tst-card:hover,
  .pj-card:hover, .project-card:hover {
    transform: none !important;
  }
}