/* ============================================================================
   WALLIS AUTO DETAIL — single-file studio site
   Architecture, motion and grid follow the Lumora spec exactly.
   Palette, imagery and copy are Wallis.
   ========================================================================== */

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:#ffffff; color:#111111; font-family:'Onest',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
:focus-visible{ outline:2px solid #8A6E2F; outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ---------- adaptive rem grid ---------- */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

/* ---------- tokens ---------- */
:root{
  --background:#ffffff; --foreground:#111111;
  --ink:#0a0a0a; --muted:#8d8d8d; --subtle:#b6b6b6;
  --line:#e6e5e2; --surface:#f1f0ee; --surface-2:#e3e2df;
  /* Wallis gold. The bright tone reads on ink; the deep tone carries
     enough contrast to be legible as text on white (≈4.6:1). */
  --accent:#8A6E2F; --accent-bright:#C9A24B; --accent-lt:#F0D89A;
  --accent-from:#C9A24B; --accent-to:#7A5F26;
  --radius-pill:9999px; --radius-card:2rem; --radius-card-sm:1.25rem; --radius-control:0.875rem;
  --text-watermark:13rem; --container-shell:88rem;
}
.shell{ max-width:88rem; margin-inline:auto }

/* ---------- skip link ---------- */
.skip{ position:fixed; left:1rem; top:1rem; z-index:60; border-radius:.875rem;
  background:#0a0a0a; padding:.5rem 1rem; font-size:.875rem; color:#fff;
  transform:translateY(-200%); transition:transform .2s }
.skip:focus{ transform:none }

/* ---------- reveal primitives ---------- */
.rv{ opacity:0; transform:translateY(var(--rv-y,20px)) scale(var(--rv-s,1));
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1) }
.rv.in{ opacity:1; transform:none }
.line{ display:block; overflow:hidden }
.line>span{ display:block; transform:translateY(102%); opacity:0;
  transition:transform .9s cubic-bezier(.215,.61,.355,1), opacity .9s cubic-bezier(.215,.61,.355,1) }
.line.in>span{ transform:none; opacity:1 }
.wr{ display:inline-block; transform:translateY(24px); opacity:0;
  transition:transform .7s cubic-bezier(.165,.84,.44,1), opacity .7s cubic-bezier(.165,.84,.44,1) }
.wr.in{ transform:none; opacity:1 }

/* ---------- shared components ---------- */
.pill{ display:inline-block }
.pill>span{ display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px;
  font-size:.875rem; font-weight:500; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.pill:hover>span{ transform:scale(1.04) }
.pill.dark>span{ background:#0a0a0a; color:#fff }
.pill.light>span{ background:#f1f0ee; color:#111 }
.pill.outline>span{ border:1px solid #e6e5e2; background:transparent; color:#111 }
.pill.arw>span{ padding:.375rem .375rem .375rem 1.5rem }
.pill.noarw>span{ padding:.875rem 1.75rem }
.pill .badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:9999px; font-size:1rem; flex:0 0 auto }
.pill.dark .badge{ background:#fff; color:#0a0a0a }
.pill.light .badge,.pill.outline .badge{ background:#0a0a0a; color:#fff }
.pill .badge svg{ transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.pill.a-right:hover .badge svg{ transform:translate(3px,0) }
.pill.a-up:hover .badge svg{ transform:translate(2px,-2px) }

.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500;
  color:rgba(17,17,17,.7) }
.eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:rgba(17,17,17,.5) }
.eyebrow.light{ color:rgba(255,255,255,.7) }
.eyebrow.light::before{ background:rgba(255,255,255,.6) }
.eyebrow.boxed{ border:1px solid #e6e5e2; border-radius:9999px; padding:.375rem 1rem }

.chip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:9999px; padding:.5rem 1rem; font-size:.875rem }

.alink{ display:inline-flex }
.alink>span{ display:inline-block; opacity:.65; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s }
.alink:hover>span{ transform:translateX(4px); opacity:1 }
.alink.sm>span{ opacity:.7 }
.alink.sm:hover>span{ transform:translateX(3px); opacity:1 }

/* ============================ LOADER ============================ */
#loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2rem; background:#0a0a0a; color:#fff;
  border-radius:0 0 2rem 2rem; transform:translateY(0); }
#loader.out{ transform:translateY(-100%); transition:transform .75s cubic-bezier(.22,1,.36,1) }
#loader .mid{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center;
  transition:opacity .6s ease, transform .6s ease }
#loader.out .mid{ opacity:0; transform:translateY(-12px) }
#loader .brand{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:1.5rem }
#loader .brand svg{ font-size:1.875rem; color:var(--accent-bright) }
#loader .tag{ max-width:26ch; font-size:.875rem; color:rgba(255,255,255,.55) }
#loader .prog{ width:min(22rem,72vw); display:flex; flex-direction:column; gap:.75rem }
#loader .track{ height:1px; background:rgba(255,255,255,.15) }
#loader .fill{ height:100%; width:0%; background:var(--accent-bright); transition:width .1s ease-out }
#loader .row{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) }
#loader .num{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.8) }
@media (min-width:640px){ #loader .brand{ font-size:1.875rem } }

/* ============================ HEADER ============================ */
#header{ position:absolute; inset-inline:0; top:0; z-index:50;
  opacity:0; transform:translateY(-14px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1) }
#header.in{ opacity:1; transform:none }
#header .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
.brandbtn>span{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600;
  letter-spacing:-.01em; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.brandbtn:hover>span{ transform:scale(1.04) }
.brandbtn svg{ font-size:1.25rem; color:var(--accent) }
.brandbtn .sub{ font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(17,17,17,.45); margin-left:.15rem }
#header nav.main{ display:none }
#header nav.main ul{ display:flex; gap:2rem; font-size:.875rem; font-weight:500 }
#header nav.main button>span{ display:inline-block; opacity:.8; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s }
#header nav.main button:hover>span{ transform:translateY(-2px); opacity:1 }
#header .caret{ font-size:.75rem; opacity:.6 }
#header .right{ display:flex; align-items:center; gap:.75rem }
.clock{ display:none; align-items:center; border:1px solid rgba(230,229,226,.8);
  background:rgba(255,255,255,.4); backdrop-filter:blur(4px); border-radius:.875rem;
  padding:.5rem .75rem; gap:.75rem; font-size:.75rem; color:rgba(17,17,17,.7) }
.clock .lbl{ color:rgba(17,17,17,.45) }
.clock .t{ min-width:3.5rem; font-variant-numeric:tabular-nums; font-weight:500; color:#111 }
.clock .sep{ color:rgba(17,17,17,.3) }
.clock .d{ font-weight:500 }
#menuBtn{ border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.4);
  backdrop-filter:blur(4px); border-radius:.875rem; transition:background-color .3s }
#menuBtn:hover{ background:rgba(255,255,255,.7) }
#menuBtn>span{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem;
  font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  transition:transform .35s cubic-bezier(.2,.8,.2,1) }
#menuBtn:hover>span{ transform:scale(1.05) }
#menuBtn svg{ font-size:.875rem }
#menuBtn .word{ display:none }
@media (min-width:640px){ #header .bar{ padding:1.5rem 2rem } #menuBtn .word{ display:inline } }
@media (min-width:768px){ .clock{ display:flex } }
@media (min-width:1024px){ #header nav.main{ display:flex } }

/* ============================ HERO ============================ */
#home{ position:relative; isolation:isolate; overflow:hidden;
  border-radius:0 0 2rem 2rem; background:#c9c9c9 }
#liquid{ position:absolute; inset:0; z-index:0 }
#liquid img,#liquid canvas{ position:absolute; inset:0; width:100%; height:100% }
#liquid img{ object-fit:cover }
#liquid canvas{ pointer-events:none }
.vignette{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,10,10,.55), rgba(10,10,10,.15), rgba(10,10,10,.72)) }
#heroMark{ pointer-events:none; position:absolute; inset-inline:0; bottom:7rem; z-index:1;
  text-align:center; user-select:none; font-weight:700; line-height:1;
  font-size:var(--text-watermark); color:rgba(255,255,255,.16);
  opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1) }
