/* ==========================================================================
   Watertown Mutual — site styles
   Structure modeled on mtauburnmobil.com (sister company)
   Visual language modeled on martinautoservice.com
   ========================================================================== */

:root{
  /* Color */
  --ink:        #0B1B2B;
  --navy:       #12365C;
  --navy-700:   #0E2A47;
  --navy-100:   #DCE5EE;
  --steel:      #5A6B7C;
  --mist:       #E9EEF3;
  --paper:      #F7F8F6;
  --white:      #FFFFFF;
  --signal:     #C8102E;   /* CTA / accent */
  --signal-700: #A00C24;
  --rust:       #8B3A32;   /* Martin-style intro headline + pill */
  --cream:      #F7F4EE;
  --amber:      #F2B705;   /* stars, inspection sticker */

  /* Type — matched to martinautoservice.com
     They use Adobe Garamond Pro (headings) + Proxima Nova (body) via Typekit.
     Those are licensed fonts, so we use the closest open equivalents:
     EB Garamond ≈ Adobe Garamond Pro, Montserrat ≈ Proxima Nova. */
  --display: 'EB Garamond', 'Adobe Garamond Pro', Garamond, 'Times New Roman', serif;
  --body:    'Montserrat', 'proxima-nova', 'Helvetica Neue', Arial, sans-serif;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(3.5rem, 8vw, 7rem);
  --maxw: 1180px;
  --radius: 4px;

  --shadow-sm: 0 1px 2px rgba(11,27,43,.08), 0 4px 14px rgba(11,27,43,.06);
  --shadow-md: 0 2px 6px rgba(11,27,43,.10), 0 18px 40px rgba(11,27,43,.10);

  /* Standard interior photo-hero height (About / Services / Tires, etc.) */
  --pagehead-photo-min-height: clamp(460px, 54vw, 560px);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.12;
  letter-spacing:0;
  margin:0 0 .5em;
  color:var(--ink);
}

h1{ font-size:clamp(2.35rem, 6vw, 4.1rem); }
h2{ font-size:clamp(1.85rem, 4vw, 2.85rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.4rem); letter-spacing:-.01em; }
h4{ font-size:1.05rem; letter-spacing:0; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--navy); }

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

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

.wrap--narrow{ max-width:820px; }

.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(2.5rem,5vw,4rem); }
.section--paper{ background:var(--paper); }
.section--mist{ background:var(--mist); }
.section--navy{ background:var(--navy); color:var(--white); }
.section--navy h2,
.section--navy h3{ color:var(--white); }

/* ---------- Eyebrow / labels ------------------------------------------- */

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--signal);
  margin:0 0 1rem;
}
.section--navy .eyebrow{ color:var(--amber); }

.lede{
  font-size:clamp(1.08rem,1.8vw,1.28rem);
  color:var(--steel);
  max-width:62ch;
}
.section--navy .lede{ color:rgba(255,255,255,.82); }

/* ---------- Buttons ----------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--body);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.95rem 1.7rem;
  border:2px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ transform:translateY(-1px); }

.btn--primary{ background:var(--signal); color:var(--white); border-color:var(--signal); }
.btn--primary:hover{ background:var(--signal-700); border-color:var(--signal-700); }

.btn--navy{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.btn--navy:hover{ background:var(--navy-700); border-color:var(--navy-700); }

.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }

.btn--white{ background:var(--white); color:var(--navy); border-color:var(--white); }
.btn--white:hover{ background:var(--mist); border-color:var(--mist); color:var(--navy); }

.btn--outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--outline:hover{ background:var(--navy); color:var(--white); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------- Top bar ----------------------------------------------------- */

.topbar{
  background:var(--ink);
  color:rgba(255,255,255,.86);
  font-size:.82rem;
  letter-spacing:.02em;
}
.topbar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.4rem 1.5rem;
  padding-block:.55rem;
  text-align:center;
}
.topbar a{ color:var(--white); text-decoration:none; font-weight:600; }
.topbar a:hover{ text-decoration:underline; }
.topbar__dot{ color:var(--amber); }

/* ---------- Header ------------------------------------------------------ */

