/* ==========================================================================
   Vector Auto Transport — core stylesheet
   Direction 1b "Clear corporate": Archivo over Libre Franklin, cool neutrals,
   navy + brand blue, 4px geometry, hairline rules.
   Type comes from the --fs-* scale and layout from four breakpoints; adding a
   one-off size or breakpoint is how this sheet drifts, so use the tokens.
   ========================================================================== */

:root{
  --navy:#15375C;
  --navy-deep:#0C2340;
  --navy-ink:#0A1B2E;
  --blue:#1E96E0;
  --blue-action:#0F6FB8;
  --blue-deep:#0B5C99;
  --band:#F2F5F8;
  --line:#E2E7ED;
  --line-input:#C7D0DA;
  --slate:#5C6B7E;
  --white:#FFFFFF;

  --shell:1140px;
  --radius:4px;
  --radius-lg:6px;

  /* Two faces, two jobs. Archivo is squarer and tighter at heavy weights, so it
     carries headings and controls; Libre Franklin stays on running text. */
  --display:'Archivo','Libre Franklin','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Libre Franklin','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Type scale. Eleven steps, each one used and each one distinguishable.
     Nothing sizes text outside this set. */
  --fs-900:clamp(2.05rem,4.1vw,3.3rem);   /* page h1                */
  --fs-800:clamp(1.65rem,2.9vw,2.35rem);  /* section h2             */
  --fs-700:clamp(1.4rem,2.1vw,1.75rem);   /* prose h2               */
  --fs-600:1.4rem;                        /* card heading           */
  --fs-500:1.25rem;                       /* wordmark               */
  --fs-400:1.1rem;                        /* lede, phone, step h3   */
  --fs-300:1.0625rem;                     /* body                   */
  --fs-200:1rem;                          /* controls, dense text   */
  --fs-100:.9rem;                         /* secondary              */
  --fs-50:.8rem;                          /* meta                   */
  --fs-25:.72rem;                         /* uppercase labels       */

  /* Four breakpoints, named once here so the intent is readable. The media
     queries below repeat the literals because CSS cannot interpolate vars. */
  --bp-xs:560px;   /* single column everywhere       */
  --bp-sm:680px;   /* dense tables, sticky call bar  */
  --bp-md:880px;   /* two-column splits stack        */
  --bp-lg:1060px;  /* four-up grids halve, nav folds */
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

body{
  margin:0;
  font-family:var(--body);
  font-size:var(--fs-300);
  line-height:1.62;
  color:var(--navy-ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--blue-action);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--blue-deep);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;border-radius:2px;
}

/* Archivo is already tight at 800, so it needs less negative tracking than
   Libre Franklin did, and text-wrap:balance keeps short headings off a widow. */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.018em;line-height:1.08;margin:0 0 .5em;color:var(--navy-ink);text-wrap:balance;}
h1{font-size:var(--fs-900);}
h2{font-size:var(--fs-800);}
h3{font-size:var(--fs-400);font-weight:700;letter-spacing:-.012em;}
p{margin:0 0 1rem;max-width:68ch;text-wrap:pretty;}

.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto;}
.section{padding:clamp(3.25rem,6.5vw,5.25rem) 0;}
.section--tint{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.lede{font-size:var(--fs-400);line-height:1.6;color:var(--slate);max-width:62ch;}

/* ---------- eyebrow ----------------------------------------------------- */
.routeline{
  display:block;margin:0 0 .75rem;
  font-family:var(--display);font-weight:700;font-size:var(--fs-25);
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-action);
}
.routeline::after{content:none;}
.routeline .dot{display:none;}
.on-dark .routeline{color:#7FC3EF;}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:var(--fs-200);
  padding:.9rem 1.6rem;border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn--primary{background:var(--blue-action);color:var(--white);}
.btn--primary:hover{background:var(--blue-deep);color:var(--white);}
.btn--ghost{background:var(--white);color:var(--navy);border-color:var(--line-input);}
.btn--ghost:hover{border-color:var(--navy);color:var(--navy);}
.on-dark .btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.42);}
.on-dark .btn--ghost:hover{border-color:var(--white);color:var(--white);}
.btn--wide{width:100%;padding-block:1rem;font-size:var(--fs-300);}
.btn--sm{font-size:var(--fs-100);padding:.7rem 1.1rem;}

