/*!
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.7.7
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);
  --measure:none;        /* shared max width of text on inner pages: none = full content width (same as the line under the title). Set e.g. 52rem to narrow it again. */
}

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}

/* ---- dropdown sub-menus (menu items nested one level in Appearance → Menus) ---- */
.nav__list > li{position:relative}
.nav__list > li.menu-item-has-children > a::after{
  content:"";display:inline-block;width:.38em;height:.38em;margin-left:.5em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-.18em) rotate(45deg);transition:transform .2s;
}
.nav__list .sub-menu{
  list-style:none;margin:0;padding:.6rem 0;min-width:15rem;
  position:absolute;top:100%;left:-1rem;z-index:130;
  background:var(--ink);border:1px solid var(--line-strong);border-top:2px solid var(--gold);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
/* invisible bridge so the menu doesn't close while the pointer crosses the gap */
.nav__list > li.menu-item-has-children::before{content:"";position:absolute;left:0;right:0;top:100%;height:1rem}
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav__list > li.menu-item-has-children:hover > a::after,
.nav__list > li.menu-item-has-children:focus-within > a::after{transform:translateY(-.05em) rotate(225deg)}
.nav__list .sub-menu li{display:block}
.nav__list .sub-menu a{display:block;padding:.55rem 1.2rem;font-size:.95rem;white-space:nowrap}
.nav__list .sub-menu a:hover,.nav__list .sub-menu a:focus{background:var(--ink-3)}
/* highlight the parent while one of its sub-pages is open */
.nav__list > li.current-menu-ancestor > a,
.nav__list > li.current-menu-parent > a{color:var(--gold)}

.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:flex-end;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;
}
/* (the short gold line that used to sit before the label was removed at the client's request) */
.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}}

/* ---- homepage slider: ONE type system shared by all three slides ----
   Large text  = slide 3's headline style, in gold  (slide 1 + 2 headlines too)
   Small text  = slide 3's supporting-text style    (slide 1 statement, slide 2 + 3 subtext)
   Change a size/colour here and all three slides change together. */
.seq .hero h1,
.seq .reach__line,
.seq .mech__line,
.page-hero h1{
  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;color:var(--gold);margin:0;
}
.seq .hero h1 .ital,
.seq .reach__line .ital,
.seq .mech__line .ital{font-style:normal;font-weight:300;color:inherit}
.seq .hero__statement,
.seq .reach__sub,
.seq .mech__sub,
.page-hero .page-hero__intro p{
  font-family:'Instrument Sans',system-ui,sans-serif;font-weight:400;letter-spacing:normal;
  font-size:clamp(1.02rem,.9rem + .55vw,1.32rem);line-height:1.62;color:var(--text);max-width:56ch;
  margin:1.4rem 0 0;
}
.seq .hero__statement{margin-bottom:2.4rem}

/* all three slides: the large headline starts at exactly the same spot (same
   distance from the top, same left edge). Slides 2 and 3 have a small label
   above the headline; it always reserves its space (even when empty), and slide 1
   leaves the same space, so the headlines line up. */
.seq .hero,
.seq .reach,
.seq .mech,
.page-hero{
  display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;
  padding-top:clamp(6.5rem,19vh,11rem);padding-bottom:4.5rem;
}
.seq .reach__overlay,
.seq .mech__overlay{padding-block:0}
.seq .reach__eye,
.seq .mech__eye,
.page-hero__eye{min-height:1.3rem;line-height:1.3rem;margin-bottom:1.4rem}
.seq .reach__eye:empty,
.seq .mech__eye:empty{visibility:hidden}
.seq .hero h1{margin-top:2.7rem}
.page-hero h1{margin:0;max-width:none}
/* two large sentences: a little more air between them */
.seq .seq-line{display:block}
.seq .seq-line + .seq-line{margin-top:.4em}
.seq .hero h1,
.seq .reach__line,
.seq .mech__line,
.page-hero h1{text-wrap:balance}
.seq .hero__statement,
.seq .reach__sub,
.seq .mech__sub{text-wrap:pretty}

