/*!
Theme Name:   InsightRepublic
Theme URI:    https://insightrepublic.org/
Author:       Insight Republic
Author URI:   https://insightrepublic.org/
Description:  A bespoke, editorially-styled one-brand theme built for Insight Republic — a consumer-insight consultancy connecting human sense-making with the power of AI. Ships with a rotating full-bleed home hero, an interactive "brand construct" diagram, scroll-reveal storytelling sections and a set of dedicated service pages.
Version:      1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  insightrepublic
Tags:         one-column, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, threaded-comments, translation-ready, block-patterns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

InsightRepublic is based on the original static-HTML design commissioned by
Insight Republic and converted to a standards-compliant WordPress theme.
*/

/* ============================================================
   Table of contents
   ------------------------------------------------------------
   1.0  Reset & custom properties
   2.0  Base typography & elements
   3.0  Layout primitives (.wrap, bands, grids)
   4.0  Header & navigation
   5.0  Home hero / rotating sequence
   6.0  Story sections (reach, mech, sections, cards)
   7.0  Brand-construct diagram ("the web")
   8.0  Footer
   9.0  Utilities, accessibility & motion
   10.0 Inner-page layout (.route-page)
   ============================================================ */

/* ============================================================
   Insight Republic — shared stylesheet
   ============================================================ */

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

:root{
  --ink:#1e1f4b;        /* brand navy — matches the logo background exactly */
  --ink-2:#181934;      /* recessed panels */
  --ink-3:#2c2d61;      /* raised surfaces (card hover, chips) */
  --gold:#ebc528;
  --gold-2:#f7d95f;
  --gold-deep:#b9960f;
  --paper:#f4efe1;
  --paper-ink:#16172f;
  --text:#ece9dd;
  --text-dim:#a5a3c4;
  --line:rgba(236,233,221,.14);
  --line-strong:rgba(236,233,221,.30);
  --wrap:1200px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --band:clamp(3.5rem,8vw,6.75rem);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.62rem + .55vw,1.12rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:300;line-height:1.04;letter-spacing:-.018em;font-optical-sizing:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
picture{display:contents}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:.7rem 1rem;font-family:'Instrument Sans',system-ui,sans-serif;font-size:.8rem;z-index:200}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.rule{height:1px;background:var(--line);border:0}

/* ---------- shared type utilities ---------- */
.eyebrow{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:.76rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--gold);opacity:.7;flex:none}
.meta{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.78rem;letter-spacing:.02em;color:var(--text-dim)}
.lead{font-size:clamp(1.1rem,.9rem + .7vw,1.42rem);line-height:1.62;color:var(--text-dim);max-width:44ch}
.display-xl{font-size:clamp(2.5rem,.8rem + 5vw,5.75rem)}
.display-l{font-size:clamp(2rem,1.2rem + 3.4vw,3.55rem)}
.display-m{font-size:clamp(1.5rem,1.1rem + 1.9vw,2.3rem)}
.ital{font-style:italic;color:var(--gold-2);font-weight:300}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--text);--bd:var(--line-strong);
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:1.05rem 1.9rem;min-height:44px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{--bg:var(--gold);--fg:var(--ink);--bd:var(--gold)}
.btn--solid:hover{--bg:var(--gold-2);--bd:var(--gold-2)}
.btn--ghost:hover{--fg:var(--gold);--bd:var(--gold)}
.btn__arw{transition:transform .2s ease}
.btn:hover .btn__arw{transform:translateX(3px)}

.txtlink{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.8rem;letter-spacing:.06em;
  color:var(--text);border-bottom:1px solid var(--line-strong);padding-bottom:.2rem;
  transition:color .2s,border-color .2s;
}
.txtlink:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--gutter);
  transition:background .35s ease,border-color .35s ease,padding .35s ease;
  border-bottom:1px solid transparent;
}
.header::before{
  content:"";position:absolute;inset:0 0 -3.5rem 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(30,31,75,.92) 38%,rgba(30,31,75,.55) 68%,rgba(30,31,75,0) 100%);
  transition:opacity .35s ease;
}
.header--solid::before{opacity:0}
.header--solid{background:var(--ink);border-bottom-color:var(--line);padding-block:.8rem}
/* pages without a full-bleed hero always want the solid header */
.header--plain{background:var(--ink);border-bottom-color:var(--line)}
.header--plain::before{opacity:0}

.brand{display:flex;align-items:center;flex:none;position:relative;z-index:120}
.brand__logo{width:clamp(150px,20vw,196px);height:auto;display:block}

.nav{display:flex;align-items:center;gap:2rem}
.nav__list{display:flex;gap:1.5rem;list-style:none}
.nav__list a{
  font-family:'Fraunces',Georgia,serif;font-size:1.02rem;font-weight:400;
  letter-spacing:.005em;color:var(--text-dim);transition:color .2s;
}
.nav__list a:hover,.nav__list a[aria-current]{color:var(--gold)}
.nav .btn{padding:.75rem 1.2rem}

.burger{display:none;background:none;border:1px solid var(--line-strong);color:var(--text);
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex:none;
  position:relative;z-index:120}
