/* ============================================================================
   Elite Media 360 · Google Maps landing page
   Standalone. Palette and type follow the Elite Media 360 brand: near-black
   with an ember accent, Bricolage Grotesque for display, Instrument Sans for
   body, a monospace for labels. Light mode follows the visitor's device.

   Ember marks the one action on each page and the guarantee. --gain appears
   only on the month-3 calls bar, which is a real measured result.
   ========================================================================== */

:root{
  --ink:#FAF8F5; --surface:#FFFFFF; --surface-2:#F3EFE9;
  --rule:rgba(24,18,12,.14); --rule-soft:rgba(24,18,12,.09);
  --text:#14131A; --muted:#5A5761;
  --ember:#B8410C; --ember-hi:#8F320A; --gain:#0F6E4F; --on-ember:#FFFFFF;
  --track:rgba(24,18,12,.24);
  /* Google Maps design language, used for map tiles, pins, stars and action chips only */
  --map-land:#EFECE6; --map-road:#FFFFFF; --map-road-major:#F6E2AC; --map-park:#CDE8CF; --map-water:#AED3F2;
  --pin:#D93025; --star:#E8A200; --open:#188038; --gm-blue:#1A73E8;
  --shadow-lg:0 30px 80px rgba(24,18,12,.14); --shadow-md:0 16px 40px rgba(24,18,12,.12); --shadow-color:rgba(24,18,12,.2);
  --display:"Bricolage Grotesque",Arial,sans-serif;
  --body:"Instrument Sans",Arial,sans-serif;
  --data:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --gutter:clamp(20px,5vw,72px); --max:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
/* Light for everyone by default, including on phones set to dark — the page is
   an ad, and it should look the same to every visitor until they say otherwise.
   Dark applies only when someone presses the switch. The ember accent lightens
   there because #B8410C, which carries contrast on paper, goes muddy on
   near-black. */
:root[data-theme="dark"]{
  --ink:#08080A; --surface:#101014; --surface-2:#151519;
  --rule:rgba(255,255,255,.12); --rule-soft:rgba(255,255,255,.08);
  --text:#F4F4F5; --muted:rgba(255,255,255,.62);
  --ember:#FF6B2C; --ember-hi:#FF9A5C; --gain:#FF9A5C; --on-ember:#08080A;
  --track:#55555d;
  --map-land:#101217; --map-road:#1b1e25; --map-road-major:#272b34; --map-park:#11261b; --map-water:#0e1c2c;
  --pin:#EA4335; --star:#FBBC04; --open:#81C995; --gm-blue:#8AB4F8;
  --shadow-lg:0 34px 100px rgba(0,0,0,.55); --shadow-md:0 18px 50px rgba(0,0,0,.4); --shadow-color:rgba(0,0,0,.5);
  color-scheme:dark;
}

/* Theme switch. Two glyphs in one button, only one ever visible, so the control
   never changes width as it toggles. */
.lf-theme{
  flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;padding:0;
  border:1px solid var(--rule);border-radius:999px;background:none;color:var(--text);
  cursor:pointer;transition:border-color .2s,background .2s;
}
.lf-theme:hover{border-color:var(--text)}
.lf-theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
/* The glyph shows the mode you'd switch TO, which is what the label says.
   Showing the current mode instead reads as a status light, and people then
   click it expecting nothing to happen. */
.lf-theme .i-sun{display:none}
.lf-theme .i-moon{display:block}
:root[data-theme="dark"] .lf-theme .i-sun{display:block}
:root[data-theme="dark"] .lf-theme .i-moon{display:none}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.15}
p{max-width:68ch}
strong{font-weight:600}
::selection{background:var(--ember);color:var(--on-ember)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{margin:0;font-family:var(--data);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow .tick{display:inline-block;width:10px;height:13px;margin-right:3px;vertical-align:-1px;font-size:0;background:var(--pin);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill-rule='evenodd' d='M12 0C5.4 0 0 5.4 0 12c0 9 12 20 12 20s12-11 12-20C24 5.4 18.6 0 12 0zm0 16.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill-rule='evenodd' d='M12 0C5.4 0 0 5.4 0 12c0 9 12 20 12 20s12-11 12-20C24 5.4 18.6 0 12 0zm0 16.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") center/contain no-repeat}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:56ch}
.em{color:var(--ember)}
section{border-top:1px solid var(--rule-soft)}
.pad{padding-block:clamp(48px,6vw,84px)}
.sec-head{margin-bottom:clamp(24px,3vw,36px)}
.sec-head h2{margin-top:12px;max-width:22ch;text-wrap:balance}
.sec-head .lede{margin:14px 0 0}

.skip-link{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-150%);padding:10px 14px;background:var(--ember);color:var(--on-ember);font-weight:700;border-radius:2px}
.skip-link:focus-visible{transform:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 25px;border:1px solid var(--rule);border-radius:999px;background:none;color:var(--text);
  font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .3s ease,background .3s,border-color .3s,box-shadow .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ember);border-color:var(--ember);color:var(--on-ember);font-weight:700}
.btn-primary:hover{background:var(--ember-hi);border-color:var(--ember-hi)}
.btn-ghost:hover{border-color:var(--text)}
.btn:disabled{cursor:not-allowed;opacity:.5;transform:none}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transition:none;transform:none}}

