/* ==========================================================================
   KWALL Imagination · design system
   Unscoped on purpose — .kw-* class names only exist in our patterns,
   and .is-style-kwall-* variations only render when those styles are
   registered. Targeting `body` directly here for global tokens + type.
   ========================================================================== */

body{
  --paper:#FFFFFF;
  --paper-cream:#E2D8BA;
  --paper-mist:#E5F6FA;
  --bg:#F0EBDA;
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.16);
  --ink:#333333;
  --ink-2:#1A1A1A;
  --ink-soft:#4D4D4D;
  --ink-mute:#5C5C5C;
  --ocean:#0A6E96;
  --ocean-2:#1F9DC1;
  --ocean-soft:#59C8DE;
  --ocean-mist:#EAF8FC;
  --ochre:#FFA700;
  --ochre-2:#FEC657;
  --ochre-deep:#D14600;
  --ochre-wash:#FFF4DC;
  --coral:#F38630;
  --coral-2:#F7A55F;
  --coral-deep:#D62303;
  --coral-wash:#FDF0E4;   /* toned back: warm-neutral, not candy orange */
  --mint:#459C96;
  --mint-2:#A7DBD8;
  --mint-wash:#ECF8F7;    /* toned back: barely-there neutral, not green */
  --sans:'Avenir','Nunito Sans',Helvetica,Arial,system-ui,sans-serif;
  --serif:'IBM Plex Serif',Georgia,serif;
  --hand:var(--serif);   /* toned back: retired Caveat handwriting → serif italic */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow:0 24px 50px -20px rgba(0,0,0,.16);
  --shadow-sm:0 10px 26px -10px rgba(0,0,0,.14);
  --shadow-xl:0 50px 100px -40px rgba(0,0,0,.22);
  --shadow-tilt:8px 12px 30px -10px rgba(0,0,0,.18);
}

body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);line-height:1.55;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* BRAND POINT PATTERN — subtle dot texture per the KWALL brand guide
   ("lower contrast for more subtle texturing"). Replaces the page-wide
   film grain. Applied to two key moments: the hero (aqua points on light,
   fading out downward) and the final CTA band (soft points on charcoal). */
.kw-hero{position:relative}
.kw-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(10,110,150,.12) 1.5px,transparent 1.6px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);
}
.kw-final{
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1.5px,transparent 1.6px);
  background-size:24px 24px;
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;scroll-behavior:auto!important}
}

/* ============ SIGNATURE SPARK ============ */
.kw-spark{
  display:inline-block;width:1em;height:1em;position:relative;flex-shrink:0;vertical-align:-.18em;
}
.kw-spark::before,
.kw-spark::after,
.kw-spark > i::before,
.kw-spark > i::after{
  content:'';position:absolute;top:50%;left:50%;width:.32em;height:1em;border-radius:.16em;transform-origin:center;
}
.kw-spark::before{background:var(--ocean);transform:translate(-50%,-50%) rotate(0deg)}
.kw-spark::after{background:var(--ochre);transform:translate(-50%,-50%) rotate(45deg)}
.kw-spark > i{position:absolute;inset:0;display:block}
.kw-spark > i::before{background:var(--coral);transform:translate(-50%,-50%) rotate(90deg)}
.kw-spark > i::after{background:var(--mint);transform:translate(-50%,-50%) rotate(135deg)}
.kw-spark.is-spin{animation:kw-spark-spin 8s linear infinite}
@keyframes kw-spark-spin{to{transform:rotate(360deg)}}

/* ============ BUTTON STYLE VARIATIONS (register_block_style) ============ */
.wp-block-button.is-style-kwall-ink .wp-block-button__link,
.wp-block-button.is-style-kwall-coral .wp-block-button__link,
.wp-block-button.is-style-kwall-ochre .wp-block-button__link,
.wp-block-button.is-style-kwall-ghost .wp-block-button__link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1rem 1.75rem;border-radius:99px;font-weight:500;font-size:.96rem;
  font-family:var(--sans);transition:all .25s cubic-bezier(.2,.8,.2,1);
  border:1.5px solid transparent;text-decoration:none;letter-spacing:-.005em;
}
.wp-block-button.is-style-kwall-ink .wp-block-button__link{background:var(--ink);color:#fff;box-shadow:0 6px 20px -6px rgba(0,0,0,.4)}
.wp-block-button.is-style-kwall-ink .wp-block-button__link:hover{background:var(--coral);transform:translateY(-2px);box-shadow:0 12px 30px -6px rgba(243,134,48,.5)}
.wp-block-button.is-style-kwall-coral .wp-block-button__link{background:var(--coral-deep);color:#fff;box-shadow:0 6px 20px -6px rgba(243,134,48,.45)}
.wp-block-button.is-style-kwall-coral .wp-block-button__link:hover{filter:brightness(.93);transform:translateY(-2px)}
.wp-block-button.is-style-kwall-ochre .wp-block-button__link{background:var(--ochre);color:var(--ink);box-shadow:0 6px 20px -6px rgba(255,167,0,.5)}
.wp-block-button.is-style-kwall-ochre .wp-block-button__link:hover{background:var(--ochre-deep);color:#fff;transform:translateY(-2px)}
.wp-block-button.is-style-kwall-ghost .wp-block-button__link{background:transparent;color:var(--ink);border-color:var(--ink)}
.wp-block-button.is-style-kwall-ghost .wp-block-button__link:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}

/* arrow at end of buttons (use Unicode → in label and we'll style nothing extra needed) */

/* ============ SECTION WRAPS (group block style variations) ============ */
.wp-block-group.is-style-kwall-section{
  padding-top:clamp(3rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,4.5rem);
  padding-left:clamp(1.25rem,2vw,2rem);padding-right:clamp(1.25rem,2vw,2rem);
  position:relative;
}
.wp-block-group.is-style-kwall-dark-section{
  background:var(--ink);color:#fff;
  padding-top:clamp(3rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,4.5rem);
  padding-left:clamp(1.25rem,2vw,2rem);padding-right:clamp(1.25rem,2vw,2rem);
  position:relative;overflow:hidden;
}
.wp-block-group.is-style-kwall-dark-section :where(h1,h2,h3,h4,h5,h6){color:#fff}
.wp-block-group.is-style-kwall-dark-section p{color:#D9D9D9}
.wp-block-group.is-style-kwall-ochre-band{
  background:var(--ochre);color:var(--ink);
  padding-top:clamp(3rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,4.5rem);
  padding-left:clamp(1.25rem,2vw,2rem);padding-right:clamp(1.25rem,2vw,2rem);
}
.wp-block-group.is-style-kwall-coral-bridge{
  background:var(--bg);
  padding:clamp(2.5rem,4vw,3.5rem) clamp(1.25rem,2vw,2rem);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}

/* ============ STICKY NOTE CARD ============ */
.wp-block-group.is-style-kwall-sticky-note{
  position:relative;background:var(--paper);border-radius:8px;
  padding:2.25rem 1.75rem 1.75rem;box-shadow:var(--shadow-tilt);
  border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.wp-block-group.is-style-kwall-sticky-note:hover,
.wp-block-group.is-style-kwall-sticky-note:focus-within{
  transform:rotate(0) translateY(-6px) scale(1.02);
  box-shadow:0 36px 70px -22px rgba(0,0,0,.25);z-index:10;
}
.wp-block-group.is-style-kwall-sticky-note::before{
  content:'';position:absolute;top:-12px;left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:90px;height:22px;background:var(--ochre-2);opacity:.7;
  border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 6px rgba(0,0,0,.05);
}
/* note variants — apply with additional CSS class kw-note-1 / 2 / 3 */
.wp-block-group.is-style-kwall-sticky-note.kw-note-1{transform:rotate(-2deg) translateY(.5rem)}
.wp-block-group.is-style-kwall-sticky-note.kw-note-1::before{background:var(--ocean-soft);opacity:.7}
.wp-block-group.is-style-kwall-sticky-note.kw-note-2{
  background:var(--paper-cream);transform:rotate(1deg) translateY(-1.5rem);z-index:2;
  border-color:rgba(255,167,0,.25);
}
.wp-block-group.is-style-kwall-sticky-note.kw-note-2::before{background:var(--coral);opacity:.95}
.wp-block-group.is-style-kwall-sticky-note.kw-note-2::after{
  content:'';position:absolute;top:-16px;right:28px;width:22px;height:38px;
  border:2.5px solid var(--ink-mute);border-radius:11px 11px 6px 6px;border-bottom:none;
  background:transparent;transform:rotate(8deg);
}
.wp-block-group.is-style-kwall-sticky-note.kw-note-3{transform:rotate(2deg) translateY(.25rem)}
.wp-block-group.is-style-kwall-sticky-note.kw-note-3::before{background:var(--mint);opacity:.65}

/* ============ TILE (BENTO) ============ */
.wp-block-group.is-style-kwall-tile{
  position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:24px;padding:2.25rem;background:var(--paper);
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;height:100%;
}
.wp-block-group.is-style-kwall-tile:hover{
  transform:translateY(-4px);box-shadow:var(--shadow);
}
/* tile color variants */
.wp-block-group.is-style-kwall-tile.kw-tile--ocean-mist{background:var(--ocean-mist)}
.wp-block-group.is-style-kwall-tile.kw-tile--ochre{background:var(--ochre-wash);color:var(--ink)}
.wp-block-group.is-style-kwall-tile.kw-tile--mint-wash{background:var(--mint-wash)}
.wp-block-group.is-style-kwall-tile.kw-tile--coral-wash{background:var(--coral-wash)}
.wp-block-group.is-style-kwall-tile.kw-tile--ocean{background:var(--ocean);color:#fff;border-color:transparent}
.wp-block-group.is-style-kwall-tile-quote{
  background:var(--ink);color:#fff;border-color:transparent;
  position:relative;overflow:hidden;border-radius:24px;padding:2.25rem;
  display:flex;flex-direction:column;height:100%;
}
.wp-block-group.is-style-kwall-tile-quote :where(h1,h2,h3,h4,h5,h6){color:#fff}
.wp-block-group.is-style-kwall-tile-quote p{color:#D9D9D9}

/* ============ PARAGRAPH STYLE VARIATIONS ============ */
.is-style-kwall-eyebrow{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);padding:0.25rem 0.75rem;border-radius:99px;
  margin-bottom:1.25rem;background:transparent;border:1px solid var(--line-strong);
  width:fit-content;
}
.is-style-kwall-eyebrow.kw-warm{color:var(--coral-deep);border-color:rgba(243,134,48,.3);background:var(--coral-wash)}
.is-style-kwall-eyebrow.kw-gold{color:var(--ochre-deep);border-color:rgba(180,128,28,.3);background:var(--ochre-wash)}
.is-style-kwall-eyebrow.kw-ocean{color:var(--ocean);border-color:rgba(10,110,150,.25);background:var(--ocean-mist)}
.is-style-kwall-eyebrow.kw-mint{color:var(--mint);border-color:rgba(69,156,150,.4);background:var(--mint-wash)}

.is-style-kwall-handnote{
  font-family:var(--hand);font-style:italic;font-size:1.3rem;line-height:1.2;
  color:var(--coral-deep);display:inline-block;
}

.is-style-kwall-meta{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute-aa);
}
.is-style-kwall-meta strong{color:var(--ink);font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:-.005em;text-transform:none}

/* ============ HEADING STYLE VARIATIONS ============ */
.is-style-kwall-marker em,
.is-style-kwall-serif-italic em{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-deep);
}
.is-style-kwall-marker .kw-marker{
  position:relative;display:inline-block;color:var(--ink);
}
.is-style-kwall-marker .kw-marker::before{
  content:'';position:absolute;left:-8px;right:-8px;top:.18em;bottom:.05em;
  background:var(--coral);z-index:-1;transform:rotate(-1.5deg) skew(-2deg);
  border-radius:6px;opacity:.85;
}
.kw-imagination{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-deep);letter-spacing:-.02em;display:inline-block;
}

/* ============ EDITORIAL PULLQUOTE ============ */
.wp-block-pullquote.is-style-kwall-editorial{
  border:0;padding:0;margin:2.5rem auto;
}
.wp-block-pullquote.is-style-kwall-editorial blockquote{
  font-family:var(--sans);font-weight:300;font-size:clamp(1.5rem,3vw,2.5rem);
  line-height:1.2;letter-spacing:-.025em;color:var(--ink);max-width:760px;
}
.wp-block-pullquote.is-style-kwall-editorial blockquote em{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--coral-deep);
}
.wp-block-pullquote.is-style-kwall-editorial cite{
  font-family:var(--sans);font-style:normal;font-size:.92rem;color:var(--ink-soft);
  display:block;margin-top:1.5rem;
}

/* ============ HERO BLOCK ============ */
.kw-hero{padding:2.5rem 1.25rem 3rem;text-align:center;overflow:hidden}
.kw-hero h1{font-weight:700;font-size:clamp(2.5rem,7vw,5.5rem);line-height:.95;letter-spacing:-.05em;color:var(--ink);max-width:1100px;margin:0 auto}
.kw-hero p.kw-lede{margin:1.5rem auto 0;font-size:clamp(1.1rem,1.35vw,1.28rem);line-height:1.5;color:var(--ink-soft);max-width:640px}
.kw-hero p.kw-lede strong{color:var(--ink);font-weight:600}

/* page hero — for non-homepage pages */
.kw-page-hero{padding:4rem 1.25rem 3rem;position:relative;overflow:hidden}
.kw-page-hero h1{font-weight:700;font-size:clamp(2.5rem,7vw,5.5rem);line-height:.96;letter-spacing:-.045em;color:var(--ink);max-width:900px}
.kw-page-hero p.kw-lede{margin-top:1.5rem;font-size:clamp(1.1rem,1.35vw,1.28rem);line-height:1.5;color:var(--ink-soft);max-width:680px}

/* ============ BRIDGE ============ */
.kw-bridge{
  background:var(--bg);padding:clamp(2.5rem,4vw,3.5rem) clamp(1.25rem,2vw,2rem);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.kw-bridge::before{
  content:'I';position:absolute;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:36vw;line-height:.75;color:transparent;-webkit-text-stroke:1.5px var(--coral-deep);
  opacity:.07;top:-10%;right:-3%;pointer-events:none;letter-spacing:-.05em;
}
.kw-bridge .kw-bridge-h{
  font-weight:700;font-size:clamp(2.5rem,6.5vw,5.5rem);line-height:.95;
  letter-spacing:-.045em;color:var(--ink);max-width:1000px;
}
.kw-bridge .kw-bridge-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--coral-deep)}
.kw-bridge .kw-bridge-h .kw-marker::before{background:var(--ochre)}

/* ============ TRUST MARQUEE ============ */
.kw-trust{padding:2.5rem 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.kw-trust-label{text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute-aa);margin-bottom:1.25rem;display:flex;align-items:center;justify-content:center;gap:0.5rem}
.kw-marquee{display:flex;overflow:hidden;gap:4rem;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.kw-marquee-track{display:flex;gap:4rem;animation:kw-marquee 42s linear infinite;flex-shrink:0;padding-right:4rem}
@keyframes kw-marquee{to{transform:translateX(-50%)}}
.kw-trust-logo{font-weight:600;font-size:1.05rem;color:var(--ink-soft);opacity:.55;letter-spacing:-.015em;flex-shrink:0;white-space:nowrap;transition:opacity .2s,color .2s}
.kw-trust-logo:hover,.kw-trust-logo:focus{opacity:1;color:var(--ocean)}
.kw-trust-logo small{font-size:.62rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-left:0.25rem}

/* ============ BENTO ============ */
.kw-bento{display:grid;gap:1rem;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto)}
.kw-bento .kw-tile-hero{grid-column:span 4;grid-row:span 2}
.kw-bento .kw-tile-tall{grid-column:span 2;grid-row:span 2}
.kw-bento .kw-tile-half{grid-column:span 3;grid-row:span 1}
.kw-bento .kw-tile-quote-wide{grid-column:span 4;grid-row:span 1}
.kw-bento .kw-tile-mini{grid-column:span 2;grid-row:span 1}

/* ============ AI DARK STACK ============ */
.kw-ai-stack{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;margin-top:2.5rem}
.kw-ai-stack .kw-ai-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:2rem 1.5rem;transition:all .35s cubic-bezier(.2,.8,.2,1);min-height:180px;display:flex;flex-direction:column}
.kw-ai-stack .kw-ai-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-4px)}
.kw-ai-stack .kw-ai-card h4{font-weight:600;font-size:1.25rem;line-height:1.15;letter-spacing:-.02em;margin-bottom:0.75rem;color:#fff}
.kw-ai-stack .kw-ai-card h4 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-2)}
.kw-ai-stack .kw-ai-card p{font-size:.92rem;line-height:1.6;color:#CFCFCF}
.kw-ai-stack .kw-ai-card .kw-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;color:var(--ochre-2);margin-bottom:1rem}
.kw-ai-stack .a1{grid-column:span 4}
.kw-ai-stack .a2{grid-column:span 4}
.kw-ai-stack .a3{grid-column:span 4}
.kw-ai-stack .a4{grid-column:6/-1;padding:2.5rem 2rem}
.kw-ai-stack .a4 h4{font-size:1.45rem}
.kw-ai-stack .a5{grid-column:1/6}

