/* ==========================================================================
   BEAM Mobile Detailing — theme layer
   Same Wollongong v2 structure and class names as the light EF build: master
   taste.css keeps its paper ground (#F1F1EE) and ink (#0B0B0C), and only the
   accent hue moves to BEAM's own cyan, sampled from the logo ring
   (dominant ring pixels #00A8F8 / #00B0F8).

   Cyan is a light hue, so it cannot carry white text and cannot be used as
   small text on paper:
     fill      -> dark label (--on-accent)          cyan vs ink label  7.9
     text      -> deep step (--accent-text) on paper 6.0 / 6.4
     dark bg   -> the accent itself reads fine       #00A8F8 on ink    6.9
   ========================================================================== */

:root{
  /* BEAM-only tokens */
  --beam-line:rgba(11,11,12,.14);
  --accent-text:#0E5FA8;   /* accent as text on the light ground */
  --accent-deep:#046B9E;   /* accent as outline / hover fill on the light ground */
  --on-accent:#04202F;     /* the label that sits on a cyan fill */
  --accent-lite:#7FE6FF;   /* accent on the ink grounds (hover, focus) */
}

/* ==========================================================================
   hero video (replaces the still hero frame, same slot as .hero-bg img)
   ========================================================================== */
.hero-video{
  width:100%;height:100%;object-fit:cover;object-position:36% 50%;
  filter:saturate(1.02) contrast(1.03);
  background:#08090A;
}
html:not(.motion-ok) .hero-video{transform:scale(1)}
@media (max-width:860px){ .hero-video{object-position:52% 50%} }
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-bg{background:url("../img/hero-poster.webp") center/cover no-repeat}
}

/* ==========================================================================
   accent on the light ground: never white on cyan, never cyan on paper
   ========================================================================== */
