/* Human Context growth-stage refresh: navigation, discovery, footer, and homepage additions. */
:root { --hc-cream: #F5F1E8; --hc-cream-light: #FAF7F0; --hc-green: #203329; }

/* Shared masthead */
.hc-head { position: sticky; top: 0; z-index: 80; background: rgba(245,241,232,.98); border-bottom: 1px solid rgba(32,51,41,.13); backdrop-filter: blur(10px); }
.hc-head-inner { min-height: 72px; display: grid; grid-template-columns: minmax(260px,1fr) auto minmax(260px,1fr); align-items: center; gap: 2rem; padding: 0 var(--page-gutter, 3rem); }
.hc-masthead { font-family: var(--display); font-size: clamp(1.65rem, 2vw, 2rem); line-height: 1; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--ink-green); }
.hc-primary { display: flex; align-items: stretch; justify-content: center; height: 72px; gap: 2.1rem; }
.hc-nav-item { position: relative; display: flex; align-items: center; }
.hc-primary-link { position: relative; display: flex; align-items: center; height: 100%; padding: 0 .1rem; font-family: var(--sans); font-size: .77rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink-green); }
/* Shared textured navigation underline, matching the homepage. */
.hc-primary-link::after { content:""; position:absolute; left:-4px; right:-4px; bottom:-1px; height:16px; background:var(--rust); -webkit-mask: url('/assets/brand/HoverLine.webp') center / 100% 300% no-repeat; mask: url('/assets/brand/HoverLine.webp') center / 100% 300% no-repeat; opacity:0; transform:scaleX(.86); transform-origin:center; transition: opacity 160ms ease, transform 180ms ease; pointer-events:none; }
/* The underline is a hover state, not a current-state marker. It used to
   fire on [aria-current="page"] as well, which left Research, Ideas or
   About looking stuck in hover for as long as you were anywhere inside
   that section. It now fires on hover, focus and open only - including
   on the item you are already in, so pointing at the current section
   still lights it up the way every other item does. The current section
   is identified by its heavier weight, which it already carried. */
.hc-primary-link:hover::after,
.hc-primary-link:focus-visible::after,
.hc-nav-item.is-open > .hc-primary-link::after { opacity:1; transform:scaleX(1); }
.hc-primary-link::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 5px;
  height: 3px;
  background: var(--rust);
  opacity: 0;
  transform: scaleX(.86);
  transform-origin: center;
  transition: opacity 160ms ease, transform 180ms ease;
  pointer-events: none;
}
.hc-primary-link:hover::before,
.hc-primary-link:focus-visible::before,
.hc-nav-item.is-open > .hc-primary-link::before { opacity: 1; transform: scaleX(1); }
.hc-primary-link[aria-current="page"] { font-weight:700; }
.hc-utilities { display:flex; justify-content:flex-end; align-items:center; gap:1.15rem; }
.hc-newsletter { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:.62rem 1.15rem; border:1px solid var(--rust); background:var(--rust); color:var(--paper-light); font-family:var(--sans); font-size:.73rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; transition: background 160ms ease, color 160ms ease; }
.hc-newsletter:hover, .hc-newsletter:focus-visible { background:transparent; color:var(--rust); }
.hc-search-btn { appearance:none; border:0; background:transparent; width:42px; height:42px; display:grid; place-items:center; color:var(--ink-green); cursor:pointer; padding:0; }
.hc-search-btn:hover { color:var(--rust); }
.hc-search-btn svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; }
.hc-mobile-btn { display:none; justify-self:end; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-green); background:transparent; border:1px solid var(--border); min-height:42px; padding:.5rem .75rem; }


/* Search overlay */
.hc-search-overlay { position:fixed; inset:0; z-index:120; background:rgba(245,241,232,.985); display:none; overflow:auto; }
.hc-search-overlay.is-open { display:block; }
.hc-search-shell { width:min(720px, calc(100% - 2.5rem)); margin:0 auto; padding:2rem 0 5rem; }
.hc-search-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.25rem; }
.hc-search-top strong { font-family:var(--display); font-size:1.45rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; }
.hc-search-close { border:0; background:transparent; font-size:2rem; line-height:1; color:var(--ink-green); cursor:pointer; padding:0 .25rem; }
.hc-search-close:hover { color:var(--rust); }

/* A control, not a headline: 44px tall, the icon sitting inside it on the
   right, and no submit button because matching is live. */
