/* ═══════════════════════════════════════════════════════════════════════════
   Bentley Electrical Services — site.css
   Design concept: "the well-set document". Electrical certificates and reports are
   precise, formal documents; the site borrows that clarity — a margin column for
   section labels, schedules of facts set as key/value lists, fine rules, and one
   carefully tuned typeface. No photos, no decorative graphics, no card grids.

   Contents
     1. Font            5. Header & menu        9.  Lists, schedules, quotes
     2. Tokens          6. Page structure       10. Forms
     3. Base & type     7. Buttons & links      11. Footer, cookie notice
     4. Layout          8. Page heads & hero    12. Utilities, motion, print
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Font — Instrument Sans, self-hosted (one variable file: weights 400–700,
      widths 75–100). Open Font License: https://openfontlicense.org ── */
@font-face{
  font-family:"Instrument Sans";
  src:url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* A metric-matched fallback so the page doesn't jump when the font arrives (CLS) */
@font-face{font-family:"Instrument Fallback";src:local("Arial");size-adjust:97%;ascent-override:96%;descent-override:25%;line-gap-override:0%}

/* ── 2. Tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* Colour — warm whites, deep navy, one red for actions (from the logo) */
  --paper:#FBFAF7;      /* page */
  --white:#FFFFFF;      /* form fields, raised surfaces */
  --stone:#F2EEE7;      /* quiet sections (contact, notices) */
  --line:#E3DDD3;       /* hairline rules */
  --line-2:#CFC7BA;     /* field borders, stronger rules */
  --ink:#0F1B33;        /* headings and key text — deep navy */
  --text:#2C3548;       /* body copy */
  --muted:#5B6474;      /* secondary text — 5.9:1 on paper */
  --red:#C21F2D;        /* primary actions only — white text 6.4:1 */
  --red-dark:#A11824;
  --blue:#2E3192;       /* the logo's blue — focus rings */
  --good:#1D6B43;

  /* Type */
  --font:"Instrument Sans","Instrument Fallback",Arial,sans-serif;
  --fs-xs:.8125rem;     /* 13 — labels, small print */
  --fs-sm:.9375rem;     /* 15 */
  --fs-md:1.0625rem;    /* 17 — body */
  --fs-lg:clamp(1.125rem,1.05rem + .35vw,1.3125rem);     /* lead paragraphs */
  --fs-xl:clamp(1.3rem,1.15rem + .7vw,1.65rem);          /* standfirst, h3 large */
  --fs-h2:clamp(1.75rem,1.35rem + 1.6vw,2.6rem);
  --fs-h1:clamp(2.3rem,1.45rem + 3.4vw,4rem);

  /* Space (4px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --section:clamp(56px,7.5vw,112px);

  /* Layout */
  --wrap:1240px;
  --gutter:clamp(20px,5vw,56px);
  --label-col:200px;    /* the margin column for section labels (desktop) */
  --measure:66ch;       /* comfortable line length */
  --header-h:64px;

  --radius:3px;
}
@media (min-width:960px){:root{--header-h:76px}}

/* ── 3. Base & type ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--text);font:400 var(--fs-md)/1.65 var(--font);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:600;font-stretch:86%;letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
h1{font-size:var(--fs-h1);letter-spacing:-.025em;line-height:1.03}
h2{font-size:var(--fs-h2)}
h3{font-size:1.25rem;font-stretch:90%;line-height:1.25;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--ink)}
ul,ol{margin:0;padding:0}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--red)}
::selection{background:var(--ink);color:#fff}
.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--text)}
.standfirst{font-size:var(--fs-xl);line-height:1.45;color:var(--ink);font-weight:450;letter-spacing:-.005em;max-width:34em}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* Keyboard focus — a clear blue ring on every element */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}