/* ---------- utility bar ------------------------------------------------- */
.topbar{background:var(--navy-deep);color:#B9C7D6;font-size:var(--fs-50);}
.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.55rem 0;}
.topbar__right{display:flex;gap:1.4rem;align-items:center;}
.topbar a{color:var(--white);text-decoration:none;font-weight:600;}
.topbar a:hover{text-decoration:underline;color:var(--white);}
@media (max-width:880px){
  .topbar__row{justify-content:center;}
  /* Keep the opening hours and drop the rest. The licence line and the email
     both repeat in the footer, but the hours are what decides whether someone
     calls now, and the header's own hours are hidden below 560px. */
  .topbar__left{display:none;}
  .topbar__right a{display:none;}
}

/* ---------- header ------------------------------------------------------ */
.masthead{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);}
.masthead__row{display:flex;align-items:center;gap:2.25rem;padding:.85rem 0;}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:none;}
.brand svg{width:32px;height:34px;}
.brand__name{font-family:var(--display);font-weight:800;font-size:var(--fs-500);letter-spacing:.01em;color:var(--navy);line-height:1;}
.brand__sub{display:block;font-weight:600;font-size:.625rem;letter-spacing:.18em;color:var(--slate);margin-top:4px;}
.nav{display:flex;align-items:center;gap:1.75rem;margin-left:auto;}
.nav a{font-family:var(--display);font-weight:600;font-size:var(--fs-100);color:var(--navy);text-decoration:none;}
.nav a:hover{color:var(--blue-action);}
.nav a[data-cta]{display:none;}
.masthead__call{display:flex;align-items:center;gap:1rem;flex:none;}
.tel{font-family:var(--display);font-weight:800;font-size:var(--fs-400);color:var(--navy);text-decoration:none;white-space:nowrap;line-height:1.2;text-align:right;}
.tel span{display:block;font-weight:500;font-size:var(--fs-25);color:var(--slate);letter-spacing:0;}
.navtoggle{display:none;background:var(--white);border:1px solid var(--line-input);border-radius:var(--radius);padding:.55rem .8rem;font-family:var(--display);font-weight:700;font-size:var(--fs-100);color:var(--navy);cursor:pointer;}

@media (max-width:1060px){
  .masthead__row{gap:1.25rem;}
  .nav{gap:1.2rem;}
  .masthead__cta{display:none;}
}
@media (max-width:1060px){
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);
       flex-direction:column;align-items:stretch;gap:0;padding:.25rem 1.25rem 1rem;display:none;
       box-shadow:0 14px 28px rgba(10,27,46,.1);}
  .nav[data-open="true"]{display:flex;}
  .nav a{padding:.85rem 0;width:100%;border-bottom:1px solid var(--line);}
  .nav a[data-cta]{display:block;border-bottom:0;margin-top:.6rem;background:var(--blue-action);color:var(--white);
       text-align:center;border-radius:var(--radius);padding:.85rem 1rem;}
  .navtoggle{display:block;margin-left:auto;order:3;}
  .masthead__call{order:2;}
}
@media (max-width:560px){
  /* Brand + number + Menu cannot share this width: the flex row overflowed the
     shell and pushed Menu flush to the screen edge. The sticky call bar carries
     the number on every screen this size, so the header copy is redundant. */
  .masthead__call{display:none;}
  .tel{font-size:var(--fs-200);}
  .tel span{display:none;}
}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;background:var(--navy-deep);overflow:hidden;isolation:isolate;}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;z-index:-2;}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--navy-deep) 0%,rgba(12,35,64,.93) 44%,rgba(12,35,64,.6) 100%);}
.hero__grid{display:grid;grid-template-columns:1fr 26.5rem;gap:clamp(2rem,4vw,3.75rem);align-items:start;
  padding:clamp(2.75rem,5vw,4.75rem) 0 clamp(3rem,5vw,5.25rem);}
