/* Section 9: wordmark band, enquiry close and footer (lane D).
   The panel deliberately repeats the opening's assistant panel (css/hero.css .panel) with its own
   class names, so a later change to the hero cannot break the form. Tokens from css/base.css. */

/* Theme: the close runs from the page ground to its own end ground, and the footer stays on that end.
   Dark: ink to paper (as designed). Light: the whole close sits on a light blue paper; the wordmark
   band fades into it from the white page above, so there is no hard edge. --ct-from-rgb is the text
   tone at the start, for the hairlines that cross over during the shift. */
#contact, .site-footer {
  --ct-from: var(--ink); --ct-to: var(--paper); --ct-fg-from: var(--paper); --ct-from-rgb: 246 245 242;
  --ct-pool: rgb(11 30 91 / .55); --ct-stroke: rgb(246 245 242 / .28); --ct-band: var(--ct-from);
}
:root[data-scheme="light"] :is(#contact, .site-footer) {
  --ct-from: var(--bg-2); --ct-to: var(--bg-2); --ct-fg-from: var(--ink); --ct-from-rgb: 10 10 11;
  --ct-pool: rgb(31 111 255 / .12); --ct-stroke: rgb(11 30 91 / .22);
  --ct-band: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
#contact { min-height: 0; position: relative; background: var(--ct-from); }

/* Chrome light reveal wordmark, full band width, just above the close. */
.ct-markband { position: relative; overflow: hidden; padding: 0 var(--gutter); background: var(--ct-band); }
.ct-markband::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 120% at 50% 100%, var(--ct-pool), transparent 70%);
}
.ct-wordmark {
  position: relative; margin: 0; padding: clamp(40px, 7vw, 96px) 0 clamp(28px, 5vw, 64px);
  font-size: var(--mark-fs, 11vw); line-height: .92; font-weight: 600; letter-spacing: -0.045em; white-space: nowrap;
  color: var(--ct-from); -webkit-text-stroke: 1.5px var(--ct-stroke); paint-order: stroke fill;
  text-rendering: geometricPrecision; user-select: none; -webkit-user-select: none;
}
.ct-wordmark span { position: relative; display: inline-block; }
.ct-wordmark span::before {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle var(--hr, 9rem) at var(--hx, 40%) var(--hy, 45%), rgba(255, 255, 255, .85) 0%, rgba(214, 228, 255, .25) 40%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #ffffff 0%, #dfe6f2 28%, #6f7d99 42%, #0b1430 50%, #1b2f6e 57%, #9fb4dd 71%, #ffffff 100%) 0 var(--chrome-y, 50%) / 100% 150%,
    linear-gradient(104deg, #eef2f8 0%, #ffffff 6%, #b9c4d6 11%, #0b1e5b 17%, #060a18 21%, #1f6fff 26%, #9cc3ff 30%, #f5f8fc 35%, #ffffff 40%,
      #aab4c4 46%, #0b1e5b 52%, #05070f 55%, #2a78ff 59%, #b6d3ff 63%, #ffffff 69%, #a3adbd 76%, #0b1e5b 81%, #070a14 84%, #3d86ff 88%, #eef3fa 93%, #ffffff 100%)
      var(--chrome-x, 35%) 0 / 85% 100%;
  background-blend-mode: screen, overlay, normal;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0; filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .9));
  -webkit-mask-image: var(--lit, radial-gradient(circle at 0 0, transparent 0, transparent 0));
  mask-image: var(--lit, radial-gradient(circle at 0 0, transparent 0, transparent 0));
}

