/* ==========================================================================
   Frosty Coatings LLC
   Reference: sharkfloorcoatings.com — utility bar, white header, hero with a
   floating quote card, overlaid service tiles, a baby-blue testimonial wash.
   Rebuilt on Frosty's brand per Ed's direction: primarily blue and baby blue on
   generous white, orange only as a very small accent (a rule, a glow, a chip)
   and never a large field.

   The reference's handwriting-script accent is GONE as of 2026-08-28. Ed on the
   client call: "I don't like the font, really like the cursive font... I can't
   read it. It looks like a bakery font." It is replaced everywhere by .eyebrow,
   a small tracked-out uppercase label. Sacramento is no longer loaded.
   ========================================================================== */

@font-face{font-family:'Jost';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --ink:#0b1b33;      --ink-2:#13294b;
  --blue-900:#062a5e; --blue-800:#083a80; --blue:#1268d8; --blue-600:#0f57b8;
  --blue-400:#4d95f0; --blue-200:#b6d5fb; --blue-100:#dbeafe; --blue-50:#eff6ff;
  --sky:#f2f8ff;
  /* the yeti's cap. Accent only: rules, chips, glows. Never a large field. */
  --orange:#f5822b;   --orange-ink:#b8500c; --orange-glow:rgba(245,130,43,.42);
  /* review stars. #f0a028 is the star color everyone uses and measures 2.15:1 on
     white, which fails even the 3:1 non-text bar. This is the darkest-but-still-gold
     value that clears it: 3.82:1 on white, 3.67:1 on --sky. */
  --gold:#b8730c;

  --body:#4a5c74;
  /* #6c7e95 measured 4.15:1 on white and 3.97 on --soft, both under AA for the
     small text this token carries (form notes, spec labels, captions). */
  --muted:#5f7089;
  --bg:#ffffff;       --soft:#f7fafd;      --line:#e3ecf7;   --line-2:#eff4fa;

  --f:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --r:10px; --r-lg:18px; --r-xl:26px;
  --sh-1:0 2px 10px rgba(11,27,51,.05);
  --sh-2:0 12px 34px rgba(11,27,51,.09);
  --sh-3:0 26px 60px rgba(11,27,51,.14);
  --sh-blue:0 12px 30px rgba(18,104,216,.28);

  --pad:clamp(1.15rem,4vw,2.5rem);
  --sec:clamp(4rem,7.5vw,7rem);
  --bar:40px; --nav:86px;
  --e:cubic-bezier(.22,.61,.36,1);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 20px)}
body{margin:0;background:var(--bg);color:var(--body);font:400 16.5px/1.68 var(--f);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--blue-600);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:#fff}

h1,h2,h3,h4{font-family:var(--f);color:var(--ink);margin:0 0 .5em;font-weight:700;
  line-height:1.1;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:clamp(2.45rem,5.2vw,4.15rem);font-weight:800;line-height:1.04}
h2{font-size:clamp(1.9rem,3.6vw,2.95rem);font-weight:800}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}
h4{font-size:1.02rem}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{color:var(--ink);font-weight:700}

/* the eyebrow that replaced the script. Small, blue, tracked out, legible. */
.eyebrow{display:block;font-weight:700;color:var(--blue);font-size:.8rem;line-height:1;
  letter-spacing:.17em;text-transform:uppercase;margin-bottom:.95em}
.eyebrow--light{color:var(--blue-400)}
.shead--left .eyebrow{text-align:left}