.header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--navy-100);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:.85rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:var(--ink);
}
.brand__mark{
  width:44px; height:44px;
  flex:none;
  display:grid; place-items:center;
  background:var(--navy);
  color:var(--white);
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.04em;
  border-radius:var(--radius);
}
.brand__name{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:var(--display);
  font-weight:600;
  font-size:1.28rem;
  letter-spacing:0;
  line-height:1.05;
  text-align:center;
}
.brand__sub{
  display:block;
  font-family:var(--body);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  margin-top:.3rem;
}

.nav{ display:flex; align-items:center; gap:1.75rem; }
.nav__list{
  display:flex;
  align-items:center;
  gap:1.15rem;
  list-style:none;
  margin:0; padding:0;
}
.nav__list a{
  font-family:var(--body);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding-block:.4rem;
  border-bottom:2px solid transparent;
}
.nav__list a:hover{ border-bottom-color:var(--signal); }
.nav__list a[aria-current="page"]{ border-bottom-color:var(--signal); color:var(--navy); }

.nav__phone{
  font-family:var(--body);
  font-weight:700;
  font-size:1rem;
  color:var(--navy);
  text-decoration:none;
  white-space:nowrap;
}
.nav__phone:hover{ color:var(--signal); }

.navtoggle{
  display:none;
  background:none;
  border:1px solid var(--navy-100);
  border-radius:var(--radius);
  padding:.55rem .8rem;
  font-family:var(--body);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy);
  cursor:pointer;
}

@media (max-width:940px){
  .navtoggle{ display:block; }
  .nav{
    position:absolute;
    inset:100% 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--white);
    border-bottom:1px solid var(--navy-100);
    box-shadow:var(--shadow-md);
    padding:.5rem var(--gutter) 1.25rem;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list a{
    display:block;
    padding:.85rem 0;
    border-bottom:1px solid var(--mist);
  }
  .nav__list a:hover{ border-bottom-color:var(--mist); color:var(--signal); }
  .nav__cta{ margin-top:1rem; }
  .nav .btn{ width:100%; }
}

/* ---------- Hero -------------------------------------------------------- */

.hero{
  position:relative;
  min-height:76vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:var(--white);
  background:#0c2841;
}
.hero__media{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:#0c2841 url("https://i.ytimg.com/vi/TIXVp5O5Pw8/maxresdefault.jpg") center/cover no-repeat;
}
.hero__media iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw; /* 16:9 cover */
  min-height:100%;
  min-width:177.78vh;
  border:0;
  transform:translate(-50%,-50%) scale(1.18);
  pointer-events:none;
}
/* Vertical (9:16) background source.
   Self-hosted <video> rather than a YouTube embed: YouTube injects its own
   Shorts overlay controls inside the iframe, which cannot be removed from
   outside it. A native video element has no such chrome, and object-fit
   handles the 9:16-into-wide-hero crop directly. */
.hero__media--vertical video{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  object-position:center;
  border:0;
  pointer-events:none;
}
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(12,40,65,.28);
}
.hero__overlay--deep{ background:rgba(12,40,65,.46); }
.hero__inner{
  position:relative;
  z-index:2;
  max-width:54rem;
  margin-inline:auto;
  padding-block:clamp(5.5rem,12vw,9rem);
  text-align:center;
}
.hero__kicker{
  font-family:var(--body);
  font-size:clamp(1.05rem,2.1vw,1.4rem);
  font-weight:400;
  line-height:1.45;
  letter-spacing:.01em;
  color:#fff;
  margin:0 0 1.1rem;
}
.hero h1{
  color:#fff;
  font-weight:500;
  font-size:clamp(2.7rem,7vw,5.35rem);
  line-height:1.05;
  letter-spacing:0;
  margin:0 0 2.15rem;
}
.btn--pill{
  background:#fff;
  color:#0c2841;
  border-color:#fff;
  border-radius:50px;
  letter-spacing:.2em;
  font-size:1.05rem;
  padding:1.4rem 2.25rem;
}
.btn--pill:hover{
  background:transparent;
  color:#fff;
  border-color:#fff;
  transform:translateY(-1px);
}

@media (prefers-reduced-motion:reduce){
  .hero__media iframe{ display:none; }
}

/* ---------- Intro (below hero) ------------------------------------------ */

