/* ==========================================================================
   Getwiy — site stylesheet (v7)
   Plain CSS rebuild of the reference design. No Tailwind, no icon font.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font);
  font-size: var(--t-xs);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding-top: 64px;                 /* the header is fixed */
}
@media (min-width: 768px) { body { padding-top: 80px; font-size: var(--t-sm); } }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }
.shell--wide { max-width: var(--shell-wide); }
.shell--narrow { max-width: 640px; }
section { position: relative; }
.band { padding-block: clamp(52px, 9vw, 72px); }
.band--sunk { background: rgba(2, 6, 23, .6); border-top: 1px solid var(--line); }

/* --- Header ---------------------------------------------------------------- */

.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  /* Solid, not translucent: a semi-transparent header blended with the hero
     glow behind it and read as a black/purple seam right under the nav.
     Opaque removes the blend entirely. */
  background: var(--bg);
  border-bottom: 1px solid rgba(30, 41, 59, .8);
}
.hdr__in {
  max-width: var(--shell); margin: 0 auto;
  padding-inline: var(--gutter);
  height: 64px; display: flex; align-items: center; gap: 14px;
}
@media (min-width: 768px) { .hdr__in { height: 80px; } }

.hdr__logo {
  display: flex; align-items: center; gap: 9px;
  margin-right: auto; text-decoration: none;
}
.hdr__logo img { display: block; height: 29px; width: auto; }
.hdr__logo b {
  color: #fff; font-size: 18px; font-weight: 800; letter-spacing: .09em;
  line-height: 1;
}
@media (min-width: 768px) {
  .hdr__logo img { height: 34px; }
  .hdr__logo b { font-size: 21px; }
}

