/* ==========================================================
   ACCESS247 AUTO LOCKSMITH
   Built by Abbey Marketing.
   Same design system as York Vineyard and D.M Handyman:
   square corners, Archivo display, eyebrow rules, paper/ink.
   Toned down for this build: light hero, warm neutrals, and
   the red used as a detail, not a floodlight.
   Everything visual is controlled from the tokens below.
   ========================================================== */

/* 0. FONTS. Self-hosted: faster, and no visitor data sent to Google */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/archivo-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/archivo-latin-800-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-latin-600-normal.woff2) format('woff2');}

/* 1. TOKENS ------------------------------------------------ */
:root{
  /* Colour */
  --ink:          #16181B;   /* soft charcoal, not pure black */
  --ink-soft:     #202328;   /* footer panel */
  --text:         #3B3F45;   /* body copy on paper */
  --muted:        #5C6169;   /* captions, meta. Darkened to clear 4.5:1 on the tints */
  --paper:        #FFFFFF;
  --paper-warm:   #F6F4F0;   /* section breaks */
  --paper-cool:   #EEF0F2;   /* placeholders, subtle panels */
  --wash-red:     #FAF1F1;   /* section tint, a breath of the accent */
  --wash-grey:    #F0F1F3;   /* section tint, cool counterpart */
  --line-red:     #EDDCDC;   /* hairlines inside a red wash */
  --line:         #E4E1DB;   /* hairline rules */
  --accent:       #B23A3F;   /* muted brick red. White text 5.6:1 */
  --accent-deep:  #922F34;   /* hover */
  --accent-tint:  #F7ECEC;   /* badges, soft highlights */
  --accent-ink:   #FFFFFF;
  --star:         #D9A21B;
  --wa:           #1FA855;   /* WhatsApp, icon only */
  --sermi:        #2B58B0;   /* accreditation blue, taken from the logo shield */
  --sermi-deep:   #1F4491;

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero:  clamp(2.2rem, 5.2vw, 4.25rem);
  --t-xl:    clamp(1.85rem, 4vw, 3.1rem);
  --t-lg:    clamp(1.2rem, 2vw, 1.5rem);
  --t-md:    1.0625rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.75rem;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --stack:   clamp(3.5rem, 8vw, 6.5rem);
  --max:     1280px;
  --header-h: 88px;
}

/* 2. RESET + BASE ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--body);font-size:var(--t-md);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto;}
a{color:inherit;}
h1,h2,h3{
  font-family:var(--display);font-weight:800;color:var(--ink);
  text-transform:uppercase;letter-spacing:-0.015em;line-height:0.98;margin:0;
}
h1 em{font-style:normal;color:var(--accent);}
h2 em{font-style:normal;color:#7D828A;}  /* two-tone headings, grey not red. 3.4:1 on the tints */
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
}
.skip{position:absolute;left:-9999px;background:var(--paper);color:var(--ink);padding:.75rem 1.25rem;z-index:200;font-weight:600;}
.skip:focus{left:0;top:0;}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--stack);}
.section--warm{background:var(--wash-red);}
.section--grey{background:var(--wash-grey);}
/* Hairlines and panels need to sit on the tint rather than on
   white, so they shift with the section they are inside. */
