/* ================================================================
   VALUECODERS CONTACT LITE — v33 · Wider Variant
   ================================================================
   DEPLOY CHECKLIST
   1. Inject window.VC_COUNTRY server-side
   2. CFG.contact.wa — real WhatsApp number
   3. CFG.api.endpoint — real endpoint
   4. CFG.urls.calendly — real Calendly URL
   5. Remove setTimeout simulation, uncomment fetch()
   6. Add GA4 / GTM snippet
   ================================================================ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
a,button,input,select,textarea,label,[role="radio"],[role="button"]{touch-action:manipulation}
img,svg{display:block}
button{font:inherit;cursor:pointer;background:none;border:none;padding:0}
  @font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../../v6.0/fonts/PlusJakartaSans-VariableFont_wght.woff2") format("woff2"),
      url("../../v6.0/fonts/PlusJakartaSans-VariableFont_wght.woff") format("woff"),
      url("../../v6.0/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

/* ── TOKENS ── */
:root{
  /* Brand */
  --navy:     #05164D;
  --navy-2:   #0d2260;
  --navy-3:   #1e3a8a;
  --amber:    #FFAD00;
  --amber-lo: rgba(255,173,0,.10);

  /* Page */
  --page:     #EFEDE8;
  --white:    #ffffff;

  /* Neutral — warm tint */
  --n50:  #F8F7F4;
  --n100: #EFECEA;
  --n200: #DDD9D4;
  --n300: #B5B0A8;
  --n400: #8A8580;

  /* Semantic */
  --ok:   #15803d;
  --err:  #dc2626;

  /* Font */
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Fluid type */
  --tx:  clamp(10px,.72vw,11px);
  --ts:  clamp(12px,.88vw,13px);
  --tb:  clamp(13px,.96vw,14px);
  --txl: clamp(24px,2vw,32px);

  /* Space */
  --gap:    clamp(16px,2vw,28px);

  /* Radii */
  --r:    12px;
  --rsm:  7px;
  --rpill:100px;

  /* Shadows */
  --sh:    0 2px 4px rgba(5,22,77,.05),0 10px 28px rgba(5,22,77,.09),0 28px 56px rgba(5,22,77,.07);
  --sh-sm: 0 1px 3px rgba(5,22,77,.07),0 4px 12px rgba(5,22,77,.08);
  --sh-focus: 0 0 0 3px rgba(255,173,0,.28);

  /* Easing */
  --ease:   cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── BASE ── */
body{
  font-family:var(--font);
  font-size:var(--tb);
  color:var(--navy);
  background-color:var(--page);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.032'/%3E%3C/svg%3E"),
    radial-gradient(circle,rgba(5,22,77,.055) 1.2px,transparent 1.2px);
  background-size:300px 300px,26px 26px;
  line-height:1.55;
  min-height:100vh;
}

/* ── ACCESSIBILITY ── */
.skip{
  position:absolute;top:-48px;left:16px;z-index:9999;
  background:var(--amber);color:var(--navy);
  padding:8px 16px;border-radius:var(--rsm);
  font-weight:700;font-size:13px;text-decoration:none;
  transition:top .15s;
}
.skip:focus{top:8px}
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── LAYOUT ── */
.layout{
  display:flex;
  align-items:flex-start;
  gap:var(--gap);
  max-width:1200px;
  margin:0 auto;
  padding:clamp(24px,3vw,48px) clamp(16px,2.5vw,32px);
  min-height:100vh;
}

/* ── SIDEBAR ── */
.sidebar{
  display:none;
  width:clamp(280px,22vw,320px);
  flex-shrink:0;
  align-self:flex-start;
  position:sticky;
  top:clamp(24px,3vw,48px);
}
@media(min-width:900px){
  .sidebar{display:flex;flex-direction:column;}
}

/* Dark navy card */
.sidebar{
  background:var(--navy-2);
  border-radius:var(--r);
  padding:clamp(22px,2.2vw,32px) clamp(20px,3vw,36px);
  color:#fff;
  flex-direction:column;
  gap:clamp(18px,1.6vw,24px);
  overflow:hidden;
}
/* Grain texture */
.sidebar::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size:200px 200px;
  pointer-events:none;z-index:0;opacity:.55;
}
.sidebar>*{position:relative;z-index:1}

