/* ==========================================================================
   2MG Solutions — design system
   Derived from computed styles of www.2mgsolutions.com (Wix build, v146)
   ========================================================================== */

:root {
  /* palette (from Wix --color_* tokens) */
  --white:        #ffffff;
  --black:        #000000;
  --ink:          #000000;
  --ink-muted:    #6e6e6e;
  --line:         #c2c2c2;
  --line-soft:    #e4e4e4;
  --surface:      #ffffff;
  --surface-alt:  #f0f0f0;
  --surface-soft: #f7f7f7;
  --action:       #5e625f;   /* rgb(94,98,95) — Wix action colour */
  --accent:       #0088cb;
  --dark:         #000000;
  --dark-text:    #ffffff;
  --dark-muted:   #b0b0b0;

  /* type */
  /* measured: display = helvetica-w01-light (Helvetica Neue Light),
     body = helvetica-w01-roman, UI/eyebrows/buttons = Space Grotesk */
  --font-display: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  --font-ui: "Space Grotesk", "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;

  /* layout */
  --page: 1440px;
  --gutter: clamp(20px, 6vw, 86px);
  --header-h: 74px;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #000; color: #fff; padding: 12px 18px; font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(56px, 9vw, 120px); }
.section--dark { background: var(--dark); color: var(--dark-text); }
.section--soft { background: var(--surface-soft); }
.section--alt  { background: var(--surface-alt); }
.section--flush { padding-block: 0; }

.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.section--dark .rule { background: rgba(255,255,255,.22); }

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.39vw, 20px);
  font-weight: 400;
  letter-spacing: .05em;
  color: inherit;
  margin: 0 0 clamp(20px, 3vw, 34px);
}
.section--dark .eyebrow { color: var(--dark-muted); }

.display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
  font-size: clamp(2.2rem, 5.78vw, 83px);
}
.display--hero { font-size: clamp(2.35rem, 5.78vw, 83px); }
.display--sm   { font-size: clamp(2rem, 5.78vw, 83px); }

