/* ===============================================================
   Web fonts — sourced from the original Canva-licensed woff2 files
   in /assets/fonts/. Same files the live site serves.
   =============================================================== */

/* Proxima Nova — primary sans, used everywhere. */
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/d6eb5721f46301170397393323ce8a86.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/946089f579a3d225c8d0374d06a80d8c.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/27c3d3b6be0598ef0ad372bc23daac39.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/0576704b28c35921b13f9fbc00f9dd2c.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/28079cb92e949f9dc7acfe61dfe2a0a9.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/ee82d41f23c8c5465af1fc940da4a36c.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/c96f9d1ce76cf610c614aeaa22d80236.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/e430cea7a83854bd3924c53524b01d55.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

/* HK Grotesk — alternate sans, used in some places. */
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/81155d31a7b6f4cb9a2b484794493af5.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/3c7d9e9353df0953aee6f28b4016bc03.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/0fb18d5e72c6edfc6fe0d03a9398b8f8.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/4f1905a096bb46f20054adc8cee718cf.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/9504b09b02e0a62a1cc1e69422e2d5ee.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/ede29efdfaa56ab47100422eb483e26c.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/a50ddeeabd96a04242b27210d2df3191.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/346a7d829e2772dc095a1a04c9c97ff9.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/5867e9c7180d63289b5a1ca422a7b459.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'HK Grotesk'; src: url('../fonts/cf70fa5cd1b79e9da5850fbfb42d5c4f.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

/* Arian LT Std — serif used for the hero tagline. */
@font-face { font-family: 'Arian LT Std'; src: url('../fonts/06133d2fe93814fe99bcc3db24f1af4e.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arian LT Std'; src: url('../fonts/c53c9ad559c679e985be590b50e0b57d.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arian LT Std'; src: url('../fonts/bf2e57fd3739da8f2daa7b36fa164062.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }

/* Arimo — used in some headings on the live. */
@font-face { font-family: 'Arimo'; src: url('../fonts/f8f199f09526f79e87644ed227e0f651.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('../fonts/d257a7100844bc3f98c9021168b6249e.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('../fonts/98c4d2c0223fc8474641c77f923528e9.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('../fonts/1060345c54d396e76d73f1da7ee200bd.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

/* Brilliant Signature — Phil's handwritten signature. */
@font-face { font-family: 'Brilliant Signature'; src: url('../fonts/cdaa3459b68667d960e87567b0e8c9e6.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Brilliant Signature'; src: url('../fonts/b29ea4d0d591b258a4ffe4b200c57d25.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------------------------------------------------------------
   Brilliancy Deep Tech — main stylesheet
   Typography + colors sampled directly from
   https://brilliancydeeptech.com via getComputedStyle.

   Key insight: the live site uses Proxima Nova (sans) for
   essentially everything. Only the hero tagline
   "Legacy to Frontier." uses Arian LT (serif).
   --------------------------------------------------------------- */

/* =============================================================
   1. Reset + tokens
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.4;
    background: var(--color-white);
}
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:root {
    --color-purple: #673AB7;
    --color-purple-deep: #4B219C;
    --color-purple-quote: #3A2A8B;
    --color-lavender: #cfc3e7;
    --color-lavender-deep: #b2a3d6;
    --color-white: #ffffff;
    --color-ink: #1a1a1a;
    --color-ink-soft: #2b2b2b;
    --color-hero-tint: rgba(75, 33, 156, 0.55);

    --font-sans:    'Proxima Nova', system-ui, -apple-system, sans-serif;
    --font-serif:   'Arian LT Std', 'Bodoni Moda', serif;
    --font-grotesk: 'HK Grotesk', system-ui, sans-serif;
    --font-arimo:   'Arimo', system-ui, sans-serif;

    /* Live "canvas" is 1366 wide. We mirror that as a max-width so vw math
       lines up across most desktop viewports. */
    --canvas-w: 1366px;
}

/* =============================================================
   2. Section primitives
   ============================================================= */
.section { position: relative; width: 100%; overflow: hidden; }
.section__inner {
    position: relative;
    width: 100%;
    max-width: var(--canvas-w);
    margin: 0 auto;
    min-height: 768px;
}

/* Headings shared style — Proxima Nova bold, purple by default */
.page-heading {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.1;
    color: var(--color-purple);
    margin-bottom: 1em;
}
.page-heading--xl {
    font-size: 52px;
}
.page-heading--white { color: var(--color-white); }
.page-heading--deep  { color: var(--color-purple-deep); }
.page-lede {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-ink-soft);
    margin-bottom: 1.5em;
    max-width: 60ch;
}
.page-body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-ink);
}
.page-body--lg { font-size: 18px; max-width: 64ch; }
.page-eyebrow {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    margin-bottom: 1em;
    text-transform: uppercase;
}
.page-eyebrow__drop-cap {
    font-size: inherit;
    color: inherit;
}

.back-to-top {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.back-to-top:hover { opacity: 1; }
.back-to-top img { width: 100%; height: 100%; }

/* =============================================================
   3. Hero  (live: section height 1026, canvas 1366×1026 centered)
   ============================================================= */
.section--hero {
    width: 100%;
    height: 1026px;
    max-height: 100vh;
    background: #1a1438;
    color: var(--color-white);
    overflow: hidden;
}
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-hero-tint);
    z-index: 1;
    pointer-events: none;
}
.section__inner--hero {
    position: relative;
    z-index: 2;
    min-height: 1026px;
    max-height: 100vh;
    padding: 0;
}
.hero__wordmark {
    position: absolute;
    top: 579px;
    left: 30px;
    width: 655px;
    color: var(--color-white);
    line-height: 1;
    text-shadow: 0 3px 23px rgba(0, 0, 0, 0.6);
}
.hero__wordmark-top {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 83px;
    letter-spacing: 15px;
}
.hero__wordmark-bottom {
    display: block;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 41px;
    letter-spacing: 26px;
    margin-top: 6px;
    text-align: center;
}
.hero__tagline {
    position: absolute;
    top: 754px;
    left: 30px;
    width: 655px;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.3;
    color: var(--color-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* =============================================================
   4. About Phil  (live: 845 tall, credentials row at top, white bg)
   ============================================================= */
/* Empowering Tomorrow's Legacy, Today. divider — Detroit cityscape video bg with white overlay text. */
.section--empowering {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    color: var(--color-white);
}
.empowering__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.empowering__overlay {
    position: absolute;
    inset: 0;
    background: rgba(75, 33, 156, 0.30);
    z-index: 1;
    pointer-events: none;
}
.section__inner--empowering {
    position: relative;
    z-index: 2;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    text-align: center;
}
.empowering__line {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 41px;
    line-height: 1.15;
    color: var(--color-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Credentials band — sits between hero and Phil bio. Purple bg + white text. */
.section--credentials {
    background: var(--color-purple);
    color: var(--color-white);
    min-height: 0;
}
.section__inner--credentials {
    min-height: 0;
    padding: 56px 60px;
    display: flex;
    justify-content: center;
}
.credentials {
    display: flex;
    gap: 140px;
    align-items: center;
}
.credential {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.credential__label {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.35em;
    color: var(--color-white);
    text-transform: uppercase;
}
.credential__rule {
    width: 52px;
    height: 3px;
    background: var(--color-lavender);
    border-radius: 1.5px;
}

/* Recurring "BRILLIANCY DEEP TECH" section header (top of most sections) */
.section-header {
    display: flex;
    justify-content: center;
    padding: 22px 0 12px;
}
.section-header__wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    text-decoration: none;
}
.section-header__wordmark-top {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.16em;
}
.section-header__wordmark-bottom {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 8px;
    letter-spacing: 0.32em;
    margin-top: 2px;
}
.section--service-wheel .section-header__wordmark,
.section--ai-integration .section-header__wordmark,
.section--quantum .section-header__wordmark,
.section--legacy-card .section-header__wordmark,
.section--cta .section-header__wordmark,
.section--media .section-header__wordmark { color: var(--color-white); }
.section--legacy-intro .section-header__wordmark,
.section--supply-chain .section-header__wordmark,
.section--complexity-science .section-header__wordmark,
.section--blockchain .section-header__wordmark { color: var(--color-white); }
.section--partnerships .section-header__wordmark,
.section--understanding-ai .section-header__wordmark,
.section--about-phil .section-header__wordmark { color: var(--color-purple-deep); }
.section--legacy-card--white .section-header__wordmark { color: var(--color-white); }

.section--about-phil {
    background: var(--color-white);
    color: var(--color-ink);
    min-height: 845px;
}
.section__inner--about-phil {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: 60px;
    align-items: center;
    padding: 80px 80px 80px 110px;
    min-height: 760px;
}
.about-phil__text { max-width: 560px; }
.about-phil__portrait {
    background: var(--color-lavender);
    padding: 16px;
    border-radius: 4px;
    max-width: 480px;
    margin: 0 auto;
}
.about-phil__portrait img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.about-phil__credentials {
    grid-column: 1 / -1;
    display: flex;
    gap: 40px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3em;
    color: var(--color-purple-deep);
    margin-bottom: 30px;
}
.about-phil__intro p { margin-bottom: 18px; }
.about-phil__byline {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.38;
    color: var(--color-purple-quote);
    max-width: 22ch;
    margin-bottom: 8px;
}
.about-phil__est {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 21px;
    line-height: 1.38;
    color: var(--color-purple);
    margin-bottom: 28px;
}
.about-phil__quote {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-purple-quote);
    padding: 0;
    border: 0;
    margin-bottom: 32px;
}
.about-phil__quote p { margin: 0; }
.about-phil__attribution {
    font-family: var(--font-sans);
    text-align: left;
    margin-top: 24px;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}
.about-phil__signature {
    font-family: 'Brilliant Signature', 'Caveat', 'Brush Script MT', cursive;
    font-weight: 400;
    font-size: 32px;
    color: var(--color-ink);
    margin-bottom: 6px;
    line-height: 1;
}
.about-phil__name  {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-purple-quote);
    margin-bottom: 4px;
}
.about-phil__title {
    font-weight: 400;
    font-style: italic;
    font-size: 15px;
    color: var(--color-purple-quote);
}
.about-phil__company {
    font-weight: 400;
    font-size: 15px;
    color: var(--color-purple-quote);
}

/* =============================================================
   5. Service wheel  (purple bg, 768 tall, 5 pillars around circle)
   ============================================================= */
.section--service-wheel {
    background: var(--color-purple);
    color: var(--color-white);
    min-height: 768px;
}
.section__inner--service-wheel {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: center;
    padding: 64px 60px;
    min-height: 768px;
}
.service-wheel__heading {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.15;
    color: var(--color-white);
    margin-bottom: 24px;
}
.service-wheel__body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-white);
    opacity: 0.95;
    max-width: 44ch;
}
.service-wheel__diagram {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
}
.service-wheel__center {
    position: absolute;
    top: 50%; left: 50%;
    width: 54%;
    height: 54%;
    transform: translate(-50%, -50%);
    background: var(--color-lavender);
    border: 4px solid var(--color-white);
    border-radius: 50%;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.service-wheel__center img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 130%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
}
.service-wheel__pillars { position: absolute; inset: 0; }
.service-wheel__pillar {
    position: absolute;
    width: 180px;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 2;
}
/* Live positions: 1=top, 2=upper-left, 3=upper-right, 4=lower-left, 5=lower-right */
.service-wheel__pillar--1 { top: 6%;  left: 50%; }
.service-wheel__pillar--2 { top: 32%; left: 6%;  }
.service-wheel__pillar--3 { top: 32%; left: 94%; }
.service-wheel__pillar--4 { top: 86%; left: 18%; }
.service-wheel__pillar--5 { top: 86%; left: 82%; }
.service-wheel__pillar-link {
    position: relative;
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    color: var(--color-white);
}
.service-wheel__icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-wheel__icon {
    width: 100%;
    height: 100%;
    filter: none;
}
.service-wheel__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8px;
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: 24px;
    line-height: 1.05;
    color: var(--color-white);
    text-transform: none;
}
.service-wheel__column {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.service-wheel__cta {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 56px;
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
    border: 1.5px solid var(--color-white);
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.service-wheel__cta:hover { background: var(--color-white); color: var(--color-purple-deep); }

/* =============================================================
   6. Lavender divider band
   ============================================================= */
.section--divider {
    background: var(--color-lavender);
    color: var(--color-purple-deep);
    min-height: 0;
}
.section__inner--divider {
    min-height: 0;
    padding: 48px 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.divider__line {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 41px;
    line-height: 1.15;
    color: var(--color-purple);
}
.divider__rule { max-width: 120px; opacity: 0.55; }

/* =============================================================
   7. Legacy intro
   ============================================================= */
.section--legacy-intro {
    background: var(--color-purple);
    color: var(--color-purple-deep);
    min-height: 540px;
}
.section__inner--legacy-intro {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    column-gap: 60px;
    align-items: center;
    padding: 40px 70px;
    min-height: 0;
    width: calc(100% - 160px);
    max-width: 1180px;
    background: var(--color-lavender);
    border-radius: 24px;
    margin: 24px auto 60px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.section--legacy-intro { min-height: 0; }
.legacy-intro__heading {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 41px;
    line-height: 1.1;
    color: var(--color-purple-deep);
    margin-bottom: 24px;
}
.legacy-intro__body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-ink-soft);
    margin-bottom: 20px;
    max-width: 46ch;
}
.legacy-intro__logo-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: stretch;
}
.legacy-intro__row {
    display: flex;
    gap: 22px;
    justify-content: center;
}
.legacy-intro__row--centered { justify-content: center; padding: 0 60px; }
.logo-bubble {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--color-purple-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.logo-bubble img {
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Per-logo sizing — proportions sampled from the live site so each fits inside the 110px circle correctly. */
.logo-bubble--kmart img    { width: 55px;  height: auto; }
.logo-bubble--walmart img  { width: 60px;  height: auto; transform: translateX(3px); }
.logo-bubble--dominos img  { width: 82px;  height: auto; }
.logo-bubble--gm img       { width: 170px; height: auto; max-width: none; }
.logo-bubble--loma img     { width: 56px;  height: auto; }
.logo-bubble--cia img      { width: 72px;  height: auto; }
.logo-bubble--nsa img      { width: 72px;  height: auto; }

/* =============================================================
   8. Card grids — frame-bordered (AI Integration, Complexity Science)
   ============================================================= */
.card-grid {
    display: grid;
    gap: 30px;
    margin-top: 30px;
}
.card-grid--1 { grid-template-columns: 1fr; gap: 16px; }
.card-grid--2 { grid-template-columns: 1fr 1fr; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card { position: relative; }

.card--frame {
    padding: 40px 30px;
    text-align: center;
    border: 1px solid var(--color-purple);
    border-radius: 4px;
    background: rgba(103, 58, 183, 0.02);
}
.card--frame .card__border { display: none; }
.card--bordered {
    padding: 30px;
    border: 2px solid var(--color-purple);
    border-radius: 6px;
    background: var(--color-white);
}
.card__title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.03em;
    color: var(--color-purple-deep);
    margin-bottom: 14px;
    text-transform: uppercase;
}
.card--bordered .card__title { text-transform: none; font-size: 22px; letter-spacing: 0; }
.card__text {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-ink-soft);
}

/* =============================================================
   9. Service-page frames (AI Integration / Understanding AI /
      Supply Chain / Complexity Science / Blockchain / Quantum)
   ============================================================= */
.section--ai-integration {
    color: var(--color-white);
    min-height: 0;
    background-color: var(--color-purple-deep);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.section__inner--ai-integration {
    padding: 40px 60px 60px;
    min-height: 0;
}
.section__inner--ai-integration .page-heading,
.section__inner--ai-integration .page-lede {
    max-width: 440px;
}
.section--ai-approach {
    background: var(--color-purple);
    color: var(--color-white);
    min-height: 0;
}
.section__inner--ai-approach {
    padding: 60px 60px 80px;
    min-height: 0;
}
.section--understanding-ai {
    background: var(--color-white);
    color: var(--color-ink);
    min-height: 768px;
}
.section--blockchain {
    background: var(--color-purple);
    color: var(--color-white);
    min-height: 0;
}
.section__inner--blockchain {
    padding: 0 70px 60px;
    min-height: 0;
}
.blockchain__heading {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.2;
    color: var(--color-white);
    margin: 30px 0 40px;
}
.blockchain__body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 60px;
    align-items: center;
}
.blockchain__text {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-white);
}
.blockchain__icon {
    width: 100%;
    height: auto;
    max-width: 240px;
    margin-left: auto;
}
.section--complexity-science {
    background: var(--color-purple);
    color: var(--color-white);
    min-height: 0;
}
.section__inner--complexity-science {
    padding: 0 70px 60px;
    min-height: 0;
}
.section--complexity-science .page-heading {
    color: var(--color-white);
    text-align: center;
    max-width: none;
    margin: 30px auto 50px;
    font-size: 38px;
    line-height: 1.2;
}
.section--complexity-science .card--frame {
    background: #f3eefb;
    border: 0;
    padding: 36px 28px;
}
.section--complexity-science .card__title { color: var(--color-purple-deep); }
.section--complexity-science .card__text  { color: var(--color-purple-quote); }
.section--supply-chain {
    background: var(--color-purple);
    color: var(--color-white);
    min-height: 0;
}
.section__inner--supply-chain {
    padding: 0 70px 60px;
    min-height: 0;
}
.supply-chain__box {
    border: 2px solid var(--color-white);
    border-radius: 4px;
    padding: 48px 60px;
    max-width: 1180px;
    margin: 0 auto;
}
.supply-chain__heading {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.2;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 40px;
}
.supply-chain__body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    align-items: center;
}
.supply-chain__icon {
    width: 100%;
    height: auto;
    max-width: 240px;
}
.supply-chain__text {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-white);
}
.section--partnerships {
    background: var(--color-lavender);
    color: var(--color-purple-deep);
    min-height: 768px;
}
.page-lede--inverted { color: rgba(255,255,255,0.92); }
.page-eyebrow--inverted { color: var(--color-white); }
.page-eyebrow--inverted .page-eyebrow__drop-cap { color: var(--color-white); }
.page-eyebrow--centered { text-align: center; display: block; margin: 24px auto 32px; }
.card--frame-inverted {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.card__title--inverted { color: var(--color-white); }
.card__text--inverted  { color: rgba(255, 255, 255, 0.92); }
.section--quantum {
    position: relative;
    background: var(--color-purple);
    color: var(--color-white);
    min-height: 0;
}
.section__inner--quantum {
    padding: 0 70px 60px;
    min-height: 0;
}
.section--quantum .section-header__wordmark { color: var(--color-white); }
.quantum__heading {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.2;
    color: var(--color-white);
    margin: 30px 0 30px;
}
.quantum__body {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-white);
}
.section__inner--understanding-ai,
.section__inner--partnerships {
    padding: 64px 60px;
    min-height: 768px;
}

.section__inner--understanding-ai {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    column-gap: 60px;
    align-items: start;
}
.understanding-ai__intro .page-heading { margin-bottom: 20px; }
.understanding-ai__intro .page-body { margin-top: 24px; }
.understanding-ai__cards { margin-top: 0; }
.ua-card { display: flex; flex-direction: column; gap: 6px; }
.ua-card__title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-purple-deep);
}
.ua-card__body-wrap {
    border: 1.5px solid var(--color-purple);
    padding: 18px 22px;
    border-radius: 4px;
}
.ua-card__body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-ink-soft);
}

