/* RJMC site. Black, white and smoky gray, modeled on the Gcore reference Reynel chose.
   House rules: letters are white (black only on white buttons), no monospace, no em dashes,
   no stat strips, no prices. */
:root{
  /* 2026-10-19 palette (Rey: dark, but not only black and white): a deep blue-black page, surfaces lifted
     a step at a time, lines with a cool tint, and emerald as the one accent (it was already the globe's) */
  --page:#0B1016; --deep:#090D12; --surface:#111820; --surface-2:#172029; --surface-3:#1E2832;
  --line:rgba(170,200,225,.11); --line-2:rgba(170,200,225,.06); --line-3:rgba(170,200,225,.19);
  --smoke:#8E9AA6; --glow:rgba(255,255,255,.14);
  --accent:#34D399; --accent-2:#5EE3B0; --accent-ink:#06110C; --accent-soft:rgba(52,211,153,.14);
  --hdr:72px; --r:10px;
  --display:'Manrope',system-ui,sans-serif; --text:'Figtree',system-ui,sans-serif;
}
/* 2026-10-17: type scale, header and buttons follow the Gartner reference Rey chose (large type at a
   regular weight, flat panels, a solid header once the page scrolls, rectangular buttons). The opening,
   the circuit, the pinned story and the globe are untouched. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%}
body{background:var(--page);color:#fff;font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body *{color:#fff}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(1240px,calc(100% - 64px));margin-inline:auto}
.narrow{width:min(860px,calc(100% - 64px))}
@media(max-width:640px){.wrap,.narrow{width:calc(100% - 32px)}}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(40px,4.6vw,64px);font-weight:500;letter-spacing:-.025em;line-height:1.08}
h2{font-size:clamp(30px,3.3vw,48px);font-weight:500}
h3{font-size:22px;letter-spacing:-.015em;line-height:1.25;font-weight:600}
.lead{font-size:clamp(17px,1.3vw,19px);line-height:1.6;opacity:.78}
p{opacity:.8}
/* section labels: plain, quiet, no ornament */
.kicker{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--accent);opacity:.92}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:#fff;padding:10px 16px;border-radius:0 0 10px 0}
.skip,.skip *{color:#000}
.skip:focus{left:0}
main:focus{outline:0}

/* buttons: white primary with black letters, quiet secondary */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:6px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;transition:background .2s,border-color .2s,opacity .2s;white-space:nowrap}
.btn svg{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--accent)}
.btn-primary,.btn-primary *{color:#000}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border:1px solid rgba(255,255,255,.4);background:transparent}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-text{padding-inline:14px;opacity:.85}
.btn-text:hover{opacity:1;transform:none}
.btn-sm{padding:9px 17px;font-size:14px}

/* ================= header ================= */
/* the header is solid white with black letters (Rey's choice on 2026-10-17, from the Gartner reference:
   the one place on the site where letters are black on white apart from white buttons), so it stands
   apart from the page wherever the visitor is */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hdr);padding-top:env(safe-area-inset-top);background:#fff;border-bottom:1px solid #E3E3E8}
