/* Webist Pro site styles, matched to the live www.webist.com.my design (BeTheme build):
   black 90px header with white Roboto bold navigation and a #2991D6 active pill; Roboto body on #FCFCFC with
   #F7F7F7 alternating sections; Lato bold headings in navy #183A57; #15305E navy bands; #2563EB buttons;
   #34353A footer with #262831 copyright bar and a #CCCCCC stripe above it. Single light theme, as on the live site.
   v12 adds the photographic layer (benchmarked against accenture.com): split heroes with masked photographs,
   image cards with hover zoom, checkerboard text/photo grids, full-bleed photo bands, count-up stats, scroll reveal,
   sticky in-page navigation and a logo marquee. Colours, type and every URL are unchanged. */
:root{
  --bg:#FCFCFC;
  --alt:#F7F7F7;
  --card:#FFFFFF;
  --card-alt:#F7F7F7;
  --line:#E4E6EA;
  --ink:#183A57;
  --heading:#444444;
  --text:#626262;
  --text-2:#868686;
  --blue:#2991D6;
  --blue-2:#0071E3;
  --blue-footer:#109DE7;
  --btn:#2563EB;
  --btn-hover:#1D4ED8;
  --navy:#15305E;
  --navy-2:#193048;
  --navy-btn:#2046B5;
  --header:#000000;
  --footer:#34353A;
  --copy:#262831;
  --footer-text:#DADADA;
  --copy-text:#868686;
  --stripe:#CCCCCC;
  --stripe-text:#747474;
  --table-head:#E5E7EB;
  --table-head-text:#1F2937;
  --table-cell:#D4DCE8;
  --faq:#F2F2F2;
  --faq-num:#EAEAEA;
  --ok:#2991D6;
  --draft:#D14343;
  --wa:#25D366;
  --on-accent:#FFFFFF;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --gutter:clamp(16px, 4vw, 40px);
  --font-body:"Roboto", Arial, Tahoma, sans-serif;
  --font-head:"Lato", Arial, Tahoma, sans-serif;
  --font-mono:"Roboto", Arial, Tahoma, sans-serif;
  --font-display:"Lato", Arial, Tahoma, sans-serif;
  --fs-display:clamp(2.4rem, 5.2vw, 4.1rem);
  --fs-h1:clamp(2.1rem, 4vw, 3.2rem);
  --fs-h2:clamp(1.75rem, 3vw, 2.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --fs-h3:1.3rem;
  --fs-body:1.0625rem;
  --fs-small:.95rem;
  --fs-label:.95rem;
  --radius:6px;
  color-scheme:light;
}
/* aliases used by older components */
:root{ --paper:var(--bg); --panel:var(--card-alt); --panel-2:#ECEEF2; --ink-2:var(--text); --accent:var(--blue); --accent-strong:var(--blue-2); --accent-soft:#E8F1FA; --seal:var(--draft); --band-bg:var(--navy); --band-fg:#FFFFFF; --band-muted:#C9D3E3; --band-line:rgba(255,255,255,.14); --band-accent:#6FB6EE; }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip} /* no sideways scroll on phones; clip keeps the sticky header working */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65;
  padding-inline:var(--gutter); padding-block:0;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-2); text-decoration:underline}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-family:var(--font-head); font-weight:700; line-height:1.2; letter-spacing:0; color:var(--ink)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3); line-height:1.3}
h4{font-family:var(--font-head); font-weight:700; font-size:1.1rem; line-height:1.3; color:var(--heading)}
p{margin:0}
ul,ol{margin:0; padding-left:1.15em}
li{margin-block:.3em}
table{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px; margin-inline:auto; min-width:0}
.narrow{max-width:46rem}
.eyebrow{font-family:var(--font-body); font-size:var(--fs-label); text-transform:none; letter-spacing:0; color:var(--blue-2); font-weight:600; margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem}
.eyebrow::before{content:""; width:26px; height:3px; background:var(--blue); flex:none; border-radius:2px}
.muted{color:var(--text)}
.small{font-size:var(--fs-small)}
.mono{font-family:var(--font-body)}
.num{font-variant-numeric:tabular-nums}

/* Sections alternate near-white and light grey, full bleed, as on the live site */
.section{padding-block:clamp(3rem, 6vw, 4.5rem); position:relative}
main > section.section:nth-of-type(even){background:var(--alt); box-shadow:0 0 0 100vmax var(--alt); clip-path:inset(0 -100vmax)}
.section + .section{border-top:0}
.section-head{max-width:56rem; margin:0 0 clamp(1.75rem, 3.5vw, 2.75rem); text-align:left}
.section-head .eyebrow{justify-content:flex-start}
.section-head p{margin-top:.9rem; color:var(--text); max-width:46rem; margin-inline:0; font-size:1.08rem}
.section-head.centered{margin-inline:auto; text-align:center}
.section-head.centered .eyebrow{justify-content:center}
.section-head.centered p{margin-inline:auto}
.section-head.row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 2rem; align-items:end; max-width:none}
.section-head.row > *{min-width:0}
.section-head.row .more-link{font-weight:600; white-space:nowrap; padding-bottom:.35rem}
@media (max-width:720px){ .section-head.row{grid-template-columns:1fr; align-items:start} .section-head.row .more-link{white-space:normal} }
.section-head .lead{color:var(--text); font-size:1.1rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.9rem; border-radius:var(--radius);
  font-family:var(--font-body); font-weight:600; font-size:.98rem; line-height:1; text-decoration:none; cursor:pointer; text-transform:uppercase; letter-spacing:.01em;
  border:1px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--btn); color:#fff; border-color:var(--btn)}
