/* ==========================================================================
   JP Global Engineering — About
   Direction: THE EXHIBITION, second hang.

   The first hang was right about the idea and wrong about the light. Nearly
   black grounds swallowed the navigation, flattened the photographs and let the
   sections run together. This pass lifts every ground to a warm olive-charcoal,
   brings the small type up to comfortable contrast, and stops photographs from
   landing on top of each other by accident.

   The material is still real photography, the depth is still CSS perspective,
   and scroll still drives one custom property per scene (--p, 0 to 1). The
   founder opens the page (September 2026): his portrait, then his journey in
   four eras, then the company.

   Additive. Nothing in site.css is touched.
   ========================================================================== */

:root{
  --ink-0:#171D13;          /* the exhibition ground: olive-charcoal, not black */
  --ink-1:#1C2417;          /* a band that steps forward */
  --ink-2:#242D1D;          /* panels behind photographs while they load */
  --ab-line:rgba(245,239,229,.20);
  --ab-line-2:rgba(245,239,229,.36);
  --ab-dim:#C3CAAF;         /* reading text on the ground, 10:1 */
  --ab-dim-2:#A7B091;       /* small mono labels on the ground, 7.6:1 */
  --ab-label:#5E6449;       /* small labels on the light founder band, 4.8:1 */
  --ab-accent-deep:#A93F0E; /* orange text on light grounds, 4.8:1 */
}

/* ------------------------------ the bar over the exhibition ------------------------------
   about.js adds .over-dark whenever a dark band sits behind the bar and
   .ab-navdark once the page has moved, so the links always have a ground. */
.nav.over-dark{color:var(--bone)}
.nav.over-dark .pg{opacity:.9}
.nav.over-dark .pg:hover,.nav.over-dark .pg[aria-expanded="true"]{background:rgba(245,239,229,.16)}
.nav.ab-navdark{background:rgba(23,29,19,.84);border-bottom-color:rgba(245,239,229,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}

/* ------------------------------ scene shell ------------------------------ */
.scn{position:relative}
.scn>.stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
@supports not (height:100svh){.scn>.stage{height:100vh}}

.ab-dark{background:var(--ink-0);color:var(--bone)}
.ab-dark.lift{background:var(--ink-1)}
.ab-dark h1,.ab-dark h2,.ab-dark h3,.ab-dark h4{color:var(--bone)}
.ab-dark .kicker{color:var(--sage-soft)}
.ab-dark .lede{color:var(--ab-dim)}

/* ------------------------------ 01 leadership ------------------------------
   The page opens on the founder, set large: a warm pool of light behind him, a
   softer one at his feet, and the portrait standing on the bottom edge. The
   portrait is ab-founder-v3.webp, upscaled from the founder poster's own pixels
   and cleaned. The name is the page's h1.
   Scroll (--sp, 0 to 1 as the section leaves) lets the portrait sink a little
   slower than the page; the pointer leans it and the light apart. */
.fhero{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(16px,3.4vh,48px)) var(--pad) clamp(34px,7vh,96px);
  background:radial-gradient(56% 80% at 74% 58%,#2E3822 0%,#1E2618 46%,var(--ink-0) 78%);color:var(--bone)}
@supports not (min-height:100svh){.fhero{min-height:100vh}}
.fhero::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(17,23,15,.82),rgba(17,23,15,0))}
.fhero.lit{--lt:1}
.fhero .wrap{position:static;width:100%}
.fh-copy{position:relative;z-index:3;max-width:min(50%,660px)}
.fh-stage{position:absolute;z-index:1;top:var(--nav-h);bottom:0;pointer-events:none;
  right:max(var(--pad),calc((100% - var(--maxw)) / 2));width:min(48vw,760px)}
.fh-glow{position:absolute;left:50%;top:44%;width:112%;aspect-ratio:1;border-radius:50%;
  opacity:var(--lt,0);transform:translate(calc(-50% + var(--mx,0) * -14px),calc(-50% + var(--my,0) * -10px)) scale(calc(.86 + var(--lt,0) * .14));
  background:radial-gradient(closest-side,rgba(222,182,110,.34),rgba(201,169,107,.12) 50%,rgba(201,169,107,0) 74%);
  transition:opacity 1.8s var(--ease),transform 2.4s var(--ease)}
/* the light he stands in */
.fh-stage::after{content:"";position:absolute;z-index:0;left:50%;bottom:-6%;width:92%;height:22%;border-radius:50%;
  transform:translateX(-50%);opacity:var(--lt,0);transition:opacity 2s var(--ease) .4s;
  background:radial-gradient(closest-side,rgba(224,86,22,.16),rgba(201,169,107,.06) 60%,rgba(201,169,107,0))}
/* a soft stage light falling on him from above; it sways a degree or two */
.fh-beam{position:absolute;left:60%;top:-14%;width:120%;height:114%;pointer-events:none;
  transform:translateX(-50%) rotate(0deg);transform-origin:50% 0;opacity:calc(var(--lt,0) * .9);
  background:conic-gradient(from 160deg at 50% 0%,rgba(245,228,190,0) 0deg,rgba(245,228,190,.09) 14deg,rgba(245,228,190,.17) 20deg,
    rgba(245,228,190,.09) 26deg,rgba(245,228,190,0) 40deg);
  -webkit-mask-image:linear-gradient(to bottom,#000 12%,transparent 86%);mask-image:linear-gradient(to bottom,#000 12%,transparent 86%);
  filter:blur(6px);transition:opacity 2.2s var(--ease) .3s;animation:fhSway 12s ease-in-out infinite}
@keyframes fhSway{0%,100%{transform:translateX(-50%) rotate(-2.4deg)}50%{transform:translateX(-50%) rotate(2.4deg)}}
/* the figure carries the scroll and pointer movement; the picture inside it carries the entrance,
   so the one never waits on the other's transition */
.fh-port{position:absolute;z-index:1;left:50%;bottom:0;margin:0;aspect-ratio:1387/1920;
  width:min(100%,calc((100svh - var(--nav-h) - 6px) * .7224),700px);
  transform:translate3d(calc(-50% + var(--mx,0) * 8px),calc(var(--sp,0) * 70px),0)}
.fh-port img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;display:block;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 11%);mask-image:linear-gradient(to top,transparent 0,#000 11%);
  opacity:0;transform:translateY(34px);transition:opacity 1.3s var(--ease) .15s,transform 1.8s var(--ease) .15s}
.fhero.lit .fh-port img{opacity:1;transform:none}

.fh-name{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(3.2rem,min(8.8vw,14svh),9rem);
  line-height:.9;letter-spacing:-.045em;color:var(--bone)}
.fh-name .ts{display:block;margin-bottom:clamp(10px,1.8vh,18px);font-family:var(--mono);font-size:12px;font-weight:400;
  letter-spacing:.32em;line-height:1;color:var(--sand)}
/* each line of the name rises out of its own slot; the slot reaches well below the
   baseline so the tail of the g is never clipped, and gives the room back with a
   negative margin so the two lines still sit tight */
.fh-name .ln{display:block;overflow:hidden;padding:.06em .06em .34em 0;margin:-.06em 0 -.34em}
.fh-name .ln>span{display:block;transform:translateY(135%);transition:transform 1.3s var(--ease) .2s}
.fh-name .ln+.ln>span{transition-delay:.34s}
.fhero.lit .fh-name .ln>span{transform:none}
.fh-in{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.fhero.lit .fh-in{opacity:1;transform:none}
.fhero.lit .ts.fh-in{transition-delay:.1s}
.fhero.lit .fh-role{transition-delay:.55s}
.fhero.lit .fh-q{transition-delay:.7s}
.fhero.lit .fh-bio{transition-delay:.82s}
.fhero.lit .fh-go{transition-delay:.94s}
.fh-role{margin-top:clamp(18px,3vh,28px);font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  line-height:1.8;text-transform:uppercase;color:var(--sage-soft)}
.fh-role span{display:block}
.fh-role span+span{color:var(--ab-dim-2)}
.fh-q{margin:clamp(18px,3.2vh,36px) 0 0;padding-left:clamp(16px,1.5vw,22px);border-left:2px solid var(--accent);max-width:28ch;
  font-family:var(--display);font-weight:300;font-size:clamp(1.18rem,1.85vw,1.7rem);line-height:1.34;letter-spacing:-.014em;color:var(--bone)}
.fh-q em{font-style:italic;color:var(--sand)}
.fh-bio{margin-top:clamp(16px,2.6vh,24px);max-width:48ch;font-size:clamp(.98rem,1.12vw,1.05rem);line-height:1.66;color:var(--ab-dim)}
.fh-go{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:clamp(14px,2.8vh,34px);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);text-decoration:none}
.fh-go i{position:relative;width:40px;height:40px;border:1px solid var(--ab-line-2);border-radius:50%;
  transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.fh-go i::after{content:"";position:absolute;left:50%;top:44%;width:8px;height:8px;border:solid var(--bone);border-width:0 1.5px 1.5px 0;
  transform:translate(-50%,-50%) rotate(45deg);transition:top .4s var(--ease)}
.fh-go:hover i,.fh-go:focus-visible i{border-color:var(--accent);background-color:rgba(224,86,22,.14)}
.fh-go:hover i::after{top:54%}
.fh-go:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:999px}

