:root{
    /* Logo-sampled core (images/logo.png), all contrast-checked. */
    --navy:#00182D;        /* logo wordmark — dark sections (16.6:1 on paper) */
    --navy-800:#0A2338;    /* shade of navy — layered dark panels */
    --slate:#3B5571;       /* logo stone, deep */
    --slate-600:#4A6785;   /* tint — secondary text on paper (5.4:1) */
    --slate-mid:#788AA0;   /* logo stone, mid — rules and markers */
    --stone-pale:#BCC3CE;  /* logo stone, pale — text on navy (10.1:1) */
    --paper:#F5F6F8;       /* cool near-white */
    --paper-warm:#FAF8F4;  /* warm near-white — alternating sections break the flatness */
    --body:#5A6675;        /* muted body copy (5.4:1 on paper) */

    /* Accent — in-family azure, requested over the previous warm ember accent. It sits in the
       same cool family as the navy/slate so it reads as one palette, and earns its
       attention through saturation and lightness rather than through hue contrast.
       Chosen to match the old ember's contrast profile almost exactly (5.18/4.79), so
       no other value in this file needed rebalancing. All three verified. */
    --azure:#0C6BD6;       /* THE call-to-action colour (5.13:1 with white, 4.75:1 on paper) */
    --azure-deep:#0A4F9E;  /* hover (8.0:1 with white) */
    --azure-light:#6BB2F5; /* the only azure safe as text on navy (8.0:1) */

    --line:rgba(0,24,45,.15);
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  /* Bottom padding clears the fixed mobile CTA bar, plus the iPhone home indicator.
     The bar is hidden from 900px up, so the reserve is released there. */
  body{font-family:'Karla',sans-serif;background:var(--paper);color:var(--navy);line-height:1.6;
       padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  @media(min-width:900px){body{padding-bottom:0;}}
  h1,h2,h3{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.05;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

  .btn{
    display:inline-block;background:var(--azure);color:#fff;font-weight:700;
    font-family:'Karla',sans-serif;padding:15px 30px;border:none;font-size:1rem;cursor:pointer;
    letter-spacing:.01em;
    box-shadow:0 2px 0 0 var(--azure-deep);
    transition:transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .btn:hover,.btn:focus-visible{background:var(--azure-deep);transform:translateY(-2px);box-shadow:0 4px 0 0 #073B73;}
  .btn:active{transform:translateY(0);box-shadow:0 1px 0 0 var(--azure-deep);}

  .eyebrow{display:block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--azure);margin-bottom:14px;}
  .eyebrow::after{content:"";display:block;width:34px;height:3px;background:var(--azure);margin-top:8px;}
  .hero-copy .eyebrow::after{margin-left:auto;margin-right:auto;}

  /* ===== SCROLL FADE — the default reveal for any block. Visible by default so a
     blocked CDN or stalled ticker never hides content; GSAP hides then reveals. ===== */
  .fade-up{will-change:transform,opacity;}

  /* ===== NAV — this is now a multi-page site, so the masthead carries real links.
     The template's "no nav" rule applies to single-page ads landing pages only. ===== */
  .mast-nav{display:none;gap:26px;align-items:center;}
  @media(min-width:900px){.mast-nav{display:flex;}}
  .mast-nav a{
    color:#fff;font-size:.88rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .2s var(--ease);
  }
  .mast-nav a:hover,.mast-nav a[aria-current=page]{border-bottom-color:var(--azure);}

  /* ===== SIGNATURE: coursed masonry divider ==========================================
     Generated SVG tile as a data URI — no request, scales cleanly, and every unit can be
     drawn individually in a way layered CSS gradients cannot manage.
       - Block LENGTHS vary (46/58/72/88). Uniform widths read as tile; varied reads as stone.
       - Each face takes its own tone from a seeded range, so no two neighbours match.
       - A dark base shows through every gap as a recessed joint.
       - Each unit gets a lit top edge and a shadowed bottom edge, so it has depth.
       - Three courses, each staggered by a different amount, so vertical joints never
         line up row to row — running bond, not a grid.
       - Tones sit between --slate and --stone-pale so the band belongs to the palette.
     Full opacity and a darker base than the page: at 45% on pale grey it read as a
     placeholder that had failed to load. */
  .course-band{
    height:44px;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='45' viewBox='0 0 640 45'><rect width='640' height='45' fill='%2333485F'/><rect x='-42.5' y='1.5' width='69.0' height='12.0' fill='%238A98A7'/><rect x='-42.5' y='1.5' width='69.0' height='1.5' fill='%23B9C1CA'/><rect x='-42.5' y='11.1' width='69.0' height='2.4' fill='%2354667A'/><rect x='29.5' y='1.5' width='55.0' height='12.0' fill='%237D8C9C'/><rect x='29.5' y='1.5' width='55.0' height='1.5' fill='%23B1BAC4'/><rect x='29.5' y='11.1' width='55.0' height='2.4' fill='%234F6276'/><rect x='87.5' y='1.5' width='85.0' height='12.0' fill='%2394A0AF'/><rect x='87.5' y='1.5' width='85.0' height='1.5' fill='%23BFC6CF'/><rect x='87.5' y='11.1' width='85.0' height='2.4' fill='%2358697D'/><rect x='175.5' y='1.5' width='43.0' height='12.0' fill='%23708091'/><rect x='175.5' y='1.5' width='43.0' height='1.5' fill='%23A9B3BD'/><rect x='175.5' y='11.1' width='43.0' height='2.4' fill='%234A5D72'/><rect x='221.5' y='1.5' width='43.0' height='12.0' fill='%2395A1AF'/><rect x='221.5' y='1.5' width='43.0' height='1.5' fill='%23BFC7CF'/><rect x='221.5' y='11.1' width='43.0' height='2.4' fill='%23586A7D'/><rect x='267.5' y='1.5' width='43.0' height='12.0' fill='%23B0BBC6'/><rect x='267.5' y='1.5' width='43.0' height='1.5' fill='%23D0D6DD'/><rect x='267.5' y='11.1' width='43.0' height='2.4' fill='%23627486'/><rect x='313.5' y='1.5' width='69.0' height='12.0' fill='%2399A6B3'/><rect x='313.5' y='1.5' width='69.0' height='1.5' fill='%23C2CAD1'/><rect x='313.5' y='11.1' width='69.0' height='2.4' fill='%235A6C7F'/><rect x='385.5' y='1.5' width='43.0' height='12.0' fill='%2396A2B0'/><rect x='385.5' y='1.5' width='43.0' height='1.5' fill='%23C0C7D0'/><rect x='385.5' y='11.1' width='43.0' height='2.4' fill='%23596A7E'/><rect x='431.5' y='1.5' width='55.0' height='12.0' fill='%23708092'/><rect x='431.5' y='1.5' width='55.0' height='1.5' fill='%23A9B3BE'/><rect x='431.5' y='11.1' width='55.0' height='2.4' fill='%234A5D72'/><rect x='489.5' y='1.5' width='43.0' height='12.0' fill='%2396A3B1'/><rect x='489.5' y='1.5' width='43.0' height='1.5' fill='%23C0C8D0'/><rect x='489.5' y='11.1' width='43.0' height='2.4' fill='%23596B7E'/><rect x='535.5' y='1.5' width='43.0' height='12.0' fill='%23707F91'/><rect x='535.5' y='1.5' width='43.0' height='1.5' fill='%23A9B2BD'/><rect x='535.5' y='11.1' width='43.0' height='2.4' fill='%234A5D72'/><rect x='581.5' y='1.5' width='13.0' height='12.0' fill='%237C8B9B'/><rect x='581.5' y='1.5' width='13.0' height='1.5' fill='%23B0B9C3'/><rect x='581.5' y='11.1' width='13.0' height='2.4' fill='%234F6176'/><rect x='597.5' y='1.5' width='43.0' height='12.0' fill='%2394A1AF'/><rect x='597.5' y='1.5' width='43.0' height='1.5' fill='%23BFC7CF'/><rect x='597.5' y='11.1' width='43.0' height='2.4' fill='%23586A7D'/><rect x='-21.5' y='16.5' width='55.0' height='12.0' fill='%2393A0AE'/><rect x='-21.5' y='16.5' width='55.0' height='1.5' fill='%23BEC6CE'/><rect x='-21.5' y='26.1' width='55.0' height='2.4' fill='%2357697D'/><rect x='36.5' y='16.5' width='69.0' height='12.0' fill='%23718092'/><rect x='36.5' y='16.5' width='69.0' height='1.5' fill='%23AAB3BE'/><rect x='36.5' y='26.1' width='69.0' height='2.4' fill='%234B5D72'/><rect x='108.5' y='16.5' width='85.0' height='12.0' fill='%23708092'/><rect x='108.5' y='16.5' width='85.0' height='1.5' fill='%23A9B3BE'/><rect x='108.5' y='26.1' width='85.0' height='2.4' fill='%234A5D72'/><rect x='196.5' y='16.5' width='55.0' height='12.0' fill='%237B8A9A'/><rect x='196.5' y='16.5' width='55.0' height='1.5' fill='%23B0B9C2'/><rect x='196.5' y='26.1' width='55.0' height='2.4' fill='%234E6175'/><rect x='254.5' y='16.5' width='43.0' height='12.0' fill='%239DA9B6'/><rect x='254.5' y='16.5' width='43.0' height='1.5' fill='%23C4CBD3'/><rect x='254.5' y='26.1' width='43.0' height='2.4' fill='%235B6D80'/><rect x='300.5' y='16.5' width='69.0' height='12.0' fill='%238B98A7'/><rect x='300.5' y='16.5' width='69.0' height='1.5' fill='%23B9C1CA'/><rect x='300.5' y='26.1' width='69.0' height='2.4' fill='%2354667A'/><rect x='372.5' y='16.5' width='55.0' height='12.0' fill='%238391A1'/><rect x='372.5' y='16.5' width='55.0' height='1.5' fill='%23B5BDC7'/><rect x='372.5' y='26.1' width='55.0' height='2.4' fill='%23516478'/><rect x='430.5' y='16.5' width='43.0' height='12.0' fill='%2396A3B1'/><rect x='430.5' y='16.5' width='43.0' height='1.5' fill='%23C0C8D0'/><rect x='430.5' y='26.1' width='43.0' height='2.4' fill='%23596B7E'/><rect x='476.5' y='16.5' width='55.0' height='12.0' fill='%238D9AA9'/><rect x='476.5' y='16.5' width='55.0' height='1.5' fill='%23BBC2CB'/><rect x='476.5' y='26.1' width='55.0' height='2.4' fill='%2355677B'/><rect x='534.5' y='16.5' width='69.0' height='12.0' fill='%238290A0'/><rect x='534.5' y='16.5' width='69.0' height='1.5' fill='%23B4BCC6'/><rect x='534.5' y='26.1' width='69.0' height='2.4' fill='%23516378'/><rect x='606.5' y='16.5' width='9.0' height='12.0' fill='%23A5B0BD'/><rect x='606.5' y='16.5' width='9.0' height='1.5' fill='%23C9D0D7'/><rect x='606.5' y='26.1' width='9.0' height='2.4' fill='%235E7083'/><rect x='618.5' y='16.5' width='43.0' height='12.0' fill='%239EAAB7'/><rect x='618.5' y='16.5' width='43.0' height='1.5' fill='%23C5CCD4'/><rect x='618.5' y='26.1' width='43.0' height='2.4' fill='%235C6D80'/><rect x='-27.5' y='31.5' width='55.0' height='12.0' fill='%23A3AEBB'/><rect x='-27.5' y='31.5' width='55.0' height='1.5' fill='%23C8CED6'/><rect x='-27.5' y='41.1' width='55.0' height='2.4' fill='%235E6F82'/><rect x='30.5' y='31.5' width='43.0' height='12.0' fill='%23778697'/><rect x='30.5' y='31.5' width='43.0' height='1.5' fill='%23ADB6C1'/><rect x='30.5' y='41.1' width='43.0' height='2.4' fill='%234D6074'/><rect x='76.5' y='31.5' width='69.0' height='12.0' fill='%238F9CAB'/><rect x='76.5' y='31.5' width='69.0' height='1.5' fill='%23BCC4CD'/><rect x='76.5' y='41.1' width='69.0' height='2.4' fill='%2356687C'/><rect x='148.5' y='31.5' width='85.0' height='12.0' fill='%236F7F90'/><rect x='148.5' y='31.5' width='85.0' height='1.5' fill='%23A9B2BC'/><rect x='148.5' y='41.1' width='85.0' height='2.4' fill='%234A5D72'/><rect x='236.5' y='31.5' width='69.0' height='12.0' fill='%239CA8B5'/><rect x='236.5' y='31.5' width='69.0' height='1.5' fill='%23C4CBD3'/><rect x='236.5' y='41.1' width='69.0' height='2.4' fill='%235B6C80'/><rect x='308.5' y='31.5' width='85.0' height='12.0' fill='%23A3AEBB'/><rect x='308.5' y='31.5' width='85.0' height='1.5' fill='%23C8CED6'/><rect x='308.5' y='41.1' width='85.0' height='2.4' fill='%235E6F82'/><rect x='396.5' y='31.5' width='69.0' height='12.0' fill='%2395A2B0'/><rect x='396.5' y='31.5' width='69.0' height='1.5' fill='%23BFC7D0'/><rect x='396.5' y='41.1' width='69.0' height='2.4' fill='%23586A7E'/><rect x='468.5' y='31.5' width='43.0' height='12.0' fill='%23ABB6C2'/><rect x='468.5' y='31.5' width='43.0' height='1.5' fill='%23CDD3DA'/><rect x='468.5' y='41.1' width='43.0' height='2.4' fill='%23617285'/><rect x='514.5' y='31.5' width='43.0' height='12.0' fill='%238391A1'/><rect x='514.5' y='31.5' width='43.0' height='1.5' fill='%23B5BDC7'/><rect x='514.5' y='41.1' width='43.0' height='2.4' fill='%23516478'/><rect x='560.5' y='31.5' width='85.0' height='12.0' fill='%239EAAB7'/><rect x='560.5' y='31.5' width='85.0' height='1.5' fill='%23C5CCD4'/><rect x='560.5' y='41.1' width='85.0' height='2.4' fill='%235C6D80'/></svg>");
    background-repeat:repeat-x;
    background-size:auto 44px;
    background-position:0 0;
    box-shadow:inset 0 1px 0 rgba(0,24,45,.28), inset 0 -1px 0 rgba(0,24,45,.28);
  }
  @media(min-width:900px){.course-band{height:54px;background-size:auto 54px;}}
  /* Alternate placements start part-way along so two bands on a page never align. */
  .course-band.offset{background-position:-137px 0;}

  /* ===== MASTHEAD — overlays the hero photo, transparent on desktop like the
     reference. Now a multi-page site, so it carries nav, phone and the CTA. ===== */
  .masthead{
    position:absolute;top:0;left:0;right:0;z-index:20;height:82px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 20px;background:rgba(0,24,45,.55);
  }
  @media(min-width:900px){
    .masthead{height:90px;padding:0 32px;background:linear-gradient(180deg, rgba(0,24,45,.55) 0%, rgba(0,24,45,0) 100%);}
  }
  .masthead-logo{
    height:52px;width:auto;background:var(--paper);
    padding:6px 10px;border-radius:3px;
  }
  @media(min-width:900px){.masthead-logo{height:60px;}}
  .masthead-actions{display:flex;align-items:center;gap:14px;}
  .masthead-tel{color:#fff;font-weight:600;font-size:.95rem;letter-spacing:.01em;}
  .masthead .btn{padding:11px 20px;font-size:.9rem;}
  @media(max-width:559px){.masthead-tel{display:none;}}

  /* ===== HERO — full-bleed photo, no copy on the image. Aspect ratios match the
     reference exactly: 8:3 (2.667) on desktop, 0.842 on mobile, art-directed via
     <picture> so each device downloads only its own crop. ===== */
  /* ===== HERO — full-bleed photo slideshow, copy overlaid ==========================
     Replaces the earlier photo-on-top / copy-below stack. The masthead floats over the
     photo, the headline sits bottom-left rather than centred, and three slides cross-fade.
     Sized in svh so mobile browser chrome cannot crop the CTA out of view. */
  .hero{
    position:relative;isolation:isolate;
    min-height:88svh;display:flex;flex-direction:column;
    background:var(--navy);
  }
  @media(min-width:900px){.hero{min-height:82svh;}}

  .hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden;}
  .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);}
  .hero-slide.is-on{opacity:1;}
  .hero-slide img{width:100%;height:100%;object-fit:cover;display:block;}

  /* Scrim. Strongest at the bottom-left where the copy sits, so the photo stays readable
     up top and the type never fights the image. */
  .hero-scrim{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      /* 1. Focused pool behind the copy block only. An ellipse anchored bottom-left, so the
            lede stops sitting at the same tone as the paving without flattening the photo.
            This is the layer doing the contrast work; the two below stay light. */
      radial-gradient(120% 95% at 6% 100%, rgba(0,16,32,.86) 0%, rgba(0,16,32,.55) 34%, rgba(0,16,32,0) 66%),
      /* 2. Gentle floor so the dots and scroll cue read on any slide. */
      linear-gradient(to top, rgba(0,24,45,.52) 0%, rgba(0,24,45,.16) 26%, rgba(0,24,45,0) 52%, rgba(0,24,45,.24) 100%),
      /* 3. Slight lean to the text side. Clears well before the right edge so the
            stonework on that side keeps its contrast. */
      linear-gradient(to right, rgba(0,24,45,.34) 0%, rgba(0,24,45,.10) 38%, rgba(0,24,45,0) 64%);
  }

  /* On a narrow, tall viewport the copy sits mid-height, not bottom-left, so the
     desktop radial pool misses it and the lede washes out over pale stone. Below 900px
     the lower half gets a proper floor instead. The top 40% is left alone so the photo
     still opens the page. */
  @media(max-width:899px){
    .hero-scrim{
      background:linear-gradient(to top,
        rgba(0,16,32,.92) 0%,
        rgba(0,16,32,.78) 22%,
        rgba(0,16,32,.52) 42%,
        rgba(0,16,32,.18) 62%,
        rgba(0,16,32,.02) 78%,
        rgba(0,24,45,.34) 100%);
    }
  }

  .hero .masthead{position:relative;z-index:3;}

  .hero-copy{
    position:relative;z-index:2;
    margin-top:auto;padding:0 24px 26px;text-align:left;
  }
  @media(min-width:900px){.hero-copy{padding:0 44px 42px;}}
  .hero-copy-inner{max-width:640px;margin:0;}
  .hero .eyebrow{color:var(--azure-light);}
  .hero .eyebrow::after{background:var(--azure-light);}
  .hero h1{
    color:#fff;font-size:clamp(2.1rem,6.4vw,4rem);line-height:1.02;
    text-shadow:0 2px 18px rgba(0,12,24,.42);
  }
  .hero h1 span{color:var(--azure-light);}
  .hero .lede{
    color:var(--stone-pale);font-size:1.03rem;margin:16px 0 24px;max-width:46ch;
    text-shadow:0 1px 12px rgba(0,12,24,.5);
  }
  .hero-copy .btn{display:inline-block;width:auto;margin:0;}

  /* Slide dots + scroll cue, mirroring the reference's bottom rail. */
  .hero-foot{
    position:relative;z-index:2;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:0 24px 22px;
  }
  @media(min-width:900px){.hero-foot{padding:0 44px 26px;}}
  .hero-dots{display:flex;gap:9px;}
  .hero-dots button{
    width:34px;height:44px;padding:0;border:0;background:none;cursor:pointer;
    display:flex;align-items:center;
  }
  .hero-dots button::after{
    content:"";display:block;width:100%;height:3px;
    background:rgba(245,246,248,.42);transition:background-color .3s var(--ease);
  }
  .hero-dots button.is-on::after{background:var(--azure-light);}
  .hero-scroll{
    display:inline-flex;align-items:center;gap:8px;min-height:44px;
    color:var(--stone-pale);font-size:.74rem;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;
  }
  .hero-scroll:hover,.hero-scroll:focus-visible{color:#fff;}

  /* Sits on the photo now, not on paper. --body is a mid grey tuned for a light
     background and disappears over the pale stamped concrete, so this reads in the
     pale stone tone with a shadow behind it instead. */
  .hero-facts{
    margin:24px 0 0;padding-top:14px;
    border-top:2px solid rgba(245,246,248,.32);
    font-size:.85rem;color:var(--stone-pale);max-width:42ch;
    text-shadow:0 1px 10px rgba(0,12,24,.66);
  }

  .footer-logo{
    width:132px;height:auto;background:var(--paper);
    padding:9px 12px;border-radius:3px;flex-shrink:0;
  }

  /* ===== PROJECT GALLERY — the remaining real photos, moved out of the old
     split hero so none of them go unused. ===== */
  .gallery-band{padding:8px 0 40px;}
  .card-stack{display:flex;flex-direction:column;gap:14px;padding:0 24px 8px;max-width:1180px;margin:0 auto;}
  @media(min-width:820px){.card-stack{flex-direction:row;gap:16px;padding:0 24px 8px;}
    .card-stack .shot{flex:1 1 0;}}
  .shot{position:relative;overflow:hidden;}
  .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;}
  .shot figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
    background:linear-gradient(0deg, rgba(0,24,45,.88) 0%, rgba(0,24,45,0) 100%);
    color:var(--paper);
  }
  .shot figcaption b{display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;}
  .shot figcaption span{font-size:.8rem;color:var(--stone-pale);}

  /* ===== SERVICES — grouped into three trades, not a flat grid ===== */
  .trades{padding:64px 24px 56px;}
  .trades .head{max-width:1180px;margin:0 auto 34px;}
  .trade-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:0;}
  @media(min-width:820px){.trade-grid{grid-template-columns:repeat(3,1fr);gap:0;}}
  /* Trades are now links to their own pages, and each carries a photo. The warm rule
     on top replaces the flat hairline and ties them to the CTA colour. */
  .trade{
    display:block;padding:0 0 24px;background:#fff;
    border-top:3px solid var(--azure);
    box-shadow:0 1px 0 0 var(--line), 0 10px 24px -18px rgba(0,24,45,.5);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .trade:hover{transform:translateY(-4px);box-shadow:0 1px 0 0 var(--line), 0 18px 30px -18px rgba(0,24,45,.55);}
  .trade img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:18px;}
  .trade h3{font-size:1.15rem;margin:0 22px 12px;}
  .trade ul{list-style:none;margin:0 22px;}
  .trade li{font-size:.93rem;color:var(--body);padding:5px 0;}
  .trade li::before{content:"▪";color:var(--azure);margin-right:9px;}
  .trade-more{
    display:block;margin:16px 22px 0;font-size:.85rem;font-weight:700;
    color:var(--azure);letter-spacing:.02em;
  }
  @media(min-width:820px){.trade-grid{gap:20px;}}

  .mid-cta{max-width:1180px;margin:34px auto 0;padding:0 24px;}

  /* ===== CRAFT — the crew mid-build, their strongest proof ===== */
  .craft{background:var(--navy);color:var(--paper);padding:0;}
  .craft-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr;}
  @media(min-width:860px){.craft-inner{grid-template-columns:1.1fr .9fr;align-items:center;}}
  .craft img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
  .craft .txt{padding:48px 24px;}
  @media(min-width:860px){.craft .txt{padding:56px 40px;}}
  .craft h2{color:var(--paper);font-size:clamp(1.6rem,3.4vw,2.2rem);max-width:18ch;}
  .craft p{color:var(--stone-pale);margin-top:16px;max-width:44ch;font-size:.98rem;}

  /* ===== CLOSING CTA BAND — navy panel so the azure button has maximum contrast ===== */
  .cta-band{background:var(--navy);padding:64px 24px 68px;text-align:center;}
  .cta-inner{max-width:640px;margin:0 auto;}
  .cta-band h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.4rem);}
  .cta-band p{color:var(--stone-pale);margin:14px auto 26px;max-width:46ch;}
  .cta-band .eyebrow::after{margin-left:auto;margin-right:auto;background:var(--azure-light);}

  /* ===== QUOTE FORM (quote.html) ===== */
  .quote-band{padding:60px 24px 52px;}
  .quote-card{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);padding:30px 26px;}
  .quote-card h2{font-size:1.5rem;margin-bottom:6px;}
  .quote-card .sub{color:var(--body);font-size:.9rem;margin-bottom:20px;}
  .field{margin-bottom:15px;}
  .field label{display:block;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;color:var(--body);}
  .field input,.field select{
    width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:0;
    font-family:'Karla',sans-serif;font-size:.95rem;background:var(--paper);color:var(--navy);
  }
  .field input:focus,.field select:focus{outline:2px solid var(--slate);outline-offset:1px;}
  .quote-card .btn{width:100%;text-align:center;margin-top:4px;}
  .form-note{font-size:.75rem;color:var(--body);margin-top:12px;text-align:center;}
  .confirm{display:none;text-align:center;padding:10px;}
  .confirm.show{display:block;}
  .confirm h3{color:var(--slate);margin-bottom:6px;}

  footer{background:var(--navy);color:var(--stone-pale);padding:28px 24px;}
  .footer-row{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;font-size:.85rem;}
  footer a.tel{
    color:var(--paper);font-weight:600;
    display:inline-flex;align-items:center;min-height:44px;padding:4px 2px;
  }

  .sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--azure);
    display:flex;align-items:stretch;justify-content:stretch;
    box-shadow:0 -4px 16px rgba(0,0,0,.18);
    padding-bottom:env(safe-area-inset-bottom); /* iPhone home indicator */
  }
  /* The <a> fills the whole bar. It used to be a 24px-tall link floating inside a
     padded div, so most of what looks like the button did nothing when tapped. */
  .sticky-cta a{
    flex:1;display:flex;align-items:center;justify-content:center;
    min-height:52px;padding:14px 16px;
    color:var(--paper);font-weight:700;font-size:1rem;
  }
  @media(min-width:900px){.sticky-cta{display:none;}}

  /* Reduced motion: kill the hover transitions. Scroll reveals are gated in JS and
     never run at all, so there is no half-animated state to clean up here. */
  @media (prefers-reduced-motion: reduce){
    .btn,.shot,.trade{transition:none !important;}
  }

