/* ═══════════════════════════════════════════════════════════════════════════
   Bin Movers — design system.

   Built on the Ghost Ridge spine: the same component vocabulary, the same
   one-bespoke-silhouette rule, the same resilience floor. What changes is the
   trade, and so both faces and the whole palette change with it.

   The palette is sampled straight off the logo and there are only two colours
   in it. #FCC100 is the lid of the bin and the MOVERS in the wordmark, taken
   with a dropper off the file the owner sent. The ground is the black the mark
   is drawn in, warmed a couple of points off neutral so it reads as a painted
   surface rather than as a UI dark mode: #121210, never #0F172A. Light bands
   are a warm paper, not a kit grey.

   Yellow carries every action, because on this mark it already does. What it
   cannot do is carry small type on paper: #FCC100 on #F4F3EF is a 1.5:1 smear.
   So a light band spends its accent as ink instead, #8A6400, and the pure
   yellow is kept for what sits on black — the buttons, the rules, the marquee,
   the numerals.

   Display type is Saira Condensed. The wordmark is a heavy slanted block with
   flat cuts and no curves in the terminals, and Saira Condensed is the closest
   thing to it that can also set a paragraph of nav links. Its 800 italic is
   the emphasis in every heading, so the one italic on the page is the same
   slant as the one on the van. Inter carries body copy and labels.

   Radius is 2px throughout. A tote bin has a moulded corner, not a rounded one.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Ground — the black of the mark, warmed off neutral */
  --ink:#121210;
  --ink-deep:#0A0A09;
  --panel:#1A1A17;
  --panel-2:#22221F;
  --panel-3:#2F2F2B;

  /* Light bands — warm paper, never a UI-kit grey */
  --paper:#F4F3EF;
  --paper-2:#E7E4DB;

  /* The one yellow, off the bin lid and the wordmark */
  --yellow:#FCC100;
  --yellow-lift:#FFD23D;
  --yellow-deep:#D9A500;
  /* What the accent becomes on paper, where the yellow itself is unreadable */
  --amber-ink:#8A6400;

  /* Ink on dark */
  --fg:#F3F2EE;
  --fg-2:#CFCDC6;
  --fg-3:#9B998F;
  --fg-4:#6C6A62;

  /* Ink on light */
  --dark:#1A1A17;
  --dark-2:#494740;
  --dark-3:#6A685F;

  /* Self-coloured edges — sensed, not drawn */
  --edge:rgba(243,242,238,.16);
  --edge-soft:rgba(243,242,238,.08);
  --edge-lt:rgba(26,26,23,.13);

  --radius:2px;

  --disp:'Saira Condensed','Arial Narrow',Oswald,sans-serif;
  --body:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --gut:clamp(20px,5vw,56px);
  --max:1180px;
  --pad:clamp(62px,7vw,106px) var(--gut);

  --e:cubic-bezier(.33,0,.25,1);
  --e-out:cubic-bezier(.16,1,.3,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
section[id],div[id]{ scroll-margin-top:76px }
html,body{ margin:0; padding:0 }

body{
  background:var(--ink);
  color:var(--dark);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--yellow); color:var(--ink) }
:focus-visible{ outline:2.5px solid var(--yellow); outline-offset:3px }
[hidden]{ display:none !important }

h1,h2,h3,h4{ font-family:var(--disp); font-weight:700; margin:0 }
/* The one italic: a single emphasised phrase per heading, in the display
   italic, which is the same slant as the wordmark on the van. */
h1 em,h2 em,.vband__t em{ font-style:italic; font-weight:800 }
h2 em{ color:var(--amber-ink) }
.sec--dark h2 em,.vband__t em{ color:var(--yellow) }

/* Hover changes state, never position: no lift, no scale on a control. */
a,button{ transition:background-color .28s var(--e-out),color .28s var(--e-out),border-color .28s var(--e-out) }
input,select,textarea{ transition:border-color .2s ease,box-shadow .2s ease }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--yellow); color:var(--ink); padding:12px 20px; font-weight:700; border-radius:var(--radius) }
.skip:focus{ left:12px; top:12px }

/* ── the glow ────────────────────────────────────────────────────────────────
   Lifted wholesale from Perfectionist Aluminum, whose lockup has the same
   problem this one does and solves it the same way: stacked white drop-shadows
   on the image, not a panel behind it. A filter reads the alpha channel, so
   the light follows the letterforms and the badge ring themselves and the
   transparent field around them stays transparent. Each shadow is applied to
   the result of the one before it, which is what builds the spread out of four
   short radii rather than one long soft one.

   It is legibility, not decoration. Most of this mark is black line on
   transparency — the badge ring, the BIN in the wordmark, the outline round
   the truck and the bin — and over the page's own ground or a dark photograph
   every one of those would simply disappear. White is the only colour that
   gives all of them an edge at once. */
.glow{
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 5px rgba(255,255,255,.92))
    drop-shadow(0 0 13px rgba(255,255,255,.5));
}
/* The big one, over a photograph. Same four steps, longer radii, and a fifth
   at the far end in the brand yellow — far enough out that it is a warm field
   the mark sits in rather than a colour on the mark itself, which is what went
   wrong the first time this was built in amber: the yellow crept in close, the
   white edge never got its chance, and the black ring went to mud. */
.glow--big{
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 5px #fff)
    drop-shadow(0 0 16px rgba(255,255,255,.95))
    drop-shadow(0 0 40px rgba(255,255,255,.62))
    drop-shadow(0 0 96px rgba(252,193,0,.4));
}

/* ── shared measures ─────────────────────────────────────────────────────── */
.wrap{ max-width:var(--max); margin-inline:auto }
.sec{ padding:var(--pad) }
.sec--paper{ background:var(--paper) }
.sec--stone{ background:var(--paper-2) }
.sec--dark{ background:var(--panel-2); color:var(--fg) }