/* ------------------------------------------------------------------ layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--nar{max-width:860px}
.wrap--wide{max-width:1560px}
.sec{position:relative;padding-block:var(--sec)}
.sec--tight{padding-block:clamp(3rem,5vw,4.5rem)}
.sec--soft{background:var(--soft)}
/* the reference's baby-blue wash, used for the proof sections */
.sec--sky{background:linear-gradient(180deg,#fff 0%,var(--blue-50) 22%,var(--blue-100) 60%,var(--blue-50) 100%)}
.sec--ink{background:var(--blue-900);color:#c2d8f4}
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4{color:#fff}

.shead{text-align:center;max-width:780px;margin:0 auto clamp(2.4rem,4.4vw,3.6rem)}
.shead h1,.shead h2{margin-bottom:.3em}
/* the one place orange is allowed a shape: a 3px rule under the heading */
.shead h1::after,.shead h2::after{content:"";display:block;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange) 0 42%,var(--blue) 42% 100%);margin:.62em auto .1em}
.shead p{font-size:1.08rem;color:var(--body);margin:.9em 0 0}
.sec--ink .shead p{color:#adc7e8}
.shead--left{text-align:left;margin-inline:0}
/* a heading that sits directly above its own body copy, not above a grid of cards */
.shead--tight{margin-bottom:1.5rem}
.shead--left h1::after,.shead--left h2::after{margin-inline:0}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.9rem;min-height:54px;border-radius:var(--r);border:2px solid transparent;
  cursor:pointer;white-space:nowrap;font-size:1rem;font-weight:700;letter-spacing:.005em;
  transition:transform .22s var(--e),box-shadow .22s var(--e),background .22s,color .22s,border-color .22s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--pri{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.btn--pri:hover{background:var(--blue-600);box-shadow:0 16px 38px rgba(18,104,216,.36)}
.btn--dark{background:var(--blue-900);color:#fff;box-shadow:0 10px 26px rgba(6,42,94,.28)}
.btn--dark:hover{background:var(--ink-2)}
.btn--line{background:transparent;color:var(--blue-600);border-color:var(--blue-200)}
.btn--line:hover{background:var(--blue-50);border-color:var(--blue-400)}
.btn--white{background:#fff;color:var(--blue-900);box-shadow:var(--sh-2)}
.btn--white:hover{background:var(--blue-50)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:#fff;color:var(--blue-900);border-color:#fff}
.btn--sm{padding:.7rem 1.3rem;min-height:46px;font-size:.94rem}
/* the one button Steve wanted "big, obvious and easy" */
.btn--big{padding:1.15rem 2.3rem;min-height:62px;font-size:1.1rem;letter-spacing:.002em}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.btn-row--c{justify-content:center}
@media(max-width:539px){.btn-row{flex-direction:column;align-items:stretch}.btn-row>.btn{width:100%}}

/* ------------------------------------------------------------ utility bar */
.ubar{background:var(--blue-900);color:#b9d2f2;font-size:.87rem}
.ubar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--bar);flex-wrap:wrap}
.ubar a{color:#e2eefc;display:inline-flex;align-items:center;gap:.45rem;font-weight:500}
.ubar a:hover{color:#fff}
.ubar svg{width:15px;height:15px;flex:none;color:var(--orange)}
.ubar__l{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.ubar__r{display:flex;gap:.5rem}
.ubar__r a{border:1px solid rgba(255,255,255,.28);padding:.28rem .85rem;border-radius:6px;
  font-size:.8rem;letter-spacing:.02em}
.ubar__r a:hover{background:rgba(255,255,255,.12)}
@media(max-width:900px){.ubar__r{display:none}}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line),0 6px 26px rgba(11,27,51,.05)}
.hdr__in{display:flex;align-items:center;gap:1.1rem;min-height:var(--nav)}
.brand{display:flex;align-items:center;flex:none;margin-right:auto}
.brand img{height:60px;width:auto}
.nav{display:none;align-items:center;gap:.1rem}
.nav a{position:relative;padding:.6rem .78rem;border-radius:7px;color:var(--ink);
  font-size:.98rem;font-weight:500;transition:color .2s,background .2s}
.nav a:hover{color:var(--blue);background:var(--blue-50)}
.nav a[aria-current=page]{color:var(--blue)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.2rem;
  height:3px;border-radius:2px;background:var(--blue)}
.hdr__cta{display:none;align-items:center;gap:.7rem;flex:none;margin-left:.5rem}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;flex:none;background:var(--blue-50);
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.burger span{display:block;height:2.5px;border-radius:2px;background:var(--blue-900);
  transition:transform .32s var(--e),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(min-width:1120px){.nav,.hdr__cta{display:flex}.burger{display:none}}

/* ---------------------------------------------------------------- drawer */
.drawer{position:fixed;inset:0;z-index:950;display:flex;flex-direction:column;
  background:var(--blue-900);padding:1rem var(--pad) 2rem;overflow-y:auto;
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s var(--e),visibility .42s}
.drawer.is-open{transform:none;visibility:visible}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav)}
.drawer__top img{height:50px;width:auto}
.drawer__x{width:46px;height:46px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer}
.drawer nav{display:flex;flex-direction:column;margin-top:1.2rem}
.drawer nav a{padding:.95rem .2rem;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;
  font-size:1.3rem;font-weight:600}
.drawer nav a[aria-current=page]{color:var(--blue-400)}
.drawer__foot{margin-top:auto;padding-top:1.8rem;display:grid;gap:.7rem}
.drawer__meta{color:#adc7e8;font-size:.93rem;line-height:1.7}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;background:var(--bg);overflow:hidden;
  padding-block:clamp(2.4rem,4.5vw,4rem) clamp(3rem,6vw,5rem)}
.hero__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;position:relative;z-index:2}
@media(min-width:1040px){.hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.hero h1{color:var(--ink)}
/* the headline used to switch to the script for one word. Same emphasis, kept
   in Jost, so it is still readable at a glance. */
.hero h1 em{font-style:normal;font-weight:800;color:var(--blue)}
.hero__sub{font-size:clamp(1.04rem,1.4vw,1.2rem);color:var(--body);max-width:52ch;margin:0}
.hero__pts{display:grid;gap:.6rem;margin:1.6rem 0 0}
.hero__pts div{display:flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:600;font-size:1rem}
.hero__pts i{width:22px;height:22px;flex:none;border-radius:50%;background:var(--blue-50);
  color:var(--blue);display:grid;place-items:center}
.hero__pts i svg{width:13px;height:13px}
.hero__art{position:relative}
.hero__shot{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.hero__shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* the small orange signal: a warm glow behind the top-right corner only */
.hero__art::before{content:"";position:absolute;right:-3%;top:-5%;width:44%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,var(--orange-glow),transparent 68%);
  filter:blur(28px);z-index:-1;pointer-events:none}
.hero__art::after{content:"";position:absolute;left:-6%;bottom:-8%;width:52%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(18,104,216,.30),transparent 68%);
  filter:blur(34px);z-index:-1;pointer-events:none}
.hero__badge{position:absolute;left:-12px;bottom:22px;z-index:3;display:flex;align-items:center;gap:.65rem;
  padding:.8rem 1.1rem;border-radius:14px;background:#fff;box-shadow:var(--sh-3);
  border-top:3px solid var(--orange)}
.hero__badge b{font-size:1.9rem;font-weight:800;color:var(--blue-900);line-height:1;letter-spacing:-.04em}
.hero__badge span{font-size:.76rem;font-weight:700;line-height:1.2;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);white-space:nowrap}
/* the reference floats a quote card over the hero */
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.35rem,2.4vw,2rem);box-shadow:var(--sh-3)}
.qcard__h{text-align:center;margin-bottom:1.1rem}
.qcard__h b{display:block;color:var(--blue-900);font-size:1.24rem;font-weight:800;letter-spacing:-.02em}
.qcard__h span{display:block;color:var(--muted);font-size:.92rem;margin-top:.2rem}

/* ------------------------------------------------- autoplaying hero video */
/* Ed asked for a customer video that starts on its own at the top. It has to be
   muted to be allowed to autoplay at all, so the unmute control is part of the
   card rather than an afterthought. */
.hvid{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  background:var(--blue-900);max-width:420px;margin-inline:auto}
.hvid video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
@media(min-width:1040px){.hvid{max-width:none}.hvid video{aspect-ratio:4/5}}
.hvid__cap{position:absolute;inset:auto 0 0 0;padding:2.6rem .95rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(6,42,94,.86) 58%);
  color:#fff;font-size:.88rem;font-weight:600;letter-spacing:.005em;pointer-events:none}
.vmute{position:absolute;right:.7rem;top:.7rem;z-index:2;display:inline-flex;align-items:center;
  gap:.4rem;padding:.5rem .85rem;min-height:40px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(6,42,94,.82);color:#fff;font-size:.82rem;font-weight:700;
  backdrop-filter:blur(6px);transition:background .2s}
.vmute:hover{background:var(--blue)}
.vmute svg{width:16px;height:16px}

/* ------------------------------------------------------ google review strip */
.grev{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.5rem;padding:.65rem 1.05rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--sh-1);
  color:var(--ink);font-size:.95rem;transition:border-color .2s,box-shadow .2s,transform .2s var(--e)}
.grev:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-2px)}
.grev__s{display:inline-flex;gap:.09rem;color:var(--gold)}
.grev__s svg{width:15px;height:15px}
.grev b{font-weight:800}
.grev__g{color:var(--blue-600);font-weight:700}
.sec--sky .grev{border-color:#fff}

/* ---------------------------------------------------------- booking band */
/* Steve's number one: "the first thing people see is the ability to book...
   a big button to book a quote." This is that widget, one scroll target, sitting
   directly under the hero on the home page. */
.book{background:var(--blue-900);color:#c2d8f4;position:relative;overflow:hidden}
.book::after{content:"";position:absolute;right:-6%;top:-40%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(77,149,240,.30),transparent 66%);pointer-events:none}
.book__in{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center;position:relative;z-index:1;
  padding-block:clamp(2.8rem,5vw,4.4rem)}
@media(min-width:980px){.book__in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}}
.book h2{color:#fff;margin-bottom:.35em}
.book h2::after{content:"";display:block;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange) 0 42%,#fff 42% 100%);margin:.6em 0 .1em}
.book__p{color:#adc7e8;font-size:1.06rem;max-width:46ch}
.book__steps{display:grid;gap:.85rem;margin:1.7rem 0 0;padding:0;list-style:none}
.book__steps li{display:flex;gap:.8rem;align-items:flex-start;color:#dbe9fb;font-size:.99rem}
.book__steps b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:.82rem;font-weight:800}
.book__call{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.8rem}
.book__call .btn--ghost{border-color:rgba(255,255,255,.55)}
.book__note{color:#9fbde2;font-size:.9rem;margin:1.1rem 0 0}

/* ------------------------------------------------------ meet the founders */
.fnd{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center}
@media(min-width:960px){.fnd{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
.fnd__media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  background:var(--blue-900);max-width:400px;margin-inline:auto;width:100%}
@media(min-width:960px){.fnd__media{max-width:none}}
.fnd__media video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
@media(min-width:640px){.fnd__media video{aspect-ratio:4/5}}
.fnd__q{margin:1.6rem 0 0;padding:1.15rem 1.35rem;border-left:3px solid var(--orange);
  background:#fff;border-radius:0 var(--r) var(--r) 0;box-shadow:var(--sh-1)}
.fnd__q p{color:var(--ink);font-size:1.06rem;font-weight:600;font-style:italic;margin:0}
.fnd__q cite{display:block;margin-top:.6rem;font-style:normal;font-size:.86rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------------ trust strip */
.tstrip{border-block:1px solid var(--line);background:var(--soft)}
.tstrip__in{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);padding-block:1.5rem}
@media(min-width:900px){.tstrip__in{grid-template-columns:repeat(4,1fr);gap:1.6rem}}
.tstrip__i{display:flex;align-items:center;gap:.75rem}
.tstrip__i svg{width:24px;height:24px;flex:none;color:var(--blue)}
.tstrip__i b{display:block;color:var(--ink);font-size:.98rem;font-weight:700;line-height:1.25}
.tstrip__i span{display:block;color:var(--muted);font-size:.86rem}

/* ------------------------------------------- service tiles (the reference) */
.tiles{display:grid;gap:clamp(.7rem,1.3vw,1.1rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.tiles{grid-template-columns:repeat(5,1fr)}}
.tile{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:3/4;box-shadow:var(--sh-2);
  transition:transform .32s var(--e),box-shadow .32s var(--e)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,42,94,.88) 0%,rgba(6,42,94,.34) 42%,rgba(6,42,94,.06) 72%)}
.tile:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.tile:hover img{transform:scale(1.07)}
.tile span{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;color:#fff;
  font-size:clamp(.95rem,1.35vw,1.15rem);font-weight:800;line-height:1.15;
  text-transform:uppercase;letter-spacing:.01em}
.tile span::after{content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--orange);margin-top:.55rem;
  transition:width .32s var(--e)}
.tile:hover span::after{width:56px}

/* -------------------------------------------------- services hub cards */
.svcs{display:grid;gap:clamp(1rem,1.8vw,1.5rem);grid-template-columns:1fr}
@media(min-width:760px){.svcs{grid-template-columns:repeat(2,1fr)}}
.svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .28s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--blue-200)}
.svc__media{overflow:hidden;background:var(--blue-50)}
.svc__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s var(--e)}
.svc:hover .svc__media img{transform:scale(1.05)}
.svc__b{padding:1.6rem 1.7rem 1.8rem;display:flex;flex-direction:column;flex:1}
.svc__b h2,.svc__b h3{font-size:1.3rem;margin-bottom:.5rem}
.svc__b h2 a,.svc__b h3 a{color:inherit}
.svc__b h2 a:hover,.svc__b h3 a:hover{color:var(--blue)}
.svc__b p{color:var(--body);font-size:.99rem;line-height:1.65;margin-bottom:1.3rem}
.svc__b .btn{align-self:flex-start;margin-top:auto}

