/* Services, industries and solutions pages (REKA). Cleaned 13 Oct 2026: unused Clay blocks removed.
   Built from measured layout (1440 viewport, 11 Oct 2026). One block library; pages compose blocks in the
   order the reference uses. Neutral placeholders only. */
:root{--oat100:#F9F8F6;--oat200:#E5E4E1;--oat300:#EFEEEA;--line:#E5E4E1;--line2:#D3D1CC;--oat700:#565656;--oat800:#565656;--uc-blue:#E65D01;--tab-on:#FBF4EA}
.ucpage{background:var(--oat100);overflow-x:clip}
.ucpage.is-white{background:#fff}
.wrap{width:min(1280px,calc(100% - 2*var(--gut)));margin-inline:auto}
.sec{padding:96px 0}
.sec.pt0{padding-top:0}.sec.pb0{padding-bottom:0}.sec.pt48{padding-top:48px}.sec.pb48{padding-bottom:48px}
.bg-white{background:#fff}.bg-oat{background:var(--oat100)}
.r-top{border-radius:40px 40px 0 0}.r-bot{border-radius:0 0 40px 40px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ucpage .btn{line-height:24px;letter-spacing:-.16px;border:1px solid transparent}
.btn-sec{background:#fff;color:#1D1D1D;border-color:#1D1D1D!important}
.btn-text{background:none;padding-left:0;color:#1D1D1D}
.btn-text::after{content:"\2192";margin-left:2px}
.t-h1{font:600 60px/60px var(--sans);letter-spacing:-2.4px}
.t-h2{font:500 44px/48.4px var(--sans);letter-spacing:-.88px}
.t-h3{font:500 32px/35.2px var(--sans);letter-spacing:-.64px}
.t-h4{font:600 24px/28.8px var(--sans);letter-spacing:-.48px}
.t-lead{font-size:20px;line-height:28px}
.t-body{font-size:16px;line-height:22.4px}
.eyebrow.sm{font:600 12px/14.4px var(--sans);letter-spacing:1.08px}
.center{text-align:center}
.mx{margin-inline:auto}
.w70{max-width:896px}
.ph.r30{border-radius:30px}
.ph.bd{box-shadow:inset 0 0 0 1px var(--line)}
.ph.sq{aspect-ratio:1/1}
.dash-u{text-decoration:underline;text-underline-offset:3px}

/* ---- "For" switcher pill ---- */
.pnav{position:relative;display:inline-flex;align-items:center;gap:8px;background:#EFEEEA;border-radius:10px;padding:4px 4px 4px 12px;z-index:5}
.pnav.oat3{background:var(--oat300)}
.pnav>span{font-size:16px;line-height:24px}
.pnav-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 16px;font:500 16px/24px var(--sans);letter-spacing:-.16px;cursor:pointer}
.pnav-btn svg{width:16px;height:16px;transition:transform .2s}
.pnav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.pnav-menu{position:absolute;left:0;top:calc(100% + 6px);min-width:260px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 18px 30px -18px rgba(0,0,0,.35);display:none}
.pnav-menu.on{display:block}
.pnav-menu a{display:block;padding:8px 12px;border-radius:8px;font-size:15px}
.pnav-menu a:hover,.pnav-menu a[aria-current="page"]{background:var(--oat200)}
.centered .pnav-menu{left:50%;transform:translateX(-50%)}

/* ---- Hero A: copy left, square art right ---- */
.hero-a{padding:48px 0 24px}
.hero-a .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,628px);gap:24px;align-items:start}
.hero-a h1{margin-top:32px;font:600 60px/60px var(--sans);letter-spacing:-2.4px;max-width:628px}
.hero-a h1.s44{font:500 44px/48.4px var(--sans);letter-spacing:-1.32px;margin-top:64px}
.hero-a h1.s64{font-size:64px;line-height:64px;letter-spacing:-1.92px}
.hero-a h1.s80{font-size:80px;line-height:80px;letter-spacing:-3.2px;margin-top:64px}
.hero-a h1.mt16{margin-top:16px}
.hero-a p{margin-top:18px;font-size:20px;line-height:28px;max-width:628px}
.hero-a p.narrow{max-width:440px}
.hero-a .btn{margin-top:20px}
.hero-a .art{aspect-ratio:1/1;border-radius:30px}
.hero-a .art.ph{box-shadow:inset 0 0 0 1px var(--line)}

/* ---- Hero B: full-width headline, art band below ---- */
.hero-b{padding:48px 0}
.hero-b h1{margin-top:4px;font:575 88px/88px var(--sans);letter-spacing:-3.52px;max-width:1063px}
.hero-b h1.s80{font-weight:600;font-size:80px;line-height:80px;letter-spacing:-3.2px;max-width:none}
.hero-b h1.s96{font-weight:600;font-size:96px;line-height:96px;letter-spacing:-2.88px;max-width:none;margin-top:24px}
.hero-b p{margin-top:20px;font-size:20px;line-height:28px;max-width:744px}
.hero-b p.wide{max-width:896px}
.hero-b .btn{margin-top:20px}

.strip{margin-top:48px;height:159px;border-radius:30px}

/* ---- Hero C: centred (department pages) ---- */
.hero-c{padding:48px 0 0;text-align:center}
.hero-c h1{margin:4px auto 0;font:600 80px/80px var(--sans);letter-spacing:-3.2px;max-width:1280px;text-wrap:balance}
.hero-c h1 span{color:var(--hl,#FB9800);display:block}
.hero-c p{margin:20px auto 0;font-size:20px;line-height:28px;max-width:896px}
.hero-c .btn{margin-top:20px}

/* ---- Hero cards (enterprise / startups / private equity) ---- */
.hcard-sec{padding:16px 0}

/* ---- logo wall ---- */

/* ---- Benefits box: white panel, centred heading, 3 oat cards ---- */
.bx{background:#fff;border-radius:30px;padding:24px}
.bx.bd{box-shadow:inset 0 0 0 1px var(--line)}
.bx-head{max-width:1023px;margin:32px auto 0;text-align:center}
.bx-head p{margin:18px auto 0;max-width:1023px}
.bx-head .btn{margin-top:24px}

/* ---- Open image cards ---- */

/* ---- Customer tabs + case card ---- */
.ctabs{display:flex;border:1px solid var(--line);border-radius:30px;overflow:hidden;margin-bottom:16px}
.ctab{flex:1;height:90px;border:0;background:var(--oat200);display:grid;place-items:center;cursor:pointer;padding:9px 30px;transition:background .2s}
.ctab+.ctab{border-left:1px solid var(--line)}
.ctab[aria-selected="true"]{background:var(--tab-on)}
.ctab i{display:block;height:22px;width:110px;border-radius:6px;background:rgba(0,0,0,.22)}
.case{display:grid;grid-template-columns:minmax(0,627px) minmax(0,1fr);gap:40px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:30px;padding:24px 24px 24px 12px}
.case.nb{border-color:transparent}
.case.pad{padding:24px}
.case .ph.sq{border-radius:30px}
.case .ph.full{height:100%;min-height:600px;border-radius:30px}
.case .copy{padding-right:1px}
.case .eyebrow{display:block}
.case .t-h1{margin-top:19px}
.case h2.t-h2{margin-top:0}
.case p.t-lead{margin-top:18px}
.case .btn{margin-top:20px}
.case .who{display:inline-block;margin-top:18px;font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:3px}

.panel[hidden]{display:none}
/* quote + stat variant */

.statline{margin-top:32px;border-top:1px solid var(--line2);padding-top:32px}
.statline h3{font:500 32px/35.2px var(--sans);letter-spacing:-.64px}
.statline div{margin-top:4px}
.copy>.statline:first-child{margin-top:0;border-top:0;padding-top:0}

/* ---- Alternating feature rows ---- */
.feat{display:grid;grid-template-columns:minmax(0,584px) minmax(0,620px);gap:24px;align-items:center;justify-content:space-between;background:#fff;border-radius:30px;padding:16px 20px 16px 32px;min-height:652px}
.feat.flip{grid-template-columns:minmax(0,620px) minmax(0,572px);padding:16px 44px 16px 20px}
.feat.flip .ftxt{order:2}
.feat h2{font:500 44px/48.4px var(--sans);letter-spacing:-1.32px}
.feat p{margin-top:13px;font-size:16px;line-height:22.4px;padding-right:24px;text-wrap:balance}
.feat .btn{margin-top:17px}
.feat .ph{aspect-ratio:1/1;border-radius:30px}
.feat .ph.bd{box-shadow:inset 0 0 0 1px var(--line)}
.feat.empty .ph{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}

/* ---- Dark quote ---- */

/* ---- Teal banners ---- */

/* ---- Section header + big centred line ---- */

/* ---- Search band (framed art with hairlines) ---- */

/* ---- Numbers row ---- */

/* ---- How it works (white panel, 3 cards, no icons) ---- */

/* ---- Testimonial slider ---- */

/* ---- Wall of love (grid of logo cells + case slider) ---- */

/* ---- Before / after slider ---- */

/* ---- Enterprise: sticky features ---- */

.opanel{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px}
.opanel .cardt{border:1px solid var(--line);border-radius:24px;padding:72px 64px 80px;display:flex;flex-direction:column;justify-content:center;min-height:471px}
.opanel .cardt h3{margin-bottom:16px}
.opanel .cardt .btn{margin-top:40px;align-self:flex-start}
.opanel .ph{min-height:471px;border-radius:24px}

/* ---- Startups ---- */

/* ---- Private equity form ---- */

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .feat,.feat.flip{grid-template-columns:1fr;padding:24px;min-height:0}
  .feat.flip .ftxt{order:0}
  .feat .ph{max-width:620px;width:100%}
  .case{grid-template-columns:1fr;padding:12px 12px 24px}
  .case .copy{padding:0 12px}
  .case .ph.full{min-height:360px}
  
  
  
  
  
  
  .opanel{grid-template-columns:1fr}
  
  
  
  
  
  
}
@media (max-width:991px){
  .hero-a .wrap{grid-template-columns:1fr}
  .hero-a .art{max-width:628px;width:100%}
  
  
  
  
  
  
}
@media (max-width:767px){
  .sec{padding:64px 0}
  .t-h1,.hero-a h1,.hero-a h1.s64,.hero-a h1.s80,.hero-b h1,.hero-b h1.s80,.hero-b h1.s96,.hero-c h1{font-size:40px;line-height:42px;letter-spacing:-1.4px}
  .hero-a h1,.hero-a h1.s44,.hero-a h1.s80{margin-top:24px}
  .t-h2,.feat h2,.hero-a h1.s44{font-size:32px;line-height:36px;letter-spacing:-.8px}
  .t-lead,.hero-a p,.hero-b p,.hero-c p{font-size:18px;line-height:26px}
  
  .strip{height:110px}
  
  
  
  
  
  
  
  
  .bx-head{margin-top:16px}
  .ctabs{overflow-x:auto}
  .ctab{min-width:120px;height:72px;padding:9px 12px}
  .ctab i{width:72px}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .opanel .cardt{padding:32px 24px;min-height:0}
  .opanel .ph{min-height:260px}
  
  
  
  
  
  
  
  
}
.is-white .case,.bg-white .case{background:var(--oat100)}
.sec.oc{padding:120px 0 136px}
.sec.oc.pt96{padding-top:96px}
@media (max-width:767px){.sec.oc{padding:64px 0}}
.hero-b.pb120{padding-bottom:120px}.hero-b.pb0{padding-bottom:0}
.case.top{align-items:start}
.case.even{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ctab{font:500 18px var(--sans);letter-spacing:-.2px}

@media (max-width:1100px){.case.even{grid-template-columns:1fr}}

/* Generated art built from the page's own words: CSS lettering in a placeholder slot (as Home's case cards) */

.ph>svg.art{position:absolute;inset:0;width:100%;height:100%}

/* ---- Live reka.re lists in Clay's components (coverage pass, 11 Oct 2026). New class names only, so the industry and Yara pages are untouched. ---- */
/* facts: Clay's benefit cards, four (or two) across */

/* step rows: Clay's how-it-works panel, as numbered rows */

.uc-note a,.uc-spec a{text-decoration:underline;text-underline-offset:3px}
/* spec list: the technical reference, in the oat panel */
.uc-spec{margin:42px 0 0;background:var(--oat100);border:1px solid var(--line);border-radius:30px;padding:8px 24px;text-align:left}
.uc-spec>div{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.uc-spec>div:last-child{border-bottom:0}
.uc-spec dt{font:600 16px/22.4px var(--sans);letter-spacing:-.16px}
.uc-spec dd{margin:0;font-size:16px;line-height:22.4px;color:var(--oat800)}

.uc-note{margin-top:16px;font-size:14px;line-height:20px;color:var(--oat700)}
.uc-note.center{text-align:center}

/* feature tabs: Clay's tab pills over a feature row */
.uc-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 24px}
.uc-tabs .tab{border:0;border-radius:12px;background:var(--oat200);padding:10px 14px;font:500 15px/1.4 var(--sans);letter-spacing:-.16px;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.uc-tabs .tab:hover{color:#1D1D1D}
.uc-tabs .tab[aria-selected="true"]{color:#1D1D1D;background:var(--tc,var(--tab-on))}
.ftxt .eyebrow.lbl{display:block;margin-bottom:12px;color:var(--uc-blue)}
/* section heads with Clay's small label */
.eyebrow.lbl{display:block;margin-bottom:16px;color:var(--uc-blue)}.ftxt .eyebrow.lbl{margin-bottom:12px}

@media (max-width:767px){
  
  
  
  
  
  .uc-spec{padding:4px 16px;border-radius:20px}
  .uc-spec>div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .uc-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scrollbar-width:none}
  .uc-tabs::-webkit-scrollbar{display:none}
  .uc-tabs .tab{white-space:nowrap}
}

/* a placeholder label (data-label) is for an empty frame; once a real picture is in, it must not print over it */
.ph:has(>img)::after,.ph:has(>video)::after{display:none}

/* Pictures sized to their frames (11 Oct). Product screens (img.ui, img.ri) are never cropped: the frame takes
   the screen's shape and holds it with a small even margin. Photos keep object-fit:cover. */
.feat{min-height:0}
.feat .ph:has(>img.ui),.case>.ph.sq:has(>img.ui),.case>.ph.sq:has(>img.ri:not(.fit)),.strip:has(>img.ui){aspect-ratio:auto;height:auto;min-height:0}
body .feat .ph>img.ui,body .case>.ph>img.ui,body .case>.ph>img.ri:not(.fit),body .strip>img.ui{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain;object-position:center;padding:2.5%}
/* photos in feature cards: 4:3 rather than square, so a wide photo is neither blown up nor cut to a sliver */
.feat .ph:has(>img.fit:not(.ui)){aspect-ratio:4/3}
/* phone screens: a narrow frame the shape of the phone */
@media (min-width:1101px){.case:has(>.ph>img:is(.phone,[src*="step-tap"],[src*="demo-worker"])){grid-template-columns:minmax(0,340px) minmax(0,1fr)}}
.case>.ph.sq:has(>img:is(.phone,[src*="step-tap"],[src*="demo-worker"])){aspect-ratio:auto;height:auto}
body .case>.ph>img:is(.phone,[src*="step-tap"],[src*="demo-worker"]){position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain;padding:5%}
/* sticky picture stacks keep their square stage; a product screen's frame hugs the screen, centred on the stage */

/* ======================================================================================================
   Clean-up (13 Oct 2026): one palette, no eyebrows, no icon tiles, no step numbers. Shared explanatory
   components for the services, industries and solutions pages.
   ====================================================================================================== */
.ucpage .eyebrow{display:none}

.ucpage .ph{--phb:#ECE9E2}
.sec-h{max-width:845px}
.sec-h.center{margin-inline:auto;text-align:center}
.sec-h p{margin-top:16px}
.sec-h .btn{margin-top:20px}

/* SERVICE ARC: Advise -> Build -> Automate -> Run, the current page in orange */
.arc{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.arc>li{position:relative}
.arc>li:not(:last-child)::after{content:"\2192";position:absolute;top:50%;right:-25px;transform:translateY(-50%);font:500 20px/1 var(--sans);color:var(--muted)}
.arc a{display:flex;flex-direction:column;gap:4px;height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;transition:border-color .2s}
.arc a:hover{border-color:var(--ink)}
.arc b{font:600 22px/26px var(--sans);letter-spacing:-.44px}
.arc .nm{font:500 14px/20px var(--sans);color:var(--muted)}
.arc .d{margin-top:6px;font-size:15px;line-height:21px}
.arc a[aria-current="page"]{border:2px solid var(--brand);background:var(--brand-tint);padding:17px 19px}
.arc a[aria-current="page"] b{color:var(--brand-text)}
.arc a[aria-current="page"] .nm::after{content:"\00A0\00B7\00A0this page"}

/* FLOW: labels joined by arrows, one line under each (no numbers) */
.flow{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:40px}
.flow>li{position:relative}
.flow>li:not(:last-child)::after{content:"\2192";position:absolute;top:8px;right:-30px;font:500 20px/1 var(--sans);color:var(--brand-text)}
.flow h3{display:inline-block;font:600 18px/24px var(--sans);letter-spacing:-.3px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px}
.flow p{margin-top:12px;font-size:16px;line-height:22.4px;color:var(--ink)}
.flow p a{text-decoration:underline;text-underline-offset:3px}
.flow>li.on h3{background:var(--brand);border-color:var(--brand)}
.bx .flow h3{background:var(--oat100)}
.flow-cta{margin-top:32px}

/* LOOP (Managed AI): Set up -> Use -> Watch -> Improve -> back to Use */
.loopwrap{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:48px;align-items:center;margin-top:40px}
.loop{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:36px}
.loop>li{position:relative;display:grid;grid-template-columns:128px minmax(0,1fr);gap:20px;align-items:center;padding-left:28px}
.loop h3{font:600 18px/24px var(--sans);letter-spacing:-.3px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 10px}
.loop p{font-size:16px;line-height:22.4px}
.loop>li:not(:last-child)::after{content:"\2193";position:absolute;left:calc(28px + 64px);bottom:-30px;transform:translateX(-50%);font:500 20px/1 var(--sans);color:var(--brand-text)}
.loop>li.r1::before,.loop>li.r2::before,.loop>li.r3::before{content:"";position:absolute;left:4px;width:18px;border:2px solid var(--brand);border-right:0}
.loop>li.r1::before{top:50%;bottom:-38px;border-bottom:0;border-radius:14px 0 0 0}
.loop>li.r2::before{top:-2px;bottom:-38px;border-top:0;border-bottom:0}
.loop>li.r3::before{top:-2px;height:calc(50% + 2px);border-top:0;border-radius:0 0 0 14px}
.loop>li.r1 h3{position:relative}
.loop>li.r1 h3::before{content:"";position:absolute;left:-12px;top:50%;margin-top:-6px;border:6px solid transparent;border-left-color:var(--brand)}
.loop .back{display:block;margin-top:6px;font-size:14px;line-height:20px;color:var(--brand-text)}
.shots{display:flex;flex-direction:column;gap:16px}
.shot{margin:0;background:var(--oat);border-radius:24px;padding:12px}
.shot img{display:block;width:100%;height:auto;border-radius:12px}
.shot figcaption{padding:10px 6px 2px;font-size:14px;line-height:20px;color:var(--muted)}
.shot figcaption b{color:var(--ink);font-weight:600}

/* COMPACT LIST: title + one line, two columns, no cards */
.clist{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.clist>li{padding:18px 0;border-top:1px solid var(--line)}
.clist>li b{display:block;font:600 18px/24px var(--sans);letter-spacing:-.3px}
.clist>li p{margin-top:4px;font-size:16px;line-height:22.4px;color:var(--muted)}
.clist>li p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.clist.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bx .clist{margin-inline:8px}

/* COMPARE: a clear two-column comparison table */
.cmp{width:100%;margin-top:32px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;text-align:left}
.cmp th,.cmp td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top;font-size:16px;line-height:22.4px}
.cmp tr:last-child>*{border-bottom:0}
.cmp thead th{font:600 18px/24px var(--sans);letter-spacing:-.3px;background:var(--oat)}
.cmp thead th.us{background:var(--brand-tint);color:var(--ink)}
.cmp tbody th{font-weight:600;width:24%;color:var(--ink)}
.cmp td{color:var(--ink)}
.cmp td.no{color:var(--muted)}
.cmp a{text-decoration:underline;text-underline-offset:3px}

/* STACK diagram (Custom Build): layers, bottom up */
.stack{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column-reverse;gap:10px}
.stack>li{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;background:var(--oat100);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.stack>li b{font:600 18px/24px var(--sans);letter-spacing:-.3px}
.stack>li p{font-size:16px;line-height:22.4px;color:var(--muted)}
.stack>li:not(:first-child)::after{content:"\2191";position:absolute;left:30px;bottom:-17px;font:500 16px/1 var(--sans);color:var(--brand-text);background:#fff;padding:0 4px}
.stack>li:last-child{border-color:var(--brand);background:var(--brand-tint)}

/* PRESS: a static list, headline · outlet · year */
.plist{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.plist li{border-bottom:1px solid var(--line)}
.plist a{display:grid;grid-template-columns:minmax(0,1fr) 220px 90px;gap:24px;align-items:baseline;padding:16px 4px}
.plist a:hover b{text-decoration:underline;text-underline-offset:3px}
.plist b{font:500 18px/24px var(--sans);letter-spacing:-.2px}
.plist span{font-size:15px;color:var(--muted)}
.more{display:inline-block;margin-top:20px;font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* one real figure */
.stat1{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:30px;padding:28px 32px}
.stat1 b{font:600 72px/1 var(--sans);letter-spacing:-2.4px;color:var(--brand-text);white-space:nowrap}
.stat1 b small{font-size:28px;letter-spacing:-.6px;margin-left:6px;color:var(--ink)}
.stat1 p{font-size:18px;line-height:26px;max-width:640px}
.stat1 p a{text-decoration:underline;text-underline-offset:3px}

/* plain text row (a statement and its link, no picture) */
.trow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:30px;padding:28px 32px}
.trow h2{font:500 32px/36px var(--sans);letter-spacing:-.64px}
.trow p{margin-top:8px;font-size:16px;line-height:22.4px;max-width:760px}
blockquote.pull{margin:20px 0 0;padding-left:16px;border-left:3px solid var(--brand);font-size:16px;line-height:22.4px}
blockquote.pull cite{display:block;margin-top:6px;font-style:normal;font-size:14px;color:var(--muted)}

/* names row (logos are swapped in by assets/partner-logos.js) */
.names{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px}
.names li{display:flex;align-items:center;min-height:40px}
.names .nm{font:600 18px/1.2 var(--sans);letter-spacing:-.2px;color:var(--muted)}

/* plain heroes on paper */
.hero-a .art.photo{aspect-ratio:4/3}
.hero-a .art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-c h1 span{color:var(--brand-text)}

/* tabs and frames in the one palette */
.ctab[aria-selected="true"]{background:var(--brand-tint);box-shadow:inset 0 -3px 0 var(--brand)}
.uc-tabs .tab[aria-selected="true"]{background:var(--ink);color:#fff}
.ph.ratio{aspect-ratio:var(--r,16/9);border-radius:24px}

/* data flow and bar chart (public sector) */
.dflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;margin:0;padding:0}
.dflow>li{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px}
.dflow>li:not(:last-child)::after{content:"\2192";position:absolute;top:50%;right:-30px;transform:translateY(-50%);font:500 20px/1 var(--sans);color:var(--brand-text)}
.dflow b{display:block;font:600 18px/24px var(--sans);letter-spacing:-.3px}
.dflow p{margin-top:6px;font-size:15px;line-height:21px;color:var(--muted)}
.dflow .no{display:block;margin-top:10px;font-size:14px;line-height:20px;color:var(--brand-text)}
.bars{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px}
.bars h3{font:600 18px/24px var(--sans);letter-spacing:-.3px}
.bars .cap{margin-top:4px;font-size:14px;line-height:20px;color:var(--muted)}
.bars svg{display:block;width:100%;height:auto;margin-top:16px}

@media (max-width:991px){
  .loopwrap{grid-template-columns:1fr}
  .clist.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-auto-flow:row;grid-auto-columns:auto;gap:36px}
  .flow>li:not(:last-child)::after{content:"\2193";top:auto;right:auto;left:20px;bottom:-30px}
  .dflow{grid-template-columns:1fr;gap:36px}
  .dflow>li:not(:last-child)::after{content:"\2193";top:auto;right:auto;left:24px;bottom:-30px;transform:none}
}
@media (max-width:767px){
  .arc{grid-template-columns:1fr;gap:28px}
  .arc>li:not(:last-child)::after,.arc>li:nth-child(2)::after{display:block;content:"\2193";top:auto;right:auto;left:22px;bottom:-25px;transform:none}
  .clist,.clist.c3{grid-template-columns:1fr}
  .loop>li{grid-template-columns:minmax(0,1fr);gap:8px;padding-left:24px;align-items:start}
  .loop h3{width:104px}
  .loop>li.r1::before{top:17px}
  .loop>li.r3::before{height:19px}
  .loop>li:not(:last-child)::after{left:calc(24px + 52px)}
  .loop h3{font-size:16px;padding:6px 8px}
  .cmp th,.cmp td{padding:12px;font-size:15px;line-height:21px}
  .cmp tbody th{width:30%}
  .stack>li{grid-template-columns:1fr;gap:4px}
  .plist a{grid-template-columns:1fr;gap:2px}
  .stat1,.trow{grid-template-columns:1fr;gap:12px;padding:22px}
  .stat1 b{font-size:56px}
  .trow h2{font-size:26px;line-height:30px}
  .names{gap:8px 24px}
}

/* TIMELINE strip: year + one line, joined by a thin line */
.tline{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px;border-top:2px solid var(--line)}
.tline>li{position:relative;padding-top:18px}
.tline>li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--brand)}
.tline b{display:block;font:600 24px/28px var(--sans);letter-spacing:-.48px;color:var(--brand-text)}
.tline p{margin-top:6px;font-size:15px;line-height:21px}
@media (max-width:991px){
  .tline{grid-auto-flow:row;border-top:0;border-left:2px solid var(--line);gap:20px;padding-left:20px}
  .tline>li{padding-top:0}
  .tline>li::before{top:6px;left:-27px}
}
.clist>li b a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:767px){
  .cmp thead,.cmp tbody{display:block}
  .cmp thead tr,.cmp tbody tr{display:grid;grid-template-columns:1fr 1fr}
  .cmp thead th:first-child{display:none}
  .cmp tbody th{grid-column:1/-1;width:auto;background:var(--oat100);padding-bottom:10px}
}
.pnav>span{white-space:nowrap}

/* ======================================================================================================
   Colour with meaning (14 Oct 2026), for the services, industries and solutions pages. Tokens and the
   .tone-panel / .btn-tone classes live in base.css; this block only says how each block here wears a tone.
   The tone answers "which part of REKA is this?": each page takes its own tone for its hero panel and its
   section panels; anything about another part of REKA (a product it uses, another service) wears that part's.
   Owner's rule (14 Oct): a card keeps a WHITE body for its text. Its colour goes on its picture area (the
   frame or mat around the photo or screen), its accent text and its button. Text-only cards are white with
   a tone accent and a tinted hover. Only big section panels (hero, framed sections) are filled with a tint.
   ====================================================================================================== */
/* SECTION PANELS: the hero, as a coloured panel inside the page margins (never a full-bleed flood) */
.hero-a>.wrap.tone-panel,.hero-b>.wrap.tone-panel,.hero-c>.wrap.tone-panel{border-radius:40px;padding:48px}
.hero-a>.wrap.tone-panel h1{margin-top:16px}
.hero-a>.wrap.tone-panel .pnav+h1{margin-top:28px}
.hero-a>.wrap.tone-panel h1.s44{margin-top:24px}
.hero-c>.wrap.tone-panel{padding-bottom:56px}
.hero-c .wrap[data-tone] h1 span{color:var(--t-ink)}
.tone-panel .pnav{background:rgba(255,255,255,.62)}
.tone-panel .art.ph,.tone-panel .strip{box-shadow:none}
.hero-a .tone-panel .art{border-radius:24px}
.tone-panel .btn-sec{border-color:transparent!important;background:#fff}
.tone-panel .uc-note a{color:var(--t-ink)}
/* white blocks inside a section panel (the spec list) */
.ucpage [data-tone] .uc-spec{background:#fff;border-color:transparent}
.ucpage [data-tone] .uc-spec dt{color:var(--t-ink)}
.ucpage [data-tone] .uc-spec>div{border-bottom-color:color-mix(in srgb,var(--t) 18%,transparent)}

/* LABELS AND RULES: step pills, loop pills, list rules and timeline marks carry the tone */
.ucpage [data-tone] .flow h3{background:var(--t-bg);border-color:transparent;color:var(--t-ink)}
.ucpage [data-tone] .flow>li:not(:last-child)::after{color:var(--t-ink)}
.ucpage [data-tone] .loop h3{background:var(--t-bg);border-color:transparent;color:var(--t-ink)}
.ucpage .clist[data-tone]>li{border-top:2px solid color-mix(in srgb,var(--t) 45%,transparent)}
.ucpage .tone-panel .clist>li{border-top-color:color-mix(in srgb,var(--t) 25%,transparent)}
.tline[data-tone]{border-top-color:color-mix(in srgb,var(--t) 35%,transparent)}
.tline[data-tone]>li::before{background:var(--t)}
.tline[data-tone] b{color:var(--t-ink)}
@media (max-width:991px){.tline[data-tone]{border-left-color:color-mix(in srgb,var(--t) 35%,transparent)}}
.ucpage [data-tone] blockquote.pull{border-left-color:var(--t)}

/* PICTURE CARDS (.feat rows, .case cards, product figures): white body, tone on the picture area,
   the accent text and the button. A placeholder or screen frame takes the tint (base.css); a photo sits
   on an 8px tinted mat; a product figure's screen sits on a tinted mat above a white caption. */
:is(.feat[data-tone],[data-tone] .feat,.case[data-tone],[data-tone] .case) .ph:has(>img:not(.ui):not(.phone)){background:color-mix(in srgb,var(--t-2) 70%,#fff)!important}
:is(.feat[data-tone],[data-tone] .feat,.case[data-tone],[data-tone] .case) .ph>img:is(.fit,.cov):not(.ui):not(.phone){inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:22px}
.is-white .feat[data-tone],.is-white .case[data-tone]{box-shadow:inset 0 0 0 1px var(--line)}
.feat[data-tone] .situ{color:var(--t-ink)}
.ucpage .case[data-tone] .statline h3,.ucpage .stat1[data-tone] b{color:var(--t-ink)}
.case[data-tone] .who{color:var(--t-ink)}
[data-tone] .bars rect:last-of-type{fill:var(--t)}
.shot[data-tone]{background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.shot[data-tone] img{background:var(--t-bg);padding:10px;border-radius:14px}
.shot[data-tone] figcaption b{color:var(--t-ink)}

/* TEXT CARDS (service arc, capability cards, stack layers, data-flow steps, statement rows): white body,
   a thin line, the title in the tone; a card that links tints and lifts on hover */
.arc>li[data-tone] a,.clist.tc>li[data-tone],.stack>li[data-tone],.stack>li[data-tone]:last-child,.dflow>li[data-tone],.trow[data-tone]{background:#fff;border:1px solid var(--line)}
.arc>li[data-tone] b,.clist.tc>li[data-tone] b,.clist.tc>li[data-tone] b a,.stack>li[data-tone] b,.dflow>li[data-tone] b,.dflow>li[data-tone] .no,.trow[data-tone] h2{color:var(--t-ink)}
.arc>li[data-tone] a,.clist.tc>li[data-tone]{transition:transform .35s var(--ease),background .25s,border-color .25s,box-shadow .35s var(--ease)}
.arc>li[data-tone] a:hover,.clist.tc>li[data-tone]:has(a:hover){background:var(--t-bg);border-color:transparent;transform:translateY(-4px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--t) 70%,transparent)}
.arc>li[data-tone] a[aria-current="page"]{border:2px solid var(--t);padding:17px 19px}
.clist.tc{row-gap:16px;column-gap:16px}
.clist.tc>li{border-radius:20px;padding:20px 22px}
.stack>li[data-tone] p,.dflow>li[data-tone] p{color:var(--muted)}
.stack>li[data-tone]:not(:first-child)::after{background:transparent;color:var(--muted)}
.dflow>li:not(:last-child)::after{color:var(--muted)}

/* TABLES AND TABS: a column or tab that is a part of REKA wears its tone */
.ucpage [data-tone] .cmp thead th.us,.cmp thead th[data-tone]{background:var(--t-bg);color:var(--t-ink)}
.cmp td[data-tone] a{color:var(--t-ink)}
.ctab[data-tone][aria-selected="true"],[data-tone] .ctab[aria-selected="true"]{background:var(--t-bg);box-shadow:inset 0 -3px 0 var(--t)}
.ctab[data-tone][aria-selected="true"]{color:var(--t-ink)}
.ctab[data-tone]:hover{background:color-mix(in srgb,var(--t-bg) 60%,var(--oat200))}
.uc-tabs.has-ind .tab[aria-selected="true"]{background:transparent!important}
/* press list and form: the section's tone on the link and the chosen chip */
.ucpage [data-tone] .plist a:hover b{color:var(--t-ink)}
.ucpage [data-tone] .more{color:var(--t-ink)}
.ucpage [data-tone] .pf .chip-o:has(input:checked){background:var(--t-btn);border-color:var(--t-btn);color:var(--t-btn-fg)}

/* solutions: the three doors stack as you scroll, all in REKA orange (services are REKA itself; Clay's stacked cards) */
@media (min-width:1101px) and (min-height:760px){
  .doors>section{position:sticky;top:128px}
  .doors .feat.door{min-height:500px;box-shadow:inset 0 0 0 1px var(--line),0 -16px 40px -28px rgba(29,29,29,.35)}
}
@media (max-width:767px){
  .hero-a>.wrap.tone-panel,.hero-b>.wrap.tone-panel,.hero-c>.wrap.tone-panel{border-radius:28px;padding:28px 20px}
  .hero-c>.wrap.tone-panel{padding-bottom:32px}
  .clist.tc>li{padding:18px}
}
@media (prefers-reduced-motion:reduce){.arc>li[data-tone] a,.clist.tc>li[data-tone],.shot[data-tone]{transition:none}.arc>li[data-tone] a:hover,.clist.tc>li[data-tone]:has(a:hover){transform:none}}
.feat[data-tone] .bars{background:var(--t-bg);border-color:transparent}

/* services are REKA itself (owner, 14 Oct 2026): three services, so the arc is three across; a service page's hero
   names the service first and carries its line beneath, in the service's tone */
.hero-b h1.named span{display:block;margin-top:10px;font-size:.7em;line-height:1.05;letter-spacing:-.035em;color:var(--t-ink)}