.intro{
  background:var(--cream);
  padding-block:clamp(3.5rem,8vw,6.5rem);
}
.intro__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.intro__copy h2{
  color:var(--ink);
  font-weight:500;
  font-size:clamp(2.15rem,4.4vw,3.35rem);
  line-height:1.12;
  letter-spacing:0;
  max-width:16ch;
  margin:0 0 1.4rem;
}
.intro__copy p{
  color:var(--steel);
  font-size:clamp(1.02rem,1.5vw,1.15rem);
  line-height:1.7;
  max-width:42ch;
  margin:0 0 2rem;
}
.btn--rust{
  background:var(--signal);
  color:#fff;
  border-color:var(--signal);
  border-radius:50px;
  letter-spacing:.2em;
  font-size:.95rem;
  padding:1.15rem 2rem;
}
.btn--rust:hover{
  background:var(--signal-700);
  border-color:var(--signal-700);
  color:#fff;
}
.intro__place h3{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.55rem,2.4vw,1.95rem);
  color:var(--navy);
  letter-spacing:0;
  margin:0 0 1.1rem;
}
.intro__place address{
  font-style:normal;
  font-size:1.05rem;
  line-height:1.55;
  color:#1a2f45;
  margin:0 0 1.35rem;
}
.intro__map{
  border:1px solid #e2e4e1;
  background:#e8eaec;
  overflow:hidden;
  line-height:0;
  max-width:420px;
}
.intro__map iframe{
  display:block;
  width:100%;
  height:240px;
  border:0;
}
@media (max-width:820px){
  .intro__grid{ grid-template-columns:1fr; }
  .intro__copy h2{ max-width:none; }
  .intro__map{ max-width:none; }
}

/* ---------- Trust strip -------------------------------------------------- */

