/* ===========================================================
   Hyde Workplace Solutions — shared stylesheet
   Design system unchanged: white base, grey bands, yellow
   accent, charcoal dark register.
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:      #FFFFFF;
  --mist:       #F4F5F3;
  --line:       #E3E5E1;
  --steel:      #5B6573;
  --ink:        #1A2129;
  --graphite:   #2A323A;
  --graphite-p: #313A44;
  --graphite2:  #222930;

  --yellow:      #FFC93D;
  --yellow-soft: #FFF3D1;
  --gold:        #8A6A12;

  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px;
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--graphite); color: #fff; padding: .75rem 1.25rem; font-size: .875rem; font-weight: 600; }
.skip-link:focus { left: 0; }

/* ── Layout ── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 2.5rem; }
.band { border-bottom: 1px solid var(--line); }
.band--grey { background: var(--mist); }
.band--dark { background: var(--graphite); border-bottom: none; }
.pad { padding: 4.75rem 0; }
.pad-sm { padding: 3.4rem 0; }

/* ── Type ── */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 1.75rem; height: 3px; background: var(--yellow); }
.eyebrow--light { color: var(--yellow); }

h2.sec { font-family: var(--f-display); font-size: clamp(1.85rem, 2.6vw, 2.45rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.15; margin-top: .85rem; }
h3.sub-h { font-family: var(--f-display); font-size: 1.28rem; font-weight: 700; letter-spacing: -.015em; }
.sec-intro { font-size: .98rem; line-height: 1.75; color: var(--steel); margin-top: .9rem; max-width: 64ch; }
.prose p { font-size: .955rem; line-height: 1.82; color: var(--steel); }
.prose p + p { margin-top: 1.05rem; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; font-size: .86rem; font-weight: 600; padding: .85rem 1.7rem; border: 1px solid transparent; transition: background .16s, color .16s, border-color .16s; cursor: pointer; }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--graphite); color: #fff; }
.btn-dark { background: var(--graphite); color: #fff; }
.btn-dark:hover { background: var(--yellow); color: var(--ink); }
.btn-ghost { border-color: var(--graphite); color: var(--ink); }
.btn-ghost:hover { background: var(--graphite); color: #fff; }
.btn-ghost-light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost-light:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn-sm { padding: .62rem 1.35rem; font-size: .8rem; }

/* ── Top bar ── */
.topbar { background: var(--graphite); color: rgba(255,255,255,.72); }
.topbar-inner { max-width: 1180px; margin: 0 auto; padding: .55rem 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; }
.topbar a { color: rgba(255,255,255,.72); transition: color .15s; }
.topbar a:hover { color: var(--yellow); }
.topbar-right { display: flex; gap: 1.75rem; }

/* ── Nav ── */
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 1rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo { display: flex; align-items: center; gap: .7rem; }
.logo-mark { width: 30px; height: 30px; flex-shrink: 0; }
.logo-text { font-family: var(--f-display); font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.logo-sub { display: block; font-family: var(--f-mono); font-size: .55rem; font-weight: 400; letter-spacing: .19em; text-transform: uppercase; color: var(--steel); margin-top: .28rem; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links > a, .navdrop > button { font-family: var(--f-body); font-size: .865rem; font-weight: 500; color: rgba(26,33,41,.78); background: none; border: none; padding: .35rem 0; position: relative; cursor: pointer; transition: color .15s; }
.nav-links > a::after, .navdrop > button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--yellow); transition: width .2s; }
.nav-links > a:hover, .navdrop > button:hover { color: var(--ink); }
.nav-links > a:hover::after, .navdrop:hover > button::after { width: 100%; }
.nav-links a.is-current { color: var(--ink); font-weight: 600; }
.nav-links a.is-current::after { width: 100%; }

.navdrop { position: relative; }
.navdrop-menu { position: absolute; top: 100%; left: -1rem; min-width: 270px; background: #fff; border: 1px solid var(--line); padding: .5rem 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s, transform .16s, visibility .16s; box-shadow: 0 12px 28px rgba(26,33,41,.09); }
.navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.navdrop-menu a { display: block; padding: .6rem 1.25rem; font-size: .83rem; color: var(--steel); transition: background .14s, color .14s; }
.navdrop-menu a:hover { background: var(--mist); color: var(--ink); }
.navdrop-menu a strong { display: block; color: var(--ink); font-weight: 600; font-size: .855rem; }
.navdrop-menu .core { font-family: var(--f-mono); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ── Page header (interior pages) ── */
.pagehead { background: var(--graphite); position: relative; }
.pagehead::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--yellow); }
.pagehead-inner { max-width: 1180px; margin: 0 auto; padding: 3.6rem 2.5rem 3.4rem; }
.pagehead h1 { font-family: var(--f-display); font-size: clamp(2rem, 3.3vw, 2.9rem); font-weight: 800; letter-spacing: -.026em; line-height: 1.1; color: #fff; margin-top: .9rem; }
.pagehead p { font-size: 1.02rem; line-height: 1.72; color: rgba(255,255,255,.72); margin-top: 1.05rem; max-width: 62ch; }
.crumbs { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.crumbs a { color: rgba(255,255,255,.45); transition: color .15s; }
.crumbs a:hover { color: var(--yellow); }
.crumbs span { margin: 0 .5rem; }

/* ── Hero (home) ── */
.hero-inner { max-width: 1180px; margin: 0 auto; padding: 4.75rem 2.5rem 4.25rem; display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 4rem; }
.hero h1 { font-family: var(--f-display); font-size: clamp(2.5rem, 4.4vw, 3.75rem); font-weight: 800; line-height: 1.06; letter-spacing: -.028em; margin-top: 1.15rem; }
.hero h1 .accent { position: relative; display: inline-block; }
.hero h1 .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: .34em; background: var(--yellow); opacity: .38; z-index: -1; }
.hero-sub { font-size: 1.06rem; line-height: 1.72; color: var(--steel); margin-top: 1.4rem; max-width: 54ch; }
.hero-actions { display: flex; gap: .9rem; margin-top: 2.2rem; flex-wrap: wrap; }
.hero-foot { display: flex; align-items: flex-start; gap: .85rem; margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .83rem; color: var(--steel); max-width: 56ch; }
.hero-foot svg { flex-shrink: 0; margin-top: .15rem; }

.hero-visual { background: var(--mist); border: 1px solid var(--line); padding: 2.5rem 2rem 1.75rem; }
.hero-visual svg { width: 100%; max-width: 380px; margin: 0 auto; }
.hero-caption { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--steel); text-align: center; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

/* ── Principles strip ── */
.principles { max-width: 1180px; margin: 0 auto; padding: 1.9rem 2.5rem; }
.principles-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 2.4rem; }
.principles-row span { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--steel); }
.principles-note { text-align: center; font-size: .82rem; color: var(--steel); margin-top: 1.15rem; }

/* ── Architecture diagram ── */
.arch { margin-top: 2.6rem; border: 1px solid var(--line); background: var(--white); }
.arch-top { background: var(--graphite); padding: 1.6rem 1.75rem; text-align: center; position: relative; }
.arch-top::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--yellow); }
.arch-top h3 { font-family: var(--f-display); font-size: 1.18rem; font-weight: 700; color: #fff; letter-spacing: -.012em; }
.arch-top p { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-top: .5rem; }
.arch-split { display: flex; justify-content: center; padding: 1.1rem 0 .3rem; }
.arch-split svg { width: 100%; max-width: 720px; }
.arch-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.arch-col { background: #fff; padding: 1.4rem 1.1rem 1.5rem; text-align: center; transition: background .18s; }
.arch-col:hover { background: var(--mist); }
.arch-col .lot { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; color: var(--steel); }
.arch-col h4 { font-family: var(--f-display); font-size: .93rem; font-weight: 700; letter-spacing: -.01em; margin-top: .5rem; line-height: 1.3; }
.arch-col.is-core { background: var(--yellow-soft); }
.arch-col.is-core:hover { background: #FFEDBE; }
.arch-col .core-tag { display: inline-block; background: var(--yellow); color: var(--ink); font-family: var(--f-mono); font-size: .52rem; letter-spacing: .13em; text-transform: uppercase; padding: .22rem .5rem; margin-top: .6rem; }

/* ── Services list ── */
.svc-list { margin-top: 2.6rem; border-top: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: 5rem 1fr auto; gap: 2rem; align-items: start; padding: 1.85rem 1.25rem 1.85rem 0; border-bottom: 1px solid var(--line); transition: background .18s, padding-left .18s; }
.svc:hover { background: var(--mist); padding-left: 1.25rem; }
.svc:hover .svc-name { color: var(--gold); }
.svc:hover .svc-go { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.svc-lot { font-family: var(--f-mono); font-size: .76rem; color: var(--steel); padding-top: .25rem; }
.svc-name { font-family: var(--f-display); font-size: 1.16rem; font-weight: 700; letter-spacing: -.012em; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; transition: color .16s; }
.core-badge { background: var(--yellow); color: var(--ink); font-family: var(--f-mono); font-size: .57rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .6rem; }
.svc-sum { display: block; font-size: .865rem; line-height: 1.78; color: var(--steel); margin-top: .5rem; max-width: 68ch; }
.svc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.svc-tags i { font-style: normal; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); border: 1px solid var(--line); padding: .25rem .55rem; background: #fff; }
.svc-go { align-self: center; font-size: .78rem; font-weight: 600; padding: .55rem 1.1rem; border: 1px solid var(--line); white-space: nowrap; transition: background .16s, border-color .16s, color .16s; }

/* ── Card grids ── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.6rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.6rem; }
.cell { background: #fff; padding: 1.9rem 1.75rem; position: relative; transition: background .2s; }
.cell::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: transparent; transition: background .2s; }
.cell:hover { background: var(--mist); }
.cell:hover::before { background: var(--yellow); }
.cell .num { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .15em; color: var(--gold); }
.cell h3 { font-family: var(--f-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin-top: .55rem; }
.cell p { font-size: .855rem; line-height: 1.78; color: var(--steel); margin-top: .55rem; }
.grid--flat .cell:hover { background: #fff; }
.grid--flat .cell:hover::before { background: transparent; }

/* ── Dark grids ── */
.grid-dark { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.09); margin-top: 2.6rem; }
.cell-dark { background: var(--graphite-p); padding: 1.6rem 1.75rem; }
.cell-dark .lbl { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--yellow); }
.cell-dark p { font-size: .845rem; line-height: 1.78; color: rgba(255,255,255,.72); margin-top: .5rem; }
.dark-foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 2.2rem; }
.dark-note { font-size: .845rem; color: rgba(255,255,255,.55); max-width: 60ch; }

/* ── Steps ── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.6rem; list-style: none; }
.step { padding-top: 1.35rem; border-top: 3px solid var(--line); transition: border-color .2s; }
.step:hover { border-top-color: var(--yellow); }
.step-num { font-family: var(--f-mono); font-size: .78rem; color: var(--gold); }
.step h3 { font-family: var(--f-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin-top: .4rem; }
.step p { font-size: .845rem; line-height: 1.78; color: var(--steel); margin-top: .5rem; }

/* ── Checklist ── */
ul.checks { list-style: none; display: grid; gap: .65rem; margin-top: 1.2rem; }
ul.checks li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; line-height: 1.7; color: var(--steel); }
ul.checks li svg { flex-shrink: 0; margin-top: .38rem; }
ul.checks.two { grid-template-columns: 1fr 1fr; gap: .65rem 2rem; }
ul.checks li strong { color: var(--ink); font-weight: 600; }
ul.checks--light li { color: rgba(255,255,255,.72); }
ul.checks--light li strong { color: #fff; }

/* ── Callouts ── */
.callout { background: var(--yellow-soft); border-left: 4px solid var(--yellow); padding: 1.9rem 2.2rem; margin-top: 2rem; }
.callout p { font-size: .93rem; line-height: 1.8; color: var(--ink); max-width: 70ch; }
.callout p + p { margin-top: .85rem; }
.callout .lbl { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; display: block; }
.callout a.inline { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--yellow); padding-bottom: .12rem; margin-top: 1.1rem; }
.callout a.inline:hover { border-color: var(--ink); }

