/* ---------- Let's talk: the message is already written (CONTACT_CONCEPT_UK.md) ----------
   The finale ends on the Atlantic the page begins with. Onyx, running straight on into the
   footer (the footer's top rule dims under it, as under the case page's call). On the left the
   words; on the right the visitor's message to Sergii, written in its resting look: the general
   message, the button and the email link built for it. contact.js arms the topics (hidden
   without it), types, and keeps the links on the chosen message.

   Under both columns the sea: the case page's lines in perspective (contact.py's sea()), a
   Saffron horizon, and a low sun on it under the card: no disc, a wide flat warmth, as the
   hero's. It rises a little as the section scrolls in (a CSS scroll timeline, nothing runs by
   itself). At rest nothing is 3D, so it stays sharp on Retina; only transform and opacity move. */
.contact { --sea-h:round(clamp(96px,9vw,170px),1px); --sea-gap:clamp(20px,1.6vw,28px); --sun-x:calc(50% + .24 * min(1520px, 100% - 128px));
  position:relative; isolation:isolate; overflow:hidden; padding:clamp(56px,4.8vw,84px) 0 calc(var(--sea-h) + var(--sea-gap));
  background:var(--brand-onyx); color:var(--on-dark); --focus:var(--accent); }
.contact > .container { position:relative; z-index:1; width:min(1520px,calc(100% - 128px)); }
.contact-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,44%); gap:clamp(40px,4vw,72px); align-items:center; }
.contact .eyebrow { display:flex; align-items:center; gap:14px; margin:0; letter-spacing:.18em; color:#f7f5f08f; }
.contact h2 { margin-top:22px; font-size:clamp(34px,4.2vw,68px); line-height:1.03; letter-spacing:-.038em; color:var(--on-dark); }
.ct-line { display:block; }
.ct-line > span { display:block; }
.contact .headline-dot { position:relative; display:inline-block; color:var(--accent); }
/* its glow when the sun reaches the horizon (contact.js) */
.contact .headline-dot::after { content:''; position:absolute; left:50%; bottom:.12em; width:.62em; height:.62em; margin-left:-.31em; border-radius:50%;
  background:radial-gradient(circle,#f4b000b3,#f4b00000 68%); opacity:0; pointer-events:none; }
.contact-lede { margin-top:22px; max-width:48ch; font-size:var(--text-lead); line-height:1.52; color:#f7f5f0b3; text-wrap:pretty; }

/* ── The card: a message to Sergii ───────────────────────────────────────────────────────── */
.contact-card { position:relative; padding:clamp(22px,2.2vw,32px); border:1px solid #f7f5f01c; border-radius:20px; background:var(--onyx-raised);
  box-shadow:inset 0 1px 0 #ffffff0a; }
.ct-to { display:flex; align-items:center; gap:10px; margin:0; font-size:12px; line-height:18px; letter-spacing:.12em; color:#f7f5f08f; }
.ct-mark { display:block; width:18px; height:auto; flex:none; }
.ct-pick { margin:20px 0 0; font-size:11.5px; line-height:1.3; letter-spacing:.18em; text-transform:uppercase; color:#f7f5f08f; }
/* without the script there is nothing to choose: the topics stay hidden; with it their room is
   kept from the first frame, so nothing moves when the script arrives */
.ct-topics[hidden] { display:none; }
html[data-js] .ct-topics[hidden] { display:block; visibility:hidden; }
.ct-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ct-chip { display:inline-flex; align-items:center; min-height:40px; margin:0; padding:0 14px; border:1px solid #f7f5f026; border-radius:var(--radius-pill);
  background:transparent; color:#f7f5f0c7; font-size:14px; line-height:1.2; white-space:nowrap; cursor:pointer;
  transition:border-color 200ms ease,background-color 200ms ease,color 200ms ease; }
.ct-chip:focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:3px; }
.ct-chip[aria-checked="true"] { border-color:var(--accent); background:#f4b0001f; color:var(--on-dark); }
@media(hover:hover) and (pointer:fine) {
 .ct-chip:not([aria-checked="true"]):hover { border-color:#f7f5f059; color:var(--on-dark); }
}

/* the bubble: an outgoing message. The six messages stand invisible in one cell with the typed
   text, so the bubble keeps the size of the longest whatever is being typed. */
.ct-bubble { width:fit-content; max-width:90%; margin:18px 0 0 auto; padding:12px 16px 10px; border-radius:16px 16px 4px 16px; background:#f7f5f014; }
.ct-text { display:grid; margin:0; font-size:16.5px; line-height:1.45; letter-spacing:-.005em; color:var(--on-dark); }
.ct-text > * { grid-area:1/1; }
.ct-ghost { visibility:hidden; }
.ct-typed-line { align-self:start; }
.ct-typed { white-space:pre-wrap; }
.ct-room { display:inline-block; width:74px; }
/* the caret takes no room, so it never wraps a line the finished text would not */
.ct-caret { position:relative; display:inline-block; width:0; height:1.1em; vertical-align:-.18em; opacity:0; }
.ct-caret::before { content:''; position:absolute; left:1px; top:0; bottom:0; width:2px; border-radius:1px; background:var(--accent); }
.ct-caret.is-on { opacity:1; }
.ct-via { align-self:end; justify-self:end; margin-bottom:.2em; font-size:11.5px; line-height:1.3; letter-spacing:.02em; color:#f7f5f08f; }

/* the button: Saffron, as the case page's call; a sheen crosses it once the message is typed */
.ct-send { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:14px; width:100%;
  min-height:var(--btn-h); margin-top:18px; padding:0 var(--btn-px); border-radius:var(--btn-radius); background:var(--accent); color:var(--ink); font-size:var(--btn-fs); font-weight:var(--btn-fw);
  box-shadow:var(--btn-shine); transition:background-color var(--micro),box-shadow 240ms,transform 120ms; }
.ct-send:active { transform:scale(.98); }
.ct-send::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(105deg,#ffffff00 30%,#ffffff80 50%,#ffffff00 70%);
  transform:translateX(-110%); pointer-events:none; }
.ct-send:hover { background:var(--btn-saffron-hover); box-shadow:var(--btn-shine),var(--btn-glow); }
.ct-send:focus-visible { outline:2px solid var(--on-dark); outline-offset:3px; }
.ct-alt { display:flex; align-items:center; justify-content:center; gap:12px; margin:10px 0 -6px; font-size:14px; line-height:1.3; color:#f7f5f0b3; }
.ct-alt-link { position:relative; display:inline-flex; align-items:center; min-height:36px; text-decoration:underline; text-decoration-color:#f7f5f040; text-underline-offset:4px;
  transition:color var(--micro),text-decoration-color var(--micro); }
.ct-alt-link:hover { color:var(--on-dark); text-decoration-color:var(--accent); }
.ct-sep { color:#f7f5f059; }
.contact .contact-note { margin-top:18px; font-size:13.5px; line-height:1.5; color:#f7f5f0b3; }

/* ── The Atlantic: the sun, the lines, the horizon ───────────────────────────────────────── */
.ct-sea { position:absolute; z-index:0; left:0; right:0; bottom:0; height:var(--sea-h); pointer-events:none; }
.ct-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 86%,transparent); }
.ct-lines path { fill:none; stroke:#f7f5f0; stroke-width:1; vector-effect:non-scaling-stroke; stroke-opacity:.15; }
/* a 1 px line on the horizon, brightest under the sun; it draws from there both ways */
.ct-horizon { position:absolute; left:0; right:0; top:0; height:1px; transform-origin:var(--sun-x) 50%;
  background:linear-gradient(90deg,#f4b00000 18%,#f4b00038 calc(var(--sun-x) - 16%),#f4b00094 var(--sun-x),#f4b00038 calc(var(--sun-x) + 12%),#f4b00000 98%); }
/* the sun: a point on the horizon (it moves with the scroll) and its warmth (it rises on entry).
   The warmth is flat and wide, like the hero's after sunset, and fades out before the section's
   foot, so no edge of it meets the footer. */
.ct-sun { position:absolute; left:var(--sun-x); top:0; width:0; height:0; }
.ct-sun-glow { --w:min(1180px,96vw); --h:calc(var(--sea-h) * 1.8); position:absolute; left:calc(var(--w) / -2); top:calc(var(--h) / -2); width:var(--w); height:var(--h);
  background:
    radial-gradient(16% 11% at 50% 50%,#f4b0005c,#f4b00000 100%),
    radial-gradient(30% 36% at 50% 50%,#f4b00026,#f4b00000 100%),
    radial-gradient(50% 50% at 50% 50%,#f4b00012,#f4b00000 100%); }

/* the footer runs on from here: its top rule dims, as under the case page's call */
main:has(> .contact:last-of-type) + .site-footer .footer-rule:first-child { background:#f7f5f01a; }

/* ── Motion ──────────────────────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:no-preference) {
 /* the sun climbs a little and brightens while the section scrolls in; where scroll timelines
    are not supported it simply stands */
 @supports (animation-timeline:view()) {
  .ct-sun { animation:ct-climb linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
 }
 /* the entrance, once (the script's is-armed / is-in; nothing is hidden without the script).
    The words and the card come in when a quarter of the section is on screen; the sea when the
    sea itself is (is-sunrise), which on a tall screen is the same moment. */
 .contact.is-armed:not(.is-in) .accent-rule { transform:scaleX(0); }
 .contact.is-armed:not(.is-in) :is(.eyebrow,.contact-lede,.contact-card) { opacity:0; }
 .contact.is-armed:not(.is-in) .ct-line > span { transform:translateY(108%); }
 .contact.is-armed:not(.is-sunrise) .ct-horizon { transform:scaleX(0); }
 .contact.is-armed:not(.is-sunrise) .ct-lines path { opacity:0; }
 .contact.is-armed:not(.is-sunrise) .ct-sun-glow { opacity:0; }
 .contact.is-entering .ct-line { overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
 .contact.is-entering .accent-rule { animation:rule-draw 420ms var(--ease) backwards; }
 .contact.is-entering .eyebrow { animation:enter 540ms var(--ease) 60ms backwards; }
 .contact.is-entering .ct-line > span { animation:ct-mask 760ms var(--ease) 130ms backwards; }
 .contact.is-entering .ct-line + .ct-line > span { animation-delay:230ms; }
 .contact.is-entering .contact-lede { animation:enter 600ms var(--ease) 380ms backwards; }
 .contact.is-entering .contact-card { animation:ct-card 700ms var(--ease) 600ms backwards; }
 .contact.is-entering .ct-chip { animation:enter 480ms var(--ease) backwards; animation-delay:calc(700ms + var(--k) * 40ms); }
 .contact.is-rising .ct-horizon { animation:ct-draw 800ms var(--ease) 250ms backwards; }
 .contact.is-rising .ct-lines path { animation:ct-show 520ms ease-out backwards; animation-delay:calc(350ms + var(--i) * 30ms); }
 .contact.is-rising .ct-sun-glow { animation:ct-rise 1000ms var(--ease) 450ms backwards; }
}
@keyframes ct-climb { from { opacity:.7; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes ct-mask { from { transform:translateY(108%); } }
@keyframes ct-card { from { opacity:0; transform:translateY(16px); } }
@keyframes ct-draw { from { transform:scaleX(0); } }
@keyframes ct-show { from { opacity:0; } }
@keyframes ct-rise { from { opacity:0; transform:translateY(30px); } }

/* ── Laptops: the footer's grid (min(1200px, 100% − 80px)), so the finale and the footer that
   runs on from it keep one left edge, as 03 and 05 do at these widths ───────────────────── */
@media(min-width:1025px) and (max-width:1439px) {
 .contact { --sun-x:calc(50% + .24 * min(1200px, 100% - 80px)); }
 .contact > .container { width:min(1200px,calc(100% - 80px)); }
}
/* ── Tablets: one column, the card under the words ───────────────────────────────────────── */
@media(max-width:1024px) {
 .contact { --sun-x:50%; --sea-h:104px; }
 .contact > .container { width:min(900px,calc(100% - 64px)); }
 .contact-grid { grid-template-columns:minmax(0,1fr); gap:36px; }
 .contact-card { max-width:600px; }
}
/* ── Phones: label, headline, words, card, sea; the sun over it in the middle ────────────── */
@media(max-width:680px) {
 .contact { --sea-h:78px; --sea-gap:14px; padding-top:48px; }
 .contact > .container { width:calc(100% - 40px); }
 .contact-grid { gap:24px; }
 .contact h2 { margin-top:16px; font-size:clamp(26px,7.4vw,34px); }
 .contact-lede { margin-top:14px; font-size:15.5px; line-height:1.5; }
 .contact-card { max-width:none; }
 .ct-pick { margin-top:15px; }
 .ct-chip { min-height:44px; padding:0 14px; }
 .ct-bubble { max-width:94%; margin-top:14px; }
 .ct-text { font-size:16px; }
 .ct-send { margin-top:14px; }
 .ct-alt { margin:4px 0 -14px; }
 .ct-alt-link { min-height:44px; }
}

.ct-alt-link::before { content:''; position:absolute; left:-12px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity var(--micro),transform 320ms var(--ease); }
.ct-alt-link { transition:transform 320ms var(--ease),color var(--micro),text-decoration-color var(--micro); }
.ct-alt-link:is(:hover,:focus-visible)::before { opacity:1; transform:none; }
.ct-alt-link:is(:hover,:focus-visible) { transform:translateX(12px); }