/* ==========================================================================
   Alaa Tawalbeh — Fractional CTO
   Hand-written static stylesheet. No build step, no framework.
   Edit and upload directly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — deep navy, layered */
  --bg:            #070c14;
  --bg-raised:     #0b1220;
  --surface:       #0f1826;
  --surface-hi:    #141f31;
  --border:        #1b2739;
  --border-hi:     #2a3a53;

  /* Ink */
  --text:          #eaf1f8;
  --text-2:        #9db0c7;
  /* #64768e measured 4.24:1 against the card background — under the 4.5:1
     WCAG AA minimum for body text. This is 5.25:1 and still reads as muted. */
  --text-3:        #7a8ba3;

  /* Accent — electric cyan */
  --cyan:          #00e5ff;
  /* Channel values so rgba() glows can reference the token too —
     without these, changing the accent leaves 38 hardcoded glows behind. */
  --cyan-rgb:      0, 229, 255;
  --cyan-deep-rgb: 0, 147, 168;
  --cyan-soft:     #6df2ff;
  --cyan-deep:     #0093a8;
  --cyan-glow:     rgba(var(--cyan-rgb), .16);

  /* Type */
  --font-display:  'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Geometry */
  --radius:        16px;
  --radius-sm:     10px;
  --radius-pill:   999px;
  --wrap:          1140px;
  --gutter:        clamp(20px, 5vw, 40px);

  /* Motion */
  --ease:          cubic-bezier(.22, .68, .32, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Sticky header clearance for anchor jumps */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

::selection { background: rgba(var(--cyan-rgb), .28); color: #fff; }

/* --------------------------------------------------------------------------
   2. Atmosphere — grid, glow, grain
   -------------------------------------------------------------------------- */

/* Fine engineering grid, fading out down the page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(120, 160, 200, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 160, 200, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 75%);
}

/* Cyan bloom behind the hero */
body::after {
  content: '';
  position: fixed;
  top: -30vh;
  left: 50%;
  width: min(1200px, 130vw);
  height: 90vh;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--cyan-rgb), .10) 0%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 30% 30%, rgba(56, 120, 255, .07) 0%, transparent 70%);
  filter: blur(6px);
}

/* Film grain, sits above the glow, below content */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

main { position: relative; z-index: 2; }

section { position: relative; }

.section {
  padding-block: clamp(72px, 11vw, 128px);
}

.section--tight { padding-block: clamp(56px, 8vw, 88px); }

/* Hairline divider between major bands */
.section + .section > .wrap::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: clamp(56px, 8vw, 96px);
  background: linear-gradient(to right, transparent, var(--border) 12%, var(--border) 88%, transparent);
}

/* --- Section headings --- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}

.kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12;
  max-width: 20ch;
}

.section-lede {
  margin-top: 18px;
  max-width: 62ch;
  color: var(--text-2);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
}

.section-head { margin-bottom: clamp(40px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s var(--ease), background .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease), color .22s var(--ease);
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary {
  background: var(--cyan);
  color: #041016;
  box-shadow: 0 0 0 0 var(--cyan-glow), 0 8px 28px -10px rgba(var(--cyan-rgb), .55);
}

.btn--primary:hover {
  background: var(--cyan-soft);
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px var(--cyan-glow), 0 14px 34px -12px rgba(var(--cyan-rgb), .7);
}

.btn--ghost {
  background: rgba(255, 255, 255, .03);
  border-color: var(--border-hi);
  color: var(--text);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  border-color: var(--cyan-deep);
  color: var(--cyan);
  transform: translateY(-2px);
}

.btn--sm { padding: 10px 18px; font-size: 13.5px; }

.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  background: rgba(7, 12, 20, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -.01em;
  flex-shrink: 0;
}

.brand__mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(var(--cyan-rgb), .28));
  transition: filter .25s var(--ease), transform .25s var(--ease);
}

.brand:hover .brand__mark {
  filter: drop-shadow(0 0 16px rgba(var(--cyan-rgb), .5));
  transform: translateY(-1px);
}

.brand__name { font-size: 15px; }
.brand__name span { color: var(--text-3); font-weight: 400; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.nav__link {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease);
}

.nav__link:hover { color: var(--text); background: rgba(255, 255, 255, .04); }

.nav__link.is-active { color: var(--cyan); }

.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--cyan);
  opacity: .8;
}

.header__cta { margin-inline-start: 8px; }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}

.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-toggle[aria-expanded='true'] .icon-open  { display: none; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(120px, 17vw, 172px);
  padding-bottom: clamp(64px, 9vw, 104px);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-pill);
  background: rgba(var(--cyan-rgb), .05);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 26px;
}

.hero__badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .18);
  animation: pulse-dot 2.6s var(--ease) infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .18); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--cyan-rgb), .04); }
}

.hero h1 {
  font-family: var(--font-display);
  /* 32px floor rather than 38px: at 360px wide the old minimum left almost no
     room for a long word before it had to break awkwardly. */
  font-size: clamp(32px, 7.4vw, 68px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.04em;
}

