/* REKA moulding of the layout base, step 1 (11 Oct 2026): Clay's shapes and radii kept; colours and type are REKA's
   (paper, ink, one orange, Poppins + JetBrains Mono). Token names stay as the clone named them so every page follows. */
:root{
  /* REKA: paper/ink/orange. Left-hand names are the clone's, so the page styles pick these up unchanged */
  --white:#F7F6F3; --black:#1D1D1D; --ink:#1D1D1D; --muted:#565656;
  --oat:#ECEAE4; --oat-btn:#E3E1DA; --cream:#F7F6F3;
  /* one palette (13 Oct 2026): the clone's teal, purple and lilac names now resolve to REKA's oat, ink and orange */
  --hero:#161618; --lime:#FB9800; --sky:#E65D01; --sky-200:#FDDCA8;
  --blue:#E65D01; --blue-bg:#FBF4EA; --navy:#0B0B0C; --teal-t:#B53D0A;
  --rust:#B53D0A; --peach-bg:#FBF4EA; --olive:#77766F; --lime-bg:#FBF4EA; --magenta:#E65D01; --pink-bg:#FBF4EA;
  --lilac-bg:#FBF4EA; --lilac-t:#B53D0A; --pom:#FDDCA8; --plum:#0B0B0C;
  --brand:#FB9800; --brand-text:#E65D01; --brand-tint:#FBF4EA; --line:#E5E4E1; --line-2:#D3D1CC;
  --sans:Poppins,system-ui,'Helvetica Neue',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}
