/* Mako Machine Services - one stylesheet for the whole site.
   Palette and type are the molding page's (/var/www/mako.greauxx.com/obs-billet/), so the store and
   the molding page read as one brand. Deliberately dark-only: the brand is machined steel on black. */
:root{
  --ink:#0b0d10; --panel:#14181d; --panel-2:#1b2027; --line:#2a323b; --line-2:#39434e;
  --text:#e9edf0; --text-2:#a7b3bc; --text-3:#8a96a0; --chrome:#cfdae1; --steel:#5d7387;
  --hot:#c8552f; --btn:#a8421d; --btn-hover:#bf4d23;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--text);font:17px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--chrome)}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.wrap{max-width:72rem;margin:0 auto;padding:0 max(18px,env(safe-area-inset-left))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h2{font-size:clamp(24px,3.4vw,34px)}
p{margin:0 0 1em}
.eyebrow{font:600 12.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:0 0 .7em}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--text-2);max-width:60ch}
.note{font-size:15px;color:var(--text-2)}
.block{padding-block:clamp(40px,7vw,80px)}
.narrow{max-width:48rem}
.section-title{font-size:clamp(24px,3.2vw,32px)}
.page-title{font-size:clamp(28px,4.4vw,44px);font-weight:800}

/* preview ribbon (staging builds only) */
.ribbon{background:var(--hot);color:#0b0d10;text-align:center;font:600 12px/1.2 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;padding:7px 10px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(11,13,16,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{flex:none;line-height:0}
.brand img{width:clamp(92px,14vw,120px)}
.nav-wide{display:none;margin-left:auto}
.nav-wide ul,.menu ul{list-style:none;margin:0;padding:0}
.nav-wide ul{display:flex;gap:4px}
.nav-wide a,.menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;
  color:var(--text-2);text-decoration:none;font-weight:600;font-size:15px}
.nav-wide a:hover,.menu a:hover,.nav-wide a[aria-current],.menu a[aria-current]{color:#fff;background:var(--panel-2)}
.call{margin-left:auto;display:inline-flex;align-items:center;min-height:46px;padding:0 14px;border:1px solid var(--line-2);
  border-radius:999px;color:var(--chrome);text-decoration:none;font:600 14px/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.call:hover{border-color:var(--hot);color:#fff}
.menu{order:3}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-content:center;gap:5px;
  border:1px solid var(--line-2);border-radius:10px}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:20px;height:2px;background:var(--chrome);border-radius:2px}
.menu[open] nav{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--line);
  padding:8px max(18px,env(safe-area-inset-left)) 16px}
.menu[open] a{min-height:48px;font-size:17px}
@media (min-width:980px){
  .menu{display:none}
  .nav-wide{display:block}
  .call{margin-left:8px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--btn);color:#fff;border:1px solid var(--btn);text-decoration:none;font:700 16px/1 var(--sans);
  cursor:pointer}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:#fff}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--chrome)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* hero */
.hero{position:relative;overflow:hidden;min-height:min(78vh,640px);display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line)}
.hero picture{position:absolute;inset:0}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Phones: the text sits over the bottom of the photo, so fade from the bottom up. */
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,13,16,.2) 0%,rgba(11,13,16,.5) 40%,rgba(11,13,16,.95) 100%)}
/* Wider screens: the text sits on the left, so darken the left and let the OBS cap show on the right. */
@media (min-width:700px){
  .hero-img{object-position:30% 50%}
  .hero::after{background:linear-gradient(90deg,rgba(11,13,16,.94) 0%,rgba(11,13,16,.78) 38%,rgba(11,13,16,.2) 70%,rgba(11,13,16,.05) 100%),
    linear-gradient(180deg,transparent 70%,rgba(11,13,16,.9) 100%)}
  .hero h1,.hero .lede{max-width:34rem}
}
.hero-in{position:relative;z-index:1;padding-block:clamp(48px,10vw,96px) clamp(36px,6vw,64px)}
.hero h1{font-size:clamp(34px,6.2vw,64px);font-weight:800;max-width:16ch;line-height:1.16;padding-bottom:.12em}
.hero h1 em{font-style:normal;color:var(--chrome)}
/* The molding page's signature: big headlines painted through his own polished billet
   (tex-polished.jpg). site.js adds .tex-ok only after the texture has loaded, so a failed image
   never leaves transparent, invisible text. Small type stays solid - the flutes cut letterforms. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tex-ok .hero h1,.tex-ok .hero h1 em{
    background:url(../images/tex-polished.jpg) center/cover no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    filter:brightness(1.14) contrast(1.06)}
  @media (min-width:700px){
    .tex-ok .page-title{background:url(../images/tex-polished.jpg) center/cover no-repeat;
      -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
      filter:brightness(1.14) contrast(1.06);padding-bottom:.12em}
  }
}

/* product cards */
.grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:22px}
@media (min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:var(--text);transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:var(--steel);color:var(--text)}
.card-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 18px}
.card-name{font-weight:700;font-size:17px;line-height:1.3}
.card-sub{color:var(--text-2);font-size:14.5px}
.card-price{font:600 15px/1.2 var(--mono);color:var(--chrome)}
.card-wide{margin-top:16px}
@media (min-width:760px){
  .card-wide{flex-direction:row;align-items:stretch}
  .card-wide picture{flex:1.4}
  .card-wide .card-img{height:100%;aspect-ratio:auto;min-height:260px}
  .card-wide .card-body{flex:1;justify-content:center;padding:28px}
  .card-wide .card-name{font-size:clamp(22px,2.6vw,30px);font-weight:800}
}