.hc-search-field { position:relative; display:block; width:100%; max-width:720px; }
.hc-search-field input { width:100%; height:44px; box-sizing:border-box; padding:0 2.85rem 0 .9rem;
  border:1px solid var(--border); background:var(--paper); color:var(--ink-green);
  font-family:var(--sans); font-size:1rem; outline:0; -webkit-appearance:none; appearance:none; border-radius:0; }
.hc-search-field input::placeholder { color:var(--text-2); }
.hc-search-field input:focus { border-color:var(--ink-green); }
.hc-search-field input::-webkit-search-cancel-button { -webkit-appearance:none; }
/* One control in the corner: a magnifier while the field is empty, a clear
   button once it is not. Only the clear state takes pointer or keyboard. */
.hc-search-action { position:absolute; top:0; right:0; width:2.85rem; height:44px;
  display:grid; place-items:center; padding:0; border:0; background:transparent;
  color:var(--text-2); pointer-events:none; cursor:default; }
.hc-search-action .hc-icon { display:grid; place-items:center; grid-area:1/1; }
.hc-search-action svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
/* Specificity has to match .hc-search-action .hc-icon above, or both
   icons stack in the same grid cell while the field is empty. */
.hc-search-action .hc-icon-clear { display:none; }
.hc-search-field.is-filled .hc-search-action { pointer-events:auto; cursor:pointer; color:var(--ink-green); }
.hc-search-field.is-filled .hc-search-action:hover,
.hc-search-field.is-filled .hc-search-action:focus-visible { color:var(--rust); }
.hc-search-field.is-filled .hc-icon-search { display:none; }
.hc-search-field.is-filled .hc-icon-clear { display:grid; }
.hc-search-field--home { margin:1.5rem 0 0; }

/* Four quiet pills. */
/* The pills sit clear of the field rather than tucked under it. */
.hc-topics { display:flex; flex-wrap:wrap; gap:.5rem; max-width:720px; margin-top:1.5rem; }
.hc-topic-pill { border:1px solid var(--border); background:rgba(250,247,240,.72); color:var(--ink-green);
  border-radius:999px; padding:.4rem .85rem; font-family:var(--sans); font-size:.76rem; letter-spacing:.01em; cursor:pointer;
  transition:border-color 140ms ease, color 140ms ease; }
.hc-topic-pill:hover, .hc-topic-pill:focus-visible { border-color:var(--rust); color:var(--rust); }

/* Results sit directly under the field, aligned to it. */
.hc-result-panel { max-width:720px; margin-top:1rem; }
.hc-result-panel[hidden] { display:none; }
.hc-result-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.hc-result { display:block; padding:.7rem .65rem; margin:0 -.65rem; border-bottom:1px solid var(--border);
  text-decoration:none; color:var(--ink-green); transition:background-color 140ms ease, color 140ms ease; }
.hc-result:hover, .hc-result:focus-visible { background:rgba(139,66,31,.05); }
/* A result that carries artwork puts a thumbnail beside its text. The
   row stays the same height as a text-only result, so a mixed list of
   results does not look ragged. */
.hc-result--art { display:grid; grid-template-columns:4.5rem minmax(0,1fr); column-gap:.85rem; align-items:center; }
.hc-result-thumb { display:block; overflow:hidden; background:var(--paper-light); border:1px solid var(--border); }
.hc-result-thumb img { display:block; width:100%; height:100%; aspect-ratio:3 / 2; object-fit:cover; }
.hc-result-text { display:block; min-width:0; }
.hc-result-type { display:block; font-family:var(--mono); font-size:.63rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rust); margin-bottom:.15rem; }
.hc-result-title { display:block; font-family:var(--display); font-size:1.2rem; font-weight:500; line-height:1.25; }
.hc-result-desc { display:block; margin-top:.15rem; font-family:var(--sans); font-size:.82rem; line-height:1.4; color:var(--text-2); }
.hc-result-empty { margin:1rem 0 0; max-width:720px; font-family:var(--sans); font-size:.9rem; color:var(--text-2); }

/* Inline on the homepage: a panel on the page, not a modal. */
.hc-result-panel--home { background:var(--paper); border:1px solid var(--border); padding:.35rem .9rem .1rem; }

/* Explore section is centred on the page. Result rows keep their left
   alignment inside the centred panel - centred titles are hard to scan. */
