/* Calder & Wynne website. tokens.css + base.css are copied verbatim from the design system.
   Identity: navy and steel on white, Source Serif for titles and key figures, Source Sans for text,
   steel for numbering, square corners (the framed mark), hairline rules. */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--white); font-size: 17px; line-height: 1.6; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
section[id] { scroll-margin-top: 72px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: .02em;
  padding: 14px 24px; border: 1.5px solid transparent; cursor: pointer; font-family: var(--sans);
  transition: background .2s, color .2s, border-color .2s; }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--steel); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--mist); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.lockup { display: flex; align-items: center; gap: 14px; }
.lockup svg { display: block; }
.wm { font-weight: 600; letter-spacing: .16em; font-size: 13px; white-space: nowrap; line-height: 1; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; color: var(--slate); }
.nav a:not(.btn):hover { color: var(--ink); }

/* ---- hero ---- */
.hero { background: var(--ink); color: var(--white); }
.hero .wrap { padding-top: 120px; padding-bottom: 104px; }
.over { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--light); }
.over::before { content: ""; width: 28px; height: 1.5px; background: var(--light); }
.hero h1 { font-family: var(--serif); font-size: clamp(40px, 5.4vw, 72px); font-weight: 600; line-height: 1.06; margin-top: 26px; max-width: 17ch; }
.hero h1 span { display: block; }
.hero h1 span:nth-child(2) { color: var(--light); }
.hero .sub { font-size: 20px; line-height: 1.55; color: #D5DDE6; max-width: 40em; margin-top: 30px; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 88px; border-top: 1px solid rgba(255,255,255,.2); }
.facts div { padding: 22px 24px 0 0; }
.facts b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.facts span { font-size: 14px; color: var(--light); }

/* ---- sections ---- */
.sec { padding: 112px 0; }
.sec.mist { background: var(--mist); }
.sec.line { border-top: 1px solid var(--rule); }
.head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; }
h2 { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; line-height: 1.12; }
.lead { font-size: 18px; color: var(--slate); }
.after { margin-top: 48px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; color: var(--slate); }

/* audience */
.aud { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--ink); }
.aud div { padding: 28px 28px 8px 0; }
.aud h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.aud p { color: var(--slate); font-size: 16px; margin-top: 8px; }

/* service cards */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); padding: 38px 36px 34px; transition: border-color .2s, box-shadow .2s; }
.card:hover { border-color: var(--ink); box-shadow: 0 16px 36px -24px rgba(27,42,65,.5); }
.card .ac { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .1em; padding: 4px 9px; background: var(--ink); color: var(--white); }
.card .side { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-left: 12px; }
.card h3 { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.15; margin: 20px 0 10px; }
.card p { color: var(--slate); }
.card ul { list-style: none; margin-top: 22px; border-top: 1px solid var(--rule); }
.card li { padding: 9px 0 9px 20px; border-bottom: 1px solid var(--rule); font-size: 15px; position: relative; }
.card li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 1.5px; background: var(--steel); }

/* numbered lists: lifecycle, DNA */
.n { font-family: var(--serif); font-weight: 600; color: var(--steel); font-variant-numeric: tabular-nums lining-nums; }
.life { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1.5px solid var(--ink); }
.life > div { padding: 26px 22px 0 0; position: relative; }
.life > div::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; background: var(--steel); }
.life .n { font-size: 34px; line-height: 1; }
.life h3 { font-size: 19px; font-weight: 600; margin: 14px 0 8px; }
.life p { color: var(--slate); font-size: 15px; }

.dna { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px; }
.dna > div { display: grid; grid-template-columns: 64px 1fr; padding: 30px 0; border-top: 1px solid var(--rule); }
.dna .n { font-size: 28px; }
.dna h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.dna p { color: var(--slate); margin-top: 6px; }

/* method timeline */
.method { list-style: none; counter-reset: m; max-width: 860px; }
.method li { counter-increment: m; display: grid; grid-template-columns: 64px 1fr; gap: 0 8px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.method li::before { content: counter(m, decimal-leading-zero); font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--steel); }
.method b { font-weight: 600; }
.method span { color: var(--slate); }

