/* ═══════════════════════════════════════════════════════════════════
   /contact: the Contact page (templates/contact.html, static/js/contact.js).
   Approved design "page-contact" round 3, 2026-10-07:
   1. hero (round 4, 2026-10-08): navy; GET IN TOUCH, lede, Send message
      and a copy-email callout on the left; a big turning, draggable globe
      on the right (Africa lit) with envelopes riding dashed arcs into a
      small stamped "To DataraFlow" envelope at the Nigeria hub;
   2. the form laid open on the page ground (no card, 2026-10-08) beside a
      live preview shaped as a paper letter, with the "I'm..." tiles;
   3. "Other ways to reach us": white callouts on the airy panel.

   Scoped to .dfk. Layout and the page's own objects only: every form
   field, tile, checkbox and button is the shared standard in
   static/css/df-forms.css (.dff-*), not restyled here. Every colour is a
   token from df-tokens.css (tests/test_theme_tokens.py forbids raw values
   here). The navy band and the paper envelope use the navy brand tokens
   (--df-navy, --df-on-navy, --df-paper-fixed), identical in both themes; the brand logos carry their own
   colours in the SVG markup.
   ═══════════════════════════════════════════════════════════════════ */

.dfk {
    --dfk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --dfk-ease: cubic-bezier(.22, 1, .36, 1);
    --dfk-band: var(--df-navy);
    --dfk-band-ink: var(--df-on-navy);
    --dfk-band-grid: color-mix(in srgb, var(--df-on-navy) 5%, transparent);
    --dfk-paper: var(--df-paper-fixed);
    --dfk-paper-ink: var(--df-navy);
    --dfk-paper-ink-3: color-mix(in srgb, var(--df-navy) 62%, var(--df-paper-fixed));
    --dfk-paper-line: color-mix(in srgb, var(--df-navy) 18%, transparent);
    --dfk-card: var(--df-surface);
    --dfk-grid: color-mix(in srgb, var(--df-line) 75%, transparent);
    padding-bottom: clamp(24px, 5vh, 48px);
}

.dfk-defs { position: absolute; }
.dfk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.dfk :focus-visible { outline: 3px solid var(--df-accent); outline-offset: 3px; }
.dfk-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.dfk-sec { padding: 18px 0; scroll-margin-top: calc(var(--df-nav-h) + 8px); }
.dfk-sec-hero { padding-top: clamp(12px, 2.4vh, 24px); }

/* Display recipe and sizes come from the shared type system (df-tokens.css). */
body.public .dfk-disp {
    font-family: var(--df-font-display); font-stretch: var(--df-display-stretch); font-variation-settings: var(--df-display-wdth); font-weight: var(--df-display-weight);
    text-transform: uppercase; line-height: var(--df-display-lh); letter-spacing: var(--df-display-ls); margin: 0; color: var(--df-ink); max-width: none;
}
.dfk-eyebrow { font: 600 11.5px var(--dfk-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-ink-3); }
.dfk-lede { font-family: var(--df-font-text); font-size: var(--df-type-lede); line-height: var(--df-type-lede-lh); margin: 0; max-width: 52ch; }

/* ── 1. Hero ─────────────────────────────────────────────────────── */
/* Navy in both themes (brand constants --df-navy / --df-on-navy). The text
   sits on the left; the globe stage covers the hero and JS places the globe
   on the right, bleeding off the edge. On phones the stage drops below. */