.growth-discovery .growth-shell { text-align:center; }
.growth-heading--explore { text-transform:none; }
.growth-discovery .growth-copy { margin-left:auto; margin-right:auto; }
.growth-discovery .hc-search-field,
.growth-discovery .hc-result-panel { margin-left:auto; margin-right:auto; }
.growth-discovery .hc-topics { justify-content:center; margin-left:auto; margin-right:auto; }
.growth-discovery .hc-result,
.growth-discovery .hc-result-empty { text-align:left; }

/* Growth-stage homepage */
.page-home .hero-copy { max-width:31rem; }
.page-home .hero-descriptor { max-width:31rem; color:var(--ink-green); }
/* Vertical padding used to be clamp(3rem,5vw,5.5rem): tied to viewport
   WIDTH, so widening the browser added vertical air to every section
   while the content stayed the same height - 51px to 88px between 1024
   and 1920. The range is now much narrower, so sections stay put. */
.growth-section { padding:clamp(1.75rem,2.2vw,2.5rem) var(--page-gutter); border-top:1px solid var(--border); }
/* The header, hero and footer all sit on --page-gutter, so the sections
   do too rather than capping at 1200px and centring - that cap was what
   made the page pinch inward below the hero and widen again at the
   footer. Reading widths are held by the blocks that need them
   (.growth-copy, .hcr-insight and so on), not by the shell. */
.growth-shell { width:100%; margin:0 auto; }
.growth-eyebrow { font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.15em; text-transform:uppercase; color:var(--rust); font-weight:500; margin-bottom:.8rem; }
.growth-heading { font-family:var(--display); font-weight:500; font-size:clamp(2rem,3.7vw,3.4rem); line-height:1.04; margin:0 0 1rem; }
.growth-copy { max-width:42rem; font-size:1.03rem; color:var(--text-2); }
/* NEWEST RESEARCH -----------------------------------------------------
   Three zones across the desktop width: the report cover, the research
   copy, and the principles behind a hairline. The cover column is sized
   as a share of the row rather than a fixed pixel width so the three
   keep their proportions as the viewport grows. */
.growth-research-grid { display:grid; grid-template-columns:minmax(0,.213fr) minmax(0,.372fr) minmax(0,.415fr);
  gap:clamp(1.25rem,2vw,2rem); align-items:stretch; }
.growth-report-art img { display:block; width:100%; height:auto; }
.growth-report-copy { padding-top:.35rem; }
/* Sized so the heading breaks after "Performance" the way the reference
   sets it, without a hard <br> that would follow it down to mobile. */