.hdr.is-solid{background:#fff;border-bottom-color:#E3E3E8}
.hdr{transition:box-shadow .3s}
.hdr.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.18)}
.hdr .bar,.hdr .bar *{color:#060606}
.hdr .bar .btn-primary{background:#060606;box-shadow:none}
.hdr .bar .btn-primary,.hdr .bar .btn-primary *{color:#fff}
.hdr .bar .btn-primary:hover{background:#2A2A30}
.hdr .brand .mk{background:#060606;border-color:#060606}
.hdr .nav a:hover,.hdr .has-mega>button:hover,.hdr .has-mega[data-open="true"]>button{background:rgba(0,0,0,.06)}
.hdr .burger{border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.03)}
.hdr .hdr-loc{border-color:rgba(0,0,0,.22);background:rgba(0,0,0,.04)}
.hdr .hdr-loc i,.hdr .hdr-loc i::after{background:#10B981;box-shadow:none}
.bar{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand .mk{width:30px;height:30px;border-radius:7px;background:var(--surface-3);border:1px solid var(--line-3);display:grid;place-items:center}
.brand .mk svg{width:16px;height:16px}
.brand .wm{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.03em}
.nav{display:none;gap:4px;padding:0}
.nav a{padding:7px 12px;border-radius:6px;font-weight:600;font-size:14px;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.07);opacity:1}
@media(min-width:1000px){.nav{display:flex}}
.right{display:flex;align-items:center;gap:10px}
/* the language link (2026-10-20): ES on the English pages, EN on the Spanish ones */
.lang{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.1em;padding:6px 8px;border-radius:6px;color:#060606;border:1px solid rgba(0,0,0,.22);line-height:1;margin-right:4px}
.lang:hover{background:rgba(0,0,0,.06)}
@media(max-width:999px){.bar .lang{display:none}}   /* on phones and tablets the language link lives in the menu */
.menu-in .m-lang{font-family:var(--display);font-weight:700;font-size:20px;padding:14px 4px;border-bottom:1px solid var(--line-2)}
.ft-lang{border-bottom:1px solid rgba(255,255,255,.45)}
.burger{width:44px;height:44px;border-radius:6px;border:1px solid var(--line-3);display:grid;place-items:center;background:rgba(255,255,255,.03)}
@media(min-width:1000px){.burger{display:none}}
/* one control opens and closes the phone menu: the three lines become a cross while it is open */
.burger .b-x{display:none}
.burger[aria-expanded="true"] .b-lines{display:none}
.burger[aria-expanded="true"] .b-x{display:inline}
/* phone menu: opaque and full height (a nested backdrop-filter made it see-through), closed on desktop widths */
.menu{position:absolute;inset:var(--hdr) 0 auto 0;height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));background:var(--page);border-bottom:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:1000px){.menu{display:none!important}}
body.menu-open .hdr{background:#fff}
.menu-in{display:grid;gap:4px;padding:14px 0 22px}
.menu-in a:not(.btn){padding:14px 4px;font-family:var(--display);font-weight:700;font-size:20px;border-bottom:1px solid var(--line-2)}
.menu-in .btn{margin-top:14px;justify-content:center}
body.menu-open{overflow:hidden}

/* ================= hero: centered copy over a live circuit ================= */
.hero{position:relative;min-height:max(100vh,820px);min-height:max(100svh,820px);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:radial-gradient(1100px 620px at 50% 108%,rgba(52,211,153,.11),transparent 65%),radial-gradient(900px 560px at 8% -4%,rgba(120,150,180,.12),transparent 60%),var(--page)}
.hero-grid{position:absolute;inset:0;z-index:-2;animation:griddrift 90s linear infinite;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000 30%,transparent 80%)}
.hero-beam{position:absolute;z-index:-1;top:-18%;right:-6%;width:62vw;height:52vh;pointer-events:none;transform:rotate(-27deg);transform-origin:top right;opacity:.9}
.hero-beam::before{content:"";position:absolute;inset:40% 0 40% 10%;background:linear-gradient(90deg,transparent,rgba(210,210,220,.20) 55%,rgba(255,255,255,.34));filter:blur(38px);border-radius:50%}
.hero-beam i{position:absolute;left:28%;right:0;top:50%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 70%,#fff);filter:blur(2.4px);opacity:.42}   /* 2026-10-21: softer, it read as a scratch */
/* two columns since 2026-10-17: the copy on the left, the stage with its three animations on the right */
.hero-in{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding-top:calc(var(--hdr) + clamp(32px,6vh,72px));padding-bottom:clamp(56px,8vh,90px)}
/* 2026-10-20 (Rey: the three animations about half again as big): the stage takes 60% of the width and
   bleeds into the right page margin on wide screens; the headline drops one step so the copy keeps three lines */
@media(min-width:960px){.hero-in{grid-template-columns:.8fr 1.2fr;gap:clamp(28px,3vw,48px)}}
.hero-copy{max-width:600px}
.hero-in h1{margin:16px 0 20px;text-wrap:balance;font-size:clamp(38px,4vw,56px)}
.hero-in .lead{max-width:56ch}
.hero-in .kicker{opacity:1}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px}
.circuit{width:100%;height:auto;aspect-ratio:4/3}
.circuit .traces path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.4}
.circuit .pulses path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 93;filter:drop-shadow(0 0 5px rgba(255,255,255,.9));opacity:0;animation:pulse-in 4.2s linear infinite;animation-delay:var(--d,0s)}
.circuit .pulses .p-out{animation-name:pulse-out}
@keyframes pulse-in{0%{stroke-dashoffset:-100;opacity:0}8%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pulse-out{0%{stroke-dashoffset:100;opacity:0}8%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.chip-body{fill:var(--surface-2);stroke:rgba(255,255,255,.28);stroke-width:1.2;filter:drop-shadow(0 0 22px rgba(255,255,255,.18))}
.chip-inner{fill:var(--surface-3);stroke:rgba(255,255,255,.08)}
.chip-label{fill:#fff;font-family:var(--display);font-weight:700;font-size:39px;letter-spacing:-.02em}
.chip-glow{animation:breathe 5s ease-in-out infinite;transform-origin:600px 470px}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
.tile rect{fill:rgba(20,20,23,.92);stroke:rgba(255,255,255,.16);stroke-width:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.6))}
.tile .ico{fill:none;stroke:#fff;stroke-opacity:.8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile{animation:float 7s ease-in-out infinite}
.tile.t2,.tile.t5{animation-delay:-2.3s}.tile.t3,.tile.t6{animation-delay:-4.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.scroll-cue span{width:1px;height:30px;opacity:.6;background:linear-gradient(#fff,transparent);animation:cue 1.8s ease-in-out infinite}
/* a dark backing under the label, so the chip's pin lines never run through the word */
.scroll-cue::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-8px;width:120px;height:44px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(11,16,22,.96) 45%,rgba(11,16,22,0));pointer-events:none}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes griddrift{from{background-position:0 0,0 0}to{background-position:0 64px,64px 0}}
/* the beam's bright line travels slowly along the beam, so the hero is never fully still */
.hero-beam i{animation:beamglide 11s ease-in-out infinite}
@keyframes beamglide{0%,100%{transform:translateX(-6%);opacity:.55}50%{transform:translateX(6%);opacity:.9}}
@media(prefers-reduced-motion:reduce){.circuit .pulses,.hero-beam i{display:none}.tile,.chip-glow,.scroll-cue span,.hero-grid{animation:none}}

/* location badge */
.kicker.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 14px;border-radius:999px;border:1px solid var(--line-3);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:1;font-size:12px;letter-spacing:.16em;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.kicker.badge::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9)}

/* ================= sections ================= */
.section{padding:clamp(64px,8.4vw,120px) 0;position:relative}
.section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.alt+.section.alt{border-top:0}

/* start here: labeled items, Gartner-style, no card borders */
.items{display:grid;grid-template-columns:1fr;gap:36px 48px}
@media(min-width:640px){.items{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.items{grid-template-columns:repeat(3,1fr)}}
.item .kicker{margin-bottom:8px}
.item h3{font-size:22px;line-height:1.3;margin-bottom:8px;text-wrap:balance}
.item p{font-size:16px;margin-bottom:12px;max-width:40ch}
.link{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:15px;padding:0;text-align:left;color:var(--accent)}
.link svg{width:12px;height:12px;transition:transform .2s}
.link:hover svg{transform:translate(2px,-2px)}
.sec-head{display:grid;grid-template-columns:1fr;gap:16px 40px;align-items:end;margin-bottom:clamp(36px,4.5vw,56px)}
@media(min-width:900px){.sec-head{grid-template-columns:1fr 1fr}.sec-head .lead{text-wrap:balance}}
.sec-head h2{margin-top:14px}
.head{max-width:720px;margin-bottom:clamp(40px,4.5vw,64px)}
.head h2{margin:14px 0 16px}

/* flat panel: the shared surface for every card on the page. One tone, one rule, no lift on hover */
.shape,.work,.svc,.who,.form,.book,.cta-panel{position:relative;border:1px solid var(--line-3);border-radius:var(--r);background:var(--surface)}
.shape,.work,.svc{transition:border-color .3s}
.shape:hover,.work:hover,.svc:hover{border-color:rgba(255,255,255,.3)}


.grid2{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.grid3{grid-template-columns:repeat(3,1fr)}}
.shape,.work{padding:22px}
.dash{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin-bottom:18px}
.dash svg{width:100%;height:auto;aspect-ratio:16/9}
/* a sample dashboard settles into its frame a moment after its card appears (2026-10-19) */
.js .reveal .dash svg{opacity:0;transition:opacity 1s ease .3s}
.js .reveal.in .dash svg{opacity:1}
@media(prefers-reduced-motion:reduce){.js .reveal .dash svg{opacity:1;transition:none}}
.shape h3,.work h3{margin:10px 0 8px}
.shape>.kicker{display:block;margin-bottom:14px}
.shape p,.work p{font-size:15px}

/* process */
.proc{display:grid;gap:18px;grid-template-columns:1fr;position:relative}
@media(min-width:900px){.proc{grid-template-columns:repeat(5,1fr)}
  .proc::before{content:"";position:absolute;left:0;right:0;top:31px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 12%,rgba(255,255,255,.28) 88%,transparent)}
  /* the line draws itself left to right as the steps come into view, and each node lights in turn (2026-10-19) */
  .js .proc::before{transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.22,.61,.36,1) .15s}
  .js .proc:has(li.in)::before{transform:scaleX(1)}
  .js .proc .pnode{opacity:0;transform:scale(.55);transition:opacity .45s ease calc(.35s + var(--i,0) * .35s),transform .55s cubic-bezier(.2,.8,.2,1.15) calc(.35s + var(--i,0) * .35s)}
  .js .proc li.in .pnode{opacity:1;transform:none}
  .js .proc .pnode::after{opacity:0;transition:opacity .35s ease calc(.7s + var(--i,0) * .35s)}
  .js .proc li.in .pnode::after{opacity:1}}
.proc{counter-reset:step}
.proc li{padding:18px 22px 24px 0;counter-increment:step}
/* the node is a numbered green light: the ordered list already counts, the counter only draws it (2026-10-21) */
.proc .pnode{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;margin:0 0 20px;background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 5px var(--accent-soft),0 0 16px rgba(52,211,153,.45)}
.proc .pnode::after{content:counter(step);font-family:var(--display);font-weight:700;font-size:13px;line-height:1}
.proc h3{font-size:22px;margin-bottom:10px}
/* on phones the cards stack and no line joins them; the numbered light stays, smaller */
@media(max-width:899px){.proc .pnode{width:24px;height:24px;margin-bottom:14px}}
.proc p{font-size:15.5px}

/* assistant call to action */
.cta-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding:clamp(28px,4vw,56px);border-radius:var(--r);border-color:var(--line-3);background:var(--surface)}
.cta-panel h2{margin:12px 0 12px}
.cta-panel .lead{max-width:56ch}
.monitor{position:relative;padding:12px;border-radius:12px;background:var(--surface-3);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.monitor .screen{position:relative;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:var(--deep);overflow:hidden}
/* the stand: a thin neck and a foot below the bezel (the monitor keeps room for them underneath) */
.monitor{margin-bottom:34px}
.monitor .stand{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:14%;height:26px;background:linear-gradient(#283340,var(--surface-2));border-radius:0 0 6px 6px}
.monitor .foot{position:absolute;left:50%;top:calc(100% + 26px);transform:translateX(-50%);width:40%;height:7px;border-radius:4px;background:#283340}


/* faq */
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-3);position:relative;transition:border-color .2s,background .2s}
.qa summary:hover i,.qa[open] summary i{border-color:var(--accent);background:var(--accent-soft)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;background:#fff;transform:translate(-50%,-50%);transition:transform .25s}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.qa p{padding:0 0 22px;max-width:70ch}

/* contact */
.form{display:grid;gap:16px;padding:clamp(22px,3vw,34px);border-radius:var(--r)}
.row2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;opacity:.85}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:6px;border:1px solid var(--line-3);background:var(--deep);font:inherit;font-size:15px}
.field select option{background:var(--deep)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.field [aria-invalid="true"]{border-color:#fff;border-style:dashed}
.f-err{margin-top:6px;font-size:13px}
.f-err:empty{display:none}
::placeholder{color:#fff;opacity:.5}
.opt{font-weight:500;opacity:.7}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.note{font-size:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.fallback{display:grid;gap:10px;padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--deep)}
.fallback a{border-bottom:1px solid rgba(255,255,255,.5)}.fallback a:hover{border-color:#fff}
.fallback textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--deep);font:inherit;font-size:14px}
.sent{display:grid;gap:4px;padding:16px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.05)}

/* booking */
.book{display:grid;grid-template-columns:1fr;border-radius:var(--r);overflow:hidden}
@media(min-width:960px){.book{grid-template-columns:340px 1fr}}
.book-info{padding:clamp(24px,3vw,36px);border-bottom:1px solid var(--line)}
@media(min-width:960px){.book-info{border-bottom:0;border-right:1px solid var(--line)}}
.book-brand{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.book-info h3{font-size:24px;margin:8px 0 22px}
.book-meta{display:grid;gap:14px}
.book-meta li{display:flex;gap:12px;align-items:flex-start;font-size:15px;font-weight:600}
.book-meta svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.65;margin-top:1px}
.book-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-2);font-size:14px;opacity:.65}
.book-embed{min-height:680px;display:flex}
.book-embed iframe{flex:1;width:100%;min-height:680px;border:0;background:transparent}
.book-fallback{margin:auto;max-width:460px;padding:40px 28px;display:grid;gap:16px;justify-items:start}
.book-fallback h3{font-size:24px}
@media(max-width:959px){.book-embed{min-height:0}.book-embed iframe{min-height:720px}
  .book-main{order:-1}.book-info{border-bottom:0;border-top:1px solid var(--line)}}
.book-embed:has(.book-fallback){min-height:0}

/* reveal: only when scripts run (the head adds .js), so the copy stays visible without JavaScript */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ================= assistant (panel styles for assistant.js) ================= */
.asst-fab{position:fixed;right:22px;bottom:22px;z-index:90;padding:13px 20px;border-radius:6px;background:var(--surface-2);border:1px solid rgba(255,255,255,.3);font-family:var(--display);font-weight:700;font-size:14px;box-shadow:0 12px 34px rgba(0,0,0,.6)}
.asst-fab:hover{border-color:rgba(255,255,255,.45)}
@media(max-width:520px){.asst-fab{right:14px;bottom:14px}}
@media(max-width:640px){.asst-fab{display:none}}
/* the floating button steps aside (main.js adds body.fab-on only where it covers nothing important:
   not over the hero, the assistant and booking sections, the footer, or the pinned story on phones).
   Hidden with visibility, so it also leaves the tab order. Without scripts it does nothing, so it is not shown. */
html:not(.js) .asst-fab{display:none}
.js .asst-fab{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.js body.fab-on .asst-fab{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .2s,transform .2s,visibility 0s}
body.menu-open .asst-fab{display:none}
@media(prefers-reduced-motion:reduce){.js .asst-fab,.js body.fab-on .asst-fab{transition:none;transform:none}}
.asst-veil{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.asst-veil[data-open="true"]{opacity:1;visibility:visible}
/* closed, the panel is hidden as well as moved off screen, so nothing inside it can take focus */
.asst{position:fixed;top:0;right:0;z-index:201;height:100%;width:min(460px,100%);background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s}
.asst[data-open="true"]{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s}
.asst-back{padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-weight:600}
.asst-back:hover{border-color:rgba(255,255,255,.45)}
.asst h3:focus{outline:0}
.asst-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.asst-hd b{font-family:var(--display);font-size:17px}
.asst-hd .asst-sub{display:block;font-size:13px;opacity:.6;margin-top:2px}
.asst-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center}
.asst-x svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.asst-prog{display:flex;gap:5px;padding:12px 22px}
.asst-prog i{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.12)}
.asst-prog i.on{background:var(--accent)}
.asst-bd{flex:1;overflow-y:auto;padding:12px 22px 22px}
.asst-q{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.25;margin-bottom:6px}
.asst-help{font-size:14px;opacity:.65;margin-bottom:18px}
.asst-opts{display:grid;gap:9px}
.asst-opt{text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:15px}
.asst-opt:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.asst-ft{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-top:1px solid var(--line);font-size:13px}
.verdict{display:grid;gap:14px}
.verdict .badge{justify-self:start;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge.go{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.7)}
.badge.maybe{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.55)}
.badge.no{background:none;border:1px solid rgba(255,255,255,.3)}
.verdict .rows{border-top:1px solid var(--line-2)}
.verdict .rw{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.verdict .rw span:first-child{opacity:.65;flex:1 1 auto;text-wrap:pretty}
.verdict .rw span:last-child{flex:none;white-space:nowrap;text-align:right;font-weight:600}
.verdict .cta-row{display:flex;flex-wrap:wrap;gap:10px}
.verdict .btn-dark{background:#fff;padding:12px 18px;border-radius:6px;font-weight:700}
.verdict .btn-dark,.verdict .btn-dark *{color:#000}
.verdict .btn-line{border:1px solid rgba(255,255,255,.3);padding:12px 18px;border-radius:6px;font-weight:700}
.sub-note{font-size:13px;opacity:.65}

/* ================= Solutions mega menu ================= */
.has-mega{position:static}
.has-mega>button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;font-weight:600;font-size:14px;opacity:.85}
.has-mega>button:hover,.has-mega[data-open="true"]>button{background:rgba(255,255,255,.07);opacity:1}
.has-mega>button svg{width:12px;height:12px;transition:transform .18s}
.has-mega[data-open="true"]>button svg{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s linear .18s}
.hdr[data-mega="true"] .mega{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s,visibility 0s}
.hdr[data-mega="true"]{background:#fff}
.mega-in{display:grid;gap:30px;padding:30px 0 34px;grid-template-columns:3.3fr .85fr}   /* By function and the tool since 2026-10-19 */
.mega-roles{display:grid;grid-template-columns:1fr 1fr;gap:26px}   /* By function and By industry side by side since 2026-10-21, each two columns wide */
.mega-roles .mega-col{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-content:start}
.mega-roles .mega-col .mega-h{grid-column:1/-1}
.mega .mega-h{opacity:1;font-family:var(--display);font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line-3)}
.mega a.mi{display:block;padding:8px 10px;margin-left:-10px;border-radius:10px}
.mega a.mi:hover{background:rgba(255,255,255,.06)}
.mega a.mi b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.mega a.mi span{display:block;font-size:13px;line-height:1.45;opacity:.55;margin-top:2px}
.mega .feat{border-radius:8px;padding:22px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line-3);background:var(--surface)}
.mega .feat .tagm{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.mega .feat b{font-family:var(--display);font-size:18px;letter-spacing:-.02em;line-height:1.3}
.mega .feat p{font-size:13.5px;line-height:1.55;opacity:.65}
.mega .feat .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:0;text-align:left}
@media(max-width:999px){.mega{display:none}}
.m-sol{border-bottom:1px solid var(--line-2)}
.m-sol summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-family:var(--display);font-weight:700;font-size:20px;cursor:pointer}
.m-sol summary::-webkit-details-marker{display:none}
.m-sol summary svg{width:16px;height:16px;transition:transform .2s}
.m-sol[open] summary svg{transform:rotate(180deg)}
.m-sub{display:grid;padding:0 4px 12px}
.menu-in .m-sub a{padding:9px 0 9px 14px;font-family:var(--text);font-weight:500;font-size:16px;border-bottom:0;opacity:.8}

