/* BlackBear Consulting. Rebuilt Oct 2026 in a modern SaaS/fintech register: one sans family,
   rounded surfaces, soft shadows, white and mist instead of paper and linen. Navy remains the
   only second colour - it is the action colour, the dark register and the footer, so the page
   never needs an accent hue to tell the eye where to go.
   Selectors are plain classes; build.ps1 scopes them under #bb for the Squarespace version, so
   :root, body, html and the `.js ` prefix must keep the exact shapes Scope-Selector expects. */
:root{
  --paper:#FFFFFF;--mist:#F2F4F7;--mist-2:#E8ECF2;
  --ink:#121820;--body2:#5B6676;--stone:#8A94A3;--line:#E3E7ED;
  --navy:#1E2D47;--navy-2:#2A3C5B;--navy-3:#16223A;
  --on-navy:#F3F5F8;--on-navy-2:#A7B2C3;--navy-line:rgba(243,245,248,.14);
  --warn:#C2553F;--warn-navy:#F0A491;--ok:#2F7A58;--ok-navy:#8FD3AE;--brass:#C9A86A;
  /* One curve for everything a finger or cursor sets in motion. */
  --ease:cubic-bezier(.2,.7,.2,1);--press:120ms cubic-bezier(.2,.7,.2,1);
  --sans:"Albert Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --display:"Libre Caslon Display",Georgia,serif;--serif:var(--sans);
  /* Rounding is a scale, not a value: panels are softer than cards, cards softer than controls. */
  --r-xl:26px;--r-lg:18px;--r:14px;--r-sm:10px;--r-pill:999px;
  --sh-sm:0 1px 2px rgba(18,24,32,.04),0 2px 8px rgba(18,24,32,.045);
  --sh:0 2px 4px rgba(18,24,32,.04),0 14px 32px rgba(18,24,32,.07);
  --sh-lg:0 4px 8px rgba(18,24,32,.04),0 28px 60px rgba(18,24,32,.09);
  --gutter:clamp(20px,5vw,56px);--max:1200px;--header:74px;--section:clamp(64px,8.5vw,116px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
/* Type sizes are in rem so that a reader who has raised their browser's default text size gets it. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:lining-nums;-webkit-tap-highlight-color:transparent}
.bb img,.bb video{display:block;max-width:100%;border:0}
.bb a{color:inherit;text-decoration:none}
.bb p{margin:0;font-size:inherit;line-height:inherit;text-wrap:pretty}
.bb li,.bb dt,.bb dd{font-size:inherit;line-height:inherit}
.bb figure,.bb blockquote,.bb dl,.bb dd{margin:0}
.bb ul,.bb ol{margin:0;padding:0;list-style:none}
.bb h1,.bb h2,.bb h3,.bb h4{font-family:var(--sans);margin:0;text-wrap:balance;text-transform:none;font-style:normal}
/* Tracking is set per size, never once for every heading: a sans tightens as it grows and needs
   opening back up when small. */
.bb h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,5.4vw,4.5rem);line-height:1.04;letter-spacing:-.018em}
.bb h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.012em}
.bb h3{font-weight:600;font-size:1.3125rem;line-height:1.28;letter-spacing:-.012em}
.bb h4{font-weight:600;font-size:1.0625rem;line-height:1.35;letter-spacing:-.008em}
.bb ::selection{background:var(--navy);color:var(--on-navy)}
.bb :focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
.on-navy :focus-visible{outline-color:var(--on-navy)}
.bb .skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:var(--on-navy);padding:10px 16px;z-index:50;border-radius:var(--r-sm)}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* The eyebrow: small, tracked out, uppercase. The references all use one and it is the cheapest
   way to label a section without spending a heading on it. */
.k{font-size:.8125rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);line-height:1.4}
.muted{color:var(--body2)}
.lede{color:var(--body2)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .35s,background .35s}
.site-header.is-scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.93)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header)}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand svg{width:40px;height:auto;flex:0 0 auto}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font-weight:700;font-size:1.1875rem;letter-spacing:-.018em}
.brand small{font-size:.625rem;font-weight:600;letter-spacing:.2em;color:var(--stone);margin-top:3px}
.nav ul{display:flex;align-items:center;gap:30px}
.nav a{font-size:.9375rem;font-weight:500;color:var(--body2);transition:color .2s}
.nav a[aria-current]{color:var(--ink)}
@media(hover:hover){.nav a:hover{color:var(--ink)}}
.nav a:active{opacity:.55}
.bb .lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--body2);transition:border-color .2s,color .2s}
@media(hover:hover){.bb .lang:hover{border-color:var(--navy);color:var(--navy)}}
.bb .lang:active{opacity:.6}
.lang-full{display:none}
.nav-toggle{display:none;align-items:center;gap:8px;background:none;border:0;padding:8px 0;font:inherit;font-size:.9375rem;font-weight:500;color:var(--ink);cursor:pointer}
.nav-toggle:active{opacity:.55}