/* ── SIDEBAR INTERNALS ── */
.t-logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;width:fit-content;
}
.t-logo-mark{
  width:34px;height:34px;background:var(--amber);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.t-logo-mark svg{width:19px;height:19px}
.t-logo-name{
  font-size:18px;font-weight:800;
  color:#fff;letter-spacing:-.3px;line-height:1;
}
.t-logo-name em{color:var(--amber);font-style:normal}

.t-hed{
  font-size:var(--txl);font-weight:800;
  line-height:1.15;letter-spacing:-.5px;
  color:#fff;
}
.t-sub{
  font-size:var(--ts);
  color:rgba(255,255,255,.58);
  line-height:1.62;
  margin-top:9px;
}

.t-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--rsm);overflow:hidden;
}
.t-stat{
  padding:13px 8px;text-align:center;
  border-right:1px solid rgba(255,255,255,.07);
}
.t-stat:last-child{border-right:none}
.t-stat-v{
  display:block;
  font-size:clamp(17px,1.4vw,21px);font-weight:800;
  color:var(--amber);line-height:1;margin-bottom:4px;
  letter-spacing:-.3px;
}
.t-stat-l{display:block;font-size:10px;color:rgba(255,255,255,.42);line-height:1.35}

.t-assurances{display:flex;flex-direction:column;gap:9px}
.t-assurance{
  display:flex;align-items:center;gap:10px;
  font-size:var(--ts);color:rgba(255,255,255,.76);
}
.t-assurance svg{
  width:14px;height:14px;stroke:var(--amber);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}

/* Marquee */
.marquee-wrap{display:flex;flex-direction:column;gap:0}
.marquee-label{
  font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.28);margin-bottom:8px;
}
.marquee-track{
  display:flex;flex-direction:column;gap:6px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.7) 15%,rgba(0,0,0,.7) 85%,transparent);
  mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.7) 15%,rgba(0,0,0,.7) 85%,transparent);
}
.mq-row{overflow:hidden}
.mq-inner{display:flex;width:max-content;gap:24px;padding:4px 0}
.mq-ltr{animation:mqLtr 28s linear infinite}
.mq-rtl{animation:mqRtl 32s linear infinite}
.mq-logo{
  font-size:10px;font-weight:800;letter-spacing:.12em;
  color:rgba(255,255,255,.32);white-space:nowrap;
  text-transform:uppercase;flex-shrink:0;
}
@keyframes mqLtr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqRtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.mq-inner{animation-play-state:paused}}

.t-certs{display:flex;gap:7px;flex-wrap:wrap}
.t-cert{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;
  color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--rpill);padding:4px 10px;
}
.t-cert svg{width:11px;height:11px;stroke:var(--amber);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.t-back{
  display:flex;align-items:center;gap:6px;
  font-size:var(--ts);color:rgba(255,255,255,.32);
  text-decoration:none;
  padding-top:clamp(14px,1.2vw,18px);
  border-top:1px solid rgba(255,255,255,.08);
  transition:color .14s;
}
.t-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-back:hover{color:rgba(255,255,255,.65)}

/* ── SCROLL COL ── */
.scroll-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}

/* ── FORM CARD ── */
.form-card{
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--sh);
  overflow:hidden;
}

