/* ============================================================
   SERVALL MECHANICS - shared shell for the inner pages.
   The block above the INNER PAGE SHELL divider is cut verbatim from
   index.html, so the capsule, masthead, buttons, call bubble and
   footer are identical everywhere. Change index.html first, then
   re-cut; do not hand-edit it here or the two will drift.
   ============================================================ */
/* ============================================================
   SERVALL MECHANICS — repair site
   Palette and type per Servall Brand Instructions for AI Tools.
   Photo tint lives in --tint; change it once and every photo follows.
   ============================================================ */
@font-face{
  font-family:"Serpentine";
  src:url("fonts/Serpentine-BoldOblique.woff2") format("woff2"),
      url("fonts/Serpentine-BoldOblique.woff") format("woff");
  font-weight:700; font-style:oblique; font-display:swap;
}
@font-face{
  font-family:"Carlito";
  src:url("fonts/Carlito-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Carlito";
  src:url("fonts/Carlito-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
:root{
  --teal:#022B38;
  --ink:#020F14;
  --cream:#FEF8E8;
  --red:#AE151E;
  --blue:#A4CDD5;

  --tint:.70;                 /* near-black overlay strength on every photo */

  --display:"Serpentine","Arial Black",system-ui,sans-serif;
  --body:"Carlito","Calibri",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gutter:clamp(1.15rem,4vw,4.5rem);
  --maxw:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--teal);color:var(--cream);
  font-family:var(--body);font-size:17px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:4px;
}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--cream);color:var(--ink);padding:.75rem 1.25rem;font-weight:700}
.skip:focus{left:.5rem;top:.5rem}
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* shared section heading */
.sechead{max-width:46rem;margin:0 0 clamp(2.25rem,4vw,3.25rem)}
.sechead--center{margin-inline:auto;text-align:center}
.sechead h2{
  font-family:var(--display);font-weight:700;font-style:oblique;
  font-size:clamp(2rem,4vw,3.2rem);line-height:.98;
  text-transform:uppercase;letter-spacing:.005em;margin:0 0 .9rem;
}
.sechead p{margin:0;font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.6}
.on-cream .sechead h2{color:var(--teal)}
.on-cream .sechead p{color:rgba(2,43,56,.78)}
.on-dark .sechead h2{color:var(--cream)}
.on-dark .sechead p{color:rgba(254,248,232,.82)}
/* ============ STICKY TOP UNIT ============ */
.topunit{position:sticky;top:0;z-index:60;background:var(--cream)}
.utility{padding-block:.9rem .5rem;transition:opacity .25s ease,transform .25s ease}
.utility__pill{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.2rem 1rem;
  background:transparent;border:3px solid var(--teal);border-radius:999px;
  padding:.5rem 1.75rem;
}
.utility a{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--teal);text-decoration:none;
  font-weight:700;font-size:1rem;letter-spacing:.015em;
  padding:.45rem .55rem;border-radius:999px;
  transition:color .18s ease,background-color .18s ease;
}
.utility a:hover{color:var(--ink);background:rgba(2,43,56,.08)}
.utility .ico{width:21px;height:21px;flex:none;fill:var(--teal)}
.masthead{background:var(--cream);position:relative}
.masthead__inner{display:flex;align-items:center;gap:1.25rem;min-height:96px}
.brand{flex:none;line-height:0}
.brand img{width:clamp(178px,20vw,260px);height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.1vw,2rem)}
.nav a:not(.btn){
  text-decoration:none;font-weight:700;font-size:.92rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(2,43,56,.84);
  padding-block:.4rem;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:not(.btn):hover{color:var(--teal);border-bottom-color:var(--teal)}
/* red on the cream masthead is 6.86:1, so it passes AA as normal text */
.nav a.nav__offer{color:var(--red)}
.nav a.nav__offer:hover{color:var(--red);border-bottom-color:var(--red)}
.navtoggle{
  display:none;background:transparent;border:2px solid rgba(2,43,56,.4);
  border-radius:999px;color:var(--teal);padding:.6rem .72rem;cursor:pointer;line-height:0;
}
.navtoggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.3}
/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:0;border-radius:999px;
  font-size:1rem;padding:.95rem 1.9rem;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.btn--call{background:var(--cream);color:var(--ink)}
