/* =========================================================
   Branding Magazine — design tokens
   Clean light editorial palette: warm paper-white background,
   near-black ink text, gold + rust as the two accent colors.
   The .ai-scene section intentionally re-scopes these tokens
   to a dark "spotlight" panel — see that section below.
   ========================================================= */
:root{
  --bg-0:#FAF8F5;
  --bg-1:#F3EEE4;
  --bg-2:#FFFFFF;
  --bg-3:#F5F0E6;
  --border:#EAE3D8;
  --border-soft:rgba(27,22,15,.08);

  --text-primary:#1B160F;
  --text-secondary:#5C5346;
  --text-tertiary:#8B8172;

  --accent:#B8873A;
  --accent-strong:#8F6524;
  --accent-ink:#1B160F;
  --accent-2:#A84E1F;
  --accent-2-strong:#7A3812;

  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Source Serif 4', ui-serif, Georgia, serif;
  --font-ui:'Work Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --container:1280px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;

  --space-1:.4rem;
  --space-2:.75rem;
  --space-3:1.1rem;
  --space-4:1.5rem;
  --space-5:2.1rem;
  --space-6:2.8rem;
  --space-7:clamp(2.6rem, 3.2vw, 3.8rem);
  --space-8:clamp(3.4rem, 5vw, 5.4rem);

  --ease:cubic-bezier(.22,.9,.3,1);
  --shadow-soft:0 8px 24px rgba(27,22,15,.10);
  --shadow-lift:0 16px 36px rgba(27,22,15,.14);
}

/* =========================================================
   Reset & base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:clamp(14.5px, .25vw + 14px, 16px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-primary);line-height:1.12;margin:0;font-weight:600;letter-spacing:-.01em;}
blockquote{margin:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Form fields get their own border/background focus treatment (see each
   form's rules below) instead of the default ring — no outline in any
   state, focused or not, on inputs/selects/textareas site-wide. */
input,select,textarea{outline:none;}
input:focus,input:focus-visible,
select:focus,select:focus-visible,
textarea:focus,textarea:focus-visible{outline:none;}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem, 4vw, 2.5rem);}

/* Prevent CSS grid/flex items from growing past their track to fit
   unbreakable content (the classic nested min-width:auto overflow bug). */
.hero-intro,.hero-carousel,.hero-slide,
.section-main,.section-aside,
.card,.category-tile,.opinion-card,.stat-card,
.ai-scene-copy,.ai-feature-card,.breakdown-media,.breakdown-body,
.footer-brand,.footer-col,.site-logo,.site-header-actions,
.cta-band-inner > *{
  min-width:0;
}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:.8rem 1.2rem;z-index:999;border-radius:0 0 8px 0;font-family:var(--font-ui);font-weight:600;
}
.skip-link:focus{left:0;}

/* =========================================================
   Type utilities
   ========================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-strong);margin-bottom:var(--space-2);
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--accent-strong);display:inline-block;}
.eyebrow-on-accent{color:var(--accent-ink);}
.eyebrow-on-accent::before{background:var(--accent-ink);}

.section-sub{color:var(--text-secondary);font-size:1.05rem;max-width:60ch;}

.tag{
  display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);
  background:var(--bg-3);border:1px solid var(--border);padding:.3rem .7rem;border-radius:100px;
  width:fit-content;
}
.tag-accent{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);}

.meta-row{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-family:var(--font-ui);font-size:.82rem;color:var(--text-tertiary);
}
.meta-row-sm{font-size:.78rem;}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-weight:600;color:var(--accent-strong);
  transition:gap .25s var(--ease),color .25s var(--ease);
}
.link-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease);}
.link-arrow:hover{gap:.8rem;color:var(--accent-2-strong);}
.link-arrow:hover svg{transform:translateX(3px);}

/* =========================================================
   Buttons — hover animation, two accent colors
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-ui);font-weight:600;font-size:.92rem;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:100px;border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:hover svg{transform:translateX(3px);}

.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-strong);color:#fff;box-shadow:0 10px 24px -8px rgba(143,101,36,.5);}

.btn-dark{background:var(--bg-0);color:var(--text-primary);border-color:rgba(27,22,15,.18);}
.btn-dark:hover{background:var(--bg-1);box-shadow:0 10px 24px -10px rgba(27,22,15,.3);}

.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent-2);color:var(--accent-2-strong);box-shadow:0 10px 24px -12px rgba(168,78,31,.35);}

.btn-block{width:100%;}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  color:var(--text-secondary);border:1px solid transparent;transition:all .25s var(--ease);
}
.icon-btn svg{width:19px;height:19px;}
.icon-btn:hover{color:var(--accent);background:var(--bg-3);border-color:var(--border);transform:translateY(-2px);}

/* =========================================================
   Top bar + Header
   ========================================================= */
