/* Kingsway Brokerage — site presentation (site-scoped; the vendored kit 0.1.0 is unchanged).
   Restores the original Brokerage design study (its style.css, 4 Oct 2026; see docs/DESIGN-NOTES.md):
   its wrap and gutters, header and lockup proportions, serif scale, plain eyebrows, gold button,
   cream/stone/paper/charcoal rhythm, the charcoal relationship panel with gold arches, numbered
   route rows, the approach steps, the two-tone Payroll proof panel and the original footer.
   Values follow style.css; departures are only for accessibility or responsiveness (12px minimum
   text, AA contrast, visible focus on cream and charcoal, no overflow at 320px, reduced motion)
   and are noted inline. Inner pages reuse the same language. */

/* ---------- 1. Original tokens, wrap and rhythm ---------- */
:root{
  --k-gutter:60px;            /* .wrap padding 0 60px */
  --k-section:96px;           /* .section padding 96px 0 */
  --k-h1:clamp(48px,5.25vw,80px);
  --k-h2:clamp(36px,3.6vw,55px);
  --k-h3:30px;
  --k-text-lg:19px;
  --b-line:#d8d1c2;
  --b-route-top:#9c9589;
  --b-route-rule:#c2baad;
  --b-route-hover:#e2dacb;
  --b-muted-on-ink:#b4bcc2;
  --b-tab-rule:#697278;
  --b-outline:#9ba1a5;
  --b-proof-result:#202a30;
  --b-body-2:#3d454c;
  --b-body-3:#4b5153;
  --b-body-4:#4c5358;
  --b-body-5:#50565a;
  /* The original serif stack. The kit leads with Source Serif 4, which would replace Iowan on any
     machine that has it installed; the study set 'Iowan Old Style',Georgia,serif. */
  --k-font-display:"Iowan Old Style",Georgia,serif;
}
@media (max-width:1050px){:root{--k-gutter:34px}}
@media (max-width:800px){:root{--k-section:65px}}
@media (max-width:480px){:root{--k-gutter:23px;--k-section:58px}}

html{scroll-padding-top:30px}
/* The kit sets antialiased/grayscale smoothing; the original leaves it at auto, which renders Plex,
   Iowan and Barlow at their intended weight on macOS (most visible in grey text and on charcoal). */
body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
a{text-underline-offset:5px}
:focus-visible{outline:3px solid var(--k-gold-ink);outline-offset:5px}
.k-header :focus-visible,.k-footer :focus-visible,.k-on-ink :focus-visible,.k-surface-ink :focus-visible{outline-color:var(--k-focus-on-ink)}
.k-wrap{max-width:1336px}
.k-wrap.k-wrap--narrow{max-width:calc(880px + 2 * var(--k-gutter))}
em{font-weight:400}

