/* ==========================================================================
   Engineering page — static recreation
   Tokens → base → layout → components → sections → responsive
   ========================================================================== */

:root {
  --orange-500: #f5821f;
  --orange-600: #d06e1a;
  --orange-700: #ab5b15;

  --grey-100: #eff0f1;
  --grey-150: #e0e1e3;
  --grey-200: #c3c4c8;
  --grey-300: #a3a3a4;
  --grey-500: #747576;
  --grey-600: #464749;
  --grey-700: #2f3032;
  --grey-800: #18191b;
  --grey-900: #0c0c0c;

  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 70px;
  --gutter: 64px;
  --pad-xs: 16px;
  --pad-sm: 32px;
  --pad-md: 64px;
  --pad-lg: 80px;

  /* theme (light defaults) */
  --headings: var(--grey-900);
  --body: var(--grey-700);
  --muted: var(--grey-500);
  --surface: var(--grey-100);
  --border: var(--grey-200);
  --plus: #c3c4c8;
}

[data-theme="dark"] {
  --headings: var(--grey-100);
  --body: var(--grey-200);
  --muted: var(--grey-500);
  --surface: var(--grey-800);
  --border: var(--grey-700);
  --plus: #3a3b3e;
}

/* ---------- page loader ---------- */
/* Sits on top of everything, dark like the site's dark sections, plays the
   SVG's own draw animation once (main.js times the exit to its 3.6s loop),
   then slides straight up and off-screen. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grey-800);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.page-loader_mark { width: 140px; height: 140px; }
.page-loader.is-leaving { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .page-loader { transition: none; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--body);
  background: var(--grey-100);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }

.is-inline-block { display: inline-block; }

/* ---------- typography ---------- */
.h-display { font-size: 96px; line-height: 1; letter-spacing: -0.035em; }
.h1 { font-size: 60px; line-height: 0.933; letter-spacing: -0.035em; }
.h2 { font-size: 48px; line-height: 1.021; letter-spacing: -0.035em; }
.h4 { font-size: 32px; line-height: 1.125; letter-spacing: -0.02em; }
.h5 { font-size: 24px; line-height: 1.167; letter-spacing: -0.02em; }
.h6 { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.h-display, .h1, .h2, .h4, .h5, .h6 {
  font-weight: 400;
  text-transform: uppercase;
  color: var(--headings);
}
.text-md { font-size: 16px; line-height: 1.25; }
.text-sm { font-size: 14px; line-height: 1.43; letter-spacing: 0; }
.text-muted { color: var(--muted); }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.padding { padding: var(--pad-md) 0; }
.padding.is-none { padding: 0; }

.content-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.grid-col {
  grid-column: span var(--span, 1);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
/* Every content-grid here spans the frame's full width, so the rightmost
   column's own border-right always lands on the exact same line as the
   frame's border-right — doubling it. Removed for the last column by
   default; sections whose grid reflows into more than one column-per-row
   at a given width restore/re-target it below (in the responsive rules) so
   whichever column ends up rightmost in ITS row loses the border instead. */
.grid-col:last-child { border-right: 0; }
.content-grid.is-plain { border-top: 0; }

[data-theme] { background: var(--surface); color: var(--body); }

/* plus-sign pattern */
[data-pattern="plus"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 7v6M7 10h6' stroke='%23b5b6ba' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
}
[data-theme="dark"] [data-pattern="plus"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 7v6M7 10h6' stroke='%23464749' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}

/* Shared image-placeholder look: no background of its own — just the cross
   pattern (via [data-pattern="plus"]) sitting on whatever surface is behind
   it. No gradients, no fill color, anywhere on the site. */
.img-placeholder { position: relative; }
.img-placeholder span {
  position: absolute; left: 20px; bottom: 16px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ---------- eyebrow + annotation ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--pad-sm);
}
.eyebrow_bracket { width: 5px; height: 16px; color: var(--orange-500); }
.eyebrow_bracket.is-right { transform: scaleX(-1); }
.eyebrow_bracket svg { width: 100%; height: 100%; }
.text_eyebrow {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.143;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-500);
}

.annotation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.annotation_dot { width: 8px; height: 8px; background: var(--orange-500); flex-shrink: 0; }
.annotation_dot.is-disabled { background: var(--grey-500); opacity: 0.6; }
.annotation_text {
  font-size: 12px;
  line-height: 1.143;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  color: var(--headings);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.nav[data-theme="dark"] { --border: var(--grey-700); }
.nav .container { height: 100%; }
.nav_wrap {
  display: flex; justify-content: space-between; height: 100%;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
}
.nav_items { display: flex; align-items: stretch; height: 100%; }
.nav_logo {
  display: flex; align-items: center; gap: 8px;
  padding-right: 32px;
  padding-left: 32px;
  border-left: 0px solid var(--border);
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
}
.nav_logo-mark { width: 26px; height: 26px; object-fit: contain; }
.nav_icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px;
  border-left: 1px solid var(--border);
  color: var(--headings);
  transition: background-color 0.2s, color 0.2s;
}
.nav_icon svg { width: 18px; height: 18px; }
.nav_icon:hover { color: var(--orange-500); }
.nav_icon.is-active { background: color-mix(in srgb, var(--grey-500) 14%, transparent); color: var(--orange-500); }

.nav_menu-toggle { display: none; }
.nav_menu { display: none; }

/* ---------- buttons ---------- */
.button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 37px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey-900);
}
.button__inner {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  padding: 0 24px;
  background: var(--orange-500);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.button__inner + .button__inner {
  position: absolute; inset: 0;
  background: var(--grey-900); color: var(--grey-100);
  transform: translateY(100%);
}
.button:hover .button__inner:first-child { transform: translateY(-100%); }
.button:hover .button__inner + .button__inner { transform: translateY(0); }
[data-theme="dark"] .button:hover .button__inner + .button__inner { background: var(--grey-100); color: var(--grey-900); }

/* ---------- full-screen sections ---------- */
/* Every section up to (and including) the contact screen fills at least one
   full viewport, with the fixed nav overlaid on top of it (padding-top
   reserves its height so real content never sits underneath it).
   Each section's .container is stretched (flex:1) to the section's full
   height, and .frame — the single child that actually carries the vertical
   border lines — stretches to fill .container in turn. Because the frame
   always spans the section's ENTIRE height (never just the height of its
   centered content), and sections sit flush against each other with no
   gaps, the border-left/border-right run as one unbroken line from the very
   top of the page to the very bottom — content still centers vertically
   inside the frame via its own justify-content. */
.section_hero,
.section_about,
.section_process,
.section_tasks,
.section_references {
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.section_hero > .container,
.section_about > .container,
.section_process > .container,
.section_tasks > .container,
.section_references > .container,
.section_cta > .container,
.footer > .container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
/* Nav clearance lives INSIDE the frame's border (as padding on the frame's
   content box), never as section-level padding — that way the frame's own
   border-left/border-right always starts at the section's true top edge,
   with zero gap to the section above, keeping the vertical lines unbroken. */
.section_hero .frame,
.section_about .frame,
.section_process .frame,
.section_tasks .frame,
.section_references .frame,
.section_cta .frame {
  padding-top: var(--nav-h);
}
/* Hero/services keeps its own bottom-anchored look (dark sections below stay
   centered and are sized to fit exactly one screen each). */
.section_hero .frame {
  justify-content: end;
  padding-bottom: 20vh;
}

/* ---------- hero + services (merged, one screen) ---------- */
.section_hero .pattern-container {
  height: 40vh;
  border-bottom: 1px solid var(--border);
}

/* ---------- flow pattern (dynamic vector field, hero) ---------- */
.flow-pattern { position: relative; overflow: hidden; }
.flow-pattern canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.section_hero .inner {
  padding: 28px 32px;
  border-bottom: 1px solid var(--border);
}
.hero_lead { max-width: 570px; margin-top: 16px; }
.hero_lead p { font-size: 16px; line-height: 1.25; color: var(--body); }

/* ---------- cards ---------- */
.card_wrap { padding: var(--pad-md) var(--pad-sm); height: 100%; display: flex; flex-direction: column; gap: var(--pad-sm); }
.card_info { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.card_illustration { height: 140px; position: relative; display: flex; align-items: center; justify-content: center; color: var(--orange-500); }
.card_illustration svg { width: 100%; height: 100%; overflow: visible; }

/* service cards (light, share the hero screen) */
.section_service-cards .content-grid { border-top: 0;  }
.section_service-cards .grid-col { border-bottom: 0; }
.section_service-cards .card_wrap { padding: 24px var(--pad-sm); gap: 16px; }
.section_service-cards .card_info { margin-top: 0; }

/* ---------- about (dark) ---------- */
.section_about .content-grid { border-top: 1px solid var(--border); }
/* grid-col's own border-bottom would double up with content-grid's border-
   bottom below (both landing on the same seam, since this grid is a single
   row) — zeroed here, restored at 991px once the cards stack and actually
   need dividers between them. */
.section_about .grid-col { border-bottom: 0; }
.section_about .card_wrap { gap: 0; }
.section_about p.text-sm { opacity: 0.7; }
/* Full-width graph strip under the cards, sharing the same side padding as
   the heading above it (32px, the section's standard inset). Its top edge
   relies on content-grid's own border-bottom as the seam (no border-top of
   its own, which would've doubled that line); its border-bottom closes the
   section, matching every other section's trailing border. */
.section_about .about-graph { padding: 24px 32px; border-bottom: 1px solid var(--border); }
.section_about .about-graph img { width: 100%; height: auto; display: block; }

/* ---------- references — single-item slider (light) ---------- */
/* Only one project shows at a time. .ref-slider clips at exactly the frame's
   inner edge (flush with the border-left/right lines), so as the track slides
   right, each slide visually exits — and disappears — right at those vertical
   lines, never spilling past them. */
.ref-slider { overflow: hidden; border-top: 1px solid var(--border); }
.ref-slider_track { display: flex; transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
@media (prefers-reduced-motion: reduce) {
  .ref-slider_track { transition: none; }
}
.ref-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ref-slide_img-wrap { height: 100%; display: flex; border-right: 1px solid var(--border); }
.ref-slide_img { flex: 1; }
.ref-slide_body { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.ref-slide_body .h1 { max-width: 480px; }
.ref-slide_desc { max-width: 480px; opacity: 0.75; }
.ref-meta { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); max-width: 480px; }
.ref-meta-item { display: flex; gap: 16px; align-items: baseline; }
.ref-meta-label { flex: 0 0 80px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ref-meta-item .text-sm { opacity: 0.8; }
.ref-slide_link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  color: var(--orange-500); font-size: 16px; transition: gap 0.2s;
}
.ref-slide_link svg { width: 16px; height: 16px; }
.ref-slide_link:hover { gap: 12px; }

/* ---------- references bottom bar: title tabs ---------- */
.ref-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ref-tab {
  text-align: left; padding: 18px 40px; background: none; border: 0; border-right: 1px solid var(--border);
  cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.ref-tab:last-child { border-right: 0; }
.ref-tab_index { color: var(--muted); }
.ref-tab_label {
  position: relative; font-size: 16px; color: var(--muted); width: fit-content;
  padding-bottom: 10px; transition: color 0.2s;
}
.ref-tab:hover .ref-tab_label { color: var(--headings); }
.ref-tab.is-active .ref-tab_label { color: var(--headings); }
/* Underline doubles as a progress bar: it grows from 0 to full width over
   the same duration as the slider's auto-advance timer (AUTO_MS in main.js,
   kept at 6s here to match), so it visibly "fills up" right as the next
   slide takes over. JS removes/re-adds .is-active (with a reflow in
   between) so the animation restarts from 0 every time, including a
   repeat click on the already-active tab. */
.ref-tab_label::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--orange-500);
}
.ref-tab.is-active .ref-tab_label::after { animation: ref-tab-progress 6s linear forwards; }
@keyframes ref-tab-progress {
  from { width: 0; }
  to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-tab.is-active .ref-tab_label::after { animation: none; width: 100%; }
}
/* Hovering the slider pauses the JS auto-advance timer (see main.js) — pause
   the progress-bar animation the same way so it doesn't finish and imply a
   slide change that isn't actually coming. */
.is-ref-paused .ref-tab.is-active .ref-tab_label::after { animation-play-state: paused; }

/* ---------- task list (dark) ---------- */
.heading_container { padding-bottom: 0; }
.heading_container .h2 { max-width: 896px; }
.heading_container p { max-width: 640px; margin-top: 16px; opacity: 0.8; }
.section_about .padding.head,
.section_tasks .padding.head,
.section_references .padding.head,
.section_cta .padding.head { padding: 40px 32px 24px; }
/* The team block is the only one short enough that the frame's own
   justify-content:center visibly centers it — so the heading's own 40px
   top padding on top of that centering offset made the gap above the
   heading bigger than the gap below the cards. Dropping it to 0 lets both
   sides come purely from the (equal) centering offset. */
.section_cta .padding.head { padding-top: 0; }
.feature-list { border-top: 1px solid var(--border); }
.feature-list_item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: var(--pad-md);
  padding: 28px var(--pad-sm);
  border-bottom: 1px solid var(--border);
}
.feature-list_left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pad-xs); }
.feature-list_description { opacity: 0.7; font-size: 16px; line-height: 1.25; }