.burger svg{width:18px;height:18px}
.burger__close{display:none}
body.nav-open .burger__open{display:none}
body.nav-open .burger__close{display:block}
body.nav-open .burger{border-color:var(--gold);color:var(--gold)}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:7rem;padding-bottom:4rem;overflow:hidden}
.hero__img{
  position:absolute;top:0;right:0;bottom:0;z-index:0;
  width:min(58vw,820px);height:100%;
  object-fit:cover;object-position:58% 44%;
  filter:grayscale(1) contrast(1.05) brightness(.66) sepia(.5) hue-rotate(199deg) saturate(1.5);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--ink) 0%,var(--ink) 30%,rgba(30,31,75,.94) 42%,rgba(30,31,75,.64) 60%,rgba(30,31,75,.34) 82%,rgba(30,31,75,.28) 100%),
    linear-gradient(0deg,var(--ink) 6%,rgba(30,31,75,.6) 26%,rgba(30,31,75,0) 52%),
    radial-gradient(38% 30% at 74% 30%,rgba(235,197,40,.14),transparent 70%);
}
.hero__inner{position:relative;z-index:1;width:100%}
.hero h1{margin:1.6rem 0 1.6rem;max-width:13ch}
.hero h1 .ital{color:inherit}
.hero__statement{
  font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.018em;line-height:1.12;
  font-size:clamp(1.55rem,1rem + 2.6vw,2.8rem);
  max-width:20ch;margin:0 0 2.4rem;color:var(--text);
}
.hero__statement .ital{font-style:italic;color:var(--gold-2);font-weight:300}

/* hero headline — static text, no letter-by-letter animation */
.hero-type{position:relative;display:block}
.hero-type__ghost{visibility:visible}
.hero-type__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-type__vis{display:none}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero__foot{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:1.8rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);z-index:2;
}
.hero__foot span{display:flex;align-items:center;gap:.6rem}
.hero__foot span::before{content:"";width:2.4rem;height:1px;background:var(--line-strong)}

/* ---------- image bands (gap / mechanism) ---------- */
.reach,.mech{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(82vh,800px);
  display:flex;align-items:flex-end;
  background:var(--ink);border-block:1px solid var(--line);
}
.mech{min-height:min(76vh,740px)}
.reach__img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:grayscale(1) contrast(1.08) brightness(.82) sepia(.42) hue-rotate(186deg) saturate(1.45);
}
.mech__img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 52%;
  filter:grayscale(1) contrast(1.05) brightness(.7) sepia(.5) hue-rotate(199deg) saturate(1.5);
}
.reach::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(30,31,75,.12),rgba(24,25,52,.55) 62%,rgba(24,25,52,.9)),
    radial-gradient(125% 80% at 10% 100%,rgba(24,25,52,.5),transparent 62%);
}
.mech::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(24,25,52,.95) 0%,rgba(24,25,52,.74) 38%,rgba(24,25,52,.34) 72%,rgba(24,25,52,.26) 100%),
    linear-gradient(0deg,rgba(24,25,52,.9) 2%,rgba(24,25,52,0) 46%),
    linear-gradient(180deg,rgba(30,31,75,.5),rgba(30,31,75,0) 28%);
}
.reach__overlay,.mech__overlay{
  position:relative;z-index:2;width:100%;
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(2.75rem,7vw,5.5rem);
}
.reach__eye,.mech__eye{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:.76rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;
}
.reach__eye::before,.mech__eye::before{content:"";width:1.6rem;height:1px;background:var(--gold);opacity:.7}
.reach__line{
  font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.022em;line-height:1.03;
  font-size:clamp(2.15rem,1rem + 4.8vw,4.4rem);max-width:15ch;
}
.mech__line{
  font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.75rem,1rem + 3.2vw,3.3rem);max-width:22ch;
}
.reach__line .ital,.mech__line .ital{font-style:italic;color:var(--gold-2);font-weight:300}
.reach__sub,.mech__sub{
  margin-top:1.4rem;
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:clamp(1.02rem,.9rem + .55vw,1.32rem);line-height:1.55;
  color:var(--text);max-width:48ch;
}
.mech__sub{max-width:56ch;line-height:1.62}
.reach__sub .ital,.mech__sub .ital{font-style:italic;color:var(--gold-2)}
@media(max-width:600px){.reach{min-height:74vh}.mech{min-height:68vh}}

/* ---------- statement break ---------- */
.say{border-block:1px solid var(--line);background:var(--ink);padding-block:clamp(4.5rem,13vw,9rem)}
.say__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.say__mark{width:2.4rem;height:1px;background:var(--gold);opacity:.75;margin-bottom:2rem}
.say p{
  font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.022em;line-height:1.11;
  font-size:clamp(2.1rem,1rem + 5.4vw,4.8rem);max-width:19ch;color:var(--text);
}
.say p .ital{font-style:italic;color:var(--gold-2);font-weight:300}
.say p.say__foot{
  margin-top:1.7rem;max-width:38ch;
  font-family:'Instrument Sans',system-ui,sans-serif;font-weight:400;
  font-size:clamp(.98rem,.92rem + .3vw,1.12rem);line-height:1.62;color:var(--text-dim);
  letter-spacing:normal;
}