/* ============ STATS ============ */
.kw-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kw-stat{border-radius:20px;padding:2rem 1.5rem;border:1px solid var(--line)}
.kw-stat .kw-num{font-weight:700;font-size:clamp(2.5rem,5vw,3.5rem);line-height:.95;letter-spacing:-.04em;color:var(--ink)}
.kw-stat .kw-num em{font-family:var(--serif);font-style:italic;font-weight:400}
.kw-stat .kw-label{margin-top:0.75rem;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.kw-stat .kw-label strong{color:var(--ink);font-weight:600;display:block;margin-bottom:.15rem}
.kw-stat.kw-s1{background:var(--ink);color:#fff;border-color:transparent}
.kw-stat.kw-s1 .kw-num,.kw-stat.kw-s1 .kw-num em{color:var(--ochre-2)}
.kw-stat.kw-s1 .kw-label{color:#D9D9D9}
.kw-stat.kw-s1 .kw-label strong{color:#fff}
.kw-stat.kw-s2{background:var(--ochre-wash);border-color:rgba(255,167,0,.25)}
.kw-stat.kw-s2 .kw-num em{color:var(--ochre-deep)}
.kw-stat.kw-s3{background:var(--mint-wash);border-color:rgba(69,156,150,.3)}
.kw-stat.kw-s3 .kw-num em{color:var(--mint)}
.kw-stat.kw-s4{background:var(--coral-wash);border-color:rgba(243,134,48,.25)}
.kw-stat.kw-s4 .kw-num em{color:var(--coral-deep)}

/* ============ WORK CARDS ============ */
.kw-work-mag{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.kw-work-secondary{display:contents}
.kw-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.kw-work-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:all .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.kw-work-card:hover,.kw-work-card:focus-within{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.kw-work-thumb{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;color:#fff}
.kw-work-thumb.kw-t-ocean{aspect-ratio:16/10;background:var(--ocean)}
.kw-work-thumb.kw-t-mint{aspect-ratio:16/10;background:var(--mint)}
.kw-work-thumb.kw-t-coral{aspect-ratio:16/10;background:var(--coral-deep)}
.kw-work-thumb.kw-t-ochre{aspect-ratio:16/10;background:var(--ochre);color:var(--ink)}
.kw-work-thumb.kw-t-ink{aspect-ratio:16/10;background:var(--ink-2)}
.kw-work-thumb .kw-ghost{position:absolute;font-family:var(--serif);font-style:italic;font-weight:400;font-size:9rem;line-height:.7;top:-1.5rem;right:-1rem;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);pointer-events:none;z-index:1}
.kw-work-thumb.kw-t-mint .kw-ghost,
.kw-work-thumb.kw-t-coral .kw-ghost,
.kw-work-thumb.kw-t-ochre .kw-ghost,
.kw-work-thumb.kw-t-ink .kw-ghost{font-size:9rem;top:-1.5rem}
.kw-work-thumb.kw-t-ochre .kw-ghost{-webkit-text-stroke:1.5px rgba(0,0,0,.22)}
.kw-work-thumb > *{position:relative;z-index:2}
.kw-work-thumb .kw-badge{position:absolute;top:1rem;left:1rem;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--ink);padding:0.25rem 0.75rem;border-radius:99px;font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;z-index:3}
.kw-work-thumb .kw-mark{font-weight:700;font-size:clamp(1.5rem,3vw,2.5rem);color:inherit;letter-spacing:-.03em;z-index:3}
.kw-work-body{padding:1.75rem 1.5rem;flex:1;display:flex;flex-direction:column}
.kw-work-body h4{font-weight:600;font-size:1.25rem;line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin-bottom:.5rem}
.kw-work-card.kw-feat .kw-work-body h4{font-size:1.25rem;line-height:1.2}
.kw-work-body h4 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ocean)}
.kw-work-body p{color:var(--ink-soft);font-size:.92rem;line-height:1.55;flex:1}
.kw-work-meta{margin-top:1rem;padding-top:0.75rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--ink-mute-aa);letter-spacing:.06em;text-transform:uppercase}
.kw-work-meta .kw-read{color:var(--ocean);font-weight:500}

/* ============ TESTIMONIAL OCHRE BAND ============ */
.kw-testimonial{background:var(--ochre);color:var(--ink);position:relative}
.kw-testimonial-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,2vw,2rem);max-width:1240px;margin:0 auto}
.kw-testimonial blockquote{font-family:var(--sans);font-weight:300;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.2;letter-spacing:-.025em;color:var(--ink);max-width:680px}
.kw-testimonial blockquote em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--coral-deep)}
.kw-quote-mark{font-family:var(--serif);font-style:italic;font-weight:400;font-size:6rem;line-height:.5;color:var(--coral-deep);opacity:.6;display:block;margin-bottom:1rem}
.kw-author-block{display:flex;align-items:center;gap:1rem;background:var(--ink);color:#fff;padding:1.5rem 1.75rem;border-radius:18px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);max-width:380px;justify-self:start}
.kw-author-avatar{width:54px;height:54px;border-radius:50%;flex-shrink:0;background:var(--coral-deep);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:1.45rem;color:#fff;font-weight:400}
.kw-author-info strong{display:block;font-weight:600;font-size:1rem;letter-spacing:-.01em}
.kw-author-info span{font-size:.82rem;color:#D9D9D9;display:block;margin-top:.15rem}

/* ============ STUDIO NOTE CARD ============ */
.kw-studio-card{max-width:1100px;margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);border-radius:6px;padding:2.5rem 2.5rem 2.5rem 3.5rem;position:relative;display:grid;grid-template-columns:1fr 280px;gap:2.5rem;align-items:center;box-shadow:var(--shadow)}
.kw-studio-card::before{content:attr(data-label);position:absolute;top:0;left:24px;font-family:var(--hand);font-size:1.1rem;color:var(--coral-deep);transform:translateY(-65%) rotate(-2deg);background:var(--paper);padding:0 .5rem}
.kw-studio-card h3{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin-bottom:1.25rem}
.kw-studio-card .kw-sig{margin-top:1.5rem;display:flex;align-items:center;gap:1rem;font-size:.92rem;color:var(--ink-soft)}
.kw-studio-card .kw-sig strong{color:var(--ink);font-weight:600;display:block}
.kw-studio-card .kw-handsig{font-family:var(--hand);font-size:2rem;color:var(--coral-deep);transform:rotate(-4deg);line-height:.9}
.kw-studio-portrait{width:100%;aspect-ratio:1/1;background:var(--ocean);border-radius:8px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--ochre-2);font-family:var(--serif);font-style:italic;font-size:5rem;font-weight:400}

/* ============ BELIEFS (numbered, dark) ============ */
.kw-beliefs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid rgba(255,255,255,.12)}
.kw-belief{padding:2rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:60px 1fr;gap:1.25rem;align-items:start;transition:background .25s}
.kw-belief:hover{background:rgba(255,255,255,.03)}
.kw-belief:nth-child(2n-1){border-right:1px solid rgba(255,255,255,.12)}
.kw-belief .kw-n{font-family:var(--serif);font-style:italic;font-size:2.5rem;color:var(--ochre-2);line-height:.9;font-weight:400}
.kw-belief h4{font-weight:600;font-size:1.15rem;line-height:1.2;color:#fff;letter-spacing:-.015em;margin-bottom:0.5rem}
.kw-belief h4 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--coral-2)}
.kw-belief p{color:#CFCFCF;font-size:.92rem;line-height:1.55}

/* ============ TIMELINE ============ */
.kw-timeline{max-width:1100px;margin:0 auto;position:relative;padding:0 1rem}
.kw-timeline::before{content:'';position:absolute;top:38px;left:5%;right:5%;height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 14px)}
.kw-timeline-track{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;position:relative}
.kw-tl-step{display:flex;flex-direction:column;align-items:center;text-align:center}
.kw-tl-dot{width:18px;height:18px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);position:relative;z-index:2;margin-top:30px}
.kw-tl-step.is-active .kw-tl-dot{background:var(--coral);border-color:var(--coral)}
.kw-tl-step.is-now .kw-tl-dot{background:var(--ochre);border-color:var(--ochre);box-shadow:0 0 0 6px rgba(255,167,0,.25)}
.kw-tl-year{margin-top:0.75rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--ink);font-weight:600}
.kw-tl-step.is-now .kw-tl-year{color:var(--ochre-deep)}
.kw-tl-label{margin-top:.5rem;font-size:.88rem;line-height:1.35;color:var(--ink-soft);max-width:180px}
.kw-tl-label em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink)}

/* ============ TEAM GRID ============ */
.kw-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem}
.kw-team-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.75rem;transition:transform .25s,box-shadow .25s}
.kw-team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.kw-team-avatar{width:100%;aspect-ratio:1/1;border-radius:14px;background:var(--ocean);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:3rem;color:#fff;font-weight:400;margin-bottom:1rem;position:relative;overflow:hidden}
.kw-team-avatar.kw-a1{background:var(--ocean);color:var(--ochre-2)}
.kw-team-avatar.kw-a2{background:var(--ochre);color:var(--ink)}
.kw-team-avatar.kw-a3{background:var(--coral);color:var(--paper-cream)}
.kw-team-avatar.kw-a4{background:var(--mint);color:var(--ink)}
.kw-team-avatar.kw-a5{background:var(--ink);color:var(--ochre-2)}
.kw-team-avatar.kw-a6{background:var(--ocean-mist);color:var(--ocean)}
.kw-team-avatar.kw-a7{background:var(--ochre-wash);color:var(--ochre-deep)}
.kw-team-avatar.kw-a8{background:var(--coral-wash);color:var(--coral-deep)}
.kw-team-card .kw-name{font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:.2rem}
.kw-team-card .kw-role{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute-aa);margin-bottom:0.5rem}
.kw-team-card .kw-bit{font-size:.85rem;color:var(--ink-soft);line-height:1.45;font-style:italic;font-family:var(--serif)}

/* ============ FAQ (native details) ============ */
.kw-faq{max-width:760px;margin:2rem auto 0}
.kw-faq details{border-top:1px solid var(--line);padding:1.25rem 0;cursor:pointer}
.kw-faq details:last-of-type{border-bottom:1px solid var(--line)}
.kw-faq summary{font-weight:600;font-size:1.1rem;letter-spacing:-.015em;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.kw-faq summary::-webkit-details-marker{display:none}
.kw-faq summary::after{content:'+';font-family:var(--serif);font-style:italic;color:var(--coral-deep);font-size:1.5rem;line-height:.6;transition:transform .2s;flex-shrink:0}
.kw-faq details[open] summary::after{transform:rotate(45deg)}
.kw-faq .kw-faq-answer{margin-top:1rem;color:var(--ink-soft);font-size:.98rem;line-height:1.65}

/* ============ FILTER PILLS ============ */
.kw-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.kw-filter-pill{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:0.5rem 1rem;border-radius:99px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .2s;font-weight:500}
.kw-filter-pill:hover,.kw-filter-pill:focus{border-color:var(--ink);color:var(--ink)}
.kw-filter-pill.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.kw-filter-pill .kw-count{opacity:.6;margin-left:0.5rem;font-size:.66rem}

/* ============ PROGRAMS HORIZONTAL TRACK ============ */
.kw-program-track{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;max-width:1240px;margin:0 auto;padding:.5rem clamp(1.25rem,2vw,2rem) 0}
@media (max-width:1080px){.kw-program-track{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.kw-program-track{grid-template-columns:1fr}}
.kw-program{border:1px solid var(--line);border-radius:24px;padding:2rem 1.5rem;background:var(--paper);box-shadow:0 8px 24px -10px rgba(0,0,0,.08);display:flex;flex-direction:column}
.kw-program h3{font-weight:600;font-size:1.4rem;line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-bottom:.75rem}
.kw-program h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ocean)}
.kw-program p{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin-bottom:1.25rem}
.kw-program .kw-tag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:0.25rem 0.75rem;border-radius:99px;margin-bottom:1.25rem;font-weight:600;background:var(--mint);color:#fff}
.kw-program.kw-p-cream{background:var(--ochre-wash);border-color:rgba(255,167,0,.2)}
.kw-program.kw-p-cream .kw-tag{background:var(--ochre-deep)}
.kw-program.kw-p-ink{background:var(--ink);color:#fff;border-color:transparent}
.kw-program.kw-p-ink h3{color:#fff}
.kw-program.kw-p-ink h3 em{color:var(--ochre-2)}
.kw-program.kw-p-ink p{color:#D9D9D9}
.kw-program.kw-p-ink .kw-tag{background:var(--coral)}
.kw-program.kw-p-mint{background:var(--mint-wash);border-color:rgba(69,156,150,.3)}
.kw-program.kw-p-coral{background:var(--coral-wash);border-color:rgba(243,134,48,.2)}
.kw-program.kw-p-coral .kw-tag{background:var(--coral)}

/* ============ FORM (Gravity Forms styling overrides) ============ */
.kw-form-wrap{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:clamp(2rem,4vw,3.5rem);box-shadow:var(--shadow)}
.kw-form-wrap h2{font-weight:700;font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.05;letter-spacing:-.03em;color:var(--ink);margin-bottom:.75rem}
.kw-form-wrap h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-deep)}
.kw-form-intro{color:var(--ink-soft);font-size:1.02rem;line-height:1.55;margin-bottom:2rem;max-width:560px}
/* Gravity Forms input overrides */
.kw-form-wrap .gform_wrapper input[type=text],
.kw-form-wrap .gform_wrapper input[type=email],
.kw-form-wrap .gform_wrapper input[type=tel],
.kw-form-wrap .gform_wrapper input[type=url],
.kw-form-wrap .gform_wrapper textarea,
.kw-form-wrap .gform_wrapper select{
  width:100%;padding:0.75rem 1rem;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;
}
.kw-form-wrap .gform_wrapper input:focus,
.kw-form-wrap .gform_wrapper textarea:focus,
.kw-form-wrap .gform_wrapper select:focus{outline:none;border-color:var(--ocean);background:var(--paper);box-shadow:0 0 0 4px var(--ocean-mist)}
.kw-form-wrap .gform_wrapper label.gfield_label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-bottom:.5rem}
.kw-form-wrap .gform_wrapper .gform_button{background:var(--ink);color:#fff;border:0;border-radius:99px;padding:1rem 1.75rem;font-weight:500;font-size:.96rem;font-family:var(--sans);cursor:pointer;box-shadow:0 6px 20px -6px rgba(0,0,0,.4);transition:all .25s}
.kw-form-wrap .gform_wrapper .gform_button:hover{background:var(--coral);transform:translateY(-2px)}

/* ============ FINAL CTA ============ */
.kw-final{background:var(--ink);color:#fff;padding:4rem clamp(1.25rem,2vw,2rem);text-align:center}
.kw-final h2{font-weight:700;font-size:clamp(2rem,4.5vw,3.5rem);line-height:1;letter-spacing:-.035em;color:#fff}
.kw-final h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-2)}
.kw-final p{margin-top:1.25rem;font-size:1.1rem;line-height:1.5;color:#D9D9D9;max-width:580px;margin-left:auto;margin-right:auto}
.kw-final .kw-ps{margin-top:1.5rem;font-family:var(--hand);font-size:1.3rem;color:var(--coral-2);transform:rotate(-1deg);display:inline-block}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .kw-bridge .kw-bridge-inner{grid-template-columns:1fr;gap:2rem}
  .kw-bento{grid-template-columns:repeat(4,1fr)}
  .kw-bento .kw-tile-hero{grid-column:span 4}
  .kw-bento .kw-tile-tall,
  .kw-bento .kw-tile-half,
  .kw-bento .kw-tile-quote-wide,
  .kw-bento .kw-tile-mini{grid-column:span 4}
  .kw-ai-stack{grid-template-columns:repeat(2,1fr)}
  .kw-ai-stack .kw-ai-card{grid-column:span 1!important;margin-top:0!important}
  .kw-stats-grid{grid-template-columns:repeat(2,1fr)}
  .kw-work-mag{grid-template-columns:repeat(2,1fr)}
  .kw-work-grid{grid-template-columns:repeat(2,1fr)}
  .kw-testimonial-inner{grid-template-columns:1fr;gap:2rem}
  .kw-author-block{justify-self:start}
  .kw-studio-card{grid-template-columns:1fr;padding:2rem;text-align:center}
  .kw-studio-portrait{max-width:200px;margin:0 auto}
  .kw-timeline-track{grid-template-columns:repeat(3,1fr);gap:2rem}
  .kw-timeline::before{display:none}
  .kw-beliefs{grid-template-columns:1fr}
  .kw-belief:nth-child(2n-1){border-right:none}
  .kw-team-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .kw-bento{grid-template-columns:1fr}
  .kw-bento > *{grid-column:span 1!important}
  .kw-ai-stack,
  .kw-work-mag,
  .kw-work-grid,
  .kw-team-grid{grid-template-columns:1fr}
  .kw-team-grid{grid-template-columns:repeat(2,1fr)}
  .kw-stats-grid{grid-template-columns:1fr 1fr}
  .kw-timeline-track{grid-template-columns:repeat(2,1fr);gap:2rem}
}

/* ==========================================================================
   PARENT-THEME ACF BLOCK RETROFIT
   The kwall-kadence-theme ACF blocks (hero-banner, card-grid, testimonial-grid,
   stat-bar, stats-row, person-grid, featured-news*, carousel, gallery, cta-*,
   media-with-text, contact-info, kwall-countdown, link-list) will still render
   under this grandchild. These rules retrofit them with our typography,
   palette, and shadow tokens so they don't look out of place if someone
   uses them on a page built under kwall-imagination.
   ========================================================================== */

/* Section padding parity with native patterns */
.kwall-hero-banner,
.kwall-hero-video,
.kwall-home-slider,
.kwall-card-grid,
.kwall-cta-img-text,
.kwall-cta-full-width-image,
.kwall-media-with-text,
.kwall-stat-bar,
.kwall-stats-row,
.kwall-testimonial-grid,
.kwall-person-grid,
.kwall-featured-news,
.kwall-featured-news-events,
.kwall-featured-event,
.kwall-gallery,
.kwall-gallery-slideshow,
.kwall-carousel,
.kwall-contact-info{
  padding-top:clamp(2.5rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
  padding-left:clamp(1.25rem,2vw,2rem);
  padding-right:clamp(1.25rem,2vw,2rem);
}

/* Headings inside ACF blocks pick up our type */
:where(
  .kwall-hero-banner,.kwall-hero-video,.kwall-home-slider,
  .kwall-card-grid,.kwall-cta-img-text,.kwall-cta-full-width-image,
  .kwall-media-with-text,.kwall-stat-bar,.kwall-stats-row,
  .kwall-testimonial-grid,.kwall-person-grid,.kwall-featured-news,
  .kwall-featured-news-events,.kwall-featured-event,
  .kwall-program-categories
) :where(h1,h2,h3,h4,h5,h6){
  font-family:var(--sans);font-weight:700;letter-spacing:-.035em;color:var(--ink);
}
:where(
  .kwall-hero-banner,.kwall-hero-video,.kwall-home-slider,.kwall-card-grid,
  .kwall-cta-img-text,.kwall-cta-full-width-image,.kwall-media-with-text,
  .kwall-stat-bar,.kwall-stats-row,.kwall-testimonial-grid,.kwall-person-grid,
  .kwall-featured-news,.kwall-featured-news-events,.kwall-featured-event,
  .kwall-program-categories
) p{font-family:var(--sans);color:var(--ink-soft);line-height:1.65}

/* ACF stat blocks → our stat treatment */
.kwall-stat-bar,
.kwall-stats-row{background:var(--bg)}
.kwall-stat-bar .stat-number,
.kwall-stats-row .stat-number{
  font-weight:700;font-size:clamp(2.5rem,5vw,3.5rem);letter-spacing:-.04em;color:var(--ink);font-family:var(--sans);
}
.kwall-stat-bar .stat-title,
.kwall-stats-row .stat-title{font-size:.88rem;color:var(--ink-soft);line-height:1.5}

/* ACF testimonial-grid → soft ochre band feel */
.kwall-testimonial-grid{background:var(--ochre-wash)}
.kwall-testimonial-grid .testimonial-card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.75rem;box-shadow:var(--shadow-sm);
}
.kwall-testimonial-grid .testimonial-card p{color:var(--ink);font-size:1.05rem;line-height:1.55;font-weight:300;letter-spacing:-.01em}

/* ACF card-grid → light tile treatment */
.kwall-card-grid .card{
  background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:2rem;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;
}
.kwall-card-grid .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* ACF person-grid → match our team-grid treatment */
.kwall-person-grid .person-card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.75rem;
}
.kwall-person-grid .person-card img{border-radius:14px}
.kwall-person-grid .person-card .person-name{font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em;margin-top:1rem}
.kwall-person-grid .person-card .person-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute-aa)}

