/* ============================================================
   Ferrule — marketing site styles (tryferrule.com)

   Palette and type are the product's own tokens (web/src/tokens.css), so the site
   and the console agree; the layout primitives, focus ring and motion rules are
   coldirontech.com's, so the two sites stay siblings. Every colour pair is checked
   by `npm run contrast`. See BRANDING.md.
   ============================================================ */

:root{
  /* surfaces — the product's ramp, verbatim */
  --bg:#141019;            /* page */
  --surface:#1E1828;       /* cards, header, footer */
  --raised:#261E32;        /* form inputs, raised rows */
  --seam:#2F253E;          /* decorative borders */
  --seam-strong:#756494;   /* interactive borders — 3.29:1 on a card (AA non-text) */

  /* text — the product's three steps */
  --ink:#E8EAED;           /* headings and body */
  --mist:#9AA1AC;          /* secondary, labels, footer */
  /* --faint (#79818D) exists in the product's tokens but is NOT used here: it lands at
     4.39:1 on a card, and every small label on this site — the CAP tags, the console
     keys, "(optional)", the copyright — is a word somebody reads. --mist carries them
     all at 6.63:1 or better. */
  --faint:#79818D;

  /* accent — the product's amber, which is also the parent company's CTA colour */
  --amber:#F2A93B;
  --amber-hot:#FFBF57;
  --on-amber:#141019;

  /* status colours, borrowed from the console */
  --ok:#34C77B;
  --session:#4E9CF5;

  --radius:6px;
  --radius-card:14px;
  --pill:999px;
  --max:1120px;
  --focus:3px;

  /* one shadow scale, three depths — rather than a new shadow per component */
  --lift-1:0 6px 18px rgba(0,0,0,.30);
  --lift-2:0 18px 44px rgba(0,0,0,.42);
  --lift-3:0 26px 60px rgba(0,0,0,.50);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{color:var(--ink);font-family:'Archivo',system-ui,sans-serif;margin:0 0 14px}
h1{font-weight:800;font-size:clamp(34px,4.9vw,52px);line-height:1.06;letter-spacing:-.03em}
h2{font-weight:800;font-size:clamp(27px,3.6vw,38px);line-height:1.14;letter-spacing:-.024em}
h3{font-weight:700;font-size:18.5px;letter-spacing:-.012em;margin-bottom:10px}
p{margin:0 0 16px}
a{color:var(--amber)}
a:hover{color:var(--amber-hot)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* --- accessibility primitives --- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--amber);color:var(--on-amber);
  padding:12px 20px;font-weight:600;border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}
/* Dual-tone focus ring: dark inner separates it from any fill, amber outer contrasts
   against the page. Visible on every surface including the CTA. */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 calc(2px + var(--focus)) var(--amber);
  border-radius:3px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
/* The header is sticky, so an anchor landing at the top of a section would put that
   section's heading underneath it. */
section[id],main [id]{scroll-margin-top:92px}

/* --- section furniture --- */
.eyebrow{
  display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin-bottom:16px;
}
.section-intro{color:var(--mist);max-width:62ch;font-size:17.5px}
.fineprint{font-size:13.5px;color:var(--mist)}

