/* ==========================================================================
   ultiMAC Clean — brand stylesheet
   Navy #0B1D3A · Teal #0097A7 · White #FFFFFF · Montserrat
   ========================================================================== */

:root {
  --navy: #0b1d3a;
  --navy-700: #12294d;
  --navy-600: #1b3a63;
  --teal: #0097a7;
  --teal-dark: #007d8a;
  --teal-light: #e6f6f8;
  --white: #ffffff;
  --ink: #1d2b3e;
  --body: #56637a;
  --line: #e3e8ef;
  --surface: #f5f8fa;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 3px rgba(11, 29, 58, 0.07);
  --shadow: 0 8px 30px rgba(11, 29, 58, 0.09);
  --shadow-lg: 0 20px 50px rgba(11, 29, 58, 0.16);

  --wrap: 1180px;
  --gutter: 24px;
  --header-h: 78px;
}

/* --------------------------------------------------------------- reset -- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
  margin: 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--teal);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------- layout -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding: clamp(56px, 8vw, 92px) 0; }
.section--tint { background: var(--surface); }
.section--navy { background: var(--navy); color: #c3cfe0; }
.section--navy h2, .section--navy h3 { color: #fff; }

.section-head { max-width: 680px; margin: 0 auto clamp(34px, 5vw, 52px); text-align: center; }
.section-head p { font-size: 1.02rem; }

.eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; box-shadow: 0 10px 24px rgba(0, 151, 167, 0.32); }

.btn--outline { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn--outline:hover { background: #fff; border-color: #fff; color: var(--navy); }

.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

.btn--sm { padding: 11px 22px; font-size: 0.86rem; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- top -- */
.topbar {
  background: var(--navy);
  color: #a9b9cf;
  font-size: 0.8rem;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
}
.topbar__tag { letter-spacing: 0.02em; }
.topbar__links { display: flex; gap: 26px; }
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d7e2ef;
}
.topbar a:hover { color: #fff; }
.topbar .icon { width: 15px; height: 15px; color: var(--teal); }

/* ------------------------------------------------------------- header -- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.logo img { width: 46px; height: 46px; }
.logo__text { display: block; line-height: 1; }
.logo__name {
  display: block;
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.logo__name em { font-style: normal; color: var(--teal); }
.logo__sub {
  display: block;
  margin-top: 3px;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--body);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius);
}
.nav__link:hover { color: var(--teal); }
.nav__link[aria-current="page"] { color: var(--teal); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}
.nav__caret { width: 11px; height: 11px; transition: transform 0.2s ease; }

.has-drop { position: relative; }
.has-drop > button {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 248px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop,
.drop[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.has-drop:hover .nav__caret { transform: rotate(180deg); }
.drop a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 500;
}
.drop a:hover { background: var(--teal-light); color: var(--teal-dark); }

.header .btn { margin-left: 8px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; margin: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

/* --------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  background: var(--navy);
  color: #c3d0e2;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 88% 18%, rgba(0, 151, 167, 0.38) 0%, rgba(0, 151, 167, 0) 62%),
    linear-gradient(100deg, #0b1d3a 0%, #0b1d3a 44%, #10305c 74%, #14446f 100%);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1'%3E%3Cpath d='M0 .5h140M0 45.5h140M35.5 0v90M70.5 0v90M105.5 0v90'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 34%, #000 70%);
}
/* Photographic hero (home page).
   ::before is the photo, faded in from the left so it never reaches the copy.
   ::after replaces the window-grid with a navy wash that ties the photo to
   the solid panel — so the two halves read as one image, not a seam. */
.hero__media--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-office.jpg");
  background-size: cover;
  background-position: 78% center;
  /* Copy column ends near 50% of the viewport, so the photo stays fully
     transparent until past it, then ramps in over a wide, soft band. */
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, rgba(0, 0, 0, 0.32) 54%, #000 76%);
  mask-image: linear-gradient(90deg, transparent 40%, rgba(0, 0, 0, 0.32) 54%, #000 76%);
}
.hero__media--photo::after {
  background-image: none;
  background-color: transparent;
  /* 90deg, matching the mask on ::before — any other angle crosses the mask's
     iso-lines and reads as a diagonal seam across the photo. */
  background:
    linear-gradient(90deg,
      rgba(11, 29, 58, 0.99) 0%,
      rgba(11, 29, 58, 0.98) 44%,
      rgba(11, 29, 58, 0.62) 60%,
      rgba(11, 29, 58, 0.3) 78%,
      rgba(11, 29, 58, 0.34) 100%);
  -webkit-mask-image: none;
  mask-image: none;
}

.hero__inner {
  position: relative;
  padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 64px);
}
.hero__copy { max-width: 588px; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 span { color: var(--teal); }
.hero__lede { font-size: 1.06rem; max-width: 470px; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__badges {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
  margin-top: clamp(38px, 6vw, 58px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.86rem;
  color: #d3ddeb;
}
.hero__badges li { display: flex; align-items: center; gap: 9px; }
.hero__badges .icon { width: 18px; height: 18px; color: var(--teal); flex: none; }

.hero--sub .hero__inner { padding: clamp(48px, 6.5vw, 76px) 0; }
.hero--sub h1 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); }
.hero--sub .hero__lede { margin-bottom: 0; }

.crumbs {
  position: relative;
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: #9fb2ca;
}
.crumbs a { color: #9fb2ca; }
.crumbs a:hover { color: #fff; }

/* ------------------------------------------------------------- cards --- */
.card {
  padding: 32px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 151, 167, 0.4);
  box-shadow: var(--shadow);
}
.card .icon { width: 42px; height: 42px; margin: 0 auto 18px; color: var(--teal); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.9rem; }
.card__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* --------------------------------------------------------- why choose -- */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.feature-list li:first-child { padding-top: 0; }
.feature-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.feature-list .icon { width: 40px; height: 40px; flex: none; color: var(--teal); }
.feature-list h3 { margin-bottom: 4px; font-size: 1.02rem; }
.feature-list p { font-size: 0.9rem; }

/* --------------------------------------------------------------- stats -- */
.stats { background: var(--navy); }
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(38px, 5vw, 54px);
}
.stat { text-align: center; padding: 4px 12px; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.stat__num {
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.stat__label {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: #a9bbd2;
}

/* ---------------------------------------------------------- industries -- */
.industries {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.industry {
  padding: 34px 16px;
  text-align: center;
  transition: background-color 0.2s ease;
}
.industry + .industry { border-left: 1px solid var(--line); }
.industry:hover { background: var(--teal-light); }
.industry .icon { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--teal); }
.industry span {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}

/* -------------------------------------------------------- testimonials -- */
.testimonials .split { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.quote {
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.quote__mark { width: 30px; height: 30px; margin-bottom: 14px; color: var(--teal); }
.quote p { font-size: 0.92rem; color: var(--ink); }
.quote__who {
  margin-top: 18px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--navy);
}
.quote__who span { display: block; font-weight: 500; color: var(--body); }

/* ----------------------------------------------------------- cta band -- */
.cta {
  position: relative;
  background: var(--navy);
  color: #c3d0e2;
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 88% 50%, rgba(0, 151, 167, 0.3), transparent 60%);
}
.cta .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding-block: clamp(42px, 6vw, 64px);
}
.cta h2 { color: #fff; margin-bottom: 6px; }
.cta p { font-size: 0.96rem; }

/* -------------------------------------------------------------- forms -- */
.form-card {
  padding: clamp(26px, 4vw, 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy);
}
.field .req { color: var(--teal); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.16);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { margin-top: 14px; font-size: 0.78rem; }
.hp { position: absolute; left: -9999px; }

.contact-list { list-style: none; margin: 0 0 30px; padding: 0; }
.contact-list li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .icon { width: 22px; height: 22px; flex: none; color: var(--teal); margin-top: 4px; }
.contact-list strong { display: block; color: var(--navy); font-size: 0.92rem; }
.contact-list span, .contact-list a { font-size: 0.92rem; }

/* --------------------------------------------------------------- prose -- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li { margin-bottom: 8px; }

.service-block {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 120px;
}
.service-block:last-child { border-bottom: 0; }
.service-block .icon { width: 56px; height: 56px; color: var(--teal); }
.service-block ul { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 30px; }
.service-block ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  break-inside: avoid;
}
.service-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  color: var(--navy);
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--teal);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding-bottom: 22px; font-size: 0.93rem; }

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 30px 62px;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--teal-light);
  color: var(--teal-dark);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.95rem;
}
.steps li::after {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 46px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: 4px; font-size: 1.02rem; }
.steps p { font-size: 0.92rem; }

.panel {
  padding: clamp(26px, 4vw, 38px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* ------------------------------------------------------------- footer -- */
.footer {
  background: var(--navy);
  color: #a9bbd2;
  font-size: 0.88rem;
}
.footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-block: clamp(48px, 6vw, 68px);
}
.footer h4 {
  margin-bottom: 18px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}
.footer a { color: #a9bbd2; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: 10px; }
.footer__brand .logo { margin-bottom: 18px; }
.footer__brand .logo__name { color: #fff; }
.footer__brand .logo__name em { color: var(--teal); }
.footer__brand .logo__sub { color: #8fa3bd; }
.footer__brand p { font-size: 0.86rem; max-width: 270px; }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.social a:hover { background: var(--teal); border-color: var(--teal); }
.social .icon { width: 16px; height: 16px; }
.footer__contact li { display: flex; gap: 12px; margin-bottom: 16px; }
.footer__contact .icon { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--teal); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
}
.footer__bottom ul { display: flex; gap: 22px; }
.footer__bottom ul li { margin: 0; }

/* ------------------------------------------------------------- reveal -- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1000px) {
  .footer__main { grid-template-columns: 1fr 1fr; gap: 34px; }
  .split, .testimonials .split { grid-template-columns: 1fr; }
  .industries { grid-template-columns: repeat(3, 1fr); }
  .industry:nth-child(3n + 1) { border-left: 0; }
  .industry:nth-child(n + 4) { border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .nav-toggle { display: grid; place-items: center; }
  .header .wrap { position: relative; }
  .header .btn--primary { display: none; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px var(--gutter) 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__link { padding: 13px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__link[aria-current="page"]::after { display: none; }
  .has-drop { display: flex; flex-direction: column; }
  .has-drop > button { justify-content: space-between; width: 100%; }
  .drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    min-width: 0;
    padding: 4px 0 10px 14px;
    border: 0;
    box-shadow: none;
  }
  .drop[data-open="true"] { display: block; }
  .has-drop:hover .drop:not([data-open="true"]) { display: none; }
  .nav > .btn { margin: 16px 0 0; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .stat:nth-child(odd) { border-left: 0; }
}

@media (max-width: 720px) {
  .topbar__tag { display: none; }
  .topbar .wrap { justify-content: center; }
  .topbar__links { gap: 18px; }
  .hero__media::after { -webkit-mask-image: none; mask-image: none; opacity: 0.5; }
  .service-block { grid-template-columns: 1fr; gap: 14px; }
  .service-block ul { columns: 1; }
}

@media (max-width: 560px) {
  .grid--3, .grid--2, .field-row { grid-template-columns: 1fr; }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .industry { border-left: 0 !important; border-top: 1px solid var(--line); }
  .industry:nth-child(-n + 2) { border-top: 0; }
  .industry:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .footer__main { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}

/* Narrow screens: there is no room beside the copy, so the photo fades in
   from the bottom instead of the left and the navy wash stays at full weight.
   Must follow the 720px block — same specificity, so source order decides. */
@media (max-width: 900px) {
  .hero__media--photo::before {
    background-position: 62% center;
    -webkit-mask-image: linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.3) 70%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.3) 70%, #000 100%);
  }
  /* Heavier than desktop: the badges sit low in the hero, over the brightest
     part of the photo, and still need to clear contrast as white text. */
  .hero__media--photo::after {
    opacity: 1;
    background: linear-gradient(180deg,
      rgba(11, 29, 58, 0.99) 0%,
      rgba(11, 29, 58, 0.98) 52%,
      rgba(11, 29, 58, 0.88) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .card:hover { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}