/* ============================================================
   Gloss Lab: theme. Carbon black, chrome greys and one racing
   yellow. Schibsted Grotesk set tight, Albert Sans to read. The page
   is the inside of a detailing bay: dark, with light as the subject.
   ============================================================ */
@layer theme {
:root{
  color-scheme:dark;
  --canvas:#0B0D10; --surface:#15181D; --ink:#E9ECEF; --muted:#A3AAB3; --line:#262B33; --line-strong:#3D444E;
  --primary:#E9ECEF; --primary-hover:#F7F8F9; --on-primary:#0B0D10;
  --accent:#FFD23F; --accent-hover:#FFDC66; --on-accent:#0B0D10; --accent-text:#FFD23F;
  --focus:#FFD23F; --focus-ring:rgb(255 210 63/.25); --error:#FF8A80; --ph-bg:#1C2026;
  --header-bg:#0B0D10; --footer-bg:#07080A; --on-footer:#C9CED4; --note-bg:#1C2026;
  --field-bg:#111419; --field-line:#3D444E;
  --paint-a:#1A2230; --paint-b:#0D121A; --paint-c:#2B3647; --swirl:#DCE3EC;
  --font-display:'Schibsted Grotesk',system-ui,sans-serif; --font-body:'Albert Sans',system-ui,sans-serif;
  --radius:10px; --radius-sm:8px; --radius-lg:16px; --radius-btn:8px;
  --header-h:4.5rem;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9ECEF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
h1,h2,h3{font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(2.3rem,5vw,4rem);line-height:.98}
h3{font-size:1.4rem;letter-spacing:-.02em}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:1.1rem}
.btn{font-weight:800;letter-spacing:-.01em}
.btn--ghost{color:var(--ink)}
@media (hover:hover){ .btn--ghost:hover{background:var(--ink);color:var(--canvas)} }

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line),0 10px 30px rgb(0 0 0/.5)}
.brand{font-weight:800;font-size:1.3rem;letter-spacing:-.04em}
.brand-mark{width:auto;padding:0 .45rem;background:var(--accent);color:var(--on-accent);font-weight:900;font-size:.95rem;letter-spacing:-.04em;border-radius:6px}
.nav-mobile-cta a{color:var(--accent-text)}
@media (min-width:900px){ .nav-mobile-cta{display:none} }

