/* ==========================================================================
   Gwincast — shared design system
   Optical communication & broadcast television equipment.
   Brand colours read off the Gwincast banners: orange #F5821F, blue #1E63C8,
   deep navy #0A2A5E, on a light optical-blue field.
   ========================================================================== */

:root{
  --orange:#F5821F;
  --orange-600:#E0740F;
  --orange-100:#FFF2E3;

  --blue:#1E63C8;
  --blue-600:#1550A8;
  --blue-400:#4A8DE8;
  --blue-200:#C4DAF3;
  --blue-100:#E3EEFB;

  --navy:#0A2A5E;        /* headings */
  --navy-900:#071A3D;    /* one step deeper, for the top of dark panel gradients */
  --navy-soft:#4A648C;   /* body copy */
  --navy-faint:#5F7395;  /* small mono labels — 4.8:1 on white */

  /* Small orange text needs its own value: brand orange is only 2.3:1 on
     the light field, so it stays on buttons, dots, rules and the logo. */
  --amber-ink:#A85400;   /* 5.1:1 on white */

  --sky-050:#F7FAFE;
  --sky-100:#EDF4FD;
  
  --line:#D9E6F6;
  --white:#FFFFFF;

  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --sh-sm:0 1px 2px rgba(10,42,94,.05), 0 2px 8px rgba(10,42,94,.05);
  --sh-md:0 2px 6px rgba(10,42,94,.06), 0 14px 30px rgba(30,99,200,.10);
  --sh-lg:0 4px 10px rgba(10,42,94,.06), 0 26px 58px rgba(30,99,200,.15);

  --ease:cubic-bezier(.2,.7,.3,1);

  --wrap:1240px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --section:clamp(4rem,8vw,6.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%;}

body{
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--navy-soft);
  background:
    radial-gradient(1200px 600px at 85% -5%, rgba(30,99,200,.10) 0%, transparent 60%),
    radial-gradient(900px 500px at 5% 20%, rgba(245,130,31,.06) 0%, transparent 55%),
    linear-gradient(180deg,var(--sky-050) 0%,var(--sky-100) 45%,var(--sky-050) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px;}

.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;}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:200;background:var(--white);color:var(--navy);padding:.75rem 1.25rem;font-weight:700;text-decoration:none;border-radius:8px;box-shadow:var(--sh-lg);}
.skip:focus{top:1rem;}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}

/* ---------- scroll reveal ---------- */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].in{opacity:1;transform:none;}

/* ==========================================================================
   TYPE
   ========================================================================== */
h1,h2,h3,h4{color:var(--navy);font-weight:700;letter-spacing:-.025em;}
h1,h2,h3{text-wrap:balance;}
h1{font-size:clamp(2.1rem,1.25rem + 3.2vw,3.6rem);line-height:1.07;letter-spacing:-.036em;font-weight:800;}
h2{font-size:clamp(1.7rem,1.25rem + 1.8vw,2.6rem);line-height:1.13;letter-spacing:-.032em;}
h3{font-size:1.15rem;line-height:1.34;letter-spacing:-.02em;}
h4{font-size:1rem;line-height:1.4;letter-spacing:-.012em;}

.lede{font-size:clamp(1.02rem,.98rem + .45vw,1.2rem);line-height:1.62;text-wrap:pretty;}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  color:var(--amber-ink);letter-spacing:.01em;
}
.eyebrow::before{content:'';width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--orange),rgba(245,130,31,.2));}

.sec-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.25rem,4vw,3.5rem);align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.sec-head h2{margin-top:1.1rem;max-width:19ch;}
.sec-head > p{max-width:48ch;text-wrap:pretty;padding-bottom:.4rem;}
@media(max-width:820px){
  .sec-head{grid-template-columns:1fr;align-items:start;gap:1.25rem;}
  .sec-head h2{max-width:24ch;}
  .sec-head > p{padding-bottom:0;}
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem;font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:-.01em;
  border:1px solid transparent;border-radius:10px;text-decoration:none;cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.btn-primary{
  background:linear-gradient(180deg,#FF9333 0%,var(--orange) 55%,var(--orange-600) 100%);
  color:#fff;box-shadow:0 6px 18px rgba(245,130,31,.34), inset 0 1px 0 rgba(255,255,255,.36);
  text-shadow:0 1px 1px rgba(120,55,0,.18);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(245,130,31,.44), inset 0 1px 0 rgba(255,255,255,.36);}
.btn-secondary{
  background:linear-gradient(180deg,var(--blue) 0%,var(--blue-600) 100%);
  color:#fff;box-shadow:0 6px 18px rgba(30,99,200,.28), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(30,99,200,.36), inset 0 1px 0 rgba(255,255,255,.26);}
.btn-ghost{background:rgba(255,255,255,.78);color:var(--navy);border-color:var(--line);backdrop-filter:blur(8px);}
.btn-ghost:hover{background:#fff;border-color:var(--blue-200);transform:translateY(-2px);box-shadow:var(--sh-md);}

.btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .75s var(--ease);
}
.btn:hover::after{transform:translateX(130%);}
.btn-block{width:100%;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{background:linear-gradient(90deg,var(--navy) 0%,var(--blue-600) 100%);color:rgba(255,255,255,.82);}
.topbar-in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:42px;flex-wrap:wrap;font-family:var(--mono);font-size:.75rem;
}
.topbar-in a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s;}
.topbar-in a:hover{color:#fff;}
.topbar-links{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
.lang{display:flex;gap:.15rem;}
.lang a{padding:.15rem .5rem;border-radius:5px;}
.lang a[aria-current="true"]{background:rgba(255,255,255,.2);color:#fff;}

.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 28px rgba(10,42,94,.09);background:rgba(255,255,255,.94);}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:76px;}

.brand{position:relative;display:inline-block;text-decoration:none;}
.brand-arcs{position:absolute;left:0;top:-8px;width:15px;height:15px;color:var(--orange);}
.brand-word{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-.045em;color:var(--blue);line-height:1;font-style:italic;}
.brand-word em{font-style:normal;color:var(--orange);}
@media(max-width:520px){.brand-word{font-size:1.3rem;} .brand-arcs{width:13px;height:13px;top:-7px;}}

.nav-menu{display:flex;justify-content:center;flex:1;}
.nav-links{display:flex;gap:.05rem;}
/* the current page gets an outlined box, as on the reference nav */
.nav-links > a{
  position:relative;padding:.52rem .8rem;border-radius:9px;
  border:1.5px solid transparent;
  color:var(--navy);text-decoration:none;font-weight:600;font-size:.9375rem;
  letter-spacing:.01em;
  transition:background-color .25s, color .25s, border-color .25s;
}
.nav-links > a:hover{background:var(--blue-100);}
/* amber-ink, not orange-600: brand orange is only 3.2:1 on white, and 15px
   semibold does not qualify as large text */
.nav-links > a[aria-current="page"]{
  border-color:var(--orange);color:var(--amber-ink);
  background:rgba(245,130,31,.07);
}

/* search affordance */
.nav-search{
  display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;
  border:1.5px solid transparent;border-radius:11px;background:none;
  color:var(--navy);cursor:pointer;
  transition:background-color .25s, border-color .25s, color .25s;
}
.nav-search:hover{background:var(--blue-100);color:var(--blue-600);}
.nav-search svg{width:19px;height:19px;}

/* ---------- site search ---------- */
.search-panel{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 24px 44px rgba(10,42,94,.14);
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
  z-index:115;
}
.search-panel.open{max-height:min(72vh,620px);overflow-y:auto;}
.search-inner{padding:1.25rem 0 1.5rem;}
.search-box{
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1.1rem;border:1.5px solid var(--line);border-radius:12px;
  background:var(--sky-050);
  transition:border-color .25s, box-shadow .25s, background-color .25s;
}
.search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,99,200,.12);background:#fff;}
.search-box > svg{width:18px;height:18px;color:var(--navy-faint);flex-shrink:0;}
.search-box input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:inherit;font-size:1rem;color:var(--navy);
}
.search-results{list-style:none;margin-top:1rem;display:grid;gap:.15rem;}
.search-results a{
  display:block;padding:.7rem .9rem;border-radius:10px;text-decoration:none;
  color:var(--navy);font-weight:600;font-size:.9375rem;
  transition:background-color .2s;
}
.search-results a:hover,.search-results a:focus-visible{background:var(--sky-100);}
.search-results a span{display:block;font-weight:400;font-size:.8125rem;color:var(--navy-faint);margin-top:.15rem;}
/* injected by site.js for the no-results message — keep even though no page
   contains this class in its markup */
.search-empty{padding:1rem .9rem;font-size:.9375rem;color:var(--navy-faint);}

/* ==========================================================================
   VIDEO
   ========================================================================== */
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;}
@media(max-width:1000px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:660px){.video-grid{grid-template-columns:1fr;}}