/* The close. --shift runs 0 (ink) to 1 (paper) on scroll; without JS or with reduced motion it is paper. */
.ct-stage {
  --shift: 1;
  --ct-bg: color-mix(in oklab, var(--ct-to) calc(var(--shift) * 100%), var(--ct-from));
  --ct-fg: color-mix(in srgb, var(--ink) calc(var(--shift) * 100%), var(--ct-fg-from));
  --soft: color-mix(in srgb, rgba(10, 10, 11, .62) calc(var(--shift) * 100%), rgb(var(--ct-from-rgb) / .62));
  position: relative; background: var(--ct-bg); color: var(--ct-fg);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "copy panel" "direct panel";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 104px); row-gap: 36px;
  padding: calc(var(--header-h) + clamp(48px, 9vh, 104px)) max(var(--gutter), calc((100vw - 1240px) / 2)) clamp(72px, 12vh, 128px);
  min-height: 100svh; align-content: center; perspective: 1400px;
}
/* a hairline grid echoes the opening, drawn only where the paper has arrived */
.ct-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--shift);
  background-image:
    linear-gradient(to right, rgba(10, 10, 11, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 11, .045) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 62% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 62% 50%, #000 20%, transparent 75%);
}
.ct-copy { grid-area: copy; position: relative; align-self: end; }
.ct-logo { width: 96px; height: auto; margin-bottom: 36px; }
.ct-eyebrow { margin: 0 0 14px; font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: var(--soft); }
.ct-copy h2 {
  margin: 0; font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: .98; font-weight: 600; letter-spacing: -0.036em;
  text-wrap: balance;
}
.ct-lead { margin: 20px 0 0; max-width: 26em; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.45; color: var(--soft); text-wrap: pretty; }

.ct-direct { grid-area: direct; position: relative; align-self: start; padding-top: 22px; border-top: 1px solid color-mix(in srgb, rgba(10, 10, 11, .1) calc(var(--shift) * 100%), rgb(var(--ct-from-rgb) / .12)); }
.ct-direct-label { margin: 0 0 12px; font-size: .8125rem; color: var(--soft); }
.ct-direct-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ct-wa-btn { --bg: var(--ink); --fg: var(--paper); gap: 10px; }
.ct-wa-num {
  padding-left: 12px; margin-left: 2px; font-weight: 500; font-variant-numeric: tabular-nums;
  border-left: 1px solid rgb(255 255 255 / .28); opacity: .86;
}
.ct-wa-num:empty { display: none; }
.ct-email {
  font-size: .9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, rgba(10, 10, 11, .25) calc(var(--shift) * 100%), rgb(var(--ct-from-rgb) / .3));
  transition: text-decoration-color .25s var(--ease), color .25s var(--ease);
}
.ct-email:hover { text-decoration-color: var(--blue); color: var(--blue); }

/* The panel: the opening's assistant, now asking on the visitor's behalf. */
.ct-panel {
  grid-area: panel; position: relative; align-self: center; color: var(--ink);
  display: flex; flex-direction: column; transform-origin: 50% 100%;
  background: #FCFCFA; border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .7) inset,
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 0 0 1px rgba(10, 10, 11, .14),
    0 2px 4px rgba(10, 10, 11, .06),
    0 24px 48px -18px rgba(10, 10, 11, .28),
    0 60px 120px -40px rgba(11, 30, 91, .35);
}
.ct-top { display: flex; align-items: center; height: 48px; padding: 0 14px 0 18px; border-bottom: 1px solid rgba(10, 10, 11, .07); }
.ct-title { display: flex; align-items: center; gap: 9px; font-size: .875rem; font-weight: 600; }
.ct-mode { margin-left: 4px; padding: 3px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 500; color: rgba(10, 10, 11, .55); background: rgba(10, 10, 11, .045); }
.ct-body { padding: 20px 30px 4px; }
.ct-q { display: flex; justify-content: flex-end; }
.ct-bubble {
  margin: 0; max-width: 78%; padding: 11px 16px; border-radius: 18px 18px 6px 18px;
  background: #EFEEEA; font-size: .9375rem; line-height: 1.45; min-height: 44px;
}
.ct-caret { display: none; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--ink); animation: ct-caret 1s steps(1) infinite; }
.ct-panel[data-phase="idle"] .ct-caret, .ct-panel[data-phase="typing"] .ct-caret { display: inline-block; }
@keyframes ct-caret { 50% { opacity: 0; } }
.ct-reply { display: flex; align-items: center; gap: 10px; margin: 16px 0 18px; font-size: .9375rem; }
.ct-reply { transition: transform .5s var(--ease), visibility 0s; }
.ct-panel[data-phase="idle"] .ct-reply, .ct-panel[data-phase="typing"] .ct-reply { visibility: hidden; transform: translateY(8px); transition: none; }
.ct-reply-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); position: relative; flex: none; }
.ct-reply-dot::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