/* A label that reads as an object rather than as a line of text. */
.chip{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--seam);background:var(--surface);border-radius:var(--pill);
  padding:7px 15px 7px 12px;margin-bottom:24px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mist);
}
.chip .dot{margin:0}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,var(--amber-hot),var(--amber));
  color:var(--on-amber);
  font-weight:600;font-size:15px;text-decoration:none;
  padding:14px 24px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;font-family:inherit;
  box-shadow:0 8px 22px rgba(242,169,59,.16);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.btn:hover{color:var(--on-amber);transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 12px 30px rgba(242,169,59,.26)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;color:var(--ink);
  border-color:var(--seam-strong);box-shadow:none;
}
.btn.ghost:hover{background:var(--raised);border-color:var(--amber);box-shadow:var(--lift-1)}
.btn.small{padding:9px 17px;font-size:14px;box-shadow:none}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn .arrow{transition:transform .16s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* --- header --- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(20,16,25,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
/* Only once the page has moved: a border and a shadow while the page is still at the
   top is chrome drawn around nothing. */
header.scrolled{background:rgba(20,16,25,.96);border-bottom-color:var(--seam);box-shadow:0 12px 30px rgba(0,0,0,.36)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1.1}
.brand-mark-svg{width:28px;height:28px;flex:none;display:block}
.brand-text{display:flex;flex-direction:column;gap:1px}
.brand-mark{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;
  letter-spacing:-.02em;color:var(--ink);
}
.brand-mark .rr{color:var(--amber)}
.tm{font-size:.52em;line-height:1;vertical-align:super;margin-left:1px;color:var(--mist);font-weight:600}
.brand-tag{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;
  color:var(--mist);letter-spacing:.18em;
}
.links{display:flex;align-items:center;gap:6px}
.links a{
  color:var(--mist);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:8px 12px;border-radius:var(--radius);
  transition:color .15s ease,background .15s ease;
}
.links a:hover{color:var(--ink);background:var(--surface)}
.links a[aria-current="page"],.links a.is-current{color:var(--amber);background:var(--surface)}
.links a.btn{color:var(--on-amber);margin-left:10px}
.links a.btn:hover{color:var(--on-amber)}
/* The checkbox is the control; the label is what you see. Kept in the layout and
   focusable rather than display:none, or it would drop out of the tab order. */
.nav-check{
  position:absolute;width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none;
}
.nav-toggle{
  display:none;background:transparent;border:1px solid var(--seam-strong);
  color:var(--ink);border-radius:var(--radius);padding:8px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;cursor:pointer;
  user-select:none;
}
/* The focus ring belongs on the thing you can see. */
.nav-check:focus-visible + .nav-toggle{
  box-shadow:0 0 0 2px var(--bg), 0 0 0 calc(2px + var(--focus)) var(--amber);
}

/* --- hero --- */
.hero{
  position:relative;overflow:hidden;
  padding:104px 0 92px;
  background:
    radial-gradient(1080px 520px at 74% -12%, rgba(242,169,59,.15), transparent 62%),
    radial-gradient(720px 380px at 2% 2%, rgba(78,156,245,.10), transparent 64%);
  border-bottom:1px solid var(--seam);
}
/* Engineering graph paper, masked out before it can compete with the type. Masked
   rather than dimmed with opacity, so the fade follows the light rather than flattening
   the whole layer. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(117,100,148,.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117,100,148,.17) 1px, transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(78% 64% at 50% 0%, #000 8%, transparent 74%);
  mask-image:radial-gradient(78% 64% at 50% 0%, #000 8%, transparent 74%);
}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:52px;align-items:center}
.lede{font-size:18.5px;color:var(--mist);max-width:52ch;margin-bottom:30px}
.lede strong{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:9px 20px;margin:28px 0 0;padding:0;list-style:none;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--mist);
}
.hero-meta li{display:flex;align-items:center;gap:8px}
.hero-meta li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--seam-strong);flex:none;
}

/* --- console card --- */
.status-card{
  position:relative;
  background:linear-gradient(180deg,var(--surface),#191322);
  border:1px solid var(--seam);border-radius:var(--radius-card);
  padding:18px 20px 8px;box-shadow:var(--lift-3);
}
/* A lit top edge — the one place both status colours appear together. */
.status-card::before{
  content:"";position:absolute;left:16px;right:16px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),var(--session),transparent);
  opacity:.75;
}
.status-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  color:var(--mist);text-transform:uppercase;
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--seam);
}
.dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ok);margin-right:8px;vertical-align:middle;
  box-shadow:0 0 0 3px rgba(52,199,123,.14);
}
.status-row{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid rgba(47,37,62,.66);
  font-family:'IBM Plex Mono',monospace;font-size:13px;
}
.status-row:last-child{border-bottom:none}
.status-row .k{color:var(--mist)}
.status-row .v{color:var(--mist);text-align:right}
.status-row .v.accent{color:var(--amber)}

/* --- sections --- */
section{padding:96px 0}
.band{
  background:var(--surface);border-block:1px solid var(--seam);
  background-image:radial-gradient(760px 300px at 88% 0%, rgba(242,169,59,.05), transparent 60%);
}

/* --- capability bento --- */
/* Six columns rather than three: two tiles carry the ideas that need a sentence of
   room, three carry the ones that do not, and nothing is left as an orphan in a
   half-empty final row. */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:52px}
.svc{
  grid-column:span 2;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),#1A1524);
  border:1px solid var(--seam);border-radius:var(--radius-card);
  padding:26px 24px 28px;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.svc.wide{grid-column:span 3}
.svc::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px 160px at 12% -10%, rgba(242,169,59,.11), transparent 70%);
  opacity:0;transition:opacity .2s ease;
}
.svc:hover{border-color:rgba(242,169,59,.45);transform:translateY(-3px);box-shadow:var(--lift-2)}
.svc:hover::after{opacity:1}
.svc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.svc-icon{
  width:40px;height:40px;border-radius:11px;flex:none;
  border:1px solid var(--seam);background:var(--raised);
  display:grid;place-items:center;
  transition:transform .2s ease,border-color .2s ease;
}
.svc:hover .svc-icon{transform:translateY(-2px);border-color:rgba(242,169,59,.45)}
.svc-icon svg{width:20px;height:20px;stroke:var(--amber)}
.svc .mono-label{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mist);
  letter-spacing:.12em;text-transform:uppercase;padding-top:6px;
}
.svc h3{position:relative;margin-bottom:8px}
.svc p{margin:0;font-size:15.5px;color:var(--mist);position:relative}