/* ── MOBILE HERO (above card on mobile, hidden on desktop) ── */
.mobile-hero{
  text-align:center;
  padding:0 clamp(8px,2vw,20px) clamp(8px,1.5vw,16px);
}
.mobile-hero .logo{justify-content:center;padding-bottom:clamp(10px,1.5vw,16px)}
.mobile-hero .form-hed{
  font-size:clamp(20px,2vw,26px);font-weight:800;
  letter-spacing:-.4px;line-height:1.2;
  color:var(--navy);margin:0 0 6px;
}
.mobile-hero .form-sub{
  font-size:var(--ts);color:var(--n400);line-height:1.6;
}
@media(min-width:900px){.mobile-hero{display:none}}
.logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;width:fit-content;
  padding-bottom:clamp(16px,2vw,24px);
}
.logo-mark{
  width:28px;height:28px;
  background:var(--amber);
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-mark svg{width:16px;height:16px}
.logo-name{
  font-size:15px;font-weight:800;
  color:var(--navy);letter-spacing:-.25px;line-height:1;
}
.logo-name em{color:var(--amber);font-style:normal}

/* ── FORM BODY ── */
.form-body{
  padding:clamp(20px,2.5vw,28px) clamp(20px,3vw,36px) clamp(24px,3vw,36px);
  display:flex;flex-direction:column;gap:18px;
}

/* ── FIELD WRAPPER ── */
.fw{
  display:flex;flex-direction:column;gap:5px;
}
.fw label{
  font-size:13px;font-weight:600;
  color:var(--navy);
  display:flex;align-items:center;gap:5px;
  user-select:none;
}
.opt{
  font-size:11px;font-weight:500;
  color:var(--n400);
  background:var(--n100);
  border-radius:var(--rpill);
  padding:1px 7px;
}

/* ── FIELD ROW ── */
.field-row{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
@media(max-width:500px){
  .field-row{grid-template-columns:1fr}
}

/* ── INPUTS ── */
.fi{
  width:100%;padding:10px 13px;
  border:1.5px solid var(--n200);
  border-radius:var(--rsm);
  font-size:var(--tb);font-family:var(--font);
  color:var(--navy);background:var(--n50);
  transition:border-color .12s,box-shadow .12s,background .12s;
  appearance:none;line-height:1.4;
}
.fi::placeholder{color:var(--n300)}
.fi:hover{border-color:var(--n300)}
.fi:focus{
  border-color:var(--amber);
  box-shadow:var(--sh-focus);
  outline:none;background:#FFFCF5;
}
@media(max-width:768px){
  .fi:focus,.phone-num:focus{font-size:16px}
}
.fw.err .fi{border-color:var(--err)}
.fw.ok .fi{border-color:var(--ok)}

/* ── PHONE WRAP ── */
.phone-wrap{
  display:flex;
  border:1.5px solid var(--n200);
  border-radius:var(--rsm);
  overflow:hidden;
  background:var(--n50);
  transition:border-color .12s,box-shadow .12s,background .12s;
}
.phone-wrap:focus-within{
  border-color:var(--amber);
  box-shadow:var(--sh-focus);
  background:#FFFCF5;
}
.fw.err .phone-wrap{border-color:var(--err)}
.fw.ok .phone-wrap{border-color:var(--ok)}

.dial-btn{
  display:flex;align-items:center;gap:5px;
  padding:0 8px 0 10px;
  background:var(--n50);
  border-right:1px solid var(--n200);
  flex-shrink:0;min-width:80px;
  font-family:var(--font);font-size:var(--tb);
  color:var(--navy);white-space:nowrap;
  transition:background .12s;
}
.dial-btn:hover{background:var(--n100)}
.dial-btn:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}
.dial-flag{font-size:16px;line-height:1}
.dial-code{font-size:13px;font-weight:600;color:var(--navy-2)}
.dial-chev{
  width:12px;height:12px;stroke:var(--n300);fill:none;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  margin-left:1px;transition:transform .14s;
}
.dial-btn[aria-expanded="true"] .dial-chev{transform:rotate(180deg)}

.phone-num{
  flex:1;border:none;outline:none;
  padding:10px 12px;
  font-size:var(--tb);font-family:var(--font);
  color:var(--navy);background:transparent;min-width:0;
}
.phone-num::placeholder{color:var(--n300)}

/* ── TEXTAREA ── */
textarea.fi{
  resize:vertical;min-height:160px;max-height:280px;line-height:1.65;
}

/* ── BRIEF PROGRESS BAR ── */
.brief-bar{margin-top:8px}
.brief-track{
  height:3px;background:var(--n100);border-radius:2px;
  overflow:visible;margin-bottom:7px;position:relative;
}
.brief-fill{
  height:100%;width:0%;border-radius:2px;
  background:var(--err);
  transition:width .18s ease-out,background .35s ease;
  position:relative;
}
.brief-fill::after{
  content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:inherit;filter:blur(3px);opacity:0;transition:opacity .2s;
}
.brief-fill.has-text::after{opacity:.8}
.brief-fill.stage-1{background:#ef4444}
.brief-fill.stage-2{background:#f97316}
.brief-fill.stage-3{background:var(--amber)}
.brief-fill.stage-4{
  background:var(--ok);
  animation:briefUnlock .5s var(--spring) both;
}
@keyframes briefUnlock{
  0%  {transform:scaleX(1)}
  40% {transform:scaleX(1.015)}
  70% {transform:scaleX(.998)}
  100%{transform:scaleX(1)}
}
.brief-track.unlocked{animation:trackPulse .55s var(--spring) both}
@keyframes trackPulse{
  0%  {box-shadow:none}
  35% {box-shadow:0 0 0 3px rgba(21,128,61,.18)}
  100%{box-shadow:none}
}
.brief-meta{display:flex;justify-content:space-between;align-items:center}
.brief-hint{font-size:11.5px;color:var(--n400);display:flex;align-items:center;gap:4px;transition:color .3s}
.brief-hint.ok{color:var(--ok)}
.brief-check{color:var(--ok);display:none;font-size:11.5px}
.brief-check.show{display:inline}
.brief-count{font-size:11px;color:var(--n400);font-weight:600}
.brief-count.warn{color:var(--amber)}

/* ── SCOPE PILLS — 3 cols ── */
.scope-pills{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
@media(max-width:420px){
  .scope-pills{grid-template-columns:1fr}
}
.sp{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:14px;
  border:1.5px solid var(--n200);border-radius:var(--rsm);
  background:var(--n50);text-align:left;min-height:auto;
  transition:border-color .13s,background .13s,box-shadow .13s,transform .12s var(--spring);
  cursor:pointer;
}
.sp:hover{border-color:var(--n300);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.sp:focus-visible{outline:none;border-color:var(--amber);box-shadow:var(--sh-focus)}
.sp[aria-checked="true"]{
  border-color:var(--amber);
  background:var(--amber-lo);
  box-shadow:0 0 0 1px var(--amber);
}
.sp-icon{
  width:20px;height:20px;
  stroke:var(--navy);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  margin-bottom:8px;display:block;
  transition:stroke .14s;
}
.sp[aria-checked="true"] .sp-icon{stroke:var(--amber)}
.sp-title{font-size:13px;font-weight:700;color:var(--navy);line-height:1.3}
.sp-sub{font-size:11.5px;color:var(--n400);margin-top:2px;line-height:1.38}

/* ── ATTACH TOGGLE ── */
.attach-toggle{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;color:var(--n400);
  background:none;border:none;padding:0;
  cursor:pointer;font-family:var(--font);
  transition:color .12s;
}
.attach-toggle:hover{color:var(--navy)}
.attach-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:3px}

/* ── UPLOAD ZONE ── */
.upload-zone{
  display:none;
  border:1.5px dashed var(--n200);border-radius:var(--rsm);
  padding:20px;background:var(--n50);
  text-align:center;cursor:pointer;
  transition:border-color .13s,background .13s;
  margin-top:8px;
}
.upload-zone.visible{display:block}
.upload-zone.drag{border-color:var(--amber);background:var(--amber-lo)}
.upload-zone-text{font-size:13px;color:var(--n400);line-height:1.55}
.upload-zone-text strong{display:block;color:var(--navy);font-size:13px;margin-bottom:3px}
.upload-zone-sub{font-size:11px;color:var(--n300);margin-top:4px}
.file-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fpill{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px 4px 8px;
  background:var(--n50);border:1px solid var(--n100);
  border-radius:var(--rpill);font-size:12px;color:var(--navy-2);
}
.fpill-rm{
  border:none;background:none;padding:0;
  color:var(--n300);display:flex;align-items:center;
  cursor:pointer;transition:color .11s;
}
.fpill-rm:hover{color:var(--err)}
.fpill-rm svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5}

/* ── TRUST STRIP ── */
.trust-strip{
  display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:8px 16px;
  font-size:11.5px;color:var(--n400);
  padding:12px clamp(20px,3vw,36px);
  border-top:1px solid var(--n100);
  border-bottom:1px solid var(--n100);
}
@media(min-width:900px){.trust-strip{display:none}}
.trust-item{display:flex;align-items:center;gap:5px}
.trust-item svg{
  width:13px;height:13px;stroke:var(--n300);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}

/* ── FIELD ERRORS ── */
.ferr{font-size:11.5px;color:var(--err);display:none;align-items:center;gap:3px}
.ferr.show{display:flex}
.submit-err{font-size:12px;color:var(--err);display:none}
.submit-err.show{display:block}

/* ── CTA BUTTON ── */
.cta-btn{
  width:100%;padding:14px 28px;
  background:var(--navy);color:#fff;
  border-radius:var(--rsm);
  font-size:clamp(14px,1.05vw,15px);font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .17s,transform .13s var(--spring),opacity .17s,box-shadow .17s;
  position:relative;overflow:hidden;
  font-family:var(--font);border:none;cursor:pointer;
}
.cta-btn:hover:not(.loading):not(.done){
  background:var(--navy-3);transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(5,22,77,.22);
}
.cta-btn:active{transform:translateY(0)}
.cta-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.cta-btn.loading{opacity:.7;pointer-events:none}
.cta-btn.done{background:var(--ok);pointer-events:none}
.cta-btn .td{display:flex;align-items:center;gap:8px}
.cta-btn .tl{display:none;align-items:center;gap:8px}
.cta-btn .tk{display:none;align-items:center;gap:8px}
.cta-btn.loading .td{display:none}.cta-btn.loading .tl{display:flex}
.cta-btn.done    .td{display:none}.cta-btn.done    .tk{display:flex}
.cta-btn .arr{transition:transform .17s var(--spring)}
.cta-btn:hover:not(.loading):not(.done) .arr{transform:translateX(3px)}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:rot .6s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── PRIVACY NOTE ── */
.priv-note{font-size:11px;color:var(--n300);text-align:center;line-height:1.5}
.priv-note a{color:var(--n400);text-decoration:none}
.priv-note a:hover{text-decoration:underline}

/* ── SHAKE ── */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}
}
.shaking{animation:shake .42s cubic-bezier(.36,.07,.19,.97) both}

/* ── HONEYPOT ── */
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* ── DIAL DROPDOWN ── */
#dialDrop{
  position:fixed;z-index:9000;
  width:280px;
  background:var(--white);
  border:1.5px solid var(--n200);
  border-radius:var(--r);
  box-shadow:0 4px 8px rgba(5,22,77,.06),0 16px 48px rgba(5,22,77,.16);
  display:none;flex-direction:column;overflow:hidden;
  animation:dropIn .14s var(--ease) both;
}
#dialDrop.open{display:flex}
@keyframes dropIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.dial-search{
  padding:11px 12px;
  border:none;border-bottom:1px solid var(--n100);
  font-size:var(--ts);font-family:var(--font);
  color:var(--navy);outline:none;background:var(--n50);
}
.dial-search::placeholder{color:var(--n300)}
.dial-list{overflow-y:auto;max-height:232px;padding:4px 0;scrollbar-width:thin;scrollbar-color:var(--n200) transparent}
.dial-list::-webkit-scrollbar{width:4px}
.dial-list::-webkit-scrollbar-track{background:transparent}
.dial-list::-webkit-scrollbar-thumb{background:var(--n200);border-radius:2px}
.dial-opt{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;font-size:var(--ts);cursor:pointer;
  border:none;background:none;width:100%;text-align:left;
  font-family:var(--font);color:var(--navy);transition:background .09s;
}
.dial-opt:hover,.dial-opt.hi{background:var(--n50)}
.dial-opt.sel{background:var(--amber-lo)}
.dial-opt-flag{font-size:16px;flex-shrink:0}
.dial-opt-name{flex:1;font-size:13px}
.dial-opt-code{font-size:12px;color:var(--n400);font-weight:600}

