/* IQ Corporation — shared site styles (every page loads this). */

/* ---------- Reset: browsers add their own page margin (8px) by default ---------- */
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }

/* Dark-only design, painted explicitly. Brand red from the IQC logo. */
:root {
  color-scheme: dark;
  --panel: #0c0d0f;        /* hero panel, menu, contact */
  --ground: #1f2124;       /* page background */
  --band: #e6e8e4;         /* light tagline band */
  --band-ink: #15171a;
  --ink: #eceef0;
  --ink-soft: #bcc0c6;
  --ink-faint: #8b9098;
  --rule: #4a4e54;
  --control: rgba(255, 255, 255, 0.28);
  --red: #ed1c24;
  --red-btn: #d4161d;
  --red-text: #ff5a5f;
  --steel: #8f989f;
  /* Logo is as wide as it can be while staying inside the left half of the screen. */
  --gutter: 24px;
  --logo-w: calc(50vw - 2 * var(--gutter));
  --logo-h: calc(var(--logo-w) * 72.1 / 352.6);   /* logo's own proportions */
  --header-pad: 14px;
  --header-h: calc(var(--logo-h) + 2 * var(--header-pad));   /* header height at the top of the page */
  --header-compact: 64px;                                     /* header height after scrolling */
  /* Content width on large screens: 60% of the screen width, never narrower than 1088px. */
  --content: max(1088px, 60vw);
  --reading: clamp(620px, 42vw, 800px);    /* single reading column (About text) */
  --measure: clamp(44rem, 40vw, 52rem);    /* section intros: heading + lead paragraph */

  --display: "Manrope", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --utility: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-compact) + 8px); }

/* shared pieces */
.kicker {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  font-family: var(--utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
}
.kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px;
  padding-inline: 22px;
  border-radius: 2px;
  font-family: var(--utility);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--red-btn); color: #fff; border: 0; }