#heroMark.in{ opacity:1; transform:none }
.hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem;
  padding:7rem 1.25rem 5rem }
.hero-l{ display:flex; flex-direction:column; gap:1.75rem }
.hero h1{ max-width:16ch; font-size:2.25rem; font-weight:600; line-height:.98; letter-spacing:-.02em;
  color:#fff; text-shadow:0 18px 50px rgba(0,0,0,.6) }
.hero .lede{ max-width:46ch; font-size:.95rem; color:rgba(255,255,255,.8) }
.hero .eyebrow{ color:rgba(255,255,255,.8) } .hero .eyebrow::before{ background:rgba(255,255,255,.6) }
.rating{ display:flex; align-items:center; gap:.75rem }
.rating .stars{ color:var(--accent-bright); display:inline-flex; gap:.1rem; font-size:1rem }
.rating .txt{ font-size:.875rem; font-weight:500; color:rgba(255,255,255,.8) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero .pill.outline>span{ border-color:rgba(255,255,255,.5); color:#fff }
.hero .pill.outline .badge{ background:#fff; color:#0a0a0a }
.hero-r{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem }
.hcard{ width:100%; max-width:24rem; border-radius:1.25rem; background:rgba(255,255,255,.72);
  padding:.5rem; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(230,229,226,.7);
  backdrop-filter:blur(12px) }
.hcard .inner{ display:flex; gap:.5rem; cursor:pointer; border-radius:.875rem }
.hcard .tile{ aspect-ratio:1; width:6rem; display:grid; place-items:center; border-radius:.875rem;
  background:#0a0a0a; font-size:1.875rem; color:var(--accent-bright); flex:0 0 auto }
.hcard .panel{ flex:1; border-radius:.875rem; background:rgba(241,240,238,.7); padding:.75rem;
  display:flex; flex-direction:column; justify-content:space-between; min-width:0 }
.hcard .slot{ position:relative; min-height:3.25rem }
.hcard .item{ position:absolute; inset:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s }
.hcard .cap{ font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45) }
.hcard .ttl{ max-width:9rem; font-size:.875rem; font-weight:500; line-height:1.35 }
.hcard .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem }
.hcard .dots{ display:flex; gap:.25rem }
.hcard .dot{ height:.25rem; border-radius:9999px; width:.375rem; background:rgba(17,17,17,.2); transition:all .3s }
.hcard .dot.on{ width:1rem; background:rgba(17,17,17,.7) }
.hcard .navs{ display:flex; gap:.25rem }
.hcard .navs button{ width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:9999px;
  background:#fff; color:rgba(17,17,17,.7); box-shadow:0 0 0 1px #e6e5e2; transition:color .2s }
.hcard .navs button:hover{ color:#111 }
.partners{ width:100%; max-width:24rem }
.partners .lbl{ margin-bottom:.75rem; font-size:.75rem; font-weight:500; color:rgba(255,255,255,.6) }
.partners ul{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:1rem; row-gap:.75rem }
.partners li>span{ display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:rgba(255,255,255,.75);
  opacity:.85; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s }
.partners li:hover>span{ transform:translateY(-2px); opacity:1 }
.partners svg{ font-size:.875rem; color:rgba(255,255,255,.5) }
.statusbar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  border-top:1px solid rgba(255,255,255,.18); padding:1.25rem; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.7);
  position:relative; z-index:20; opacity:0; transition:opacity .8s ease }
.statusbar.in{ opacity:1 }
.statusbar .mid{ display:none }
@media (min-width:640px){
  .hero-grid{ padding-inline:2rem } .statusbar{ padding-inline:2rem } .statusbar .mid{ display:block }
  .hero h1{ font-size:3rem } .partners ul{ grid-template-columns:repeat(4,1fr) }
}
@media (min-width:768px){ .hero h1{ font-size:3.75rem } }
@media (min-width:1024px){
  .hero-grid{ display:grid; min-height:100lvh; grid-template-columns:repeat(12,1fr);
    gap:2.5rem; padding:9rem 2rem 7rem; align-content:center }
  .hero-l{ grid-column:span 7 } .hero-r{ grid-column:span 5; align-items:flex-end }
  .hcard,.partners{ max-width:19rem } .partners .lbl{ text-align:right }
}

/* ============================ ABOUT ============================ */
#about{ background:#fff }
#about .grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem }
.globe-wrap{ position:relative; min-height:14rem }
.globe-bg{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%);
  font-size:12rem; color:rgba(17,17,17,.08) }
.globe-note{ position:relative; margin-top:auto; display:flex; align-items:center; gap:.75rem;
  font-size:.875rem; color:rgba(17,17,17,.7) }
.globe-note svg{ font-size:1.5rem; color:#111; flex:0 0 auto }
.globe-note span{ max-width:16rem }
.stmt{ display:flex; flex-direction:column; gap:2.5rem }
.stmt h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em }
.stmt .dim{ color:var(--muted) }
.stmt .foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; border-top:1px solid #e6e5e2; padding-top:1.5rem }
.socials{ display:flex; gap:.5rem; margin-top:.5rem }
.socials a{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:.875rem }
.socials svg{ transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.socials a:hover svg{ transform:scale(1.18) }
.socials .s1{ background:var(--accent); color:#fff }
.socials .s2{ background:#f1f0ee; color:rgba(17,17,17,.7) }
@media (min-width:640px){ #about .grid{ padding-inline:2rem } .stmt h2{ font-size:1.875rem } .globe-bg{ font-size:16rem } }
@media (min-width:1024px){
  #about .grid{ grid-template-columns:1fr 1fr; padding-block:7rem }
  .globe-wrap{ min-height:20rem; display:flex; flex-direction:column }
  .globe-bg{ left:-1.5rem; font-size:20rem }
}

/* ============================ BAND ============================ */
.band{ background:#fff }
.band ul{ display:flex; flex-direction:column; gap:.75rem; padding:2.5rem 1.25rem }
.band li{ flex:1 }
.band .tile{ display:grid; place-items:center; height:6rem; border-radius:9999px;
  font-size:1.875rem; font-weight:500; transition:transform .4s cubic-bezier(.2,.8,.2,1) }
.band .tile:hover{ transform:scale(1.03) }
.band .t-light{ background:#f1f0ee; color:#111 }
.band .t-accent{ background:linear-gradient(to bottom right,var(--accent-from),var(--accent-to)); color:#fff }
.band .t-dark{ background:#0a0a0a; color:#fff }
.band .t-ghost{ background:rgba(241,240,238,.6); color:rgba(17,17,17,.35) }
@media (min-width:640px){
  .band ul{ flex-direction:row; gap:1rem; padding-inline:2rem }
  .band .tile{ height:10rem; font-size:2.25rem }
  .band .t-dark svg{ font-size:3rem }
}

/* ============================ WORK ============================ */
#works{ background:#fff }
#works .wrap{ padding:2.5rem 1.25rem 5rem }
.center-head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center;
  margin-bottom:3rem }
.center-head h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; width:fit-content }
.cards{ display:grid; grid-template-columns:1fr; gap:1.5rem }
.card{ position:relative; min-height:22rem; overflow:hidden; border-radius:2rem; background:#0a0a0a;
  padding:1.5rem; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.05); display:block;
  transition:transform .45s cubic-bezier(.2,.8,.2,1) }
.card:hover{ transform:translateY(-8px) scale(1.012) }
.card .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .6s }
.card:hover .bg{ transform:scale(1.06); opacity:.62 }
.card .veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 35%, rgba(10,10,10,.92) 100%) }
.card .meta{ position:relative; display:flex; justify-content:space-between; align-items:flex-start;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.65) }
.card .arw{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px;
  background:rgba(255,255,255,.1); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15);
  transition:transform .4s cubic-bezier(.2,.8,.2,1); flex:0 0 auto }
.card:hover .arw{ transform:rotate(45deg) scale(1.08) }
.card .btm{ position:absolute; inset-inline:1.5rem; bottom:1.5rem }
.card h3{ font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
.card p{ margin-top:.5rem; max-width:28rem; font-size:.875rem; color:rgba(255,255,255,.7) }
.card .tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem }
@media (min-width:640px){
  #works .wrap{ padding-inline:2rem } .center-head h2{ font-size:3rem }
  .card{ min-height:26rem; padding:2rem } .card .btm{ inset-inline:2rem; bottom:2rem }
  .card h3{ font-size:1.875rem }
}
@media (min-width:768px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ #works .wrap{ padding-bottom:7rem } }

/* ============================ SERVICES ============================ */
#services{ background:#fff }
#services .wrap{ padding:5rem 1.25rem }
#services h2{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
.srow{ border-top:1px solid #e6e5e2 }
.srow:first-child{ border-top:0 }
.srow a{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding:1.5rem;
  background:rgba(241,240,238,0);
  transition:background-color .5s cubic-bezier(.2,.8,.2,1), padding .5s cubic-bezier(.2,.8,.2,1) }
.srow a:hover{ background:rgba(241,240,238,1); padding-left:2rem; padding-right:1.25rem }
.srow .n{ width:1.75rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.4); flex:0 0 auto }
.srow h3{ flex:1; font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
.srow p{ display:none; max-width:20rem; font-size:.875rem; color:rgba(17,17,17,.55) }
.srow .go{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:9999px;
  background:#0a0a0a; color:#fff; flex:0 0 auto; transition:transform .4s cubic-bezier(.2,.8,.2,1) }
.srow a:hover .go{ transform:translateX(5px) }
@media (min-width:640px){
  #services .wrap{ padding-inline:2rem } #services h2{ margin-bottom:3.5rem; font-size:3rem }
  .srow a{ gap:1.5rem; padding-block:2rem } .srow .n{ width:2.5rem }
  .srow h3{ font-size:1.875rem } .srow .go{ width:3rem; height:3rem }
}
@media (min-width:768px){ .srow h3{ font-size:2.25rem } }
@media (min-width:1024px){ #services .wrap{ padding-block:7rem } .srow p{ display:block } }

/* ============================ TRUST PANEL ============================ */
.trust{ background:#fff }
.trust .wrap{ padding:0 1.25rem 5rem }
.panel{ border-radius:2rem; background:#0a0a0a; padding:3rem 1.5rem; color:#fff }
.panel h2{ margin-top:1rem; max-width:22ch; font-size:1.875rem; font-weight:500; letter-spacing:-.01em }
.badges{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:2.5rem }
.badges strong{ display:block; font-size:1.25rem; font-weight:600; letter-spacing:-.01em; color:var(--accent-lt) }
.badges span{ display:block; margin-top:.75rem; font-size:.875rem; color:rgba(255,255,255,.55) }
.quotes{ margin-top:3.5rem; display:grid; grid-template-columns:1fr; gap:2rem;
  border-top:1px solid rgba(255,255,255,.1); padding-top:3rem }
.quotes blockquote{ font-size:.95rem; line-height:1.7; color:rgba(255,255,255,.8) }
.quotes figcaption{ margin-top:1rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent-bright) }
@media (min-width:640px){ .trust .wrap{ padding-inline:2rem } .panel{ padding:4rem 2rem } .panel h2{ font-size:2.25rem } }
@media (min-width:768px){ .panel{ padding-inline:4rem } .quotes{ grid-template-columns:1fr 1fr; gap:3rem } }
@media (min-width:1024px){ .trust .wrap{ padding-bottom:7rem } .badges{ grid-template-columns:repeat(4,1fr) } }

/* ============================ FOOTER ============================ */
footer{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:#0a0a0a; color:#fff }
footer .wrap{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
.fcta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1);
  padding-bottom:4rem }
.fcta h2{ max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
.fcols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
.fcols h3{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4) }
.fcols ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; font-size:.875rem }
.fbrand .nm{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 }
.fbrand svg{ font-size:1.25rem; color:var(--accent-bright) }
.fbrand p{ margin-top:1rem; max-width:22rem; font-size:.875rem; color:rgba(255,255,255,.55) }
.fbrand .tel{ display:inline-block; margin-top:1.25rem; font-size:1.5rem; font-weight:600;
  color:var(--accent-lt) }
.legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.45) }
.legal .r{ display:flex; gap:1.5rem }
#footMark{ position:absolute; inset-inline:0; bottom:-1.5rem; z-index:0; text-align:center;
  pointer-events:none; user-select:none; font-weight:700; line-height:1;
  font-size:var(--text-watermark); color:rgba(255,255,255,.05) }
@media (min-width:640px){
  footer .wrap{ padding-inline:2rem } .fcta h2{ font-size:3rem }
  .legal{ flex-direction:row }
}
@media (min-width:768px){ .fcols{ grid-template-columns:repeat(2,1fr) } .fcta h2{ font-size:3.75rem } }
@media (min-width:1024px){
  footer .wrap{ padding-top:6rem }
  .fcta{ flex-direction:row; align-items:flex-end; justify-content:space-between }
  .fcols{ grid-template-columns:repeat(4,1fr) }
}

/* ============================ NAV OVERLAY ============================ */
#nav{ position:fixed; inset:0; z-index:115; display:none; flex-direction:column;
  background:#0a0a0a; color:#fff; opacity:0; transition:opacity .5s cubic-bezier(.22,1,.36,1) }
#nav.show{ display:flex } #nav.on{ opacity:1 }
#nav .top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
#nav .bnd{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 }
#nav .bnd svg{ font-size:1.25rem; color:var(--accent-bright) }
#closeNav{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15);
  border-radius:.875rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; color:rgba(255,255,255,.7); transition:border-color .3s, color .3s }
#closeNav:hover{ border-color:rgba(255,255,255,.4); color:#fff }
#nav .mid{ flex:1; display:flex; flex-direction:column; justify-content:center }
#nav ul{ display:flex; flex-direction:column; gap:.25rem }
#nav .item{ display:flex; gap:1rem; width:100%; padding-block:.5rem; text-align:left;
  font-size:2.25rem; font-weight:600; letter-spacing:-.02em;
  transform:translateY(1rem); opacity:0; transition:all .5s ease-out }
#nav.on .item{ transform:none; opacity:1 }
#nav .item .ix{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
#nav .item .lb{ color:rgba(255,255,255,.7); transition:color .3s }
#nav .item:hover .ix{ color:var(--accent-bright) }
#nav .item:hover .lb{ color:#fff }
#nav .btm{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem 1.25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em;
  color:rgba(255,255,255,.45) }
