/* ==========================================================================
   HELVIXA WASTE — site stylesheet
   Brand: locked (lime #B7F126 + charcoal). Single committed theme.
   Structure: tokens · base · layout · components · pages · responsive
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* Ground + ink — neutrals biased green so they read chosen, not default */
  --paper:        #F7F8F3;
  --paper-2:      #EFF2EA;
  --surface:      #FFFFFF;
  --ink:          #151A15;
  --ink-2:        #2B332B;
  --ink-soft:     #5C665C;
  --ink-faint:    #666E65;   /* was #8B948A. Every small mono label on the
                                site uses this — breadcrumbs, section eyebrows,
                                CONFIRMED CAGE CAPACITY, the VOLUME/BIN BAGS
                                rows on the load cards, price-table headings,
                                offer small print. At #8B948A they measured
                                2.8-3.1:1 against the three page backgrounds,
                                where 4.5:1 is the minimum at that size: legible
                                on a desk, not on a phone outdoors. #666E65 is
                                4.7-5.3:1 on all three. Do not lighten it back
                                without re-measuring all three. */
  --line:         #DFE4DA;
  --line-strong:  #C8D0C2;

  /* Brand — locked */
  --lime:         #B7F126;
  --lime-hi:      #C8FF3D;
  --lime-deep:    #6F9A00;   /* lime for BORDERS, ICONS and outlines only.
                                3.0-3.3:1 on the page backgrounds — enough for a
                                border or a shape, NOT enough for words. */
  --lime-text:    #4A6600;   /* lime for TEXT. 5.8-6.6:1 on paper, paper-2,
                                white and lime-wash. Every green word on the site
                                uses this one: links in body copy, section
                                eyebrows, STEP 01, the chips. If you lighten it,
                                re-measure against all four backgrounds. */
  --lime-wash:    #EDF8D2;

  /* Dark anchor */
  --dark:         #12170F;
  --dark-2:       #1C231A;
  --dark-3:       #2A3327;
  --on-dark:      #F2F5EC;
  --on-dark-soft: #A9B3A3;

  /* Semantic — separate from the accent */
  --clay:         #B4552C;
  --clay-deep:    #8A3F1E;
  --clay-wash:    #FBEFE7;
  --clay-line:    #EED5C4;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Metrics */
  --wrap:    1160px;
  --wrap-nr: 900px;
  --gutter:  20px;
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
  --shadow-sm: 0 1px 2px rgba(21,26,21,.05);
  --shadow-md: 0 12px 30px -12px rgba(21,26,21,.18);
  --shadow-lg: 0 30px 70px -30px rgba(21,26,21,.30);
}

/* ----------------------------------------------------------------- 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--lime-deep);outline-offset:2px;border-radius:3px}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.15rem,1.55rem + 2.6vw,3.4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,1.3rem + 1.5vw,2.4rem);letter-spacing:-.026em}
h3{font-size:1.1rem;letter-spacing:-.012em}
h4{font-size:.95rem}
p{margin:0}

.lead{font-size:clamp(1.03rem,.99rem + .2vw,1.15rem);color:var(--ink-soft);max-width:62ch}
.prose{display:flex;flex-direction:column;gap:14px;max-width:68ch}
.prose p{color:var(--ink-soft)}
.prose a{color:var(--lime-text);text-decoration:underline;text-underline-offset:2px}
.muted{color:var(--ink-soft)}
.tnum{font-variant-numeric:tabular-nums}

/* Mono label — the spec-sheet voice used throughout */
.label{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:block;
}
.label--lime{color:var(--lime-text)}
.label--ondark{color:var(--on-dark-soft)}

.hide{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- 3. LAYOUT */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-nr)}

.band{padding-block:clamp(48px,6vw,84px)}
.band--tight{padding-block:clamp(34px,4vw,52px)}
.band--dark{background:var(--dark);color:var(--on-dark)}
.band--dark p{color:var(--on-dark-soft)}
.band--paper2{background:var(--paper-2)}

/* Section masthead: mono label + rule + heading. The rule is the spine. */
.masthead{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(24px,3vw,38px)}
.masthead__rule{height:1px;background:var(--line);margin-block:4px}
.band--dark .masthead__rule{background:var(--dark-3)}
.masthead__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.masthead__row h2{max-width:20ch}
.masthead__row p{max-width:46ch;color:var(--ink-soft);font-size:.97rem}
.band--dark .masthead__row p{color:var(--on-dark-soft)}

.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:16px}

/* ------------------------------------------------------------ 4. TOP + NAV */
.ticker{background:var(--dark);color:var(--on-dark-soft);font-family:var(--mono);font-size:.71rem;letter-spacing:.07em}
.ticker__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:8px;text-transform:uppercase}
.ticker__set{display:flex;gap:20px;flex-wrap:wrap}
.ticker a:hover{color:var(--lime)}

