/* ============ company page scoped styles ============ */
  .cmp *{ box-sizing:border-box; }
  .cmp{ overflow-x:clip; }
  .cmp section{ position:relative; }

  /* ---------- 01 · manifesto opener — two-column hero text ---------- */
  .cmp-open{
    max-width:1240px; margin:0 auto; padding:180px 24px 60px;
  }
  /* row 1 — single column */
  .cmp-open-row1{ margin-bottom:clamp(32px,4vw,73px); }

  /* row 2 — two columns */
  .cmp-open-grid{
    display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:start; padding: 30px 0;
  }
  .cmp-open-col{ min-width:0; }

  .cmp-open-h{
    font-size:clamp(40px, 5.6vw, 74px);
    line-height:1.15; letter-spacing:-0.03em; font-weight:200;
    color:var(--ink); margin:0;
  }
  .cmp-open-quote{
    margin:0; padding:0; border:none;
    font-size:clamp(20px,2.8vw,28px);
    line-height:1.35; letter-spacing:-0.02em; font-weight:800; color:var(--ink);
  }

  .cmp-open-col-sub{ padding-top:clamp(2px,0.6vw,8px); }
  .cmp-open-sub{
    margin:0;
    font-size:clamp(19px,2.1vw,26px);
    line-height:1.4; letter-spacing:-0.01em; font-weight:200;
    color:var(--ink);
  }

  /* ---------- 01b · address (origin) — standalone, centered ---------- */
  .cmp-addr{ max-width:1240px; margin:0 auto; padding:0 24px 100px; }
  .cmp-open-addr{
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:flex-start; gap:24px; text-align:left;
  }
  .cmp-open-addr .cmp-origin-block{ text-align:left; }
  .cmp-open-addr .cmp-origin-arrow{ transform:rotate(90deg); }

  /* origin row: addr left, philosophy right */
  .cmp-origin{ padding-top:24px; }
  .cmp-origin-grid{ align-items:start; margin-bottom:56px; }

  /* -- supporting cards row -- */
  .cmp-open-cards{
    display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 auto;
  }
  .cmp-open-card{
    padding:26px 26px 24px;
    display:flex; flex-direction:column; gap:8px;
  }
  .cmp-open-card strong{ font-size:18px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); }
  .cmp-open-card span{ font-size:14px; line-height:1.55; color:var(--ink-soft); }

  /* ---------- 02 · belief — word-by-word scrub ---------- */
  .cmp-belief{ background:#29211D; color:var(--on-dark); }
  .cmp-belief-pin{
    min-height:100vh; display:flex; align-items:center;
    max-width:1080px; margin:0 auto; padding:0 24px;
  }
  .cmp-belief-p{
    font-size:clamp(26px,4.2vw,54px);
    line-height:1.28; letter-spacing:-0.025em; font-weight:200; margin:0;
  }
  .cmp-belief-p .w{ color:#332B27; transition:color .25s linear; }
  .cmp-belief-p .w.lit{ color:#fff; }
  .cmp-belief-p .w.accent.lit{
    background:var(--accent-grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }

  /* ---------- 03 · principles — sticky stack, header always peeks ---------- */
  .cmp-prin{ padding:96px 0 64px; }
  .cmp-prin-head{
    max-width:1240px; margin:0 auto; padding:0 24px 56px; text-align: center;
  }
  .cmp-prin-head h2{
    font-size:clamp(28px,3.6vw,44px); line-height:1.08; letter-spacing:-0.03em;
    font-weight:200; color:var(--ink); margin:14px 0 0;
  }

  /* stack: each card sits sticky at BASE + i*HEADER_H, so as later cards (higher
     z-index) slide up over earlier ones, only the earlier card's header row
     — number + title — keeps peeking out above, never fully hidden. */
  :root{ --prin-header-h:104px; --prin-base-top:104px; }
  .cmp-prin-stack{ max-width:1240px; margin:0 auto; padding:0 24px; position:relative; }

  .cmp-prin-card{
    position:sticky;
    top:calc(var(--prin-base-top) + var(--i) * var(--prin-header-h));
    z-index:calc(var(--i) + 1);
    height:440px;
    margin-bottom:0;
    border-radius:var(--radius-xl);
    color:#fff;
    background:var(--c1);
    overflow:hidden;
    display:flex; flex-direction:column;
  }
  /* The peek-stack math (top = base + i*header-h) assumes each card's flow
     box sits flush against the next, with zero gap — any margin between
     cards throws that off, causing earlier cards to unstick too soon and
     leaving a visible gap where the next card's header should be peeking. */
  /* The last card has no following card to push it away, so without extra
     trailing room it "unsticks" abruptly and collides with the next section
     as you keep scrolling. Give it the same amount of room it took to
     stick in the first place, so it releases just as smoothly as it arrived. */
  .cmp-prin-card:last-child{ margin-bottom:calc(var(--prin-base-top) + var(--i) * var(--prin-header-h)); }

  /* header — always the visible "peek" strip; title first, icon in its own right column */
  .cmp-prin-card-head{
    flex:none;
    height:var(--prin-header-h);
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:0 32px;
  }
  .cmp-prin-card-head h3{
    font-size:clamp(20px,2.2vw,27px); line-height:1.15; letter-spacing:-0.02em;
    font-weight:200; margin:0;
    display:flex; align-items:baseline; gap:16px;
  }
  .cmp-prin-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px; letter-spacing:.06em; font-weight:600;
    color:rgba(255,255,255,0.65);
  }
  .cmp-prin-ico{
    flex:none;
    width:52px; height:52px;
    border-radius:14px; background:rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .cmp-prin-ico svg{ width:26px; height:26px; }

  /* body — 2 columns: text | kick */
  .cmp-prin-card-body{
    flex:1 1 auto;
    padding:2px 40px 40px;
    display:grid; grid-template-columns:1fr 1fr; gap:48px;
    align-content:end; align-items:end;
  }
  .cmp-prin-card-text{ min-width:0; }
  .cmp-prin-card-aside{ min-width:0; }
  .cmp-prin-card .strap{
    font-size:42px; line-height:1.4; font-weight:200; margin:0 0 12px; max-width:520px;
  }
  .cmp-prin-card p{ font-size:16px; line-height:1.65; color:rgba(255,255,255,1); margin:0 0 10px; max-width:520px; }
  .cmp-prin-card-text p:last-child{ margin-bottom:0; }
  .cmp-prin-card .kick{
    font-size:16px; font-weight:200; margin:0;
    display:inline-block;
    background:var(--accent-grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }

  /* ---------- 04 · numbers ---------- */
  .cmp-num{
    max-width:1240px; margin:0 auto; padding:110px 24px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center;
  }
  .cmp-num-item strong{
    display:block;
    font-size:clamp(44px,6vw,76px); line-height:1; letter-spacing:-0.04em; font-weight:800;
    background:var(--accent-grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .cmp-num-item span{ display:block; margin-top:12px; font-size:14.5px; color:var(--ink-soft); font-weight:600; }

  /* ---------- 02 · philosophy — vertical list, right column of origin row ---------- */
  .cmp-philosophy{ text-align:left; }
  .cmp-philosophy .eyebrow{ display:inline-block; margin-bottom:20px; }

  .cmp-creed-list{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:0;
    border-top:1px solid var(--border);
  }
  .cmp-creed-row{
    display:flex; align-items:center; gap:18px;
    padding:16px 4px;
    border-bottom:1px solid var(--border);
    transition:transform .25s var(--ease), color .25s var(--ease);
  }
  .cmp-creed-row:hover{ transform:translateX(4px); }
  .cmp-creed-row p{
    font-size:clamp(17px,1.5vw,21px); line-height:1.3; letter-spacing:-0.02em;
    font-weight:800; color:var(--ink); margin:0;
  }
  .cmp-creed-row .cmp-creed-num{ margin-bottom:0; flex:none; }
  .cmp-creed-row-accent .cmp-creed-num{ color:var(--accent-1); }
  .cmp-creed-row-accent p{
    background:var(--accent-grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .cmp-creed-num{
    display:block; font-family:'IBM Plex Mono', monospace;
    font-size:13px; letter-spacing:.1em; font-weight:600; color:var(--ink-faint);
  }
  .cmp-sign{
    margin:28px 0 0; font-size:16px; font-weight:700; color:var(--ink-soft);
  }
  .cmp-sign span{
    background:var(--accent-grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }

  /* ---------- address-style block (used inside the opener) ---------- */
  .cmp-origin-block{ text-align:center; }
  .cmp-origin-kicker{
    display:block; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent-1); margin-bottom:14px;
  }
  .cmp-origin-place{
    font-size:clamp(24px,3.2vw,38px); line-height:1.25; letter-spacing:-0.02em;
    font-weight:200; color:var(--ink); margin:0;
  }
  .cmp-origin-arrow{
    flex:none; color:var(--ink-faint);
    display:flex; align-items:center; justify-content:center;
  }

  /* ---------- 07 · CTA ---------- */
  .cmp-cta{ text-align:center; padding:70px 24px 130px; }
  .cmp-cta h2{
    font-size:clamp(30px,4.4vw,56px); letter-spacing:-0.03em; font-weight:800; color:var(--ink); margin:0 0 26px;
  }
  .cmp-cta .early-access-btn{ font-size:16px; padding:14px 28px; }

  /* reveal helper */
  .rv{ opacity:0; transform:translateY(30px); }

  @media (max-width:900px){
    :root{ --prin-header-h:84px; --prin-base-top:82px; }
    .cmp-prin{ padding-top:64px; }
    .cmp-prin-card{ height:auto; min-height:340px; margin-bottom:0; }
    .cmp-prin-card-head{ padding:0 22px; }
    .cmp-prin-card-body{ padding:2px 22px 28px; }
    .cmp-num{ grid-template-columns:1fr; gap:44px; padding:80px 24px; }
    .cmp-open{ padding:76px 24px 60px; }
    .cmp-open-grid{ grid-template-columns:1fr; gap:28px; }
    .cmp-open-col-sub{ padding-top:0; }
    .cmp-open-addr{ gap:20px; }
    .cmp-origin-grid{ margin-bottom:44px; }
    .cmp-prin-card-body{ grid-template-columns:1fr; gap:16px; }
    .cmp-prin-card .kick{ padding-left:16px; }
    .cmp-open-cards{ grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion:reduce){
    .cmp .rv, .cmp-open-sub, .cmp-open-h .l > span, .cmp-sign{ opacity:1 !important; transform:none !important; }
    .cmp-prin-card{ position:relative !important; top:0 !important; height:auto !important; margin-bottom:28px !important; }
    .cmp-prin-card:last-child{ margin-bottom:0 !important; }
    .cmp-belief-p .w{ color:var(--on-dark); }
    .cmp-culture-ico, .cmp-culture-ico *{ animation:none !important; }
    .cul-anim-bolt{ stroke-dashoffset:0 !important; }
  }


/* ---------- principle card color variants (replaces inline style="--c1..--i..") ---------- */
.cmp-prin-card--1{ --c1:#29211D; --i:0; }
.cmp-prin-card--2{ --c1:#332B27; --i:1; }
.cmp-prin-card--3{ --c1:#3D3531; --i:2; }
.cmp-prin-card--4{ --c1:#473F3B; --i:3; }


/* ============================================================
   NEW SECTIONS — philosophy (flat 3-col), culture, closing
   ============================================================ */

/* ---------- philosophy — 2 column: 40% head / 60% items, flat (no border/bg/shadow) ---------- */
.cmp-phil{ max-width:1240px; margin:0 auto; padding:72px 24px 180px; }
.cmp-phil-grid{
  display:grid; grid-template-columns:40% 60%; gap:48px; align-items:start;
}
.cmp-phil-head{ min-width:0; }
.cmp-phil-head .eyebrow{ display:inline-block; margin-bottom:14px; }
.cmp-phil-head h2{
  font-size:clamp(28px,3.6vw,44px); line-height:1.1; letter-spacing:-0.03em;
  font-weight:200; color:var(--ink); margin:0;
}
.cmp-phil-items{
  min-width:0;
  display:grid; grid-template-columns:1fr 1fr; gap:32px 40px;
}
/* items are intentionally flat — no border, no background, no shadow, no icon/number */
.cmp-phil-item{ border:none; background:none; box-shadow:none; }
.cmp-phil-item p{
  font-size:clamp(19px,1.7vw,23px); line-height:1.4; letter-spacing:-0.02em;
  font-weight:200; color:var(--ink); margin:0;
}
.cmp-phil-item--accent p{
  background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- Our Culture ---------- */
.cmp-culture{ max-width:1240px; margin:0 auto; padding:80px 24px 96px; }
.cmp-culture-head{ max-width:760px; margin:0 auto 60px; text-align:center; }
.cmp-culture-head .eyebrow{ display:inline-block; margin-bottom:14px; }
.cmp-culture-head h2{
  font-size:clamp(30px,4vw,52px); line-height:1.05; letter-spacing:-0.03em;
  font-weight:200; color:var(--ink); margin:0;
}
.cmp-culture-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px 44px;
}
.cmp-culture-item{ display:flex; flex-direction:column; gap:14px; }
.cmp-culture-ico{
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-wash); color:var(--accent-1);
}
.cmp-culture-ico svg{ width:24px; height:24px; overflow:visible; }

/* -- shared origin setup for animated svg parts -- */
.cul-anim-meridian, .cul-anim-orbit, .cul-anim-key, .cul-anim-loop,
.cul-anim-ring, .cul-anim-dot{
  transform-origin:12px 12px;
}

/* 1 · Work Without Borders — globe spins (meridian sweep) + dot orbits the world */
.cul-anim-meridian{ animation:culGlobeSpin 3.4s linear infinite; }
.cul-anim-orbit{ animation:culOrbit 3.4s linear infinite; }
@keyframes culGlobeSpin{
  0%   { transform:scaleX(1); }
  25%  { transform:scaleX(0.12); }
  50%  { transform:scaleX(-1); }
  75%  { transform:scaleX(-0.12); }
  100% { transform:scaleX(1); }
}
@keyframes culOrbit{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* 2 · Ownership Comes First — the key turns in the lock, then settles */
.cul-anim-key{
  transform-origin:8px 15.5px;
  animation:culKeyTurn 3.2s ease-in-out infinite;
}
@keyframes culKeyTurn{
  0%, 55%, 100%{ transform:rotate(0deg); }
  70%          { transform:rotate(38deg); }
  85%          { transform:rotate(-6deg); }
}

/* 3 · Skill Over Seniority — bolt draws itself, then flashes bright */
.cul-anim-bolt{
  stroke-dasharray:52; stroke-dashoffset:52;
  animation:culBolt 2.8s ease-in-out infinite;
}
@keyframes culBolt{
  0%       { stroke-dashoffset:52; fill:transparent; }
  45%      { stroke-dashoffset:0;  fill:transparent; }
  58%, 66% { stroke-dashoffset:0;  fill:currentColor; }
  62%      { stroke-dashoffset:0;  fill:transparent; }
  80%      { stroke-dashoffset:0;  fill:transparent; }
  100%     { stroke-dashoffset:52; fill:transparent; }
}

/* 4 · Never Stop Learning — the loop never stops turning */
.cul-anim-loop{ animation:culLoop 3s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes culLoop{
  0%       { transform:rotate(0deg); }
  60%, 100%{ transform:rotate(360deg); }
}

/* 5 · Details Define Us — rings lock into focus, dot sharpens */
.cul-anim-ring--outer{ animation:culFocusOuter 3s ease-in-out infinite; }
.cul-anim-ring--inner{ animation:culFocusInner 3s ease-in-out infinite; }
.cul-anim-dot{ animation:culFocusDot 3s ease-in-out infinite; }
@keyframes culFocusOuter{
  0%, 100%{ transform:scale(1);    opacity:1; }
  50%     { transform:scale(1.18); opacity:.35; }
}
@keyframes culFocusInner{
  0%, 100%{ transform:scale(1);    opacity:1; }
  50%     { transform:scale(0.78); opacity:.55; }
}
@keyframes culFocusDot{
  0%, 100%{ transform:scale(1); }
  50%     { transform:scale(1.8); }
}

.cmp-culture-item h3{
  font-size:clamp(18px,1.6vw,24px); line-height:1.2; letter-spacing:-0.02em;
  font-weight:200; color:var(--ink); margin:2px 0 0;
}
.cmp-culture-item p{
  font-size:15px; line-height:1.62; color:var(--ink-soft); margin:0; max-width:360px;
}

/* ---------- origin row: address left, right column intentionally empty ---------- */
.cmp-open-empty{ min-width:0; }

/* ---------- closing — Built from anywhere (final section) ---------- */
.cmp-closing{ padding-top:24px; padding-bottom:120px; }
.cmp-closing .cmp-open-cards{ max-width:1000px; }
.cmp-closing .cmp-open-card{
  padding:30px 28px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--card);
  box-shadow:var(--shadow-card);
}

/* ---------- responsive for the new sections ---------- */
@media (max-width:900px){
  .cmp-phil{ padding:64px 24px 48px; }
  .cmp-phil-grid{ grid-template-columns:1fr; gap:28px; }
  .cmp-phil-head{ margin-bottom:8px; }
  .cmp-phil-items{ grid-template-columns:1fr; gap:24px; }

  .cmp-culture{ padding:56px 24px 72px; }
  .cmp-culture-grid{ grid-template-columns:1fr; gap:36px; }
  .cmp-culture-head{ margin-bottom:40px; }
  .cmp-culture-item p{ max-width:none; }
}
@media (min-width:901px) and (max-width:1080px){
  .cmp-culture-grid{ grid-template-columns:repeat(2,1fr); }
}