@font-face{font-family:'Archivo';src:url(fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Public Sans';src:url(fonts/publicsans.woff2) format('woff2');font-weight:100 900;font-display:swap}
@property --sun{syntax:'<number>';inherits:true;initial-value:-1}

:root{
  /* from the building: stucco walls, slate sign letters, red stripe in the bays */
  --stucco:#E8C4AC;
  --stucco-deep:#D7AD92;
  --slate:#465160;
  --slate-dark:#2F3742;
  --ink:#232A33;
  --red:#C3262B;
  --red-ink:#A31F24;
  --bay:#DCE3EA;
  --paper:#FBF6F1;
  --white:#fff;

  --display:'Archivo',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;

  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:clamp(1.45rem,2.4vw,1.8rem);
  --step-3:clamp(1.9rem,3.6vw,2.7rem);
  --gutter:clamp(16px,4vw,48px);
  --max:1180px;
  --radius:6px;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 var(--step-0)/1.6 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);line-height:1.1;font-weight:800;text-wrap:balance}
h2{font-size:var(--step-3);font-stretch:108%;letter-spacing:-.005em}
h3{font-size:var(--step-1);font-stretch:100%}
p{max-width:64ch}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* buttons */
.btn{display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:var(--radius);background:var(--red);color:var(--white);font:700 1.05rem/1 var(--body);text-decoration:none;border:0;cursor:pointer;transition:background-color .15s ease,transform .1s ease}
.btn:hover{background:var(--red-ink)}
.btn:active{transform:scale(.98)}
.tel{font-weight:700;font-size:1.15rem;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px;white-space:nowrap}
.tel:hover{color:var(--red-ink)}

/* nav */
.top{position:sticky;top:0;z-index:10;background:rgba(251,246,241,.94);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid rgba(70,81,96,.14)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:64px}
.brand{font:800 1.05rem/1.1 var(--display);font-stretch:112%;text-decoration:none;color:var(--slate-dark);margin-right:auto}
.top nav{display:flex;gap:24px;font-weight:600;font-size:.98rem}
.top nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--slate)}
.top .tel{font-size:1rem}
.top .btn{min-height:42px;padding:0 18px;font-size:.95rem}
@media (max-width:900px){.top nav{display:none}}
@media (max-width:560px){.top .btn{display:none}.top .tel{display:inline}.top .wrap{gap:12px}.brand{font-size:.98rem}}

/* hero: the building sign */
.hero{background-color:var(--stucco);background-image:radial-gradient(rgba(120,70,40,.07) 1px,transparent 1.4px),radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.6px);background-size:5px 5px,7px 7px;--sun:-1;animation:sun 3s cubic-bezier(.2,.7,.2,1) .15s forwards}
@keyframes sun{to{--sun:1}}
.sign{padding:clamp(32px,4.4vw,56px) var(--gutter) 0;text-align:center}
.sign .letters{display:block;font:900 clamp(2.5rem,7.4vw,6.6rem)/.92 var(--display);font-stretch:118%;letter-spacing:.005em;color:var(--slate);
  text-shadow:calc(var(--sun)*1px) 1px 0 #3d4653,calc(var(--sun)*2px) 2px 0 #37404c,calc(var(--sun)*3px) 3px 0 #313944,calc(var(--sun)*16px) 18px 16px rgba(110,62,30,.32)}
.sign .sub{display:block;margin-top:clamp(12px,1.6vw,20px);font:600 clamp(1rem,1.6vw,1.2rem)/1.3 var(--body);color:var(--ink)}
.band{position:relative;margin-top:clamp(24px,3vw,40px)}
.band::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:var(--red);z-index:1}
.band img{width:100%;height:clamp(300px,40vw,560px);object-fit:cover;object-position:50% 70%}

