/* About (about/index.html): pictures for the two long stretches of words (14 Oct 2026). Loaded after company.css and
   the page's own <style>; every rule is scoped to main.pg-about and overrides the ab2-* rules without editing them.
   1. "An independent commercial R&D company": a photo beside the words on desktop, after them on phones.
   2. "Where the research lives": a photo beside the four divisions on desktop (they sit two by two),
      and above them on phones, so neither stretch runs past two phone screens without a picture.
   3. Phones only, reordered rather than added: the Bernama video sits after the story's first paragraph, and the car
      photo above the words about the car, which breaks the run from the root diagram to the capability cards. */

main.pg-about .ab2-what{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:56px;align-items:start}
main.pg-about .ab2-what>:not(.ab2-wpic){grid-column:1;max-width:900px}
main.pg-about .ab2-wpic{grid-column:2;grid-row:1/span 3;align-self:center}
main.pg-about .ab2-wpic .ph{width:100%;aspect-ratio:4/5;border-radius:16px}

main.pg-about .ab2-dtray{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:16px;align-items:stretch}
main.pg-about .ab2-dpic{display:flex}
main.pg-about .ab2-dpic .ph{flex:1;width:100%;min-height:300px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-about .ab2-dtray .ab2-divs{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:900px){
  main.pg-about .ab2-what{display:block}
  main.pg-about .ab2-wpic{display:block;margin-top:28px}
  main.pg-about .ab2-wpic .ph{min-height:0;aspect-ratio:16/9}
  main.pg-about .ab2-dtray{display:flex;flex-direction:column;gap:12px}
  main.pg-about .ab2-dpic .ph{min-height:0;aspect-ratio:16/9}
  main.pg-about .ab2-dtray .ab2-divs{grid-template-columns:minmax(0,1fr)}
  main.pg-about .ab2-story{gap:18px}
  main.pg-about .ab2-story .copy{display:contents}
  main.pg-about .ab2-story .copy>*{order:2}
  main.pg-about .ab2-story .copy>:first-child{order:0}
  main.pg-about .ab2-story .ab2-vid{order:1;margin:6px 0}
  main.pg-about .ab2-car .photo{order:-1}
}

/* ===================================================================================================================
   Story style (14 Oct 2026, owner approved six page styles): About is Our story's sister page, REKA's dossier.
   Our story's dark, cinematic ground (palette from assets/story.css, .st-page): big statements, full-width photos, few
   cards, generous space, quotes large. Trays go away (one dark panel stays, for what we are and are not); cards that
   remain are dark with a 1px line; text never sits on a tint. The light header card and the light footer frame the dark
   page, as on Our story. Every word, link and anchor is unchanged; the only markup added is a HUD icon beside each
   division's name (each names a real thing in its sentence) and the dark modifier on the car-lineage diagram.
   Everything here is scoped to main.pg-about and overrides the page's own <style>, company.css and base.css. */
main.pg-about{
  --ab-ink:#161618; --ab-card:#141922; --ab-card2:#1A202A; --ab-line:#252B35; --ab-line2:#343C48;
  --ab-mute:#8C94A3; --ab-text:#B8BFCB; --ab-head:#F4F2EE; --ab-or:#FB9800; --ab-or2:#FFB547;
  --ink:var(--ab-head); --muted:var(--ab-mute); --line:var(--ab-line); --line-2:var(--ab-line2); --brand-text:var(--ab-or2);
  background:var(--ab-ink);color:var(--ab-text);padding-bottom:144px}
/* each division's colour, lightened for the dark ground (the diagram kit's dark accents) */
main.pg-about [data-tone],main.pg-about [data-tone=orange]{--dk:var(--ab-or);--dk-bg:#2A2116}
main.pg-about [data-tone=harmonik]{--dk:#A48BFF;--dk-bg:#201B33}
main.pg-about [data-tone=heuristik]{--dk:#6EA6FF;--dk-bg:#17233A}
main.pg-about [data-tone=kinetik]{--dk:#3CCBB0;--dk-bg:#112A26}
main.pg-about [data-tone=esoterik]{--dk:#E08BC8;--dk-bg:#2C1828}
main.pg-about h2,main.pg-about h3,main.pg-about dt,main.pg-about strong,main.pg-about b{color:var(--ab-head)}
main.pg-about p,main.pg-about .lede{color:var(--ab-text)}
main.pg-about :focus-visible{outline:2px solid var(--ab-or);outline-offset:3px}
main.pg-about .tray,main.pg-about .tray[data-tone],main.pg-about .tray.ink{background:none;border-radius:0;padding:0;color:inherit}
main.pg-about .blk.chap{padding-top:152px}
main.pg-about .chap-head{max-width:980px;margin-bottom:56px}
main.pg-about .chap-head h2{font-size:64px;line-height:1.04}
main.pg-about .chap-head .lead,main.pg-about .chap-head p{color:var(--ab-text)}
main.pg-about .ab2-tlink{color:var(--ab-head);border-bottom-color:var(--ab-or)}
main.pg-about .ab2-tlink:hover{color:var(--ab-or2)}
main.pg-about .lead a,main.pg-about .ab2-vid a{color:var(--ab-head);border-bottom:1px solid var(--ab-or)}
main.pg-about .lead a:hover,main.pg-about .ab2-vid a:hover{color:var(--ab-or2)}

/* the opening (23 Oct 2026, owner: "start with the word REKA from our logo wordmark, then Enable people to create"):
   the wordmark artwork across the page, the mission under it, then what the word means, the team beside it */
main.pg-about .ab2-open{padding:184px 0 0}
main.pg-about .ab2-open h1{margin:0;max-width:none;font:inherit;letter-spacing:normal}
main.pg-about .ab2-wm{display:block;width:100%;height:auto;overflow:hidden}
main.pg-about .ab2-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
main.pg-about .ab2-mline{display:block;margin-top:clamp(28px,3.4vw,52px);font:600 clamp(40px,6.1vw,92px)/1 var(--sans);letter-spacing:-.045em;color:var(--ab-or);text-wrap:balance}  /* orange by the owner's decision (14 Oct 2026) */
main.pg-about .ab2-hero p.ab2-mlede{max-width:760px;margin-top:32px;font-size:21px;line-height:1.6;color:var(--ab-text);text-wrap:pretty}
main.pg-about .ab2-hgrid{margin-top:112px;align-items:center}
main.pg-about .ab2-hcopy{display:grid;gap:22px}
main.pg-about .ab2-one{font:600 44px/1.06 var(--sans);letter-spacing:-.035em;color:var(--ab-head);text-wrap:balance}
main.pg-about .ab2-hero p{color:var(--ab-text);font-size:21px;margin-top:0;max-width:640px}
main.pg-about .ab2-hero p.ab2-one{color:var(--ab-head);font-size:44px}
main.pg-about .ab2-hero p b{color:var(--ab-head)}
main.pg-about .ab2-hpic .ph{border-radius:28px}
/* entrance: the four letters rise out of their own line, one after another, then the mission, then the rest.
   motion.js fades the first section's h1 and paragraphs on load; on this page the letters do that job, so its
   inline styles are overruled here (an !important rule beats a non-important inline style). */
main.pg-about .ab2-open h1,main.pg-about .ab2-open p{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:no-preference){
  main.pg-about .ab2-wm use{transform-box:fill-box;animation:abWm 1.05s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(120ms + var(--i) * 95ms)}
  main.pg-about .ab2-mline{animation:abUp .9s cubic-bezier(.2,.75,.15,1) .72s both}
  main.pg-about .ab2-orest{animation:abUp .9s cubic-bezier(.2,.75,.15,1) .95s both}
}
@keyframes abWm{from{transform:translateY(104%)}}
@keyframes abUp{from{opacity:0;transform:translateY(22px)}}

/* the root (23 Oct 2026): the words, then the root system they describe, drawn as it is scrolled into view. Every
   label is HTML (the drawing is aria-hidden); each sits at a point of the drawing given in its own coordinates
   (--x/--y on 1200 x 600 on desktop, --mx/--my on 360 x 1240 on phones), so drawing and words stay locked together */
main.pg-about .ab2-r{padding-top:184px}
main.pg-about .ab2-root{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px;align-items:start}
main.pg-about .ab2-root h2{font-size:64px;line-height:1.02}
main.pg-about .ab2-root .copy{margin-top:8px}
main.pg-about .ab2-tree{--harmonik:#A48BFF;--kinetik:#3CCBB0;--heuristik:#6EA6FF;--esoterik:#E08BC8;--antarax:var(--ab-head);margin:0}
main.pg-about .tw-plot{position:relative;aspect-ratio:1200/600;margin:150px 0 140px}
main.pg-about .tw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
main.pg-about .tw-m{display:none}
main.pg-about .tw-svg path{fill:none;stroke-linecap:round}
main.pg-about .tw-svg .up{stroke:var(--ab-head)}
main.pg-about .tw-svg .dn{stroke:var(--ab-or)}
main.pg-about .tw-svg .hair{opacity:.5}
main.pg-about .tw-svg .rule{stroke:var(--ab-line2);stroke-linecap:butt}
main.pg-about .tw-svg circle.up{fill:var(--c);stroke:var(--ab-ink);stroke-width:5}
main.pg-about .tw-svg circle.dn{fill:var(--ab-or);stroke:var(--ab-ink);stroke-width:4}
main.pg-about .tw-list{list-style:none;margin:0;padding:0}
main.pg-about .tw-list li{--s:var(--ds);position:absolute;left:calc(var(--x) * 100% / 1200);top:calc(var(--y) * 100% / 600);width:19%;max-width:230px;text-align:center}
main.pg-about .tw-crown li{transform:translate(-50%,calc(-100% - 20px))}
main.pg-about .tw-roots li{transform:translate(-50%,16px)}
main.pg-about .tw-list b,main.pg-about .tw-list strong,main.pg-about .tw-list span{display:block}
main.pg-about .tw-crown a{display:block;color:var(--ab-text);border-radius:8px}
main.pg-about .tw-crown b{font:600 21px/1.2 var(--sans);letter-spacing:-.015em;color:var(--dk,var(--ab-head))}
main.pg-about .tw-crown li[data-tone=antarax]{--dk:var(--ab-head)}
main.pg-about .tw-crown a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
main.pg-about .tw-crown span{margin-top:4px;font-size:15px;line-height:1.45;color:var(--ab-text)}
main.pg-about .tw-roots b{font:600 14px/1.2 var(--mono);color:var(--ab-or2)}
main.pg-about .tw-roots strong{margin-top:6px;font:600 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ab-head)}
main.pg-about .tw-roots span{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--ab-text)}
main.pg-about .tw-k,main.pg-about .tw-trunk{--s:var(--ds);position:absolute;top:50%;margin:0;font:500 13px/1.4 var(--mono);letter-spacing:.02em;color:var(--ab-mute)}
main.pg-about .tw-k{left:0;max-width:24%}
main.pg-about .tw-k-up{transform:translateY(calc(-100% - 12px))}
main.pg-about .tw-k-down{transform:translateY(12px)}
main.pg-about .tw-trunk{left:calc(620 * 100% / 1200);max-width:30%;transform:translateY(calc(-100% - 12px));color:var(--ab-text)}
main.pg-about .ab2-tree figcaption{max-width:760px;margin:0 auto;text-align:center;font-size:16px;line-height:1.6;color:var(--ab-mute)}
main.pg-about .ab2-tree figcaption .ab2-tlink{font-size:16px}
/* growing: only once the script has added .is-growing, so without it the drawing is complete */
main.pg-about .ab2-tree.is-growing .tw-svg path{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0, (var(--g, 0) - var(--s)) * var(--k), 1));opacity:clamp(0, (var(--g, 0) - var(--s)) * 300, 1)}
main.pg-about .ab2-tree.is-growing .tw-svg .hair{opacity:clamp(0, (var(--g, 0) - var(--s)) * 300, .5)}
main.pg-about .ab2-tree.is-growing .tw-svg circle{transform-box:fill-box;transform-origin:50% 50%;transform:scale(clamp(0, (var(--g, 0) - var(--s)) * var(--k), 1))}
main.pg-about .ab2-tree.is-growing .tw-list li,main.pg-about .ab2-tree.is-growing .tw-k,main.pg-about .ab2-tree.is-growing .tw-trunk{opacity:clamp(0, (var(--g, 0) - var(--s)) * 12, 1);translate:0 calc((1 - clamp(0, (var(--g, 0) - var(--s)) * 12, 1)) * 10px)}
@media (prefers-reduced-motion:reduce){
  main.pg-about .ab2-tree .tw-svg path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  main.pg-about .ab2-tree .tw-svg circle{transform:none!important}
  main.pg-about .ab2-tree .tw-list li,main.pg-about .ab2-tree .tw-k,main.pg-about .ab2-tree .tw-trunk{translate:none!important}
}
@media (max-width:1200px){
  main.pg-about .tw-crown b{font-size:19px}
  main.pg-about .tw-crown span,main.pg-about .tw-roots span{font-size:14px}
  main.pg-about .tw-trunk{max-width:36%;font-size:12px}
  main.pg-about .tw-k{font-size:12px}
}
@media (max-width:900px){
  main.pg-about .tw-plot{aspect-ratio:360/1240;max-width:520px;margin:96px auto 72px}
  main.pg-about .tw-d{display:none}
  main.pg-about .tw-m{display:block}
  main.pg-about .tw-list li{--s:var(--ms);left:calc(var(--mx) * 100% / 360);top:calc(var(--my) * 100% / 1240);width:47%;max-width:none}
  main.pg-about .tw-list li[data-m=l]{left:0;text-align:left}
  main.pg-about .tw-list li[data-m=r]{left:auto;right:0;text-align:right}
  main.pg-about .tw-list li[data-m=c]{width:64%}
  main.pg-about .tw-crown li[data-m=l],main.pg-about .tw-crown li[data-m=r]{transform:translateY(calc(-100% - 12px))}
  main.pg-about .tw-crown li[data-m=c]{transform:translate(-50%,calc(-100% - 14px))}
  main.pg-about .tw-roots li[data-m=l],main.pg-about .tw-roots li[data-m=r]{transform:translateY(10px)}
  main.pg-about .tw-roots li[data-m=c]{transform:translate(-50%,12px)}
  main.pg-about .tw-crown b{font-size:17px}
  main.pg-about .tw-crown span{margin-top:2px;font-size:13.5px;line-height:1.4}
  main.pg-about .tw-roots b{font-size:12.5px}
  main.pg-about .tw-roots strong{margin-top:4px;font-size:15px}
  main.pg-about .tw-roots span{margin-top:2px;font-size:13.5px;line-height:1.4}
  main.pg-about .tw-k,main.pg-about .tw-trunk{--s:var(--ms);top:calc(640 * 100% / 1240);font-size:12px}
  main.pg-about .tw-k{max-width:44%}
  main.pg-about .tw-trunk{left:auto;right:0;max-width:44%;text-align:right}
  main.pg-about .ab2-tree figcaption{font-size:15px;text-align:left}
}
main.pg-about .ab2-think{margin-top:120px}
main.pg-about .ab2-think h3{font-size:28px}
main.pg-about .ab2-think dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin-top:28px}
main.pg-about .ab2-think dl>div{background:none;border-radius:0;box-shadow:none;padding:22px 0 0;border-top:1px solid var(--ab-line2)}
main.pg-about .ab2-think dt{font-size:20px}
main.pg-about .ab2-think dd{color:var(--ab-text);font-size:16px;margin-top:10px}

/* Our story: the drive set large as a quote, the interview beside it, then the years */
main.pg-about .ab2-story{gap:72px;align-items:center}
main.pg-about .ab2-story .copy{gap:22px}
main.pg-about .ab2-story .pull{font:500 32px/1.3 var(--sans);letter-spacing:-.02em;color:var(--ab-head);border-left:3px solid var(--ab-or);padding-left:24px;margin:8px 0}
main.pg-about .ab2-vid .ph{border-radius:20px}
main.pg-about .ab2-vid p{color:var(--ab-mute)}
main.pg-about .ab2-tl{margin-top:96px}
main.pg-about .ab2-tl li::before{background:var(--ab-line2);opacity:1}
main.pg-about .ab2-tl li[data-tone]::after{background:var(--dk)}
main.pg-about .ab2-tl li[data-tone] b{color:var(--dk)}
main.pg-about .ab2-tl span{color:var(--ab-mute)}

/* the car: the photo across the page, the two paragraphs side by side under it, then the lineage on the dark plate */
main.pg-about .ab2-car{grid-template-columns:minmax(0,1fr);gap:48px}
main.pg-about .ab2-car .photo{order:-1;aspect-ratio:21/9;border-radius:28px;background:var(--ab-card)}
main.pg-about .ab2-car .photo img{object-position:50% 38%}
main.pg-about .ab2-car .copy{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 72px;align-items:start}
main.pg-about .ab2-car .copy p:first-child{font-size:21px;line-height:1.55;color:var(--ab-head)}
main.pg-about .ab2-car+.dgm{margin-top:72px}
main.pg-about .dgm.dark{border-radius:28px;box-shadow:inset 0 0 0 1px var(--ab-line);
  --harmonik:#A48BFF;--harmonik-bg:#241D3F;--harmonik-ink:#C6B7FF;
  --heuristik:#6EA6FF;--heuristik-bg:#1B2943;--heuristik-ink:#9DC2FF;
  --kinetik:#3CCBB0;--kinetik-bg:#11302A;--kinetik-ink:#7FE0CD;
  --esoterik:#E08BC8;--esoterik-bg:#33192C;--esoterik-ink:#F0B5DF}

/* what we are, and are not: the one dark panel; the claim set large; the two lists side by side */
main.pg-about .ab2-w .tray.ink{background:var(--ab-card);border-radius:40px;padding:72px;box-shadow:inset 0 0 0 1px var(--ab-line)}
main.pg-about .ab2-w h2{color:var(--ab-head);font-size:52px;line-height:1.06}
main.pg-about .ab2-w .ab2-what p{color:var(--ab-text)}
main.pg-about .ab2-w .ab2-what p.claim{font:500 25px/1.42 var(--sans);letter-spacing:-.015em;color:var(--ab-head);border-left:3px solid var(--ab-or);padding-left:24px;margin-top:32px}
main.pg-about .ab2-wpic .ph{border-radius:20px}
main.pg-about .ab2-w .ab2-vs{gap:24px;margin-top:64px}
main.pg-about .ab2-w .ab2-vs>div{background:var(--ab-ink);border-radius:24px;padding:32px 32px 16px;box-shadow:inset 0 0 0 1px var(--ab-line2)}
main.pg-about .ab2-w .ab2-vs>.are{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ab-or) 55%,var(--ab-line2))}
main.pg-about .ab2-w .ab2-vs h3{font-size:22px;color:var(--ab-mute)}
main.pg-about .ab2-w .ab2-vs .are h3{color:var(--ab-or)}
main.pg-about .ab2-w .ab2-vs li{color:var(--ab-head);border-top:1px solid var(--ab-line);font-size:17px;padding:14px 0}
main.pg-about .ab2-w .ab2-vs .not li{color:var(--ab-mute)}
main.pg-about .ab2-w .ab2-vs>.are li{border-top-color:color-mix(in srgb,var(--ab-or) 22%,var(--ab-line))}

/* the four divisions: the lab across the page, then the four as one set, each in its own colour */
main.pg-about .ab2-dtray{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
main.pg-about .ab2-dpic .ph{min-height:0;aspect-ratio:21/9;border-radius:28px;box-shadow:none}
main.pg-about .ab2-dtray .ab2-divs{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
main.pg-about .ab2-divs li,main.pg-about .ab2-divs li[data-tone]{background:var(--ab-card);border-radius:24px;padding:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dk) 40%,var(--ab-line))}
main.pg-about .ab2-divs li[data-tone]:hover{background:var(--ab-card2);box-shadow:inset 0 0 0 1px var(--dk),0 18px 40px -24px var(--dk)}
main.pg-about .ab2-divs li a{padding:28px 24px 26px;color:var(--ab-text)}
main.pg-about .ab2-divs li a:hover{box-shadow:none;transform:none}
main.pg-about .ab2-divs .hi{width:36px;height:36px;color:var(--dk);margin-bottom:22px}
main.pg-about .ab2-divs b,main.pg-about .ab2-divs li[data-tone] b{font-size:32px;color:var(--dk)}
main.pg-about .ab2-divs strong{margin-top:10px;font-size:16px;color:var(--ab-head)}
main.pg-about .ab2-divs span{color:var(--ab-text);margin-top:8px}
main.pg-about .ab2-divs .more{color:var(--ab-head);padding-top:22px}

/* partners: the logo wall on light tiles, so every mark reads in its own colours */
main.pg-about .ab2-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
main.pg-about .ab2-logos li{min-height:104px;padding:0 20px;border-radius:20px;background:#fff;box-shadow:none;color:#1D1D1D}
main.pg-about .ab2-logos li img{padding:20px 22px;box-sizing:border-box}
main.pg-about .ab2-logos li:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}

/* more about REKA: five dark cards in one row */
main.pg-about .ab2-morelist{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
main.pg-about .ab2-morelist li[data-tone] a{margin-inline:0;padding-inline:22px}
main.pg-about .ab2-morelist .card{background:var(--ab-card);color:var(--ab-text);box-shadow:inset 0 0 0 1px var(--ab-line)}
main.pg-about .ab2-morelist .card .tt{color:var(--dk)}
main.pg-about .ab2-morelist .card .sub{color:var(--ab-text)}
main.pg-about .ab2-morelist .card .code{color:var(--ab-mute)}
main.pg-about .ab2-morelist .corner{background:var(--dk-bg);color:var(--dk)}
main.pg-about .ab2-morelist a.card:hover,main.pg-about .ab2-morelist a.card:focus-visible{background:var(--ab-card2);box-shadow:inset 0 0 0 1.5px var(--dk),0 16px 32px -24px var(--dk)}
main.pg-about .ab2-morelist a.card:hover .corner,main.pg-about .ab2-morelist a.card:focus-visible .corner{background:var(--dk);color:#161618}
main.pg-about .ab2-morelist a.card::after{--c:var(--dk)}

/* REKA, in short: calm, open rows on the dark ground */
main.pg-about .ab2-faq{gap:0 56px;max-width:1080px;margin:0 auto}
main.pg-about .ab2-faq .col{background:none;border-radius:0;box-shadow:none;padding:0;border-top:1px solid var(--ab-line2)}
main.pg-about .faq details,main.pg-about .ab2-faq .col details:last-child{border-bottom:1px solid var(--ab-line2)}
main.pg-about .faq summary{color:var(--ab-head);font-size:18px;min-height:68px}
main.pg-about .faq summary:hover{color:var(--ab-or2)}
main.pg-about .faq summary svg{color:var(--ab-or)}
main.pg-about .faq details p{color:var(--ab-text)}
main.pg-about .faq details a{color:var(--ab-head);border-bottom-color:var(--ab-or)}

@media (max-width:1200px){
  main.pg-about .ab2-morelist{grid-template-columns:repeat(3,minmax(0,1fr))}
  main.pg-about .ab2-think dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
  main.pg-about .ab2-dtray .ab2-divs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  main.pg-about{padding-bottom:88px}
  main.pg-about .blk.chap{padding-top:96px}
  main.pg-about .chap-head{margin-bottom:32px}
  main.pg-about .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-about .ab2-open{padding:132px 0 0}
  main.pg-about .ab2-mline{font-size:clamp(38px,11.4vw,64px);line-height:1.02}
  main.pg-about .ab2-hero p.ab2-mlede{font-size:18px;margin-top:24px}
  main.pg-about .ab2-hgrid{margin-top:64px}
  main.pg-about .ab2-hcopy{gap:16px}
  main.pg-about .ab2-hero p{font-size:18px}
  main.pg-about .ab2-hero p.ab2-one{font-size:30px;line-height:1.1}
  main.pg-about .ab2-hpic .ph{border-radius:20px}
  main.pg-about .ab2-r{padding-top:120px}
  main.pg-about .ab2-root{gap:24px}
  main.pg-about .ab2-root h2{font-size:38px;line-height:1.08}
  main.pg-about .ab2-root .copy{margin-top:0}
  main.pg-about .ab2-think{margin-top:64px}
  main.pg-about .ab2-think dl{grid-template-columns:minmax(0,1fr);gap:20px}
  main.pg-about .ab2-think dl>div{padding-top:18px}
  main.pg-about .ab2-story{gap:20px}
  main.pg-about .ab2-story .pull{font-size:24px;padding-left:18px;margin:4px 0}
  main.pg-about .ab2-logos li img{padding:14px 16px}
  main.pg-about .ab2-tl{margin-top:56px}
  main.pg-about .ab2-car{gap:28px}
  main.pg-about .ab2-car .photo{aspect-ratio:16/10;border-radius:20px}
  main.pg-about .ab2-car .copy{grid-template-columns:minmax(0,1fr);gap:18px}
  main.pg-about .ab2-car .copy p:first-child{font-size:18px}
  main.pg-about .ab2-car+.dgm{margin-top:40px}
  main.pg-about .dgm.dark{border-radius:20px}
  main.pg-about .ab2-w .tray.ink{border-radius:28px;padding:28px 20px}
  main.pg-about .ab2-w h2{font-size:34px}
  main.pg-about .ab2-w .ab2-what p.claim{font-size:20px;padding-left:18px}
  main.pg-about .ab2-w .ab2-vs{margin-top:40px;gap:12px}
  main.pg-about .ab2-w .ab2-vs>div{padding:22px 20px 8px;border-radius:20px}
  main.pg-about .ab2-dtray{gap:12px}
  main.pg-about .ab2-dpic .ph{aspect-ratio:16/10;border-radius:20px}
  main.pg-about .ab2-dtray .ab2-divs{grid-template-columns:minmax(0,1fr);gap:12px}
  main.pg-about .ab2-divs li a{padding:22px 20px}
  main.pg-about .ab2-divs .hi{margin-bottom:14px}
  main.pg-about .ab2-divs b,main.pg-about .ab2-divs li[data-tone] b{font-size:28px}
  main.pg-about .ab2-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  main.pg-about .ab2-logos li:last-child:nth-child(odd){grid-column:1/-1}
  main.pg-about .ab2-logos li{min-height:80px;border-radius:16px}
  main.pg-about .ab2-morelist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  main.pg-about .ab2-morelist li[data-tone] a{padding:16px}
  main.pg-about .ab2-morelist .card .tt{font-size:17px}
  main.pg-about .ab2-morelist .card .sub{font-size:13.5px;line-height:19px}
  main.pg-about .ab2-morelist .card-foot .code{display:none}
  main.pg-about .ab2-faq{grid-template-columns:minmax(0,1fr)}
  main.pg-about .ab2-faq .col+.col{border-top:0}
  main.pg-about .faq summary{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  main.pg-about .ab2-divs li[data-tone]:hover,main.pg-about .ab2-morelist a.card:hover{transform:none}
}