.video-card{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.video-card:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:var(--blue-200);}

.video-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  display:grid;place-items:center;
  background:
    radial-gradient(80% 100% at 50% 120%, rgba(30,99,200,.5) 0%, transparent 62%),
    linear-gradient(160deg,var(--navy-900) 0%,var(--navy) 58%,#061B3E 100%);
}
.video-frame::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(80% 75% at 50% 55%,#000,transparent 80%);
          mask-image:radial-gradient(80% 75% at 50% 55%,#000,transparent 80%);
}
.play-btn{
  position:relative;display:grid;place-items:center;
  width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.45);
  color:#fff;backdrop-filter:blur(4px);
  transition:transform .35s var(--ease), background-color .3s, border-color .3s;
}
.play-btn svg{width:20px;height:20px;margin-left:3px;}
.video-card:hover .play-btn{transform:scale(1.12);background:var(--orange);border-color:var(--orange);}
.video-dur{
  position:absolute;right:.75rem;bottom:.75rem;
  font-family:var(--mono);font-size:.6875rem;color:#fff;
  background:rgba(4,12,28,.7);padding:.2rem .5rem;border-radius:6px;
}
.video-body{padding:1.3rem 1.5rem 1.55rem;display:flex;flex-direction:column;flex:1;}
.video-body h3{font-size:1.1rem;line-height:1.35;margin-top:.65rem;}
.video-body p{margin-top:.55rem;font-size:.9375rem;line-height:1.6;flex:1;}

.video-feature{
  position:relative;margin-bottom:1.75rem;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-md);
  aspect-ratio:21/9;display:grid;place-items:center;
  background:
    radial-gradient(70% 100% at 50% 125%, rgba(30,99,200,.55) 0%, transparent 62%),
    linear-gradient(155deg,var(--navy-900) 0%,var(--navy) 55%,#061B3E 100%);
}
.video-feature::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 80%);
          mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 80%);
}
.video-feature .play-btn{width:76px;height:76px;}
.video-feature .play-btn svg{width:26px;height:26px;}
.video-caption{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.75rem 1.5rem;
  background:linear-gradient(180deg,transparent,rgba(4,12,28,.78));
  color:#fff;
}
.video-caption .post-meta{color:rgba(255,255,255,.7);}
.video-caption h3{color:#fff;margin-top:.5rem;font-size:clamp(1.15rem,1rem + .8vw,1.6rem);max-width:52ch;}
@media(max-width:700px){.video-feature{aspect-ratio:16/9;}}

/* ---------- three-level product menu ---------- */
.nav-item{position:relative;display:flex;}
.nav-trigger{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.52rem .8rem;border:1.5px solid transparent;border-radius:9px;background:none;cursor:pointer;
  font-family:inherit;font-size:.9375rem;font-weight:600;color:var(--navy);
  letter-spacing:.01em;
  transition:background-color .25s, color .25s, border-color .25s;
}
.nav-trigger:hover{background:var(--blue-100);}
.nav-trigger[aria-expanded="true"]{background:var(--blue-100);color:var(--blue-600);}
.nav-trigger[aria-current="page"]{
  border-color:var(--orange);color:var(--amber-ink);
  background:rgba(245,130,31,.07);
}
.nav-trigger .caret{width:9px;height:9px;flex-shrink:0;transition:transform .3s var(--ease);}
.nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg);}

/* level 2 (Optical / Broadcast) and level 3 (the products) */
.mega{
  position:absolute;top:calc(100% + .75rem);left:50%;
  width:min(620px,86vw);
  transform:translate(-50%,-10px);
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-lg);padding:1.35rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, transform .3s var(--ease), visibility .22s;
  z-index:110;
}
/* invisible bridge so the pointer can travel from trigger to panel */
.mega::before{content:'';position:absolute;left:0;right:0;top:-.85rem;height:.85rem;}
.mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem;}
.mega-col{display:flex;flex-direction:column;}
.mega-head{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  color:var(--amber-ink);padding:.35rem .75rem .6rem;
}
.mega-col.broadcast .mega-head{color:var(--blue-600);}
.mega-col a{
  display:block;padding:.5rem .75rem;border-radius:8px;text-decoration:none;
  color:var(--navy);font-size:.9375rem;font-weight:600;
  transition:background-color .2s, color .2s, padding-left .25s var(--ease);
}
.mega-col a:hover{background:var(--sky-100);color:var(--blue-600);padding-left:.95rem;}
.mega-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.25rem;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);
}
.mega-foot a{font-size:.875rem;font-weight:700;color:var(--blue-600);text-decoration:none;}
.mega-foot a:hover{color:var(--orange-600);}