/* ---------- four building blocks ---------- */
.blocks{margin-top:clamp(2.75rem,6vw,4.5rem)}
.blocks__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
}
.block{
  background:var(--ink);border:1px solid var(--line);padding:clamp(1.3rem,2.3vw,1.9rem);
  display:flex;flex-direction:column;gap:.55rem;min-height:200px;
  transition:background .25s ease;
}
.block:hover{background:var(--ink-3)}
.block__n{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.2em;color:var(--gold)}
.block__t{font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.01em;font-size:clamp(1.15rem,.9rem + .8vw,1.55rem);color:var(--text);margin-bottom:.15rem}
.block__d{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.87rem;line-height:1.5;color:var(--text-dim)}
.blocks__join{
  display:flex;align-items:center;gap:1.1rem;padding-block:1.35rem;
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.blocks__join::before,.blocks__join::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(235,197,40,.55),transparent)}
.blocks__result{
  border:1px solid var(--line-strong);border-left:2px solid var(--gold);
  background:var(--ink-2);padding:clamp(1.5rem,3.2vw,2.5rem);
}
.blocks__result p{
  font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(1.25rem,1rem + 1.3vw,1.95rem);line-height:1.32;color:var(--text);max-width:42ch;
}
.blocks__result p .ital{color:var(--gold-2)}
@media(max-width:820px){.blocks__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.blocks__grid{grid-template-columns:1fr}.block{min-height:0}}

/* a shorter, denser card so a 7-item grid reads in one screen, not two */
.blocks--tight{margin-top:1.6rem}
.blocks--tight .block{min-height:0;padding:1.1rem 1.3rem;gap:.4rem}
.blocks--tight .block__t{font-size:clamp(1rem,.88rem + .5vw,1.2rem);margin-bottom:0}
.blocks--tight .block__d{font-size:.82rem;line-height:1.42}

/* ---------- cards ---------- */
.cardgrid{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{
  background:var(--ink);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1rem;
  min-height:250px;transition:background .25s ease;
}
.card:hover{background:var(--ink-3)}
.card__kick{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.card h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);color:var(--text)}
.card__pr{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;color:var(--gold-2);font-size:1.02rem;line-height:1.3}
.card p{color:var(--text-dim);font-size:.98rem;flex:1}
.card__go{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.76rem;letter-spacing:.1em;color:var(--text);display:flex;align-items:center;gap:.5rem;transition:color .2s,gap .2s}
.card:hover .card__go{color:var(--gold);gap:.85rem}
@media(max-width:820px){.cardgrid{grid-template-columns:1fr}.card{min-height:0}}