.section__inner--supply-chain,
.section__inner--quantum {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.page-heading--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.page-heading__icon { width: 40px; height: 40px; }

/* =============================================================
   10. Legacy achievement cards
       (Kmart, Walmart, Domino's, GM, Loma Linda, NSA — alternating)
   ============================================================= */
.section--legacy-card {
    min-height: 0;
    background: var(--color-purple);
    color: var(--color-white);
}
/* All cards now uniformly purple — keeping the modifier classes for backward
   compat but they no longer change the background. */
.section--legacy-card--white { background: var(--color-purple); color: var(--color-white); }
.section__inner--legacy-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    column-gap: 60px;
    padding: 80px 60px;
    min-height: 768px;
}
.legacy-card__copy { max-width: 60ch; }
.legacy-card__heading {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.37;
    max-width: 18ch;
    margin-bottom: 28px;
}
.section--legacy-card--white .legacy-card__heading { color: var(--color-white); }
.legacy-card__body {
    font-family: var(--font-sans);
    font-size: 28px;
    line-height: 1.2;
    max-width: 32ch;
}
.legacy-card__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}
.legacy-card__figure img {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
    width: auto;
    height: auto;
}
.section--legacy-card .legacy-card__figure {
    background: var(--color-white);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    width: 360px;
    height: 360px;
    margin-left: auto;
    padding: 36px;
}
.section--legacy-card--white .legacy-card__figure {
    background: var(--color-white);
}
/* Per-card image sizing — each brand PNG has its own internal padding,
   so the displayed size has to be tuned per-logo to match the live's visual ratio
   of logo:circle. The figure has overflow:visible, so widths > 360px are
   intentional — the transparent edges of the PNG just hang outside the circle. */