.btn-primary:hover{background:var(--btn-hover); border-color:var(--btn-hover); color:#fff}
.btn-ghost{background:#fff; color:var(--btn); border-color:var(--btn)}
.btn-ghost:hover{background:var(--btn); color:#fff}
.chip{display:inline-block; font-family:var(--font-body); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:.2em .55em; border-radius:3px; border:1px solid var(--line); color:var(--text); vertical-align:middle; white-space:nowrap; font-weight:600}
.grid-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.25rem}
.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem}
.grid-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem}
@media (max-width: 960px){ .grid-4{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 720px){ .grid-3, .grid-2{grid-template-columns:1fr} }
@media (max-width: 520px){ .grid-4{grid-template-columns:1fr} }

/* Header: black bar, white logo, white bold navigation, blue pill on the active item */
.site-header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:var(--header); color:#fff; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:90px; position:relative}
.logo{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; flex:none}
.logo img{height:52px; width:auto}
.nav-toggle{display:none; font:inherit; font-size:.9rem; font-weight:700; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:4px; padding:.55rem .9rem; cursor:pointer}
.site-nav{display:flex; gap:.35rem; align-items:center}
.site-nav > a, .nav-item > a{color:#fff; text-decoration:none; font-size:1.05rem; font-weight:700; white-space:nowrap; padding:.55rem .95rem; display:inline-block; border-radius:4px; font-family:var(--font-body)}
.site-nav > a:hover, .nav-item > a:hover, .nav-item:hover > a{background:var(--blue); color:#fff; text-decoration:none}
.site-nav > a.current, .nav-item > a.current{background:var(--blue); color:#fff; box-shadow:none}
.site-nav .btn-primary{padding:.6rem 1.1rem; font-size:.9rem; margin-left:.4rem; background:var(--btn); border-color:var(--btn); color:#fff}
.site-nav .btn-primary:hover{background:var(--btn-hover); border-color:var(--btn-hover)}
.nav-item{position:relative}
.nav-item > a::after{content:none}
.menu{display:none; position:absolute; top:100%; left:0; min-width:21rem; background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:0 0 6px 6px; padding:.5rem; box-shadow:0 14px 30px -12px rgba(0,0,0,.35); z-index:60}
.menu a{display:block; color:var(--heading); text-decoration:none; font-size:.95rem; font-weight:500; padding:.55rem .75rem; border-radius:4px}
.menu a small{display:block; color:var(--text-2); font-size:.8rem; font-weight:400; margin-top:.1rem}
.menu a:hover{background:var(--alt); color:var(--blue); text-decoration:none}
.menu .menu-head{font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); padding:.4rem .75rem .3rem; font-weight:600}
.nav-item:hover .menu, .nav-item:focus-within .menu{display:block}
@media (max-width: 1080px){
  .site-header .wrap{min-height:72px; gap:.75rem}
  .logo img{height:42px}
  .nav-toggle{display:inline-block}
  .site-nav{display:none; position:absolute; left:calc(var(--gutter) * -1); right:calc(var(--gutter) * -1); top:100%; background:var(--header); border-top:1px solid rgba(255,255,255,.12); flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--gutter) 1rem; max-height:calc(100vh - 72px); overflow:auto}
  .site-nav.open{display:flex}
  .site-nav > a, .nav-item > a{padding:.8rem .5rem; border-bottom:1px solid rgba(255,255,255,.1); display:block; white-space:normal; border-radius:0}
  .menu{display:block; position:static; border:0; box-shadow:none; padding:.25rem 0 .5rem .75rem; min-width:0; background:transparent; border-radius:0}
  .menu a{color:#fff; font-weight:400}
  .menu a small{color:rgba(255,255,255,.6)}
  .menu a:hover{background:rgba(255,255,255,.08); color:#fff}
  .menu .menu-head{color:rgba(255,255,255,.55)}
  .site-nav .btn-primary{margin:.9rem 0 0; justify-content:center}
}

/* Breadcrumb and inner-page hero (navy banner with a centred white title, like the live page headers) */
.crumbs{font-family:var(--font-body); font-size:.8rem; letter-spacing:0; text-transform:none; color:var(--text-2); padding-block:.9rem; display:flex; flex-wrap:wrap; gap:.4rem .6rem}
.crumbs a{color:var(--text-2); text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.crumbs span::before{content:"/"; margin-right:.6rem; color:var(--line)}
.page-hero{padding-block:clamp(2.75rem, 5vw, 4.5rem); background:linear-gradient(135deg, var(--navy-2), var(--navy) 60%, #1E3F78); color:#fff; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); text-align:left; position:relative; overflow:hidden}
.page-hero.has-banner{background-size:cover; background-position:center top; background-repeat:no-repeat}
.page-hero .eyebrow{justify-content:flex-start; color:#9CCBF4}
.page-hero .eyebrow::before{background:#6FB6EE}
.page-hero .eyebrow a{color:#9CCBF4}
.page-hero h1{max-width:20ch; margin-inline:0; color:#fff; font-size:var(--fs-h1); line-height:1.12; letter-spacing:-.01em}
.page-hero .standfirst{font-family:var(--font-body); font-size:clamp(1.05rem, 1.5vw, 1.2rem); line-height:1.6; color:rgba(255,255,255,.86); margin:1.25rem 0 0; max-width:40rem}
.page-hero .hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; justify-content:flex-start}
.page-hero .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.page-hero .btn-ghost:hover{background:#fff; color:var(--navy)}
.page-hero .notice{text-align:left; max-width:52rem; margin:1.5rem 0 0; background:rgba(255,255,255,.08); border-color:#F0A3A3; color:#fff}
.page-hero .wrap{position:relative; z-index:2}
/* Split hero: copy on the left, photograph bleeding off the right edge under a navy mask */
.page-hero.split{padding-block:0; min-height:clamp(440px, 56vh, 640px); display:flex; align-items:stretch}
.page-hero.split > .wrap{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:2rem; align-items:center; width:100%; padding-block:clamp(3rem, 6vw, 5rem)}
.page-hero.split .hero-copy{max-width:40rem}
.page-hero .hero-media{position:absolute; inset:0 0 0 46%; z-index:1; overflow:hidden}
.page-hero .hero-media img{width:100%; height:100%; object-fit:cover; display:block; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 42%); mask-image:linear-gradient(90deg, transparent 0, #000 42%); transform:scale(1.04); transition:transform 1.6s var(--ease)}
.page-hero.in .hero-media img{transform:scale(1)}
.page-hero .hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,48,94,.05) 0%, rgba(21,48,94,.1) 35%, rgba(21,48,94,.6) 68%, rgba(21,48,94,.96) 100%); pointer-events:none}
.page-hero.split .facts{grid-column:1 / -1; max-width:none; margin-top:1rem}
@media (max-width: 900px){
  .page-hero.split{min-height:0; display:block}
  .page-hero.split > .wrap{grid-template-columns:1fr; padding-top:0}
  .page-hero .hero-media{position:relative; inset:auto; height:clamp(220px, 46vw, 360px); margin:0 calc(var(--gutter) * -1) 1.75rem}
  .page-hero .hero-media img{-webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, #000 55%, transparent 100%)}
  .page-hero .hero-media::after{content:none}
}
.facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.25rem; margin:2.25rem 0 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.18); max-width:60rem; text-align:left}
.facts > div{border-left:2px solid rgba(111,182,238,.7); padding-left:.9rem}
.facts .k{font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:#C9D3E3; font-weight:500}
.facts .v{font-family:var(--font-head); font-weight:700; font-size:1.6rem; line-height:1.15; margin-top:.3rem; color:#fff}
.facts .v small{font-size:.6em; color:#9CCBF4; font-weight:400}
@media (max-width: 720px){ .facts{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* Home hero: white section with blue eyebrow, navy bold heading and checkmark proof points */
.hero{padding-block:clamp(2.5rem, 6vw, 5rem)}
.hero-grid{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(2rem, 5vw, 5rem); align-items:center}
@media (max-width: 860px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{margin-top:.25rem; font-size:var(--fs-display); line-height:1.2}
.hero .lead{font-size:1.05rem; line-height:1.7; margin-top:1.25rem; max-width:38rem; color:var(--text); text-align:justify}
.hero .sub{font-family:var(--font-body); font-style:normal; font-size:1rem; margin-top:1rem; color:var(--text)}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem}
.proof{display:grid; grid-template-columns:1fr; gap:.6rem; margin-top:2rem; padding-top:0; border-top:0}
.proof > div{display:flex; align-items:baseline; gap:.6rem}
.proof > div::before{content:"\2713"; color:var(--blue); font-weight:700; font-size:1.1rem; flex:none; width:1.4rem; text-align:center}
.proof .big{font-family:var(--font-body); font-size:1rem; font-weight:700; line-height:1.4; letter-spacing:0; color:var(--ink)}
.proof .big small{font-size:1em; letter-spacing:0; color:var(--ink)}
.proof p{font-size:var(--fs-small); color:var(--text); margin:0; line-height:1.4}

/* Org chart graphic */
.org{background:var(--card-alt); border:1px solid var(--line); border-radius:8px; padding:1.25rem; box-shadow:var(--shadow); min-width:0; margin:0}
.org-title{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1rem}
.org-title strong{font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--ink)}
.org-legend{display:flex; gap:.9rem; font-family:var(--font-body); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text)}
.org-legend span::before{content:""; display:inline-block; width:.7em; height:.7em; border-radius:2px; margin-right:.4em; vertical-align:-1px; border:1px solid var(--navy); background:var(--navy)}
.org-legend span.yours::before{background:transparent; border-color:var(--blue)}
.org-top{margin:0 auto; width:max-content; max-width:100%; font-family:var(--font-body); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text); border:1px dashed #C7CCD4; padding:.4em .8em; border-radius:4px; background:#fff}
.org-link{width:1px; height:1.1rem; background:#C7CCD4; margin:0 auto}
.org-layer{border-top:1px solid var(--line); padding-top:.9rem}
.layer-label{font-family:var(--font-body); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text); margin-bottom:.6rem; display:flex; justify-content:space-between; gap:.75rem}
.nodes{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.45rem}
.node{font-size:.8rem; line-height:1.2; padding:.55rem .6rem; border-radius:4px; text-align:center; font-weight:500; background:var(--navy); color:#fff; border:1px solid var(--navy); min-width:0; overflow-wrap:anywhere}
.node small{display:block; font-family:var(--font-body); font-weight:400; font-size:.66rem; opacity:.85; margin-top:.15rem; letter-spacing:.02em}
.yours .node{background:#fff; color:var(--ink); border-color:var(--blue)}
.org-foot{margin-top:1rem; font-size:.8rem; color:var(--text); line-height:1.45}
.pools{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem}
.pools span{font-family:var(--font-body); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line); border-radius:3px; padding:.25em .5em; background:#fff; color:var(--text)}

/* Generic content blocks */
.quote{font-family:var(--font-body); font-size:clamp(1rem, 1.6vw, 1.15rem); line-height:1.6; font-weight:400; border-left:3px solid var(--blue); padding-left:1.25rem; max-width:44rem; margin:1.5rem auto 0; color:var(--text); text-align:left}
.quote cite{display:block; font-family:var(--font-body); font-style:normal; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); margin-top:.75rem}
.rule-item{padding:1.4rem 1.25rem; border-top:0; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:8px}
main > section.section:nth-of-type(odd) .rule-item{background:var(--card-alt); border-color:#EEEEEE}
.rule-item h3{margin-bottom:.6rem; color:var(--ink); font-size:1.15rem}
.rule-item p, .rule-item ul{color:var(--text); font-size:var(--fs-small)}
.rule-item ul{list-style:none; padding:0}
.rule-item li{padding-left:1.4rem; position:relative}
.rule-item li::before{content:"\2713"; position:absolute; left:0; color:var(--blue); font-weight:700}
.card{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.4rem; min-width:0; display:flex; flex-direction:column; gap:.6rem; position:relative}
main > section.section:nth-of-type(odd) .card{background:var(--card-alt); border-color:#EEEEEE}
.card h3{font-size:1.15rem; color:var(--ink)}
.card p{color:var(--text); font-size:var(--fs-small)}
.card p:empty{display:none}
.card .k{font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--blue-2); font-weight:600}
.card .more{font-family:var(--font-body); font-size:.85rem; letter-spacing:0; text-transform:none; color:var(--blue); margin-top:auto; padding-top:.6rem; text-decoration:none; font-weight:600}
.card .more:hover{text-decoration:underline}
a.card{text-decoration:none; color:inherit; transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s}
a.card:hover{box-shadow:0 18px 34px -18px rgba(24,58,87,.4); color:inherit; text-decoration:none; transform:translateY(-3px); border-color:#D5DBE4}
/* Image cards (Accenture-style): photograph on top, hover zoom, title and chevron link below */
.card.has-media{padding:0; border:0; background:transparent !important; border-radius:0; gap:0}
.card.has-media .media{aspect-ratio:4/3; border-radius:6px; margin-bottom:1.05rem}
.card.has-media .k{margin-bottom:.35rem}
.card.has-media h3{font-size:1.2rem; line-height:1.3; transition:color .25s}
.card.has-media p{margin-top:.5rem}
.card.has-media .more{margin-top:auto; padding-top:.9rem; display:inline-flex; align-items:center; gap:.45rem}
.card.has-media .more::after{content:""; width:.5rem; height:.5rem; border-right:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--ease)}
a.card.has-media:hover{box-shadow:none; transform:none}
a.card.has-media:hover h3{color:var(--blue-2)}
a.card.has-media:hover .more::after{transform:rotate(45deg) translate(3px,-3px)}
.card.has-media.tall .media{aspect-ratio:3/4}
.tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.5rem; padding:2rem var(--gutter); background:var(--navy); color:#fff; border-radius:8px}
.tiles .big{font-family:var(--font-head); font-weight:700; font-size:clamp(2rem, 3.2vw, 2.6rem); line-height:1; letter-spacing:0; color:#fff}
.tiles .big.word{font-size:clamp(1.25rem, 1.8vw, 1.5rem); line-height:1.15; letter-spacing:0; padding-top:.35rem}
.tiles p{color:#fff; font-size:var(--fs-small); margin-top:.5rem; line-height:1.4}
@media (max-width: 720px){ .tiles{grid-template-columns:repeat(2, minmax(0,1fr))} }
.two-col{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:2rem 3rem; align-items:start}
.two-col.rev{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)}
@media (max-width: 860px){ .two-col, .two-col.rev{grid-template-columns:1fr} }
.two-col .eyebrow{justify-content:flex-start}
.side-list{list-style:none; padding:0; display:grid; gap:.5rem}
.side-list li{padding:.7rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:9rem 1fr; gap:1rem; font-size:var(--fs-small)}
.side-list li:last-child{border-bottom:1px solid var(--line)}
.side-list .k{font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); padding-top:.2rem; font-weight:600}
@media (max-width: 480px){ .side-list li{grid-template-columns:1fr; gap:.2rem} }
.prose{max-width:46rem}
.prose p{margin-top:1rem; color:var(--text); text-align:justify}
.prose p:first-child{margin-top:0}
.prose h2{font-size:clamp(1.4rem, 2.2vw, 1.75rem); margin-top:2.25rem}
.prose h3{margin-top:1.75rem; font-size:1.25rem}
.prose ul, .prose ol{margin-top:.75rem; color:var(--text)}
.prose li{margin-block:.35em}
.prose blockquote{margin:1.5rem 0 0; padding-left:1.25rem; border-left:3px solid var(--blue); font-family:var(--font-body); font-size:1.1rem; line-height:1.5; color:var(--text)}
.prose table{width:100%; border-collapse:collapse; margin-top:1rem; font-size:var(--fs-small)}
.prose th{text-align:left; font-family:var(--font-body); font-weight:600; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--table-head-text); padding:.6rem; background:var(--table-head); border:1px solid #fff}
.prose td{padding:.7rem .6rem; border:1px solid #fff; background:var(--table-cell); vertical-align:top; color:var(--ink)}
.notice{border:1px solid var(--draft); border-radius:var(--radius); padding:.9rem 1.1rem; font-size:var(--fs-small); color:var(--text); background:#fff; display:flex; gap:.75rem; align-items:flex-start; margin-top:1.5rem}
.notice .chip{flex:none; margin-top:.15rem}
.table-wrap{overflow-x:auto; border-radius:8px}
.cmp{width:100%; border-collapse:separate; border-spacing:3px; min-width:720px; font-size:var(--fs-small)}
.cmp th{font-family:var(--font-body); font-weight:700; font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--table-head-text); text-align:center; padding:.9rem 1rem; background:var(--table-head); border-radius:4px}
.cmp td{padding:.85rem 1rem; background:var(--table-cell); vertical-align:middle; color:#222; border-radius:4px}
.cmp td:first-child{color:#222; font-weight:700}
.cmp th.us, .cmp td.us{background:var(--navy); color:#fff}
.cmp th.us{color:#fff}

/* Steps and timeline (navy step tabs like the live "3 simple steps" section) */
.timeline{display:grid; grid-template-columns:1fr 4fr 3fr 4fr; gap:.4rem; margin-bottom:2.5rem; font-family:var(--font-body); font-size:.78rem; letter-spacing:.02em; text-transform:uppercase}
.timeline > div{background:var(--navy); color:#fff; border-top:0; padding:.7rem .8rem; min-width:0; line-height:1.35; border-radius:4px}
.timeline > div strong{display:block; color:#fff; font-weight:700; margin-bottom:.15rem}
.timeline > div span{color:#C9D3E3}
.timeline > div.on{background:var(--navy-btn)}
.timeline > div.ship{background:var(--navy); opacity:.85}
@media (max-width: 720px){ .timeline{grid-template-columns:1fr 1fr} }
.step{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.5rem; min-width:0; display:flex; flex-direction:column; gap:.9rem}
main > section.section:nth-of-type(odd) .step{background:var(--card-alt); border-color:#EEEEEE}
.step .step-no{font-family:var(--font-body); font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--blue-2); font-weight:600}
.step .step-no b{font-weight:500; color:var(--text)}
.step h3{color:var(--ink); font-size:1.2rem}
.step ul{color:var(--text); padding-left:0; list-style:none}
.step ul li{padding-left:1.4rem; position:relative}
.step ul li::before{content:"\2713"; position:absolute; left:0; color:var(--blue); font-weight:700}
.step .note{font-family:var(--font-body); font-style:normal; color:var(--ink); font-size:1rem; font-weight:600; margin-top:auto; padding-top:.5rem; border-top:1px solid var(--line)}
.step dl{margin:0; display:grid; gap:.6rem}
.step dt{font-weight:700; color:var(--ink)}
.step dd{margin:0; color:var(--text)}

/* Catalogue */
.category{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:1.5rem 3rem; padding-block:2rem; border-top:1px solid var(--line)}
.category:last-of-type{border-bottom:1px solid var(--line)}
.category .cat-label{font-family:var(--font-body); font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--blue-2); font-weight:600}
.category h3{font-size:1.4rem; margin-top:.4rem}
.category .cat-desc{color:var(--text); margin-top:.6rem; max-width:24rem}
.roles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem}
.role{border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.2rem; background:var(--card); min-width:0}
main > section.section:nth-of-type(odd) .role{background:var(--card-alt); border-color:#EEEEEE}
.role h4{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.4rem; color:var(--ink)}
.role h4 span.abbr{font-family:var(--font-body); font-weight:500; font-size:.78rem; color:var(--text-2); letter-spacing:.02em}
.role p{color:var(--text); font-size:var(--fs-small); line-height:1.55}
@media (max-width: 860px){ .category{grid-template-columns:1fr} .roles{grid-template-columns:1fr} }

/* Navy band (dividend section, stats, discovery-call band) */
.band{background:var(--navy); color:#fff; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-block:clamp(3rem, 6vw, 4.5rem)}
.band .eyebrow{color:#9CCBF4}
.band .muted{color:#C9D3E3}
.band h1,.band h2,.band h3{color:#fff}
.band .btn-primary{background:var(--btn); border-color:var(--btn); color:#fff}
.band .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.band .btn-ghost:hover{background:#fff; color:var(--navy)}
.band-head{display:grid; grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); gap:2rem; align-items:start}
.band .lead{font-size:1.05rem; line-height:1.7; margin-top:1.1rem; max-width:44rem; color:#fff}
.band .pillar{border-top:1px solid rgba(255,255,255,.18); padding-top:1rem; min-width:0}
.band .pillar h3{font-size:1.15rem; margin-bottom:.6rem}
.band .pillar p{color:#C9D3E3; font-size:var(--fs-small); line-height:1.6}
.band .pillar .fig{font-family:var(--font-head); font-weight:700; font-size:2rem; line-height:1; margin-bottom:.5rem; color:#fff}
.band .pillar .fig small{font-size:.45em; color:#9CCBF4; font-weight:400}
.band table{width:100%; border-collapse:collapse; font-size:var(--fs-small)}
.band th{text-align:left; font-family:var(--font-body); font-weight:600; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:#C9D3E3; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.5)}
.band td{padding:.7rem .75rem .7rem 0; border-bottom:1px solid rgba(255,255,255,.14); vertical-align:top; color:#fff}
.band td:first-child{color:#C9D3E3; width:38%; font-weight:500}
.band .way{border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:1.2rem 1.3rem; min-width:0}
.band .way h3{font-size:1.1rem; margin-bottom:.4rem}
.band .way p{color:#C9D3E3; font-size:var(--fs-small)}
.band .card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14)}
.band .card p{color:#C9D3E3}
.band .card h3{color:#fff}
.band .card .k, .band .card .more{color:#9CCBF4}
.band a.card:hover{background:rgba(255,255,255,.1); color:inherit}

/* Framework and RMS dashboard */
.framework .pillar{padding:1.4rem 1.25rem; border:1px solid var(--line); border-radius:8px; background:var(--card); min-width:0}
main > section.section:nth-of-type(odd) .framework .pillar{background:var(--card-alt); border-color:#EEEEEE}
.framework .pillar h3{margin-bottom:.6rem; text-align:center; font-size:1.25rem}
.framework .pillar ul{color:var(--text); padding-left:0; list-style:none}
.framework .pillar li{padding-left:1.4rem; position:relative}
.framework .pillar li::before{content:"\2713"; position:absolute; left:0; color:var(--blue); font-weight:700}
.dash{background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); min-width:0}
.dash-bar{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 1rem; background:var(--navy); color:#C9D3E3; font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase}
.dash-bar b{color:#fff; font-weight:700}
.dash-tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border-bottom:1px solid var(--line)}
.dash-tiles div{background:#fff; padding:.8rem 1rem; min-width:0}
.dash-tiles .k{font-family:var(--font-body); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2)}
.dash-tiles .v{font-family:var(--font-head); font-weight:700; font-size:1.5rem; line-height:1.1; margin-top:.2rem; color:var(--ink)}
@media (max-width: 560px){ .dash-tiles{grid-template-columns:repeat(2, minmax(0,1fr))} }
.dash-rows{overflow-x:auto}
.dash table{width:100%; border-collapse:collapse; font-size:.85rem; min-width:520px}
.dash th{font-family:var(--font-body); font-weight:600; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); text-align:left; padding:.6rem 1rem; border-bottom:1px solid var(--line); background:var(--alt)}
.dash td{padding:.6rem 1rem; border-bottom:1px solid var(--line); color:var(--heading); white-space:nowrap; vertical-align:middle}
.dash tr:last-child td{border-bottom:0}
.bar{display:inline-block; width:110px; height:6px; background:#E6E9EF; border-radius:3px; vertical-align:middle; overflow:hidden}
.bar i{display:block; height:100%; background:var(--blue)}
.st{display:inline-block; font-family:var(--font-body); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; padding:.15em .5em; border-radius:3px; border:1px solid var(--line); color:var(--text-2)}
.st.on{color:var(--blue); border-color:var(--blue)}
.dash-foot{padding:.6rem 1rem; font-size:.78rem; color:var(--text-2); border-top:1px solid var(--line)}

/* Ontology diagram */
.onto{display:grid; gap:.5rem; min-width:0}
.onto-layer{border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem; background:#fff; display:grid; grid-template-columns:9rem 1fr; gap:1rem; align-items:start; min-width:0}
.onto-layer.core{border-color:var(--blue); background:#E8F1FA}
.onto-layer .k{font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--blue-2); font-weight:600}
.onto-layer .k small{display:block; color:var(--text-2); letter-spacing:0; margin-top:.3rem; text-transform:none; font-size:.78rem; font-weight:400}
.onto-layer .items{display:flex; flex-wrap:wrap; gap:.4rem}
.onto-layer .items span{font-size:.82rem; border:1px solid var(--line); background:var(--alt); border-radius:4px; padding:.3em .6em; color:var(--heading)}
.onto-layer.core .items span{border-color:var(--blue); background:#fff}
.onto-arrow{text-align:center; font-family:var(--font-body); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2)}
@media (max-width: 560px){ .onto-layer{grid-template-columns:1fr} }

/* FAQ: grey rows with a numbered cell, as on the live site */
.faq{max-width:60rem; margin-inline:auto; display:grid; gap:.5rem}
.faq details{background:var(--faq); border-radius:4px; padding:0; overflow:hidden}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; list-style:none; display:grid; grid-template-columns:3.2rem 1fr 2rem; gap:0 1rem; align-items:center; padding:0 .5rem 0 0; font-family:var(--font-head); font-size:1.08rem; font-weight:400; line-height:1.4; color:var(--heading); min-height:3.6rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--font-body); font-size:.78rem; color:var(--heading); background:var(--faq-num); align-self:stretch; display:flex; align-items:center; justify-content:center; padding:0; letter-spacing:0; font-weight:600}
.faq summary .tog{font-family:var(--font-body); color:var(--text-2); text-align:center}
.faq details[open] summary .tog::before{content:"\2013"}
.faq details:not([open]) summary .tog::before{content:"+"}
.faq .a{padding:.2rem 1.25rem 1.2rem 4.2rem; color:var(--text); max-width:none; font-size:var(--fs-small); line-height:1.65}
.faq .a p + p{margin-top:.6rem}
.faq .a b{color:var(--heading); font-weight:700}
@media (max-width: 560px){ .faq summary{grid-template-columns:2.4rem 1fr 1.8rem; font-size:1rem} .faq .a{padding-left:1rem} }

/* Discovery-call band and forms */
.cta-band{background:var(--navy); color:#fff; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-block:clamp(2.5rem, 5vw, 3.5rem); border-top:0}
.cta-band .wrap{display:grid; grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); gap:1.5rem 3rem; align-items:center}
.cta-band h2{font-size:clamp(1.5rem, 2.6vw, 2rem); color:#fff}
.cta-band p{color:#fff; margin-top:.6rem; max-width:42rem; font-size:1.05rem}
.cta-band .actions{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-end}
.cta-band .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.cta-band .btn-ghost:hover{background:#fff; color:var(--navy)}
@media (max-width: 860px){ .cta-band .wrap{grid-template-columns:1fr} .cta-band .actions{justify-content:flex-start} }
.form{background:var(--navy); color:#fff; border-radius:8px; padding:clamp(1.25rem, 3vw, 2rem); min-width:0}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form-grid .full{grid-column:1 / -1}
@media (max-width: 560px){ .form-grid{grid-template-columns:1fr} }
.field label{display:block; font-family:var(--font-body); font-size:.85rem; letter-spacing:0; text-transform:none; color:#fff; margin-bottom:.4rem; font-weight:600}
.field input,.field select,.field textarea{width:100%; font:inherit; font-size:.95rem; padding:.7rem .8rem; border:1px solid rgba(255,255,255,.25); border-radius:4px; background:#fff; color:#333; min-width:0}
.field textarea{min-height:5.5rem; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.roles-pick{display:flex; flex-wrap:wrap; gap:.5rem}
.roles-pick label{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; font-family:var(--font-body); font-size:.85rem; text-transform:none; letter-spacing:0; color:#333; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:.35rem .75rem; background:#fff; cursor:pointer; margin:0; font-weight:400}
.roles-pick input{accent-color:var(--btn); margin:0}
.form-foot{display:flex; flex-direction:column; align-items:stretch; gap:1rem; margin-top:1.25rem}
.form-foot .small{color:#C9D3E3}
.form-actions{display:flex; flex-wrap:wrap; gap:.75rem}
.form-actions .btn{flex:1 1 16rem; justify-content:center; text-align:center; white-space:normal; line-height:1.2; width:auto; max-width:none}
.btn-wa{background:#25D366; border-color:#25D366; color:#fff}
.btn-wa:hover{background:#1DA851; border-color:#1DA851; color:#fff}
.form .invalid{border-color:#D14343 !important; box-shadow:0 0 0 2px rgba(209,67,67,.18)}
.form-error{margin-top:.75rem; color:#FFD6D6; font-weight:600}
.form-hint{margin-top:.75rem; color:rgba(255,255,255,.75)}
.form .form-foot a{color:#fff; text-decoration:underline}
.contact-lines{margin-top:1.5rem; display:grid; gap:.5rem; font-size:var(--fs-small)}
.contact-lines div{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem}
.contact-lines .k{font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); width:5.5rem; font-weight:600}
.contact-lines a{font-family:var(--font-body); font-size:.95rem; color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line)}
.contact-lines a:hover{color:var(--blue); border-bottom-color:var(--blue)}
.copy{font-family:var(--font-body); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:3px; padding:.2em .5em; cursor:pointer}
.copy:hover{border-color:var(--blue); color:var(--blue)}

/* Client marks */
.client-logos{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.25rem .75rem}
.client-logos li{flex:0 0 auto}
.client-logos img{display:block; width:116px; height:116px; object-fit:contain}
@media (max-width: 720px){ .client-logos{gap:0 .5rem} .client-logos img{width:104px; height:104px} }

/* Stripe above the footer, footer widgets and copyright bar, as on the live site */
.foot-stripe{background:var(--stripe); color:var(--stripe-text); margin-inline:calc(var(--gutter) * -1); padding:1.1rem var(--gutter); text-align:center; font-size:.95rem}
.foot-stripe a{color:var(--blue-2)}
.site-footer{background:var(--footer); color:var(--footer-text); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-block:2.25rem 0}
.foot-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr); gap:2rem 2.5rem}
@media (max-width: 960px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .foot-grid{grid-template-columns:1fr} }
.site-footer p{font-size:.95rem; line-height:1.65; max-width:34rem; color:var(--footer-text); text-align:justify}
.site-footer .logo img{height:34px; margin-bottom:1.25rem}
.site-footer h4{font-family:var(--font-body); font-weight:700; font-size:1.1rem; letter-spacing:0; text-transform:none; color:#fff; margin-bottom:.8rem}
.site-footer ul{list-style:none; padding:0; font-size:.95rem; display:grid; gap:.35rem}
.site-footer ul li{padding-left:1.4rem; position:relative}
.site-footer ul li::before{content:"\2713"; position:absolute; left:0; color:var(--blue); font-weight:700}
.site-footer a{color:var(--blue-footer); text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:underline}
.site-footer address{font-style:normal; font-size:.95rem; line-height:1.65; color:var(--footer-text)}
.site-footer address b{color:#fff; font-weight:700}
.foot-address{margin-top:1.25rem}
.foot-address p{margin:0 0 .9rem}
.foot-address p:last-child{margin-bottom:0}
.foot-address a{color:var(--blue-footer)}
.foot-wa{display:flex; align-items:flex-start; gap:.6rem; text-align:left; padding:.7rem .85rem; border:1px solid rgba(37,211,102,.45); border-left:3px solid #25D366; border-radius:4px; background:rgba(37,211,102,.08)}
.foot-wa-icon{color:#25D366; line-height:0; margin-top:.15rem}
.foot-wa-icon svg{width:22px; height:22px}
.foot-wa small{display:block; margin-top:.2rem; font-size:.82rem; color:#C9D3E3; line-height:1.45}
.foot-social{display:inline-flex; align-items:center; flex-wrap:wrap; gap:.75rem 1rem}
.foot-social > a{display:inline-flex; align-items:center; line-height:0}
.foot-social svg{width:22px; height:22px; fill:currentColor}
.foot-social a:hover{color:#fff}
.site-footer .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.site-footer .btn-ghost:hover{background:var(--btn); border-color:var(--btn); color:#fff; text-decoration:none}
.foot-legal{margin:2rem calc(var(--gutter) * -1) 0; padding:1.25rem var(--gutter); background:var(--copy); color:var(--copy-text); font-family:var(--font-body); font-size:.9rem; letter-spacing:0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 1.5rem}
.foot-legal a{color:var(--copy-text)}
.foot-legal a:hover{color:#fff}
.wa-float{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); width:56px; height:56px; border-radius:50%; background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:70; text-decoration:none}
.wa-float:hover{text-decoration:none; background:#1EBE5A; color:#fff}
.wa-float svg{width:32px; height:32px; fill:#fff}

/* Legacy content carried over from the previous site */
.legacy-body{max-width:46rem}
.legacy-body img.legacy{margin:1.5rem 0 .5rem; border-radius:6px}
.legacy-body img.legacy.icon{display:inline-block; width:64px; height:auto; margin:1.5rem 0 .25rem; border-radius:0}
.legacy-body h2{font-size:clamp(1.35rem, 2.2vw, 1.75rem); margin-top:2.25rem; color:var(--heading)}
.legacy-body h3{font-size:1.25rem; margin-top:1.75rem; color:var(--heading)}
.legacy-body h4{margin-top:1.25rem; font-size:1.05rem}
.legacy-body h5, .legacy-body h6{font-family:var(--font-body); font-weight:600; font-size:1rem; margin-top:1rem; line-height:1.5; color:var(--heading)}
.legacy-body p{margin-top:.9rem; text-align:justify}
.legacy-body br + br{display:none}
.legacy-body ul, .legacy-body ol{margin-top:.6rem}
.legacy-body table{width:100%; border-collapse:collapse; margin-top:1rem; font-size:var(--fs-small)}
.legacy-body td, .legacy-body th{padding:.6rem .6rem .6rem 0; border-bottom:1px solid var(--line); vertical-align:top; text-align:left}
.legacy-body .btn{margin-top:.5rem}
.legacy-grid{display:grid; grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); gap:2rem 3rem; align-items:start}
@media (max-width: 960px){ .legacy-grid{grid-template-columns:1fr} }
.aside-box{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.25rem; position:sticky; top:calc(90px + env(safe-area-inset-top, 0px) + 1rem)}
main > section.section:nth-of-type(odd) .aside-box{background:var(--card-alt); border-color:#EEEEEE}
.aside-box h3{font-size:1.05rem; margin-bottom:.6rem}
.aside-box ul{list-style:none; padding:0; display:grid; gap:.4rem; font-size:var(--fs-small)}
.aside-box li a{text-decoration:none}
.aside-box li a:hover{text-decoration:underline}
.aside-box .k{font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin:.9rem 0 .4rem; font-weight:600}

/* Blog index */
.post-list{display:grid; gap:1rem}
.post-row{display:grid; grid-template-columns:9rem 1fr; gap:1rem 2rem; padding:1.1rem 0; border-top:1px solid var(--line); align-items:start}
.post-row:last-child{border-bottom:1px solid var(--line)}
.post-row .meta{font-family:var(--font-body); font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; color:var(--text-2); line-height:1.6}
.post-row h3{font-size:1.15rem}
.post-row h3 a{text-decoration:none; color:var(--ink)}
.post-row h3 a:hover{color:var(--blue)}
.post-row p{color:var(--text); font-size:var(--fs-small); margin-top:.35rem}
@media (max-width: 560px){ .post-row{grid-template-columns:1fr; gap:.3rem} }

/* Sitemap page */
.sitemap-tree ul{list-style:none; padding:0; margin:0}
.sitemap-tree > ul > li{padding:.55rem 0; border-top:1px solid var(--line)}
.sitemap-tree > ul > li:last-child{border-bottom:1px solid var(--line)}
.sitemap-tree li li{padding:.25rem 0 .25rem 1.25rem; border-left:1px solid var(--line); margin-left:.4rem}
.sitemap-tree a{text-decoration:none; color:var(--heading)}
.sitemap-tree a:hover{color:var(--blue); text-decoration:underline}
.sitemap-tree .path{font-family:var(--font-body); font-size:.75rem; color:var(--text-2); margin-left:.5rem; letter-spacing:0; overflow-wrap:anywhere}
.sitemap-tree a, .legacy-body, .prose, .crumbs, .faq .a{overflow-wrap:anywhere}
.sitemap-tree .top{font-weight:700; color:var(--ink)}
.sitemap-block{margin-top:2.5rem}
.sitemap-block h2{font-size:clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom:1rem}
.sitemap-block .eyebrow{justify-content:flex-start}

/* Opening black band, as the live home page's slider */
.slider-band{background:#000; color:#fff; margin-inline:calc(var(--gutter) * -1); padding:clamp(4rem, 9vw, 6.5rem) var(--gutter); text-align:center}
.slide-title{font-family:"Open Sans", var(--font-body); font-weight:300; font-size:clamp(2.6rem, 7.5vw, 6rem); letter-spacing:.02em; line-height:1; color:#fff; margin:0}
.slide-sub{font-family:"Open Sans", var(--font-body); font-weight:300; font-size:clamp(1.05rem, 2vw, 1.7rem); color:#fff; margin-top:1rem}

/* Home video hero (the live site's video slider), captions as on the live slide */
.video-hero{position:relative; background:#000; color:#fff; margin-inline:calc(var(--gutter) * -1); min-height:clamp(320px, 48vw, 660px); display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; padding-inline:var(--gutter)}
.video-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; background:#000 center/cover no-repeat}
.video-overlay{position:absolute; inset:0; background:rgba(0,0,0,.38); z-index:1}
.video-caption{position:relative; z-index:2}

/* Footer sitemap button (Company column) */
.foot-sitemap-btn{margin-top:1.1rem; padding:.6rem 1.1rem; font-size:.8rem}
/* Required-field marker */
.req{color:#E53935; font-weight:700; margin-left:.15rem}

/* Cookie notice (fixed to the bottom, above the WhatsApp button): compact, one line of text */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:60; background:#FFFFFF; color:var(--text); border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(0,0,0,.25); font-family:var(--font-body); font-size:.88rem; line-height:1.45}
.cookie-banner[hidden]{display:none}
.cookie-banner .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.5rem; padding-top:.7rem; padding-bottom:.7rem}
.cookie-banner p{margin:0; flex:1 1 24rem; text-align:left}
.cookie-banner a{color:var(--blue); text-decoration:underline}
.cookie-actions{display:flex; flex-wrap:wrap; gap:.5rem; flex:0 0 auto}
.cookie-actions .btn{padding:.5rem .85rem; font-size:.72rem; white-space:nowrap}
.cookie-banner .btn-ghost{background:#fff}
body.has-cookie-banner .wa-float{bottom:calc(var(--cookie-h, 0px) + 1rem)}
@media (max-width: 720px){
  .cookie-banner{font-size:.78rem; line-height:1.4}
  .cookie-banner .wrap{padding-top:.55rem; padding-bottom:.55rem; gap:.5rem}
  .cookie-banner p{flex-basis:100%}
  .cookie-actions{width:100%; gap:.4rem; flex-wrap:nowrap}
  .cookie-actions .btn{flex:1 1 0; justify-content:center; padding:.5rem .3rem; font-size:.66rem; letter-spacing:0}
}
@media (max-width: 360px){
  .cookie-banner{font-size:.74rem; line-height:1.35}
  .cookie-banner .wrap{padding-top:.45rem; padding-bottom:.45rem; gap:.4rem}
  .cookie-actions .btn{padding:.42rem .25rem; font-size:.62rem}
}
/* Footer legal links */
.foot-links{display:inline-flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center; padding-left:1rem; border-left:1px solid rgba(255,255,255,.25); line-height:1.5}
.foot-links a{display:inline-block; line-height:1.5; white-space:nowrap}
@media (max-width: 720px){
  .foot-legal{flex-direction:column; align-items:flex-start; gap:.9rem; padding-right:calc(var(--gutter) + 72px)}
  .foot-social{width:100%}
  .foot-links{flex-basis:100%; padding-left:0; border-left:0; gap:.45rem 1.25rem}
}

/* =====================================================================================
   v12 visual layer: photography, masks and motion (benchmarked against accenture.com)
   ===================================================================================== */

/* Media primitive: every photograph sits in a .media box with a cover-fit image, a soft
   bottom mask and a slow zoom on hover. Nothing here changes the palette or the type. */
.media{position:relative; overflow:hidden; background:#0E1F38; min-width:0}
.media img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.001); transition:transform 1.3s var(--ease); will-change:transform}
.media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,15,30,0) 45%, rgba(5,15,30,.55) 100%); pointer-events:none; opacity:.9}
.media.plain::after{content:none}
a:hover .media img, .card:hover .media img, .tile:hover .media img, .story:hover .media img, .checker-photo:hover img{transform:scale(1.06)}
.media.frame{border-radius:6px}

/* Scroll reveal, mask wipe and counters. Content stays visible when JavaScript is absent. */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i, 0) * 90ms)}
.js .reveal.in{opacity:1; transform:none}
/* The clip is applied to the children, not the box itself, so IntersectionObserver still sees the box */
.js .wipe > img, .js .wipe::after, .js .wipe > .cap{clip-path:inset(0 100% 0 0); transition:clip-path 1.15s var(--ease), transform 1.3s var(--ease)}
.js .wipe.in > img, .js .wipe.in::after, .js .wipe.in > .cap{clip-path:inset(0 0 0 0)}
.js .wipe-up > img, .js .wipe-up::after{clip-path:inset(100% 0 0 0); transition:clip-path 1.15s var(--ease), transform 1.3s var(--ease)}
.js .wipe-up.in > img, .js .wipe-up.in::after{clip-path:inset(0 0 0 0)}
.js .fade{opacity:0; transition:opacity 1.2s var(--ease)}
.js .fade.in{opacity:1}
@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .fade{opacity:1; transform:none}
  .js .wipe > img, .js .wipe::after, .js .wipe > .cap, .js .wipe-up > img, .js .wipe-up::after{clip-path:none}
}

/* Header gains a shadow once the page scrolls */
.site-header{transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}

/* Home: cinematic video hero. The live site's S3 video stays, now full-height with the headline on it. */
.video-hero.cine{min-height:min(88vh, 860px); align-items:flex-end; justify-content:flex-start; text-align:left; padding-block:clamp(5rem, 10vw, 7.5rem) clamp(2rem, 4vw, 3rem)}
.video-hero.cine .video-overlay{background:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%), linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%)}
.video-hero.cine .wrap{position:relative; z-index:2; width:100%}
.video-hero .kicker{font-family:"Open Sans", var(--font-body); font-weight:300; font-size:clamp(.8rem, 1vw, .95rem); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.78); margin:0 0 1.4rem}
.video-hero .kicker b{font-weight:600; color:#fff}
.video-hero.cine .eyebrow{color:#9CCBF4}
.video-hero.cine .eyebrow::before{background:#6FB6EE}
.video-hero.cine h1{color:#fff; font-size:var(--fs-display); line-height:1.06; letter-spacing:-.015em; max-width:15ch}
.video-hero.cine .lead{color:rgba(255,255,255,.88); font-size:clamp(1.05rem, 1.4vw, 1.2rem); line-height:1.65; max-width:38rem; margin-top:1.4rem}
.video-hero.cine .hero-actions{margin-top:1.9rem}
.video-hero.cine .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.75)}
.video-hero.cine .btn-ghost:hover{background:#fff; color:#000}
.hero-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-top:clamp(2.5rem, 5vw, 4rem); padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.22)}
.hero-stats{display:flex; flex-wrap:wrap; gap:1.25rem 2.75rem}
.hero-stats div{min-width:7rem}
.hero-stats .big{font-family:var(--font-head); font-weight:700; font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1; color:#fff}
.hero-stats .big small{font-size:.5em; font-weight:400; color:#9CCBF4; margin-left:.15em}
.hero-stats p{font-size:.85rem; color:rgba(255,255,255,.75); margin-top:.35rem; max-width:14rem; line-height:1.4}
.hero-tools{display:flex; align-items:center; gap:.75rem; flex:none}
.vid-toggle{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:rgba(0,0,0,.35); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background .25s}
.vid-toggle:hover{background:#fff; color:#000}
.vid-toggle svg{width:16px; height:16px; fill:currentColor}
.vid-toggle .ic-play{display:none}
.vid-toggle.paused .ic-play{display:block}
.vid-toggle.paused .ic-pause{display:none}
.scroll-cue{display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.8); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none}
.scroll-cue:hover{color:#fff; text-decoration:none}
.scroll-cue i{width:1px; height:34px; background:linear-gradient(180deg, #fff, rgba(255,255,255,0)); display:block; animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}
@media (max-width: 720px){ .video-hero.cine{min-height:min(92vh, 760px)} .hero-foot{flex-direction:column; align-items:flex-start} .hero-tools{display:none} }

/* Count-up stat strip under the hero */
.stat-strip{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.5rem 2rem; padding-block:clamp(2rem, 4vw, 3rem)}
.stat-strip > div{border-top:3px solid var(--blue); padding-top:1rem}
.stat-strip .big{font-family:var(--font-head); font-weight:700; font-size:clamp(2.2rem, 4vw, 3.4rem); line-height:1; color:var(--ink); letter-spacing:-.02em}
.stat-strip .big small{font-size:.42em; font-weight:400; color:var(--blue-2); margin-left:.1em; letter-spacing:0}
.stat-strip p{margin-top:.6rem; color:var(--text); font-size:var(--fs-small); max-width:16rem; line-height:1.45}
@media (max-width: 720px){ .stat-strip{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* Photographic band: full-bleed photograph behind a dark mask, white copy on top */
.photo-band{position:relative; color:#fff; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-block:clamp(3.5rem, 8vw, 6.5rem); overflow:hidden; background:#0E1F38; isolation:isolate}
.photo-band .bg{position:absolute; inset:0; z-index:0}
.photo-band .bg img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); transition:transform 2.4s var(--ease)}
.photo-band.in .bg img{transform:scale(1)}
.photo-band .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,22,44,.1) 0%, rgba(10,22,44,.2) 40%, rgba(10,22,44,.85) 100%), linear-gradient(90deg, rgba(10,22,44,.95) 0%, rgba(10,22,44,.8) 45%, rgba(10,22,44,.4) 100%)}
.photo-band.navy .bg::after{background:linear-gradient(180deg, rgba(21,48,94,.1) 0%, rgba(21,48,94,.25) 40%, rgba(21,48,94,.9) 100%), linear-gradient(90deg, rgba(21,48,94,.96) 0%, rgba(21,48,94,.82) 50%, rgba(21,48,94,.45) 100%)}
.photo-band.center .bg::after{background:linear-gradient(180deg, rgba(10,22,44,.55) 0%, rgba(10,22,44,.88) 100%)}
.photo-band .wrap{position:relative; z-index:1}
.photo-band .eyebrow{color:#9CCBF4}
.photo-band .eyebrow::before{background:#6FB6EE}
.photo-band h2, .photo-band h3{color:#fff}
.photo-band h2{font-size:var(--fs-h2); max-width:22ch; line-height:1.12}
.photo-band .lead{color:rgba(255,255,255,.86); font-size:1.08rem; line-height:1.7; max-width:40rem; margin-top:1.1rem}
.photo-band .muted{color:#C9D3E3}
.photo-band .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.photo-band .btn-ghost:hover{background:#fff; color:var(--navy)}
.photo-band .pillar{border-top:1px solid rgba(255,255,255,.25); padding-top:1rem; min-width:0}
.photo-band .pillar h3{font-size:1.15rem; margin-bottom:.5rem}
.photo-band .pillar p{color:#C9D3E3; font-size:var(--fs-small); line-height:1.6}
.photo-band .pillar .fig{font-family:var(--font-head); font-weight:700; font-size:clamp(2rem, 3.4vw, 2.8rem); line-height:1; margin-bottom:.5rem; color:#fff; letter-spacing:-.02em}
.photo-band .pillar .fig small{font-size:.42em; color:#9CCBF4; font-weight:400; letter-spacing:0}
/* Cost list on the dark band */
.cost-list{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.5rem 2rem; margin-top:2.5rem}
.cost-list > div{border-top:1px solid rgba(255,255,255,.25); padding-top:1rem; min-width:0}
.cost-list .n{font-family:var(--font-head); font-weight:700; font-size:.85rem; letter-spacing:.14em; color:#9CCBF4; margin-bottom:.5rem}
.cost-list h3{font-size:1.2rem; color:#fff; margin-bottom:.55rem}
.cost-list ul{list-style:none; padding:0; color:#C9D3E3; font-size:var(--fs-small)}
.cost-list li{padding-left:1.2rem; position:relative; margin-block:.25em}
.cost-list li::before{content:""; position:absolute; left:0; top:.6em; width:.5rem; height:1px; background:#6FB6EE}
@media (max-width: 960px){ .cost-list{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 520px){ .cost-list{grid-template-columns:1fr} }

/* Photo tiles (industries): photograph with the title sitting on the mask, description revealed on hover */
.mosaic{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
.mosaic.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.mosaic.four{grid-template-columns:repeat(4, minmax(0,1fr))}
.tile{position:relative; display:block; color:#fff; text-decoration:none; overflow:hidden; border-radius:6px; aspect-ratio:4/3; background:#0E1F38; min-width:0}
.tile .media{position:absolute; inset:0}
.tile .media::after{background:linear-gradient(180deg, rgba(5,15,30,.05) 30%, rgba(5,15,30,.82) 100%); transition:opacity .5s; opacity:1}
.tile:hover .media::after{opacity:1; background:linear-gradient(180deg, rgba(5,15,30,.25) 0%, rgba(5,15,30,.9) 100%)}
.tile .cap{position:absolute; left:0; right:0; bottom:0; padding:1.25rem 1.3rem; z-index:2}
.tile .k{font-family:var(--font-body); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#9CCBF4; font-weight:600; display:block; margin-bottom:.4rem}
.tile h3{color:#fff; font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.2; transform:translateY(0); transition:transform .5s var(--ease)}
.tile p{color:rgba(255,255,255,.85); font-size:var(--fs-small); line-height:1.5; margin-top:.5rem; max-height:0; opacity:0; overflow:hidden; transition:max-height .6s var(--ease), opacity .5s var(--ease)}
.tile:hover p, .tile:focus-visible p{max-height:8rem; opacity:1}
.tile .arrow{position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; z-index:2; background:rgba(0,0,0,.25); transition:background .3s, transform .4s var(--ease)}
.tile .arrow::after{content:""; width:.5rem; height:.5rem; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg)}
.tile:hover .arrow{background:var(--btn); border-color:var(--btn); transform:translate(2px,-2px)}
.tile:hover{color:#fff; text-decoration:none}
.tile.wide{grid-column:span 2; aspect-ratio:auto; min-height:260px}
.tile.tall{aspect-ratio:3/4}
@media (max-width: 960px){ .mosaic, .mosaic.four{grid-template-columns:repeat(2, minmax(0,1fr))} .tile.wide{grid-column:span 2} }
@media (max-width: 560px){ .mosaic, .mosaic.two, .mosaic.four{grid-template-columns:1fr} .tile.wide{grid-column:auto} .tile p{max-height:none; opacity:1} }

/* Checkerboard grid (Accenture "How to reinvent" pattern): dark text tiles interleaved with photographs */
.checker{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; grid-auto-rows:minmax(250px, auto)}
.checker > div, .checker > a{min-width:0}
.checker-text{background:var(--navy); color:#fff; padding:1.6rem 1.5rem 1.4rem; border-radius:6px; display:flex; flex-direction:column; position:relative; overflow:hidden}
.checker-text::before{content:""; width:28px; height:3px; background:#6FB6EE; margin-bottom:1rem; border-radius:2px}
.checker-text .k{font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#9CCBF4; font-weight:600; margin-bottom:.5rem}
.checker-text h3{color:#fff; font-size:1.22rem; line-height:1.3}
.checker-text p{color:#C9D3E3; font-size:var(--fs-small); margin-top:.6rem; line-height:1.55}
.checker-text .more{margin-top:auto; padding-top:1rem; color:#fff; font-size:.85rem; font-weight:600; display:inline-flex; align-items:center; gap:.5rem}
.checker-text .more::after{content:""; width:1.4rem; height:1.4rem; border-radius:3px; background:var(--btn); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); background-size:60%; background-position:center; background-repeat:no-repeat}
.checker-text.alt{background:#0E1F38}
.checker-photo{position:relative; border-radius:6px; overflow:hidden; background:#0E1F38; min-height:250px}
.checker-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.001); transition:transform 1.3s var(--ease)}
.checker-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,15,30,0) 55%, rgba(5,15,30,.45) 100%)}
.checker-photo span{position:absolute; left:1.1rem; bottom:1rem; z-index:2; color:#fff; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; opacity:.9}
.checker-photo.span2{grid-column:span 2}
@media (max-width: 900px){ .checker{grid-template-columns:repeat(2, minmax(0,1fr))} .checker-photo.span2{grid-column:span 2} }
@media (max-width: 560px){ .checker{grid-template-columns:1fr} .checker-photo.span2{grid-column:auto} .checker-photo{min-height:200px} }

/* Sticky in-page navigation bar under the header (the Accenture page bar) */
.subnav{position:sticky; top:calc(90px + env(safe-area-inset-top, 0px)); z-index:40; background:var(--navy); color:#fff; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); border-bottom:1px solid rgba(255,255,255,.1)}
.subnav .wrap{display:flex; align-items:center; gap:1rem; min-height:46px}
.subnav .title{font-family:var(--font-head); font-weight:700; font-size:.95rem; white-space:nowrap; margin-right:auto; color:#fff}
.subnav ul{list-style:none; margin:0; padding:0; display:flex; gap:.2rem; overflow-x:auto; scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li{margin:0}
.subnav a{display:block; color:#C9D3E3; text-decoration:none; font-size:.86rem; font-weight:600; padding:.8rem .85rem; white-space:nowrap; border-bottom:3px solid transparent; transition:color .2s, border-color .2s, background .2s}
.subnav a:hover{color:#fff; text-decoration:none; background:rgba(255,255,255,.06)}
.subnav a.active{color:#fff; border-bottom-color:#6FB6EE}
.subnav .btn{padding:.5rem .9rem; font-size:.78rem; margin-left:.5rem; flex:none}
@media (max-width: 1080px){ .subnav{top:calc(72px + env(safe-area-inset-top, 0px))} .subnav .title{display:none} .subnav .btn{display:none} }
section[id]{scroll-margin-top:calc(90px + 56px)}

/* Sticky media beside scrolling steps */
.sticky-split{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(1.5rem, 4vw, 4rem); align-items:start}
.sticky-split .stick{position:sticky; top:calc(90px + 1.5rem)}
.sticky-split .stick .media{aspect-ratio:4/5; border-radius:6px}
.sticky-split .stick .media::after{background:linear-gradient(180deg, rgba(5,15,30,0) 50%, rgba(5,15,30,.7) 100%)}
.sticky-split .stick .cap{position:absolute; left:1.25rem; right:1.25rem; bottom:1.2rem; z-index:2; color:#fff}
.sticky-split .stick .cap b{display:block; font-family:var(--font-head); font-size:1.15rem; margin-bottom:.25rem}
.sticky-split .stick .cap span{font-size:.85rem; color:rgba(255,255,255,.8)}
.sticky-split .steps{display:grid; gap:1rem}
@media (max-width: 860px){ .sticky-split{grid-template-columns:1fr} .sticky-split .stick{position:static} .sticky-split .stick .media{aspect-ratio:16/10} }

/* Story cards (client stories): tall photographs with the story on the mask */
.story{position:relative; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; text-decoration:none; border-radius:6px; overflow:hidden; min-height:420px; background:#0E1F38; min-width:0}
.story .media{position:absolute; inset:0}
.story .media::after{background:linear-gradient(180deg, rgba(5,15,30,.1) 0%, rgba(5,15,30,.35) 45%, rgba(5,15,30,.92) 100%)}
.story .body{position:relative; z-index:2; padding:1.5rem}
.story .k{font-family:var(--font-body); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#9CCBF4; font-weight:600; display:block; margin-bottom:.5rem}
.story h3{color:#fff; font-size:clamp(1.15rem, 1.5vw, 1.35rem); line-height:1.3}
.story .more{display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem; font-size:.85rem; font-weight:600; color:#fff}
.story .more::after{content:""; width:.5rem; height:.5rem; border-right:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--ease)}
.story:hover{color:#fff; text-decoration:none}
.story:hover .more::after{transform:rotate(45deg) translate(3px,-3px)}
.story .stat{position:absolute; top:1.25rem; left:1.5rem; z-index:2; font-family:var(--font-head); font-weight:700; font-size:2rem; line-height:1; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4)}
.story .stat small{display:block; font-family:var(--font-body); font-weight:400; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#C9D3E3; margin-top:.3rem}

/* Big quote with photograph (Accenture's leadership quote block) */
.quote-block{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(1.5rem, 5vw, 5rem); align-items:center}
.quote-block .media{aspect-ratio:4/5; border-radius:6px}
.quote-block blockquote{margin:0; font-family:var(--font-head); font-weight:700; font-size:clamp(1.5rem, 2.6vw, 2.3rem); line-height:1.25; color:var(--ink); letter-spacing:-.01em}
.quote-block blockquote::before{content:"\201C"; color:var(--blue); display:block; font-size:3em; line-height:.6; margin-bottom:.35em; font-family:Georgia, serif}
.quote-block cite{display:block; font-style:normal; margin-top:1.5rem; font-size:.95rem; color:var(--text)}
.quote-block cite b{display:block; color:var(--ink); font-weight:700}
@media (max-width: 860px){ .quote-block{grid-template-columns:1fr} .quote-block .media{aspect-ratio:16/10} }

/* Client marks as a slow marquee, paused on hover */
.marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee .track{display:flex; align-items:center; gap:3rem; width:max-content; animation:marquee 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee img{width:120px; height:120px; object-fit:contain; display:block; opacity:.92; transition:opacity .4s, transform .4s var(--ease)}
.marquee img:hover{opacity:1; transform:scale(1.06)}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marquee .track{animation:none; flex-wrap:wrap; width:auto; justify-content:center} }

/* CTA band with a line-art pattern (the Accenture geometric backdrop) */
.cta-band{position:relative; overflow:hidden; isolation:isolate}
.cta-band::before{content:""; position:absolute; inset:0; z-index:0; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300' fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Ccircle cx='480' cy='150' r='140'/%3E%3Ccircle cx='480' cy='150' r='70'/%3E%3Cpath d='M0 150h340M340 150a140 140 0 0 1 140-140M340 150a140 140 0 0 0 140 140'/%3E%3Cpath d='M0 290h600M0 10h600'/%3E%3Ccircle cx='120' cy='150' r='60'/%3E%3Cpath d='M120 90v120M60 150h120'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right -40px center; background-size:min(70%, 760px)}
.cta-band .wrap{position:relative; z-index:1}
.cta-band h2{font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.15}
.cta-band p{font-size:1.08rem}

/* Light grey numbered outcomes (stat tiles) get larger figures */
.tiles{padding:2.5rem var(--gutter); gap:2rem 1.5rem}
.tiles > div{border-left:2px solid rgba(255,255,255,.35); padding-left:1rem}
.tiles .big{font-size:clamp(2.2rem, 3.6vw, 3rem); letter-spacing:-.02em}

/* Split feature: copy and a photograph side by side, photograph under a wipe mask */
.feature{display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:clamp(1.5rem, 4vw, 4rem); align-items:center}
.feature.rev > .media{order:-1}
.feature .media{aspect-ratio:5/4; border-radius:6px}
.feature .media::after{background:linear-gradient(180deg, rgba(5,15,30,0) 60%, rgba(5,15,30,.5) 100%)}
.feature .media .cap{position:absolute; left:1.25rem; bottom:1.1rem; z-index:2; color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600}
.feature h2{font-size:var(--fs-h2); line-height:1.15}
.feature .lead{margin-top:1rem; color:var(--text); font-size:1.08rem; line-height:1.7}
@media (max-width: 860px){ .feature{grid-template-columns:1fr} .feature.rev > .media{order:0} }

/* Photo strip: three cities, three talent pools */
.pools-strip{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; margin-top:2.5rem}
.pools-strip .tile{aspect-ratio:16/10}
@media (max-width: 720px){ .pools-strip{grid-template-columns:1fr} }

/* Section heads can carry a photograph on the right */
.head-media{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:2rem; align-items:end; margin-bottom:2.5rem}
.head-media .media{aspect-ratio:16/9; border-radius:6px}
@media (max-width: 860px){ .head-media{grid-template-columns:1fr} }

/* Insight / article hero image */
.article-hero{margin:0 calc(var(--gutter) * -1); height:clamp(240px, 42vw, 520px)}
.article-hero .media{height:100%}
.article-hero .media::after{background:linear-gradient(180deg, rgba(21,48,94,.0) 40%, rgba(21,48,94,.55) 100%)}

/* Rule items: lighter, open layout */
.rule-item{transition:border-color .3s, box-shadow .3s}
.rule-item:hover{border-color:#CBD5E1; box-shadow:0 14px 30px -20px rgba(24,58,87,.35)}
.rule-item h3{font-size:1.2rem}

/* Office / contact detail photo cards */
.office-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem}
.office{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; min-width:0}
.office .media{aspect-ratio:16/9}
.office .body{padding:1.1rem 1.25rem 1.25rem}
.office h3{font-size:1.1rem; margin-bottom:.4rem}
.office p{font-size:var(--fs-small); color:var(--text)}
@media (max-width: 720px){ .office-grid{grid-template-columns:1fr} }

/* Outcome tiles inside a photographic band */
.photo-band .tiles{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.photo-band .section-head h2{font-size:var(--fs-h2)}

@media (max-width: 360px){ .logo img{height:34px} .nav-toggle{padding:.5rem .7rem; font-size:.85rem} }