/* ===================================================================
   TRADE PAGES + QUOTE PAGE
   =================================================================== */

/* Inner pages have no hero photo behind the masthead, so it needs a solid
   ground rather than the transparent gradient the homepage uses. */
.masthead.solid{position:relative;background:var(--navy);}
@media(min-width:900px){.masthead.solid{background:var(--navy);}}

/* Page banner — a shallower version of the homepage hero */
.page-head{background:var(--navy);color:#fff;padding:44px 24px 52px;}
.page-head .inner{max-width:1180px;margin:0 auto;}
.page-head h1{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem);max-width:18ch;}
.page-head p{color:var(--stone-pale);margin-top:16px;max-width:56ch;font-size:1.02rem;}
.page-head .eyebrow{color:var(--azure-light);}
.page-head .eyebrow::after{background:var(--azure-light);}

/* Alternating section grounds so the page is not one flat field of white */
.band{padding:56px 24px;}
.band-paper{background:var(--paper);}
.band-warm{background:var(--paper-warm);}
.band-navy{background:var(--navy);color:#fff;}
.band .inner{max-width:1180px;margin:0 auto;}
.band h2{font-size:clamp(1.5rem,3.2vw,2rem);max-width:22ch;}
.band-navy h2{color:#fff;}
.band p{color:var(--body);margin-top:14px;max-width:62ch;}
.band-navy p{color:var(--stone-pale);}

/* Service detail rows — image one side, copy the other, alternating */
.detail{display:grid;grid-template-columns:1fr;gap:24px;margin-top:36px;align-items:center;}
@media(min-width:820px){
  .detail{grid-template-columns:1fr 1fr;gap:48px;}
  .detail:nth-child(even) .detail-img{order:2;}
}
.detail + .detail{margin-top:52px;}
.detail-img{width:100%;aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 18px 34px -22px rgba(0,24,45,.65);}
.detail h3{font-size:1.35rem;margin-bottom:10px;}
.detail h3::before{
  content:"";display:block;width:30px;height:3px;background:var(--azure);margin-bottom:12px;
}
.detail p{color:var(--body);font-size:.98rem;}
.detail ul{list-style:none;margin-top:14px;}
.detail li{font-size:.93rem;color:var(--body);padding:4px 0;}
.detail li::before{content:"▪";color:var(--azure);margin-right:9px;}

/* Related-trade links at the foot of each trade page */
.also{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px;}
@media(min-width:700px){.also{grid-template-columns:1fr 1fr;}}
.also a{
  display:block;padding:20px 22px;background:#fff;border-left:3px solid var(--azure);
  box-shadow:0 10px 24px -20px rgba(0,24,45,.6);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.also a:hover{transform:translateY(-3px);box-shadow:0 16px 28px -20px rgba(0,24,45,.6);}
.also b{display:block;font-family:'Sora',sans-serif;font-size:1.05rem;}
.also span{font-size:.88rem;color:var(--body);}

/* Quote page */
.quote-page{padding:48px 24px 60px;background:var(--paper-warm);}
.quote-layout{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px;}
@media(min-width:860px){.quote-layout{grid-template-columns:1fr 1.05fr;gap:56px;align-items:start;}}
.quote-aside h2{font-size:clamp(1.6rem,3.4vw,2.2rem);max-width:16ch;}
.quote-aside p{color:var(--body);margin-top:14px;max-width:44ch;}
.quote-points{list-style:none;margin-top:24px;}
.quote-points li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--body);}
.quote-points li::before{content:"▪";color:var(--azure);margin-right:10px;}
/* On the quote page this is the only alternative to filling in the form, so it has to
   be a comfortable tap target, not just large text. */
.quote-aside .tel-big{
  display:inline-flex;align-items:center;min-height:44px;
  margin-top:24px;font-family:'Sora',sans-serif;font-weight:700;
  font-size:1.3rem;color:var(--azure);
}

/* Video block. Capped at the source's native 640x360 so the clip is never upscaled —
   the only public copy of it is 360p and it falls apart if stretched. */
.video-wrap{margin-top:22px;max-width:640px;}
.video-wrap video{width:100%;height:auto;display:block;border-radius:4px;background:#000;}

/* ===== STAMP / COLOURS PAGE =========================================================
   Swatch grid is 2-up on a phone on purpose. One-up wastes the screen for something
   people scan comparatively, and 3-up makes the texture too small to actually judge. */
.band-lede{margin-top:14px;}
.swatch-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px;
}
@media(min-width:700px){.swatch-grid{grid-template-columns:repeat(3,1fr);gap:20px;}}
.swatch{background:#fff;border:1px solid var(--line);overflow:hidden;}
.swatch img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.swatch figcaption{
  padding:11px 13px;font-weight:600;font-size:.92rem;color:var(--navy);
  border-top:3px solid var(--azure);
}

/* Colour charts are wide and detail-dense. Squeezing them to phone width makes the
   swatch names unreadable, so each one scrolls sideways in its own rail instead and
   the page itself never scrolls horizontally. */
.chart-stack{display:grid;gap:18px;margin-top:26px;}
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--line);}
.chart-scroll img{min-width:680px;width:100%;height:auto;}
@media(min-width:760px){.chart-scroll img{min-width:0;}}

