*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:rgba(168,113,255,.45) #07060D;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#07060D}
::-webkit-scrollbar-thumb{background:rgba(168,113,255,.45);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(168,113,255,.65)}
body{font-family:'Manrope',system-ui,sans-serif;background:#07060D;color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
ul,ol{list-style:none}
:root{
  --bg:#020817;--bg-2:#050b1f;--panel:#07112d;--panel-2:#0a1536;
  --gold:#C8A84B;--gold-lt:#DFC06E;
  --violet:#7c3cff;--purple:#a855f7;--pink:#e94bb9;--rose:#ff497d;--orange:#ff8a4c;--blue:#4f7dff;
  --text:#f8fafc;--soft:rgba(236,242,255,.78);--muted:rgba(236,242,255,.58);--faint:rgba(236,242,255,.14);
  --line:rgba(157,129,255,.28);--radius:12px;--radius-sm:8px;
  --pad-x:clamp(22px,4.86vw,94px);--section-py:clamp(54px,7vw,104px);
  --shell:min(100%,1220px);--hero-shell:min(100%,1360px);--grad:linear-gradient(100deg,var(--violet),var(--pink) 56%,var(--orange));
  /* Shared typography tokens — kept numerically identical to the
     matching tokens in ../../style.css (Home/Services). about.html
     does not load style.css, so the values are mirrored here rather
     than shared via one file, keeping all three pages' typography
     in sync without merging the two separate CSS architectures. */
  --font-primary:'Manrope',Arial,sans-serif;
  --text-hero:clamp(36px,4vw,66px);
  --fw-hero:700;
  --line-height-hero:1.04;
  --text-section-title:clamp(32px,2.4vw,44px);
  --fw-section-title:700;
  --line-height-heading:1.12;
  --text-subtitle:14px;
  --fw-subtitle:800;
  --ls-subtitle:0.24em;
  --text-body:clamp(14.5px,1vw,16px);
  --fw-body:400;
  --line-height-body:1.56;
  --text-small:clamp(14px,.95vw,15.5px);
  --line-height-small:1.52;
  --text-card-title:clamp(16px,1.1vw,20px);
  --fw-card-title:800;
  --line-height-card-title:1.24;
  /* Frosted-glass card material. One recipe, applied to every card-like
     surface on the page so they read as the same physical object.

     --glass-fill is a light translucent veil rather than the dark fill these
     cards used to have, so the page's colour shows through the panel instead
     of being blocked by it. --glass-blur is what makes it frosted rather
     than merely transparent.

     --glass-depth is the 3D part. Four inset layers do the work: a bright
     catch along the top edge, a hairline around the whole inner perimeter,
     then a wide soft shade drawn inward from every edge — that inner-wall
     shade is what reads as thickness — and finally two drop shadows to lift
     the panel off the page. Order matters: the wide inner shade must come
     after the hairline or it washes it out.

     Mirrored in our-work.css — change both together. */
  --glass-fill:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.05) 52%,rgba(255,255,255,.08));
  --glass-fill-hover:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.07) 52%,rgba(255,255,255,.105));
  --glass-blur:blur(26px) saturate(150%);
  --glass-depth:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 0 30px 2px rgba(2,3,10,.5),
    0 24px 52px rgba(0,0,0,.44),
    0 4px 12px rgba(0,0,0,.28);
  --glass-depth-hover:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 34px 2px rgba(2,3,10,.44),
    0 30px 60px rgba(0,0,0,.5),
    0 6px 16px rgba(0,0,0,.32);
}
.skip-link{position:absolute;top:-100%;left:20px;z-index:9999;min-height:44px;display:flex;align-items:center;padding:10px 16px;border-radius:0 0 8px 8px;background:var(--gold);color:#050505;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.skip-link:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:8px}
.brand-asset{display:block;object-fit:contain;object-position:center;mix-blend-mode:screen}
.nav{position:sticky;top:0;z-index:100;height:76px;padding:0 var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(2,5,13,.96);border-bottom:1px solid rgba(255,255,255,.055)}
.nav__logo{width:91px;height:57px;overflow:hidden;display:flex;align-items:center}
.nav__logo .brand-asset{width:100%;height:100%}
.nav__links{display:flex;align-items:center;gap:34px}
.nav__link{min-height:44px;display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.72);text-transform:uppercase;transition:color .2s}
.nav__link:hover{color:#fff}
.nav__link[aria-current="page"]{color:#C8A84B}
.nav__cta{min-height:44px;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.45);border-radius:5px;padding:10px 14px;font-size:9.5px;font-weight:800;text-transform:uppercase;color:#fff}
.nav__cta:hover{background:rgba(255,255,255,.07)}
/* Background matched to Home's ".sec-services" treatment per direct
   request: same blue->purple->pink horizontal color wash, layered
   over the same near-black vertical base (#07060D), replacing the
   previous 3-dot radial-glow treatment. */
.page{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(79,125,255,.18) 0%,rgba(124,58,237,.18) 50%,rgba(219,39,119,.15) 100%),linear-gradient(180deg,#07060D 0%,#0c0a17 50%,#07060D 100%)}
/* Hero band: the colour wash above covers the whole page, which left the
   hero tinted purple from the very first pixel. This lays the plain site
   base over roughly one desktop viewport, then fades out so the wash comes
   up underneath it — same "dark at the top, colour further down" read as
   Home, whose hero is its own near-black block of about the same height.
   The solid part is 100vh (59% of 170vh); the rest is the fade, kept long
   so the handover is not a visible seam. Sits at z-index 0 and .shell is
   z-index 1, so all content stays above it. Mirrored in our-work.css —
   change both together. */
.page::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:170vh;
  background:linear-gradient(180deg,#07060D 0%,#07060D 59%,rgba(7,6,13,0) 100%);
  pointer-events:none;
  z-index:0;
}
/* Grid-line pattern removed per direct request (was a faint 36px
   graph-paper overlay sitting behind the whole page). */
.shell{width:var(--shell);margin:0 auto;position:relative;z-index:1}
.section{padding:var(--section-py) var(--pad-x)}
.eyebrow{margin-bottom:14px;color:#b55cff;font-family:var(--font-primary);font-size:var(--text-subtitle);font-weight:var(--fw-subtitle);letter-spacing:var(--ls-subtitle);text-transform:uppercase}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* The hero owns a full viewport below the fixed nav. Content sits toward the
   bottom of that viewport (align-content:end) rather than centred or pinned
   to the top — the requested "bring it lower" — which leaves open space
   under the nav and lets the copy breathe just above the fold.

   This stays safe on short/mobile viewports where content grows taller than
   one screen: min-height is a floor, not a ceiling, so once content exceeds
   it the box simply grows to fit and align-content has nothing to
   distribute — there is no "extra space" for end-alignment to act on, so
   content still starts right under the nav rather than overflowing upward
   behind it. That growth is also what keeps the next section from ever
   showing inside the hero's own viewport: it only starts once the
   (possibly taller-than-100vh) hero box ends.

   --e4la-nav-h comes from nav.css and already swaps to the shorter mobile
   bar at 980px. dvh is declared second so browsers that support it use the
   dynamic viewport; the vh line is the fallback. Mirrored in our-work.css. */
.page>.section:first-child{
  /* Capped at 820px — see the matching rule in our-work.css for why
     (uncapped, align-content:end let a tall desktop monitor leave
     hundreds of extra px of dead air above the hero copy). */
  min-height:clamp(560px,calc(100vh - var(--e4la-nav-h,80px)),820px);
  min-height:clamp(560px,calc(100dvh - var(--e4la-nav-h,80px)),820px);
  display:grid;
  align-content:end;
  padding-top:clamp(32px,6vh,88px);
  padding-bottom:clamp(32px,6vh,88px);
}
.hero-grid{width:var(--hero-shell);display:grid;grid-template-columns:minmax(590px,.9fr) minmax(620px,1fr);gap:clamp(22px,2.6vw,36px);align-items:start}
.hero-copy{max-width:700px}
h1{max-width:760px;font-family:var(--font-primary);font-size:var(--text-hero);line-height:var(--line-height-hero);letter-spacing:normal;font-weight:var(--fw-hero)}
.lede{margin-top:11px;max-width:610px;color:rgba(255,255,255,.86);font-family:var(--font-primary);font-size:var(--text-body);line-height:var(--line-height-body);font-weight:var(--fw-body)}
.body-copy{margin-top:16px;display:grid;gap:10px;max-width:640px;color:var(--soft);font-family:var(--font-primary);font-size:var(--text-body);line-height:var(--line-height-body);font-weight:var(--fw-body)}
.principles{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px}
/* Frosted matte glass + thin stroke, matching Home's dark-glass card
   system (.svc-card): flat near-black fill instead of the previous
   blue-tinted gradient sheen, a real backdrop blur for genuine
   "frosted glass" (Home's flat cards don't need it since they sit on
   a busier background, but this page's cards benefit from it), and
   the same thin 1px border + inset-highlight/drop-shadow formula.
   Per-card accent color (--card-line, already set inline per card)
   is preserved, so Mission/Vision/Values/Team keep their individual
   tints — only the base material changed. */
.card{
  position:relative;
  border:1px solid var(--card-line,var(--line));
  border-radius:var(--radius);
  background-color:rgba(255,255,255,.055);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.34);
  overflow:hidden;
  transition:border-color .28s ease,box-shadow .28s ease,background-color .28s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background-color:#14151f}
}
.card:hover,.card:focus-within{
  border-color:var(--card-line,rgba(157,129,255,.5));
  background-color:rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 58px rgba(0,0,0,.44);
}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 0,rgba(var(--accent-rgb,124,60,255),.18),transparent 40%);pointer-events:none}
.principle{min-height:154px;padding:17px}
.icon-orb{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin-bottom:11px;color:var(--accent,#a855f7);border:1px solid rgba(var(--accent-rgb,124,60,255),.62);box-shadow:0 0 24px rgba(var(--accent-rgb,124,60,255),.2),inset 0 0 14px rgba(var(--accent-rgb,124,60,255),.14)}
.icon-orb svg{width:22px;height:22px;stroke-width:1.6}
.card h2,.card h3{position:relative;color:#fff}
.principle h2{font-size:clamp(18px,1.45vw,23px);line-height:1.2;margin-bottom:7px}
.principle p{position:relative;color:var(--soft);font-size:14px;line-height:1.44}
.section-head{margin-bottom:30px}
.section-head h2{font-family:var(--font-primary);font-size:var(--text-section-title);line-height:var(--line-height-heading);letter-spacing:0;font-weight:var(--fw-section-title)}
.section-head p{margin-top:14px;max-width:650px;color:var(--muted);font-family:var(--font-primary);font-size:var(--text-body);line-height:var(--line-height-body);font-weight:var(--fw-body)}
.journey{padding-top:clamp(22px,2.4vw,36px)}
.timeline{position:relative;display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:12px;padding-top:42px}
.timeline::before{content:"";position:absolute;left:3%;right:3%;top:17px;height:2px;border-radius:999px;background:var(--grad);box-shadow:0 0 22px rgba(168,85,247,.42)}
.milestone{position:relative;min-width:0}
.milestone::before{content:"";position:absolute;top:-31px;left:22px;width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--node,#a855f7);box-shadow:0 0 0 4px rgba(var(--node-rgb,168,85,247),.22),0 0 18px rgba(var(--node-rgb,168,85,247),.6)}
.milestone-card{height:100%;display:flex;flex-direction:column;gap:12px;padding:0;background:transparent;border:0;color:inherit;text-align:left}
.year{color:var(--node,#a855f7);font-size:clamp(18px,1.5vw,24px);font-weight:800;line-height:1.15}
.milestone h3{font-size:17px;line-height:1.4;min-height:46px}
.milestone p{color:var(--soft);font-size:14px;line-height:1.65}
.media{position:relative;order:3;height:124px;border:1px solid rgba(var(--node-rgb,168,85,247),.38);border-radius:10px;background:#06112e;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.media img{width:100%;height:100%;object-fit:cover}
.media--2016 img{object-position:center center}
.media--team img{object-position:center 34%}
.media--paint{display:grid;place-items:center;background:#fff}
.media--paint img{width:82%;height:82%;object-fit:contain}

/* ── Timeline description reveal ──────────────────────────────────
   Only the paragraph is hidden — the year and heading stay visible as the
   card's permanent title, matching the reference sketch (Title + image
   thumbnail by default; hovering brings the paragraph down between them,
   pushing the image lower). Wraps the lone <p> in .milestone-reveal, a
   single-cell grid whose row track animates 0fr -> 1fr: unlike max-height,
   this animates to the paragraph's true natural height with no guessed
   ceiling and no clipping. The inner <p> needs overflow:hidden and
   min-height:0 for the 0fr state to actually reach zero (grid items don't
   shrink below their content's min-size by default).

   Default (unscoped, so it's what mobile/tablet and any non-matching
   browser get) is the expanded 1fr state — always-visible text, same as
   before this change — since there is no hover on touch to reveal it any
   other way. Only min-width:861px (one pixel above the breakpoint where
   the card switches to the side-by-side tablet layout) collapses it to 0fr
   and wires the hover/focus expand. :focus and :focus-visible are both
   listed so keyboard users get the same reveal via the card's
   tabindex="0" — there is nothing focusable nested inside it to trigger
   :focus-within instead. */
.milestone-reveal{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.milestone-reveal>p{overflow:hidden;min-height:0}
@media(min-width:861px){
  .milestone-reveal{grid-template-rows:0fr}
  .milestone-card:hover .milestone-reveal,
  .milestone-card:focus .milestone-reveal,
  .milestone-card:focus-visible .milestone-reveal{grid-template-rows:1fr}
}
/* align-items was "start", which let each profile card size to its
   own content height — since the two bios are different lengths,
   the shorter card's frosted-glass box stopped far short of its
   neighbor's bottom edge, leaving a large empty gap below it.
   Default "stretch" makes both cards fill the same row height. */
.team-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.profile{display:grid;grid-template-columns:minmax(170px,.72fr) 1fr;gap:22px;padding:18px}
.portrait{align-self:start;height:clamp(360px,34vw,520px);border-radius:10px;overflow:hidden;background:#050b18}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
.profile--nasim .portrait img{object-position:center 18%}
.profile--rojin .portrait img{object-position:center 14%}
.profile h3{font-size:clamp(22px,2vw,30px);line-height:1.1;margin:4px 0 6px}
.role{color:#b785ff;font-size:13px;font-weight:800;line-height:1.35;margin-bottom:16px}
.bio{display:grid;gap:12px;color:var(--soft);font-size:13.5px;line-height:1.62}
.highlights{display:grid;gap:8px;margin-top:16px}
.highlights li{position:relative;padding-left:20px;color:rgba(255,255,255,.82);font-size:12.5px;line-height:1.35}
.highlights li::before{content:"";position:absolute;left:0;top:.35em;width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(168,85,247,.6)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{border:1px solid rgba(124,60,255,.36);border-radius:6px;padding:6px 8px;background:rgba(124,60,255,.12);color:#d7c4ff;font-size:10px;font-weight:800;line-height:1}
.ai-stack{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ai-card{display:flex;flex-direction:column;padding:26px;min-height:360px}
.ai-card h3{font-size:clamp(20px,1.8vw,27px);line-height:1.15;margin-bottom:16px}
.ai-label{display:block;margin:8px 0 14px;color:#ff70c4;font-size:clamp(20px,2.4vw,36px);font-weight:800;line-height:1.05}
.ai-card p{position:relative;color:var(--soft);font-size:14px;line-height:1.6}
.principle-line{margin-top:14px;color:#fff;font-weight:800}
.ai-tags{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.ai-tags li{border:1px solid rgba(var(--accent-rgb,168,85,247),.34);border-radius:6px;padding:7px 9px;background:rgba(var(--accent-rgb,168,85,247),.1);color:#e6ddff;font-size:11px;font-weight:800;line-height:1.1}
.cta-wrap{padding-top:0}
/* Harmonized with Home's ".schedule-card" (the "Ready to gain a
   clearer direction?" band): same purple->near-black->pink diagonal
   wash, same thin single-hue border + triple-layer shadow formula,
   instead of the previous flat navy fill + bright rainbow border-box
   ring, which read as a different, louder material than the rest of
   the site's cards. */
/* Same glass as the cards, but keeping its violet -> pink accent wash on top
   of the veil so the closing CTA still reads as the loudest panel. */
.final-cta{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:28px;padding:32px clamp(24px,3vw,40px);border-radius:22px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(120deg,rgba(124,58,237,.2),rgba(255,255,255,.05) 55%,rgba(219,39,119,.18));backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-depth);transition:border-color .2s ease,box-shadow .2s ease}
.final-cta:hover,.final-cta:focus-within{border-color:rgba(255,255,255,.32);box-shadow:var(--glass-depth-hover)}
.cta-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(124,58,237,.14);color:#c4b5fd}
.cta-icon svg{width:24px;height:24px;transform:rotate(-45deg)}
/* Matched to Home's ".schedule-card__h2"/"__desc" (the equivalent
   final-CTA-band heading/copy role) instead of this page's own
   one-off sizes. */
.final-cta h2{font-size:clamp(22px,1.8vw,28px);line-height:1.12}
.final-cta p{margin-top:6px;color:var(--soft);font-family:var(--font-primary);font-size:var(--text-body);line-height:var(--line-height-body);font-weight:var(--fw-body)}
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:8px;color:#fff;background:linear-gradient(100deg,#5b57ff 0%,#cf49d9 52%,#ff497d 100%);box-shadow:0 10px 30px rgba(207,73,217,.28);font-weight:800;font-size:15px;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(207,73,217,.38)}
.btn svg,.nav__cta svg{width:15px;height:15px}
.footer{background:#07060D;border-top:1px solid rgba(255,255,255,.05);padding:32px var(--pad-x) 18px}
.footer__top{display:grid;grid-template-columns:180px 1fr;gap:44px;margin-bottom:18px}
.footer__brand-logo{width:83px;height:49px;overflow:hidden}.footer__brand-logo .brand-asset{width:100%;height:100%}
/* Footer typography matched to Home/Services' resolved values (same
   shared roles: tagline/nl-note -> body-copy, col-head -> card-title,
   links -> small-text) instead of this page's own smaller one-off
   sizes, which read noticeably tinier than the other two pages. */
.footer__tagline{font-family:var(--font-primary);font-size:var(--text-body);font-weight:var(--fw-body);line-height:var(--line-height-body);margin:14px 0 16px;max-width:240px;color:rgba(255,255,255,.48)}
.footer__socials{display:flex;gap:10px}.footer__soc{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:#fff}.footer__soc svg{width:14px;height:14px}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}.footer__col-head{font-family:var(--font-primary);font-size:var(--text-card-title);font-weight:var(--fw-card-title);line-height:var(--line-height-card-title);letter-spacing:0;text-transform:uppercase;color:var(--gold);margin-bottom:14px}.footer__links{display:grid;gap:8px}.footer__links a,.footer__nl-note{font-family:var(--font-primary);font-size:var(--text-small);line-height:var(--line-height-small);color:rgba(255,255,255,.7)}
.footer__form{height:36px;display:flex;border:1px solid rgba(200,168,75,.52);border-radius:6px;overflow:hidden}.footer__input{min-width:0;flex:1;border:0;background:transparent;color:#fff;padding:8px 12px;font-family:var(--font-primary);font-size:14px}.footer__submit{border:0;background:transparent;color:var(--gold);font-size:22px;padding:4px 12px;cursor:pointer}
.footer__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}.footer__copy,.footer__made{font-family:var(--font-primary);font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.48)}
[data-r]{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
[data-r].in{opacity:1;transform:none}
@media(max-width:1180px){.hero-grid{grid-template-columns:1fr}.hero-copy{max-width:760px}.principles{max-width:860px}.profile{grid-template-columns:minmax(150px,.54fr) 1fr}.timeline{overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity}.milestone{scroll-snap-align:start}}
@media(max-width:860px){.nav{height:62px}.nav__logo{width:76px;height:46px}.nav__links{display:none}.nav__cta{display:none}.section{padding-left:20px;padding-right:20px}.principles,.team-layout,.ai-stack{grid-template-columns:1fr}.timeline{display:grid;grid-template-columns:1fr;gap:22px;overflow:visible;padding:6px 0 0 30px}.timeline::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto;background:var(--grad)}.milestone::before{top:4px;left:-29px}.milestone-card{display:grid;grid-template-columns:1fr minmax(120px,190px);gap:14px;align-items:start}.milestone p{font-size:13.5px}.media{grid-row:1/4;grid-column:2;height:132px}.profile{grid-template-columns:1fr}.portrait{min-height:auto;aspect-ratio:4/5}.ai-card{min-height:0}.final-cta{grid-template-columns:1fr;align-items:start}.btn{width:100%}.footer__top{grid-template-columns:1fr}.footer__cols{grid-template-columns:1fr 1fr}.footer__soc{width:44px;height:44px}.footer__links a{min-height:44px;display:flex;align-items:center}.footer__form{height:46px}.footer__input,.footer__submit{min-height:44px}.footer__submit{min-width:44px}}
@media(max-width:700px){h1{font-size:clamp(36px,12vw,58px)}}
@media(max-width:520px){.page>.section:first-child{padding-top:24px;padding-bottom:36px}.principle{min-height:0;padding:17px}.milestone-card{grid-template-columns:1fr}.media{grid-row:auto;grid-column:auto;height:154px}.profile{padding:14px}.bio{font-size:13px}.ai-card{min-height:0}.final-cta{padding:24px}.footer__cols{grid-template-columns:1fr}}
@media(max-width:360px){.section{padding-left:16px;padding-right:16px}.timeline{padding-left:24px}.milestone::before{left:-25px}.profile h3{font-size:22px}.tag{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}[data-r]{opacity:1!important;transform:none!important}.btn:hover{transform:none}}

/* Nav/header sizing, links, CTA, badge, and mobile menu — all of it —
   now lives exclusively in ../nav.css (loaded on every page, after
   this file) as a single shared component. The full duplicate block
   that used to live here ("FINAL ABOUT NAVBAR MATCH HOME/SERVICES")
   is removed: having the nav styled redundantly in nav.css + style.css
   + about.css, each with its own escalating !important/specificity
   layers, was the actual cause of the nav looking/behaving
   differently across pages. Do not re-add nav rules here — edit
   nav.css instead. */

/* Cross-document View Transitions (the @view-transition + nav/page
   crossfade block that used to live here) are removed site-wide.
   In practice they caused the exact bug being chased across this
   whole nav investigation: during a real navigation, the browser
   would apply the DESTINATION page's nav state (e.g. the new page's
   correct active-link color) instantly, while the outgoing page's
   body content kept cross-fading out underneath for up to ~260ms —
   and under some interruption/timing conditions (fast re-scroll,
   repeated navigation, slow asset load) that mismatched, stale state
   could linger far longer than intended. A plain, instant, full page
   swap (the browser default with this feature off) can never show a
   mismatched nav/body state, so it's the more reliable choice here. */

/* The nav__cta / nav__mobile-cta badge-centering saga, the typography
   lock, and the position/type hard-lock that used to live here are
   all resolved structurally now: nav.css is the single source of
   truth for the header/nav (sizing, links, CTA, badge, mobile menu)
   across all three pages, with static hardcoded geometry and no JS
   dependency, so there's nothing page-specific left to lock or
   re-center here. See ../nav.css for the current implementation. */

/* FINAL ABOUT STRATEGY CTA MATCHES LETS CONNECT */
.final-cta .btn {
  min-width: 0 !important;
  width: auto !important;
  min-height: 46px !important;
  padding: 13px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #fff !important;
  background: linear-gradient(100deg, #F97316 0%, #DB2777 52%, #7C3AED 100%) !important;
  box-shadow: 0 12px 30px rgba(219, 39, 119, .24), 0 4px 14px rgba(124, 58, 237, .18) !important;
  font-family: Inter, Manrope, Helvetica Neue, Arial, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transform: none !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
.final-cta .btn:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.06) brightness(1.03) !important;
  box-shadow: 0 16px 34px rgba(219, 39, 119, .30), 0 6px 18px rgba(124, 58, 237, .22) !important;
}
.final-cta .btn svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 auto !important;
}
@media(max-width:860px){
  .final-cta .btn { width: 100% !important; }
}
/* MOBILE ABOUT IMAGES — FULL FRAME, NO CROPPING */
@media (max-width: 640px) {
  .timeline .media,
  .team-layout .portrait {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }

  .timeline .media img,
  .team-layout .portrait img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .timeline .media--paint img {
    width: 100% !important;
    padding: 12px;
  }
}


/* ABOUT HERO + INSET GLASS CARD REFINEMENT */
.hero-copy h1{
  max-width:720px;
  color:#fff;
  font-family:var(--font-primary);
  font-size:var(--text-hero);
  font-weight:var(--fw-hero);
  line-height:var(--line-height-hero);
  letter-spacing:0;
}
.hero-copy .lede,
.hero-copy .body-copy{
  max-width:620px;
  color:rgba(236,242,255,.78);
  font-family:var(--font-primary);
  font-size:var(--text-body);
  font-weight:var(--fw-body);
  line-height:var(--line-height-body);
}
/* Frosted glass, replacing the dark fill these cards used to have. This is
   the block that actually wins for .card — the earlier one above is
   overridden here, so edit this one. See --glass-* in :root. */
.card{
  border-color:var(--card-line,rgba(255,255,255,.17));
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-depth);
}
.card:hover,
.card:focus-within{
  border-color:var(--card-line,rgba(255,255,255,.28));
  background:var(--glass-fill-hover);
  box-shadow:var(--glass-depth-hover);
}
/* Without backdrop-filter there is nothing to frost, so a translucent veil
   would just look thin. Falls back to an opaque panel light enough to still
   read as glass rather than reverting to the old dark card. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background:#1c1c28}
  .card:hover,.card:focus-within{background:#22222f}
}
/* ABOUT HERO TITLE — SHARP LUMINOUS SITE SIGNATURE */
.hero-copy h1{
  color:#fff;
  font-family:'Manrope',Arial,sans-serif;
  font-size:clamp(36px,4vw,66px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.025em;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  text-shadow:0 0 18px rgba(255,255,255,.10);
}
.hero-copy h1 .gradient-text{
  display:inline-block;
  background:linear-gradient(95deg,#F97316 0%,#DB2777 48%,#7C3AED 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 7px rgba(219,39,119,.34)) drop-shadow(0 0 15px rgba(124,58,237,.20));
}
@media(max-width:700px){
  .hero-copy h1{font-size:clamp(36px,12vw,58px);letter-spacing:-.02em}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy h1 .gradient-text{filter:drop-shadow(0 0 7px rgba(219,39,119,.28))}
}
/* ABOUT HERO — EXACT SERVICES VISUAL MATCH */
.hero-copy .eyebrow{
  margin-bottom:16px;
  color:#7C3AED;
  font-family:'Manrope',Arial,sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.24em;
}
.hero-copy h1{
  max-width:640px;
  margin-bottom:18px;
  color:#fff;
  font-family:'Manrope',Arial,sans-serif;
  font-size:clamp(30px,4vw,46px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-1px;
  text-shadow:none;
  text-rendering:geometricPrecision;
}
.hero-copy h1 .gradient-text{
  display:inline-block;
  background:linear-gradient(95deg,#DB2777 0%,#F97316 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:none;
}
.hero-copy .lede{
  max-width:560px;
  margin-top:0;
  color:rgba(255,255,255,.55);
  font-family:'Manrope',Arial,sans-serif;
  font-size:15px;
  font-weight:300;
  line-height:1.7;
}
@media(max-width:700px){
  .hero-copy h1{font-size:clamp(30px,10vw,46px);letter-spacing:-1px}
}