#legacy-kmart .legacy-card__figure img {
    width: 220px;
    height: auto;
    max-width: none;
    max-height: 220px;
}
#legacy-walmart .legacy-card__figure img {
    width: 350px;
    height: auto;
    max-width: none;
    max-height: 360px;
}
#legacy-dominos .legacy-card__figure img {
    /* PNG is the tilted-diamond layout; the live rotates 45deg to display
       the logo upright. The rotated bounding box extends past the figure
       on the diagonals but those areas are transparent in the PNG. */
    width: 280px;
    height: 280px;
    max-width: none;
    max-height: none;
    transform: rotate(45deg);
}
#legacy-gm .legacy-card__figure img {
    width: 555px;
    height: auto;
    max-width: none;
    max-height: 360px;
}
#legacy-loma-linda .legacy-card__figure img {
    width: 425px;
    height: auto;
    max-width: none;
    max-height: 360px;
}
/* Government card — two stacked seals (CIA + NSA) without a big white circle.
   The seals are circular by design. The CIA banner PNG has the seal on the
   left half and text on the right, so it's cropped via object-position to
   show only the seal portion. */
#legacy-government .legacy-card__seals {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}
#legacy-government .legacy-card__figure {
    background: transparent;
    border-radius: 0;
    width: 240px;
    height: 240px;
    min-height: 240px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    /* Override the centering flex from .legacy-card__figure so the
       cropped CIA image anchors to the left edge of the figure. */
    justify-content: flex-start;
    align-items: flex-start;
}
#legacy-government .legacy-card__figure--cia {
    /* CIA banner PNG (1536x864, served at 2x). Measured seal extents:
       x=1..471 (width 470), centered vertically in 864.
       Scale image so seal width 470 maps to figure width 240
       (scale ~0.511 → image 785x442), then anchor to top-left and
       offset Y so the seal center lands at figure center. */
    background-repeat: no-repeat;
    background-size: 785px 442px;
    background-position: 0px -101px;
}
#legacy-government .legacy-card__figure--nsa img {
    width: 240px;
    height: 240px;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* =============================================================
   11. Partnerships
   ============================================================= */