.ct-field { margin-bottom: 14px; }
.ct-field label { display: block; margin: 0 0 7px 2px; font-size: .8125rem; font-weight: 600; color: rgba(10, 10, 11, .78); }
.ct-input {
  display: flex; align-items: center; height: 52px; padding: 0 16px; border-radius: 16px;
  border: 1px solid rgba(10, 10, 11, .12); background: #fff;
  box-shadow: 0 1px 0 rgba(10, 10, 11, .03);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ct-input:hover { border-color: rgba(10, 10, 11, .26); }
.ct-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 111, 255, .16); }
.ct-input input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font: inherit; font-size: 1rem; color: var(--ink);
}
.ct-input input::placeholder { color: rgba(10, 10, 11, .36); }
.ct-field.has-error .ct-input { border-color: #C2361B; box-shadow: 0 0 0 3px rgba(194, 54, 27, .1); }
.ct-err { margin: 6px 0 0 2px; font-size: .8125rem; color: #B0301A; min-height: 0; }
.ct-err:empty { display: none; }

.ct-send-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 16px 16px; padding: 8px 8px 8px 16px; border-radius: 16px; background: rgba(10, 10, 11, .035); }
.ct-note { margin: 0; font-size: .8125rem; color: rgba(10, 10, 11, .5); }
.ct-send {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px 0 18px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
  font-weight: 600; font-size: .9375rem; overflow: hidden; isolation: isolate;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.ct-send::before {
  content: ''; position: absolute; z-index: -1; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--blue); transform: scale(0); transition: transform .5s var(--ease);
}
.ct-send:hover::before, .ct-send:focus-visible::before { transform: scale(40); }
.ct-send:active { transform: scale(.97); }
.ct-send:disabled { cursor: progress; opacity: .7; }
.ct-send-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); color: var(--ink); transition: transform .35s var(--ease); }
.ct-send:hover .ct-send-icon { transform: translateY(-2px); }
#contact.is-home .ct-send-icon { box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .1); }