/* ---------- brand lockup ---------- */
.brand{display:inline-flex;align-items:center;gap:.52em;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.brand-mark{width:1.62em;height:1.62em;flex:none;display:block;margin-top:-.06em}
.brand-word span{color:var(--ember)}
@keyframes brand-rise{from{transform:translateY(30px)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:no-preference){.brand-sun{animation:brand-rise 900ms var(--ease) 120ms both}}

/* ---------- header / footer ---------- */
.lf-head{border-bottom:1px solid var(--rule-soft)}
.lf-head__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.lf-head__tag{margin:0;font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}
@media (max-width:640px){.lf-head__tag{display:none}}

.lf-foot{border-top:1px solid var(--rule-soft);padding-block:32px 44px;font-size:14px;color:var(--muted)}
.lf-foot__in{display:grid;gap:10px}
.lf-foot p{margin:0;max-width:none}
.lf-foot a{text-decoration:underline;text-underline-offset:3px}
.lf-foot__links{display:flex;flex-wrap:wrap;gap:8px 20px}
.lf-foot__links button{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:640px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-md);font-size:14px}
.consent p{margin:0;flex:1 1 280px;color:var(--muted)}
.consent div{display:flex;gap:10px}
.consent .btn{padding:11px 16px;font-size:11px}

/* ---------- floating CTA ----------
   Appears once the real form has scrolled out of sight and hides again when it
   comes back, so there is never a floating button pointing at something already
   on screen. It sits below the cookie banner's z-index and is hidden outright
   while that banner is open — two stacked bars at the bottom of a phone is how
   you lose the one tap that matters. */
.lf-cta{
  position:fixed;z-index:80;left:50%;translate:-50% 8px;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:min(560px,calc(100vw - 32px));
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),translate .28s var(--ease);
}
.lf-cta.is-on{opacity:1;pointer-events:auto;translate:-50% 0}
.lf-cta .btn{width:100%;box-shadow:var(--shadow-md)}
@media (min-width:720px){
  .lf-cta{left:auto;right:24px;translate:0 8px;width:auto}
  .lf-cta.is-on{translate:0 0}
  .lf-cta .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .lf-cta{transition:none}
}

/* ---------- shared bits ---------- */
.lf-fine{margin:0;font-size:13px;color:var(--muted)}
.lf-fine a{text-decoration:underline;text-underline-offset:3px}
.lf-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lf-list li{position:relative;padding-left:26px;max-width:58ch}
.lf-list li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--ember)}
.lf-list--quiet li::before{background:var(--muted)}

