/* SPACEALIST site.css: the only stylesheet of the website (home, guides, Insights, About, Glossary, 404).
   It has four parts, and a later part overrides an earlier one, so the order matters:
     1. Base: fonts, colour tokens, layout and components     3. Article pages
     2. Home page                                             4. Final design layer (menu, boxes, buttons, details)
   In some selectors ":root" is repeated (html:root:root .x). It stands in for design switches that no longer exist and
   keeps the selector strong enough to win over earlier parts; remove it only together with a check.
   Every :hover rule has a twin for touch screens (html.touch ... .tap) right after the hover rules.
   Cleaned on 20 Oct 2026 (v272): rules for classes that no longer exist and declarations that were always overridden
   were removed. Before and after any change that should not alter the look, run
     python3 _tools/check/compare_versions.py <copy of the previous version> site
   Colours: use the tokens below, not new colour codes. */
/* colour roles (one logic for the whole site)
   TEXT      --text navy (headings), --t2 slate (body), --accent tinted blue (labels, links, numbers on light)
   SURFACE   white page, --surface tinted blue (sections, tables, charts), --highlight ice (key takeaways, active states)
   DARK      --dark (hero, footer) is the deepest blue, contact is brand navy (--navy), one step lighter; text on it --on-dark (soft blue-grey, for every paragraph) and --on-dark-2 (dimmer), highlighted words --on-dark-accent; sky only here and as decoration
   ACTION    on dark: .btn-sky (sky, hover --sky-hover-*). On light and contact cards: the blue gradient --action-a to --action-b, hover --action-hover-* (.btn-navy = .btn-ice = .dl-btn)
   One value, one place: change a colour here, never as a literal in a rule.
   MEANING   green and coral only in Do/Don't (amber tokens are kept for notes, not used at the moment) */
:root{--accent:var(--sky-t);--surface:var(--b-95);--highlight:var(--ice);--dark:var(--b-18);--on-dark:#aebfcf;--on-dark-2:#8498ab;--on-dark-accent:#8cc4e6;--action-a:#217fb4;--action-b:#00679a;--action-hover-a:#006a9d;--action-hover-b:#005385;--sky-hover-a:#00b5f5;--sky-hover-b:#009cda;}

/* ===================== 1. Base: fonts, colours, layout, components ===================== */
/* FONTS (self-hosted, no requests to Google). The "-ce" files hold only the Central European letters (Latin Extended-A and Romanian),
   about 20 KB together instead of 91 KB, and load only on pages that use such a letter (e.g. the š in Kuneš). */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/inter-ce.woff2) format('woff2');
  unicode-range:U+0100-017F,U+0218-021B;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:600 700;font-display:swap;
  src:url(fonts/oxanium-ce.woff2) format('woff2');
  unicode-range:U+0100-017F,U+0218-021B;}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:600 700;font-display:swap;
  src:url(fonts/oxanium-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* COLOURS. Every colour of the website comes from the two colours of the logo, navy #003153 and sky #00BFFF:
   a ramp from navy to sky (blended in OKLCH, so the middle stays a clear blue), lighter tints of it towards white and
   darker shades towards black. The tokens --b-NN are named by lightness, from 0 (black) to 100 (white).
   The only other colours are the meanings green (Do, ok), coral (Don't) and yellow (draft note), plus pure white and black.
   For a transparent version use rgb(var(--name-rgb) / .3). */
:root{
  --b-97:#f3f7f9;
  --b-95:#e8f0f6;
  --ice:#e8f6fd;   /* the light cyan of the information boxes (Key takeaways, FAQ); the grey-blue --b-95 is for section backgrounds */
  --b-94:#e8f6fd;
  --b-88:#b6e0f2;
  --b-87:#ccd7e1;
  --b-84:#90d7f3;
  --b-80:#40cfff;
  --sky:#00bfff; --sky-rgb:0 191 255;
  --b-68:#00a6de;
  --b-66:#7f96ab;
  --b-61:#0a8ec4;
  --b-60:#0d89c1;
  --b-55:#0c7aaf; --b-55-rgb:12 122 175;
  --b-50:#096998;
  --b-46:#085e8d; --b-46-rgb:8 94 141;
  --b-45:#335a75; --b-45-rgb:51 90 117;
  --b-39:#044a74; --b-39-rgb:4 74 116;
  --b-35:#023d63; --b-35-rgb:2 61 99;
  --navy:#003153; --navy-rgb:0 49 83;
  --b-27:#002947; --b-27-rgb:0 41 71;
  --b-24:#00223b; --b-24-rgb:0 34 59;
  --b-18:#001324; --b-18-rgb:0 19 36;
  --ok:#12b886; --ok-rgb:18 184 134;
  --coral:#f2604b; --coral-rgb:242 96 75;
  --ok-bg:#e8f6ee;
  --coral-bg:#fdecea;
  --ok-text:#0a3d24;
  --coral-text:#6b1710;
  --warn-bg:#fff4d6;
  --warn-text:#6b4e00;
}
:root{--sky-h:var(--b-68);--sky-t:var(--b-50);--white:#ffffff;--grey:var(--b-95);--text:var(--navy);--t2:var(--b-45);--fd:Oxanium,sans-serif;--fb:Inter,sans-serif;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{font-family:var(--fb);color:var(--text);overflow-x:hidden;line-height:1.7;background:var(--white);}
a{text-decoration:none;color:var(--sky);}
::selection{background:rgb(var(--sky-rgb) / .2);}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px;}
section[id]{scroll-margin-top:66px;}
/* SKIP LINK (appears only after pressing Tab) */
.skip{position:absolute;left:1rem;top:-100px;z-index:200;padding:.6rem 1rem;border-radius:6px;background:var(--sky);color:var(--navy);font-size:.85rem;font-weight:600;}
.skip:focus{top:1rem;}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;border-bottom:1px solid rgb(var(--navy-rgb) / .08);transition:box-shadow .3s;}
nav.up{box-shadow:0 4px 12px -2px rgb(var(--navy-rgb) / .15);}
.ni{max-width:1100px;margin:0 auto;padding:0 2rem;height:66px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;}
.logo img{height:46px;width:auto;display:block;}
.nl{display:flex;list-style:none;}
.nl a{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);}
html:not(.touch) .nl a:hover,.nl a.act{opacity:1;}
.nl a.act{border-bottom:2px solid var(--sky);padding-bottom:1px;}
.hbtn{display:none;flex-direction:column;gap:5px;width:36px;height:36px;cursor:pointer;background:none;border:none;padding:6px;}
.hbtn span{display:block;height:1.5px;background:var(--navy);border-radius:2px;transition:transform .25s,opacity .25s;}
.hbtn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hbtn.open span:nth-child(2){opacity:0;}
.hbtn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mob{display:none;position:fixed;top:66px;left:0;right:0;z-index:99;background:#fff;border-bottom:1px solid rgb(var(--navy-rgb) / .08);flex-direction:column;}
.mob.open{display:flex;}
.mob a{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);padding:.9rem 2rem;border-bottom:1px solid rgb(var(--navy-rgb) / .06);}
/* HERO */
#hero{min-height:100svh;min-height:100lvh;display:flex;flex-direction:column;justify-content:center;padding:120px 2rem 64px;position:relative;background:var(--b-18);}
#hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;}
#starfield{position:absolute;z-index:0;pointer-events:none;}
.hero-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;width:100%;}
#hero .hero-title{font-family:var(--fd);font-weight:700;color:#fff;}
#hero .hero-title .hl{color:var(--sky);}
#hero .sub{font-size:clamp(1rem,1.6vw,1.15rem);color:var(--on-dark);line-height:1.7;max-width:540px;margin-bottom:2.2rem;font-weight:300;}

/* hero entrance (CSS only; off for reduced motion) */
.fu{opacity:0;transform:translateY(20px);animation:fu .7s var(--d,0s) ease forwards;}
@keyframes fu{to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.fu{opacity:1;transform:none;animation:none;}}
/* CONSISTENT 3D BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.8rem 1.8rem;font-family:var(--fd);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:6px;cursor:pointer;border:1px solid;}
.btn-sky{background:linear-gradient(135deg, var(--b-80) 0%, var(--sky) 100%);border-top-color:rgba(255,255,255,.6);border-left-color:rgba(255,255,255,.4);border-right-color:rgb(var(--b-46-rgb) / .3);border-bottom-color:rgb(var(--b-46-rgb) / .5);}
html:not(.touch) .btn-sky:hover{background:linear-gradient(135deg, var(--b-80) 0%, var(--sky-h) 100%);transform:translate(-2px, -2px);box-shadow: 6px 8px 16px -2px rgb(var(--sky-rgb) / .35), inset 1px 1px 3px rgba(255,255,255,.7);}
.btn-sky:active{transform:translate(1px, 1px);box-shadow: 2px 3px 6px -2px rgb(var(--sky-rgb) / .2), inset 2px 2px 4px rgb(var(--b-46-rgb) / .3);}
/* ABOUT */
#about{background:var(--white);z-index:1;}
/* CONSISTENT 3D PHOTO OVERLAY EFFECT */
.photo-circle{border-radius:50%;overflow:hidden;flex-shrink:0;position:relative;}
.photo-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.photo-circle::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;border-top:1px solid rgba(255,255,255,.8);border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgb(var(--navy-rgb) / .08);border-bottom:1px solid rgb(var(--navy-rgb) / .15);box-shadow:inset 1px 1px 2px rgba(255,255,255,.8);background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgb(var(--navy-rgb) / 0.04) 100%);}
.lbl{font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-t);display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;}
.lbl::before{content:'';width:24px;height:1.5px;background:var(--sky);}
h2{font-family:var(--fd);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;color:var(--navy);line-height:1.08;}
/* SERVICES & CONSISTENT 3D CARDS */
#services{z-index:1;}
.svc-grid{display:grid;}
.svc-card{border-radius:12px;position:relative;overflow:hidden;}
html:not(.touch) .svc-card:hover{transform:translate(-2px, -2px);box-shadow:8px 12px 20px -3px rgb(var(--navy-rgb) / .15), 0 0 0 1px rgb(var(--sky-rgb) / .3), 0 10px 32px -8px rgb(var(--sky-rgb) / .35), inset 1px 1px 3px rgba(255,255,255,1);}
.svc-card h3{font-family:var(--fd);font-weight:700;color:var(--navy);transition:border-color .2s;}
html:not(.touch) .svc-card:hover h3{border-bottom-color:var(--sky);}
.svc-card ul{list-style:none;display:flex;flex-direction:column;gap:.45rem;}
.svc-card ul li{font-size:.87rem;color:var(--t2);padding-left:1rem;position:relative;line-height:1.55;}
.svc-card ul li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--sky);}
/* SERVICE ICONS */
.svc-ico{transition:background .25s ease;}
.svc-ico svg{transition:stroke .25s ease;}
html:not(.touch) .svc-card:hover .svc-ico{background:var(--sky);}
html:not(.touch) .svc-card:hover .svc-ico svg{stroke:var(--navy);}

/* PROCESS */
#how{background:var(--white);z-index:1;}
html:not(.touch) .faq details:hover{box-shadow:4px 6px 14px -3px rgb(var(--navy-rgb) / .1), 0 0 0 1px rgb(var(--sky-rgb) / .25), 0 8px 26px -10px rgb(var(--sky-rgb) / .35), inset 1px 1px 2px rgba(255,255,255,.8);}
.faq summary::-webkit-details-marker{display:none;}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--sky);}

