/* ============================================================
   TRICON — design tokens
   Committed dark visual world with one deliberate light chapter
   (PackyMax), so every colour is painted explicitly and the page
   holds on any host ground.
   ============================================================ */
:root{
  color-scheme:dark;
  --void:#060810;          /* near-black, biased blue */
  --ink:#0A0E1A;
  --rise:#111726;
  --rise-2:#161E31;
  --line:rgba(150,166,208,.14);
  --line-soft:rgba(150,166,208,.07);
  --text:#E8EDF7;
  --dim:#8B95AC;
  --dimmer:#5D6779;

  --tri-a:#38BDF8; --tri-b:#6366F1;          /* parent: cyan -> indigo */
  --vt-a:#A855F7;  --vt-b:#F0468C;           /* ViewTV: violet -> magenta */
  --cf-a:#FFB020;  --cf-b:#FF5A1F;           /* CargoFy: sodium -> ember */
  --pm-a:#2DD4A0;  --pm-b:#0E9488;           /* PackyMax: jade -> teal */
  --foil:#E9C892;

  --paper:#E9ECE7;         /* PackyMax light chapter */
  --paper-2:#DDE2DC;
  --paper-ink:#0E1714;
  --paper-dim:#55625C;
  --paper-line:rgba(14,23,20,.13);

  --kraft:#C08B58; --corrug:#B98A63; --card-stock:#F2F0EB; --rigid:#1C1F26;

  --acc-a:var(--tri-a); --acc-b:var(--tri-b);  /* live chapter accent */

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --shell:min(1240px,100vw - 3rem);
  --rail:64px;
  --r-sm:6px; --r-md:12px; --r-lg:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
/* author rules like `svg{display:block}` outrank the UA's [hidden] rule */
[hidden]{display:none !important}
/* The background belongs on the root as well as on body. When a phone scrolls
   faster than it can paint, it fills the un-painted strip with the root colour
   -- white, unless we say otherwise. Saying otherwise here is the difference
   between a dark gap and a white flash. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  background:#060810}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--f-body);font-size:17px;line-height:1.62;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc-a);outline-offset:3px;border-radius:3px}
::selection{background:color-mix(in srgb,var(--acc-a) 40%,transparent);color:#fff}

/* ---------- type scale ---------- */
.h-mega,.h-1,.h-2,.h-3{font-family:var(--f-display);font-weight:700;
  letter-spacing:-.035em;line-height:.98;text-wrap:balance;margin:0}
.h-mega{font-size:clamp(2.65rem,6.6vw,5.7rem)}
.h-1{font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1.02}
.h-2{font-size:clamp(1.85rem,3.6vw,3.1rem);line-height:1.06;letter-spacing:-.03em}
.h-3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.18;letter-spacing:-.022em;font-weight:600}
.lede{font-size:clamp(1.02rem,1.35vw,1.24rem);line-height:1.6;color:var(--dim);
  max-width:62ch;margin:0;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
.eyebrow{font-family:var(--f-mono);font-size:.688rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer);margin:0}
.eyebrow .mark{color:var(--acc-a)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.grad{background:linear-gradient(102deg,var(--acc-a),var(--acc-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- layout ---------- */
.shell{width:var(--shell);margin-inline:auto}
.chapter{position:relative;padding-block:clamp(5rem,11vh,8.5rem)}
.stack{display:flex;flex-direction:column}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.gap-8{gap:2rem}.gap-12{gap:3rem}.gap-16{gap:4rem}
.head-block{display:flex;flex-direction:column;gap:1.15rem;max-width:min(100%,920px)}
.head-block .lede{max-width:58ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.86rem 1.45rem;
  border-radius:999px;font-size:.94rem;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(102deg,var(--acc-a),var(--acc-b));color:#050710;
  box-shadow:0 6px 26px -10px color-mix(in srgb,var(--acc-a) 75%,transparent)}
.btn-primary:hover{box-shadow:0 14px 40px -12px color-mix(in srgb,var(--acc-a) 85%,transparent)}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.02);color:var(--text)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--acc-a) 55%,transparent);
  background:color-mix(in srgb,var(--acc-a) 9%,transparent)}
.btn-wa{background:#1FA855;color:#04140A;box-shadow:0 6px 26px -12px rgba(31,168,85,.9)}
.btn-wa:hover{background:#24C062;box-shadow:0 14px 38px -14px rgba(31,168,85,.95)}
.btn-wa .ico-sms,.btn-sms .ico-wa{display:none}
.btn-sms{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.5);color:#FFC76A}
.btn-sms:hover{background:rgba(255,176,32,.2);border-color:rgba(255,176,32,.75);color:#FFD79A}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.on-paper .btn-ghost{border-color:var(--paper-line);color:var(--paper-ink);background:rgba(14,23,20,.02)}
.on-paper .btn-ghost:hover{background:color-mix(in srgb,var(--acc-a) 14%,transparent)}

/* ---------- scroll spine (the through-line device) ---------- */
.spine{position:fixed;left:36px;top:0;bottom:0;width:2px;z-index:40;pointer-events:none;
  display:none}
.spine::before{content:"";position:absolute;inset:0;background:var(--line-soft)}
.spine-fill{position:absolute;left:0;top:0;width:100%;height:100%;
  transform:scaleY(0);transform-origin:top;
  background:linear-gradient(180deg,transparent,var(--acc-a) 22%,var(--acc-b));
  transition:background .8s linear}
.spine-bead{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;
  will-change:transform;background:var(--acc-a);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--acc-a) 18%,transparent),
             0 0 22px 3px color-mix(in srgb,var(--acc-a) 70%,transparent);
  transition:background .8s linear,box-shadow .8s linear}
.spine-label{position:fixed;left:11px;bottom:34px;z-index:40;pointer-events:none;
  writing-mode:vertical-rl;font-family:var(--f-mono);font-size:.625rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--dimmer);display:none}