.topbar{background:var(--bg-1);border-bottom:1px solid var(--border-soft);font-family:var(--font-ui);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding-block:.55rem;font-size:.8rem;color:var(--text-tertiary);}
.topbar-links{display:flex;gap:1.25rem;}
.topbar-links a{transition:color .2s var(--ease);}
.topbar-links a:hover{color:var(--accent-strong);}
@media (max-width:720px){ .topbar-text{display:none;} }

.site-header{position:sticky;top:0;z-index:100;background:rgba(250,248,245,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft);}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-block:1rem;}

.site-logo a{display:flex;align-items:center;gap:.6rem;}
.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:700;font-size:1rem;
}
.logo-word{font-family:var(--font-display);font-size:1.28rem;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;}
.logo-word em{font-style:italic;color:var(--accent-strong);font-weight:500;}

.site-nav{margin-inline:auto;}
.nav-menu{display:flex;gap:var(--space-5);font-family:var(--font-ui);font-size:.92rem;font-weight:500;}
.nav-menu a{position:relative;padding-block:.3rem;color:var(--text-secondary);transition:color .25s var(--ease);}
.nav-menu a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right .3s var(--ease);}
.nav-menu a:hover{color:var(--text-primary);}
.nav-menu a:hover::after{right:0;}

/* Mega menu — full-width, two columns. Positioned absolute against the
   sticky .site-header (its nearest positioned ancestor) so `top:100%`
   lands exactly at the header's bottom edge with zero gap, and a
   transition-delayed `visibility` masks the brief dead-zone while the
   cursor travels from the nav link down into the panel. JS adds a
   belt-and-braces hover-intent timer on top of this (see main.js). */
.mega-panel{
  position:absolute;top:100%;left:0;width:100%;
  background:var(--bg-2);border-bottom:1px solid var(--border-soft);box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  z-index:90;
}
.nav-item-mega:hover .mega-panel,
.nav-item-mega:focus-within .mega-panel,
.nav-item-mega.is-open .mega-panel{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear 0s;
}
.mega-panel-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-7);padding-block:var(--space-6);}
.mega-col-label{display:block;font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-3);}
.mega-col-terms ul{display:flex;flex-direction:column;gap:.65rem;margin-bottom:var(--space-4);}
.mega-col-terms a{font-family:var(--font-display);font-size:1.1rem;color:var(--text-primary);transition:color .2s var(--ease);}
.mega-col-terms a:hover{color:var(--accent-strong);}
.mega-posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.mega-post{display:flex;flex-direction:column;gap:.6rem;min-width:0;}
.mega-post-media{display:block;height:100px;border-radius:var(--radius-sm);background-size:cover;background-position:center;transition:transform .3s var(--ease);}
.mega-post:hover .mega-post-media{transform:scale(1.03);}
.mega-post-title{
  font-family:var(--font-ui);font-size:.88rem;font-weight:600;color:var(--text-primary);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s var(--ease);
}
.mega-post:hover .mega-post-title{color:var(--accent-strong);}
.mega-empty{color:var(--text-tertiary);font-size:.9rem;}
@media (max-width:1200px){ .mega-posts{grid-template-columns:repeat(2,minmax(0,1fr));} }

