/* ==========================================================================
   New-E Security — PATTERN LIBRARY
   Layout archetypes so no two sections share a composition.
   Loaded after newe.css. Tokens inherited.
   ========================================================================== */

/* ---------- shared refinements ---------- */
:root{
  --rule:1px solid var(--border);
  --rule-dark:1px solid rgba(255,255,255,.14);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* display type for editorial moments */
.display{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;
  line-height:1.04;color:var(--navy);
  font-size:clamp(2.25rem,1.3rem + 4vw,4.5rem);
}
.display--light{color:#fff}
.display em{font-style:normal;color:var(--gold)}

.lede{font-size:clamp(1.125rem,1.02rem + .5vw,1.375rem);line-height:1.6;color:var(--text-2)}
.section--navy .lede,.on-dark .lede{color:rgba(255,255,255,.75)}

/* index numeral — used only where content is genuinely sequential */
.numeral{font-family:var(--font-display);font-weight:700;font-size:.75rem;
  letter-spacing:.2em;color:var(--gold)}

/* hairline heading rule */
.rule-head{display:grid;gap:var(--s3);padding-top:var(--s4);border-top:2px solid var(--navy)}
@media(min-width:900px){
  .rule-head{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s10)}
}

/* ==================================================================
   PATTERN 01 — METRIC BAND  (no cards; hairline-divided figures)
   ================================================================== */
.metric-band{background:var(--navy-dark);color:#fff;overflow:hidden;position:relative}
.metric-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 140% at 82% 0%,rgba(46,98,166,.35),transparent 60%)}
.metric-band .wrap{position:relative;padding-block:var(--s10)}
.metric-row{display:grid;gap:var(--s6)}
@media(min-width:760px){.metric-row{grid-template-columns:repeat(4,1fr);gap:0}}
.metric{padding-inline:var(--s4)}
@media(min-width:760px){.metric+.metric{border-left:var(--rule-dark)}}
.metric__fig{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;
  font-size:clamp(2.5rem,1.8rem + 2.4vw,3.75rem);line-height:1;color:#fff}
.metric__fig .unit{color:var(--gold);font-size:.55em;vertical-align:super;margin-left:2px}
.metric__label{margin-top:14px;font-size:.875rem;color:rgba(255,255,255,.6);max-width:22ch}
.metric__rule{width:28px;height:2px;background:var(--gold);margin-top:var(--s3)}

/* ==================================================================
   PATTERN 02 — EDITORIAL OPENER (oversized head, offset body, no image)
   ================================================================== */
.editorial{display:grid;gap:var(--s5)}
@media(min-width:1000px){
  .editorial{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s12);align-items:start}
  .editorial__body{padding-top:14px}
}
.editorial__body p+p{margin-top:var(--s3)}
.editorial__meta{margin-top:var(--s5);padding-top:var(--s4);border-top:var(--rule);
  display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
.editorial__meta dt{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);font-family:var(--font-display);font-weight:600}
.editorial__meta dd{margin:6px 0 0;font-family:var(--font-display);font-weight:600;
  color:var(--navy);font-size:1.0625rem}

/* ==================================================================
   PATTERN 03 — ZIG-ZAG STORY ROWS (alternating, numbered, full-bleed image)
   ================================================================== */
.zig{display:grid;gap:var(--s12)}
.zig__row{display:grid;gap:var(--s5);align-items:center}
@media(min-width:960px){
  .zig__row{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s10)}
  .zig__row:nth-child(even) .zig__media{order:2}
  .zig__row:nth-child(even) .zig__body{padding-left:var(--s5)}
}
.zig__media{position:relative;overflow:hidden;border-radius:var(--radius)}
.zig__media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.1s var(--ease-out)}
.zig__row:hover .zig__media img{transform:scale(1.04)}
.zig__media figcaption{position:absolute;left:0;bottom:0;padding:10px 16px;
  background:var(--navy-dark);color:#fff;font-family:var(--font-display);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
.zig__body h3{font-size:clamp(1.375rem,1.1rem + 1.1vw,2rem);margin:var(--s2) 0 var(--s3)}
.zig__body p{color:var(--text-2)}

/* ==================================================================
   PATTERN 04 — FEATURE PANEL (dark panel, image bleeding past the edge)
   ================================================================== */
.panel{position:relative;background:var(--navy);color:rgba(255,255,255,.78);
  border-radius:var(--radius);overflow:hidden;isolation:isolate}
.panel::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  border:1px solid rgba(201,162,39,.22);border-radius:50%;z-index:0}
.panel__grid{display:grid;gap:0;position:relative;z-index:1}
@media(min-width:960px){.panel__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.panel__body{padding:var(--s8) var(--s6)}
@media(min-width:1100px){.panel__body{padding:var(--s12) var(--s10)}}
.panel__body h2{color:#fff}
.panel__media{position:relative;min-height:320px}
.panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(14,42,71,.25) 45%,transparent 100%)}