#nav .btm button{ color:rgba(255,255,255,.7); transition:color .3s }
#nav .btm button:hover{ color:#fff; text-decoration:underline }
@media (min-width:640px){
  #nav .top{ padding:1.5rem 2rem } #nav .item{ font-size:3.75rem }
  #nav .btm{ flex-direction:row; justify-content:space-between; padding-inline:2rem }
}

/* ============================ MODAL ============================ */
#modal{ position:fixed; inset:0; z-index:110; display:none; align-items:flex-end; justify-content:center;
  padding:1rem; background:rgba(17,17,17,.35); backdrop-filter:blur(16px); opacity:0; transition:opacity .4s }
#modal.show{ display:flex } #modal.on{ opacity:1 }
#modal .pnl{ position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:2rem;
  background:#fff; padding:1.5rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.35), 0 0 0 1px #e6e5e2;
  transform:translateY(28px); transition:transform .5s cubic-bezier(.22,1,.36,1) }
#modal.on .pnl{ transform:none }
#closeModal{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid;
  place-items:center; border-radius:9999px; background:#f1f0ee; color:rgba(17,17,17,.6); transition:.2s }
#closeModal:hover{ background:#e3e2df; color:#111 }
#modal .head{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.375rem }
#modal .kick{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500;
  color:rgba(17,17,17,.6) }
