/* Last Call Bar Services. Black and white, sharp edges, nothing rounded.
   One heavy condensed sans for impact, one serif italic accent word per
   heading (it echoes the serif in their logo), hairlines instead of boxes. */

:root {
  --black: #0a0a0a;
  --ink: #111111;
  --white: #ffffff;
  --off: #f3f3f0;
  --line-dark: rgba(255, 255, 255, .16);
  --line-light: rgba(10, 10, 10, .14);
  --mute-dark: rgba(255, 255, 255, .62);
  --mute-light: rgba(10, 10, 10, .62);
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1440px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  font-stretch: 100%; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--white); color: var(--black); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--pad); top: -100px; z-index: 200; background: var(--white); color: var(--black); padding: .75rem 1rem; font-weight: 600; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  font-stretch: 110%;
}
.eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .55; }
.display {
  font-stretch: 76%; font-weight: 800; text-transform: uppercase;
  line-height: .93; letter-spacing: -.005em;
}
.h2 {
  font-stretch: 84%; font-weight: 700; line-height: 1.02; letter-spacing: -.015em;
  font-size: clamp(2.3rem, 5.4vw, 4.75rem); text-wrap: balance;
}
.h2 em, .display em, .accent {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-stretch: 100%; text-transform: none; letter-spacing: 0;
}
.lede { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.5; max-width: 34em; }