/* The underline is painted as a background rather than a positioned ::after.
   The old version needed white-space: nowrap to stay on one line, which forced
   the headline off the right edge of narrow screens. As a background with
   box-decoration-break: clone, it redraws under each line when the phrase
   wraps — so the phrase is free to break wherever it needs to. */
.hero h1 em {
  font-style: normal;
  color: var(--cyan);
  padding-bottom: .1em;
  background-image: linear-gradient(to right,
    transparent, rgba(var(--cyan-deep-rgb), .55), rgba(var(--cyan-rgb), .55), rgba(var(--cyan-deep-rgb), .55), transparent);
  background-size: 100% .1em;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* The personal statement opens the lede rather than sitting on its own —
   as a separate block it read as a stranded fragment, and left the sentence
   after it starting with "And". Emphasised inline, it leads the paragraph. */
.hero__lede-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08em;
  letter-spacing: -.02em;
  color: var(--text);
}

.hero__lede {
  margin-top: 26px;
  max-width: 58ch;
  font-size: clamp(16px, 1.7vw, 18.5px);
  line-height: 1.75;
  color: var(--text-2);
}

.hero__lede strong { color: var(--text); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__markets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hero__markets b { color: var(--text-2); font-weight: 500; }

.hero__markets span { display: inline-flex; align-items: center; gap: 8px; }

.hero__markets span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan-deep);
}

/* --- Portrait --- */

.portrait {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3 / 4;
}

/* Backdrop sits in the lower square, so the head breaks above the ring */
.portrait__stage {
  position: absolute;
  inset: auto 0 0;
  aspect-ratio: 1;
  pointer-events: none;
}

.portrait__glow {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 52%,
    rgba(var(--cyan-rgb), .24) 0%,
    rgba(var(--cyan-deep-rgb), .11) 45%,
    transparent 72%);
  filter: blur(16px);
}

.portrait__ring {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(var(--cyan-rgb), .20);
  box-shadow: inset 0 0 70px -24px rgba(var(--cyan-rgb), .55);
}

.portrait__arc {
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  border: 1px dashed rgba(126, 162, 200, .15);
  animation: spin-slow 72s linear infinite;
}

@keyframes spin-slow { to { transform: rotate(360deg); } }

/* <picture> would otherwise create an inline box in the flow. display:contents
   removes it, leaving the absolutely positioned img to lay out against
   .portrait exactly as it did before. */
.portrait picture { display: contents; }

/* The cutout floats — no frame, no crop */
.portrait__img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  /* Rim light: a black t-shirt would otherwise vanish into the navy */
  filter:
    drop-shadow( 2px 0 1px rgba(var(--cyan-rgb), .34))
    drop-shadow(-2px 0 1px rgba(56, 120, 255, .24))
    drop-shadow(0 26px 44px rgba(0, 0, 0, .78));
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}

/* Fallback monogram when the photo file is missing */
.portrait__fallback {
  position: absolute;
  inset: auto 0 0;
  aspect-ratio: 1;
  display: none;
  place-items: center;
  font-family: var(--font-display);
  font-size: 104px;
  font-weight: 700;
  letter-spacing: -.05em;
  color: rgba(var(--cyan-rgb), .18);
}

.portrait.no-photo .portrait__img      { display: none; }
.portrait.no-photo .portrait__fallback { display: grid; }

/* Floating credential chip overlapping the portrait */
.portrait__chip {
  position: absolute;
  left: -22px;
  bottom: 30px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  background: rgba(15, 24, 38, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9);
}

.portrait__chip b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -.02em;
  line-height: 1;
}

.portrait__chip span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
  max-width: 13ch;
}

/* --------------------------------------------------------------------------
   7. Stats band
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(to bottom, rgba(20, 31, 49, .55), rgba(11, 18, 32, .35));
  overflow: hidden;
}

.stat {
  padding: 26px 22px;
  border-inline-start: 1px solid var(--border);
  text-align: center;
}

.stat:first-child { border-inline-start: 0; }

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text);
}

.stat__num span { color: var(--cyan); }

.stat__label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. "Who this is for"
   -------------------------------------------------------------------------- */