.btn--call:hover{background:var(--cream);transform:translateY(-2px);box-shadow:0 8px 24px rgba(2,15,20,.35)}
/* red on a dark field always carries a cream ring, per the brand rules */
.btn--request{background:var(--red);color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream)}
.btn--request:hover{background:#c62430;transform:translateY(-2px)}
.btn--oncream{background:var(--red);color:var(--cream)}
.btn--oncream:hover{background:#c62430;transform:translateY(-2px)}
.btn--oncard{background:var(--teal);color:var(--cream)}
.btn--oncard:hover{background:var(--ink);transform:translateY(-2px)}
.btn--ghostlight{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 2px rgba(2,43,56,.35)}
.btn--ghostlight:hover{background:rgba(2,43,56,.07);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(164,205,213,.5)}
.btn--ghost:hover{background:rgba(164,205,213,.14);transform:translateY(-2px)}
.btn--sm{font-size:.88rem;padding:.7rem 1.3rem}
.btn--xl{font-size:1.12rem;padding:1.15rem 2.4rem}
.btn--full{width:100%}
.btn .ico{width:20px;height:20px;fill:currentColor;flex:none}
/* ============ CALL BUBBLE ============ */
.callfab{
  position:fixed;left:20px;bottom:20px;z-index:80;
  width:62px;height:62px;border-radius:999px;
  background:var(--red);box-shadow:inset 0 0 0 3px var(--cream),0 10px 26px rgba(2,15,20,.45);
  display:grid;place-items:center;
  transition:transform .16s ease,background-color .16s ease;
}
.callfab:hover{background:#c62430;transform:scale(1.06)}
/* hidden while the hero's own call button is on screen: no duplicate button,
   and nothing covering the hours line at the top of the page */
.callfab.is-hidden{opacity:0;transform:scale(.7);pointer-events:none}
.callfab .ico{width:26px;height:26px;fill:var(--cream)}
/* ============ FOOTER ============ */
.foot{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);padding-block:clamp(2.75rem,6vw,4rem) 0}
.foot__mark{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  right:clamp(-150px,-9vw,-60px);bottom:clamp(-190px,-12vw,-80px);
  width:clamp(360px,44vw,720px);height:auto;opacity:.11;
}
.foot > .shell{position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.foot__brand{text-align:center}
.foot__brand img{width:clamp(150px,13vw,182px);height:auto;margin:0 auto 1.15rem}
.foot__brand p{margin:0 auto 1.5rem;font-size:1.05rem;line-height:1.6;color:rgba(254,248,232,.78);max-width:26rem}
.foot__brand .btn{margin-inline:auto}
.foot h3{
  font-family:var(--display);font-weight:700;font-style:oblique;
  font-size:1.02rem;line-height:1;text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 1.1rem;color:var(--blue);
}
.foot__list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.foot__list a,.foot__list span{display:flex;align-items:flex-start;gap:.7rem;color:var(--cream);text-decoration:none;font-size:1.05rem;line-height:1.5}
.foot__list a:hover{color:var(--blue)}
.foot__list .ico{width:19px;height:19px;flex:none;margin-top:.2rem;fill:var(--blue)}
.foot__hours{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot__hours li{display:flex;justify-content:space-between;gap:1rem;font-size:1.02rem;color:rgba(254,248,232,.85);border-bottom:1px solid rgba(164,205,213,.18);padding-bottom:.6rem}
.foot__hours li b{color:var(--cream)}
.foot__hours li.is-closed{color:rgba(164,205,213,.7)}
.foot__bar{
  margin-top:clamp(2.25rem,4vw,3rem);border-top:1px solid rgba(164,205,213,.22);
  /* the bottom padding is FAB clearance: the call bubble is 58px tall and
     sits 22px off the bottom-left, so without it the bubble lands on the
     Instagram icon and the copyright line */
  padding-block:1.35rem 6.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;
}
.foot__legal{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;list-style:none;margin:0;padding:0}
.foot__legal a{color:rgba(254,248,232,.78);text-decoration:none;font-size:.95rem}
.foot__legal a:hover{color:var(--blue);text-decoration:underline}
.foot__social{display:flex;gap:.6rem;margin-left:auto}
.foot__social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;box-shadow:inset 0 0 0 2px rgba(164,205,213,.45)}
.foot__social a:hover{background:rgba(164,205,213,.15)}
.foot__social .ico{width:21px;height:21px;fill:var(--cream)}
.foot__copy{font-size:.9rem;color:rgba(164,205,213,.7);width:100%;margin:0;line-height:1.6}
.foot__disclaimer{font-size:.78rem;color:rgba(164,205,213,.55);width:100%;margin:.6rem 0 0;line-height:1.6;max-width:62rem}
/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:1.75rem}
  .quote{max-width:34rem}
  .fleet__grid,.request__grid,.find__grid,.tour__grid{grid-template-columns:1fr;gap:2.25rem}
  .fleet__photo{aspect-ratio:16/9}
}
@media (max-width:980px){
  .svcs{grid-template-columns:1fr;gap:1.25rem}
  .svc{flex-direction:row}
  .svc__photo{aspect-ratio:auto;flex:0 0 36%}
  .sec__foot{flex-direction:column;align-items:stretch}
  .sec__foot .btn{width:100%}
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding-block:1.35rem}
  .step:last-child{border-bottom:3px solid rgba(2,43,56,.16)}
  .step__n b{font-size:2.1rem}
  .foot__grid{grid-template-columns:1fr;gap:2.25rem}
  .foot__brand .btn{width:100%}
  .foot__bar{flex-direction:column;align-items:flex-start}
  .foot__social{margin-left:0}
}
@media (max-width:860px){
  .masthead__inner{min-height:74px;gap:.6rem}
  .brand img{width:clamp(122px,32vw,166px)}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:3px solid var(--teal);
    padding:.35rem var(--gutter) 1.4rem;box-shadow:0 18px 30px rgba(2,15,20,.22);
  }
  .nav.is-open{display:flex}
  .nav a:not(.btn){padding-block:1rem;border-bottom:1px solid rgba(2,43,56,.16)}
  .nav .btn{margin-top:1.1rem;justify-content:center}
  .navtoggle{display:inline-flex;margin-left:auto}

  .utility{padding-block:.6rem .3rem}
  .utility__pill{padding:.3rem .9rem;gap:.1rem;justify-content:center}
  .utility a{font-size:.95rem;padding:.5rem .55rem}
  .utility .u-email{display:none}
  .topunit.is-scrolled .utility{opacity:0;transform:translateY(-10px);pointer-events:none;height:0;padding-block:0;overflow:hidden}
}
/* ---- phone: a tighter hero form so the pitch still clears the fold ---- */
@media (max-width:720px){
  .hero__grid{padding-block:1.75rem 2.25rem}
  .hero__cta{display:block}
  .quote{padding:1.15rem 1.1rem;border-radius:16px;max-width:none}
  .quote h2{font-size:1.25rem}
  .quote__note{font-size:.86rem;margin-bottom:.9rem}
  .quote .field{margin-bottom:.6rem}
  .quote .field label{font-size:.82rem;margin-bottom:.22rem}
  .quote .field input,.quote .field select,.quote .field textarea{padding:.58rem .7rem;font-size:.98rem;border-radius:10px}
  .quote .field textarea{min-height:3.4rem}
  .quote__foot{font-size:.8rem}
}
@media (max-width:620px){
  .trust{grid-template-columns:1fr}
  .hero__actions,.fleet__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn,.fleet__actions .btn{width:100%}
  .btn--xl{font-size:1.05rem;padding:1.05rem 1.4rem}
  .field-row{grid-template-columns:1fr}
  .callfab{width:56px;height:56px;left:16px;bottom:16px}
  .svc{flex-direction:column}
  .svc__photo{aspect-ratio:16/10;flex:none}
  .svc .btn{align-self:stretch;width:100%}
  .marquee__set span{padding-inline:1rem}
  .faq__btn{font-size:1.02rem;padding:.95rem 1.05rem}
  .faq__ans{padding:0 1.05rem 1.1rem;font-size:1rem}
  .foot__bar{padding-bottom:5.5rem}
}
/* v29 carried this: the capsule has to stay one row on a phone */
@media (max-width:480px){
  .brand img{width:108px}
  .utility a{font-size:.82rem;padding:.45rem .4rem;gap:.45rem}
  .utility .ico{width:17px;height:17px}
  .utility__pill{padding:.25rem .6rem}
  .u-city{display:none}
}
/* below this the phone number is what matters; the address appears twice more
   further down the page */