/* --- audience columns --- */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px}
.who{
  position:relative;background:var(--bg);
  border:1px solid var(--seam);border-radius:var(--radius-card);
  padding:32px 30px;
}
.who::before{
  content:"";position:absolute;top:-1px;left:26px;right:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),transparent);
}
.who h3{font-size:20px;margin-bottom:10px}
.who > p{color:var(--mist);font-size:16px}
.who ul{list-style:none;margin:22px 0 0;padding:0}
.who li{
  padding:11px 0 11px 26px;position:relative;font-size:15.5px;color:var(--ink);
  border-top:1px solid var(--seam);
}
.who li:first-child{border-top:none}
.who li::before{
  content:"";position:absolute;left:1px;top:19px;
  width:11px;height:6px;
  border-left:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);
  transform:rotate(-45deg);
}

/* --- the three steps, on a line --- */
.steps{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:22px;margin-top:72px;padding-top:22px;
}
.steps::before{
  content:"";position:absolute;top:22px;left:9%;right:9%;height:1px;
  background:linear-gradient(90deg,transparent,var(--seam-strong) 18%,var(--seam-strong) 82%,transparent);
}
.step{
  position:relative;background:var(--surface);
  border:1px solid var(--seam);border-radius:var(--radius-card);
  padding:38px 26px 26px;
}
.step-num{
  position:absolute;top:-19px;left:26px;
  width:38px;height:38px;border-radius:50%;
  background:var(--bg);border:1px solid var(--amber);color:var(--amber);
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  display:grid;place-items:center;
  box-shadow:0 0 0 6px var(--bg);
}
.step .tier{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);display:block;margin-bottom:12px;
}
.step p{margin:0;font-size:15.5px}
.step p + p{margin-top:12px;color:var(--mist);font-size:14.5px}