.section__inner--partnerships {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.partnerships__icon {
    width: 140px;
    margin: 0 auto 32px;
}
.section__inner--partnerships .page-heading { color: var(--color-purple-deep); }
.section__inner--partnerships .page-body--lg { margin: 0 auto; }

/* =============================================================
   12. CTA — Lets work together
   ============================================================= */
.section--cta {
    background: var(--color-purple);
    color: var(--color-white);
    min-height: 768px;
}
.section__inner--cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    align-items: start;
    padding: 80px 60px;
    min-height: 568px;
}
.cta__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 22px;
}
.cta__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
}
.cta__heading {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
}
.cta__body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    max-width: 60ch;
    margin-bottom: 16px;
}
.cta__button {
    display: inline-block;
    padding: 18px 48px;
    background: var(--color-white);
    color: var(--color-purple-deep);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.2em;
    border-radius: 40px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease;
    margin-top: 24px;
    align-self: center;
}
.cta__button:hover { transform: translateY(-2px); }

.cta__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.cta__email-label {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0;
    text-transform: none;
}
.cta__email {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.08em;
}
.cta__socials { display: flex; gap: 18px; margin-top: 12px; }
.cta__socials img { width: 30px; height: 30px; filter: brightness(0) invert(1); }

/* =============================================================
   13. Brilliancy Media / press / YouTube
   ============================================================= */
