/* ============================================================================
   v14.css — home-v14, the ASSEMBLED client-ready homepage (2026-06-09).
   Sits on top of zara.css (system) + lab.css (media/split/compare primitives).
   Carries only what the final page needs: the clip-hero, icon service cards,
   the "why now" euro band, the real 3-col footer + social, the mobile glass
   dock (from v12), and small fixes (logo aspect, founder photo, lede contrast).
   ============================================================================ */

:root{ --cream:#F6F3EA }   /* the one warm off-section (palette allows at most one) */

/* real logo: correct aspect (1100×240 webp), a touch larger so the lockup reads */
.brand{height:36px;aspect-ratio:1100/240}
@media (max-width:680px){ .brand{height:30px} }

/* ---- HERO (clip on top, copy on white — LCP is the headline, not the video) ---- */
.heroclip .clip{position:relative;aspect-ratio:16/10;background:#0a1830;overflow:hidden}
.heroclip .clip video,.heroclip .clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroclip .c{padding:clamp(2.2rem,5vw,3.8rem) var(--pad) clamp(2.6rem,5vw,4.2rem)}
.heroclip h1{font-size:clamp(2.5rem,6vw,4.4rem);max-width:16ch}
.heroclip .lede{margin-top:1.1rem;color:rgba(1,30,147,.72);max-width:46ch;
  font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.5}
.heroclip .cta-row{margin-top:1.7rem}
.hero-whisper{margin-top:1.5rem;font-size:.85rem;color:var(--muted);letter-spacing:.05em}
@media (min-width:900px){ .heroclip .clip{aspect-ratio:21/9} .heroclip .c{max-width:var(--maxw);margin:0 auto} }

.eyebrow{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}

/* founder photo (real photography — replaces the .ph placeholder, no pseudo-label) */
.fphoto{width:84px;height:84px;flex:none;overflow:hidden;background:var(--tint)}
.fphoto img{width:100%;height:100%;object-fit:cover;object-position:center 24%}

/* ---- SERVICES: icon cards (clean professional icons, brief §2) ---- */
.icards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.icards .ic{background:#fff;padding:1.4rem 1.1rem;display:flex;flex-direction:column;gap:.9rem;min-height:132px;transition:background .25s}
.icards .ic svg{width:26px;height:26px;stroke:var(--blue);stroke-width:1.4;fill:none}
.icards .ic .nm{font-family:var(--serif);font-size:1.15rem;color:var(--blue);line-height:1.15;margin-top:auto}
.icards .ic:hover{background:var(--wash)}
@media (min-width:760px){ .icards{grid-template-columns:repeat(3,1fr)} }

/* ---- "WHY NOW" euro band (institutional, never urgency) ---- */
.whynow{background:var(--cream);padding-block:clamp(3.5rem,7vw,5.5rem)}
.whynow .row{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;margin-top:1.8rem}
.whynow .wi{display:flex;flex-direction:column;gap:.2rem}
.whynow .wi .n{font-family:var(--serif);font-size:1.6rem;color:var(--blue)}
.whynow .wi .c{font-size:.85rem;color:var(--muted)}

/* ---- REAL FOOTER (3-col + social, real details) ---- */
.zfoot{display:grid;grid-template-columns:1fr;gap:2.6rem}
.zf-brand .f-logo{height:56px;width:auto;display:block;margin-bottom:1.5rem}
.social{display:flex;gap:.7rem}
.social a{width:44px;height:44px;border:1.5px solid var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue);transition:background .2s ease,color .2s ease}
.social a:hover{background:var(--blue);color:#fff}
.social svg{width:19px;height:19px;fill:currentColor}
.zf-est{margin-top:1.6rem;font-size:.85rem;color:var(--muted);line-height:1.7}
.zf-col h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:1.2rem}
.zf-links{display:flex;flex-direction:column;gap:.85rem}
.zf-links a{color:var(--blue);font-size:1rem}.zf-links a:hover{opacity:.6}
.zf-contact{display:flex;flex-direction:column;gap:1.05rem;font-size:1rem;color:var(--blue);line-height:1.5}
.zf-contact .ci{display:flex;gap:.75rem;align-items:flex-start}
.zf-contact svg{width:18px;height:18px;stroke:var(--blue);stroke-width:1.6;fill:none;flex:none;margin-top:.15rem}
.zf-contact a:hover{opacity:.6}
.f-note{display:block;margin-top:.6rem;opacity:.9}   /* .75 stacked on .f-bottom's alpha put it at 5.4:1 */
@media (min-width:860px){ .zfoot{grid-template-columns:1.3fr .8fr 1.15fr;gap:3rem} }

/* ---- FLOATING GLASS DOCK (mobile conversion bar — mirrors the top nav's glass) ---- */
.glass-dock{position:fixed;left:0;right:0;bottom:1.5rem;z-index:60;padding-inline:1.25rem;display:none}
.glass-dock .glass-bar{padding:.5rem .55rem}
.dock-2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.dock-btn{display:flex;align-items:center;justify-content:center;min-height:50px;padding:.6rem .5rem;
  font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:.02em;color:var(--blue);text-align:center;line-height:1.15}
.dock-btn.primary{background:var(--red);color:#fff}
.dock-btn.primary:hover{background:var(--red-2)}
body:has(.nav-collapsible.open) .glass-dock{display:none !important}
@media (max-width:768px){
  .glass-dock{display:block}
  footer{padding-bottom:8rem}   /* clear the floating dock */
}
@media (max-width:680px){ .glass-dock{bottom:1rem;padding-inline:1rem;padding-bottom:env(safe-area-inset-bottom)} }