/* ==========================================================================
   LinkBulb Technology Limited — main.css
   Light corporate system: emerald primary, charcoal ink, real photography.
   Brand tokens live in :root — change those to rebrand the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand --- */
  --brand:       #0B7A4B;   /* emerald: buttons, links, bands             */
  --brand-dark:  #095F3B;   /* pressed / hover                            */
  --brand-soft:  #E7F3EC;   /* tinted surface                             */
  --mint:        #34D399;   /* light emerald, for accents on dark         */
  --charcoal:    #12181F;   /* headlines, deep sections                   */
  --charcoal-2:  #1C242E;

  /* --- Neutrals --- */
  --paper:      #F5F7F6;
  --white:      #FFFFFF;
  --grey-100:   #E9ECEA;
  --grey-300:   #D2D7D4;
  --body:       #4B5563;
  --muted:      #78837D;

  /* --- Layout --- */
  --wrap: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 9px;
  --radius-lg: 16px;
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  /* --- Type ---
     Scaled down deliberately: headings sit at corporate size, not poster
     size. Raise the max value in each clamp to go bigger again. */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.93rem + 0.1vw, 1rem);
  --step-1:  clamp(1.05rem, 1.01rem + 0.2vw, 1.16rem);
  --step-2:  clamp(1.2rem, 1.12rem + 0.34vw, 1.44rem);
  --step-3:  clamp(1.4rem, 1.26rem + 0.58vw, 1.8rem);
  --step-4:  clamp(1.65rem, 1.42rem + 0.95vw, 2.25rem);
  --step-5:  clamp(1.95rem, 1.6rem + 1.5vw, 2.95rem);

  /* --- Effects ---
     Shadows are layered rather than single: a tight contact shadow plus a
     wide soft one, which is what real light does and what keeps cards from
     looking like flat boxes with a grey blur behind them. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm:
    0 1px 2px rgba(18, 24, 31, 0.04),
    0 2px 8px -4px rgba(18, 24, 31, 0.06);
  --shadow-md:
    0 1px 2px rgba(18, 24, 31, 0.04),
    0 6px 16px -8px rgba(18, 24, 31, 0.12),
    0 16px 36px -18px rgba(18, 24, 31, 0.18);
  --shadow-lg:
    0 2px 4px rgba(18, 24, 31, 0.04),
    0 12px 28px -12px rgba(18, 24, 31, 0.16),
    0 32px 64px -24px rgba(18, 24, 31, 0.24);
  --shadow-brand: 0 10px 26px -12px rgba(11, 122, 75, 0.55);
  --dots: radial-gradient(circle, rgba(18, 24, 31, 0.06) 1px, transparent 1px);

  color-scheme: light;
}

/* Surface themes — sections declare one, components read the bindings. */
[data-theme="paper"] {
  --bg: var(--paper);
  --bg-raised: var(--white);
  --fg: var(--charcoal);
  --fg-dim: var(--body);
  --rule: var(--grey-100);
  --rule-strong: var(--grey-300);
  --accent: var(--brand);
}

[data-theme="white"] {
  --bg: var(--white);
  --bg-raised: var(--paper);
  --fg: var(--charcoal);
  --fg-dim: var(--body);
  --rule: var(--grey-100);
  --rule-strong: var(--grey-300);
  --accent: var(--brand);
}

[data-theme="ink"] {
  --bg: var(--charcoal);
  --bg-raised: var(--charcoal-2);
  --fg: #FFFFFF;
  --fg-dim: #A7B0C4;
  --rule: rgba(255, 255, 255, 0.12);
  --rule-strong: rgba(255, 255, 255, 0.26);
  --accent: var(--mint);
}

/* Legacy alias so older markup keeps rendering */
[data-theme="draft"] {
  --bg: var(--paper);
  --bg-raised: var(--white);
  --fg: var(--charcoal);
  --fg-dim: var(--body);
  --rule: var(--grey-100);
  --rule-strong: var(--grey-300);
  --accent: var(--brand);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--brand); color: #fff; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.026em;
  color: var(--fg, var(--charcoal));
  text-wrap: balance;
  font-feature-settings: "ss01", "cv01";
}

/* Optical correction: the bigger the type, the tighter it wants to be */
.display--xl { letter-spacing: -0.034em; line-height: 1.08; }
.display--l  { letter-spacing: -0.03em;  line-height: 1.12; }

.display--xl { font-size: var(--step-5); }
.display--l  { font-size: var(--step-4); }
.display--m  { font-size: var(--step-3); }
.display--s  { font-size: var(--step-2); letter-spacing: -0.022em; }