.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:2000;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius);font-weight:600;text-decoration:none}
.skip-link:focus{top:var(--s4);color:#fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 4. Layout ────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section) 0;border-top:1px solid var(--line)}
.section--stone{background:var(--stone);border-top:0}
.section--flush{border-top:0}

/* The signature layout: a narrow margin column with the section label, and the content */
.split{display:grid;gap:var(--s5)}
.split > *{min-width:0}  /* let wide content (e.g. tables) scroll inside its own box */
@media (min-width:960px){
  .split{grid-template-columns:var(--label-col) minmax(0,1fr);gap:0 var(--s8)}
  .split > .margin{padding-top:.45em}
  .split > .margin.sticky{position:sticky;top:calc(var(--header-h) + 32px);align-self:start}
}
.label{display:flex;align-items:baseline;gap:12px;margin:0;font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.label .num{color:var(--red);font-variant-numeric:tabular-nums lining-nums;letter-spacing:.04em}
@media (min-width:960px){
  .split > .margin{border-top:2px solid var(--ink);padding-top:16px!important;align-self:start}
  .split > .margin:empty{border-top:0}
}
.margin-note{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--muted);max-width:22ch}

.section-intro{max-width:44rem;margin-bottom:var(--s7)}
.section-intro h2 + p{margin-top:var(--s4)}
.contact-band h2 + .lead{margin-top:var(--s4)}
.more{margin-top:var(--s6)}

/* ── 5. Header & menu ─────────────────────────────────────────────────────── */
.topline{display:none;border-bottom:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
.topline .wrap{display:flex;justify-content:space-between;gap:var(--s5);padding-top:9px;padding-bottom:9px}
.topline a{color:var(--muted);text-decoration:none}
.topline a:hover{color:var(--ink);text-decoration:underline}
.topline .sep{margin:0 .55em;color:var(--muted)}
.topline .tl-phone{display:none}  /* only shown on small laptops, where the header has no room for the phone block */
@media (min-width:960px){.topline{display:block}}

.site-header{position:sticky;top:0;z-index:100;background:rgba(251,250,247,.97);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(8px)){.site-header{background:rgba(251,250,247,.9);backdrop-filter:blur(8px)}}
.header-inner{display:flex;align-items:center;gap:var(--s5);height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;color:var(--ink);min-width:0}
.brand img{width:34px;height:auto;flex:none}
.brand-name{display:flex;flex-direction:column;font-weight:650;font-stretch:78%;text-transform:uppercase;letter-spacing:.02em;line-height:1.02;font-size:.95rem}
.brand-name small{font-size:.74rem;letter-spacing:.06em;font-stretch:80%;color:var(--muted);font-weight:600}
.brand:hover{color:var(--ink)}
.brand-name small{display:none}
@media (max-width:959px){.brand-name .bn-2{display:block}}
@media (max-width:399px){.brand-name{font-size:.86rem}.brand img{width:30px}}
@media (min-width:960px){.brand-name > span{white-space:nowrap}}
/* Small laptops: not enough room for everything — the phone number stays in the top line */
@media (min-width:960px) and (max-width:1199px){.header-call{display:none!important}.nav{gap:22px}.topline .tl-phone{display:inline}}
@media (min-width:960px){.brand-name small{display:block;margin-top:5px}}
@media (min-width:960px){
  .brand img{width:40px}
  .brand-name{font-size:1.06rem}
}

.nav{display:none}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-size:var(--fs-sm);font-weight:500;text-decoration:none;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]::after{background:var(--red)}
.header-call{display:none;text-decoration:none;color:var(--ink);font-weight:600;white-space:nowrap}
.header-call span{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--muted);line-height:1.2}
.header-call b{display:block;font-weight:600;font-size:var(--fs-md)}
.header-call:hover{color:var(--red)}
.header-inner .btn{display:none}
@media (min-width:960px){
  .nav{display:flex;gap:28px}
  .header-call{display:block;padding-left:var(--s5);border-left:1px solid var(--line);line-height:1.25}
  .header-inner .btn{display:inline-flex}
}

