/* Smitty's All Purpose — "this site is a pane of glass."
   Register: Barlow Condensed UPPER display + Barlow body (neither on any of the
   32 shipped sites); Kaushan Script only for the wordmark, after his flyer.
   Blue accent is a documented brand exception — his flyer and palette.mjs on
   his own job photos (#26374a, #33688d) both put him in blue. */

:root{
  --ink:#0b1a2c;          /* flyer near-black navy */
  --ink-2:#26374a;        /* palette.mjs "deep azure", from his photos */
  --blue:#0f6cb8;         /* text-safe blue (AA on white) */
  --cyan:#29a8f2;         /* flyer cyan — decoration on dark only */
  --glass:#eef5fa;        /* pale glass ground */
  --paper:#fff;
  --mullion:#0b1a2c;
  --line:#cfdbe5;
  --muted:#4f6274;
  --r:0;                  /* square corners — panes, not pills */
  --gut:clamp(16px,4vw,32px);
  --max:1180px;
  --display:"Barlow Condensed",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --script:"Kaushan Script",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 14px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ---------- type ---------- */
.kicker{font:600 13px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 .7em}
.kicker--light{color:var(--cyan)}
.h2,.hero__h,.h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0}
.h2{font-weight:800;font-size:clamp(38px,6vw,68px)}
.h3{font-weight:700;font-size:clamp(24px,2.6vw,30px);margin-bottom:.35em}
.stars{color:#e8a817;letter-spacing:.05em}

/* ---------- buttons: square, like a pane ---------- */
.btn{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  font:700 17px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:14px 20px;border:2px solid transparent;border-radius:var(--r);transition:background .15s,color .15s}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:#0a5a9b}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-2)}
.btn--line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--glass{border-color:rgba(255,255,255,.5);color:#fff}
.btn--glass:hover{background:#fff;color:var(--ink)}
.btn--big{font-size:clamp(26px,3.4vw,34px);padding:14px 24px 16px}
.btn__small{font:600 12px/1 var(--body);letter-spacing:.12em;opacity:.85}

/* ---------- header ---------- */
.bar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:4px solid var(--mullion)}
.bar__in{display:flex;align-items:center;gap:24px;min-height:68px}
.mark{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--ink)}
.mark__script{font:400 30px/1 var(--script);color:var(--blue);margin-bottom:5px}
.mark__caps{font:800 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{font:700 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--blue)}
.bar__call{padding:11px 16px;font-size:16px}
@media (max-width:860px){.nav{display:none}.bar__call{display:none}}
@media (max-width:380px){.mark__script{font-size:25px}.bar__call{font-size:14px;padding:10px 12px}}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--glass),var(--paper));padding:clamp(36px,6vw,80px) 0 clamp(48px,7vw,96px)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero__copy{min-width:0}
.hero__h{font-weight:800;font-size:clamp(64px,10vw,132px);margin:.06em 0 .12em}
.hero__tag{font:400 clamp(26px,3vw,34px)/1.2 var(--script);color:var(--blue);margin:0 0 .6em}
.hero__lede{font-size:clamp(17px,1.6vw,19px);max-width:34ch;color:var(--ink-2)}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 18px;align-items:stretch}
.hero__meta{font-size:15px;color:var(--muted);margin:0}
/* Phones: the wipe is the signature move, so the pane sits directly under the
   headline where it plays in view. The sticky call bar keeps the number on
   screen the whole time, so nothing important is pushed out of reach. */
@media (max-width:860px){
  .hero__in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero__copy{display:contents}
  .hero .kicker{order:1}
  .hero__h{order:2}
  .pane{order:3;margin:14px 0 22px}
  .pane__glass{aspect-ratio:16/11}
  .hero__tag{order:4}
  .hero__lede{order:5;max-width:none}
  .hero__act{order:6;flex-direction:column}
  .hero__act .btn{width:100%;align-items:center;text-align:center}
  .hero__meta{order:7}
}

/* ---------- the pane + the one squeegee pass ----------
   Text never sits under the grime — the copy is outside the pane, so the phone
   number is readable from the first paint whether or not the animation runs.
   The grime's RESTING state is wiped (clip-path fully inset); the animation
   only adds it back during its own delay via fill-mode:both. So a browser
   that skips the animation shows clean glass, never permanent dirt. */