/* Original type scale: h1 clamp(48,5.25vw,80)/1.02/-.045em; h2 clamp(36,3.6vw,55)/1.08/-.035em; h3 30px. */
.k-display,.k-h1{font-size:var(--k-h1);line-height:1.02;letter-spacing:-.045em}
.k-h2,.section-title{font-family:var(--k-font-display);font-weight:400;font-size:var(--k-h2);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.k-h3{font-size:30px;line-height:1.15;letter-spacing:-.02em}
.k-lede{font-size:19px;line-height:1.65;color:var(--k-ink);max-width:450px}

/* Eyebrow: 14px bold, no gold rule (the kit's .k-eyebrow draws one; the original does not). */
.k-eyebrow{display:block;font:700 14px/1.65 var(--k-font-body);letter-spacing:.025em;margin-bottom:25px} /* the original inherits the body's 1.65 */
.k-eyebrow::before{content:none;display:none}

/* Original gold button: 15px bold, 15px 21px, 36px gap, 2px lift on hover (none under reduced motion). */
.k-btn{gap:36px;min-height:0;padding:15px 21px;font:700 15px/1.5 var(--k-font-body);transition:background-color .18s,transform .18s}
.k-btn:hover{background:var(--k-gold-bright);transform:translateY(-2px)}
/* The original arrow inherits the button's 15px bold at 1.5. The glyph is → for journeys inside the
   site and ↗ only for links that leave it (a deliberate wayfinding departure, see DESIGN-NOTES). */
.k-btn__arrow{font-size:1em;font-weight:700;line-height:inherit}
.k-btn--ink:hover{background:var(--k-ink-panel)}
.k-link{font-size:15px;text-decoration-color:currentColor;text-underline-offset:5px}
.text-link{display:inline-block;padding-block:3px;font-size:14px;font-weight:700;line-height:1.65;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.text-link:hover{text-decoration-thickness:2px}

/* Shared sections */
.section{padding-block:var(--k-section)}
.section--stone{background:var(--k-stone)}
.section--paper{background:var(--k-paper)}
.section-head,.k-section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:80px;align-items:start;margin-bottom:48px}
.section-head p,.k-section-head p{font-size:18px;line-height:1.65;max-width:400px;padding-top:6px;color:var(--b-body-2)}
.k-split{gap:80px}

/* ---------- 2. Preview banner: one quiet line in the spirit of the study bar ---------- */
.k-preview{background:var(--k-sand);color:#4a463d;font-size:13px;line-height:1.4;padding-block:9px}
.k-preview p{max-width:none}

/* ---------- 3. Header: 96px row, 41px portcullis, 28px Barlow wordmark, 15px nav, outlined CTA ---------- */
.k-header__row{min-height:96px;gap:30px;flex-wrap:nowrap}
.k-lockup{gap:13px}
.k-lockup svg{width:41px;height:41px}
.k-lockup__word{font:700 28px/1 var(--k-font-mark);letter-spacing:.035em}
.k-lockup__desc{margin-top:9px;font:400 13px/1 var(--k-font-body);letter-spacing:.15em}
.k-nav{flex-basis:auto;flex-direction:row;align-items:center;gap:31px;padding:0;font-size:15px}
.k-js .k-nav{display:flex}
.k-nav a{padding:8px 0;border-bottom:0;text-decoration:none}
.k-nav a:hover{text-decoration:underline;text-decoration-thickness:1px}
.k-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--k-gold);text-decoration-thickness:2px;box-shadow:none;padding-left:0}
.k-nav a.k-nav__cta{margin-top:0;align-self:auto;padding:10px 19px;border:1px solid var(--b-outline);text-decoration:none}
.k-nav a.k-nav__cta:hover{background:none;border-color:var(--k-on-ink)}
.k-nav a.k-nav__cta[aria-current="page"]{border-color:var(--k-gold)}
/* The original compact bordered "Menu" button: text only, 1px #9ba1a5 border. */
.k-js .k-menu-btn{display:none}
.k-menu-btn{gap:0;min-height:44px;padding:7px 13px;border:1px solid var(--b-outline);font-size:17px;line-height:1.65}
.k-menu-btn__bars{display:none}
/* The open state shows on the button itself (the kit's bars icon, which changes shape, is hidden). */
.k-menu-btn[aria-expanded="true"]{border-color:var(--k-gold)}

/* ---------- 4. Footer: lockup and serif tagline, then the rule with the role statement ---------- */
.k-footer{padding-block:52px 28px;font-size:14px;line-height:1.65;color:var(--b-muted-on-ink)}
.k-footer__top{flex-wrap:nowrap;align-items:center;gap:40px;padding-bottom:0;margin-bottom:42px}
.k-footer__tag{font:400 25px/1.65 var(--k-font-display);color:var(--k-paper);max-width:none;text-wrap:wrap}
.k-footer__base{flex-wrap:nowrap;gap:40px;padding-top:24px;border-top:1px solid var(--b-body-2);font-size:13px}
.k-footer__base p{max-width:720px}
.k-footer__nav{flex:none;justify-content:flex-end;gap:2px 22px}
.k-footer__nav a{padding-block:3px}

/* ---------- 5. Home ---------- */
.hero{padding:86px 0 76px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);align-items:center;gap:66px}
.hero-title{font-size:clamp(48px,5.25vw,71px);line-height:1.02;letter-spacing:-.045em} /* original max 80px: above ~1370px that wraps "Better arrangements." in the 1.14fr column, so it stops at 71px */
.hero-title em{font-style:italic}
.hero-lede{font-size:19px;line-height:1.65;margin-top:27px;max-width:450px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:33px}
.hero-note{font-size:13px;color:var(--k-slate);margin-top:20px}
@media (min-width:1550px){.hero{padding-top:110px;padding-bottom:100px}}