/* team */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.person { display: grid; grid-template-columns: 120px 1fr; gap: 28px; background: var(--white); border: 1px solid var(--rule); padding: 30px; }
.mono { width: 120px; height: 140px; background: var(--mist); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--steel); }
.person h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.person .role { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-top: 4px; }
.person p { color: var(--slate); font-size: 16px; margin-top: 12px; }

/* track record */
.deals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.deal { border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 24px 26px; }
.deal .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; background: var(--mist); border: 1px solid var(--rule); }
.tag.hi { background: var(--ink); color: var(--white); border-color: var(--ink); }
.deal h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 16px 0 6px; line-height: 1.25; }
.deal p { color: var(--slate); font-size: 15px; }
.deal .meta { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--slate); }
.note { font-size: 13px; color: var(--slate); margin-top: 18px; }

/* contact */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; }
.contact .lines { margin-top: 32px; border-top: 1px solid var(--rule); }
.contact .lines div { display: grid; grid-template-columns: 120px 1fr; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.contact .lines span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); padding-top: 3px; }
.contact .lines a:hover { color: var(--steel); }
form.f { background: var(--white); border: 1px solid var(--rule); padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.f .full { grid-column: 1 / -1; }
.f input, .f select, .f textarea { font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); background: var(--white);
  border: 1px solid var(--rule); border-radius: 0; padding: 11px 12px; width: 100%; }
.f textarea { min-height: 130px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.f .small { font-size: 13px; color: var(--slate); font-weight: 400; }

/* ---- footer ---- */
.foot { background: var(--ink); color: var(--white); padding: 56px 0 36px; }
.foot .wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.foot .wm { color: var(--white); margin-top: 16px; font-size: 12px; }
.foot nav { display: flex; gap: 26px; flex-wrap: wrap; font-size: 15px; color: var(--light); }
.foot nav a:hover { color: var(--white); }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; font-size: 13px; color: var(--light); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.foot .addr { margin-top: 18px; font-size: 14px; color: var(--light); line-height: 1.7; }
.foot .addr a:hover { color: var(--white); }

/* ---- multi-page: nav state, language switch, burger ---- */
.nav a[aria-current=page] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--steel); padding-bottom: 4px; }
.nav .lang { font-size: 13px; font-weight: 600; letter-spacing: .1em; border: 1px solid var(--rule); padding: 5px 9px; color: var(--ink); }
.nav .lang:hover { border-color: var(--ink); }
.burger { display: none; background: none; border: 0; cursor: pointer; align-items: center; gap: 4px; flex-direction: column; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); }
.burger b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* page head (inner pages) */
.phead { background: var(--ink); color: var(--white); }
.phead .wrap { padding-top: 88px; padding-bottom: 80px; }
.phead h1 { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 58px); font-weight: 600; line-height: 1.08; margin-top: 22px; max-width: 20ch; }
.phead .sub { font-size: 19px; color: #D5DDE6; max-width: 42em; margin-top: 22px; }

/* key figures */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--ink); }
.stats div { padding: 26px 24px 0 0; }
.stats b { display: block; font-family: var(--serif); font-size: 46px; font-weight: 600; color: var(--steel); line-height: 1.05; font-variant-numeric: lining-nums; }
.stats span { display: block; color: var(--slate); font-size: 15px; margin-top: 8px; }
.facts b { font-size: 34px; }

/* quotes */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.q { border-left: 4px solid var(--steel); padding: 6px 0 6px 24px; }
.q blockquote { font-family: var(--serif); font-size: 23px; line-height: 1.35; }
.q figcaption { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.pull { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); line-height: 1.3; max-width: 30ch; border-left: 5px solid var(--steel); padding-left: 32px; }
.pull b { font-weight: 600; }

/* partners */
.partners { display: grid; gap: 32px; }
.partner { display: grid; grid-template-columns: 200px 1fr; gap: 48px; border-top: 3px solid var(--ink); padding-top: 36px; }
.partner .mono { width: 200px; height: 240px; font-size: 52px; }
.partner h3 { font-family: var(--serif); font-size: 34px; font-weight: 600; }
.partner .role { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-top: 6px; }
.partner p { color: var(--slate); margin-top: 18px; max-width: 46em; }
.partner .lines, .contact .lines { margin-top: 24px; border-top: 1px solid var(--rule); }
.partner .lines div, .contact .lines > div { display: grid; grid-template-columns: 140px 1fr; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.partner .lines span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); padding-top: 3px; }
.join { margin-top: 40px; color: var(--slate); }
.join a { color: var(--ink); text-decoration: underline; }