/* ---------- contact ---------- */
.contact{background:var(--paper);color:var(--paper-ink);text-align:center}
.contact .eyebrow{color:var(--gold-deep);justify-content:center}
.contact .eyebrow::before{background:var(--gold-deep)}
.contact h2{font-size:clamp(2.2rem,1.4rem + 4.5vw,4.6rem);margin:1.4rem 0 1.6rem;color:var(--paper-ink)}
.contact p{max-width:46ch;margin:0 auto 2.2rem;color:#4a4a63}
.contact__row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center}
.contact .btn--solid{--bg:var(--paper-ink);--fg:var(--paper);--bd:var(--paper-ink)}
.contact .btn--solid:hover{--bg:#000;--bd:#000}
.contact .btn--ghost{--fg:var(--paper-ink);--bd:rgba(22,23,47,.35)}
.contact .btn--ghost:hover{--fg:var(--gold-deep);--bd:var(--gold-deep)}
.contact__mail{margin-top:2.4rem;font-family:'Instrument Sans',system-ui,sans-serif;font-size:.82rem;letter-spacing:.04em;color:#4a4a63}
.contact__mail a{border-bottom:1px solid rgba(22,23,47,.3)}

/* ---------- footer ---------- */
.footer{background:var(--ink);border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.footer__brand{display:flex;flex-direction:column;gap:1rem;max-width:32ch}
.footer__logo{width:200px;height:auto}
.footer p{color:var(--text-dim);font-size:.9rem}
.footer h4{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1rem}
.footer__nav{list-style:none;display:grid;gap:.6rem}
.footer__nav a{font-size:.92rem;color:var(--text);transition:color .2s}
.footer__nav a:hover{color:var(--gold)}
.footer__base{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.06em;color:var(--text-dim)}

/* ---------- mobile nav ---------- */
.navwrap{display:contents}
@media(max-width:960px){
  .burger{display:inline-flex}
  .navwrap{
    position:fixed;inset:0;background:var(--ink);z-index:98;
    display:flex;flex-direction:column;justify-content:center;gap:0;
    padding:calc(var(--gutter) + 4rem) var(--gutter) var(--gutter);
    overflow-y:auto;
    transform:translateY(-100%);transition:transform .4s ease;
    visibility:hidden;
  }
  body.nav-open .navwrap{transform:none;visibility:visible}
  body.nav-open{overflow:hidden}
  .nav{flex-direction:column;align-items:flex-start;gap:2rem;width:100%}
  .nav__list{flex-direction:column;gap:1.6rem;width:100%}
  .nav__list a{font-size:1.35rem;color:var(--text);font-family:'Fraunces',serif;letter-spacing:-.01em}
  .nav .btn{width:100%;justify-content:center;padding:1.1rem;font-family:'Instrument Sans',system-ui,sans-serif}
}

/* ---------- responsive shared ---------- */
@media(max-width:960px){
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .hero{padding-top:6.5rem}
  .hero__img{width:100%;object-position:center 38%;opacity:.5}
  .hero::after{background:linear-gradient(180deg,rgba(30,31,75,.5),rgba(30,31,75,.82) 62%,var(--ink)),radial-gradient(60% 32% at 62% 26%,rgba(235,197,40,.13),transparent 70%)}
  .hero__foot{position:static;width:100%;margin-top:2.5rem;padding:0;font-size:.64rem}
}
@media(max-width:600px){
  .hero__foot span::before{display:none}
}

/* ---------- reveal ---------- */
[data-reveal]{transition:opacity .7s ease,transform .7s ease}
.js [data-reveal]{opacity:0;transform:translateY(16px)}
.js [data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
[data-reveal][data-delay="5"]{transition-delay:.4s}
[data-reveal][data-delay="6"]{transition-delay:.48s}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .btn:hover{transform:none}
}

section[id]{scroll-margin-top:5rem}

/* ============================================================
   v2 — multi-page components
   ============================================================ */

/* ---------- sub-page shell ---------- */
.page{padding-top:clamp(5.5rem,9vw,7.5rem)}
.crumb{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.6rem;
}
.crumb a{color:var(--text-dim);transition:color .2s}
.crumb a:hover{color:var(--gold)}
.crumb span{opacity:.5}

.subhero{border-bottom:1px solid var(--line);padding-bottom:clamp(2.5rem,5vw,4rem)}
.subhero .eyebrow{margin-bottom:1.4rem}
.subhero h1{font-size:clamp(2.4rem,1.3rem + 4.8vw,4.6rem);max-width:20ch;margin-bottom:1.3rem}
.subhero .lead{max-width:58ch}
.subhero__pr{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,1rem + 1.6vw,2.05rem);line-height:1.28;
  color:var(--gold-2);max-width:24ch;margin-bottom:1.3rem;
}

/* ---------- prose ---------- */
.prose{max-width:64ch}
.prose > * + *{margin-top:1.15rem}
.prose p{color:var(--text)}
.prose em{color:var(--gold-2);font-style:italic}
.prose strong{color:#fff;font-weight:600}
.prose h3{font-size:clamp(1.3rem,1rem + 1.2vw,1.7rem);color:var(--text);margin-top:2.4rem}

/* section rhythm inside pages */
.sect{border-top:1px solid var(--line);padding-block:clamp(2.75rem,6vw,4.75rem)}
.sect:first-child{border-top:0}
.sect > .eyebrow{margin-bottom:1.5rem}
.sect h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.7rem);max-width:20ch;margin-bottom:1.3rem}

/* ---------- keyed list (deck of points) ---------- */
.deck{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.deck li{
  padding:1.2rem 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:start;
}
.deck dt,.deck b{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding-top:.15rem}
.deck dd,.deck span{color:var(--text);font-size:1rem}
@media(max-width:640px){.deck li{grid-template-columns:1fr;gap:.4rem}}

/* ---------- dash list ---------- */
.dashlist{list-style:none;display:grid;gap:.8rem;max-width:60ch}
.dashlist li{display:grid;grid-template-columns:1.1rem 1fr;gap:.7rem;color:var(--text);font-size:1rem}
.dashlist li::before{content:"—";color:var(--gold)}

/* ---------- the signature system diagram ---------- */
.sysd{
  --sysd-is:var(--line-strong);--sysd-pd:var(--line-strong);--sysd-ce:var(--line-strong);--sysd-frame:var(--gold);
  border:1px solid var(--sysd-frame);padding:clamp(1.1rem,3vw,2rem);
  background:var(--ink-2);max-width:760px;
}
.sysd--sm{max-width:640px;padding:clamp(1rem,2.5vw,1.5rem)}
.sysd__cap{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:1.1rem;
}
.sysd__cap small{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--text-dim);font-size:.82rem}
.sysd__pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1px}
.sysd__pillar{
  background:var(--ink);padding:clamp(.85rem,2vw,1.2rem);text-align:center;
  font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(1rem,.9rem + .5vw,1.3rem);color:var(--text);
  border-top:2px solid transparent;transition:background .25s,border-color .25s;
}
.sysd__pillar small{display:block;font-family:'Instrument Sans',sans-serif;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-top:.3rem}
.sysd__pillar:nth-child(1){border-top-color:var(--sysd-is)}
.sysd__pillar:nth-child(2){border-top-color:var(--sysd-pd)}
.sysd__pillar:nth-child(3){border-top-color:var(--sysd-ce)}
.sysd__base{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sysd__cell{
  background:var(--ink);padding:.7rem .55rem;text-align:center;
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.02em;color:var(--text-dim);
}
.sysd__base-label{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);margin:.9rem 0 .5rem;
}
.sysd__current{
  display:flex;align-items:center;gap:.9rem;margin-top:1.1rem;
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.sysd__current i{flex:1;height:1px;position:relative;background:linear-gradient(90deg,rgba(235,197,40,.2),rgba(235,197,40,.9))}
.sysd__current i::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:translateY(-50%) rotate(45deg)}
/* per-page highlight modifiers */
.sysd--brand{--sysd-frame:var(--gold-2);box-shadow:0 0 0 1px var(--gold-2) inset}
.sysd--innovation{--sysd-is:var(--gold)}
.sysd--innovation .sysd__pillar:nth-child(1){background:var(--ink-3)}
.sysd--product{--sysd-pd:var(--gold)}
.sysd--product .sysd__pillar:nth-child(2){background:var(--ink-3)}
.sysd--concept{--sysd-ce:var(--gold)}
.sysd--concept .sysd__pillar:nth-child(3){background:var(--ink-3)}
@media(max-width:560px){
  .sysd__pillars{grid-template-columns:1fr}
  .sysd__base{grid-template-columns:repeat(2,1fr)}
}