.ct-status:empty { display: none; }
.ct-status { margin: 0 16px 16px; padding: 14px 16px; border-radius: 14px; font-size: .9375rem; line-height: 1.45; background: rgba(10, 10, 11, .04); }
.ct-status p { margin: 0; }
.ct-status[data-kind="off"], .ct-status[data-kind="failed"] { background: #FFF6EC; box-shadow: inset 0 0 0 1px rgba(176, 96, 20, .18); }
.ct-status[data-kind="sent"] { background: rgba(31, 111, 255, .07); box-shadow: inset 0 0 0 1px rgba(31, 111, 255, .2); }
.ct-fallback { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ct-fb {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: background-color .25s var(--ease);
}
.ct-fb:hover, .ct-fb:focus-visible { background: var(--blue); }
/* WhatsApp is the main route back (how we reply), email the plain second one, as in the pill pair. */
.ct-fb--mail { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .2); }
.ct-fb--mail:hover, .ct-fb--mail:focus-visible { background: rgba(31, 111, 255, .08); color: #1550C7; box-shadow: inset 0 0 0 1px rgba(31, 111, 255, .4); }

/* Footer, still on paper. */
.site-footer { background: var(--ct-to); color: var(--ink); padding: 0 var(--gutter) 28px; }
.ft-inner {
  max-width: 1240px; margin: 0 auto; padding-top: 22px; border-top: 1px solid rgba(10, 10, 11, .1);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
}
.ft-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9375rem; text-decoration: none; letter-spacing: -0.01em; }
.ft-brand img { width: 20px; }
.ft-nav { display: flex; gap: 4px; justify-content: center; }
.ft-nav a { padding: 8px 12px; border-radius: 999px; font-size: .8125rem; text-decoration: none; color: rgba(10, 10, 11, .66); transition: background-color .2s, color .2s; }
.ft-nav a:hover { background: rgba(10, 10, 11, .05); color: var(--ink); }
.ft-small { margin: 0; display: flex; flex-direction: column; align-items: flex-end; font-size: .75rem; color: rgba(10, 10, 11, .5); }

@media (max-width: 819.98px) {
  .ct-stage {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "panel" "direct"; grid-template-rows: auto;
    row-gap: 28px; padding: calc(var(--header-h) + 40px) var(--gutter) 64px; min-height: 0;
  }
  .ct-logo { width: 64px; margin-bottom: 24px; }
  .ct-copy h2 { font-size: 2.375rem; }
  .ct-lead { margin-top: 14px; font-size: 1.0625rem; }
  .ct-panel { border-radius: 18px; }
  .ct-body { padding: 16px 16px 2px; }
  .ct-bubble { max-width: 92%; }
  .ct-send-row { margin: 4px 10px 10px; flex-direction: column; align-items: stretch; padding: 10px; gap: 10px; }
  .ct-note { text-align: center; }
  .ct-send { justify-content: space-between; }
  .ct-status { margin: 0 10px 10px; }
  .ct-fb { min-height: 44px; }
  .ct-direct-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .ct-wa-btn { width: 100%; }
  .ct-email { text-align: center; padding: 8px 0; }
  .ft-inner { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .ft-nav { justify-content: flex-start; margin-left: -12px; flex-wrap: wrap; }
  .ft-small { align-items: flex-start; }
  .site-footer { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-caret { animation: none; }
  .ct-wordmark span::before {
    --lit: radial-gradient(ellipse 75% 170% at 42% 50%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.3) 100%) !important;
  }
}

/* "What would you like?": the small choice every WhatsApp and Email button opens first
   (js/contact/choice.js, Josh 11 Nov 2026). Light paper card, one coral dot, three rows. */
.cc {
  position: fixed; z-index: 120; width: 300px; margin: 0; padding: 14px 8px 8px;
  border-radius: 16px; background: #FFFFFF; color: #17171A;
  box-shadow: 0 0 0 1px rgb(11 30 91 / .1), 0 2px 4px rgb(11 30 91 / .06), 0 22px 48px -18px rgb(11 30 91 / .38);
  opacity: 0; transform: translateY(6px) scale(.98); transform-origin: 50% 0;
  transition: opacity .18s var(--ease), transform .22s var(--ease);
}
.cc[hidden] { display: none; }
.cc.is-in { opacity: 1; transform: none; }
.cc-h { display: flex; align-items: center; gap: 8px; margin: 0 8px; font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgb(242 80 58 / .14); }
.cc-sub { display: flex; align-items: center; gap: 6px; margin: 4px 8px 10px; font-size: .75rem; color: rgba(10, 10, 11, .56); }
.cc-ic { display: inline-flex; }
.cc-ic svg { width: 14px; height: 14px; }
.cc-list { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.cc-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 10px 0 12px;
  border-radius: 10px; color: #17171A; text-decoration: none; font-size: .9375rem; font-weight: 500;
  background: #F6F7FA; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.cc-opt svg { width: 14px; height: 14px; flex: none; color: rgba(10, 10, 11, .4); transition: transform .2s var(--ease), color .15s var(--ease); }
.cc-opt:hover, .cc-opt:focus-visible { background: rgb(31 111 255 / .09); color: #1550C7; outline: none; }
.cc-opt:hover svg, .cc-opt:focus-visible svg { color: var(--blue); transform: translateX(2px); }
.cc-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
/* phones: a sheet the width of the screen */
.cc--sheet { width: auto; padding: 16px 10px 10px; border-radius: 18px; transform-origin: 50% 100%; }
.cc--sheet .cc-opt { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .cc { transition: none; transform: none; } }