/* CognaOne website V3. Built from Home mock-up v14 and the brandbook (design/brand).
   Order: tokens, base, header and menu, hero, sections, elements, laptop, close and footer, responsive, motion. */

/* ---------- tokens ---------- */
:root{
  --bg:#FFFFFF; --band:#F6F5F2; --card:#F6F5F2; --ink:#141414; --soft:#86837E; --line:#E6E4E0;
  --orange:#F05A24;
  --dark:#141414; --dark-grid:rgba(255,255,255,.075); --dark-soft:#B9B4AD; --dark-faint:#9A958F;
  --hero:var(--dark); --grid:var(--dark-grid);
  /* section backgrounds are solid fills: no gradients, no separator lines (Bone, adopted 8 Oct 2026) */
  --tint:#F6F5F2; --tint-tile:#FFFFFF;
  --pad:clamp(20px,4vw,48px); --wrap:1240px; --lg:20px; --hh:88px;
  /* header and hero edge: keeps the same offset from the content column that a 14 inch screen has, at any width */
  --edge:max(var(--pad), calc((100vw - var(--wrap))/2 + var(--pad) - 136px));
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{
  --bg:#0C0B0D; --band:#171615; --card:#171615; --ink:#F4F2EE; --soft:#8F8A84; --line:#2A2826;
  --dark:#000000;
  --tint:#171615; --tint-tile:#1E1D1F;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--hh));scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,p{margin:0}
h1{font-weight:300;font-size:clamp(44px,6.4vw,92px);line-height:1.04;letter-spacing:-.04em}
h1 strong{font-weight:600}
h2{font-weight:400;font-size:clamp(32px,3.7vw,54px);line-height:1.1;letter-spacing:-.028em}
h3{font-weight:600;font-size:18px;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.sub{color:var(--soft);font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.sec{padding:clamp(88px,11vw,168px) 0}
.sec.flush{padding-top:0}
.band{background:var(--band)}
.sec.tint{background:var(--tint)}
.sec.tint .tile{background:var(--tint-tile)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:10px;font-size:15px;font-weight:500;border:1px solid transparent;white-space:nowrap}
.btn.pri{background:var(--orange);color:#fff}
.btn.ink{background:var(--ink);color:var(--bg)}
.btn.ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn.sm{height:40px;padding:0 16px;font-size:14px}
.links{display:flex;gap:28px;flex-wrap:wrap;margin-top:36px;font-size:16px;font-weight:500}
.links a{border-bottom:1px solid var(--line);padding-bottom:2px}
.links a:hover{border-color:var(--orange)}

/* ---------- floating header and menu ---------- */
.xh{position:fixed;z-index:50;top:env(safe-area-inset-top,0px);left:0;right:0;height:var(--hh);pointer-events:none;--fg:var(--ink);--ln:color-mix(in srgb,var(--ink) 24%,transparent);--r:0;--fd:0}
.xh.on-light{--fg:#141414;--ln:rgba(20,20,20,.24)}
.xh.on-dark{--fg:#fff;--ln:rgba(255,255,255,.32)}
.xh-in{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge)}
/* the logo sits 23% closer to the left edge than the hero text (laptops and larger); the menu button keeps the full edge */
@media (min-width:901px){.xh-in{padding-left:calc(var(--edge)*.77)}}
.xh-in>*{pointer-events:auto}
.xh-lg{display:inline-flex;align-items:center;color:var(--fg);transition:color .3s}
.xh-mark{height:var(--lg);width:auto;fill:var(--orange);flex:none;transform:scale(calc(1 + var(--r)*.08));transform-origin:left center;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.xh-lg:hover .xh-mark{transform:rotate(-6deg) scale(1.05)}
.xh-word{display:inline-block;height:var(--lg);overflow:hidden;width:calc(var(--lg)*5.5418*(1 - var(--r)));margin-left:calc(var(--lg)*.3*(1 - var(--r)));opacity:calc(1 - var(--fd)*.45)}
.xh-word svg{height:var(--lg);width:calc(var(--lg)*5.5418);display:block;fill:currentColor;overflow:visible;max-width:none}
.xh-word g{transform-box:fill-box;transform-origin:center;transform:translateX(calc(var(--lr,0)*-120%)) rotate(calc(var(--lr,0)*-14deg));opacity:calc(1 - var(--lr,0))}
.xh-ctl{position:relative;display:flex;align-items:center}
.xh-dock{display:flex;align-items:center;gap:6px}
.xh-btn{width:42px;height:42px;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--fg);background:transparent;border:1.5px solid var(--ln);border-radius:2px;transition:border-color .25s,color .3s;position:relative;z-index:1}
.xh-btn:hover{border-color:var(--fg)}
.xh-g{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:18px;height:18px;transition:transform .45s,gap .2s}
.xh-g i{width:4px;height:4px;margin:auto;background:currentColor;transition:opacity .25s,transform .3s}
.xh-btn:hover .xh-g{gap:2px}
.xh-btn:hover .xh-g i{transform:scale(1.25)}
.xh.open .xh-g{transform:rotate(90deg)}
.xh.open .xh-g i:nth-child(2n){opacity:0;transform:scale(0)}
.xh-tg{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;color:var(--fg);transform:translateX(46px) scale(.7);opacity:0;transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .25s,color .3s}
.xh-dock:hover .xh-tg,.xh-dock:focus-within .xh-tg,.xh.open .xh-tg{transform:none;opacity:1}
@media (hover:none){.xh-tg{transform:none;opacity:1}}
.xh-menu{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px}
.xh:not(.open) .xh-menu{pointer-events:none}
.xh-items,.xh-acts{display:flex;align-items:center;gap:2px}
.xh-acts{gap:8px;margin-left:16px}
.xh-items a,.xh-acts .btn{opacity:0;transform:translateX(24px);transition:opacity .3s calc((6 - var(--i))*35ms),transform .4s cubic-bezier(.3,1.2,.5,1) calc((6 - var(--i))*35ms),background .15s,border-color .15s,color .3s}
.xh.open .xh-items a,.xh.open .xh-acts .btn{opacity:1;transform:none}
.xh-top{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 14px;white-space:nowrap;font-size:15px;font-weight:500;color:var(--fg)}
.xh-top::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1.5px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.xh-top:hover::after,.xh-top.act::after{transform:scaleX(1)}
.xh-out{border:1.5px solid var(--ln);color:var(--fg);border-radius:2px;height:40px}
.xh-out:hover{border-color:var(--fg)}
.xh-ink{background:var(--fg);color:var(--bg);border-radius:2px;height:40px}
.xh.on-dark .xh-ink{color:#141414}
.xh.on-light .xh-ink{color:#fff}
.xh-sub{position:absolute;top:calc(100% + 16px);left:0;background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.14);padding:28px 32px 30px;display:grid;grid-auto-flow:column;gap:48px;animation:xhsub .22s ease}
.xh-sub[hidden]{display:none}
@keyframes xhsub{from{opacity:0;transform:translateY(-6px)}}
.xh-sub .gt{display:block;font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.xh-sub .grp + .grp{margin-top:22px}
.xh-sub a{display:block;padding:9px 0;min-width:230px;border-top:1px solid var(--line)}
.xh-sub a b{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.005em}
.xh-sub a small{display:block;font-size:13.5px;color:var(--soft);margin-top:1px}
.xh-sub a:hover b{color:var(--orange)}

/* ---------- hero: control matrix ---------- */
.hero{background:var(--hero);color:#fff;position:relative;overflow:hidden}
.hero-space{height:var(--hh)}
/* the hero fills the screen: full height of the window less the header strip */
.stage{position:relative;height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));min-height:520px;border-top:1px solid var(--grid)}
#grid{position:absolute;inset:0;display:grid}
#grid i{border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);transition:background-color .9s ease}
#grid i.d{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.085) 0 1px,transparent 1px 7px)}
#grid i.e{background-color:transparent}
#grid i.a{background-color:var(--orange)}
.rule{position:absolute;top:0;bottom:0;width:2px;background:var(--orange);z-index:1;transform-origin:top;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .5s}
.rule.on{transform:scaleY(1)}
/* pillar tile: sits on the grid right of the authority line; slides open from one edge and shut at the other */
.ptile{position:absolute;z-index:2;overflow:hidden;background:var(--hero);border:1px solid var(--grid);
  transition:left .49s cubic-bezier(.45,.05,.2,1),top .49s cubic-bezier(.45,.05,.2,1),width .49s cubic-bezier(.45,.05,.2,1),height .49s cubic-bezier(.45,.05,.2,1),border-color .26s ease}
.ptile:not(.open){border-color:transparent}
.ptile-in{position:absolute;left:0;top:0;display:flex;flex-direction:column;justify-content:center;gap:.5em}
.ptile-lab{color:var(--orange);white-space:nowrap}
.ptile-word{font-weight:300;letter-spacing:-.035em;line-height:1.15;white-space:nowrap}
.ptile-word span{display:inline-block}
.ptile-word span.fin{font-weight:600}
.ptile-word span.plus{color:var(--orange);font-weight:400}
/* small pause, resume and replay control for the pillar tiles, bottom right; the legend moves left to make room */
.pctl{position:absolute;z-index:2;right:var(--edge);bottom:22px;width:36px;height:36px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--hero);color:inherit;border:1px solid var(--grid);border-radius:2px;opacity:.7;transition:opacity .2s ease}
.pctl[hidden]{display:none}
.pctl:hover,.pctl:focus-visible{opacity:1}
.pctl:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.stage.has-pctl .legend{right:calc(var(--edge) + 46px)}
/* Hero text. Type follows the smaller of the window's width and height, so a short laptop window gets a calmer headline. */
.copy{position:absolute;z-index:2;left:0;background:var(--hero);border:1px solid var(--grid);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,4.4vh,52px) clamp(28px,3.4vw,56px);max-width:92%}
.copy h1{font-size:calc(clamp(40px,min(5.2vw,10vh),132px) * var(--hs,1))}
.copy p{color:#FFFFFF;font-size:max(15px,calc(clamp(16.5px,min(1.5vw,2.9vh),25px) * (1 - (1 - var(--hs,1)) / 2)));max-width:31em;margin-top:.9em}
@media (min-width:901px){
  .hero:not(.phero) .copy h1{white-space:nowrap}
  .hero:not(.phero) .copy h1 strong{display:block}
  .phero .copy{max-width:min(1040px,72vw)}
}
/* Home eyebrow above the headline */
.hero:not(.phero) .copy .eyebrow{display:block;margin-bottom:clamp(12px,2vh,20px)}
/* Home headline: three lines at every size (Scale AI / across your / critical operations.), slightly opened letter spacing */
/* every hero headline (Home and inner pages): slightly opened letter spacing, the site standard */
.hero .copy h1{letter-spacing:-.012em}
.hero:not(.phero) .copy h1 .l1,.hero:not(.phero) .copy h1 strong{display:block}
/* S73: inner heroes take Home's three-line headline (lead, link, bold payoff) */
.phero .copy h1 .l1,.phero .copy h1 strong{display:block}
.copy .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,3.4vh,34px)}
/* Home hero text block (S40): the message sits in the cube row above the block, on the text line; inside the block the
   spacing follows the cube size (--cell, set by the hero script): tight above the headline, a cube between headline and
   line, then the buttons. Buttons: solid (white on dark, ink on light), outlined, then the film; all at the 10px radius */
.hero:not(.phero) .copy{--cell:64px;padding-top:calc(var(--cell) * .62);padding-bottom:calc(var(--cell) * .74)}
.hero:not(.phero) .copy h1{margin-left:-.045em}
.hero:not(.phero) .copy p{margin-top:calc(var(--sp,var(--cell)) * .95);opacity:.74;max-width:min(31em,max(22em,var(--hw,31em)))}
.hero:not(.phero) .copy .cta{margin-top:calc(var(--sp,var(--cell)) * .8)}
.hmeta{position:absolute;left:var(--plx,56px);top:calc(-1 * var(--cell) - 1px);height:var(--cell);display:flex;align-items:center;gap:16px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:.8;pointer-events:none}
.hmeta i{flex:none;width:9px;height:9px;background:var(--orange);margin-right:4px}
.hmeta b{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
.btn.inv{background:#fff;border-color:#fff;color:#141414;gap:10px}
.btn.inv svg{transition:transform .2s ease}
.btn.inv:hover svg,.btn.inv:focus-visible svg{transform:translateX(3px)}
:root[data-hero="light"][data-theme="light"] .hero .btn.inv{background:#141414;border-color:#141414;color:#fff}
@media (max-width:900px){
  .hero:not(.phero) .copy{padding-top:28px;padding-bottom:30px}
  .hmeta{position:static;height:auto;margin-bottom:18px;font-size:11px;gap:12px;flex-wrap:wrap;white-space:normal}
  .hero:not(.phero) .copy p{margin-top:18px}
  .hero:not(.phero) .copy .cta{margin-top:26px}
}
@media (max-width:700px){.hmeta{font-size:10.5px;letter-spacing:.08em;gap:8px;flex-wrap:nowrap;white-space:nowrap}.hmeta i{width:7px;height:7px;margin-right:2px}}

.legend{position:absolute;z-index:2;right:var(--edge);bottom:22px;display:flex;gap:22px;flex-wrap:wrap;background:var(--hero);padding:8px 12px;border:1px solid var(--grid)}
.legend span{display:inline-flex;align-items:center;gap:8px;color:var(--dark-faint)}
.legend b{width:12px;height:12px;display:inline-block;border:1px solid rgba(255,255,255,.25)}
/* white cubes are declared, striped cubes evidenced, orange governed */
.legend .d b{background:transparent}
.legend .e b{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 1px,transparent 1px 4px)}
.legend .a b{background:var(--orange);border-color:var(--orange)}
/* Home hero: the matrix runs full width; the text block and the legend and control line up with the text column of the
   sections below. --coll and --colr (set by the hero script from a section .wrap) are those column edges inside the stage */
.hero:not(.phero) .pctl{right:var(--grpr,var(--colr,var(--edge)))}
.hero:not(.phero) .legend{right:calc(var(--grpr,var(--colr,var(--edge))) + 23px)}
.hero:not(.phero) .stage.has-pctl .legend{right:calc(var(--grpr,var(--colr,var(--edge))) + 46px)}
/* --grpr (set by the hero script) centres the legend and control together in the space right of the authority line;
   lg-tight is the compact legend for narrow laptops. Without --grpr they end on the column's right line */
.hero:not(.phero) .stage.lg-tight .legend{gap:12px;padding:8px 10px;font-size:11px;letter-spacing:.05em}
.hero:not(.phero) .stage.lg-tight .legend span{gap:6px}
.hero:not(.phero) .stage.lg-tight .legend b{width:10px;height:10px}
/* ---------- film player ---------- */
button.btn{font-family:inherit;cursor:pointer;background:none}
.btn.out{border-color:rgba(20,20,20,.25);color:#141414}
.vp-scrim{position:fixed;inset:0;z-index:300;background:rgba(12,10,8,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s ease}
.vp-scrim.on{opacity:1;pointer-events:auto}
.vp{position:fixed;z-index:301;overflow:hidden;background:#0b0b0c;box-shadow:0 40px 120px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);opacity:0;pointer-events:none;visibility:hidden}
.vp.on{opacity:1;pointer-events:auto;visibility:visible}
.vp video{display:block;width:100%;height:100%;object-fit:cover;background:#F6F5F2}
.vp-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:2px;border:0;background:rgba(20,18,16,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:2}
.vp-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;text-align:center;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.vp-end.show{opacity:1;pointer-events:auto}
.vp-end p{margin:0;font-size:clamp(20px,2.4vw,28px);font-weight:300;letter-spacing:-.02em;color:#141414}
.vp-end p b{font-weight:600}
.vp-end .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.vp-end .rp{background:none;border:0;color:#6E6863;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
html.film-open,html.film-open body{overflow:hidden}
/* the play button: a square before the hero buttons with a thin frame and symbol in the hero's text colour
   (white on the dark hero, black on the light hero), no fill; it fills on hover */
.btn.play{width:48px;padding:0;justify-content:center;background:transparent;border-color:#fff;color:#fff;transition:background-color .2s,color .2s}
.btn.play:hover,.btn.play:focus-visible{background:#fff;color:#141414}
.btn.play:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
:root[data-hero="light"][data-theme="light"] .hero .btn.play{border-color:#141414;color:#141414}
:root[data-hero="light"][data-theme="light"] .hero .btn.play:hover,:root[data-hero="light"][data-theme="light"] .hero .btn.play:focus-visible{background:#141414;color:#fff}
/* light hero option: <html data-hero="light"> */
:root[data-hero="light"][data-theme="light"] .hero{--hero:#FFFFFF;--grid:rgba(20,20,20,.09);color:#141414}
:root[data-hero="light"][data-theme="light"] .hero .btn.ghost{border-color:rgba(20,20,20,.3);color:#141414}
/* the hero line is a key message: full ink, the same as the headline */
:root[data-hero="light"][data-theme="light"] .hero .copy p{color:#141414}
:root[data-hero="light"][data-theme="light"] .hero .legend span{color:#6E6863}
:root[data-hero="light"][data-theme="light"] #grid i.d{background-image:repeating-linear-gradient(135deg,rgba(20,20,20,.13) 0 1px,transparent 1px 7px)}
:root[data-hero="light"][data-theme="light"] #grid i.e{background-color:transparent}
:root[data-hero="light"][data-theme="light"] .legend b{border-color:rgba(20,20,20,.3)}
:root[data-hero="light"][data-theme="light"] .legend .e b{background-image:repeating-linear-gradient(135deg,rgba(20,20,20,.5) 0 1px,transparent 1px 4px)}

/* ---------- section elements ---------- */
.head{max-width:860px;margin-bottom:clamp(44px,5vw,72px)}
.head .sub{margin-top:14px}
.head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;max-width:none}
.head.split .links{margin:0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,7vw,120px);align-items:start}
.two .lead{font-size:clamp(19px,1.6vw,22px);line-height:1.45;font-weight:500}
.two .lead span{color:var(--soft);font-weight:400}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.three.after-photo{margin-top:clamp(28px,3vw,40px)}
.tile{background:var(--card);padding:20px 20px 26px;border-radius:2px}
.ico{width:46px;height:46px;background:#141414;color:#fff;display:grid;place-items:center;border-radius:2px;margin-bottom:34px}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile p,.item p{color:var(--soft);font-size:16.5px;line-height:1.5;margin-top:8px}
.item .ico{margin-bottom:38px}
.item .mono{display:block;margin-bottom:8px}
.ph{margin:clamp(48px,6vw,88px) 0 0}
.ph img{display:block;width:100%;height:auto;border-radius:2px}
:root[data-theme="dark"] .ph img{filter:brightness(.85)}

/* record roll */
.roll{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:40px;align-items:center}
.roll .say{font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.roll .btn{margin-top:26px}
.reel{height:clamp(360px,44vw,560px);overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%)}
.reel ul{list-style:none;margin:0;padding:0;text-align:center;animation:reel 24s linear infinite}
.reel li{font-size:clamp(40px,6.4vw,88px);line-height:1.22;letter-spacing:-.045em;font-weight:400}
@keyframes reel{to{transform:translateY(-50%)}}

/* numbers */
.stat{background:var(--card);padding:28px 30px 26px;min-height:340px;display:flex;flex-direction:column;border-radius:2px}
.stat h3{font-size:26px;font-weight:400;letter-spacing:-.02em}
.stat .what{color:var(--soft);font-size:18px;margin-top:4px}
.stat .n{margin-top:auto;font-size:clamp(64px,7.4vw,104px);line-height:1;letter-spacing:-.05em;font-weight:400}
.stat .mono{margin-top:14px}
.strip{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:start;margin-top:clamp(56px,6vw,88px);padding-top:28px;border-top:1px solid var(--line)}
.strip p{color:var(--soft);font-size:16.5px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.badges span,.badges a{border:1px solid var(--line);padding:9px 14px;border-radius:2px;color:var(--ink)}
.badges a{text-decoration:none;transition:border-color .2s,color .2s}
.badges a:hover,.badges a:focus-visible{border-color:var(--orange);color:var(--orange)}

/* action authorisation */
.auth{display:grid;grid-template-columns:minmax(0,.9fr) 2px minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.auth .bar{background:var(--orange)}
.ask{align-self:center}
.ask .mono{display:block;margin-bottom:14px}
.ask .q{font-size:clamp(22px,2.2vw,30px);line-height:1.25;letter-spacing:-.02em}
.ask dl{margin:26px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 22px;font-size:16px}
.ask dt{color:var(--soft)}.ask dd{margin:0}
.verdicts{display:flex;flex-direction:column}
.verdicts button{all:unset;cursor:pointer;display:block;padding:18px 0;border-bottom:1px solid var(--line);color:var(--soft);transition:color .25s}
.verdicts button:first-child{border-top:1px solid var(--line)}
.verdicts .w{display:block;font-size:clamp(40px,5.6vw,80px);line-height:1.05;letter-spacing:-.045em}
.verdicts .why{display:block;max-height:0;overflow:hidden;opacity:0;font-size:17px;transition:max-height .35s ease,opacity .35s ease,margin .35s ease;color:var(--soft);max-width:520px}
.verdicts button[aria-pressed="true"]{color:var(--ink)}
.verdicts button[aria-pressed="true"] .why{max-height:90px;opacity:1;margin-top:10px}
.verdicts button:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* questions, teams, research */
.qs{list-style:none;margin:0;padding:0;counter-reset:q}
.qs li{display:grid;grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding:26px 0;border-top:1px solid var(--line);align-items:baseline;counter-increment:q}
.qs li:last-child{border-bottom:1px solid var(--line)}
.qs li::before{content:counter(q);font-family:'DM Mono',monospace;font-size:14px;color:var(--orange)}
.qs h3{font-size:clamp(20px,1.9vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.25}
.qs p{color:var(--soft);font-size:16.5px}
.say-card{background:var(--card);padding:30px;border-radius:2px;display:flex;flex-direction:column;min-height:300px}
.say-card q,.say-card .sh{quotes:none;font-size:clamp(22px,2vw,27px);line-height:1.25;letter-spacing:-.02em;font-weight:400;margin:0}
.say-card p{color:var(--soft);font-size:16.5px;margin-top:14px}
.say-card .mono{margin-top:auto;padding-top:28px;color:var(--ink)}
.pubs a{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 24px;gap:24px;padding:24px 0;border-top:1px solid var(--line);align-items:baseline}
.pubs a:last-child{border-bottom:1px solid var(--line)}
.pubs h3{font-size:clamp(20px,1.9vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.25}
.pubs p{color:var(--soft);font-size:16.5px}
.pubs a:hover h3{color:var(--orange)}

/* ---------- laptop with light-to-dark screen ---------- */
.lapwrap{margin:clamp(56px,7vw,104px) auto 0;max-width:1040px}
.lapctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:34px;font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.lapctl input{-webkit-appearance:none;appearance:none;width:168px;height:22px;background:transparent;cursor:pointer;margin:0}
.lapctl input::-webkit-slider-runnable-track{height:1.5px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.lapctl input::-moz-range-track{height:1.5px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.lapctl input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6.5px;background:var(--orange);border:0;border-radius:0}
.lapctl input::-moz-range-thumb{width:14px;height:14px;background:var(--orange);border:0;border-radius:0}
.mac{position:relative}
.mac .frame{display:block;width:100%;height:auto;position:relative;z-index:2;pointer-events:none}
/* the screen is a little larger than the cut-out in the frame, so it tucks under the bezel and no page colour shows at the edges */
.mac .scr{position:absolute;z-index:1;left:10.15%;top:2.45%;width:79.93%;height:86.35%;overflow:hidden;background:#000;line-height:0}
.mac .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.mac .scr .dk{position:absolute;inset:0;z-index:2;clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
.mac .scr.done .dk{clip-path:none;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
/* S98: once the sweep reaches dark, the light screen underneath is hidden so no light hairline shows at the right edge */
.mac .scr.done img:not(.dk){visibility:hidden}
.mac .scr .edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--p,0%);width:2px;background:var(--orange);opacity:var(--eo,0);transform:translateX(-1px)}
.mac::after{content:"";position:absolute;left:4%;right:4%;bottom:-3.5%;height:9%;background:radial-gradient(50% 50% at 50% 50%,rgba(20,20,20,.28),rgba(20,20,20,0) 70%);filter:blur(10px);z-index:0}
:root[data-theme="dark"] .mac::after{background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.7),rgba(0,0,0,0) 70%)}

/* ---------- closing band and footer: always dark ---------- */
.close{background:var(--dark);color:#fff;text-align:center;position:relative;overflow:hidden}
.close-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22}
.close .wrap{position:relative}
.close h2{font-size:clamp(40px,5.6vw,84px);letter-spacing:-.04em;font-weight:300}
.close h2 strong{font-weight:600}
.close p{color:var(--dark-soft);margin:18px auto 34px;max-width:560px;font-size:20px}
/* S83: a close with no paragraph (Home): the payoff on its own line and the paragraph's gap kept above the button */
.close h2.split{display:block}.close h2.split strong{display:block}
.close h2+.btn{margin-top:38px}
footer{background:var(--dark);color:var(--dark-faint);border-top:1px solid var(--dark-grid);padding:56px 0 28px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:minmax(220px,1.3fr) repeat(5,minmax(0,1fr));gap:32px}
.fbrand p{max-width:280px}
.lockup{height:24px;width:auto;display:block;margin-bottom:14px}
.fsoc{display:flex;gap:16px;align-items:center;margin-top:18px}
.fsoc a{display:inline-flex;color:#D9D5CF}
.fsoc a:hover{color:var(--orange)}
.fgrid h4{margin:0 0 12px;font-family:'DM Mono',monospace;font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.fgrid h4 a{color:#8a857f;padding:0}
.fgrid div>a{display:block;color:#D9D5CF;padding:3px 0}
.fgrid a:hover{color:#fff}
/* integrations: one slow strip, as on the current site; pauses on hover, static for reduced motion */
.fstrip{overflow:hidden;margin-top:44px;padding:18px 0;border-top:1px solid var(--dark-grid);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ftrack{display:flex;width:max-content;animation:fstrip 48s linear infinite}
.fstrip:hover .ftrack,.fstrip:focus-within .ftrack{animation-play-state:paused}
.ftrack ul{display:flex;gap:44px;margin:0;padding:0 22px;list-style:none}
.ftrack a{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;color:#B9B4AD}
.ftrack a:hover{color:#fff}
.ftrack img,.fll img{width:18px;height:18px;flex:none;filter:invert(1);opacity:.85}
@keyframes fstrip{to{transform:translateX(-50%)}}
.legal{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid var(--dark-grid)}
.fdisc{font-size:13px;color:#6f6a65;flex:1 1 320px}
.fll{display:inline-flex;gap:22px;align-items:center}
.fll a{display:inline-flex;align-items:center;gap:9px;color:var(--soft);font-family:'DM Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase} /* v78: same type and colour as the copyright line */
.fll a:hover{color:#fff}

/* ---------- inner pages ---------- */
/* page hero: the same matrix, shorter, drawn without animation */
.stage.short{height:clamp(440px,64svh,680px);min-height:0}
.phero .copy h1{font-size:clamp(36px,min(4.4vw,8.6vh),104px)}
.phero .copy .lab{display:block;margin-bottom:18px}
.mono.lab{color:var(--orange)}
.head .lab{display:block;margin-bottom:14px}
.onpage{border-bottom:1px solid var(--line);background:var(--bg)}
.onpage .wrap{display:flex;gap:10px 26px;align-items:center;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;font-size:15px;font-weight:500}
.onpage .mono{margin-right:6px}
.onpage a{border-bottom:1px solid transparent;padding-bottom:1px}
.onpage a:hover{border-color:var(--orange)}
main a:not(.btn):not(.tile):not(.plink){text-underline-offset:3px}
.note,.lede{color:var(--soft);font-size:16.5px;max-width:820px}
.note{margin-top:22px}
.lede{margin:10px 0 26px}
.note a,.ticks a,.gl a,.check a,.role-body a:not(.btn){border-bottom:1px solid var(--line)}
.note a:hover,.ticks a:hover,.check a:hover{border-color:var(--orange)}
.h3l{font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.h3l.sp{margin:clamp(56px,6vw,88px) 0 22px}
.h2s{font-size:clamp(24px,2.2vw,30px);font-weight:400;letter-spacing:-.02em;margin-bottom:20px}
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:2px;box-shadow:0 30px 70px -40px rgba(20,20,20,.35)}
.head + .shot{margin-top:0}
.shot + .split,.tw + .split,.shot + .three,.shot + .pair,.pair + .split,.three + .split,.codes + .split,.split + .split{margin-top:clamp(48px,5vw,72px)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,6vw,96px);align-items:start}
.split > div > p{color:var(--soft);font-size:17px;margin-top:12px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--line);font-size:16.5px}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:2px;top:22px;width:9px;height:9px;background:var(--orange)}
.tw{overflow-x:auto}
.dtable{width:100%;border-collapse:collapse;font-size:16.5px}
.dtable th{text-align:left;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--soft);padding:0 20px 12px 0;border-bottom:1px solid var(--line)}
.dtable td{padding:16px 20px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--soft)}
.dtable td:first-child{color:var(--ink);font-weight:500;width:26%}
.stamp{font-weight:500;color:var(--ink);white-space:nowrap}
.stamp.hold{color:var(--orange)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tile.plain{padding:26px 26px 28px}
.tile.plain .mono{display:block;margin-bottom:10px}
.tile.plain h3{font-size:20px}
.tile.link{position:relative;display:block;padding-right:54px;transition:background-color .2s}
.tile.link .arr{position:absolute;right:24px;top:26px;transition:transform .2s}
.tile.link:hover .arr{transform:translateX(4px);color:var(--orange)}
.tile.start{display:flex;flex-direction:column;scroll-margin-top:120px}
.tile.start h3{font-size:clamp(22px,2vw,27px);font-weight:400;letter-spacing:-.02em}
.tile.start .who{color:var(--ink);font-size:15px}
.tile.start .links{margin-top:auto;padding-top:28px}
.band .tile,.band .say-card,.band .stat{background:var(--bg)}
/* chain: framework to evidence */
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));position:relative}
.chain li{position:relative;padding-top:34px;text-align:center}
.chain li::before{content:"";position:absolute;top:8px;left:50%;width:11px;height:11px;margin-left:-6px;border:1.5px solid var(--ink);background:var(--bg);z-index:1}
.chain li::after{content:"";position:absolute;top:13px;left:-50%;width:100%;height:1.5px;background:color-mix(in srgb,var(--ink) 28%,transparent)}
.chain li:first-child::after{display:none}
.chain li.gate::before{background:var(--orange);border-color:var(--orange);width:19px;height:19px;margin-left:-10px;top:4px}
.chain li.gate ~ li::after,.chain li.gate::after{background:var(--orange)}
.chain li.gate ~ li::before{border-color:var(--orange)}
.chain b{display:block;font-size:16px;font-weight:500}
.chain span{display:block;font-size:13.5px;color:var(--soft);margin-top:2px}
.steps li{grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr)}
/* copilot block */
.copilot{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(56px,6vw,88px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--line)}
.copilot .lab{display:block;margin-bottom:12px}
.copilot p{color:var(--soft);font-size:17px;margin-top:12px}
/* code */
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.code{margin:0;background:#141414;color:#E9E6E0;border-radius:2px;overflow:hidden}
.code figcaption{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.1);color:#9A958F;text-transform:none;letter-spacing:0;font-size:12.5px}
.code pre{margin:0;padding:18px;overflow-x:auto;font-family:'DM Mono',ui-monospace,monospace;font-size:13.5px;line-height:1.6}
/* glossary, connections */
.gl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px)}
.gl > div{padding:20px 0;border-top:1px solid var(--line);scroll-margin-top:120px}
.gl dt{font-size:18px;font-weight:600}
.gl dd{margin:6px 0 0;color:var(--soft);font-size:16.5px}
.conn{list-style:none;margin:14px 0 0;padding:0}
.conn li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:16.5px}
.conn li:last-child{border-bottom:1px solid var(--line)}
.conn img{width:20px;height:20px;flex:none;opacity:.8}
:root[data-theme="dark"] .conn img{filter:invert(1)}
/* regulatory scope */
.scope{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.rings{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin:0 auto}
.rings i{position:absolute;inset:0;margin:auto;border:1.5px solid var(--line);border-radius:50%}
.rings i:nth-child(1){width:100%;height:100%}
.rings i:nth-child(2){width:84%;height:84%}
.rings i:nth-child(3){width:68%;height:68%;border-color:var(--ink)}
.rings i:nth-child(4){width:52%;height:52%;border-color:var(--ink)}
.rings i:nth-child(5){width:36%;height:36%;border-color:var(--orange)}
.rings b{position:absolute;inset:0;margin:auto;width:20%;height:20%;display:grid;place-items:center;background:var(--orange);color:#fff;border-radius:50%;font-size:13px;font-weight:500;text-align:center;line-height:1.1}
.layers li{grid-template-columns:48px minmax(0,.7fr) minmax(0,1.3fr)}
.layers .where{display:block;margin-top:4px;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
/* people and quotes */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.person{background:var(--bg);border-radius:2px;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:24px;padding:24px}
.person img{width:100%;height:auto;align-self:start;aspect-ratio:1;object-fit:cover;object-position:center 22%;border-radius:2px;filter:grayscale(1) contrast(.96)}
.person h3{font-size:22px;font-weight:400;letter-spacing:-.02em}
.person .mono{display:block;margin:4px 0 12px}
.person p{color:var(--soft);font-size:16px;margin-top:10px}
.person details{margin-top:10px}
.person summary{cursor:pointer;font-size:15px;font-weight:500;list-style:none;display:inline-block;border-bottom:1px solid var(--line)}
.person summary::-webkit-details-marker{display:none}
.person details[open] summary{display:none}
.plink{display:inline-block;margin-top:16px;font-size:15px;font-weight:500;border-bottom:1px solid var(--line)}
.plink:hover{border-color:var(--orange)}
.quotes{margin-top:18px}
.quote{margin:0;min-height:0}
.quote blockquote{margin:0}
.quote blockquote p{color:var(--ink);font-size:18px;line-height:1.5;margin:0 0 14px}
.quote blockquote p:first-child{font-size:clamp(22px,2vw,27px);line-height:1.25;letter-spacing:-.02em}
/* careers */
.roles{border-top:1px solid var(--line)}
.role{border-bottom:1px solid var(--line);scroll-margin-top:120px}
.role summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0}
.role summary::-webkit-details-marker{display:none}
.role summary .mono{display:block;margin-bottom:8px}
.role summary h3{font-size:clamp(22px,2.2vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.role summary p{color:var(--soft);font-size:17px;margin-top:6px}
.role summary i{flex:none;width:42px;height:42px;border:1.5px solid var(--line);position:relative}
.role summary i::before,.role summary i::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:1.5px;margin-top:-.75px;background:var(--ink);transition:transform .25s}
.role summary i::after{transform:rotate(90deg)}
.role[open] summary i::after{transform:rotate(0)}
.role[open] summary i{border-color:var(--orange)}
.role-body{max-width:820px;padding:0 0 36px}
.role-body h4{font-size:17px;font-weight:600;margin:26px 0 8px}
.role-body p{color:var(--soft);font-size:16.5px;margin:0 0 10px}
.role-body .ticks{margin-bottom:8px}
.role-body .btn{margin-top:22px}
/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.form{display:grid;gap:18px}
.form .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form label{display:grid;gap:8px;font-size:15px;font-weight:500}
.form input:not([type=checkbox]),.form select,.form textarea{font:inherit;font-size:16.5px;font-weight:400;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:13px 14px;width:100%}
.form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 20px) 54%,calc(100% - 15px) 54%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.form textarea{resize:vertical;min-height:150px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.form [aria-invalid="true"]{border-color:#C0392B}
.form .err{color:#C0392B;font-size:14px;font-weight:400;min-height:0}
:root[data-theme="dark"] .form .err{color:#EF7B6C}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .check{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--soft);font-size:15px}
.form .check input{width:18px;height:18px;margin-top:2px;accent-color:var(--orange);flex:none}
.form-foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.form-status{font-size:15.5px;margin:0}
.form-status.ok{color:var(--ink)}
.form-status.bad{color:#C0392B}
.form.sent > *:not(.form-foot){opacity:.45;pointer-events:none}
.form button[disabled]{opacity:.6;cursor:default}

/* ---------- screen sizes ----------
   27 inch and larger  (2200px+)      content 1600, text 20px, larger display type
   24 inch             (1700 to 2199) content 1400, text 19px
   14 to 16 inch       (1241 to 1699) the base design, content 1240
   small laptop, tablet landscape (901 to 1240)  the open menu drops to a row under the logo
   tablet portrait     (701 to 900)   sheet menu; two-column blocks stack; three-up cards stay
   phone               (700 and less) one column, compact elements, secondary lines hidden
   See design/RESPONSIVE.md. */

@media (min-width:1700px){
  :root{--wrap:1400px;--lg:22px}
  body{font-size:19px}
  h2{font-size:58px}
  .lapwrap{max-width:1120px}
}
@media (min-width:2200px){
  :root{--wrap:1600px;--lg:26px;--hh:104px}
  body{font-size:20px}
  h2{font-size:66px}
  h3{font-size:21px}
  .sub{font-size:23px}
  .mono{font-size:13px}
  .btn{height:54px;padding:0 26px;font-size:16.5px}
  .btn.sm{height:44px;font-size:15px}
  .xh-btn{width:48px;height:48px}
  .xh-top{font-size:16.5px;height:44px}
  .head{max-width:1040px}
  .three{gap:22px}
  .ico{width:54px;height:54px;margin-bottom:42px}
  .ico svg{width:28px;height:28px}
  .tile{padding:26px 26px 32px}
  .tile p,.item p,.qs p,.pubs p,.say-card p,.strip p{font-size:18.5px}
  .two .lead{font-size:25px}
  .roll{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
  .roll .say{font-size:26px}
  .reel{height:640px}.reel li{font-size:108px}
  .stat{min-height:420px;padding:34px 36px 32px}
  .stat h3{font-size:31px}.stat .what{font-size:21px}.stat .n{font-size:128px}
  .ask .q{font-size:36px}.ask dl{font-size:18.5px}
  .verdicts .w{font-size:100px}.verdicts .why{font-size:20px;max-width:640px}
  .qs li{grid-template-columns:80px minmax(0,1.2fr) minmax(0,1fr);padding:32px 0}
  .qs h3,.pubs h3{font-size:31px}
  .say-card{padding:36px;min-height:360px}.say-card q,.say-card .sh{font-size:32px}
  .lapwrap{max-width:1280px}
  .close h2{font-size:104px}.close p{font-size:23px;max-width:660px}
  footer{font-size:16px}.lockup{height:28px}
}

/* small laptops and tablets in landscape: the open menu becomes a row under the logo */
@media (max-width:1240px) and (min-width:901px){
  .xh-menu{right:0;top:calc(100% + 2px);transform:none;background:var(--bg);border:1px solid var(--line);padding:8px 10px;box-shadow:0 18px 40px rgba(0,0,0,.12);opacity:0;transition:opacity .2s}
  .xh.open .xh-menu{opacity:1}
  .xh-top,.xh-out{color:var(--ink)}
  .xh-out{border-color:var(--line)}
  .xh .xh-ink,.xh.on-dark .xh-ink,.xh.on-light .xh-ink{background:var(--ink);color:var(--bg)}
}
@media (max-width:1240px){
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fbrand{grid-column:1 / -1}
}

/* tablet portrait and phones: sheet menu, solid bar once scrolled */
.xh-mrow{display:none}
@media (max-width:900px){
  .two,.strip{grid-template-columns:1fr}
  .split,.copilot,.scope,.contact,.codes{grid-template-columns:1fr}
  .rings{max-width:320px}
  .people{grid-template-columns:1fr}
  .chain{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
  .chain li:nth-child(5)::after{display:none}
  .gl{grid-template-columns:1fr}
  .copy{max-width:100%;width:100%;border-left:0;border-right:0;padding-left:var(--pad);padding-right:var(--pad)}
  .copy h1{font-size:clamp(44px,7vw,64px)}
  .copy p{font-size:19px}
  .legend{left:var(--pad);right:auto}
  :root{--hh:72px}
  html.menu-lock,html.menu-lock body{overflow:hidden}
  .xh::before{content:"";position:absolute;inset:0;background:var(--bg);border-bottom:1px solid var(--line);opacity:0;transition:opacity .25s;z-index:2;top:calc(-1*env(safe-area-inset-top,0px))}
  .xh.solid::before,.xh.open::before{opacity:1}
  .xh.open::before{border-bottom-color:transparent}
  .xh-in{position:relative;z-index:3}
  .xh-lg,.xh-dock{position:relative;z-index:2}
  .xh-tg{display:none}
  .xh-menu{position:fixed;z-index:1;inset:0;top:0;right:0;transform:none;display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(88px + env(safe-area-inset-top,0px)) var(--pad) calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg);overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
  .xh.open .xh-menu{opacity:1;visibility:visible;transition:opacity .25s}
  .xh-ctl{position:static}
  .xh-items{flex-direction:column;align-items:stretch;gap:0}
  .xh-items a,.xh-acts .btn{transform:translateY(10px);transition:opacity .35s calc(var(--i)*45ms + 60ms),transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--i)*45ms + 60ms)}
  .xh-top{height:auto;padding:17px 0;font-size:clamp(28px,5vw,36px);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--ink);border-bottom:1px solid var(--line);justify-content:space-between}
  .xh-top::after{content:"+";position:static;transform:none;background:none;height:auto;width:auto;font-family:'DM Mono',monospace;font-size:20px;font-weight:400;color:var(--soft);letter-spacing:0}
  .xh-top.act::after{content:"\2212";color:var(--orange);transform:none}
  .xh-top:hover::after{transform:none}
  .xh-sub{position:static;box-shadow:none;border:0;border-bottom:1px solid var(--line);padding:14px 0 18px;display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;animation:none}
  .xh-sub a{min-width:0;border-top:0;padding:7px 0}
  .xh-sub a b{font-size:17px}
  .xh-sub .gt{margin-bottom:6px}
  .xh-mrow{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:26px 0 0;color:var(--soft);font-size:15px}
  .xh-mrow button{font:inherit;display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--line);color:var(--ink);height:40px;padding:0 14px;border-radius:2px;cursor:pointer}
  .xh-acts{margin:14px 0 0;gap:10px}
  .xh-acts .btn{flex:1;justify-content:center;height:52px;font-size:16px}
  .xh-out{border-color:var(--line);color:var(--ink)}
  .xh .xh-ink,.xh.on-dark .xh-ink,.xh.on-light .xh-ink{background:var(--ink);color:var(--bg)}
  .fgrid{grid-template-columns:1fr 1fr}
  .stat{min-height:260px}
}

/* phones */
@media (max-width:700px){
  :root{--lg:20px;--hh:64px}
  .sec{padding:72px 0}
  .head{margin-bottom:32px}
  h1{font-size:clamp(38px,11vw,54px);line-height:1.06}
  h2{font-size:clamp(28px,7.6vw,38px);line-height:1.12}
  .sub{font-size:17.5px}
  .xh-menu{padding-top:calc(76px + env(safe-area-inset-top,0px))}
  .xh-sub{grid-template-columns:1fr;gap:14px}
  .xh-sub a small{display:none}
  /* hero */
  .stage{min-height:500px}
  .copy{padding:28px var(--pad) 30px}
  .copy h1{font-size:clamp(38px,11vw,54px)}
  .copy p{font-size:17.5px;margin-top:18px}
  .copy .cta{gap:10px;margin-top:26px}
  .copy .cta .btn{flex:1 1 0;justify-content:center;padding:0 12px}
  .copy .cta .btn.play{flex:0 0 48px;padding:0}
  .legend{display:none}
  /* blocks */
  .two{gap:20px}
  .two .lead{font-size:18.5px}
  .ph{margin-top:36px}
  .ph img{height:190px;object-fit:cover}
  .three{grid-template-columns:1fr;gap:10px}
  .three.after-photo{margin-top:14px}
  .tile,.item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .tile{padding:16px 16px 18px}
  .tile .ico,.item .ico{width:44px;height:44px;margin:0;grid-column:1;grid-row:1 / span 3}
  .tile h3,.tile p,.item .mono,.item h3,.item p{grid-column:2}
  .tile h3{align-self:center;min-height:0}
  .tile p,.item p{font-size:15.5px;margin-top:4px}
  .item{padding:16px 0;border-top:1px solid var(--line)}
  .item:last-child{border-bottom:1px solid var(--line)}
  .item .mono{margin-bottom:4px}
  #platform .three{gap:0}
  .links{margin-top:26px;gap:12px 24px}
  .roll{grid-template-columns:1fr;gap:6px}
  .roll .say{font-size:19px}
  .reel{height:230px}.reel li{font-size:40px}
  .lapwrap{margin-top:48px}
  .lapctl{margin-bottom:22px}
  .mac{margin:0 -12px}
  .stat{min-height:0;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;align-items:center;padding:18px 20px}
  .stat .n{grid-column:1;grid-row:1 / span 2;margin:0;font-size:60px}
  .stat h3{grid-column:2;grid-row:1;font-size:21px;align-self:end}
  .stat .what{grid-column:2;grid-row:2;font-size:15px;margin-top:2px;align-self:start}
  .stat .mono{display:none}
  .strip{margin-top:40px;gap:14px}
  .auth{grid-template-columns:1fr;gap:26px}
  .auth .bar{height:2px;width:100%}
  .ask .q{font-size:23px}
  .verdicts button{padding:14px 0}
  .verdicts .w{font-size:clamp(36px,11vw,46px)}
  .verdicts .why{font-size:16px}
  .qs li{grid-template-columns:26px minmax(0,1fr);gap:10px;padding:18px 0}
  .qs:not(.steps):not(.layers) li p{display:none}
  .qs h3{font-size:19px}
  /* inner pages */
  .stage.short{height:auto;min-height:clamp(380px,56svh,520px)}
  .phero .copy h1{font-size:clamp(34px,9.6vw,46px)}
  .onpage .wrap{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;gap:22px;padding-top:14px;padding-bottom:14px}
  .onpage .wrap::-webkit-scrollbar{display:none}
  .pair{grid-template-columns:1fr;gap:10px}
  .tile.plain{padding:20px}
  .tile.plain{display:block}
  .steps li,.layers li{grid-template-columns:26px minmax(0,1fr)}
  .steps li p,.layers li p{display:block;grid-column:2}
  .dtable thead{display:none}
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .dtable td{border:0;padding:3px 0}
  .dtable td:first-child{width:100%;font-size:17px;padding-bottom:4px}
  .dtable td:not(:first-child)::before{content:attr(data-label) ": ";font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
  .chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chain li::after{display:none}
  .person{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:18px}
  .person details{grid-column:1 / -1}
  .form .row2{grid-template-columns:1fr}
  .role summary{padding:22px 0}
  .h3l.sp{margin:44px 0 16px}
  .copilot{margin-top:44px;padding-top:32px}
  /* three teams: one card at a time, swiped sideways */
  #teams .three{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--pad));padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #teams .three::-webkit-scrollbar{display:none}
  #teams .say-card{flex:0 0 84%;scroll-snap-align:center;min-height:250px;padding:24px}
  .say-card q,.say-card .sh{font-size:22px}
  .pubs a{grid-template-columns:minmax(0,1fr) 20px;gap:14px;padding:18px 0}
  .pubs p{display:none}
  .pubs h3{font-size:19px}
  .close{padding:84px 0}
  .close h2{font-size:clamp(40px,12vw,52px)}
  .close p{font-size:18px}
  footer{padding-top:44px}
  .fgrid{gap:28px 20px}
  .fstrip{margin-top:32px}
  .legal{gap:10px 20px}
}
@media (max-width:380px){
  .copy .cta .btn{font-size:14px;padding:0 8px}
  #teams .say-card{flex-basis:88%}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reel ul{animation:none}
  .ftrack{animation:none;width:auto}.ftrack ul + ul{display:none}.ftrack ul{flex-wrap:wrap;gap:12px 32px}.fstrip{-webkit-mask-image:none;mask-image:none}
  .ptile,.pctl{display:none}
  .vp-scrim{transition:none}
  .rule,#grid i,.xh-items a,.xh-acts .btn,.xh-g,.xh-g i,.xh-tg,.verdicts .why{transition:none}
  .xh-sub{animation:none}
}

/* ---------- S20: frosted header for the open desktop menu; phone and tablet refinements (desktop layout unchanged) ---------- */
.vwhy,.cnav,.xh-soc,.facc{display:none}
@media (min-width:901px){
  /* the open menu sits on a frosted bar across the whole header, so it reads over any section */
  .xh::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .25s;border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
  .xh.open::before{opacity:1}
  .xh-in{position:relative;z-index:1}
}
@media (max-width:900px){
  /* header: the theme switch always sits before the menu button; the logo never folds */
  .xh-tg{display:grid;transform:none;opacity:1;position:relative;z-index:2}
  .xh-mrow{display:none}
  /* menu: larger section names with a chevron that turns when the section opens */
  .xh-top{font-size:clamp(30px,8vw,38px)}
  .xh-top::after{content:"";width:10px;height:10px;flex:none;margin-right:6px;background:none;border:0;border-right:1.75px solid var(--soft);border-bottom:1.75px solid var(--soft);transform:translateY(-4px) rotate(45deg);transition:transform .25s,border-color .25s}
  .xh-top:hover::after{transform:translateY(-4px) rotate(45deg)}
  .xh-top.act::after,.xh-top.act:hover::after{transform:translateY(3px) rotate(-135deg);border-color:var(--orange)}
  .xh-soc{display:flex;gap:10px;margin-top:14px}
  .xh-soc a{flex:1;height:52px;display:grid;place-items:center;border:1px solid var(--line);border-radius:2px;color:var(--ink)}
  .xh-soc a svg{width:22px;height:22px}
  .xh-soc a:active{border-color:var(--ink)}
}
@media (max-width:700px){
  /* hero: the cube matrix stays without the orange line, legend or control; the word boxes open in the cube rows under the buttons */
  .hero:not(.phero) .rule,.hero:not(.phero) .legend,.hero:not(.phero) .pctl{display:none!important}
  /* AI proposes: the request as a card, the three decisions as one switch, the reason underneath */
  .auth .ask{background:var(--bg);padding:22px 20px;border-radius:2px}
  .auth .bar{margin:18px 0}
  .verdicts{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:6px}
  .verdicts button,.verdicts button:first-child{border:1px solid var(--line);border-radius:2px;padding:14px 6px;text-align:center;background:var(--bg)}
  .verdicts .w{font-size:15px;font-weight:500;letter-spacing:-.005em;line-height:1.2}
  .verdicts .why{display:none}
  .verdicts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .vwhy{display:block;margin-top:14px;font-size:16.5px;color:var(--soft);min-height:4.5em}
  /* one record, three teams: one card centred, with arrows and dots */
  #teams .three{padding:0 11vw;scroll-padding:0 11vw}
  #teams .say-card,#teams .say-card:only-child{flex:0 0 78vw;scroll-snap-align:center}
  .cnav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
  .cnav>button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--ink);cursor:pointer}
  .cnav>button:disabled{opacity:.35;cursor:default}
  .cdots{display:flex;gap:8px}
  .cdots button{width:10px;height:10px;padding:0;border:1px solid var(--soft);border-radius:0;background:none;cursor:pointer}
  .cdots button.on{background:var(--orange);border-color:var(--orange)}
  /* record: breathing room above the line and between the button and the moving words */
  #record.flush{padding-top:52px}
  #record .roll{gap:26px}
  /* footer: brand first, large social buttons, link groups that open and close, legal stacked */
  footer{padding-top:44px}
  .fgrid{grid-template-columns:1fr;gap:0}
  .fbrand{margin-bottom:22px}
  .fsoc{gap:10px;margin-top:20px}
  .fgrid .fsoc a{flex:1;height:52px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:2px}
  .fsoc a svg{width:22px;height:22px}
  .fgrid .fg{border-top:1px solid var(--dark-grid)}
  .fgrid .fg:last-child{border-bottom:1px solid var(--dark-grid)}
  .fgrid .fg h4{margin:0;display:flex;align-items:center;justify-content:space-between;font-family:inherit;font-size:18px;letter-spacing:-.01em;text-transform:none}
  .fgrid .fg h4 a{color:#F4F2EE;padding:16px 0;flex:1}
  .facc{width:48px;height:48px;margin-right:-12px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
  .facc i{width:10px;height:10px;border-right:1.75px solid #8a857f;border-bottom:1.75px solid #8a857f;transform:translateY(-3px) rotate(45deg);transition:transform .25s,border-color .25s}
  .fg.open .facc i{transform:translateY(3px) rotate(-135deg);border-color:var(--orange)}
  .fgrid .fg>a{display:none}
  .fgrid .fg.open>a{display:block;padding:10px 0;font-size:16px}
  .fgrid .fg.open>a:last-child{padding-bottom:18px}
  .legal{flex-direction:column;align-items:flex-start;gap:14px}
  .fdisc{flex:none}
  .fll{flex-wrap:wrap;gap:12px 22px}
}

/* Home S21: five-section front page (mock-up v41) */
:is(#asks,#questions) .askgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(40px,6vw,110px);align-items:start}
:is(#asks,#questions) .askhead{position:sticky;top:120px}
:is(#asks,#questions) .askhead h2{font-size:clamp(34px,3.6vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:400;margin:14px 0 0}
:is(#asks,#questions) .askhead h2 b{font-weight:600}
:is(#asks,#questions) .obl{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
:is(#asks,#questions) .obl span,:is(#asks,#questions) .obl a{font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);padding:9px 10px;border-radius:4px;color:var(--soft);background:var(--bg)}
:is(#asks,#questions) .key{display:flex;gap:18px;margin-top:22px;font:500 11px/1 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
:is(#asks,#questions) .key i{display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px;border:1px solid var(--ink)}
:is(#asks,#questions) .key i.ev{background:repeating-linear-gradient(135deg,var(--ink) 0 1px,transparent 1px 4px)}
:is(#asks,#questions) .key i.gv{background:var(--orange);border-color:var(--orange)}
:is(#asks,#questions) ol{list-style:none;margin:0;padding:0;counter-reset:a}
:is(#asks,#questions) li{counter-increment:a;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:22px;align-items:center;padding:clamp(22px,2.6vw,36px) 0;border-top:1px solid var(--line);color:var(--soft);transition:color .7s ease}
:is(#asks,#questions) li:last-child{border-bottom:1px solid var(--line)}
:is(#asks,#questions) li::before{content:"0" counter(a);font:500 13px/1 'DM Mono',monospace;color:var(--soft);transition:color .7s}
:is(#asks,#questions) li h3{margin:0;font-size:clamp(23px,2.35vw,36px);line-height:1.15;letter-spacing:-.025em;font-weight:400}
:is(#asks,#questions) li .tag{display:flex;align-items:center;gap:12px;font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
:is(#asks,#questions) li .cube{width:26px;height:26px;border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .4s}
:is(#asks,#questions) li .cube::before,:is(#asks,#questions) li .cube::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s}
:is(#asks,#questions) li .cube::before{background:repeating-linear-gradient(135deg,var(--ink) 0 1px,transparent 1px 5px)}
:is(#asks,#questions) li .cube::after{background:var(--orange);transform:scale(.2);transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
:is(#asks,#questions) li.on{color:var(--ink)}
:is(#asks,#questions) li.on::before{color:var(--orange)}
:is(#asks,#questions) li.on .cube{border-color:var(--ink)}
:is(#asks,#questions) li.on .cube::before{opacity:1}
:is(#asks,#questions) li.done .cube{border-color:var(--orange)}
:is(#asks,#questions) li.done .cube::before{opacity:0}
:is(#asks,#questions) li.done .cube::after{opacity:1;transform:none}
/* S42: each tag flips from what the question covers to its outcome (the hero tiles' roll). The cube goes from empty to
   orange (governed) with it. Rows play in turn as they scroll in; hovering a row keeps it flipping between the two */
:is(#asks,#questions) li .tw{position:relative;display:inline-block;height:1.3em;overflow:hidden;vertical-align:middle;text-align:right}
:is(#asks,#questions) li .tw span{display:inline-block;line-height:1.3em;white-space:nowrap}
:is(#asks,#questions) li.k3 .tw span{color:var(--ink);font-weight:600}
:is(#asks,#questions) li.on:not(.done) .cube::before{opacity:0}
/* the tag column keeps room for the longest benefit, so the questions never reflow as the words change */
@media (min-width:901px){:is(#asks,#questions) li .tag{min-width:140px;justify-content:flex-end}}
@media (max-width:900px){:is(#asks,#questions) .askgrid{grid-template-columns:1fr;gap:36px}:is(#asks,#questions) .askhead{position:static}:is(#asks,#questions) li{grid-template-columns:28px minmax(0,1fr);gap:12px}:is(#asks,#questions) li .tag{grid-column:2;margin-top:-4px}:is(#asks,#questions) li h3{font-size:21px}}
@media (prefers-reduced-motion:reduce){:is(#asks,#questions) li{transition:none}}
/* v73 (14 Oct 2026): Home clean-up */
/* questions: eyebrow removed, heading sits at the top line of the list */
:is(#asks,#questions) .askhead h2{margin-top:0}
/* questions: plus opens a one or two sentence answer (Designatives FAQ pattern: plus to minus, answer drops in) */
:is(#asks,#questions) li{column-gap:22px;row-gap:0;cursor:pointer}
:is(#asks,#questions) li::before{content:none}
:is(#asks,#questions) .pl{position:relative;width:18px;height:18px;color:var(--soft);transition:color .7s}
:is(#asks,#questions) .pl i{position:absolute;background:currentColor;border-radius:1px}
:is(#asks,#questions) .pl i:first-child{left:0;right:0;top:50%;height:2px;margin-top:-1px}
:is(#asks,#questions) .pl i:last-child{top:0;bottom:0;left:50%;width:2px;margin-left:-1px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
:is(#asks,#questions) li.on .pl{color:var(--orange)}
:is(#asks,#questions) li.open .pl i:last-child{transform:scaleY(0)}
:is(#asks,#questions) h3 .qb{all:unset;display:block;cursor:pointer;color:inherit}
:is(#asks,#questions) h3 .qb:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
:is(#asks,#questions) .ans{grid-column:2 / -1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
:is(#asks,#questions) .ans>div{overflow:hidden;min-height:0}
:is(#asks,#questions) .ans p{margin:0;padding-top:16px;max-width:38em;font-size:17px;line-height:1.5;color:var(--soft);opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
:is(#asks,#questions) .ans a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
:is(#asks,#questions) .ans a:hover{color:var(--orange)}
:is(#asks,#questions) li.open .ans{grid-template-rows:1fr}
:is(#asks,#questions) li.open .ans p{opacity:1;transform:none;transition-delay:.1s}
@media (min-width:1600px){:is(#asks,#questions) .ans p{font-size:19px}}
@media (max-width:900px){:is(#asks,#questions) li{row-gap:0}:is(#asks,#questions) li .tag{margin-top:8px}:is(#asks,#questions) .pl{width:14px;height:14px}:is(#asks,#questions) .ans p{font-size:16px;padding-top:12px}}
@media (prefers-reduced-motion:reduce){:is(#asks,#questions) .ans,:is(#asks,#questions) .ans p,:is(#asks,#questions) .pl i{transition:none}}
/* AI estate reel: 20% faster (24s to 20s) */
.reel ul{animation-duration:20s}
/* teams: one ink headline, One heavier; team labels get an orange line drawn under them as the cards scroll in */
#teams h2 b{font-weight:600}
#teams .say-card>.mono{align-self:flex-start;padding-bottom:9px;background:linear-gradient(var(--orange),var(--orange)) 0 100%/var(--u,0%) 2px no-repeat}
/* registry (v75): Controls counts up from 0; Frameworks and Proof levels slide from 0 to their number, one straight after another */
/* registry (v77): descriptions and footer lines on one line where the card is wide enough (a script sets .one when they fit) */
@media (min-width:1200px){.stat{padding-left:26px;padding-right:26px}.stat .what{font-size:17px}.stat>.mono{font-size:11.5px;letter-spacing:.05em}}
.stat .what.one,.stat .mono.one{white-space:nowrap}
/* registry (v77): Frameworks and Proof levels flip down through their digits, like an airport departures board */
.stat .n .flap{display:inline-block;position:relative;overflow:hidden;vertical-align:top;height:1.16em;margin:-.08em 0;line-height:1.16em;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.stat .n .reel2{display:block;will-change:transform}
.stat .n .reel2>span{display:block;height:1.16em}
/* standards strip: text fills to full contrast word by word, then the badges fill */
#registry .strip .fill .w{color:var(--soft);transition:color .25s ease}
#registry .strip .fill .w.lit{color:var(--ink)}
#registry .badges a{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
#registry .badges a.lit{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#registry .badges a.lit:hover,#registry .badges a.lit:focus-visible{background:var(--orange);border-color:var(--orange);color:#fff}

#record.sec{padding:clamp(56px,7vw,104px) 0}
#record .reel li{white-space:nowrap;font-size:clamp(34px,5.2vw,76px)}
#platform .eng{margin:clamp(40px,5vw,72px) 0 28px}
#platform .lapwrap{margin-top:clamp(64px,8vw,110px)}
#teams .say-card{display:flex;flex-direction:column}
#teams .say-card>.mono{display:block;margin:0 0 22px;color:var(--orange)}
#teams h2 .soft{color:var(--soft)}

/* Home S22: building photo band; cells clear as it scrolls in (the record resolving) */
.vista{position:relative;height:clamp(320px,52vh,560px);overflow:hidden;background:var(--bg)}
.vista-img{position:absolute;inset:-12% 0;background-size:cover;background-position:center 40%;filter:grayscale(1) contrast(1.05) brightness(.92);transform:translate3d(0,0,0) scale(1.12);will-change:transform}
.vista-cells{position:absolute;inset:0;display:grid;pointer-events:none}
.vista-cells i{background:var(--bg);transition:opacity .5s ease;outline:1px solid var(--line);outline-offset:-.5px}
.vista-cells i.off{opacity:0}
.vista-cells i.mark{background:transparent;outline:1.5px solid var(--orange);outline-offset:-1px;opacity:0}
.vista-cells i.mark.off{opacity:1}
.vista-cap{position:absolute;left:0;right:0;bottom:22px}
.vista-cap .mono{color:#fff;opacity:.9}
@media (prefers-reduced-motion:reduce){.vista-cells{display:none}.vista-img{transform:none}}

/* Home S23: caption legible on the photo; tighter join to the teams; question markers */
.vista::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.62));pointer-events:none}
.vista-cap{z-index:2;bottom:clamp(22px,3vw,36px)}
.vista-cap .cap{display:inline-flex;align-items:center;gap:12px;color:#fff;font:500 clamp(13px,1.05vw,15px)/1 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.vista-cap .cap i{width:12px;height:12px;background:var(--orange);display:inline-block}
.vista+#teams.sec{padding-top:clamp(56px,6vw,96px)}

/* S27: Let's talk panel (modal on every page, inline on /contact) */
.talk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:var(--bg);color:var(--ink);overflow:hidden}
.talk-img{position:relative;overflow:hidden;background:var(--band);min-height:320px}
.talk-photo{position:absolute;inset:0;background:url(/assets/img/colonnade-close.jpg) center/cover;filter:grayscale(1) contrast(1.05) brightness(.9);transform:scale(1.08);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.talk-photo.in{transform:scale(1)}
.talk-img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.6));pointer-events:none}
.talk-cells{position:absolute;inset:0;display:grid;pointer-events:none}
.talk-cells i{background:var(--bg);outline:1px solid var(--line);outline-offset:-.5px;transition:opacity .45s ease}
.talk-cells i.off{opacity:0}
.talk-cells i.mark{background:transparent;outline:1.5px solid var(--orange);outline-offset:-1px;opacity:0}
.talk-cells i.mark.off{opacity:1}
.talk-cap{position:absolute;left:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,30px);z-index:2;display:inline-flex;align-items:center;gap:10px;color:#fff;font:500 12.5px/1 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.talk-cap i{width:10px;height:10px;background:var(--orange)}
.talk-body{padding:clamp(28px,3.4vw,52px);overflow:auto}
.talk-body h2{font-size:clamp(34px,3.4vw,52px);line-height:1.04;letter-spacing:-.035em;font-weight:400;margin:0 0 14px}
.talk-sub{color:var(--soft);font-size:clamp(16px,1.2vw,18px);margin:0 0 28px;max-width:46ch}
.talk .chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.talk .chips legend{font-size:15px;font-weight:500;margin-bottom:12px;padding:0}
.talk .chips label{display:inline-flex;cursor:pointer}
.talk .chips input{position:absolute;opacity:0;width:1px;height:1px}
.talk .chips label span{font:500 12px/1 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:10px 12px;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
.talk .chips label:hover span{border-color:var(--ink)}
.talk .chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.talk .chips input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.talk .chips .err{flex-basis:100%}
.talk .chips[aria-invalid="true"] label span{border-color:#C0392B}
.talk .form{gap:16px}
.talk .form textarea{min-height:110px}
.talk-mail{margin:22px 0 0;font-size:15px;color:var(--soft)}
.talk-mail a{color:var(--ink);border-bottom:1px solid var(--line)}
.talk-scrim{position:fixed;inset:0;background:rgba(12,11,13,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:200}
.talk-scrim.open{opacity:1;pointer-events:auto}
.talk-modal{position:fixed;z-index:201;top:50%;left:50%;width:min(1180px,calc(100vw - 48px));height:min(760px,calc(100vh - 48px));border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.25);transform:translate(-50%,-48%);opacity:0;pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.talk-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.talk-x{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.talk-x:hover{border-color:var(--ink)}
html.talk-lock,html.talk-lock body{overflow:hidden}
.talk-page{padding:clamp(96px,11vw,140px) 0 clamp(56px,7vw,96px)}
.talk-inline{border-radius:6px;border:1px solid var(--line);min-height:min(760px,calc(100vh - 160px))}
@media (max-width:900px){
  .talk{grid-template-columns:1fr}
  .talk-img{min-height:160px;height:160px}
  .talk-modal{width:100vw;height:100dvh;border-radius:0;top:0;left:0;transform:translateY(16px)}
  .talk-modal.open{transform:none}
  .talk-modal .talk-body{overflow:auto}
  .talk-modal{display:flex;flex-direction:column}
  .talk-modal .talk-body{flex:1}
  .talk .form .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.talk-photo,.talk-modal,.talk-scrim{transition:none}}

/* S28: smooth scrolling. Moving layers get their own compositor layer; the photo band stays off the main paint */
.reel ul,.ftrack,.vista-img,.talk-photo{will-change:transform;backface-visibility:hidden}
.vista,.reel{contain:paint}
.vista-cells{contain:strict}

/* S30: the panel slides in from the right (toshicube's motion), the form first, then the photo opens leftward behind it */
.talk-modal{left:auto;right:24px;top:24px;transform:translateX(calc(100% + 48px));opacity:1;transition:transform .7s cubic-bezier(.76,0,.24,1),visibility 0s linear .7s;visibility:hidden}
.talk-modal.open{transform:none;visibility:visible;transition:transform .7s cubic-bezier(.76,0,.24,1),visibility 0s}
.talk-modal .talk-img{clip-path:inset(0 0 0 100%);transition:clip-path .8s cubic-bezier(.76,0,.24,1)}
.talk-modal.open .talk-img{clip-path:inset(0 0 0 0);transition-delay:.38s}
.talk-modal .talk-body>*{opacity:0;transform:translateX(24px);transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.talk-modal.open .talk-body>*{opacity:1;transform:none;transition-delay:.3s}
.talk-modal.open .talk-body>*:nth-child(2){transition-delay:.36s}
.talk-modal.open .talk-body>*:nth-child(3){transition-delay:.42s}
.talk-modal.open .talk-body>*:nth-child(4){transition-delay:.48s}
@media (max-width:900px){
  .talk-modal{right:0;top:0;transform:translateY(100%)}
  .talk-modal.open{transform:none}
  .talk-modal .talk-img{clip-path:inset(100% 0 0 0)}
}
@media (prefers-reduced-motion:reduce){.talk-modal,.talk-modal .talk-img,.talk-modal .talk-body>*{transition:none!important}.talk-modal .talk-img{clip-path:none}}

/* S31: the panel takes the whole window inside a 24px border, and the form is laid out to fit without scrolling */
.talk-modal{inset:24px;width:auto;height:auto;right:24px;left:24px;top:24px;bottom:24px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.talk-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.6vh,52px) clamp(32px,4vw,72px)}
.talk-body h2{font-size:clamp(32px,4.6vh,52px);margin-bottom:10px}
.talk-sub{margin-bottom:clamp(16px,2.6vh,28px);max-width:60ch}
.talk .form{gap:clamp(10px,1.6vh,16px)}
.talk .form .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.talk .form label{gap:6px}
.talk .form input:not([type=checkbox]),.talk .form textarea{padding-top:10px;padding-bottom:10px}
.talk .form textarea{min-height:clamp(64px,10vh,120px);height:clamp(64px,10vh,120px)}
.talk .chips legend{margin-bottom:10px}
.talk-mail{margin-top:clamp(10px,1.8vh,22px)}
.talk-x{top:16px;right:16px}
@media (max-height:700px){.talk-sub{font-size:15.5px}.talk .chips span{padding:8px 10px}.talk .form .check{font-size:14px}}
@media (max-width:1100px){.talk .form .row3{grid-template-columns:1fr 1fr}.talk .form .row3>label:last-child{grid-column:1/-1}}
@media (max-width:900px){.talk-modal{inset:0}.talk-body{display:block}.talk .form .row3{grid-template-columns:1fr}.talk .form textarea{height:auto;min-height:110px}}

.talk .form-foot .talk-mail{margin:0 0 0 auto}
@media (max-height:700px){.talk-body{padding:22px clamp(28px,3.4vw,56px)}.talk-body h2{font-size:32px;margin-bottom:6px}.talk-sub{margin-bottom:14px}.talk .form{gap:10px}}
.talk .form .row3{align-items:start}.talk .form .row3>label{align-content:start}
/* S32: Let's talk dominates; the line under it is lighter in weight but full ink */
.talk-body h2{font-size:clamp(44px,9vh,92px);line-height:.98;letter-spacing:-.045em;margin-bottom:clamp(10px,1.6vh,18px)}
.talk-sub{color:var(--ink);font-weight:300;font-size:clamp(16px,2.4vh,21px);line-height:1.45}
@media (max-height:700px){.talk-body h2{font-size:52px;margin-bottom:8px}.talk-sub{font-size:16px;margin-bottom:12px}.talk .form textarea{height:56px;min-height:56px}.talk .chips legend{margin-bottom:8px}.talk .form label{gap:4px}}
.talk .form .err:empty{display:none}
@media (max-height:700px){.talk-body h2{font-size:66px}}
/* S33: the topic question and unselected chips sit a step back in grey; the chosen chip stays full ink */
.talk .chips legend,.talk .chips label span{color:color-mix(in srgb,var(--ink) 30%,var(--soft))}
.talk .chips label:hover span{color:var(--ink)}
.talk .chips input:checked+span{color:var(--bg)}

/* S34: the photo travels in with the panel (no white reveal) and plays the Home band's motion once:
   it settles from a gentle zoom and drift while the grid lines fade and a few cells mark in orange */
.talk-modal .talk-img,.talk-modal.open .talk-img{clip-path:none}
.talk-cells i{background:transparent;outline:1px solid rgba(255,255,255,.28);outline-offset:-.5px;transition:opacity .6s ease}
.talk-photo{transform:scale(1.14) translate3d(0,-3%,0);transition:transform 2.6s cubic-bezier(.16,1,.3,1)}
.talk-photo.in{transform:scale(1) translate3d(0,0,0)}

/* S35: cells cover the photo in the page colour and clear on every open, as on the Home band */
.talk-cells i{background:var(--bg);outline:1px solid var(--line);outline-offset:-.5px;transition:opacity .45s ease}
.talk-cells i.mark{background:transparent;outline:1.5px solid var(--orange);outline-offset:-1px;opacity:0}
.talk-cells i.mark.off{opacity:1}

/* S36: bigger cubes, quicker reveal */
.talk-cells i{transition:opacity .28s ease}
.talk-photo{transition:transform 1.6s cubic-bezier(.16,1,.3,1)}

/* S44: industry pages (banking, insurance, superannuation) */
.phero .copy .lab a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.istat .n{margin:0 0 auto;font-size:clamp(52px,5.2vw,84px);white-space:nowrap}
.sec.slim{padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}
.istat .what{margin-top:18px;color:var(--ink);font-size:17px;max-width:22em}
.istat .src{margin-top:14px;color:var(--soft);text-decoration:none;font-size:11px;letter-spacing:.06em}
.istat .src:hover{color:var(--ink)}
.ucgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px)}
.uc .ucimg{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);border-radius:2px;margin-bottom:18px}
.uc .ucimg img{width:100%;height:100%;object-fit:cover;display:block}
.uc .id{display:none}
:root[data-theme="dark"] .uc .il{display:none}:root[data-theme="dark"] .uc .id{display:block}
.uc h3{font-size:clamp(19px,1.5vw,22px);font-weight:500;letter-spacing:-.015em;line-height:1.25}
.uc p{color:var(--soft);font-size:16px;margin-top:8px;max-width:30em}
.estrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.est{padding:28px clamp(16px,2vw,32px) 8px 0}
.est+.est{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--line)}
.est .n{font-size:clamp(34px,3.6vw,54px);letter-spacing:-.035em;line-height:1.05}
.est p{color:var(--soft);font-size:16px;margin-top:12px;max-width:22em}
.faqwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(32px,6vw,110px);align-items:start}
.faq .qa{border-top:1px solid var(--line);padding:22px 0}
.faq .qa:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.015em;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-weight:300;transition:transform .25s ease}
.faq .qa[open] summary::after{transform:rotate(45deg)}
.faq .qa p{color:var(--soft);font-size:16.5px;margin-top:12px;max-width:40em}
.others{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.others .mono{color:var(--soft);margin-right:10px}
.others a{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.015em;text-decoration:none;color:var(--ink)}
.others a:hover{color:var(--orange)}
@media (max-width:900px){.ucgrid{grid-template-columns:1fr 1fr}.faqwrap{grid-template-columns:1fr}.estrow{grid-template-columns:1fr}.est+.est{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:700px){.ucgrid{grid-template-columns:1fr}.istat{display:flex;min-height:0}.istat .n{font-size:48px}}
.uc.ucl{display:block;text-decoration:none;color:inherit}.uc.ucl:hover h3{color:var(--orange)}

/* S49: Home obligation chips and standards badges link to their place on Frameworks */
:is(#asks,#questions) .obl a{text-decoration:none;transition:border-color .2s,color .2s}
:is(#asks,#questions) .obl a:hover,:is(#asks,#questions) .obl a:focus-visible{border-color:var(--orange);color:var(--orange)}
/* Frameworks: the scope card or standards row a link lands on is marked briefly */
#scope li[id],.dtable tr[id]{scroll-margin-top:calc(var(--hh) + 24px)}
@keyframes landed{from{box-shadow:inset 0 0 0 2000px rgba(240,90,36,.14)}to{box-shadow:inset 0 0 0 2000px rgba(240,90,36,0)}}
#scope li:target,.dtable tr:target td{animation:landed 2.4s ease-out .3s both}
@media (prefers-reduced-motion:reduce){#scope li:target,.dtable tr:target td{animation:none}}
/* S49: Frameworks, APRA, ASIC and Privacy Act as tabs (mock-up frameworks-expectations-v4) */
/* a sliding plate (same fill as the panel) marks the selected source and joins it to the panel */
.xtabwrap{display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);align-items:stretch}
.xtabs{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px 0}
.xplate{position:absolute;left:0;right:0;top:0;height:0;background:var(--bg);border-radius:2px 0 0 2px;transition:transform .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.xtabs button{all:unset;position:relative;z-index:1;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:baseline;gap:12px;padding:20px 22px;color:var(--soft);transition:color .3s}
.xtabs .src{font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);transition:color .3s;white-space:nowrap}
.xtabs .ttl{font:400 19px/1.25 'DM Sans',sans-serif;letter-spacing:-.015em}
.xtabs .arr{width:14px;height:14px;align-self:center;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1);color:var(--orange)}
.xtabs button:hover{color:var(--ink)}
.xtabs button[aria-selected="true"]{color:var(--ink)}
.xtabs button[aria-selected="true"] .src{color:var(--orange)}
.xtabs button[aria-selected="true"] .arr{opacity:1;transform:none}
.xtabs button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.xpanels{position:relative;display:grid;background:var(--bg);border-radius:0 2px 2px 2px;padding:clamp(26px,3vw,42px)}
.xpanel{grid-area:1/1;opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s .5s}
.xpanel.on{opacity:1;transform:none;visibility:visible;transition:opacity .45s ease .1s,transform .55s cubic-bezier(.2,.8,.2,1) .1s,visibility 0s}
.xtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px 24px;flex-wrap:wrap;margin-bottom:16px}
.xtop h3{font-size:clamp(24px,2.2vw,32px);font-weight:400;letter-spacing:-.025em;line-height:1.15;margin:0}
.xtop h3 span{font-weight:600;margin-left:.35em}
.xwhen{font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);padding:8px 10px;border-radius:2px;white-space:nowrap}
.xwhen.soon{color:var(--orange);border-color:var(--orange)}
.xl{font-size:clamp(18px,1.5vw,21px);line-height:1.4;letter-spacing:-.01em;margin:0;max-width:34em}
.xk{display:block;margin-top:24px;font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.xt{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.xt li{position:relative;padding:11px 0 11px 22px;border-top:1px solid var(--line);font-size:15.5px}
.xt li::before{content:"";position:absolute;left:1px;top:19px;width:7px;height:7px;background:var(--orange)}
.xf{display:flex;gap:18px;align-items:center;margin:22px 0 0;font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.xf a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.xf a:hover{border-color:var(--orange)}
@media (max-width:900px){
  .xtabwrap{grid-template-columns:1fr}
  .xtabs{padding:0 0 8px;gap:2px}
  .xplate{border-radius:2px}
  .xtabs button{padding:14px 16px}
  .xtabs .ttl{font-size:16.5px}
  .xpanels{border-radius:2px}
  .xt{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.xpanel,.xpanel.on,.xplate{transition:none}}
/* S50: outside-source link (site standard): the text arrow, grey at rest, orange and a nudge right on hover, no underline, opens in a new tab */
.xlink{display:inline-block;margin-left:6px;color:var(--soft);font-weight:500;text-decoration:none;border:0;transition:color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.xlink:hover,.xlink:focus-visible{color:var(--orange);transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.xlink{transition:color .2s}.xlink:hover,.xlink:focus-visible{transform:none}}
.dtable .nw{white-space:nowrap}
/* the date tag is the source link: an arrow slides in on hover and the tag nudges right; always shown on touch screens */
:is(#expectations,#capabilities) .xgo{display:inline-flex;align-items:center;text-decoration:none;transition:color .2s,border-color .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
:is(#expectations,#capabilities) .xga{display:inline-block;max-width:0;opacity:0;overflow:hidden;margin-left:0;transform:translateX(-4px);transition:max-width .3s cubic-bezier(.2,.8,.2,1),opacity .2s,margin-left .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
:is(#expectations,#capabilities) .xgo:hover,:is(#expectations,#capabilities) .xgo:focus-visible{color:var(--orange);border-color:var(--orange);transform:translateX(2px)}
:is(#expectations,#capabilities) .xgo:hover .xga,:is(#expectations,#capabilities) .xgo:focus-visible .xga{max-width:1.4em;opacity:1;margin-left:8px;transform:none}
@media (hover:none){:is(#expectations,#capabilities) .xga{max-width:1.4em;opacity:1;margin-left:8px;transform:none}}
@media (prefers-reduced-motion:reduce){:is(#expectations,#capabilities) .xgo,:is(#expectations,#capabilities) .xga{transition:none}}
:is(#expectations,#capabilities) .note{font-size:12.5px;font-weight:300;opacity:.8;margin-top:16px}
#standards h2 b{font-weight:600}

/* S53: Global standards as a world dot map (Frameworks #standards). Orange squares mark issuers; hover, focus or tap opens
   the region card. Items react as a whole: Australian frameworks go to their section here, the rest open the source. */
#standards .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#standards [hidden]{display:none!important}
#standards{overflow-x:clip}
.dots rect{fill:color-mix(in srgb,var(--ink) 16%,transparent);transform-box:fill-box;transform-origin:center}
.dots.pre rect{opacity:0;transform:scale(.2)}
.dots.go rect{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d) * 1ms)}

/* A: the world as a field of grey squares; an orange square marks each place that issues a standard we reference.
   Selecting one grows it into a card listing those standards, each with its scope and a link to the source */
.mapbox{position:relative;width:100%;aspect-ratio:var(--ar)}
.mapbox .dots{position:absolute;inset:0;width:100%;height:100%}
.hub{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.hubdot{all:unset;position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:var(--orange);cursor:pointer;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.mapbox.live .hubdot{transform:scale(1)}
.hubdot::after{content:"";position:absolute;inset:-6px;border:1px solid var(--orange);opacity:0;animation:ping 2.6s cubic-bezier(.2,.8,.2,1) infinite}
.hub.open .hubdot::after,.mapbox:not(.live) .hubdot::after{animation:none}
@keyframes ping{0%{opacity:.7;transform:scale(.6)}80%,100%{opacity:0;transform:scale(1.6)}}
.hubdot:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.hub.home .hubdot{background:var(--ink);width:14px;height:14px;left:-7px;top:-7px}
.hub.home .hubdot::after{display:none}
.hublab{position:absolute;left:16px;top:-6px;white-space:nowrap;font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .25s,color .2s;cursor:pointer;padding:4px 0}
.mapbox.live .hublab{animation:labin .5s .9s both}
@keyframes labin{from{opacity:0}to{opacity:1}}
.hublab:hover{color:var(--orange)}
.hub.lft .hublab{left:auto;right:16px}
.hub.open .hublab{opacity:0!important}
.hc-in h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:0 0 4px;color:var(--ink)}

.hubcard{--t:0px;position:absolute;top:calc(-9px - var(--t));left:-9px;z-index:5;width:min(380px,70vw);background:var(--orange);color:var(--bg);visibility:hidden;clip-path:inset(var(--t) calc(100% - 18px) calc(100% - var(--t) - 18px) 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1),background-color .45s ease,visibility 0s .6s}
.hub.flip .hubcard{left:auto;right:-9px;clip-path:inset(var(--t) 0 calc(100% - var(--t) - 18px) calc(100% - 18px))}
.hub.open .hubcard{visibility:visible;clip-path:inset(0 0 0 0)!important;background:var(--bg);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.14);transition:clip-path .7s cubic-bezier(.7,0,.2,1),background-color .5s ease .25s,visibility 0s}
.hc-in{padding:24px 26px 18px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .4s}
.hub.open .hc-in{opacity:1;transform:none;transition:opacity .4s .45s,transform .5s cubic-bezier(.2,.8,.2,1) .45s}
.hc-in .mono{color:var(--orange)}
.hc-in ul{list-style:none;margin:12px 0 0;padding:0}
.hc-in li{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid var(--line)}
.hc-in li b{font-weight:500;font-size:17px;letter-spacing:-.01em}
.hc-in li span{color:var(--soft);font-size:14.5px;line-height:1.4}
.hub.open{z-index:6}
/* items in the region cards and card view: the whole item reacts; a click goes to its section on this page (Australian
   frameworks) or opens its source; the arrow alone always opens the source and widens to 'Source →' on hover */
.it{cursor:pointer;transition:background-color .2s ease}
.hc-in li.it{margin:0 -12px;padding:12px;border-radius:2px}
.hc-in li.it:hover,.hc-in li.it:focus-visible{background:var(--band)}
.it:hover b,.it:hover h3,.it:focus-visible b,.it:focus-visible h3{color:var(--orange)}
.it b,.it h3{transition:color .2s}
.ccard.it:hover,.ccard.it:focus-visible{background:color-mix(in srgb,var(--band) 70%,var(--ink) 6%)}
.it:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.xsrc{display:inline-flex;align-items:baseline;white-space:nowrap}
.xsrc .xs{display:inline-block;max-width:0;overflow:hidden;opacity:0;margin-right:0;transition:max-width .3s cubic-bezier(.2,.8,.2,1),opacity .2s,margin-right .3s}
.xsrc:hover .xs,.xsrc:focus-visible .xs{max-width:4.5em;opacity:1;margin-right:5px}
.it:hover .xsrc{color:var(--ink)}
.xsrc:hover{color:var(--orange)!important}
/* understated switch under the map: map or a one-screen card overview */
.viewsw{display:flex;justify-content:flex-end;margin-top:14px}
.vbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);padding:6px 0;transition:color .2s}
.vbtn:hover,.vbtn:focus-visible{color:var(--orange)}
.vbtn:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.vi{display:grid;grid-template-columns:repeat(2,5px);gap:2px}
.vi i{width:5px;height:5px;background:currentColor;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.vbtn[aria-pressed="true"] .vi i:nth-child(1){transform:translate(3.5px,3.5px)}
.vbtn[aria-pressed="true"] .vi i:nth-child(2){transform:translate(-3.5px,3.5px)}
.vbtn[aria-pressed="true"] .vi i:nth-child(3){transform:translate(3.5px,-3.5px)}
.vbtn[aria-pressed="true"] .vi i:nth-child(4){transform:translate(-3.5px,-3.5px)}
.mapbox{transition:opacity .45s ease,filter .45s ease}
.smapA.cards .mapbox{display:none}
.cardsv{margin-top:6px}
.cregion{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.cregion:first-child{border-top:0;padding-top:4px}
.crh h3{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:0}
.crh .mono{display:block;margin-top:6px;color:var(--orange);font-size:11px}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ccard{background:var(--band);border-radius:2px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(10px) scale(.98)}
.cardsv.in .ccard{opacity:1;transform:none;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 45ms)}

.ccard h3{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:2px 0 0}
.ccard p{color:var(--soft);font-size:14px;line-height:1.45;margin:0}
@media (max-width:1000px){.cregion{grid-template-columns:1fr;gap:12px}.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.viewsw{display:none}}
.mlist{display:none;margin-top:22px}
.mgroup{padding:16px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hh) + 16px)}
.mgroup .mono{color:var(--orange)}
.mgroup ul{list-style:none;margin:8px 0 0;padding:0}
.mgroup li{display:flex;flex-direction:column;gap:2px;padding:9px 0}
.mgroup li b{font-weight:500;font-size:16px}
.mgroup li span{color:var(--soft);font-size:14px;line-height:1.4}

@media (max-width:640px){
  .hubcard{display:none}
  .hublab{display:none}
  .hubdot{width:12px;height:12px;left:-6px;top:-6px}
  .mlist{display:block}
}
@media (prefers-reduced-motion:reduce){.dots.go rect,.hubdot,.hubcard,.hc-in{transition:none!important}.hubdot::after{display:none}}

#standards .it:target,#standards .it.landed{animation:landed 2.4s ease-out .3s both}

/* S54: Australian rules in one card section (Frameworks :is(#expectations,#capabilities)): cogna.co dashed blueprint frame (mock-up
   frameworks-expectations-v5-frames, option A) with the selector on the left; hovering a selector row shades the whole row. CPS 230, CPS 234 and FAR (mapped in the registry)
   and the APRA letter, ASIC REP 798 and Privacy Act guidance share it. Steps through once on first view, a thin bar timing each */
:is(#expectations,#capabilities) .xtabwrap.au{grid-template-columns:minmax(0,340px) minmax(0,1fr);border:1px dashed color-mix(in srgb,var(--ink) 28%,transparent)}
:is(#expectations,#capabilities) .au .xtabs{order:0;padding:0;gap:0;border-right:1px dashed color-mix(in srgb,var(--ink) 28%,transparent)}
:is(#expectations,#capabilities) .au .xplate{display:none}
:is(#expectations,#capabilities) .au .xgrp{display:block;padding:18px 24px 8px;font:500 10.5px/1 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
:is(#expectations,#capabilities) .au .xgrp+button{border-top:0}
:is(#expectations,#capabilities) .au .xgrp:not(:first-child){border-top:1px dashed color-mix(in srgb,var(--ink) 28%,transparent);margin-top:0;padding-top:20px}
:is(#expectations,#capabilities) .au .xtabs button{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 24px;border-top:1px dashed color-mix(in srgb,var(--ink) 14%,transparent);color:var(--soft)}
:is(#expectations,#capabilities) .au .xtabs button::before{content:"";width:8px;height:8px;background:var(--orange);transform:scale(0);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
:is(#expectations,#capabilities) .au .xtabs button[aria-selected="true"]::before{transform:scale(1)}
:is(#expectations,#capabilities) .au .xtabs button{transition:color .25s,background-color .25s}
:is(#expectations,#capabilities) .au .xtabs button:hover,:is(#expectations,#capabilities) .au .xtabs button[aria-selected="true"]{color:var(--ink)}
:is(#expectations,#capabilities) .au .xtabs button:hover,:is(#expectations,#capabilities) .au .xtabs button:focus-visible{background:color-mix(in srgb,var(--ink) 5%,transparent)}
:is(#expectations,#capabilities) .au .xtabs button:hover .src{color:var(--ink)}
:is(#expectations,#capabilities) .au .xtabs button[aria-selected="true"]:hover .src{color:var(--orange)}
:is(#expectations,#capabilities) .au .xtabs .ttl{font-size:17px;line-height:1.3}
:is(#expectations,#capabilities) .au .xtabs .src{font-size:10.5px}
:is(#expectations,#capabilities) .au .xtabs i.bar{position:absolute;left:24px;right:24px;bottom:-1px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left}
:is(#expectations,#capabilities) .au .xtabs.auto button[aria-selected="true"] i.bar{animation:barfill 3s linear forwards}
:is(#expectations,#capabilities) .au .xpanels{order:1;background:transparent;border-radius:0}
:is(#expectations,#capabilities) .au .xwhen{border-style:dashed}
:is(#expectations,#capabilities) .au .xt{grid-template-columns:repeat(2,minmax(0,1fr))}
:is(#expectations,#capabilities) .au .xt.pairs li{display:flex;flex-direction:column;gap:3px}
:is(#expectations,#capabilities) .au .xin{color:var(--soft);font-size:14px;line-height:1.4}
:is(#expectations,#capabilities) .au .xin::before{content:"In CognaOne: ";color:var(--ink);font-weight:500}
:is(#expectations,#capabilities) .au .xreg{display:flex;align-items:center;gap:10px;margin:22px 0 0;font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
:is(#expectations,#capabilities) .au .xreg i{width:7px;height:7px;background:var(--ink)}
@media (max-width:900px){
  :is(#expectations,#capabilities) .xtabwrap.au{grid-template-columns:1fr}
  :is(#expectations,#capabilities) .au .xtabs{order:0;border-right:0;border-bottom:1px dashed color-mix(in srgb,var(--ink) 28%,transparent)}
  :is(#expectations,#capabilities) .au .xtabs button{padding:12px 16px}
  :is(#expectations,#capabilities) .au .xgrp{padding:14px 16px 6px}
  :is(#expectations,#capabilities) .au .xtabs i.bar{left:16px;right:16px}
  :is(#expectations,#capabilities) .au .xt{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){:is(#expectations,#capabilities) .au .xtabs.auto button[aria-selected="true"] i.bar{animation:none}}
@keyframes barfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* S55: "On this page" scrolls up with the page and stops at the top, as it is (no re-layout): position sticky, the header's own
   height on laptops and up, the current section underlined in orange. Opening the site menu slides it down one band so the menu bar
   shows above it, closing slides it back; after the last section it steps away. Phones and tablets: stops under the solid header */
.onpage{position:sticky;top:env(safe-area-inset-top,0px);z-index:45;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
@media (min-width:901px){.onpage{height:var(--hh);display:flex;align-items:center}.onpage .wrap{width:100%;padding-top:0;padding-bottom:0}}
.onpage a{transition:border-color .25s,color .25s}
.onpage a.act{border-color:var(--orange)}
body.xh-open .onpage.stuck{transform:translateY(var(--hh))}
.onpage.stuck.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
@media (max-width:900px){
  .onpage{top:calc(env(safe-area-inset-top,0px) + var(--hh))}
  body.xh-open .onpage.stuck{transform:none;opacity:0;pointer-events:none}
  .onpage.stuck.gone{transform:translateY(-46px)}
  html.op-stuck{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--hh) + 50px)}
}
@media (prefers-reduced-motion:reduce){.onpage{transition:none}}
/* S54: the selector rows share the card's full height evenly (group labels keep their size) */
@media (min-width:901px){:is(#expectations,#capabilities) .au .xtabs{display:flex;flex-direction:column}:is(#expectations,#capabilities) .au .xtabs button{flex:1 1 0;min-height:52px}:is(#expectations,#capabilities) .au .xgrp{flex:none}}
/* S54: each panel fills the card. The tallest panel (CPS 230) sets the height; shorter ones spread their list over the space:
   rows stretch evenly and each point sits centred in its row, plain lists go to one column, the registry line sits at the foot */
@media (min-width:901px){
  :is(#expectations,#capabilities) .au .xpanel{display:flex;flex-direction:column}
  :is(#expectations,#capabilities) .au .xt{flex:1 1 auto;grid-auto-rows:1fr;align-content:stretch}
  :is(#expectations,#capabilities) .au .xt:not(.pairs){grid-template-columns:1fr}
  :is(#expectations,#capabilities) .au .xt li{display:flex;align-items:center;padding-top:10px;padding-bottom:10px}
  :is(#expectations,#capabilities) .au .xt li::before{display:none}
  :is(#expectations,#capabilities) .au .xt li>div{position:relative}
  :is(#expectations,#capabilities) .au .xt li>div::before{content:"";position:absolute;left:-21px;top:.55em;width:7px;height:7px;background:var(--orange)}
  :is(#expectations,#capabilities) .au .xt.pairs li>div{display:flex;flex-direction:column;gap:3px}
  :is(#expectations,#capabilities) .au .xt:not(.pairs) li{font-size:16.5px}
  :is(#expectations,#capabilities) .au .xt:not(.pairs) li:last-child{border-bottom:1px solid var(--line)}
  :is(#expectations,#capabilities) .au .xt.pairs li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  :is(#expectations,#capabilities) .au .xreg{margin-top:auto;padding-top:22px}
}
/* S54: the content panel sets the card height; the selector fills it without adding height of its own */
@media (min-width:901px){:is(#expectations,#capabilities) .xtabwrap.au{position:relative}:is(#expectations,#capabilities) .au .xtabs{position:absolute;top:0;bottom:0;left:0;width:340px}:is(#expectations,#capabilities) .au .xpanels{grid-column:2}}
:is(#expectations,#capabilities) .au .xt.pairs li>div{display:flex;flex-direction:column;gap:3px}
:is(#expectations,#capabilities) .au .xgrp{color:var(--ink);font-weight:500}
:is(#expectations,#capabilities) .au .xtabs button{box-sizing:border-box}
/* S56: Frameworks "One AI system, layers of obligation" as a compact dark band (same dark as the hero, in both themes).
   While in view it steps through the five layers, 2.25 s each, lighting the row and its ring on the left; the rings inside it stay
   faintly lit so the layers build outwards. Hover or focus on a row takes over and pauses it */
#scope.dark{--bg:var(--dark);--ink:#F4F2EE;--soft:#9A958F;--line:rgba(255,255,255,.12);background:var(--dark);color:var(--ink);padding:clamp(64px,7.5vw,112px) 0}
#scope .head{margin-bottom:clamp(28px,3.5vw,48px)}
#scope .head .sub{color:var(--soft)}
#scope .scope{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,80px)}
#scope .rings{max-width:360px}
#scope .rings i{border-color:rgba(255,255,255,.13)!important;transition:border-color .9s cubic-bezier(.2,.8,.2,1),box-shadow .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
#scope .rings i.lit{border-color:rgba(240,90,36,.38)!important}
#scope .rings i.on{border-color:var(--orange)!important;box-shadow:0 0 0 1px rgba(240,90,36,.35),0 0 34px rgba(240,90,36,.28),inset 0 0 34px rgba(240,90,36,.16);transform:scale(1.015)}
#scope .rings b{box-shadow:0 0 0 0 rgba(240,90,36,.45);animation:core 2.25s ease-out infinite}
@keyframes core{from{box-shadow:0 0 0 0 rgba(240,90,36,.45)}to{box-shadow:0 0 0 18px rgba(240,90,36,0)}}
#scope .layers li{position:relative;grid-template-columns:30px minmax(0,220px) minmax(0,1fr);gap:20px;padding:17px 0;border-color:var(--line);cursor:default;transition:opacity .6s ease}
#scope .layers li::before{font-size:13px}
#scope .layers h3{font-size:clamp(18px,1.55vw,21px);transition:color .6s ease}
#scope .layers p{font-size:15px;line-height:1.45;color:var(--soft)}
#scope .layers .where{color:var(--ink);font-size:11px;margin-top:6px}
#scope .layers li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity .4s}
#scope .layers.play li{opacity:.42}
#scope .layers.play li.on,#scope .layers li.on{opacity:1}
#scope .layers li.on h3{color:#fff}
#scope .layers.play.run li.on::after{opacity:1;animation:barfill 2.25s linear forwards}
#scope li:target{animation:none}
@media (max-width:900px){
  #scope .rings{max-width:240px}
  #scope .layers li{grid-template-columns:26px minmax(0,1fr);gap:10px;padding:14px 0}
}
@media (prefers-reduced-motion:reduce){#scope .rings b{animation:none}#scope .rings i,#scope .layers li{transition:none}}
/* S57: footer tagline smaller and lighter */
.fbrand p{font-size:13.5px;font-weight:300;line-height:1.5;opacity:.8}
/* S56 tune: the layer names stay on one line; the stepper starts when the list is mid-screen on any height */
#scope .layers li{grid-template-columns:30px minmax(0,250px) minmax(0,1fr)}
@media (max-width:900px){#scope .scope{grid-template-columns:1fr;gap:28px}#scope .layers li{grid-template-columns:26px minmax(0,1fr)}}
@media (min-width:701px) and (max-width:900px){#scope .layers li{grid-template-columns:26px minmax(0,210px) minmax(0,1fr)}}
/* S56 tune: descriptions brighter, the status line under them dimmer */
#scope .layers p{color:#D9D5CF}
#scope .layers .where{color:var(--soft)}
/* S58: Home "On this page" (.onpage.float): not shown over the hero; once the hero has scrolled away it fades in, in the header band,
   with the same look and behaviour as the sticky bar on inner pages */
.onpage.float{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.onpage.float.stuck{opacity:1;transform:none;pointer-events:auto}
body.xh-open .onpage.float.stuck{transform:translateY(var(--hh))}
.onpage.float.stuck.gone{opacity:0;transform:translateY(-100%);pointer-events:none}
@media (max-width:900px){.onpage.float{top:calc(env(safe-area-inset-top,0px) + var(--hh))}body.xh-open .onpage.float.stuck{transform:none;opacity:0;pointer-events:none}.onpage.float.stuck.gone{transform:translateY(-46px)}}
/* S59's full-height inner hero rules and S62's height for it were folded into the S73 hero standard at the end of this file */
/* S60: screen-height sections (laptops and up). A .fit section fills the screen below the header band (the sticky "On this page"
   shares that band), content centred; spacing and type scale with the screen height so the content fits. Closing band and
   footer are exempt */
@media (min-width:901px){
  .sec.fit{min-height:calc(100vh - var(--hh));min-height:calc(100svh - var(--hh));display:flex;align-items:center;padding:clamp(28px,5vh,64px) 0;box-sizing:border-box}
  .sec.fit>.wrap{width:100%}
  .sec.fit .head{margin-bottom:clamp(18px,3.4vh,44px)}
  .sec.fit h2{font-size:clamp(30px,min(3.7vw,6.4vh),66px)}
  .sec.fit .head .sub{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(15px,min(1.35vw,2.3vh),19px)}
  /* layers of obligation */
  #scope.fit .rings{max-width:min(360px,46vh)}
  #scope.fit .layers li{padding:clamp(8px,1.45vh,17px) 0}
  #scope.fit .layers h3{font-size:clamp(16px,min(1.55vw,2.6vh),21px)}
  #scope.fit .layers p{font-size:clamp(13.5px,1.95vh,15px);line-height:1.4}
  #scope.fit .layers .where{margin-top:clamp(2px,.6vh,6px)}
  /* Australian rules */
  :is(#expectations,#capabilities).fit .xpanels{padding:clamp(18px,3.4vh,42px) clamp(24px,3vw,42px)}
  :is(#expectations,#capabilities).fit .xtop{margin-bottom:clamp(8px,1.6vh,16px)}
  :is(#expectations,#capabilities).fit .xtop h3{font-size:clamp(22px,min(2.2vw,3.8vh),32px)}
  :is(#expectations,#capabilities).fit .xl{font-size:clamp(15.5px,min(1.5vw,2.5vh),21px)}
  :is(#expectations,#capabilities).fit .xk{margin-top:clamp(12px,2.4vh,24px)}
  :is(#expectations,#capabilities).fit .au .xt li{padding-top:clamp(5px,1vh,10px);padding-bottom:clamp(5px,1vh,10px);font-size:clamp(14px,2vh,15.5px)}
  :is(#expectations,#capabilities).fit .au .xt:not(.pairs) li{font-size:clamp(14.5px,2.1vh,16.5px)}
  :is(#expectations,#capabilities).fit .au .xin{font-size:clamp(12.5px,1.8vh,14px)}
  :is(#expectations,#capabilities).fit .au .xreg{padding-top:clamp(10px,2vh,22px)}
  :is(#expectations,#capabilities).fit .au .xtabs button{min-height:0;padding-top:8px;padding-bottom:8px}
  :is(#expectations,#capabilities).fit .au .xgrp{padding-top:clamp(10px,1.8vh,18px);padding-bottom:6px}
  :is(#expectations,#capabilities).fit .note{margin-top:clamp(8px,1.4vh,16px)}
  /* standards map: sized by the height left once the heading and switch are placed */
  #standards.fit .mapbox{width:min(100%,calc((100svh - var(--hh) - 330px) * 2.654));margin:0 auto}
  #standards.fit .viewsw{margin-top:8px}
  #standards.fit .links{margin-top:clamp(12px,2vh,28px)}
}
@media (min-width:901px){
  #scope.dark.fit{padding:clamp(24px,4.5vh,64px) 0}
  #scope.fit .layers li{padding:clamp(6px,1.2vh,16px) 0}
  #scope.fit .head{margin-bottom:clamp(14px,2.8vh,40px)}
}
@media (min-width:901px) and (max-width:1240px){#scope.fit .scope{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:32px}#scope.fit .layers li{grid-template-columns:24px minmax(0,190px) minmax(0,1fr);gap:14px}}
/* small laptops: "On this page" starts clear of the logo mark (resting and stuck alike, so nothing moves) */
@media (min-width:901px) and (max-width:1240px){.onpage .wrap{padding-left:max(var(--pad),84px)}}
:is(#expectations,#capabilities) .au .xt li>div{flex:1 1 auto;min-width:0}
:is(#expectations,#capabilities) .au .xt.pairs li{flex-direction:row}
/* S64: "On this page" label becomes the page name once the bar sits in the header; crossfade, no width change */
.onpage .oplab{display:inline-grid}
.onpage .oplab>*{grid-area:1/1;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.onpage .oplab .op-b{opacity:0;transform:translateY(6px)}
.onpage.stuck .oplab .op-a{opacity:0;transform:translateY(-6px)}
.onpage.stuck .oplab .op-b{opacity:1;transform:none}
/* S77: the page's name is a link back to the top once the bar is in the header; shut off while it is hidden */
.onpage .oplab .op-b{pointer-events:none;color:inherit;cursor:pointer}
.onpage.stuck .oplab .op-b{pointer-events:auto}
.onpage.stuck .oplab .op-b:hover{border-color:var(--orange)}
/* phones: the bar scrolls sideways with the section in view; the page's name stays pinned at its left edge */
@media (max-width:900px){.onpage .oplab{position:sticky;left:calc(-1 * var(--pad));z-index:1;background:var(--bg);margin-left:calc(-1 * var(--pad));padding-left:var(--pad);padding-right:12px;box-shadow:12px 0 12px -6px var(--bg)}}
.onpage .oplab .op-a{pointer-events:none}

/* ---------- Section heading standard (adopted 15 Oct 2026, design/ELEMENTS.md). Every section heading on every page: light
   weight with the key words in <strong> (bold), one size and line rhythm, and the description under it set the same way.
   The closing "Let's connect" band keeps its own larger size. site/build.py refuses a page whose section heading has no
   <strong> key word or uses <b>. ---------- */
#main .sec:not(.close) h2{font-size:clamp(38px,min(5vw,8.6vh),84px);font-weight:400;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
#main .sec:not(.close) h2 strong{font-weight:600}
#main .sec:not(.close) h2 + .sub{font-size:clamp(17px,min(1.5vw,2.6vh),21px);line-height:1.5;max-width:36em;margin-top:clamp(14px,2.2vh,22px)}
@media (max-width:700px){#main .sec:not(.close) h2{font-size:clamp(32px,9vw,42px)}}
/* Heading standard in screen-height sections: the heading runs the full width so it stays on one line and the section fits. */
#main .sec.fit .head{max-width:none}
#main .sec.fit h2 + .sub{max-width:52em}
@media (min-width:901px){
  #main :is(#scope,#expectations).fit{padding-block:clamp(18px,3vh,56px)}
  #main :is(#scope,#expectations).fit .head{margin-bottom:clamp(12px,2.4vh,36px)}
}

/* ---------- S72: hero objects. The cube matrix and the orange line are gone on every page; each page's first section carries a generated
   object drawn on canvas (see the S72 block at the end of site.js). Text, word tiles, control and legend stay. ---------- */
.hero #grid{display:none!important}
.hero .rule{display:none!important}
.hero .copy{border-color:transparent;background:transparent}
.stage{border-top:0;background:#F7F7F6}
:root[data-theme="dark"] .stage{background:#0C0B0D}
.obj{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ptile{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:color-mix(in srgb,var(--ink) 10%,transparent)}
.pctl,.legend{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:color-mix(in srgb,var(--ink) 10%,transparent)}
:root[data-hero="light"][data-theme="light"] .legend .e b{background-image:repeating-linear-gradient(135deg,rgba(20,20,20,.5) 0 1px,transparent 1px 4px)}

/* ---------- S73: one hero standard on every page, taken from Home (laptops and up). The first section fills the first screen
   (the "On this page" bar arrives with the first scroll), the headline is Home's size on three lines, the paragraph wraps to the
   headline's width so the text reads as one block, and the spacing eyebrow > headline > paragraph > buttons is Home's. ---------- */
@media (min-width:901px){
  .phero .stage.short,.phero .stage.full{height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));min-height:520px}
  .phero .copy{max-width:92%;justify-content:center;padding-top:calc(var(--cell,64px) * .62);padding-bottom:calc(var(--cell,64px) * .74)}
  .phero .copy h1{font-size:calc(clamp(40px,min(5.2vw,10vh),132px) * var(--hs,1));margin-left:-.045em;white-space:nowrap}
  .phero .copy p{opacity:.74;margin-top:calc(var(--sp,var(--cell,64px)) * .95);max-width:min(31em,max(22em,var(--hw,31em)))}
  .phero .copy .cta{margin-top:calc(var(--sp,var(--cell,64px)) * .8)}
  /* the page label sits where Home's eyebrow does: one cube row above the block */
  .phero .copy .lab{position:absolute;left:var(--plx,56px);top:calc(-1 * var(--cell,64px) - 1px);height:var(--cell,64px);line-height:var(--cell,64px);display:block;margin:0;font-size:12px;letter-spacing:.14em;white-space:nowrap}
}
/* S79: phones: the first sections carry no background object */
@media (max-width:700px){.hero canvas.obj{display:none}}
/* S79: phones: the Home eyebrow wraps onto two lines instead of running off the screen */
@media (max-width:700px){.hmeta{flex-wrap:wrap;white-space:normal;row-gap:6px}.hmeta b{display:none}.hmeta span:last-child{flex-basis:100%;padding-left:17px}}
/* S84: the current page's menu item keeps its orange line (wide screens; the phone sheet marks the open list instead) */
@media (min-width:901px){.xh-top.cur::after{transform:scaleX(1)}}
/* S97: letter-spacing standard for every page (mock-up heading-spacing-v1, option C, adopted 18 Oct 2026).
   Large headings (every h1 and h2: heroes, section headings, closing bands, question blocks, the contact panel, reader
   pages) use the hero standard -0.012em. Long statements (a sentence or two set large, e.g. Company's belief) use +0.01em:
   give the heading class "ls-statement". Set here last and marked important so page and component rules cannot drift. */
:root{--ls-display:-.012em;--ls-statement:.01em}
:is(h1,h2){letter-spacing:var(--ls-display)!important}
:is(h1,h2).ls-statement,#belief .stmt h2{letter-spacing:var(--ls-statement)!important}

/* S100: phones: no hero object and no word boxes, and no empty band under the buttons (the stage height is set to the text block in site.js) */
@media (max-width:700px){.stage,.stage.short,.phero .stage.full{height:auto;min-height:0}.ptile{display:none!important}}
/* S100: keep a short phrase together (go-live) */
.nw{white-space:nowrap}
/* S100: the sample-data note belongs to the product screen, which only Home shows */
body:not([data-page="home"]) .fdisc{display:none}
/* S100: phones: room after the last link, so the bar can bring any link up beside the pinned page name */
@media (max-width:900px){.onpage.ovf .wrap::after{content:'';flex:0 0 55vw}}

/* ---------- S101: simplified menu (option A). One column per section, no descriptions; labels match the "On this page" bar.
   A section with named parts shows them as square tags under its link. ---------- */
.xh-sub{display:block;padding:18px 24px 20px;min-width:300px}
.xh-sub .it{padding:10px 0;border-top:1px solid var(--line)}
.xh-sub .it:first-child{border-top:0}
.xh-sub .it>a{display:block;padding:0;border:0;min-width:0;font-size:15.5px;font-weight:500;letter-spacing:-.005em}
.xh-sub .it>a:hover{color:var(--orange)}
.xh-sub .ext{font-family:'DM Mono',monospace;font-size:12px;color:var(--soft);margin-left:4px}
.xh-sub .chips{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 2px}
.xh-sub .chips a{display:inline-flex;align-items:center;height:24px;padding:0 8px;min-width:0;border:1px solid var(--line);border-radius:2px;font:500 11.5px 'DM Mono',monospace;letter-spacing:.04em;color:var(--soft)}
.xh-sub .chips a:hover{color:var(--orange);border-color:var(--orange)}
.xh-sub a.all{display:block;margin-top:8px;padding:12px 0 0;min-width:0;border-top:1px solid var(--line);font:500 11.5px 'DM Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--soft)}
.xh-sub a.all:hover{color:var(--orange)}
@media (max-width:900px){
  .xh-sub{display:block;min-width:0;padding:8px 0 16px}
  .xh-sub .it{border-top:0;padding:8px 0}
  .xh-sub .it>a{font-size:17px}
}

/* ---------- S101: the "On this page" bar sits at the bottom of the first screen on laptops and up, so the hero and the bar are
   seen together; the hero gives up the bar's height (supersedes S73's "the bar arrives with the first scroll"). ---------- */
@media (min-width:901px){
  body:has(.onpage:not(.rbar)) .phero .stage.short,body:has(.onpage:not(.rbar)) .phero .stage.full,body:has(.onpage:not(.rbar)) .hero:not(.phero) .stage{
    height:calc(100vh - var(--hh) * 2);height:calc(100svh - var(--hh) * 2);min-height:440px}
}
@media (min-width:901px){.phero .copy p{text-wrap:pretty}}

/* ---------- S102: every main content section is at least one screen tall (laptops and up), its content centred, so each section
   reads as one screen. The closing band, slim link rows and photo bands keep their own height. design/ELEMENTS.md "Page balance" ---------- */
@media (min-width:901px){
  #main > .sec:not(.close):not(.slim):not(.fit){min-height:calc(100vh - var(--hh));min-height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
  #main > .sec:not(.close):not(.slim):not(.fit) > .wrap{width:100%}
}

/* S103: Home hero legend and replay control on the "On this page" line (laptops and up; set by site.js) */
@media (min-width:901px){
  .hero.lg-down{overflow:visible;clip-path:inset(0 0 calc(-1 * var(--lgdy,0px) - 40px) 0);z-index:46}
  .hero.lg-down .legend,.hero.lg-down .pctl{transform:translateY(var(--lgdy,0px))}
  body:has(.onpage.stuck) .hero.lg-down{z-index:auto}
}

/* ---------- S104: phone versions (700px and narrower; desktop unchanged). Home laptop: on a phone the whole screen in the frame
   is too small to read, so the phone shows the screen itself, framed flat and zoomed to its top-left part (the AI systems list),
   with the light-to-dark sweep kept ---------- */
@media (max-width:700px){
  .mac{margin:0}
  .mac .frame,.mac::after{display:none}
  .mac .scr{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:4/3.2;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
  .mac .scr img,.mac .scr .dk,.mac .scr.done .dk{position:absolute;inset:0 auto auto 0;width:185%;height:auto;max-width:none;object-fit:initial}
  .mac .scr img:not(.dk){position:relative}
}

/* S105: the Australian rules tab list carries CPS 220 as its own group; on laptop-height screens the tab rows and group labels
   tighten so the section still fits one screen */
@media (min-width:901px) and (max-height:900px){
  #expectations.fit .au .xtabs button{padding-top:clamp(3px,.7vh,8px);padding-bottom:clamp(3px,.7vh,8px)}
  #expectations.fit .au .xgrp{padding-top:clamp(6px,1.2vh,14px);padding-bottom:4px}
  #expectations.fit .xpanels{padding-top:clamp(14px,2.6vh,30px);padding-bottom:clamp(14px,2.6vh,30px)}
  #expectations.fit .au .xt li{padding-top:clamp(4px,.8vh,9px);padding-bottom:clamp(4px,.8vh,9px)}
  #expectations.fit .head .sub{margin-top:8px}
}