/* Fonts: to change a typeface, swap the family names in this line and in --f-display / --f-body below. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=IBM+Plex+Mono:wght@400;500&family=Source+Sans+3:wght@400;600;700&display=swap");

/* Northwest Enclosure Consulting
   Layout concept: a drawing set. Dark grid bands act as sheets, code
   references sit in mono "callouts", and the footer is a title block. */
:root {
  /* Palette: the four brand colors, plus a deeper green for text on light backgrounds */
  --navy-deep: #202734;
  --navy: #36415a;
  --green: #b7d894;
  --green-pale: #e0f8c7;
  --green-deep: #4e7a2a;
  --paper: #f4f6f1;
  --white: #ffffff;
  --ink: #1d2330;
  --grey: #5a6272;
  --steel: #9aa3ae;
  --rule: #d9ded4;
  --bg-grid: url("../img/bg-grid.jpg");

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.6vw, 3.9rem);

  --wrap: 1180px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green-deep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-stretch: 85%;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); font-weight: 750; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 650; font-stretch: 90%; letter-spacing: 0; }
p { margin: 0; max-width: 65ch; }
/* Avoid a lone word on the last line of a paragraph or list item. */
p, li, figcaption { text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 32px);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

/* Mono callout: a code or standard reference, as it would appear on a sheet */
.callout {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.callout::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.on-dark .callout { color: var(--green); }

/* ---------- Header ---------- */
.site-header {
  background: var(--navy-deep);
  color: var(--white);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  border-bottom: 3px solid var(--green);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 30; background: var(--navy-deep);
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 28px; padding-block: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.brand svg { flex: none; }
.brand-name { font-family: var(--f-display); font-stretch: 80%; font-weight: 700; font-size: 1.2rem; line-height: 1.05; letter-spacing: 0.01em; white-space: nowrap; }
.brand-name small { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-top: 3px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.nav a {
  color: #d9dee6; text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--green); }
.nav .nav-cta { color: var(--navy-deep); background: var(--green); padding: 6px 14px; border: 0; border-radius: 2px; }
.nav .nav-cta:hover { background: var(--green-pale); color: var(--navy-deep); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body); font-weight: 700; font-size: 1rem;
  padding: 13px 22px; border-radius: 2px; text-decoration: none;
  border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--green); color: var(--navy-deep); }
.btn-primary:hover { background: var(--green-pale); }
.btn-ghost { border-color: rgba(255,255,255,.45); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.06); }
.btn-solid { background: var(--navy); color: var(--white); }
.btn-solid:hover { background: var(--navy-deep); }
.btn .arrow { font-family: var(--f-mono); }

/* ---------- Hero ---------- */
.hero {
  color: var(--white); position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(32,39,52,.55), rgba(32,39,52,0) 65%), var(--bg-grid) center bottom / cover no-repeat, var(--navy-deep);
}
.hero .wrap {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px; align-items: center; padding-block: 72px 80px;
}
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero .lead { font-size: var(--step-1); color: #d5dbe4; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-figure { min-width: 0; }
.hero-figure svg { width: 100%; height: auto; display: block; }
.hero-figure figcaption { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); margin-top: 10px; }