/* Buttons. The primary is navy, the secondary is a hairline - no third style, and no accent hue. */
.bb .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--navy);color:var(--on-navy);border:1px solid var(--navy);border-radius:var(--r-sm);padding:13px 24px;font-size:.9375rem;font-weight:600;letter-spacing:.002em;cursor:pointer;transition:transform var(--press),background .2s,box-shadow .2s;box-shadow:var(--sh-sm)}
@media(hover:hover){.bb .btn:hover{background:var(--navy-2);box-shadow:var(--sh)}}
.bb .btn:active{transform:translateY(1px)}
.bb .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
@media(hover:hover){.bb .btn--ghost:hover{background:var(--mist);border-color:var(--mist-2);box-shadow:none}}
.on-navy .btn{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)}
@media(hover:hover){.on-navy .btn:hover{background:#fff}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.bb .link{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:600;color:var(--navy);transition:gap .2s var(--ease)}
.bb .link::after{content:"\2192";transition:transform .2s var(--ease)}
@media(hover:hover){.bb .link:hover::after{transform:translateX(4px)}}
.bb .link:active{opacity:.55}

/* ---------- Sections ---------- */
.sec{padding:var(--section) 0}
.sec--linen{background:var(--mist)}
.sec-head{max-width:46ch;margin-bottom:clamp(36px,5vw,60px)}
.sec-head .k{margin-bottom:14px}
.sec-head h2{margin-bottom:0}
.frame{overflow:hidden;border-radius:var(--r-lg);background:var(--mist)}
.frame img{width:100%;height:100%;object-fit:cover}
.bw img,.bw{filter:grayscale(1)}

/* ---------- Hero ---------- */
/* Headline left, a painting right with the product floating on it. The painting carries the
   meaning - the Great Bear is in its sky - and the cards show what the work produces. */
.hero{padding:clamp(28px,4vw,56px) 0 0}
.hero__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin-bottom:22px}
.hero h1 span{display:block;color:var(--stone)}
.hero__lede{max-width:50ch;color:var(--body2);font-size:1.125rem;margin-bottom:30px}
/* Proof tiles. Driven by content, so a tile only exists when there is a real figure for it. */
.stats{display:flex;flex-wrap:wrap;margin-top:36px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.stats div{flex:1 1 150px;min-width:0;padding:18px 22px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:4px;font-size:.8125rem;color:var(--body2);line-height:1.35}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}}

/* Painted plates: one treatment for every painting - rounded, shadowed, cropped to fill. */
.art{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--navy-3);box-shadow:var(--sh-lg)}
.art img{width:100%;height:100%;object-fit:cover}
/* A portrait crop of a landscape canvas, held on the stars of the Great Bear. */
.hero__art{aspect-ratio:5/6}
.hero__art img{object-position:60% 20%}
@media(max-width:900px){.hero__art{aspect-ratio:4/3}}

/* Product cards on the paintings. Opaque white, so they stay legible without a blur. */
.float{position:absolute;background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:0 12px 32px rgba(8,14,28,.32);padding:14px 16px}
.float__k{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;color:var(--body2)}
.float__v{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums}
.float__s{font-size:.75rem;color:var(--stone);margin-top:2px;font-variant-numeric:tabular-nums}
.float--cash{left:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);min-width:220px}
/* Both cards sit on the river; the upper third is left clear because the Great Bear is in it. */
.float--runway{right:clamp(14px,2.4vw,26px);top:47%;width:196px}
.float--runway svg{display:block;width:100%;height:34px;margin-top:6px}
.float--runway path{fill:none;stroke:var(--navy);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media(max-width:520px){.float--runway{display:none}.float--cash{min-width:0}}

/* Live indicator: the status colour always travels with the word Live, never alone. Only the
   ring moves, on transform and opacity. */
.live-dot{position:relative;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2s var(--ease) infinite}
@keyframes ping{from{transform:scale(1);opacity:.55}to{transform:scale(2.8);opacity:0}}

/* Client strip. Names, not logos - the firm has no licensed marks to show. */
.clients{margin-top:clamp(36px,5vw,56px);padding-top:28px;border-top:1px solid var(--line);text-align:center}
.clients .k{color:var(--stone)}
/* Client logos, grey at rest so four different brands read as one row. The linked ones take their
   colour back on hover, which is also the cue that they are links. Each logo sets its own height
   (--h) because a round badge needs more height than a wordmark to look the same size. */
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px clamp(28px,5vw,64px);margin-top:18px}
.logos li>*{display:block;padding:6px;border-radius:var(--r-sm)}
.logos img{height:var(--h,34px);width:auto;filter:grayscale(1);opacity:.6;transition:opacity .2s}
@media(hover:hover){.logos a:hover img{filter:none;opacity:1}}
.logos a:focus-visible img{filter:none;opacity:1}
.logos a:active{opacity:.6}

/* ---------- The Great Bear ---------- */
.bear__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,80px);align-items:center}
.bear .k{margin-bottom:14px}
.bear h2{margin-bottom:20px}
.bear p{color:var(--body2);max-width:58ch}
.bear svg{justify-self:center;width:100%;max-width:300px;height:auto;color:var(--navy)}
@media(max-width:900px){.bear__grid{grid-template-columns:1fr}.bear svg{max-width:200px;order:-1}}

/* ---------- How it works ---------- */
/* A real sequence, so an ordered list; the order reads left to right without numerals. */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,26px)}
/* The vignette sits in normal flow, so the painting grows to fit it in any language at any width.
   Subgrid gives every card the same three rows, so the paintings end on one line regardless. */
