/* powerabode v3.1 — enhanced visual design system
   Apple-crisp + photography with seamless edge fades + living Value Disk.
   Corporate ID: dark blue #1B3764 · teal #45B5AA · Open Sans Light · brand logo assets
   v3.1 adds: language switcher, mobile menu, back-to-top, progress bar, cookie banner, enhanced animations */

:root{
  --blue:#1B3764; --teal:#45B5AA; --teal-ink:#267A73; --green:#7FB069; --lightblue:#8FC7E8;
  --yellow:#F5B324; --red:#E04F4F;
  --ink:#24344a; --muted:#64748b; --line:#e8edf3; --soft:#f7f9fb;
  --bg:#fff; --surface:#fff; --text:#24344a;
  --shadow-sm:0 1px 2px rgba(27,55,100,.04);
  --shadow-md:0 20px 50px rgba(27,55,100,.10);
  --shadow-lg:0 24px 60px rgba(27,55,100,.18);
  --radius-sm:12px; --radius-md:18px; --radius-pill:100px;
  --transition:0.3s cubic-bezier(.2,.6,.2,1);
}


*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{font-family:'Open Sans',sans-serif;font-weight:300;color:var(--text);background:var(--bg);line-height:1.7;font-size:17px;overflow-x:clip;transition:background var(--transition),color var(--transition)}
a{color:var(--teal-ink);text-decoration:none;transition:opacity var(--transition)}
a:hover{opacity:.82}
h1,h2,h3{color:var(--blue);line-height:1.18;text-wrap:balance;transition:color var(--transition)}
h1{font-size:clamp(2rem,4.6vw,3.5rem);font-weight:300;letter-spacing:-.5px}
h1 strong,h1 b{font-weight:600}
h2{font-size:1.75rem;font-weight:300;letter-spacing:-.3px}
h3{font-size:1.12rem;font-weight:600}
.wrap{max-width:1120px;margin:0 auto;padding-inline:max(28px,env(safe-area-inset-left)) max(28px,env(safe-area-inset-right))}
.narrow{max-width:760px;margin:0 auto}
section{padding:100px 0;position:relative;transition:background var(--transition)}
section.soft{background:var(--soft)}
.center{text-align:center}
.muted{color:var(--muted)}
.lead{font-size:1.22rem;color:var(--muted);font-weight:300;line-height:1.75}
.kicker{color:var(--teal-ink);text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:600;margin-bottom:16px;display:block}

/* ---------- skip link ---------- */
.skip-link{position:absolute;top:-100px;left:20px;background:var(--blue);color:#fff;padding:12px 24px;border-radius:var(--radius-pill);z-index:999;font-weight:600;font-size:.9rem}
.skip-link:focus{top:14px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);-webkit-backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;flex-wrap:nowrap;gap:18px;padding:8px 0;transition:min-height var(--transition)}
.wordmark{display:block;flex:0 1 260px;min-width:180px}
.wordmark img{height:40px;width:auto;display:block}
header nav{min-width:0}
header nav ul{display:flex;gap:4px 18px;list-style:none;align-items:center;flex-wrap:nowrap;justify-content:flex-end}
header nav a{color:var(--blue);font-size:.9rem;font-weight:500;white-space:nowrap;padding:4px 0;display:inline-block;transition:color var(--transition)}
header nav a[aria-current="page"]{color:var(--teal-ink);font-weight:600;position:relative}
header nav a[aria-current="page"]::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--teal);border-radius:1px}
.demo-btn{background:var(--blue);color:#fff;padding:10px 22px;border-radius:var(--radius-pill);font-weight:600;font-size:.85rem;white-space:nowrap;line-height:1.2;display:inline-block;transition:background var(--transition),color var(--transition)}
.demo-btn:hover{background:var(--teal);opacity:1;color:#07111f}
header nav .demo-btn[aria-current="page"]::after{display:none}
.drawer-cta{display:none}
@media(max-width:760px){.header-cta{display:none}}

/* ---------- nav dropdown groups ---------- */
.nav-group{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--blue);font-size:.9rem;font-weight:500;padding:4px 0;white-space:nowrap;transition:color var(--transition)}
.nav-drop-btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--transition);flex:none}
.nav-group.open>.nav-drop-btn,.nav-drop-btn:hover{color:var(--teal-ink)}
.nav-group.open>.nav-drop-btn::after{transform:translateY(2px) rotate(225deg)}
.nav-group.has-current>.nav-drop-btn{color:var(--teal-ink);font-weight:600}

/* ---------- mega menu ---------- */
/* One panel per nav group: a two-column card grid plus a feature rail. Markup is
   built by tools/build-mega-menu.mjs across every page and language.

   Anchored to the nav wrap, not to the button. A ~880px panel positioned at
   left:50% of an 80px button hangs off the viewport for the outer groups; the
   containing block has to be the row, so the panel can centre inside the page. */
.nav{position:relative}

.nav-mega-grid{display:grid;gap:4px}
.nav-mega-card{display:flex;align-items:flex-start;gap:14px;padding:13px 14px;border-radius:var(--radius-sm);color:var(--text);transition:background var(--transition)}
.nav-mega-card:hover{background:var(--soft);opacity:1}
.nav-mega-card[aria-current="page"]{background:color-mix(in srgb,var(--teal) 8%,var(--surface))}
.nav-mega-card[aria-current="page"]::after{display:none}
.nav-mega-icon{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--teal) 11%,transparent);color:var(--teal-ink)}
.nav-mega-icon svg{width:19px;height:19px;display:block}
.nav-mega-text{min-width:0}
.nav-mega-card b{display:block;color:var(--blue);font-size:.9rem;font-weight:600;margin-bottom:2px;white-space:normal}
.nav-mega-card b+span{display:block;color:var(--muted);font-size:.78rem;font-weight:300;line-height:1.5;white-space:normal}

.nav-mega-feature{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px}
.nav-mega-feature p{color:var(--muted);font-size:.84rem;line-height:1.6}
.nav-mega-feature .kicker{margin-bottom:0}
.nav-mega-feature .go{font-size:.85rem;white-space:nowrap}
/* Sized by width, not height: the asset is a 605x133 wordmark with two lines of
   small type inside it, and at a 34px cap its second line was unreadable. */
.nav-mega-logo{width:min(100%,232px);height:auto}
.nav-mega-btn{margin-top:2px;padding:11px 24px;font-size:.85rem}
/* header nav a sets white-space:nowrap for the top-level items, and every link in
   the panel inherits it. Anything here that carries a sentence has to opt out, or it
   lays out on one line and runs straight past the panel edge. */
.nav-mega-featured{white-space:normal}
.nav-mega-featured b{display:block;color:var(--blue);font-size:.92rem;font-weight:600;line-height:1.35}
.nav-mega-featured span{display:block;margin-top:5px;color:var(--muted);font-size:.8rem;font-weight:300;line-height:1.55}
.nav-mega-featured:hover b{color:var(--teal-ink)}

@media(min-width:1181px){
  header nav{margin:0 auto}
  .nav-group{position:static}
  .nav-mega{position:absolute;top:100%;inset-inline:0;width:min(920px,calc(100% - 56px));margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:30px;
    padding:24px 28px;background:var(--surface);border-radius:16px;box-shadow:0 18px 48px rgba(27,55,100,.18);
    opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
    transition:opacity .24s cubic-bezier(.2,.6,.2,1),transform .24s cubic-bezier(.2,.6,.2,1),visibility .24s;z-index:70}
  /* Panels with no feature rail (a nav group we have no rail copy for) go full width
     rather than leaving a 288px hole. */
  .nav-mega[data-nav-mega-solo]{grid-template-columns:minmax(0,1fr)}
  .nav-mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-group.open>.nav-mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .nav-mega-feature{border-inline-start:1px solid var(--line);padding-inline-start:28px}
  /* Hover-to-open only where hovering is real. On a touch screen the first tap
     would otherwise both open and, being a click, immediately close the panel. */
  @media(hover:hover){
    .nav-group:hover>.nav-mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  }
}

/* Dims the page behind an open panel. Lives on <body>: header carries
   backdrop-filter, which makes it the containing block for fixed descendants, so a
   backdrop parented there covers the header strip only. Sits under the header's
   z-index so the header and the panel stay lit. */
.nav-mega-backdrop{position:fixed;inset:0;background:rgba(12,24,44,.16);z-index:55;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s cubic-bezier(.2,.6,.2,1),visibility .24s}
.nav-mega-backdrop.visible{opacity:1;visibility:visible;pointer-events:auto}
@media(max-width:1180px){.nav-mega-backdrop{display:none}}