/* The substrate carries the grain, never the content over it. */
.sec--paper,.sec--stone{ position:relative; isolation:isolate }
.sec--paper::before,.sec--stone::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); opacity:.05;
}

.kicker{
  margin:0 0 11px; font-family:var(--disp); font-weight:700; font-size:.88rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--amber-ink);
  display:flex; align-items:center; gap:9px;
}
.kicker--lt{ color:var(--yellow) }
.kicker svg{ flex:none }

h2,.h2{
  font-size:clamp(2.2rem,1.3rem + 3vw,3.6rem);
  line-height:1; letter-spacing:-.004em; text-wrap:balance;
}
.lede{ margin:0; color:var(--dark-2); font-size:1.02rem }
.sec--dark .lede{ color:var(--fg-3) }

/* The head: a heading and, beside it, the paragraph. One filled action to a
   head, never a filled button next to an outlined one. */
.head{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:20px clamp(34px,4vw,64px); align-items:end; margin-bottom:clamp(26px,3.2vw,42px);
}
.head--solo{ grid-template-columns:1fr }

/* ── the one bespoke silhouette ──────────────────────────────────────────── */
/* A 5px yellow rule whose right end comes to a point, which is the chevron cut
   in the M of the monogram. It is the step numerals, the top of every service
   card, the rule over each FAQ answer and the edge of the pull quote. One
   shape, everywhere, so it reads as a mark and not as a border. An arrow is
   also the only thing a hauling business's geometry could honestly be. */
.arrow{
  position:absolute; left:0; right:0; top:0; height:5px; background:var(--yellow);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);
}