@media(min-width:1100px){.spine,.spine-label{display:block}}

/* ---------- navigation ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:60;
  transition:background-color .45s var(--ease),backdrop-filter .45s var(--ease),
             border-color .45s var(--ease),padding .45s var(--ease);
  border-bottom:1px solid transparent;padding-block:1.1rem}
.nav.stuck{background:rgba(6,8,16,.86);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);padding-block:.7rem}
.nav-in{display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.62rem;flex-shrink:0}
.brand-mark{width:26px;height:26px;flex-shrink:0}
.brand-mark .bl{transform-box:fill-box;transform-origin:center;
  transition:transform .6s var(--ease),fill .6s var(--ease)}
.brand:hover .bl-1{transform:translate(0,-1.4px)}
.brand:hover .bl-2{transform:translate(1.2px,.8px)}
.brand:hover .bl-3{transform:translate(-1.2px,.8px)}
.brand-lockup{display:flex;flex-direction:column;gap:.16rem;line-height:1}
.brand-word{font-family:var(--f-display);font-weight:700;font-size:1.02rem;
  letter-spacing:.13em;line-height:1}
.brand-sub{font-family:var(--f-mono);font-size:.53rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--dimmer);line-height:1}
@media(max-width:520px){.brand-sub{display:none}}
.nav-links{display:none;margin-left:auto;align-items:center;gap:.3rem}
@media(min-width:960px){.nav-links{display:flex}}
.nav-link{position:relative;padding:.5rem .78rem;font-size:.9rem;font-weight:500;
  color:var(--dim);border-radius:999px;transition:color .3s var(--ease)}
.nav-link:hover{color:var(--text)}
.nav-link[aria-current="true"]{color:var(--text)}
.nav-link .dot{position:absolute;left:50%;bottom:.16rem;width:4px;height:4px;border-radius:50%;
  background:var(--acc-a);transform:translate(-50%,4px) scale(0);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease),background .6s linear}
.nav-link[aria-current="true"] .dot{transform:translate(-50%,0) scale(1);opacity:1}
.nav-cta{margin-left:.5rem;padding:.62rem 1.1rem;font-size:.88rem}
.nav-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
@media(min-width:960px){.nav-actions{margin-left:0}}
.burger{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer}
@media(min-width:960px){.burger{display:none}}
.burger span{display:block;width:17px;height:1.5px;background:var(--text);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:55;background:rgba(6,8,16,.985);
  display:flex;flex-direction:column;justify-content:center;padding:5rem 1.5rem 2rem;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.drawer.open{opacity:1;visibility:visible}
.drawer-nav{display:flex;flex-direction:column;gap:.15rem}
.drawer a.d-link{font-family:var(--f-display);font-weight:600;font-size:2rem;
  letter-spacing:-.03em;padding:.5rem 0;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:baseline;gap:.9rem;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.drawer.open a.d-link{opacity:1;transform:none}
.drawer a.d-link .idx{font-family:var(--f-mono);font-size:.7rem;color:var(--dimmer);letter-spacing:.1em}
.drawer-foot{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:8rem 4rem;overflow:hidden;isolation:isolate}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 8%,transparent 40%,rgba(6,8,16,.55) 78%,var(--void) 100%),
    linear-gradient(180deg,rgba(6,8,16,.55),transparent 26%,transparent 62%,var(--void))}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:var(--grain);background-size:180px 180px}
.hero-in{position:relative;display:flex;flex-direction:column;gap:1.55rem;align-items:flex-start}
.hero-in .lede{max-width:52ch}
.hero-mega{max-width:15ch}
.hero-tag{display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;
  padding:.42rem .5rem .42rem .42rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.03);font-size:.78rem;color:var(--dim)}
.hero-tag .pip{width:6px;height:6px;border-radius:50%;background:var(--tri-a);
  box-shadow:0 0 10px 2px color-mix(in srgb,var(--tri-a) 70%,transparent);
  animation:pulse 2.6s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.hero-tag b{color:var(--text);font-weight:600;letter-spacing:-.01em}
.hero-foot{position:absolute;left:0;right:0;bottom:1.6rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.hero-ticker{display:flex;gap:1.6rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);flex-wrap:wrap}
.hero-ticker span{display:flex;align-items:center;gap:.5rem}
.hero-ticker i{width:5px;height:5px;border-radius:50%;font-style:normal}
.scrollcue{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.22em;color:var(--dimmer)}
.scrollcue .track{width:1px;height:44px;background:var(--line);position:relative;overflow:hidden}
.scrollcue .track::after{content:"";position:absolute;inset-inline:0;height:14px;
  background:linear-gradient(180deg,transparent,var(--tri-a));animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(-14px)}100%{transform:translateY(44px)}}

/* ---------- reveal primitives ---------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
/* Once a reveal has played, take the element back out of the animation system
   entirely. An element with a transform, or an opacity that is anything other
   than exactly 1, keeps its own compositing layer for as long as it lives --
   and an audit of this page on a phone found sixty-three of them still holding
   one, several over 340x500. Stacks of large composited layers is where WebKit
   starts serving stale tiles. Reverting to plain content costs nothing: the
   animation has already finished and will never run again. */
.rv.rv-done{transition:none;transform:none;opacity:1;will-change:auto}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}
.clip{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.clip.in{clip-path:inset(0 0 0 0)}

/* ---------- division cards ---------- */
.cards{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:flex;flex-direction:column;gap:1.1rem;
  padding:1.6rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--rise),var(--ink));overflow:hidden;isolation:isolate;
  transition:transform .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--c-a) 26%,transparent),transparent 70%);
  transition:opacity .6s var(--ease)}
