/* Sysman: shared styles (every page loads this first, then its own page CSS).
   Colors and type mirror the Figma variables and text styles in
   "Sysman - Brand and Website". Page-only rules live in css/home.css, css/about.css
   and css/service.css. Shared markup (navbar, footer, CTA, ...) is kept in sync across
   pages by ../site-tools/sync_partials.py.

   Breakpoints (the same in every file):
     desktop design 1440 (1280 container)
     <=1180, <=1110   desktop steps
     <=960            stacked / tablet; the navbar collapses into the menu button
     641-960          tablet only (our own judgement)
     <=640            phone: the 389px Figma frames are the spec (18px gutter) */

:root {
  /* Colors: Figma variables */
  --white: #ffffff;
  --black: #000000;
  --grey: #636363;
  --light-grey: #f1f1f1;
  --red: #e72d38;
  --red-light: #fee2e2;
  --yellow: #f59e0b;
  --yellow-light: #fef3c7;
  --purple: #8b5cf6;
  --purple-light: #ede9fe;
  --teal: #06b6d4;
  --teal-light: #cffafe;
  --green: #22c55e;
  --green-light: #dcfce7;
  --blue: #3b82f6;
  --blue-light: #dbeafe;
  --button-text: #f8fafc;

  /* Layout */
  --container: 1280px;
  --gutter: 32px;
  --radius-card: 24px;
  --radius-button: 4px;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

h3 {
  font-size: inherit;
  font-weight: inherit;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* The pink CTA background needs a darker ring to keep 3:1 contrast */
.cta :focus-visible {
  outline-color: #1d4ed8;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius-button);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type — Figma text styles ---------- */

/* 10/600 */
.text-display {
  font-size: 64px;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: -0.022em;
}

/* 9/600 and "H2 - Titles" */
.text-title {
  font-size: 48px;
  font-weight: 600;
  line-height: 54px;
  letter-spacing: -0.022em;
}

/* 5/400 */
.text-lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.017em;
}

/* 4/400 */
.text-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.014em;
}

/* 3/500 */
.text-ui {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.013em;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button);
  white-space: nowrap;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.button--primary {
  height: 44px;
  padding-inline: 12px;
  background: var(--red);
  color: var(--button-text);
}

.button--primary:hover {
  background: #d21f2a;
}

.button--light {
  height: 56px;
  padding-inline: 16px;
  background: var(--white);
  color: var(--grey);
}

.button--light:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* "Get Started →" — the label box is 100px wide in Figma, so the arrow sits at x=108 */
.link-arrow {
  display: inline-grid;
  grid-template-columns: minmax(100px, auto) 24px;
  align-items: center;
  column-gap: 8px;
  height: 40px;
  padding-right: 16px;
  border-radius: 2000px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.014em;
  white-space: nowrap;
}

.link-arrow img {
  width: 24px;
  height: 24px;
  transition: transform 0.15s ease;
}

.link-arrow:hover img {
  transform: translateX(3px);
}

/* ---------- Icon badge ---------- */

.badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-light);
}

.badge--lg {
  width: 80px;
  height: 80px;
}

/* Fill only, no ring (the About desktop frame draws its service-card badges this way) */
.badge--plain {
  border-color: transparent;
}

/* Icon glyphs are built from the Figma vector layers, each placed at its
   original position inside the icon frame. */
.glyph {
  position: relative;
  flex-shrink: 0;
  width: 44.444px;
  height: 44.444px;
  overflow: hidden;
}

.glyph--product {
  width: 44.138px;
  height: 44.138px;
}

.badge--lg .glyph {
  width: 55.556px;
  height: 55.556px;
}

.glyph__part,
.glyph__pad {
  position: absolute;
  display: block;
}

.glyph__pad img {
  width: 100%;
  height: 100%;
}

/* ---------- Accent themes ----------
   --accent / --accent-light color text, rings and fills; --accent-rgb feeds rgba() tints
   (the CTA gradient). Put the class on a section, a card, or <body>/<main> for a whole page. */

.accent-red { --accent: var(--red); --accent-light: var(--red-light); --accent-rgb: 231, 45, 56; }
.accent-yellow { --accent: var(--yellow); --accent-light: var(--yellow-light); --accent-rgb: 245, 158, 11; }
.accent-purple { --accent: var(--purple); --accent-light: var(--purple-light); --accent-rgb: 139, 92, 246; }
.accent-teal { --accent: var(--teal); --accent-light: var(--teal-light); --accent-rgb: 6, 182, 212; }
.accent-green { --accent: var(--green); --accent-light: var(--green-light); --accent-rgb: 34, 197, 94; }
.accent-blue { --accent: var(--blue); --accent-light: var(--blue-light); --accent-rgb: 59, 130, 246; }