.display em { font-style: normal; color: var(--brand); }
[data-theme="ink"] .display em { color: var(--mint); }

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--fg-dim);
  text-wrap: pretty;
  max-width: 58ch;
  font-weight: 400;
}

.prose { max-width: 66ch; }
.prose p + p { margin-top: 1.1em; }
.prose p { color: var(--fg-dim); text-wrap: pretty; }
.prose strong { color: var(--fg); font-weight: 700; }

/* Long-form article body */
.article { max-width: 68ch; font-size: 1.05rem; line-height: 1.75; }
.article h2 { margin-block: 2.4rem 0.9rem; }
.article h3 { margin-block: 1.9rem 0.7rem; }
.article h2:first-child, .article h3:first-child { margin-top: 0; }
.article p + h2, .article p + h3 { margin-top: 2.4rem; }
.article ul { display: grid; gap: 0.5rem; margin-block: 1.1rem; }
.article li { display: flex; gap: 0.7rem; color: var(--fg-dim); }
.article li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* Eyebrow: bold label with a small connector, as on the reference */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}

[data-theme="ink"] .eyebrow { color: #fff; }

.eyebrow::before {
  content: "";
  width: 30px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--mint));
  flex: none;
  border-radius: 3px;
}

[data-theme="ink"] .eyebrow::before { background: var(--mint); }
.eyebrow--plain::before { display: none; }

.mono { font-size: var(--step--1); letter-spacing: 0.02em; }

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

.wrap--narrow { max-width: 920px; }

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
  isolation: isolate;
}

.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Dark sections get a soft brand glow from the top-left rather than sitting
   as a flat block of charcoal. */
[data-theme="ink"].section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 12% -10%, rgba(11, 122, 75, 0.30), transparent 62%),
    radial-gradient(ellipse 60% 50% at 95% 105%, rgba(52, 211, 153, 0.10), transparent 60%);
}

/* Dotted paper texture */
[data-theme="paper"].section::before,
[data-theme="draft"].section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--dots);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 10%, transparent 75%);
}

.section-head {
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  max-width: 60ch;
}

.section-head--split { max-width: none; align-items: end; gap: 1.4rem; }

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3rem;
  }
  .section-head--split > .section-head__aside { padding-bottom: 0.3rem; }
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.05rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.08), var(--shadow-brand);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

/* A faint top-lit sheen so the fill reads as a surface, not a flat swatch */
.btn::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

.btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(18, 24, 31, 0.1), 0 16px 32px -12px rgba(11, 122, 75, 0.6);
}

.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--charcoal);
  border-color: var(--grey-300);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--ghost::after { display: none; }

.btn--ghost:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: #fff;
  box-shadow: none;
}

[data-theme="ink"] .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}
[data-theme="ink"] .btn--ghost:hover { background: #fff; color: var(--charcoal); border-color: #fff; }

.btn--mint { --btn-bg: var(--mint); --btn-fg: var(--charcoal); }
.btn--mint:hover { background: #F08F0E; border-color: #F08F0E; box-shadow: 0 12px 28px -14px rgba(255,160,35,.9); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* Inline text link */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.35s var(--ease);
}

[data-theme="ink"] .tlink { color: var(--mint); }
.tlink:hover { background-size: 100% 2px; }
.tlink svg { transition: transform 0.25s var(--ease); }
.tlink:hover svg { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: #fff;
  padding: 0.8rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus { left: 0; }

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.header.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--grey-100);
  box-shadow: 0 6px 24px -18px rgba(18, 24, 31, 0.5);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 82px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--charcoal);
  flex: none;
}

.brand__mark { width: 34px; height: 34px; flex: none; }

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.035em;
  line-height: 1;
}

.brand__name span { color: var(--brand); }

/* The mark's shell follows the surrounding text colour; the filament stays
   branded, switching to amber on dark surfaces. */
.brand__filament { stroke: var(--brand); }
.brand__node { fill: var(--brand); }
.footer .brand__filament { stroke: var(--mint); }
.footer .brand__node { fill: var(--mint); }

/* Nav sits beside the brand rather than centred, so it stays over the light
   left column of the hero instead of the dark visual panel. */
.nav { display: flex; align-items: center; gap: 0.4rem; margin-right: auto; }

.nav__link {
  position: relative;
  padding: 0.6rem 0.95rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.25s var(--ease);
}

.nav__link:hover { color: var(--brand); }
.nav__link[aria-current="page"] { color: var(--brand); }

.header__cta { flex: none; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  place-items: center;
  flex: none;
}