.how__card{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.how__art{display:grid;place-items:center;min-height:clamp(220px,22vw,280px);padding:clamp(16px,2.2vw,28px);margin-bottom:20px;border-radius:var(--r-lg);box-shadow:var(--sh)}
.how__art img{position:absolute;inset:0}
.how__card h3{margin-bottom:8px}
.how__card p{color:var(--body2)}
@media(max-width:900px){.how{grid-template-columns:1fr}.how__card:not(:last-child) p{margin-bottom:40px}.how__art{min-height:clamp(220px,50vw,320px)}}
.vig{position:relative;width:min(100%,310px);padding:14px}
.vig .bub{font-size:.75rem;padding:8px 11px}
.vig__srcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.vig__srcs span{padding:7px 2px;border:1px solid var(--line);border-radius:var(--r-sm);text-align:center;font-size:.75rem;font-weight:600;color:var(--body2)}
.vig__hub{position:relative;margin-top:14px;padding:9px 10px;border-radius:var(--r-sm);background:var(--navy);color:var(--on-navy);text-align:center;font-size:.8125rem;font-weight:600}
.vig__hub::before{content:"";position:absolute;left:12%;right:12%;top:-9px;height:8px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0}
.vig__bar{height:6px;margin:10px 0 8px;border-radius:var(--r-pill);background:var(--mist-2);overflow:hidden}
.vig__bar span{display:block;height:100%;background:var(--navy);border-radius:inherit;transform-origin:left center;transition:transform .7s var(--ease)}
.vig__line{font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.vig__exc{margin-top:4px;font-size:.75rem;font-weight:600;color:var(--warn);font-variant-numeric:tabular-nums}
.vig__src{margin-top:8px;font-size:.6875rem;color:var(--stone)}
/* Chat bubbles - the copilot vignette and the Ask BlackBear widget share them. */
.bub{width:fit-content;max-width:92%;padding:9px 12px;border-radius:14px;font-size:.8125rem;line-height:1.45}
.bub--q{margin-left:auto;background:var(--navy);color:var(--on-navy);border-bottom-right-radius:4px}
.bub--a{background:var(--mist);color:var(--ink);border-bottom-left-radius:4px}
.vig .bub--a{margin-top:8px}

/* ---------- Live dashboard ---------- */
.live .sec-head{max-width:60ch}
.live .lede{margin-top:16px}
.dash{background:var(--navy-3);color:var(--on-navy);border-radius:var(--r-xl);padding:clamp(14px,2.2vw,26px);box-shadow:var(--sh-lg)}
.dash__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:.8125rem}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:var(--r-pill);background:rgba(143,211,174,.13);color:var(--ok-navy);font-weight:600}
.dash .live-dot{background:var(--ok-navy)}
.dash__badge{color:var(--on-navy-2)}
.dash__sync{margin-left:auto;color:var(--on-navy-2);font-variant-numeric:tabular-nums}
.dash__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.kpi,.chart,.alerts,.pane{min-width:0;background:var(--navy);border:1px solid var(--navy-line);border-radius:var(--r);padding:16px}
.kpi__l,.alerts__t,.chart figcaption{font-size:.8125rem;color:var(--on-navy-2)}
.kpi__v{margin-top:6px;font-size:clamp(1.3rem,2vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi__d{margin-top:6px;font-size:.75rem;color:var(--on-navy-2);font-variant-numeric:tabular-nums}
/* Delta colour = direction x whether up is good, and always with an arrow, never colour alone. */
.kpi__d .good{color:var(--ok-navy);font-weight:600}
.kpi__d .bad{color:var(--warn-navy);font-weight:600}
.meter{height:6px;margin-top:10px;border-radius:var(--r-pill);background:var(--navy-2);overflow:hidden}
.meter span{display:block;height:100%;background:var(--brass);border-radius:inherit;transform-origin:left center;transition:transform .7s var(--ease)}
/* Bars start empty and fill once they are seen: the meter when the dashboard plays in (main.js), the
   reconciliation bar when its card is revealed. */
.mo .meter span,.js .how__card:not(.in) .vig__bar span{transform:scaleX(0)!important}
.dash__row{display:grid;grid-template-columns:1.65fr 1fr;gap:12px;margin-top:12px}
.chart{position:relative}
.chart figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px}
.legend{display:flex;gap:16px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.sw{display:inline-block;width:16px;height:2px;background:var(--brass);border-radius:2px}
.sw--f{background:repeating-linear-gradient(90deg,var(--brass) 0 4px,transparent 4px 7px)}
.chart svg{display:block;width:100%;height:auto;margin-top:10px;overflow:visible;touch-action:pan-y}
.chart .grid{stroke:var(--navy-line);stroke-width:1}
.chart .ax{fill:var(--on-navy-2);font-size:11px;font-family:var(--sans)}
.chart .ln{fill:none;stroke:var(--brass);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(201,168,106,.55))}
.chart .ln--f{stroke-dasharray:5 5}
/* The area under the line is fine vertical bars that fade toward the axis (pattern built in main.js). */
.chart .area{fill:url(#bb-bars)}
.chart stop{stop-color:var(--brass)}
.chart .dot{fill:var(--brass);stroke:var(--navy);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease)}
.chart .cross{stroke:var(--on-navy-2);stroke-width:1}
.tip{position:absolute;left:0;top:0;z-index:2;pointer-events:none;transform:translate(-50%,calc(-100% - 10px));padding:6px 9px;border-radius:8px;background:#fff;color:var(--ink);font-size:.75rem;font-weight:600;white-space:nowrap;box-shadow:var(--sh);font-variant-numeric:tabular-nums}
.alerts li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 0;border-top:1px solid var(--navy-line);font-size:.875rem;line-height:1.4}
.alerts li:first-child{margin-top:6px}
.al-tag{padding:3px 9px;border-radius:var(--r-pill);font-size:.6875rem;font-weight:600}
.is-warn .al-tag{background:rgba(240,164,145,.14);color:var(--warn-navy)}
.is-ok .al-tag{background:rgba(143,211,174,.14);color:var(--ok-navy)}
/* Dashboard views: a tab strip under the KPIs. A view that has not been opened yet carries .is-off
   (main.js), which holds its charts at zero; opening it removes the class and the CSS transitions
   below play them in, staggered by each item's --i. */
.dash :focus-visible{outline-color:var(--on-navy)}
.tabs{position:relative;display:flex;gap:2px;margin-top:18px;border-bottom:1px solid var(--navy-line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role="tab"]{flex:0 0 auto;padding:10px 14px 12px;border:0;background:none;color:var(--on-navy-2);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:color .2s,opacity var(--press)}
.tabs [aria-selected="true"]{color:var(--on-navy)}
.tabs [role="tab"]:active{opacity:.6}
@media(hover:hover){.tabs [role="tab"]:hover{color:var(--on-navy)}}
.tabs__ink{position:absolute;left:0;bottom:0;width:1px;height:2px;background:var(--on-navy);transform-origin:left;transition:transform .35s var(--ease)}
.view[hidden]{display:none}
.js .view{animation:rise .5s var(--ease) both}
.pane__t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:.8125rem;color:var(--on-navy-2)}
.steps{margin-top:6px}
.steps li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--navy-line);font-size:.875rem;line-height:1.35}
.steps li:first-child{border-top:0}
.tick{grid-row:span 2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--navy-line);transition:background .25s,border-color .25s;transition-delay:calc(var(--i)*.35s)}
.tick::after{content:"";width:8px;height:4px;margin-top:-2px;border:solid var(--navy-3);border-width:0 0 2px 2px;transform:rotate(-45deg) scale(0);transition:transform .35s var(--ease) calc(var(--i)*.35s)}
.is-done .tick{background:var(--ok-navy);border-color:var(--ok-navy)}
.is-done .tick::after{transform:rotate(-45deg) scale(1)}
.is-wait .tick{border-style:dashed;border-color:var(--warn-navy)}
.step__st{grid-row:span 2;font-size:.75rem;color:var(--on-navy-2);text-align:right;font-variant-numeric:tabular-nums;transition:opacity .3s calc(var(--i)*.35s)}
.is-done .step__st{color:var(--ok-navy)}
.is-wait .step__st{color:var(--warn-navy)}
.step__who{grid-column:2;font-size:.75rem;color:var(--on-navy-2)}
.is-off .is-done .tick{background:none;border-color:var(--navy-line)}
.is-off .is-done .tick::after{transform:rotate(-45deg) scale(0)}
.is-off .step__st{opacity:0}
.pane--g{display:flex;flex-direction:column;align-items:center;text-align:center}
.pane--g .pane__t{align-self:stretch}
.gauge{width:min(100%,230px);height:auto;margin-top:16px;overflow:visible}
.g-track,.g-val{fill:none;stroke-width:9;stroke-linecap:round}
.g-track{stroke:var(--navy-2)}
.g-val{stroke:var(--brass);stroke-dasharray:100;filter:drop-shadow(0 0 6px rgba(201,168,106,.45));transition:stroke-dashoffset 1.6s var(--ease) .15s}
.g-knob{transform-box:view-box;transform-origin:60px 62px;transition:transform 1.6s var(--ease) .15s}
.g-knob circle{fill:var(--on-navy);stroke:var(--navy);stroke-width:2.5}
.is-off .g-val{stroke-dashoffset:100!important}
.is-off .g-knob{transform:none!important}
.gauge__v{margin-top:-34px;font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gauge__c{margin-top:10px;font-size:.8125rem;line-height:1.45;color:var(--on-navy-2);max-width:34ch}
.pane__exc{margin-top:12px;font-size:.75rem;font-weight:600;color:var(--warn-navy);font-variant-numeric:tabular-nums}
.wf{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:16px}
.wf__plot{position:relative;height:190px;border-bottom:1px solid var(--navy-line)}
.wf__col{--t:1;--h:0}
.wf__bar,.wf__lab{position:absolute;inset:0 3px;transform-origin:top;transition:transform .8s var(--ease) calc(var(--i)*90ms),opacity .4s calc(var(--i)*90ms)}
.wf__bar{background:var(--brass);border-radius:3px;transform:translateY(calc(var(--t) * 100%)) scaleY(var(--h))}
.wf__lab{transform:translateY(calc(var(--t) * 100%))}
.wf__bar--dn{background:var(--on-navy-2);opacity:.55}
.wf__bar--t{background:var(--on-navy)}
.wf__lab b{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding-bottom:5px;font-size:.75rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.wf__k{display:block;margin-top:8px;font-size:.6875rem;line-height:1.3;color:var(--on-navy-2);text-align:center}
.is-off .wf__bar{transform:translateY(100%) scaleY(0)!important}
.is-off .wf__lab{transform:translateY(100%)!important;opacity:0}
.dash .bub{margin-top:12px}
.dash .bub--q{background:var(--navy-2)}
.dash .vig__src{color:var(--on-navy-2)}
.aging{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px}
.age__box{position:relative;height:150px;border:1px solid var(--navy-line);border-radius:var(--r-sm);overflow:hidden;background:repeating-linear-gradient(135deg,rgba(243,245,248,.07) 0 1px,transparent 1px 7px)}
.age__fill{position:absolute;inset:0;background:linear-gradient(var(--brass),rgba(201,168,106,.5));transform-origin:bottom;transform:scaleY(var(--s,0));transition:transform .9s var(--ease) calc(var(--i)*110ms)}
.is-off .age__fill{transform:scaleY(0)!important}
.age__p{display:block;margin-top:10px;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.age__a{display:block;font-size:.75rem;font-variant-numeric:tabular-nums}
.age__k{display:block;margin-top:2px;font-size:.75rem;line-height:1.3;color:var(--on-navy-2)}
.dso{display:block;width:100%;height:auto;margin-top:14px;overflow:visible}
.dso path{fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;filter:drop-shadow(0 0 5px rgba(201,168,106,.5));transition:stroke-dashoffset 1.4s var(--ease) .2s}
.is-off .dso path{stroke-dashoffset:1}
@media(max-width:900px){.dash__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dash__row{grid-template-columns:1fr}}
@media(max-width:420px){.dash__sync{margin-left:0;flex-basis:100%}}
/* On a phone the tile amounts do not fit side by side; the percentages and the total stay. */
@media(max-width:520px){.age__a{display:none}.tabs [role="tab"]{padding:10px 10px 12px}
  /* The chart scales down as a whole, so its axis labels need a larger size to stay readable. */
  .chart .ax{font-size:22px}}
/* Phones: seven bridge columns or five ageing tiles leave about 35px each, too narrow for a word
   like "Freight", so both turn into rows: the label on its own line, then the bar and its value. The bars keep the same --t/--h/--s
   values; only the axis changes. The close checklist moves each status under its step. */
@media(max-width:520px){
  .wf,.aging{grid-template-columns:1fr;gap:9px}
  .wf__col,.age{display:grid;grid-template-columns:minmax(0,1fr) 3.2em;align-items:center;gap:4px 10px}
  .wf__plot{display:contents}
  .wf__col::before{content:"";grid-column:1;grid-row:2;height:14px;border-radius:3px;background:var(--navy-2)}
  .wf__k,.age__k{grid-column:1/-1;grid-row:1;margin:0;text-align:left;font-size:.75rem}
  .wf__bar{position:relative;inset:auto;grid-column:1;grid-row:2;height:14px;transform-origin:left;transform:translateX(calc((1 - var(--t) - var(--h)) * 100%)) scaleX(var(--h))}
  .wf__lab{position:static;grid-column:2;grid-row:2;text-align:right;transform:none}
  .wf__lab b{position:static;transform:none;padding:0}
  .is-off .wf__bar{transform:translateX(0) scaleX(0)!important}
  .is-off .wf__lab{transform:none!important}
  .age__box{grid-column:1;grid-row:2;height:14px;border-radius:3px}
  .age__fill{transform-origin:left;transform:scaleX(var(--s,0))}
  .is-off .age__fill{transform:scaleX(0)!important}
  .age__p{grid-column:2;grid-row:2;margin:0;text-align:right;font-size:.875rem}
  .steps li{grid-template-columns:22px minmax(0,1fr)}
  .tick{grid-row:1/4}
  .step__st{grid-row:3;grid-column:2;text-align:left;margin-top:2px}
}
@media(max-width:420px){.kpi{padding:12px}.kpi__v{font-size:1.1rem}}
/* Two-up KPI cards are under 100px wide here, too narrow for "USD 2,486,390". */
@media(max-width:380px){.dash__kpis{grid-template-columns:1fr}}
@media(max-width:360px){.tabs [role="tab"]{padding:10px 6px 12px;font-size:.8125rem}}

/* ---------- Service cards ---------- */
.pillar{margin-bottom:clamp(40px,5vw,64px)}
.pillar:last-child{margin-bottom:0}
.pillar__head{max-width:56ch;margin-bottom:26px}
.pillar__head h3{font-size:1.5rem;margin-bottom:8px}
.pillar__head p{color:var(--body2)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card h4{margin-bottom:9px}
.card p{color:var(--body2);font-size:.9375rem;flex:1 0 auto;margin-bottom:18px}
.card .link{align-self:flex-start}
@media(hover:hover){.card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:transparent}}
.card:active{transform:translateY(0)}
.sec--linen .card{background:var(--paper)}

/* The Finance AI pillar keeps its own dark panel, now a rounded plate inside the page rather
   than a full-bleed band - the references all use a contained dark card. */
.pillar-ai{padding:0 0 var(--section)}
.pillar-ai__panel{background:var(--navy);border-radius:var(--r-xl);padding:clamp(34px,5vw,72px);color:var(--on-navy)}
.pillar-ai__panel h2,.pillar-ai__panel h3,.pillar-ai__panel h4{color:var(--on-navy)}
.pillar-ai__panel .k{color:var(--on-navy-2)}
.pillar-ai__panel>.pillar__head{margin-bottom:34px}
.pillar-ai__panel .pillar__head p{color:var(--on-navy-2)}
.cards--dark .card{background:var(--navy-2);border-color:var(--navy-line);color:var(--on-navy)}
.cards--dark .card p{color:var(--on-navy-2)}
.cards--dark .card .link{color:var(--on-navy)}
@media(hover:hover){.cards--dark .card:hover{background:#32456690;border-color:rgba(243,245,248,.28);box-shadow:none}}

/* The close strip. A genuine sequence, so it stays an ordered list. */
.strip{margin-top:clamp(34px,4.5vw,56px);padding-top:30px;border-top:1px solid var(--navy-line)}
.strip__h{font-size:1.25rem;font-weight:600;color:var(--on-navy);margin-bottom:6px}
.strip__note{color:var(--on-navy-2);font-size:.9375rem;max-width:58ch;margin-bottom:24px}
.strip__row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.strip__row li{background:rgba(243,245,248,.07);border:1px solid var(--navy-line);border-radius:var(--r-sm);padding:16px 14px;min-width:0;overflow-wrap:break-word}
.strip__step{display:block;font-weight:600;font-size:.9375rem;color:var(--on-navy);letter-spacing:-.006em}
.strip__tag{display:block;margin-top:7px;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-2)}
.strip__row li.is-human{background:rgba(240,164,145,.12);border-color:rgba(240,164,145,.34)}
.strip__row li.is-human .strip__tag{color:var(--warn-navy)}
@media(max-width:760px){.strip__row{grid-template-columns:repeat(2,1fr)}}

/* ---------- Engagements ---------- */
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.col{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.col h3{margin-bottom:6px}
.col .k{margin-bottom:14px}
.col p{color:var(--body2);font-size:.9375rem}

/* ---------- Cases ---------- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:22px}
.case{display:flex;flex-direction:column}
.case .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:var(--mist-2);margin-bottom:20px;box-shadow:var(--sh-sm)}
.case .ph img{width:100%;height:100%;object-fit:cover}
.case h3{margin-bottom:6px}
.case .k{margin-bottom:12px}
.case p{color:var(--body2);font-size:.9375rem;margin-bottom:16px}
.case .link{margin-top:auto;align-self:flex-start}

/* ---------- About ---------- */
.about__grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px);align-items:center}
.about__grid.has-portrait{grid-template-columns:.8fr 1.2fr}
.about .k{margin-bottom:14px}
.about h2{margin-bottom:20px}
.about p{color:var(--body2);max-width:58ch;margin-bottom:14px}
.about p:last-child{margin-bottom:0}
.portrait .frame{aspect-ratio:1;border-radius:var(--r-lg);box-shadow:var(--sh)}
.portrait img{filter:grayscale(1)}
.portrait figcaption{margin-top:14px;font-size:.875rem;color:var(--stone)}
@media(max-width:760px){.about__grid.has-portrait{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.contact{background:var(--navy);color:var(--on-navy);border-radius:0}
.contact h2{color:var(--on-navy);margin-bottom:18px}
.contact .k{color:var(--on-navy-2);margin-bottom:14px}
.contact p{color:var(--on-navy-2);max-width:46ch;margin-bottom:22px}
.contact__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.bb .mail{font-size:1.0625rem;font-weight:600;color:var(--on-navy);border-bottom:1px solid rgba(243,245,248,.3);padding-bottom:2px}
@media(hover:hover){.bb .mail:hover{border-bottom-color:var(--on-navy)}}
.bb .mail:active{opacity:.6}
@media(max-width:900px){.contact__grid{grid-template-columns:1fr}}

/* Form */
.enq{display:grid;gap:16px;background:rgba(243,245,248,.055);border:1px solid var(--navy-line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px)}
.enq .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.enq label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--on-navy-2);margin-bottom:7px}
.enq input,.enq select,.enq textarea{width:100%;font:inherit;font-size:.9375rem;color:var(--on-navy);background:rgba(243,245,248,.06);border:1px solid var(--navy-line);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .2s,background .2s}
.enq textarea{min-height:124px;resize:vertical}
.enq select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A7B2C3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:38px}
.enq input:focus,.enq select:focus,.enq textarea:focus{border-color:var(--on-navy-2);background:rgba(243,245,248,.1);outline:none}
.enq input::placeholder,.enq textarea::placeholder{color:var(--on-navy-2)}
.enq .btn{width:100%}
.err{display:none;margin-top:7px;font-size:.8125rem;color:var(--warn-navy)}
.enq .is-out .err{display:block}
.enq .is-out input,.enq .is-out textarea{border-color:var(--warn-navy)}
.hint{font-size:.8125rem;color:var(--on-navy-2);line-height:1.45}
.hint.is-ok{color:#8FD3B0}
.hint.is-error{color:var(--warn-navy)}
@media(max-width:560px){.enq .two{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-3);color:var(--on-navy);padding:clamp(52px,7vw,84px) 0 36px}
.site-footer .row{display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(30px,5vw,64px)}
.site-footer .brand b{color:var(--on-navy)}
.site-footer .brand small{color:var(--on-navy-2)}
.site-footer ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:9px 28px;align-content:start}
.site-footer li{min-width:0}
/* The contact address is one long unbreakable token; without this it pushes the footer wider
   than the screen on a phone. */
.site-footer li a{overflow-wrap:break-word}
.site-footer li a{font-size:.9375rem;color:var(--on-navy-2);transition:color .2s}
/* The language link is a bordered chip in the header; in the footer it is just another link,
   and the header's light border would sit wrong on navy. */
.site-footer .lang{display:inline;border:0;border-radius:0;padding:0;height:auto;min-width:0;font-size:.9375rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--on-navy-2)}
@media(hover:hover){.site-footer .lang:hover{color:var(--on-navy)}}
@media(hover:hover){.site-footer li a:hover{color:var(--on-navy)}}
.site-footer li a:active{opacity:.55}
.site-footer .fine{margin-top:44px;padding-top:22px;border-top:1px solid var(--navy-line);color:var(--on-navy-2);font-size:.8125rem;letter-spacing:.004em}
.site-footer .fine a{border-bottom:1px solid rgba(243,245,248,.28)}
@media(hover:hover){.site-footer .fine a:hover{color:var(--on-navy);border-bottom-color:var(--on-navy)}}
.site-footer .fine a:active{opacity:.55}
@media(max-width:760px){.site-footer .row{grid-template-columns:1fr}}

/* ---------- Service pages ---------- */
.page-hero{padding:clamp(34px,5vw,64px) 0 0}
.page-hero .crumb{font-size:.875rem;color:var(--stone);margin-bottom:20px}
.page-hero .crumb a{font-weight:500;color:var(--body2)}
@media(hover:hover){.page-hero .crumb a:hover{color:var(--ink)}}
.page-hero .crumb a:active{opacity:.55}
.page-hero h1{max-width:19ch;margin-bottom:0}
.page-hero h1 span{display:block;color:var(--stone)}
.page-hero .lede{max-width:62ch;font-size:1.125rem;margin-top:24px}
.page-hero .btn-row{margin-top:28px;align-items:center}
.band{margin-top:clamp(32px,4vw,52px);border-radius:var(--r-xl);overflow:hidden;aspect-ratio:21/8;box-shadow:var(--sh)}
.band img{width:100%;height:100%;object-fit:cover}
.band--dark{background:var(--navy);display:flex;align-items:flex-end;padding:clamp(24px,3vw,40px)}
.band--dark span{color:var(--on-navy);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;letter-spacing:-.015em}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px 56px}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.two-col h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
.two-col>p.muted{max-width:52ch;align-self:end}
.lines{border-bottom:1px solid var(--line)}
.lines li{padding:17px 0;border-top:1px solid var(--line)}
.lines.signals{border-bottom:0}
.lines.signals li{font-size:clamp(1.0625rem,1.5vw,1.1875rem);font-weight:500;letter-spacing:-.008em;padding:20px 0}
.lines.signals li:last-child{border-bottom:1px solid var(--line)}
.incl{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,56px)}
.incl>div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px}
.sec--linen .incl>div{background:var(--paper)}
.incl h3{font-size:1.125rem;margin-bottom:7px}
.incl p{color:var(--body2);font-size:.9375rem}
@media(max-width:760px){.incl{grid-template-columns:1fr}}
.deliv{border-top:1px solid var(--line)}
.deliv>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding:17px 0;border-bottom:1px solid var(--line)}
.deliv dt{font-weight:600;min-width:0;overflow-wrap:break-word}
.deliv dd{color:var(--body2);text-align:right;font-size:.9375rem;flex:0 1 auto;min-width:0;overflow-wrap:break-word}
.stagegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px}
.stagegrid>div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.stagegrid .n{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);margin-bottom:10px;font-variant-numeric:tabular-nums}
.stagegrid h3{font-size:1.1875rem;margin-bottom:7px}
.stagegrid p{color:var(--body2);font-size:.9375rem}
.example{background:var(--navy);border-radius:var(--r-lg);padding:clamp(28px,4vw,52px);color:var(--on-navy)}
.example .k{color:var(--on-navy-2);margin-bottom:18px}
.example blockquote{font-size:clamp(1.1875rem,2.3vw,1.625rem);font-weight:500;line-height:1.38;letter-spacing:-.016em;margin-bottom:16px}
.example cite{font-style:normal;font-size:.875rem;color:var(--on-navy-2)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:1.0625rem;letter-spacing:-.008em;display:flex;justify-content:space-between;gap:18px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.375rem;color:var(--stone);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
@media(hover:hover){.faq summary:hover{color:var(--navy)}}
.faq summary:active{opacity:.55}
.faq p{color:var(--body2);padding-bottom:20px;max-width:68ch}
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px}
.others a{display:block}
.others .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--mist-2);margin-bottom:12px;box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.others .ph img{width:100%;height:100%;object-fit:cover}
.others .ph--dark{background:var(--navy)}
.others b{font-weight:600;font-size:.9375rem;letter-spacing:-.008em}
@media(hover:hover){.others a:hover .ph{transform:translateY(-3px);box-shadow:var(--sh)}}
.others a:active .ph{transform:translateY(0)}
.cta-band{background:var(--navy);color:var(--on-navy);padding:var(--section) 0}
.cta-band h2{color:var(--on-navy);max-width:20ch;margin-bottom:0}
.cta-band h2 span{display:block;color:var(--on-navy-2)}
.cta-band .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center}
.cta-band p{color:var(--on-navy-2);margin-bottom:20px}
@media(max-width:860px){.cta-band .wrap{grid-template-columns:1fr}}