/* ---------- mobile nav ---------- */
.nav-toggle{
  display:none;place-items:center;gap:4px;
  width:42px;height:42px;padding:0;border:1px solid var(--line);
  border-radius:11px;background:#fff;cursor:pointer;
}
.nav-toggle span{display:block;width:17px;height:2px;border-radius:2px;background:var(--navy);
  transition:transform .3s var(--ease), opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Declared before the drawer query so the query can turn it back on —
   order matters here, not specificity. */
.nav-drawer-foot{display:none;}
@media(max-width:1180px){
  .nav-toggle{display:grid;}
  .nav-menu{
    display:block;flex:none;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 24px 44px rgba(10,42,94,.14);
    max-height:0;overflow:hidden;
    transition:max-height .42s var(--ease);
  }
  .nav-menu.open{max-height:min(78vh,660px);overflow-y:auto;}
  .nav-links{flex-direction:column;gap:.1rem;padding:1rem;}
  .nav-links > a{padding:.8rem 1rem;font-size:1rem;}
  .nav-item{display:block;}
  .nav-trigger{width:100%;justify-content:space-between;padding:.8rem 1rem;font-size:1rem;}
  .mega{
    position:static;width:auto;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;box-shadow:none;border:0;border-radius:0;
    padding:0 0 0 .9rem;margin:.15rem 0 .5rem .9rem;
    border-left:2px solid var(--blue-200);
    max-height:0;overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .mega::before{display:none;}
  .mega.open{max-height:540px;}
  .mega-grid{grid-template-columns:1fr;gap:.25rem;}
  .mega-head{padding:.5rem .75rem .4rem;}
  .nav-drawer-foot{display:block;padding:0 1rem 1.25rem;}
}
@media(max-width:620px){.nav-cta{display:none;}}
@media(max-width:480px){
  .nav .btn{padding:.68rem 1rem;font-size:.875rem;}
  .nav-toggle{width:38px;height:38px;}
  .nav-search{width:38px;height:38px;}
}

/* ==========================================================================
   HOME HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.75rem,5.5vw,5rem) clamp(2.25rem,4.5vw,3.75rem);}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(30,99,200,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.055) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(120% 85% at 72% 15%,#000 0%,transparent 70%);
          mask-image:radial-gradient(120% 85% at 72% 15%,#000 0%,transparent 70%);
}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem);align-items:center;}
.hero-copy{max-width:36ch;}
.hero h1{margin-top:1.25rem;}
/* Blue-to-blue, not blue-to-orange: those two are near-complementary and
   every blend between them passes through grey. */
.hero h1 span{
  background:linear-gradient(96deg,var(--blue) 0%,#3B7FE0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--blue);
}
.hero .lede{margin-top:1.4rem;max-width:46ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem;}

.slogan{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:2.5rem;
  padding:.55rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--sh-sm);
  font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--blue-600);
}
.slogan::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(245,130,31,.18);}

.hero-copy > *{animation:riseIn .9s var(--ease) both;}
.hero-copy > *:nth-child(1){animation-delay:.05s;}
.hero-copy > *:nth-child(2){animation-delay:.15s;}
.hero-copy > *:nth-child(3){animation-delay:.27s;}
.hero-copy > *:nth-child(4){animation-delay:.39s;}
.hero-copy > *:nth-child(5){animation-delay:.51s;}
@keyframes riseIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

.hero-visual{position:relative;display:grid;place-items:center;min-height:390px;}
.ribbons{position:absolute;inset:-8% -12%;width:124%;height:116%;overflow:visible;}
.ribbons path{
  fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(74,141,232,.5));
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:draw 2.6s var(--ease) forwards;
}
.ribbons .r-orange{filter:drop-shadow(0 0 12px rgba(245,130,31,.55));}
@keyframes draw{to{stroke-dashoffset:0;}}
.ribbons .p1{animation-delay:.2s;} .ribbons .p2{animation-delay:.35s;}
.ribbons .p3{animation-delay:.5s;}  .ribbons .p4{animation-delay:.65s;}
.ribbons .p5{animation-delay:.8s;}

.hero-unit{position:relative;width:100%;max-width:460px;animation:unitIn 1.1s var(--ease) .3s both;}
@keyframes unitIn{from{opacity:0;transform:translateY(28px) scale(.95);}to{opacity:1;transform:none;}}
.hero-unit .rack{filter:drop-shadow(0 24px 40px rgba(10,42,94,.22));}

.node-dot{
  position:absolute;width:10px;height:10px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 5px rgba(245,130,31,.2), 0 0 18px 6px rgba(245,130,31,.45);
  animation:pulseDot 3.2s ease-in-out infinite;
}
.node-dot.a{top:18%;right:12%;}
.node-dot.b{bottom:20%;left:8%;animation-delay:1.6s;}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.35);opacity:.75;}}

@media(max-width:980px){
  .hero-in{grid-template-columns:1fr;}
  .hero-copy{max-width:46ch;}
  .hero-visual{min-height:290px;margin-top:1.5rem;}
  .ribbons{inset:-6% -6%;width:112%;height:112%;}
}

/* ==========================================================================
   INNER PAGE HERO
   ========================================================================== */
.page-hero{
  position:relative;overflow:hidden;
  padding-block:clamp(2.5rem,4.5vw,4rem) clamp(2.25rem,4vw,3.5rem);
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(30,99,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.05) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(100% 120% at 85% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(100% 120% at 85% 0%,#000 0%,transparent 72%);
}
.page-hero-in{position:relative;max-width:64ch;}
.page-hero h1{margin-top:1.1rem;}
.page-hero .lede{margin-top:1.35rem;max-width:56ch;}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem;}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.75rem;color:var(--navy-faint);
}
.crumbs a{color:var(--blue-600);text-decoration:none;transition:color .2s;}
.crumbs a:hover{color:var(--orange-600);}
.crumbs span[aria-hidden]{opacity:.5;}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  overflow:hidden;padding-block:1rem;
  background:linear-gradient(90deg,var(--navy) 0%,var(--blue-600) 50%,var(--navy) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%);}}
.mq-item{
  display:inline-flex;align-items:center;gap:1.5rem;padding-inline:1.5rem;
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;
  color:rgba(255,255,255,.8);white-space:nowrap;
}
.mq-item::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0;}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding-block:var(--section);}
.section.tight{padding-block:clamp(2.5rem,5vw,4rem);}
.section.alt{background:rgba(255,255,255,.55);border-block:1px solid var(--line);}

/* ==========================================================================
   BUSINESS LINES
   ========================================================================== */