/* a phone: the portrait first, full width, with the name coming up over the foot of it */
@media (max-width:860px){
  .fhero{flex-direction:column;align-items:stretch;min-height:auto;padding:calc(var(--nav-h) + 4px) 0 clamp(44px,8vh,70px)}
  .fh-stage{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:min(64svh,720px,128vw)}
  .fh-port{width:auto;height:100%}
  .fh-port img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 34%);mask-image:linear-gradient(to top,transparent 0,#000 34%)}
  .fh-glow{width:min(118%,calc(min(64svh,720px,128vw) * 1.1))}
  .fhero .wrap{padding:0 var(--pad);margin-top:clamp(-110px,-16vw,-52px)}
  .fh-copy{max-width:none}
  .fh-name{font-size:clamp(3rem,15.5vw,5.6rem)}
  .fh-q{max-width:none}
}

/* ------------------------------ the journey ------------------------------
   Four chapters. The heading scrolls in as usual; then the stage pins and
   scrolling runs the chapters I to IV, about 65vh each, before the page moves
   on. The rail of buttons carries every entry as a dot and fills as the reader
   moves through a chapter (--fp, from about.js); a button jumps to its chapter.
   The chapters share one grid cell, so the stage never changes height. On a
   phone, or for a reader who asks for stillness, nothing pins: the chapters
   follow one another with their own headings. */
.fjour{position:relative;background:var(--ink-0);color:var(--bone);padding:clamp(56px,9vh,110px) var(--pad) 0}
.fj-scn{height:360vh;margin-top:clamp(10px,2vh,24px)}
.fj-scn>.stage{padding:calc(var(--nav-h) + 6px) 0 clamp(14px,2.4vh,26px)}
/* --fit (about.js) shrinks the whole stage onto a short screen rather than cropping it */
.fj-inner{width:100%;transform:scale(var(--fit,1));transform-origin:50% 50%}
.fj-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,90px);align-items:end}
.fj-top .kicker{color:var(--sage-soft)}
.fj-top .h2{max-width:18ch;color:var(--bone)}
.fj-sum{max-width:46ch;font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.66;color:var(--ab-dim)}

.fj-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(12px,1.6vw,24px);margin-top:clamp(34px,6vh,64px)}
.fj-tab{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:14px;min-height:44px;padding:0 0 6px;
  border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--ab-dim-2);transition:color .35s var(--ease)}
.fj-line{grid-column:1 / -1;position:relative;display:block;height:2px;margin:12px 0 clamp(16px,2.4vh,22px);background:var(--ab-line);
  transition:background-color .35s var(--ease)}
.fj-line::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--fp,0));transform-origin:left}
.fj-line i{position:absolute;top:50%;z-index:1;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--ink-0);border:1.5px solid var(--ab-line-2);transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.fj-tab .n{font-family:var(--display);font-weight:300;font-size:clamp(2rem,3vw,2.8rem);line-height:.9;transition:color .35s var(--ease)}
.fj-tab .t{display:block;font-family:var(--display);font-size:clamp(1.02rem,1.5vw,1.35rem);line-height:1.15;letter-spacing:-.01em}
.fj-tab .r{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;transition:color .35s var(--ease)}
.fj-tab:hover{color:var(--ab-dim)}
.fj-tab:hover .fj-line{background:var(--ab-line-2)}
.fj-tab.on{color:var(--bone)}
.fj-tab.on .n{color:var(--accent-hover)}
.fj-tab.on .r{color:var(--sand)}
.fj-line i.lit{background:var(--accent);border-color:var(--accent)}
.fj-tab:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}

.fj-panels{display:grid;margin-top:clamp(22px,3.6vh,36px)}
.fj-ch{grid-area:1 / 1;min-width:0;visibility:hidden;opacity:0;transition:opacity .25s var(--ease),visibility 0s linear .25s}
.fj-ch.on{visibility:visible;opacity:1;transition-delay:0s}
/* a chapter's own heading, for when there are no buttons above it */
.fj-chh{display:none;align-items:flex-end;gap:14px;margin-bottom:16px}
.fj-chh .n{font-family:var(--display);font-weight:300;font-size:2.2rem;line-height:.9;color:var(--accent-hover)}
.fj-chh .t{display:block;font-family:var(--display);font-size:1.35rem;line-height:1.15;color:var(--bone)}
.fj-chh .r{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--sand)}
.fj-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);align-items:stretch}
.fj-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:12px;background:var(--ink-1);border:1px solid var(--ab-line)}
.fj-ch.on .fj-card{animation:fjIn .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes fjIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fj-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:clamp(16px,1.5vw,22px)}
.fj-mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#FFFDF8;
  box-shadow:0 0 0 1px var(--ab-line)}
.fj-mark img{max-width:30px;max-height:30px;width:auto;height:auto;display:block}
.fj-mark.node{background:none;box-shadow:inset 0 0 0 1px var(--ab-line-2)}
.fj-mark.node::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.fj-when{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.fj-t{margin-top:8px;font-size:clamp(1.08rem,1.45vw,1.32rem);line-height:1.18;letter-spacing:-.012em;color:var(--bone)}
.fj-d{margin-top:8px;font-size:.93rem;line-height:1.58;color:var(--ab-dim)}
/* the founding: the card that holds the company's own mark */
.fj-card.feat{border-color:rgba(224,86,22,.55);background:linear-gradient(180deg,rgba(224,86,22,.09),rgba(224,86,22,0) 62%),var(--ink-1)}
.fj-logo{display:inline-grid;place-items:center;margin-top:14px;padding:10px 16px;border-radius:8px;
  background:radial-gradient(circle at 50% 38%,#FFFDF8 0%,#ECE3D2 100%)}
.fj-logo img{width:clamp(120px,10vw,150px);height:auto;display:block}
.fj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fj-tags>span{padding:4px 9px;border:1px solid var(--ab-line-2);border-radius:999px;font-family:var(--mono);
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ab-dim)}
/* chapters with photographs: the picture heads the card */
.fj-ph{margin:0;aspect-ratio:5/4;overflow:hidden;background:var(--ink-2)}
.fj-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.fj-card:hover .fj-ph img{transform:scale(1.035)}
.fj-card.ph .fj-row,.fj-card.wide .fj-row{grid-template-columns:minmax(0,1fr)}
.fj-card.wide{grid-column:span 2;flex-direction:row}
.fj-card.wide .fj-ph{flex:0 0 54%;aspect-ratio:auto}
.fj-card.wide .fj-row{align-self:center}

.fj-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;
  margin-top:clamp(20px,3.4vh,32px);padding-top:clamp(12px,2vh,18px);border-top:1px solid var(--ab-line)}
.fj-next{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.fj-next .nm{font-weight:400;color:var(--sand)}
.fj-next::after{content:"\2192";color:var(--accent-hover);transition:transform .4s var(--ease)}
.fj-next:hover::after{transform:translateX(4px)}
.fj-next:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.fj-links{display:flex;flex-wrap:wrap;gap:4px 28px}
.fj-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hover);text-decoration:none}
.fj-link b{font-weight:400;letter-spacing:.06em;text-transform:none;color:var(--bone)}
.fj-link::after{content:"\2192";transition:transform .4s var(--ease)}
.fj-link:hover::after{transform:translateX(4px)}
.fj-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* a narrow desktop or a tablet: two cards to a row */
@media (min-width:861px) and (max-width:1100px){
  .fj-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* a phone: no pin; each chapter is a heading over a row of cards to swipe */
@media (max-width:860px){
  .fjour{padding-bottom:clamp(44px,8vh,70px)}
  .fj-top{grid-template-columns:1fr;align-items:start;gap:16px}
  .fj-scn{height:auto!important;margin-top:clamp(26px,5vh,40px)}
  .fj-scn>.stage{position:relative;height:auto;overflow:visible;display:block;padding:0}
  .fj-inner{transform:none}
  .fj-tabs,.fj-next{display:none}
  .fj-panels{display:block;margin:0}
  .fj-ch{visibility:visible;opacity:1}
  .fj-ch+.fj-ch{margin-top:clamp(30px,6vh,44px)}
  .fj-chh{display:flex}
  .fj-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 10px;scroll-padding-inline:var(--pad)}
  .fj-cards{align-items:flex-start}
  .fj-card{flex:0 0 min(80vw,330px);scroll-snap-align:start}
  .fj-card.wide{flex-direction:column}
  .fj-card.wide .fj-ph{flex:none;aspect-ratio:1280/648}
  .fj-ch.on .fj-card{animation:none}
  .fj-foot{flex-direction:column;align-items:flex-start}
}