.subhead {
  font-family: var(--font-ui);
  font-size: clamp(17px, 1.56vw, 22.5px);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.35;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.subhead--plain { letter-spacing: 0; font-size: clamp(18px, 1.6vw, 23px); }

.prose { font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 46ch; }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.section--dark .prose { color: rgba(255,255,255,.86); }

.lede { font-size: 17px; line-height: 1.55; }

.ticklist { margin: 0 0 1.4em; padding-left: 1.25em; font-size: 17px; line-height: 1.75; }
.ticklist li { margin: 0; }

/* ---------- link / button ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-ui);
  font-size: 16px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; color: inherit;
  padding-bottom: 12px; border-bottom: 1px solid currentColor;
  transition: gap .2s ease, opacity .2s ease;
}
.cta:hover { gap: 22px; opacity: .68; }
.cta__arrow { width: 24px; height: 8px; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: 16px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
  padding: 12px 34px; border-radius: 999px; border: 1px solid var(--black);
  background: var(--black); color: #fff; text-decoration: none; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: transparent; color: var(--black); }
.btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost:hover { background: #fff; color: #000; }
.btn--block { width: 100%; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.header--over {
  position: fixed; left: 0; right: 0;
  background: transparent; border-color: transparent; color: #fff;
}
.header--over.is-stuck {
  background: rgba(0,0,0,.82); border-color: rgba(255,255,255,.12);
  backdrop-filter: saturate(150%) blur(10px);
}
.header__inner {
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav__item { position: relative; }
.nav__link {
  font-family: var(--font-ui);
  font-size: 16px; letter-spacing: .05em; text-decoration: none;
  color: inherit; padding: 26px 0; display: inline-block; white-space: nowrap;
}
.nav__link:hover { opacity: .6; }
.nav__item[aria-current="true"] > .nav__link { text-decoration: underline; text-underline-offset: 6px; }

.submenu {
  position: absolute; top: 100%; left: -18px; min-width: 250px;
  background: #fff; color: #000;
  border: 1px solid var(--line-soft);
  padding: 10px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.nav__item:hover .submenu,
.nav__item:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: block; padding: 10px 24px; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.submenu a:hover { background: var(--surface-alt); }

.header__cta { flex: none; }
.nav-toggle {
  display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: inherit;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; }
.hero--dark { background: #000; color: #fff; min-height: min(100vh, 1000px); display: flex; align-items: stretch; }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.55) 100%);
}
/* The hero photographs carry a bright band through the middle. Headline and
   subline are pinned to the top, tagline and CTA to the bottom, so the copy
   always sits on the dark parts whatever the viewport's aspect ratio. */
.hero__inner {
  width: 100%; min-height: min(100vh, 1000px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: clamp(110px, 16vh, 170px) clamp(44px, 7vh, 80px);
}
.hero__bottom { margin-top: clamp(48px, 8vh, 96px); }
.hero__sub {
  margin: clamp(24px, 4vw, 40px) 0 0;
  font-family: var(--font-ui);
  font-size: 16px; letter-spacing: .05em; line-height: 1.6;
  color: rgba(255,255,255,.92); max-width: 64ch;
}

/* page hero used on inner pages: a wide plate on white.
   Capped at the 1440 design canvas and at the source section's 1000px height —
   without the cap it scales with the viewport and swallows the whole window. */
.pagehero { background: var(--white); }
.pagehero__media { width: 100%; max-width: var(--page); margin-inline: auto; }
.pagehero__media img {
  width: 100%;
  aspect-ratio: 1440 / 1000;   /* the source section's own proportions */
  height: auto;
  max-height: min(1000px, 78vh);
  object-fit: contain;         /* these are graphics — never crop them */
  background: #fff;
}
.pagehero__media--cover img { height: clamp(320px, 34vw, 620px); object-fit: cover; }

/* ---------- intro block (eyebrow + title left, copy right) ---------- */
.intro { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
.intro .display { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .intro { grid-template-columns: 1fr 1fr; }
  .intro .prose { grid-column: 2; }
}

/* ---------- split rows (image + copy, alternating) ---------- */
.split {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}
.split__media img { width: 100%; height: auto; border-radius: 10px; }
.split__media--square img { aspect-ratio: 1/1; object-fit: cover; }
.split__body { max-width: 52ch; }
.split + .split { margin-top: clamp(48px, 8vw, 110px); }

/* card variant used on the homepage product block */
.card {
  background: #fff;
  border-radius: 12px;
  padding: clamp(28px, 5vw, 72px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.05);
}
.card--ruled { border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }

/* ---------- feature grid (index cards) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(24px, 3.5vw, 44px); }
.tile { text-decoration: none; color: inherit; display: block; group: tile; }
.tile__media { overflow: hidden; border-radius: 10px; background: var(--surface-alt); aspect-ratio: 4/3; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__title {
  font-family: var(--font-ui); font-size: clamp(16px, 1.4vw, 20px); font-weight: 400;
  letter-spacing: .05em; margin: 22px 0 12px;
}
.tile__text { font-size: 16px; line-height: 1.55; color: var(--ink-muted); margin: 0; }

/* ---------- logo strip ---------- */
.logos {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; justify-items: center;
}
/* auto-fit so the strip stays balanced whatever the badge count */
@media (min-width: 620px) { .logos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.logos img { max-height: 76px; width: auto; object-fit: contain; filter: grayscale(0); }

/* ---------- newsletter ---------- */
.newsletter__form { margin-top: clamp(28px, 5vw, 52px); }
.field { position: relative; margin-bottom: 26px; }
.field__label {
  display: block; font-family: var(--font-ui);
  font-size: 14px; letter-spacing: .02em; color: var(--ink-muted); margin-bottom: 10px;
}
.field__input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; padding: 10px 0; font: inherit; font-size: 17px; color: inherit;
}
.field__input:focus { outline: none; border-bottom-color: var(--black); }
.newsletter__row { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 760px) { .newsletter__row { grid-template-columns: 1fr auto; } }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-muted); }
.check input { margin-top: 3px; }
.form-note { font-size: 14px; margin-top: 16px; color: var(--ink-muted); }
.form-note--ok { color: #1f7a3d; }
.form-note--err { color: #b4232a; }

/* ---------- footer ---------- */
.footer { background: #fff; border-top: 1px solid var(--line-soft); padding-block: clamp(48px, 7vw, 80px) 40px; }
.footer__grid {
  display: grid; gap: clamp(28px, 4vw, 48px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.2fr repeat(4, 1fr); } }
.footer__logo img { height: 30px; width: auto; }
.footer h3 {
  font-family: var(--font-ui); font-size: clamp(16px, 1.39vw, 20px); font-weight: 400;
  letter-spacing: .05em; margin: 0 0 18px; color: var(--ink);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; font-size: 17px; }
.footer a { color: var(--ink-muted); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer address { font-style: normal; font-size: 17px; color: var(--ink-muted); line-height: 1.7; }
.footer__legal {
  margin-top: clamp(36px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--line-soft);
  font-size: 15px; color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
}

/* ---------- breadcrumb ---------- */
.crumb { font-family: var(--font-ui); font-size: 16px; letter-spacing: .05em; color: var(--ink-muted); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- reveal-on-scroll ---------- */
/* content is visible by default; only a JS-enabled page opts into the animation,
   so a script error or a blocked script can never hide the page's copy */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- mobile nav ---------- */
@media (max-width: 1023px) {
  /* backdrop-filter makes the header a containing block for its position:fixed
     descendants, which would trap the drawer inside the 74px header bar */
  .header, .header--over, .header--over.is-stuck {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav-toggle { display: block; order: 3; position: relative; z-index: 2; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0; background: #fff; color: #000;
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0 40px;
    overflow-y: auto; transform: translateX(100%);
    /* visibility keeps the closed drawer out of hit-testing and out of the
       document's overflow, so the page never scrolls sideways on a phone */
    visibility: hidden;
    transition: transform .28s ease, visibility .28s;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__link { padding: 14px var(--gutter); display: block; font-size: 15px; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 10px; background: var(--surface-soft);
  }
  .submenu a { padding: 10px var(--gutter) 10px calc(var(--gutter) + 18px); font-size: 13.5px; }
}

/* ==========================================================================
   half-bleed rows — the image runs to the page edge, copy sits in the
   opposite half (matches the source layout's 720/720 section split)
   ========================================================================== */
.bleed { display: grid; grid-template-columns: 1fr; }
/* the row is capped at the design canvas: past 1440px the halves would keep
   growing and upscale a 614px source image to fill half the screen */
.bleed__row { max-width: var(--page); margin-inline: auto; width: 100%; }
.bleed__media { position: relative; min-height: 300px; }
/* a definite ratio, so the media column is not sized by the image's own
   intrinsic aspect (which is what let a square source drive a 1280px-tall row) */
.bleed__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bleed__body { display: flex; align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.bleed__inner {
  width: 100%; max-width: calc(var(--page) / 2 - var(--gutter));
  padding-inline: var(--gutter);
  margin-left: auto;
}
@media (min-width: 900px) {
  .bleed { grid-template-columns: 1fr 1fr; min-height: 495px; }
  .bleed__media { aspect-ratio: 720 / 495; height: 100%; }
  .bleed--reverse .bleed__media { order: 2; }
  .bleed--reverse .bleed__inner { margin-left: auto; margin-right: 0; }
  .bleed:not(.bleed--reverse) .bleed__inner { margin-left: 0; margin-right: auto; }
}
@media (max-width: 899px) {
  .bleed__media { aspect-ratio: 16/10; min-height: 0; }
  .bleed__inner { max-width: none; margin: 0; }
}

/* ---------- contact page ---------- */
.contact-lede {
  font-family: var(--font-ui);
  font-size: 16px; letter-spacing: .05em;
  line-height: 1.7; color: var(--ink); margin: clamp(24px, 4vw, 40px) 0 0; max-width: 52ch;
}
.contact-details { margin-top: clamp(32px, 5vw, 56px); }
.contact-details p { margin-bottom: 1.3em; }
.contact-details strong {
  font-family: var(--font-ui); font-weight: 500; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }
select.field__input { appearance: none; border-radius: 0; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 10px center, right 4px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 26px; }
textarea.field__input { resize: vertical; }

/* ---------- brand logo swap ---------- */
.brand { position: relative; }
.brand img { height: 40px; width: auto; }
.brand__light { display: none; }
.header--over .brand__dark { display: none; }
.header--over .brand__light { display: block; }
.header--over.is-stuck .brand__dark { display: none; }
.header--over.is-stuck .brand__light { display: block; }
@media (max-width: 1023px) {
  /* the mobile drawer is light, so the dark mark is always correct once open */
  .header--over.nav-open .brand__dark { display: block; }
  .header--over.nav-open .brand__light { display: none; }
}
.footer__logo img { height: 40px; }

/* mobile drawer forces a light header bar */
.header--over.nav-open { background: #fff; color: #000; border-color: var(--line-soft); }

/* the drawer-only Contact entry duplicates the header button on desktop */
.nav__item--mobile-cta { display: none; }
@media (max-width: 1023px) { .nav__item--mobile-cta { display: block; } }

/* ---------- dark-tone overrides ---------- */
.section--dark .subhead { border-bottom-color: rgba(255,255,255,.24); }
.section--dark .tile__text { color: var(--dark-muted); }
.section--dark .card { background: #0d0d0d; box-shadow: none; }
.section--dark .field__input { border-bottom-color: rgba(255,255,255,.34); color: #fff; }
.section--dark .field__label, .section--dark .check { color: var(--dark-muted); }
.section--dark .btn { background: #fff; color: #000; border-color: #fff; }
.section--dark .btn:hover { background: transparent; color: #fff; }
/* never invert badges: they are full-colour marks, not glyphs */
.bleedwrap.section--dark { background: var(--dark); color: var(--dark-text); }
.bleedwrap.section--dark .prose { color: rgba(255,255,255,.86); }
.bleedwrap.section--dark .subhead { border-bottom-color: rgba(255,255,255,.24); }

/* spam honeypot: off-screen rather than display:none, which some bots detect */
.hp {
  position: absolute !important;
  left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   Layout utilities
   These replace inline style="" attributes. A strict `style-src 'self'` CSP
   blocks inline styles outright, so anything expressed inline is silently
   dropped in production — these have to be real classes.
   ========================================================================== */
.rule--spaced   { margin-bottom: clamp(28px, 4vw, 48px); }
.rule--tight    { margin: 22px 0; }
.cta-row        { margin-top: 30px; }
.cta-row--hero  { margin-top: 36px; }
.subhead--spaced { margin-top: 36px; }
.stack-md       { margin-bottom: clamp(32px, 5vw, 64px); }
.stack-lg       { margin-bottom: clamp(36px, 5vw, 64px); }
.stack-xl       { margin-bottom: clamp(40px, 6vw, 72px); }
.title__body    { margin-top: clamp(24px, 3vw, 40px); }
.prose--wide    { max-width: 78ch; }
.split__media--last { order: 2; }
.card__body-rule {
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 3vw, 40px);
}


/* ==========================================================================
   Positioning rewrite: new section types
   ========================================================================== */
.hero__tagline {
  margin: 0;
  font-family: var(--font-display); font-weight: 700; font-style: normal;
  font-size: clamp(19px, 1.7vw, 25px); letter-spacing: .01em; color: #fff;
  /* the hero image has bright bands; the shadow keeps the line readable over them */
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45);
}
.hero__cta { margin: 24px 0 0; }

.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 17px; line-height: 1.5; }
.section--dark .plainlist li { border-bottom-color: rgba(255,255,255,.16); }
.columns { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 760px) { .columns { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); counter-reset: step; }
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.step { border-top: 1px solid var(--line); padding-top: 18px; }
.section--dark .step { border-top-color: rgba(255,255,255,.24); }
.step__n { display: block; font-family: var(--font-ui); font-size: 13px; letter-spacing: .12em; color: var(--ink-muted); margin-bottom: 14px; }
.section--dark .step__n { color: var(--dark-muted); }
.step__title { font-family: var(--font-ui); font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; letter-spacing: .02em; margin: 0 0 10px; line-height: 1.3; }
.step__title a { text-decoration: none; }
.step__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.step__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.section--dark .step__text { color: rgba(255,255,255,.78); }
.steps__after { margin-top: clamp(28px, 4vw, 44px); max-width: 60ch; }

.profile { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .profile { grid-template-columns: 420px 1fr; } }
.profile__media img { width: 100%; height: auto; border-radius: 10px; }
.profile__body .display { margin-bottom: 20px; }

.storyshape { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .storyshape { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .storyshape { grid-template-columns: repeat(6, 1fr); } }
.storyshape li { border-top: 1px solid var(--line); padding: 16px 0 0; font-family: var(--font-ui); font-size: 15px; letter-spacing: .03em; }
.storyshape__n { display: block; font-size: 12px; letter-spacing: .12em; color: var(--ink-muted); margin-bottom: 8px; }
.storyshape__note { margin: clamp(28px, 4vw, 44px) 0 0; font-size: 16px; color: var(--ink-muted); max-width: 60ch; }

.ctaband__inner { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .ctaband__inner { grid-template-columns: 1fr auto; } }
.ctaband__text { margin-top: 18px; max-width: 56ch; }

.footer__strap { margin: 16px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 16px; color: var(--ink-muted); }
.footer address strong { font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; color: var(--ink); }
.footer__legal { display: block; }
.footer__legal-line { display: block; margin-top: 10px; font-size: 13px; line-height: 1.6; max-width: 90ch; }

/* display headings inside a half-width split: mid size, and breathing room above the copy */
.split__body .display, .bleed__inner .display { font-size: clamp(1.75rem, 3vw, 44px); line-height: 1.12; margin-bottom: 22px; }
.split__body .eyebrow { margin-bottom: 18px; }
.hero__sub { max-width: 70ch; }

/* authored hero line breaks are for wide screens; let phones wrap naturally */
@media (max-width: 760px) { .display--hero br { display: none; } }

/* compact hero: a short band for secondary pages — heading, subline, then the
   button directly beneath, instead of copy pinned to a full-height image */
.hero--compact, .hero--compact .hero__inner { min-height: 500px; }
.hero--compact .hero__inner { justify-content: flex-start; padding-block: clamp(104px, 14vh, 130px) clamp(36px, 5vh, 52px); }
.hero--compact .hero__bottom { margin-top: clamp(24px, 4vh, 40px); }