/* ============================================================
   NEST BATTERSEA | 10 Talk to us, the closing scene
   One rounded card with the official dusk view of the tower on
   the river as its background. Left, over the image: the large
   headline, a short line and four small contact blocks. Right: a
   liquid glass form card over the same view. On phones the card
   stacks: the image with the text on top, the glass form below.
   Motion: the shared GSAP reveals and a gentle parallax on the
   image (js/motion.js); the section reads in full without them.
   ============================================================ */
.talk{padding:0 0 var(--m)}
.tk{margin:0 var(--m)}
.tk-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,480px);gap:clamp(24px,4vw,80px);min-height:max(760px,calc(100svh - var(--hb) - 4 * var(--m)));padding:clamp(14px,1.1vw,18px);background:#0c111b}

/* ---------- the image side ---------- */
.tk-side{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-width:0;padding:clamp(34px,4vw,64px) 0 clamp(22px,2.6vw,42px) clamp(18px,2.6vw,46px)}
.tk-media,.tk-shade{position:absolute;inset:0;z-index:-1;margin:0;pointer-events:none}
.tk-media{overflow:hidden;background:#17203a}
.tk-media .px img{object-position:50% 50%}
.tk-shade{background:
  linear-gradient(90deg,rgba(7,10,17,.78) 0%,rgba(7,10,17,.5) 34%,rgba(7,10,17,.12) 56%,rgba(7,10,17,.18) 100%),
  linear-gradient(0deg,rgba(7,10,17,.72) 0%,rgba(7,10,17,0) 38%),
  linear-gradient(180deg,rgba(7,10,17,.4) 0%,rgba(7,10,17,0) 30%)}

.tk-lead{display:grid;gap:clamp(18px,2.4vh,28px);justify-items:start;margin-top:clamp(56px,11vh,120px)}
.tk-h{position:relative;display:inline-block;font-size:clamp(60px,6.6vw,124px);line-height:.92;letter-spacing:-.062em;font-weight:600;text-shadow:0 2px 40px rgba(5,8,14,.35)}
.tk-h .ln+.ln i{padding-right:.06em;background:linear-gradient(96deg,var(--paper) 8%,var(--blue-hi) 46%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.tk-h .sticker{left:auto;right:-.2em;top:.45em;font-size:clamp(12px,.9vw,14px);letter-spacing:.04em;text-shadow:none}
.tk-lede{font-size:clamp(15px,1.06vw,17px);line-height:1.7;color:rgba(243,239,232,.84);max-width:430px}

.tk-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px clamp(24px,3vw,48px);max-width:560px;margin-bottom:clamp(40px,8vh,90px)}
.tk-info div{display:grid;gap:7px;align-content:start;padding-top:14px;border-top:1px solid rgba(243,239,232,.2)}
.tk-info dt{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hi)}
.tk-info dd{font-size:14px;line-height:1.55;color:var(--paper);overflow-wrap:anywhere;text-wrap:pretty}
.tk-info a{color:inherit;text-decoration:underline;text-decoration-color:rgba(146,183,202,.45);text-underline-offset:4px;transition:color var(--t1) var(--ease),text-decoration-color var(--t1) var(--ease)}
.tk-info a:hover{color:var(--blue-hi);text-decoration-color:var(--blue-hi)}
.tk-info a:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px;border-radius:4px}

/* ---------- the form card: liquid glass over the dusk view ----------
   The photo behind is blurred and saturated through the panel; a smoky
   tint keeps the light text legible, a gradient rim and inner light
   give it an edge, and a soft specular sheen follows the pointer
   (--mx, --my, --sh set by js/talk.js; still when motion is reduced). */