/* ── the divider, in their own two colours ───────────────────────────────── */
.tape{
  height:10px; opacity:.96;
  background:repeating-linear-gradient(135deg,var(--ink) 0 17px,var(--yellow) 17px 34px);
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--disp); font-weight:700; font-size:1.16rem; line-height:1;
  letter-spacing:.012em; padding:15px clamp(19px,2.2vw,26px);
  border:0; border-radius:var(--radius); cursor:pointer; font-variant-numeric:tabular-nums;
}
.btn--lg{ font-size:clamp(1.2rem,1rem + .62vw,1.5rem); padding:17px clamp(20px,2.4vw,28px) }
.btn--block{ display:flex; width:100% }
.cta{ background:var(--yellow); color:var(--ink) }
.cta:hover{ background:var(--ink); color:var(--yellow) }
.sec--paper .cta:hover,.sec--stone .cta:hover,.formwrap .cta:hover{ background:var(--dark); color:var(--yellow) }
.ghost{ border:1.5px solid rgba(243,242,238,.4); color:var(--fg); background:transparent }
.ghost--tint{ background:rgba(18,18,16,.45); border-color:rgba(243,242,238,.5) }
.ghost--solid{ background:var(--panel-3); border-color:rgba(243,242,238,.42) }
.ghost:hover{ background:var(--fg); color:var(--dark); border-color:var(--fg) }
.lnk{
  display:inline-block; color:var(--amber-ink); border-bottom:2px solid rgba(138,100,0,.34);
  font-family:var(--disp); font-weight:700; font-size:1.06rem; letter-spacing:.01em;
}
.lnk:hover{ color:var(--dark); border-color:var(--dark) }
.ft-a{ color:var(--fg-3) }
.ft-a:hover{ color:var(--yellow) }
.tel-big{ color:#fff }
.tel-big:hover{ color:var(--yellow) }
.by-lnk{
  font-family:var(--body); text-transform:uppercase; font-size:.72rem; font-weight:500;
  letter-spacing:.07em; color:var(--fg-3); text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px; text-decoration-color:rgba(155,153,143,.5);
}
.by-lnk:hover{ color:var(--yellow); text-decoration-color:var(--yellow) }

/* ── header ──────────────────────────────────────────────────────────────── */
/* The bar is driven by the scroll rather than switched by it. `--p` is how far
   through the collapse we are, 0 at the top of the page and 1 once it is fully
   compact, written once per frame by main.js. The ground, the shadow, the
   scrim, the bar height and the lockup all read off that one number, so they
   move together and land together.

   There is deliberately no transition on any of them: the value already
   changes every frame in step with the scroll, and a transition on top of it
   would chase and arrive late. It also removes the old problem at a threshold,
   where scrolling slowly across the line flipped the bar back and forth. */
.hdr{
  --p:0;
  --hud-tall:clamp(88px,10.5vh,112px);
  --hud-short:66px;
  --mark-tall:clamp(40px,4.4vw,56px);
  --mark-short:36px;
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(26,26,23,var(--p));
  box-shadow:0 6px 26px rgba(8,8,7,calc(.5 * var(--p)));
}
/* An open menu is solid whatever the scroll is doing. */
.hdr.is-open{ background:var(--panel) }
.hdr__scrim{
  position:absolute; top:0; left:0; right:0; bottom:-64px; pointer-events:none;
  opacity:calc(1 - var(--p));
  background:linear-gradient(180deg,rgba(10,10,9,.88),rgba(10,10,9,.44) 52%,rgba(10,10,9,0));
}
.hdr.is-open .hdr__scrim{ opacity:0 }
.hdr__in{ position:relative; padding-inline:var(--gut) }
.hdr__row{
  max-width:1300px; margin-inline:auto; display:flex; align-items:center;
  gap:clamp(14px,2.4vw,32px); padding:12px 0;
  min-height:calc(var(--hud-tall) + (var(--hud-short) - var(--hud-tall)) * var(--p));
}
/* flex:0 1 auto, not flex:none. A flex item that cannot shrink pushes whatever
   is beside it out of the box instead, and on a 360px Android that was the
   menu button: the lockup plus the wordmark plus the Call button came to more
   than the bar had, and the burger went off the right edge where nothing could
   reach it. The lockup gives way instead, and clips. */
.hdr__mark{ display:flex; align-items:center; gap:13px; flex:0 1 auto; min-width:0; overflow:hidden }
.hdr__burger,.hdr__tel,.hdr__menu{ flex:none }
/* The monogram, sized by height and set bare on the surface: no box, no tile,
   no radius. The full lockup is not up here on purpose — at 44px tall the
   wordmark inside it would be six pixels of mush, and it gets its own moment
   over the second media band instead. */
.hdr__mark img{
  width:auto;
  height:calc(var(--mark-tall) + (var(--mark-short) - var(--mark-tall)) * var(--p));
}
/* A shadow up here, not a glow. The glow is for the full lockup, which is
   mostly black line on transparency and disappears without it. The header
   carries the BM monogram instead: a white B and a yellow M, two flat shapes
   with nothing inside them, which already read at any size on this ground.
   Blooming white off them only lit up the gaps between the letters and left a
   grey smudge where a mark should be. What the monogram does need is
   separation from the hero photograph it floats over for the first screen,
   and that is a soft dark shadow. */
.hdr__mark img{ filter:drop-shadow(0 2px 9px rgba(8,8,7,.75)) }
.hdr__wm{
  white-space:nowrap;
  font-family:var(--disp); font-weight:800; font-size:clamp(1.3rem,1vw + 1.05rem,1.62rem);
  line-height:1; letter-spacing:.005em; text-transform:uppercase; color:var(--fg);
}
.hdr__wm b{
  display:block; margin-top:3px; font-family:var(--body); font-weight:600;
  font-size:.42em; letter-spacing:.13em; color:var(--yellow);
}
.hdr__nav{ margin-left:auto; display:flex; flex-wrap:nowrap; white-space:nowrap; gap:clamp(13px,1.7vw,27px) }
.nav-a{ font-family:var(--disp); font-weight:600; font-size:1.1rem; letter-spacing:.015em; color:rgba(255,255,255,.88) }
.nav-a:hover{ color:var(--yellow) }
.hdr__tel{ flex:none; padding:11px 18px; font-size:1.06rem }
.hdr__burger{ display:none }
.hdr__menu{
  display:grid; justify-items:center; align-content:center; gap:4px; width:46px; height:46px;
  flex:none; padding:0; border:1.5px solid rgba(243,242,238,.42); border-radius:var(--radius);
  background:rgba(18,18,16,.4); cursor:pointer;
}
.hdr__menu:hover{ border-color:var(--yellow) }
.hdr__bar{ display:block; width:20px; height:2px; background:var(--fg); transition:transform .3s var(--e-out),opacity .2s ease }
.hdr.is-open .hdr__bar--a{ transform:translateY(6px) rotate(45deg) }
.hdr.is-open .hdr__bar--m{ opacity:0 }
.hdr.is-open .hdr__bar--b{ transform:translateY(-6px) rotate(-45deg) }
.hdr__panel{
  display:none; position:relative; background:var(--panel); border-top:1px solid var(--edge);
  box-shadow:0 22px 44px rgba(8,8,7,.6); padding:4px var(--gut) 20px;
  max-height:calc(100svh - 62px); overflow-y:auto;
}
.hdr.is-open .hdr__panel{ display:block }
.menu-a{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px;
  border-bottom:1px solid rgba(243,242,238,.1); font-family:var(--disp); font-weight:600;
  font-size:1.26rem; color:var(--fg);
}
.menu-a:last-of-type{ border-bottom:0 }
.menu-a:hover{ color:var(--yellow) }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative; background:var(--ink); isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; flex-direction:column;
}
.hero__pic,.hero__pic img{ position:absolute; inset:0; width:100%; height:100% }
.hero__pic img{ object-fit:cover; object-position:50% 46% }
/* Five stops that dip through the middle so the photograph still reads, in the
   deep token rather than black, resolving into the colour of the tape beneath
   it so there is no seam. A second sideways gradient carries the headline. */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,9,.9) 0%,rgba(10,10,9,.42) 22%,rgba(10,10,9,.34) 44%,rgba(10,10,9,.78) 78%,rgba(10,10,9,.97) 100%);
}
.hero__scrim--x{ background:linear-gradient(90deg,rgba(10,10,9,.86) 0%,rgba(10,10,9,.48) 46%,rgba(10,10,9,.02) 84%) }
.hero__in{ position:relative; padding-inline:var(--gut); flex:1; display:flex; flex-direction:column }
.hero__grid{
  max-width:1300px; margin-inline:auto; width:100%; flex:1;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:clamp(34px,4vw,72px); align-items:end; align-content:center;
  padding:clamp(104px,19vh,232px) 0 clamp(40px,6vh,72px);
}
.hero__eyebrow{
  margin:0 0 clamp(14px,2vh,20px); display:inline-flex; align-items:center; gap:9px;
  font-family:var(--disp); font-weight:700; font-size:.92rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--yellow);
}
.hero h1{
  margin:0 0 clamp(18px,2.4vh,26px); max-width:14ch;
  font-size:clamp(2.9rem,1rem + 6vw,5.4rem); line-height:.93; letter-spacing:-.014em;
  color:rgba(243,242,238,.8); text-wrap:balance; text-shadow:0 2px 30px rgba(10,10,9,.55);
}
.hero h1 em{ color:var(--yellow); font-style:italic }
.hero__lede{
  margin:0 0 clamp(26px,4vh,42px); max-width:46ch;
  font-size:clamp(1rem,.94rem + .3vw,1.12rem); line-height:1.56;
  color:rgba(255,255,255,.9); text-shadow:0 1px 3px rgba(10,10,9,.75);
}
.hero__now{ margin:0 0 10px; font-size:1rem; color:var(--fg-2); text-shadow:0 1px 3px rgba(10,10,9,.8) }
.hero__ghost{ display:none; align-items:center; justify-content:center; gap:10px; margin-top:11px; max-width:340px; height:56px }
/* Four short unpunctuated proofs on one line. No icons, no boxes. */
.hero__trust{
  margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 10px; font-size:.9rem; color:rgba(255,255,255,.86); text-shadow:0 1px 3px rgba(10,10,9,.85);
}
.hero__trust li + li::before{
  content:''; display:inline-block; width:4px; height:4px; background:var(--yellow);
  vertical-align:.18em; margin-right:10px;
}
.hero__card{
  background:#fff; border-radius:var(--radius); box-shadow:0 22px 50px rgba(8,8,7,.55);
  overflow:hidden; max-width:468px; width:100%; justify-self:end; padding:20px 22px 22px;
}
.hero__card h2{ margin:0 0 3px; font-size:1.44rem; line-height:1.1; color:var(--dark) }
.hero__card > p{ margin:0 0 15px; font-size:.86rem; color:var(--dark-3) }

