/* OnsiteHub — Brand System v2.1 tokens
 * These are the in-code source of truth for the code components.
 * Names mirror what we'll register as Webflow Variables later, so the
 * components inherit the site's values when present and fall back to these.
 *
 * Fonts (Quicksand, Montserrat, JetBrains Mono) are loaded by the Webflow site
 * itself — we only reference the families here, never @import them. */

:host {
  /* Primary */
  --oh-cadmium: #ffec00; /* signature yellow — accent only, ~10% coverage */
  --oh-sun-soft: #fff7a8; /* tint: backgrounds, hover washes */

  /* Dark surface (replaces black) */
  --oh-adriatic: #0e5b7a;

  /* Neutrals — warm, replace pure black/white */
  --oh-paper: #faf6ec;
  --oh-cream: #f4eddf;
  --oh-stone: #dcd7cc;
  --oh-mist: #d7d4cc;
  --oh-slate: #6b6b72;
  --oh-charcoal: #2a2a2e;
  --oh-ink: #0e0e10; /* text only — never a surface */

  /* Supporting */
  --oh-olive: #6f8f3a;
  --oh-terracotta: #d96b3f;

  /* Type */
  --oh-font-display: "Quicksand", system-ui, sans-serif; /* headings */
  --oh-font-body: "Montserrat", system-ui, sans-serif; /* body */
  --oh-font-mono: "JetBrains Mono", ui-monospace, monospace; /* tags/labels */
}

/* ============================================================
   OnsiteHub Design Tokens — v2.1
   Refined with feedback: no black backgrounds, Adriatic for
   dark surfaces, light grey replaces mustard-deep, original
   logo asset, scratchy highlighter texture.
   ============================================================ */

/* ---- COLOR ---- */
:host, :host {
  /* Primary — signature highlighter */
  --oh-yellow:        #FFEC00;
  --oh-yellow-soft:   #FFFEEF;   /* Sunsoft — almost-white warm tint */
  --oh-stone:         #F4F4F4;   /* neutral light grey */

  /* Ink & paper (warm neutrals, for TEXT — not for surfaces) */
  --oh-ink:           #0E0E10;   /* text only */
  --oh-charcoal:      #2A2A2E;
  --oh-slate:         #6B6B72;
  --oh-mist:          #D7D4CC;
  --oh-paper:         #FAF6EC;   /* default page bg */
  --oh-cream:         #F4EDDF;   /* card bg */
  --oh-sand:          #E8D4A8;
  --oh-white:         #FFFFFF;

  /* Adriatic blue — the new DARK surface.
     Replaces black/ink for any tinted background. */
  --oh-adriatic:      #0E5B7A;
  --oh-adriatic-deep: #0A4359;
  --oh-adriatic-soft: #B9D4DE;

  /* Secondary support colours — no archetype mapping, just names */
  --oh-olive:         #6F8F3A;
  --oh-olive-soft:    #C9D6A8;
  --oh-terracotta:    #D96B3F;
  --oh-terracotta-soft:#F4C9B5;

  /* Semantic */
  --oh-success: var(--oh-olive);
  --oh-warning: #E8A33A;
  --oh-error:   #C9402E;
}

/* ---- TYPE ---- */

/* Self-hosted Montserrat — heavy weights uploaded by the brand owner.
   Lighter weights (300–600) still come from the Google Fonts CDN link. */







/* Self-hosted JetBrains Mono — uploaded by the brand owner.
   Regular (400) and Medium (500) still come from the Google Fonts CDN link. */










/* Self-hosted Quicksand — uploaded by the brand owner.
   Bold (700) still comes from the Google Fonts CDN link. */






:host, :host {
  --oh-font-display: 'Quicksand', system-ui, sans-serif;
  --oh-font-body:    'Montserrat', system-ui, sans-serif;
  --oh-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* Scale */
  --oh-d1: clamp(56px, 6vw, 96px);
  --oh-d2: clamp(40px, 4.4vw, 64px);
  --oh-d3: clamp(28px, 3vw, 40px);

  --oh-t-xl: 22px;
  --oh-t-l:  18px;
  --oh-t-m:  16px;
  --oh-t-s:  14px;
  --oh-t-xs: 12px;

  /* Tracking */
  --oh-track-tight:  -0.02em;
  --oh-track-wide:   0.08em;
}