.card::after{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-a),var(--c-b),transparent);
  opacity:.5;transition:opacity .6s var(--ease)}
.card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c-a) 40%,transparent);
  box-shadow:0 30px 70px -40px color-mix(in srgb,var(--c-a) 90%,transparent)}
.card:hover::before{opacity:1}
.card:hover::after{opacity:1}
.card-art{height:132px;border-radius:var(--r-md);overflow:hidden;position:relative;
  background:var(--void);border:1px solid var(--line-soft)}
.card-art canvas{width:100%;height:100%}
.card-name{font-family:var(--f-display);font-weight:700;font-size:1.35rem;letter-spacing:-.025em}
.card-claim{font-size:.98rem;font-weight:500;
  background:linear-gradient(102deg,var(--c-a),var(--c-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.card p{color:var(--dim);font-size:.94rem;line-height:1.6}
.card-cta{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.88rem;font-weight:600;color:var(--c-a)}
.card-cta .arw{transition:transform .4s var(--ease)}
.card:hover .card-cta .arw{transform:translateX(5px)}
.card-link{position:absolute;inset:0;z-index:2}

/* ---------- chapter opener ---------- */
.opener{position:relative;padding-block:clamp(4rem,9vh,7rem);overflow:hidden}
.opener-rule{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.6rem}
.opener-rule .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--acc-a),transparent)}
.opener-wordmark{font-family:var(--f-display);font-weight:700;
  font-size:clamp(3rem,11vw,9rem);letter-spacing:-.05em;line-height:.86;
  background:linear-gradient(96deg,var(--acc-a),var(--acc-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- ViewTV ---------- */
.vt{--acc-a:var(--vt-a);--acc-b:var(--vt-b);background:#03040A;position:relative}
.vt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 55% at 78% 0%,color-mix(in srgb,var(--vt-a) 13%,transparent),transparent 62%)}
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  border:1px solid var(--line);background:#02030A;aspect-ratio:2.39/1;min-height:320px;
  display:flex;align-items:flex-end}
.frame-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.frame-tint{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(3,4,10,.28) 0%,rgba(3,4,10,.06) 34%,rgba(3,4,10,.74) 72%,rgba(3,4,10,.95) 100%),
    linear-gradient(90deg,rgba(3,4,10,.7) 0%,rgba(3,4,10,.24) 44%,transparent 72%)}
.frame-copy{position:relative;padding:clamp(1.4rem,3.4vw,2.9rem);
  display:flex;flex-direction:column;gap:1rem;max-width:min(58ch,88%)}
.frame-copy .h-2{max-width:16ch}
.chips{display:flex;flex-wrap:wrap;gap:.42rem}
.chip{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.34rem .62rem;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.035);color:var(--dim);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.chip:hover{border-color:color-mix(in srgb,var(--acc-a) 55%,transparent);color:var(--text);
  background:color-mix(in srgb,var(--acc-a) 12%,transparent)}
.notice{display:flex;gap:.75rem;padding:.9rem 1.05rem;border-radius:var(--r-md);
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  font-size:.82rem;line-height:1.5;color:var(--dim);max-width:74ch}
.notice svg{flex-shrink:0;margin-top:.15rem;color:var(--acc-a)}
.on-paper .notice{border-color:var(--paper-line);background:rgba(14,23,20,.03);color:var(--paper-dim)}

/* world map */
.mapwrap{position:relative;width:100%;aspect-ratio:168/63}
.mapwrap canvas{position:absolute;inset:0;width:100%;height:100%}
.map-legend{display:flex;flex-wrap:wrap;gap:1.1rem;font-family:var(--f-mono);
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.map-legend span{display:flex;align-items:center;gap:.45rem}
.map-legend i{width:6px;height:6px;border-radius:50%;font-style:normal;
  background:var(--acc-a);box-shadow:0 0 8px 1px color-mix(in srgb,var(--acc-a) 60%,transparent)}

/* ---------- pricing ---------- */
.plans{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.5rem;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink);
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease)}
.plan:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--acc-a) 42%,transparent)}
.plan-term{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dimmer)}
.plan-price{font-family:var(--f-display);font-weight:700;font-size:2.5rem;letter-spacing:-.04em;
  line-height:1;display:flex;align-items:baseline;gap:.2rem}
.plan-price .cur{font-size:1.1rem;font-weight:600;color:var(--dim)}
.plan-per{font-size:.85rem;color:var(--dim)}
.plan-meta{font-family:var(--f-mono);font-size:.7rem;color:var(--dimmer);
  padding-top:.85rem;border-top:1px solid var(--line-soft)}
.plan.feature{background:linear-gradient(168deg,color-mix(in srgb,var(--acc-a) 12%,var(--rise)),var(--ink));
  border-color:color-mix(in srgb,var(--acc-a) 48%,transparent);
  box-shadow:0 34px 80px -50px color-mix(in srgb,var(--acc-a) 95%,transparent)}