.nav{position:sticky;top:0;z-index:60;background:rgba(247,248,243,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.03em;white-space:nowrap}
.brand__mark{width:auto;height:34px;flex:none;display:block}
/* The mark is taller than it is wide, so height drives it and width follows.
   Was a square SVG tile until 15 Sep 2026, when the real logo replaced it. */
.brand__sub{display:block;font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase;margin-top:1px}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}

.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{padding:9px 12px;border-radius:var(--r-sm);font-size:.92rem;font-weight:500;color:var(--ink-2)}
.nav__links a:hover{background:var(--paper-2);color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--lime-deep)}
.nav__actions{display:flex;align-items:center;gap:8px}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:background .15s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .18s ease,top .18s ease}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.navpanel{display:none;border-top:1px solid var(--line);background:var(--paper)}
.navpanel.is-open{display:block}
.navpanel__in{display:flex;flex-direction:column;gap:2px;padding-block:12px 18px}
.navpanel a{padding:12px 10px;border-radius:var(--r-sm);font-weight:500;border-bottom:1px solid var(--line)}
.navpanel a:last-of-type{border-bottom:0}
.navpanel .btn{margin-top:12px;border-bottom:0}

/* ------------------------------------------------------------- 5. BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:11px 20px;border:1.5px solid transparent;border-radius:999px;
  font-family:var(--body);font-size:.93rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
  text-align:center;
}
.btn svg{flex:none}
.btn--primary{background:var(--lime);color:var(--dark);border-color:var(--lime)}
.btn--primary:hover{background:var(--lime-hi);border-color:var(--lime-hi)}
.btn--dark{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.btn--dark:hover{background:var(--ink-2);border-color:var(--ink-2)}
/* The site-wide SECONDARY button. Green, but outlined rather than filled, so
   it is obviously the second choice next to the solid lime primary — two
   identical lime buttons leave a customer with no idea which one you want
   pressed. Changed here rather than on the homepage alone, so the secondary
   button looks the same on all seventeen pages.
   TWO greens on purpose, and both are contrast-checked against the paper
   background: --lime-deep (#6F9A00) reads 3.12:1, which passes the 3.0 a
   border needs but FAILS the 4.5 a label needs — so the border is lime-deep
   and the text is the darker #4A6600 at 6.16:1. Do not set the text to
   lime-deep to "match"; it becomes hard to read on a phone in daylight. */
.btn--ghost{background:transparent;color:var(--lime-text);border-color:var(--lime-deep)}
.btn--ghost:hover{border-color:var(--lime-text);background:var(--lime-wash);color:#3C5300}
.btn--onDark{background:transparent;color:var(--on-dark);border-color:var(--dark-3)}
.btn--onDark:hover{border-color:var(--on-dark-soft);background:var(--dark-2)}
.btn--sm{min-height:44px;padding:8px 15px;font-size:.86rem}
/* 44px is the smallest target a thumb hits reliably, and box-sizing is
   border-box site-wide so this figure IS the rendered height, border
   included. This is the header "Get a quote" on every page. */
.btn--block{width:100%}
@media(prefers-reduced-motion:no-preference){.btn:active{transform:translateY(1px)}}

.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;color:var(--ink);border-bottom:1.5px solid var(--lime);padding-bottom:2px;white-space:nowrap}
.textlink svg{width:15px;height:15px;flex:none}
.textlink:hover{border-color:var(--lime-deep)}
.band--dark .textlink{color:var(--on-dark)}

/* ---------------------------------------------------------------- 6. HERO */
.hero{padding-block:clamp(36px,4.5vw,66px) clamp(30px,4vw,54px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero h1{max-width:16ch}
.hero__lead{max-width:48ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px}

/* Spec strip: the three physical facts, aligned like a data sheet */
.specstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;width:100%}
.specstrip__cell{background:var(--paper);padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.specstrip__v{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.specstrip__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* Hero panel — dark card, van illustration contained in its own frame */
.panel{background:var(--dark);color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-lg)}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:1px solid var(--dark-3);padding-bottom:13px}
.panel__title{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.015em}
.panel__art{background:var(--dark-2);border:1px solid var(--dark-3);border-radius:var(--r-md);padding:16px 14px;overflow:hidden}
.panel__art svg{width:100%;height:auto}
.panel__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.84rem;color:var(--on-dark-soft)}
.panel__price{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--on-dark);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- 7. LOAD GAUGE */
/* The signature device: volume vs weight on one vehicle. */
.gauge{display:flex;flex-direction:column;gap:13px}
.gauge__row{display:flex;flex-direction:column;gap:6px}
.gauge__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gauge__name{font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-soft)}
.gauge__read{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--on-dark);font-variant-numeric:tabular-nums}
.gauge__track{position:relative;height:10px;border-radius:999px;background:var(--dark-3);overflow:hidden}
.gauge__fill{position:absolute;inset-block:0;left:0;width:0;border-radius:999px;background:var(--lime);transition:width .5s cubic-bezier(.22,1,.36,1),background .3s ease}
.gauge__fill.is-over{background:var(--clay)}
.gauge__note{font-size:.78rem;line-height:1.5;color:var(--on-dark-soft);border-top:1px solid var(--dark-3);padding-top:11px}
.gauge__note strong{color:var(--on-dark);font-weight:600}
@media(prefers-reduced-motion:reduce){.gauge__fill{transition:none}}