/* ---------- Proof strip ---------- */
.strip { background: var(--green); color: var(--navy-deep); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-block: 0; }
.strip-item { padding: 22px 22px 22px 0; border-right: 1px solid rgba(32,39,52,.2); display: grid; gap: 4px; }
.strip-item + .strip-item { padding-left: 22px; }
.strip-item:last-child { border-right: 0; }
.strip-item strong { font-family: var(--f-display); font-stretch: 85%; font-size: 1.15rem; }
.strip-item span { font-size: 0.9rem; color: #34402a; }

/* ---------- Sections ---------- */
.section { padding-block: 84px; }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.section-head p { color: var(--grey); font-size: var(--step-1); line-height: 1.5; }
.section-alt { background: var(--white); border-block: 1px solid var(--rule); }

.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.intro-grid .prose { display: grid; gap: 18px; color: #2b3640; }
.phases { display: grid; gap: 18px; justify-items: start; }
/* Phones get Who We Are, then services, then Project Phases as its own section (.phases-phone).
   Wider screens keep Who We Are and the phases side by side (.phases-wide). */
.intro-head { display: grid; gap: 16px; justify-items: start; }
.who { display: grid; gap: 18px; color: #2b3640; }
.who > .intro-head, .who > .prose { display: contents; }
.phases-phone { display: none; }
/* Two-column screens: stretch the phase list so its bottom rule sits at the bottom of the last text line
   before "Meet the consultant" (that link's line + the 18px gap + the text's half-leading). */
@media (min-width: 941px) {
  .phases-wide { align-self: stretch; grid-template-rows: auto 1fr; }
  .phases-wide .phase-list { display: flex; flex-direction: column; margin-bottom: calc(var(--step-0) * 1.73 + 18px); }
  .phases-wide .phase-list li { flex: 1 0 auto; align-content: center; }
}
/* The top rule lines up with the cap height of the heading beside it. */
.phase-list { list-style: none; margin: calc(var(--step-3) * .14) 0 0; padding: 0; border-top: 2px solid var(--navy); width: 100%; }
.phase-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.phase-list .ph { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green-deep); padding-top: 3px; }
.phase-list b { display: block; font-family: var(--f-display); font-stretch: 90%; font-size: 1.05rem; }
.phase-list span { color: var(--grey); font-size: 0.97rem; }

/* Service cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.card {
  background: var(--navy); border: 1px solid var(--navy); display: flex; flex-direction: column;
  text-decoration: none; color: var(--green); transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--green); transform: translateY(-2px); }
.card .photo { aspect-ratio: 16 / 10; }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body p { color: var(--green-pale); font-size: 0.98rem; }
.card-ref { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: .06em; color: var(--green-pale); text-transform: uppercase; }
.card-more { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--green-pale); font-size: 0.95rem; transition: color .15s; }
.card:hover .card-more, .card:focus-visible .card-more { color: var(--green); }

/* Photo frame with drafted fallback when an image can't load */
.photo {
  position: relative; overflow: hidden; max-width: 100%;
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(183,216,148,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,216,148,.16) 1px, transparent 1px);
  background-size: 22px 22px;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.sheet { background: var(--white); }
.photo.sheet img { object-fit: contain; padding: 10px; }
.photo.whole img { position: relative; object-fit: contain; }
.photo .backdrop { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(18px) brightness(.5) saturate(.8); }
.photo.no-img::after {
  content: attr(data-label); position: absolute; left: 16px; bottom: 14px; right: 16px;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green);
}

/* Partner / testing band */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split .photo { aspect-ratio: 4 / 3; }
.split-copy { display: grid; gap: 18px; min-width: 0; }
.tests { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.tests li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 0.97rem; }
.tests code { font-family: var(--f-mono); font-size: 0.82rem; color: var(--navy); font-weight: 500; }

/* Navy CTA / contact */
.cta { background: var(--navy-deep); color: var(--white); }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; padding-block: 72px; align-items: start; }
.cta-copy { display: grid; gap: 16px; min-width: 0; }
/* Side by side, the copy runs the full height of the form and the contact list
   rows share the extra space, so the list's last rule lines up with the form's bottom edge. */
.cta .cta-copy { align-self: stretch; grid-template-rows: auto auto auto 1fr; }
.contact-list li { align-content: center; }
.cta-copy > p { color: #c3ccd8; font-size: var(--step-1); line-height: 1.5; }
.cta-copy .contact-list { margin-top: 10px; }

/* Contact form */
.contact-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); padding: 28px; min-width: 0;
}
.contact-form .field { display: grid; gap: 7px; min-width: 0; }
/* Side by side, the form box starts level with the top of the heading letters,
   below the callout (its line, the 16px gap, and the heading's top leading). */