/* ------------------------------ 02 about ------------------------------
   Words on the left, a hung set of three photographs on the right. The set is
   a grid, so the photographs keep their gutters at every width; depth comes
   from each cell sitting at its own Z and leaning a different amount towards
   the pointer. The technical line runs behind them. */
.ahero{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(24px,5vh,60px)) var(--pad) clamp(44px,8vh,96px);
  background:radial-gradient(70% 90% at 80% 42%,#243219 0%,var(--ink-0) 64%);color:var(--bone)}
@supports not (min-height:100svh){.ahero{min-height:100vh}}
/* a soft ground under the bar at the very top, before the page has moved */
.ahero::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(17,23,15,.82),rgba(17,23,15,0))}
.ahero .wrap{position:static;width:100%}
.ahero-copy{position:relative;z-index:3;max-width:min(44%,590px)}
.ahero .kicker{color:var(--sage-soft)}
.ahero .h1{color:var(--bone);max-width:12ch;font-size:clamp(2.5rem,4.8vw,4.4rem)}
.ahero .lede{color:var(--ab-dim);max-width:40ch}
.ahero-sub{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sand)}
.ahero-line{position:absolute;left:0;right:0;top:50%;height:1px;z-index:1;opacity:.6;
  background:linear-gradient(to right,transparent,var(--sage) 14%,var(--sand) 64%,transparent);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.6s var(--ease)}
.ahero.lit .ahero-line{transform:scaleX(1)}

.ahero-stage{position:absolute;z-index:2;pointer-events:none;
  right:max(var(--pad), calc((100% - var(--maxw)) / 2));
  top:calc(var(--nav-h) + clamp(24px,6vh,70px));bottom:clamp(40px,8vh,90px);width:min(50vw,780px);
  display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1.4fr 1fr;
  gap:clamp(14px,1.8vw,26px);perspective:1500px}
.ahp{position:relative;margin:0;min-height:0;overflow:hidden;border-radius:6px;background:var(--ink-2);
  box-shadow:0 40px 80px -46px rgba(0,0,0,.85);
  clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path 1.4s var(--ease),opacity 1s var(--ease)}
.ahp img{width:100%;height:100%;object-fit:cover;display:block}
.ahero.lit .ahp{clip-path:inset(0 0 0 0);opacity:1}
.ahp.main{grid-column:1 / -1;transition-delay:.12s;
  transform:translate3d(calc(var(--mx,0) * 8px),calc(var(--my,0) * 6px),-40px)}
.ahp.main img{object-position:50% 46%}
.ahp.second{transition-delay:.36s;transform:translate3d(calc(var(--mx,0) * 14px),calc(var(--my,0) * 10px),30px)}
/* the close-up is smaller than its cell and hangs from the top corner, so it
   reads as a detail on its own plane with air beneath it */
.ahp.detail{width:80%;height:78%;justify-self:end;align-self:start;transition-delay:.58s;
  transform:translate3d(calc(var(--mx,0) * 22px),calc(var(--my,0) * 16px),-60px) rotateY(-5deg)}
.ahp figcaption{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:3px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);background:rgba(23,29,19,.7)}
.ahero-meta{display:none}

@media (max-width:980px){
  .ahero{min-height:auto;align-items:flex-start}
  .ahero .wrap{display:flex;flex-direction:column}
  .ahero-copy{max-width:none}
  .ahero-line{top:auto;bottom:0}
  .ahero-stage{position:relative;right:auto;top:auto;bottom:auto;width:100%;perspective:none;
    margin-top:clamp(26px,5vh,40px);grid-template-columns:1fr 38%;grid-template-rows:auto auto}
  .ahp.main{aspect-ratio:16/10;transform:none}
  /* all three photographs stay: deployment and system share the second row */
  .ahp.second{grid-column:1;grid-row:2;height:auto;align-self:stretch;transform:none}
  .ahp.detail{grid-column:2;grid-row:2;width:auto;height:auto;justify-self:stretch;align-self:stretch;aspect-ratio:3/4;transform:none}
  .ahero-meta{display:none}
  .ahero-meta span{padding-top:9px;border-top:1px solid var(--ab-line)}
}

/* ------------------------------ the three numbers ------------------------------ */
.anums{background:var(--ink-0);color:var(--bone);padding:0 var(--pad) clamp(70px,11vh,140px);
  position:relative;overflow:hidden}
.anums-row{max-width:var(--maxw);margin:0 auto;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,70px);padding-top:clamp(40px,6vh,70px)}
.anums-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--ab-line);transform:scaleX(var(--rp,0));transform-origin:left}
.anum{position:relative;padding-top:clamp(26px,4vh,46px)}
.anum::before{content:"";position:absolute;left:0;top:-1px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);transform:translateY(-50%) scale(var(--rp,0))}
.anum .n{font-family:var(--display);font-weight:400;line-height:.9;letter-spacing:-.045em;
  font-size:clamp(3.4rem,9.5vw,8.5rem);color:var(--bone);font-variant-numeric:tabular-nums;
  transform:translateY(calc(var(--rp,0) * -6px))}
.anum:nth-child(2) .n{transform:translateY(calc(var(--rp,0) * -13px))}
.anum:nth-child(3) .n{transform:translateY(calc(var(--rp,0) * -20px))}
.anum .l{font-family:var(--mono);font-size:clamp(10px,1vw,11px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ab-dim-2);margin-top:clamp(12px,2vh,20px)}
@media (max-width:760px){
  .anums-row{grid-template-columns:1fr;gap:0}
  .anum{padding:26px 0 26px 22px}
  .anum+.anum{border-top:1px solid var(--ab-line)}
  .anum::before{top:26px}
  .anum .n{font-size:clamp(3rem,15vw,4.6rem)}
}

/* ------------------------------ 02 idea / engineering / reality ------------------------------
   One drawing, built while you watch. A single point grows construction lines
   and measurements; the lines become frames, nodes and a live path that runs
   between the letters of ENGINEERING; then the frame the drawing was building
   turns out to be the edge of a real photograph, and it opens to fill the room.
   JavaScript writes the stage variables; everything visible is CSS and SVG. */
.amorph{height:340vh}
.amorph .stage{background:var(--ink-0)}
.am-photo{position:absolute;inset:0;z-index:1;opacity:var(--po,0);
  clip-path:inset(var(--ft,30%) var(--fr,28%) var(--fb,30%) var(--fl,28%) round var(--fr2,6px))}
.am-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.14 - var(--rv,0) * .14));
  filter:brightness(calc(.64 + var(--rv,0) * .32)) saturate(calc(.72 + var(--rv,0) * .28))}
.am-frame{position:absolute;z-index:3;pointer-events:none;opacity:var(--fo,0);
  top:var(--ft,30%);right:var(--fr,28%);bottom:var(--fb,30%);left:var(--fl,28%);
  border:1.5px solid var(--sand);border-radius:var(--fr2,6px)}
.am-frame::before,.am-frame::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--accent)}
.am-frame::before{left:-9px;top:-9px;border-right:0;border-bottom:0}
.am-frame::after{right:-9px;bottom:-9px;border-left:0;border-top:0}
.am-draw{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;
  opacity:var(--do,1);transform:scale(calc(1 + var(--rec,0) * .08));transform-origin:50% 52%}