/* ---- SHAPE ---- */
:host, :host {
  --oh-r-sm: 4px;
  --oh-r-md: 10px;
  --oh-r-lg: 18px;
  --oh-r-pill: 999px;

  --oh-stroke: 2.25px;
  --oh-shadow-card: 0 1px 0 #00000010, 0 12px 32px -16px #0E0E1024;
}

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

:host, .oh-root {
  margin: 0;
  background: var(--oh-paper);
  color: var(--oh-ink);
  font-family: var(--oh-font-body);
  font-size: var(--oh-t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--oh-font-display);
  font-weight: 700;
  letter-spacing: var(--oh-track-tight);
  line-height: 1.05;
  margin: 0;
}

.oh-eyebrow {
  font-family: var(--oh-font-mono);
  font-size: var(--oh-t-xs);
  font-weight: 500;
  letter-spacing: var(--oh-track-wide);
  text-transform: uppercase;
  color: var(--oh-slate);
}

.oh-mono { font-family: var(--oh-font-mono); }

/* ---- SIGNATURE: SCRATCHY HIGHLIGHTER MOTIF ---- */
/* The brand's signature mark. Used behind words, behind icons,
   under text, around numbers. Real-marker texture — irregular
   edges, internal streaks, slight overflow. */

/* Behind type — horizontal swipe */
.oh-swipe {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.oh-swipe::before {
  content: "";
  position: absolute;
  inset: 6% -5% 4% -5%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCAxOCAzIDYgOCAxMiAxNCAyIDIyIDkgMzAgMCAzOCA4IDQ2IDMgNTQgMTAgNjIgMSA3MCA5IDc4IDQgODYgMTEgOTIgMiA5NyA5IDEwMCA2IDEwMCA4NiA5NiA5NiA5MCA5MCA4NCA5OCA3NiA5MiA2OCAxMDAgNjAgOTMgNTIgOTkgNDQgOTIgMzYgMTAwIDI4IDkzIDIwIDk5IDEyIDkyIDYgOTggMiA5MCAwIDk2WiIgZmlsbD0iI0ZGRUMwMCIvPjwvc3ZnPg==) center/100% 100% no-repeat;
  z-index: -1;
  transform: rotate(-1.5deg);
}

/* Smaller compact swipe (for inline .oh-root type) */
.oh-swipe--sm::before {
  inset: 14% -3% 6% -3%;
  transform: rotate(-1deg);
}

/* Behind an icon — scratchy blob */
.oh-blob {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.oh-blob::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNNTAgM0M3MSAyIDkwIDE1IDkzIDM1IDk3IDU2IDg5IDc2IDcwIDg2IDUyIDk2IDI4IDk1IDE1IDgxIDMgNjkgMiA0NSAxMiAyOCAyMCAxMyAzNCA0IDUwIDNaIiBmaWxsPSIjRkZFQzAwIi8+PC9zdmc+) center/100% 100% no-repeat;
  z-index: -1;
  transform: rotate(-6deg);
}

/* Under a word */
.oh-under {
  position: relative;
  display: inline-block;
}
.oh-under::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; bottom: -8%; height: 18%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCAzMCA0IDYwIDEwIDI1IDE4IDcwIDI2IDM1IDM0IDY1IDQyIDMwIDUwIDYwIDU4IDMwIDY2IDcwIDc0IDM1IDgyIDYwIDkwIDMwIDk2IDY1IDEwMCA0MCAxMDAgMTAwIDAgMTAwWiIgZmlsbD0iI0ZGRUMwMCIvPjwvc3ZnPg==) center/100% 100% no-repeat;
  transform: rotate(-1deg);
}

/* Circle annotation (around numbers, key words) */
.oh-circle {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.oh-circle::before {
  content: "";
  position: absolute;
  inset: -22% -14% -22% -14%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSI1MCIgcng9IjQ2IiByeT0iNDIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRUMwMCIgc3Ryb2tlLXdpZHRoPSI2IiB0cmFuc2Zvcm09InJvdGF0ZSgtMyA1MCA1MCkiLz48L3N2Zz4=) center/100% 100% no-repeat;
  z-index: -1;
}

