/* ---------------------------------------------
   Front Step Media — Stylesheet
   Editorial black / white / grey system
--------------------------------------------- */

:root{
  --ink: #101010;
  --ink-soft: #3a3a38;
  --paper: #fafaf8;
  --paper-alt: #f2f1ed;
  --line: #dcdad4;
  --line-strong: #101010;
  --grey: #6f6d68;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --content-max: 1240px;
  --measure: 720px;
}

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

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body{
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 40px;
}

h1, h2, h3{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin: 0; }

a{
  color: inherit;
}

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hp-field{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus{
  left: 16px;
  top: 16px;
}

:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------------- Header ---------------- */

.site-header{
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 100;
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark{
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.primary-nav{
  display: flex;
  align-items: center;
  gap: 36px;
}

.primary-nav a{
  text-decoration: none;
  font-size: 14.5px;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.primary-nav a:hover{
  color: var(--ink);
}

.primary-nav .nav-cta{
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
/* Scoped with :not(.visually-hidden) so it only styles the three hamburger
   bars. Without the guard it also hit the absolutely positioned "Menu"
   label inside the button, stretching it to 100% of the viewport and
   forcing the whole page to scroll sideways on mobile. */
.nav-toggle span:not(.visually-hidden){
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
}

/* ---------------- Hero ---------------- */

.hero{
  position: relative;
  padding: 64px 0 60px;
  border-bottom: 1px solid var(--line);
}

/* Decorative door-drop motif, hero only.
   Sits behind the copy, is masked away from the centre so it never
   competes with the headline, and ignores pointer events entirely. */
.hero::before{
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='180' viewBox='0 0 120 180'%3E%3Cg fill='none' stroke='%23101010' stroke-width='1.4'%3E%3Crect x='18' y='26' width='84' height='140'/%3E%3Crect x='29' y='39' width='27' height='38'/%3E%3Crect x='64' y='39' width='27' height='38'/%3E%3Crect x='45' y='97' width='30' height='7'/%3E%3Crect x='31' y='171' width='58' height='6'/%3E%3C/g%3E%3Ccircle cx='89' cy='113' r='3.2' fill='%23101010'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 180px;
  background-position: center bottom;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(115% 95% at 50% 46%, transparent 0%, transparent 28%, rgba(0,0,0,0.3) 58%, #000 100%);
  mask-image: radial-gradient(115% 95% at 50% 46%, transparent 0%, transparent 28%, rgba(0,0,0,0.3) 58%, #000 100%);
}

/* Keeps all hero copy and buttons above the motif. */
.hero > .wrap{
  position: relative;
  z-index: 1;
}

.hero-content{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow{
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--grey);
  margin-bottom: 16px;
}

.hero h1{
  font-size: clamp(32px, 4.6vw, 54px);
  max-width: 16ch;
  margin: 0 auto 20px;
}

.hero-lead{
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 10px;
  color: var(--ink-soft);
}

.hero-sub{
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto 32px;
  color: var(--grey);
}

.hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.btn{
  display: inline-block;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 26px;
  border: 1px solid var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-primary{
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover{
  background: #2a2a28;
}

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  padding-left: 0;
}
.btn-ghost:hover{
  color: var(--grey);
}

/* ---------------- Section scaffolding ---------------- */

.content-section{
  padding: 128px 0;
  border-bottom: 1px solid var(--line);
}

.content-section-tight{
  padding: 84px 0;
}

.section-label{
  font-size: 13px;
  color: var(--grey);
  margin-bottom: 22px;
  letter-spacing: 0.01em;
}

.content-section h2{
  font-size: clamp(26px, 2.6vw, 34px);
  max-width: 14ch;
  margin-bottom: 0;
}

.prose{
  max-width: var(--measure);
}

/* Two-column editorial layout: fixed label/heading column + content column.
   Keeps sections balanced across the full width instead of hugging the left. */
.section-grid{
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 64px;
  align-items: start;
}

.section-head h2{
  margin-bottom: 0;
}

.section-body .prose{
  max-width: 620px;
}

.section-head .prose{
  max-width: 320px;
  margin-top: 24px;
}
.section-head .prose p{
  font-size: 16px;
}

.prose p{
  margin-bottom: 20px;
  color: var(--ink-soft);
  font-size: 17px;
}
.prose p:last-child{ margin-bottom: 0; }

.prose-note{
  max-width: var(--measure);
  margin-top: 28px;
  font-size: 17px;
  color: var(--ink-soft);
}

.pull-statement{
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  max-width: 16ch;
  line-height: 1.35;
  margin: 40px 0 0;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

/* ---------------- Operate + Target (paired columns) ---------------- */

.operate-target-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.ot-col h2{
  font-size: clamp(24px, 2.4vw, 30px);
  max-width: 16ch;
  margin-bottom: 32px;
}

.ot-col .prose p{
  margin-bottom: 18px;
  font-size: 16px;
}

.ot-col .pull-statement{
  font-size: clamp(19px, 1.9vw, 23px);
  max-width: none;
  margin-top: 32px;
  padding-top: 28px;
}

/* ---------------- Process list ---------------- */

.process-list{
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 780px;
}

.process-list li{
  display: flex;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.process-list li:last-child{
  border-bottom: 1px solid var(--line);
}

.process-number{
  font-family: var(--serif);
  font-size: 15px;
  color: var(--grey);
  flex: 0 0 auto;
  padding-top: 3px;
}

.process-body h3{
  font-size: 19px;
  margin-bottom: 8px;
}

.process-body p{
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 56ch;
  margin: 0;
}

.process-list-compact{
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-list-compact li{
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.process-list-compact li:last-child{
  border-bottom: 1px solid var(--line);
}

.process-list-compact .process-number{
  font-family: var(--serif);
  font-size: 14px;
  color: var(--grey);
  flex: 0 0 auto;
  padding-top: 2px;
}

.process-list-compact h3{
  font-size: 17px;
  margin-bottom: 6px;
}

.process-list-compact .process-body p{
  font-size: 15px;
  max-width: 46ch;
}

/* ---------------- Campaign ---------------- */

.campaign-section{
  background: var(--ink);
  color: var(--paper);
  border-bottom: none;
  padding-top: 140px;
  padding-bottom: 140px;
}

.campaign-section .section-label{
  color: rgba(250,250,248,0.55);
}

.campaign-section h2{
  color: var(--paper);
}

.campaign-section .prose p{
  color: rgba(250,250,248,0.72);
}

.campaign-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.campaign-figure{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 0 36px;
  border-bottom: 1px solid rgba(250,250,248,0.25);
}

.campaign-number{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(88px, 10vw, 156px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.campaign-figure-label{
  font-size: 18px;
  color: rgba(250,250,248,0.55);
}

/* ---------------- Calculator ---------------- */

.calculator{
  padding: 100px 0 128px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}

.section-intro h2{
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 38px);
  max-width: 18ch;
  margin-bottom: 18px;
}

.section-intro p{
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 17px;
  margin-bottom: 10px;
}

.disclaimer{
  color: var(--grey) !important;
  font-size: 14.5px !important;
  margin-top: 8px !important;
}

.min-response-note{
  margin-top: 20px !important;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 16px !important;
  color: var(--ink) !important;
  font-weight: 500;
  max-width: var(--measure);
}

.calc-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  margin-top: 64px;
  align-items: start;
}

.calc-inputs{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.slider-field{
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.slider-label-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.slider-label-row label{
  font-size: 16px;
  font-weight: 500;
}

.slider-value{
  font-family: var(--serif);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.slider-explain{
  font-size: 14.5px;
  color: var(--grey);
  margin-bottom: 18px;
}

/* Range input styling */
input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

input[type="range"]::-webkit-slider-runnable-track{
  height: 3px;
  background: var(--line-strong);
}
input[type="range"]::-moz-range-track{
  height: 3px;
  background: var(--line-strong);
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper-alt);
  box-shadow: 0 0 0 1px var(--ink);
  margin-top: -10px;
  transition: transform 0.12s ease;
}
input[type="range"]:active::-webkit-slider-thumb{
  transform: scale(1.12);
}

input[type="range"]::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper-alt);
  box-shadow: 0 0 0 1px var(--ink);
  transition: transform 0.12s ease;
}
input[type="range"]:active::-moz-range-thumb{
  transform: scale(1.12);
}

.slider-scale{
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--grey);
  margin-top: 6px;
}

/* Results */

.calc-results{
  background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 48px 44px;
}

.results-heading{
  font-size: 13px;
  color: var(--grey);
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}

.result-row{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-figure{
  font-family: var(--serif);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.result-label{
  font-size: 14px;
  color: var(--grey);
}

.result-arrow{
  color: var(--line);
  font-size: 16px;
  padding: 8px 0;
}

.result-row-final .result-figure-large{
  font-size: clamp(38px, 4.2vw, 52px);
  display: block;
}

.result-row-final{
  padding-top: 4px;
}

/* Two result columns: one campaign vs a year of monthly campaigns. */
.calc-periods{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.calc-period-label{
  font-size: 13px;
  color: var(--grey);
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.calc-period .result-row{ margin-bottom: 18px; }

/* ---------------- Register ---------------- */

.register-lead{
  color: var(--ink-soft);
  font-size: 17px;
  max-width: var(--measure);
  margin-top: 24px;
  margin-bottom: 48px;
  display: block;
}

.register-form{
  max-width: 480px;
}

.form-field{
  margin-bottom: 24px;
}

.form-field label{
  display: block;
  font-size: 14.5px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.optional-tag{
  color: var(--grey);
  font-weight: 400;
}

.form-field input{
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}

.form-field input:focus{
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-submit{
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  margin-top: 4px;
}

.form-status{
  margin-top: 16px;
  font-size: 14px;
  color: var(--grey);
}

.form-success p{
  font-family: var(--serif);
  font-size: 22px;
  max-width: 480px;
}

/* ---------------- Footer ---------------- */

.site-footer{
  padding-top: 90px;
}

/* auto-fit collapses the empty track, so this still renders as three equal
   columns on desktop, but drops to two (then one) when the columns would be
   narrower than the email addresses they contain. */
.footer-columns{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 48px;
}

.footer-col{
  min-width: 0;
}

.footer-col h3{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--grey);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.footer-col a{
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 17px;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  margin-bottom: 14px;
}
.footer-col a:hover{
  color: var(--grey);
  border-color: var(--grey);
}

.footer-col p{
  font-size: 14.5px;
  color: var(--grey);
  max-width: 30ch;
}

.footer-base{
  margin-top: 72px;
  padding: 34px 0 90px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--grey);
}

.footer-base p{ margin: 0; }

/* ---------------- Multi-page additions (Front Step Media) ----------------
   Built only from the existing tokens and patterns: rule lines, serif
   headings, numbered grey labels, square buttons. */

.primary-nav a[aria-current="page"]{
  color: var(--ink);
}

/* Inner-page hero: same centred hero, without the door motif. */
.hero-page{
  padding: 72px 0 64px;
}
.hero-page::before{ display: none; }
.hero-page h1{ max-width: 18ch; }

/* Short call-to-action band that closes most pages. */
.cta-band{
  padding: 104px 0;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.cta-band h2{
  font-size: clamp(26px, 3vw, 36px);
  max-width: 18ch;
  margin: 0 auto 16px;
}
.cta-band p{
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 auto 32px;
}
.cta-note{
  font-size: 14.5px;
  color: var(--grey) !important;
  margin: 18px auto 0 !important;
}

/* Ruled list: label column + text column, used for sectors and process detail. */
.rule-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.rule-list > li{
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.rule-list > li:last-child{
  border-bottom: 1px solid var(--line);
}
.rule-list h3{
  font-size: 21px;
}
.rule-list .rule-kicker{
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--grey);
  margin-bottom: 8px;
}
.rule-list p{
  color: var(--ink-soft);
  font-size: 16.5px;
  max-width: 60ch;
  margin-bottom: 12px;
}
.rule-list p:last-child{ margin-bottom: 0; }
.rule-list .moment{
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  line-height: 1.4;
}

/* Simple bulleted list inside prose, ruled rather than dotted. */
.tick-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.tick-list li{
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 16px;
  position: relative;
}
.tick-list li:last-child{ border-bottom: 1px solid var(--line); }
.tick-list li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--grey);
}

/* Sector index on the home page. */
.sector-index{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 40px;
  margin-top: 8px;
}
.sector-index a{
  display: block;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 19px;
}
.sector-index a span{
  display: block;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--grey);
  margin-top: 4px;
}
.sector-index a:hover{ color: var(--ink-soft); }

.text-link{
  display: inline-block;
  margin-top: 32px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.text-link:hover{ color: var(--grey); border-color: var(--grey); }

/* Form additions */
.form-field textarea{
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  min-height: 92px;
}
.form-field textarea:focus{
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.field-hint{
  font-size: 13.5px;
  color: var(--grey);
  margin-top: 6px;
}
.form-note{
  font-size: 13.5px;
  color: var(--grey);
  margin-top: 18px;
  max-width: 480px;
}
.form-note a{ color: var(--ink-soft); }

/* Legal pages */
.legal h2{
  font-size: 22px;
  max-width: none;
  margin: 44px 0 14px;
}
.legal h2:first-child{ margin-top: 0; }
.legal ul{
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--ink-soft);
}
.legal li{ margin-bottom: 8px; }
.legal a{ color: var(--ink); }

/* Footer page links */
.footer-links a{
  display: block;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

/* Marks text Ayaan still has to supply. Remove the class once filled. */
.tbc{
  outline: 1px dashed var(--ink);
  outline-offset: 2px;
  background: var(--paper-alt);
  padding: 0 4px;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 980px){
  .campaign-number{
    font-size: clamp(44px, 12vw, 70px);
  }
  .section-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .section-head .prose{
    max-width: var(--measure);
  }
  .operate-target-grid{
    grid-template-columns: 1fr;
    gap: 64px;
  }
}

/* Between the mobile breakpoint and ~900px the desktop nav is still shown but
   the five links plus the wordmark no longer fit on one line. Tightening the
   gap keeps them on one row instead of overflowing the header. */
@media (min-width: 761px) and (max-width: 900px){
  .wrap{ padding: 0 28px; }
  .primary-nav{ gap: 22px; }
  .primary-nav a{ font-size: 14px; }
}

@media (max-width: 760px){
  .wrap{ padding: 0 22px; }

  .primary-nav{
    position: fixed;
    top: 73px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 22px 40px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow-y: auto;
  }

  .primary-nav.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .primary-nav a{
    width: 100%;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    font-size: 17px;
  }
  .primary-nav .nav-cta{
    border-bottom: none;
  }

  .nav-toggle{ display: flex; }

  /* Pins the header to exactly 73px (16 + 40 + 16 + 1px border) so the
     fixed nav panel's `top: 73px` above lines up instead of hiding
     behind the header. */
  .site-header{ padding: 16px 0; }
  .header-inner{ min-height: 40px; }

  .hero{ padding: 52px 0 46px; }
  .hero::before{ background-size: 88px 132px; }
  .hero h1{ font-size: clamp(30px, 8.4vw, 42px); max-width: 14ch; }
  .hero-lead{ font-size: 16.5px; }
  .hero-sub{ font-size: 15px; margin-bottom: 28px; }
  .hero-actions{ flex-direction: column; align-items: center; gap: 16px; }
  .hero-actions .btn{ width: 100%; max-width: 300px; text-align: center; }
  .hero-actions .btn-ghost{ padding-left: 26px; }

  .content-section{ padding: 76px 0; }
  .content-section-tight{ padding: 60px 0; }

  .process-list li{ gap: 20px; }

  .footer-columns{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .site-footer{ padding-top: 64px; }
  .footer-base{ margin-top: 48px; padding-bottom: 64px; }
}

@media (max-width: 480px){
  .wrap{ padding: 0 18px; }
  .primary-nav{ padding: 8px 18px 40px; }

  .hero::before{ background-size: 74px 112px; }

  .footer-base{ flex-direction: column; gap: 8px; }
}

@media (max-width: 760px){
  .hero-page{ padding: 52px 0 46px; }
  .cta-band{ padding: 72px 0; }
  .rule-list > li{ grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
}

.prose-after{ margin-top: 28px; }

@media (max-width: 980px){
  .calc-grid{ grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 760px){
  .calculator{ padding: 70px 0 80px; }
  .calc-results{ padding: 32px 24px; }
}
@media (max-width: 480px){
  .slider-label-row{ flex-wrap: wrap; gap: 4px; }
  .slider-value{ font-size: 20px; }
  .calc-results{ padding: 28px 20px; }
  .result-figure{ font-size: 26px; }
  .calc-periods{ grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------------------------------
   One-page layout additions (2026-10-01)
--------------------------------------------- */

section[id]{ scroll-margin-top: 88px; }

.section-alt{ background: var(--paper-alt); }

/* Hero fact strip */
.fact-strip{
  list-style: none;
  margin: 56px auto 0;
  padding: 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact-strip li{
  padding: 22px 18px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.fact-strip li:first-child{ border-left: none; }
.fact-strip strong{
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
}
.fact-strip span{
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--grey);
}

/* Programme grid */
.programme-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink);
}
.programme-item{
  padding: 28px 28px 30px 0;
  border-bottom: 1px solid var(--line);
}
.programme-item:nth-child(even){
  padding-left: 28px;
  padding-right: 0;
  border-left: 1px solid var(--line);
}
.programme-item h3{
  font-size: 21px;
  margin-bottom: 8px;
}
.programme-item p{
  color: var(--ink-soft);
  font-size: 16px;
}

/* Sector grid */
.sector-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.sector-card{
  padding: 28px 28px 30px 0;
  border-bottom: 1px solid var(--line);
}
.sector-card:nth-child(even){
  padding-left: 28px;
  padding-right: 0;
  border-left: 1px solid var(--line);
}
.sector-card h3{
  font-size: 22px;
  margin-bottom: 10px;
}
.sector-card .moment{
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 10px;
}
.sector-card p{
  color: var(--ink-soft);
  font-size: 15.5px;
}

.fit-list{ margin-top: 28px; }
.principles{ margin-top: 32px; }

/* Calculator CTA */
.calc-cta{
  display: inline-block;
  margin-top: 28px;
}

/* Founder */
.founder{
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.founder-name{
  font-family: var(--serif);
  font-size: 24px;
}
.founder-role{
  color: var(--grey);
  font-size: 14.5px;
  margin-top: 4px;
}
.founder-bio{
  margin-top: 14px;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Active section in the nav */
.primary-nav a.is-active{ color: var(--ink); }

#preview .cta-note{
  margin-top: 22px;
  color: var(--grey);
  font-size: 14.5px;
}

@media (max-width: 980px){
  .fact-strip{ grid-template-columns: repeat(2, 1fr); }
  .fact-strip li:nth-child(3){ border-left: none; }
  .fact-strip li:nth-child(n+3){ border-top: 1px solid var(--line); }
}
@media (max-width: 760px){
  .programme-grid, .sector-grid{ grid-template-columns: 1fr; }
  .programme-item, .programme-item:nth-child(even),
  .sector-card, .sector-card:nth-child(even){
    padding: 24px 0;
    border-left: none;
  }
  .fact-strip strong{ font-size: 21px; }
}

.hero-content{ max-width: 900px; }
.hero h1{ text-wrap: balance; }

/* Hero proportions (2026-10-01): scaled so the whole hero, fact strip included,
   fits the first screen on a typical laptop, and each fact label sits on one line. */
.site-header{ padding: 20px 0; }
.hero{ padding: 56px 0 44px; }
.hero h1{
  font-size: clamp(32px, 3.6vw, 48px);
  max-width: 22ch;
  margin-bottom: 18px;
}
.hero-lead{
  font-size: 17px;
  max-width: 620px;
  margin-bottom: 28px;
}
.hero .btn-primary{ padding: 13px 24px; }
.fact-strip{ margin-top: 40px; max-width: 1100px; }
.fact-strip li{ padding: 18px 14px; }
.fact-strip strong{ font-size: 21px; }
@media (min-width: 1000px){
  .fact-strip span{ font-size: 13px; white-space: nowrap; }
}

.sector-card-open{ background: var(--paper-alt); padding-left: 28px !important; }
.sector-card-open a{ color: var(--ink); }
@media (max-width: 760px){
  .hero{ padding: 48px 0 40px; }
  .hero h1{ max-width: 16ch; }
  .sector-card-open{ padding: 24px 20px !important; }
}

/* Calculator stability (2026-10-01): fixed column widths and no-wrap figures, so
   moving a slider only changes the numbers, never the size of the boxes. */
@media (min-width: 981px){ .calc-grid{ grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.calc-periods{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.result-figure{ font-size: 28px; white-space: nowrap; }
.slider-value{ white-space: nowrap; }
.result-row-final{
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.result-row-final .result-figure-large{ font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; }
@media (max-width: 600px){
  .calc-periods{ grid-template-columns: 1fr; }
  .result-figure{ font-size: 24px; }
  .result-row-final .result-figure-large{ font-size: 32px; }
}

/* Site-wide proportions (2026-10-01): tighter spacing and type so each section
   reads cleanly on a laptop screen. Mobile keeps its own rules below 761px. */
body{ font-size: 16px; }
.content-section-tight{ padding: 64px 0; }
.pull-statement{ font-size: clamp(20px, 2.2vw, 26px); }
.cta-band{ padding: 80px 0; }
.footer-base{ margin-top: 56px; padding-bottom: 64px; }
@media (min-width: 761px){
  .content-section{ padding: 88px 0; }
  .content-section h2{ font-size: clamp(24px, 2.4vw, 32px); }
  .section-grid{ gap: 56px; }
  .prose p, .section-body p{ font-size: 16px; }
  .process-list li{ padding: 22px 0; }
  .process-body h3{ font-size: 18px; }
}

/* Compact calculator: sliders and results fit on one screen. */
.calculator{ padding: 72px 0 80px; }
.section-intro h2{ font-size: clamp(26px, 2.8vw, 34px); }
.section-intro p{ font-size: 16px; }
.calc-grid{ margin-top: 36px; gap: 56px; }
.calc-inputs{ gap: 18px; }
.slider-field{ padding-top: 14px; }
.slider-label-row{ margin-bottom: 2px; }
.slider-label-row label{ font-size: 15px; }
.slider-value{ font-size: 19px; }
.slider-explain{ font-size: 13.5px; margin-bottom: 6px; }
input[type="range"]{ height: 22px; }
input[type="range"]::-webkit-slider-thumb{ width: 18px; height: 18px; margin-top: -8px; }
input[type="range"]::-moz-range-thumb{ width: 18px; height: 18px; }
.slider-scale{ font-size: 12px; margin-top: 0; }
.calc-results{ padding: 30px 32px; }
.results-heading{ margin-bottom: 16px; }
.calc-period-label{ padding-bottom: 8px; margin-bottom: 12px; }
.calc-period .result-row{ margin-bottom: 12px; }
.result-row{ gap: 2px; }
.result-figure{ font-size: 24px; }
.result-label{ font-size: 13px; }
.result-row-final{ margin-top: 2px; padding-top: 16px; }
.result-row-final .result-figure-large{ font-size: clamp(30px, 3vw, 40px); }
.calc-cta{ margin-top: 20px; }