/* ---------- buttons: fill wipe on hover, press on click ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .85rem;
  min-height: 3.4rem; padding: 0 1.7rem;
  border: 1px solid currentColor; background: transparent; color: var(--white);
  font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-stretch: 108%;
  transition: color .45s var(--ease), transform .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--white); transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; transition: transform .45s var(--ease); }
.btn:focus-visible { color: var(--black); }
.btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: scale(.975); color: var(--black); }
.btn:active::before { transform: translateY(0); transition-duration: .18s; }
.btn--solid { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--solid::before { background: var(--black); }
.btn--solid:focus-visible, .btn--solid:active { color: var(--white); }
.btn--dark { color: var(--black); }
.btn--dark::before { background: var(--black); }
.btn--dark:focus-visible, .btn--dark:active { color: var(--white); }
.btn > span, .btn > svg, .btn > i { position: relative; z-index: 1; }
.btn .rip {
  position: absolute; z-index: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: currentColor; opacity: .28;
  transform: scale(0); animation: rip .7s var(--ease) forwards; pointer-events: none;
}
@keyframes rip { to { transform: scale(60); opacity: 0; } }
.link {
  position: relative; display: inline-block; padding-bottom: .2rem;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size .5s var(--ease);
}

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  transition: transform .5s var(--ease), background-color .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid { background: rgba(10,10,10,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line-dark); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: block; line-height: 0; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.75rem); }
.nav a:not(.btn) {
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-stretch: 108%;
  padding: .5rem 0; position: relative;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.nav a[aria-current="page"] { background-size: 100% 1px; }
.nav .btn { min-height: 2.75rem; padding: 0 1.25rem; }
.menu-btn { display: none; width: 46px; height: 46px; border: 1px solid var(--line-dark); background: transparent; position: relative; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1px; background: var(--white); transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-btn span:nth-child(1) { top: 19px; } .menu-btn span:nth-child(2) { top: 26px; }
.menu-open .menu-btn span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { top: 22px; transform: rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--black);
  display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: calc(var(--header-h) + 1rem) var(--pad) 2.5rem;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease), visibility 0s linear .7s; visibility: hidden;
}
.menu-open .mobile-menu { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
.mobile-menu a:not(.btn) {
  font-stretch: 76%; font-weight: 800; text-transform: uppercase; font-size: clamp(3rem, 15vw, 5.5rem); line-height: 1;
  border-bottom: 1px solid var(--line-dark); padding: .9rem 0;
  transform: translateY(30px); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.menu-open .mobile-menu a:not(.btn) { transform: none; opacity: 1; }
.menu-open .mobile-menu a:nth-child(2) { transition-delay: .08s; } .menu-open .mobile-menu a:nth-child(3) { transition-delay: .16s; }
.mobile-menu .btn { margin-top: 2rem; align-self: flex-start; }
.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
/* the promo is a vertical video: full bleed on phones, a tall framed panel on wide screens */
.hero__bg { position: absolute; inset: -6%; z-index: -3; background: #0a0a0a center / cover no-repeat; filter: blur(48px) brightness(.34) saturate(.75); }
.hero__frame { position: absolute; inset: 0; z-index: -2; margin: 0; background: #0a0a0a; }
.hero__frame video { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,.2) 55%, rgba(10,10,10,.94) 100%); }
.sound {
  position: absolute; z-index: 3; top: calc(var(--header-h) + .9rem); right: var(--pad);
  display: inline-flex; align-items: center; gap: .7rem; min-height: 2.6rem; padding: 0 1rem;
  background: rgba(10,10,10,.55); border: 1px solid var(--line-dark); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-stretch: 108%;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.sound__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound__eq i { display: block; width: 2px; height: 3px; background: currentColor; transition: height .3s var(--ease); }
.sound.is-on .sound__eq i { animation: eq .9s ease-in-out infinite; }
.sound.is-on .sound__eq i:nth-child(2) { animation-delay: .15s; } .sound.is-on .sound__eq i:nth-child(3) { animation-delay: .3s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
/* phone/tablet sound toggle: a square icon button that lives beside the hero buttons */
.sound--m { display: none; position: relative; top: auto; right: auto; width: 3.1rem; min-height: 3.1rem; padding: 0; justify-content: center; background: transparent; border-color: currentColor; backdrop-filter: none; -webkit-backdrop-filter: none; -webkit-tap-highlight-color: transparent; transition: background .3s var(--ease), color .3s var(--ease), transform .25s var(--ease); }
.sound--m svg { width: 1.3rem; height: 1.3rem; }
.sound--m .s-on { display: none; }
.sound--m.is-on { background: var(--white); color: var(--black); border-color: var(--white); }
.sound--m.is-on .s-on { display: inline; }
.sound--m.is-on .s-off { display: none; }
.sound--m:active { transform: scale(.94); }
.sound--m:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.hero__inner { padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.hero h1 { font-size: clamp(3.2rem, 11.2vw, 11.5rem); max-width: 13ch; }
.hero h1 em { display: inline-block; font-size: 1.06em; line-height: .8; }
.hero .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero .line > span { display: block; transform: translateY(112%); animation: lineup 1.15s var(--ease) forwards; animation-delay: calc(.15s + var(--i, 0) * .11s); }
@keyframes lineup { to { transform: none; } }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(1.75rem, 4vw, 3rem); }
.hero__sub { max-width: 30em; color: rgba(255,255,255,.86); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; opacity: 0; animation: fade 1s .75s var(--ease) forwards; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; opacity: 0; animation: fade 1s .9s var(--ease) forwards; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reel-btn .tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (min-width: 901px) {
  .hero { --fh: calc(100svh - var(--header-h) - 1.25rem - clamp(2rem, 4vw, 3.25rem)); --fw: calc(var(--fh) * 9 / 16); }
  .hero__frame { inset: auto; top: calc(var(--header-h) + 1.25rem); right: var(--pad); width: var(--fw); height: var(--fh); border: 1px solid var(--line-dark); }
  .hero__frame video { opacity: .94; }
  .hero::after { background:
    linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 70%, rgba(10,10,10,.55) 100%),
    linear-gradient(90deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 55%); }
  .sound--d { top: calc(var(--header-h) + 2.25rem); right: calc(var(--pad) + 1rem); }
  .hero__inner { padding-right: calc(var(--fw) + var(--pad) * 2); }
  .hero h1 { font-size: clamp(3.2rem, 8.2vw, 9rem); max-width: none; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- marquee ---------- */
.marquee { border-block: 1px solid var(--line-dark); background: var(--black); overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marq 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
  font-stretch: 76%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  padding: 1.15rem 1.9rem; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.7);
  transition: color .3s, -webkit-text-stroke-color .3s;
}
.marquee__dot { width: 7px; height: 7px; background: var(--white); transform: rotate(45deg); flex: none; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.section--light { background: var(--off); color: var(--ink); }
.section--dark { background: var(--black); color: var(--white); }
.section__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.intro { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: 1.15fr .85fr; align-items: end; }
.intro p { color: var(--mute-light); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--line-light); }
.stat { padding: 1.75rem 1.5rem 0 0; }
.stat + .stat { padding-left: 1.5rem; border-left: 1px solid var(--line-light); }
.stat__n { font-stretch: 76%; font-weight: 800; font-size: clamp(2.4rem, 6vw, 5.25rem); line-height: 1; letter-spacing: -.01em; }
.stat__l { margin-top: .7rem; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mute-light); font-stretch: 108%; }

/* service rows: the whole row inverts on hover */
.svc-list { border-top: 1px solid var(--line-dark); }
.svc {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 5rem 1.1fr 1fr 3.5rem; align-items: center; gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line-dark);
  transition: color .5s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.svc:focus-visible, .svc:active { color: var(--black); }
.svc:focus-visible::before, .svc:active::before { transform: scaleY(1); }
.svc__n, .svc__t { transition: transform .6s var(--ease); }
.svc__n { font-size: .78rem; font-weight: 600; letter-spacing: .2em; font-stretch: 110%; opacity: .6; }
.svc__t { font-stretch: 78%; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1; }
.svc__d { color: var(--mute-dark); transition: color .5s var(--ease); }
.svc:focus-visible .svc__d, .svc:active .svc__d { color: var(--mute-light); }
.svc__a { justify-self: end; width: 2.6rem; height: 2.6rem; border: 1px solid currentColor; display: grid; place-items: center; transition: transform .5s var(--ease), background .3s, color .3s; }
.svc__a svg { width: 1.1rem; height: 1.1rem; }
.svc:focus-visible .svc__a, .svc:active .svc__a { background: var(--black); color: var(--white); transform: rotate(-45deg); }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); }
.step { padding: 2rem 2rem 0 0; }
.step + .step { padding-left: 2rem; border-left: 1px solid var(--line-light); }
.step__n { font-family: var(--serif); font-style: italic; font-size: clamp(3.5rem, 7vw, 6rem); line-height: .9; }
.step h3 { font-stretch: 84%; font-weight: 700; font-size: 1.6rem; line-height: 1.1; margin: 1.1rem 0 .7rem; letter-spacing: -.01em; }
.step p { color: var(--mute-light); max-width: 24em; }
.terms { margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.5rem 0; border-block: 1px solid var(--line-light); display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: baseline; }
.terms strong { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-stretch: 108%; }