.problems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.problem {
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--surface), rgba(11, 18, 32, .6));
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.problem:hover { border-color: var(--border-hi); transform: translateY(-3px); }

.problem__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan-deep);
  margin-bottom: 16px;
}

.problem h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.35;
  margin-bottom: 10px;
}

.problem p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   8b. AI in practice
   -------------------------------------------------------------------------- */

.ai {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.ai__intro { position: sticky; top: 112px; }

.ai__intro .section-lede { margin-bottom: 30px; }

.ai__list {
  list-style: none;
  counter-reset: ai;
  display: flex;
  flex-direction: column;
}

.ai__item {
  counter-increment: ai;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}

.ai__item:first-child { border-top: 0; padding-top: 0; }
.ai__item:last-child  { padding-bottom: 0; }

.ai__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--border-hi);
  background: linear-gradient(150deg, rgba(var(--cyan-rgb), .09), rgba(11, 18, 32, .8));
  color: var(--cyan);
  flex-shrink: 0;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

.ai__icon svg { width: 21px; height: 21px; }

.ai__item:hover .ai__icon {
  border-color: rgba(var(--cyan-rgb), .5);
  box-shadow: 0 0 0 5px rgba(var(--cyan-rgb), .07);
  transform: translateY(-2px);
}

.ai__body h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Mono index number in front of each heading */
.ai__body h3::before {
  content: '0' counter(ai);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--cyan-deep);
}

.ai__body p {
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   9. Offer / engagement models
   -------------------------------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--surface), rgba(11, 18, 32, .7));
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.tier:hover {
  border-color: var(--border-hi);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -35px rgba(0, 0, 0, .9);
}

/* Emphasised middle tier */
.tier--featured {
  border-color: rgba(var(--cyan-rgb), .38);
  background:
    linear-gradient(to bottom, rgba(var(--cyan-rgb), .06), rgba(11, 18, 32, .8) 55%);
  box-shadow: 0 0 0 1px rgba(var(--cyan-rgb), .1), 0 30px 60px -35px rgba(var(--cyan-rgb), .3);
}

.tier--featured:hover {
  border-color: rgba(var(--cyan-rgb), .6);
  box-shadow: 0 0 0 1px rgba(var(--cyan-rgb), .18), 0 34px 66px -34px rgba(var(--cyan-rgb), .42);
}

.tier__flag {
  position: absolute;
  top: -11px;
  left: 28px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: #041016;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tier__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-hi);
  background: rgba(var(--cyan-rgb), .06);
  color: var(--cyan);
  margin-bottom: 20px;
}

.tier__icon svg { width: 20px; height: 20px; }

.tier h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.025em;
  margin-bottom: 8px;
}

.tier__for {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.65;
  margin-bottom: 22px;
  min-height: 3.3em;
}

.tier__price {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.tier__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  flex: 1;
}

.tier__list li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.tier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .48em;
  width: 14px;
  height: 8px;
  border-left: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: rotate(-45deg);
  opacity: .85;
}

.tier .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   10. Engagements
   -------------------------------------------------------------------------- */

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

.card {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--surface), rgba(11, 18, 32, .7));
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

/* Corner accent that lights up on hover */
.card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 92px;
  height: 92px;
  background: radial-gradient(circle at 100% 0%, var(--cyan-glow), transparent 70%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.card:hover {
  border-color: var(--border-hi);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -35px rgba(0, 0, 0, .9);
}

.card:hover::before { opacity: 1; }

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.card__role {
  flex-shrink: 0;
  padding: 4px 11px;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-pill);
  background: rgba(var(--cyan-rgb), .05);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

.card__place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
}

.card__place::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-deep);
}

.card p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-3);
  margin-bottom: 12px;
}

.card p:last-of-type { margin-bottom: 0; }

.card__built {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.card__built-label {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}

.tag {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, .02);
  font-size: 12.5px;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   11. Experience timeline
   -------------------------------------------------------------------------- */

.timeline { display: flex; flex-direction: column; }

.entry {
  display: grid;
  grid-template-columns: 108px 1px minmax(0, 1fr);
  gap: 0 30px;
  padding-bottom: 44px;
}

.entry:last-child { padding-bottom: 0; }

.entry__period {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-3);
  padding-top: 2px;
  text-align: right;
  white-space: nowrap;
}

.entry__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entry__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-hi);
  margin-top: 7px;
  flex-shrink: 0;
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.entry:hover .entry__dot {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 5px rgba(var(--cyan-rgb), .13);
}