/* ---------- Legal pages ---------- */
.page-hero .updated{margin-top:20px;font-size:.875rem;color:var(--stone)}
.prose{max-width:64ch}
.prose p{color:var(--body2);margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose ul{list-style:disc;margin:0 0 16px;padding-left:1.15em;color:var(--body2)}
.prose li{margin-bottom:7px}
.prose li:last-child{margin-bottom:0}
.prose b{font-weight:600;color:var(--ink)}
.prose code{font-family:var(--sans);font-size:.9375em;background:var(--mist);padding:1px 6px;border-radius:5px;border:1px solid var(--line)}
.prose a{font-weight:500;color:var(--navy);border-bottom:1px solid var(--line)}
@media(hover:hover){.prose a:hover{border-bottom-color:var(--navy)}}
.prose a:active{opacity:.55}

/* ---------- Motion ---------- */
/* Everything that moves uses one curve and moves only transform and opacity. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .hero h1,.js .hero__lede,.js .hero .btn-row,.js .hero .stats,.js .hero__art{animation:rise .9s var(--ease) both}
.js .hero__lede{animation-delay:.08s}
.js .hero .btn-row{animation-delay:.16s}
.js .hero .stats{animation-delay:.24s}
.js .hero__art{animation-delay:.12s}
.js .page-hero h1,.js .page-hero .lede,.js .page-hero .btn-row,.js .page-hero .band,.js .page-hero .updated{animation:rise .9s var(--ease) both}
.js .page-hero .lede{animation-delay:.08s}
.js .page-hero .btn-row,.js .page-hero .updated{animation-delay:.16s}
.js .page-hero .band{animation-delay:.26s}
/* Reduced motion gets a gentler equivalent, not nothing: things still arrive, they stop travelling. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .hero h1,.js .hero__lede,.js .hero .btn-row,.js .hero .stats,.js .hero__art,
  .js .page-hero h1,.js .page-hero .lede,.js .page-hero .btn-row,.js .page-hero .band,.js .page-hero .updated{animation:none}
  .card,.others .ph,.btn,.link::after,.meter span,.vig__bar span,.chart .dot,.chip,.chat__launch,
  .tabs__ink,.tick,.tick::after,.step__st,.g-val,.g-knob,.wf__bar,.wf__lab,.age__fill,.dso path{transition:none}
  .js .view{animation:none}
  .live-dot::after{animation:none}
}
@media(prefers-reduced-transparency:reduce){
  .site-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .stats{background:#fff}
}
@media(prefers-contrast:more){
  .site-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--ink)}
  .card,.col,.stagegrid>div,.incl>div{border-color:var(--stone)}
}

/* ---------- Mobile navigation ---------- */
@media(max-width:1023px){
  .nav-toggle{display:inline-flex}
  .lang-full{display:inline}
  .lang-short{display:none}
  .nav{position:fixed;inset:var(--header) 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);padding:10px var(--gutter) 24px;box-shadow:var(--sh);transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-size:1.0625rem;color:var(--ink)}
  .nav .lang{display:inline-flex;margin-top:18px;min-width:0;padding:0 14px;height:38px;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:16px;border-bottom:0}
  @media(prefers-reduced-motion:reduce){.nav{transition:opacity .3s var(--ease)}}
}
@media(max-width:1023px){.hero__panel{grid-template-columns:1fr}}