/* ------------------------------------------------ before / after slider */
.bagrid{display:grid;gap:clamp(1.1rem,2vw,1.8rem);grid-template-columns:1fr}
@media(min-width:900px){.bagrid{grid-template-columns:repeat(2,1fr)}}
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  background:var(--blue-50);touch-action:pan-y;user-select:none}
.ba__wrap{position:relative;aspect-ratio:4/3}
.ba__wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* the AFTER sits on top and is revealed by the clip */
.ba__after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;
  background:#fff;box-shadow:0 0 0 1px rgba(6,42,94,.18),0 0 18px rgba(6,42,94,.3);
  transform:translateX(-50%);pointer-events:none;z-index:3}
.ba__grip{position:absolute;top:50%;left:var(--pos,50%);z-index:4;
  width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-2),0 0 0 3px rgba(255,255,255,.6);
  display:grid;place-items:center;cursor:ew-resize;border:0;padding:0;
  transition:transform .2s var(--e)}
.ba:hover .ba__grip{transform:scale(1.06)}
.ba__grip svg{width:22px;height:22px;color:var(--blue)}
.ba__tag{position:absolute;top:.85rem;z-index:3;padding:.3rem .75rem;border-radius:100px;
  font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(6,42,94,.82);color:#fff;backdrop-filter:blur(4px)}
.ba__tag--b{left:.85rem}
.ba__tag--a{right:.85rem;background:var(--orange);color:var(--blue-900)}
.ba__cap{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.95rem 1.1rem;background:#fff}
.ba__cap b{color:var(--ink);font-weight:700;font-size:1.02rem}
.ba__cap span{color:var(--muted);font-size:.86rem;white-space:nowrap}
.ba__hint{margin-top:1.6rem;text-align:center;color:var(--muted);font-size:.95rem}

/* --------------------------------------------------------- work gallery */
.work{display:grid;gap:clamp(.7rem,1.2vw,1rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.work{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.work{grid-template-columns:repeat(4,1fr)}}
.work__i{position:relative;display:block;padding:0;border:0;cursor:zoom-in;overflow:hidden;
  border-radius:var(--r-lg);aspect-ratio:1;background:var(--blue-50);box-shadow:var(--sh-1);
  transition:transform .3s var(--e),box-shadow .3s var(--e)}
.work__i img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}
.work__i:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.work__i:hover img{transform:scale(1.07)}
.work__i span{position:absolute;left:.7rem;top:.7rem;z-index:2;padding:.28rem .7rem;
  border-radius:100px;background:rgba(255,255,255,.94);color:var(--blue-900);
  font-size:.74rem;font-weight:700;letter-spacing:.02em}
.work__i.is-tall{grid-row:span 2;aspect-ratio:1/2}
@media(max-width:759px){.work__i.is-tall{grid-row:span 1;aspect-ratio:1}}

/* ------------------------------------------------- customers + testimonials */
/* the customers holding the sign are the point of this section, so they get
   real size rather than a thumbnail strip */
/* These are photographs of people, and a fixed `aspect-ratio` with `object-fit:
   cover` centre-crops every one of them. On a 390px phone that took the top off a
   customer's head and cut the sign he is holding in half. A masonry column flow
   lets each photo keep its own shape, so nothing is ever cropped at any width. */
/* a column box does not absorb the last item's bottom margin, so it pokes ~15px
   past the container; the matching padding takes it back */
.love{columns:2;column-gap:clamp(.7rem,1.4vw,1rem);padding-bottom:clamp(.7rem,1.4vw,1rem)}
@media(min-width:700px){.love{columns:3}}
@media(min-width:1200px){.love{columns:4}}
.love__i{break-inside:avoid;margin:0 0 clamp(.7rem,1.4vw,1rem);position:relative;
  overflow:hidden;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2);
  border:4px solid #fff;transition:transform .3s var(--e),box-shadow .3s var(--e)}
.love__i img{width:100%;height:auto;display:block;border-radius:calc(var(--r-lg) - 5px)}
.love__i:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:var(--sh-3)}
/* the wall photos open full size, same as the work gallery */
button.love__i{padding:0;cursor:zoom-in;width:100%;text-align:left;font:inherit}

/* five customer testimonials, every one they filmed. Steve: "we should put
   every single one of those on the website." */
/* On a phone, five cards across a 390px screen is five slivers with the captions
   shattered over five lines each, so below 760px this is a swipe rail of full
   size cards instead of a grid. */
.vids{display:flex;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:.2rem .2rem .8rem;margin-bottom:clamp(1.8rem,3vw,2.8rem)}
.vids>.vid{flex:0 0 74%;scroll-snap-align:center}
@media(min-width:560px){.vids>.vid{flex-basis:46%}}
@media(min-width:760px){
  .vids{display:grid;gap:clamp(1rem,1.8vw,1.4rem);grid-template-columns:repeat(3,1fr);
    overflow:visible;padding:0}
  .vids>.vid{flex:none}
}
@media(min-width:1200px){.vids{grid-template-columns:repeat(5,1fr)}}
/* a flex column so the white caption fills whatever height the tallest card sets,
   instead of leaving the figure's own dark background showing underneath */
.vid{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);
  overflow:hidden;background:#fff;box-shadow:var(--sh-2);
  transition:transform .3s var(--e),box-shadow .3s var(--e)}
.vid__cap{flex:1}
.vid:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.vid video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:var(--blue-900)}
@media(min-width:760px){.vid video{aspect-ratio:3/4}}
.vid__cap{padding:.85rem 1rem;background:#fff}
.vid__cap b{display:block;color:var(--ink);font-weight:700;font-size:1rem}
.vid__cap span{display:block;color:var(--muted);font-size:.86rem}
.vid__q{display:block;color:var(--blue-600);font-size:.88rem;font-weight:600;font-style:italic;
  margin-top:.35rem}

/* ------------------------------------------------------------- colors */
.blends{display:grid;gap:clamp(.7rem,1.2vw,1rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.blends{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1040px){.blends{grid-template-columns:repeat(6,1fr)}}
.blend{position:relative;display:block;padding:0;border:0;cursor:zoom-in;overflow:hidden;
  border-radius:var(--r-lg);aspect-ratio:1;background:var(--blue-50);box-shadow:var(--sh-1);
  transition:transform .3s var(--e),box-shadow .3s var(--e)}
.blend img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}
.blend:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.blend:hover img{transform:scale(1.08)}
/* Only three swatches carried a label until Steve named all twelve, and the plain
   `.85 -> transparent` ramp put white text over the near-white Opal and Gravel
   blends at about 4.1:1. The scrim is now held near-solid across the whole band
   the glyphs occupy and fades smoothly above them: worst case measured on the
   lightest swatch is 11.2:1, measured from the source pixels rather than a
   screenshot, because the swatches paint too late for a capture to be trusted. */
.blend span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem .7rem .55rem;
  background:linear-gradient(to top,rgba(6,42,94,.95) 0%,rgba(6,42,94,.92) 45%,
    rgba(6,42,94,.55) 72%,transparent 100%);
  color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;text-align:left}

/* --------------------------------------------------------- process steps */
.steps{display:grid;gap:clamp(1.1rem,2vw,1.6rem);grid-template-columns:1fr}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7rem 1.6rem;box-shadow:var(--sh-1);
  transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .28s}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--blue-200)}