.trustbar{
  background:var(--ink);
  color:var(--white);
  border-top:3px solid var(--signal);
}
.trustbar__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,.12);
}
.trustbar__item{
  background:var(--ink);
  padding:1.5rem 1.25rem;
  text-align:center;
}
.trustbar__num{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:1.55rem;
  letter-spacing:-.02em;
  color:var(--amber);
  line-height:1.1;
}
.trustbar__label{
  display:block;
  font-size:.82rem;
  color:rgba(255,255,255,.78);
  margin-top:.35rem;
}
@media (max-width:720px){
  .trustbar__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Generic grids ------------------------------------------------ */

.grid{ display:grid; gap:1.5rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

@media (max-width:900px){
  .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
}

.section__head{ max-width:660px; margin-bottom:2.75rem; }
.section__head--center{ margin-inline:auto; text-align:center; }

/* ---------- Service cards ------------------------------------------------ */

.card{
  background:var(--white);
  border:1px solid var(--navy-100);
  border-radius:var(--radius);
  padding:1.75rem;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover{
  border-color:var(--navy);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--steel); font-size:.98rem; }

.card__icon{
  width:38px; height:38px;
  margin-bottom:1rem;
  color:var(--signal);
}
.card__icon svg{ width:100%; height:100%; }

.card--feature{ padding:0; overflow:hidden; }
.card--feature .card__body{ padding:1.75rem; }
.card--feature img{ aspect-ratio:3/2; object-fit:cover; width:100%; background:var(--mist); }

a.card--link{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
a.card--link h3{ color:var(--ink); }
a.card--link:hover h3{ color:var(--navy); }

/* ---------- Service detail pages ----------------------------------------- */

.svc-intro{
  display:grid;
  grid-template-columns:1.15fr .95fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.svc-intro__copy h2{ margin-bottom:1rem; }
.svc-intro__media{
  display:block;
  min-width:0;
}
.svc-intro__photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  background:var(--mist);
}
.svc-intro__icon{
  width:min(100%,220px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid var(--navy-100);
  border-radius:50%;
  background:var(--paper);
  color:var(--signal);
  padding:2.5rem;
}
.svc-intro__icon svg{ width:100%; height:100%; }
.svc-detail{
  padding:1.5rem 0;
  border-top:1px solid rgba(255,255,255,.18);
}
.svc-detail:first-of-type{ border-top:0; padding-top:0; }
.svc-detail h3{
  color:var(--white);
  font-size:clamp(1.15rem,2vw,1.35rem);
  margin-bottom:.6rem;
}
.svc-detail p{
  color:rgba(255,255,255,.82);
  margin:0;
  max-width:70ch;
}
@media (max-width:820px){
  .svc-intro{ grid-template-columns:1fr; }
  .svc-intro__media{ order:-1; }
  .svc-intro__icon{ width:140px; padding:1.75rem; }
}

/* ---------- Signature: dual hours panel ---------------------------------- */

.hours{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--white);
}
@media (max-width:720px){ .hours{ grid-template-columns:1fr; } }

.hours__col + .hours__col{ border-left:2px solid var(--ink); }
@media (max-width:720px){
  .hours__col + .hours__col{ border-left:0; border-top:2px solid var(--ink); }
}

/* Stacked variant, for narrow columns */
.hours--stack{ grid-template-columns:1fr; }
.hours--stack .hours__col + .hours__col{ border-left:0; border-top:2px solid var(--ink); }

.hours__head{
  background:var(--ink);
  color:var(--white);
  padding:1rem 1.5rem;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.hours__col:nth-child(2) .hours__head{ background:var(--navy); }
.hours__title{
  font-family:var(--display);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-.01em;
}
.hours__tag{
  font-family:var(--display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
}
.hours__body{ padding:1.25rem 1.5rem 1.5rem; }
.hours__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 0;
  border-bottom:1px dashed var(--navy-100);
  font-size:1rem;
}
.hours__row:last-child{ border-bottom:0; }
.hours__row dt{ color:var(--steel); }
.hours__row dd{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.hours__row--closed dd{ color:var(--signal); }
.hours__foot{
  margin-top:1rem;
  font-size:.88rem;
  color:var(--steel);
}

/* ---------- Accordion ---------------------------------------------------- */

.acc{ border-top:1px solid var(--navy-100); }
.acc__item{ border-bottom:1px solid var(--navy-100); }
.acc__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  text-align:left;
  background:none;
  border:0;
  padding:1.4rem 0;
  cursor:pointer;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.02rem,1.7vw,1.2rem);
  letter-spacing:-.01em;
  color:var(--ink);
}
.acc__btn:hover{ color:var(--navy); }
.acc__sign{
  flex:none;
  width:26px; height:26px;
  display:grid; place-items:center;
  border:2px solid var(--signal);
  border-radius:50%;
  color:var(--signal);
  font-size:1rem;
  line-height:1;
  transition:transform .22s ease, background .22s ease, color .22s ease;
}
.acc__btn[aria-expanded="true"] .acc__sign{
  transform:rotate(45deg);
  background:var(--signal);
  color:var(--white);
}
.acc__panel{
  display:none;
  padding:0 0 1.6rem;
  max-width:70ch;
  color:var(--steel);
}
.acc__panel.is-open{ display:block; }

.section--navy .acc,
.section--navy .acc__item{ border-color:rgba(255,255,255,.2); }
.section--navy .acc__btn{ color:var(--white); }
.section--navy .acc__btn:hover{ color:var(--amber); }
.section--navy .acc__panel{ color:rgba(255,255,255,.8); }
.section--navy .acc__sign{ border-color:var(--amber); color:var(--amber); }
.section--navy .acc__btn[aria-expanded="true"] .acc__sign{ background:var(--amber); color:var(--ink); }

/* ---------- Problem list -------------------------------------------------- */

.problems{
  list-style:none;
  margin:0 0 2rem;
  padding:0;
  display:grid;
  gap:1rem;
}
.problems li{
  position:relative;
  padding-left:2.25rem;
  color:var(--steel);
  font-size:1.05rem;
}
.problems li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:14px; height:2px;
  background:var(--signal);
}

/* ---------- Reviews ------------------------------------------------------- */

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.35rem;
}
@media (max-width:960px){
  .reviews-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .reviews-grid{ grid-template-columns:1fr; }
}

.review{
  background:var(--white);
  border:1px solid rgba(18,54,92,.08);
  border-radius:14px;
  padding:1.35rem 1.4rem 1.45rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  box-shadow:0 8px 28px rgba(11,27,43,.08);
  min-height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.review:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(11,27,43,.12);
}
.review__head{
  display:flex;
  align-items:center;
  gap:.85rem;
}
.review__avatar{
  flex:none;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--navy) 0%, #1a4f82 100%);
  color:var(--white);
  font-family:var(--body);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
}
.review__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.review__stars{
  color:#F5B400;
  letter-spacing:.12em;
  font-size:1.05rem;
  line-height:1;
}
.review__text{
  font-size:1rem;
  line-height:1.55;
  color:var(--ink);
  margin:0;
  flex:1;
}
.review__by{
  font-style:normal;
  font-family:var(--body);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  line-height:1.2;
}
.review__src{
  display:block;
  font-family:var(--body);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--steel);
  opacity:.9;
  margin-top:0;
}