@property --mx{syntax:'<percentage>';inherits:false;initial-value:18%}
@property --my{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --sh{syntax:'<number>';inherits:false;initial-value:.6}
.tk-panel{
  --mx:18%;--my:0%;--sh:.6;
  --g-line:rgba(255,255,255,.17);--g-fill:rgba(255,255,255,.065);--g-text:rgba(243,239,232,.84);--g-dim:rgba(243,239,232,.7);
  --g-bad:#ffb09e;--g-ring:rgba(201,226,239,.3);
  position:relative;isolation:isolate;display:grid;align-self:stretch;align-content:center;border-radius:calc(var(--R) - 10px);padding:clamp(28px,2.4vw,40px) clamp(24px,2.2vw,36px);color:var(--paper);color-scheme:dark;
  background:
    radial-gradient(560px circle at var(--mx) var(--my),rgba(255,255,255,calc(.13 * var(--sh))),rgba(255,255,255,0) 62%),
    linear-gradient(158deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.025) 34%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,rgba(13,19,34,.5) 0%,rgba(10,14,25,.56) 100%);
  -webkit-backdrop-filter:blur(32px) saturate(1.6) brightness(.86);backdrop-filter:blur(32px) saturate(1.6) brightness(.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 44px rgba(255,255,255,.035),0 44px 100px -28px rgba(0,0,0,.62),0 14px 34px -14px rgba(0,0,0,.4);
  transition:--mx .7s var(--ease),--my .7s var(--ease),--sh .7s var(--ease)}
/* the rim: a hairline that catches the light top left and fades round the card */
.tk-panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(142deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.2) 18%,rgba(255,255,255,.06) 46%,rgba(255,255,255,.05) 70%,rgba(201,226,239,.28) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* a faint caustic along the lower edge, as light pooling in thick glass */
.tk-panel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 34% at 78% 104%,rgba(201,226,239,.1),rgba(201,226,239,0) 70%),radial-gradient(60% 40% at 0% 0%,rgba(255,255,255,.06),rgba(255,255,255,0) 70%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tk-panel{background:linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,0) 50%),#141a27}
}
.tk-ph{display:grid;gap:6px;margin-bottom:24px}
.tk-ph h3{font-size:clamp(24px,1.75vw,30px);line-height:1.05;letter-spacing:-.04em;font-weight:600}
.tk-ph p{font-size:13.5px;line-height:1.5;color:var(--g-dim)}
.tk-form{display:grid}
.tk-form[hidden]{display:none}
.tk-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px}
.tk-f{display:grid;gap:6px;min-width:0;align-content:start}
.tk-f label,.tk-topics legend{font-size:12px;font-weight:400;line-height:1.3;color:var(--g-text)}
.tk-f label small{font-size:.92em;color:rgba(243,239,232,.62);margin-left:3px}
.tk-f input,.tk-f textarea{display:block;width:100%;height:46px;padding:0 18px;border-radius:999px;background:rgba(7,11,20,.26);border:1px solid var(--g-line);outline:none;font:inherit;font-size:14px;font-weight:300;color:var(--paper);caret-color:var(--blue-hi);-webkit-appearance:none;appearance:none;box-shadow:inset 0 2px 6px -2px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.07);transition:border-color var(--t2) var(--ease),background-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.tk-f textarea{height:auto;min-height:92px;padding:13px 18px;border-radius:22px;resize:none;line-height:1.5;max-height:220px}
.tk-f input::placeholder,.tk-f textarea::placeholder{color:rgba(243,239,232,.62)}
.tk-f input:hover,.tk-f textarea:hover{border-color:rgba(255,255,255,.32);background-color:rgba(7,11,20,.2)}
.tk-f input:focus,.tk-f textarea:focus{border-color:rgba(201,226,239,.8);background-color:rgba(7,11,20,.36);box-shadow:inset 0 2px 6px -2px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.07),0 0 0 4px var(--g-ring)}
.tk-f input:-webkit-autofill{-webkit-text-fill-color:var(--paper);-webkit-box-shadow:0 0 0 40px #232a39 inset;transition:background-color 9999s}
.tk-f.bad input{border-color:rgba(255,150,128,.85);background-color:rgba(70,16,10,.3)}
.tk-f.bad input:focus{box-shadow:0 0 0 4px rgba(255,140,115,.24)}
.tk-f.bad label{color:var(--g-bad)}
.tk-f.ok input{border-color:rgba(146,183,202,.6)}
.tk-err{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;line-height:1.4;color:var(--g-bad);padding:0 6px}
.tk-err::before{content:"";flex:none;width:5px;height:5px;margin-top:calc(.7em - 2.5px);border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.tk-err:empty{display:none}
.tk-f.msg{margin-top:18px}

.tk-topics{border:0;min-width:0;margin:18px 0 0;padding:0}
.tk-topics legend{padding:0;margin-bottom:8px}
.tk-chips{display:flex;flex-wrap:wrap;gap:7px}
.tk-chip{position:relative;display:inline-flex;cursor:pointer}
.tk-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tk-chip span{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--g-line);background:var(--g-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);font-size:12.5px;font-weight:400;color:var(--paper);white-space:nowrap;transition:background-color var(--t2) var(--ease),border-color var(--t2) var(--ease),color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.tk-chip:hover span{border-color:rgba(255,255,255,.38);background-color:rgba(255,255,255,.11)}
.tk-chip input:checked+span{background:var(--paper);border-color:var(--paper);color:var(--ink);font-weight:500;box-shadow:inset 0 1px 0 #fff,0 6px 18px -6px rgba(0,0,0,.45)}
.tk-chip input:focus-visible+span{outline:2px solid var(--blue-hi);outline-offset:3px}

.tk-opt{position:relative;display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12.5px;line-height:1.4;color:var(--g-text);cursor:pointer;width:max-content;max-width:100%}
.tk-opt input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
.tk-box{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.4);background:var(--g-fill);transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.tk-opt:hover .tk-box{border-color:rgba(255,255,255,.62)}
.tk-box svg{width:12px;height:12px;color:var(--ink);opacity:0;transform:scale(.6);transition:opacity var(--t1) var(--ease),transform .3s var(--spring)}
.tk-opt input:checked+.tk-box{background:var(--paper);border-color:var(--paper)}
.tk-opt input:checked+.tk-box svg{opacity:1;transform:none}
.tk-opt input:focus-visible+.tk-box{outline:2px solid var(--blue-hi);outline-offset:3px}

.tk-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:20px;border-radius:999px;background:var(--paper) linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 58%);color:var(--ink);font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(22,25,34,.08),0 12px 30px -10px rgba(0,0,0,.55);transition:background-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease),transform .2s var(--ease)}
.tk-submit svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.tk-submit:hover{background-color:#d9eaf3;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(22,25,34,.08),0 16px 36px -10px rgba(0,0,0,.6),0 0 0 4px rgba(201,226,239,.14)}
.tk-submit:hover svg{transform:translateX(4px)}
.tk-submit:active{transform:scale(.99)}
.tk-submit:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.tk-note{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--g-dim);text-align:center;text-wrap:balance}
.tk-panel.shake{animation:tkshake .45s var(--ease)}
@keyframes tkshake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}