#modal .kick::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:var(--accent) }
#modal h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
#modal form{ display:flex; flex-direction:column; gap:1rem }
#modal label{ display:flex; flex-direction:column; gap:.4rem }
#modal .cap{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(17,17,17,.5) }
#modal input,#modal select,#modal textarea{ width:100%; border:1px solid #e6e5e2;
  background:rgba(241,240,238,.5); border-radius:.875rem; padding:.75rem 1rem; font-size:.875rem;
  font-family:inherit; outline:none; transition:.2s }
#modal textarea{ resize:none }
#modal input:focus,#modal select:focus,#modal textarea:focus{ border-color:rgba(17,17,17,.3); background:#fff }
#modal .err{ font-size:.75rem; color:#b4402f }
#modal .btm{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
#modal .note{ font-size:.75rem; color:rgba(17,17,17,.45) }
#modal .done{ display:none; flex-direction:column; align-items:center; text-align:center;
  padding-block:2rem; gap:1rem }
#modal .done .mark{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px;
  background:#0a0a0a; color:var(--accent-bright); font-size:1.5rem }
#modal .done p{ max-width:34ch; font-size:.875rem; color:rgba(17,17,17,.6) }
#modal .setup{ margin-top:1rem; border:1px dashed rgba(138,110,47,.5); border-radius:.875rem;
  padding:.75rem .9rem; font-size:.72rem; line-height:1.5; color:rgba(17,17,17,.55) }
#modal .setup code{ font-family:ui-monospace,Menlo,monospace; color:var(--accent) }
@media (min-width:640px){ #modal{ align-items:center } #modal .pnl{ padding:2rem } #modal h2{ font-size:1.875rem } }

/* ============================ SHARED SECTION BITS ============================ */
.sec{ background:#fff }
.sec .wrap{ padding:5rem 1.25rem }
.sec h2.big{ margin:1.25rem 0 1.5rem; max-width:18ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
.sec .lede{ max-width:62ch; font-size:1rem; color:rgba(17,17,17,.6) }
.dark-sec{ background:#0a0a0a; color:#fff; border-radius:2rem; overflow:hidden }
.dark-sec .lede{ color:rgba(255,255,255,.6) }
.dark-sec .eyebrow{ color:rgba(255,255,255,.7) } .dark-sec .eyebrow::before{ background:rgba(255,255,255,.6) }
@media (min-width:640px){ .sec .wrap{ padding-inline:2rem } .sec h2.big{ font-size:3rem } }
@media (min-width:1024px){ .sec .wrap{ padding-block:7rem } }

/* wide cinematic plate */
.plate{ position:relative; margin:2.5rem 0; border-radius:2rem; overflow:hidden; background:#0a0a0a }
.plate img,.plate video{ width:100%; aspect-ratio:21/9; object-fit:cover; display:block }
.plate video{ position:absolute; inset:0; height:100%; opacity:0; transition:opacity .8s ease }
.plate video.on{ opacity:1 }
.plate figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.5rem; z-index:2;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; color:var(--accent-lt);
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.85)) }
@media (max-width:640px){ .plate img,.plate video{ aspect-ratio:16/10 } }

/* numbered lists */
.steps{ counter-reset:s; display:grid; gap:1px; background:rgba(255,255,255,.12);
  border-radius:1.25rem; overflow:hidden; margin-top:2.5rem }
.steps li{ counter-increment:s; background:#0a0a0a; padding:1.5rem 1.5rem 1.5rem 4.25rem; position:relative }
.steps li::before{ content:"0" counter(s); position:absolute; left:1.5rem; top:1.6rem;
  font-size:.75rem; letter-spacing:.1em; color:var(--accent-bright) }
.steps h4{ font-size:1.05rem; font-weight:600; margin-bottom:.4rem }
.steps p{ font-size:.9rem; color:rgba(255,255,255,.6) }
.proc{ counter-reset:pp; display:grid; gap:2rem; margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) }
.proc li{ counter-increment:pp; padding-top:1.25rem; border-top:2px solid var(--accent) }
.proc li::before{ content:"Step " counter(pp); display:block; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.65rem }
.proc h4{ font-size:1.15rem; font-weight:600; margin-bottom:.45rem }
.proc p{ font-size:.9rem; color:rgba(17,17,17,.6) }
.dark-sec .proc li{ border-top-color:var(--accent-bright) }
.dark-sec .proc li::before{ color:var(--accent-bright) }
.dark-sec .proc p{ color:rgba(255,255,255,.6) }

/* split */
.split{ display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; margin-top:2.5rem }
.split p{ font-size:.95rem; color:rgba(17,17,17,.6) }
.split p+p{ margin-top:1rem }
.dark-sec .split p{ color:rgba(255,255,255,.6) }
.split h3{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.9rem }
.split figure{ border-radius:1.25rem; overflow:hidden; background:#15171b }
.split figure img{ width:100%; aspect-ratio:16/10; object-fit:cover }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr } }

/* before / after compare */
.cmp{ position:relative }
.cmp .stage{ position:relative; overflow:hidden; border-radius:1.25rem; aspect-ratio:4/3;
  background:#15171b; cursor:ew-resize; touch-action:pan-y }
.cmp .stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.cmp .aft{ position:absolute; inset:0; width:50%; overflow:hidden }
.cmp .aft img{ width:auto; min-width:100%; }
.cmp .hdl{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent-bright);
  box-shadow:0 0 22px rgba(201,162,75,.7); pointer-events:none }
.cmp .grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2.5rem; height:2.5rem;
  border-radius:9999px; border:1px solid var(--accent-bright); background:rgba(10,10,10,.8);
  display:grid; place-items:center; color:var(--accent-bright); font-size:.8rem }
.cmp .tag{ position:absolute; bottom:.75rem; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(10,10,10,.7); color:var(--accent-lt); padding:.3rem .55rem; border-radius:2px; pointer-events:none }
.cmp .tag.l{ left:.75rem } .cmp .tag.r{ right:.75rem }
.cmp input[type=range]{ width:100%; margin-top:.9rem; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer }
.cmp input[type=range]::-webkit-slider-runnable-track{ height:2px; background:rgba(201,162,75,.4) }
.cmp input[type=range]::-moz-range-track{ height:2px; background:rgba(201,162,75,.4) }
.cmp input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--accent-bright); border:2px solid #0a0a0a; margin-top:-8px }
.cmp input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%;
  background:var(--accent-bright); border:2px solid #0a0a0a }

/* ppf film svg */
.film{ border-radius:1.25rem; padding:1.25rem; background:#0f1216 }
.film svg{ width:100%; height:auto }
.film .pct{ margin-top:.6rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-bright) }
.checks{ display:grid; gap:.6rem; margin:1.25rem 0 }
.checks li{ position:relative; padding-left:1.6rem; font-size:.92rem; color:rgba(17,17,17,.6) }
.dark-sec .checks li{ color:rgba(255,255,255,.6) }
.checks li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-right:1.5px solid var(--accent-bright); border-bottom:1.5px solid var(--accent-bright);
  transform:rotate(45deg) translateY(-3px) }
.fine{ font-size:.8rem; color:rgba(17,17,17,.45); margin-top:1rem; line-height:1.55 }
.dark-sec .fine{ color:rgba(255,255,255,.4) }