/* home: method-in-one-view */
.mview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,4.5rem);align-items:center}
.mview h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.7rem);max-width:16ch;margin-bottom:1.1rem}
.mview p{color:var(--text-dim);max-width:44ch;margin-bottom:1.6rem}
@media(max-width:900px){.mview{grid-template-columns:1fr;gap:2rem}}
/* the diagram on its own, with no text column — smaller and centered so the
   whole thing (heading, diagram, caption) sits in one screen, no legend list */
.mview--solo{display:block;max-width:440px;margin-inline:auto}
.mview--solo > .eyebrow{max-width:none}
.web--solo{max-width:100%;margin-top:1.2rem}
.web--solo .web__caption{text-align:center;max-width:none}

/* home: protocols overview */
.pov__frame{
  border:1px solid var(--gold);padding:clamp(1.1rem,3vw,2rem);background:var(--ink-2);
}
.pov__label{font-family:'Instrument Sans',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.pov__brandline{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;color:var(--gold-2);font-size:clamp(1.05rem,.9rem + .7vw,1.4rem);margin:.5rem 0 1.4rem;max-width:34ch}
.pov__inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pov__inner--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pov__cell{background:var(--ink);padding:clamp(1.1rem,2.5vw,1.6rem);display:flex;flex-direction:column;gap:.5rem;transition:background .25s}
.pov__cell:hover{background:var(--ink-3)}
.pov__cell h3{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);color:var(--text)}
.pov__cell .card__pr{font-size:.95rem}
.pov__cell span{margin-top:auto;font-family:'Instrument Sans',sans-serif;font-size:.72rem;letter-spacing:.1em;color:var(--gold);opacity:0;transition:opacity .2s}
.pov__cell:hover span{opacity:1}
@media(max-width:720px){.pov__inner{grid-template-columns:1fr}}

/* ---------- protocol page body ---------- */
.ppage__pr{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,1.1rem + 1.8vw,2.2rem);line-height:1.26;
  color:var(--gold-2);max-width:24ch;
}

/* ---------- opening sequence ---------- */
.seq__nav,.seq__skip,.seq__pause{display:none}

/* once the intro has ended (Skip, or a scroll/key gesture), the script adds
   seq-done — at that point the whole intro block should disappear completely
   rather than falling back into normal document flow as three stacked
   full-bleed panels, which is what used to happen. Note this is scoped to
   seq-done specifically (not ":not(.seq-run)") so that before the script has
   run at all — or on a browser with JavaScript unavailable — the intro still
   renders as a plain stacked fallback instead of being hidden outright. */
html.seq-done #seq{display:none}

html.seq-run,html.seq-run body{overflow:hidden;height:100%}
/* the header stays visible and clickable even while the intro is running —
   the sequence loops on its own and never exits by itself, so hiding
   navigation for its whole runtime left visitors with no way to leave it
   except the small Skip button. The header's own gradient scrim (see
   .header::before) already keeps it legible over full-bleed imagery. */
html.seq-run .header{z-index:110}
html.seq-run .after-seq,html.seq-run .footer{visibility:hidden}
.seq-run .seq{position:fixed;inset:0;z-index:90}
.seq-run .seq > section{
  position:absolute;inset:0;min-height:0;opacity:0;pointer-events:none;
  transition:opacity .9s ease;
}
.seq-run .seq > section.is-active{opacity:1;pointer-events:auto}

.seq-run .seq__nav{
  display:flex;gap:.6rem;position:fixed;left:50%;transform:translateX(-50%);
  bottom:clamp(1rem,4vh,2.2rem);z-index:95;
}
.seq__tick{
  width:2.4rem;height:2px;border:0;padding:0;cursor:pointer;
  background:var(--line-strong);transition:background .3s;
}
.seq__tick.is-on{background:var(--gold)}
.seq-run .seq__skip,.seq-run .seq__pause{
  display:inline-flex;align-items:center;gap:.5rem;position:fixed;
  bottom:clamp(1rem,4vh,2.2rem);z-index:95;
  background:none;border:0;cursor:pointer;
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
  transition:color .2s;
}
.seq-run .seq__skip{right:clamp(1rem,4vw,2.2rem)}
.seq-run .seq__pause{right:clamp(6.5rem,15vw,9.5rem)}
.seq-run .seq__skip:hover,.seq-run .seq__pause:hover,.seq-run .seq__pause[aria-pressed="true"]{color:var(--gold)}
.seq__pause span{font-size:.85em}

@media(max-width:600px){
  .seq-run .seq__pause{right:clamp(1rem,4vw,2.2rem);bottom:clamp(3.4rem,10vh,4.8rem)}
}

@media(prefers-reduced-motion:reduce){
  html.seq-run,html.seq-run body{overflow:auto;height:auto}
  .seq-run .seq{position:static}
  .seq-run .seq > section{position:relative;opacity:1;pointer-events:auto}
  .seq-run .seq__nav,.seq-run .seq__skip,.seq-run .seq__pause{display:none}
  html.seq-run .header{opacity:1;pointer-events:auto}
}

