/* ═══════════════════════════════════════════════════
   CONCEPTION DESIGN · v3 (art direction pass)
   Brand: cyan #14BDD4 · #00AABE · deep #037FA3, from their logo.
   Surfaces: paper off-white · white · blueprint grid · navy production ·
   cyan film. Type: Outfit display / Plus Jakarta Sans text.
   ═══════════════════════════════════════════════════ */

:root{
  --bg:#ffffff;
  --paper:#eaf6f8;        /* light turquoise surface (was warm paper) */
  --tint:#d9eff3;         /* deeper turquoise tint for accents */
  --bg2:#f2f8fa;          /* cool panel (quote page) */
  --navy:#0d1f2d;         /* production surface */
  --navy2:#132b3d;
  --ink:#0b1c22;
  --mu:#34484f;
  --line:#e3ebee;
  --line2:#c9d8dd;
  --cy:#14bdd4;
  --cy2:#00aabe;
  --deep:#037fa3;
  --gut:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.9,.28,1);
  --spring:cubic-bezier(.18,1.22,.36,1);
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:550 16.5px/1.62 "Plus Jakarta Sans",system-ui,sans-serif;
  -webkit-font-smoothing:auto;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:Outfit,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.06}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
::selection{background:var(--cy);color:#fff}

/* ── reveal system ─────────────────────────────────── */
[data-reveal]{
  --tx:0;--ty:30px;--rot:0deg;--sc:1;
  opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(var(--sc));
  transition:opacity .7s var(--ease),transform .8s var(--spring);
  transition-delay:var(--d,0s);
}
[data-fx="l"]  {--tx:-70px;--ty:0}
[data-fx="r"]  {--tx:70px;--ty:0}
[data-fx="pop"]{--sc:.7;--ty:26px}
[data-reveal].in{opacity:1;transform:none}
[data-fx="wipe"]{opacity:1;transform:none;position:relative;overflow:hidden}
[data-fx="wipe"]::after{
  content:"";position:absolute;inset:-1px;background:var(--bg);z-index:5;
  transition:transform 1.1s var(--ease) var(--d,0s);
}
[data-fx="wipe"].in::after{transform:translateX(101.5%)}

/* ── buttons ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;font-family:Outfit,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.02em;cursor:pointer;border:1.5px solid transparent;
  position:relative;overflow:hidden;transition:color .25s,border-color .25s,transform .25s var(--ease);
}
.btn--solid{background:var(--ink);color:#fff;isolation:isolate}
.btn--solid::before{
  content:"";position:absolute;inset:0;background:var(--cy);z-index:-1;
  transform:translateY(101%);transition:transform .3s var(--ease);
}
.btn--solid:hover::before{transform:none}
.btn--solid:hover{transform:translateY(-2px)}
.btn--solid>*{position:relative}
.btn--ghost{border-color:var(--line2);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--cy);color:var(--deep);transform:translateY(-2px)}
.btn--cy{background:var(--cy);color:#04222b;font-weight:700}
.btn--cy:hover{background:#3fd2e6;transform:translateY(-2px)}
.btn--lg{padding:16px 32px;font-size:15px}
.btn:active{transform:scale(.98)}

/* ── nav: part of the brand, not a utility strip ──────
   Navy production surface (owner request 2026-08-23, supersedes the
   light turquoise of 2026-08-18), same material as the footer, slim
   illuminated cyan rule like a lit sign edge. Identical shell on
   every page. */
.nav{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#0e2231 0%,#0d1f2d 100%);
  color:#eaf3f6;
  display:flex;align-items:center;gap:28px;height:78px;padding:0 var(--gut);
  border-bottom:0;
}
.nav::after{ /* illuminated rule, like a lit sign edge */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--cy2),var(--cy) 40%,#7fe3f0 55%,var(--cy) 70%,var(--deep));
  box-shadow:0 1px 10px rgba(20,189,212,.45);
}
.nav__logo{display:flex;align-items:center;gap:12px;perspective:500px}
.nav__mark{height:48px;width:auto;animation:spin3d 1.15s .2s var(--ease) backwards;transition:transform .9s var(--ease)}
.nav__logo:hover .nav__mark{transform:rotateY(360deg)}
/* Light-on-dark wordmark for the navy bar. The colour flip is baked into
   assets/img/wordmark-light.png (see scripts/make-light-wordmark.py)
   rather than applied as a CSS filter: the supplied PNG has a hard 1-bit
   alpha, so filtering it live left every aliased letter edge showing as
   a bright speck. The generated asset carries real antialiasing. */
.nav__word{height:31px;width:auto}
@keyframes spin3d{from{transform:rotateY(-360deg) scale(.5);opacity:0}to{transform:rotateY(0) scale(1);opacity:1}}
.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{
  font-family:Outfit,sans-serif;font-weight:700;font-size:14.5px;color:#b6d3dc;
  padding:9px 15px;position:relative;transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;
  background:var(--cy);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:none}