.lede{position:relative;z-index:2;margin:-104px auto 0;width:min(900px,calc(100% - 2*var(--gutter)));background:var(--paper);border-radius:var(--radius);padding:clamp(24px,3.4vw,40px);box-shadow:0 24px 50px -28px rgba(60,30,10,.45);display:grid;gap:20px}
.lede h1{font-size:clamp(1.65rem,3.4vw,2.5rem);font-stretch:104%;max-width:22ch;color:var(--slate-dark)}
.lede p{color:#3b434d}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.status{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#3b434d}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:#9AA3AD}
.status.open::before{background:#1F9D4C;box-shadow:0 0 0 4px rgba(31,157,76,.16)}

/* services */
.services{padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,88px)}
.services .head{display:grid;gap:14px;margin-bottom:40px}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.svc h3{padding-bottom:12px;border-bottom:3px solid var(--slate);margin-bottom:14px}
.svc ul{list-style:none;padding:0;display:grid;gap:9px}
.svc li{padding-left:18px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;background:var(--red);border-radius:1px}
.note{margin-top:36px;padding:18px 22px;background:var(--bay);border-left:6px solid var(--slate);border-radius:0 var(--radius) var(--radius) 0;max-width:none}
@media (max-width:820px){.svc{grid-template-columns:1fr}}

/* bays: what comes through the doors */
.bays{background:var(--slate-dark);color:#EEF1F4;padding:clamp(64px,8vw,104px) 0}
.bays .head{display:grid;gap:12px;margin-bottom:32px}
.bays .head p{color:#C9D1DA}
.strip{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:10px}
.strip figure{position:relative;overflow:hidden;border-radius:4px;background:#1c2229}
.strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:saturate(.92) contrast(1.04)}
.strip figure:first-child{grid-row:span 2}
.strip figure:first-child img{aspect-ratio:auto;min-height:100%}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;font-size:.92rem;font-weight:600;background:linear-gradient(transparent,rgba(15,18,22,.85))}
@media (max-width:820px){.strip{grid-template-columns:1fr 1fr}.strip figure:first-child{grid-column:span 2;grid-row:auto}.strip figure:first-child img{aspect-ratio:4/3}}

/* reviews */
.reviews{padding:clamp(72px,9vw,120px) 0}
.reviews .top-line{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px}
.score{display:flex;align-items:baseline;gap:14px}
.score b{font:900 clamp(3.4rem,7vw,5rem)/1 var(--display);font-stretch:112%;color:var(--slate-dark)}
.score span{font-weight:600;color:#4a525c}
.quotes{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.quotes blockquote{margin:0}
.quotes .big p{font:600 clamp(1.35rem,2.4vw,1.75rem)/1.35 var(--display);font-stretch:100%;color:var(--slate-dark);max-width:30ch}
.quotes .small{display:grid;gap:28px}
.quotes .small p{font-size:1.08rem}
.quotes cite{display:block;margin-top:12px;font-style:normal;font-weight:600;color:#4a525c;font-size:.95rem}
@media (max-width:820px){.quotes{grid-template-columns:1fr}}

/* family */
.family{background:var(--stucco);padding:clamp(72px,9vw,120px) 0}
.family .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.family .photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.family .photos img{border-radius:4px;width:100%;object-fit:cover;aspect-ratio:4/5}
.family .photos img:first-child{grid-column:span 2;aspect-ratio:3/2;object-position:50% 30%}
.family .text{display:grid;gap:18px}
.motto{font:800 clamp(1.4rem,2.6vw,1.9rem)/1.2 var(--display);font-stretch:108%;color:var(--slate);padding-top:18px;border-top:3px solid var(--slate)}
@media (max-width:820px){.family .grid{grid-template-columns:1fr}}

/* equipment */
.gear{padding:clamp(64px,8vw,100px) 0}
.gear .grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,5vw,64px);align-items:start}
.gear dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.gear dt,.gear dd{padding:13px 0;border-bottom:1px solid rgba(70,81,96,.2)}
.gear dt{font-weight:700;padding-right:24px}
.gear dd{margin:0;color:#3b434d}
@media (max-width:820px){.gear .grid{grid-template-columns:1fr}.gear dl{grid-template-columns:1fr}.gear dt{border:0;padding-bottom:0}}

/* book + visit */
.book{background:var(--slate-dark);color:#EEF1F4;padding:clamp(72px,9vw,120px) 0}
.book .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.book h2{color:#fff}
.book .intro{color:#C9D1DA;margin:14px 0 28px}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:span 2}
label{display:grid;gap:7px;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:2px solid transparent;border-radius:var(--radius);padding:12px 14px;min-height:50px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red)}
textarea{min-height:110px;resize:vertical}
form .btn{justify-self:start}
.visit{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:clamp(22px,3vw,32px);display:grid;gap:22px}
.visit h3{font-size:1.3rem}
.visit address{font-style:normal;font-size:1.1rem;line-height:1.5}
.visit .map{font-weight:600}
.hours{width:100%;border-collapse:collapse}
.hours td{padding:8px 0;border-bottom:1px solid rgba(70,81,96,.18)}
.hours td:last-child{text-align:right;font-weight:600}
.hours tr.today td{color:var(--red-ink);font-weight:700}
.visit .contact{display:grid;gap:8px}
.visit .contact a{font-weight:600}
@media (max-width:900px){.book .grid{grid-template-columns:1fr}}
@media (max-width:560px){form{grid-template-columns:1fr}form .full{grid-column:auto}}

footer{background:#1f252c;color:#AEB7C1;padding:36px 0;font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
footer a{color:#DCE3EA}

/* mobile call bar */
.callbar{display:none}
@media (max-width:560px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(251,246,241,.97);border-top:1px solid rgba(70,81,96,.18)}
  .callbar a{min-height:48px;font-size:1rem}
  .callbar .ghost{background:var(--white);color:var(--slate-dark);border:2px solid var(--slate)}
  body{padding-bottom:76px}
  .lede{margin-top:-64px}
}

@media (prefers-reduced-motion:reduce){
  .hero{animation:none;--sun:.6}
  html{scroll-behavior:auto}
}

/* desktop: keep the headline and Book service on the first screen */
@media (min-width:900px){
  .lede{margin-top:-150px}
  .band img{height:max(340px,min(40vw,calc(100svh - 420px)));object-position:50% 78%}
}