/* digitalpratik.com in the Keshav experience template, by Team Digital Pratik at JorrDaar LLC.
   Same type scale, spacing, radii and motion as the template. Only the colours moved:
   the client red became the Digital Pratik blue, and every dark band is the navy
   signature fill (identical in both themes, exactly like the site's filled card). */

:root{
  --paper:#FFFFFF;
  --paper-2:#F5F5F8;
  --ink:#1C1C1C;
  --muted:#55606E;
  --line:rgba(28,36,49,.12);
  /* ONE blue family. Buttons never use the link blue: #2E6BD3 under white ink is 5.04:1. */
  --accent:#2E6BD3;
  --accent-deep:#1C4FA8;
  --accent-text:#2E6BD3;
  --accent-soft:#DCE9FB;
  --accent-soft-ink:#1C4FA8;
  /* the navy signature slab, used for the topbar, every on-dark band and the footer */
  --dark:linear-gradient(158deg,#1E4A96 0%,#133875 52%,#0B2450 100%);
  --dark-flat:#133875;
  --dark-2:rgba(255,255,255,.07);
  --dark-line:rgba(255,255,255,.18);
  --dark-ink:#FFFFFF;
  --dark-muted:rgba(226,240,255,.88);
  --blue-on-dark:#BDD5F9;   /* small mono labels on navy or black, reads AA */
  --blue-lg-on-dark:#8FB3EE;/* headline accent words and big numbers on dark */
  --bar:rgba(255,255,255,.86);
  --menu:#FFFFFF;
  --field:#F5F5F8;
  --field-focus:#FFFFFF;
  --radius:18px;
  --shadow:0 20px 50px -22px rgba(39,67,103,.3);
  --font:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
}
[data-theme="dark"]{
  --paper:#070707;
  --paper-2:#0D0D0D;
  --ink:#F8F8F8;
  --muted:#A5ACB7;
  --line:rgba(255,255,255,.11);
  --accent:#2E6BD3;
  --accent-deep:#1C4FA8;
  --accent-text:#5E92E8;
  --accent-soft:rgba(94,146,232,.16);
  --accent-soft-ink:#A9C7F5;
  --bar:rgba(7,7,7,.86);
  --menu:#161616;
  --field:#161616;
  --field-focus:#1D1D1D;
  --shadow:0 22px 50px -20px rgba(0,0,0,.65);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:17.5px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

.wrap{width:min(1180px,92vw);margin:0 auto}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:800;line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
/* no hanging words anywhere: headings balance their lines, paragraphs avoid a lone last word */
p,li,blockquote,.faq-a,.lead{text-wrap:pretty}
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-text);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--accent);flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:'';width:26px;height:2px;background:var(--accent);flex:none}
.on-dark .eyebrow,.eyebrow.on-photo{color:var(--blue-on-dark)}
.on-dark .eyebrow::before,.on-dark .eyebrow::after,.eyebrow.on-photo::before,.eyebrow.on-photo::after{background:var(--blue-lg-on-dark)}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(30px,4vw,44px);margin:16px 0 14px}
.sec-head p{color:var(--muted);font-size:18px}
.on-dark .sec-head p{color:var(--dark-muted)}
h2 em,h1 em{font-style:normal;color:var(--accent-text)}
/* A TWO PART HEADLINE (Digital Pratik, 13 October 2026). The accent sentence
   always starts on a line of its own. "Bring your numbers. I" with the rest
   below it reads as a mistake, so the second sentence never shares a line
   with the first. Holds at every width, phone included. */
h1 em:last-child,h2 em:last-child,h3 em:last-child{display:block}
/* The line under a headline balances its lines too, so it never runs long and
   then leaves two words alone underneath. */
.page-hero p,.hero p.lead,.sec-head p,.cta-band p,.demo-band p,.about-copy>p{text-wrap:balance}
.on-dark h2 em{color:var(--blue-lg-on-dark)}

