/* ===========================================================
   The enquiry form card: the Contact page (body.ct-page) and the
   "Let's chat" popup on every other page (.contact-modal), which uses
   the same form, heading and styling in that page's own colour (see
   "Popup" below). Everything .ct-page/.ct-* only affects Contact.
   (The #contactForm rules below also style the Schedule page's booking
   form, #schedulerForm, which is the same card: see css/schedule.css.)
   Contact page:
   Cream page, pitch + direct details on the left, royal-blue enquiry
   card on the right (stacked on tablet/phone: pitch, card, direct line).
   Restyles the shared .contact-form markup that js/main.js drives
   (validation, Turnstile, success swap) without renaming anything.

   ONE SCREEN, NO PAGE SCROLL: every vertical size below is a token that
   scales with the small viewport height (svh), clamped, plus a few
   height-based media queries (hide the lede / card title, merge details
   into one line) so nav, pitch, Book link, form (incl. the 65px
   Turnstile), direct details and footer all fit inside 100svh from
   360x740 phones up to 1920x1080. Nothing locks scrolling: below the
   supported heights (e.g. phone landscape) the page simply scrolls.

   Motion: things snap into place; transform/opacity only; entrance
   offsets move up/left so they never create scrollable overflow;
   reduced motion shows final states.
   =========================================================== */