/* ACF featured-news / news-item → use our insight card look */
.kwall-featured-news article,
.kwall-featured-news-events article{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:2rem;transition:all .35s;box-shadow:var(--shadow-sm);
}
.kwall-featured-news article:hover,
.kwall-featured-news-events article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* ACF buttons → use our primary look */
:where(
  .kwall-hero-banner,.kwall-cta-img-text,.kwall-cta-full-width-image,
  .kwall-media-with-text,.kwall-card-grid
) :where(a.btn,a.button,.cta-button){
  display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.75rem;border-radius:99px;font-weight:500;font-size:.96rem;
  font-family:var(--sans);background:var(--ink);color:#fff;text-decoration:none;transition:all .25s;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.4);
}
:where(
  .kwall-hero-banner,.kwall-cta-img-text,.kwall-cta-full-width-image,
  .kwall-media-with-text,.kwall-card-grid
) :where(a.btn:hover,a.button:hover,.cta-button:hover){
  background:var(--coral);transform:translateY(-2px);
}

/* Kadence-native blocks (rowlayout, advancedheading, advancedbtn, iconlist, kbcols) — also soften to our palette */
.wp-block-kadence-advancedheading{font-family:var(--sans);color:var(--ink)}
.wp-block-kadence-advancedheading em{font-family:var(--serif);font-style:italic;color:var(--ochre-deep)}
.wp-block-kadence-rowlayout.alignfull{padding-top:clamp(2.5rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,4vw,3.5rem)}

/* Core blocks general typography */
.wp-block-list{font-size:var(--fs-body);line-height:1.7;color:var(--ink-soft)}
.wp-block-list li{margin-bottom:.5rem}
.wp-block-list li::marker{color:var(--coral-deep)}
.wp-block-quote{border-left:3px solid var(--coral);padding-left:1.5rem;margin:2rem 0;font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.4;color:var(--ink)}
.wp-block-image{border-radius:14px;overflow:hidden}
.wp-block-image img{border-radius:14px}
.wp-block-table{font-family:var(--sans)}
.wp-block-table th{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute-aa);text-align:left;padding:0.75rem 1rem;border-bottom:2px solid var(--line-strong)}
.wp-block-table td{padding:0.75rem 1rem;border-bottom:1px solid var(--line)}

/* ===== PROSE WRAPPER (for plain-content pages) ===== */
.prose{
  font-size:1.05rem;line-height:1.7;color:var(--ink-soft);
}
.prose h2{font-family:var(--sans);font-weight:700;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin:2.5rem 0 1rem}
.prose h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-deep)}
.prose h3{font-family:var(--sans);font-weight:600;font-size:1.3rem;line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:2rem 0 .75rem}
.prose p{margin-bottom:1rem}
.prose strong{color:var(--ink);font-weight:600}
.prose em{font-style:italic}
.prose a{color:var(--ocean);font-weight:500;text-decoration:underline;text-decoration-color:rgba(10,110,150,.3);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--ocean)}
.prose ul,.prose ol{margin:1rem 0 1rem 1.5rem}
.prose li{margin-bottom:.5rem}
.prose blockquote{border-left:3px solid var(--coral);padding-left:1.5rem;margin:2rem 0;font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.45;color:var(--ink)}

/* ===== SITE HEADER (header.php) ===== */
.kw-site-header{position:sticky;top:0;z-index:50}

/* ===== SITE FOOTER (footer.php) ===== */
.kw-site-footer{background:var(--ink);color:#D9D9D9;padding:4rem clamp(1.25rem,2vw,2rem) 2rem;border-top:1px solid rgba(255,255,255,.06)}
.kw-foot-inner{max-width:1240px;margin:0 auto}
.kw-foot-top{display:grid;grid-template-columns:1.4fr repeat(5, 1fr);gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:1200px){.kw-foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}.kw-foot-top > *:nth-child(n+5){grid-column:span 2}}
@media (max-width:780px){.kw-foot-top{grid-template-columns:1fr 1fr;gap:1.75rem}.kw-foot-top > *:first-child{grid-column:1 / -1}.kw-foot-top > *:nth-child(n+5){grid-column:auto}}
.kw-foot-brand{font-size:1.5rem;color:#fff;font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:.5rem}
.kw-foot-tagline{margin-top:0.75rem;color:#D9D9D9;opacity:.7;max-width:300px;font-size:.92rem;line-height:1.55}
.kw-foot-col h5{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ochre-2);margin-bottom:1rem;font-weight:500}
.kw-foot-col ul{list-style:none;padding:0;margin:0}
.kw-foot-col ul li{padding:0.25rem 0}
.kw-foot-col ul a{color:#D9D9D9;opacity:.85;font-size:.93rem;transition:opacity .2s}
.kw-foot-col ul a:hover{opacity:1;color:var(--ochre-2)}
.kw-foot-bottom{margin-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-family:var(--mono);font-size:.74rem;color:#D9D9D9;opacity:.6}
.kw-foot-bottom em{font-family:var(--hand);font-style:normal;font-size:1.1rem;color:var(--coral-2);text-transform:none;letter-spacing:0;opacity:1}
@media (max-width:1024px){.kw-foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.kw-foot-top{grid-template-columns:1fr}}

/* ==========================================================================
   SITE HEADER NAV — kw-nav-* classes (matches header.php output)
   wp_nav_menu() outputs <ul.kw-nav-links><li><a>...</a></li></ul> so we
   reset list styling on the ul/li and target anchors directly.
   ========================================================================== */

.kw-nav-wrap{
  position:sticky;top:0;z-index:50;
  padding:0.75rem 1rem;
}

.kw-nav{
  max-width:1240px;margin:0 auto;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(28px) saturate(1.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:99px;
  padding:0.75rem 1rem 0.75rem 1.5rem;
  display:flex;align-items:center;gap:1.5rem;
  box-shadow:0 8px 30px -10px rgba(0,0,0,.08);
}

.kw-brand{
  font-weight:700;font-size:1.15rem;letter-spacing:-.03em;
  color:var(--ink);
  display:flex;align-items:center;gap:0.5rem;
  text-decoration:none;flex-shrink:0;
}
.kw-brand:hover{color:var(--ink)}
.kw-brand .kw-spark{font-size:1.1rem}
.kw-brand span:not(.kw-spark){display:inline-block}

/* Real KWALL wordmark logo in the brand link (replaces the animated mark). */
.kw-logo{display:block;width:auto;max-width:100%;height:auto}
.kw-logo--header{height:30px;width:auto}
.kw-brand:hover .kw-logo--header{opacity:.85;transition:opacity .2s ease}
/* Footer sits on a dark background — render the dark wordmark white. */
.kw-logo--footer{height:34px;width:auto;filter:brightness(0) invert(1)}
@media (max-width:560px){.kw-logo--header{height:26px}}

/* Nav menu — wp_nav_menu output: <ul><li><a></a></li></ul> */
.kw-nav-links,
ul.kw-nav-links{
  display:flex;gap:1.5rem;margin-left:auto;align-items:center;
  list-style:none;padding:0;margin-top:0;margin-bottom:0;
}
.kw-nav-links > li,
ul.kw-nav-links > li{
  list-style:none;padding:0;margin:0;display:inline-flex;align-items:center;
}
.kw-nav-links > li > a,
.kw-nav-links > a,
ul.kw-nav-links > li > a{
  font-size:.88rem;font-weight:500;color:var(--ink-soft);
  text-decoration:none;letter-spacing:-.005em;
  transition:color .2s;
  display:inline-flex;align-items:center;
  padding:.25rem 0;
}
.kw-nav-links > li > a:hover,
.kw-nav-links > a:hover,
ul.kw-nav-links > li > a:hover,
.kw-nav-links > li.current-menu-item > a,
.kw-nav-links > li.current_page_item > a{color:var(--ink)}

/* MEGA-MENU — sub-menus appear as drop panels on hover/focus.
   Markup: <li class="menu-item menu-item-has-children"><a>...</a><ul class="sub-menu"><li>...</li></ul></li> */
.kw-nav-links .sub-menu{
  position:absolute; top:calc(100% + .5rem); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.05rem;
  min-width:240px; max-width:320px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:0.75rem;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.18), 0 4px 10px -4px rgba(0,0,0,.08);
  list-style:none; margin:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%, -8px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:100;
}
.kw-nav-links li.menu-item-has-children{position:relative}
/* Transparent bridge spanning the .5rem gap above the panel — keeps li:hover /
   focus-within alive the whole trip from link to submenu, without altering the
   link box itself (so dropdown items stay baseline-aligned with the rest). */
.kw-nav-links li.menu-item-has-children > .sub-menu::before{
  content:'';position:absolute;left:0;right:0;top:-.7rem;height:.7rem;
}
.kw-nav-links li.menu-item-has-children > a::after{
  content:'⌄'; margin-left:.25rem; font-size:.85em; opacity:.55; transition:transform .2s ease;
  display:inline-block; transform:translateY(-2px);
}
.kw-nav-links li.menu-item-has-children:hover > a::after,
.kw-nav-links li.menu-item-has-children:focus-within > a::after{transform:translateY(0)}
.kw-nav-links li.menu-item-has-children:hover > .sub-menu,
.kw-nav-links li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%, 0);
  transition:opacity .18s ease, transform .18s ease;
}
.kw-nav-links .sub-menu li{list-style:none;margin:0;padding:0}
.kw-nav-links .sub-menu li a{
  display:block;
  font-size:.88rem; font-weight:500; color:var(--ink-soft);
  text-decoration:none; letter-spacing:-.005em;
  padding:0.5rem 0.75rem; border-radius:10px;
  transition:background .14s, color .14s;
}
.kw-nav-links .sub-menu li a:hover,
.kw-nav-links .sub-menu li a:focus{
  background:var(--ocean-mist); color:var(--ocean);
}
.kw-nav-links .sub-menu li.current-menu-item > a{
  color:var(--ink); background:rgba(0,0,0,.04); font-weight:600;
}
/* Mega-menu wider variant for Programs (8 items) — render as 2 columns */
.kw-nav-links > li#menu-item-10003 .sub-menu,  /* programs (id may shift in WP) */
.kw-nav-links > li > a[href$="/programs/"] + .sub-menu{
  min-width:440px; flex-direction:row; flex-wrap:wrap;
}
.kw-nav-links > li > a[href$="/programs/"] + .sub-menu > li{flex:0 0 calc(50% - .05rem)}
/* When closed (hover off), restore transform to translate(-50%, -8px) */
@media (max-width:900px){
  /* On mobile we still hide the whole bar via existing rule; sub-menus collapse with parent */
  .kw-nav-links .sub-menu{position:static; transform:none; box-shadow:none; border:0; padding-left:1rem; max-width:none}
  .kw-nav-links li.menu-item-has-children:hover > .sub-menu{transform:none}
}

.kw-nav-cta{
  background:var(--ink);color:#fff !important;
  padding:0.5rem 1rem;border-radius:99px;
  font-size:.85rem;font-weight:600;
  text-decoration:none;letter-spacing:-.005em;
  transition:all .25s;flex-shrink:0;
  display:inline-flex;align-items:center;gap:0.5rem;
}
.kw-nav-cta:hover{background:var(--coral);color:#fff !important;transform:translateY(-1px)}

.kw-nav-menu{
  display:none;background:none;border:0;
  font-size:1.5rem;color:var(--ink);cursor:pointer;
  padding:0.25rem;margin-left:auto;
}

/* Skip link — accessibility */
.skip-link.screen-reader-text{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link.screen-reader-text:focus,
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;width:auto;height:auto;
  background:var(--ink);color:#fff;padding:0.75rem 1rem;border-radius:8px;
  font-size:.85rem;font-weight:600;z-index:200;text-decoration:none;
  outline:3px solid var(--ochre);outline-offset:0;
}

/* Responsive — collapse nav links into a menu button below 900px */
@media (max-width:900px){
  .kw-nav{position:relative}
  .kw-nav-links,
  ul.kw-nav-links{display:none}
  .kw-nav-menu{display:inline-flex;margin-left:auto}
  .kw-nav-cta{padding:0.5rem 0.75rem;font-size:.78rem}

  /* Slide-down panel: nav links + CTA drop below the header bar when open. */
  .kw-nav.is-open .kw-nav-links,
  .kw-nav.is-open ul.kw-nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:.15rem;
    position:absolute;top:calc(100% + .5rem);left:1rem;right:1rem;
    background:#fff;border:1px solid var(--line);border-radius:18px;
    box-shadow:0 24px 60px -12px rgba(0,0,0,.18),0 4px 10px -4px rgba(0,0,0,.08);
    padding:1rem;margin:0;z-index:120;
    max-height:calc(100vh - 6rem);overflow-y:auto;
  }
  .kw-nav.is-open .kw-nav-links > li{width:100%}
  .kw-nav.is-open .kw-nav-links > li > a{display:block;padding:0.5rem .75rem;border-radius:10px}
  /* Submenus stay collapsed until their parent <li> is tapped open. */
  .kw-nav.is-open .kw-nav-links .sub-menu{display:none}
  .kw-nav.is-open .kw-nav-links li.menu-item-has-children.is-open > .sub-menu{
    display:flex;position:static;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;box-shadow:none;border:0;background:transparent;
    padding:.15rem 0 0.25rem .75rem;max-width:none;min-width:0;
  }
  .kw-nav.is-open .kw-nav-links li.menu-item-has-children.is-open > a::after{transform:rotate(180deg)}
}

/* ==========================================================================
   AI SPOTLIGHT SECTION — redesigned dark AI block
   Used by /patterns/ai-services-spotlight.php. Bigger, more accessible
   eyebrow + bento grid + featured example tile with metric.
   ========================================================================== */

.kw-ai-spotlight{
  background:linear-gradient(180deg,#1A1A1A 0%,#333333 60%,#454545 100%);
  color:#fff;
  padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,2vw,2rem);
  position:relative;overflow:hidden;
}
/* subtle gradient bloom in upper right to break the flat dark */
.kw-ai-spotlight::before{
  content:'';position:absolute;
  top:-30%;right:-15%;width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(circle,rgba(89,200,222,.18),transparent 65%);
  filter:blur(40px);pointer-events:none;
}
.kw-ai-spotlight::after{
  content:'';position:absolute;
  bottom:-25%;left:-10%;width:50vw;height:50vw;border-radius:50%;
  background:radial-gradient(circle,rgba(243,134,48,.14),transparent 65%);
  filter:blur(40px);pointer-events:none;
}
.kw-ai-spotlight-inner{max-width:1240px;margin:0 auto;position:relative;z-index:2}

/* ============ HEADER (accessible solid pill + big headline) ============ */
.kw-ai-spotlight-head{
  display:grid;grid-template-columns:1fr;gap:1.25rem;
  margin-bottom:3rem;max-width:1100px;
}

/* SOLID ochre pill — high contrast (#333333 text on #FFA700 bg ≈ 6.5:1, AA) */
.kw-ai-pill{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:var(--ochre);color:var(--ink);
  font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;
  padding:0.5rem 1rem;border-radius:99px;
  width:fit-content;
  box-shadow:0 6px 20px -6px rgba(255,167,0,.4);
}
.kw-ai-pill .kw-spark{font-size:1rem}
/* Force spark colors to be visible on the gold pill */
.kw-ai-pill .kw-spark::before{background:var(--ocean)}
.kw-ai-pill .kw-spark::after{background:var(--coral-deep)}
.kw-ai-pill .kw-spark > i::before{background:var(--ink)}
.kw-ai-pill .kw-spark > i::after{background:var(--mint)}

.kw-ai-spotlight-h{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(2.5rem,6vw,5rem);
  line-height:.98;letter-spacing:-.04em;color:#fff;
  margin:0;
}
.kw-ai-spotlight-h em{
  font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ochre-2);
}
.kw-ai-spotlight-h .kw-marker{
  position:relative;display:inline-block;color:var(--ink);
}
.kw-ai-spotlight-h .kw-marker::before{
  content:'';position:absolute;left:-8px;right:-8px;top:.18em;bottom:.05em;
  background:var(--coral);z-index:-1;transform:rotate(-1.5deg) skew(-2deg);
  border-radius:6px;opacity:.95;
}