.container{max-width:1280px;margin:0 auto}
:root{--gut:clamp(24px,3.4vw,48px)}
.pad{padding-inline:var(--gut)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:8px 16px;font:500 16px/1.6 var(--sans);cursor:pointer;transition:transform .2s var(--ease),background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-black{background:var(--ink);color:var(--white)}
.btn-oat{background:var(--oat-btn);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-lg{font-size:18px;padding:9px 18px}
.eyebrow{font:600 12px/18px var(--sans);letter-spacing:3px;text-transform:uppercase}
/* placeholder art */
.ph{position:relative;background:repeating-linear-gradient(135deg,rgba(0,0,0,.035) 0 12px,transparent 12px 24px),var(--phb,#E9E6DF);display:grid;place-items:center;overflow:hidden}
.ph::after{content:attr(data-label);font:500 12px var(--sans);color:rgba(0,0,0,.5);background:rgba(255,255,255,.75);padding:6px 10px;border-radius:8px}
.ph.dark::after{color:rgba(255,255,255,.75);background:rgba(0,0,0,.25)}
/* Chrysalis-only page mocks: shell.js assigns a panel from the review boards.
   Production never activates these. Keep the original label/ARIA text in the DOM. */
.ph.photo-mock{background-color:#D8D5CE;background-repeat:no-repeat!important;background-origin:border-box;background-clip:border-box}
.ph.photo-mock::before,.ph.photo-mock::after{display:none!important}
.logo-ph{display:inline-flex;align-items:center;gap:8px;font:600 20px var(--sans);letter-spacing:-.02em}
.logo-ph i{width:26px;height:20px;border-radius:12px 12px 4px 4px;background:linear-gradient(90deg,#FB9800,#6040CC,#1268F7,#1AB89C)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
::selection{background:var(--brand);color:#0B0B0C}

/* header: Clay's fixed card, measured from clay.com (11 Oct 2026): inset 36px, 44px announcement, 59px nav with 24px bottom radius */
.sh-hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;height:0}
.sh-card{margin:0 36px;filter:drop-shadow(0 10px 24px rgba(29,29,29,.08))}
.ann{height:44px;background:var(--plum);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px}
.ann .l{display:flex;align-items:center;gap:12px;font-size:18px;min-width:0;white-space:nowrap;overflow:hidden}
.ann .l b{font:700 18px var(--sans);letter-spacing:-.02em;color:var(--brand)}
.ann .l span{color:#E9E4D8;overflow:hidden;text-overflow:ellipsis}
.ann .r{font:700 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);white-space:nowrap}
.nav{position:relative;height:59px;display:flex;align-items:center;gap:8px;padding:0 20px 0 20px}
.nav-links{display:flex;gap:2px;margin-left:24px;align-items:center}
.nav-links .sh-plain{font:500 14px var(--sans);padding:8px 10px;border-radius:10px;transition:background .2s}
.nav-links .sh-plain:hover{background:var(--oat)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav .btn{font-size:13.92px;padding:8px 16px;height:39px}
.sh-search{display:inline-flex;align-items:center;gap:6px;height:35px;padding:0 8px;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:10px;font:500 12.8px var(--sans)}
.sh-search .k{display:inline-grid;place-items:center;min-width:20px;height:22px;border-radius:5px;background:var(--oat);font:500 12px var(--sans)}
.sh-search:hover{background:var(--oat)}
.sh-div{width:1px;height:22px;background:var(--line-2);margin:0 4px}
.navspace{height:103px}
@media (max-width:1000px){.nav-links,.nav-r{display:none}.sh-card{margin:0 12px}.ann .r{display:none}.ann .l{font-size:14px}.ann .l b{font-size:14px}}
/* search palette */
.sh-lock{overflow:hidden}
.sh-pal{position:fixed;inset:0;z-index:90;background:rgba(11,11,12,.45);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.sh-pal[hidden]{display:none}
.sh-pal-box{width:640px;max-width:100%;background:var(--white);border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);overflow:hidden;animation:sh-pal-in .22s cubic-bezier(.22,1,.36,1)}
@keyframes sh-pal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.sh-pal-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.sh-pal-in input{flex:1;min-width:0;border:0;background:none;font:400 17px var(--sans);color:var(--ink);outline:none}
.sh-pal-in .esc{font:500 11px var(--sans);color:var(--muted);background:var(--oat);border-radius:6px;padding:3px 7px}
.sh-pal-res{list-style:none;margin:0;padding:8px;max-height:min(60vh,460px);overflow:auto}
.sh-pal-res li a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px}
.sh-pal-res li a b{font:500 15px var(--sans);color:var(--ink)}
.sh-pal-res li a span{font-size:12.5px;color:var(--muted)}
.sh-pal-res li[aria-selected="true"] a,.sh-pal-res li a:hover{background:var(--brand-tint)}
.sh-pal-res li.none{padding:16px 12px;color:var(--muted);font-size:14px}

/* footer */
.foot{background:var(--cream)}
.foot .cta{text-align:center;padding:96px var(--gut) 0}
.foot .cta h2{font:500 44px/48.4px var(--sans);letter-spacing:-.88px;max-width:640px;margin:0 auto}
.foot .cta p{margin-top:14px;font-size:16px}
.foot .cta .sh-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}
.foot .cta .btn-sec{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.fbox{position:relative;margin-top:72px;background:var(--oat);border-radius:48px 48px 0 0;padding:48px 48px 0}
.fcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.fcols h3{font:600 12px/13.2px var(--sans);letter-spacing:1.44px;text-transform:uppercase;margin-bottom:18px}
.fcols a{display:block;font-size:14px;line-height:15.4px;color:var(--muted);padding:6px 0}
.fcols a:hover{color:var(--brand-text)}
.hiring{font:600 10px var(--sans);background:#F7C948;border-radius:6px;padding:2px 6px;margin-left:6px;color:#000}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-2);margin-top:48px;padding:32px 0}
.fbot .c{text-align:center;font-size:14px;line-height:20px}
.soc{display:flex;gap:6px}
.soc a{width:36px;height:36px;border-radius:10px;background:var(--oat-btn);display:grid;place-items:center;font:700 11px var(--mono)}
@media (max-width:900px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}.fbox{padding:28px 24px 0}}

/* space under the floating nav for pages whose first section is not a full-bleed hero */


/* REKA footer details inside Clay's footer shape */
.fcols .dv{display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--dv);clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px)}
.fsys span{display:block;font-size:14px;line-height:15.4px;color:var(--muted);padding:6px 0}
.fsys .mail{font:500 14px var(--sans);color:var(--ink);user-select:all}
.fbot .sys{font:500 12px var(--sans);color:var(--brand-text)}
.fbot .sh-logo img{height:22px;width:auto}

.sh-pal-in input::-webkit-search-cancel-button{display:none}

/* Clay's page frame (fixed hairlines at the content edges) and the footer landscape, as a real photo with Clay's sky fade */
.page-frame{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(1184px,86.27%);z-index:0;pointer-events:none}
.page-frame i{position:absolute;top:0;bottom:0;width:1px;background:#E6E4DE}
.page-frame i:first-child{left:0}.page-frame i:last-child{right:0}
@media (max-width:767px){.page-frame{width:95%}}
main{position:relative;z-index:1}
.foot .land{position:relative;overflow:hidden;background:#D9D3C7}
.foot .land img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:center 35%}
.foot .land::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--white),rgba(247,246,243,.55) 18%,rgba(247,246,243,0) 42%)}

/* Placeholders that wait for a real image (11 Oct 2026): a designed caption card in Clay's soft colours, never hatching.
   The label still says exactly what belongs there, so a missing image is obvious without looking unfinished. */
.ph{background:radial-gradient(circle at 1px 1px,rgba(29,29,29,.10) 1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(160deg,color-mix(in srgb,var(--phb,#E9E6DF) 70%,#fff),var(--phb,#E9E6DF))}
.ph::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-44px 0 0 -17px;border-radius:10px;background:rgba(255,255,255,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ph::after{position:relative;top:14px;max-width:min(30ch,86%);text-align:center;font:500 12px/1.45 var(--sans);color:rgba(29,29,29,.62);background:none;padding:0}
.ph.dark{background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(160deg,color-mix(in srgb,var(--phb,#2B2B2B) 80%,#fff),var(--phb,#2B2B2B))}
.ph.dark::after{color:rgba(255,255,255,.7)}
.ph.dark::before{background-color:rgba(255,255,255,.14);filter:invert(1)}
.ph:has(img)::before,.ph:has(video)::before,.ph[data-label=""]::before{display:none}
.ph[data-label=""]::after{display:none}

/* the footer photo sits under the footer box, so every footer link takes the click (its sky fade has z-index 1) */
.foot .land{z-index:0}
.fbox{z-index:1}
/* a placeholder frame that already holds a real picture shows no caption */
.ph:has(>img)::after,.ph:has(>video)::after{display:none}
/* a real photograph filling a placeholder frame (asset review, 12 Oct 2026) */
.ph>img.cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* placeholders (13 Oct 2026): one neutral oat look, whatever --phb a page sets. Each slot carries data-gen, the brief
   for the photo to generate (docs/asset-review/2026-10-13/CODEX_PHOTO_BRIEF.md); it is replaced one-for-one */
.ph,.ph.dark{--phb:#E9E6DF;background:radial-gradient(circle at 1px 1px,rgba(29,29,29,.08) 1px,transparent 1.4px) 0 0/18px 18px,#ECE9E2}
.ph.dark::after{color:rgba(0,0,0,.5);background:rgba(255,255,255,.75)}

/* Colour with meaning (14 Oct 2026). The owner asked for Clay's colour and liveliness back, with today's content.
   REKA's four divisions (brand kit tokens) colour what belongs to them, never decoration:
     Harmonik purple   = sensing the physical world (PLExyz, Murata, facilities, research)
     Heuristik blue    = AI and software (Janka, private LLMs, custom build, logistics)
     Kinetik teal      = autonomy and automation (Yara, Intelligent Automation, CRETA, mobility)
     Esoterik plum     = transformation and optimisation (consulting, quantum, public sector)
     orange            = REKA itself (Managed AI, the call to act, manufacturing)
   Put data-tone="harmonik|heuristik|kinetik|esoterik|orange" on a section, panel or card; the classes below read the
   variables it sets. A colour always answers "which part of REKA is this?". */
:root{
  --harmonik:#6040CC; --harmonik-ink:#4F33B3; --harmonik-bg:#F1EDFB; --harmonik-2:#E3DBF8;
  --heuristik:#1268F7; --heuristik-ink:#0B55D0; --heuristik-bg:#EAF1FE; --heuristik-2:#D4E3FD;
  --kinetik:#1AB89C; --kinetik-ink:#0A7562; --kinetik-bg:#E4F6F1; --kinetik-2:#C8ECE3;
  --esoterik:#8D6885; --esoterik-ink:#501643; --esoterik-bg:#F7EEF4; --esoterik-2:#EDDCE7;
  --orange-bg:#FFF2DF; --orange-2:#FEDFB0;
  /* the clone's old colour names now point at the division colours again */
  --sky:var(--kinetik); --sky-200:var(--kinetik-2); --teal-t:var(--kinetik-ink); --magenta:var(--harmonik);
  --lilac-bg:var(--harmonik-bg); --lilac-t:var(--harmonik-ink); --pink-bg:var(--esoterik-bg); --peach-bg:var(--orange-bg);
  --blue-bg:var(--heuristik-bg); --lime-bg:var(--orange-bg); --pom:var(--orange-2);
}
[data-tone],[data-tone=orange]{--t:var(--brand);--t-ink:var(--brand-text);--t-bg:var(--orange-bg);--t-2:var(--orange-2);--t-btn:var(--brand);--t-btn-fg:#1D1D1D;--t-ba:#0B0B0C;--t-ba-fg:var(--brand)}
[data-tone=harmonik]{--t:var(--harmonik);--t-ink:var(--harmonik-ink);--t-bg:var(--harmonik-bg);--t-2:var(--harmonik-2);--t-btn:var(--harmonik);--t-btn-fg:#fff;--t-ba:rgba(0,0,0,.24);--t-ba-fg:#fff}
[data-tone=heuristik]{--t:var(--heuristik);--t-ink:var(--heuristik-ink);--t-bg:var(--heuristik-bg);--t-2:var(--heuristik-2);--t-btn:var(--heuristik);--t-btn-fg:#fff;--t-ba:rgba(0,0,0,.24);--t-ba-fg:#fff}
[data-tone=kinetik]{--t:var(--kinetik);--t-ink:var(--kinetik-ink);--t-bg:var(--kinetik-bg);--t-2:var(--kinetik-2);--t-btn:#0C8A73;--t-btn-fg:#fff;--t-ba:rgba(0,0,0,.24);--t-ba-fg:#fff}
[data-tone=esoterik]{--t:var(--esoterik);--t-ink:var(--esoterik-ink);--t-bg:var(--esoterik-bg);--t-2:var(--esoterik-2);--t-btn:var(--esoterik-ink);--t-btn-fg:#fff;--t-ba:rgba(0,0,0,.24);--t-ba-fg:#fff}
.tone-panel{background:var(--t-bg)!important;border-color:transparent!important}
.tone-text,.tone-panel h2 em,.tone-panel h3 em,.tone-card h3 em{color:var(--t-ink)}
.tone-link,.tone-card .go,.tone-panel .go{color:var(--t-ink)!important}
.btn-tone{background:var(--t-btn);color:var(--t-btn-fg)}
.btn-tone:hover{background:color-mix(in srgb,var(--t-btn) 88%,#000)}
.btn-brand{background:var(--brand);color:#0B0B0C}
/* a coloured card: tinted, lifts and deepens on hover (Clay's card hover) */
.tone-card{background:var(--t-bg)!important;border-color:transparent!important;transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
a.tone-card:hover,.tone-card:has(>a:hover){background:var(--t-2)!important;transform:translateY(-4px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--t) 70%,transparent)}
/* any linked card lifts a little; its arrow moves on (motion.js wraps the arrow) */
.arr{display:inline-block;transition:transform .3s var(--ease)}
a:hover .arr,a:focus-visible .arr{transform:translateX(4px)}
a:hover .arr.ne,a:focus-visible .arr.ne{transform:translate(3px,-3px)}
/* button label rolls up on hover (Clay); motion.js doubles the label, screen readers read it once */
.roll{display:inline-grid;overflow:hidden;height:1lh;vertical-align:top}
.roll>span{grid-area:1/1;transition:transform .45s var(--ease)}
.roll>span+span{transform:translateY(100%)}
.btn:hover .roll>span:first-child{transform:translateY(-100%)}
.btn:hover .roll>span+span{transform:none}
/* tab rows: a coloured pill slides to the chosen tab; the answer rises in */
.tabs.has-ind{position:relative;isolation:isolate}
.tab-ind{position:absolute;left:0;top:0;z-index:-1;border-radius:12px;background:var(--t-btn,var(--ink));pointer-events:none;transition:transform .45s var(--ease),width .45s var(--ease),height .45s var(--ease),background .3s}
.tabs.has-ind .tab[aria-selected="true"]{background:transparent!important;color:var(--t-btn-fg,#fff)!important}
[role=tabpanel]>:not([hidden]),[role=tabpanel]:not([hidden]){animation:tone-rise .45s var(--ease)}
@keyframes tone-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* screens tilt toward the pointer (Clay's product imagery); fine pointers only, set by motion.js */
@media (prefers-reduced-motion:reduce){.tone-card,.arr,.roll>span,.tab-ind,.tilt{transition:none!important}[role=tabpanel]>:not([hidden]),[role=tabpanel]:not([hidden]){animation:none}a.tone-card:hover{transform:none}}
/* a photo slot inside a coloured part takes that part's tint, so an empty slot still belongs to its section */
[data-tone] .ph,.ph[data-tone]{background:radial-gradient(circle at 1px 1px,rgba(29,29,29,.08) 1px,transparent 1.4px) 0 0/18px 18px,color-mix(in srgb,var(--t-2) 55%,#fff)}

/* Section grammar (14 Oct 2026, from the Clay discovery; owner: "follow Clay where it fits us").
   A page is a run of open chapter titles and trays. Ground: paper. Tray: one shape, oat, a division tint or ink (once).
   Cards live in trays: white, one corner size, text never on a tint; colour in the picture frame, the title, the corner
   arrow and the hover. No full-width hairlines between sections: the gap and the tray edge separate. */
.blk{padding-top:16px}
.blk.chap{padding-top:96px}
.chap-head{text-align:center;max-width:820px;margin:0 auto 32px;display:flex;flex-direction:column;gap:16px;align-items:center}
.chap-head p{font-size:18px;line-height:27px;color:var(--muted);max-width:640px;text-wrap:pretty}
.tray{background:var(--oat);border-radius:40px;padding:48px}
.tray[data-tone]{background:var(--t-bg)}
.tray.ink{background:var(--hero);color:#fff}
.tray+.tray{margin-top:16px}
.card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;background:#fff;border-radius:20px;padding:24px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
.card .tt{font:500 20px/1.3 var(--sans);letter-spacing:-.4px;color:var(--t-ink,var(--ink));text-wrap:balance}
.card p,.card .sub{font-size:14.5px;line-height:21px;color:var(--muted)}
.card .meta{font-size:13px;color:var(--t-ink,var(--muted))}
.card .frame{display:block;margin:-12px -12px 8px;border-radius:14px;overflow:hidden;background:var(--t-bg,var(--oat))}
.card .frame>*{width:100%}.card .frame>:not(.ph){display:block}
.corner{margin-top:auto;align-self:flex-end;flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font:500 15px/1 var(--sans);color:var(--t-ink,var(--ink));box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s,box-shadow .25s,transform .3s var(--ease)}
a.card:hover,a.card:focus-visible{background:var(--t-bg,var(--white));transform:translateY(-4px);box-shadow:inset 0 0 0 1px transparent,0 18px 40px -24px color-mix(in srgb,var(--t,#1D1D1D) 75%,transparent)}
a.card:hover .corner,a.card:focus-visible .corner{background:var(--t-btn,var(--ink));color:var(--t-btn-fg,#fff);box-shadow:none}
a.card:hover .frame{background:var(--t-2,var(--oat-btn))}
@media (max-width:760px){.blk.chap{padding-top:64px}.chap-head{margin-bottom:24px}.chap-head p{font-size:16px;line-height:24px}.tray{border-radius:28px;padding:24px}.card{padding:20px}}
@media (prefers-reduced-motion:reduce){.card,.corner{transition:none}a.card:hover{transform:none}}

/* REKA controls (owner, 14 Oct 2026: "B, with A's hover"). From the brand kit's design language: chamfered corners,
   the arrow in its own block, mono labels. At rest it reads REKA; on hover it stays calm for readers (colour, a small
   lift, the arrow moves on). HUD corner brackets appear on keyboard focus only. Trays and cards keep Clay's soft shape. */
.btn{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .15s var(--ease),color .15s,box-shadow .15s}
.btn:hover{transform:none}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #0B0B0C,inset 0 0 0 4px #fff}
.btn-black:hover{background:#000}.btn-brand:hover{background:#FFA826}.btn-white:hover{background:var(--white)}
.btn.has-a{padding:0;gap:0;align-items:stretch}
.btn.has-a .bt{display:flex;align-items:center;padding:8px 14px 8px 16px}
.btn-lg.has-a .bt{padding:9px 16px 9px 18px}
.nav .btn.has-a .bt{padding:0 12px 0 16px}
.btn .ba{display:grid;place-items:center;min-width:40px;font:600 15px/1 var(--mono);background:var(--ba,rgba(0,0,0,.2));color:var(--ba-fg,inherit);box-shadow:var(--ba-line,none)}
.btn .ba i{font-style:normal;display:block;transition:transform .15s var(--ease)}
.btn:hover .ba i{transform:translateX(3px)}
.btn:hover .ba i.ne{transform:translate(2px,-2px)}
.btn-tone .ba{--ba:var(--t-ba);--ba-fg:var(--t-ba-fg)}
.btn-brand .ba{--ba:#0B0B0C;--ba-fg:var(--brand)}
.btn-black .ba{--ba:var(--brand);--ba-fg:#0B0B0C}
.btn-white .ba,.btn-oat .ba,.btn-sec .ba,.btn-line .ba,.btn-text .ba{--ba:transparent;--ba-fg:var(--brand-text);--ba-line:inset 1px 0 0 var(--line)}
.ax-ghost .ba{--ba:transparent;--ba-fg:var(--brand);--ba-line:inset 1px 0 0 rgba(255,255,255,.25)}
/* text links: a mono label with the arrow in a small block */
.more{display:inline-flex;align-items:center;gap:10px;border:0;font:500 12.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.more:hover{color:var(--ink)}
.more .arr{display:grid;place-items:center;width:24px;height:24px;background:var(--brand);color:#0B0B0C;font:600 12px/1 var(--mono);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:transform .15s var(--ease)}
.more:hover .arr{transform:translateX(3px)}
.more:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
/* tabs: chamfered chips; the chosen one is ink with an orange underline, and the marker slides to it */
.tab{border-radius:0!important;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.tab-ind{border-radius:0;background:var(--ink);box-shadow:inset 0 -2px 0 var(--brand);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.tabs.has-ind .tab[aria-selected="true"]{color:#fff!important}
/* cards: the corner arrow is a chamfered block in the card's colour; hover is A's: a thin outline in the colour, a
   small lift, the block fills. Keyboard focus draws REKA's HUD brackets in the corners */
.corner{border-radius:0;width:auto;min-width:34px;height:32px;padding:0 9px;background:var(--t-bg,var(--oat));box-shadow:none;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);font:600 14px/1 var(--mono)}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.card-foot .corner{margin-top:0}
.card .code{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
a.card:hover,a.card:focus-visible{background:#fff;transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--t,var(--ink)),0 16px 32px -24px color-mix(in srgb,var(--t,#1D1D1D) 80%,transparent)}
a.card:hover .corner,a.card:focus-visible .corner{background:var(--t-btn,var(--ink));color:var(--t-btn-fg,#fff)}
a.card:hover .frame{background:var(--t-bg,var(--oat))}
a.card:focus-visible{outline:none}
a.card::after{content:"";position:absolute;inset:7px;pointer-events:none;opacity:0;transition:opacity .15s;--c:var(--t,var(--brand));
  background:linear-gradient(var(--c),var(--c)) 0 0/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/2px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/2px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/2px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/2px 14px no-repeat}
a.card:focus-visible::after{opacity:1}
/* HUD line icons (assets/icons/hud.svg): drawn in REKA's instrument style, in the colour of what they stand for */
.hi{width:28px;height:28px;flex:none;color:var(--t-ink,var(--ink));display:block}
.hi.sm{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.btn .ba i,.more .arr{transition:none}}
/* arrows big enough to read at a glance (sans arrows are wider than the mono ones) */
.btn .ba{min-width:42px;font:600 19px/1 var(--sans)}
.corner{min-width:38px;height:36px;padding:0 10px;font:600 18px/1 var(--sans);background:var(--t-2,var(--oat-btn));color:var(--t-ink,var(--ink))}
.more .arr{width:26px;height:26px;font:600 15px/1 var(--sans)}
/* outlined buttons: the chamfer cuts the outline, so the two cut corners get their diagonal drawn in */
.btn-sec,.btn-line,.ax-ghost,.btn-white{--ol:var(--line);background-image:linear-gradient(to bottom right,transparent calc(50% - .8px),var(--ol) calc(50% - .8px),var(--ol) calc(50% + .8px),transparent calc(50% + .8px)),linear-gradient(to bottom right,transparent calc(50% - .8px),var(--ol) calc(50% - .8px),var(--ol) calc(50% + .8px),transparent calc(50% + .8px))!important;background-size:8px 8px!important;background-position:0 0,100% 100%!important;background-repeat:no-repeat!important}
.btn-white{--ol:transparent}
.foot .cta .btn-sec,.btn-line{--ol:var(--ink)}
.ax-ghost{--ol:rgba(255,255,255,.3)}
.ax-ghost:hover{--ol:#fff}
/* form send buttons (contact, talk, careers, press, events, partners) take the same chamfer as every other button */
.rkf .send,.dm-form .next,.dm-form .back{border-radius:0!important;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
/* owner, 14 Oct: text links and card labels in Poppins (mono stays for figures only) */
.more{font:600 15px/1.2 var(--sans);letter-spacing:0;text-transform:none}
.card .code{font:600 11.5px/1.2 var(--sans);letter-spacing:.06em}
/* "Keep exploring" (owner, 14 Oct 2026: "never a dead page"): every page ends by pointing on to its neighbours */
.related .chap-head h2{font:500 40px/1.1 var(--sans);letter-spacing:-1.2px;text-wrap:balance}
.rel-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.rel-grid li{display:flex}
.rel-grid .card{flex:1;min-height:150px}
.rel-grid .tt{font-size:19px}
@media (max-width:760px){.related .chap-head h2{font-size:30px}}
/* phones (owner, 14 Oct: "fix the phone gaps too"): "Keep exploring" sits two cards to a row, so the end of a page
   is not a long column of text cards */
@media (max-width:760px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.related .tray{padding:16px}.rel-grid .card{min-height:0;padding:14px;gap:6px}main .related .rel-grid .card .tt{font-size:15px;letter-spacing:-.2px}.rel-grid .sub{font-size:13px;line-height:18px}.rel-grid .card-foot .code{display:none}}

.ph.photo-mock+figcaption{display:none!important}