/* homepage reviews still use stars-first markup without avatar head */
.grid .review > .review__stars:first-child{ margin-top:.1rem; }
.grid .review > .review__by{
  margin-top:auto;
  font-family:var(--body);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
}
.grid .review > .review__by .review__src{
  margin-top:.25rem;
}

.ratings{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.5rem;
}
.ratings__item{
  flex:1 1 200px;
  background:var(--white);
  border:1px solid var(--navy-100);
  border-radius:var(--radius);
  padding:1.35rem 1.5rem 1.25rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ratings__logo{
  display:block;
  width:auto;
  max-width:150px;
  height:40px;
  object-fit:contain;
  margin:0 auto .85rem;
}
.ratings__logo--sign{
  max-width:112px;
  height:auto;
  max-height:112px;
  margin-bottom:.65rem;
}
.ratings__score{
  font-family:var(--display);
  font-weight:700;
  font-size:2rem;
  line-height:1;
  color:var(--navy);
}
.ratings__meta{ font-size:.88rem; color:var(--steel); margin-top:.4rem; }

/* ---------- Split feature ------------------------------------------------- */

.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .split__media{ order:-1; }
}

.split__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.split__copy .lede + .lede{ margin-top:1.15rem; }
.split__media img,
.split__media-photo{
  border-radius:var(--radius);
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  background:var(--mist);
  width:100%;
  height:auto;
  display:block;
  box-shadow:var(--shadow-md);
}
.split__media--stack{
  display:grid;
  gap:1rem;
}
.split__media--stack img{
  aspect-ratio:16/10;
}

/* ---------- Location cards ------------------------------------------------ */

.loc{
  background:var(--white);
  border:1px solid var(--navy-100);
  border-top:4px solid var(--navy);
  border-radius:var(--radius);
  padding:1.75rem;
}
.loc--sister{ border-top-color:var(--steel); }
.loc__tag{
  font-family:var(--display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:.6rem;
}
.loc--sister .loc__tag{ color:var(--steel); }
.loc address{ font-style:normal; color:var(--steel); line-height:1.8; }
.loc a{ font-weight:600; }
.loc__map{
  margin-top:1.25rem;
  border:1px solid var(--navy-100);
  background:#e8eaec;
  overflow:hidden;
  line-height:0;
}
.loc__map iframe{
  display:block;
  width:100%;
  height:240px;
  border:0;
}

/* ---------- Home "About us" split ---------------------------------------- */

/* Heading sits inside the left column so the location card's top edge lines up
   with the eyebrow/headline rather than starting below a full-width header.
   The card then stretches to match the copy column, so both end level. */
.about__grid{ align-items:stretch; }
.about__copy h2{ margin-top:0; }
.about__copy .lede + .lede{ margin-top:1.15rem; }
/* The card is white, so undo section--navy's white heading colour inside it. */
.about__aside .loc h3{ color:var(--ink); }
.about__aside{ display:flex; }
.about__aside .loc{
  display:flex;
  flex-direction:column;
  width:100%;
}
.about__aside .loc__map{
  flex:1 1 auto;
  display:flex;
  min-height:240px;
}
.about__aside .loc__map iframe{ height:100%; }

@media (max-width:620px){
  /* Stacked: no column to match, so return the map to its natural height. */
  .about__aside .loc__map{ display:block; min-height:0; }
  .about__aside .loc__map iframe{ height:240px; }
}

/* ---------- Form ---------------------------------------------------------- */

.form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.4rem; }
.field label{
  font-family:var(--display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy);
}
.field input,
.field select,
.field textarea{
  font-family:var(--body);
  font-size:1rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--steel);
  border-radius:var(--radius);
  padding:.8rem .9rem;
  width:100%;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--navy); }