.entry__line {
  flex: 1;
  width: 1px;
  margin-top: 8px;
  background: linear-gradient(to bottom, var(--border), transparent);
}

.entry:last-child .entry__line { display: none; }

.entry__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.entry__org {
  font-size: 13.5px;
  color: var(--cyan);
  margin-top: 5px;
  margin-bottom: 12px;
}

.entry__desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-3);
  margin-bottom: 14px;
}

.bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.bullets li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-3);
}

.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 1px;
  background: var(--cyan-deep);
}

/* --------------------------------------------------------------------------
   12. Capabilities + certifications
   -------------------------------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.col-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.skill-group { margin-bottom: 26px; }
.skill-group:last-child { margin-bottom: 0; }

.skill-group h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 12px;
  letter-spacing: .01em;
}

.badges { display: flex; flex-wrap: wrap; gap: 8px; }

.badge {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  font-size: 13px;
  color: var(--text-2);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.badge:hover {
  border-color: var(--cyan-deep);
  color: var(--text);
  background: rgba(var(--cyan-rgb), .05);
}

.certs { display: flex; flex-direction: column; gap: 9px; }

.cert {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(15, 24, 38, .55);
  font-size: 13.5px;
  line-height: 1.45;
  transition: border-color .2s var(--ease);
}

.cert:hover { border-color: var(--border-hi); }

.cert span { color: var(--text-2); }

.cert time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   12b. FAQ — native <details>, so it works with JavaScript disabled
   -------------------------------------------------------------------------- */

.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--surface), rgba(11, 18, 32, .6));
  transition: border-color .25s var(--ease);
}

.faq__item:hover { border-color: var(--border-hi); }

.faq__item[open] { border-color: rgba(var(--cyan-rgb), .28); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.45;
  color: var(--text);
  transition: color .2s var(--ease);
}

/* Hide the default disclosure triangle in every engine */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }

.faq__item summary:hover { color: var(--cyan-soft); }

/* Custom +/- indicator */
.faq__item summary::after {
  content: '';
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-inline-start: auto;
  margin-top: 6px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) center / 1.5px 13px no-repeat;
  transition: transform .3s var(--ease);
}

/* Plus rotates into a cross when the answer opens */
.faq__item[open] summary::after { transform: rotate(135deg); }

.faq__answer {
  padding: 0 24px 22px;
}

.faq__answer p {
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-block-start: 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-3);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   13. Booking / contact
   -------------------------------------------------------------------------- */

.booking {
  position: relative;
  padding: clamp(40px, 6vw, 68px) clamp(28px, 5vw, 60px);
  border: 1px solid var(--border-hi);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(var(--cyan-rgb), .09), transparent 65%),
    linear-gradient(to bottom, var(--surface), var(--bg-raised));
  overflow: hidden;
}

.booking::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
  opacity: .6;
}

.booking__head { text-align: center; max-width: 60ch; margin-inline: auto; }

.booking__head .kicker { justify-content: center; }

.booking__head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.booking__head p {
  margin-top: 16px;
  color: var(--text-2);
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.75;
}

/* --- Enquiry form --- */

.form {
  max-width: 760px;
  margin: 44px auto 0;
  text-align: left;
}

/* Honeypot — off-screen rather than display:none, which some bots skip */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
}

.field abbr {
  color: var(--cyan);
  text-decoration: none;
  border: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(7, 12, 20, .62);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); opacity: .75; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-hi); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan-deep);
  background: rgba(7, 12, 20, .85);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .13);
}

.field textarea { min-height: 148px; resize: vertical; }

/* Native select arrow replaced to match the dark palette */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239db0c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
}

.field select option { background: var(--surface); color: var(--text); }

/* Set by script.js when a field fails validation */
.field.is-invalid input,
.field.is-invalid textarea {
  border-color: rgba(255, 107, 107, .65);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .11);
}

.field__error {
  display: none;
  margin-top: 7px;
  font-size: 13px;
  color: #ff9b9b;
}

.field.is-invalid .field__error { display: block; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 26px;
}

.form__note {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.6;
}

/* Submit button busy state */
.btn.is-loading { pointer-events: none; opacity: .75; }

.btn.is-loading svg {
  animation: spin .8s linear infinite;
  stroke-dasharray: 14 30;
}

@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  display: none;
  margin-top: 22px;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  line-height: 1.65;
}

.form__status.is-success {
  display: block;
  border-color: rgba(var(--cyan-rgb), .4);
  background: rgba(var(--cyan-rgb), .07);
  color: var(--cyan-soft);
}

