/* BRAND TOKENS — locked 2026-08-07 to the CREATIVE EDGE / OUTDOOR LIVING
   identity (near-black, white, vivid green).

   HOW THE GREEN WAS PICKED. Sampled from the two brand mockups (truck wrap +
   trailer). Both are phone photos of a screen, so brightness and saturation are
   blown out and untrustworthy; HUE is not, and it checked out on both frames
   after white-balancing against the white wordmark sitting in the same photo
   (white measured 239,239,238 and 229,229,228 — already neutral, so no
   correction was needed and the hue reading stands). Median hue 116-117 on both.
   #0FB735 from the designer's email-signature styling sits at hue 134, which is
   visibly a different, more emerald green than the wrap, so it was NOT adopted
   as-is. --brand keeps the measured hue 116 and takes a sane digital
   saturation/value instead of the photo's blown 0.95.

   CONTRAST, measured not assumed (WCAG 2.1, site is dark end to end):
     --brand   on --bg      9.48:1   AAA
     --brand   on --panel   8.75:1   AAA
     --brand-ink on --brand 9.39:1   AAA   <- filled buttons
     --brand-2 on --bg     11.68:1   AAA   <- accent text and links
   ⛔ White on --brand is 2.05:1 and FAILS. Button labels use --brand-ink
   (near-black), which is also what the wrap does: dark ink, green field. The
   old build had white on #18a844 at 3.12:1, which failed AA already. */
  :root{
    --bg:#0c0d10; --panel:#15171c; --panel-2:#111318; --line:#262a31; --muted:#aeb6c2; --ink:#ffffff;
    --brand:#2bd11f; --brand-2:#60e356; --brand-ink:#0b0f12;
    --brand-glow:rgba(43,209,31,.32); --maxw:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* TOP BAR — logo + tap-to-call only. No nav on an LP (attention ratio 1:1). */
  header{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
    padding:13px 24px;background:rgba(12,13,16,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  header .logo{height:44px;width:auto}
  .mainnav{display:flex;gap:24px;font-size:14.5px;font-weight:600;color:#d5dbe4}
  .mainnav a:hover,.mainnav a[aria-current]{color:var(--brand-2)}
  @media(max-width:860px){
    header{flex-wrap:wrap;padding:10px 16px 4px}
    header .logo{height:36px}
    .mainnav{order:3;width:100%;overflow-x:auto;gap:18px;padding:8px 0 4px;scrollbar-width:none}
    .mainnav::-webkit-scrollbar{display:none}
    .mainnav a{white-space:nowrap;font-size:13.5px}
  }
  header .wordmark{font-weight:800;font-size:16px;letter-spacing:-.01em}
  header .wordmark span{color:var(--brand)}
  .tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--brand-2)}
  .tel svg{stroke:var(--brand-2)}

  /* HERO — form above the fold */
  .hero{position:relative;overflow:hidden}
  .hero__bg{position:absolute;inset:0;z-index:0}
  .hero__bg img{width:100%;height:100%;object-fit:cover}
  /* Overlay must keep the left column legible WITHOUT hiding the design render —
     this is a visual trade, the work is the proof. Heavy left, clear right. */
  /* Lighter overall wash so the scene actually reads, with a TARGETED scrim behind
     the copy column only. A full-width wash hid the subject (the pool sat invisible
     behind the headline); a local scrim keeps type legible without blacking out the work. */
  .hero__bg::after{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg,rgba(10,11,13,.72) 0%,rgba(10,11,13,.42) 34%,rgba(10,11,13,.20) 64%,rgba(10,11,13,.10) 100%),
    linear-gradient(0deg,var(--bg),transparent 34%)}
  .h-copy,.h-support{position:relative}
  .h-copy::before,.h-support::before{content:"";position:absolute;inset:-26px -40px -18px -34px;z-index:-1;
    background:radial-gradient(80% 120% at 22% 50%,rgba(8,9,11,.90),rgba(8,9,11,.62) 55%,transparent 88%)}
  /* Desktop: copy + support stack in col 1, form holds col 1.
     Mobile: headline, then the FORM, then sub + trust. The form must never be
     pushed down by supporting copy — Continue has to stay above the fold. */
  .hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:12px 40px;align-items:center;
    grid-template-areas:"copy form" "support form";padding:46px 0 56px}
  .h-copy{grid-area:copy;align-self:end}
  .h-form{grid-area:form}
  .h-support{grid-area:support;align-self:start}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--brand-2);font-weight:600;margin-bottom:18px;border:1px solid var(--line);background:rgba(43,209,31,.1);padding:6px 13px;border-radius:999px}
  .eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--brand)}
  h1{font-weight:800;font-size:clamp(30px,3.7vw,44px);line-height:1.08;letter-spacing:-.022em;max-width:19ch;
    text-shadow:0 2px 24px rgba(0,0,0,.55)}
  h1 .em{color:var(--brand-2)}
  .hero p.sub{margin-top:16px;font-size:16.5px;color:#dfe5ec;max-width:44ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  .htrust{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 18px;max-width:44ch}
  .htrust .t{display:flex;align-items:center;gap:7px;font-size:13px;color:#dfe5ec;font-weight:500;
    background:rgba(10,11,13,.5);border:1px solid rgba(255,255,255,.08);padding:6px 11px;border-radius:8px}
  .htrust .t svg{stroke:var(--brand);flex:0 0 auto}

  /* FORM CARD — locked contract, do not rename .form-card */
  .form-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 22px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
  .form-card .fc-h{font-size:21px;font-weight:800;letter-spacing:-.01em}
  .form-card .fc-s{font-size:13.5px;color:var(--muted);margin-top:5px;margin-bottom:14px}
  .form-card label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.03em;margin:12px 0 6px;text-transform:uppercase}
  .form-card input,.form-card select{width:100%;background:#0d0f13;border:1px solid #2c313a;border-radius:10px;color:#fff;font-size:16px;padding:13px;appearance:none}
  .form-card input:focus,.form-card select:focus{outline:none;border-color:var(--brand)}
  .form-card select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23aeb6c2' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
  .hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0}
  .fc-step{display:none}
  .fc-step.on{display:block;animation:fcIn .22s ease}
  @keyframes fcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .fc-q{font-size:15px;font-weight:700;color:#fff;margin:18px 0 8px;text-transform:none;letter-spacing:0}
  .fc-q:first-of-type{margin-top:6px}
  .fc-prog{display:flex;gap:6px;margin:2px 0 14px}
  .fc-prog i{height:3px;flex:1;border-radius:2px;background:#262a31}
  .fc-prog i.on{background:var(--brand)}
  .fc-back{background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;padding:0 0 10px;cursor:pointer}
  .fc-back:hover{color:var(--brand-2)}
  .fc-hint{font-size:11.5px;color:var(--muted);margin:-2px 0 7px;font-weight:400;text-transform:none;letter-spacing:0}
  .fc-err{display:none;color:#ff7a6b;font-size:12.5px;margin-top:9px;font-weight:600}
  .fc-err.on{display:block}
  .fc-btn{width:100%;margin-top:18px;background:var(--brand);color:var(--brand-ink);font-weight:800;font-size:17px;border:none;border-radius:11px;padding:16px;cursor:pointer;transition:.2s}
  .fc-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .fc-micro{margin-top:12px;font-size:11.5px;color:var(--muted);text-align:center}
  .fc-done{display:none;text-align:center;padding:20px 6px}
  .fc-done.on{display:block}
  .fc-done .ok{width:52px;height:52px;border-radius:50%;background:rgba(43,209,31,.14);color:var(--brand-2);display:grid;place-items:center;margin:0 auto 14px}

  /* SECTIONS */
  section.band{padding:clamp(54px,8vh,88px) 0;border-top:1px solid var(--line)}
  .band--alt{background:var(--panel-2)}
  .kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2);font-weight:600;margin-bottom:14px}
  h2{font-weight:800;font-size:clamp(26px,3.7vw,40px);line-height:1.1;letter-spacing:-.02em;max-width:20ch}
  h2 .em{color:var(--brand-2)}
  .lede{margin-top:16px;color:var(--muted);font-size:17px;max-width:58ch}
  .svcs{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .svc{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 20px;transition:.18s}
  a.svc:hover{border-color:var(--brand);transform:translateY(-2px)}
  .svc h4{font-size:18px;font-weight:700;margin-bottom:8px}
  .svc p{color:var(--muted);font-size:14.5px}
  .svc .go{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--brand-2)}
  .areas{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;max-width:820px}
  .areas span{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14.5px;color:#d5dbe4}
  .pains{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:920px}
  .pain{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 17px;color:#d5dbe4;font-size:15px}
  .pain .pi{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:rgba(255,90,74,.14);color:#ff7a6b;display:grid;place-items:center;font-weight:700;font-size:13px;margin-top:1px}
  .callout{margin-top:26px;background:rgba(43,209,31,.08);border:1px solid rgba(43,209,31,.3);border-radius:14px;padding:20px 22px;max-width:920px;font-size:16.5px;color:#e8edf3}
  .steps{margin-top:38px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .step .n{font-size:30px;color:var(--brand);font-weight:800}
  .step h4{font-size:17px;margin:10px 0 7px;font-weight:700}
  .step p{color:var(--muted);font-size:14.5px}
  .gal{margin-top:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .gal--built{grid-template-columns:repeat(4,1fr)}
  .gal--built .w2{grid-column:span 2}
  /* 5 tiles into a 4-col grid: row 1 = w2 + 2 singles, row 2 = 2 wide. No ragged edge. */
  .gal--built figure:nth-child(4),.gal--built figure:nth-child(5){grid-column:span 2}
  .gal figure{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel);position:relative}
  .gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
  /* brochure sources are square, so this gallery runs 1:1 and doesn't crop them to slivers */
  .gal--built img{aspect-ratio:1}
  .gal--built .w2 img{aspect-ratio:2}
  .gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;font-size:12.5px;color:#e8edf3;
    background:linear-gradient(0deg,rgba(8,9,11,.92),transparent)}
  .quote{margin-top:30px;border-left:3px solid var(--brand);padding:6px 0 6px 20px;max-width:660px}
  .quote p{font-size:19px;font-weight:600;line-height:1.4}
  .quote cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--muted)}
  .offer{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px 30px;text-align:center;max-width:780px;margin:0 auto}
  .offer h2{margin:0 auto;max-width:24ch}
  .offer .warn{color:var(--muted);font-size:14.5px;margin-top:18px;max-width:60ch;margin-left:auto;margin-right:auto}
  .faq{margin-top:34px;max-width:780px}
  .faq details{border-bottom:1px solid var(--line);padding:16px 0}
  .faq summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--brand-2);font-size:22px;line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq p{color:var(--muted);font-size:15px;margin-top:12px}
  .cta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:var(--brand-ink);font-weight:800;font-size:17px;padding:16px 28px;border-radius:12px;box-shadow:0 14px 40px -8px var(--brand-glow);transition:.2s}
  .cta-btn:hover{transform:translateY(-2px)}
  .final{text-align:center;background:radial-gradient(90% 120% at 50% 0%,rgba(43,209,31,.1),transparent 60%),var(--panel-2)}
  .final h2{margin:0 auto;max-width:18ch}
  footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:13px;text-align:center}
  footer a{color:var(--brand-2);font-weight:600}
  footer .fl{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center}
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:11px 16px;background:rgba(12,13,16,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .sticky-cta a{display:block;text-align:center;background:var(--brand);color:var(--brand-ink);font-weight:800;padding:14px;border-radius:11px}

  @media(max-width:860px){
    .hero__grid{grid-template-columns:1fr;grid-template-areas:"copy" "form" "support";gap:18px;padding:18px 0 36px}
    .hero__bg::after{background:linear-gradient(0deg,rgba(10,11,13,.97) 30%,rgba(10,11,13,.72) 100%)}
    .eyebrow{margin-bottom:12px;font-size:11px;padding:5px 11px}
    h1{font-size:clamp(27px,7.4vw,33px)}
    .hero p.sub{margin-top:0;font-size:15.5px}
    .form-card{padding:20px 18px}
    .form-card .fc-s{margin-bottom:10px}
    .fc-q{margin:14px 0 7px;font-size:14.5px}
    .fc-btn{margin-top:15px;padding:15px}
    .pains{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr;gap:20px}
    .gal{grid-template-columns:1fr}
    .svcs{grid-template-columns:1fr}
    .areas{gap:8px}
    .areas span{font-size:13.5px;padding:8px 13px}
    .gal--built{grid-template-columns:1fr 1fr}
    .gal--built .w2{grid-column:span 2}
    .tel span{display:none}
    .sticky-cta{display:block}
    body{padding-bottom:70px}
  }

  /* ── Crew gallery (About). Portrait headshots, 5 across on desktop and
     3 across on phones. These are his REAL staff, which is the whole point:
     he has zero Google reviews, so faces are the only proof he owns. ── */
  .gal--crew{grid-template-columns:repeat(5,1fr);gap:16px}
  .gal--crew figure{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .gal--crew img{width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover}
    /* The base .gal figcaption is an ABSOLUTE overlay (correct for the built-work
     gallery, where the caption sits over the photo). Crew headshots must not do
     that — it puts the name across the person's chest and face. Reset to flow. */
  .gal--crew figcaption{position:static;background:none;padding:11px 12px 13px;font-size:13px;line-height:1.45;color:var(--muted)}
  .gal--crew figcaption strong{color:var(--ink);font-weight:700;font-size:13.5px}
  @media(max-width:860px){
    .gal--crew{grid-template-columns:repeat(3,1fr);gap:10px}
    .gal--crew figcaption{padding:8px 9px 10px;font-size:12px}
    .gal--crew figcaption strong{font-size:12.5px}
  }

  /* ── Contact page layout. Deliberately NOT .hero__grid: that grid uses
     grid-template-areas "copy" "form" on mobile, which pushes the form below
     the contact details and below the fold. The locked Brandon format puts the
     form above the fold, so this grid relies on DOM order (form first). ── */
  .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;margin-top:30px}
  @media(max-width:860px){
    .contact-grid{grid-template-columns:1fr;gap:22px;margin-top:22px}
  }

  /* An h1 inside a content band is not sitting over a hero photo, so it does not
     need the legibility text-shadow the hero h1 carries. */
  .band h1{text-shadow:none;max-width:20ch}

  /* ── Full-bleed banner image, used to break up text-only pages.
     Fixed aspect so it never causes layout shift on load. ── */
  .banner{position:relative;width:100%;overflow:hidden;border-radius:0;line-height:0}
  .banner img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:21/9}
  .banner--tall img{aspect-ratio:16/9}
  .banner figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 12px;
    font-size:12.5px;line-height:1.5;color:#e8edf3;
    background:linear-gradient(0deg,rgba(8,9,11,.9),transparent)}
  .banner figcaption .wrap{padding:0}
  @media(max-width:860px){
    .banner img{aspect-ratio:16/10}
    .banner--tall img{aspect-ratio:4/3}
    .banner figcaption{font-size:11.5px;padding:22px 16px 10px}
  }

  /* Post header image sits inside the narrow article column. */
  .post-hero{margin:26px 0 8px;border-radius:14px;overflow:hidden;border:1px solid var(--line);line-height:0}
  .post-hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

  /* ── Bright hero photo variant.
     The default .hero__bg::after gradient was tuned against the Bruere render,
     which is dark on the left. The Kalamalka Lake photo is bright edge to edge,
     so that overlay leaves the headline relying on its text-shadow, which reads
     as a grey box around the copy. This deepens the wash on the copy side. ── */
  .hero--bright .hero__bg::after{background:
    linear-gradient(90deg,rgba(8,9,11,.88) 0%,rgba(8,9,11,.74) 38%,rgba(8,9,11,.42) 68%,rgba(8,9,11,.26) 100%),
    linear-gradient(0deg,var(--bg),transparent 40%)}
  .hero--bright h1{text-shadow:0 2px 10px rgba(0,0,0,.35)}
  .hero--bright p.sub{text-shadow:0 1px 8px rgba(0,0,0,.4)}
  @media(max-width:860px){
    /* Lighter than the default mobile hero wash on purpose: on this page the
       photo IS the point, so let the lake read. The headline keeps its own
       text-shadow and the form sits on a solid card, so neither needs the
       heavier blackout the default hero uses. */
    .hero--bright .hero__bg::after{background:
      linear-gradient(0deg,rgba(8,9,11,.94) 30%,rgba(8,9,11,.44) 100%)}
  }

  /* ── Clickable service tiles: photo + label, whole tile is the link.
     Replaces the text-only .svc cards on the services page. ── */
  .tiles{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .tile{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);
    background:var(--panel);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
  .tile img{width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover;
    transition:transform .35s ease;filter:saturate(.96)}
  .tile::after{content:"";position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(6,7,9,.92) 0%,rgba(6,7,9,.42) 42%,rgba(6,7,9,.06) 100%)}
  .tile .lab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 15px 15px}
  .tile .lab b{display:block;color:#fff;font-weight:700;font-size:16px;letter-spacing:-.01em}
  .tile .lab span{display:block;margin-top:3px;color:#c2cad5;font-size:12.5px;line-height:1.45}
  .tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:var(--brand);
    box-shadow:0 18px 44px -18px var(--brand-glow);outline:none}
  .tile:hover img{transform:scale(1.045)}
  @media(prefers-reduced-motion:reduce){
    .tile,.tile img{transition:none}
    .tile:hover{transform:none}
    .tile:hover img{transform:none}
  }
  @media(max-width:980px){ .tiles{grid-template-columns:repeat(3,1fr);gap:13px} }
  @media(max-width:700px){
    .tiles{grid-template-columns:repeat(2,1fr);gap:11px}
    .tile .lab{padding:12px 11px 11px}
    .tile .lab b{font-size:14px}
    .tile .lab span{font-size:11.5px}
  }

  /* ── Stat strip. Four hard facts under the About hero. Every number here is
     verified: 20 years traces to his own words, 9 is the published roster,
     8 is the locked town list, 2 year warranty is his stated guarantee.
     Do not add a fifth without something equally checkable behind it. ── */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:0}
  .stat{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:20px 18px}
  .stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--brand-2);line-height:1}
  .stat span{display:block;margin-top:7px;font-size:13.5px;line-height:1.45;color:var(--muted)}
  @media(max-width:860px){
    .stats{grid-template-columns:repeat(2,1fr);gap:10px}
    .stat{padding:15px 14px}
    .stat b{font-size:24px}
    .stat span{font-size:12.5px}
  }

  /* ── Two-column split: copy one side, image the other. ── */
  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin-top:34px}
  .split--flip .split__media{order:-1}
  .split__media{border-radius:14px;overflow:hidden;border:1px solid var(--line);line-height:0}
  .split__media img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
  @media(max-width:860px){
    .split{grid-template-columns:1fr;gap:22px;margin-top:24px}
    .split--flip .split__media{order:0}
  }

  /* ── Accent callout for the disqualifying / damaging-admission block.
     It should read as deliberate honesty, not as body copy people skim. ── */
  .callout{border-left:3px solid var(--brand);background:
    linear-gradient(90deg,rgba(43,209,31,.09),rgba(43,209,31,0) 62%);
    border-radius:0 14px 14px 0;padding:26px 26px 24px;margin-top:26px}
  .callout p{color:#dbe2ea}
  .callout p + p{margin-top:14px}
  @media(max-width:860px){ .callout{padding:20px 18px} }

  /* Hero background focal point. object-fit:cover crops to the hero's very wide
     strip, and the default centre crop can cut the subject out. Set the focal
     point per page rather than reaching for a different photo. */
  .hero--focus-low .hero__bg img{object-position:center 66%}
  @media(max-width:860px){ .hero--focus-low .hero__bg img{object-position:center 58%} }