/* MCNLINK LABS public site: the landing page, the blog and each post.
 *
 * A rebuild of the WordPress theme's look, written for this site rather than
 * copied from it: same layout, palette and type, none of the theme's code.
 *
 * Two palettes. The light one is on bare :root; the dark one is written twice
 * on purpose, once for a visitor who chose it (data-theme, set before the first
 * paint by the script in <head>) and once for one whose system asks for it and
 * who has chosen nothing. A colour used anywhere below must come from a token,
 * or it will be right in one theme and wrong in the other.
 *
 * No inline styles exist on these pages -- the CSP refuses them -- so anything
 * computed (a slide's photo, a bar's length) arrives as a rule in the page's
 * own nonced <style>, built by page_css() in api/_bootstrap.php.
 */

/* ------------------------------------------------------------------ tokens */
:root{
  --bg:#ffffff; --bg-soft:#f4f6fa; --surface:#ffffff; --surface-2:#f0f3f9;
  --ink:#1b1f2a; --text:#555c69; --muted:#8a93a3;
  --line:#e6e9f0; --line-2:#d5dbe5;
  --primary:#0674fd; --secondary:#05c6fb; --green:#79cd1c;
  --grad:linear-gradient(90deg,var(--primary),var(--secondary));
  --grad-diag:linear-gradient(135deg,var(--primary),var(--secondary));
  --glow:rgba(6,116,253,.32);
  --shadow:0 10px 30px rgba(17,38,80,.08);
  --shadow-lg:0 22px 50px rgba(17,38,80,.14);
  --hdr-bg:rgba(255,255,255,.96); --hdr-shadow:0 8px 30px rgba(17,38,80,.08);
  --field-bg:#ffffff; --field-line:#e3e7ee;
  --bar-track:#eceff4; --bar-dark:#23262d; --badge:#2a2d34;
  --steps-line:#9aa3c2; --map-line:rgba(17,38,80,.06);
  --mark-opacity:.2; --deco-opacity:1;
  --ftr-bg:#191b20; --ftr-text:#a9aeb8; --ftr-line:rgba(255,255,255,.1);
  --scroll-thumb:rgba(17,38,80,.22);
  --f-head:'Poppins','Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-body:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-accent:'Playfair Display',Georgia,'Times New Roman',serif;
  --hdr-h:90px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0a0f1a; --bg-soft:#0e1524; --surface:#121a2b; --surface-2:#172136;
  --ink:#eef3fb; --text:#aab4c5; --muted:#7d889b;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --primary:#2d8cff; --secondary:#1fd0f7;
  --glow:rgba(45,140,255,.35);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 22px 50px rgba(0,0,0,.5);
  --hdr-bg:rgba(10,15,26,.94); --hdr-shadow:0 8px 30px rgba(0,0,0,.4);
  --field-bg:#0f1727; --field-line:rgba(255,255,255,.13);
  --bar-track:rgba(255,255,255,.1); --bar-dark:#e8ecf3; --badge:#2c3a55;
  --steps-line:#4d5a78; --map-line:rgba(255,255,255,.05);
  --mark-opacity:.13; --deco-opacity:.85;
  --ftr-bg:#060a12; --ftr-text:#8f9aac; --ftr-line:rgba(255,255,255,.08);
  --scroll-thumb:rgba(255,255,255,.2);
  color-scheme:dark;
}
/* The light palette above is what a visitor gets by default, whatever their
   device is set to: this is a studio's shop window, and the owner chose the
   light one. The dark palette is entirely in [data-theme="dark"], which only
   the theme button sets (and theme_boot_script() restores) -- no rule in this
   file asks the device which colours it would prefer, and the test suite fails
   if one is added. */

/* Things that exist once per theme: the logo, the theme button's icon, and
   the few pictures that carry a light background of their own. */
.on-dark,.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .on-light,:root[data-theme="dark"] .theme-btn .i-moon{display:none}
:root[data-theme="dark"] .on-dark,:root[data-theme="dark"] .theme-btn .i-sun{display:inline-flex}

/* -------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px;border:3px solid transparent;background-clip:content-box}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 15.5px/1.8 var(--f-body);-webkit-font-smoothing:antialiased;
     transition:background-color .3s,color .3s}
img{max-width:100%;height:auto}
a{color:var(--primary)}
p{margin:0 0 14px}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink)}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--primary);color:#fff;padding:10px 16px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

.sec{padding-block:110px;position:relative}
.soft{background:var(--bg-soft)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.prose p{margin:0 0 2px}
.prose strong{color:var(--ink);font-weight:700}
.intro-center{text-align:center;max-width:680px;margin:-4px auto 56px}
.intro-center p{margin:0}
.intro-center.narrow{max-width:760px}
.more-row{text-align:center;margin:34px 0 0}
.empty{text-align:center;color:var(--muted);padding:40px 0}

/* One entrance for everything below the fold. Only when script runs (the
   boot script adds .js), so a page without JavaScript shows everything. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--f-head);text-transform:uppercase;
     letter-spacing:.03em;color:#fff;background:var(--grad);background-size:170% 100%;background-position:0 0;border:0;
     border-radius:40px;padding:18px 38px;text-decoration:none;cursor:pointer;white-space:nowrap;
     transition:background-position .45s,transform .2s,box-shadow .3s}
.btn:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 12px 26px var(--glow)}
.btn:active{transform:none}
.btn-sm{padding:12px 22px;font-size:12.5px}
.btn-block{width:100%;padding:19px;box-shadow:0 10px 26px var(--glow)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.85);padding:16px 36px}
.btn-ghost:hover{background:#fff;color:var(--primary);box-shadow:none}
.btn-line{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-line:hover{background:var(--primary);color:#fff}
.more{display:inline-flex;align-items:center;gap:4px;font:600 13px/1 var(--f-head);text-transform:uppercase;letter-spacing:.02em;
      color:var(--primary);text-decoration:none;margin-top:8px}
.more svg{transition:transform .2s}
.more:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------- section heading */
.hd{position:relative;margin-bottom:28px}
.hd-center{text-align:center;max-width:760px;margin-inline:auto;margin-bottom:22px}
.hd-mark{position:absolute;left:-6px;top:-58px;font:700 116px/1 var(--f-head);white-space:nowrap;pointer-events:none;
         background:linear-gradient(180deg,var(--secondary),var(--primary));-webkit-background-clip:text;background-clip:text;
         color:transparent;opacity:var(--mark-opacity);user-select:none}