.site-header-actions{display:flex;align-items:center;gap:.6rem;}
.menu-toggle{display:none;}

.mobile-menu{display:none;}

@media (max-width:960px){
  .site-nav{display:none;}
  .menu-toggle{display:inline-flex;}
  .site-header-actions .btn-primary{display:none;}
  .mobile-menu{
    display:flex;flex-direction:column;
    position:fixed;inset:0;top:0;background:var(--bg-0);z-index:200;padding:6.5rem 1.5rem 2rem;
    transform:translateX(100%);transition:transform .35s var(--ease);
  }
  .mobile-menu[hidden]{display:none;}
  .mobile-menu.is-open{transform:translateX(0);}
  .mobile-nav-menu{display:flex;flex-direction:column;gap:1.6rem;font-family:var(--font-display);font-size:1.6rem;margin-bottom:2.5rem;}
  body.menu-open{overflow:hidden;}
}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;padding-block:var(--space-8) var(--space-7);overflow:hidden;}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(184,135,58,.16), transparent 60%),
    radial-gradient(45% 40% at 0% 100%, rgba(168,78,31,.12), transparent 60%);
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-7);align-items:center;}

.hero-intro .eyebrow{margin-bottom:var(--space-3);}
.hero-intro h1{font-size:clamp(2.2rem, 2.6vw + 1rem, 3.6rem);margin-bottom:var(--space-3);}
.hero-lede{color:var(--text-secondary);font-size:1.12rem;max-width:46ch;margin-bottom:var(--space-5);}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:var(--space-6);}

.hero-stats{display:flex;gap:var(--space-6);font-family:var(--font-ui);}
.hero-stats li{display:flex;flex-direction:column;gap:.15rem;}
.hero-stats strong{font-family:var(--font-display);font-size:1.4rem;color:var(--accent);}
.hero-stats span{font-size:.78rem;color:var(--text-tertiary);}

/* The clip boundary (overflow:hidden) has to live on a wrapper that
   does NOT itself get transformed — putting it on the same element as
   the translateX() means the clip region slides along with the content
   and never actually hides the adjacent slide, so it stays visible and
   overlaps the active one. */
.hero-carousel{
  position:relative;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-soft);
  box-shadow:var(--shadow-lift);
}
.hero-carousel-track{
  display:flex;
  transition:transform .6s var(--ease);
}
.hero-slide{flex:0 0 100%;position:relative;min-height:400px;display:flex;align-items:flex-end;background:var(--bg-2);}
.hero-slide-media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 8s var(--ease);}
.hero-slide.is-active .hero-slide-media{transform:scale(1.06);}
.hero-slide-body{
  /* This caption sits on a photographic scrim, so it keeps light-on-dark
     text regardless of the site's overall (light) theme. */
  --text-primary:#F6F1E7;
  --text-secondary:#D9CFBE;
  --text-tertiary:#B9AC97;
  --accent-strong:#E8C079;
  position:relative;z-index:1;width:100%;
  /* Extra inline padding keeps the headline clear of the vertically
     centered prev/next buttons that overlay the slide on both edges. */
  padding:var(--space-6) 76px;
  background:linear-gradient(0deg, rgba(15,12,8,.94) 10%, rgba(15,12,8,.55) 55%, transparent 100%);
}
.hero-slide-title{font-size:clamp(1.3rem, 1.3vw + 1rem, 1.9rem);margin-block:var(--space-2);}
.hero-slide-title a{transition:color .25s var(--ease);}
.hero-slide-title a:hover{color:var(--accent-strong);}
.hero-slide-excerpt{color:var(--text-secondary);max-width:56ch;margin-bottom:var(--space-3);}

/* Prev/next sit directly on the slide image, vertically centered,
   pinned to the left/right edges — no dots, no control row underneath. */