/* ---------- Navbar ----------
   .navbar / .navbar--dark (homepage): fixed to the top of the window, transparent over the hero with white text.
   Once the page scrolls, js/main.js adds .is-scrolled and it turns into the white bar of the inner pages (black
   logo, text and caret; the red button is unchanged), with a short fade that is off under reduced motion. Without
   JS (no .navbar--js) it is absolute instead, so it scrolls away with the hero rather than float, white on white,
   over the page.
   .navbar--light (inner pages): a white bar with black text, also fixed; its <header class="site-header
   site-header--light"> keeps the bar's place in the page. .is-scrolled only fades in the soft line under it.
   Both bars are fixed rather than sticky on purpose: Chrome treats a focused link in a sticky bar as hidden under
   scroll-padding-top and scrolls the page to "reveal" it (half a screen per Tab); a fixed one never scrolls it.
   At scroll 0 both look exactly as designed.
   Neither bar changes height (92px; at <=640 100px light, 96.32px dark), so the hero and the page never move.
   The bar sits above the page and below the dialogs (a <dialog> opened as a modal is in the top layer).
   --navbar-height feeds scroll-padding-top, so in-page anchors (#services, #contact, ...) land below the bar, and
   the light header's height. */

:root {
  --navbar-height: 92px;
  --navbar-scrolled-shadow: 0 1px 0 var(--light-grey), 0 6px 20px rgba(0, 0, 0, 0.06);
}

html {
  scroll-padding-top: var(--navbar-height);
}

.site-header {
  position: relative;
  z-index: 20;
}

/* The inner pages' header holds the fixed bar's place. While a dialog is open, js/modals.js pads <body> by the
   scrollbar's width (if scrollbars take up space); the header and the bar inherit that padding, so the bar's
   content stays lined up with the page. */
.site-header--light {
  height: var(--navbar-height);
  padding-right: inherit;
}

.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  padding-block: 24px;
  color: var(--white);
}

.navbar--dark {
  transition: color 0.2s ease;
}

.navbar--dark.is-scrolled {
  color: var(--black);
}

.navbar--dark:not(.navbar--js) {
  position: absolute;
}

/* Print: browsers repeat a fixed element at the top of every printed page, over the content. Absolute prints the bar
   once, on page 1: the light bar in its header's place, the dark one over the hero. */
@media print {
  .navbar {
    position: absolute;
  }
}

.navbar--light {
  padding-right: inherit;
  background: var(--white);
  color: var(--black);
}

/* The scrolled look: a white layer with the soft line under the bar, faded in behind the content. It sits above the
   bar's own background, so it also covers the homepage menu's navy bar (<=960) once the page has scrolled. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  box-shadow: var(--navbar-scrolled-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.navbar.is-scrolled::before {
  opacity: 1;
}

.navbar__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar__logo {
  position: relative;
  flex-shrink: 0;
}

.navbar__logo img {
  width: 170px;
  height: 28.317px;
}

/* Homepage only: the black logo, stacked exactly on the white one, shown once the bar has turned white */
.navbar__logo-scrolled {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.navbar--dark.is-scrolled .navbar__logo-scrolled {
  opacity: 1;
}

/* js/main.js: until the visitor's first wheel, touch, key or click, the bar takes its state without the fade, so a
   page that opens part-way down (a reload, Back, a link to index.html#services) doesn't flash the transparent bar */
.navbar--instant,
.navbar--instant::before,
.navbar--instant .navbar__logo-scrolled {
  transition: none;
}

.navbar__menu {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 32px;
}

.navbar__links {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.15s ease;
}

.navbar__link:hover {
  opacity: 0.75;
}

.navbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.navbar__toggle {
  display: none;
}

/* Services: the link to the homepage's list, then the caret button that opens the dropdown (js/main.js: hover,
   click, Enter/Space, Esc). Without JS, :hover and :focus-within open it (.navbar--js turns that off). The 24px
   button keeps the caret 4px after the text and, with its -4px margin, 24px before "About", where the design
   draws it. */
.navbar__has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.navbar__caret {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.navbar__caret:hover {
  opacity: 0.75;
}

/* The button starts where the text ends, so its ring is drawn inside it rather than over the "s" */
.navbar__caret:focus-visible {
  outline-offset: -2px;
}

.navbar__caret svg {
  display: block;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.navbar__caret[aria-expanded="true"] svg,
.navbar:not(.navbar--js) .navbar__has-dropdown:is(:hover, :focus-within) .navbar__caret svg {
  transform: rotate(180deg);
}

/* The dropdown: a small white card centred under the item, the same on the dark and the light bar. Its transparent
   top padding bridges the gap, so the pointer can travel from the item to the card without leaving the item. */
.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 248px;
  margin-left: -124px;
  padding-top: 12px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.navbar__has-dropdown.is-open > .navbar__dropdown,
.navbar:not(.navbar--js) .navbar__has-dropdown:is(:hover, :focus-within) > .navbar__dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.navbar__dropdown-list {
  padding: 8px;
  border: 2px solid var(--light-grey);
  border-radius: 16px;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.25);
}

/* 44px rows; the dot is the service's accent colour (the accent-* class on the link) */
.navbar__dropdown-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.navbar__dropdown-link::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.navbar__dropdown-link:hover {
  background: var(--light-grey);
}

.navbar__dropdown-link:focus-visible {
  outline-offset: 0;
}

/* The page you are on (sync_partials.py adds aria-current="page") */
.navbar__dropdown-link[aria-current="page"] {
  background: var(--accent-light);
  font-weight: 600;
}

/* The menu button's bars are (0,2,1): their transition is set in the <=960 block further down */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar::before,
  .navbar__logo-scrolled,
  .navbar__caret svg,
  .navbar__dropdown,
  .navbar .navbar__toggle-icon::before,
  .navbar .navbar__toggle-icon::after {
    transition: none;
  }
}

/* ---------- Section heading (centred h2 + intro) ---------- */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 768px;
  margin-inline: auto;
  padding-block: 40px 4px;
  text-align: center;
}