/* track record filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filters button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; background: var(--white); border: 1px solid var(--rule); color: var(--ink); cursor: pointer; }
.filters button.on, .filters button:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.deal { background: var(--white); }
.deal[hidden] { display: none; }

/* CTA band before footer */
.band { background: var(--steel); color: var(--white); }
.band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: 72px; padding-bottom: 72px; }
.band h2 { color: var(--white); }
.band p { color: #E3E9EF; margin-top: 10px; max-width: 40em; }
.foot { border-top: 1px solid rgba(255,255,255,.08); }

/* insights */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 26px 28px; transition: border-color .2s, box-shadow .2s; }
.post:hover { border-color: var(--ink); box-shadow: 0 16px 36px -24px rgba(27,42,65,.5); }
.pmeta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.post h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.25; margin: 14px 0 8px; }
.post p { color: var(--slate); font-size: 15px; flex: 1; }
.post .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.post .more { margin-top: 16px; font-size: 14px; font-weight: 600; }
.phead.art h1 { max-width: 26ch; }
.byline { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; color: #D5DDE6; font-size: 15px; }
.byline b { color: var(--white); font-weight: 600; }
.prose { max-width: 720px; font-size: 18px; line-height: 1.7; }
.prose .standfirst { font-family: var(--serif); font-size: 23px; line-height: 1.45; color: var(--ink); margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.prose h2 { font-size: 28px; margin: 48px 0 14px; }
.prose h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 32px 0 10px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 20px 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--steel); font-weight: 600; }
.prose a { text-decoration: underline; }
.prose blockquote { border-left: 4px solid var(--steel); padding-left: 22px; font-family: var(--serif); font-size: 21px; margin: 28px 0; }
.prose .tbl { overflow-x: auto; margin: 24px 0 28px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--white); background: var(--ink); padding: 9px 12px; }
.prose td { border-bottom: 1px solid var(--rule); padding: 9px 12px; vertical-align: top; }
.prose .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.disc { font-size: 13px; color: var(--slate); margin-top: 20px; }
.prose .sources { margin-top: 48px; padding-top: 24px; border-top: 1.5px solid var(--ink); }
.prose .sources h2 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin: 0 0 14px; }
.prose .sources ol { margin: 0 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--slate); }
.prose .sources li { margin-bottom: 8px; overflow-wrap: anywhere; }
.prose .sources a { color: var(--ink); font-weight: 600; }
@media (min-width: 1081px) and (max-width: 1300px) { .nav { gap: 18px; font-size: 14px; } .top .wm { display: none; } }

a:focus-visible, .btn:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .nav a.opt { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .burger { display: flex; }
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 40px 24px; }
  .top { position: sticky; }
  .top.open .nav { display: flex; }
  .nav a:not(.btn) { display: block !important; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--rule); box-shadow: none; }
  .nav .lang { border: 0; border-bottom: 1px solid var(--rule); padding: 12px 0; }
  .nav .btn { margin-top: 16px; }
  .life { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .aud, .facts { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .deals, .posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  body { font-size: 16px; }
  .wrap { padding: 0 22px; }
  .nav a:not(.btn) { display: none; }
  .top .wm { display: none; }
  .hero .wrap { padding-top: 80px; padding-bottom: 72px; }
  .sec { padding: 76px 0; }
  .head, .contact, .cards, .dna, .team, .deals, .posts { grid-template-columns: 1fr; gap: 28px; }
  .prose { font-size: 17px; }
  .dna { gap: 0; }
  .life { grid-template-columns: 1fr; }
  .person, .partner { grid-template-columns: 1fr; gap: 24px; }
  .partner .mono { width: 120px; height: 140px; font-size: 34px; }
  .partner .lines div, .contact .lines > div { grid-template-columns: 110px 1fr; }
  .nav { padding: 12px 22px 24px; }
  .stats b { font-size: 36px; }
  .phead .wrap { padding-top: 64px; padding-bottom: 56px; }
  form.f { grid-template-columns: 1fr; padding: 24px; }
  .foot .wrap { grid-template-columns: 1fr; }
}