/* ==================================================================
   PATTERN 05 — HORIZONTAL SCROLL RAIL (snap; sectors / gallery)
   ================================================================== */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--s3);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
@media(min-width:700px){.rail{grid-auto-columns:44%}}
@media(min-width:1100px){.rail{grid-auto-columns:29%}}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:var(--border)}
.rail-hint{display:flex;align-items:center;gap:10px;margin-top:var(--s3);
  font-size:.8125rem;color:var(--text-2)}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:40px;height:40px;border:var(--rule);background:#fff;cursor:pointer;
  color:var(--navy);border-radius:var(--radius);display:grid;place-content:center;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.rail-nav button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* rail card — image top, gold hairline reveal */
.rail-card{position:relative;background:#fff;border:var(--rule);overflow:hidden;
  display:flex;flex-direction:column}
.rail-card__media{aspect-ratio:3/2;overflow:hidden}
.rail-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out)}
.rail-card:hover .rail-card__media img{transform:scale(1.06)}
.rail-card__body{padding:var(--s4);display:flex;flex-direction:column;gap:10px;flex:1}
.rail-card__body p{font-size:.9375rem;color:var(--text-2);flex:1}
.rail-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out)}
.rail-card:hover::after{transform:scaleX(1)}
.rail-card h3 a::after{content:"";position:absolute;inset:0}

/* ==================================================================
   PATTERN 06 — COMPARISON / BEFORE–AFTER (challenge vs response)
   ================================================================== */