.carousel-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(21,18,13,.45);backdrop-filter:blur(4px);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.carousel-nav svg{width:18px;height:18px;}
.carousel-nav:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-50%) scale(1.06);}
.carousel-nav-prev{left:var(--space-3);}
.carousel-nav-prev svg{transform:rotate(180deg);}
.carousel-nav-next{right:var(--space-3);}
@media (max-width:560px){
  .carousel-nav{width:38px;height:38px;}
  .carousel-nav-prev{left:var(--space-2);}
  .carousel-nav-next{right:var(--space-2);}
  .hero-slide-body{padding-inline:60px;}
}

@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;}
}

/* =========================================================
   Ticker
   ========================================================= */
.ticker{background:var(--accent);color:var(--accent-ink);overflow:hidden;border-block:1px solid rgba(27,22,15,.15);}
.ticker-track{display:flex;width:max-content;gap:var(--space-6);padding-block:.7rem;animation:ticker 38s linear infinite;}
.ticker-item{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-ui);font-weight:600;font-size:.88rem;white-space:nowrap;}
.ticker-item svg{width:15px;height:15px;opacity:.7;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker:hover .ticker-track{animation-play-state:paused;}

/* =========================================================
   Sections generic
   ========================================================= */
.section{padding-block:var(--space-8);}
.section-alt{background:var(--bg-1);}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.7rem, 1.2vw + 1.2rem, 2.3rem);}
.section-head-center{flex-direction:column;align-items:center;text-align:center;margin-inline:auto;max-width:640px;}

/* =========================================================
   Latest + Trending split
   ========================================================= */
.section-split{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,.85fr);gap:var(--space-7);align-items:start;}

.card-grid{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--space-5);
  grid-auto-rows:1fr;
}

/* Full-width archive/category/blog listings (no sidebar) get 3 per row
   instead of the homepage's 2-column Latest Stories layout. */
.card-grid-archive{grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width:900px){
  .card-grid-archive{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:560px){
  .card-grid-archive{grid-template-columns:1fr;}
}

.card{
  display:flex;flex-direction:column;height:100%;background:var(--bg-2);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);overflow:hidden;transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);border-color:var(--border);}
.card-media{display:block;height:170px;background-size:cover;background-position:center;overflow:hidden;position:relative;}
.card-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25));}
.card-media{transition:filter .4s var(--ease);}
.card:hover .card-media{filter:brightness(1.08) saturate(1.05);}
.card-body{padding:var(--space-4);display:flex;flex-direction:column;gap:.7rem;flex:1;}
.card-title{font-size:1.15rem;line-height:1.32;}
.card-title a{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s var(--ease);
}
.card:hover .card-title a{color:var(--accent-strong);}
.card-excerpt{
  color:var(--text-secondary);font-size:.94rem;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Trending */
.trending-panel{background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-5);}
.trending-panel h2{font-size:1.2rem;margin-bottom:var(--space-4);}
.trending-list li{display:flex;align-items:baseline;gap:1rem;padding-block:.8rem;border-top:1px solid var(--border-soft);}
.trending-list li:first-child{border-top:0;padding-top:0;}
.trending-index{font-family:var(--font-display);font-style:italic;color:var(--accent-strong);font-size:1rem;flex:none;}
.trending-list a{font-family:var(--font-ui);font-weight:500;line-height:1.4;transition:color .2s var(--ease);}
.trending-list a:hover{color:var(--accent-strong);}

.newsletter-inline{background:linear-gradient(160deg, var(--bg-3), var(--bg-2));border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:var(--space-5);}
.newsletter-inline h2{font-size:1.2rem;margin-bottom:.5rem;}
.newsletter-inline p{color:var(--text-secondary);font-size:.9rem;margin-bottom:var(--space-4);}

