/* ==========================================================================
   BeyondEdge — the minimal look (direction since 6 Oct 2026).

   The same pages and markup as the classic look; this sheet restyles them
   when <html data-style="minimal">. It follows the layout-2027 homepage:
   white space does the separating, hairlines instead of boxes, square corners,
   Archivo headlines, brand-guide colours only (Plum #2B1F4F, Bright
   Purple #5145A1, Bright Purple tint #B3A9EE), a deep plum band for the footer, and a
   light and a dark theme from the same tokens.

   Nothing here applies to the classic look, except hiding the minimal-only
   chrome (the {be} logo, the theme button, the minimal
   footer and its labels).
   ========================================================================== */

/* ---- Classic look: the minimal-only chrome stays out of the way ---------- */
html:not([data-style="minimal"]) .min-brand,
html:not([data-style="minimal"]) .min-theme,
html:not([data-style="minimal"]) .min-foot,
html:not([data-style="minimal"]) .min-only,
html:not([data-style="minimal"]) .lbl-min{display:none !important}
html[data-style="minimal"] .lbl-classic,
html[data-style="minimal"] .classic-only{display:none !important}

/* ---- The review switch (both looks) -------------------------------------- */
.style-switch{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border:0;cursor:pointer;font:700 12px/1 var(--font-label);letter-spacing:.08em;text-transform:uppercase;
  background:#2B1F4F;color:#fff;border-radius:999px;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.style-switch__k{opacity:.6}
.style-switch:hover{background:#5145A1}
.style-switch:focus-visible{outline:2px solid #5145A1;outline-offset:3px}
html[data-style="minimal"] .style-switch{border-radius:0;box-shadow:none}

/* ==========================================================================
   Tokens
   ========================================================================== */
html[data-style="minimal"]{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --tint:#F3F1F8;            /* light lilac bands */
  --ink:#2B1F4F;             /* deep plum */
  --ink-soft:#4B4268;
  --ink-faint:#716A8E;
  --line:#E4E0EF;
  --line-strong:#2B1F4F;
  --accent:#5145A1;          /* brand Bright Purple: links, labels */
  --accent-svc:#5145A1;
  --brand:#5145A1;           /* primary button */
  --btn-ink:#FFFFFF;
  --btn-hover:#2B1F4F;       /* plum: one dark purple site-wide (13 Oct review) */
  --plum:#2B1F4F;
  --header:rgba(255,255,255,.94);
  --shadow:none;
  --radius:0px;
  --gutter:clamp(16px,4vw,48px);
  --sec:clamp(80px,10vw,152px);
  --font-display:"Archivo","Arial",system-ui,sans-serif;
  --mark-be:#2B1F4F; --mark-brace:#807C8B;   /* the logo in brand colours */
  color-scheme:light;
}
html[data-style="minimal"][data-theme="dark"]{
  --bg:#15102A;
  --surface:#15102A;
  --tint:#1D1636;
  --ink:#F3F1F8;
  --ink-soft:#C9C2DE;
  --ink-faint:#9C94B8;
  --line:#2F2750;
  --line-strong:#F3F1F8;
  --accent:#B3A9EE;          /* Bright Purple tint */
  --accent-svc:#B3A9EE;
  --brand:#FFFFFF;           /* purple is too weak on near-black: white button */
  --btn-ink:#2B1F4F;
  --btn-hover:#B3A9EE;
  --header:rgba(21,16,42,.92);
  --mark-be:#FFFFFF; --mark-brace:#BDBAC7;   /* the brand guide's reversed logo */
  color-scheme:dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
html[data-style="minimal"] *,
html[data-style="minimal"] *::before,
html[data-style="minimal"] *::after{border-radius:0 !important}
html[data-style="minimal"] body{background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;
  transition:background-color var(--hover-dur) var(--ease-soft),color var(--hover-dur) var(--ease-soft)}
html[data-style="minimal"] a{color:var(--accent)}
html[data-style="minimal"] a:hover{color:var(--ink)}
html[data-style="minimal"] :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-style="minimal"] h1,
html[data-style="minimal"] h2,
html[data-style="minimal"] h3{font-family:var(--font-display);color:var(--ink);text-wrap:balance}
/* one confident weight for headlines, whatever the page set inline */
html[data-style="minimal"] h1,
html[data-style="minimal"] h2{font-weight:700 !important;letter-spacing:-.03em}
html[data-style="minimal"] h3{font-weight:700 !important;letter-spacing:-.015em}
html[data-style="minimal"] .wrap{max-width:calc(1240px + var(--gutter)*2);padding:0 var(--gutter)}

/* the small uppercase kicker above titles */
html[data-style="minimal"] .eyebrow{font:600 12px/1.4 var(--font-label);letter-spacing:.16em;color:var(--accent-svc)}
html[data-style="minimal"] .home-link{width:30px;height:30px;background:none;border:1px solid var(--line);color:var(--ink)}
html[data-style="minimal"] .home-link:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-style="minimal"] .eyebrow__up,
html[data-style="minimal"] .eyebrow__up:hover{color:inherit}

/* buttons: square, one primary per screen */
html[data-style="minimal"] .btn{padding:17px 26px;font-size:15px;font-weight:700;letter-spacing:.01em;transform:none !important}
html[data-style="minimal"] .btn--primary{background:var(--brand);color:var(--btn-ink);border-color:var(--brand)}
html[data-style="minimal"] .btn--primary:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)}
html[data-style="minimal"][data-theme="dark"] .btn--primary:hover{color:#2B1F4F}
html[data-style="minimal"] .btn--ghost{background:none;color:var(--ink);border-color:var(--ink)}
html[data-style="minimal"] .btn--ghost:hover{background:var(--ink);color:var(--bg)}
html[data-style="minimal"] .text-link{color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px}

/* no lifted cards, no drop shadows */
html[data-style="minimal"] *{box-shadow:none !important}

/* ==========================================================================
   Header and menus
   ========================================================================== */
html[data-style="minimal"] .util-bar{display:none}
html[data-style="minimal"] .site-nav{position:sticky;top:0;z-index:40;min-height:84px;gap:32px;
  padding:0 max(var(--gutter),calc((100% - 1240px)/2));background:var(--header);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color var(--hover-dur) var(--ease-soft),background-color var(--hover-dur) var(--ease-soft)}
html[data-style="minimal"] .site-nav.is-stuck{border-bottom-color:var(--line)}
html[data-style="minimal"] .site-nav__home{display:none}
html[data-style="minimal"] .min-brand{display:flex;align-items:center;gap:14px;flex:none;text-decoration:none}
html[data-style="minimal"] .min-brand svg{width:72px;height:36px}
html[data-style="minimal"] .min-brand b{font:900 26px/1.6 "Lato",system-ui,sans-serif;letter-spacing:.01em;color:var(--mark-be)}
#be-mark .br{fill:var(--mark-brace)}
#be-mark .lt{fill:var(--mark-be)}
html[data-style="minimal"] .site-nav__links{margin-left:auto;gap:34px;font-size:15px;font-weight:400}
html[data-style="minimal"] .site-nav__links>a,
html[data-style="minimal"] .site-nav__links>.nav-dd>a{color:var(--ink-soft);padding:6px 0;background:none !important;position:relative}
html[data-style="minimal"] .site-nav__links>a::after,
html[data-style="minimal"] .site-nav__links>.nav-dd>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--hover-move) var(--ease-soft)}
html[data-style="minimal"] .site-nav__links>a:hover,
html[data-style="minimal"] .site-nav__links>.nav-dd>a:hover{color:var(--ink)}
html[data-style="minimal"] .site-nav__links>a:hover::after,
html[data-style="minimal"] .site-nav__links>.nav-dd>a:hover::after,
html[data-style="minimal"] .site-nav__links a[aria-current]::after{transform:scaleX(1)}
html[data-style="minimal"] .site-nav__links a[aria-current]{color:var(--ink);font-weight:700}
html[data-style="minimal"] .site-nav .btn{padding:12px 20px;font-size:14px}
html[data-style="minimal"] .min-theme{flex:none;width:44px;height:44px;display:grid;place-items:center;background:none;cursor:pointer;padding:0;
  border:1px solid var(--line);color:var(--ink);transition:border-color var(--hover-dur) var(--ease-soft)}
