/* ============================================================
   Tilt Professional — Accounting & Payroll
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* brand */
  --navy-950:#03101B;
  --navy-900:#05141F;
  --navy-850:#071A29;
  --navy-800:#0A1F31;   /* service bar */
  --navy-700:#0E2A3F;
  --ink:#0A1C2B;

  --teal:#12A0A7;       /* solid button / UI */
  --teal-600:#0E8E95;
  --teal-400:#2AA9B1;   /* accent type */
  --teal-300:#57C4CA;
  --teal-mark:#16A9AC;  /* logo dots */

  --paper:#F4F5F6;
  --muted:#5B6B78;
  --rule:rgba(255,255,255,.13);

  /* layout */
  --gutter:64px;
  --maxw:1600px;
  --header-h:120px;
  /* conservative floor for the footer's rendered height; see .contact.
     Lowered from 300 when the footer was tightened to 279px, which left
     only 3px of margin against the guarantee and would have started
     clamping the scroll again on the next content change. */
  --footer-min:240px;

  /* motion — one easing curve for the whole site. Decelerating, so
     movement arrives softly instead of stopping dead. */
  --ease:cubic-bezier(.22,.61,.36,1);

  font-synthesis-weight:none;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Anchor targets used to land flush with the top of the viewport, which
     put them underneath the fixed header. scroll-padding reserves the
     header's height plus a little air, so a section arrives fully visible.
     scroll-behavior is the no-JS fallback; main.js runs a longer, softer
     scroll when it is available. */
  scroll-padding-top:calc(var(--header-h) + 24px);
  scroll-behavior:smooth;
}
/* Belt and braces: the same offset on the targets themselves, so any
   scroll path that ignores scroll-padding still clears the header. */
:target,section[id],footer[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Figtree","Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--teal-300);outline-offset:3px}

/* shared arrow glyph */
.arrow{width:22px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;
       stroke-linecap:square;stroke-linejoin:miter;flex:none}

/* ============================================================
   LOGO — the supplied artwork, background keyed to transparency.
   Mark and type are separate crops so the stacked master lockup can be
   set horizontally in the header without redrawing anything.
   ============================================================ */