/* The relationship panel: charcoal, 478px, 37px 40px; controls along the bottom edge. The original
   positions the controls absolutely 28px from the bottom; a column flex with the controls last gives
   the same picture without letting a long state run under them. */
.relationship{position:relative;display:flex;flex-direction:column;min-height:478px;padding:37px 40px 28px;background:var(--k-ink);color:var(--k-paper);overflow:hidden}
.relationship__overline{font-size:13px;line-height:1.65;color:var(--b-muted-on-ink)}
.relationship__stage{position:relative;z-index:1}
.relationship__title{max-width:280px;margin-top:27px;font:400 40px/1.09 var(--k-font-display);letter-spacing:-.035em;color:var(--k-paper);text-wrap:balance}
.relationship__copy{max-width:260px;margin-top:18px;font-size:14px;line-height:1.65;color:var(--b-muted-on-ink)}
.relationship__tabs{position:relative;z-index:1;display:flex;gap:8px;margin-top:auto;padding-top:28px}
.relationship__tabs button{flex:1;min-width:0;padding:7px 0;border:0;border-bottom:1px solid var(--b-tab-rule);background:none;color:var(--b-muted-on-ink);font:400 13px/1.65 var(--k-font-body);text-align:left;cursor:pointer}
.relationship__tabs button:hover{color:#fff}
.relationship__tabs button[aria-pressed="true"]{color:#fff;border-bottom:3px solid var(--k-gold)}
.relationship__tabs button:focus-visible{outline-offset:4px}
/* Without JavaScript the first state shows and the controls (which would do nothing) are hidden. */
html:not(.k-js) .relationship__tabs{visibility:hidden}
.arches{position:absolute;right:15px;bottom:73px;width:195px;height:290px;opacity:.35;pointer-events:none}
.arches span{position:absolute;right:0;bottom:0;width:155px;height:275px;border:1px solid var(--k-gold);border-bottom:0;border-radius:130px 130px 0 0}
.arches span:nth-child(2){right:19px;height:244px}
.arches span:nth-child(3){right:38px;height:213px}
.arches span:nth-child(4){right:57px;height:182px}

/* Quiet specialist signpost */
.signpost{display:flex;align-items:center;gap:25px;max-width:none;padding:22px 0;border-top:1px solid var(--b-line);font-size:14px;line-height:1.65}
.signpost__label{flex:1;color:var(--k-slate)}
.signpost span:not(.signpost__label){font-weight:700}

/* Numbered route rows on stone */
.routes{list-style:none;margin:0;padding:0;border-top:1px solid var(--b-route-top)}
.route{display:grid;grid-template-columns:55px minmax(0,1.25fr) minmax(0,1fr) 35px;gap:20px;align-items:center;padding:27px 0;border-bottom:1px solid var(--b-route-rule);color:inherit;text-decoration:none;transition:padding .2s,background-color .2s}
.route:hover{background:var(--b-route-hover);padding-inline:15px}
.route__num{font:700 26px/1.65 var(--k-font-mark);color:var(--k-gold-ink)}
.route__title{font:400 28px/1.2 var(--k-font-display);text-wrap:balance}
.route__text{max-width:330px;font-size:15px;line-height:1.65;color:var(--b-body-3)}
.route__meta{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--b-body-3)} /* quiet: the row keeps its original weight */
.route__arrow{font-size:26px;line-height:1.65}
.route:hover .route__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* Approach: heading left, three steps right */
.work-together{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px}
.work-together .intro{max-width:420px;margin-top:24px;font-size:19px;line-height:1.7}
.work-together__link{margin-top:26px}
.steps,.k-steps{list-style:none;margin:0;padding:0}
.steps>li,.k-steps>li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:22px;padding:26px 0;border-bottom:1px solid var(--b-line)}
.steps>li:first-child,.k-steps>li:first-child{padding-top:0}
.step-num,.k-steps__num{font:700 28px/1.65 var(--k-font-mark);color:var(--k-gold-ink)}
.steps h3,.k-steps h3{margin-bottom:9px;font-size:27px;line-height:1.15;letter-spacing:-.02em;text-wrap:wrap} /* the original's normal wrapping, not the kit's balance */
.steps p,.k-steps p{max-width:380px;font-size:16px;line-height:1.65;color:var(--b-body-4)}
.k-steps__num{line-height:1.25}