html[data-style="minimal"] .min-theme:hover{border-color:var(--ink)}
html[data-style="minimal"] .min-theme svg{width:18px;height:18px}
html[data-style="minimal"] .min-theme .sun{display:none}
html[data-theme="dark"] .min-theme .sun{display:block}
html[data-theme="dark"] .min-theme .moon{display:none}
html[data-style="minimal"] .site-nav .menu-toggle{color:var(--ink);border-color:var(--line)}
@media (max-width:560px){
  html[data-style="minimal"] .site-nav .min-brand svg{width:60px;height:30px}
  html[data-style="minimal"] .site-nav .min-brand b{font-size:22px}
}
@media (max-width:760px){
  html[data-style="minimal"] .site-nav{min-height:68px;gap:12px}
  html[data-style="minimal"] .min-theme{margin-left:auto}
}

/* dropdown panels */
html[data-style="minimal"] .nav-dd__menu{background:var(--bg);border:1px solid var(--line);padding:6px;margin-top:14px}
/* Offering mega panel in the theme's tokens (light and dark); layout in menu.css */
html[data-style="minimal"] .mega{--m-bg:var(--bg);--m-ink:var(--ink);--m-soft:var(--ink-soft);--m-accent:var(--accent);--m-line:var(--line);
  --m-line-strong:var(--line-strong);--m-tint:var(--tint);--m-btn:var(--ink);--m-btn-ink:var(--bg);--m-btn-hover:var(--accent);--m-btn-hover-ink:#fff}
html[data-style="minimal"][data-theme="dark"] .mega{--m-btn-hover-ink:#15102A}
/* the generic minimal dropdown rules above outrank menu.css; undo them for the panel */
html[data-style="minimal"] .nav-dd__menu.mega{margin:0;padding:0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-style="minimal"] .nav-dd__menu.mega a.mega__link{color:var(--m-ink) !important;font-size:inherit}
html[data-style="minimal"] .nav-dd__menu.mega a.mega__link:hover{background:transparent;color:var(--m-ink) !important}
html[data-style="minimal"] .nav-dd__menu.mega a.mega__all{color:var(--m-btn-ink) !important;font-size:14.5px}
html[data-style="minimal"] .nav-dd__menu.mega a.mega__all:hover{background:var(--m-btn-hover);color:var(--m-btn-hover-ink) !important}
html[data-style="minimal"] .nav-dd__menu a,
html[data-style="minimal"] .site-nav__links .nav-dd__menu a{color:var(--ink-soft) !important;font-size:15px}
html[data-style="minimal"] .nav-dd__menu a:hover,
html[data-style="minimal"] .site-nav__links .nav-dd__menu a:hover{background:var(--tint);color:var(--ink) !important}

/* the mobile menu panel */


/* "Built for" audience bar: under the header on the audience sites */
html:not([data-style="minimal"]) .aud{display:none !important}
html[data-style="minimal"] .aud{border-bottom:1px solid var(--line);background:var(--tint);transition:background-color var(--hover-dur) var(--ease-soft)}
html[data-style="minimal"] .aud__in{display:flex;align-items:center;gap:8px 28px;min-height:48px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
  max-width:calc(1240px + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
html[data-style="minimal"] .aud__in::-webkit-scrollbar{display:none}
html[data-style="minimal"] .aud p{margin:0 4px 0 0;font:600 11px/1 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
html[data-style="minimal"] .aud a{font-size:14px;color:var(--ink-soft);padding:13px 0;border-bottom:2px solid transparent;text-decoration:none;transition:color var(--hover-dur) var(--ease-soft),border-color var(--hover-dur) var(--ease-soft)}
html[data-style="minimal"] .aud a:hover{color:var(--ink)}
html[data-style="minimal"] .aud a[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
html[data-style="minimal"] .aud a.ext{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line-strong);color:var(--ink)}
html[data-style="minimal"] .aud a.ext:hover{background:var(--ink);color:var(--bg)}

/* the section dots at the bottom of classic pages */
html[data-style="minimal"] .page-chrome{display:none}

/* ==========================================================================
   Page heads
   ========================================================================== */
html[data-style="minimal"] .svc-hero,
html[data-style="minimal"] .article__head{padding:clamp(72px,9vw,136px) 0 clamp(56px,6vw,96px)}
html[data-style="minimal"] .svc-hero h1{font-size:clamp(44px,6.2vw,96px);line-height:.98;letter-spacing:-.04em;font-weight:800 !important;margin:24px 0 28px}
/* beside a photo (service pages) the headline has half the width: smaller, and long words may break */
html[data-style="minimal"] .svc-hero__grid h1{font-size:clamp(38px,4.4vw,68px);line-height:1.02;overflow-wrap:anywhere}
html[data-style="minimal"] .article__head h1{font-size:clamp(36px,4.6vw,64px);line-height:1.02;margin:20px 0 24px}
html[data-style="minimal"] .svc-hero__lead,
html[data-style="minimal"] .article__lead{font-size:clamp(18px,1.5vw,20px);color:var(--ink-soft)}
html[data-style="minimal"] .svc-hero__quote{font-family:var(--font-display);font-style:normal;font-weight:600;color:var(--ink)}
html[data-style="minimal"] .back-link,
html[data-style="minimal"] .crumbs,
html[data-style="minimal"] .crumbs a{color:var(--ink-faint)}

/* photographs: square, no frame */
html[data-style="minimal"] .page-banner,
html[data-style="minimal"] .svc-photo,
html[data-style="minimal"] .svc-band,
html[data-style="minimal"] .article__cover,
html[data-style="minimal"] .ceo__photo,
html[data-style="minimal"] .story{background:var(--tint)}

/* the abstract figure of the classic pages: lines only */
html[data-style="minimal"] .svc-figure__card{background:var(--tint)}
html[data-style="minimal"] .svc-figure__card::before{background:none}
html[data-style="minimal"] .svc-figure__shape{background:var(--accent-svc)}
html[data-style="minimal"] .icon-tile,
html[data-style="minimal"] .svc-tile__icon{background:var(--accent-svc)}
html[data-style="minimal"][data-theme="dark"] .icon-tile img,
html[data-style="minimal"][data-theme="dark"] .svc-tile__icon img{filter:brightness(0)}

/* ==========================================================================
   Sections
   ========================================================================== */
html[data-style="minimal"] .section{padding:var(--sec) 0}
/* two plain sections in a row share one gap; after a tinted or dark band the
   next section keeps its full top padding, so its label never sits on the edge */
html[data-style="minimal"] .section:not(.section--tint):not(.section--brand) + .section:not(.section--tint):not(.section--brand){padding-top:0}
html[data-style="minimal"] .section--tint{background:var(--tint);border:0}
html[data-style="minimal"] .section__head{max-width:860px;margin-bottom:clamp(40px,5vw,72px)}
html[data-style="minimal"] .section__head h2{font-size:clamp(32px,4.2vw,60px);line-height:1.04;margin:22px 0 18px}
html[data-style="minimal"] .section__head p{font-size:18px;color:var(--ink-soft)}
/* the purple closing band: one flat plum, no glows */
html[data-style="minimal"] .section--brand{background:#2B1F4F;color:#fff}
html[data-style="minimal"] .section--brand h2,
html[data-style="minimal"] .section--brand h3{color:#fff}
html[data-style="minimal"] .section--brand .eyebrow{color:#B3A9EE}
html[data-style="minimal"] .section--brand .btn--primary{background:#fff;color:#2B1F4F;border-color:#fff}
html[data-style="minimal"] .section--brand .btn--primary:hover{background:#B3A9EE;border-color:#B3A9EE}

html[data-style="minimal"] .split__rule{height:2px;width:40px;background:var(--ink)}
html[data-style="minimal"] .split__item p{color:var(--ink-soft)}
html[data-style="minimal"] .proof__item b{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em}

/* ==========================================================================
   Cards become hairline blocks: a strong rule on top, no box, no lift
   ========================================================================== */
html[data-style="minimal"] .card,
html[data-style="minimal"] .svc-tile,
html[data-style="minimal"] .office,
html[data-style="minimal"] .side-link,
html[data-style="minimal"] .belief__points li{background:none;border:0;border-top:1px solid var(--line-strong);
  padding:28px 0 0;transform:none !important;color:var(--ink)}
html[data-style="minimal"] .belief__points li{padding-left:0}
html[data-style="minimal"] .card p,
html[data-style="minimal"] .card li,
html[data-style="minimal"] .svc-tile p,
html[data-style="minimal"] .office address,
html[data-style="minimal"] .side-link span{color:var(--ink-soft)}
html[data-style="minimal"] .card li::before,
html[data-style="minimal"] .stage__text li::before{width:8px;height:2px;top:.8em;background:var(--accent-svc)}
html[data-style="minimal"] .card__num{color:var(--accent-svc);font-weight:600;letter-spacing:.16em}
html[data-style="minimal"] .svc-tile:hover h3,
html[data-style="minimal"] .side-link:hover b{color:var(--accent)}
html[data-style="minimal"] .svc-tile__go{color:var(--ink) !important;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:3px}
html[data-style="minimal"] .svc-tile:hover .svc-tile__go{color:var(--accent) !important}

/* photo cards: the picture on top, the text straight under it */
html[data-style="minimal"] .svc-tile--photo,
html[data-style="minimal"] .insight-card,
html[data-style="minimal"] .award,
html[data-style="minimal"] .role,
html[data-style="minimal"] .stage{background:none;border:0;padding:0;transform:none !important;color:var(--ink)}
html[data-style="minimal"] .svc-tile__body,
html[data-style="minimal"] .award__text,
html[data-style="minimal"] .role__text,
html[data-style="minimal"] .stage__text{padding:24px 0 0}
html[data-style="minimal"] .insight-card{padding-bottom:0}
html[data-style="minimal"] .insight-card>*:not(.insight-card__media){margin-inline:0}
html[data-style="minimal"] .svc-tile__media,
html[data-style="minimal"] .insight-card__media,
html[data-style="minimal"] .role__photo,
html[data-style="minimal"] .stage__photo{background:var(--tint)}
html[data-style="minimal"] .svc-tile__media img,
html[data-style="minimal"] .insight-card__media img,
html[data-style="minimal"] .role__photo img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html[data-style="minimal"] .svc-tile--photo:hover .svc-tile__media img,
html[data-style="minimal"] .insight-card:hover .insight-card__media img,
html[data-style="minimal"] .role:hover .role__photo img{transform:scale(1.07)}
html[data-style="minimal"] .insight-card:hover h3,
html[data-style="minimal"] .award:hover h3{color:var(--accent)}
html[data-style="minimal"] .insight-card__cat,
html[data-style="minimal"] .leader__focus,
html[data-style="minimal"] .job-row__where b,
html[data-style="minimal"] .prod-row em,
html[data-style="minimal"] .product-list em{color:var(--accent-svc);letter-spacing:.14em}
html[data-style="minimal"] .stage__text h3{color:var(--ink)}
html[data-style="minimal"] .award__media{background:#fff;border:0}

/* leadership: 3x3, photo beside the text, no rules or boxes (Jack, 8 Oct
   2026: keep the earlier 3x3 layout, but modern and clean). The photo column
   stays near the headshots' 276px width so they stay sharp. */
html[data-style="minimal"] .leaders{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:clamp(32px,4vw,56px) clamp(20px,2.6vw,40px)}
html[data-style="minimal"] .leader{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:start;gap:clamp(16px,1.8vw,24px);
  background:none;border:0;border-radius:0;overflow:visible;transform:none !important}
html[data-style="minimal"] .leader__photo{aspect-ratio:3/4;min-height:0;background:var(--tint);overflow:hidden}
html[data-style="minimal"] .leader__photo img{transition:transform var(--hover-move) var(--ease-soft)}
html[data-style="minimal"] .leader:hover .leader__photo img{transform:scale(1.04)}
html[data-style="minimal"] .leader__text{padding:4px 0 0;gap:6px}  /* top-aligned with the photo (Jack, 8 Oct 2026) */
/* name first, then the role, the purple focus label last (Jack, 8 Oct 2026) */
html[data-style="minimal"] .leader__focus{order:0;margin:8px 0 0;padding:0;font-size:11.5px}
html[data-style="minimal"] .leader__text h3{font-size:clamp(18px,1.5vw,21px);line-height:1.25}
html[data-style="minimal"] .leader__role{font-size:15px;line-height:1.45;color:var(--ink-soft)}
html[data-style="minimal"] .leader__head{align-items:flex-start;justify-content:flex-start;gap:10px}
html[data-style="minimal"] .leader__in{margin-top:3px}
@media (max-width:1100px){html[data-style="minimal"] .leaders{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){html[data-style="minimal"] .leaders{grid-template-columns:minmax(0,1fr)}
  html[data-style="minimal"] .leader{grid-template-columns:120px minmax(0,1fr)}}

/* products: no tinted boxes and no rules; white space separates the rows (21 Oct 2026) */
html[data-style="minimal"] .prod-row li{background:none;border:0;padding:0}
html[data-style="minimal"] .prod-row ul{row-gap:clamp(40px,4vw,56px)}
html[data-style="minimal"] .prod-row span{color:var(--ink-soft)}

/* the closing callout: rules above and below instead of a box */
html[data-style="minimal"] .callout{background:none;border:0;border-block:1px solid var(--line-strong);padding:clamp(32px,4vw,56px) 0}
html[data-style="minimal"] .callout h2,
html[data-style="minimal"] .callout h3{font-size:clamp(28px,3.2vw,44px) !important;line-height:1.06}
html[data-style="minimal"] .callout p{color:var(--ink-soft)}

/* jobs: rows between rules */
html[data-style="minimal"] .jobs{gap:0;border-top:1px solid var(--line-strong)}
html[data-style="minimal"] .job-row{background:none;border:0;border-bottom:1px solid var(--line);padding:28px 0;transform:none !important;
  transition:padding var(--hover-move) var(--ease-soft),background-color var(--hover-dur) var(--ease-soft)}
html[data-style="minimal"] .job-row:hover{background:var(--tint);padding-inline:24px}
html[data-style="minimal"] .job-row p,
html[data-style="minimal"] .job-row__where{color:var(--ink-soft)}

/* chips and filters */
html[data-style="minimal"] .chip,
html[data-style="minimal"] .cat-chip,
html[data-style="minimal"] .bot-line li{background:none;border:1px solid var(--line);color:var(--ink);transform:none !important}
html[data-style="minimal"] .cat-chip:hover{border-color:var(--ink);color:var(--ink)}
html[data-style="minimal"] .cat-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-style="minimal"] .cat-chip[aria-pressed="true"] span{color:inherit}

/* client logos and marks */
html[data-style="minimal"] .logo-wall__item{background:none;border:0;border-top:1px solid var(--line)}
html[data-style="minimal"][data-theme="dark"] .logo-wall__item img,
html[data-style="minimal"][data-theme="dark"] .marks img{filter:grayscale(1) invert(1) brightness(1.4);mix-blend-mode:screen}
html[data-style="minimal"] .testimonial blockquote{font-family:var(--font-display);font-weight:600;color:var(--ink)}
html[data-style="minimal"] .testimonial__mark{color:var(--accent)}

/* the ODC comparison and the dark band */
html[data-style="minimal"] .compare{border-color:rgba(255,255,255,.2)}

/* AI-Synthesized Solutions (services page): the classic dark glowing panel
   becomes the site's flat plum band, like the footer and the careers panel.
   It stays dark in both themes, so its text is set light explicitly rather
   than following the page ink. */
html[data-style="minimal"] .synth{background:var(--plum);color:#fff}
html[data-style="minimal"] .synth::before{opacity:.5}
html[data-style="minimal"] .synth__eyebrow{font:600 12px/1.4 var(--font-label);letter-spacing:.16em;color:#B3A9EE}
html[data-style="minimal"] .synth__title{color:#fff;font-size:clamp(32px,4vw,56px);line-height:1.04}
html[data-style="minimal"] .synth__head p{color:#DCD6EE}
html[data-style="minimal"] .synth__threads li{background:none;border:1px solid rgba(255,255,255,.28);color:#DCD6EE}
html[data-style="minimal"] .synth__threads li::before{background:#B3A9EE}
html[data-style="minimal"] .synth-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);backdrop-filter:none;-webkit-backdrop-filter:none;transform:none !important}
html[data-style="minimal"] .synth-card:hover,
html[data-style="minimal"] .synth-card.is-open{background:rgba(255,255,255,.09);border-color:rgba(179,169,238,.6)}
html[data-style="minimal"] .synth-card::before{background:#B3A9EE;height:2px;top:-1px}
html[data-style="minimal"] .synth-card::after{color:#fff;border-color:rgba(255,255,255,.3)}
html[data-style="minimal"] .synth-card__problem{color:#E8E4F5}
html[data-style="minimal"] .synth-card h3,
html[data-style="minimal"] .synth-card h4{color:#fff}
html[data-style="minimal"] .synth-card__apply{color:#DCD6EE}
html[data-style="minimal"] .synth-card__btn:focus-visible{outline-color:#fff}
html[data-style="minimal"] .synth a{color:#fff}

/* ==========================================================================
   Forms
   ========================================================================== */
html[data-style="minimal"] .form-card,
html[data-style="minimal"] .apply-card{background:var(--tint);border:0;padding:clamp(28px,3.4vw,48px)}
html[data-style="minimal"] .field label,
html[data-style="minimal"] .field__hint{color:var(--ink)}
html[data-style="minimal"] .field input,
html[data-style="minimal"] .field select,
html[data-style="minimal"] .field textarea,
html[data-style="minimal"] .file-drop{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
html[data-style="minimal"] .field input:focus,
html[data-style="minimal"] .field select:focus,
html[data-style="minimal"] .field textarea:focus{outline:2px solid var(--accent);background:var(--bg)}
html[data-style="minimal"] .form__status,
html[data-style="minimal"] .form__notice{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
/* a send that failed: a heavier rule on the left, so it reads apart from a thank-you */
html[data-style="minimal"] .form__status.is-error{border-left:3px solid var(--ink);font-weight:600}
html[data-style="minimal"] .fineprint{color:var(--ink-faint)}

/* ==========================================================================
   Articles
   ========================================================================== */
html[data-style="minimal"] .prose{color:var(--ink-soft);font-size:18px}
html[data-style="minimal"] .prose strong{color:var(--ink)}
html[data-style="minimal"] .prose a{color:var(--accent)}
html[data-style="minimal"] .prose blockquote{border-left:2px solid var(--ink);color:var(--ink);font-style:normal}
html[data-style="minimal"] .prose code{background:var(--tint)}
html[data-style="minimal"] .prose thead th{border-bottom:1px solid var(--ink)}
html[data-style="minimal"] .prose tbody tr:nth-child(even){background:var(--tint)}
html[data-style="minimal"] .article__byline{color:var(--ink-faint)}

/* ==========================================================================
   Footer: the classic outro gives way to the plum band
   ========================================================================== */
html[data-style="minimal"] .site-outro{display:none}
html[data-style="minimal"] .min-foot{position:relative;isolation:isolate;overflow:hidden;background:var(--plum);color:#fff;
  min-height:clamp(480px,42vw,680px);display:flex;flex-direction:column;padding-top:clamp(88px,9vw,144px)}
html[data-style="minimal"] .min-foot__field{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);mask-image:linear-gradient(to bottom,transparent 0%,#000 45%)}
html[data-style="minimal"] .min-foot__grid,html[data-style="minimal"] .min-foot__base{width:100%;max-width:calc(1240px + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);box-sizing:border-box}
html[data-style="minimal"] .min-foot__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:48px;
  margin-bottom:clamp(88px,9vw,144px)}
html[data-style="minimal"] .min-foot__brand{grid-column:1 / span 3;display:flex;flex-direction:column;gap:18px}
html[data-style="minimal"] .min-foot .min-brand{--mark-be:#FFFFFF;--mark-brace:#BDBAC7}
/* footer: the {be} mark alone, large (Jack, 7 Oct 2026: the logo must be prominent) */
html[data-style="minimal"] .min-foot .min-brand svg{width:128px;height:64px}
@media (max-width:640px){html[data-style="minimal"] .min-foot .min-brand svg{width:104px;height:52px}}
html[data-style="minimal"] .min-foot .min-brand b{font-size:22px}
html[data-style="minimal"] .min-foot__brand p{margin:0;color:#DCD6EE;max-width:28ch}
html[data-style="minimal"] .min-foot__col{grid-column:span 2}
html[data-style="minimal"] .min-foot__col:nth-child(2){grid-column:4 / span 5}
/* Offering: double width, its links in two lists side by side */
html[data-style="minimal"] .min-foot__col.min-foot__col--wide ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:10px clamp(16px,2vw,32px)}
/* below the full grid width the brand takes its own row, so the link columns
   get the width and Offering's two lists never wrap a name; phones: one list */
@media (max-width:1240px){html[data-style="minimal"] .min-foot__brand{grid-column:1 / -1}
  html[data-style="minimal"] .min-foot__col,html[data-style="minimal"] .min-foot__col:nth-child(2){grid-column:span 2}
  html[data-style="minimal"] .min-foot__col.min-foot__col--wide{grid-column:span 8}}
@media (max-width:640px){html[data-style="minimal"] .min-foot__col.min-foot__col--wide ul{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}}
html[data-style="minimal"] .min-foot__col h3{margin:0 0 18px;font:600 12px/1.4 var(--font-label) !important;letter-spacing:.16em;text-transform:uppercase;color:#B3A9EE}
html[data-style="minimal"] .min-foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
html[data-style="minimal"] .min-foot__col a{color:#fff;font-size:16px;text-decoration:none;transition:opacity var(--hover-dur) var(--ease-soft)}
html[data-style="minimal"] .min-foot__col a:hover{opacity:.6;color:#fff}
html[data-style="minimal"] .min-foot__base{margin-top:auto;padding-block:28px clamp(28px,3vw,44px);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:#B4ABD3;position:relative}
html[data-style="minimal"] .min-foot__base::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid rgba(255,255,255,.16)}
html[data-style="minimal"] .min-foot__base a{color:#B4ABD3;text-decoration:none}
html[data-style="minimal"] .min-foot__base a:hover{color:#fff}
@media (max-width:1080px){
  html[data-style="minimal"] .min-foot__brand{grid-column:1 / -1}
  html[data-style="minimal"] .min-foot__col,html[data-style="minimal"] .min-foot__col:nth-child(2){grid-column:span 2}
  html[data-style="minimal"] .min-foot__col.min-foot__col--wide{grid-column:span 8}
}
@media (max-width:900px){html[data-style="minimal"] .min-foot__col,html[data-style="minimal"] .min-foot__col:nth-child(2){grid-column:span 6}
  html[data-style="minimal"] .min-foot__col.min-foot__col--wide{grid-column:1 / -1}}
@media (max-width:640px){
  html[data-style="minimal"] .min-foot__col,html[data-style="minimal"] .min-foot__col:nth-child(2){grid-column:span 6}
  html[data-style="minimal"] .min-foot__col.min-foot__col--wide{grid-column:1 / -1}
}

/* ==========================================================================
   Audience sites (Startups, SME Singapore): a hero photo that melts into the
   page, the way the homepage hero does
   ========================================================================== */
.aud-hero-media{display:none}   /* the classic look has no hero photo */
html[data-style="minimal"] .svc-hero.aud-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(480px,64svh,660px);display:flex;align-items:center;padding-block:clamp(64px,7vw,104px)}
html[data-style="minimal"] .aud-hero .wrap{position:relative;width:100%}
html[data-style="minimal"] .aud-hero .wrap>*{max-width:min(780px,62%)}
html[data-style="minimal"] .aud-hero h1{font-size:clamp(44px,5.4vw,84px);margin:0 0 clamp(24px,3vw,36px)}
html[data-style="minimal"] .aud-hero .svc-hero__lead{margin-bottom:40px}
html[data-style="minimal"] .aud-hero-media{display:block;position:absolute;top:0;right:0;bottom:0;width:min(62%,1100px);z-index:-1;margin:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%),linear-gradient(to top,transparent 0%,#000 26%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 42%),linear-gradient(to top,transparent 0%,#000 26%);
  mask-composite:intersect}
html[data-style="minimal"] .aud-hero-media img,
html[data-style="minimal"] .aud-hero-media video{width:100%;height:100%;object-fit:cover;display:block}
html[data-style="minimal"] .aud-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 40%,transparent) 45%,color-mix(in srgb,var(--bg) 10%,transparent) 100%)}
html[data-style="minimal"] .aud-hero h1 .acc{color:var(--accent);display:block}
/* wider than Full HD: keep the 1920px composition, centred, so the photo or
   video stays next to the headline; its right edge fades too (Jack, 19 Oct 2026) */
@media (min-width:1921px) and (min-aspect-ratio:5/4){
  html[data-style="minimal"] .aud-hero-media{right:calc((100% - 1920px) / 2);width:1100px;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%),linear-gradient(to left,transparent 0%,#000 16%),linear-gradient(to top,transparent 0%,#000 26%);
    mask-image:linear-gradient(to right,transparent 0%,#000 42%),linear-gradient(to left,transparent 0%,#000 16%),linear-gradient(to top,transparent 0%,#000 26%)}
}
@media (max-width:900px),(max-aspect-ratio:5/4){
  html[data-style="minimal"] .svc-hero.aud-hero{display:block;min-height:0;padding-top:0}
  html[data-style="minimal"] .aud-hero .wrap>*{max-width:none}
  html[data-style="minimal"] .aud-hero-media{position:relative;width:auto;aspect-ratio:4/3;max-height:52svh;margin-bottom:-10%;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);-webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-composite:add}
  html[data-style="minimal"] .aud-hero-media::after{background:color-mix(in srgb,var(--bg) 12%,transparent)}
}
/* the "To confirm" cards */
html[data-style="minimal"] .aud-tag{background:none;border:1px dashed #B26B00;color:#B26B00}
html[data-style="minimal"][data-theme="dark"] .aud-tag{border-color:#F0B65A;color:#F0B65A}
html[data-style="minimal"] .aud-tile--tbc{border:0;border-top:1px dashed var(--ink-faint)}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width:480px){
  html[data-style="minimal"] .svc-hero__actions .btn{width:100%;justify-content:space-between}
}


/* ==========================================================================
   Type scale (Website Sync, 7 Oct 2026): bigger, more direct type on every
   page, from the --t-* values in type.css.
   ========================================================================== */
html[data-style="minimal"] .eyebrow,
html[data-style="minimal"] .aud p{font-size:var(--t-label)}
html[data-style="minimal"] .aud a{font-size:15px}
html[data-style="minimal"] .svc-hero h1,
html[data-style="minimal"] .aud-hero h1{font-size:var(--t-hero-site)}
html[data-style="minimal"] .svc-hero__lead,
html[data-style="minimal"] .section__head p{font-size:var(--t-lead)}
html[data-style="minimal"] .section__head h2{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.035em}
html[data-style="minimal"] .svc-tile h3,
html[data-style="minimal"] .insight-card h3{font-size:var(--t-h3);line-height:1.2}
html[data-style="minimal"] .svc-tile p,
html[data-style="minimal"] .svc-tile__go{font-size:var(--t-body)}
html[data-style="minimal"] .step h3{font-size:var(--t-h4)}
html[data-style="minimal"] .step p{font-size:var(--t-body)}
html[data-style="minimal"] .proof__item b{font-size:clamp(40px,4.4vw,60px)}
html[data-style="minimal"] .proof__item span{font-size:16px}
html[data-style="minimal"] .min-foot__col h3{font-size:var(--t-label) !important}
/* phones: a long hyphenated word in a hero ("Enterprise-grade") may break
   after its hyphen rather than run off the screen */
@media (max-width:480px){html[data-style="minimal"] .aud-hero h1 .acc span{white-space:normal !important}}
@media (max-width:360px){html[data-style="minimal"] .svc-hero h1,html[data-style="minimal"] .aud-hero h1{font-size:34px}html[data-style="minimal"] .section__head h2{font-size:34px}html[data-style="minimal"] .btn{white-space:normal;text-align:center}}

/* Headlines more striking (Daniel, Website Sync 7 Oct: "tells it straight to
   the face"): heroes in Archivo 900, section headings in 800, tighter. */
html[data-style="minimal"] .svc-hero h1,
html[data-style="minimal"] .aud-hero h1{font-weight:900 !important;letter-spacing:-.05em;line-height:.95}
html[data-style="minimal"] .section__head h2,
html[data-style="minimal"] .callout h2,
html[data-style="minimal"] .pwall__head h2,
html[data-style="minimal"] .aud-story h2{font-weight:900 !important;letter-spacing:-.045em}
html[data-style="minimal"] .aud-hero .wrap>h1{max-width:min(980px,78%)}
@media (max-width:900px){html[data-style="minimal"] .aud-hero .wrap>h1{max-width:none}}
/* the questions heading sits in a narrow left column: its own, smaller cap */
html[data-style="minimal"] .aud-faq .section__head h2{font-size:clamp(34px,3.4vw,52px)}

/* Offer detail pages (/service/<slug>/): the title sits in the left half of a
   two-column hero, so it takes a size that fits its longest word ("Modernization")
   instead of the full-width hero size, and never breaks inside a word
   (Jack, 9 Oct 2026: "AI modernizati/on developmen/t"). */
html[data-style="minimal"] .svc-hero .svc-hero__grid h1{font-size:clamp(36px,4.6vw,64px);line-height:1.02;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
@media (max-width:360px){html[data-style="minimal"] .svc-hero .svc-hero__grid h1{font-size:32px}}

/* Offering hero photo bleeds to the right edge of the window (trial, 13 Oct).
   Desktop layout up to Full HD only: wider screens keep the photo inside the grid.
   The bleed is the space between the grid's right edge and the window: the gutter,
   or half the leftover width once the window is wider than the 1240px grid. */
@media (min-width:981px) and (max-width:1920px){
  html[data-style="minimal"] .svc-hero{overflow-x:clip}
  html[data-style="minimal"] .svc-hero__grid > .svc-photo{
    --bleed:max(var(--gutter), (100vw - 1240px) / 2);
    margin-right:calc(var(--bleed) * -1);aspect-ratio:auto;align-self:stretch;min-height:440px}
}