.hd-center .hd-mark{left:50%;transform:translateX(-50%)}
.hd-kicker{position:relative;font:500 13px/1.4 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--primary);margin:0 0 10px}
.hd-title{position:relative;font:600 clamp(28px,3vw,42px)/1.22 var(--f-head);color:var(--ink);margin:0;letter-spacing:-.005em}
.hd-bar{display:block;width:46px;height:3px;border-radius:2px;background:var(--primary);margin-top:22px}
.hd-center .hd-bar{margin-inline:auto}
.acc{font-family:var(--f-accent);font-style:italic;font-weight:700;letter-spacing:0;padding-right:.08em;
     background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
     -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ------------------------------------------------------------------ header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr-h);--nav-c:var(--ink);
     transition:background-color .3s,box-shadow .3s,height .3s}
.hdr.solid{background:var(--hdr-bg);box-shadow:var(--hdr-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);--hdr-h:78px}
/* Over the hero the header has no background of its own, so the menu is read
   against the photo. The hero photos carry the page's own background inside the
   JPEG -- white in the light theme -- and depending on the window width the menu
   lands either on the picture or on that white margin beside it. So the light
   theme writes the menu in the page's ink with a white glow behind it (readable
   on both), and only the dark theme keeps it white. */
.hdr.over{--nav-c:var(--ink)}
:root[data-theme="dark"] .hdr.over{--nav-c:#fff}
.hdr-row{height:100%;display:flex;align-items:center;gap:30px;max-width:1240px}
.logo{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.logo-img{height:36px;width:auto}
.nav{margin-left:auto;display:flex;gap:30px}
.nav a{position:relative;font:500 15px/1 var(--f-head);color:var(--nav-c);text-decoration:none;padding:12px 0;transition:color .2s}
.hdr.over .nav a{text-shadow:0 0 12px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9)}
:root[data-theme="dark"] .hdr.over .nav a{text-shadow:0 1px 10px rgba(0,0,0,.25)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;border-radius:2px;background:var(--green);
              transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.hdr.solid .nav a:hover{color:var(--primary)}
.hdr-tools{display:flex;align-items:center;gap:4px;margin-left:6px}
.tool{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--nav-c);display:inline-grid;place-items:center;
      cursor:pointer;padding:0;transition:background-color .2s,color .2s}
.tool:hover{background:rgba(127,140,160,.16)}
.hdr.over .tool{filter:drop-shadow(0 0 5px rgba(255,255,255,.95))}
:root[data-theme="dark"] .hdr.over .tool{filter:drop-shadow(0 1px 6px rgba(0,0,0,.25))}
.theme-btn span{align-items:center;justify-content:center}
.theme-btn .i-moon{display:inline-flex}
body.inner main{padding-top:0}

/* ----------------------------------------------------------- side panel */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(5,10,20,.55);opacity:0;transition:opacity .3s}
.scrim.show{opacity:1}
/* Hidden, not just moved: off-screen to the right its shadow would still fall
   across the edge of every page, and its links would still take focus. */
.panel{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(380px,88vw);background:var(--surface);color:var(--text);
       transform:translateX(102%);visibility:hidden;display:flex;flex-direction:column;padding:24px 30px 30px;overflow-y:auto;
       transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s,box-shadow .38s}
.panel.open{transform:none;visibility:visible;box-shadow:-24px 0 60px rgba(0,0,0,.2);
            transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s}
.panel .tool{color:var(--ink)}
.panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.panel-nav{display:grid}
.panel-nav a{font:600 19px/1.3 var(--f-head);color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line);transition:color .2s,padding .2s}
.panel-nav a:hover{color:var(--primary);padding-left:6px}
.panel-socials{margin-top:auto;padding-top:34px}
.panel .socials a,.panel .socials span{background:var(--surface-2);color:var(--ink)}
.panel .socials a:hover{color:#fff}
body.locked{overflow:hidden}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;height:clamp(560px,68vw,980px);overflow:hidden;background:var(--bg)}
.hero-slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.slide.on{opacity:1;visibility:visible;transition:opacity 1.1s ease}
.slide-bg{position:absolute;inset:0;background-color:var(--bg);background-size:cover;background-position:center;
          transform:scale(1.05);transition:transform 8s ease-out}