.compare{display:grid;gap:var(--s5)}
@media(min-width:900px){.compare{grid-template-columns:1fr 1fr;gap:0}}
.compare__col{padding:var(--s6) var(--s5)}
.compare__col--problem{background:var(--bg-section)}
.compare__col--answer{background:var(--navy);color:rgba(255,255,255,.78)}
.compare__col--answer h3,.compare__col--answer h2{color:#fff}
.compare__tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:var(--s4)}
.compare__col--problem .compare__tag{color:#B42318}
.compare__col--answer .compare__tag{color:var(--gold)}
.compare__list{display:grid;gap:0}
.compare__item{padding:var(--s3) 0;border-top:var(--rule)}
.compare__col--answer .compare__item{border-top:var(--rule-dark)}
.compare__item h3{font-size:1.0625rem;margin-bottom:6px}
.compare__item p{font-size:.9375rem;color:var(--text-2)}
.compare__col--answer .compare__item p{color:rgba(255,255,255,.72)}
.compare__item{transition:padding-left .3s var(--ease-out)}
.compare__item:hover{padding-left:10px}

/* ==================================================================
   PATTERN 07 — PULL QUOTE (oversized, no card)
   ================================================================== */
.pullquote{max-width:24ch;margin:0}
.pullquote blockquote{margin:0;font-family:var(--font-display);font-weight:500;
  letter-spacing:-.025em;line-height:1.18;color:var(--navy);
  font-size:clamp(1.5rem,1.1rem + 2vw,2.5rem)}
.pullquote--light blockquote{color:#fff}
.pullquote__rule{width:56px;height:3px;background:var(--gold);margin-bottom:var(--s5)}
.pullquote figcaption{margin-top:var(--s5);padding-top:var(--s3);border-top:var(--rule);
  font-size:.875rem;color:var(--text-2)}
.pullquote figcaption strong{display:block;font-family:var(--font-display);color:var(--navy);
  font-size:.9375rem}
.pullquote--light figcaption{border-top:var(--rule-dark);color:rgba(255,255,255,.6)}
.pullquote--light figcaption strong{color:#fff}

/* ==================================================================
   PATTERN 08 — HAIRLINE INDEX LIST (numbered editorial rows)
   ================================================================== */
.index-list{border-top:2px solid var(--navy);counter-reset:idx}
.index-row{display:grid;gap:6px var(--s5);padding:var(--s5) 0;border-bottom:var(--rule);
  align-items:start;position:relative;transition:background .35s var(--ease)}
@media(min-width:800px){
  .index-row{grid-template-columns:64px minmax(0,4fr) minmax(0,6fr);align-items:baseline}
}
.index-row:hover{background:var(--bg-light)}
.index-row::before{counter-increment:idx;content:counter(idx,decimal-leading-zero);
  font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.16em;
  color:var(--gold)}
.index-row h3{font-size:clamp(1.125rem,1rem + .6vw,1.5rem)}
.index-row p{color:var(--text-2);font-size:.9375rem}
.index-row__link{position:absolute;inset:0}

/* ==================================================================
   PATTERN 09 — MASONRY / MAGAZINE MOSAIC (case studies)
   ================================================================== */
.mosaic{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:900px){
  .mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:200px}
  .mosaic__item--lg{grid-column:span 4;grid-row:span 2}
  .mosaic__item--sm{grid-column:span 2;grid-row:span 1}
  .mosaic__item--md{grid-column:span 3;grid-row:span 2}
}
.mosaic__item{position:relative;overflow:hidden;border-radius:var(--radius);isolation:isolate;
  display:flex;align-items:flex-end;color:#fff;min-height:220px}
.mosaic__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.2s var(--ease-out)}
.mosaic__item::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,28,51,.95) 5%,rgba(8,28,51,.3) 55%,rgba(8,28,51,.05) 100%)}
.mosaic__item:hover img{transform:scale(1.06)}
.mosaic__body{padding:var(--s4)}
.mosaic__body h3{color:#fff;font-size:1.25rem;margin:8px 0 6px}
.mosaic__body p{font-size:.875rem;color:rgba(255,255,255,.75);max-width:44ch}
.mosaic__tag{font-family:var(--font-display);font-size:.625rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ==================================================================
   PATTERN 10 — CREDENTIAL STRIP (hairline, not cards)
   ================================================================== */
.creds{display:grid;grid-template-columns:repeat(2,1fr);border-top:var(--rule);
  border-left:var(--rule)}
@media(min-width:700px){.creds{grid-template-columns:repeat(4,1fr)}}
.cred{border-right:var(--rule);border-bottom:var(--rule);padding:var(--s5) var(--s4);
  position:relative;transition:background .35s var(--ease)}
.cred:hover{background:var(--bg-light)}
.cred__mark{color:var(--navy);opacity:.75;transition:color .3s var(--ease),opacity .3s}
.cred:hover .cred__mark{color:var(--gold);opacity:1}
.cred h3{font-size:.9375rem;margin:var(--s3) 0 6px}
.cred p{font-size:.8125rem;color:var(--text-2);line-height:1.5}
.cred::before{content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--gold);
  transition:height .4s var(--ease-out)}
.cred:hover::before{height:100%}

/* ==================================================================
   PATTERN 11 — PROCESS FLOW (single connected line)
   ================================================================== */
.flow{position:relative;display:grid;gap:var(--s5)}
@media(min-width:900px){
  .flow{grid-template-columns:repeat(4,1fr);gap:var(--s5) var(--s4)}
  .flow::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;
    background:var(--border)}
}
.flow__step{position:relative;padding-top:var(--s5)}
.flow__step::before{content:"";position:absolute;left:0;top:5px;width:13px;height:13px;
  border-radius:50%;background:#fff;border:2px solid var(--gold)}
.flow__step::after{content:"";position:absolute;left:5px;top:10px;width:3px;height:3px;
  border-radius:50%;background:var(--gold);opacity:0;transition:opacity .3s}
.flow__step:hover::after{opacity:1}
.flow__n{font-family:var(--font-display);font-size:.6875rem;font-weight:700;
  letter-spacing:.2em;color:var(--text-2)}
.flow__step h3{font-size:1.0625rem;margin:8px 0 8px}
.flow__step p{font-size:.9375rem;color:var(--text-2)}
.section--navy .flow::before{background:rgba(255,255,255,.16)}
.section--navy .flow__step::before{background:var(--navy)}
.section--navy .flow__step p{color:rgba(255,255,255,.7)}
.section--navy .flow__n{color:rgba(255,255,255,.5)}

/* ==================================================================
   PATTERN 12 — GLASS PANELS OVER PHOTOGRAPHY
   ================================================================== */
.photo-band{position:relative;isolation:isolate;overflow:hidden}
.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.photo-band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(8,28,51,.92),rgba(8,28,51,.55))}
.photo-band .wrap{padding-block:var(--s12)}
.glass-grid{display:grid;gap:var(--s2)}
@media(min-width:760px){.glass-grid{grid-template-columns:repeat(3,1fr)}}
.glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:var(--s5) var(--s4);color:rgba(255,255,255,.78);border-radius:var(--radius);
  transition:background .35s var(--ease),transform .35s var(--ease-out),border-color .35s}