/* ── trust bar, under its apex ───────────────────────────────────────────── */
.trust{ position:relative; background:var(--panel-2); padding:clamp(26px,3vw,34px) var(--gut) }
.trust__apex{
  position:absolute; left:50%; top:0; transform:translate(-50%,-100%);
  width:clamp(112px,11vw,150px); height:clamp(30px,3.2vw,42px);
  background:var(--panel-2); clip-path:polygon(50% 0,100% 100%,0 100%);
}
.trust__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(226px,100%),1fr)); gap:clamp(20px,2.6vw,36px) }
.trust__i{ display:flex; gap:12px; align-items:flex-start }
.trust__i svg{ margin-top:3px; flex:none; color:var(--yellow) }
.trust__i h3{ font-size:1.2rem; line-height:1.16; color:var(--fg) }
.trust__i p{ margin:2px 0 0; font-size:.85rem; color:var(--fg-3); line-height:1.45 }

/* ── marquee ─────────────────────────────────────────────────────────────── */
.mq{ background:var(--yellow); color:var(--ink); overflow:hidden; padding:11px 0 }
.mq__in{ display:flex; align-items:center; width:max-content; animation:bm-mq 50s linear infinite }
.mq span{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-family:var(--disp);
  font-weight:800; font-size:1.02rem; letter-spacing:.14em; text-transform:uppercase;
}
.mq i{ display:block; width:6px; height:6px; margin:0 clamp(20px,3vw,40px); flex:none; background:rgba(18,18,16,.5) }
@keyframes bm-mq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .mq__in{ animation:none } }

/* ── services ────────────────────────────────────────────────────────────── */
/* Photographs now, one of that actual service, cut out of the reel it was
   filmed on. They replaced a set of his own ballpoint drawings, which were
   standing in because the profile grid only serves cover frames and every
   cover on this account is him talking to camera. The drawings were good, but
   a drawing of a couch is a placeholder and a photograph of the couch he
   carried out last week is proof. The drawings are kept in content/marks/.

   There is no yard debris card: nine reels and not one frame of brush. It is
   named in the "and more" card instead, and gets a card back the day there is
   a photograph for it. */
.svcs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr)); gap:clamp(10px,1.4vw,18px) }
/* Six tiles, so the count is fixed to three across rather than left to
   auto-fit. At four columns the last row ran 4 + 2 and left two holes in it. */
@media (min-width:920px){ .svcs{ grid-template-columns:repeat(3,1fr) } }
.svc{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:var(--panel-2); margin:0; display:block;
}
.svc > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out) }
.svc:hover > img{ transform:scale(1.04) }
.svc__grad{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(10,10,9,.96) 4%,rgba(10,10,9,.74) 42%,rgba(10,10,9,.16) 74%,rgba(10,10,9,.02) 100%);
}
.svc__t{ position:absolute; left:0; right:0; bottom:0; padding:clamp(13px,1.5vw,20px) clamp(13px,1.5vw,20px) clamp(18px,1.9vw,25px); color:#fff }
.svc__t h3{ margin:0 0 5px; font-size:clamp(1.22rem,.95rem + .7vw,1.56rem); line-height:1.08 }
.svc__d{ margin:0; font-size:.88rem; line-height:1.5; color:rgba(255,255,255,.86) }
.svc__d b{ color:var(--yellow); font-weight:600 }
/* The arrow rule travels the full width of the tile and lands on its own
   point. Width animates, so the geometry never changes shape mid-transition
   and the point stays a point. The tile itself does not move. */
.svc .arrow{ top:auto; bottom:0; right:auto; width:0; transition:width .52s var(--e-out) }
.svc:hover .arrow,.svc:focus-within .arrow{ width:100% }
/* The sixth tile carries the mark and a label instead of a photograph, so it
   reads as the way out of the grid rather than as a picture that failed. */
.svc--more{ display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--edge) }
.svc--more .svc__grad{ background:linear-gradient(0deg,rgba(10,10,9,.92) 0%,rgba(10,10,9,.3) 48%,rgba(10,10,9,0) 72%) }
.svc--more > svg{ position:relative; z-index:1; color:var(--yellow); transition:color .28s var(--e-out) }
.svc--more:hover{ background:var(--panel-3) }

/* Below the three-column layout it stops being a tile and becomes a line.
   A 3:4 box with nothing in it but an icon is the least interesting thing on
   the page, and on a phone every tile is full width, so it arrives as a tall
   empty panel between the last service and the flyer. It earns none of that:
   it is a footnote to the grid, not a sixth service. So it spans the row,
   drops the box, the gradient, the icon and the rule, and sets as one run of
   text under a hairline. On three columns it goes back to being the tile that
   squares the row. */
