/* ==========================================================================
   Informeek — main stylesheet (layout 3 "Immersive Depth")
   Loaded non-blocking; above-the-fold rules live in critical.css.

   Motion policy: transform and opacity only. Those are compositor-only
   properties, so none of this triggers layout or paint.
   ========================================================================== */

/* ---------- LAYOUT ---------- */
/* padding-block, not the padding shorthand: "padding: X 0" also sets
   padding-inline to 0, and this class is used together with .shell on the
   same element, which silently removed the page gutters. */
.section{padding-block:clamp(3.5rem,7vw,6rem);position:relative;z-index:var(--z-raised)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);margin-bottom:var(--s7);flex-wrap:wrap}
.section__head h2{margin:0}
.kicker{display:block;font-size:0.94rem;text-transform:uppercase;letter-spacing:.18em;
  font-weight:var(--w-bold);color:var(--color-primary);margin-bottom:var(--s2)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--s2);font-size:1.04rem;
  font-weight:var(--w-bold);color:var(--color-primary);
  transition:gap var(--dur-base) var(--ease-out)}
.link-arrow:hover{gap:var(--s4)}

.grid{display:grid;gap:var(--s4)}
.grid--posts{grid-template-columns:1fr}
@media(min-width:700px){.grid--posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.grid--posts{grid-template-columns:repeat(3,1fr)}}
.grid--tools{grid-template-columns:1fr}
@media(min-width:680px){.grid--tools{grid-template-columns:repeat(3,1fr)}}
.grid--team{grid-template-columns:1fr}
@media(min-width:600px){.grid--team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid--team{grid-template-columns:repeat(3,1fr)}}

.prose{max-width:var(--measure);font-size:var(--size-body-lg)}
.prose--narrow{max-width:62ch}
.prose h2{margin-top:var(--s7)}
.prose h3{margin-top:var(--s6)}
.prose ul,.prose ol{padding-left:1.35em;margin-bottom:var(--s4)}
.prose li{margin-bottom:var(--s2)}
.prose img{border-radius:var(--r-lg);margin:var(--s5) 0}
.prose a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:var(--s5) 0;padding:var(--s4) var(--s5);
  border-left:3px solid var(--color-accent);background:var(--color-glass);
  border-radius:0 var(--r-md) var(--r-md) 0}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{background:var(--color-glass);padding:.15em .4em;border-radius:var(--r-sm);font-size:.9em}
.prose pre{background:var(--color-surface);padding:var(--s4);border-radius:var(--r-md);overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;margin:var(--s5) 0;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--color-divider)}

/* ---------- HERO EXTRAS ---------- */
.hero__stats{display:flex;gap:var(--s7);flex-wrap:wrap}
.hero__stats b{display:block;font-family:var(--font-heading);font-size:1.9rem;
  font-weight:var(--w-black);line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--color-primary),var(--color-foreground));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__stats span{font-size:0.94rem;color:var(--color-muted);
  text-transform:uppercase;letter-spacing:.09em}

.card-stack{position:relative;height:440px;perspective:1200px;display:none}
@media(min-width:1050px){.card-stack{display:block}}
.glass-card{position:absolute;background:var(--color-glass);
  border:1px solid var(--color-glass-border);border-radius:var(--r-xl);padding:var(--s5);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  transition:transform .8s var(--ease-out);transform-style:preserve-3d}
.glass-card--a{top:0;left:4%;width:64%;z-index:3}
.glass-card--b{top:35%;right:0;width:56%;z-index:2}
.glass-card--c{bottom:0;left:14%;width:58%;z-index:1}
.glass-card h4{font-size:0.94rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--color-muted);margin-bottom:var(--s2);font-family:var(--font-body);
  font-weight:var(--w-semibold)}
.glass-card__value{font-family:var(--font-heading);font-size:2.2rem;font-weight:var(--w-black);
  line-height:1;font-variant-numeric:tabular-nums;color:var(--color-result)}
.glass-card small{font-size:0.94rem;color:var(--color-muted)}
.glass-card__row{display:flex;justify-content:space-between;padding:.4rem 0;
  font-size:0.98rem;border-bottom:1px solid var(--color-glass-border)}
.glass-card__row:last-child{border:0}
.qr-demo{width:66px;height:66px;border-radius:10px;opacity:.85;
  background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%) 0 0/14px 14px}

/* >>> LAYOUTS BEGIN — generated, do not edit here */
/* ==========================================================================
   EDITORIAL HERO
   The lead story, full bleed. Reads as a publication, not a product page.
   ========================================================================== */
.hero-editorial{position:relative;min-height:88svh;display:flex;align-items:flex-end;
  padding:calc(96px + var(--s7)) 0 var(--s8);overflow:hidden;isolation:isolate}
.hero-editorial__media{position:absolute;inset:-8% 0 -8%;z-index:-2}
.hero-editorial__media img,.hero-editorial__img{width:100%;height:100%;
  object-fit:cover;will-change:transform}
.hero-editorial__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--color-background) 55%,transparent) 0%,
    color-mix(in srgb,var(--color-background) 72%,transparent) 45%,
    var(--color-background) 96%)}
.hero-editorial__inner{display:grid;gap:var(--s7);align-items:end;position:relative}
@media(min-width:1000px){.hero-editorial__inner{grid-template-columns:1.1fr 1fr;gap:var(--s7)}}

.hero-editorial__eyebrow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-size:0.94rem;text-transform:uppercase;letter-spacing:.16em;font-weight:var(--w-bold);
  color:var(--color-accent);margin-bottom:var(--s4)}
.hero-editorial__eyebrow span:last-child{color:var(--color-muted)}
.hero-editorial__title{font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.03;
  letter-spacing:-.04em;margin-bottom:var(--s4);max-width:18ch}
.hero-editorial__title a:hover{color:var(--color-primary)}
.hero-editorial__excerpt{font-size:var(--size-body-lg);color:var(--color-muted);
  max-width:52ch;margin-bottom:var(--s5)}
.hero-editorial__meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-size:1.04rem;color:var(--color-muted);margin-bottom:var(--s5)}
.hero-editorial__meta img{border-radius:50%;margin-right:var(--s1)}

.hero-editorial__more{border-left:1px solid var(--color-divider);padding-left:var(--s5)}
@media(max-width:999px){.hero-editorial__more{border-left:0;padding-left:0;
  border-top:1px solid var(--color-divider);padding-top:var(--s5)}}
.hero-editorial__more-title{font-family:var(--font-body);font-size:0.94rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--color-muted);
  font-weight:var(--w-bold);margin-bottom:var(--s5)}
.hero-mini{display:flex;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--color-divider);
  transition:transform var(--dur-base) var(--ease-out)}
.hero-mini:last-child{border-bottom:0}
.hero-mini:hover{transform:translateX(5px)}
.hero-mini__thumb{width:104px;height:76px;border-radius:var(--r-md);overflow:hidden;
  flex-shrink:0;background:var(--color-surface)}
.hero-mini__thumb img{width:100%;height:100%;object-fit:cover}
.hero-mini__title{display:block;font-family:var(--font-heading);font-size:1.08rem;
  font-weight:var(--w-bold);line-height:1.3;margin-bottom:5px}
.hero-mini:hover .hero-mini__title{color:var(--color-primary)}
.hero-mini__meta{font-size:0.94rem;color:var(--color-muted)}

.hero-editorial__scroll{position:absolute;left:50%;bottom:var(--s5);width:22px;height:36px;
  border:1.5px solid var(--color-divider);border-radius:12px;transform:translateX(-50%);
  display:grid;place-items:start center;padding-top:6px}