.btn-primary:hover { background: var(--red); }
.btn-ghost { border: 1px solid var(--control); color: var(--ink); background: none; }
.btn-ghost:hover { border-color: var(--ink-soft); }
.text-link {
  font-family: var(--utility);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.text-link:hover { color: var(--red-text); }

/* ---------- Header: clear at the top, solid after scrolling ---------- */
.site-header {
  --logo-now: var(--logo-h);   /* current logo height; the menu button scales from it */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header::before {
  content: "";
  position: absolute; inset: 0 0 -24px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(12, 13, 15, 0.55), rgba(12, 13, 15, 0));
  transition: opacity 0.3s ease;
}
.site-header.solid { background-color: var(--panel); border-bottom-color: rgba(255, 255, 255, 0.08); }
.site-header.solid::before, .site-header.menu::before { opacity: 0; }
.site-header.menu { background-color: transparent; border-bottom-color: transparent; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: var(--header-pad);
  padding-inline: var(--gutter);
  transition: padding 0.3s ease;
}
.logo img {
  display: block;
  height: var(--logo-now);
  width: auto;
  transition: height 0.3s ease;
}
/* shrinks to a compact bar once the page scrolls (never larger than at the top) */
.site-header.solid .header-inner { padding-block: 12px; }
.site-header.solid { --logo-now: min(var(--logo-h), 40px); }
.header-actions { display: flex; align-items: center; gap: 18px; }
/* The menu button is sized from the logo's current height, so the two grow and
   shrink together. At and above the 1440px-screen logo it keeps the exact same
   proportions (the first term in each max()); below that it shrinks more gently
   (the second term) so MENU stays readable on phones. Both terms meet at the
   1440px size: word 14.4px, icon 32px, gap 12px. */
.menu-btn {
  --icon: max(22px, calc(var(--logo-now) * 0.435), calc(17.39px + var(--logo-now) * 0.1985));
  display: inline-flex; align-items: center;
  gap: max(8px, calc(var(--logo-now) * 0.163), calc(6.52px + var(--logo-now) * 0.0744));
  min-height: 44px;   /* comfortable tap target at every size */
  padding-inline: 14px 4px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--utility);
  font-size: max(11px, calc(var(--logo-now) * 0.196), calc(10.02px + var(--logo-now) * 0.0596));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: font-size 0.3s ease, gap 0.3s ease;
}
.menu-btn svg {
  width: var(--icon);
  height: var(--icon);
  transition: width 0.3s ease, height 0.3s ease;
}
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Full-screen split menu ---------- */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 20;
  background: #121418;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  padding-block: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 40px) 48px;
  padding-inline: clamp(16px, 7vw, 120px);
  gap: 48px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.menu-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.menu-links { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.menu-links a {
  width: fit-content;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}
.menu-links a:hover, .menu-links a[aria-current="page"] { border-bottom-color: var(--red); }
.menu-contact {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  font-family: var(--utility);
  font-size: clamp(1.05rem, 1.9vw, 1.75rem);   /* grows with the screen, like the page links */
  line-height: 1.45;
}
.menu-contact .contact-block { padding-block: clamp(16px, 2.2vw, 30px); }
.menu-contact .contact-label { font-size: clamp(0.72rem, 0.85vw, 0.95rem); margin-bottom: 0.5em; }
.contact-block { padding-block: 18px; border-bottom: 1px solid var(--rule); }
.contact-block:last-child { border-bottom: 0; }
.contact-label {
  display: block;
  font-family: var(--utility);
  margin-bottom: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
}
.contact-block a { text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header::before, .menu-overlay, .menu-overlay.open, .header-inner, .logo img,
  .menu-btn, .menu-btn svg { transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100svh;   /* fills the screen, accounting for phone browser bars */
}
.panel {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding-block: calc(var(--header-h) + 56px) 72px;
  padding-inline: 32px;
}
.panel .kicker::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.headline {
  margin: 0;
  max-width: 11ch;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 1;
  text-wrap: balance;
  color: var(--ink);
}
.dek {
  margin: 0;
  max-width: 28rem;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

.media {
  position: relative;
  overflow: hidden;
  background: var(--steel);
}
.media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.media video.active { opacity: 1; }
.media video.top { z-index: 1; }   /* the incoming clip fades in above the outgoing one */

/* Opening video while it loads: a tiny blurred preview of the first clip's first frame
   (built into this file, so it shows with the first paint), then that frame's full
   thumbnail on top once it arrives. reel.js fades the video in over it only when it is
   actually playing. If you change the first clip in reel.js, regenerate these three. */
#reel {
  --reel-preview: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage width='32' height='18' preserveAspectRatio='none' filter='url(%23b)' href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAASACADASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABQYAA//EAC4QAAICAQIDBgQHAAAAAAAAAAECAwQRAAUGITESIiNBUYEHExWRFBYyQmFicf/EABcBAAMBAAAAAAAAAAAAAAAAAAACAwH/xAAaEQADAQEBAQAAAAAAAAAAAAAAAQIRMVEi/9oADAMBAAIRAxEAPwAqhRfadsSsUZZXURrkEZZuXn/p1WbO8207ld3S9L4VKkBHEG7iADJx/PdxnQm+cRTTFWjmgkSRe7XZuyy48znHto/6g77FYoK81SaeQduwSZAASO1zHPoMaHNOl4bNSpfpVJbl2f4VQ2mge1Z3OwLE0YySwZ+0en9VA99F/Vqtilue4wVvwT3HipRryDdlMu55dOuPbXbc+IJ4rdBdpWvZq1YHRlZz1wAD0yOS+nroLcq16vtVG5aVDDL8x2dGz4rtkj7dNLn3rXBtycTJ2cmW74hL4C/q5+Wqn4cMfzZHDk/KYEMn7TyPUa2tq09ILhRcW1a9a0XgrxRMYzkogUnkfTQfFXPhKup5gMDj762toYx//9k='/%3E%3C/svg%3E");
  isolation: isolate;
  background: url("../video/biscuit-line-1-poster.jpg") center / cover no-repeat,
              var(--reel-preview) center / cover no-repeat,
              var(--panel);
}
@media (max-width: 740px), (max-height: 500px) {
  #reel { background-image: url("../video/mobile/biscuit-line-1-poster.jpg"), var(--reel-preview); }
}

/* ---------- Tagline band ---------- */
.tagline {
  background: var(--band);
  color: var(--band-ink);
  padding-block: 72px;
  padding-inline: 16px;
  text-align: center;
}
.tagline p {
  margin: 0 auto;
  max-width: 16ch;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.12;
  text-wrap: balance;
}
.tagline p span { color: var(--red-btn); }

/* ---------- About reading column ---------- */
.column {
  max-width: var(--reading);
  margin-inline: auto;
  padding-inline: 16px;
  box-sizing: content-box;
}
.column.wide { max-width: var(--content); }   /* home page About block: same width as the sections around it */
.about { padding-block: 88px; }   /* same spacing as the other sections, equal top and bottom */
.about > :last-child, .about > .prose:last-child > :last-child { margin-bottom: 0; }   /* no extra space under the last item */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--utility);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.pill {
  height: 32px;
  display: inline-flex; align-items: center; gap: 6px;
  padding-inline: 14px;
  border: 1px solid var(--control);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.72rem;
}
.pill:hover { border-color: var(--ink-soft); }
.pill svg { width: 14px; height: 14px; }
.credit {
  display: grid;
  gap: 4px;
  padding-block: 16px 28px;
  font-family: var(--utility);
  font-size: 0.8rem;
  line-height: 1.5;
}
.credit strong { font-weight: 700; }
.credit span { color: var(--ink-soft); }
.prose p { margin: 0 0 1.1em; font-size: 1.2rem; line-height: 1.62; }
.prose p.lede { font-size: 1.32rem; line-height: 1.5; }

/* ---------- Crew-in-tire section ---------- */
.crew {
  display: grid;
  gap: 42vh;
  padding-block: 96px;
  padding-inline: clamp(16px, 5vw, 80px);
  background-color: var(--panel);
  background-image: url("../images/crew-in-tire.jpg");
  background-size: cover;
  background-position: 35% center;
  background-attachment: fixed;   /* photo holds still while the page scrolls */
}
@media (hover: none) { .crew { background-attachment: scroll; } }

/* ---------- Accent bands: full-width photo that holds still while the page scrolls past
   (same treatment as the team photo). Phones load the smaller file. ---------- */
.accent {
  height: clamp(240px, 42vh, 520px);
  background-color: var(--panel);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (hover: none) { .accent { background-attachment: scroll; } }
.hero--text + .accent { margin-top: 88px; }   /* same gap under a page title as before a section */
@media (max-width: 740px) { .hero--text + .accent { margin-top: 64px; } }
.accent--control-room { background-image: url("../images/stock/control-room-sm.jpg"); }
.accent--hmi-engineer { background-image: url("../images/stock/hmi-engineer-sm.jpg"); }
.accent--hmi-enclosure { background-image: url("../images/stock/hmi-enclosure-sm.jpg"); }
.accent--plc-hardware { background-image: url("../images/stock/plc-hardware-sm.jpg"); }
.accent--scada-engineer { background-image: url("../images/stock/scada-engineer-sm.jpg"); }
.accent--control-cabinet { background-image: url("../images/stock/control-cabinet-sm.jpg"); }
.accent--electrician-wiring { background-image: url("../images/stock/electrician-wiring-sm.jpg"); }
.accent--wiring-outlet { background-image: url("../images/stock/wiring-outlet-sm.jpg"); }
.accent--cable-crimp { background-image: url("../images/stock/cable-crimp-sm.jpg"); }
.accent--building { background-image: url("../images/building-hdr-sm.jpg"); }
@media (min-width: 900px) {
  .accent--control-room { background-image: url("../images/stock/control-room-lg.jpg"); }
  .accent--hmi-engineer { background-image: url("../images/stock/hmi-engineer-lg.jpg"); }
  .accent--hmi-enclosure { background-image: url("../images/stock/hmi-enclosure-lg.jpg"); }
  .accent--plc-hardware { background-image: url("../images/stock/plc-hardware-lg.jpg"); }
  .accent--scada-engineer { background-image: url("../images/stock/scada-engineer-lg.jpg"); }
  .accent--control-cabinet { background-image: url("../images/stock/control-cabinet-lg.jpg"); }
  .accent--electrician-wiring { background-image: url("../images/stock/electrician-wiring-lg.jpg"); }
  .accent--wiring-outlet { background-image: url("../images/stock/wiring-outlet-lg.jpg"); }
  .accent--cable-crimp { background-image: url("../images/stock/cable-crimp-lg.jpg"); }
  .accent--building { background-image: url("../images/building-hdr-lg.jpg"); }
}
.glass {
  background: rgba(12, 13, 15, 0.86);
  border-top: 3px solid var(--red);
  padding-block: 32px 36px;
  padding-inline: 36px;
}
.team {
  justify-self: end;
  width: min(100%, 26rem);
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  /* on wide screens (over ~1680px) move in from the edge a little, growing with the width,
     while staying clear of the faces in the photo behind it */
  margin-right: max(0px, calc(20vw - 336px));
}
.team h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.1;
}
.team-stats {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--rule);
}
.team-stats li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--utility);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.team-stats b {
  font-family: var(--utility);
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.team-stats .big {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.expertise {
  max-width: calc(var(--content) * 0.9);
  width: 100%;
  box-sizing: border-box;
  justify-self: center;
}
.expertise h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1.9rem, 2.8vw, 2.4rem);
}
.expertise-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.expertise-cols p { margin: 0; font-size: 1.08rem; line-height: 1.62; }
.pullquote {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 1.45rem;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/* ---------- Feature rows ---------- */
.feature {
  max-width: calc(var(--content) + 32px);   /* content plus 16px padding each side */
  margin-inline: auto;
  padding-block: 88px;
  padding-inline: 16px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}
.feature + .feature { border-top: 1px solid var(--rule); }
.feature.flip { grid-template-columns: 1fr 1.15fr; }
.feature.flip .feature-media { order: 2; }
.feature-text { display: grid; gap: 20px; justify-items: start; }
.feature-text h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  line-height: 1.28;
  text-wrap: balance;
}
.feature-media { margin: 0; }
.feature-media video, .feature-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #2c3035;
}
.screen {
  padding: 8px;
  background: #0e0f11;
  border: 1px solid var(--rule);
}
.feature-media figcaption {
  margin-top: 10px;
  font-family: var(--utility);
  font-size: 0.74rem;
  color: var(--ink-faint);
}

