/* Contact page — the "Let's start creating together" form moved off the
   home page into its own page (used with about.css for tokens + form). */

/* ---- cover: video hero with the site's green hue technique ---- */
.ct-hero {
  position: relative;
  height: 64vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #020403;
}
.ct-hero-video { position: absolute; inset: 0; isolation: isolate; }
.ct-hero-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ct-hero-hue { position: absolute; inset: 0; background: #35E07F; mix-blend-mode: hue; }
.ct-hero-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.ct-hero-video::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30%;
  background: linear-gradient(rgba(2, 4, 3, 0.92), rgba(2, 4, 3, 0));
}
.ct-hero-video::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(rgba(2, 4, 3, 0), #050505 96%);
}
.ct-hero-inner { position: relative; z-index: 2; padding: 0 6vw 7vh; }
.ct-title {
  font-size: clamp(44px, 5.6vw, 96px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin-top: 2.2vh;
}
.ct-sub {
  margin-top: 2.6vh;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.6;
  color: #c9c9c9;
  max-width: 52ch;
}

/* ---- form area ---- */
.ct-wrap {
  padding: 10vh 6vw 12vh;
  display: grid;
  grid-template-columns: minmax(300px, 42%) 1fr;
  gap: 6vw;
  align-items: start;
}

.ct-sec { margin-top: 5vh; }
.ct-mail {
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 500;
  color: var(--af-ink-l);
  text-decoration: none;
  transition: color 0.3s ease;
}
.ct-mail i { font-style: normal; color: var(--af-soft-d); margin-right: 6px; }
.ct-mail:hover { color: var(--af-green); }

.ct-soc a {
  display: block;
  width: fit-content;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--af-ink-l);
  text-decoration: none;
  transition: color 0.3s ease;
}
.ct-soc a:hover { color: var(--af-green); }

.ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6vh;
  font-family: var(--af-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-ink-l);
  padding: 12px 20px;
  border: 1px solid var(--af-line-l);
  border-radius: 99px;
}
.ct-badge i { font-style: normal; color: var(--af-green); }

/* form column: reuses .af-form styles from about.css */
.ct-form-col { padding-top: 5.5vh; }


@media (max-width: 900px) {
  .ct-hero { height: 54vh; }
  .ct-hero-inner { padding: 0 7vw 5vh; }
  .ct-wrap { grid-template-columns: 1fr; padding: 8vh 7vw 8vh; gap: 6vh; }
  .ct-form-col { padding-top: 0; }
}