.section--warm .svc,.section--warm .problem,.section--warm .aside-card,.section--warm .form,.section--warm .review,.section--warm .vs,.section--warm .shot{border-color:var(--line-red);}
.section--warm .area-list,.section--warm .area-list a,.section--warm .checks li,.section--warm .faq,.section--warm .faq details,.section--warm .times li,.section--warm .channels li{border-color:var(--line-red);}
.section--grey .svc,.section--grey .problem,.section--grey .aside-card,.section--grey .form,.section--grey .review,.section--grey .vs,.section--grey .shot{border-color:#E0E2E6;}
.section--grey .area-list,.section--grey .area-list a,.section--grey .checks li,.section--grey .faq,.section--grey .faq details,.section--grey .times li,.section--grey .channels li{border-color:#E0E2E6;}
.lead{font-size:var(--t-lg);line-height:1.5;color:var(--text);max-width:52ch;}

.eyebrow{
  font-family:var(--display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.75rem;margin:0 0 1.25rem;
}
.eyebrow::before{content:"";width:1.75rem;height:2px;background:var(--accent);flex:none;}

.head{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(2rem,4vw,3rem);}
.head h2{font-size:var(--t-xl);max-width:18ch;}
.head p{max-width:44ch;margin:0;}

/* 3. BUTTONS ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);font-size:.9rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  padding:1rem 1.6rem;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);border-radius:0;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none;}
.btn:hover{background:transparent;color:var(--ink);}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn--accent:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--accent-ink);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--ink);}
.site-header .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35);}
.site-header .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
.site-header .btn--ghost .wa{fill:#4CD27F;}
.site-header .btn--ghost:hover .wa{fill:var(--wa);}
.btn--ghost .wa{fill:var(--wa);}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn--light:hover{background:transparent;color:var(--paper);}
.btn--sm{padding:.7rem 1.1rem;font-size:.8rem;}
.btn--block{display:flex;width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;}
.link{font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px;}
.link:hover{color:var(--accent);}

/* 4. TOP STRIP --------------------------------------------- */
.strip{background:#0E1013;color:#D6D8DB;font-size:var(--t-xs);letter-spacing:.04em;}
.strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;}
.strip a{color:#fff;text-decoration:none;font-weight:600;}
.strip a:hover{text-decoration:underline;}
.live{display:inline-flex;align-items:center;gap:.55rem;}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#4CC37A;box-shadow:0 0 0 0 rgba(76,195,122,.6);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(76,195,122,.55);}70%{box-shadow:0 0 0 8px rgba(76,195,122,0);}100%{box-shadow:0 0 0 0 rgba(76,195,122,0);}}
@media (max-width:640px){.strip .hide-sm{display:none;}.strip .wrap{justify-content:center;}}

/* 5. HEADER ------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;border-bottom:1px solid rgba(255,255,255,.1);transition:box-shadow .25s ease;}
.site-header.is-stuck{box-shadow:0 8px 28px rgba(0,0,0,.28);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h);}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;flex:none;}
.logo-mark-img{height:48px;width:auto;flex:none;}
.logo-mark{width:38px;height:44px;flex:none;}
.logo-word{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.01em;line-height:1;text-transform:uppercase;}
.logo-word b{color:#E4676D;font-weight:800;}
.logo-word small{display:block;font-size:.58rem;letter-spacing:.24em;color:#9BA1A9;font-weight:700;margin-top:.3rem;}
.nav-list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0;}
.nav-item > a{display:block;font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#fff;padding:.8rem .95rem;position:relative;}
.nav-item > a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.5rem;height:2px;background:#E27A7E;transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
.nav-item:hover > a::after,.nav-item.is-current > a::after{transform:scaleX(1);}
.header-actions{display:flex;align-items:center;gap:.5rem;}
.nav > .btn{display:none;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:#fff;padding:.5rem;}
.nav-toggle svg{width:26px;height:26px;}
@media (max-width:1020px){
  .nav-toggle{display:block;}
  .header-actions .btn--ghost{display:none;}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--ink);border-top:1px solid rgba(255,255,255,.12);padding:.5rem var(--gutter) 2rem;transform:translateY(-130%);transition:transform .3s ease;max-height:calc(100vh - var(--header-h));overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.4);}
  .nav.is-open{transform:translateY(0);}
  .nav-list{flex-direction:column;align-items:stretch;}
  .nav-item > a{padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.95rem;}
  .nav-item > a::after{display:none;}
  .nav > .btn{display:flex;margin-top:1.25rem;}
}
@media (max-width:480px){.header-actions .btn--accent{display:none;}}

/* 6. HERO -------------------------------------------------- */
.hero{background:var(--wash-red);border-bottom:1px solid var(--line-red);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(3rem,7vw,5.5rem);}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:var(--t-hero);max-width:13ch;margin:0 0 1.5rem;}
.hero .lead{margin-bottom:2rem;}
.rating{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--t-sm);color:var(--text);margin:0 0 1.5rem;background:var(--paper);border:1px solid var(--line);padding:.45rem .85rem;}
.rating b{color:var(--star);letter-spacing:.12em;font-size:.95rem;}
.rating strong{color:var(--ink);}
.hero-points{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:var(--t-sm);}
.hero-points li{display:flex;align-items:center;gap:.5rem;}
.hero-points li::before{content:"";width:16px;height:16px;flex:none;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%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='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;}
.hero-media{position:relative;}
.hero-media .ph{aspect-ratio:4/5;}
@media (max-width:900px){.hero-media .ph{aspect-ratio:4/3;}}
.hero-card{position:absolute;left:-1.5rem;bottom:2rem;background:var(--paper);padding:1.1rem 1.35rem;border:1px solid var(--line);box-shadow:0 18px 40px rgba(22,24,27,.08);display:flex;gap:.9rem;align-items:center;}
.hero-card b{font-family:var(--display);font-weight:800;font-size:2rem;color:var(--ink);line-height:1;}
.hero-card span{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.4;}
@media (max-width:900px){.hero-card{left:1rem;bottom:1rem;}}

/* Placeholder until real photos arrive */
.ph{position:relative;background:linear-gradient(135deg,#E9EBEE,#DADDE2);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 14px);}
.ph span{position:relative;font-family:var(--display);font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8A9099;text-align:center;padding:1rem;}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.reveal{opacity:0;transform:translateY(1rem);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards;}
.reveal--2{animation-delay:.1s;}.reveal--3{animation-delay:.2s;}
@keyframes rise{to{opacity:1;transform:none;}}

/* 7. CREDENTIALS ------------------------------------------- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);}
.creds div{padding:1.6rem 1.25rem;border-right:1px solid var(--line);}
.creds div:first-child{padding-left:0;}
.creds div:last-child{border-right:0;}
.creds b{display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em;}
.creds span{font-size:var(--t-sm);color:var(--muted);}
@media (max-width:820px){
  .creds{grid-template-columns:1fr 1fr;}
  .creds div{padding-left:0;}
  .creds div:nth-child(2n){border-right:0;padding-left:1.25rem;}
  .creds div:nth-child(-n+2){border-bottom:1px solid var(--line);}
}

/* 8. PROBLEM PICKER ---------------------------------------- */
.problems{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:1000px){.problems{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.problems{grid-template-columns:1fr;}}
.problem{background:var(--paper);padding:1.6rem 1.4rem 1.4rem;text-decoration:none;display:flex;flex-direction:column;gap:.6rem;min-height:190px;transition:background .2s ease;}
.problem h3{font-size:1.1rem;}
.problem p{font-size:var(--t-sm);color:var(--muted);margin:0;}
.problem .arrow{margin-top:auto;font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.problem:hover{background:var(--accent-tint);}
@media (max-width:640px){.problem{min-height:0;}}

/* 9. STEPS ------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.5rem);counter-reset:step;list-style:none;margin:0;padding:0;}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}
.steps li{counter-increment:step;border-top:1px solid var(--ink);padding-top:1.25rem;}
.steps li::before{content:"0" counter(step);display:block;font-family:var(--display);font-weight:800;font-size:.85rem;letter-spacing:.14em;color:var(--accent);margin-bottom:.9rem;}
.steps h3{font-size:1.25rem;margin-bottom:.6rem;}
.steps p{font-size:var(--t-sm);margin:0;}

/* 10. SERVICES --------------------------------------------- */
.svc-group{margin-bottom:2.5rem;}
.svc-group:last-child{margin-bottom:0;}
.svc-group > h3{font-size:var(--t-xs);letter-spacing:.18em;color:var(--muted);font-weight:700;margin-bottom:1rem;}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:1100px){.services-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:800px){.services-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr;}}
.svc{background:var(--paper);padding:clamp(1.4rem,2.5vw,2rem);text-decoration:none;display:flex;flex-direction:column;transition:background .2s ease;}

.svc .tag{font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem;}
.svc h3{font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--ink);font-size:1.1rem;margin:0 0 .6rem;line-height:1.1;}
.svc p{font-size:var(--t-sm);color:var(--muted);margin:0 0 1rem;}
.svc .arrow{margin-top:auto;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.svc:hover .arrow{color:var(--accent);}

/* 11. COMPARE ---------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}
.split h2{font-size:var(--t-xl);margin-bottom:1.25rem;}
.compare{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);font-size:var(--t-sm);}
.compare th,.compare td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.compare thead th{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.compare thead th:last-child{color:var(--accent);}
.compare tbody th{font-weight:600;color:var(--ink);width:30%;}
.compare td:last-child{color:var(--ink);font-weight:600;background:var(--accent-tint);}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0;}

/* 12. SERMI / ABOUT ---------------------------------------- */
.checks{list-style:none;margin:1.5rem 0 2rem;padding:0;}
.checks li{padding:.8rem 0 .8rem 1.9rem;border-top:1px solid var(--line);font-size:var(--t-sm);position:relative;color:var(--ink);}
.checks li:last-child{border-bottom:1px solid var(--line);}
.checks li::before{content:"";position:absolute;left:0;top:1.15rem;width:14px;height:14px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%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='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;}
.media-stack{position:relative;}
.media-stack .ph{aspect-ratio:5/4;}
.badge{position:absolute;right:-1rem;top:-1rem;background:var(--paper);border:1px solid var(--line);padding:1rem 1.2rem;text-align:center;box-shadow:0 14px 30px rgba(22,24,27,.07);}
.badge b{display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);letter-spacing:.04em;}
.badge span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
@media (max-width:900px){.badge{right:1rem;top:1rem;}}

/* 13. REVIEWS ---------------------------------------------- */
.reviews-top{display:grid;grid-template-columns:auto 1fr;gap:1rem 2.5rem;align-items:end;margin-bottom:2.5rem;}
@media (max-width:700px){.reviews-top{grid-template-columns:1fr;}}
.score{font-family:var(--display);font-weight:800;font-size:clamp(3.5rem,8vw,5.5rem);line-height:.85;color:var(--ink);letter-spacing:-.03em;}
.score-meta b{display:block;color:var(--star);letter-spacing:.18em;font-size:1.1rem;}
.score-meta span{font-size:var(--t-sm);color:var(--muted);}
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.5vw,1.25rem);}
@media (max-width:1000px){.reviews{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.reviews{grid-template-columns:1fr;}}
.review{background:var(--paper);border:1px solid var(--line);padding:1.5rem;display:flex;flex-direction:column;margin:0;}
.review .stars{color:var(--star);letter-spacing:.14em;font-size:.9rem;margin-bottom:.9rem;}
.review blockquote{margin:0 0 1.5rem;font-size:var(--t-sm);color:var(--ink);line-height:1.6;}
.review figcaption{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--muted);letter-spacing:.04em;}
.review figcaption strong{display:block;color:var(--ink);font-family:var(--display);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;}

/* 14. MAKES + AREAS ---------------------------------------- */
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.tags li{border:1px solid var(--line);background:var(--paper);padding:.5rem .85rem;font-size:var(--t-sm);color:var(--ink);}
.area-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);}
@media (max-width:900px){.area-list{grid-template-columns:repeat(2,1fr);}}
.area-list a{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:500;font-size:var(--t-sm);transition:color .15s ease,padding .2s ease;}
.area-list a span{color:var(--muted);font-size:var(--t-xs);letter-spacing:.08em;}
.area-list a:hover{color:var(--accent);padding-left:.4rem;}

/* 15. FAQ -------------------------------------------------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem 2.5rem 1.25rem 0;position:relative;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:.25rem;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat;transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding:0 2.5rem 1.4rem 0;margin:0;max-width:70ch;}

/* 16. CONTACT + FORM --------------------------------------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-grid h2{font-size:var(--t-xl);margin-bottom:1.25rem;}
.channels{margin:2rem 0 0;padding:0;list-style:none;}
.channels li{border-top:1px solid var(--line);padding:1.1rem 0;}
.channels li:last-child{border-bottom:1px solid var(--line);}
.channels small{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem;}
.channels a,.channels address{font-family:var(--display);font-weight:800;font-size:1.4rem;text-transform:uppercase;text-decoration:none;color:var(--ink);font-style:normal;line-height:1.2;}
.channels address{font-size:1rem;font-weight:700;}
.channels a:hover{color:var(--accent);}
.contact-card{background:var(--paper);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.5rem);}
.contact-card h3{font-size:1.35rem;margin-bottom:.5rem;}
.contact-card > p{font-size:var(--t-sm);color:var(--text);margin-bottom:1.5rem;}
.contact-actions{display:grid;gap:.75rem;margin-bottom:2rem;}
.btn--wa{background:var(--wa);border-color:var(--wa);color:#fff;}
.btn--wa:hover{background:#188C46;border-color:#188C46;color:#fff;}
.contact-card h4{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.95rem;line-height:1.3;color:var(--ink);margin:0 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.ready-list{margin:0;padding:0;list-style:none;display:grid;gap:.6rem;}
.ready-list li{position:relative;padding-left:1.6rem;font-size:var(--t-sm);color:var(--text);line-height:1.55;}
.ready-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--accent);}
.contact-foot{margin:1.6rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--muted);line-height:1.6;}

/* 17. CTA BAND --------------------------------------------- */
.cta-band{background:var(--ink);color:#C9CCD1;}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between;padding-block:clamp(2.5rem,5vw,3.75rem);}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.4rem);max-width:20ch;}
.cta-band p{margin:.6rem 0 0;}
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28);}
.cta-band .btn--ghost:hover{border-color:#fff;}

/* 18. INNER PAGES ------------------------------------------ */
.page-hero{background:var(--wash-red);border-bottom:1px solid var(--line-red);}
.page-hero .wrap{padding-block:clamp(2.5rem,6vw,4.5rem);}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.9rem);max-width:18ch;margin-bottom:1.25rem;}
.crumbs{list-style:none;margin:0 0 1.75rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;font-size:var(--t-xs);color:var(--muted);letter-spacing:.04em;}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.6;}
.crumbs a{text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
@media (max-width:980px){.content-grid{grid-template-columns:1fr;}}
.prose{max-width:70ch;}
.prose h2{font-size:clamp(1.45rem,2.6vw,2rem);margin:3rem 0 1rem;line-height:1.05;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.1rem;margin:2rem 0 .6rem;}
.prose ul{padding-left:1.1rem;margin:0 0 1.25em;}
.prose li{margin-bottom:.45rem;}
.prose .compare{margin:1.5rem 0 2rem;}
.callout{background:var(--accent-tint);border-left:3px solid var(--accent);padding:1.25rem 1.4rem;margin:2rem 0;color:var(--ink);}
.aside{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:1rem;}
.aside-card{border:1px solid var(--line);background:var(--paper);padding:1.5rem;}
.aside-card h3{font-size:1.1rem;margin-bottom:.5rem;}
.aside-card p{font-size:var(--t-sm);color:var(--muted);}
.aside-card .btn{margin-top:.6rem;}
.aside-card ul{list-style:none;margin:0;padding:0;}
.aside-card li a{display:block;padding:.6rem 0;border-top:1px solid var(--line);text-decoration:none;font-size:var(--t-sm);color:var(--ink);}
.aside-card li a:hover{color:var(--accent);}
.times{list-style:none;margin:0;padding:0;}
.times li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line);font-size:var(--t-sm);}
.times li b{color:var(--ink);font-weight:600;}

