/* ============================================================
   MOVING FORWARD DAY
   Direction: the paperwork of a move — manifest, inventory,
   signed delivery note. Tabular, typographic, squared-off.
   Type: Saira Condensed for headings, Saira for body text,
   Saira Semi Condensed for labels, meta and numbers.
   ============================================================ */
:root{
  /* Palette taken from the mark in favicon.svg: navy plate, the
     light-to-deep blue of the M, and the amber ring around it. */
  --ink:        #07142A;   /* logo plate navy */
  --ink-2:      #0C3766;   /* deep logo blue, card + photo ground */
  --ink-3:      #124B84;
  --line:       rgba(255,255,255,.13);
  --line-dark:  #D3DCE4;
  --line-hair:  #E3E9EE;

  --blue:       #18A8F0;   /* logo mid blue */
  --blue-deep:  #0A63C8;   /* logo deep blue */
  --blue-soft:  #7FD0FA;   /* logo light blue */
  --blue-ink:   #084B9B;   /* pressed / text-on-paper blue */

  --amber:      #FFD200;   /* logo ring, top stop */
  --orange:     #F79018;   /* logo ring, bottom stop */

  --paper:      #F4F2EC;
  --paper-2:    #EAE6DC;
  --mist:       #8FA0AF;

  /* gradients, all derived from the two logo ramps */
  --grad-blue:   linear-gradient(135deg, #18A8F0 0%, #0A63C8 62%, #084B9B 100%);
  --grad-blue-h: linear-gradient(135deg, #35B8FB 0%, #0F71D8 62%, #0A56AC 100%);
  --grad-amber:  linear-gradient(135deg, #FFD200 0%, #F79018 100%);
  --grad-ink:    linear-gradient(168deg, #1160A2 0%, #0C3E74 45%, #082B52 100%);
  /* The dark sections read as the logo blue, not a neutral navy. Body
     carries it with background-attachment:fixed, so consecutive dark
     bands share one continuous wash instead of restarting the ramp. */
  --grad-deep:   linear-gradient(176deg, #0D4B8C 0%, #092F5C 48%, #06203E 100%);
  --grad-paper:  linear-gradient(168deg, #FBFAF6 0%, #F4F2EC 55%, #ECE9E0 100%);
  --glow-blue:   radial-gradient(120% 80% at 12% 0%, rgba(24,168,240,.16), transparent 60%);

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 56px);

  /* rounded corners + a light, believable shadow set */
  --r:    10px;
  --r-sm: 7px;
  --r-lg: 16px;
  --sh-sm:   0 1px 2px rgba(7,20,42,.06), 0 2px 6px rgba(7,20,42,.06);
  --sh:      0 2px 4px rgba(7,20,42,.05), 0 8px 22px rgba(7,20,42,.09);
  --sh-lg:   0 4px 10px rgba(7,20,42,.06), 0 18px 44px rgba(7,20,42,.14);
  --sh-blue: 0 6px 18px rgba(10,99,200,.28);

  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --body: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Saira Semi Condensed", "Segoe UI", sans-serif;
}


*,*::before,*::after{box-sizing:border-box}
/* The browser's own [hidden] rule loses to any class that sets display,
   and plenty here do (.btn is inline-flex, .grp__item is flex). Without
   this, hiding an element from script silently does nothing. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--grad-deep);
  background-attachment:fixed;
  color:#E6EDF3;
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
button{font:inherit}

/* designed focus, distinct from hover */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(20,119,196,.22);
  border-radius:2px;
}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.band{position:relative;padding-block:clamp(56px,7vw,96px)}
.band--tight{padding-block:clamp(40px,5vw,64px)}
.band--tall{padding-block:clamp(72px,10vw,132px)}
.band--paper{background:var(--paper);color:var(--ink)}
.band--rule{border-top:1px solid var(--line)}
.band--paper.band--rule{border-top-color:var(--line-dark)}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.3rem,5vw,3.7rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem)}
h3{font-size:1.16rem;line-height:1.2}
.lede{font-size:clamp(1rem,1.4vw,1.1rem);color:#AFC0CE;max-width:62ch;margin:16px 0 0}
.band--paper .lede{color:#4A5C6B}

/* the one mono label device, used sparingly (2-3 times per page) */
.kicker{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-soft);
  margin:0 0 14px;display:block;
}
.band--paper .kicker{color:var(--blue-deep)}

/* section headings: a rule and a title, no three-part template */
.shead{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(26px,3.5vw,40px);flex-wrap:wrap}
/* may shrink and wrap when the column is narrow (the coverage section
   puts this heading in a half-width column), but never stretches */
.shead h2{flex:0 1 auto;min-width:0}
.shead p{margin:0;color:#93A6B6;font-size:.95rem;max-width:46ch}
.band--paper .shead p{color:#5D6E7C}

/* ---------- buttons: squared, flat, no gradients ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:.96rem;text-decoration:none;
  transition:background .16s ease, border-color .16s ease, color .16s ease,
             box-shadow .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background-image:var(--grad-blue);background-color:var(--blue-deep);color:#fff;box-shadow:var(--sh-blue)}
.btn--primary:hover{background-image:var(--grad-blue-h);box-shadow:0 8px 24px rgba(10,99,200,.36)}
.btn--amber{background-image:var(--grad-amber);background-color:var(--amber);color:#241A03;box-shadow:0 6px 16px rgba(247,144,24,.3)}
.btn--amber:hover{background-image:linear-gradient(135deg,#FFDD3B 0%,#FFA134 100%);box-shadow:0 8px 22px rgba(247,144,24,.38)}
.btn--ghost{background:transparent;color:inherit;border-color:rgba(255,255,255,.28)}
.band--paper .btn--ghost{border-color:rgba(11,22,34,.28)}
.btn--ghost:hover{border-color:currentColor}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:40;color:var(--ink);
  transition:background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.hdr.stuck{background:rgba(244,242,236,.96);backdrop-filter:blur(10px);border-bottom-color:var(--line-dark)}
.hdr__in{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{height:40px;width:auto;flex:none;display:block}
.brand b{font-family:var(--display);font-size:1rem;letter-spacing:-.01em;line-height:1.05;display:block}
.brand span{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:#6B7F90;text-transform:uppercase}
.nav{display:none;gap:22px;margin-left:auto;font-size:.92rem}
@media (min-width:1000px){.nav{display:flex}}
.nav a{text-decoration:none;color:#41525F;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--orange);color:var(--ink)}
.hdr__cta{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (min-width:1000px){.hdr__cta{margin-left:0}}
.callnum{display:none;font-family:var(--mono);font-size:.82rem;color:#41525F;text-decoration:none}
@media (min-width:1240px){.callnum{display:block}}
.langsw{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;border-radius:var(--r);flex:none;
  font-family:var(--mono);font-size:.7rem;font-weight:600;
  color:#41525F;border:1px solid var(--line-dark);text-decoration:none;
}
.langsw:hover{border-color:var(--blue);color:var(--blue-deep)}

/* ============================================================
   HERO — the quote request is the hero, not a photo card.
   ============================================================ */
.hero{
  position:relative;color:var(--ink);background:var(--paper);
  padding-top:clamp(104px,12vw,140px);padding-bottom:clamp(44px,6vw,72px);
}
.hero__grid{display:grid;gap:clamp(32px,4vw,56px);align-items:start}
@media (min-width:940px){.hero__grid{grid-template-columns:1.15fr .85fr}}
.hero h1{color:var(--ink);max-width:15ch}
.hero h1 em{font-style:normal;display:block;color:var(--blue-deep)}
.hero .lede{color:#46596A;margin-top:18px;max-width:44ch}
.hero__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero__proof{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.76rem;color:#5D6E7C;
}
.chipstat{display:flex;align-items:center;gap:8px}
.chipstat b{color:var(--ink);font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
.live-dot{background:#1B9E5F}

/* the quote card: the conversion device, first screen */
.quotecard{
  background:#fff;border:1px solid var(--line-dark);border-top:3px solid var(--blue-deep);
  padding:22px 24px 20px;
}
.quotecard h2{font-size:1.05rem;font-family:var(--mono);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.quotecard__intro{margin:12px 0 0;font-size:.93rem;color:#3E5060}
.quotecard__list{list-style:none;margin:14px 0 0;padding:0;counter-reset:q}
.quotecard__list li{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  padding:10px 0;border-top:1px solid var(--line-hair);font-size:.93rem;color:#3E5060;line-height:1.4;
}
.quotecard__list li:first-child{border-top:0}
.quotecard__list li::before{
  counter-increment:q;content:counter(q);
  font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--blue-deep);
  border:1px solid var(--line-dark);width:20px;height:20px;
  display:grid;place-items:center;margin-top:1px;
}
.quotecard__note{
  margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line-hair);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:#6E7F8D;text-transform:uppercase;
}
.quotecard .btn{width:100%;margin-top:14px}
.quotecard__alt{
  display:block;text-align:center;margin-top:10px;font-size:.85rem;color:var(--blue-deep);
}

/* ---------- full-bleed photography ---------- */
/* The band grows with the viewport instead of staying a fixed 520px
   strip: on a wide screen a capped height forces object-fit to crop away
   most of the photo (heads, van lettering). Capping the band width too
   stops the crop getting worse on ultrawide monitors. */
.bleed{position:relative;width:100%;overflow:hidden;background:var(--ink-2)}
.bleed img{
  width:100%;
  /* Height tracks viewport width so the crop ratio stays roughly constant.
     A fixed cap here is what cut the crew member's head off on wide
     screens: the band stayed 520px while the width kept growing. */
  height:clamp(240px,34vw,900px);
  object-fit:cover;
  object-position:50% 36%;   /* bias upward: faces and van lettering sit high */
}
.bleed figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px var(--pad);
  background:linear-gradient(0deg,rgba(11,22,34,.86),transparent);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#D7E3EC;
}

/* ---------- the rate ledger: page centrepiece ---------- */
.ledger{border-top:1px solid var(--line-dark)}
.band:not(.band--paper) .ledger{border-top-color:var(--line)}
.ledger__row{
  display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line-hair);
}
.band:not(.band--paper) .ledger__row{border-bottom-color:var(--line)}
@media (min-width:760px){
  .ledger__row{grid-template-columns:minmax(0,16ch) minmax(0,1fr)}
}
.ledger__name{font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--ink);line-height:1.15}
.band:not(.band--paper) .ledger__name{color:#F1F6FA}
.ledger__desc{color:#5D6E7C;font-size:.93rem;grid-column:1/-1}
.band:not(.band--paper) .ledger__desc{color:#A4B5C3}
@media (min-width:760px){.ledger__desc{grid-column:auto}}
.subhead{
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-deep);margin:clamp(30px,4vw,44px) 0 12px;
}
.subhead:first-of-type{margin-top:0}

.fineprint{
  margin-top:20px;font-family:var(--mono);font-size:.76rem;color:#5D6E7C;
  display:grid;gap:8px;
}
@media (min-width:720px){.fineprint{grid-template-columns:1fr 1fr}}
.fineprint span{display:flex;align-items:flex-start;gap:9px}
.fineprint svg{width:13px;height:13px;stroke:var(--blue-deep);fill:none;stroke-width:2.4;flex:none;margin-top:4px}

/* ---------- services as an inventory list, not cards ---------- */
.inv{display:grid;gap:0;border-top:1px solid var(--line-dark)}
@media (min-width:820px){.inv{grid-template-columns:1fr 1fr;column-gap:48px}}
.inv__item{padding:20px 0;border-bottom:1px solid var(--line-hair);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.inv__item svg{width:26px;height:26px;stroke:var(--blue-deep);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.inv__b h3{color:var(--ink);margin-bottom:5px}
.inv__b p{margin:0;color:#5D6E7C;font-size:.93rem}


/* ---------- fleet as a spec sheet ---------- */
.spec{display:grid;gap:0;border-top:1px solid var(--line)}
.spec__row{
  display:grid;gap:14px 24px;padding:22px 0;border-bottom:1px solid var(--line);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:760px){.spec__row{grid-template-columns:160px 1fr auto}}
.spec__shot{overflow:hidden;background:var(--ink-2);position:relative;aspect-ratio:4/3}
.spec__shot img{width:100%;height:100%;object-fit:cover}
.spec__b h3{margin:0 0 4px;color:#F1F6FA}
.spec__b p{margin:0 0 8px;color:#A4B5C3;font-size:.93rem;max-width:52ch}
.spec__meta{font-family:var(--mono);font-size:.74rem;color:var(--mist);letter-spacing:.04em}
.spec__for{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--amber);
  justify-self:start;max-width:18ch;line-height:1.35;
}
@media (min-width:760px){.spec__for{justify-self:end;text-align:right}}

/* ---------- office move: its own panel, closing the fleet ---------- */
.omove{
  margin-top:clamp(28px,4vw,44px);
  background:var(--grad-ink);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:clamp(24px,3.2vw,38px);
  display:grid;gap:clamp(20px,3vw,40px);align-items:center;
}
@media (min-width:860px){.omove{grid-template-columns:1.15fr .85fr}}
.omove__b h3{color:#fff;font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:12px}
.omove__b p{margin:0 0 20px;color:#BCCBD8;font-size:.96rem;max-width:52ch}
.omove__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.omove__list li{
  display:flex;align-items:flex-start;gap:11px;
  color:#DCE9F7;font-size:.93rem;
}
.omove__list svg{width:14px;height:14px;stroke:var(--amber);fill:none;stroke-width:2.4;flex:none;margin-top:5px}

/* ---------- the four-frame job sequence ---------- */
.flow{display:grid;gap:2px;background:var(--line-dark)}
@media (min-width:700px){.flow{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.flow{grid-template-columns:repeat(4,1fr)}}
.frame{background:var(--paper);display:flex;flex-direction:column}
.frame figure{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame__b{padding:18px 18px 22px}
.frame__n{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--blue-deep);
  text-transform:uppercase;margin:0 0 7px;
}
.frame h3{color:var(--ink);margin-bottom:6px;font-size:1.05rem}
.frame p{margin:0;color:#5D6E7C;font-size:.9rem}
.checks{display:grid;gap:0;margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line-dark)}
@media (min-width:620px){.checks{grid-template-columns:1fr 1fr;column-gap:44px}}
.check{padding:16px 0;border-bottom:1px solid var(--line-hair)}
.check b{display:block;font-family:var(--display);font-size:1rem;color:var(--ink);margin-bottom:3px}
.check span{font-size:.9rem;color:#5D6E7C}

/* ---------- process: editorial, not cards ---------- */
.steps{display:grid;gap:0;counter-reset:s;border-top:1px solid var(--line)}
@media (min-width:880px){.steps{grid-template-columns:repeat(3,1fr);column-gap:44px}}
/* the How It Works process runs to four steps, not three */
@media (min-width:720px) and (max-width:1079px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}}
@media (min-width:1080px){.steps--4{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}}
.step{padding:24px 0;border-bottom:1px solid var(--line)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:.72rem;color:var(--amber);display:block;margin-bottom:12px;letter-spacing:.1em;
}
.step h3{margin:0 0 7px;color:#F1F6FA}
.step p{margin:0;color:#A4B5C3;font-size:.94rem}
.step__t{font-family:var(--mono);font-size:.72rem;color:var(--blue-soft);margin-top:12px;display:block;letter-spacing:.04em}

/* ---------- waybill strip ---------- */
.strip{background:var(--paper-2);position:relative;border-block:1px solid #D8D0BE}
.strip::before{
  content:"ROUTE MANIFEST \00b7 NL";
  position:absolute;left:var(--pad);top:9px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:#A79A7B;display:none;
}
@media (min-width:820px){.strip::before{display:block}}
.strip__in{display:grid;grid-template-columns:repeat(2,1fr);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
@media (min-width:820px){.strip__in{grid-template-columns:repeat(4,1fr)}}
.stat{padding:30px 20px 26px 0;color:var(--ink)}
.stat b{display:block;font-family:var(--display);font-size:1.8rem;line-height:1;font-weight:700}
.stat span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#8A7E63;display:block;margin-top:7px}
.stat b i{font-style:normal;color:var(--orange)}

/* ---------- coverage ---------- */
.cover{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
@media (min-width:940px){.cover{grid-template-columns:.9fr 1.1fr}}
.maplike{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);
}
.maplike svg{position:absolute;inset:0;width:100%;height:100%}
.taglist{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tag{
  font-family:var(--mono);font-size:.74rem;padding:6px 11px;border-radius:var(--r);
  border:1px solid var(--line);color:#BCCBD8;
}
.tag--on{border-color:rgba(242,176,30,.55);color:var(--amber)}
a.tag{text-decoration:none;transition:border-color .16s ease,color .16s ease}
a.tag:hover{border-color:var(--blue-soft);color:#fff}

/* ---------- cities: a list of links, not a card grid ---------- */
.citylist{border-top:1px solid var(--line-dark);margin-top:8px}
.cityrow{
  display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line-hair);
  text-decoration:none;color:inherit;transition:padding-left .18s ease;
}
.cityrow:hover{padding-left:8px}
.cityrow b{font-family:var(--display);font-size:1.4rem;font-weight:700;color:var(--ink);line-height:1.1}
.cityrow span{grid-column:1/-1;color:#5D6E7C;font-size:.92rem;max-width:66ch}
@media (min-width:760px){.cityrow span{grid-column:1;grid-row:2}}
.cityrow em{
  font-style:normal;font-family:var(--mono);font-size:.74rem;color:var(--blue-deep);
  white-space:nowrap;justify-self:end;
}
.cityrow:hover em{text-decoration:underline}

/* ---------- reviews: delivery slips ---------- */
.revs{display:grid;gap:18px}
@media (min-width:860px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{
  background:#fff;border:1px solid var(--line-dark);border-top:2px dashed #B9C7D2;
  padding:22px;display:flex;flex-direction:column;
}
.rev p{color:#2B3B49;margin:0 0 18px;font-size:.97rem}
.rev q{quotes:none}
.rev footer{margin-top:auto;display:flex;align-items:center;gap:12px}
.stamp{
  width:40px;height:40px;flex:none;border-radius:var(--r);
  border:1.5px solid var(--blue-deep);color:var(--blue-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:600;font-size:1rem;line-height:1;
  transform:rotate(-5deg);
}
.stamp i{font-style:normal;font-size:.36rem;letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.rev b{display:block;font-size:.92rem;color:var(--ink)}
.rev small{font-family:var(--mono);font-size:.68rem;color:#75858F}
.stars{color:var(--orange);letter-spacing:2px;font-size:.8rem;margin-bottom:12px}

/* ---------- quote form ---------- */
.quote{background:var(--paper);color:var(--ink)}
.quote__grid{display:grid;gap:20px;align-items:start}
@media (min-width:980px){.quote__grid{grid-template-columns:1.3fr .7fr}}
.calc{background:#fff;border:1px solid var(--line-dark);padding:clamp(22px,3vw,32px)}
.calc__top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.calc__top h2{font-size:1.4rem;color:var(--ink)}
.badge{
  display:inline-flex;align-items:center;gap:7px;flex:none;border-radius:var(--r);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:#0E6B3F;background:#E7F5ED;border:1px solid #BFE0CD;padding:5px 10px;
}
.calc__sub{margin:0 0 22px;color:#5D6E7C;font-size:.93rem}
.fgrid{display:grid;gap:14px}
.two{display:grid;gap:14px}
@media (min-width:540px){.two{grid-template-columns:1fr 1fr}}
.f{display:block}
.f > span{
  display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:#66788A;margin-bottom:6px;
}
.f > span i{font-style:normal;color:var(--orange)}
select, input[type=text], input[type=tel], input[type=email], input[type=date], textarea{
  width:100%;padding:13px 14px;border-radius:var(--r);font-family:var(--body);
  background:#FBFCFD;border:1px solid var(--line-dark);color:var(--ink);font-size:.95rem;
  transition:border-color .16s ease, background .16s ease;
}
textarea{resize:vertical;min-height:100px;line-height:1.5}
select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2366788A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
input::placeholder, textarea::placeholder{color:#9AABB8}
input:hover, select:hover, textarea:hover{border-color:#AEBECB}
input:focus, select:focus, textarea:focus{border-color:var(--blue);background:#fff}
.f--invalid input, .f--invalid textarea, .f--invalid select{border-color:var(--orange);background:#FFF9F2}
.f__err{
  display:none;margin:6px 0 0;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.04em;color:#B4531A;
}
.f--invalid .f__err{display:block}

.calc__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.calc__or{font-size:.86rem;color:#66788A}
.calc__or a{color:var(--blue-deep);font-weight:600}
.calc__legal{margin:18px 0 0;font-size:.78rem;color:#75858F;display:flex;gap:9px;align-items:flex-start}
.calc__legal svg{width:13px;height:13px;stroke:#9AABB8;fill:none;stroke-width:2;flex:none;margin-top:3px}

.qcard{background:var(--ink-2);border:1px solid rgba(255,255,255,.08);color:#E6EDF3}
.qcard__shot{position:relative;aspect-ratio:16/10;overflow:hidden}
.qcard__shot img{width:100%;height:100%;object-fit:cover}
.qcard__b{padding:22px}
.qcard h3{margin-bottom:14px;color:#fff}
.qline{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}
.qline:first-of-type{border-top:0;padding-top:2px}
.qline svg{width:16px;height:16px;stroke:var(--amber);fill:none;stroke-width:1.8;flex:none;margin-top:3px}
.qline b{display:block;font-size:.93rem;font-weight:600}
.qline a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.qline a:hover{border-bottom-color:var(--amber);color:var(--amber)}
.qline span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--mist);margin-top:3px}

/* sent state */
.sent{display:none;text-align:left}
.calc.is-sent .fgrid,
.calc.is-sent .calc__foot,
.calc.is-sent .calc__legal,
.calc.is-sent .calc__error,
.calc.is-sent .calc__sub,
.calc.is-sent .calc__top{display:none}
.calc.is-sent .sent{display:block}
.sent__mark{
  width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:16px;
  background:var(--amber);
}
.sent__mark svg{width:22px;height:22px;stroke:#221803;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sent h3{font-size:1.4rem;margin-bottom:8px;color:var(--ink)}
.sent p{color:#5D6E7C;margin:0 0 18px;font-size:.94rem}
.sent__list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px;font-size:.92rem;color:#3E5060}
.sent__list li{display:flex;gap:12px;align-items:flex-start}
.sent__list b{font-family:var(--mono);font-size:.68rem;color:var(--blue-deep);letter-spacing:.08em;padding-top:3px}

/* ---------- about page ---------- */
.about{display:grid;gap:clamp(28px,4vw,52px);align-items:start}
@media (min-width:900px){.about{grid-template-columns:.85fr 1.15fr}}
.about__shot{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:4/3;margin:0}
.about__shot img{width:100%;height:100%;object-fit:cover}
.about__ph{
  display:grid;place-content:center;gap:8px;text-align:center;height:100%;padding:24px;
  border:1px dashed #B9AE93;color:#8A7E63;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
}
.about__body p{color:#4A5C6B;font-size:1rem;margin:0 0 16px;max-width:64ch}
.about__body h3{color:var(--ink);margin:28px 0 10px}
.facts{border-top:1px solid var(--line-dark);margin-top:28px}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line-hair);font-family:var(--mono);font-size:.82rem}
.facts dt{color:#75858F}
.facts dd{margin:0;color:var(--ink)}

/* ---------- projects: finished jobs, filterable ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vw,32px)}
.filt{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  padding:9px 15px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--line-dark);background:#fff;color:#4A5C6B;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.filt:hover{border-color:var(--blue);color:var(--blue-ink)}
.filt.is-on{background-image:var(--grad-blue);background-color:var(--blue-deep);border-color:transparent;color:#fff;box-shadow:var(--sh-blue)}

.projs{display:grid;gap:clamp(18px,2.5vw,26px)}
.proj{
  background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh);display:grid;
}
@media (min-width:900px){.proj{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}

.proj__shots{display:grid;gap:2px;background:var(--line-dark);min-height:210px}
.proj__shots--1{grid-template-columns:1fr}
.proj__shots--2{grid-template-columns:1fr 1fr}
.proj__shots--3{grid-template-columns:1fr 1fr}
.proj__shots--3 img:first-child{grid-column:1/-1}
.proj__shots--4{grid-template-columns:1fr 1fr}
/* height comes from the 4:3 ratio. A percentage height inside auto grid
   rows is resolved differently by Safari, which let the photos spill out
   over the text on iPhone, so only stretch to fill once the photos sit
   beside the text (desktop), where the row height is set by the text. */
.proj__shots img{width:100%;height:auto;min-height:105px;aspect-ratio:4/3;object-fit:cover;display:block}
.proj__shots{overflow:hidden;align-content:start}
@media (min-width:900px){
  .proj__shots{align-content:stretch}
  .proj__shots img{height:100%}
}

.proj__b{padding:clamp(20px,2.6vw,30px)}
.proj__kind{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-deep);margin:0 0 9px;
}
.proj__b h3{color:var(--ink);font-size:1.3rem;margin-bottom:12px}
.proj__did{margin:0 0 14px;color:#3E5060;font-size:.95rem}
.proj__did b{color:var(--ink);font-weight:600}
.proj__list{margin:0 0 16px;padding:0 0 0 18px;color:#5D6E7C;font-size:.92rem;display:grid;gap:6px}
.proj__facts{margin:0;border-top:1px solid var(--line-hair);padding-top:4px}
.proj__facts div{
  display:flex;justify-content:space-between;gap:18px;
  padding:9px 0;border-bottom:1px solid var(--line-hair);
  font-family:var(--mono);font-size:.78rem;
}
.proj__facts div:last-child{border-bottom:0}
.proj__facts dt{color:#75858F}
.proj__facts dd{margin:0;color:var(--ink);text-align:right}

.projs__empty{
  margin:26px 0 0;font-family:var(--mono);font-size:.85rem;color:#5D6E7C;
}
.projs__cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:clamp(26px,4vw,40px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line-dark);
}
.projs__cta span{font-size:1rem;color:#3E5060}

@media (max-width:639px){
  .proj__shots{min-height:170px}
  .proj__facts div{flex-direction:column;gap:2px}
  .proj__facts dd{text-align:left}
}

/* ---------- legal pages ---------- */
.legalpage{max-width:70ch}
.legalpage h3{margin:28px 0 9px;font-size:1.05rem;color:var(--ink)}
.legalpage p{margin:0 0 14px;color:#4A5C6B;font-size:.96rem}
.legalpage .notebox{
  background:#FBF3DF;border:1px solid #E4D2A2;border-radius:var(--r);
  padding:14px 16px;font-size:.89rem;color:#5C4B12;margin:0 0 26px;
}

/* ---------- footer ---------- */
.ft{background:#070F18;border-top:1px solid var(--line)}
.ft__grid{display:grid;gap:30px;padding-block:clamp(44px,6vw,68px)}
@media (min-width:820px){.ft__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.ft h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin:0 0 14px;font-weight:400}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.93rem}
.ft a{color:#BCCBD8;text-decoration:none}
.ft a:hover{color:var(--amber)}
.ft__meta{font-family:var(--mono);font-size:.76rem;color:var(--mist);display:grid;gap:7px}
.ft__bottom{border-top:1px solid var(--line);padding-block:20px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:#5A6E80}

/* ---------- sticky mobile action bar ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(11,22,34,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
}
.dock .btn{flex:1;padding:13px 12px;font-size:.92rem;min-height:46px}
@media (min-width:1000px){.dock{display:none}}
@media (max-width:999px){body{padding-bottom:74px}}

/* ============================================================
   MOBILE PASS — designed, not just collapsed
   ============================================================ */
@media (max-width:639px){
  body{font-size:16px}
  .hero{padding-top:96px}
  .hero h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .hero__act{gap:8px}
  .hero__act .btn{flex:1 1 100%;min-height:50px}
  .hero__proof{gap:6px 14px;font-size:.72rem}
  /* the price card leads on mobile, ahead of the photo */
  .quotecard{order:-1;padding:18px}
  .bleed img{height:210px}
  .ledger__row{padding:15px 0}
  .spec__row{grid-template-columns:1fr}
  .spec__shot{aspect-ratio:16/9}
  .cityrow b{font-size:1.2rem}
  .calc{padding:18px}
  /* comfortable tap targets everywhere */
  .nav a, .ft a, .qline a{min-height:34px;display:inline-flex;align-items:center}
  input, select, textarea{font-size:16px} /* stops iOS zoom-on-focus */
  .btn{min-height:48px}
}

/* ---------- reveal: two moments only, not every element ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* ============================================================
   LOGO PALETTE PASS
   Gradients, rounded corners and a light shadow set, all pulled
   from the mark: navy plate, blue ramp, amber ring.
   ============================================================ */

/* dark bands: navy gradient with a soft blue bloom, not flat blue */
.band:not(.band--paper):not(.strip){background-image:var(--glow-blue)}
.band--paper{background:var(--grad-paper)}

/* hero */
.hero{
  background-image:
    radial-gradient(88% 70% at 90% 0%, rgba(24,168,240,.17), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(255,210,0,.13), transparent 60%),
    var(--grad-paper);
}
.hero h1 em{
  background:var(--grad-blue);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
@supports not (background-clip:text){.hero h1 em{color:var(--blue-deep)}}

/* header */
.hdr.stuck{box-shadow:0 1px 0 var(--line-dark), 0 6px 24px rgba(7,20,42,.07)}
.langsw{border-radius:var(--r-sm)}
.langsw:hover{border-color:var(--blue);color:var(--blue-ink);background:rgba(24,168,240,.08)}

/* the quote card: rounded, lifted, gradient rule across the top */
.quotecard{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  padding-top:25px;
}
.quotecard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad-blue)}
.quotecard__list li::before{border-radius:var(--r-sm);color:var(--blue-ink);border-color:#C6D4E0}
.quotecard__alt{color:var(--blue-ink)}

/* full-bleed photography and every other framed image */
/* full-bleed spans the viewport, so it stays square-edged */
.bleed{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.spec__shot{border-radius:var(--r);box-shadow:var(--sh-sm)}
.maplike{border-radius:var(--r-lg);box-shadow:var(--sh)}
.about__shot{border-radius:var(--r-lg);box-shadow:var(--sh)}
.qcard__shot img{border-radius:0}

/* the four-frame sequence: real cards now, not a hairline grid */
.flow{gap:14px;background:transparent}
.frame{
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-dark);box-shadow:var(--sh-sm);
  background:var(--grad-paper);
  transition:box-shadow .2s ease, transform .2s ease;
}
.frame:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.frame__n{color:var(--blue-ink)}

/* reviews */
.rev{
  border-radius:var(--r-lg);border-top:1px solid var(--line-dark);
  box-shadow:var(--sh-sm);transition:box-shadow .2s ease, transform .2s ease;
}
.rev:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.stamp{
  border:0;color:#fff;background:var(--grad-blue);
  box-shadow:var(--sh-blue);border-radius:var(--r-sm);
}

/* quote form */
.calc{border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.qcard{
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--grad-ink);box-shadow:var(--sh-lg);
}
.badge{border-radius:999px}
.calc__or a{color:var(--blue-ink)}
.sent__mark{background:var(--grad-amber);box-shadow:0 6px 16px rgba(247,144,24,.32)}

/* small type that used the old flat deep blue */
.subhead, .fineprint svg, .frame__n, .cityrow em,
.band--paper .kicker, .inv__item svg, .sent__list b{color:var(--blue-ink)}
.fineprint svg{stroke:var(--blue-ink)}
.inv__item svg{stroke:var(--blue-ink)}

/* city rows read as rows you can press */
.cityrow{border-radius:var(--r);transition:background .18s ease, padding-left .18s ease}
.cityrow:hover{background:rgba(24,168,240,.07);padding-left:14px}

/* tags */
.tag{border-radius:999px}
.tag--on{background:rgba(255,210,0,.1)}
/* the tag was drawn for dark bands; on paper it needs its own ink */
.band--paper .tag{border-color:var(--line-dark);color:#4A5C6B;background:#fff}
.band--paper a.tag:hover{border-color:var(--blue);color:var(--blue-ink);background:rgba(24,168,240,.07)}
.band--paper .tag--on{border-color:rgba(247,144,24,.5);color:#8A5A0B;background:rgba(255,210,0,.12)}

/* footer + mobile dock */
.ft{background:var(--grad-deep)}
.dock{
  background:rgba(7,20,42,.94);
  box-shadow:0 -8px 28px rgba(0,0,0,.34);
}
.dock .btn{border-radius:var(--r)}

/* ------------------------------------------------------------
   A service row can carry its own call to action.
   ------------------------------------------------------------ */
.inv__cta{
  margin-top:12px;
  padding:9px 16px;
  font-size:.85rem;
  border-radius:999px;
  min-height:0;
}
.inv__cta svg{
  width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin:0;
}

/* ============================================================
   TRUSTED BY — a rail of client marks that never stops moving
   ============================================================ */
.trust{
  background:var(--grad-paper);
  border-block:1px solid var(--line-dark);
  padding-block:clamp(26px,4vw,38px);
  overflow:hidden;
}
.trust__head{
  display:block;text-align:center;margin:0 0 clamp(18px,2.5vw,26px);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:#7A8896;
}
.trust__head b{color:var(--blue-ink);font-weight:600}

/* the viewport: masked at both edges so marks fade rather than clip */
.marquee{
  position:relative;
  display:flex;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
/* two identical tracks side by side; when the first has travelled its
   own width the second sits exactly where it started, so the seam
   never shows and the loop reads as continuous. */
.marquee__track{
  display:flex;flex:none;align-items:center;
  gap:clamp(38px,6vw,76px);
  padding-right:clamp(38px,6vw,76px);
  animation:marquee 42s linear infinite;
  will-change:transform;
}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}

.marquee__item{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  width:clamp(112px,13vw,158px);height:60px;
}
.marquee__item img{
  display:block;
  width:auto;height:auto;
  /* px caps, not percentages: an SVG with only a viewBox has no
     intrinsic size for a percentage height to resolve against */
  max-width:100%;max-height:42px;
  opacity:.62;
  filter:grayscale(1);
  transition:opacity .22s ease, filter .22s ease;
}
.marquee:hover .marquee__item img{opacity:.5}
.marquee__item:hover img{opacity:1;filter:none}
/* stacked and round marks need the full rail height to carry the
   same optical weight as a wide wordmark */
.marquee__item--sq img{max-height:60px}
/* one supplier ships a white-on-transparent mark; flip it for a light rail */
.marquee__item img.is-flipped{filter:grayscale(1) invert(1) brightness(.35)}
.marquee__item:hover img.is-flipped{filter:invert(1) brightness(.3);opacity:1}

@media (max-width:639px){
  .marquee__item{width:104px;height:48px}
  .marquee__item img{max-height:34px}
  .marquee__item--sq img{max-height:48px}
  .marquee__track{animation-duration:30s}
}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .marquee__track{animation:none}
  .marquee__track + .marquee__track{display:none}
  .marquee__item img{opacity:.8;filter:none}
}


/* ============================================================
   SERVICES — the hub grid and the per-service pages
   ============================================================ */

/* a category is a heading plus its own grid, twice on the page */
.cat + .cat{margin-top:clamp(44px,6vw,72px)}
/* only one category shows at a time once the filter runs, so the
   gap meant to separate two stacked ones must not survive alone */
.cat[hidden] + .cat{margin-top:0}
.cat__head{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:clamp(20px,3vw,28px);
  border-bottom:1px solid var(--line-dark);
}
.cat__head h2{flex:0 1 auto;min-width:0;font-size:clamp(1.5rem,3vw,2.1rem)}
.cat__head p{margin:0;color:#5D6E7C;font-size:.94rem;max-width:48ch}
.cat__tag{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;flex:none;
  background-image:var(--grad-blue);color:#fff;box-shadow:var(--sh-blue);
}
.cat__tag--amber{background-image:var(--grad-amber);color:#241A03;box-shadow:0 5px 14px rgba(247,144,24,.3)}

.svcgrid{display:grid;gap:clamp(14px,2vw,20px)}
@media (min-width:660px){.svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.svcgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.svc{
  display:flex;flex-direction:column;
  padding:22px 22px 20px;
  background:#fff;border:1px solid var(--line-dark);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  text-decoration:none;color:inherit;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.svc:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:#BFCEDB}
.svc__ico{
  width:42px;height:42px;flex:none;border-radius:var(--r);
  display:grid;place-items:center;margin-bottom:14px;
  background:rgba(24,168,240,.1);
}
.svc__ico svg{
  width:22px;height:22px;stroke:var(--blue-ink);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.svc h3{color:var(--ink);font-size:1.12rem;margin-bottom:7px}
.svc__sum{margin:0 0 14px;color:#5D6E7C;font-size:.92rem;line-height:1.5}
.svc__facts{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.svc__facts li{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
  padding:4px 9px;border-radius:999px;
  border:1px solid var(--line-hair);background:#F8FAFB;color:#5D6E7C;
}
.svc__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--blue-ink);
}
.svc__more svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.svc:hover .svc__more svg{transform:translateX(3px)}

/* ---------- a single service page ---------- */
.crumb{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  color:#75858F;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.crumb a{color:var(--blue-ink);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{color:#A8B4BF}

.svcpage{display:grid;gap:clamp(28px,4vw,48px);align-items:start}
@media (min-width:960px){.svcpage{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}

.svcbody h2{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ink);margin:clamp(30px,4vw,44px) 0 12px}
.svcbody h2:first-child{margin-top:0}
.svcbody p{color:#4A5C6B;font-size:1rem;margin:0 0 14px;max-width:62ch}
.svcbody ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--line-hair)}
/* the tick is positioned, not a grid cell: a grid would split the
   leading <b> and the sentence after it into two separate cells */
.svcbody ul li{
  position:relative;padding:12px 0 12px 28px;
  border-bottom:1px solid var(--line-hair);
  color:#4A5C6B;font-size:.95rem;line-height:1.55;
}
.svcbody ul li::before{
  content:"";position:absolute;left:0;top:16px;
  width:15px;height:15px;border-radius:50%;
  background:var(--grad-blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.svcbody ul li b{color:var(--ink);font-weight:600}

/* the aside: facts you can scan, then the ask */
.svcside{display:grid;gap:16px}
@media (min-width:960px){.svcside{position:sticky;top:88px}}
.svcside__card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line-dark);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:24px 22px 20px;
}
.svcside__card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad-blue)}
.svcside__card h2{
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin:0 0 4px;
}
.svcside__card > p{margin:10px 0 0;font-size:.92rem;color:#5D6E7C}
.svcside__facts{margin:14px 0 0;border-top:1px solid var(--line-hair)}
.svcside__facts div{
  display:flex;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line-hair);
  font-family:var(--mono);font-size:.76rem;
}
.svcside__facts dt{color:#75858F}
.svcside__facts dd{margin:0;color:var(--ink);text-align:right}
.svcside__card .btn{width:100%;margin-top:16px}
.svcside__alt{display:block;text-align:center;margin-top:10px;font-size:.85rem;color:var(--blue-ink)}

/* related services, at the foot of a service page */
.related{display:grid;gap:10px}
@media (min-width:700px){.related{grid-template-columns:repeat(3,minmax(0,1fr))}}
.related a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;border-radius:var(--r);
  border:1px solid var(--line);color:#D7E3EC;text-decoration:none;
  font-size:.94rem;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.related a:hover{border-color:var(--blue-soft);background:rgba(24,168,240,.08);transform:translateY(-2px)}
.related a svg{width:14px;height:14px;flex:none;stroke:var(--amber);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:639px){
  .svc{padding:18px}
  .svcside__facts div{flex-direction:column;gap:2px}
  .svcside__facts dd{text-align:left}
}

/* ------------------------------------------------------------
   Two narrow-screen overflow fixes found while measuring the
   page at 390px: a section heading that refused to shrink, and
   a header button the sticky dock already duplicates.
   ------------------------------------------------------------ */
.shead h2{flex:0 1 auto;min-width:0}
@media (max-width:639px){
  .hdr__cta .btn{display:none}
}


/* ------------------------------------------------------------
   HEADER FIT
   The Dutch labels are longer than the English ones, and the row
   was wrapping mid-label ("Hoe het / werkt", "Offerte / aanvragen")
   on every Dutch page from about 1280px down. Keep the row on one
   line, let only the nav absorb the slack, and hold the phone
   number back until there is genuinely room for it.
   ------------------------------------------------------------ */
.hdr__in{flex-wrap:nowrap}
.brand{flex:none}
.brand b,.brand span span{white-space:nowrap}
/* never let the nav shrink past its own labels: with nowrap children
   a shrinkable nav spills over the buttons instead of yielding */
.nav{flex:none;gap:clamp(14px,1.5vw,22px)}
.nav a{white-space:nowrap}
.hdr__cta{flex:none;margin-left:auto;white-space:nowrap}
.hdr__cta .btn{white-space:nowrap}
.callnum{white-space:nowrap;display:none}
/* the phone number is the first thing to go when space is tight, and
   the longer Dutch labels need more room before it earns its place */
@media (min-width:1440px){.callnum{display:block}}
html[lang="nl"] .callnum{display:none}
@media (min-width:1680px){html[lang="nl"] .callnum{display:block}}
/* The desktop nav needs ~1140px before the Dutch labels clear the
   language switcher. Below that the sticky dock carries the actions,
   so move its breakpoint in step rather than leaving a band with no
   navigation at all. */
@media (max-width:1139px){
  .nav{display:none}
  .hdr__cta{margin-left:auto}
  .dock{display:flex}
  body{padding-bottom:74px}
}
@media (min-width:1140px) and (max-width:1279px){.nav{font-size:.88rem}}

/* ============================================================
   FAQ — plain <details>, so it opens and closes with no JS
   ============================================================ */
.faq{max-width:74ch;border-top:1px solid var(--line-hair)}
.band:not(.band--paper) .faq{border-top-color:var(--line)}
.faq details{border-bottom:1px solid var(--line-hair)}
.band:not(.band--paper) .faq details{border-bottom-color:var(--line)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:17px 40px 17px 0;
  font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;
  color:var(--ink);
}
.band:not(.band--paper) .faq summary{color:#F1F6FA}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--blue-ink)}
.band:not(.band--paper) .faq summary:hover{color:var(--blue-soft)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:23px;
  width:13px;height:13px;background:var(--blue-ink);
  transition:transform .2s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.band:not(.band--paper) .faq summary::after{background:var(--blue-soft)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{margin:0 0 20px;color:#4A5C6B;font-size:.96rem;line-height:1.6;max-width:66ch}
.band:not(.band--paper) .faq details p{color:#A4B5C3}

/* a reassurance line that sits under a step or a section */
.reassure{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  padding:9px 15px;border-radius:999px;
  background:rgba(24,168,240,.1);border:1px solid rgba(24,168,240,.22);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-ink);
}
.band:not(.band--paper) .reassure{
  background:rgba(24,168,240,.12);border-color:rgba(127,208,250,.3);color:var(--blue-soft);
}

/* closing call to action, used at the foot of a long page */
.endcta{display:grid;gap:18px;justify-items:start}
.endcta h2{max-width:20ch}
.endcta p{margin:0;color:#A4B5C3;font-size:1.02rem;max-width:56ch}
.band--paper .endcta p{color:#4A5C6B}
.endcta__row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}

/* ------------------------------------------------------------
   Service groups: the six blocks from the client's manual, each
   one leading to the detailed pages that sit underneath it.
   ------------------------------------------------------------ */
.grp{display:grid;gap:clamp(14px,2vw,20px)}
@media (min-width:920px){.grp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grp__item{
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,30px);
  background:#fff;border:1px solid var(--line-dark);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:box-shadow .2s ease;
}
.grp__item:hover{box-shadow:var(--sh)}
.grp__ico{
  width:44px;height:44px;flex:none;border-radius:var(--r);
  display:grid;place-items:center;margin-bottom:16px;
  background:rgba(24,168,240,.1);
}
.grp__ico svg{
  width:23px;height:23px;stroke:var(--blue-ink);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.grp__item h3{color:var(--ink);font-size:1.26rem;margin-bottom:10px}
.grp__item > p{margin:0 0 20px;color:#4A5C6B;font-size:.97rem;line-height:1.56;max-width:50ch}
.grp__lab{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8494A2;display:block;margin-bottom:10px;
}
.grp__links{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.grp__links a{
  display:inline-block;text-decoration:none;
  font-size:.83rem;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-hair);background:#F8FAFB;color:#41525F;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.grp__links a:hover{border-color:var(--blue);color:var(--blue-ink);background:rgba(24,168,240,.07)}
.grp__item .btn{margin-top:auto;align-self:flex-start}
@media (max-width:639px){.grp__item{padding:20px}}

/* ============================================================
   QUOTE WIZARD — the four-step request form
   Progressive disclosure, but every step is plain markup: with no
   JS the steps simply stack into one long form that still submits.
   ============================================================ */
.wiz__bar{
  display:flex;flex-wrap:wrap;gap:6px 8px;
  list-style:none;margin:0 0 24px;padding:0 0 20px;
  border-bottom:1px solid var(--line-hair);
  counter-reset:w;
}
.wiz__bar li{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:#8494A2;padding:5px 11px 5px 5px;border-radius:999px;
}
.wiz__bar li::before{
  counter-increment:w;content:counter(w);
  width:21px;height:21px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:#EDF1F4;color:#75858F;font-weight:600;font-size:.64rem;
}
.wiz__bar li.is-on{background:rgba(24,168,240,.1);color:var(--blue-ink)}
.wiz__bar li.is-on::before{background-image:var(--grad-blue);color:#fff}
.wiz__bar li.is-done::before{
  background:#1B9E5F;color:#fff;content:"";
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:source-over;
}
.wiz__bar li.is-done{color:#3E5060}

.wiz__step{border:0;margin:0;padding:0;min-width:0}
.wiz__step + .wiz__step{margin-top:30px}
.wiz__step legend{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-ink);padding:0;margin-bottom:14px;
}
/* once JS runs, only the active step is on screen and the gap goes away */
.wiz.is-live .wiz__step{display:none}
.wiz.is-live .wiz__step.is-on{display:block}
.wiz.is-live .wiz__step + .wiz__step{margin-top:0}

.wiz__nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}
.wiz__nav .btn{min-width:150px}
.wiz__count{font-family:var(--mono);font-size:.7rem;color:#75858F;margin-left:auto}

/* a plain yes/no/not sure row, easier to tap than a select */
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--line-dark);background:#FBFCFD;
  font-size:.9rem;color:#3E5060;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick label:hover{border-color:#AEBECB}
.pick input:checked + span{color:var(--blue-ink);font-weight:600}
.pick label:has(input:checked){border-color:var(--blue);background:rgba(24,168,240,.09)}
.pick input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* photo upload */
.drop{
  display:block;cursor:pointer;
  padding:18px;border-radius:var(--r);
  border:1.5px dashed #BFCEDB;background:#FBFCFD;
  text-align:center;transition:border-color .16s ease,background .16s ease;
}
.drop:hover{border-color:var(--blue);background:rgba(24,168,240,.05)}
.drop input{position:absolute;opacity:0;width:0;height:0}
.drop b{display:block;font-size:.92rem;color:var(--ink);margin-bottom:3px}
.drop span{font-size:.84rem;color:#75858F}
.drop__list{margin:10px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.74rem;color:#5D6E7C;display:grid;gap:4px}

/* the reassurance block that sits under the form */
.nextup{
  margin:22px 0 0;padding:16px 18px;border-radius:var(--r);
  background:#F4F8FB;border:1px solid var(--line-hair);
}
.nextup b{display:block;font-size:.92rem;color:var(--ink);margin-bottom:6px}
.nextup p{margin:0;font-size:.88rem;color:#5D6E7C;line-height:1.55}
.nextup ol{margin:9px 0 0;padding-left:18px;font-size:.88rem;color:#5D6E7C;display:grid;gap:4px}

@media (max-width:639px){
  .wiz__nav .btn{flex:1 1 100%;min-width:0}
  .wiz__count{margin:2px 0 0;width:100%;text-align:center}
  .wiz__bar li span{display:none}
}

/* ------------------------------------------------------------
   TO BE WRITTEN
   The About manual marks the founder story, the crew paragraph and
   the founder note as copy only the company can write, and says in
   as many words not to replace them with invented text. This block
   holds those gaps open and looks deliberate rather than broken.
   ------------------------------------------------------------ */
.todo{
  margin:0 0 22px;padding:18px 20px;
  border:1.5px dashed #C3B58E;border-radius:var(--r);
  background:#FBF6E8;
}
.todo__tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8A6D1F;
}
.todo__tag::before{
  content:"";width:13px;height:13px;flex:none;background:#B8913A;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9L2 19h20L13.7 3.9a2 2 0 00-3.4 0z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9L2 19h20L13.7 3.9a2 2 0 00-3.4 0z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.todo p{margin:0;color:#6B5A2A;font-size:.92rem;line-height:1.6;max-width:62ch}
.todo p + p{margin-top:10px}
.band:not(.band--paper) .todo{background:rgba(255,210,0,.07);border-color:rgba(255,210,0,.32)}
.band:not(.band--paper) .todo p{color:#D8C99A}
.band:not(.band--paper) .todo__tag{color:#E3C86B}
/* ============================================================
   PRINT — people screenshot and print the rate list
   ============================================================ */
@media print{
  .hdr, .dock, .qcard, .bleed, .trust, .maplike, .calc__foot, .revs, .frame figure, .quotecard .btn, .quotecard__alt{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .band, .hero{padding-block:12pt;background:#fff!important;color:#000!important}
  h1,h2,h3,.ledger__name,.stat b{color:#000!important}
  .ledger__row{break-inside:avoid;border-bottom:1px solid #999}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  .quotecard{border:1px solid #000}
}

/* ---------- Footer: certifications & awards ---------- */
.ft__certs{border-top:1px solid var(--line);padding-block:22px 26px}
.ft__certs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.ft__certs li{background:#fff;border-radius:var(--r);min-height:104px;width:148px;padding:12px 14px;display:flex;align-items:center;justify-content:center}
.ft__certs img{display:block;width:100%;height:76px;object-fit:contain}
/* official Trustoo widget: it draws its own white card, so drop the tile */
.ft__certs .ft__trustoo{background:transparent;min-height:0;width:auto;padding:0;display:flex;align-items:center}
.ft__trustoo .trustoo-widget{min-width:200px}
.legalpage ol,.legalpage ul{margin:0 0 14px;padding-left:1.4em;color:#4A5C6B;font-size:.96rem}
.legalpage li{margin-bottom:9px;padding-left:.2em}
.legalpage li ul{margin:8px 0 0}
.legalpage li ul li{margin-bottom:3px}
.legalpage a{color:var(--blue-deep)}
.legalpage__close{margin-top:24px !important;font-weight:600;font-style:italic;color:var(--ink) !important}

/* ------------------------------------------------------------
   MOBILE MENU
   Below 1140px the desktop nav is hidden (see HEADER FIT), so a
   burger button opens the same nav as a full-width panel under
   the header. One nav in the markup, two presentations.
   ------------------------------------------------------------ */
.burger{
  display:none;flex:none;width:42px;height:42px;padding:0;margin-left:2px;
  border:1px solid var(--line-dark);border-radius:var(--r);background:transparent;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease, opacity .2s ease}
.burger:hover{border-color:var(--blue)}
.burger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hdr.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.open .burger span:nth-child(2){opacity:0}
.hdr.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1139px){
  .burger{display:inline-flex}
  .hdr.open{background:#F4F2EC;border-bottom-color:var(--line-dark)}
  .hdr.open .nav{
    display:flex;flex-direction:column;gap:0;
    position:fixed;top:70px;left:0;right:0;
    max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;
    padding:6px 16px 22px;background:#F4F2EC;
    border-bottom:1px solid var(--line-dark);box-shadow:0 18px 40px rgba(7,20,42,.18);
    font-size:1.08rem;
  }
  .hdr.open .nav a{
    padding:15px 2px;min-height:52px;display:flex;align-items:center;
    border-bottom:1px solid var(--line-hair);color:var(--ink);font-weight:500;
  }
  .hdr.open .nav a:last-child{border-bottom:0}
  .hdr.open .nav a:hover{color:var(--blue-deep);border-bottom-color:var(--line-hair)}
  body.menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.burger span{transition:none}}
.ft__bottom .ft__credit{color:#8496A6;text-decoration:underline;text-underline-offset:2px}
.ft__bottom .ft__credit:hover{color:var(--amber)}

/* ------------------------------------------------------------
   ABOUT PAGE
   Hero with the team photo beside the intro, the company facts
   as a strip right under it, then the story in a wide reading
   column with the "why" and "what to expect" cards beside it.
   ------------------------------------------------------------ */
.ab-hero{padding-bottom:clamp(44px,6vw,72px)}
.ab-hero__grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:960px){.ab-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.ab-hero__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ab-hero__shot{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3;background:var(--paper-2)}
.ab-hero__shot img{width:100%;height:100%;object-fit:cover;display:block}

.ab-facts{
  margin:clamp(36px,5vw,60px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);
}
.ab-facts div{background:#fff;padding:18px 20px;min-width:0}
.ab-facts div:last-child{grid-column:1/-1}
@media (min-width:760px){
  .ab-facts{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ab-facts div:last-child{grid-column:auto}
}
.ab-facts dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#75858F;margin-bottom:6px}
.ab-facts dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink);overflow-wrap:anywhere}

.ab-story{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
@media (min-width:960px){.ab-story{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.ab-story__main h2{color:var(--ink);font-size:clamp(1.6rem,2.6vw,2.1rem);margin:12px 0 18px}
.ab-story__main h2.ab-gap{margin-top:clamp(38px,4.5vw,56px)}
.ab-story__main p{color:#4A5C6B;font-size:1.02rem;line-height:1.7;margin:0 0 16px;max-width:66ch}
.ab-story__aside{display:grid;gap:16px}
@media (min-width:960px){.ab-story__aside{position:sticky;top:96px}}
.ab-card{background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);box-shadow:var(--sh);padding:clamp(20px,2.4vw,28px)}
.ab-card--accent{border-top:3px solid var(--blue)}
.ab-card h3{color:var(--ink);font-size:1.15rem;margin:0 0 10px}
.ab-card p{color:#4A5C6B;font-size:.96rem;line-height:1.6;margin:0 0 10px}
.ab-card p:last-child{margin-bottom:0}

/* Trustoo review widget (home, under the client logos) */
.revwidget{min-height:180px}

/* certifications: centred on narrow screens */
@media (max-width:819px){
  .ft__certs h4{text-align:center}
  .ft__certs ul{justify-content:center}
  .ft__certs .ft__trustoo{width:100%;justify-content:center}
}