.growth-heading--report { max-width:5.5em; line-height:1.02; margin-bottom:.9rem; }
.growth-research-grid .growth-copy { max-width:27rem; }
.growth-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 1.5rem; }
.growth-tags span { border:1px solid var(--border); border-radius:999px; padding:.42rem .95rem; font-size:.8rem; color:var(--olive); }
.growth-report-cta { font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.growth-report-cta .arw { margin-left:.35rem; }

.growth-principles { border-left:1px solid var(--border); padding-left:clamp(1.25rem,2.1vw,2.15rem); }
/* A rule between rows only, so the column does not read as a boxed
   list. The 48px light-sage disc preserves the prior visual scale while
   the forest-green mark retains 7.21:1 contrast against the disc. */
.growth-principle { display:flex; align-items:center; gap:1rem; padding:1.05rem 0; border-top:1px solid rgba(216,211,199,.75); }
.growth-principle:first-child { padding-top:0; border-top:0; }
.growth-principle:last-child { padding-bottom:0; }
.growth-principle-icon {
  position:relative;
  flex:0 0 60px;
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
}
.growth-principle-icon::before {
  content:"";
  position:absolute;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#C0BFAE;
}
.growth-principle-mark {
  position:relative;
  z-index:1;
  display:block;
  width:34px;
  height:34px;
  object-fit:contain;
}
.growth-principle h3 { font-size:1.32rem; line-height:1.2; margin-bottom:.3rem; }
.growth-principle p { font-size:.9rem; color:var(--text-2); line-height:1.5; max-width:30rem; }
.growth-ideas-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.growth-ideas { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.growth-idea { display:block; text-decoration:none; }
/* The image sits above the rule that used to open the card, so the rule
   moves down to sit between the picture and the type label. */
.growth-idea .editorial-image { margin-bottom:1rem; border:1px solid var(--border); }
.growth-idea .type { display:block; padding-top:.9rem; border-top:1px solid var(--ink-green); }
.growth-idea .type { font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.15em; text-transform:uppercase; color:var(--rust); font-weight:500; }
.growth-idea h3 { font-size:clamp(1.75rem,2.3vw,2.25rem); line-height:1.12; margin:.6rem 0 .5rem; }
.growth-idea p { color:var(--text-2); font-size:.9rem; line-height:1.5; }
.growth-discovery { background:var(--paper-light); }
/* WIDEN THE FRAME REFLECTION ------------------------------------------
   The engraved artwork is stored as tightly cropped WebP so each mark
   can be sized optically here. Badge discs are drawn in CSS to keep their
   scale and colour consistent across the interaction. Background images
   also remain deferred while the disclosure carries the hidden attribute. */
.growth-reflection { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(1.75rem,3.4vw,3.25rem); align-items:start; }
.hcr-intro { padding-top:.25rem; }
.growth-reflection .growth-copy { max-width:26rem; }

.hcr-divider { display:block; width:95px; height:1px; margin:1.5rem 0 1.15rem;
  background:var(--rust); }
/* A quiet field-note annotation rather than a second headline. */
.hcr-insight { max-width:400px; margin:0; font-family:var(--sans); font-size:.78rem; font-weight:500;
  line-height:2.35; letter-spacing:.15em; text-transform:uppercase; color:var(--text-2); }

.growth-reflection-card { background:var(--paper-light); border:1px solid var(--border); border-radius:6px;
  padding:clamp(1.25rem,1.9vw,1.7rem); }

.hcr-label { margin:0 0 .4rem; font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  line-height:1.5; letter-spacing:.15em; text-transform:uppercase; color:var(--text-2); }
.hcr-label--rust { color:var(--rust); }
.hcr-label--green { color:var(--ink-green); }

/* Scenario. The badge sits in the top right corner of the block, which
   is why the copy reserves room for it on its first lines. */
.hcr-scenario { position:relative; padding-right:5rem; min-height:64px; }
.hcr-scenario-copy { margin:0; font-family:var(--sans); font-size:.97rem; line-height:1.55; color:var(--text-2); }
.hcr-scenario-copy strong { font-weight:600; color:var(--ink-green); }

.hcr-badge { position:relative; display:block; }
.hcr-badge::before {
  content:"";
  position:absolute;
  inset:var(--hcr-disc-inset, 3px);
  border-radius:50%;
  background:var(--hcr-disc);
}
.hcr-badge::after {
  content:"";
  position:absolute;
  inset:0;
  background:var(--hcr-icon) center / var(--hcr-icon-size) no-repeat;
}
.hcr-badge--warning { position:absolute; top:-2px; right:0; width:64px; height:64px;
  --hcr-disc:#F1D6CE; --hcr-disc-inset:3px;
  --hcr-icon:url("/assets/widen-the-frame/home-reflection-warning-rust.webp");
  --hcr-icon-size:auto 36px; }
.hcr-badge--first { width:52px; height:52px; margin-bottom:.65rem;
  --hcr-disc:#F1D6CE;
  --hcr-icon:url("/assets/widen-the-frame/firstreaction-filled-rust.webp");
  --hcr-icon-size:auto 29px; }
.hcr-badge--after { width:52px; height:52px; margin-bottom:.65rem;
  --hcr-disc:#D7E2D2;
  --hcr-icon:url("/assets/widen-the-frame/home-reflection-aftercontext-engraved.webp");
  --hcr-icon-size:auto 30px; }
.hcr-badge--takeaway { flex:0 0 48px; width:48px; height:48px;
  --hcr-disc:#D3E0E2; --hcr-disc-inset:2px;
  --hcr-icon:url("/assets/widen-the-frame/home-reflection-keytakeaway-engraved.webp");
  --hcr-icon-size:auto 29px; }

/* First reaction -> After adding context */
.hcr-compare { display:grid; grid-template-columns:1fr auto 1.14fr; gap:.95rem; align-items:stretch; margin-top:1.35rem; }
.hcr-card { border-radius:6px; padding:1.15rem 1.15rem 1.25rem; }
.hcr-card--before { background:#F8E9E4; }
.hcr-card--after { background:#E8EEE3; }
.hcr-quote { margin:0 0 .55rem; font-family:var(--display); font-size:clamp(1.3rem,1.55vw,1.55rem);
  line-height:1.25; color:var(--ink-green); }
.hcr-note { margin:0; font-family:var(--sans); font-size:.875rem; line-height:1.6; color:var(--text-2); }
.hcr-arrow { align-self:center; width:22px; height:22px; color:var(--ink-green);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23203329' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }

.hcr-rule { height:0; margin:1.35rem 0; border:0; border-top:1px solid var(--border); }

/* Additional context uses the engraved marks without badge discs. */
.hcr-pills { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin:0; padding:0; list-style:none; }
.hcr-pill { display:flex; align-items:center; gap:.55rem; padding:.42rem .8rem; border-radius:999px;
  background:#EBEFE8; font-family:var(--sans); font-size:.875rem; line-height:1.45; color:var(--ink-green); }
.hcr-pill-icon { flex:0 0 30px; width:30px; height:24px; background-repeat:no-repeat; background-position:center; background-size:contain; }
.hcr-pill-icon--sixweeks { background-image:url("/assets/widen-the-frame/home-reflection-sixweeks-engraved.webp"); }
.hcr-pill-icon--system { background-image:url("/assets/widen-the-frame/home-reflection-system-engraved.webp"); }
.hcr-pill-icon--consistent { background-image:url("/assets/widen-the-frame/home-reflection-consistent-engraved.webp"); }
.hcr-pill-icon--team { background-image:url("/assets/widen-the-frame/home-reflection-team-engraved.webp"); }

/* Key takeaway and the disclosure control share one row. Closed, the
   row is just the button; open, it is the sage callout with the button
   at its right. */
/* The margin sits on the foot rather than the closing rule so the gap
   above the control is the same whether the reflection is open or not,
   and the side padding is carried in both states so the control holds
   one horizontal position through the toggle: flex-end pins it to the
   right, and the takeaway grows into whatever is left. */
.hcr-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:.85rem 1.25rem; margin-top:1.25rem; padding:0 1.1rem; border-radius:6px;
  transition:background-color 300ms ease, padding 300ms ease; }
.hcr-reveal .hcr-rule:last-child { margin-bottom:.25rem; }
.growth-reflection.is-open .hcr-foot { background:#E5EBEA; padding:.95rem 1.1rem; }
/* A basis this small keeps the takeaway and the control on one row down
   to the mobile breakpoint instead of wrapping at around 1024. */
.hcr-takeaway { flex:1 1 11rem; min-width:0; }
.hcr-takeaway-inner { display:flex; align-items:center; gap:.85rem; }
.hcr-takeaway .hcr-label { margin-bottom:.25rem; }
.hcr-takeaway .hcr-note { color:var(--ink-green); max-width:30rem; }

.hcr-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:.75rem; min-height:42px;
  padding:.6rem 1.15rem; border:1px solid var(--ink-green); border-radius:3px; background:var(--ink-green);
  color:var(--paper-light); font-family:var(--sans); font-size:.73rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; cursor:pointer; transition:background 160ms ease, color 160ms ease; }
.hcr-btn:hover, .hcr-btn:focus-visible { background:transparent; color:var(--ink-green); }
.hcr-btn-x { display:none; font-size:.8rem; line-height:1; }
.growth-reflection.is-open .hcr-btn-x { display:inline; }

/* The collapse animates the grid row from 0fr to 1fr, so no height is
   measured in script. The hidden attribute is what keeps the artwork
   from loading before the first open; script clears it a frame before
   the class lands, and restores it once the closing run has finished. */
.hcr-collapse { display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-8px);
  transition:grid-template-rows 320ms ease, opacity 240ms ease, transform 320ms ease; }
.hcr-collapse > * { overflow:hidden; min-height:0; }
.growth-reflection.is-open .hcr-collapse { grid-template-rows:1fr; opacity:1; transform:none; }
.hcr-collapse[hidden] { display:none; }
.growth-join { position:relative; overflow:hidden; background:var(--paper-light); }
.growth-join-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
/* minmax(0,...) rather than a bare fr: a grid track's default minimum is
   min-content, so the email field refused to shrink below its placeholder
   and pushed the button out of the section instead. */
.growth-sub-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:.65rem; align-items:start; }
.growth-sub-form input[type="text"], .growth-sub-form input[type="email"] { width:100%; min-height:48px; padding:.7rem .85rem; border:1px solid var(--border); background:var(--paper); color:var(--ink-green); font:inherit; }
.growth-consent { grid-column:1 / -1; display:flex; gap:.65rem; align-items:flex-start; font-size:.75rem; line-height:1.45; color:var(--text-2); }
.growth-consent input { margin-top:.18rem; }
.growth-sub-form .form-status, .growth-sub-form + .form-status { grid-column:1 / -1; }

/* Unified cream footer */
.hc-footer { background:var(--paper-light); color:var(--ink-green); border-top:1px solid var(--border); }
.hc-footer-main { display:grid; grid-template-columns:minmax(250px,1.45fr) 1fr 1.25fr 1fr; gap:clamp(1.6rem,3vw,3rem); padding:2.6rem var(--page-gutter) 2.2rem; }
.hc-footer-brand strong,
.hc-footer-brand .hc-footer-wordmark { display:block; font-family:var(--display); font-size:1.45rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; margin-bottom:.55rem; }
.hc-footer-brand .hc-footer-wordmark { color:var(--ink-green); font-size:1.68rem; text-decoration:none; }
.hc-footer-brand em { display:block; font-family:var(--display); font-size:1.1rem; margin-bottom:.7rem; }
.hc-footer-brand p { font-size:.83rem; line-height:1.5; color:var(--text-2); max-width:18rem; }
.hc-social { display:flex; gap:1rem; margin-top:1rem; }
.hc-social a { text-decoration:none; font-size:.8rem; font-weight:600; }
.hc-footer-col h2 { font-family:var(--mono); font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; margin:0 0 .75rem; color:var(--ink-green); }
.hc-footer-col ul { list-style:none; margin:0; padding:0; }
.hc-footer-col li { margin:.33rem 0; }
.hc-footer-col a { color:var(--ink-green); text-decoration:none; font-size:.83rem; }
.hc-footer-col a:hover { color:var(--rust); }
.hc-footer-base { border-top:1px solid var(--border); margin:0 var(--page-gutter); padding:1rem 0 1.25rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem 2rem; font-size:.72rem; color:var(--text-2); }
.hc-footer-legal-links { display:flex; flex-wrap:wrap; gap:.85rem 1.25rem; }
.hc-footer-base a { color:var(--text-2); text-decoration:none; }
.hc-footer-base a:hover { color:var(--rust); }

/* Positive copy pages */
.hc-page-intro { max-width:46rem; }
.hc-page-intro .body-large { max-width:44rem; }
.hc-taxonomy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2.5rem; }
.hc-taxonomy article { padding:1rem 0; border-top:1px solid var(--border); }
.hc-taxonomy h3 { margin-bottom:.3rem; }
.hc-taxonomy p { color:var(--text-2); font-size:.9rem; }

@media (max-width: 960px) {
  .hc-head-inner { grid-template-columns:1fr auto; min-height:64px; }
  .hc-primary, .hc-utilities { display:none; }
  .hc-mobile-btn { display:block; }
  .hc-mobile-panel { position:fixed; inset:64px 0 0; z-index:79; background:var(--paper); padding:1.5rem var(--gutter); display:none; overflow:auto; }
  .hc-mobile-panel.is-open { display:block; }
  .hc-mobile-panel a { display:block; padding:.9rem 0; border-bottom:1px solid var(--border); font-family:var(--display); font-size:1.6rem; text-decoration:none; }
  .growth-reflection, .growth-join-grid { grid-template-columns:1fr; }
  /* Tablet keeps the cover beside the copy and drops the principles to
     their own full-width row underneath. */
  .growth-research-grid { grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); }
  .growth-report-art { grid-row:span 1; }
  .growth-principles { grid-column:1 / -1; border-left:0; border-top:1px solid var(--border); padding:1.5rem 0 0; }
  .growth-heading--report { max-width:none; }
  .growth-reflection .growth-copy { max-width:34rem; }
  .hcr-insight { max-width:34rem; }
  .hcr-divider { margin:1.5rem 0 1.25rem; }
  .growth-ideas { grid-template-columns:1fr; }
  .growth-sub-form { grid-template-columns:1fr 1fr; }
  .growth-sub-form button { grid-column:1 / -1; justify-self:start; }
  .hc-footer-main { grid-template-columns:1.25fr 1fr 1fr; }
  .hc-footer-brand { grid-column:1 / -1; }
}

@media (max-width: 620px) {
  /* Only once the panel is genuinely narrow do the two reactions stack,
     with the arrow turned to point down the page rather than across it. */
  .hcr-compare { grid-template-columns:1fr; gap:.9rem; }
  .hcr-arrow { justify-self:center; transform:rotate(90deg); }
  .hcr-scenario { padding-right:0; min-height:0; }
  .hcr-badge--warning {
    position:relative;
    top:auto;
    right:auto;
    width:56px;
    height:56px;
    margin:0 0 .75rem auto;
    --hcr-disc-inset:2px;
    --hcr-icon-size:auto 32px;
  }
  .hcr-pills { grid-template-columns:1fr; }
  /* Beside a paragraph this tall the bulb belongs next to the label. */
  .hcr-takeaway-inner { align-items:flex-start; }
  .hcr-quote { font-size:1.28rem; }
  /* One full-width control under the takeaway is a better touch target
     than a button squeezed beside it, so here it spans the row instead
     of holding the right-hand position it keeps on wider screens. */
  .hcr-foot { justify-content:flex-start; }
  .hcr-btn { flex:1 1 auto; width:100%; }
  .hc-head-inner { padding:0 var(--page-gutter); }
  .hc-masthead { font-size:1.35rem; letter-spacing:.09em; }
  .growth-section { padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
  /* Stacked: cover, then copy, then principles. The cover is centred
     and held to a readable width rather than filling the screen. */
  .growth-research-grid { grid-template-columns:1fr; }
  .growth-report-art { max-width:230px; margin:0 auto .5rem; }
  .growth-ideas-head { align-items:start; flex-direction:column; }
  .growth-sub-form { grid-template-columns:1fr; }
  .growth-consent { grid-column:1; }
  .hc-footer-main { grid-template-columns:1fr 1fr; padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
  .hc-footer-brand { grid-column:1 / -1; }
  .hc-footer-base { margin-left:var(--page-gutter); margin-right:var(--page-gutter); flex-direction:column; }
}

/* COOKIE PREFERENCES ---------------------------------------------------
   Same paper, border and type as the rest of the site; no new colours.
   The panel is informational today, so it carries no toggles - the row
   layout is the one an optional category would use. */
.hc-cookie-overlay { position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:1.25rem; background:rgba(32,51,41,.42); }
.hc-cookie-overlay[hidden] { display:none; }
.hc-cookie-panel { width:min(34rem,100%); max-height:calc(100vh - 2.5rem); overflow:auto;
  background:var(--paper-light); border:1px solid var(--border); border-radius:6px;
  padding:clamp(1.25rem,2.4vw,1.9rem); box-shadow:0 24px 60px rgba(32,51,41,.22); }
.hc-cookie-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.hc-cookie-top h2 { margin:0; font-family:var(--display); font-size:1.7rem; line-height:1.15; color:var(--ink-green); }
.hc-cookie-close { flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; padding:0;
  border:1px solid var(--border); border-radius:3px; background:transparent; color:var(--ink-green); cursor:pointer; }
.hc-cookie-close:hover, .hc-cookie-close:focus-visible { color:var(--rust); border-color:var(--rust); }
.hc-cookie-close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.hc-cookie-panel > p { margin:.9rem 0 0; font-family:var(--sans); font-size:.92rem; line-height:1.6; color:var(--text-2); }
.hc-cookie-empty { padding:.8rem .95rem; border-left:2px solid var(--rust); background:rgba(139,66,31,.05);
  color:var(--ink-green) !important; font-weight:500; }
.hc-cookie-rows { margin-top:1.25rem; border-top:1px solid var(--border); }
.hc-cookie-row { padding:1rem 0; border-bottom:1px solid var(--border); }
.hc-cookie-row-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.hc-cookie-row-head h3 { margin:0; font-family:var(--display); font-size:1.15rem; color:var(--ink-green); }
.hc-cookie-state { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); }
.hc-cookie-toggle { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-green); cursor:pointer; }
.hc-cookie-row p { margin:.35rem 0 0; font-family:var(--sans); font-size:.85rem; line-height:1.55; color:var(--text-2); }
.hc-cookie-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.9rem; margin-top:1.25rem; }
@media (max-width: 480px) {
  .hc-cookie-panel { width:100%; }
  .hc-cookie-foot { flex-direction:column-reverse; align-items:stretch; }
  .hc-cookie-foot .btn { width:100%; text-align:center; }
}