.plan.best{border-color:color-mix(in srgb,var(--foil) 40%,transparent)}
.badge{position:absolute;top:-.66rem;left:1.4rem;padding:.24rem .62rem;border-radius:999px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(102deg,var(--acc-a),var(--acc-b));color:#0A0410;font-weight:700}
.badge.foil{background:linear-gradient(102deg,var(--foil),#C9A46A);color:#241A08}
.save{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  color:color-mix(in srgb,var(--acc-a) 85%,white)}

/* ---------- CargoFy ---------- */
.cf{--acc-a:var(--cf-a);--acc-b:var(--cf-b);background:#07080C;position:relative}
.stats{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{position:relative;padding:1.5rem 1.35rem;border:1px solid var(--line);
  border-radius:var(--r-lg);background:linear-gradient(168deg,var(--rise),var(--ink));
  overflow:hidden;transition:transform .5s var(--ease),border-color .5s var(--ease)}
.stat:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--acc-a) 40%,transparent)}
.stat-fig{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,4.4vw,3.1rem);
  letter-spacing:-.045em;line-height:1;
  background:linear-gradient(102deg,var(--acc-a),var(--acc-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.stat-lab{margin-top:.5rem;font-size:.86rem;color:var(--dim);line-height:1.4}
.stat-bar{position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--acc-a),var(--acc-b));
  transition:width 1.4s var(--ease) .2s}
.stat.in .stat-bar{width:100%}

/* lane rail */
.rail-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding-bottom:1.1rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent}
.rail-scroll::-webkit-scrollbar{height:3px}
.rail-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.rail-track{display:flex;gap:1rem;width:max-content;padding-inline:max(0px,calc((100vw - var(--shell))/2))}
.rail-scroll{margin-inline:calc((100vw - var(--shell)) / -2)}
.step{position:relative;scroll-snap-align:center;width:min(78vw,320px);flex-shrink:0;
  padding:1.5rem 1.35rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--rise),var(--ink));
  display:flex;flex-direction:column;gap:.7rem;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.step:hover{border-color:color-mix(in srgb,var(--acc-a) 40%,transparent);transform:translateY(-4px)}
.step-n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;color:var(--acc-a)}
.step h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.12rem;letter-spacing:-.02em}
.step p{font-size:.9rem;color:var(--dim);line-height:1.55}
.step::after{content:"";position:absolute;top:1.85rem;right:-1rem;width:1rem;height:1px;
  background:var(--line)}
.step:last-child::after{display:none}

/* car haul journey */
.journey{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--rise),var(--ink));padding:1.6rem;overflow:hidden}
.journey-legs{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.journey-legs{grid-template-columns:repeat(3,1fr)}}
.leg{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.1rem;border-radius:var(--r-md);
  border:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
.leg-k{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc-a)}
.leg-t{font-family:var(--f-display);font-weight:600;font-size:1.02rem;letter-spacing:-.02em}
.leg p{font-size:.86rem;color:var(--dim);line-height:1.5}
.routes{display:flex;flex-wrap:wrap;gap:.5rem}
.route{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .85rem;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:.84rem;color:var(--dim);transition:all .4s var(--ease)}
.route:hover{border-color:color-mix(in srgb,var(--acc-a) 50%,transparent);color:var(--text)}
.route .to{color:var(--acc-a);font-family:var(--f-mono);font-size:.72rem}

/* ---------- PackyMax (light chapter) ---------- */
.pm{--acc-a:var(--pm-a);--acc-b:var(--pm-b);background:var(--paper);color:var(--paper-ink)}
.pm .lede,.pm p{color:var(--paper-dim)}
.pm .eyebrow{color:#7A8781}
.on-paper{color:var(--paper-ink)}
.pm .opener-wordmark{background:linear-gradient(96deg,var(--pm-b),#0B5F5C);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pm-grid{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.pm-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.pm-grid{grid-template-columns:repeat(4,1fr)}}
/* `auto 280px` rather than a bare `280px`: the auto keyword makes the browser
   remember the size the tile actually rendered at and reuse that once it has
   been seen, instead of collapsing back to a guess that is wrong on every
   screen width. A wrong guess moves the page under the reader's thumb. */
.ind{position:relative;aspect-ratio:1;content-visibility:auto;contain-intrinsic-size:auto 280px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--paper-line);background:#E2E6E0;cursor:default;
  display:flex;align-items:flex-end;padding:.8rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ind:hover,.ind:focus-visible{transform:translateY(-4px);
  box-shadow:0 22px 44px -28px rgba(14,23,20,.55)}
.ind canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  transition:transform .7s var(--ease),filter .7s var(--ease)}
.ind:hover canvas,.ind:focus-visible canvas{transform:scale(1.06)}
.ind-name{font-family:var(--f-display);font-weight:600;font-size:.92rem;letter-spacing:-.018em;
  line-height:1.2;text-shadow:0 1px 10px rgba(233,236,231,.9)}
.ind-eg{position:absolute;left:.8rem;right:.8rem;bottom:.8rem;transform:translateY(120%);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pm-b);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.ind:hover .ind-name,.ind:focus-visible .ind-name{transform:translateY(-1.1rem);
  transition:transform .5s var(--ease)}
.ind:hover .ind-eg,.ind:focus-visible .ind-eg{transform:none;opacity:1}

.mats{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.mats{grid-template-columns:repeat(4,1fr)}}
.mat{border:1px solid var(--paper-line);border-radius:var(--r-lg);overflow:hidden;
  background:#EFF2ED;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.mat:hover{transform:translateY(-5px);box-shadow:0 26px 54px -34px rgba(14,23,20,.5)}
.mat-swatch{height:112px;position:relative;overflow:hidden}
.mat-swatch canvas{width:100%;height:100%}
.mat-body{padding:1.05rem 1.1rem 1.25rem;display:flex;flex-direction:column;gap:.35rem}
.mat-name{font-family:var(--f-display);font-weight:600;font-size:1.02rem;letter-spacing:-.02em}
.mat p{font-size:.86rem;line-height:1.5}

.proc{display:grid;gap:0;grid-template-columns:1fr;counter-reset:p}
@media(min-width:920px){.proc{grid-template-columns:repeat(5,1fr)}}
.pstep{position:relative;padding:1.4rem 1.2rem 1.5rem;border-top:1px solid var(--paper-line);
  display:flex;flex-direction:column;gap:.5rem}
@media(min-width:920px){.pstep{border-top:none;border-left:1px solid var(--paper-line)}
  .pstep:first-child{border-left:none}}
.pstep::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--pm-a),var(--pm-b));transition:width 1s var(--ease)}
@media(min-width:920px){.pstep::before{top:0;left:-1px;width:1px;height:0;
  transition:height 1s var(--ease)}
  .pstep.in::before{height:100%}}