.hero-editorial__scroll span{width:3px;height:7px;border-radius:2px;
  background:var(--color-muted);animation:informeek-scroll 1.9s ease-in-out infinite}
@keyframes informeek-scroll{0%{opacity:0;transform:translateY(0)}
  40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media(max-width:999px){.hero-editorial__scroll{display:none}}

/* ==========================================================================
   CATEGORY BAND — image-backed topic tiles under the hero
   ========================================================================== */
.catband{padding-block:clamp(3rem,6vw,5rem);position:relative;z-index:var(--z-raised);
  border-bottom:1px solid var(--color-divider)}
.catband__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6)}
.catband__title{margin:0;font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.1}
.catband__note{margin:0;font-size:0.94rem;color:var(--color-muted);
  text-transform:uppercase;letter-spacing:.12em;font-weight:var(--w-bold)}

/* Twelve columns so the two rows can carry different weights: the three
   busiest topics take four columns each, the rest take three. */
.catband__grid{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.catband__grid{grid-template-columns:repeat(12,1fr)}}

.ctile{position:relative;display:block;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);min-height:132px;
  border:1px solid var(--color-divider);background:var(--color-surface-alt);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out)}
@media(min-width:700px){
  .ctile{grid-column:span 3;min-height:150px}
  .ctile--lead{grid-column:span 4;min-height:210px}
}
.ctile:hover{transform:translateY(-5px);border-color:var(--cat-color);
  box-shadow:0 18px 40px -22px var(--cat-color)}
.ctile:focus-visible{outline:2px solid var(--color-ring);outline-offset:3px}

.ctile__media{position:absolute;inset:0;z-index:-2;display:block}
.ctile__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-out);transform:scale(1.02)}
.ctile:hover .ctile__media img{transform:scale(1.09)}

/* The scrim is tinted with the topic colour rather than plain black, so the
   seven tiles read as a set without the labels fighting the photography. */
.ctile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand-navy) 12%,transparent) 0%,
    color-mix(in srgb,var(--brand-navy) 62%,transparent) 46%,
    color-mix(in srgb,var(--brand-navy) 90%,transparent) 100%),
    linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--cat-color) 34%,transparent) 100%);
  transition:opacity var(--dur-base) var(--ease-out)}
.ctile:hover::after{opacity:.88}

.ctile__body{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:2px;height:100%;justify-content:flex-end;
  padding:var(--s4)}
.ctile__icon{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;
  border-radius:10px;margin-bottom:var(--s2);color:#fff;
  background:color-mix(in srgb,var(--cat-color) 42%,transparent);
  border:1px solid color-mix(in srgb,#fff 34%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform var(--dur-base) var(--ease-out)}
.ctile:hover .ctile__icon{transform:scale(1.08) rotate(-6deg)}
.ctile__name{font-family:var(--font-heading);font-weight:var(--w-bold);
  font-size:1.02rem;line-height:1.15;color:#fff}
.ctile--lead .ctile__name{font-size:1.25rem}
.ctile__count{font-size:0.94rem;color:color-mix(in srgb,#fff 78%,transparent);
  font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .ctile:hover{transform:none}
  .ctile:hover .ctile__media img,.ctile:hover .ctile__icon{transform:none}
}

/* ==========================================================================
   CATEGORY BLOCKS — four distinct layouts so the page is not one long grid
   ========================================================================== */
.cblock{padding-block:clamp(3rem,6vw,5.5rem);position:relative;z-index:var(--z-raised)}
.cblock__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.cblock__id{display:flex;align-items:center;gap:var(--s4)}
.cblock__icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  flex-shrink:0;color:var(--cat-color);
  background:color-mix(in srgb,var(--cat-color) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--cat-color) 32%,transparent)}
.cblock__title{font-size:clamp(1.5rem,3vw,2.1rem);margin:0}
.cblock__title a:hover{color:var(--cat-color)}
.cblock__count{font-size:0.94rem;color:var(--color-muted)}

/* --- 1. SPOTLIGHT --- */
.cblock__spotlight{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:1000px){.cblock__spotlight{grid-template-columns:1.25fr .75fr;gap:var(--s7)}}
.spot-lead{display:block;border-radius:var(--r-xl);overflow:hidden;
  background:var(--color-glass);border:1px solid var(--color-glass-border);
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)}
@media(hover:hover){.spot-lead:hover{transform:translateY(-6px);border-color:var(--cat-color)}}
.spot-lead__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--color-surface)}
.spot-lead__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
@media(hover:hover){.spot-lead:hover .spot-lead__media img{transform:scale(1.06)}}
.spot-lead__body{display:block;padding:var(--s5)}
.spot-lead__title{display:block;font-family:var(--font-heading);font-weight:var(--w-black);
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.18;letter-spacing:-.03em;
  margin:var(--s3) 0 var(--s2)}
.spot-lead__excerpt{display:block;color:var(--color-muted);font-size:1.12rem;margin-bottom:var(--s3)}
.spot-lead__meta{display:block;font-size:0.94rem;color:var(--color-muted)}

.spot-list{list-style:none;margin:0;padding:0}
.spot-list li{border-bottom:1px solid var(--color-divider)}
.spot-list li:last-child{border-bottom:0}
.spot-list a{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4) 0;
  transition:transform var(--dur-base) var(--ease-out)}
.spot-list a:hover{transform:translateX(6px)}
.spot-list__n{font-family:var(--font-heading);font-weight:var(--w-black);font-size:1.1rem;
  color:var(--cat-color);opacity:.55;flex-shrink:0;width:26px}
.spot-list__title{display:block;font-family:var(--font-heading);font-weight:var(--w-bold);
  font-size:1rem;line-height:1.3;margin-bottom:3px}
.spot-list a:hover .spot-list__title{color:var(--cat-color)}
.spot-list__meta{display:block;font-size:0.94rem;color:var(--color-muted)}

/* --- 2. CAROUSEL : full-bleed horizontal rail --- */
.crail-wrap{position:relative}
.crail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:var(--s3);
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  cursor:grab;scroll-behavior:smooth}
.crail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;
  user-select:none}
.crail.is-dragging a{pointer-events:none}
.crail::-webkit-scrollbar{display:none}
.crail:focus-visible{outline:2px solid var(--color-ring);outline-offset:-2px}
.crail__track{display:flex;gap:var(--s4);
  padding-inline:clamp(1rem,4vw,2.5rem);width:max-content}
.crail__card{width:clamp(230px,26vw,320px);flex-shrink:0;scroll-snap-align:start;
  -webkit-user-drag:none;
  border-radius:var(--r-lg);overflow:hidden;background:var(--color-glass);
  border:1px solid var(--color-glass-border);display:flex;flex-direction:column;
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)}
@media(hover:hover){.crail__card:hover{transform:translateY(-6px);border-color:var(--cat-color)}}
.crail__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--color-surface)}
.crail__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
@media(hover:hover){.crail__card:hover .crail__media img{transform:scale(1.07)}}
.crail__title{display:block;font-family:var(--font-heading);font-weight:var(--w-bold);
  font-size:1rem;line-height:1.28;padding:var(--s4) var(--s4) var(--s2)}
.crail__meta{display:block;font-size:0.94rem;color:var(--color-muted);
  padding:0 var(--s4) var(--s4);margin-top:auto}