.am-draw *{vector-effect:non-scaling-stroke;fill:none}
.am-grid line{stroke:rgba(245,239,229,.07);stroke-width:1}
.am-idea{opacity:var(--i1,1)}
.am-idea .cons{stroke:var(--sage-soft);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--d1,0))}
.am-idea .dash{stroke:rgba(174,190,140,.6);stroke-width:1;stroke-dasharray:5 7;opacity:var(--m1,0)}
.am-idea .pt{fill:var(--accent);stroke:none;transform-box:fill-box;transform-origin:center;transform:scale(var(--pt,0))}
.am-idea .ring{stroke:var(--accent);stroke-width:1.2;opacity:calc(var(--pt,0) * .8)}
.am-draw text{fill:var(--sand);stroke:none;font-family:var(--mono);font-size:13px;letter-spacing:.14em;opacity:var(--m1,0)}
.am-eng .frm{stroke:var(--sage-soft);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--d2,0))}
.am-eng .cmp{stroke:var(--sand);stroke-width:1.2;fill:rgba(201,169,107,.07);
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--d2,0))}
.am-eng .node{fill:var(--sand);stroke:none;transform-box:fill-box;transform-origin:center;transform:scale(var(--n2,0))}
.am-eng .path{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p2,0))}

.am-words{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none}
.am-w{grid-area:1 / 1;font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1;
  font-size:clamp(3rem,10.5vw,9.2rem);color:var(--bone);opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .7s var(--ease);text-shadow:0 2px 46px rgba(0,0,0,.45)}
.am-w.on{opacity:1;transform:none}
.am-w.idea{letter-spacing:.04em}
/* two identical layers with a live path between them: the path runs in front of
   some letters and behind the ones marked .k */
.am-w.eng{position:relative}
.am-w.eng .lyr{display:block;white-space:nowrap}
.am-w.eng .back{position:relative;z-index:0}
.am-w.eng .front{position:absolute;inset:0;z-index:2}
.am-w.eng .front span{color:transparent;text-shadow:none}
.am-w.eng .front span.k{color:var(--bone)}
.am-w.eng .thru{position:absolute;z-index:1;left:-5%;right:-5%;top:55%;height:2px;background:var(--accent);
  transform:scaleX(var(--p2,0));transform-origin:left;box-shadow:0 0 16px rgba(224,86,22,.55)}
.am-cap{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:clamp(22px,5vh,50px);
  max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.am-cap div{padding-top:12px;border-top:1px solid var(--ab-line);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ab-dim-2);transition:color .4s,border-color .4s}
.am-cap div.on{color:var(--bone);border-top-color:var(--accent)}
.am-cap div:nth-child(2){text-align:center}
.am-cap div:nth-child(3){text-align:right}
.am-read{position:absolute;z-index:5;right:var(--pad);top:calc(var(--nav-h) + 18px);text-align:right;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;line-height:1.9;color:var(--sand);opacity:var(--m1,0)}
@media (max-width:760px){
  .amorph{height:230vh}
  .am-draw .dt,.am-read{display:none}
  .am-cap div{font-size:9.5px;letter-spacing:.14em}
}

/* ------------------------------ 03 the core ------------------------------
   The company sits in the middle as its own mark on an ivory disc, the same way
   it sits on the bone bar at the top of every page. */
.acore-wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,80px);align-items:center;max-width:var(--maxw);margin:clamp(34px,5vh,58px) auto 0}
@media (max-width:1000px){.acore-wrap{grid-template-columns:1fr;gap:clamp(26px,5vh,44px)}}
.acore-hub{position:relative;aspect-ratio:1;max-height:64vh;margin-inline:auto;width:100%}
.acore-hub svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.acore-hub .spoke{stroke:var(--ab-line);stroke-width:1;transition:stroke .5s var(--ease)}
.acore-hub .spoke.on{stroke:var(--accent)}
.acore-hub .ring{fill:none;stroke:var(--ab-line);stroke-width:1}
.acore-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:31%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#FFFDF8 0%,#ECE3D2 100%);
  box-shadow:0 0 0 8px rgba(245,239,229,.06),0 24px 50px -24px rgba(0,0,0,.7)}
.acore-mid img{width:80%;height:auto;display:block}
.acore-node{position:absolute;transform:translate(-50%,-50%);z-index:3;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border:0;border-radius:999px;background:none;
  font-family:var(--mono);font-size:clamp(9.5px,.95vw,10.5px);letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;color:var(--ab-dim);transition:color .4s var(--ease)}
.acore-node::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--ab-line-2);transition:background .4s var(--ease),transform .4s var(--ease)}
.acore-node span{position:relative;display:inline-block;transform:translateY(calc(var(--ty,-22) * 1px))}
.acore-node[aria-pressed="true"]{color:var(--bone)}
.acore-node[aria-pressed="true"]::before{background:var(--accent);transform:scale(1.5)}
.acore-node:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the shots stack in one grid cell, so the column is as tall as the tallest shot */
.acore-view{display:grid;width:100%;max-width:520px;margin-inline:auto;perspective:1200px}
.acore-shot{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transform:translateZ(-120px) scale(.96);
  transition:opacity .6s var(--ease),transform .8s var(--ease),visibility .6s}
.acore-shot.on{opacity:1;visibility:visible;transform:none}
.acore-shot .ph{aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--ink-2);
  box-shadow:0 50px 100px -56px rgba(0,0,0,.85)}
.acore-shot .ph img{width:100%;height:100%;object-fit:cover;display:block}
/* a photograph with little real detail is shown smaller than its frame, on a
   drawing-grid mat, rather than stretched to fill it */
.acore-shot .ph.lowres{position:relative;
  background:linear-gradient(rgba(245,239,229,.05) 1px,transparent 1px) 0 0/28px 28px,
             linear-gradient(90deg,rgba(245,239,229,.05) 1px,transparent 1px) 0 0/28px 28px,var(--ink-2)}
.acore-shot .ph.lowres img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:74%;max-height:84%;
  object-fit:contain;border-radius:8px;box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.acore-cap{padding:18px 4px 0}
.acore-cap h3{font-size:clamp(1.12rem,2vw,1.5rem);letter-spacing:-.016em}
.acore-cap p{margin-top:9px;font-size:.95rem;line-height:1.6;color:var(--ab-dim);max-width:44ch}
.acore-tabs{display:none}
@media (max-width:1000px){.acore-hub{max-height:none;aspect-ratio:1.2}}
@media (max-width:600px){
  .acore-hub{display:none}
  .acore-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(26px,4vh,38px) 0 0}
  .acore-tabs .acore-node{position:static;transform:none;border:1px solid var(--ab-line)}
  .acore-tabs .acore-node::before{display:none}
  .acore-tabs .acore-node span{transform:none}
  .acore-tabs .acore-node[aria-pressed="true"]{border-color:var(--accent)}
  .acore-view{max-width:none}
  .acore-shot .ph{aspect-ratio:4/3}
}

/* ------------------------------ 04 how we work ------------------------------ */
.aflow{height:260vh}
.aflow .stage{background:var(--ink-1)}
/* stages 01 to 03 show the real thing: the site visit, the system layout, the build */
.aflow-vis{position:absolute;z-index:1;right:calc(var(--pad) + clamp(56px,6vw,96px));top:50%;
  display:flex;align-items:flex-end;gap:clamp(12px,1.2vw,18px);pointer-events:none;
  opacity:0;transform:translate3d(0,calc(-50% + 18px),0) scale(.985);
  transition:opacity .6s var(--ease),transform .8s var(--ease)}
.aflow-vis.on{opacity:1;transform:translate3d(0,-50%,0)}
.aflow-vis figure{position:relative;margin:0;border-radius:10px;overflow:hidden;background:var(--ink-2);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.aflow-vis img{width:100%;height:100%;object-fit:cover;display:block}
/* a pair of photographs share one size, and the pair never grows into the words on the left */
.aflow-vis.duo{width:min(calc(min(62vh,580px) * 1.5 + clamp(12px,1.2vw,18px)),calc(100vw - var(--pad) * 2 - clamp(56px,6vw,96px) - min(34ch,52vw) - 56px))}
.aflow-vis.duo{width:min(calc(min(62svh,580px) * 1.5 + clamp(12px,1.2vw,18px)),calc(100vw - var(--pad) * 2 - clamp(56px,6vw,96px) - min(34ch,52vw) - 56px))}
.aflow-vis.duo figure{flex:1 1 0;min-width:0;aspect-ratio:3/4}
.aflow-vis.screen .av-main{height:auto;width:min(50vw,780px);aspect-ratio:16/9;border:8px solid #0E120C;border-radius:14px}
.aflow-vis figcaption{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:3px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);background:rgba(23,29,19,.78)}
.aflow-photo{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.aflow-photo.on{opacity:1}
.aflow-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.84) saturate(.96)}
.aflow-photo[data-at="3"] img{object-position:50% 40%}
/* a ground only where the words sit, so faces keep their light */
.aflow-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,rgba(23,29,19,.92) 0%,rgba(23,29,19,.45) 34%,transparent 60%)}
.aflow-step{position:absolute;z-index:2;left:var(--pad);bottom:clamp(40px,8vh,90px);max-width:min(34ch,52vw);
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.aflow-step.on{opacity:1;transform:none}
.aflow-step .n{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--accent-hover)}
.aflow-step h3{margin-top:14px;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.022em;color:var(--bone)}
.aflow-step p{margin-top:14px;color:var(--ab-dim);font-size:clamp(.96rem,1.2vw,1.06rem);line-height:1.62}
.aflow-step .fig{display:none}
.aflow-tick{position:absolute;z-index:2;right:var(--pad);top:50%;transform:translateY(-50%);display:grid;gap:14px}
.aflow-tick i{display:block;width:22px;height:2px;border-radius:2px;background:var(--ab-line-2);
  transition:background .4s var(--ease),width .4s var(--ease)}
