/* Deft Digital Media — Contact / free preview page (Daniel, October 24, 2026). pages/contact.html. Sits on the service page
   template (service.css: hero, steps line, obsidian chapter, FAQ) and Home's tokens. Prefix ddm-ct-. Motion: scripts/contact.js.
   Sunflower is a fill on light (buttons, highlight band, chat bubbles) and text only on obsidian. */

/* ---------- Hero: the preview chat ---------- */
.ddm-x .ddm-ct-hero .ddm-se-head .ddm-fine { margin-top:16px; }
.ddm-x .ddm-ct-chat { position:relative; justify-self:end; width:min(100%,440px); padding:0 0 18px; border-radius:28px; background:rgb(255 255 255/.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.07), 0 40px 80px -42px rgb(0 0 0/.5); rotate:1.2deg; }
.ddm-x .ddm-ct-chat-top { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.ddm-x .ddm-ct-chat-face { position:relative; flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden; background:#D9D9D6; }
.ddm-x .ddm-ct-chat-face img { width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-ct-chat-top > span:last-child { display:grid; line-height:1.25; }
.ddm-x .ddm-ct-chat-top b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-ct-chat-top small { font:500 .62rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-ct-msgs { display:flex; flex-direction:column; gap:10px; margin:0; padding:18px 18px 0; list-style:none; }
.ddm-x .ddm-ct-msg { max-width:82%; padding:11px 15px; border-radius:18px 18px 18px 6px; background:#fff; font-size:.95rem; line-height:1.4;
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 6px 14px -10px rgb(0 0 0/.35); }
.ddm-x .ddm-ct-msg.is-you { align-self:flex-end; border-radius:18px 18px 6px 18px; background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); }
.ddm-x .ddm-ct-msg.is-photos { display:grid; grid-template-columns:repeat(3,58px); gap:6px; padding:6px; }
.ddm-x .ddm-ct-msg.is-photos span { display:block; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:#D9D9D6; }
.ddm-x .ddm-ct-msg.is-photos img { width:100%; height:100%; object-fit:cover; }
.ddm-x .ddm-ct-day { align-self:center; margin:4px 0; font:500 .62rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-ct-msg.is-preview { max-width:92%; padding:8px; border-radius:20px 20px 20px 8px; }
.ddm-x .ddm-ct-shot { display:block; border-radius:14px; overflow:hidden; background:#fff; }
.ddm-x .ddm-ct-shot-bar { display:flex; gap:5px; padding:8px 10px; background:#f6f5f2; border-bottom:1px solid var(--line); }
.ddm-x .ddm-ct-shot-bar i { width:7px; height:7px; border-radius:50%; background:rgb(0 0 0/.14); }
.ddm-x .ddm-ct-shot img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ddm-x .ddm-ct-shot-cap { display:grid; gap:2px; padding:10px 6px 4px; }
.ddm-x .ddm-ct-shot-cap b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-ct-shot-cap small { font:500 .62rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
/* Typing dots shown before each of Camila's messages while the chat plays */
.ddm-x .ddm-ct-typing { align-self:flex-start; display:flex; gap:4px; padding:13px 15px; border-radius:18px 18px 18px 6px; background:#fff; box-shadow:inset 0 0 0 1px rgb(17 17 17/.06); }
.ddm-x .ddm-ct-typing i { width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:ddm-ct-dot 1s ease-in-out infinite; }
.ddm-x .ddm-ct-typing i:nth-child(2) { animation-delay:.15s; } .ddm-x .ddm-ct-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes ddm-ct-dot { 0%,60%,100% { opacity:.35; translate:0 0; } 30% { opacity:1; translate:0 -3px; } }
/* While playing (contact.js adds .is-armed, then .is-in per message) */
.ddm-x .ddm-ct-chat.is-armed :is(.ddm-ct-msg,.ddm-ct-day) { opacity:0; translate:0 12px; scale:.97; transform-origin:100% 100%; }
.ddm-x .ddm-ct-chat.is-armed .ddm-ct-msg:not(.is-you) { transform-origin:0 100%; }
.ddm-x .ddm-ct-chat.is-armed :is(.ddm-ct-msg,.ddm-ct-day).is-in { opacity:1; translate:0 0; scale:1; transition:opacity .45s var(--ease), translate .6s var(--ease), scale .6s var(--ease); }

/* ---------- Talk to us: the two people, then email ---------- */
.ddm-x .ddm-ct-reach { padding-top:clamp(56px,7vw,110px); }
.ddm-x .ddm-ct-people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.ddm-x .ddm-ct-person { display:grid; grid-template-columns:clamp(110px,10vw,140px) minmax(0,1fr); gap:18px clamp(18px,2vw,28px); align-items:start;
  padding:clamp(18px,2vw,26px); border-radius:var(--radius); background:var(--paper); box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 24px 50px -36px rgb(0 0 0/.45); }
.ddm-x .ddm-ct-face { position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:16px; background:#D9D9D6; box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 14px 28px -18px rgb(0 0 0/.45); }
.ddm-x .ddm-ct-face img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 14%; }
.ddm-x .ddm-ct-who { align-self:center; }
.ddm-x .ddm-ct-who h3 { font-size:clamp(1.3rem,1.9vw,1.6rem); margin-bottom:6px; }
.ddm-x .ddm-ct-who > p { margin:0; color:var(--ink-2); }
.ddm-x .ddm-ct-lang { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px !important; }
.ddm-x .ddm-ct-lang span { padding:5px 10px; border-radius:999px; background:rgb(17 17 17/.05); font:500 .62rem/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.ddm-x .ddm-ct-ways { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap:8px; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-ct-ways .ddm-btn { width:100%; height:100%; padding:0 16px; }
.ddm-x .ddm-ct-way { display:flex; align-items:center; gap:12px; height:100%; min-height:54px; padding:8px 14px; border-radius:14px; background:#fff;
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.08), 0 6px 14px -12px rgb(0 0 0/.3); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.ddm-x .ddm-ct-way:is(:hover,:focus-visible) { transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgb(17 17 17/.14), 0 14px 24px -14px rgb(0 0 0/.35); }
.ddm-x .ddm-ct-way.is-save { background:transparent; box-shadow:inset 0 0 0 1px rgb(17 17 17/.14); }
.ddm-x .ddm-ct-way.is-save:is(:hover,:focus-visible) { background:#fff; }
.ddm-x .ddm-ct-way svg, .ddm-x .ddm-ct-btn-ic { flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.ddm-x .ddm-ct-way span { display:grid; min-width:0; font-size:.95rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-ct-way small { font:500 .6rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-ct-mailrow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; margin-top:clamp(14px,1.6vw,22px); padding:clamp(14px,1.6vw,20px);
  border-radius:var(--radius); box-shadow:inset 0 0 0 1px var(--line); }
.ddm-x .ddm-ct-mailrow .ddm-ct-way { height:auto; min-width:min(100%,340px); }
.ddm-x .ddm-ct-mailrow p { margin:0 8px 0 0; color:var(--ink-2); }

/* ---------- How it works: what to send, under the shared steps ---------- */
.ddm-x .ddm-ct-how { padding-top:clamp(24px,3vw,48px); }
.ddm-x .ddm-ct-send { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:clamp(40px,5vw,64px); padding-top:clamp(20px,2.4vw,28px); border-top:1px solid var(--line); }
.ddm-x .ddm-ct-send-h { margin:0; font:500 .72rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-ct-send ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-ct-send li { padding:8px 14px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgb(17 17 17/.08); font-size:.92rem; font-weight:500; }
.ddm-x .ddm-ct-send-note { margin:0 0 0 auto; color:var(--ink-2); }

/* ---------- The short form ---------- */
.ddm-x .ddm-ct-form-sec { padding-top:clamp(24px,3vw,48px); }
.ddm-x .ddm-ct-form-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); align-items:start; }
.ddm-x .ddm-ct-form-grid .ddm-head { position:sticky; top:calc(var(--nav-h) + 32px); margin:0; }
.ddm-x .ddm-ct-form { display:grid; gap:18px; padding:clamp(20px,2.6vw,36px); border-radius:24px; background:var(--paper);
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 30px 60px -40px rgb(0 0 0/.45); }
.ddm-x .ddm-ct-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ddm-x .ddm-ct-field { display:grid; gap:8px; }
.ddm-x .ddm-ct-field > span, .ddm-x .ddm-ct-chips legend { font:500 .66rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.ddm-x .ddm-ct-form em { font-style:normal; color:var(--ink-3); text-transform:none; letter-spacing:0; font-family:var(--sans); margin-left:4px; }
.ddm-x .ddm-ct-field :is(input,textarea) { width:100%; min-height:50px; padding:12px 14px; border:0; border-radius:12px; background:#fff; color:var(--ink); font:400 1rem/1.4 var(--sans);
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.12); transition:box-shadow .25s var(--ease); }
.ddm-x .ddm-ct-field textarea { resize:vertical; min-height:96px; }
.ddm-x .ddm-ct-field :is(input,textarea)::placeholder { color:#A6A6A1; }
.ddm-x .ddm-ct-field :is(input,textarea):focus { outline:none; box-shadow:inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgb(59 91 255/.16); }
.ddm-x .ddm-ct-field.is-missing :is(input,textarea) { box-shadow:inset 0 0 0 1.5px #B42318; }
.ddm-x .ddm-ct-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; min-width:0; }
.ddm-x .ddm-ct-chips legend { float:left; width:100%; margin-bottom:8px; padding:0; }
.ddm-x .ddm-ct-chips label { position:relative; cursor:pointer; }
.ddm-x .ddm-ct-chips input { position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.ddm-x .ddm-ct-chips label > span { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border-radius:999px; background:#fff; font-size:.92rem; font-weight:500;
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.12); transition:background .25s var(--ease), box-shadow .25s var(--ease); }
.ddm-x .ddm-ct-chips small { font-size:.85rem; color:var(--ink-3); font-weight:500; }
.ddm-x .ddm-ct-chips label:hover > span { box-shadow:inset 0 0 0 1px rgb(17 17 17/.3); }
.ddm-x .ddm-ct-chips input:checked + span { background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); }
.ddm-x .ddm-ct-chips input:checked + span small { color:var(--ink); }
.ddm-x .ddm-ct-chips input:focus-visible + span { outline:2px solid var(--blue-ink); outline-offset:3px; }
.ddm-x .ddm-ct-send-btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.ddm-x .ddm-ct-status { min-height:1.4em; margin:0; color:var(--ink-2); font-size:.95rem; }
.ddm-x .ddm-ct-status.is-error { color:#B42318; }
.ddm-x .ddm-ct-form .ddm-fine { margin:0; }
.ddm-x .ddm-ct-form .ddm-fine a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
/* Honeypot (Oct 24): out of sight for people, bots fill it in and the Deft Core plugin drops their send. */
.ddm-x .ddm-ct-hp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- Prices (obsidian): three prices on one line, Care beneath ---------- */
.ddm-x .ddm-ct-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); margin:0; padding:0; list-style:none; }
.ddm-x .ddm-ct-tier { display:grid; gap:10px; align-content:start; padding:clamp(20px,2.2vw,28px); border-radius:22px; background:rgb(255 255 255/.035);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), 0 0 18px -4px rgb(255 255 255/.25), 0 30px 60px -40px #000; }
.ddm-x .ddm-ct-tier.is-lift { background:rgb(255 255 255/.06); }
.ddm-x .ddm-ct-tier-name { font:500 .72rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); }
.ddm-x .ddm-ct-tier b { font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; line-height:1; letter-spacing:-.05em; color:#fff; }
.ddm-x .ddm-ct-tier.is-lift b { color:var(--sun); }
.ddm-x .ddm-ct-tier-fit { color:var(--on-dark-2); font-size:.95rem; }
.ddm-x .ddm-ct-care { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 32px; margin-top:clamp(18px,2vw,26px); padding:18px 4px 0; border-top:1px solid var(--line-dark); }
.ddm-x .ddm-ct-care p { margin:0; color:var(--on-dark-2); max-width:64ch; }
.ddm-x .ddm-ct-care b { margin-right:8px; color:var(--sun); font-weight:600; }

/* ---------- Phones and tablets ---------- */
@media (max-width:960px) {
  .ddm-x .ddm-ct-chat { justify-self:start; rotate:0deg; }
  .ddm-x .ddm-ct-people { grid-template-columns:1fr; max-width:640px; }
  .ddm-x .ddm-ct-form-grid { grid-template-columns:1fr; }
  .ddm-x .ddm-ct-form-grid .ddm-head { position:static; }
  .ddm-x .ddm-ct-tiers { grid-template-columns:1fr; max-width:560px; }
}
@media (max-width:640px) {
  .ddm-x .ddm-ct-person { grid-template-columns:88px minmax(0,1fr); }
  .ddm-x .ddm-ct-ways { grid-template-columns:1fr; } /* one per line so the numbers never cut off */
  .ddm-x .ddm-ct-row { grid-template-columns:1fr; }
  .ddm-x .ddm-ct-send-note { margin-left:0; }
  .ddm-x .ddm-ct-send-btns .ddm-btn { flex:1 1 100%; }
  .ddm-x .ddm-ct-mailrow .ddm-ct-way { min-width:0; width:100%; }
}

/* ---------- Reduced motion, reduced transparency, forced colors ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-ct-chat.is-armed :is(.ddm-ct-msg,.ddm-ct-day) { opacity:1; translate:none; scale:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-ct-chat { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
}
@media (forced-colors:active) {
  .ddm-x :is(.ddm-ct-chat,.ddm-ct-person,.ddm-ct-way,.ddm-ct-form,.ddm-ct-tier,.ddm-ct-chips label > span) { border:1px solid CanvasText; }
}