.newsletter-form{display:flex;flex-direction:column;gap:.5rem;}
.newsletter-form-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.newsletter-form input{
  flex:1;min-width:0;background:var(--bg-0);border:1px solid var(--border);border-radius:100px;
  padding:.85rem 1.2rem;color:var(--text-primary);transition:border-color .25s var(--ease);
}
.newsletter-form input:focus{border-color:var(--accent);}
.newsletter-form input::placeholder{color:var(--text-tertiary);}
.newsletter-form input:user-invalid{border-color:var(--accent-2);}

/* Honeypot — visually and semantically hidden from real visitors, left
   open for bots that fill in every field. */
.bm-hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}

.newsletter-form-msg{margin:0;font-family:var(--font-ui);font-size:.85rem;padding:.5rem .9rem;border-radius:var(--radius-sm);}
.newsletter-form-msg.is-success{background:#EAF3E4;color:#3D6B2C;}
.newsletter-form-msg.is-error{background:#FBE4E0;color:#A3341F;}
.newsletter-form.is-submitting .newsletter-form-row{opacity:.6;pointer-events:none;}

@media (max-width:960px){
  /* Trending sidebar stacks below here, so Latest Stories gets the
     full container width back — keep 3 columns rather than dropping
     to 2 just because the viewport crossed this breakpoint. */
  .section-split{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:480px){
  .card-grid{grid-template-columns:1fr;}
}

/* =========================================================
   Category tiles
   ========================================================= */
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
.category-tile{
  position:relative;display:flex;flex-direction:column;gap:.6rem;padding:var(--space-5);
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.category-tile:hover{transform:translateY(-6px);border-color:var(--accent-2);background:var(--bg-3);}
.category-tile-icon{
  width:46px;height:46px;border-radius:12px;background:var(--bg-3);color:var(--accent);
  display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease);
}
.category-tile-icon svg{width:22px;height:22px;}
.category-tile:hover .category-tile-icon{background:var(--accent-2);color:var(--bg-0);transform:rotate(-8deg) scale(1.05);}
.category-tile h3{font-size:1.2rem;}
.category-tile p{color:var(--text-secondary);font-size:.92rem;flex:1;}
.category-tile-count{font-family:var(--font-ui);font-size:.78rem;color:var(--text-tertiary);}
.category-tile-arrow{position:absolute;top:var(--space-5);right:var(--space-5);color:var(--text-tertiary);transition:all .3s var(--ease);}
.category-tile-arrow svg{width:16px;height:16px;}
.category-tile:hover .category-tile-arrow{color:var(--accent-2-strong);transform:translate(3px,-3px);}

@media (max-width:960px){ .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .category-grid{grid-template-columns:1fr;} }

/* =========================================================
   Futuristic AI section — 3D floating scene
   Deliberately kept as a dark "spotlight" panel for contrast and
   drama, even though the rest of the site is now light — a common
   pattern for a single high-impact feature section. Re-scopes the
   shared tokens locally so every component inside (eyebrow, tags,
   buttons, glows, grid lines) automatically renders correctly.
   ========================================================= */
.ai-scene{
  --bg-0:#15120D; --bg-1:#1C1712; --bg-2:#241E17; --bg-3:#2D251C;
  --border:#3A2F23; --border-soft:rgba(244,236,220,.09);
  --text-primary:#F4ECDC; --text-secondary:#BBAA92; --text-tertiary:#8A7B67;
  --accent:#D6A85C; --accent-strong:#E8C079; --accent-2:#C1652F; --accent-2-strong:#D6703F;
  position:relative;overflow:hidden;background:var(--bg-1);perspective:1400px;
}
.ai-scene-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:pulse 7s ease-in-out infinite;}
.glow-gold{width:420px;height:420px;background:var(--accent);top:-120px;right:-80px;}
.glow-rust{width:360px;height:360px;background:var(--accent-2);bottom:-140px;left:-60px;animation-delay:-3.5s;}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.6;transform:scale(1.12);}}