.kw-ai-spotlight-sub{
  font-family:var(--sans);font-size:1.18rem;line-height:1.55;
  color:#D9D9D9;max-width:680px;margin:0;
}

/* ============ BENTO GRID — 6 columns ============ */
.kw-ai-bento{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);
  gap:1rem;margin-bottom:3rem;
}

.kw-ai-tile{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;padding:2.25rem 2rem;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.kw-ai-tile:hover,.kw-ai-tile:focus-within{
  transform:translateY(-4px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}
.kw-ai-tile .kw-ai-num{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ochre-2);margin-bottom:1rem;font-weight:500;
}
.kw-ai-tile h3{
  font-family:var(--sans);font-weight:600;font-size:1.5rem;line-height:1.15;
  letter-spacing:-.025em;color:#fff;margin-bottom:0.75rem;
}
.kw-ai-tile h3 em{
  font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ochre-2);
}
.kw-ai-tile p{
  font-family:var(--sans);font-size:.96rem;line-height:1.6;
  color:#CFCFCF;margin-bottom:0;
}
.kw-ai-tile ul{
  list-style:none;padding:0;margin-top:1.25rem;
  display:grid;grid-template-columns:1fr 1fr;gap:0.5rem 0.75rem;
}
.kw-ai-tile ul li{
  font-family:var(--mono);font-size:.78rem;color:#CFCFCF;line-height:1.4;
  padding:0.25rem 0;display:flex;align-items:center;gap:.5rem;
}
.kw-ai-tile ul li::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--ochre);flex-shrink:0;
}

/* TILE PLACEMENTS */

/* Featured (large, top-left) — 3 cols x 2 rows */
.kw-ai-feature{
  grid-column:span 3;grid-row:span 2;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(89,200,222,.25);
}
.kw-ai-feature h3{font-size:1.9rem}
.kw-ai-feature .kw-ai-more{
  margin-top:1.5rem;color:var(--ochre-2);font-weight:600;font-size:.95rem;
  text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;align-self:flex-start;
}
.kw-ai-feature .kw-ai-more:hover{color:#fff}

/* Two stacked service tiles on the right — 3 cols x 1 row each */
.kw-ai-build{grid-column:span 3;grid-row:span 1}
.kw-ai-integrate{grid-column:span 3;grid-row:span 1}

/* Quiet-part callout — full-width, big quote feel */
.kw-ai-quiet{
  grid-column:span 6;grid-row:span 1;
  background:linear-gradient(135deg,rgba(243,134,48,.18) 0%,rgba(243,134,48,.06) 100%);
  border:1px solid rgba(243,134,48,.4);
  padding:2.5rem 2.25rem;
}
.kw-ai-quiet .kw-ai-num{color:var(--coral-2)}
.kw-ai-quiet h3{font-size:1.85rem;line-height:1.1;max-width:760px}
.kw-ai-quiet h3 em{color:var(--coral-2)}
.kw-ai-quiet p{max-width:780px;margin-top:.75rem}

/* GEO/Discovery tile — 2 cols */
.kw-ai-geo{grid-column:span 2;grid-row:span 1}

/* Metric tile (recent example with big number) — 4 cols */
.kw-ai-metric{
  grid-column:span 4;grid-row:span 1;
  background:linear-gradient(135deg,rgba(255,167,0,.18) 0%,rgba(255,167,0,.04) 100%);
  border:1px solid rgba(255,167,0,.35);
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;
  padding:2rem 2.25rem;
}
.kw-ai-metric .kw-ai-num{
  grid-column:1 / -1;color:var(--ochre-2);margin-bottom:0;
}
.kw-ai-metric-num{
  font-family:var(--sans);font-weight:800;font-size:clamp(3.5rem,7vw,6rem);
  line-height:.9;letter-spacing:-.04em;color:var(--ochre);
  align-self:center;
}
.kw-ai-metric-num em{
  font-family:var(--serif);font-style:italic;font-weight:500;
}
.kw-ai-metric-label{
  font-family:var(--sans);font-size:.95rem;line-height:1.55;color:#D9D9D9;
}
.kw-ai-metric-label em{
  font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ochre-2);
}

/* ============ CTA ROW ============ */
.kw-ai-spotlight-cta{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.kw-ai-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1rem 1.75rem;border-radius:99px;font-weight:500;font-size:.95rem;
  font-family:var(--sans);text-decoration:none;letter-spacing:-.005em;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
}
.kw-ai-btn-primary{
  background:var(--ochre);color:var(--ink);
  box-shadow:0 6px 20px -6px rgba(255,167,0,.5);
}
.kw-ai-btn-primary:hover{background:#fff;transform:translateY(-2px)}
.kw-ai-btn-ghost{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);
}
.kw-ai-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.kw-ai-fineprint{
  font-family:var(--hand);font-size:1.3rem;color:var(--coral-2);
  transform:rotate(-1deg);line-height:1;
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .kw-ai-bento{grid-template-columns:repeat(2,1fr)}
  .kw-ai-feature,
  .kw-ai-build,
  .kw-ai-integrate,
  .kw-ai-quiet,
  .kw-ai-geo,
  .kw-ai-metric{grid-column:span 2;grid-row:auto}
  .kw-ai-metric{grid-template-columns:1fr}
  .kw-ai-tile ul{grid-template-columns:1fr}
}
@media (max-width:640px){
  .kw-ai-bento{grid-template-columns:1fr}
  .kw-ai-feature,.kw-ai-build,.kw-ai-integrate,.kw-ai-quiet,.kw-ai-geo,.kw-ai-metric{grid-column:span 1}
}

/* ==========================================================================
   WCAG 2.2 AA FIXES (audit pass · 2026-05-26)
   Contrast, focus, target size, and color-alone indicator fixes appended
   at the end of theme.css so the cascade overrides earlier rules.
   ========================================================================== */

/* ----- Text-safe accent tokens — darker variants for body-size text -----
   Originals (--ochre-deep #D14600, --coral-deep #D62303, --mint #459C96)
   are kept for backgrounds / borders / large display headlines (>=24px
   non-bold or >=19px bold get the looser 3:1 threshold). The -text
   variants below clear the strict 4.5:1 AA threshold on our cream/paper
   backgrounds for small body-size em accents.                          */
:root{
  --ochre-text:#8A5A00;   /* on #FBFAF7 ≈ 5.5:1 — AA pass for normal text */
  --coral-text:#9E3A00;   /* on #FBFAF7 ≈ 6.0:1 — AA pass */
  --mint-text: #2E6864;   /* on #FBFAF7 ≈ 6.4:1 — AA pass */
  --ink-mute-aa:#595959;  /* upgrade from #5C5C5C (4.4:1) → 6.0:1 */
}

/* ----- Em accent colors at body sizes — use the -text variants ----- */
.note h3 em,
.kw-belief h4 em,
.kw-program h3 em,
.kw-faq summary em,
.kw-work-body h4 em,
.kw-tile h3 em,
.kw-tile p em,
.insight h4 em,
.kw-tl-label em em,                       /* nested em edge case */
.kw-foot-bottom em{
  color:var(--ochre-text);
}

/* Specific overrides — keep ocean for ocean-themed em (ocean already passes AA) */
.kw-work-body h4 em,
.kw-program h3 em,
.note h3 em{color:var(--ocean)}            /* ocean #0A6E96 ≈ 5.7:1 — AA pass */

/* Beliefs (numbered dark) — already on dark bg, was fine, no change needed */

/* Filter pills meta + dates + read-more meta — bump mute */
.kw-work-meta,
.kw-program-track .kw-tag + p,
.kw-stat .kw-label,
.kw-faq .kw-faq-answer,
.kw-page-hero .is-style-kwall-meta,
.is-style-kwall-meta,
.insight .date{
  color:var(--ink-mute-aa);
}

/* "Read →" links inside cards — were color-only, add underline so they're
   distinguishable to users who can't perceive color (WCAG 1.4.1 + 2.4.7) */
.kw-work-meta .kw-read,
.kw-program .kw-link,
.kw-ai-card a,
.insight .date .read,
.kw-tile .kw-more,
.kw-tile-quote .kw-more{
  color:var(--ocean);            /* ocean #0A79A6 AA passes on white */
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(10,110,150,.4);
  text-underline-offset:3px;
  font-weight:600;
}
.kw-work-meta .kw-read:hover,
.kw-program .kw-link:hover,
.kw-ai-card a:hover,
.insight .date .read:hover,
.kw-tile .kw-more:hover,
.kw-tile-quote .kw-more:hover{
  text-decoration-color:var(--ocean);
}

/* Read-mores on dark backgrounds — keep ochre-2 but add underline */
.kw-program.kw-p-ink .kw-link,
.kw-ai-tile .kw-ai-more{
  color:var(--ochre-2);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(254,198,87,.5);
  text-underline-offset:3px;
}

/* ----- Eyebrow contrast fixes ----- */

/* kw-warm: coral-text on coral-wash = 5.4:1 (was 3.6:1) */
.is-style-kwall-eyebrow.kw-warm{
  color:var(--coral-text);
  border-color:rgba(158,58,0,.35);
  background:var(--coral-wash);
}

/* kw-gold: ochre-text on ochre-wash = 5.2:1 (was 2.9:1) */
.is-style-kwall-eyebrow.kw-gold{
  color:var(--ochre-text);
  border-color:rgba(138,90,0,.35);
  background:var(--ochre-wash);
}

/* kw-mint: mint-text on mint-wash = 5.9:1 (was 2.5:1) */
.is-style-kwall-eyebrow.kw-mint{
  color:var(--mint-text);
  border-color:rgba(46,104,100,.35);
  background:var(--mint-wash);
}

/* ----- Testimonial ochre band em — coral-deep on ochre fails 2.2:1.
   Switch to ink-2 for very high contrast (9:1+).                ------ */
.kw-testimonial blockquote em{
  color:var(--ink-2);
  font-weight:500;                /* slightly bolder for emphasis without color contrast change */
}
.kw-testimonial .kw-quote-mark{
  color:var(--ink-2);
  opacity:.4;                     /* still feels like a decorative mark */
}

/* ----- Bridge h em — was coral-deep on coral-wash, borderline.
   Bump font-weight + use coral-text for safer contrast.           ---- */
.kw-bridge .kw-bridge-h em{
  color:var(--coral-text);
  font-weight:500;
}

/* ----- Studio note card em + handnotes — improve handnote contrast ---- */
.is-style-kwall-handnote,
.kw-studio-card .kw-handsig,
.kw-foot-bottom em.kw-hand{
  color:var(--coral-text);
}

/* ----- Filter pills active state — add non-color indicator (bold) so the
   active state is visible to users who can't perceive the color change ---- */
.kw-filter-pill{
  font-weight:500;
  min-height:38px;                /* meet WCAG 2.2 SC 2.5.8 target size */
}
.kw-filter-pill.is-active{
  font-weight:700;
}

/* ----- Nav links — bump padding to hit WCAG 2.2 SC 2.5.8 (24×24 min) ---- */
.kw-nav-links > li > a,
.kw-nav-links > a,
ul.kw-nav-links > li > a{
  padding:0.5rem .25rem;          /* was .25rem 0 → ~22px; now ~32px tall */
  min-height:24px;
  display:inline-flex;align-items:center;
}

/* ----- Skip link — confirm it shows on focus with strong contrast ----- */
.skip-link:focus,
.skip-link.screen-reader-text:focus{
  background:#333333;             /* solid ink (var doesn't load until body) */
  color:#fff;
  outline:3px solid #FFA700;      /* solid ochre */
  outline-offset:0;
}

/* ----- Stat num em — was using coral-deep / ochre-deep on light, but stat
   numbers are clamp(2.4rem, 5vw, 3.6rem) = ALWAYS large text, so 3:1
   threshold applies. Existing colors pass. No change needed.        ----- */

/* ----- Form input borders — bump from rgba .16 to a solid color
   so they hit 3:1 against the white form background (SC 1.4.11)    ----- */
.kw-form-wrap .gform_wrapper input[type=text],
.kw-form-wrap .gform_wrapper input[type=email],
.kw-form-wrap .gform_wrapper input[type=tel],
.kw-form-wrap .gform_wrapper input[type=url],
.kw-form-wrap .gform_wrapper textarea,
.kw-form-wrap .gform_wrapper select{
  border-color:#5C5C5C;           /* solid mid-gray ~3.3:1 vs white field */
}
.kw-form-wrap .gform_wrapper input:focus,
.kw-form-wrap .gform_wrapper textarea:focus,
.kw-form-wrap .gform_wrapper select:focus{
  border-color:#0A79A6;           /* ocean — high contrast focused state */
  box-shadow:0 0 0 4px rgba(10,110,150,.18);
}

/* ----- Body links inside .prose — already underlined but bump
   decoration thickness for visibility                              ----- */
.prose a{
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(10,110,150,.4);
  text-underline-offset:3px;
}
.prose a:hover{
  text-decoration-color:#0A79A6;
}

/* ----- Decorative serif italic (.kw-imagination word in hero):
   it's clamp(2.5rem,7vw,5.5rem) = large display, current ochre-deep
   passes 3:1 on white. No change needed.                          ----- */

/* ----- Manifesto strike-through styling on the headline — make sure
   the strike-through has enough contrast against the muted text   ----- */
.manifesto-hed .strike::after,
.kw-manifesto-hed .strike::after{
  background:var(--coral-text);
}

/* ==========================================================================
   WCAG 2.2 AA FIXES — ROUND 2 (Lighthouse audit follow-up · 2026-05-26)
   Closes the specific failures axe-core flagged on the multidev.
   ========================================================================== */

