/* ==========================================================================
   ABOUT — /about   (design: assets/html/teamian-about (9).html)
   Namespace: everything is scoped under .tabo. Loaded via $pageStyles in
   about.php, paired with assets/js/teamian-about.js.

   1. :root, html and body collapse onto .tabo — on :root the mock's tokens
      would redefine site-wide values, and its body rules would restyle the
      shared header and footer.
   2. This mock uses .fade-up (not .reveal), so main.js's own observer never
      touches it and no rename was needed — only the .tabo-js gate.
   3. #loader is a fixed full-screen black sheet cleared by JS. It now only
      renders under .tabo-js, so a failed script cannot leave a black page, and
      it sits under the nav rather than over it.
   4. overflow-x:hidden became clip on the wrapper — hidden forces overflow-y
      to `auto`, which makes a scroll container and breaks position:sticky.
   5. Every `Nfr` grid track became `minmax(0,Nfr)` (11 grids).
   6. .hero clears the 76px fixed nav.

   The brand marks the mock inlined as base64 are files in assets/img/ now.
   Four of the five were byte-identical, so they share one cached file.
   ========================================================================== */

.tabo{
    /* dark defaults */
    --bg:#000;
    --panel:#0A0A0A;
    --panel-2:#0F0F0F;
    --line:#1A1A1A;
    --line-strong:#242424;
    --ink:#FFFFFF;
    --ink-dim:#8A8F98;
    --ink-mute:#5A5F68;
    --teal:#14D3B0;
    --teal-soft:rgba(20,211,176,.10);
    --ease:cubic-bezier(.22,.61,.36,1);

    --illo-stroke:rgba(255,255,255,.42);
    --illo-soft:rgba(255,255,255,.20);
    --illo-face:#050505;
    --illo-face-dark:#020202;

    --word-off:rgba(255,255,255,.16);
    --chip-bg:#FFFFFF;
    --chip-fg:#000000;
  }

  .tabo .section-light{
    --bg:#F5F5F5;
    --panel:#FFFFFF;
    --panel-2:#FBFBFB;
    --line:#E4E4E1;
    --line-strong:#CFCECA;
    --ink:#0A0A0A;
    --ink-dim:#55534D;
    --ink-mute:#86847E;
    --teal-soft:rgba(20,211,176,.08);

    --illo-stroke:rgba(0,0,0,.42);
    --illo-soft:rgba(0,0,0,.16);
    --illo-face:#FFFFFF;
    --illo-face-dark:#EFEFEC;

    --word-off:rgba(10,10,10,.18);
    --chip-bg:#0A0A0A;
    --chip-fg:#FFFFFF;

    background:var(--bg);
    color:var(--ink);
  }

  
  .tabo{-webkit-text-size-adjust:100%}
  .tabo{
    font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
    background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    line-height:1.5;letter-spacing:-.01em;
    /* clip, not hidden: off the mock's `body` rule, where it is harmless. On a
       wrapper div, overflow-x:hidden forces overflow-y to compute to `auto`,
       making it a scroll container and breaking position:sticky for every
       descendant. clip clips the same axis without that side effect. */
    overflow-x:clip;
    font-feature-settings:"cv11","ss01","ss03";
  }
  .tabo a{color:inherit;text-decoration:none}
  .tabo ::selection{background:var(--teal);color:#000}

  .tabo .container{max-width:1240px;margin:0 auto;padding:0 40px}

  /* ── LOADER ─────────────────────────────────────────────── */
  /* The mock's own two rules, kept exactly as written — the only change is
     z-index 1000 -> 49, so the sheet passes under the shared nav (z-50)
     instead of covering it. */
  .tabo #loader{
    position:fixed;inset:0;z-index:49;background:#000;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
    transition:opacity .7s var(--ease) .1s, visibility .7s var(--ease) .1s;
  }
  .tabo #loader.done{opacity:0;visibility:hidden;pointer-events:none}
  /* #loader is only ever cleared by the script adding .done. With no script it
     would sit there as a full-screen black sheet forever, so when the page is
     running without JS it is not rendered at all. Written as a separate
     override rather than by gating the rules above: those two need to keep
     their original relative specificity, or .done stops beating the base. */
  html:not(.tabo-js) .tabo #loader{ display:none; }
  .tabo .loader-brand{position:relative;width:200px;height:200px;display:grid;place-items:center}
  .tabo .loader-logo{
    width:96px;height:96px;position:relative;z-index:1;
    animation:loader-breath 2.4s var(--ease) infinite;
    filter:drop-shadow(0 0 24px rgba(20,211,176,.15));
  }
  .tabo .loader-ring{
    position:absolute;inset:0;width:100%;height:100%;
    animation:loader-spin 2.4s linear infinite;
  }
  .tabo .loader-ring .track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
  .tabo .loader-ring .arc{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:590;stroke-dashoffset:490}
  .tabo .loader-pulse{width:180px;height:36px;overflow:visible}
  .tabo .loader-pulse path{
    fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:520;stroke-dashoffset:520;
    animation:loader-dash 1.6s var(--ease) infinite;
  }
  @keyframes loader-spin{to{transform:rotate(360deg)}}
  @keyframes loader-breath{
    0%,100%{transform:scale(.95);opacity:.9}
    50%{transform:scale(1);opacity:1}
  }
  @keyframes loader-dash{
    0%{stroke-dashoffset:520}
    60%{stroke-dashoffset:0}
    100%{stroke-dashoffset:-520}
  }

  /* ── COMMON HELPERS ─────────────────────────────────────── */
  .tabo section{position:relative;transition:background-color .3s var(--ease)}
  .tabo .eyebrow-pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px 6px 10px;border:1px solid var(--line-strong);border-radius:100px;
    font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase;
  }
  .tabo .eyebrow-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal)}

  /* Gated on .tabo-js (set inline at the top of about.php): these start
     invisible and are revealed by the observer in teamian-about.js, so without
     the gate a stylesheet that loads while the script fails leaves the page
     blank. Prefix on BOTH states so neither outranks the other. */
  .tabo-js .tabo .fade-up{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .tabo-js .tabo .fade-up.in{opacity:1;transform:none}
  .tabo-js .tabo .fade-up.d1{transition-delay:.08s}.tabo .fade-up.d2{transition-delay:.16s}.tabo .fade-up.d3{transition-delay:.24s}

  /* ── HERO (DARK) ────────────────────────────────────────── */
  .tabo .hero{padding:calc(76px + 40px) 24px 40px}
  .tabo .hero-panel{
    max-width:1320px;margin:0 auto;
    background:linear-gradient(180deg,#0C0C0C, #060606);
    border:1px solid var(--line);
    border-radius:32px;
    padding:96px 48px 72px;
    text-align:center;position:relative;overflow:hidden;
  }
  .tabo .hero-panel::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.045), transparent 60%),
      radial-gradient(35% 30% at 50% 100%, var(--teal-soft), transparent 70%);
  }
  .tabo .hero-panel .eyebrow-pill{position:relative;margin-bottom:36px}
  .tabo .statement{
    position:relative;
    font-size:clamp(28px,4.8vw,68px);
    font-weight:400;line-height:1.12;letter-spacing:-.022em;
    max-width:1080px;margin:0 auto;color:#fff;
  }
  .tabo .statement .word{
    display:inline-block;margin-right:.22em;
    color:rgba(255,255,255,.16);
    transition:color .18s linear;
  }
  .tabo .statement .word.on{color:#fff}
  .tabo .statement .word.accent.on{color:var(--teal)}

  .tabo .trust-row{
    position:relative;margin-top:76px;padding-top:40px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap;
  }
  .tabo .trust-row .cert{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;letter-spacing:.18em;font-weight:600;color:rgba(255,255,255,.55);
  }
  .tabo .trust-row .cert svg{width:22px;height:22px;stroke:rgba(255,255,255,.55);stroke-width:1.2;fill:none}

  /* ── FOUNDED (LIGHT) ────────────────────────────────────── */
  .tabo .founded{padding:140px 0 140px}
  .tabo .founded-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:80px;align-items:center}
  .tabo .founded-illo{position:relative;height:520px}
  .tabo .founded-illo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .tabo .founded-illo svg *{vector-effect:non-scaling-stroke}
  .tabo .founded-illo .stroke{stroke:var(--illo-stroke);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .founded-illo .stroke-soft{stroke:var(--illo-soft);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .founded-illo .face{fill:var(--illo-face);stroke:var(--illo-stroke);stroke-width:1;stroke-linejoin:round}
  .tabo .founded-illo .face-dark{fill:var(--illo-face-dark);stroke:var(--illo-stroke);stroke-width:1;stroke-linejoin:round}
  .tabo .founded-illo .accent{stroke:var(--teal);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .founded-illo .accent-dot{fill:var(--teal)}
  .tabo .founded-illo .float{animation:float 6s ease-in-out infinite}
  .tabo .founded-illo .float-b{animation:float 7s ease-in-out infinite reverse;animation-delay:-2s}
  .tabo .founded-illo .float-c{animation:float 8s ease-in-out infinite;animation-delay:-3.5s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

  .tabo .founded-content h2{
    font-size:clamp(32px,4vw,52px);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin-bottom:20px;color:var(--ink)
  }
  .tabo .founded-content .loc{
    display:inline-flex;align-items:center;gap:8px;
    font-size:15px;font-weight:600;color:var(--teal);margin-bottom:28px;
  }
  .tabo .founded-content .loc svg{width:16px;height:16px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tabo .founded-content p{font-size:17px;line-height:1.65;color:var(--ink-dim);max-width:520px}
  .tabo .founded-meta{display:flex;gap:40px;margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
  .tabo .founded-meta .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px;font-weight:600}
  .tabo .founded-meta .v{font-size:20px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}

  /* ── HOW WE WORK (DARK) ─────────────────────────────────── */
  .tabo .principles{padding:140px 0}
  .tabo .principles-head{text-align:center;max-width:640px;margin:0 auto 72px}
  .tabo .principles-head .eyebrow-pill{margin-bottom:24px}
  .tabo .principles-head h2{font-size:clamp(32px,4vw,52px);font-weight:500;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
  .tabo .principles-head p{margin-top:18px;color:var(--ink-dim);font-size:17px;line-height:1.6}
  .tabo .principles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .tabo .principle{
    background:var(--panel);border:1px solid var(--line);border-radius:22px;
    padding:32px 26px 30px;position:relative;overflow:hidden;
    transition:transform .35s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
  }
  .tabo .principle:hover{transform:translateY(-6px);border-color:var(--line-strong);background:var(--panel-2)}
  .tabo .principle .icon-box{
    width:52px;height:52px;border:1px solid var(--line-strong);border-radius:14px;
    display:grid;place-items:center;margin-bottom:28px;background:#000;
  }
  .tabo .principle .icon-box svg{width:24px;height:24px}
  .tabo .principle .icon-box svg *{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .tabo .principle .icon-box svg .accent{stroke:var(--teal);stroke-width:1.6}
  .tabo .principle .num{
    position:absolute;top:22px;right:26px;
    font-size:11px;letter-spacing:.16em;font-weight:600;color:var(--ink-mute);
  }
  .tabo .principle h3{font-size:17px;font-weight:500;letter-spacing:-.01em;margin-bottom:10px;color:var(--ink)}
  .tabo .principle p{font-size:14px;line-height:1.6;color:var(--ink-dim)}

  /* ── MISSION (LIGHT) ────────────────────────────────────── */
  .tabo .mission{padding:160px 0;text-align:center}
  .tabo .icon-chip{
    width:64px;height:38px;margin:0 auto 32px;
    background:var(--chip-bg);border-radius:100px;display:grid;place-items:center;
  }
  .tabo .icon-chip svg{width:32px;height:20px;fill:none;stroke:var(--chip-fg);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .tabo .mission h2{
    font-size:clamp(34px,5.2vw,72px);font-weight:400;letter-spacing:-.022em;line-height:1.06;
    max-width:900px;margin:0 auto 56px;color:var(--ink);
  }
  .tabo .mission-body{
    font-size:clamp(17px,1.5vw,22px);line-height:1.6;
    max-width:840px;margin:0 auto;font-weight:400;color:var(--ink);
  }
  .tabo .mission-body .word{display:inline-block;margin-right:.22em;color:var(--word-off);transition:color .18s linear}
  .tabo .mission-body .word.on{color:var(--ink)}
  .tabo .mission-body .word.accent.on{color:var(--teal)}

  /* ── WHAT WE BUILD (DARK) ───────────────────────────────── */
  .tabo .surfaces{padding:140px 0 120px}
  .tabo .surfaces-head{text-align:center;max-width:640px;margin:0 auto 72px}
  .tabo .surfaces-head .eyebrow-pill{margin-bottom:24px}
  .tabo .surfaces-head h2{font-size:clamp(32px,4vw,52px);font-weight:500;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
  .tabo .surfaces-head p{margin-top:18px;color:var(--ink-dim);font-size:17px;line-height:1.6}
  .tabo .surface-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .tabo .surface{
    background:var(--panel);border:1px solid var(--line);border-radius:24px;
    overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    transition:transform .35s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
    min-height:280px;
  }
  .tabo .surface:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--panel-2)}
  .tabo .surface .body{padding:36px 32px 32px;display:flex;flex-direction:column;justify-content:space-between}
  .tabo .surface .tag{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--ink-mute);text-transform:uppercase;margin-bottom:14px;
  }
  .tabo .surface .tag::before{content:"";width:5px;height:5px;background:var(--teal);border-radius:50%}
  .tabo .surface h3{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.2;margin-bottom:12px;color:var(--ink)}
  .tabo .surface p{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin-bottom:28px}
  .tabo .surface .learn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);align-self:flex-start}
  .tabo .surface .learn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
  .tabo .surface:hover .learn svg{transform:translateX(4px)}
  .tabo .surface .art{
    position:relative;background:#050505;border-left:1px solid var(--line);
    display:grid;place-items:center;padding:20px;
  }
  .tabo .surface .art svg{width:100%;height:100%;max-height:220px}
  .tabo .surface .art svg *{vector-effect:non-scaling-stroke}
  .tabo .surface .art .st{stroke:rgba(255,255,255,.42);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .surface .art .st-soft{stroke:rgba(255,255,255,.18);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .surface .art .fc{fill:#050505}
  .tabo .surface .art .ac{stroke:var(--teal);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .surface .art .ad{fill:var(--teal)}

  /* ── CAREERS (LIGHT, dark card) ────────────────────────── */
  .tabo .careers{padding:20px 24px 60px}
  .tabo .careers-card{
    max-width:1320px;margin:0 auto;
    background:linear-gradient(180deg,#0A0A0A,#050505);
    border:1px solid #1A1A1A;border-radius:32px;
    padding:96px 40px 88px;text-align:center;position:relative;overflow:hidden;
  }
  .tabo .careers-card::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(45% 50% at 50% 0%, rgba(20,211,176,.10), transparent 70%);
  }
  .tabo .squiggle{width:220px;height:88px;margin:0 auto 32px;position:relative}
  .tabo .squiggle path{
    fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:600;stroke-dashoffset:600;
  }
  .tabo .squiggle.in path{animation:squiggle-draw 1.4s var(--ease) forwards}
  @keyframes squiggle-draw{to{stroke-dashoffset:0}}
  .tabo .careers-card h2{font-size:clamp(34px,5vw,68px);font-weight:400;letter-spacing:-.022em;line-height:1.06;margin-bottom:18px;color:#fff;position:relative}
  .tabo .careers-card p{font-size:17px;line-height:1.6;color:#8A8F98;max-width:560px;margin:0 auto 40px;position:relative}
  .tabo .btn-primary{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 28px;background:#fff;color:#000;border-radius:100px;
    font-size:14px;font-weight:500;letter-spacing:-.005em;
    transition:transform .2s var(--ease),background .2s var(--ease);
    position:relative;
  }
  .tabo .btn-primary:hover{transform:translateY(-2px)}
  .tabo .btn-primary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
  .tabo .btn-primary:hover svg{transform:translateX(3px)}

  /* ── STORY (LIGHT) ──────────────────────────────────────── */
  .tabo .story{padding:120px 0 140px}
  .tabo .story-head{max-width:680px;margin:0 auto 88px;text-align:center}
  .tabo .story-head .eyebrow-pill{margin-bottom:24px}
  .tabo .story-head h2{font-size:clamp(30px,3.6vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1.18;color:var(--ink)}
  .tabo .story-head p{margin:22px auto 0;color:var(--ink-dim);font-size:16px;line-height:1.7;max-width:540px}
  .tabo .story-beat{
    display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;
    max-width:780px;margin:0 auto 56px;align-items:start;
  }
  .tabo .story-beat:last-of-type{margin-bottom:0}
  .tabo .story-art{aspect-ratio:1;position:relative}
  .tabo .story-art svg{width:100%;height:100%;display:block;overflow:visible}
  .tabo .story-art svg *{vector-effect:non-scaling-stroke}
  .tabo .story-art .s{stroke:var(--ink);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .story-art .s-soft{stroke:rgba(0,0,0,.32);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .story-art .fw{fill:#F5F5F5}
  .tabo .story-art .fb{fill:var(--ink)}
  .tabo .story-art .a{stroke:var(--teal);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabo .story-art .ad{fill:var(--teal)}
  .tabo .story-copy{padding-top:6px}
  .tabo .story-copy .beat-tag{
    display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--teal);font-weight:600;margin-bottom:14px;
  }
  .tabo .story-copy p{font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:14px;letter-spacing:-.005em}
  .tabo .story-copy p.dim{color:var(--ink-dim)}
  .tabo .story-copy p:last-child{margin-bottom:0}
  .tabo .story-quote{
    max-width:640px;margin:96px auto 0;text-align:center;padding-top:64px;
    border-top:1px solid var(--line);
  }
  .tabo .story-quote p{font-size:clamp(20px,2vw,26px);font-weight:400;letter-spacing:-.015em;line-height:1.42;margin-bottom:16px;color:var(--ink)}
  .tabo .story-quote cite{font-size:12.5px;color:var(--ink-mute);font-style:normal;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

  /* ── FOUNDER NOTE (LIGHT) ───────────────────────────────── */
  .tabo .founder-note{padding:100px 0 140px}
  .tabo .founder-note-head{text-align:center;margin-bottom:64px}

  .tabo .letter-scene{
    position:relative;
    max-width:520px;
    margin:0 auto;
    padding-bottom:180px;
  }

  .tabo .paper{
    position:relative;
    background:#FFFFFF;
    padding:56px 40px 220px 40px;
    border-radius:2px;
    box-shadow:
      0 1px 0 rgba(0,0,0,.04),
      0 24px 60px -24px rgba(0,0,0,.22),
      0 8px 20px -8px rgba(0,0,0,.10);
    font-family:'Courier Prime','Courier New',monospace;
    font-size:14px;
    line-height:1.85;
    color:#1F1F1F;
    z-index:2;
    letter-spacing:.005em;
  }
  .tabo .paper p{margin-bottom:18px}
  .tabo .paper p.salutation{margin-bottom:24px;font-weight:700;color:#0A0A0A}
  .tabo .paper .signature{margin-top:32px;margin-bottom:0;min-height:44px}
  .tabo .paper .sig-hand{
    display:inline-block;
    font-family:'Caveat',cursive;
    font-weight:normal;
    font-size:clamp(26px,5vw,26px);
    color:#0A0A0A;
    line-height:1.15;
    letter-spacing:-.01em;
    white-space:nowrap;
    clip-path:inset(-4px 101% -4px -4px);
    transition:clip-path 2.6s cubic-bezier(.5,.05,.4,.95) .5s;
  }
  .tabo .letter-scene.in .sig-hand{clip-path:inset(-4px -6px -4px -4px)}

  .tabo .envelope-front{
    position:absolute;
    left:-36px;right:-36px;
    bottom:0;
    height:250px;
    background:#0A0A0A;
    clip-path:polygon(0 5%, 50% 46%, 100% 5%, 100% 100%, 0 100%);
    z-index:3;
    filter:drop-shadow(0 22px 40px rgba(0,0,0,.28));
  }
  .tabo .envelope-front::before{
    content:'';position:absolute;inset:0;
    clip-path:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%);
    pointer-events:none;
  }

  .tabo .wax-seal{
    position:absolute;
    left:calc(50% - 38px);
    bottom:100px;
    width:76px;height:76px;
    border-radius:50%;
    background:
      radial-gradient(circle at 35% 30%, #33E8CB 0%, #14D3B0 45%, #0DA88D 100%);
    box-shadow:
      inset -2px -3px 6px rgba(0,0,0,.28),
      inset 2px 3px 8px rgba(255,255,255,.28),
      0 6px 22px rgba(20,211,176,.35),
      0 3px 6px rgba(0,0,0,.20);
    display:grid;place-items:center;
    z-index:4;
    opacity:0;
    transform:translateY(-16px) scale(.4) rotate(-24deg);
  }
  .tabo .letter-scene.in .wax-seal{
    animation:sealDrop .55s cubic-bezier(.34,1.56,.64,1) 2.9s forwards;
  }
  @keyframes sealDrop{
    0%  {opacity:0;transform:translateY(-16px) scale(.4) rotate(-24deg)}
    60% {opacity:1;transform:translateY(3px)   scale(1.06) rotate(4deg)}
    100%{opacity:1;transform:translateY(0)     scale(1)    rotate(0)}
  }
  .tabo .wax-mark{
    width:44px;height:44px;
    filter:brightness(0);
    opacity:.42;
    transform:translateY(1px);
    user-select:none;
  }

  /* ── RESPONSIVE ─────────────────────────────────────────── */
  @media (max-width:960px){
    .tabo .container{padding:0 22px}
    .tabo .hero{padding:calc(76px + 20px) 14px 20px}
    .tabo .hero-panel{padding:60px 22px 44px;border-radius:22px}
    .tabo .trust-row{gap:20px 32px;margin-top:52px;padding-top:32px}
    .tabo .founded{padding:96px 0 96px}
    .tabo .founded-grid{grid-template-columns:minmax(0,1fr);gap:48px}
    .tabo .founded-illo{height:400px}
    .tabo .founded-meta{gap:28px}
    .tabo .principles{padding:96px 0}
    .tabo .principles-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
    .tabo .principle{padding:24px 20px}
    .tabo .mission{padding:100px 0}
    .tabo .surfaces{padding:96px 0}
    .tabo .surface-grid{grid-template-columns:minmax(0,1fr)}
    .tabo .surface{grid-template-columns:minmax(0,1fr);min-height:auto}
    .tabo .surface .art{border-left:none;border-top:1px solid var(--line);min-height:200px}
    .tabo .careers-card{padding:64px 22px 60px;border-radius:22px}
    .tabo .story{padding:80px 0 100px}
    .tabo .story-head{margin-bottom:56px}
    .tabo .story-beat{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:44px;max-width:520px}
    .tabo .story-art{max-width:180px}
    .tabo .story-quote{margin-top:64px;padding-top:48px}
    .tabo .founder-note{padding:72px 0 100px}
    .tabo .founder-note-head{margin-bottom:44px}
    .tabo .letter-scene{max-width:100%;padding-bottom:140px}
    .tabo .paper{padding:38px 22px 180px 22px;font-size:13px;line-height:1.8}
    .tabo .envelope-front{left:-14px;right:-14px;height:210px}
    .tabo .wax-seal{bottom:80px;width:64px;height:64px;left:calc(50% - 32px)}
    .tabo .wax-mark{width:36px;height:36px}
  }
  @media (max-width:520px){
    .tabo .principles-grid{grid-template-columns:minmax(0,1fr)}
  }
  @media (prefers-reduced-motion:reduce){
    .tabo *,.tabo *::before,.tabo *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0 !important}
    .tabo .statement .word,.tabo .mission-body .word{color:var(--ink) !important}
    .tabo #loader{display:none}
  }

  .tabo a:focus-visible,.tabo button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

  /* ── LOGO PLACEMENTS ────────────────────────────────────── */
  .tabo .brand-mark{
    display:block;margin:0 auto 32px;
    width:auto;height:72px;
    position:relative;
    opacity:0;transform:translateY(12px);
    transition:opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s;
  }
  .tabo .brand-mark.in{opacity:.95;transform:none}
  .tabo .brand-mark-sm{
    display:block;margin:0 auto 24px;
    width:auto;height:44px;position:relative;
    opacity:0;transform:translateY(10px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  .tabo .brand-mark-sm.in{opacity:.9;transform:none}
  .tabo .page-brand{
    display:block;margin:64px auto 0;
    width:auto;height:24px;opacity:.35;
    transition:opacity .3s var(--ease);
  }
  .tabo .page-brand:hover{opacity:.7}

  @media(max-width:960px){
    .tabo .brand-mark{height:54px;margin-bottom:24px}
    .tabo .brand-mark-sm{height:36px;margin-bottom:20px}
    .tabo .page-brand{height:20px;margin-top:48px}
  }