.logo{display:inline-flex;align-items:center;gap:14px}
.logo__mark{height:64px;width:auto}
.logo__type{height:42px;width:auto}
.logo--footer .logo__mark{height:56px}
.logo--footer .logo__type{height:37px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:18px;
  padding:15px 24px;
  font-size:14.5px;font-weight:600;line-height:1;letter-spacing:.005em;
  border-radius:0;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
/* Rises a hair on hover and settles back under the press. The press is
   deliberately quick — feedback should feel immediate even when the
   release is soft. */
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

.btn--ghost{border:1px solid rgba(255,255,255,.38);color:#fff;padding:16px 24px}
.btn--ghost:hover{background:#fff;color:var(--navy-900);border-color:#fff;
                  box-shadow:0 10px 24px rgba(0,0,0,.28)}
.btn--solid{background:var(--teal-600);color:#fff;padding:14px 24px}
.btn--solid:hover{background:var(--teal-400);box-shadow:0 12px 28px rgba(18,160,167,.28)}

.link-arrow{
  display:inline-flex;align-items:center;gap:18px;
  padding-bottom:10px;
  font-size:14.5px;font-weight:500;line-height:1;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.55);
  transition:border-color .18s ease,color .18s ease;
}
.link-arrow:hover{color:var(--teal-300);border-color:var(--teal-300)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  /* backdrop-filter is deliberately NOT in the transition list: it starts
     as `none`, which cannot be interpolated, so it snapped anyway and only
     added work. The layer promotion matters more — without it the browser
     builds the blur's backdrop root at the instant .is-stuck lands, which
     is one frame into the scroll, and the scroll visibly catches there. */
  will-change:backdrop-filter;
  transition:background-color .3s ease,box-shadow .3s ease;
}
.site-header.is-stuck{
  background:rgba(5,20,31,.94);
  backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
/* Two items only, logo and CTA, at every width. 1fr auto puts all the
   slack between them so the CTA holds the right edge. */
.site-header__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:24px var(--gutter);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;
}

.nav__list{display:flex;align-items:center;gap:10px}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 14px;
  font-size:15px;font-weight:500;color:rgba(255,255,255,.92);
  transition:color .18s ease;
}
.nav__link:hover{color:var(--teal-300)}
.nav__caret{
  width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;
}
.has-menu[aria-open="true"] .nav__caret{transform:translateY(1px) rotate(225deg)}

.nav__menu{
  position:absolute;top:calc(100% + 14px);left:0;min-width:268px;
  background:rgba(6,22,34,.97);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-menu[aria-open="true"] .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{
  display:block;padding:11px 22px;
  font-size:14.5px;color:rgba(255,255,255,.82);
  border-left:2px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.nav__menu a:hover{background:rgba(255,255,255,.05);color:#fff;border-left-color:var(--teal)}

.site-header__cta{justify-self:end;white-space:nowrap}
.btn--ghost.site-header__cta{padding:16px 26px}
/* Hidden wherever the form shares the first screen with the headline. It would
   only scroll you to something already in front of you, and it duplicated the
   form's own submit button word for word. It comes back below 960px, where the
   layout stacks and the form really is out of sight. */
@media (min-width:961px){
  .site-header__cta{display:none}
  .site-header__inner{grid-template-columns:1fr}
}

.burger{display:none;width:44px;height:44px;padding:11px;justify-self:end}
.burger span{display:block;height:1.6px;background:#fff;margin:5px 0;transition:transform .25s ease,opacity .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
/* The whole page is meant to sit on one screen. The hero takes whatever is
   left after the service bar and the footer, rather than a fixed 718px, so on
   a taller display it grows instead of leaving the footer stranded, and on a
   shorter one it gives way instead of forcing a scroll on its own.
   --hero-reserve is the service bar plus the compact footer. */
:root{--hero-reserve:222px}
.hero{
  position:relative;isolation:isolate;
  min-height:calc(100vh - var(--hero-reserve));
  background:var(--navy-950);
  color:#fff;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:-1}

/* photographic plate — see assets/img/README.md */
.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
  filter:saturate(1.14) contrast(1.06);
}
/* the synthetic backdrop is only a stand-in; the photo replaces it */
.hero.has-photo .hero__bg::before,
.hero.has-photo .hero__bg::after,
.hero.has-photo .hero__beam{display:none}

/* generated fallback so the hero reads correctly with no photo present */
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 34%, rgba(38,86,110,.55) 0%, rgba(10,32,48,0) 62%),
    radial-gradient(70% 60% at 96% 78%, rgba(70,96,110,.34) 0%, rgba(10,32,48,0) 70%),
    radial-gradient(60% 70% at 8% 12%,  rgba(24,60,86,.42) 0%, rgba(6,20,32,0) 70%),
    linear-gradient(118deg,#03101B 0%,#061A2A 44%,#0B2839 72%,#0D3040 100%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 74% 40%,#000 0%,transparent 78%);
}
.hero__beam{
  position:absolute;left:50%;right:12%;top:40%;height:6px;
  background:linear-gradient(90deg,rgba(90,220,235,0) 0%,rgba(126,232,244,.6) 26%,rgba(126,232,244,.75) 74%,rgba(90,220,235,0) 100%);
  filter:blur(5px);transform:rotate(-1deg);opacity:.38;
}
/* Reads the copy INTO the photograph rather than beside it: the documents and
   desk stay faintly legible behind the headline, the machine and its holograms
   stay clear, and the desk surface melts into the service bar below. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    /* keeps the nav legible against the window */
    linear-gradient(180deg,rgba(3,13,21,.66) 0%,rgba(3,13,21,.18) 16%,rgba(3,13,21,0) 26%),
    /* lifts the read-out clear of the holographic cluster behind it */
    radial-gradient(28% 38% at 65% 27%,rgba(3,14,23,.50) 0%,rgba(3,14,23,0) 72%),
    /* the copy column */
    linear-gradient(95deg,
      rgba(3,13,21,.95) 0%,
      rgba(3,13,21,.91) 22%,
      rgba(3,13,21,.70) 34%,
      rgba(3,13,21,.28) 47%,
      rgba(3,13,21,.05) 60%,
      rgba(3,13,21,.03) 80%,
      rgba(3,13,21,.32) 100%);
}
/* desk surface → service bar */
.hero__floor{
  position:absolute;left:0;right:0;bottom:0;height:186px;
  background:linear-gradient(180deg,rgba(6,20,32,0) 0%,rgba(7,22,35,.30) 50%,rgba(9,29,45,.78) 82%,var(--navy-800) 100%);
}

/* Copy left, form right, both vertically centred in whatever height the hero
   ends up with. */
.hero__inner{
  position:relative;
  max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--header-h) + 28px) var(--gutter) 36px;
  min-height:calc(100vh - var(--hero-reserve));
  display:grid;grid-template-columns:1fr 520px;gap:72px;align-items:center;
}
.hero__copy{max-width:640px}

.hero__title{
  font-size:52px;line-height:1.08;font-weight:700;letter-spacing:-.02em;
  margin-bottom:10px;
}
.hero__title .accent{color:var(--teal-400)}

.hero__lede{
  max-width:446px;
  font-size:15.5px;line-height:1.6;font-weight:400;
  color:rgba(255,255,255,.80);
  margin-bottom:14px;
}
.hero__lede + .hero__lede{max-width:480px;margin-bottom:0}

/* The direct address, moved up from the old contact section. */
.hero__direct{
  display:inline-flex;flex-direction:column;gap:3px;
  margin-top:30px;padding-left:16px;
  border-left:3px solid var(--teal);
}
.hero__direct-label{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.hero__direct-value{
  font-size:20px;font-weight:600;letter-spacing:-.01em;color:#fff;
  transition:color .3s var(--ease);
}
.hero__direct:hover .hero__direct-value{color:var(--teal-300)}

/* ---------- machine read-out ---------- */
/* Sits in the copy column under the calls to action, so the photograph is
   left completely unobstructed. */
.hud{
  display:flex;gap:16px;
  width:100%;max-width:640px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
}
.hud__tile{
  position:relative;
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;
  padding:13px 16px 14px;
  min-height:94px;
  background:linear-gradient(180deg,rgba(13,44,63,.78) 0%,rgba(6,23,36,.86) 100%);
  backdrop-filter:blur(9px) saturate(125%);
  border:1px solid rgba(150,215,230,.32);
}
.hud__tile::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(126,232,244,.25),rgba(126,232,244,.75));
}