.dfk-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center;
    min-height: min(620px, calc(100vh - var(--df-nav-h) - 60px));
    border-radius: 32px; padding: clamp(28px, 4.4vw, 60px);
    color: var(--dfk-band-ink);
    background-color: var(--dfk-band);
    background-image: linear-gradient(var(--dfk-band-grid) 1px, transparent 1px), linear-gradient(90deg, var(--dfk-band-grid) 1px, transparent 1px);
    background-size: 48px 48px;
}
.dfk-hero :focus-visible { outline-color: var(--df-on-navy-accent); }
.dfk-copy { position: relative; z-index: 2; width: min(46%, 520px); display: grid; gap: clamp(16px, 2.2vw, 24px); justify-items: start; }
body.public .dfk-h1 {
    font-family: var(--df-font-display); font-stretch: var(--df-display-stretch); font-variation-settings: var(--df-display-wdth); font-weight: var(--df-display-weight);
    text-transform: uppercase; line-height: var(--df-display-lh); letter-spacing: var(--df-display-ls); margin: 0;
    font-size: var(--df-type-hero); max-width: 4.4em; color: var(--dfk-band-ink);
}
.dfk-hero .dfk-lede { color: var(--df-on-navy-2); max-width: 30ch; }
.dfk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.dfk-send {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
    background: var(--dfk-paper); color: var(--dfk-paper-ink); font-weight: 700; font-size: 16px; text-decoration: none;
    transition: transform .2s var(--dfk-ease);
}
.dfk-send:hover, .dfk-send:focus-visible { color: var(--dfk-paper-ink); transform: translateY(-2px); }
.dfk-send:active { transform: scale(.97); }
.dfk-send:hover .dfk-ar { transform: translateY(3px); }

/* the globe stage; the canvas is sized and placed by contact.js */
.dfk-stage { position: absolute; inset: 0; z-index: 1; }
.dfk-globe { position: absolute; left: 60%; top: 0; width: 600px; height: 600px; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.dfk-globe.is-drag { cursor: grabbing; }

/* white callouts, flat, pinned at a slight angle */
.dfk-callout {
    display: inline-flex; align-items: center; gap: 10px; text-align: left;
    background: var(--dfk-paper); color: var(--dfk-paper-ink); border: 0; border-radius: 12px;
    padding: 8px 12px; font: inherit; font-size: 13.5px; line-height: 1.25; text-decoration: none; cursor: pointer;
    transform: rotate(var(--dfk-r, 0deg)); transition: transform .22s var(--dfk-ease), background-color .2s, color .2s;
}
.dfk-callout:hover, .dfk-callout:focus-visible { color: var(--dfk-paper-ink); transform: rotate(var(--dfk-r, 0deg)) translateY(-3px); }
.dfk-callout:active { transform: rotate(var(--dfk-r, 0deg)) scale(.97); }
.dfk-callout small { display: block; font: 600 10.5px var(--dfk-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dfk-paper-ink-3); margin-bottom: 1px; font-size: 9.5px; }
.dfk-ar { color: var(--df-brand-cyan); display: inline-block; transition: transform .22s var(--dfk-ease); }

/* the destination: a small stamped envelope at the Nigeria hub */
.dfk-dest {
    position: absolute; left: 0; top: 0; z-index: 2; width: clamp(128px, 12vw, 164px);
    pointer-events: none; opacity: 0; transition: opacity .4s;
    margin: calc(clamp(128px, 12vw, 164px) / -3.44) 0 0 calc(clamp(128px, 12vw, 164px) / -2);
}
.dfk-dest.is-on { opacity: 1; }
.dfk-env {
    position: relative; display: block; aspect-ratio: 1.72; overflow: hidden; color: var(--dfk-paper-ink);
    background: var(--dfk-paper); border-radius: 10px; transform: rotate(-5deg);
    box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--df-navy) 80%, transparent);
}
.dfk-flap {
    position: absolute; left: 0; right: 0; top: 0; height: 46%;
    background:
        linear-gradient(to top right, transparent calc(50% - .7px), var(--dfk-paper-line) 50%, transparent calc(50% + .7px)) left / 50.1% 100% no-repeat,
        linear-gradient(to top left, transparent calc(50% - .7px), var(--dfk-paper-line) 50%, transparent calc(50% + .7px)) right / 50.1% 100% no-repeat;
}
.dfk-postmark { position: absolute; right: 24%; top: 8%; width: 26%; height: auto; color: var(--df-brand-cyan); opacity: .8; }
.dfk-stamp {
    position: absolute; right: 7%; top: 10%; width: 19%; aspect-ratio: .84; display: grid; place-items: center;
    background: color-mix(in srgb, var(--df-brand-cyan) 10%, var(--dfk-paper));
    -webkit-mask: radial-gradient(circle, black 62%, transparent 64%) 0 0 / 6px 6px repeat-x, radial-gradient(circle, black 62%, transparent 64%) 0 100% / 6px 6px repeat-x, radial-gradient(circle, black 62%, transparent 64%) 0 0 / 6px 6px repeat-y, radial-gradient(circle, black 62%, transparent 64%) 100% 0 / 6px 6px repeat-y, linear-gradient(black, black) center / calc(100% - 5px) calc(100% - 5px) no-repeat;
    mask: radial-gradient(circle, black 62%, transparent 64%) 0 0 / 6px 6px repeat-x, radial-gradient(circle, black 62%, transparent 64%) 0 100% / 6px 6px repeat-x, radial-gradient(circle, black 62%, transparent 64%) 0 0 / 6px 6px repeat-y, radial-gradient(circle, black 62%, transparent 64%) 100% 0 / 6px 6px repeat-y, linear-gradient(black, black) center / calc(100% - 5px) calc(100% - 5px) no-repeat;
}
.dfk-stamp img { width: 60%; height: auto; }
.dfk-to { position: absolute; left: 9%; bottom: 12%; display: grid; gap: 1px; text-align: left; }
.dfk-to small { font: 600 9px var(--dfk-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dfk-paper-ink-3); }
.dfk-to b { font-weight: 800; letter-spacing: -.02em; font-size: clamp(15px, 1.35vw, 19px); line-height: 1; }