/* ---------- CTA + footer share exactly one viewport ---------- */
:root { --footer-h: 279px; }
.section_cta {
  min-height: calc(100svh - var(--footer-h));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* The team block is short enough that the frame's justify-content:center
   leaves empty space below it — a border on the team-grid itself would float
   in that gap instead of sitting at the actual section/footer seam. The
   frame itself (which always spans the section's full height) carries the
   closing line instead, so it lands exactly above the footer regardless of
   content height. */
.section_cta .frame { border-bottom: 1px solid var(--border); }

/* team cards: each one is its own bordered card (not a shared-border grid
   column), inset by the same 32px the heading above uses, with a real gap
   between the two instead of a shared divider. */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 32px; }
.team-card { display: flex; border: 1px solid var(--border); }
.team-card_photo { flex: 0 0 38%; overflow: hidden; }
.team-card_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card_body { flex: 1; min-width: 0; padding: 28px var(--pad-sm); display: flex; flex-direction: column; gap: 10px; }
.team-card_role { color: var(--orange-500); letter-spacing: 0.06em; text-transform: uppercase; }
.team-card_desc { opacity: 0.75; }
.team-card_contact { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.team-card_contact a { display: flex; align-items: center; gap: 10px; transition: color 0.2s; }
.team-card_contact a svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.team-card_contact a:hover { color: var(--orange-500); }

/* ---------- footer (sized to --footer-h, see CTA above) ---------- */
.footer { background: var(--grey-800); color: var(--grey-200); min-height: var(--footer-h); box-sizing: border-box; display: flex; flex-direction: column; }
.footer .container { padding-top: 0; }
.footer .content-grid { border-top: 0; }

/* ---------- footer: light technical-drawing-sheet touches ---------- */
/* Corner registration marks and a ruler strip — the small vocabulary of a
   drafting title block, layered onto the footer's existing frame without
   changing its actual structure. */
.footer .frame { position: relative; }
.tech-corner { position: absolute; width: 10px; height: 10px; pointer-events: none; }
.tech-corner_tl { top: -1px; left: -1px; border-top: 2px solid var(--border); border-left: 2px solid var(--border); }
.tech-corner_tr { top: -1px; right: -1px; border-top: 2px solid var(--border); border-right: 2px solid var(--border); }
.tech-corner_bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--border); border-left: 2px solid var(--border); }
.tech-corner_br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--border); border-right: 2px solid var(--border); }
.tech-ruler { display: flex; border-bottom: 1px solid var(--border); }
.tech-ruler span {
  flex: 1; padding: 4px 0 4px 8px; border-left: 1px solid var(--border);
  font-size: 9px; letter-spacing: 0.05em; color: var(--muted); opacity: 0.7;
}
.tech-ruler span:first-child { border-left: 0; }
.footer-col { padding: 28px var(--pad-sm); display: flex; flex-direction: column; justify-content: start; gap: 18px; }
/* Logo mark stacked in normal flow, with the legal text below it (never
   overlapping it) and the whole stack centered in the column. */