.grid-lines{
  position:absolute;inset:-20% -20% 0 -20%;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:56px 56px;
  transform:rotateX(58deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, black, transparent 75%);
}

.float-shape{
  position:absolute;border-radius:22%;border:1px solid var(--border);
  background:linear-gradient(155deg, rgba(214,168,92,.18), rgba(193,101,47,.06));
  backdrop-filter:blur(2px);
  animation:float 9s ease-in-out infinite;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}
.shape-1{width:120px;height:120px;top:12%;left:8%;animation-duration:10s;}
.shape-2{width:70px;height:70px;top:60%;left:20%;border-radius:50%;animation-duration:8s;animation-delay:-2s;}
.shape-3{width:150px;height:150px;top:8%;right:10%;animation-duration:12s;animation-delay:-4s;}
.shape-4{width:90px;height:90px;bottom:10%;right:18%;border-radius:30%;animation-duration:9s;animation-delay:-1s;}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg) rotateX(0deg);}
  50%{transform:translateY(-22px) rotate(8deg) rotateX(12deg);}
}

.ai-scene-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7);align-items:center;}
.ai-scene-copy h2{font-size:clamp(1.9rem, 1.6vw + 1.2rem, 2.6rem);margin-bottom:var(--space-3);}
.ai-scene-copy .section-sub{margin-bottom:var(--space-4);}

.ai-feature-card{
  background:rgba(36,30,23,.7);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);backdrop-filter:blur(6px);
  transform:rotateY(-4deg) rotateX(2deg);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow:var(--shadow-lift);
}
.ai-feature-card:hover{transform:rotateY(0) rotateX(0) translateY(-4px);}
.ai-feature-card h3{font-size:1.5rem;margin-block:var(--space-3);}
.ai-feature-card h3 a:hover{color:var(--accent);}
.ai-feature-card p{color:var(--text-secondary);margin-bottom:var(--space-4);}

@media (max-width:960px){
  .ai-scene-inner{grid-template-columns:1fr;}
  .ai-feature-card{transform:none;}
}

/* =========================================================
   Brand breakdown feature
   ========================================================= */
.breakdown-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:center;
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;
}
.breakdown-media{min-height:380px;height:100%;background-size:cover;background-position:center;}
.breakdown-body{padding:var(--space-6);}
.breakdown-body h3{font-size:clamp(1.5rem, 1.4vw + 1rem, 2rem);margin-block:var(--space-3);}
.breakdown-body h3 a:hover{color:var(--accent);}
.breakdown-body blockquote{
  font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--accent-strong);
  border-left:2px solid var(--accent);padding-left:var(--space-4);margin-bottom:var(--space-4);
}
.breakdown-body p{color:var(--text-secondary);margin-bottom:var(--space-4);}
.breakdown-body .meta-row{margin-bottom:var(--space-4);}

@media (max-width:860px){
  .breakdown-feature{grid-template-columns:1fr;}
  .breakdown-media{min-height:260px;}
}

/* =========================================================
   Opinions
   ========================================================= */
.opinion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);grid-auto-rows:1fr;}
.opinion-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5);
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:var(--space-5);
  transition:transform .3s var(--ease), border-color .3s var(--ease);height:100%;
}
.opinion-card:hover{transform:translateY(-4px);border-color:var(--accent);}
.opinion-quote{font-family:var(--font-display);font-size:1.15rem;font-style:italic;line-height:1.5;}
.opinion-byline{display:flex;align-items:center;gap:.8rem;font-family:var(--font-ui);}
.opinion-byline div{display:flex;flex-direction:column;line-height:1.3;}
.opinion-byline span{font-size:.8rem;color:var(--text-tertiary);}
.avatar{
  width:42px;height:42px;border-radius:50%;background:var(--accent-2);color:var(--bg-0);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:700;font-size:.85rem;
}
@media (max-width:860px){ .opinion-grid{grid-template-columns:1fr;} }