section{padding:96px 0}
.tint{background:var(--paper-2)}
.on-dark{background:var(--dark);color:var(--dark-ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  font-weight:700;font-size:15.5px;letter-spacing:.01em;
  border:1.5px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .18s ease}
.btn:hover svg{transform:translateX(4px)}
/* the button fill is its own colour, never --accent: on blog and project pages --accent is the
   lighter link blue in dark, and white words on it are too weak (go live check, 14 October 2026) */
.btn-primary{background:var(--btn-bg,#2E6BD3);color:#fff}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(46,107,211,.6)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.on-dark .btn-ghost,.hero .btn-ghost,.page-hero .btn-ghost{border-color:rgba(255,255,255,.32);color:#fff}
.on-dark .btn-ghost:hover,.hero .btn-ghost:hover,.page-hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* fixed navy ink, never a token: on blog and project pages the token turns pale in dark and the
   words vanished on the white button (go live check, 14 October 2026) */
.on-dark .btn-primary{background:#fff;color:#133875}
.on-dark .btn-primary:hover{background:#EAF2FD;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.link-more{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
}
.link-more svg{width:15px;height:15px;transition:transform .18s ease}
.link-more:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.topbar{
  background:var(--dark);color:var(--dark-muted);
  font-size:13.5px;padding:9px 0;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar a{color:var(--dark-ink)}
.topbar a:hover{color:var(--blue-on-dark)}
.topbar .tb-left{display:flex;gap:22px;align-items:center}
.topbar .tb-item{display:flex;gap:7px;align-items:center}
.topbar svg{width:14px;height:14px;color:var(--blue-on-dark)}
.topbar .mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em}

header.site{
  position:sticky;top:0;z-index:90;
  background:var(--bar);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
header.site.scrolled{box-shadow:0 10px 30px -18px rgba(12,14,18,.25)}
.navbar{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
/* the wordmark is monochrome text, never a coloured logo */
.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.wm{font-size:23px;font-weight:400;letter-spacing:-.012em;text-transform:uppercase;color:var(--ink);line-height:1;white-space:nowrap}
.wm b{font-weight:800}
nav.main{display:flex;align-items:center;gap:4px}
nav.main>a,nav.main .navdrop>a{
  padding:10px 15px;border-radius:10px;
  font-weight:600;font-size:15.5px;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
  transition:color .15s ease,background .15s ease;
}
nav.main>a:hover,nav.main .navdrop>a:hover{color:var(--accent-text);background:var(--paper-2)}
nav.main>a.active,nav.main .navdrop>a.active{color:var(--accent-text)}
.navdrop{position:relative}
.navdrop svg{width:13px;height:13px;transition:transform .2s ease}
.navdrop:hover>a svg{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:320px;
  background:var(--menu);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .2s ease;
}
.navdrop:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:block;padding:11px 14px;border-radius:10px;
  font-size:15px;font-weight:600;color:var(--ink);
}
.dropdown a:hover{background:var(--paper-2);color:var(--accent-text)}
.dropdown a span{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:1px}
.dropdown .dd-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:12px 14px 4px}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{white-space:nowrap}
/* the longer button label must not push the bar off a small laptop screen */
@media(min-width:1021px) and (max-width:1199px){.nav-cta{gap:8px}.nav-cta .btn{padding:11px 14px;font-size:13.5px}.nav-cta .btn svg{display:none}nav.main>a,nav.main .navdrop>a{padding-left:10px;padding-right:10px}}
.theme-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,background .15s ease;
}
.theme-btn:hover{border-color:var(--ink);background:var(--paper-2)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .sun{display:block}
[data-theme="dark"] .theme-btn .moon{display:none}
.burger{display:none;background:none;border:0;width:44px;height:44px;border-radius:10px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;transition:all .25s ease}

/* mobile nav */
.m-nav{
  display:none;position:fixed;inset:0;z-index:200;background:var(--dark);
  color:var(--dark-ink);padding:24px;overflow-y:auto;
}
.m-nav.open{display:block}
.m-nav .m-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.m-nav .m-top .wm{color:#fff}
.m-close{background:none;border:0;color:#fff;font-size:34px;line-height:1}
.m-nav a.m-link{
  display:block;padding:15px 4px;font-size:21px;font-weight:700;
  border-bottom:1px solid var(--dark-line);
}
.m-nav a.m-sub{display:block;padding:11px 4px 11px 20px;font-size:16px;color:var(--dark-muted);border-bottom:1px solid var(--dark-line)}
.m-nav a:active{color:var(--blue-on-dark)}
.m-nav .btn{margin-top:26px}

/* ---------- hero (home slider) ---------- */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  background:#070707;color:#fff;overflow:hidden;padding:120px 0;
  overflow-anchor:none;
}
.hero h1{min-height:2.28em}
.hero p.lead{min-height:4.95em}
.hero .slide-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s ease;transform:scale(1.06);
}
.hero .slide-bg.on{opacity:1;animation:heroZoom 7s linear forwards}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,8,10,.92) 20%,rgba(7,8,10,.55) 60%,rgba(7,8,10,.35));
}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:780px}
.hero h1{font-size:clamp(38px,6vw,68px);margin:22px 0 20px}
.hero h1 em{font-style:normal;color:var(--blue-lg-on-dark)}
.hero p.lead{font-size:clamp(17px,2vw,20.5px);color:rgba(255,255,255,.82);max-width:620px;margin-bottom:38px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-dots{display:flex;gap:9px;margin-top:56px}
.hero-dots button{
  width:34px;height:4px;border-radius:99px;border:0;
  background:rgba(255,255,255,.25);transition:background .3s ease;
}
.hero-dots button.on{background:var(--blue-lg-on-dark)}
.hero-badges{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:46px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  color:rgba(255,255,255,.6);text-transform:uppercase;
}
.hero-badges span{display:flex;align-items:center;gap:8px}
.hero-badges svg{width:15px;height:15px;color:var(--blue-lg-on-dark)}

/* page hero (inner pages) */
.page-hero{
  background:#070707;color:#fff;position:relative;overflow:hidden;
  padding:110px 0 90px;
}
.page-hero .ph-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28}
.page-hero .ph-fade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,8,10,.94) 30%,rgba(7,8,10,.55))}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(34px,5vw,54px);margin:20px 0 16px;max-width:800px}
.page-hero h1 em{color:var(--blue-lg-on-dark)}
.page-hero p{font-size:19px;color:rgba(255,255,255,.8);max-width:640px}
.crumbs{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:34px}
.crumbs a:hover{color:var(--blue-on-dark)}
.crumbs b{color:#fff;font-weight:600}
/* the page's own name never splits, so the trail cannot end on one lonely word (revamp, 2026-10-11) */
.crumbs b{white-space:nowrap}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;position:relative;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card::after{
  content:'';position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--accent);transition:width .3s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::after{width:100%}
.card h3{font-size:20.5px;margin:20px 0 10px}
.card p{color:var(--muted);font-size:16px}
.card .link-more{margin-top:20px}
.icon-chip{
  width:56px;height:56px;border-radius:15px;
  background:var(--accent-soft);color:var(--accent-soft-ink);
  display:flex;align-items:center;justify-content:center;
}
.icon-chip svg{width:26px;height:26px}
.icon-chip.emoji{font-size:26px;line-height:1}
.card:hover .icon-chip{background:var(--btn-bg,#2E6BD3);color:#fff;transition:all .25s ease}

.on-dark .card{background:var(--dark-2);border-color:var(--dark-line)}
.on-dark .card h3{color:var(--dark-ink)}
.on-dark .card p{color:var(--dark-muted)}
.on-dark .icon-chip{background:rgba(255,255,255,.14);color:#fff}
.on-dark .card::after{background:#fff}
.on-dark .link-more{color:var(--blue-on-dark)}

/* numbered steps */
.step{position:relative;padding:34px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:transform .22s ease,box-shadow .22s ease}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step .num{
  font-family:var(--mono);font-weight:700;font-size:15px;
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--dark);color:#fff;margin-bottom:20px;
}
.step:hover .num{background:var(--accent)}
.step h3{font-size:19.5px;margin-bottom:9px}
.step p{color:var(--muted);font-size:15.5px}

/* ---------- home: about split ---------- */
.about-split{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center}
.about-media{position:relative}
.about-media .ph{border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.about-media .ph img{width:100%;height:520px;object-fit:cover}
.exp-badge{
  position:absolute;right:-24px;bottom:-24px;
  background:var(--dark);color:#fff;border-radius:20px;
  padding:26px 30px;box-shadow:var(--shadow);
  border-top:3px solid var(--blue-lg-on-dark);
}
.exp-badge .big{font-size:44px;font-weight:800;line-height:1;color:#fff}
.exp-badge .small{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-muted);margin-top:8px}
.about-copy h2{font-size:clamp(30px,3.6vw,42px);margin:16px 0 18px}
.about-copy p{color:var(--muted);margin-bottom:16px}
.welcome-note{
  margin-top:28px;padding:24px 26px;border-left:3px solid var(--accent);
  background:var(--paper-2);border-radius:0 14px 14px 0;
}
.welcome-note b{display:block;margin-bottom:6px;font-size:16.5px}
.welcome-note p{font-size:15.5px;margin:0}
.about-copy .btn{margin-top:30px}
.about-copy ul.ticks{margin-top:8px}
.ticks li{display:flex;gap:12px;align-items:flex-start;padding:7px 0;font-size:16px;font-weight:500}
.ticks li svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:3px}

/* ---------- industries ---------- */
.ind-card{
  display:flex;gap:18px;align-items:flex-start;
  padding:24px 24px;border:1px solid var(--line);border-radius:16px;background:var(--paper);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ind-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ind-card .icon-chip{width:48px;height:48px;border-radius:12px;flex:none}
.ind-card .icon-chip svg{width:22px;height:22px}
.ind-card h3{font-size:17px;margin-bottom:4px}
.ind-card p{font-size:14.5px;color:var(--muted)}

/* ---------- regions (where the work happens) ---------- */
.region{
  background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--radius);
  padding:30px 28px;transition:transform .22s ease,border-color .22s ease;
}
.region:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.5)}
.region .flagline{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}
.region h3{font-size:21px;color:#fff}
.region .hold{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  background:#fff;color:var(--accent-deep);padding:5px 10px;border-radius:99px;white-space:nowrap;
}
.region .kc{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--blue-on-dark);text-transform:uppercase;margin-bottom:8px}
.region p{font-size:14.5px;color:var(--dark-muted)}

/* ---------- plans (the three shapes) ---------- */
.plan{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 32px;display:flex;flex-direction:column;gap:14px;
  transition:transform .22s ease,box-shadow .22s ease;position:relative;overflow:hidden;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan h3{font-size:22px;display:flex;align-items:center;gap:10px}
.plan p{color:var(--muted);font-size:16px;flex:1}
.plan .price{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);font-weight:700;padding-top:14px;border-top:1px solid var(--line)}
.plan.fill{background:var(--dark);color:#fff;border-color:transparent}
.plan.fill p{color:var(--dark-muted)}
.plan.fill .price{color:var(--blue-on-dark);border-top-color:var(--dark-line)}

/* ---------- client logos ---------- */
.logos{display:grid;grid-template-columns:repeat(8,1fr);gap:16px;align-items:center}
.logos .logo{
  height:82px;border:1px solid var(--line);border-radius:14px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:16px 16px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.logos .logo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.logos img{max-height:40px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:all .2s ease}
.logos .logo:hover img{filter:none;opacity:1}
[data-theme="dark"] .logos img{filter:grayscale(1) invert(1);opacity:.7}
[data-theme="dark"] .logos .logo:hover img{filter:invert(1);opacity:1}
.logos .more{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);font-weight:700}
/* 15 logos and the "+ 100 more" tile since 14 October 2026 (Reliance off; Kothamas, SattvaRig and
   Internet Lifestyle Hub on, his word). 8 across on a laptop is two full rows. At 3 across the last
   tile fills its own row, at 2 across it pairs with the last logo, so no row is ever ragged. */

/* ---------- stats band ---------- */
.stats-band{padding:78px 0}
.stats-band .grid{gap:0}
.stat{
  text-align:center;padding:10px 20px;
  border-right:1px solid var(--dark-line);
}
.stat:last-child{border-right:0}
.stat .n{font-size:clamp(40px,5vw,58px);font-weight:800;color:#fff;line-height:1}
.stat .n em{font-style:normal;color:var(--blue-lg-on-dark)}
.stat .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dark-muted);margin-top:12px}

/* ---------- FAQ ---------- */
.faq-split{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.faq-media{position:sticky;top:110px}
.faq-media img{border-radius:22px;width:100%;height:440px;object-fit:cover;box-shadow:var(--shadow)}
.faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:var(--paper);overflow:hidden;transition:border-color .2s ease}
.faq-item[open]{border-color:var(--accent);box-shadow:var(--shadow)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 24px;
  font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .pm{
  flex:none;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;color:var(--muted);transition:all .2s ease;
}
.faq-item[open] summary .pm{background:var(--btn-bg,#2E6BD3);border-color:var(--btn-bg,#2E6BD3);color:#fff;transform:rotate(45deg)}
.faq-item .faq-a{padding:0 24px 22px;color:var(--muted);font-size:15.5px}
.faq-item .faq-a a{color:var(--accent-text);font-weight:600}

/* ---------- gallery / projects ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal-item{
  border-radius:16px;overflow:hidden;cursor:pointer;position:relative;
  aspect-ratio:4/3;background:var(--paper-2);display:block;
}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gal-item:hover img{transform:scale(1.06)}
.gal-item::after{
  content:'';position:absolute;inset:0;
  /* a deeper band under the caption, so the words read on a pale photo too (go live check, 14 October 2026) */
  background:linear-gradient(to top,rgba(7,20,46,.94) 0,rgba(7,20,46,.74) 24%,transparent 60%);
  opacity:1;transition:opacity .3s ease;
}
.gal-item:hover::after{opacity:1}
.gal-item .cap{
  position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.gal-item .cap b{display:block;font-size:17px;line-height:1.25}
.gal-item .cap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-on-dark);display:block;margin-bottom:6px}
.lightbox{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(7,8,10,.94);align-items:center;justify-content:center;padding:5vw;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;border-radius:12px}
.lightbox button{
  position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;
  width:52px;height:52px;border-radius:50%;font-size:22px;
  display:flex;align-items:center;justify-content:center;
}
.lightbox button:hover{background:var(--accent)}
.lb-close{top:26px;right:26px}
.lb-prev{left:26px;top:50%;transform:translateY(-50%)}
.lb-next{right:26px;top:50%;transform:translateY(-50%)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;padding:110px 0;
}
.cta-band .cta-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-size:clamp(30px,4.4vw,48px);margin:18px auto 16px;max-width:720px}
.cta-band p{color:var(--dark-muted);max-width:560px;margin:0 auto 38px;font-size:18px}
.cta-band .hero-ctas{justify-content:center}

/* ---------- service detail ---------- */
.svc-layout{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.svc-side{position:sticky;top:110px}
.svc-side .side-box{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.svc-side .side-box h4{padding:20px 24px;background:var(--dark);color:#fff;font-size:15px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.svc-side a{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 24px;border-top:1px solid var(--line);
  font-weight:600;font-size:15px;transition:all .15s ease;
}
.svc-side a:hover{background:var(--paper-2);color:var(--accent-text);padding-left:28px}
.svc-side a.on{background:var(--accent);color:#fff}
.svc-side .help{
  margin-top:22px;border-radius:var(--radius);background:var(--dark);color:#fff;
  padding:28px 26px;border-top:3px solid var(--blue-lg-on-dark);
}
.svc-side .help b{font-size:18px;display:block;margin-bottom:8px}
.svc-side .help p{font-size:14px;color:var(--dark-muted);margin-bottom:16px}
.svc-side .help a{display:flex;gap:9px;align-items:center;font-weight:700;font-size:15px;padding:0;border:0;color:var(--blue-on-dark)}
.svc-side .help a:hover{background:none;padding-left:0;color:#fff}
.svc-body h2{font-size:clamp(26px,3vw,36px);margin:14px 0 18px}
.svc-body>p{color:var(--muted);margin-bottom:16px}
.vas{margin:26px 0 8px}
.vas b{display:block;font-size:17px;margin-bottom:14px}
.vas li{
  display:flex;gap:12px;align-items:flex-start;padding:9px 0;
  color:var(--ink);font-weight:500;font-size:16px;
}
.vas li svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:3px}
.svc-photo{border-radius:18px;overflow:hidden;margin:34px 0;box-shadow:var(--shadow)}
.svc-photo img{width:100%;height:340px;object-fit:cover}

/* ---------- about page extras ---------- */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.vm-card{border-radius:var(--radius);padding:32px 30px;background:var(--dark);color:#fff;border-top:3px solid var(--blue-lg-on-dark)}
.vm-card h3{font-size:20px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.vm-card h3 svg{width:22px;height:22px;color:var(--blue-on-dark)}
.vm-card p{font-size:15.5px;color:var(--dark-muted)}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{
  font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.04em;
  padding:13px 24px;border-radius:999px;border:1px solid var(--dark-line);
  color:var(--dark-ink);background:var(--dark-2);
  transition:all .2s ease;
}
.chip:hover{border-color:#fff;color:#fff;transform:translateY(-3px)}
.cert{
  text-align:center;padding:44px 30px;border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .22s ease,box-shadow .22s ease;background:var(--paper);
}
.cert:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.cert .icon-chip{margin:0 auto 20px}
.cert h3{font-family:var(--mono);font-size:15px;letter-spacing:.14em}
.prose p{color:var(--muted);margin-bottom:14px;font-size:17.5px}
.prose p b{color:var(--ink)}
.prose .line{display:block;font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--ink);letter-spacing:-.02em;line-height:1.2;margin:8px 0 18px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.office{
  border:1px solid var(--line);border-radius:16px;padding:26px 26px;margin-bottom:16px;
  transition:box-shadow .2s ease,border-color .2s ease;background:var(--paper);
}
.office:hover{box-shadow:var(--shadow);border-color:transparent}
.office h3{font-size:18px;display:flex;gap:10px;align-items:center;margin-bottom:10px}
.office h3 svg{width:19px;height:19px;color:var(--accent);flex:none}
.office p{font-size:15px;color:var(--muted);margin-bottom:6px}
.office a{color:var(--accent-text);font-weight:600}
.office a:hover{text-decoration:underline}
.form-card{
  border:1px solid var(--line);border-radius:22px;padding:42px 40px;
  box-shadow:var(--shadow);background:var(--paper);
}
.form-card h3{font-size:24px;margin-bottom:8px}
.form-card>p{color:var(--muted);font-size:15.5px;margin-bottom:28px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:13.5px;margin-bottom:7px}
.field label em{color:var(--accent-text);font-style:normal}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:15.5px;background:var(--field);color:var(--ink);
  transition:border-color .15s ease,background .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--field-focus)}
.field textarea{min-height:130px;resize:vertical}
.form-note{font-size:13px;color:var(--muted);margin-top:14px}
.fit-list li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:16px;color:var(--ink)}
.fit-list li svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--accent)}
.fit-list.no li svg{color:var(--muted)}
.fit-list b{color:var(--ink)}

/* ---------- footer: the navy slab, fixed light ink, ignores the theme ---------- */
footer.site{background:var(--dark);color:var(--dark-muted);padding:80px 0 0}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:44px;padding-bottom:56px}
.f-grid h4{color:#fff;font-size:15px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:22px}
.f-brand .brand{margin-bottom:20px}
.f-brand .wm{color:#fff;font-size:21px}
.f-brand p{font-size:15px;max-width:300px;margin-bottom:18px}
.f-iec{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--dark-ink);background:var(--dark-2);border:1px solid var(--dark-line);display:inline-block;padding:7px 14px;border-radius:8px}
.f-grid ul li{margin-bottom:11px}
.f-grid ul a{font-size:15px;color:var(--dark-muted);transition:color .15s ease,padding-left .15s ease}
.f-grid ul a:hover{color:#fff;padding-left:5px}
.f-contact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:14.5px}
.f-contact svg{width:16px;height:16px;color:var(--blue-on-dark);flex:none;margin-top:4px}
.f-contact a{color:var(--dark-ink)}
.f-contact a:hover{color:var(--blue-on-dark)}
.f-social{display:flex;gap:10px;margin-top:20px}
.f-social a{
  width:40px;height:40px;border-radius:10px;border:1px solid var(--dark-line);
  display:flex;align-items:center;justify-content:center;color:var(--dark-ink);
  transition:all .2s ease;
}
.f-social a:hover{background:#fff;border-color:#fff;color:var(--accent-deep);transform:translateY(-3px)}
.f-social svg{width:17px;height:17px}
.f-bottom{
  border-top:1px solid var(--dark-line);padding:26px 0;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:14px;
}
.f-bottom .credit a{color:#fff;font-weight:700}
.f-bottom .credit a:hover{text-decoration:underline}

/* the floating call button (the template's chat bubble, pointed at the booking page) */
.call-float{
  position:fixed;right:22px;bottom:22px;z-index:150;
  height:58px;padding:0 22px 0 16px;border-radius:999px;background:var(--btn-bg,#2E6BD3);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:15px;
  box-shadow:0 12px 30px -8px rgba(46,107,211,.7);
  transition:transform .2s ease,background .2s ease;
}
.call-float:hover{transform:scale(1.05);background:var(--accent-deep)}
.call-float svg{width:22px;height:22px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero .slide-bg.on{animation:none}
}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .about-split,.faq-split,.contact-grid{grid-template-columns:1fr;gap:44px}
  .svc-layout{grid-template-columns:1fr}
  .svc-side{position:static}
  .faq-media{position:static}
  .f-grid{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
  .logos .logo:last-child{grid-column:1 / -1}
  .stat{border-right:0;border-bottom:1px solid var(--dark-line);padding:26px 10px}
  .stat:last-child{border-bottom:0}
  .stats-band .g4{grid-template-columns:1fr 1fr;gap:0}
  .stats-band .stat:nth-child(odd){border-right:1px solid var(--dark-line)}
  .stats-band .stat{border-bottom:1px solid var(--dark-line)}
  .stats-band .stat:nth-child(3),.stats-band .stat:nth-child(4){border-bottom:0}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  nav.main{display:none}
  .nav-cta .btn{display:none}
  .burger{display:block}
}
@media(max-width:640px){
  body{font-size:16.5px}
  section{padding:68px 0}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr}
  .vm-grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .logos .logo:last-child{grid-column:auto}
  .exp-badge{right:8px;bottom:-20px;padding:20px 22px}
  .exp-badge .big{font-size:34px}
  .about-media .ph img{height:380px}
  .topbar .tb-left .tb-hide{display:none}
  .topbar .mono{display:none}
  .form-card{padding:30px 22px}
  .hero{min-height:78vh}
  .stats-band .g4{grid-template-columns:1fr}
  .stats-band .stat{border-right:0 !important}
  .stats-band .stat:nth-child(3){border-bottom:1px solid var(--dark-line)}
  .wm{font-size:19px}
  .call-float span{display:none}
  .call-float{width:58px;padding:0}
}

/* ==========================================================================
   EXPERIENTIAL LAYER: the progress bar, card watermarks and the route scrub.
   imm.js injects the elements; these rules style them. Without JS none of
   these elements exist and the page is plain.
   ========================================================================== */

/* the progress bar across the top of the viewport */
.voyage-bar{
  position:fixed;top:0;left:0;right:0;height:0;z-index:200;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
}
.voyage-bar.vb-on{opacity:1}
.voyage-bar .vb-line{position:absolute;top:0;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 22px)}
.voyage-bar .vb-ship{position:absolute;top:-4px;width:30px;height:15px;color:var(--accent);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.voyage-bar .vb-ship svg{width:100%;height:100%;display:block}

/* card depth watermarks */
.card,.ind-card,.step,.region,.cert,.office,.plan{overflow:hidden;position:relative}
.card>*:not(.wmark),.ind-card>*:not(.wmark),.step>*:not(.wmark),.region>*:not(.wmark),.cert>*:not(.wmark),.office>*:not(.wmark),.plan>*:not(.wmark){position:relative;z-index:1}
.wmark{position:absolute;right:-24px;bottom:-28px;width:150px;height:150px;
  color:var(--accent);opacity:.055;pointer-events:none;z-index:0;
  transform:rotate(-9deg);transition:opacity .3s ease,transform .3s ease}
.wmark svg{width:100%;height:100%;display:block;stroke-width:1}
.wmark.wmark-txt{display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:120px;line-height:1}
.wmark.wmark-emoji{font-size:110px;filter:grayscale(1)}
.card:hover .wmark,.ind-card:hover .wmark,.step:hover .wmark,.plan:hover .wmark{opacity:.11;transform:rotate(-9deg) scale(1.05)}
.on-dark .wmark,.plan.fill .wmark{color:#fff;opacity:.07}

/* the route scrub: the marker travels the lane through How It Works */
.route-wrap{margin:0 0 46px}
#route-scrub{width:100%;height:auto;display:block;overflow:visible}
#route-scrub .rs-sea{stroke:var(--line);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round;fill:none}
#route-scrub .rs-wake{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;fill:none}
#route-scrub .rs-boat{color:var(--accent)}
#route-scrub .rs-port circle{fill:var(--paper);stroke:var(--line);stroke-width:2;transition:all .3s ease}
#route-scrub .rs-port text{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  fill:var(--muted);text-transform:uppercase;text-anchor:middle;transition:fill .3s ease}
#route-scrub .rs-port.lit circle{fill:var(--accent);stroke:var(--accent)}
#route-scrub .rs-port.lit text{fill:var(--accent-text);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .voyage-bar{display:none}
}
@media (max-width:640px){
  #route-scrub .rs-port text{display:none}
  #route-scrub .rs-port circle{r:9}
}

/* ==========================================================================
   THE NEW HOME PAGE (revamp builder step 43, October 2026). Nine sections.
   Everything here is home only. It sits ABOVE the dark theme block on purpose,
   so that block still wins where both speak.
   ========================================================================== */
/* 1. the problem: text on the left, the first proof on the right, on the navy slab */
.hero.hero-split{background:var(--dark);min-height:0;padding:104px 0 96px}
.hero.hero-split h1{min-height:0;font-size:clamp(34px,4.5vw,58px);margin:22px 0 20px}
.hero.hero-split p.lead{min-height:0;max-width:560px}
/* the promise always gets a line of its own, never split from itself */
.hero.hero-split h1 em{display:block}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.hero-split .hero-inner{max-width:none}
.hero-shot{display:grid;gap:12px;justify-items:start}
/* a screen, framed like a window. Used in sections 1, 3, 4 and 5 */
.shot{margin:0;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);width:100%}
.shot-bar{display:flex;gap:6px;padding:10px 12px;background:#EEF1F6;border-bottom:1px solid rgba(28,36,49,.1)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#C5CCD8}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#55606E;background:#fff;padding:10px 14px;border-top:1px solid rgba(28,36,49,.1);text-wrap:balance}
.hero-split .shot,.demo-band .shot{border-color:rgba(255,255,255,.22);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
/* a part that does not exist yet. Says so, and names the step that makes it */
.standin{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--muted);border-radius:999px;padding:5px 12px;text-wrap:balance}
.on-dark .standin,.hero .standin{color:var(--blue-on-dark);border-color:var(--blue-on-dark)}
/* 2. logos and three plain facts */
.logo-band{padding:70px 0}
.facts{margin:44px auto 0;gap:0;max-width:760px}
.fact{text-align:center;padding:8px 18px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact .n{font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.1;color:var(--ink)}
.fact .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px;text-wrap:balance}
/* 3. the system */
.sys-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start}
.sys-main{display:grid;gap:12px;justify-items:start}
.sys-parts{display:grid;gap:18px}
.sys-parts .card{padding:26px 26px;display:grid;grid-template-columns:56px 1fr;column-gap:18px;align-items:start}
.sys-parts .card .icon-chip{grid-row:span 2}
.sys-parts .card h3{margin:2px 0 6px}
/* 4. the two cases */
.case{background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 26px;display:grid;gap:14px;align-content:start;justify-items:start}
.case h3{font-size:22px;margin-top:6px}
.case p{color:var(--muted);font-size:16px}
.case-empty{width:100%;aspect-ratio:1600/1085;border-radius:16px;border:1px dashed var(--muted);display:grid;place-items:center;padding:20px;text-align:center}
.case-empty span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-wrap:balance}
/* 5. the demo band */
.demo-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.demo-band h2{font-size:clamp(30px,4vw,44px);margin:16px 0 14px}
.demo-band p{color:var(--dark-muted);font-size:18px;margin-bottom:32px;max-width:480px}
.demo-shot{display:block;transition:transform .22s ease}
.demo-shot:hover{transform:translateY(-6px)}
/* 6. STORM: a row of real cover slides */
.storm-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.storm-slide{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.storm-slide img{width:100%;height:auto;display:block}
.storm-note{text-align:center;color:var(--muted);font-size:15.5px;margin-top:22px;text-wrap:balance}
.storm-note a{color:var(--accent-text);font-weight:700}
/* THE STORM PAGE: sketch cards, the loop and the wall */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/caveat600-normal-latin.woff2') format('woff2')}
.sk{margin:0}
.sk-img{position:relative;container-type:inline-size;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#F4EFE4;box-shadow:var(--shadow)}
.sk-img img{display:block;width:100%;height:auto}
.sk-lab{position:absolute;font-family:var(--mono);font-weight:600;font-size:max(8px,1.5cqw);line-height:1.25;letter-spacing:.14em;text-transform:uppercase;color:#23262B;white-space:nowrap}
.sk-c{transform:translateX(-50%);text-align:center}
.sk-r{transform:translateX(-100%);text-align:right}
.sk-num{position:absolute;transform:translate(-50%,-50%);width:max(18px,3.4cqw);height:max(18px,3.4cqw);border-radius:50%;background:#2E6BD3;color:#fff;font-family:var(--mono);font-weight:700;font-size:max(10px,1.7cqw);display:grid;place-items:center}
.sk-cap{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0 26px;font-family:'Caveat',cursive;font-weight:600;font-size:25px;line-height:1.15;color:var(--accent-text)}
.sk-cap svg{flex:none;width:30px;height:20px;margin-top:2px}
.sk-cap span{text-wrap:balance}
.sk-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.sk-kinds{margin-top:44px}
.loop-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.loop-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.loop-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.loop-n{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-weight:700;font-size:14px;display:grid;place-items:center}
.loop-steps b{display:block;font-size:17.5px;line-height:1.3;color:var(--ink)}
.loop-steps p{margin:3px 0 0;color:var(--muted);font-size:15.5px;line-height:1.5}
.loop-one{max-width:760px;margin:54px auto 0}
.sw-rows{display:grid;gap:18px}
.sw-row{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:22px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:18px;background:var(--card)}
.sw-art,.sw-car{min-width:0}
.sw-lab{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
.sw-row h3{font-size:19px;line-height:1.28;margin:0;text-wrap:balance}
.sw-art p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.5;text-wrap:balance}
.sw-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.sw-strip:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
.sw-strip img{flex:none;width:168px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px;scroll-snap-align:start;border:1px solid var(--line)}
.sw-strip.sw-wide img{width:300px;aspect-ratio:16/9}
/* loops on the wall (15 October 2026): reels stand 9:16, GIFs and article pictures lie wide */
.sw-strip video{flex:none;width:300px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;scroll-snap-align:start;border:1px solid var(--line);background:#0B1220}
.sw-strip.sw-tall video{width:150px;aspect-ratio:9/16}
.sw-strip.sw-wide img[width="800"]{aspect-ratio:16/10}
.sw-more{margin-top:18px}
.sw-more>summary{list-style:none;cursor:pointer;width:max-content;max-width:100%;margin:26px auto 0;padding:14px 28px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;font-size:15.5px;color:var(--ink)}
.sw-more>summary::-webkit-details-marker{display:none}
.sw-more>summary:hover{border-color:var(--ink)}
.sw-more[open]>summary{display:none}
@media(max-width:900px){
  .sk-pair,.loop-grid{grid-template-columns:minmax(0,1fr)}
  .loop-grid{gap:28px}
}
@media(max-width:820px){
  .sw-row{grid-template-columns:minmax(0,1fr);padding:14px;gap:14px}
  .sw-strip img{width:150px}
  .sw-strip.sw-wide img{width:240px}
  .sw-strip video{width:240px}
  .sw-strip.sw-tall video{width:130px}
  .sk-cap{font-size:22px;margin-left:12px}
}
}
/* 7. the operator */
.op-list{display:grid;gap:12px;margin:6px 0 30px}
.op-list li{position:relative;padding-left:26px;color:var(--muted)}
.op-list li::before{content:'';position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
/* 8. who it is not for */
.notfor{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:24px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card,#fff)}
.notfor .x{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-soft-ink);display:grid;place-items:center}
.notfor .x svg{width:20px;height:20px}
.notfor h3{font-size:19px;margin:2px 0 6px}
.notfor p{color:var(--muted);font-size:16px}
@media(max-width:1020px){
  .hero-grid,.demo-grid,.sys-grid{grid-template-columns:1fr;gap:40px}
  .storm-strip{grid-template-columns:repeat(4,1fr)}
}
/* nothing on the home page may be wider than its column, or text runs off a phone */
#cases .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.case,.notfor,.sys-main,.sys-parts,.hero-shot,.hero-split .hero-inner,.demo-grid>*{min-width:0}
.case>*,.sys-main>*,.hero-shot>*{max-width:100%}
@media(max-width:640px){
  .hero.hero-split{padding:72px 0 64px;min-height:0}
  #cases .grid{grid-template-columns:minmax(0,1fr)}
  /* a button label stays on one line, so it can never end on one word alone */
  .hero-split .btn,.cta-band .btn,#cases .btn,#storm .btn,.demo-band .btn{white-space:nowrap;padding:15px 20px;font-size:14.5px;gap:8px}
  .facts{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--line);padding:18px 10px}
  .fact:last-child{border-bottom:0}
  .storm-strip{grid-template-columns:repeat(2,1fr)}
  .sys-parts .card{grid-template-columns:48px 1fr;column-gap:14px}
}


/* THE TIMELINE on the About page (13 October 2026). One line down the side, a dot
   for each year. The entry that did not work has an open dot and says so. */
.tl{list-style:none;margin:0 auto;padding:0;max-width:680px;position:relative}
.tl::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 34px 40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--paper-2)}
.tl-when{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:6px}
.tl-item b{display:block;font-size:20px;line-height:1.28;color:var(--ink);text-wrap:balance}
.tl-item p{margin:5px 0 0;color:var(--muted);font-size:16px;line-height:1.55;text-wrap:balance}
.tl-miss::before{background:var(--paper-2);border:2px solid var(--muted)}
.tl-miss .tl-when{color:var(--muted)}
/* The JorrParivar entry links out to its own site. Drawn as one block on a chain:
   three linked squares, the last one filled, and the address in mono. */
.tl-block{display:inline-flex;align-items:center;gap:14px;margin-top:14px;padding:12px 16px;border:1px dashed var(--muted);border-radius:12px;background:var(--paper);color:var(--ink);text-decoration:none;max-width:100%;transition:border-color .2s,transform .2s}
.tl-block:hover,.tl-block:focus-visible{border-color:var(--accent-text);border-style:solid;transform:translateY(-2px)}
.tl-chain{display:flex;align-items:center;flex:none}
.tl-chain i{width:12px;height:12px;border-radius:3px;border:2px solid var(--muted);position:relative}
.tl-chain i+i{margin-left:7px}
.tl-chain i+i::before{content:'';position:absolute;left:-9px;top:3px;width:7px;height:2px;background:var(--muted)}
.tl-chain i:last-child{background:var(--accent);border-color:var(--accent)}
.tl-block-t{display:grid;gap:2px;min-width:0}
.tl-block-t span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-wrap:balance}
.tl-item .tl-block-t b{font-family:var(--mono);font-size:15.5px;font-weight:700;color:var(--accent-text);white-space:nowrap}
.tl-block>svg{width:18px;height:18px;flex:none;color:var(--accent-text)}


/* THE ABOUT PAGE, MOSTLY PICTURES (13 October 2026). His call: 60 to 70 parts picture,
   30 to 40 parts words. A split hero with a real photo, a row of photo cards, sketch
   cards, and rows that swipe on a phone. */
.page-hero.hero-split{padding:0}
.hero-split .hs{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:640px}
.hero-split .hs-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:90px 48px 90px max(4vw,calc((100vw - 1180px)/2))}
.hero-split .hs-photo{position:relative;min-height:420px;overflow:hidden}
.hero-split .hs-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-split .hs-photo::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#070707 0,rgba(7,7,7,0) 26%)}
.story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.story-c{margin:0;border-radius:22px;overflow:hidden;background:var(--card,#fff);border:1px solid var(--line);display:flex;flex-direction:column}
.story-c img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.story-c figcaption{padding:20px 22px 26px}
.story-n{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.story-c b{display:block;font-size:21px;line-height:1.26;color:var(--ink);text-wrap:balance}
.story-c p{margin:8px 0 0;color:var(--muted);font-size:15.5px;line-height:1.5;text-wrap:balance}
.swipe-hint{display:none;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.on-dark .swipe-hint{color:var(--dark-muted)}
.vid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
.vid-t{display:block;border-radius:18px;overflow:hidden;background:var(--card,#fff);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .22s ease,box-shadow .22s ease}
.vid-t:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.vid-i{display:block;position:relative;aspect-ratio:16/9;background:#0D0D0D}
.vid-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-c{position:relative;padding-right:74px!important}
.vid-c::after{content:'';position:absolute;right:18px;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;background:#2E6BD3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6v12l10-6z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat}
.vid-c{display:block;padding:16px 20px 20px}
.vid-c span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:5px}
.vid-c b{display:block;font-size:18.5px;line-height:1.28}
.card.pcard{padding:0}
.pcard img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#F4EFE4}
.pcard-b{padding:22px 26px 28px}
.card.pcard h3{margin:0 0 8px}
.on-dark .pcard .story-n{color:var(--blue-on-dark)}
@media(max-width:1020px){
  .hero-split .hs{grid-template-columns:1fr;min-height:0}
  .hero-split .hs-copy{padding:56px 4vw 28px}
  .hero-split .hs-photo{aspect-ratio:4/5;min-height:0;max-height:78vh;width:100%}
  .hero-split .hs-photo::before{background:linear-gradient(180deg,#070707 0,rgba(7,7,7,0) 12%)}
}
@media(max-width:820px){
  .swipe-m{display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:-4vw;padding-inline:4vw;scroll-padding-inline:4vw}
  .swipe-m::-webkit-scrollbar{display:none}
  .swipe-m>*{flex:0 0 82%;min-width:0;scroll-snap-align:start}
  .swipe-m+.swipe-hint{display:block}
  .storm-strip.swipe-m>*{flex-basis:58%}
  .vid2{gap:14px}
  .vid-c{padding:12px 14px 16px}.vid-c b{font-size:16px}
  .vid-c{padding-right:56px!important}.vid-c::after{width:34px;height:34px;right:12px;margin-top:-17px;background-size:16px}
}

/* THE HOME PAGE IN THE ABOUT PATTERN (13 October 2026). */
.home-hero h1{font-size:clamp(34px,4.5vw,58px);max-width:none}
.home-hero p.lead{font-size:clamp(17px,1.6vw,20px);max-width:560px;margin-bottom:34px}
.home-hero .hs-photo img{object-position:50% 35%}
.sys-one{display:grid;gap:12px;justify-items:center;max-width:920px;margin:44px auto 0}
.sys-one>*{max-width:100%}
a.card.pcard{color:inherit;text-decoration:none;display:block}

/* THE SERVICE PAGES IN THE SAME PATTERN (13 October 2026). The first paragraph shows,
   the rest opens on a tap, so no words were deleted. */
.svc-hero .hs{min-height:560px}
.more-read{margin:4px 0 22px}
.more-read summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-weight:700;font-size:15.5px;color:var(--accent-text);padding:8px 0}
.more-read summary::-webkit-details-marker{display:none}
.more-read summary::after{content:'+';font-family:var(--mono);font-size:18px;line-height:1}
.more-read[open] summary::after{content:'\2212'}
.more-read p{margin:10px 0 0;color:var(--muted)}

/* THE SERVICES HUB AND CONTACT IN THE SAME PATTERN (13 October 2026). */
.page-hero .hs-copy .hero-ctas{margin:26px 0 4px}
.pcard .link-more{margin-top:16px}
.office.office-main{background:var(--dark);border-color:transparent;color:#fff}
.office.office-main h3,.office.office-main p{color:#fff}
.office.office-main h3 svg{color:#fff}
.office.office-main a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* WHO IT IS FOR (13 October 2026, his call: the for you box must stand out). The yes box
   is the navy signature card with white ink, the same in both themes. The no box is quiet. */
.fit-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:6px 12px;margin-bottom:16px}
.card.fit-yes{background:var(--dark);border-color:transparent;box-shadow:0 26px 60px -26px rgba(30,74,150,.75)}
.card.fit-yes::after{display:none}
.card.fit-yes h3{color:#fff;font-size:24px}
.card.fit-yes .fit-list li,.card.fit-yes .fit-list span{color:rgba(255,255,255,.92)}
.card.fit-yes .fit-list b{color:#fff}
.card.fit-yes .fit-list svg{color:#fff;background:rgba(255,255,255,.16);border-radius:50%;padding:4px;width:24px;height:24px;flex:none}
.card.fit-yes .fit-tag{background:#fff;color:#0B2450}
.card.fit-no{background:transparent;border-style:dashed;box-shadow:none}
.card.fit-no:hover{transform:none;box-shadow:none;border-color:var(--line)}
.card.fit-no::after{display:none}
.card.fit-no h3{color:var(--muted)}
.card.fit-no .fit-list li,.card.fit-no .fit-list span{color:var(--muted)}
.card.fit-no .fit-list svg{color:var(--muted)}
.card.fit-no .fit-tag{border:1px solid var(--line);color:var(--muted)}

/* THE TWO DUBAI SEARCH PAGES IN THE SAME PATTERN (13 October 2026). The one paragraph
   answer and the price note are the navy signature card, the same in both themes. They
   are not .card, so the dark surfaces block below does not repaint them. */
.dubai-hero h1{font-size:clamp(31px,4.1vw,50px);max-width:none}
.dubai-hero .hs-copy>p{font-size:clamp(16px,1.35vw,18px);max-width:580px}
/* the long page name in the trail may wrap, and nothing in the words column may push it wider than the phone */
.dubai-hero .hs-copy{min-width:0}
.dubai-hero .hs-copy>*{max-width:100%}
.dubai-hero .crumbs{white-space:normal;line-height:1.9;text-wrap:balance}
.answer-sec{padding:64px 0}
.answer-nv{max-width:900px;margin:0 auto;background:var(--dark);color:#fff;border-radius:22px;padding:34px 38px;box-shadow:0 26px 60px -26px rgba(30,74,150,.75)}
.answer-nv .ak{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-on-dark);margin-bottom:12px}
.answer-nv p{font-size:17.5px;line-height:1.65;color:rgba(255,255,255,.92);margin:0}
.price-nv{max-width:760px;text-align:center}
.price-nv b{display:block;font-size:clamp(22px,3vw,30px);line-height:1.25;color:#fff;margin-bottom:12px;text-wrap:balance}
.price-nv p{text-wrap:balance}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.num-c{background:var(--card,#fff);border:1px solid var(--line);border-radius:18px;padding:24px 22px;min-width:0}
.num-c b{display:block;font-family:var(--mono);font-size:clamp(23px,2.5vw,31px);color:var(--accent-text);margin-bottom:8px;white-space:nowrap}
.num-c span{display:block;color:var(--muted);font-size:15px;line-height:1.5;text-wrap:balance}
.pcard .pc-sk{border:0;border-radius:0;box-shadow:none}
.moves-more{max-width:820px;margin:26px auto 0;text-align:center}
.moves-full{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;text-align:left}
.moves-full li{display:flex;gap:12px;color:var(--muted);font-size:16px;line-height:1.6}
.moves-full svg{width:18px;height:18px;flex:none;margin-top:5px;color:var(--accent-text)}
.moves-full b{color:var(--ink)}
@media(max-width:820px){
  .answer-sec{padding:44px 0}
  .answer-nv{padding:26px 22px}.answer-nv p{font-size:16.5px}
  .nums.swipe-m>*{flex-basis:70%}
}

/* The menu gained Newsletter on 13 October 2026. On laptop widths the Home word steps
   aside so the bar still fits: the logo beside it already goes home. */
@media(min-width:1021px) and (max-width:1519px){nav.main>a[data-nav="home"]{display:none}}

/* NOTES FROM DIGITAL PRATIK, the sign up box (13 October 2026). The same form in the
   footer, in the home page band and on /newsletter. The email box is 16px on purpose:
   anything smaller makes an iPhone zoom in and stay zoomed. */
.nl-form{width:100%;max-width:520px;min-width:0}
.nl-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.nl-form input{flex:1 1 0;min-width:0;height:54px;border-radius:999px;border:1px solid var(--line);background:var(--field,#fff);color:var(--ink);font:inherit;font-size:16px;padding:0 20px}
.nl-form input::placeholder{color:var(--muted)}
.nl-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nl-form .btn{flex:1 1 100%;justify-content:center;white-space:nowrap;height:54px}
/* first name and email side by side (15 October 2026, his word: Kit gets the first name to personalise every email) */
.nl-form input{flex:1 1 160px}
.nl-form .btn:disabled{opacity:.6;cursor:default}
.nl-note,.nl-msg{font-size:13.5px;line-height:1.45;margin:10px 4px 0;color:var(--muted);text-wrap:balance}
.nl-msg{font-weight:700;color:var(--ink)}
.nl-form.ok .nl-msg{color:var(--accent-text)}
.nl-form.ok .nl-note{display:none}
.nl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nl-band-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
.nl-band h2{font-size:clamp(28px,3.6vw,40px);margin:14px 0 10px}
.nl-band p{color:var(--muted);font-size:18px;text-wrap:balance}
.nl-band .nl-form{justify-self:end}
.nl-hero .hs-copy>p{margin-bottom:24px}
.nl-hero .nl-form input,.page-hero .nl-form input,footer.site .nl-form input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);color:#fff}
.page-hero .nl-form input::placeholder,footer.site .nl-form input::placeholder{color:rgba(255,255,255,.6)}
.page-hero .nl-note,footer.site .nl-note{color:rgba(255,255,255,.8)}
.page-hero .nl-msg,footer.site .nl-msg,.page-hero .nl-form.ok .nl-msg,footer.site .nl-form.ok .nl-msg{color:#fff}
.f-news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 44px;align-items:center;padding-bottom:44px;margin-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
.f-news h3{color:#fff;font-size:24px;margin:0 0 8px;text-wrap:balance}
.f-news p{font-size:15.5px;max-width:420px;text-wrap:balance}
.f-news .nl-form{justify-self:end}
.card.nl-step{padding:26px 26px 28px}
.nl-n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--btn-bg,#2E6BD3);color:#fff;font-family:var(--mono);font-weight:700;margin-bottom:16px}
.card.nl-step h3{margin:0 0 6px}
@media(max-width:820px){
  .nl-band-g,.f-news{grid-template-columns:1fr;gap:22px}
  .nl-band .nl-form,.f-news .nl-form{justify-self:stretch;max-width:none}
}
@media(max-width:480px){
  .nl-row{flex-direction:column}
  .nl-form input{flex:none;width:100%}
  .nl-form .btn{width:100%;justify-content:center}
}




/* THE BIG MENUS (14 October 2026, Digital Pratik's call). Blog and Services open a full width
   panel under the bar: Blog shows its categories and the newest articles, Services shows the
   three groups as tabs. The panel hangs from the header, so the drop item is stretched to the
   full bar height and the pointer never crosses a gap. */
nav.main{align-self:stretch}
nav.main .navdrop.mm{position:static;align-self:stretch;display:flex;align-items:center}
.navdrop.mm:hover>a svg,.navdrop.mm:focus-within>a svg{transform:rotate(180deg)}
.mm-panel{position:absolute;left:0;right:0;top:100%;background:var(--menu);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 34px 60px -30px rgba(0,0,0,.45);padding:34px 0 38px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.navdrop.mm:hover .mm-panel,.navdrop.mm:focus-within .mm-panel{opacity:1;visibility:visible;transform:none}
.mm-h{display:block;font-size:15px;font-weight:600;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.mm-all{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:14.5px;color:var(--accent-text);white-space:nowrap}
.mm-all svg{width:15px;height:15px}
.mm-blog{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}
.mm-cats{padding-right:44px}
.mm-catlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px}
.mm-catlist a{padding:8px 0;font-weight:600;font-size:15.5px;color:var(--ink);white-space:nowrap}
.mm-catlist a::before{content:"\203A";color:var(--accent-text);font-weight:800;margin-right:9px}
.mm-catlist a:hover{color:var(--accent-text)}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/caveat600-normal-latin.woff2') format('woff2')}
/* THE DESK (14 October 2026, his ask: unique, in the JorrDaar way, not a copy). The newest
   article is a paper note taped to the panel, slightly tilted, with its own ink sketch; the older
   ones are small paper slips. Paper and ink are fixed, the same in both themes, like the sketches. */
.mm-recent{background:var(--paper-2);margin:-34px 0 -38px;padding:30px 30px 34px;position:relative;overflow:hidden}
.mm-desk::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line) 1px,transparent 1.4px);background-size:16px 16px;opacity:.9;pointer-events:none}
.mm-desk>*{position:relative}
.mm-desk-h{display:flex;align-items:flex-end;gap:6px;margin:0 0 6px}
.mm-desk-h .hand{font-family:'Caveat',cursive;font-size:30px;font-weight:600;line-height:1;color:var(--accent-text);white-space:nowrap;transform:rotate(-2deg)}
.navdrop .mm-squig{width:84px;height:44px;color:var(--accent-text);margin:0 0 -22px 4px;stroke-width:2.6}
.mm-posts{display:grid;gap:12px}
.mm-note,.mm-slip{display:grid;align-items:center;background:#F6F1E7;color:#1C1C1C;border-radius:4px;box-shadow:0 14px 26px -16px rgba(0,0,0,.55),0 1px 0 rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease}
.mm-note{grid-template-columns:168px minmax(0,1fr);gap:16px;padding:12px 18px 12px 12px;transform:rotate(-1.4deg);margin:14px 6px 6px 2px;position:relative}
.mm-note::before{content:"";position:absolute;top:-11px;left:62%;width:86px;height:22px;margin-left:-43px;background:rgba(46,107,211,.38);transform:rotate(2.5deg);border-radius:2px}
.mm-note img{width:168px;height:112px;object-fit:cover;border:1px solid rgba(28,28,28,.12);background:#fff}
.mm-slip{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:8px 14px 8px 8px;transform:rotate(.9deg);margin:2px 18px 0 22px}
.mm-slip:nth-child(3){transform:rotate(-.7deg);margin-left:10px}
.mm-slip img{width:72px;height:48px;object-fit:cover;border:1px solid rgba(28,28,28,.1)}
.mm-note:hover,.mm-slip:hover{transform:rotate(0) translateY(-3px);box-shadow:0 22px 34px -18px rgba(0,0,0,.6)}
.mm-note i,.mm-slip i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#1C4FA8;margin-bottom:5px;white-space:nowrap}
.mm-note b{display:block;font-size:16.5px;line-height:1.28;font-weight:800;color:#1C1C1C;text-wrap:balance}
.mm-slip b{display:block;font-size:13.5px;line-height:1.3;font-weight:700;color:#1C1C1C;text-wrap:balance}
.mm-note .hand{display:inline-block;margin-top:6px;font-family:'Caveat',cursive;font-size:21px;font-weight:600;color:#1C4FA8;white-space:nowrap}
.mm-tabs{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:center;gap:24px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:26px}
.mm-lead{font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);white-space:nowrap}
.mm-tab{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:none;border:0;border-bottom:2px solid transparent;padding:8px 0;color:var(--ink);font:inherit;font-weight:700;font-size:16px;cursor:pointer;white-space:nowrap}
.mm-tab svg{width:28px;height:28px;color:var(--accent-text);flex:none}
.mm-tab.on{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.mm-pane{display:none;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:44px;align-items:start}
.mm-pane.on{display:grid}
.mm-intro p{font-size:15.5px;line-height:1.6;color:var(--muted);margin-bottom:18px;text-wrap:pretty}
.mm-intro .btn{font-size:14px;padding:12px 18px;white-space:nowrap}
.mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 28px}
.mm-grid a{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
.mm-grid b{display:flex;gap:9px;font-size:15.5px;font-weight:700;color:var(--ink)}
.mm-grid b::before{content:"\203A";color:var(--accent-text);font-weight:800;flex:none}
.mm-grid span{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin:3px 0 0 17px}
.mm-grid a:hover b{color:var(--accent-text)}
/* THE SERVICES DESK (14 October 2026, his ask: the same as the Blog desk). Every service is a
   paper note with its own ink sketch, taped to a dotted desk and tilted a little. */
.mm-sdesk{position:relative;padding:18px 18px 8px;margin:-18px -18px 0;border-radius:14px;background-color:var(--paper-2);background-image:radial-gradient(var(--line) 1px,transparent 1.4px);background-size:16px 16px;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px;margin:-18px 0 0 -18px}
.mm-grid a.mm-snote{position:relative;display:block;padding:10px 10px 14px;border:0;background:#F6F1E7;color:#1C1C1C;border-radius:4px;box-shadow:0 14px 26px -16px rgba(0,0,0,.55),0 1px 0 rgba(0,0,0,.06);transform:rotate(-1.2deg);transition:transform .25s ease,box-shadow .25s ease;margin-top:8px}
.mm-grid a.mm-snote:nth-child(2){transform:rotate(1deg)}
.mm-grid a.mm-snote:nth-child(3){transform:rotate(-.6deg)}
.mm-snote::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(46,107,211,.38);transform:rotate(2deg);border-radius:2px}
.mm-grid a.mm-snote:hover{transform:rotate(0) translateY(-3px);box-shadow:0 22px 34px -18px rgba(0,0,0,.6)}
.mm-snote img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid rgba(28,28,28,.12);background:#fff;margin-bottom:10px}
.mm-grid .mm-snote b{display:block;font-size:15px;font-weight:800;color:#1C1C1C;line-height:1.25;text-wrap:balance}
.mm-grid .mm-snote b::before{content:none}
.mm-grid .mm-snote span{display:block;margin:4px 0 0;font-size:13px;line-height:1.4;color:#55606E;text-wrap:balance}
.mm-grid a.mm-snote:hover b{color:#1C4FA8}
.mm-intro .mm-desk-h{margin:0 0 24px}
.navdrop .mm-intro .mm-squig{margin-bottom:-8px}

.mm-svc-all{margin-top:22px}

/* The blue top bar shows on laptop and desktop only (14 October 2026, his word). Below 1021px,
   where the phone menu takes over, it is hidden so the page starts on the logo and the menu. */
@media(max-width:1020px){.topbar{display:none}}

/* SHORTER LINES ON A PHONE (14 October 2026, his word: on a phone every line under a headline is
   to the point, three lines at most). A long line carries a short twin; the phone shows the twin. */
.m-only{display:none}
@media(max-width:640px){
  .m-only{display:inline}.d-only{display:none}
  /* the home page top on a phone: tight spacing under the photo band */
  .home-hero .hs-copy{padding-top:30px;padding-bottom:22px}
  .home-hero .hs-copy h1{margin:14px 0 14px}
  .home-hero p.lead{margin-bottom:0}
  .home-hero .hs-copy .hero-ctas{margin-top:22px}
  /* 15 October 2026, his word: the photo shows instantly on a phone. It comes first, as a band under the
     menu, fading into the headline below it, with his face in the top third of the band. */
  .home-hero .hs-photo{order:-1;aspect-ratio:auto;height:min(44svh,360px);min-height:250px;max-height:none}
  .home-hero .hs-photo img{object-position:50% 12%}
  .home-hero .hs-photo::before{background:linear-gradient(0deg,#070707 0,rgba(7,7,7,0) 22%)}
  .home-hero .hs-copy{padding-top:6px}
}

/* At 8 across the last logo tile is narrow, so "+100 more" stays on one line and steps down a size
   on small laptops (14 October 2026: it was breaking with the plus sign alone on a line). */
.logos .more{white-space:nowrap}
@media(min-width:1021px){.logos .logo .more{font-size:clamp(12.5px,1.1vw,14px);letter-spacing:.08em}.logos .logo:last-child{padding:16px 8px}}

/* THE TWO PAGES AFTER THE FORM (14 October 2026, his word: onto the template). thank-you.html for
   AED 10 million and up, a-message-from-pratik.html for under. Centred, one column, the video first. */
.ty{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,100px)}
.ty-wrap{max-width:900px;text-align:center}
.ty .eyebrow{justify-content:center}
.ty h1{margin:14px auto 0;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.1;text-wrap:balance}
.ty h1 em{display:block;font-style:normal;color:var(--accent-text)}
.ty-lead{margin:18px auto 0;max-width:62ch;color:var(--muted);font-size:1.08rem;line-height:1.6;text-wrap:balance}
.ty-video{position:relative;margin:30px auto 0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ty-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ty-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.ty-play img{width:100%;height:100%;object-fit:cover}
.ty-btn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--btn-bg,#2E6BD3);color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(0,0,0,.6);transition:transform .2s ease}
.ty-btn svg{width:34px;height:34px;margin-left:4px}
.ty-play:hover .ty-btn{transform:scale(1.06)}
.ty-box{margin:30px auto 0;padding:clamp(22px,3.4vw,32px);border:1px solid var(--line);border-radius:20px;background:var(--card);text-align:left}
.ty-box h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.ty-steps{list-style:none;margin:16px 0 0;display:grid;gap:14px}
.ty-steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.ty-steps .n{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--accent-text);color:var(--accent-text);display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:600}
.ty-steps p{margin:0;padding-top:8px;color:var(--muted);line-height:1.55}
.ty-steps b{color:var(--ink)}
.ty-kit{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.ty-more{margin:22px auto 0;max-width:62ch;color:var(--muted);line-height:1.6}
.ty-more a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ty-h2{margin:clamp(40px,6vw,64px) 0 0;font-size:clamp(1.5rem,3vw,2.2rem)}
.ty-sub{margin:10px auto 0;color:var(--muted)}
.ty-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;text-align:left}
.ty-card{display:grid;align-content:start;gap:8px;padding:12px 12px 18px;border:1px solid var(--line);border-radius:18px;background:var(--card);transition:transform .3s ease,border-color .3s ease}
.ty-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.ty-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:#F6F1E7;margin-bottom:6px;align-self:start}
.ty-k{padding:0 6px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.ty-card b{padding:0 6px;font-size:1.08rem;line-height:1.3;text-wrap:balance}
.ty-go{padding:0 6px;font-weight:700;font-size:.92rem;color:var(--accent-text)}
.ty-when p{margin:10px 0 18px;color:var(--muted);line-height:1.6}
.ty-when b{color:var(--ink)}
.ty-sketch{margin:30px auto 0;display:grid;gap:10px}
.ty-sketch-img{border-radius:20px;overflow:hidden;background:#F6F1E7;border:1px solid var(--line);aspect-ratio:3/2;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.ty-sketch-img img{display:block;width:100%;height:100%;object-fit:cover}
.ty-sketch .hand{font-family:'Caveat',cursive;font-weight:600;font-size:1.7rem;line-height:1.2;color:var(--accent-text)}
@media(max-width:640px){.ty-cards{grid-template-columns:minmax(0,1fr)}.ty-btn{width:68px;height:68px;margin:-34px 0 0 -34px}.ty-when .btn{width:100%;justify-content:center}}

/* SMART WEBSITES (15 October 2026, his ask). The sites we built play inside a glass panel on the
   page: screen recordings with every name, logo, phone and address blurred, never a link and never
   a frame of the real site. One site at a time, arrows, dots, a swipe, a laptop or phone view, and a
   short line that reads what is on screen. The stage is the navy signature, the same in both themes. */
.sw-stage{position:relative;overflow:hidden}
.sw-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 18% 12%,rgba(94,146,232,.32),transparent 70%),radial-gradient(50% 45% at 92% 88%,rgba(143,179,238,.2),transparent 70%),
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/44px 44px}
.sw-stage>.wrap{position:relative}
.sw-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 34px;max-width:900px}
.sw-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s ease,border-color .2s ease}
.sw-chip i{width:8px;height:8px;border-radius:50%;flex:none;border:1.5px solid #BDD5F9}
.sw-chip i.live{background:#4ADE9A;border-color:#4ADE9A}
.sw-chip:hover{border-color:rgba(255,255,255,.5)}
.sw-chip.on{background:#fff;color:#133875;border-color:#fff}
.sw-chip.on i:not(.live){border-color:#2E6BD3}
.sw-deck{position:relative;padding-bottom:22px}
.sw-deck::before,.sw-deck::after{content:"";position:absolute;left:5%;right:5%;bottom:10px;height:60%;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);z-index:0}
.sw-deck::after{left:10%;right:10%;bottom:0;background:rgba(255,255,255,.035)}
.sw-glass{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:center;padding:20px;border-radius:26px;
  background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 55%,rgba(255,255,255,.09));border:1px solid rgba(255,255,255,.24);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.3);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.sw-screen{position:relative;border-radius:16px;overflow:hidden;background:#0B1220;border:1px solid rgba(255,255,255,.18);box-shadow:0 26px 50px -24px rgba(0,0,0,.7)}
.sw-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(11,18,32,.92);border-bottom:1px solid rgba(255,255,255,.1)}
.sw-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
.sw-bar span{margin-left:10px;flex:1;height:18px;border-radius:999px;background:rgba(255,255,255,.08);display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,240,255,.7);white-space:nowrap;overflow:hidden}
.sw-view{position:relative;aspect-ratio:16/10;background:#0B1220}
.sw-view video,.sw-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.sw-view img{transition:opacity .4s ease}
.sw-view.playing img{opacity:0}
.sw-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(94,146,232,.0) 40%,rgba(143,179,238,.55) 50%,rgba(94,146,232,0) 60%,transparent);background-size:100% 220%;background-repeat:no-repeat;opacity:0}
.sw-scan.go{animation:swScan 1.1s ease-out}
@keyframes swScan{0%{opacity:1;background-position:0 -120%}100%{opacity:0;background-position:0 220%}}
.sw-pause{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,18,32,.6);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sw-pause svg{width:16px;height:16px}
.sw-pause .pl{display:none}
.sw-pause.paused .pl{display:block}.sw-pause.paused .pa{display:none}
.sw-glass.is-phone .sw-screen{width:min(100%,300px);margin:0 auto;border-radius:34px;border:7px solid #0B0F17;outline:1px solid rgba(255,255,255,.2)}
.sw-glass.is-phone .sw-bar{display:none}
.sw-glass.is-phone .sw-view{aspect-ratio:390/780}
.sw-info{display:flex;flex-direction:column;gap:16px;min-width:0;padding:6px 6px 6px 0}
.sw-status{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border-radius:999px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border:1px solid rgba(255,255,255,.3);color:#fff}
.sw-status i{width:8px;height:8px;border-radius:50%;border:1.5px solid #BDD5F9}
.sw-status.live{background:rgba(74,222,154,.14);border-color:rgba(74,222,154,.55)}
.sw-status.live i{background:#4ADE9A;border-color:#4ADE9A;box-shadow:0 0 0 0 rgba(74,222,154,.6);animation:swPing 2s infinite}
@keyframes swPing{70%{box-shadow:0 0 0 8px rgba(74,222,154,0)}100%{box-shadow:0 0 0 0 rgba(74,222,154,0)}}
.sw-count{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-on-dark)}
.sw-info h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;color:#fff;margin:0}
.sw-ai{border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;background:rgba(11,18,32,.38);min-height:104px}
.sw-ai b{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-on-dark);margin-bottom:8px}
.sw-ai b svg{width:15px;height:15px;color:#8FB3EE;animation:swGlow 2.4s ease-in-out infinite}
@keyframes swGlow{50%{opacity:.4}}
.sw-ai p{margin:0;color:#fff;font-size:16px;line-height:1.5;text-wrap:pretty}
.sw-ai p::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-2px;background:#8FB3EE;animation:swCaret 1s steps(1) infinite}
@keyframes swCaret{50%{opacity:0}}
.sw-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sw-tags li{padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
.sw-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.sw-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .2s ease}
.sw-arrow:hover{background:rgba(255,255,255,.2)}
.sw-arrow svg{width:18px;height:18px}
.sw-dots{display:flex;gap:7px}
.sw-dots button{width:9px;height:9px;padding:0;border-radius:999px;border:0;background:rgba(255,255,255,.35);cursor:pointer;transition:width .25s ease,background .25s ease}
.sw-dots button.on{width:26px;background:#fff}
.sw-toggle{display:inline-flex;margin-left:auto;padding:4px;border-radius:999px;background:rgba(11,18,32,.45);border:1px solid rgba(255,255,255,.18)}
.sw-toggle button{border:0;background:none;color:rgba(255,255,255,.8);font:inherit;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.sw-toggle button.on{background:#fff;color:#133875}
.sw-toggle button{display:inline-flex;align-items:center;gap:6px}
.sw-toggle button svg{width:16px;height:16px;flex:none}
.sw-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.sw-legend div{display:flex;gap:12px;align-items:flex-start;color:var(--dark-muted);font-size:15px;line-height:1.5}
.sw-legend b{color:#fff}
.sw-legend i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;border:1.5px solid #BDD5F9}
.sw-legend i.live{background:#4ADE9A;border-color:#4ADE9A}
.sw-legend svg{flex:none;width:18px;height:18px;margin-top:2px;color:#8FB3EE}
.sw-glass.swap .sw-screen,.sw-glass.swap .sw-info{animation:swIn .5s ease}
@keyframes swIn{from{opacity:.25;transform:translateX(var(--sw-dir,24px))}to{opacity:1;transform:none}}
@media(max-width:900px){
  .sw-glass{grid-template-columns:1fr;gap:20px;padding:14px}
  .sw-info{padding:0 4px 6px}
  .sw-ai{min-height:96px}
  .sw-legend{grid-template-columns:1fr;gap:12px}
}
@media(max-width:640px){
  .sw-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:-4vw;padding-inline:4vw;margin-bottom:22px}
  .sw-chips::-webkit-scrollbar{display:none}
  .sw-glass.is-phone .sw-screen{width:min(100%,270px)}
  .sw-toggle{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.sw-glass.swap .sw-screen,.sw-glass.swap .sw-info,.sw-scan.go,.sw-status.live i,.sw-ai b svg{animation:none}.sw-ai p::after{display:none}}
/* THE TOUR BAR (15 October 2026, his ask): under the screen, a progress bar with a pit stop for each part
   of the tour, the stop now playing and the one coming up, so a viewer can see there is more to watch. */
.sw-left{min-width:0;display:grid;gap:14px}
.sw-prog{padding:2px 4px 0}
.sw-track{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.16);cursor:pointer;margin:10px 0 0}
.sw-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#8FB3EE,#FFFFFF);box-shadow:0 0 14px rgba(143,179,238,.6)}
.sw-stops{position:absolute;inset:0}
.sw-stop{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:#133875;cursor:pointer;padding:0;transition:transform .2s ease,background .2s ease}
.sw-stop:first-child{margin-left:0}
.sw-stop span{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:8px;background:rgba(11,18,32,.88);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.sw-stop:first-child span{left:0;transform:none}
.sw-stop:last-child span{left:auto;right:-6px;transform:none}
.sw-stop:hover span,.sw-stop:focus-visible span{opacity:1}
.sw-stop.done{background:#fff;border-color:#fff}
.sw-stop.now{background:#fff;border-color:#8FB3EE;transform:scale(1.25);box-shadow:0 0 0 5px rgba(143,179,238,.28)}
.sw-stop.next{border-color:#fff;animation:swNext 1.6s ease-in-out infinite}
@keyframes swNext{50%{box-shadow:0 0 0 6px rgba(255,255,255,.18)}}
.sw-progtxt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;font-size:14.5px;color:var(--dark-muted)}
.sw-progtxt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-progtxt b{font-family:var(--mono);font-weight:600;color:#fff;margin-right:6px}
.sw-upnext{color:var(--blue-on-dark);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sw-sound{position:absolute;left:12px;bottom:12px;height:40px;padding:0 14px 0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(11,18,32,.6);color:#fff;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sw-sound svg{width:18px;height:18px}
.sw-sound .on{display:none}
.sw-sound.on .on{display:block}.sw-sound.on .off{display:none}
.sw-sound.on{background:#fff;color:#133875;border-color:#fff}
.sw-glass.is-phone .sw-prog{width:min(100%,300px);margin:0 auto}
.sw-glass.is-phone .sw-progtxt{flex-direction:column;align-items:center;gap:4px}
@media(max-width:640px){.sw-glass.is-phone .sw-prog{width:min(100%,270px)}.sw-progtxt{flex-direction:column;align-items:flex-start;gap:4px}}
@media(prefers-reduced-motion:reduce){.sw-stop.next{animation:none}}
/* ONE SCREEN ON A PHONE (15 October 2026, his word: "make it such that i dont have to scroll much"). Under
   641px the player is one compact screen: the field and its label, the recording at under half the screen
   height, the stop bar between the two arrows, the reading line and the laptop or phone switch. The tags and
   the dots are left out there, the field buttons above do that job. */
@media(max-width:640px){
  #showcase{padding-top:56px;padding-bottom:56px}
  #showcase .sec-head{margin-bottom:22px}
  .sw-chips{gap:8px;margin-bottom:12px}
  .sw-chip{padding:8px 13px;font-size:13.5px}
  .sw-deck{padding-bottom:12px}
  .sw-deck::before,.sw-deck::after{display:none}
  .sw-glass{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 10px;padding:12px;border-radius:20px;align-items:center}
  .sw-left,.sw-info{display:contents}
  .sw-status{grid-row:1;grid-column:1/3;justify-self:start;font-size:10px;padding:5px 9px;letter-spacing:.08em}
  .sw-count,.sw-tags,.sw-dots{display:none}
  .sw-info h3{grid-row:2;grid-column:1/-1;font-size:21px;margin:-2px 0 0}
  .sw-screen{grid-row:3;grid-column:1/-1}
  .sw-glass.is-phone .sw-screen{width:auto;height:clamp(230px,calc(100svh - 390px),410px);aspect-ratio:390/780;justify-self:center;border-width:5px;border-radius:26px}
  .sw-glass.is-phone .sw-view{aspect-ratio:auto;height:100%}
  .sw-sound{height:32px;padding:0 10px 0 8px;font-size:12px;left:8px;bottom:8px}
  .sw-sound svg{width:15px;height:15px}
  .sw-pause{width:32px;height:32px;right:8px;bottom:8px}
  .sw-pause svg{width:13px;height:13px}
  .sw-ctrl{display:contents}
  .sw-arrow{width:38px;height:38px}
  .sw-arrow svg{width:15px;height:15px}
  [data-sw-prev]{grid-row:4;grid-column:1}
  .sw-prog{grid-row:4;grid-column:2;padding:0;width:auto!important;margin:0!important}
  [data-sw-next]{grid-row:4;grid-column:3}
  .sw-track{margin:0}
  .sw-stop{width:14px;height:14px;margin:-7px 0 0 -7px}
  .sw-stop span{display:none}
  .sw-progtxt{flex-direction:row!important;justify-content:space-between;align-items:baseline!important;margin-top:8px;font-size:12.5px;gap:8px}
  .sw-upnext{font-size:10px;letter-spacing:.06em}
  .sw-ai{grid-row:5;grid-column:1/-1;min-height:0;padding:9px 12px;border-radius:12px}
  .sw-ai b{font-size:10px;margin-bottom:4px}
  .sw-ai p{font-size:14.5px;line-height:1.42}
  .sw-toggle{grid-row:1;grid-column:3;justify-self:end;margin:0;padding:3px}
  .sw-toggle button{padding:6px 10px}
  .sw-toggle button span,.sw-upnext{display:none}
  /* the floating Capacity Diagnostic button steps aside while the player is on screen, so it covers nothing */
  body.sw-on .call-float{opacity:0;pointer-events:none;transform:translateY(20px)}
  .sw-legend{margin-top:22px}
}
/* what makes it smart: real stills from the recordings */
.sw-smart .pcard img{aspect-ratio:16/10;object-position:50% 0;background:#0B1220}
/* the 3 plans, by name and what is in each. Prices are given on the call (his rule, 12 October 2026) */
.sw-plans{align-items:stretch}
.sw-plans .plan{gap:10px}
.sw-plans .plan .sw-tier{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.sw-plans .plan.fill .sw-tier{color:var(--blue-on-dark)}
.sw-plans .plan h3{font-size:28px;margin:0}
.sw-plans .plan>p{flex:0}
.sw-plans ul{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;flex:1;align-content:start}
.sw-plans .plan.fill ul{border-top-color:var(--dark-line)}
.sw-plans li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:15.5px;line-height:1.45;color:var(--ink)}
.sw-plans .plan.fill li{color:#fff}
.sw-plans li svg{width:18px;height:18px;margin-top:2px;color:var(--accent-text)}
.sw-plans .plan.fill li svg{color:#8FB3EE}
.sw-plans .sw-pick{align-self:flex-start;margin-bottom:2px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.14);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap}
.sw-note{max-width:760px;margin:30px auto 0;text-align:center;color:var(--muted)}
.sw-note b{color:var(--ink)}
/* THE PLANS IN THEIR OWN METAL (15 October 2026, his ask): Silver in silver, Gold highlighted in gold as
   the Recommended one, Platinum in platinum with a Best Value badge. Each metal has a light and a dark
   shade so its small type stays readable in both themes. */
.sw-plans .plan{--metal:linear-gradient(135deg,#7C8693,#4C5562);--metal-ink:#55606E;--metal-line:rgba(91,101,115,.45)}
[data-theme="dark"] .sw-plans .plan{--metal:linear-gradient(135deg,#F1F3F6,#AEB6C2 55%,#E3E7EC);--metal-ink:#C9CFD8;--metal-line:rgba(201,207,216,.4)}
.sw-plans .plan.p-gold{--metal:linear-gradient(135deg,#F7DC8F,#D4A944 50%,#F2CF73);--metal-ink:#F2CF73;--metal-line:rgba(242,207,115,.55)}
.sw-plans .plan.p-platinum{--metal:linear-gradient(135deg,#7D8BA0,#4E5B70);--metal-ink:#4E5B70;--metal-line:rgba(78,91,112,.45)}
[data-theme="dark"] .sw-plans .plan.p-platinum{--metal:linear-gradient(135deg,#FFFFFF,#CFE0F2 45%,#9FB3CC 75%,#EEF4FA);--metal-ink:#D6E3F2;--metal-line:rgba(214,227,242,.45)}
.sw-plans .plan::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--metal);z-index:2}
.sw-plans .plan h3{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:max-content;max-width:100%}
.sw-plans .plan .sw-tier,.sw-plans .plan.fill .sw-tier{color:var(--metal-ink)}
.sw-plans .plan li svg,.sw-plans .plan.fill li svg{color:var(--metal-ink)}
.sw-plans .plan:not(.fill){border-color:var(--metal-line)}
.sw-plans .plan.p-gold{box-shadow:0 0 0 2px #D4A944,0 40px 80px -36px rgba(212,169,68,.6);transform:translateY(-10px)}
.sw-plans .plan.p-gold:hover{transform:translateY(-14px)}
.sw-plans .sw-pick{background:linear-gradient(135deg,#F7DC8F,#D4A944);color:#2A1E02;font-weight:700;box-shadow:0 8px 20px -10px rgba(212,169,68,.8)}
.sw-plans .sw-pick.sw-best{background:linear-gradient(135deg,#FFFFFF,#D5E2F0 50%,#A9BCD4);color:#1C2430;box-shadow:0 8px 20px -10px rgba(120,150,190,.7)}
.sw-plans .plan.p-silver{background-image:linear-gradient(165deg,rgba(124,134,147,.10),rgba(124,134,147,0) 45%)}
.sw-plans .plan.p-platinum{background-image:linear-gradient(165deg,rgba(125,150,190,.12),rgba(125,150,190,0) 45%)}
[data-theme="dark"] .sw-plans .plan.p-silver{background-image:linear-gradient(165deg,rgba(225,230,236,.09),rgba(225,230,236,0) 45%)}
[data-theme="dark"] .sw-plans .plan.p-platinum{background-image:linear-gradient(165deg,rgba(207,224,242,.12),rgba(207,224,242,0) 45%)}
@media(max-width:900px){.sw-plans .plan.p-gold{transform:none}.sw-plans .plan.p-gold:hover{transform:translateY(-4px)}}

/* THE HOME BAND: words on one side, a deck of glass cards on the other that deals the sites in turn */
.sw-band{position:relative;overflow:hidden}
.sw-band-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.sw-band h2{font-size:clamp(30px,4vw,44px);margin:16px 0 14px}
.sw-band p{color:var(--dark-muted);font-size:18px;margin-bottom:30px;max-width:500px}
.sw-mini{position:relative;display:grid;padding-top:13%;color:#fff}
.sw-mini .sw-card{grid-area:1/1;position:relative;margin:0;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.24);background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.05));padding:10px 10px 0;box-shadow:0 40px 80px -40px rgba(0,0,0,.75);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sw-mini .sw-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:12px;background:#0B1220}
.sw-mini figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:12px 6px 14px}
.sw-mini figcaption b{font-size:16px;white-space:nowrap}
.sw-mini figcaption span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-on-dark);white-space:nowrap}
.sw-mini figcaption i{width:7px;height:7px;border-radius:50%;border:1.5px solid #BDD5F9}
.sw-mini figcaption i.live{background:#4ADE9A;border-color:#4ADE9A}
.sw-mini .sw-card{opacity:0;transform:translateY(40px) scale(.9)}
.sw-mini .sw-card.p0{opacity:1;transform:none;z-index:3}
.sw-mini .sw-card.p1{opacity:.55;transform:translate(3%,-7%) scale(.92);z-index:2}
.sw-mini .sw-card.p2{opacity:.3;transform:translate(6%,-14%) scale(.84);z-index:1}
.sw-mini .sw-card.out{opacity:0;transform:translate(-8%,10%) scale(1.02);z-index:4}
@media(max-width:900px){.sw-band-g{grid-template-columns:1fr;gap:40px}.sw-mini{margin-right:8%}}
@media(max-width:640px){.sw-band .btn{white-space:nowrap;padding:15px 20px;font-size:14.5px;gap:8px}.sw-mini figcaption span{display:none}}
/* the menu desk under Ads to scale now holds four notes */
.mm-grid.mm-sdesk.mm-sdesk4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mm-sdesk4 a.mm-snote b{font-size:14px}
.mm-sdesk4 a.mm-snote span{font-size:12.5px}

/* With the bigger desktop type (14 October 2026) the opening line under a page headline balances its
   lines, so it never ends on a short last line. */
@media(min-width:1021px){.page-hero p,.hero-split .hs-copy>p{text-wrap:balance}}















































/* ==========================================================================
   NOTES INVITES, THE NOTES POP-UP AND THE PHONE BUTTON (17 October 2026, his ask: more readers for
   Notes from Digital Pratik, fewer "book a call" asks). Markup: src/partials/notes-invite.html (the two
   inserts) and footer.html (pop-up, phone button, script). The script adds .ni-js on <html>; without
   it every insert simply shows its message and form. Input boxes stay 16px or an iPhone zooms in.
   ========================================================================== */
.ni{position:relative;margin:44px 0;border-radius:24px;padding:22px 22px 20px;text-align:left;font-size:16px;line-height:1.5;clear:both}
.ni *{box-sizing:border-box}
.ni-av{position:relative;flex:none;width:56px;height:56px;display:block}
.ni .ni-av img{display:block;width:100%;height:100%;max-width:none;border-radius:50%;object-fit:cover;margin:0;box-shadow:none}
.ni .ni-form{margin-top:16px;max-width:none}
.ni .nl-note{margin-top:8px}
.ni p.ni-b{margin:0;padding:11px 16px;border-radius:4px 18px 18px 18px;font-size:16px;line-height:1.5;max-width:100%;text-wrap:pretty}

/* 1. SAY HI: his message arrives like a chat, typing dots first */
.ni-hi{background:var(--card,#fff);border:1px solid var(--line);box-shadow:var(--shadow)}
.ni-hi::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,rgba(46,107,211,.7),rgba(46,107,211,0) 38%,rgba(46,107,211,0) 62%,rgba(94,146,232,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ni-chat{display:flex;gap:14px;align-items:flex-start}
.ni-hi .ni-av img{border:2px solid var(--card,#fff);box-shadow:0 0 0 2px var(--accent)}
.ni-on{position:absolute;right:0;bottom:1px;width:15px;height:15px;border-radius:50%;background:#22C55E;border:3px solid var(--card,#fff)}
.ni-msgs{min-width:0;flex:1}
.ni-who{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14px;color:var(--muted);margin:2px 0 7px}
.ni-who b{color:var(--ink);font-weight:800;font-size:15px}
.ni-thread{position:relative;display:grid;gap:7px;justify-items:start}
.ni-hi p.ni-b{background:var(--accent-soft);color:var(--ink)}
.ni-hi p.ni-b2{border-radius:18px}
.ni-wave{display:inline-block;transform-origin:70% 80%}
.ni-typing{position:absolute;left:0;top:0;display:none;gap:5px;align-items:center;height:46px;padding:0 17px;border-radius:4px 18px 18px 18px;background:var(--accent-soft)}
.ni-typing i{width:7px;height:7px;border-radius:50%;background:var(--accent-text);opacity:.5;animation:niDot 1s infinite ease-in-out}
.ni-typing i:nth-child(2){animation-delay:.15s}.ni-typing i:nth-child(3){animation-delay:.3s}
.ni-hi .ni-form{padding-left:70px}
.ni-js .ni-hi .ni-b,.ni-js .ni-hi .ni-form{opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.ni-js .ni-hi.s1 .ni-b1,.ni-js .ni-hi.s2 .ni-b2,.ni-js .ni-hi.s3 .ni-form{opacity:1;transform:none;visibility:visible;transition:opacity .45s ease,transform .45s ease,visibility 0s}
.ni-js .ni-hi.typing .ni-typing{display:flex}
.ni-hi.s1 .ni-wave{animation:niWave 1.4s ease .25s 2}

/* 2. THE CALL: he is ringing the reader. Answer opens his message and the form, the cross leaves a missed call */
.ni-call{background:radial-gradient(90% 120% at 100% 0,rgba(94,146,232,.3),transparent 60%),var(--dark);color:#fff;box-shadow:0 26px 60px -28px rgba(11,36,80,.8);overflow:hidden}
.ni-ring{display:flex;align-items:center;gap:16px}
.ni-call .ni-av{width:64px;height:64px}
.ni-call .ni-av img{position:relative;z-index:1;border:2px solid rgba(255,255,255,.9)}
.ni-call .ni-av::before,.ni-call .ni-av::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(189,213,249,.75);opacity:0}
.ni-call.live:not(.on):not(.missed) .ni-av::before{animation:niRing 2s ease-out infinite}
.ni-call.live:not(.on):not(.missed) .ni-av::after{animation:niRing 2s ease-out 1s infinite}
.ni-ring-t{flex:1;min-width:0;display:grid;gap:3px}
.ni-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-on-dark)}
.ni-k i{flex:none;width:8px;height:8px;border-radius:50%;background:#22C55E}
.ni-call.live .ni-k i{animation:niPulse 1.4s infinite}
.ni-name{font-size:21px;line-height:1.2;font-weight:800;letter-spacing:-.01em;color:#fff}
.ni-sub{font-size:14.5px;color:var(--dark-muted)}
.ni-acts{display:flex;gap:10px;flex:none}
.ni-acts button,.ni-missed button{cursor:pointer;border:0;font:inherit}
.ni-later{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;display:grid;place-items:center;transition:background .2s}
.ni-later:hover{background:rgba(255,255,255,.22)}
.ni-later svg{width:20px;height:20px}
.ni-answer{height:50px;padding:0 22px 0 17px;border-radius:999px;background:#fff;color:#0B2450;font-weight:800;font-size:15.5px;display:inline-flex;align-items:center;gap:9px;transition:transform .2s}
.ni-answer:hover{transform:scale(1.04)}
.ni-answer svg{width:18px;height:18px;color:#16A34A}
.ni-call.live:not(.on) .ni-answer svg{animation:niBuzz 1.3s ease-in-out infinite}
.ni-open{margin-top:18px}
.ni-call p.ni-b{background:rgba(255,255,255,.11);color:#fff}
.ni-call .nl-form input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.ni-call .nl-form input::placeholder{color:rgba(255,255,255,.62)}
.ni-call .nl-note,.ni-call .nl-msg,.ni-call .nl-form.ok .nl-msg{color:rgba(255,255,255,.86)}
.ni-call .ni-send{background:#fff;color:#0B2450}
.ni-call .ni-send:hover{background:#E8F0FD}
.ni-missed{display:none;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:15px;color:var(--dark-muted)}
.ni-missed b{color:#fff}
.ni-missed b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#F87171;margin-right:8px;vertical-align:1px}
.ni-missed button{height:40px;padding:0 18px;border-radius:999px;background:#fff;color:#0B2450;font-weight:800;font-size:14.5px}
.ni-js .ni-call .ni-open{display:none}
.ni-js .ni-call.on .ni-open{display:block;animation:niIn .45s ease}
.ni-js .ni-call.on .ni-acts,.ni-js .ni-call.on .ni-sub{display:none}
.ni-js .ni-call.missed{padding-top:16px;padding-bottom:16px}
.ni-js .ni-call.missed .ni-ring{display:none}
.ni-js .ni-call.missed .ni-missed{display:flex}
html:not(.ni-js) .ni-acts{display:none}

/* on the main pages the insert sits in its own short band between two sections */
section.ni-band{padding:clamp(40px,6vw,72px) 0}
.ni-band .ni{max-width:780px;margin:0 auto}

/* THE NOTES POP-UP: a navy panel that opens only when someone taps for it. A sheet from the bottom on a phone */
.np{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:16px}
.np[hidden]{display:none}
html.np-lock{overflow:hidden}
.np-back{position:absolute;inset:0;background:rgba(3,8,20,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:npFade .25s ease}
.np-panel{position:relative;isolation:isolate;width:min(470px,100%);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;border-radius:26px;padding:30px 28px 24px;color:#fff;text-align:left;
  background:radial-gradient(110% 70% at 100% 0,rgba(94,146,232,.32),transparent 58%),radial-gradient(90% 60% at 0 100%,rgba(30,74,150,.55),transparent 60%),linear-gradient(158deg,#1E4A96 0%,#133875 52%,#0B2450 100%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(189,213,249,.18);animation:npIn .38s cubic-bezier(.2,.8,.2,1)}
.np-panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--np-a,0deg),rgba(189,213,249,0) 0deg,rgba(189,213,249,.95) 60deg,rgba(94,146,232,.25) 120deg,rgba(189,213,249,0) 180deg,rgba(189,213,249,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:npSpin 5s linear infinite;pointer-events:none}
.np-panel::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:26px 26px;-webkit-mask:radial-gradient(120% 90% at 50% 0,#000 20%,transparent 75%);mask:radial-gradient(120% 90% at 50% 0,#000 20%,transparent 75%);pointer-events:none}
.np-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.np-x:hover{background:rgba(255,255,255,.22)}
.np-x svg{width:18px;height:18px}
.np-grab{display:none}
.np-top{display:flex;align-items:center;gap:12px;padding-right:44px}
.np-av{position:relative;flex:none;width:52px;height:52px}
.np-av img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9)}
.np-av::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(189,213,249,.6);animation:npHalo 2.4s ease-in-out infinite}
.np-id{display:grid;gap:3px;min-width:0}
.np-id b{font-size:15.5px;font-weight:800;color:#fff;white-space:nowrap}
.np-k{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-on-dark);white-space:nowrap}
.np-k i{width:7px;height:7px;border-radius:50%;background:#22C55E;animation:niPulse 1.4s infinite}
.np h2{max-width:none;font-size:clamp(28px,6.4vw,36px);line-height:1.1;letter-spacing:-.025em;font-weight:800;color:#fff;margin:22px 0 10px;text-wrap:balance}
.np h2 em{display:inline;font-style:normal;color:var(--blue-lg-on-dark,#8FB3EE);white-space:nowrap}
.np-line{font-family:var(--mono);font-size:13px;color:var(--blue-on-dark);margin:0 0 12px;white-space:nowrap;overflow:hidden}
.np-line::after{content:"";display:inline-block;width:8px;height:15px;margin-left:3px;vertical-align:-2px;background:var(--blue-on-dark);animation:npCaret 1s steps(1) infinite}
.np p.np-p{font-size:16px;line-height:1.5;color:var(--dark-muted);margin:0;text-wrap:pretty}
.np-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 4px;padding:0}
.np-chips li{font-size:13.5px;font-weight:700;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;white-space:nowrap}
.np-chips li.gift{background:rgba(189,213,249,.2);border-color:rgba(189,213,249,.45)}
.np .nl-form{margin-top:18px;max-width:none}
.np .nl-form input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.np .nl-form input::placeholder{color:rgba(255,255,255,.62)}
.np .nl-form .btn{background:#fff;color:#0B2450}
.np .nl-form .btn:hover{background:#E8F0FD}
.np .nl-note,.np .nl-msg,.np .nl-form.ok .nl-msg{color:rgba(255,255,255,.86)}

/* the blog page's button that opens the pop-up */
.np-trig{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;margin-top:18px;height:48px;padding:0 20px 0 6px;border:0;border-radius:999px;background:var(--card,#fff);color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s}
.np-trig:hover{transform:translateY(-2px)}
.np-trig::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--np-a,0deg),#2E6BD3,#8FB3EE,#2E6BD3 40%,rgba(46,107,211,.25) 60%,#2E6BD3);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:npSpin 5s linear infinite}
.np-trig img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.np-trig svg{width:16px;height:16px;color:var(--accent-text)}
.np-trig{max-width:100%}
.np-trig span{white-space:nowrap}
@media(max-width:400px){.np-trig{gap:8px;padding-right:14px;font-size:14px}.np-trig img{width:32px;height:32px}}

/* THE PHONE BUTTON: on a phone the corner button opens the notes, not the booking page */
.notes-float{display:none}
.nf-tip{display:none}
@media(max-width:640px){
  .call-float{display:none}
  .notes-float{display:block;position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:150;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:#2E6BD3;cursor:pointer;box-shadow:0 12px 30px -8px rgba(46,107,211,.75);transition:transform .2s ease,opacity .25s ease}
  .notes-float::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(46,107,211,.55);animation:npHalo 2.4s ease-in-out infinite}
  .notes-float img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #2E6BD3}
  .nf-badge{position:absolute;right:-3px;top:-3px;width:25px;height:25px;border-radius:50%;background:#fff;color:#2E6BD3;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
  .nf-badge svg{width:14px;height:14px}
  .nf-tip{display:block;position:fixed;right:88px;bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:150;max-width:calc(100vw - 110px);padding:9px 14px;border-radius:16px 16px 4px 16px;background:var(--card,#fff);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);font-size:14.5px;font-weight:700;white-space:nowrap;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
  .nf-tip.show{opacity:1;transform:none;pointer-events:auto}
  body.sw-on .notes-float,body.sw-on .nf-tip{opacity:0;pointer-events:none}
  .np{place-items:end center;padding:0}
  .np-panel{width:100%;max-height:92svh;border-radius:26px 26px 0 0;padding:16px 20px calc(22px + env(safe-area-inset-bottom,0px));animation:npUp .38s cubic-bezier(.2,.8,.2,1)}
  .np-grab{display:block;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.3);margin:0 auto 16px}
  .np-x{top:22px}
  .np h2{margin-top:18px}
}
@media(max-width:560px){
  .ni{padding:18px 16px 16px;border-radius:20px;margin:36px 0}
  .ni-hi .ni-form{padding-left:0}
  .ni-ring{flex-wrap:wrap;gap:14px}
  .ni-acts{flex:1 1 100%}
  .ni-answer{flex:1;justify-content:center}
}
@property --np-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes npSpin{to{--np-a:360deg}}
@keyframes npFade{from{opacity:0}}
@keyframes npIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes npUp{from{transform:translateY(100%)}}
@keyframes npHalo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:.35}}
@keyframes npCaret{50%{opacity:0}}
@keyframes niDot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
@keyframes niWave{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-4deg)}}
@keyframes niRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.65);opacity:0}}
@keyframes niPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.65)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes niBuzz{0%,50%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}}
@keyframes niIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  .ni *,.np *,.np-trig,.np-trig::before,.notes-float,.notes-float::before,.np-panel::before,.np-back{animation:none!important}
}




/* TYPE LIFT START (generated by src/type-lift.mjs, do not edit by hand) */
@media(min-width:1021px){
body{font-size:21.5px}
.eyebrow{font-size:15.5px}
.sec-head p{font-size:22.5px}
.btn{font-size:19px}
.link-more{font-size:15.5px}
.hero p.lead{font-size:clamp(21px,2.2vw,22.5px)}
.hero-badges{font-size:15.5px}
.page-hero p{font-size:21px}
.crumbs{font-size:15.5px}
.card h3{font-size:22.5px}
.card p{font-size:20px}
.icon-chip.emoji{font-size:28.5px}
.step .num{font-size:18.5px}
.step h3{font-size:21.5px}
.step p{font-size:19px}
.exp-badge .small{font-size:14.5px}
.welcome-note b{font-size:20.5px}
.welcome-note p{font-size:19px}
.ticks li{font-size:20px}
.ind-card h3{font-size:21px}
.ind-card p{font-size:18px}
.region h3{font-size:23px}
.region .hold{font-size:13px}
.region .kc{font-size:13.5px}
.region p{font-size:18px}
.plan h3{font-size:24px}
.plan p{font-size:20px}
.plan .price{font-size:16px}
.logos .more{font-size:16px}
.stat .l{font-size:14.5px}
.faq-item summary{font-size:20.5px}
.faq-item summary .pm{font-size:20px}
.faq-item .faq-a{font-size:19px}
.gal-item .cap b{font-size:21px}
.gal-item .cap span{font-size:13px}
.lightbox button{font-size:24px}
.cta-band p{font-size:22.5px}
.svc-side .side-box h4{font-size:18.5px}
.svc-side a{font-size:18.5px}
.svc-side .help b{font-size:22.5px}
.svc-side .help p{font-size:17.5px}
.svc-side .help a{font-size:18.5px}
.vas b{font-size:21px}
.vas li{font-size:20px}
.vm-card h3{font-size:22px}
.vm-card p{font-size:19px}
.chip{font-size:16.5px}
.cert h3{font-size:18.5px}
.prose p{font-size:21.5px}
.prose .line{font-size:clamp(24px,2.86vw,33px)}
.office h3{font-size:22.5px}
.office p{font-size:18.5px}
.form-card h3{font-size:26.5px}
.form-card>p{font-size:19px}
.field label{font-size:16.5px}
.field input,.field textarea,.field select{font-size:19px}
.form-note{font-size:16px}
.fit-list li{font-size:20px}
#route-scrub .rs-port text{font-size:13px}
.shot figcaption{font-size:14.5px}
.standin{font-size:13.5px}
.fact .l{font-size:14.5px}
.case h3{font-size:24px}
.case p{font-size:20px}
.case-empty span{font-size:15px}
.demo-band p{font-size:22.5px}
.storm-note{font-size:19px}
.sk-cap{font-size:27.5px}
.loop-n{font-size:17.5px}
.loop-steps b{font-size:21.5px}
.loop-steps p{font-size:19px}
.sw-lab{font-size:13.5px}
.sw-row h3{font-size:21px}
.sw-art p{font-size:18.5px}
.sw-more>summary{font-size:19px}
.notfor h3{font-size:21px}
.notfor p{font-size:20px}
.tl-when{font-size:15px}
.tl-item b{font-size:22px}
.tl-item p{font-size:20px}
.tl-block-t span{font-size:13px}
.tl-item .tl-block-t b{font-size:19px}
.story-n{font-size:14.5px}
.story-c b{font-size:23px}
.story-c p{font-size:19px}
.swipe-hint{font-size:13.5px}
.vid-c span{font-size:13.5px}
.vid-c b{font-size:20.5px}
.home-hero p.lead{font-size:clamp(21px,1.76vw,22px)}
.more-read summary{font-size:19px}
.more-read summary::after{font-size:22.5px}
.fit-tag{font-size:13.5px}
.card.fit-yes h3{font-size:26.5px}
.dubai-hero .hs-copy>p{font-size:clamp(20px,1.49vw,22.5px)}
.answer-nv .ak{font-size:13.5px}
.answer-nv p{font-size:21.5px}
.price-nv b{font-size:clamp(24px,3.3vw,33px)}
.num-c span{font-size:18.5px}
.moves-full li{font-size:20px}
.nl-form input{font-size:20px}
.nl-note,.nl-msg{font-size:16.5px}
.nl-band p{font-size:22.5px}
.ty h1{font-size:clamp(2rem,4.84vw,3.4rem)}
.ty-box h2{font-size:clamp(1.25rem,2.42vw,1.6rem)}
.ty-steps .n{font-size:15.5px}
.ty-h2{font-size:clamp(1.5rem,3.3vw,2.2rem)}
.ty-k{font-size:13.5px}
.sw-chip{font-size:18px}
.sw-bar span{font-size:13px}
.sw-status{font-size:14.5px}
.sw-count{font-size:15px}
.sw-ai b{font-size:13.5px}
.sw-ai p{font-size:20px}
.sw-tags li{font-size:17.5px}
.sw-toggle button{font-size:16.5px}
.sw-legend div{font-size:18.5px}
.sw-stop span{font-size:15.5px}
.sw-progtxt{font-size:18px}
.sw-upnext{font-size:15px}
.sw-sound{font-size:16.5px}
.sw-plans .plan .sw-tier{font-size:15px}
.sw-plans .plan h3{font-size:31px}
.sw-plans li{font-size:19px}
.sw-plans .sw-pick{font-size:13px}
.sw-band p{font-size:22.5px}
.sw-mini figcaption b{font-size:20px}
.sw-mini figcaption span{font-size:13px}
.ni{font-size:20px}
.ni p.ni-b{font-size:20px}
.ni-who{font-size:17.5px}
.ni-who b{font-size:18.5px}
.ni-k{font-size:14.5px}
.ni-name{font-size:23px}
.ni-sub{font-size:18px}
.ni-answer{font-size:19px}
.ni-missed{font-size:18.5px}
.ni-missed button{font-size:18px}
.np-id b{font-size:19px}
.np-k{font-size:13.5px}
.np-line{font-size:16px}
.np p.np-p{font-size:20px}
.np-chips li{font-size:16.5px}
.np-trig{font-size:18.5px}
/* the parts left out keep the old body size, so nothing in them grows by inheritance */
.topbar,header.site,footer.site,.m-nav,.call-float,#pLevels,#pStage,.lp-demo{font-size:17.5px}
header.site .btn,footer.site .btn,.m-nav .btn{font-size:15.5px}
footer.site .nl-form input{font-size:16px}
footer.site .nl-note,footer.site .nl-msg{font-size:13.5px}
footer.site .nl-band p{font-size:18px}
}
/* TYPE LIFT END */

/* ==========================================================================
   DARK THEME SURFACES (DP, 2026-09-16: "everything is black, we need proper
   sections"). The first dark pass reused the light structure with near-black
   values, so paper, tint and cards sat within a few shades of each other.
   Dark now has three distinct surfaces, like the DPAIOS and DBC dark skins:
     paper  #070707            the page
     tint   #0E1522 -> #101A2C a lifted navy field for every .tint section
     card   #161616 / #132039  a panel that reads on paper / on tint
   plus a stronger hairline and a divider under the heroes. The navy gradient
   bands (.on-dark) are unchanged and still read as the brand signature.
   ========================================================================== */
/* the light values first, so the dark block below wins on the same element */
:root{--card:#FFFFFF;--card-tint:#FFFFFF}
[data-theme="dark"]{
  --paper-2:#0E1522;
  --line:rgba(255,255,255,.14);
  --card:#161616;
  --card-tint:#132039;
  --menu:#161616;
  --field:#111111;
  --field-focus:#1A1A1A;
}
[data-theme="dark"] .tint{background:linear-gradient(180deg,#0E1522 0%,#101A2C 100%)}
[data-theme="dark"] .card,
[data-theme="dark"] .step,
[data-theme="dark"] .plan:not(.fill),
[data-theme="dark"] .ind-card,
[data-theme="dark"] .office,
[data-theme="dark"] .form-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .cert,
[data-theme="dark"] .logos .logo,
[data-theme="dark"] .npcard,
[data-theme="dark"] .np-promo:not(.fill),
[data-theme="dark"] .bfeat,
[data-theme="dark"] .np-pill,
[data-theme="dark"] .toc,
[data-theme="dark"] .side-toc,
[data-theme="dark"] .side-card:not(.fill),
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .prose-note,
[data-theme="dark"] .takeaways,
[data-theme="dark"] .answer-card,
[data-theme="dark"] .welcome-note{background:var(--card)}
[data-theme="dark"] .tint .card,
[data-theme="dark"] .tint .step,
[data-theme="dark"] .tint .plan:not(.fill),
[data-theme="dark"] .tint .ind-card,
[data-theme="dark"] .tint .faq-item,
[data-theme="dark"] .tint .cert,
[data-theme="dark"] .tint .logos .logo,
[data-theme="dark"] .tint .npcard,
[data-theme="dark"] .tint .np-promo:not(.fill),
[data-theme="dark"] .tint .bfeat,
[data-theme="dark"] .tint .np-pill{background:var(--card-tint)}
[data-theme="dark"] .np-pill.on{background:var(--accent)}
[data-theme="dark"] .np-n{background:rgba(255,255,255,.1);color:var(--muted)}
[data-theme="dark"] .price-table th{background:rgba(255,255,255,.05)}
[data-theme="dark"] .npcard .np-img,[data-theme="dark"] .bfeat .np-img,[data-theme="dark"] .gal-item{background:#0D0D0D}
[data-theme="dark"] .prose-fig img{background:#0D0D0D;border-color:var(--line)}
[data-theme="dark"] .prose-note.tip{background:rgba(94,146,232,.14)}
[data-theme="dark"] .hero,[data-theme="dark"] .page-hero{border-bottom:1px solid rgba(255,255,255,.12)}
[data-theme="dark"] header.site{border-bottom-color:rgba(255,255,255,.1)}
[data-theme="dark"] .card:hover,[data-theme="dark"] .npcard:hover{border-color:rgba(255,255,255,.22)}

/* The for you box stays navy in dark too. It sits after the dark surfaces block on purpose,
   because that block repaints every card. */
[data-theme="dark"] .card.fit-yes{background:var(--dark);border-color:transparent}
[data-theme="dark"] .card.fit-no{background:transparent}
[data-theme="dark"] .office.office-main{background:var(--dark);border-color:transparent}

/* THE "YOU ARE IN" PAGE (17 October 2026, his word: the photo was not seen properly on a phone, and less
   height). A shorter hero on a laptop; on a tablet or phone the photo is a short band above the words
   (a closer crop, his face and thumbs up in view) and the words sit tight under it. */
.nlc-hero .hs{min-height:540px}
.nlc-hero .hs-photo img{object-position:50% 22%}
@media(max-width:1020px){
  .nlc-hero .hs-photo{order:-1;aspect-ratio:auto;height:min(40svh,340px);min-height:220px;max-height:none}
  .nlc-hero .hs-photo img{object-position:50% 30%}
  .nlc-hero .hs-photo::before{background:linear-gradient(0deg,#070707 0,rgba(7,7,7,0) 24%)}
  .nlc-hero .hs-copy{padding-top:8px;padding-bottom:36px}
  .nlc-hero .hs-copy h1{margin:12px 0 10px}
  .nlc-hero .hs-copy>p{margin-bottom:0}
  .nlc-hero .hs-copy .hero-ctas{margin:20px 0 0}
}
/* a tablet is wide, so the band is taller there or the thumbs up is cut off */
@media(min-width:641px) and (max-width:1020px){.nlc-hero .hs-photo{height:min(50svh,470px)}.nlc-hero .hs-photo img{object-position:50% 40%}}

/* HOME HERO SHOWS THE WHOLE PHOTO (19 October 2026, his ask: "the full pic where my nike shoes are also
   visible", then "keep the full pic but blend it properly"). Above a phone the photo is no longer cropped:
   it keeps its own shape, head to shoes, and its edges fade into the black like the old cover crop did.
   Wide screens pin it to the right with the left edge fading; a tablet centres it with both sides fading.
   A phone keeps its closer square (home-hero-2-m.webp) so his face stays big. Delete this block to go back. */
@media(min-width:641px){
  .home-hero .hs-photo{background:#070707}
  .home-hero .hs-photo img{left:auto;right:0;width:auto;max-width:100%;height:100%;object-fit:cover;object-position:50% 100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
}
@media(min-width:641px) and (max-width:1020px){
  .home-hero .hs-photo img{right:auto;left:50%;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
}

/* SUBMITTED CARD (19 October 2026, his ask). After a notes sign up the form is replaced by a clear card:
   submitted, check your email now, and a picture of the real Kit email with its button. In the pop-up the
   whole panel blurs and the card sits on top with a "back to reading" button. Script: done() in footer.html. */
.nl-done{display:none}
.nl-form.ok .nl-done{display:block;margin-top:14px}
:not(.np-panel)>.nl-form.ok .nl-row,.nl-form.ok .nl-note{display:none}
.nd-tick{width:46px;height:46px;border-radius:50%;background:#12A150;color:#fff;display:grid;place-items:center;margin:0 0 12px;box-shadow:0 0 0 6px rgba(18,161,80,.22)}
.nd-tick svg{width:24px;height:24px}
.nd-h{font-size:clamp(21px,2.4vw,25px);line-height:1.15;font-weight:800;letter-spacing:-.015em;margin:0 0 8px;color:inherit;text-wrap:balance}
.nd-p{font-size:15px;line-height:1.5;margin:0 0 14px;opacity:.92;text-wrap:pretty}
.nd-em{overflow-wrap:anywhere;white-space:nowrap}
.nd-mail{position:relative;max-width:390px;background:#fff;color:#1C1C1C;border-radius:14px;padding:14px 14px 16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);text-align:left}
.nd-from{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.25}
.nd-from img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.nd-from span{display:flex;flex-direction:column;min-width:0}
.nd-from b{font-size:14px;color:#1C1C1C}
.nd-from i,.nd-from em{font-style:normal;font-size:12px;color:#66748A}
.nd-from em{margin-left:auto}
.nd-sub{font-weight:800;font-size:15px;margin:10px 0 4px;color:#1C1C1C}
.nd-body{font-size:13px;line-height:1.45;color:#465569;margin:0 0 12px}
.nd-btn{display:inline-block;background:#2E6BD3;color:#fff;font-weight:700;font-size:13.5px;line-height:1.2;padding:9px 14px;border-radius:6px;pointer-events:none;cursor:default}
.nd-steps{margin:0 0 16px;padding:0;list-style:none;counter-reset:nd;display:grid;gap:8px}
.nd-steps li{counter-increment:nd;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.4}
.nd-steps li::before{content:counter(nd);width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:12.5px;font-weight:800}
.nd-prev{border:1.5px dashed rgba(255,255,255,.35);border-radius:18px;padding:12px 12px 10px;max-width:420px}
.nd-lab{display:flex;align-items:center;gap:8px;margin:0 2px 10px;font-family:var(--mono,ui-monospace),monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.nd-lab svg{width:16px;height:16px;flex:0 0 auto}
.nd-bar{display:flex;justify-content:space-between;margin:-14px -14px 12px;padding:8px 14px;border-radius:14px 14px 0 0;background:#EEF2F8;font-size:12px;font-weight:700;color:#465569}
.nd-hint{margin:10px 2px 0;font-family:"Caveat",cursive;font-weight:600;font-size:21px;line-height:1.1}
.nd-small{font-size:13px;line-height:1.45;opacity:.82;margin:12px 0 0}
.np-panel.done{overflow:hidden;min-height:min(860px,calc(100svh - 32px))}
.np-panel.done>:not(.nl-form):not(.np-x),.np-panel.done .nl-row,.np-panel.done .nl-note{filter:blur(6px);opacity:.3;pointer-events:none;transition:filter .3s,opacity .3s}
.np-panel.done .np-x{z-index:6}
.np-panel .nl-form.ok .nl-done{position:absolute;inset:0;z-index:5;margin:0;overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;padding:30px 28px 24px;border-radius:inherit;background:rgba(9,28,64,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.np-panel .nd-tick,.np-panel .nd-mail{flex:0 0 auto;align-self:flex-start}
.np-panel .nd-mail{align-self:stretch}
.np-panel .nl-done>:first-child{margin-top:auto}
.np-panel .nl-done>:last-child{margin-bottom:auto}
.np-panel .nd-close{flex:0 0 auto;height:auto;min-height:0;margin-top:16px;align-self:stretch;justify-content:center}
@media(max-width:640px){.np-panel .nl-form.ok .nl-done{padding:52px 20px calc(22px + env(safe-area-inset-bottom,0px));justify-content:flex-start}}

/* THE MENU NOTES STOP FLICKERING (23 October 2026, his report: "the site keeps flickering when I move my
   cursor on the menu"). A hovered note straightens and lifts 3px, which slid its edge out from under the
   cursor: the note lost the hover, dropped back under the cursor, got it again, over and over. Once a
   note is hovered, an invisible 12px margin now keeps holding the cursor, so the lift can never escape it.
   Looks the same. Delete this block to go back. */
.mm-slip{position:relative}
.mm-note:hover::after,.mm-slip:hover::after,.mm-grid a.mm-snote:hover::after{content:"";position:absolute;inset:-12px}