/* services grid */
.services {
  max-width: calc(var(--content) + 32px);   /* content plus 16px padding each side */
  margin-inline: auto;
  padding-block: 0;   /* the next section's own top padding gives the same gap as above the grid */
  padding-inline: 16px;
}
.service-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
.service-grid li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-block: 24px 28px;
  padding-inline: 20px;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.service-grid li:nth-child(4n) { border-right: 0; }
.service-grid h3 {
  margin: 0;
  font-family: var(--utility);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-text);
}
.service-grid p { margin: 0; font-size: 1.02rem; line-height: 1.5; }

/* ---------- Contact + partners ---------- */
.contact {
  background: var(--panel);
  padding-block: 88px 40px;
  padding-inline: 16px;
}
.contact-inner {
  max-width: var(--content);   /* same content width as .section/.feature */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 6vw, 80px);
}
.contact h2 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.1;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  font-family: var(--utility);
  font-size: 0.95rem;
  line-height: 1.55;
}
.contact-grid .contact-block:nth-last-child(-n+2) { border-bottom: 0; }
.contact-grid .btn { margin-top: 12px; }
.contact-grid .text-link { display: inline-block; margin-top: 8px; font-size: 0.7rem; }
.partners { display: grid; align-content: start; gap: 20px; }
.partners .contact-label { margin: 0; }
.partner-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.partner-badges .rockwell { width: 200px; max-width: 100%; height: auto; }
.partner-badges .shield { width: 72px; height: auto; }
/* the Control and Visualization shields wrap as one unit, never split across lines */
.shield-pair { display: flex; align-items: center; gap: 16px; }