/* ---------- mobile nav (≤1180px) ---------- */
@media(max-width:1180px){
  header nav{text-align:start}
  .nav-group{width:100%}
  .nav-drop-btn{width:100%;justify-content:space-between;font-size:1.05rem;font-weight:500;padding:12px 0;border-bottom:1px solid var(--line)}

  /* Accordion. visibility, not just a zero row: a collapsed panel that is merely
     0px tall still takes keyboard focus, so tabbing walks through invisible links. */
  .nav-mega{display:grid;grid-template-rows:0fr;visibility:hidden;overflow:hidden;
    transition:grid-template-rows .3s cubic-bezier(.2,.6,.2,1),visibility .3s}
  .nav-group.open>.nav-mega{grid-template-rows:1fr;visibility:visible}
  .nav-mega-grid{gap:0;padding:4px 0 10px;min-height:0}
  .nav-mega-card{gap:12px;padding:11px 12px;border-radius:10px;transition:background var(--transition)}
  .nav-mega-card:hover,.nav-mega-card[aria-current="page"]{background:color-mix(in srgb,var(--teal) 9%,var(--surface))}
  .nav-mega-icon{width:30px;height:30px;border-radius:9px}
  .nav-mega-icon svg{width:17px;height:17px}
  .nav-mega-card b{font-size:.95rem}
  .nav-mega-card b+span{font-size:.8rem}
  /* The drawer already ends in .drawer-cta; a promo rail here is a second one. */
  .nav-mega-feature{display:none}
  .drawer-cta{display:block}
}

/* ---------- header controls (language switcher + hamburger) ---------- */
.header-controls{display:flex;align-items:center;gap:10px}
.header-language{position:relative;display:flex;align-items:center;z-index:78}
.language-toggle{min-width:64px;height:44px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--blue);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:border-color var(--transition),background var(--transition);flex:none}
.language-toggle:hover,.header-language.open .language-toggle{border-color:var(--teal);background:var(--soft)}
.language-flag{font-size:1.3rem;line-height:1;filter:saturate(.92)}
.language-code{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--blue);line-height:1}
.language-chevron{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--transition)}
.header-language.open .language-chevron{transform:translateY(2px) rotate(225deg)}
.header-language-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:200px;max-width:calc(100vw - 32px);padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 8px rgba(27,55,100,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1),visibility .2s;z-index:79}
.header-language.open .header-language-menu{opacity:1;visibility:visible;transform:translateY(0)}
.header-language-menu a{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:40px;padding:7px 10px;border-radius:9px;color:var(--text);font-size:.9rem;font-weight:500;line-height:1.35;text-align:start}
.header-language-menu a:hover{background:var(--soft);color:var(--blue);opacity:1}
.header-language-menu a[aria-current="true"]{background:color-mix(in srgb,var(--teal) 13%,var(--surface));color:var(--blue);font-weight:700}
.header-language-menu .language-option-flag{flex:0 0 24px;width:24px;font-size:1.05rem;text-align:center}
.header-language-menu .language-option-name{flex:1;min-width:0;width:auto;white-space:nowrap;text-align:start;unicode-bidi:isolate}
@media(max-width:560px){.header-language-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;inset-inline-start:auto;width:min(200px,calc(100vw - 32px));max-height:calc(100dvh - 96px);overflow-y:auto}.header-language-menu a{min-height:44px}}
@media(max-width:480px){
  .wrap{padding-inline:max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-right))}
  .nav{gap:10px}
  .wordmark{flex:1 1 auto;min-width:0}
  .wordmark img{width:min(100%,170px);height:auto;max-height:36px}
  .header-controls{gap:6px}
  .language-toggle{min-width:52px;padding-inline:8px}
  .language-code{display:none}
}

/* ---------- hamburger menu ---------- */
/* Sized and framed to match .language-toggle - the two sit side by side and must
   read as one control set. The bars morph into the drawer's only close affordance. */
.hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--blue);cursor:pointer;z-index:70;flex:none;transition:border-color var(--transition),background var(--transition)}
.hamburger:hover,.hamburger.active{border-color:var(--teal);background:var(--soft)}
.hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--transition),opacity var(--transition)}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:1180px){
  .hamburger{display:flex}
  /* Parked with transform, not a negative inset: a negative inline-start offset
     lands inside the RTL scroll origin and leaves the drawer visible on rtl pages. */
  header nav{position:fixed;top:0;inset-inline-end:0;width:min(380px,92vw);height:100dvh;background:var(--surface);padding:84px 28px max(32px,env(safe-area-inset-bottom));box-shadow:-4px 0 18px rgba(18,35,63,.18);transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);overflow-y:auto;overscroll-behavior:contain;z-index:65}
  [dir="rtl"] header nav{transform:translateX(-100%)}
  header nav.open,[dir="rtl"] header nav.open{transform:translateX(0)}
  header nav ul{flex-direction:column;align-items:flex-start;gap:0}
  header nav ul li{width:100%}
  header nav ul li a{font-size:1.05rem;padding:12px 0;display:block;border-bottom:1px solid var(--line)}
  header nav .demo-btn{display:inline-block;margin-top:16px;text-align:center;width:100%}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:64;opacity:0;pointer-events:none;transition:opacity var(--transition)}
  .nav-overlay.visible{opacity:1;pointer-events:auto}
}
/* Locking the root, not the body: body's overflow only propagates to the viewport
   while the root's is visible, and ours is clip - locking the body there detaches
   the scroll container and drops the reader back to the top of the page. */
html.nav-locked{overflow:hidden}
/* Consent stays available after drawer closes. While drawer is open, keeping both
   fixed layers visible hides its lower destinations and creates two competing
   interaction surfaces on small screens. */
html.nav-locked .cookie-banner.visible{transform:translateY(100%)}
[dir="rtl"] .go:hover{transform:translateX(-4px)}

/* ---------- header scrolled state ---------- */
header.scrolled{box-shadow:0 8px 30px rgba(27,55,100,.1)}
header.scrolled .nav{min-height:64px}
header.scrolled .wordmark img{height:40px}
@media (prefers-reduced-motion: reduce){.nav{transition:none}}

/* ---------- heroes with photography ---------- */
.hero{padding:150px 0 120px;position:relative}

