/*
Theme Name: CEO Cadence
Theme URI: https://ceocadence.com
Author: Avik Chowdhury
Description: Meridian — a restrained block theme for CEO Cadence. Four pages (Home, About, Services, Blogs and Talks), two typefaces, deep green dominant on warm stone, with brass carrying RAG status rather than decoration.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ceo-cadence-site
Tags: business, one-column, block-patterns, full-site-editing, editor-style, custom-colors
*/

:root{
  --cc-stone:#f5f2eb; --cc-stone-2:#eae5d9; --cc-paper:#ffffff;
  --cc-ink:#131a20; --cc-ink-2:#2b353d; --cc-muted:#5c6870;
  --cc-green:#1f4d3c; --cc-green-mid:#2d6b52; --cc-green-tint:#e7eeea; --cc-green-line:#c3d3ca;
  --cc-brass:#a67c34; --cc-red:#8f3a2c;
  --cc-line:#ded8cb; --cc-line-2:#c6bfae;
  /* Two families only. Newsreader carries headings, the wordmark, the
     credential marks and every figure; Inter carries everything else. */
  --cc-display:'Newsreader',Georgia,'Times New Roman',serif;
  --cc-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cc-radius:3px;
}
.cc-bignum,.cc-metric b,.cc-owner .pct,.cc-table .n,.cc-table .num,.cc-hbar .val{font-variant-numeric:tabular-nums}

body{-webkit-font-smoothing:antialiased}
em{font-style:italic;color:var(--cc-green)}

.cc-eyebrow{font-size:11px !important;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cc-green);margin:0 0 22px}
.cc-lead{font-size:19.5px;line-height:1.62;color:var(--cc-ink-2);font-weight:300;max-width:60ch}
.cc-small{font-size:14.5px;line-height:1.68;color:var(--cc-muted)}
.cc-kicker{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--cc-muted);margin:0 0 11px}
.cc-num{font-family:var(--cc-body);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--cc-green);margin:0 0 20px}
.cc-caption{font-size:13px;line-height:1.6;color:var(--cc-muted);margin:14px 0 0;max-width:70ch}
.cc-illus{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cc-muted);border:1px solid var(--cc-line-2);border-radius:999px;padding:3px 9px;vertical-align:middle}

.wp-block-button.cc-btn-primary .wp-block-button__link{
  background:var(--cc-green);color:var(--cc-stone);border-radius:var(--cc-radius);
  font-family:var(--cc-body);font-size:14px;font-weight:500;padding:14px 26px;border:1px solid transparent;transition:background .2s}
.wp-block-button.cc-btn-primary .wp-block-button__link:hover{background:var(--cc-green-mid);color:var(--cc-stone)}
.wp-block-button.cc-btn-ghost .wp-block-button__link{
  background:transparent;color:var(--cc-ink);border:1px solid var(--cc-line-2);border-radius:var(--cc-radius);
  font-family:var(--cc-body);font-size:14px;font-weight:500;padding:14px 26px;transition:all .2s}
.wp-block-button.cc-btn-ghost .wp-block-button__link:hover{border-color:var(--cc-green);color:var(--cc-green)}

.cc-header{border-bottom:1px solid var(--cc-line);padding-top:28px;padding-bottom:28px}
.cc-logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.cc-logo:hover{text-decoration:none}
/* Diamond seal: outer frame, weighted brass core. Symmetrical on both axes. */
.cc-seal{width:23px;height:23px;flex-shrink:0;display:block}
.cc-seal-frame{stroke:var(--cc-green);fill:none;stroke-width:2;stroke-linejoin:round}
.cc-seal-core{fill:var(--cc-brass)}
.cc-logo-text{font-family:var(--cc-display);font-size:19px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;color:var(--cc-ink);white-space:nowrap}
.cc-nav a{font-size:14.5px;color:var(--cc-muted);text-decoration:none}
.cc-nav a:hover{color:var(--cc-green)}
.cc-nav .wp-block-navigation__container{gap:34px}