.step__n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--blue-50);color:var(--blue);font-weight:800;font-size:1.1rem;margin-bottom:1rem}
.step h2,.step h3{font-size:1.16rem;font-weight:700;letter-spacing:-.022em;margin-bottom:.5rem}
.step p{color:var(--body);font-size:.98rem;line-height:1.65;margin:0}
.cure{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line-2)}
.cure b{display:block;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--orange-ink);font-weight:800;margin-bottom:.5rem}
.cure dl{display:grid;gap:.4rem;margin:0}
.cure div{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.cure dt{color:var(--muted);font-size:.9rem}
.cure dd{margin:0;color:var(--ink);font-weight:700;font-size:.9rem;white-space:nowrap}

/* ------------------------------------------------------------- why / split */
.split{display:grid;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr}}
.split__media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.checks{display:grid;gap:.85rem 1.5rem;margin:1.7rem 0 0}
@media(min-width:520px){.checks{grid-template-columns:repeat(2,1fr)}}
.checks div{display:flex;align-items:flex-start;gap:.65rem;color:var(--ink);font-weight:600;font-size:.99rem}
.checks i{width:24px;height:24px;flex:none;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;margin-top:1px}
.checks i svg{width:13px;height:13px}

/* ------------------------------------------------------------------- faq */
.faq{display:grid;gap:.8rem}
.faq__i{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow .25s var(--e),border-color .25s}
.faq__i.is-open{box-shadow:var(--sh-2);border-color:var(--blue-200)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.3rem;
  padding:1.3rem 1.45rem;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink);
  font-size:1.06rem;font-weight:700;transition:color .2s}