/* the open question sticks below the menu while you read a long answer, so it can always be closed */
.faq details[open] summary{position:sticky;top:66px;z-index:2;border-radius:12px 12px 0 0;background:linear-gradient(135deg,#ffffff 0%,var(--b-97) 100%);box-shadow:0 6px 12px -10px rgb(var(--navy-rgb) / .35);}
.faq details[open]{border-radius:12px;}
/* CONTACT & CONSISTENT 3D BUTTONS */
#contact{position:relative;z-index:1;}
.contact-wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.cl-left .lbl{color:var(--sky);}
.cl-left .lbl::before{background:var(--sky);}
.cl-left h2{color:#fff;margin-bottom:1rem;}
.cl-left p{color:var(--on-dark);max-width:380px;}
.cl-right{display:flex;flex-direction:column;}
.ccard{display:flex;align-items:center;}
html:not(.touch) .ccard:hover{background:linear-gradient(135deg, rgb(var(--sky-rgb) / .15) 0%, rgb(var(--sky-rgb) / .05) 100%);border-top-color:rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.12);border-right-color:rgba(0,0,0,.25);border-bottom-color:rgba(0,0,0,.4);transform:translate(-2px, -2px);box-shadow:8px 12px 20px -3px rgba(0,0,0,.4), 0 0 28px -6px rgb(var(--sky-rgb) / .5), inset 1px 1px 3px rgba(255,255,255,.15);}
.ccard:active{transform:translate(1px, 1px);box-shadow:2px 3px 6px -3px rgba(0,0,0,.3), inset 2px 2px 4px rgba(0,0,0,.2);}
.ccard-icon{background:rgb(var(--sky-rgb) / .15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ccard-icon svg{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ccard-label{font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.ccard-val{font-family:var(--fd);font-weight:600;overflow-wrap:break-word;word-break:break-word;}
.qr-wrap{display:flex;align-items:center;}
/* QR KÓD S OSTRÝMI ROHY, BEZ 3D A BEZ STÍNŮ */
.qr-wrap img{flex-shrink:0;border-radius:0;box-shadow:none;border:none;}
.qr-text p{font-size:.82rem;color:var(--on-dark);line-height:1.6;margin:0;}
.dl-row{display:flex;flex-wrap:wrap;}
.dl-btn svg{fill:none;stroke-linecap:round;stroke-linejoin:round;}
html:not(.touch) .dl-btn:hover{border-color:var(--sky);box-shadow:0 0 22px -6px rgb(var(--sky-rgb) / .6);}

/* FOOTER */
footer{background:var(--b-18);border-top:1px solid rgba(255,255,255,.05);padding:3rem 2rem 1.75rem;position:relative;z-index:1;}
.f-top{max-width:1100px;margin:0 auto 1.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem 2rem;}
.f-brand img{display:block;}
.f-slogan{font-family:var(--fd);font-weight:600;color:var(--on-dark);margin-top:.75rem;letter-spacing:.02em;}
.fi{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.fc{font-size:.68rem;color:var(--on-dark-2);letter-spacing:.1em;text-transform:uppercase;}
.fls{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;}
.fls a{font-size:.68rem;color:var(--on-dark-2);letter-spacing:.1em;text-transform:uppercase;transition:color .2s;}
html:not(.touch) .fls a:hover{color:#fff;}
.sec-inner{max-width:1100px;margin:0 auto;}
/* PRIVACY DIALOG */
.modal{margin:auto;max-height:85vh;overflow:auto;border:none;background:#fff;color:var(--t2);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
.modal::backdrop{background:rgb(var(--b-18-rgb) / .75);backdrop-filter:blur(4px);}
.modal p+p{margin-top:.8rem;}
.modal h3{font-family:var(--fd);font-size:.95rem;font-weight:700;color:var(--navy);}
.modal ul{padding-left:1.1rem;display:flex;flex-direction:column;gap:.55rem;}
.modal strong{color:var(--navy);font-weight:600;}
.modal a{color:var(--sky-t);text-decoration:underline;}
.modal .upd{opacity:.85;margin-bottom:1.3rem;}
.modal-x{width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.3rem;line-height:1;}
html:not(.touch) .modal-x:hover{background:rgb(var(--sky-rgb) / .2);}
.js .r.vis{opacity:1;transform:translateY(0);}
/* RESPONSIVE */
@media(max-width:860px){.contact-wrap{grid-template-columns:1fr;gap:2.5rem;}}
@media(max-width:760px){.nl{display:none;}
.hbtn{display:flex;}}
@media(max-width:600px){#hero,#about,#services,#how,#contact{padding:5rem 1.25rem;}
#hero{padding-top:100px;}
.ni{padding:0 1.25rem;}}
/* ================= NAV CTA + INSIGHTS ================= */
.nl{margin-left:auto;}
.mob a[aria-current]{color:var(--sky-t);}
/* home page teaser */
#insights{z-index:1;}
.ins-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}

/* page header band (insights pages): same network as the hero */
.phead{position:relative;background:var(--b-18);overflow:hidden;padding:140px 2rem 4rem;color:#fff;}
.phead::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;}
.phead .sec-inner{position:relative;z-index:1;}
.phead h1{font-family:var(--fd);font-size:clamp(2.1rem,4vw,3.4rem);font-weight:700;line-height:1.08;max-width:860px;margin-bottom:1.1rem;}
.phead .intro{font-size:clamp(1rem,1.5vw,1.12rem);font-weight:300;line-height:1.7;color:var(--on-dark);max-width:640px;}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.72rem;letter-spacing:.06em;color:var(--on-dark-2);margin-bottom:1.6rem;}
.crumbs a{color:var(--on-dark);}
html:not(.touch) .crumbs a:hover{color:#fff;}
.crumbs span[aria-hidden]{opacity:.5;}

/* article */
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:2rem;font-size:.8rem;color:var(--on-dark);}
.art-wrap{padding:4rem 2rem 5rem;background:#fff;}
.art-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:230px minmax(0,720px);gap:4rem;justify-content:space-between;}
html:not(.touch) .toc a:hover{color:var(--navy);border-left-color:var(--sky);}
.prose{color:var(--t2);font-size:1.04rem;line-height:1.8;}
.prose>*+*{margin-top:1.2rem;}
.prose .lede{font-size:1.18rem;line-height:1.7;color:var(--navy);}
.prose h2{font-size:clamp(1.45rem,2.2vw,1.8rem);margin-top:3rem;margin-bottom:0;scroll-margin-top:90px;}
.prose a{color:var(--sky-t);text-decoration:underline;text-underline-offset:3px;}
.prose strong{color:var(--navy);font-weight:600;}
.prose ul,.prose ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem;}
.prose ul li::marker{color:var(--sky);}
.prose figcaption{font-size:.8rem;color:var(--t2);opacity:.85;}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;}
.prose th{text-align:left;font-family:var(--fd);font-size:.8rem;letter-spacing:.04em;padding:.75rem 1rem;}
.prose td{padding:.75rem 1rem;border-bottom:1px solid rgb(var(--navy-rgb) / .1);vertical-align:top;}
.art-foot{margin-top:3.5rem;padding-top:2rem;border-top:1px solid rgb(var(--navy-rgb) / .1);display:flex;flex-direction:column;}
html:not(.touch) .share a:hover{border-color:var(--sky);}
.art-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--b-18-rgb) / .92) 0%,rgb(var(--b-18-rgb) / .55) 100%);}
.art-cta>*{position:relative;}
.prose .art-cta a.btn{text-decoration:none;}

@media(max-width:960px){.art-grid{grid-template-columns:1fr;gap:2rem;}}
@media(max-width:600px){#insights,.art-wrap{padding-left:1.25rem;padding-right:1.25rem;}
.phead{padding:110px 1.25rem 3rem;}}
/* article helpers */
.dot{display:inline-block;vertical-align:-.05rem;}
.prose ul.checklist{list-style:none;padding-left:0;}
.prose ul.checklist li{position:relative;}
.prose ul.checklist li::before{content:'';position:absolute;left:0;border-radius:50%;background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003153' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.8rem no-repeat;}

html:not(.touch) .share a:hover,html:not(.touch) .share button:hover{border-color:var(--sky);box-shadow:0 0 14px -6px rgb(var(--sky-rgb) / .6);}
.toc a{transition:color .2s,border-color .2s,background .2s;}
.toc a.act{color:var(--navy);font-weight:600;border-left-color:var(--sky);background:linear-gradient(90deg,rgb(var(--sky-rgb) / .08),transparent);}
/* compact cards: icon (or number) and title on one row, everywhere */
.card-head{align-items:center;gap:.9rem;margin-bottom:.9rem;padding-bottom:.85rem;border-bottom:2px solid rgb(var(--sky-rgb) / .25);transition:border-color .2s;}
html:not(.touch) .svc-card:hover .card-head{border-bottom-color:var(--sky);}
/* services: summary + button, details in a window */
.svc-card:has(.svc-open){cursor:pointer;flex-direction:column;}
.svc-open{border:none;cursor:pointer;font-family:var(--fd);letter-spacing:.08em;text-transform:uppercase;}
.svc-open span{display:inline-block;transition:transform .2s;}
html:not(.touch) .svc-card:hover .svc-open span{transform:translateX(4px);}
.svc-m-sum{font-size:.98rem!important;}
.svc-m-list ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.svc-m-list li{position:relative;padding-left:1.1rem;color:var(--t2);}
.svc-m-list li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--sky);}
.svc-modal h2:focus{outline:none;}

.prose .tbl table th:first-child,.prose .tbl table td:first-child{padding-left:1.1rem;}
/* mistakes: blue "!" instead of an orange cross */

html:not(.touch) .share a:hover{transform:translate(-2px,-2px);box-shadow:6px 8px 16px -2px rgb(var(--sky-rgb) / .35);}
html:not(.touch) .share button:hover{border-color:var(--sky);transform:translate(-2px,-2px);}