/* --- 3. MOSAIC : mixed-size bento --- */
.mosaic{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
@media(min-width:1000px){.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}}
.mosaic__cell{position:relative;overflow:hidden;border-radius:var(--r-lg);
  display:flex;align-items:flex-end;min-height:190px;isolation:isolate;
  border:1px solid var(--color-glass-border);
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)}
@media(hover:hover){.mosaic__cell:hover{transform:translateY(-6px);border-color:var(--cat-color)}}
@media(min-width:1000px){
  .mosaic__cell--0{grid-column:span 2;grid-row:span 2}
  .mosaic__cell--3{grid-column:span 2}
}
.mosaic__media{position:absolute;inset:0;z-index:-2;background:var(--color-surface)}
.mosaic__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
@media(hover:hover){.mosaic__cell:hover .mosaic__media img{transform:scale(1.08)}}
.mosaic__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(transparent 28%,rgba(7,16,28,.93))}
.mosaic__body{padding:var(--s4);position:relative}
.mosaic__title{display:block;font-family:var(--font-heading);font-weight:var(--w-bold);
  font-size:1rem;line-height:1.24;color:#fff;margin-bottom:3px}
.mosaic__cell--0 .mosaic__title{font-size:clamp(1.2rem,2.2vw,1.65rem)}
.mosaic__meta{display:block;font-size:0.94rem;color:rgba(255,255,255,.72)}

/* --- 4. STACK : wide alternating rows --- */
.stack-rows{display:flex;flex-direction:column;gap:var(--s5)}
.srow{display:grid;gap:var(--s5);align-items:center;grid-template-columns:1fr;
  padding:var(--s5) 0;border-top:1px solid var(--color-divider)}
.srow:first-child{border-top:0;padding-top:0}
@media(min-width:900px){
  .srow{grid-template-columns:.85fr 1.15fr;gap:var(--s7)}
  .srow--flip .srow__media{order:2}
  .srow--flip .srow__body{order:1}
}
.srow__media{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-lg);
  background:var(--color-surface)}
.srow__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
@media(hover:hover){.srow:hover .srow__media img{transform:scale(1.05)}}
.srow__body{display:block}
.srow__n{display:block;font-family:var(--font-heading);font-weight:var(--w-black);
  font-size:2.2rem;line-height:1;color:var(--cat-color);opacity:.4;margin-bottom:var(--s2)}
.srow__title{display:block;font-family:var(--font-heading);font-weight:var(--w-black);
  font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.16;letter-spacing:-.03em;
  margin-bottom:var(--s3)}
.srow:hover .srow__title{color:var(--cat-color)}
.srow__excerpt{display:block;color:var(--color-muted);margin-bottom:var(--s3);max-width:52ch}
.srow__meta{display:block;font-size:0.94rem;color:var(--color-muted)}

/* ==========================================================================
   TOOLS BAND — the old hero, demoted below the editorial content
   ========================================================================== */
.tools-band{padding-block:clamp(3.5rem,7vw,6rem);position:relative;z-index:var(--z-raised);
  border-top:1px solid var(--color-divider)}
.tools-band__inner{display:grid;gap:var(--s6);align-items:center;margin-bottom:var(--s6)}
@media(min-width:1050px){.tools-band__inner{grid-template-columns:1fr 1fr;gap:var(--s8)}}
.tools-band__copy h2{margin-bottom:var(--s3)}
.tools-band__copy p{color:var(--color-muted);max-width:48ch;margin-bottom:var(--s5)}
.tools-band .card-stack{height:380px}

@media(prefers-reduced-motion:reduce){
  .hero-editorial__media img{transform:none!important}
  .hero-editorial__scroll span{animation:none}
}
/* <<< LAYOUTS END */

/* ---------- POST CARDS ---------- */
.post-card{display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;
  background:var(--color-glass);border:1px solid var(--color-glass-border);
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)}
@media(hover:hover){.post-card:hover{transform:translateY(-7px);border-color:var(--color-primary)}}
.post-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--color-surface)}
.post-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out)}
@media(hover:hover){.post-card:hover .post-card__media img{transform:scale(1.08)}}
.post-card__placeholder{display:block;width:100%;height:100%;
  background:linear-gradient(140deg,var(--color-surface),var(--color-surface-alt))}
.post-card__body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.post-card__title{font-size:1.06rem;line-height:1.28;margin:0}
.post-card__title a:hover{color:var(--color-primary)}
.post-card__excerpt{font-size:1.06rem;color:var(--color-muted);margin:0}
.post-card__meta{margin-top:auto;font-size:0.94rem;color:var(--color-muted);
  display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sep{opacity:.5}
@media(min-width:1050px){
  .post-card--featured{grid-column:span 2;flex-direction:row}
  .post-card--featured .post-card__media{flex:1 1 55%;aspect-ratio:auto}
  .post-card--featured .post-card__body{flex:1 1 45%;justify-content:center;padding:var(--s5)}
  .post-card--featured .post-card__title{font-size:1.6rem}
}

.tag{align-self:flex-start;display:inline-block;padding:3px 11px;border-radius:var(--r-pill);
  font-size:0.94rem;font-weight:var(--w-black);text-transform:uppercase;letter-spacing:.1em;
  background:var(--color-accent);color:var(--color-on-accent)}
.chip{display:inline-block;background:var(--color-glass);color:var(--color-muted);
  border-radius:var(--r-pill);padding:3px 10px;font-size:0.94rem;margin:2px}

/* ---------- TOOL CARDS ---------- */
.tool-card{position:relative;overflow:hidden;background:var(--color-glass);
  border:1px solid var(--color-glass-border);border-radius:var(--r-lg);padding:var(--s5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)}
.tool-card::before{content:"";position:absolute;inset:0;opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);
  background:linear-gradient(140deg,var(--glow-blue),transparent 58%)}
@media(hover:hover){.tool-card:hover{transform:translateY(-8px);border-color:var(--color-primary)}
  .tool-card:hover::before{opacity:1}}
.tool-card>*{position:relative;z-index:2}
.tool-card__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:var(--s4);font-weight:var(--w-black);font-size:1.09rem;color:#fff;
  background:var(--color-primary)}
.tool-card__icon--document{background:var(--color-accent);color:var(--color-on-accent)}
.tool-card__icon--qr{background:var(--navy-600);color:#fff}
.tool-card__icon--calculator{background:var(--color-result);color:var(--color-background)}
.tool-card__title{font-size:1.2rem;margin-bottom:var(--s2)}
.tool-card__desc{font-size:1.06rem;color:var(--color-muted);margin-bottom:var(--s4)}
.tool-card__go{font-size:0.99rem;font-weight:var(--w-bold);color:var(--color-primary);
  display:inline-flex;gap:var(--s2);transition:gap var(--dur-base) var(--ease-out)}
@media(hover:hover){.tool-card:hover .tool-card__go{gap:var(--s4)}}

/* ---------- ARCHIVE / ENTRY ---------- */
/* Breadcrumbs now render inside the page header block rather than floating
   alone above it, so they need no clearance of their own and no top padding -
   the header already carries both. Smaller and quieter than the kicker below
   them, so the eye still lands on the title first. */
.crumbs{font-size:0.94rem;color:var(--color-muted);padding:0 0 var(--s3);
  position:relative;z-index:var(--z-raised);opacity:.85;
  display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--color-primary)}
.crumbs [aria-current]{color:var(--color-foreground)}

.archive-head{padding-block:var(--head-clear) var(--s3);position:relative;z-index:var(--z-raised)}
.archive-head__title{margin-bottom:var(--s3)}
.archive-head__desc{color:var(--color-muted);font-size:var(--size-body-lg);max-width:64ch}
.archive-head__count{font-size:1.06rem;color:var(--color-muted);margin:var(--s3) 0 0}