/* Light variant for in-page use */
.gauge--light .gauge__name{color:var(--ink-faint)}
.gauge--light .gauge__read{color:var(--ink)}
.gauge--light .gauge__track{background:var(--paper-2);border:1px solid var(--line)}
.gauge--light .gauge__note{color:var(--ink-soft);border-color:var(--line)}
.gauge--light .gauge__note strong{color:var(--ink)}

/* ---------------------------------------------------------------- 8. CARDS */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:9px}
.card h3{letter-spacing:-.015em}
.card p{color:var(--ink-soft);font-size:.93rem}
.card__ico{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--lime-wash);color:var(--lime-deep);margin-bottom:3px}
.card__ico svg{width:18px;height:18px}
.band--dark .card{background:var(--dark-2);border-color:var(--dark-3)}
.band--dark .card p{color:var(--on-dark-soft)}
.band--dark .card__ico{background:var(--dark-3);color:var(--lime)}

.card--link{transition:border-color .16s ease,box-shadow .16s ease}
.card--link:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.card--link .textlink{margin-top:auto;padding-top:8px;align-self:flex-start}

/* Numbered process — numbering is real sequence, so it earns the markers */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.steps__item{padding:22px 20px 24px 0;border-right:1px solid var(--line);padding-right:20px;display:flex;flex-direction:column;gap:7px}
.steps__item:last-child{border-right:0}
.steps__item:not(:first-child){padding-left:20px}
.steps__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--lime-text);font-weight:500}
.steps__item h3{font-size:1.02rem}
.steps__item p{color:var(--ink-soft);font-size:.9rem}

/* --------------------------------------------------------- 9. PRICE TABLE */
.ptable{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.ptable__row{display:grid;grid-template-columns:1.1fr 1fr 1fr .9fr;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:center}
.ptable__row:last-child{border-bottom:0}
.ptable__head{background:var(--paper-2);font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.ptable__row.is-featured{background:var(--lime-wash)}
.ptable__band{font-family:var(--display);font-weight:700;font-size:1rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ptable__tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;background:var(--lime);color:var(--dark);padding:2px 7px;border-radius:999px;font-weight:500}
.ptable__cell{font-size:.9rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ptable__price{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- 10. NOTICES */
/* NOT a flex column. It was, and a flex column turns every child element AND
   every run of bare text into its own row — so a note whose sentence contains
   an inline link came out as four stacked fragments:
       Not sure which size you need?
       The
       waste calculator
       shows a photograph of each load size...
   Every note on the site is a bold opener followed by inline text, so the
   opener is simply made a block and the rest flows as one paragraph. That
   reproduces the old spacing exactly for the plain notes and repairs the
   four that contain a link or a live price span. */
.note{border:1px solid var(--line);border-left:3px solid var(--lime-deep);border-radius:var(--r-sm);background:var(--surface);padding:15px 18px;font-size:.91rem;color:var(--ink-soft);display:block}
.note > strong:first-child{display:block;margin-bottom:6px}
.note strong{color:var(--ink);font-weight:600}
.note--clay{border-left-color:var(--clay);background:var(--clay-wash);border-color:var(--clay-line);color:var(--clay-deep)}
.note--clay strong{color:var(--clay-deep)}
.note--todo{border-left-color:var(--clay);background:var(--clay-wash);border-color:var(--clay-line);color:var(--clay-deep);font-family:var(--mono);font-size:.8rem;line-height:1.6}

/* ---------------------------------------------------------------- 11. FORM */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:.83rem;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:.78rem;color:var(--ink-faint)}
input,select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:11px 13px;font-size:.94rem;transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lime-deep);box-shadow:0 0 0 3px rgba(111,154,0,.14)}
textarea{min-height:104px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235C665C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.check{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:.88rem;cursor:pointer}
.check:has(input:checked){border-color:var(--lime-deep);background:var(--lime-wash)}
.check input{width:16px;height:16px;accent-color:var(--lime-deep);flex:none;cursor:pointer}

/* ----------------------------------------------------------- 12. ESTIMATOR */
.estimator{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:18px;align-items:start}
.estimator__controls{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:14px}
.estimator__out{background:var(--dark);color:var(--on-dark);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:16px;position:sticky;top:84px}
.result{display:flex;flex-direction:column;gap:5px;border-bottom:1px solid var(--dark-3);padding-bottom:15px}
.result__v{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.5rem);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.result__v.is-quote{font-size:clamp(1.2rem,1rem + .8vw,1.45rem);color:var(--lime);line-height:1.2}
.result__sub{font-size:.84rem;color:var(--on-dark-soft);line-height:1.5}

/* ------------------------------------------------------------------ 13. FAQ */
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 40px 16px 0;font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.012em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--lime-text)}
.faq__a{padding:0 40px 18px 0;color:var(--ink-soft);font-size:.94rem;max-width:74ch}