/* ---- LOGO — USE THE ORIGINAL PNG ---- */
/* Never recreate the wordmark in CSS/SVG — always reference the
   master asset. The PNG has black wordmark + yellow scratch baked in. */
.oh-logo {
  height: 44px;
  width: auto;
  display: inline-block;
}
.oh-logo--sm { height: 28px; }
.oh-logo--lg { height: 96px; }
.oh-logo--xl { height: 140px; }

/* On dark surfaces, the logo needs a paper chip behind it */
.oh-logo-chip {
  display: inline-flex;
  background: var(--oh-paper);
  padding: 10px 14px;
  border-radius: 8px;
}
.oh-logo-chip .oh-logo { display: block; }

/* ---- KEYCAP — for Ctrl·Alt·Retreat tagline ---- */
.oh-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18em 0.55em;
  border: 2px solid var(--oh-ink);
  border-radius: 8px;
  background: var(--oh-paper);
  font-family: var(--oh-font-mono);
  font-weight: 600;
  font-size: 0.85em;
  box-shadow: 0 3px 0 var(--oh-ink);
  position: relative;
  top: -2px;
}

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */



    * { box-sizing: border-box; }
    .oh-root {
      margin: 0;
      background: var(--oh-paper);
      color: var(--oh-ink);
      font-family: var(--oh-font-body);
      overflow-x: hidden;
    }

    /* ===== HIGHLIGHTER MOTIF ===== */
    .swipe {
      display: inline-block;
      white-space: nowrap;
      background: url("https://cdn.prod.website-files.com/642bdb9856f36229a302c747/6a703e1707b7741bf5467284_oh-about-ae1c74b5.webp") center/100% 100% no-repeat;
      padding: 0.04em 0.24em;
      margin: 0 -0.14em;
    }
    .under {
      position: relative;
      display: inline-block;
      z-index: 0;
    }
    .under::after {
      content: "";
      position: absolute;
      left: -4%; right: -4%; bottom: -14%; height: 32%;
      background: url("https://cdn.prod.website-files.com/642bdb9856f36229a302c747/6a703d80fff25f13562e4a87_oh-about-3b26aa5d.webp") center/100% 100% no-repeat;
      transform: rotate(-0.8deg);
      z-index: -1;
    }
    .circle {
      position: relative;
      display: inline-block;
      z-index: 0;
      padding: 0 0.15em;
    }
    .circle::before {
      content: "";
      position: absolute;
      inset: -28% -18%;
      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InJjIiB4PSItMTUlIiB5PSItMTUlIiB3aWR0aD0iMTMwJSIgaGVpZ2h0PSIxMzAlIj4KICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDE4IDAuMDMiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjMiIHJlc3VsdD0ibiI+PC9mZVR1cmJ1bGVuY2U+CiAgICAgIDxmZURpc3BsYWNlbWVudE1hcCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJuIiBzY2FsZT0iOCI+PC9mZURpc3BsYWNlbWVudE1hcD4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8ZyBmaWx0ZXI9InVybCgjcmMpIiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkVDMDAiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik0xMDAgMTIgQzE1MCAxMCAxOTIgMzggMTkwIDcyIEMxODggMTEwIDE0MCAxMzAgOTYgMTI4IEM0NCAxMjYgMTAgOTYgMTIgNjQgQzE0IDMwIDU2IDE0IDEwNCAxMyI+PC9wYXRoPgogIDwvZz4KPC9zdmc+) center/100% 100% no-repeat;
      z-index: -1;
    }

    /* ===== SHARED ===== */
    .eyebrow {
      font-family: var(--oh-font-mono);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--oh-slate);
      display: flex;
      align-items: center;
      gap: 0.9rem;
    }
    .eyebrow .num {
      color: var(--oh-adriatic);
      font-weight: 700;
    }
    .eyebrow .line {
      flex: 1;
      height: 2px;
      background: var(--oh-mist);
      max-width: 120px;
    }

    .wrap { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }

    /* ===== HERO (editorial split) ===== */
    .hero {
      position: relative;
      min-height: 100vh;
      background: var(--oh-adriatic-deep);
      color: var(--oh-white);
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(7,48,64,0.9) 0%, rgba(7,48,64,0.78) 26%, rgba(7,48,64,0.4) 56%, rgba(7,48,64,0.1) 100%);
    }
    .hero-left {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 2;
      width: 100%;
    }
    .hero-left-inner {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 6rem 2.5rem;
      text-align: left;
    }
    .hero .lead { max-width: 28ch; }
    .hero .eyebrow { color: rgba(255,255,255,0.6); margin-bottom: 2.2rem; }
    .hero .eyebrow .num { color: var(--oh-yellow); }
    .hero .eyebrow .line { background: rgba(255,255,255,0.2); }

    .hero h1 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(42px, 5.3vw, 94px);
      line-height: 0.9;
      letter-spacing: -0.03em;
      margin: 0 0 2.2rem;
    }
    .hero h1 .l2 { display: block; }
    .hero .lead {
      font-size: clamp(19px, 1.5vw, 24px);
      line-height: 1.5;
      max-width: 28ch;
      color: rgba(255,255,255,0.86);
      font-weight: 400;
      margin: 0;
    }
    .hero-meta {
      margin-top: 2.6rem;
      display: flex;
      align-items: center;
      gap: 0.9rem;
      font-family: var(--oh-font-mono);
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }
    .hero-meta::before {
      content: "";
      width: 42px;
      height: 2px;
      background: var(--oh-yellow);
      flex-shrink: 0;
    }
    .hero .keycaps {
      margin-top: 3rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--oh-font-mono);
      font-size: 13px;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.55);
      text-transform: uppercase;
    }
    .hero-right {
      display: none;
    }
    .hero-vlabel {
      position: absolute;
      z-index: 2;
      top: 2rem; right: 1.6rem;
      font-family: var(--oh-font-mono);
      font-size: 12px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      writing-mode: vertical-rl;
    }
    .hero-photo-tag {
      position: absolute;
      z-index: 2;
      left: 1.6rem; bottom: 1.6rem;
      font-family: var(--oh-font-mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--oh-white);
      background: rgba(7,48,64,0.55);
      backdrop-filter: blur(6px);
      padding: 0.55em 0.95em;
      border-radius: 6px;
    }
    @media (max-width: 940px) {
      .hero {
        min-height: 88vh;
      }
      .hero-left-inner { padding: 4rem 1.5rem; }
    }

    .kc {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.3em 0.7em;
      border: 2px solid rgba(255,255,255,0.5);
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      font-family: var(--oh-font-mono);
      font-weight: 600;
      font-size: 13px;
      color: var(--oh-white);
      box-shadow: 0 3px 0 rgba(255,255,255,0.25);
    }

    /* ===== INTRO / FOUNDERS ===== */
    .intro {
      padding: 7rem 0;
      position: relative;
      background: #FFFFFF;
    }
    .intro-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 5rem;
      align-items: center;
    }
    .intro h2 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(32px, 4.4vw, 61px);
      line-height: 1;
      letter-spacing: -0.02em;
      margin: 1.5rem 0 2rem;
    }
    .intro p {
      font-size: 18px;
      line-height: 1.555;
      color: #1A1A1A;
      margin: 0 0 1.5rem;
      max-width: 46ch;
    }
    .intro .sig {
      font-family: var(--oh-font-mono);
      font-size: 13px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--oh-adriatic);
      font-weight: 700;
      margin-top: 2.5rem;
      line-height: 1.9;
    }
    .intro .sig span { display: block; }
    .intro .sig .div { color: var(--oh-slate); }

    .founder-stack {
      position: relative;
      height: 540px;
    }
    .founder-stack img { object-fit: cover; border-radius: var(--oh-r-md); }
    .fs-main {
      position: absolute;
      top: 0; right: 0;
      width: 78%;
      height: 460px;
      box-shadow: var(--oh-shadow-card);
      z-index: 2;
    }
    .fs-sub {
      position: absolute;
      bottom: 0; left: 0;
      width: 46%;
      height: 280px;
      border: 5px solid var(--oh-paper);
      box-shadow: var(--oh-shadow-card);
      z-index: 3;
    }
    .fs-tag {
      position: absolute;
      font-family: var(--oh-font-mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
      background: var(--oh-ink);
      color: var(--oh-white);
      padding: 0.4em 0.8em;
      border-radius: 4px;
      z-index: 4;
    }
    .fs-tag.t-milana { top: 18px; right: 18px; }
    .fs-tag.t-kruno { bottom: 16px; left: 16px; background: var(--oh-adriatic); }
    img.fs-sub { object-position: 50% 22%; }

    /* ===== WHY (dark adriatic) ===== */
    .why {
      background: var(--oh-adriatic-deep);
      color: var(--oh-white);
      padding: 7rem 0;
    }
    .why .eyebrow { color: rgba(255,255,255,0.6); margin-bottom: 2rem; }
    .why .eyebrow .num { color: var(--oh-yellow); }
    .why .eyebrow .line { background: rgba(255,255,255,0.2); }
    .why h2 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(32px, 4.8vw, 70px);
      line-height: 0.98;
      letter-spacing: -0.02em;
      margin: 0 0 3.5rem;
      max-width: 22ch;
    }
    .why-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
    .why-cols p {
      font-size: 18px;
      line-height: 1.8;
      color: rgba(255,255,255,0.82);
      margin: 0 0 1.4rem;
    }
    .why-cols .punch {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: 26px;
      line-height: 1.25;
      color: var(--oh-white);
      letter-spacing: -0.01em;
    }
    .why-cols .punch .hl { color: var(--oh-ink); }

    /* ===== FULL-BLEED IMAGE w/ CAPTION ===== */
    .bleed {
      position: relative;
    }
    .bleed img {
      width: 100%;
      height: 70vh;
      max-height: 720px;
      object-fit: cover;
      display: block;
    }
    .bleed .cap {
      position: absolute;
      left: 2.5rem; bottom: 2rem;
      font-family: var(--oh-font-mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--oh-white);
      background: rgba(14,14,16,0.55);
      backdrop-filter: blur(6px);
      padding: 0.6em 1em;
      border-radius: 6px;
    }

    /* ===== HOW WE WORK ===== */
    .work { padding: 7rem 0; }
    .work h2 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(32px, 4.4vw, 64px);
      line-height: 0.98;
      letter-spacing: -0.02em;
      margin: 1.5rem 0 3.5rem;
    }
    .work-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 2.5rem;
      flex-wrap: wrap;
      margin-bottom: 3.5rem;
    }
    .work-head h2 { margin: 1.5rem 0 0; }
    .work-head .gwb-logo { margin: 0 0 0.4rem; flex-shrink: 0; }
    .work-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3.5rem 5rem;
    }
    .work-item .wi-num {
      font-family: var(--oh-font-mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--oh-adriatic);
      letter-spacing: 0.1em;
    }
    .work-item h3 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: 30px;
      line-height: 1.1;
      margin: 0.6rem 0 1.2rem;
    }
    .work-item p {
      font-size: 18px;
      line-height: 1.555;
      color: #1A1A1A;
      margin: 0 0 1.2rem;
    }
    .work-lead {
      font-size: 21px !important;
      line-height: 1.55 !important;
      color: #1A1A1A !important;
    }
    .work-item p.work-punch {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--oh-adriatic);
      margin: 0;
    }
    .work-method {
      font-size: 18px;
      line-height: 1.555;
      color: #1A1A1A;
      margin: 0 0 2rem;
    }
    .gwb-logo {
      display: block;
      width: 100%;
      max-width: 320px;
      height: auto;
      margin: 0 0 1.8rem;
    }
    .work-link {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: 19px;
      color: var(--oh-ink);
      text-decoration: none;
      border-bottom: 3px solid var(--oh-yellow);
      padding-bottom: 0.15rem;
      transition: gap 0.18s ease;
    }
    .work-link:hover { gap: 1rem; }
    .work-link .arr { font-family: var(--oh-font-mono); }

    /* ===== CALLOUT (yellow) ===== */
    .callout {
      margin: 5rem 0 0;
      background: var(--oh-yellow);
      border-radius: var(--oh-r-lg);
      padding: 4rem;
      position: relative;
      overflow: hidden;
    }
    .callout .co-eyebrow {
      font-family: var(--oh-font-mono);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--oh-charcoal);
      margin-bottom: 1.5rem;
    }
    .callout h3 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(30px, 3.6vw, 48px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin: 0 0 2rem;
      max-width: 22ch;
    }
    .callout-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
    .callout p {
      font-size: 18px;
      line-height: 1.555;
      color: #1A1A1A;
      margin: 0 0 1.1rem;
    }
    .callout p:last-child { margin-bottom: 0; }

    /* ===== FIT ===== */
    .fit { padding: 7rem 0; background: var(--oh-cream); }
    .fit h2 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(32px, 4.4vw, 64px);
      line-height: 0.98;
      letter-spacing: -0.02em;
      margin: 1.5rem 0 3.5rem;
    }
    .fit-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }
    .fit-card {
      background: var(--oh-paper);
      border-radius: var(--oh-r-lg);
      padding: 3rem;
      border: var(--oh-stroke) solid var(--oh-ink);
    }
    .fit-card.yes { background: var(--oh-adriatic); border-color: var(--oh-adriatic); }
    .fit-card h3 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: 28px;
      line-height: 1.1;
      margin: 0 0 2rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }
    .fit-card.yes h3 { color: var(--oh-white); }
    .fit-badge {
      font-family: var(--oh-font-mono);
      font-size: 22px;
      font-weight: 800;
      width: 44px; height: 44px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .fit-card.no .fit-badge { background: var(--oh-ink); color: var(--oh-yellow); }
    .fit-card.yes .fit-badge { background: var(--oh-yellow); color: var(--oh-ink); }
    .fit-card ul { list-style: none; margin: 0; padding: 0; }
    .fit-card li {
      font-size: 17px;
      line-height: 1.55;
      color: #1A1A1A;
      font-weight: 600;
      padding: 0.9rem 0 0.9rem 2rem;
      position: relative;
      border-top: 1px solid var(--oh-mist);
    }
    .fit-card.yes li { color: #FFFFFF; border-top-color: rgba(255,255,255,0.18); }
    .fit-card li:first-of-type { border-top: none; }
    .fit-card li::before {
      position: absolute; left: 0; top: 0.85rem;
      font-family: var(--oh-font-mono);
      font-weight: 700;
      font-size: 18px;
    }
    .fit-card.no li::before { content: "\00d7"; color: var(--oh-slate); }
    .fit-card.yes li::before { content: "\2713"; color: var(--oh-yellow); }

    /* ===== TEAM GALLERY ===== */
    .team-gallery {
      padding: 7rem 0;
      background: #FFFFFF;
    }
    .team-gallery .eyebrow {
      margin-bottom: 2rem;
    }
    .team-gallery h2 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(32px, 4.4vw, 61px);
      line-height: 1;
      letter-spacing: -0.02em;
      margin: 0 0 3.5rem;
    }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 2.5rem;
    }
    .team-card {
      text-align: center;
    }
    .team-card img {
      width: 100%;
      height: 280px;
      object-fit: cover;
      border-radius: var(--oh-r-md);
      margin-bottom: 1.5rem;
      display: block;
    }
    .team-card h3 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: 20px;
      line-height: 1.15;
      margin: 0 0 0.4rem;
      color: var(--oh-ink);
    }
    .team-card .title {
      font-family: var(--oh-font-mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--oh-adriatic);
      font-weight: 600;
      margin-bottom: 0.8rem;
      display: block;
    }
    .team-card p {
      font-size: 16px;
      line-height: 1.6;
      color: var(--oh-charcoal);
      margin: 0;
    }

    /* ===== LOCAL EXPERTS (secondary) ===== */
    .experts {
      padding: 5.5rem 0 6.5rem;
      background: var(--oh-cream);
      border-top: 1px solid var(--oh-mist);
    }
    .experts .eyebrow { margin-bottom: 1.4rem; }
    .experts h2 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(26px, 2.8vw, 38px);
      line-height: 1.05;
      letter-spacing: -0.015em;
      margin: 0 0 0.7rem;
      color: var(--oh-ink);
    }
    .experts .lede {
      font-size: 16px;
      line-height: 1.55;
      color: var(--oh-slate);
      max-width: 52ch;
      margin: 0 0 3.2rem;
    }
    .experts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 2.6rem 2.2rem;
    }
    .expert-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }
    .expert-card img {
      width: 116px;
      height: 116px;
      object-fit: cover;
      object-position: 50% 28%;
      border-radius: 50%;
      margin-bottom: 1.1rem;
      display: block;
    }
    .expert-card .vip {
      display: inline-flex;
      align-items: center;
      gap: 0.45em;
      font-family: var(--oh-font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--oh-adriatic);
      margin-bottom: 0.55rem;
    }
    .expert-card .vip::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--oh-yellow);
    }
    .expert-card h3 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: 19px;
      line-height: 1.15;
      margin: 0 0 0.55rem;
      color: var(--oh-ink);
    }
    .expert-card p {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--oh-charcoal);
      margin: 0;
    }

    /* ===== CASE STUDIES BAND ===== */
    .casestudy {
      padding: 5rem 0;
      background: #FFFFFF;
      text-align: center;
    }
    .casestudy .eyebrow {
      justify-content: center;
      margin-bottom: 1.5rem;
    }
    .casestudy p {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(26px, 3.4vw, 42px);
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--oh-ink);
      margin: 0 auto 2.2rem;
      max-width: 20ch;
    }
    .casestudy a {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      padding: 1rem 2.4rem;
      background: var(--oh-adriatic);
      color: var(--oh-white);
      text-decoration: none;
      border-radius: var(--oh-r-pill);
      font-family: var(--oh-font-display);
      font-size: 18px;
      font-weight: 700;
      transition: transform 0.18s ease;
    }
    .casestudy a:hover { transform: translateY(-3px); }
    .casestudy a .arr { font-family: var(--oh-font-mono); font-weight: 700; }

    /* ===== CTA ===== */
    .cta {
      background: var(--oh-adriatic-deep);
      color: var(--oh-white);
      padding: 8rem 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("https://cdn.prod.website-files.com/642bdb9856f36229a302c747/6a703d6f145927194e636f3a_oh-about-08044c7b.webp") center 38%/cover;
      opacity: 0.6;
      z-index: 0;
    }
    .cta::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(10,67,89,0.66), rgba(10,67,89,0.86));
      z-index: 0;
    }
    .cta > .wrap { position: relative; z-index: 1; }
    .cta h2 {
      font-family: var(--oh-font-display);
      font-weight: 700;
      font-size: clamp(30px, 5.1vw, 70px);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin: 0 0 2rem;
    }
    .cta p {
      font-size: 20px;
      line-height: 1.6;
      color: rgba(255,255,255,0.95);
      max-width: 48ch;
      margin: 0 auto 3rem;
    }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      padding: 1.1rem 2.6rem;
      background: var(--oh-yellow);
      color: var(--oh-ink);
      text-decoration: none;
      border-radius: var(--oh-r-pill);
      font-family: var(--oh-font-display);
      font-size: 20px;
      font-weight: 700;
      transition: transform 0.18s ease;
    }
    .cta-btn:hover { transform: translateY(-3px); }
    .cta-btn .arr { font-family: var(--oh-font-mono); font-weight: 700; }
    .cta .keycaps {
      margin-top: 3.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-family: var(--oh-font-mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      color: rgba(255,255,255,0.45);
      text-transform: uppercase;
    }
    .cta .kc {
      border-color: rgba(255,255,255,0.4);
      background: rgba(255,255,255,0.05);
      box-shadow: 0 3px 0 rgba(255,255,255,0.18);
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 940px) {
      .wrap { padding: 0 1.5rem; }
      .intro-grid, .why-cols, .work-grid, .callout-cols, .fit-grid { grid-template-columns: 1fr; gap: 3rem; }
      .founder-stack { height: 480px; margin-top: 1rem; }
      .callout { padding: 2.5rem; }
      .fit-card { padding: 2rem; }
      .bleed img { height: 50vh; }
    }
    @media (max-width: 560px) {
      .founder-stack { height: 420px; }
      .fs-main { width: 80%; height: 340px; }
      .fs-sub { width: 50%; height: 220px; }
      .callout { padding: 2rem; }
    }