.entry-header{padding-block:var(--head-clear) var(--s4);position:relative;z-index:var(--z-raised)}
/* This was a .shell with its max-width cut to --measure, so it inherited the
   shell margin-inline:auto and centred itself in the viewport instead of
   lining up with the article below. It now keeps the full shell width and
   constrains the text inside, which left-aligns it. */
.entry-header__inner{max-width:var(--shell)}
.entry-header__inner>*{max-width:100%;margin-inline:0}
/* Match the article column exactly - shell minus the rail and the grid gap -
   so the headline and the body share a right edge as well as a left one. */
@media(min-width:1050px){
  .entry-header__inner>*{max-width:calc(100% - 290px - var(--s6))}
}
.entry-title{margin:var(--s3) 0}
.entry-lede{font-size:var(--size-body-lg);color:var(--color-muted);margin-bottom:var(--s4)}
.entry-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:1.04rem;color:var(--color-muted)}
.entry-meta__author{display:inline-flex;align-items:center;gap:8px}
.entry-meta__author:hover{color:var(--color-primary)}
.entry-meta .avatar{border-radius:50%}

.entry-media{margin:0 auto var(--s6);max-width:var(--shell);
  padding-inline:clamp(1rem,4vw,2.5rem)}
.entry-media img{width:100%;border-radius:var(--r-xl)}
.entry-media figcaption{font-size:1rem;color:var(--color-muted);
  margin-top:var(--s2);text-align:center}

.entry-layout{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start}
/* No measure cap here: the article fills its grid column so it runs right
   up to the contents rail, with only the grid gap between them. A cap left a
   200px dead band beside the text. The type steps up slightly to compensate,
   so the wider column does not also mean a longer line in characters. */
.entry-content{max-width:none;font-size:1.2rem}
@media(min-width:1050px){.entry-layout{grid-template-columns:minmax(0,1fr) 290px;gap:var(--s6)}}
.entry-rail{display:none}
@media(min-width:1050px){.entry-rail{display:block}}
.entry-rail{align-self:stretch}
/* top clears the fixed header; max-height keeps a long contents list from
   running past the fold, and it scrolls on its own if it does. */
.entry-rail__sticky{position:sticky;top:calc(var(--header-h,86px) + 24px);
  max-height:calc(100vh - var(--header-h,86px) - 48px);overflow-y:auto;
  scrollbar-width:thin}
.entry-rail__sticky::-webkit-scrollbar{width:4px}
.entry-rail__sticky::-webkit-scrollbar-thumb{background:var(--color-divider);border-radius:99px}

.toc{background:var(--color-glass);border:1px solid var(--color-glass-border);
  border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s5)}
.toc__title{font-family:var(--font-heading);font-size:0.94rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--color-muted);margin:0 0 var(--s3);font-weight:var(--w-bold)}
.toc__list{list-style:none;margin:0;padding:0;font-size:1.04rem;
  display:flex;flex-direction:column;gap:2px}
.toc__list a{display:block;padding:5px 0 5px 12px;color:var(--color-muted);
  border-left:2px solid var(--color-divider);transition:all var(--dur-fast) var(--ease-out)}
.toc__list a:hover{color:var(--color-primary);border-left-color:var(--color-primary)}
.toc__list a[aria-current=true]{color:var(--color-primary);
  border-left-color:var(--color-accent);font-weight:var(--w-semibold)}
.toc__list .lvl-3{padding-left:24px}

.entry-tags{display:flex;gap:8px;flex-wrap:wrap;margin:var(--s6) 0}
.entry-tags a{font-size:1rem;color:var(--color-muted);background:var(--color-glass);
  padding:5px 12px;border-radius:var(--r-pill)}
.entry-tags a:hover{color:var(--color-primary)}

.author-box{display:flex;gap:var(--s4);background:var(--color-glass);
  border:1px solid var(--color-glass-border);border-radius:var(--r-lg);
  padding:var(--s5);margin:var(--s6) 0}
.author-box__avatar{border-radius:50%;flex-shrink:0}
.author-box__name{font-family:var(--font-heading);font-weight:var(--w-bold);font-size:1.05rem;
  margin:0 0 var(--s1);display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap}
.author-box__name a:hover{color:var(--color-primary)}
.author-box__role{font-family:var(--font-body);font-size:1.04rem;
  font-weight:var(--w-regular);color:var(--color-muted)}
.author-box__bio{font-size:1.06rem;color:var(--color-muted);margin:0 0 var(--s2)}
.author-box__tags{margin:0}

.related{margin:var(--s7) 0}
.related__title{margin-bottom:var(--s5)}

.pagination{margin:var(--s7) 0;display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{min-width:42px;height:42px;display:grid;place-items:center;
  border-radius:var(--r-pill);border:1px solid var(--color-glass-border);
  color:var(--color-muted);font-size:1.04rem;font-weight:var(--w-semibold);padding:0 14px}
.pagination .page-numbers:hover{border-color:var(--color-primary);color:var(--color-primary)}
.pagination .current{background:var(--color-primary);color:var(--color-on-primary);
  border-color:var(--color-primary)}

.empty{text-align:center;padding:var(--s8) 0;max-width:52ch;margin-inline:auto}

/* ---------- TOOL PAGES ---------- */
.tool-header{padding-block:var(--head-clear) var(--s4);position:relative;z-index:var(--z-raised)}
.tool-badges{list-style:none;display:flex;gap:var(--s4);flex-wrap:wrap;padding:0;
  margin:var(--s4) 0 0;font-size:1.04rem;color:var(--color-muted)}
.tool-badges li{position:relative;padding-left:20px}
.tool-badges li::before{content:"\2713";position:absolute;left:0;
  color:var(--color-result);font-weight:var(--w-bold)}
.tool-app{background:var(--color-glass);border:1px solid var(--color-glass-border);
  border-radius:var(--r-xl);padding:var(--s5);min-height:420px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.tool-skeleton{display:flex;flex-direction:column;gap:var(--s3)}
.skel{display:block;height:14px;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-surface-alt) 50%,var(--color-surface) 75%);
  background-size:200% 100%;animation:informeek-shimmer 1.5s linear infinite}
.skel--lg{height:30px;width:55%}
.skel--sm{width:35%}
.skel--block{height:180px;margin-top:var(--s3)}
@keyframes informeek-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.tool-body{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start}
@media(min-width:1050px){.tool-body{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7)}}
.tool-body__rail{display:none}
@media(min-width:1050px){.tool-body__rail{display:block}}
.method{margin-top:var(--s7);padding:var(--s5);background:var(--color-glass);
  border-radius:var(--r-lg)}
.method h2{margin-top:0}
.faq{margin-top:var(--s7)}
.faq__item{border-bottom:1px solid var(--color-divider);padding:var(--s4) 0}
.faq__item summary{font-family:var(--font-heading);font-weight:var(--w-bold);font-size:1.02rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.4rem;color:var(--color-muted);
  transition:transform var(--dur-base) var(--ease-out);flex-shrink:0;line-height:1}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__answer{padding-top:var(--s3);color:var(--color-muted)}
.embed-box{margin-top:var(--s7);padding:var(--s5);
  border:1px dashed var(--color-input-border);border-radius:var(--r-lg)}
.embed-box h2{margin-top:0}
.embed-box__code{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap}
.embed-box textarea{flex:1;min-width:260px;font-family:ui-monospace,monospace;font-size:0.94rem;
  padding:var(--s3);border:1px solid var(--color-input-border);border-radius:var(--r-md);
  background:var(--color-surface);color:var(--color-foreground);resize:vertical}