/* DEDICATED NEWSLETTER PAGE -------------------------------------------
   The homepage newsletter artwork and palette are retained, with a taller
   composition and more deliberate form proportions for this destination. */
.page-newsletter .newsletter-hero {
  position:relative;
  display:grid;
  align-items:center;
  min-height:clamp(430px,45vw,540px);
  overflow:hidden;
  padding:clamp(2.5rem,3.4vw,3.75rem) var(--page-gutter);
  background-color:#26331F;
  background-image:url("/assets/home/subscribe-background.webp");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}
.page-newsletter .newsletter-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(24,34,22,.30),rgba(24,34,22,.42));
  pointer-events:none;
}
.page-newsletter .newsletter-hero-shell {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(3rem,5vw,5rem);
  align-items:center;
  width:100%;
}
.page-newsletter .newsletter-copy .mono-label {
  display:block;
  margin-bottom:1.5rem;
  color:var(--rust-on-dark);
}
.page-newsletter .newsletter-copy h1 {
  max-width:none;
  margin:0 0 1.5rem;
  color:var(--paper-light);
  font-family:var(--display);
  font-size:clamp(3.25rem,4.2vw,4.5rem);
  font-weight:500;
  line-height:.98;
}
.page-newsletter .newsletter-copy p {
  max-width:38rem;
  margin:0;
  color:var(--paper-light);
  font-family:var(--sans);
  font-size:clamp(1.05rem,1.35vw,1.25rem);
  font-weight:500;
  line-height:1.55;
}
.page-newsletter .newsletter-form {
  display:grid;
  grid-template-columns:minmax(165px,.85fr) minmax(240px,1.15fr);
  gap:.9rem;
  max-width:none;
  margin:0;
}
.page-newsletter .newsletter-form input[type="text"],
.page-newsletter .newsletter-form input[type="email"] {
  width:100%;
  min-width:0;
  height:56px;
  padding:0 1.1rem;
  border:1px solid rgba(250,247,240,.62);
  background:var(--paper-light);
  color:var(--ink-green);
  font-family:var(--sans);
  font-size:1rem;
}
.page-newsletter .newsletter-form input:focus-visible {
  outline:3px solid var(--rust-on-dark);
  outline-offset:2px;
}
.page-newsletter .newsletter-form .btn {
  grid-column:1 / -1;
  width:100%;
  min-height:56px;
  justify-content:center;
  border:1px solid var(--rust);
  background:var(--rust);
  color:var(--paper-light);
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background-color 160ms ease,border-color 160ms ease;
}
.page-newsletter .newsletter-form .btn:hover,
.page-newsletter .newsletter-form .btn:focus-visible {
  border-color:#6F3217;
  background:#6F3217;
  color:var(--paper-light);
}
.page-newsletter .newsletter-consent {
  grid-column:1 / -1;
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  color:rgba(250,247,240,.9);
  font-family:var(--sans);
  font-size:.76rem;
  line-height:1.5;
}
.page-newsletter .newsletter-consent input {
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin-top:.12rem;
  accent-color:var(--rust);
}
.page-newsletter .newsletter-consent a {
  color:var(--paper-light);
  text-decoration:underline;
  text-underline-offset:2px;
}
.page-newsletter .newsletter-signup .form-status {
  max-width:none;
  margin-top:.8rem;
  color:var(--rust-on-dark);
}

@media (max-width:960px) {
  .page-newsletter .newsletter-hero {
    min-height:0;
    padding-top:2.75rem;
    padding-bottom:2.75rem;
  }
  .page-newsletter .newsletter-hero-shell {
    grid-template-columns:1fr;
    gap:3rem;
  }
  .page-newsletter .newsletter-copy h1 { max-width:none; }
  .page-newsletter .newsletter-signup { max-width:46rem; }
}

@media (max-width:620px) {
  .page-newsletter .newsletter-hero {
    padding:2.5rem var(--page-gutter);
    background-position:38% top;
  }
  .page-newsletter .newsletter-copy .mono-label { margin-bottom:1.1rem; }
  .page-newsletter .newsletter-copy h1 {
    margin-bottom:1.15rem;
    font-size:clamp(2.8rem,13vw,3.8rem);
  }
  .page-newsletter .newsletter-copy p {
    font-size:1rem;
    line-height:1.5;
  }
  .page-newsletter .newsletter-form {
    grid-template-columns:1fr;
    gap:.75rem;
  }
  .page-newsletter .newsletter-form .btn,
  .page-newsletter .newsletter-consent { grid-column:1; }
}