/* ===========================================================================
   Mid-State Tile Co. shared stylesheet.

   Extracted verbatim from the index.html <style> block during the multi-page
   restructure. Before this, index.html and contact.html each carried their own
   copy and the contact file said so in a comment: "keep these in sync if the
   palette or the header changes." At two pages that was survivable. At seven it
   is not, and the site has no build step to import with, so one real .css file
   linked from every page is the way.

   Page specific rules live at the bottom, scoped by a page level class, so
   nothing here changes how any existing page renders.
   =========================================================================== */

  :root{
    --red:#C8102E; --red-dark:#9E0C24; --ink:#141414; --ink-2:#1f1f1f;
    --paper:#ffffff; --muted:#6b6b6b; --line:#e3e3e3; --white:#fff;
    --soft:#F7F6F5;                 /* faint tint to separate stacked white sections */
    --rule:#141414;                 /* black used as an outline, not a fill */
    --shadow:0 18px 50px rgba(0,0,0,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  /* sticky header is 84px, so anchored sections land under it without this */
  section[id],span[id]{scroll-margin-top:96px}
  body{font-family:'Inter',system-ui,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.display{font-family:'Anton','Inter',sans-serif;font-weight:400;letter-spacing:.5px;line-height:.98;text-transform:uppercase}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
  .red{color:var(--red)}
  .btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-weight:700;
    padding:15px 26px;border-radius:6px;border:none;cursor:pointer;font-size:16px;transition:.15s;letter-spacing:.3px}
  .btn:hover{background:var(--red-dark);transform:translateY(-1px)}
  .btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--rule)}
  .btn.ghost:hover{background:var(--ink);color:#fff}
  .cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
  .cta .btn.ghost:hover{background:#fff;color:var(--red)}
  .btn.dark{background:var(--ink)}.btn.dark:hover{background:#000}
  .eyebrow{font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:12.5px;color:var(--red)}

  /* NAV */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--rule)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:84px}
  .logo{font-family:'Anton',sans-serif;font-size:29px;letter-spacing:1px;color:var(--red);text-transform:uppercase;display:flex;gap:8px;align-items:baseline}
  .logo span{color:var(--ink)}
  .logo .co{color:#8a8a8a;font-size:17px}
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-links a{color:var(--ink);font-weight:600;font-size:14.5px;letter-spacing:.3px}
  .nav-links a:hover{color:var(--red)}
  .toggle{display:flex;background:#fff;border:1.5px solid var(--rule);border-radius:999px;padding:3px}
  .toggle button{border:none;background:transparent;color:var(--ink);font-weight:700;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer;letter-spacing:.4px}
  .toggle button.active{background:var(--red);color:#fff}
  .nav .btn{padding:10px 18px;font-size:14px}
  @media(max-width:900px){.nav-links a:not(.callbtn){display:none}}

  /* HERO */
  .hero{position:relative;background:#fff;color:var(--ink);overflow:hidden;border-bottom:2px solid var(--rule)}
  .hero::before{content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(20,20,20,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.07) 1px,transparent 1px);
    background-size:58px 58px;mask-image:radial-gradient(circle at 30% 40%,#000,transparent 80%)}
  .hero::after{content:"";position:absolute;top:-20%;right:-10%;width:620px;height:620px;border-radius:50%;
    background:radial-gradient(circle,rgba(200,16,46,.13),transparent 65%);filter:blur(10px)}
  /* hero runs wider than the rest of the site so the photos fill the screen */
  .hero-inner{position:relative;z-index:2;padding:88px 24px 80px;max-width:1440px;
    display:grid;grid-template-columns:1fr 1.42fr;gap:48px;align-items:center}
  @media(max-width:1280px){.hero-inner{grid-template-columns:1fr 1.2fr}}
  @media(max-width:980px){.hero-inner{grid-template-columns:1fr;gap:44px;padding:72px 24px 64px}}
  .hero h1{font-size:clamp(40px,5.4vw,74px);max-width:14ch}
  .hero h1 span{color:var(--red)}
  .hero p.sub{font-size:clamp(17px,2vw,21px);color:#4a4a4a;max-width:52ch;margin:22px 0 34px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-meta{margin-top:52px;display:flex;gap:40px;flex-wrap:wrap;border-top:2px solid var(--rule);padding-top:26px}
  .hero-meta div .n{font-family:'Anton';font-size:40px;color:var(--ink);line-height:1}
  .hero-meta div .l{font-size:13px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px}

  /* HERO PHOTO COLLAGE (building + showroom) */
  .hero-shots{display:grid;gap:12px}
  .shot{position:relative;margin:0;border-radius:12px;overflow:hidden;
    border:2px solid var(--rule);background:#fff;
    box-shadow:0 18px 38px rgba(0,0,0,.14)}
  .shot img{display:block;width:100%;height:100%;object-fit:cover}
  .shot-main img{aspect-ratio:4/3}
  .shot-main figcaption{position:absolute;left:14px;bottom:14px;
    background:var(--red);color:#fff;font-size:11px;font-weight:700;
    letter-spacing:1.6px;text-transform:uppercase;padding:7px 12px;border-radius:5px}
  .shot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .shot-row .shot{box-shadow:0 10px 22px rgba(0,0,0,.12)}
  .shot-row .shot img{aspect-ratio:4/5}
  @media(max-width:980px){.hero-shots{max-width:620px}}
  /* Two class selectors, so this beats single class display rules like .pillars{display:grid}
     and the hidden variant actually collapses. Do not weaken these selectors. */
  [data-mode="commercial"] .res-only{display:none}
  [data-mode="residential"] .com-only{display:none}

  /* SCROLL REVEAL (studs -> kerdi -> finished), wide landscape panel, wipes left to right */
  .reveal{position:relative;background:var(--soft);border-bottom:2px solid var(--rule)}
  .reveal-track{height:320vh;position:relative}
  .reveal-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 30%,#fff,var(--soft) 70%);padding:12px}
  .reveal-head{text-align:center;color:var(--ink);pointer-events:none}
  .reveal-head .eyebrow{color:var(--red)}
  .reveal-head h2{font-family:'Anton';text-transform:uppercase;font-size:clamp(24px,3.6vw,42px);margin-top:6px;line-height:1}
  /* 4:3 matches the source photos, so nothing gets cropped; height leads so it fills the sticky */
  .reveal-stage{position:relative;aspect-ratio:4/3;height:min(84vh,calc(100vh - 170px));width:auto;max-width:96vw;
    border-radius:16px;overflow:hidden;
    border:2px solid var(--rule);box-shadow:0 24px 60px rgba(0,0,0,.22);background:#fff}
  .reveal-img{position:absolute;inset:0;background-size:cover;background-position:center;will-change:clip-path}
  .reveal-img.s2,.reveal-img.s3{clip-path:inset(0 100% 0 0)}   /* wipes open left to right */
  /* leading edge of the active wipe */
  .wipe-edge{position:absolute;top:0;bottom:0;width:3px;background:var(--red);z-index:4;opacity:0;
    box-shadow:0 0 18px rgba(200,16,46,.75);transform:translateX(-1.5px)}
  [data-mode="residential"] .reveal-img.s1{background-image:url("/assets/bath-studs.jpg")}
  [data-mode="residential"] .reveal-img.s2{background-image:url("/assets/bath-kerdi.jpg")}
  [data-mode="residential"] .reveal-img.s3{background-image:url("/assets/bath-finished.jpg")}
  [data-mode="commercial"] .reveal-img.s1{background-image:url("/assets/commercial-studs.jpg")}
  [data-mode="commercial"] .reveal-img.s2{background-image:url("/assets/commercial-drywall.jpg")}
  [data-mode="commercial"] .reveal-img.s3{background-image:url("/assets/commercial-finished.jpg")}
  /* phones get 900px wide versions: same picture, about a fifth of the bytes */
  @media(max-width:900px){
    [data-mode="residential"] .reveal-img.s1{background-image:url("/assets/bath-studs-900.jpg")}
    [data-mode="residential"] .reveal-img.s2{background-image:url("/assets/bath-kerdi-900.jpg")}
    [data-mode="residential"] .reveal-img.s3{background-image:url("/assets/bath-finished-900.jpg")}
    [data-mode="commercial"] .reveal-img.s1{background-image:url("/assets/commercial-studs-900.jpg")}
    [data-mode="commercial"] .reveal-img.s2{background-image:url("/assets/commercial-drywall-900.jpg")}
    [data-mode="commercial"] .reveal-img.s3{background-image:url("/assets/commercial-finished-900.jpg")}
  }
  .stage-badge{position:absolute;top:14px;left:14px;z-index:3;display:flex;align-items:center;gap:8px;
    background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;letter-spacing:.5px;
    padding:7px 12px;border-radius:999px;text-transform:uppercase}
  .stage-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
  .reveal-caption{color:var(--ink);font-size:clamp(15px,2vw,19px);font-weight:600;min-height:1.4em;text-align:center}
  .stage-dots{display:flex;gap:9px}
  .stage-dots i{width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid var(--rule);transition:.2s}
  .stage-dots i.on{background:var(--red);border-color:var(--red);transform:scale(1.3)}
  .scroll-cue{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;animation:bob 1.6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
  @media(max-width:700px){.reveal-stage{width:96vw;height:auto;max-height:none}}

  /* SECTIONS */
  section{padding:88px 0}
  .section-head{max-width:620px;margin-bottom:48px}
  .section-head h2,.section-head h1{font-size:clamp(32px,4.6vw,52px)}
  .section-head p{color:var(--muted);font-size:18px;margin-top:16px}

  /* STORY / TIMELINE */
  .story{background:var(--white);border-bottom:2px solid var(--rule)}
  .est-badge{display:inline-block;background:#fff;color:var(--ink);border:2px solid var(--rule);font-family:'Anton';letter-spacing:2px;padding:7px 15px;border-radius:5px;font-size:15px;margin-bottom:18px}
  .timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:20px;position:relative}
  .timeline::before{content:"";position:absolute;top:34px;left:6%;right:6%;height:3px;background:linear-gradient(90deg,var(--red),var(--ink))}
  .gen{position:relative;padding:0 12px;text-align:center}
  .gen .dot{width:20px;height:20px;border-radius:50%;background:var(--red);border:4px solid var(--white);box-shadow:0 0 0 2px var(--red);margin:24px auto 20px;position:relative;z-index:2}
  .gen .num{font-family:'Anton';color:var(--red);font-size:15px;letter-spacing:1px}
  .gen h4{font-family:'Anton';font-size:19px;margin:6px 0 4px;text-transform:uppercase}
  .gen .rel{font-size:13.5px;color:var(--muted)}
  .gen .yr{font-size:12px;color:#a0a0a0;margin-top:4px;font-weight:600;letter-spacing:.5px}
  @media(max-width:760px){.timeline{grid-template-columns:1fr;gap:8px}.timeline::before{display:none}.gen{display:flex;gap:16px;text-align:left;align-items:center;border-left:3px solid var(--red);padding:10px 0 10px 18px}.gen .dot{margin:0}}
  .story-lead{font-size:clamp(22px,2.6vw,30px);font-family:'Anton';text-transform:uppercase;line-height:1.1;max-width:20ch}
  .story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
  @media(max-width:820px){.story-grid{grid-template-columns:1fr;gap:32px}}
  .story-copy p{color:#3a3a3a;font-size:17px;margin-top:16px}

  /* RELIABILITY */
  .rely{background:var(--soft);color:var(--ink);border-bottom:2px solid var(--rule)}
  .rely .pull{font-family:'Anton';font-size:clamp(30px,4.6vw,58px);text-transform:uppercase;line-height:1.02;max-width:16ch}
  .rely .pull span{color:var(--red)}
  .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
  @media(max-width:820px){.pillars{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.pillars{grid-template-columns:1fr}}
  .pillar{background:#fff;border:2px solid var(--rule);border-radius:10px;padding:26px 22px}
  .pillar .k{font-family:'Anton';color:var(--red);font-size:22px;text-transform:uppercase}
  .pillar p{color:#4a4a4a;font-size:15px;margin-top:10px}
  .rely-quote{margin-top:56px;border-left:4px solid var(--red);padding:6px 0 6px 24px;font-family:'Anton';font-size:clamp(22px,3vw,34px);text-transform:uppercase;line-height:1.1}

  /* QUOTE FORM + GC BID CARD */
  .est{background:var(--paper)}
  /* Widened from 720px. The site container (.wrap) was already 1240px, so the
     card was the thing leaving most of the desktop width empty. It fills the
     container now; phones never reach the cap so nothing changes there. */
  .est-card{background:#fff;border:2px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);max-width:1200px;margin:0 auto;overflow:hidden}
  .est-top{background:var(--red);color:#fff;padding:22px 30px;display:flex;align-items:center;justify-content:space-between}
  .est-top .t{font-family:'Anton';font-size:20px;letter-spacing:.5px;text-transform:uppercase}
  .est-body{padding:38px 34px 40px;min-height:330px}
  .q{font-family:'Anton';font-size:26px;text-transform:uppercase;margin-bottom:6px}
  .q-sub{color:var(--muted);font-size:15px;margin-bottom:26px}
  .opts{display:grid;gap:14px}
  .opts.two{grid-template-columns:1fr 1fr}
  .opts.three{grid-template-columns:repeat(3,1fr)}
  @media(max-width:900px){.opts.three{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.opts.three{grid-template-columns:1fr}}
  /* two up on a phone: six single-column cards buried the form under a long scroll */
  /* one column on a phone now, so the description has room and stays visible */
  @media(max-width:560px){
    .opts.three{gap:10px}
    .opt{padding:16px 14px;min-height:0}
    .opt .oi{font-size:23px}
    .opt .ot{font-size:16px;margin-top:8px;line-height:1.15}
  }
  /* min-height, not just grid stretch: stretch only equalises within a row, so
     without this the second row of tiles was a different height from the first
     wherever the descriptions ran to a different number of lines. */
  .opt{border:2px solid var(--line);border-radius:12px;padding:20px 18px;cursor:pointer;transition:.14s;
    background:#fff;text-align:left;font:inherit;min-height:132px}
  .opt:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.07)}
  .opt.sel{border-color:var(--red);background:#fff6f7}
  .opt .oi{font-size:28px;line-height:1}
  .opt .ot{font-family:'Anton';font-size:18px;text-transform:uppercase;margin-top:10px}
  .opt .od{font-size:13.5px;color:var(--muted);margin-top:4px}
  .est-actions{display:flex;justify-content:space-between;align-items:center;margin-top:30px}
  .opt-tag{color:var(--muted);font-weight:600;font-size:12.5px;letter-spacing:.3px;text-transform:uppercase}
  .rq-note{color:var(--muted);font-size:13.5px;text-align:right;margin-top:12px}
  @media(max-width:560px){.rq-note{text-align:left}}
  .field{margin-bottom:16px}
  .field label{display:block;font-weight:600;font-size:14px;margin-bottom:7px}
  .field input,.field textarea,.field select{width:100%;border:2px solid var(--line);border-radius:10px;padding:13px 14px;font:inherit;background:#fff}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red)}
  .lead-err{margin-top:14px;background:#FDECEE;border:2px solid var(--red);border-radius:10px;
    padding:12px 14px;font-size:14.5px;font-weight:600;color:#8d0c20;line-height:1.45}
  .lead-err a{color:var(--red);text-decoration:underline}
  .btn:disabled{opacity:.65;cursor:progress;transform:none}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  @media(max-width:560px){.form-grid{grid-template-columns:1fr}}
  .confirm{text-align:center;padding:20px 0}
  .confirm .big{font-family:'Anton';font-size:40px;color:var(--red);text-transform:uppercase}

  /* WORK / GALLERY */
  .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
  .filters button{font:inherit;font-weight:700;font-size:14px;letter-spacing:.3px;cursor:pointer;
    background:#fff;color:var(--ink);border:2px solid var(--rule);border-radius:999px;padding:9px 18px;transition:.14s}
  .filters button:hover{background:var(--soft)}
  .filters button.on{background:var(--red);border-color:var(--red);color:#fff}
  .filters button .c{opacity:.6;font-weight:600;margin-left:6px}
  .filters button.on .c{opacity:.85}
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:760px){.work-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:460px){.work-grid{grid-template-columns:1fr}}
  .shot-tile{position:relative;margin:0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;cursor:zoom-in;
    border:2px solid var(--rule);background:var(--soft);padding:0}
  .shot-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
  .shot-tile:hover img{transform:scale(1.05)}
  .shot-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;
    background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:12px;font-weight:700;
    letter-spacing:1.2px;text-transform:uppercase;opacity:0;transition:.2s}
  .shot-tile:hover figcaption{opacity:1}
  .ph-note{color:var(--muted);font-size:14px;margin-top:18px}
  /* lightbox */
  .lb{position:fixed;inset:0;z-index:200;background:rgba(12,12,12,.94);display:none;
    align-items:center;justify-content:center;padding:28px 28px 62px}  /* bottom room for the counter */
  .lb.open{display:flex}
  .lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.12);border:none;color:#fff;
    font-size:26px;line-height:1;cursor:pointer;border-radius:999px;width:50px;height:50px;transition:.15s}
  .lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--red)}
  .lb-close{top:20px;right:22px;font-size:22px}
  .lb-prev{left:18px;top:50%;transform:translateY(-50%)}
  .lb-next{right:18px;top:50%;transform:translateY(-50%)}
  .lb-count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#c9c9c9;font-size:13px;font-weight:600;letter-spacing:1px}

  /* ---------- MOBILE PASS ---------- */
  @media(max-width:620px){
    .wrap{padding:0 16px}
    /* .wrap lands after .hero-inner at this width and its shorthand would blank the
       hero's vertical padding, leaving the eyebrow jammed under the header rule. */
    .hero-inner{padding:44px 16px 52px}
    /* the wordmark was breaking across two lines and shoving the nav down */
    .nav{height:68px;gap:10px}
    .logo{font-size:20px;letter-spacing:.5px;gap:5px;white-space:nowrap;flex:0 0 auto}
    .logo .co{font-size:12px}
    .nav-links{gap:10px;flex:1 1 auto;justify-content:flex-end;min-width:0}
    .nav-links .callbtn{display:none}   /* the hero CTA sits directly below it */
    .toggle{padding:2px;flex:0 0 auto}
    .toggle button{font-size:12px;padding:6px 11px;letter-spacing:.2px}
  }
  @media(max-width:380px){
    .logo{font-size:17.5px}
    .toggle button{font-size:11px;padding:6px 9px}
  }

  /* form card on small screens */
  @media(max-width:560px){
    .est-top{padding:15px 18px}
    .est-top .t{font-size:15px;white-space:nowrap}
    .est-body{padding:26px 18px 30px;min-height:0}
    .q{font-size:22px}
  }
  @media(max-width:400px){
    .progress i{width:12px}
    .est-top .t{font-size:14px}
  }

  /* lineage entries were crushing name, relation and year onto one line */
  @media(max-width:560px){
    .gen{display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;row-gap:0;
      align-items:center;padding:12px 0 12px 16px}
    .gen .dot{grid-area:1/1/4/2;width:16px;height:16px;margin:0}
    .gen .num{grid-area:1/2/2/3;font-size:12px;letter-spacing:.8px}
    .gen h4{grid-area:2/2/3/3;font-size:18px;margin:1px 0 2px}
    .gen .rel{grid-area:3/2/4/3;font-size:12.5px}
    .gen .yr{grid-area:1/3/4/4;font-size:12px;margin:0;align-self:center}
  }

  /* lightbox controls moved off the photo and sized for thumbs */
  @media(max-width:760px){
    .lb{padding:60px 10px 92px}
    .lb-close{top:10px;right:10px;width:46px;height:46px;font-size:20px}
    .lb-prev,.lb-next{top:auto;bottom:16px;transform:none;width:56px;height:56px;font-size:30px}
    .lb-prev{left:calc(50% - 74px)}
    .lb-next{right:calc(50% - 74px)}
    .lb-count{bottom:84px}
  }

  /* CTA + FOOTER */
  .cta{background:var(--red);color:#fff;text-align:center}
  .cta h2{font-size:clamp(30px,4.6vw,52px)}
  .cta p{font-size:19px;margin:16px auto 30px;max-width:44ch;color:#ffe3e7}
  footer{background:#fff;color:#4a4a4a;padding:52px 0 30px;border-top:3px solid var(--rule)}
  .foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
  .foot .logo{font-size:20px}
  .foot a{color:#4a4a4a}.foot a:hover{color:var(--red)}
  .foot-col h5{color:var(--ink);font-family:'Anton';letter-spacing:1px;text-transform:uppercase;font-size:15px;margin-bottom:12px}
  .foot-col p,.foot-col a{display:block;font-size:14px;margin-bottom:7px}
  .foot-bot{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  .disclaimer{font-size:11px;color:#8a8a8a;max-width:60ch}

  /* ---------------------------------------------------------------------
     CONTACT PAGE (main.page)
     Lifted from the contact.html <style> block. Anything that collided with
     a home page rule is scoped to .page so contact keeps the exact sizes it
     shipped with: .confirm .big was 38px there and 40px on the home page,
     and .q-sub had 24px of bottom margin rather than 26px.
     --------------------------------------------------------------------- */
  .page [id]{scroll-margin-top:96px}
  /* same soft red glow the home hero has, so the two pages feel like one site */
  .page{padding:74px 0 88px;position:relative;overflow:hidden}
  .page::after{content:"";position:absolute;top:-24%;right:-10%;width:620px;height:620px;border-radius:50%;
    background:radial-gradient(circle,rgba(200,16,46,.13),transparent 65%);filter:blur(10px);
    pointer-events:none;z-index:0}
  .page > .wrap{position:relative;z-index:1}
  @media(max-width:860px){.page::after{width:420px;height:420px;top:-14%;right:-24%}}
  .page h1{font-size:clamp(38px,5.2vw,64px);margin-top:10px}
  .page .lede{font-size:clamp(17px,2vw,20px);color:#4a4a4a;max-width:46ch;margin-top:18px}

  .cols{display:grid;grid-template-columns:.72fr 1.28fr;gap:40px;margin-top:52px;align-items:start}
  @media(max-width:860px){.cols{grid-template-columns:1fr;gap:40px}}

  .detail{border:2px solid var(--rule);border-radius:12px;padding:24px 22px;margin-bottom:16px;background:#fff}
  .detail h2{font-size:17px;letter-spacing:1.2px;color:var(--red)}
  .detail .v{font-family:'Anton';font-size:26px;margin-top:8px;letter-spacing:.5px}
  .detail .v a:hover{color:var(--red)}
  .detail .m{font-size:14.5px;color:var(--muted);margin-top:7px}
  .detail .v.email{font-family:'Inter';font-size:19px;font-weight:700;word-break:break-word}
  .detail .v.addr{font-family:'Inter';font-size:16.5px;font-weight:600;font-style:normal;line-height:1.55;letter-spacing:0}
  .detail .v.addr b{font-weight:800}

  .card{background:#fff;border:2px solid var(--rule);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.10);overflow:hidden}
  .card-top{background:var(--red);color:#fff;padding:22px 30px}
  .card-top .t{font-family:'Anton';font-size:20px;letter-spacing:.5px;text-transform:uppercase}
  .card-body{padding:32px 30px 34px}
  @media(max-width:560px){.card-top{padding:18px 20px}.card-body{padding:26px 18px 30px}}
  .page .q-sub{margin-bottom:24px}
  .picks{display:flex;flex-wrap:wrap;gap:9px}
  .pick{font:inherit;font-weight:700;font-size:14px;cursor:pointer;background:#fff;color:var(--ink);
    border:2px solid var(--line);border-radius:999px;padding:9px 16px;transition:.14s}
  .pick:hover{border-color:var(--red)}
  .pick.sel{background:var(--red);border-color:var(--red);color:#fff}
  .actions{display:flex;justify-content:flex-end;margin-top:12px}
  .page .confirm .big{font-size:38px}
  @media(max-width:620px){.page{padding:48px 0 64px}}

  /* ---------------------------------------------------------------------
     STAGING NOTICE
     Only ever rendered when the page is running somewhere other than the
     real domain. See isProduction() in site.js. Customers never see this.
     --------------------------------------------------------------------- */
  .staging-note{margin-top:14px;background:#FFF6D8;border:2px dashed #B08900;border-radius:10px;
    padding:12px 14px;font-size:14.5px;font-weight:700;color:#6B5200;line-height:1.45}
  .staging-note span{display:block;font-weight:600;font-size:13px;margin-top:5px;color:#7d6200}

  /* ---------------------------------------------------------------------
     STEP 2B ADDITIONS
     --------------------------------------------------------------------- */

  /* simple page header for interior pages that are not the hero */
  .page-head{padding:72px 0 40px}
  .page-head h1{font-size:clamp(38px,5.2vw,64px);margin-top:10px}
  .page-head .lede{font-size:clamp(17px,2vw,20px);color:#4a4a4a;max-width:52ch;margin-top:16px}
  @media(max-width:620px){.page-head{padding:44px 0 28px}}

  /* /about historical photo. The real <img> and the placeholder share a frame
     so dropping the photo in is a markup swap with no CSS change. */
  .history-shot{margin:44px 0 56px;border:2px solid var(--rule);border-radius:14px;
    overflow:hidden;background:var(--soft);box-shadow:0 18px 38px rgba(0,0,0,.10)}
  .history-shot img{display:block;width:100%;height:auto}
  .history-shot figcaption{padding:12px 16px;font-size:13.5px;color:var(--muted);
    border-top:2px solid var(--rule);background:#fff}
  .history-shot.is-placeholder .ph-box{aspect-ratio:16/9;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;
    background:repeating-linear-gradient(45deg,#fff,#fff 14px,var(--soft) 14px,var(--soft) 28px)}
  .history-shot .ph-label{font-family:'Anton';text-transform:uppercase;letter-spacing:1.5px;
    font-size:clamp(18px,2.6vw,26px);color:var(--ink)}
  .history-shot .ph-sub{font-size:14px;color:var(--muted)}

  /* /residential photo strip. Reuses .shot-tile, minus the zoom-in cursor and
     the hover caption, since these are not wired to the lightbox. */
  /* runs wider than the 1240 text container so the three photos are big */
  .shots-strip{padding:62px 0 76px}
  .shots-strip .wrap{max-width:1600px}
  .strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:560px){.strip-grid{grid-template-columns:1fr;gap:14px}}
  /* Fixed ratio and cropped so the three match whatever shape the source is.
     Portrait, because almost every shower photo in the gallery is shot
     vertically and a landscape crop was cutting off the head and the floor. */
  .shot-tile.is-static{cursor:default;aspect-ratio:3/4}
  .shot-tile.is-static img{width:100%;height:100%;object-fit:cover;object-position:center}
  .shot-tile.is-static:hover img{transform:none}

  /* ---------------------------------------------------------------------
     HOME PAGE BLOCKS
     Order on the page: hero, stat strip, CTA grid, work strip, form,
     contact band. The CTA grid is the primary navigation of the site, so it
     is deliberately the heaviest thing on the page.
     --------------------------------------------------------------------- */

  /* 2. stat strip: one tight row, not a section */
  .stat-strip{padding:0;background:#fff;border-bottom:2px solid var(--rule)}
  .stat-strip .wrap{display:flex;gap:clamp(28px,6vw,72px);flex-wrap:wrap;
    padding-top:20px;padding-bottom:20px}
  .stat-strip .s{display:flex;align-items:baseline;gap:10px}
  .stat-strip .s .n{font-family:'Anton';font-size:clamp(28px,4vw,38px);line-height:1;color:var(--ink)}
  .stat-strip .s .l{font-size:12.5px;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase}

  /* 3. four card nav row.
     Text only on purpose. The earlier photo version sized each card from its
     image, so the cards in a row did not match and one left a tall gap under
     its label. This is navigation, not content: flat cards, equal widths,
     equal heights, four across and about a quarter of a screen tall. */
  .nav-row-sec{padding:34px 0 32px}
  .nav-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
  @media(max-width:900px){.nav-row{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.nav-row{grid-template-columns:1fr}}
  /* the whole card is the link, not just the label */
  a.nav-card{display:flex;flex-direction:column;justify-content:center;height:100%;
    border:2px solid var(--rule);border-radius:10px;padding:22px 20px;background:#fff;
    color:inherit;transition:.14s;min-height:116px}
  a.nav-card:hover{border-color:var(--red);background:var(--soft);transform:translateY(-2px)}
  a.nav-card:focus-visible{outline:3px solid var(--red);outline-offset:3px}
  .nav-card .k{font-family:'Anton';text-transform:uppercase;line-height:1;
    font-size:clamp(20px,2.2vw,26px)}
  .nav-card .d{color:#4a4a4a;font-size:14px;margin-top:7px;line-height:1.4}

  /* 4. recent work strip: photos only, one line of text, no headline block */
  .work-strip{padding:0 0 62px}
  .work-strip .line{font-size:16px;color:#4a4a4a;margin-bottom:16px}
  .work-strip .line a{color:var(--red);font-weight:700}
  .strip-6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
  @media(max-width:900px){.strip-6{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:440px){.strip-6{grid-template-columns:repeat(2,1fr)}}
  /* Square and cropped to fill, so a portrait showroom shot and a landscape
     building shot still line up with the rest of the row.
     height:auto is load bearing. The width/height attributes on the <img> map
     to a real CSS height, and aspect-ratio only sizes the box when the other
     dimension is auto, so without this the row keeps each photo's own shape. */
  .strip-6 img{display:block;width:100%;height:auto;aspect-ratio:1/1;
    object-fit:cover;object-position:center;
    border:2px solid var(--rule);border-radius:8px;transition:.16s}
  .strip-6 a:hover img{border-color:var(--red);transform:translateY(-2px)}

  /* 5. inline home form */
  .home-form{padding:0 0 66px}

  /* 6. contact band */
  .cta .phone{display:inline-block;font-family:'Anton';letter-spacing:1px;color:#fff;
    font-size:clamp(38px,7vw,72px);line-height:1;margin:6px 0 26px}
  .cta .phone:hover{color:#ffe3e7}