.faq__q:hover{color:var(--blue)}
.faq__q i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue-50);
  transition:background .25s}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:var(--blue);border-radius:2px;
  transition:transform .35s var(--e),background .25s}
.faq__q i::before{left:7px;right:7px;top:12.75px;height:2.5px}
.faq__q i::after{top:7px;bottom:7px;left:12.75px;width:2.5px}
.faq__q[aria-expanded=true] i{background:var(--blue)}
.faq__q[aria-expanded=true] i::before,.faq__q[aria-expanded=true] i::after{background:#fff}
.faq__q[aria-expanded=true] i::after{transform:scaleY(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--e)}
.faq__i.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 1.45rem 1.4rem;color:var(--body);margin:0}

/* ----------------------------------------------------------------- prose */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin:2.5rem 0 .75rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--body);line-height:1.75}
.prose>p:first-of-type{font-size:1.12rem;color:var(--ink)}
.prose ul{padding-left:1.15rem;margin:0 0 1.15em}
.prose li{margin-bottom:.42em}
.prose li::marker{color:var(--blue)}
.prose a{font-weight:600;border-bottom:1px solid var(--blue-200)}
.prose a:hover{border-bottom-color:var(--blue)}

/* ------------------------------------------------------------------ form */
.cgrid{display:grid;gap:clamp(1.8rem,3.4vw,3rem);align-items:start}
@media(min-width:980px){.cgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--sh-3)}
.f-grid{display:grid;gap:1.05rem}
@media(min-width:600px){.f-grid--2{grid-template-columns:repeat(2,1fr)}}
.field{display:flex;flex-direction:column;gap:.38rem;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:700;color:var(--ink)}
.field label span{color:var(--orange-ink)}
.field input,.field select,.field textarea{width:100%;padding:.82rem .95rem;min-height:50px;
  background:var(--sky);border:1.5px solid var(--line);border-radius:var(--r);color:var(--ink);
  font-size:1rem;transition:border-color .2s,background .2s,box-shadow .2s}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#9aabc0}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue-400);
  background:#fff;box-shadow:0 0 0 4px rgba(77,149,240,.18)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7e95' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:17px}