/* =========================================================
   Stats
   ========================================================= */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.stat-card{
  text-align:center;padding:var(--space-6) var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1));
}
.stat-value{display:block;font-family:var(--font-display);font-size:clamp(2.2rem, 2vw + 1.4rem, 3rem);color:var(--accent);margin-bottom:.4rem;}
.stat-card p{color:var(--text-secondary);font-size:.92rem;}
@media (max-width:860px){ .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .stats-grid{grid-template-columns:1fr;} }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{background:linear-gradient(120deg, var(--accent), var(--accent-2));}
.cta-band-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-6);align-items:center;}
.cta-band h2{color:var(--accent-ink);font-size:clamp(1.8rem, 1.6vw + 1.2rem, 2.4rem);margin-bottom:var(--space-3);}
.cta-band p{color:rgba(27,22,15,.75);max-width:52ch;}
.cta-band .newsletter-form input{background:rgba(27,22,15,.08);border-color:rgba(27,22,15,.25);color:var(--accent-ink);}
.cta-band .newsletter-form input::placeholder{color:rgba(27,22,15,.55);}
@media (max-width:860px){ .cta-band-inner{grid-template-columns:1fr;} }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--bg-1);border-top:1px solid var(--border-soft);padding-top:var(--space-8);}
.footer-top{display:grid;grid-template-columns:1.4fr .8fr .8fr .8fr;gap:var(--space-6);padding-bottom:var(--space-7);}
.footer-brand p{color:var(--text-secondary);font-size:.92rem;margin-block:var(--space-3);max-width:36ch;}
.footer-col h2{font-family:var(--font-ui);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-4);}
.footer-col ul{display:flex;flex-direction:column;gap:.9rem;font-family:var(--font-ui);}
.footer-col a{color:var(--text-secondary);transition:color .2s var(--ease);}
.footer-col a:hover{color:var(--accent-strong);}
.footer-newsletter p{color:var(--text-secondary);font-size:.9rem;margin-bottom:var(--space-4);}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  border-top:1px solid var(--border-soft);padding-block:var(--space-4);font-family:var(--font-ui);font-size:.82rem;color:var(--text-tertiary);
}
.footer-legal{display:flex;gap:1.2rem;}
.footer-legal a:hover{color:var(--accent-strong);}
.back-to-top{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease);}
.back-to-top svg{width:15px;height:15px;transform:rotate(-90deg);}
.back-to-top:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-3px);}

@media (max-width:960px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
}

/* =========================================================
   Archive hero — eye-catching banner + search, shared by every
   archive/taxonomy/blog/search template.
   ========================================================= */
.archive-hero{position:relative;overflow:hidden;padding-block:var(--space-8) var(--space-7);text-align:center;}
.archive-hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(55% 60% at 50% 0%, rgba(184,135,58,.16), transparent 65%),
    radial-gradient(40% 50% at 100% 100%, rgba(168,78,31,.1), transparent 60%);
}
.archive-hero-inner{position:relative;z-index:1;max-width:720px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;}
.archive-hero-inner .eyebrow{justify-content:center;}
.archive-hero-inner h1{font-size:clamp(2.2rem, 2.4vw + 1rem, 3.4rem);}
.archive-hero-lede{color:var(--text-secondary);font-size:1.1rem;max-width:56ch;margin-block:var(--space-3) var(--space-5);}

.archive-search-form{
  display:flex;align-items:center;gap:.5rem;width:100%;max-width:520px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:100px;
  padding:.4rem .4rem .4rem 1.2rem;box-shadow:var(--shadow-soft);
}
.archive-search-form svg{width:19px;height:19px;color:var(--text-tertiary);flex:none;}
.archive-search-form input{flex:1;min-width:0;background:none;border:0;color:var(--text-primary);font-size:1rem;font-family:var(--font-ui);}
.archive-search-form input::placeholder{color:var(--text-tertiary);}
.archive-search-form .btn{flex:none;padding-block:.65rem;}
@media (max-width:560px){
  .archive-search-form{flex-wrap:wrap;border-radius:var(--radius-md);padding:.8rem;}
  .archive-search-form input{flex-basis:100%;order:1;padding-block:.4rem;}
  .archive-search-form .btn{flex:1;order:2;justify-content:center;}
}

