/* North Four: site styles */

@font-face { font-family: "Caslon Display"; src: url("fonts/caslon-display.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("fonts/caslon-text.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("fonts/caslon-text-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ground: #F8F6F1;
  --stone: #EEEAE2;
  --green: #1D3327;
  --green-card: #25402F;
  --green-rule: #4A6152;
  --ink: #1C1F1A;
  --text: #3A3B34;
  --muted: #4A4A42;
  --quiet: #6A6558;
  --brass: #7D6330;
  --brass-light: #D9C391;
  --on-green: #F8F6F1;
  --on-green-soft: #D6D8CF;
  --rule: #D8CFBE;
  --rule-soft: #D0C6B3;
  --footer: #1C1F1A;

  --display: "Caslon Display", Georgia, "Times New Roman", serif;
  --serif: "Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 6.6vw, 96px);
  --section: clamp(64px, 8vw, 112px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:hover { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--ground); padding: 12px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.label { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--brass); }
.on-green .label { color: var(--brass-light); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; font-size: 16px; font-weight: 500; text-decoration: none; border: 1px solid var(--green); }
.btn-solid { background: var(--green); color: var(--on-green); }
.btn-solid:hover { background: #2B4636; color: var(--on-green); }
.btn-outline { color: var(--green); background: transparent; }
.btn-outline:hover { background: var(--green); color: var(--on-green); }
.btn-light { background: var(--on-green); color: var(--ink); border-color: var(--on-green); }
.btn-light:hover { background: #fff; color: var(--ink); }
.link-line { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); background: var(--ground); position: sticky; top: 0; z-index: 50; }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 104px; gap: 24px; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 36px; font-size: 15px; }
.nav-right { justify-content: flex-end; }
.nav-left a, .nav-right a:not(.btn) { text-decoration: none; padding: 12px 0; }
.nav-right .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--display); font-size: 42px; line-height: 1; letter-spacing: 0.24em; margin-right: -0.24em; white-space: nowrap; }
.brand-sub { font-size: 11px; letter-spacing: 0.38em; margin-right: -0.38em; text-transform: uppercase; font-weight: 600; color: var(--quiet); }
.menu-toggle { display: none; width: 48px; height: 48px; background: none; border: 1px solid var(--ink); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.menu-toggle svg { display: block; }
.mobile-nav { display: none; }

/* Hero */
.hero { padding-top: var(--section); padding-bottom: calc(var(--section) + 16px); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; }
.hero-copy { grid-column: span 7; display: flex; flex-direction: column; justify-content: center; gap: 56px; padding-right: 48px; }
.hero-head { display: flex; flex-direction: column; gap: 26px; }
.hero h1 { font-size: clamp(42px, 5.3vw, 76px); line-height: 1.12; max-width: 700px; }
.hero h1 em { font-style: italic; }
.hero-text { display: flex; flex-direction: column; gap: 40px; }
.hero-text p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; max-width: 540px; color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.record { grid-column: span 5; background: var(--green); color: var(--on-green); padding: 56px 52px; display: flex; flex-direction: column; gap: 32px; justify-content: space-between; }
.record-list { list-style: none; margin: 0; padding: 0; }
.record-list li { display: flex; flex-direction: column; gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--green-rule); }
.record-list li:first-child { padding-top: 0; }
.record-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.figure { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.record .figure { font-size: clamp(44px, 4.4vw, 64px); }
.record-list span:last-child { font-size: 15px; line-height: 1.5; color: var(--on-green-soft); }

/* Logos */
.logos { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-top: 44px; padding-bottom: 48px; }
.logos .wrap { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.logos .label { color: var(--quiet); }
/* Up to six per row; any shorter last row is centred so a logo is never left stranded */
.logo-row { --per-row: 6; --gap: 40px; list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px var(--gap); opacity: 0.82; }
.logo-row li { flex: 0 0 calc((100% - (var(--per-row) - 1) * var(--gap)) / var(--per-row)); display: flex; align-items: center; justify-content: center; height: 64px; }
.logo-row img { width: auto; max-width: 100%; }

/* Split sections */
.split { padding-top: var(--section); padding-bottom: calc(var(--section) - 8px); }
.split-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.split-head { grid-column: span 6; display: flex; flex-direction: column; gap: 28px; }
.split-head h2 { font-size: clamp(32px, 3.75vw, 54px); line-height: 1.12; }
.split-head h2 em { font-style: italic; }
.split-body { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 22px; padding-top: 52px; font-size: 18px; line-height: 1.7; color: var(--text); }

/* Stone sections */
.stone { background: var(--stone); padding-top: calc(var(--section) - 8px); padding-bottom: calc(var(--section) - 8px); }
.section-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; }
.section-top > div { display: flex; flex-direction: column; gap: 24px; }
.section-top h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.08; }
.section-top p { max-width: 460px; font-size: 17px; line-height: 1.7; color: var(--text); }

.disciplines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.disciplines li { border-top: 1px solid var(--ink); padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.disciplines .numeral { font-family: var(--serif); font-size: 22px; color: var(--brass); }
.disciplines h3 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; }
.disciplines p { font-size: 16px; line-height: 1.65; color: var(--text); }

/* Work */
.work { background: var(--green); color: var(--on-green); padding-top: var(--section); padding-bottom: calc(var(--section) + 8px); }
.work h2 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.08; margin-top: 20px; margin-bottom: 56px; }
.cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.case { background: var(--green-card); padding: 40px 36px 44px; display: flex; flex-direction: column; gap: 22px; }
.case-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.case-num { font-family: var(--serif); font-size: 20px; color: var(--brass-light); }
.case-top .label { font-size: 10px; text-align: right; }
.case h3 { font-size: 28px; line-height: 1.2; }
.case-challenge { font-size: 15px; line-height: 1.6; color: var(--on-green-soft); min-height: 4.8em; }
.case-main { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--green-rule); padding-top: 24px; }
.case-main .figure { font-size: clamp(48px, 4.7vw, 68px); }
.case-main span:last-child { font-size: 15px; color: var(--on-green-soft); }
.case-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; border-top: 1px solid var(--green-rule); padding-top: 20px; }
.case-subs div { display: flex; flex-direction: column; gap: 4px; }
.case-subs .figure { font-size: 24px; line-height: 1.1; }
.case-subs span:last-child { font-size: 13px; line-height: 1.45; color: #C9CEC4; }

/* About */
.about { padding-top: var(--section); padding-bottom: var(--section); }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.founders { grid-column: span 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; align-self: start; }
.founder { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.founder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.founder figcaption { display: flex; flex-direction: column; gap: 8px; }
.founder-name { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.founder .label { font-size: 10px; }
.founder p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.story { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 28px; padding-top: 24px; }
.story h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.08; }
.story > p { font-size: 18px; line-height: 1.75; color: var(--text); }
.values { list-style: none; margin: 16px 0 0; padding: 28px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
.values li { display: flex; flex-direction: column; gap: 10px; }
.values strong { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.values span { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; row-gap: 32px; }
.steps li { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ink); padding-top: 25px; }
.steps li.prep { border-top: 2px solid var(--green); padding-top: 24px; }
.steps .label { font-size: 11px; }
.steps strong { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.steps span:last-child { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Testimonials */
.quotes { padding-top: var(--section); padding-bottom: var(--section); text-align: center; }
.quotes .wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.quote-stage { max-width: 1000px; min-height: 290px; display: grid; align-items: center; }
.quote { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 28px; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s; }
.quote.is-active { opacity: 1; visibility: visible; }
.quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.4; }
.quote figcaption { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .quote { transition: none; } }
.quote-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.quote-arrow { width: 48px; height: 48px; background: none; border: 1px solid var(--ink); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.quote-arrow:hover { background: var(--ink); color: var(--ground); }
.quote-dots { display: flex; align-items: center; }
.quote-dot { width: 32px; height: 48px; background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.quote-dot span { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ink); display: block; }
.quote-dot[aria-current="true"] span { background: var(--ink); }

/* Fit */
.fit { padding-top: calc(var(--section) - 8px); padding-bottom: calc(var(--section) - 8px); }
.fit-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.fit-intro { grid-column: span 4; display: flex; flex-direction: column; gap: 24px; }
.fit-intro h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; }
.fit-intro p { font-size: 16px; line-height: 1.7; color: var(--text); }
.fit-list { grid-column: 6 / span 4; }
.fit-list.not { grid-column: 10 / span 3; }
.fit-list h3 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.fit-list.not h3 { color: var(--quiet); }
.fit-list ul { list-style: none; margin: 0; padding: 0; }
.fit-list li { font-size: 16px; line-height: 1.6; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.fit-list li:last-child { border-bottom: 0; }
.fit-list.not li { color: var(--muted); }

/* Contact */
.contact { background: var(--green); color: var(--on-green); padding-top: var(--section); padding-bottom: var(--section); text-align: center; }
.contact .wrap { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.contact h2 { font-size: clamp(36px, 5.3vw, 76px); line-height: 1.05; max-width: 980px; }

/* Footer */
.site-footer { background: var(--footer); color: #CFCBBE; padding-top: 80px; padding-bottom: 80px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand .brand-name { font-size: 34px; color: var(--on-green); margin-right: 0; }
.footer-brand .brand-sub { color: #A8A393; margin-right: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 40px; font-size: 15px; }
.footer-nav a { text-decoration: none; padding: 10px 0; color: #CFCBBE; }
.footer-nav a:hover, .footer-legal a:hover { color: var(--brass-light); }
.footer-bottom { margin-top: 56px; border-top: 1px solid #3A3D36; padding-top: 28px; display: flex; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; font-size: 13px; color: #A8A393; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.footer-legal a { color: #CFCBBE; text-underline-offset: 3px; padding: 8px 0; }

/* Legal pages */
.legal { padding-top: var(--section); padding-bottom: var(--section); }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.1; margin-bottom: 16px; }
.legal h2 { font-size: 26px; margin-top: 48px; margin-bottom: 14px; }
.legal p, .legal li { font-size: 17px; line-height: 1.75; color: var(--text); }
.legal p + p { margin-top: 14px; }
.legal ul { padding-left: 20px; }
.draft-note { margin: 24px 0 8px; padding: 18px 22px; border: 1px dashed #B8AE9A; font-size: 15px; color: var(--quiet); }

/* Tablet */
@media (max-width: 1080px) {
  .nav-left, .nav-right { display: none; }
  .header-inner { grid-template-columns: 1fr auto; min-height: 80px; }
  .brand { align-items: flex-start; }
  .brand-name { font-size: 26px; letter-spacing: 0.22em; }
  .brand-sub { font-size: 9px; letter-spacing: 0.34em; }
  .menu-toggle { display: inline-flex; }
  .mobile-nav { border-top: 1px solid var(--rule); }
  .mobile-nav.is-open { display: block; }
  .mobile-nav ul { list-style: none; margin: 0; padding: 8px 0 24px; }
  .mobile-nav li a { display: block; padding: 14px 0; font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--rule); }
  .mobile-nav .btn { margin-top: 20px; width: 100%; }

  .hero-copy, .record { grid-column: 1 / -1; }
  .hero-copy { padding-right: 0; gap: 40px; }
  .record { padding: 40px 36px; }
  .logo-row { --per-row: 3; }
  .split-head, .split-body { grid-column: 1 / -1; }
  .split-body { padding-top: 0; }
  .section-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases { grid-template-columns: 1fr; max-width: 640px; }
  .case-challenge { min-height: 0; }
  .founders, .story { grid-column: 1 / -1; }
  .founders { max-width: 560px; }
  .story { padding-top: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fit-intro { grid-column: 1 / -1; }
  .fit-list, .fit-list.not { grid-column: span 6; }
}

/* Phone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-inner { min-height: 72px; }
  .brand-name { font-size: 22px; }
  .hero { padding-top: 48px; padding-bottom: 56px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .link-line { margin: 0 auto; }
  .record { padding: 32px 26px; gap: 24px; }
  .record-list li { padding: 20px 0; }
  .logo-row { --per-row: 2; --gap: 24px; }
  .logo-row li { height: 52px; }
  .logo-row img { transform: scale(0.82); }
  .split-body { font-size: 16px; }
  .disciplines { grid-template-columns: 1fr; row-gap: 28px; }
  .case { padding: 28px 24px 30px; gap: 16px; }
  .case h3 { font-size: 23px; }
  .case-challenge { font-size: 14px; }
  .case-subs .figure { font-size: 20px; }
  .founder figcaption { display: flex; flex-direction: column; gap: 8px; }
.founder-name { font-size: 20px; }
  .founder p { font-size: 13px; }
  .story > p { font-size: 16px; }
  .values { grid-template-columns: 1fr; row-gap: 0; padding-top: 0; }
  .values li { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .values li:last-child { border-bottom: 0; }
  .values strong { font-size: 20px; }
  .steps { grid-template-columns: 1fr; border-left: 2px solid var(--green); padding-left: 20px; row-gap: 22px; }
  .steps li, .steps li.prep { border-top: 0; padding-top: 0; gap: 4px; }
  .steps strong { font-size: 20px; }
  .quotes { text-align: left; }
  .quotes .wrap { align-items: stretch; gap: 24px; }
  .quote { align-items: flex-start; gap: 20px; }
  .quote-stage { min-height: 330px; }
  .fit-list, .fit-list.not { grid-column: 1 / -1; }
  .fit-list li { font-size: 15px; padding: 14px 0; }
  .contact .btn { width: 100%; }
  .site-footer { padding-top: 48px; padding-bottom: 48px; }
  .footer-nav { flex-direction: column; gap: 0; }
  .footer-bottom { flex-direction: column; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
}