/* Boxed two-tone Payroll proof */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--k-ink);color:var(--k-paper)}
.proof__copy{padding:50px}
.proof .proof__eyebrow{margin:0 0 22px;font-size:17px;line-height:1.65;color:var(--b-muted-on-ink)} /* the original's .proof p rule sets this eyebrow at 17px */
.proof__title{font-size:43px;line-height:1.08;letter-spacing:-.035em}
.proof__lede{margin-top:22px;font-size:17px;color:var(--b-muted-on-ink)}
.proof__more{margin-top:24px}
.proof__link{display:inline-block;font-size:15px;color:var(--k-paper)}
.proof__result{display:flex;flex-direction:column;justify-content:center;padding:50px;background:var(--b-proof-result)}
.proof__headline{display:flex;flex-direction:column;max-width:none}
.proof__figure{font:400 80px/1 var(--k-font-display);letter-spacing:-.04em}
.proof__unit{margin-top:13px;font-size:20px;line-height:1.65}
.proof__caption{margin-top:25px;font-size:14px;line-height:1.65;color:var(--b-muted-on-ink)}

/* Partner and closing rows */
.contact-row{display:flex;align-items:center;justify-content:space-between;gap:40px}
.contact-row .section-title{max-width:670px}
.contact-row__copy>p{margin-top:18px;color:var(--b-body-5);max-width:65ch} /* the original's p{max-width:65ch} */
.contact-row__copy>.k-eyebrow{margin-bottom:25px}
.contact-row>.k-btn{flex:none}

/* ---------- 6. Inner pages: the same language ---------- */
.page-head{max-width:640px}
.page-head .k-h1 em{font-style:italic}
.page-head .k-lede{margin-top:27px}
.page-head .hero-actions{margin-top:33px}
.inner-title{font-size:clamp(44px,4.8vw,72px)}

/* Questions: the original's plain disclosure rows (Plex 19px, +/−). */
.k-faq{border-top:1px solid var(--b-line)}
.k-faq__item{border-bottom:1px solid var(--b-line)}
.k-faq__item>summary{padding:19px 0;font:400 19px/1.45 var(--k-font-body);letter-spacing:0;gap:25px}
.k-faq__item>summary::after{font:400 23px/1 var(--k-font-body);color:var(--k-ink)}
/* The +/− and ↗ are drawn by the kit as generated content, which screen readers announce as part
   of the name ("plus", "north east arrow"). Same glyphs, empty alternative text. The first
   declaration is the fallback for browsers without the alt-text syntax. */
.k-faq__item>summary::after{content:"+";content:"+" / ""}
.k-faq__item[open]>summary::after{content:"\2212";content:"\2212" / ""}
.k-external::after{content:"\2009\2197";content:"\2009\2197" / ""}
.k-faq__item>summary:hover{color:var(--b-body-2)}
.k-faq__body{padding:0 0 22px;font-size:16px;color:var(--b-body-4)}

/* Square paper panel with the original document treatment (no radius, restrained shadow). */
.paper{background:var(--k-paper);box-shadow:0 16px 34px rgba(20,26,31,.08)}

/* ---------- 7. Approach ---------- */
.ledger-stage{padding:43px 40px 40px;background:var(--k-stone-deep)}
.ledger{position:relative;padding:30px 29px 26px;background:var(--k-paper);box-shadow:0 16px 34px rgba(20,26,31,.08)}
.ledger__run{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 15px;padding-bottom:15px;border-bottom:1px solid var(--b-line);font-size:13px;line-height:1.4;color:#596065}
.ledger__run span{white-space:nowrap}
.ledger__title{margin-top:26px;font:400 37px/1.1 var(--k-font-display);letter-spacing:-.03em}
.ledger__rows{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--b-line)}
.ledger__row{display:grid;grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--b-line);font-size:14px;line-height:1.5}
.ledger__topic{font-weight:700}
.ledger__month{font:700 13px/1.2 var(--k-font-mark);letter-spacing:.08em;text-transform:uppercase;color:var(--k-gold-ink)}
.ledger__when{color:var(--b-body-2)}
.ledger__foot{margin-top:18px;font-size:13px;color:var(--k-slate)}
.terms-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.terms-grid li{padding-top:24px;border-top:1px solid var(--k-rule-strong)}
.terms-grid h3{max-width:240px;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.terms-grid p{margin-top:14px;font-size:16px;color:var(--b-body-4)}
.what__title{margin-bottom:48px}
.what__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px}
.what__label{padding-bottom:14px;border-bottom:1px solid var(--k-ink);font:700 14px/1.4 var(--k-font-body);letter-spacing:.025em}
.what__col--not .what__label{border-bottom-color:var(--k-rule-strong);color:var(--b-body-2)}
.what__col p{padding:18px 0;border-bottom:1px solid var(--b-line);font:400 22px/1.38 var(--k-font-display);letter-spacing:-.01em}
.what__col--not p{color:var(--b-body-2)}

/* ---------- 8. Partners: a charcoal panel beside the copy, as on the home page ---------- */
.partner-panel{padding:37px 40px 34px;background:var(--k-ink);color:var(--k-paper)}
.partner-panel__overline{font:400 13px/1.65 var(--k-font-body);letter-spacing:0;color:var(--b-muted-on-ink)}
.partner-steps{list-style:none;margin:14px 0 0;padding:0}
.partner-steps li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--k-ink-line)}
.partner-steps li:last-child{border-bottom:0;padding-bottom:0}
.partner-steps .step-num{font-size:24px;line-height:1.3;color:var(--k-gold)}
.partner-steps h3{font-size:25px;line-height:1.15;letter-spacing:-.02em;color:var(--k-paper)}
.partner-steps p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--b-muted-on-ink)}
.partner-form{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start}
.partner-form__intro{position:sticky;top:32px}
.partner-form__intro .k-lede{margin-top:22px}
.form-panel{padding:44px;background:var(--k-paper)}
.form-panel .k-form,.form-panel .k-outcome{max-width:none}

/* ---------- 9. Contact ---------- */
.contact{padding-block:86px 96px}
.contact__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-rows:auto 1fr;grid-template-areas:"intro panel" "aside panel";column-gap:66px;align-items:start}
.contact__intro{grid-area:intro}
.contact__aside{grid-area:aside;position:sticky;top:32px}
.contact__panel{grid-area:panel;padding:44px;background:var(--k-paper)}
.contact__booking{margin-top:30px}
.contact__panel .k-form,.contact__panel .k-outcome{max-width:none}
/* Unselected choices keep the kit's field rule (3.4:1 on paper, like the text inputs; WCAG 1.4.11),
   and the kit keeps the ink border and gold wash for the checked state. */
.k-form .k-choice label,.k-form .k-choice label::before{border-color:var(--k-rule-field)}
/* Need cards: the first fieldset of the contact form. */
#contact-form>.k-fieldset:first-of-type>legend{margin-bottom:10px;font:400 30px/1.15 var(--k-font-display);letter-spacing:-.02em}
#contact-form>.k-fieldset:first-of-type .k-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#contact-form>.k-fieldset:first-of-type .k-choice{display:flex}
#contact-form>.k-fieldset:first-of-type .k-choice label{flex:1;min-height:62px;padding:14px 16px;font-size:15px;line-height:1.35}
/* Seven topics: the last, honest "Not sure yet" card spans the row. */
#contact-form>.k-fieldset:first-of-type .k-choice:last-child:nth-child(odd){grid-column:1 / -1}
/* Topic first, then the person: a quiet rule between the two. */
#contact-form>.k-field:has(#contact-form-name){border-top:1px solid var(--b-line);padding-top:26px}
.need-note__links{display:flex;flex-wrap:wrap;gap:4px 24px}
.need-note__links .k-link{display:inline-block;padding-block:3px}
.need-note{border-left:3px solid var(--k-gold);background:var(--k-ground);padding:20px 22px}
.need-note p{font-size:15px;line-height:1.55}
.need-note p+p{margin-top:12px}
.need-note__label{font:700 13px/1.3 var(--k-font-body)!important;letter-spacing:.025em;color:var(--k-gold-ink)}
.k-outcome{border-left-width:3px}
/* Launch preparation (9 October 2026). The honeypot sits off-screen: never seen, reached by Tab,
   read by assistive technology (aria-hidden) or autofilled. Not display:none, which some bots skip. */
.k-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Worker builds: "Sending…" beside Send, and the notice shown when nothing was accepted or receipt
   is unconfirmed (the answers stay above it). Same restrained treatment as the need notes. */
/* The empty status stays rendered, so the live region exists before "Sending…" is written into it. */
.k-form__status{font-size:14px;line-height:1.5;color:var(--b-body-2)}
.k-form[aria-busy="true"] [type="submit"]{cursor:progress}
.k-form__notice{border-left:3px solid var(--k-gold);background:var(--k-ground);padding:20px 22px}
.k-form__notice[hidden]{display:none}
.k-form__notice:focus{outline:3px solid var(--k-focus);outline-offset:3px}
.k-form__notice-label{font:700 12px/1.3 var(--k-font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--k-gold-ink)}
.k-form__notice-title{margin:8px 0 6px;font-size:24px;line-height:1.15;letter-spacing:-.02em}
.k-form__notice p{font-size:15px;line-height:1.55;color:var(--b-body-2)}
.k-form__notice p+p{margin-top:8px}
.k-form__alt a{font-weight:700;color:var(--k-ink);text-decoration:underline;text-decoration-color:var(--k-gold-ink);text-underline-offset:.32em;padding-block:3px}
/* The address and its full stop wrap as one unit, and break only at the <wbr> after "@" and before
   the domain's first dot (scripts/lib/forms.mjs addressHtml), never mid-word. */
.k-form__addr{display:inline-block;max-width:100%}
/* The optional booking link beside the short enquiry (home closing row, partners intro, contact
   aside). Shown only when its Zoho Bookings link is confirmed in a production build; preview shows an
   honest note in the same place (data-preview-note, refused by the release check). */
.contact__booking,.partner-form__booking{font-size:15px;line-height:1.6;color:var(--b-body-2)}
.contact__booking .k-link,.partner-form__booking .k-link{color:var(--k-ink)}
.partner-form__booking{margin-top:22px}
.contact__booking-note,.partner-form__booking-note{margin-top:6px;font-size:14px;line-height:1.55;color:var(--b-body-2)}
.booking-note{max-width:420px;font-size:14px;line-height:1.55;color:var(--b-body-2);border-left:2px dashed var(--k-rule-strong);padding-left:12px}
.booking-note strong{color:var(--k-ink)}
.contact__aside .booking-note{margin-top:30px}
.contact-row__actions{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.contact-row__booking .k-link{font-size:14px}
/* Standalone booking links keep a 24px target on phones (WCAG 2.5.8). */
.contact-row__booking .k-link,.contact__booking .k-link,.partner-form__booking .k-link{display:inline-block;padding-block:3px}
/* The two inline booking links follow a question on the same line: a tighter focus ring (and a little
   space before the link) keeps the ring off the question mark and off the line above when it wraps. */
.contact__booking .k-link,.partner-form__booking .k-link{margin-left:3px}
.contact__booking .k-link:focus-visible,.partner-form__booking .k-link:focus-visible{outline-offset:1px}

/* ---------- 10. Privacy, 404 and articles ---------- */
.privacy__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:66px;align-items:start}
.privacy__head{position:sticky;top:32px}
.privacy__body h2{font-size:28px;line-height:1.15;letter-spacing:-.02em}
.privacy__body h2:first-child{margin-top:0}
.notfound .k-h1{max-width:12ch}
.notfound .k-lede{margin-top:27px;max-width:520px}
.notfound .k-lede a{white-space:nowrap}
.notfound .hero-actions{margin-top:33px}
.article__status{margin-bottom:22px}
.article .k-lede{max-width:620px}
.article__title{margin-bottom:22px}
.article__meta{display:flex;flex-wrap:wrap;gap:10px 32px;margin:30px 0 40px;padding:16px 0;border-block:1px solid var(--b-line);font-size:14px}
.article__meta dt{color:var(--k-slate)}
.article__meta dd{font-weight:700}
.article__sources,.article__related{margin-top:48px}
.article__sources ol{margin:14px 0 0;padding-left:1.2em}
.article__related .k-list{margin-top:14px}
.article__related .k-list a,.article__sources a{display:inline-block;padding-block:3px}
.article__cta{margin-top:56px}
.article__cta .k-actions{margin-top:22px}
.k-preview-tag.tag-wrap{white-space:normal;line-height:1.45;max-width:100%}
.privacy__version{font-size:14px;color:var(--b-body-2)}

/* ---------- 11. Breakpoints: the original 1050 / 800 / 480, plus 360 for 320px phones ---------- */
@media (max-width:1050px){
  .k-nav{gap:18px}
  .hero-grid{gap:35px}
  .hero{padding-top:65px}
  .relationship{min-height:458px;padding:29px}
  .relationship__title{font-size:35px;max-width:220px}
  .arches{right:-25px;opacity:.22}
  .section-head,.k-section-head{gap:40px}
  .route__title{font-size:24px}
  .work-together{gap:50px}
  .signpost{gap:17px}
  .partner-panel{padding:29px}
  .ledger-stage{padding:25px 16px}
  .ledger{padding:23px}
  .contact__panel,.form-panel{padding:32px}
}
@media (max-width:800px){
  /* Header: compact row, bordered Menu button. Padding rather than min-height so that opening
     the menu (which wraps the row) never moves the logo or the button. */
  .k-header__row{min-height:0;flex-wrap:wrap;column-gap:16px;row-gap:0;padding-block:15px;align-content:flex-start}
  .k-js .k-menu-btn{display:inline-flex}
  .k-js .k-nav{display:none}
  .k-js .k-nav.is-open{display:flex}
  .k-nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:6px;padding:22px 0 8px}
  .k-nav a{padding:6px 0}
  .k-nav a.k-nav__cta{align-self:flex-start;margin-top:12px;padding:10px 19px}
  .k-footer__top{flex-direction:column;align-items:flex-start}
  .k-footer__base{flex-direction:column;gap:18px}
  .k-footer__nav{justify-content:flex-start}

  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero{padding:52px 0 40px}
  .hero-lede{max-width:590px}
  .hero-title{max-width:600px;font-size:64px}
  .relationship{min-height:395px}
  .relationship__title{font-size:40px;max-width:350px}
  .relationship__copy{max-width:340px}
  .arches{right:20px;opacity:.25}
  .signpost{flex-wrap:wrap;gap:12px 25px}
  .signpost__label{flex-basis:100%}
  .section-head,.k-section-head,.work-together,.k-split,.what__grid,.partner-form,.privacy__grid{grid-template-columns:minmax(0,1fr);gap:25px}
  .section-head,.k-section-head{margin-bottom:32px}
  .section-head p,.k-section-head p{max-width:550px}
  .what__grid{row-gap:40px}
  .route{grid-template-columns:35px minmax(0,1fr) 25px;gap:15px}
  .route__text{grid-column:2;max-width:none}
  .route__arrow{grid-column:3;grid-row:1 / 3}
  .proof__copy,.proof__result{padding:34px}
  .proof__title{font-size:34px}
  .proof__figure{font-size:62px}
  .contact-row{align-items:flex-start;flex-direction:column}
  .inner-title,.k-h1{font-size:52px}
  .partner-form__intro,.privacy__head,.contact__aside{position:static}
  /* Visual order matches the source order (intro, booking link, form), so Tab never jumps. */
  .contact__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "aside" "panel";grid-template-rows:auto;row-gap:24px}
  .contact{padding-block:52px 65px}
  .contact__booking{margin-top:0}
  .ledger-stage{max-width:550px;padding:35px}
  .contact__aside .booking-note{margin-top:0}
}
@media (max-width:600px){
  /* Email / Phone / Either stay on one row on phones (three equal columns), then stack below 360px. */
  .k-choices:has(input[name="reply_route"]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .k-choices:has(input[name="reply_route"]) .k-choice label{width:100%;gap:8px;padding:10px}
  .terms-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .terms-grid h3{max-width:none}
  #contact-form>.k-fieldset:first-of-type .k-choices{grid-template-columns:minmax(0,1fr)}
  #contact-form>.k-fieldset:first-of-type .k-choice label{min-height:54px}
}
@media (max-width:480px){
  .k-header__row{padding-block:16px}
  .k-lockup{gap:9px}
  .k-lockup svg{width:34px;height:34px}
  .k-lockup__word{font-size:24px}
  .k-lockup__desc{font-size:12px;letter-spacing:.14em} /* original 11px; 12px minimum */
  .k-footer{padding-top:42px}
  .k-footer__tag{font-size:24px}
  .k-eyebrow{font-size:13px;margin-bottom:23px}
  .hero{padding-top:40px}
  .hero-title{font-size:48px}
  .hero-lede,.k-lede{font-size:17px;margin-top:23px}
  .hero-actions{margin-top:27px;gap:20px}
  .k-btn{padding:13px 17px;font-size:14px;gap:26px}
  .relationship{min-height:375px;padding:28px}
  .relationship__title{font-size:35px;max-width:260px}
  .relationship__copy{max-width:245px}
  .arches{right:-63px;opacity:.17}
  .signpost{font-size:13px;padding:20px 0;gap:10px 20px}
  .section-head p,.k-section-head p{font-size:17px}
  .route{padding:24px 0;gap:9px 12px}
  .route__title{font-size:26px}
  .route__title .br-wide{display:none} /* this forced break wraps badly at phone width */
  .route__text{font-size:14px}
  .proof{grid-template-columns:minmax(0,1fr)}
  .proof__copy,.proof__result{padding:29px}
  .proof__title{font-size:37px}
  .proof__figure{font-size:76px}
  .steps>li,.k-steps>li{gap:14px}
  .steps h3,.k-steps h3{font-size:26px}
  .inner-title,.k-h1{font-size:44px}
  .terms-grid h3{font-size:24px}
  .partner-panel{padding:28px 24px}
  .partner-steps li{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .ledger-stage{padding:24px 17px}
  .ledger{padding:24px 20px}
  .ledger__title{font-size:32px}
  .ledger__row{grid-template-columns:minmax(0,1fr);gap:2px}
  .contact__panel,.form-panel{padding:24px 20px}
  .what__col p{font-size:20px}
}
@media (max-width:360px){
  .k-choices:has(input[name="reply_route"]){grid-template-columns:minmax(0,1fr)}
  .hero-title{font-size:41px}
  .inner-title,.k-h1{font-size:38px}
  .section-title,.k-h2{font-size:33px}
  .relationship{padding:24px 22px}
  .relationship__title{font-size:31px}
  .relationship__tabs{gap:6px}
  .relationship__tabs button{flex:1 1 auto;font-size:12px;white-space:nowrap}
  .proof__figure{font-size:64px}
  .proof__copy,.proof__result{padding:24px}
}

/* ---------- 12. Reduced motion (the kit removes transitions; this removes the hover lift and shift) ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .k-btn:hover{transform:none}
  .route:hover{padding-inline:0}
}

/* ---------- 13. Print: legible with background graphics off (how most people print) ---------- */
@media print{
  .hero-actions,.relationship__tabs,.arches,.work-together__link,.contact-row>.k-btn,.contact-row__actions,.proof__more,.contact__booking,.partner-form__booking,.contact__booking-note,.partner-form__booking-note,.booking-note,[data-need-notes],.k-btn{display:none!important}
  .hero,.section,.contact{padding-block:25px}
  .hero-grid{gap:25px}
  .hero-title{font-size:38pt}
  .section--stone,.section--paper,.ledger-stage{background:#fff!important}
  .relationship,.proof,.proof__result,.partner-panel{background:#fff!important;color:#141A1F!important;border:1px solid #A89E8E;min-height:0}
  .relationship__overline,.relationship__copy,.proof__lede,.proof__caption,.proof .proof__eyebrow,.partner-panel__overline,.partner-steps p{color:#3D454C!important}
  .relationship__title,.proof__title,.proof__figure,.proof__unit,.partner-steps h3{color:#141A1F!important}
  .partner-steps .step-num,.step-num,.route__num,.k-steps__num,.k-lockup__desc{color:#735A22!important}
  .proof__result{border-left:0}
  .route{grid-template-columns:40pt minmax(0,1fr) minmax(0,1fr);padding:8pt 0}
  .route__arrow{display:none}
  .route__title br{display:none}
  .relationship,.proof,.route,.steps>li,.ledger,.partner-panel{break-inside:avoid}
  .ledger{box-shadow:none;border:1px solid #A89E8E}
  .partner-form__intro,.privacy__head,.contact__aside{position:static}
  .contact__grid,.partner-form,.privacy__grid{display:block}
  .terms-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .k-footer__base{border-top-color:#A89E8E}
}

/* An invalid consent box keeps its red error outline, which outranks the site's focus rule; draw the
   usual gold-ink focus ring around it when it has keyboard focus (WCAG 2.4.7 in the error state). */
.k-check input[aria-invalid="true"]:focus-visible{outline:3px solid var(--k-gold-ink);outline-offset:5px;box-shadow:0 0 0 2px var(--k-error)}