/* ---------- forms ---------- */
.lf-form{display:grid;gap:14px;max-width:560px}
.lf-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.lf-form__row{grid-template-columns:minmax(0,1fr)}}
.lf-field label{display:block;margin-bottom:7px;font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lf-field input{width:100%;padding:14px;border:1px solid var(--rule);border-radius:2px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;transition:border-color .2s}
.lf-field input::placeholder{color:var(--muted);opacity:.7}
.lf-field input:focus{outline:none;border-color:var(--ember)}
.lf-field input:focus-visible{box-shadow:0 0 0 1px var(--ember)}
.lf-opt{text-transform:none;letter-spacing:0}
.lf-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer}
.lf-check input{flex:none;width:17px;height:17px;margin-top:3px;accent-color:var(--ember)}
.lf-error{margin:0;font-size:14px;color:var(--ember-hi)}
.lf-submit{width:100%;padding:17px 25px;font-size:13px}

/* ---------- opt-in hero ---------- */
.lf-hero{border-top:0;padding-block:clamp(28px,4vw,52px) clamp(40px,6vw,80px)}
.lf-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,5vw,76px);align-items:start}
@media (max-width:920px){.lf-hero__grid{grid-template-columns:minmax(0,1fr)}}
.lf-hero h1{font-size:clamp(2.1rem,3.7vw,3.4rem);margin:14px 0 16px;max-width:19ch;text-wrap:balance}
.lf-hero h1 .em{display:block}
.lf-hero .lede{margin:0 0 20px;font-size:clamp(1.02rem,1.4vw,1.2rem)}
.lf-inside{margin:30px 0 12px;font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lf-unlock{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--rule-soft);border-radius:12px;background:var(--surface)}
.lf-unlock__play{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ember);color:var(--on-ember);font-size:12px}
.lf-unlock p{margin:0;font-size:14px}
.lf-unlock small{display:block;color:var(--muted);font-size:12px}
@media (max-width:560px){.lf-unlock{display:none}}