.line-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;}
.line-card{
  position:relative;overflow:hidden;
  padding:clamp(1.75rem,3vw,2.6rem);
  border-radius:20px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.line-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--blue-200);}
.line-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-400));
}
.line-card.optical::before{background:linear-gradient(90deg,var(--orange),#FFB067);}
.line-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.35rem;}
.line-icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(150deg,var(--blue-100),#fff);
  border:1px solid var(--blue-200);color:var(--blue);
}
.line-card.optical .line-icon{background:linear-gradient(150deg,var(--orange-100),#fff);border-color:#FBD9B4;color:var(--orange-600);}
.line-tag{font-family:var(--mono);font-size:.6875rem;color:var(--navy-faint);}
.line-card h3{font-size:1.3rem;}
.line-card p{margin-top:.8rem;}
.line-list{list-style:none;margin-top:1.35rem;padding-top:1.25rem;border-top:1px solid var(--line);display:grid;gap:.6rem;}
.line-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9375rem;}
.line-list svg{width:16px;height:16px;flex-shrink:0;margin-top:.25rem;color:var(--blue);}
.line-card.optical .line-list svg{color:var(--orange-600);}
@media(max-width:820px){.line-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
.prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;}
.pcard{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:var(--blue-200);}
.pcard-visual{
  position:relative;padding:2.1rem 1.5rem 1.9rem;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(80% 90% at 50% 115%, rgba(30,99,200,.13) 0%, transparent 62%),
    linear-gradient(165deg,#FFFFFF 0%,var(--sky-100) 60%,var(--blue-100) 100%);
  border-bottom:1px solid var(--line);
}
.pcard-visual::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.05) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 55%,#000,transparent 78%);
          mask-image:radial-gradient(85% 75% at 50% 55%,#000,transparent 78%);
}
.pcard-visual::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .9s var(--ease);
}
.pcard:hover .pcard-visual::after{transform:translateX(130%);}
.pcard-visual .rack{position:relative;width:100%;filter:drop-shadow(0 14px 20px rgba(10,42,94,.16));transition:filter .45s ease, transform .45s var(--ease);}
.pcard:hover .pcard-visual .rack{filter:drop-shadow(0 20px 28px rgba(10,42,94,.2));transform:scale(1.03);}
.pcard-badge{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;padding:.28rem .65rem;border-radius:7px;
  background:rgba(255,255,255,.9);color:var(--blue-600);border:1px solid var(--blue-200);
}
.pcard-badge.optical{color:var(--amber-ink);border-color:#FBD9B4;background:rgba(255,248,240,.94);}
.pcard-body{padding:1.5rem 1.6rem 1.75rem;display:flex;flex-direction:column;flex:1;}
.pcard-model{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--blue-600);}
.pcard-body h3{margin-top:.45rem;}
.pcard-desc{margin-top:.7rem;font-size:.9375rem;line-height:1.62;flex:1;}
.spec-list{list-style:none;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line);display:grid;gap:.65rem;}
.spec-list li{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:.9rem;align-items:baseline;}
.spec-list .k{font-family:var(--mono);font-size:.6875rem;color:var(--navy-faint);}
.spec-list .v{color:var(--navy);font-weight:600;font-size:.875rem;}
.pcard-link{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.3rem;
  color:var(--blue-600);font-weight:700;font-size:.9375rem;text-decoration:none;
  transition:color .25s, gap .25s var(--ease);
}
.pcard-link:hover{color:var(--orange-600);gap:.75rem;}
@media(max-width:1000px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:660px){.prod-grid{grid-template-columns:1fr;}}

.panel-note{
  margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;
  padding:1.6rem 1.9rem;border-radius:16px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.panel-note p{font-size:.9375rem;}

/* ==========================================================================
   CATEGORY PAGES — level 2 of the product hierarchy
   A catalogue register: image, name, nothing else. The spec detail lives on
   the level-3 page, so the listing stays scannable.
   ========================================================================== */
.cat-head{text-align:center;max-width:64ch;margin-inline:auto;}
.cat-head h1{margin-bottom:1rem;}
.cat-head p{max-width:56ch;margin-inline:auto;}

/* rule with a triangle beneath, as on the reference category page */
.cat-rule{
  position:relative;width:190px;height:2px;margin:1.5rem auto 0;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
}
.cat-rule::after{
  content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:8px solid var(--blue);
}
.cat-rule.optical{background:linear-gradient(90deg,transparent,var(--orange),transparent);}
.cat-rule.optical::after{border-top-color:var(--orange);}

/* the mega-menu column heading doubles as a link to the category page */
a.mega-head{text-decoration:none;display:inline-block;transition:color .2s;}
a.mega-head:hover{text-decoration:underline;text-underline-offset:3px;}
.mega-col.broadcast a.mega-head:hover{color:var(--blue-600);}
.mega-col.optical a.mega-head:hover{color:var(--orange-600);}

/* ==========================================================================
   PARTNER / FEATURE CARDS
   ========================================================================== */
.partner-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;}
.partner{
  position:relative;overflow:hidden;padding:1.85rem 1.6rem;border-radius:16px;
  background:linear-gradient(180deg,#fff,var(--sky-050));
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.partner:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--blue-200);}
.partner-icon{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:1.2rem;
  background:linear-gradient(150deg,var(--blue),var(--blue-600));color:#fff;
  box-shadow:0 8px 18px rgba(30,99,200,.28);transition:transform .5s var(--ease);
}
.partner:hover .partner-icon{transform:translateY(-3px) rotate(-6deg) scale(1.05);}
.partner h3{margin-bottom:.7rem;}
.partner p{font-size:.9375rem;line-height:1.62;}
@media(max-width:1000px){.partner-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:580px){.partner-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   DARK BAND
   ========================================================================== */
.dark{
  position:relative;overflow:hidden;padding-block:var(--section);
  background:
    radial-gradient(70% 60% at 88% 8%, rgba(30,99,200,.5) 0%, transparent 62%),
    radial-gradient(50% 50% at 6% 96%, rgba(245,130,31,.2) 0%, transparent 60%),
    linear-gradient(165deg,var(--navy) 0%,#061B3E 100%);
  color:rgba(255,255,255,.78);
}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff;}
.dark .lede{color:rgba(255,255,255,.75);}
.dark .eyebrow{color:#FFB067;}
.dark .sec-head > p{color:rgba(255,255,255,.72);}
.dark-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;}
.dark-card{
  padding:1.9rem;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .45s var(--ease), border-color .45s ease;
}
.dark-card:hover{transform:translateY(-6px);border-color:rgba(245,130,31,.45);}
.dark-icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:1.2rem;
  background:rgba(245,130,31,.16);border:1px solid rgba(245,130,31,.34);color:#FFB067;
  transition:transform .5s var(--ease);
}
.dark-card:hover .dark-icon{transform:scale(1.07) rotate(5deg);}
.dark-card p{margin-top:.7rem;font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.72);}
@media(max-width:900px){.dark-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   SOLUTION ROWS (alternating)
   ========================================================================== */
.sol-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(2rem,4vw,3.25rem);
  border-top:1px solid var(--line);
}
.sol-row:last-child{border-bottom:1px solid var(--line);}
.sol-row.flip .sol-visual{order:-1;}
.sol-icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:1.4rem;
  background:linear-gradient(150deg,var(--blue-100),#fff);border:1px solid var(--blue-200);color:var(--blue);
}
.sol-row.optical .sol-icon{background:linear-gradient(150deg,var(--orange-100),#fff);border-color:#FBD9B4;color:var(--orange-600);}
.sol-row h3{font-size:1.4rem;}
.sol-row p{margin-top:.9rem;}
.sol-chain{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.75rem;color:var(--navy-faint);
}
.sol-chain b{display:block;font-weight:500;color:var(--blue-600);margin-top:.3rem;font-size:.8125rem;}
.sol-visual{
  position:relative;padding:2rem 1.6rem;border-radius:18px;
  background:linear-gradient(165deg,#fff 0%,var(--sky-100) 60%,var(--blue-100) 100%);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  display:grid;place-items:center;overflow:hidden;
}
.sol-visual::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.05) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 78%);
}
.sol-visual .rack{position:relative;width:100%;filter:drop-shadow(0 16px 24px rgba(10,42,94,.16));}
@media(max-width:880px){
  .sol-row{grid-template-columns:1fr;gap:1.75rem;}
  .sol-row.flip .sol-visual{order:0;}
}

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.detail-top{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,3.5rem);align-items:start;
}
.detail-gallery{
  position:relative;padding:2.6rem 2rem;border-radius:20px;
  background:linear-gradient(165deg,#fff 0%,var(--sky-100) 60%,var(--blue-100) 100%);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  display:grid;place-items:center;overflow:hidden;
}
.detail-gallery::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.05) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 78%);
}
.detail-gallery .rack{position:relative;width:100%;filter:drop-shadow(0 18px 28px rgba(10,42,94,.18));}