.aflow-tick i.on{background:var(--accent);width:38px}
@media (max-width:900px){
  .aflow{height:auto}
  .aflow .stage{position:static;height:auto;display:block;padding:clamp(40px,7vh,70px) 0}
  .aflow-vis,.aflow-tick,.aflow-photo{display:none}
  .aflow-step{position:relative;left:auto;bottom:auto;opacity:1;transform:none;max-width:none;
    margin:0 var(--pad);padding:clamp(24px,4vh,34px) 0 clamp(24px,4vh,34px) 34px;border-left:1px solid var(--ab-line)}
  .aflow-step::before{content:"";position:absolute;left:-5px;top:clamp(30px,4.6vh,42px);
    width:9px;height:9px;border-radius:50%;background:var(--accent)}
  .aflow-step .fig{display:block;margin-top:18px;border-radius:14px;overflow:hidden}
  .aflow-step .fig img{width:100%;height:auto;display:block}
}

/* ------------------------------ 05 proof at scale ------------------------------
   Level one: seven photographs on fixed slots around the figure, each on its
   own depth plane, none covering another, with room left for the number. */
.aproof{position:relative;min-height:112svh;display:grid;place-items:center;overflow:hidden;perspective:1400px}
.apf{position:absolute;margin:0;overflow:hidden;border-radius:6px;background:var(--ink-2);
  box-shadow:0 40px 90px -46px rgba(0,0,0,.9);
  transform:translate3d(0,calc((var(--p,.5) - .5) * var(--py,0px)),var(--z,0px))}
.apf img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.92)}
.apf.s1{left:4%;top:9%;width:17%;aspect-ratio:4/5;--z:-80px;--py:-70px}
.apf.s2{left:24%;top:6%;width:15%;aspect-ratio:4/3;--z:-160px;--py:-40px}
.apf.s3{right:4%;top:8%;width:19%;aspect-ratio:4/3;--z:-60px;--py:-60px}
.apf.s4{right:26%;top:5%;width:13%;aspect-ratio:1;--z:-200px;--py:-30px}
.apf.s5{left:5%;bottom:7%;width:21%;aspect-ratio:16/10;--z:20px;--py:70px}
.apf.s6{right:5%;bottom:6%;width:17%;aspect-ratio:4/5;--z:0px;--py:50px}
.apf.s7{left:30%;bottom:5%;width:14%;aspect-ratio:4/3;--z:-120px;--py:40px}
.aproof-mid{position:relative;z-index:3;text-align:center;pointer-events:none}
.aproof-mid .big{font-family:var(--display);font-weight:400;line-height:.88;letter-spacing:-.05em;
  font-size:clamp(4.2rem,14vw,12rem);color:var(--bone);font-variant-numeric:tabular-nums;
  text-shadow:0 4px 50px rgba(0,0,0,.55)}
.aproof-mid .lbl{margin-top:18px;font-family:var(--mono);font-size:clamp(10px,1.1vw,12px);letter-spacing:.3em;
  text-transform:uppercase;color:var(--sand)}
.aproof-mid .sec2{margin-top:clamp(22px,4vh,40px);padding-top:clamp(18px,3vh,28px);border-top:1px solid var(--ab-line);
  display:inline-flex;gap:14px;align-items:baseline}
.aproof-mid .sec2 b{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4vw,3rem);letter-spacing:-.03em;color:var(--bone)}
.aproof-mid .sec2 span{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ab-dim-2)}
@media (max-width:860px){
  .aproof{min-height:auto;display:block;perspective:none;padding:clamp(40px,7vh,70px) var(--pad)}
  .aproof-mid{margin-bottom:clamp(26px,5vh,40px)}
  /* the slot rules above are two classes deep, so these need a third to win */
  .aproof-grid .apf[class]{position:relative;inset:auto;width:auto;aspect-ratio:1;transform:none}
  .apf.s2,.apf.s4,.apf.s7{display:none}
  .aproof-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
@media (min-width:600px) and (max-width:860px){
  .aproof-grid{grid-template-columns:repeat(4,1fr)}
}

/* Level two: the whole Farm and project folder as a moving wall. Vertical scroll
   moves the three rows sideways while the stage is pinned; on a phone, or for a
   reader who asks for stillness, it is an ordinary swipeable strip. Every
   thumbnail is small; the full photograph is fetched only when one is opened. */
/* the rows are sized from the height left under the bar, so the heading is never tucked behind it */
.arc{--rowh:clamp(120px,calc((100vh - var(--nav-h) - 220px) / 3),250px);background:var(--ink-1)}
.arc>.stage{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,30px);place-items:initial;padding-top:var(--nav-h)}
.arc-head{width:100%;max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.arc-head .kicker{margin-bottom:14px}
.arc-head .h2{font-size:clamp(1.8rem,3.4vw,2.8rem);max-width:none}
.arc-meta{text-align:right;flex:0 0 auto}
.arc-count{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ab-dim-2)}
.arc-count b{font-weight:400;color:var(--accent-hover)}
.arc-note{margin-top:8px;font-size:.88rem;color:var(--ab-dim-2)}
.arc-scroll{overflow:hidden;width:100%}
.arc-track{display:grid;gap:clamp(10px,1.2vw,16px);width:max-content;padding:0 var(--pad);
  transform:translate3d(calc(var(--p,0) * var(--travel,0px) * -1),0,0);will-change:transform}
.arc-row{display:flex;gap:clamp(10px,1.2vw,16px);list-style:none;margin:0;padding:0}
.arc-row:nth-child(2){margin-left:calc(var(--rowh) * .5)}
.arc-row:nth-child(3){margin-left:calc(var(--rowh) * .2)}
.arc-it{flex:0 0 auto;height:var(--rowh)}
.arc-btn{display:block;height:100%;padding:0;border:0;border-radius:5px;overflow:hidden;background:var(--ink-2);cursor:zoom-in}
.arc-btn img{height:100%;width:auto;display:block;filter:brightness(.9) saturate(.96);
  transition:filter .5s var(--ease),transform .7s var(--ease)}
.arc-btn:hover img,.arc-btn:focus-visible img{filter:none;transform:scale(1.035)}
.arc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.arc-bar{position:relative;height:2px;width:calc(100% - var(--pad) * 2);max-width:var(--maxw);margin:0 auto;background:var(--ab-line)}
.arc-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:var(--accent)}
@media (max-width:860px){
  .arc{--rowh:clamp(120px,30vw,180px);height:auto!important}
  .arc>.stage{position:relative;height:auto;padding:clamp(40px,7vh,70px) 0}
  .arc-head{flex-direction:column;align-items:flex-start}
  .arc-meta{text-align:left}
  .arc-scroll{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .arc-track{transform:none}
  .arc-it{scroll-snap-align:start}
  .arc-bar{display:none}
}

/* ------------------------------ 06 milestones ------------------------------
   Six stages, one at a time: number and title on the left, the evidence on the
   right, a rail counting through them. The arriving photograph comes forward;
   the one before it steps back into the dark rather than simply vanishing. */
.amiles{height:938vh}
.amiles .stage{display:block;background:var(--ink-0);perspective:1600px}
.ms-rail{position:absolute;z-index:6;left:clamp(18px,3vw,44px);top:50%;transform:translateY(-50%);
  width:2px;height:min(56vh,480px);background:var(--ab-line)}
.ms-rail>i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);background:var(--accent)}
.ms-dots{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.ms-dots li{position:absolute;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--ink-0);border:1.5px solid var(--ab-line-2);transition:background .4s,border-color .4s}
.ms-dots li.on{background:var(--accent);border-color:var(--accent)}
/* about.js spaces the dots evenly down the rail, however many milestones there are */
.ms{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;
  gap:clamp(28px,4vw,72px);max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;pointer-events:none;
  padding:calc(var(--nav-h) + 16px) var(--pad) clamp(40px,7vh,70px) calc(var(--pad) + clamp(22px,3vw,44px))}