.footer-col_brand { justify-content: center; gap: 16px; }
.footer-col_mark { width: 90px; height: 90px; opacity: 0.6; }
.footer-col_legal { display: flex; flex-direction: column; gap: 6px; }
.footer-logo { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--grey-100); }
.footer-col_head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.footer-col_head .label { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey-100); }
.footer-col_head .eyebrow_bracket { color: var(--grey-100); }
.footer-link-list { display: flex; flex-direction: column; gap: 10px; }
.footer-link { transition: color 0.2s; }
.footer-link:hover { color: var(--orange-500); }
.footer-socials { display: flex; margin-top: 8px; }
.social-icon { width: 32px; height: 32px; border: 1px solid var(--grey-700); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; }
/* Icons sit flush against each other — each one keeps its own border except
   the left edge, which would otherwise double up with the icon before it. */
.social-icon:not(:first-child) { border-left: 0; }
/* Full border shorthand (not just border-color) so hovering an icon also
   restores its left edge's width — the touching icons (2nd/3rd) have that
   edge collapsed to 0 normally, and this pops the hovered one out as a
   complete 4-sided box regardless of its position in the row. */
.social-icon:hover { border: 1px solid var(--orange-500); color: var(--orange-500); z-index: 1; }
.social-icon svg { width: 16px; height: 16px; }
/* The main footer grid is a single row, so its grid-col's border-bottom
   would double up with content-grid's own bottom border — zeroed here,
   restored at 991px once it stacks and needs dividers between the blocks. */