.lf-strip{padding-block:22px}
.lf-strip__in{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lf-strip strong{color:var(--text)}

/* Spam trap: kept out of sight and out of the tab order. */
.lf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- hero proof cards (right column of the opt-in) ----------
   A lead card with the calls curve, a before/after pair of real screenshots,
   and three stat tiles. Everything here is the client's own numbers. */
.pf{display:grid;gap:12px;align-content:start;width:100%;max-width:540px;justify-self:end}
@media (max-width:920px){.pf{justify-self:stretch;max-width:none}}
.pf-card{border:1px solid var(--rule);border-radius:16px;background:var(--surface);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
a.pf-card:hover{border-color:var(--ember);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){a.pf-card:hover{transform:none}}
.pf-lead{padding:20px 22px 22px;box-shadow:var(--shadow-md)}
.pf-kicker{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pf-dot{width:7px;height:7px;border-radius:50%;background:var(--gain);box-shadow:0 0 0 4px color-mix(in srgb,var(--gain) 22%,transparent)}
.pf-big{display:flex;align-items:baseline;gap:12px;margin:0;font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.02em}
.pf-arrow{font-size:.55em;color:var(--muted)}
.pf-to{color:var(--gain)}
.pf-sub{margin:8px 0 18px;font-size:14px;color:var(--muted)}
.pf-bars{display:grid;gap:9px}
.pf-bar{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:12px}
.pf-bar span{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pf-bar i{display:block;height:10px;width:max(var(--w),6px);border-radius:5px;background:var(--track)}
.pf-bar--gain i{background:var(--gain)}
.pf-bar b{font-family:var(--data);font-size:13px;text-align:right}
.pf-bar--gain b{color:var(--gain)}
.pf-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-shot{display:block;overflow:hidden}
/* height:auto matters: without it the img's height attribute wins over the
   aspect ratio and each card grows to the full screenshot height. */
/* The real screenshots are cropped by object-fit, so this shows through at the
   edges. It follows the surface token — a fixed dark value reads as a hole
   punched in the page now that the page is light. */
.pf-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top;background:var(--surface-2);border-bottom:1px solid var(--rule-soft)}
.pf-shot p{margin:0;padding:10px 12px 12px;font-size:14px;font-weight:600;line-height:1.3}
.pf-shot small{display:block;margin-top:2px;font-weight:400;font-size:12px;color:var(--muted)}
.pf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pf-tile{display:block;padding:14px 14px 13px}
.pf-tile strong{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1}
.pf-tile span{display:block;margin-top:7px;font-size:12px;line-height:1.35;color:var(--muted)}
.pf-note{margin:2px 2px 0;font-size:12px;line-height:1.45;color:var(--muted)}
@media (max-width:380px){.pf-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pf-tiles > :last-child{grid-column:1 / -1}}
/* The one moment on this page that moves: the bars fill, in month order. */
@media (prefers-reduced-motion:no-preference){
  .pf-bar i{animation:pfGrow .9s var(--ease) both;animation-delay:calc(.3s + var(--d) * .18s)}
}
@keyframes pfGrow{from{width:6px}}

/* ---------- screenshot lightbox ---------- */
.lb{width:min(1100px,94vw);max-height:92vh;padding:0;border:1px solid var(--rule);border-radius:14px;background:var(--surface);color:var(--text);overflow:auto}
.lb::backdrop{background:rgba(24,18,12,.58)}
.lb figure{margin:0}
/* The screenshots are letterboxed by object-fit, so this fills the gap either
   side. It has to follow the surface, or it reads as a hole punched in the page. */
.lb img{width:100%;height:auto;max-height:80vh;object-fit:contain;background:var(--surface-2)}
.lb figcaption{padding:12px 16px 14px;font-size:14px;color:var(--muted)}
.lb-close{position:sticky;float:right;top:8px;margin:8px 8px -44px 0;z-index:1;width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--text);font-size:20px;line-height:1;cursor:pointer}

/* Watch page: the map-pack illustration sits beside the 3 ranking factors. */
.lf-why{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.lf-why{grid-template-columns:minmax(0,1fr)}}
.lf-factors--stack{grid-template-columns:minmax(0,1fr)}

/* ---------- map pack illustration ---------- */
.mp{margin:0;justify-self:center;width:min(360px,100%)}
.mp-phone{position:relative;padding:14px 12px 18px;border:1px solid var(--rule);border-radius:34px;background:var(--surface);box-shadow:var(--shadow-lg)}
.mp-phone::before{content:"";display:block;width:84px;height:6px;margin:2px auto 12px;border-radius:6px;background:var(--rule)}
.mp-search{display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--rule-soft);border-radius:999px;background:var(--surface-2);font-size:14px}
.mp-search svg{width:16px;height:16px;flex:none;color:var(--muted)}
.mp-caret{width:1px;height:16px;margin-left:-5px;background:var(--ember)}
.mp-map{
  position:relative;height:132px;margin:12px 0 10px;border-radius:14px;overflow:hidden;background-color:var(--map-land);
  background-image:
    radial-gradient(circle at 16% 82%,var(--map-park) 0 30px,transparent 31px),
    radial-gradient(ellipse 58px 34px at 86% 16%,var(--map-park) 0 98%,transparent 100%),
    linear-gradient(122deg,transparent 60%,var(--map-water) 60% 70%,transparent 70%),
    linear-gradient(28deg,transparent 47%,var(--map-road-major) 47% 53%,transparent 53%),
    linear-gradient(var(--map-road) 3px,transparent 3px),
    linear-gradient(90deg,var(--map-road) 3px,transparent 3px);
  background-size:auto,auto,auto,auto,44px 44px,44px 44px;
}
.mp-pin{position:absolute;width:24px;height:24px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;background:var(--pin);box-shadow:0 4px 10px var(--shadow-color)}
.mp-pin b{transform:rotate(45deg);font:700 11px/1 Roboto,Arial,sans-serif;color:#fff}
.mp-pin--you{background:var(--surface);border:2px dashed var(--muted);box-shadow:none}
.mp-pin--you b{color:var(--muted)}
.mp-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mp-card{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--rule-soft);border-radius:12px;background:var(--ink)}
.mp-rank{font:700 12px/1 Roboto,Arial,sans-serif;color:var(--pin)}
.mp-name{display:block;font-weight:600;font-size:14px;line-height:1.25}
.mp-meta{display:block;font-size:12px;color:var(--muted)}
.mp-call{padding:7px 11px;border:1px solid var(--rule);border-radius:999px;font:500 12px/1 Roboto,Arial,sans-serif;color:var(--gm-blue)}
.mp-card{font-family:Roboto,"Helvetica Neue",Arial,sans-serif}
.mp-stars{color:var(--star);letter-spacing:-.5px}
.mp-open{color:var(--open);font-weight:500}
.mp-fold{position:relative;margin:14px 0 12px;text-align:center}
.mp-fold::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--muted)}
.mp-fold span{position:relative;padding:0 10px;background:var(--surface);font-family:var(--data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mp-card--you{opacity:.55;border-style:dashed}
.mp-card--you .mp-rank{color:var(--muted)}
.mp-card--you .mp-call{border-color:var(--muted);color:var(--muted)}
.mp figcaption{margin-top:12px;font-size:12px;color:var(--muted);text-align:center}
/* One orchestrated moment: the three results arrive, then yours settles below
   the fold. Nothing else on the page animates on load. */
@media (prefers-reduced-motion:no-preference){
  .mp-pin{animation:mpDrop .5s var(--ease) both;animation-delay:calc(.25s + var(--i) * .12s)}
  .mp-list .mp-card{animation:mpIn .6s var(--ease) both;animation-delay:calc(.45s + var(--i) * .14s)}
  .mp-card--you{animation:mpSink .9s var(--ease) 1.15s both}
  .mp-caret{animation:mpBlink 1s steps(1) infinite}
}
@keyframes mpDrop{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@keyframes mpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mpSink{from{opacity:1;transform:translateY(-8px)}to{opacity:.55;transform:none}}
@keyframes mpBlink{50%{opacity:0}}

/* ---------- image slots (for images still to come) ---------- */
.slot{position:relative;overflow:hidden;border-radius:14px;background:var(--surface)}
.slot img{width:100%;height:100%;object-fit:cover}
.slot.is-missing{border:1px dashed var(--rule);display:grid;place-items:center}
.slot.is-missing::after{content:"Image slot: " attr(data-slot-label);padding:12px;text-align:center;font-family:var(--data);font-size:11px;letter-spacing:.08em;color:var(--muted)}

/* ---------- watch page ---------- */
.lf-watch{border-top:0;padding-block:clamp(30px,5vw,64px) clamp(28px,4vw,48px);text-align:center}
.lf-watch h1{font-size:clamp(2rem,4.4vw,3.6rem);max-width:20ch;margin:14px auto 26px;text-wrap:balance}
.lf-watch h1 .em{display:block}
.lf-video{position:relative;max-width:960px;margin:0 auto;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--surface)}
.lf-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lf-video .slot{position:absolute;inset:0;border-radius:0}
.lf-video__play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--ember);color:var(--on-ember);font-size:22px;box-shadow:var(--shadow-md)}
.lf-video__note{position:absolute;left:50%;bottom:14px;translate:-50% 0;margin:0;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 78%,transparent);font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);backdrop-filter:blur(6px)}
.lf-video__cap{margin-top:12px}