.pstep.in::before{width:100%}
.pstep-n{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;color:var(--pm-b)}
.pstep h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.05rem;
  letter-spacing:-.02em}
.pstep p{font-size:.85rem;line-height:1.5}

/* folding box stage */
.boxstage{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.boxstage{grid-template-columns:1fr 1fr;gap:3.5rem}}
.scene{perspective:1100px;height:min(52vh,420px);display:grid;place-items:center;
  position:relative}
.scene::after{content:"";position:absolute;bottom:14%;width:46%;height:26px;border-radius:50%;
  background:radial-gradient(50% 50%,rgba(14,23,20,.3),transparent 70%);filter:blur(9px)}
.box3d{position:relative;width:196px;height:196px;transform-style:preserve-3d;
  transform:rotateX(-20deg) rotateY(var(--spin,-34deg));
  transition:transform 1.1s var(--ease);
  --fc-top:#FBFAF6;--fc-side:#EDEAE4;--fc-dark:#D5D2CA;--fc-edge:rgba(14,23,20,.14)}
.face{position:absolute;inset:0;border:1px solid var(--fc-edge);
  display:grid;place-items:center;
  transition:background .8s var(--ease),border-color .8s var(--ease)}
.f-top   {background:var(--fc-top); transform:rotateX(90deg) translateZ(98px)}
.f-front {background:var(--fc-side);transform:translateZ(98px)}
.f-back  {background:var(--fc-side);transform:rotateY(180deg) translateZ(98px)}
.f-right {background:var(--fc-dark);transform:rotateY(90deg) translateZ(98px)}
.f-left  {background:var(--fc-dark);transform:rotateY(-90deg) translateZ(98px)}
.f-bottom{background:var(--fc-dark);transform:rotateX(-90deg) translateZ(98px)}
.face .art{width:100%;height:100%;opacity:0;transition:opacity .8s var(--ease)}
.box3d[data-phase="1"],.box3d[data-phase="2"]{
  --fc-top:#D9AB7E;--fc-side:#BE8B58;--fc-dark:#9A6F41;--fc-edge:rgba(80,50,25,.35)}
.box3d[data-phase="1"] .face .art,.box3d[data-phase="2"] .face .art{opacity:1}
.box3d[data-phase="2"]{--spin:26deg}
.box3d[data-phase="3"]{--spin:-14deg;
  --fc-top:#2C313D;--fc-side:#1D212C;--fc-dark:#12151D;--fc-edge:rgba(233,200,146,.34)}
.box3d[data-phase="3"] .face .art{opacity:1;filter:invert(1) hue-rotate(180deg)}
.phases{display:flex;flex-direction:column;gap:.15rem}
.phase{display:flex;gap:1.1rem;align-items:flex-start;padding:1rem 0;
  border-top:1px solid var(--paper-line);cursor:pointer;background:none;border-inline:none;
  border-bottom:none;text-align:left;width:100%;transition:opacity .5s var(--ease)}
.phase[aria-selected="false"]{opacity:.42}
.phase[aria-selected="true"]{opacity:1}
.phase-n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--pm-b);
  padding-top:.28rem;flex-shrink:0}
.phase-t{display:block;font-family:var(--f-display);font-weight:600;font-size:1.02rem;letter-spacing:-.02em}
.phase-d{display:block;font-size:.85rem;color:var(--paper-dim);line-height:1.5;margin-top:.2rem;max-width:46ch}

/* gallery */
/* Masonry via CSS columns on a desktop, a plain grid on a phone.
   The column balancer fragments this section across tiles and then reflows
   them, and WebKit does not always invalidate the tiles it already painted --
   which is why a strip of the light gallery kept showing through the dark
   section below it. A grid does not fragment, so there is nothing to leave
   behind. The look barely changes; the bug goes away. */
.gal{columns:2;column-gap:.7rem}
@media(min-width:760px){.gal{columns:3;column-gap:.8rem}}
@media(min-width:1100px){.gal{columns:4;column-gap:.85rem}}
@media (pointer:coarse){
  .gal{columns:auto;column-gap:normal;
    display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;align-items:start}
  .gal figure{margin:0;break-inside:auto}
}
/* No content-visibility here, deliberately. These figures sit in a CSS multi
   column layout, and the column balancer has to know each item's real height
   to distribute them. content-visibility hides that height, so the browser
   balances against the guess, renders, discovers the truth, and re-balances --
   the page height lurches by a thousand pixels and the scroll position jumps
   with it. On a phone that reads as the section flashing. */
.gal figure{break-inside:avoid;margin:0 0 .8rem;position:relative;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--paper-line);background:#E4E8E2;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.gal figure:hover{transform:translateY(-5px);box-shadow:0 26px 52px -30px rgba(14,23,20,.5)}
.gal canvas{width:100%;height:auto;transition:transform .8s var(--ease)}
.gal figure:hover canvas{transform:scale(1.05)}
.gal figcaption{position:absolute;inset-inline:0;bottom:0;padding:.7rem .8rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:#F2F5F1;background:linear-gradient(0deg,rgba(10,18,15,.86),transparent);
  transform:translateY(100%);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease)}
.gal figure:hover figcaption{transform:none;opacity:1}

/* ---------- about / reach ---------- */
/* ---- FAQ accordion -------------------------------------------------------
   <details> rather than JavaScript: it opens without script, it is findable
   with the browser's own find-in-page in modern browsers, and it survives
   the content security policy without a single line of our own code.      */