/* ---------- the brand construct — four interdependent forces ---------- */
.web{max-width:560px}
.web--lg{max-width:640px}
.web__svg{width:100%;height:auto;display:block;overflow:visible}
.web__line{stroke:var(--line-strong);stroke-width:1;transition:stroke .25s ease,stroke-width .25s ease,opacity .3s ease}
.web__line.is-lit{stroke:var(--gold);stroke-width:1.6}
.web__line.is-dim{opacity:.22}
.web__node{cursor:pointer;transition:opacity .25s ease}
.web__node circle{
  fill:var(--ink-2);stroke:var(--line-strong);stroke-width:1;
  transition:fill .25s ease,stroke .25s ease,stroke-width .25s ease,transform .3s ease;
  transform-origin:center;transform-box:fill-box;
}
.web__node text{fill:var(--text);font-family:'Instrument Sans',system-ui,sans-serif;font-size:15px;text-anchor:middle;pointer-events:none}
.web__node.is-active circle{fill:var(--ink-3);stroke:var(--gold);stroke-width:2;transform:scale(1.07)}
.web__node.is-active text{fill:var(--gold-2)}
.web__node.is-dim{opacity:.42}
.web__node:focus-visible circle{stroke:var(--gold);stroke-width:2}
.web__node:focus{outline:none}
.web__node-link{outline:none}
.web__node-link:focus-visible .web__node circle{stroke:var(--gold);stroke-width:2}
.web__hub{cursor:pointer}
.web__hub circle{fill:var(--ink);stroke:var(--gold);stroke-width:1.3;transition:fill .25s ease,stroke-width .25s ease}
.web__hub text{fill:var(--gold);font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.09em;text-anchor:middle}
.web__hub:hover circle,.web__hub:focus-visible circle{fill:var(--ink-3);stroke-width:1.8}
.web__hub:focus{outline:none}
.web__caption{
  margin-top:1.7rem;min-height:2.8em;max-width:44ch;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,.9rem + .6vw,1.28rem);line-height:1.4;color:var(--gold-2);
}
.web__legend-label{margin-top:1.8rem;font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.web__legend-label + .web__legend{margin-top:.7rem}
.web__legend{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.6rem}
.web__legend li{background:var(--ink);padding:.95rem 1.1rem;display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1rem;align-items:start;transition:background .2s ease}
.web__legend li.is-active{background:var(--ink-3)}
.web__legend b{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.web__legend span{color:var(--text-dim);font-size:.9rem;line-height:1.5}
@media(max-width:640px){.web__legend li{grid-template-columns:1fr;gap:.3rem}}

/* connector callouts — the three tools that sit on the hub-to-node links */
.web__connline{stroke:var(--line-strong);stroke-width:1;opacity:.6;transition:stroke .25s ease,stroke-width .25s ease,opacity .25s ease}
.web__connline.is-lit{stroke:var(--gold);stroke-width:2;opacity:1}
.web__link{cursor:pointer}
.web__link rect{fill:var(--ink-3);stroke:var(--line-strong);stroke-width:1;transition:fill .25s ease,stroke .25s ease}
.web__link text{fill:var(--text-dim);font-family:'Instrument Sans',system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.02em;text-anchor:middle;pointer-events:none}
.web__link.is-active rect{fill:var(--ink);stroke:var(--gold);stroke-width:1.6}
.web__link.is-active text{fill:var(--gold-2)}
.web__link:focus-visible rect{stroke:var(--gold)}
.web__link:focus{outline:none}


/* inner-page top padding (every page except the front page, which has
   its own full-bleed hero) */
.route-page{padding-top:clamp(5.5rem,9vw,7.5rem)}


/* ============================================================
   11.0 WordPress fallback templates (search, archive, single
   post, comments) — the original static site had no blog or
   comment system, so these are new, built from the same design
   tokens and primitives as the rest of the theme.
   ============================================================ */

.search-form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.search-form__input{
  flex:1 1 240px;min-width:0;background:var(--ink-2);border:1px solid var(--line);
  color:var(--text);border-radius:.4rem;padding:.7rem 1rem;font:inherit
}
.search-form__input:focus{outline:2px solid var(--gold);outline-offset:2px}
.search-form__submit{border:0;cursor:pointer}

.entry-summary{color:var(--text-dim);line-height:1.6}
.page-links{margin-top:1.5rem;font-size:.9rem;color:var(--text-dim)}

.comments-area{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.comments-title{font-family:'Fraunces',serif;font-weight:400;margin-bottom:1rem}
.comment-list{list-style:none;padding:0;margin:0 0 2rem}
.comment-list .comment{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.comment-list .comment .comment-author{font-weight:600;color:var(--text)}
.comment-list .comment .comment-metadata{font-size:.8rem;color:var(--text-dim);margin-bottom:.5rem}
.comment-list .comment .comment-content p{margin:.4rem 0}
.comment-list .children{list-style:none;margin-left:1.5rem}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  border-radius:.4rem;padding:.7rem 1rem;font:inherit;margin-bottom:.8rem
}
.comment-respond textarea{min-height:8rem}
.comment-respond label{display:block;font-size:.85rem;color:var(--text-dim);margin-bottom:.3rem}

.footer__widgets{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}

/* screen-reader-only utility used by searchform.php */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ============================================================
   12.0 Block-editor content styles
   Bridges native Gutenberg blocks (paragraph, heading, list,
   buttons, group, columns) — via the style variations registered
   in functions.php (insightrepublic_block_styles()) — to the
   original design system, so a page written in the block editor
   matches the rest of the site without any hand-picked custom
   classes beyond picking a style from the block toolbar.
   ============================================================ */

/* paragraph style variations */
.is-style-eyebrow{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:.76rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.7rem;
}
.is-style-eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--gold);opacity:.7;flex:none}
.is-style-lead{font-size:clamp(1.1rem,.9rem + .7vw,1.42rem);line-height:1.62;color:var(--text-dim);max-width:44ch}
.is-style-tagline{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,1rem + 1.6vw,2.05rem);line-height:1.28;
  color:var(--gold-2);max-width:24ch;
}
.is-style-meta{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.78rem;letter-spacing:.02em;color:var(--text-dim)}
p.contact-mail{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.85rem}

