/* ============================================================
   Insight landing page. One screen, one job: capture the lead.
   ============================================================ */

:root{
  --sf-700:#014486;
  --sf-500:#0176D3;
  --sf-400:#1B96FF;
  --sf-200:#78BFFF;
  --sf-050:#EAF4FF;

  --ls-600:#C4241A;
  --ls-500:#E5342A;
  --ls-400:#F1584C;

  --ink-950:#05080F;
  --ink-900:#080D18;
  --line:rgba(140,170,225,.16);
  --line-2:rgba(140,170,225,.28);

  --on-dark:#EEF3FF;
  --on-dark-2:#9DAEC9;
  --on-dark-3:#6D7E9B;

  --paper:#FFFFFF;
  --text:#0B1220;
  --text-2:#43506B;
  --text-3:#6B7893;
  --edge:#DCE3F0;

  --ok:#34D399;

  --ease:cubic-bezier(.22,.68,.31,1);
  --font-h:"Instrument Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-b:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink-950);color:var(--on-dark);
  font-family:var(--font-b);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3{font-family:var(--font-h);font-weight:600;letter-spacing:-.03em;line-height:1.06;margin:0}
p{margin:0}
::selection{background:var(--sf-400);color:#fff}
:focus-visible{outline:2px solid var(--sf-400);outline-offset:2px;border-radius:6px}

/* ---------- Shell ---------- */
.page{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;isolation:isolate;
}
.page::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1000px 620px at 6% -10%, rgba(1,118,211,.40), transparent 60%),
    radial-gradient(880px 560px at 98% 4%, rgba(229,52,42,.26), transparent 58%),
    radial-gradient(900px 620px at 62% 116%, rgba(1,118,211,.20), transparent 62%);
}
.page::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.45;
  background-image:linear-gradient(rgba(150,185,240,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,185,240,.05) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 38%,#000 28%,transparent 76%);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 38%,#000 28%,transparent 76%);
}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,3.4vw,40px)}

/* ---------- Header ---------- */
.hdr{flex:none;padding:clamp(12px,1.7vh,17px) 0}
.hdr .wrap{display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:650;font-size:16.5px;letter-spacing:-.03em;color:#fff}
.brand svg{width:28px;height:28px;flex:none}
.brand small{display:block;font-family:var(--font-m);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3);line-height:1.4;margin-top:-1px}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,2vw,22px)}
.hdr-link{font-size:14px;color:var(--on-dark-2);transition:color .2s;white-space:nowrap}
.hdr-link:hover{color:#fff}
.hdr-phone{font-family:var(--font-m);font-size:12px;color:var(--on-dark-3);white-space:nowrap}
.hdr-btn{
  padding:9px 18px;border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap;
  background:linear-gradient(135deg,var(--sf-500),var(--sf-700));color:#fff;
  box-shadow:0 6px 18px rgba(1,118,211,.34);transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.hdr-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(1,118,211,.46)}

/* ---------- Main grid ---------- */
.main{flex:1;display:flex;align-items:center;padding:clamp(6px,1.1vh,16px) 0}
.grid{
  width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(28px,3.4vw,56px);align-items:center;
}
.grid > *{min-width:0}

/* ---------- Left ---------- */
.flag{
  display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 6px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  font-size:12.2px;color:var(--on-dark-2);margin-bottom:clamp(10px,1.5vh,15px);
}
.flag b{
  flex:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--sf-400),var(--sf-700));color:#fff;
  padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
}

h1{
  color:#fff;
  font-size:clamp(1.95rem,min(4.2vw,6.5vh),3.6rem);
  margin-bottom:clamp(10px,1.6vh,17px);
}
h1 .grad{
  background:linear-gradient(96deg,var(--sf-200) 2%,#fff 46%,var(--ls-400) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{
  font-size:clamp(.98rem,1.22vw,1.12rem);color:var(--on-dark-2);
  max-width:46ch;margin-bottom:clamp(14px,2vh,21px);
}
.sub b{color:#fff;font-weight:600}

.after{
  display:grid;gap:clamp(6px,.95vh,9px);
  margin-bottom:clamp(14px,2.1vh,21px);
  padding-left:0;list-style:none;
}
.after li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(.86rem,1.02vw,.95rem);line-height:1.45;color:var(--on-dark)}
.after .tick{
  flex:none;width:21px;height:21px;border-radius:7px;margin-top:1px;
  display:grid;place-items:center;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.3);
}
.after .tick svg{width:11px;height:11px;stroke:var(--ok);stroke-width:3.2}
.after b{color:#fff;font-weight:600}

/* ---------- Primary call to action ---------- */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.4vw,16px)}
.cta-main{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:clamp(14px,1.9vh,18px) clamp(24px,2.4vw,34px);border-radius:999px;
  background:linear-gradient(135deg,var(--sf-500),var(--sf-700));color:#fff;
  font-family:var(--font-h);font-weight:650;letter-spacing:-.015em;
  font-size:clamp(1rem,1.2vw,1.12rem);
  box-shadow:0 2px 4px rgba(1,68,134,.4),0 14px 34px rgba(1,118,211,.42);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.cta-main:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(1,68,134,.4),0 22px 48px rgba(1,118,211,.52)}