.detail-info h1{margin-top:.9rem;}
.detail-lede{margin-top:1.1rem;}
.kv{list-style:none;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line);display:grid;gap:.85rem;}
.kv li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;align-items:baseline;font-size:.9375rem;}
.kv .k{font-family:var(--mono);font-size:.75rem;color:var(--navy-faint);}
.kv .v{color:var(--navy);font-weight:600;}
.detail-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem;}

.feature-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 2rem;}
.feature-list li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;}
.feature-list svg{width:17px;height:17px;flex-shrink:0;margin-top:.28rem;color:var(--blue);}
@media(max-width:820px){
  .detail-top{grid-template-columns:1fr;}
  .feature-list{grid-template-columns:1fr;}
}

/* ---------- spec table ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--line);background:var(--white);box-shadow:var(--sh-sm);}

/* ---------- specification document ---------- */
.spec-doc{max-width:980px;}
.spec-title{
  position:relative;padding-left:1.15rem;text-transform:uppercase;
  letter-spacing:.015em;font-size:clamp(1.45rem,1.2rem + 1.1vw,2rem);
}
.spec-title::before{
  content:'';position:absolute;left:0;top:.08em;bottom:.08em;width:5px;border-radius:3px;
  background:var(--blue);
}
.spec-title.optical::before{background:var(--orange);}
.spec-sub{margin-top:.9rem;font-weight:600;color:var(--navy-soft);font-size:1.05rem;}
.spec-h{margin-top:2.25rem;margin-bottom:.8rem;font-size:1.0625rem;font-weight:700;color:var(--navy);letter-spacing:-.015em;}
.spec-doc > p{max-width:78ch;text-wrap:pretty;}
.spec-list-plain{list-style:none;display:grid;gap:.55rem;margin-top:.35rem;}
.spec-list-plain li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9375rem;}
.spec-list-plain li::before{
  content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--orange);margin-top:.55rem;
}

/* ---------- colour code table ---------- */
.color-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.8125rem;table-layout:fixed;}
.color-table th,.color-table td{border:1px solid #B9C6D8;padding:.42rem .3rem;text-align:center;}
.color-table thead th{
  background:var(--white);font-family:var(--mono);font-size:.6875rem;
  font-weight:500;color:var(--navy-faint);
}
.color-table td{font-weight:600;font-size:.72rem;letter-spacing:-.01em;}
.color-table caption{
  caption-side:top;text-align:left;font-family:var(--mono);font-size:.6875rem;
  color:var(--navy-faint);padding-bottom:.5rem;
}
@media(max-width:640px){
  .color-table{font-size:.6875rem;}
  .color-table td{font-size:.625rem;}
}

/* ==========================================================================
   DATASHEET LAYOUT — modelled on the Gwincast product datasheets:
   overview, key features, principle chart, grouped specification, ordering.
   ========================================================================== */
.product-shot{
  position:relative;display:grid;place-items:center;
  padding:clamp(1.25rem,3vw,2.25rem);
  border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-sm);overflow:hidden;
}
.product-shot::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.045) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 80%);
          mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 80%);
}
.product-shot img{position:relative;width:100%;height:auto;}
.shot-note{
  position:relative;margin-top:1rem;text-align:center;
  font-family:var(--mono);font-size:.6875rem;color:var(--navy-faint);
}