/* Phone and menu buttons (small screens) */
.hdr-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--white);color:var(--ink);font:600 var(--fs-sm)/1 var(--font);text-decoration:none;cursor:pointer}
.hdr-btn svg{width:18px;height:18px;flex:none}
.hdr-btn:hover{border-color:var(--ink);color:var(--ink)}
.hdr-btn--call{color:var(--red);padding:0}
.hdr-btns{display:flex;gap:8px}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
.menu-btn[aria-expanded="true"] .i-open{display:none}
@media (min-width:960px){.hdr-btns{display:none}}
@media (max-width:359px){.menu-btn .menu-word{display:none}}

.mobile-nav{position:fixed;inset:var(--header-h) 0 0 0;z-index:99;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s3) var(--gutter) calc(var(--s7) + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease}
.mobile-nav.open{opacity:1;transform:none}
.mobile-nav[hidden]{display:none}
.mobile-nav ul{list-style:none}
.mobile-nav > nav > ul > li{border-bottom:1px solid var(--line)}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;text-decoration:none;color:var(--ink);font-size:1.25rem;font-weight:600;font-stretch:88%}
.mobile-nav a[aria-current="page"]{color:var(--red)}
.mobile-nav .sub{padding:0 0 var(--s3) var(--s4);border-left:1px solid var(--line);margin-left:2px}
.mobile-nav .sub a{min-height:44px;font-size:var(--fs-md);font-weight:500;font-stretch:100%;color:var(--text)}
.mobile-nav .menu-contact{margin-top:var(--s6);display:grid;gap:var(--s3)}
.mobile-nav .menu-contact p{margin:var(--s2) 0 0;font-size:var(--fs-sm);color:var(--muted)}
body.menu-open{overflow:hidden}
@media (min-width:960px){.mobile-nav{display:none!important}}

/* ── 6. Page structure helpers ────────────────────────────────────────────── */
main{display:block}
figure{margin:0}
.breadcrumb{margin:0 0 var(--s5);font-size:var(--fs-sm);color:var(--muted)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li+li::before{content:"/";margin-right:6px;color:var(--line-2)}
.breadcrumb a{color:var(--muted)}

/* ── 7. Buttons & links ───────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:var(--radius);border:1.5px solid transparent;
  font:600 var(--fs-md)/1.2 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-dark);color:#fff}
.btn--secondary{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--secondary:hover{background:var(--ink);color:#fff}
.btn--small{min-height:44px;padding:8px 18px;font-size:var(--fs-sm)}
.btn--block{width:100%}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding:6px 0}
.arrow-link svg{width:16px;height:16px;transition:transform .2s ease}
.arrow-link:hover{color:var(--red);border-bottom-color:var(--red)}
.arrow-link:hover svg{transform:translateX(3px)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6)}
.phone-link{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.phone-link svg{width:20px;height:20px;color:var(--red);flex:none}
.phone-link b{display:block;font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em;line-height:1.2}
.phone-link small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.3}
.phone-link:hover b{color:var(--red)}

/* ── 8. Page heads & hero ─────────────────────────────────────────────────── */
.hero{padding:clamp(28px,6vw,88px) 0 clamp(36px,6vw,88px)}
.hero .label{margin-bottom:var(--s5)}
.hero h1{max-width:24ch}
.hero-grid{display:grid;gap:var(--s6);margin-top:var(--s5)}
.hero .lead{margin:0;max-width:38rem}
.hero .actions{margin-top:var(--s6)}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s9);margin-top:var(--s7);align-items:start}
}
@media (max-width:599px){
  .hero h1{font-size:2.15rem;line-height:1.06}
  .hero .lead{font-size:1.06rem;line-height:1.55}
  .hero .actions{margin-top:var(--s5)}
}
@media (max-width:599px){
  .hero .actions{flex-direction:column;align-items:stretch;gap:var(--s4)}
  .hero .actions .btn{width:100%}
  .hero .phone-link{padding:2px 0}
}