.cta .contact-form { margin-top: calc(0.75rem * 1.6 + 16px + var(--step-3) * .14); align-self: stretch; grid-template-rows: auto auto auto 1fr auto; }
/* When the copy is the taller side, the message box takes up the difference. */
.contact-form .field:has(textarea) { grid-template-rows: auto 1fr; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form label { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.contact-form label span { color: var(--steel); margin-left: 6px; }
.contact-form input, .contact-form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--white);
  background: var(--navy); border: 1px solid rgba(255,255,255,.26); border-radius: 2px; padding: 11px 12px;
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form ::placeholder { color: #7f8b9b; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(183,216,148,.25); }
.form-foot { display: grid; gap: 14px; }
.form-foot .btn { cursor: pointer; width: 100%; justify-content: center; }
.form-status { color: #cfe1d7; font-size: 0.95rem; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.2); }
.contact-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.contact-list .k { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green); padding-top: 3px; }
.contact-list a, .contact-list span { color: var(--white); overflow-wrap: anywhere; }

/* ---------- Service pages ---------- */
.page-head {
  color: var(--white); position: relative;
  background: linear-gradient(90deg, rgba(32,39,52,.55), rgba(32,39,52,0) 65%), var(--bg-grid) center bottom / cover no-repeat, var(--navy-deep);
}
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center; padding-block: 56px; }
.page-head .copy { display: grid; gap: 18px; min-width: 0; }
.page-head .lead { font-size: var(--step-1); color: #d5dbe4; line-height: 1.5; }
.page-head .photo { aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,.18); }
/* A portrait photo shown whole: the frame takes the photo's own shape. */
.page-head .photo.whole { aspect-ratio: auto; width: min(100%, 380px); justify-self: end; }
.page-head .photo.whole img { height: auto; }
.page-head .photo.whole .backdrop { display: none; }
.crumbs { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.crumbs a { color: var(--green); text-decoration: none; }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding-block: 72px; align-items: start; }
.detail-main { display: grid; gap: 48px; min-width: 0; }
.block { display: grid; gap: 16px; }
.block > p { color: #2b3640; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 2px solid var(--navy); }
.checklist li { padding: 13px 0 13px 30px; border-bottom: 1px solid var(--rule); position: relative; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: 21px; width: 14px; height: 8px;
  border-left: 2px solid var(--green-deep); border-bottom: 2px solid var(--green-deep); transform: translateY(-50%) rotate(-45deg);
}
.checklist b { font-weight: 700; }
.refs { display: flex; flex-wrap: wrap; gap: 8px; }
.refs span, .refs a {
  font-family: var(--f-mono); font-size: 0.78rem; padding: 6px 10px;
  background: var(--white); border: 1px solid var(--rule); color: var(--navy);
}
.refs a { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.refs a:hover { border-color: var(--green-deep); color: var(--green-deep); }
/* The reference tags stretch to fill each row, so the row ends flush with the note box below. */
.refs-block { display: grid; gap: 16px; width: fit-content; max-width: 100%; min-width: min(100%, 30rem); }
.refs-block .refs span { flex: 1 1 auto; text-align: center; }
.refs-block .refs.balanced span { flex-basis: calc((100% - (var(--per-row) - 1) * 8px) / var(--per-row)); }
.refs-block .note { contain: inline-size; max-width: none; }
.aside .refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aside .refs span { text-align: center; }
.aside .refs span:last-child:nth-child(odd) { grid-column: 1 / -1; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-mono); color: var(--green-deep); font-size: 0.9rem; padding-top: 2px; }
.steps b { display: block; font-family: var(--f-display); font-stretch: 90%; font-size: 1.05rem; }
.steps span { color: var(--grey); font-size: 0.97rem; }
.note {
  background: var(--green-pale); border-left: 4px solid var(--green-deep); padding: 16px 18px; font-size: 0.95rem; color: #2c3a20;
}

.aside { display: grid; gap: 18px; position: sticky; top: 104px; }
.aside-box { background: var(--white); border: 1px solid var(--rule); padding: 22px; display: grid; gap: 12px; }
.aside-box h3 { font-size: 1.05rem; }
.aside-box p { font-size: 0.95rem; color: var(--grey); }
.aside-nav { list-style: none; padding: 0; margin: 0; display: grid; }
.aside-nav a { display: block; padding: 9px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--navy); font-weight: 600; font-size: 0.95rem; }
.aside-nav a:hover { color: var(--green-deep); }
.aside-nav a[aria-current="page"] { color: var(--green-deep); }
.aside-nav a[aria-current="page"]::before { content: "▸ "; }

/* ---------- About ---------- */
.about-head .wrap { grid-template-columns: 300px minmax(0, 1fr); }
.portrait { position: relative; max-width: 300px; }
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--white); }
.portrait::after { content: ""; position: absolute; inset: 18px -14px -14px 18px; border: 2px solid var(--green); z-index: -1; }
.portrait-wrap { position: relative; z-index: 0; }
.timeline { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--navy); }
.timeline li { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.timeline b { display: block; font-family: var(--f-display); font-stretch: 90%; font-size: 1.1rem; }
.timeline .org { color: var(--grey); font-size: 0.92rem; }
.timeline p { margin-top: 6px; font-size: 0.97rem; color: #2b3640; }
.edu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.edu div { background: var(--white); border: 1px solid var(--rule); padding: 18px; display: grid; gap: 4px; }
.edu b { font-family: var(--f-display); font-stretch: 90%; }
.edu span { color: var(--grey); font-size: 0.93rem; }

/* Credits */
.credits { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--navy); }
.credits li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 0.97rem; }
.credits .where { font-family: var(--f-mono); font-size: 0.78rem; color: var(--green-deep); text-transform: uppercase; letter-spacing: .05em; padding-top: 3px; }