.lf-book{max-width:760px;margin:0 auto;padding:clamp(22px,4vw,40px);border:1px solid var(--rule);border-radius:18px;background:var(--surface)}
.lf-book__who{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.lf-book__who img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.lf-book__who p{margin:0;font-size:14px;line-height:1.4}
.lf-book__who strong{display:block}
.lf-book__who span{color:var(--muted)}
.lf-book__title{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.05;margin:0 0 10px}
.lf-book__title:focus{outline:none}
.lf-book__intro{margin:0 0 22px;color:var(--muted)}
.lf-book .lf-form{max-width:none}
.lf-book__help{margin-bottom:12px}
.lf-cal{min-height:720px;margin-bottom:16px}
.lf-cal iframe{width:100%;height:760px;border:0;border-radius:10px}

.lf-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:880px){.lf-proof{grid-template-columns:minmax(0,1fr)}}
.lf-proof__story p{margin:0 0 18px}
.lf-proof .lf-list{margin:0 0 22px}
.lf-quote{margin:0 0 22px;padding:18px 20px;border:1px solid var(--rule-soft);border-radius:14px;background:var(--surface)}
.lf-quote p{margin:0 0 10px;font-family:var(--display);font-size:1.2rem;line-height:1.3}
.lf-quote footer{font-size:13px;color:var(--muted)}