.pullquote { border-left: 4px solid var(--yellow); padding: .3rem 0 .3rem 1.4rem; margin-top: 1.6rem; font-family: var(--f-display); font-size: 1.08rem; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }

/* ── Two column ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem; margin-top: 2rem; }
.split { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4rem; }

/* ── Dark card ── */
.card-dark { background: var(--graphite); padding: 2.3rem; position: relative; }
.card-dark::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--yellow); }
.card-dark .lbl { font-family: var(--f-mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--yellow); }
.card-dark h3 { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; color: #fff; margin-top: .7rem; letter-spacing: -.012em; }
.card-dark p { font-size: .855rem; line-height: 1.75; color: rgba(255,255,255,.7); margin-top: .6rem; }
.card-dark .btn { margin-top: 1.5rem; }

/* ── Sector chips ── */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.chips span { font-size: .8rem; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: .5rem .95rem; }
.band--grey .chips span { background: #fff; }

/* ── Final CTA ── */
.final { background: var(--graphite); position: relative; }
.final::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--yellow); }
.final-inner { max-width: 1180px; margin: 0 auto; padding: 5rem 2.5rem; text-align: center; }
.final h2 { font-family: var(--f-display); font-size: clamp(1.9rem, 3.1vw, 2.7rem); font-weight: 800; letter-spacing: -.025em; color: #fff; margin-top: 1rem; }
.final p { font-size: 1.02rem; line-height: 1.75; color: rgba(255,255,255,.68); margin: 1.1rem auto 0; max-width: 58ch; }
.final-actions { display: flex; gap: .9rem; justify-content: center; margin-top: 2.4rem; flex-wrap: wrap; }
.final .eyebrow { justify-content: center; }

/* ── Contact ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.contact-block + .contact-block { margin-top: 1.9rem; padding-top: 1.9rem; border-top: 1px solid var(--line); }
.contact-lbl { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.contact-val { font-size: .98rem; line-height: 1.75; color: var(--ink); margin-top: .55rem; }
.contact-val a { border-bottom: 1px solid var(--line); transition: border-color .15s; }
.contact-val a:hover { border-color: var(--yellow); }
.contact-val .muted { color: var(--steel); font-size: .875rem; }

form .field { margin-bottom: 1.15rem; }
form label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
form label .req { color: var(--gold); }
form input, form select, form textarea {
  width: 100%; font-family: var(--f-body); font-size: .92rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); padding: .8rem .9rem; transition: border-color .15s;
}
form input:focus, form select:focus, form textarea:focus { border-color: var(--graphite); }
form textarea { min-height: 130px; resize: vertical; }
form .hp { position: absolute; left: -9999px; }

/* Consent checkbox — must override the global full-width input rule */
.consent { display: flex; align-items: flex-start; gap: .8rem; margin: 1.4rem 0 1.3rem; padding: 1.1rem 1.2rem; background: var(--mist); border-left: 3px solid var(--yellow); }
.consent input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; min-width: 1.05rem; margin: .15rem 0 0;
  accent-color: var(--graphite); border: 1px solid var(--steel); cursor: pointer; padding: 0;
}
.consent label { font-size: .82rem; font-weight: 400; line-height: 1.65; color: var(--steel); margin: 0; cursor: pointer; }
.consent label .req { color: var(--gold); font-weight: 600; }
.consent label a { color: var(--ink); border-bottom: 1px solid var(--yellow); }
.consent label a:hover { border-bottom-width: 2px; }
.form-note { font-size: .78rem; color: var(--steel); margin-top: .9rem; line-height: 1.65; }

