/* Ray's Auto Clinic. Colors are lifted from the shop itself: the navy bay
   walls, the sky blue on his business card, the red of the car in his logo
   and the yellow of the sign over the door. Fonts are self hosted because
   the Google Fonts stylesheet held first paint back and the swap moved the
   page (the rsw demo measured CLS 0.24 from it). */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/schibsted-grotesk.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree.woff2) format("woff2")}
@font-face{font-family:"SG Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold");size-adjust:101%;ascent-override:96%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:"Figtree Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:102%;ascent-override:93%;descent-override:24%;line-gap-override:0%}
:root{
  color-scheme:light;
  --navy:#0b2140;--navy-2:#13315c;--sky:#2a8fdc;--sky-d:#1769b0;--sky-l:#e6f2fc;
  --red:#e5432a;--red-d:#c2321c;--sun:#f5d11c;
  --ink:#121a26;--muted:#556171;--line:#dfe5ec;--paper:#fbfcfd;--mist:#f1f5f9;
  --r:14px;--shadow:0 1px 2px rgba(11,33,64,.06),0 10px 30px rgba(11,33,64,.09);
  --h:"Schibsted Grotesk","SG Fallback",system-ui,sans-serif;--b:"Figtree","Figtree Fallback",system-ui,sans-serif;
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17.5px/1.65 var(--b);padding-bottom:64px}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky-d);text-underline-offset:3px}
h1,h2,h3{font-family:var(--h);line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:850}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem);font-weight:800}
h3{font-size:1.25rem;font-weight:800}
p,li{text-wrap:pretty}
p{margin:0 0 1em}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.narrow{max-width:820px}
.muted{color:var(--muted)}.small{font-size:.92rem}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.eyebrow{font:800 .78rem/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:var(--red-d);margin:0 0 1em}
svg{flex:none}
button{font:inherit;cursor:pointer}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:13px 22px;font:750 1rem/1 var(--b);text-decoration:none;transition:background .15s,transform .15s;text-box:trim-both cap alphabetic}
.btn:active{transform:translateY(1px)}
.btn.big{padding:17px 26px;font-size:1.08rem}
.btn-call{background:var(--red);color:#fff}
.btn-call:hover{background:var(--red-d)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-ghost.dark{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn-ghost.dark:hover{background:var(--sky-l)}
.btn-go{background:var(--navy);color:#fff;width:100%;justify-content:center;padding:16px}
.btn-go:hover{background:var(--navy-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.center-row{justify-content:center}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(251,252,253,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);view-transition-name:hdr}
.hdr-in{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;font:600 1.18rem/1.05 var(--h);margin-right:auto}
.brand b{font-weight:900;color:var(--sky-d)}
.brand small{display:block;font:700 .7rem/1.4 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--navy);color:var(--sun);font:900 1.4rem/1 var(--h);box-shadow:inset 0 -4px 0 var(--red)}
.open{display:inline-flex;align-items:center;gap:8px;font:700 .86rem/1 var(--b);color:#1d6b3d;background:#e3f4ea;border-radius:999px;padding:8px 12px;min-width:150px}
.open::before{content:"";width:8px;height:8px;border-radius:50%;background:#28a35a;box-shadow:0 0 0 3px rgba(40,163,90,.22)}
.open.shut{color:#7a3a10;background:#fbeee3}
.open.shut::before{background:#d77a2a;box-shadow:0 0 0 3px rgba(215,122,42,.22)}
.hdr .open{display:none}
.hdr-call{padding:11px 18px}
.menu-btn{display:none;width:46px;height:46px;border:0;border-radius:10px;background:var(--mist);flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn span{width:20px;height:2px;background:var(--navy);border-radius:2px}
.svc-nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0 0 10px;overflow-x:auto;scrollbar-width:none}
.svc-nav a{display:block;white-space:nowrap;padding:7px 13px;border-radius:999px;text-decoration:none;color:var(--navy);font:650 .9rem/1 var(--b);background:var(--mist)}
.svc-nav a:hover,.svc-nav a[aria-current]{background:var(--navy);color:#fff}
@media (min-width:960px){.hdr .open:not([hidden]){display:inline-flex}}
@media (max-width:720px){
  .hdr-call{display:none}.menu-btn{display:flex}.svc-nav{display:none}
}

/* dialogs */
dialog{border:0;padding:0;color:var(--ink);opacity:0;translate:0 14px;transition:opacity .22s,translate .22s,display .22s allow-discrete,overlay .22s allow-discrete}
dialog[open]{opacity:1;translate:0}
@starting-style{dialog[open]{opacity:0;translate:0 14px}}
dialog::backdrop{background:rgba(6,16,32,.6);opacity:0;transition:opacity .22s,display .22s allow-discrete,overlay .22s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
.x{position:absolute;top:10px;right:10px;width:42px;height:42px;border:0;border-radius:50%;background:var(--mist);font-size:1.6rem;line-height:1;color:var(--navy)}
.drawer{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(360px,88vw);padding:70px 24px 24px;background:#fff;translate:30px 0}
.drawer[open]{translate:0}
@starting-style{.drawer[open]{translate:30px 0}}
.drawer ul{list-style:none;margin:0 0 24px;padding:0}
.drawer li a{display:block;padding:13px 0;border-bottom:1px solid var(--line);color:var(--navy);font:700 1.08rem/1.2 var(--h);text-decoration:none}
.ask{width:min(520px,94vw);max-height:92dvh;border-radius:20px;padding:30px 26px 24px;background:#fff;box-shadow:var(--shadow)}
.ask h2{font-size:1.6rem;padding-right:44px}
.ask form{display:grid;gap:12px;margin-top:14px}
.ask label{display:grid;gap:5px;font:700 .9rem/1.2 var(--b);color:var(--navy)}
.ask input,.ask select,.ask textarea{font:400 1rem/1.4 var(--b);padding:12px 14px;border:1.5px solid #c9d3de;border-radius:10px;background:#fff;color:var(--ink);width:100%}
.ask input:focus,.ask select:focus,.ask textarea:focus{border-color:var(--sky);outline:3px solid rgba(42,143,220,.25);outline-offset:0}
.ask textarea{field-sizing:content;min-block-size:3lh;max-block-size:10lh;resize:vertical}
.ask [aria-invalid=true]{border-color:var(--red)}
.hp{position:absolute;left:-9999px}
.form-msg{margin:0;font-weight:650;min-height:1.2em}
.form-msg.err{color:var(--red-d)}
.form-msg.ok{color:#1d6b3d}
.lb{background:transparent;max-width:96vw;max-height:94dvh}
.lb img{max-height:90dvh;width:auto;border-radius:12px}
.lb .x{background:#fff}

/* hero: the bottom edge is cut like the line of a roll up bay door */
.hero{position:relative;isolation:isolate;color:#fff;min-height:min(86vh,760px);display:flex;align-items:flex-end;padding:140px 0 110px;background:var(--navy)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,33,64,.25) 0%,rgba(11,33,64,.55) 45%,rgba(8,22,44,.94) 100%)}
@supports (clip-path:shape(from 0 0,line to 1px 0)){
  .hero{clip-path:shape(from 0 0,line to 100% 0,line to 100% calc(100% - 46px),line to 62% calc(100% - 46px),line to 58% 100%,line to 0 100%,close)}
}
.hero-in{max-width:1200px}
.hero h1{max-width:15ch;margin-top:18px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-p{font-size:clamp(1.08rem,1.8vw,1.28rem);max-width:56ch;color:#e8eef6}
.hero-meta{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:#cfe2f5;font-weight:600}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--navy);font:600 .92rem/1 var(--b);text-decoration:none;box-shadow:var(--shadow)}
.chip b{font-weight:900}
.stars{display:inline-flex;color:#f2a516}
.stars svg{width:17px;height:17px}
.stars .half{display:inline-flex;width:11px;overflow:hidden}
.hero-svc{min-height:min(64vh,560px)}
.crumbs{font:600 .9rem/1 var(--b);color:#cfe2f5}
.crumbs a{color:#fff}

/* what Ray fixes */
.work{display:grid;gap:40px;padding:90px 0 70px;align-items:start}
@media (min-width:900px){.work{grid-template-columns:1fr 1.05fr;gap:64px}}
@media (min-width:900px){.work-photo{position:sticky;top:130px}}
.work-photo img{border-radius:var(--r);box-shadow:var(--shadow);aspect-ratio:4/3.4;object-fit:cover;width:100%}
.cap{font-size:.9rem;color:var(--muted);margin-top:10px}
.svc{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--navy)}
.svc a{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .15s,padding .15s}
.svc a:hover{background:var(--sky-l);padding-inline:14px}
.svc .svc-name{font:800 1.28rem/1.15 var(--h);color:var(--navy)}
.svc .svc-q{grid-column:1;font-size:.95rem;color:var(--muted)}
.svc .svc-q i{font-style:normal;font-weight:700;color:var(--sky-d)}
.svc svg{grid-row:1/span 2;grid-column:2;color:var(--red)}
.svc-compact a{grid-template-columns:1fr auto}
.svc-compact svg{grid-row:auto}

/* reviews */
.reviews{background:var(--navy);color:#fff;padding:90px 0;position:relative}
.reviews .eyebrow{color:var(--sun)}
.reviews h2{max-width:24ch}
.reviews .muted{color:#b9cbe0}
.reviews .muted a{color:#fff}
.wall{columns:300px 3;column-gap:18px;margin-top:34px}
.rev{break-inside:avoid;margin:0 0 18px;background:#fff;color:var(--ink);border-radius:var(--r);padding:20px 20px 18px}
.rev blockquote{margin:10px 0 12px}
.rev blockquote p{margin:0;font-size:1rem}
.rev figcaption{display:grid;font-size:.9rem;border-top:1px solid var(--line);padding-top:10px}
.rev figcaption span{color:var(--muted)}

/* shop gallery */
.shop{padding:90px 0 40px}
.bento{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:26px}
.bento button{padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--mist);display:block}
.bento img{width:100%;height:100%;object-fit:cover;transition:scale .4s}
.bento button:hover img{scale:1.04}
.b1{grid-row:span 2}.b2{grid-column:span 2;aspect-ratio:16/10}
.b3,.b4,.b5{aspect-ratio:3/4}
@media (min-width:900px){
  .bento{grid-template-columns:1.1fr 1.5fr .8fr .8fr;grid-template-rows:260px 260px}
  .b1{grid-row:1/3;grid-column:1}.b2{grid-column:2;grid-row:1/3;aspect-ratio:auto}
  .b3{grid-column:3;grid-row:1/3;aspect-ratio:auto}.b4{grid-column:4;grid-row:1;aspect-ratio:auto}.b5{grid-column:4;grid-row:2;aspect-ratio:auto}
}
.how{max-width:760px;margin:40px 0 0;padding:26px 28px;border-left:5px solid var(--sun);background:var(--mist);border-radius:0 var(--r) var(--r) 0}
.how p{margin:0;font-size:1.08rem}

/* visit */
.visit{padding:70px 0}
.visit-in{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.visit-in{grid-template-columns:1.1fr 1fr;gap:60px}}
.visit-photo img{border-radius:var(--r);box-shadow:var(--shadow)}
.hrs{border-collapse:collapse;width:100%;max-width:380px;margin:8px 0 10px}
.hrs th,.hrs td{text-align:left;padding:7px 0;border-bottom:1px solid var(--line);font-weight:500}
.hrs th{font-weight:700;width:46%}
.hrs tr.today th,.hrs tr.today td{color:var(--red-d);font-weight:800}
.open-line{margin:0 0 6px}

/* FAQ: one open at a time, animated where the browser can */
.faq{padding:60px 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font:750 1.12rem/1.3 var(--h);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font:400 1.8rem/1 var(--b);color:var(--red);transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s,content-visibility .3s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{margin:0 0 20px;color:#2c3746}

/* service pages */
.svc-body{display:grid;gap:40px;padding:80px 0 30px}
@media (min-width:900px){.svc-body{grid-template-columns:1.4fr 1fr;gap:64px}}
.prose h2{font-size:1.6rem;margin-top:1.2em}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1.08rem}
.svc-side{display:grid;gap:16px;align-content:start}
.svc-side .chip{justify-self:start;background:var(--mist);box-shadow:none}
.rev-side{background:var(--mist);margin:0}
.more{padding:30px 0 20px}
.page{padding:70px 0}

/* closing call */
.close{text-align:center;padding:80px 0 90px}
.close h2{font-size:clamp(2rem,4vw,3rem)}
.close p{color:var(--muted);font-size:1.1rem}

/* footer + phone bar */
.ftr{background:#071629;color:#c4d2e3;padding:56px 0 24px;font-size:.95rem}
.ftr a{color:#fff;text-decoration:none}
.ftr-grid{display:grid;gap:30px}
@media (min-width:800px){.ftr-grid{grid-template-columns:1.2fr 1fr 1fr}}
.ftr-name{font:850 1.3rem/1.2 var(--h);color:#fff}
.ftr-h{font:800 .78rem/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ftr .hrs th,.ftr .hrs td{border-color:rgba(255,255,255,.1);padding:4px 0}
.ftr .hrs tr.today th,.ftr .hrs tr.today td{color:var(--sun)}
.ftr-base{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:18px;font-size:.85rem}
.bar{position:fixed;inset:auto 0 0 0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);background:var(--navy);box-shadow:0 -6px 24px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom)}
.bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;color:#fff;text-decoration:none;font:750 1rem/1 var(--b)}
.bar a:first-child{background:var(--red)}
@media (min-width:1040px){.bar{display:none}body{padding-bottom:0}}

@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media (max-width:600px){
  body{font-size:17px}
  .hero{padding:110px 0 90px;min-height:auto}
  .cta-row .btn{flex:1 1 100%;justify-content:center}
}