/* ------------------------------------------------------------- 14. CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:.84rem;color:var(--ink-2)}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--lime-wash);border:1px solid #D7EAA8;color:#48660A;border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:600}
.badge svg{width:13px;height:13px;flex:none}
.band--dark .badge{background:var(--dark-3);border-color:#3A4536;color:var(--lime)}

/* -------------------------------------------------------------- 15. CTA BAR */
.ctabar{background:var(--dark);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;color:var(--on-dark);position:relative;overflow:hidden}
.ctabar__copy{max-width:46ch;display:flex;flex-direction:column;gap:9px;position:relative;z-index:1}
.ctabar h2{max-width:18ch}
.ctabar p{color:var(--on-dark-soft);font-size:.95rem}
.ctabar__act{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}
/* a single quiet lime mark, not a flat lime field */
.ctabar::after{content:"";position:absolute;right:-60px;bottom:-90px;width:230px;height:230px;border-radius:50%;background:var(--lime);opacity:.1}

/* ------------------------------------------------------------ 16. EMPTY UI */
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-md);background:var(--surface);padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:64ch}
.empty h3{font-size:1.15rem}
.empty p{color:var(--ink-soft);font-size:.94rem}

/* ---------------------------------------------------------- 17. DATA LISTS */
.dlist{border-top:1px solid var(--line)}
.dlist__row{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);gap:10px 26px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dlist__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.dlist__v{font-size:.94rem;color:var(--ink-2)}
.dlist__v strong{font-weight:600}

/* --------------------------------------------------------------- 18. FOOTER */
.footer{background:var(--dark);color:var(--on-dark-soft);padding-block:clamp(38px,4.5vw,58px) 22px;margin-top:clamp(44px,5vw,72px)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.85fr));gap:30px}
.footer .brand{color:var(--on-dark)}
.footer .brand__sub{color:var(--on-dark-soft)}
.footer__blurb{font-size:.88rem;max-width:40ch;margin-top:12px;line-height:1.6}
.footer__col h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark);font-weight:500;margin-bottom:12px}
.footer__col a,.footer__col span{display:block;font-size:.88rem;padding-block:4px}
.footer__col a:hover{color:var(--lime)}
.footer__base{border-top:1px solid var(--dark-3);margin-top:30px;padding-top:18px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:.78rem;color:#7C8778;line-height:1.6}

/* ------------------------------------------------------------ 19. MOBILE BAR */
.dock{display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:70;background:rgba(18,23,15,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--r-md);padding:7px;gap:7px;box-shadow:var(--shadow-lg)}
.dock a{flex:1;text-align:center;padding:11px 8px;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;color:var(--on-dark)}
.dock a.is-primary{background:var(--lime);color:var(--dark)}

/* ------------------------------------------------------------ 20. PAGE HEAD */
.pagehead{padding-block:clamp(30px,3.6vw,52px) clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line)}
.pagehead__in{display:flex;flex-direction:column;gap:13px}
.crumbs{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);display:flex;gap:7px;flex-wrap:wrap}
.crumbs a:hover{color:var(--lime-text)}

/* --------------------------------------------------------- 21. SERVICE PAGE */
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3.4vw,46px);align-items:start}
.aside{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
.aside h3{font-size:1.02rem}
.ticklist{display:flex;flex-direction:column;gap:9px}
.ticklist li{display:flex;gap:9px;align-items:flex-start;font-size:.93rem;color:var(--ink-soft);list-style:none}
.ticklist svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--lime-deep)}
ul.ticklist{margin:0;padding:0}

/* Image slot — honest placeholder sized for a real photo later */
.photoslot{aspect-ratio:4/3;max-width:100%;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:18px;color:var(--ink-faint)}
.photoslot svg{width:26px;height:26px}
.photoslot span{font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase}

