/* Secondary page reconciliation, 21 September 2026.
   One shared layer for the pages behind the homepage and the email offer page:
   thanks, privacy, terms, about, contact, how-buyers-find-you-now,
   are-you-showing-up.

   Loaded last, after styles.css, site-chrome.css and spring-review.css.
   The homepage and email page stylesheets are untouched.

   Those seven pages all carried one identical nav and one identical footer, so
   the header and footer here are written once and every page uses them. Page
   specific rules live at the bottom and stay short. */

/* ---- Canvas. White by default, as on the homepage. ---- */
body{background:#FFFFFF;color:#111110}

/* ---- Header. The homepage header, usable on a light or a dark page. ---- */
.header{min-height:96px;gap:36px;border-bottom:1px solid #D8D8D2}
.header nav{align-items:center;gap:28px;display:flex;margin-left:auto}
.header nav .header-contact{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:12px 18px;border-radius:var(--kee-soft-radius);background:#111110;color:#FFFFFF;white-space:nowrap}
.header nav .header-contact:hover,
.header nav .header-contact:focus-visible{text-decoration:none;background:#14B8C8;color:#111110}
.header-contact>span{font-size:20px;line-height:1}

/* ---- Legal footer, carrying Michele's supplied details plus the phone number
       the older footer held. ---- */
.legal-footer>a img{filter:none}
.legal-footer p a{text-decoration:none}
.legal-footer p a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-email>span,
.header-contact>span{display:inline-block;transform:none;transition:transform 180ms ease}
.footer-email:is(:hover,:focus-visible)>span,
.header-contact:is(:hover,:focus-visible)>span{transform:translate(3px,-3px)}

/* ---- Dark legal footer. A page ends dark once: either on the Studio close, as
       the homepage and email page do, or on the footer when there is no Studio
       close. Never both. ---- */
.legal-footer--dark{background:#111110;color:#FFFFFF}
.legal-footer--dark>a img{filter:brightness(0) invert(1)}
.legal-footer--dark p{color:#B7B3AC}
.legal-footer--dark p a{color:#FFFFFF}
.legal-footer--dark .footer-email{color:#FFFFFF}

/* ---- Dark page variant. The Studio close language at page scale, used by the
       thanks page. Kee black, white type, aqua action. ---- */
.page-dark body{background:#111110;color:#FFFFFF}
.page-dark .header{border-bottom:1px solid #FFFFFF26}
.page-dark .kee-mark img{filter:brightness(0) invert(1)}
.page-dark .studio-label{color:#B7B3AC}
.page-dark .header nav a{color:#FFFFFF}
.page-dark .header nav .header-contact{background:#14B8C8;color:#111110}
.page-dark .header nav .header-contact:hover,
.page-dark .header nav .header-contact:focus-visible{background:#CBE65A;color:#111110}
/* Lime rings sit over the black header, where they read at 12.6:1. The legal
   footer is ivory, so its links take a black ring instead. */
.page-dark .header nav a:focus-visible{outline:2px solid #CBE65A;outline-offset:4px}
.legal-footer a:focus-visible{outline:2px solid #111110;outline-offset:4px}
/* Declared after the ivory rule above, which it must beat: a black ring on the
   black footer is invisible. */
.legal-footer--dark a:focus-visible{outline:2px solid #CBE65A;outline-offset:4px}

/* ---- Thanks page. Four bands, ending the way the homepage ends:
       black, ivory, black Studio close, ivory footer. ---- */

/* ---- Page hero. One component, used by every secondary page, with the same
       anatomy as the homepage and email page openings: an eyebrow, a headline
       at hero scale, then a bottom row with a narrow rail on the left and the
       supporting copy indented into its own column on the right.

       Measured against both: headline 127px over three lines at 1440, the lead
       paragraph starting around 38% across. Add --dark for a black band. ---- */
.page-hero{padding:44px var(--gutter) clamp(52px,6vw,72px)}
.page-hero-inner{width:100%;max-width:1600px;margin-inline:auto}
.page-hero .eyebrow{display:block}
.page-hero-title{font:700 clamp(46px,8.8vw,138px)/1.01 Syne,Work,Arial,sans-serif;letter-spacing:-.055em;margin:38px 0 46px;font-size:var(--t-display);line-height:var(--lh-display)}
.page-hero-title mark{background:var(--kee-lime);color:#111110;padding:0 .06em .04em}
.page-hero-bottom{display:grid;grid-template-columns:1fr 1.6fr;align-items:end;gap:40px}
.page-hero-rail{font-size:13px;line-height:1.6;margin:0}
.page-hero-lead{font-size:var(--t-intro);line-height:var(--lh-intro);max-width:38ch;margin:0}
.page-link{display:inline-flex;align-items:center;gap:24px;margin-top:28px;font-size:16px;border-bottom:1px solid;padding-bottom:12px}
.page-link>span{font-size:22px;display:inline-block;transition:transform 180ms ease}
.page-link:is(:hover,:focus-visible)>span{transform:translate(3px,-3px)}

/* Dark hero. */
.page-hero--dark{background:#111110;color:#FFFFFF}
.page-hero--dark .eyebrow,
.page-hero--dark .page-hero-rail{color:#B7B3AC}
.page-hero--dark .page-hero-title,
.page-hero--dark .page-hero-lead{color:#FFFFFF}
.page-hero--dark .page-link{color:#FFFFFF;border-color:#FFFFFF70}
.page-hero--dark .page-link:hover{border-color:#FFFFFF}
.page-hero--dark .page-link:focus-visible{outline:2px solid #CBE65A;outline-offset:6px}

/* Light hero, for the pages that follow. */
.page-hero--light{background:#FFFFFF;color:#111110}
.page-hero--light .eyebrow,
.page-hero--light .page-hero-rail{color:#60635A}
.page-hero--light .page-link{color:#111110;border-color:#11111060}
.page-hero--light .page-link:hover{border-color:#111110}
.page-hero--light .page-link:focus-visible{outline:2px solid #111110;outline-offset:6px}

/* Recommendations. An editorial list on rules, not another card system, so the
   page stays calm after a form submission. */
.thanks-next{background:#FFFFFF;color:#111110;padding:clamp(40px,5vw,72px) var(--gutter) clamp(48px,6vw,80px)}
.thanks-next-inner{width:100%;max-width:1600px;margin-inline:auto}
.thanks-next-title{font:700 clamp(30px,3.2vw,46px)/1.06 Syne,Work,Arial,sans-serif;letter-spacing:-.05em;color:#111110;margin:0 0 8px;font-size:var(--t-h2);line-height:var(--lh-h2)}
.thanks-list{list-style:none;margin:0;padding:0}
.thanks-list-item{border-top:1px solid #D8D8D2}
.thanks-list-item:last-child{border-bottom:1px solid #D8D8D2}
.thanks-list-item>a{display:grid;grid-template-columns:1.6fr auto;align-items:baseline;gap:40px;padding:26px 0;color:#111110}
.thanks-list-text{display:block;max-width:58ch}
.thanks-list-title{display:block;font:700 clamp(21px,1.8vw,27px)/1.2 Syne,Work,Arial,sans-serif;letter-spacing:-.04em;font-size:var(--t-h3);line-height:var(--lh-h3)}
.thanks-list-note{display:block;font-size:15px;line-height:1.5;color:#60635A;margin-top:8px}
.thanks-list-action{display:inline-flex;align-items:center;gap:16px;white-space:nowrap;font-size:14px}
.thanks-list-action b{font-size:20px;font-weight:400;display:inline-block;transition:transform 180ms ease}
.thanks-list-item>a:hover .thanks-list-title{text-decoration:underline;text-underline-offset:5px}
.thanks-list-item>a:is(:hover,:focus-visible) .thanks-list-action b{transform:translate(3px,-3px)}
.thanks-list-item>a:focus-visible{outline:2px solid #111110;outline-offset:4px;text-decoration:none}
.thanks-closing{font-size:14px;color:#60635A;margin:36px 0 0}

/* ---- Prose. The long-form layer, first used by Privacy and Terms and built to
       carry About and the two content pages after them.

       It borrows the hero's anatomy so a page reads as one thing top to bottom:
       the same 1fr / 1.6fr grid, headings in the left rail, reading copy in the
       right column, and the hairline rules the thanks list already uses. The
       measure is held under about 70 characters, which is where long legal
       copy stays readable. ---- */
.page-prose{background:#FFFFFF;color:#111110;padding:0 var(--gutter) clamp(44px,5vw,72px)}
.page-prose-inner{width:100%;max-width:1600px;margin-inline:auto}
/* The band opener sits in the right column, on the same vertical line as the
   hero lead above it, so every piece of reading copy on the page starts at the
   same place. */
.prose-intro{display:grid;grid-template-columns:1fr 1.6fr;gap:0 40px}
.prose-intro>.prose-body{grid-column:2;margin-bottom:clamp(28px,3vw,44px)}
.prose-lead{grid-column:2;font-size:var(--t-intro);line-height:var(--lh-intro);max-width:min(62ch,660px);margin:0 0 clamp(28px,3vw,44px)}
.prose-section{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start;border-top:1px solid #D8D8D2;padding:clamp(26px,2.6vw,38px) 0}
.prose-section:last-of-type{border-bottom:1px solid #D8D8D2}
.prose-head{margin:0;font:700 clamp(21px,1.8vw,28px)/1.18 Syne,Work,Arial,sans-serif;letter-spacing:-.04em;color:#111110;font-size:var(--t-h3);line-height:var(--lh-h3)}
.prose-num{display:block;font:400 13px/1 Work,Arial,sans-serif;letter-spacing:.08em;color:#60635A;margin-bottom:14px}
.prose-body>p{font-size:var(--t-body);line-height:var(--lh-body);max-width:min(70ch,640px);margin:0 0 18px}
.prose-body>p:last-child{margin-bottom:0}
.prose-body a{color:#111110;text-decoration:underline;text-underline-offset:4px}
.prose-body a:hover{text-decoration-thickness:2px}
.prose-body a:focus-visible{outline:2px solid #111110;outline-offset:3px;text-decoration:none}

/* The plain-English summary that opens each clause on the terms page. */
.prose-short{font-size:var(--t-body);line-height:var(--lh-body);max-width:min(60ch,600px);margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid #E6E5DF}
.prose-short>span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#60635A;margin-bottom:9px}

/* Closing block. A question and an address, not a second Studio panel: these
   pages end on the dark footer. */
.page-close{background:#FFFFFF;color:#111110;padding:clamp(32px,4vw,56px) var(--gutter) clamp(44px,5vw,72px)}
.page-close-inner{width:100%;max-width:1600px;margin-inline:auto}
.page-close p:not(.page-close-line){font-size:var(--t-body);line-height:var(--lh-body);color:#60635A;margin:0}
.page-close p.page-close-line{font:700 clamp(27px,2.8vw,42px)/1.08 Syne,Work,Arial,sans-serif;letter-spacing:-.05em;color:#111110;margin:0 0 12px;font-size:var(--t-h2);line-height:var(--lh-h2)}
.page-close a{color:#111110;text-decoration:underline;text-underline-offset:4px}
.page-close a:focus-visible{outline:2px solid #111110;outline-offset:3px;text-decoration:none}

/* ---- Pull quote. Used once on About. It sits in the right column with the
       rest of the reading copy, at hero scale, so it lands as a change of
       voice rather than a decorated paragraph. ---- */
.prose-quote{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;border-top:1px solid #D8D8D2;padding:clamp(30px,3vw,46px) 0;margin:0}
.prose-quote blockquote{grid-column:2;margin:0;font:700 clamp(23px,2.2vw,34px)/1.22 Syne,Work,Arial,sans-serif;letter-spacing:-.04em;max-width:min(34ch,640px);font-size:var(--t-intro);line-height:var(--lh-intro)}
.prose-quote figcaption{grid-column:2;font-size:14px;color:#60635A;margin-top:18px}

/* ---- Contact details. Three short rows on the same hairlines the prose uses,
       so the address and the phone number read as part of the page rather than
       as footer leftovers. ---- */
.page-details{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:1px solid #D8D8D2;border-bottom:1px solid #D8D8D2;padding:clamp(24px,2.4vw,34px) 0;margin:0 0 clamp(34px,4vw,56px)}
.page-details div{display:flex;flex-direction:column;gap:9px}
.page-details dt,.page-details .page-details-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#60635A;margin:0}
.page-details dd{margin:0;font-size:clamp(16px,1.3vw,19px);line-height:1.45}
.page-details a{color:#111110;text-decoration:none;border-bottom:1px solid #11111040;padding-bottom:3px}
.page-details a:hover{border-color:#111110}
.page-details a:focus-visible{outline:2px solid #111110;outline-offset:3px;border-color:transparent}

/* ---- Enquiry. The homepage treatment, unchanged in substance: one full-width
       aqua band, white fields, a black submit, the Web3Forms endpoint, the
       honeypot, and the short-lived lead flag that lets the thanks page count
       exactly one conversion. The grid is the page grid again, heading in the
       left rail and the form in the right column. ---- */
.page-enquiry{background:#14B8C8;color:#111110;margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;padding:clamp(44px,5vw,80px) var(--gutter)}
.page-enquiry-inner{width:100%;max-width:1600px;margin-inline:auto;display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start}
.page-enquiry-head{margin:0}
.page-enquiry-head .eyebrow{display:block;color:#111110}
.page-enquiry-title{font:700 clamp(28px,3vw,46px)/1.06 Syne,Work,Arial,sans-serif;letter-spacing:-.05em;margin:14px 0 0;color:#111110;font-size:var(--t-h2);line-height:var(--lh-h2)}
.page-enquiry-head p{font-size:17px;line-height:1.55;max-width:34ch;margin:16px 0 0;color:#111110}
.page-enquiry-form{display:grid;gap:18px;max-width:640px;margin:0}
.page-enquiry-form label{display:block;font-size:var(--t-meta);line-height:1.4;color:#111110}
.page-enquiry-form .optional{color:#0C4C53}
.page-enquiry-form input,
.page-enquiry-form select,
.page-enquiry-form textarea{display:block;width:100%;margin-top:8px;padding:13px 14px;font:inherit;font-size:16px;background:#FFFFFF;color:#111110;border:1px solid #11111066;border-radius:var(--kee-soft-radius);color-scheme:light}
.page-enquiry-form textarea{min-height:128px;resize:vertical}
.page-enquiry-form textarea::placeholder{color:#62635A}
.page-enquiry-form :is(input,select,textarea):focus{border-color:#111110;outline:2px solid #111110;outline-offset:3px}
.page-enquiry-form .form-help,
.page-enquiry-form .form-status{font-size:14px;line-height:1.5;color:#111110;margin:0}
.page-enquiry-form .form-help a{color:#111110}
.page-enquiry-action{display:inline-flex;align-items:center;justify-content:center;gap:14px;justify-self:start;min-height:48px;padding:14px 22px;font:inherit;font-size:16px;background:#111110;color:#FFFFFF;border:0;border-radius:var(--kee-soft-radius);cursor:pointer}
.page-enquiry-action>span{display:inline-block;transition:transform 180ms ease}
.page-enquiry-action:hover:not(:disabled)>span{transform:translate(3px,-3px)}
.page-enquiry-action:disabled{opacity:.6;cursor:default}
.page-enquiry-action:focus-visible{outline:2px solid #111110;outline-offset:4px}

@media(max-width:760px){
  .header{min-height:88px;gap:16px}
  .header nav{gap:14px}
  .header nav a:nth-child(2){display:none}
  .header nav .header-contact{gap:10px;padding:10px 12px}
  .header-contact>span{font-size:18px}
  .legal-footer{margin-inline:0}
  .page-hero{padding-block:28px 44px}
  .page-hero-title{font-size:var(--t-display);margin:30px 0 34px}
  .page-hero-bottom{grid-template-columns:1fr;gap:22px}
  .page-hero-rail{order:2;font-size:12px}
  .page-hero-rail br{display:none}
  .page-hero-lead{font-size:var(--t-intro)}
  .page-link{margin-top:24px;font-size:15px}
  .thanks-next{padding-block:34px 44px}
  .thanks-next-title{font-size:var(--t-h2)}
  .thanks-list-item>a{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .thanks-list-title{font-size:var(--t-h3)}
  .thanks-closing{margin-top:28px}
  .prose-intro,
  .prose-section{grid-template-columns:1fr;gap:18px}
  .prose-section{padding:24px 0}
  .prose-lead,
  .prose-intro>.prose-body{grid-column:1}
  .prose-head{font-size:var(--t-h3)}
  .prose-num{margin-bottom:8px}
  .prose-body>p{font-size:var(--t-body)}
  .prose-short{font-size:var(--t-body);margin-bottom:18px;padding-bottom:16px}
  .page-close p.page-close-line{font-size:var(--t-h2)}
  .page-close p:not(.page-close-line){font-size:var(--t-body)}
  .prose-quote{grid-template-columns:1fr;gap:0;padding:24px 0}
  .prose-quote blockquote,
  .prose-quote figcaption{grid-column:1}
  .prose-quote blockquote{font-size:var(--t-intro)}
  .page-details{grid-template-columns:1fr;gap:20px;padding:22px 0}
  .page-enquiry{padding-block:34px 44px}
  .page-enquiry-inner{grid-template-columns:1fr;gap:26px}
  .page-enquiry-title{font-size:var(--t-h2)}
  .page-enquiry-head p{max-width:none}
}
@media(max-width:480px){
  .header nav{gap:11px;font-size:12px}
  .header nav .header-contact{gap:8px;padding:10px 11px}
  .header-contact>span{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .thanks-list-action b,
  .page-link>span,
  .page-enquiry-action>span,
  .footer-email>span,
  .header-contact>span{transition:none!important;transform:none!important}
}