.glass:hover{background:rgba(255,255,255,.12);border-color:rgba(201,162,39,.5);transform:translateY(-4px)}
.glass h3{color:#fff;margin:var(--s3) 0 8px}
.glass p{font-size:.9375rem}
.glass__mark{color:var(--gold)}

/* ==================================================================
   PATTERN 13 — SPLIT STAT CARD (image left, figures right)
   ================================================================== */
.statsplit{display:grid;gap:0;border:var(--rule);background:#fff}
@media(min-width:900px){.statsplit{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.statsplit__media{position:relative;min-height:300px}
.statsplit__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.statsplit__body{padding:var(--s6) var(--s5);display:grid;gap:var(--s5)}
@media(min-width:640px){.statsplit__body{grid-template-columns:repeat(2,1fr)}}
.statsplit__item{border-top:2px solid var(--navy);padding-top:var(--s3)}
.statsplit__item dt{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;
  font-size:2rem;color:var(--navy);line-height:1}
.statsplit__item dd{margin:8px 0 0;font-size:.875rem;color:var(--text-2)}

/* ==================================================================
   PATTERN 14 — SPEC TABLE (feature listing as data, not bullets)
   ================================================================== */
.spec{width:100%;border-collapse:collapse;text-align:left}
.spec caption{text-align:left;font-family:var(--font-display);font-size:.6875rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);padding-bottom:var(--s3)}
.spec th,.spec td{padding:var(--s3) var(--s2);border-bottom:var(--rule);vertical-align:top}
.spec th{font-family:var(--font-display);font-weight:600;color:var(--navy);
  font-size:.9375rem;width:44%}
.spec td{color:var(--text-2);font-size:.9375rem}
.spec tr{transition:background .3s var(--ease)}
.spec tr:hover{background:var(--bg-light)}

/* ==================================================================
   HERO VARIANTS — one per page family
   ================================================================== */
/* A. editorial: type-led, thin image band beneath */
.hero-edit{background:var(--white);border-bottom:var(--rule)}
.hero-edit .wrap{padding-block:var(--s12) 0}
@media(min-width:900px){.hero-edit .wrap{padding-block:var(--s16) 0}}
.hero-edit__top{display:grid;gap:var(--s5)}
@media(min-width:1000px){
  .hero-edit__top{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s10);align-items:end}
}
.hero-edit__band{margin-top:var(--s10);position:relative;overflow:hidden}
.hero-edit__band img{width:100%;aspect-ratio:21/7;object-fit:cover}

/* B. dark grid: technology */
.hero-grid{position:relative;background:var(--navy-dark);color:#fff;overflow:hidden;isolation:isolate}
.hero-grid>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.28}
.hero-grid::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(115deg,rgba(8,28,51,.96) 20%,rgba(8,28,51,.55) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 84px)}
.hero-grid .wrap{padding-block:var(--s12)}
@media(min-width:900px){.hero-grid .wrap{padding-block:var(--s16)}}
.hero-grid h1{color:#fff}

/* C. split: image right, content left, stat rail under */
.hero-split{background:var(--bg-section);border-bottom:var(--rule)}
.hero-split__grid{display:grid;gap:var(--s6);align-items:center}
@media(min-width:960px){
  .hero-split__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s10)}
}
.hero-split .wrap{padding-block:var(--s10)}
@media(min-width:900px){.hero-split .wrap{padding-block:var(--s12)}}
.hero-split__media{position:relative}
.hero-split__media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius)}
.hero-split__media::after{content:"";position:absolute;right:-16px;top:-16px;width:110px;height:110px;
  border-top:2px solid var(--gold);border-right:2px solid var(--gold)}

/* D. minimal: centred, no photograph */
.hero-min{background:var(--white);border-bottom:var(--rule);text-align:center}
.hero-min .wrap{padding-block:var(--s12) var(--s10);max-width:820px}
@media(min-width:900px){.hero-min .wrap{padding-block:var(--s16) var(--s12)}}
.hero-min .eyebrow{justify-content:center}
.hero-min p{margin-inline:auto}