/* ---- principle chart ---- */
.flowchart{
  position:relative;padding:clamp(1.25rem,3vw,2.25rem);
  border-radius:18px;overflow:hidden;
  background:linear-gradient(165deg,#fff 0%,var(--sky-100) 70%,var(--blue-100) 100%);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.flowchart::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.05) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(85% 80% at 50% 50%,#000,transparent 82%);
          mask-image:radial-gradient(85% 80% at 50% 50%,#000,transparent 82%);
}
.flowchart svg{position:relative;width:100%;height:auto;display:block;}

/* ---- grouped specification table ---- */
.spec-grouped{width:100%;border-collapse:collapse;font-size:.9375rem;}
.spec-grouped th,.spec-grouped td{
  padding:.72rem 1.15rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.spec-grouped .group th{
  background:linear-gradient(90deg,var(--blue-100),rgba(227,238,251,.25));
  color:var(--navy);font-weight:700;font-size:.9375rem;letter-spacing:-.01em;
  border-bottom:1px solid var(--blue-200);border-top:1px solid var(--blue-200);
  padding-block:.85rem;
}
.spec-grouped .group:first-child th{border-top:0;}
.spec-grouped .sub th{
  background:var(--sky-050);color:var(--navy-soft);
  font-weight:600;font-size:.875rem;padding-left:2.1rem;
}
.spec-grouped tbody tr:not(.group):not(.sub) th{
  font-weight:600;color:var(--navy);width:36%;padding-left:2.1rem;
}
.spec-grouped tbody tr:not(.group):not(.sub) td{color:var(--navy-soft);}
.spec-grouped tbody tr:not(.group):hover{background:var(--sky-050);}

/* ---- ordering guide ---- */
.order-table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:520px;}
.order-table th,.order-table td{padding:.68rem 1rem;border:1px solid var(--line);text-align:center;}
.order-table thead th{
  background:var(--navy);color:#fff;font-family:var(--mono);
  font-size:.6875rem;font-weight:500;letter-spacing:.02em;border-color:var(--navy);
}
.order-table tbody th{
  background:var(--sky-050);font-weight:600;color:var(--navy);
  text-align:left;white-space:nowrap;
}
.order-table td{color:var(--navy-soft);font-family:var(--mono);font-size:.8125rem;}
.order-table tbody tr:hover td{background:var(--sky-050);}
.order-table .dash{color:var(--navy-faint);}

/* ---- feature list, two columns, denser than the marketing one ---- */
.feature-list.dense{gap:.75rem 2rem;}
.feature-list.dense li{font-size:.9rem;line-height:1.55;}
.feature-list.dense svg{width:15px;height:15px;margin-top:.3rem;}
.feature-list strong{color:var(--navy);font-weight:700;}

@media(max-width:700px){
  .spec-grouped th,.spec-grouped td{padding:.65rem .9rem;}
  .spec-grouped tbody tr:not(.group):not(.sub) th,
  .spec-grouped .sub th{padding-left:1rem;}
}

/* ==========================================================================
   FOUR-LEVEL PRODUCT TAXONOMY
   Products → solution group → category → product.
   Group pages carry no products, only their categories; category pages list
   the products, eight to a page.
   ========================================================================== */

/* ---- level 1 → 2 : solution group cards ---- */
.group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;}
@media(max-width:1000px){.group-grid{grid-template-columns:1fr;}}

.group-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(1.6rem,2.6vw,2.2rem);
  border-radius:20px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-sm);text-decoration:none;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.group-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--blue-200);}
.group-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-400));
}
.group-card.warm::before{background:linear-gradient(90deg,var(--orange),#FFB067);}
.group-card.warm:hover{border-color:#FBD9B4;}
.group-icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:1.2rem;
  background:linear-gradient(150deg,var(--blue-100),#fff);
  border:1px solid var(--blue-200);color:var(--blue);
}
.group-card.warm .group-icon{background:linear-gradient(150deg,var(--orange-100),#fff);border-color:#FBD9B4;color:var(--orange-600);}
.group-tag{font-family:var(--mono);font-size:.6875rem;color:var(--navy-faint);}
.group-card h3{font-size:1.3rem;margin-top:.35rem;}
.group-card > p{margin-top:.7rem;font-size:.9375rem;flex:1;}
.group-cats{
  list-style:none;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line);
  display:grid;gap:.5rem;
}
.group-cats li{display:flex;gap:.65rem;align-items:baseline;font-size:.9rem;color:var(--navy-soft);}
.group-cats li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue-400);flex-shrink:0;}
.group-card.warm .group-cats li::before{background:var(--orange);}
.group-more{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.25rem;
  color:var(--blue-600);font-weight:700;font-size:.9375rem;
  transition:gap .25s var(--ease), color .25s;
}
.group-card.warm .group-more{color:var(--orange-600);}
.group-card:hover .group-more{gap:.75rem;}

/* ---- group page → its categories ---- */
.cat-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;}
@media(max-width:900px){.cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:580px){.cat-tiles{grid-template-columns:1fr;}}

.cat-tile{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--white);border:1.5px solid var(--line);border-radius:16px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.cat-tile:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--blue-400);}
.cat-tile-visual{
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;padding:1.4rem;
  overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(165deg,#fff 0%,var(--sky-100) 65%,var(--blue-100) 100%);
}
.cat-tile-visual::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.05) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 75% at 50% 55%,#000,transparent 80%);
          mask-image:radial-gradient(80% 75% at 50% 55%,#000,transparent 80%);
}
.cat-tile-visual svg,.cat-tile-visual .rack{position:relative;width:100%;}
.cat-tile-visual .rack{filter:drop-shadow(0 10px 16px rgba(10,42,94,.16));}
.cat-tile-body{padding:1.15rem 1.35rem 1.4rem;}
.cat-tile-body h3{font-size:1.0625rem;}
.cat-tile-body p{margin-top:.45rem;font-size:.875rem;color:var(--navy-soft);}
.cat-tile-count{
  display:block;margin-top:.7rem;font-family:var(--mono);font-size:.6875rem;color:var(--navy-faint);
}

