/* Engage Games homepage design system: Curated Hybrid. */
body[data-design-system="curated"]{--curated-deep:#0b1321;--curated-proof:#0c1423;--curated-origin-end:#101a2d;--curated-surface:#16223a;--curated-paper:#e8e4dc;--curated-ink:#0d1626;--surface-bleed-depth:clamp(140px,14vw,200px);--motion-quick:150ms;--motion-fast:250ms;--motion-slow:400ms;--motion-reveal-compact:480ms;--motion-reveal:680ms;--motion-stagger:60ms;--motion-distance:24px;--motion-out:cubic-bezier(.22,1,.36,1)}

/* Keep first-scroll compositing stable without changing the curated motion. */
body[data-design-system="curated"]::after{display:none}
body[data-design-system="curated"] .nav,
body[data-design-system="curated"] .nav.scrolled{border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;transition:padding var(--motion-fast) var(--motion-out),background-color var(--motion-fast) var(--motion-out)}
body[data-design-system="curated"] .diag-light,
body[data-design-system="curated"] .diag-dark,
body[data-design-system="curated"] .diag-dark-alt{margin-top:0;clip-path:none;transition:none}

/* Hero: the Engage identity leads; no single product is privileged. */
body[data-design-system="curated"] .hero{background:radial-gradient(circle at 75% 50%,rgba(0,242,193,.13),transparent 36%),var(--curated-deep)}
body[data-design-system="curated"] .hero-content{max-width:1400px}
body[data-design-system="curated"] .hero-headline{max-width:1280px;font-size:clamp(58px,7.5vw,118px)}
body[data-design-system="curated"] .hero-watermark{right:4%;top:50%;width:min(64vh,620px,52vw);--wm-op:.085;opacity:var(--wm-op);transform-origin:center;-webkit-mask-image:linear-gradient(170deg,#000 30%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(170deg,#000 30%,rgba(0,0,0,.35) 100%)}
body[data-design-system="curated"] .hero-accent-line,
body[data-design-system="curated"] .hero-grid-line{display:none}

/* One quiet Engage watermark per major section. */
body[data-design-system="curated"] .philosophy,
body[data-design-system="curated"] .metrics-bar,
body[data-design-system="curated"] .proof,
body[data-design-system="curated"] .testimonials,
body[data-design-system="curated"] .origin,
body[data-design-system="curated"] .close,
body[data-design-system="curated"] .contact,
body[data-design-system="curated"] .footer{position:relative;isolation:isolate;overflow:hidden}
body[data-design-system="curated"] .philosophy::before,
body[data-design-system="curated"] .metrics-bar::before,
body[data-design-system="curated"] .proof::before,
body[data-design-system="curated"] .testimonials::before,
body[data-design-system="curated"] .origin::before,
body[data-design-system="curated"] .close::before,
body[data-design-system="curated"] .contact::before,
body[data-design-system="curated"] .footer::before{content:'';position:absolute;z-index:0;width:clamp(260px,38vw,620px);aspect-ratio:123/150;background:currentColor;opacity:.026;pointer-events:none;mask:var(--eg-mark) center/contain no-repeat;-webkit-mask:var(--eg-mark) center/contain no-repeat;filter:none}
body[data-design-system="curated"] .philosophy::before{right:-8%;top:50%;transform:translateY(-50%) rotate(5deg)}
/* Bottom-anchored: without the bleed covering it, a centred mark was cut on the navy join below.
   Any overrun is now at the top, where the section meets the teal. */
body[data-design-system="curated"] .metrics-bar::before{left:-7%;top:auto;bottom:24px;transform:rotate(-6deg)}
body[data-design-system="curated"] .proof::before{right:-10%;top:13%;transform:rotate(6deg)}
body[data-design-system="curated"] .testimonials::before{left:-9%;bottom:-38%;transform:rotate(-7deg)}
/* Bottom-anchored: from top:14% it overran the bottom at wide widths and was cut on the navy join */
body[data-design-system="curated"] .origin::before{right:-8%;top:auto;bottom:24px;transform:rotate(5deg)}
/* Starts inside the top edge: hanging off it clipped the shield into a hard line on the navy join.
   If it overruns, it's cut at the bottom, where the section turns cream anyway. */
body[data-design-system="curated"] .close::before{left:-6%;top:24px;transform:rotate(-5deg)}
/* .contact never sets a text colour, so currentColor was the inherited off-white: invisible on cream */
body[data-design-system="curated"] .contact::before{right:-8%;bottom:-38%;transform:rotate(6deg);background:var(--dark)}
body[data-design-system="curated"] .footer::before{right:3%;top:-160px;width:260px;opacity:.02;transform:rotate(5deg)}
body[data-design-system="curated"] .phil-grid,
body[data-design-system="curated"] .metrics-inner,
body[data-design-system="curated"] .proof>*,
body[data-design-system="curated"] .testimonials>*,
body[data-design-system="curated"] .origin>*,
body[data-design-system="curated"] .close>*,
body[data-design-system="curated"] .contact>*,
body[data-design-system="curated"] .footer>*{position:relative;z-index:1}

/* Signature teal brand statement; retain navy type and clean section edges. */
body[data-design-system="curated"] .philosophy{background:linear-gradient(135deg,var(--accent) 0%,#1cf0cc 45%,#4df5d7 100%);color:var(--curated-ink)}
body[data-design-system="curated"] .phil-ghost{display:none}
body[data-design-system="curated"] .phil-heading,
body[data-design-system="curated"] .phil-para,
body[data-design-system="curated"] .phil-statement{color:var(--curated-ink)}
body[data-design-system="curated"] .phil-heading::after{display:none}

/* Portfolio results become three legible, tonal tiles. */
body[data-design-system="curated"] .metrics-bar{background:var(--curated-deep);border:0;padding:56px}
body[data-design-system="curated"] .metrics-inner{grid-template-columns:170px 1fr;gap:48px;max-width:1400px}
body[data-design-system="curated"] .metrics-row{gap:12px;align-items:stretch}
body[data-design-system="curated"] .metric{min-width:0;min-height:210px;padding:34px;background:var(--curated-surface);border:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:18px;clip-path:polygon(0 12px,100% 0,100% 100%,0 100%)}
body[data-design-system="curated"] .metric-value{align-items:baseline}
body[data-design-system="curated"] .metric-num{font-size:clamp(58px,5.5vw,88px);letter-spacing:-.045em}
body[data-design-system="curated"] .metric-sym{font-size:clamp(38px,3.6vw,58px);opacity:.9;margin-left:.045em}
body[data-design-system="curated"] .metric-label{font-size:15px;line-height:1.45;max-width:285px}
/* Portfolio bars: every line measures the number beside it. 190%: steel 'previous' to a tick, then mint overshoots to
   2.9x (1/2.9 = 34.48% of the track). 80%+ and 90%+ draw to their true length (--fill on the bench), with no grey track.
   Drawn by one Dot, frame by frame, from index.html (runMetrics); .done is the drawn state, and no-script.css shows it. */
body[data-design-system="curated"] .metrics-row{position:relative}
body[data-design-system="curated"] .metric-has-bench{position:relative}
@media(min-width:761px){body[data-design-system="curated"] .metrics-row .metric{min-height:250px}}
body[data-design-system="curated"] .metric-bench{position:absolute;left:34px;right:34px;top:38px;height:30px;--bench-prev:34.48%}
body[data-design-system="curated"] .metric-bench>span{position:absolute;display:block}
body[data-design-system="curated"] .bench-prev{left:0;width:var(--bench-prev);top:6px;height:2px;background:var(--steel-light);opacity:.7;transform-origin:0 50%;transform:scaleX(0)}
body[data-design-system="curated"] .bench-ours{left:var(--bench-prev);right:0;top:5px;height:4px;background:var(--mint);transform-origin:0 50%;transform:scaleX(0)}
body[data-design-system="curated"] .metric-bench[data-kind="fill"] .bench-ours{left:0;right:auto;width:calc(var(--fill,1) * 100%)}
body[data-design-system="curated"] .bench-tick{left:var(--bench-prev);top:0;width:1px;height:14px;background:var(--steel-light);opacity:0}
body[data-design-system="curated"] .bench-cap{left:var(--bench-prev);top:18px;transform:translateX(-50%);font-family:var(--label);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-light);white-space:nowrap;opacity:0}
body[data-design-system="curated"] .bench-runner{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px rgba(0,242,193,.55);pointer-events:none;will-change:transform;z-index:2}
body[data-design-system="curated"] .metric-bench.done .bench-prev,
body[data-design-system="curated"] .metric-bench.done .bench-ours{transform:scaleX(1)}
body[data-design-system="curated"] .metric-bench.done .bench-tick{opacity:.9}
body[data-design-system="curated"] .metric-bench.done .bench-cap{opacity:.85}

body[data-design-system="curated"] .metrics-row .metric.rv{transition-delay:0ms}
/* Static surface blends live below content and finish at the next navy. */
body[data-design-system="curated"] .metrics-bar::after{
  content:'';position:absolute;z-index:0;inset:auto 0 0;
  height:var(--surface-bleed-depth);pointer-events:none;
  background:linear-gradient(180deg,rgba(12,20,35,0) 0%,rgba(12,20,35,.104) 20%,rgba(12,20,35,.352) 40%,rgba(12,20,35,.648) 60%,rgba(12,20,35,.896) 80%,var(--curated-proof) 100%)
}

/* Case-study theatre: three equal cards and both UI states visible. */
body[data-design-system="curated"] .proof{background:var(--curated-proof)}
body[data-design-system="curated"] .proof-header{text-align:left}
body[data-design-system="curated"] .proof-title{font-size:clamp(52px,5.4vw,78px)}
body[data-design-system="curated"] .proof-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0}
body[data-design-system="curated"] .proof-card{height:100%;border:1px solid rgba(255,255,255,.18);border-radius:0;background:var(--curated-surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:none}
body[data-design-system="curated"] .proof-card.rv{opacity:0;transform:translate3d(0,64px,0);filter:none;transition:opacity var(--motion-reveal-compact) var(--motion-out),transform var(--motion-reveal) var(--motion-out)}
body[data-design-system="curated"] .proof-card.rv.vis{opacity:1;transform:translate3d(0,0,0)}
body[data-design-system="curated"] .proof-card.rv.rv-d1{transition-delay:0ms}
body[data-design-system="curated"] .proof-card.rv.rv-d2{transition-delay:60ms}
body[data-design-system="curated"] .proof-card.rv.rv-d3{transition-delay:120ms}
body[data-design-system="curated"] .proof-card::before{display:none}
body[data-design-system="curated"] .proof-card::after{display:block;content:'';position:absolute;inset:0;z-index:3;width:auto;height:auto;background:transparent;border:1px solid rgba(0,242,193,.42);opacity:0;transform:none;transform-origin:center;pointer-events:none;transition:opacity var(--motion-fast) var(--motion-out)}
body[data-design-system="curated"] .proof-card-inner{padding:0 32px 40px}
body[data-design-system="curated"] .proof-device-wrap{--proof-primary-width:min(52%,202px);--proof-support-width:min(43%,172px);position:relative;isolation:isolate;order:-1;min-height:458px;margin:0 -32px 38px;padding:36px 12px;background:var(--curated-deep);display:flex;align-items:center;justify-content:center;gap:4px;perspective:none;overflow:hidden}
body[data-design-system="curated"] .proof-device-wrap::after{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 52% 58% at 39% 44%,rgba(0,242,193,.1) 0%,rgba(0,242,193,.035) 45%,transparent 72%);opacity:.28;pointer-events:none;transition:opacity var(--motion-fast) var(--motion-out)}
body[data-design-system="curated"] .proof-device,
body[data-design-system="curated"] .proof-device-back{display:block;position:relative;inset:auto;flex:0 0 auto;height:auto;margin:0;opacity:1;filter:none;z-index:1}
body[data-design-system="curated"] .proof-device{width:var(--proof-primary-width)!important}
body[data-design-system="curated"] .proof-device-back{width:var(--proof-support-width)!important}
body[data-design-system="curated"] .proof-device img,
body[data-design-system="curated"] .proof-device-back img{width:100%;height:auto;max-width:none;object-fit:contain}
body[data-design-system="curated"] .proof-device{transform:rotate(-1.5deg)}
body[data-design-system="curated"] .proof-device-back{transform:rotate(2.5deg)}
/* Hover: the phones fan open in 400 ms and settle back in 250 ms - unhurried where the reader chooses, quick where the
   page responds (the hover-in duration is on the :hover rules below) */
body[data-design-system="curated"] .proof-device,
body[data-design-system="curated"] .proof-device-back{transition:transform var(--motion-fast) var(--motion-out)}
body[data-design-system="curated"] .proof-operator{order:0;margin-bottom:30px;color:var(--steel-light)}
body[data-design-system="curated"] .proof-operator::before,
body[data-design-system="curated"] .proof-game-mark,
body[data-design-system="curated"] .proof-bridge::before{display:none}
body[data-design-system="curated"] .proof-num{font-size:clamp(76px,6.4vw,112px)}
body[data-design-system="curated"] .proof-num-suffix{font-size:clamp(48px,4vw,68px);opacity:1}
body[data-design-system="curated"] .proof-metric-label{font-size:16px;max-width:300px}
body[data-design-system="curated"] .proof-desc{font-size:15px;line-height:1.65}
body[data-design-system="curated"] .proof-link{border:0;padding-top:0;gap:10px;transition:color var(--motion-fast) ease}
body[data-design-system="curated"] .proof-link span{transition:transform var(--motion-quick) var(--motion-out)}
body[data-design-system="curated"] .proof-bridge{margin-top:86px}

/* Quotes stay editorial, with the quotation marks doing the visual work. */
body[data-design-system="curated"] .testimonials{background:var(--light)}
/* Editorial stack: each endorsement a full-width row - the quote set as display type,
   the person and their operator beside it. Both stay visible; nothing rotates. */
body[data-design-system="curated"] .quotes{max-width:1400px;margin:0 auto;position:relative;z-index:1}
body[data-design-system="curated"] .quote{margin:0;display:grid;grid-template-columns:minmax(220px,300px) 1fr;grid-template-areas:"mark text" "by text";grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,96px);padding:clamp(44px,4.4vw,68px) 0;border-top:1px solid rgba(13,22,38,.12)}
body[data-design-system="curated"] .quote:first-child{border-top:0;padding-top:0}
body[data-design-system="curated"] .quote:last-child{padding-bottom:0}
body[data-design-system="curated"] .quote-mark{grid-area:mark;display:block;font-family:var(--display);font-weight:600;font-size:88px;line-height:.62;color:var(--curated-ink);opacity:.14;margin:0 0 22px;user-select:none}
body[data-design-system="curated"] .quote-text{grid-area:text;margin:0;font-family:var(--display);font-weight:500;font-size:clamp(24px,2.3vw,36px);line-height:1.34;letter-spacing:-.012em;color:var(--curated-ink);max-width:920px}
body[data-design-system="curated"] .quote-by{grid-area:by;display:flex;flex-direction:column;align-items:flex-start}
body[data-design-system="curated"] .quote-name{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--curated-ink)}
body[data-design-system="curated"] .quote-role{font-family:var(--sans);font-size:14px;color:var(--steel-on-light);margin-top:4px}
body[data-design-system="curated"] .quote-logo{display:block;height:14px;width:auto;margin-top:22px;opacity:.9}
body[data-design-system="curated"] .quote-logo--betfred{height:17px}
@media(max-width:760px){
  body[data-design-system="curated"] .quote{grid-template-columns:1fr;grid-template-areas:"mark" "text" "by";grid-template-rows:auto;padding:40px 0}
  body[data-design-system="curated"] .quote-mark{font-size:72px;margin-bottom:18px}
  body[data-design-system="curated"] .quote-text{font-size:23px;line-height:1.36}
  body[data-design-system="curated"] .quote-by{margin-top:26px}
  body[data-design-system="curated"] .quote-logo{margin-top:18px}
}
/* Same navy as the close section it runs into, so there's no band or second navy at the join */
body[data-design-system="curated"] .origin{background:var(--curated-deep)}
/* Identical radial stops/radii make these two halves one continuous glow. */
body[data-design-system="curated"] .origin::after{
  content:'';position:absolute;z-index:0;inset:auto 0 0;
  height:var(--surface-bleed-depth);pointer-events:none;
  background:
    radial-gradient(ellipse 48% var(--surface-bleed-depth) at 82% 100%,rgba(0,242,193,.03) 0%,rgba(0,242,193,.024) 30%,rgba(0,242,193,.01) 60%,rgba(0,242,193,0) 100%)
}
body[data-design-system="curated"] .close{
  background:
    radial-gradient(ellipse 48% var(--surface-bleed-depth) at 82% 0%,rgba(0,242,193,.03) 0%,rgba(0,242,193,.024) 30%,rgba(0,242,193,.01) 60%,rgba(0,242,193,0) 100%),
    var(--curated-deep)
}

/* The primary action is unmistakably Engage turquoise, with a small hover expansion. */
body[data-design-system="curated"] .contact{background:var(--light)}
body[data-design-system="curated"] .cf-submit{background:var(--accent);border-color:var(--accent);color:var(--curated-deep);letter-spacing:.24em;margin-top:0;transition:transform var(--motion-quick) var(--motion-out),background-color var(--motion-fast) ease,color var(--motion-fast) ease,opacity var(--motion-quick) ease}
body[data-design-system="curated"] .cf-submit::before{display:none}
body[data-design-system="curated"] .cf-submit-arrow{transition:transform var(--motion-fast) var(--motion-out),opacity var(--motion-quick) ease}

/* Contact form: outlined fields that read as fields on cream. Boundaries are a solid
   hex (3.55:1 on cream) - turquoise on cream is 1.3:1, so it only ever decorates. */
body[data-design-system="curated"]{--field-line:#7b808a;--field-line-hover:#454b59;--field-error:#c2410c}
body[data-design-system="curated"] .contact-form{gap:20px}
body[data-design-system="curated"] .cf-row{gap:24px}
body[data-design-system="curated"] .cf-label{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.12em;line-height:1.3;color:var(--dark);margin-bottom:10px}
body[data-design-system="curated"] .cf-label-opt{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.01em;text-transform:none;color:var(--steel-on-light);margin-left:8px}
body[data-design-system="curated"] .cf-input{background:#fff;border:1px solid var(--field-line);border-radius:0;padding:15px 16px;min-height:54px;line-height:1.4;color:var(--dark);outline:2px solid transparent;outline-offset:-2px;transition:border-color var(--motion-fast) ease,outline-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease}
body[data-design-system="curated"] .cf-textarea{min-height:136px;line-height:1.55;resize:vertical}
body[data-design-system="curated"] .cf-input:focus{border-color:var(--dark);outline-color:var(--dark);box-shadow:0 0 0 4px rgba(0,242,193,.45)}
body[data-design-system="curated"] .cf-field.is-invalid .cf-input{border-color:var(--field-error);outline:1px solid var(--field-error);outline-offset:-1px}
body[data-design-system="curated"] .cf-field.is-invalid .cf-input:focus{outline:2px solid var(--field-error);outline-offset:-2px;box-shadow:0 0 0 4px rgba(194,65,12,.16)}
/* Errors drop in over 250ms and lift out over 150ms (text is cleared after the fade). */
body[data-design-system="curated"] .cf-error{color:var(--field-error);font-size:13px;font-weight:500;margin-top:8px;min-height:18px;transform:translate3d(0,-4px,0);transition:opacity var(--motion-quick) ease,transform var(--motion-quick) var(--motion-out)}
body[data-design-system="curated"] .cf-error.is-shown{opacity:1;transform:none;transition-duration:var(--motion-fast)}
/* Restate the base autofill trick for the white fill and the new transitions. */
body[data-design-system="curated"] .cf-input:-webkit-autofill{-webkit-text-fill-color:var(--dark);caret-color:var(--dark);box-shadow:inset 0 0 0 1000px #fff;transition:background-color 9999s ease-in-out 0s,border-color var(--motion-fast) ease,outline-color var(--motion-fast) ease}
body[data-design-system="curated"] .cf-input:-webkit-autofill:focus{box-shadow:inset 0 0 0 1000px #fff,0 0 0 4px rgba(0,242,193,.45)}
/* Sending: fields recede and lock; the button stays solid and its arrow leaves. */
body[data-design-system="curated"] .contact-form.is-sending .cf-input{background:var(--light);border-color:rgba(15,24,41,.3);color:rgba(15,24,41,.6);cursor:progress}
body[data-design-system="curated"] .cf-submit.is-sending:disabled{opacity:1;cursor:progress}
body[data-design-system="curated"] .cf-submit.is-sending .cf-submit-arrow{transform:translate3d(10px,0,0);opacity:0}
body[data-design-system="curated"] .cf-submit:focus-visible{outline:2px solid var(--dark);outline-offset:3px}
body[data-design-system="curated"] .contact-success-sub{color:var(--steel-on-light)}
body[data-design-system="curated"] .contact-success-back:hover{color:var(--dark);border-bottom-color:var(--dark)}
@media(max-width:768px){
  body[data-design-system="curated"] .contact-form,
  body[data-design-system="curated"] .cf-row{gap:18px}
  body[data-design-system="curated"] .cf-input{padding:14px}
  body[data-design-system="curated"] .cf-textarea{min-height:120px}
}
body[data-design-system="curated"] .footer{border:0;background:var(--curated-deep)}
/* Closing headline: the invitation line lands a beat after the statement */
body[data-design-system="curated"] .close-headline-italic{opacity:0;transform:translate3d(0,12px,0);transition:opacity var(--motion-reveal-compact) var(--motion-out) calc(var(--motion-stagger)*3),transform var(--motion-reveal) var(--motion-out) calc(var(--motion-stagger)*3)}
body[data-design-system="curated"] .close-headline.vis .close-headline-italic{opacity:1;transform:none}

@media(min-width:641px){body[data-design-system="curated"] .footer{padding-left:var(--gutter-x);padding-right:var(--gutter-x)}}

/* No backdrop blur in curated, so the scrolled bar needs to be near-opaque or text shows through */
body[data-design-system="curated"] .nav.scrolled{background:var(--grain),rgba(11,19,33,.98)}
/* In-page links land the heading clear of the fixed nav */
body[data-design-system="curated"] #proof,body[data-design-system="curated"] #philosophy,body[data-design-system="curated"] #origin,body[data-design-system="curated"] #testimonials{scroll-margin-top:40px}
/* Readable measure, matching the "Built to perform" paragraph */
body[data-design-system="curated"] .origin-body p{max-width:620px}
@media(min-width:761px){body[data-design-system="curated"] .metric-label{min-height:2.9em}}
@media(min-width:1101px){body[data-design-system="curated"] .proof-metric-label{min-height:3em;text-wrap:balance}}
body[data-design-system="curated"] .footer-brand{word-spacing:-.08em;white-space:nowrap}

/* ═══ Elevation: depth, case-study spotlight, confident supporting type ═══ */
/* Grain is a dark-surfaces treatment: every navy section and the scrolled nav carry it (so joins
   and the header read as one material); teal and cream stay clean. */
/* Grain lives in each navy section's background (a static tile that scrolls with the page),
   not a fixed full-screen overlay - that overlay is what broke the iOS fixed nav and the
   first-scroll compositing, and why curated switched the original grain off. */
body[data-design-system="curated"]{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.042'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body[data-design-system="curated"] .hero{background:var(--grain),radial-gradient(circle at 75% 50%,rgba(0,242,193,.13),transparent 36%),var(--curated-deep)}
body[data-design-system="curated"] .metrics-bar{background:var(--grain),var(--curated-deep)}
/* A soft haze of light behind the case studies, well clear of either join */
body[data-design-system="curated"] .proof{background:var(--grain),radial-gradient(ellipse 70% 32% at 50% 52%,rgba(0,242,193,.045),transparent 72%),var(--curated-deep)}
/* Same navy either side now, so the metrics bleed has nothing to bridge - and its flat fill hid the grain at the join */
body[data-design-system="curated"] .metrics-bar::after{display:none}
body[data-design-system="curated"] .origin{background:var(--grain),var(--curated-deep)}
/* Every navy section carries the grain - one without it reads as a different, flatter navy at the join */
body[data-design-system="curated"] .close{background:var(--grain),radial-gradient(ellipse 48% var(--surface-bleed-depth) at 82% 0%,rgba(0,242,193,.03) 0%,rgba(0,242,193,.024) 30%,rgba(0,242,193,.01) 60%,rgba(0,242,193,0) 100%),var(--curated-deep)}
body[data-design-system="curated"] .footer{background:var(--grain),var(--curated-deep)}

/* Case-study spotlight: raised cards, a lit stage, bigger devices, a glowing number */
body[data-design-system="curated"] .proof-card{border-color:rgba(255,255,255,.09);background:linear-gradient(180deg,#18253f 0%,var(--curated-surface) 34%,#131e33 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 44px 80px -44px rgba(0,0,0,.75)}
body[data-design-system="curated"] .proof-device-wrap{--proof-primary-width:min(58%,226px);--proof-support-width:min(47%,188px);min-height:500px;background:radial-gradient(ellipse 50% 42% at 50% 44%,rgba(0,242,193,.13) 0%,rgba(0,242,193,.04) 55%,rgba(0,242,193,0) 78%),linear-gradient(180deg,#0f192c 0%,var(--curated-deep) 60%,#0a111e 100%)}
/* Backlight only: one clean light behind the phones (the floor pool, shadow and the old
   off-centre glow layered into a smudge) */
body[data-design-system="curated"] .proof-device-wrap::after{display:none}
body[data-design-system="curated"] .proof-num,body[data-design-system="curated"] .proof-num-suffix{text-shadow:0 0 38px rgba(0,242,193,.22)}
/* Three-up cards: the larger pair clipped its tilted corners (1-6px) from 1101-1440px; a slight
   overlap keeps both inside the stage */
@media(min-width:1101px){body[data-design-system="curated"] .proof-device-wrap{gap:0}body[data-design-system="curated"] .proof-device{z-index:2}body[data-design-system="curated"] .proof-device-back{margin-left:-20px;z-index:1}}

/* Supporting type: out of Light, a notch larger, so it holds its own under the display sizes */
body[data-design-system="curated"] .hero-sub{font-weight:400;font-size:clamp(16px,1.2vw + 5px,22px);line-height:1.65}
body[data-design-system="curated"] .nav-link{font-size:13px}
body[data-design-system="curated"] .metrics-eyebrow,body[data-design-system="curated"] .proof-link,body[data-design-system="curated"] .hero-link{font-size:12px}
body[data-design-system="curated"] .proof-metric-label{font-weight:400}
body[data-design-system="curated"] .proof-desc{font-size:16px}
body[data-design-system="curated"] .tl-op{font-size:11px}
body[data-design-system="curated"] .tl-name{font-size:15px}
body[data-design-system="curated"] .footer-legal{font-weight:400;opacity:.85}

/* ═══ Just launched: BoyleSports Matchday Challenge (case study coming soon) ═══
   Full-width row under the three live case studies - no link, no hover state, no metric (no results
   yet). Same card material and backlit stage as the case-study cards so it reads as body of work. */
body[data-design-system="curated"] .soon-wrap{max-width:1400px;margin:clamp(40px,4vw,64px) auto 0;position:relative}
body[data-design-system="curated"] .proof-soon{max-width:1400px;margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,#18253f 0%,var(--curated-surface) 34%,#131e33 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 44px 80px -44px rgba(0,0,0,.75);overflow:hidden}
body[data-design-system="curated"] .soon-copy{padding:clamp(36px,4vw,64px);padding-top:clamp(92px,7vw,112px);display:flex;flex-direction:column;justify-content:center}
body[data-design-system="curated"] .soon-copy .proof-desc{flex-grow:0;margin-bottom:0;max-width:460px}
body[data-design-system="curated"] .soon-logo{display:block;width:min(230px,70%);height:auto;margin:0 0 28px}
/* Set into the card's top-left corner, so it's read first at every size (above the phones on mobile).
   Lives outside the article because the card clips its overflow. */
body[data-design-system="curated"] .soon-flag{position:absolute;top:1px;left:1px;margin:0;z-index:3;display:flex}
body[data-design-system="curated"] .soon-flag span{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--accent);background:#18253f;border-right:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);padding:13px 18px 12px}
body[data-design-system="curated"] .soon-stage{position:relative;min-height:clamp(440px,36vw,560px);display:flex;align-items:center;justify-content:center;padding:36px 16px;overflow:hidden;background:radial-gradient(ellipse 50% 42% at 50% 46%,rgba(0,242,193,.13) 0%,rgba(0,242,193,.04) 55%,rgba(0,242,193,0) 78%),linear-gradient(180deg,#0f192c 0%,var(--curated-deep) 60%,#0a111e 100%)}
body[data-design-system="curated"] .soon-phone{display:block;height:auto;max-width:none;position:relative}
body[data-design-system="curated"] .soon-phone--front{z-index:2;width:clamp(190px,17vw,258px)}
body[data-design-system="curated"] .soon-phone--side{z-index:1;width:clamp(160px,14vw,212px)}
body[data-design-system="curated"] .soon-phone--l{margin-right:-44px;transform:translateY(14px) rotate(-4deg)}
body[data-design-system="curated"] .soon-phone--r{margin-left:-44px;transform:translateY(14px) rotate(4deg)}
@media(max-width:1100px) and (min-width:761px){
  /* Side by side like the case-study cards at this width (stage left, copy right). Three phones
     would be too small here, so it's the front pair, large enough to fill the stage. */
  body[data-design-system="curated"] .proof-soon{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body[data-design-system="curated"] .soon-stage{order:-1;min-height:460px;padding-top:76px}
  body[data-design-system="curated"] .soon-copy{padding-top:clamp(36px,4vw,64px)}
  body[data-design-system="curated"] .soon-phone--r{display:none}
  body[data-design-system="curated"] .soon-phone--front{width:214px}
  body[data-design-system="curated"] .soon-phone--side{width:176px}
  body[data-design-system="curated"] .soon-phone--l{margin-right:-56px}
}
@media(max-width:760px){
  body[data-design-system="curated"] .soon-wrap{margin-top:40px}
  body[data-design-system="curated"] .proof-soon{grid-template-columns:1fr}
  body[data-design-system="curated"] .soon-stage{order:-1;min-height:400px;padding:72px 8px 28px}
  body[data-design-system="curated"] .soon-phone--r{display:none}
  body[data-design-system="curated"] .soon-phone--front{width:min(50%,196px)}
  body[data-design-system="curated"] .soon-phone--l{width:min(42%,164px);margin-right:-24px}
  body[data-design-system="curated"] .soon-copy{padding:32px 26px 40px}
}

@media(hover:hover) and (pointer:fine){
  body[data-design-system="curated"] .proof-card:hover{border-color:rgba(255,255,255,.09);transform:none}
  body[data-design-system="curated"] .proof-card:hover::after{opacity:1;transform:none}
  body[data-design-system="curated"] .proof-card:hover .proof-device-wrap::after{opacity:1}
  /* the pair fans open: the lead phone lifts, the second slides out from behind it */
  body[data-design-system="curated"] .proof-card:hover .proof-device{transform:translateY(-6px) rotate(-2.2deg) scale(1.018);transition-duration:var(--motion-slow)}
  body[data-design-system="curated"] .proof-card:hover .proof-device-back{transform:translate(12px,3px) rotate(5deg);transition-duration:var(--motion-slow)}
  body[data-design-system="curated"] .proof-card:hover .proof-link{gap:10px;color:var(--accent)}
  body[data-design-system="curated"] .proof-card:hover .proof-link span{transform:translateX(4px)}
  body[data-design-system="curated"] .cf-submit:hover:not(:disabled){background:var(--accent);color:var(--curated-deep);transform:scale(1.025)}
  body[data-design-system="curated"] .cf-submit:active:not(:disabled){transform:scale(.98)}
  body[data-design-system="curated"] .cf-submit:hover:not(:disabled) .cf-submit-arrow{transform:translateX(6px)}
  body[data-design-system="curated"] .cf-input:hover:not(:focus){border-color:var(--field-line-hover)}
  body[data-design-system="curated"] .cf-field.is-invalid .cf-input:hover:not(:focus){border-color:var(--field-error)}
  body[data-design-system="curated"] .footer-ukgc:hover,
  body[data-design-system="curated"] .footer-linkedin:hover{color:var(--accent)}
}

@media (hover: none), (pointer: coarse){
  body[data-design-system="curated"] .proof-card:hover::before,
  body[data-design-system="curated"] .proof-card:hover::after{opacity:0}
  body[data-design-system="curated"] .proof-card:hover .proof-device-wrap::after,
  body[data-design-system="curated"] .proof-device-wrap:hover::after{opacity:.55}
  body[data-design-system="curated"] .proof-card:hover .proof-device{transform:rotate(-1.5deg)}
  body[data-design-system="curated"] .proof-card:hover .proof-device-back{transform:rotate(2.5deg)}
  body[data-design-system="curated"] .proof-card:hover .proof-link{gap:10px}
  body[data-design-system="curated"] .proof-card:hover .proof-link span{transform:none}
}

/* Case study cards: a card stays lit while its page loads, and keyboard focus on the
   inner link shows the same outline as hover. After the touch resets, which
   share this specificity and would otherwise cancel it on tap. */
body[data-design-system="curated"] .proof-card:has(.proof-link:focus-visible)::after,
body[data-design-system="curated"] .proof-card.is-opening::after{opacity:1;transition-duration:var(--motion-quick)}

@media(max-width:1100px) and (min-width:761px){
  body[data-design-system="curated"] .metrics-inner{grid-template-columns:1fr;gap:28px}
  body[data-design-system="curated"] .metrics-eyebrow{max-width:none}
  body[data-design-system="curated"] .proof-cards{grid-template-columns:1fr;gap:24px}
  body[data-design-system="curated"] .proof-card-inner{display:grid;grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);grid-auto-rows:auto;padding:0 38px 38px;column-gap:38px}
  /* Side by side, the pair only filled ~59% of the stage here; a slight overlap lets both grow */
  body[data-design-system="curated"] .proof-device-wrap{--proof-primary-width:204px;--proof-support-width:172px;grid-column:1;grid-row:1/9;margin:0 0 -38px -38px;min-height:520px;padding:36px 14px;gap:0}
  body[data-design-system="curated"] .proof-device{z-index:2}
  body[data-design-system="curated"] .proof-device-back{margin-left:-40px;z-index:1}
  body[data-design-system="curated"] .proof-card-inner>*:not(.proof-device-wrap){grid-column:2}
  body[data-design-system="curated"] .proof-operator{margin-top:42px}
  body[data-design-system="curated"] .proof-card.rv{transform:translate3d(0,40px,0)}
  body[data-design-system="curated"] .proof-card.rv.vis{transform:translate3d(0,0,0)}
  body[data-design-system="curated"] .proof-card.rv.rv-d1,
  body[data-design-system="curated"] .proof-card.rv.rv-d2,
  body[data-design-system="curated"] .proof-card.rv.rv-d3{transition-delay:0ms}
  body[data-design-system="curated"] .proof-device,
  body[data-design-system="curated"] .proof-device-back{display:block;height:auto}
}

/* Tablet/phone: the base nav is a solid older navy; let the hero show through until scrolled. */
@media(max-width:900px){
  body[data-design-system="curated"] .nav{background:transparent}
  body[data-design-system="curated"] .nav.scrolled{background:var(--grain),rgba(11,19,33,.98)}
}

@media(max-width:760px){
  body[data-design-system="curated"] .hero-headline{font-size:clamp(42px,12vw,62px)}
  body[data-design-system="curated"] .hero-watermark{width:115vw;right:-36%;top:44%;--wm-op:.08}
  body[data-design-system="curated"] .metrics-bar{padding:60px 20px}
  body[data-design-system="curated"] .metrics-inner{grid-template-columns:1fr;gap:28px}
  body[data-design-system="curated"] .metrics-row{grid-template-columns:1fr}
  body[data-design-system="curated"] .metric{min-height:132px;padding:28px 24px}
  body[data-design-system="curated"] .metric-has-bench{padding-top:78px}
  body[data-design-system="curated"] .metric-has-bench .metric-bench[data-kind="fill"]{top:34px}
  body[data-design-system="curated"] .metric-has-bench:has(.metric-bench[data-kind="fill"]){padding-top:62px}
  body[data-design-system="curated"] .metric-bench{left:24px;right:24px;top:30px}
  body[data-design-system="curated"] .proof-cards{grid-template-columns:1fr;gap:16px}
  body[data-design-system="curated"] .proof-card.rv{transform:translate3d(0,24px,0);transition-duration:var(--motion-reveal-compact)}
  body[data-design-system="curated"] .proof-card.rv.vis{transform:translate3d(0,0,0)}
  body[data-design-system="curated"] .proof-card.rv.rv-d1,
  body[data-design-system="curated"] .proof-card.rv.rv-d2,
  body[data-design-system="curated"] .proof-card.rv.rv-d3{transition-delay:0ms}
  body[data-design-system="curated"] .proof-card-inner{display:flex;padding:0 26px 40px}
  body[data-design-system="curated"] .proof-device-wrap{--proof-primary-width:min(50%,196px);--proof-support-width:min(41%,164px);min-height:420px;margin:0 -26px 36px;padding:24px 6px;gap:4px}
  body[data-design-system="curated"] .proof-device,
  body[data-design-system="curated"] .proof-device-back{display:block;height:auto;max-width:none}
  body[data-design-system="curated"] .proof-operator{margin-top:0}
}

@media(max-width:420px){
  body[data-design-system="curated"] .hero-headline{font-size:clamp(34px,9.2vw,42px)}
  body[data-design-system="curated"] .proof-device-wrap{--proof-primary-width:min(50%,166px);--proof-support-width:min(41%,142px);min-height:370px}
}

@media(max-width:360px){
  body[data-design-system="curated"] .hero-headline{font-size:clamp(32px,9vw,34px)}
}

@media(prefers-reduced-motion:reduce){
  body[data-design-system="curated"] .proof-card::before,
  body[data-design-system="curated"] .proof-card::after,
  body[data-design-system="curated"] .proof-device-wrap::after{transition-duration:var(--motion-fast)!important}
  body[data-design-system="curated"] .proof-device,
  body[data-design-system="curated"] .proof-device-back,
  body[data-design-system="curated"] .proof-link span,
  body[data-design-system="curated"] .cf-submit,
  body[data-design-system="curated"] .cf-submit-arrow{transition-duration:.01ms!important;transform:none!important}
  body[data-design-system="curated"] .proof-card.rv{opacity:0;transform:none!important;filter:none!important;transition:opacity 200ms var(--motion-out)!important;transition-delay:0ms!important}
  body[data-design-system="curated"] .proof-card.rv.vis{opacity:1}
  body[data-design-system="curated"] .cf-error{transform:none!important}
  body[data-design-system="curated"] .close-headline-italic{opacity:1!important;transform:none!important;transition:none!important}
}