/* ---- inner-page first row (Why Insight Republic?, Our areas of engagement,
   Speaking, Training …): same look as the homepage slides, but static.
   Title = "large" text, opening paragraph(s) = "small" text. An optional
   background image comes from the page's Featured Image. ---- */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;
  background:var(--ink);border-bottom:1px solid var(--line);
}
.page-hero__inner{position:relative;z-index:2;width:100%}
.page-hero__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:block;
}
.page-hero__eye:empty{visibility:hidden}
.page-hero__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);
}
.page-hero.has-image::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%);
}
/* opening paragraphs: all in the "small" style (a tagline keeps its italics) */
/* inner pages use the full content width (only the homepage slider keeps the narrower measure) */
.page-hero .page-hero__intro p{margin:1.4rem 0 0;max-width:none}
.page-hero .page-hero__intro p:first-child{margin-top:1.4rem}
.page-hero .page-hero__intro p.is-style-tagline{font-style:italic}
.page-hero .page-hero__intro p strong{font-weight:600}
/* the content row that follows */
.page-hero + .route-page{padding-top:clamp(2.5rem,5vw,4rem)}
.page-hero + .route-page:has(> .entry-content > .wp-block-group:first-child:is(.is-style-paper-band,.is-style-ink-band,.is-style-contact-band)){padding-top:0}
.page-hero + .route-page > .entry-content > .wp-block-group:first-child:is(.is-style-paper-band,.is-style-ink-band,.is-style-contact-band){margin-top:0}
.page-hero + .route-page > .entry-content > :is(h2,h3):first-child{margin-top:0}
.seq .hero__statement .ital,
.seq .reach__sub .ital,
.seq .mech__sub .ital{font-style:normal;font-weight:inherit;color:inherit}

/* ---------- 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}
  /* phone menu: sub-items are always shown, indented under their parent */
  .nav__list > li.menu-item-has-children > a::after,
  .nav__list > li.menu-item-has-children::before{display:none}
  .nav__list .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    background:none;border:0;border-left:1px solid var(--line-strong);
    margin:.9rem 0 0 .2rem;padding:0 0 0 1.1rem;display:flex;flex-direction:column;gap:.9rem;
  }
  .nav__list .sub-menu a{font-size:1.1rem;padding:0;color:var(--text-dim);white-space:normal}
  .nav__list .sub-menu a:hover,.nav__list .sub-menu a:focus{background:none}
  .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 ---------- */
/* (no top padding on body.page — the inner-page spacing lives on .route-page below) */
.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:var(--measure)}
.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: the intro stops being a full-screen overlay and becomes an
   ordinary full-height banner at the top of the page. It keeps rotating
   while it's on screen, so scrolling back up always shows it again. (Scoped
   to seq-done, so before the script runs — or with JavaScript off — the
   intro still renders as a plain stacked fallback.) */
html.seq-done #seq{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden}
html.seq-done .seq > section{
  position:absolute;inset:0;min-height:0;opacity:0;pointer-events:none;
  transition:opacity .9s ease;
}
html.seq-done .seq > section.is-active{opacity:1;pointer-events:auto}
html.seq-done .seq__nav{
  display:flex;gap:.6rem;position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(1rem,4vh,2.2rem);z-index:5;
}
html.seq-done .seq__pause{
  display:inline-flex;align-items:center;gap:.5rem;position:absolute;z-index:5;
  right:clamp(1rem,4vw,2.2rem);bottom:clamp(1rem,4vh,2.2rem);
  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;
}
html.seq-done .seq__pause:hover,html.seq-done .seq__pause[aria-pressed="true"]{color:var(--gold)}

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}
  html.seq-done #seq{height:auto;min-height:0;overflow:visible}
  html.seq-done .seq > section{position:relative;opacity:1;pointer-events:auto}
  html.seq-done .seq__nav,html.seq-done .seq__pause{display:none}
}

