/* Home Crafters United - shared styles for every page */
  /* The site is dark for everyone. These used to be light values with a dark
     override for people whose device asked for dark; now there is one set, so
     it looks the same no matter what a visitor's phone or browser is set to.
     color-scheme tells the browser to draw scrollbars, form fields and the
     like in dark too, instead of pasting light widgets onto a dark page. */
  :root{
    color-scheme:dark;
    --honey:#F0B400;
    --honey-ink:#F5C542;
    --copper:#7FA3E8;
    --ground:#121315;
    --surface:#191A1D;
    --surface-2:#212327;
    --ink:#EDEBE6;
    --ink-2:#B3B7BE;
    --ink-3:#868B93;
    --rule:#2C2E33;
    --hero-ground:#08090A;
    --hero-ink:#F2F1EE;
    --hero-ink-2:#A9ADB4;
    --hero-rule:#33373D;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
    --maxw:1080px;
  }

  *{box-sizing:border-box}
  img{max-width:100%}
  body{
    margin:0;background:var(--ground);color:var(--ink);
    font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{text-wrap:balance;margin:0}
  a{color:inherit}
  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

  /* placeholder marker — anything Eric must replace before going live */
  .fill{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.86em;
    color:var(--honey-ink);border-bottom:2px dashed var(--honey);
    padding-bottom:1px;white-space:nowrap;
  }

  /* ---------- top bar ---------- */
  header{
    position:sticky;top:0;z-index:40;background:var(--hero-ground);
    border-bottom:1px solid var(--hero-rule);
  }
  .bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:12px}
  .mark{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
  .hex{width:42px;height:42px;flex:none;display:block}
  .wordmark{font-family:"Archivo Black",Archivo,sans-serif;font-size:17px;letter-spacing:-.01em;color:var(--hero-ink);line-height:1.1}
  .wordmark span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.18em;color:var(--honey);margin-top:4px}
  header nav{display:flex;gap:16px;flex-wrap:wrap}
  header nav a{font-size:13.5px;font-weight:500;color:var(--hero-ink-2);text-decoration:none}
  header nav a:hover{color:var(--honey)}
  .call{
    font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;
    background:var(--honey);color:#0D0E10;text-decoration:none;
    padding:9px 16px;border-radius:2px;white-space:nowrap;
  }
  .call:hover{background:#FFC62E}

  /* ---------- menu button (phones and small tablets) ---------- */
  .menu-btn{
    display:none;position:relative;z-index:2;align-items:center;gap:8px;flex:none;cursor:pointer;
    background:transparent;border:1px solid var(--hero-rule);color:var(--hero-ink);
    font:600 14px "IBM Plex Sans",sans-serif;padding:8px 12px;border-radius:2px;
  }
  .menu-btn:hover{border-color:var(--honey);color:var(--honey)}
  .menu-icon,.menu-icon::before,.menu-icon::after{
    display:block;width:16px;height:2px;background:currentColor;border-radius:1px;
    transition:transform .18s ease,opacity .18s ease;
  }
  .menu-icon{position:relative}
  .menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0}
  .menu-icon::before{top:-5px}
  .menu-icon::after{top:5px}
  .menu-btn[aria-expanded="true"] .menu-icon{background:transparent}
  .menu-btn[aria-expanded="true"] .menu-icon::before{transform:translateY(5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .menu-icon::after{transform:translateY(-5px) rotate(-45deg)}

  @media (max-width:1100px){
    .bar{flex-wrap:nowrap;gap:10px;padding-block:8px}
    .hex{width:36px;height:36px}
    .wordmark{font-size:15px}
    .menu-btn{display:inline-flex}
    header nav{
      display:none;position:fixed;left:0;right:0;top:56px;
      flex-direction:column;flex-wrap:nowrap;gap:0;background:var(--hero-ground);
      border-bottom:2px solid var(--honey);padding:4px 20px 12px;
      max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto;
      overscroll-behavior:contain;z-index:30;
      box-shadow:0 14px 30px rgba(0,0,0,.45);
    }
    header nav.open{display:flex}
    header nav a{font-size:16px;padding:12px 0;border-bottom:1px solid var(--hero-rule);color:var(--hero-ink)}
    header nav a:last-child{border-bottom:0}
  }
  /* narrow phones: shortest possible bar */
  @media (max-width:560px){
    header .wordmark span{display:none}
    .call-num{display:none}
    .wordmark{font-size:14px}
    .menu-label{display:none}
    .menu-btn{padding:9px 10px}
  }
  /* phones held sideways: very little height, so keep the bar thin */
  @media (max-height:520px){
    header .wordmark span{display:none}
    .bar{padding-block:6px}
    .hex{width:32px;height:32px}
  }

  /* ---------- hero ---------- */
  .hero{
    background:var(--hero-ground);color:var(--hero-ink);
    position:relative;overflow:hidden;
  }
  .comb{
    position:absolute;inset:0;pointer-events:none;opacity:.16;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'><path d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z' fill='none' stroke='%23F0B400' stroke-width='1.25'/><path d='M28 64 L28 96' fill='none' stroke='%23F0B400' stroke-width='1.25'/></svg>");
    background-size:56px 96px;
    /* strongest at the top, gone by the bottom, so it never fights the
       artwork or the text sitting on it */
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);
  }
  /* a second, much larger comb drifting behind it gives the pattern some depth
     instead of one flat screen of hexagons */
  .comb::after{
    content:"";position:absolute;inset:0;opacity:.5;
    background-image:inherit;background-size:168px 288px;background-position:28px 48px;
  }

  .hero .wrap{position:relative;padding-block:64px 56px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
  /* The crew banner runs the width of the hero. Its own edges are faded out in
     the file, so it melts into the dark band rather than sitting in a box.
     Pulled wider than the text column and tucked up under it. */
  .hero-banner{
    display:block;width:100%;max-width:none;height:auto;
    margin:14px 0 -40px;position:relative;
    /* The bees reach the very top edge of the artwork - antennae at y=0 - so
       there is no sky to fade through up there. A short fade over the picture
       itself dissolves the edge the same way the bottom does; only the antenna
       tips soften. Growing fake sky to fade through instead just read as blur. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 6%, #000 84%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 6%, #000 84%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-composite:intersect;
  }
  .hero .wrap{padding-block:64px 0}
  .hero .wrap:last-child{padding-block:0 44px}
  .hero-logo{width:clamp(210px,24vw,300px);height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.55))}
  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr;gap:34px}
    .hero-logo{width:min(230px,60vw);margin-inline:auto}
  }
  .eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:var(--honey);margin-bottom:22px;
  }
  h1{
    font-family:"Archivo Black",Archivo,sans-serif;
    font-size:clamp(34px,6.4vw,60px);line-height:1.02;letter-spacing:-.025em;max-width:16ch;
  }
  .lede{font-size:clamp(16px,2.1vw,19px);color:var(--hero-ink-2);max-width:56ch;margin-top:20px}
  .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
  .btn{
    display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
    padding:13px 24px;border-radius:2px;
  }
  .btn-a{background:var(--honey);color:#0D0E10}
  .btn-a:hover{background:#FFC62E}
  .btn-b{border:1px solid var(--hero-rule);color:var(--hero-ink)}
  .btn-b:hover{border-color:var(--honey);color:var(--honey)}
  .trust{
    display:flex;gap:10px 28px;flex-wrap:wrap;margin-top:40px;padding-top:24px;
    border-top:1px solid var(--hero-rule);
    font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--hero-ink-2);
  }
  .trust b{color:var(--hero-ink);font-weight:600}

  /* ---------- sections ---------- */
  section{padding-block:60px}
  .kicker{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:12px;
  }
  h2{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(25px,3.6vw,34px);letter-spacing:-.02em;line-height:1.14}
  .sub{color:var(--ink-2);max-width:60ch;margin-top:12px}

  .trades{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px;margin-top:40px}
  .trade > h3{
    font-family:Archivo,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;
    padding-bottom:12px;border-bottom:2px solid var(--honey);
  }
  .trade p.note{font-size:14.5px;color:var(--ink-3);margin:12px 0 0}
  ul.svc{list-style:none;margin:8px 0 0;padding:0}
  ul.svc li{
    display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start;
    padding-block:13px;border-bottom:1px solid var(--rule);
  }
  ul.svc li:last-child{border-bottom:0}
  ul.svc svg{width:16px;height:18px;margin-top:3px;flex:none}
  ul.svc strong{display:block;font-weight:600;font-size:15.5px}
  ul.svc em{display:block;font-style:normal;font-size:14px;color:var(--ink-3);margin-top:2px}

  /* ---------- process (a real sequence, so it's numbered) ---------- */
  .band{background:var(--surface);border-block:1px solid var(--rule)}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px;margin-top:36px;counter-reset:s}
  .step{counter-increment:s}
  .step::before{
    content:counter(s,decimal-leading-zero);
    display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
    color:var(--honey-ink);letter-spacing:.1em;margin-bottom:10px;
  }
  .step h3{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;margin-bottom:6px}
  .step p{margin:0;font-size:14.5px;color:var(--ink-2)}

  /* ---------- area ---------- */
  .area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;margin-top:32px;align-items:start}
  .towns{
    display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;
  }
  .towns li{
    font-family:"IBM Plex Mono",monospace;font-size:13px;
    background:var(--surface-2);border:1px solid var(--rule);
    padding:6px 11px;border-radius:2px;
  }
  .hours{border-left:3px solid var(--copper);padding-left:18px}
  .hours dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14.5px}
  .hours dt{color:var(--ink-3)}
  .hours dd{margin:0;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

  /* ---------- contact ---------- */
  .contact{background:var(--hero-ground);color:var(--hero-ink)}
  .contact h2{color:var(--hero-ink)}
  .contact .sub{color:var(--hero-ink-2)}
  .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;margin-top:36px;background:var(--hero-rule);border:1px solid var(--hero-rule)}
  .way{background:var(--hero-ground);padding:26px 24px}
  .way .kicker{color:var(--honey)}
  .way a{
    font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;
    color:var(--hero-ink);text-decoration:none;word-break:break-word;
  }
  .way a:hover{color:var(--honey)}
  .way p{margin:8px 0 0;font-size:14px;color:var(--hero-ink-2)}

  footer{background:var(--hero-ground);color:var(--hero-ink-2);border-top:1px solid var(--hero-rule);padding-block:34px;font-size:13.5px}
  .foot{display:flex;gap:16px 40px;flex-wrap:wrap;justify-content:space-between}
  .lic{font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.9}
  .lic .fill{color:var(--honey)}

  /* ---------- specialty panel + trade categories ---------- */
  .spec{
    border:2px solid var(--honey);border-radius:2px;background:var(--surface);
    padding:28px 26px;margin-top:38px;
  }
  .spec-head{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap}
  .spec-head h3{font-family:Archivo,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.015em;margin:0}
  .badge{
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;background:var(--honey);color:#0D0E10;padding:4px 9px;border-radius:2px;
  }
  .spec > p.intro{font-size:14.5px;color:var(--ink-2);margin:12px 0 0;max-width:64ch}
  .spec .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:0 44px;margin-top:10px}
  .spec .two ul.svc{margin-top:0}

  .spec-meta{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);
  }
  .spec-lead{
    display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;
    margin-top:18px;padding:14px 16px;background:var(--surface-2);border-left:3px solid var(--honey);
    border-radius:0 2px 2px 0;
  }
  .spec-lead svg{width:18px;height:20px;margin-top:3px}
  .spec-lead strong{display:block;font-weight:700;font-size:17px;color:var(--ink)}
  .spec-lead em{display:block;font-style:normal;font-size:14.5px;color:var(--ink-2);margin-top:2px}
  .spec-note{margin:14px 0 0;font-size:14px;color:var(--ink-3)}

  .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:34px;margin-top:38px}
  .cat h4{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;color:var(--copper);margin:0 0 14px;padding-bottom:10px;
    border-bottom:1px solid var(--rule);
  }
  .cat ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .cat li{font-size:15px;display:grid;grid-template-columns:9px 1fr;gap:11px;align-items:baseline}
  .cat li::before{
    content:"";width:9px;height:10px;background:var(--honey);
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  }
  .subnote{
    margin-top:38px;padding:22px 24px;border-left:4px solid var(--honey);
    background:var(--surface);font-size:15.5px;color:var(--ink-2);max-width:72ch;
    border-radius:0 2px 2px 0;
  }
  .subnote h3{
    font-family:Archivo,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.01em;
    color:var(--ink);margin:0 0 10px;
  }
  .subnote p{margin:0 0 12px;line-height:1.65}
  .subnote strong{color:var(--ink)}

  /* ---------- reviews ---------- */
  #reviews{background:var(--surface);border-block:1px solid var(--rule)}
  .rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 30px;flex-wrap:wrap}
  .rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .rating-num{font-family:"Archivo Black",Archivo,sans-serif;font-size:34px;line-height:1;color:var(--ink)}
  .rating-count{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-3)}
  .stars{color:var(--honey);font-size:18px;letter-spacing:2px;line-height:1}
  /* swipeable review carousel - one card at a time */
  .rev-carousel{position:relative;margin-top:30px;display:flex;align-items:center;gap:10px}
  .reviews{
    display:flex;gap:20px;flex:1;min-width:0;align-items:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .reviews::-webkit-scrollbar{display:none}
  .review{
    flex:0 0 100%;scroll-snap-align:center;margin:0;
    background:var(--ground);border:1px solid var(--rule);
    border-top:3px solid var(--honey);border-radius:2px;padding:22px 24px;
    display:flex;flex-direction:column;gap:12px;
  }
  @media (prefers-reduced-motion:reduce){ .reviews{scroll-behavior:auto} }

  /* arrows - hidden on touch-only screens, where you just swipe */
  .rev-nav{
    flex:0 0 auto;width:40px;height:40px;border-radius:50%;
    border:1px solid var(--rule);background:var(--ground);color:var(--ink);
    font-size:22px;line-height:1;cursor:pointer;display:none;
    align-items:center;justify-content:center;padding:0 0 3px;
  }
  .rev-nav:hover{border-color:var(--honey);color:var(--honey-ink)}
  .rev-nav:disabled{opacity:.3;cursor:default}
  .rev-nav:disabled:hover{border-color:var(--rule);color:var(--ink)}
  @media (hover:hover) and (pointer:fine){ .rev-nav{display:flex} }

  /* dots */
  .rev-dots{display:flex;justify-content:center;gap:9px;margin-top:16px}
  .rev-dots button{
    width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid var(--ink-3);background:transparent;
  }
  .rev-dots button[aria-current="true"]{background:var(--honey);border-color:var(--honey)}
  .rev-swipe-hint{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;
    color:var(--ink-3);text-align:center;margin:10px 0 0;
  }
  @media (hover:hover) and (pointer:fine){ .rev-swipe-hint{display:none} }
  .review blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
  .review figcaption{font-weight:600;font-size:14px;color:var(--ink)}
  .review figcaption span{font-weight:400;color:var(--ink-3)}
  .rev-actions{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-top:10px}
  .btn-review{background:var(--honey);color:#0D0E10}
  .btn-review:hover{background:#FFC62E}
  .rev-link{font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--honey)}
  .rev-link:hover{color:var(--honey-ink)}
  .lic a{color:var(--honey);text-decoration:none}
  .lic a:hover{text-decoration:underline}
  .subnote-sign{
    margin:16px 0 0 !important;font-family:"IBM Plex Mono",monospace;font-size:13px;
    letter-spacing:.06em;color:var(--honey-ink);
  }

  /* ---------- gallery, grouped by job ---------- */
  .jobs{display:flex;flex-direction:column;gap:48px;margin-top:38px}
  .job-head{
    display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;
    padding-bottom:12px;border-bottom:2px solid var(--honey);
  }
  .job-head h3{font-family:Archivo,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;margin-right:auto}
  .job-meta{
    font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
    color:var(--ink-3);font-variant-numeric:tabular-nums;
  }
  .job-meta .trade{color:var(--copper);font-weight:600;text-transform:uppercase;letter-spacing:.14em}
  .job-blurb{margin:14px 0 0;font-size:14.5px;color:var(--ink-2);max-width:62ch}
  .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:20px}
  .shot{margin:0;display:flex;flex-direction:column;gap:10px}
  .shot button{
    display:block;padding:0;border:1px solid var(--rule);background:var(--surface-2);
    border-radius:2px;overflow:hidden;cursor:zoom-in;width:100%;
  }
  .shot button:hover{border-color:var(--honey)}
  .shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;max-width:100%}
  .shot figcaption{display:flex;gap:10px;align-items:baseline}
  .shot .tag{
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--copper);white-space:nowrap;
  }
  .shot .cap{font-size:14px;color:var(--ink-2)}
  .more{
    margin-top:16px;background:transparent;border:1px solid var(--rule);color:var(--ink);
    font:600 14px "IBM Plex Sans",sans-serif;padding:10px 18px;border-radius:2px;cursor:pointer;
  }
  .more:hover{border-color:var(--honey);color:var(--honey-ink)}
  @media (max-width:560px){
    .gal{grid-template-columns:1fr 1fr;gap:10px}
    .shot{gap:6px}
    .shot .cap{font-size:12.5px}
  }

  /* ---------- photo viewer ---------- */
  dialog{
    border:0;padding:0;background:transparent;width:min(96vw,1100px);max-width:none;max-height:96vh;
    overflow:visible;
  }
  dialog::backdrop{background:rgba(8,9,10,.92)}
  .lb-wrap{display:flex;flex-direction:column;gap:12px}
  .lb-wrap img{
    display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:2px;
    touch-action:pan-y;user-select:none;
  }
  .lb-bar{display:flex;align-items:center;gap:10px}
  .lb-bar p{
    flex:1;min-width:0;margin:0;text-align:center;color:#EDEBE6;
    font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.4;
  }
  .lb-count{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#A9ADB4;white-space:nowrap;font-variant-numeric:tabular-nums}
  .lb-btn{
    flex:none;min-width:44px;height:44px;padding:0 12px;border-radius:2px;cursor:pointer;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
    font:600 15px "IBM Plex Sans",sans-serif;
  }
  .lb-btn:hover{border-color:var(--honey);color:var(--honey)}
  .lb-btn[disabled]{opacity:.3;cursor:default}
  .lb-btn.arrow{font-size:24px;line-height:1}
  .gal-note{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-3);margin-top:26px}

  /* ---------- about / the story ---------- */
  .about{background:var(--hero-ground);color:var(--hero-ink)}
  .about h2{color:var(--hero-ink)}
  .about .kicker{color:var(--honey)}
  .story{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(210px,.85fr);gap:48px;margin-top:30px}
  @media (max-width:780px){ .story{grid-template-columns:1fr;gap:34px} }
  .story p{color:var(--hero-ink-2);font-size:16.5px;max-width:64ch;margin:0 0 18px}
  .story p:last-of-type{margin-bottom:0}
  .story p strong{color:var(--hero-ink);font-weight:600}
  .sign{
    margin-top:26px;padding-top:18px;border-top:1px solid var(--hero-rule);
    font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--honey);letter-spacing:.06em;
  }
  .truck{margin:0 0 26px}
  .truck img{
    display:block;width:100%;height:auto;max-width:100%;border-radius:2px;
    border:1px solid var(--hero-rule);
  }
  .truck figcaption{
    font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
    color:var(--hero-ink-2);margin-top:10px;
  }
  .miles{list-style:none;margin:0;padding:0;display:grid;gap:0}
  .miles li{
    display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
    padding:15px 0;border-bottom:1px solid var(--hero-rule);
  }
  .miles li:first-child{padding-top:0}
  .miles li:last-child{border-bottom:0}
  .miles .when{
    font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;
    color:var(--honey);letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .miles .what{font-size:14.5px;color:var(--hero-ink-2)}

  /* ---------- photo discount offer ---------- */
  .offer{background:var(--surface-2);border-block:1px solid var(--rule)}
  .offer-grid{
    display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);
    gap:40px;align-items:center;margin-top:8px;
  }
  @media (max-width:760px){ .offer-grid{grid-template-columns:1fr} }
  .offer h2{margin-bottom:12px}
  .offer ol{
    list-style:none;margin:24px 0 0;padding:0;
    display:grid;gap:14px;counter-reset:o;
  }
  .offer ol li{
    counter-increment:o;display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:baseline;
  }
  .offer ol li::before{
    content:counter(o);
    font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
    color:#0D0E10;background:var(--honey);border-radius:50%;
    width:22px;height:22px;display:grid;place-items:center;
  }
  .offer ol strong{font-weight:600}
  .offer ol span{color:var(--ink-2);font-size:14.5px}
  .tile{
    border:2px solid var(--honey);border-radius:2px;padding:28px 24px;text-align:center;
    background:var(--surface);
  }
  .tile .amt{
    font-family:"Archivo Black",Archivo,sans-serif;font-size:clamp(46px,9vw,64px);
    line-height:1;letter-spacing:-.03em;color:var(--honey-ink);
    font-variant-numeric:tabular-nums;display:block;
  }
  .tile .off{
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--copper);
    display:block;margin-top:10px;
  }
  .tile p{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
  .tile a{
    display:block;margin-top:18px;font-family:"IBM Plex Mono",monospace;
    font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;
  }
  .tile a:hover{color:var(--honey-ink)}

  a:focus-visible,button:focus-visible{outline:2px solid var(--honey);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}