/* form status line: validation errors and the mailto handoff message */
.af-f-status {
  min-height: 1.2em;
  margin: 1.4rem 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--af-soft-l);
}
.af-f-status.is-error { color: #ff6b6b; }
.af-f-status.is-ok { color: var(--accent); }

/* Honeypot. Moved off screen rather than display:none, because a fair number
   of bots skip fields they can tell are hidden. It is out of the tab order and
   hidden from assistive tech, so nobody using the form ever meets it. */
.af-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===================== book a call: CTA + modal =====================
   The button is the page's one loud element, so it carries the accent as a
   fill rather than an outline. The modal is a native <dialog>: it gives the
   backdrop, the focus trap and Escape for free, which is a lot of correctness
   to get without writing any of it.

   The dialog is split in two: a dark rail carrying this site's voice, and the
   provider's calendar in a white column beside it. The provider renders a
   fixed-width white card on a transparent background, so a dark panel around
   it leaves gutters of dead space down both sides, and its own header repeats
   whatever heading we put above it. Putting our words on one side and its
   card on the other solves both: the white column is wider than the card, so
   the gutters land on white and disappear, and the two headings never stack. */

.ct-book-sec { margin-bottom: 3.2rem; }

.ct-book {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 0.9rem;
  padding: 17px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #041007;
  font-family: var(--af-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 260ms ease, transform 260ms cubic-bezier(0.19, 1, 0.22, 1);
}
.ct-book i { font-style: normal; transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1); }
.ct-book:hover { background: #5ff0a1; }
.ct-book:hover i { transform: translateX(5px); }
.ct-book:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ct-book-note {
  margin: 0.9rem 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--af-soft-l);
}

.ct-modal {
  /* 340 rail + 680 card. The card width is the provider's own cap: it holds
     680 from about 714px of frame width upwards, and at 1000 and over it
     switches to a two-column layout with a left panel of its own, which would
     sit right next to ours. So the frame stays deliberately under that. */
  width: min(1020px, 94vw);
  /* an explicit height, not just a cap: the calendar column is positioned
     inside, so it needs a height to be positioned against */
  height: min(92vh, 920px);
  /* the UA stylesheet centres a dialog with inset:0 + margin:auto; the site's
     global margin reset wins over it, so the centring is restated here */
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #0a0c0b;
  color: var(--af-ink-l);
  overflow: hidden;
}
.ct-modal::backdrop { background: rgba(2, 4, 3, 0.82); }
.ct-modal[open] {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

/* ---- the rail ---- */
.ct-modal-rail {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 0;
  min-width: 0;
}
.ct-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* .af-label carries a 3.5vh page-scale gap it has no room for in here */
.ct-modal-top .af-label { margin-bottom: 0; font-size: 12px; line-height: 44px; }

/* the air goes above the type, not below it: the same composition as the
   page's own hero, which sets its title against the bottom of the frame */
.ct-modal-title {
  margin: auto 0 0;
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.ct-modal-sub {
  margin: 18px 0 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--af-soft-l);
}
.ct-modal-meta {
  margin: 30px 0 0;
  padding: 16px 0 22px;
  border-top: 1px solid var(--af-line-l);
  font-family: var(--af-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-soft-l);
}
.ct-modal-meta b { font-weight: 500; color: var(--af-ink-l); }

.ct-modal-x {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--af-line-l);
  border-radius: 50%;
  background: transparent;
  color: var(--af-ink-l);
  font-size: 13px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.ct-modal-x:hover { background: rgba(53, 224, 127, 0.1); border-color: var(--accent); color: var(--accent); }
.ct-modal-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- the calendar column ----
   #ffffff exactly, and not a tinted neutral: the provider's card is pure
   white and sits on a transparent background, so any other value here would
   draw a seam around it.

   Above 640px of frame width the provider centres a 680px card and leaves
   17px of page padding beside it and 66px above it, with a 1px border and a
   rounded corner around the whole thing. Left alone that reads as a small
   bordered box floating on a white panel. The frame is therefore oversized by
   exactly that padding and pulled out past the clip on three sides, so the
   card itself meets the column edge to edge and its border falls outside.

   Cropping the top is safe even though the frame scrolls: the hidden strip is
   the document's first 66px, and every pixel below that still passes through
   the visible area at some scroll position. Nothing becomes unreachable.

   Under 640px the provider drops the card and its padding and goes edge to
   edge on its own, so the crop is switched off below that. Cropping there
   would cut into the calendar itself. */
.ct-modal-body {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}
/* sized rather than stretched with left/right: an iframe is a replaced
   element, so width:auto falls back to its intrinsic 300px instead of filling
   between the offsets */
.ct-modal-frame {
  position: absolute;
  top: -66px;
  left: -17px;
  width: calc(100% + 34px);
  height: calc(100% + 66px);
  border: 0;
  background: #fff;
}
.ct-modal-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 28px;
  text-align: center;
  font-size: 13px;
  /* on white now, so the light grey the rest of the page uses would not read */
  color: var(--af-soft-d);
  pointer-events: none;
}
.ct-modal.is-ready .ct-modal-loading { opacity: 0; }

.ct-modal-foot {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 0 30px 28px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--af-soft-l);
}
.ct-modal-foot a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.ct-modal-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Below the width the split needs, the rail stacks on top as a header strip
   and the calendar takes the rest of the height.

   1010 and not 1000: at 1010 the 340px rail leaves the calendar column just
   over 606px, which is the narrowest column that still puts the frame above
   the provider's own 640px threshold. A few pixels lower and the provider
   would switch to its edge-to-edge layout while the crop below was still on,
   and the crop would bite into the calendar. */
@media (max-width: 1010px) {
  .ct-modal {
    width: min(680px, 94vw);
    height: min(92vh, 940px);
  }
  .ct-modal[open] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .ct-modal-rail { grid-column: 1; grid-row: 1; padding: 18px 22px; }
  .ct-modal-body { grid-column: 1; grid-row: 2; }
  .ct-modal-foot { grid-column: 1; grid-row: 3; padding: 14px 22px; }

  /* the calendar wants every pixel of a short screen; the heading and the
     close button are the parts that have to survive */
  .ct-modal-top { align-items: center; }
  .ct-modal-title { margin: 12px 0 0; font-size: 24px; }
  .ct-modal-sub, .ct-modal-meta { display: none; }
}

@media (max-width: 760px) {
  .ct-modal {
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    margin: 0; inset: 0;
    border-radius: 0;
  }
  .ct-book { width: 100%; justify-content: center; }
}

/* Under here the frame is narrow enough that the provider goes edge to edge
   by itself, so the crop above has nothing to trim and would eat 17px of the
   calendar on each side. */
@media (max-width: 620px) {
  .ct-modal-frame { top: 0; left: 0; width: 100%; height: 100%; }
}

/* A short screen, a landscape phone or a half-height laptop window. The
   dialog clips what will not fit, so the optional line goes before it can be
   the thing that gets clipped. */
@media (max-height: 640px) {
  .ct-modal-title { font-size: 30px; }
  .ct-modal-sub { display: none; }
}

/* the dialog fades in; with reduced motion it simply appears */
@media (prefers-reduced-motion: no-preference) {
  .ct-modal[open] { animation: ctModalIn 240ms cubic-bezier(0.19, 1, 0.22, 1); }
  @keyframes ctModalIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ct-book, .ct-book i, .ct-modal-x { transition: none; }
}