.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: grid; }
  .header__cta { display: none; }
  .header { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); }

  .nav {
    position: fixed;
    inset: 82px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey-100);
    box-shadow: var(--shadow-md);
    padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__link { padding: 1rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--grey-100); }
  .nav__cta { margin-top: 1.25rem; }
  .nav__cta .btn { width: 100%; justify-content: center; }
}

@media (min-width: 961px) { .nav__cta { display: none; } }

/* --------------------------------------------------------------------------
   7. HERO — split: content left, product visual right
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--paper);
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--dots);
  background-size: 22px 22px;
  opacity: 0.9;
  pointer-events: none;
}

.hero__grid { display: grid; align-items: stretch; }

@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr); }
}

.hero__content {
  padding-block: clamp(7.5rem, 12vw, 10rem) clamp(3rem, 6vw, 4.5rem);
  padding-inline: var(--gutter);
  max-width: calc(var(--wrap) / 2 + var(--gutter));
  margin-left: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 999px) {
  .hero__content { max-width: var(--wrap); margin-inline: auto; }
}

.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title { margin-bottom: 1.5rem; }
.hero__lede { margin-bottom: 2.25rem; }

/* Right panel: photograph. Replace assets/img/hero.jpg with your own — a
   portrait or square crop of the team or office works best here. */
.hero__visual {
  position: relative;
  min-height: clamp(360px, 48vw, 640px);
  background: var(--charcoal);
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Brand tint, so the photograph sits inside the palette instead of beside it */
.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(205deg,
    rgba(11, 122, 75, 0.14) 0%,
    rgba(18, 24, 31, 0.04) 42%,
    rgba(18, 24, 31, 0.34) 100%);
  pointer-events: none;
}

/* Proof card floating over the photograph */
.hero__card {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  right: clamp(1rem, 3vw, 2.25rem);
  max-width: 330px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 24px 48px -20px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 0.9rem;
}

.hero__card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.hero__card-row + .hero__card-row {
  padding-top: 0.8rem;
  border-top: 1px solid var(--grey-100);
}

.hero__card-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  color: var(--brand);
  line-height: 1;
}

.hero__card-label { font-size: 0.82rem; color: var(--body); text-align: right; }

/* Reusable photo block for interior sections */
.media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--charcoal);
  aspect-ratio: 4 / 3;
  /* Soft depth plus a flat brand block offset behind the corner — an old
     print device that stops a photograph sitting flat on the page. */
  box-shadow: var(--shadow-lg), 16px 16px 0 -2px rgba(11, 122, 75, 0.14);
}

.media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Focal-point helpers — when a tall crop cuts the subject out of frame, add
   one of these to the .media wrapper to shift what stays visible. */
.media--focus-right img { object-position: 72% center; }
.media--focus-left img  { object-position: 28% center; }
.media--focus-top img   { object-position: center 22%; }

.media--tall { aspect-ratio: 3 / 4; }

/* Inside a two-column split the photo should match the height of the text
   beside it rather than leaving a gap under a fixed aspect ratio. */
@media (min-width: 900px) {
  .split > .media {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 420px;
  }
}

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(11, 122, 75, 0.1), rgba(18, 24, 31, 0.14));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. INFO BAND — blue strip under the hero
   -------------------------------------------------------------------------- */
.infoband {
  position: relative;
  background: linear-gradient(100deg, #08643D 0%, var(--brand) 48%, #0E8B56 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Slanted highlight, echoing the reference's diagonal detail */
.infoband::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 32%;
  width: 120px;
  height: 160%;
  background: rgba(255, 255, 255, 0.1);
  transform: skewX(-22deg);
  pointer-events: none;
}

.infoband__inner {
  display: grid;
  gap: 1.25rem 3rem;
  padding-block: 1.5rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) { .infoband__inner { grid-template-columns: repeat(3, auto); justify-content: start; gap: 3.5rem; } }

.infoband__item { display: flex; align-items: center; gap: 0.9rem; }

.infoband__icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.infoband__icon svg { width: 19px; height: 19px; }
.infoband__label { font-size: 0.76rem; opacity: 0.85; line-height: 1.3; }
.infoband__value { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; }
.infoband__value a { text-decoration: none; }
.infoband__value a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(18, 24, 31, 0.07);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3vw, 2.35rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out);
}