.field__hint{ font-size:.85rem; color:var(--steel); }

.datefield{
  position:relative;
  display:flex;
  align-items:center;
}
.datefield input[type="text"]{
  padding-right:2.75rem;
}
.datefield__btn{
  position:absolute;
  right:.45rem;
  top:50%;
  transform:translateY(-50%);
  width:2.1rem;
  height:2.1rem;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:var(--navy);
  cursor:pointer;
  border-radius:var(--radius);
  padding:0;
}
.datefield__btn:hover{ color:var(--signal); background:var(--mist); }
.datefield__native{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
  right:0;
  bottom:0;
  border:0;
  padding:0;
}

.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr; } }

.formnote{
  background:var(--mist);
  border-left:4px solid var(--navy);
  padding:1rem 1.25rem;
  font-size:.92rem;
  color:var(--steel);
  border-radius:0 var(--radius) var(--radius) 0;
}

/* ---------- Footer -------------------------------------------------------- */

.footer{
  background:var(--ink);
  color:rgba(255,255,255,.78);
  padding-block:clamp(3rem,6vw,4.5rem) 0;
  font-size:.96rem;
}
.footer h4{
  font-family:var(--display);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:1rem;
}
.footer a{ color:var(--white); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.footer address{ font-style:normal; line-height:1.9; }
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
}
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }

.footer__bar{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  justify-content:space-between;
  font-size:.85rem;
  color:rgba(255,255,255,.55);
}

.seoline{
  background:#07131f;
  color:rgba(255,255,255,.30);
  font-size:.74rem;
  line-height:1.9;
  padding-block:1.25rem;
  text-align:center;
}

/* ---------- Page header (interior pages) ---------------------------------- */

.pagehead{
  background:var(--navy);
  color:var(--white);
  padding-block:clamp(3rem,7vw,5rem);
  border-bottom:4px solid var(--signal);
}
.pagehead--photo{
  position:relative;
  overflow:hidden;
  min-height:var(--pagehead-photo-min-height);
  display:flex;
  align-items:flex-end;
  padding-block:clamp(3.75rem,8vw,6rem);
  background:var(--navy);
  border-bottom:4px solid var(--signal);
}
.pagehead__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  display:block;
}
.pagehead__shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(100deg,rgba(11,27,43,.82) 0%,rgba(11,27,43,.58) 42%,rgba(11,27,43,.28) 100%);
  pointer-events:none;
}
.pagehead__content{
  position:relative;
  z-index:2;
  width:100%;
}
.pagehead h1{ color:var(--white); margin-bottom:.4rem; }
.pagehead p{ color:rgba(255,255,255,.88); max-width:58ch; font-size:1.1rem; }
.pagehead .eyebrow{ color:var(--amber); }
.pagehead--center{ text-align:center; }
.pagehead--center p{ margin-inline:auto; }

/* ---------- Vehicles we service ------------------------------------------ */

.makes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5rem 2.75rem;
}
.makes__item{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4 / 3;
  padding:1rem;
  background:var(--white);
}
.makes__img{
  display:block;
  width:100%;
  max-width:200px;
  height:100%;
  max-height:110px;
  object-fit:contain;
  opacity:0;
  transition:opacity .6s ease;
}
.makes__img.is-loaded{ opacity:1; }
.makes__cta{
  margin-top:clamp(2.75rem,6vw,4rem);
  text-align:center;
}
.makes__cta h3{
  font-size:clamp(1.4rem,2.4vw,1.85rem);
  margin-bottom:.4rem;
}
.makes__cta p{ color:var(--steel); }
@media (max-width:900px){
  .makes{ grid-template-columns:repeat(3,1fr); gap:1.5rem; }
}
@media (max-width:560px){
  .makes{ grid-template-columns:repeat(2,1fr); gap:1.15rem; }
}

/* ---------- Utilities ------------------------------------------------------ */

.center{ text-align:center; }
.mt-lg{ margin-top:2.5rem; }
.mt-md{ margin-top:1.5rem; }
.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--amber);
  color:var(--ink);
  padding:.75rem 1.25rem;
  font-weight:600;
  z-index:100;
}
.skip:focus{ left:0; }

/* ---------- Reveal on scroll ------------------------------------------------ */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-in{ opacity:1; transform:none; }

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