.logo-strip {
  max-width: var(--content);
  margin: 64px auto 0;
  padding-block: 28px;
  border-block: 1px solid var(--rule);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: slide 60s linear infinite;   /* ~same scroll speed now that the strip holds 10 logos */
  will-change: transform;                 /* keep it on the graphics layer so busy pages don't make it stutter */
}
/* Contact page has no "Consult with the experts" block, so the strip starts near the top of the band */
.contact.no-consult { padding-top: 40px; }
.contact.no-consult .logo-strip { margin-top: 0; }
/* Pause on hover, but only where hover is a real pointer hover — on touch
   screens :hover sticks after a tap and would freeze the strip. */
@media (hover: hover) {
  .logo-strip:hover .logo-track { animation-play-state: paused; }
}
.logo-track .brand {
  flex: none;
  opacity: 0.72;
  /* space after every logo, including the last, so both copies are exactly the same
     width and sliding by half the strip lands precisely on the second copy (no jump) */
  margin-right: 72px;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-strip { -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 32px 44px; }   /* one row even at the narrowest content width */
  .logo-track [aria-hidden="true"] { display: none; }
  .logo-track .brand { margin-right: 0; }
}

.site-footer {
  max-width: var(--content);
  margin-inline: auto;
  padding-block: 28px 8px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  font-family: var(--utility);
  font-size: 0.74rem;
  color: var(--ink-faint);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid li:nth-child(4n) { border-right: 1px solid var(--rule); }
  .service-grid li:nth-child(2n) { border-right: 0; }
  .contact-inner { grid-template-columns: 1fr; }
  .feature, .feature.flip { grid-template-columns: 1fr; }
  .feature.flip .feature-media { order: 0; }
}