.section--media {
    background: var(--color-purple-deep);
    color: var(--color-white);
    min-height: 1321px;
}
.section__inner--media { padding: 64px 60px; min-height: 1321px; }
.media__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 52px;
    text-align: center;
    margin-bottom: 40px;
}
.media__youtube-icon { width: 44px; height: 44px; filter: brightness(0) invert(1); }
.media__press-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 64px;
}
.press-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
    gap: 14px;
}
.press-card__title { order: 1; }
.press-card__body  { order: 2; }
.press-card__figure { order: 3; }
.press-card__source-logo { order: 4; }
/* Middle card on the live places the image at the top, with the
   DBusiness logo, then the heading + body underneath. */
.press-card:nth-child(2) .press-card__figure      { order: 1; }
.press-card:nth-child(2) .press-card__source-logo { order: 2; }
.press-card:nth-child(2) .press-card__title       { order: 3; }
.press-card:nth-child(2) .press-card__body        { order: 4; }
.press-card__figure {
    margin: 0;
    width: 100%;
    overflow: hidden;
}
.press-card__figure a {
    display: block;
    width: 100%;
}
.press-card__figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.press-card__source-logo {
    width: 170px;
    height: auto;
    margin: 8px 0;
    opacity: 0.95;
    align-self: center;
}
.press-card__title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
}
.press-card__title a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}
.press-card__body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    opacity: 0.95;
}
.media__video {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}
.media__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =============================================================
   14. Fallback
   ============================================================= */