.nav__r{display:flex;align-items:center;gap:14px}
.navcart{display:inline-flex;align-items:center;gap:7px;color:#eaf3f6;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.navcart b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;background:var(--ink);color:#fff;border-radius:999px;font-size:.68rem}
.lang{
  display:flex;background:none;border:1.5px solid var(--line2);padding:0;cursor:pointer;
  font-family:Outfit,sans-serif;font-weight:700;font-size:11.5px;
}
.lang{border-color:#2c4a5a}
.lang span{padding:6px 10px;color:#8fb3bf;transition:.2s}
.lang span:first-child{background:var(--cy);color:#04222b}
body.es .lang span:first-child{background:none;color:#8fb3bf}
body.es .lang span:last-child{background:var(--cy);color:#04222b}
.burger{display:none;background:none;border:1.5px solid #2c4a5a;padding:12px 11px;gap:4px;flex-direction:column;cursor:pointer}
.burger span{width:18px;height:2px;background:#eaf3f6;display:block;transition:.25s}

/* ── stars ─────────────────────────────────────────── */
.stars{--s:16px;display:inline-flex;gap:3px}
.stars::before{
  content:"";width:calc(var(--s)*5 + 12px);height:var(--s);
  background:var(--cy);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9l6.6-.8z"/></svg>') 0 0/calc(var(--s) + 3px) var(--s) repeat-x;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9l6.6-.8z"/></svg>') 0 0/calc(var(--s) + 3px) var(--s) repeat-x;
}
.stars--lg{--s:22px}

/* ═══ HERO · full-bleed media stage ═══
   Mauricio asked for the reel to fill the whole hero with the name over
   it, rather than sitting in a panel beside the copy. That also kills
   the dead area that opened up to the right of the heading at wide
   widths. The media is an absolute layer; the copy rides on top of a
   scrim that guarantees the text stays legible over any frame. */
.hero2{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-items:end;
  min-height:clamp(540px,76vh,780px);
  padding:clamp(120px,20vh,220px) var(--gut) clamp(38px,6vh,66px);
  background:linear-gradient(168deg,#e2f4f8 0%,#f4fbfc 46%,var(--tint) 120%);
}
.hero2__stage{position:absolute;inset:0;z-index:0}
.hero2__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,22,31,.90) 0%, rgba(6,22,31,.72) 38%, rgba(6,22,31,.30) 68%, rgba(6,22,31,.16) 100%),
    linear-gradient(0deg,  rgba(6,22,31,.55) 0%, rgba(6,22,31,0) 45%);
}
.hero2__copy{position:relative;z-index:3;max-width:min(46rem,64%)}
/* The floor has to keep the longest word ("Conception") inside the
   gutters at 320px, or the heading clips - which is the exact defect
   Reggie circled. Checked against scrollWidth at 320/390/768/1440. */
.hero2__h{
  font-size:clamp(2.55rem,9vw,7.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;
  color:#fff;
}
/* the reveal mask must clear the deepest descender ("g" in Design) with
   room to spare, or the animation box shaves the tail off */
/* The mask must clear the deepest descender ("g" in Design, "p" in
   Conception). NOTE: scrollHeight === clientHeight does NOT catch this -
   glyph ink spilling past the line box is not counted in scrollHeight,
   which is why it kept coming back after being "verified". Measure the
   baseline plus actualBoundingBoxDescent. Both padding and ink depth are
   em-relative, so clearance holds at every size. */
.hw{display:block;overflow:hidden;padding-bottom:.46em;margin-bottom:-.36em}
.hw i{display:block;font-style:normal;transform:translateY(155%);animation:hword .8s var(--spring) .15s forwards}
.hw--2 i{animation-delay:.28s;background:linear-gradient(100deg,#66e0f2,#14bdd4 65%);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes hword{to{transform:none}}
.hero2__loc{margin:6px 0 0;font-size:14.5px;color:#b6d3dc}
.hero2__cta{display:flex;align-items:center;gap:22px;margin:32px 0 0;flex-wrap:wrap}
.hero2__worklink{font-family:Outfit,sans-serif;font-weight:700;font-size:15.5px;color:#7fe3f0;transition:color .2s}
.hero2__worklink:hover{color:#fff}
.hero2__proof{display:flex;align-items:center;gap:10px;margin:30px 0 0;font-size:14px;color:#c3dae1;flex-wrap:wrap}
.hero2__proof>b{font-family:Outfit,sans-serif;font-weight:800;font-size:17px;color:#fff}
.hero2__since{border-left:1px solid #ffffff3d;padding-left:12px;margin-left:2px}
.hero2__since b{font-family:Outfit,sans-serif;font-weight:800;color:#fff}
.hero2 .stars::before{background:var(--cy)}
.hero2 .btn--solid{background:var(--cy);color:#04222b}
.hero2 .btn--solid::before{background:#fff}

@media (max-width:820px){
  .hero2{min-height:clamp(480px,74vh,640px);padding-top:clamp(72px,14vh,120px)}
  .hero2__copy{max-width:none}
  /* a left-to-right scrim does nothing for text that now spans the full
     width; on phones the darkness has to come from the bottom up */
  .hero2__scrim{
    background:
      linear-gradient(0deg, rgba(6,22,31,.92) 0%, rgba(6,22,31,.74) 46%, rgba(6,22,31,.42) 100%);
  }
  .hero2__cta .btn{width:100%}
  /* on touch the frames are swipeable, and the arrows landed on top of
     the copy; the dots-free swipe is the better control here */
  }

.hero2__main{
  margin:0;position:absolute;inset:8% 10% 10% 4%;overflow:hidden;background:#fff;
  box-shadow:0 30px 70px -30px rgba(3,40,55,.4);
}
.hero2__main img{width:100%;height:100%;object-fit:cover}
/* vinyl peel: a film sweeps off the photo once */
.peel::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(115deg, #bfe9f1 0 40%, #e6f7fa 46%, #14bdd4cc 50%, transparent 50.5%);
  transform:translateX(0);transition:transform 1.4s var(--ease) .4s;
}
.peel.in::after{transform:translateX(130%)}
.hero2__detail{
  margin:0;position:absolute;right:0;bottom:0;width:44%;aspect-ratio:1.05;overflow:hidden;
  border:6px solid var(--paper);box-shadow:0 24px 50px -24px rgba(3,40,55,.45);z-index:3;
}
.hero2__detail img{width:100%;height:100%;object-fit:cover}
.hero2__cut{position:absolute;inset:-4% -2% -2% -6%;width:106%;height:106%;pointer-events:none;z-index:4}
.cutpath{
  stroke:var(--cy2);stroke-width:1.6;stroke-dasharray:6 7;opacity:.65;
}
.cutdraw .cutpath{
  stroke-dasharray:2400;stroke-dashoffset:2400;animation:cut 2.4s var(--ease) .3s forwards;
}
@keyframes cut{to{stroke-dashoffset:0}}

/* ═══ SERVICES · asymmetric ═══ */
.sv{padding:clamp(54px,9vh,100px) var(--gut)}
.sv__h{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:800;letter-spacing:-.04em;margin-bottom:30px}
.sv__grid{
  display:grid;gap:14px;
  grid-template-columns:1.1fr 1fr 1fr;
  grid-template-rows:240px 240px;
  grid-template-areas:"signs veh veh" "signs app win";
}
.sv__grid a{position:relative;overflow:hidden;display:block;background:var(--navy)}
.sv__grid img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .6s var(--ease),opacity .3s}
.sv__grid a:hover img{transform:scale(1.05);opacity:1}
.sv__label{
  position:absolute;left:0;bottom:0;z-index:2;background:var(--paper);color:var(--ink);
  font-family:Outfit,sans-serif;font-weight:700;font-size:clamp(15px,1.5vw,19px);
  padding:10px 18px 10px 16px;letter-spacing:-.01em;
  transition:background .25s,color .25s;
}
.sv__grid a:hover .sv__label{background:var(--cy);color:#04222b}
.sv__signs{grid-area:signs}
.sv__veh{grid-area:veh}
.sv__app{grid-area:app}
.sv__win{grid-area:win}
.sv__film{ /* transparent-film treatment for window graphics */
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg, transparent 0 38%, #bfe9f180 38% 60%, transparent 60%);
  mix-blend-mode:screen;pointer-events:none;
}
.sv__large{grid-column:1 / -1;height:180px;margin-top:14px;display:block;position:relative;overflow:hidden}
.sv__more{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap}
.sv__more a{
  font-family:Outfit,sans-serif;font-weight:600;font-size:14.5px;color:var(--deep);
  border-bottom:1.5px solid var(--line2);padding-bottom:3px;transition:border-color .2s,color .2s;
}
.sv__more a:hover{color:var(--cy2);border-color:var(--cy)}

/* ═══ SELECTED WORK · overlap ═══ */
.wp{padding:clamp(40px,7vh,80px) var(--gut) clamp(64px,9vh,110px)}
.wp__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.wp__head h2{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:800;letter-spacing:-.04em}
.wp__all{font-family:Outfit,sans-serif;font-weight:700;font-size:16px;color:var(--deep)}
.wp__all:hover{color:var(--cy2)}
.wp__stage{position:relative;height:clamp(340px,42vw,520px)}
.wp__f{margin:0;position:absolute;overflow:hidden;box-shadow:0 26px 60px -26px rgba(3,40,55,.38);background:#fff}
.wp__f img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wp__f:hover{z-index:6}
.wp__f:hover img{transform:scale(1.05)}
.wp__f--a{left:0;top:0;width:34%;height:88%}
.wp__f--b{left:31%;top:12%;width:26%;height:64%;z-index:2;border:6px solid #fff}
.wp__f--c{left:54%;top:0;width:24%;height:76%}
.wp__f--d{right:0;bottom:0;width:26%;height:58%;z-index:3;border:6px solid #fff}

/* ═══ HOW IT WORKS · real blueprint: deep teal between the pale
   surfaces and the navy band, light grid, drawn cyan path ═══ */
.how{
  padding:clamp(54px,9vh,100px) var(--gut);
  color:#eaf3f6;
  background:
    repeating-linear-gradient(90deg, #ffffff0c 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,  #ffffff0c 0 1px, transparent 1px 44px),
    linear-gradient(160deg,#0f3a50 0%,#0c2d40 100%);
}
.how h2{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:800;letter-spacing:-.04em;margin-bottom:44px}
.how__track{position:relative}
.how__line{position:absolute;left:0;right:0;top:20px;width:100%;height:60px;pointer-events:none}
.howpath{stroke:var(--cy);stroke-width:2;stroke-dasharray:5 6;opacity:.6}
.in .howpath{stroke-dasharray:1400;stroke-dashoffset:1400;animation:cut 2s var(--ease) .2s forwards}
.how__stops{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.how__stops li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:6px}
.how__stops li:nth-child(2){margin-top:26px}
.how__stops li:nth-child(3){margin-top:8px}
.how__stops li:nth-child(4){margin-top:32px}
.how__stops svg{width:44px;height:44px}
.hi{fill:none;stroke:#d7e6ea;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.how__stops b{
  font-family:Outfit,sans-serif;font-weight:800;font-size:14px;color:var(--cy);
}
.how__stops h3{font-size:1.05rem;letter-spacing:-.01em;line-height:1.3;max-width:22ch}

/* ═══ DARK BAND · reviews + map ═══ */
.dark{background:var(--navy);color:#eaf3f6}
.rv2{padding:clamp(50px,8vh,90px) var(--gut) clamp(30px,4vh,50px)}
.rv2__head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid #ffffff14;transition:opacity .2s;
}
.rv2__head:hover{opacity:.85}
.rv2__n{font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1}
.rv2__head span{color:#9fb9c1;font-size:14.5px}
.rv2__head span i{font-style:normal;color:#eaf3f6;font-weight:700}
.rv2__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);padding-top:30px}
.rcard2{position:relative;padding-left:34px}
.rcard2::before{
  content:"“";position:absolute;left:0;top:-6px;font-family:Outfit,sans-serif;
  font-size:52px;font-weight:800;color:var(--cy);line-height:1;
}
.rcard2 p{margin:8px 0 10px;font-size:14.5px;line-height:1.65;color:#d7e6ea}
.rcard2 .stars{--s:12px}
.rcard2__tag{
  display:inline-block;font-family:Outfit,sans-serif;font-weight:700;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#e8c56a;border:1px solid #5a4a1e;
  background:#2a2410;padding:2px 7px;margin-bottom:6px;
}
.rcard2 span{font-size:12px;color:#7d9aa4}

/* location: wide split, real map */
.loc{display:grid;grid-template-columns:1.15fr .85fr;min-height:440px;border-top:1px solid #ffffff14}
.loc__map{position:relative;min-height:340px}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.9)}
.loc__info{padding:clamp(30px,5vh,60px) var(--gut) clamp(30px,5vh,60px) clamp(24px,3.5vw,56px)}
.loc__info h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:20px}
.loc__addr{margin:0 0 12px;font-size:15.5px;line-height:1.55}
.loc__addr b{display:block;font-family:Outfit,sans-serif;font-size:17px}
.loc__addr span{color:#9fb9c1}
.loc__tel{margin:0 0 16px;font-size:15.5px}
.loc__tel a{font-family:Outfit,sans-serif;font-weight:700}
.loc__tel a:hover{color:var(--cy)}
#openTxt.on{color:#4ade80;font-weight:600;margin-left:10px}
#openTxt.off{color:#f0a08e;font-weight:600;margin-left:10px}
.loc__hrs{border-collapse:collapse;margin:0 0 22px}
.loc__hrs td{padding:3px 0;font-size:14px;color:#9fb9c1}
.loc__hrs td:last-child{padding-left:26px;color:#eaf3f6;font-variant-numeric:tabular-nums}
.loc__row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.loc__ig{font-family:Outfit,sans-serif;font-weight:600;font-size:14px;color:#9fb9c1}
.loc__ig:hover{color:var(--cy)}

/* ═══ FINAL CTA · film ═══ */
.cta2{
  padding:clamp(54px,9vh,100px) var(--gut);
  background:
    linear-gradient(105deg, transparent 0 55%, #ffffff2e 55% 72%, transparent 72%),
    linear-gradient(120deg, var(--cy) 0%, var(--cy2) 60%, var(--deep) 130%);
  color:#04222b;
}
.cta2 h2{font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.04em;max-width:16ch}
.cta2__row{display:flex;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}
.cta2__tel{font-family:Outfit,sans-serif;font-weight:700;font-size:15.5px}
.cta2__tel:hover{text-decoration:underline}

/* ── footer: same brand shell as the header ─────────── */
.ft{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:26px var(--gut);
  font-size:13px;color:#9fb9c1;background:linear-gradient(0deg,#0d1f2d,#0e2231);
  border-top:0;position:relative;
}
.ft::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--deep),var(--cy) 50%,var(--cy2));
  box-shadow:0 -1px 10px rgba(20,189,212,.4);
}
.ft img{height:28px;width:auto}
.ft a:hover{color:var(--cy)}

/* ═══ WORK PAGE ═══ */
.workpage{background:var(--paper)}
.wk{padding:clamp(28px,4vh,48px) var(--gut) 70px}
.wk__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.wk__head h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.045em}
.ig{
  display:inline-flex;align-items:center;gap:8px;
  font-family:Outfit,sans-serif;font-weight:600;font-size:13.5px;color:var(--deep);
}
.ig:hover{color:var(--cy2)}
.wk__filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.wkf{
  border:1.5px solid var(--line2);background:#fff;cursor:pointer;padding:8px 14px;
  font-family:Outfit,sans-serif;font-weight:600;font-size:13px;transition:.18s;
}
.wkf i{font-style:normal;color:var(--mu);font-weight:600;margin-left:4px}
.wkf:hover{border-color:var(--cy)}
.wkf.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.wkf.is-on i{color:var(--cy)}
.wk__grid{columns:4 240px;column-gap:10px}
.wkt{margin:0 0 10px;break-inside:avoid;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--spring) var(--d,0s)}
.wkt.in{opacity:1;transform:none}
.wkt button{display:block;border:0;padding:0;background:none;cursor:zoom-in;width:100%}
.wkt img{width:100%;display:block;transition:transform .4s var(--ease),box-shadow .3s}
.wkt button:hover img{transform:scale(1.02);box-shadow:0 16px 40px -18px rgba(3,40,55,.4)}
.wkt button:focus-visible img{outline:3px solid var(--cy)}

/* lightbox */
.lbx{
  position:fixed;inset:0;z-index:100;background:rgba(6,18,26,.94);
  display:flex;align-items:center;justify-content:center;animation:fade .25s;
}
@keyframes fade{from{opacity:0}}
.lbx[hidden]{display:none}
.lbx__fig{margin:0;max-width:88vw;max-height:90vh;display:flex;flex-direction:column;gap:10px}
.lbx__fig img{max-width:88vw;max-height:82vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lbx__fig figcaption{color:#9fb9c1;font-size:13.5px;text-align:center}
.lbx__quote{align-self:center;background:#fff;white-space:nowrap}
.servicepage{min-height:100vh;padding:150px max(28px,6vw) 80px;display:grid;grid-template-columns:minmax(300px,.8fr) 1.2fr;gap:7vw;align-items:center}.servicepage__copy h1{font:800 clamp(3.4rem,8vw,7rem)/.88 Outfit,sans-serif;margin:12px 0 24px}.servicepage__copy>p{font-size:1.08rem;line-height:1.65;max-width:54ch;color:var(--ink)}.servicepage__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.servicepage__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.servicepage__grid img{width:100%;aspect-ratio:1;object-fit:cover}.servicepage__grid a:nth-child(2){transform:translateY(32px)}.servicepage__pending{border-top:3px solid var(--ink);padding:24px 0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:800;color:var(--deep)}
@media(max-width:760px){.servicepage{grid-template-columns:1fr;padding-top:120px}.servicepage__grid{margin-top:10px}.servicepage__grid a:nth-child(2){transform:none}}
.lbx__btn{
  position:absolute;background:#ffffff14;border:1px solid #ffffff2a;color:#fff;
  width:46px;height:46px;cursor:pointer;font-size:20px;transition:.2s;z-index:2;
}
.lbx__btn:hover{background:var(--cy);color:#04222b;border-color:var(--cy)}
.lbx__x{top:16px;right:16px}
.lbx__prev{left:14px;top:50%;transform:translateY(-50%)}
.lbx__next{right:14px;top:50%;transform:translateY(-50%)}
.lbx__count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#9fb9a1;color:#9fb9c1;font-family:Outfit,sans-serif;font-weight:600;font-size:13px}

/* ── garment diagram (quote page dependency) ───────── */
.tee__body{fill:#fff;stroke:var(--ink);stroke-width:3}
.tee__collar{fill:none;stroke:var(--ink);stroke-width:3}
.zone{
  fill:rgba(20,189,212,.1);stroke:var(--cy2);stroke-width:1.6;stroke-dasharray:5 4;
  cursor:pointer;transition:.2s;
}
.zone:hover{fill:rgba(20,189,212,.28)}
.zone.is-on{fill:rgba(20,189,212,.4);stroke:var(--deep);stroke-dasharray:none;stroke-width:2.2}

/* ── responsive ────────────────────────────────────── */
@media (max-width:1080px){
  .hero2{grid-template-columns:1fr;min-height:0}
  .sv__grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px 220px;
    grid-template-areas:"signs signs" "veh veh" "app win"}
  .rv2__list{grid-template-columns:1fr}
  .rcard2{padding-left:30px}
  .loc{grid-template-columns:1fr}
  .loc__map{min-height:320px}
  .wp__stage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .wp__f{position:static;width:auto;height:220px;border:0}
}
@media (max-width:820px){
  .how__stops{grid-template-columns:1fr 1fr;gap:26px}
  .how__stops li{margin-top:0!important}
  .how__line{display:none}
  .wk__grid{columns:2 160px}
}
@media (max-width:560px){
  .sv__grid{grid-template-columns:1fr;grid-template-rows:repeat(4,200px);
    grid-template-areas:"signs" "veh" "app" "win"}
  .sv__large{height:150px}
  .wp__stage{grid-template-columns:1fr}
  .wp__f{height:240px}
  .hero2__cta .btn{width:100%}
  .lbx__prev{left:6px}.lbx__next{right:6px}
}

/* ── motion off ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-fx="wipe"]::after{display:none}
  .hw i{animation:none;transform:none}
  .peel::after{display:none}
  .cutdraw .cutpath{animation:none;stroke-dasharray:6 7;stroke-dashoffset:0}
  .in .howpath{animation:none;stroke-dasharray:5 6;stroke-dashoffset:0}
  .nav__mark{animation:none}
  .wkt{opacity:1;transform:none;transition:none}
}

/* ── owner-review pass: equal service squares ──────── */
.sv__grid--eq{
  grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;
  grid-template-areas:none;
}
.sv__grid--eq a{grid-area:auto;aspect-ratio:1.24;position:relative;overflow:hidden;background:var(--navy)}
.sv__cards{display:grid;place-items:center}
.sv__cardart{width:78%;height:auto}
.how__stops--3{grid-template-columns:repeat(3,1fr)}
.how__stops--3 li{margin-top:0!important}
.how__stops p{margin:2px 0 0;font-size:13.5px;color:#b8ced6;line-height:1.5;max-width:26ch}
@media (max-width:900px){.sv__grid--eq{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sv__grid--eq{grid-template-columns:1fr}.sv__grid--eq a{aspect-ratio:1.5}}
@media (max-width:820px){.how__stops--3{grid-template-columns:1fr}}

/* color wheel */
.cwheel{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cwheel input[type=color]{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}
.cwheel__chip{
  width:58px;height:58px;border:2px solid var(--line2);cursor:pointer;display:block;
  background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
  transition:transform .2s var(--ease),border-color .2s;
}
.cwheel__chip:hover{transform:scale(1.05);border-color:var(--cy)}
.cwheel__val{font-family:Outfit,sans-serif;font-weight:700;font-size:14px}
.cwheel .fhelp{flex-basis:100%}


/* ═══ HEADER SYSTEM · explicit responsive states ═══
   State A >=1181px  : logo · links · Quote · phone number · lang · cart
   State B 821-1180px: logo · burger menu · Quote · phone ICON · lang · cart
   State C 561-820px : logo · Quote · cart · burger (lang+phone live in menu)
   State D <=560px   : compact logo (still readable) · cart · burger        */
.nav{gap:clamp(12px,2vw,28px)}
.nav__quote{padding:11px 18px;white-space:nowrap;background:var(--cy);color:#04222b}
.nav__quote::before{background:#7fe3f0}
.nav__quote:hover{color:#04222b}
.nav__tel{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:Outfit,sans-serif;font-weight:700;font-size:14px;color:#eaf3f6;
  border:1.5px solid #2c4a5a;background:#ffffff0d;padding:9px 14px;transition:border-color .2s,color .2s;
}
.nav__tel:hover{border-color:var(--cy);color:var(--cy)}
.nav__mtel{display:none!important}
.navcart{
  position:relative;display:inline-flex;align-items:center;gap:7px;color:#eaf3f6;white-space:nowrap;
  border:1.5px solid #2c4a5a;background:#ffffff0d;padding:9px 12px;transition:border-color .2s;
}
.navcart.has-draft::after{ /* unfinished draft: a dot, never a bigger number */
  content:"";position:absolute;top:-5px;right:-5px;width:10px;height:10px;border-radius:50%;
  background:var(--cy);box-shadow:0 0 0 2px #0d1f2d;
}
.navcart:hover{border-color:var(--cy)}
.navcart b{
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  background:var(--deep);color:#fff;font-size:11px;font-family:Outfit,sans-serif;font-weight:800;
}

@media (max-width:1180px){
  .nav__links{display:none}
  .nav__r{margin-left:auto}
  .nav__links.open{
    display:flex;flex-direction:column;position:absolute;top:70px;left:0;right:0;
    background:var(--navy2);border-bottom:2px solid var(--cy);padding:10px var(--gut) 18px;z-index:70;
    box-shadow:0 24px 40px -20px rgba(4,40,55,.55);
  }
  .nav__links.open a{padding:14px 0;border-bottom:1px solid #ffffff14;color:#eaf3f6}
  .burger{display:flex}
  .nav__telno{display:none}                 /* phone becomes an icon */
  .nav__tel{padding:10px 11px}
}
@media (max-width:820px){
  .nav{height:70px}
  .nav__mark{height:40px}
  .nav__word{height:24px}
  .nav__tel{display:none}                   /* phone moves into the menu */
  .lang{display:none}                       /* language moves into the menu */
  .m-lang .lang{display:flex}               /* ...and is visible there */
  .nav__links.open .nav__mtel{display:flex!important;font-weight:700;color:var(--cy)}
  .nav__links.open .m-lang{display:flex}
}
/* Phones: the row must FIT, or the burger gets pushed past the screen
   edge and navigation becomes unreachable (overflow-x:clip hides it).
   Everything shrinks; the wordmark drops its min-width. */
@media (max-width:560px){
  .nav{gap:8px;padding:0 12px}
  .nav__word{height:20px;min-width:0;object-fit:contain}
  .nav__quote{padding:10px 12px;font-size:12.5px}
  .navcart{padding:8px 10px}
}
@media (max-width:430px){
  .nav{gap:6px;padding:0 10px;height:64px}
  .nav__mark{height:34px}
  .nav__word{height:17px}
  .nav__quote{padding:9px 11px;font-size:12px;letter-spacing:0}
  .nav__quote .qlong{display:none}          /* "Build a " drops, "Quote" stays */
  .navcart{padding:7px 8px;gap:5px}
  .navcart b{min-width:18px;height:18px;font-size:10.5px}
  .burger{padding:10px 9px}
  .burger span{width:16px}
}
@media (max-width:344px){
  .nav__word{display:none}                  /* mark only on the narrowest phones */
}
/* menu language row (injected by JS on small screens) */
.m-lang{display:none;align-items:center;gap:10px;padding:14px 0}

/* ═══ featured signs band ═══ */
.svfeat{
  display:grid;grid-template-columns:1.15fr .85fr;background:var(--navy);color:#eaf3f6;
  margin-bottom:14px;overflow:hidden;min-height:340px;
}
.svfeat__media{position:relative;overflow:hidden}
.svfeat__media img{width:100%;height:100%;object-fit:cover;object-position:center 24%;transition:transform .6s var(--ease)}
.svfeat:hover .svfeat__media img{transform:scale(1.04)}
.svfeat__copy{padding:clamp(24px,3.5vw,52px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.svfeat__copy h3{font-size:clamp(1.6rem,2.8vw,2.5rem);letter-spacing:-.03em;line-height:1.05}
.svfeat__copy p{margin:0;color:#b8ced6;font-size:15px;line-height:1.6;max-width:44ch}
.svfeat__row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.svfeat__link{font-family:Outfit,sans-serif;font-weight:700;color:var(--cy)}
.svfeat__quote{
  font-family:Outfit,sans-serif;font-weight:700;font-size:13.5px;color:#eaf3f6;
  border:1.5px solid #2a4a5c;padding:10px 16px;transition:border-color .2s;
}
.svfeat:hover .svfeat__quote{border-color:var(--cy)}
.sv__grid--5{grid-template-columns:repeat(6,1fr)}   /* six equal service squares */
.sv__grid--5 a{aspect-ratio:.92}

/* ═══ filmstrip proof ═══ */
.strip{
  padding:clamp(44px,7vh,80px) var(--gut);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), #0d1f2d14 calc(20% - 1px) 20%),
    var(--tint);
}
.strip__head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.strip__links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Instagram: the one place its brand gradient is allowed */
.igcard{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line2);padding:8px 14px 8px 8px;transition:transform .2s var(--ease),box-shadow .2s}
.igcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(3,40,55,.35)}
.igcard__glyph{
  width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:radial-gradient(120% 120% at 15% 100%, #fdc468 0%, #f77737 28%, #dd2a7b 58%, #8134af 82%, #515bd4 100%);
}
.igcard__t{display:flex;flex-direction:column;line-height:1.25}
.igcard__t b{font-family:Outfit,sans-serif;font-size:12.5px;color:var(--ink)}
.igcard__t i{font-style:normal;font-size:11px;color:var(--mu)}
.strip__head h2{font-size:clamp(1.8rem,3.2vw,2.8rem);letter-spacing:-.03em}
.strip__row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.strip__row a{
  position:relative;overflow:hidden;aspect-ratio:.8;display:block;background:#fff;
  box-shadow:0 18px 40px -20px rgba(3,40,55,.35);
}
.strip__row a::before,.strip__row a::after{
  content:"";position:absolute;width:12px;height:12px;z-index:2;border:0 solid var(--cy2);
}
.strip__row a::before{top:5px;left:5px;border-top-width:1.5px;border-left-width:1.5px}
.strip__row a::after{bottom:5px;right:5px;border-bottom-width:1.5px;border-right-width:1.5px}
.strip__row img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.strip__row a:hover img{transform:scale(1.05)}

/* process photo stop */
.how__photo img{width:100%;max-width:190px;aspect-ratio:1.35;object-fit:cover;border:4px solid #fff;box-shadow:0 14px 30px -16px rgba(3,40,55,.4)}

@media (max-width:1080px){
  .svfeat{grid-template-columns:1fr}
  .svfeat__media{min-height:240px}
  .sv__grid--5{grid-template-columns:repeat(3,1fr)}
  .strip__row{grid-template-columns:repeat(3,1fr)}
  .strip__row a:nth-child(n+4){display:none}
}
@media (max-width:560px){
  .sv__grid--5{grid-template-columns:1fr 1fr}
  .strip__row{grid-template-columns:1fr 1fr}
  .strip__row a:nth-child(n+4){display:block}
  .strip__row a:nth-child(5){display:none}
}

/* gallery video tiles + lightbox video */
.wkt__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;display:grid;place-items:center;background:#0b1c22cc;color:#fff;
  font-size:15px;pointer-events:none;
}
.wkt button{position:relative}
.lbx__fig video{max-width:88vw;max-height:82vh;box-shadow:0 30px 90px rgba(0,0,0,.5)}

/* ═══ hero glow ═══ */
/* featured sign gets halo lighting */
.svfeat{position:relative}
.svfeat::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(45% 60% at 28% 40%, rgba(20,189,212,.12), transparent 70%);
}
.svfeat__media{position:relative}
.svfeat__media::after{ /* soft glow behind the sign image edge */
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(20,189,212,.12);
}

/* mobile: less text before media. The location line stays: with the
   tag row gone there is room, and the shop's city is a hero fact. */
@media (max-width:820px){
    .hero2__proof{margin-top:18px;font-size:13px}
  .hero2__cta{margin-top:22px}
  .hero2{padding-top:30px}
}

/* ═══ hero collage: four panels on a curved track ═══
   Embla drives the physics; JS maps distance-from-center to rotateY,
   scale and opacity (inline styles), so the CSS here only shapes the
   stage. Controls: two edge arrows inside the collage and one discreet
   play pill on the active panel. */
.embla{position:relative;min-width:0;height:100%}
.embla__viewport{overflow:hidden;height:100%}
.embla__viewport:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
/* Full-bleed stage: one frame at a time, edge to edge. The old
   perspective/coverflow treatment belonged to the side-panel collage. */
.embla__container{
  display:flex;height:100%;touch-action:pan-y pinch-zoom;
  transform-style:preserve-3d;
}
.embla__slide{
  margin:0;position:relative;flex:0 0 100%;min-width:0;height:100%;
  /* the inner is scaled past 100% so the parallax has somewhere to
     travel; without this the overscan spills out of the slide and the
     neighbouring frame shows through as a hard vertical seam */
  overflow:hidden;
}
/* the tweened layer: rotates in place while the slide node stays under
   Embla's control, so the loop seam can never open a gap */
.embla__inner{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--navy);will-change:transform;backface-visibility:hidden;
}
.embla__slide.is-active{cursor:default}
.embla__slide img{width:100%;height:100%;object-fit:cover;display:block}
.embla__slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.embla__slide a{display:block;height:100%}
/* entrance: panels settle onto the track once */
.reel-in .embla__inner{animation:reelin .9s var(--spring) backwards}
.reel-in .embla__slide:nth-child(2) .embla__inner{animation-delay:.12s}
.reel-in .embla__slide:nth-child(3) .embla__inner{animation-delay:.24s}
.reel-in .embla__slide:nth-child(4) .embla__inner{animation-delay:.36s}
@keyframes reelin{
  from{opacity:0;transform:rotateY(-22deg) translateX(90px) scale(.85)}
}

@media (prefers-reduced-motion:reduce){
  .reel-in .embla__inner{animation:none}
  .embla__container{perspective:none}
}

/* ═══ shell: full-bleed surfaces, centered content ═══
   Backgrounds always span the viewport; inner content stops growing
   past the shell width so very wide screens get composition, not
   stretch. Lives at the end of the cascade on purpose. */
:root{--shell:1720px}
.nav,.hero2,.sv,.strip,.how,.rv2,.loc,.cta2,.ft,.wk{
  padding-inline:max(var(--gut), calc((100% - var(--shell)) / 2));
}
.rcard2__g{display:inline-block;vertical-align:-2px;margin-right:2px}

/* ═══ scroll motion: production grammar ═══
   "up"  = the element rises into place
   "cut" = a cyan edge sweeps off the image, like vinyl squeegeed down
   "pop" = a photo settles in
   All transform/opacity only; removed entirely for reduced motion. */
[data-fx="up"]{--ty:34px}
[data-fx="pop"]{--sc:.86;--ty:18px}
[data-fx="cut"]{
  opacity:1;transform:none;position:relative;overflow:hidden;
  clip-path:inset(0 0 0 0);
}
[data-fx="cut"]::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,var(--tint) 0%,#fff 100%);
  transform:translateY(0);
  transition:transform .95s var(--ease) var(--d,0s);
}
[data-fx="cut"]::after{  /* the cutting edge itself */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:5;
  background:var(--cy);box-shadow:0 0 12px rgba(20,189,212,.8);
  opacity:0;transform:translateY(0);
  transition:transform .95s var(--ease) var(--d,0s),opacity .3s .2s;
}
[data-fx="cut"].in::before{transform:translateY(-101%)}
[data-fx="cut"].in::after{transform:translateY(-101%);opacity:1}
/* section headings get their rule drawn in */
.sv__h,.strip__head h2,.how > h2,.cta2 h2{position:relative}
.sv__h::after,.strip__head h2::after,.how > h2::after,.cta2 h2::after{
  content:"";position:absolute;left:0;bottom:-10px;height:3px;width:clamp(70px,7vw,120px);
  background:linear-gradient(90deg,var(--cy),var(--deep));
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .15s;
}
.sv__h.in::after,.strip__head h2.in::after,.how > h2.in::after,.cta2 h2.in::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  [data-fx="cut"]::before,[data-fx="cut"]::after{display:none}
  .sv__h::after,.strip__head h2::after,.how > h2::after,.cta2 h2::after{transform:scaleX(1);transition:none}
}

/* The hero's top-right corner used to carry a cluster of crop marks,
   circles and stray dots. It read as confetti next to real install
   photography, so it is removed; the measurement grid already gives the
   corner its texture. */

.ft__legal{font-size:12.5px;color:#9fc3cf;text-decoration:underline}
.ft__legal:hover{color:#fff}
.ft__c{font-size:12.5px;color:#7fa4b2}
#openTxt.appt{color:var(--deep);font-weight:700}

/* ── cookie choice ──────────────────────────────────
   A real choice, so Accept and Decline are the same size, the same
   weight and side by side. Bottom-left, clear of the quote actions on
   the right. */
.ckbar{
  position:fixed;left:max(12px,2vw);bottom:max(12px,2vh);z-index:120;
  max-width:min(430px,calc(100vw - 24px));
  background:var(--navy);color:#d7e6ea;
  box-shadow:0 26px 60px -20px rgba(4,26,38,.72);
  border-left:3px solid var(--cy);
  animation:ckup .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ckup{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .ckbar{animation:none} }
.ckbar:focus{outline:none}
.ckbar__box{padding:16px 18px 17px}
.ckbar__h{margin:0 0 6px;font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em}
.ckbar__p{margin:0 0 13px;font-size:13px;line-height:1.55}
.ckbar__p a{color:var(--cy);text-decoration:underline}
.ckbar__row{display:flex;gap:9px}
.ckbar__b{
  flex:1 1 0;cursor:pointer;font-family:Outfit,sans-serif;font-weight:700;
  font-size:13.5px;padding:11px 14px;
  background:transparent;color:#d7e6ea;border:1px solid rgba(215,230,234,.42);
}
.ckbar__b:hover{border-color:#d7e6ea;color:#fff}
.ckbar__b--yes{background:var(--cy);color:#04222b;border-color:var(--cy)}
.ckbar__b--yes:hover{background:#3fd2e6;border-color:#3fd2e6;color:#04222b}
.ckbar__b:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
@media (max-width:560px){ .ckbar{left:8px;right:8px;bottom:8px;max-width:none} }

/* footer link back to the choice */
.ft__ck{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:12.5px;color:#7fa4b2;text-decoration:underline;
}
.ft__ck:hover{color:#fff}

/* ── map stand-in when cookies are declined ─────────
   The embed is a third party that sets its own cookies, so it never
   loads; this still has to get someone to the shop. */
.mapoff{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:26px;background:#0f2434;color:#c8dde4;
}
.mapoff p{margin:0;font-size:13.5px;line-height:1.5;max-width:30ch}
.mapoff__b{
  cursor:pointer;font-family:Outfit,sans-serif;font-weight:700;font-size:13.5px;
  padding:10px 18px;background:var(--cy);color:#04222b;border:0;
}
.mapoff__b:hover{background:#3fd2e6}
.mapoff__a{color:var(--cy);text-decoration:underline;font-size:13px}