/* --- tenancy diagram --- */
.diagram{
  margin:52px 0 0;padding:26px;
  background:var(--bg);border:1px solid var(--seam);border-radius:var(--radius-card);
}
.dgm{display:block;width:100%;height:auto}
.dgm-panel{fill:#191322;stroke:var(--seam);stroke-width:1.5}
.dgm-label{fill:var(--mist);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em}
.dgm-chip{fill:var(--raised);stroke:var(--seam);stroke-width:1}
.dgm-chip-text{fill:var(--mist);font-family:'IBM Plex Mono',monospace;font-size:12px}
.dgm-db{fill:none;stroke:var(--amber);stroke-width:1.5}
.dgm-db-seam{fill:none;stroke:var(--amber);stroke-width:1.5;opacity:.45}
.dgm-db-text{fill:var(--amber);font-family:'IBM Plex Mono',monospace;font-size:12px}
.dgm-cut{stroke:var(--seam-strong);stroke-width:1.5;stroke-dasharray:5 7}
.dgm-badge{fill:var(--bg);stroke:var(--seam-strong);stroke-width:1}
.dgm-badge-text{fill:var(--mist);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em}

/* --- trust rows --- */
.trust{
  list-style:none;margin:26px 0 0;padding:0;
  border:1px solid var(--seam);border-radius:var(--radius-card);overflow:hidden;
  background:var(--bg);
}
.trust li{
  display:grid;grid-template-columns:236px 1fr;gap:30px;align-items:start;
  padding:24px 28px;border-top:1px solid var(--seam);
  transition:background .18s ease;
}
.trust li:first-child{border-top:none}
.trust li:hover{background:#191322}
.trust strong{
  color:var(--amber);font-family:'IBM Plex Mono',monospace;font-weight:400;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;padding-top:5px;
}
.trust p{margin:0;font-size:15.5px;color:var(--mist)}

/* --- prose (privacy) --- */
.prose{max-width:70ch}
.prose h2{margin-top:44px}
.prose h3{margin-top:30px;color:var(--amber)}
.prose ul{padding-left:20px}
.prose li{margin-bottom:10px}
.prose p{color:var(--mist)}
.prose strong{color:var(--ink)}
/* A placeholder has to look like one, or it reads as a statement of fact. */
.confirm{
  border:1px dashed var(--amber);border-radius:var(--radius);
  padding:12px 14px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13.5px;color:var(--amber);
}

/* --- request / form --- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start;margin-top:48px}
.form-card{
  background:linear-gradient(180deg,var(--surface),#1A1524);
  border:1px solid var(--seam);border-radius:18px;padding:34px 32px;
  box-shadow:var(--lift-2);
}
.form-h{font-size:20px;margin-bottom:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.field .opt{color:var(--mist);font-weight:400}
.field input,.field textarea,.field select{
  background:var(--raised);color:var(--ink);
  border:1px solid var(--seam-strong);border-radius:var(--radius);
  padding:13px 14px;font-family:inherit;font-size:15.5px;width:100%;
  transition:border-color .15s ease;
}
.field select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%),linear-gradient(135deg,var(--mist) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;
}
.field textarea{min-height:132px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--amber)}
.field input::placeholder,.field textarea::placeholder{color:var(--mist)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--amber)}
.err{color:var(--amber);font-size:13.5px;min-height:1.2em}
/* honeypot — hidden from humans, reachable by naive bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:8px}
.form-note{margin:16px 0 0;font-size:13.5px;color:var(--mist)}
.form-status{margin-top:20px;padding:14px 16px;border-radius:var(--radius);font-size:15.5px}
.form-status[hidden]{display:none}
.form-status.ok{background:rgba(52,199,123,.12);border:1px solid var(--ok);color:var(--ink)}
.form-status.bad{background:rgba(242,169,59,.12);border:1px solid var(--amber);color:var(--ink)}
.aside-card{
  background:var(--bg);border:1px solid var(--seam);
  border-radius:18px;padding:28px 26px;
}
.aside-card h3{
  margin:26px 0 8px;font-size:12px;font-family:'IBM Plex Mono',monospace;
  font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--mist);
}
.aside-card h3:first-child{margin-top:0}
.aside-card p{color:var(--mist);font-size:15px}
.aside-card p:last-child{margin-bottom:0}

/* --- footer --- */
footer{border-top:1px solid var(--seam);padding:38px 0;background:var(--surface)}
.foot{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;font-size:14px;color:var(--mist);
}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot a{color:var(--mist);text-decoration:none}
.foot a:hover{color:var(--amber);text-decoration:underline}
.foot-brand{display:flex;align-items:center;gap:9px}
.foot-brand svg{width:20px;height:20px;flex:none}
.foot-brand .name{font-family:'Archivo',sans-serif;font-weight:800;color:var(--ink);font-size:15px;letter-spacing:-.02em}
.foot-brand .name .rr{color:var(--amber)}
.foot .mono{font-size:12.5px;color:var(--mist)}
.foot-legal{margin-top:18px;padding-top:16px;border-top:1px solid var(--seam);
  font-size:12.5px;color:var(--mist)}

/* --- 404 --- */
.oops{text-align:center;padding:120px 0}
.oops .code{
  font-family:'IBM Plex Mono',monospace;font-size:64px;color:var(--amber);
  letter-spacing:.06em;margin-bottom:10px;line-height:1;
}
.oops .hero-ctas{justify-content:center}
.oops .section-intro{margin:0 auto 26px;max-width:52ch}

/* --- motion --- */
/* What is left is feedback, not decoration: hover states on the things you can click,
   the header's edge once the page has moved, and the console panel arriving once on
   load. Nothing on this page waits on JavaScript to become visible. */
/* Nothing on this page moves for a reader who has asked for that. The universal
   selector covers the hover/state transitions without having to enumerate them, and
   the pseudo-elements are included because the card glow is one. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  .btn:hover,.btn:active,.svc:hover,.svc-icon,.svc:hover .svc-icon{transform:none!important}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* --- responsive --- */
@media (max-width:1080px){
  .svc,.svc.wide{grid-column:span 3}
  .trust li{grid-template-columns:200px 1fr;gap:22px}
}
@media (max-width:980px){
  .hero{padding:80px 0 72px}
  .hero-grid,.contact-grid,.who-grid{grid-template-columns:1fr;gap:40px}
  .who-grid{gap:20px}
  .steps{grid-template-columns:1fr;margin-top:56px;padding-top:0;gap:34px}
  .steps::before{display:none}
  .trust li{grid-template-columns:1fr;gap:10px}
  .trust strong{padding-top:0}
  .diagram{padding:18px}
}
@media (max-width:720px){
  .nav-toggle{display:block}
  .links{
    display:none;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--seam);
    padding:10px 24px 22px;box-shadow:var(--lift-2);
  }
  .nav-check:checked ~ .links{display:flex}
  .links a{padding:14px 0;border-bottom:1px solid var(--seam);border-radius:0}
  .links a:hover{background:transparent}
  .links a.btn{margin:16px 0 0;border-bottom:none;justify-content:center}
}
@media (max-width:600px){
  body{font-size:16.5px}
  section,.hero{padding:64px 0}
  .svc,.svc.wide{grid-column:1 / -1}
  .svc-grid{grid-template-columns:1fr;gap:14px}
  .form-grid{grid-template-columns:1fr}
  .form-card{padding:26px 22px}
  .foot{flex-direction:column;align-items:flex-start}
  .oops{padding:76px 0}
  .oops .code{font-size:48px}
}
@media (max-width:380px){
  .wrap{padding:0 16px}
  .btn{width:100%}
  .hero-ctas{flex-direction:column}
}