/* ============================================================
   Kee type scale
   21 September 2026
   Deployed from git since 22 September 2026.
   Loaded last on every page. Seven tiers, one job each.
   Change a value here and it changes everywhere, at every width.
   ============================================================ */

:root{
  /* --- the seven tiers --- */
  --t-display: clamp(40px, 5.6vw, 72px);   /* page and hero titles */
  --t-h2:      clamp(28px, 3.1vw, 38px);   /* section heads */
  --t-h3:      clamp(21px, 2.1vw, 26px);   /* sub-heads, card titles */
  --t-intro:   clamp(20px, 1.85vw, 24px);   /* one opening paragraph per page */
  --t-body:    clamp(18px, 1.5vw, 20px);  /* everything else you read */
  --t-meta:    14px;                        /* captions, labels, footer */
  --t-eyebrow: 12px;                        /* small uppercase tags */

  /* --- matching line heights --- */
  --lh-display: 1.04;
  --lh-h2:      1.14;
  --lh-h3:      1.25;
  --lh-intro:   1.5;
  --lh-body:    1.62;
}

/* ============================================================
   1. SECONDARY PAGES
   about, contact, privacy, terms, thanks.
   These carry the full scale.
   ============================================================ */

.page-hero-title{
  font-size: var(--t-display);
  line-height: var(--lh-display);
}

.page-hero-lead{
  font-size: var(--t-intro);
  line-height: var(--lh-intro);
}

.page-enquiry-title,
.thanks-next-title,
.page-close p.page-close-line{
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
}

.prose-head,
.thanks-list-title{
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
}

.prose-lead,
.prose-quote blockquote{
  font-size: var(--t-intro);
  line-height: var(--lh-intro);
}