/* list style variation: dash list */
ul.is-style-dashlist{list-style:none;display:grid;gap:.8rem;max-width:60ch;padding-left:0}
ul.is-style-dashlist li{display:grid;grid-template-columns:1.1rem 1fr;gap:.7rem;color:var(--text);font-size:1rem;padding-left:0}
ul.is-style-dashlist li::before{content:"—";color:var(--gold)}
ul.is-style-dashlist li::marker{content:""}

/* button style variations */
.wp-block-button.is-style-solid .wp-block-button__link{
  background:var(--gold);color:var(--ink);border:1px solid var(--gold);
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;border-radius:0;padding:1.05rem 1.9rem;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.wp-block-button.is-style-solid .wp-block-button__link:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-2px);color:var(--ink)}
.wp-block-button.is-style-ghost .wp-block-button__link{
  background:transparent;color:var(--text);border:1px solid var(--line-strong);
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;border-radius:0;padding:1.05rem 1.9rem;
  transition:color .2s ease,border-color .2s ease,transform .2s ease;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.wp-block-button.is-style-textlink .wp-block-button__link{
  background:transparent;color:var(--text);border:0;border-bottom:1px solid var(--line-strong);
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.8rem;letter-spacing:.06em;
  border-radius:0;padding:0 0 .2rem;
  transition:color .2s,border-color .2s;
}
.wp-block-button.is-style-textlink .wp-block-button__link:hover{color:var(--gold);border-color:var(--gold)}

/* feature tile look — keyed OFF THE PARENT (.is-style-feature-grid /
   .is-style-card-grid on the *core/columns* row), never off a class
   on the individual core/column itself. A custom className on an
   individual Column block has proven, twice, not to survive the
   block editor's save — the parent Columns block's className does
   survive reliably, so all of this styling hangs off that instead. */
.wp-block-columns.is-style-feature-grid,
.wp-block-columns.is-style-card-grid{
  gap:1px!important;background:var(--line);border:1px solid var(--line);margin-bottom:1px;
}
.wp-block-columns.is-style-feature-grid > .wp-block-column,
.wp-block-columns.is-style-card-grid > .wp-block-column{
  background:var(--ink);padding:clamp(1.3rem,2.3vw,1.9rem);
  display:flex;flex-direction:column;gap:.55rem;min-height:150px;margin:0;
  transition:background .25s ease;
}
.wp-block-columns.is-style-feature-grid > .wp-block-column:hover,
.wp-block-columns.is-style-card-grid > .wp-block-column:hover{background:var(--ink-3)}
/* scoped (not a bare .is-style-feature-kicker rule) so it reliably
   beats the generic ".wp-block-column p" muted/small rule just above,
   which would otherwise win on specificity and grey it out */
.wp-block-columns.is-style-feature-grid > .wp-block-column .is-style-feature-kicker,
.wp-block-columns.is-style-card-grid > .wp-block-column .is-style-feature-kicker{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.2em;color:var(--gold);text-transform:uppercase;display:block;margin:0 0 .2rem;
}
.wp-block-columns.is-style-feature-grid > .wp-block-column h3,
.wp-block-columns.is-style-feature-grid > .wp-block-column h4,
.wp-block-columns.is-style-card-grid > .wp-block-column h3,
.wp-block-columns.is-style-card-grid > .wp-block-column h4{
  font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.15rem,.9rem + .8vw,1.55rem);color:var(--text);margin:0 0 .15rem;
}
.wp-block-columns.is-style-feature-grid > .wp-block-column p,
.wp-block-columns.is-style-card-grid > .wp-block-column p{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.9rem;line-height:1.5;color:var(--text-dim);margin:0;
}
.wp-block-columns.is-style-feature-grid > .wp-block-column .wp-block-buttons,
.wp-block-columns.is-style-card-grid > .wp-block-column .wp-block-buttons{margin-top:.4rem}

/* card grid (the four-tool overview) reuses the feature tile, just
   larger, with a tagline + trailing "read the tool" link */
.wp-block-columns.is-style-card-grid > .wp-block-column{
  padding:clamp(1.6rem,3vw,2.6rem);min-height:250px;position:relative;
}
.wp-block-columns.is-style-card-grid > .wp-block-column h3{
  font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);
}
/* Makes the whole card clickable (matching the original design,
   where each card was one big <a>), while keeping the actual HTML to
   a single real link — the "Read the tool" button's link grows an
   invisible layer that covers the entire card via ::after. This is
   the standard accessible pattern for a "clickable card" and avoids
   ever nesting a link inside a link, which isn't valid HTML and also
   isn't something the Columns/Buttons blocks support directly. */