/* Wide screens (50/50 split): smaller logo — about half the text panel, capped. */
@media (orientation: landscape) {
  :root { --logo-w: min(25vw, 420px); }
}

/* ---------- Opening, portrait screens ----------
   The 50/50 split only applies when the screen is wider than it is tall.
   Portrait (and square) screens stack: video fills the screen with the
   headline over it, and the tagline + buttons follow below. */
@media (orientation: portrait) {
  .hero { grid-template-columns: 1fr; grid-template-rows: 100vh; grid-template-rows: 100svh; min-height: 0; }
  .panel { display: contents; }
  .media { grid-row: 1; grid-column: 1; max-width: 100%; }
  .panel .kicker { display: none; }
  .headline {
    grid-row: 1; grid-column: 1;
    align-self: start;
    z-index: 2;
    max-width: none;
    padding-block: calc(var(--header-h) + 24px) 56px;
    padding-inline: 16px;
    text-align: center;
    font-size: clamp(2.2rem, 9vw, 4.5rem);
    background: linear-gradient(rgba(12, 13, 15, 0.72), rgba(12, 13, 15, 0));
  }
  .dek, .hero-actions {
    grid-column: 1;
    justify-self: center;
    width: 100%;
    max-width: 620px;
    box-sizing: border-box;
    padding-inline: 16px;
  }
  .dek { grid-row: 2; padding-block: 24px 0; text-align: left; color: var(--ink); }
  .hero-actions { grid-row: 3; justify-content: flex-start; margin: 0; padding-block: 20px 24px; }
  /* Home hero on phones: headline moves below the full-bleed video, centered,
     with the tagline instead of overlaying the footage. Inner pages
     (hero--page / hero--text) keep their overlaid titles. */
  .hero:not(.hero--page):not(.hero--text) .headline {
    grid-row: 2;
    justify-self: center;
    width: 100%;
    max-width: 620px;
    box-sizing: border-box;
    padding: 32px 16px 0;
    text-align: center;
    background: none;
  }
  .hero:not(.hero--page):not(.hero--text) .dek { grid-row: 3; text-align: center; }
  .hero:not(.hero--page):not(.hero--text) .hero-actions { grid-row: 4; justify-content: center; }
}