/* E. portrait band: leadership */
.hero-portrait{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.hero-portrait>img{position:absolute;right:0;top:0;height:100%;width:52%;object-fit:cover;z-index:-2}
.hero-portrait::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--navy) 42%,rgba(14,42,71,.55) 68%,transparent 100%)}
.hero-portrait .wrap{padding-block:var(--s12)}
@media(min-width:900px){
  .hero-portrait .wrap{padding-block:var(--s16);max-width:var(--maxw)}
  .hero-portrait__body{max-width:52%}
}
.hero-portrait h1{color:#fff}
@media(max-width:899px){
  .hero-portrait>img{width:100%;opacity:.25}
}

/* hero shared bits */
.hero-kicker{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6);
  padding-top:var(--s4);border-top:var(--rule)}
.hero-kicker--dark{border-top:var(--rule-dark)}
.hero-kicker div{min-width:120px}
.hero-kicker dt{font-family:var(--font-display);font-weight:600;font-size:1.375rem;
  letter-spacing:-.02em;color:var(--navy)}
.hero-kicker--dark dt{color:#fff}
.hero-kicker dd{margin:4px 0 0;font-size:.8125rem;color:var(--text-2)}
.hero-kicker--dark dd{color:rgba(255,255,255,.6)}

/* ==================================================================
   BUTTONS — premium states
   ================================================================== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform .42s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn--primary::before{background:var(--navy)}
.btn--primary:hover{color:#fff}
.btn--navy::before{background:var(--gold)}
.btn--navy:hover{color:var(--navy-dark)}
.btn--line::before{background:var(--navy)}
.btn--line:hover{color:#fff;border-color:var(--navy)}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:var(--navy-dark);border-color:#fff}
.btn:active{transform:translateY(1px)}

/* animated underline text link */
.arrow-link{position:relative;padding-bottom:3px}
.arrow-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out)}
.arrow-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ==================================================================
   CARD VARIANTS
   ================================================================== */
.card--outline{background:transparent;border:var(--rule);box-shadow:none}
.card--outline:hover{border-color:var(--navy);transform:none;box-shadow:none}
.card--filled{background:var(--bg-section);border-color:transparent}
.card--filled:hover{background:var(--navy);color:rgba(255,255,255,.78)}
.card--filled:hover h3{color:#fff}
.card--filled:hover .card__icon{background:rgba(255,255,255,.12);color:var(--gold)}
.card--float{border:0;box-shadow:var(--shadow-1)}
.card--float:hover{box-shadow:var(--shadow-3);transform:translateY(-6px)}
.card--flat{border:0;border-top:2px solid var(--navy);border-radius:0;padding-inline:0;
  background:transparent;box-shadow:none}
.card--flat:hover{transform:none;box-shadow:none;border-top-color:var(--gold)}

/* icon treatments — one per section family */
.mark{width:40px;height:40px;display:grid;place-content:center;flex:none;color:var(--blue)}
.mark--ring{border:1px solid var(--border);border-radius:50%;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.card:hover .mark--ring,.glass:hover .mark--ring{border-color:var(--gold);color:var(--gold)}
.mark--square{border:1px solid var(--border)}
.mark--bare{width:auto;height:auto;color:var(--gold)}
.mark--rule{position:relative;padding-bottom:var(--s3);width:auto;justify-items:start}
.mark--rule::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:2px;background:var(--gold)}

/* ==================================================================
   MOTION — parallax + gradient drift (both reduced-motion safe)
   ================================================================== */
.parallax{will-change:transform}
.cta-band::before{content:"";position:absolute;inset:-20%;z-index:-1;
  background:radial-gradient(45% 45% at 30% 40%,rgba(46,98,166,.5),transparent 70%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(12%,-8%,0) scale(1.15)}}

@media (prefers-reduced-motion:reduce){
  .cta-band::before{animation:none}
  .parallax{transform:none!important}
}

/* ==================================================================
   RESPONSIVE POLISH
   ================================================================== */
@media(min-width:1600px){
  :root{--maxw:1320px}
  .display{font-size:4.75rem}
}
@media(max-width:520px){
  .metric{padding-inline:0}
  .compare__col{padding:var(--s5) var(--s3)}
  .panel__body{padding:var(--s6) var(--s4)}
}