/* ---- category page → product list ---- */
.cat-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;}
@media(max-width:1080px){.cat-list{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:820px){.cat-list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.cat-list{grid-template-columns:1fr;}}

.cat-item{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1.5px solid var(--line);border-radius:14px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.cat-item:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--blue-400);}
/* display:flex would win over the hidden attribute, so state it explicitly */
.cat-item[hidden]{display:none;}
.pager .is-disabled{opacity:.4;pointer-events:none;}
.pager:empty{display:none;}
.cat-item-visual{
  position:relative;aspect-ratio:4/3;display:grid;place-items:center;padding:1.2rem;
  overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(165deg,#fff 0%,var(--sky-100) 65%,var(--blue-100) 100%);
}
.cat-item-visual::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.05) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 75% at 50% 55%,#000,transparent 80%);
          mask-image:radial-gradient(80% 75% at 50% 55%,#000,transparent 80%);
}
.cat-item-visual .rack{
  position:relative;width:100%;
  filter:drop-shadow(0 10px 16px rgba(10,42,94,.15));
  transition:transform .45s var(--ease);
}
.cat-item:hover .cat-item-visual .rack{transform:scale(1.04);}
.cat-item-body{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;flex:1;text-align:center;}
.cat-item-body h3{font-size:1rem;line-height:1.35;}
.cat-item-body h3 a{text-decoration:none;color:inherit;}
.cat-item-body h3 a:hover{color:var(--blue-600);}
.cat-item-body p{margin-top:.5rem;font-size:.8125rem;color:var(--navy-soft);flex:1;line-height:1.55;}
.cat-more{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  margin-top:.9rem;padding:.5rem .9rem;border-radius:8px;
  border:1px solid var(--line);background:var(--sky-050);text-decoration:none;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;color:var(--blue-600);
  transition:background-color .25s, border-color .25s, color .25s;
}
.cat-more:hover{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ---- empty category state ---- */
.cat-empty{
  grid-column:1/-1;display:grid;place-items:center;text-align:center;
  padding:clamp(2.5rem,6vw,4rem) 1.5rem;
  border-radius:18px;border:1px dashed var(--blue-200);
  background:linear-gradient(180deg,#fff,var(--sky-050));
}
.cat-empty .ico{
  display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:1.25rem;
  background:linear-gradient(150deg,var(--blue-100),#fff);border:1px solid var(--blue-200);color:var(--blue);
}
.cat-empty h3{font-size:1.15rem;}
.cat-empty p{margin-top:.7rem;max-width:52ch;font-size:.9375rem;}
.cat-empty .btn{margin-top:1.5rem;}

/* ---- three-column product mega menu ---- */
.mega.wide{width:min(900px,94vw);}
.mega-grid.three{grid-template-columns:repeat(3,1fr);}
@media(max-width:1180px){
  .mega.wide{width:auto;}
  .mega-grid.three{grid-template-columns:1fr;}
}

/* ---- grouped list dropdown, used for Solutions ---- */
.mega.list{width:min(400px,92vw);padding:1.1rem;}
.mega.list a{
  display:block;padding:.55rem .8rem;border-radius:8px;text-decoration:none;
  color:var(--navy);font-size:.9375rem;font-weight:600;
  transition:background-color .2s, color .2s, padding-left .25s var(--ease);
}
.mega.list a:hover{background:var(--sky-100);color:var(--blue-600);padding-left:1rem;}
.mega-list-group{
  display:block;padding:.55rem .8rem .35rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
}
.mega-list-group.first{color:var(--blue-600);}
.mega-list-group.second{color:var(--amber-ink);margin-top:.55rem;}
.mega.list .mega-foot{margin-top:.8rem;padding-top:.9rem;}
@media(max-width:1180px){
  .mega.list{width:auto;}
}

/* ---------- download box ---------- */
.download{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  padding:1.75rem 1.9rem;border-radius:16px;
  background:linear-gradient(120deg,var(--blue-100) 0%,#fff 60%);
  border:1px solid var(--blue-200);box-shadow:var(--sh-sm);
}
.download h3{margin-bottom:.5rem;}
.download p{font-size:.9375rem;max-width:52ch;}
@media(max-width:700px){.download{grid-template-columns:1fr;}}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;}
.contact-card{
  padding:1.75rem 1.6rem;border-radius:16px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.contact-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--blue-200);}
.contact-card .ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:1.15rem;
  background:linear-gradient(150deg,var(--blue-100),#fff);border:1px solid var(--blue-200);color:var(--blue);
}
.contact-card h3{margin-bottom:.6rem;font-size:1.05rem;}
.contact-card p{font-size:.9375rem;}
.contact-card a{color:var(--blue-600);text-decoration:none;font-weight:600;border-bottom:1px solid var(--blue-200);transition:border-color .25s;}
.contact-card a:hover{border-bottom-color:var(--orange);}
@media(max-width:900px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.contact-grid{grid-template-columns:1fr;}}

.quote-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
.quote-copy > p{margin-top:1.2rem;max-width:46ch;}
.steps{list-style:none;margin-top:2.25rem;}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;padding-block:1.25rem;border-top:1px solid var(--line);transition:border-color .4s ease;}
.steps li:last-child{border-bottom:1px solid var(--line);}
.steps li:hover{border-top-color:var(--blue-400);}
.step-n{
  display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--blue-100);border:1px solid var(--blue-200);
  font-family:var(--mono);font-size:.8125rem;font-weight:600;color:var(--blue-600);
  transition:background-color .4s ease, transform .4s var(--ease);
}
.steps li:hover .step-n{background:var(--blue-200);transform:scale(1.06);}
.steps p{font-size:.9375rem;margin-top:.4rem;max-width:44ch;}
@media(max-width:920px){.quote-in{grid-template-columns:1fr;}}

.form-panel{
  background:var(--white);border-radius:20px;padding:clamp(1.6rem,3vw,2.5rem);
  border:1px solid var(--line);box-shadow:var(--sh-lg);
}
.form-panel h3{margin-bottom:1.5rem;}
.form-panel > p.form-intro{margin-top:-.9rem;margin-bottom:1.6rem;font-size:.9375rem;max-width:52ch;}
.field{display:grid;gap:.45rem;margin-bottom:1.15rem;}
.field label{font-family:var(--mono);font-size:.6875rem;font-weight:500;color:var(--blue-600);}
.field label .req{color:var(--orange-600);}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;font-family:var(--sans);font-size:1rem;color:var(--navy);
  background:var(--sky-050);border:1px solid var(--line);border-radius:10px;
  transition:border-color .3s ease, box-shadow .3s ease, background-color .3s ease, transform .3s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-200);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(30,99,200,.13);transform:translateY(-1px);
}
.field textarea{resize:vertical;min-height:6.5rem;}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234A648C' stroke-width='1.7'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:11px;padding-right:2.5rem;
}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}
.form-note{margin-top:1rem;font-size:.8125rem;color:var(--navy-faint);text-align:center;}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  position:relative;overflow:hidden;
  padding:clamp(2.5rem,5vw,3.5rem) clamp(1.75rem,4vw,3rem);
  border-radius:22px;
  background:
    radial-gradient(70% 120% at 92% 10%, rgba(30,99,200,.55) 0%, transparent 62%),
    radial-gradient(60% 90% at 4% 100%, rgba(245,130,31,.3) 0%, transparent 60%),
    linear-gradient(150deg,var(--navy) 0%,#061B3E 100%);
  color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;
  box-shadow:var(--sh-lg);
}
.cta-band h2{color:#fff;max-width:22ch;}
.cta-band p{margin-top:.85rem;color:rgba(255,255,255,.76);max-width:52ch;}
.cta-actions{display:flex;flex-wrap:wrap;gap:.85rem;}
@media(max-width:800px){.cta-band{grid-template-columns:1fr;}}

/* ==========================================================================
   STAT ROW
   ========================================================================== */
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;}
.stat{
  padding:1.6rem 1.5rem;border-radius:16px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-sm);text-align:left;
}
.stat .n{
  font-family:var(--mono);font-size:1.6rem;font-weight:600;color:var(--blue-600);
  line-height:1.1;letter-spacing:-.02em;
}
.stat .l{margin-top:.5rem;font-size:.9375rem;color:var(--navy-soft);}
@media(max-width:900px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.stat-row{grid-template-columns:1fr;}}

/* ==========================================================================
   PROSE
   ========================================================================== */