.form__status.is-error {
  display: block;
  border-color: rgba(255, 107, 107, .42);
  background: rgba(255, 107, 107, .08);
  color: #ffb3b3;
}

/* --- Direct contact fallback --- */

.booking__or {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.booking__or::before,
.booking__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.booking__alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

/* An address or number, plus its own copy button */
.contact-pair {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
}

.copy {
  display: grid;
  place-items: center;
  width: 46px;
  flex-shrink: 0;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .03);
  color: var(--text-2);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.copy:hover { color: var(--cyan); border-color: var(--cyan-deep); }

.copy svg { width: 16px; height: 16px; }

.copy__done { display: none; }

.copy.is-done {
  color: var(--cyan);
  border-color: var(--cyan-deep);
  background: rgba(var(--cyan-rgb), .09);
}

.copy.is-done .copy__idle { display: none; }
.copy.is-done .copy__done { display: block; }

/* --------------------------------------------------------------------------
   13b. 404 page
   -------------------------------------------------------------------------- */

.notfound {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-block: 60px;
}

.notfound__inner { text-align: center; max-width: 640px; }

.notfound__mark {
  width: 60px;
  height: 60px;
  margin: 0 auto 32px;
  filter: drop-shadow(0 0 20px rgba(var(--cyan-rgb), .3));
}

.notfound__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
}

.notfound__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: 18px;
}

.notfound__lede {
  color: var(--text-2);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  max-width: 46ch;
  margin: 0 auto 34px;
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 44px;
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.notfound__links a {
  font-size: 13.5px;
  color: var(--text-3);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.notfound__links a:hover { color: var(--cyan); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding-block: 40px 48px;
  margin-top: clamp(60px, 8vw, 100px);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer__copy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: .04em;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 8px; }

.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.footer__links a:hover { color: var(--cyan); border-color: var(--cyan-deep); }

.footer__links svg { width: 14px; height: 14px; opacity: .7; }

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* Drop the compositor hint once the animation has run — it interferes with
   position: sticky and costs memory for no further benefit. */
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* No JS? Show everything. */
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. Accessibility
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--cyan);
  color: #041016;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top .2s var(--ease);
}

.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-inline-start: 0; }
  .stat:nth-child(n + 4) { border-top: 1px solid var(--border); }
}

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .portrait { order: -1; max-width: 300px; justify-self: start; }
  .portrait__chip { left: auto; right: -14px; }
  .ai { grid-template-columns: 1fr; }
  .ai__intro { position: static; }
  .tiers { grid-template-columns: 1fr; }
  .tier--featured { order: -1; }
  .cards { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 16px var(--gutter) 26px;
    background: rgba(7, 12, 20, .97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__link { padding: 13px 14px; font-size: 15px; }
  .nav__link.is-active::after { display: none; }

  .header__cta { margin: 12px 0 0; }
  .header__cta.btn { width: 100%; }
}

@media (max-width: 640px) {
  /* Sections were stacking ~72px of padding on each side of a ~56px divider
     margin — nearly 200px of empty space between every section on a phone. */
  .section { padding-block: 54px; }
  .section--tight { padding-block: 44px; }
  .section + .section > .wrap::before { margin-bottom: 40px; }

  /* The portrait was filling the entire first screen, pushing the headline
     and both CTAs below the fold. At this size it reads as a portrait shot
     rather than a hero image, and the offer is visible immediately. */
  .portrait { max-width: 208px; }
  .hero { padding-top: clamp(96px, 24vw, 120px); }
  .hero__grid { gap: 26px; }

  /* Hidden, not restyled: it overlapped the folded arms, and the stats band
     directly below already says "27 — years in technology". */
  .portrait__chip { display: none; }

  .hero__actions { gap: 10px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 22px 16px; }
  .stat:nth-child(odd)  { border-inline-start: 0; }
  .stat:nth-child(even) { border-inline-start: 1px solid var(--border); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .stat:last-child { grid-column: 1 / -1; border-inline-start: 0; }

  .entry { grid-template-columns: 1px minmax(0, 1fr); gap: 0 20px; }
  .entry__rail   { grid-column: 1; grid-row: 1 / span 2; }
  .entry__period { grid-column: 2; grid-row: 1; text-align: left; margin-bottom: 10px; }
  .entry__body   { grid-column: 2; grid-row: 2; }

  .card, .tier, .problem { padding: 24px 20px; }
  .card__top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .form__grid { grid-template-columns: 1fr; gap: 18px; }
  .form__foot .btn { width: 100%; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}