/* --------------------------------------------------------- 22. RESPONSIVE */
@media(max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .hero h1{max-width:20ch}
  .estimator{grid-template-columns:1fr}
  .estimator__out{position:static}
  .split{grid-template-columns:1fr}
  .aside{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps__item{border-bottom:1px solid var(--line)}
  .steps__item:nth-child(2n){border-right:0}
  .steps__item:nth-last-child(-n+2){border-bottom:0}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}
@media(max-width:860px){
  .nav__links{display:none}
  .nav__actions .btn--ghost{display:none}
  .burger{display:flex}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptable__row{grid-template-columns:1fr 1fr;gap:8px 14px}
  .ptable__head{display:none}
  .ptable__band{grid-column:1/2}
  .ptable__price{grid-column:2/3;text-align:right}
  .ptable__cell{font-size:.84rem}
}
@media(max-width:620px){
  :root{--gutter:16px}
  .ticker__in{justify-content:center}
  .ticker__set:first-child{display:none}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps__item{border-right:0;border-bottom:1px solid var(--line);padding-left:0 !important;padding-right:0}
  /* The two-column block above strips the bottom line from the LAST TWO items,
     which is right when the bottom row holds two of them and wrong when there
     is one per row. It has to be undone at the SAME specificity — a plain
     .steps__item rule loses to .steps__item:nth-last-child(-n+2) whatever the
     order, and that is precisely why step 3 had no divider under it on every
     phone while steps 1 and 2 did. */
  .steps__item:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .steps__item:last-child{border-bottom:0}
  /* Stacked, these three cells were 229px tall, which pushed "£70 MINIMUM
     COLLECTION" and "Greater London" underneath the fixed bottom bar on first
     load — on a phone where the browser's own address bar sits at the bottom,
     the usable page is about 713px, not the 844 of a bare viewport. The price
     was hidden behind the bar until you scrolled. Three across is ~70px, so
     all three clear it. Checked at 320, 360, 390 and 430. */
  .specstrip__cell{padding:11px 9px;gap:2px}
  .specstrip__v{font-size:.95rem}
  .specstrip__k{font-size:.55rem;letter-spacing:.06em;line-height:1.35}
  .form,.checks{grid-template-columns:1fr}
  .dlist__row{grid-template-columns:1fr;gap:3px}
  .footer__grid{grid-template-columns:1fr}
  .dock{display:flex}
  body{padding-bottom:74px}
  .ctabar{flex-direction:column;align-items:flex-start}
  .masthead__row{flex-direction:column;align-items:flex-start}
  .faq summary{font-size:.95rem}
}
@media print{
  .nav,.ticker,.dock,.navpanel,.ctabar{display:none !important}
  body{background:#fff}
}

/* ------------------------------------------------------------- 23. PHOTOS */
.shot{margin:0;display:flex;flex-direction:column;gap:8px}
.shot picture{display:block;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.shot img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.shot--wide img{aspect-ratio:16/9}
.shot figcaption{font-size:.8rem;line-height:1.5;color:var(--ink-faint)}
.shot figcaption strong{color:var(--ink-soft);font-weight:600}
.band--dark .shot picture{border-color:var(--dark-3)}
.band--dark .shot figcaption{color:var(--on-dark-soft)}

/* Hero panel holding a photograph rather than the drawn van */
.panel__art--photo{padding:0;border:0;background:transparent}
.panel__art--photo img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--dark-3)}

/* Illustration marker — used where an image shows the service rather than a
   specific completed job. Must stay visible; it is a truthfulness label. */
.shot--illus figcaption{color:var(--clay-deep)}
.illus-tag{display:inline-flex;align-items:center;gap:5px;background:var(--clay-wash);border:1px solid var(--clay-line);color:var(--clay-deep);border-radius:999px;padding:3px 9px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;margin-right:6px}
/* Statutory trading disclosure — company name, number, place of registration
   and registered office. Required on a UK limited company's website. */
.footer__legal{flex-basis:100%;order:-1;padding-bottom:12px;color:#6E7A6A;line-height:1.7}
.is-quote-cell{color:var(--clay-deep);font-family:var(--body);font-size:.92rem;font-weight:600}

/* ===========================================================================
   LOAD CARDS — the photo-per-band picker on the prices page.
   Photographs live at assets/img/loads/load-1..5.jpg. To swap one, overwrite
   the JPEG with the same filename; no CSS or HTML change is needed.
   Every string inside a card is written by site.js from config.js -> pricing.
   =========================================================================== */
/* Three across, not five. At five the card is 213px wide and a 2:1 photo is
   only 106px tall — a sliver on a 662px card, and the labels never line up
   because the text wraps to a different depth in every column. Three gives a
   ~360px card and a ~180px photo. */
.lgrid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.lgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.lgrid{grid-template-columns:1fr}}

.lcard{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:0 22px 22px;
  cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.lcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.lcard input{position:absolute;opacity:0;width:1px;height:1px}
.lcard:has(input:focus-visible){outline:3px solid var(--lime-deep);outline-offset:2px}
/* Fallback for browsers without :has() — Safari below 15.4, Firefox below 121.
   site.js mirrors the checked state onto .is-picked, and the keyboard outline
   falls back to plain :focus. Written as separate rules on purpose: a selector
   list containing an unknown pseudo-class is discarded whole. */
.lcard input:focus{outline:none}
.lcard:focus-within{outline:3px solid var(--lime-deep);outline-offset:2px}
.lcard:has(input:checked){border-color:var(--ink);box-shadow:var(--shadow-md)}
.lcard.is-picked{border-color:var(--ink);box-shadow:var(--shadow-md)}

/* The selector. It used to be absolutely positioned in the photo's top-right
   corner; an unlabelled white circle floating on a photograph reads as a mark on
   the picture, not a control. It now sits on the row with the band name, where
   a circle followed by a label is a shape everyone already recognises. */
.lcard__pick{display:flex;align-items:center;gap:10px}
.lcard__tick{flex:none;width:22px;height:22px;
  border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);
  display:grid;place-items:center}
.lcard__tick svg{width:11px;height:11px;opacity:0;color:var(--dark);stroke-width:2.6}
.lcard:has(input:checked) .lcard__tick{background:var(--lime);border-color:var(--lime)}
.lcard.is-picked .lcard__tick{background:var(--lime);border-color:var(--lime)}
.lcard:has(input:checked) .lcard__tick svg{opacity:1}
.lcard.is-picked .lcard__tick svg{opacity:1}

.lcard__shot{display:block;margin:0 -22px 15px}
.lcard__shot img{display:block;width:100%;height:auto;background:var(--paper-2);
  border-radius:13px 13px 0 0;border-bottom:1px solid var(--line)}
.lcard__cap{display:block;text-align:center;margin-top:7px;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}

.lcard__band{font-family:var(--display);font-weight:700;font-size:1.18rem;
  letter-spacing:-.01em;line-height:1.2}
.lcard__price{font-family:var(--display);font-weight:800;font-size:2.35rem;letter-spacing:-.03em;
  line-height:1;margin:10px 0 3px;font-variant-numeric:tabular-nums}
.lcard__novat{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--lime-text);font-weight:600;
  background:var(--lime-wash);border:1px solid var(--lime);border-radius:999px;padding:4px 10px;margin-bottom:15px}