/* =========================================================
   Simple templates (single/page/archive/search/404)
   ========================================================= */
.archive-section h1{font-size:clamp(2rem, 1.6vw + 1.2rem, 2.8rem);}
.pagination-row{margin-top:var(--space-6);display:flex;justify-content:center;gap:1rem;font-family:var(--font-ui);}
.pagination-row .page-numbers{padding:.6rem 1.1rem;border:1px solid var(--border);border-radius:100px;transition:all .2s var(--ease);}
.pagination-row .page-numbers:hover,.pagination-row .page-numbers.current{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}

.single-post h1{font-size:clamp(2rem, 2vw + 1.2rem, 3rem);margin-block:var(--space-3);}
.single-post-media{height:380px;border-radius:var(--radius-lg);background-size:cover;background-position:center;margin-block:var(--space-5);}
.single-post-content{font-size:1.08rem;line-height:1.75;color:var(--text-secondary);}
.single-post-content p{margin-bottom:1.4em;}
.single-post-content h2,.single-post-content h3{color:var(--text-primary);margin-block:1.4em .6em;}
.single-post-dek{font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--text-secondary);margin-block:var(--space-2) 0;}

/* Interview detail */
.interviewee-card{
  display:flex;align-items:center;gap:1rem;margin-block:var(--space-5);padding:var(--space-4);
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);
}
.interviewee-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;}
.interviewee-avatar{width:64px;height:64px;font-size:1.1rem;}
.interviewee-card div{display:flex;flex-direction:column;gap:.2rem;font-family:var(--font-ui);}
.interviewee-card span{color:var(--text-secondary);font-size:.9rem;}

/* Brand Breakdown detail */
.breakdown-meta-bar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-4);
  margin-block:var(--space-5);padding:var(--space-4);
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);font-family:var(--font-ui);
}
.breakdown-meta-bar span{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:.3rem;}
.breakdown-meta-bar strong{font-family:var(--font-display);font-size:1.05rem;color:var(--text-primary);}
.verdict-badge{display:inline-block;padding:.2rem .6rem;border-radius:100px;font-size:.85rem;}
.verdict-badge.verdict-good{background:#EAF3E4;color:#3D6B2C;}
.verdict-badge.verdict-mixed{background:var(--bg-3);color:var(--accent-strong);}
.verdict-badge.verdict-poor{background:#FBE4E0;color:#A3341F;}

.logo-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-block:var(--space-5);}
.logo-compare-panel{border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-2);}
.logo-compare-label{display:block;font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);padding:.7rem var(--space-3) 0;}
.logo-compare-media{height:220px;background-size:cover;background-position:center;margin:.5rem var(--space-3) var(--space-3);border-radius:var(--radius-sm);}
@media (max-width:600px){ .logo-compare{grid-template-columns:1fr;} }

/* Survey detail */
.survey-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4);margin-block:var(--space-5);}

/* Contact page */
.contact-form{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5);}
.contact-form label{display:flex;flex-direction:column;gap:.4rem;font-family:var(--font-ui);font-weight:600;font-size:.92rem;color:var(--text-primary);}
.contact-form input,.contact-form textarea{
  font-family:var(--font-body);font-size:1rem;font-weight:400;padding:.85rem 1rem;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);
  transition:border-color .25s var(--ease);
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);}
.contact-form button{align-self:flex-start;}
.form-notice{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);margin-top:var(--space-5);font-family:var(--font-ui);}
.form-notice-success{background:#EAF3E4;color:#3D6B2C;}
.form-notice-error{background:#FBE4E0;color:#A3341F;}

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal{opacity:1;}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.js .reveal.is-visible{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
}