.qa-group{display:flex;flex-direction:column;gap:0;max-width:74ch}
.qa-group + .qa-group{margin-top:2.6rem}
.qa-group .eyebrow{margin-bottom:.9rem}
.qa-item{border-top:1px solid var(--line-soft)}
.qa-item:last-of-type{border-bottom:1px solid var(--line-soft)}
.qa-item summary{display:flex;align-items:flex-start;gap:.9rem;cursor:pointer;
  padding:1.05rem 0;font-weight:600;font-size:1rem;line-height:1.45;
  list-style:none;color:var(--text);transition:color .3s var(--ease)}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary::after{content:"";flex:none;width:9px;height:9px;margin-left:auto;
  margin-top:.42em;border-right:1.7px solid var(--acc-a);border-bottom:1.7px solid var(--acc-a);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.qa-item[open] summary::after{transform:rotate(-135deg)}
.qa-item summary:hover{color:var(--acc-a)}
.qa-item summary:focus-visible{outline:2px solid var(--acc-a);outline-offset:2px;border-radius:3px}
.qa-a{padding:0 0 1.15rem;color:var(--dim);font-size:.96rem;line-height:1.68;max-width:66ch}
.qa-a p{margin:0}
.qa-a p + p{margin-top:.75rem}
.qa-a a{color:var(--acc-a);text-decoration:underline;text-underline-offset:3px}

/* ---- policy documents ---------------------------------------------------
   Legal text that is meant to be read. A narrow measure, generous leading,
   and headings that mark the shape of the argument rather than shout.      */
.doc{max-width:70ch;display:flex;flex-direction:column;gap:.35rem}
.doc-date{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer)}
.doc > h2{margin:2.3rem 0 .2rem;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.doc > h2:first-child{margin-top:0;padding-top:0;border-top:none}
.doc h3.doc-h{margin:1.5rem 0 .1rem;font-family:var(--f-body);font-size:.94rem;font-weight:600;
  letter-spacing:0;color:var(--text)}
.doc p{margin:.75rem 0 0;color:var(--dim);line-height:1.68}
.doc p strong{color:var(--text);font-weight:600}
.doc .ticks{margin-top:.95rem}
.doc .ticks li{font-size:.95rem}
.doc a{color:var(--acc-a);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.doc a:hover{text-decoration-thickness:2px}
.doc .notice p{margin:0}

/* ---- careers: requirements / what we offer ------------------------------ */
.two-col{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:840px){.two-col{grid-template-columns:repeat(2,1fr)}}
.panel{padding:1.6rem 1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--rise),var(--ink));display:flex;flex-direction:column;gap:1rem}
.panel .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dimmer);margin:0}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:.94rem;line-height:1.58;color:var(--dim)}
/* A tick, not a chevron. The corner has to sit on the RIGHT and BOTTOM and
   rotate clockwise -- left+bottom rotated the other way draws a droop. The
   box is taller than it is wide so the two strokes end up different lengths,
   which is what makes it read as a tick rather than a corner. */
.ticks li::before{content:"";position:absolute;left:1px;top:.42em;width:6px;height:11px;
  border-right:1.7px solid var(--acc-a);border-bottom:1.7px solid var(--acc-a);
  transform:rotate(45deg)}
.panel-note{margin:.2rem 0 0}

.trio{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:840px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio-item{padding:1.4rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--rise),var(--ink));display:flex;flex-direction:column;gap:.55rem}
.trio-item .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase}
.trio-item p{font-size:.92rem;color:var(--dim);line-height:1.58}

/* ---------- contact ---------- */
.picker{display:grid;gap:.7rem;grid-template-columns:1fr}
@media(min-width:760px){.picker{grid-template-columns:repeat(3,1fr)}}
.pick{position:relative;display:flex;flex-direction:column;gap:.35rem;text-align:left;
  padding:1.15rem 1.25rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(168deg,var(--rise),var(--ink));cursor:pointer;
  transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s var(--ease)}
.pick:hover{transform:translateY(-3px)}
.pick[aria-pressed="true"]{border-color:color-mix(in srgb,var(--c-a) 60%,transparent);
  background:linear-gradient(168deg,color-mix(in srgb,var(--c-a) 15%,var(--rise)),var(--ink))}
.pick-n{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.pick-d{font-size:.87rem;color:var(--dim)}
.pick-tick{position:absolute;top:1.15rem;right:1.15rem;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.pick[aria-pressed="true"] .pick-tick{background:var(--c-a);border-color:var(--c-a)}
.pick-tick svg{opacity:0;transition:opacity .3s var(--ease);color:#05070E}
.pick[aria-pressed="true"] .pick-tick svg{opacity:1}

.form{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:700px){.form{grid-template-columns:repeat(2,1fr)}}
/* min-width:0 is not optional here. A grid item defaults to min-width:auto,
   which means it refuses to shrink below its content's intrinsic width -- and
   an <input> has a default intrinsic width of about twenty characters. On a
   320px screen that made every field 316px wide inside a 272px form, pushing
   the page 20px sideways. overflow-x:hidden on the body was quietly clipping
   it rather than fixing it. */
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%}
.field.wide{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer)}
.field label .opt{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);margin-left:.4rem;vertical-align:.08em}
.confirms{display:flex;flex-direction:column;gap:.7rem;padding:1.1rem 1.15rem;
  border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.02)}
.field .check,.check{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  font-family:var(--f-body);font-size:.92rem;font-weight:400;letter-spacing:0;
  text-transform:none;line-height:1.5;color:var(--dim)}