/* ---------- Phone ---------- */
@media (max-width: 740px) {
  :root { --gutter: 16px; --header-pad: 12px;
    /* Bigger banner logo: takes everything left of the menu button. The 150px
       reservation (flex gap + MENU button, which is ~110px wide at these
       sizes) guarantees a clearance margin, so they can never touch or clip. */
    --logo-w: min(calc(100vw - 2 * var(--gutter) - 150px), 340px); }
  .site-header.solid { --logo-now: min(var(--logo-h), 30px); }

  .menu-overlay { grid-template-columns: 1fr; align-content: start; gap: 24px; }
  .menu-links a { font-size: 2.2rem; }

  .tagline { padding-block: 56px; }

  .crew { display: block; padding: 0; background: var(--panel); }
  .crew::before {
    content: "";
    display: block;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    background: url("../images/crew-in-tire.jpg") 38% center / cover no-repeat;
  }
  .glass { padding-inline: 16px; background: var(--panel); }
  .team { width: 100%; }
  .expertise { border-top: 1px solid var(--rule); }
  .expertise-cols { grid-template-columns: 1fr; gap: 1em; }

  .feature { padding-block: 64px; }
  .about { padding-block: 64px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid li, .service-grid li:nth-child(n) { border-right: 0; padding-inline: 0; }
  .contact { padding-block: 64px 32px; }
  .contact.no-consult { padding-top: 32px; }   /* matches the band's bottom padding on phones */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .contact-block:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}


/* =====================================================================
   Inner pages (Services, Portfolio, About, Contact, Forms)
   ===================================================================== */

/* ---------- Page opening: same split as the home page, shorter ---------- */
.hero--page { min-height: min(72vh, 760px); }
.hero--page.hero--short { min-height: min(56vh, 600px); }   /* lower photo opening (Contact) */
.hero--page .headline { max-width: 14ch; font-size: clamp(2.3rem, 4vw, 3.6rem); }
.media img.media-fill {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.media video.media-fill { opacity: 1; }
.media img.media-fill { object-position: var(--pos, center); }
@media (orientation: portrait) { .media img.media-fill { object-position: var(--pos-phone, var(--pos, center)); } }
@media (orientation: portrait) {
  .hero--page { grid-template-rows: 64vh; grid-template-rows: 64svh; }
  .hero--page.hero--short { grid-template-rows: 48vh; grid-template-rows: 48svh; }
  .hero--page .headline {
    font-size: clamp(2.1rem, 8vw, 3.8rem);
    max-width: none;   /* fade spans the full width of the photo */
    /* photos on inner pages can be bright: a stronger fade keeps the title readable */
    background: linear-gradient(rgba(12, 13, 15, 0.88), rgba(12, 13, 15, 0.45) 75%, rgba(12, 13, 15, 0));
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
  }
}

/* ---------- Generic section + heading ---------- */
.section {
  max-width: calc(var(--content) + 32px);   /* content plus 16px padding each side */
  margin-inline: auto;
  padding-block: 88px;
  padding-inline: 16px;
}
.section + .section { border-top: 1px solid var(--rule); }
.section--panel { max-width: none; background: var(--panel); }
.section--panel > * { max-width: var(--content); margin-inline: auto; }
/* heading block sits on the same left edge as the rest; its text keeps a readable width */
.section--panel .section-head { max-width: var(--content); }
.section--panel .section-head > * { max-width: var(--measure); }
.section-head {
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: var(--measure);
  margin-bottom: 40px;
}
.section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.1;
  text-wrap: balance;
}
.section-head p:not(.kicker) { margin: 0; font-size: 1.12rem; line-height: 1.55; color: var(--ink-soft); }

/* ---------- Three-up columns (services pillars, repair/replace/upgrade) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}
.pillar { display: grid; align-content: start; gap: 14px; padding-top: 22px; border-top: 3px solid var(--red); }
.pillar h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.45rem;
  line-height: 1.2;
}
.pillar p:not(.kicker) { margin: 0; font-size: 1.05rem; line-height: 1.62; }
.pillar p + p { margin-top: -2px; }

/* three-column variant of the home page services grid */
.service-grid--3 { grid-template-columns: repeat(3, 1fr); }
.service-grid--3 li:nth-child(n) { border-right: 1px solid var(--rule); padding-left: 20px; }
.service-grid--3 li:nth-child(3n) { border-right: 0; }

/* ---------- HMI screen vs. actual equipment ---------- */
.compare { display: grid; gap: 28px; }
.compare-head, .compare-row {
  display: grid;
  grid-template-columns: 9rem 1fr 1fr;
  gap: 20px;
  align-items: center;
}
.compare-head {
  font-family: var(--utility);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.compare-row h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
}
.compare-row figure { margin: 0; }
.compare-row img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 458 / 268;
  object-fit: cover;
  background: #2c3035;
}
.compare-row figcaption { display: none; }

/* ---------- Upgrade paths (old → new) ---------- */
.upgrade-paths { margin-top: 48px; }
.upgrade-paths h3 {
  margin: 0 0 12px;
  font-family: var(--utility); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-text);
}
.migrations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  border-top: 1px solid var(--rule);
  font-family: var(--utility);
  font-size: 0.86rem;
  line-height: 1.4;
}
.migrations li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  padding-block: 9px;
  border-bottom: 1px solid var(--rule);
}
.migrations li span:nth-child(2) { color: var(--red-text); }
.migrations li span:last-child { color: var(--ink); font-weight: 600; }
.migrations li span:first-child { color: var(--ink-soft); }