.section-heading p {
  color: var(--grey);
}

/* ---------- Services grid ("Everything you need") ---------- */

.services-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 40px;
  background: var(--white);
}

.services-grid__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* 2px inside stroke in Figma, so the content sits 24px from the outer edge */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  min-height: 380px;
  padding: 22px;
  border: 2px solid var(--light-grey);
  border-radius: var(--radius-card);
  background: var(--white);
}

.service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.service-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 5/500 */
.service-card__title {
  color: var(--black);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.017em;
}

.service-card__desc {
  color: var(--grey);
}

/* ---------- Call to action ---------- */

.cta {
  --cta-angle: 172.708deg;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 96px;
  background:
    linear-gradient(var(--cta-angle), rgba(var(--accent-rgb, 231, 45, 56), 0) 12.055%, rgb(var(--accent-rgb, 231, 45, 56)) 87.945%),
    url("../assets/img/cta-bg.webp") center / cover no-repeat,
    #e1e5ea;
  background-blend-mode: overlay, normal;
  scroll-margin-top: 24px;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.cta__title {
  max-width: 997px;
  color: var(--black);
}

.cta__title span {
  color: var(--accent, var(--red));
}

.cta__desc {
  max-width: 800px;
  color: var(--grey);
}

/* ---------- Testimonial ---------- */

.testimonial {
  padding-block: 40px;
  background: var(--white);
}

.testimonial__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.stars {
  display: flex;
}

.stars img {
  width: 24px;
  height: 24px;
}

.testimonial__quote {
  margin: 0;
  color: var(--grey);
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: -0.022em;
}

.testimonial__cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.testimonial__name {
  color: var(--black);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.014em;
}

.testimonial__logo {
  width: 94.847px;
  height: 24px;
}

/* ---------- Company logos ---------- */

.logos {
  padding-block: 40px;
  background: var(--white);
}

.logos__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 64px;
}

.logos__label {
  color: var(--grey);
  text-align: center;
}

/* On phones this becomes a sideways scroller (see the <=640 block); above that it is a plain wrapper */
.logos__scroller {
  width: 100%;
}

.logos__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Render each logo at its SVG's exact (fractional) Figma size */
.logos__row img {
  width: auto;
  height: auto;
}

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-block: 40px;
  background: var(--black);
  color: var(--white);
  scroll-margin-top: 24px;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* 383px as designed, but never so wide that the four link columns drop below 172px (4 x 172 + 4 x 32 gaps = 816)
   and wrap "Sales and Marketing" / "200 Friberg Parkway" just above the 1180 stacking step. */
.footer__brand {
  flex-shrink: 0;
  width: min(383px, 100% - 816px);
}

.footer__brand img {
  width: 167.925px;
  height: 27.972px;
}

.footer__columns {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 32px;
}