/* ================= footer ================= */
.ft{border-top:1px solid var(--line);padding:64px 0 34px;background:var(--deep)}
.ft-grid{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:700px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ft-grid{grid-template-columns:1.1fr 1.7fr 1.7fr .9fr .9fr}.ft-grid>div:nth-child(2) ul,.ft-grid>div:nth-child(3) ul{columns:2;column-gap:28px}.ft-grid>div:nth-child(2) li,.ft-grid>div:nth-child(3) li{break-inside:avoid}}   /* By industry column added 2026-10-21 */
@media(max-width:699px){.ft-grid{grid-template-columns:1fr 1fr;gap:34px 20px}.ft-grid>div:first-child{grid-column:1/-1}}
.ft p{font-size:14px;max-width:34ch;margin-top:14px;opacity:.55}
.ft .ft-h{font-family:var(--text);font-size:13px;font-weight:700;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.ft li{margin-bottom:9px}
.ft li a,.ft li span,.ft-link{font:inherit;font-size:14px;opacity:.7;padding:0;text-align:left}
.ft li a:hover,.ft-link:hover{opacity:1}
.ft-btm{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;opacity:.6}
.ft-legal{display:flex;flex-wrap:wrap;gap:6px 22px}
.ft-legal a{border-bottom:1px solid rgba(255,255,255,.45)}
.ft-legal a:hover{border-color:#fff}

/* ================= FAQ page ================= */
.phero{padding:calc(var(--hdr) + clamp(56px,7vw,110px)) 0 clamp(24px,3vw,40px);background:radial-gradient(900px 420px at 50% -10%,rgba(255,255,255,.09),transparent 70%)}
.phero h1{font-size:clamp(38px,4.6vw,64px);margin:16px 0 18px}
.phero .lead{max-width:62ch}
.faq-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.faq-jump a{padding:7px 14px;border-radius:999px;border:1px solid var(--line-3);font-weight:600;font-size:14px}
.faq-jump a:hover{border-color:rgba(255,255,255,.55)}
.faq-page{padding-top:clamp(30px,4vw,56px)}
.faq-group{margin-bottom:clamp(40px,5vw,64px);scroll-margin-top:calc(var(--hdr) + 20px)}
/* the last group runs straight into the closing panel's own section padding, with no extra gap */
.faq-page{padding-bottom:0}.faq-page .faq-group:last-child{margin-bottom:0}
.faq-group h2{font-size:clamp(24px,2.4vw,32px);padding-bottom:12px;border-bottom:1px solid var(--line-3)}
[id^="shape-"],[id^="services-"]{scroll-margin-top:calc(var(--hdr) + 24px)}
.has-mega>button,.ft-link,.mega .feat .go,.m-sol summary{color:#fff}

/* ================= opening: circuit lines converge, the logo draws, the name resolves ================= */
/* timeline: 0 to 1.1s lines draw in and pulses race to the center; 1.0 to 1.8s the mark draws and
   flashes; 1.5 to 2.3s the letters resolve; 2.2 to 2.8s a light sweep and the subtitle; at 3.0s
   story.js adds .intro-out and the mark rushes toward the viewer as the hero comes up. */
.intro{display:none}
html.intro-run .intro{display:grid;position:fixed;inset:0;z-index:500;place-items:center;cursor:pointer;overflow:hidden;
  background:radial-gradient(640px 320px at 50% 52%,rgba(255,255,255,.07),transparent 70%),#05080B}
html.intro-run body{overflow:hidden}
.intro-traces{position:absolute;inset:0;width:100%;height:100%}
.itr path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1.1s cubic-bezier(.5,0,.2,1) forwards}
.itr path:nth-child(2n){animation-delay:.12s}.itr path:nth-child(3n){animation-delay:.24s}
.ipl path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 6px #fff);animation:ipulse .9s cubic-bezier(.4,0,.6,1) forwards;animation-delay:var(--d,0s)}
@keyframes ipulse{0%{stroke-dashoffset:100;opacity:0}10%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:6;opacity:0}}
.intro-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
.intro-in::before{content:"";position:absolute;left:50%;top:38%;width:260px;height:260px;transform:translate(-50%,-50%) scale(.2);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));opacity:0;animation:flash 1s 1.55s ease-out forwards;pointer-events:none}
@keyframes flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.intro-mk{width:88px;height:88px;overflow:visible}
.im-box{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.45);stroke-width:.5;stroke-dasharray:90;stroke-dashoffset:90;animation:draw .8s 1s ease forwards}
.im-path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .7s 1.15s cubic-bezier(.6,0,.2,1) forwards;filter:drop-shadow(0 0 3px rgba(255,255,255,.95))}
.im-path2{animation-delay:1.3s}   /* 2026-10-23: the intro mark draws both strokes of the logo, like the header mark (Rey saw one) */
@keyframes draw{to{stroke-dashoffset:0}}
.intro-wm{position:relative;display:flex;font-family:var(--display);font-weight:700;font-size:clamp(40px,5.4vw,70px);letter-spacing:.14em;padding-left:.14em;overflow:hidden}
.intro-wm i{font-style:normal;display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(10px);animation:letter .75s cubic-bezier(.2,.7,.2,1) forwards}
.intro-wm i:nth-child(1){animation-delay:1.5s}.intro-wm i:nth-child(2){animation-delay:1.56s}.intro-wm i:nth-child(3){animation-delay:1.62s}
.intro-wm i:nth-child(4){animation-delay:1.68s}.intro-wm i:nth-child(5){animation-delay:1.74s}.intro-wm i:nth-child(6){animation-delay:1.8s}.intro-wm i:nth-child(7){animation-delay:1.86s}
@keyframes letter{to{opacity:1;transform:none;filter:blur(0)}}
.intro-wm::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);mix-blend-mode:overlay;opacity:0;animation:sweep .7s 2.25s ease-in-out forwards}
@keyframes sweep{0%{left:-40%;opacity:1}100%{left:120%;opacity:1}}
.intro-sub{font-size:12.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;opacity:0;animation:subin .8s 2.2s ease forwards}
@keyframes subin{from{opacity:0;letter-spacing:.5em}to{opacity:.6;letter-spacing:.3em}}
/* a visible way out for anyone who does not want to wait (any click, key, wheel or touch also skips) */
.intro-skip{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:2;padding:9px 18px;border-radius:6px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;opacity:.8;transition:opacity .2s,border-color .2s}
.intro-skip:hover,.intro-skip:focus-visible{opacity:1;border-color:rgba(255,255,255,.65)}
html[data-frozen] .intro-skip{display:none}
/* leaving: the mark rushes forward, the lines retract, the screen opens onto the hero */
html.intro-out .intro{animation:introOut .8s cubic-bezier(.7,0,.2,1) forwards}
html.intro-out .intro-in{animation:rush .8s cubic-bezier(.7,0,.2,1) forwards}
html.intro-out .intro-traces{animation:fadeaway .45s ease forwards}
@keyframes introOut{0%{opacity:1}55%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes rush{to{transform:scale(2.4);filter:blur(10px);opacity:0}}
@keyframes fadeaway{to{opacity:0}}
/* the hero powers up as the intro leaves. The hero copy waits at opacity .01, never 0: the overlay
   covers it either way, but at .01 the browser counts the headline as painted, so the page's
   largest paint (LCP) is not held back until the intro ends. */
html.intro-run .circuit,html.intro-run .hero-beam{opacity:0}
html.intro-run .hero-copy>*{opacity:.01}
html.intro-run .stage{opacity:0}
html.intro-out .hero-copy>*,html.intro-done .hero-copy>*{animation:rise .9s .25s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.33s}.hero-copy>:nth-child(3){animation-delay:.41s}.hero-copy>:nth-child(4){animation-delay:.49s}
html.intro-out .stage,html.intro-done .stage{animation:fadein 1.4s .35s both}
html.intro-out .circuit,html.intro-done .circuit{animation:fadein 1.4s .35s both}
html.intro-out .hero-beam,html.intro-done .hero-beam{animation:fadein 1.8s .2s both}
@keyframes rise{from{opacity:.01;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ================= the stage: three animations in turn, beside the hero copy ================= */
/* The hero is a two-column layout since 2026-10-17: copy on the left, the stage on the right. The stage
   loops through the circuit, a monitor that builds a tool, and the globe (story.js). */
.stage{--bleed:max(0px,min(110px,(100vw - 1320px) / 2));position:relative;width:calc(100% + var(--bleed));aspect-ratio:4/3;max-height:min(720px,80vh);isolation:isolate}
/* phase changes (2026-10-19): the next scene settles in from slightly below and smaller, the last one
   drifts up and away, on one slow curve, so the loop reads as one continuous piece of motion */
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(14px) scale(.95);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1);pointer-events:none;will-change:opacity,transform}
.ph.on{opacity:1;transform:none}
.ph.past{transform:translateY(-10px) scale(1.05)}
.ph-circuit .circuit{position:static;width:100%;height:100%;max-height:100%;transform-origin:50% 52%;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.stage[data-phase="1"] .ph-circuit .circuit{transform:scale(1.9)}
.ph-monitor{--p:0}
.ph-monitor .monitor{width:min(640px,100%);transform-origin:50% 50%;zoom:1.3}   /* the monitor and everything on its screen, a third larger (2026-10-20) */
.ph-monitor .screen{display:grid;grid-template-columns:40% 1fr;height:min(430px,50vh);min-height:320px}
.ph-globe{flex-direction:column}
.globe{flex:none;height:137%;width:auto;max-width:none;aspect-ratio:1}   /* 2026-10-21: the canvas is taller than the stage so the globe reads about 70% bigger; the hero clips the overflow */
.ph-circuit .circuit{transform:scale(1.05)}   /* 1.12 pushed the outer tiles past the screen edge once the stage grew (2026-10-20) */
/* the phase markers are small bars; the one on show fills over the length of its phase (story.js sets
   --dur), so the visitor can see the stage is moving on its own (2026-10-19) */
/* pointer parallax (story.js sets --px/--py on the stage and --bx/--by on the hero) */
.stage{transform:translate(var(--px,0),var(--py,0));transition:transform .2s linear}
.hero-beam{translate:var(--bx,0) var(--by,0)}
.glass{border:1px solid var(--line-3);border-radius:var(--r);background:var(--surface);box-shadow:0 30px 80px rgba(0,0,0,.6)}

/* the monitor: a code pane that writes itself (abstract lines drawn as bars: the house rules allow no
   monospace font) and a preview pane that assembles the dashboards the code produces, one at a time.
   --p runs 0 to 1 on .ph-monitor (the stage) or .tool-panel (static, 1). */
/* the monitor (2026-10-19): an assistant pane on the left that types out what needs a person, and an
   executive summary on the right whose parts settle in one after another. --p runs 0 to 1 on .ph-monitor
   (the stage) or .tool-panel (static, 1). Figures are sample data and the pane says so. */
.chat{display:flex;flex-direction:column;min-width:0;border-right:1px solid rgba(255,255,255,.1);background:var(--deep)}
.pane-hd{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:11.5px;font-weight:600;letter-spacing:.04em;opacity:.7}
.pane-hd i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.55}
.pane-hd i.live{background:var(--accent);opacity:1;box-shadow:0 0 8px rgba(52,211,153,.8)}
.pane-hd span{margin-left:auto;opacity:.6}
.chat-body{flex:1;padding:10px;display:grid;align-content:start;gap:6px;overflow:hidden;font-size:11.5px;line-height:1.4}
.msg{padding:7px 10px;border-radius:10px 10px 10px 3px;background:var(--surface-2);max-width:96%;opacity:.95;
  clip-path:inset(0 calc((1 - clamp(0, var(--p,0) * 7 - var(--k,0), 1)) * 100%) 0 0 round 10px)}
.msg b{font-weight:600}
.msg.me{justify-self:end;background:var(--accent);border-radius:10px 10px 3px 10px}
.msg.me,.msg.me *{color:var(--accent-ink)}
.caret{width:2px;height:12px;background:var(--accent);margin-top:2px;animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.app{display:flex;flex-direction:column;min-width:0}
.app-body{flex:1;position:relative;padding:12px 14px;display:grid;gap:9px;align-content:start;overflow:hidden}
.app-body>*{opacity:clamp(0, calc(var(--p,0) * 4.5 - var(--k,0)), 1);transform:translateY(calc((1 - clamp(0, var(--p,0) * 4.5 - var(--k,0), 1)) * 10px))}
.app-body .xs{font-size:12px;line-height:1.5;opacity:.85;margin:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}   /* minmax(0): longer Spanish labels never widen the pane (2026-10-20) */
.kpi{display:grid;gap:2px;padding:7px 9px;border:1px solid var(--line-3);border-radius:6px;background:var(--surface);min-width:0}
.kpi span{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.kpi b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.kpi em{font-style:normal;font-size:10.5px;opacity:.65}
.kpi em.up{color:var(--accent);opacity:1}
.kpi em.warn{opacity:.9}
.chart{display:grid;gap:6px}
.chart>span{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.55}
.bars{display:flex;align-items:flex-end;gap:6px;height:40px}
.bars i{flex:1;height:calc(var(--h,.5) * 100%);border-radius:3px 3px 0 0;background:rgba(255,255,255,.22)}
.bars i.now{background:var(--accent)}
.rev{display:grid;border-top:1px solid rgba(255,255,255,.1)}
.rev div{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:11.5px}
.rev span:nth-child(2){opacity:.6}
.rev em{font-style:normal;padding:1px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.4);font-size:10.5px;font-weight:600}
.app-status{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;opacity:calc(.35 + clamp(0, var(--p,0) * 3 - 2.2, 1) * .65)}
.app-status b{font-weight:600}
.app-status em{font-style:normal;padding:2px 9px;border-radius:999px;border:1px solid rgba(52,211,153,.6);font-size:11.5px;font-weight:600;color:var(--accent)}

/* the hero copy follows the scene (2026-10-19): story.js fades the kicker, headline and lead out, swaps the
   words from SITE.hero, and fades them back in. The entrance animation is removed from them first, so these
   transitions are not overridden by its fill mode. */
.hero-copy .sw{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.hero-copy h1.sw{transition-delay:.07s}.hero-copy .lead.sw{transition-delay:.14s}
.hero-copy .sw.is-out{opacity:0;transform:translateY(8px)}
/* the caption under the hero buttons follows the scene on the stage (story.js sets data-phase on .hero) */
.hero-live{position:relative;margin-top:30px;padding-left:14px;border-left:2px solid var(--accent);min-height:46px;max-width:46ch;font-size:15px;line-height:1.5}
.hero-live p{position:absolute;left:14px;right:0;top:0;margin:0;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1)}   /* 2026-10-21: the old caption leaves first, the new one follows (they used to cross) */
.hero-live p b{font-weight:600}
.hero[data-phase="0"] .hero-live p[data-ph="0"],.hero:not([data-phase]) .hero-live p[data-ph="0"],.hero[data-phase="1"] .hero-live p[data-ph="1"],.hero[data-phase="2"] .hero-live p[data-ph="2"]{opacity:1;transform:none;transition-delay:.34s}
@media(max-width:640px){.hero-live{margin-top:22px;font-size:14px;min-height:64px}.hero-live p{right:8px}#hero-h{font-size:34px}}

/* phones and tablets: copy above, the stage below it */
@media(max-width:959px){
  .stage{width:100%;max-height:none;aspect-ratio:1/1;max-width:560px;margin:0 auto}
  .ph-circuit .circuit{transform:none}
  .globe{height:100%;max-width:100%}
  .ph-monitor .monitor{zoom:1}
  .ph-monitor .screen{height:auto;min-height:0;aspect-ratio:16/10}
  .ph-monitor .monitor{padding:8px}.monitor{margin-bottom:0}.monitor .stand,.monitor .foot{display:none}
  .chat-body{padding:10px;gap:6px}
  .app-body{padding:8px;gap:6px}
}
@media(max-width:640px){
  .hero-in{gap:26px}.hero-in .lead-more{display:none}.hero-cta{margin-top:22px}
  .ph-monitor .screen{grid-template-columns:1fr}.ph-monitor .chat{display:none}.ph-monitor .chart,.ph-monitor .rev{display:none}
}
@media(prefers-reduced-motion:reduce){.ph{transition:none}.caret{animation:none}}

/* location badge in the header, beside the name. The pulse is a disc that grows from the dot to --ring
   times its size and fades out. Each layout gives the dot room for it: the disc stays inside the pill
   (centered on the pill's rounded end) and ends at least 3px short of the first letter. */
.brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.hdr-loc{--ring:4.6;display:inline-flex;align-items:center;gap:14px;padding:6px 13px 6px 11px;border-radius:999px;border:1px solid var(--line-3);background:rgba(255,255,255,.04);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.hdr-loc i{position:relative;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 11px rgba(255,255,255,1);flex:none}
.hdr-loc i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;animation:locpulse 1.8s ease-out infinite}
@keyframes locpulse{0%{transform:scale(1);opacity:.95}80%,100%{transform:scale(var(--ring,4.6));opacity:0}}
/* 1180px and up: the nav sits on the page's center line, whatever the width of the name and badge */
@media(min-width:1180px){.bar{display:grid;grid-template-columns:1fr auto 1fr}.bar .right{justify-self:end}}
/* 1000 to 1179px: the same line in a compact form, so it fits beside the nav */
@media(max-width:1179px){.bar .hdr-loc{padding:0;border:0;background:none;font-size:11px;letter-spacing:.12em;gap:14px}.bar .brand-wrap{gap:18px}}
/* the Spanish button and nav are longer: between the burger and the full header the Spanish pages drop the
   Miami badge so the nav never wraps (2026-10-20) */
.nav a,.nav button{white-space:nowrap}
@media(min-width:1000px) and (max-width:1179px){html[lang="es"] .bar .hdr-loc{display:none}}
/* below 1000px the nav folds into the menu, and the badge becomes a small pill under the name */
@media(max-width:999px){
  .bar .brand-wrap{flex-direction:column;align-items:flex-start;gap:5px}
  .bar .hdr-loc{--ring:3.7;padding:4px 9px 4px 7px;border:1px solid var(--line-3);background:rgba(255,255,255,.04);font-size:10px;line-height:1.25;letter-spacing:.11em;gap:10px}
  .bar .hdr-loc i{width:5px;height:5px}
}
/* small phones: below 480px the header button leaves the bar in both languages (the menu carries it) so it never touches the name or the Miami pill. 2026-10-21: first the Spanish label, then the English one once it read Book a free meeting. */
@media(max-width:400px){.bar .right{gap:8px}.bar .hdr-loc{font-size:9px;letter-spacing:.1em}}
@media(max-width:479px){.bar .right .btn-sm{display:none}}
@media(prefers-reduced-motion:reduce){.hdr-loc i::after{animation:none;opacity:0}}

/* ================= the sign-off: book a call or email the details ================= */
.book-section{overflow:hidden}
.book-title{max-width:22ch;margin:0 auto clamp(36px,4vw,56px);text-align:center}
.book-main{display:flex;flex-direction:column;min-width:0}
.book-tabs{display:flex;gap:6px;padding:14px 16px 0;border-bottom:1px solid var(--line)}
.book-tabs [role="tab"]{position:relative;padding:12px 16px 14px;font-family:var(--display);font-weight:700;font-size:15px;opacity:.55;transition:opacity .2s}
.book-tabs [role="tab"]:hover{opacity:.85}
.book-tabs [role="tab"][aria-selected="true"]{opacity:1}
.book-tabs [role="tab"][aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.book-pane{flex:1;display:flex;flex-direction:column}
.book-pane[hidden]{display:none}
.book-pane .form{border:0;background:none;border-radius:0;padding:clamp(20px,3vw,30px)}
.book-pane .book-embed{flex:1}

/* ================= services: the three practices ================= */
.svc-grid{align-items:stretch}
@media(min-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
.svc{display:flex;flex-direction:column;padding:26px 24px 24px}
.svc-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--line-3);background:var(--surface-2);margin-bottom:22px}
.svc-ico svg{width:22px;height:22px;stroke:var(--accent)!important}
.svc h3{font-size:24px;margin-bottom:10px}
.svc-promise{font-size:16px;margin-bottom:20px}
.svc-list{border-top:1px solid var(--line)}
.svc-list li{position:relative;padding:11px 0 11px 20px;border-bottom:1px solid var(--line-2);font-size:15px;line-height:1.45;opacity:.85}
.svc-list li::before{content:"";position:absolute;left:1px;top:19px;width:9px;height:1.5px;border-radius:1px;background:var(--accent);opacity:.9}
.svc-ft{margin-top:auto;padding-top:20px;display:grid;gap:14px;justify-items:start}
.svc-note{font-size:13.5px;opacity:.65}
.svc-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;padding-bottom:2px;border-bottom:1px solid rgba(52,211,153,.35);transition:border-color .2s;color:var(--accent)}
.svc-go:hover{border-color:var(--accent)}
.svc-go svg{width:14px;height:14px;transition:transform .2s}
.svc-go:hover svg{transform:translateX(2px)}

/* how we work: the commercial model, one line under the steps */
.proc-note{display:grid;gap:6px 32px;margin-top:22px;padding:20px 24px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--surface);font-size:15px;line-height:1.6}
.proc-note b{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.proc-note span{max-width:78ch}
@media(min-width:900px){.proc-note{grid-template-columns:200px 1fr;align-items:baseline}}

/* who you work with: principal-led, no photo */
.section.tight{padding:clamp(40px,5vw,80px) 0}
#who{padding-top:0}
.who{display:grid;gap:26px;padding:clamp(26px,3.6vw,48px);border-radius:var(--r);border-color:var(--line-3)}
.who h2{font-size:clamp(26px,2.6vw,38px);margin-top:14px;max-width:24ch;text-wrap:balance}
.who-id{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.who-mk{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-3);background:var(--surface-3);font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.04em}
.who-id b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.who-id b+span{display:block;font-size:13.5px;opacity:.6}
.who-r p{font-size:15.5px;max-width:46ch}
@media(min-width:900px){.who{grid-template-columns:1.2fr 1fr;gap:0;align-items:center}.who-r{padding-left:44px;margin-left:44px;border-left:1px solid var(--line)}}

/* selected work: what kind of work it is and where it stands */
.work-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.work-status{font-size:11.5px;font-weight:600;line-height:1.4;padding:3px 10px;border-radius:999px;border:1px solid var(--line-3)}

/* every dashboard carries a readable Sample data pill (added by render.js) */
.sample-tag{position:absolute;top:8px;right:10px;z-index:1;font-size:12px;font-weight:600;line-height:1.35;padding:3px 10px;border-radius:999px;border:1px solid var(--line-3);background:rgba(9,13,18,.85);pointer-events:none}
.dpanel .sample-tag{top:5px;right:8px;font-size:12px;line-height:1.2;padding:1px 8px}
/* on the card dashboards the pill sits inside the drawing's header strip (1/12 of the panel's width,
   20px on the narrowest phone) so it never covers a tile. The text stays at 12px; only the offset and
   the vertical padding follow the panel's width. The fixed values are the fallback without container units. */
.dash{container-type:inline-size}
.dash .sample-tag{top:2px;right:6px;line-height:1.2;padding:0 9px;
  top:clamp(2px,1cqw,8px);right:clamp(5px,1.4cqw,10px);padding:clamp(0px,calc(.6cqw - 1.4px),3px) 9px}
/* a work card's caption, in the band the drawing leaves under its table (y 180 to 248 of 270), centered
   in it on one line or two: HTML, like the pill, so it stays readable at any panel width */
.dash-cap{position:absolute;left:12.5%;right:4%;top:66.7%;bottom:8.1%;z-index:1;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;line-height:1.25;color:#fff;pointer-events:none}
.dash-cap::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;border:1px solid rgba(255,255,255,.6)}
.tc-tag{display:inline-block;margin-top:2px;font-size:12px;font-weight:600;line-height:1.35;padding:3px 10px;border-radius:999px;border:1px solid var(--line-3)}

/* how your data is handled */
.dgrid{display:grid;gap:0 36px;grid-template-columns:1fr}
@media(min-width:640px){.dgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.dgrid{grid-template-columns:repeat(3,1fr)}}
.dgrid li{padding:24px 0 28px;border-top:1px solid var(--line-3)}
.d-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);margin-bottom:16px}
.d-ico svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dgrid h3{font-size:18px;margin-bottom:8px}
.dgrid p{font-size:15.5px;max-width:40ch}
.data-more{margin-top:18px;font-size:15px}
.data-more a{font-weight:600;color:var(--accent);border-bottom:1px solid rgba(52,211,153,.4);padding-bottom:2px}
.data-more a:hover{border-color:var(--accent)}
.faq-more{margin-top:30px}
/* home FAQ: the heading and the link to the full page hold on the left while the questions run on the right.
   On phones the order is heading, questions, link. */