/* ---------- 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{
  /* = height of the fixed menu bar (logo + its padding) + the same gap that
     sits between the page title and the line beneath it, so the space above
     and below the title looks even. */
  padding-top:calc(clamp(150px,20vw,196px)*.3317 + 2.2rem + 1px + 1.3rem + clamp(2.5rem,5vw,4rem));
}


/* ============================================================
   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);
}

/* equal-height cards (fixes a shorter card leaving a gap strip) */
.wp-block-columns.is-style-card-grid{align-items:stretch!important}

/* LIGHT card grid (alternative to the dark one): cream tiles with a gold
   top edge, separated by a gap, on the navy page. */
.wp-block-columns.is-style-card-grid-light{
  gap:clamp(.9rem,1.6vw,1.4rem)!important;margin-bottom:clamp(.9rem,1.6vw,1.4rem);
  align-items:stretch!important;
}
.wp-block-columns.is-style-card-grid-light > .wp-block-column{
  background:var(--paper);border-top:3px solid var(--gold);
  padding:clamp(1.6rem,3vw,2.6rem);min-height:250px;margin:0;position:relative;
  display:flex;flex-direction:column;gap:.55rem;
  transition:background .25s ease,transform .25s ease;
}
.wp-block-columns.is-style-card-grid-light > .wp-block-column:hover{background:#fbf7ea;transform:translateY(-3px)}
.wp-block-columns.is-style-card-grid-light > .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-deep);text-transform:uppercase;display:block;margin:0 0 .2rem;
}
.wp-block-columns.is-style-card-grid-light > .wp-block-column h3{
  font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);color:var(--paper-ink);margin:0 0 .15rem;
}
.wp-block-columns.is-style-card-grid-light > .wp-block-column p{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.9rem;line-height:1.5;color:#4b4c70;margin:0;
}
.wp-block-columns.is-style-card-grid-light > .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-deep);
}
.wp-block-columns.is-style-card-grid-light > .wp-block-column .wp-block-buttons{margin-top:.4rem}
.wp-block-columns.is-style-card-grid-light > .wp-block-column .wp-block-button.is-style-textlink{position:relative;z-index:1}
.wp-block-columns.is-style-card-grid-light > .wp-block-column .wp-block-button.is-style-textlink .wp-block-button__link{
  color:var(--paper-ink);border-color:rgba(22,23,47,.35);
}
.wp-block-columns.is-style-card-grid-light > .wp-block-column .wp-block-button.is-style-textlink .wp-block-button__link:hover{
  color:var(--gold-deep);border-color:var(--gold-deep);
}
.wp-block-columns.is-style-card-grid-light > .wp-block-column .wp-block-button.is-style-textlink .wp-block-button__link::after{
  content:"";position:absolute;inset:0;
}

/* Line icons (pasted as a Custom HTML block containing an <svg class="ir-icon">).
   Colour follows the surface: gold on navy, deep gold on cream. */
svg.ir-icon{display:block;width:2.9rem;height:2.9rem;color:var(--gold);margin:0 0 .5rem;flex:none}
.wp-block-columns.is-style-card-grid-light svg.ir-icon,
.wp-block-group.is-style-paper-band svg.ir-icon{color:var(--gold-deep)}
.wp-block-group.is-style-paper-band svg.ir-icon,
.wp-block-group.is-style-ink-band svg.ir-icon{width:2.4rem;height:2.4rem;margin-bottom:.9rem}

/* 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:var(--measure) 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:var(--measure)}
.route-page .entry-content h3{font-size:clamp(1.3rem,1.05rem + 1vw,1.7rem);margin:1.8rem 0 .8rem;max-width:var(--measure)}
/* 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:var(--measure)}
.route-page .entry-content > ul,
.route-page .entry-content > ol{margin-bottom:1.1rem;max-width:var(--measure)}
/* 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:var(--measure)}
/* engagement pages (any with a card grid): intro runs the full content width */
.route-page .entry-content:has(.is-style-card-grid,.is-style-card-grid-light) > p.is-style-lead{max-width:none;padding-top:10px}
.route-page .entry-content > .is-style-tagline{max-width:24ch}
/* Block style "Full width" (Paragraph / Heading / List → Styles): lets one
   block run the whole content width instead of the shared text width. */