.cc-hero{padding-top:96px;padding-bottom:88px}
.cc-hero h1{margin-bottom:26px}
.cc-hero .cc-lead{margin-bottom:0}
.cc-hero .wp-block-buttons{margin-top:34px;gap:13px}

.cc-panel{background:var(--cc-paper);border:1px solid var(--cc-line);border-radius:var(--cc-radius);padding:28px 28px 24px}
.cc-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.cc-panel-title{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cc-muted);margin:0}
.cc-figure{background:var(--cc-paper);border:1px solid var(--cc-line);border-radius:var(--cc-radius);padding:30px 30px 26px}
.cc-figure svg{display:block;width:100%;height:auto}

.cc-bignum{font-family:var(--cc-display);font-size:60px;line-height:1;letter-spacing:-.02em;color:var(--cc-green);margin:0}
.cc-bignum small{font-size:24px;color:var(--cc-green-mid)}
.cc-bignum-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cc-muted);margin:10px 0 0}
.cc-metrics{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--cc-line);margin-top:22px;padding-top:18px}
.cc-metric{flex:1;min-width:96px}
.cc-metric b{display:block;font-family:var(--cc-display);font-size:26px;font-weight:400;color:var(--cc-ink);line-height:1.1}
.cc-metric span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cc-muted);margin-top:5px}

.cc-rag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cc-ink-2)}
.cc-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.cc-dot.g{background:var(--cc-green)}
.cc-dot.a{background:var(--cc-brass)}
.cc-dot.r{background:var(--cc-red)}
.cc-rag-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px}

.cc-rhythm{display:flex;align-items:flex-end;gap:5px;height:104px;margin-bottom:16px}
.cc-rhythm i{flex:1;background:var(--cc-green-line);border-radius:1px}
.cc-rhythm i.mid{background:var(--cc-green-mid)}
.cc-rhythm i.beat{background:var(--cc-brass)}
.cc-rhythm-legend{display:flex;justify-content:space-between;border-top:1px solid var(--cc-line);padding-top:13px}
.cc-rhythm-legend span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-muted)}

.cc-strip{background:var(--cc-stone-2);border-top:1px solid var(--cc-line);border-bottom:1px solid var(--cc-line);padding:34px 0 32px;text-align:center}
.cc-strip .cc-strip-label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cc-muted);margin:0 0 20px}
.cc-marks{display:flex;gap:14px 44px;flex-wrap:wrap;justify-content:center;align-items:baseline}
/* flex:0 0 auto is load-bearing: without it these shrink below their own
   text width and, being nowrap, spill over each other instead of wrapping */
.cc-mark{font-family:var(--cc-display);font-size:19px;letter-spacing:.06em;color:var(--cc-ink-2);
  opacity:.78;white-space:nowrap;flex:0 0 auto}

.cc-section{padding-top:96px;padding-bottom:96px}
.cc-section-tight{padding-top:0;padding-bottom:96px}
.cc-sec-head{margin-bottom:56px}
.cc-band{background:var(--cc-stone-2);border-top:1px solid var(--cc-line);border-bottom:1px solid var(--cc-line);padding:96px 0}

.cc-fix{border-top:2px solid var(--cc-green);padding-top:22px}
.cc-fix h3{font-size:22px;margin-bottom:12px}
.cc-fix p{font-size:14.5px;color:var(--cc-muted);margin:0}

.cc-cards{gap:1px !important;background:var(--cc-line);border:1px solid var(--cc-line);border-radius:var(--cc-radius);overflow:hidden}
.cc-card{background:var(--cc-paper);padding:36px 30px 32px;transition:background .25s}
.cc-card:hover{background:var(--cc-green-tint)}
.cc-card h3{font-size:21px;margin-bottom:13px}
.cc-card p{font-size:15px;color:var(--cc-muted);margin:0}
.cc-list{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--cc-line)}
.cc-list li{font-size:14px;color:var(--cc-muted);padding:7px 0 7px 18px;position:relative;list-style:none}
.cc-list li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:1px;background:var(--cc-green)}