.lcard__novat:empty{display:none}

.lspec{display:flex;flex-direction:column;gap:9px;flex:1;
  padding-top:15px;border-top:1px solid var(--line)}
.lspec__i{display:flex;flex-direction:column;gap:1px}
.lspec__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.lspec__v{font-size:.9rem;color:var(--ink-2);line-height:1.4;
  font-variant-numeric:tabular-nums;word-break:break-word;overflow-wrap:anywhere}

.lbar{margin-top:18px;background:var(--lime-wash);border:1px solid var(--lime);
  border-radius:var(--r-md);padding:16px 18px;display:flex;flex-wrap:wrap;
  gap:14px 20px;align-items:center;justify-content:space-between}
.lbar__txt{margin:0;font-size:.97rem;color:var(--ink);max-width:60ch}
.lbar__txt b{font-family:var(--display);font-weight:700}
@media (prefers-reduced-motion:reduce){.lcard{transition:none}}

/* Sixth tile — the photo-quote route, sized to match a load card so the second
   row of three closes cleanly instead of leaving a hole. */
.lcard--ask{background:var(--dark);border-color:var(--dark);color:var(--on-dark);
  padding:26px 22px 22px;text-decoration:none;justify-content:flex-start}
.lcard--ask:hover{border-color:var(--lime);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.lcard--ask .lcard__band{color:var(--lime);margin:14px 0 0}
.lcard__askicon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--dark-3);color:var(--lime)}
.lcard__askicon svg{width:21px;height:21px;stroke-width:1.7}
.lcard__askp{margin:10px 0 0;font-size:.93rem;line-height:1.55;color:var(--on-dark-soft)}
.lcard--ask .lspec{border-top-color:var(--dark-3);margin-top:20px;flex:0 0 auto}
.lcard--ask .lspec__k{color:var(--on-dark-soft)}
.lcard--ask .lspec__v{color:var(--on-dark)}
.lcard__askcta{margin-top:auto;padding-top:20px;font-family:var(--body);font-weight:600;
  font-size:.93rem;color:var(--lime)}
.lcard__askcta::after{content:" \2192"}

/* Confirmation that a choice carried over from the waste calculator. */
.carried{margin:0 0 18px;padding:12px 15px;background:var(--lime-wash);
  border:1px solid var(--lime);border-radius:var(--r-sm);font-size:.93rem;color:var(--ink)}
.carried b{font-family:var(--display);font-weight:700}

/* Required-field marker and the note under the email box. Email became
   compulsory on 15 Sep 2026: without one there is no confirmation, no
   reference number and no message the customer can reply to with photos. */
.req{font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--lime-text);background:var(--lime-wash);border:1px solid var(--lime);
  border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.field__hint{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-soft);line-height:1.45}