@media (max-width:899px){
  .svc--more{
    grid-column:1 / -1; display:block; aspect-ratio:auto; overflow:visible;
    background:none; border:0; border-top:1px solid var(--edge); border-radius:0;
    padding:clamp(15px,3.4vw,20px) 0 0;
  }
  .svc--more:hover{ background:none }
  .svc--more .svc__grad,
  .svc--more > svg,
  .svc--more .arrow{ display:none }
  .svc--more .svc__t{ position:static; padding:0 }
  .svc--more .svc__t h3{
    display:inline; margin:0; font-size:1.04rem; line-height:1.55;
    letter-spacing:.01em; color:var(--yellow);
  }
  .svc--more .svc__d{
    display:inline; font-size:.95rem; line-height:1.55; color:var(--fg-3);
  }
  .svc--more .svc__d::before{ content:' ' }
  .svc--more:hover .svc__d{ color:var(--fg-2) }
}

/* ── media band ──────────────────────────────────────────────────────────── */
/* Tall enough to read. These are vertical phone frames cropped to a band, so a
   short wide band shows a letterbox slot through the middle and whatever is in
   it is unreadable. Height is what makes the photograph legible.

   The line sits low and left, on the page measure, rather than dead centre.
   Centred it lands exactly where a top-to-bottom scrim is at its lightest.
   Low and left it lands where both scrims are heaviest, and it lines up with
   every other heading on the page. */
.vband{ position:relative; background:var(--ink); overflow:hidden; min-height:clamp(420px,72vh,760px); display:grid; align-content:end }
.vband__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45% }
.vband::before,.vband::after{ content:''; position:absolute; inset:0; pointer-events:none }
.vband::before{
  background:linear-gradient(180deg,rgba(10,10,9,.54) 0%,rgba(10,10,9,.16) 26%,rgba(10,10,9,.32) 54%,rgba(10,10,9,.84) 84%,rgba(10,10,9,.96) 100%);
}
.vband::after{
  background:linear-gradient(90deg,rgba(10,10,9,.82) 0%,rgba(10,10,9,.42) 42%,rgba(10,10,9,.02) 78%);
}
.vband__t{
  position:relative; z-index:1; width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--gut) clamp(30px,4.4vw,58px); text-align:left;
  font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.008em;
  font-size:clamp(2rem,1rem + 3.8vw,3.6rem); line-height:1; color:#fff;
  text-shadow:0 2px 26px rgba(10,10,9,.72);
}

/* The lockup band. This one centres, because the subject of the band IS the
   mark rather than the photograph, and the sideways scrim is turned off under
   it so the light spreads evenly either side. */
.vband--mark{ align-content:center; min-height:clamp(440px,76vh,780px) }
.vband--mark::after{ background:radial-gradient(64% 64% at 50% 48%,rgba(10,10,9,.62),rgba(10,10,9,.92)) }
.vband__lock{ position:relative; z-index:1; display:grid; justify-items:center; gap:clamp(18px,2.4vw,30px); padding:clamp(40px,6vw,72px) var(--gut) }
.vband__lock img{ width:min(80vw,clamp(280px,40vw,520px)); height:auto }
.vband__lock p{
  margin:0; font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:clamp(1.1rem,.9rem + 1vw,1.7rem); letter-spacing:.13em; color:var(--yellow);
  text-shadow:0 2px 22px rgba(10,10,9,.8);
}

/* ── the steps ───────────────────────────────────────────────────────────── */
.steps{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:clamp(22px,2.8vw,38px) }
.step{ position:relative; padding-top:18px }
.step .arrow{ background:var(--amber-ink) }
.steps .step__n{
  margin:0 0 7px; font-family:var(--disp); font-weight:800; font-style:italic;
  font-size:clamp(2.3rem,1.5rem + 1.6vw,3.1rem); line-height:1; letter-spacing:.02em;
  color:rgba(26,26,23,.18);
}
.step h3{ margin:0 0 6px; font-size:1.4rem; line-height:1.1 }
.step p{ margin:0; font-size:.94rem; line-height:1.56; color:var(--dark-3) }

/* ── who shows up ────────────────────────────────────────────────────────── */
/* The columns stretch to a shared height, so the picture runs the full depth
   of the text instead of leaving a void under itself. */
.who{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:clamp(30px,4vw,72px); align-items:stretch }
.who__pic{ margin:0; position:relative; border-radius:var(--radius); overflow:hidden; max-width:460px; min-height:min(74vw,500px) }
.who__pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42% }
.who__pic figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:52px 22px 20px; color:#fff;
  background:linear-gradient(0deg,rgba(10,10,9,.94),rgba(10,10,9,0));
  font-family:var(--disp); font-weight:700; font-size:1.2rem; line-height:1.18;
}
.who__pic figcaption b{
  display:block; font-family:var(--body); font-weight:600; font-size:.68rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:5px;
}
.who h2{ margin:0 0 15px; color:var(--fg-3) }
.who h2 em{ color:var(--yellow); font-style:italic }
.who__body > p{ margin:0 0 13px; color:var(--fg-2); max-width:56ch; font-size:1.02rem }

/* Facts as a <dl>, hairline rules, never a grid of tinted icon boxes. */
.facts{ margin:clamp(20px,2.8vw,28px) 0 0; display:grid; border-bottom:1px solid var(--edge) }
.facts > div{ display:grid; grid-template-columns:minmax(0,104px) minmax(0,1fr); gap:6px 20px; padding:13px 0; border-top:1px solid var(--edge) }
.facts dt{ font-family:var(--disp); font-weight:700; font-size:1.08rem; color:var(--yellow) }
.facts dd{ margin:0; font-size:.96rem; color:var(--fg) }
.facts dd a{ border-bottom:1px solid var(--edge) }
.facts dd a:hover{ color:var(--yellow) }