.hud__label{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.80);
}
.hud__value{
  font-size:29px;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--teal-300);
  margin-top:auto;
  font-variant-numeric:tabular-nums;
}
.hud__value--text{font-size:20px;line-height:1.15;letter-spacing:.01em}
.hud__unit{
  font-size:10.5px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.70);margin-top:6px;
}

/* ============================================================
   SERVICE BAR
   ============================================================ */
/* Every other section is a full-bleed background with a separate inner
   element capped at --maxw. This one had no inner wrapper, so max-width
   capped the BACKGROUND too: above 1600px the dark bar stopped short and
   the light page showed either side of it, directly under a hero that
   runs edge to edge. The padding below reproduces the same 1600px content
   column while letting the navy run the full width. */
.servicebar{
  background:var(--navy-800);
  color:#fff;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.servicebar__item{
  display:flex;align-items:center;gap:22px;
  height:88px;
  padding-right:24px;
  position:relative;
  transition:color .18s ease;
}
.servicebar__item + .servicebar__item::before{
  content:"";position:absolute;left:-45px;top:22px;bottom:22px;width:1px;background:var(--rule);
}
.servicebar__item:hover{color:var(--teal-300)}
.servicebar__num{font-size:17px;font-weight:700;color:var(--teal-400);flex:none;letter-spacing:.01em}
.servicebar__icon{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;
                  stroke-width:1.4;stroke-linejoin:miter}