.tool-disclaimer{font-size:1.04rem;color:var(--color-muted);padding:var(--s4);
  background:var(--color-glass);border-radius:var(--r-md);margin:var(--s6) 0}
.rail-list{background:var(--color-glass);border:1px solid var(--color-glass-border);
  border-radius:var(--r-lg);padding:var(--s4);margin-top:var(--s5)}
.rail-list__title{font-family:var(--font-heading);font-size:0.94rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--color-muted);margin:0 0 var(--s3);font-weight:var(--w-bold)}
.rail-list ul{list-style:none;margin:0;padding:0;font-size:1.04rem;
  display:flex;flex-direction:column;gap:var(--s2)}
.rail-list a{color:var(--color-muted)}
.rail-list a:hover{color:var(--color-primary)}

/* ---------- ABOUT / CONTACT ---------- */
.team{margin:var(--s8) 0}
.team__title{margin-bottom:var(--s5)}
.team-card{background:var(--color-glass);border:1px solid var(--color-glass-border);
  border-radius:var(--r-lg);padding:var(--s5);text-align:center}
.team-card__avatar{border-radius:50%;margin:0 auto var(--s3)}
.team-card__name{font-size:1.05rem;margin:0 0 var(--s1)}
.team-card__name a:hover{color:var(--color-primary)}
.team-card__role{font-size:1.04rem;color:var(--color-primary);
  font-weight:var(--w-semibold);margin:0 0 var(--s3)}
.team-card__bio{font-size:1.06rem;color:var(--color-muted);margin:0 0 var(--s3)}
.team-card__count{font-size:0.94rem;color:var(--color-muted);margin:0}
.disclosure{max-width:var(--measure);margin:var(--s8) 0}
.contact-layout{display:grid;grid-template-columns:1fr;gap:var(--s6);
  align-items:start;padding-bottom:var(--s8)}
@media(min-width:900px){.contact-layout{grid-template-columns:minmax(0,1.3fr) 320px;gap:var(--s7)}}
.contact-card{background:var(--color-glass);border:1px solid var(--color-glass-border);
  border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s4)}
.contact-card__title{font-size:1.02rem;margin:0 0 var(--s2)}
.contact-card p{font-size:1.06rem;color:var(--color-muted);margin:0 0 var(--s3)}

/* Contact Form 7, styled from tokens so no plugin CSS is required. */
.wpcf7-form p{margin-bottom:var(--s4)}
.wpcf7-form label{display:block;font-size:1.06rem;font-weight:var(--w-semibold);margin-bottom:var(--s2)}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],.wpcf7-form select,.wpcf7-form textarea,.search-field{
  width:100%;min-height:var(--input-h);padding:var(--s2) var(--s3);
  border:1px solid var(--color-input-border);border-radius:var(--r-md);
  background:var(--color-surface);color:var(--color-foreground);
  font-family:var(--font-body);font-size:var(--size-body)}
.wpcf7-form textarea{min-height:150px;resize:vertical}
.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpcf7-form select:focus,.search-field:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 22%,transparent)}
.wpcf7-submit{min-height:var(--btn-h);padding:0 var(--s5);border-radius:var(--r-pill);
  background:var(--color-primary);color:var(--color-on-primary);
  font-weight:var(--w-bold);cursor:pointer}
.wpcf7-not-valid-tip{color:var(--color-error);font-size:1.04rem;margin-top:var(--s1)}
.search-form{display:flex;gap:var(--s3);max-width:520px}

/* ---------- MOBILE NAV ---------- */
.mobile-nav{position:fixed;inset:0;z-index:var(--z-overlay);
  background:var(--color-background);padding:120px var(--s5) var(--s6);
  transform:translateY(-100%);transition:transform var(--dur-slow) var(--ease-out);
  overflow-y:auto}
.mobile-nav.is-open{transform:none}
/* The panel covers the header, so the button that opened it is unreachable
   once it is open. This is the way back out. */
.mobile-nav__close{position:absolute;top:26px;right:var(--s5);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-glass);border:1px solid var(--color-glass-border);
  color:var(--color-foreground);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.mobile-nav__close:hover{background:var(--color-surface);transform:rotate(90deg)}
.mobile-nav__close:focus-visible{outline:2px solid var(--color-ring);outline-offset:3px}
.mobile-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mobile-nav__list a{display:block;font-family:var(--font-heading);
  font-size:clamp(1.9rem,9vw,3rem);font-weight:var(--w-black);letter-spacing:-.04em;
  padding:var(--s3) 0;border-bottom:1px solid var(--color-divider);
  opacity:0;transform:translateY(22px)}
.mobile-nav.is-open a{opacity:1;transform:none;transition:.5s var(--ease-out)}
.mobile-nav.is-open li:nth-child(1) a{transition-delay:.08s}
.mobile-nav.is-open li:nth-child(2) a{transition-delay:.14s}
.mobile-nav.is-open li:nth-child(3) a{transition-delay:.20s}
.mobile-nav.is-open li:nth-child(4) a{transition-delay:.26s}
.mobile-nav.is-open li:nth-child(n+5) a{transition-delay:.32s}
/* Tools, below the main links. Deliberately much smaller than the primary
   list: it is a secondary section, not five more top-level destinations. */
.mobile-nav__section{margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--color-divider)}
.mobile-nav__legend{font-size:0.94rem;text-transform:uppercase;letter-spacing:.18em;
  font-weight:var(--w-bold);color:var(--color-muted);margin:0 0 var(--s3)}
.mobile-nav__tools{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px}
.mobile-nav__tools a{display:block;font-family:var(--font-body);
  font-size:1.02rem;font-weight:var(--w-semibold);letter-spacing:0;
  color:var(--color-foreground);padding:10px 0;border-bottom:0;
  opacity:0;transform:translateY(14px)}
.mobile-nav.is-open .mobile-nav__tools a{opacity:1;transform:none;
  transition:.45s var(--ease-out);transition-delay:.34s}
.mobile-nav__tools a:hover{color:var(--color-primary)}
.mobile-nav__all{color:var(--color-primary)!important;font-weight:var(--w-bold)}
.mobile-nav__tools--muted li{display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-size:1.02rem;color:var(--color-muted);padding:10px 0}
.mobile-nav__tools--muted em{font-style:normal;font-size:0.94rem;text-transform:uppercase;
  letter-spacing:.1em;background:var(--color-glass);border-radius:var(--r-pill);
  padding:2px 9px;flex-shrink:0}

@media(min-width:980px){.mobile-nav{display:none}}

/* ---------- AD SLOTS ----------
   Heights reserved before the ad script runs. `contain` stops a misbehaving
   creative reflowing the page. */
.ad-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--color-glass);border-radius:var(--r-md);margin:var(--s6) auto;
  width:100%;overflow:hidden;contain:layout size style}
.ad-slot__label{font-size:0.94rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-muted);padding:6px 0 4px;line-height:1}
.ad-slot .adsbygoogle{width:100%}
.ad-slot--leaderboard{min-height:var(--ad-h-leader)}
@media(min-width:1024px){.ad-slot--leaderboard{min-height:var(--ad-h-leader-lg)}}
.ad-slot--rectangle{min-height:var(--ad-h-rect);max-width:300px}
.ad-slot--in-article{min-height:var(--ad-h-inarticle)}

/* ---------- FOOTER ---------- */
.site-footer{position:relative;z-index:var(--z-raised);margin-top:var(--s8);
  border-top:1px solid var(--color-divider);padding-top:clamp(3rem,6vw,5rem);
  overflow-x:clip}
/* Same container as the page content, so the footer lines up with the
   sections above rather than sitting in a narrower column. */