/* ── service area ────────────────────────────────────────────────────────── */
.area{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:clamp(30px,4vw,64px); align-items:center }
.area h2{ margin:0 0 15px }
/* The three the account names, set in the display italic. There is no town
   list under them on purpose: the account says "MD • DC • VA" and nothing
   finer, and a list of invented suburbs is exactly the kind of filler this
   page is built to not have. */
.towns--big{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px clamp(16px,2.2vw,30px);
  border-top:1px solid var(--edge-lt); border-bottom:1px solid var(--edge-lt);
  padding:clamp(18px,2.2vw,26px) 0; margin:0; list-style:none;
}
.town{
  font-family:var(--disp); font-weight:800; font-style:italic; color:var(--dark);
  font-size:clamp(1.7rem,.95rem + 1.8vw,2.7rem); line-height:1.24; letter-spacing:.012em;
  text-transform:uppercase;
}
.town:hover{ color:var(--amber-ink) }
.town i{ font-style:normal; color:var(--yellow-deep) }
.area__note{ margin:15px 0 0; font-size:.95rem; color:var(--dark-3); max-width:50ch }
.area__act{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:clamp(20px,2.4vw,28px) }
.map{ margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--edge-lt); background:var(--panel) }
.map iframe{ display:block; width:100%; aspect-ratio:4/3; min-height:330px; border:0; filter:saturate(.84) contrast(1.04) }
.map figcaption{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:13px 16px; border-top:1px solid var(--edge); color:var(--fg-3) }
.map figcaption b{ display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:1rem; color:var(--fg) }
.map figcaption b svg{ color:var(--yellow) }
.map figcaption span{ font-size:.86rem }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:clamp(24px,3vw,42px) clamp(30px,4vw,64px) }
.qa{ position:relative; padding-top:18px }
.qa .arrow{ background:var(--amber-ink) }
.qa h3{ margin:0 0 7px; font-size:1.32rem; line-height:1.12 }
.qa p{ margin:0; font-size:.96rem; line-height:1.6; color:var(--dark-3) }
.qa p .lnk{ font-size:.96rem }

/* ── the work grid ───────────────────────────────────────────────────────── */
/* Nine frames out of his own reels, at 3:4 whatever shape they arrived in, so
   the grid is a grid rather than a mosaic. Each caption sits on its own scrim
   at the foot of the tile: these are phone frames and several of them are
   busy, so a caption over bare photograph would not hold. */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(206px,46%),1fr)); gap:clamp(10px,1.2vw,16px) }
.shot{ position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--panel-2); display:block }
.shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out) }
/* The photograph inside may scale; the tile does not move. */
.shot:hover img{ transform:scale(1.04) }
.shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(10,10,9,.93) 0%,rgba(10,10,9,.5) 36%,rgba(10,10,9,0) 62%);
}
.shot__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:13px 14px 12px;
  font-family:var(--disp); font-weight:700; font-size:1.06rem; line-height:1.14; color:#fff;
}
/* A travelling arrow rule along the foot of the tile, the same shape as the
   service cards, so the grid belongs to the same page. */
.shot::before{
  content:''; position:absolute; left:0; bottom:0; z-index:2; height:4px; width:0;
  background:var(--yellow); pointer-events:none;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);
  transition:width .5s var(--e-out);
}
.shot:hover::before,.shot:focus-visible::before{ width:100% }
/* The tenth tile carries the mark and a label instead of a photograph, so it
   reads as the way out of the grid rather than as a picture that failed. */
.shot--more{ display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--edge) }
.shot--more::after{ background:linear-gradient(0deg,rgba(10,10,9,.9) 0%,rgba(10,10,9,.3) 46%,rgba(10,10,9,0) 70%) }
.shot--more svg{ position:relative; z-index:1; color:var(--yellow); transition:color .28s var(--e-out) }
.shot--more:hover{ background:var(--panel-3) }
.shot--more .shot__cap b{
  display:block; margin-top:2px; font-family:var(--body); font-weight:500; font-size:.78rem;
  letter-spacing:.01em; color:rgba(255,255,255,.74);
}

/* ── the booking band ────────────────────────────────────────────────────── */
.book{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); gap:clamp(16px,2vw,26px); align-items:start }
.formwrap{ background:#fff; border-radius:var(--radius); padding:clamp(22px,2.6vw,34px); border:1px solid var(--edge-lt) }
.form{ display:grid; gap:13px }
.form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:13px }
.fld{ display:grid; gap:5px }
.fld > span{ font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dark-2) }
/* 16px flat, never a rem below it: anything under 16px makes iOS zoom on focus */
.fld input,.fld select,.fld textarea{
  font:inherit; font-size:16px; color:var(--dark); background:#fff;
  border:1px solid rgba(26,26,23,.22); border-radius:var(--radius); padding:12px 13px; width:100%;
}
/* appearance:none takes the native arrow off along with the native styling, so
   the mark has to be drawn back on: without it the control is a text input as
   far as the eye is concerned. Same chevron as the icon set, at the same
   weight, as a data URI so it costs no request. */
.fld select{
  padding-right:40px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1.4 1.4L6.5 6.5l5.1-5.1' fill='none' stroke='%231A1A17' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.fld select:focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1.4 1.4L6.5 6.5l5.1-5.1' fill='none' stroke='%238A6400' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.fld textarea{ resize:vertical }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--yellow-deep); box-shadow:0 0 0 3px rgba(252,193,0,.3); outline:none }
