/* ---------------------------------------------
   Scale With Us — 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);
}

.status-line{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  font-size: 16px;
  font-weight: 500;
  color: var(--paper);
}

.campaign-section .status-dot{
  background: var(--paper);
}

.status-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-block;
}

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

.calc-transparency{
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.calc-transparency p{
  font-size: 13px;
  color: var(--grey);
  line-height: 1.7;
}

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

.register-lead{
  color: var(--ink-soft);
  font-size: 17px;
  max-width: var(--measure);
  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; }

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

@media (max-width: 980px){
  .calc-grid{
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .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; }

  .calculator{ padding: 70px 0 80px; }

  .calc-results{ padding: 32px 24px; }

  .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; }

  .slider-label-row{ flex-wrap: wrap; gap: 4px; }
  .slider-value{ font-size: 20px; }

  .calc-results{ padding: 28px 20px; }
  .result-figure{ font-size: 26px; }

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