/* panels (marine / rv) */
.panels{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:2.5rem }
.panels article{ border-radius:1.5rem; overflow:hidden; background:#f1f0ee }
.panels img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.panels .bd{ padding:1.5rem }
.panels h3{ font-size:1.35rem; font-weight:600; margin-bottom:.5rem }
.panels p{ font-size:.9rem; color:rgba(17,17,17,.6) }
@media (min-width:768px){ .panels{ grid-template-columns:1fr 1fr } }

/* plans */
.plans{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:2.5rem }
.plans article{ border:1px solid #e6e5e2; border-radius:1.5rem; padding:2rem; display:flex;
  flex-direction:column; gap:.9rem; align-items:flex-start }
.plans h3{ font-size:1.35rem; font-weight:600 }
.plans p{ font-size:.9rem; color:rgba(17,17,17,.6) }
.plans .pill{ margin-top:auto }
@media (min-width:768px){ .plans{ grid-template-columns:1fr 1fr } }

/* gallery */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 }
.chips button{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.6rem 1rem;
  border-radius:9999px; border:1px solid #e6e5e2; color:rgba(17,17,17,.55); transition:.25s }
.chips button:hover{ color:#111; border-color:var(--accent) }
.chips button.on{ background:#0a0a0a; border-color:#0a0a0a; color:#fff }
.shots{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr)) }
.shots li[hidden]{ display:none }
.shots button{ display:block; width:100%; border-radius:1rem; overflow:hidden; background:#15171b; position:relative; cursor:zoom-in }
.shots img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1) }
.shots button:hover img{ transform:scale(1.06) }
#lb{ position:fixed; inset:0; z-index:118; display:none; align-items:center; justify-content:center;
  gap:1rem; padding:clamp(1rem,4vw,3rem); background:rgba(6,7,9,.96); backdrop-filter:blur(6px) }
#lb.show{ display:flex }
#lb img{ max-height:80svh; max-width:100%; width:auto; border-radius:1rem }
#lb figcaption{ margin-top:.9rem; font-size:.85rem; color:rgba(255,255,255,.6); text-align:center }
#lb .nv,#lb .cl{ width:3rem; height:3rem; border-radius:9999px; border:1px solid rgba(255,255,255,.25);
  color:#fff; display:grid; place-items:center; font-size:1.4rem; flex:0 0 auto; transition:.2s }
#lb .nv:hover,#lb .cl:hover{ background:rgba(255,255,255,.12) }
#lb .cl{ position:absolute; top:1rem; right:1rem }
@media (max-width:640px){ #lb .nv{ position:absolute; bottom:1.2rem } #lb .nv.p{ left:24% } #lb .nv.n{ right:24% } }

/* contact */
#contact .grid{ display:grid; gap:3rem; grid-template-columns:1fr; align-items:start }
#contact .tel{ display:inline-block; margin:1.25rem 0; font-size:2.25rem; font-weight:700;
  letter-spacing:-.02em; color:var(--accent) }
#contact dl{ display:grid; gap:1rem; margin-top:1rem }
#contact dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem }
#contact dd{ margin:0; font-size:.92rem; color:rgba(17,17,17,.6) }
@media (min-width:900px){ #contact .grid{ grid-template-columns:1fr 1fr } }


/* ppf gloss demo */
.film{ cursor:crosshair }
.film svg{ display:block }
#lightBare,#lightFilm,#lightCore{ transition:cx .10s linear, cy .10s linear }
#lblBare,#lblFilm{ transition:opacity .5s ease; font-weight:600 }
.film .pct #fHint{ color:rgba(255,255,255,.35); text-transform:none; letter-spacing:.06em }
@media (prefers-reduced-motion:reduce){ #lightBare,#lightFilm,#lightCore{ transition:none } }

/* ============================ MULTI-PAGE ADDITIONS ============================ */
#header{ position:sticky; top:0; background:rgba(255,255,255,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:background-color .3s, border-color .3s }
#header.stuck{ background:rgba(255,255,255,.96); border-bottom-color:var(--line) }
#header nav.main ul{ align-items:center }
#header nav.main a{ font-size:.85rem; font-weight:500; color:rgba(17,17,17,.65); transition:color .2s;
  display:inline-flex; align-items:center; gap:.25rem; padding:.4rem 0 }
#header nav.main a:hover,#header nav.main a.cur{ color:#111 }
#header nav.main a.cur{ box-shadow:inset 0 -1px 0 var(--accent) }
.hasSub{ position:relative }
.sub{ position:absolute; left:-1rem; top:100%; min-width:15rem; padding:.65rem 0;
  background:#fff; border:1px solid var(--line); border-radius:.875rem;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.35); opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.22s ease; z-index:20 }
.hasSub:hover .sub,.hasSub:focus-within .sub{ opacity:1; visibility:visible; transform:none }
.sub a{ display:block !important; padding:.55rem 1rem !important; font-size:.85rem }
.sub a:hover{ background:var(--surface) }
.hdr-tel{ display:none; flex-direction:column; gap:0; text-decoration:none }
.hdr-tel .lbl{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(17,17,17,.45) }
.hdr-tel .t{ font-weight:600; font-size:.95rem; color:#111 }
.hdr-book{ display:none }
@media (min-width:768px){ .hdr-tel{ display:flex } }
@media (min-width:1024px){ .hdr-book{ display:inline-block } }

.crumbs{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding:1.25rem; font-size:.75rem; color:rgba(17,17,17,.45) }
.crumbs a{ color:rgba(17,17,17,.6) } .crumbs a:hover{ color:var(--accent); text-decoration:underline }
.crumbs em{ font-style:normal; opacity:.4 }
@media (min-width:640px){ .crumbs{ padding-inline:2rem } }

.phero{ padding:2rem 1.25rem 3rem }
.phero.narrow .shell{ max-width:52rem }
.phero h1{ font-size:2.25rem; font-weight:700; letter-spacing:-.03em; line-height:1.02; margin:.75rem 0 1.25rem }
.phero .lede{ max-width:60ch; font-size:1.05rem; color:rgba(17,17,17,.6) }
.phero .hero-cta{ margin-top:1.75rem }
@media (min-width:640px){ .phero{ padding-inline:2rem } .phero h1{ font-size:3.25rem } }
@media (min-width:1024px){ .phero h1{ font-size:4rem } }

.prose .blk{ max-width:68ch; margin-bottom:2.25rem }
.prose h2{ font-size:1.6rem; font-weight:600; letter-spacing:-.015em; margin-bottom:.7rem }
.prose h3{ font-size:1.3rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.6rem }
.prose p{ color:rgba(17,17,17,.62); font-size:1rem; line-height:1.72 }
.prose strong{ color:#111; font-weight:600 }
.narrow-wrap{ max-width:56rem }

.prices{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin:2.5rem 0 1rem }
@media (min-width:700px){ .prices{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)) } }
.pcard{ border:1px solid var(--line); border-radius:1.25rem; padding:1.75rem; display:flex;
  flex-direction:column; gap:.6rem; align-items:flex-start; background:#fff }
.pcard h3{ font-size:1.15rem; font-weight:600 }
.pcard .amt{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; color:var(--accent) }
.pcard .amt em{ font-style:normal; font-size:.9rem; font-weight:500; color:rgba(17,17,17,.5) }
.pcard p{ font-size:.9rem; color:rgba(17,17,17,.6) }
.pcard .pill{ margin-top:auto; padding-top:.5rem }
.quoteonly{ margin-top:1.5rem; padding:1.25rem 1.5rem; border-left:3px solid var(--accent);
  background:var(--surface); border-radius:0 .875rem .875rem 0; font-size:.95rem; color:rgba(17,17,17,.7) }
.caveat{ border-left:3px solid var(--line); padding-left:1rem }

.rel-h{ font-size:1.4rem; font-weight:600; letter-spacing:-.015em; margin-bottom:1.5rem }
.rcards{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)) }
.rcard{ position:relative; display:block; min-height:15rem; border-radius:1.5rem; overflow:hidden;
  background:#0a0a0a; transition:transform .45s cubic-bezier(.2,.8,.2,1) }
.rcard.tall{ min-height:19rem }
.rcard:hover{ transform:translateY(-6px) }
.rcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;
  transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .5s }
.rcard:hover img{ transform:scale(1.06); opacity:.68 }
.rcard .veil{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.25),rgba(10,10,10,.9)) }
.rc-b{ position:absolute; left:1.35rem; right:1.35rem; bottom:1.25rem; z-index:2;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; color:#fff }
.rc-b strong{ font-size:1.2rem; font-weight:600; letter-spacing:-.01em; flex:1 }
.rc-b em{ font-style:normal; width:2rem; height:2rem; display:grid; place-items:center;
  border-radius:9999px; background:rgba(255,255,255,.14); font-size:.85rem;
  transition:transform .4s cubic-bezier(.2,.8,.2,1) }
.rcard:hover .rc-b em{ transform:rotate(45deg) }
.rc-d{ flex-basis:100%; font-size:.82rem; color:rgba(255,255,255,.6); line-height:1.5 }

.acards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)) }
.acard{ border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem; display:flex;
  flex-direction:column; gap:.4rem; transition:.25s; position:relative }