.site-footer__inner{max-width:var(--shell);margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.5rem)}
.footer-cta{display:grid;gap:var(--s5);align-items:center;
  padding-bottom:var(--s7);margin-bottom:var(--s6);border-bottom:1px solid var(--color-divider)}
@media(min-width:880px){.footer-cta{grid-template-columns:1.4fr auto}}
.footer-cta h2{margin:0}
.footer-cta p{color:var(--color-muted);margin:var(--s3) 0 0;max-width:44ch}
.footer-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:720px){.footer-grid{grid-template-columns:1.7fr 1fr 1fr 1fr}}
/* 0.66rem is 10.6px - fine print, not a heading. Letter-spacing comes in as
   the size goes up, otherwise a wide-tracked label at this size wraps. */
.footer-grid h3{font-family:var(--font-body);font-size:1rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--color-foreground);margin-bottom:var(--s4);font-weight:var(--w-bold)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.footer-grid a{font-size:1.02rem;color:var(--color-muted);
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.footer-grid a:hover{color:var(--color-primary);transform:translateX(4px);display:inline-block}
.footer-grid__blurb{color:var(--color-muted);font-size:1.05rem;
  margin:var(--s4) 0 0;max-width:34ch}

/* The liquid wordmark. Same container as the columns above so their edges
   line up. overflow-x:clip only — overflow:hidden would also crop the
   filter's vertical spill and shave the ripple. */
.footer-mark{position:relative;z-index:var(--z-base);
  max-width:var(--shell);margin-inline:auto;
  padding:clamp(30px,4.5vw,56px) clamp(1rem,4vw,2.5rem);
  line-height:0;pointer-events:none;overflow-x:clip;overflow-y:visible}
.footer-mark svg{width:100%;max-width:100%;height:auto;display:block;overflow:visible;
  color:var(--color-primary);opacity:var(--mark-opacity)}
.footer-mark .gd{fill:var(--brand-red)}

.footer-base{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  flex-wrap:wrap;padding:var(--s4) 0 var(--s6);
  border-top:1px solid var(--color-divider);font-size:0.97rem;color:var(--color-muted)}
.footer-legal{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-legal a:hover{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
.footer-legal span{opacity:.45}

/* ---------- MOTION ---------- */
[data-reveal],[data-stagger]>*{opacity:0;transform:translateY(28px)}
[data-reveal].is-in,[data-stagger].is-in>*{opacity:1;transform:none;
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-stagger].is-in>*:nth-child(1){transition-delay:.04s}
[data-stagger].is-in>*:nth-child(2){transition-delay:.10s}
[data-stagger].is-in>*:nth-child(3){transition-delay:.16s}
[data-stagger].is-in>*:nth-child(4){transition-delay:.22s}
[data-stagger].is-in>*:nth-child(5){transition-delay:.28s}
[data-stagger].is-in>*:nth-child(6){transition-delay:.34s}
[data-stagger].is-in>*:nth-child(n+7){transition-delay:.40s}

/* JS-off safety net: content must never be stuck invisible. */
.no-js [data-reveal],.no-js [data-stagger]>*{opacity:1;transform:none}
.no-js .mask-line>span{transform:none;animation:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important}
  .mask-line>span{transform:none;animation:none}
  .spotlight{display:none}
  .skel{animation:none}
}

/* ---------- PRINT ---------- */
@media print{
  .site-header,.site-footer,.ad-slot,.entry-rail,.tool-body__rail,.embed-box,
  .related,.mobile-nav,.reading-progress,.spotlight,.footer-mark{display:none!important}
  body{background:#fff;color:#000}
  .prose{max-width:none}
}

/* Tools not yet published: same card, clearly not a link. */
.tool-card--soon{cursor:default;opacity:.86}
.tool-card--soon:hover{transform:none;border-color:var(--color-glass-border)}
.tool-card__soon{display:inline-flex;align-items:center;gap:6px;font-size:0.94rem;
  font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-muted);background:var(--color-glass);
  border:1px solid var(--color-glass-border);border-radius:var(--r-pill);padding:4px 12px}

/* ==========================================================================
   MEGA MENU + SOCIALS
   ========================================================================== */
.has-mega button{display:flex;align-items:center;gap:7px;padding:.5rem 1rem;
  border-radius:var(--r-pill);font-size:1.03rem;font-weight:var(--w-semibold);
  color:var(--color-muted);transition:color var(--dur-fast) var(--ease-out),
  background var(--dur-fast) var(--ease-out)}
.has-mega button:hover,.has-mega button[aria-expanded="true"]{
  color:var(--color-foreground);background:var(--color-glass)}
.chev{width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-base) var(--ease-out)}
.has-mega button[aria-expanded="true"] .chev{transform:rotate(225deg) translateY(1px)}

/* ---------- MEGA MENU: editorial split ----------
   A floating card, not a full-bleed bar. .mega only positions and is fully
   transparent; the visible surface is .mega__panel, which sits inside the
   shell padding so its edges line up exactly with the header pill above it. */
/* The 8px sits INSIDE the element as padding, not as a top offset. As an
   offset it was a dead gap: moving the pointer from the button down into the
   panel left the hover area, fired mouseleave and closed the menu before the
   pointer arrived. As padding the hoverable region is continuous. */
.mega{position:fixed;left:0;right:0;top:var(--header-h,86px);padding-top:8px;
  z-index:var(--z-header);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),
  visibility var(--dur-base)}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega[hidden]{display:block}                 /* animate rather than snap */

.mega__panel{display:grid;grid-template-columns:1fr;gap:var(--s5) var(--s7);
  padding:var(--s5);border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--color-background) 97%,transparent);
  border:1px solid var(--color-glass-border);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-header)}
@media(min-width:1000px){
  .mega__panel{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);padding:var(--s6)}
}
.mega__title{font-family:var(--font-body);font-size:0.94rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--color-muted);font-weight:var(--w-bold);
  margin:0 0 var(--s4)}
.mega__title--inline{margin:0 var(--s5) 0 0;flex-shrink:0}

/* ---- lead story ---- */
.mega__lead{min-width:0}
.mega__feat{display:block;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--color-divider);background:var(--color-surface);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out)}
.mega__feat:hover{transform:translateY(-3px);border-color:var(--color-primary)}
.mega__feat:focus-visible{outline:2px solid var(--color-ring);outline-offset:3px}
.mega__feat-media{display:block;aspect-ratio:16/9;overflow:hidden}
.mega__feat-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-out)}
.mega__feat:hover .mega__feat-media img{transform:scale(1.05)}
.mega__feat-body{display:block;padding:var(--s4)}
.mega__feat-tag{display:inline-block;margin-bottom:8px;padding:2px 10px;
  border-radius:var(--r-pill);font-size:0.94rem;font-weight:var(--w-bold);
  text-transform:uppercase;letter-spacing:.1em;color:var(--cat-color);
  background:color-mix(in srgb,var(--cat-color) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--cat-color) 32%,transparent)}
.mega__feat-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-family:var(--font-heading);font-weight:var(--w-bold);
  font-size:1.12rem;line-height:1.28;color:var(--color-foreground);margin-bottom:6px}
.mega__feat-meta{display:block;font-size:0.94rem;color:var(--color-muted)}

/* ---- topics ---- */
.mega__topics{min-width:0}
.mega__cats{display:grid;gap:2px;grid-template-columns:1fr}
@media(min-width:620px){.mega__cats{grid-template-columns:1fr 1fr}}
.mega__cat{position:relative;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3);border-radius:var(--r-md);border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
.mega__cat:hover{background:var(--color-glass);
  border-color:color-mix(in srgb,var(--cat-color) 38%,transparent)}