/* ---------- Footer title block ---------- */
.site-footer { background: var(--navy-deep); color: #c3ccd8; font-size: 0.9rem; }
.site-footer .wrap { padding-block: 40px 28px; display: grid; gap: 22px; }
.titleblock { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; border: 1px solid rgba(255,255,255,.22); }
.titleblock > div { padding: 12px 14px; border-right: 1px solid rgba(255,255,255,.22); display: grid; gap: 3px; min-width: 0; }
.titleblock > div:last-child { border-right: 0; }
.titleblock .k { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.titleblock .v { color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.titleblock .v a { color: var(--white); text-decoration: none; }
.footer-legal { font-size: 0.82rem; color: #8f9aa8; max-width: 90ch; }
.footer-legal a { color: var(--green); }

/* ---------- Responsive ---------- */
.card-dots { display: none; }
@media (max-width: 940px) {
  .hero .wrap, .intro-grid, .split, .cta .wrap, .page-head .wrap, .detail { grid-template-columns: minmax(0, 1fr); }
  .hero .wrap { padding-block: 48px 56px; gap: 36px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-item:nth-child(2) { border-right: 0; }
  .strip-item:nth-child(3) { padding-left: 0; }
  .strip-item:nth-child(n+3) { border-top: 1px solid rgba(32,39,52,.2); }
  .aside { position: static; }
  .cta .contact-form { margin-top: 0; grid-template-rows: none; }
  .about-head .wrap { grid-template-columns: minmax(0, 1fr); }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock > div:nth-child(2) { border-right: 0; }
  .titleblock > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.22); }
}
@media (max-width: 620px) {
  .section { padding-block: 60px; }
  .edu { grid-template-columns: minmax(0, 1fr); }
  .phases-wide { display: none; }
  .phases-phone { display: block; }
  .intro-grid { gap: 24px; }
  .who { gap: 24px; color: inherit; }
  .who > .intro-head, .who > .prose { display: grid; }
  .phases-phone .phase-list { margin-top: 0; }
  /* Service cards: one swipeable row with the next card peeking in; dots underneath come from the page script */
  .cards {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter-l)); margin-right: calc(-1 * var(--gutter-r));
    padding-left: var(--gutter-l); padding-right: var(--gutter-r);
    scroll-padding-left: var(--gutter-l); scroll-padding-right: var(--gutter-r);
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 84%; scroll-snap-align: start; }
  .card:hover { transform: none; }
  .card-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .card-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--navy); background: transparent; cursor: pointer; }
  .card-dots button[aria-current="true"] { background: var(--navy); }
  .strip .wrap { grid-template-columns: minmax(0, 1fr); }
  .strip-item, .strip-item + .strip-item { padding: 16px 0; border-right: 0; border-top: 1px solid rgba(32,39,52,.2); }
  .strip-item:first-child { border-top: 0; }
  .phase-list li, .tests li, .credits li, .contact-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .titleblock { grid-template-columns: minmax(0, 1fr); }
  .titleblock > div { border-right: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .titleblock > div:first-child { border-top: 0; }
  .brand-name small { display: none; }
  .contact-form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
}
@media (max-width: 400px) {
  .brand-name { font-size: 1.02rem; }
}