:root{
    --yellow:#f2a900;      /* safety yellow, taken from the logo */
    --yellow-lift:#ffc400; /* brighter highlight */
    --amber-deep:#8a5d00;  /* shadow tone for depth on yellow */
    --ink:#151210;         /* HammerDuck black, already used across the app */
    --ink-soft:#3a3a3a;
    --paper:#ffffff;
    --warm:#e5e1d8;        /* warm grey from the existing palette */
    --warm-deep:#cbc5b6;
    --measure:64ch;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Barlow',system-ui,-apple-system,sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.condensed{
    font-family:'Barlow Condensed','Barlow',system-ui,sans-serif;
    font-weight:800;
    line-height:.95;
    letter-spacing:-.01em;
    margin:0;
  }

  a{color:inherit}
  img{max-width:100%;display:block}

  :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .on-dark :focus-visible,.hero :focus-visible{outline-color:var(--yellow-lift)}

  .wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}

  /* Hazard striping - the one piece of decoration that earns its place, because
     it is literal job-site vernacular rather than an abstract gradient. */
  .hazard{
    height:14px;
    background:repeating-linear-gradient(135deg,
      var(--yellow) 0 22px, var(--ink) 22px 44px);
  }

  /* ---------- masthead ---------- */
  .masthead{
    background:var(--ink);
    color:var(--paper);
    padding:.9rem 0;
  }
  .masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
  .mark{display:flex;align-items:center;gap:.7rem}
  .mark img{height:100px;width:auto;display:block}
  .mark span{font-family:'Barlow Condensed';font-weight:800;font-size:1.7rem;letter-spacing:.01em}
  .mark span em{font-style:normal;color:var(--yellow)}
  .status{
    font-family:'Barlow Condensed';font-weight:700;font-size:1.05rem;
    color:var(--warm);display:flex;align-items:center;gap:.55rem;
  }
  .dot{width:9px;height:9px;border-radius:50%;background:var(--yellow);flex:0 0 auto}

  /* ---------- hero ---------- */
  .hero{background:var(--ink);color:var(--paper);padding:clamp(2.5rem,7vw,5rem) 0 0}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
  .hero h1{
    font-size:clamp(2.6rem,7.2vw,5.4rem);
    text-transform:uppercase;
    font-style:italic;
    text-wrap:balance;      /* stops "POST THE / JOB." stranding a word */
    max-width:14ch;
  }
  .hero h1 .line2{color:var(--yellow);display:block}
  .lede{
    font-size:clamp(1.08rem,2vw,1.3rem);
    color:#d8d4cc;max-width:52ch;margin:1.4rem 0 0;
  }
  .hero-art{position:relative}
  .hero-art img{
    width:100%;border-radius:14px;
    box-shadow:0 18px 0 -6px var(--amber-deep);
  }
  .cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin:2rem 0 0}
  .btn{
    display:inline-block;border:0;cursor:pointer;text-decoration:none;
    font-family:'Barlow Condensed';font-weight:800;font-size:1.22rem;
    text-transform:uppercase;letter-spacing:.02em;
    padding:.85rem 1.6rem;border-radius:8px;
    transition:transform .12s ease, background .12s ease;
  }
  .btn-primary{background:var(--yellow);color:var(--ink)}
  .btn-primary:hover{background:var(--yellow-lift);transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px #4a443c}
  .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--yellow);transform:translateY(-2px)}
  .hero-foot{margin:2.4rem 0 0;padding:0 0 clamp(2rem,4vw,3rem)}
  .hero-foot p{color:#8f8879;font-size:.95rem;margin:0;max-width:60ch}

  /* ---------- what it is ---------- */
  .plain{padding:clamp(3rem,7vw,5rem) 0}
  .kicker{font-size:clamp(1.9rem,4.4vw,3rem);max-width:20ch;text-transform:uppercase;font-style:italic}
  .pairs{margin:2.5rem 0 0;border-top:3px solid var(--ink)}
  .pair{
    display:grid;grid-template-columns:auto 1fr;gap:1.5rem;
    padding:1.5rem 0;border-bottom:1px solid var(--warm-deep);
  }
  .pair .n{
    font-family:'Barlow Condensed';font-weight:800;font-size:2.1rem;
    color:var(--yellow);line-height:1;min-width:2.4ch;
    -webkit-text-stroke:1px var(--ink);
  }
  .pair h3{font-size:1.45rem;margin:0 0 .35rem}
  .pair p{margin:0;color:var(--ink-soft);max-width:var(--measure)}

  /* ---------- founding contractors: the centrepiece ---------- */
  .founding{background:var(--yellow);color:var(--ink);padding:clamp(3rem,7vw,5rem) 0}
  .founding-head{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
  .founding-head img{width:clamp(96px,14vw,150px);height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18))}
  .founding h2{font-size:clamp(2.2rem,5.6vw,3.9rem);text-transform:uppercase;font-style:italic}
  .founding-sub{margin:.7rem 0 0;font-size:1.1rem;max-width:56ch;font-weight:500}

  .allocation{
    margin:2.5rem 0 0;background:var(--ink);color:var(--paper);
    border-radius:14px;padding:clamp(1.4rem,3vw,2.2rem);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.4rem 2rem;
  }
  .alloc h3{font-size:2.4rem;color:var(--yellow);margin:0 0 .2rem}
  .alloc p{margin:0;color:#c9c4ba;font-size:.98rem}
  .alloc p strong{color:var(--paper);font-weight:600}

  /* ---------- forms ---------- */
  .forms{padding:clamp(3rem,7vw,5rem) 0;background:var(--warm)}
  .form-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
  .card{background:var(--paper);border-radius:14px;padding:clamp(1.4rem,3vw,2rem);border:2px solid var(--ink)}
  .card.secondary{border-color:var(--warm-deep)}
  .card h2{font-size:1.9rem;text-transform:uppercase;font-style:italic}
  .card p.note{color:var(--ink-soft);margin:.6rem 0 1.4rem;font-size:.97rem;max-width:52ch}
  label{display:block;font-weight:600;font-size:.92rem;margin:0 0 1rem}
  label .req{color:#b3261e}
  input,select{
    display:block;width:100%;margin-top:.35rem;padding:.75rem .8rem;
    font:inherit;font-size:1rem;color:var(--ink);
    background:var(--paper);border:1.5px solid #bdb7aa;border-radius:8px;
  }
  input:focus,select:focus{border-color:var(--ink)}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  .btn-full{width:100%;text-align:center}
  .fineprint{font-size:.84rem;color:#6d675c;margin:1rem 0 0}
  .fineprint a{color:var(--ink)}

  /* ---------- footer ---------- */
  .foot{background:var(--ink);color:#8f8879;padding:2.5rem 0;font-size:.9rem}
  .foot .wrap{display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap}
  .foot a{color:var(--warm);text-decoration:underline}
  .foot p{margin:0 0 .5rem;max-width:62ch}

  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  @media (max-width:860px){
    .hero-grid,.form-grid{grid-template-columns:1fr}
    /* Keep the logo from eating the whole first screen on a phone - the headline
       should be visible without scrolling. */
    .hero-art{order:-1;max-width:230px}
    .hero-art img{box-shadow:0 12px 0 -5px var(--amber-deep)}
    .founding-head{grid-template-columns:1fr;text-align:left}
    .two{grid-template-columns:1fr}
  }

  /* ==================================================================
     ADDED: story / video / comparison / pledge sections.
     Everything below reuses the existing palette and type scale - no new
     fonts, no new brand colours, no change to the logo assets.
     ================================================================== */

  .section-dark{background:var(--ink);color:var(--paper);padding:clamp(3rem,7vw,5rem) 0}
  .section-warm{background:var(--warm);padding:clamp(3rem,7vw,5rem) 0}
  .eyebrow{
    font-family:'Barlow Condensed';font-weight:700;font-size:1.05rem;
    letter-spacing:.06em;text-transform:uppercase;color:var(--yellow);
    margin:0 0 .6rem;
  }
  .section-dark .eyebrow{color:var(--yellow)}
  .section-warm .eyebrow{color:var(--amber-deep)}
  .h-sec{font-size:clamp(2rem,5vw,3.3rem);text-transform:uppercase;font-style:italic;max-width:18ch}
  .section-dark .h-sec{color:var(--paper)}
  .p-lead{font-size:clamp(1.05rem,1.8vw,1.2rem);max-width:60ch;margin:1.2rem 0 0}
  .section-dark .p-lead{color:#d8d4cc}
  .section-warm .p-lead{color:var(--ink-soft)}

  /* ---------- video ---------- */
  .video-wrap{
    margin:2.2rem auto 0;max-width:820px;position:relative;
    border-radius:14px;overflow:hidden;border:3px solid var(--yellow);
    background:#000;box-shadow:0 18px 0 -6px var(--amber-deep);
  }
  .video-wrap video{display:block;width:100%;height:auto;cursor:pointer}
  /* The cover is scoped to the stage, NOT the whole wrapper, so the control
     bar underneath stays clickable while the cover is showing. */
  .video-stage{position:relative;display:block}
  .video-cover{
    position:absolute;inset:0;border:0;padding:0;margin:0;width:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.8rem;cursor:pointer;color:var(--paper);
    background:rgba(21,18,16,.42);
    font-family:'Barlow Condensed';font-weight:800;
    text-transform:uppercase;font-style:italic;letter-spacing:.02em;
    transition:background .15s ease;
  }
  .video-cover:hover{background:rgba(21,18,16,.28)}
  .video-cover[hidden]{display:none}
  .play-ring{
    width:clamp(66px,10vw,88px);height:clamp(66px,10vw,88px);border-radius:50%;
    background:var(--yellow);color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 0 var(--amber-deep);
  }
  .play-ring svg{width:42%;height:42%;margin-left:12%}
  .video-cover .cover-label{font-size:clamp(1.1rem,2.4vw,1.5rem);text-shadow:0 2px 6px rgba(0,0,0,.6)}
  .video-cover .cover-sub{
    font-family:'Barlow';font-weight:600;font-style:normal;text-transform:none;
    font-size:.92rem;letter-spacing:0;color:#e8e4dc;text-shadow:0 2px 6px rgba(0,0,0,.7);
  }
  .video-bar{
    display:flex;align-items:center;gap:.7rem;
    padding:.6rem .8rem;background:var(--ink);border-top:2px solid var(--yellow);
  }
  .vbtn{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:8px;cursor:pointer;
    background:#2a2521;color:var(--paper);border:1.5px solid #4a443c;
    transition:background .12s ease,border-color .12s ease;
  }
  .vbtn:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
  .vbtn svg{width:18px;height:18px;pointer-events:none}
  .vbtn .ic{display:none}
  .vbtn .ic.on{display:block}
  .vprogress{
    flex:1 1 auto;height:8px;border-radius:99px;background:#3a342e;
    overflow:hidden;cursor:pointer;min-width:60px;
  }
  .vfill{display:block;height:100%;width:0;background:var(--yellow);border-radius:99px}
  .vtime{
    flex:0 0 auto;font-family:'Barlow Condensed';font-weight:700;
    font-size:1rem;color:var(--warm);font-variant-numeric:tabular-nums;
  }
  .video-note{
    margin:1rem auto 0;max-width:820px;text-align:center;
    color:#8f8879;font-size:.9rem;
  }

  /* ---------- story ---------- */
  .story-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(1.5rem,4vw,3rem);margin:2.4rem 0 0;align-items:start;
  }
  .story-grid p{margin:0 0 1.1rem;max-width:56ch}
  .story-grid p:last-child{margin-bottom:0}
  .pullquote{
    border-left:5px solid var(--yellow);padding:.2rem 0 .2rem 1.4rem;
    font-family:'Barlow Condensed';font-weight:800;font-style:italic;
    font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.05;
    text-transform:uppercase;color:var(--paper);
  }
  .pullquote span{color:var(--yellow);display:block}

  /* ---------- comparison ---------- */
  .vs{margin:2.6rem 0 0;border-top:3px solid var(--ink)}
  .vs-head,.vs-row{
    display:grid;grid-template-columns:minmax(120px,1.1fr) 1fr 1fr;
    gap:0 1.2rem;align-items:stretch;
  }
  .vs-head > div{
    padding:.9rem .9rem;font-family:'Barlow Condensed';font-weight:800;
    text-transform:uppercase;font-style:italic;font-size:1.15rem;line-height:1.05;
  }
  .vs-head .them{background:var(--warm-deep);color:#4a443c;border-radius:10px 10px 0 0}
  .vs-head .us{background:var(--ink);color:var(--yellow);border-radius:10px 10px 0 0}
  .vs-row > div{padding:1rem .9rem;border-bottom:1px solid var(--warm-deep);font-size:.97rem}
  .vs-row .lbl{
    font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;
    font-size:1.12rem;line-height:1.1;color:var(--ink);
  }
  .vs-row .them{background:#dedacf;color:#4a443c}
  .vs-row .us{background:var(--ink);color:#e2ded6}
  .vs-row .us strong{color:var(--yellow);font-weight:700}
  .vs-row:last-child .them{border-radius:0 0 10px 10px}
  .vs-row:last-child .us{border-radius:0 0 10px 10px}
  .vs-foot{margin:1.4rem 0 0;font-size:.86rem;color:#6d675c;max-width:78ch}

  /* ---------- pledge ---------- */
  .pledges{
    margin:2.4rem 0 0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;
  }
  .pledge{
    background:var(--paper);border:2px solid var(--ink);border-radius:14px;
    padding:1.3rem 1.3rem 1.4rem;
  }
  .pledge h3{
    font-size:1.3rem;text-transform:uppercase;font-style:italic;margin:0 0 .45rem;
  }
  .pledge p{margin:0;color:var(--ink-soft);font-size:.95rem}
  .pledge .tick{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:50%;background:var(--yellow);
    color:var(--ink);margin:0 0 .7rem;
  }
  .pledge .tick svg{width:16px;height:16px}

  /* ---------- sticky signup bar ---------- */
  .stickybar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ink);border-top:3px solid var(--yellow);
    padding:.6rem .9rem;display:flex;gap:.6rem;align-items:center;
    justify-content:center;flex-wrap:wrap;
    transform:translateY(120%);transition:transform .22s ease;
  }
  .stickybar.show{transform:translateY(0)}
  .stickybar p{
    margin:0;color:var(--warm);font-family:'Barlow Condensed';font-weight:700;
    font-size:1.05rem;text-transform:uppercase;
  }
  .stickybar .btn{font-size:1.02rem;padding:.6rem 1.1rem}
  @media (max-width:560px){
    .stickybar p{display:none}
    .stickybar .btn{flex:1 1 auto;text-align:center}
  }

  @media (max-width:860px){
    .story-grid{grid-template-columns:1fr}
    .vs-head,.vs-row{grid-template-columns:1fr}
    .vs-head{display:none}
    .vs-row{
      margin:0 0 1rem;border:2px solid var(--ink);border-radius:12px;overflow:hidden;
    }
    .vs-row > div{border-bottom:0}
    .vs-row .lbl{background:var(--warm-deep);padding:.7rem .9rem}
    .vs-row .them::before{
      content:"The big platforms";display:block;
      font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;
      font-size:.9rem;letter-spacing:.05em;color:#7a7266;margin:0 0 .25rem;
    }
    .vs-row .us::before{
      content:"HammerDuck";display:block;
      font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;
      font-size:.9rem;letter-spacing:.05em;color:var(--yellow);margin:0 0 .25rem;
    }
    .vs-row:last-child .them,.vs-row:last-child .us{border-radius:0}
  }

/* ==================================================================
   ADDED: trade page components (lawn-care.html, plumbing.html, etc.)
   Reuses existing tokens/type scale - no new fonts or brand colours.
   ================================================================== */

.mini-hero{background:var(--ink);color:var(--paper);padding:clamp(2.2rem,6vw,4rem) 0}
.mini-hero h1{font-size:clamp(2.1rem,5.5vw,3.6rem);text-transform:uppercase;font-style:italic;max-width:20ch}
.mini-hero p{font-size:clamp(1.02rem,1.8vw,1.18rem);color:#d8d4cc;max-width:60ch;margin:1.2rem 0 0}
.mini-hero .cta-row{margin-top:1.8rem}
.crumb{font-size:.88rem;color:#8f8879;margin:0 0 1rem}
.crumb a{color:var(--warm);text-decoration:underline}

.check-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem;max-width:72ch}
.check-list li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;font-size:1rem}
.check-list li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--yellow);margin-top:.5rem;flex:0 0 auto}
.section-dark .check-list li{color:#d8d4cc}
.section-warm .check-list li{color:var(--ink-soft)}

.tip-grid{margin:2rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.tip-card{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:1.2rem 1.3rem;font-size:.96rem;color:var(--ink-soft)}
.tip-card .tip-n{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--yellow);color:var(--ink);font-family:'Barlow Condensed';
  font-weight:800;font-size:.9rem;margin:0 0 .6rem;
}

.related{padding:clamp(2.4rem,5vw,3.5rem) 0}
.related h2{font-size:1.4rem;text-transform:uppercase;font-style:italic;margin:0 0 1.2rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.related-grid a{display:block;padding:.7rem 1rem;background:var(--warm);border-radius:8px;text-decoration:none;font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;font-size:.95rem;color:var(--ink);transition:background .12s ease}
.related-grid a:hover{background:var(--yellow)}

/* Secondary button variant for use on LIGHT backgrounds (section-warm, .card).
   .btn-ghost was only ever designed for dark backgrounds (.hero, .stickybar)
   and is unreadable on var(--warm) - this is the light-background equivalent. */
.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}