/* ── Footer ── */
footer { background: var(--graphite2); }
.foot-inner { max-width: 1180px; margin: 0 auto; padding: 3.6rem 2.5rem 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 2.5rem; }
.foot-brand .logo-text { color: #fff; }
.foot-tag { font-size: .845rem; color: rgba(255,255,255,.55); margin-top: .75rem; max-width: 26ch; }
.foot-head { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.foot-links { list-style: none; margin-top: 1.05rem; }
.foot-links li { margin-bottom: .55rem; }
.foot-links a { font-size: .825rem; color: rgba(255,255,255,.62); transition: color .15s; }
.foot-links a:hover { color: var(--yellow); }
.foot-links .soon { color: rgba(255,255,255,.32); font-size: .825rem; }
.foot-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 2rem; margin-top: 2.6rem; }
.foot-clabel { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.foot-cdetail { font-size: .825rem; color: rgba(255,255,255,.62); margin-top: .55rem; line-height: 1.7; }
.foot-cdetail a:hover { color: var(--yellow); }
.foot-legal { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.4rem; margin-top: 2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot-legal p { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.32); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero-inner, .split, .contact-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .grid-3, .arch-cols { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .nav-links { display: none; }
  .arch-split { display: none; }
}
@media (max-width: 720px) {
  .wrap, .nav-inner, .hero-inner, .principles, .final-inner, .foot-inner, .topbar-inner, .pagehead-inner { padding-left: 1.35rem; padding-right: 1.35rem; }
  .pad { padding: 3.25rem 0; }
  .two-col, .grid-2, .grid-3, .grid-dark, .steps, .arch-cols, .foot-grid, .foot-contact, ul.checks.two { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; gap: .5rem; }
  .svc-go { justify-self: start; margin-top: .75rem; }
  .topbar-left { display: none; }
  .topbar-inner { font-size: .6rem; justify-content: center; }
  .hero-visual { padding: 1.75rem 1.25rem 1.25rem; }
}