/* =========================================================
   ABOUT PAGE — hero · interactive bento · showreel · process
   ========================================================= */

/* ---------- Hero ---------- */
.ahero{position:relative;height:100svh;min-height:760px;padding:var(--nav-h) 0 0;overflow:clip;letter-spacing:-.035em}
.ahero > .ahero__grid{height:100%}
.ahero > .container{position:relative;z-index:2}
/* 3D logo scene (hero.js) fills the hero; the copy sits above it */
.ahero .hero__canvas{position:absolute;inset:0;z-index:1;pointer-events:none}
.ahero .hero__canvas canvas{display:block;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.2s ease}
.ahero .hero__canvas[data-ready="true"] canvas{opacity:1}
.ahero .hero__canvas[data-fallback="true"]{background:radial-gradient(22% 30% at 72% 38%,#dfe4ff,transparent 70%),radial-gradient(18% 24% at 82% 60%,#e9ddff,transparent 70%)}
.ahero__foot{z-index:5}
.ahero__title{margin:0;font-size:clamp(52px,6.6vw,104px);font-weight:500;line-height:.98;letter-spacing:-.055em}
.ahero__title span{color:#a2a2aa}
.ahero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:56px}
.ahero__copy{padding-bottom:64px}
.ahero__foot{position:absolute;z-index:5;left:0;right:0;bottom:26px;font-size:13px;line-height:1.25}
.ahero__foot .container{display:flex;justify-content:space-between;align-items:center}
.ahero__explore{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.ahero__explore svg{transition:translate .25s}
.ahero__explore:hover svg{translate:0 4px}
.ahero__row{display:grid;gap:28px;margin-top:40px}
/* Logo pixel morph */
.amorph{position:relative;display:grid;place-items:center;aspect-ratio:5/6;max-height:600px;border:1px solid var(--line);border-radius:32px;overflow:hidden;cursor:pointer;
  background:linear-gradient(#eeeff2 1px,transparent 0) 0 0/32px 32px,linear-gradient(90deg,#eeeff2 1px,transparent 0) 0 0/32px 32px,linear-gradient(145deg,#fff 40%,#f7f8fb)}
.amorph::after{content:"";position:absolute;inset:auto -10% -40%;height:70%;background:radial-gradient(50% 55% at 50% 75%,#3548fe1c,transparent 70%);filter:blur(30px);pointer-events:none}
.amorph__mark{position:relative;z-index:1;width:64%;height:72%}
.amorph__mark svg{width:100%;height:100%;overflow:visible}
.amorph .cell{transform-box:fill-box;transform-origin:center;transition:transform .34s var(--ease-out);transition-delay:var(--d)}
.amorph .m-b .cell{transform:scale(0)}
.amorph.is-b .m-a .cell{transform:scale(0)}
.amorph.is-b .m-b .cell{transform:scale(1)}
.amorph .flash rect{fill:#c8f064;opacity:0;transform-box:fill-box;transform-origin:center}
.amorph.is-anim .flash rect{animation:amFlash .5s var(--ease-out) both;animation-delay:var(--d)}
@keyframes amFlash{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(.92)}100%{opacity:0;transform:scale(.4)}}
.amorph__tag{position:absolute;left:20px;bottom:18px;z-index:2;display:flex;align-items:center;gap:8px;font-family:"Sudo",ui-monospace,monospace;font-size:14px;letter-spacing:2px;color:var(--muted-2)}
.amorph__tag i{width:26px;height:2px;border-radius:2px;background:#d9dbe3;position:relative;overflow:hidden}
.amorph__tag i::after{content:"";position:absolute;inset:0;width:50%;background:var(--accent);transition:transform .5s var(--ease-out)}
.amorph.is-b .amorph__tag i::after{transform:translateX(100%)}
.ahero__text{max-width:560px;margin:0;font-size:19px;line-height:1.5;letter-spacing:-.018em;color:#4a4a52}
.ahero__actions{display:flex;flex-wrap:wrap;gap:10px}
.ahero__actions .btn-raised{min-height:52px;padding:14px 22px;font-size:15px}

/* ---------- Bento grid ---------- */
.bento{padding-block:56px 32px}
.bento__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.bcard{position:relative;min-width:0;overflow:hidden;isolation:isolate;grid-column:span 2;min-height:480px;padding:32px;
  border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,#fff 40%,#f7f8fb);
  box-shadow:inset 0 1px 1px #fff,0 6px 16px rgba(40,40,56,.016);user-select:none;-webkit-user-select:none}
.bcard--since,.bcard--projects{grid-column:span 3;min-height:420px}
.bcard::before{content:"";position:absolute;z-index:-1;inset:auto -10% -30%;height:60%;pointer-events:none;filter:blur(34px);opacity:.7;
  background:radial-gradient(45% 60% at 30% 70%,var(--glow-a,#e3e7ff) 0,transparent 70%),radial-gradient(45% 60% at 72% 80%,var(--glow-b,#efe4ff) 0,transparent 70%)}
.bcard--since{--glow-a:#e1ecff;--glow-b:#e9f7f1}
.bcard--projects{--glow-a:#ffe9dc;--glow-b:#e6e9ff}
.bcard--world{--glow-a:#dbeafe;--glow-b:#e0f5ef}
.bcard--toss{--glow-a:#eef9d3;--glow-b:#ece6ff}
.bcard--people{--glow-a:#e1e6ff;--glow-b:#f3e3ff}
.bcard__copy{position:relative;z-index:2;max-width:300px;pointer-events:none}
.bcard--projects .bcard__copy{max-width:min(300px,44%)}
.bcard__copy p{margin:14px 0 0;max-width:31ch;font-size:16px;line-height:1.45;color:var(--muted)}
.bcard__value{margin:0;display:flex;align-items:baseline;gap:8px;font-size:84px;font-weight:500;line-height:.95;letter-spacing:-.055em;color:var(--text);font-variant-numeric:tabular-nums}
.bcard__value small{font-size:22px;letter-spacing:-.02em;color:#6f6f78;font-weight:500}
.bcard__label{margin:10px 0 0!important;font-size:22px!important;color:var(--text)!important;letter-spacing:-.025em;font-weight:500}
.bcard__title{margin:0;font-size:34px;font-weight:500;letter-spacing:-.04em;line-height:1.05;color:var(--text)}
.bcard__link{position:absolute;z-index:4;left:32px;bottom:28px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;text-decoration:none;color:var(--text);border-bottom:1px solid rgba(17,17,17,.2);padding-bottom:2px;transition:border-color .2s,gap .3s var(--ease-spring)}
.bcard__link:hover{border-color:var(--accent);gap:12px}

/* ---------- 1 · Since: calendar + year dial ---------- */
.cal{position:absolute;z-index:2;top:32px;right:32px;display:flex;flex-direction:column;align-items:center;gap:10px}
.cal__tile{display:flex;flex-direction:column;align-items:center;width:78px;border-radius:16px;overflow:hidden;background:#fff;border:1px solid #e6e7ec;
  box-shadow:0 12px 24px -12px rgba(30,32,60,.25),inset 0 1px 0 #fff;transform:rotate(6deg)}
.cal__tile b{display:block;width:100%;padding:5px 0;text-align:center;font-size:11px;letter-spacing:.14em;color:#fff;background:var(--accent)}
.cal__tile span{padding:6px 0 8px;font-size:34px;font-weight:600;letter-spacing:-.05em;color:var(--text)}
.cal__cap{font-size:12px;color:#8a8a92}
.dial{position:absolute;left:0;right:0;bottom:0;height:230px;cursor:grab;touch-action:pan-y;outline:none}
.dial:active{cursor:grabbing}
.dial:focus-visible .dial__pin{fill:var(--accent);r:6}
.dial__svg{position:absolute;left:50%;bottom:-6px;width:min(560px,120%);height:auto;translate:-50% 0;overflow:visible}
.dial__ring{fill:none;stroke:#e3e5ec}
.dial__ticks line{stroke:#c9ccd6;stroke-width:1}
.dial__ticks line.is-major{stroke:#9296a6;stroke-width:1.4}
.dial__ticks text{font-size:13px;fill:#9a9dab;font-family:inherit;text-anchor:middle;font-variant-numeric:tabular-nums;transition:fill .2s}
.dial__ticks text.is-active{fill:var(--accent);font-weight:600}
.dial__pointer{stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.dial__pin{fill:var(--accent);transition:r .2s}
.dial__readout{position:absolute;left:0;right:0;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;text-align:center}
.dial__year{font-size:30px;font-weight:500;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.dial__note{min-height:18px;font-size:13px;color:var(--muted);max-width:34ch;transition:opacity .25s}
.dial__hint{position:absolute;right:24px;bottom:24px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #e6e7ec;font-size:12px;color:#6f6f78;box-shadow:0 4px 10px rgba(30,32,60,.06);transition:opacity .4s}
.dial.is-used .dial__hint{opacity:0}

/* ---------- 2 · Projects: folder with draggable prints ---------- */
.folder{--w:300px;position:absolute;z-index:3;right:28px;bottom:26px;width:var(--w);height:210px;perspective:900px;scale:.8;transform-origin:100% 100%}
.folder__back{position:absolute;inset:18px 0 0;border-radius:16px 16px 18px 18px;background:linear-gradient(180deg,#cfd6ff,#b7c1ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.folder__back::before{content:"";position:absolute;left:0;top:-16px;width:42%;height:26px;border-radius:12px 12px 0 0;background:#cfd6ff}
.folder__prints{position:absolute;inset:0}
.print{--tx:0px;--ty:0px;--rot:0deg;--dx:0px;--dy:0px;--dr:0deg;position:absolute;left:50%;top:30px;width:62%;aspect-ratio:4/3;margin-left:-31%;border-radius:12px;overflow:hidden;background:#f5f5f7;border:4px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 30px -14px rgba(20,22,50,.35);cursor:grab;touch-action:none;
  transform:translate(calc(var(--tx) + var(--dx)),calc(var(--ty) + var(--dy))) rotate(calc(var(--rot) + var(--dr)));
  transition:transform .7s var(--ease-spring),box-shadow .3s}
.print > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.print .art__label{font-size:11px;left:12px;top:9px}
.print .art__brand span{font-size:64px}
.print .art__phone{border-radius:16px;padding:4px}
.print .art__phone > span{border-radius:12px;padding:12px 6px 6px;gap:4px}
.print[data-drag]{transition:none;cursor:grabbing;z-index:5;box-shadow:0 1px 2px rgba(0,0,0,.06),0 30px 50px -18px rgba(20,22,50,.45)}
.folder[data-open="false"] .print{pointer-events:none}
.print:nth-child(1){--tx:-18px;--ty:14px;--rot:-5deg}
.print:nth-child(2){--tx:6px;--ty:8px;--rot:2deg}
.print:nth-child(3){--tx:22px;--ty:18px;--rot:6deg}
.folder[data-open="true"] .print:nth-child(1){--tx:-70px;--ty:-115px;--rot:-10deg}
.folder[data-open="true"] .print:nth-child(2){--tx:12px;--ty:-150px;--rot:3deg}
.folder[data-open="true"] .print:nth-child(3){--tx:92px;--ty:-110px;--rot:12deg}
.folder[data-open="true"] .print:nth-child(2){transition-delay:.05s}
.folder[data-open="true"] .print:nth-child(3){transition-delay:.1s}
.folder__front{position:absolute;left:0;right:0;bottom:0;height:150px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:0 20px 18px;border:0;border-radius:14px 14px 18px 18px;
  background:linear-gradient(180deg,#8a98ff,#5d6dff 60%,#4d5dfb);color:#fff;text-align:left;font:inherit;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(255,255,255,.2),0 18px 30px -16px rgba(53,72,254,.6);
  transform-origin:50% 100%;transform:rotateX(0deg);transition:transform .7s var(--ease-spring),filter .3s;z-index:4}
.folder__front:hover{filter:brightness(1.05)}
.folder[data-open="true"] .folder__front{transform:rotateX(-38deg)}
.folder__front:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.folder__icon{position:absolute;left:50%;top:42%;width:34px;height:51px;translate:-50% -50%;filter:drop-shadow(0 4px 8px rgba(10,16,120,.3));pointer-events:none}
.folder__label{font-size:15px;font-weight:500;letter-spacing:-.02em}
.folder__hint{font-size:12px;opacity:.75}

/* ---------- 3 · World: spinnable globe ---------- */
.globe{position:absolute;left:0;right:0;bottom:0;height:300px;display:grid;place-items:center}
.globe__canvas{width:280px;height:280px;cursor:grab;touch-action:pan-y}
.globe__canvas:active{cursor:grabbing}
.globe__chips{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;gap:6px;white-space:nowrap}
.globe__chips span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid #e6e7ec;font-size:12px;color:#55555d;box-shadow:0 4px 10px rgba(30,32,60,.06)}
.globe__time{color:var(--text)!important;font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- 4 · Toss: physics chips ---------- */
.toss{position:absolute;left:0;right:0;bottom:0;height:300px;overflow:hidden}
.chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:999px;white-space:nowrap;font-size:15px;font-weight:500;letter-spacing:-.01em;cursor:grab;touch-action:none;will-change:transform;
  background:linear-gradient(180deg,#fff,#f3f3f6);border:1px solid #e3e4ea;color:#2b2b31;box-shadow:inset 0 1px 0 #fff,0 8px 16px -8px rgba(30,32,60,.25);visibility:hidden}
.toss.is-live .chip{visibility:visible}
.chip[data-drag]{cursor:grabbing;box-shadow:inset 0 1px 0 #fff,0 18px 30px -12px rgba(30,32,60,.35)}
.chip--blue{background:linear-gradient(180deg,#5767ff,#3548fe);border-color:#2a3ad6;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 18px -8px rgba(53,72,254,.5)}
.chip--ink{background:linear-gradient(180deg,#34353c,#15161b);border-color:#111;color:#fff}
.chip--lime{background:linear-gradient(180deg,#e9fbc4,#c8f064);border-color:#b6dc55;color:#2b3a06}
.chip--violet{background:linear-gradient(180deg,#c3b2ff,#9a7cf2);border-color:#8a6be6;color:#fff}

/* ---------- 5 · People: click-to-chat ---------- */
.chat{position:absolute;left:24px;right:24px;bottom:92px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:230px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.chat__msg{display:flex;align-items:flex-end;gap:8px;max-width:92%;animation:msgIn .45s cubic-bezier(.34,1.4,.64,1) both;transform-origin:left bottom}
.chat__msg[data-me="true"]{align-self:flex-end;transform-origin:right bottom}
@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(.94)}}
.chat__avatar{flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:linear-gradient(135deg,#ff9a62,#e0567a);color:#fff;font-size:11px;font-weight:600;box-shadow:0 3px 6px rgba(36,37,59,.12)}
.chat__bubble{padding:9px 13px;border:1px solid #e3e6ec;border-radius:16px 16px 16px 5px;background:#fff;box-shadow:0 6px 14px rgba(42,43,61,.06);font-size:14px;line-height:1.35;color:#2f3037}
.chat__msg[data-me="true"] .chat__bubble{border-color:transparent;border-radius:16px 16px 5px 16px;background:var(--accent);color:#fff}
.chat__typing{display:inline-flex;gap:4px;padding:13px 14px}
.chat__typing i{width:6px;height:6px;border-radius:50%;background:#b4b7c3;animation:typing 1s infinite ease-in-out}
.chat__typing i:nth-child(2){animation-delay:.15s}.chat__typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat__compose{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;padding:0 6px 0 18px;border:1px solid #e3e4ea;border-radius:999px;background:#fff;color:#8a8a92;font:inherit;font-size:15px;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(42,43,61,.05);transition:border-color .2s,box-shadow .2s}
.chat__compose:hover{border-color:#c9cbd6;box-shadow:0 10px 20px -8px rgba(42,43,61,.18)}
.chat__compose:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chat__compose:disabled{cursor:wait}
.chat__send{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;transition:transform .3s var(--ease-spring)}
.chat__compose:hover .chat__send{transform:translateY(-2px)}

/* ---------- Showreel ---------- */
.ashow{padding-block:40px}
.ashow__btn{position:relative;display:block;width:100%;padding:8px;border:0;border-radius:36px;background:#fff;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 60px -30px rgba(0,0,0,.25);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ashow__btn:hover{transform:translateY(-4px)}
.ashow__btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ashow__thumb{display:block;aspect-ratio:16/7;border-radius:28px;
  background:url(showreel/poster-about.webp) center/cover,#f4f5f8}
.ashow__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:92px;height:92px;margin:-46px 0 0 -46px;padding-left:4px;border-radius:50%;background:#fff;color:#111;box-shadow:0 14px 30px -10px rgba(0,0,0,.35);transition:transform .45s var(--ease-spring),background .3s,color .3s}
.ashow__btn:hover .ashow__play{transform:scale(1.1);background:var(--accent);color:#fff}
.ashow__label{position:absolute;left:36px;bottom:30px;color:#14151a;font-size:15px;font-weight:500;opacity:.9}

/* ---------- Process ---------- */
.process{padding-block:72px 24px}
.process__head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;margin-bottom:44px}
.process__head .lead{justify-self:end;max-width:380px;margin:0}
.process__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.process__list li{padding:28px 24px 30px;border-top:1px solid #d9d9dd}
.process__num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(#fafafa,#efeff2);border:1px solid #ececf0;font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.process__list h3{margin:22px 0 10px;font-size:22px;font-weight:500;letter-spacing:-.03em}
.process__list p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .bento__grid{gap:16px}
  .bcard{padding:26px}
  .bcard__value{font-size:72px}
  .folder{--w:260px;right:20px}
  .process__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ahero{height:auto;min-height:100svh;padding:calc(var(--nav-h) + 48px) 0 72px}
  .ahero > .ahero__grid{height:auto}
  .ahero__grid{grid-template-columns:1fr;gap:20px}
  .ahero__copy{padding-bottom:0}
  .ahero__foot{bottom:22px;font-size:11px}
  .ahero__sig{display:none}
  .ahero__explore{margin-left:auto}
  .ahero__row{gap:24px;margin-top:28px}
  .amorph{aspect-ratio:1;border-radius:26px}
  .ahero__text{font-size:17px}
  .bento__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bcard,.bcard--since,.bcard--projects{grid-column:auto}
  .bcard--since,.bcard--projects,.bcard--people{grid-column:1/-1}
  .bcard--projects{min-height:460px}
  .process__head{grid-template-columns:1fr;gap:16px}
  .process__head .lead{justify-self:start}
}
@media (max-width:600px){
  .bento__grid{grid-template-columns:1fr;gap:14px}
  .bcard{grid-column:auto!important;border-radius:24px;min-height:440px}
  .bcard--projects{min-height:520px}
  .bcard__value{font-size:64px}
  .cal{top:26px;right:26px}
  .cal__tile{width:64px}
  .cal__tile span{font-size:28px}
  .folder{left:50%;right:auto;translate:-50% 0;--w:280px;transform-origin:50% 100%}
  .folder[data-open="true"] .print:nth-child(1){--tx:-80px;--ty:-150px}
  .folder[data-open="true"] .print:nth-child(3){--tx:80px;--ty:-140px}
  .bcard--projects .bcard__copy{max-width:100%}
  .bcard__link{position:relative;left:auto;bottom:auto;margin-top:18px}
  .dial__hint{bottom:auto;top:14px;right:16px}
  .ashow__thumb{aspect-ratio:4/3}
  .ashow__play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .process__list{grid-template-columns:1fr}
  .process__list li{padding:24px 0}
}
@media (prefers-reduced-motion:reduce){
  .print,.folder__front,.chat__msg{transition:none;animation:none}
}

/* 2 · One key: the hero keychain hangs on the right of the card */
.bcard--keys{overflow:hidden}
.bcard--keys .bcard__copy{max-width:min(285px,47%)}
.bcard__kchain{position:absolute;z-index:2;top:-8px;right:0;bottom:0;width:46%}
.bcard__kchain .kchain__set{height:calc(100% + 8px);max-height:none;margin-top:0}
@media (max-width:700px){.bcard--keys{min-height:520px}.bcard--keys .bcard__copy{max-width:none}.bcard__kchain{top:auto;height:300px;width:60%;right:0}}
.bcard--keys .bcard__title .nowrap{white-space:nowrap}
/* showreel poster has the logo in the middle, so the play key sits bottom-right in brand blue */
.ashow__play{left:auto;top:auto;right:30px;bottom:24px;width:76px;height:76px;margin:0;background:var(--accent);color:#fff;box-shadow:0 14px 30px -10px #3548fe99}
.ashow__btn:hover .ashow__play{background:#2232d6}

/* Showreel: no label, play button uses the same raised blue pill as the header Contact */
.ashow__btn .ashow__play,.ashow__btn:hover .ashow__play{padding:0 0 0 4px;background:var(--b-face);border:1px solid var(--b-rim);box-shadow:var(--b-bevel),var(--b-cast);color:#fff}
.ashow__btn:hover .ashow__play{transform:scale(1.06);filter:brightness(1.05)}

/* ===== Mobile hero layout (chosen: V1) (about) ===== */
@media (max-width:700px){
  .ahero{display:flex;flex-direction:column;min-height:100svh;padding:calc(var(--nav-h) + 24px) 0 76px}
  .ahero > .container,.ahero__grid,.ahero__copy{display:contents}
  .ahero__title,.ahero__row{margin-inline:var(--gutter)}
  .ahero .hero__canvas{--hc:1;position:relative;inset:auto;width:100%}
  /* V1 · headline up, the 3D logo right below, then text + buttons */
  .ahero__title{order:1}
  .ahero .hero__canvas{order:2;height:min(40svh,360px);margin:4px 0}
  .ahero__row{order:3;margin-top:0}
}

/* About hero on phones: everything, including "Scroll to explore", fits on the first screen */
.ahero__short{display:none}
@media (max-width:700px){
  .ahero__long{display:none}
  .ahero__short{display:inline}
  .ahero{height:100svh;min-height:560px;padding-bottom:64px}
  .ahero .hero__canvas{flex:1 1 0;height:auto;min-height:150px;max-height:410px}
  .ahero__row{gap:18px}
  .ahero__text{font-size:16px;line-height:1.45}
  .ahero__actions .btn-raised{min-height:48px;padding:12px 20px}
}