.faq-split{display:flex;flex-direction:column}
.faq-side{display:contents}
.faq-side .faq-more{order:2}
@media(min-width:900px){
  .faq-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  .faq-side{display:block;position:sticky;top:calc(var(--hdr) + 40px)}
  .faq-side .head{margin-bottom:0}
  .faq-split #faq-list{margin-top:-22px}
}
.faq-reviewed{margin-top:14px;font-size:13.5px;opacity:.6}

/* Solutions menu: the three practices as the first row */
/* the three practices are the main thing (Rey, 2026-10-19): a row of three panels with large titles, above
   the roles and systems, which stay at the smaller size */
.mega-svc{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);column-gap:16px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.mega-svc .mega-h{grid-column:1/-1}
.mega-svc a.mi{position:relative;margin:0;padding:20px 48px 20px 20px;border:1px solid var(--line-3);border-radius:8px;background:var(--surface);transition:border-color .2s,background .2s}
.mega-svc a.mi:hover{border-color:var(--accent);background:var(--surface-2)}
.mega-svc a.mi b{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.mega-svc a.mi span{font-size:14.5px;opacity:.7;margin-top:6px}
.mega-svc a.mi::after{content:"";position:absolute;right:18px;top:24px;width:10px;height:10px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s}
.mega-svc a.mi:hover::after{transform:translateX(3px) rotate(45deg)}
.menu-in .m-sub a.m-svc{font-weight:700;opacity:1}
.menu-in .m-sub a.m-svc + a:not(.m-svc){margin-top:6px;padding-top:15px;border-top:1px solid var(--line-2)}
.asst-ft .asst-priv{opacity:.7}
/* even line breaks: no one-word last lines on headings, leads, questions and running text.
   A two-sentence heading breaks between its sentences where it can (.hs, one span per sentence). */
h1,h2,h3,.book-title,.qa summary span{text-wrap:balance}
p,li,.proc-note span,.ft-btm span{text-wrap:pretty}
@media(min-width:700px){.head .lead,.phero .lead,.cta-panel .lead{text-wrap:balance}}
.hs{display:inline-block}
.mega .feat{align-self:start}.mega .feat .go{margin-top:8px}

/* one line under the email form, linking the privacy notice */
.form-priv{font-size:13.5px;opacity:.65}
.form-priv a{border-bottom:1px solid rgba(255,255,255,.5)}
.form-priv a:hover{border-color:#fff}

/* privacy notice: plain reading text */
.legal{padding-top:clamp(24px,3vw,40px)}
.legal-body h2{font-size:clamp(22px,2.2vw,28px);margin:44px 0 14px;padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 20px)}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{font-size:16.5px;line-height:1.7;max-width:68ch}
.legal-body p+p,.legal-body p+ul,.legal-body ul+p{margin-top:14px}
.legal-body ul{list-style:disc;padding-left:22px;display:grid;gap:10px}
.legal-body li{opacity:.78}
.legal-body li::marker{color:#fff}
.legal-body li b{font-weight:700}
.legal-body a{border-bottom:1px solid rgba(255,255,255,.45)}
.legal-body a:hover{border-color:#fff}

/* 404 */
.nf{min-height:72vh;min-height:72svh;display:flex;align-items:center}
.nf-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

/* ================= function pages (2026-10-19): finance.html and the others ================= */
.fn-hero .kicker{opacity:1}
.fn-hero .lead{max-width:64ch}
.fn-hero .nf-cta{margin-top:26px}
.fn-q{display:block}
@media(min-width:900px){.faq-split .fn-q{margin-top:-22px}}
.fn-items{grid-template-columns:1fr}
@media(min-width:640px){.fn-items{grid-template-columns:1fr 1fr}}
.fn-items .item p{max-width:46ch}
.cta-panel .nf-cta{margin-top:0}

/* ---- motion preview (2026-10-21): on only with ?motion, see assets/js/motion.js. Everything below is
   scoped to html.motion so the default page is untouched until Rey approves it. ---- */
/* the atmosphere canvas over the hero: motes in the accent, above the copy, blended so white text stays white */
html.motion .atmos{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.95;transition:opacity 1.2s}
html.motion.intro-run .atmos{opacity:0}
/* scenes hand off with depth: the next one approaches from slightly larger and soft, the last one pulls back, dims and blurs */
html.motion .ph{transform:scale(1.06);filter:blur(7px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform 1.3s cubic-bezier(.2,.8,.2,1),filter .85s ease}
html.motion .ph.on{opacity:1;transform:none;filter:none}
html.motion .ph.past{opacity:0;transform:scale(.94);filter:blur(9px)}
/* the hero words arrive in sequence, soft to sharp: kicker, then headline, then lead, then the caption */
html.motion .hero-copy .sw{transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
html.motion .hero-copy h1.sw{transition-delay:.09s}
html.motion .hero-copy .lead.sw{transition-delay:.18s}
html.motion .hero-copy .sw.is-out{opacity:0;transform:translateY(12px);filter:blur(7px)}
html.motion .hero-live p{filter:blur(5px);transition:opacity .35s ease,transform .55s cubic-bezier(.2,.8,.2,1),filter .35s ease}
html.motion .hero[data-phase="0"] .hero-live p[data-ph="0"],html.motion .hero[data-phase="1"] .hero-live p[data-ph="1"],html.motion .hero[data-phase="2"] .hero-live p[data-ph="2"]{filter:none;transition-delay:.42s}
/* the same language down the page: sections and cards arrive soft to sharp, in sequence */
html.motion.js .reveal{opacity:0;transform:translateY(24px);filter:blur(9px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1),filter .85s ease;transition-delay:calc(var(--i,0) * 90ms)}
html.motion.js .reveal.in{opacity:1;transform:none;filter:none}
/* Start here cards lean toward the pointer (motion.js sets --rx and --ry on desktop) */
html.motion.js .items .item.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .35s ease,filter .85s ease}

/* 2026-10-23 (Rey: the whole header about 50% bigger, with spacing like Gartner's): the bar, the mark, the
   name, the Miami pill, the nav, the language link and the button scale together. Three tiers so the centered
   nav never collides with the badge: phones grow a little, 1000 to 1399px grows the bar and the mark and keeps
   the text moderate (the 1180px check needs the nav centered with room on both sides), 1400px and up gets the
   full size and a bar wider than the page content, which is where the Gartner-like air comes from. Everything
   under the header reads var(--hdr), so the hero and the anchors follow. */
@media(min-width:1000px){
  :root{--hdr:104px}
  .hdr .wrap{width:min(1440px,calc(100% - 48px))}
  .bar{gap:28px}
  .brand{gap:12px}
  .brand .mk{width:40px;height:40px;border-radius:9px}
  .brand .mk svg{width:22px;height:22px}
  .brand .wm{font-size:26px}
  .brand-wrap{gap:18px}
  .nav{gap:4px}
  .nav a,.nav .has-mega>button{padding:9px 11px;font-size:15px;border-radius:8px}
  .right{gap:10px}
  .lang{font-size:14px;padding:8px 10px;border-radius:8px;margin-right:4px}
  .bar .btn-sm{padding:12px 20px;font-size:16px;border-radius:8px}
  .hdr-loc{--ring:4;font-size:12px;gap:12px;padding:6px 13px 6px 11px}
  .hdr-loc i{width:7px;height:7px}
}
@media(min-width:1000px) and (max-width:1179px){
  .bar .hdr-loc{gap:14px;padding:0;border:0;background:none}
  .bar .hdr-loc i{width:6px;height:6px}
}
@media(min-width:1400px){
  .hdr .wrap{width:min(1440px,calc(100% - 64px))}
  .bar{gap:40px}
  .brand{gap:14px}
  .brand .mk{width:44px;height:44px;border-radius:10px}
  .brand .mk svg{width:24px;height:24px}
  .brand .wm{font-size:29px}
  .brand-wrap{gap:22px}
  .nav{gap:12px}
  .nav a,.nav .has-mega>button{padding:11px 18px;font-size:19px}
  .right{gap:16px}
  .lang{font-size:16px;padding:9px 12px;margin-right:6px}
  .bar .btn-sm{padding:14px 26px;font-size:18px}
  .hdr-loc{font-size:14px;gap:18px;padding:9px 19px 9px 16px}
  .hdr-loc i{width:8px;height:8px}
}
@media(max-width:999px){
  :root{--hdr:84px}
  .brand .mk{width:36px;height:36px;border-radius:8px}
  .brand .mk svg{width:19px;height:19px}
  .brand .wm{font-size:24px}
  .bar .btn-sm{padding:11px 20px;font-size:16px}
  .burger{width:50px;height:50px}
}


/* The AI curve (2026-10-23, after the Scribe Optimize reference Rey sent): a lifted panel with the chart on the
   left and the stage card on the right. From 900px the four stages sit on the line at their own points; below
   that the line goes and the stages become a two-by-two list. The selected stage turns emerald. */
.curve{display:grid;grid-template-columns:1fr;gap:18px;padding:clamp(16px,2.2vw,26px);border-radius:var(--r);border:1px solid var(--line-3);background:var(--surface)}
@media(min-width:1000px){.curve{grid-template-columns:1.6fr 1fr;gap:22px}}
.curve-chart{position:relative;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);padding:22px 22px 24px;overflow:hidden}
.curve-title{position:absolute;left:24px;top:20px;margin:0;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;z-index:2}
.curve-sub{position:absolute;left:24px;top:44px;margin:0;font-size:13px;color:var(--accent);z-index:2}
.curve-svg{display:none;position:absolute;inset:0;width:100%;height:100%}
.curve-grid line{stroke:var(--line);stroke-width:1}
.curve-line{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:.9;vector-effect:non-scaling-stroke}
.curve-stages{list-style:none;margin:0;padding:66px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.curve-btn{position:relative;display:block;width:100%;text-align:left;padding:0 0 0 24px;background:none;border:0;color:#fff;cursor:pointer;font:inherit}
.curve-btn i{position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--surface-2);transition:background .2s,box-shadow .2s}
.curve-btn b{display:block;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em;transition:color .2s}
.curve-btn span{display:block;font-size:13px;line-height:1.45;opacity:.6;margin-top:4px;transition:opacity .2s}
.curve-btn:hover b,.curve-btn[aria-selected="true"] b{color:var(--accent)}
.curve-btn[aria-selected="true"] i{background:var(--accent);box-shadow:0 0 0 4px var(--surface-2),0 0 18px var(--accent)}
.curve-btn[aria-selected="true"] span{opacity:.92}
.curve-btn:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
@media(min-width:900px){
  .curve-chart{aspect-ratio:1.7/1;padding:0;min-height:0}
  .curve-svg{display:block}
  .curve-stages{display:block;position:absolute;inset:0;padding:0}
  .curve-stage{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
  .curve-btn{position:absolute;left:-7px;top:-7px;width:168px;padding:24px 0 0}
  .curve-btn span{font-size:12.5px}
  .curve-stage.flip .curve-btn{width:200px}
  .curve-btn i{top:0}
  .curve-stage.flip .curve-btn{left:auto;right:-7px;text-align:right}
  .curve-stage.flip .curve-btn i{left:auto;right:0}
}
@media(min-width:1000px) and (max-width:1179px){.curve-btn{width:150px}.curve-btn span{font-size:12px}}
.curve-cards{display:flex;flex-direction:column}
.curve-card{flex:1;padding:clamp(20px,2.4vw,30px);border-radius:8px;background:var(--surface-2);border:1px solid var(--line);animation:curvein .35s ease}
.curve-card[hidden]{display:none}
.curve-card h3{font-size:24px;line-height:1.25;margin:0 0 14px}
.curve-card dl{margin:0}
.curve-card dl>div{padding:14px 0 15px;border-top:1px solid var(--line)}
.curve-card dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.curve-card dd{margin:0;font-size:17px;line-height:1.5}
.curve-dots{display:flex;gap:6px;justify-content:center;padding-top:16px}
.curve-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .2s}
.curve-dots i.on{background:var(--accent)}
@keyframes curvein{from{transform:translateY(8px)}to{transform:none}}   /* movement only: an opacity keyframe read as 0 contrast in the audit the instant a pane is shown */
@media(prefers-reduced-motion:reduce){.curve-card{animation:none}}

/* 2026-10-23 (Rey): the Start here labels make a statement, about 40% bigger and bold, in the order How we work, Where we work, Services, Tool, Policy */
#start .item .kicker{font-size:18px;font-weight:800;letter-spacing:.08em;margin-bottom:10px}

/* 2026-10-23 (Rey): previous and next scene buttons at the two edges of the stage */
.stage-nav{position:absolute;inset:0;z-index:6;pointer-events:none}
.stage-btn{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line-3);background:rgba(17,24,32,.72);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;opacity:.6;cursor:pointer;transition:opacity .2s,border-color .2s,background .2s}
.stage-btn:hover,.stage-btn:focus-visible{opacity:1;border-color:var(--accent);background:rgba(17,24,32,.95)}
.stage-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.stage-btn svg{width:18px;height:18px}
.stage-btn.prev{left:6px}
.stage-btn.next{right:6px}
@media(max-width:899px){.stage-btn{width:38px;height:38px;opacity:.75}}