/* success */
.tk-done{display:grid;gap:16px;justify-items:start;align-content:center;outline:none;animation:tkin .8s var(--ease) both}
.tk-done[hidden]{display:none}
@keyframes tkin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tk-tick{width:72px;height:72px;color:var(--blue-hi);filter:drop-shadow(0 0 14px rgba(146,183,202,.45))}
.tk-tick circle{stroke-dasharray:190;stroke-dashoffset:190;animation:tkdraw 1s var(--ease) .1s forwards}
.tk-tick path{stroke-dasharray:44;stroke-dashoffset:44;animation:tkdraw .6s var(--ease) .75s forwards}
@keyframes tkdraw{to{stroke-dashoffset:0}}
.tk-done h3{font-size:clamp(32px,2.6vw,44px);line-height:1;letter-spacing:-.05em;font-weight:600}
.tk-done-t{font-size:14.5px;line-height:1.7;color:var(--g-text);max-width:380px}
.tk-sum{display:flex;flex-wrap:wrap;gap:6px}
.tk-sum:empty{display:none}
.tk-sum span{height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;border:1px solid rgba(201,226,239,.28);background:rgba(201,226,239,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:var(--paper);font-size:12px}
.tk-done-acts{display:grid;gap:6px;justify-items:center;width:100%;margin-top:6px}
.tk-done-acts .tk-submit{margin-top:0}
.tk-textbtn{height:44px;padding:0 4px;font-size:13.5px;font-weight:500;color:var(--paper);text-decoration:underline;text-decoration-color:rgba(146,183,202,.7);text-underline-offset:5px;transition:color var(--t1) var(--ease)}
.tk-textbtn:hover{color:var(--blue-hi)}
.tk-textbtn:focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px;border-radius:6px}

/* ---------- smaller laptops ---------- */
@media (max-width:1180px) and (min-width:861px){
  .tk-card{grid-template-columns:minmax(0,1fr) minmax(380px,420px)}
  .tk-h{font-size:clamp(56px,7vw,96px)}
}

/* ---------- phones and portrait tablets: the card stacks ---------- */
@media (max-width:860px),(max-width:1100px) and (orientation:portrait){
  .tk-card{grid-template-columns:minmax(0,1fr);gap:8px;min-height:0;padding:0 8px 8px}
  .tk-side{position:relative;isolation:isolate;margin:0 -8px;padding:72px var(--pad) 86px;gap:44px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 76px),rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 calc(100% - 76px),rgba(0,0,0,0))}
  .tk-media .px img{object-position:56% 50%}
  .tk-shade{background:
    linear-gradient(0deg,rgba(7,10,17,.86) 0%,rgba(7,10,17,.5) 42%,rgba(7,10,17,.3) 70%,rgba(7,10,17,.5) 100%),
    linear-gradient(90deg,rgba(7,10,17,.45) 0%,rgba(7,10,17,0) 80%)}
  .tk-h{font-size:clamp(54px,15vw,100px)}
  .tk-h .sticker{right:auto;left:calc(100% - 1.8em);top:-1.6em}
  .tk-lead{margin-top:28px}
  .tk-info{margin-bottom:0}
  .tk-info{gap:22px 18px}
  .tk-info dd{font-size:13.5px}
  .tk-panel{margin-top:-56px;padding:28px 20px 24px;border-radius:calc(var(--R) - 6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 36px rgba(255,255,255,.03),0 24px 60px -24px rgba(0,0,0,.6)}
  /* the dusk view carries on under the form, so the glass has light to bend */
  .tk-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,10,17,.72) 0%,rgba(7,10,17,.3) 45%,rgba(7,10,17,.45) 100%),url(../assets/site/views/river-night-1280.jpg) 56% 78%/cover no-repeat #0c111b;background-image:linear-gradient(180deg,rgba(7,10,17,.72) 0%,rgba(7,10,17,.3) 45%,rgba(7,10,17,.45) 100%),image-set(url(../assets/site/views/river-night-1280.avif) type("image/avif"),url(../assets/site/views/river-night-1280.webp) type("image/webp"),url(../assets/site/views/river-night-1280.jpg) type("image/jpeg"))}
}
@media (max-width:520px){
  .tk-f.sm-full{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .tk-tick circle,.tk-tick path{stroke-dashoffset:0;animation:none}
  .tk-done{animation:none}
  .tk-panel{transition:none}
}

/* the form sits further in from the right edge */
@media (min-width:1181px){.tk-panel{margin-right:clamp(32px,5vw,96px)}}