/* ---------- Ask BlackBear ---------- */
/* A launcher on every page and a modal <dialog>: the platform gives focus trapping, Escape and an
   inert page for free. It is a message to Alberto, not live chat, and the subtitle says so. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chat__launch{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border:0;border-radius:var(--r-pill);background:var(--navy);color:var(--on-navy);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;box-shadow:0 10px 30px rgba(18,24,32,.28);transition:transform var(--press),box-shadow .2s}
.chat__launch svg{width:30px;height:auto}
.chat__launch .star{fill:var(--brass)}
@media(hover:hover){.chat__launch:hover{box-shadow:0 14px 38px rgba(18,24,32,.36)}}
.chat__launch:active{transform:scale(.97)}
@media(max-width:520px){.chat__launch{padding:13px}.chat__launch span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.chat__dlg{position:fixed;inset:auto 20px 84px auto;margin:0;padding:0;width:min(400px,calc(100vw - 40px));max-height:min(640px,calc(100dvh - 110px));border:0;border-radius:var(--r-xl);background:#fff;color:var(--ink);box-shadow:var(--sh-lg);overflow:hidden}
.chat__dlg[open]{display:flex;flex-direction:column}
.chat__dlg::backdrop{background:rgba(18,24,32,.2)}
.chat__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 16px 20px;background:var(--navy);color:var(--on-navy)}
.chat__title{font-size:1rem;font-weight:700}
.chat__sub{margin-top:2px;font-size:.8125rem;color:var(--on-navy-2)}
.chat__x{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--on-navy);font-size:1.5rem;line-height:1;cursor:pointer}
@media(hover:hover){.chat__x:hover{background:var(--navy-2)}}
.chat__log{flex:1 1 auto;min-height:96px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:16px 20px}
.chat__log .bub{font-size:.875rem;max-width:88%}
.chat__faq{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--ink);font:inherit;font-size:.8125rem;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform var(--press)}
@media(hover:hover){.chip:hover{background:var(--mist);border-color:var(--mist-2)}}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{color:var(--stone)}
.chat__form{display:grid;gap:8px;padding:12px 20px 14px;border-top:1px solid var(--line)}
.chat__form textarea,.chat__form input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:inherit;font-size:.9375rem;resize:none}
.chat__form textarea:focus,.chat__form input:focus{outline:2px solid var(--navy);outline-offset:-1px}
.chat__form [aria-invalid="true"]{border-color:var(--warn)}
.chat__row{display:flex;gap:8px}
.chat__row input{flex:1 1 auto;min-width:0}
.chat__row .btn{flex:0 0 auto;padding:10px 18px}
.chat__note{font-size:.75rem;color:var(--stone)}
.chat__note a{text-decoration:underline}
.chat__note .is-err{color:var(--warn);font-weight:600}
/* The UA sheet caps a modal dialog at 100% - 2em - 6px; a phone sheet has to lift that. */
@media(max-width:520px){.chat__dlg{inset:0;width:100%;max-width:none;max-height:none;height:100dvh;border-radius:0}}
@media(prefers-contrast:more){.chat__form textarea,.chat__form input,.chip{border-color:var(--stone)}.logos img{filter:none;opacity:1}}