/* AI card heading order fix — accept both h3 and h4 now that pattern uses h3 */
.kw-ai-stack .kw-ai-card h3,
.kw-ai-stack .kw-ai-card h4{font-weight:600;font-size:1.25rem;line-height:1.15;letter-spacing:-.02em;margin-bottom:0.75rem;color:#fff}
.kw-ai-stack .kw-ai-card h3 em,
.kw-ai-stack .kw-ai-card h4 em{font-family:var(--serif);font-style:italic;font-weight:400}
.kw-ai-stack .a4 h3,
.kw-ai-stack .a4 h4{font-size:1.45rem}

/* Trust label — was --ink-mute (4.15:1), bump to AA-safe variant */
.kw-trust-label{color:var(--ink-mute-aa)}

/* Trust logos — opacity:.55 was dropping --ink-soft to 2.62:1.
   Drop opacity entirely; use --ink-mute-aa directly for a softer look
   that still passes AA. */
.kw-trust-logo{
  opacity:1;
  color:var(--ink-mute-aa);
}
.kw-trust-logo:hover,.kw-trust-logo:focus{
  color:var(--ocean);
}
.kw-trust-logo small{
  color:var(--ink-mute-aa);
  opacity:1;
  font-size:.7rem;            /* bumped from .62rem so AA threshold drops */
}

/* Bento tile .kw-more links — were using --ocean (overridden by wpel plugin
   to #0a79a6), failing on tinted backgrounds. Override with darker text and
   bigger weight per tile color. */
.tile .kw-more,
.kw-bento .kw-more,
.tile-hero .kw-more,
.tile-half .kw-more,
.tile-tall .kw-more,
.tile-mini .kw-more,
article.wp-block-group .kw-more{
  color:var(--ocean) !important;
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
/* On ocean-mist bg use dark ink (white doesn't have meaning, ink works best) */
.tile-hero .kw-more,
.kw-bento .kw-tile-hero .kw-more,
.wp-block-group.is-style-kwall-tile.kw-tile--ocean-mist .kw-more{
  color:var(--ink) !important;
}
/* On ochre tile use ink (ochre + ocean fails 2.35:1, ink + ochre = 10:1) */
.kw-bento .kw-tile-tall .kw-more,
.wp-block-group.is-style-kwall-tile.kw-tile--ochre .kw-more{
  color:var(--ink) !important;
}
/* On coral-wash use coral-text-dark (which is dark enough on coral wash) */
.kw-bento .kw-tile-half.design .kw-more,
.wp-block-group.is-style-kwall-tile.kw-tile--coral-wash .kw-more{
  color:var(--coral-text) !important;
}
/* On mint-wash use mint-text */
.kw-bento .kw-tile-half.products .kw-more,
.wp-block-group.is-style-kwall-tile.kw-tile--mint-wash .kw-more{
  color:var(--mint-text) !important;
}

/* Tile heading colors on ocean tile — h3 was inheriting --ink (dark)
   producing 2.73:1 on the ocean-mist bg. ocean-mist is actually LIGHT
   so dark ink IS correct there. But .kw-tile--ocean (solid ocean blue)
   has color:#fff set on the group but the h3 was forcing var(--ink). */
.wp-block-group.is-style-kwall-tile.kw-tile--ocean h3,
.wp-block-group.is-style-kwall-tile.kw-tile--ocean h3 em,
.wp-block-group.is-style-kwall-tile.kw-tile--ocean p{color:#fff !important}
.wp-block-group.is-style-kwall-tile.kw-tile--ocean .num-tag,
.wp-block-group.is-style-kwall-tile.kw-tile--ocean .is-style-kwall-eyebrow{color:rgba(255,255,255,.85) !important}

/* Eyebrow specificity — when an eyebrow appears inside any dark section,
   the dark-section p rule (color:#D9D9D9) was winning. Force eyebrow colors. */
p.is-style-kwall-eyebrow,
.is-style-kwall-eyebrow{
  color:var(--ink-soft);
}
p.is-style-kwall-eyebrow.kw-warm,
.is-style-kwall-eyebrow.kw-warm{color:var(--coral-text) !important;background:var(--coral-wash)}
p.is-style-kwall-eyebrow.kw-gold,
.is-style-kwall-eyebrow.kw-gold{color:var(--ochre-text) !important;background:var(--ochre-wash)}
p.is-style-kwall-eyebrow.kw-ocean,
.is-style-kwall-eyebrow.kw-ocean{color:var(--ocean) !important;background:var(--ocean-mist)}
p.is-style-kwall-eyebrow.kw-mint,
.is-style-kwall-eyebrow.kw-mint{color:var(--mint-text) !important;background:var(--mint-wash)}

/* Stats num em on mint-wash — was --mint (#459C96), 2.01:1 fail */
.kw-stat.kw-s3 .kw-num em{color:var(--mint-text)}

/* Work card mark on mint thumb — white on mint = 2.34:1.
   Use dark ink instead for high contrast. */
.kw-work-thumb.kw-t-mint .kw-mark,
.kw-work-thumb.kw-t-mint .kw-ghost{color:var(--ink) !important}
.kw-work-thumb.kw-t-mint .kw-ghost{-webkit-text-stroke:1.5px rgba(0,0,0,.22)}
.kw-work-thumb.kw-t-mint .kw-badge{color:var(--ink)}

/* Program tag on mint bg — white on mint = 2.34:1.
   Switch tag to dark ink for high contrast. */
.kw-program .kw-tag,
.kw-program.kw-p-paper .kw-tag{
  background:var(--mint-text);  /* darker mint so white passes */
  color:#fff;
}
.kw-program.kw-p-mint .kw-tag{
  background:var(--mint-text);
  color:#fff;
}
/* Program tag on cream — was bg #D14600, 3.47:1 with white (fails 4.5:1
   for small text). Use ochre-text (darker) for AA pass. */
.kw-program.kw-p-cream .kw-tag{
  background:var(--ochre-text);
  color:#fff;
}
/* Program tag on coral bg — coral bg with white. Verify in audit. */
.kw-program.kw-p-coral .kw-tag{
  background:var(--coral-text);
  color:#fff;
}

/* Footer em — the prior catch-all .kw-foot-bottom em set coral-text
   (#9E3A00) which fails 1.81:1 on the dark ink footer. Restrict the
   override to .kw-hand only; default keeps coral-2 (light coral on dark
   = 7:1+ pass). */
.kw-foot-bottom em:not(.kw-hand){
  color:var(--coral-2) !important;        /* light coral on dark = passes */
}

/* Insights inline em — the insights-three-up pattern uses inline
   style="color:var(--ochre-deep)" which fails. Override via specificity. */
.kw-insights .insight h4 em[style],
.kw-insights .insight h4 em,
section .insight h4 em{color:var(--ochre-text) !important}
section .insight h4 em.coral,
.insight h4 em.coral{color:var(--coral-text) !important}
section .insight h4 em.gold,
.insight h4 em.gold{color:var(--ochre-text) !important}
section .insight h4 em.mint,
.insight h4 em.mint{color:var(--mint-text) !important}

/* Insights date.read links — pattern uses inline style="color:var(--ochre-deep)" */
.insights .insight .date .read[style],
.insight .date .read{color:var(--ocean) !important;font-weight:600}
.insight .date .read.coral,
.insight:nth-child(2) .date .read{color:var(--coral-text) !important}
.insight .date .read.gold,
.insight:nth-child(3) .date .read{color:var(--ochre-text) !important}

/* ==========================================================================
   WCAG FIXES — ROUND 3 (final cleanups · 2026-05-26)
   ========================================================================== */

/* Footer column heading — was h5 (skipped h3+h4), now h2 with our look */
.kw-foot-col h2.kw-foot-h,
.kw-foot-col h2{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ochre-2);
  margin-bottom:1rem;
  font-weight:500;
  line-height:1.2;
}

/* Footer "made with imagination" — was an em (catching footer em rule).
   Now wrapped in span.kw-foot-tag for explicit, scoped styling. */
.kw-foot-tag{
  font-family:var(--hand);
  font-style:normal;
  font-size:1.1rem;
  color:var(--coral-2);
  text-transform:none;
  letter-spacing:0;
  opacity:1;
}

/* AI ochre tile eyebrow — was --ink-soft on --ochre = 3.71:1 fail.
   On the solid ochre tile, use --ink (very dark) for high contrast. */
.kw-bento .wp-block-group.is-style-kwall-tile.kw-tile--ochre .is-style-kwall-eyebrow,
.kw-bento .kw-tile-tall .is-style-kwall-eyebrow,
.wp-block-group.is-style-kwall-tile.kw-tile--ochre .is-style-kwall-eyebrow,
.wp-block-group.is-style-kwall-tile.kw-tile--ochre .num-tag{
  color:var(--ink) !important;
  background:transparent !important;
  border-color:rgba(0,0,0,.25) !important;
}

/* ==========================================================================
   WCAG FIXES — ROUND 4 (final polish · 2026-05-26)
   ========================================================================== */

/* Studio note headline: was <h3>, now <h2>. Make the h2 inside .kw-studio-card
   render with the previous h3 visual styling (italic serif, smaller). */
.kw-studio-card h2{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.5rem,3vw,2.5rem);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ink);
  margin-bottom:1.25rem;
}

/* Beliefs h4 → h3 — make h3 inside .kw-belief render with the prior h4 style */
.kw-belief h3{
  font-weight:600;
  font-size:1.15rem;
  line-height:1.2;
  color:#fff;
  letter-spacing:-.015em;
  margin-bottom:0.5rem;
}
/* Belief em — was correctly coral-2 (light, 7:1+ on dark) but my round-1
   bulk override switched it to --ochre-text (dark) which fails on dark bg.
   Restore to coral-2 for the dark-section context. */
.kw-belief h3 em,
.kw-belief h4 em{
  color:var(--coral-2);
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
}

/* Timeline year "now" state — was --ochre-deep (3.27:1 on cream).
   Use --ochre-text for AA pass. */
.kw-tl-step.is-now .kw-tl-year{color:var(--ochre-text)}

/* Team card role — was --ink-mute (4.15:1). Bump to --ink-mute-aa. */
.kw-team-card .kw-role{color:var(--ink-mute-aa)}

/* FOOTER OPACITY FIX — the root cause of the footer-tag contrast issue:
   .kw-foot-bottom had opacity:.6 which dimmed children including the
   kw-foot-tag. Result: coral-2 (#F7A55F) × 0.6 = #96645E = 3.41:1 fail.
   Solution: remove opacity, use a pre-dimmed color directly so kw-foot-tag
   can override with its own color without fighting parent opacity. */
.kw-foot-bottom{
  opacity:1;
  color:#ADADAD;       /* pre-dimmed cool gray, ~5.6:1 on --ink (passes AA) */
}
.kw-foot-tag{
  color:var(--coral-2);    /* coral-2 #F7A55F on --ink ≈ 7:1 pass */
  opacity:1;
}

/* WCAG fix — list items inside dark sections inherit --ink-soft (2.17:1
   on dark ink), need a light variant. Same color as dark-section p. */