.acard:hover{ border-color:var(--accent); background:var(--surface) }
.acard strong{ font-size:1.15rem; font-weight:600; padding-right:2.5rem }
.acard span{ font-size:.85rem; color:rgba(17,17,17,.55); line-height:1.5 }
.acard em{ position:absolute; right:1.25rem; top:1.35rem; font-style:normal; color:var(--accent);
  transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.acard:hover em{ transform:translate(2px,-2px) }

.arealinks{ display:flex; flex-wrap:wrap; gap:.6rem }
.arealinks a{ border:1px solid var(--line); border-radius:9999px; padding:.6rem 1.1rem;
  font-size:.85rem; color:rgba(17,17,17,.65); transition:.22s }
.arealinks a:hover{ border-color:var(--accent); color:#111; background:var(--surface) }
.arealinks.big a{ font-size:.95rem; padding:.75rem 1.35rem }
.areastrip{ font-size:.95rem; color:rgba(17,17,17,.6); line-height:1.9 }
.areastrip a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.big-checks li{ font-size:1rem; padding-left:1.8rem; margin-bottom:.55rem }

.faqsec{ background:var(--surface) }
.faqs{ margin-top:2rem; border-top:1px solid var(--line); max-width:64rem }
.faq{ border-bottom:1px solid var(--line) }
.faq summary{ cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-size:1.05rem; font-weight:600; letter-spacing:-.01em }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; position:absolute; right:.5rem; top:1.2rem; font-size:1.4rem;
  font-weight:400; color:var(--accent); transition:transform .25s }
.faq[open] summary::after{ transform:rotate(45deg) }
.faq div{ padding:0 2.5rem 1.5rem 0 }
.faq p{ color:rgba(17,17,17,.62); line-height:1.72 }

.ctaband{ background:#0a0a0a; color:#fff; padding:clamp(3rem,7vw,5rem) 1.25rem }
.ctaband h2{ font-size:2rem; font-weight:700; letter-spacing:-.025em }
.ctaband p{ margin-top:.75rem; color:rgba(255,255,255,.6); max-width:48ch }
.ctaband .row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem }
.pill.outline-l>span{ border:1px solid rgba(255,255,255,.35); color:#fff; padding:.875rem 1.75rem;
  border-radius:9999px; display:inline-flex; align-items:center }
.pill.outline-l:hover>span{ border-color:#fff; background:rgba(255,255,255,.08) }
@media (min-width:640px){ .ctaband{ padding-inline:2rem } .ctaband h2{ font-size:2.6rem } }

.calcsec{ background:var(--surface) }
.calc{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:2.5rem;
  border:1px solid var(--line); border-radius:1.5rem; background:#fff; padding:1.75rem }
.calc-in{ display:grid; gap:1rem }
.calc label{ display:flex; flex-direction:column; gap:.4rem }
.calc .cap{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(17,17,17,.5); font-weight:500 }
.calc select{ width:100%; border:1px solid var(--line); background:var(--surface);
  border-radius:.875rem; padding:.8rem 1rem; font-size:.95rem; font-family:inherit; color:#111 }
.calc-out{ border-left:0; border-top:1px solid var(--line); padding-top:1.5rem }
.calc-amt{ font-size:2.6rem; font-weight:700; letter-spacing:-.03em; color:var(--accent); margin:.35rem 0 .5rem }
.calc-note{ font-size:.88rem; color:rgba(17,17,17,.55); max-width:34ch; line-height:1.6 }
.calc .row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem }
@media (min-width:860px){
  .calc{ grid-template-columns:1.1fr 1fr; padding:2.25rem }
  .calc-out{ border-top:0; border-left:1px solid var(--line); padding:0 0 0 2.25rem }
}

.embedbox{ border:1px dashed var(--accent); border-radius:1.5rem; padding:2rem; background:var(--surface);
  display:flex; flex-direction:column; gap:.9rem; align-items:flex-start }
.embedbox .cap{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600 }
.embedbox p{ color:rgba(17,17,17,.65); max-width:52ch }
.embedbox a[href^="tel"]{ color:var(--accent); text-decoration:underline }

.leadform{ display:grid; gap:1.1rem; max-width:40rem; margin-top:1.5rem }
.leadform label{ display:flex; flex-direction:column; gap:.4rem }
.leadform .cap{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(17,17,17,.5); font-weight:500 }
.leadform input,.leadform select,.leadform textarea{ width:100%; border:1px solid var(--line);
  background:var(--surface); border-radius:.875rem; padding:.85rem 1rem; font-size:.95rem;
  font-family:inherit; color:#111; outline:none; transition:.2s }
.leadform textarea{ resize:vertical }
.leadform input:focus,.leadform select:focus,.leadform textarea:focus{ border-color:var(--accent); background:#fff }
.leadform .err{ font-size:.78rem; color:#b4402f }
.leadform .btm{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem }
.leadform .note{ font-size:.8rem; color:rgba(17,17,17,.45) }
.leadform .setup{ border:1px dashed rgba(138,110,47,.5); border-radius:.875rem; padding:.75rem .9rem;
  font-size:.72rem; line-height:1.5; color:rgba(17,17,17,.55) }
.leadform .setup code{ font-family:ui-monospace,Menlo,monospace; color:var(--accent) }
.done{ display:none; flex-direction:column; align-items:flex-start; gap:1rem; margin-top:1.5rem }
.done .mark{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px;
  background:#0a0a0a; color:var(--accent-bright); font-size:1.5rem }
.done h2{ font-size:1.5rem; font-weight:600 }
.done p{ max-width:44ch; color:rgba(17,17,17,.6) }
.done a[href^="tel"]{ color:var(--accent); text-decoration:underline }

.bigquote{ border-left:3px solid var(--accent); padding:.25rem 0 .25rem 1.75rem; margin-bottom:2.5rem }
.bigquote blockquote{ font-size:1.1rem; line-height:1.75; color:rgba(17,17,17,.72) }
.bigquote blockquote::before{ content:"\201C" } .bigquote blockquote::after{ content:"\201D" }
.bigquote figcaption{ margin-top:1rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent) }

.bigtel{ display:inline-block; margin:1.25rem 0; font-size:2.4rem; font-weight:700;
  letter-spacing:-.03em; color:var(--accent) }
.bigtel:hover{ color:#111 }
.facts{ display:grid; gap:1.1rem; margin-top:.5rem; max-width:44rem }
.facts dt{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem }
.facts dd{ margin:0; font-size:.95rem; color:rgba(17,17,17,.6) }

.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:.6rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(10px) }
.mbar .pill{ flex:1 } .mbar .pill>span{ width:100%; justify-content:center }
@media (min-width:768px){ .mbar{ display:none } }
@media (max-width:767px){ footer{ padding-bottom:6rem } }

#nav .item{ text-decoration:none }
.hero .rating .txt strong{ color:#fff; font-weight:600 }

/* ---- HOME: header floats over the cinematic hero, as it did originally ---- */
body.home #header{
  position:fixed; background:transparent; backdrop-filter:none; border-bottom-color:transparent;
}
body.home #header.stuck{
  background:rgba(10,10,10,.92); backdrop-filter:blur(14px);
  border-bottom-color:rgba(201,162,75,.25);
}
body.home .brandbtn span{ color:#fff }
body.home .brandbtn svg{ color:var(--accent-bright) }
body.home .brandbtn .sub{ color:rgba(255,255,255,.55) }
body.home #header nav.main a{ color:rgba(255,255,255,.7) }
body.home #header nav.main a:hover,
body.home #header nav.main a.cur{ color:#fff }
body.home #header nav.main a.cur{ box-shadow:inset 0 -1px 0 var(--accent-bright) }
body.home .hdr-tel .lbl{ color:rgba(255,255,255,.5) }
body.home .hdr-tel .t{ color:#fff }
body.home #menuBtn{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff }
body.home #menuBtn:hover{ background:rgba(255,255,255,.14) }
body.home .hdr-book>span{ background:var(--accent-bright); color:#12100a }
/* dropdown stays light so it reads against the photo */
body.home .sub a{ color:rgba(17,17,17,.7) !important }
body.home .sub a:hover{ color:#111 !important }
/* the hero owns the full viewport again */
body.home #home{ margin-top:0 }

/* ============================ INSIGHTS PAGE ============================ */
.verify{ border:1px solid var(--line); border-radius:1.5rem; padding:1.75rem; background:#fff }
.v-head{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between }
.v-head .cap{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:.3rem }
.v-actions{ display:flex; gap:.5rem }
.v-actions .pill>span{ padding:.6rem 1.1rem; font-size:.78rem }
.v-note{ margin-top:1rem; font-size:.88rem; color:rgba(17,17,17,.55); line-height:1.65; max-width:70ch }
.v-stats{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); margin:1.5rem 0 }
.v-stat{ border:1px solid var(--line); border-radius:.875rem; padding:1rem; background:var(--surface) }
.v-stat strong{ display:block; font-size:1.6rem; font-weight:700; letter-spacing:-.02em; color:var(--accent) }
.v-stat span{ display:block; margin-top:.2rem; font-size:.72rem; color:rgba(17,17,17,.55); word-break:break-word }
.v-empty{ grid-column:1/-1; background:#fff; border-style:dashed }
.v-empty strong{ font-size:1rem; color:#111 }
.v-log{ max-height:26rem; overflow-y:auto; border:1px solid var(--line); border-radius:.875rem }
.v-log:empty{ display:none }
.v-row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline; padding:.6rem .9rem;
  border-bottom:1px solid var(--line); font-size:.78rem }
.v-row:last-child{ border-bottom:0 }
.v-row code{ font-family:ui-monospace,Menlo,monospace; color:var(--accent); font-weight:600 }
.v-pg{ color:rgba(17,17,17,.5) }
.v-x{ flex:1; color:rgba(17,17,17,.45) }
.v-x em{ font-style:normal; color:rgba(17,17,17,.35) }
.v-ts{ color:rgba(17,17,17,.35); font-variant-numeric:tabular-nums }

.evlist .ev summary{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.ev summary code{ font-family:ui-monospace,Menlo,monospace; font-size:.82rem; color:var(--accent); font-weight:600 }
.ev-t{ flex:1; font-weight:500; font-size:.95rem; color:rgba(17,17,17,.7) }
.tier{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:.28rem .6rem; border-radius:9999px; white-space:nowrap }
.t-critical{ background:#0a0a0a; color:var(--accent-bright) }
.t-high{ background:var(--accent); color:#fff }
.t-medium{ background:var(--surface-2); color:rgba(17,17,17,.7) }
.t-low,.t-baseline{ background:var(--surface); color:rgba(17,17,17,.5) }
.ev-what{ font-weight:500; color:#111 !important; margin-bottom:.7rem }
.ev-fields{ margin-top:1rem; padding:.9rem 1.1rem; background:var(--surface); border-radius:.875rem }
.ev-flabel{ display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:.5rem }
.ev-fields ul{ display:grid; gap:.35rem }
.ev-fields li{ font-size:.82rem; color:rgba(17,17,17,.6); font-family:ui-monospace,Menlo,monospace }

/* ============================ AVIATION QUOTE ============================ */
.avqsec{ background:var(--surface) }
.avq{ margin-top:2.5rem }
.avq-add{ display:grid; gap:1rem; grid-template-columns:1fr; align-items:end;
  background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.5rem }
.avq-add .cap{ display:block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(17,17,17,.5); font-weight:600; margin-bottom:.45rem }
.avq-add input,.avq-add select{ width:100%; border:1px solid var(--line); background:var(--surface);
  border-radius:.875rem; padding:.85rem 1rem; font:inherit; font-size:.95rem; color:#111; outline:none }
.avq-add input:focus,.avq-add select:focus{ border-color:var(--accent); background:#fff }
.avq-add .pill>span{ width:100%; justify-content:center; padding:.9rem 1.5rem }
@media (min-width:820px){ .avq-add{ grid-template-columns:1fr 1.2fr auto } }
.avq-count{ margin:.75rem .25rem 0; font-size:.78rem; color:rgba(17,17,17,.45) }

.avq-fleet{ display:grid; gap:1.25rem; margin:1.75rem 0 }
.avq-empty{ border:1px dashed var(--line); border-radius:1.25rem; padding:2.5rem 1.5rem;
  text-align:center; color:rgba(17,17,17,.5); font-size:.95rem; background:#fff }
.avq-card{ background:#fff; border:1px solid var(--line); border-radius:1.5rem; overflow:hidden }
.avq-card header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.35rem 1.5rem; border-bottom:1px solid var(--line); background:var(--surface) }
.avq-cat{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600 }
.avq-card h3{ margin-top:.3rem; font-size:1.15rem; font-weight:600; letter-spacing:-.01em }
.avq-card h3 span{ display:block; font-size:.9rem; font-weight:400; color:rgba(17,17,17,.55); margin-top:.15rem }
.avq-rm{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(17,17,17,.45);
  border:1px solid var(--line); border-radius:9999px; padding:.4rem .8rem; background:#fff; flex:0 0 auto }
.avq-rm:hover{ color:#b4402f; border-color:#e0b5ae }

.avq-svcs{ display:grid }
.avq-svc{ display:grid; grid-template-columns:auto 1fr auto; gap:.75rem 1rem; align-items:center;
  padding:.9rem 1.5rem; border-bottom:1px solid var(--line); cursor:pointer; transition:background-color .18s }
.avq-svc:last-child{ border-bottom:0 }
.avq-svc:hover{ background:var(--surface) }
.avq-svc.on{ background:rgba(138,110,47,.05) }
.avq-svc input{ width:1.15rem; height:1.15rem; accent-color:var(--accent); flex:0 0 auto }
.avq-n{ font-size:.95rem; font-weight:500; min-width:0 }
.avq-n em{ display:block; font-style:normal; font-size:.78rem; font-weight:400;
  color:rgba(17,17,17,.5); margin-top:.15rem }
.avq-h{ font-size:.75rem; color:rgba(17,17,17,.45); font-variant-numeric:tabular-nums;
  grid-column:2; justify-self:start }
.avq-p{ font-size:1rem; font-weight:600; color:var(--accent); text-align:right;
  grid-column:3; grid-row:1/3; display:flex; flex-direction:column; align-items:flex-end; gap:.4rem }
.avq-p em{ display:block; font-style:normal; font-size:.68rem; font-weight:400; color:rgba(17,17,17,.45) }
.avq-quote{ font-size:.82rem; font-weight:500; color:rgba(17,17,17,.6); text-align:right; line-height:1.4 }
.avq-qty{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line);
  border-radius:9999px; padding:.15rem .35rem; background:#fff }
.avq-qty button{ width:1.5rem; height:1.5rem; border-radius:9999px; font-size:1rem; line-height:1;
  color:var(--accent); background:var(--surface) }
.avq-qty button:hover{ background:var(--surface-2) }
.avq-qty b{ font-size:.85rem; min-width:1.2rem; text-align:center; font-variant-numeric:tabular-nums }
@media (min-width:700px){
  .avq-svc{ grid-template-columns:auto 1fr 8rem auto; }
  .avq-h{ grid-column:3; justify-self:end }
  .avq-p{ grid-column:4; grid-row:1; min-width:8rem }
}
.avq-card footer{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.5rem; background:var(--surface); font-size:.85rem; color:rgba(17,17,17,.55) }
.avq-sub{ font-weight:700; font-size:1.05rem; color:#111 }

.avq-total{ display:grid; gap:1.5rem; grid-template-columns:1fr; background:#0a0a0a; color:#fff;
  border-radius:1.5rem; padding:1.75rem }
.avq-total .cap{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-bright); font-weight:600 }
.avq-amt{ font-size:2.8rem; font-weight:700; letter-spacing:-.03em; margin:.35rem 0 .3rem }
.avq-hrs{ font-size:1.25rem; font-weight:600; margin:.35rem 0 .3rem; color:var(--accent-lt) }
.avq-meta{ font-size:.85rem; color:rgba(255,255,255,.5) }
.avq-notes{ margin-top:.75rem; display:grid; gap:.4rem }
.avq-notes li{ font-size:.8rem; color:rgba(255,255,255,.55); padding-left:1rem; position:relative; line-height:1.5 }
.avq-notes li::before{ content:""; position:absolute; left:0; top:.55em; width:4px; height:4px;
  background:var(--accent-bright); transform:rotate(45deg) }
.avq-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.25rem }
.avq-actions .pill.dark>span{ background:var(--accent-bright); color:#12100a }
.avq-actions .pill.outline>span{ border-color:rgba(255,255,255,.35); color:#fff }
.avq-actions .pill[disabled]{ opacity:.4; pointer-events:none }
@media (min-width:820px){ .avq-total{ grid-template-columns:1fr 1.15fr; padding:2.25rem } }

/* quote handed to the booking page */
.avq-carry{ border:1px solid var(--accent); border-radius:1.25rem; padding:1.25rem 1.5rem;
  background:var(--surface); margin-bottom:1.5rem }
.avq-carry .cap{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:.6rem }
.avq-carry pre{ font-family:ui-monospace,Menlo,monospace; font-size:.8rem; line-height:1.6;
  white-space:pre-wrap; color:rgba(17,17,17,.72); margin:0 }
.avq-hd-r{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto }
.avq-tail{ width:6.5rem; border:1px solid var(--line); border-radius:9999px; padding:.4rem .85rem;
  font:inherit; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; background:#fff; outline:none }
.avq-tail:focus{ border-color:var(--accent) }
.avq-tail::placeholder{ text-transform:none; letter-spacing:0; color:rgba(17,17,17,.35) }

/* ============================ SQUARE BOOKING ============================ */
.sqbox{ border:1px solid var(--line); border-radius:1.5rem; padding:1.25rem; background:#fff; min-height:8rem }
.sqbox iframe{ width:100% !important; border:0; border-radius:1rem }
.sq-fallback{ padding:1.5rem .5rem; text-align:center; color:rgba(17,17,17,.6); font-size:.95rem; line-height:1.6 }
.sq-fallback a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px }
.sq-note{ margin-top:1rem }
.note-sm{ font-size:.78rem; color:rgba(17,17,17,.45); margin-top:.25rem }

/* ============================ RATE CARD ============================ */
.ptable{ margin-bottom:2.5rem }
.ptable h3,.plist h3,.incl h3{ font-size:1.15rem; font-weight:600; letter-spacing:-.01em; margin-bottom:1rem }
.ptable-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:1.25rem; background:#fff }
.ptable table{ width:100%; border-collapse:collapse; min-width:32rem }
.ptable th,.ptable td{ padding:.9rem 1.1rem; text-align:right; font-size:.95rem; border-bottom:1px solid var(--line) }
.ptable thead th{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; background:var(--surface) }
.ptable tbody th{ text-align:left; font-weight:500 }
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{ border-bottom:0 }
.ptable td{ font-variant-numeric:tabular-nums; font-weight:600 }

.prow{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-bottom:2.5rem }
@media (min-width:900px){ .prow{ grid-template-columns:1.4fr 1fr } }
.plist{ margin-bottom:0 }
.plist ul{ border:1px solid var(--line); border-radius:1.25rem; overflow:hidden; background:#fff }
.plist li{ display:flex; gap:1rem; align-items:baseline; justify-content:space-between;
  padding:.9rem 1.25rem; border-bottom:1px solid var(--line) }
.plist li:last-child{ border-bottom:0 }
.pl-n{ font-size:.95rem; font-weight:500 }
.pl-n em{ display:block; font-style:normal; font-size:.78rem; font-weight:400;
  color:rgba(17,17,17,.5); margin-top:.15rem }
.pl-p{ font-size:.95rem; font-weight:700; color:var(--accent); white-space:nowrap;
  font-variant-numeric:tabular-nums; text-align:right }

.incl{ margin-top:1rem }
.incl-g{ display:grid; gap:1.5rem; grid-template-columns:1fr }
@media (min-width:700px){ .incl-g{ grid-template-columns:1fr 1fr } }
.incl h4{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:.75rem }
.incl .checks li{ font-size:.9rem; padding-left:1.5rem }

.guarantee{ margin-top:2.5rem; border:1px solid var(--accent); border-radius:1.5rem;
  padding:1.75rem; background:linear-gradient(180deg, rgba(138,110,47,.06), transparent) }
.guarantee h3{ font-size:1.15rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.6rem }
.guarantee p{ font-size:1rem; color:rgba(17,17,17,.7); max-width:60ch; line-height:1.7 }

.calc-tax{ font-size:.8rem; color:rgba(17,17,17,.5); margin-top:-.2rem }
.calc-in input{ width:100%; border:1px solid var(--line); background:var(--surface);
  border-radius:.875rem; padding:.8rem 1rem; font:inherit; font-size:.95rem; color:#111 }
.calc-in input:focus{ border-color:var(--accent); background:#fff; outline:none }
.includes{ display:grid; gap:2rem; grid-template-columns:1fr; margin-top:1rem }
@media (min-width:900px){ .includes{ grid-template-columns:1fr 1fr } }
.includes .incl{ border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem; background:#fff; margin:0 }
.calc-lines{ display:grid; grid-template-columns:1fr auto; gap:.45rem 1rem; margin:.75rem 0 1rem;
  font-size:.88rem; color:rgba(17,17,17,.6) }
.calc-lines dt{ text-align:left }
.calc-lines dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:500; color:#111 }
.calc-lines .tot{ padding-top:.55rem; border-top:1px solid var(--line); font-weight:700; color:#111 }
.calc-lines dd.tot{ color:var(--accent); font-size:1rem }