/* =========================================================
   DIRECTION C — "BOOKEND"
   Deep cobalt HERO + cobalt FOOTER/CTA bookend a crisp white
   body. Hero-scale spark signature. Cobalt is confined to the
   two ends + accents — bold blue energy without drowning the
   page. Confident type, crisp borders, strong numerals.
   Scoped under .dC
   ========================================================= */
.dC{background:#fff;color:var(--ink);font-size:16px;line-height:1.6;}
.dC ::selection{background:var(--tint-2);}
.dC h1,.dC h2,.dC h3,.dC h4{font-family:var(--font-title);font-weight:600;line-height:1.04;letter-spacing:-.025em;color:var(--ink);}
.dC .sec{padding:clamp(3.5rem,7vw,6.5rem) 0;}

/* buttons */
.dC .btn{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--font-title);font-weight:600;font-size:1rem;white-space:nowrap;
  padding:.85rem .9rem .85rem 1.5rem;border-radius:100px;transition:transform .3s var(--ease),box-shadow .25s,background .2s,color .2s;}
.dC .btn .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:transform .3s var(--ease);}
.dC .btn .ic svg{width:14px;height:14px;}
.dC .btn--w{background:#fff;color:var(--cobalt);box-shadow:0 14px 34px rgba(0,12,50,.28);}
.dC .btn--w .ic{background:var(--cobalt);color:#fff;}
.dC .btn--w:hover{transform:translateY(-2px);}
.dC .btn--w:hover .ic{transform:rotate(45deg);}
.dC .btn--p{background:var(--cobalt);color:#fff;box-shadow:0 12px 30px rgba(0,64,193,.26);}
.dC .btn--p .ic{background:rgba(255,255,255,.18);}
.dC .btn--p:hover{transform:translateY(-2px);}
.dC .btn--p:hover .ic{transform:rotate(45deg);}

/* eyebrow */
.dC .ey{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-title);font-weight:600;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;}
.dC .ey .spark{width:16px;height:16px;}

/* =========================================================
   HERO — deep cobalt with hero-scale spark
   ========================================================= */
.dC .hero{position:relative;background:radial-gradient(120% 90% at 78% 8%,#2f5fe0 0%,rgba(47,95,224,0) 46%),linear-gradient(165deg,#0a3bb0 0%,#05338f 55%,#06245f 100%);color:#fff;overflow:hidden;padding-bottom:clamp(6rem,11vw,9rem);}
.dC .hero__bigspark{position:absolute;top:-7%;right:-6%;width:min(620px,58vw);height:auto;opacity:.5;pointer-events:none;}
.dC .hero__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask-image:radial-gradient(120% 80% at 30% 0%,#000,transparent 75%);mask-image:radial-gradient(120% 80% at 30% 0%,#000,transparent 75%);}
/* nav on cobalt */
.dC .nav{position:relative;z-index:5;}
.dC .nav__in{max-width:var(--container);margin:0 auto;padding:24px 28px;display:flex;align-items:center;gap:2rem;}
.dC .nav__links{display:flex;gap:.3rem;margin-left:auto;}
.dC .nav__links a{font-family:var(--font-title);font-weight:500;font-size:.95rem;color:rgba(255,255,255,.78);padding:.5rem .95rem;border-radius:100px;transition:.2s;}
.dC .nav__links a:hover{color:#fff;background:rgba(255,255,255,.12);}
.dC .nav__cta{margin-left:.4rem;}
@media(max-width:880px){.dC .nav__links{display:none;}.dC .nav__cta{margin-left:auto;}}

.dC .hero__in{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 28px 0;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.dC .hero__eyebrow{color:#9fc0ff;}
.dC .hero__h1{font-size:clamp(2.8rem,6vw,5rem);letter-spacing:-.03em;margin:1.4rem 0 0;color:#fff;}
.dC .hero__h1 em{font-style:normal;color:#a8c5ff;}
.dC .hero__p{color:rgba(255,255,255,.84);font-size:1.1rem;max-width:42ch;margin:1.5rem 0 0;}
.dC .hero__act{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:2rem;}
.dC .hero__trust{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;color:rgba(255,255,255,.82);}
.dC .hero__trust i{width:7px;height:7px;border-radius:50%;background:#46e08a;}
@media(max-width:880px){.dC .hero__in{grid-template-columns:1fr;}}

/* quiz mock straddles the cobalt→white boundary */
.dC .hero__mockwrap{position:relative;z-index:3;max-width:var(--container);margin:clamp(-7rem,-9vw,-5rem) auto 0;padding:0 28px;}
.dC .hero__mockcol{display:flex;justify-content:flex-end;}
.dC .qm{width:min(520px,100%);background:#fff;border-radius:18px;box-shadow:0 40px 90px rgba(3,18,70,.4);overflow:hidden;border:1px solid rgba(255,255,255,.5);}
.dC .qm__bar{display:flex;align-items:center;gap:6px;padding:14px 18px;background:var(--paper);border-bottom:1px solid var(--line);}
.dC .qm__bar i{width:9px;height:9px;border-radius:50%;background:var(--tint-2);}
.dC .qm__bar span{margin-left:.55rem;font-family:var(--font-title);font-size:.78rem;color:var(--ink-3);}
.dC .qm__body{padding:1.7rem;}
.dC .qm__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.dC .qm__tag{font-family:var(--font-title);font-weight:600;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);background:var(--tint);padding:.35rem .7rem;border-radius:100px;}
.dC .qm__live{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.dC .qm__live::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;}
.dC .qm__q{font-size:1.5rem;margin-bottom:1.2rem;}
.dC .qm__opts{display:flex;flex-direction:column;gap:.65rem;}
.dC .qm__opt{display:flex;justify-content:space-between;align-items:center;padding:.95rem 1.2rem;border-radius:12px;border:1.5px solid var(--line);font-size:.97rem;color:var(--ink-2);}
.dC .qm__opt .a{color:var(--ink-3);}
.dC .qm__opt.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff;}
.dC .qm__opt.on .a{color:#fff;}
.dC .qm__prog{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;}
.dC .qm__prog .l{font-family:var(--font-title);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap;}
.dC .qm__prog .bar{flex:1;height:6px;border-radius:100px;background:var(--paper-2);overflow:hidden;}
.dC .qm__prog .bar i{display:block;height:100%;width:60%;background:var(--cobalt);border-radius:100px;}
.dC .hero__statcol{align-self:center;display:flex;flex-direction:column;gap:1.4rem;padding-top:clamp(5rem,9vw,7rem);}
.dC .hstat{display:flex;align-items:baseline;gap:1rem;border-bottom:1.5px solid var(--line);padding-bottom:1.2rem;}
.dC .hstat b{font-family:var(--font-title);font-weight:700;font-size:clamp(2.2rem,3.4vw,3rem);color:var(--cobalt);letter-spacing:-.03em;line-height:1;flex:0 0 auto;min-width:2.4em;}
.dC .hstat span{color:var(--ink-2);font-size:.95rem;}
@media(max-width:880px){.dC .hero__mockcol{justify-content:center;}.dC .hero__statcol{padding-top:2.5rem;}}

/* =========================================================
   WHITE BODY — confident, crisp
   ========================================================= */
.dC .head{max-width:50rem;margin-bottom:clamp(2.2rem,4vw,3.2rem);}
.dC .head .ey{color:var(--cobalt);}
.dC .head h2{font-size:clamp(2.1rem,4.2vw,3.4rem);margin:1.1rem 0 .9rem;}
.dC .head h2 em{font-style:normal;color:var(--cobalt);}
.dC .head p{color:var(--ink-2);font-size:1.06rem;max-width:46ch;}

/* example cards — crisp bordered, bold numbers */
.dC .ex{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.dC .ex__c{border:1.5px solid var(--line);border-radius:18px;padding:1.6rem;display:flex;flex-direction:column;gap:1.2rem;transition:border .25s,transform .3s var(--ease),box-shadow .3s;}
.dC .ex__c:hover{border-color:var(--cobalt);transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,40,150,.12);}
.dC .ex__prev{border:1.5px solid var(--line);border-radius:12px;padding:1.2rem;background:var(--paper);}
.dC .ex__ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.dC .x-type{font-family:var(--font-title);font-weight:700;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);}
.dC .x-live{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.dC .x-num{font-family:var(--font-title);font-weight:700;font-size:2.1rem;letter-spacing:-.03em;color:var(--ink);line-height:1;}
.dC .x-num em{font-style:normal;font-size:.85rem;font-weight:600;color:var(--ink-3);margin-left:.25rem;}
.dC .x-bar{height:7px;border-radius:100px;background:var(--paper-2);margin-top:.85rem;overflow:hidden;}
.dC .x-bar i{display:block;height:100%;background:var(--cobalt);border-radius:100px;}
.dC .x-chips{display:flex;flex-wrap:wrap;gap:.45rem;}
.dC .x-chip{font-size:.78rem;padding:.42rem .8rem;border-radius:100px;border:1.5px solid var(--line);color:var(--ink-3);}
.dC .x-chip.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff;}
.dC .ex__c h4{font-size:1.2rem;font-weight:600;}
.dC .ex__c p{color:var(--ink-2);font-size:.9rem;margin-top:.35rem;}
.dC .ex__foot{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-title);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt);white-space:nowrap;}
.dC .ex__foot .spark{width:14px;height:14px;}
@media(max-width:860px){.dC .ex{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.dC .ex{grid-template-columns:1fr;}}

/* inbox — dark cobalt product surface on white */
.dC .inbox-wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
.dC .inbox-wrap .head{margin-bottom:0;}
.dC .pts{display:flex;flex-direction:column;gap:1.3rem;margin-top:1.8rem;}
.dC .pt{display:flex;gap:.95rem;align-items:flex-start;}
.dC .pt .ic{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--cobalt);display:grid;place-items:center;color:#fff;font-weight:600;}
.dC .pt b{display:block;font-family:var(--font-title);font-weight:600;font-size:1rem;}
.dC .pt span{color:var(--ink-2);font-size:.92rem;}
.dC .inbox{background:linear-gradient(165deg,#0a3bb0,#06245f);border-radius:20px;overflow:hidden;box-shadow:0 36px 80px rgba(3,18,70,.34);}
.dC .inbox__head{display:flex;justify-content:space-between;align-items:flex-start;padding:1.4rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.12);}
.dC .inbox__head b{font-family:var(--font-title);font-weight:600;font-size:1.05rem;color:#fff;}
.dC .inbox__head .sub{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.25rem;}
.dC .inbox__head .ct{font-family:var(--font-title);font-weight:600;font-size:.72rem;color:#fff;background:rgba(255,255,255,.16);border-radius:100px;padding:.4rem .8rem;}
.dC .in-row{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.1);}
.dC .in-row:last-child{border-bottom:none;}
.dC .in-row.hot{background:rgba(255,255,255,.06);}
.dC .in-row.cold{opacity:.55;}
.dC .in-av{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-title);font-weight:600;font-size:.84rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
.dC .in-who{flex:1;min-width:0;display:flex;flex-direction:column;}
.dC .in-who b{font-family:var(--font-title);font-weight:600;font-size:.97rem;color:#fff;}
.dC .in-who span{color:rgba(255,255,255,.6);font-size:.81rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dC .in-score{display:flex;align-items:center;gap:.8rem;}
.dC .in-tag{font-family:var(--font-title);font-weight:600;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;padding:.34rem .62rem;border-radius:100px;}
.dC .in-tag.q{background:#fff;color:var(--cobalt);}
.dC .in-tag.w{background:rgba(255,255,255,.18);color:#fff;}
.dC .in-tag.l{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);}
.dC .in-sc{font-family:var(--font-title);font-weight:700;font-size:1.3rem;color:#fff;min-width:1.5em;text-align:right;}
.dC .inbox__foot{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.6rem;background:rgba(255,255,255,.05);font-size:.88rem;color:rgba(255,255,255,.82);}
.dC .inbox__foot .dot{width:8px;height:8px;border-radius:50%;background:#46e08a;}
.dC .inbox__foot b{font-family:var(--font-title);font-weight:600;color:#fff;}
@media(max-width:820px){.dC .inbox-wrap{grid-template-columns:1fr;}}

/* clients */
.dC .clients{background:var(--paper);}
.dC .pull{font-family:var(--font-title);font-weight:600;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.18;letter-spacing:-.025em;max-width:22ch;}
.dC .pull em{font-style:normal;color:var(--cobalt);}
.dC .pull__by{display:flex;align-items:center;gap:.85rem;margin-top:1.8rem;}
.dC .pull__by .av{width:48px;height:48px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;font-family:var(--font-title);font-weight:600;font-size:.9rem;}
.dC .pull__by .nm{font-family:var(--font-title);font-weight:600;font-size:1.05rem;}
.dC .pull__by .rl{color:var(--ink-3);font-size:.88rem;}
.dC .tc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:clamp(2.5rem,5vw,3.5rem);}
.dC .tcard{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:1.7rem;display:flex;flex-direction:column;gap:1.3rem;}
.dC .tcard p{color:var(--ink-2);font-size:.98rem;line-height:1.6;flex:1;}
.dC .tcard p em{font-style:normal;color:var(--cobalt);font-weight:600;}
.dC .tcard .by{display:flex;align-items:center;gap:.7rem;}
.dC .tcard .by .av{width:40px;height:40px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--font-title);font-weight:600;font-size:.78rem;}
.dC .tcard .by .nm{font-family:var(--font-title);font-weight:600;font-size:.9rem;}
.dC .tcard .by .rl{color:var(--ink-3);font-size:.78rem;}
@media(max-width:820px){.dC .tc{grid-template-columns:1fr;}}
.dC .logos{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:2rem;border-top:1.5px solid var(--line);}
.dC .logos .ll{font-family:var(--font-title);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.3rem;text-align:center;}
.dC .logos .lrow{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;}
.dC .logos image-slot{height:58px;width:100%;display:block;border:1.5px solid var(--line);border-radius:12px;background:#fff;}
@media(max-width:680px){.dC .logos .lrow{grid-template-columns:repeat(3,1fr);}}

/* =========================================================
   CONTACT + FOOTER — cobalt bookend
   ========================================================= */
.dC .bookend{position:relative;background:radial-gradient(110% 90% at 80% 0%,#2f5fe0 0%,rgba(47,95,224,0) 48%),linear-gradient(180deg,#0a3bb0 0%,#06245f 100%);color:#fff;overflow:hidden;}
.dC .bookend__spark{position:absolute;bottom:-60px;left:-40px;opacity:.14;pointer-events:none;}
.dC .reach{position:relative;z-index:2;padding:clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,5vw,3.5rem);}
.dC .reach__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.dC .reach .ey{color:#9fc0ff;}
.dC .reach__h{font-size:clamp(2.2rem,4.4vw,3.6rem);color:#fff;margin:1.1rem 0 1rem;}
.dC .reach__h em{font-style:normal;color:#a8c5ff;}
.dC .reach__p{color:rgba(255,255,255,.82);max-width:34ch;margin-bottom:1.8rem;}
.dC .ecopy{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;max-width:420px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:1.05rem 1.05rem 1.05rem 1.3rem;text-align:left;transition:.2s;}
.dC .ecopy:hover{background:rgba(255,255,255,.16);}
.dC .ecopy__addr{font-family:var(--font-title);font-weight:600;font-size:1.05rem;color:#fff;}
.dC .ecopy__btn{font-family:var(--font-title);font-weight:600;font-size:.85rem;color:var(--cobalt);background:#fff;border-radius:100px;padding:.45rem .85rem;}
.dC .ecopy.on .ecopy__btn{background:#bcffd0;}
.dC .cf{background:#fff;border-radius:18px;padding:clamp(1.6rem,3vw,2.2rem);box-shadow:0 30px 60px rgba(0,12,50,.3);}
.dC .cf__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.dC .cf__field{display:flex;flex-direction:column;margin-bottom:1rem;}
.dC .cf__field span{font-family:var(--font-title);font-size:.8rem;color:var(--ink-2);margin-bottom:.4rem;}
.dC .cf input,.dC .cf textarea{font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:11px;padding:.8rem .95rem;outline:none;transition:.2s;resize:vertical;}
.dC .cf input:focus,.dC .cf textarea:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(0,64,193,.12);background:#fff;}
.dC .cf__send{display:inline-flex;align-items:center;gap:.55rem;background:var(--cobalt);color:#fff;font-family:var(--font-title);font-weight:600;font-size:1rem;padding:.9rem 1.6rem;border-radius:100px;margin-top:.3rem;transition:transform .3s var(--ease);white-space:nowrap;}
.dC .cf__send:hover{transform:translateY(-2px);}
.dC .cf--sent{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2.5rem 1rem;}
.dC .cf__chk{width:54px;height:54px;border-radius:50%;background:var(--cobalt);display:grid;place-items:center;margin-bottom:.4rem;}
.dC .cf--sent h4{font-size:1.3rem;color:var(--ink);}
.dC .cf--sent p{color:var(--ink-2);}
@media(max-width:820px){.dC .reach__grid{grid-template-columns:1fr;}}
.dC .foot{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);}
.dC .foot__in{max-width:var(--container);margin:0 auto;padding:clamp(2rem,4vw,2.6rem) 28px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.dC .foot__nav{display:flex;gap:1.5rem;}
.dC .foot__nav a{color:rgba(255,255,255,.78);font-family:var(--font-title);font-size:.92rem;}
.dC .foot__nav a:hover{color:#fff;}
.dC .foot small{color:rgba(255,255,255,.55);font-size:.8rem;}

/* ───────── QA alignment fixes (2026-06-03) ───────── */
/* pull-quote byline: stop the name/role wrapper inheriting the huge quote font
   (was creating ~60px line boxes around the <br>, a big name↔role gap) */
.dC .pull__by > span:last-child{font-size:1rem;line-height:1.35;}
/* client trust row: real logos, unified monochrome (colour on hover), centred to match the "TRUSTED BY" label */
.dC .logos .lrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.8rem;}
.dC .logos .logo{display:inline-flex;align-items:center;justify-content:center;height:34px;}
.dC .logos .logo img{max-height:34px;max-width:255px;width:auto;object-fit:contain;filter:brightness(0);opacity:.5;transition:opacity .25s var(--ease),filter .25s var(--ease);}
.dC .logos .logo:hover img{filter:none;opacity:1;}
.dC .logos .logo__txt{font-family:'Vidaloka',serif;font-size:27px;line-height:1;color:var(--ink);opacity:.5;white-space:nowrap;letter-spacing:.005em;transition:opacity .25s var(--ease);}
.dC .logos .logo:hover .logo__txt{opacity:1;}
/* hero CTAs: make the secondary button match the primary's height exactly */
.dC .hero__act button{align-self:stretch;}
/* contact form: let inputs shrink and stack Name/Firm on phones
   (the 2-up row + default input min-width forced the form to ~451px, overflowing mobile) */
.dC .cf input,.dC .cf textarea{min-width:0;}
@media(max-width:560px){.dC .cf__row{grid-template-columns:1fr;}}
/* mobile nav: compact the CTA so "Get your custom quiz" + wordmark fit small screens */
@media(max-width:520px){
  .dC .nav__in{gap:1rem;padding:20px 22px;}
  .dC .nav__cta{font-size:.82rem;padding:.6rem .9rem;}
  .dC .nav__cta .ic{display:none;}
}