/* 19. FOOTER ----------------------------------------------- */
.site-footer{background:var(--ink-soft);color:#B9BDC3;padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:var(--t-sm);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(1.5rem,4vw,3rem);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.site-footer .logo{color:#fff;margin-bottom:1.25rem;}
.site-footer .logo-word small{color:#8D929A;}
.footer-grid h3{font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 1rem;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:.55rem;}
.footer-grid a{text-decoration:none;}
.footer-grid a:hover{color:#fff;text-decoration:underline;}
.footer-grid address{font-style:normal;line-height:1.7;}
.footer-phone{display:inline-block;font-family:var(--display);font-weight:800;font-size:1.35rem;color:#fff;margin-top:.9rem;}
.legal{margin-top:clamp(2.5rem,6vw,3.5rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:var(--t-xs);color:#8D929A;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;}
.legal a{text-decoration:none;}
.legal a:hover{color:#fff;}

/* 20. MOBILE ACTION BAR ------------------------------------ */
.quickbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;grid-template-columns:1fr 1fr;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(22,24,27,.06);}
.quickbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem .5rem calc(.95rem + env(safe-area-inset-bottom));font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;}
.quickbar svg{width:18px;height:18px;fill:currentColor;}
.quickbar .q-tel{background:var(--accent);color:#fff;}
.quickbar .q-wa{color:var(--ink);}
.quickbar .q-wa svg{fill:var(--wa);}
@media (max-width:820px){.quickbar{display:grid;}body{padding-bottom:62px;}}

/* 21. MOTION ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}

/* 22. SMALL SCREEN TWEAKS ---------------------------------- */
.prose .compare td:last-child{background:transparent;font-weight:500;}
.prose .compare thead th:last-child{color:var(--muted);}
@media (max-width:560px){
  .hero .btn-row .btn,.page-hero .btn-row .btn{flex:1 1 100%;}
  .rating{font-size:.8rem;}
}

/* 23. VIDEO HERO -------------------------------------------
   Full-bleed muted loop under a soft charcoal scrim. The scrim
   is what keeps it calm: the footage reads as texture, the
   headline stays the loudest thing on the screen. Tune the
   darkness with --scrim, not by editing the gradients. */
.hero--video{
  --scrim:.62;
  position:relative;overflow:hidden;border-bottom:0;
  min-height:min(86vh,760px);display:flex;align-items:center;
  background:#1C1F23 linear-gradient(135deg,#2A2E34 0%,#16181B 70%);
  color:#E6E8EB;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .8s ease;}
.hero-bg.is-ready{opacity:1;}

/* Phones and tablets get a still, not the clip. Gate is pointer/hover, not
   width alone, so an iPad in landscape is treated as a tablet rather than a
   desktop. Must stay in step with the matching test in main.js. */
.hero-bg{display:none;}
.hero--video{
  background-image:url(assets/img/hero-still-portrait.jpg?v=1);
  background-size:cover;background-position:center;
}
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  .hero-bg{display:block;}
  .hero--video{background-image:none;}
}
.hero--video::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(22,24,27,calc(var(--scrim) + .2)) 0%,rgba(22,24,27,var(--scrim)) 45%,rgba(22,24,27,calc(var(--scrim) - .25)) 100%),
    linear-gradient(0deg,rgba(22,24,27,.45) 0%,rgba(22,24,27,0) 40%);
}
.hero-inner{position:relative;z-index:2;padding-block:clamp(3.5rem,9vw,6.5rem);}
.hero--video h1{color:#fff;max-width:15ch;}
.hero--video h1 em{color:#E27A7E;}          /* lifted red so it reads on dark without shouting */
.hero--video .lead{color:#D9DCE0;max-width:46ch;}
.hero--video .rating{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#D9DCE0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.hero--video .rating strong{color:#fff;}
.hero--video .hero-points{color:#D9DCE0;}
.hero--video .hero-points li::before{background:#E27A7E;}
.btn--glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.btn--glass:hover{background:#fff;border-color:#fff;color:var(--ink);}
.btn--glass .wa{fill:#4CD27F;}
.btn--sermi{background:var(--sermi);border-color:var(--sermi);color:#fff;}
.btn--sermi:hover{background:var(--sermi-deep);border-color:var(--sermi-deep);color:#fff;}
.btn--sermi svg{fill:currentColor;}
.btn--glass:hover .wa{fill:var(--wa);}
.hero-pause{position:absolute;right:var(--gutter);bottom:1.5rem;z-index:3;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(22,24,27,.5);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.hero-pause:hover{background:rgba(22,24,27,.85);}
.hero-pause svg{width:15px;height:15px;fill:currentColor;}
.hero-pause .icon-play{display:none;}
.hero-pause[data-paused="true"] .icon-play{display:block;}
.hero-pause[data-paused="true"] .icon-pause{display:none;}
@media (max-width:820px){.hero--video{min-height:0;}.hero-pause{bottom:1rem;}}

/* 24. MAP EMBED -------------------------------------------- */
.map-embed{margin-top:2rem;border:1px solid var(--line);background:var(--paper-cool);}
.map-embed iframe{display:block;width:100%;height:280px;border:0;filter:grayscale(.35) contrast(1.02);}

/* 25. LOGO -------------------------------------------------
   The supplied logo is white and red artwork on black, so on
   the white header it sits in an ink chip rather than being
   knocked out. On the dark footer it stands on its own. */
.footer-logo{height:86px;width:auto;margin-bottom:1.25rem;}
@media (max-width:480px){.logo-mark-img{height:40px;}}

/* 26. TICKER -----------------------------------------------
   Replaces the four column credentials strip. One red band,
   everything we want said in a single pass, moving slowly.
   Duplicated track so the loop never shows a gap, and it
   holds still for anyone who has asked for reduced motion. */
.ticker{background:var(--accent);color:#fff;overflow:hidden;position:relative;}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:clamp(2rem,6vw,6rem);z-index:2;pointer-events:none;}
.ticker::before{left:0;background:linear-gradient(90deg,var(--accent),rgba(178,58,63,0));}
.ticker::after{right:0;background:linear-gradient(270deg,var(--accent),rgba(178,58,63,0));}
.ticker-rail{display:flex;width:max-content;animation:ticker 46s linear infinite;}
.ticker:hover .ticker-rail,.ticker:focus-within .ticker-rail{animation-play-state:paused;}
.ticker-track{display:flex;align-items:center;list-style:none;margin:0;padding:0;}
.ticker-track li{
  display:flex;align-items:center;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:0.8rem;
  letter-spacing:0.16em;text-transform:uppercase;
  padding-block:1.15rem;padding-inline:clamp(1.1rem,2.5vw,2rem);
}
.ticker-track li::after{
  content:"";width:5px;height:5px;background:#fff;opacity:.55;
  margin-left:clamp(1.1rem,2.5vw,2rem);transform:rotate(45deg);
}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .ticker-rail{animation:none;width:100%;}
  .ticker-track:last-child{display:none;}
  .ticker-track{flex-wrap:wrap;justify-content:center;width:100%;}
}

/* 27. PHOTOS -----------------------------------------------
   Real job photos from the client. Square corners, hairline
   frame, caption below in the small caps used elsewhere. */
.shot{margin:0;background:var(--paper-cool);border:1px solid var(--line);}
.shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.shot--tall img{aspect-ratio:4/5;}
.shot figcaption{
  padding:0.85rem 1rem;border-top:1px solid var(--line);background:var(--paper);
  font-size:var(--t-xs);letter-spacing:.06em;color:var(--muted);line-height:1.5;
}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2vw,1.5rem);}
@media (max-width:900px){.work-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.work-grid{grid-template-columns:1fr;}}
.work-grid .shot img{aspect-ratio:4/5;}

/* 28. SERVICE CARD BACKGROUNDS -----------------------------
   A soft paper wash rather than flat white, with the tint
   warming on hover so the grid still reads as one block. */
.svc{background:linear-gradient(175deg,#FFFFFF 0%,#F7F7F8 100%);}
.svc:hover{background:linear-gradient(175deg,#FFFFFF 0%,#F7E8E8 100%);}
.svc h3{transition:color .18s ease;}
.svc:hover h3{color:var(--accent-deep);}
.problem{background:linear-gradient(175deg,#FFFFFF 0%,#F7F7F8 100%);}
.problem:hover{background:linear-gradient(175deg,#FFFFFF 0%,#F7E8E8 100%);}
.aside .shot img{aspect-ratio:4/5;}
.shot--wide img{aspect-ratio:16/9;}
.prose .shot{margin:2rem 0;}

/* 29. COMPARISON TABLE -------------------------------------
   The dealer versus us block on the homepage. Our column is
   the hero: dark header, tinted body, ticks. The dealer
   column stays deliberately quiet. */
.vs{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border:1px solid var(--line);font-size:var(--t-sm);box-shadow:0 18px 40px rgba(22,24,27,.06);}
.vs-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.vs-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.vs th,.vs td{text-align:left;padding:1.05rem 1.2rem;border-bottom:1px solid var(--line);vertical-align:middle;}
.vs thead th{
  font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  background:#F4F5F6;padding-block:1rem;border-bottom:1px solid var(--line);
}
.vs thead th.vs-us{
  background:var(--ink);color:#fff;position:relative;font-size:.85rem;letter-spacing:.06em;
}
.vs thead th.vs-us b{color:#E4676D;font-weight:700;}
.vs thead th.vs-us::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);}
.vs tbody th{width:28%;font-weight:600;color:var(--ink);font-family:var(--body);font-size:var(--t-sm);}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:0;}
.vs tbody tr:nth-child(even) th,.vs tbody tr:nth-child(even) td{background-color:rgba(240,241,243,.5);}
.vs-no,.vs-yes{position:relative;padding-left:2.9rem!important;}
.vs-no{color:var(--muted);}
.vs-yes{width:30%;color:var(--ink);font-weight:600;background-color:var(--accent-tint)!important;border-left:1px solid var(--line);}
.vs-no::before,.vs-yes::before{
  content:"";position:absolute;left:1.2rem;top:50%;margin-top:-8px;width:16px;height:16px;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.vs-no::before{background:#B9BCC2;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z'/%3E%3C/svg%3E");}
.vs-yes::before{background:var(--accent);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");}
/* Phones: the three column grid gets too tight, so each row
   becomes a stacked block with its own small column labels. */
@media (max-width:640px){
  .vs thead{display:none;}
  .vs,.vs tbody,.vs tr,.vs th,.vs td{display:block;width:auto!important;}
  .vs tr{border-bottom:1px solid var(--line);}
  .vs tr:last-child{border-bottom:0;}
  .vs tbody th{background:var(--paper-warm)!important;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;padding:.75rem 1rem;}
  .vs tbody tr:nth-child(even) td{background-color:transparent;}
  .vs td{border-bottom:1px solid var(--line);}
  .vs tr td:last-child{border-bottom:0;}
  .vs-no,.vs-yes{padding:1.75rem 1rem .85rem 2.9rem!important;font-size:.9rem;}
  .vs-no::before,.vs-yes::before{left:1rem;top:1.65rem;margin-top:0;}
  .vs-no::after,.vs-yes::after{
    content:attr(data-label);position:absolute;left:2.9rem;top:.6rem;
    font-family:var(--display);font-weight:700;font-size:.6rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  }
  .vs-yes::after{color:var(--accent);}
  .vs-yes{border-left:0;}
}

/* 30. RAILS ------------------------------------------------
   Horizontal scrollers. Swipe on a phone, arrows on desktop.
   Native scrolling with snap points, so it keeps working with
   JavaScript off and with a keyboard. */
.head-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:flex-end;}
.head-actions p{margin:0;max-width:40ch;}
.rail-nav{display:none;gap:.4rem;}
.rail-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1.5px solid var(--line);color:var(--ink);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;
}
.rail-btn svg{width:18px;height:18px;fill:currentColor;}
.rail-btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff;}
.rail-btn:disabled{opacity:.3;cursor:default;}
.section--warm .rail-btn,.section--grey .rail-btn{background:var(--paper);}

.rail{position:relative;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);}
.rail-track{
  display:flex;gap:clamp(.75rem,1.6vw,1.25rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block:.25rem 1rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail-track::-webkit-scrollbar{display:none;}
.rail-track:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}
.rail-track > *{scroll-snap-align:start;flex:0 0 clamp(250px,78vw,320px);}
@media (min-width:700px){.rail-track > *{flex-basis:300px;}}
@media (min-width:1100px){.rail-track > *{flex-basis:320px;}}
.rail-track--work > *{flex:0 0 clamp(260px,80vw,380px);}
@media (min-width:1100px){.rail-track--work > *{flex-basis:380px;}}

/* Cards in a rail carry their own border, since there is no grid */
.rail-track .svc{border:1px solid var(--line);min-height:230px;}
.rail-hint{
  font-family:var(--display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:.25rem 0 0;display:flex;align-items:center;gap:.6rem;
}
.rail-hint::after{content:"";flex:1;height:1px;background:var(--line);}
@media (min-width:901px){
  .rail-nav{display:flex;}
  .rail-hint{display:none;}
}
@media (prefers-reduced-motion:reduce){.rail-track{scroll-behavior:auto;}}
/* Soft fade at the right edge so a cut off card reads as
   "there is more", not as a layout mistake. */
.rail::after{
  content:"";position:absolute;top:0;bottom:1rem;right:0;width:clamp(1.5rem,4vw,3.5rem);
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--paper));pointer-events:none;
}
.section--warm .rail::after{background:linear-gradient(90deg,rgba(250,241,241,0),var(--wash-red));}
.section--grey .rail::after{background:linear-gradient(90deg,rgba(240,241,243,0),var(--wash-grey));}

/* 31. WIDER COVERAGE --------------------------------------- */
.coverage{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
@media (max-width:820px){.coverage{grid-template-columns:1fr;}}
.coverage-group{background:var(--paper);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.25rem);}
.coverage-group h3{font-size:1.15rem;margin-bottom:.5rem;}
.coverage-group > p{font-size:var(--t-sm);color:var(--muted);margin-bottom:1.5rem;line-height:1.6;}
.places{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;}
.places li{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;line-height:1;padding:.6rem .8rem;background:var(--wash-red);border:1px solid var(--line-red);color:var(--ink);}