.fld.is-bad input{ border-color:#c0392b }
.fine{ margin:0; font-size:.82rem; line-height:1.55; color:var(--dark-3) }
.fine a{ color:var(--amber-ink); font-weight:600 }
.thanks{ display:grid; gap:9px; justify-items:start }
.thanks__c{ display:grid; place-items:center; width:44px; height:44px; border-radius:99px; background:var(--yellow); color:var(--ink) }
.thanks h3{ font-size:1.6rem }
.thanks p{ margin:0; color:var(--dark-3); font-size:.96rem }
.thanks p a{ color:var(--amber-ink); font-weight:600 }
.thanks button{ background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--amber-ink); text-decoration:underline; text-underline-offset:4px; cursor:pointer }

.aside{ background:var(--panel-2); color:var(--fg); border-radius:var(--radius); padding:clamp(22px,2.6vw,34px); position:relative; overflow:hidden }
.aside__mascot{ position:absolute; right:-52px; top:-24px; width:290px; height:auto; opacity:.11; pointer-events:none }
.aside > *{ position:relative }
.aside__live{
  margin:0 0 4px; display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:700;
  font-size:.88rem; letter-spacing:.15em; text-transform:uppercase; color:var(--yellow);
}
.aside__live i{ width:7px; height:7px; border-radius:99px; background:#5aa46a }
.aside__tel{
  display:inline-block; margin:7px 0 4px; font-family:var(--disp); font-weight:800;
  font-variant-numeric:tabular-nums; font-size:clamp(2rem,1.2rem + 2.2vw,3rem);
  line-height:1.04; letter-spacing:.005em;
}
.aside__note{ margin:0 0 19px; font-size:.9rem; color:var(--fg-3) }
.aside__acts{ display:grid; gap:9px; margin-bottom:21px }
.aside .facts{ margin:0 }
.aside .facts > div{ grid-template-columns:minmax(0,88px) minmax(0,1fr); padding:11px 0; font-size:.9rem }
.aside .facts dd{ color:var(--fg-3); font-size:.9rem }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{ background:var(--panel); color:var(--fg-3); padding:clamp(50px,5.4vw,76px) 0 0; overflow:hidden }
.foot__in{ padding-inline:var(--gut) }
.foot__cols{ max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:clamp(26px,3vw,48px) }
.foot__cols h2{ font-size:.82rem; letter-spacing:.17em; text-transform:uppercase; color:var(--yellow); margin:0 0 13px; line-height:1.4 }
.foot__cols a{ display:block; margin:0 0 8px; font-size:.88rem }
.foot__brand img{ width:min(100%,176px); height:auto; margin-bottom:17px }
.foot__tag{ margin:0 0 10px; font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase; font-size:1.2rem; line-height:1.18; color:var(--fg); letter-spacing:.03em }
.foot__brand p:last-child{ margin:0; font-size:.88rem; line-height:1.55; max-width:32ch }
.foot__nap p{ margin:0 0 8px; font-size:.88rem; line-height:1.5 }
.foot__nap a{ display:block }
.foot__legal{
  max-width:var(--max); margin:clamp(30px,3.4vw,44px) auto 0; display:flex; flex-wrap:wrap;
  gap:8px 26px; justify-content:space-between; padding:17px 0; border-top:1px solid var(--edge); font-size:.79rem;
}
.foot__legal p{ margin:0 }

/* The closing move. The name at the full measure, clipped by the bottom of the
   page so it is cut by the floor it stands on. BINMOVERS is one short word, so
   the tracking is solved in JS (see main.js §8) and landed on the right gutter
   exactly; the clamp here is what a browser with no script gets, and it has to
   be a sensible uncropped wordmark on its own. Alpha stays between .07 and .09
   or it stops being a watermark and starts competing with the footer links. */
.foot__sig{ width:min(100% - var(--gut) * 2,1420px); margin:.5rem auto 0; line-height:.92; overflow:hidden }
.foot__sig span{
  display:block; text-align:center; white-space:nowrap; font-family:var(--disp);
  font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:calc(min(100vw - var(--gut) * 2,1420px) / 4.55);
  letter-spacing:.06em; color:rgba(243,242,238,.085); transform:translateY(.06em);
}
/* Once the tracking is measured the text is left-aligned, because the solved
   value puts the last glyph on the right gutter and a trailing letter-space
   would otherwise pull the whole run left by that much. */
.js .foot__sig span[style]{ text-align:left }

/* ── the sticky mobile call bar ──────────────────────────────────────────── */
.callbar,.callbar__pad{ display:none }

/* ── the quote dialog ────────────────────────────────────────────────────── */
/* A real <dialog>, so the focus trap, the Escape key, the inert background and
   the return of focus to whatever opened it are the browser's job rather than
   another two hundred lines here. Where <dialog> is missing the links are left
   alone and scroll to the booking band, which carries the same form. */
.bookdlg{
  width:min(560px,calc(100vw - 2rem));
  max-height:min(88svh,900px);
  padding:0; border:0; border-radius:var(--radius);
  background:var(--paper); color:var(--dark);
  box-shadow:0 30px 80px rgba(8,8,7,.66);
}
.bookdlg::backdrop{ background:rgba(8,8,7,.78) }
/* The scroll lock, as a selector rather than as state. Setting overflow on
   open and clearing it on close means trusting the `close` event to arrive for
   every way a dialog can be dismissed, and a lock left behind by an event that
   never fired is a page that can no longer be scrolled at all. This stops
   matching the instant the dialog closes, whichever way it closed. */
body:has(.bookdlg[open]){ overflow:hidden }
.bookdlg__in{ position:relative; padding:clamp(24px,4vw,36px) }
.bookdlg h2{ margin:0 0 10px; padding-right:46px; font-size:clamp(1.8rem,1.2rem + 1.7vw,2.4rem); line-height:1.02 }
.bookdlg__lede{ margin:0 0 clamp(18px,2.4vw,24px); font-size:.97rem; line-height:1.6; color:var(--dark-3) }
.bookdlg__tel{ margin:15px 0 0; font-size:.93rem; color:var(--dark-3) }
.bookdlg__close{
  position:absolute; top:clamp(12px,1.6vw,18px); right:clamp(12px,1.6vw,18px); z-index:1;
  display:grid; place-items:center; width:40px; height:40px; padding:0; cursor:pointer;
  border:1px solid var(--edge-lt); border-radius:var(--radius);
  background:transparent; color:var(--dark-2);
}
.bookdlg__close:hover{ background:var(--dark); border-color:var(--dark); color:var(--yellow) }
@keyframes bm-dlg{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.bookdlg[open]{ animation:bm-dlg .3s var(--e-out) }

/* ── the lightbox, for the work gallery ──────────────────────────────────── */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(8,8,7,.96); display:grid; place-items:center; padding:clamp(16px,4vw,48px) }
.lb__fig{ margin:0; max-width:min(900px,100%); display:grid; gap:12px; justify-items:center }
.lb__fig img{ max-height:80svh; width:auto; border-radius:var(--radius) }
.lb__fig figcaption{ font-family:var(--disp); font-weight:700; font-size:1.1rem; color:var(--fg); text-align:center }
.lb button{
  position:absolute; display:grid; place-items:center; cursor:pointer; line-height:1;
  background:rgba(18,18,16,.65); border:1.5px solid rgba(243,242,238,.32);
  color:var(--fg); border-radius:var(--radius);
}
.lb button:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--ink) }
.lb__close{ top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px); width:46px; height:46px }
.lb__nav{ top:50%; transform:translateY(-50%); width:46px; height:64px; font-size:2rem }
.lb__nav--prev{ left:clamp(8px,2vw,22px) }
.lb__nav--next{ right:clamp(8px,2vw,22px) }