.footer__column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.footer__heading {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.013em;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__list a {
  transition: opacity 0.15s ease;
}

.footer__list a:hover {
  opacity: 0.7;
}

.footer__phone {
  margin-top: 30px;
  white-space: nowrap;
}

.footer__address {
  font-style: normal;
}

.footer__legal {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.013em;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .logos__inner {
    padding: 48px 0;
  }

  .logos__row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 48px;
  }

  .footer__top {
    flex-direction: column;
    gap: 40px;
  }

  .footer__brand {
    width: auto;
  }

  .footer__columns {
    width: 100%;
  }
}

/* Logos no longer fit one row: two even rows of four */
@media (max-width: 1110px) {
  .logos__row {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
    justify-items: center;
    gap: 32px 56px;
  }

  .services-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Rows still share a height (grid stretch); they just stop reserving the 3-column 380px */
  .service-card {
    min-height: 0;
  }
}

@media (max-width: 960px) {
  :root {
    --gutter: 24px;
  }

  /* Navbar collapses into the two-line menu button */
  .navbar__inner {
    justify-content: space-between;
  }

  .navbar__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .navbar__toggle {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  /* Two 59x2 bars, 14px apart centre to centre; the pair sits 1px above the logo's centre line */
  .navbar__toggle-icon {
    position: relative;
    top: -1px;
    width: 59px;
    height: 16px;
  }

  .navbar__toggle-icon::before,
  .navbar__toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease;
  }

  .navbar__toggle-icon::before {
    top: 0;
  }

  .navbar__toggle-icon::after {
    top: 14px;
  }

  /* Open: the bars fold into a small X at the right edge */
  .navbar.is-open .navbar__toggle-icon::before {
    transform: translate(19px, 7px) rotate(45deg) scaleX(0.5);
  }

  .navbar.is-open .navbar__toggle-icon::after {
    transform: translate(19px, -7px) rotate(-45deg) scaleX(0.5);
  }

  /* The open menu: a full-width panel under the bar. It never runs past the bottom of the window: when it is
     taller (landscape phones, the Services list open) it scrolls on its own. 100% is the bar's height (the menu's
     containing block); this is the site's one viewport unit, on a panel that is closed in every screenshot. */
  .navbar {
    --navbar-panel: #081430;
    --navbar-rule: rgba(255, 255, 255, 0.14);
    --navbar-outline: rgba(255, 255, 255, 0.4);
    --navbar-hover: rgba(255, 255, 255, 0.08);
    --navbar-current: rgba(255, 255, 255, 0.14);
  }

  /* The inner pages' bar, and the homepage's once it has turned white */
  .navbar--light,
  .navbar--dark.is-scrolled {
    --navbar-panel: var(--white);
    --navbar-rule: var(--light-grey);
    --navbar-outline: #d4d4d4;
    --navbar-hover: var(--light-grey);
    --navbar-current: initial; /* the link's own accent tint */
  }

  .navbar.is-open {
    background: var(--navbar-panel);
  }

  .navbar__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    padding: 4px var(--gutter) 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--navbar-rule);
    background: var(--navbar-panel);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
  }

  .navbar--light .navbar__menu,
  .navbar--dark.is-scrolled .navbar__menu {
    box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.18);
  }

  .navbar.is-open .navbar__menu {
    display: flex;
  }

  .navbar__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navbar__links > li + li {
    border-top: 1px solid var(--navbar-rule);
  }

  .navbar__menu .navbar__link {
    display: flex;
    justify-content: flex-start;
    min-height: 48px;
  }

  /* Services: the link fills the row and the caret button ends it (its caret on the gutter line). The caret opens
     the six service links inline, indented under the row; they start collapsed each time the menu opens. */
  .navbar__has-dropdown {
    flex-wrap: wrap;
  }

  .navbar__has-dropdown > .navbar__link {
    flex: 1;
  }

  .navbar__caret {
    width: 48px;
    height: 48px;
    margin-right: -16px;
  }

  .navbar__dropdown {
    position: static;
    display: none;
    flex-basis: 100%;
    width: auto;
    margin: 0;
    padding: 0 0 12px;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .navbar__has-dropdown.is-open > .navbar__dropdown {
    display: block;
  }

  .navbar__dropdown-list {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
  }

  .navbar__dropdown-link {
    padding-left: 16px;
    border-radius: var(--radius-button);
  }

  .navbar__dropdown-link:hover {
    background: var(--navbar-hover);
  }

  .navbar__dropdown-link[aria-current="page"] {
    background: var(--navbar-current, var(--accent-light));
  }

  .navbar__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .navbar__actions .navbar__link {
    justify-content: center;
    border: 1px solid var(--navbar-outline);
    border-radius: var(--radius-button);
  }

  .navbar__actions .button--primary {
    height: 48px;
  }

  .testimonial__quote br {
    display: none;
  }

  /* Footer: logo on top, links in a 2x2 grid */
  .footer__brand a {
    display: block;
    width: max-content;
  }

  .footer__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  /* Links keep the design's 22px lines; the hit area grows into the 8px gaps */
  .footer__list a {
    position: relative;
  }

  .footer__list a::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
}