.wp-block-group.is-style-kwall-dark-section .wp-block-list li,
.wp-block-group.is-style-kwall-dark-section ul li,
.wp-block-group.is-style-kwall-dark-section ol li{color:#D9D9D9}

/* ==========================================================================
   PATTERN REFACTOR CSS — fixes for the new core-block structure
   (patterns previously used wp:html with specific markup; now use core blocks
   which render as wp-block-group / wp-block-heading / wp-block-paragraph).
   Append rules so the refactored markup still looks right.
   ========================================================================== */

/* Testimonial author block — was <span>, now <p> inside .kw-author-info */
.kw-author-info p{margin:0;line-height:1.3}
.kw-author-info p strong{display:block;font-weight:600;font-size:1rem;letter-spacing:-.01em;color:#fff}
.kw-author-info p:not(:first-child){font-size:.82rem;color:#D9D9D9;margin-top:.15rem}

/* Testimonial author avatar — was text, now <p> inside */
.kw-author-avatar p{margin:0;line-height:1;font-family:var(--serif);font-style:italic;font-size:1.45rem;color:#fff;font-weight:400}

/* Team avatar — same — text became <p> inside */
.kw-team-avatar p{margin:0;line-height:1;font-family:var(--serif);font-style:italic;font-size:3rem;font-weight:400;color:inherit}

/* Studio portrait — same */
.kw-studio-portrait p{margin:0;line-height:1;font-family:var(--serif);font-style:italic;font-size:5rem;font-weight:400;color:inherit}

/* Studio note signature — wp:group with flex layout */
.kw-studio-card .kw-sig{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;font-size:.92rem;color:var(--ink-soft)}
.kw-studio-card .kw-sig p{margin:0;line-height:1.4}
.kw-studio-card .kw-sig p strong{color:var(--ink);font-weight:600}
.kw-studio-card .kw-sig .kw-handsig{font-family:var(--hand);font-size:2rem;color:var(--coral-text);transform:rotate(-4deg);line-height:.9}

/* Stat num — was <div class="kw-num">, now <h3 class="kw-num"> */
h3.kw-num,.kw-num{margin:0;font-weight:700;font-size:clamp(2.5rem,5vw,3.5rem);line-height:.95;letter-spacing:-.04em;color:var(--ink)}
h3.kw-num em{font-family:var(--serif);font-style:italic;font-weight:400}

/* Stat block layout — was a div, now a wp:group */
.kw-stat,
.wp-block-group.kw-stat{display:flex;flex-direction:column;justify-content:space-between}

/* Belief number paragraph — was <span class="kw-n">, now <p class="kw-n"> */
p.kw-n,.kw-n{margin:0;font-family:var(--serif);font-style:italic;font-size:2.5rem;color:var(--ochre-2);line-height:.9;font-weight:400}

/* Insight meta (date + read) — new class .kw-insight-meta */
.kw-insight-meta{margin-top:1.25rem;padding-top:0.75rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;color:var(--ink-mute-aa);text-transform:none;letter-spacing:.06em}
.kw-insight-meta p{margin:0;color:inherit;font-family:inherit;font-size:inherit}
.kw-insight-meta p a{color:var(--ocean);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(10,110,150,.4)}

/* Program link — was <a class="kw-link">, now <p class="kw-link-wrap"><a class="kw-link"> */
.kw-program .kw-link-wrap{margin:0}
.kw-program .kw-link-wrap a.kw-link{font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:0.5rem;color:var(--ocean);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.kw-program.kw-p-cream .kw-link-wrap a.kw-link{color:var(--ochre-text)}
.kw-program.kw-p-ink .kw-link-wrap a.kw-link{color:var(--ochre-2)}
.kw-program.kw-p-mint .kw-link-wrap a.kw-link{color:var(--mint-text)}
.kw-program.kw-p-coral .kw-link-wrap a.kw-link{color:var(--coral-text)}

/* Program tag — was <span class="kw-tag">, now <p class="kw-tag"> */
.kw-program p.kw-tag,
p.kw-tag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:0.25rem 0.75rem;border-radius:99px;margin:0 0 1.25rem;font-weight:600;width:fit-content;background:var(--mint-text);color:#fff}

/* Bento tile "more" link — was <a class="kw-more">, now <p class="kw-more"><a> */
.kw-bento p.kw-more,
.tile p.kw-more,
.wp-block-group p.kw-more{margin:1.25rem 0 0;font-weight:700;font-size:.92rem;display:inline-block;align-self:flex-start}
.kw-bento p.kw-more a,
.wp-block-group p.kw-more a{color:var(--ocean);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:600}

/* Bento tiles — children of .kw-bento are now wp:group blocks not <article>.
   The grid-column rules already target .kw-tile-hero, .kw-tile-tall etc by
   class — those classes are preserved on the wp-block-group articles. */

/* Testimonial blockquote — wp:quote outputs wp-block-quote class */
.kw-testimonial .wp-block-quote{border:0;padding:0;margin:1rem 0 0}
.kw-testimonial .wp-block-quote p{font-family:var(--sans);font-weight:300;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.2;letter-spacing:-.025em;color:var(--ink);max-width:680px}
.kw-testimonial .wp-block-quote p em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-2)}

/* Testimonial quote mark — was <span class="kw-quote-mark">, now <p class="kw-quote-mark"> */
.kw-testimonial p.kw-quote-mark,p.kw-quote-mark{font-family:var(--serif);font-style:italic;font-weight:400;font-size:6rem;line-height:.5;color:var(--coral-text);opacity:.4;display:block;margin:0 0 1rem;font-style:italic}

/* Final CTA — was raw HTML, now centered group block. Already centered via text-align:center */
.kw-final h2{font-weight:700;font-size:clamp(2rem,4.5vw,3.5rem);line-height:1;letter-spacing:-.035em;color:#fff;margin-bottom:1.25rem}
.kw-final h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-2)}
.kw-final p{margin-top:1.25rem;font-size:1.1rem;line-height:1.5;color:#D9D9D9;max-width:580px;margin-left:auto;margin-right:auto}
.kw-final p.kw-ps{margin-top:1.5rem;font-family:var(--hand);font-size:1.3rem;color:var(--coral-2);transform:rotate(-1deg);display:inline-block}

/* WCAG patch — bento tile content selectors after refactor. The new markup
   wraps the .kw-more in a <p> + the eyebrow in a <p class="is-style-kwall-eyebrow">.
   Earlier override targeted `.kw-more` directly (now no longer the anchor)
   and earlier eyebrow override was outranked by my own p.is-style-kwall-eyebrow
   rule in round 2. Force overrides for tiles on colored backgrounds. */
.wp-block-group.is-style-kwall-tile.kw-tile--ochre p.is-style-kwall-eyebrow,
.kw-bento .kw-tile-tall p.is-style-kwall-eyebrow{
  color:var(--ink) !important;
  background:transparent !important;
  border-color:rgba(0,0,0,.25) !important;
}
.wp-block-group.is-style-kwall-tile.kw-tile--ochre p.kw-more a,
.kw-bento .kw-tile-tall p.kw-more a{color:var(--ink) !important}

.wp-block-group.is-style-kwall-tile.kw-tile--ocean-mist p.kw-more a,
.kw-bento .kw-tile-hero p.kw-more a{color:var(--ocean) !important}

.wp-block-group.is-style-kwall-tile.kw-tile--mint-wash p.kw-more a,
.kw-bento .kw-tile-half.products p.kw-more a{color:var(--mint-text) !important}

.wp-block-group.is-style-kwall-tile.kw-tile--coral-wash p.kw-more a,
.kw-bento .kw-tile-half.design p.kw-more a{color:var(--coral-text) !important}

.wp-block-group.is-style-kwall-tile.kw-tile--ocean p.kw-more a,
.wp-block-group.is-style-kwall-tile.kw-tile--ocean p.is-style-kwall-eyebrow{color:#fff !important}

/* Program tags with the dark variants */
.kw-program p.kw-tag,
.kw-program.kw-p-paper p.kw-tag{background:var(--mint-text);color:#fff}
.kw-program.kw-p-cream p.kw-tag{background:var(--ochre-text);color:#fff}
.kw-program.kw-p-ink p.kw-tag{background:var(--coral-text);color:#fff}
.kw-program.kw-p-mint p.kw-tag{background:var(--mint-text);color:#fff}
.kw-program.kw-p-coral p.kw-tag{background:var(--coral-text);color:#fff}

/* Programs detail-grid kw-pg-tag (used in programs-detail-grid pattern) */
.kw-pg-tag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:0.25rem .75rem;border-radius:99px;font-weight:600}

/* Testimonial ochre band — eyebrows need dark text on ochre */
.kw-testimonial .is-style-kwall-eyebrow,
.kw-testimonial p.is-style-kwall-eyebrow{
  color:var(--ink) !important;
  background:transparent !important;
  border-color:rgba(0,0,0,.25) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   BATCH-2 REFACTOR CSS — patterns converted from wp:html to core blocks
   ───────────────────────────────────────────────────────────────────────── */

/* Color helper ems (used in PHP-array patterns where em color varies per row) */
em.kw-em-ocean{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ocean)}
em.kw-em-ochre{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-text)}
em.kw-em-coral{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--coral-text)}
em.kw-em-mint{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--mint-text)}
em.kw-em-gold{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ochre-2)}

/* Programs detail grid (kw-pg-card) — paragraph & h3 children inside core groups */
.kw-programs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media (max-width:780px){.kw-programs-grid{grid-template-columns:1fr}}
.kw-pg-card{display:flex;flex-direction:column}
.kw-pg-card .kw-pg-tag{align-self:flex-start;margin:0 0 1.25rem}
.kw-pg-card.kw-pg-mint{background:var(--mint-wash);color:var(--mint-text)}
.kw-pg-tag.kw-pg-mint{background:var(--mint-wash);color:var(--mint-text)}
.kw-pg-tag.kw-pg-ochre{background:var(--ochre-wash);color:var(--ochre-text)}
.kw-pg-tag.kw-pg-coral{background:var(--coral-wash);color:var(--coral-text)}
.kw-pg-tag.kw-pg-ocean{background:var(--ocean-mist);color:var(--ocean)}
.kw-pg-tag.kw-pg-coral-solid{background:var(--coral-text);color:#fff}
.kw-pg-tag.kw-pg-ochre-solid{background:var(--ochre-text);color:#fff}
.kw-pg-card h3.kw-pg-h{font-weight:700;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink);margin-bottom:0.75rem}
.kw-pg-card p.kw-pg-lede{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin-bottom:1.5rem}
.kw-pg-meta{padding:1.25rem 0;border-top:1px solid var(--line);margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.kw-pg-meta-row{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline}
.kw-pg-meta-row p{margin:0}
.kw-pg-meta-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute-aa)}
.kw-pg-meta-v{color:var(--ink);font-weight:500;font-size:.88rem;line-height:1.4}
.kw-pg-cta{margin:auto 0 0;align-self:flex-start}
.kw-pg-cta a{color:var(--ocean);font-weight:600;font-size:.95rem;text-decoration:none}
.kw-pg-cta a:hover,.kw-pg-cta a:focus{text-decoration:underline}
/* Dark + wide pg-card variants */
.kw-pg-card.kw-pg-dark{background:var(--ink);color:#fff;border-color:transparent}
.kw-pg-card.kw-pg-dark h3.kw-pg-h{color:#fff}
.kw-pg-card.kw-pg-dark p.kw-pg-lede{color:#D9D9D9}
.kw-pg-card.kw-pg-dark .kw-pg-meta{border-top-color:rgba(255,255,255,.15);color:#D9D9D9}
.kw-pg-card.kw-pg-dark .kw-pg-meta-k{color:var(--ochre-2)}
.kw-pg-card.kw-pg-dark .kw-pg-meta-v{color:#fff}
.kw-pg-card.kw-pg-dark .kw-pg-cta a{color:var(--ochre-2)}
.kw-pg-card.kw-pg-wide{grid-column:1 / -1}
.kw-pg-card.kw-pg-warm{background:var(--ochre-wash)}
.kw-pg-card.kw-pg-warm .kw-pg-meta{max-width:900px}
.kw-pg-card.kw-pg-warm p.kw-pg-lede{max-width:760px}
.kw-pg-card.kw-pg-warm .kw-pg-cta a{color:var(--ochre-text)}
@media (min-width:780px){.kw-pg-card.kw-pg-warm .kw-pg-meta{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:.5rem 1.25rem}}

/* Careers job tiles — kw-job */
.kw-jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media (max-width:980px){.kw-jobs-grid{grid-template-columns:1fr}}
.kw-job{display:flex;flex-direction:column;height:100%}
.kw-job h3.kw-job-h{font-weight:600;font-size:1.2rem;line-height:1.22;letter-spacing:-.02em;margin-bottom:0.75rem;color:var(--ink)}
.kw-job p.kw-job-p{color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.kw-job-meta{margin-top:auto;padding-top:0.75rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;color:var(--ink-mute-aa)}
.kw-job-meta p{margin:0}
.kw-job-meta a{font-weight:500;text-decoration:none}
.kw-job-meta a.kw-link-ocean{color:var(--ocean)}
.kw-job-meta a.kw-link-coral{color:var(--coral-text)}
.kw-job-meta a.kw-link-ochre{color:var(--ochre-text)}
.kw-job-meta a:hover,.kw-job-meta a:focus{text-decoration:underline}

/* FAQ — wp:details refactor */
.kw-faq{display:flex;flex-direction:column;gap:.5rem;margin-top:2rem}
.kw-faq-item{border-bottom:1px solid var(--line);padding:1rem 0}
.kw-faq-item summary{cursor:pointer;font-family:var(--sans);font-weight:600;font-size:1.05rem;line-height:1.35;color:var(--ink);padding-right:2rem;position:relative;list-style:none}
.kw-faq-item summary::-webkit-details-marker{display:none}
.kw-faq-item summary::after{content:'+';position:absolute;right:0;top:0;font-family:var(--mono);font-size:1.3rem;font-weight:400;color:var(--ocean);transition:transform .2s ease}
.kw-faq-item[open] summary::after{content:'×';transform:rotate(0)}
.kw-faq-item summary:focus-visible{outline:2px solid var(--ocean);outline-offset:4px;border-radius:2px}
.kw-faq-answer{margin:0.75rem 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.65}
.kw-faq-answer a{color:var(--ocean)}

/* Filter pills — paragraph refactor */
.kw-filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
p.kw-filter-pill{display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.5rem 1rem;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;border-radius:99px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s;line-height:1}
p.kw-filter-pill:hover,p.kw-filter-pill:focus{background:var(--ocean-mist);border-color:var(--ocean)}
p.kw-filter-pill.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
p.kw-filter-pill .kw-count{font-size:.7rem;color:var(--ink-mute-aa);font-weight:400;background:rgba(0,0,0,.06);padding:.05rem 0.5rem;border-radius:99px}
p.kw-filter-pill.is-active .kw-count{background:rgba(255,255,255,.12);color:#fff}

/* Spark divider — now a paragraph */
p.kw-spark-divider{margin:0}

/* Contact form headline (was raw <h2> in wp:html) */
.kw-form-wrap h2.kw-form-h{font-weight:600;font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0 0 0.75rem}
.kw-form-wrap h2.kw-form-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ocean)}
.kw-form-wrap .kw-form-intro{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin-bottom:1.5rem}
.kw-form-wrap .kw-form-intro em{font-family:var(--serif);font-style:italic}

/* Dark section eyebrow override (was inline-style) */
.is-style-kwall-eyebrow.kw-on-dark,p.is-style-kwall-eyebrow.kw-on-dark{background:rgba(255,255,255,.06)!important;color:var(--ochre-2)!important;border-color:rgba(255,255,255,.1)!important}

/* Prose-page section utility — was wp:html .prose, now plain section */
.kw-prose-section p{font-size:1.05rem;line-height:1.7;color:var(--ink-soft);margin:0 0 1.25rem}
.kw-prose-section h2{font-weight:700;font-size:clamp(1.5rem,2.2vw,1.75rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:2.5rem 0 1rem}
.kw-prose-section h3{font-weight:600;font-size:1.15rem;line-height:1.3;color:var(--ink);margin:2rem 0 .75rem}
.kw-prose-section ul,.kw-prose-section ol{margin:0 0 1.5rem 1.25rem;color:var(--ink-soft);font-size:1.05rem;line-height:1.7}
.kw-prose-section li{margin-bottom:.5rem}
.kw-prose-section a{color:var(--ocean);text-decoration:underline;text-underline-offset:3px}

/* Work-magazine refactor — children are core groups, keep flow */
.kw-work-card .kw-work-thumb p.kw-badge{margin:0}
.kw-work-card .kw-work-thumb p.kw-mark{margin:0}
.kw-work-card .kw-work-thumb p.kw-ghost{margin:0}
.kw-work-body p{margin:0 0 0.75rem}
.kw-work-body .kw-work-meta p{margin:0;font-family:var(--mono);font-size:.72rem;color:var(--ink-mute-aa)}
.kw-work-body .kw-work-meta a.kw-read{color:var(--ocean);font-weight:600;text-decoration:none}
.kw-work-body .kw-work-meta a.kw-read:hover,.kw-work-body .kw-work-meta a.kw-read:focus{text-decoration:underline}

/* AI metric tile heading (used to be <div class="kw-ai-metric-num">, now h3) */
.kw-ai-tile.kw-ai-metric h3.kw-ai-metric-num{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(4rem,9vw,7rem);line-height:.9;color:var(--ochre-2);margin:0;letter-spacing:-.04em}
.kw-ai-tile.kw-ai-metric h3.kw-ai-metric-num em{color:var(--ochre-2);font-weight:400}

/* AI spotlight CTA — paragraph-wrapped anchors */
.kw-ai-spotlight-cta p{margin:0}

/* ─────────────────────────────────────────────────────────────────────────
   ANIMATED KWALL BRAND MARK
   Replaces the spinning .kw-spark next to the wordmark in header & footer.
   Inline SVG: chevron-K glyph + a slow orbiting brand-color accent dot.
   ───────────────────────────────────────────────────────────────────────── */
.kw-mark{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:var(--ocean);flex:0 0 auto}
.kw-mark--sm .kw-mark-svg{width:1.25em;height:1.25em}
.kw-mark--md .kw-mark-svg{width:1.6em;height:1.6em}
.kw-mark--lg .kw-mark-svg{width:2.4em;height:2.4em}
.kw-mark-svg{overflow:visible;display:block}

/* The K glyph — three filled chevrons. Static color (inherits currentColor).
   A very subtle "settling" entrance fades them in on first paint. */
.kw-mark-glyph polygon{transform-origin:center;transform-box:fill-box}
.kw-mark-glyph .kw-mark-stem{animation:kw-mark-enter-stem .9s cubic-bezier(.2,.7,.2,1) both}
.kw-mark-glyph .kw-mark-arm-top{animation:kw-mark-enter-top 1s .12s cubic-bezier(.2,.7,.2,1) both}
.kw-mark-glyph .kw-mark-arm-bot{animation:kw-mark-enter-bot 1s .24s cubic-bezier(.2,.7,.2,1) both}

@keyframes kw-mark-enter-stem{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
@keyframes kw-mark-enter-top{from{opacity:0;transform:translate(-3px,-3px)}to{opacity:1;transform:none}}
@keyframes kw-mark-enter-bot{from{opacity:0;transform:translate(-3px,3px)}to{opacity:1;transform:none}}

/* The orbiting accent dot — slowly rotates around the K vertex and cycles
   through the brand-color palette (ocean → ochre → coral → mint). */
.kw-mark-orbit{
  transform-origin:20px 20px;
  transform-box:view-box;
  animation:
    kw-mark-orbit 12s linear infinite,
    kw-mark-orbit-color 12s linear infinite;
}
@keyframes kw-mark-orbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes kw-mark-orbit-color{
   0%   {fill:var(--ocean)}
  25%  {fill:var(--ochre)}
  50%  {fill:var(--coral)}
  75%  {fill:var(--mint)}
  100% {fill:var(--ocean)}
}

/* Hover-state nudge — when you mouse the brand wordmark, the K subtly
   shifts and the orbit speeds up. Tiny easter egg, optional. */
.kw-brand:hover .kw-mark-glyph polygon{animation-duration:.6s}
.kw-brand:hover .kw-mark-orbit{animation-duration:4s,4s}

/* Footer variant — slightly different rhythm so header and footer don't
   click in lock-step (it's distracting on long pages). */
.kw-foot-brand .kw-mark-orbit{animation-duration:18s,18s}

/* Respect prefers-reduced-motion — disable orbit, keep static K. */
@media (prefers-reduced-motion: reduce){
  .kw-mark-glyph polygon,
  .kw-mark-orbit{animation:none !important}
  .kw-mark-orbit{fill:var(--ochre)}
}

/* ─────────────────────────────────────────────────────────────────────────
   POST-REFACTOR PATCHES — wp-block-group layout classes that shrink cards
   WordPress adds `has-global-padding` and `is-layout-constrained` to every
   wp:group, which applies root-padding to wrappers and max-width:contentSize
   to children. That collapses card-interior groups (thumb, body, meta) into
   centered narrow strips. Override here so each card behaves like a raw div.
   ───────────────────────────────────────────────────────────────────────── */

/* Card wrappers — zero root padding, no child max-width constraint */
.wp-block-group.kw-work-card.has-global-padding,
.wp-block-group.kw-team-card.has-global-padding,
.wp-block-group.kw-program.has-global-padding,
.wp-block-group.kw-job.has-global-padding,
.wp-block-group.kw-pg-card.has-global-padding,
.wp-block-group.kw-ai-card.has-global-padding,
.wp-block-group.kw-ai-tile.has-global-padding,
.wp-block-group.kw-tl-step.has-global-padding,
.wp-block-group.kw-faq-item.has-global-padding{
  padding-left:0;padding-right:0;
}

/* Card-interior wrappers — restore their own padding/no padding */
.wp-block-group.kw-work-card{padding:0}
.wp-block-group.kw-work-thumb{padding:1.5rem !important}
.wp-block-group.kw-work-body{padding:1.75rem 1.5rem !important}
.wp-block-group.kw-work-thumb.has-global-padding,
.wp-block-group.kw-work-body.has-global-padding,
.wp-block-group.kw-team-avatar.has-global-padding{padding-left:0;padding-right:0}

/* Constrained-layout child centering — WP applies max-width:contentSize and
   margin:0 auto !important to all children of any wp-block-group whose layout
   is constrained. That collapses the metadata grid (INCLUDES / BEST FOR / ...)
   to a centered narrow strip. Override with !important so children fill the
   card content area, then let our own grid/flex CSS define the layout. */
.kw-work-card.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-work-thumb.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-work-body.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-work-mag.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-work-secondary.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-team-card.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-team-avatar.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-team-grid.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-program.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-program-track.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-pg-card.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-pg-meta.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-pg-meta-row.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-programs-grid.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-job.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-jobs-grid.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-ai-card.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-ai-tile.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-ai-stack.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-ai-bento.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-tl-step.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-timeline-track.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-bento.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-faq.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-faq-item.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-contact-card.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.kw-contact-grid.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.is-style-kwall-tile.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Belt-and-suspenders: explicit width for the meta block inside pg-card so
   the 4 metadata rows fill the card content area (not centered narrow). */
.kw-pg-card .kw-pg-meta{width:100%;display:flex;flex-direction:column;gap:.5rem}
.kw-pg-card .kw-pg-meta-row{width:100%;display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline}
.kw-pg-card .kw-pg-meta-row p{margin:0}
.kw-pg-card .kw-pg-cta{width:100%;margin:auto 0 0}
.kw-pg-card .kw-pg-cta a{text-align:left}

/* CARD-INTERIOR GROUPS MUST FILL THEIR PARENT — wp:group auto-adds
   has-global-padding + is-layout-constrained classes which inject root
   padding + max-width:contentSize margin:auto. For card-interior groups
   (thumb, body, tile, etc.) this collapses them into shrunk centered
   strips. Force them back to width:100% with no padding-from-root. */
.wp-block-group.kw-work-card,
.wp-block-group.kw-work-thumb,
.wp-block-group.kw-work-body,
.wp-block-group.kw-work-mag,
.wp-block-group.kw-work-secondary,
.wp-block-group.kw-team-card,
.wp-block-group.kw-team-avatar,
.wp-block-group.kw-program,
.wp-block-group.kw-job,
.wp-block-group.kw-pg-card,
.wp-block-group.kw-pg-meta,
.wp-block-group.kw-ai-tile,
.wp-block-group.kw-ai-card,
.wp-block-group.kw-tl-step,
.wp-block-group.kw-contact-card,
.wp-block-group.is-style-kwall-tile{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
/* Strip root padding (has-global-padding) from card wrappers */
.wp-block-group.kw-work-card.has-global-padding,
.wp-block-group.kw-work-thumb.has-global-padding,
.wp-block-group.kw-work-body.has-global-padding,
.wp-block-group.kw-team-card.has-global-padding,
.wp-block-group.kw-program.has-global-padding,
.wp-block-group.kw-job.has-global-padding,
.wp-block-group.kw-pg-card.has-global-padding,
.wp-block-group.kw-ai-tile.has-global-padding,
.wp-block-group.kw-ai-card.has-global-padding,
.wp-block-group.kw-tl-step.has-global-padding,
.wp-block-group.kw-contact-card.has-global-padding,
.wp-block-group.is-style-kwall-tile.has-global-padding{
  padding-left:0 !important;
  padding-right:0 !important;
}
/* Re-assert each card's intended interior padding (was on raw-div CSS) */
.wp-block-group.kw-work-card{padding:0 !important}
.wp-block-group.kw-work-thumb{padding:1.5rem !important; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden}
.wp-block-group.kw-work-body{padding:1.75rem 1.5rem !important; flex:1; display:flex; flex-direction:column}
.wp-block-group.is-style-kwall-tile{padding:1.75rem !important}
.wp-block-group.kw-program{padding:1.75rem !important}
.wp-block-group.kw-team-card{padding:1.75rem !important}
.wp-block-group.kw-pg-card{padding:1.75rem !important}
.wp-block-group.kw-job{padding:1.75rem !important}
.wp-block-group.kw-contact-card{padding:1.75rem !important}
.wp-block-group.kw-ai-tile,
.wp-block-group.kw-ai-card{padding:1.75rem !important}
.wp-block-group.kw-tl-step{padding:0 !important}

/* CRITICAL: the has-global-padding strip block above zeros padding-left/right
   with !important at (0,3,0) specificity, which OUT-RANKS the (0,2,0) re-assert
   rules just above — so every card carrying WP's has-global-padding class loses
   its side padding and the text sits flush against the edge. Re-assert the full
   intended padding at MATCHING specificity (class + .has-global-padding), placed
   after the strip block so equal-specificity !important rules resolve in our
   favour. This restores left/right padding on all four sides for every card. */
.wp-block-group.is-style-kwall-tile.has-global-padding{padding:2rem !important}
.wp-block-group.kw-work-body.has-global-padding{padding:1.75rem 1.5rem !important}
.wp-block-group.kw-work-thumb.has-global-padding{padding:1.5rem !important}
.wp-block-group.kw-work-card.has-global-padding{padding:0 !important}
.wp-block-group.kw-program.has-global-padding{padding:1.75rem !important}
.wp-block-group.kw-team-card.has-global-padding{padding:1.75rem !important}
.wp-block-group.kw-pg-card.has-global-padding{padding:1.75rem !important}
.wp-block-group.kw-job.has-global-padding{padding:1.75rem !important}
.wp-block-group.kw-contact-card.has-global-padding{padding:1.75rem !important}
.wp-block-group.kw-ai-tile.has-global-padding,
.wp-block-group.kw-ai-card.has-global-padding{padding:1.75rem !important}
.wp-block-group.kw-tl-step.has-global-padding{padding:0 !important}

/* Team-grid refactor — photos instead of letter initials + LinkedIn link */
.kw-team-card .kw-team-photo{margin:0 0 1rem;padding:0}
.kw-team-card .kw-team-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block}
.kw-team-card p.kw-linkedin{margin:.75rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}
.kw-team-card p.kw-linkedin a{color:var(--ocean);text-decoration:none;font-weight:600}
.kw-team-card p.kw-linkedin a:hover,
.kw-team-card p.kw-linkedin a:focus{text-decoration:underline}
.kw-team-card p.kw-name{margin:0;font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.015em}
.kw-team-card p.kw-role{margin:.15rem 0 .5rem;font-size:.85rem;color:var(--ink-soft);line-height:1.35}
.kw-team-card p.kw-bit{margin:0;font-size:.82rem;color:var(--ink-mute-aa);line-height:1.5}

/* Footer social icons */
.kw-foot-social{list-style:none;margin:1rem 0 0;padding:0;display:flex;gap:.75rem;align-items:center;width:100%;justify-content:flex-end}
.kw-foot-social li{margin:0}
.kw-foot-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:99px;
  background:rgba(255,255,255,.06);
  color:#D9D9D9;
  transition:background .18s,color .18s,transform .18s;
  text-decoration:none;
}
.kw-foot-social a:hover,
.kw-foot-social a:focus-visible{
  background:var(--ochre-2);
  color:var(--ink);
  transform:translateY(-2px);
}
.kw-foot-social svg{display:block}
@media (max-width:780px){
  .kw-foot-social{justify-content:flex-start;margin-top:1.25rem}
}

/* NOTES ARCHIVE — dynamic blog index in the Imagination style */
.kw-notes-archive .kw-notes-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute-aa);margin:0}

.kw-notes-feature{margin-top:3rem;margin-bottom:3rem}
.kw-notes-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.kw-notes-card:hover,.kw-notes-card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.kw-notes-card-link{display:block;color:inherit;text-decoration:none}
.kw-notes-card-link:focus-visible{outline:2px solid var(--ocean);outline-offset:4px;border-radius:24px}

/* The card has ONE child (the <a> card-link), which carries its own 2-col
   grid. Making the card itself a 2-col grid squeezed the link into column 1
   and left column 2 as dead whitespace. The card is just a block. */
.kw-notes-card--feature{display:block}
.kw-notes-card--feature .kw-notes-card-link{display:grid;grid-template-columns:1.2fr 1fr;gap:0;align-items:stretch;width:100%}
.kw-notes-card--feature .kw-notes-thumb{aspect-ratio:auto;min-height:340px;border-radius:0}
.kw-notes-card--feature .kw-notes-body{padding:2.5rem 2.75rem}
.kw-notes-card--feature h2{font-weight:700;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.025em;margin:0.5rem 0 0.75rem;color:var(--ink)}
.kw-notes-card--feature h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ocean)}

@media (max-width:880px){
  .kw-notes-card--feature,
  .kw-notes-card--feature .kw-notes-card-link{grid-template-columns:1fr}
  .kw-notes-card--feature .kw-notes-thumb{min-height:240px}
  .kw-notes-card--feature .kw-notes-body{padding:1.5rem 1.5rem 1.75rem}
}

.kw-notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem}
@media (max-width:980px){.kw-notes-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.kw-notes-grid{grid-template-columns:1fr}}
.kw-notes-grid .kw-notes-card{display:flex;flex-direction:column;height:100%}

.kw-notes-thumb{position:relative;width:100%;aspect-ratio:16/10;background:var(--ocean);overflow:hidden;display:flex;align-items:center;justify-content:center}
.kw-notes-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kw-notes-thumb.kw-t-ocean{background:var(--ocean)}
.kw-notes-thumb.kw-t-coral{background:var(--coral-deep)}
.kw-notes-thumb.kw-t-mint{background:var(--mint)}
.kw-notes-thumb.kw-t-ochre{background:var(--ochre)}
.kw-notes-thumb.kw-t-ink{background:var(--ink-2)}
.kw-notes-ghost{font-family:var(--serif);font-style:italic;font-weight:400;font-size:8rem;line-height:1;color:rgba(255,255,255,.18);text-shadow:0 2px 18px rgba(0,0,0,.08)}
.kw-notes-thumb.kw-t-ochre .kw-notes-ghost{color:rgba(0,0,0,.22)}

.kw-notes-body{padding:1.75rem 1.75rem;display:flex;flex-direction:column;flex:1}
.kw-notes-body h3{font-weight:600;font-size:1.2rem;line-height:1.22;letter-spacing:-.015em;color:var(--ink);margin:0.5rem 0 0.75rem}
.kw-notes-body h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ocean)}
.kw-notes-body p.kw-notes-lede{margin:0 0 1.25rem;color:var(--ink-soft);font-size:.92rem;line-height:1.55;flex:1}
.kw-notes-body p.kw-notes-meta-row{margin:auto 0 0;padding-top:0.75rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--ink-mute-aa);letter-spacing:.04em}

/* LEGAL TABLE — subprocessor list + similar matrices */
.kw-legal-table{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);margin-top:1rem}
.kw-legal-row{display:grid;grid-template-columns:1.2fr 2fr 2fr 1fr;gap:1.25rem;padding:1rem 1.25rem;border-top:1px solid var(--line);font-size:.9rem;line-height:1.5;color:var(--ink-soft);align-items:start}
.kw-legal-row:first-child{border-top:0}
.kw-legal-row.kw-legal-head{background:var(--ocean-mist);color:var(--ocean);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.kw-legal-row.kw-legal-head > div{color:var(--ocean)}
.kw-legal-row strong{color:var(--ink);font-weight:600}
@media (max-width:780px){
  .kw-legal-row{grid-template-columns:1fr;gap:0.5rem}
  .kw-legal-row.kw-legal-head{display:none}
  .kw-legal-row{padding:1.25rem}
}
.kw-legal-note{margin-top:1.5rem;font-size:.85rem;color:var(--ink-mute-aa);font-style:italic;line-height:1.6;max-width:760px}

/* Notice at Collection paragraph under the contact form */
.kw-form-wrap p.kw-form-notice{
  margin:1.5rem 0 0;
  padding:1rem 1.25rem;
  background:var(--ocean-mist);
  border-left:3px solid var(--ocean);
  border-radius:0 10px 10px 0;
  font-size:.85rem;line-height:1.55;color:var(--ink-soft);
}
.kw-form-wrap p.kw-form-notice strong{color:var(--ink);font-weight:600}
.kw-form-wrap p.kw-form-notice a{color:var(--ocean);font-weight:500}

/* Re-assert absolute positioning on overlay children of the thumb */
.kw-work-thumb p.kw-badge{position:absolute;top:1rem;left:1rem;margin:0;z-index:3}
.kw-work-thumb p.kw-ghost{position:absolute;top:-1.5rem;right:-1rem;font-family:var(--serif);font-style:italic;font-weight:400;font-size:9rem;line-height:.7;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);pointer-events:none;margin:0;z-index:1}
.kw-work-thumb.kw-t-mint p.kw-ghost,
.kw-work-thumb.kw-t-coral p.kw-ghost,
.kw-work-thumb.kw-t-ochre p.kw-ghost,
.kw-work-thumb.kw-t-ink p.kw-ghost{font-size:9rem;top:-1.5rem}
.kw-work-thumb.kw-t-ochre p.kw-ghost{-webkit-text-stroke:1.5px rgba(0,0,0,.22)}
.kw-work-thumb p.kw-mark{margin:0;font-weight:700;font-size:clamp(1.5rem,3vw,2.5rem);color:inherit;letter-spacing:-.03em;position:relative;z-index:2}

/* GHOST BUTTON ON DARK SECTIONS — original .is-style-kwall-ghost uses
   color:var(--ink) which is invisible on the dark .kw-final / dark-section
   backgrounds. Force light-on-dark when inside any dark section. */
.is-style-kwall-dark-section .wp-block-button.is-style-kwall-ghost .wp-block-button__link,
.kw-final .wp-block-button.is-style-kwall-ghost .wp-block-button__link{
  color:#fff !important;
  border-color:rgba(255,255,255,.5) !important;
  background:transparent;
}
.is-style-kwall-dark-section .wp-block-button.is-style-kwall-ghost .wp-block-button__link:hover,
.is-style-kwall-dark-section .wp-block-button.is-style-kwall-ghost .wp-block-button__link:focus,
.kw-final .wp-block-button.is-style-kwall-ghost .wp-block-button__link:hover,
.kw-final .wp-block-button.is-style-kwall-ghost .wp-block-button__link:focus{
  background:#fff !important;
  color:var(--ink) !important;
  border-color:#fff !important;
}

/* Dark-ink variant of the testimonial band (Rebecka Hall · Old Dominion) */
.kw-testimonial--ink{background:var(--ink);color:#fff}
.kw-testimonial--ink .wp-block-quote p{color:#fff}
.kw-testimonial--ink .wp-block-quote p em{color:var(--ochre-2)}
.kw-testimonial--ink .kw-quote-mark,
.kw-testimonial--ink p.kw-quote-mark{color:var(--ochre-2);opacity:.5}
.kw-testimonial--ink .kw-author-block{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.kw-testimonial--ink .kw-author-info p{color:#D9D9D9}
.kw-testimonial--ink .kw-author-info p strong{color:#fff}
.kw-testimonial--ink .kw-author-avatar{background:var(--ochre-2);color:var(--ink)}
.kw-testimonial--ink .is-style-kwall-eyebrow{color:var(--ochre-2)!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important}

/* CONTACT INFO BLOCK — 4-up grid above the form on the Hire/Contact page */
.kw-contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media (max-width:980px){.kw-contact-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kw-contact-grid{grid-template-columns:1fr}}
.kw-contact-card{display:flex;flex-direction:column;gap:0.5rem;padding:1.75rem}
.kw-contact-card p.kw-contact-eyebrow{margin:0 0 0.75rem;align-self:flex-start}
.kw-contact-card p.kw-contact-line{margin:0;color:var(--ink);font-weight:600;font-size:1.05rem;line-height:1.35}
.kw-contact-card p.kw-contact-big{margin:0 0 0.5rem;font-weight:700;font-size:1.15rem;letter-spacing:-.015em;line-height:1.25;word-break:break-word}
.kw-contact-card p.kw-contact-big a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ocean)}
.kw-contact-card p.kw-contact-big a:hover,.kw-contact-card p.kw-contact-big a:focus{color:var(--ocean)}
.kw-contact-card p.kw-contact-note{margin:auto 0 0;color:var(--ink-mute-aa);font-size:.82rem;line-height:1.5}
.kw-contact-card p.kw-contact-cta{margin:auto 0 0;font-size:.82rem;font-family:var(--mono);letter-spacing:.04em}
.kw-contact-card p.kw-contact-cta a{color:var(--ocean);font-weight:600;text-decoration:none}
.kw-contact-card p.kw-contact-cta a:hover,.kw-contact-card p.kw-contact-cta a:focus{text-decoration:underline}

/* ==========================================================================
   SUBTLE MOTION LAYER  (paired with assets/js/motion.js)
   Scroll-reveal: section + grid children fade and rise into place as they enter
   the viewport. All hidden states are scoped under html.kw-motion, which the JS
   only adds when motion is allowed — so without JS, or with prefers-reduced-
   motion, nothing is ever hidden. JS also force-reveals after 2.5s as a backstop.
   ========================================================================== */
html.kw-motion .kw-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.2,1);
  will-change:opacity, transform;
}
html.kw-motion .kw-reveal.kw-in{opacity:1;transform:none}
/* Belt-and-suspenders: if the OS-level reduced-motion preference is on, never
   hide or animate, even if html.kw-motion somehow got set. */
@media (prefers-reduced-motion:reduce){
  html.kw-motion .kw-reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* Gentle hover depth on the content cards that didn't already lift, so the whole
   card system feels consistently tactile (tiles/team already lift on hover). */
@media (hover:hover){
  .kw-work-card,.kw-notes-card,.kw-pg-card,.kw-job,.kw-contact-card,.kw-program{
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .kw-work-card:hover,.kw-notes-card:hover,.kw-pg-card:hover,
  .kw-job:hover,.kw-contact-card:hover,.kw-program:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px -16px rgba(0,0,0,.18), 0 4px 10px -6px rgba(0,0,0,.08);
  }
}
@media (prefers-reduced-motion:reduce){
  .kw-work-card,.kw-notes-card,.kw-pg-card,.kw-job,.kw-contact-card,.kw-program{transition:none}
  .kw-work-card:hover,.kw-notes-card:hover,.kw-pg-card:hover,
  .kw-job:hover,.kw-contact-card:hover,.kw-program:hover{transform:none}
}

/* ==========================================================================
   EYEBROW REFRESH — simpler + bolder. Drops the pill outline and the little
   four-color spark wheel in favour of a clean bold mono label preceded by a
   short colored lead bar. Applies everywhere is-style-kwall-eyebrow is used.
   ========================================================================== */
.is-style-kwall-eyebrow{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.14em;
  gap:0.5rem;
}
.is-style-kwall-eyebrow .kw-spark{display:none}
.is-style-kwall-eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:1.5rem;
  height:2px;
  border-radius:2px;
  background:var(--ochre);
}
/* toned back: one consistent ochre tick on all eyebrows (was per-section rainbow) */
.is-style-kwall-eyebrow.kw-on-dark::before{background:var(--ochre-2)}
/* On solid-color tiles the lead bar should read against the fill. */
.kw-tile--ocean .is-style-kwall-eyebrow::before{background:rgba(255,255,255,.85)}

/* ==========================================================================
   WCAG 2.2 AA — focus, target size, motion, obscured-focus
   ========================================================================== */
/* Visible keyboard focus everywhere (2.4.7). Mouse clicks use :focus-visible so
   the ring only shows for keyboard/AT users. */
*:focus-visible{
  outline:3px solid var(--ocean) !important;
  outline-offset:2px;
  border-radius:3px;
}
.kw-nav-cta:focus-visible,
.wp-block-button__link:focus-visible{outline-offset:3px}
/* 2.4.11 Focus Not Obscured — keep focused targets clear of the sticky header. */
html{scroll-padding-top:84px}
:focus-visible{scroll-margin-top:84px}
/* 2.5.8 Target Size (min 24px) — footer nav links. */
.kw-foot-col ul a{display:block;padding:0.5rem 0;min-height:24px}
.kw-foot-col ul li{padding:0}
/* 2.3.3 — pause the client-logo marquee for reduced-motion users. */
@media (prefers-reduced-motion:reduce){
  .kw-marquee-track{animation-play-state:paused !important}
}
/* Filter pills are now native <button>s — normalize away UA chrome so they keep
   the pill look from the base .kw-filter-pill rule. */
button.kw-filter-pill{appearance:none;-webkit-appearance:none;margin:0;line-height:1;font:inherit;font-family:var(--mono)}

/* ==========================================================================
   WORK GRID — dynamic project cards: real featured images at one consistent
   aspect ratio, compact body, whole card is a link to the case study. Compact
   so a large monitor stays scannable. Overrides the old color-block thumbs.
   ========================================================================== */
.kw-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
@media (max-width:900px){.kw-work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kw-work-grid{grid-template-columns:1fr}}
.kw-work-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex}
.kw-work-link{display:flex;flex-direction:column;height:100%;width:100%;text-decoration:none;color:inherit}
.kw-work-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ocean-mist);padding:0;display:block;color:inherit}
.kw-work-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.kw-work-card:hover .kw-work-thumb img{transform:scale(1.04)}
.kw-work-thumb .kw-badge{position:absolute;top:.7rem;left:.7rem;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);padding:.28rem 0.75rem;border-radius:99px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;max-width:calc(100% - 1.4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2}
.kw-work-body{padding:1rem 1rem 1.25rem;display:flex;flex-direction:column;gap:0.25rem;flex:1}
.kw-work-title{font-weight:600;font-size:1.02rem;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.kw-work-body .kw-read{margin:auto 0 0;color:var(--ocean);font-weight:600;font-size:.78rem;font-family:var(--mono);letter-spacing:.02em}
.kw-work-card:hover .kw-work-body .kw-read{text-decoration:underline}


/* ==========================================================================
   BRAND RIBBON PATTERN — the guide's second pattern ("echoes the feel of the
   logomark, an integrated interweaving"). Two subtle, elegant placements:
   1. A slim woven ribbon seam at the top of the footer (aqua family, like
      the guide's monochrome aqua ribbon).
   2. A low-contrast lattice weave over the testimonial band ("lower
      contrast for more subtle texturing").
   ========================================================================== */
.kw-site-footer{position:relative}
.kw-site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(-45deg,
    var(--ocean) 0 16px,
    var(--ocean-soft) 16px 32px,
    var(--mint-2) 32px 48px,
    var(--ocean-2) 48px 64px);
}
.kw-testimonial::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 10px, transparent 10px 30px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.09) 0 10px, transparent 10px 30px);
}
.kw-testimonial-inner{position:relative;z-index:1}