.prose-body > p,
.prose-short,
.page-enquiry-copy p,
.page-close p:not(.page-close-line){
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.page-hero-meta,
.prose-section > .prose-label,
.prose-aside{
  font-size: var(--t-meta);
}

/* ============================================================
   2. FORM TYPE
   Same on every page, so a form never looks like a different
   size of form depending on where you met it.
   ============================================================ */

.enquiry-form label,
.enquiry-form .field-label,
.home-enquiry-form label,
.page-enquiry label{
  font-size: var(--t-meta);
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea,
.page-enquiry input,
.page-enquiry select,
.page-enquiry textarea,
.home-enquiry-form input,
.home-enquiry-form select,
.home-enquiry-form textarea{
  font-size: 16px;   /* 16 exactly: anything smaller makes iOS zoom the page on focus */
}

.form-help,
.form-status{
  font-size: var(--t-meta);
}

/* ============================================================
   3. SUBMIT AND HEADER BUTTONS
   One submit button shape sitewide. Previously 182x51 on the
   secondary pages against 488x59 on the homepage.
   ============================================================ */

.page-enquiry-action,
.enquiry-action,
.home-enquiry-form .enquiry-action{
  width: 100%;
  max-width: 520px;
  min-height: 64px;
  padding: 18px 24px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header-contact{
  font-size: var(--t-meta);
  min-height: 44px;
  padding-inline: 18px;
  display: inline-flex;
  align-items: center;
}

.header-contact > span{
  font-size: 18px;
}

/* ============================================================
   4. HOMEPAGE AND EMAIL OFFER
   Targeted only. The large editorial display type on these two
   pages is deliberate art direction and is left alone.
   ============================================================ */

/* The heading was smaller than the section head beneath it on a
   phone: h1 34px against an h2 at 38px. Raise the floor only;
   the desktop size is untouched. */
.home-hero h1{
  font-size: clamp(46px, 8.2vw, 60px);
}

@media (min-width: 900px){
  .home-hero h1{ font-size: clamp(54px, 7.8vw, 128px); }
}

/* Reading copy comes up to the body tier. Display type does not. */
.service-description,
.studio-copy p,
.summary-grid p,
.service-family-card p,
.offer-assurances li,
.offer-package li,
.hero-note{
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

/* ============================================================
   5. NEVER SMALLER THAN THIS
   The audit found running text at 15px and 13px in places.
   Nothing a visitor has to read sits below the meta tier.
   ============================================================ */

.legal-footer nav a,
.legal-footer .company-details p,
.legal-footer address{
  font-size: 13px;   /* legal small print, deliberately the exception */
}

.eyebrow{
  font-size: var(--t-eyebrow);
}

/* Highlights on the prose pages. Lime only. */
.page-prose mark,
.page-hero-title mark{ background:#CBE65A; color:#111110; padding:0 .08em .04em; }
/* Aqua highlight withdrawn 21 Sep. Lime only on the prose pages. */

/* ============================================================
   6. PAGE WIDTH CAP
   Past about 1600px the type has stopped growing but the layout
   keeps spreading, so columns drift and the margins swell. Cap
   the page and centre it; a wide monitor then sees the site as a
   1600px screen does.
   ============================================================ */

html{ background:#F7F6F0; }

body{
  max-width: 1600px;
  margin-inline: auto;
}

/* Full-bleed bands were measured against the viewport. Inside a
   capped body they measure against the page instead. */
.page-enquiry,
.enquiry{
  margin-inline: 0;
  width: 100%;
  max-width: 100%;
}

/* ============================================================
   7. PAGE TITLE CEILING
   Settled at 72px on 22 September, judged on the live page at
   full size rather than on proportion in the abstract. 84px was
   tried and was not needed; the width cap does that work instead.
   ============================================================ */

:root{
  --t-display: clamp(40px, 5.6vw, 72px);
}

/* ============================================================
   8. LINE SPACING, STATED
   Leading is part of the tier, not an afterthought. Running copy
   sits at 1.62, which clears the 1.5 that WCAG 1.4.12 expects
   text to tolerate, and gives the eye a clean return on a long
   line. Larger type needs proportionally less, so the intro and
   heading tiers tighten as they grow.
   ============================================================ */

/* The offer card paragraph was 18px on a 45px heading and read
   small against it. It is the lead for that block, so it takes
   the intro tier and the intro's leading. */
.offer-copy > p{
  font-size: var(--t-intro);
  line-height: var(--lh-intro);
}

/* Reading copy that had dropped below the meta tier. */
.offer-timing{
  font-size: var(--t-meta);
  line-height: 1.55;
}

/* Nothing a visitor reads at length sits tighter than 1.5. */
.prose-body > p,
.prose-short,
.service-description,
.studio-copy p,
.service-family-card p,
.offer-assurances li,
.offer-package li{
  line-height: var(--lh-body);
}

/* ============================================================
   9. DRAG TO BROWSE
   The service family track can be dragged as well as stepped with
   the arrows. Snapping is suspended mid-drag so the cards follow
   the hand, and text selection is held off so a drag does not
   highlight copy.
   ============================================================ */

.service-family-track{
  cursor: grab;
}

.service-family-track.is-dragging{
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

@media (hover: none){
  .service-family-track{ cursor: auto; }
}

/* ============================================================
   10. SERVICES CLOSING BAR
   The paragraph above this link was removed in the copy pass, so
   the bar now carries one link. Tighten the space around it
   rather than adding words to fill it.
   ============================================================ */

.service-next{
  margin-top: 18px;
}

.service-families{
  padding-bottom: 40px;
}

/* ============================================================
   11. HOMEPAGE SMALL TYPE AND CONTROLS
   22 September. The scale had only reached the homepage through
   a handful of selectors. These are the pieces a visitor has to
   read or press, brought up to a size that matches the rest.
   The 8 to 10px type inside the phone mockup is artwork and is
   deliberately left alone.
   ============================================================ */

/* Buttons and links people press. One size, 16px. */
body .offer-button,
body .service-family-card a,
body .text-link,
body .legal-footer .footer-email,
body .service-shared-action{
  font-size: 16px;
}

body .header-contact{
  font-size: 15px;
}

/* Small print that is still read, not decoration. */
body .form-help,
body .form-status,
.home-enquiry-form .form-help,
.home-enquiry-form .form-status,
body .offer-timing,
body .studio-label,
body .cookie-banner__text,
body .cookie-banner__btn{
  font-size: 14px;
}

body .offer-footnote,
body .legal-footer nav a,
body .legal-footer .company-details p,
body .legal-footer address{
  font-size: 13px;
}

/* ------------------------------------------------------------
   Service card labels. The label was a block, so a second line
   ran back under the number badge and read as a broken line.
   Number and label are now two columns, and the label wraps
   inside its own column.
   ------------------------------------------------------------ */

body .service-family-card > span{
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  line-height: 1.45;
  min-height: 0;
  max-width: none;
}

body .service-family-number{
  flex: none;
  margin-right: 0;
}

/* ============================================================
   12. LABEL AND CONTROL TIER, RAISED
   22 September, second pass. Everything small on the homepage
   was small for the same reason: the eyebrow and meta tiers were
   set for a denser page than this one turned out to be. Raised
   once here rather than element by element.
   ============================================================ */

:root{
  --t-meta:    15px;
  --t-eyebrow: 14px;
}

body .eyebrow{
  font-size: var(--t-eyebrow);
  letter-spacing: .09em;
}

/* Links and buttons people press. */
body .offer-button,
body .service-family-card a,
body .text-link,
body .legal-footer .footer-email,
body .service-shared-action,
body .studio-copy > a{
  font-size: 17px;
}

body .header-contact,
body .header nav a,
body .studio-label{
  font-size: 16px;
}

/* The service strip. It was 19px against 20px body copy, which
   made a row of service names read as small print. */
body .service-overview .ticker-group > a,
body .ticker-group > a{
  font-size: 23px;
}

/* Footer. Legal small print is still small, but readable, and
   the mark is no longer the smallest thing on the page. */
body .legal-footer p,
body .legal-footer p a,
body .legal-footer nav a,
body .legal-footer .company-details p,
body .legal-footer address,
body .offer-footnote{
  font-size: 14px;
}

body .legal-footer img{
  width: 96px;
  height: auto;
}

/* Form furniture. */
body .home-enquiry-form label,
body .page-enquiry label,
body .enquiry-form label,
body .form-help,
body .form-status,
body .home-enquiry-form .form-help,
body .home-enquiry-form .form-status,
body .offer-timing,
body .cookie-banner__text,
body .cookie-banner__btn{
  font-size: 15px;
}

/* ============================================================
   13. ONE LEFT EDGE
   Measured at 1600: every section started its text at the page
   gutter except the aqua enquiry band and the dark close, which
   sat 60px further in because their colour block is inset and
   then padded again. Two near-but-different left edges is what
   reads as sloppy. These two bands now run full width and take
   the gutter as their padding, which is how the same bands
   already work on the secondary pages.
   ============================================================ */

.home-enquiry,
.auto-home-close{
  margin-inline: 0;
  width: 100%;
  max-width: 100%;
  padding-inline: var(--gutter);
}

.studio.home-enquiry,
.studio.auto-home-close{
  margin-left: 0;
  margin-right: 0;
}