.servicebar__label{font-size:15px;font-weight:500;line-height:1.32}
.servicebar__item .arrow{margin-left:12px;opacity:.85;transition:transform .2s ease}
.servicebar__item:hover .arrow{transform:translateX(4px)}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--paper);padding:52px 0 96px}
.process__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:400px 1fr;gap:44px;
}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal);margin-bottom:22px;
}
.process__title{
  font-size:32px;line-height:1.14;font-weight:700;letter-spacing:-.018em;
  color:var(--ink);max-width:380px;
}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:46px}
.step{position:relative}
.step:not(:last-child)::after{
  content:"";position:absolute;top:14px;left:calc(100% + 9px);width:29px;height:3px;
  background-image:radial-gradient(circle at 50% 50%,#B7C0C6 1.5px,transparent 1.7px);
  background-size:7px 3px;background-repeat:repeat-x;
}
.step__num{
  display:block;
  font-size:23px;font-weight:700;line-height:1.15;letter-spacing:.01em;
  color:var(--teal);margin-bottom:8px;
}
.step__title{
  font-size:15px;font-weight:600;line-height:1.27;color:var(--ink);
  max-width:118px;margin-bottom:10px;
}
.step__body{
  font-size:12.5px;line-height:1.44;color:var(--muted);max-width:152px;
}

/* Flex column with a gap, NOT adjacent-sibling margins. `.field + .field`
   also matches the second field inside a two-up row, which pushed the right
   column down by 18px and left the pairs visibly out of step. */
.contact__form{
  display:flex;flex-direction:column;gap:14px;
  padding:26px 28px 24px;
  background:linear-gradient(180deg,rgba(13,44,63,.78) 0%,rgba(6,23,36,.88) 100%);
  border:1px solid rgba(150,215,230,.26);
  backdrop-filter:blur(6px);
}
/* Two-up on desktop, stacking on its own below. minmax(0,1fr) rather than 1fr
   so a long value cannot push a column wider than its track. */
.contact__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.field__opt{
  font-weight:500;letter-spacing:.06em;text-transform:none;
  color:rgba(255,255,255,.34);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:10px 13px;
  font-family:inherit;font-size:15px;line-height:1.4;
  color:#fff;
  background:rgba(3,16,27,.6);
  border:1px solid rgba(150,215,230,.22);
  border-radius:0;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),
             box-shadow .25s var(--ease);
  /* iOS zooms the page in on focus for anything under 16px; it also rounds
     inputs and adds an inner shadow unless appearance is reset */
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:78px}
.field input::placeholder,
.field textarea::placeholder{color:rgba(255,255,255,.3)}
.field input:hover,
.field select:hover,
.field textarea:hover{border-color:rgba(150,215,230,.4)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--teal-300);
  background:rgba(3,16,27,.85);
  box-shadow:0 0 0 3px rgba(42,169,177,.18);
}
/* The reset above removes the native arrow, so draw one. */
.field select{
  padding-right:40px;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),
    linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
/* The menu itself is drawn by the OS, so it needs its own colours or it
   renders white-on-white on a dark page in some browsers. */