/* copy feedback (hero callout and the Copy buttons) */
.dfk-cpy { position: relative; overflow: hidden; }
.dfk-ic { position: relative; width: 18px; height: 18px; flex: none; display: inline-block; }
.dfk-ic svg { position: absolute; inset: 0; transition: transform .25s var(--dfk-ease), opacity .2s; }
.dfk-ic .dfk-i2 { opacity: 0; transform: scale(.3) rotate(-30deg); }
.dfk-cpy.is-done .dfk-i1 { opacity: 0; transform: scale(.3); }
.dfk-cpy.is-done .dfk-i2 { opacity: 1; transform: none; }
.dfk-cpy.is-done, .dfk-cpy.is-done:hover { background: var(--df-ok); color: var(--df-on-status); border-color: transparent; }
.dfk-cpy.is-done small { color: var(--df-on-status); opacity: .85; }
.dfk-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    background: var(--df-ink); color: var(--df-paper); padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
    max-width: calc(100vw - 32px); text-align: center; transition: opacity .2s, transform .25s var(--dfk-ease);
}
.dfk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── 2. The form + live preview ──────────────────────────────────── */
.dfk-panel {
    position: relative; border-radius: 28px; padding: clamp(18px, 2.8vw, 34px);
    background-color: var(--df-panel);
    background-image: linear-gradient(var(--dfk-grid) 1px, transparent 1px), linear-gradient(90deg, var(--dfk-grid) 1px, transparent 1px);
    background-size: 22px 22px;
}
/* the form section is open on the page ground (no card); only the
   preview is a paper letter with a soft shadow */