/* ---------- Industry applications (expandable) ---------- */
.industries { border-top: 1px solid var(--rule); }
.industry { border-bottom: 1px solid var(--rule); }
.industry summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 24px;
  padding-block: 24px;
}
.industry summary::-webkit-details-marker { display: none; }
.industry summary h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}
.industry summary p { grid-column: 1; margin: 0; font-size: 1rem; color: var(--ink-soft); }
.industry summary::after {
  content: "";
  grid-column: 2; grid-row: 1 / span 2;
  width: 14px; height: 14px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-4px);
  transition: transform 0.2s ease;
}
.industry[open] summary::after { transform: rotate(-135deg) translateY(-4px); }
.industry summary:hover h3 { color: var(--red-text); }
.industry-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px 48px;
  padding-bottom: 36px;
}
.industry-body p { margin: 0 0 1em; font-size: 1.05rem; line-height: 1.62; }
.industry-body h4 {
  margin: 0 0 10px;
  font-family: var(--utility);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
}
.tick-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--utility);
  font-size: 0.88rem;
  line-height: 1.45;
  columns: 2;
  column-gap: 24px;
}
.tick-list li { break-inside: avoid; padding-block: 5px; padding-left: 16px; position: relative; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 7px; height: 1px; background: var(--red-text);
}
.tick-list--one { columns: 1; }
.deliverables { margin-top: 40px; padding: 28px 32px; background: var(--panel); border-top: 3px solid var(--red); }
.deliverables h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 600; font-size: 1.35rem; }
.deliverables > p { margin: 0 0 18px; color: var(--ink-soft); }
.deliverables .tick-list { columns: 3; margin: 0; }

/* ---------- Portfolio: filterable photo gallery ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  height: 36px;
  padding-inline: 16px;
  border: 1px solid var(--control);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font-family: var(--utility);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.chip b { font-weight: 500; opacity: 0.6; margin-left: 4px; font-variant-numeric: tabular-nums; }
.gallery {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
.gallery li[hidden] { display: none; }
.gallery button {
  display: grid; gap: 10px;
  width: 100%;
  padding: 0;
  background: none; border: 0; cursor: zoom-in;
  text-align: left;
}
.gallery img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: #2c3035;
  transition: filter 0.2s ease;
}
.gallery button:hover img { filter: brightness(1.12); }
.gallery .kicker::before { display: none; }
.gallery strong { font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.gallery span.desc { font-size: 0.98rem; line-height: 1.45; color: var(--ink-soft); }

/* lightbox */
.lightbox {
  width: min(1200px, 100% - 32px);
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  background: var(--panel);
  color: var(--ink);
}
.lightbox::backdrop { background: rgba(6, 7, 8, 0.88); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: 100%; height: auto; max-height: calc(100vh - 160px); object-fit: contain; background: #000; }
.lightbox figcaption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 16px 20px;
  font-family: var(--utility);
  font-size: 0.9rem;
}
.lightbox figcaption strong { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin-right: 10px; }
.lightbox figcaption span { color: var(--ink-soft); }
.lightbox-nav { display: flex; gap: 8px; }
.lightbox-nav button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--control); border-radius: 50%;
  background: none; cursor: pointer;
}
.lightbox-nav button:hover { border-color: var(--ink-soft); }
.lightbox-nav svg { width: 16px; height: 16px; }

/* ---------- About: stats + photos ---------- */
.stats {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--rule);
}
.stats li { display: grid; align-content: start; gap: 8px; padding: 32px 28px; border-right: 1px solid var(--rule); }
.stats li:last-child { border-right: 0; }
.stats b {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats span { font-family: var(--utility); font-size: 0.86rem; color: var(--ink-soft); }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0 8px; }
.photo-pair figure { margin: 0; }
.photo-pair img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #2c3035; }
.photo-pair figcaption { margin-top: 8px; font-family: var(--utility); font-size: 0.74rem; color: var(--ink-faint); }

