/* SG Autoworks: machined aluminum, graphite, anodized teal, gold hardware */
:root{
  --alu:#e7e9ec; --alu-2:#d5d9de; --graph:#1b1f24; --graph-2:#2a3038; --steel:#4b535c; --teal:#0b6b80; --teal-d:#08515f; --gold:#c9a227;
  --c-primary:#0b6b80; --c-primary-dark:#08515f; --c-accent:#c9a227; --c-ink:#1b1f24; --c-muted:#4b535c; --c-bg:#e7e9ec; --c-border:#b9bfc6;
  --f-head:"Michroma",system-ui,sans-serif; --f-body:"Onest",system-ui,sans-serif; --fw-head:400; --nav-h:62px;
}
body{background:var(--alu);color:var(--graph);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 4px)}
h1,h2,h3{font-family:var(--f-head);font-weight:400;letter-spacing:.01em;line-height:1.2}
a{color:var(--teal-d)} a:hover{color:var(--graph)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.fine{font-size:.84rem;color:var(--steel)}
.photo-note{font-size:.78rem;color:var(--steel)}

.topline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--graph);color:#cfd4da;font-size:.8rem;padding:6px 18px}
.topline a{color:var(--gold);font-weight:700}
.topline-r{font-weight:600}

.hdr{position:sticky;top:0;z-index:100;background:var(--alu);border-bottom:3px solid var(--graph)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);max-width:1220px;margin:0 auto;padding:0 18px}
.hdr-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--graph);font-family:var(--f-head);font-size:1rem}
.hdr-logo svg{width:38px;height:38px}
.hdr-links{display:none;list-style:none;margin:0;padding:0;gap:0}
.hdr-links a{display:block;padding:8px 16px;text-decoration:none;color:var(--graph);font-weight:700;font-size:.9rem;border-left:1px solid var(--c-border);text-transform:uppercase;letter-spacing:.06em}
.hdr-links li:last-child a{border-right:1px solid var(--c-border)}
.hdr-links a:hover{background:var(--graph);color:var(--alu)}
.nav-toggle{background:var(--graph);border:0;border-radius:4px}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{background:#fff}
.mobile-menu{background:var(--alu);position:absolute;inset:auto 0 auto 0;top:100%}
.mobile-menu a:not(.btn-cut){color:var(--graph);font-family:var(--f-head);font-weight:400;font-size:1.05rem}
@media(min-width:960px){.hdr-links{display:flex}.nav-toggle,.mobile-menu{display:none}}

/* buttons: chamfered corners (machined cut) */
.btn-cut{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 24px;background:var(--teal);color:#fff;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn-cut:hover{background:var(--teal-d);color:#fff}
.btn-cut--ghost{background:var(--graph)}
.btn-cut--ghost:hover{background:#000}

/* hero: text left, photo cropped in a circle-ish lip frame right */
.sg-hero{max-width:1220px;margin:0 auto;padding:46px 18px 60px;display:grid;gap:30px;align-items:center}
.hero-loc{font-family:var(--f-head);font-size:.78rem;color:var(--teal-d);margin-bottom:14px}
.sg-hero h1{font-size:clamp(1.7rem,4.4vw,3.1rem);margin-bottom:18px}
.hero-lead{font-size:1.1rem;color:var(--steel);max-width:52ch}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.sg-hero .hero-photo{margin:0;position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--graph);border:14px solid var(--alu-2);box-shadow:inset 0 0 0 4px var(--steel),0 0 0 4px var(--graph);max-width:520px;justify-self:center;width:100%}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo .photo-note{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);background:rgba(231,233,236,.92);padding:2px 8px;white-space:nowrap;margin:0}
@media(min-width:900px){.sg-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding-top:70px}}