/* ---------- hero structure: badge · actions · stats ---------- */
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 8px;border-radius:var(--radius-pill);border:1px solid var(--line);background:rgba(255,255,255,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);font-size:.82rem;font-weight:600;color:var(--blue);margin-bottom:28px}
.hero-badge .tag{background:var(--teal);color:#07111f;border-radius:var(--radius-pill);padding:3px 11px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;flex:none}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero-actions .btn{margin-top:0}
.hero-context{margin-top:22px;color:var(--muted);font-size:.95rem}
.hero-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:46px;padding-top:28px;border-top:1px solid var(--line);max-width:700px}
.hero-stats>div{padding:0 32px;border-left:1px solid var(--line)}
.hero-stats>div:first-child{padding-left:0;border-left:0}
.hero-stats b{display:block;font-size:1.75rem;font-weight:600;color:var(--blue);line-height:1.25;letter-spacing:-.3px;transition:color var(--transition)}
.hero-stats span{display:block;margin-top:4px;font-size:.82rem;color:var(--muted);max-width:200px;line-height:1.5}
@media(max-width:640px){
  .hero-stats{grid-template-columns:1fr;gap:20px}
  .hero-stats>div{padding:0;border-left:0}
  .hero-stats>div:last-child{padding-right:0}
}
.hero .lead{max-width:620px;margin-top:28px}
.hero .category{margin-top:32px;max-width:660px;font-size:1.05rem;color:var(--text);border-top:1px solid var(--line);padding-top:18px;transition:color var(--transition)}
.hero-split{min-height:82vh;display:flex;align-items:center;overflow:visible}
.hero-split .photo{
  position:absolute;top:0;right:0;bottom:0;width:62%;
  background-size:cover;background-position:center;z-index:-1;
  -webkit-mask-image:linear-gradient(to left,#000 45%,transparent 96%);
  mask-image:linear-gradient(to left,#000 45%,transparent 96%);
}
/* crossfading hero image slider (shares the photo's placement + edge fade) */
.hero-slider{
  position:absolute;top:0;right:0;bottom:0;width:62%;z-index:-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(to left,#000 45%,transparent 96%);
  mask-image:linear-gradient(to left,#000 45%,transparent 96%);
}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1);will-change:opacity}
.hero-slide.is-active{opacity:1}
.hero-slide picture{position:absolute;inset:0;display:block}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transform:scale(1);transition:transform 8s ease-out;
}
/* slow ken-burns push while a slide is on screen */
.hero-slide.is-active img{transform:scale(1.06)}
.hero-split .wrap{position:relative;z-index:2;width:100%}
.hero-split h1,.hero-split .lead{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.hero-proof{padding:42px 0 48px;border-bottom:1px solid var(--line);background:var(--surface)}
.hero-proof-intro{max-width:760px;color:var(--text);font-size:1.06rem;line-height:1.7}
.hero-proof .hero-stats{margin-top:26px}
@media(max-width:860px){
  .hero-split{min-height:auto;padding:110px 0 80px}
  .hero-split .photo,
  .hero-slider{width:100%;opacity:.28;
    -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);}
}

/* Workbench hero: keep narrative copy separate from the industrial image */
.workbench-hero{min-height:760px}
.workbench-hero .photo{width:50%;background-position:58% center;background-repeat:no-repeat}
.workbench-hero h1{max-width:620px}
.workbench-hero .lead{max-width:610px}
.workbench-hero .hero-stats{max-width:620px}
@media(max-width:860px){
  .workbench-hero{display:flex;flex-direction:column;align-items:stretch;min-height:auto;padding:24px 0 80px}
  .workbench-hero .photo{position:relative;inset:auto;order:0;width:calc(100% - 32px);height:clamp(220px,56vw,340px);margin:0 auto 40px;border-radius:12px;background-position:58% center;opacity:1;-webkit-mask-image:none;mask-image:none;z-index:0}
  .workbench-hero .wrap{order:1}
  .workbench-hero h1,.workbench-hero .lead{text-shadow:none}
}
@media(max-width:480px){
  .workbench-hero{padding-top:16px}
  .workbench-hero .photo{height:220px;margin-bottom:32px;background-position:62% center}
}

/* Insights hero: full-bleed collaboration image with a readable editorial field */
.insights-hero{min-height:760px;padding:112px 0 176px;overflow:hidden;background:var(--bg)}
.insights-hero .photo{inset:0;width:100%;background-position:center 58%;-webkit-mask-image:none;mask-image:none;z-index:0}
.insights-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0) 68%,#fff 100%),linear-gradient(90deg,rgba(10,31,63,.94) 0%,rgba(10,31,63,.82) 42%,rgba(10,31,63,.34) 72%,rgba(10,31,63,.08) 100%);z-index:1;pointer-events:none}
.insights-hero .wrap{position:relative;z-index:2}
.insights-hero .kicker{color:#83eee7}
.insights-hero h1{max-width:680px;color:#fff;font-size:clamp(2.6rem,5vw,4.5rem);letter-spacing:-.03em;text-wrap:balance;text-shadow:none}
.insights-hero .lead{max-width:650px;color:rgba(255,255,255,.92);font-weight:400;line-height:1.72;text-shadow:none}
.insights-hero .category{max-width:620px;margin-top:30px;padding:18px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.4);color:rgba(255,255,255,.9);font-weight:400}
.insights-hero .btn{background:var(--teal);color:#07111f}
.insights-hero .btn:hover{background:#fff;color:var(--blue)}
.insights-hero .btn.quiet{background:transparent;border-color:rgba(255,255,255,.78);color:#fff}
.insights-hero .btn.quiet:hover{background:#fff;border-color:#fff;color:var(--blue)}
.insights-topic-bar{position:relative;z-index:3;margin-top:-72px;padding:0 0 28px}
.insights-topic-bar .blog-controls{margin-top:0}
.insights-topic-bar .blog-controls a{background:var(--surface);backdrop-filter:none}
@media(max-width:860px){
  .insights-hero{min-height:720px;padding:88px 0 150px}
  .insights-hero .photo{width:100%;opacity:1;background-position:52% center;-webkit-mask-image:none;mask-image:none}
  .insights-hero::after{background:linear-gradient(to bottom,rgba(255,255,255,0) 72%,#fff 100%),linear-gradient(90deg,rgba(9,29,60,.94) 0%,rgba(9,29,60,.78) 100%)}
}
@media(max-width:560px){
  .insights-hero{min-height:auto;padding:72px 0 142px}
  .insights-hero h1{font-size:clamp(2.25rem,11vw,3.15rem)}
  .insights-hero .lead{font-size:1rem;line-height:1.68}
  .insights-hero .hero-actions{align-items:stretch;flex-direction:column;margin-top:32px}
  .insights-hero .hero-actions .btn{width:100%;padding:13px 22px;text-align:center}
  .insights-topic-bar{margin-top:-62px}
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:opacity .01ms}
  .hero-slide img,.hero-slide.is-active img{transition:none;transform:none}
}

/* full-bleed photo band with seamless top/bottom fades */
.band-photo{
  height:52vh;min-height:320px;background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
}

/* real inline images */
.img-real{width:100%;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:block}
.img-contain{object-fit:contain;box-shadow:none;border-radius:0}

/* ---------- The Workbench on mobile ----------
   Drawn in markup, not shipped as a render. The 2020 PNG this replaced carried a
   third-party oil major's logo on the login screen, spelled "Contract Summery",
   and showed a menu the product no longer has - so the one illustration of the
   platform on the page contradicted the page. Markup also translates, scales to
   any viewport, and reads out to a screen reader; a 1.4MB flattened image does
   none of the three. Anything shown here must exist: this section claims nothing
   on the page is a rendering. */
.wb-devices{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);align-items:flex-end;justify-content:center;margin:44px 0 0}
/* min-width caps at 100% so a 320px phone never scrolls the page sideways. */
.wb-phone{flex:0 1 300px;max-width:320px;min-width:min(250px,100%);margin:0;background:#0e1726;border-radius:40px;padding:9px;box-shadow:var(--shadow-lg)}
.wb-phone::before{content:"";display:block;width:78px;height:5px;border-radius:var(--radius-pill);background:rgba(255,255,255,.24);margin:7px auto 6px}
.wb-screen{background:var(--surface);border-radius:32px;overflow:hidden;display:flex;flex-direction:column;min-height:496px}
.wb-head{background:var(--blue);color:#fff;padding:18px 20px 20px}
.wb-head .wb-eyebrow{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lightblue);margin-bottom:6px}
.wb-head strong{display:block;font-size:1rem;font-weight:600;line-height:1.3}
.wb-body{flex:1;padding:16px 16px 12px;display:flex;flex-direction:column;gap:8px}
.wb-stage{display:flex;align-items:center;gap:10px;font-size:.78rem;line-height:1.35;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--radius-sm);padding:9px 12px}
[dir="rtl"] .wb-stage{border-left:1px solid var(--line);border-right:3px solid var(--teal)}
.wb-stage .wb-step{flex:none;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:.62rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.wb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.78rem;line-height:1.35;color:var(--ink);border-bottom:1px solid var(--line);padding:9px 2px}
.wb-row:last-child{border-bottom:0}
.wb-tag{flex:none;font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-pill);background:rgba(69,181,170,.16);color:var(--teal-ink)}
.wb-tag.is-gate{background:rgba(245,179,36,.18);color:#8a6100}
.wb-note{margin:auto 0 0;padding-top:12px;font-size:.68rem;line-height:1.45;color:var(--muted)}
.wb-foot{background:var(--soft);border-top:1px solid var(--line);padding:11px 16px;font-size:.66rem;letter-spacing:.04em;color:var(--muted);text-align:center}
.wb-caption{flex:1 0 100%;margin:22px auto 0;max-width:62ch;text-align:center;font-size:.85rem;color:var(--muted)}
@media(min-width:861px){.wb-phone:first-child{transform:translateY(-26px)}}

/* ---------- the living Value Disk ---------- */
.disk{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  filter:drop-shadow(0 30px 70px rgba(27,55,100,.28));
  animation:spin 160s linear infinite;
}
.disk img{width:100%;height:auto;display:block}
.disk-hero{width:min(74vmin,760px);right:calc(-1 * min(26vmin,260px));top:50%;margin-top:calc(-1 * min(37vmin,380px))}
.disk-edge{width:min(64vmin,640px);right:calc(-1 * min(30vmin,300px));bottom:calc(-1 * min(22vmin,220px))}
.disk-left{right:auto;left:calc(-1 * min(30vmin,300px))}
.disk-slow{animation-duration:240s}
.disk-static{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.disk{animation:none}}
@media(max-width:860px){.disk-hero{opacity:.35}.disk-edge{opacity:.4}}

/* Content remains visible by default. JS may enhance state without gating rendering. */
.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;transition:none}}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--blue);color:#fff;padding:15px 34px;border-radius:var(--radius-pill);font-weight:600;font-size:.95rem;margin-top:36px;transition:background var(--transition),transform var(--transition),box-shadow var(--transition);position:relative;overflow:hidden}
.btn:hover{background:var(--teal);color:#07111f;opacity:1;transform:translateY(-2px);box-shadow:0 4px 8px rgba(27,55,100,.2)}
.btn:active{transform:translateY(0)}
.btn.quiet{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn.quiet:hover{background:var(--blue);color:#fff}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:36px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:40px 34px;transition:border-color var(--transition),background var(--transition)}
.card:hover{border-color:color-mix(in srgb,var(--blue) 24%,var(--line))}
.soft .card{box-shadow:none}
.card h3{margin-bottom:14px;transition:color var(--transition)}
.card p{color:var(--muted);font-size:.97rem}
.card .go{display:block;margin-top:22px;font-weight:600;font-size:.9rem}
.card-photo{height:170px;border-radius:var(--radius-sm);background-size:cover;background-position:center;margin-bottom:22px;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);}

/* ---------- proof strip ---------- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:74px 0;position:relative;overflow:hidden;transition:border-color var(--transition)}
.proof ul{list-style:none;display:grid;gap:26px;grid-template-columns:repeat(2,1fr);position:relative;z-index:2}
@media(max-width:860px){.proof ul{grid-template-columns:1fr}}
.proof li{padding-left:26px;position:relative;color:var(--text);font-size:1.02rem;transition:color var(--transition)}
.proof li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--teal)}
.proof li em{color:var(--muted);font-style:normal;font-size:.9rem;display:block}

/* ---------- buckets / tables / passage ---------- */
.buckets{display:grid;grid-template-columns:4fr 3fr 2fr 1fr;gap:8px;margin:44px 0 10px}
@media(max-width:700px){.buckets{grid-template-columns:1fr;gap:6px}}
.bucket{border-radius:14px;color:#fff;padding:22px 18px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between}
.bucket b{font-size:1.7rem;font-weight:600}
.bucket span{font-size:.85rem;opacity:.92}
.b-eff{background:var(--yellow)} .b-spec{background:var(--teal)} .b-rate{background:var(--blue)} .b-un{background:var(--red)}
/* ---------- Value Disk: looping part-to-whole for the four value categories ----------
   Replaces a sunburst PNG whose thirty role labels were unreadable at column width.
   One category is emphasised at a time so each frame is legible; the legend carries
   every label as text, so identity never rests on colour alone, and the page's table
   is the WCAG-clean twin. Only opacity/transform/paint animate - no layout. */
.value-disk{--vd-cycle:14s;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px;align-items:center;margin:40px 0 8px}
@media(max-width:780px){.value-disk{grid-template-columns:minmax(0,1fr);gap:24px}}
.vd-stage{position:relative;width:100%;max-width:300px;margin-inline:auto}
.vd-ring{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.vd-track{fill:none;stroke:var(--line);stroke-width:24}
.vd-arc{fill:none;stroke-width:24;opacity:.24;animation:vd-arc var(--vd-cycle) infinite}
.vd-arc.vd-eff{stroke:var(--yellow)}
.vd-arc.vd-spec{stroke:var(--teal)}
.vd-arc.vd-rate{stroke:var(--blue)}
.vd-arc.vd-un{stroke:var(--red)}
.vd-center{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vd-panels{display:grid;place-items:center;text-align:center}
.vd-panel{grid-area:1/1;opacity:0;animation:vd-panel var(--vd-cycle) infinite}
.vd-panel b{display:block;font-size:2.5rem;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--blue)}
.vd-panel span{display:block;max-width:12ch;margin-top:6px;font-size:.85rem;font-weight:600;line-height:1.3;color:var(--teal-ink)}
.vd-legend{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-width:0}
.vd-item{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:12px 14px;border:1px solid transparent;border-radius:12px;animation:vd-item var(--vd-cycle) infinite}
.vd-dot{flex:none;width:12px;height:12px;margin-top:5px;border-radius:4px}
.vd-dot.vd-eff{background:var(--yellow)}
.vd-dot.vd-spec{background:var(--teal)}
.vd-dot.vd-rate{background:var(--blue)}
.vd-dot.vd-un{background:var(--red)}
.vd-label{min-width:0}
.vd-label b{display:block;font-size:.95rem;font-weight:600;color:var(--blue)}
.vd-label span{display:block;margin-top:2px;font-size:.85rem;line-height:1.55;color:var(--muted)}
.vd-s1{animation-delay:0s}
.vd-s2{animation-delay:calc(var(--vd-cycle) * .25)}
.vd-s3{animation-delay:calc(var(--vd-cycle) * .5)}
.vd-s4{animation-delay:calc(var(--vd-cycle) * .75)}
@keyframes vd-arc{0%,1%{opacity:.24}4%,21%{opacity:1}24%,100%{opacity:.24}}
@keyframes vd-panel{0%,1%{opacity:0;transform:translateY(8px)}4%,21%{opacity:1;transform:none}24%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes vd-item{0%,1%{background:transparent;border-color:transparent}4%,21%{background:var(--surface);border-color:var(--line)}24%,100%{background:transparent;border-color:transparent}}
/* Let a reader stop the loop to study one category. */
.value-disk:hover .vd-arc,.value-disk:hover .vd-panel,.value-disk:hover .vd-item,
.value-disk:focus-within .vd-arc,.value-disk:focus-within .vd-panel,.value-disk:focus-within .vd-item{animation-play-state:paused}
/* No loop: show the whole ring at once and drop the centre, which only makes sense
   while one category is singled out. The legend still carries every share. */
@media (prefers-reduced-motion: reduce){
  .vd-arc,.vd-panel,.vd-item{animation:none}
  .vd-arc{opacity:1}
  .vd-center{display:none}
  .vd-item{background:var(--surface);border-color:var(--line)}
}

table{width:100%;border-collapse:collapse;margin-top:34px;font-size:.95rem}
th{text-align:left;color:var(--blue);font-weight:600;padding:12px 14px;border-bottom:2px solid var(--blue);transition:color var(--transition)}
td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text);transition:color var(--transition),border-color var(--transition)}
td:first-child{font-weight:600;color:var(--blue)}
.passage{font-size:1.28rem;line-height:1.85;color:var(--text);font-weight:300;transition:color var(--transition)}
.passage strong{color:var(--blue);font-weight:600}
/* prose list for pillar pages - mirrors the insight-article list rhythm */
.page-list{list-style:none;margin:26px 0;padding:0;max-width:70ch}
.page-list li{position:relative;padding-inline-start:34px;margin-bottom:14px;line-height:1.75;color:var(--text);font-size:1.02rem}
.page-list li::before{content:"";position:absolute;inset-inline-start:7px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--teal);transform:rotate(45deg)}
.page-list strong{color:var(--blue);font-weight:600}
.page-list.numbered{counter-reset:step}
.page-list.numbered li{counter-increment:step;padding-inline-start:44px;margin-bottom:18px}
.page-list.numbered li::before{content:counter(step);top:1px;width:26px;height:26px;inset-inline-start:0;border-radius:50%;background:color-mix(in srgb,var(--teal) 15%,var(--surface));border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);color:var(--teal-ink);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;transform:none}
.img-slot{background:linear-gradient(135deg,#eef3f8,#e4ecf4);border-radius:16px;min-height:280px;display:flex;align-items:center;justify-content:center;color:#8aa0b8;font-size:.85rem;text-align:center;padding:20px;margin:56px 0}

/* ---------- dark band ---------- */
.band{background:linear-gradient(135deg,#16294a,var(--blue));color:#fff;padding:110px 0;position:relative;overflow:hidden}
.band h2{color:#fff;font-size:2rem}
.band p{color:#c9d6e6;max-width:640px;margin-top:20px;font-size:1.1rem;position:relative;z-index:2}
.band .btn{background:var(--teal)}
.band .btn:hover{background:#fff;color:var(--blue)}
.band .disk{opacity:.16;filter:none}

/* ---------- footer ---------- */
footer{padding:72px 0 56px;background:#12233f;color:#c4d1e0;font-size:.88rem}
.foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.footlogo{height:40px;width:auto}
.footlinks{display:flex;gap:22px;flex-wrap:wrap}
.footlinks a{color:#c4d1e0}
.footlinks a:hover{color:var(--teal)}

/* ---------- footer top row: brand + subscribe ---------- */
.foot-top{display:grid;grid-template-columns:1.35fr 1fr;gap:40px 72px;align-items:start;padding-bottom:46px;margin-bottom:46px;border-bottom:1px solid #24385a}
.foot-tag{margin-top:18px;max-width:420px;font-size:.95rem;line-height:1.65;color:#c4d1e0}
.foot-subscribe h4{color:#fff;font-size:1rem;font-weight:600;margin-bottom:8px}
.foot-subscribe p{color:#8fa2ba;font-size:.88rem;line-height:1.6}
.subscribe-form{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.subscribe-form input{flex:1;min-width:200px;background:rgba(255,255,255,.06);border:1px solid rgba(196,209,224,.28);border-radius:var(--radius-pill);padding:12px 22px;color:#fff;font-family:inherit;font-weight:300;font-size:.9rem;transition:border-color var(--transition),background var(--transition)}
.subscribe-form input::placeholder{color:#8fa2ba}
.subscribe-form input:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.1)}
.subscribe-form.error input{border-color:var(--red)}
.subscribe-btn{flex:none;background:var(--teal);color:#07111f;border:none;padding:12px 26px;border-radius:var(--radius-pill);font-family:inherit;font-weight:600;font-size:.86rem;cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}
.subscribe-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.subscribe-form.done .subscribe-btn{background:var(--green);color:#0d1a0a;pointer-events:none;transform:none}
.subscribe-msg{display:none;margin-top:10px;font-size:.8rem;opacity:0;overflow:hidden;transition:opacity var(--transition)}
.subscribe-msg.show{display:block;opacity:1}
.subscribe-msg.error{color:#ffb0b0}
.subscribe-msg.success{color:#a9d89b}
@media(max-width:480px){.subscribe-form input{min-width:0;flex-basis:100%}.subscribe-btn{flex-basis:100%}}
@media(max-width:860px){.foot-top{grid-template-columns:1fr;gap:36px}}

/* ---------- footer bottom row: social + system status ---------- */
.foot-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-social{display:flex;gap:10px}
.foot-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(196,209,224,.28);color:#c4d1e0;transition:background var(--transition),border-color var(--transition),color var(--transition),transform var(--transition)}
.foot-social a svg{width:18px;height:18px}
.foot-social a:hover{background:var(--teal);border-color:var(--teal);color:#07111f;opacity:1;transform:translateY(-2px)}
.foot-status{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:var(--radius-pill);border:1px solid rgba(127,176,105,.35);background:rgba(127,176,105,.1);color:#a5d494;font-size:.78rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.status-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.status-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:status-pulse 2.4s cubic-bezier(.2,.6,.2,1) infinite}
@keyframes status-pulse{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion: reduce){.status-dot::before{animation:none}}
/* States driven by /status.json, applied in pa3.js. The default green above is the
   operational case, so an unstyled or unscripted page still renders correctly. */
.foot-status.is-degraded{border-color:rgba(245,179,36,.42);background:rgba(245,179,36,.12);color:#f3c766}
.foot-status.is-degraded .status-dot,.foot-status.is-degraded .status-dot::before{background:var(--yellow)}
.foot-status.is-outage{border-color:rgba(224,79,79,.45);background:rgba(224,79,79,.14);color:#f0a3a3}
.foot-status.is-outage .status-dot,.foot-status.is-outage .status-dot::before{background:var(--red)}
.foot-status.is-outage .status-dot::before{animation-duration:1.2s}
.foot-status.is-unknown{border-color:rgba(148,163,184,.35);background:rgba(148,163,184,.12);color:#b9c4d2}
.foot-status.is-unknown .status-dot{background:#94a3b8}
.foot-status.is-unknown .status-dot::before{animation:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* faq */
details.faq{border-bottom:1px solid var(--line);padding:20px 0;transition:border-color var(--transition)}
details.faq summary{cursor:pointer;font-weight:600;color:var(--blue);font-size:1.05rem;list-style:none;transition:color var(--transition)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--teal);font-size:1.3rem;font-weight:300}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:14px;color:var(--muted)}
.faq-block{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq-layout{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:56px;align-items:start}
.faq-intro{position:sticky;top:118px}
.faq-intro p{margin-top:18px;color:var(--muted);font-size:1rem;line-height:1.75}
.faq-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:8px 28px}
.faq-list details.faq:last-child{border-bottom:0}
[dir="rtl"] details.faq summary::after{float:left}
@media(max-width:860px){
  .faq-layout{grid-template-columns:1fr;gap:28px}
  .faq-intro{position:static}
  .faq-list{padding:4px 20px}
}

@media(max-width:640px){
  section{padding:64px 0}
  .hero{padding:100px 0 70px}
  h1{font-size:1.9rem}
  .lead{font-size:1.08rem}
  .passage{font-size:1.12rem}
  .band{padding:76px 0}
}

/* ---------- polish ---------- */
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
img{max-width:100%}

/* ---------- founders ---------- */
.founders{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
@media(max-width:860px){.founders{grid-template-columns:1fr}}
.founder-photo{width:116px;height:116px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Comfortaa',cursive;font-size:1.5rem;font-weight:700;margin-bottom:22px;overflow:hidden;box-shadow:0 14px 34px rgba(27,55,100,.22)}
.founder-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.founder h3{margin-bottom:2px}
/* teal-ink, not teal: this is .85rem uppercase with wide tracking, the worst case
   for a light hue on white. Same family, passes on the surface it sits on. */
.founder .role{color:var(--teal-ink);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;display:block}

/* ---------- founders deck ---------- */
/* Two ~1,400-character first-person notes side by side is the least inviting way to
   read either. This is a paper-stack deck: one note in front, the other peeking
   behind, swipe or pick a founder from the switch row. Enhancement only - pa3.js
   adds .is-ready, and without it both cards render as the plain two-column grid
   with the full text, so nothing is behind an interaction for a crawler or a reader
   without JS. Both cards stay in the DOM and the a11y tree at every state. */
.founder-deck{--fd-dir:1;--fd-rot:3.5deg;--fd-off:3%;display:grid;grid-template-columns:repeat(2,1fr);gap:36px;margin-top:34px}
[dir="rtl"] .founder-deck{--fd-dir:-1}
@media(max-width:860px){.founder-deck{grid-template-columns:1fr}}
.fd-switch{display:none}

.founder-deck.is-ready{display:block;max-width:660px;margin-inline:auto}
/* Cards share one grid cell, so the stage takes the height of the tallest and the
   shorter card stretches to fill it - no fixed pixel height to keep in sync. */
.is-ready .fd-stage{display:grid;margin-bottom:26px;touch-action:pan-y}
.is-ready .fd-card{
  grid-area:1/1;box-shadow:var(--shadow-md);
  /* The card in front sits flat. A 1,000-character note read at a tilt is a worse
     read than it is a nicer picture; the cards behind carry the stack instead. */
  transform:translateX(var(--fd-dx,0px))
            rotate(calc(var(--fd-i,0) * var(--fd-rot) + var(--fd-tilt,0deg)))
            translateX(calc(var(--fd-dir) * var(--fd-i,0) * var(--fd-off)))
            scale(calc(1 - var(--fd-i,0) * .03));
  z-index:calc(10 - var(--fd-i,0));
  transition:transform .42s cubic-bezier(.2,.6,.2,1),border-color var(--transition);
}
.is-ready .fd-card[data-fd-front]{cursor:grab}
.is-ready .fd-card[data-fd-front].is-dragging{cursor:grabbing;transition:border-color var(--transition)}
/* A card behind is a blank sheet: only the sliver that peeks past the front card is
   visible, and that sliver reading as stray text would be noise. It stays clickable
   there, which is the affordance that says the stack can be shuffled. */
.is-ready .fd-card:not([data-fd-front]){cursor:pointer;user-select:none}
.is-ready .fd-card:not([data-fd-front])>*{opacity:0;transition:opacity .3s}

.fd-head{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.fd-head .founder-photo{flex:none;width:88px;height:88px;font-size:1.15rem;margin-bottom:0}
.fd-name{min-width:0}
.fd-name h3{margin-bottom:5px}
.fd-name .role{margin-bottom:0}
/* On a phone the wrap gutter is all the room the stack has to lean into, so the
   lean gets smaller and the stage gives up some width for it - otherwise the card
   behind is pushed past the viewport edge and only html{overflow-x:clip} saves it. */
@media(max-width:560px){
  .founder-deck{--fd-rot:2deg;--fd-off:2%}
  .is-ready .fd-stage{margin-inline-end:16px}
  .fd-head{gap:16px}
  .fd-head .founder-photo{width:72px;height:72px;font-size:1rem}
}

.is-ready .fd-quote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;line-clamp:9;overflow:hidden}
.is-ready .fd-quote.has-more{-webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent);mask-image:linear-gradient(to bottom,#000 74%,transparent)}
.is-ready .fd-quote.is-open{display:block;-webkit-line-clamp:unset;line-clamp:unset;-webkit-mask-image:none;mask-image:none}

/* An author display value outranks the UA's [hidden]{display:none}, so say it here:
   the button is hidden whenever the quote fits, and must take no space either. */
.fd-more[hidden]{display:none}
.fd-more{display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:11px 0;min-height:44px;background:none;border:0;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--teal-ink);cursor:pointer}
.fd-more::after{content:"";width:7px;height:7px;margin-block-start:-4px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg);transition:transform var(--transition)}
.fd-more[aria-expanded="true"]::after{margin-block-start:3px;transform:rotate(-135deg)}

.is-ready .fd-switch{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none}
@media(max-width:560px){.is-ready .fd-switch{grid-template-columns:1fr}}
.fd-tab{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:12px 16px;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);font-family:inherit;cursor:pointer;transition:border-color var(--transition),background var(--transition)}
.fd-tab:hover{border-color:color-mix(in srgb,var(--blue) 24%,var(--line))}
.fd-tab[aria-pressed="true"]{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 8%,var(--surface))}
.fd-chip{flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Comfortaa',cursive;font-size:.72rem;font-weight:700}
.fd-tab-text{min-width:0;line-height:1.35}
.fd-tab-text b{display:block;color:var(--blue);font-size:.88rem;font-weight:600}
/* Direct child only: the name can carry an inline qualifier span ("MBA"), and a
   descendant selector here would turn that into a block on its own line. */
.fd-tab-text>span{display:block;color:var(--muted);font-size:.75rem;font-weight:400;text-transform:none;letter-spacing:0}

@media (prefers-reduced-motion: reduce){
  .is-ready .fd-card{transform:none;transition:none}
  .is-ready .fd-card:not([data-fd-front]){opacity:0}
  .is-ready .fd-card:not([data-fd-front])>*{transition:none}
  .fd-more::after{transition:none}
}

/* ---------- outbound CTA ---------- */
/* Hands the reader to a partner site. Deliberately not a second .band: two
   full-width dark closes on one page compete, and the page keeps exactly one
   terminal call to action of its own. A panel in the flow instead. */
.cta-out{display:flex;align-items:flex-start;gap:28px;padding:38px 34px;background:var(--soft);border:1px solid var(--line);border-inline-start:3px solid var(--teal);border-radius:var(--radius-md)}
@media(max-width:640px){.cta-out{flex-direction:column;gap:22px;padding:30px 24px}}
.cta-out-mark{flex:none;width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Comfortaa',cursive;font-size:1rem;font-weight:700;box-shadow:0 14px 34px rgba(27,55,100,.2)}
.cta-out-body{min-width:0}
.cta-out h2{font-size:1.5rem}
.cta-out p{color:var(--muted);max-width:52ch;margin-top:14px;font-size:1.02rem}
/* Label length varies a lot across the nine languages ("Kunjungi g2gdealdesign.com"
   is half again the English), so the pill wraps rather than overflowing a phone. */
.cta-out .btn{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;max-width:100%;margin-top:26px;text-align:center}
.cta-out-arrow{flex:none}
[dir="rtl"] .cta-out-arrow{transform:scaleX(-1)}
.cta-out-note{display:block;margin-top:12px;color:var(--muted);font-size:.8rem}

/* ---------- legal pages & footer legal row ---------- */
.foot-legal{border-top:1px solid #24385a;margin-top:36px;padding-top:22px;display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:space-between;align-items:center;color:#8fa2ba;font-size:.8rem}
.foot-legal a{color:#8fa2ba}
.foot-legal a:hover{color:var(--teal)}
.legal h2{margin-top:48px;font-size:1.35rem;font-weight:600}
.legal p,.legal li{color:var(--muted);margin-top:12px;font-size:.98rem}
.legal ul{margin:10px 0 0 22px}
dl.gloss dt{font-weight:600;color:var(--blue);margin-top:24px;font-size:1.02rem}
dl.gloss dd{margin:6px 0 0;color:var(--muted)}

/* ---------- Workbench Ai lockup ---------- */
.wb-lockup{display:inline-flex;align-items:center;gap:16px}
.wb-badge{flex:none;width:58px;height:58px;border:2.5px solid var(--blue);border-radius:15px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:700;font-size:1.6rem;letter-spacing:.01em;background:var(--surface);transition:all var(--transition)}
.wb-badge em{font-style:normal;color:var(--teal)}
.wb-text{line-height:1.15}
.wb-name{font-size:1.85rem;font-weight:300;color:var(--blue);letter-spacing:-.3px;transition:color var(--transition)}
.wb-name b{font-weight:600}
.wb-pay{display:block;font-size:.7rem;color:var(--teal);letter-spacing:.2em;text-transform:lowercase;margin-top:3px}
.wb-lockup.small{gap:10px}
.wb-lockup.small .wb-badge{width:36px;height:36px;border-width:2px;border-radius:10px;font-size:1rem}
.wb-lockup.small .wb-name{font-size:1.15rem}
.wb-lockup.small .wb-pay{font-size:.6rem}
.band .wb-badge{background:transparent;border-color:#fff;color:#fff}
.band .wb-badge em{color:var(--teal)}
.band .wb-name{color:#fff}

/* ---------- Program strip ---------- */
.program-strip{display:flex;align-items:center;gap:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px 32px;box-shadow:0 2px 12px rgba(27,55,100,.06);transition:all var(--transition)}
.program-strip img{height:44px;width:auto;flex:none}
.program-strip p{color:var(--muted);font-size:.97rem;margin:0}
@media(max-width:700px){.program-strip{flex-direction:column;align-items:flex-start;gap:16px}}

/* ---------- navigation emphasis ---------- */
header nav a{font-weight:500}
.go{font-weight:600;display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.go:hover{transform:translateX(4px);opacity:1}
.btn.quiet::after{content:"  ›";font-weight:600}

/* ---------- footer sitemap ---------- */
.footgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;align-items:start}
@media(max-width:860px){.footgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footgrid{grid-template-columns:1fr}}
footer .footgrid h4{color:#fff;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
footer .footgrid a{display:block;color:#c4d1e0;margin-bottom:9px;font-size:.9rem}
footer .footgrid a::before{content:"› ";color:var(--teal);font-weight:600}
footer .footgrid a:hover{color:var(--teal);opacity:1}
.footbrand span{display:block;margin-top:14px;font-size:.85rem;color:#8fa2ba}

/* ---------- blog index ---------- */
.blog-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;max-width:820px}
.blog-controls a{display:inline-block;white-space:nowrap;border:1px solid var(--line);background:rgba(255,255,255,.72);color:var(--blue);border-radius:var(--radius-pill);padding:8px 16px;font-size:.84rem;font-weight:600;backdrop-filter:blur(10px)}
.blog-controls a:hover{background:var(--blue);color:#fff;opacity:1}
.blog-feature-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:24px;margin-top:44px}
.blog-feature-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.blog-feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.blog-feature-card.primary{grid-row:span 2}
.blog-feature-card a{display:grid;grid-template-rows:auto 1fr;color:inherit;height:100%}
.blog-feature-card.primary a{grid-template-rows:minmax(310px,44vh) 1fr}
.blog-feature-image{min-height:185px;background-size:cover;background-position:center}
.blog-feature-image.contain{background-size:contain;background-repeat:no-repeat;background-color:#eef6f8}
.blog-feature-content{padding:28px}
.blog-meta{display:block;color:var(--teal);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.blog-feature-content h3,.blog-list-card h3{font-size:1.18rem;margin-bottom:12px}
.blog-feature-card.primary h3{font-size:1.55rem}
.blog-feature-content p,.blog-list-card p{color:var(--muted);font-size:.96rem}
.blog-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--surface)}
.blog-list-card{padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);transition:background var(--transition)}
.blog-list-card:hover{background:var(--soft)}
.blog-list-card .go{display:inline-block;margin-top:18px}
.article-byline{margin-top:18px;color:var(--muted);font-size:.9rem;font-weight:600;letter-spacing:.01em}
.article-byline a{color:var(--teal-ink)}
@media(max-width:860px){
  .blog-feature-grid,.blog-list{grid-template-columns:1fr}
  .blog-feature-card.primary{grid-row:auto}
  .blog-feature-card.primary a{grid-template-rows:minmax(220px,34vh) 1fr}
}

/* ============================================================
   single insight article (templated post)
   ============================================================ */
/* compact editorial header instead of the full 82vh marketing hero */
.insight-article .hero-split{min-height:auto;padding:118px 0 62px;overflow:hidden}
.insight-article .hero-split .photo{width:56%;-webkit-mask-image:linear-gradient(to left,#000 38%,transparent 97%);mask-image:linear-gradient(to left,#000 38%,transparent 97%)}
.insight-article .hero-split .kicker{color:var(--teal-ink)}
.insight-article .hero-split h1{max-width:16ch;margin-top:6px}
.insight-article .hero-split .lead{max-width:60ch}
@media(max-width:860px){.insight-article .hero-split{padding:96px 0 44px}.insight-article .hero-split .photo{width:100%}}

/* the reading column */
.insight-article .narrow{padding-block:64px 8px}

/* --- prose rhythm (direct children of the reading column only) --- */
.insight-article .narrow>p{font-size:1.06rem;line-height:1.82;color:var(--text);margin:0 0 24px;max-width:68ch}
.insight-article .narrow>p:first-of-type{font-size:1.16rem;line-height:1.75;color:var(--ink)}
.insight-article .narrow strong{color:var(--blue);font-weight:600}
.insight-article .narrow a:not(.btn){color:var(--teal-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--teal) 42%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--transition),text-decoration-color var(--transition)}
.insight-article .narrow a:not(.btn):hover{color:var(--blue);text-decoration-color:var(--blue);opacity:1}
.insight-article .narrow>h2{font-size:clamp(1.42rem,2.4vw,1.72rem);font-weight:600;color:var(--blue);letter-spacing:-.01em;line-height:1.28;margin:0;padding:44px 0 0;scroll-margin-top:96px}
.insight-article .narrow>h2::before{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--teal);margin-bottom:22px}
.insight-article .narrow>h2+p,.insight-article .narrow>h2+ul,.insight-article .narrow>h2+ol{margin-top:18px}
.insight-article .narrow>h3{font-size:1.14rem;font-weight:600;color:var(--blue);margin:30px 0 10px;scroll-margin-top:96px}

/* --- body lists with branded markers --- */
.insight-article .narrow>ul,.insight-article .narrow>ol{list-style:none;margin:0 0 26px;padding:0;max-width:70ch}
.insight-article .narrow>ul>li,.insight-article .narrow>ol>li{position:relative;padding-inline-start:34px;margin-bottom:14px;line-height:1.75}
.insight-article .narrow>ul>li::before{content:"";position:absolute;inset-inline-start:7px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--teal);transform:rotate(45deg)}
.insight-article .narrow>ol{counter-reset:step}
.insight-article .narrow>ol>li{counter-increment:step;padding-inline-start:44px;margin-bottom:18px}
.insight-article .narrow>ol>li::before{content:counter(step);position:absolute;inset-inline-start:0;top:1px;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--teal) 15%,var(--surface));border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);color:var(--teal-ink);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}

/* --- quick answer callout --- */
.quick-answer{margin:0 0 34px;padding:24px 28px;background:color-mix(in srgb,var(--teal) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--teal) 20%,var(--line));border-inline-start:4px solid var(--teal);border-radius:var(--radius-md)}
.quick-answer h2{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-ink);margin:0 0 8px}
.quick-answer p{margin:0;font-size:1.05rem;line-height:1.7;color:var(--ink)}
.quick-answer strong{color:var(--blue)}

/* --- table of contents (in-page navigation) --- */
.article-toc{position:relative;margin:0 0 44px;padding:22px 24px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-md)}
.article-toc h2{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-ink);margin:0 0 12px}
.article-toc ol{counter-reset:toc;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.article-toc li{counter-increment:toc;min-width:0}
.article-toc a{display:flex;align-items:baseline;gap:12px;min-width:0;padding:9px 10px;border-radius:9px;color:var(--blue);font-weight:500;font-size:.98rem;line-height:1.4;white-space:normal;overflow-wrap:break-word;text-decoration:none;transition:background var(--transition),color var(--transition)}
.article-toc a::before{content:counter(toc,decimal-leading-zero);flex:none;min-width:20px;color:var(--teal-ink);font-weight:700;font-size:.78rem;font-variant-numeric:tabular-nums}
.article-toc a:hover,.article-toc a.is-active{background:var(--surface);color:var(--teal-ink);box-shadow:var(--shadow-sm)}
.article-toc a.is-active::before{color:var(--blue)}
.toc-journey{position:absolute;inset-block:62px 24px;inset-inline-start:19px;width:4px;pointer-events:none}
.toc-journey svg{display:block;width:100%;height:100%;overflow:visible}
.toc-journey-track,.toc-journey-progress{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.toc-journey-track{stroke:color-mix(in srgb,var(--teal) 18%,var(--line));stroke-width:1.5}
.toc-journey-progress{stroke:var(--teal);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .16s linear}
.article-toc-target{scroll-margin-top:calc(72px + 28px)}
.article-toc-target:focus{outline:3px solid color-mix(in srgb,var(--teal) 60%,transparent);outline-offset:8px;border-radius:4px}
@media (prefers-reduced-motion: reduce){.toc-journey-progress{transition:none}}

/* --- comparison table --- */
.insight-article .narrow>table{width:100%;border-collapse:separate;border-spacing:0;margin:6px 0 34px;font-size:.95rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.insight-article .narrow>table caption{caption-side:top;text-align:start;font-size:.8rem;color:var(--muted);margin-bottom:12px;line-height:1.5}
.insight-article .narrow>table th,.insight-article .narrow>table td{padding:13px 16px;text-align:start;vertical-align:top;line-height:1.55;border-bottom:1px solid var(--line)}
.insight-article .narrow>table thead th{background:var(--soft);color:var(--blue);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.insight-article .narrow>table tbody th[scope="row"]{color:var(--blue);font-weight:600;width:26%}
.insight-article .narrow>table td+td,.insight-article .narrow>table th+th,.insight-article .narrow>table th+td{border-inline-start:1px solid var(--line)}
.insight-article .narrow>table thead th:last-child,.insight-article .narrow>table tbody td:last-child{background:color-mix(in srgb,var(--teal) 6%,var(--surface))}
.insight-article .narrow>table tbody tr:last-child th,.insight-article .narrow>table tbody tr:last-child td{border-bottom:0}

/* --- author box --- */
.author-box{margin:52px 0 0;padding:24px 28px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-md)}
.author-box p{margin:0 0 6px;font-size:.92rem;color:var(--muted);line-height:1.6}
.author-box p:first-child{margin-bottom:2px}
.author-box p:first-child strong{color:var(--blue);font-size:1.02rem;font-weight:600}
.author-box a{color:var(--teal-ink);font-weight:600}

/* --- FAQ (styled Q&A) --- */
.article-faq{margin:56px 0 0;padding:40px 0 0;border-top:1px solid var(--line)}
.article-faq>h2{font-size:clamp(1.42rem,2.4vw,1.72rem);font-weight:600;color:var(--blue);margin:0 0 8px}
.article-faq h3{position:relative;font-size:1.06rem;font-weight:600;color:var(--blue);margin:28px 0 8px;padding:24px 0 0;padding-inline-start:30px;border-top:1px solid var(--line)}
.article-faq h3:first-of-type{border-top:0;padding-top:8px}
.article-faq h3::before{content:"Q";position:absolute;inset-inline-start:0;top:22px;color:var(--teal-ink);font-weight:700;font-size:.95rem}
.article-faq h3:first-of-type::before{top:6px}
.article-faq p{margin:0;padding-inline-start:30px;color:var(--text);line-height:1.75}

/* --- summary / key takeaways --- */
.article-summary{margin:48px 0 0;padding:30px 32px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 4%,var(--surface)),color-mix(in srgb,var(--teal) 6%,var(--surface)));border:1px solid var(--line);border-radius:var(--radius-md)}
.article-summary h2{font-size:1.24rem;font-weight:600;color:var(--blue);margin:0 0 18px}
.article-summary ul{list-style:none;margin:0 0 22px;padding:0}
.article-summary li{position:relative;padding-inline-start:34px;margin-bottom:14px;line-height:1.68;color:var(--ink)}
.article-summary li::before{content:"";position:absolute;inset-inline-start:2px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m9.55 17.6-4.9-4.9 1.4-1.42 3.5 3.5 7.9-7.9 1.42 1.4z'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m9.55 17.6-4.9-4.9 1.4-1.42 3.5 3.5 7.9-7.9 1.42 1.4z'/%3E%3C/svg%3E") center/16px no-repeat}
.article-summary .btn{margin-top:4px}
.article-summary>p{margin:14px 0 0;font-size:.95rem;color:var(--muted)}
.article-summary>p:has(.btn){margin-top:0}

/* --- references --- */
.article-references{margin:48px 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
.article-references h2{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 14px}
.article-references ol{margin:0;padding-inline-start:22px}
.article-references li{font-size:.9rem;color:var(--muted);margin-bottom:7px;line-height:1.6}
.article-references a{color:var(--teal-ink);font-weight:600}

/* ---------- not found page ---------- */
.not-found-page{min-height:100vh;background:var(--bg)}
.not-found-hero{position:relative;min-height:calc(100vh - 86px);display:flex;align-items:center;overflow:hidden;padding:108px 0;background:radial-gradient(circle at 16% 18%,rgba(69,181,170,.14),transparent 32%),linear-gradient(135deg,var(--bg) 0,var(--soft) 100%)}
.not-found-hero.v2::before{content:"";position:absolute;inset:auto -12vw -24vw auto;width:58vw;aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--teal) 26%,transparent);background:radial-gradient(circle,rgba(143,199,232,.14),transparent 62%);z-index:0}
.not-found-orbit{position:absolute;inset:0;pointer-events:none;z-index:0}
.not-found-orbit span{position:absolute;border-radius:999px;border:1px solid rgba(69,181,170,.28);background:rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.not-found-orbit span:nth-child(1){width:180px;height:180px;right:12%;top:18%}
.not-found-orbit span:nth-child(2){width:74px;height:74px;right:34%;bottom:22%;background:rgba(245,179,36,.12)}
.not-found-orbit span:nth-child(3){width:112px;height:112px;left:7%;bottom:13%;background:rgba(127,176,105,.1)}
.not-found-wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:center}
.not-found-copy{max-width:720px}
.not-found-code{font-size:clamp(5.5rem,16vw,13rem);line-height:.82;font-weight:700;color:var(--blue);letter-spacing:0;margin:0 0 22px;font-family:'Comfortaa',cursive}
.not-found-copy h1{max-width:760px}
.not-found-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.not-found-actions .btn{margin-top:0}
.not-found-panel{background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:30px;backdrop-filter:blur(16px)}
.panel-eyebrow{display:block;color:var(--teal);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;margin-bottom:8px}
.not-found-panel h2{font-size:1.25rem;margin-bottom:18px}
.not-found-panel a{display:block;padding:16px 0;border-top:1px solid var(--line);color:var(--text)}
.not-found-panel a:first-of-type{border-top:0}
.not-found-panel a:hover{opacity:1}
.not-found-panel b{display:block;color:var(--blue);font-size:.98rem}
.not-found-panel span{display:block;color:var(--muted);font-size:.86rem;line-height:1.55;margin-top:2px}
@media(max-width:860px){
  .not-found-hero{min-height:auto;padding:82px 0}
  .not-found-wrap{grid-template-columns:1fr}
  .not-found-panel{padding:22px}
}

/* ---------- footer language selector ---------- */
.footer-language-panel{margin-top:34px;padding-top:26px;border-top:1px solid #24385a}
.footer-language-panel h4{color:#fff;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.footer-language-list{display:flex;flex-wrap:wrap;gap:8px}
.footer-language-list a{display:inline-flex;align-items:center;border:1px solid rgba(196,209,224,.26);border-radius:var(--radius-pill);padding:7px 12px;color:#d6e2f0;font-size:.82rem;background:rgba(255,255,255,.03)}
.footer-language-list a::before{content:none}
.footer-language-list a[aria-current="true"]{background:var(--teal);border-color:var(--teal);color:#07111f;font-weight:700}

/* ===== V3.1 NEW ENHANCEMENTS ===== */

/* ---------- back-to-top button ---------- */
.back-to-top{
  position:fixed;bottom:32px;right:32px;z-index:50;
  width:48px;height:48px;border-radius:50%;
  background:var(--blue);color:#fff;border:none;
  cursor:pointer;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(20px);
  transition:opacity var(--transition),transform var(--transition),background var(--transition),box-shadow var(--transition);
  box-shadow:0 4px 16px rgba(27,55,100,.25);
}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--teal);transform:translateY(-3px);box-shadow:0 8px 24px rgba(27,55,100,.35)}

/* ---------- cookie consent banner ---------- */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:98;
  background:var(--surface);border-top:1px solid var(--line);
  padding:16px 0;transform:translateY(100%);
  transition:transform var(--transition),background var(--transition),border-color var(--transition);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
.cookie-banner.visible{transform:translateY(0)}
.cookie-consent-inner{display:flex;align-items:center;gap:24px;justify-content:space-between}
.cookie-consent-copy{flex:1;min-width:220px;max-width:760px}
.cookie-consent-copy strong{display:block;color:var(--blue);font-size:.95rem;margin-bottom:3px}
.cookie-banner p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.6}
.cookie-banner p a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-consent-actions{display:flex;align-items:center;gap:10px;flex:none}
.cookie-banner .btn-sm{min-height:44px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;font-weight:600;font-size:.82rem;white-space:nowrap;padding:10px 20px}
.cookie-banner .btn-sm{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.cookie-banner .btn-sm:hover{background:var(--teal);border-color:var(--teal);color:#07111f}
.cookie-banner .cookie-reject{background:transparent;color:var(--blue)}
@media(max-width:640px){.cookie-consent-inner{align-items:stretch;flex-direction:column;gap:14px}.cookie-consent-actions{width:100%}.cookie-consent-actions button{flex:1}}

/* ---------- footer logo subtle adjustment in dark mode ---------- */

/* ---------- insight cards enhanced hover ---------- */
.card{position:relative}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-md);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
  box-shadow:0 0 0 2px var(--teal);
}
.card:hover::after{opacity:.12}

/* ===== CONTACT FORM ===== */
.contact-section{padding:100px 0;background:var(--soft)}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.contact-info h2{font-size:1.75rem;margin-bottom:16px}
.contact-info .lead{max-width:480px}
.contact-details{margin-top:34px;display:flex;flex-direction:column;gap:22px}
.contact-detail-item{display:flex;align-items:flex-start;gap:14px}
.contact-detail-icon{flex:none;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--teal) 12%,transparent);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:1.2rem}
.contact-detail-text strong{display:block;color:var(--blue);font-size:.95rem;font-weight:600}
.contact-detail-text span{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}

/* Contact form card */
.contact-form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:38px 36px;transition:background var(--transition),border-color var(--transition)}
@media(max-width:640px){.contact-form-card{padding:26px 20px}}

/* Form purpose toggle */
.form-purpose-toggle{display:flex;gap:0;margin-bottom:28px;background:var(--soft);border-radius:var(--radius-pill);padding:4px;border:1px solid var(--line)}
.form-purpose-toggle button{flex:1;padding:11px 20px;border:none;border-radius:var(--radius-pill);background:transparent;color:var(--muted);font-family:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.form-purpose-toggle button.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(27,55,100,.18)}
.form-purpose-toggle button:hover:not(.active){color:var(--blue)}

/* Form inputs shared */
.contact-form{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-weight:600;font-size:.82rem;color:var(--blue);letter-spacing:.02em}
.form-group .required{color:var(--red);margin-left:2px}
.contact-form input:not([type="radio"]):not([type="checkbox"]),
.contact-form select,
.contact-form textarea{width:100%;padding:12px 16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:inherit;font-size:.95rem;font-weight:300;transition:all var(--transition);resize:vertical}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(69,181,170,.12)}
.contact-form input.error,.contact-form select.error,.contact-form textarea.error{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,79,79,.1)}
.contact-form textarea{min-height:110px}
.contact-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%231B3764' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.contact-form .form-hint{font-size:.75rem;color:var(--muted);margin-top:-10px}
.form-error-msg{font-size:.76rem;color:var(--red);display:none;margin-top:-8px}
.form-error-msg.visible{display:block}

/* Calendar */
.calendar-container{margin-top:8px;display:none}
.calendar-container.visible{display:block}
.calendar-widget{background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition)}
.calendar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--blue);color:#fff}
.calendar-header button{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background var(--transition)}
.calendar-header button:hover{background:rgba(255,255,255,.18)}
.calendar-header .cal-month-label{font-weight:600;font-size:.95rem;letter-spacing:.03em}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.calendar-grid .day-name{padding:10px 4px;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:var(--soft)}
.calendar-grid .day-cell{padding:8px 4px;font-size:.88rem;cursor:pointer;border:1px solid transparent;border-radius:8px;transition:all var(--transition);color:var(--text);position:relative}
.calendar-grid .day-cell:not(.empty):hover{background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:var(--teal)}
.calendar-grid .day-cell.empty{pointer-events:none;color:transparent}
.calendar-grid .day-cell.weekend{color:var(--muted);opacity:.45;pointer-events:none}
.calendar-grid .day-cell.past{opacity:.35;pointer-events:none}
.calendar-grid .day-cell.selected{background:var(--teal);color:#07111f;font-weight:700;border-color:var(--teal)}
.calendar-grid .day-cell.today{font-weight:700;border-color:var(--blue)}

/* Time slots */
.time-slots{margin-top:18px;display:none}
.time-slots.visible{display:block}
.time-slots-label{font-weight:600;font-size:.82rem;color:var(--blue);margin-bottom:12px;letter-spacing:.02em}
.time-slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:560px){.time-slots-grid{grid-template-columns:repeat(2,1fr)}}
.time-slot{padding:10px 8px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);text-align:center;font-size:.84rem;font-weight:500;cursor:pointer;transition:all var(--transition);color:var(--text)}
.time-slot:hover{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 8%,transparent)}
.time-slot.selected{background:var(--teal);color:#07111f;border-color:var(--teal);font-weight:700}
.time-slot:disabled{opacity:.35;pointer-events:none}

/* Selected slot summary */
.booking-summary{display:none;margin-top:16px;padding:14px 18px;background:color-mix(in srgb,var(--teal) 10%,transparent);border:1px solid color-mix(in srgb,var(--teal) 28%,transparent);border-radius:var(--radius-sm);font-size:.88rem;color:var(--blue)}
.booking-summary.visible{display:block}
.booking-summary strong{color:var(--teal)}

/* Captcha placeholder */
.captcha-wrapper{margin-top:6px;padding:22px;background:var(--soft);border:1.5px dashed var(--line);border-radius:var(--radius-sm);text-align:center;transition:all var(--transition)}
.captcha-placeholder{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:.84rem}
.captcha-placeholder .captcha-icon{font-size:1.6rem}
.captcha-placeholder span{font-weight:600;color:var(--blue)}
.captcha-check{display:flex;align-items:center;gap:10px;justify-content:center}
.captcha-check input[type="checkbox"]{width:20px;height:20px;accent-color:var(--teal);cursor:pointer}
.captcha-check label{font-size:.85rem;color:var(--muted);cursor:pointer}
.captcha-verified{display:none;color:var(--green);font-weight:600;font-size:.88rem;align-items:center;gap:8px;justify-content:center}
.captcha-verified.visible{display:flex}
.captcha-error{display:none;color:var(--red);font-size:.82rem;text-align:center;margin-top:10px}
.captcha-error.visible{display:block}
.honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none;height:0;width:0;overflow:hidden}

/* Submit */
.form-submit-wrapper{margin-top:8px}
.contact-form .submit-btn{width:100%;padding:16px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-pill);font-family:inherit;font-weight:600;font-size:1rem;cursor:pointer;transition:all var(--transition)}
.contact-form .submit-btn:hover{background:var(--teal);transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,55,100,.25)}
.contact-form .submit-btn:disabled{opacity:.55;pointer-events:none}
.form-success{display:none;text-align:center;padding:40px 20px}
.form-success.visible{display:block}
.form-success .success-icon{font-size:3rem;margin-bottom:16px}
.form-success h3{color:var(--green);margin-bottom:10px}
.form-success p{color:var(--muted)}
.form-global-error{display:none;text-align:center;padding:12px;background:rgba(224,79,79,.08);border:1px solid var(--red);border-radius:var(--radius-sm);color:var(--red);font-size:.86rem;font-weight:500;margin-bottom:16px}
.form-global-error.visible{display:block}

/* ---------- image lazy placeholder ---------- */
img[loading="lazy"]{opacity:0;transition:opacity .5s}
img[loading="lazy"].loaded{opacity:1}

/* ---------- reduced motion user preference ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}