.cc-wrap{margin:0;padding:clamp(18px,3vw,28px);border:1px solid var(--rule-soft);border-radius:16px;background:var(--surface)}
.cc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;height:250px;border-bottom:1px solid var(--rule)}
.cc-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.cc-val{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1}
.cc-bar{width:100%;max-width:92px;height:var(--h);min-height:5px;border-radius:6px 6px 0 0;background:var(--track)}
.cc-col--gain .cc-bar{background:var(--gain)}
.cc-col--gain .cc-val{color:var(--gain)}
.cc-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px;text-align:center;font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cc-wrap figcaption{margin-top:14px;font-size:12px;color:var(--muted)}

.lf-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,44px)}
@media (max-width:900px){.lf-shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lf-shots{grid-template-columns:minmax(0,1fr)}}
.lf-shot{margin:0}
.lf-shot a{display:block;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface-2);transition:border-color .2s}
.lf-shot a:hover{border-color:var(--ember)}
.lf-shot img{width:100%;height:190px;object-fit:cover;object-position:left top}
.lf-shot figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.lf-shot figcaption strong{color:var(--text)}

.lf-factors{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.lf-factors{grid-template-columns:minmax(0,1fr)}}
.lf-factors li{padding:20px;border:1px solid var(--rule-soft);border-radius:14px;background:var(--surface)}
.lf-factors h3{margin:0 0 8px}
.lf-factors p{margin:0;color:var(--muted);font-size:15px}
.lf-note{color:var(--muted);max-width:62ch}

.lf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:step}
@media (max-width:1000px){.lf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lf-steps{grid-template-columns:minmax(0,1fr)}}
.lf-steps li{counter-increment:step;display:grid;align-content:start;gap:12px}
.lf-steps .slot{border-radius:12px;aspect-ratio:1/1}
.lf-steps h3{margin:0;display:flex;gap:10px;align-items:baseline}
.lf-steps h3::before{content:counter(step);font:600 12px/1 var(--data);color:var(--ember)}
.lf-steps p{margin:0;color:var(--muted);font-size:15px}

.lf-part{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:820px){.lf-part{grid-template-columns:minmax(0,1fr)}}
.lf-part h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-top:12px}

.lf-offer{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px}
@media (max-width:820px){.lf-offer{grid-template-columns:minmax(0,1fr)}}
.lf-offer__box{padding:clamp(20px,3vw,30px);border:1px solid var(--rule-soft);border-radius:16px;background:var(--surface)}
.lf-offer__box h3{margin:0 0 16px;font-family:var(--data);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.lf-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.lf-plans{grid-template-columns:minmax(0,1fr)}}
.lf-plan{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,32px);border:1px solid var(--rule);border-radius:18px;background:var(--surface)}
.lf-plan--lead{border-color:var(--ember)}
.lf-plan__price{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4vw,3rem);line-height:1}
.lf-plan__price span{font-family:var(--body);font-size:1rem;font-weight:400;color:var(--muted)}
.lf-plan p{margin:0;color:var(--muted)}
.lf-plan .btn{margin-top:auto}
.lf-plans__terms{margin:18px auto 0;text-align:center;color:var(--muted)}

.lf-guarantee{max-width:860px;margin:0 auto;padding:clamp(24px,4vw,44px);border:1px solid var(--ember);border-radius:20px;background:var(--surface)}
.lf-guarantee h2{font-size:clamp(1.8rem,3.8vw,3rem);margin:12px 0 18px}
.lf-guarantee p{margin:0 0 14px}
.lf-guarantee .lf-fine{margin-top:18px}