.hdr__nav { display: none; align-items: center; gap: 28px; }
.hdr__nav a {
  color: var(--fg-2); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500;
}
.hdr__nav a:hover { color: #fff; }
.hdr__nav a[aria-current="page"] { color: var(--accent-3); }
/* The call-to-action sits inside the nav. The plain nav-link rule
   (.hdr__nav a, 0,1,1) was beating the button's own colour (.btn--pill,
   0,1,0), leaving slate text on the indigo fill at about 2.3:1. Same
   specificity, placed after, so the button keeps its own colours. */
.hdr__nav a.btn--pill,
.hdr__nav a.btn--pill[aria-current="page"] { color: #fff; font-size: var(--t-sm); font-weight: 700; }
.hdr__nav a.btn--pill:hover { color: #fff; background: var(--accent-2); }

/* Mobile menu: a native disclosure element, so it opens without JavaScript. */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: var(--r);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line-2); background: rgba(30, 41, 59, .8);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu > summary span {
  width: 15px; height: 1.8px; border-radius: 2px; background: #fff;
  transition: transform .22s ease, opacity .22s ease;
}
.menu[open] > summary span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.menu[open] > summary span:nth-child(2) { opacity: 0; }
.menu[open] > summary span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
.menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.menu nav {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 208px; display: flex; flex-direction: column; padding: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
}
.menu nav a {
  padding: 11px 14px; border-radius: var(--r);
  color: var(--fg-soft); text-decoration: none; font-size: var(--t-xs); font-weight: 600;
}
.menu nav a:hover, .menu nav a[aria-current="page"] { background: var(--bg-900); color: #fff; }

/* --- Type ------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; color: #fff; letter-spacing: -0.02em; }
h1 { font-size: var(--h1); font-weight: 800; line-height: 1.22; }
h2 { font-size: var(--h2); font-weight: 700; line-height: 1.25; }
h3 { font-size: var(--h3); font-weight: 700; line-height: 1.4; }
h4 { font-size: var(--t-sm); font-weight: 700; line-height: 1.4; }
p { margin: 0; }
a { color: var(--accent-3); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
strong { color: var(--fg-soft); font-weight: 600; }

.eyebrow {
  display: block; margin-bottom: 6px;
  color: var(--accent-3);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.sub { color: var(--fg-2); font-size: var(--t-xs); line-height: 1.75; }
@media (min-width: 768px) { .sub { font-size: var(--t-sm); } }

/* Centred section header, as in the reference. */
.head { max-width: 42rem; margin: 0 auto clamp(28px, 5vw, 40px); text-align: center; }
.head h2 { margin-bottom: 10px; }

/* --- Badge ------------------------------------------------------------------ */

/* inline-block with text-align:center, not inline-flex: a flex row lays
   the dot and the two-line text side by side as two separate boxes, so
   even though the text centred within itself, the dot's own width had no
   matching space on the right and the whole group read as left-shifted.
   As one inline-block, the dot sits inline before the first line, and
   text-align:center centres the dot+text as a single unit — including the
   shorter wrapped second line under the true middle of the pill. */
.badge {
  /* block + width:fit-content + margin:auto centres the pill itself within
     its parent, independent of the parent's own text-align — needed since
     the home hero is left-aligned but this pill should still sit centred. */
  display: block; width: fit-content; margin-inline: auto;
  text-align: center;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: rgba(30, 41, 59, .8); border: 1px solid rgba(51, 65, 85, .6);
  color: var(--accent-3);
  font-size: var(--t-mini); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.badge__text { display: inline; }
.badge i {
  display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  margin-right: 8px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--r);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
@media (min-width: 768px) { .btn { font-size: var(--t-sm); padding: 13px 26px; } }
.btn--primary {
  background: #5A5CE8; color: #fff;   /* the reference #6366F1 is 4.47:1 with white */
  box-shadow: 0 10px 26px -10px rgba(99, 102, 241, .55);
}
.btn--primary:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn--ghost { background: rgba(30, 41, 59, .8); color: #fff; border-color: var(--line-2); }
.btn--ghost:hover { border-color: #475569; }
.btn--pill {
  border-radius: var(--r-pill); padding: 9px 17px;
  background: #5A5CE8; color: #fff; font-size: var(--t-xs);
  box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .5);
}
.btn--pill:hover { background: var(--accent-2); }
.btn--still { background: var(--bg-900); color: var(--fg-3); border-color: var(--line); cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }
@media (max-width: 519px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
  .btn-row--stack .btn { width: 100%; }
}

/* The full trademarked lockup, for the places that can carry it at size. */
.lockup { display: block; margin: 0 auto 26px; }
.lockup img { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; }

/* --- Hero --------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(40px, 8vw, 96px) clamp(44px, 8vw, 92px);
}
/* The simple, centred hero used by every page except the home page —
   products, services, about, aqraez, 404. Restored as its own rule so
   removing centring from .hero for the home page's new two-column hero
   doesn't touch these. */
.hero__in { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; text-align: center; }
.hero__in h1 { margin: 22px 0 16px; }
.hero__in .sub { max-width: 36rem; margin: 0 auto 30px; color: var(--fg-2); font-size: 16px; }
/* The glow now lives behind the orb only (see .hero__visual below),
   never near the header, so it can't read as a patch under the nav. */

/* Text on the left, the mark on the right — the reference's two-column
   hero. Left-aligned rather than centred: the eyebrow badge wraps to two
   lines at phone widths (measured against the reference — it wraps there
   too), and centring a wrapped pill is what made the second line float
   oddly on its own. Left alignment reads correctly wrapped or not. */
.hero__grid {
  position: relative; z-index: 1;
  display: grid; gap: 40px; align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 50px; }
}
.hero__copy { max-width: 34rem; }
.hero h1 { margin: 20px 0 16px; }
.hero .sub { max-width: 32rem; margin-bottom: 28px; }

/* The headline's first two lines pick up the brand gradient — white into
   the accent, the same colours already used for buttons and glow, not a
   new hue. The close, "Powering / Digital Growth.", stays plain heading
   white so the gradient reads as emphasis rather than decoration. */
.gradient {
  background: linear-gradient(100deg, #fff 12%, var(--accent-3) 55%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Hero visual: an orbit ring around the Getwiy mark ------------------- */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 220px; }
.hero__glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(59, 130, 246, .16);
  filter: blur(90px); pointer-events: none;
}
.orb {
  position: relative;
  width: 240px; height: 240px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .32), transparent 8%),
    radial-gradient(circle, rgba(99, 102, 241, .58), rgba(15, 15, 35, .32) 42%, transparent 70%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 100px rgba(99, 102, 241, .32), inset 0 0 60px rgba(59, 130, 246, .16);
}
.orb::before, .orb::after {
  content: ""; position: absolute; inset: -34px;
  border: 1px solid rgba(129, 140, 248, .38); border-radius: 50%;
  transform: rotate(25deg) scaleY(.34);
}
.orb::after { inset: -54px; transform: rotate(-30deg) scaleY(.3); border-color: rgba(96, 165, 250, .32); }
.core {
  /* Flat --card read as plain dark-grey/black, not "premium", so a gradient
     was added for depth — but its highlight sat at 30%/22%, almost exactly
     where the logo itself sits, and washed out that corner of the mark. The
     sheen now runs corner to corner as a plain linear gradient with no
     bright hotspot, so nothing competes with the logo underneath it. */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 22px;
  background: linear-gradient(155deg, #2B3868 0%, #161F3B 55%, #0D1226 100%);
  border: 1px solid rgba(255, 255, 255, .38);
  display: grid; place-items: center;
  box-shadow:
    0 16px 36px rgba(2, 6, 23, .55),
    0 0 0 1px rgba(99, 102, 241, .25),
    0 0 34px rgba(99, 102, 241, .4);
}
.core img {
  width: 54px; height: auto; display: block;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .5)) brightness(1.1) saturate(1.08);
}
@media (min-width: 900px) {
  .hero__visual { min-height: 340px; }
  .hero__glow { width: 360px; height: 360px; }
  .orb { width: 320px; height: 320px; }
  .orb::before { inset: -44px; }
  .orb::after { inset: -70px; }
  .core { width: 92px; height: 92px; border-radius: 26px; }
  .core img { width: 54px; }
}

/* --- Trust bar ------------------------------------------------------------------ */

.trust {
  border-block: 1px solid rgba(30, 41, 59, .8);
  background: rgba(2, 6, 23, .4);
  padding-block: 16px;
}
.trust ul {
  max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px;
  list-style: none;
}
.trust li {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-2); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
@media (min-width: 768px) { .trust li { font-size: 12px; } }
.trust svg { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }

/* --- Grid ------------------------------------------------------------------------ */

.grid { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 560px) and (max-width: 767px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }

/* --- Card -------------------------------------------------------------------------- */

.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  transition: border-color .2s ease;
}
.card:hover { border-color: var(--line-2); }
/* Two soft corner blobs, from the founder's reference panel (its ::after
   circle bleeding off the bottom-right corner). Kept here on both corners,
   the second larger than the first, both mostly clipped by the card's own
   rounded edge so only a curve of each shows. */
/* The top-left blob (tried both small and enlarged) never read as a clean
   shape against the icon tile sitting right on top of it — removed. The
   bottom-right one stays; it has room to breathe. */
.card::after {
  content: ""; position: absolute; pointer-events: none;
  width: 220px; height: 220px; border-radius: 50%;
  right: -110px; bottom: -120px;
  background: rgba(99, 102, 241, .14);
}
.card > * + * { margin-top: 10px; }
.card p { color: var(--fg-2); font-size: var(--t-xs); line-height: 1.75; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ico {
  width: 40px; height: 40px; border-radius: var(--r);
  display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(99, 102, 241, .1); border: 1px solid rgba(99, 102, 241, .2);
  color: var(--accent-3);
}
.ico svg { width: 19px; height: 19px; display: block; }

.pill {
  display: inline-block; padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--line); border: 1px solid var(--line-2);
  color: var(--fg-soft); font-size: var(--t-micro); font-weight: 600; white-space: nowrap;
}
.card__foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(30, 41, 59, .8);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; font-size: var(--t-mini); color: var(--fg-2);
}
.ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.ok svg { width: 13px; height: 13px; }
.soon { color: var(--fg-3); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(30, 41, 59, .6); border: 1px solid var(--line);
  color: var(--fg-2); font-size: var(--t-mini);
}

/* --- Steps ---------------------------------------------------------------------------- */

.steps { counter-reset: s; display: grid; gap: 14px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px;
}
.step__n {
  counter-increment: s;
  width: 32px; height: 32px; border-radius: var(--r);
  display: grid; place-items: center;
  background: rgba(99, 102, 241, .1); border: 1px solid rgba(99, 102, 241, .2);
  color: var(--accent-3); font-size: 12px; font-weight: 700;
}
.step__n::before { content: counter(s, decimal-leading-zero); }
.step p { margin-top: 5px; color: var(--fg-2); font-size: var(--t-xs); line-height: 1.75; }

/* --- FAQ --------------------------------------------------------------------------------- */

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 20px;
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: #fff; font-size: var(--t-xs); font-weight: 600;
}
@media (min-width: 768px) { .faq summary { font-size: var(--t-sm); } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after { content: "+"; color: var(--accent-3); font-size: 1.1rem; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 12px; color: var(--fg-2); font-size: var(--t-xs); line-height: 1.8; }

/* --- Founder panel --------------------------------------------------------------------------- */

.founder {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 4vw, 34px); text-align: center;
}
.founder img {
  /* 3:4 — the founder's approved ratio. At 168x224 it reads clearly bigger
     than the old 128px square without going thin/narrow: 3:4 is close to
     square (0.75), so width stays close to the old square's width and only
     height grows to match. */
  width: 168px; height: 224px; border-radius: var(--r-lg); object-fit: cover;
  border: 1px solid var(--line-2); margin: 0 auto 18px; display: block;
}
.founder h3 { margin-bottom: 2px; }
.founder__role {
  display: block; margin-bottom: 12px; color: var(--accent-3);
  font-size: var(--t-mini); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
/* Paragraph copy only — the name and role above stay centred. Justify
   solved the ragged-edge look but opened uneven gaps between words on the
   lines it had to stretch; left keeps a clean edge without that trade-off. */
.founder p {
  max-width: 38rem; margin: 0 auto; color: var(--fg-2); font-size: var(--t-xs); line-height: 1.8;
  text-align: left;
}
.founder p + p { margin-top: 12px; }

/* --- Closing CTA ------------------------------------------------------------------------------ */

.cta {
  background: linear-gradient(to bottom, var(--bg-900), var(--card));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 40px); text-align: center;
}
.cta h2 { font-size: clamp(26px, 3vw, 40px); max-width: 23rem; margin-inline: auto; }
@media (min-width: 640px) { .cta h2 { max-width: 31rem; } }
.cta p { margin: 10px auto 24px; max-width: 34rem; color: var(--fg-2); font-size: var(--t-xs); }