.check .req{color:var(--acc-a)}
.field .check input{width:20px;height:20px;padding:0;border-radius:4px;border:0;background:none;box-shadow:none;min-height:0}
.check input{flex:none;width:20px;height:20px;margin-top:.1rem;accent-color:var(--acc-a);cursor:pointer}
.check input:focus-visible{outline:2px solid var(--acc-a);outline-offset:2px}
.field label .req{color:var(--acc-a)}
.field input,.field select,.field textarea{
  padding:.78rem .9rem;border-radius:var(--r-md);border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:.94rem;
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.field textarea{resize:vertical;min-height:118px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:color-mix(in srgb,var(--acc-a) 60%,transparent);
  background:rgba(255,255,255,.05)}
.field select option,.field select optgroup{background:#111726;color:#E8EDF7}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238B95AC' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}
.field .hint{font-size:.74rem;color:var(--dimmer)}
.field .err{font-size:.74rem;color:#FF8080;min-height:1.05em}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#FF6B6B}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cond{display:contents}
.cond[hidden]{display:none}
.form-note{grid-column:1/-1;font-size:.78rem;color:var(--dimmer);line-height:1.5}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.sent{grid-column:1/-1;display:none;padding:1.1rem 1.2rem;border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--acc-a) 45%,transparent);
  background:color-mix(in srgb,var(--acc-a) 10%,transparent);font-size:.9rem}
.sent.show{display:block}
.sent-error{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.09)}
.sent-note{margin:.35rem 0 0;color:var(--dim);line-height:1.5}
.sent-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.95rem}
.sent-body{margin:.95rem 0 0;padding:.85rem .95rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(0,0,0,.28);
  font-family:var(--f-mono);font-size:.76rem;line-height:1.55;color:var(--dim);
  white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:#04060C;padding-block:3.5rem 2rem}
.foot-grid{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
@media(min-width:1080px){.foot-grid{grid-template-columns:1.6fr repeat(4,1fr)}}
.foot h4{margin:0 0 .9rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dimmer);font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.foot li a{font-size:.9rem;color:var(--dim);transition:color .3s var(--ease)}
.foot li a:hover{color:var(--text)}
.foot-bot{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.78rem;color:var(--dimmer)}
.ph{color:var(--dim);font-family:var(--f-mono);font-size:.76rem;white-space:nowrap;
  transition:color .3s var(--ease)}
a.ph:hover{color:var(--text)}

/* ---------- misc ---------- */
.toast{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,140%);
  z-index:80;padding:.8rem 1.15rem;border-radius:999px;max-width:calc(100vw - 2rem);
  border:1px solid color-mix(in srgb,var(--acc-a) 45%,transparent);
  background:rgba(10,14,26,.96);backdrop-filter:blur(8px);
  color:var(--text);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.02em;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.toast.show{transform:translate(-50%,0);opacity:1}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}
.tag-ph{display:inline-block;padding:.1rem .42rem;border-radius:4px;font-family:var(--f-mono);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px dashed color-mix(in srgb,var(--acc-a) 45%,transparent);color:var(--acc-a);
  vertical-align:middle;margin-left:.35rem}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:.7rem 1rem;
  background:var(--rise);border:1px solid var(--line);border-radius:0 0 8px 0}
.skip:focus{left:0}

@media(max-width:700px){
  .scrollcue{display:none}
  .hero-ticker{gap:.55rem 1.1rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .clip{clip-path:none}
  .grain{animation:none}
}
section[id],div[id]{scroll-margin-top:86px}
/* ---------- hiring nudge -------------------------------------------------- */
/* Deliberately a corner card rather than a modal: it never blocks the page,
   never covers the CTA, and stays gone for a week once dismissed. */
.hiring{position:fixed;left:1.1rem;bottom:1.1rem;z-index:70;width:min(330px,calc(100vw - 2.2rem));
  padding:1.1rem 1.2rem 1.2rem;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--tri-a) 40%,var(--line));
  background:linear-gradient(168deg,var(--rise-2),var(--ink));
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
  transform:translateY(140%);opacity:0;
  transition:transform .6s var(--ease),opacity .6s var(--ease)}
.hiring.in{transform:none;opacity:1}
.hiring-x{position:absolute;top:.7rem;right:.7rem;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--dim);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease)}
.hiring-x:hover{color:var(--text);border-color:var(--dim)}
.hiring-eyebrow{display:flex;align-items:center;gap:.5rem;margin:0;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tri-a)}
.hiring-eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--tri-a);
  box-shadow:0 0 10px 2px color-mix(in srgb,var(--tri-a) 70%,transparent);
  animation:pulse 2.6s var(--ease-io) infinite}
.hiring-title{margin:.55rem 0 0;font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  letter-spacing:-.02em;line-height:1.25;padding-right:1.4rem}
.hiring-note{margin:.4rem 0 0;font-size:.85rem;line-height:1.5;color:var(--dim)}
.hiring-cta{margin-top:.9rem;padding:.62rem 1.05rem;font-size:.86rem}
@media(max-width:520px){
  .hiring{left:.75rem;right:.75rem;bottom:.75rem;width:auto}
}
@media (prefers-reduced-motion: reduce){
  .hiring{transition:none}
  .hiring-eyebrow .pip{animation:none}
}

/* ---- comfortable tap targets on touch screens ---------------------------
   Fingers are not mice. On a coarse pointer the small text links, the
   footer lists and the two hiring confirmations get real room, without
   changing how any of it looks on a desktop.                              */
@media (pointer:coarse){
  .foot-col a,.foot a,.ph{display:inline-block;padding-block:.42rem;min-height:44px;
    line-height:1.6}
  .foot-col li{margin-block:-.1rem}
  .check{padding-block:.45rem;min-height:44px;align-items:center}
  .field .check input,.check input{width:26px;height:26px;margin-top:0}
  .hiring-x{width:36px;height:36px}
  .brand{padding-block:.6rem}
}