.route-page .entry-content :is(p,h2,h3,ul,ol).is-style-full-width{max-width:none!important}

/* 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);
}

/* ============================================================
   12.1 "Why Insight Republic" page sections
   (from the introduction deck: problem ladder, compare cards,
   numbered steps, method cards, callout, statement). All keyed
   off the parent Columns block's style class — never a class on
   an individual Column — for the reason given in section 12.0.
   ============================================================ */

/* paragraph styles */
.entry-content p.is-style-callout{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,1rem + .8vw,1.55rem);line-height:1.4;color:var(--gold-2);
  background:var(--ink-2);border-left:3px solid var(--gold);
  padding:1.2rem 1.6rem;margin:1.8rem 0;max-width:none;
}
.entry-content p.is-style-statement{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.5;color:var(--text);
  max-width:56ch;margin:2rem 0 1rem;
}

/* shared kicker for the new column layouts */
.wp-block-columns.is-style-problem-ladder > .wp-block-column .is-style-feature-kicker,
.wp-block-columns.is-style-compare > .wp-block-column .is-style-feature-kicker,
.wp-block-columns.is-style-method-cards > .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;
}

/* --- problem ladder: three stacked rows, circle fills up --- */
.wp-block-columns.is-style-problem-ladder{flex-direction:column;flex-wrap:nowrap;gap:0!important;margin:1.8rem 0 .5rem}
.wp-block-columns.is-style-problem-ladder > .wp-block-column{
  flex-basis:auto!important;width:100%;margin:0;padding:1.1rem 0;
  display:grid;grid-template-columns:3rem 1fr;column-gap:1.4rem;align-items:center;
  border-bottom:1px solid var(--line);
}
.wp-block-columns.is-style-problem-ladder > .wp-block-column::before{
  content:"";grid-row:1 / span 2;width:2.4rem;height:2.4rem;border-radius:50%;
  border:1.5px solid var(--gold);box-sizing:border-box;
}
.wp-block-columns.is-style-problem-ladder > .wp-block-column p{
  grid-column:2;margin:0;font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:clamp(1.02rem,.92rem + .5vw,1.28rem);line-height:1.45;color:var(--text);
}
.wp-block-columns.is-style-problem-ladder > .wp-block-column p.is-style-feature-kicker{font-size:.72rem;color:var(--gold)}