.wp-block-columns.is-style-card-grid > .wp-block-column .wp-block-button.is-style-textlink .wp-block-button__link::after{
  content:"";position:absolute;inset:0;
}
.wp-block-columns.is-style-card-grid > .wp-block-column .wp-block-button.is-style-textlink{position:relative;z-index:1}
/* same specificity fix as the kicker above: without this, the generic
   ".wp-block-column p" rule (higher specificity) would flatten the
   tagline back down to small/muted instead of its intended larger,
   italic, gold treatment */
.wp-block-columns.is-style-card-grid > .wp-block-column .is-style-tagline{
  font-size:clamp(1.02rem,.85rem + .7vw,1.3rem);line-height:1.3;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;color:var(--gold-2);
}

/* group style variation: contact band (the repeating bottom CTA) */
.wp-block-group.is-style-contact-band{
  background:var(--paper);color:var(--paper-ink);text-align:center;
  padding-block:var(--band);padding-inline:var(--gutter);margin-top:clamp(3rem,6vw,5rem);
  /* Full-bleed regardless of whether the editor kept the "alignfull"
     class on this block (it can be dropped if the block is re-saved
     through the editor) — key off the style itself instead. */
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  box-sizing:border-box;
}
.wp-block-group.is-style-contact-band .is-style-eyebrow{color:var(--gold-deep);justify-content:center}
.wp-block-group.is-style-contact-band .is-style-eyebrow::before{background:var(--gold-deep)}
.wp-block-group.is-style-contact-band h2.wp-block-heading{font-size:clamp(2.2rem,1.4rem + 4.5vw,4.6rem);margin:1.4rem 0 1.6rem;color:var(--paper-ink)}
.wp-block-group.is-style-contact-band > p{max-width:46ch;margin:0 auto 1.6rem;color:#4a4a63}
.wp-block-group.is-style-contact-band .wp-block-buttons{justify-content:center;margin-bottom:1.4rem;flex-wrap:wrap;gap:1rem}
.wp-block-group.is-style-contact-band .wp-block-button.is-style-solid .wp-block-button__link{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}
.wp-block-group.is-style-contact-band .wp-block-button.is-style-solid .wp-block-button__link:hover{background:#000;border-color:#000;color:var(--paper)}
.wp-block-group.is-style-contact-band .wp-block-button.is-style-ghost .wp-block-button__link{color:var(--paper-ink);border-color:rgba(22,23,47,.3)}
.wp-block-group.is-style-contact-band .wp-block-button.is-style-ghost .wp-block-button__link:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.wp-block-group.is-style-contact-band p.contact-mail{margin:0}
.wp-block-group.is-style-contact-band p.contact-mail a{color:#4a4a63}
.wp-block-group.is-style-contact-band p.contact-mail a:hover{color:var(--gold-deep)}

/* generic content typography inside the_content(), for any plain,
   un-styled core blocks a client adds */
/* .entry-content itself is deliberately left UNCONSTRAINED (full
   width of its parent) rather than given its own max-width. Two
   things depend on that:
     1. it keeps .entry-content's own horizontal center lined up with
        the viewport's center at every nesting depth (home's
        .after-seq > .entry-content and every inner page's
        .wrap.route-page > .entry-content alike), which is what makes
        the width:100vw breakout math on .is-style-contact-band below
        resolve correctly everywhere;
     2. individual text elements (see "generic content typography"
        further down) carry their own max-width:64ch instead, flush
        at the left edge of the page exactly like the original
        design's .prose — not re-centered as a column. */
.route-page .entry-content h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,2.7rem);margin:2.4rem 0 1.1rem;max-width:64ch}
.route-page .entry-content h3{font-size:clamp(1.3rem,1.05rem + 1vw,1.7rem);margin:1.8rem 0 .8rem;max-width:64ch}
/* plain element selectors, not the "wp-block-paragraph" etc. classes
   WordPress may or may not add at render time — this way the rule
   still applies reliably either way. */
.route-page .entry-content > p{margin-bottom:1.1rem;color:var(--text-dim);line-height:1.6;max-width:64ch}
.route-page .entry-content > ul,
.route-page .entry-content > ol{margin-bottom:1.1rem;max-width:64ch}
/* more specific than the plain "> p" rule above (3 classes beats 2
   classes + 1 element), so Lead and Tagline keep their own, narrower
   widths instead of inheriting the generic 64ch. */
.route-page .entry-content > .is-style-lead{max-width:44ch}
.route-page .entry-content > .is-style-tagline{max-width:24ch}

/* full/wide alignment support (add_theme_support('align-wide')) —
   WordPress only supplies the editor UI for these; the theme has to
   provide the actual front-end CSS. This negative-margin trick only
   breaks out to the true viewport edge when every ancestor between
   the block and the page root is itself centered (or unconstrained)
   — an off-center ancestor throws the math off. .entry-content is
   deliberately left unconstrained for exactly this reason (see the
   note above section 12's "generic content typography" rules), so
   this resolves correctly wherever it's used on this site. */
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.alignwide{
  width:calc(var(--wrap) + 2*var(--gutter));max-width:calc(var(--wrap) + 2*var(--gutter));
  margin-left:calc(50% - (var(--wrap) + 2*var(--gutter))/2);
  margin-right:calc(50% - (var(--wrap) + 2*var(--gutter))/2);
}