.dfk-open { padding: clamp(20px, 3.4vw, 44px) clamp(0px, 1.2vw, 12px); }
.dfk-fmw { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 48px); align-items: start; }
.dfk-fmw .dfk-disp { font-size: var(--df-type-h2); margin: 0 0 18px; }
.dfk-note { margin: 0 0 16px; }
.dfk-note[hidden] { display: none; }
.dfk-form .dff { margin-bottom: 14px; }
.dfk-foot { display: flex; justify-content: flex-end; }
.dfk-nope { animation: dfk-nope .35s; }
@keyframes dfk-nope { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.dfk-pv { display: grid; gap: 12px; min-width: 0; align-content: start; }
/* Tassy 2026-10-08: the right column (I'm… tiles + live letter) sits in the
   airy grid card; the form on the left stays open on the page. */
.dfk-pv {
    border-radius: 28px; padding: clamp(18px, 2.4vw, 30px);
    background-color: var(--df-panel);
    background-image: linear-gradient(var(--dfk-grid) 1px, transparent 1px), linear-gradient(90deg, var(--dfk-grid) 1px, transparent 1px);
    background-size: 22px 22px;
}
@media (max-width: 560px) { .dfk-pv { border-radius: 22px; padding: 16px; } }
.dfk-who { margin: 0 0 4px; }
.dfk-who[hidden], .dfk-preview[hidden] { display: none; }
.dfk-route a { color: var(--df-accent); font-weight: 650; text-decoration: none; }
.dfk-route a:hover { text-decoration: underline; }
.dfk-mslot { display: none; }
.dfk-preview { display: grid; gap: 12px; }
.dfk-pvcard { position: relative; overflow: hidden; background: var(--dfk-card); border-radius: 6px; padding: 22px 24px; transform: rotate(.6deg); box-shadow: 0 1px 2px color-mix(in srgb, var(--df-ink) 6%, transparent), 0 22px 44px -26px color-mix(in srgb, var(--df-ink) 35%, transparent); }
.dfk-r { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--df-line); font-size: 15px; align-items: baseline; }
.dfk-r > span:first-child { font: 600 10.5px var(--dfk-mono); color: var(--df-ink-3); text-transform: uppercase; letter-spacing: .08em; }
.dfk-r b { overflow-wrap: anywhere; font-weight: 650; color: var(--df-ink); }
.dfk-r b span { color: var(--df-ink-3); font-weight: 500; }
.dfk-e { color: var(--df-ink-3); font-weight: 500; font-style: italic; }
.dfk-pvbody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.55; padding: 12px 0 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; min-height: 4.8em; color: var(--df-ink); }
.dfk-pvfoot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 500 12px var(--dfk-mono); color: var(--df-ink-3); border-top: 1px solid var(--df-line); padding-top: 10px; }
.dfk-pvs { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--df-ink-2); line-height: 1.4; margin: 0; }
.dfk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--df-foot-closed); flex: none; margin-top: 6px; }
.dfk-pvs.is-ok { color: var(--df-ok); font-weight: 650; }
.dfk-pvs.is-ok .dfk-dot { background: var(--df-achieve-fill); }
.dfk-flash { animation: dfk-flash .5s var(--dfk-ease); }
@keyframes dfk-flash { 30% { background: color-mix(in srgb, var(--df-achieve-fill) 22%, transparent); } }