/* anatomy */
.anatomy{background:var(--graph);color:#eef0f3;padding:70px 18px;display:grid;gap:26px;align-items:center}
.anatomy>*{max-width:600px;margin:0 auto;width:100%}
.anat-text h2{font-size:clamp(1.5rem,3.4vw,2.3rem);color:#fff}
.anat-text p{color:#c4c9cf}
.explode-label{display:block;font-weight:700;margin:18px 0 8px;color:var(--gold)}
#explode{width:100%;accent-color:var(--gold);height:30px}
.explode-state{font-family:var(--f-head);font-size:.8rem;color:#fff}
.anat-stage{background:radial-gradient(circle at 50% 50%,#2f363f,#1b1f24 70%);border:1px solid var(--graph-2);min-width:0}
.wheel-svg{width:100%;height:auto;overflow:visible}
.layer{transition:transform .2s ease-out}
.lbl{font-family:"Michroma",sans-serif;font-size:13px;fill:var(--gold);opacity:0;transition:opacity .25s}
.layer.show-label .lbl{opacity:1}
@media(min-width:960px){.anatomy{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);padding:90px max(18px,calc((100vw - 1220px)/2))}.anatomy>*{max-width:none}}

/* build sheet */
.work{max-width:1220px;margin:0 auto;padding:80px 18px}
.work h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
.work-lead{max-width:60ch;color:var(--steel)}
.sheet{display:grid;gap:0;border:2px solid var(--graph);background:#f4f5f7;margin:24px 0 12px}
.sheet-col{border:0;margin:0;padding:18px 20px;border-bottom:1px solid var(--c-border);min-width:0}
.sheet-col legend{font-family:var(--f-head);font-size:.85rem;background:var(--graph);color:#fff;padding:5px 10px;float:left;width:100%;margin-bottom:12px}
.sheet-col label{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--c-border);cursor:pointer;clear:both}
.sheet-col label:last-child{border-bottom:0}
.sheet-col input{width:20px;height:20px;accent-color:var(--teal);flex:none;margin-top:2px}
@media(min-width:900px){.sheet{grid-template-columns:repeat(3,minmax(0,1fr))}.sheet-col{border-bottom:0;border-right:1px solid var(--c-border)}.sheet-col:last-child{border-right:0}}

/* gallery band: 4 tall slots like wheel spokes */
.gallery-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:3px;background:var(--graph)}
.gallery-band button{padding:0;border:0;background:var(--graph-2);cursor:zoom-in;height:clamp(200px,34vw,420px);overflow:hidden}
.gallery-band img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-band button:hover img{transform:scale(1.04)}
.band-note{position:absolute;left:10px;bottom:6px;margin:0;background:rgba(231,233,236,.92);padding:2px 8px}
@media(min-width:900px){.gallery-band{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* chris */
.chris{padding:84px 18px}
.chris-grid{max-width:1220px;margin:0 auto;display:grid;gap:30px}
.chris-intro h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.chris-intro p{color:var(--steel);max-width:44ch}
.chris-quotes{display:grid;gap:16px}
.chris-quotes blockquote{margin:0;background:#f7f8f9;border:1px solid var(--c-border);border-top:4px solid var(--gold);padding:18px 20px}
.chris-quotes p{margin:0 0 8px;font-size:1.05rem}
.chris-quotes cite{font-style:normal;font-size:.82rem;color:var(--steel);font-weight:700}
@media(min-width:900px){.chris-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}.chris-quotes{grid-template-columns:1fr 1fr}.chris-quotes blockquote:first-child{grid-column:1/-1}.chris-quotes .fine{grid-column:1/-1}}

/* shop */
.shop{background:var(--alu-2);padding:70px 18px;border-top:3px solid var(--graph)}
.shop-grid{max-width:1220px;margin:0 auto;display:grid;gap:24px}
.shop-map{min-height:320px;background:var(--alu);border:3px solid var(--graph)}
.shop-map iframe{width:100%;height:100%;min-height:320px;border:0;filter:grayscale(.6)}
.shop-info h2{font-size:clamp(1.6rem,3.6vw,2.3rem)}
.shop-addr{font-size:1.2rem;font-weight:700}
.gauge-hours{border:2px solid var(--graph);background:#f4f5f7;padding:6px 14px;margin:14px 0 6px;max-width:400px}
.gauge-hours p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:8px 0;border-bottom:1px solid var(--c-border)}
.gauge-hours p:last-child{border-bottom:0}
.shop-phone{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.shop-phone a{font-family:var(--f-head);font-size:1.5rem;color:var(--teal-d);text-decoration:none}
.shop-phone span{font-size:.85rem;color:var(--steel)}
@media(min-width:900px){.shop-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}

/* quote */
.quote{max-width:900px;margin:0 auto;padding:80px 18px}
.quote h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.q-form{display:grid;gap:14px}
.q-form label{display:block;font-weight:700;margin-bottom:4px;font-size:.92rem}
.q-form input,.q-form textarea{width:100%;background:#fff;border:2px solid var(--graph);padding:12px;border-radius:0}
.q-form input:focus,.q-form textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(11,107,128,.25)}
.field-error{color:#a01818;font-size:.85rem;margin:4px 0 0}
@media(min-width:760px){.q-form{grid-template-columns:1fr 1fr}.field--wide,.q-form button,.q-form .fine,.q-form .field:nth-child(3){grid-column:1/-1}}

/* footer: lip ring */
.ft{background:var(--graph);color:#cfd4da;position:relative;overflow:hidden;padding:56px 18px 40px}
.ft-ring{max-width:none;position:absolute;right:-120px;top:50%;width:360px;height:360px;border-radius:50%;transform:translateY(-50%);border:26px solid #3a424b;box-shadow:inset 0 0 0 6px #5a636d,0 0 0 6px #2a3038}
.ft-row{position:relative;max-width:1220px;margin:0 auto}
.ft-name{font-family:var(--f-head);font-size:1.6rem;color:#fff;margin-bottom:6px}
.ft p{margin:4px 0}
.ft a{color:var(--gold)}
.ft .fine{color:#9aa2ab}
.photo-note{color:#1b1f24}