@media (max-width:344px){
  .utility .u-addr{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
  .btn:hover,.callfab:hover{transform:none}
  .marquee__track{animation:none;transform:none}
}

/* ============ INNER PAGE SHELL ============ */
.pagehead{background:var(--teal);color:var(--cream);padding-block:clamp(2.5rem,6vw,4.25rem)}
.pagehead .eyebrow{
  font-family:var(--display);font-weight:700;font-style:oblique;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin:0 0 .75rem;
}
.pagehead h1{
  font-family:var(--display);font-weight:700;font-style:oblique;
  font-size:clamp(1.9rem,5.5vw,3.1rem);line-height:1;letter-spacing:.005em;
  text-transform:uppercase;margin:0;color:var(--cream);
}
.pagehead p{margin:1rem 0 0;max-width:60ch;font-size:1.05rem;line-height:1.65;color:rgba(254,248,232,.9)}

.prose{background:var(--cream);color:var(--teal);padding-block:clamp(2.5rem,6vw,4.5rem)}
/* the page head already carries its own bottom padding, so the band that
   follows it does not need a top one as well */
.pagehead+.book{padding-top:0}
/* the reading column lines up under the H1 above it rather than floating in
   the middle of the band: .shell centres itself, so the measure is set on an
   inner box instead and left-aligned */
.prose .shell > *{max-width:74ch}
.prose h2{
  font-family:var(--display);font-weight:700;font-style:oblique;
  font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.1;letter-spacing:.005em;
  text-transform:uppercase;margin:2.75rem 0 .9rem;color:var(--teal);
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.05rem;font-weight:700;margin:1.85rem 0 .5rem;color:var(--teal)}
.prose p,.prose li{font-size:1.02rem;line-height:1.72;color:rgba(2,43,56,.9)}
.prose p{margin:0 0 1.05rem}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.3rem;display:grid;gap:.55rem}
.prose li::marker{color:var(--red)}
/* :not(.btn) matters: without it the body-link colour and underline land on
   the CTA buttons at the foot of every prose page and wreck them */