.ct-page{
  --ct-blue: #385C95;          /* the site's existing contact blue */
  --ct-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23385C95' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ct-field-ink: #24406E;     /* navy placeholder/label text on white fields */
  --ct-snap: cubic-bezier(.34,1.45,.64,1);
  --ct-ease: cubic-bezier(.2,.7,.2,1);

  /* Fit-to-screen tokens (desktop defaults; overridden per breakpoint) */
  --ct-top: clamp(5.75rem, 13svh, 7.75rem);        /* clears logo + pill nav (nav ends at 81px) */
  --ct-f-h: clamp(2.375rem, 5.4svh, 3.25rem);        /* input/select height */
  --ct-gap: clamp(0.375rem, 1.1svh, 0.75rem);         /* form row gap */
  --ct-ta-h: clamp(3.625rem, 8.6svh, 6rem);       /* textarea: >= 2 rows at 16px */
  --ct-ta-pad: clamp(0.5rem, 1.3svh, 0.875rem);
  --ct-submit-h: clamp(2.5rem, 5.8svh, 3.5rem);
  --ct-card-py: clamp(1rem, 3svh, 2.25rem);
  --ct-card-px: clamp(1.25rem, 2.8vw, 2.5rem);

  background: var(--paper-alt);
  color: var(--ink-70);
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
/* One screen on the site's page colour, its slim footer strip included */
.ct-page main{ flex: 1 0 auto; display: flex; flex-direction: column; }
.ct-page ::selection{ background:#7FCBFF; color: var(--ink); }

/* ---------- Layout (desktop: two columns, vertically centred) ---------- */
.ct-hero{
  max-width: 83.75rem; width: 100%; margin: auto;
  padding: var(--ct-top) var(--gutter) clamp(0.375rem, 1.6svh, 1.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "intro card" "direct card";
  column-gap: clamp(2.5rem, 6vw, 6.875rem);
}
.ct-intro{ grid-area: intro; align-self: center; display: flex; flex-direction: column; align-items: flex-start; }
.ct-card{ grid-area: card; align-self: center; width: 100%; max-width: 40rem; justify-self: end; }
.ct-direct{ grid-area: direct; }

/* ---------- Left column ---------- */
/* The same type as the other pages' heroes (Home, What We Do): a 13px
   eyebrow tracked .12em, the headline's weight, tracking and colour,
   a 20px lede in the softer ink and a standard 15px button. The sizes
   still scale with the screen's height too, so the page keeps fitting
   one screen. */
.ct-eyebrow{
  margin: 0 0 clamp(0.625rem, 2.2svh, 1.25rem);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ct-blue);
}
/* A square marks the label (as Home's eyebrow does) */
.ct-eyebrow::before{ content:""; display:inline-block; width:0.5625rem; height:0.5625rem; margin-right:0.625rem; border-radius:2px; background:#4C7FC9; vertical-align:0.06em; }
.ct-title{
  margin: 0;
  font-family: var(--font-head); font-weight: 600; color: #0F1D07;
  font-size: clamp(2.5rem, min(6vw, 10svh), 5.5rem); line-height: 1; letter-spacing: -.03em;
}
.ct-line{ display: block; }
.ct-lede{
  margin: clamp(0.75rem, 2.6svh, 1.5rem) 0 0; max-width: 28em;
  font-size: clamp(1rem, min(1.4vw, 2.4svh), 1.25rem); line-height: 1.5; font-weight: 400; color: var(--ink-70);
}
.ct-direct{ margin-top: clamp(0.875rem, 3svh, 1.875rem); }
.ct-direct-label{ margin: 0 0 0.25rem; font-size: 0.9375rem; color: var(--ink-70); }
.ct-direct-links{ margin: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.ct-dot{ display: none; color: var(--ink-45); }
.ct-direct-links a{
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25rem;
}
.ct-direct-links a:hover, .ct-direct-links a:focus-visible{ text-decoration-color: currentColor; }
/* Each address/number with its copy icon (js/main.js adds the wrapper) */
.ct-copy-row{ display: inline-flex; align-items: center; gap: 0.5rem; }
.ct-page .ct-copy-row .copy-btn{ width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; color: var(--ink-45); }
.ct-page .ct-copy-row .copy-btn .copy-btn-icon{ width: 1rem; height: 1rem; }
.ct-page .ct-copy-row .copy-btn:hover{ color: #3B5E96; }

/* ---------- Buttons ---------- */
/* Book a discovery call is the site's own outline button (.btn
   .btn-outline: ink border, fills ink on hover, the star snapping in),
   as on the other pages; only its spacing is set here. Submit and the
   success button sit on the blue card and keep their white pills. */
:is(.ct-page, .contact-modal) .ct-success-btn, :is(.ct-page, .contact-modal) .contact-submit{
  position: relative;
  transition: transform .45s var(--ct-snap);
}
/* Soft hover shadow. Submit's ::after is its star (style.css Button
   motion), so its shadow rides on the ::before fill layer instead. */
:is(.ct-page, .contact-modal) .ct-success-btn::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0.875rem 1.625rem rgba(17,18,26,.18);
  opacity: 0; transition: opacity .3s var(--ct-ease);
}
:is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit::before{ box-shadow: 0 0.875rem 1.625rem rgba(17,18,26,.18); }
:is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit{ --bm-star-c: var(--ct-blue); --bm-star-on: var(--ct-blue); }
:is(.ct-page, .contact-modal) .ct-success-btn:hover, :is(.ct-page, .contact-modal) .contact-submit:hover{ box-shadow: none; }
:is(.ct-page, .contact-modal) .ct-success-btn:hover::after{ opacity: 1; }
:is(.ct-page, .contact-modal) .ct-success-btn:active, :is(.ct-page, .contact-modal) .contact-submit:active{
  transform: scale(.97); transition-duration: .12s; box-shadow: none;
}
.ct-book{ margin-top: clamp(1rem, 3.4svh, 2rem); white-space: nowrap; }
.ct-success-btn:focus-visible{ outline: 0.1875rem solid var(--ct-blue); outline-offset: 0.1875rem; }

/* ---------- Form card ---------- */
.ct-card{
  background: var(--ct-blue); color: #fff;
  border-radius: 1.75rem; scroll-margin-top: 6rem;
  padding: var(--ct-card-py) var(--ct-card-px);
  display: flex; flex-direction: column; justify-content: center;
}
.ct-card-title{
  margin: 0 0 clamp(0px, .6svh, 0.375rem); text-align: center;
  font-family: var(--font-head); font-weight: 700; color: #fff;
  font-size: clamp(1.375rem, min(2.6vw, 4.4svh), 2.5rem); line-height: 1.1; letter-spacing: -.025em;
}
.ct-title-short{ display: none; }

:is(#contactForm, #schedulerForm){ gap: var(--ct-gap); }
:is(#contactForm, #schedulerForm) .form-row-split{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ct-gap) clamp(0.5rem, 1vw, 0.75rem); }
:is(#contactForm, #schedulerForm) .form-row{ gap: 0; min-width: 0; }
:is(#contactForm, #schedulerForm) .form-field input, :is(#contactForm, #schedulerForm) .form-field select, :is(#contactForm, #schedulerForm) .form-field textarea{ width: 100%; min-width: 0; }

/* Fields: white, rounded, no visible border at rest. The floating label
   stays put and fades/slides out on focus or once filled (opacity +
   transform only - the shared rule moves top/font-size). 16px text so
   iOS doesn't zoom on focus. */
:is(#contactForm, #schedulerForm) .form-field input,
:is(#contactForm, #schedulerForm) .form-field select{
  height: var(--ct-f-h); padding: 0 1rem; font-size: 1rem; color: var(--ink);
  background-color: #fff; border: 1.5px solid transparent; border-radius: 0.5rem;
  transition: none;
}
:is(#contactForm, #schedulerForm) .form-field select{
  padding-right: 2.625rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2324406E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
  background-size: 1rem 1rem; background-position: right 1rem center;
}
/* Fixed height (not rows) so it fits the screen; 2+ rows always visible
   and the user can still drag it taller. */
:is(#contactForm, #schedulerForm) .form-field textarea{
  display: block;
  height: var(--ct-ta-h); min-height: 3.625rem; padding: var(--ct-ta-pad) 1rem;
  font-size: 1rem; line-height: 1.3; color: var(--ink);
  background: #fff; border: 1.5px solid transparent; border-radius: 0.5rem; resize: vertical;
  transition: none;
}
:is(#contactForm, #schedulerForm) .form-field label{
  left: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 0.9375rem; font-weight: 500; color: var(--ct-field-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 3.25rem);
  transition: opacity .2s var(--ct-ease), transform .35s var(--ct-snap);
}
:is(#contactForm, #schedulerForm) .form-field:has(select) label{ max-width: calc(100% - 2.625rem); }
:is(#contactForm, #schedulerForm) .form-field:has(textarea) label{ top: calc(var(--ct-ta-pad) + 0.1875rem); transform: none; }
:is(#contactForm, #schedulerForm) .form-field:has(input:focus) label,
:is(#contactForm, #schedulerForm) .form-field:has(input:not(:placeholder-shown)) label,
:is(#contactForm, #schedulerForm) .form-field:has(select:focus) label,
:is(#contactForm, #schedulerForm) .form-field:has(select option:checked:not([value=""])) label{
  top: 50%; font-size: 0.9375rem; opacity: 0; transform: translate(0.625rem, -50%);
}
:is(#contactForm, #schedulerForm) .form-field:has(textarea:focus) label,
:is(#contactForm, #schedulerForm) .form-field:has(textarea:not(:placeholder-shown)) label{
  top: calc(var(--ct-ta-pad) + 0.1875rem); font-size: 0.9375rem; opacity: 0; transform: translateX(0.625rem);
}
:is(#contactForm, #schedulerForm) .form-field input:focus, :is(#contactForm, #schedulerForm) .form-field select:focus, :is(#contactForm, #schedulerForm) .form-field textarea:focus{
  outline: 0.1875rem solid rgba(255,255,255,.6); outline-offset: 2px; border-color: transparent;
}
/* Focus micro-interaction: a blue underline scales in from the left. */
:is(#contactForm, #schedulerForm) .form-field::after{
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.3125rem; height: 2px;
  border-radius: 2px; background: var(--ct-blue); pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--ct-snap);
}
:is(#contactForm, #schedulerForm) .form-field:focus-within::after{ transform: scaleX(1); }
/* After a submit attempt (or once a field has been touched), invalid
   required fields get a clear red edge. */
:is(#contactForm, #schedulerForm) .form-field input:user-invalid,
:is(#contactForm, #schedulerForm) .form-field textarea:user-invalid{ border-color: #D93025; }
:is(#contactForm, #schedulerForm) .form-field:has(:user-invalid)::after{ background: #D93025; }

/* Consent checkbox: white box, blue tick. */
:is(#contactForm, #schedulerForm) .form-checkbox{
  justify-content: flex-start; align-items: center; gap: 0.75rem; margin-top: 1px;
  font-size: 0.7813rem; line-height: 1.35; color: rgba(255,255,255,.92);
}
:is(#contactForm, #schedulerForm) .form-checkbox input{
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 0.3125rem; background: #fff; cursor: pointer;
  background-position: center; background-repeat: no-repeat; background-size: 0.875rem 0.875rem;
  transition: transform .3s var(--ct-snap);
}
:is(#contactForm, #schedulerForm) .form-checkbox input:checked{
  background-image: var(--ct-tick);
}
:is(#contactForm, #schedulerForm) .form-checkbox input:active{ transform: scale(.88); }
:is(#contactForm, #schedulerForm) .form-checkbox input:focus-visible{ outline: 0.1875rem solid rgba(255,255,255,.7); outline-offset: 2px; }

/* Server/network error from main.js (.form-error, role=alert). */
:is(#contactForm, #schedulerForm) .form-error{
  margin: 0; padding: 0.4375rem 0.75rem; border-radius: 0.5rem;
  background: #FDECEA; color: #8C1D18; font-size: 0.8438rem; line-height: 1.3; font-weight: 600;
}
:is(#contactForm, #schedulerForm) .form-error:not([hidden]){ animation: ctSnapIn .45s var(--ct-snap) both; }

/* Submit: full-width white pill, press feedback, "Sending…" state. */
:is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit{
  align-self: stretch; justify-content: center; width: 100%;
  margin-top: 2px; height: var(--ct-submit-h); padding: 0 1.5rem;
  background: #fff; color: var(--ink); font-size: clamp(0.9375rem, 2.2svh, 1.0625rem); font-weight: 600;
}
:is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit:hover{ background: #fff; color: var(--ink); transform: translateY(-2px); }
:is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit:active{ transform: scale(.97); }
:is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit:focus-visible{ outline: 0.1875rem solid rgba(255,255,255,.7); outline-offset: 0.1875rem; }
:is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit:disabled{ opacity: .72; cursor: progress; transform: none; }
:is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit:disabled::before{ opacity: 0; }

/* Turnstile mounts here on demand (main.js createTurnstile, managed
   widget, 300x65). Its full height is reserved up front so the card
   (and the one-screen fit) never changes when it loads. */
/* (its spacing above and below: style.css, --ts-space) */
:is(#contactForm, #schedulerForm){ --form-gap: var(--ct-gap); }
.ct-card{ --card-pad-b: var(--ct-card-py); }
:is(#contactForm, #schedulerForm) .cf-turnstile{
  align-self: center;
  min-width: 18.75rem; height: 4.0625rem; min-height: 4.0625rem;
  display: flex; justify-content: center;
}

/* Success (main.js unhides :is(#contactForm, #schedulerForm)Success and hides the form;
   contact.js holds the card at the form's height). */
:is(.ct-card, .contact-modal-shape) .contact-form-success:not([hidden]){
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.5rem; text-align: center; color: rgba(255,255,255,.88);
  animation: ctFade .35s var(--ct-ease) both, ctSettle .7s var(--ct-snap) both;
}
:is(.ct-card, .contact-modal-shape) .contact-form-success h2{
  margin: clamp(0.75rem, 2svh, 1.125rem) 0 clamp(0.375rem, 1.2svh, 0.625rem); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, min(2.6vw, 4.4svh), 2.5rem); letter-spacing: -.025em;
}
:is(.ct-card, .contact-modal-shape) .contact-form-success p{ margin: 0 0 clamp(1rem, 3svh, 1.625rem); max-width: 34ch; font-size: clamp(0.9375rem, 2.2svh, 1.0625rem); line-height: 1.5; }
:is(.ct-card, .contact-modal-shape) .contact-form-success h2:focus{ outline: none; }
.ct-success-mark{
  display: grid; place-items: center; width: clamp(3rem, 7svh, 4rem); height: clamp(3rem, 7svh, 4rem); border-radius: 1.125rem;
  background: #fff; color: var(--ct-blue);
  animation: ctMarkIn .6s var(--ct-snap) .12s both;
}
.ct-success-mark svg{ width: 50%; height: 50%; }
.ct-success-btn{ background: #fff; color: var(--ink); padding: clamp(0.6875rem, 1.8svh, 0.875rem) 1.625rem; font-size: 0.9375rem; font-weight: 600; gap: 0.5rem; }
:is(.ct-page, .contact-modal) .ct-success-btn:hover{ background: #fff; color: var(--ink); transform: translateY(-0.1875rem); }
.ct-success-btn:focus-visible{ outline-color: #fff; }

/* ---------- Footer ---------- */
/* The 404 page is laid out like Contact: one screen on the page colour,
   its content centred, with the same slim footer strip at the bottom */
.error-page{ background: var(--paper-alt); min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.error-page main{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; }
.error-page main > .cp-hero{ background: transparent; }
.ct-footer{ background: transparent; padding: clamp(0.375rem, 1.6svh, 1.5rem) var(--gutter) clamp(0.625rem, 2.6svh, 2rem); }
.ct-footer .footer-bottom{ max-width: calc(83.75rem - 2 * var(--gutter)); margin: 0 auto; padding: 0; font-size: 0.8125rem; color: var(--ink-45); }
.ct-footer .footer-bottom span a{ margin-left: 0.875rem; font-size: 0.8125rem; color: var(--ink-45); }
.ct-footer .footer-bottom span a:hover{ color: var(--ink); }
.ct-footer .footer-hire{ font-weight: 700; color: var(--ink); }
/* Footer email link: only shown where the direct-details line is
   hidden (very short screens), so the address stays one tap away. */
.ct-footer .ct-foot-mail{ display: none; margin-left: auto; font-weight: 700; color: var(--ink); }
.ct-footer .ct-foot-mail:hover{ color: var(--nav-hover-fg, var(--ink)); }

/* ---------- Load-in motion ---------- */
.ct-line{ animation: ctLineIn .5s var(--ct-snap) both; }
.ct-line-2{ animation-delay: .07s; }
.ct-eyebrow, .ct-lede, .ct-book, .ct-direct{ animation: ctFade .45s var(--ct-ease) .12s both; }
.ct-card{ animation: ctFade .3s var(--ct-ease) .1s both, ctCardIn .8s var(--ct-snap) .1s both; }

@keyframes ctFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes ctLineIn{ from{ opacity: 0; transform: translateY(.22em); } to{ opacity: 1; transform: none; } }
/* Settles in from up-left, so the offset/rotated start never pokes past
   the right or bottom edge (which would briefly add a scrollbar). */
@keyframes ctCardIn{ from{ transform: translate(-1rem, -1.375rem) rotate(-1.4deg); } to{ transform: none; } }
@keyframes ctSettle{ from{ transform: translateY(-0.875rem) rotate(-1deg); } to{ transform: none; } }
@keyframes ctMarkIn{ from{ opacity: 0; transform: scale(.5) rotate(-14deg); } to{ opacity: 1; transform: none; } }
@keyframes ctSnapIn{ from{ opacity: 0; transform: translateY(-0.375rem) scale(.98); } to{ opacity: 1; transform: none; } }

/* Narrower two-column desktops: the half-width select label steps down
   a size so "Company size (optional)" isn't truncated. */
@media (min-width: 901px) and (max-width: 1180px){
  :is(#contactForm, #schedulerForm) .form-field:has(#cfCompanySize) label{ font-size: 0.875rem; }
}

/* ---------- Short desktops: details on one line, lighter pitch ---------- */
@media (min-width: 901px) and (max-height: 700px){
  .ct-direct-label{ font-size: 0.9375rem; }
  .ct-direct-links{ flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.25rem; }
  .ct-direct-links a{ font-size: 1rem; }
  .ct-dot{ display: inline; }
}
@media (min-width: 901px) and (max-height: 600px){
  .ct-eyebrow{ display: none; }
  .ct-lede{ display: none; }
}

/* ---------- Tablet / phone: one column ---------- */
@media (max-width: 900px){
  .ct-page{
    --ct-top: 5.75rem;                              /* below logo; hamburger ends at 87px */
    --ct-f-h: clamp(2.25rem, 4.6svh, 3.125rem);
    --ct-gap: clamp(0.3125rem, .9svh, 0.75rem);
    --ct-ta-h: clamp(3.625rem, 7svh, 5.625rem);
    --ct-submit-h: clamp(2.5rem, 5svh, 3.375rem);
    --ct-card-py: clamp(0.75rem, 2.2svh, 1.875rem);
    --ct-card-px: clamp(0.875rem, 3.6vw, 2rem);
  }
  .ct-hero{
    flex: 1 0 auto; margin: 0 auto;
    display: flex; flex-direction: column;
    padding-bottom: 0;
  }
  .ct-intro, .ct-card{ align-self: stretch; }
  .ct-eyebrow{ display: none; }
  .ct-br{ display: none; }
  /* (a touch tighter than desktop: the one-screen fit was measured with it) */
  .ct-title{ font-size: clamp(1.625rem, min(9.4vw, 5.6svh), 4rem); line-height: 1.02; letter-spacing: -.035em; }
  .ct-lede{ margin-top: clamp(0.375rem, 1svh, 0.75rem); max-width: 34em; font-size: clamp(0.9375rem, min(4.2vw, 2.1svh), 1.125rem); line-height: 1.32; }
  .ct-book{
    margin-top: clamp(0.5rem, 1.4svh, 1.125rem);
    padding: clamp(0.375rem, .9svh, 0.625rem) 1.125rem; font-size: clamp(0.875rem, 1.8svh, 0.9375rem);
  }
  .ct-card{
    width: auto; max-width: none; justify-self: stretch;
    margin: clamp(0.625rem, 1.6svh, 1.375rem) -0.5rem 0; border-radius: 1.375rem;
  }
  .ct-card-title{ font-size: clamp(1.375rem, 3.4vw, 1.875rem); }
  /* A server error (main.js .form-error) needs a line: the rows
     tighten slightly while it shows. */
  :is(#contactForm, #schedulerForm):has(.form-error:not([hidden])){ gap: max(0.25rem, calc(var(--ct-gap) - 2px)); }
  /* Direct details: one line, pushed down next to the footer. */
  .ct-direct{
    margin-top: auto; padding-top: clamp(0.5rem, 1.4svh, 1.125rem);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0.75rem;
  }
  .ct-direct-label{ margin: 0; font-size: 0.9375rem; }
  .ct-direct-links{ flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.25rem; }
  .ct-direct-links a{ font-size: 1rem; }
  .ct-dot{ display: inline; }
  .ct-footer{ padding-top: clamp(0.25rem, 1svh, 0.875rem); padding-bottom: clamp(0.5rem, 1.6svh, 1.375rem); }
  .ct-footer .footer-bottom{ flex-wrap: nowrap; }
  .ct-footer .footer-bottom span a{ margin-left: 0.625rem; }
}
/* Shorter tablets/phones: the pitch is headline + Book link only. */
@media (max-width: 900px) and (max-height: 799px){
  .ct-lede{ display: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 560px){
  .ct-page{
    --ct-f-h: clamp(2.25rem, 4.7svh, 2.875rem);
    --ct-gap: clamp(0.3125rem, .75svh, 0.5rem);
    --ct-ta-h: clamp(3.625rem, 7.4svh, 5rem);
    --ct-ta-pad: 0.5rem;
    --ct-submit-h: clamp(2.5rem, 5svh, 2.875rem);
    --ct-card-py: clamp(0.75rem, 1.7svh, 1.125rem);
    --ct-card-px: 0.875rem;
  }
  .ct-title{ font-size: clamp(1.625rem, min(8.4vw, 4.2svh), 2.5rem); }
  .ct-lede{ margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.3; }
  .ct-book{ margin-top: clamp(0.375rem, 1svh, 0.625rem); line-height: 1.2; }
  .ct-card{ margin-top: clamp(0.5rem, 1.3svh, 0.875rem); }
  .ct-direct{ padding-top: clamp(0.4375rem, 1.1svh, 0.75rem); line-height: 1.25; }
  .ct-footer{ padding-top: clamp(0.25rem, .8svh, 0.625rem); padding-bottom: clamp(0.5rem, 1.4svh, 1rem); }
  .ct-footer .footer-bottom{ line-height: 1.3; }
  .ct-title-long{ display: none; }
  .ct-title-short{ display: inline; }
  .ct-card-title{ font-size: clamp(1.25rem, 3svh, 1.625rem); margin-bottom: 0; }
  .ct-card{ border-radius: 1.25rem; }
  :is(#contactForm, #schedulerForm) .form-field input, :is(#contactForm, #schedulerForm) .form-field select{ padding: 0 0.75rem; }
  :is(#contactForm, #schedulerForm) .form-field select{ padding-right: 1.875rem; background-position: right 0.625rem center; background-size: 0.875rem 0.875rem; }
  :is(#contactForm, #schedulerForm) .form-field textarea{ padding: var(--ct-ta-pad) 0.75rem; }
  :is(#contactForm, #schedulerForm) .form-field label{ left: 0.75rem; font-size: 0.875rem; max-width: calc(100% - 2.25rem); }
  :is(#contactForm, #schedulerForm) .form-field:has(input:focus) label,
  :is(#contactForm, #schedulerForm) .form-field:has(input:not(:placeholder-shown)) label,
  :is(#contactForm, #schedulerForm) .form-field:has(select:focus) label,
  :is(#contactForm, #schedulerForm) .form-field:has(select option:checked:not([value=""])) label,
  :is(#contactForm, #schedulerForm) .form-field:has(textarea:focus) label,
  :is(#contactForm, #schedulerForm) .form-field:has(textarea:not(:placeholder-shown)) label{ font-size: 0.875rem; }
  :is(#contactForm, #schedulerForm) .form-field::after{ left: 0.5rem; right: 0.5rem; bottom: 0.25rem; }
  :is(#contactForm, #schedulerForm) .form-checkbox{ font-size: 0.7188rem; line-height: 1.3; gap: 0.625rem; }
  :is(#contactForm, #schedulerForm) .form-checkbox input{ width: 1.125rem; height: 1.125rem; }
  :is(#contactForm, #schedulerForm) .form-error{ padding: 0.375rem 0.625rem; font-size: 0.7813rem; }
  :is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit{ font-size: 1rem; }
  /* Direct details on one line; the "Or contact us directly" label is
     kept for screen readers only. */
  .ct-direct-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ct-direct-links a{ font-size: 0.9375rem; }
  /* With their copy icons the email and number only share one line if
     the icons are a size smaller and the dot between them goes */
  .ct-direct-links{ gap: 0 0.875rem; }
  .ct-dot{ display: none; }
  .ct-copy-row{ gap: 0.25rem; }
  .ct-page .ct-copy-row .copy-btn{ width: 1.5rem; height: 1.5rem; border-radius: 0.4375rem; }
  .ct-page .ct-copy-row .copy-btn .copy-btn-icon{ width: 0.875rem; height: 0.875rem; }
  .ct-footer .footer-bottom{ font-size: 0.8125rem; }
  .ct-footer .footer-bottom span a{ font-size: 0.75rem; }
}
/* Very short phones (e.g. 375x667): the card's own heading goes
   (still names the form for assistive tech via aria-labelledby). */
@media (max-width: 560px) and (max-height: 699px){
  .ct-page{ --ct-top: 5.375rem; --ct-gap: 0.3125rem; }   /* headline sits left of the hamburger, clear of it */
  .ct-page .ct-card-title{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ct-title{ font-size: 1.625rem; }
  .ct-book{ padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
  /* A server error needs its line: the Book link steps aside meanwhile. */
  .ct-page:has(:is(#contactForm, #schedulerForm) .form-error:not([hidden])) .ct-book{ display: none; }
}
@media (max-width: 560px) and (max-height: 660px){
  .ct-page{ --ct-f-h: 2.125rem; --ct-ta-h: 3.5rem; }
}
/* In-browser short screens (toolbars showing, e.g. iPhone SE Safari
   375x548): the direct line goes (email moves into the footer), the
   headline runs on one line and the form packs tighter. */
@media (max-width: 900px) and (max-height: 620px){
  .ct-direct{ display: none; }
  .ct-card{ margin-bottom: clamp(0.25rem, 1svh, 0.625rem); }
  .ct-footer .footer-bottom{ gap: 0.875rem; }
  .ct-footer .ct-foot-mail{ display: inline; }
}
@media (max-width: 560px) and (max-height: 620px){
  /* 90px: the one-line headline reaches under the hamburger's x-range, so it starts below it. */
  .ct-page{ --ct-top: 5.625rem; --ct-f-h: 2rem; --ct-gap: 0.25rem; --ct-card-py: 0.625rem; --ct-submit-h: 2.375rem; --ct-ta-h: 3.25rem; --ct-ta-pad: 0.375rem; }
  .ct-title{ font-size: min(5.5vw, 1.5rem); letter-spacing: -.03em; }
  .ct-line{ display: inline; }
  .ct-book{ margin-top: 0.375rem; padding: 0.1875rem 0.875rem; font-size: 0.8125rem; }
  .ct-card{ margin-top: 0.375rem; }
  :is(#contactForm, #schedulerForm) .form-field textarea{ line-height: 1.25; min-height: 3.25rem; }
  :is(#contactForm, #schedulerForm) .form-checkbox{ font-size: 0.6875rem; }
  .ct-footer{ padding-top: 2px; padding-bottom: 0.4375rem; }
  .ct-footer .footer-bottom span a{ margin-left: 0.5rem; }
  .ct-footer .ct-foot-mail{ font-size: 0.8125rem; }
}
/* Narrow phones: the half-width select label needs a smaller size to
   clear its chevron (mirrors the mockup). */
@media (max-width: 420px){
  :is(#contactForm, #schedulerForm) .form-field:has(#cfCompanySize) label{ left: 0.625rem; font-size: 0.6563rem; max-width: calc(100% - 1.625rem); }
  :is(#contactForm, #schedulerForm) .form-field #cfCompanySize{ padding: 0 1.375rem 0 0.625rem; background-position: right 0.4375rem center; background-size: 0.75rem 0.75rem; }
}

/* ---------- Reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce){
  .ct-line, .ct-eyebrow, .ct-lede, .ct-book, .ct-direct, .ct-card,
  :is(.ct-card, .contact-modal-shape) .contact-form-success:not([hidden]), .ct-success-mark,
  :is(#contactForm, #schedulerForm) .form-error:not([hidden]){ animation: none; opacity: 1; transform: none; }
  :is(.ct-page, .contact-modal) .ct-success-btn, :is(.ct-page, .contact-modal) .contact-submit,
  :is(#contactForm, #schedulerForm) .form-checkbox input, :is(#contactForm, #schedulerForm) .form-field::after{ transition: none; }
  :is(#contactForm, #schedulerForm) .form-field label{ transition: opacity .15s linear; }
  :is(#contactForm, #schedulerForm) .form-field:has(input:focus) label,
  :is(#contactForm, #schedulerForm) .form-field:has(input:not(:placeholder-shown)) label,
  :is(#contactForm, #schedulerForm) .form-field:has(select:focus) label,
  :is(#contactForm, #schedulerForm) .form-field:has(select option:checked:not([value=""])) label{ transform: translateY(-50%); }
  :is(#contactForm, #schedulerForm) .form-field:has(textarea:focus) label,
  :is(#contactForm, #schedulerForm) .form-field:has(textarea:not(:placeholder-shown)) label{ transform: none; }
  :is(.ct-page, .contact-modal) .ct-success-btn:hover, :is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit:hover,
  :is(.ct-page, .contact-modal) .ct-success-btn:active, :is(.ct-page, .contact-modal) :is(#contactForm, #schedulerForm) .contact-submit:active{ transform: none; }
}

/* ---------- Round 5: small-screen polish (fit re-measured at every size) ---------- */
/* Submit is the page's primary control: a full 44px everywhere. */
@media (max-width: 560px){
  .ct-page{ --ct-submit-h: clamp(2.75rem, 5svh, 3rem); }
}
@media (max-width: 560px) and (max-height: 620px){
  .ct-page{ --ct-submit-h: 2.75rem; }
}
/* Taller phones have the room: 44px fields too. */
@media (max-width: 900px) and (min-height: 800px){
  .ct-page{ --ct-f-h: clamp(2.75rem, 4.8svh, 3.125rem); }
  /* A server error needs its line: fields drop back to the fitted size meanwhile. */
  .ct-page:has(:is(#contactForm, #schedulerForm) .form-error:not([hidden])){ --ct-f-h: clamp(2.25rem, 4.6svh, 2.875rem); --ct-ta-h: clamp(3.5rem, 6svh, 5rem); }
}
/* Narrow phones: the email and number (with their copy icons) stay on
   one line at 14px */
@media (max-width: 400px){
  .ct-direct-links a{ font-size: 0.875rem; }
  .ct-direct-links{ gap: 0 0.625rem; }
}
/* Narrow phones: the half-width select keeps a readable 14px label; its
   "(optional)" stays for screen readers only (it had shrunk to 10.5px). */
@media (max-width: 420px){
  :is(#contactForm, #schedulerForm) .form-field:has(#cfCompanySize) label{ font-size: 0.875rem; }
  :is(#contactForm, #schedulerForm) .form-field:has(#cfCompanySize) label span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
/* 320px: the 300px Turnstile widget was wider than the card's inside and
   spilled over both edges. It scales to the card (visual only; the frame
   keeps its own 300x65 box, so the reserved space is unchanged). */
@media (max-width: 359px){
  :is(#contactForm, #schedulerForm) .cf-turnstile{ min-width:0; width:100%; }
  :is(#contactForm, #schedulerForm) .cf-turnstile > *{ flex:none; transform: scale(.88); transform-origin: 50% 50%; }
}

/* ---------- Popup ("Let's chat" on every other page) ----------
   The same card as Contact's (heading, white fields, white Submit,
   tick box, success state), in the site's contact blue on every page.
   It's one card centred on the screen, sized like the Contact page's
   (heights scale with the screen) so the whole form fits without
   scrolling; only a screen too short for it (e.g. a phone on its side)
   scrolls. */
.contact-modal{
  --ct-blue: #385C95; --ct-field-ink: #24406E; --ct-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23385C95' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ct-snap: cubic-bezier(.34,1.45,.64,1);
  --ct-ease: cubic-bezier(.2,.7,.2,1);
  --ct-f-h: clamp(2.375rem, 5.2svh, 3.125rem);
  --ct-gap: clamp(0.375rem, 1.1svh, 0.75rem);
  --ct-ta-h: clamp(3.5rem, 8.2svh, 5.75rem);
  --ct-ta-pad: clamp(0.5rem, 1.3svh, 0.875rem);
  --ct-submit-h: clamp(2.625rem, 5.6svh, 3.375rem);
  --ct-card-py: clamp(1.125rem, 3.4svh, 2.5rem);
  --ct-card-px: clamp(1.25rem, 3.4vw, 3rem);
}
/* Centred on the screen, no scroll-driven growth */
.contact-modal .contact-modal-panel{ display:flex; padding: 1rem var(--gutter); }
.contact-modal .contact-modal-shape{
  margin: auto; width: 100%; max-width: 45rem; border-radius: 1.75rem;
  padding: var(--ct-card-py) var(--ct-card-px); --card-pad-b: var(--ct-card-py);
}
.contact-modal .contact-modal-body .contact-form{ max-width: none; }
.contact-modal .contact-modal-shape{ background: var(--ct-blue); color: #fff; }
.contact-modal .ct-card-title{ max-width: none; margin: 0 3rem clamp(2px, .8svh, 0.5rem); font-size: clamp(1.5rem, min(3vw, 4.4svh), 2.5rem); }
.contact-modal .contact-modal-close{ background: rgba(255,255,255,.16); color: #fff; }
.contact-modal .contact-modal-close:hover{ background: #fff; color: var(--ct-blue); }
.contact-modal .contact-modal-close:focus-visible{ outline: 0.1875rem solid rgba(255,255,255,.7); outline-offset: 2px; }
.contact-modal .contact-form-success:not([hidden]){ min-height: 22.5rem; }
/* The marketing opt-in, centred under the fields (as on the Schedule form) */
.contact-modal #contactForm .form-checkbox{ justify-content: center; text-align: left; }
.contact-modal .contact-modal-close{ top: 0.875rem; right: 0.875rem; }
@media (max-width: 560px){
  .contact-modal{
    --ct-f-h: clamp(2.25rem, 5svh, 2.875rem); --ct-gap: clamp(0.3125rem, .9svh, 0.5625rem); --ct-ta-h: clamp(3.25rem, 8svh, 5.25rem);
    --ct-ta-pad: 0.5rem; --ct-submit-h: 2.75rem; --ct-card-py: clamp(0.875rem, 2.2svh, 1.375rem); --ct-card-px: 0.875rem;
  }
  .contact-modal .contact-modal-panel{ padding: 0.75rem; }
  .contact-modal .contact-modal-shape{ border-radius: 1.375rem; padding-top: 1rem; }
  .contact-modal .ct-card-title{ font-size: clamp(1.25rem, 3svh, 1.5rem); text-align: left; margin: 0.25rem 3.25rem 0.25rem 2px; }
  .contact-modal .contact-modal-close{ top: 0.625rem; right: 0.625rem; width: 2.5rem; height: 2.5rem; }
  .contact-modal .contact-form-success:not([hidden]){ min-height: 18.75rem; }
}
/* Short phones: tighter still, so it stays one screen */
@media (max-width: 560px) and (max-height: 640px){
  .contact-modal{ --ct-f-h: 2.125rem; --ct-gap: 0.3125rem; --ct-ta-h: 3.125rem; --ct-ta-pad: 0.375rem; --ct-submit-h: 2.625rem; --ct-card-py: 0.625rem; }
  .contact-modal :is(#contactForm, #schedulerForm) .form-checkbox{ font-size: 0.6875rem; }
}
/* 320px: the Turnstile widget scales down a little further to fit the popup */
@media (max-width: 359px){
  .contact-modal .contact-modal-panel{ padding: 0.625rem; }
  .contact-modal .contact-modal-shape{ padding-left: 0.75rem; padding-right: 0.75rem; }
  .contact-modal :is(#contactForm, #schedulerForm) .cf-turnstile > *{ transform: scale(.86); }
}