.cta-main:active{transform:translateY(0)}
.cta-main svg{flex:none}
.cta-alt{
  display:inline-flex;align-items:center;padding:6px 2px;color:var(--on-dark-2);
  font-weight:600;font-size:clamp(.9rem,1.02vw,.98rem);
  border-bottom:1px solid rgba(140,170,225,.34);
  transition:color .2s,border-color .2s;
}
.cta-alt:hover{color:#fff;border-bottom-color:#fff}
.cta-note{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:clamp(12px,1.8vh,17px);font-size:13.2px;color:var(--on-dark-3);
}
.pulse{
  width:7px;height:7px;border-radius:50%;flex:none;background:#39d98a;margin-top:6px;
  box-shadow:0 0 0 0 rgba(57,217,138,.6);animation:pulse 2.2s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}

/* ---------- Right: video ---------- */
.video{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);background:#0A1120;
  box-shadow:0 40px 100px rgba(3,20,50,.55);cursor:pointer;display:block;padding:0;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.video:hover{transform:translateY(-4px);box-shadow:0 50px 120px rgba(3,20,50,.65)}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s}
.video:hover img{transform:scale(1.04);filter:brightness(1.07)}
.video .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,15,.12) 34%,rgba(5,8,15,.82))}
.video .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(56px,5.4vw,74px);height:clamp(56px,5.4vw,74px);border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.94);
  box-shadow:0 14px 44px rgba(0,0,0,.5);transition:transform .3s var(--ease);
}
.video:hover .play{transform:translate(-50%,-50%) scale(1.09)}
.video .play svg{width:clamp(20px,2vw,26px);height:clamp(20px,2vw,26px);fill:#080D18;margin-left:3px}
.video .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(10px,2vh,20px) clamp(12px,2vw,22px);text-align:left}
.video .cap strong{display:block;font-family:var(--font-h);font-weight:600;font-size:clamp(.94rem,1.15vw,1.06rem);color:#fff;letter-spacing:-.02em}
.video .cap span{display:block;font-size:12.5px;color:var(--on-dark-2);margin-top:3px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.under-video{
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin-top:clamp(10px,1.8vh,16px);font-size:12.6px;color:var(--on-dark-3);
}
.under-video i{width:5px;height:5px;border-radius:50%;background:var(--sf-400);font-style:normal;flex:none}
.under-video i.red{background:var(--ls-500)}

/* ---------- Footer ---------- */
.ftr{flex:none;padding:clamp(10px,1.5vh,14px) 0;border-top:1px solid var(--line)}
.ftr .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.ftr p{font-size:11.8px;color:var(--on-dark-3)}
.ftr a{color:var(--on-dark-2);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ftr a:hover{color:#fff;border-bottom-color:var(--line-2)}

/* ---------- Modal (calendar) ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:22px}
.modal.on{display:flex}
.modal-veil{position:absolute;inset:0;background:rgba(4,8,16,.76);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.modal-card{
  position:relative;background:var(--paper);color:var(--text);border-radius:22px;
  width:100%;max-width:920px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 50px 120px rgba(0,0,0,.6);animation:pop .3s var(--ease);
}
.modal-head{display:flex;align-items:flex-start;gap:14px;padding:20px 24px 16px;border-bottom:1px solid #E9EEF7}
.modal-head h3{font-size:1.2rem;color:var(--text)}
.modal-head p{font-size:13.4px;color:var(--text-3);margin-top:3px}
.modal-x{margin-left:auto;flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#F5F7FC;transition:background .2s,transform .2s}
.modal-x:hover{background:#ECF0F8;transform:rotate(90deg)}
.modal-x svg{width:14px;height:14px;stroke:var(--text-2);stroke-width:2.4}
.book-frame{width:100%;height:min(62vh,620px);border:0;background:#F5F7FC;display:block}
.book-fb{padding:14px 24px;text-align:center;font-size:13px;color:var(--text-3);border-top:1px solid #E9EEF7}
.book-fb a{color:var(--sf-500);font-weight:600;text-decoration:underline}

/* ---------- Responsive ---------- */
@media (max-width:940px){
  .grid{grid-template-columns:1fr;gap:clamp(24px,4vh,34px)}
  .main{padding:22px 0 34px}
  .video-col{order:-1}
  .sub{max-width:none}
  h1{font-size:clamp(1.95rem,6.4vw,2.6rem)}
  .hdr-phone{display:none}
  .hdr-link{display:none}
  /* put the booking button above the supporting detail so it is reachable fast */
  .pitch{display:flex;flex-direction:column}
  .pitch .flag{order:1}
  .pitch h1{order:2}
  .pitch .sub{order:3;margin-bottom:16px}
  .pitch .cta{order:4}
  .pitch .cta-note{order:5}
  .pitch .after{order:6;margin:22px 0 0}
  .cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .cta-main{width:100%}

  /* the poster is a busy screenshot: keep the caption legible and clear of the play button */
  .video .veil{background:linear-gradient(180deg,rgba(5,8,15,.24) 22%,rgba(5,8,15,.55) 52%,rgba(5,8,15,.93))}
  .video .cap strong{font-size:.92rem;line-height:1.25}
  .video .cap span{font-size:11.5px;line-height:1.35;margin-top:2px}
  .video .play{width:52px;height:52px;top:42%}
  .video .play svg{width:19px;height:19px}

  .under-video{flex-direction:column;gap:5px;text-align:center;font-size:12px}
  .under-video span{display:inline-flex;align-items:center;gap:7px}
  .under-video i{display:none}
}
@media (max-width:520px){
  .ftr .wrap{justify-content:flex-start}
}
/* Short desktop screens (1366x768, 1280x720): tighten everything a notch */
@media (min-width:941px) and (max-height:840px){
  .hdr{padding:9px 0}
  .ftr{padding:8px 0}
  .main{padding:4px 0}
  .flag{margin-bottom:7px;padding:4px 12px 4px 5px;font-size:11.6px}
  .sub{font-size:.95rem;margin-bottom:12px}
  .after{gap:6px;margin-bottom:13px}
  .after li{font-size:.87rem}
  .cta-main{padding:12px 24px;font-size:1rem}
  .cta-note{margin-top:11px}
  .under-video{margin-top:9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}