.hero h1{color:var(--white);margin-bottom:1.1rem;max-width:19ch;}
.hero .lede{color:#C6D6E4;max-width:48ch;}
.hero__tag{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.5rem;
  background:rgba(30,150,224,.16);border:1px solid rgba(30,150,224,.45);border-radius:var(--radius);
  padding:.45rem .8rem;font-family:var(--display);font-weight:700;font-size:var(--fs-25);
  letter-spacing:.1em;text-transform:uppercase;color:#9FD3F5;
}
.hero__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;}
.hero__facts{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;max-width:36rem;}
.hero__facts li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-200);line-height:1.45;font-weight:500;color:#E3ECF4;}
.hero__facts li::before{content:"";width:18px;height:18px;margin-top:1px;flex:none;border-radius:3px;
  background:rgba(30,150,224,.22);border:1px solid rgba(30,150,224,.5);}
@media (max-width:1060px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__facts{max-width:none;}
}
@media (max-width:560px){
  .hero__facts{grid-template-columns:1fr;gap:.7rem;}
}

/* ---------- quote form -------------------------------------------------- */
/* The card is a 26.5rem rail on desktop and full width on a phone, so what
   matters for the field grid is the card's own width, not the viewport's.
   A container query asks the right question; the @supports block below keeps
   older browsers sane by falling back to a viewport breakpoint. */
.quote{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:var(--radius-lg);
  container-type:inline-size;container-name:quote;}
.quote > *{padding-inline:1.5rem;}
.quote h2{font-size:var(--fs-600);letter-spacing:-.02em;margin:1.5rem 0 .3rem;}
.quote__note{font-size:var(--fs-100);color:var(--slate);margin-bottom:1.25rem;}
.quote form{padding-bottom:1.6rem;}
.quote--float{box-shadow:0 22px 50px rgba(4,16,30,.36);}
.field{display:block;margin-bottom:.8rem;}
.field > span{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-25);letter-spacing:.05em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.35rem;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:var(--fs-200);color:var(--navy-ink);
  padding:.72rem .8rem;border:1px solid var(--line-input);border-radius:var(--radius);background:var(--white);
}
.field input::placeholder{color:#93A1B0;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
/* Below ~23rem of card a paired text field drops under 150px and its label
   wraps onto two lines, so stack every row at that point. */
@container quote (max-width:23rem){
  .field-row{grid-template-columns:1fr;}
}
/* A row holding a select needs more room: "Enclosed carrier" is 121px of text
   and the control spends ~50px on padding, border and the arrow, so the pair
   needs about 25.5rem of card before it stops clipping. Charging that only to
   select rows leaves the select-free aside form two-up at its 25rem width. */
@container quote (max-width:25.5rem){
  .field-row:has(select){grid-template-columns:1fr;}
}
@supports not (container-type:inline-size){
  @media (max-width:560px){.field-row{grid-template-columns:1fr;}}
}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0 1rem;}
.consent input{margin-top:.25rem;flex:none;width:17px;height:17px;}
.consent small{font-size:var(--fs-25);line-height:1.55;color:var(--slate);}
.formnote{font-size:var(--fs-50);color:var(--slate);margin:.8rem 0 0;text-align:center;}
.formstatus{margin-top:.8rem;padding:.7rem .85rem;font-size:var(--fs-100);border-left:3px solid var(--blue);background:var(--band);display:none;}
.formstatus[data-state="ok"]{display:block;border-color:#1E8A4C;}
.formstatus[data-state="err"]{display:block;border-color:#C0392B;}
.formstatus[data-state="busy"]{display:block;}
/* The field quote.js flagged. Same red as the error message it pairs with. */
.field [aria-invalid="true"]{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14);}
/* Netlify honeypot: off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}

/* ---------- trust strip ------------------------------------------------- */
.strip{background:var(--white);border-bottom:1px solid var(--line);}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.strip__cell{padding:1.75rem 1.75rem 1.75rem 0;}
.strip__cell + .strip__cell{border-left:1px solid var(--line);padding-left:1.75rem;}
.strip__cell:last-child{padding-right:0;}
.strip__cell b{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-200);color:var(--navy);margin-bottom:.3rem;}
.strip__cell span{font-size:var(--fs-100);line-height:1.55;color:var(--slate);}
@media (max-width:1060px){
  .strip__grid{grid-template-columns:1fr 1fr;}
  .strip__cell{padding:1.4rem 1.4rem 1.4rem 0;}
  .strip__cell:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line);}
  .strip__cell:nth-child(4){border-top:1px solid var(--line);}
}
@media (max-width:560px){
  .strip__grid{grid-template-columns:1fr;}
  .strip__cell + .strip__cell{border-left:0;padding-left:0;border-top:1px solid var(--line);}
}