.lf-fit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:980px){.lf-fit{grid-template-columns:repeat(2,minmax(0,1fr))}.lf-fit .slot{grid-column:1 / -1;order:-1;max-height:340px}}
@media (max-width:640px){.lf-fit{grid-template-columns:minmax(0,1fr)}}
.lf-fit h3{margin:0 0 14px}

.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--rule-soft);padding:22px 0}
.faq summary{display:flex;justify-content:space-between;gap:20px;font-family:var(--display);font-size:clamp(1.05rem,1.9vw,1.3rem);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--data);color:var(--ember)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:var(--muted);font-size:16px}

.lf-final{text-align:center}
.lf-final h2{max-width:18ch;margin:12px auto 16px;text-wrap:balance}
.lf-final p{margin:0 auto 10px;color:var(--muted)}
.lf-final .btn{margin-top:18px}
.lf-final .lf-fine{margin-top:14px}

/* ---------- booked page ---------- */
.lf-booked{border-top:0;padding-block:clamp(34px,6vw,80px)}
.lf-booked h1{font-size:clamp(2.1rem,4.6vw,3.8rem);max-width:18ch;margin:14px 0 26px;text-wrap:balance}
.lf-booked h1 .em{display:block}
.lf-booked .lf-video{margin:0 0 30px;max-width:720px}
.lf-tasks{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:820px;counter-reset:task}
.lf-tasks > li{counter-increment:task;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px;border:1px solid var(--rule-soft);border-radius:16px;background:var(--surface)}
.lf-tasks > li::before{content:counter(task);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ember);color:var(--on-ember);font:700 14px/1 var(--data)}
.lf-tasks h2{font-size:1.35rem;margin:4px 0 8px}
.lf-tasks p{margin:0 0 8px;color:var(--muted)}
.lf-tasks ul{margin:8px 0;padding-left:18px;color:var(--muted)}
.lf-tasks a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---------- guarantee terms page ---------- */
.lf-terms{border-top:0;padding-block:clamp(34px,6vw,80px)}
.lf-terms h1{font-size:clamp(2rem,4.2vw,3.4rem);max-width:20ch;margin:14px 0 22px}
.lf-terms h2{font-size:1.3rem;margin:30px 0 10px}
.lf-terms p,.lf-terms li{color:var(--muted);max-width:70ch}
.lf-terms ol{padding-left:20px}
.lf-terms a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ============================================================================
   Google Maps design language
   Borrowed on purpose so a local owner recognises the world they already live
   in: the search pill, the map, the red pin, the place card and its round
   action buttons. No Google logo or wordmark anywhere.
   ========================================================================== */
.gm-ui{font-family:Roboto,"Helvetica Neue",Arial,sans-serif}

/* Search pill above the headline: types the searches their customers make. */
.gm-search{display:flex;align-items:center;gap:11px;width:min(100%,420px);margin:0 0 18px;padding:11px 16px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-md);font-size:16px;color:var(--text)}
.gm-search__pin{width:14px;height:19px;flex:none;fill:var(--pin)}
.gm-search__q{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.gm-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--gm-blue)}
.gm-search__icon{width:18px;height:18px;flex:none;color:var(--muted)}
.gm-search__hint{display:block;margin:-8px 0 16px 18px;font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.gm-caret{animation:mpBlink 1s steps(1) infinite}}