/* --- Letter grid ----------------------------------------------------------------------------------- */

.letters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 768px) { .letters { grid-template-columns: repeat(4, 1fr); } }
.letters div {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 18px;
}
.letters b { display: block; color: var(--accent-3); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.letters span { display: block; margin-top: 8px; color: var(--fg-2); font-size: var(--t-xs); }

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

.foot { border-top: 1px solid rgba(30, 41, 59, .8); padding-block: 40px 28px; }
.foot__grid { display: grid; gap: 28px; }
@media (min-width: 720px) { .foot__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.foot__mark { height: 42px; width: auto; display: block; }
.foot__about { margin-top: 14px; color: var(--fg-3); font-size: var(--t-xs); line-height: 1.8; max-width: 30rem; }
.foot h4 { color: #fff; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.foot a { display: block; margin-bottom: 9px; color: var(--fg-2); text-decoration: none; font-size: var(--t-xs); }
.foot a:hover { color: #fff; }
.foot__bar {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(30, 41, 59, .8);
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
  color: var(--fg-3); font-size: var(--t-micro);
}

/* --- Motion --------------------------------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}

/* --- Responsive header: kept last so nothing later can override it ------------------------------------------ */

.hdr .hdr__nav { display: none; }
@media (min-width: 900px) {
  .hdr .hdr__nav { display: flex; }
  .hdr .menu { display: none; }
}

/* --- Teaser blocks on the home page ------------------------------------------
   The home page introduces Products and Services and sends people to the real
   pages. Each teaser carries one piece of hard evidence so the link is worth
   tapping: numbers for products, capability chips for services. */

.teaser { display: grid; gap: 26px; align-items: center; }
@media (min-width: 880px) { .teaser { grid-template-columns: 1fr 1fr; } }
.teaser__copy > * + * { margin-top: 14px; }

/* --- Legal pages ---------------------------------------------------------------
   Privacy policy and terms. Same shell as the rest of the site; the body is set
   for long-form reading rather than scanning. The wording is not touched here —
   it is generated verbatim from the source .md so it stays identical to the
   text inside the app. */

.legal { max-width: 46rem; margin: 0 auto; padding-inline: var(--gutter); }
.legal .updated {
  margin-top: 10px; color: var(--fg-3);
  font-size: var(--t-mini); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

.short {
  margin: clamp(28px, 5vw, 40px) 0;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r-lg);
  padding: clamp(20px, 3.4vw, 28px);
}
.short h2 { font-size: var(--t-mini); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-3); margin-bottom: 8px; }
.short__note { color: var(--fg-3); font-size: var(--t-xs); line-height: 1.7; }

.picker { margin: 18px 0; }
.picker label {
  display: block; margin-bottom: 8px; color: var(--fg-3);
  font-size: var(--t-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.picker select {
  width: 100%; max-width: 21rem; padding: 11px 38px 11px 14px;
  font: inherit; font-size: var(--t-xs); color: #fff;
  background-color: var(--bg-900); border: 1px solid var(--line-2); border-radius: var(--r);
  -webkit-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent-3) 50%),
    linear-gradient(135deg, var(--accent-3) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.short__body p { color: var(--fg-2); font-size: var(--t-xs); line-height: 1.8; }
.short__body p + p { margin-top: 14px; }
.short__body b {
  display: block; margin-bottom: 3px; color: var(--fg-3);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.short [hidden] { display: none; }

.toc {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 30px;
}
.toc summary {
  list-style: none; cursor: pointer; color: var(--accent-3);
  font-size: var(--t-mini); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::marker { content: ""; }
.toc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.toc ol { margin: 14px 0 2px; padding-left: 20px; color: var(--fg-2); font-size: var(--t-xs); line-height: 2; }
.toc a { color: var(--fg-2); text-decoration: none; }
.toc a:hover { color: #fff; text-decoration: underline; }

.prose { color: var(--fg-2); font-size: var(--t-xs); line-height: 1.85; }
@media (min-width: 768px) { .prose { font-size: var(--t-sm); } }
.prose h2 { font-size: var(--h3); margin: 34px 0 14px; }
.prose h3 {
  margin: 34px 0 12px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: var(--t-base); scroll-margin-top: 90px;
}
.prose h4 { margin: 22px 0 8px; color: var(--fg-soft); font-size: var(--t-xs); }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent-3); }


/* ==========================================================================
   Typography — matched to the founder's HFM reference page element by
   element, and checked against that page in the same browser: size, weight,
   letter-spacing and line-height, at 390px and 1280px. Same typeface (Inter).
   Colours, surfaces, spacing and components are the v11 build, untouched.
   ========================================================================== */

body { line-height: 1.6; }

h1 {
  /* Smaller than the reference and four lines instead of two — the
     headline now reads Engineering / Digital Products. / Powering /
     Digital Growth., so the per-line size comes down to keep the block a
     sensible height instead of four 80px lines stacking past the fold. */
  font-size: clamp(39px, 4.4vw, 61px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
}
h2 {
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 700; line-height: 1.05; letter-spacing: -.04em;
}
h3 { font-size: 19px; font-weight: 700; line-height: 1.6; letter-spacing: normal; }

.hero h1 { margin-block: 20px 16px; }
.hero .sub {
  font-size: 16px; line-height: 1.6;
  /* Two points down from the reference's 18px, and off the slate-blue
     body colour onto a near-white "chalk" so it doesn't read as a dimmed
     link the way --fg-2 does against this background. */
  color: rgba(255, 255, 255, .82);
}
.head .sub, .teaser__copy .sub { font-size: 15px; line-height: 1.6; }
.head h2 { margin-bottom: 14px; }

.hdr__nav a { font-weight: 400; }
.hdr__nav a.btn--pill { font-size: 14px; font-weight: 400; letter-spacing: normal; }

.badge    { font-size: 12px; font-weight: 400; letter-spacing: .06em; line-height: 1.6; }
.eyebrow  { font-size: 14px; font-weight: 400; letter-spacing: .14em; line-height: 1.6; margin-bottom: 10px; }
.trust li { font-size: 12px; font-weight: 400; letter-spacing: normal; line-height: 1.6; text-transform: none; }

.btn { font-size: 14px; font-weight: 650; letter-spacing: normal; }

.pill    { font-size: 11px; font-weight: 400; letter-spacing: .12em; line-height: 1.6; }
.tags li { font-size: 13px; line-height: 1.6; }

.card p, .step p { font-size: 13px; line-height: 1.6; }
.step h3 { font-size: 18px; }
.step__n { font-weight: 400; }

.founder h3 { font-size: 18px; }
.founder__role {
  font-size: 14px; font-weight: 400; letter-spacing: normal; line-height: 1.6;
  text-transform: none;
}
.founder p { font-size: 17px; line-height: 1.65; text-align: left; }

.cta p     { font-size: 16px; line-height: 1.6; }
.foot__bar { font-size: 12px; line-height: 1.6; }

/* --- Pieces the HFM content needs, drawn in the v11 language -------------- */

/* Products: a wide feature card beside a narrow one. */
.teaser--split { align-items: stretch; }
@media (min-width: 880px) { .teaser--split { grid-template-columns: 1.25fr .75fr; } }
.card--feature h3 { font-size: 28px; margin-block: 4px 12px; }
.card--feature p  { font-size: 16px; }
.card--feature .tags { margin: 18px 0 22px; }
.card--small h3 { font-size: 23px; }
.card--small p  { font-size: 16px; }
.card__num {
  display: block; margin-bottom: 18px;
  font-size: 70px; font-weight: 800; line-height: 1;
  color: var(--line-2);
}

/* About: three short statements with an accent edge. */
.points {
  list-style: none; margin: 22px auto 24px; padding: 0;
  max-width: 34rem; text-align: left; display: grid; gap: 12px;
}
.points li {
  border-left: 2px solid var(--accent); padding-left: 14px;
  color: var(--fg-soft); font-size: 14px; line-height: 1.6;
}
.founder p + p { margin-top: 12px; }
.cta .eyebrow { margin-bottom: 12px; }

/* ==========================================================================
   Project planner — the brief-builder the home page had before this
   redesign. The founder asked for it back in the contact section: pick what
   fits, the sentence composes itself, and "Send this brief" opens an email
   already filled in. Works without JS — the radios are plain inputs and the
   button falls back to a blank mailto.
   ========================================================================== */

.planner { text-align: left; margin-top: 8px; }
.planner fieldset { border: 0; margin: 0 0 20px; padding: 0; }
.planner legend {
  padding: 0; margin-bottom: 10px;
  color: var(--fg-3); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { cursor: pointer; user-select: none; display: inline-block; }
.opts input { position: absolute; opacity: 0; width: 0; height: 0; }
.opts span {
  display: inline-block; padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: rgba(30, 41, 59, .5);
  color: var(--fg-soft); font-size: 13px; font-weight: 500;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.opts span:hover { border-color: var(--accent-3); }
.opts input:checked + span {
  border-color: var(--accent); background: rgba(99, 102, 241, .18); color: #fff;
}
.opts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.planner__out {
  margin-top: 4px; padding: 16px 18px;
  border-radius: var(--r); border: 1px dashed var(--line-2);
  background: rgba(2, 6, 23, .4);
  color: var(--fg-2); font-size: 13px; line-height: 1.7;
}
.planner__out b { color: var(--accent-3); font-weight: 600; }
.planner__cta { margin-top: 20px; }

/* --- About page tagline: the GET/W/I/Y grid spelled as one line -------- */
.tagline {
  margin-top: 18px; text-align: center;
  color: var(--accent-3); font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; font-style: italic;
}