/* ---------- how it works ------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.5rem;border-top:2px solid var(--navy);}
.step{padding:1.5rem 1.75rem 0 0;}
.step + .step{border-left:1px solid var(--line);padding-left:1.75rem;}
.step:last-child{padding-right:0;}
.step__no{display:grid;place-items:center;width:26px;height:26px;background:var(--navy);color:var(--white);
  font-family:var(--display);font-weight:800;font-size:var(--fs-50);border-radius:3px;margin-bottom:.9rem;}
.step:first-child .step__no{background:var(--blue-action);}
.step h3{font-size:var(--fs-400);color:var(--navy);margin-bottom:.4rem;}
.step p{font-size:var(--fs-100);line-height:1.6;color:var(--slate);margin:0;}
@media (max-width:1060px){
  .steps{grid-template-columns:1fr 1fr;}
  .step{padding:1.4rem 1.4rem 1.4rem 0;}
  .step:nth-child(3),.step:nth-child(4){border-top:1px solid var(--line);}
  .step:nth-child(3){border-left:0;padding-left:0;}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;}
  .step + .step{border-left:0;padding-left:0;border-top:1px solid var(--line);}
}

/* ---------- services ---------------------------------------------------- */
.svc-group{margin-top:2.5rem;}
.svc-group > h3{font-size:var(--fs-50);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);
  padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem;}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem;}
.svc{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:1.3rem 1.25rem;
  text-decoration:none;color:inherit;display:block;position:relative;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.svc:hover{border-color:#BFD3E4;box-shadow:0 10px 24px rgba(10,27,46,.08);transform:translateY(-1px);}
.svc h3{font-size:var(--fs-300);margin-bottom:.35rem;color:var(--navy);}
.svc p{font-size:var(--fs-100);line-height:1.55;color:var(--slate);margin:0;}
.svc__flag{position:absolute;top:1.35rem;right:1.25rem;width:8px;height:8px;border-radius:50%;background:var(--blue);}
.section--tint .svc{border-color:#DCE3EA;}

/* ---------- split feature ---------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;}
.split--flip .split__media{order:2;}
.split__media img{width:100%;height:clamp(260px,32vw,400px);object-fit:cover;border-radius:5px;}
.split ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;}
.split ul li{background:var(--white);padding:1.05rem 1.15rem;font-size:var(--fs-200);line-height:1.6;color:#3A4654;}
.split ul b{font-weight:700;color:var(--navy);}
.section--tint .split ul li{background:var(--white);}
@media (max-width:880px){
  .split{grid-template-columns:1fr;}
  .split--flip .split__media{order:0;}
}

/* ---------- comparison table ------------------------------------------- */
.compare{width:100%;border-collapse:collapse;margin-top:1.75rem;font-size:var(--fs-200);}
.compare caption{text-align:left;color:var(--slate);font-size:var(--fs-100);padding-bottom:.8rem;}
.compare th,.compare td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;}
.compare thead th{font-family:var(--display);font-weight:700;font-size:var(--fs-200);color:var(--navy);border-bottom:2px solid var(--navy);}
.compare tbody th{font-weight:500;color:var(--slate);width:30%;}
.compare td{color:var(--navy-ink);}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0;}
@media (max-width:680px){
  .compare thead th:nth-child(1){width:24%;}
  .compare th,.compare td{padding:.7rem .55rem;font-size:var(--fs-100);}
}

/* ---------- FAQ --------------------------------------------------------- */
.faq{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start;}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:1.05rem 1.2rem;}
.faq summary{cursor:pointer;list-style:none;position:relative;padding-right:1.8rem;
  font-family:var(--display);font-weight:700;font-size:var(--fs-200);color:var(--navy);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:.2rem;top:.4rem;width:8px;height:8px;
  border-right:2px solid var(--blue-action);border-bottom:2px solid var(--blue-action);
  transform:rotate(45deg);transition:transform .18s ease;}
