/* Loop 2 components: homepage 'Before AI' band, outcomes row, closing next-step panel, cross-links. Brand tokens only. */
.home-why{padding:clamp(64px,7vw,104px) 0;background:#fff;border-bottom:1px solid #E6EBF2}
.home-why .home-shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
.home-why-head h2{margin:10px 0 0}
.home-why-list{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:why}
.home-why-list li{counter-increment:why;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:20px 0;border-top:1px solid #E3E9F1}
.home-why-list li:last-child{border-bottom:1px solid #E3E9F1}
.home-why-list li::before{content:"0" counter(why);grid-row:span 2;color:#087B79;font:600 .875rem/1.6 var(--ds-sans,Inter,sans-serif);letter-spacing:.06em}
.home-why-list b{color:#0A1626;font:600 1.125rem/1.35 var(--ds-display,"Space Grotesk",sans-serif)}
.home-why-list span{color:#4A5A70;font-size:1rem;line-height:1.6}
/* outcomes row */
.home-outcomes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
.home-outcome{display:flex;flex-direction:column;gap:6px;padding:28px;border:1px solid #E3E9F1;border-radius:12px;background:#fff;color:#26354C;text-decoration:none;transition:box-shadow .2s,transform .2s,border-color .2s}
.home-outcome:hover,.home-outcome:focus-visible{border-color:#C9D6E6;box-shadow:0 10px 28px rgba(10,22,38,.08);transform:translateY(-2px)}
.home-outcome-k{color:#087B79;font:600 .75rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.home-outcome strong{margin-top:10px;color:#054186;font:600 clamp(2.25rem,1.6rem + 1.6vw,3rem)/1.05 var(--ds-display,"Space Grotesk",sans-serif);letter-spacing:-.02em}
.home-outcome b{color:#0A1626;font:600 1.0625rem/1.35 var(--ds-sans,Inter,sans-serif)}
.home-outcome>span:not(.home-outcome-k){color:#4A5A70;font-size:.9375rem;line-height:1.55}
.home-outcome em{margin-top:auto;padding-top:14px;color:#054186;font:normal 600 .9375rem/1 var(--ds-sans,Inter,sans-serif)}
.home-close-kicker{display:block;margin-bottom:12px;color:#7FD3FF;font:600 .75rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase}
/* next-step panel at the end of every service and case page */
.dr-close{width:var(--dr-site,94vw);margin:clamp(32px,4vw,56px) auto clamp(56px,6vw,96px)}
.dr-close-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:clamp(28px,4vw,48px);border-radius:16px;color:#E8EEF7;background:radial-gradient(800px 360px at 85% -20%,rgba(26,127,255,.25),transparent 60%),linear-gradient(135deg,#0B1A2E,#0D2347)}
.dr-close-kicker{display:block;margin-bottom:10px;color:#7FD3FF;font:600 .75rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.dr-close h2{margin:0;color:#fff!important;max-width:28ch}
.dr-close p{margin:10px 0 0;color:#B9C7DA!important}
.dr-close-actions{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dr-close-link{color:#fff;font:600 .9375rem/1.4 var(--ds-sans,Inter,sans-serif);text-decoration:none;max-width:32ch}
.dr-close-link:hover{text-decoration:underline}
.sr-crosslink{margin:14px 0 0;color:#4A5A70;font-size:.9375rem}
.sr-crosslink a{color:#054186;font-weight:600}
@media(max-width:900px){.home-why .home-shell{grid-template-columns:1fr}.home-outcomes{grid-template-columns:1fr!important}.dr-close-inner{display:block}.dr-close-actions{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.home-outcome{transition:none}.home-outcome:hover{transform:none}}
/* typography details from the review: one kicker weight, readable table and definition text */
:is(main,body>section,body>div) :is([class*="kicker"],[class*="eyebrow"],.report-context-kicker){font-weight:600}
.dr-meta dd,table td,table th{font-size:.875rem}
.dr-meta dt{font-size:.75rem;font-weight:600}
/* contact: cards stack from the top (no stretched gap), numbered next steps */
#pbi-whatsapp-card:empty{display:none}
.grid.lg\:grid-cols-5{align-items:start}
.grid.lg\:grid-cols-5>div:last-child{display:flex;flex-direction:column;gap:16px}
.grid.lg\:grid-cols-5>div:last-child>*{margin:0!important}
#what-happens ol{list-style:none!important;padding:0!important;margin:20px 0 8px!important;counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#what-happens ol li{counter-increment:step;position:relative;padding:44px 16px 16px;border:1px solid #E3E9F1;border-radius:12px;background:#F7F9FC;font-size:.9375rem;line-height:1.55;color:#26354C}
#what-happens ol li::before{content:"0" counter(step);position:absolute;left:16px;top:14px;color:#087B79;font:600 .875rem/1 var(--ds-sans,Inter,sans-serif);letter-spacing:.06em}
@media(max-width:900px){#what-happens ol{grid-template-columns:1fr 1fr}}
@media(max-width:520px){#what-happens ol{grid-template-columns:1fr}}
/* embedded reports: the poster frame shows through until the live report has loaded */
.report-embed-scroll[style*="report-posters"] .report-embed{background:transparent!important}
/* ===== loop 3 ===== */
/* one left and right edge: inner Tailwind gutters removed inside the 94% page width */
.max-w-7xl.mx-auto.px-6,.max-w-6xl.mx-auto.px-6{padding-left:0!important;padding-right:0!important}
/* scroll-in effects never hide content */
.reveal{opacity:1!important}
/* demos page: a clear break between the report gallery and the browser demonstrations */
.demo-break{width:var(--dr-site,94vw);margin:0 auto;padding:clamp(56px,6vw,96px) 0 8px}
.demo-break-kicker{display:block;margin-bottom:10px;color:#087B79;font:600 .75rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.demo-break h2{margin:0;max-width:30ch}
.demo-break p{margin:12px 0 0;color:#4A5A70}
/* case-studies hub: the seventh card becomes a full-width feature instead of an orphan */
@media(min-width:1024px){
 .pc-case-grid>a:last-child:nth-child(3n+1){grid-column:1/-1;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:36px;align-items:start}
 .pc-case-grid>a:last-child:nth-child(3n+1)>*{grid-column:2}
 .pc-case-grid>a:last-child:nth-child(3n+1)>*:first-child{grid-column:1;grid-row:1/span 9;height:100%;min-height:300px;object-fit:cover}
}
/* homepage pillar description link */
.home-service-pillar p a{color:#054186;font-weight:600;text-decoration:none;white-space:nowrap}
/* accessibility (axe): links inside sentences are underlined; capability numbers meet AA contrast */
:is(main,body>section,body>div,article) p a:not([class*="btn"]):not([class*="link"]):not(.rt-open){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sr-capability>span[aria-hidden="true"]{color:#0A6664!important}
/* ===== final pass (round-3 must-fixes) ===== */
.reveal{transform:none!important}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;padding:10px 16px;border-radius:8px;background:#054186;color:#fff;font:600 .9375rem/1 var(--ds-sans,Inter,sans-serif);text-decoration:none}
.skip-link:focus{left:16px}
.sr-card-number{color:#0F766E!important}
.qc-attribution a{color:#546A79!important}
/* buttons: two sizes, one radius, one weight */
:is(main,body>section,body>div,article) :is(.btn-primary,.btn-outline):not(#navbar *){min-height:48px;padding:0 24px!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px!important;font:600 15px/1 var(--ds-sans,Inter,sans-serif)!important}
#navbar .btn-primary,#navbar a[class*="btn"]{min-height:40px;padding:0 18px!important;display:inline-flex;align-items:center;border-radius:10px!important;font:600 14px/1 var(--ds-sans,Inter,sans-serif)!important}
.rt-live,.rt-all{border-radius:10px!important}
/* one header height on every page */
#navbar>div:first-child:not(.nav-drop):not([class*="drop"]){min-height:64px;padding-top:0!important;padding-bottom:0!important;display:flex;align-items:center}
/* internal counters stay available to screen readers only */
[data-sr-filter-status],.insights-filter-status{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* demos: chart at a readable fixed scale, tabs on the page edge */
.fca-panel svg{max-width:1100px;margin-left:auto;margin-right:auto;display:block}
#demo-explorer .demo-nav{padding-left:0!important;padding-right:0!important;width:var(--dr-site,94vw);margin-left:auto;margin-right:auto}
/* phone: the hero diagram is too small to read, so the hero leads with the message */
/* 2026-10-09 (Manish: phones get the same cinematic effects as desktop): the animated hero visual now shows on phones too, full width under the headline */
@media(max-width:767px){.photo-bg-hero .hero-visual-panel{display:block;max-width:100%;margin-top:8px}}
/* About: floating badges repeated the stats band */
.about-floating-stats,.profile-floating-stats{display:none!important}

/* blog: one reading column for every article (hero and body share the same width and left edge) */
.blog-post-hero>.max-w-3xl,.blog-post-hero-inner,.page-hero>.blog-body,.blog-article .article-body,main .blog-body{box-sizing:border-box;width:100%!important;max-width:800px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important}
.blog-post-hero h1,.page-hero>.blog-body h1{max-width:none!important}
.blog-post-hero h1+p,.page-hero>.blog-body h1+p{margin-top:16px!important;max-width:none!important}
.blog-post-hero h1+p+p,.blog-post-hero .blog-byline{margin-top:12px!important}
.blog-article .article-body p,.blog-article .article-body li,main .blog-body p{font-size:1.0625rem;line-height:1.75}
@media(max-width:767px){.blog-post-hero,.page-hero:has(>.blog-body){padding-left:0!important;padding-right:0!important}}

/* 2026-10-08 consistency: every page section uses the same site width and left edge (94vw); long-form reading pages (blog articles, policies) keep one 800px reading column */
main > section .max-w-3xl.mx-auto,main > section .max-w-4xl.mx-auto,main > section .max-w-5xl.mx-auto,main > section .max-w-6xl.mx-auto,main > section .max-w-7xl.mx-auto,
main > .page-hero > .max-w-3xl.mx-auto,main > .page-hero > .max-w-4xl.mx-auto,main > .page-hero > .max-w-5xl.mx-auto,
.related-services-inner,.fu-shell{box-sizing:border-box;width:var(--dr-site,94vw)!important;max-width:var(--dr-site,94vw)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
main > section,main > .page-hero{padding-left:0!important;padding-right:0!important}
main > section .mx-auto .text-center,main > .page-hero .text-center,main > section .max-w-3xl.mx-auto.text-center,main > section .max-w-4xl.mx-auto.text-center{text-align:left!important}
main > section .text-center .mx-auto,main > .page-hero .mx-auto:not(.max-w-3xl):not(.max-w-4xl):not(.max-w-5xl){margin-left:0!important}
main > section .text-center .justify-center,main > .page-hero .justify-center{justify-content:flex-start!important}
main > .page-hero h1{max-width:22ch}
main > section p,main > .page-hero p{max-width:min(100%,78ch)}
.deck.deck-page{width:var(--dr-site,94vw)!important}
main.policy-shell{box-sizing:border-box;max-width:800px!important;padding-left:24px!important;padding-right:24px!important}
main > .page-hero,main > .page-hero *,main > section .mx-auto.text-center,main > section .mx-auto.text-center > *,main > section .mx-auto > .text-center,main > section .mx-auto > .text-center > *{text-align:left!important}
main > .page-hero p,main > section .mx-auto.text-center > p,main > section .mx-auto > .text-center > p{margin-left:0!important}
body > section .mx-auto[class*="max-w-"]{box-sizing:border-box;width:var(--dr-site,94vw)!important;max-width:var(--dr-site,94vw)!important;padding-left:0!important;padding-right:0!important}
body > section,body > section *{text-align:left!important}
body > section{padding-left:0!important;padding-right:0!important}
main > section .mx-auto > div:empty{display:none}
/* about: founder card content is left-aligned, so the Projects badge sits bottom-right, clear of the buttons */
@media(min-width:641px){.founder-stats .founder-stat:nth-child(2){left:auto!important;right:-1rem!important}}
/* Power BI page: two example reports, no paging needed; the full live catalogue is on the Demos page */
section.rt[data-rt-examples] .rt-nav{display:none}
@media(max-width:767px){section.rt[data-rt-examples] .rt-rail{overflow:visible!important}section.rt[data-rt-examples] .rt-reel{display:grid!important;grid-auto-flow:row!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;transform:none!important}}

/* phones (mobile design reference rules 2 and 11): story diagrams fit the width instead of panning; breadcrumb links are thumb-sized */
@media(max-width:767px){
  .sr-page .story-canvas{overflow:hidden!important}
  .sr-page .story-canvas>.story-svg,.sr-page [data-story-family] .story-canvas>.story-svg{min-width:0!important;width:100%!important;max-width:100%!important;height:auto}
  .sr-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
  .sr-page .story-pan-hint{display:none!important}   /* the diagram now fits; nothing to scroll */
}

/* ---------- phone layer (phone-ux.js): every page follows the ProcessBI mobile design reference ---------- */
@media(max-width:767px){
  /* rule 1/2: wide visuals are whole previews, never panned */
  .pux-fit{overflow:hidden!important;max-width:100%!important;cursor:zoom-in}
  .research-canvas.pux-fit svg,.dr-pan.pux-fit img,.ps-scroll.pux-fit svg,.pm-scroll.pux-fit svg,.gs-canvas-wrap.pux-fit svg{min-width:0!important;width:100%!important;height:auto!important}
  svg.capacity-chart{width:100%!important;height:auto!important}
  .research-canvas{overflow:hidden!important}.research-canvas svg{width:100%!important;height:auto!important}
  #research-pan-hint,.dr-hint,.story-pan-hint{display:none!important}
  .pux-zoom{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin:10px 0 0;border:1px solid #D7E0EB;border-radius:999px;background:#fff;color:#054186;font:600 .875rem/1 Inter,sans-serif;cursor:pointer}
  .pux-viewer{position:fixed;inset:0;z-index:9999;background:rgba(7,16,30,.94);display:flex;flex-direction:column}
  .pux-viewer[hidden]{display:none}
  .pux-close{align-self:flex-end;min-height:44px;margin:12px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:#0A1626;font:600 .9375rem/1 Inter,sans-serif}
  .pux-stage{position:relative;flex:1;overflow:hidden}
  .pux-rot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:10px;padding:8px}
  .pux-rot.is-rot{transform:translate(-50%,-50%) rotate(90deg)}
  .pux-rot>*{display:block;width:100%!important;max-width:none!important;min-width:0!important;overflow:visible!important}
  .pux-rot svg,.pux-rot img{width:100%!important;height:auto!important;min-width:0!important}
  .pux-in-viewer{cursor:default}
  html.pux-lock,html.pux-lock body{overflow:hidden}
  /* rule 2: live report embeds become a poster that opens full screen */
  .report-embed-scroll.pux-hide{display:none!important}
  .report-context:has(.pux-poster) .report-demo-open{display:none!important}
  .pux-poster{display:block;margin-top:12px;border:1px solid #E3E9F1;border-radius:14px;background:#fff;padding:10px;box-shadow:0 8px 24px rgba(11,42,82,.07);text-decoration:none}
  .pux-poster img{display:block;width:100%;height:auto;border-radius:6px}
  .pux-poster span{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px;color:#054186;font:600 .875rem/1.2 Inter,sans-serif;text-align:center}
  /* rule 4: featured first, then "Show all" */
  .pux-featured:not(.pux-open)>.pux-more{display:none!important}
  .pux-all{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin:14px 0 0;border:1px solid #9FC2EA;border-radius:999px;background:#F4F8FD;color:#054186;font:600 .9375rem/1 Inter,sans-serif;cursor:pointer}
  .rt .pux-all{border-color:rgba(255,255,255,.35);background:transparent;color:#fff}
  /* rule 6: notes and labels stay readable */
  .deck .deck-foot p.dr-note,.deck-foot .dr-note,section.rt p.rt-note,.rt-note{font-size:.875rem!important}
  .table-wrap{overflow:visible!important}.table-wrap table{width:100%!important;min-width:0!important;table-layout:auto}
  .table-wrap th,.table-wrap td{padding:8px 6px!important;word-break:normal;overflow-wrap:anywhere;hyphens:auto;font-size:.8125rem}
  /* rule 11: thumb-sized controls (phone-ux.js adds .pux-tap to anything shorter) */
  .pux-tap{min-height:44px!important;align-items:center}
  summary.pux-tap{display:flex!important;align-items:center}
  input[type=range].pux-tap{min-height:44px}
  footer li{margin:0!important}
}