/* ============================================================
   FULL AUTO DETAIL — gunmetal + seafoam-teal, tactical/HUD
   Display: Archivo (heavy/wide)  Body: Barlow  Data: Chakra Petch
   Shape: sharp corners, hairline borders, reticle corner-marks
   ============================================================ */

:root {
  --ink:        #0E1311;   /* gunmetal base */
  --ink-2:      #0A0F0E;   /* deepest */
  --panel:      #151E1B;   /* raised panel */
  --panel-2:    #1B2622;   /* hover / lighter panel */
  --line:       #28332E;   /* hairline */
  --line-2:     #3A4B44;   /* stronger hairline */

  --teal:       #34C7A8;   /* signature accent */
  --teal-bright:#5BE6C6;   /* hover */
  --teal-deep:  #147E69;

  --red:        #C42B22;   /* action / trigger */
  --red-bright: #E23A2E;

  --text:       #EAF0EE;
  --muted:      #9FB2AC;   /* 8.6:1 on --ink */
  --chrome-hi:  #F4F8F6;
  --chrome-lo:  #9AA8A4;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--ink);
  background-image:
    radial-gradient(120% 80% at 85% -10%, rgba(52,199,168,.10), transparent 55%),
    radial-gradient(90% 60% at -10% 110%, rgba(52,199,168,.05), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,video { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }

/* ---------- type ---------- */
h1,h2,h3,h4 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-stretch: 125%;
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing:0; }
p  { color: var(--muted); }
strong { color: var(--text); font-weight:600; }

.eyebrow {
  font-family: "Chakra Petch", monospace;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex; align-items: center; gap:.6rem;
}
.eyebrow::before {
  content:""; width: 26px; height:2px; background: var(--teal); display:inline-block;
}
.data { font-family:"Chakra Petch", monospace; letter-spacing:.06em; }

/* gradient chrome text for signature words */
.chrome {
  background: linear-gradient(180deg, var(--chrome-hi) 0%, #cfdad6 38%, var(--chrome-lo) 58%, #e9f0ed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tl-accent { color: var(--teal); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline:auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section-head { max-width: 60ch; margin-bottom: clamp(2rem,4vw,3.2rem); }
.section-head h2 { margin-top:.7rem; }
.section-head p { margin-top: 1rem; max-width: 54ch; }
.center { text-align:center; margin-inline:auto; }
.center .eyebrow { justify-content:center; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--red);
  font-family:"Archivo", sans-serif; font-weight:800; font-stretch:110%;
  text-transform: uppercase; letter-spacing:.04em; font-size:.92rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding: .95rem 1.6rem; cursor:pointer; border:2px solid transparent;
  background: var(--b); color:#fff; transition: background .2s var(--ease), color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--red-bright); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ink), 0 0 0 5px var(--teal); }
.btn--ghost {
  background: transparent; color: var(--text); border-color: var(--line-2);
}
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.btn--teal { background: var(--teal); color:#062019; }
.btn--teal:hover { background: var(--teal-bright); }
.btn svg { width:1.05em; height:1.05em; }

.txtlink {
  font-family:"Chakra Petch", monospace; font-weight:600; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
}
.txtlink span.arr { transition: transform .25s var(--ease); }
.txtlink:hover span.arr { transform: translateX(5px); }

/* ---------- reticle / crop-mark frame ---------- */
.frame { position: relative; }
.frame::before, .frame::after {
  content:""; position:absolute; width:22px; height:22px;
  border-color: var(--teal); border-style: solid; pointer-events:none; z-index:2;
}
.frame::before { top:-1px; left:-1px;  border-width:2px 0 0 2px; }
.frame::after  { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.frame--4 > i.c { position:absolute; width:22px; height:22px; border-color:var(--teal); border-style:solid; z-index:2; }
.frame--4 > i.tr { top:-1px; right:-1px; border-width:2px 2px 0 0; }
.frame--4 > i.bl { bottom:-1px; left:-1px; border-width:0 0 2px 2px; }

/* media inside frames keeps a fixed aspect on a container */
.shot { position:relative; overflow:hidden; background:var(--panel); }
.shot img, .shot video { width:100%; height:100%; object-fit:cover; }
.ratio-45 { aspect-ratio: 4/5; }
.ratio-54 { aspect-ratio: 5/4; }
.ratio-32 { aspect-ratio: 3/2; }
.ratio-916{ aspect-ratio: 9/16; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .3s var(--ease), border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(7,11,10,.7), transparent);
  opacity:1; transition: opacity .3s;
}
.site-header.scrolled {
  background: rgba(10,15,14,.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.site-header.scrolled::before { opacity:0; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:74px; position:relative; z-index:1; }
.brand { display:flex; align-items:center; gap:.7rem; }
.brand img { height: 34px; width:auto; }
.nav-links { display:flex; align-items:center; gap:1.9rem; list-style:none; }
.nav-links a {
  font-family:"Chakra Petch", monospace; font-weight:600; font-size:.8rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text);
  position:relative; padding:.4rem 0;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--teal);
  transition: width .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current]::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap:1.1rem; }
.nav-phone {
  font-family:"Chakra Petch", monospace; font-weight:700; letter-spacing:.05em; font-size:.92rem;
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.nav-phone svg{ width:1em; height:1em; color:var(--teal); }
.nav .btn { padding:.7rem 1.15rem; font-size:.82rem; }

/* hamburger */
.burger {
  display:none; width:46px; height:46px; border:1px solid var(--line-2); background:transparent;
  cursor:pointer; position:relative; z-index:60;
}
.burger span { position:absolute; left:11px; right:11px; height:2px; background:var(--text); transition: .25s var(--ease); }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); }

.mobile-panel {
  position:fixed; inset:0; z-index:55; background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding: 5rem 1.6rem 2rem; transform: translateX(100%); transition: transform .35s var(--ease);
  border-left:none;
}
.mobile-panel.open { transform:none; }
.mobile-panel a {
  font-family:"Archivo", sans-serif; font-weight:800; font-stretch:115%; text-transform:uppercase;
  font-size:1.7rem; padding:.7rem 0; border-bottom:1px solid var(--line); letter-spacing:-.01em;
}
.mobile-panel a:hover { color:var(--teal); }
.mobile-panel .m-foot { margin-top:1.6rem; display:flex; flex-direction:column; gap:1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(7rem, 13vh, 10rem); padding-bottom: clamp(3.5rem,7vw,6rem); }
.hero-grid { display:grid; grid-template-columns: 1.05fr .85fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.hero h1 { margin:.9rem 0 1.3rem; }
.hero .sub { font-size: clamp(1.05rem,1.4vw,1.22rem); max-width: 46ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.9rem; }
.hero-data {
  display:flex; flex-wrap:wrap; gap: 1.4rem 2rem; margin-top:2.3rem; padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.hero-data .item { display:flex; flex-direction:column; gap:.15rem; }
.hero-data .k { font-family:"Chakra Petch",monospace; font-size:.72rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
.hero-data .v { font-family:"Archivo",sans-serif; font-weight:800; font-size:1.15rem; }
.hero-data .v .star { color:var(--teal); }
.hero-media .shot { aspect-ratio: 4/5; }
.hero-tag {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  font-family:"Chakra Petch",monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text); background:linear-gradient(0deg, rgba(7,11,10,.92), transparent);
  padding: 2.4rem .9rem .8rem; display:flex; justify-content:space-between;
}
.hero-tag b{ color:var(--teal); font-weight:600; }

/* ============================================================
   MARQUEE / TRUST STRIP
   ============================================================ */
.strip { border-block:1px solid var(--line); background:var(--ink-2); }
.strip .wrap { display:grid; grid-template-columns: repeat(4,1fr); gap:0; padding-block:0; }
.strip .cell {
  padding: 1.8rem clamp(1rem,2vw,1.8rem); border-left:1px solid var(--line);
  transition: background .25s; position:relative;
}
.strip .cell:first-child{ border-left:none; }
.strip .cell::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.strip .cell:hover::before{ transform:scaleX(1); }
.strip .cell:hover{ background:var(--panel); }
.strip .v { font-family:"Archivo",sans-serif; font-weight:900; font-stretch:120%; font-size:clamp(1.4rem,2.4vw,2rem); }
.strip .k { font-family:"Chakra Petch",monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; }

/* ============================================================
   SERVICES GRID (overview)
   ============================================================ */
.svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc {
  background:var(--ink); padding: 2rem 1.8rem 2.1rem; position:relative; transition: background .25s var(--ease);
}
.svc:hover { background:var(--panel); }
.svc .num { font-family:"Chakra Petch",monospace; font-size:.72rem; letter-spacing:.2em; color:var(--teal); }
.svc h3 { margin:1.1rem 0 .6rem; transition: color .2s; }
.svc:hover h3 { color:var(--teal); }
.svc p { font-size:.96rem; }
.svc .ic { width:34px; height:34px; color:var(--teal); }
.svc .tick { position:absolute; left:0; top:0; width:0; height:2px; background:var(--teal); transition:width .3s var(--ease); }
.svc:hover .tick { width:46px; }

/* ============================================================
   SHOWCASE (video) + split sections
   ============================================================ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.split.rev .media { order:2; }
.showcase-media { max-width: 360px; margin-inline:auto; }
.showcase-media .shot { aspect-ratio: 9/16; }
.feature-list { list-style:none; display:flex; flex-direction:column; gap:0; margin-top:1.6rem; }
.feature-list li {
  display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-top:1px solid var(--line);
}
.feature-list li:last-child{ border-bottom:1px solid var(--line); }
.feature-list .fi { color:var(--teal); flex:none; width:22px; height:22px; margin-top:.15rem; }
.feature-list h4 { font-family:"Archivo",sans-serif; font-size:1.02rem; font-stretch:110%; letter-spacing:0; text-transform:none; font-weight:700; color:var(--text); }
.feature-list p { font-size:.94rem; margin-top:.15rem; }

/* ============================================================
   WORK GALLERY
   ============================================================ */
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.7rem,1.4vw,1.1rem); }
.gallery .shot { aspect-ratio:4/5; }
.gallery .shot img { transition: transform 1.1s var(--ease); }
.gallery .shot:hover img { transform: scale(1.05); }
.gallery .cap {
  position:absolute; left:0; bottom:0; z-index:3; padding:.8rem .9rem;
  font-family:"Chakra Petch",monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); opacity:0; transform:translateY(6px); transition:.3s var(--ease);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.gallery .shot:hover .cap { opacity:1; transform:none; }

/* ============================================================
   PROCESS (numbered — genuinely sequential)
   ============================================================ */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.step { background:var(--ink); padding:2rem 1.6rem 2.2rem; position:relative; transition:background .25s; }
.step:hover{ background:var(--panel); }
.step .n { font-family:"Archivo",sans-serif; font-weight:900; font-stretch:125%; font-size:2.6rem; color:transparent; -webkit-text-stroke:1.5px var(--line-2); transition:.3s; }
.step:hover .n{ -webkit-text-stroke-color: var(--teal); }
.step h3 { font-size:1.1rem; margin:.7rem 0 .5rem; }
.step p { font-size:.94rem; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews { display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; }
.review {
  border:1px solid var(--line); background: var(--panel); padding:2rem 1.7rem 1.8rem;
  display:flex; flex-direction:column; position:relative; transition: border-color .25s, background .25s;
}
.review:hover { border-color: var(--line-2); background:var(--panel-2); }
.review .stars { color:var(--teal); letter-spacing:.18em; font-size:.95rem; }
.review .quote { font-size: 1.02rem; line-height:1.6; color:var(--text); margin:1rem 0 1.4rem; }
.review .quote::first-letter{ }
.review .who { margin-top:auto; display:flex; align-items:center; gap:.8rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.review .av { width:40px; height:40px; background:var(--ink); border:1px solid var(--line-2); color:var(--teal);
  display:grid; place-items:center; font-family:"Archivo"; font-weight:800; font-size:1rem; flex:none; }
.review .nm { font-family:"Archivo",sans-serif; font-weight:700; font-stretch:105%; letter-spacing:0; text-transform:none; font-size:1rem; color:var(--text); }
.review .src { font-family:"Chakra Petch",monospace; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.review .gmark{ width:13px; height:13px; }

/* ============================================================
   SERVICE AREA
   ============================================================ */
.areas { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.area-chip {
  font-family:"Chakra Petch",monospace; font-size:.82rem; letter-spacing:.06em;
  border:1px solid var(--line-2); padding:.55rem 1rem; color:var(--text);
  transition: border-color .2s, color .2s, background .2s; cursor:default;
}
.area-chip:hover{ border-color:var(--teal); color:var(--teal); background:var(--panel); }
.area-chip.home { background:var(--teal); color:#062019; border-color:var(--teal); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: var(--ink-2); border-block:1px solid var(--line); position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background: radial-gradient(70% 120% at 80% 0%, rgba(52,199,168,.13), transparent 60%); }
.cta-band .wrap { position:relative; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band h2 { max-width:18ch; }
.cta-band .r { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--ink-2); border-top:1px solid var(--line); padding-block: clamp(3rem,5vw,4.5rem) 2rem; }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
.foot-brand img { height:56px; width:auto; margin-bottom:1.1rem; }
.foot-brand p { font-size:.95rem; max-width:34ch; }
.foot col, .foot-col h4 { }
.foot-col h4 { font-family:"Chakra Petch",monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:1.1rem; }
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.foot-col a, .foot-col li { font-size:.94rem; color:var(--muted); transition:color .2s; }
.foot-col a:hover{ color:var(--teal); }
.hours-row { display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; padding:.3rem 0; }
.hours-row.closed span:last-child{ color:#8a9a94; }
.hours-row .d{ font-family:"Chakra Petch",monospace; letter-spacing:.05em; color:var(--text); }
.foot-bottom {
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:"Chakra Petch",monospace; font-size:.74rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase;
}

/* ============================================================
   PAGE HEADER (services.html)
   ============================================================ */
.page-hero { padding-top: clamp(8rem,16vh,11rem); padding-bottom: clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line); }
.crumb { font-family:"Chakra Petch",monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.crumb a:hover{ color:var(--teal); }
.page-hero h1 { font-size: clamp(2.4rem,5.5vw,4.2rem); margin:1rem 0 1.1rem; }
.page-hero p { max-width:56ch; font-size:1.1rem; }

/* package cards */
.pkgs { display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; }
.pkg { border:1px solid var(--line); background:var(--panel); padding:2.1rem 1.8rem; display:flex; flex-direction:column; transition:border-color .25s, background .25s; position:relative; }
.pkg:hover{ border-color:var(--line-2); background:var(--panel-2); }
.pkg.feat { border-color:var(--teal); }
.pkg.feat::before{ content:"Most Booked"; position:absolute; top:0; right:0; background:var(--teal); color:#062019;
  font-family:"Chakra Petch",monospace; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; padding:.35rem .7rem; font-weight:700; }
.pkg .tier { font-family:"Chakra Petch",monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); }
.pkg h3 { margin:.7rem 0 .3rem; font-size:1.4rem; }
.pkg .lead { font-size:.95rem; min-height:3em; }
.pkg .price { font-family:"Archivo",sans-serif; font-weight:800; font-stretch:115%; font-size:1.05rem; color:var(--text); margin:1.2rem 0 1.3rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.pkg .price small{ display:block; font-family:"Chakra Petch",monospace; font-weight:500; font-size:.7rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin-top:.2rem; }
.pkg ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.7rem; flex:1; }
.pkg li { display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color:var(--muted); }
.pkg li svg{ width:16px; height:16px; color:var(--teal); flex:none; margin-top:.28rem; }
.pkg .btn{ width:100%; justify-content:center; }

/* a-la-carte list */
.menu { display:grid; grid-template-columns: repeat(2,1fr); gap:0 3rem; }
.menu .row {
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--line); position:relative; transition:padding .25s var(--ease);
}
.menu .row::before{ content:""; position:absolute; left:-1rem; top:50%; width:0; height:2px; background:var(--teal); transform:translateY(-50%); transition:width .25s var(--ease); }
.menu .row:hover{ padding-left:1rem; }
.menu .row:hover::before{ width:.7rem; }
.menu .row:hover .mname{ color:var(--teal); }
.mname { font-family:"Archivo",sans-serif; font-weight:600; font-stretch:105%; text-transform:none; letter-spacing:0; font-size:1.02rem; color:var(--text); transition:color .2s; }
.mdesc { display:block; font-size:.86rem; color:var(--muted); font-family:"Barlow"; font-weight:400; margin-top:.1rem; }
.mtag { font-family:"Chakra Petch",monospace; font-size:.72rem; letter-spacing:.1em; color:var(--muted); white-space:nowrap; text-transform:uppercase; }

/* faq */
.faq { max-width: 760px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; padding:1.3rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:"Archivo",sans-serif; font-weight:700; font-stretch:105%; font-size:1.08rem; color:var(--text); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm { color:var(--teal); font-size:1.4rem; transition:transform .25s var(--ease); flex:none; font-family:"Chakra Petch"; }
.faq details[open] summary .pm{ transform:rotate(45deg); }
.faq p { padding:0 0 1.4rem; font-size:.98rem; }

/* ============================================================
   REVEAL ANIMATION (gated by .js)
   ============================================================ */
.js .reveal { opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity:1; transform:none; }
.js .stagger > * { opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .stagger.in > * { opacity:1; transform:none; }
.js .stagger.in > *:nth-child(2){ transition-delay:.07s; }
.js .stagger.in > *:nth-child(3){ transition-delay:.14s; }
.js .stagger.in > *:nth-child(4){ transition-delay:.21s; }
.js .stagger.in > *:nth-child(5){ transition-delay:.28s; }
.js .stagger.in > *:nth-child(6){ transition-delay:.35s; }

/* hero load orchestration */
.js .hero [data-rise]{ opacity:0; transform: translateY(20px); animation: rise .8s var(--ease) forwards; }
.js .hero [data-rise="1"]{ animation-delay:.05s; }
.js .hero [data-rise="2"]{ animation-delay:.16s; }
.js .hero [data-rise="3"]{ animation-delay:.27s; }
.js .hero [data-rise="4"]{ animation-delay:.38s; }
.js .hero [data-rise="5"]{ animation-delay:.5s; }
.js .hero .hero-media{ opacity:0; animation: fadein 1s var(--ease) .35s forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
@keyframes fadein { to { opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .stagger > *, .js .hero [data-rise], .js .hero .hero-media { opacity:1 !important; transform:none !important; animation:none !important; }
  .gallery .shot:hover img { transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ max-width:420px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .reviews{ grid-template-columns:1fr; }
  .pkgs{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .nav-links, .nav-phone, .nav .btn { display:none; }
  .burger{ display:block; }
  .strip .wrap{ grid-template-columns:repeat(2,1fr); }
  .strip .cell:nth-child(3){ border-left:none; }
  .strip .cell:nth-child(odd){ border-left:none; }
  .strip .cell:nth-child(n+3){ border-top:1px solid var(--line); }
  .split{ grid-template-columns:1fr; }
  .split.rev .media{ order:0; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .menu{ grid-template-columns:1fr; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 520px){
  section{ padding-block: clamp(3rem,11vw,4rem); }
  .svc-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; gap:.6rem; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-data{ gap:1.2rem 1.6rem; }
  .btn{ width:100%; justify-content:center; }
  .hero-cta .btn{ width:100%; }
}