.btn{color:var(--on-accent)}
.btn:hover{background:var(--ink);color:var(--paper)}
.top-cta{color:var(--on-accent)}
.top-cta:hover{background:var(--accent-deep);color:#FFFFFF}
:focus-visible{outline-color:var(--accent-deep)}
#contact :focus-visible,.foot :focus-visible,.plan-3 :focus-visible{outline-color:var(--accent-lite)}
.link-u:hover{color:var(--accent-text)}

/* the accent-filled plan: labels flip to ink, the button stays ink-on-cyan ref */
.plan-2{color:var(--on-accent)}
.plan-2 .plan-note{color:rgba(4,32,47,.78)}
.plan-2 .btn{background:var(--ink);color:#FFFFFF}
.plan-2 .btn:hover{background:#FFFFFF;color:var(--ink)}

/* accent marks that sit on cyan itself */
.ba-tag-r{color:var(--on-accent)}
.cell-ink:hover{color:var(--on-accent)}

/* accent as small text / hairline on paper takes the deep step */
.qa[open] summary::after{color:var(--accent-text)}
.coupon input:focus,.coupon select:focus,.coupon textarea:focus{outline:2px solid var(--accent-deep);background:rgba(0,168,248,.08)}
.contact-list a:hover{color:var(--accent-lite)}

/* ==========================================================================
   mobile or studio block (replaces the maintenance club, same slot)
   ========================================================================== */
.club{margin:clamp(26px,3.4vw,44px) auto 0;max-width:1320px;border:1px solid var(--beam-line);background:#FFFFFF;padding:clamp(20px,2.6vw,32px)}
.club-head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--beam-line);padding-bottom:14px}
.club-head h3{font-size:clamp(1.2rem,1.7vw,1.6rem);text-transform:uppercase;letter-spacing:-.01em}
.club-head p{font-size:15px;color:var(--muted)}
.club-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--beam-line);margin-top:18px}
.club-cell{background:#FFFFFF;padding:16px 18px}
.club-k{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.club-lead{font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:8px}
.club-note{font-size:13px;color:var(--muted);margin-top:6px}
/* EF's block held short prices, so three columns survived on a phone. This one
   holds words, so at the same 860px breakpoint the cells stack instead of
   squeezing into ~100px columns. */
@media (max-width:860px){
  .club-grid{grid-template-columns:1fr}
  .club-cell{padding:14px 16px}
  .club-lead{font-size:clamp(1.45rem,6.4vw,1.9rem)}
}

/* pricing footnote (quote-only note in the same slot) */
.pricing-foot{
  max-width:1320px;margin:clamp(24px,3vw,38px) auto 0;padding-top:18px;
  border-top:1px solid var(--beam-line);
  font-size:14px;line-height:1.6;color:var(--muted);
}
.pricing-foot .beam-ph{margin:0 2px}

/* ==========================================================================
   contact section: what-to-send card (BEAM quotes by phone, text or email)
   ========================================================================== */
.beam-dm h3{font-size:clamp(1.2rem,1.8vw,1.6rem);text-transform:uppercase;letter-spacing:-.01em}
.dm-list{margin:18px 0 22px;padding:0;list-style:none;display:grid;gap:12px}
.dm-list li{font-size:15px;line-height:1.5;color:var(--muted);padding-left:20px;position:relative}
.dm-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.dm-list strong{color:var(--ink)}
.dm-btn{display:inline-block}

/* ==========================================================================
   prototype markers
   ========================================================================== */
.beam-ph{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#7A4E08;
  border:1px solid rgba(200,132,26,.55);background:rgba(232,163,61,.20);
  padding:3px 9px;border-radius:999px;vertical-align:middle;
}
/* the hero sits on dark footage, so its chip flips to a light amber */
.beam-ph-hero{margin-top:22px;color:#F0B45E;border-color:rgba(240,180,94,.5);background:rgba(232,163,61,.14)}

.beam-note{
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;
  background:#FBF0DA;border-bottom:1px solid rgba(11,11,12,.10);
  border-left:4px solid #C8922F;
  padding:14px var(--pad);
}
.beam-note p{font-size:13px;line-height:1.5;color:var(--muted);max-width:110ch;margin:0}

/* sticky mobile booking bar */
.beam-bar{display:none}
@media (max-width:860px){
  .beam-bar{
    display:flex;gap:10px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(241,241,238,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--beam-line);
  }
  .beam-bar-btn{
    flex:1;text-align:center;background:var(--accent);color:var(--on-accent);
    font-weight:700;font-size:15px;padding:13px 16px;text-decoration:none;
  }
  .beam-bar-alt{
    flex:none;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;
    padding:13px 14px;box-shadow:inset 0 0 0 2px rgba(11,11,12,.25);
  }
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* small caps label on the standards cards */
.stand-k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}

/* ---------- Google review cards: avatar initials chip ----------------------
   The EF template styled the review card but never used it, so .rev-av shipped
   with only a width/height. Bare initials get a cyan disc here. */
.rev-card .rev-av{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--accent-lite);color:var(--on-accent);font-size:13px;font-weight:700;letter-spacing:.04em}

/* ---------- hero ornament (replaces the logo badge) ----------
   Slot badge lama (52px + margin 20px) dipertahankan supaya komposisi hero
   tidak bergeser: bintang kilau di ujung kiri menerus ke garis rambut yang
   menipis ke kanan, warnanya terang (paper) supaya berpadu dengan footage. */
.beam-orn{display:flex;align-items:flex-end;gap:14px;height:52px;margin-bottom:20px}
.beam-orn-star{flex:none;width:20px;height:20px;color:var(--paper);display:block}
.beam-orn-rule{
  display:block;height:2px;width:clamp(88px,17vw,240px);border-radius:1px;
  /* taste-skill-ignore: neutral scrim thinning out over the hero footage - the one gradient the rule allows */
  background:linear-gradient(90deg,rgba(241,241,238,.72) 0%,rgba(241,241,238,.34) 46%,rgba(241,241,238,.06) 100%);
}
html.motion-ok .beam-orn-star{opacity:0;animation:beamOrnStar .5s cubic-bezier(.19,1,.22,1) .18s 1 both}
html.motion-ok .beam-orn-rule{transform:scaleX(0);transform-origin:0 50%;animation:beamOrnDraw .85s cubic-bezier(.19,1,.22,1) .3s 1 both}
@keyframes beamOrnStar{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes beamOrnDraw{to{transform:scaleX(1)}}
@media (max-width:860px){
  .beam-orn{gap:12px}
  .beam-orn-star{width:18px;height:18px}
  .beam-orn-rule{width:clamp(72px,26vw,160px)}
}

/* ==========================================================================
   mobile & tablet polish
   Everything below is scoped to <=860px (same breakpoint the master sheet
   already uses) so the desktop composition stays byte-for-byte as approved.
   Each block fixes something measured on a 390px and an 820px viewport, not a
   guess: the header hit areas were 15px, the work tabs 20px, the standards
   row scrolled sideways behind a mask, and the contact rows pushed the layout
   viewport 4px wider than the screen.
   ========================================================================== */

@media (max-width:860px){
  /* header: the icon-only phone link measured 15x15 - give it a real button
     box so it reads as tappable instead of a stray glyph */
  .wordmark{min-height:44px;padding:4px 0}
  .top-tel{min-width:44px;min-height:44px;justify-content:center;padding:0 11px;background:rgba(241,241,238,.14)}
  .top-tel svg{width:18px;height:18px}
  .top-cta{height:44px;font-size:12px}

  /* underlined links sat at 29px tall with a 3px tail - pad the hit area */
  .link-u{padding:9px 0}

  /* the standards cards were a masked marquee: at this width only the middle
     card was readable and both edges were cut. Stack them as a grid and drop
     the duplicate aria-hidden set that only existed to seam the loop. */
  .rev-rows{max-width:1408px;margin-inline:auto;padding:0 var(--pad)}
  /* the second row carries the same six claims in reverse order - a desktop
     flourish that only doubles a phone's reading length, so it goes */
  .rev-rows > .rev-marquee + .rev-marquee{display:none}
  .rev-marquee{overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
  .rev-track{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:10px;width:auto;padding:0;
    animation:none!important;transform:none!important;
  }
  .rev-card[aria-hidden="true"]{display:none}
  .rev-card{width:auto;min-height:0;padding:16px 18px;gap:10px}
  .rev-card blockquote p{font-size:15.5px}
  .stand-k{margin-bottom:6px}

  /* pricing cards carried desktop padding and spacing; stacked in one column
     that compounded to a 2.5k-tall section on a phone */
  .plan{padding:20px 18px}
  .plan-base{margin-top:18px}
  .plan-who{margin-top:10px}
  .plan-what{margin-top:14px}
  .plan .btn{margin-top:16px;padding:15px 12px;font-size:14px;letter-spacing:.04em}
  .pricing-foot{margin-top:20px;padding-top:14px}

  /* mobile-or-studio block: trim the gap the desktop sheet leaves under the head */
  .club{padding:18px 16px}
  .club-head{padding-bottom:10px}
  .club-grid{margin-top:12px}

  /* service tabs were 20px tall with a 26px gap - pad them to a 44px row */
  .work-tabs{gap:18px;padding-bottom:4px}
  .work-tab{padding:11px 0;font-size:16px;min-height:44px}
  .work-actions{gap:10px}

  /* the prototype chips and footer legal text were the smallest type on the
     page; a phone is read closer, so lift them one step */
  .beam-ph{font-size:12px}
  .foot-sub,.foot-areas,.foot-social a{font-size:14.5px}
  .foot-bot{font-size:13.5px;line-height:1.55}
  .foot-social{gap:16px}
  .foot-social a{min-height:40px}
}

@media (max-width:560px){
  /* the header cannot hold the wordmark text beside the phone button and the
     quote button: measured 170px of brand text inside a 149px box, so 21px of
     it was sliced off. The logo already carries the name, so drop the text. */
  .wm-txt{display:none}
  .wordmark img{width:34px;height:34px}

  /* the ABN, hours and the email address are unbreakable strings: at 110px of
     label plus 15px of text the row measured 394px inside a 390px screen and
     inflated the whole layout viewport. Stack the pair and let values wrap. */
  .contact-list div{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .contact-list dt{padding-top:0}
  .contact-list dt,
  .contact-list dd,
  .contact-list a{overflow-wrap:anywhere}
  .contact-list a{padding:2px 0}
  /* the contact card button is the longest label on the page ("CALL OR TEXT
     0450 023 846"): at 15px with .06em tracking it wrapped and left "846"
     stranded on its own line */
  .beam-dm .btn{font-size:13.5px;letter-spacing:.02em;padding:0 16px}
}

@media (max-width:400px){
  .hero-facts{gap:14px 18px}
  .plan-price{font-size:2.35rem}
}