/* ============================================================
   Ferrie Electrical Services — design system v0.2.1
   "Industrial warmth": signage type, navy from the logo blue,
   amber live-wire accent, copper for heritage. Lord Knows.
   ============================================================ */

:root{
  --bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8771b' d='M13.5 2 4.5 14h5.5l-2 8 9.5-12.5h-5.5L13.5 2z'/%3E%3C/svg%3E");
  --navy-950: oklch(0.19 0.045 277);
  --navy-900: oklch(0.245 0.06 277);
  --navy-800: oklch(0.31 0.085 277);
  --brand:        #2E3192;
  --brand-bright: oklch(0.52 0.18 272);
  --paper:   oklch(0.975 0.006 277);
  --paper-2: oklch(0.945 0.012 277);
  --ink:      oklch(0.23 0.035 277);
  --ink-soft: oklch(0.40 0.035 277);
  --ink-inverse: oklch(0.96 0.008 277);
  --ink-inverse-soft: oklch(0.80 0.02 277);
  --amber:      oklch(0.83 0.155 82);
  --amber-deep: oklch(0.66 0.13 66);
  --copper:     oklch(0.62 0.10 55);
  --line:       oklch(0.885 0.015 277);
  --line-dark:  oklch(0.34 0.05 277);

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --shadow-lift: 0 10px 30px -12px oklch(0.19 0.045 277 / .35);
  --glow: 0 0 0 1px oklch(0.83 0.155 82 / .35), 0 6px 24px -6px oklch(0.83 0.155 82 / .45);

  --z-dropdown: 40; --z-head: 50; --z-panel: 60; --z-callbar: 55;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- reset-lite ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand-bright); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--brand); }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.02; margin:0 0 .5em;
  font-weight:800; letter-spacing:-0.01em; color:var(--ink); text-wrap:balance; }
h1{ font-size:clamp(2.9rem, 7vw, 5.2rem); }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing:0; }
p{ margin:0 0 1em; max-width:68ch; text-wrap:pretty; }
ul{ padding-left:1.2em; }
::selection{ background:var(--amber); color:var(--navy-950); }
:focus-visible{ outline:3px solid var(--amber-deep); outline-offset:2px; border-radius:2px; }

.skip{ position:absolute; left:-999px; top:0; z-index:100; background:var(--amber); color:var(--navy-950);
  padding:.6rem 1rem; font-weight:600; }
.skip:focus{ left:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- shared bits ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.45em;
  font: 600 .72rem/1 var(--font-body); letter-spacing:.09em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:4px; padding:.45em .7em;
  color:inherit; opacity:.92;
}
.chip--tiny{ font-size:.62rem; padding:.35em .55em; opacity:.75; }

.btn{
  display:inline-block; font: 700 1.02rem/1 var(--font-display); letter-spacing:.045em;
  text-transform:uppercase; text-decoration:none; border-radius:6px; cursor:pointer;
  padding:.95em 1.5em; border:0; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.btn--primary{ background:var(--amber); color:var(--navy-950); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--glow); color:var(--navy-950); }
.btn--ghost{ background:transparent; color:var(--ink-inverse); box-shadow:inset 0 0 0 1.5px var(--line-dark); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--amber); color:var(--amber); transform:translateY(-2px); }
.btn--ink{ background:var(--navy-950); color:var(--ink-inverse); }
.btn--ink:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); color:#fff; }

/* live-wire link */
.wirelink{
  font:600 1rem var(--font-body); color:var(--ink); text-decoration:none; position:relative; padding-bottom:3px;
}
.wirelink::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--amber-deep); transform:scaleX(.18); transform-origin:left;
  transition:transform .35s var(--ease);
}
.wirelink:hover::after{ transform:scaleX(1); }
.wirelink:hover{ color:var(--brand); }
.section--dark .wirelink, .cta-band .wirelink{ color:var(--ink-inverse); }
.section--dark .wirelink:hover, .cta-band .wirelink:hover{ color:var(--amber); }

/* ---------- header ---------- */
.head{
  position:sticky; top:0; z-index:var(--z-head);
  background:var(--navy-950); color:var(--ink-inverse);
  transition: box-shadow .25s var(--ease);
}
.head.is-stuck{ box-shadow:0 6px 24px -10px rgb(0 0 0 / .5); }
.head__wrap{ display:flex; align-items:center; gap:1.25rem; padding-block:.55rem; }
.logo-img{ width:172px; height:auto; }
.head__logo{ flex:none; line-height:0; }