.mega__cat:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}
.mega__cat-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  flex-shrink:0;color:var(--cat-color);
  background:color-mix(in srgb,var(--cat-color) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--cat-color) 30%,transparent);
  transition:transform var(--dur-fast) var(--ease-out)}
.mega__cat:hover .mega__cat-icon{transform:scale(1.06)}
.mega__cat-body{min-width:0}
.mega__cat-body b{display:block;font-family:var(--font-heading);font-size:1rem;
  font-weight:var(--w-bold);line-height:1.2;color:var(--color-foreground)}
.mega__cat-body span{font-size:0.94rem;color:var(--color-muted)}
/* The arrow only appears on hover, so seven of them do not read as noise. */
.mega__cat-go{margin-left:auto;flex-shrink:0;color:var(--cat-color);font-size:1.05rem;
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.mega__cat:hover .mega__cat-go{opacity:1;transform:none}

/* ---- tools row, spanning both columns ---- */
.mega__tools{grid-column:1/-1;display:flex;align-items:center;gap:var(--s4);
  flex-wrap:wrap;border-top:1px solid var(--color-divider);padding-top:var(--s4)}
.mega__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s5)}
.mega__list a{font-size:1.06rem;font-weight:var(--w-semibold);color:var(--color-muted);
  display:inline-block;transition:color var(--dur-fast),transform var(--dur-fast)}
.mega__list a:hover{color:var(--color-primary);transform:translateY(-2px)}
.mega__list--muted li{display:flex;align-items:center;gap:8px;font-size:1.06rem;
  color:var(--color-muted)}
.mega__list--muted em{font-style:normal;font-size:0.94rem;text-transform:uppercase;
  letter-spacing:.1em;background:var(--color-glass);border-radius:var(--r-pill);
  padding:2px 9px;color:var(--color-muted);flex-shrink:0}
.mega__tools .link-arrow{margin-left:auto}

@media(max-width:999px){.mega{display:none}}
@media(prefers-reduced-motion:reduce){
  .mega__feat:hover{transform:none}
  .mega__feat:hover .mega__feat-media img,.mega__cat:hover .mega__cat-icon{transform:none}
}

/* ---------- SOCIAL LINKS ---------- */
/* Editorial text links rather than icon widgets. The name is the link, set
   like every other link in the footer, with a small glyph ahead of it and an
   outbound arrow after. Colour is held back until hover, where the network
   takes its own. */
.socials{list-style:none;margin:var(--s5) 0 0;padding:0;
  display:flex;flex-direction:row;gap:var(--s3) var(--s5);flex-wrap:wrap}
.socials li{margin:0}
/* .footer-grid ul sets flex-direction:column and scores (0,1,1) against the
   (0,1,0) of .socials, so it wins on specificity wherever either sits in the
   file. This matches at (0,2,0) so the row direction actually applies. */
.footer-grid .socials{flex-direction:row}

.soc{display:inline-flex;align-items:center;gap:8px;
  color:var(--color-foreground);font-size:1.02rem;font-weight:var(--w-bold);
  letter-spacing:-.01em;text-decoration:none;
  border-bottom:1px solid var(--color-divider);padding-bottom:4px;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
.soc__icon{display:inline-flex;flex-shrink:0;color:currentColor}
.soc__label{white-space:nowrap}
/* The arrow is the outbound cue. It lifts on hover, which is the only motion
   in the component - the rest is a colour change. */
.soc__arw{font-size:.86em;color:var(--color-muted);line-height:1;
  transition:color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out)}

.soc:hover{color:var(--soc,var(--color-primary));
  border-color:var(--soc,var(--color-primary))}
.soc:hover .soc__arw{color:var(--soc,var(--color-primary));
  transform:translate(2px,-2px)}
.soc:focus-visible{outline:2px solid var(--color-ring);outline-offset:4px;
  border-radius:2px}

@media(prefers-reduced-motion:reduce){.soc:hover .soc__arw{transform:none}}

/* Carousel controls */
.crail__nav{position:absolute;top:38%;z-index:3;width:44px;height:44px;
  border-radius:50%;display:none;place-items:center;
  background:color-mix(in srgb,var(--color-background) 88%,transparent);
  border:1px solid var(--color-glass-border);color:var(--color-foreground);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base),
    background var(--dur-base)}
@media(min-width:900px){.crail__nav{display:grid}}
.crail__nav:hover{background:var(--cat-color);color:#07101C;transform:scale(1.08)}
.crail__nav[hidden]{display:none}
.crail__nav--prev{left:clamp(.5rem,2vw,1.4rem)}
.crail__nav--next{right:clamp(.5rem,2vw,1.4rem)}

.crail__rail{height:3px;border-radius:2px;background:var(--color-glass-border);
  margin:var(--s4) clamp(1rem,4vw,2.5rem) 0;position:relative;overflow:hidden}
.crail__thumb{position:absolute;left:0;top:0;bottom:0;border-radius:2px;
  background:var(--cat-color);width:20%;
  transition:transform .08s linear}

/* ---------- ARCHIVE: sidebar filters + results ---------- */
/* Two columns on desktop, filters first in the DOM so keyboard and screen
   reader order matches the visual order. Below the breakpoint the sidebar
   collapses behind a button: a full-height filter panel stacked above the
   articles would push every result off the first screen. */
.archive-layout{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start;
  padding-block:var(--s4) clamp(3.5rem,7vw,6rem)}
@media(min-width:1050px){
  .archive-layout{grid-template-columns:280px minmax(0,1fr);gap:var(--s6)}
}

.afilter{min-width:0}
@media(min-width:1050px){
  .afilter{align-self:stretch}
  .afilter__body{position:sticky;top:calc(var(--header-h,86px) + 24px);
    max-height:calc(100vh - var(--header-h,86px) - 48px);overflow-y:auto;
    scrollbar-width:thin;
    background:var(--color-glass);border:1px solid var(--color-glass-border);
    border-radius:var(--r-lg);padding:var(--s4)}
  .afilter__body::-webkit-scrollbar{width:4px}
  .afilter__body::-webkit-scrollbar-thumb{background:var(--color-divider);border-radius:99px}
}

/* Mobile toggle */
.afilter__toggle{display:inline-flex;align-items:center;gap:9px;
  min-height:42px;padding:0 var(--s4);border-radius:var(--r-pill);
  background:var(--color-glass);border:1px solid var(--color-glass-border);
  color:var(--color-foreground);font:inherit;font-size:1.04rem;
  font-weight:var(--w-bold);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out)}
.afilter__toggle:hover{background:var(--color-surface)}
.afilter__badge{background:var(--color-accent);color:var(--color-on-accent);
  border-radius:99px;min-width:20px;padding:1px 6px;font-size:0.94rem;text-align:center}
@media(min-width:1050px){.afilter__toggle{display:none}}
/* Heading left, Filters right, on one line. The button used to sit stacked
   above the results with a gap either side, which read as a stray control. */
.archive-head__row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap}
.archive-head__row .archive-head__title{margin:0}
@media(max-width:1049px){
  .afilter__body{display:none;margin-top:var(--s4);
    background:var(--color-glass);border:1px solid var(--color-glass-border);
    border-radius:var(--r-lg);padding:var(--s4)}
  .afilter__body.is-open{display:block}
}

.afilter__group{margin-bottom:var(--s5)}
.afilter__group:last-of-type{margin-bottom:var(--s4)}
.afilter__legend{margin:0 0 var(--s3);font-family:var(--font-body);font-size:0.94rem;
  text-transform:uppercase;letter-spacing:.16em;font-weight:var(--w-bold);
  color:var(--color-muted)}