/* A brand hairline that draws across the top edge on hover — the whole
   hover state in one gesture, rather than four things changing at once. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--mint));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}

.card:hover::before { transform: scaleX(1); }

[data-theme="ink"] .card {
  background: var(--charcoal-2);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

[data-theme="white"] .card { background: var(--paper); }

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(11, 122, 75, 0.2);
}

[data-theme="ink"] .card:hover {
  border-color: rgba(52, 211, 153, 0.32);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.card__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card__icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--brand-soft), #FFFFFF);
  border: 1px solid rgba(11, 122, 75, 0.14);
  color: var(--brand);
  padding: 13px;
  margin-bottom: 0.6rem;
  box-shadow: 0 4px 12px -6px rgba(11, 122, 75, 0.35);
  transition: transform 0.45s var(--ease-out);
}

.card:hover .card__icon { transform: translateY(-3px) scale(1.05); }

[data-theme="ink"] .card__icon {
  background: linear-gradient(150deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.04));
  border-color: rgba(52, 211, 153, 0.24);
  color: var(--mint);
  box-shadow: none;
}

.card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}

.card__body { color: var(--fg-dim); font-size: 0.97rem; line-height: 1.65; }

.card__list { display: grid; gap: 0.45rem; margin-top: 0.35rem; font-size: 0.9rem; color: var(--fg-dim); }
.card__list li { display: flex; gap: 0.6rem; align-items: baseline; }
.card__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); }

.card--link { text-decoration: none; color: inherit; }
.card--link:hover .card__title { color: var(--brand); }
.card--outline { background: var(--bg-raised); }

/* --------------------------------------------------------------------------
   10. PROCESS
   -------------------------------------------------------------------------- */
.process { position: relative; display: grid; gap: 0; }

.process__trace {
  position: absolute;
  left: 0; top: 1rem; bottom: 3rem;
  width: 2px;
  background: var(--rule);
  border-radius: 2px;
}

.process__trace::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--trace, 0%);
  background: var(--brand);
  border-radius: 2px;
  transition: height 0.15s linear;
}

[data-theme="ink"] .process__trace::after { background: var(--mint); }

.stage {
  position: relative;
  display: grid;
  gap: 0.5rem 2rem;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0 clamp(1.6rem, 3vw, 2.2rem) clamp(2.2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}

.stage:last-child { border-bottom: 0; }

@media (min-width: 880px) {
  .stage { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}

.stage__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0.4rem;
}

.stage__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--fg);
}

.stage__body { color: var(--fg-dim); }

.stage::before {
  content: "";
  position: absolute;
  left: -6px;
  top: clamp(2rem, 3.6vw, 2.7rem);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--rule-strong);
  /* A ring in the section colour punches the node out of the trace line */
  box-shadow: 0 0 0 5px var(--bg);
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out);
}

.stage.is-in::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px rgba(11, 122, 75, 0.16);
}

[data-theme="ink"] .stage.is-in::before {
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px rgba(52, 211, 153, 0.18);
}

/* --------------------------------------------------------------------------
   11. CASE CARDS
   -------------------------------------------------------------------------- */
.case {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.case:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow-md); }
[data-theme="ink"] .case:hover { border-color: var(--mint); }

@media (min-width: 840px) { .case { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 2.5rem; align-items: center; } }

.case__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(150deg, var(--charcoal), #0B7A4B);
  display: grid;
  place-items: center;
}

.case__visual svg { width: 58%; height: auto; color: #fff; opacity: 0.9; }

.case__tag {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}

.case__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-block: 0.5rem 0.7rem;
  transition: color 0.3s var(--ease);
}

.case:hover .case__title { color: var(--brand); }
[data-theme="ink"] .case:hover .case__title { color: var(--mint); }
.case__body { color: var(--fg-dim); }
.case__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }

.chip {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(11, 122, 75, 0.16);
  border-radius: 100px;
  background: var(--brand-soft);
  color: #0A6B42;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

[data-theme="ink"] .chip {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.24);
  color: #8FEFC4;
}

/* --------------------------------------------------------------------------
   12. COMMITMENTS
   -------------------------------------------------------------------------- */
.commit {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* A short brand rule sitting on the hairline, rather than a heavy full-width bar */
.commit::before {
  content: "";
  position: absolute;
  inset: -2px auto auto 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--mint));
}

.commit__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.commit__body { color: var(--fg-dim); font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   12b. PRICE
   -------------------------------------------------------------------------- */
.price__from {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--fg-dim);
  margin-block: 0.2rem 0.3rem;
}

.price__value {
  font-size: 1.75rem;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-inline: 0.1rem;
}