.field select option{background:#0A1F31;color:#fff}

/* Off screen rather than display:none - bots skip hidden fields, which is
   the entire point of the trap. */
.contact__hp{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* 6 on top of the form's 14px gap, so the action sits 20 clear of the fields */
.contact__submit{margin-top:6px;width:100%;justify-content:center}
.contact__submit[disabled]{opacity:.6;cursor:progress;transform:none}

/* Reserves its line whether or not there is a message, so the panel does not
   jump taller the moment a validation error appears. */
.contact__status{
  margin:0;font-size:14px;line-height:1.5;min-height:1.5em;
  color:rgba(255,255,255,.7);
}
.contact__status.is-error{color:#FF9E9E}
.contact__status.is-ok{color:var(--teal-300);font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy-900);color:#fff}
/* One row: mark, line, address. Was a 279px grid of three stacked blocks. */
.site-footer__inner{
  max-width:var(--maxw);margin:0 auto;padding:22px var(--gutter) 20px;
  display:flex;align-items:center;gap:40px;
}
.site-footer__line{
  flex:1;min-width:0;
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.58);max-width:520px;
}
.site-footer__email{
  font-size:14.5px;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap;
  transition:color .3s var(--ease);
}
.site-footer__email:hover{color:var(--teal-300)}
.logo--footer .logo__mark{height:38px}
.logo--footer .logo__type{height:25px}

.site-footer__bar{
  border-top:1px solid var(--rule);
  max-width:var(--maxw);margin:0 auto;
  padding:12px var(--gutter);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.48);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1440px){
  :root{--gutter:48px}
}
@media (max-width:1200px){
  .nav__list{gap:2px}
  .nav__link{padding:10px 10px;font-size:14px}
  .hero__title{font-size:44px}
  .hero__copy{max-width:520px}
  /* The two-up hero cannot hold a 520px form and a headline much below this,
     so it stacks and the page gives up the single screen. That is the right
     trade: a squeezed form is worse than a short scroll. */
  .hero__inner{grid-template-columns:1fr;gap:40px;min-height:0;
               padding-top:calc(var(--header-h) + 32px);padding-bottom:48px}
  .hero{min-height:0}
  .contact__form{max-width:620px}
  .process__inner{grid-template-columns:1fr;gap:40px}
  .site-footer__inner{gap:32px}
  .process__title{max-width:560px}
  .steps{gap:30px}
  .step:not(:last-child)::after{display:none}
  .step__title,.step__body{max-width:none}
}
@media (max-width:960px){
  :root{--gutter:32px;--header-h:92px}
  /* The CTA used to be hidden here and replaced by a burger opening the
     nav drawer. With no nav there is no drawer, so the CTA stays visible
     at every width and just gets tighter. */
  .site-header__cta{padding:12px 16px;font-size:13px}
  .site-header__inner{padding:18px var(--gutter)}
  .logo{gap:11px}
  .logo__mark{height:50px}
  .logo__type{height:33px}

  /* mobile drawer */
  .nav.is-open{
    display:block;position:fixed;inset:var(--header-h) 0 0 0;margin:0;
    background:rgba(4,17,27,.98);backdrop-filter:blur(18px);
    padding:16px var(--gutter) 48px;overflow-y:auto;
  }
  .nav.is-open .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav.is-open .nav__link{width:100%;justify-content:space-between;padding:18px 0;font-size:18px;
                          border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.is-open .nav__menu{position:static;opacity:1;visibility:visible;transform:none;
                          background:none;border:0;backdrop-filter:none;padding:4px 0 12px;
                          display:none}
  .nav.is-open .has-menu[aria-open="true"] .nav__menu{display:block}
  .nav.is-open .nav__menu a{padding:10px 0 10px 16px}

  .hero{min-height:0}
  /* copy runs the full width here, so the scrim has to be even rather than
     weighted to the left; the machine stays the focal point behind it */
  .hero__photo{object-position:62% 26%}
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(3,13,21,.80) 0%,rgba(3,13,21,.62) 22%,rgba(3,13,21,.72) 58%,rgba(3,13,21,.86) 100%),
      linear-gradient(90deg,rgba(3,13,21,.55) 0%,rgba(3,13,21,.34) 60%,rgba(3,13,21,.50) 100%);
  }
  .hero__floor{height:140px}
  .hero__inner{min-height:0;padding:calc(var(--header-h) + 32px) var(--gutter) 48px}
  .hero__title{font-size:40px}
  .servicebar{grid-template-columns:repeat(2,1fr);padding:8px var(--gutter)}
  .servicebar__item:nth-child(even)::before{content:"";left:-24px}
  .servicebar__item:nth-child(odd)::before{display:none}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px}
  /* footer is a single row now; nothing to restack here */
}
@media (max-width:640px){
  :root{--gutter:20px}
  /* The CTA is now the only header control, so it has to coexist with the
     full logo lockup on a narrow screen. At 390px the two overlapped, so
     both shrink here. */
  .site-header__inner{gap:12px}
  .logo{gap:8px}
  .logo__mark{height:38px}
  .logo__type{height:25px}
  .site-header__cta{padding:10px 12px;font-size:12px}
  .hero__title{font-size:35px;letter-spacing:-.015em}
  .servicebar{grid-template-columns:1fr}
  .servicebar__item::before{display:none!important}
  .servicebar__item + .servicebar__item{border-top:1px solid var(--rule)}
  .steps{grid-template-columns:1fr;gap:28px}
  .process__title{font-size:27px}
  .contact__form{max-width:none;padding:22px 18px 20px}
  /* two fields side by side at 320px is two unusable fields */
  .contact__row{grid-template-columns:1fr;gap:14px}
  /* 16px exactly: iOS Safari zooms the whole page in when a focused control
     is set below 16, and then leaves the visitor scrolled sideways. */
  .field input,
  .field select,
  .field textarea{font-size:16px}
  .hero__direct{margin-top:26px}
  .hero__direct-value{font-size:18px}
  .site-footer__inner{flex-direction:column;align-items:flex-start;gap:16px}
}

/* Below ~360px (iPhone SE and similar) the full lockup and the CTA still
   collide. The dot mark alone is distinctive enough to carry the header at
   that size, and the enquiry button is the more useful of the two. */
@media (max-width:380px){
  .logo__type{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  /* the blanket rule above does not touch scrolling; main.js checks the
     same media query before running its eased scroll */
  html{scroll-behavior:auto}
  .btn:hover,.contact__form:hover{transform:none}
}