/* photo strip (stills from the promo) */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--black); }
.strip figure { position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
.strip img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); filter: grayscale(1) contrast(1.05); transform: scale(1.02); transition: filter .8s var(--ease), transform 1.2s var(--ease); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.contact__side { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 1.75rem; }
.contact__side p { color: var(--mute-dark); max-width: 26em; }
.contact__facts { border-top: 1px solid var(--line-dark); }
.contact__facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line-dark); font-size: .95rem; }
.contact__facts dt { color: var(--mute-dark); } .contact__facts dd { margin: 0; text-align: right; }

.form { display: grid; gap: 1.6rem; position: relative; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.field { position: relative; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0;
  padding: 1.55rem 0 .6rem; font-size: 1.05rem; outline: none; color: var(--white); appearance: none; -webkit-appearance: none;
  transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input, .field textarea { caret-color: var(--white); }
.field input:-webkit-autofill, .field textarea:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100px #161616 inset; transition: background-color 99999s; }
.field input[type="date"] { min-height: 3.4rem; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field label {
  position: absolute; left: 0; top: 1.5rem; pointer-events: none; color: var(--mute-dark);
  font-size: 1.05rem; transform-origin: left top; transition: transform .35s var(--ease), color .3s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field.has-value label { transform: translateY(-1.15rem) scale(.72); color: var(--white); }
.field::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.field input[type="date"] { color-scheme: dark; }
.field input[type="date"]:not(.has-value):not(:focus) + label { transform: none; color: var(--mute-dark); }
.field input[type="date"]:not(.has-value):not(:focus) { color: transparent; }
.field select { cursor: pointer; padding-right: 1.5rem; }
.field select option { background: var(--black); color: var(--white); }
.field .chev { position: absolute; right: 2px; bottom: 1.05rem; width: 12px; height: 12px; pointer-events: none; opacity: .7; }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-color: #fff; }
.field .err { position: absolute; left: 0; top: 100%; margin-top: .35rem; font-size: .78rem; color: var(--white); opacity: 0; transform: translateY(-4px); transition: .3s; }
.field.is-bad .err { opacity: 1; transform: none; }
.field.is-bad::before { content: ""; position: absolute; right: 0; top: 1.6rem; width: 8px; height: 8px; background: var(--white); }
.legend { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mute-dark); font-stretch: 108%; margin-bottom: .8rem; }
.types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--line-dark); }
.types label { position: relative; cursor: pointer; }
.types input { position: absolute; opacity: 0; inset: 0; }
.types span {
  display: block; padding: 1rem 1.1rem; font-size: .92rem; border: 1px solid transparent; margin: -.5px;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.types span::before { content: ""; display: inline-block; width: 9px; height: 9px; border: 1px solid currentColor; margin-right: .7rem; transition: background .3s; }
.types input:checked + span { background: var(--white); color: var(--black); }
.types input:checked + span::before { background: var(--black); }
.types input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.form__note { font-size: .82rem; color: var(--mute-dark); max-width: 26em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__t::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .8rem; border: 1.5px solid currentColor; border-right-color: transparent; vertical-align: -.1em; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__status { min-height: 1.4em; font-size: .9rem; }

.sent { display: none; padding: clamp(2rem, 5vw, 4rem) 0; }
.form-done .form { display: none; }
.form-done .sent { display: block; animation: fade .8s var(--ease) both; }
.sent svg { width: 88px; height: 88px; margin-bottom: 1.75rem; }
.sent circle, .sent path { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-dasharray: 260; stroke-dashoffset: 260; }
.form-done .sent circle { animation: draw 1s var(--ease) .1s forwards; }
.form-done .sent path { animation: draw .7s var(--ease) .75s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sent h3 { font-stretch: 80%; font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; }
.sent p { margin-top: 1rem; color: var(--mute-dark); max-width: 26em; }

/* ---------- footer ---------- */
.footer { background: var(--black); border-top: 1px solid var(--line-dark); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.footer__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 3rem; }
.footer__logo { height: clamp(150px, 20vw, 230px); width: auto; }
.footer__cols { display: flex; flex-wrap: wrap; gap: 3rem 5rem; }
.footer h4 { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mute-dark); font-stretch: 110%; margin-bottom: 1rem; }
.footer li + li { margin-top: .55rem; }
.footer li { font-size: .95rem; color: var(--mute-dark); }
.footer li a { color: var(--white); }
.social { display: inline-flex; align-items: center; gap: .6rem; }
.ig { width: 1.15rem; height: 1.15rem; flex: none; transition: transform .35s var(--ease); }
.social:active .ig { transform: scale(.88); }
.form__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.form__note a:hover { text-decoration-thickness: 2px; }
.footer__bar { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .82rem; color: var(--mute-dark); }

/* ---------- reel lightbox ---------- */
dialog.reel { border: 0; padding: 0; background: transparent; color: var(--white); max-width: none; max-height: none; width: 100%; height: 100%; overflow: hidden; }
dialog.reel::backdrop { background: rgba(0,0,0,.94); }
dialog.reel[open] { display: grid; place-items: center; animation: fade .5s var(--ease); }
.reel video { max-width: min(94vw, 1200px); max-height: 88svh; width: auto; height: auto; background: #000; }
.reel__close { position: fixed; top: 1.25rem; right: 1.25rem; width: 3.2rem; height: 3.2rem; border: 1px solid var(--line-dark); background: rgba(10,10,10,.6); transition: background .3s, color .3s, transform .4s var(--ease); }
.reel__close span { position: absolute; left: 14px; right: 14px; top: 50%; height: 1px; background: currentColor; }
.reel__close span:nth-child(1) { transform: rotate(45deg); } .reel__close span:nth-child(2) { transform: rotate(-45deg); }

/* ---------- sub page ---------- */
.page-hero { padding-top: calc(var(--header-h) + clamp(4rem, 9vw, 8rem)); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line-dark); }
.page-hero h1 { font-size: clamp(3.4rem, 12vw, 12rem); }
.page-hero p { margin-top: 1.75rem; }
.offer { display: grid; grid-template-columns: 5rem 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(3rem, 6vw, 5.5rem); border-bottom: 1px solid var(--line-light); scroll-margin-top: var(--header-h); }
.offer:last-of-type { border-bottom: 0; }
.offer__n { font-family: var(--serif); font-style: italic; font-size: 3.4rem; line-height: 1; }
.offer h2 { font-stretch: 78%; font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: .95; }
.offer__body p { color: var(--mute-light); max-width: 30em; }
.ticks { margin-top: 1.5rem; border-top: 1px solid var(--line-light); }
.ticks li { padding: .8rem 0 .8rem 1.75rem; border-bottom: 1px solid var(--line-light); position: relative; font-size: .98rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.28rem; width: 10px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.offer__cta { margin-top: 1.75rem; }
.faq { border-top: 1px solid var(--line-dark); }
.faq details { border-bottom: 1px solid var(--line-dark); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.6rem 0; font-stretch: 84%; font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.15; transition: padding .4s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 1.7rem; height: 1.7rem; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.faq details[open] .ans { grid-template-rows: 1fr; }
.faq .ans > div { overflow: hidden; }
.faq .ans p { padding: 0 0 1.75rem; color: var(--mute-dark); max-width: 42em; }
.cta-band { text-align: left; }
.cta-band .h2 { max-width: 18ch; }

/* ---------- scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
/* the row hover transitions and the reveal transition share one property, so declare them together */
.svc[data-reveal] { transition: color .5s var(--ease), padding .55s var(--ease), opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav a:not(.btn), .nav .btn { display: none; }
  .menu-btn { display: block; }
  .intro, .contact { grid-template-columns: 1fr; }
  .contact__side { position: static; }
  .svc { grid-template-columns: 3.2rem 1fr 2.6rem; }
  .svc__d { grid-column: 2 / 3; grid-row: 2; }
  .svc__a { grid-column: 3; grid-row: 1 / 3; }
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .step, .step + .step { padding: 2rem 0; border-left: 0; border-top: 1px solid var(--line-light); }
  .offer { grid-template-columns: 1fr; gap: 1.5rem; }
  .offer__n { display: none; }
  .strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  :root { --header-h: 66px; }
  .brand img { height: 28px; }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid var(--line-light); }
  .form__row { grid-template-columns: 1fr; }
  .types { grid-template-columns: 1fr; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__cta, .hero__cta .btn { width: 100%; }
  /* calmer phone hero: fewer, smaller pieces, more air */
  .hero .eyebrow, .hide-m { display: none; }
  .hero h1 { font-size: clamp(2.3rem, 12.2vw, 4.2rem); max-width: none; }
  .hero__inner { padding-top: calc(var(--header-h) + 2rem); padding-bottom: 1.6rem; }
  .hero__foot { gap: 1.4rem; margin-top: 1.5rem; }
  .hero__sub { font-size: 1rem; }
  .hero__cta { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
  .hero__cta .btn--solid { grid-column: 1 / -1; }
  .hero__cta .btn { min-height: 3.1rem; }
  .hero__cta .sound--m { width: 3.1rem; }
}
@media (max-width: 900px) {
  .sound--d, .hero__bg { display: none; }
  .sound--m { display: inline-flex; }
}
@media (max-width: 700px) {
  /* typing on a phone: a real, visible box with a big target, not a hairline */
  .form { gap: 1rem; }
  .form__row { gap: 1rem; }
  .field input, .field textarea {
    border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.07);
    padding: 1.7rem 1rem .55rem; min-height: 3.75rem; font-size: 1.0625rem;
    transition: border-color .25s, background-color .25s;
  }
  .field textarea { min-height: 8.5rem; }
  .field label { left: 1rem; top: 1.2rem; }
  .field input:focus + label, .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
  .field.has-value label { transform: translateY(-.7rem) scale(.72); }
  .field input[type="date"]:not(.has-value):not(:focus) + label { transform: none; }
  .field input:focus, .field textarea:focus { border-color: #fff; background: rgba(255,255,255,.11); }
  .field::after { display: none; }
  .field.is-bad { margin-bottom: 1.3rem; }
  .field.is-bad::before { right: 1rem; top: 1.5rem; }
  .types span { padding: 1.1rem 1rem; font-size: 1rem; }
  .form__foot .btn { width: 100%; }
}
@media (hover: none) {
  .strip img { filter: grayscale(.85); }
}
/* every hover effect lives here so a tap on a phone never leaves one stuck on */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--black); }
  .btn:hover::before { transform: translateY(0); }
  .btn:hover svg { transform: translateX(.35rem); }
  .btn--solid:hover, .btn--dark:hover { color: var(--white); }
  .link:hover { background-size: 0% 1px; background-position: right bottom; }
  .nav a:not(.btn):hover { background-size: 100% 1px; }
  .sound--d:hover { background: var(--white); color: var(--black); border-color: var(--white); }
  .sound--m:hover { background: var(--white); color: var(--black); }
  .social:hover .ig { transform: translateY(-2px) rotate(-6deg); }
  .marquee__item:hover { color: var(--white); }
  .svc:hover { color: var(--black); }
  .svc:hover::before { transform: scaleY(1); }
  .svc:hover .svc__d { color: var(--mute-light); }
  .svc:hover .svc__a { background: var(--black); color: var(--white); transform: rotate(-45deg); }
  .svc:hover .svc__n, .svc:hover .svc__t { transform: translateX(.9rem); }
  .strip figure:hover img { filter: none; transform: scale(1.07); }
  .types label:hover span { background: rgba(255,255,255,.08); }
  .reel__close:hover { background: var(--white); color: var(--black); transform: rotate(90deg); }
  .ticks li:hover::before { width: 18px; }
  .faq summary:hover { padding-left: .75rem; }
}

/* ---------- first-visit loader: logo rises, hairline fills, curtain lifts ---------- */
.loader { position: fixed; inset: 0; z-index: 300; background: var(--black); display: none; place-items: center; }
html.loading { overflow: hidden; }
html.loading .loader { display: grid; }
.loader__inner { display: grid; justify-items: center; gap: 1.9rem; }
.loader__logo { width: clamp(150px, 24vw, 220px); height: auto; clip-path: inset(100% 0 0 0); animation: logo-up 1.15s var(--ease) .1s forwards; }
.loader__bar { width: clamp(120px, 20vw, 190px); height: 1px; background: rgba(255,255,255,.18); overflow: hidden; }
.loader__bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; animation: loader-bar var(--loader-ms, 1500ms) cubic-bezier(.65, 0, .35, 1) forwards; }
.loader.is-done { animation: curtain .9s var(--ease) forwards; pointer-events: none; }
@keyframes logo-up { to { clip-path: inset(0); } }
@keyframes loader-bar { to { transform: scaleX(1); } }
@keyframes curtain { to { clip-path: inset(0 0 100% 0); } }
/* keep the hero entrance waiting until the curtain lifts */
html.loading .hero *, html.loading .page-hero * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee__track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero .line > span { transform: none; }
  .hero__sub, .hero__cta { opacity: 1; }
}

/* ---------- privacy / long-form text ---------- */
.nb { white-space: nowrap; }
@media (max-width: 400px) {
  /* the location has to stay whole, so the eyebrow gives back the room it needs */
  .eyebrow { font-size: .63rem; letter-spacing: .16em; gap: .6rem; }
  .eyebrow::before { width: 1.25rem; }
}
.prose { max-width: 46rem; }
.prose__date { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-stretch: 108%; color: var(--mute-light); margin-bottom: 2.5rem; }
.prose h2 { font-stretch: 80%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.05; margin: 2.75rem 0 .9rem; }
.prose p, .prose li { font-size: 1.05rem; line-height: 1.7; color: #222; }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0; padding-left: 1.25rem; list-style: square; }
.prose li + li { margin-top: .5rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }