/* Styles for /contact.html only — loaded on no other page. The header and
   footer are the landing page's own real markup + layout.css/components.css
   rules (no contact-page approximation of either), so nothing for them
   lives here. Everything below is the guided-flow-specific surface only:
   layout, answer cards, the location/contact fields, review and the final
   continuation screen. .form-row is the one small exception — it's defined
   in layout.css alongside dozens of landing-page-only rules this page has
   no other reason to load twice as much of, so its handful of lines are
   reproduced here instead. */

/* MAIN FLOW LAYOUT — plain, calm document flow, not a viewport-filling app
   shell: content determines height, the footer follows immediately after
   it exactly like every other page on this site, no flex/min-height
   trickery forcing a fixed presence. flex:1 on <main> (with body as a
   column flex) is the one exception, kept only so a short question screen
   still leaves the footer sitting at a sensible distance rather than
   crowding straight up against it — "do not force every screen to fill the
   entire viewport… but maintain a calm minimum height". */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.contact-flow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* :not([hidden]) — this element (#contact-flow-shell) is what
   contact-flow.js hides on a successful "Send enquiry"; an unconditional
   `display: flex` here would keep it visible regardless of the attribute,
   since an author rule always overrides [hidden]'s own UA-default
   `display: none`. Confirmed the hard way in an earlier pass. */
.contact-flow__container:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 50vh;
  /* ~1180px per brief — .container (edge-inset padding) still applies via
     the shared class on this same element. */
  max-width: 73.75rem;
  margin-inline: auto;
  width: 100%;
  /* Large, clear space between the header and the first question. */
  padding-top: clamp(120px, 12vh, 180px);
  padding-bottom: var(--cb-space-8);
}

/* Question content itself caps narrower than the outer container (900-
   960px per brief) — .contact-flow__container's own 1180px is the OUTER
   bound; the heading/supporting copy/fields/answer group all read better
   at a tighter measure, so they get their own, narrower cap. .contact-flow
   __options used to be deliberately excluded from this list (its old
   two-column card grid genuinely needed the full outer width) — the
   compact, intrinsically-sized answer pills below no longer do, and
   including it here is what keeps the group's own left edge aligned with
   the question text above it. */
.contact-flow__heading,
.contact-flow__supporting,
.contact-flow__fields,
.contact-flow__options,
.contact-flow__review-list,
#contact-flow-controls {
  max-width: 60rem;
  margin-inline: auto;
  width: 100%;
}

.contact-flow__heading {
  margin: 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-page-heading-size);
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  /* Focused programmatically on every screen change (contact-flow.js) — no
     visible ring for that specific move (focus is expected here, not a
     result of Tab); keyboard users tabbing normally still get the sitewide
     outline via :focus-visible elsewhere, unaffected by this. */
  outline: none;
}

.contact-flow__supporting {
  /* ~48px between the question and supporting copy. */
  margin-top: 48px;
  color: var(--cb-color-text-secondary);
}

/* ANSWER CONTROLS — compact, content-width pills that wrap naturally,
   replacing the old fixed two-column oversized-card grid. Intrinsic sizing
   (flex: 0 1 auto, width: auto) instead of a grid so each option is only
   ever as wide as its own label needs — brief: "do not force all options
   in one question to equal width... do not manually assign bespoke widths
   to each individual label". Mobile-first: full-width stacked pills below
   the tablet breakpoint (brief: "calm, predictable layout... avoid tiny
   side-by-side pills"), wrapping intrinsic widths from it up. */
.contact-flow__options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  /* ~64px between supporting copy and the answer group (72px when there's
     no supporting copy, since the heading itself sits closer to it). */
  margin-top: 64px;
}

.contact-flow__heading + .contact-flow__options {
  margin-top: 72px;
}

@media (min-width: 50.0625rem) {
  .contact-flow__options {
    gap: 14px;
  }
}

.contact-flow__option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 54px;
  text-align: left;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 17px;
  line-height: 1.4;
  color: var(--cb-color-ink);
  /* Featured-project card's own right-side surface colour, reused exactly
     (same color-mix expression as .feature-panel__visual and the
     capability circles' default state) — not a new, approximate hex. */
  background: color-mix(in srgb, var(--cb-color-ink) 8%, var(--cb-color-paper));
  border: 1px solid var(--cb-color-line);
  /* Global design-consistency pass: was a stepped 28px/29px pair tuned per
     breakpoint to approximate a full pill at that breakpoint's own
     min-height — the fully-rounded token clamps to true pill shape at any
     height, so one value now covers both tiers with no visible change. */
  border-radius: var(--cb-radius-pill);
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color 200ms var(--cb-ease-standard), border-color 200ms var(--cb-ease-standard),
    color 200ms var(--cb-ease-standard);
}

@media (min-width: 50.0625rem) {
  .contact-flow__option {
    width: auto;
    min-height: 58px;
    padding: 14px 32px;
  }
}

.contact-flow__option:not(.is-selected):hover {
  border-color: color-mix(in srgb, var(--cb-color-paper) 68%, var(--cb-color-ink) 32%);
  background: color-mix(in srgb, var(--cb-color-ink) 12%, var(--cb-color-paper));
}

.contact-flow__option.is-selected {
  background: var(--cb-color-ink);
  border-color: var(--cb-color-ink);
  color: var(--cb-color-paper);
}

/* Keyboard focus — the sitewide button:focus-visible rule (base.css)
   already applies here (a plain 2px Ink outline, 3px offset) since this is
   a real <button>; that outline exists independently of the selected/hover
   background changes above, so nothing extra needs overriding. No
   underline, no layout movement — the outline doesn't affect box size. */

@media (prefers-reduced-motion: reduce) {
  .contact-flow__option {
    transition: none;
  }
}

/* CHOICE-STEP SPACING — single/multi-select questionnaire screens (Industry,
   Business stage, Objectives, Challenges, Desired outcomes, Type of
   support, Timing and any other single/multi-select step) get their own
   tighter vertical rhythm via this scoped modifier class, toggled onto
   #contact-flow-shell only while the current step is type "single"/"multi"
   (js/contact-flow.js's renderStep) — everything else on this page
   (contact-details, location, review, the final cards, the calendar)
   keeps the shared rhythm defined above untouched. Three tiers reuse this
   file's own existing 50.0625rem/80rem breakpoints. Specificity alone
   (an extra class, or an ID for #contact-flow-controls) is enough for every
   override below to win regardless of source order; only the container's
   own padding needs :not([hidden]) to match the base rule's specificity,
   so it's placed after that rule here for the tie-break. */
.contact-flow__container--choice:not([hidden]) {
  padding-top: 48px;
  padding-bottom: 56px;
}

.contact-flow__container--choice .contact-flow__supporting {
  margin-top: 20px;
}

.contact-flow__container--choice .contact-flow__options,
.contact-flow__container--choice .contact-flow__heading + .contact-flow__options {
  margin-top: 28px;
}

.contact-flow__container--choice #contact-flow-controls {
  margin-top: 36px;
}

@media (min-width: 50.0625rem) {
  .contact-flow__container--choice:not([hidden]) {
    padding-top: 64px;
    padding-bottom: 68px;
  }

  .contact-flow__container--choice .contact-flow__supporting {
    margin-top: 24px;
  }

  .contact-flow__container--choice .contact-flow__options,
  .contact-flow__container--choice .contact-flow__heading + .contact-flow__options {
    margin-top: 32px;
  }

  .contact-flow__container--choice #contact-flow-controls {
    margin-top: 40px;
  }
}

@media (min-width: 80rem) {
  .contact-flow__container--choice:not([hidden]) {
    padding-top: 84px;
    padding-bottom: 76px;
  }

  .contact-flow__container--choice .contact-flow__supporting {
    margin-top: 28px;
  }

  .contact-flow__container--choice .contact-flow__options,
  .contact-flow__container--choice .contact-flow__heading + .contact-flow__options {
    margin-top: 36px;
  }

  .contact-flow__container--choice #contact-flow-controls {
    margin-top: 46px;
  }
}

/* "Tell us about the business" reveal (business-type screen's Other
   option) — a plain .form-field, same spacing rhythm as the rest. */
.contact-flow__other-reveal {
  max-width: 60rem;
  margin: 32px auto 0;
}

/* .form-field (components.css) sets an unconditional `display: flex`,
   which — same gotcha fixed elsewhere on this page — overrides [hidden]'s
   own UA-default `display: none` regardless of specificity, since an
   author rule always wins over a UA one. The extra [hidden] attribute
   selector here gives this rule higher specificity than the plain
   .form-field class it needs to override. */
.contact-flow__other-reveal[hidden] {
  display: none;
}

/* STEP MOUNT + TRANSITION — "armed, then triggered" on every render (not a
   one-shot IntersectionObserver like the landing page's scroll reveals,
   since this genuinely needs to replay on every single screen change): the
   base (freshly rendered) state is the pre-entrance look; .is-entering
   (added one frame later, from contact-flow.js) is the settled look.
   Opacity + a short horizontal shift only, per brief. */
#contact-flow-step {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 260ms var(--cb-ease-standard), transform 260ms var(--cb-ease-standard);
}

#contact-flow-step.is-entering {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  #contact-flow-step {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* CONTROLS */
#contact-flow-controls {
  display: flex;
  align-items: center;
  gap: var(--cb-space-5);
  /* ~64px between the cards/fields and the controls row. */
  margin-top: 64px;
}

.contact-flow__controls.is-final-step {
  /* The final screen's two cards are each their own action — no shared
     Continue button sits beside Back there. */
  justify-content: flex-start;
}

.contact-flow__back {
  appearance: none;
  background: none;
  border: none;
  padding: 0.5em 0.25em;
  margin: -0.5em -0.25em;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-body-size);
  color: var(--cb-color-text-secondary);
  cursor: pointer;
  text-decoration-line: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.contact-flow__back:hover,
.contact-flow__back:focus-visible {
  color: var(--cb-color-text);
  text-decoration-line: underline;
}

/* contact-flow.js hides this button entirely on the final screen
   (primaryButton.hidden = true) — [hidden] needs the same explicit
   `display: none` override as everywhere else on this page, since the
   unconditional `display: inline-flex` two rules down would otherwise
   win over the attribute's own UA-default. */
.contact-flow__primary[hidden] {
  display: none;
}

.contact-flow__primary {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: none;
  border-radius: var(--cb-radius-button);
  padding: 0.875em 1.5em;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-body-size);
  background: var(--cb-color-ink);
  color: var(--cb-color-paper);
  cursor: pointer;
  transition: opacity 200ms var(--cb-ease-standard);
}

.contact-flow__primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.contact-flow__primary:not(:disabled):hover {
  opacity: 0.85;
}

/* LOCATION + CONTACT-DETAILS FIELDS — reuses .form-field/.form-field__error
   from components.css entirely; .form-row is reproduced here only because
   it otherwise lives in layout.css among many landing-page-only rules. */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cb-space-4);
}

.form-row:not(:first-child) {
  margin-top: var(--cb-space-4);
}

@media (min-width: 30rem) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-flow__fields {
  margin-top: 72px;
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-4);
}

.contact-flow__fields > .form-field {
  margin: 0;
}

/* REVIEW SCREEN — compact and calm: a short label + one line of text per
   group, a hairline divider between groups, a small "Edit" link. Never
   card-styled or boxed — this is a summary, not another set of answers to
   pick. */
.contact-flow__review-list {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
}

.contact-flow__review-group {
  padding-block: var(--cb-space-4);
  border-bottom: 1px solid var(--cb-color-line);
}

.contact-flow__review-group:first-child {
  padding-top: 0;
}

.contact-flow__review-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cb-space-3);
}

.contact-flow__review-group-label {
  margin: 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-label-size);
  letter-spacing: var(--cb-text-label-tracking);
  text-transform: uppercase;
  color: var(--cb-color-text-secondary);
}

.contact-flow__review-group-body {
  margin: var(--cb-space-2) 0 0;
  color: var(--cb-color-ink);
}

.contact-flow__summary-edit {
  appearance: none;
  background: none;
  border: none;
  padding: 0.25em;
  margin: -0.25em;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-small-size);
  color: var(--cb-color-text-secondary);
  text-decoration-line: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  white-space: nowrap;
}

.contact-flow__summary-edit:hover,
.contact-flow__summary-edit:focus-visible {
  color: var(--cb-color-ink);
  text-decoration-line: underline;
}

/* FINAL CONTINUATION SCREEN — two equal, larger cards; same surface/border/
   radius language as the answer cards, just roomier, since each one is a
   whole path forward rather than one short answer. contact-flow.js hides
   this whole grid once "View available times" reveals the calendar area in
   its place — same [hidden]-vs-unconditional-display override needed as
   everywhere else on this page. */
.contact-flow__final-cards[hidden] {
  display: none;
}

.contact-flow__final-cards {
  max-width: 73.75rem;
  margin: 72px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 50.0625rem) {
  .contact-flow__final-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-flow__final-card {
  background: color-mix(in srgb, var(--cb-color-ink) 8%, var(--cb-color-paper));
  border: 1px solid var(--cb-color-line);
  border-radius: var(--cb-radius-modal);
  padding: 40px;
}

/* One restrained outline icon per card, above the heading — identical
   sizing/spacing in both so the two cards read as a matched pair. Plain
   stroke SVGs (markup in contact-flow.js), currentColor so they pick up
   Ink from this rule without a separate fill/stroke colour override. */
.contact-flow__final-icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: var(--cb-space-4);
  color: var(--cb-color-ink);
}

.contact-flow__final-card h3 {
  margin: 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-section-heading-size);
  line-height: var(--cb-text-section-heading-leading);
  color: var(--cb-color-ink);
}

.contact-flow__final-card p {
  margin: var(--cb-space-3) 0 0;
  color: var(--cb-color-text-secondary);
}

/* Shared text-only CTA — used here and by the success state's own return
   link ("use the same CTA treatment"). Deliberately not the sitewide .cta
   class: that one reveals its underline via an animated background-size
   transition, while this needs a precise text-underline-offset — different
   enough mechanics that reusing .cta would mean fighting its own
   transition instead of just not applying it. No underline by default; one
   revealed only on hover/keyboard-focus (brief: "the two final choice-card
   CTAs must have no visible underline in their resting state"). Padding +
   equal negative margin is the same "invisible bigger tap target" trick
   .cta itself uses — grows the hit area without ever looking like a
   button. */
.contact-flow__text-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border: none;
  background: none;
  padding: 0.5em 0.25em;
  margin: var(--cb-space-5) -0.25em 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-body-size);
  color: var(--cb-color-ink);
  cursor: pointer;
}

.contact-flow__text-cta-label {
  text-decoration-line: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.contact-flow__text-cta:hover .contact-flow__text-cta-label,
.contact-flow__text-cta:focus-visible .contact-flow__text-cta-label {
  text-decoration-line: underline;
}

.contact-flow__text-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Send-enquiry failure message — only shown if the Formspree request in
   js/contact-flow.js's handleSendEnquiry rejects. Same red validation
   colour/size as .form-field__error and the homepage contact form's own
   .contact__error, so a failure reads consistently across the site. */
.contact-flow__final-error {
  margin: var(--cb-space-3) 0 0;
  color: #d92d20;
  font-size: var(--cb-text-small-size);
  line-height: 1.4;
}

/* Inline scheduling area — revealed in place of the two cards once "View
   available times" has saved the enquiry, with the outer choice-screen
   heading/supporting hidden alongside those cards (js/contact-flow.js) —
   this element's own eyebrow+heading+supporting (built into its markup)
   become the step's only visible heading content, so this needs the SAME
   top offset as any other step's heading, not an extra one.
   margin-top: 0 (not the 72px .contact-flow__final-cards still carries) —
   that value existed only to clear the outer heading/supporting THIS
   element used to sit below; now that that heading is hidden and this is
   the first visible thing in the step, .contact-flow__container's own
   padding-top already provides that clearance on its own, exactly like it
   does for every other step's heading. Adding a second offset on top of it
   was the excess top offset the scheduling view previously started with. */
.contact-flow__calendar {
  max-width: 73.75rem;
  margin: 0 auto;
}

/* .contact-flow__calendar (above) stays the full ~1180px scheduling-
   section width, matching the final cards it replaces — but Cal.com's own
   content only ever wants a much narrower measure, so without a cap here
   the grey box used to stretch the full section width while the visible
   calendar rendered near its left edge, reading as "off-centre inside a
   much wider grey container". max-width + margin-inline:auto centres this
   box within that wider section instead. position:relative so the
   loading/failure overlays (css/cal-booking.css, position:absolute) can
   overlay this container precisely. height:auto (no fixed/min-height) once
   ready: Cal.com's own official embed resizes its iframe responsively as
   the visitor moves between the calendar, the review-and-confirm form and
   the confirmation view, so this wrapper simply follows that real height
   rather than reserving one fixed block of space for every internal
   Cal.com screen — overflow:visible so that resize is never clipped; the
   padding below is what keeps the iframe's own square corners clear of
   this box's rounded ones without needing overflow:hidden to fake it. */
.contact-flow__calendar-embed {
  position: relative;
  margin: var(--cb-space-4) auto 0;
  width: 100%;
  max-width: 960px;
  height: auto;
  background: color-mix(in srgb, var(--cb-color-ink) 8%, var(--cb-color-paper));
  border: 1px solid var(--cb-color-line);
  border-radius: var(--cb-radius-modal);
  padding: 20px;
  overflow: visible;
}

/* Temporary floor while waiting for Cal's "linkReady"/"bookerReady"
   (js/cal-booking.js toggles this class) — removed the moment either
   fires, so a ready embed's real height is never held back by it. */
.contact-flow__calendar-embed.is-loading {
  min-height: 520px;
}

@media (min-width: 50.0625rem) {
  .contact-flow__calendar-embed.is-loading {
    min-height: 430px;
  }
}

@media (min-width: 80rem) {
  .contact-flow__calendar-embed.is-loading {
    min-height: 460px;
  }
}

/* SUCCESS SCREEN — replaces the whole flow (contact-flow.js hides
   #contact-flow-shell, which collapses its parent #contact-flow-root to
   zero height, and un-hides this). This is a sibling of #contact-flow-root
   under <main class="contact-flow"> (already flex:1/column, sitting
   between the real header and footer) rather than nested inside it —
   nesting it there left this block's own flex:1 inert, since the parent
   it sat in had no flex rule of its own, which is why it previously
   rendered top-anchored instead of centred in the space between header
   and footer. :not([hidden]) — an author rule always overrides the
   [hidden] attribute's own UA-default `display: none` regardless of
   specificity, so scoping the display declaration this way is what
   actually lets the attribute hide this until a successful "Send
   enquiry". */
.contact-flow__success:not([hidden]) {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content:center still balances the group within whatever space
     is left over once the padding below has been reserved — on a tall
     viewport that leftover space is split evenly above/below on top of the
     paddings, keeping this "centred and balanced"; on a short one the
     paddings still hold as a floor, which is the actual fix (this block
     used to rely on centring ALONE, so a viewport barely taller than the
     content itself left almost no visible gap at either end). */
  justify-content: center;
  text-align: center;
  max-width: 43.75rem;
  margin-inline: auto;
  width: 100%;
  /* Mobile: ~48-64px below the nav, ~56-80px above the footer. */
  padding-top: clamp(48px, 10vw, 64px);
  padding-bottom: clamp(56px, 12vw, 80px);
}

@media (min-width: 50.0625rem) {
  .contact-flow__success:not([hidden]) {
    /* Tablet: ~64-80px below the nav, ~72-96px above the footer. */
    padding-top: clamp(64px, 8vw, 80px);
    padding-bottom: clamp(72px, 9vw, 96px);
  }
}

@media (min-width: 80rem) {
  .contact-flow__success:not([hidden]) {
    /* Desktop: ~72-100px below the nav, ~80-120px above the footer. */
    padding-top: clamp(72px, 6vw, 100px);
    padding-bottom: clamp(80px, 7vw, 120px);
  }
}

.contact-flow__success-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 30px;
}

@media (prefers-reduced-motion: no-preference) {
  .contact-flow__success-icon {
    animation: contact-flow-success-fade 500ms var(--cb-ease-standard);
  }
}

@keyframes contact-flow-success-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.contact-flow__success h1 {
  margin: 32px 0 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-page-heading-size);
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  outline: none;
}

.contact-flow__success p {
  margin-top: 40px;
  color: var(--cb-color-text-secondary);
}

.contact-flow__success .contact-flow__quiet-link {
  margin-top: 56px;
  /* .contact-flow__quiet-link's own -0.5em bottom margin (a bigger-tap-
     target trick that normally cancels out invisibly against whatever
     follows it) has nothing to cancel against here — this CTA is the last
     thing in the block — so left alone it quietly ate ~8px straight out of
     the padding-bottom below, which is exactly the gap this component is
     responsible for guaranteeing. Zeroed only in this context; the other
     three sides (and every other use of .contact-flow__quiet-link) keep
     the trick. */
  margin-bottom: 0;
}

/* ALTERNATIVE-ROUTE CTAS — "Prefer a simple form?" (first screen only),
   "Return to the guided enquiry" (top of the simple-form view) and the
   success screen's "Return to Copenhagen Bureau" all share this: no
   underline by default, one revealed only on hover/keyboard-focus.
   Deliberately a separate class from .contact-flow__text-cta above (the
   final-cards' CTAs), which shows its underline by default — that pair
   must not change here. text-decoration (not the animated background-size
   trick .cta uses elsewhere) so the offset can be set precisely. */
.contact-flow__quiet-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border: none;
  background: none;
  padding: 0.5em 0.25em;
  margin: -0.5em -0.25em;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-body-size);
  color: var(--cb-color-ink);
  cursor: pointer;
}

.contact-flow__quiet-link--small {
  font-size: var(--cb-text-small-size);
}

.contact-flow__quiet-link-label {
  text-decoration-line: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.contact-flow__quiet-link:hover .contact-flow__quiet-link-label,
.contact-flow__quiet-link:focus-visible .contact-flow__quiet-link-label {
  text-decoration-line: underline;
}

/* Sits above the first question (mobile, left-aligned with the question
   content) or in the upper-right of the content container (desktop) —
   align-self on a flex child of .contact-flow__container achieves both
   from one rule without position:absolute. */
.contact-flow__alt-route {
  align-self: flex-start;
  margin-bottom: var(--cb-space-5);
}

@media (min-width: 50.0625rem) {
  .contact-flow__alt-route {
    align-self: flex-end;
    margin-bottom: var(--cb-space-6);
  }
}

/* WHATSAPP QUICK-QUESTION DRAWER — same reliable right-side-panel mechanics
   as the homepage's own drawers (fixed full-viewport wrapper, [inert] as
   the single source of truth for the collapsed state, backdrop + panel as
   siblings, translateX slide-in), reproduced here rather than shared since
   this page has no script in common with index.html. Deliberately narrower
   than either of those (brief: "keep this drawer narrower than the booking
   and project drawers") — this is a two-field quick-question form, not a
   long-form panel or a multi-field booking form, so it never needs their
   width. */
.whatsapp-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.whatsapp-drawer:not([inert]) {
  visibility: visible;
  pointer-events: auto;
}

.whatsapp-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cb-color-ink) 35%, transparent);
  opacity: 0;
  transition: opacity 650ms var(--cb-ease-standard);
}

.whatsapp-drawer:not([inert]) .whatsapp-drawer__backdrop {
  opacity: 1;
}

/* Mobile-first: 100vw (brief's own explicit mobile target); the
   ≥50.0625rem/≥64rem tiers below narrow it to the brief's tablet/desktop
   targets (55-65vw / 400-440px). */
.whatsapp-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100svh;
  background: var(--cb-color-paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 650ms var(--cb-ease-standard);
}

.whatsapp-drawer:not([inert]) .whatsapp-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-drawer__backdrop,
  .whatsapp-drawer__panel {
    transition: none;
  }
}

@media (min-width: 50.0625rem) {
  .whatsapp-drawer__panel {
    width: 60vw;
  }
}

@media (min-width: 64rem) {
  .whatsapp-drawer__panel {
    width: 420px;
  }
}

.whatsapp-drawer__topbar {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: var(--cb-space-4) var(--cb-space-4) 0;
}

@media (min-width: 50.0625rem) {
  .whatsapp-drawer__topbar {
    padding: var(--cb-space-4) var(--cb-space-6) 0;
  }
}

/* Same visual treatment as the homepage drawers' own close buttons (plain
   hit-area, no filled decorative circle, transparent-margin bigger tap
   target) — reproduced rather than shared since those belong to components
   this task must not touch or couple to. */
.whatsapp-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem;
  border-radius: var(--cb-radius);
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cb-color-ink);
  cursor: pointer;
}

.whatsapp-drawer__content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--cb-space-4) var(--cb-space-6);
}

@media (min-width: 50.0625rem) {
  .whatsapp-drawer__content {
    padding: 0 var(--cb-space-6) var(--cb-space-7);
  }
}

/* Simple outline icon beside the heading — brief: "Ink stroke, no coloured
   icon container, no animation, no emoji". */
.whatsapp-drawer__icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: var(--cb-space-4);
  color: var(--cb-color-ink);
}

.whatsapp-drawer__heading {
  margin: var(--cb-space-3) 0 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-page-heading-size);
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  outline: none;
}

.whatsapp-drawer__supporting {
  margin-top: var(--cb-space-4);
  color: var(--cb-color-text-secondary);
}

.whatsapp-drawer__form {
  margin-top: var(--cb-space-6);
  display: flex;
  flex-direction: column;
}

.whatsapp-drawer__form .form-field:not(:first-child) {
  margin-top: var(--cb-space-4);
}

.contact-flow__quiet-link.whatsapp-drawer__submit {
  margin-top: var(--cb-space-5);
  align-self: flex-start;
}