.footer .content-grid .grid-col { border-bottom: 0; }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .h-display { font-size: 72px; }
  .nav_icon { width: 48px; }
}

@media (max-width: 991px) {
  .section_about .content-grid { --cols: 1 !important; }
  .section_about .grid-col:not(:last-child) { border-bottom: 1px solid var(--border); }
  /* Single column now — every card is the rightmost (and only) one in its
     own row, so none of them should keep the border-right that doubles up
     with the frame's own border-right. */
  .section_about .grid-col { border-right: 0; }
  .ref-slide { grid-template-columns: 1fr; }
  .ref-slide_img-wrap { height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .ref-slide_img { flex: none; width: 100%; aspect-ratio: 16 / 10; }
  .section_service-cards .content-grid { --cols: 2 !important; }
  .section_service-cards .grid-col:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  /* Two columns now — the RIGHT card of each row (2nd and 4th) is the one
     touching the frame's border-right, not just the very last card. */
  .section_service-cards .grid-col:nth-child(2n) { border-right: 0; }
  .feature-list_item { grid-template-columns: 1fr; row-gap: 20px; }
  .team-grid { grid-template-columns: 1fr; }
  .footer .content-grid { --cols: 1 !important; }
  .footer .content-grid .grid-col:not(:last-child) { border-bottom: 1px solid var(--border); }
  /* Single column now — every cell is the rightmost in its row, so none
     should keep the border-right that doubles with the frame's own. */
  .footer .grid-col { border-right: 0; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --pad-md: 32px; --pad-sm: 16px; --nav-h: 56px; }
  .section_about .about-graph { padding: 16px; }
  .h-display { font-size: 56px; }
  .h1 { font-size: 35px; }
  .h2 { font-size: 32px; }
  .h4 { font-size: 26px; }
  .nav_items { display: none; }
  .nav_logo { padding-right: 0; }
  .nav_menu-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 16px; background: none; border: 0; border-left: 1px solid var(--border);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
  }
  .nav_menu {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .nav.is-open .nav_menu { max-height: 380px; }
  .nav_menu a { display: block; padding: 16px; border-top: 1px solid var(--border); font-size: 24px; letter-spacing: -0.02em; text-transform: uppercase; }
  .section_hero .pattern-container { height: 96px; }
  .section_hero .inner { padding: var(--pad-md) var(--pad-sm); }
  .section_service-cards .content-grid { --cols: 1 !important; }
  .section_service-cards .grid-col:not(:last-child) { border-bottom: 1px solid var(--border) !important; }
  /* Single column again at this width — every card is the rightmost (and
     only) one in its row. */
  .section_service-cards .grid-col { border-right: 0; }
  .card_wrap { padding: var(--pad-md) var(--pad-sm); }
  .feature-list_item { padding: var(--pad-md) var(--pad-sm); }
  .team-card { flex-direction: column; }
  .team-card_photo { flex: 0 0 220px; border-bottom: 1px solid var(--border); }
  .ref-slide_body { padding: var(--pad-sm) var(--pad-sm); }
  .ref-tabs { grid-template-columns: repeat(2, 1fr); }
  .ref-tab { padding: 16px var(--pad-sm); }
  .ref-tab:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  /* Two columns now — the right tab of each row (2nd and 4th) touches the
     frame's border-right, not just the very last tab. */
  .ref-tab:nth-child(2n) { border-right: 0; }
  :root { --footer-h: 620px; }
  .section_hero, .section_service-cards, .section_about, .section_process, .section_tasks, .section_references { min-height: 100svh; }
}