.faq details[open] summary::after{transform:rotate(225deg);top:.55rem;}
.faq details p{margin:.7rem 0 0;color:var(--slate);font-size:var(--fs-100);line-height:1.65;}
@media (max-width:880px){.faq{grid-template-columns:1fr;}}

/* ---------- dark CTA ---------------------------------------------------- */
.endcta{background:var(--navy-deep);color:var(--white);}
.endcta .shell{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
.endcta .routeline,.endcta h2,.endcta .lede{grid-column:1;}
.endcta h2{color:var(--white);margin-bottom:.6rem;}
.endcta .lede{color:#B9C7D6;margin:0;}
.endcta__row{grid-column:2;grid-row:1 / span 3;align-self:center;display:flex;gap:.8rem;flex-wrap:wrap;}
@media (max-width:880px){
  .endcta .shell{grid-template-columns:1fr;}
  .endcta .routeline,.endcta h2,.endcta .lede,.endcta__row{grid-column:1;}
  .endcta__row{grid-row:auto;margin-top:1.6rem;}
}

/* ---------- footer ------------------------------------------------------ */
.foot{background:var(--navy-ink);color:#A9B8C8;font-size:var(--fs-100);padding:3.25rem 0 1.85rem;}
.foot a{color:#D6E2EE;text-decoration:none;}
.foot a:hover{text-decoration:underline;color:var(--white);}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:2rem;}
.foot h4{color:var(--white);font-size:var(--fs-50);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.foot__brand svg{width:34px;height:36px;margin-bottom:.9rem;}
.foot__brand p{font-size:var(--fs-100);line-height:1.65;max-width:34ch;}
.foot__legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.4rem;font-size:var(--fs-50);line-height:1.7;color:#93A3B4;}
.foot__legal p{max-width:none;}
.disclosure{border-left:2px solid var(--blue);padding-left:1rem;margin-bottom:1.1rem;color:#C3D2E0;}
@media (max-width:1060px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr;}}
@media (max-width:880px){.foot__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr;}}

/* ---------- inner page hero -------------------------------------------- */
.pagehead{background:var(--navy-deep);color:var(--white);}
.pagehead__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.75rem,4vw,3.25rem);align-items:center;
  padding:clamp(2.25rem,4.5vw,3.5rem) 0 clamp(2.5rem,4.5vw,3.75rem);}
.pagehead h1{color:var(--white);margin-bottom:.9rem;max-width:22ch;}
.pagehead p{color:#C6D6E4;}
.pagehead .lede{color:#C6D6E4;}
.pagehead__media img{width:100%;height:clamp(200px,25vw,290px);object-fit:cover;border-radius:5px;}
.crumbs{font-size:var(--fs-50);color:#93AABF;padding:1rem 0 0;margin:0;}
.crumbs a{color:#C6D6E4;text-decoration:none;}
.crumbs a:hover{text-decoration:underline;color:var(--white);}
@media (max-width:880px){
  .pagehead__grid{grid-template-columns:1fr;}
  .pagehead__media img{height:clamp(180px,38vw,240px);}
}

/* ---------- service page body ------------------------------------------ */
.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 25rem;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.page-aside{position:sticky;top:6.5rem;}
@media (max-width:1060px){
  .page-layout{grid-template-columns:1fr;}
  .page-aside{position:static;max-width:32rem;}
}
.prose > h2{margin-top:2.75rem;font-size:var(--fs-700);}
.prose > h2:first-child{margin-top:0;}
.prose p{font-size:var(--fs-200);line-height:1.7;}
.prose ul{padding-left:0;list-style:none;display:grid;gap:.7rem;margin:1.1rem 0 1.75rem;}
.prose ul li{padding-left:1.5rem;position:relative;font-size:var(--fs-200);line-height:1.65;color:#3A4654;}
.prose ul li::before{content:"";position:absolute;left:0;top:.62rem;width:7px;height:7px;border-radius:2px;
  background:var(--blue-action);}
.prose ul b{font-weight:700;color:var(--navy);}
.prose .faq{margin-top:1.5rem;}
.prose .svc-grid{margin-top:1.5rem;}
/* A long list of short items — the 48 states — read as one tall column and
   pushed the rest of the page down. Same auto-fill idea as .svc-grid, at the
   width a state name actually needs, so it reflows instead of needing its own
   breakpoint. */
.prose ul.col-list{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.55rem 1.25rem;}
.callout{background:var(--band);border:1px solid var(--line);border-left:3px solid var(--blue-action);
  border-radius:var(--radius);padding:1.15rem 1.35rem;margin:1.75rem 0;}
.callout p{margin:0;font-size:var(--fs-200);line-height:1.65;color:#2E3A48;}
.prose .callout ul{margin:.7rem 0 0;}

/* ---------- guides ---------------------------------------------------- */
.byline{margin-top:1rem;font-size:var(--fs-100);color:#B9CCDE;}
/* A comparison table in the reading column can be wider than a phone. */
.table-scroll{overflow-x:auto;margin:1.25rem 0 1.75rem;}
.table-scroll .compare{margin-top:0;}
.faq__more{margin-top:1.5rem;font-size:var(--fs-200);}

/* ---------- free photo library (photos.html) ---------------------------- */
.pagehead__grid--solo{grid-template-columns:1fr;}
.pagehead__grid--solo .lede{max-width:68ch;}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1.25rem;margin-top:2.25rem;}
.photo-card{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;}
.photo-card__frame{aspect-ratio:4/3;background:var(--band);border-bottom:1px solid var(--line);}
/* contain, not cover: someone choosing a photo to reuse needs to see all of it */
.photo-card__frame img{width:100%;height:100%;object-fit:contain;}
.photo-card__body{padding:1rem 1.1rem 1.15rem;display:grid;gap:.6rem;align-content:start;}
.photo-card h3{font-size:var(--fs-200);color:var(--navy);margin:0;}
.photo-card__meta{font-size:var(--fs-50);color:var(--slate);margin:0;}
.photo-card__code{width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:var(--fs-50);line-height:1.5;color:var(--navy-ink);background:var(--band);
  border:1px solid var(--line-input);border-radius:var(--radius);padding:.55rem .65rem;resize:vertical;}
.photo-card__actions{display:flex;flex-wrap:wrap;gap:.5rem;}

/* ---------- sticky mobile call bar -------------------------------------- */
/* A quarter to a third of enquiries in this trade arrive by phone, and on a
   phone the header scrolls away. This keeps both actions permanently in reach
   below 680px and stays out of the way on larger screens. */
.callbar{display:none;}
@media (max-width:680px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--white);border-top:1px solid var(--line);
    padding:.55rem .9rem;
    padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 20px rgba(10,27,46,.12);
  }
  .callbar a{
    display:flex;align-items:center;justify-content:center;
    min-height:44px;padding:.6rem;border-radius:var(--radius);
    font-family:var(--display);font-weight:700;font-size:var(--fs-100);
    text-decoration:none;white-space:nowrap;
  }
  .callbar__call{background:var(--navy);color:var(--white);}
  .callbar__quote{background:var(--blue-action);color:var(--white);}
  /* keep the footer clear of the fixed bar */
  body{padding-bottom:4.9rem;}
}

/* ---------- misc -------------------------------------------------------- */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:.6rem;z-index:99;background:var(--white);padding:.6rem 1rem;border:2px solid var(--navy);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}