/* bands and splits */
/* Same machine-shop ground as the molding page (bg-machine.jpg), held back so text stays readable. */
.band{background:linear-gradient(rgba(20,24,29,.9),rgba(20,24,29,.94)),url(../images/bg-machine.jpg) center/cover no-repeat,var(--panel);
  border-block:1px solid var(--line);padding-block:clamp(40px,7vw,80px)}
.split{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:48px}}
.split-img{border-radius:var(--radius);border:1px solid var(--line);width:100%;aspect-ratio:16/10;object-fit:cover}
.ticks{list-style:none;padding:0;margin:0 0 1em}
.ticks li{position:relative;padding-left:22px;margin:0 0 8px;color:var(--text-2)}
.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--hot)}
.steps{counter-reset:s;list-style:none;padding:0;margin:22px 0;display:grid;gap:14px}
@media (min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;color:var(--text-2)}
.steps li::before{content:"0" counter(s);display:block;font:700 13px/1 var(--mono);letter-spacing:.12em;color:var(--hot);margin-bottom:10px}
.steps strong{color:var(--text)}
.steps-tight{grid-template-columns:1fr!important;gap:8px}
.steps-tight li{padding:10px 14px}
.steps-tight li::before{display:inline;margin:0 10px 0 0}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.row-head a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.rides{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.rides{grid-template-columns:repeat(4,1fr)}.rides-page{grid-template-columns:repeat(3,1fr)}}
.ride-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair img{border-radius:8px;border:1px solid var(--line)}
.pair-lg{gap:18px;margin:26px 0}
.pair figure{margin:0}
.pair figcaption{margin-top:10px;color:var(--text-2);font-size:15.5px}
.pair figcaption strong{color:var(--text)}

/* product page */
.crumbs{font:13px/1.4 var(--mono);letter-spacing:.06em;color:var(--text-3);margin-bottom:22px}
.crumbs a{color:var(--text-2)}
.p-grid{display:grid;gap:28px}
@media (min-width:900px){.p-grid{grid-template-columns:1.15fr 1fr;gap:48px;align-items:start}}
/* The frame hugs the photo instead of boxing it in a fixed square: a tall shot (the radiator
   covers are 554x1200) then renders as large as the height allows, with no black bars. */