.ms.active{pointer-events:auto}
/* the outgoing milestone leaves first; the incoming one waits for it */
.ms{--o:0;--to:0;--z:-160px;--sc:.97;visibility:hidden;transition:visibility 0s linear .3s}
.ms.active{--o:1;--to:1;--z:0px;--sc:1;visibility:visible;transition-delay:0s}
.ms-text,.ms-media{transition:opacity .28s var(--ease),transform .55s var(--ease)}
.ms.active .ms-text,.ms.active .ms-media{transition-delay:.22s}
.ms-text{opacity:var(--to,0);transform:translateY(calc((1 - var(--to,0)) * 22px))}
.ms-n{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--ab-dim-2)}
.ms-n b{font-weight:400;color:var(--accent-hover)}
.ms-yr{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand)}
.ms h3{margin-top:14px;font-size:clamp(2.1rem,4.6vw,4rem);letter-spacing:-.03em;line-height:.98;color:var(--bone)}
.ms-sub{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:1.8;
  text-transform:uppercase;color:var(--sage-soft)}
.ms-text>p{margin-top:18px;max-width:44ch;color:var(--ab-dim);font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.66}
/* a milestone may name the organisations behind it with a link to their own page */
.ms-text>p a{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(245,239,229,.34);
  text-underline-offset:3px;transition:text-decoration-color .3s var(--ease)}
.ms-text>p a:hover{text-decoration-color:var(--accent)}
.ms-text>p a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* --fit comes from about.js, so a milestone's evidence is never taller than the screen */
.ms-media{position:relative;opacity:var(--o,0);transform:translateZ(var(--z,-600px)) scale(calc(var(--sc,1) * var(--fit,1)));transform-origin:62% 50%}
.ms-main{margin:0;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:var(--ink-2);
  box-shadow:0 60px 120px -54px rgba(0,0,0,.95)}
.ms-main img{width:100%;height:100%;object-fit:cover;display:block}
.ms-main.tall{aspect-ratio:4/5;max-width:400px;margin-left:auto}
.ms-dets{display:flex;justify-content:flex-end;gap:12px;margin-top:14px}
.ms-det{margin:0;width:clamp(104px,11vw,150px);border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
.ms-det img{width:100%;height:auto;display:block}
.ms-det.photo{aspect-ratio:1}
.ms-det.photo img{height:100%;object-fit:cover}
/* the Bernama milestone: a proper article preview, with the real page beside it */
.bn{position:relative;max-width:560px;margin-left:auto;border-radius:8px;overflow:hidden;background:var(--paper);
  color:var(--olive-ink);box-shadow:0 60px 120px -54px rgba(0,0,0,.95)}
.bn-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px clamp(20px,2.6vw,30px);
  background:var(--forest-3);color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.bn-head b{font-weight:400;color:var(--accent-hover);letter-spacing:.3em}
.bn-body{padding:clamp(22px,3vw,36px)}
.bn-kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ab-label)}
.bn h4{margin-top:12px;font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.3vw,1.95rem);
  line-height:1.16;letter-spacing:-.018em;color:var(--olive-ink)}
