/* Petro Auto Care — "The Sign on Jamacha Rd" */
:root{
  --red:#d91d24; --red-hover:#b8161c; --red-on-dark:#ff5056;
  --black:#0c0c0d; --ink:#141416; --line-dark:#2a2a2d;
  --steel:#c7c9cd; --steel-dim:#8d9096;
  --paper:#f2f0eb; --paper-line:#d6d2c8; --paper-ink:#141416; --paper-muted:#55524c;
  --white:#fff;
  --display:"Anybody",system-ui,sans-serif;
  --text:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(20px,4vw,56px);
  --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--steel);font:400 17px/1.6 var(--text);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--red-on-dark);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:10px 14px;z-index:100}
.skip:focus{left:10px;top:10px}
h1,h2,h3{font-family:var(--display);color:var(--white);font-weight:850;font-stretch:125%;line-height:.98;letter-spacing:-.01em}
.red{color:var(--red-on-dark)}
.kicker{font:500 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.kicker--red{color:var(--red-on-dark)}

/* buttons: square, no glow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font:600 1rem/1 var(--text);text-decoration:none;border:2px solid transparent;border-radius:2px;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn--lg{min-height:56px;padding:0 28px;font-size:1.05rem}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-hover)}
.btn--line{border-color:rgba(255,255,255,.7);color:#fff}
.btn--line:hover{background:#fff;color:var(--black)}
.textlink{color:var(--steel);font-weight:500;text-underline-offset:4px}
.textlink:hover{color:#fff}

/* masthead — white, like the shop's current header */
.masthead{position:sticky;top:0;z-index:50;background:#fff;border-bottom:4px solid var(--red)}
.masthead__in{max-width:var(--max);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:32px}
.masthead__logo img{height:62px;width:auto}
.masthead__nav{display:flex;gap:26px;margin-left:auto}
.masthead__nav a{color:#1b1b1d;text-decoration:none;font-weight:600;font-size:.95rem}
.masthead__nav a:hover{color:var(--red)}
.masthead__phone{display:flex;flex-direction:column;text-decoration:none;color:#111;font:600 1.05rem/1.15 var(--mono);white-space:nowrap}
.masthead__phone span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#77777c;font-weight:500}

/* hero */
.hero{position:relative;min-height:min(86vh,820px);display:grid;grid-template-rows:1fr auto;color:#fff;isolation:isolate;overflow:hidden;background:#000}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 45%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,9,.92) 0%,rgba(8,8,9,.74) 34%,rgba(8,8,9,.18) 64%,rgba(8,8,9,0) 82%),linear-gradient(0deg,rgba(8,8,9,.85) 0%,rgba(8,8,9,0) 42%)}
.hero__copy{align-self:end;max-width:var(--max);width:100%;margin:0 auto;padding:120px var(--gutter) 56px}
.hero h1{font-size:clamp(3rem,7.4vw,6.6rem);max-width:9.5em;margin:18px 0 26px}
.hero__lede{max-width:34em;font-size:1.12rem;color:#e7e7e9}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
/* the red plate rail */
.plate{background:var(--red);color:#fff;display:grid;grid-template-columns:1fr 1.25fr 1.1fr 1.15fr;max-width:var(--max);width:100%;margin:0 auto}
.plate>div{padding:20px 24px;border-left:1px solid rgba(255,255,255,.28)}
.plate>div:first-child{border-left:0}
.plate dt{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.82;margin-bottom:8px}
.plate dd{font:600 1.02rem/1.3 var(--mono)}
.plate a{text-decoration:none}
.plate a:hover{text-decoration:underline;text-underline-offset:3px}
.stars{color:#ffd166;letter-spacing:1px;margin-right:4px}

/* converter theft */
.theft{max-width:var(--max);margin:0 auto;padding:140px var(--gutter) 120px;display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:center}
.theft h2{font-size:clamp(2.4rem,4.8vw,4.3rem);margin:18px 0 28px;max-width:8.5em}
.theft__answer{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;color:#f1f1f2;max-width:30em}
.theft__answer strong{color:#fff;font-weight:600;box-shadow:inset 0 -.35em 0 rgba(217,29,36,.55)}
.theft__facts{list-style:none;margin:40px 0;border-top:1px solid var(--line-dark)}
.theft__facts li{padding:16px 0 16px 20px;position:relative;border-bottom:1px solid var(--line-dark);color:#fff;font-weight:500}
.theft__facts li::before{content:"";position:absolute;left:0;top:50%;width:8px;height:2px;background:var(--red-on-dark)}
.theft__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}
.theft__photo{margin:0;position:relative}
.theft__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 55%}
.theft__photo::before{content:"";position:absolute;left:-18px;top:28px;bottom:-18px;width:6px;background:var(--red)}
.theft__photo figcaption{font:400 .8rem var(--mono);color:var(--steel-dim);margin-top:12px}

/* services index on paper */
.index{background:var(--paper);color:var(--paper-ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 300px;grid-template-areas:"head head photo" "groups groups photo";column-gap:clamp(28px,4vw,64px);padding:110px max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)))}
.index__head{grid-area:head;max-width:760px;margin-bottom:56px}
.index h2{color:var(--paper-ink);font-size:clamp(1.9rem,3.4vw,2.9rem);margin:0 0 20px;max-width:13em}
.index__note{color:var(--paper-muted);font-size:1.05rem}
.index__note a{color:var(--paper-ink);font-weight:600;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.index__groups{grid-area:groups;display:grid;grid-template-columns:1fr 1fr;gap:44px clamp(28px,4vw,64px)}
.group h3{color:var(--red);font:600 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;font-stretch:100%;padding-bottom:14px;border-bottom:2px solid var(--paper-ink)}
.group ul{list-style:none}
.group li{font:600 1.2rem/1.3 var(--text);padding:13px 0;border-bottom:1px solid var(--paper-line)}
.group li a{text-decoration:none}
.group li a:hover{color:var(--red)}
.group--special li:first-child a{color:var(--red)}
.group--special li:first-child a::after{content:" \2192"}
.index__photo{grid-area:photo;margin:0;align-self:stretch;position:relative;min-height:420px}
.index__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* family */
.family{display:grid;grid-template-columns:62fr 38fr;align-items:stretch;background:var(--ink)}
.family__photo{margin:0;min-height:560px}
.family__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.family__text{padding:80px clamp(24px,5vw,72px) 72px;align-self:center}
.family h2{font-size:clamp(2rem,3.6vw,3.1rem);margin:0 0 22px}
.family__text>p{color:#dcdcdf}
.creds{list-style:none;margin:30px 0;border-top:1px solid var(--line-dark)}
.creds li{font:600 1.05rem/1 var(--display);font-stretch:118%;color:#fff;padding:15px 0;border-bottom:1px solid var(--line-dark);letter-spacing:.01em}
.proof{font-size:.95rem;color:var(--steel)}
.proof a{color:#fff;text-underline-offset:4px;text-decoration-color:var(--red)}
.proof strong{font-weight:600}

/* visit */
.visit{max-width:var(--max);margin:0 auto;padding:130px var(--gutter) 110px;display:grid;grid-template-columns:5fr 7fr;gap:0 clamp(32px,5vw,80px)}
.visit h2{font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:38px}
.ticket{border-top:2px solid #fff}
.ticket>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-dark)}
.ticket dt{font:500 .72rem/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim)}
.ticket dd{font:500 1.1rem/1.45 var(--mono);color:#fff}
.ticket dd a{text-decoration:none}
.ticket dd a:hover{color:var(--red-on-dark)}
.hours{border-collapse:collapse;width:100%;font:500 1rem/1.5 var(--mono)}
.hours th{text-align:left;font-weight:500;color:#fff;padding:0 16px 4px 0;white-space:nowrap}
.hours td{color:var(--steel);padding-bottom:4px}
.visit__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.visit__msg{margin-top:18px;font-size:.92rem;color:var(--steel-dim)}
.visit__msg a{color:var(--steel)}
.visit__map{position:relative;min-height:520px;background:#1c1c1f}
.visit__maplink{position:absolute;right:0;bottom:-34px;font:500 .85rem var(--mono);color:var(--steel);text-underline-offset:4px}
.visit__maplink:hover{color:#fff}
.visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
.visit__areas{grid-column:1/-1;margin-top:48px;padding-top:22px;border-top:1px solid var(--line-dark);color:var(--steel);font-size:1.05rem}
.visit__areas span{font:500 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-on-dark);margin-right:10px}

/* footer */
.foot{background:#000;border-top:6px solid transparent;border-image:repeating-linear-gradient(90deg,#fff 0 6px,#000 6px 12px) 6;padding:56px var(--gutter) 40px}
.foot__in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:20px 48px;align-items:center}
.foot__logo{background:#fff;padding:10px 14px;height:76px;width:auto;grid-row:span 2}
.foot__line{color:#fff;font-weight:500}
.foot__links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;font:500 .9rem var(--mono)}
.foot__links a{color:var(--steel);text-underline-offset:4px}
.foot__links a:hover{color:#fff}
.foot__small{grid-column:1/-1;margin-top:24px;padding-top:18px;border-top:1px solid var(--line-dark);font:400 .8rem var(--mono);color:var(--steel-dim)}

/* mobile call bar */
.callbar{display:none}

@media (max-width:1100px){
  .masthead__nav{display:none}
  .masthead__phone{margin-left:auto}
  .plate{grid-template-columns:1fr 1fr}
  .plate>div:nth-child(3){border-left:0}
  .plate>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.28)}
  .index{grid-template-columns:1fr 1fr;grid-template-areas:"head head" "groups groups"}
  .index__photo{display:none}
}
@media (max-width:900px){
  .theft{grid-template-columns:1fr;padding-top:96px;padding-bottom:88px}
  .theft__photo{max-width:520px}
  .family{grid-template-columns:1fr}
  .family__photo{min-height:0}
  .family__photo img{aspect-ratio:4/3;height:auto}
  .visit{grid-template-columns:1fr}
  .visit__map{min-height:360px;margin-top:40px;margin-bottom:34px}
}
@media (max-width:640px){
  body{font-size:16px;padding-bottom:68px}
  .masthead__in{gap:12px;padding:8px 16px}
  .masthead__logo img{height:46px}
  .masthead__book{display:none}
  .masthead__phone{font-size:.95rem}
  .hero{min-height:0}
  .hero__img{position:relative;height:300px;object-position:60% 40%;z-index:0}
  .hero::before{display:none}
  .hero{display:block;background:var(--black)}
  .hero__copy{padding:30px 18px 36px}
  .hero h1{font-size:2.65rem;margin:14px 0 18px}
  .hero__actions .btn{flex:1 1 100%}
  .plate{grid-template-columns:1fr}
  .plate>div,.plate>div:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.28);padding:14px 18px;display:grid;grid-template-columns:84px 1fr;align-items:baseline}
  .plate>div:first-child{border-top:0}
  .plate dt{margin:0}
  .plate>div{grid-template-columns:68px 1fr}
  .plate dd{font-size:.95rem}
  .hero .kicker{font-size:.7rem;letter-spacing:.09em}
  .hero__img{height:320px}
  .theft{padding:72px 18px 64px}
  .theft h2{font-size:2.5rem}
  .theft__photo::before{left:-10px;width:4px}
  .theft__actions .btn{width:100%}
  .index{padding:72px 18px;grid-template-columns:1fr;grid-template-areas:"head" "groups"}
  .index__head{margin-bottom:34px}
  .index__groups{grid-template-columns:1fr;gap:34px}
  .group li{font-size:1.08rem;padding:11px 0}
  .family__text{padding:48px 18px 56px}
  .visit{padding:76px 18px 64px}
  .ticket>div{grid-template-columns:80px 1fr;gap:10px}
  .ticket dd{font-size:1rem}
  .hours{font-size:.92rem}
  .visit__actions .btn{flex:1 1 100%}
  .foot{padding:44px 18px 32px}
  .foot__in{grid-template-columns:1fr}
  .foot__logo{grid-row:auto;height:64px}
  .callbar{display:grid;grid-template-columns:2fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;border-top:1px solid #000}
  .callbar a{display:flex;align-items:center;justify-content:center;min-height:60px;font:600 1rem var(--text);text-decoration:none;padding-bottom:env(safe-area-inset-bottom)}
  .callbar__call{background:var(--red);color:#fff}
  .callbar__book{background:#fff;color:#111}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}