.g-main{background:#07090b;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;width:fit-content;max-width:100%;margin-inline:auto}
.g-img{display:block;width:auto;height:auto;max-width:100%;max-height:74vh;object-fit:contain}
.g-thumbs{list-style:none;padding:0;margin:12px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.thumb{width:72px;height:72px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#07090b;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-current]{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot)}
@media (min-width:900px){.buy{position:sticky;top:88px}}
.price{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.now{font:700 28px/1 var(--mono);color:#fff}
.was{color:var(--text-3);font:500 18px/1 var(--mono)}
.was-note{color:var(--text-2);font-size:15px}
.opts{border:0;padding:0;margin:18px 0}
.opts legend{font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:10px}
.chip{display:inline-block;margin:0 8px 8px 0}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-2);
  border-radius:999px;cursor:pointer;font-weight:600}
.chip input:checked+span{border-color:var(--hot);background:rgba(200,85,47,.14);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--hot);outline-offset:3px}
.qty{display:flex;align-items:center;gap:8px;margin:0 0 18px}
.qty-label{font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-right:8px}
.qbtn{width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);font-size:20px;cursor:pointer}
.qty input{width:64px;height:44px;text-align:center;font:600 16px var(--mono);background:var(--panel);color:var(--text);
  border:1px solid var(--line-2);border-radius:10px}
.btn-buy{width:100%;min-height:54px;font-size:17px}
.ship-note{font-size:14.5px;color:var(--text-2);margin:12px 0 18px}
.h-small{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:26px 0 12px}
.made{font-size:15px;color:var(--text-2)}

/* forms */
.quote{margin-top:26px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.quote label{display:grid;gap:6px;margin:0 0 14px;font-size:14px;font-weight:600;color:var(--text-2)}
.quote input,.quote select,.quote textarea{font:16px/1.4 var(--sans);color:var(--text);background:var(--ink);
  border:1px solid var(--line-2);border-radius:8px;padding:12px;min-height:48px;width:100%}
.quote textarea{min-height:110px;resize:vertical}

/* contact + prose */
.contact-cards{display:grid;gap:12px;margin:24px 0}
@media (min-width:700px){.contact-cards{grid-template-columns:repeat(3,1fr)}}
.c-card{display:grid;gap:6px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none}
.c-card:hover{border-color:var(--hot)}
.c-label{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.c-value{font-size:19px;font-weight:700;color:#fff}
.prose h2{font-size:22px;margin-top:32px}
.prose p{color:var(--text-2)}
.draft{display:inline-block;background:rgba(200,85,47,.14);border:1px solid var(--hot);color:#fff;border-radius:8px;padding:8px 12px;font-size:14.5px}

/* footer: logo LEFT, name CENTRE, two icons RIGHT (Heath's spec, molding page) */
.foot{border-top:1px solid var(--line);background:#090b0e;padding:40px 0 calc(28px + env(safe-area-inset-bottom))}
.foot-in{display:grid;grid-template-columns:1fr;justify-items:center;gap:16px;text-align:center}
@media (min-width:760px){.foot-in{grid-template-columns:1fr auto 1fr;align-items:center}
  .f-logo{justify-self:start}.f-links{justify-self:end}}
.f-logo{width:120px}
.f-name{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;font:12px/1.5 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.f-biz{color:var(--text);font-size:clamp(15px,3.4vw,18px);letter-spacing:.2em;font-weight:600}
.f-name a{color:var(--chrome);text-decoration:none;font-weight:600;font-size:14px;padding:10px;letter-spacing:.06em}
.f-links{display:flex;gap:12px}
.social{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:url(../images/btn-polished.jpg) center/auto 200% no-repeat,var(--panel-2);border:1px solid var(--line-2);position:relative;overflow:hidden}
.social::before{content:"";position:absolute;inset:0;background:rgba(11,13,16,.45)}
.social svg{position:relative;width:15px;height:24px;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}
.social.mail svg{width:21px;height:21px}
.f-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:22px}
.f-nav a{color:var(--text-2);text-decoration:none;font-size:14.5px;min-height:44px;display:inline-flex;align-items:center}
.f-nav a:hover{color:#fff}
.f-small{text-align:center;color:var(--text-3);font-size:12.5px;margin-top:8px}
.powered{text-align:center;line-height:0;margin-top:22px}
.powered img{width:132px;opacity:.85;display:inline-block}
.powered a:hover img{opacity:1}

/* notice dialog */
.notice{max-width:26rem;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);color:var(--text);padding:22px}
.notice::backdrop{background:rgba(0,0,0,.6)}
.notice form{margin:0;text-align:right}

/* cart - the header button, and the basket dialog it opens.
   Below 980px (the site's own header breakpoint) the header already carries the logo, the phone
   pill and the menu button and has no room left, so the cart floats bottom-right instead of
   squeezing in and pushing the phone number off the edge of a phone screen. */
.cart-btn{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;flex:none;
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 15px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--panel);color:var(--chrome);font:600 14px/1 var(--mono);
  letter-spacing:.04em;white-space:nowrap;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.cart-btn:hover{border-color:var(--hot);color:#fff}
.cart-n{display:inline-grid;place-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--btn);color:#fff;font:700 12px/1 var(--sans);letter-spacing:0}
@media (min-width:980px){.cart-btn{position:static;box-shadow:none;margin-left:8px}}

.cart-dlg{max-width:32rem;width:calc(100vw - 36px)}
.c-list{list-style:none;margin:0 0 16px;padding:0}
.c-list li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:12px 0;
  border-top:1px solid var(--line)}
.c-name{font-size:15.5px}
.c-price{font:600 15.5px/1 var(--mono);color:var(--chrome);white-space:nowrap}
.c-rm{background:none;border:0;padding:4px;color:var(--text-3);font:600 13px/1 var(--sans);cursor:pointer;
  text-decoration:underline}
.c-rm:hover{color:var(--hot)}
.c-gone{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--text-2);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 14px}
.c-total{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line-2);padding-top:14px;
  margin:0 0 10px;font-size:16px}
.c-note{font-size:14px;color:var(--text-2);margin:0 0 18px}
.c-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.c-actions form{margin:0;text-align:left}
.cart-dlg .btn-buy{width:auto;flex:1 1 auto}
.cart-dlg .btn[disabled],.cart-dlg .btn:disabled{opacity:.5;cursor:not-allowed}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}