.cc-loop{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--cc-line);border-radius:var(--cc-radius);overflow:hidden;background:var(--cc-paper)}
.cc-loop-step{flex:1;min-width:150px;padding:26px 22px 24px;border-right:1px solid var(--cc-line);position:relative}
.cc-loop-step:last-child{border-right:0}
.cc-loop-step .n{font-family:var(--cc-body);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--cc-brass);margin:0 0 12px}
.cc-loop-step h4{font-family:var(--cc-display);font-size:19px;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--cc-ink);margin:0 0 7px;opacity:1}
.cc-loop-step p{font-size:13px;color:var(--cc-muted);margin:0;line-height:1.55}
.cc-loop-step::after{content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;
  border-top:1px solid var(--cc-line-2);border-right:1px solid var(--cc-line-2);transform:translateY(-50%) rotate(45deg);background:var(--cc-paper);z-index:2}
.cc-loop-step:last-child::after{display:none}

.cc-owner{display:grid;grid-template-columns:130px 1fr 62px;gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid var(--cc-line)}
.cc-owner:last-child{border-bottom:0}
.cc-owner .who{font-size:14.5px;color:var(--cc-ink)}
.cc-owner .track{background:var(--cc-stone-2);height:16px;border-radius:2px;overflow:hidden;display:flex}
.cc-owner .track i{display:block;height:100%}
.cc-owner .track i.g{background:var(--cc-green)}
.cc-owner .track i.a{background:var(--cc-brass)}
.cc-owner .track i.r{background:var(--cc-red)}
.cc-owner .pct{font-family:var(--cc-display);font-size:17px;color:var(--cc-ink);text-align:right}

.cc-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cc-table th{text-align:left;font-family:var(--cc-body);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cc-muted);padding:0 10px 12px 0;border-bottom:1px solid var(--cc-line)}
.cc-table td{padding:12px 10px 12px 0;border-bottom:1px solid var(--cc-line);color:var(--cc-ink-2);vertical-align:middle}
.cc-table tr:last-child td{border-bottom:0}
.cc-table .n{font-family:var(--cc-body);font-size:12.5px;color:var(--cc-muted)}
.cc-table .num{font-family:var(--cc-display);font-size:16px;color:var(--cc-ink)}

.cc-hbar{display:grid;grid-template-columns:160px 1fr 54px;gap:14px;align-items:center;padding:9px 0}
.cc-hbar .lbl{font-size:14px;color:var(--cc-ink-2)}
.cc-hbar .bar{background:var(--cc-stone-2);height:14px;border-radius:2px;overflow:hidden}
.cc-hbar .bar i{display:block;height:100%;background:var(--cc-green)}
.cc-hbar .bar i.warn{background:var(--cc-brass)}
.cc-hbar .bar i.bad{background:var(--cc-red)}
.cc-hbar .val{font-family:var(--cc-display);font-size:15px;color:var(--cc-ink);text-align:right}

.cc-fw{background:var(--cc-paper);border:1px solid var(--cc-line);border-radius:var(--cc-radius);padding:24px 22px 20px;height:100%}
.cc-fw h4{font-family:var(--cc-display);font-size:18px;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--cc-ink);margin:0 0 16px;opacity:1}
.cc-fw p{font-size:13px;color:var(--cc-muted);margin:16px 0 0;line-height:1.55}
.cc-fw svg{display:block;width:100%;height:auto}

.cc-download{background:var(--cc-paper);border:1px solid var(--cc-line);border-radius:var(--cc-radius);padding:38px 36px}
.cc-download h3{font-size:26px;margin-bottom:12px}
.cc-download p{font-size:15px;color:var(--cc-muted);margin-bottom:0}
.cc-pdfmark{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.cc-pdfmark .tag{font-family:var(--cc-body);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cc-red);border:1px solid var(--cc-red);border-radius:2px;padding:4px 8px}
.cc-pdfmark .meta{font-size:12.5px;color:var(--cc-muted)}