.afilter__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* Topics read as a list here rather than a chip row: vertical space is what a
   sidebar has, and the counts line up so the sizes are comparable. */
.afilter__topics{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:1px}
.afilter__chip{--cat-color:var(--color-primary);
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--r-md);border:1px solid transparent;
  font-size:1.04rem;font-weight:var(--w-semibold);color:var(--color-foreground);
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
.afilter__chip:hover{background:var(--color-surface);
  border-color:color-mix(in srgb,var(--cat-color) 36%,transparent)}
.afilter__chip.is-on{background:var(--color-foreground);color:var(--color-background);
  border-color:var(--color-foreground)}
.afilter__chip:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}
.afilter__chip-icon{display:inline-flex;flex-shrink:0;color:var(--cat-color)}
.afilter__chip.is-on .afilter__chip-icon{color:currentColor}
.afilter__chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afilter__chip-n{margin-left:auto;flex-shrink:0;font-size:0.94rem;opacity:.6}

.afilter__form select,.afilter__form input{width:100%;min-height:40px;
  padding:0 .7rem;border:1px solid var(--color-input-border);
  border-radius:var(--r-sm);background:var(--color-surface);
  color:var(--color-foreground);font:inherit;font-size:1.01rem}
.afilter__form select:focus-visible,.afilter__form input:focus-visible{
  outline:2px solid var(--color-ring);outline-offset:2px}
.afilter__dates{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:8px;margin-top:var(--s3)}
.afilter__dates label{font-size:0.94rem;color:var(--color-muted)}
.afilter__dates.is-hidden{display:none}
.afilter__actions{display:flex;align-items:center;gap:var(--s4);
  border-top:1px solid var(--color-divider);padding-top:var(--s4)}
.afilter__reset{font-size:0.97rem;font-weight:var(--w-bold);color:var(--color-muted);
  text-decoration:underline;text-underline-offset:3px}
.afilter__reset:hover{color:var(--color-accent)}

/* ---------- ARCHIVE RESULTS ---------- */
.ares{min-width:0;transition:opacity var(--dur-base) var(--ease-out)}
.ares.is-loading{opacity:.4;pointer-events:none}
.ares__count{font-size:0.97rem;color:var(--color-muted);margin:0 0 var(--s4);
  text-transform:uppercase;letter-spacing:.12em;font-weight:var(--w-bold)}
/* Two columns beside the sidebar, not three. The cards are the point of the
   page, and three in a 940px column made them smaller than the thumbnails. */
.archive-layout .grid--posts{grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:560px){.archive-layout .grid--posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1600px){.archive-layout .grid--posts{grid-template-columns:repeat(3,1fr)}}

/* ---------- SMOOTH SCROLL + HEADER OFFSET ---------- */
/* Every in-page jump - table of contents, skip link, back-to-top - lands
   smoothly and clears the fixed header instead of hiding the target under it.
   Honours prefers-reduced-motion, where instant scrolling is the correct
   behaviour rather than a downgrade. */
html{scroll-padding-top:calc(var(--header-h,86px) + var(--s4))}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- HEADER: mobile trims ---------- */
/* The pill holds the logo, theme toggle, CTA and menu button. On a phone that
   is one control too many, and the CTA is the one already reachable from the
   menu itself. */
@media(max-width:820px){
  .header-cta{display:none}
}

/* ==========================================================================
   MOBILE TYPE FLOOR — nothing below 16px on a phone
   ==========================================================================
   The design leaned on 10–14px for meta, tags, counts and footer links. That
   reads as fine print on a 375px screen. Everything a reader actually reads
   is raised to at least 1rem (16px) here.

   Uppercase labels get their letter-spacing pulled in as they grow: a
   wide-tracked label at 16px wraps where the same label at 11px did not, so
   the size increase alone would have broken the layout it sits in. */
@media(max-width:767px){

  /* Micro-labels and pills */
  .tag,
  .kicker,
  .afilter__legend,
  .mobile-nav__legend,
  .toc__title,
  .ad-slot__label,
  .hero-editorial__more-title,
  .rail-list__title{font-size:1rem;letter-spacing:.08em}

  /* Bylines, dates, reading times and counts */
  .post-card__meta,
  .crail__meta,
  .mosaic__meta,
  .spot-list__meta,
  .spot-lead__meta,
  .srow__meta,
  .hero-mini__meta,
  .entry-meta,
  .crumbs,
  .ares__count,
  .archive-head__count,
  .catband__note,
  .cblock__count,
  .ctile__count,
  .afilter__chip-n,
  .team-card__count,
  .tool-card__soon{font-size:1rem;letter-spacing:.04em}

  /* Body copy in cards and boxes */
  .post-card__excerpt,
  .spot-lead__excerpt,
  .srow__excerpt,
  .author-box__bio,
  .author-box__role,
  .team-card__bio,
  .team-card__role,
  .tool-card__desc,
  .tool-disclaimer,
  .footer-grid__blurb{font-size:1.05rem}

  /* Controls and navigation */
  .afilter__toggle,
  .afilter__reset,
  .afilter__chip,
  .afilter__form select,
  .afilter__form input,
  .afilter__dates label,
  .toc__list,
  .link-arrow,
  .soc,
  .tool-card__go,
  .page-numbers,
  .pagination a,
  .pagination .page-numbers,
  .footer-grid a,
  .footer-base,
  .footer-base span,
  .footer-legal,
  .footer-legal a,
  .footer-legal span{font-size:1rem}

  /* Footer headings read as headings, not captions */
  .footer-grid h3{font-size:1.05rem;letter-spacing:.08em}

  /* The count sits above the results; at 16px the old tight tracking crowds. */
  .ares__count{letter-spacing:.08em}
}

/* ---------- CONTACT FORM ---------- */
.cform{margin-top:var(--s5)}
.cform__row{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:620px){.cform__row{grid-template-columns:1fr 1fr}}
.cform__field{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--s4)}
.cform__field label{font-size:1rem;font-weight:var(--w-bold);color:var(--color-foreground)}
.cform__field input,.cform__field select,.cform__field textarea{
  width:100%;min-height:var(--input-h,50px);padding:.7rem .9rem;
  border:1px solid var(--color-input-border);border-radius:var(--r-md);
  background:var(--color-surface);color:var(--color-foreground);
  font:inherit;font-size:1.02rem}
.cform__field textarea{min-height:170px;resize:vertical;line-height:1.6}
.cform__field input:focus-visible,.cform__field select:focus-visible,
.cform__field textarea:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}
/* Honeypot: off-screen rather than display:none, because some bots skip
   anything explicitly hidden. */
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__actions{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  margin-top:var(--s3)}
.cform__small{margin:0;font-size:.98rem;color:var(--color-muted);max-width:40ch}
.cform__note{display:flex;flex-direction:column;gap:3px;padding:var(--s4);
  border-radius:var(--r-md);margin-bottom:var(--s5);border:1px solid}
.cform__note strong{font-size:1.05rem}
.cform__note span{font-size:1rem;opacity:.85}
.cform__note--ok{background:color-mix(in srgb,var(--color-success) 12%,transparent);
  border-color:color-mix(in srgb,var(--color-success) 40%,transparent);
  color:var(--color-foreground)}
.cform__note--bad{background:color-mix(in srgb,var(--color-error) 12%,transparent);
  border-color:color-mix(in srgb,var(--color-error) 40%,transparent);
  color:var(--color-foreground)}