/* ---------- hero: light on paint ---------- */
.hero{position:relative;display:grid;align-items:end;min-height:min(88svh,52rem);isolation:isolate;overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg .ph{height:100%;aspect-ratio:auto;border-radius:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 13 16/.15),rgb(11 13 16/.55) 50%,var(--canvas))}
.hero-inner{display:grid;gap:1.5rem;justify-items:start;padding-block:8rem clamp(3rem,7vw,5rem)}
.hero h1{font-size:clamp(3.2rem,8.4vw,7.6rem);line-height:.9;max-width:12ch}
.gloss{display:block;background:linear-gradient(100deg,var(--ink) 40%,var(--accent) 48%,#F7F8F9 50%,var(--ink) 58%) 0 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:no-preference){ .js .gloss{animation:sweep 1.8s var(--ease-out) .5s both} }
@keyframes sweep{from{background-position:100% 0}to{background-position:0 0}}
.hero-lede{max-width:32rem;font-size:1.15rem;color:var(--ink);opacity:.88}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- the inspection torch ---------- */
.torch-grid{display:grid;gap:2.5rem;align-items:center}
.torch-copy{display:grid;gap:1.1rem;justify-items:start}
.torch-copy > p:first-of-type{color:var(--muted);font-size:1.1rem;max-width:32rem}
.state{display:inline-flex;padding:.3rem;border-radius:999px;background:var(--surface);border:1px solid var(--line-strong)}
.state button{min-height:44px;padding:.45rem 1.1rem;border-radius:999px;font-weight:800;color:var(--muted);transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear}
.state button[aria-checked="true"]{background:var(--accent);color:var(--on-accent)}
.torch-read{font-weight:700;min-height:1.6em}
.panel{--x:50%;--y:45%;position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;cursor:none;touch-action:pan-y;
  background:radial-gradient(120% 90% at 20% 0%,var(--paint-c),transparent 55%),linear-gradient(160deg,var(--paint-a),var(--paint-b));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.08),0 30px 60px -30px rgb(0 0 0/.8)}
.panel:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.swirls{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(circle at var(--x) var(--y),#000 0,rgb(0 0 0/.85) 9%,transparent 24%);mask-image:radial-gradient(circle at var(--x) var(--y),#000 0,rgb(0 0 0/.85) 9%,transparent 24%);
  transition:opacity var(--dur-slow) linear}
.swirls path{fill:none;stroke:var(--swirl);stroke-width:1.1;opacity:.7;vector-effect:non-scaling-stroke}
.beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--x) var(--y),rgb(255 255 255/.92) 0,rgb(255 255 255/.4) 2.5%,rgb(220 230 245/.12) 10%,transparent 22%);transition:background var(--dur-mid) linear}
.panel.is-after .swirls{opacity:0}
.panel.is-after .beam{background:radial-gradient(circle at var(--x) var(--y),#F7F8F9 0,#F7F8F9 1.6%,rgb(255 255 255/.22) 2.6%,rgb(220 230 245/.05) 9%,transparent 16%)}
.panel-tag{position:absolute;left:1rem;top:1rem;padding:.3rem .7rem;border-radius:999px;background:rgb(11 13 16/.7);font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.panel.is-after .panel-tag{background:var(--accent);color:var(--on-accent)}
.panel-hint{position:absolute;right:1rem;bottom:.9rem;font-size:.85rem;color:var(--muted)}
html:not(.js) .panel-hint{display:none}
@media (min-width:900px){ .torch-grid{grid-template-columns:.8fr 1.2fr;gap:4rem} }

/* ---------- packages ---------- */
.packages{background:var(--surface);border-block:1px solid var(--line)}
.pkg-head{display:grid;gap:1.25rem;margin-bottom:2rem}
.pkg-head p{color:var(--muted);margin-top:.6rem}
.sizes{display:flex;flex-wrap:wrap;gap:.4rem;border:0;padding:0}
.seg{position:relative}
.seg input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:46px;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--line-strong);font-weight:700;
  transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,border-color var(--dur-fast) linear}
@media (hover:hover){ .seg:hover span{border-color:var(--ink)} }
.seg input:checked + span{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.seg input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.pkg-list{display:grid;gap:1rem}
.pkg{display:grid;gap:1rem;align-content:start;padding:1.75rem;border-radius:var(--radius-lg);background:var(--canvas);border:1px solid var(--line-strong)}
.pkg--pop{border:2px solid var(--accent);background:linear-gradient(180deg,rgb(255 210 63/.08),transparent 40%),var(--canvas)}
.pop-tag{justify-self:start;padding:.25rem .65rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.pkg-price{display:flex;align-items:baseline;gap:.5rem}
.pkg-price small{color:var(--muted);font-weight:700}
.pkg-price span{font-family:var(--font-display);font-weight:800;font-size:3.4rem;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.pkg-time{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-weight:600}
.pkg-time .ico{width:1rem;height:1rem}
.pkg ul{display:grid;gap:.55rem}
.pkg li{display:flex;gap:.55rem;align-items:flex-start}
.pkg li .ico{color:var(--accent-text);margin-top:.1rem}
@media (min-width:900px){ .pkg-head{grid-template-columns:1fr auto;align-items:end} .pkg-list{grid-template-columns:1fr 1.15fr 1fr;align-items:start} .pkg--pop{margin-top:-1rem} }

/* ---------- reviews ---------- */
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.rv-card{display:grid;gap:1.25rem;align-content:space-between;padding:1.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.rv-card blockquote p{font-size:1.1rem}
.rv-card figcaption{display:grid;font-size:.92rem;color:var(--muted)}
.rv-card figcaption strong{color:var(--ink);font-family:var(--font-display)}
.rv-controls button{border-color:var(--line-strong);color:var(--ink)}

/* ---------- area ---------- */
.area{background:var(--surface);border-block:1px solid var(--line)}
.area-grid{display:grid;gap:2.5rem;align-items:start}
.area-copy{display:grid;gap:1rem}
.area-copy > p{color:var(--muted);font-size:1.1rem}
.area-check{display:grid;gap:.5rem;margin-top:.5rem}
.area-check label{font-weight:700}
.area-row{display:flex;gap:.5rem}
.area-row .input{flex:1}
.check-out{min-height:1.5em;font-weight:700}
.check-out.ok{color:var(--accent-text)}
.check-out.no{color:var(--muted)}
@media (prefers-reduced-motion:no-preference){ .check-out.pop{animation:rise .35s var(--ease-out)} }
@keyframes rise{from{transform:translateY(6px)}}
.suburbs{display:flex;flex-wrap:wrap;gap:.45rem}
.suburbs li{padding:.45rem .85rem;border-radius:999px;border:1px solid var(--line-strong);font-weight:600;font-size:.95rem;transition:background-color var(--dur-mid) linear,color var(--dur-mid) linear}
.suburbs li.hit{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media (min-width:900px){ .area-grid{grid-template-columns:.8fr 1.2fr;gap:4rem} }

/* ---------- about ---------- */
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-photos{display:grid;grid-template-columns:1.4fr .8fr;gap:1rem;align-items:end}
.about-photos .ph{border-radius:var(--radius-lg)}
.ab-2{margin-bottom:-2rem}
.about-copy{display:grid;gap:1rem}
.about-copy p{font-size:1.1rem;color:var(--muted);max-width:34rem}
@media (min-width:900px){ .about-grid{grid-template-columns:1.1fr .9fr;gap:4.5rem} }

/* ---------- the one yellow band ---------- */
.quote-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(3.5rem,8vw,6rem)}
.quote-band blockquote p{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.8vw,4rem);line-height:1;letter-spacing:-.045em;max-width:52rem}
.quote-band figcaption{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.quote-band .sample-tag{color:var(--on-accent)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq summary .ico{color:var(--accent-text)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid h2{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- booking ---------- */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;gap:2.5rem}
.contact-copy > p{margin-top:1rem;color:var(--muted);font-size:1.1rem}
.contact-list{display:grid;gap:.9rem;margin-top:2rem}
.contact-list li{display:flex;gap:.7rem;align-items:flex-start}
.contact-list a{font-weight:700}
.contact-list .ico{color:var(--accent-text);margin-top:.15rem}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--canvas);border:1px solid var(--line-strong);border-radius:var(--radius-lg)}
.form-row{display:grid;gap:1.25rem}
input[type="date"]{color-scheme:dark}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .contact-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start} }

/* ---------- map ---------- */
.section--map{padding-bottom:var(--space-section);background:var(--surface)}
.map-block{border-radius:var(--radius-lg);border:1px solid var(--line-strong);background:radial-gradient(40rem 20rem at 80% 0%,var(--paint-c),transparent),var(--canvas)}
.map-title{display:grid;gap:.25rem;max-width:28rem}
.map-title strong{font-family:var(--font-display);font-size:1.5rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- call to action ---------- */
.cta-band{padding-block:clamp(4rem,9vw,7rem);text-align:center;background:radial-gradient(40rem 18rem at 50% 110%,rgb(255 210 63/.18),transparent 70%)}
.cta-inner{display:grid;gap:1rem;justify-items:center}
.cta-band h2{font-size:clamp(2.6rem,7vw,5.5rem)}
.cta-inner p{font-size:1.15rem;color:var(--muted)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.75rem}

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-mark{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-bottom:.5rem}
.foot-mark .brand-mark{display:inline-grid;place-items:center;height:2rem}
.site-footer h2{font-family:var(--font-body);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.5rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
.callbar .alt{color:var(--ink)}
}
.pkg :is(h2,h3){font-size:1.4rem;letter-spacing:-.02em;line-height:1.08}