/* ---- touch screens: correctness over cleverness -------------------------
   Everything below is an optimisation that buys frames on a desktop and costs
   nothing to lose on a phone. On phones it was costing something visible
   instead: the PackyMax chapter flashing against the dark section under it.

   content-visibility lets the browser skip offscreen work, but it has to guess
   the skipped element's height, and a wrong guess resizes the document under a
   moving thumb. backdrop-filter makes the nav frosted, and on WebKit a blurred
   layer over a changing background repaints far more than it should.

   A phone gets a solid nav and a page that never resizes itself. That trade is
   worth it every time -- nobody has ever noticed a missing blur, and everybody
   notices the page jumping.                                                 */
@media (pointer:coarse){
  .ind,.gal figure,.mat,.card{content-visibility:visible;contain-intrinsic-size:auto}
  .nav.stuck{background:#0A0E1A;backdrop-filter:none;-webkit-backdrop-filter:none}
  .toast{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0A0E1A}
}

/* Touch screens: the hover lift on gallery tiles has no purpose without a
   mouse, and an idle transform is one more thing for the compositor to hold. */
@media (pointer:coarse){
  .gal figure,.ind{transform:none;transition:none}
}

/* ---- known iOS hazards, disarmed on touch --------------------------------
   None of these is wrong. All of them are things WebKit handles worse than
   Blink, and all of them sit in or next to the PackyMax chapter.

   1. A filter inside a preserve-3d subtree forces the browser to flatten the
      3D context to apply it. WebKit's flattening is where paint artifacts come
      from. The phase-3 box gets its colours from a stylesheet swap instead.
   2. perspective creates a rendering context of its own. The box reads almost
      identically without it at phone size, where it is 168px across.
   3. vh is measured against the tallest the viewport can ever be, so on iOS
      every element sized in vh changes height when the address bar moves.
      svh is the small-viewport unit, which does not move.                   */
@media (pointer:coarse){
  .box3d[data-phase="3"] .face .art{filter:none;opacity:1}
  .box3d[data-phase="3"] .face{background:var(--rigid)}
  .box3d[data-phase="3"] .f-top{background:#2A2E37}
  .scene{perspective:none;height:min(52svh,420px)}
  .box3d{transform-style:flat}
}
@supports (height: 100svh){
  @media (pointer:coarse){
    .hero{min-height:100svh}
  }
}

/* ═══ THE PACKYMAX CHAPTER STAYS LIGHT ON PHONES ═════════════════════════
   For one build this chapter was flipped to the dark palette on touch, on the
   theory that a light section between two dark ones was what WebKit was
   serving stale paint at. That was defensive, not diagnosed -- and the owner
   was right that it cost the page the one deliberate contrast it has.

   The actual cause was the block below: desktop-length copy overflowing a card
   locked to a cinematic aspect ratio, so text painted across its own artwork
   and out through a clipping container. With the phone layout stacked, that
   overlap is gone and the light chapter has nothing left to strobe against.

   If the seam ever strobes again, the palette swap is the fallback -- but it is
   the last resort, not the first move.                                       */

/* ═══ PHONES GET A DIFFERENT LAYOUT, NOT A SQUEEZED ONE ═══════════════════
   .frame is built for a wide screen: a 2.39:1 cinematic plate with the copy
   laid over the artwork and a gradient keeping it readable. That works at
   1240px. At 342px the same box is only 320px tall, and a desktop-length
   paragraph does not fit inside it -- so the text ran past the plate, across
   its own artwork, and out through a container that clips.

   The answer is not smaller type. It is a different arrangement: the artwork
   becomes a picture at the top with a height of its own, and the words sit
   underneath it in ordinary flow, where they take exactly the room they need
   and nothing is clipped or overlapped.

   It also removes a clipping context and a stacking context from the busiest
   part of the page, which is where the paint artifacts were appearing. */
/* Width query as well as pointer query. A pointer query alone misses a phone
   in desktop-site mode, and this layout has to hold whatever the browser
   claims about the input device. !important on the four properties that
   actually decide the arrangement, because nothing further down the cascade
   should be able to put the cinematic plate back on a 390px screen. */
@media (pointer:coarse),(max-width:820px){
  .frame{
    aspect-ratio:auto!important;
    min-height:0!important;
    display:block!important;
    overflow:visible!important;
    isolation:auto;
    background:linear-gradient(168deg,var(--rise),var(--ink));
  }
  /* the artwork: a real element in the flow, no longer a backdrop */
  .frame-bg{
    position:relative!important;
    inset:auto!important;
    z-index:0;
    display:block;
    width:100%;
    height:clamp(150px,26svh,210px)!important;
    border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  }
  /* the tint belongs to the picture now, not to the whole card */
  .frame-tint{
    inset:0 0 auto 0;
    height:clamp(150px,26svh,210px);
    z-index:1;
    border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
    background:linear-gradient(180deg,rgba(3,4,10,.15) 0%,rgba(3,4,10,.55) 100%);
  }
  /* the words: below the picture, full width, nothing on top of them */
  .frame-copy{
    position:relative;
    z-index:2;
    max-width:none!important;
    padding:1.3rem 1.15rem 1.5rem;
  }
  .frame-copy .h-2,.frame-copy .h-1{max-width:none!important;font-size:1.5rem;line-height:1.14}
  .frame-copy .lede{max-width:none!important;font-size:.96rem;line-height:1.55}
  .frame-copy .eyebrow{font-size:.6rem;letter-spacing:.18em}
  /* chips belong to the card they describe, not to the page under it */
  .frame + .chips,.frame-copy .chips{margin-top:.9rem}
}