.prose a:not(.btn){color:var(--red);text-decoration:underline;text-underline-offset:2px}
.prose a:not(.btn):hover{color:var(--teal)}
.prose strong{font-weight:700;color:var(--teal)}
.prose hr{border:0;border-top:1px solid rgba(2,43,56,.16);margin:2.5rem 0}
.prose .updated{font-size:.88rem;color:rgba(2,43,56,.62);margin:0 0 2rem}
/* a pulled-out note, used for the plain-English summaries */
.note{
  background:rgba(164,205,213,.32);border-left:4px solid var(--teal);
  border-radius:0 14px 14px 0;padding:1.1rem 1.35rem;margin:0 0 1.6rem;
}
.note p:last-child{margin-bottom:0}
.prose .cta{
  display:flex;flex-wrap:wrap;gap:.8rem;margin:2.25rem 0 0;
  padding-top:1.9rem;border-top:1px solid rgba(2,43,56,.16);
}

/* ============ BOOKING PAGE FORM ============ */
.book{background:var(--teal);color:var(--cream);padding-block:clamp(2.5rem,6vw,4.5rem)}
.book__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.book__aside h2{
  font-family:var(--display);font-weight:700;font-style:oblique;
  font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.05;letter-spacing:.005em;
  text-transform:uppercase;margin:0 0 1rem;color:var(--cream);
}
.book__pts{list-style:none;margin:0 0 1.9rem;padding:0;display:grid;gap:.7rem}
.book__pts li{display:flex;align-items:flex-start;gap:.65rem;font-size:1rem;line-height:1.5;color:rgba(254,248,232,.92)}
.book__pts .ico{width:19px;height:19px;flex:none;margin-top:.2rem;fill:var(--blue)}
.book__call{border-top:1px solid rgba(164,205,213,.28);padding-top:1.5rem}
.book__call p{margin:0 0 .9rem;font-size:1rem;line-height:1.6;color:rgba(254,248,232,.9)}
.book__call p b{color:var(--cream)}

.field{margin:0 0 1.05rem}
.field label,.legend{display:block;font-size:.9rem;font-weight:700;margin:0 0 .4rem;color:var(--cream)}
.field label .opt{font-weight:400;color:rgba(164,205,213,.85)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--teal);
  background:var(--cream);border:2px solid transparent;border-radius:12px;
  padding:.78rem .95rem;transition:border-color .16s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(2,43,56,.45)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field-row .field{margin-bottom:1.05rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;align-items:flex-start;gap:.65rem;margin:0 0 1.3rem;padding:.9rem 1rem;border:1px solid rgba(164,205,213,.3);border-radius:12px}
.consent input{margin-top:.25rem;width:18px;height:18px;flex:none;accent-color:var(--red)}
.consent b{display:block;font-size:.93rem;color:var(--cream);margin-bottom:.25rem}
.consent small{display:block;font-size:.73rem;line-height:1.5;color:rgba(164,205,213,.78)}
.formerr{margin:0 0 1rem;font-size:.95rem;font-weight:700;color:#FFB4B8}
.formerr:empty{display:none}
.book__foot{margin:1rem 0 0;font-size:.88rem;line-height:1.6;color:rgba(164,205,213,.82)}
.book__foot a{color:var(--cream)}
.thanks{display:none;background:var(--cream);color:var(--teal);border-radius:18px;padding:clamp(1.6rem,4vw,2.4rem)}
.thanks.is-on{display:block}
.thanks h3{font-family:var(--display);font-weight:700;font-style:oblique;text-transform:uppercase;font-size:1.5rem;margin:0 0 .7rem;color:var(--teal)}
.thanks p{margin:0 0 .8rem;line-height:1.65}
.thanks a{color:var(--red);font-weight:700}

@media (max-width:860px){
  .book__grid{grid-template-columns:1fr;gap:2.25rem}
}
@media (max-width:520px){
  .field-row{grid-template-columns:1fr;gap:0}
}