.nav{ margin-left:auto; }
.nav__list{ display:flex; gap:.25rem; list-style:none; margin:0; padding:0; }
.nav__item > a{
  display:block; padding:.7rem .8rem; color:var(--ink-inverse); text-decoration:none;
  font:600 .98rem var(--font-body); border-radius:6px;
}
.nav__item > a:hover{ background:var(--navy-900); color:#fff; }
.nav__item > a[aria-current]{ background:var(--navy-900); color:#fff; box-shadow:inset 0 -2px 0 var(--amber); border-radius:6px 6px 0 0; }
.has-sub{ position:relative; }
.sub{
  position:absolute; top:100%; left:0; min-width:230px; z-index:var(--z-dropdown);
  background:#fff; color:var(--ink); border-radius:8px; box-shadow:var(--shadow-lift);
  list-style:none; margin:.35rem 0 0; padding:.45rem;
  opacity:0; visibility:hidden; translate:0 6px;
  transition:opacity .22s var(--ease), translate .22s var(--ease), visibility .22s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub{ opacity:1; visibility:visible; translate:0 0; }
.sub a{ display:block; padding:.5rem .65rem; border-radius:6px; color:var(--ink); text-decoration:none; font:500 .95rem var(--font-body); }
.sub a:hover{ background:var(--paper-2); color:var(--brand); }
.sub__all a{ font-weight:700; color:var(--brand); }

.head__cta{ display:flex; align-items:center; gap:.9rem; }
.head__tel{
  display:inline-flex; align-items:center; gap:.45em; color:var(--ink-inverse); text-decoration:none;
  font:700 1.05rem var(--font-display); letter-spacing:.03em;
}
.head__tel:hover{ color:var(--amber); }
.head__cta .btn{ padding:.7em 1.15em; }

.burger{ display:none; }

/* ---------- hero ---------- */
.hero{
  background:var(--navy-950); color:var(--ink-inverse); overflow:clip; position:relative;
}
.hero .wrap{
  display:grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center;
  padding-block:clamp(2.75rem,5vw,4.5rem) clamp(2.5rem,4.5vw,4rem);
}
.hero__chip{ color:var(--amber); margin-bottom:1.4rem; display:inline-flex; }
.hero h1{ color:#fff; margin-bottom:.35em;
  /* capped so "West & North Norfolk." stays on one line once the wrap stops growing */
  font-size:clamp(2.9rem, 5.2vw, 3.85rem); }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; }
.hero__sub{ font-size:1.15rem; color:var(--ink-inverse-soft); max-width:52ch; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.hero__trust{
  display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.2rem; margin-top:1.5rem;
  color:var(--ink-inverse-soft); font-size:.9rem;
}
.hero__trust img{ height:52px; width:auto; border-radius:4px; background:#fff; padding:3px; }
.hero__figure{ position:relative; margin:0; }
.hero__figure .ba{
  border-radius:12px; overflow:hidden;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6), inset 0 0 0 1px oklch(1 0 0 / .12);
}
.hero__figure .ba__caption{ color:var(--ink-inverse-soft); }
.hero__figure .ba__caption a{ color:#fff; }

/* A photo with a working light switch on it. Lives wherever it is dropped. */
.lightdemo{
  position:relative; border-radius:12px; overflow:hidden;
  box-shadow: 0 24px 50px -30px rgb(0 0 0 / .5), inset 0 0 0 1px oklch(0 0 0 / .08);
}
.lightdemo img{ display:block; width:100%; height:auto; transition: filter .8s var(--ease); }
.lightdemo.lights-off img{ filter:brightness(.42) saturate(.7); }
.switch{
  position:absolute; left:1rem; bottom:1rem;
  background:var(--paper); border-radius:10px; padding:.55rem;
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line);
  border:0; cursor:pointer; z-index:2;
}
.switch__rocker{
  display:block; width:30px; height:52px; border-radius:6px; background:#fff;
  /* lights on = rocker down, the UK way: shaded half at the top */
  box-shadow: inset 0 0 0 1px var(--line), inset 0 26px 0 0 var(--paper-2);
  transition: box-shadow .2s var(--ease);
}
.lights-off .switch__rocker{ box-shadow: inset 0 0 0 1px var(--line), inset 0 -26px 0 0 var(--paper-2); }
.switch:hover{ box-shadow: var(--glow), inset 0 0 0 1px var(--line); }
.lightdemo__flick{
  position:absolute; left:calc(1rem + 62px); bottom:1.7rem; text-align:left;
  font:italic 500 .92rem var(--font-body); color:#fff;
  background:oklch(0.19 0.045 277 / .78); padding:.3em .7em; border-radius:999px;
  transform:rotate(-2deg);
}

.lightdemo-wrap{ margin:0; }
.lightdemo-wrap figcaption{ font-size:.92rem; color:var(--ink-soft); margin-top:.8rem; }
.lightdemo{ display:block; }

/* ---------- sections ---------- */
.section{ padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight{ padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.section--dark{ background:var(--navy-950); color:var(--ink-inverse); }
.section--dark h2, .section--dark h3{ color:#fff; }
.section--dark p{ color:var(--ink-inverse-soft); }
.section--alt{ background:var(--paper-2); }
.section__intro{ max-width:62ch; margin-bottom:clamp(1.8rem,4vw,3rem); }
.section__intro .lede{ font-size:1.18rem; color:var(--ink-soft); }

/* promise band */
.promise{ background:var(--brand); color:#fff; }
.promise .wrap{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 2.5rem;
  padding-block:1.3rem;
}
.promise__lead{ font:700 clamp(1.25rem,2.6vw,1.7rem)/1.1 var(--font-display); letter-spacing:.015em; margin:0; }
.promise__note{ margin:0; color:oklch(0.9 0.03 277); font-size:.98rem; }

/* job sheet (services list) */
.jobsheet{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.jobsheet li{ border-bottom:1px solid var(--line); }
.jobsheet a{
  display:grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr) auto; gap:1.5rem; align-items:center;
  padding:1.05rem .25rem; text-decoration:none; color:var(--ink);
  transition: background .2s var(--ease), padding-left .25s var(--ease);
}
.jobsheet a:hover{ background:oklch(0.955 0.012 277); padding-left:.8rem; }
.jobsheet h3{ margin:0; font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:700; }
.jobsheet p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
.jobsheet .go{ font:700 1.4rem var(--font-display); color:var(--amber-deep); transition: translate .25s var(--ease); }
.jobsheet a:hover .go{ translate:6px 0; }

/* feature tiles */
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.25rem,3vw,2rem); margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.feature{
  position:relative; border-radius:12px; overflow:hidden; min-height:380px;
  display:flex; align-items:flex-end; text-decoration:none;
  box-shadow: var(--shadow-lift);
}
.feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .8s var(--ease); }
.feature:hover img{ transform:scale(1.045); }
.feature::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(10deg, oklch(0.19 0.045 277 / .88) 18%, oklch(0.19 0.045 277 / .12) 60%); }
.feature__body{ position:relative; z-index:1; padding:1.6rem; color:#fff; }
.feature__body .chip{ color:var(--amber); margin-bottom:.7rem; }
.feature__body h3{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.25em; }
.feature__body p{ color:var(--ink-inverse-soft); margin:0; font-size:.98rem; }

/* sector tiles */
.sectors{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2.5vw,1.75rem); }
.sector{ position:relative; border-radius:12px; overflow:hidden; text-decoration:none; min-height:300px;
  display:flex; align-items:flex-end; grid-column:span 6; box-shadow:var(--shadow-lift); }
.sector:nth-child(1){ grid-column:span 7; }
.sector:nth-child(2){ grid-column:span 5; }
.sector:nth-child(3){ grid-column:span 5; }
.sector:nth-child(4){ grid-column:span 7; }
.sector img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.sector:hover img{ transform:scale(1.045); }
.sector::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(8deg, oklch(0.19 0.045 277 / .85) 20%, transparent 62%); }
.sector__body{ position:relative; z-index:1; padding:1.4rem; color:#fff; }
.sector__body h3{ color:#fff; margin:0 0 .15em; }
.sector__body p{ margin:0; color:var(--ink-inverse-soft); font-size:.95rem; }

/* before / after */
.ba{ position:relative; margin:0; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-lift);
  --pos:50%; cursor:ew-resize; }
.ba img{ width:100%; height:100%; object-fit:cover; }
.ba__after, .ba__before{ position:absolute; inset:0; }
.ba__before{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; z-index:2;
  box-shadow:0 0 12px rgb(0 0 0 / .5); }
.ba__handle span{ position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:52px; height:52px; border-radius:50%; background:var(--amber);
  display:grid; place-items:center; color:var(--navy-950); font:800 1rem var(--font-display); }
/* until someone drags it, the knob breathes and says what to do */
.ba:not(.is-touched) .ba__handle span{ animation:ba-pulse 2.6s var(--ease) infinite; }
@keyframes ba-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgb(255 255 255 / .6); } 55%{ box-shadow:0 0 0 12px rgb(255 255 255 / 0); } }
.ba__hint{ position:absolute; top:calc(50% + 38px); left:50%; translate:-50% 0; white-space:nowrap;
  font:700 .68rem var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  background:var(--amber); color:var(--navy-950); padding:.4em .7em; border-radius:999px;
  box-shadow:0 2px 10px rgb(0 0 0 / .4); transition:opacity .3s var(--ease); }
.ba.is-touched .ba__hint{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .ba:not(.is-touched) .ba__handle span{ animation:none; } }
.ba__handle span::before{ content:""; width:22px; height:14px; display:block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath fill='%2314152e' d='M9 0 2 7l7 7V0zm6 0v14l7-7-7-7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:3; margin:0; }
.ba__tag{ position:absolute; top:1rem; left:1rem; z-index:1;
  font:600 .7rem var(--font-body); letter-spacing:.09em; text-transform:uppercase;
  background:oklch(0.19 0.045 277 / .78); color:#fff; padding:.4em .65em; border-radius:4px; }
.ba__tag--a{ left:auto; right:1rem; background:oklch(0.66 0.13 66 / .9); }
.ba__caption{ font-size:.92rem; color:var(--ink-soft); margin-top:.8rem; }
.section--dark .ba__caption{ color:var(--ink-inverse-soft); }

/* quotes */
.quote{ margin:0; }
.quote p{ font-size:1.05rem; }
.quote footer{ display:flex; align-items:center; gap:.7rem; margin-top:.6rem; }
.gbadge{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:1.4rem 0 0; font-size:1rem; }
.gbadge__stars{ color:var(--amber-deep); letter-spacing:.1em; font-size:1.15rem; }
.gbadge strong{ font:800 1.25rem var(--font-display); }
.gbadge--hero{ color:var(--ink-inverse); }
.gbadge--hero a{ color:var(--amber); }
.quote__stars{ color:var(--amber-deep); letter-spacing:.08em; font-size:.95rem; }
.quote__src{ font-size:.78rem; color:var(--ink-soft); }
.section--dark .quote__src, .cta-band .quote__src{ color:var(--ink-inverse-soft); }
.quote cite{ font:700 1.05rem var(--font-display); font-style:normal; letter-spacing:.02em; }
.quote--pull p{
  font:600 clamp(1.5rem,3.2vw,2.3rem)/1.25 var(--font-display); letter-spacing:.005em;
  color:var(--ink); max-width:26ch;
}
.quote-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1.5rem,3.5vw,3rem); align-items:start; }

/* Mosaic wall: quotes vary a lot in length, so pack them into columns instead of
   rows. Multi-column keeps every card snug against the one above it, and filtered
   (hidden) cards drop out cleanly because they are display:none. */
.quote-grid--mosaic{ display:block; columns:3 300px; column-gap:clamp(1.25rem,2.5vw,2rem); }
.quote-grid--mosaic .quote-card{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  width:100%; margin:0 0 clamp(1.25rem,2.5vw,2rem);
}
@media (max-width:900px){ .quote-grid--mosaic{ columns:2 260px; } }
@media (max-width:560px){ .quote-grid--mosaic{ columns:1; } }
.quote-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.5rem; }
.section--dark .quote-card{ background:var(--navy-900); border-color:var(--line-dark); }
.section--dark .quote cite{ color:#fff; }

/* review strip: one quote used as a section divider */
.reviewstrip{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.reviewstrip .wrap{ padding-block:clamp(2.25rem,4.5vw,3.25rem); }
.reviewstrip .quote p{ font:500 clamp(1.15rem,2.2vw,1.5rem)/1.45 var(--font-body); color:var(--ink);
  max-width:46ch; margin-inline:auto; text-align:center; }
.reviewstrip .quote footer{ justify-content:center; }
.section--dark + .reviewstrip{ border-top:0; }

/* split layout */
.split{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--flip{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
.split__media{ margin:0; }
.split__media img{ border-radius:12px; box-shadow:var(--shadow-lift); }
.split__media figcaption{ font-size:.9rem; color:var(--ink-soft); margin-top:.7rem; }
/* keep a lone image company while a long text column scrolls past it */
@media (min-width:1021px){ .split__media--sticky{ position:sticky; top:6rem; } }
.section--dark .split__media figcaption{ color:var(--ink-inverse-soft); }

/* areas strip */
.areas{ text-align:center; }
.areas h2{ margin-bottom:.4em; }
.areas__list{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 0; padding:0; margin:1.2rem auto 0; max-width:56rem; }
.areas__list li{ font:700 clamp(1.15rem,2.4vw,1.6rem) var(--font-display); letter-spacing:.02em; }
.areas__list li:not(:last-child)::after{ content:""; display:inline-block; width:.62em; height:.85em;
  margin-inline:.85rem; background:var(--bolt) center/contain no-repeat; }
.areas__list a{ color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease); }
.areas__list a:hover{ color:var(--brand); border-bottom-color:var(--amber-deep); }
.areas__note{ margin:1rem auto 0; color:var(--ink-soft); font-style:italic; }

/* forms */
.form{ display:block; max-width:46rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:block; margin-bottom:1rem; }
.field span{ display:block; font:600 .88rem var(--font-body); letter-spacing:.02em; margin-bottom:.35rem; }
.field em{ font-style:normal; opacity:.6; font-weight:400; }
.field input, .field textarea{
  width:100%; font:inherit; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:.8rem .9rem;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder{ color:oklch(0.46 0.03 277); opacity:1; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--amber-deep); box-shadow:0 0 0 3px oklch(0.83 0.155 82 / .25); }
.field--trap{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
.form__foot{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:.4rem; }
.form__note{ margin:0; font-size:.9rem; max-width:34ch; }
.form__privacy{ display:block; margin-top:.25em; opacity:.75; font-size:.82rem; }
.form__privacy a{ color:inherit; }
.form--dark .field span{ color:var(--ink-inverse); }
.form--dark .form__note{ color:var(--ink-inverse-soft); }
.form--dark .field input, .form--dark .field textarea{ background:oklch(0.97 0.005 277); border-color:var(--line-dark); }
.form__ok{ background:oklch(0.9 0.08 150 / .2); border:1px solid oklch(0.62 0.14 150); border-radius:8px; padding:1rem 1.2rem; }
.form__ok--err{ background:oklch(0.9 0.07 60 / .25); border-color:oklch(0.66 0.13 66); }

/* CTA band */
.cta-band{ background:var(--navy-950); color:var(--ink-inverse); }
.cta-band .wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3rem,6vw,5rem); align-items:start; }
.cta-band h2{ color:#fff; }
.cta-band__tel{ margin-top:1.4rem; }
.cta-band__tel a{ font:800 clamp(1.7rem,3.5vw,2.4rem) var(--font-display); color:var(--amber); text-decoration:none; letter-spacing:.02em; }
.cta-band__tel a:hover{ text-decoration:underline; text-decoration-thickness:3px; }

/* page hero (inner pages) */
.page-hero{ background:var(--navy-950); color:var(--ink-inverse); }
.page-hero .wrap{ padding-block:clamp(2.75rem,5.5vw,4.5rem); }
.page-hero h1{ color:#fff; margin-bottom:.2em; max-width:18ch; }
.page-hero .lede{ font-size:1.15rem; color:var(--ink-inverse-soft); max-width:56ch; }
.crumbs{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; padding:0; margin:0 0 1.6rem;
  font-size:.85rem; }
.crumbs a{ color:var(--ink-inverse-soft); }
.crumbs li:not(:last-child)::after{ content:"/"; margin-left:.35rem; opacity:.45; }
.crumbs [aria-current]{ color:var(--amber); }

/* inner-page header with a photograph: prime space, not a navy void */
.page-hero .wrap--media{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4rem); align-items:center; }
.page-hero__media{ margin:0; border-radius:12px; overflow:hidden;
  box-shadow:0 30px 60px -30px rgb(0 0 0 / .65); }
.page-hero__media img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (max-width: 860px){
  .page-hero .wrap--media{ grid-template-columns:1fr; gap:1.4rem; }
  .page-hero__media img{ aspect-ratio:16/9; }
}

/* article/service body */
.article{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.article__aside{ position:sticky; top:5.5rem; display:grid; gap:1.5rem; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.5rem; }
.panel h3{ margin-bottom:.6em; }
.panel ul{ margin:0; padding-left:1.1em; }
.panel li{ margin-bottom:.4em; }
.panel--navy{ background:var(--navy-950); border-color:var(--navy-950); color:var(--ink-inverse); }
.panel--navy h3{ color:#fff; }
.panel--navy p{ color:var(--ink-inverse-soft); }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem 1.25rem; margin-top:2.5rem; }
.gallery figure{ margin:0; display:flex; flex-direction:column; }
/* one ratio for every tile so mixed portrait/landscape sets sit in tidy rows */
.gallery img{ border-radius:10px; box-shadow:var(--shadow-lift);
  width:100%; aspect-ratio:4/3; object-fit:cover; }
/* a portrait photo cropped to 4:3 loses its top; bias the crop up so faces survive */
.gallery img.is-portrait, .project-card img.is-portrait, .feature img.is-portrait,
.sector img.is-portrait{ object-position:center 28%; }
.gallery figcaption{ font-size:.88rem; color:var(--ink-soft); margin-top:.55rem; }
.section--dark .gallery figcaption{ color:var(--ink-inverse-soft); }

/* copy that continues below a split */
.prose-after{ margin-top:clamp(1.5rem,3vw,2.25rem); }
.prose-after p{ max-width:68ch; }

/* balanced panel row */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,3vw,2rem);
  align-items:start; margin-top:clamp(2rem,4vw,3rem); }
@media (max-width: 700px){ .duo{ grid-template-columns:1fr; } }

/* why-us grid */
.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.1rem 1.75rem; }
.why__item{ border-top:2px solid var(--amber-deep); padding-top:.8rem; }
.why__item strong{ display:block; font:700 1.12rem var(--font-display); letter-spacing:.02em; margin-bottom:.15em; }
.why__item span{ color:var(--ink-soft); font-size:.97rem; }
.section--dark .why__item span{ color:var(--ink-inverse-soft); }

/* at-a-glance panel */
.glance{ background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:clamp(1.1rem,2.5vw,1.5rem); margin-bottom:clamp(1.5rem,3vw,2rem); box-shadow:var(--shadow-lift); }
.glance__list{ margin:0 0 1.1rem; display:grid; gap:.55rem; }
.glance__row{ display:grid; grid-template-columns:minmax(0,8.5rem) 1fr; gap:.2rem 1rem; align-items:baseline; }
.glance__row dt{ font:700 .82rem var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.glance__row dd{ margin:0; font-size:1.02rem; }
.glance__act{ display:flex; flex-wrap:wrap; gap:.7rem; }
.glance__act .btn{ padding:.75em 1.15em; font-size:.95rem; }
@media (max-width:560px){
  .glance__row{ grid-template-columns:1fr; gap:0; }
  .glance__act{ display:grid; grid-template-columns:1fr; }
}

/* what-it-covers, in the flow of the article */
.covers{ border-top:1px solid var(--line); margin-top:2rem; padding-top:1.4rem; }
.covers__list{ list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.5rem 2rem; }
.covers__list li{ position:relative; padding-left:1.3rem; }
.covers__list li::before{ content:""; position:absolute; left:0; top:.3em; width:.8em; height:1em;
  background:var(--bolt) center/contain no-repeat; }

/* who's who */
.roles{ display:grid; gap:.9rem; margin:1.8rem 0 0; border-top:1px solid var(--line); padding-top:1.4rem; }
.role{ display:grid; grid-template-columns:minmax(0,11rem) 1fr; gap:.3rem 1.5rem; align-items:baseline; }
.role strong{ font:700 1.08rem var(--font-display); letter-spacing:.02em; }
.role span{ color:var(--ink-soft); font-size:.97rem; }
@media (max-width:560px){ .role{ grid-template-columns:1fr; gap:.1rem; } }

/* video */
.video{ margin:0; }
.video video{ width:100%; height:auto; display:block; border-radius:12px; background:var(--navy-950);
  box-shadow:var(--shadow-lift); }
.video--portrait video{ max-width:340px; margin-inline:auto; }
.video figcaption{ font-size:.9rem; color:var(--ink-soft); margin-top:.7rem; text-align:center; }
.section--dark .video figcaption{ color:var(--ink-inverse-soft); }
.videogrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }

/* faq */
.faq{ border-top:1px solid var(--line); margin-top:2.5rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; padding:1rem .2rem; font:700 1.15rem var(--font-display); letter-spacing:.02em;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font:700 1.5rem var(--font-display); color:var(--amber-deep); transition:rotate .25s var(--ease); }
.faq details[open] summary::after{ rotate:45deg; }
.faq .faq__a{ padding:0 .2rem 1.1rem; color:var(--ink-soft); }

/* reviews page filter */
.filterbar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.filterbar button{
  font:600 .85rem var(--font-body); letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft);
  border-radius:999px; padding:.55em 1.1em; cursor:pointer; transition:all .2s var(--ease);
}
.filterbar button[aria-pressed="true"]{ background:var(--navy-950); color:#fff; border-color:var(--navy-950); }
.filterbar button:hover{ border-color:var(--brand); color:var(--brand); }
.filterbar button[aria-pressed="true"]:hover{ color:#fff; }

/* project cards */
.filter-empty{ margin-top:2rem; color:var(--ink-soft); }
/* explicit display on cards beats the browser default for [hidden]; restore it */
[hidden]{ display:none !important; }
.projects{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.5rem,3vw,2rem); }
.project-card{ display:block; text-decoration:none; color:var(--ink); border-radius:12px; overflow:hidden;
  background:#fff; border:1px solid var(--line); transition:box-shadow .25s var(--ease), translate .25s var(--ease); }
.project-card:hover{ box-shadow:var(--shadow-lift); translate:0 -4px; }
.project-card img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.project-card__body{ display:block; padding:1.35rem 1.5rem 1.6rem; }
.project-card__body .chip{ color:var(--copper); border-color:var(--copper); margin-bottom:.7rem; }
.project-card h3{ margin-bottom:.25em; }
.project-card p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* footer */
.foot{ background:var(--navy-950); color:var(--ink-inverse-soft); margin-top:0; }
.foot__grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,2.5fr) minmax(0,3fr) minmax(0,3fr);
  gap:clamp(1.75rem,4vw,3rem); padding-block:clamp(2.75rem,5vw,4rem) 2rem; }
.foot h2{ font:700 1.05rem var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-bottom:.7em; }
.foot__later{ margin-top:1.6em; }
.foot ul{ list-style:none; padding:0; margin:0; }
.foot li{ margin-bottom:.35em; }
.foot a{ color:var(--ink-inverse-soft); text-decoration:none; }
.foot a:hover{ color:var(--amber); }
.foot__brand p{ font-size:.95rem; }
.foot__accred{ font-size:.86rem; opacity:.8; }
.logo-img--foot{ width:164px; }
.foot__badges{ display:flex; gap:.7rem; margin-top:1.1rem; }
.foot__badges img{ height:46px; width:auto; border-radius:4px; background:#fff; padding:3px; }
.bb-badge{ display:inline-grid; place-items:center; background:var(--navy-900); border:1px solid var(--line-dark);
  border-radius:4px; padding:3px 8px; }
.bb-badge img{ height:40px; width:auto; background:transparent; padding:0; border-radius:0; }
.section--alt .bb-badge, .split .bb-badge{ background:var(--navy-950); }
.foot__tel a{ font:700 1.25rem var(--font-display); color:#fff; }
.foot__areas{ font-size:.92rem; }
.foot__legal{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line-dark); padding-block:1.2rem; font-size:.85rem; }
.foot__legal p{ margin:0; }
.foot__legal a{ text-decoration:underline; }

/* facebook link */
.fblink{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font:600 .92rem var(--font-body); line-height:1.25; color:var(--ink-inverse-soft);
  border:1px solid var(--line-dark); border-radius:999px; padding:.5rem .95rem .5rem .8rem;
  transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
.fblink svg{ flex:none; }
.fblink:hover{ color:#fff; border-color:var(--amber); background:var(--navy-900); }
.foot .fblink{ margin-top:.4rem; }
.panel .fblink{ color:var(--brand-bright); border-color:var(--line); }
.panel .fblink:hover{ color:#fff; background:var(--brand); border-color:var(--brand); }

.homeform__alt{ display:none; }
.jobsheet__more{ display:none; margin-top:1.1rem; }

/* mobile call bar */
.callbar{ display:none; }

/* ---------- reveals (JS enhances; default fully visible) ---------- */
html.js [data-reveal]{ opacity:0; translate:0 26px; }
html.js [data-reveal].in{ opacity:1; translate:0 0;
  transition:opacity .7s var(--ease), translate .7s var(--ease); }
html.js [data-reveal-clip]{ clip-path:inset(8% 4% 8% 4% round 12px); opacity:.001; }
html.js [data-reveal-clip].in{ clip-path:inset(0 0 0 0 round 12px); opacity:1;
  transition:clip-path .9s var(--ease), opacity .5s var(--ease); }
html.js .hero h1 .line > span{ translate:0 110%; }
html.js .hero.hero-in h1 .line > span{ translate:0 0; transition:translate .8s var(--ease); }
html.js .hero.hero-in h1 .line:nth-child(2) > span{ transition-delay:.09s; }
html.js .hero.hero-in h1 .line:nth-child(3) > span{ transition-delay:.18s; }
html.js .hero [data-hero-fade]{ opacity:0; translate:0 14px; }
html.js .hero.hero-in [data-hero-fade]{ opacity:1; translate:0 0; transition:.7s var(--ease); }
html.js .hero.hero-in [data-hero-fade="2"]{ transition-delay:.18s; }
html.js .hero.hero-in [data-hero-fade="3"]{ transition-delay:.3s; }
html.js .hero.hero-in [data-hero-fade="4"]{ transition-delay:.42s; }
html.js .hero__figure{ opacity:0; transform:scale(1.04); }
html.js .hero.hero-in .hero__figure{ opacity:1; transform:scale(1); transition:.9s var(--ease) .15s; }

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .nav{ display:none; }
  .nav.open{
    display:block; position:fixed; inset:var(--headh,64px) 0 0 0; z-index:var(--z-panel);
    background:var(--navy-950); overflow:auto; padding:1.5rem var(--gutter) 6rem;
  }
  .nav.open .nav__list{ flex-direction:column; gap:.2rem; }
  .nav.open .nav__item > a{ font:700 1.5rem var(--font-display); padding:.7rem .2rem; letter-spacing:.02em; }
  .nav.open .sub{ position:static; opacity:1; visibility:visible; translate:0; box-shadow:none;
    background:transparent; padding:0 0 .5rem .9rem; }
  .nav.open .sub a{ color:var(--ink-inverse-soft); font-size:1.05rem; padding:.35rem .2rem; }
  .nav.open .sub a:hover{ background:transparent; color:var(--amber); }
  .burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:10px; background:transparent; border:0; cursor:pointer;
  }
  .burger span{ display:block; height:2px; background:var(--ink-inverse); border-radius:2px; transition:.3s var(--ease); }
  .burger[aria-expanded="true"] span:nth-child(1){ translate:0 7px; rotate:45deg; }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ translate:0 -7px; rotate:-45deg; }
  .head__tel{ display:none; }
  .head__cta .btn{ display:none; }
  .hero .wrap{ grid-template-columns:1fr; }
  /* One column: the words first, so what someone reads on opening the site is
     who we are and what we do, not a screen-filling image slider. Then the
     before/after, its caption, and the NICEIC badges last. The figure dissolves
     so its parts can be ordered independently. */
  .hero__figure{ display:contents; }
  .hero__copy{ order:-3; }
  .hero__figure .ba{ order:-2; margin-top:2rem; }
  .hero__figure .ba__caption{ order:-1; }
  .hero__trust{ order:0; margin-top:2rem; }
  .switch{ left:1rem; top:auto; bottom:1rem; }
  .lightdemo__flick{ left:calc(1rem + 62px); top:auto; bottom:2rem; width:auto; text-align:left;
    background:oklch(0.19 0.045 277 / .82); color:#fff; padding:.3em .7em; border-radius:999px;
    transform:rotate(-2deg); font-size:.85rem; }
  .article{ grid-template-columns:1fr; }
  .article__aside{ position:static; }
  .split, .split--flip, .cta-band .wrap{ grid-template-columns:1fr; }
  .sector, .sector:nth-child(n){ grid-column:span 12; min-height:240px; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  body{ padding-bottom:64px; }
  /* Phones stack everything, so generous desktop rhythm becomes a very long scroll.
     Tighten spacing and type on small screens without removing any content. */
  .section{ padding-block: 2.4rem; }
  .section--tight{ padding-block: 1.8rem; }
  .page-hero .wrap{ padding-block: 1.6rem 1.9rem; }
  .hero .wrap{ padding-block: 1.6rem 2.2rem; }
  h1{ font-size: clamp(2.4rem, 10vw, 3rem); }
  /* .hero h1 out-specifies the line above, so it needs its own phone size */
  .hero h1{ font-size: clamp(2rem, 9vw, 2.9rem); }
  h2{ font-size: clamp(1.8rem, 7.5vw, 2.3rem); }
  .page-hero .lede, .hero__sub{ font-size: 1.05rem; }
  .section__intro{ margin-bottom: 1.4rem; }
  p{ margin-bottom: .85em; }
  .split, .article{ gap: 1.6rem; }
  .prose-after{ margin-top: 1.2rem; }
  .gallery{ gap: 1rem .9rem; margin-top: 1.6rem; }
  .features, .sectors, .projects, .quote-grid{ gap: 1rem; }
  .feature, .sector{ min-height: 220px; }
  .cta-band .wrap{ padding-block: 2.4rem; }
  .duo{ margin-top: 1.6rem; gap: 1rem; }
  .foot__grid{ padding-block: 2.2rem 1.4rem; }
  /* Homepage on a phone: show the strongest of each block and route people onward,
     rather than making them scroll the whole thing. Nothing is deleted; the full
     versions are one tap away and desktop is untouched. */
  .jobsheet--home li:nth-child(n+5){ display:none; }
  .jobsheet--home::after{ content:""; display:block; }
  .quote-card--extra{ display:none; }
  .homeform{ display:none; }
  .homeform__alt{ display:grid; gap:.7rem; margin:0; }
  .jobsheet__more{ display:block; }
  .homeform__alt .btn{ text-align:center; }
  .feature, .sector{ min-height: 190px; }
  /* a portrait photo at full phone width can eat most of a screen on its own */
  .split__media img{ max-height: 58vh; object-fit: cover; }
  .video--portrait video{ max-width: 260px; }
  /* long galleries: show the strongest few on a phone, the rest on wider screens */
  .gallery--trim figure:nth-child(n+5){ display:none; }
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0;
    z-index:var(--z-callbar); height:60px;
    box-shadow:0 -8px 24px -12px rgb(0 0 0 / .35);
  }
  .callbar a{ display:grid; place-items:center; font:700 1.05rem var(--font-display);
    letter-spacing:.04em; text-transform:uppercase; text-decoration:none; }
  .callbar__tel{ background:var(--navy-950); color:#fff; }
  .callbar__quote{ background:var(--amber); color:var(--navy-950); }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .jobsheet a{ grid-template-columns:1fr auto; }
  .jobsheet p{ display:none; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__legal{ padding-bottom:1.4rem; }
  .hero__trust img{ height:42px; }

}

/* ---------- the fun bits ---------- */
/* the lights coming up: the hero photograph arrives dim and brightens, which is
   the whole brand in one gesture. The switch still overrides it afterwards. */
html.js .lightdemo:not(.lights-off) img{ animation:fe-lights-up 1.7s cubic-bezier(.2,.6,.2,1) backwards; }
@keyframes fe-lights-up{ from{ filter:brightness(.3) saturate(.6); } to{ filter:none; } }
/* an animation, not a rule, so it hands control straight back to the light switch */

/* a thin amber line across the top that fills as you read down the page */
.scrollglow{ position:fixed; inset:0 0 auto 0; height:2px; z-index:60; transform:scaleX(0);
  transform-origin:0 50%; background:linear-gradient(90deg, var(--amber), var(--amber-deep));
  box-shadow:0 0 12px oklch(0.83 0.155 82 / .65); pointer-events:none; }

/* section headings draw a little light under themselves as they arrive */
html.js .section__intro h2::after{ content:""; display:block; height:2px; width:0; margin-top:.55rem;
  background:linear-gradient(90deg, var(--amber), transparent); }
html.js .section__intro.in h2::after{ width:140px; transition:width 1s var(--ease) .2s; }

/* photographs lift and breathe under the cursor */
.project-card img, .sector img, .page-hero__media img{ transition:scale .7s var(--ease); }
.project-card:hover img, .sector:hover img, .page-hero__media:hover img{ scale:1.04; }
.feature{ transition:translate .35s var(--ease), box-shadow .35s var(--ease); }
.feature:hover{ translate:0 -4px; }

/* filtered cards arrive rather than blink into place */
@keyframes fe-pop{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }
.fe-pop{ animation:fe-pop .45s var(--ease) both; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation:none !important; }
  html.js [data-reveal], html.js [data-reveal-clip]{ opacity:1; translate:0 0; clip-path:none; }
  html.js .hero h1 .line > span{ translate:0 0; }
  html.js .hero [data-hero-fade]{ opacity:1; translate:0 0; }
  html.js .hero__figure{ opacity:1; transform:none; }
  .switch{ display:none; }
  .lightdemo__flick{ display:none; }
  html.js .lightdemo:not(.lights-off) img{ animation:none; }
  .scrollglow{ display:none; }
  html.js .section__intro h2::after{ display:none; }
  .project-card:hover img, .sector:hover img, .page-hero__media:hover img{ scale:1; }
}

.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Wide screens again, last word: three project cards across, so nine of them
   read as three tidy rows instead of four, four and a lonely one. */
@media (min-width: 1800px){
  .projects{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- cookie consent ----------
   Sits above the mobile call bar, never over it: burying the Call and Free
   quote buttons would cost Matthew leads. Accept and refuse are the same
   size and weight, because PECR wants refusing to be as easy as agreeing. */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:58;
  background:var(--navy-900); color:var(--ink-inverse);
  box-shadow:0 -12px 34px -14px rgb(0 0 0 / .55);
  border-top:1px solid var(--line-dark);
}
.cc__inner{
  max-width:var(--wrap); margin-inline:auto; padding:1.15rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem 2rem; flex-wrap:wrap;
}
.cc__text{ flex:1 1 24rem; }
.cc__title{ font:700 1.15rem var(--font-display); letter-spacing:.03em;
  text-transform:uppercase; color:#fff; margin:0 0 .25rem; }
.cc__text p{ margin:0; font-size:.95rem; color:var(--ink-inverse-soft); max-width:62ch; }
.cc__text a{ color:var(--amber); }
.cc__actions{ display:flex; gap:.75rem; flex:0 0 auto; }
.cc__actions .btn{ min-width:9.5rem; text-align:center; }
.cc__btn--no{ background:var(--ink-inverse); color:var(--navy-950); }
.cc__btn--no:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); color:var(--navy-950); }
/* Fade only, never a slide. A translate here fights `hidden`: the element is
   display:none when the rule first applies, the animation never advances, and
   fill-mode `both` then parks the banner one whole height down, straight on
   top of the mobile call bar. Opacity cannot move anything. */
html.js .cc:not([hidden]){ animation:cc-in .4s var(--ease); }
@keyframes cc-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ html.js .cc:not([hidden]){ animation:none; } }
@media (max-width: 860px){
  .cc__inner{ padding-block:1rem; gap:.9rem; }
  .cc__actions{ width:100%; }
  .cc__actions .btn{ flex:1 1 0; min-width:0; }
}
@media (max-width: 640px){
  /* clear the 60px call bar */
  .cc{ bottom:60px; }
}
/* "Cookie settings" sits in a line of links, so it has to read as one */
.foot__cookies{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline; text-underline-offset:.2em;
}
.foot__cookies:hover{ color:var(--amber); }
.foot__reg{ font-size:.85rem; opacity:.75; }
/* the cookie-settings control inside prose has to look like the links round it */
button.wirelink{ background:none; border:0; padding:0; font:inherit; cursor:pointer; }