.slide.on .slide-bg{transform:scale(1)}
.hero .wrap{max-width:1240px}
.slide-body{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
            padding-left:calc(20px + 29%);padding-top:40px}
.slide-title{margin:0;font:600 clamp(38px,4.3vw,64px)/1.12 var(--f-head);color:#fff;letter-spacing:-.01em;text-shadow:0 2px 22px rgba(0,0,0,.35)}
.slide-title span{display:block}
.slide-title .acc{text-shadow:none;filter:drop-shadow(0 2px 14px rgba(0,0,0,.3))}
.slide-text{margin:18px 0 0;max-width:520px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.slide-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.slide.on .slide-title,.slide.on .slide-text,.slide.on .slide-cta{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.slide.on .slide-text{animation-delay:.12s}
.slide.on .slide-cta{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.deco{position:absolute;z-index:2;pointer-events:none;opacity:var(--deco-opacity);animation:float 7s ease-in-out infinite}
.deco-cross{left:max(14px,calc(50% - 704px));top:calc(50% - 178px)}
.deco-dots{left:max(80px,calc(50% - 594px));top:calc(50% + 121px);animation-delay:-2s}
.deco-tri{left:calc(50% - 880px);top:calc(50% - 8px);animation-delay:-4s}
.deco-rings{left:calc(50% - 1050px);top:calc(50% + 189px);animation:spin 40s linear infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-dots{position:absolute;z-index:4;right:max(22px,calc(50% - 566px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.hero-dots button{width:12px;height:12px;border-radius:50%;border:0;padding:0;background:#fff;cursor:pointer;box-shadow:0 0 0 0 rgba(255,255,255,.35);transition:.3s}
.hero-dots button.on{background:var(--primary);box-shadow:0 0 0 5px rgba(255,255,255,.35)}
@media (prefers-reduced-motion:reduce){
  .deco,.slide.on .slide-title,.slide.on .slide-text,.slide.on .slide-cta{animation:none}
  .slide-bg,.slide.on .slide-bg{transform:none;transition:none}
}

/* ------------------------------------------------------------------- about */
.about{padding-top:120px}
.about-media{margin:0}
.about-media img{display:block;width:100%;max-width:580px;margin-left:auto}
.bars{margin-top:30px;display:grid;gap:12px;max-width:470px}
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.bar-label{font:500 14px/1.2 var(--f-body);color:var(--ink);min-width:66px}
.bar-track{height:7px;border-radius:7px;background:var(--bar-track);overflow:hidden}
.bar-fill{display:block;height:100%;width:var(--w,0);border-radius:inherit;transition:width 1.8s cubic-bezier(.2,.8,.2,1)}
.js .bar-fill{width:0}
.js .in .bar-fill{width:var(--w,0)}
.bar-fill.c-red{background:linear-gradient(90deg,#ff1a3c,#ff4d6a)}
.bar-fill.c-dark{background:var(--bar-dark)}
.bar-fill.c-blue{background:var(--grad)}
.bar-fill.c-cyan{background:var(--secondary)}
.bar-val{font:600 11.5px/1 var(--f-head);color:#fff;background:var(--badge);border-radius:3px;padding:5px 7px}

/* ---------------------------------------------------------------- projects */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:10px}
.steps-line{position:absolute;left:0;top:4px;width:100%;height:80px;z-index:0;overflow:visible}
.steps-line path{fill:none;stroke:var(--steps-line);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9;vector-effect:non-scaling-stroke}
.steps-line .tip{stroke-dasharray:none;stroke-width:2.5;stroke-linejoin:round}
.step{position:relative;z-index:1;text-align:center}
.step-ic{position:relative;width:88px;height:88px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;
         background:var(--grad-diag);box-shadow:0 12px 28px var(--glow),0 0 0 8px rgba(255,255,255,.0);margin-bottom:26px;transition:transform .35s}
.step:hover .step-ic{transform:translateY(-6px)}
.step-n{position:absolute;top:-2px;right:-4px;width:28px;height:28px;border-radius:50%;background:var(--surface);color:var(--primary);
        font:600 12.5px/28px var(--f-head);box-shadow:var(--shadow);opacity:0;transform:scale(.5);transition:.3s}
.step:hover .step-n{opacity:1;transform:none}
.step h3{font:600 17px/1.3 var(--f-head);text-transform:uppercase;margin:0 0 8px}
.step-lines span{display:block;font-size:14.5px;line-height:1.95}

/* ---------------------------------------------------------------- features */
.feature-media{position:relative;margin:0;padding:38px 0 0 38px}
.feature-media::before{content:"";position:absolute;left:0;top:0;width:82%;height:80%;border-radius:10px;
                       background:linear-gradient(90deg,var(--primary) 0%,color-mix(in srgb,var(--primary) 35%,transparent) 55%,transparent 100%)}
.feature-media.cyan::before{background:linear-gradient(90deg,var(--secondary) 0%,color-mix(in srgb,var(--secondary) 35%,transparent) 55%,transparent 100%)}
.feature-media img{position:relative;display:block;width:100%;border-radius:10px;box-shadow:var(--shadow-lg)}
.feature-text .btn{margin-top:32px}
.feature{padding-block:100px}

/* ---------------------------------------------------------------- carousel */
/* A scroll-snap row. Swipe works with no script at all; site.js adds the
   autoplay and the dots, and only when there is more than fits. */
.carousel{position:relative}
.track{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
       padding:12px 4px 34px;margin-inline:-4px;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track > *{scroll-snap-align:start;flex:0 0 calc((100% - 90px) / 4)}
.car-dots{display:flex;justify-content:center;gap:10px;margin-top:6px}
.car-dots button,.fade-dots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--line-2);cursor:pointer;transition:.3s}
.car-dots button.on{background:var(--primary);width:26px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.track{scroll-behavior:auto}}

/* ---------------------------------------------------------------- channels */
.chan{background:var(--surface-2);border-radius:999px 999px 18px 18px;padding:28px 18px 0;text-align:center;
      display:flex;flex-direction:column;align-items:center;margin-bottom:24px;transition:transform .35s,box-shadow .35s}
.chan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.chan-img{display:block;width:190px;max-width:100%}
.chan-img img{display:block;width:100%;height:auto;aspect-ratio:1}
.chan h3{font:600 17px/1.3 var(--f-head);text-transform:uppercase;margin:14px 0 4px}
.chan p{font-size:14px;margin:0 0 20px}
.socials{display:flex;gap:10px}
.socials a,.socials span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;
                         text-decoration:none;transition:background .25s,transform .25s}
.socials a:hover{background:var(--grad-diag);transform:translateY(-2px)}
.chan-social{margin-top:auto;transform:translateY(50%);background:var(--grad);border-radius:40px;padding:6px 18px;gap:4px;
             box-shadow:0 10px 22px var(--glow)}
.chan-social a,.chan-social span{background:transparent;width:32px;height:32px}
.chan-social a:hover{background:rgba(255,255,255,.18)}

/* --------------------------------------------------------------- portfolio */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.gal-item{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface-2)}
.gal-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(6,20,50,.45));opacity:0;transition:opacity .4s}
.gal-item:hover img{transform:scale(1.06)}
.gal-item:hover::after,.gal-item:focus-visible::after{opacity:1}
.gal-zoom{position:absolute;z-index:1;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
          color:#fff;background:var(--grad-diag);opacity:0;transform:translateY(8px);transition:.35s}
.gal-item:hover .gal-zoom,.gal-item:focus-visible .gal-zoom{opacity:1;transform:none}

/* ---------------------------------------------------------------------- ai */
.ai-grid{display:grid;grid-template-columns:1fr minmax(240px,300px) 1fr;gap:50px;align-items:center}
.ai-col{display:grid;gap:64px}
.ibox{text-align:center;max-width:270px;margin-inline:auto}
.ibox-ic{width:72px;height:72px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;background:var(--grad-diag);
         box-shadow:0 12px 26px var(--glow);margin-bottom:20px;transition:transform .35s}
.ibox:hover .ibox-ic{transform:rotate(-8deg) scale(1.05)}
.ibox h3{font:600 16.5px/1.35 var(--f-head);margin:0 0 10px}
.ibox p{font-size:14.5px;margin:0}
.ai-media{margin:0}
.ai-media img{display:block;width:100%;border-radius:12px;box-shadow:var(--shadow-lg)}

/* ------------------------------------------------------------ achievements */
.ach{overflow:hidden;isolation:isolate}
.ach::before,.ach::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat}
.ach::before{background-image:url('images/achievements-bg.jpg');background-size:cover;background-position:center}
.ach::after{background-image:url('images/achievements-curve.png');background-size:cover;background-position:center;opacity:.2}
:root[data-theme="dark"] .ach::before{opacity:.07;filter:invert(1)}
:root[data-theme="dark"] .ach::after{opacity:.16}
.ach-grid{grid-template-columns:1.3fr 1fr}
.counters{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:30px}
.counter{display:flex;align-items:center;gap:16px}
.counter-ic{color:var(--primary);flex:0 0 auto;display:inline-flex}
.count{display:block;font:700 27px/1.1 var(--f-head);color:var(--ink)}
.counter-l{display:block;font:500 14px/1.3 var(--f-head);color:var(--ink);margin-top:4px}
.ach-media{margin:0;text-align:right}
.ach-media img{display:inline-block;width:100%;max-width:430px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.2))}

/* -------------------------------------------------------------------- team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:10px}
.member{text-align:center}
.member img{display:block;width:180px;height:180px;border-radius:50%;object-fit:cover;margin:0 auto 22px;box-shadow:var(--shadow);
            transition:transform .4s,box-shadow .4s}
.member:hover img{transform:translateY(-6px);box-shadow:0 0 0 5px var(--surface),0 0 0 7px var(--primary),var(--shadow-lg)}
.member h3{font:600 17px/1.3 var(--f-head);margin:0 0 4px}
.member p{font-size:14px;margin:0}

/* ------------------------------------------------------------------- video */
.video{position:relative;isolation:isolate;padding-block:120px 116px;text-align:center;background-color:#0b1020;background-size:cover;background-position:center}
.video::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,9,18,.6)}
.video .hd{margin-bottom:0}
.video .hd-kicker{color:#fff;letter-spacing:.2em}
.video .hd-title{color:#fff}
.video .acc{display:block}
.video .hd-bar{display:none}
.play-btn{position:relative;width:66px;height:66px;margin-top:30px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;background:var(--grad-diag);
          box-shadow:0 0 0 12px color-mix(in srgb,var(--primary) 30%,transparent);text-decoration:none;transition:transform .3s}
.play-btn::before,.play-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--secondary);animation:pulse 2.4s ease-out infinite}
.play-btn::after{animation-delay:1.2s}
.play-btn:hover{transform:scale(1.08)}
@keyframes pulse{from{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.play-btn::before,.play-btn::after{animation:none;opacity:0}}

/* -------------------------------------------------------------------- blog */
.blog .track > *{flex-basis:calc((100% - 60px) / 3)}
.pcard{display:flex;flex-direction:column;background:var(--surface);border-radius:6px;overflow:hidden;box-shadow:0 8px 26px rgba(17,38,80,.09);
       transition:transform .35s,box-shadow .35s}
:root[data-theme="dark"] .pcard{box-shadow:0 8px 26px rgba(0,0,0,.35);border:1px solid var(--line)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pcard-media{position:relative}
.pcard-img{display:block;aspect-ratio:600/313;overflow:hidden;background:var(--surface-2)}
.pcard-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcard-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;
            color:#fff;background:var(--grad-diag);box-shadow:0 0 0 10px color-mix(in srgb,var(--primary) 28%,transparent);text-decoration:none}
.pcard-body{padding:24px 26px 30px;display:flex;flex-direction:column;flex:1}
.pcard-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;line-height:1.5;color:var(--text)}
.pcard-meta span{display:inline-flex;align-items:center;gap:7px}
.pcard-meta svg{color:var(--primary);flex:0 0 auto}
.pcard-bar{position:relative;display:block;height:1px;background:var(--line);margin:16px 0 18px}
.pcard-bar::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:3px;border-radius:2px;background:var(--primary)}
.pcard h3{font:600 19px/1.42 var(--f-head);margin:0}
.pcard h3 a{color:var(--ink);text-decoration:none;transition:color .2s}
.pcard h3 a:hover{color:var(--primary)}
.pcard-text{font-size:14.5px;margin:12px 0 4px}
.pcard .more{margin-top:auto;padding-top:10px}

/* ------------------------------------------------------------ testimonials */
.testi{padding-top:110px}
.testi-band{position:relative;isolation:isolate;margin-top:84px;padding:0 0 64px;background-color:#1c1f26;background-size:cover;background-position:center}
.testi-band::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,12,18,.6)}
.quotes{display:grid;max-width:840px;margin:0 auto;text-align:center}
.quote{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s linear .8s}
.quote.on{opacity:1;visibility:visible;transition:opacity .8s}
.quote-av{display:block;width:108px;height:108px;margin:-54px auto 34px;border-radius:50%;object-fit:cover;background:#fff;
          border:4px solid #fff;box-shadow:0 0 0 3px var(--primary),0 14px 30px rgba(0,0,0,.25)}
.quote blockquote{margin:0}
.quote blockquote p{font-size:17px;line-height:1.95;color:#fff;margin:0}
.quote figcaption b{display:block;font:600 22px/1.3 var(--f-head);color:#fff;margin-top:22px}
.quote figcaption span{display:block;color:var(--secondary);font-size:15px;margin-top:6px}
.fade-dots{grid-area:2/1;display:flex;justify-content:center;gap:10px;margin-top:26px}
.fade-dots button{background:rgba(255,255,255,.45)}
.fade-dots button.on{background:var(--secondary)}

/* ---------------------------------------------------------------- partners */
.logos .track > *{flex-basis:calc((100% - 90px) / 4)}
.logo-cell{display:grid;place-items:center;height:140px;border-radius:14px;transition:background-color .3s}
.logo-cell img{max-width:210px;max-height:112px;width:auto;height:auto;object-fit:contain;transition:transform .3s}
.logo-cell:hover img{transform:scale(1.06)}
/* The logos are the brands' own artwork, dark lettering and all, so on the
   dark theme each sits on a light plate rather than disappearing. */
:root[data-theme="dark"] .logo-cell{background:#eef1f6}

/* ----------------------------------------------------------------- contact */
.contact-grid{align-items:start}
.hd-title.addr{font-size:clamp(24px,2.3vw,31px);line-height:1.34}
.hd-title.addr span,.hd-title.addr .acc{display:block}
.contact-lines span{display:block;font:500 17px/1.6 var(--f-head);color:var(--text)}
.contact-lines a{color:var(--ink);font-style:italic;font-weight:600;text-decoration:none}
.contact-lines a:hover{color:var(--primary)}
.contact-note{max-width:340px;margin-top:34px}
.cform{display:grid;gap:16px}
/* 16px at every width: iOS -- iPad included -- zooms the page when a field
   under 16px takes focus. */
.cform input,.cform textarea,.news input{width:100%;font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--field-bg);
     border:1px solid var(--field-line);border-radius:4px;padding:15px 18px;outline:none;transition:border-color .2s,box-shadow .2s}
.cform input::placeholder,.cform textarea::placeholder{color:var(--muted)}
.cform input:focus,.cform textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.cform textarea{min-height:150px;resize:vertical}
.cform .btn-block{margin-top:6px}
.form-msg{font-size:14px;min-height:1.3em;margin:0;color:var(--primary)}
.form-msg.bad{color:#e5484d}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* "I'm not a robot" -- captcha.js. The state lives in data-state. */
.hcheck{display:flex;align-items:center;gap:12px;background:var(--field-bg);border:1px solid var(--field-line);border-radius:6px;padding:12px 16px;
        transition:border-color .2s,box-shadow .2s}
.hcheck .hc-box{position:relative;flex:0 0 auto;width:24px;height:24px;padding:0;border:2px solid var(--line-2);border-radius:6px;background:transparent;
                cursor:pointer;transition:border-color .18s,background-color .18s}
.hcheck .hc-box:hover{border-color:var(--primary)}
.hcheck .hc-label{font-size:15px;color:var(--ink);cursor:pointer;user-select:none}
.hcheck .hc-state{margin-left:auto;font-size:12.5px;color:var(--muted);text-align:right}
.hcheck[data-state="working"] .hc-box{border-color:var(--line-2);border-top-color:var(--primary);border-radius:50%;cursor:progress;animation:spin .8s linear infinite}
.hcheck[data-state="done"]{border-color:color-mix(in srgb,#1fb87a 55%,transparent)}
.hcheck[data-state="done"] .hc-box{background:#1fb87a;border-color:#1fb87a;cursor:default}
.hcheck[data-state="done"] .hc-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.hcheck[data-state="done"] .hc-state{color:#1fb87a}
.hcheck[data-state="error"] .hc-box{border-color:#e5484d}
.hcheck[data-state="error"] .hc-state{color:#e5484d}
.hcheck.hc-nudge{border-color:var(--primary);animation:nudge 1.1s ease}
@keyframes nudge{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}35%{box-shadow:0 0 0 7px color-mix(in srgb,var(--primary) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.hcheck[data-state="working"] .hc-box{animation-duration:2.4s}.hcheck.hc-nudge{animation:none}}

/* --------------------------------------------------------------------- map */
.map{position:relative;height:420px;background:var(--bg-soft);overflow:hidden}
.map-facade{position:absolute;inset:0;display:grid;place-items:center;
            background-image:linear-gradient(var(--map-line) 1px,transparent 1px),linear-gradient(90deg,var(--map-line) 1px,transparent 1px),
                             radial-gradient(circle at 28% 36%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 42%),
                             radial-gradient(circle at 76% 70%,color-mix(in srgb,var(--secondary) 16%,transparent),transparent 40%);
            background-size:46px 46px,46px 46px,auto,auto}
.map-card{max-width:470px;margin:0 20px;padding:30px 32px;border-radius:14px;text-align:center;background:var(--surface);box-shadow:var(--shadow-lg)}
.map-pin{width:56px;height:56px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;background:var(--grad-diag);margin-bottom:14px;box-shadow:0 10px 24px var(--glow)}
.map-addr{font:600 16px/1.5 var(--f-head);color:var(--ink);margin:0 0 18px}
.map-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.map-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:16px 0 0}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
:root[data-theme="dark"] .map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.75)}

/* ------------------------------------------------------------------ footer */
.ftr{position:relative;isolation:isolate;background:var(--ftr-bg);color:var(--ftr-text);font-size:14.5px}
.ftr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('images/footer-pattern.png') center bottom/cover no-repeat;opacity:.55}
.ftr-top{display:grid;grid-template-columns:1.35fr .75fr .9fr .95fr;gap:44px;padding-block:92px 64px}
.ftr p{line-height:1.85;margin:22px 0 0}
.ftr-col h3{font:600 18px/1.2 var(--f-head);color:#fff;text-transform:uppercase;letter-spacing:.02em;margin:10px 0 28px}
.ftr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ftr-col li{display:flex;align-items:center;gap:10px}
.ftr-col li svg{color:var(--primary);flex:0 0 auto}
.ftr-col a{color:var(--ftr-text);text-decoration:none;transition:color .2s}
.ftr-col a:hover{color:#fff}
.ftr-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:270px}
.ftr-gallery img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;transition:opacity .2s}
.ftr-gallery img:hover{opacity:.8}
.ftr-bottom{border-top:1px solid var(--ftr-line)}
.ftr-bottom-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 24px;padding-block:26px}
.copy{margin:0}
.copy a{color:var(--primary);font-weight:500;text-decoration:none}
.follow{display:flex;align-items:center;gap:14px}
.news{display:grid;gap:8px;margin-top:28px;max-width:380px}
.news-h{font:600 15px/1.3 var(--f-head);color:#fff}
.news-t{font-size:13.5px;line-height:1.5}
.news-row{display:flex;gap:8px;margin-top:4px}
.news input{flex:1;min-width:0;padding:11px 18px;border-radius:30px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff}
.news input::placeholder{color:rgba(255,255,255,.45)}
.news input:focus{border-color:var(--primary)}
.ftr .hcheck{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);border-radius:30px;padding:9px 16px}
.ftr .hcheck .hc-label{color:#fff;font-size:14px}
.ftr .hcheck .hc-box{border-color:rgba(255,255,255,.3)}
.ftr .form-msg{color:var(--secondary)}
.ftr .form-msg.bad{color:#ff8a85}
.to-top{position:fixed;right:22px;bottom:22px;z-index:50;width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;
        color:#fff;background:var(--grad-diag);box-shadow:0 10px 24px var(--glow);cursor:pointer;opacity:0;visibility:hidden;
        transform:translateY(12px);transition:opacity .3s,transform .3s,visibility 0s linear .3s}
.to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}

/* ---------------------------------------------------------------- lightbox */
.lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:30px;background:rgba(4,7,14,.92)}
.lightbox img{max-width:min(1300px,94vw);max-height:86vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:16px;right:16px;color:#fff}

/* ------------------------------------------------------------ inner pages */
.banner{position:relative;overflow:hidden;padding:calc(var(--hdr-h) + 80px) 0 70px;background:var(--bg-soft);text-align:center}
.banner::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
                background:radial-gradient(circle,color-mix(in srgb,var(--secondary) 22%,transparent),transparent 70%);pointer-events:none}
.banner::after{content:"";position:absolute;left:-140px;bottom:-160px;width:420px;height:420px;border-radius:50%;
               background:radial-gradient(circle,color-mix(in srgb,var(--primary) 18%,transparent),transparent 70%);pointer-events:none}
.banner .wrap{position:relative;z-index:1}
.banner .intro-center{margin-bottom:0}
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:30px}
.crumbs a{color:var(--text);text-decoration:none}
.crumbs a:hover{color:var(--primary)}
.crumbs span[aria-current]{max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:54px}
.pg{min-width:44px;height:44px;padding:0 10px;border-radius:22px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ink);
    font:500 14px/1 var(--f-head);text-decoration:none;transition:.2s}
.pg:hover{border-color:var(--primary);color:var(--primary)}
.pg.on{background:var(--grad);border-color:transparent;color:#fff}
.post-head .hd-kicker{margin-bottom:14px}
.post-title{font:600 clamp(28px,3.4vw,46px)/1.25 var(--f-head);max-width:900px;margin:0 auto 20px}
.post-meta{justify-content:center;font-size:14px}
.post-wrap{max-width:860px;padding-block:64px 90px}
.post-cover{margin:0 0 42px}
.post-cover img{display:block;width:100%;border-radius:10px;box-shadow:var(--shadow-lg)}
.post-body{font-size:17px;line-height:1.85;color:var(--text)}
.post-body h2{font:600 clamp(22px,2.2vw,28px)/1.3 var(--f-head);margin:48px 0 16px}
.post-body h3{font:600 21px/1.35 var(--f-head);margin:36px 0 12px}
.post-body h4{font:600 18px/1.4 var(--f-head);margin:30px 0 10px}
.post-body p{margin:0 0 20px}
.post-body strong{color:var(--ink)}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:26px}
.post-body li{margin-bottom:8px}
.post-body li::marker{color:var(--primary)}
.post-body blockquote{margin:32px 0;padding:22px 28px;border-left:4px solid var(--primary);border-radius:0 10px 10px 0;background:var(--bg-soft);color:var(--ink);font-style:italic}
.post-body blockquote p{margin:0}
.post-body figure{margin:32px 0}
.post-body figure img{display:block;border-radius:8px}
.post-body figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;padding-top:30px;border-top:1px solid var(--line)}
.pn{display:grid;gap:6px;text-decoration:none}
.pn span{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--f-head);text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.pn b{font:600 17px/1.4 var(--f-head);color:var(--ink);transition:color .2s}
.pn:hover b{color:var(--primary)}
.pn.next{text-align:right;justify-items:end}

/* The article format's other blocks (api/markup.php): tables, videos, buttons,
   dividers, the contents list. Headings keep clear of the fixed header when a
   contents link jumps to them. */
.post-body h2,.post-body h3,.post-body h4{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.post-body a:not(.btn){color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post-body figure img{max-width:100%;height:auto}
.post-body hr{border:0;height:1px;background:var(--line-2);margin:46px 0}
.post-body .cta{margin:32px 0;text-align:center}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:30px 0;border:1px solid var(--line);border-radius:10px}
.post-body table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.6}
.post-body th,.post-body td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.post-body thead th{background:var(--bg-soft);color:var(--ink);font:600 14.5px/1.5 var(--f-head)}
.post-body tbody tr:last-child td{border-bottom:0}
.post-body .al-c{text-align:center}
.post-body .al-r{text-align:right}
.vid{margin:34px 0}
.vid-facade,.vid iframe{display:block;position:relative;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;overflow:hidden}
.vid-facade{color:#fff;text-decoration:none;box-shadow:var(--shadow-lg);
            background:radial-gradient(circle at 28% 22%,color-mix(in srgb,var(--secondary) 38%,transparent),transparent 62%),linear-gradient(135deg,#0b1830,#12305e)}
.vid-play{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;display:grid;place-items:center;
          background:var(--grad);box-shadow:0 0 0 12px rgba(255,255,255,.12);transition:transform .25s}
.vid-play svg{margin-left:4px}
.vid-facade:hover .vid-play,.vid-facade:focus-visible .vid-play{transform:scale(1.08)}
.vid-note{position:absolute;left:18px;bottom:14px;font-size:13px;opacity:.82}
.toc{margin:0 0 42px;padding:22px 26px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.toc-h{margin:0 0 12px;font:600 13px/1 var(--f-head);text-transform:uppercase;letter-spacing:.08em;color:var(--primary)}
.toc ol{margin:0;padding-left:20px;display:grid;gap:7px}
.toc li{font-size:15.5px;line-height:1.5}
.toc li::marker{color:var(--primary)}
.toc .toc-sub{margin-left:18px;list-style:circle}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--primary)}
.share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
       font:600 13px/1 var(--f-head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.share a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ink);transition:.2s}
.share a:hover{background:var(--grad);border-color:transparent;color:#fff}
.share svg{width:15px;height:15px}
.post-head .hd-kicker a{color:inherit;text-decoration:none}
.cat-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-14px 0 46px}
.cat-chips .chip{padding:9px 18px;border:1px solid var(--line-2);border-radius:22px;color:var(--ink);font:500 14px/1 var(--f-head);text-decoration:none;transition:.2s}
.cat-chips .chip span{color:var(--muted);font-size:12.5px;margin-left:4px}
.cat-chips .chip:hover{border-color:var(--primary);color:var(--primary)}
.cat-chips .chip.on{background:var(--grad);border-color:transparent;color:#fff}
.cat-chips .chip.on span{color:rgba(255,255,255,.85)}
.page-wide{max-width:1170px;padding-block:64px 90px}
/* Only on an administrator's preview of a draft (admin/preview.php). */
.preview-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;padding:11px 20px;text-align:center;
             background:#ffb020;color:#1b1f2a;font-size:14px;box-shadow:0 -6px 20px rgba(0,0,0,.18)}

/* -------------------------------------------------------------- responsive */
@media (max-width:1199px){
  .nav{gap:22px}
  .slide-body{padding-left:calc(20px + 25%)}
  .hd-mark{font-size:96px;top:-46px}
}

/* Below this the menu lives in the side panel and the header is always
   solid: the transparent header only works over the hero's white crescent,
   and on a narrow screen there is none. */
@media (max-width:1099px){
  :root{--hdr-h:74px}
  .nav{display:none}
  .hdr-tools{margin-left:auto}
  .hdr.over{background:var(--hdr-bg);box-shadow:var(--hdr-shadow);--nav-c:var(--ink)}
  .hdr.over .tool,:root[data-theme="dark"] .hdr.over .tool{filter:none}
  .hdr.over .nav a,:root[data-theme="dark"] .hdr.over .nav a{text-shadow:none}
  .hero{height:clamp(560px,76vw,760px);margin-top:var(--hdr-h)}
  .slide-body{padding-left:calc(20px + 22%);padding-top:0}
  .deco-cross,.deco-dots{display:none}
  .hero-dots{right:22px}
  .banner{padding-top:calc(var(--hdr-h) + 60px)}
}

@media (max-width:991px){
  .sec{padding-block:84px}
  .grid-2{grid-template-columns:1fr;gap:50px}
  .about-media img,.ach-media img{margin-inline:auto}
  .ach-media{text-align:center}
  .feature.flip .feature-media{order:-1}
  .feature-media{max-width:640px}
  .steps{grid-template-columns:repeat(2,1fr);gap:50px 30px}
  .steps-line{display:none}
  .ai-grid{grid-template-columns:1fr 1fr;gap:40px 30px}
  .ai-col{display:contents}
  .ai-media{grid-column:1 / -1;grid-row:1;max-width:320px;margin:0 auto 10px}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:40px 30px}
  .track > *{flex-basis:calc((100% - 60px) / 3)}
  .blog .track > *,.logos .track > *{flex-basis:calc((100% - 30px) / 2)}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr 1fr;gap:40px}
}

@media (max-width:767px){
  .sec{padding-block:70px}
  .about{padding-top:70px}
  .hd-mark{font-size:68px;top:-30px}
  .hd-title{font-size:clamp(26px,7vw,34px)}
  /* The photo is the whole hero on a phone: pushed right so the crescent is
     off-screen, with a shade under the text so it stays readable. */
  .hero{height:clamp(520px,118vw,640px)}
  .slide-bg{background-position:72% center}
  .slide::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.6))}
  .slide-body{padding:0 20px 84px;justify-content:flex-end;align-items:center;text-align:center}
  .slide-title{font-size:clamp(32px,9vw,44px)}
  .slide-text{font-size:16px;margin-inline:auto}
  .slide-cta{justify-content:center;margin-top:24px}
  .slide-cta .btn{padding:15px 26px;font-size:13px}
  .hero-dots{flex-direction:row;top:auto;bottom:30px;right:50%;transform:translateX(50%)}
  .gallery{grid-template-columns:1fr;gap:20px}
  .track > *,.blog .track > *{flex-basis:78%}
  .logos .track > *{flex-basis:calc((100% - 30px) / 2)}
  .counters{gap:22px 30px}
  .post-grid{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .pn.next{text-align:left;justify-items:start}
  .map{height:380px}
  .ftr-top{grid-template-columns:1fr;gap:36px;padding-block:70px 44px}
  .ftr-bottom-row{flex-direction:column;text-align:center}
  .testi-band{margin-top:74px}
}

@media (max-width:479px){
  .slide-text{display:none}
  .steps{grid-template-columns:1fr}
  .ai-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr;gap:34px 16px}
  .member img{width:140px;height:140px}
  .btn{padding:16px 28px}
  .map-card{padding:24px 20px}
  .map-actions .btn{width:100%}
}