.bn-dek{margin-top:14px;font-size:.98rem;line-height:1.62;color:var(--text-2)}
.bn-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.bn-by{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ab-label)}
.bn-go{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ab-accent-deep)}
.bn-go::after{content:"\2192";transition:transform .4s var(--ease)}
.bn-go:hover::after{transform:translateX(4px)}
.bn-go:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.bn-shot{margin:14px 0 0 auto;width:min(100%,380px);border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
.bn-shot img{width:100%;height:auto;display:block}
.ms figcaption{padding:7px 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ab-label);background:#fff}
/* Ichigo Lab: the portrait and its detail side by side, never stacked into each other */
.ms-duo{display:flex;align-items:flex-end;justify-content:flex-end;gap:14px}
.ms-duo .ms-dets{margin:0}
.ms-duo .ms-main.tall{flex:0 0 auto;height:min(58svh,540px);width:auto;max-width:none;margin:0}
/* Bernama: the article preview with the real page beside it rather than under it */
.ms-bn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:end;gap:14px}
.ms-bn .bn{max-width:none;margin:0}
.ms-bn .bn-body{padding:clamp(20px,2.4vw,30px)}
.ms-bn .bn h4{font-size:clamp(1.12rem,1.65vw,1.5rem)}
.ms-bn .bn-shot{width:auto;margin:0}
.ms-bn .bn-shot figcaption{letter-spacing:.08em}
/* milestone details open in the viewer; the mark in the corner says so */
.ms-det,.bn-shot{position:relative}
.ms-det img,.bn-shot img{transition:transform .5s var(--ease)}
.ms-det:hover img,.bn-shot:hover img{transform:scale(1.04)}
.ms-zoom{position:absolute;inset:0;z-index:1;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:zoom-in}
.ms-zoom::after{content:"";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(23,29,19,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5EFE5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h4v4M13.5 2.5 9 7M6.5 13.5h-4v-4M2.5 13.5 7 9'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.8);transition:transform .35s var(--ease),background-color .35s var(--ease)}
.ms-zoom:hover::after,.ms-zoom:focus-visible::after{transform:scale(1.1);background-color:var(--accent)}
.ms-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* Vanakkam Malaysia: three posts in one row, sized so they share a height */
.ms-van{display:flex;align-items:flex-end;gap:14px;max-width:784px;margin-left:auto}
.ms-van figure{flex:var(--a,1) 1 0;min-width:0;margin:0;border-radius:6px;overflow:hidden;background:#1b1f27;
  border:1px solid rgba(245,239,229,.14);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.ms-van figure:nth-child(2){transform:translateY(-22px)}
.ms-van img{width:100%;height:auto;display:block}
.ms-src{margin-top:16px;text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ab-dim-2)}
/* MAHA 2026: the pavilion over a strip of five, each at its own shape and sized to share a height */
.ms-strip{display:flex;align-items:flex-end;gap:10px;margin-top:12px}
.ms-strip figure{position:relative;flex:var(--a,1) 1 0;min-width:0;margin:0;border-radius:6px;overflow:hidden;background:var(--ink-2);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
.ms-strip img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.ms-strip figure:hover img{transform:scale(1.04)}
@media (max-width:860px){
  .amiles{height:auto}
  .amiles .stage{position:relative;height:auto;overflow:visible;padding:clamp(30px,6vh,60px) 0}
  .ms-rail{top:0;bottom:0;height:auto;transform:none;left:calc(var(--pad) + 4px)}
  .ms-rail>i{height:100%}
  .ms-dots{display:none}
  .ms{position:relative;inset:auto;display:block;max-width:none;pointer-events:auto;
    padding:0 var(--pad) clamp(44px,8vh,70px) calc(var(--pad) + 30px)}
  .ms::before{content:"";position:absolute;left:calc(var(--pad));top:4px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
  .ms-text,.ms-media{opacity:1!important;transform:none!important}
  .ms-media{margin-top:20px}
  .ms-main.tall{max-width:none;margin:0;aspect-ratio:4/3}
  .bn,.bn-shot{max-width:none;margin-left:0}
  .ms-dets{justify-content:flex-start}
  .ms{visibility:visible}
  .ms-duo{flex-direction:column-reverse;align-items:stretch}
  .ms-duo .ms-main.tall{height:auto;width:100%;aspect-ratio:4/3}
  .ms-bn{grid-template-columns:1fr}
  .ms-van{max-width:none;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .ms-van figure{flex:0 0 auto;height:min(300px,72vw);scroll-snap-align:start}
  .ms-van figure:nth-child(2){transform:none}
  .ms-van img{width:auto;height:100%}
  .ms-src{text-align:left}
  .ms-strip{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .ms-strip figure{flex:0 0 auto;height:min(220px,56vw);scroll-snap-align:start}
  .ms-strip img{width:auto;height:100%}
}

/* ------------------------------ 07 international ------------------------------ */
.aintl-wrap{position:relative;margin-top:clamp(40px,6vh,72px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,64px);align-items:center}
@media (max-width:980px){.aintl-wrap{grid-template-columns:1fr}}
.aintl-map{position:relative;aspect-ratio:4/3}
.aintl-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.aintl-map .grat{stroke:rgba(245,239,229,.06);stroke-width:1}
.aintl-map .contour{fill:none;stroke:rgba(174,190,140,.16);stroke-width:1}
.aintl-map .landmass{fill:rgba(245,239,229,.06);stroke:var(--ab-line-2);stroke-width:1}
.aintl-map .arc{fill:none;stroke:var(--sage);stroke-width:1.3;opacity:.55;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.6s var(--ease),stroke .5s var(--ease),opacity .5s var(--ease)}
.aintl-map.in .arc{stroke-dashoffset:0}
.aintl-map .arc.on{stroke:var(--accent);opacity:1}
.aintl-map .yr{fill:var(--sand);font-family:var(--mono);font-size:11px;letter-spacing:.18em}
.aintl-pt{position:absolute;z-index:2;transform:translate(-50%,-50%);min-width:44px;min-height:44px;
  padding:10px 12px;border:0;background:none;cursor:pointer;color:var(--ab-dim);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  transition:color .4s var(--ease)}
.aintl-pt i{display:block;width:10px;height:10px;margin:0 auto 9px;border-radius:50%;background:var(--ab-line-2);
  transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.aintl-pt small{display:block;margin-top:5px;font-size:9px;letter-spacing:.14em;color:var(--ab-dim-2)}
.aintl-pt[aria-pressed="true"]{color:var(--bone)}
.aintl-pt[aria-pressed="true"] i{background:var(--accent);transform:scale(1.4);box-shadow:0 0 0 6px rgba(224,86,22,.18)}
.aintl-pt.home{cursor:default}
.aintl-pt.home i{background:var(--sand)}
.aintl-pt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.aintl-view{display:grid;perspective:1100px}
.aintl-card{grid-area:1 / 1;position:relative;border-radius:16px;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--ab-line);box-shadow:0 50px 100px -56px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateZ(-140px) scale(.95);
  transition:opacity .65s var(--ease),transform .85s var(--ease),visibility .65s}
.aintl-card.on{opacity:1;visibility:visible;transform:none}
.aintl-card>img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;display:block}
/* two photographs side by side in their own frames, never one laid over the other */
.aintl-duo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:6px;aspect-ratio:16/10}
.aintl-duo img{width:100%;height:100%;min-width:0;object-fit:cover;display:block}
/* the words sit under the photograph, not over it, so nobody in a group shot is covered */
.aintl-card .txt{position:relative;padding:clamp(20px,3vw,30px);background:var(--ink-2)}
.aintl-card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand)}
.aintl-card h3{margin-top:10px;font-size:clamp(1.12rem,2vw,1.55rem);letter-spacing:-.018em;color:var(--bone)}
.aintl-card p{margin-top:9px;font-size:.93rem;line-height:1.6;color:var(--ab-dim);max-width:46ch}
@media (max-width:640px){
  .aintl-map{aspect-ratio:1.1}
  .aintl-card>img{aspect-ratio:4/3}
}

/* ------------------------------ 08 partnerships ------------------------------ */
.apart-wrap{position:relative;margin-top:clamp(40px,6vh,72px);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,64px);align-items:center}
@media (max-width:980px){.apart-wrap{grid-template-columns:1fr}}
.apart-net{position:relative;aspect-ratio:1;max-height:60vh;margin-inline:auto;width:100%}
.apart-net svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.apart-net .link{stroke:var(--ab-line);stroke-width:1;transition:stroke .5s var(--ease)}
.apart-net .link.on{stroke:var(--accent);stroke-width:1.6}
.apart-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(96px,13vw,138px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#FFFDF8 0%,#ECE3D2 100%);
  box-shadow:0 0 0 8px rgba(245,239,229,.06),0 24px 50px -24px rgba(0,0,0,.7)}
.apart-hub img{width:80%;height:auto;display:block}
.apart-node{position:absolute;z-index:3;transform:translate(-50%,-50%);cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px;max-width:16ch;padding:10px 14px;
  border:1px solid transparent;border-radius:999px;background:rgba(23,29,19,.6);
  font-family:var(--mono);font-size:clamp(9px,.9vw,10px);letter-spacing:.15em;line-height:1.5;text-transform:uppercase;
  color:var(--ab-dim);transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.apart-node[aria-pressed="true"]{color:var(--bone);border-color:var(--accent);background:rgba(224,86,22,.1)}
.apart-node:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.apart-view{display:grid;perspective:1100px}
.apart-card{grid-area:1 / 1;position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--ab-line);
  opacity:0;visibility:hidden;transform:translateZ(-140px) scale(.95);
  transition:opacity .65s var(--ease),transform .85s var(--ease),visibility .65s}
.apart-card.on{opacity:1;visibility:visible;transform:none}
.apart-card>img{width:100%;height:100%;object-fit:cover;display:block}
.apart-card.doc>img{object-fit:contain;background:#fff;padding:12px 12px 90px}
.apart-card .lg{position:absolute;top:14px;left:14px;height:40px;width:auto;max-width:44%;object-fit:contain;
  padding:6px 9px;border-radius:6px;background:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
.apart-card .txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.6vw,28px);
  background:linear-gradient(to top,rgba(17,23,15,.96) 0%,rgba(17,23,15,.72) 58%,transparent)}
.apart-card h3{font-size:clamp(1.02rem,1.8vw,1.34rem);letter-spacing:-.014em;color:var(--bone)}
.apart-card p{margin-top:8px;font-size:.92rem;line-height:1.55;color:var(--ab-dim)}
/* an institution with no photograph we can use is set as its own record */
.apart-card.logo,.apart-card.record{display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.apart-card.logo .mark{flex:1;display:grid;place-items:center;padding:28px}
.apart-card.logo .mark img{max-width:62%;max-height:120px;width:auto;height:auto}
.apart-card.logo .txt,.apart-card.record .txt{position:static;background:var(--forest-3)}
/* the AGRHI graphic sits whole on its own white ground: contained, never cropped or enlarged */
.apart-card.record{background:#fff}
.apart-card.record .rec-fig{position:relative;flex:1;min-height:0;margin:0}
.apart-card.record .rec-fig img{position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:calc(100% - 32px);max-height:calc(100% - 32px);display:block}
.apart-tabs{display:none}
@media (max-width:640px){
  .apart-net{display:none}
  .apart-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(26px,4vh,38px) 0 clamp(18px,3vh,26px)}
  .apart-tabs .apart-node{position:static;transform:none;max-width:none;border-color:var(--ab-line)}
  .apart-tabs .apart-node[aria-pressed="true"]{border-color:var(--accent)}
  .apart-card{aspect-ratio:auto;min-height:0}
  .apart-card>img{aspect-ratio:3/2;height:auto}
  .apart-card.doc>img{padding:12px}
  .apart-card .txt{position:relative}
  .apart-card.logo .mark{min-height:160px}
  .apart-card.record .rec-fig{flex:none;aspect-ratio:4/5}
}

/* ------------------------------ 09 in the field ------------------------------ */
.afield{height:432vh}
.afield .stage{background:var(--ink-0);perspective:1400px}
.afield-frame{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.afield-fig{position:relative;margin:0;overflow:hidden;border-radius:6px;background:var(--ink-2);
  opacity:var(--o,0);transform:translateZ(var(--z,-800px)) translateX(var(--tx,0px));
  box-shadow:0 70px 150px -54px rgba(0,0,0,.95);filter:brightness(calc(.74 + var(--o,0) * .26))}
.afield-fig img{width:100%;height:100%;object-fit:cover;display:block}
.afield-fig button{position:absolute;inset:0;border:0;background:none;cursor:zoom-in;pointer-events:auto}
.afield-fig button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.afield-frame.wide .afield-fig{width:min(80vw,1100px);aspect-ratio:16/9}
.afield-frame.tall .afield-fig{width:min(34vw,400px);aspect-ratio:3/4}
.afield-frame.square .afield-fig{width:min(52vw,600px);aspect-ratio:1}
.afield-frame.duo{gap:clamp(14px,2vw,26px);grid-auto-flow:column}
.afield-frame.duo .afield-fig{width:min(34vw,420px);aspect-ratio:4/5}
.afield-frame.duo .afield-fig:nth-child(2){transform:translateZ(calc(var(--z,-800px) + 70px)) translateY(6%)}
.afield-cap{position:absolute;z-index:3;left:var(--pad);bottom:clamp(30px,6vh,64px);max-width:min(40ch,60vw);
  opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px))}
.afield-cap .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;color:var(--sand)}
.afield-cap p{margin-top:12px;font-family:var(--display);font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.5;
  letter-spacing:-.014em;color:var(--bone)}