.pane{position:relative;margin:0;border:clamp(10px,1.4vw,16px) solid var(--mullion);background:var(--mullion);
  box-shadow:0 24px 60px -24px rgba(11,26,44,.45);min-width:0}
.pane__glass{position:relative;overflow:hidden;aspect-ratio:4/3}
.pane__glass img{width:100%;height:100%;object-fit:cover}
.pane__mullion{position:absolute;background:var(--mullion);z-index:4}
.pane__mullion--v{top:0;bottom:0;left:50%;width:clamp(8px,1vw,12px);transform:translateX(-50%)}
.pane__mullion--h{left:0;right:0;top:50%;height:clamp(8px,1vw,12px);transform:translateY(-50%)}
.pane__sheen{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 42%,transparent 48%,transparent 60%,rgba(255,255,255,.12) 66%,transparent 72%)}
.pane__grime{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 100%);
  /* Dirty glass, not a tint: a haze that softens what's behind it, water
     spots at irregular (hand-placed, non-repeating) positions, and drip
     streaks on two coprime periods so no pattern lines up. */
  -webkit-backdrop-filter:blur(2.5px) saturate(.5) contrast(.9);
  backdrop-filter:blur(2.5px) saturate(.5) contrast(.9);
  background:
    radial-gradient(circle at 9% 14%,rgba(255,255,255,.26) 0 6px,rgba(255,255,255,.08) 7px 9px,transparent 10px),
    radial-gradient(circle at 23% 31%,rgba(255,255,255,.26) 0 4px,rgba(255,255,255,.08) 5px 7px,transparent 8px),
    radial-gradient(circle at 37% 9%,rgba(255,255,255,.26) 0 7px,rgba(255,255,255,.08) 8px 10px,transparent 11px),
    radial-gradient(circle at 48% 44%,rgba(255,255,255,.26) 0 3px,rgba(255,255,255,.08) 4px 6px,transparent 7px),
    radial-gradient(circle at 61% 22%,rgba(255,255,255,.26) 0 5px,rgba(255,255,255,.08) 6px 8px,transparent 9px),
    radial-gradient(circle at 72% 63%,rgba(255,255,255,.26) 0 8px,rgba(255,255,255,.08) 9px 11px,transparent 12px),
    radial-gradient(circle at 84% 17%,rgba(255,255,255,.26) 0 4px,rgba(255,255,255,.08) 5px 7px,transparent 8px),
    radial-gradient(circle at 91% 52%,rgba(255,255,255,.26) 0 6px,rgba(255,255,255,.08) 7px 9px,transparent 10px),
    radial-gradient(circle at 15% 72%,rgba(255,255,255,.26) 0 5px,rgba(255,255,255,.08) 6px 8px,transparent 9px),
    radial-gradient(circle at 33% 86%,rgba(255,255,255,.26) 0 7px,rgba(255,255,255,.08) 8px 10px,transparent 11px),
    radial-gradient(circle at 55% 78%,rgba(255,255,255,.26) 0 4px,rgba(255,255,255,.08) 5px 7px,transparent 8px),
    radial-gradient(circle at 78% 88%,rgba(255,255,255,.26) 0 5px,rgba(255,255,255,.08) 6px 8px,transparent 9px),
    radial-gradient(circle at 66% 38%,rgba(255,255,255,.26) 0 3px,rgba(255,255,255,.08) 4px 6px,transparent 7px),
    radial-gradient(circle at 27% 52%,rgba(255,255,255,.26) 0 4px,rgba(255,255,255,.08) 5px 7px,transparent 8px),
    radial-gradient(circle at 44% 24%,rgba(255,255,255,.26) 0 3px,rgba(255,255,255,.08) 4px 6px,transparent 7px),
    radial-gradient(circle at 88% 74%,rgba(255,255,255,.26) 0 3px,rgba(255,255,255,.08) 4px 6px,transparent 7px),
    repeating-linear-gradient(91deg,transparent 0 13px,rgba(58,50,36,.16) 13px 15px,transparent 15px 23px),
    repeating-linear-gradient(89deg,transparent 0 29px,rgba(58,50,36,.12) 29px 30px,transparent 30px 37px),
    linear-gradient(180deg,rgba(112,100,78,.50) 0%,rgba(84,78,62,.62) 70%,rgba(70,64,50,.72) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:wipe 1.5s cubic-bezier(.55,.05,.4,1) .45s both}