/* Tablet only: balanced wraps read better at these in-between widths */
@media (min-width: 641px) and (max-width: 960px) {
  /* The menu's two action buttons sit side by side */
  .navbar__actions {
    flex-direction: row;
  }

  .navbar__actions > * {
    flex: 1 1 0;
  }

  .text-display,
  .text-title,
  .testimonial__quote,
  .logos__label,
  .cta__desc {
    text-wrap: balance;
  }
}

@media (max-width: 720px) {
  .text-display {
    font-size: 52px;
    line-height: 56px;
  }
}

/* ---------- Phone: the 389px Figma frames ---------- */

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
  }

  .text-display {
    font-size: 40px;
    line-height: 40px;
  }

  .text-title {
    font-size: 32px;
    line-height: 38px;
  }

  /* Navbar: 100px light bar; the dark bar's logo sits 34px from the top (a 96.32px bar) */
  :root {
    --navbar-height: 100px;
  }

  .navbar {
    padding-block: 26.16px;
  }

  .navbar--light {
    padding-block: 28px;
  }

  /* Section heading: the text column is inset a further 32px */
  .section-heading {
    padding-inline: 32px;
  }

  /* Services grid: one column of cards */
  .services-grid {
    gap: 32px;
  }

  .services-grid__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card {
    gap: 32px;
    min-height: 0;
  }

  .service-card__body {
    justify-content: flex-start;
    gap: 32px;
  }

  /* CTA: the title keeps its desktop size and the <br> */
  .cta {
    --cta-angle: 151.027deg;
    padding-block: 40px;
  }

  .cta__inner {
    padding-inline: 32px;
  }

  .cta .cta__title {
    font-size: 48px;
    line-height: 54px;
  }

  .cta__desc {
    line-height: 25px;
  }

  /* Testimonial */
  .testimonial__quote {
    font-size: 24px;
    line-height: 29px;
  }

  /* Logos: the label wraps at 219px. The row keeps the desktop's single 8-logo line, as the frame clips it, and
     scrolls sideways only when the visitor scrolls it (nothing moves by itself). js/main.js centres it on load,
     which reproduces the frame (Netflix at x≈46 at 389), and makes the scroller a focusable region while it
     overflows, so arrow keys scroll it too. */
  .logos__inner {
    padding: 64px 0;
    gap: 32px;
  }

  .logos__label {
    max-width: 219px;
  }

  /* Edge to edge. The side padding lets the first and last logos stop on the gutter line at either end; the
     8px vertical padding (cancelled by the negative margin, so the row's box stays 24px) leaves room for the
     focus ring inside the scroller */
  .logos__scroller {
    align-self: stretch;
    width: auto;
    margin: -8px calc(-1 * var(--gutter));
    padding: 8px var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .logos__scroller::-webkit-scrollbar {
    display: none;
  }

  /* The scroller spans the whole screen width, so the ring is drawn inside it rather than off-screen */
  .logos__scroller:focus-visible {
    outline-offset: -4px;
  }

  /* The desktop row's 1088px width (1280 - 2 × 32 - 2 × 64) with its space-between spacing: logos 56.4px apart,
     exactly the frame's positions */
  .logos__row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 56px;
    width: 1088px;
    min-width: max-content;
  }

  /* Footer */
  .footer {
    gap: 32px;
  }

  .footer__top {
    gap: 32px;
  }

  /* Same width as the design's footer logo, without its horizontal squash */
  .footer__brand img {
    width: 151.264px;
    height: 27.972px;
    object-fit: contain;
    object-position: left center;
  }
}

/* Frame-width phones only (an exception to the shared breakpoints): the Figma quirk kept for parity at 389,
   where the Survey Coding card's text box is fixed at 156px. Wider phones (431–640) size that card to its content
   (3 lines up to about 515px, 2 above), since the fixed box would only add an empty band. */
@media (max-width: 430px) {
  .service-card--tall-text .service-card__text {
    min-height: 156px;
  }
}

/* Very narrow phones: the 48px CTA word "Transcription" needs a little more room */
@media (max-width: 359px) {
  .cta__inner {
    padding-inline: var(--gutter);
  }

  .cta .cta__title {
    font-size: 40px;
    line-height: 46px;
  }

  /* Keeps "+1-508-898-2230" (nowrap) inside the gutter */
  .footer__columns {
    column-gap: 16px;
  }
}