/* Escape hatch beside the quote form for anyone who will not type an email.
   Hides itself if the phone number is ever cleared from config.js. */
.talkline{margin:14px 0 0;padding:12px 15px;background:var(--paper-2);
  border:1px solid var(--line);border-left:3px solid var(--lime-deep);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.93rem;color:var(--ink-2)}
.talkline a{font-weight:600;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--lime);text-underline-offset:3px}
.talkline a:hover{color:var(--lime-text)}
.talkline span[data-hours]{display:block;margin-top:3px;font-size:.82rem;color:var(--ink-soft)}

/* ---------------------------------------------------------------------------
   NAV OVERFLOW — fixed 15 Sep 2026.
   Adding "Waste calculator" pushed the row past the width available between
   ~860px (where the burger used to take over) and ~1060px. The links wrapped
   mid-item, so "Waste calculator" sat on two lines while everything else sat
   on one. It did not reproduce locally because Google Fonts is unreachable
   from the build sandbox and the fallback metrics are narrower than the real
   Public Sans — so this is fixed by construction rather than by finding the
   exact pixel it breaks at.
   Two guards: links can never wrap mid-item, and the burger takes over well
   before the row runs out of room.
   --------------------------------------------------------------------------- */
.nav__links a{white-space:nowrap}
.nav__actions .btn{white-space:nowrap}
/* First attempt at this simply moved the burger up to 1100px, which hid the
   whole menu on any window narrower than that — worse than the wrap it fixed.
   Instead the row is made to FIT: tighter link spacing, and the desktop Call
   button steps aside because the number is already in the bar directly above.
   The burger then only takes over when there is genuinely no room. */
@media(max-width:1200px){
  .nav__links{gap:0}
  .nav__links a{padding:8px 9px;font-size:.88rem}
  .nav__in{gap:12px}
}
@media(max-width:1060px){
  .nav__actions .btn--ghost{display:none}
  .brand__sub{display:none}
}
@media(max-width:880px){
  .nav__links{display:none}
  .burger{display:flex}
}

/* ===========================================================================
   INTRODUCTORY OFFER
   Emitted by gen.py only while config.js -> offer.active is true, and removed
   at runtime by site.js if that flag is later switched off. There is no
   "empty offer" state to style, because the element is never rendered empty.
   The amount is never typed here; it comes from config.js in one place.
   =========================================================================== */
.offer{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-soft);
}
.offer__tag{
  font-weight:700;color:var(--dark);background:var(--lime);
  border-radius:999px;padding:5px 13px;font-size:.88rem;white-space:nowrap;
}
/* The conditions are NOT small print hidden away — an offer you publish is one
   you have to honour, so the limits sit on the same line as the claim. */
.offer__sub{color:var(--ink-faint);font-size:.82rem;flex:1 1 220px;min-width:0}

/* Hero: one compact line under the buttons, so it never pushes the specstrip
   below the fold on a phone.
   Outlined rather than solid here ONLY because it sits directly beneath a solid
   lime button — at full strength it read as a third button people tried to tap.
   On the prices and calculator pages it sits on a pale background instead, so
   it keeps the solid fill and the attention that goes with it. */
.offer--chip{margin-top:-4px}
.offer--chip .offer__tag{
  background:var(--dark);color:var(--lime);
  border:1.5px solid var(--dark);padding:5px 13px;
}

/* Prices and calculator: boxed, matching .note so it reads as part of the
   pricing rather than as an advertisement bolted on top. */
.offer--note{
  border:1px solid var(--lime-deep);border-left:3px solid var(--lime-deep);
  border-radius:var(--r-sm);background:var(--lime-wash);
  padding:13px 16px;margin:16px 0 0;align-items:center;
}
.offer--note .offer__sub{color:var(--lime-text)}

/* Quote form: a plain sentence above the fields. No box — the form is already
   inside a panel and a second border around this line looks like an error. */
.offer--form{
  display:block;margin:2px 0 -2px;font-size:.88rem;color:var(--ink-soft);
}
.offer--form strong{color:var(--lime-text);font-weight:700}
/* Not --lime-deep: that is 3.3:1 on white, same reason the secondary
   button's label is this darker green rather than the border colour. */
.offer--form span{color:var(--ink-faint);font-size:.82rem}

/* ===========================================================================
   PHONE LAYOUT — HERO AND THE FIXED DOCK
   Reported from a real handset: the two hero buttons were small and sat too
   close to the fixed "Call / WhatsApp / Get a quote" dock.

   Two separate problems, two separate fixes:
   1. The buttons were at their desktop size on a 390px screen, so they read as
      secondary next to the dock's big lime button. They are now full-row and
      taller — but still SIDE BY SIDE, not stacked. Stacking adds a whole extra
      row and pushes the second button DOWN into the dock, which is the very
      thing being fixed.
   2. The hero started 36px below a nav that is itself below a ticker bar, so
      the headline sat low. The block above the fold is tightened instead.
   =========================================================================== */