@keyframes wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

.squeegee{position:absolute;top:-6%;bottom:-6%;left:100%;width:30px;z-index:5;pointer-events:none;opacity:0;
  animation:sweep 1.5s cubic-bezier(.55,.05,.4,1) .45s both}
.squeegee__blade{position:absolute;inset:0 8px;transform:skewX(-3deg);
  background:linear-gradient(90deg,#c9d3dc 0 30%,#8995a1 60%,#111 60% 100%);
  box-shadow:-12px 0 16px -8px rgba(255,255,255,.75),5px 0 12px rgba(0,0,0,.35)}
.squeegee__handle{position:absolute;top:50%;left:50%;width:70px;height:18px;transform:translate(-8px,-50%);
  background:linear-gradient(180deg,#2aa9f0,#0f6cb8);box-shadow:0 2px 6px rgba(0,0,0,.35)}
@keyframes sweep{
  0%{left:-6%;opacity:1}
  92%{opacity:1}
  100%{left:103%;opacity:0}
}
@media (prefers-reduced-motion:reduce){.pane__grime,.squeegee{animation:none;display:none}}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,112px) 0}
.sec--glass{background:var(--glass)}
.sec--ink{background:var(--ink);color:#fff}
.sec--ink .h2{color:#fff}
.sec__head{margin-bottom:clamp(28px,4vw,48px)}
.sec__head--row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}

/* services: four panes inside one window frame — the 1px-gap trick, thickened
   into mullions. Panes are equal height so the frame reads as one window. */
.frame{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,12px);
  background:var(--mullion);border:clamp(10px,1.4vw,16px) solid var(--mullion)}
.frame__pane{background:var(--paper);display:flex;flex-direction:column;min-width:0}
.frame__pane img{width:100%;aspect-ratio:16/10;object-fit:cover}
.frame__txt{padding:clamp(20px,2.6vw,32px)}
.frame__txt p{color:var(--ink-2);margin:0}
/* The fourth pane has no photo, so it is the dark pane in the window: text
   up top, his own flyer line and the surface list anchored to the bottom so
   the height is filled on purpose rather than left as a pale void. */
.frame__pane--list{background:var(--ink);color:#fff}
.frame__pane--list .h3{color:#fff}
.frame__pane--list .frame__txt p{color:#c9d6e2}
.frame__all{margin-top:auto;padding:0 clamp(20px,2.6vw,32px) clamp(20px,2.6vw,32px)}
.frame__all-h{font:400 clamp(30px,3.4vw,40px)/1 var(--script);color:var(--cyan);margin:0 0 16px}
.surfaces{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.surfaces li{font:700 14px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;border:2px solid rgba(255,255,255,.55);color:#fff;padding:9px 11px}
@media (max-width:720px){.frame{grid-template-columns:minmax(0,1fr)}}

/* duo: photo + copy */
.duo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.duo--flip .duo__fig{order:2}
.duo__fig{margin:0;border:clamp(8px,1vw,12px) solid var(--mullion);background:var(--mullion);min-width:0}
.duo__fig img{width:100%;max-height:640px;object-fit:cover}
.duo__fig figcaption{background:var(--mullion);color:#fff;font:600 14px/1.3 var(--body);padding:10px 4px 2px}
.duo__copy{min-width:0}
.duo__copy>p{max-width:48ch;color:var(--ink-2)}
.duo__copy .h2{margin-bottom:.45em}
@media (max-width:860px){.duo{grid-template-columns:minmax(0,1fr)}.duo--flip .duo__fig{order:0}}

.pull{margin:28px 0 0;padding:4px 0 4px 20px;border-left:6px solid var(--blue)}
.pull p{font:600 clamp(19px,1.9vw,22px)/1.4 var(--body);margin:0 0 8px}
.pull cite{font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--muted)}

/* work grid — eager, no lazy-load (Atelier trap) */
/* Fixed column counts (6/4/2) with two double-width tiles = 24 cells, which
   divides evenly at every breakpoint — no ragged last row. */
.work{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:8px}
/* Row height is set exactly from the container width so a 2:1 tile and a
   square tile share one row height — otherwise the wide crop's intrinsic
   ratio ((2w+gap)/w, not 2) makes its row a few px taller than the squares. */
#work>.wrap{container-type:inline-size}
.work{grid-auto-rows:calc((100cqw - 40px)/6)}
.work .wide{grid-column:span 2}
.work li,.work a{height:100%}
.work img{height:100%;aspect-ratio:auto}
@media (max-width:999px){.work{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc((100cqw - 24px)/4)}}
@media (max-width:599px){.work{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;grid-auto-rows:calc((100cqw - 6px)/2)}}
.work a{display:block;position:relative;overflow:hidden;background:var(--ink-2)}
.work img{width:100%;object-fit:cover;transition:transform .35s ease,opacity .2s}
.work a:hover img{transform:scale(1.04)}

/* reviews */
.rev-links{display:flex;flex-wrap:wrap;gap:10px}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,12px);background:var(--mullion);border:clamp(8px,1vw,12px) solid var(--mullion)}
.review{margin:0;background:var(--paper);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column}
.review__stars{color:#e8a817;font-size:20px;letter-spacing:.1em;margin:0 0 12px}
.review blockquote{margin:0 0 18px;flex:1}
.review blockquote p{margin:0;font-size:17px;line-height:1.55}
.review figcaption{font:700 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:860px){.reviews{grid-template-columns:minmax(0,1fr)}}

/* estimate — the work order */
.est{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.est__copy{min-width:0}
.est__copy>p{color:var(--ink-2);max-width:40ch}
.est__rig{margin:28px 0 0;border:8px solid var(--mullion);background:var(--mullion)}
.est__rig figcaption{color:#fff;font:600 14px/1.3 var(--body);padding:8px 2px 0}
@media (max-width:860px){.est{grid-template-columns:minmax(0,1fr)}.est__rig{display:none}}

.order{background:#fffdf6;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:clamp(20px,3vw,32px);min-width:0;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(15,108,184,.08) 31px 32px)}
.order__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;border-bottom:3px double var(--ink);padding-bottom:12px;margin-bottom:18px}
.order__title{font:800 28px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.order__from{font:600 13px/1.3 var(--body);color:var(--muted);align-self:flex-end}
.order__set{border:0;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.order__set legend{font:700 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;padding:0}
.order__set label{display:flex;gap:10px;align-items:center;font-size:16px;padding:6px 0;cursor:pointer;min-width:0}
.order__set input{width:20px;height:20px;accent-color:var(--blue);flex:none}
@media (max-width:480px){.order__set{grid-template-columns:minmax(0,1fr)}}
.order__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:480px){.order__row{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;min-width:0}
.field span{font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.field input,.field select,.field textarea{font:400 16px/1.3 var(--body);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:0;padding:10px 12px;width:100%;min-width:0}
.order__out{background:var(--glass);border:2px dashed var(--ink-2);padding:14px 16px;margin:6px 0 16px}
.order__label{font:700 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.order__msg{margin:6px 0 0;font-size:16px;white-space:pre-line;overflow-wrap:anywhere}
.order__send{display:flex;flex-wrap:wrap;gap:10px}

/* map */
.mapbox{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:stretch}
.mapbox__card{min-width:0}
.facts{margin:22px 0;display:grid;gap:10px}
.facts div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;border-top:2px solid var(--line);padding-top:10px}
.facts dt{font:700 14px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;overflow-wrap:anywhere}
.mapbox__btns{display:flex;flex-wrap:wrap;gap:10px}
.mapbox__map{border:clamp(8px,1vw,12px) solid var(--mullion);background:var(--glass);min-height:360px;min-width:0}
.mapbox__map iframe{display:block;width:100%;height:100%;min-height:360px}
@media (max-width:860px){.mapbox{grid-template-columns:minmax(0,1fr)}}

/* footer */
.foot{background:var(--ink);color:#d6e2ec;padding:48px 0 40px;border-top:8px solid var(--cyan)}
.foot a{color:#fff}
.foot__in{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.mark--foot{margin:0 0 6px}
.mark--foot .mark__script{color:var(--cyan)}
.mark--foot .mark__caps{color:#fff}
.foot__tag{font:400 22px/1.2 var(--script);color:var(--cyan);margin:0}
.foot__cols{display:flex;flex-wrap:wrap;gap:28px 48px}
.foot__cols p{margin:0;font-size:15px;line-height:1.7}
.foot__legal{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);font-size:13px;color:#9fb1c1}

/* mobile call bar */
.callbar{display:none}
@media (max-width:860px){
  .foot{padding-bottom:96px}
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--blue);color:#fff;text-align:center;
    font:800 20px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:16px 12px calc(16px + env(safe-area-inset-bottom));
    border-top:4px solid var(--ink)}
}

/* lightbox (progressive: links open the full photo without JS) */
.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1400px);max-height:92vh;overflow:visible}
.lb::backdrop{background:rgba(6,14,24,.92)}
.lb img{max-width:min(96vw,1400px);max-height:88vh;width:auto;border:8px solid var(--mullion)}
.lb button{position:fixed;background:var(--ink);color:#fff;border:2px solid #fff;font:700 28px/1 var(--body);width:52px;height:52px;cursor:pointer}
.lb__x{top:14px;right:14px}
.lb__nav--prev{left:12px;top:50%;transform:translateY(-50%)}
.lb__nav--next{right:12px;top:50%;transform:translateY(-50%)}

/* ================= phone polish (2026-10-10) ================= */
.nw{white-space:nowrap}
.frame__pane img.pos-top{object-position:50% 12%}
.est__copy .h2{margin-bottom:.45em}

/* Checkboxes drawn by us: iOS renders native ones as faint grey circles.
   Square like a pane, 24px, full-row tap target. */
.order__set label{min-height:44px}
.order__set input[type=checkbox]{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;
  border:2px solid var(--ink);background:#fff;display:grid;place-content:center;cursor:pointer;flex:none}
.order__set input[type=checkbox]::before{content:"";width:12px;height:7px;border:solid #fff;border-width:0 0 3px 3px;
  transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .12s}
.order__set input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
.order__set input[type=checkbox]:checked::before{transform:rotate(-45deg) translate(1px,-1px) scale(1)}

/* Select matches the text fields instead of iOS's short rounded pill. */
.field select{-webkit-appearance:none;appearance:none;min-height:46px;padding-right:40px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230b1a2c' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 14px center}
.field input{min-height:46px}

/* Send row: two halves + a full-width call, never a ragged wrap. */
.order__send{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.order__send .btn{align-items:center;text-align:center}
.order__send .btn--line{grid-column:1 / -1}

@media (max-width:599px){
  /* Button groups go full width so every row lines up. */
  .rev-links,.mapbox__btns{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%}
  .rev-links .btn,.mapbox__btns .btn,.sec__head--row>.btn{width:100%;align-items:center;text-align:center}
  /* Story photos: no full-screen-tall images on a phone. */
  .duo__fig img{max-height:62vh;object-position:50% 30%}
  .order{box-shadow:6px 6px 0 var(--ink)}
}

/* The sticky call bar steps aside while the hero's own call button or the
   footer is on screen, so the number is never shown twice at once. Default
   is VISIBLE — the class is only ever added by JS. */
.callbar{transition:transform .25s ease}
.callbar.is-away{transform:translateY(110%)}

/* Real logo (2026-10-10) — his badge, lifted off its black/grey-glow background
   with macOS Vision subject lifting so it sits on white, glass and navy. */
.logo{display:block;line-height:0;flex:none}
.logo img{height:80px;width:auto}
.bar__in{min-height:92px}
.foot__logo{width:min(240px,60vw);height:auto;margin:0 0 10px}
@media (max-width:860px){.logo img{height:60px}.bar__in{min-height:72px}}

/* FormSubmit send (2026-10-12) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
button.btn{cursor:pointer;font-family:var(--display)}
button.btn[disabled]{opacity:.6;cursor:progress}
.order__status{margin:14px 0 0;padding:12px 14px;font-weight:600;border:2px solid var(--ink)}
.order__status.is-ok{background:#e6f6ec;border-color:#1f7a3f;color:#14532d}
.order__status.is-err{background:#fdecec;border-color:#b42318;color:#7a1712}