/* --------------------------------------------------------------------------
   13. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--charcoal);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}

.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: -70%;
  width: min(760px, 100vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at center, rgba(11, 122, 75, 0.55), transparent 62%);
  pointer-events: none;
}

.cta-band__inner { display: grid; gap: 2rem; align-items: center; }

@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; }

.field__label { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--charcoal); }
.field__req { color: var(--brand); }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.95rem 1.05rem;
  background: var(--white);
  color: var(--charcoal);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(11, 122, 75, 0.16);
}

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #D93A32; }
.field__error { font-size: 0.8rem; color: #D93A32; min-height: 1em; font-weight: 500; }

.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .form__row { grid-template-columns: 1fr 1fr; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--grey-300);
  display: none;
}

.form__status.is-ok { display: block; border-color: #16A34A; background: #F0FDF4; color: #15803D; }
.form__status.is-err { display: block; border-color: #D93A32; background: #FEF2F2; color: #B91C1C; }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--fg);
  transition: color 0.25s var(--ease);
}

.faq__q:hover { color: var(--brand); }
[data-theme="ink"] .faq__q:hover { color: var(--mint); }

.faq__sign { flex: none; width: 16px; height: 16px; position: relative; }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; background: var(--accent); transition: transform 0.3s var(--ease); border-radius: 2px; }
.faq__sign::before { inset: 7px 0; height: 2px; }
.faq__sign::after { inset: 0 7px; width: 2px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: scaleY(0); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--fg-dim); padding-bottom: 1.5rem; max-width: 70ch; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--charcoal);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
}

.footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }

@media (min-width: 800px) { .footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.8fr)); gap: 3rem; } }

.footer .brand { color: #fff; }
.footer .brand__name span { color: var(--mint); }

.footer__col h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.1rem;
}

.footer__list { display: grid; gap: 0.7rem; }
.footer__list a, .footer__list span { color: #A7B0C4; text-decoration: none; font-size: 0.95rem; transition: color 0.25s var(--ease); }
.footer__list a:hover { color: var(--mint); }
.footer__blurb { color: #A7B0C4; max-width: 40ch; margin-block: 1.1rem 1.5rem; font-size: 0.95rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: #7C8598;
}

.social { display: flex; gap: 0.6rem; }

.social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: #A7B0C4;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.social a:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.social svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   17. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  background: var(--paper);
  color: var(--charcoal);
  padding-block: clamp(8rem, 13vw, 11rem) clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--grey-100);
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--dots);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 75% 90% at 40% 40%, #000 10%, transparent 78%);
}

.page-head .display { color: var(--charcoal); }
.page-head .lede { color: var(--body); }

.page-head__inner { display: grid; gap: 1.4rem; }

@media (min-width: 960px) {
  .page-head__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 3.5rem; }
}

.crumb { font-size: 0.88rem; font-weight: 600; color: var(--brand); }
.crumb a { text-decoration: none; color: var(--muted); }
.crumb a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   18. SPLIT / DEFINITION LIST
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); }

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .split--sticky > :first-child { position: sticky; top: 120px; }
}

.deflist { display: grid; gap: 0; border-top: 1px solid var(--rule); }

.deflist__row {
  display: grid;
  gap: 0.5rem 2rem;
  padding: 1.5rem 1rem 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: background-color 0.35s var(--ease), padding-left 0.35s var(--ease-out);
}

@media (min-width: 720px) {
  .deflist__row:hover { background: var(--bg-raised); padding-left: 1rem; }
}

@media (min-width: 720px) { .deflist__row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); } }

.deflist__term { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--fg); letter-spacing: -0.02em; }
.deflist__def { color: var(--fg-dim); }

/* --------------------------------------------------------------------------
   19. STAT BLOCK
   -------------------------------------------------------------------------- */
.stat {
  display: grid;
  gap: 0.55rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--accent);
  /* Gradient fill, with the flat colour above as the fallback */
  background: linear-gradient(135deg, var(--mint), #8FEFC4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="paper"] .stat__value,
[data-theme="white"] .stat__value {
  background: linear-gradient(135deg, var(--brand), #17A86B);
  -webkit-background-clip: text;
  background-clip: text;
}

.stat__label { font-size: 0.92rem; color: var(--fg-dim); line-height: 1.5; }

/* --------------------------------------------------------------------------
   20. SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Content must never depend on JS to be visible. The hidden start state is
   applied only once the inline head script confirms scripting is running,
   so with JS off or broken the page renders fully. */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }
.reveal[data-delay="4"] { transition-delay: 0.36s; }
.reveal[data-delay="5"] { transition-delay: 0.45s; }

/* --------------------------------------------------------------------------
   21. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack-sm { display: grid; gap: 0.9rem; }
.stack { display: grid; gap: 1.5rem; }
.stack-lg { display: grid; gap: 2.5rem; }
.mt-lg { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

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

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header, .nav-toggle, .cta-band, .hero__visual, .infoband { display: none !important; }
  body, .section, .hero, .footer { background: #fff !important; color: #000 !important; }
  a { text-decoration: underline; }
}