/* ---------- Contact page ---------- */
.contact-page { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.office-card { font-family: var(--utility); font-size: 0.98rem; line-height: 1.6; }
.office-card h2 {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}
.office-card .btn { margin-top: 18px; }
.office-card .contact-block:last-of-type { border-bottom: 0; }
.message-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 32px; background: var(--panel); border-top: 3px solid var(--red); }
.message-form h2 { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.6rem; }
.message-form > p { grid-column: 1 / -1; margin: -8px 0 4px; color: var(--ink-soft); font-size: 1rem; }
.field { display: grid; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--utility); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.field input, .field textarea, .field select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: 1rem/1.4 var(--utility);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-note { font-family: var(--utility); font-size: 0.8rem; color: var(--ink-faint); }
.form-status { grid-column: 1 / -1; margin: 0; font-family: var(--utility); font-size: 0.88rem; color: var(--ink); }
.form-status:empty { display: none; }

/* ---------- Forms page ---------- */
.doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.doc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 24px;
  padding-block: 24px;
  border-bottom: 1px solid var(--rule);
}
.doc-icon {
  width: 48px; height: 60px;
  display: grid; place-items: end center;
  padding-bottom: 8px; box-sizing: border-box;
  background: var(--ink); color: var(--panel);
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
  font-family: var(--utility); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
}
.doc h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: 1.25rem; }
.doc p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.doc-meta { font-family: var(--utility); font-size: 0.74rem; color: var(--ink-faint); }
.doc-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Inner pages: tablet + phone ---------- */
@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr; gap: 40px; }
  .service-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .service-grid--3 li:nth-child(n) { border-right: 1px solid var(--rule); padding-left: 20px; }
  .service-grid--3 li:nth-child(2n) { border-right: 0; }
  .industry-body { grid-template-columns: 1fr; }
  .deliverables .tick-list { columns: 2; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li:nth-child(2) { border-right: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .contact-page { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
  .section { padding-block: 64px; }
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .compare-row h3 { grid-column: 1 / -1; }
  .compare-row figcaption {
    display: block; margin-top: 6px;
    font-family: var(--utility); font-size: 0.7rem; color: var(--ink-faint);
  }
  .service-grid--3 { grid-template-columns: 1fr; }
  .service-grid--3 li:nth-child(n) { border-right: 0; padding-inline: 0; }
  .tick-list, .deliverables .tick-list { columns: 1; }
  .deliverables { padding: 24px 16px; }
  .migrations { grid-template-columns: 1fr; }
  .migrations li { grid-template-columns: 1fr; gap: 2px; }
  .migrations li span:nth-child(2) { display: none; }
  .migrations li span:last-child::before { content: "→ "; color: var(--red-text); }
  .gallery { grid-template-columns: 1fr; }
  .stats li { padding: 24px 16px; }
  .message-form { grid-template-columns: 1fr; padding: 24px 16px; }
  .doc { grid-template-columns: auto 1fr; }
  .doc-actions { grid-column: 1 / -1; }
}
.doc-foot { margin-top: 20px; margin-bottom: 0; }

/* ---------- Page opening without a video or photo (Services) ---------- */
.hero--text { grid-template-columns: 1fr; min-height: 0; }
.hero--text .panel {
  background: transparent;   /* sits on the page background, no dark box */
  /* space under the header = space before the first section (that section's own 88px top padding) */
  padding-block: calc(max(var(--logo-h), 44px) + 2 * var(--header-pad) + 88px) 0;
  align-items: center;
  text-align: center;
}
.hero--text .headline, .hero--text .dek { max-width: 18ch; margin-inline: auto; text-align: center; }
.hero--text .dek { max-width: 34rem; }
@media (orientation: portrait) {
  .hero--text { grid-template-rows: auto; }
  .hero--text .panel { display: flex; padding-inline: 16px; }
  .hero--text .panel .kicker { display: flex; }
  .hero--text .headline { padding: 0; background: none; max-width: 14ch; }
  .hero--text .dek, .hero--text .hero-actions { width: auto; padding: 0; }
  .hero--text .dek { text-align: center; color: var(--ink-soft); }
  .hero--text .hero-actions { justify-content: center; }
}

/* ---------- Phones: stand-alone buttons (and the opening line) sit centered ---------- */
@media (max-width: 740px) {
  .dek { text-align: center; }
  .hero-actions, .doc-actions { justify-content: center; }
  .form-actions { justify-content: center; text-align: center; }
  .contact-grid .btn, .office-card .btn { display: flex; width: fit-content; margin-inline: auto; }
  .hero--text .panel { padding-block: calc(max(var(--logo-h), 44px) + 2 * var(--header-pad) + 64px) 0; }
}