/* --- compare: two contrasting cards --- */
.wp-block-columns.is-style-compare{gap:0!important;margin:1.8rem 0 .5rem;align-items:stretch}
.wp-block-columns.is-style-compare > .wp-block-column{
  margin:0;padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1rem;justify-content:center;
}
.wp-block-columns.is-style-compare > .wp-block-column:nth-child(1){background:var(--paper);color:var(--paper-ink)}
.wp-block-columns.is-style-compare > .wp-block-column:nth-child(1) .is-style-feature-kicker{color:#5a5b7e}
.wp-block-columns.is-style-compare > .wp-block-column:nth-child(2){background:var(--ink-3);border:1px solid var(--gold)}
.wp-block-columns.is-style-compare > .wp-block-column p:not(.is-style-feature-kicker){
  margin:0;font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(1.2rem,1rem + 1vw,1.7rem);line-height:1.35;
}
.wp-block-columns.is-style-compare > .wp-block-column:nth-child(1) p:not(.is-style-feature-kicker){color:#5a5b7e}
.wp-block-columns.is-style-compare > .wp-block-column:nth-child(2) p:not(.is-style-feature-kicker){color:var(--text)}

/* --- numbered steps: gold circles joined by a dashed line --- */
.wp-block-columns.is-style-steps{
  position:relative;counter-reset:irstep;gap:clamp(1rem,2.5vw,2rem)!important;margin:2.4rem 0 1rem;
}
.wp-block-columns.is-style-steps::before{
  content:"";position:absolute;top:1.6rem;left:12.5%;right:12.5%;
  border-top:2px dashed var(--gold-deep);z-index:0;
}
.wp-block-columns.is-style-steps > .wp-block-column{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.7rem;margin:0;counter-increment:irstep;
}
.wp-block-columns.is-style-steps > .wp-block-column::before{
  content:counter(irstep);width:3.2rem;height:3.2rem;border-radius:50%;background:var(--gold);color:var(--ink);
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:.6rem;
}
.wp-block-columns.is-style-steps > .wp-block-column h3{
  font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(1.1rem,.95rem + .6vw,1.35rem);
  color:var(--gold);margin:0;max-width:none;
}
.wp-block-columns.is-style-steps > .wp-block-column p{
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.9rem;line-height:1.55;color:var(--text-dim);margin:0;
}
@media (max-width:781px){
  .wp-block-columns.is-style-steps::before{display:none}
}

/* --- method cards: tile grid with a diamond kicker --- */
.wp-block-columns.is-style-method-cards{
  gap:1px!important;background:var(--line);border:1px solid var(--line);margin-bottom:1px;
}
.wp-block-columns.is-style-method-cards > .wp-block-column{
  background:var(--ink);padding:clamp(1.3rem,2.3vw,1.9rem);display:flex;flex-direction:column;
  gap:.55rem;min-height:170px;margin:0;transition:background .25s ease;
}
.wp-block-columns.is-style-method-cards > .wp-block-column:hover{background:var(--ink-3)}
.wp-block-columns.is-style-method-cards > .wp-block-column .is-style-feature-kicker::before{
  content:"";display:inline-block;width:.5rem;height:.5rem;background:var(--gold);
  transform:rotate(45deg);margin-right:.6rem;vertical-align:.08em;
}
.wp-block-columns.is-style-method-cards > .wp-block-column h3{
  font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.15rem,.9rem + .8vw,1.5rem);color:var(--text);margin:0 0 .15rem;max-width:none;
}
.wp-block-columns.is-style-method-cards > .wp-block-column p:not(.is-style-feature-kicker){
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:.9rem;line-height:1.55;color:var(--text-dim);margin:0;
}

/* spacing between the page's sections: an eyebrow that opens a new
   section (anything but the very first block) gets breathing room above */
.route-page .entry-content > p.is-style-eyebrow:not(:first-child){margin-top:clamp(3.2rem,6vw,5rem)}
@media (max-width:781px){
  .wp-block-columns.is-style-method-cards > .wp-block-column{min-height:0}
}

/* ============================================================
   12.2 Light band (full-width cream section) — used for slides
   2, 3 and 5 of the "Why Insight Republic" page. Same full-bleed
   breakout as the contact band; inner padding lines the content
   up with the page's normal text column. Everything inside is
   re-coloured for a light background.
   ============================================================ */
.wp-block-group.is-style-paper-band{
  background:var(--paper);color:var(--paper-ink);
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  box-sizing:border-box;margin-top:clamp(3rem,6vw,5rem);
  padding-block:clamp(2.6rem,5vw,4.2rem);
  padding-inline:max(var(--gutter),calc(50vw - var(--wrap)/2 + var(--gutter)));
}
.wp-block-group.is-style-paper-band + .wp-block-group.is-style-paper-band{
  margin-top:0;border-top:1px solid rgba(22,23,47,.12);
}
.wp-block-group.is-style-paper-band .is-style-eyebrow{color:var(--gold-deep);margin-top:0}
.wp-block-group.is-style-paper-band .is-style-eyebrow::before{background:var(--gold-deep)}
.wp-block-group.is-style-paper-band h2.wp-block-heading{color:var(--paper-ink);margin-top:1.2rem}
.wp-block-group.is-style-paper-band > p:not(.is-style-eyebrow):not(.is-style-callout):not(.is-style-statement),
.wp-block-group.is-style-paper-band > .wp-block-group__inner-container > p:not(.is-style-eyebrow):not(.is-style-callout):not(.is-style-statement){
  color:#4a4a63;line-height:1.6;max-width:var(--measure);margin-bottom:1.1rem;
}
.wp-block-group.is-style-paper-band p.is-style-statement{color:var(--paper-ink)}
/* callout stays a navy bar, as in the deck */
.wp-block-group.is-style-paper-band p.is-style-callout{background:var(--ink);color:var(--gold-2)}

/* problem ladder on cream */
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-problem-ladder > .wp-block-column{border-bottom-color:rgba(22,23,47,.15)}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-problem-ladder > .wp-block-column::before{border-color:var(--gold-deep);background:#fff}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-problem-ladder > .wp-block-column p{color:var(--paper-ink)}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-problem-ladder > .wp-block-column p.is-style-feature-kicker{color:var(--gold-deep)}

/* compare cards on cream: white card vs navy card */
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-compare > .wp-block-column:nth-child(1){background:#fff;border:1px solid #e2dcc8;border-right:0}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-compare > .wp-block-column:nth-child(2){background:var(--ink);border:1px solid var(--ink)}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-compare > .wp-block-column:nth-child(2) p:not(.is-style-feature-kicker){color:var(--paper)}

/* method cards on cream: white tiles */
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-method-cards{background:#e2dcc8;border-color:#e2dcc8}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-method-cards > .wp-block-column{background:#fff}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-method-cards > .wp-block-column:hover{background:#fbf8ee}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-method-cards > .wp-block-column .is-style-feature-kicker{color:var(--gold-deep)}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-method-cards > .wp-block-column .is-style-feature-kicker::before{background:var(--gold)}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-method-cards > .wp-block-column h3{color:var(--paper-ink)}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-method-cards > .wp-block-column p:not(.is-style-feature-kicker){color:#5a5b7e}

/* Clickable cards: add a link to the card's title in the block editor
   (select the title text → link icon). The whole card then becomes the
   click target, the same way as the engagement cards. */
.wp-block-columns.is-style-method-cards > .wp-block-column{position:relative}
.wp-block-columns.is-style-method-cards > .wp-block-column h3 a{color:inherit;text-decoration:none}
.wp-block-columns.is-style-method-cards > .wp-block-column h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.wp-block-columns.is-style-method-cards > .wp-block-column:has(h3 a){cursor:pointer}
.wp-block-columns.is-style-method-cards > .wp-block-column h3 a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
@media (max-width:781px){
  .wp-block-group.is-style-paper-band .wp-block-columns.is-style-compare > .wp-block-column:nth-child(1){border-right:1px solid #e2dcc8;border-bottom:0}
}

/* heading style: Gold (e.g. the opening line of the Why Insight Republic page) */
.route-page .entry-content h2.is-style-gold,
.route-page .entry-content h3.is-style-gold{color:var(--gold)}

/* problem ladder: all three circles identical (size and style of the first).
   Circles share one 3.4rem column so the text stays aligned. */
.wp-block-columns.is-style-problem-ladder > .wp-block-column{grid-template-columns:3.4rem 1fr}
.wp-block-columns.is-style-problem-ladder > .wp-block-column::before{justify-self:start;align-self:center}
.wp-block-columns.is-style-problem-ladder > .wp-block-column::before{width:1.9rem;height:1.9rem}

/* "Why Insight Republic" page (/method/): no breadcrumb and no small
   eyebrow above the title, and a tighter gap beneath the menu. */
body.ir-page-method .crumb{display:none}

/* a cream section directly followed by the closing call-to-action band:
   keep only a thin navy strip between them instead of the full gap */
.wp-block-group.is-style-paper-band + .wp-block-group.is-style-contact-band{margin-top:clamp(.75rem,1.5vw,1.25rem)}

/* ============================================================
   12.3 "Our areas of engagement" page: alternating dark / light
   full-width rows, each with body text on the left and a
   "Who's there / Shape / You leave with" panel on the right.
   Dark rows use the "Dark band" group style, light rows use the
   existing "Light band" style (12.2).
   ============================================================ */
.wp-block-group.is-style-ink-band{
  background:var(--ink);color:var(--text);
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  box-sizing:border-box;margin-top:0;
  padding-block:clamp(2.6rem,5vw,4.2rem);
  padding-inline:max(var(--gutter),calc(50vw - var(--wrap)/2 + var(--gutter)));
}
/* rows that touch each other: no gap, so the colours simply alternate */
.wp-block-group.is-style-ink-band + .wp-block-group.is-style-paper-band,
.wp-block-group.is-style-paper-band + .wp-block-group.is-style-ink-band{margin-top:0;border-top:0}
.wp-block-group.is-style-ink-band .is-style-eyebrow{margin-top:0}
.wp-block-group.is-style-ink-band h2.wp-block-heading{margin-top:1.2rem}
.wp-block-group.is-style-ink-band > p:not(.is-style-eyebrow):not(.is-style-tagline),
.wp-block-group.is-style-ink-band > .wp-block-group__inner-container > p:not(.is-style-eyebrow):not(.is-style-tagline){
  color:var(--text-dim);line-height:1.6;max-width:var(--measure);margin-bottom:1.1rem;
}

/* the small italic line under each row's title */
.wp-block-group.is-style-ink-band p.is-style-tagline,
.wp-block-group.is-style-paper-band p.is-style-tagline{
  max-width:none;font-size:clamp(1.05rem,.9rem + .6vw,1.3rem);margin:.2rem 0 0;
}
.wp-block-group.is-style-paper-band p.is-style-tagline{color:var(--gold-deep)}

/* text + panel */
.wp-block-columns.is-style-engagement{gap:clamp(1.5rem,4vw,3.5rem)!important;margin:1.8rem 0 0;align-items:stretch}
@media (min-width:782px){
  .wp-block-columns.is-style-engagement > .wp-block-column:nth-child(1){flex:1.35 1 0}
  .wp-block-columns.is-style-engagement > .wp-block-column:nth-child(2){flex:1 1 0}
}
.wp-block-columns.is-style-engagement > .wp-block-column:nth-child(1){
  display:flex;flex-direction:column;justify-content:flex-start;gap:1rem;margin:0;
}
.wp-block-columns.is-style-engagement > .wp-block-column:nth-child(1) p:not(.is-style-tagline){
  margin:0;font-size:1rem;line-height:1.65;color:var(--text-dim);max-width:none;
}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-engagement > .wp-block-column:nth-child(1) p:not(.is-style-tagline){color:#4a4a63}
.wp-block-columns.is-style-engagement > .wp-block-column:nth-child(1) p.is-style-tagline{margin:0 0 .3rem;max-width:none}
.wp-block-columns.is-style-engagement > .wp-block-column:nth-child(2){
  margin:0;padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:.35rem;
  background:var(--ink-3);border-top:2px solid var(--gold);
}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-engagement > .wp-block-column:nth-child(2){background:var(--ink)}
.wp-block-columns.is-style-engagement > .wp-block-column:nth-child(2) p{margin:0 0 .9rem;font-size:.95rem;line-height:1.55;color:var(--text);max-width:none}
.wp-block-columns.is-style-engagement > .wp-block-column:nth-child(2) p:last-child{margin-bottom:0}
.wp-block-columns.is-style-engagement > .wp-block-column:nth-child(2) p.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;margin:0 0 .15rem;
}

/* a dark row directly followed by the closing call-to-action band: no navy gap in between */
.wp-block-group.is-style-ink-band + .wp-block-group.is-style-contact-band{margin-top:0}

/* jump links (e.g. the cards on "Our areas of engagement"): stop the target row
   from sliding underneath the fixed menu bar */
.wp-block-group[id]{scroll-margin-top:4rem}

/* --- two equal text columns (block style "Two text columns") --- */
.wp-block-columns.is-style-text-columns{display:flex;flex-wrap:nowrap;gap:clamp(1.5rem,4vw,3.5rem)!important;margin:1.4rem 0 0}
.wp-block-columns.is-style-text-columns > .wp-block-column{flex:1 1 0!important;min-width:0;margin:0}
.wp-block-columns.is-style-text-columns > .wp-block-column > p{
  max-width:none;margin:0 0 1.1rem;font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:1.05rem;line-height:1.6;color:var(--text-dim);font-style:normal;font-weight:400;
}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-text-columns > .wp-block-column > p{color:#4a4a63}
@media(max-width:781px){.wp-block-columns.is-style-text-columns{flex-direction:column}}
.wp-block-group.is-style-paper-band > h2.wp-block-heading:first-child,
.wp-block-group.is-style-ink-band > h2.wp-block-heading:first-child{margin-top:0}

/* numbered steps on a cream band */
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-steps > .wp-block-column h3{color:var(--paper-ink)}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-steps > .wp-block-column p{color:#4a4a63}

/* icon + section title on one row (Group block style "Title row") */
.wp-block-group.is-style-title-row,
.wp-block-group.is-style-title-row > .wp-block-group__inner-container{
  display:flex;flex-direction:row;align-items:center;gap:clamp(.9rem,2.4vw,1.6rem);margin:0 0 .6rem;
}
.wp-block-group.is-style-title-row svg.ir-icon,
.wp-block-group.is-style-paper-band .wp-block-group.is-style-title-row svg.ir-icon,
.wp-block-group.is-style-ink-band .wp-block-group.is-style-title-row svg.ir-icon{
  width:clamp(2.6rem,5vw,3.6rem);height:clamp(2.6rem,5vw,3.6rem);margin:0;flex:none;
}
.wp-block-group.is-style-title-row > h2.wp-block-heading,
.wp-block-group.is-style-paper-band .wp-block-group.is-style-title-row > h2.wp-block-heading,
.wp-block-group.is-style-ink-band .wp-block-group.is-style-title-row > h2.wp-block-heading{margin:0;max-width:none}

/* legal pages (Disclaimer, Privacy Policy): compact first row, no full-screen height */
body.ir-page-disclaimer .page-hero:not(.has-image),
body.ir-page-privacy-policy .page-hero:not(.has-image),
body.ir-page-privacy .page-hero:not(.has-image){min-height:0;padding-bottom:clamp(2rem,4vw,3rem)}

/* footer photo (Customizer → Footer → Footer photo) */
.footer__grid--photo{grid-template-columns:1.4fr 1fr 1fr minmax(0,.9fr);align-items:start}
.footer__photo img{display:block;width:100%;max-width:260px;height:auto;margin-left:auto}
@media(max-width:960px){
  .footer__grid--photo{grid-template-columns:1fr}
  .footer__photo img{margin-left:0;max-width:240px}
}

/* photo beside text (block style "Photo + text columns") */
.wp-block-columns.is-style-about-columns{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:clamp(1.5rem,4vw,3.5rem)!important;margin:0}
.wp-block-columns.is-style-about-columns > .wp-block-column{min-width:0;margin:0}
.wp-block-columns.is-style-about-columns > .wp-block-column:empty{display:none}
.wp-block-columns.is-style-about-columns figure.wp-block-image{margin:0}
.wp-block-columns.is-style-about-columns figure.wp-block-image:not(:has(img)){display:none}
.wp-block-columns.is-style-about-columns figure.wp-block-image img{display:block;width:100%;height:auto}
.wp-block-columns.is-style-about-columns > .wp-block-column > p{max-width:none;margin:0 0 1.1rem}
@media(max-width:781px){
  .wp-block-columns.is-style-about-columns{flex-direction:column}
  .wp-block-columns.is-style-about-columns > .wp-block-column{flex-basis:auto!important;width:100%}
  .wp-block-columns.is-style-about-columns figure.wp-block-image img{max-width:320px}
}
.wp-block-group.is-style-paper-band .wp-block-columns.is-style-about-columns > .wp-block-column > p{color:#4a4a63;font-size:1.05rem;line-height:1.6}
.wp-block-group.is-style-ink-band p.is-style-statement{color:var(--text)}