/* ── entrance ────────────────────────────────────────────────────────────── */
/* Content is visible by default. Nothing starts at opacity 0. The entrance is
   a 16px translate that JS arms and then releases, with a failsafe, so a
   stranded block is fully readable rather than invisible. */
.js .rv{ transform:translateY(16px); transition:transform .7s var(--e-out) }
.js .rv.in{ transform:none }
@media (prefers-reduced-motion:reduce){ .js .rv{ transform:none } }

/* ── narrow ──────────────────────────────────────────────────────────────── */
@media (max-width:1060px){
  .hdr{ --hud-tall:84px; --hud-short:64px; --mark-tall:38px; --mark-short:32px }
  /* With no JS the menu cannot open, so the links stay out in the bar instead */
  .js .hdr__nav,.js .hdr__tel{ display:none !important }
  .js .hdr__burger{ margin-left:auto; display:flex; align-items:center; gap:9px; flex:none }
  .hdr__nav{ flex-wrap:wrap; white-space:normal; justify-content:flex-end }
  .hero__card{ display:none }
  .hero__ghost{ display:flex }

  /* The extra band height is a desktop fix. On a phone the band is already
     narrow enough that the frame reads, and at 72vh it would eat the screen. */
  .vband{ min-height:clamp(300px,48vh,470px) }
  .vband--mark{ min-height:clamp(340px,56vh,540px) }

  .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--ink);
    border-top:1px solid var(--edge); padding:10px 10px calc(16px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:2fr 3fr; gap:8px; box-shadow:0 -8px 24px rgba(8,8,7,.5);
    transition:transform .42s var(--e-out),opacity .28s ease,visibility 0s linear .42s;
  }
  /* The band the bar lands on, so it never crops the footer wordmark. */
  .callbar__pad{ display:block; height:calc(82px + env(safe-area-inset-bottom)); background:var(--ink) }
  /* Visibility, not just opacity: an offstage bar must leave the tab order. */
  .js .callbar{ transform:translateY(115%); opacity:0; pointer-events:none; visibility:hidden }
  .js .callbar.is-here{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition:transform .42s var(--e-out),opacity .28s ease,visibility 0s }
  .callbar .btn{ font-size:1.06rem; padding:14px 10px }
}
@media (max-width:640px){
  /* The trust strip wraps to two lines on a phone, and a separator drawn with
     `li + li::before` then starts the second one with a floating dot. The dots
     come off entirely below this width and the gap does the separating, which
     is what the four proofs were meant to be anyway: spaced text, no marks. */
  .hero__trust{ gap:5px 19px }
  .hero__trust li + li::before{ display:none }

  .lb__fig img{ max-height:72svh }
  .lb__nav{ width:40px; height:54px }
}
/* Under 430px the bar is the tightest thing on the page: badge, name, tagline,
   Call and a burger, in the width of a phone. The tagline is the first to go,
   because it is the only one of the five that is decoration. It is still on
   the lockup in the footer and on the mark itself. */
@media (max-width:430px){
  .hdr{ --mark-tall:34px; --mark-short:30px }
  .hdr__wm{ font-size:1.14rem }
  .hdr__wm b{ display:none }
  .hdr__mark{ gap:10px }
  .hdr__burger .btn{ padding:12px 14px; font-size:1.02rem; gap:7px }
}
@media (max-width:360px){
  .hdr{ --mark-tall:30px; --mark-short:27px }
  .hdr__wm{ font-size:1.02rem }
  .hdr__mark{ gap:8px }
  .hdr__burger{ gap:7px !important }
  .hdr__burger .btn{ padding:12px 11px; font-size:.96rem }
  .hdr__menu{ width:42px; height:42px }
}