@media(max-width:620px){
  /* 1. Bigger targets, one row. Scoped to .hero__copy so the dark demo panel's
        own .hero__cta buttons are left exactly as they were. */
  .hero__copy .hero__cta{width:100%;gap:9px}
  .hero__copy .hero__cta .btn{
    flex:1 1 0;min-width:0;min-height:54px;
    font-size:.95rem;padding-inline:10px;
  }
  /* 2. BIGGER AND UP, as marked on the phone screenshot. Those two pull
        against each other — a larger headline occupies more rows and pushes
        everything below it DOWN — so the height has to come from somewhere.
        It comes from the paragraph and the gaps, not from the headline:
          headline   ~35px -> ~40px   (the thing being read first)
          eyebrow    .68rem -> .73rem (it was circled; it was tiny)
          paragraph  slightly smaller and tighter, five lines is a lot on a
                     phone and it is support text, not the message
          gaps       15px -> 12px between the blocks
        Net result measured at 390px: headline 5px bigger AND the buttons sit
        higher than before, not lower. Verify both if you change any of it. */
  .ticker__in{padding-block:6px}
  .hero{padding-block:12px 24px}
  .hero__copy{gap:12px}
  .hero h1{max-width:none;font-size:clamp(2.45rem,1.9rem + 2.4vw,2.9rem);line-height:1.06}
  .hero__copy .label{font-size:.73rem;letter-spacing:.12em}
  .hero__lead{font-size:.95rem;line-height:1.5}

  /* 3. Clear the dock properly, including the iPhone home-indicator strip,
        which otherwise sits on top of the dock's own buttons. */
  .dock{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* Adding WhatsApp to the top bar gave it three items, and on a 390px screen
   "020 3733 2380 · WHATSAPP · BOOKINGS@HELVIXA.CO.UK" wrapped to two rows —
   pushing the headline further down, which is the opposite of the fix above.
   The email drops off the phone bar only: it is still in the footer, on the
   contact page and on the photo-quote card. Call and WhatsApp are the two a
   phone can act on with one tap, so they are the two that stay. */
@media(max-width:620px){
  .ticker__set [data-email]{display:none}
}

/* On a 360px handset the dock's phone number wrapped to two lines, which made
   the whole bar taller and knocked the "Get a quote" button out of line with
   it. The three labels never wrap now; on the narrowest phones they shrink
   instead, which is the right trade for a bar that must stay one row high. */
.dock a{white-space:nowrap}
@media(max-width:380px){
  .dock{gap:5px;padding:6px}
  .dock a{font-size:.8rem;padding:11px 4px;letter-spacing:-.01em}
}

/* The smallest phones still in use (320px: iPhone SE first generation and the
   cheapest Androids). The headline wraps to three lines and the paragraph to
   six, which pushed the price row back under the fixed bar — the very thing
   the three-across spec strip above is there to prevent. Everything in the
   hero gives up a few pixels so "£70" stays visible on first load here too.
   Measured: needed 33px, this frees about 42. */
@media(max-width:340px){
  .hero{padding-block:10px 20px}
  .hero__copy{gap:10px}
  .hero h1{font-size:2.2rem}
  .hero__lead{font-size:.9rem;line-height:1.45}
  .specstrip__cell{padding:9px 7px}
  .specstrip__v{font-size:.88rem}
  .specstrip__k{font-size:.52rem}
}


/* ===========================================================================
   WHATSAPP BUBBLE  (phones only)
   WhatsApp used to be the middle of three items in the fixed bottom bar. Three
   buttons side by side gave the bar no hierarchy and squeezed "Get a quote",
   which is the one that matters. It now floats on its own above the bar.

   The green is WhatsApp's own (#25D366), not the brand lime, and that is
   deliberate: here the colour is functioning as a logo. In lime nobody would
   know what the circle was.

   Hidden on desktop. There is no bottom bar there, so nothing was crowded, and
   WhatsApp is already in the top bar, the CTA band and the footer.
   =========================================================================== */
.wafab{display:none}
@media(max-width:620px){
  .wafab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:13px;z-index:80;
    bottom:calc(88px + env(safe-area-inset-bottom,0px));
    width:56px;height:56px;border-radius:50%;
    background:#25D366;color:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.3)
  }
  .wafab:hover{background:#1FB855}
  .wafab.hide{display:none}

  /* The header "Get a quote" said exactly what the bar underneath says, at the
     same size, in the same colour, permanently — two identical calls to action
     on one screen. The bar is nearer the thumb, so the header one goes. It is
     untouched on desktop, where it is the only one. */
  .nav__actions .btn--primary{display:none}
}
@media print{ .wafab{display:none !important} }