/* ==========================================================================
   FILTER PILLS — center the row. The pills block (Higher Ed · Government ·
   Enterprise · …) sat flex-start while surrounding sections are centered;
   center it everywhere the block is used (work, insights, etc.).
   ========================================================================== */
.kw-filters{justify-content:center}

/* ==========================================================================
   PAGE-HERO META STRIP — center the dot-separated facts row
   (Higher Ed · Government · Enterprise · ...) in every page hero: work,
   redesign pages, blog posts, project pages. (KW request, 2026-06-04.)
   ========================================================================== */
.kw-page-hero p.is-style-kwall-meta,
.kw-page-hero .is-style-kwall-meta{
  display:block;text-align:center;margin-left:auto;margin-right:auto;
}


/* ==========================================================================
   BRAND CONNECT PASS (v1.1.4)
   1. Point pattern on every interior page hero (was homepage-only).
   2. Brand text-selection color.
   3. Spark dingbat -> official chevron-K logomark (pillar + ribbon + K),
      token-colored via mask so it follows the palette everywhere.
   4. Icon set per the guide's icon grid (simple, solid, approachable) on
      the homepage bento tiles + programs grid. Token-colored CSS masks.
   ========================================================================== */

/* 1 — interior page heroes get the same fading point texture as the homepage */
.kw-page-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(10,110,150,.12) 1.5px,transparent 1.6px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
}