/* share row with neutral class names (not hidden by content blockers), icon-only buttons */
.art-spread{display:flex;flex-direction:column;gap:.8rem;}
.art-spread .spread-t{font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--navy);}
.spread-b{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}
.art-spread .sb{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;color:var(--navy);font:700 .72rem var(--fd);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;}
.art-spread .sb svg{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.art-spread .sb svg .fill{stroke:none;}
html:not(.touch) .art-spread .sb:hover{background:var(--sky);border-color:var(--sky);transform:translate(-2px,-2px);box-shadow:5px 7px 14px -4px rgb(var(--sky-rgb) / .45);}
/* no scrolling of the page behind an open window */
html:has(dialog[open]){overflow:hidden;}
.modal{overscroll-behavior:contain;}
/* the "Let's talk" boxes on the Insights page and under articles use the dark navy card of the old "Not sure where you fit?" box */
.art-cta{position:relative;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.art-cta>h3,.art-cta>p{flex:1 1 360px;}
.prose .art-cta h3{font-family:var(--fd);font-weight:700;line-height:1.3;margin:0 0 .3rem;}
.art-cta p{font-size:.9rem;line-height:1.65;margin:0;}
.art-cta{display:grid;grid-template-columns:1fr auto;column-gap:2rem;}
.art-cta>h3{grid-column:1;grid-row:1;}
.art-cta>p{grid-column:1;grid-row:2;}
.art-cta>a.btn{grid-column:2;grid-row:1/3;align-self:center;}
@media(max-width:640px){.art-cta{grid-template-columns:1fr;}
.art-cta>a.btn{grid-column:1;grid-row:3;margin-top:.9rem;}}
.art-cta{row-gap:0;grid-template-rows:auto auto;align-content:center;}
.art-cta>h3{align-self:end;}
.art-cta>p{align-self:start;}
/* ===== insights: search, filters, home carousel ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ins-tools{display:flex;flex-wrap:wrap;}
.ins-search{position:relative;}
.ins-search svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--sky-t);stroke-width:2;stroke-linecap:round;pointer-events:none;}
.ins-search input{width:100%;font:inherit;color:var(--navy);background:#fff;border:1px solid rgb(var(--navy-rgb) / .16);padding:.72rem 1rem .72rem 2.7rem;transition:border-color .2s,box-shadow .2s;}
.ins-search input::placeholder{color:#5f7c93;}
.ins-search input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgb(var(--sky-rgb) / .18);}

.ins-count{font-size:.78rem;color:var(--t2);margin-bottom:1rem;min-height:1.2em;}
.ins-empty{margin-top:1.5rem;padding:1.4rem 1.5rem;background:#fff;border:1px dashed rgb(var(--navy-rgb) / .2);border-radius:12px;color:var(--t2);}
.ins-empty a{color:var(--sky-t);text-decoration:underline;}

.ai-hit{font-size:.8rem;line-height:1.5;color:var(--t2);background:#fff;border-left:2px solid var(--sky);border-radius:0 6px 6px 0;padding:.45rem .6rem;margin:.1rem 0 .7rem;}
.ai-hit mark{background:rgb(var(--sky-rgb) / .22);color:var(--navy);border-radius:2px;padding:0 1px;}
html:not(.touch) .phead .lbl a:hover{color:#fff;}

/* carousel track runs to the right edge of the screen; counter instead of dots everywhere */
#insights{overflow-x:clip;}

/* 2 navy */
.btn-navy{background:linear-gradient(135deg,var(--b-39) 0%,var(--navy) 100%);}
html:not(.touch) .btn-navy:hover{background:linear-gradient(135deg,var(--b-46) 0%,var(--b-35) 100%);color:#fff;transform:translate(-2px,-2px);box-shadow:6px 8px 16px -2px rgb(var(--navy-rgb) / .4),inset 1px 1px 3px rgba(255,255,255,.25);}
html:not(.touch) .btn-navy:hover span{transform:translateX(4px);}
.btn-navy:active{transform:translate(1px,1px);box-shadow:2px 3px 6px -2px rgb(var(--navy-rgb) / .3),inset 2px 2px 4px rgba(0,0,0,.25);}
/* 3 glass: download buttons look and behave like the contact cards */

html:not(.touch) .dl-btn:hover{background:linear-gradient(135deg,rgb(var(--sky-rgb) / .15) 0%,rgb(var(--sky-rgb) / .05) 100%);transform:translate(-2px,-2px);box-shadow:8px 12px 20px -3px rgba(0,0,0,.4),0 0 28px -6px rgb(var(--sky-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.15);border-top-color:rgba(255,255,255,.2);}
.dl-btn:active{transform:translate(1px,1px);}
/* 5 controls: white with a navy outline,html:not(.touch) hover navy */
html:not(.touch) .art-spread .sb:hover{background:var(--navy);border-color:var(--navy);}
html:not(.touch) .art-spread .sb:hover svg{stroke:#fff;}
html:not(.touch) .art-spread .sb:hover svg .fill{fill:#fff;}
html:not(.touch) .art-spread .sb:hover{color:#fff;transform:translate(-2px,-2px);box-shadow:5px 7px 14px -4px rgb(var(--navy-rgb) / .35);}

html:not(.touch) .modal-x:hover{background:rgb(var(--navy-rgb) / .1);}

/* "Let's talk" hands over from the hero to the menu (desktop) or a floating button (phones) */

.js .r.vis{transform:none;}

/* the navy button changes colour on hover but does not move,html:not(.touch) so nothing around it is redrawn */
.btn-navy:hover,.btn-navy:active{transform:none;}
.btn-navy,.btn-sky{will-change:auto;backface-visibility:visible;}
.hbtn{margin-left:auto;}
/* "All insights" sits in the free row under the carousel (nothing next to it to redraw),html:not(.touch) and lifts on hover like every other button */
.btn-navy:hover{transform:translate(-2px,-2px);}
.btn-navy:active{transform:translate(1px,1px);}
/* contact section: vCard and PDF behave exactly like the contact cards (no leftover sky outline) */
.dl-btn,html:not(.touch) .dl-btn:hover,.dl-btn:active{border:1px solid;}
html:not(.touch) .dl-btn:hover{background:linear-gradient(135deg,rgb(var(--sky-rgb) / .15) 0%,rgb(var(--sky-rgb) / .05) 100%);border-top-color:rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.12);border-right-color:rgba(0,0,0,.25);border-bottom-color:rgba(0,0,0,.4);transform:translate(-2px,-2px);box-shadow:8px 12px 20px -3px rgba(0,0,0,.4),0 0 28px -6px rgb(var(--sky-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.15);}
.dl-btn:active{transform:translate(1px,1px);box-shadow:2px 3px 6px -3px rgba(0,0,0,.3),inset 2px 2px 4px rgba(0,0,0,.2);}

/* Service cards open a window,html:not(.touch) so they react exactly like article cards (the reveal-on-scroll rule
   used to block their lift) */
.js .svc-card.r.vis:hover{transform:translate(-2px,-2px);}
.js .svc-card.r.vis{transition:opacity .65s ease,transform .25s ease,box-shadow .25s ease;}
/* Contact section: solid material too (same 3D recipe, a lighter navy than the background) */
.ccard,.dl-btn{background:linear-gradient(135deg,var(--b-39) 0%,var(--b-35) 100%);backdrop-filter:none;}
html:not(.touch) .ccard:hover,html:not(.touch) .dl-btn:hover{background:linear-gradient(135deg,var(--b-46) 0%,var(--b-39) 100%);transform:translate(-2px,-2px);border-top-color:rgba(255,255,255,.22);border-left-color:rgba(255,255,255,.14);border-right-color:rgba(0,0,0,.28);border-bottom-color:rgba(0,0,0,.45);box-shadow:8px 12px 20px -3px rgba(0,0,0,.4),0 0 0 1px rgb(var(--sky-rgb) / .3),0 10px 32px -8px rgb(var(--sky-rgb) / .35),inset 1px 1px 3px rgba(255,255,255,.15);}
.ccard:active,.dl-btn:active{transform:translate(1px,1px);box-shadow:2px 3px 6px -3px rgba(0,0,0,.3),inset 2px 2px 4px rgba(0,0,0,.2);}
/* Space backgrounds: a nebula that is different every visit (set by site.js), with a calm fallback */
#hero::after{background:var(--nebula,radial-gradient(ellipse 55% 65% at 75% 35%,rgb(var(--b-46-rgb) / .45) 0%,transparent 65%));}
.phead::after{background:var(--nebula,radial-gradient(ellipse 55% 80% at 80% 30%,rgb(var(--b-46-rgb) / .45) 0%,transparent 65%));}
#contact{background:linear-gradient(180deg,var(--navy) 0%,var(--b-27) 100%);overflow:hidden;} /* brand navy (logo), one step lighter than --dark: deepest blue frames the page (hero, footer), navy carries the content */
#contact::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--nebula,none);opacity:.8;}
#contact>*{position:relative;z-index:1;}

/* each liftable card keeps its own layer all the time, so lifting one card does not make
   the browser (Safari) redraw and re-round the cards next to it */
.svc-card{will-change:transform;}
/* ======================================================================
   ONE 3D RECIPE FOR ALL BOXES AND ALL BUTTONS
   Light from the top left: light top/left edge, darker bottom/right edge, inner highlight,
   shadow to the bottom right. Clickable things lift towards the light on hover; information boxes stay.
   Box colour follows the section: grey boxes on white sections, white boxes on grey sections.
   ====================================================================== */
#about,#how,.art-wrap{--card-a:var(--b-97);--card-b:var(--b-95);--sec-bg:#ffffff;}
#services,#insights{--card-a:#ffffff;--card-b:var(--b-97);--sec-bg:var(--grey);}
:root{--edge-light-t:rgba(255,255,255,.8);--edge-light-l:rgba(255,255,255,.5);--edge-dark-r:rgb(var(--navy-rgb) / .10);--edge-dark-b:rgb(var(--navy-rgb) / .18);--box-sh:4px 6px 14px -3px rgb(var(--navy-rgb) / .12),inset 1px 1px 2px rgba(255,255,255,.8);--box-sh-hover:8px 12px 20px -3px rgb(var(--navy-rgb) / .15),0 0 0 1px rgb(var(--sky-rgb) / .3),0 10px 32px -8px rgb(var(--sky-rgb) / .35),inset 1px 1px 3px rgba(255,255,255,1);--btn-sh:3px 5px 12px -2px rgb(var(--navy-rgb) / .18),inset 1px 1px 2px rgba(255,255,255,.7);--btn-sh-hover:6px 8px 16px -2px rgb(var(--navy-rgb) / .28),inset 1px 1px 3px rgba(255,255,255,.3);}
/* Boxes: cards and information boxes share one look */
.svc-card,.prose .tbl,.toc{background:linear-gradient(135deg,var(--card-a,#fff) 0%,var(--card-b,var(--b-97)) 100%);box-shadow:var(--box-sh);}

.art-spread .sb{border:1px solid;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;}
html:not(.touch) .art-spread .sb:hover{background:linear-gradient(135deg,var(--b-39) 0%,var(--navy) 100%);border-color:var(--b-24);color:#fff;box-shadow:var(--btn-sh-hover);}
html:not(.touch) .art-spread .sb:hover{transform:translate(-2px,-2px);}
.art-spread .sb:active{transform:translate(1px,1px);box-shadow:2px 3px 6px -2px rgb(var(--navy-rgb) / .25),inset 2px 2px 4px rgba(0,0,0,.2);}

/* ======================================================================
   1) A button that lifts 2px on hover keeps a slightly larger invisible hover area,
      so the cursor never "falls off" its edge and the button does not shiver.
   2) On touch screens there is no hover: tapped buttons do not stay lifted.
   3) Articles: the article text and its boxes, tables and figures are flat (they are part of the text);
      3D is kept for navigation and actions: "On this page", the dark box at the end, buttons.
   ====================================================================== */
.btn,.art-spread .sb{position:relative;}
.btn::after,.art-spread .sb::after{content:'';position:absolute;inset:-6px;}
.prose .tbl{background:transparent;}
/* ── arrows and share icons: the clickable box never moves (so the pointer cannot slip off its edge);
   a visual layer behind the icon lifts and changes colour instead */
.art-spread .sb{background:transparent!important;border-color:transparent!important;box-shadow:none!important;transform:none!important;overflow:visible;isolation:isolate;}
.art-spread .sb::after{inset:0;}
.art-spread .sb::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;border:1px solid;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;}
.art-spread .sb svg{position:relative;transition:transform .25s ease,stroke .25s ease,color .25s ease;}
html:not(.touch) .art-spread .sb:hover::before{transform:translate(-2px,-2px);background:linear-gradient(135deg,var(--b-39) 0%,var(--navy) 100%);border-color:var(--b-24);box-shadow:var(--btn-sh-hover);}
html:not(.touch) .art-spread .sb:hover svg, html:not(.touch) .art-spread .sb:hover span{transform:translate(-2px,-2px);}
.art-spread .sb:active::before{transform:translate(1px,1px);box-shadow:2px 3px 6px -2px rgb(var(--navy-rgb) / .25),inset 2px 2px 4px rgba(0,0,0,.2);}
.art-spread .sb:active svg{transform:translate(1px,1px);}
html:not(.touch) .art-spread .sb:hover{color:#fff;}

/* touch twins of every hover rule (same order, so the same rule wins as with a mouse) */
html.touch .nl a.tap{opacity:1;}
html.touch .btn-sky.tap{background:linear-gradient(135deg, var(--b-80) 0%, var(--sky-h) 100%);transform:translate(-2px, -2px);box-shadow: 6px 8px 16px -2px rgb(var(--sky-rgb) / .35), inset 1px 1px 3px rgba(255,255,255,.7);}
html.touch .svc-card.tap{transform:translate(-2px, -2px);box-shadow:8px 12px 20px -3px rgb(var(--navy-rgb) / .15), 0 0 0 1px rgb(var(--sky-rgb) / .3), 0 10px 32px -8px rgb(var(--sky-rgb) / .35), inset 1px 1px 3px rgba(255,255,255,1);}
html.touch .svc-card.tap h3{border-bottom-color:var(--sky);}
html.touch .svc-card.tap .svc-ico{background:var(--sky);}
html.touch .svc-card.tap .svc-ico svg{stroke:var(--navy);}
html.touch .faq details.tap{box-shadow:4px 6px 14px -3px rgb(var(--navy-rgb) / .1), 0 0 0 1px rgb(var(--sky-rgb) / .25), 0 8px 26px -10px rgb(var(--sky-rgb) / .35), inset 1px 1px 2px rgba(255,255,255,.8);}
html.touch .ccard.tap{background:linear-gradient(135deg, rgb(var(--sky-rgb) / .15) 0%, rgb(var(--sky-rgb) / .05) 100%);border-top-color:rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.12);border-right-color:rgba(0,0,0,.25);border-bottom-color:rgba(0,0,0,.4);transform:translate(-2px, -2px);box-shadow:8px 12px 20px -3px rgba(0,0,0,.4), 0 0 28px -6px rgb(var(--sky-rgb) / .5), inset 1px 1px 3px rgba(255,255,255,.15);}
html.touch .dl-btn.tap{border-color:var(--sky);box-shadow:0 0 22px -6px rgb(var(--sky-rgb) / .6);}
html.touch .fls a.tap{color:#fff;}
html.touch .modal-x.tap{background:rgb(var(--sky-rgb) / .2);}
html.touch .crumbs a.tap{color:#fff;}

html.touch .toc a.tap{color:var(--navy);border-left-color:var(--sky);}
html.touch .share a.tap{border-color:var(--sky);}

html.touch .share a.tap,html.touch .share button.tap{border-color:var(--sky);box-shadow:0 0 14px -6px rgb(var(--sky-rgb) / .6);}
html.touch .svc-card.tap .card-head{border-bottom-color:var(--sky);}
html.touch .svc-card.tap .svc-open span{transform:translateX(4px);}
html.touch .share a.tap{transform:translate(-2px,-2px);box-shadow:6px 8px 16px -2px rgb(var(--sky-rgb) / .35);}
html.touch .share button.tap{border-color:var(--sky);transform:translate(-2px,-2px);}
html.touch .art-spread .sb.tap{background:var(--sky);border-color:var(--sky);transform:translate(-2px,-2px);box-shadow:5px 7px 14px -4px rgb(var(--sky-rgb) / .45);}

html.touch .phead .lbl a.tap{color:#fff;}
html.touch .btn-navy.tap{background:linear-gradient(135deg,var(--b-46) 0%,var(--b-35) 100%);color:#fff;transform:translate(-2px,-2px);box-shadow:6px 8px 16px -2px rgb(var(--navy-rgb) / .4),inset 1px 1px 3px rgba(255,255,255,.25);}
html.touch .btn-navy.tap span{transform:translateX(4px);}
html.touch .dl-btn.tap{background:linear-gradient(135deg,rgb(var(--sky-rgb) / .15) 0%,rgb(var(--sky-rgb) / .05) 100%);transform:translate(-2px,-2px);box-shadow:8px 12px 20px -3px rgba(0,0,0,.4),0 0 28px -6px rgb(var(--sky-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.15);border-top-color:rgba(255,255,255,.2);}
html.touch .art-spread .sb.tap{background:var(--navy);border-color:var(--navy);}
html.touch .art-spread .sb.tap svg{stroke:#fff;}
html.touch .art-spread .sb.tap svg .fill{fill:#fff;}
html.touch .art-spread .sb.tap{color:#fff;transform:translate(-2px,-2px);box-shadow:5px 7px 14px -4px rgb(var(--navy-rgb) / .35);}

html.touch .modal-x.tap{background:rgb(var(--navy-rgb) / .1);}

html.touch so nothing around it is redrawn */
.btn-navy.tap{transform:none;}
html.touch and lifts on hover like every other button */
.btn-navy.tap{transform:translate(-2px,-2px);}
html.touch .dl-btn.tap{border:1px solid;}
html.touch .dl-btn.tap{background:linear-gradient(135deg,rgb(var(--sky-rgb) / .15) 0%,rgb(var(--sky-rgb) / .05) 100%);border-top-color:rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.12);border-right-color:rgba(0,0,0,.25);border-bottom-color:rgba(0,0,0,.4);transform:translate(-2px,-2px);box-shadow:8px 12px 20px -3px rgba(0,0,0,.4),0 0 28px -6px rgb(var(--sky-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.15);}
html.touch so they react exactly like article cards (the reveal-on-scroll rule
   used to block their lift) */
.js .svc-card.r.vis.tap{transform:translate(-2px,-2px);}
html.touch .ccard.tap,html.touch .dl-btn.tap{background:linear-gradient(135deg,var(--b-46) 0%,var(--b-39) 100%);transform:translate(-2px,-2px);border-top-color:rgba(255,255,255,.22);border-left-color:rgba(255,255,255,.14);border-right-color:rgba(0,0,0,.28);border-bottom-color:rgba(0,0,0,.45);box-shadow:8px 12px 20px -3px rgba(0,0,0,.4),0 0 0 1px rgb(var(--sky-rgb) / .3),0 10px 32px -8px rgb(var(--sky-rgb) / .35),inset 1px 1px 3px rgba(255,255,255,.15);}

html.touch .art-spread .sb.tap{background:linear-gradient(135deg,var(--b-39) 0%,var(--navy) 100%);border-color:var(--b-24);color:#fff;box-shadow:var(--btn-sh-hover);}
html.touch .art-spread .sb.tap{transform:translate(-2px,-2px);}

html.touch .art-spread .sb.tap::before{transform:translate(-2px,-2px);background:linear-gradient(135deg,var(--b-39) 0%,var(--navy) 100%);border-color:var(--b-24);box-shadow:var(--btn-sh-hover);}
html.touch .art-spread .sb.tap svg, html.touch .art-spread .sb.tap span{transform:translate(-2px,-2px);}
html.touch .art-spread .sb.tap{color:#fff;}
/* the floating Let's talk stays fixed (the v69 rule ".btn{position:relative}" pulled it into the page flow,
   leaving a 90px white gap between Contact and the footer) */

.prose .dd{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1rem 0 1.5rem;}
.prose .dd-col{padding:1.1rem 1.2rem;}
.prose .dd ul{margin:0;display:flex;flex-direction:column;gap:.6rem;}
@media(max-width:700px){.prose .dd{grid-template-columns:1fr;}}
/* one step graphic for every sequence (numbered, connected), donut chart for weights, key takeaways, byline, About list */
.prose .fig-t{font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-t);margin:0 0 1rem;}
.prose ol.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));counter-reset:st;}
.prose ol.stepper li{position:relative;counter-increment:st;margin:0;padding:0 .8rem 0 0;display:flex;flex-direction:column;gap:.2rem;}
.prose ol.stepper li::before{content:counter(st);border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:.85rem;margin-bottom:.7rem;}
.prose ol.stepper li:last-child::before{background:var(--sky);color:var(--navy);}
.prose ol.stepper li:not(:last-child)::after{content:'';position:absolute;}
.prose ol.stepper li b{font-family:var(--fd);font-size:.92rem;line-height:1.3;}
.prose ol.stepper li span{font-size:.8rem;line-height:1.5;color:var(--t2);}
.prose ol.stepper.v{grid-template-columns:1fr;}
.prose ol.stepper.v li{min-height:2rem;justify-content:center;}

@media(max-width:760px){.prose ol.stepper{grid-template-columns:1fr;}
.prose ol.stepper li{min-height:2rem;justify-content:center;}

}
.prose .stepfig,.prose .pie{background:var(--grey);padding:1.2rem 1.3rem 1.3rem;margin:1.4rem 0;}
.prose .stepfig figcaption,.prose .pie figcaption{margin-top:1rem;text-align:left;}
.prose .pie-w{display:flex;align-items:center;gap:2rem;}
.prose .pie-d{flex:0 0 11rem;width:11rem;height:11rem;border-radius:50%;position:relative;}
.prose .pie-d::after{content:'';position:absolute;inset:2.6rem;border-radius:50%;background:var(--grey);}
.prose ul.pie-l{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:.75rem;}
.prose ul.pie-l li{display:grid;grid-template-columns:auto 1fr auto;column-gap:.7rem;align-items:baseline;margin:0;padding:0;}
.prose ul.pie-l li::before{content:'';width:.8rem;height:.8rem;border-radius:3px;background:var(--c);align-self:center;grid-row:1/3;}
.prose ul.pie-l li b{font-family:var(--fd);font-size:.9rem;color:var(--navy);line-height:1.3;}
.prose ul.pie-l li span{grid-column:2;font-size:.76rem;line-height:1.4;color:var(--t2);}
.prose ul.pie-l li em{grid-column:3;grid-row:1/3;font-style:normal;font-family:var(--fd);font-weight:700;color:var(--navy);}
@media(max-width:600px){.prose .pie-w{flex-direction:column;align-items:stretch;gap:1.2rem;}
.prose .pie-d{align-self:center;}}
.prose .keyt ul{list-style:none;}
.art-meta a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px;}
/* About: one column, a row per strength instead of four squares */
.art-grid>*{min-width:0;}

@media(max-width:700px){.prose .tbl.wide table{min-width:32rem;}}
.ins-tools{margin-bottom:1.4rem;}
/* no decorative dash before labels, Key takeaways as a card in the style of the other figures, no group headings */
.lbl::before,.cl-left .lbl::before{display:none!important;}
.prose .keyt{padding:1.2rem 1.4rem 1.3rem;margin:0 0 2rem;}
.prose .keyt ul.checklist{margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.prose .keyt ul.checklist li{margin:0;font-size:.95rem;line-height:1.55;}
.art-grid .toc{position:sticky;top:96px;align-self:start;padding:0;font-size:.88rem;overflow:hidden;}
.toc .toc-btn{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:none;border:0;padding:.85rem 1rem;font:inherit;color:var(--navy);cursor:default;}
.toc .toc-btn small{display:block;font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-t);}
.toc .toc-btn b{display:none;font-family:var(--fd);font-size:.9rem;line-height:1.3;margin-top:.1rem;}
.toc .toc-btn svg{display:none;margin-left:auto;width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:2.4;flex:0 0 auto;}
.art-grid .toc ol{list-style:none;margin:0;padding:.1rem 1rem 1rem;display:flex;flex-direction:column;border-left:0;counter-reset:t;}
.art-grid .toc li{counter-increment:t;margin:0;}
.art-grid .toc a{display:flex;gap:.7rem;align-items:center;padding:.38rem 0;margin:0;border:0;background:none;color:var(--t2);line-height:1.35;}
.art-grid .toc a::before{content:counter(t);flex:0 0 1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:.72rem;color:var(--navy);}
.art-grid .toc a.act{color:var(--navy);font-weight:600;background:none;}
.art-grid .toc a.act::before{background:var(--sky);}
html:not(.touch) .art-grid .toc a:hover{color:var(--navy);border:0;}
@media(max-width:960px){.art-grid .toc{position:sticky;top:60px;z-index:15;padding:0;}
.toc .toc-btn{cursor:pointer;}
.toc .toc-btn b{display:block;}
.toc .toc-btn svg{display:block;}
.toc:not(.open) ol{display:none;}
.toc.open .toc-btn svg{transform:rotate(180deg);}
.art-grid .toc ol{overflow:auto;}}
.prose .keyt ul.checklist li::before{color:var(--navy);display:flex;align-items:center;justify-content:center;}
/* hero on two clear lines, contents as a 3D box without bold shifts, Key takeaways with a heading like Do and don't, light closing block */
#hero .hero-title{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.18;max-width:none;text-wrap:wrap;margin-bottom:1.6rem;}
#hero .hero-title .hl{display:block;font-weight:600;text-shadow:0 0 28px rgb(var(--sky-rgb) / .35);}
#hero .hero-title{text-shadow:0 2px 24px rgb(var(--b-18-rgb) / .7);}
.art-grid .toc a.act{font-weight:400;color:var(--navy);}
.art-grid .toc a{font-weight:400;}
.art-grid .toc a.act span{font-weight:400;}
.prose .keyt{margin-top:.2rem;}
.art-foot{gap:2rem;}
.art-foot .art-cta{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;overflow:visible;color:var(--navy);}
.art-foot .art-cta::before{display:none!important;}
.prose .art-cta h3{color:var(--navy)!important;font-size:1.3rem;margin-bottom:.35rem;}
.art-cta p{color:var(--t2)!important;max-width:560px;}
.art-end{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-top:1px solid rgb(var(--navy-rgb) / .1);padding-top:1.6rem;}
.art-end .art-spread{align-items:flex-start;}
.art-end .btn{margin-left:auto;}
@media(max-width:640px){.art-end{flex-direction:column;align-items:flex-start;}
}
#hero .hero-title br{display:none;}
#hero .hero-title .hl{margin-bottom:.32em;}
.prose .keyt ul.checklist li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300BFFF' d='M12 0C12.7 6.9 17.1 11.3 24 12C17.1 12.7 12.7 17.1 12 24C11.3 17.1 6.9 12.7 0 12C6.9 11.3 11.3 6.9 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;}
.art-grid .toc{background:linear-gradient(135deg,var(--card-a,#fff) 0%,var(--card-b,var(--b-97)) 100%);}
.prose .art-end a.btn-navy{text-decoration:none;}
.prose .keyt ul.checklist li::before{content:'';background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23003153' d='M12 0C12.7 6.9 17.1 11.3 24 12C17.1 12.7 12.7 17.1 12 24C11.3 17.1 6.9 12.7 0 12C6.9 11.3 11.3 6.9 12 0Z'/%3E%3C/svg%3E") center/.78rem no-repeat;border-radius:50%;left:0;}

.prose ul.checklist.xlist li::before{background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003153' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/.68rem no-repeat;}

/* light blue contents box with depth, FAQ label, optional table-like cards (preview with ?cards=t) */
.art-grid .toc{--card-a:var(--b-97);--card-b:var(--b-94);}
.art-grid .toc a::before{background:#fff;}
.art-grid .toc a.act::before{background:var(--sky);}
/* mobile contents = fixed-height bar + overlay dropdown (no layout jump, no wobble), heading offset */
@media(max-width:960px){.art-grid .toc{overflow:visible;}
.toc .toc-btn{height:3.9rem;}
.toc .toc-btn>span{min-width:0;flex:1 1 auto;}
.toc .toc-btn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.art-grid .toc ol{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);border:1px solid rgb(var(--b-55-rgb) / .3);border-radius:12px;box-shadow:4px 8px 18px -4px rgb(var(--b-39-rgb) / .3);padding:.6rem 1rem .8rem;max-height:calc(100vh - 190px);}
.prose h2,.prose h3{scroll-margin-top:150px;}}
.prose .sources{background:var(--grey);margin:2.2rem 0 1.6rem;}
.prose .sources .ct{font:inherit;margin:0 0 .7rem;display:block;}
.prose .sources ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;}
.prose .sources li{padding-left:0;}
.prose .sources li::before{display:none;}
.prose .sources .src-n{color:var(--t2);margin:.9rem 0 0;}
.btn span[aria-hidden]{display:inline-block;color:inherit;transition:transform .2s;}

html:not(.touch) .btn:hover span[aria-hidden]{transform:translateX(4px);}
html.touch .btn.tap span[aria-hidden]{transform:translateX(4px);}
/* share buttons are round 3D light-blue circles with an icon, like the icon circles in the contact cards; they lift and turn navy like the other round buttons */
.art-spread .sb{padding:0;}

/* ===================== 2. Home page design ===================== */

/* ===== shared ===== */
.dv h2{margin:0;}
.dv a.btn{text-decoration:none;}

/* ===== home: lighter, shorter, one motif (3D light-blue circles, 3D cards, one dark band) ===== */
html:root #about,html:root #services,html:root #how,html:root #insights{padding:5rem 2rem;}
html:root #about{--card-a:var(--b-97);--card-b:var(--b-95);}

.dv .svc-card .svc-ico{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
.dv .svc-card .svc-ico svg{width:21px;height:21px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* About: one light card */

.dv .ab2-st{grid-column:1/-1;}

/* Services: slim cards, whole card opens the details window */
.dv .svc-grid{grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem;align-items:stretch;}
.dv .svc-card{display:grid!important;grid-template-columns:auto 1fr auto;grid-template-areas:"i t a" "i s a";column-gap:.9rem;row-gap:.1rem;align-items:center;padding:.95rem 1.1rem!important;}
.dv .svc-card .card-head{display:contents;}
.dv .svc-card .svc-ico{grid-area:i;margin:0;}
.dv .svc-card .card-head h3{grid-area:t;font-size:1rem;margin:0;padding:0;border:0;}
.dv .svc-card .svc-sum{grid-area:s;font-size:.82rem;line-height:1.45;margin:0;flex:none;}
.dv .svc-card .svc-open{grid-area:a;margin:0;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0;align-self:center;}
html:not(.touch) .dv .svc-card:hover .svc-open{background:var(--sky);}
html:not(.touch) .dv .svc-card:hover .svc-open span{color:var(--navy);transform:translateX(2px);}
html:not(.touch) .dv .svc-card:hover .svc-ico{background:linear-gradient(135deg,var(--b-80),var(--sky));}
html:not(.touch) .dv .svc-card:hover .svc-ico svg{stroke:var(--navy);}
.dv .pr3-h h2{margin:.2rem 0 1.6rem;}
.dv .pr3-s{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.dv .pr3-s li{display:flex;gap:1rem;padding-top:1rem;}
.dv .pr3-s .n{flex:none;}
.dv .pr3-s h3{font:700 1.1rem var(--fd);margin-bottom:.3rem;}
.dv .pr3-s p{font-size:.88rem;line-height:1.65;}
.dv .pr3-cta{align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.3rem;}
.dv .pr3-cta>span{font:600 1.02rem var(--fd);}
/* Insights: every guide visible, grouped, each one a clear click target */
html:root #insights .ins-head{margin-bottom:1.8rem;}
.dv .ih-c{display:flex;align-items:center;gap:.9rem;padding:.7rem .9rem;border-radius:14px;color:inherit;box-shadow:3px 5px 14px -4px rgb(var(--navy-rgb) / .14),inset 1px 1px 2px rgba(255,255,255,.8);}
.dv .ih-c .tx{flex:1;min-width:0;}
.dv .ih-c .go{border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
html:not(.touch) .dv .ih-c:hover{transform:translate(-2px,-2px);box-shadow:6px 10px 20px -4px rgb(var(--navy-rgb) / .18),0 0 0 1px rgb(var(--sky-rgb) / .35),0 8px 26px -8px rgb(var(--sky-rgb) / .4),inset 1px 1px 3px #fff;}
html:not(.touch) .dv .ih-c:hover .go{background:var(--sky);color:var(--navy);}

@media(max-width:900px){.dv .svc-grid{grid-template-columns:1fr 1fr;}
.dv .pr3-s{gap:1.4rem;}}
@media(max-width:700px){html:root #about,html:root #services,html:root #how,html:root #insights{padding:3.4rem 1.25rem;}

.dv .svc-grid{grid-template-columns:1fr;gap:.7rem;margin-top:1.4rem;}
.dv .pr3-s{grid-template-columns:1fr;gap:1.1rem;}
.dv .pr3-s li{padding-top:.8rem;}
.dv .pr3-s .n{font-size:1.7rem;}
.dv .pr3-cta{flex-direction:column;align-items:flex-start;}}
@media(max-width:700px){
.dv .ab2-ph .nm{font-size:.98rem;}

.dv .svc-card .card-head h3{font-size:1rem;}
.dv .ih-c b{font-size:.92rem;}
.dv .pr3-s p{font-size:.84rem;line-height:1.55;}
html:root #insights .ins-head{margin-bottom:1.4rem;}}
@media(max-width:700px){.dv .ih-c .tx{line-height:1.35;}}
/* ===== dark-card styles for the home (data-dir 8, 9, 10) ===== */
html:root .dv{display:block;}

/* slimmer contact (7 to 13) */
html:root #contact{padding:4.5rem 2rem;}
html:root .cl-right{gap:.6rem;}
html:root .ccard{padding:.7rem 1rem;gap:.8rem;}
html:root .ccard-icon{width:36px;height:36px;}
html:root .ccard-val{font-size:.86rem;}
html:root .ccard-label{font-size:.58rem;margin-bottom:.05rem;}
html:root .qr-wrap{margin-top:1.4rem;gap:1.1rem;}
html:root .qr-wrap img{width:96px;height:96px;}
html:root .dl-row{margin-top:1.1rem;}
@media(max-width:860px){

html:root #contact{padding:3.2rem 1.25rem;}}
html:root .cl-right{max-width:440px;width:100%;justify-self:end;}
html:root .dv .ab2-more{display:block;grid-column:1/-1;}

html:not(.touch) .btn-ice:hover{background:linear-gradient(135deg,var(--b-94) 0%,var(--b-88) 100%);transform:translate(-2px,-2px);box-shadow:6px 8px 16px -3px rgb(var(--b-39-rgb) / .35),inset 1px 1px 3px rgba(255,255,255,.9);}
.btn-ice:active{transform:translate(1px,1px);box-shadow:2px 3px 6px -2px rgb(var(--b-39-rgb) / .3),inset 2px 2px 4px rgb(var(--b-55-rgb) / .2);}

html:not(.touch) .btn-ice:hover span{transform:translateX(4px);}
html:root .dv .pr3-cta{display:none;}

html:root .dv .svc-card,html:root .dv .ih-c{border:1px solid rgb(var(--navy-rgb) / .1);}
/* flat icon circles in the light designs (3D stays on buttons and cards) */
html:root .dv .svc-card .svc-ico{border:0;box-shadow:none;transition:background .25s;}
html:not(.touch):root .dv .svc-card:hover .svc-ico{background:var(--sky);}
.dv svg.o2 .orb{fill:none;stroke-dasharray:2 2.4;}

/* Process: connected steps */
.dv svg.o2 .orb{stroke-opacity:.3;}
/* 16: no icons above the About numbers */

.ab5 h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:.2rem 0 1.6rem;}
.ab5-b{display:grid;grid-template-columns:200px 1fr;gap:1.4rem 2.6rem;align-items:center;}
.ab5 .ab2-ph{text-align:center;}
.ab5 .ab2-ph .photo-circle{width:160px;height:160px;margin:0 auto .7rem;}
.ab5 .ab2-ph .nm{font:700 1.02rem var(--fd);color:var(--navy);line-height:1.3;}
.ab5 .ab2-ph .rl{font-size:.8rem;color:var(--t2);}
.ab5 .tx p{font-size:.98rem;line-height:1.75;color:var(--t2);}
.ab5 .ab2-st{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;}
.ab5 .ab2-st b{display:block;}
.ab5 .ab2-st span{display:block;}
.ab5 .ab2-more{margin-top:1.3rem;}
@media(max-width:860px){.ab5-b{grid-template-columns:1fr;gap:1rem;}
.ab5 .ab2-ph{display:flex;align-items:center;gap:1rem;text-align:left;}
.ab5 .ab2-ph .photo-circle{width:84px;height:84px;margin:0;}
.ab5 .ab2-st{grid-template-columns:1fr 1fr;}}
.ih-ic .ih-c .tx b{display:block;}
/* mobile: keep the pictograms in the guide cards (smaller) */
@media(max-width:700px){html:root .dv .ih-c{padding:.55rem .8rem;gap:.7rem;}}
/* ===== 19 ===== */
html:root #about,html:root #how{background:#fff;}

html:root .dv .dv-svc,html:root .dv .dv-ins{max-width:1100px;margin:0 auto;}
html:root .dv .pr3{background:none;box-shadow:none;border-radius:0;padding:0;max-width:1100px;margin:0 auto;color:var(--navy);}
html:root .dv .pr3-h h2{color:var(--navy);}
html:root .dv .pr3-s h3{color:var(--navy);}
html:root .dv .pr3-s p{color:var(--t2);}
html:root .dv .pr3-cta{border-top:1px solid rgb(var(--navy-rgb) / .14);}
html:root .dv .pr3-cta>span{color:var(--navy);}
html:root .abm-btn i{display:none;}
html:root .abm-btn .ar{display:inline-block;}

html:root .dv .ab5{display:block;max-width:1100px;margin:0 auto;}
html:root .dv .ab5 .abm-btn{display:inline-flex;}
html:root .dv .ih-ic{display:grid;}
html:root .dv .svc-ico svg:not(.fl){display:none;}
html:root .dv .svc-ico svg.fl{width:26px;height:26px;fill:var(--navy);stroke:none;}
html:root .dv .svc-ico svg:not(.fl):not(.o2){display:block!important;}
html:root .dv .svc-ico svg.fl{display:none!important;}
/* photo without the blue ring */
html:root .dv .ab5 .ab2-ph .photo-circle{box-shadow:0 10px 24px -10px rgb(var(--navy-rgb) / .35);}
html:root .dv .photo-circle::after{display:none;}
html:root .dv .abm-btn .bx{display:none;}
html:not(.touch):root .dv .abm-btn.btn-ice:hover{background:linear-gradient(135deg,var(--b-46),var(--b-35));}
/* stronger arrows: solid sky disc, navy arrow */
html:root .dv .ih-c .go,html:root .dv .svc-card .svc-open{font-weight:700;}
html:root .dv .ih-c .go{font-size:1.25rem;}
html:root .dv .svc-card .svc-open span{font-size:1.3rem;}
html:not(.touch):root .dv .svc-card:hover .svc-open,html:not(.touch):root .dv .ih-c:hover .go{background:var(--navy);color:#fff;}
html:not(.touch):root .dv .svc-card:hover .svc-open span{color:#fff;}
html:root #about>.sec-inner,html:root #services>.sec-inner,html:root #how>.sec-inner,html:root #insights>.sec-inner{position:relative;z-index:1;}
html:root #about,html:root #services,html:root #how,html:root #insights{background-image:none;position:relative;}
html:not(.touch):root .dv .abm-btn.btn-ice:hover{background:#fff;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy);}
html:root .dv .abm-btn.btn-ice:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--navy);}
/* arrows: same light disc as the pictograms, thicker arrow */
html:root .dv .ih-c .go,html:root .dv .svc-card .svc-open{color:var(--navy);width:36px;height:36px;}
html:root .dv .ih-c .go,html:root .dv .svc-card .svc-open span{font-weight:700;}
html:not(.touch):root .dv .svc-card:hover .svc-open,html:not(.touch):root .dv .ih-c:hover .go{background:var(--sky);color:var(--navy);}
html:not(.touch):root .dv .svc-card:hover .svc-open span{color:var(--navy);}
/* More about me: mid blue, between navy (All insights) and sky (Let's talk) */
html:root .dv .abm-btn.btn-ice{padding:.85rem 1.7rem;}

html:not(.touch):root .dv .abm-btn.btn-ice:hover{background:linear-gradient(135deg,var(--b-46),var(--b-35));transform:translate(-2px,-2px);box-shadow:6px 8px 16px -2px rgb(var(--b-55-rgb) / .45),inset 1px 1px 3px rgba(255,255,255,.35);}
html:root .dv .abm-btn.btn-ice:active{transform:translate(1px,1px);}
/* one line weight for every outline pictogram: about 1.7 px at 26-28 px size */
html:root .dv .svc-ico svg:not(.fl):not(.o2){width:26px!important;height:26px!important;stroke-width:1.57!important;fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* same line weight (about 1.7 px) for contact and download pictograms */
html:root .ccard-icon svg,html:root .dl-btn svg{width:22px;height:22px;stroke-width:1.85;}
/* 19: services, about and privacy windows share one look */
html:root .modal,html:root .svc-modal{width:min(720px,calc(100% - 2rem));padding:2.4rem 2.2rem 2rem;border-radius:16px;}
html:root .modal .card-head{display:flex;align-items:center;gap:1rem;margin:0 0 1rem;padding:0;border:0;}
html:root .modal .card-head .lbl{margin:0 0 .15rem;}
html:root .modal h2{font-size:1.55rem;margin:0 0 .5rem;line-height:1.2;}
html:root .modal .card-head h2{margin:0;}
html:root .modal p,html:root .modal li{font-size:.92rem;line-height:1.7;}
html:root .svc-modal .svc-ico{width:52px;height:52px;border-radius:50%;border:0;box-shadow:none;margin:0;flex:none;display:flex;align-items:center;justify-content:center;}
html:root .svc-modal .svc-ico svg{width:28px;height:28px;stroke-width:1.46;fill:none;stroke-linecap:round;stroke-linejoin:round;}
html:root .svc-modal .svc-ico svg.o2,html:root .svc-modal .svc-ico svg.fl{display:none!important;}
html:root .modal .svc-m-sum{color:var(--navy);margin:0 0 1rem;}
html:root .modal h3{margin:1.3rem 0 .3rem;}
html:root .modal h2:focus{outline:none;}
/* 19: bold dark title, lighter explanation under it, on services and guide cards, also on mobile */
html:root .dv .ih-ic .ih-c .tx b{font:700 1rem/1.3 var(--fd);color:var(--navy);}
html:root .dv .ih-ic .ih-c .sub{display:block;font-size:.84rem;line-height:1.4;color:var(--t2);font-weight:400;margin-top:.1rem;}
html:root .dv .ih-ic .ih-c .sub i{font-style:normal;white-space:nowrap;}
html:root .dv .svc-card .svc-sum{font-weight:400;color:var(--t2);}
@media(max-width:700px){html:root .dv .svc-card .svc-sum{display:block;font-size:.8rem;line-height:1.35;}
html:root .dv .svc-card{grid-template-areas:"i t a" "i s a";padding:.7rem .9rem!important;}
html:root .dv .ih-ic .ih-c .sub{font-size:.8rem;}}

/* floating close button in every window */
html:root .modal>form:first-child{position:sticky;top:.1rem;height:0;overflow:visible;z-index:6;}
html:root .modal>form:first-child .modal-x{position:absolute;top:-1.5rem;right:-1.4rem;}
html:not(.touch):root .modal-x:hover{background:var(--b-87);color:var(--navy);}
/* close buttons: grey 3D with a soft shadow */
html:root .modal-x,html:root .modal>form:first-child .modal-x{background:linear-gradient(135deg,var(--b-97) 0%,var(--b-87) 100%);color:var(--b-45);border:1px solid;border-color:rgba(255,255,255,.9) rgb(var(--b-45-rgb) / .25) rgb(var(--b-45-rgb) / .35) rgba(255,255,255,.8);box-shadow:3px 5px 10px -3px rgb(var(--navy-rgb) / .4),inset 1px 1px 2px rgba(255,255,255,.9);}
html:not(.touch):root .modal-x:hover{background:linear-gradient(135deg,var(--b-95),var(--b-87));transform:translate(-1px,-1px);box-shadow:5px 7px 14px -3px rgb(var(--navy-rgb) / .45),inset 1px 1px 2px rgba(255,255,255,.9);}
html:root .modal-x:active{transform:translate(1px,1px);box-shadow:1px 2px 4px -2px rgb(var(--navy-rgb) / .4);}
html:not(.touch):root .btn-sky:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-39-rgb) / .55),0 0 22px -3px rgb(var(--sky-rgb) / .6),inset 1px 1px 3px rgba(255,255,255,.7);}
html:root .btn-sky:active{box-shadow:1px 2px 5px -2px rgb(var(--b-39-rgb) / .5),inset 2px 2px 4px rgb(var(--b-46-rgb) / .3);}
/* share buttons: every glyph keeps its colour on hover (X used to turn white) */
html:root .art-spread .sb:hover svg:not(.fill),html:not(.touch):root .art-spread .sb:hover svg:not(.fill){stroke:var(--sky);}
html:root .art-spread .sb:hover svg .fill,html:not(.touch):root .art-spread .sb:hover svg .fill,html.touch:root .art-spread .sb.tap svg .fill{fill:var(--sky);}
html:root .art-spread .sb:hover{color:var(--sky);}
/* one shadow for every button: same offset, blur and strength; only the tint follows the button colour */

html:not(.touch):root .btn-sky:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-35-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.7);}
html:not(.touch):root .btn-navy:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-24-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.25);}
html:not(.touch):root .abm-btn.btn-ice:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-35-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.35);}
html:not(.touch):root .art-spread .sb:hover::before{box-shadow:6px 10px 20px -4px rgb(var(--b-27-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.35);}
html:not(.touch):root .modal-x:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-27-rgb) / .5),inset 1px 1px 2px rgba(255,255,255,.9);}
/* Save contact and One-pager: same size and look as the contact cards */
html:root #contact .dl-row{gap:.7rem;}
html:root #contact .dl-btn{display:flex;align-items:center;gap:.9rem;padding:.7rem 1.2rem .7rem 1rem;font-size:.92rem;font-weight:600;}
html:root #contact .dl-btn svg{width:36px;height:36px;padding:7px;box-sizing:border-box;background:rgb(var(--sky-rgb) / .15);stroke-width:1.85;flex:none;}
html:root #contact .dl-btn small{font-size:.78rem;}

/* contact cards stay on the left when the page is narrow */
@media(max-width:860px){html:root .cl-right{justify-self:start;margin-right:auto;}}
/* About numbers and Process steps share one pattern: grey rule with a short sky accent, large blue number, text */
html:root .dv .ab5 .ab2-st{border-top:0;margin-top:1.8rem;padding-top:0;gap:2rem;}
html:root .dv .ab5 .ab2-st li{position:relative;}
html:root .dv .ab5 .ab2-st li::before{content:'';position:absolute;top:-2px;left:0;width:44px;height:2px;background:var(--sky);}
html:root .dv .ab5 .ab2-st b{font:700 2.2rem/1 var(--fd);color:var(--sky-t);margin-bottom:.5rem;}
html:root .dv .ab5 .ab2-st span{font-size:.88rem;line-height:1.6;color:var(--t2);}
html:root .dv .pr3-s li::before{content:'';position:absolute;top:-2px;left:0;width:44px;height:2px;background:var(--sky);}
html:root .dv .pr3-s li{position:relative;}
html:root .dv .pr3-s .n{font:700 2.2rem/1 var(--fd);color:var(--sky-t);min-width:1.4rem;}
@media(max-width:860px){html:root .dv .ab5 .ab2-st{gap:1.4rem 1.2rem;}
html:root .dv .ab5 .ab2-st b{font-size:1.8rem;}}
/* About and Process: plain grey rules, like the lists in the About window */
html:root .dv .ab5 .ab2-st li::before,html:root .dv .pr3-s li::before{display:none;}
html:root .dv .ab5 .ab2-st li{padding-top:1.1rem;}

/* ===================== 3. Article pages ===================== */

html:root .art-spread .sb svg:not(.fill){box-sizing:border-box;}
html:root .art-spread .sb svg:has(.fill){box-sizing:border-box;}
html:not(.touch):root .art-spread .sb:hover::before{background:linear-gradient(135deg,var(--b-46) 0%,var(--b-39) 100%);box-shadow:8px 12px 20px -3px rgb(var(--navy-rgb) / .4),0 0 0 1px rgb(var(--sky-rgb) / .3),inset 1px 1px 3px rgba(255,255,255,.15);}
html:root .art-spread .sb:hover svg:not(.fill){stroke:var(--sky);}
html:not(.touch):root .modal-x:hover{background:var(--b-87);color:var(--navy);}
html:not(.touch):root .modal-x:hover{background:linear-gradient(135deg,var(--b-95),var(--b-87));transform:translate(-1px,-1px);box-shadow:5px 7px 14px -3px rgb(var(--navy-rgb) / .45),inset 1px 1px 2px rgba(255,255,255,.9);}
html:root .modal-x:active{transform:translate(1px,1px);box-shadow:1px 2px 4px -2px rgb(var(--navy-rgb) / .4);}
/* share: only the round 3D discs, no square around them */
html:root .art-spread .sb{width:46px;height:46px;border-radius:50%;}
html:root .art-spread .sb::before{border-radius:50%;}
html:root .art-spread .sb svg:not(.fill),html:root .art-spread .sb svg:has(.fill){width:22px;height:22px;padding:0;background:none;border-radius:0;overflow:visible;stroke-width:1.85;}
html:not(.touch):root .art-spread .sb:hover::before{background:linear-gradient(135deg,var(--b-60),var(--b-46));transform:translate(-2px,-2px);box-shadow:6px 9px 16px -3px rgb(var(--navy-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.35);}
html:not(.touch):root .btn-sky:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-39-rgb) / .55),0 0 22px -3px rgb(var(--sky-rgb) / .6),inset 1px 1px 3px rgba(255,255,255,.7);}
html:root .btn-sky:active{box-shadow:1px 2px 5px -2px rgb(var(--b-39-rgb) / .5),inset 2px 2px 4px rgb(var(--b-46-rgb) / .3);}
/* share buttons: every glyph keeps its colour on hover (X used to turn white) */
html:root .art-spread .sb:hover svg:not(.fill),html:not(.touch):root .art-spread .sb:hover svg:not(.fill){stroke:var(--sky);}
html:root .art-spread .sb:hover svg .fill,html:not(.touch):root .art-spread .sb:hover svg .fill,html.touch:root .art-spread .sb.tap svg .fill{fill:var(--sky);}
html:root .art-spread .sb:hover{color:var(--sky);}
/* one shadow for every button: same offset, blur and strength; only the tint follows the button colour */
html:root .btn-sky{box-shadow:3px 6px 14px -3px rgb(var(--b-35-rgb) / .5),inset 1px 1px 2px rgba(255,255,255,.55);}

html:not(.touch):root .btn-sky:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-35-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.7);}
html:not(.touch):root .btn-navy:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-24-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.25);}
html:not(.touch):root .abm-btn.btn-ice:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-35-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.35);}
html:not(.touch):root .art-spread .sb:hover::before{box-shadow:6px 10px 20px -4px rgb(var(--b-27-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.35);}
html:not(.touch):root .modal-x:hover{box-shadow:6px 10px 20px -4px rgb(var(--b-27-rgb) / .5),inset 1px 1px 2px rgba(255,255,255,.9);}
html:root .art-spread .sb svg:not(.fill),html:root .art-spread .sb:hover svg:not(.fill),html:not(.touch):root .art-spread .sb:hover svg:not(.fill){stroke:var(--navy);}
html:root .art-spread .sb svg .fill,html:root .art-spread .sb:hover svg .fill,html:not(.touch):root .art-spread .sb:hover svg .fill,html.touch:root .art-spread .sb.tap svg .fill{fill:var(--navy);}
html:root .art-spread .sb:hover{color:var(--navy);}
html:not(.touch):root .art-spread .sb:hover::before{background:linear-gradient(135deg,var(--b-94),var(--b-88));border-color:rgba(255,255,255,.9) rgb(var(--b-55-rgb) / .25) rgb(var(--b-55-rgb) / .38) rgba(255,255,255,.7);box-shadow:6px 10px 20px -4px rgb(var(--b-35-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.9);transform:translate(-2px,-2px);}

/* ===================== 4. Final design layer (menu, boxes, buttons, article details) ===================== */

/* menu */
html:root:root .nl a{padding:.5rem .85rem;border-radius:999px;border:0;opacity:1;transition:background .2s,color .2s;}
html:root:root .nl{gap:.2rem;}
html:not(.touch)html:root:root .nl a:hover{background:rgb(var(--sky-rgb) / .14);}
html:root:root .nl a.act{background:rgb(var(--sky-rgb) / .2);color:var(--navy);border:0;padding-bottom:.5rem;}
/* lines in About and Process: light blue like the old card headers */
html:root:root .dv .ab5 .ab2-st li,html:root:root .dv .pr3-s li{border-top:1px solid rgb(var(--sky-rgb) / .38);}
/* one hover for everything clickable: lift, ring, filled pictogram and arrow */
html:root:root .svc-card,html:root:root .ih-c{transition:transform .25s ease,box-shadow .25s ease;}
html:not(.touch)html:root:root .svc-card:hover,html:not(.touch)html:root:root .ih-c:hover{transform:translate(-2px,-2px);box-shadow:6px 10px 20px -4px rgb(var(--b-35-rgb) / .3),0 0 0 1px rgb(var(--sky-rgb) / .35),inset 1px 1px 3px rgba(255,255,255,.9);}
/* article boxes: one border and one soft shadow */
html:root:root .prose .tbl,html:root:root .prose .fig-g,html:root:root .prose .keyt,html:root:root .prose .dd-col,html:root:root .art-grid .toc{border:1px solid rgb(var(--navy-rgb) / .12);border-radius:14px;}
html:root:root .prose td{border-bottom-color:rgb(var(--navy-rgb) / .1);}
html:root:root .prose tbody tr:last-child td{border-bottom:0;}
html:root:root .prose .stepper li b{color:var(--navy);}
html:root .dv .ih-c .go,html:root .dv .svc-card .svc-open span{-webkit-text-stroke:1.1px var(--b-61);}
html:root .dv .svc-ico,html:root .dv .ih-c .go,html:root .dv .svc-card .svc-open{background:rgb(var(--sky-rgb) / .12)!important;}
html:not(.touch):root .svc-card:hover svg:not(.fl){stroke:var(--navy)!important;}
html:not(.touch):root .svc-card:hover .svc-open span,html:not(.touch):root .ih-c:hover .go{color:var(--navy)!important;-webkit-text-stroke-color:var(--navy);}
/* exact old-site blue for pictograms and arrows */
html:root .dv .svc-ico svg:not(.fl):not(.o2){stroke:var(--sky-t)!important;}
html:root .dv .ih-c .go,html:root .dv .svc-card .svc-open span{color:var(--sky-t)!important;-webkit-text-stroke-color:var(--sky-t);}
/* pressed state = hover state, on mouse (:active) and touch (.tap), same as the old cards */
html:root .svc-card:active,html:root .ih-c:active,html.touch:root .svc-card.tap,html.touch:root .ih-c.tap{transform:translate(-2px,-2px)!important;box-shadow:6px 10px 20px -4px rgb(var(--b-35-rgb) / .3),0 0 0 1px rgb(var(--sky-rgb) / .35),inset 1px 1px 3px rgba(255,255,255,.9)!important;}
html:root .svc-card:active .svc-ico,html.touch:root .svc-card.tap .svc-ico{background:var(--sky)!important;}
html:root .svc-card:active svg,html.touch:root .svc-card.tap svg:not(.fl){stroke:var(--navy)!important;}
html:root .svc-card:active .svc-open,html:root .ih-c:active .go,html.touch:root .svc-card.tap .svc-open,html.touch:root .ih-c.tap .go{background:var(--sky)!important;}
html:root .svc-card:active .svc-open span,html:root .ih-c:active .go,html.touch:root .svc-card.tap .svc-open span,html.touch:root .ih-c.tap .go{color:var(--navy)!important;-webkit-text-stroke-color:var(--navy);}
/* hover: pictogram and arrow discs light up sky like the old site (the lighter resting colour had overridden it) */
html:not(.touch):root .svc-card:hover .svc-ico,html:not(.touch):root .svc-card:hover .svc-open,html:not(.touch):root .ih-c:hover .go{background:var(--sky)!important;}

html:not(.touch):root .svc-card:hover svg:not(.fl){stroke:var(--navy)!important;}
html:not(.touch):root .svc-card:hover .svc-open span,html:not(.touch):root .ih-c:hover .go{color:var(--navy)!important;-webkit-text-stroke-color:var(--navy)!important;}
/* services window pictogram = same colour as on the page */
html:root .svc-modal .svc-ico{background:rgb(var(--sky-rgb) / .12)!important;}
html:root .svc-modal .svc-ico svg{stroke:var(--sky-t)!important;}
/* timeline variant: stages down both sides of the two columns */
.dv .ax{display:none;}
html:root:root .dv .ih-ic{grid-auto-flow:row;grid-template-rows:repeat(6,auto);grid-template-columns:104px 1fr 112px 1fr;gap:.65rem 1rem;}
html:root:root .dv .ih-ic .ih-c{grid-row:var(--r);grid-column:var(--c);}
html:root:root .dv .ax.axl,html:root:root .dv .ax.axr{display:block;position:relative;grid-row:var(--r);}
html:root:root .dv .ax.axl{grid-column:1;}
html:root:root .dv .ax.axr{grid-column:3;}
.ax::before{content:'';position:absolute;top:-.33rem;bottom:-.33rem;width:2px;}
.ax.axl::before{right:0;}
.ax.axr::before{right:0;}
.ax em{position:absolute;top:50%;transform:translateY(-50%);font:700 .64rem var(--fd);letter-spacing:.12em;text-transform:uppercase;font-style:normal;}
.ax.axl em{text-align:right;}
.ax.axr em{text-align:right;}
.ax em::after{position:absolute;top:50%;border-radius:50%;background:var(--sky);}
.ax.axl.ax-start::before,.ax.axr.ax-start::before{top:50%;}
html:root:root .dv .ax.axl.ax-end::after,html:root:root .dv .ax.axr.ax-end::after{content:'';position:absolute;}
@media(max-width:860px){html:root:root .dv .ih-ic{grid-template-rows:none;gap:.5rem .6rem;}
html:root:root .dv .ih-ic .ih-c{grid-row:var(--n);grid-column:2;}
html:root:root .dv .ax.axr{display:none;}
html:root:root .dv .ax.axm{display:block;position:relative;grid-column:1;grid-row:var(--r);}
.ax.axm::before{right:0;}}
@media(max-width:860px){html:root:root .dv .ax.axm em{display:block;}
.ax.axm em{text-align:right;}}
html:root:root .dv .ax.axr.ax-end::after{border:0;width:16px;height:3px;bottom:-.55rem;right:-7px;margin:0;border-radius:2px;}
@media(max-width:860px){html:root:root .dv .ax.axm.ax-mend::after{content:'';position:absolute;bottom:-.75rem;right:-6px;border:7px solid transparent;border-top:9px solid rgb(var(--sky-rgb) / .7);}}
/* nicer timeline: numbered milestones, double chevrons where the journey continues in the second column */
.ax em::after{width:22px!important;height:22px!important;margin-top:-11px!important;background:#fff!important;border:2px solid var(--sky);box-shadow:0 0 0 4px rgb(var(--sky-rgb) / .15)!important;box-sizing:border-box;display:flex;align-items:center;justify-content:center;content:attr(data-n)!important;font:700 .66rem var(--fd);color:var(--navy);letter-spacing:0;}
.ax.axl em,.ax.axr em,.ax.axm em{right:30px!important;}
.ax.axl em::after,.ax.axr em::after,.ax.axm em::after{left:auto!important;}
.ax em{font-size:.66rem;color:var(--navy);}
html:root:root .dv .ax.axl.ax-start em::after{background:var(--sky)!important;color:var(--navy);}
html:root:root .dv .ax.axl.ax-end::after{content:''!important;position:absolute;bottom:-1.55rem;width:16px;height:17px;border:0!important;margin:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17' fill='none' stroke='%2300BFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6M2 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;}
html:root:root .dv .ax.axr.ax-start::after{content:''!important;position:absolute;top:-1.65rem;width:16px;height:17px;border:0!important;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17' fill='none' stroke='%2300BFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6M2 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;box-sizing:content-box;}
html:root:root .dv .ax.axr.ax-start::before{top:-.55rem;}
html:root:root .dv .ax.axl.ax-end::before{bottom:-.55rem;}
html:root:root .dv .ax.axr.ax-end::after{background:var(--sky)!important;}
@media(max-width:860px){.ax.axl em,.ax.axm em{right:26px!important;}
html:root:root .dv .ax.axl.ax-end::before{bottom:-.5rem;}}
@media(max-width:860px){.ax em{font-size:.6rem!important;letter-spacing:.06em!important;}}
/* all milestones alike; the journey ends at 7 */
html:root:root .dv .ax.axl.ax-start em::after{background:#fff!important;}
html:root:root .dv .ax.axl.ax-start em::after{width:22px!important;height:22px!important;margin-top:-11px!important;}
html:root:root .dv .ax.axr.ax-end::after{display:none!important;}
html:root:root .dv .ax.axr.ax-end::before{bottom:50%!important;}
@media(max-width:860px){html:root:root .dv .ax.axm.ax-mend::after{display:none!important;}
html:root:root .dv .ax.axm.ax-mend::before{bottom:50%!important;}}
/* chevrons centred on the 2px line (line centre is 1px left of the cell edge) */
html:root:root .dv .ax.axl.ax-end::after,html:root:root .dv .ax.axr.ax-start::after{right:-7px!important;}

/* mobile: keep the rings out of the cards */
@media(max-width:860px){html:root:root .dv .ih-ic{column-gap:1.4rem!important;grid-template-columns:96px 1fr!important;}}
html:root:root .dv .ax{--m:0;}

/* one colour for axis, rings and arrows; rings centred on the axis */
.ax::before{background:var(--sky)!important;}
.ax em::after{border-color:var(--sky)!important;}
.ax.axl em::after,.ax.axr em::after,.ax.axm em::after{right:-40px!important;}
@media(max-width:860px){.ax.axl em::after,.ax.axm em::after{right:-36px!important;}
html:root:root .dv .ax.axl.ax-end::after{content:''!important;position:absolute;bottom:-.82rem;width:16px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%2300BFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat!important;border:0!important;}}
/* arrows are placed by script exactly halfway between two milestones */

@media(max-width:860px){html:root:root .dv .ax.axl.ax-end::after{display:none!important;}}
.dv .ih-ic{position:relative;}

/* arrow nudges on hover in every card, like the service cards */
html:root .dv .ih-c .go{transition:padding .2s ease,background .25s,color .25s;box-sizing:border-box;}
html:not(.touch):root .dv .ih-c:hover .go{padding-left:6px;}
html.touch:root .dv .ih-c.tap .go{padding-left:6px;}
/* reading time: one grey, one spacing everywhere */
html:root .dv .ih-ic .ih-c .sub i{color:var(--t2)!important;font-weight:500;}
html:root .dv .ih-ic .ih-c .sub i::before{content:'\00a0\00b7\00a0'!important;}

/* All insights page uses the same timeline as the home page; the flat list only shows while searching */

.ins-tl-wrap{margin-top:1.4rem;}
/* way back from search results */
.ins-count .ins-reset{font:inherit;color:var(--sky-t);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.ins-count .ins-reset:hover{color:var(--navy);}
/* timeline nodes. Every guide has a numbered circle or a dot on the axis, which lights up with its card. No small arrows. */
.ax i.dot{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--sky);box-sizing:border-box;transition:transform .3s cubic-bezier(.3,1.5,.5,1),background .25s,box-shadow .3s;}
.ax em::after{transition:transform .3s cubic-bezier(.3,1.5,.5,1),background .25s,color .25s,box-shadow .3s;}
.ax em{transition:color .25s;}
.ax.lit em::after{background:var(--sky)!important;color:var(--navy)!important;box-shadow:0 0 0 5px rgb(var(--sky-rgb) / .22),0 0 18px rgb(var(--sky-rgb) / .7)!important;}
.ax.lit em{color:var(--sky-t);}
.ax.lit i.dot{background:var(--sky);box-shadow:0 0 0 4px rgb(var(--sky-rgb) / .22),0 0 14px rgb(var(--sky-rgb) / .75);}
/* search on the home page: the result list replaces the timeline while a query is typed */
.ins-home .ins-tools{margin-top:1.4rem;}
.ins-home:not(.searching) .ins-res{display:none!important;}
.ins-home.searching .ins-tl-wrap{display:none!important;}
.ins-res{display:grid;grid-template-columns:1fr 1fr;gap:.65rem 1rem;align-items:start;}
@media(max-width:860px){.ins-res{grid-template-columns:1fr;}}
.ins-res .ai-hit{margin:.5rem 0 0;}
html:root .dv .ins-res .ih-c .sub i::before{content:'\00a0\00b7\00a0';}
.dv .ax i.dot{margin:-5px 0 0 0!important;}
.dv .ax i.dot{right:-4px!important;}
/* static nodes (colour and glow only), the first node lights up like the others, search results styled like the timeline cards */
html:root:root .dv .ax.lit[data-id][class] em::after{background:var(--sky)!important;color:var(--navy)!important;border-color:var(--sky)!important;box-shadow:0 0 0 5px rgb(var(--sky-rgb) / .22),0 0 18px rgb(var(--sky-rgb) / .7)!important;transform:none!important;}
html:root:root .dv .ax.lit[data-id][class] i.dot{background:var(--sky);box-shadow:0 0 0 4px rgb(var(--sky-rgb) / .22),0 0 14px rgb(var(--sky-rgb) / .75);transform:none!important;}
html:root .dv .ins-res .ih-c .tx b{display:block;font:700 1rem/1.3 var(--fd);color:var(--navy);}
html:root .dv .ins-res .ih-c .sub{display:block;font-size:.84rem;line-height:1.4;color:var(--t2);font-weight:400;margin-top:.1rem;}
html:root .dv .ins-res .ih-c .sub i{font-style:normal;color:var(--t2)!important;font-weight:500;white-space:nowrap;}
@media(max-width:860px){html:root .dv .ins-res .ih-c .sub{font-size:.8rem;}}
/* the hidden attribute must win over the card display, so that only the matching guides stay in the search results */
.ins-res .ih-c[hidden],.ins-res .ai-hit[hidden]{display:none!important;}
/* one or two sentences under the section headings */
.sec-sub{max-width:620px;font-size:1.02rem;line-height:1.6;color:var(--t2);}
/* the same spacing around the sentence under every heading */
.dv .pr3-h h2{margin-bottom:0;}
.dv .sec-sub{margin:.7rem 0 0;}
.dv .pr3-h .sec-sub{margin-bottom:1.8rem;}
/* accessibility: contrast and focus */
html:root .dv .abm-btn.btn-ice{background:linear-gradient(135deg,var(--b-55) 0%,var(--b-50) 100%);}
:focus-visible{outline-color:var(--sky-t);outline-width:3px;}
#hero :focus-visible,#contact :focus-visible,footer :focus-visible,.phead :focus-visible{outline-color:var(--sky);}
.ins-search input:focus{border-color:var(--sky-t);}
.nl a,footer a{position:relative;}
.nl a::after,footer .fls a::after{content:'';position:absolute;inset:-6px -4px;}
/* a slightly darker background behind Services and Insights, with pure white cards (before, the cards faded to light grey in the corner) */
html:root #services,html:root #insights{background:var(--b-95);}
html:root .dv .svc-card,html:root .dv .ih-c{background:#fff;}
/* one colour for the small section labels on all light sections (contrast 5.9:1 on white, 5.2:1 on the grey) */
html:root #about .lbl,html:root #services .lbl,html:root #how .lbl,html:root #insights .lbl{color:var(--b-50);}
/* article boxes in three families, neutral colours. Data (tables, figures): white, neutral frame, grey header. Message (key takeaways, do and don't): a coloured edge. References (external sources): no box.
   Light blue is kept for "selected": the active menu item and the active line in the contents. Utility buttons (share, copy) are neutral like the close button. */
html:root:root .prose th{background:var(--b-97);color:var(--navy);}
html:root:root .prose .fig-g{background:#fff;}
html:root:root .prose aside.sources{background:none;border:0;border-top:1px solid rgb(var(--navy-rgb) / .14);border-radius:0;box-shadow:none;padding:1.3rem 0 0;margin-top:2.4rem;}
html:root:root .prose aside.sources .ct{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);}
html:root:root .prose aside.sources li,html:root:root .prose aside.sources p:not(.ct){font-size:.86rem;}
html:root:root .art-grid .toc a.act{background:rgb(var(--sky-rgb) / .2);border-radius:999px;margin-left:-.5rem;margin-right:-.5rem;padding-left:.5rem;padding-right:.8rem;}
/* share and copy: neutral 3D discs, filled sky on hover like everything else */
html:root:root .art-spread .sb::before{background:linear-gradient(135deg,#ffffff 0%,var(--b-95) 100%);border-color:rgba(255,255,255,.95) rgb(var(--navy-rgb) / .14) rgb(var(--navy-rgb) / .24) rgba(255,255,255,.9);box-shadow:3px 6px 14px -3px rgb(var(--navy-rgb) / .28),inset 1px 1px 2px rgba(255,255,255,.9);}
html:root:root .art-spread .sb svg:not(.fill),html:root:root .art-spread .sb:hover svg:not(.fill),html:not(.touch):root:root .art-spread .sb:hover svg:not(.fill){stroke:var(--navy);}
html:root:root .art-spread .sb svg .fill,html:root:root .art-spread .sb:hover svg .fill,html:not(.touch):root:root .art-spread .sb:hover svg .fill,html.touch:root:root .art-spread .sb.tap svg .fill{fill:var(--navy);}
html:not(.touch):root:root .art-spread .sb:hover::before,html.touch:root:root .art-spread .sb.tap::before{background:var(--sky);border-color:rgba(255,255,255,.6) rgb(var(--b-55-rgb) / .3) rgb(var(--b-55-rgb) / .4) rgba(255,255,255,.5);}
/* Key takeaways, Do and Don't are one family: the same card, tinted light blue, light green and light red. The contents card is light blue too, on desktop and on the phone. */
html:root:root .prose .keyt,html:root:root .prose .dd-col{border-radius:14px;scroll-margin-top:96px;}
html:root:root .prose .keyt{background:var(--ice);border:1px solid rgb(var(--sky-rgb) / .4);}
/* contents: a neutral white card (also the list that opens on the phone); the line that shows where you are is a light blue pill like the active menu item */
html:root:root .art-grid .toc,html:root:root .art-grid .toc ol,html:root:root .toc.open ol,html:root:root .toc ol{background:#fff;}
html:root:root .art-grid .toc{border:1px solid rgb(var(--navy-rgb) / .12);box-shadow:3px 6px 14px -6px rgb(var(--navy-rgb) / .2);}
html:root:root .art-grid .toc a.act{background:rgb(var(--sky-rgb) / .2);box-shadow:none;}
/* key takeaways: the stars in the stronger blue, like the green and red marks of Do and Don't */
html:root:root .prose .keyt ul.checklist li::before{background-color:var(--sky);}

/* Key takeaways has a heading like the other parts; the labels inside the Key takeaways and FAQ boxes are gone */
html:root .prose h2#key-takeaways{margin-top:0;scroll-margin-top:96px;}
/* Do in light green and Don't in light red again, with the labels and the marks in the same colours */
html:root:root .prose .dd-do{background:var(--ok-bg);border:1px solid rgb(var(--ok-rgb) / .38);}
html:root:root .prose .dd-dont{background:var(--coral-bg);border:1px solid rgb(var(--coral-rgb) / .45);}
html:root:root .prose .dd-do ul.checklist li::before{background-color:var(--ok);}
html:root:root .prose .dd-dont ul.checklist.xlist li::before{background-color:var(--coral);}
/* the advice text in Do and Don't is as dark as the navy body text; the Do and Don't labels are removed, colour and marks say it */
html:root:root .prose .dd-do ul li{color:var(--ok-text);}
html:root:root .prose .dd-dont ul li{color:var(--coral-text);}
/* the tick and the cross themselves are dark green and dark red, the same as the text next to them */
html:root:root .prose .dd-do ul.checklist li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3d24' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}
html:root:root .prose .dd-dont ul.checklist.xlist li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b1710' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");}
/* the star canvas has the size set by the script; the hero cuts off whatever is outside while the window shrinks */
html:root:root #hero{overflow:hidden;}
#starfield{inset:auto;top:0;left:0;max-width:none;}

/* Footer links on phones: a larger invisible touch area (about 42px high) and more space between the two rows */
@media(max-width:760px){
  footer .fls{row-gap:1.5rem;}
  footer .fls a::after{inset:-12px -10px;}
}

/* Next step cards at the end of an article: the same cards as on the Insights timeline (hover and touch rules come with .dv .ih-c).
   One card takes half the width on wide screens, more cards fill two columns. */
.prose .next-steps .ns-t{margin:0 0 1rem;}
html:root .dv.ns-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem 1rem;align-items:stretch;}
.prose .next-steps a.ih-c{color:inherit;text-decoration:none;}
html:root .dv.ns-list .ih-c .tx b{display:block;font:700 1rem/1.3 var(--fd);color:var(--navy);}
html:root .dv.ns-list .ih-c .sub{display:block;font-size:.84rem;line-height:1.45;color:var(--t2);font-weight:400;margin-top:.15rem;}
html:root .dv.ns-list .ih-c .sub i{font-style:normal;color:var(--t2);font-weight:500;white-space:nowrap;}
html:root .dv.ns-list .ih-c .sub i::before{content:'\00a0\00b7\00a0';}

/* Glossary terms in articles: a dotted underline, the explanation opens on hover (mouse), on focus (keyboard) or on tap */
.prose .gl{border-bottom:1px dotted var(--b-55);cursor:help;border-radius:2px;transition:background .15s;}
.prose .gl.on,.prose .gl:focus-visible{background:rgb(var(--sky-rgb) / .16);outline:none;}
.gl-tip{position:absolute;z-index:150;width:max-content;max-width:340px;background:#fff;border:1px solid rgb(var(--navy-rgb) / .12);border-radius:12px;
  box-shadow:var(--box-sh);padding:.8rem 1rem .85rem;font:400 .86rem/1.55 var(--fb);color:var(--t2);}
.gl-tip b{display:block;font:700 .95rem/1.3 var(--fd);color:var(--navy);margin-bottom:.25rem;}
.gl-tip a{display:inline-block;margin-top:.45rem;}
.gl-tip[hidden]{display:none;}

/* Glossary page: terms from A to Z */
.prose dl.glossary{margin:.4rem 0 0;}
.prose .gl-item{padding:.8rem .6rem;margin:0 -.6rem;border-bottom:1px solid rgb(var(--navy-rgb) / .1);scroll-margin-top:96px;border-radius:8px;}
.prose .gl-item dt{font:700 1.02rem/1.35 var(--fd);color:var(--navy);}
.prose .gl-item dd{margin:.25rem 0 0;color:var(--t2);}
.prose .gl-item .gl-more{margin-left:.35rem;white-space:nowrap;}
.prose .gl-item:target{background:rgb(var(--sky-rgb) / .1);}
/* the contents card of the glossary is a grid of letters, without numbers */
.gloss-grid .toc ol{display:grid;grid-template-columns:repeat(4,1fr);gap:.15rem;}
@media(max-width:960px){.gloss-grid .toc:not(.open) ol{display:none;}}
.gloss-grid .toc a::before{display:none;}
.gloss-grid .toc a{justify-content:center;text-align:center;font-family:var(--fd);font-weight:700;}

/* Text links with an arrow (glossary page, glossary explanations): like the cards and buttons they react,
   the colour turns navy and the arrow moves forward */
.lnk,.prose .gl-item .gl-more,.gl-tip a{color:var(--sky-t);font-weight:600;text-decoration:none;transition:color .2s;}
.lnk span,.prose .gl-item .gl-more span,.gl-tip a span{display:inline-block;transition:transform .2s ease;}
html:not(.touch) .lnk:hover,html:not(.touch) .prose .gl-item .gl-more:hover,html:not(.touch) .gl-tip a:hover{color:var(--navy);}
html:not(.touch) .lnk:hover span,html:not(.touch) .prose .gl-item .gl-more:hover span,html:not(.touch) .gl-tip a:hover span{transform:translateX(4px);}
html.touch .lnk.tap,html.touch .prose .gl-item .gl-more.tap,html.touch .gl-tip a.tap{color:var(--navy);}
html.touch .lnk.tap span,html.touch .prose .gl-item .gl-more.tap span,html.touch .gl-tip a.tap span{transform:translateX(4px);}
.lnk:focus-visible span,.prose .gl-item .gl-more:focus-visible span{transform:translateX(4px);}

/* Insights page: the same timeline and cards as the home page, the search and the glossary card above them */
.ins-wrap{background:var(--b-95);}
.ins-page-in{max-width:1100px;margin:0 auto;}
.ins-page .ins-count{margin-top:1rem;}

/* Insights page: the search and the glossary side by side, the same height. The glossary is a white raised card like the
   others; its A–Z mark is light blue like the icons of the services and turns sky blue on hover */
.ins-page .ins-tools{align-items:stretch;gap:1rem 1.2rem;}
.ins-page .ins-search{flex:1 1 360px;}
.ins-page .ins-search input{height:100%;min-height:62px;font-size:1rem;border-radius:12px;}
.gl-card{flex:0 1 400px;display:flex;align-items:center;gap:.9rem;padding:.7rem 1rem;border-radius:12px;color:inherit;text-decoration:none;
  background:#fff;border:1px solid rgb(var(--navy-rgb) / .1);box-shadow:var(--box-sh);transition:transform .25s ease,box-shadow .25s ease;}
.gl-card .gl-ico{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgb(var(--sky-rgb) / .12);color:var(--navy);font:700 .8rem var(--fd);transition:background .25s;}
.gl-card .gl-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
.gl-card .gl-tx b{font:700 1rem/1.25 var(--fd);color:var(--navy);}
.gl-card .gl-tx span{font-size:.84rem;line-height:1.4;color:var(--t2);}
.gl-card .go{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgb(var(--sky-rgb) / .12);color:var(--sky-t);font-weight:700;font-size:1.25rem;}
html:not(.touch) .gl-card:hover{transform:translate(-2px,-2px);box-shadow:var(--box-sh-hover);}
html:not(.touch) .gl-card:hover .gl-ico,html:not(.touch) .gl-card:hover .go{background:var(--sky);color:var(--navy);}
html.touch .gl-card.tap{transform:translate(-2px,-2px);box-shadow:var(--box-sh-hover);}
html.touch .gl-card.tap .gl-ico,html.touch .gl-card.tap .go{background:var(--sky);color:var(--navy);}
@media(max-width:860px){.gl-card{flex:1 1 100%;}.ins-page .ins-search{max-width:none;flex-basis:100%;}}

/* under the timeline: the button on the right, a short line under it, as wide as the button */
.ins-home .ins-all{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgb(var(--navy-rgb) / .1);}
.ins-home .ins-all .ins-all-note{font-size:.88rem;text-align:center;}

.ins-home .ins-all-note{color:var(--t2);margin:0;}
html:root .ins-home .ins-all a.btn-navy{text-decoration:none;}
/* the author page has no contents card: one centred column */
html:root .art-grid.art-solo{grid-template-columns:minmax(0,760px);justify-content:center;}

/* About page: greeting with the photo, the story, the career lists and what I bring in one column */
.about-page .am-head{display:flex;align-items:center;gap:1.4rem;margin:0 0 1.6rem;}
.about-page .am-head img{width:120px;height:120px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 10px 24px -10px rgb(var(--navy-rgb) / .4);}
.prose .about-page .am-hi{font:700 1.7rem/1.2 var(--fd);color:var(--navy);margin:0;}
.prose .about-page p{margin:0 0 1rem;}
.about-page .am-career{list-style:none;margin:1rem 0 .4rem;padding:0;border-top:1px solid rgb(var(--navy-rgb) / .14);}
.prose .about-page .am-career li{display:grid;grid-template-columns:110px 1fr;gap:1rem;padding:.6rem 0;margin:0;border-bottom:1px solid rgb(var(--navy-rgb) / .1);color:var(--t2);}
.prose .about-page .am-career li::before{display:none;}
.about-page .am-career b{font:700 .8rem var(--fd);letter-spacing:.06em;color:var(--sky-t);padding-top:.15rem;}
.about-page .am-career span strong{color:var(--navy);font-weight:600;}
.about-page .am-grid{display:flex;flex-direction:column;gap:1.3rem;margin-top:1rem;}
.about-page .am-grid h3{font:700 1.08rem/1.3 var(--fd);color:var(--navy);margin:0 0 .3rem;}
.about-page .am-grid p{margin:0;}
@media(max-width:700px){.prose .about-page .am-career li{grid-template-columns:1fr;gap:.1rem;}.about-page .am-head img{width:96px;height:96px;}}

/* the arrow of the glossary card moves forward like the arrows of the guide cards */
.gl-card .go{box-sizing:border-box;transition:background .25s,color .25s,padding .2s ease;}
html:not(.touch) .gl-card:hover .go{padding-left:6px;}
html.touch .gl-card.tap .go{padding-left:6px;}

/* the search and the glossary are a symmetric pair, two equal halves over the whole width */
@media(min-width:861px){
  html:root .ins-page .ins-tools{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem;align-items:stretch;}
  html:root .ins-page .ins-tools .ins-search{max-width:none;}
}

/* the labelled buttons (navy and sky) lift and their arrows move by position, not by transform.
   A transform makes the browser draw the button as a picture during the movement, so the text blurred and the
   arrow seemed to shake for a moment (seen in the screen recording). Moving by position keeps the text sharp.
   The floating "Let's talk" button is fixed on the screen and keeps its own rules. */
html:root:root .btn-navy:not(.fab-talk),html:root:root .btn-sky:not(.fab-talk){top:0;left:0;transition:top .25s ease,left .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;}
html:root:root .btn-navy:not(.fab-talk) span,html:root:root .btn-sky:not(.fab-talk) span{position:relative;left:0;transition:left .2s ease;transform:none!important;}
html:not(.touch):root:root .btn-navy:not(.fab-talk):hover,html:not(.touch):root:root .btn-sky:not(.fab-talk):hover{transform:none!important;top:-2px;left:-2px;}
html:not(.touch):root:root .btn-navy:not(.fab-talk):hover span,html:not(.touch):root:root .btn-sky:not(.fab-talk):hover span{left:4px;}
html.touch:root:root .btn-navy:not(.fab-talk).tap,html.touch:root:root .btn-sky:not(.fab-talk).tap{transform:none!important;top:-2px;left:-2px;}
html.touch:root:root .btn-navy:not(.fab-talk).tap span,html.touch:root:root .btn-sky:not(.fab-talk).tap span{left:4px;}
html:root:root .btn-navy:not(.fab-talk):active,html:root:root .btn-sky:not(.fab-talk):active{transform:none!important;top:1px;left:1px;}

/* buttons that sit on the right on a computer stay on the right on a phone too
   (Explore insights under the timeline and at the end of an article, Let's talk in the article and profile boxes) */
@media(max-width:640px){
  html:root .art-cta>a.btn{justify-self:end;}
  html:root .art-end .btn{align-self:flex-end;margin-left:auto;}
}

/* the title of the pages with the dark header (guides, About, Insights, Glossary) is sky blue like the first line of the hero; the lines below stay grey */
html:root .phead h1{color:var(--sky);}

/* Link to a chapter: a small link icon after the heading of a chapter, light until the heading or the icon is hovered (always lightly visible, also on phones).
   A click copies the address of the chapter; the icon becomes a tick for two seconds. */
.prose h2 .h-anc{display:inline-flex;align-items:center;gap:.4rem;vertical-align:middle;margin-left:.55rem;padding:.2rem;border-radius:6px;color:var(--b-55);opacity:.35;text-decoration:none;font:600 .8rem/1 var(--fb);transition:opacity .2s,color .2s;cursor:pointer;background:none;border:0;}
.prose h2 .h-anc svg{width:18px;height:18px;flex:none;}
html:not(.touch) .prose h2:hover .h-anc,.prose h2 .h-anc:focus-visible{opacity:1;}
.prose h2 .h-anc.done{opacity:1;color:var(--ok);}
.prose h2 .h-anc .h-msg{display:none;}
.prose h2 .h-anc.done .h-msg{display:inline;}
html.touch .prose h2 .h-anc{opacity:.45;padding:.35rem;}
html.touch .prose h2 .h-anc.done{opacity:1;}

/* ================= BUTTONS: one colour recipe, one hover =================
   Colours on the logo ramp (navy to sky): Let's talk and the contacts = 50%, like the other buttons, same corner radius (6px) ; Explore insights, More about me = 50% from sky to navy (#0b73a7); contacts = 1/3 (#00bfff).
   Every button uses the same gradient (the colour in the middle, 4 lightness points lighter at the start and darker at the end, no white added) and the same hover (both ends 7 points darker, lift 2px, arrow 4px). Cards stay white. */
html:root:root:root:root:root:root .btn-sky{background:linear-gradient(135deg,#29ccff 0%,#00b2f1 100%);color:var(--navy);}
html:not(.touch):root:root:root:root:root:root .btn-sky:hover{background:linear-gradient(135deg,var(--sky-hover-a) 0%,var(--sky-hover-b) 100%);}
html.touch:root:root:root:root:root .btn-sky.tap{background:linear-gradient(135deg,var(--sky-hover-a) 0%,var(--sky-hover-b) 100%);}
html:root:root:root:root:root:root .btn-navy:not(.fab-talk),
html:root:root:root:root:root:root .btn-ice{background:linear-gradient(135deg,var(--action-a) 0%,var(--action-b) 100%);color:#fff;border:1px solid;border-color:rgba(255,255,255,.45) rgb(var(--b-35-rgb) / .35) rgb(var(--b-35-rgb) / .5) rgba(255,255,255,.35);box-shadow:3px 6px 14px -3px rgb(var(--b-24-rgb) / .45),inset 1px 1px 2px rgba(255,255,255,.4);position:relative;top:0;left:0;transform:none;transition:top .25s ease,left .25s ease,box-shadow .25s ease;}
html:not(.touch):root:root:root:root:root:root .btn-navy:not(.fab-talk):hover,
html:not(.touch):root:root:root:root:root:root .btn-ice:hover{background:linear-gradient(135deg,var(--action-hover-a) 0%,var(--action-hover-b) 100%);top:-2px;left:-2px;transform:none;box-shadow:6px 10px 20px -4px rgb(var(--b-24-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.4);}
html.touch:root:root:root:root:root .btn-navy:not(.fab-talk).tap,
html.touch:root:root:root:root:root .btn-ice.tap{background:linear-gradient(135deg,var(--action-hover-a) 0%,var(--action-hover-b) 100%);top:-2px;left:-2px;transform:none;}
html:root:root:root:root:root:root .ccard,
html:root:root:root:root:root:root .dl-btn{background:linear-gradient(135deg,var(--action-a) 0%,var(--action-b) 100%);color:#fff;border:1px solid;border-color:rgba(255,255,255,.45) rgb(var(--b-35-rgb) / .35) rgb(var(--b-35-rgb) / .5) rgba(255,255,255,.35);box-shadow:3px 6px 14px -3px rgb(var(--b-24-rgb) / .45),inset 1px 1px 2px rgba(255,255,255,.4);position:relative;top:0;left:0;transform:none;transition:top .25s ease,left .25s ease,box-shadow .25s ease;}
html:not(.touch):root:root:root:root:root:root .ccard:hover,
html:not(.touch):root:root:root:root:root:root .dl-btn:hover{background:linear-gradient(135deg,var(--action-hover-a) 0%,var(--action-hover-b) 100%);top:-2px;left:-2px;transform:none;box-shadow:6px 10px 20px -4px rgb(var(--b-24-rgb) / .5),inset 1px 1px 3px rgba(255,255,255,.4);}
html.touch:root:root:root:root:root .ccard.tap,
html.touch:root:root:root:root:root .dl-btn.tap{background:linear-gradient(135deg,var(--action-hover-a) 0%,var(--action-hover-b) 100%);top:-2px;left:-2px;transform:none;}
html:root:root:root:root:root:root .btn-navy:not(.fab-talk):active,
html:root:root:root:root:root:root .btn-ice:active,
html:root:root:root:root:root:root .ccard:active,
html:root:root:root:root:root:root .dl-btn:active{top:1px;left:1px;transform:none;}
html:root:root:root:root:root:root .btn-navy:not(.fab-talk) span,html:root:root:root:root:root:root .btn-ice span{color:#fff;position:relative;left:0;transform:none!important;transition:left .2s ease;}
html:not(.touch):root:root:root:root:root:root .btn-navy:not(.fab-talk):hover span,html:not(.touch):root:root:root:root:root:root .btn-ice:hover span,html.touch:root:root:root:root:root .btn-navy:not(.fab-talk).tap span,html.touch:root:root:root:root:root .btn-ice.tap span{left:4px;transform:none!important;}
html:root:root:root:root:root:root .ccard-label,html:root:root:root:root:root:root .dl-btn small{color:var(--on-dark);}
html:root:root:root:root:root:root .ccard-val,html:root:root:root:root:root:root .dl-btn span{color:#fff;}
html:root:root:root:root:root:root .ccard-icon{background:rgba(255,255,255,.18);border-radius:50%;}
html:root:root:root:root:root:root .ccard-icon svg,html:root:root:root:root:root:root .dl-btn svg,html:root:root:root:root:root:root #contact .dl-btn svg{stroke:#fff;}
html:root:root:root:root:root:root #contact .dl-btn svg{background:rgba(255,255,255,.18);border-radius:50%;}
html:root:root:root:root:root:root #contact .qr-text .ccard-label{color:var(--sky);}
html:root:root:root:root:root:root .ccard,html:root:root:root:root:root:root #contact .dl-btn{border-radius:6px;}
/* hero on a phone: exactly as tall as the largest visible area (CSS lvh, and the largest window height this page has seen, kept by site.js), never longer */
@media(max-width:860px){html:root:root #hero{min-height:max(100lvh,var(--hero-min,0px));padding-bottom:calc(48px + max(100lvh,var(--hero-min,0px)) - 100svh);}}

/* footer logo exactly as wide as the slogan under it (slogan 15px Oxanium = 223px) */
html:root:root footer .f-brand img{width:223px!important;max-width:100%;height:auto!important;}
html:root:root footer .f-slogan{font-size:15px;white-space:nowrap;}

/* the three fields in the hero text are bold */
html:root #hero .sub b.hw{font-weight:600;color:var(--on-dark-accent);}  /* soft blue of the same family as the blue-grey paragraph: neither white (headline) nor sky (headline accent) */

/* Key takeaways, Do and Don't: round marks on whole pixels, the glyph exactly in the middle, the circle centred on the first text line */
html:root:root .prose ul.checklist li::before{width:22px;height:22px;font-size:inherit;line-height:inherit;top:calc((1lh - 22px) / 2);background-position:50% 50%;background-repeat:no-repeat;}
@supports not (top:1lh){html:root:root .prose ul.checklist li::before{top:2px;}}
html:root:root .prose .keyt ul.checklist li::before{background-size:12px 12px;}
html:root:root .prose .dd-do ul.checklist li::before{background-size:14px 14px;}
html:root:root .prose .dd-dont ul.checklist.xlist li::before{background-size:12px 12px;}
html:root:root .prose ul.checklist li{padding-left:34px;}

/* Step graphics: a solid line from circle to circle, drawn behind the circles, no fading and no arrow tips */
html:root:root .prose ol.stepper li::before{width:32px;height:32px;z-index:1;}
html:root:root .prose ol.stepper:not(.v) li::before{position:relative;}
@media(max-width:760px){html:root:root .prose ol.stepper:not(.v) li::before,html:root:root .prose ol.stepper li::before{position:absolute;left:0;top:0;margin:0;}}
html:root:root .prose ol.stepper.v li::before{position:absolute;left:0;top:0;margin:0;}
html:root:root .prose ol.stepper:not(.v) li:not(:last-child)::after{content:'';position:absolute;top:15px;left:16px;right:-16px;width:auto;height:2px;background:var(--sky);z-index:0;}
html:root:root .prose ol.stepper.v li:not(:last-child)::after{top:16px;bottom:-16px;left:15px;right:auto;width:2px;height:auto;background:var(--sky);z-index:0;}
@media(max-width:760px){html:root:root .prose ol.stepper:not(.v) li:not(:last-child)::after,html:root:root .prose ol.stepper li:not(:last-child)::after{content:'';position:absolute;top:16px;bottom:-16px;left:15px;right:auto;width:2px;height:auto;background:var(--sky);z-index:0;}}
html:root:root .prose ol.stepper.v li,html:root:root .prose ol.stepper li{padding-left:0;}
html:root:root .prose ol.stepper.v li{padding:0 0 1.5rem 3.1rem;}
html:root:root .prose ol.stepper.v li:last-child{padding-bottom:0;}
@media(max-width:760px){html:root:root .prose ol.stepper li{padding:0 0 1.5rem 3.1rem;}html:root:root .prose ol.stepper li:last-child{padding-bottom:0;}}

/* tables and graphics in the text are flat (3D is for controls). On phones a wide table scrolls sideways inside its own frame;
   a soft edge shows on the side where more is hidden, and the table stops at its ends instead of bouncing */
html:root:root .prose .tbl,html:root:root .prose .fig-g,html:root:root .prose .keyt,html:root:root .prose .dd-col{box-shadow:none;}
.prose .tbl{position:relative;overflow:hidden;}
.prose .tbl .tbl-s{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;}
.prose .tbl::before,.prose .tbl::after{content:'';position:absolute;top:0;bottom:0;width:34px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:3;}
.prose .tbl::before{left:0;background:linear-gradient(90deg,rgb(var(--navy-rgb) / .22),rgb(var(--navy-rgb) / 0));}
.prose .tbl::after{right:0;background:linear-gradient(270deg,rgb(var(--navy-rgb) / .22),rgb(var(--navy-rgb) / 0));}
.prose .tbl.more-l::before,.prose .tbl.more-r::after{opacity:1;}
.prose .tbl-hint{display:none;margin:.5rem 0 1.4rem;font-size:.75rem;color:var(--t2);}
@media(max-width:760px){
  .prose .tbl table{min-width:34rem;}
  .prose .tbl.narrow table{min-width:0;}
  .prose .tbl.scrolls + .tbl-hint{display:block;}
}

/* Print: an article (or any page) prints as clean text on white. No menu, dark header, contents, buttons or footer;
   boxes and tables are never split across two pages; the address of the online version closes the article. */
.print-url{display:none;}
@media print{
  @page{margin:16mm 15mm 18mm;}
  html,body{background:#fff !important;}
  *,*::before,*::after{box-shadow:none !important;text-shadow:none !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  #nav,.mob,.read-bar,.skip,.fab-talk,#starfield,.toc,.art-foot,footer,dialog,.crumbs,.sample-note,.gl-tip{display:none !important;}
  .prose .gl{border:0;background:none;}
  .prose h2 .h-anc{display:none !important;}
  .phead{background:none !important;min-height:0 !important;padding:0 0 5mm !important;border-bottom:1px solid var(--b-87);margin-bottom:6mm;}
  .phead::before,.phead::after{display:none !important;}
  .phead .sec-inner{padding:0 !important;max-width:none !important;}
  .phead .sec-inner::before{content:'SPACEALIST · Insights';display:block;font:600 8.5pt var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--b-50);margin-bottom:3mm;}
  .phead h1{color:var(--navy) !important;font-size:22pt !important;line-height:1.15 !important;margin:0 0 3mm !important;}
  .phead .intro,.phead .art-meta,.phead .art-meta *{color:var(--b-45) !important;}
  .art-wrap{padding:0 !important;background:#fff !important;}
  .art-grid{display:block !important;max-width:none !important;padding:0 !important;margin:0 !important;}
  .prose{font-size:10.5pt;max-width:none !important;}
  .prose .lede{font-size:12pt !important;line-height:1.5 !important;}
  .prose h2{break-after:avoid;page-break-after:avoid;margin-top:7mm !important;scroll-margin:0;}
  .prose h3{break-after:avoid;page-break-after:avoid;}
  .prose .tbl,.prose figure,.prose .keyt,.prose .faqbox,.prose .dd-col,.prose li,.prose tr,.prose .callout{break-inside:avoid;page-break-inside:avoid;}
  .prose .tbl{overflow:visible !important;}
  .prose a{color:inherit !important;text-decoration:underline;}
  .print-url{display:block !important;margin-top:8mm;padding-top:3mm;border-top:1px solid var(--b-87);font-size:9pt;color:var(--b-45);}
}


/* insights: a short answer page without table of contents, and the "How I help" box */
.art-grid.ins-single{display:block;max-width:780px;}
.prose .callout.help{margin:2rem 0 0;padding:1.1rem 1.3rem;border-left:3px solid var(--sky);border-radius:0 12px 12px 0;background:rgb(var(--sky-rgb) / .08);}
.prose .callout.help .ct{margin:0 0 .3rem;font:700 .95rem/1.3 var(--fd);color:var(--navy);}
.prose .callout.help p{margin:0;}
.prose .callout.help p+p{margin-top:.9rem;}
.ins-single .prose h3{color:var(--navy);margin-top:2rem;}
.ins-single .prose h3:first-child{margin-top:0;}

/* the About window shares the look of /about/ */
.about-modal .am-head{display:flex;align-items:center;gap:1.2rem;margin:0 0 1.2rem;}
.about-modal .am-head img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 10px 24px -10px rgb(var(--navy-rgb) / .4);}
html:root .about-modal h2.am-hi{font:700 1.6rem/1.2 var(--fd);color:var(--navy);margin:0;}
.about-modal p{margin:0 0 .9rem;}
.about-modal .am-career{list-style:none;margin:.8rem 0 .4rem;padding:0;border-top:1px solid rgb(var(--navy-rgb) / .14);}
.about-modal .am-career li{display:grid;grid-template-columns:110px 1fr;gap:1rem;padding:.55rem 0;margin:0;border-bottom:1px solid rgb(var(--navy-rgb) / .1);}
.about-modal .am-career b{font:700 .8rem var(--fd);letter-spacing:.06em;color:var(--sky-t);padding-top:.15rem;}
.about-modal .am-career span strong{color:var(--navy);font-weight:600;}
.about-modal .am-grid{display:flex;flex-direction:column;gap:1.1rem;margin-top:.8rem;}
.about-modal .am-grid h3{font:700 1.02rem/1.3 var(--fd);color:var(--navy);margin:0 0 .3rem;}
.about-modal .am-grid p{margin:0;}
@media(max-width:700px){.about-modal .am-career li{grid-template-columns:1fr;gap:.1rem;}.about-modal .am-head img{width:80px;height:80px;}}