.prose{max-width:70ch;}
.prose p + p{margin-top:1.1rem;}
.prose h3{margin-top:2rem;margin-bottom:.75rem;}
.prose ul{margin:1rem 0 0 1.15rem;display:grid;gap:.5rem;}
.prose li{padding-left:.25rem;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--navy);color:rgba(255,255,255,.7);padding-block:clamp(3rem,6vw,4.5rem) 1.5rem;}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3rem);}
.footer .brand-word{color:#fff;}
.footer .brand-word em{color:var(--orange);}
.footer .brand-arcs{color:var(--orange);}
.footer-blurb{margin-top:1.2rem;font-size:.9375rem;max-width:38ch;}
.footer h4{color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.02em;margin-bottom:1.15rem;}
.footer ul{list-style:none;display:grid;gap:.75rem;font-size:.9375rem;}
.footer a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .3s, padding-left .3s var(--ease);}
.footer ul a:hover{color:#fff;padding-left:.3rem;}
.footer-bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.8125rem;color:rgba(255,255,255,.62);
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   NEWS
   Cards carry an abstract cover rather than a photograph — until real images
   exist, a drawn motif in the brand palette reads as deliberate, where an
   empty grey box reads as broken.
   ========================================================================== */
.post-featured{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3rem);align-items:center;
  padding:clamp(1.5rem,3vw,2rem);
  border-radius:20px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-md);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.post-featured:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--blue-200);}
.post-featured h3{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);line-height:1.24;}
.post-featured .post-excerpt{margin-top:.9rem;font-size:1rem;max-width:52ch;}
@media(max-width:880px){.post-featured{grid-template-columns:1fr;}}

.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;}
@media(max-width:1000px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:660px){.post-grid{grid-template-columns:1fr;}}

.post-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.post-card:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:var(--blue-200);}
.post-card h3{font-size:1.1rem;line-height:1.35;}

/* abstract cover, drawn per post */
.post-cover{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:
    radial-gradient(75% 90% at 50% 118%, rgba(30,99,200,.2) 0%, transparent 62%),
    linear-gradient(165deg,#fff 0%,var(--sky-100) 58%,var(--blue-100) 100%);
  border-bottom:1px solid var(--line);
}
.post-cover::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.06) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 55%,#000,transparent 78%);
          mask-image:radial-gradient(85% 75% at 50% 55%,#000,transparent 78%);
}
.post-cover svg{position:absolute;inset:0;width:100%;height:100%;}
.post-cover svg *{vector-effect:non-scaling-stroke;}

.post-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1;}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;
  font-family:var(--mono);font-size:.6875rem;color:var(--navy-faint);
}
.post-tag{
  display:inline-block;padding:.2rem .55rem;border-radius:6px;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  background:var(--blue-100);color:var(--blue-600);border:1px solid var(--blue-200);
}
.post-tag.product{background:var(--orange-100);color:var(--amber-ink);border-color:#FBD9B4;}
.post-tag.events{background:#EDE9FE;color:#5B21B6;border-color:#DDD6FE;}
.post-tag.technical{background:#E7F6EE;color:#166534;border-color:#C7EBD8;}
.post-card h3{margin-top:.7rem;}
.post-excerpt{margin-top:.6rem;font-size:.9375rem;line-height:1.6;flex:1;}

.pager{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:2.75rem;}
.pager a,.pager span{
  display:grid;place-items:center;min-width:40px;height:40px;padding-inline:.7rem;
  border-radius:10px;border:1px solid var(--line);background:var(--white);
  font-family:var(--mono);font-size:.8125rem;color:var(--navy-soft);text-decoration:none;
  transition:border-color .25s, color .25s, background-color .25s;
}
.pager a:hover{border-color:var(--blue-200);color:var(--blue-600);background:var(--sky-050);}
.pager [aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.25rem;}
.chips a{
  padding:.5rem 1rem;border-radius:999px;text-decoration:none;
  border:1px solid var(--line);background:var(--white);
  font-size:.875rem;font-weight:600;color:var(--navy-soft);
  transition:border-color .25s, color .25s, background-color .25s, transform .25s var(--ease);
}
.chips a:hover{border-color:var(--blue-200);color:var(--blue-600);transform:translateY(-2px);}
.chips a[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ---------- article ---------- */
.article-head{max-width:70ch;}
.article-head h1{margin-top:1.1rem;font-size:clamp(1.9rem,1.3rem + 2.4vw,2.9rem);}
.article-byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.75rem;color:var(--navy-faint);
}
.article-hero{
  position:relative;margin-top:2.5rem;border-radius:20px;overflow:hidden;
  aspect-ratio:21/9;
  background:
    radial-gradient(75% 90% at 50% 118%, rgba(30,99,200,.22) 0%, transparent 62%),
    linear-gradient(165deg,#fff 0%,var(--sky-100) 58%,var(--blue-100) 100%);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.article-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(30,99,200,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,99,200,.06) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(85% 80% at 50% 50%,#000,transparent 80%);
          mask-image:radial-gradient(85% 80% at 50% 50%,#000,transparent 80%);
}
.article-hero svg{position:absolute;inset:0;width:100%;height:100%;}
.article-hero svg *{vector-effect:non-scaling-stroke;}

.article-body{max-width:70ch;margin-top:clamp(2rem,4vw,3rem);}
.article-body h2{font-size:clamp(1.35rem,1.15rem + 1vw,1.75rem);margin-top:2.5rem;margin-bottom:.9rem;}
.article-body h3{font-size:1.125rem;margin-top:2rem;margin-bottom:.7rem;}
.article-body p + p{margin-top:1.1rem;}
.article-body ul,.article-body ol{margin:1.1rem 0 0 1.2rem;display:grid;gap:.55rem;}
.article-body li{padding-left:.25rem;}
.article-body blockquote{
  margin:1.75rem 0;padding:1.15rem 1.5rem;
  border-left:3px solid var(--orange);border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,var(--orange-100),rgba(255,242,227,.25));
  font-size:1.02rem;color:var(--navy);
}
.article-body blockquote p{margin:0;}

.article-foot{
  margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
}
.back-link{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--blue-600);font-weight:700;font-size:.9375rem;text-decoration:none;
  transition:color .25s, gap .25s var(--ease);
}
.back-link:hover{color:var(--orange-600);gap:.75rem;}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-delay:0ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1 !important;transform:none !important;}
  .ribbons path{stroke-dasharray:none;stroke-dashoffset:0;}
  .node-dot{animation:none;}
  .marquee-track{animation:none;}
  .marquee{overflow-x:auto;}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .topbar,.nav,.marquee,.cta-band,.footer,.skip{display:none;}
  body{background:#fff;}
}