/* 2 — brand selection highlight */
::selection{background:var(--ochre-2);color:var(--ink)}

/* 3 — spark -> chevron-K brand logomark */
.kw-spark{
  background-color:var(--ocean);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='4,4 10,4 10,36 4,36'/%3E%3Cpolygon points='10,20 24,4 31,4 14,20'/%3E%3Cpolygon points='10,20 14,20 31,36 24,36'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='4,4 10,4 10,36 4,36'/%3E%3Cpolygon points='10,20 24,4 31,4 14,20'/%3E%3Cpolygon points='10,20 14,20 31,36 24,36'/%3E%3C/svg%3E") center/contain no-repeat;
}
.kw-spark::before,.kw-spark::after,
.kw-spark > i::before,.kw-spark > i::after{display:none!important}
.kw-spark.is-spin{animation:none}
.kw-ai-pill .kw-spark{background-color:var(--ink)}
.is-style-kwall-dark-section .kw-spark,
.kw-final .kw-spark{background-color:var(--ochre-2)}

/* 4 — brand icon set (guide icon grid). Each icon is an alpha mask so the
   fill color comes from tokens. Applied to the static homepage instances. */
/* default: no icon assigned -> fully-transparent mask hides the ::before,
   so new pages can reuse tile classes without getting a colored square */
.kw-bento .is-style-kwall-tile,
.kw-program-track .kw-program{--kw-ic:linear-gradient(transparent,transparent)}
.kw-bento .kw-tile-hero::before,
.kw-bento .kw-tile-tall::before,
.kw-bento .kw-tile-half::before,
.kw-bento .kw-tile-mini::before,
.kw-program-track .kw-program::before{
  content:'';width:28px;height:28px;flex:0 0 auto;margin-bottom:1rem;
  background-color:var(--ocean);
  -webkit-mask:var(--kw-ic) center/contain no-repeat;
  mask:var(--kw-ic) center/contain no-repeat;
}
.kw-bento .kw-tile-hero{--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z'/%3E%3C/svg%3E")}
.kw-bento .kw-tile-tall{--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z'/%3E%3C/svg%3E")}
.kw-bento .kw-tile-tall::before{background-color:var(--ink)}
.kw-bento .kw-tile-half.products,
.kw-bento .kw-tile--mint-wash{--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.3 6.5 3.6L12 11.5 5.5 7.9 12 4.3ZM5 9.6l6 3.3v6.5l-6-3.3V9.6Zm14 0v6.5l-6 3.3v-6.5l6-3.3Z'/%3E%3C/svg%3E")}
.kw-bento .kw-tile--mint-wash::before{background-color:var(--mint-text)}
.kw-bento .kw-tile-half.design,
.kw-bento .kw-tile--coral-wash{--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3Zm10 0h8v8h-8V3ZM3 13h8v8H3v-8Zm10 0h8v8h-8v-8Z'/%3E%3C/svg%3E")}
.kw-bento .kw-tile--coral-wash::before{background-color:var(--coral-text)}
.kw-bento .kw-tile-mini{--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E")}
.kw-bento .kw-tile-mini.kw-tile--ocean::before{background-color:#fff}
.kw-program-track .kw-program:nth-child(1){--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z'/%3E%3C/svg%3E")}
.kw-program-track .kw-program:nth-child(2){--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E")}
.kw-program-track .kw-program:nth-child(3){--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14Z'/%3E%3Cpath d='M12 9.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z'/%3E%3C/svg%3E")}
.kw-program-track .kw-program:nth-child(4){--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E")}
.kw-program-track .kw-program:nth-child(5){--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E")}
.kw-program-track .kw-program:nth-child(6){--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E")}
.kw-program-track .kw-program:nth-child(7){--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z'/%3E%3C/svg%3E")}
.kw-program-track .kw-program:nth-child(8){--kw-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E")}
.kw-program-track .kw-program.kw-p-ink::before{background-color:var(--ochre-2)}
.kw-program-track .kw-program.kw-p-cream::before{background-color:var(--ochre-text)}
.kw-program-track .kw-program.kw-p-mint::before{background-color:var(--mint-text)}
.kw-program-track .kw-program.kw-p-coral::before{background-color:var(--coral-text)}

/* ==========================================================================
   WCAG 1.4.11 — focus ring on dark surfaces. The global :focus-visible ring
   is aqua-deep (#0A6E96), which is only 2.2:1 against charcoal. Use the
   light aqua (#59C8DE = 6.5:1 on charcoal) inside every dark context.
   ========================================================================== */
.is-style-kwall-dark-section *:focus-visible,
.kw-final *:focus-visible,
.kw-ai-spotlight *:focus-visible,
.kw-site-footer *:focus-visible,
.kw-testimonial--ink *:focus-visible,
.kw-program.kw-p-ink *:focus-visible,
.is-style-kwall-tile-quote *:focus-visible,
.kw-pg-card.kw-pg-dark *:focus-visible,
.kw-stat.kw-s1 *:focus-visible{
  outline-color:var(--ocean-soft) !important;
}

/* ==========================================================================

   WCAG audit follow-up (Lighthouse, 2026-06-04) — dark-context fixes.

   1. Eyebrow color variants carry light-bg AA colors with !important, which

      also won inside dark sections (2.1:1). Light counterparts on dark.

   2. Serif-italic em in dark-section headings was burnt orange on charcoal

      (2.75:1 at 28px, needs 3:1). Amber-soft on dark.

   3. AddToAny share icons under 24px target size (2.5.8).

   ========================================================================== */

.is-style-kwall-dark-section p.is-style-kwall-eyebrow.kw-gold, .is-style-kwall-dark-section .is-style-kwall-eyebrow.kw-gold,
.kw-final p.is-style-kwall-eyebrow.kw-gold, .kw-final .is-style-kwall-eyebrow.kw-gold,
.kw-ai-spotlight p.is-style-kwall-eyebrow.kw-gold, .kw-ai-spotlight .is-style-kwall-eyebrow.kw-gold,
.kw-testimonial--ink p.is-style-kwall-eyebrow.kw-gold, .kw-testimonial--ink .is-style-kwall-eyebrow.kw-gold,
.is-style-kwall-tile-quote p.is-style-kwall-eyebrow.kw-gold, .is-style-kwall-tile-quote .is-style-kwall-eyebrow.kw-gold,
.kw-pg-card.kw-pg-dark p.is-style-kwall-eyebrow.kw-gold, .kw-pg-card.kw-pg-dark .is-style-kwall-eyebrow.kw-gold,
.kw-stat.kw-s1 p.is-style-kwall-eyebrow.kw-gold, .kw-stat.kw-s1 .is-style-kwall-eyebrow.kw-gold,
.kw-site-footer p.is-style-kwall-eyebrow.kw-gold, .kw-site-footer .is-style-kwall-eyebrow.kw-gold,
.kw-program.kw-p-ink p.is-style-kwall-eyebrow.kw-gold, .kw-program.kw-p-ink .is-style-kwall-eyebrow.kw-gold{color:var(--ochre-2) !important}

.is-style-kwall-dark-section p.is-style-kwall-eyebrow.kw-warm, .is-style-kwall-dark-section .is-style-kwall-eyebrow.kw-warm,
.kw-final p.is-style-kwall-eyebrow.kw-warm, .kw-final .is-style-kwall-eyebrow.kw-warm,
.kw-ai-spotlight p.is-style-kwall-eyebrow.kw-warm, .kw-ai-spotlight .is-style-kwall-eyebrow.kw-warm,
.kw-testimonial--ink p.is-style-kwall-eyebrow.kw-warm, .kw-testimonial--ink .is-style-kwall-eyebrow.kw-warm,
.is-style-kwall-tile-quote p.is-style-kwall-eyebrow.kw-warm, .is-style-kwall-tile-quote .is-style-kwall-eyebrow.kw-warm,
.kw-pg-card.kw-pg-dark p.is-style-kwall-eyebrow.kw-warm, .kw-pg-card.kw-pg-dark .is-style-kwall-eyebrow.kw-warm,
.kw-stat.kw-s1 p.is-style-kwall-eyebrow.kw-warm, .kw-stat.kw-s1 .is-style-kwall-eyebrow.kw-warm,
.kw-site-footer p.is-style-kwall-eyebrow.kw-warm, .kw-site-footer .is-style-kwall-eyebrow.kw-warm,
.kw-program.kw-p-ink p.is-style-kwall-eyebrow.kw-warm, .kw-program.kw-p-ink .is-style-kwall-eyebrow.kw-warm{color:var(--coral-2) !important}

.is-style-kwall-dark-section p.is-style-kwall-eyebrow.kw-mint, .is-style-kwall-dark-section .is-style-kwall-eyebrow.kw-mint,
.kw-final p.is-style-kwall-eyebrow.kw-mint, .kw-final .is-style-kwall-eyebrow.kw-mint,
.kw-ai-spotlight p.is-style-kwall-eyebrow.kw-mint, .kw-ai-spotlight .is-style-kwall-eyebrow.kw-mint,
.kw-testimonial--ink p.is-style-kwall-eyebrow.kw-mint, .kw-testimonial--ink .is-style-kwall-eyebrow.kw-mint,
.is-style-kwall-tile-quote p.is-style-kwall-eyebrow.kw-mint, .is-style-kwall-tile-quote .is-style-kwall-eyebrow.kw-mint,
.kw-pg-card.kw-pg-dark p.is-style-kwall-eyebrow.kw-mint, .kw-pg-card.kw-pg-dark .is-style-kwall-eyebrow.kw-mint,
.kw-stat.kw-s1 p.is-style-kwall-eyebrow.kw-mint, .kw-stat.kw-s1 .is-style-kwall-eyebrow.kw-mint,
.kw-site-footer p.is-style-kwall-eyebrow.kw-mint, .kw-site-footer .is-style-kwall-eyebrow.kw-mint,
.kw-program.kw-p-ink p.is-style-kwall-eyebrow.kw-mint, .kw-program.kw-p-ink .is-style-kwall-eyebrow.kw-mint{color:var(--mint-2) !important}

.is-style-kwall-dark-section p.is-style-kwall-eyebrow.kw-ocean, .is-style-kwall-dark-section .is-style-kwall-eyebrow.kw-ocean,
.kw-final p.is-style-kwall-eyebrow.kw-ocean, .kw-final .is-style-kwall-eyebrow.kw-ocean,
.kw-ai-spotlight p.is-style-kwall-eyebrow.kw-ocean, .kw-ai-spotlight .is-style-kwall-eyebrow.kw-ocean,
.kw-testimonial--ink p.is-style-kwall-eyebrow.kw-ocean, .kw-testimonial--ink .is-style-kwall-eyebrow.kw-ocean,
.is-style-kwall-tile-quote p.is-style-kwall-eyebrow.kw-ocean, .is-style-kwall-tile-quote .is-style-kwall-eyebrow.kw-ocean,
.kw-pg-card.kw-pg-dark p.is-style-kwall-eyebrow.kw-ocean, .kw-pg-card.kw-pg-dark .is-style-kwall-eyebrow.kw-ocean,
.kw-stat.kw-s1 p.is-style-kwall-eyebrow.kw-ocean, .kw-stat.kw-s1 .is-style-kwall-eyebrow.kw-ocean,
.kw-site-footer p.is-style-kwall-eyebrow.kw-ocean, .kw-site-footer .is-style-kwall-eyebrow.kw-ocean,
.kw-program.kw-p-ink p.is-style-kwall-eyebrow.kw-ocean, .kw-program.kw-p-ink .is-style-kwall-eyebrow.kw-ocean{color:var(--ocean-soft) !important}

.is-style-kwall-dark-section .is-style-kwall-serif-italic em, .is-style-kwall-dark-section .is-style-kwall-marker em, .is-style-kwall-dark-section h2.wp-block-heading em,
.kw-final .is-style-kwall-serif-italic em, .kw-final .is-style-kwall-marker em, .kw-final h2.wp-block-heading em,
.kw-ai-spotlight .is-style-kwall-serif-italic em, .kw-ai-spotlight .is-style-kwall-marker em, .kw-ai-spotlight h2.wp-block-heading em,
.kw-testimonial--ink .is-style-kwall-serif-italic em, .kw-testimonial--ink .is-style-kwall-marker em, .kw-testimonial--ink h2.wp-block-heading em,
.is-style-kwall-tile-quote .is-style-kwall-serif-italic em, .is-style-kwall-tile-quote .is-style-kwall-marker em, .is-style-kwall-tile-quote h2.wp-block-heading em,
.kw-pg-card.kw-pg-dark .is-style-kwall-serif-italic em, .kw-pg-card.kw-pg-dark .is-style-kwall-marker em, .kw-pg-card.kw-pg-dark h2.wp-block-heading em,
.kw-stat.kw-s1 .is-style-kwall-serif-italic em, .kw-stat.kw-s1 .is-style-kwall-marker em, .kw-stat.kw-s1 h2.wp-block-heading em,
.kw-site-footer .is-style-kwall-serif-italic em, .kw-site-footer .is-style-kwall-marker em, .kw-site-footer h2.wp-block-heading em,
.kw-program.kw-p-ink .is-style-kwall-serif-italic em, .kw-program.kw-p-ink .is-style-kwall-marker em, .kw-program.kw-p-ink h2.wp-block-heading em{color:var(--ochre-2)}

.addtoany_share_save_container .a2a_kit a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;margin-right:8px}

/* ==========================================================================
   WCAG — LIGHT TILES INSIDE DARK SECTIONS (v1.1.10)
   Case-study pages (e.g. /accorbis/) place light bento tiles
   (ocean-mist / mint-wash / ochre / coral-wash / paper) inside
   .is-style-kwall-dark-section. The dark-section text rules (#fff
   headings, #D9D9D9 paragraphs/lists) were inherited onto those light
   tile fills — light-on-light, contrast failure. Reset text in light
   tiles back to dark ink. Solid-ocean tiles keep white text via their
   own !important rules; quote tiles are a separate style, untouched.
   ========================================================================== */
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) :where(h1,h2,h3,h4,h5,h6),
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) :where(h1,h2,h3,h4,h5,h6) em{
  color:var(--ink);
}
/* serif/marker heading ems keep their light-context burnt orange,
   overriding the v1.1.9 dark-context amber (--ochre-2) */
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) .is-style-kwall-serif-italic em,
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) .is-style-kwall-marker em{
  color:var(--ochre-deep);
}
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) p,
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) li{
  color:var(--ink);
}
/* eyebrows revert to their light-context colors (the v1.1.9 dark-context
   eyebrow rules use !important, so the colored variants must too) */
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) p.is-style-kwall-eyebrow{
  color:var(--ink-soft);
}
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) p.is-style-kwall-eyebrow.kw-warm{color:var(--coral-text) !important}
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) p.is-style-kwall-eyebrow.kw-gold{color:var(--ochre-text) !important}
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) p.is-style-kwall-eyebrow.kw-ocean{color:var(--ocean) !important}
.wp-block-group.is-style-kwall-dark-section .is-style-kwall-tile:not(.kw-tile--ocean) p.is-style-kwall-eyebrow.kw-mint{color:var(--mint-text) !important}