@media (max-width:900px){
  .afield{height:auto}
  .afield .stage{position:static;height:auto;display:block;padding:clamp(30px,6vh,50px) 0}
  .afield-frame{position:relative;inset:auto;display:block;padding:0 var(--pad) clamp(30px,5vh,54px)}
  .afield-frame.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .afield-fig,.afield-frame.wide .afield-fig,.afield-frame.tall .afield-fig,
  .afield-frame.square .afield-fig,.afield-frame.duo .afield-fig{width:100%;opacity:1;transform:none;filter:none;aspect-ratio:4/3}
  .afield-frame.duo .afield-fig:nth-child(2){transform:none}
  .afield-cap{position:relative;left:auto;bottom:auto;opacity:1;transform:none;max-width:none;margin-top:16px}
}

/* ------------------------------ the viewer ------------------------------ */
.alb{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:1fr auto;padding:clamp(14px,3vw,36px);
  background:rgba(12,15,10,.96);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.alb.on{opacity:1;visibility:visible}
/* the photograph is positioned against its cell rather than laid out in it, so
   max-height has a definite box to measure and a tall picture never pushes the bar away */
.alb-img{position:relative;min-height:0}
.alb-img img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;
  display:block;border-radius:4px;opacity:0;transition:opacity .3s var(--ease)}
.alb-img img.ready{opacity:1}
.alb-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:clamp(12px,2vh,20px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ab-dim)}
.alb-bar nav{display:flex;align-items:center;gap:8px}
.alb-bar button{min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--ab-line-2);border-radius:999px;
  background:none;color:var(--bone);cursor:pointer;font-family:var(--mono);font-size:12px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.alb-bar button:hover{border-color:var(--accent);background:rgba(224,86,22,.12)}
.alb-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------ 12 closing ------------------------------ */
.aclose{position:relative;overflow:hidden;background:var(--forest);color:var(--bone);padding:clamp(90px,15vh,190px) var(--pad)}
.aclose-deck{position:absolute;inset:0;z-index:0;perspective:1300px;pointer-events:none}
.aclose-card{position:absolute;left:50%;top:50%;width:min(30vw,340px);aspect-ratio:4/3;border-radius:6px;overflow:hidden;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.9);opacity:calc(.3 + var(--sp,0) * .52);
  transform:translate(-50%,-50%) translate3d(calc(var(--dx,0px) * var(--sp,0)),calc(var(--dy,0px) * var(--sp,0)),calc(var(--dz,0px) * var(--sp,0)))
            rotate(calc(var(--rz,0deg) * var(--sp,0)));
  transition:transform 1.5s var(--ease),opacity 1.5s var(--ease)}
.aclose-card img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.8) saturate(.92)}
.aclose::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(64% 60% at 50% 50%,rgba(54,68,29,.72),rgba(54,68,29,.93) 74%)}
.aclose .wrap{position:relative;z-index:2;text-align:center}
.aclose h2{max-width:16ch;margin-inline:auto;font-size:clamp(2.1rem,6.4vw,5rem);letter-spacing:-.032em;color:var(--bone)}
.aclose .lede{max-width:54ch;margin-inline:auto;text-align:center;color:#D5DBC4}
.aclose .btnrow{justify-content:center;margin-top:clamp(30px,5vh,48px)}
.aclose .btn-2{border-color:rgba(245,239,229,.46);color:var(--bone)}
.aclose .btn-2:hover{border-color:var(--bone)}
@media (max-width:700px){.aclose-card{width:54vw}}

/* ------------------------------ reduced motion ------------------------------
   Nothing important depends on movement: pinned scenes collapse to ordinary
   sections and every photograph is simply present. */
@media (prefers-reduced-motion:reduce){
  .scn{height:auto!important}
  .scn>.stage{position:relative;height:auto;overflow:visible;display:block;padding:clamp(30px,6vh,60px) 0}
  .amorph .stage{height:78vh;padding:0}
  .am-photo{clip-path:none;opacity:1}
  .am-photo img{transform:none;filter:brightness(.82)}
  .am-draw,.am-frame,.am-read{display:none}
  .am-w,.am-w.on{opacity:0}
  .am-w.real,.am-w.real.on{opacity:1;transform:none}
  .am-cap div{color:var(--bone)}
  .ahp{opacity:1;clip-path:none;transform:none!important}
  .ahero-line,.ab-rule{transform:scaleX(1)}
  .anum .n{transform:none!important}
  .anums-row::before{transform:scaleX(1)}
  .anum::before{transform:translateY(-50%) scale(1)}
  .aflow-vis,.aflow-tick,.aflow-photo{display:none}
  .aflow-step{position:relative;left:auto;bottom:auto;opacity:1;transform:none;max-width:none;margin:0 var(--pad) 26px}
  .aflow-step .fig{display:block;margin-top:16px;border-radius:14px;overflow:hidden}
  .aflow-step .fig img{max-height:78vh;object-fit:cover}
  .aflow-step .fig img{width:100%;height:auto;display:block}
  .apf{transform:none!important}
  .arc>.stage{padding:clamp(40px,7vh,70px) 0}
  .arc-scroll{overflow-x:auto}
  .arc-track{transform:none}
  .arc-bar{display:none}
  .amiles .stage{padding:clamp(30px,6vh,60px) 0}
  .ms-rail,.ms-dots{display:none}
  .ms{position:relative;inset:auto;display:block;max-width:none;pointer-events:auto;padding:0 var(--pad) 50px;visibility:visible}
  .ms-text,.ms-media{opacity:1!important;transform:none!important}
  .ms-media{margin-top:20px}
  /* the stage keeps place-items:center from its pinned grid, and block layout honours it,
     which shrinks every frame to its content; put the frames back in ordinary flow */
  .afield .stage{place-items:normal}
  .afield-frame{position:relative;inset:auto;display:block;padding:0 var(--pad) 40px}
  .afield-fig{opacity:1!important;transform:none!important;filter:none!important;margin-inline:auto}
  /* each photograph whole on screen: as wide as the column allows, never taller than the window */
  .afield-frame.wide .afield-fig{width:min(100%,calc(80vh * 16 / 9))}
  .afield-frame.tall .afield-fig{width:min(100%,calc(80vh * 3 / 4))}
  .afield-frame.square .afield-fig{width:min(100%,80vh)}
  .afield-frame.duo{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
  .afield-frame.duo .afield-fig{width:min(calc(50% - 7px),calc(80vh * 4 / 5));margin-inline:0}
  .afield-frame.duo .afield-cap{flex:0 0 100%}
  .afield-cap{position:relative;left:auto;bottom:auto;opacity:1;transform:none;max-width:none;margin-top:14px;text-align:center}
  .aintl-map .arc{stroke-dashoffset:0}
  /* the founder and the journey: everything simply present */
  .fh-in,.fh-name .ln>span,.fh-port img{opacity:1;transform:none;transition:none}
  .fh-glow{transition:none}
  .fh-stage::after{transition:none}
  .fh-beam{animation:none;transition:none}
  /* the journey unpinned: every chapter in turn, under its own heading */
  .fjour{padding-bottom:clamp(44px,8vh,70px)}
  .fj-inner{transform:none}
  .fj-tabs,.fj-next{display:none}
  .fj-panels{display:block}
  .fj-ch{visibility:visible;opacity:1;transition:none}
  .fj-ch+.fj-ch{margin-top:clamp(30px,6vh,44px)}
  .fj-chh{display:flex}
  .fj-ch.on .fj-card{animation:none}
  .aclose-card{opacity:.34}
}


/* ==========================================================================
   Phones: the drawing is fitted rather than cropped (about.js swaps the SVG to
   xMidYMid meet), which lands it at about a quarter of its drawn size. Strokes
   hold their width on their own — they are non-scaling — but the type and the
   points it is pinned to would shrink away with it, so they are drawn larger in
   user units to come back to the same size on screen.
   ========================================================================== */
@media (max-width:860px){
  .am-draw text{font-size:46px;letter-spacing:.06em}
  .am-idea .pt{transform:scale(calc(var(--pt,0) * 3.4))}
  .am-idea .ring{transform-box:fill-box;transform-origin:center;transform:scale(2.6)}
  .am-eng .node{transform:scale(calc(var(--n2,0) * 3.4))}
}