/* native ratio of the supplied photograph, so nothing is cropped */
.cc-portrait{aspect-ratio:472/804;max-width:360px;background:var(--cc-stone-2);border:1px solid var(--cc-line);
  border-radius:var(--cc-radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cc-muted)}
.cc-portrait img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:781px){.cc-portrait{margin-left:auto;margin-right:auto}}

.cc-cta{background:var(--cc-paper);border-top:1px solid var(--cc-line);border-bottom:1px solid var(--cc-line);padding:92px 0}

.cc-footer{background:var(--cc-green);color:rgba(245,242,235,.8);padding:64px 0 54px}
.cc-footer .cc-logo-text,.cc-footer h4{color:#fff}
.cc-footer .cc-seal-frame{stroke:rgba(245,242,235,.92)}
.cc-footer .cc-seal-core{fill:var(--cc-brass)}
.cc-footer p{font-size:14.5px;color:rgba(245,242,235,.7)}
.cc-footer h4{font-family:var(--cc-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;font-weight:600;opacity:.65;color:#fff}
.cc-footer a{display:block;font-size:14.5px;color:rgba(245,242,235,.82);text-decoration:none;padding:4px 0}
.cc-footer a:hover{color:#fff}
.cc-foot-bottom{margin-top:46px;padding-top:22px;border-top:1px solid rgba(245,242,235,.18);font-size:13px;color:rgba(245,242,235,.55)}

.cc-pagehead{padding-top:80px;padding-bottom:64px;border-bottom:1px solid var(--cc-line)}
.cc-narrow{max-width:22ch}

.cc-video{position:relative;aspect-ratio:16/9;background:var(--cc-stone-2);border:1px solid var(--cc-line);
  border-radius:var(--cc-radius);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cc-video img{width:100%;height:100%;object-fit:cover}
.cc-video .play{width:64px;height:64px;border-radius:50%;background:var(--cc-green);
  display:flex;align-items:center;justify-content:center}
.cc-video .play::after{content:"";border-left:18px solid var(--cc-stone);
  border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.cc-video .dur{position:absolute;right:12px;bottom:12px;background:rgba(19,26,32,.86);color:#fff;
  font-size:11.5px;letter-spacing:.06em;padding:4px 9px;border-radius:2px;font-variant-numeric:tabular-nums}
.cc-video.sm .play{width:46px;height:46px}
.cc-video.sm .play::after{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
.cc-vid-title{font-family:var(--cc-display);font-size:21px;line-height:1.2;margin:16px 0 8px;color:var(--cc-ink)}
.cc-tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.cc-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cc-green);
  background:var(--cc-green-tint);border-radius:2px;padding:5px 10px}
.cc-post{display:grid;grid-template-columns:132px 1fr 96px;gap:24px;padding:26px 0;
  border-bottom:1px solid var(--cc-line);align-items:baseline}
.cc-post:last-child{border-bottom:0}
.cc-post h3{font-size:22px;margin-bottom:8px}
.cc-post .date{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-muted)}
.cc-post .rt{font-size:12.5px;color:var(--cc-muted);text-align:right}
.cc-post p{font-size:15px;color:var(--cc-muted);margin:0}
.cc-subscribe{display:flex;gap:10px;flex-wrap:wrap}
/* ---------- article list (WordPress posts) ---------- */
.cc-post-row{padding:26px 0;border-bottom:1px solid var(--cc-line)}
.cc-post-row:last-child{border-bottom:0}
.cc-post-meta{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.cc-post-meta .wp-block-post-date,
.cc-post-meta .wp-block-post-terms{margin:0;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cc-muted)}
.cc-post-meta a{color:var(--cc-muted);text-decoration:none}
.cc-post-row .wp-block-post-title{font-size:22px;line-height:1.2;margin:0 0 8px}
.cc-post-row .wp-block-post-title a{color:var(--cc-ink);text-decoration:none}
.cc-post-row .wp-block-post-title a:hover{color:var(--cc-green)}
.cc-post-row .wp-block-post-excerpt{margin:0}
.cc-post-row .wp-block-post-excerpt__excerpt{font-size:15px;line-height:1.6;color:var(--cc-muted)}
.cc-post-row .wp-block-post-excerpt__more-text{display:none}
.cc-postlist .wp-block-query-pagination{margin-top:32px;gap:14px;font-size:14px}
.cc-postlist .wp-block-query-pagination a{color:var(--cc-green);text-decoration:none}

.cc-subscribe input{flex:1;min-width:180px;padding:13px 14px;border:1px solid var(--cc-line);
  border-radius:var(--cc-radius);font-family:var(--cc-body);font-size:14.5px;background:#fff;color:var(--cc-ink)}

.cc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.cc-scroll .cc-table{min-width:520px}

/* calendar score: donut beside its bars, stacking on small screens */
.cc-donutrow{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.cc-donut{flex:0 0 180px;max-width:180px}
.cc-donutside{flex:1;min-width:170px}

/* ---------- horizontal overflow hardening ----------
   Nothing on the page may exceed the viewport. Full-width groups combined
   with WordPress root padding are the usual cause; long words and fixed
   minimum widths inside flex and grid children are the rest. */
html,body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
.wp-site-blocks{overflow-x:hidden}
.wp-block-group,.wp-block-column,.wp-block-columns{min-width:0}
.wp-site-blocks,.wp-block-group,.wp-block-columns,.wp-block-column{max-width:100%}
.cc-panel,.cc-figure,.cc-download,.cc-loop,.cc-card,.cc-fw{max-width:100%}
.cc-panel-head{flex-wrap:wrap}
img,svg,video,table,iframe{max-width:100%}
h1,h2,h3,h4,p,li,td,th,blockquote,a{overflow-wrap:break-word}

/* ---------- gutters ----------
   One variable drives the side margin at every width, and the WordPress root
   padding is derived from it.

   Never write  --x: max(var(--x), …)  — a custom property that references
   itself is a cycle, is invalid at computed-value time, and collapses to
   nothing. That is what removed the side padding entirely in 1.4.2. */
:root{--cc-gutter:48px}
@media(max-width:1200px){:root{--cc-gutter:40px}}
@media(max-width:900px){:root{--cc-gutter:34px}}
@media(max-width:781px){:root{--cc-gutter:30px}}
/* ---------- mobile: centre everything ----------
   Every block centres on a phone, data included: figures, tables, bar rows,
   loop steps and lists. Bar rows stack to a single centred column, and list
   items drop their left dash, which cannot sit sensibly beside centred text. */
@media(max-width:781px){
  .cc-hero,.cc-pagehead,.cc-section,.cc-section-tight,
  .cc-strip,.cc-band,.cc-cta,.cc-quote,.cc-footer,
  .cc-figure,.cc-panel,.cc-card,.cc-fw,.cc-loop-step,.cc-post,.cc-fix,
  .cc-download,.cc-table,.cc-table th,.cc-table td{text-align:center}

  .cc-lead,.cc-small,.cc-caption,.cc-narrow,.cc-bq,
  h1,h2,h3,h4,.cc-eyebrow,.cc-kicker,.cc-num{margin-left:auto;margin-right:auto}

  .wp-block-buttons,.cc-rag-row,.cc-marks,.cc-tagrow,
  .cc-metrics,.cc-panel-head,.cc-pdfmark,.cc-subscribe{justify-content:center}

  .cc-portrait{margin-left:auto;margin-right:auto}
  .cc-attrib{border-left:0;padding-left:0}
  .cc-fix{border-top-width:2px}

  .cc-list li{padding-left:0;text-align:center}
  .cc-list li::before{display:none}

  .cc-owner,.cc-hbar{grid-template-columns:1fr;justify-items:center;gap:6px}
  .cc-owner .track,.cc-hbar .bar{width:100% !important}
  .cc-owner .pct,.cc-hbar .val,.cc-owner .who,.cc-hbar .lbl{text-align:center}
}

@media(max-width:520px){:root{--cc-gutter:26px}}

html body{
  --wp--style--root--padding-left:var(--cc-gutter);
  --wp--style--root--padding-right:var(--cc-gutter);
}
/* notched and curved-edge phones: take the device inset when it is larger */
@supports (padding: max(0px)){
  html body{
    --wp--style--root--padding-left:max(var(--cc-gutter), env(safe-area-inset-left));
    --wp--style--root--padding-right:max(var(--cc-gutter), env(safe-area-inset-right));
  }
}
/* ---------- layout, self-sufficient ----------
   WordPress centres constrained groups using .wp-container-* rules that it
   generates and prints inline. Cache plugins that combine, defer or strip
   inline CSS drop them, and every section then renders full-bleed and flush
   to the edge. These rules do the same job from the theme stylesheet, keyed
   to classes that are always in the markup, so the layout no longer depends
   on anything WordPress generates at runtime. */
*,*::before,*::after{box-sizing:border-box}
:root{--cc-content:1040px}

.wp-site-blocks,
.wp-site-blocks > main{padding-left:0;padding-right:0}

.cc-hero,.cc-section,.cc-section-tight,.cc-pagehead,
.cc-strip > *,.cc-band > *,.cc-cta > *,.cc-quote > *,.cc-footer > *,
.cc-header > .wp-block-group{
  max-width:calc(var(--cc-content) + (var(--cc-gutter) * 2));
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--cc-gutter);
  padding-right:var(--cc-gutter);
}
.cc-strip,.cc-band,.cc-cta,.cc-quote,.cc-footer,.cc-header{
  padding-left:0;
  padding-right:0;
}

/* WordPress gives .alignfull negative side margins to cancel the root padding
   it normally applies to the page wrapper. This theme sets that padding on the
   sections themselves instead, so those negatives have nothing to cancel: they
   push every band past both edges and make the document wider than the screen.
   That is what left the bands flush left with bare page showing on the right. */
.wp-block-group.alignfull,
.cc-strip,.cc-band,.cc-cta,.cc-quote,.cc-footer{
  margin-left:0 !important;
  margin-right:0 !important;
  width:100%;
  max-width:100%;
}

.cc-logo{padding-left:2px}

@media(max-width:781px){
  /* every column stacks, whatever inline flex-basis the template carries */
  .wp-block-columns{flex-wrap:wrap}
  .wp-block-column{flex-basis:100% !important;min-width:0}
  .cc-metric{min-width:0;flex:1 1 46%}
  .cc-donutside{min-width:0}
  .cc-scroll .cc-table{min-width:420px}
  /* header: logo, menu toggle and CTA on one line, nothing oversized */
  .cc-header{padding-top:18px;padding-bottom:18px}
  .cc-header > .wp-block-group{gap:12px;flex-wrap:nowrap;align-items:center}
  .cc-header .wp-block-button__link{font-size:13px;padding:11px 17px;white-space:nowrap}
  .cc-logo{gap:7px}
  .cc-logo-text{font-size:16.5px;letter-spacing:.08em}
  .cc-seal{width:20px;height:20px}
  .cc-rhythm{gap:3px;height:88px}
  .cc-metrics{gap:14px}
  .cc-metric{min-width:84px}
  .cc-hero{padding-top:60px;padding-bottom:56px}
  .cc-section{padding-top:66px;padding-bottom:66px}
  .cc-section-tight{padding-bottom:66px}
  .cc-cta,.cc-band{padding:66px 0}
  .cc-pagehead{padding-top:56px;padding-bottom:44px}
  .cc-marks{gap:12px 28px}
  .cc-mark{font-size:17px}
  .cc-bignum{font-size:48px}
  /* stack the five steps outright rather than relying on flex-wrap */
  .cc-loop{display:block}
  .cc-loop-step{width:100%;min-width:0;border-right:0;border-bottom:1px solid var(--cc-line)}
  .cc-loop-step:last-child{border-bottom:0}
  .cc-loop-step::after{display:none}
  .cc-owner{grid-template-columns:96px 1fr 50px;gap:10px}
  .cc-hbar{grid-template-columns:120px 1fr 46px;gap:10px}
  .cc-table th:nth-child(4),.cc-table td:nth-child(4){display:none}
  .cc-post{grid-template-columns:1fr;gap:8px}
  .cc-post .rt{text-align:left}
}
@media(max-width:520px){
  .cc-metric{flex:1 1 100%}
  .cc-metrics{gap:10px 14px}
  .cc-rag-row{gap:8px 14px}
  .cc-logo-text{font-size:15px}
  .cc-header .wp-block-button__link{font-size:12.5px;padding:10px 14px}
  .cc-donut{flex:1 1 100%;max-width:200px;margin:0 auto}
  .cc-donutside{flex:1 1 100%;min-width:0}
  .cc-rhythm{gap:2px;height:76px}
  .cc-metric{min-width:72px}
  .cc-metrics{gap:12px}
  .cc-rag-row{gap:10px 16px}
  .cc-loop-step{min-width:0}
  .cc-pdfmark{flex-wrap:wrap;gap:8px}
  .cc-figure{padding:22px 18px 20px}
  .cc-panel{padding:22px 20px 18px}
  .cc-download{padding:26px 22px}
  .cc-card{padding:30px 24px 28px}
  .cc-loop-step{padding:22px 20px}
  .cc-strip{padding:28px 0 26px}
  .cc-marks{gap:10px 22px}
  .cc-mark{font-size:16px}
  .cc-table{font-size:12.5px}
  .cc-bignum{font-size:42px}
  .cc-metrics{gap:16px}
}

/* ================= mobile polish =================
   Loaded last so it wins on order. Everything here exists because it was
   wrong at 390px, not because it was theoretically tidier. */
@media(max-width:781px){
  /* the priority table no longer scrolls sideways: it drops the columns a
     phone cannot use and keeps the four that carry the argument */
  .cc-scroll{overflow-x:visible}
  .cc-scroll .cc-table{min-width:0}
  .cc-table th:nth-child(1),.cc-table td:nth-child(1),
  .cc-table th:nth-child(4),.cc-table td:nth-child(4),
  .cc-table th:nth-child(7),.cc-table td:nth-child(7){display:none}
  .cc-table th,.cc-table td{padding:10px 6px 10px 0}

  /* buttons stack and fill, instead of wrapping into ragged pairs */
  .wp-block-buttons{flex-direction:column;align-items:center;width:100%;gap:10px}
  .wp-block-buttons .wp-block-button{width:100%;max-width:300px}
  .wp-block-button .wp-block-button__link{display:block;width:100%;text-align:center}
}

@media(max-width:520px){
  /* WordPress sets heading sizes through :root :where(h1), which outranks a
     bare element selector — hence !important rather than a specificity war */
  h1{font-size:clamp(30px,8.4vw,38px) !important;line-height:1.16 !important}
  h2{font-size:clamp(25px,6.6vw,31px) !important;line-height:1.18 !important}
  h3{font-size:20px !important}
  .cc-lead{font-size:17.5px;line-height:1.6}
  .cc-small{font-size:14px}
  .cc-bignum{font-size:44px}
  .cc-mark{font-size:15px}
  .cc-logo-text{font-size:14.5px}

  /* the page is one long column on a phone; tighten the rhythm so it is not
     three screens of empty stone between every idea */
  .cc-hero{padding-top:44px;padding-bottom:44px}
  .cc-section{padding-top:52px;padding-bottom:52px}
  .cc-section-tight{padding-bottom:52px}
  .cc-band,.cc-cta,.cc-quote{padding:52px 0}
  .cc-pagehead{padding-top:44px;padding-bottom:36px}
  .cc-sec-head{margin-bottom:36px}
  .cc-eyebrow{margin-bottom:16px}
  .cc-figure{padding:20px 16px 18px}
  .cc-panel{padding:20px 16px 16px}
}

@media(max-width:420px){
  /* on the narrowest phones the header CTA crowds the wordmark, and the same
     button is a thumb-length below it in the hero */
  .cc-header .wp-block-buttons{display:none}
  .cc-logo-text{font-size:15.5px}
}