.page-head{padding:clamp(36px,6vw,88px) 0 clamp(32px,5vw,64px)}
.page-head h1{max-width:18ch}
.page-head .lead{margin-top:var(--s5);max-width:40rem}
.page-head .actions{margin-top:var(--s6)}
@media (max-width:959px){.page-head .split > .margin{display:none}}  /* the breadcrumb already says where you are */

/* ── 9. Lists, schedules, quotes ──────────────────────────────────────────── */

/* Schedule: facts set as label / value pairs, like the schedule on a certificate */
.schedule{display:grid;border-top:1px solid var(--ink)}
.schedule > div{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--s4);padding:14px 0;border-bottom:1px solid var(--line)}
.schedule dt{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.25em}
.schedule dd{margin:0;color:var(--ink);font-weight:500}
.schedule dd small{display:block;color:var(--muted);font-weight:400;font-size:var(--fs-sm)}
.schedule dd a{font-weight:500}
.schedule--hero > div{grid-template-columns:6.5rem 1fr;padding:12px 0}
.schedule--hero dd{font-size:var(--fs-sm)}
@media (max-width:959px){
  .schedule--hero{grid-template-columns:1fr 1fr;column-gap:var(--s5)}
  .schedule--hero > div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .schedule--hero dt{font-size:.72rem}
  .schedule--hero dd small{font-size:.82rem}
}
@media (min-width:760px){
  .schedule--row{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
  .schedule--row > div{grid-template-columns:1fr;gap:6px;padding:var(--s4) var(--s5) var(--s4) 0;border-bottom:0}
  .schedule--row > div + div{padding-left:var(--s5);border-left:1px solid var(--line)}
}

/* Service list: two columns of services, each opened by a fine rule */
.service-list{list-style:none;display:grid;gap:0 var(--s7)}
@media (min-width:760px){.service-list{grid-template-columns:1fr 1fr}}
.service-list li{border-top:1px solid var(--line)}
.service-list a,.service-list .item{display:block;padding:var(--s5) 0 var(--s5);text-decoration:none;color:inherit}
.service-list h3{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
.service-list h3 svg{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .2s ease,color .2s ease}
.service-list p{margin:var(--s2) 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.6;max-width:44ch}
.service-list a:hover h3{color:var(--red)}
.service-list a:hover h3 svg{color:var(--red);transform:translateX(3px)}

/* Three short points in a row, separated by rules rather than boxes */
.points{list-style:none;display:grid;gap:0;margin-top:var(--s7);border-top:1px solid var(--line)}
.points li{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.points h3{font-size:1.06rem;margin-bottom:var(--s2)}
.points p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
@media (min-width:760px){
  .points{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
  .points li{padding:var(--s5) var(--s5) var(--s5) 0;border-bottom:0}
  .points li + li{padding-left:var(--s5);border-left:1px solid var(--line)}
}

/* Quotes */
.quote-lead{margin:0}
.quote-lead blockquote{margin:0;font-size:var(--fs-xl);line-height:1.45;color:var(--ink);font-weight:450;max-width:36em;text-indent:-.42em}
.cite{display:block;margin-top:var(--s4);font-size:var(--fs-sm);color:var(--muted);font-style:normal}
.cite b{color:var(--ink);font-weight:600}
.quote-pair{display:grid;gap:var(--s5);margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
@media (min-width:760px){.quote-pair{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.quote-pair blockquote{margin:0;color:var(--text)}
.review-list{list-style:none;columns:1;column-gap:var(--s7)}
@media (min-width:860px){.review-list{columns:2}}
.review-list li{break-inside:avoid;padding:var(--s5) 0;border-top:1px solid var(--line)}
.review-list blockquote{margin:0;color:var(--text)}

/* Prose (service pages, legal pages) */
.prose > * + *{margin-top:var(--s4)}
.prose h2{margin-top:var(--s7);font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s6)}
.prose ul{list-style:none;display:grid;gap:10px;max-width:var(--measure)}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:1.5px;background:var(--red)}
.prose ol{padding-left:1.4em;display:grid;gap:10px;max-width:var(--measure)}
.prose ol li::marker{color:var(--muted);font-weight:600}
.callout{padding:var(--s5);background:var(--stone);border-left:2px solid var(--ink);max-width:var(--measure)}
.callout p{margin:0}
.toc{list-style:none;display:grid;gap:2px;font-size:var(--fs-sm);margin-top:var(--s4)}
.toc a{display:block;padding:6px 0 6px 12px;border-left:1.5px solid var(--line);text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.toc a.active{color:var(--ink);border-left-color:var(--red)}
@media (max-width:959px){.toc,.split > .margin.sticky{display:none}}

/* Tables (privacy page) — scroll sideways inside their own box on small screens */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);max-width:100%}
.data-table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--fs-sm)}
.data-table th,.data-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.data-table th{font-weight:600;color:var(--ink);background:var(--stone)}
.data-table tr:last-child td{border-bottom:0}
code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;color:var(--ink)}
.notfound-list{margin-top:var(--s6)}
@media (min-width:760px){.notfound-list{grid-template-columns:1fr 1fr}}

/* Contact band at the foot of pages — the one dark section, for depth */
.contact-band{background:var(--ink);color:#C9CFDB;border-top:0}
.contact-band h2,.contact-band .lead{color:#fff}
.contact-band .lead{color:#D5DAE4;margin-top:var(--s4)}
.contact-band .label{color:#AEB6C7}
.contact-band .label .num{color:#FF8A95}
.contact-band a{color:#fff}
.contact-band :focus-visible{outline-color:#fff}
@media (min-width:960px){.contact-band .split > .margin{border-top-color:#fff}}
.contact-band .phone-big{display:inline-block;margin-top:var(--s5);font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);font-weight:600;font-stretch:86%;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em;line-height:1;color:#fff;text-decoration:none}
.contact-band .phone-big:hover{color:#FF8A95}
.contact-band .contact-lines{margin-top:var(--s4);display:grid;gap:4px;color:#C9CFDB}
.contact-band .actions{margin-top:var(--s6)}

/* Contact page: a wider margin column holding phone, email and hours */
@media (min-width:960px){.contact-split{--label-col:300px}}
.contact-details{margin-top:var(--s4)}
.contact-details > div{grid-template-columns:1fr;gap:4px;padding:12px 0}
.contact-details dd a{overflow-wrap:anywhere}
.contact-details .email{font-size:var(--fs-sm)}
/* The first section after a page heading needs less space above it */
.page-head + .section{padding-top:clamp(40px,5vw,72px)}
/* Grouped lists inside one section (services overview) */
.group + .group{margin-top:clamp(48px,6vw,80px)}
.form-title{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem);margin-bottom:var(--s5)}
.points + .points{margin-top:0;border-top:0}

/* ── 10. Forms ────────────────────────────────────────────────────────────── */
.form{display:grid;gap:var(--s5);max-width:40rem}
.form[hidden],.form-title[hidden]{display:none}
.field{display:grid;gap:8px}
.field-row{display:grid;gap:var(--s5)}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.field label{font-weight:600;color:var(--ink);font-size:var(--fs-md)}
.field .opt{font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
.field .hint{font-size:var(--fs-sm);color:var(--muted);margin:-2px 0 0}
.input{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--white);color:var(--ink);font:400 var(--fs-md)/1.4 var(--font)}
.input:hover{border-color:var(--muted)}
.input:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--ink)}
textarea.input{min-height:140px;resize:vertical}
select.input{appearance:none;padding-right:44px;background:var(--white) 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 1l5 5 5-5' fill='none' stroke='%230F1B33' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center}
.input[aria-invalid="true"]{border-color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
.field-error{display:none;color:var(--red);font-size:var(--fs-sm);font-weight:600;margin:0}
.field-error.show{display:block}
.form-status{display:none;padding:var(--s4) var(--s5);border-left:3px solid var(--red);background:#FBEDEE;color:var(--ink);max-width:40rem}
.form-status.show{display:block}
.form-small{font-size:var(--fs-sm);color:var(--muted);margin:0}
.trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
/* Turnstile takes no space unless Cloudflare shows its tick-box */
.submit-row{display:grid;justify-items:start}
.cf-turnstile iframe{margin-bottom:var(--s4)}
@media (max-width:359px){.cf-turnstile{transform:scale(.9);transform-origin:left top}}  /* the 300px tick-box, on the narrowest phones */
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.busy .spinner{display:block}
.btn.busy .btn-arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.success{display:none;max-width:40rem;padding:var(--s6);background:var(--white);border:1px solid var(--line);border-top:3px solid var(--good)}
.success.show{display:block}
.success h2{font-size:1.6rem;margin-bottom:var(--s3)}
.success:focus{outline:none}

/* ── 11. Footer & cookie notice ───────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line);padding:var(--s8) 0 var(--s6);font-size:var(--fs-sm);color:var(--muted)}
.footer-grid{display:grid;gap:var(--s6)}
@media (min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media (min-width:1080px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
/* Footer brand: the same lockup as the header (logo mark + name), at every screen size on one line */
.brand--footer{margin-right:0;display:inline-flex}
.brand--footer img{width:40px}
.brand--footer .brand-name{font-size:1.06rem}
.brand--footer .brand-name > span{white-space:nowrap}
.brand--footer .brand-name small{display:block;margin-top:5px}
@media (max-width:359px){.brand--footer .brand-name{font-size:.95rem}}
.footer-about{margin-top:var(--s4);max-width:30ch}
.footer-grid h2{font-size:var(--fs-xs);font-weight:600;font-stretch:100%;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.footer-grid ul{list-style:none;display:grid;gap:2px}
.footer-grid a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);text-decoration:none}
.footer-grid a:hover{color:var(--red);text-decoration:underline}
.footer-grid p{margin:0 0 6px}
.footer-napit{display:flex;align-items:center;gap:12px;margin-top:var(--s5)}
.footer-napit img{width:34px}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s5);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);font-size:var(--fs-xs)}
.footer-legal p{margin:0;max-width:none}
.footer-legal a{color:var(--muted)}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--muted);text-decoration:underline;text-underline-offset:.22em;cursor:pointer;min-height:24px}
.link-btn:hover{color:var(--ink)}

/* Cookie notice — part of the page rather than a pop-up: paper background, a fine rule,
   the same type and buttons as the rest of the site. Reject and Accept look identical.
   Phones: a slim panel attached to the bottom edge. Wider screens: a small strip, bottom left. */
.cookie{position:fixed;z-index:500;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px 16px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line-2);
  box-shadow:0 -6px 20px -16px rgba(15,27,51,.35)}
.cookie[hidden]{display:none}
.cookie p{flex:1 1 auto;margin:0;font-size:.8125rem;line-height:1.45;color:var(--text)}
.cookie a{color:var(--ink)}
.cookie .cookie-btns{display:flex;gap:6px;flex:none}
.cookie .cookie-btns .btn{min-height:40px;padding:6px 14px;font-size:.8125rem;border-width:1px;background:var(--white)}
.cookie .cookie-btns .btn:hover{background:var(--ink);color:#fff}
@media (max-width:359px){.cookie{flex-wrap:wrap}.cookie .cookie-btns{width:100%}.cookie .cookie-btns .btn{flex:1}}
@media (min-width:640px){
  .cookie{left:var(--s4);right:auto;bottom:var(--s4);max-width:520px;padding:10px 10px 10px 16px;border:1px solid var(--line-2);border-radius:var(--radius);
    box-shadow:0 10px 28px -16px rgba(15,27,51,.4)}
}
/* ── 12. Utilities, motion, print ─────────────────────────────────────────── */
.mt-0{margin-top:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media print{.topline,.site-header,.mobile-nav,.cookie,.site-footer .footer-grid{display:none!important}body{background:#fff}}