.consent{display:flex;gap:.75rem;align-items:flex-start;grid-column:1/-1}
.consent input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:21px;height:21px;
  min-height:0;padding:0;margin-top:2px;background:var(--sky);border:1.5px solid var(--line);
  border-radius:6px;cursor:pointer;display:grid;place-content:center;transition:background .2s,border-color .2s}
.consent input[type=checkbox]::before{content:"";width:11px;height:11px;transform:scale(0);
  transition:transform .2s var(--e);background:#fff;
  clip-path:polygon(14% 45%,0 60%,40% 100%,100% 22%,85% 8%,38% 71%)}
.consent input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
.consent input[type=checkbox]:checked::before{transform:scale(1)}
.consent label{font-size:.83rem;line-height:1.6;color:var(--muted);cursor:pointer}
.f-note{margin-top:1rem;font-size:.9rem;color:var(--muted);text-align:center}
.f-note a{font-weight:700}
.fcard__ok{display:none;text-align:center;padding:1.8rem 0}
.fcard.is-sent .fcard__ok{display:block}
.fcard.is-sent form{display:none}
.fcard__ok .tick{width:62px;height:62px;margin:0 auto 1.2rem;border-radius:50%;background:var(--blue);
  display:grid;place-items:center;color:#fff;box-shadow:var(--sh-blue);animation:pop .45s var(--e)}
.fcard__ok .tick svg{width:29px;height:29px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.fcard__okh{color:var(--ink);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin:0 0 .4rem}
.fcard__ok p{color:var(--body);margin:0}

.rail{display:grid;gap:.9rem}
.rail__i{display:flex;gap:.95rem;align-items:flex-start;padding:1.15rem 1.25rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.sec--ink .rail__i{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.rail__ic{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--blue-50);color:var(--blue)}
.sec--ink .rail__ic{background:var(--blue);color:#fff}
.rail__ic svg{width:19px;height:19px}
.rail__k{margin:0 0 .18rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.sec--ink .rail__k{color:var(--blue-400)}
.rail__i p{margin:0;color:var(--ink);font-size:1.01rem;line-height:1.55}
.sec--ink .rail__i p{color:#fff}
.rail__i p a{color:inherit;font-weight:700}
.rail__i p a:hover{color:var(--blue)}
.sec--ink .rail__i p a:hover{color:var(--blue-400)}

/* ------------------------------------------------------------------- cta */
.cta{position:relative;isolation:isolate;overflow:hidden;background:var(--blue-900);text-align:center}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(6,42,94,.94),rgba(8,58,128,.88))}
.cta h2{color:#fff;max-width:19ch;margin-inline:auto}
.cta p{color:#c9def7;max-width:56ch;margin-inline:auto;font-size:1.07rem}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--blue-900);color:#adc7e8;padding-top:clamp(3rem,5.5vw,4.5rem)}
.ftr__top{display:grid;gap:2.4rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.13)}
@media(min-width:900px){.ftr__top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.6rem}}
.ftr__brand img{height:62px;width:auto;margin-bottom:1.2rem}
.ftr__brand p{font-size:.96rem;line-height:1.75;max-width:38ch}
.ftr h3{color:#fff;font-size:1.02rem;font-weight:700;margin:0 0 1.1rem}
.ftr__list{display:grid;gap:.65rem}
.ftr__list a{color:#adc7e8;font-size:.96rem;width:fit-content;transition:color .2s}
.ftr__list a:hover{color:var(--orange)}
.ftr__hours{display:grid;gap:.4rem;font-size:.95rem;line-height:1.6}
.ftr__hours b{color:#fff;font-weight:700}
.ftr__nap{font-style:normal;font-size:.95rem;line-height:1.7;margin-top:1rem;color:#adc7e8}
.ftr__nap strong{color:#fff;font-weight:700}
.ftr__nap a{color:#adc7e8}
.ftr__nap a:hover{color:var(--orange)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between;
  padding-block:1.6rem;font-size:.89rem;color:#7f9dc4}
.ftr__bot a{color:#7f9dc4}
.ftr__bot a:hover{color:#fff}
.soc{display:flex;gap:.55rem}
.soc a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.09);color:#fff;transition:background .25s,transform .25s var(--e)}
.soc a:hover{background:var(--blue);transform:translateY(-3px)}
.soc svg{width:18px;height:18px}

/* ------------------------------------------------------------ breadcrumbs */
.crumbs{background:var(--soft);border-bottom:1px solid var(--line);font-size:.89rem;color:var(--muted)}
.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-block:.8rem}
.crumbs a{color:var(--body);font-weight:500}
.crumbs a:hover{color:var(--blue)}
.crumbs [aria-current=page]{color:var(--ink);font-weight:700}
.crumbs__sep{color:var(--muted);user-select:none}

/* ------------------------------------------------------------------- nap */
.nap{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:660px){.nap{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.nap{grid-template-columns:repeat(4,1fr)}}
.nap__i{display:flex;gap:.95rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.35rem 1.45rem;box-shadow:var(--sh-1)}
.nap__ic{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--blue-50);color:var(--blue)}
.nap__ic svg{width:20px;height:20px}
.nap__i h3{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .25rem;font-weight:700}
.nap__i p{margin:0;color:var(--ink);font-size:.99rem;line-height:1.6}
.nap__i a{color:inherit;font-weight:700}
.nap__i a:hover{color:var(--blue)}

/* --------------------------------------------------------- areas + links */
.areas{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}
.areas a{display:inline-flex;align-items:center;padding:.68rem 1.2rem;background:#fff;
  border:1px solid var(--line);border-radius:100px;color:var(--ink);font-weight:600;font-size:.96rem;
  box-shadow:var(--sh-1);transition:transform .22s var(--e),box-shadow .22s var(--e),border-color .22s,color .22s}
.areas a:hover{transform:translateY(-2px);border-color:var(--blue-400);box-shadow:var(--sh-2);color:var(--blue)}
.xlinks{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:700px){.xlinks{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.xlinks{grid-template-columns:repeat(4,1fr)}}
.xlink{display:flex;flex-direction:column;gap:.35rem;padding:1.35rem 1.45rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:transform .25s var(--e),box-shadow .25s var(--e),border-color .25s}
.xlink:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--blue-200)}
.xlink__n{color:var(--ink);font-weight:800;font-size:1.05rem;letter-spacing:-.015em}
.xlink__d{color:var(--body);font-size:.93rem;line-height:1.55}
.acards{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:620px){.acards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.acards{grid-template-columns:repeat(3,1fr)}}
.acard{display:flex;flex-direction:column;gap:.2rem;padding:1.45rem 1.55rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:transform .25s var(--e),box-shadow .25s var(--e),border-color .25s}
.acard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--blue-200)}
.acard__n{color:var(--ink);font-weight:800;font-size:1.22rem;letter-spacing:-.02em}
.acard__c{color:var(--muted);font-size:.9rem}
.gal__note{margin-top:1.6rem;text-align:center;color:var(--muted);font-size:.97rem}

/* --------------------------------------------------------- mobile CTA bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:880;display:grid;grid-template-columns:1fr 1fr;
  gap:.55rem;padding:.65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(11,27,51,.1);
  transform:translateY(110%);transition:transform .35s var(--e)}
.mbar.is-up{transform:translateY(0)}
.mbar .btn{min-height:48px;font-size:.94rem;padding-inline:.7rem}
@media(min-width:1120px){.mbar{display:none}}

/* -------------------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:1000;display:none;place-items:center;
  background:rgba(4,18,40,.94);padding:clamp(1rem,4vw,3rem)}
.lb.is-open{display:grid;animation:fade .3s var(--e)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb__fig{margin:0;max-width:min(940px,100%);text-align:center;animation:zin .42s var(--e)}
@keyframes zin{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.lb__fig img{width:100%;height:auto;max-height:78svh;object-fit:contain;border-radius:var(--r-lg)}
.lb__cap{margin-top:1rem;color:#c9def7;font-size:.97rem}
.lb__cap b{display:block;color:#fff;font-size:1.16rem;font-weight:700;margin-bottom:.2rem}
.lb__btn{position:absolute;width:50px;height:50px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:50%;
  color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:background .25s,border-color .25s}
.lb__btn:hover{background:var(--blue);border-color:var(--blue)}
.lb__x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__p{left:clamp(.5rem,2.4vw,2rem);top:50%;transform:translateY(-50%)}
.lb__n{right:clamp(.5rem,2.4vw,2rem);top:50%;transform:translateY(-50%)}

/* --------------------------------------------------------------- motion */
[data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .72s var(--e),transform .72s var(--e)}
[data-rv].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  [data-rv]{opacity:1;transform:none}
}
.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}

/* the honeypot. Off-screen rather than display:none, because some bots skip
   anything that is not rendered. No human tabs into it (tabindex -1). */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the form's own failure state, for when the lead did not actually capture */
.f-err{margin:1rem 0 0;padding:.85rem 1rem;border-radius:var(--r);background:#fdecec;
  border:1px solid #f5c2c2;color:#9b1c1c;font-size:.94rem;font-weight:600}
.f-err a{color:#9b1c1c;text-decoration:underline}
.fcard form.is-busy{opacity:.6;pointer-events:none}