/* ── 3. Other ways to reach us ───────────────────────────────────── */
.dfk-ways { display: grid; gap: clamp(22px, 3.4vw, 40px); padding: clamp(24px, 3.8vw, 48px); border-radius: 32px; }
.dfk-ways .dfk-disp { font-size: var(--df-type-h2); text-align: center; }
.dfk-wgrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); max-width: 1080px; margin: 0 auto; width: 100%; align-items: start; }
.dfk-stack { display: grid; gap: clamp(14px, 2vw, 22px); min-width: 0; }
.dfk-follow { gap: 10px; }
.dfk-follow > .dfk-eyebrow { padding: 0 4px; }
.dfk-co {
    background: var(--dfk-card); color: var(--df-ink); border-radius: 22px; padding: clamp(18px, 2.2vw, 26px);
    display: grid; gap: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--df-ink) 6%, transparent);
    transform: rotate(var(--dfk-r, 0deg)); transition: transform .25s var(--dfk-ease);
}
.dfk-co:hover, .dfk-co:focus-within { transform: rotate(0deg) translateY(-4px); }
.dfk-co-phone { margin: 0 6% 0 10%; }
.dfk-big { font-weight: 800; letter-spacing: -.04em; line-height: 1; text-decoration: none; font-size: clamp(1.6rem, 3.4vw, 3rem); overflow-wrap: anywhere; color: var(--df-ink); transition: color .2s; font-variant-numeric: tabular-nums; }
.dfk-big:hover { color: var(--df-accent); }
.dfk-soc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dfk-soc li { transform: rotate(var(--dfk-r, 0deg)); transition: transform .22s var(--dfk-ease); min-width: 0; }
.dfk-soc li:hover, .dfk-soc li:focus-within { transform: rotate(0deg) translateY(-3px); }
.dfk-soc a { display: flex; align-items: center; gap: 12px; height: 100%; background: var(--dfk-card); border-radius: 18px; padding: 12px 14px; text-decoration: none; color: var(--df-ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--df-ink) 6%, transparent); min-width: 0; }
.dfk-soc a:hover { color: var(--df-ink); }
.dfk-lg { width: 28px; height: 28px; flex: none; color: var(--df-ink); }
.dfk-nm { flex: 1; min-width: 0; line-height: 1.25; }
.dfk-nm b { display: block; font-size: 15.5px; }
.dfk-nm small { display: block; color: var(--df-ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.dfk-ext { flex: none; color: var(--df-ink-3); transition: transform .22s var(--dfk-ease), color .2s; }
.dfk-soc a:hover .dfk-ext, .dfk-soc a:focus-visible .dfk-ext { transform: translate(3px, -3px); color: var(--df-accent); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .dfk-fmw, .dfk-wgrid { grid-template-columns: minmax(0, 1fr); }
    .dfk-mslot { display: block; margin-bottom: 12px; }
}
/* stacked hero: text on top, the globe below, cropped */
@media (max-width: 760px) {
    .dfk-hero { display: block; min-height: 0; padding-bottom: 0; }
    .dfk-copy { width: auto; }
    .dfk-stage { position: relative; inset: auto; height: clamp(250px, 40vh, 360px); margin: 8px calc(-1 * clamp(28px, 4.4vw, 60px)) 0; overflow: hidden; }
    .dfk-dest { width: 128px; margin: -37px 0 0 -64px; }
}
@media (max-width: 560px) {
    .dfk-wrap { padding: 0 16px; }
    .dfk-sec { padding: 10px 0; }
    .dfk-hero, .dfk-ways { border-radius: 24px; padding: 20px 16px; }
    .dfk-hero { padding-bottom: 0; }
    .dfk-stage { margin: 4px -16px 0; }
    .dfk-acts { gap: 12px; }
    .dfk-send { padding: 12px 20px; font-size: 15px; }
    .dfk-panel { border-radius: 22px; padding: 16px; }
    .dfk-open { padding: 14px 0 6px; }
    .dfk-fmw { gap: 12px; }
    .dfk-fmw .dfk-disp { margin-bottom: 10px; }
    .dfk-form .dff { margin-bottom: 8px; }
    .dfk-form .dff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
    /* Names share a row; phone and subject each take the full width (side by
       side, a half-width select read "Select a subjec"). */
    .dfk-form .dff-grid > .dff:nth-child(n+3), .dfk-form .dff-grid > .wide { grid-column: 1 / -1; }
    .dfk-form .dff-lab { margin-bottom: 4px; }
    .dfk-foot { margin-top: -2px; }
    .dfk-form textarea.dff-in { height: 72px; min-height: 72px; }
    .dfk-who .dff-tile span { padding: 7px 10px; font-size: 13.5px; gap: 6px; border-radius: 12px; }
    .dfk-who .dff-tile span::before { width: 12px; height: 12px; margin-top: 3px; }
    .dfk-who .dff-tiles { gap: 5px; }
    .dfk-pvcard { padding: 12px 14px; border-radius: 18px; }
    .dfk-r { padding: 5px 0; font-size: 14px; grid-template-columns: 44px minmax(0, 1fr); }
    .dfk-r-to, .dfk-pvfoot, .dfk-pvbody, .dfk-preview > .dfk-eyebrow { display: none; }
    .dfk-pvcard .dfk-r:nth-child(3) { border-bottom: 0; }
    .dfk-pvs { font-size: 13px; }
    .dfk-co { --dfk-r: 0deg; padding: 16px; gap: 10px; }
    .dfk-co-phone { margin: 0; }
    .dfk-big { font-size: 1.65rem; }
    .dfk-soc { gap: 8px; }
    .dfk-soc li { --dfk-r: 0deg; }
    .dfk-soc a { padding: 10px; gap: 9px; }
    .dfk-lg { width: 24px; height: 24px; }
    .dfk-nm b { font-size: 14px; } .dfk-nm small { font-size: 11.5px; }
    .dfk-ext { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dfk *, .dfk *::before, .dfk *::after { animation: none !important; transition: none !important; }
}