/* A street map behind the first screen, fading out under the copy. */
.lf-hero{position:relative;isolation:isolate;overflow:hidden}
.mapbg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg,transparent 22%,rgba(0,0,0,.4) 48%,#000 78%);
  mask-image:linear-gradient(100deg,transparent 22%,rgba(0,0,0,.4) 48%,#000 78%)}
@media (max-width:920px){.mapbg{-webkit-mask-image:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.5) 62%,#000 85%);mask-image:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.5) 62%,#000 85%)}}
.mapbg .land{fill:var(--map-land)}
.mapbg .park{fill:var(--map-park)}
.mapbg .water{fill:var(--map-water)}
.mapbg .road{fill:none;stroke:var(--map-road);stroke-linecap:round}
.mapbg .road--major{stroke:var(--map-road-major)}
.mapbg .pin{fill:var(--pin)}

/* The proof, as a place card. */
.gm-place{overflow:hidden;box-shadow:var(--shadow-md)}
.gm-place__head{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 18px 10px}
.gm-place__logo{width:52px;height:52px;border-radius:12px;object-fit:cover;background:#fff}
.gm-place__name{margin:0;font-size:18px;font-weight:500;line-height:1.2}
.gm-place__meta{margin:3px 0 0;font-size:13px;line-height:1.35;color:var(--muted)}
.gm-open{color:var(--open);font-weight:500}
.gm-badge{align-self:start;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--gain) 16%,transparent);color:var(--gain);font:600 10px/1.2 var(--data);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.gm-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:6px 10px 10px}
.gm-action{display:grid;justify-items:center;gap:5px;padding:6px 2px 8px;border-radius:12px;color:inherit;text-decoration:none;text-align:center}
a.gm-action:hover{background:var(--surface-2)}
.gm-action__ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);color:var(--gm-blue)}
.gm-action__ico svg{width:18px;height:18px}
.gm-action--star .gm-action__ico{color:var(--star)}
.gm-action strong{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1}
.gm-action small{font-size:11.5px;line-height:1.2;color:var(--gm-blue)}
.gm-place__period{margin:0;padding:0 18px 12px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--rule-soft)}
.gm-perf{padding:14px 18px 18px}
.gm-perf .pf-big{font-size:clamp(2.2rem,3.6vw,2.9rem)}
@media (max-width:420px){.gm-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Category chips, the row under the Maps search bar. */
.gm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3vw,36px)}
.gm-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);font-size:14px}
.gm-chip svg{width:14px;height:14px;flex:none;color:var(--gm-blue)}

/* In the video box the label would sit under the play button, so lift it. */
.lf-video .slot.is-missing::after{transform:translateY(-58px)}

/* ============================================================================
   Scroll motion, ported from elitemedia360.com's own layer.
   A block rises and fades as it arrives; siblings stagger by --i. Anything on
   screen at load is exempted by motion.js. Without that file `html` never gets
   .rv-on and every block renders normally, so a failed script is a still page,
   never a blank one.
   ========================================================================== */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html:not(.rv-on) .rv,.rv.rv-static,.rv.is-visible{opacity:1;transform:none}
.rv.rv-static{transition:none;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1 !important;transform:none !important;transition:none !important}}
/* The hero's street map sinks a little as the first screen scrolls away. */
@keyframes map-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,7%,0)}}
.count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* Touch targets: the footer links and the consent checkbox are the two places
   a thumb has to hit something small, so give them room on a phone. */
@media (max-width:640px){
  .lf-foot__links{gap:4px 20px}
  /* :not([hidden]) so the cookie button, which is hidden until a GTM id
     exists, is not given a height while it is meant to be absent. */
  .lf-foot__links a,.lf-foot__links button:not([hidden]){display:inline-flex;align-items:center;min-height:44px}
  /* The contact line is a plain <p>, not a class of its own — an earlier rule
     here targeted .lf-foot__contact, which does not exist in the markup, so the
     email link stayed a 17px-tall tap target. */
  .lf-foot__in > p:not(.lf-foot__links) a{display:inline-block;padding:10px 0}
  /* The theme switch is the smallest control on the page; give it the full
     44px on touch screens without changing how it looks on desktop. */
  .lf-theme{width:44px;height:44px}
  .lf-check{padding:6px 0}
  .lf-check input{width:20px;height:20px;margin-top:2px}
  /* The consent buttons are the first thing a phone visitor has to hit,
     and at 37px they were under the 44px minimum. */
  .consent .btn{min-height:44px;padding-block:13px}
}