/* ===== FOOTER NAV ==================================================================
   The masthead nav is display:none below 900px and there is no hamburger, so without
   this the whole site is unnavigable on a phone — and stamp-colors.html, which is
   linked from nowhere else, was completely unreachable there. Every page links to
   every page from the footer. Wraps rather than scrolls, 44px tap targets. */
.footer-nav{
  max-width:1180px;margin:0 auto 22px;padding-bottom:20px;
  display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center;
  border-bottom:1px solid rgba(188,195,206,.22);
}
.footer-nav a,.footer-nav span{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.86rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--stone-pale);
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.footer-nav a:hover,.footer-nav a:focus-visible{color:#fff;border-bottom-color:var(--azure-light);}
.footer-nav [aria-current=page]{color:#fff;border-bottom-color:var(--azure-light);}

/* Email. Verified from their own contact page — barcenasandsonpaving@gmail.com.
   They publish no social accounts anywhere on their site, so there are no social
   icons here on purpose. Do not add invented profile links. */
footer a.mail{
  color:var(--stone-pale);font-weight:600;word-break:break-all;
  display:inline-flex;align-items:center;min-height:44px;padding:4px 2px;
  border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);
}
footer a.mail:hover,footer a.mail:focus-visible{color:#fff;border-bottom-color:var(--azure-light);}

.quote-aside .mail-big{
  display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
  font-weight:600;font-size:1rem;color:var(--azure);word-break:break-all;
}

/* ===== MOBILE NAV =====================================================================
   Below 900px the masthead nav is hidden and, until now, nothing replaced it — any page
   linked only from that nav was unreachable on a phone. This is the replacement.

   The masthead's "Get a Free Estimate" button is hidden on phones ON PURPOSE. The fixed
   bottom bar already carries that exact CTA, follows the visitor down the whole page and
   sits under their thumb, so repeating it up top only crowded a 375px bar and pushed the
   burger into the logo. Phones get: logo left, burger right. Nothing else. */

.mast-burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:12px 10px;margin-left:auto;
  background:none;border:0;cursor:pointer;
}
.mast-burger span{
  display:block;height:2px;width:100%;background:#fff;
  transition:transform .28s var(--ease), opacity .18s var(--ease);
}
/* Burger becomes an X while the panel is open. */
.mast-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mast-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.mast-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(min-width:900px){
  .mast-burger{display:none;}
}
@media(max-width:899px){
  /* The sticky bottom bar is the CTA on phones. */
  .masthead-actions{display:none;}
}

.menu-panel{
  position:fixed;left:0;right:0;top:0;z-index:60;
  background:var(--navy-800);
  padding:84px 24px calc(28px + env(safe-area-inset-bottom));
  box-shadow:0 18px 40px rgba(0,12,24,.42);
  transform:translateY(-100%);transition:transform .34s var(--ease);
  max-height:100svh;overflow-y:auto;
}
.menu-panel[hidden]{display:none;}
.menu-panel.is-open{transform:translateY(0);}
.menu-panel nav{display:flex;flex-direction:column;}
.menu-panel nav a{
  display:flex;align-items:center;min-height:56px;
  font-family:'Sora',sans-serif;font-weight:700;font-size:1.32rem;
  color:#fff;border-bottom:1px solid rgba(188,195,206,.16);
}
.menu-panel nav a[aria-current=page]{color:var(--azure-light);}
.menu-contact{display:flex;flex-direction:column;margin-top:22px;}
.menu-contact a{
  display:flex;align-items:center;min-height:48px;
  color:var(--stone-pale);font-weight:600;font-size:.98rem;word-break:break-all;
}
.menu-contact a:first-child{font-size:1.16rem;color:var(--azure-light);font-weight:700;}

/* The burger has to sit above the panel so it can close it. */
.masthead{z-index:70;}
body.menu-open{overflow:hidden;}

@media (prefers-reduced-motion: reduce){
  .menu-panel{transition:none;}
  .mast-burger span{transition:none;}
}

/* Footer CTA on its own line. It was sharing a flex row with the address, phone and
   email, which squeezed all four. */
.footer-cta{
  max-width:1180px;margin:18px auto 0;
  padding-top:18px;border-top:1px solid rgba(188,195,206,.16);
}

/* Serving areas. Towns rather than counties, because towns are what people type into
   a search box. Deliberately quiet — this is SEO surface and reassurance, not a section
   that should compete with the CTA above it. */
.footer-areas{
  max-width:1180px;margin:16px auto 0;
  font-size:.82rem;line-height:1.7;color:var(--slate-mid);
}
.footer-areas span{
  color:var(--stone-pale);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  margin-right:6px;
}