.section--fallback {
    background: var(--color-white);
    color: var(--color-ink);
    padding: 4rem 2rem;
    min-height: auto;
}

/* =============================================================
   15. Responsive
   ============================================================= */
@media (max-width: 900px) {
    .section__inner { min-height: auto; padding: 60px 24px; }
    .section--hero, .section__inner--hero { height: auto; min-height: 100vh; max-height: none; }
    .hero__wordmark {
        position: static;
        width: auto;
        margin-top: 50vh;
        padding: 0 24px;
    }
    .hero__wordmark-top    { font-size: 56px; letter-spacing: 6px; }
    .hero__wordmark-bottom { font-size: 24px; letter-spacing: 12px; }
    .hero__tagline {
        position: static;
        width: auto;
        margin: 30px 0 0;
        padding: 0 24px;
        font-size: 22px;
    }
    .section__inner--about-phil,
    .section__inner--service-wheel,
    .section__inner--legacy-intro,
    .section__inner--understanding-ai,
    .blockchain__body { grid-template-columns: 1fr; }
    .card-grid--2, .card-grid--3, .media__press-grid { grid-template-columns: 1fr; }
    .page-heading           { font-size: 28px; }
    .page-heading--xl       { font-size: 36px; }
    .about-phil__byline     { font-size: 28px; }
    .service-wheel__heading { font-size: 28px; }
    .service-wheel__diagram { max-width: 80vw; }
    .legacy-card__heading   { font-size: 32px; }
    .cta__heading           { font-size: 36px; }
    .media__heading         { font-size: 32px; }
    .divider__line          { font-size: 28px; }
}