/* ── CONFIRMATION SCREEN ── */
.confirm{display:none}
.confirm.open{display:block}
.confirm-card{
  background:var(--white);border-radius:16px;
  box-shadow:var(--sh);
  padding:clamp(28px,4vw,44px) clamp(22px,3.5vw,36px);
  display:flex;flex-direction:column;gap:24px;
  animation:fadeUp .28s var(--ease) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.conf-check{
  width:52px;height:52px;background:var(--ok);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;
  box-shadow:0 0 0 8px rgba(21,128,61,.1);
  animation:popIn .32s var(--spring) both;flex-shrink:0;
}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.conf-check svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

.conf-hero{text-align:center}
.conf-title{font-size:var(--txl);font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.conf-email-line{font-size:13px;color:var(--n400);margin-top:4px}
.conf-email-line strong{color:var(--navy);font-weight:600}

.conf-dot-row{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:var(--ts);color:var(--n400);
}
.conf-dot{width:8px;height:8px;background:var(--ok);border-radius:50%;flex-shrink:0;animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.conf-local{font-size:11.5px;color:var(--n400);text-align:center;display:none}

.conf-steps-lbl{
  font-size:var(--tx);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--n400);
}
.conf-steps{border:1px solid var(--n200);border-radius:var(--rsm);overflow:hidden}
.conf-step{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 14px;border-bottom:1px solid var(--n100);
}
.conf-step:last-child{border-bottom:none}
.conf-step-n{
  width:24px;height:24px;flex-shrink:0;
  background:var(--amber-lo);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--navy);margin-top:1px;
}
.conf-step-title{font-size:var(--ts);font-weight:700;color:var(--navy);margin-bottom:2px}
.conf-step-sub{font-size:12px;color:var(--n400)}

.conf-cal-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 20px;
  background:var(--amber);color:var(--navy);
  border-radius:var(--rsm);font-size:14px;font-weight:700;
  text-decoration:none;
  transition:background .16s,transform .13s var(--spring),box-shadow .16s;
}
.conf-cal-btn:hover{
  background:#ffbb29;transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(255,173,0,.38);
}
.conf-cal-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.conf-cal-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.conf-home-row{text-align:center;padding-top:4px}
.conf-home-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--ts);font-weight:600;
  color:var(--n400);text-decoration:none;transition:color .13s;
}
.conf-home-link:hover{color:var(--navy)}
.conf-home-link:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
.conf-home-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.conf-footnote{text-align:center;font-size:11.5px;color:var(--n300)}

/* ── PAGE FOOTER ── */
.page-footer{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:5px 12px;font-size:12px;color:var(--n400);
}
.page-footer a{color:var(--n400);text-decoration:none;transition:color .12s}
.page-footer a:hover{color:var(--navy)}
.page-footer .sep{color:var(--n300)}

/* ── PROGRESSIVE WIDER ── */
@media(min-width:1200px){
  .layout{padding:40px 36px;gap:36px}
}
@media(min-width:1400px){
  .layout{max-width:1380px;padding:48px 48px;gap:48px}
  .sidebar{width:340px}
  body{background-size:30px 30px}
}

/* ── RESPONSIVE ── */
@media(max-width:479px){
  .form-card{border-radius:10px}
  .confirm-card{border-radius:10px}
  #dialDrop{width:calc(100vw - 24px) !important;left:12px !important}
}
.cl-logo{display: flex;
justify-content: center; /* horizontal center */
align-items: center;     /* vertical center */
}
body.page-template-template-thankyou #confirmScreen{display: block !important;}