/* Layout: open near-white page with faint grid and palette glows; cards float on layered soft shadows with a 1px top shine; 1200px column. */
:root{
  --navy:#002B55; --teal:#00AEBB; --teal-light:#E0F5F7; --lime:#C0E500; --lime-light:#F3FBD6;
  --green:#00B68A; --blue:#0089DE;
  --page:#F7F9FA; --white:#FFFFFF; --tint:#F4F8F9;
  --slate:#526677; --text:#14222F; --body-text:#3A4B5C; --hair:rgba(0,43,85,.08); --line:#E6ECEF;
  --float:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 rgba(0,43,85,.04), 0 28px 60px -22px rgba(0,43,85,.20), 0 12px 28px -14px rgba(0,43,85,.08);
  --float-sm:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px -12px rgba(0,43,85,.14), 0 1px 2px rgba(0,43,85,.05);
  --head:"Google Sans","Aptos Display","Segoe UI",Arial,sans-serif;
  --body:"Google Sans",Aptos,"Segoe UI",Helvetica,Arial,sans-serif;
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(0,174,187,.10), transparent 62%),
    radial-gradient(700px 500px at 0% 30%, rgba(0,182,138,.05), transparent 60%),
    radial-gradient(800px 600px at 100% 60%, rgba(0,137,222,.05), transparent 62%),
    var(--page);
}
img,svg{max-width:100%}
a{color:var(--blue)}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:10px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
h1,h2,h3{font-family:var(--head);margin:0;text-wrap:balance}
p{margin:0}
.label{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font:600 15px var(--body);text-decoration:none;transition:transform .15s, box-shadow .15s}
.btn-primary{background:var(--navy);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -10px rgba(0,43,85,.55)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-soft{background:var(--white);color:var(--navy);border:1px solid var(--hair);box-shadow:var(--float-sm)}
.arrow{display:inline-flex;vertical-align:-.22em;margin-left:2px}
.icon{flex:none}
.arrow .icon,.more .icon{width:18px;height:18px}
.dd-btn .icon{width:12px;height:12px;stroke-width:2.4}
.draft{color:var(--slate);font-size:13px;text-align:center;padding:10px 16px;border-bottom:1px solid var(--line)}

nav.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark{font:800 26px Montserrat,"Segoe UI",Arial,sans-serif;letter-spacing:-.02em;color:var(--navy)}
.wordmark span{color:var(--teal)}
.links{display:flex;gap:28px}
.links a{color:var(--slate);text-decoration:none;font-size:15px}
.links a:hover{color:var(--navy)}
nav.bar .btn{min-height:42px;padding:0 18px;font-size:14px}

/* hero: open, centered, faint grid fading out */
.hero{position:relative;padding-block:72px 56px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 55% 60% at 50% 30%,#000 30%,transparent 75%);pointer-events:none}
.panel{position:relative;max-width:900px;margin:0 auto;text-align:center}
.hero .label{margin-bottom:26px}
.hero h1{font-weight:700;font-size:clamp(42px,6vw,76px);line-height:1.03;letter-spacing:-.04em;color:var(--navy)}
.hero h1 .fade{display:inline-block;background:linear-gradient(90deg,#002B55 0%,#0A4C86 22%,#0074C4 42%,#0094CF 58%,#00AEBB 72%,#00B68A 86%,#C0E500 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{margin:24px auto 0;font-size:19px;color:var(--body-text);max-width:620px}
.hero .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.hero .micro{margin-top:16px;font-size:14px;color:var(--slate)}

/* the floating card: subtle gradient + 1px top shine + layered shadows */
.card{position:relative;background:linear-gradient(165deg,#F2FAFB 0%,#FFFFFF 38%,#FFFFFF 100%);border:1px solid var(--hair);border-radius:var(--r);padding:30px;box-shadow:var(--float)}
.card::before{content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px;border-radius:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,1) 30%,rgba(0,174,187,.55) 55%,transparent);pointer-events:none}
.flat{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:26px}

.fig-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:64px}
.fig{padding:24px}
.fig strong{display:block;font:800 34px/1 var(--head);color:var(--navy);letter-spacing:-.02em}
.fig span{display:block;margin-top:10px;font-size:15px;color:var(--slate)}

section.block{padding-block:104px}
.head{max-width:760px;margin-bottom:48px}
.head h2{margin-top:18px;font-weight:700;font-size:clamp(32px,4vw,46px);line-height:1.1;letter-spacing:-.03em;color:var(--text)}
.head .lead{margin-top:18px;font-size:19px;color:var(--body-text)}
.head.center{text-align:center;margin-inline:auto}

.why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.why p{font-size:19px;color:var(--body-text)}
.contrast{display:grid;gap:18px}
.ccard{border-radius:var(--r);padding:24px 26px}
.ccard h3{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.ccard ul{margin:0;padding-left:20px;color:var(--body-text)}
.ccard.theirs{background:transparent;border:1px dashed #C9D3DE}
.ccard.ours h3{color:var(--navy)}
.ccard.ours ul{color:var(--text)}

.ico{width:44px;height:44px;border-radius:12px;background:var(--teal-light);display:grid;place-items:center;margin-bottom:22px}
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.reasons h3{font-weight:700;font-size:21px;line-height:1.25;color:var(--text)}
.reasons p{margin-top:12px;color:var(--body-text)}

.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cap{display:flex;flex-direction:column;gap:10px}
.cap h3{font-weight:700;font-size:19px;color:var(--text)}
.cap p{color:var(--body-text);font-size:16px}
.cap.wide{grid-column:span 2}
.vig{margin-top:8px;border-radius:14px;background:var(--tint);border:1px solid var(--hair);padding:14px 16px;font-size:13px}
.vig .vt{font:600 11px var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin-bottom:8px}
.vig ul{margin:0;padding-left:18px}
.vig li{margin:3px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips span{font-size:13px;padding:6px 12px;border-radius:999px;background:var(--white);border:1px solid var(--hair);color:var(--navy)}
.ont{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.ont .node{padding:6px 10px;border-radius:10px;background:var(--white);border:1px solid var(--hair)}
.ont .rule{padding:6px 10px;border-radius:10px;background:var(--teal-light);border:1px solid rgba(0,174,187,.45);color:var(--navy);font-weight:600}
.ont .arrow2{color:var(--slate)}

.method-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:start}
.method-intro{font-style:italic;color:var(--slate);font-size:19px;margin-top:16px}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mstep{padding:22px 24px}
.num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--head);color:var(--slate);border:1px solid #C9D3DE;margin-bottom:14px}
.mstep h3{font-weight:700;font-size:19px;color:var(--text)}
.mstep p{margin-top:8px;color:var(--body-text);font-size:15.5px}
.mstep.final{border-color:rgba(0,174,187,.5);background:linear-gradient(165deg,#E0F5F7,#FFFFFF 60%)}
.mstep.final .num{color:var(--navy);background:var(--teal);border-color:var(--teal)}

.case{overflow:hidden;padding:0}
.case-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.case-head .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px}
.step{display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line)}
.step .n{font:600 12px var(--body);color:var(--slate)}
.step b{font:600 15px var(--head);display:block;color:var(--text)}
.step small{color:var(--slate);font-size:13px}
.chip{font:600 11px var(--body);letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;white-space:nowrap}
.chip.done{background:var(--teal-light);color:var(--navy)}
.chip.now{background:var(--lime-light);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(192,229,0,.7)}
.chip.next{background:#EEF2F5;color:var(--slate)}
.step.current{background:#F7FCEB;box-shadow:inset 0 0 0 1px rgba(192,229,0,.55)}
.meter{height:6px;background:#E6ECF0;border-radius:999px;margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;width:52%;background:linear-gradient(90deg,var(--green),var(--lime))}
.step.last{border-bottom:0}
.case-foot{padding:12px 20px;font-size:12px;color:var(--slate);background:#FAFBFC;border-top:1px solid var(--line)}

.control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ctl{display:flex;gap:18px;align-items:flex-start}
.ctl .ico{margin:0;flex:none;background:var(--white);border:1px solid var(--hair)}
.ctl h3{font-weight:700;font-size:18px;color:var(--text)}
.ctl p{margin-top:6px;color:var(--body-text)}

.closing{padding-block:24px 104px}
.closing .card{text-align:center;padding:64px clamp(24px,5vw,72px)}
.closing h2{font-weight:700;font-size:clamp(36px,5vw,56px);letter-spacing:-.035em;line-height:1.05;color:var(--text);margin-top:18px}
.closing p{margin:18px auto 0;font-size:19px;color:var(--body-text);max-width:600px}
.closing .actions{margin-top:32px;display:flex;justify-content:center}

footer{padding-block:28px 40px;font-size:14px;color:var(--slate);border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot .t{font:600 14px var(--body);color:var(--slate)}




/* Background chevron: page-level layer (not clipped by the hero), navy dashed silhouette, slow drift */
body{position:relative}
.bands-clip{position:absolute;left:0;right:0;top:0;height:1250px;overflow:hidden;pointer-events:none;z-index:0}
nav.bar{position:relative;z-index:2}
.hero .wrap{position:relative;z-index:1}
.bands3d{position:absolute;z-index:0;top:140px;right:calc(50% - 840px);width:min(34vw,450px);aspect-ratio:540/900.666;pointer-events:none;opacity:.4}
.stage{position:absolute;inset:0}
.band{position:absolute;inset:0}
.band svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.band .outline{fill:none;stroke:#8AA2BA;stroke-width:0.8;stroke-dasharray:9 7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.band1{animation:float1 22s ease-in-out infinite alternate}
.band2{animation:float2 26s ease-in-out infinite alternate}
@keyframes float1{from{transform:translate(0,0)}to{transform:translate(-16px,12px)}}
@keyframes float2{from{transform:translate(0,0)}to{transform:translate(14px,-10px)}}
@media (max-width:960px){.bands3d{width:min(48vw,380px);top:170px;right:-250px;opacity:.34}}
@media (max-width:620px){.bands3d{display:none}}
@media (prefers-reduced-motion:reduce){.band1,.band2{animation:none}.band .shine{display:none}}

@media (max-width:960px){
  .why,.method-grid{grid-template-columns:minmax(0,1fr)}
  .fig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reasons,.caps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .reasons,.caps,.steps,.control,.fig-grid{grid-template-columns:minmax(0,1fr)}
  .cap.wide{grid-column:auto}
  section.block{padding-block:72px}
}


/* phone and tablet: hamburger menu */
.menu-btn{display:none}
.mobile-menu{display:none}
@media (max-width:1180px){
  .links{display:none}
  nav.bar{gap:10px}
  nav.bar .btn{margin-left:auto}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:14px;background:var(--white);border:1px solid var(--hair);box-shadow:var(--float-sm);cursor:pointer}
  .menu-btn .icon{width:22px;height:22px;color:var(--navy)}
  .menu-btn .i-x,.menu-btn[aria-expanded="true"] .i-menu{display:none}
  .menu-btn[aria-expanded="true"] .i-x{display:block}
  .mobile-menu{display:flex;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 6px);right:0;width:min(320px,100%);z-index:20;padding:10px}
  .mobile-menu[hidden]{display:none}
  .mobile-menu a:not(.btn){padding:13px 14px;border-radius:12px;color:var(--navy);text-decoration:none;font-size:16px}
  .mobile-menu a:not(.btn):hover,.mobile-menu a:not(.btn):focus-visible{background:var(--teal-light)}
  .mobile-menu .btn{display:none;margin-top:8px}
}
@media (max-width:620px){
  nav.bar .btn{display:none}
  .menu-btn{margin-left:auto}
  .wordmark{font-size:22px}
  .mobile-menu{left:0;right:0;width:auto}
  nav.bar .mobile-menu .btn{display:flex;margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* hamburger lines had 0 width (pre-existing); give them a fixed width */

/* ===== Enterprise dropdown (desktop) ===== */
.links{align-items:center}
.links a,.dd-btn,nav.bar .btn{white-space:nowrap}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--slate);font:400 15px var(--body)}
.dd-btn:hover,.dd.open .dd-btn,.dd-btn[aria-current="true"]{color:var(--navy)}
.dd-btn svg{transition:transform .15s}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:270px;padding:8px;z-index:30;display:none;flex-direction:column;gap:2px}
.dd-menu::after{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd.open .dd-menu{display:flex}
@media (hover:hover){.dd:hover .dd-menu{display:flex}.dd:hover .dd-btn svg{transform:rotate(180deg)}}
.dd-menu a{display:block;padding:11px 14px;border-radius:12px;color:var(--navy)!important;font-size:15px}
.dd-menu a small{display:block;color:var(--slate);font-size:13px;margin-top:2px}
.dd-menu a:hover,.dd-menu a:focus-visible,.dd-menu a[aria-current="page"]{background:var(--teal-light)}
.dd-menu .soon,.mobile-menu .soon{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-radius:12px;color:var(--slate);font-size:15px;cursor:default;white-space:nowrap}
.soon em{font:600 10px var(--body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#EEF2F5;color:var(--slate);white-space:nowrap}
.mobile-menu .mm-group .soon{padding-left:26px;font-size:16px}
.dd-cols{display:grid;grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:8px}
.dd-menu:has(.dd-cols){min-width:0;width:max-content}
.dd-cols .soon{padding-block:11px;gap:20px}
.dd.mega .dd-menu{flex-direction:row;gap:8px;padding:14px;width:max-content;max-width:calc(100vw - 48px)}
.mega-sec{display:flex;flex-direction:column;min-width:250px}
.mega-sec + .mega-sec{border-left:1px solid var(--line);padding-left:8px}
.mega-items{display:flex;flex-direction:column;gap:2px}
.mega-sec.two .mega-items{display:grid;grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:8px}
.mega-sec .soon{padding-block:11px;gap:20px}
.layers{display:grid;gap:12px;max-width:760px}
.layer{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:20px 24px}
.layer .when{margin:0}
.layer h3{font-weight:700;font-size:18px;color:var(--text)}
.layer p{margin-top:4px;color:var(--body-text);font-size:15.5px}
.layer.gate{border-color:rgba(0,174,187,.5);background:linear-gradient(165deg,#E0F5F7,#FFFFFF 60%)}
.layer-arrow{text-align:center;color:var(--slate);line-height:1}
.layer-arrow .icon{width:20px;height:20px;display:block;margin:0 auto}
.layout-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:960px){.layout-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.layer{grid-template-columns:minmax(0,1fr);gap:6px}}
.head-link{margin-top:16px}
.head-link a,.card-link{font-weight:600;color:var(--blue);text-decoration:none}
.head-link a:hover,.card-link:hover{text-decoration:underline}
.card-link{display:inline-block;margin-top:10px;font-size:15px}
.head-link .sep{margin:0 12px;color:var(--slate)}
.offer{display:flex;flex-direction:column;padding:34px}
.offer h3{font-size:24px;line-height:1.25;margin-top:4px}
.offer p{font-size:16.5px}
.offer-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.offer-links a{font-size:14px;padding:8px 14px;border-radius:999px;background:var(--white);border:1px solid var(--hair);color:var(--navy);text-decoration:none;box-shadow:var(--float-sm)}
.offer-links a:hover{background:var(--teal-light)}
.dd-head{font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding:8px 14px 4px}
/* Enterprise group inside the phone menu */
.mm-group{display:flex;flex-direction:column;gap:2px;margin:4px 0;padding-top:6px;border-top:1px solid var(--line)}
.mobile-menu .mm-group a:not(.btn){padding-left:26px}
.mobile-menu .mm-plain a:not(.btn){padding-left:14px}
.mobile-menu .mm-group:first-child{border-top:0;margin-top:0}
.mobile-menu{max-height:calc(100vh - 120px);overflow-y:auto}

/* ===== Enterprise page components ===== */
.hero.page{padding-block:64px 24px}
.hero.page h1{font-size:clamp(38px,5.4vw,66px)}
.g2,.g3,.g4{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.item h3{font-weight:700;font-size:19px;line-height:1.3;color:var(--text)}
.item p{margin-top:10px;color:var(--body-text);font-size:16px}
.item ul{margin:14px 0 0;padding-left:20px;color:var(--body-text);font-size:16px}
.item li{margin:4px 0}
.item .tagline{margin-top:8px;font-weight:600;color:var(--navy)}
.item .quoteline{margin-top:10px;font-style:italic;color:var(--slate)}
.badge{display:inline-block;margin-bottom:14px;font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--lime-light);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(192,229,0,.7)}
.item.featured{border-color:rgba(0,174,187,.5)}
.gap-item{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;color:var(--text);font-size:17px}
.gap-item .dotx{flex:none;width:10px;height:10px;margin-top:9px;border-radius:50%;background:var(--teal)}
.prose{max-width:780px;display:grid;gap:18px}
.prose p{font-size:19px;color:var(--body-text)}
.mt{margin-top:40px}
.fig small{display:block;margin-top:6px;font-size:13px;color:var(--slate)}
.fig-grid.inline{margin-top:40px}
.fig-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.note{margin-top:28px;font-size:18px;font-weight:600;color:var(--navy);text-align:center}
.when{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.banner{text-align:center;padding:56px clamp(24px,5vw,64px)}
.banner h2{font-weight:700;font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.03em;color:var(--text)}
.banner .chips{justify-content:center;margin-top:22px}
.banner p{margin:22px auto 0;max-width:640px;color:var(--body-text);font-size:18px}
.mailline{margin-top:14px;font-size:15px;color:var(--slate)}
.case-card{padding:36px}
.case-card h2{font-weight:700;font-size:clamp(26px,3.2vw,36px);line-height:1.15;letter-spacing:-.025em;color:var(--text);margin-top:14px}
.case-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:28px}
.case-cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-cols h3{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.case-cols p,.case-cols ul{color:var(--body-text);font-size:16px}
.case-cols ul{margin:0;padding-left:20px}
.case-cols li{margin:4px 0}
.tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.tl div{border-radius:14px;background:var(--tint);border:1px solid var(--hair);padding:14px 16px}
.tl b{display:block;font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.tl span{display:block;margin-top:4px;color:var(--text);font-weight:600}
.cmp-wrap{overflow-x:auto}
table.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:16px}
.cmp th,.cmp td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.cmp thead th.us{color:var(--navy)}
.cmp tbody th{font-weight:600;color:var(--text)}
.cmp td{color:var(--body-text)}
.cmp td.us{color:var(--navy);font-weight:600;background:rgba(0,174,187,.06)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
blockquote.q{margin:0;padding:32px}
blockquote.q p{font-size:18px;color:var(--text)}
blockquote.q footer{border:0;padding:16px 0 0;font-size:14px}
blockquote.q footer b{display:block;color:var(--navy)}
/* contact page */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
.form-card{padding:36px}
.form-card h2,.side h3{font-weight:700;color:var(--text)}
.form-card h2{font-size:28px;letter-spacing:-.02em}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font:600 13px var(--body);color:var(--navy)}
.field input,.field select,.field textarea{font:400 16px var(--body);color:var(--text);background:var(--tint);border:1px solid var(--hair);border-radius:12px;padding:14px 16px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;background:var(--white)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}
.form-foot button{border:0;cursor:pointer}
.form-foot span{font-size:14px;color:var(--slate)}
.devnote{margin-top:16px;font-size:13px;color:var(--slate);background:var(--lime-light);border-radius:10px;padding:10px 14px}
.devnote[data-shown]{box-shadow:inset 0 0 0 1px rgba(192,229,0,.9);color:var(--navy)}
.side{display:grid;gap:20px}
.side .card{padding:28px}
.side h3{font-size:20px}
.side .line{margin-top:10px;color:var(--body-text)}
.side .btn{margin-top:14px}
.person{display:flex;gap:16px;align-items:center}
.person img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--white);box-shadow:var(--float-sm)}
.person b{display:block;color:var(--text);font-size:17px}
.person small{color:var(--slate);font-size:14px}
.side .bio{margin-top:14px;color:var(--body-text);font-size:15.5px}
@media (max-width:960px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.fgrid{grid-template-columns:minmax(0,1fr)}.form-card{padding:26px}}
@media (max-width:960px){
  .g3,.g4,.case-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .g2,.g3,.g4,.case-cols,.case-cols.two,.tl,.fig-grid.two{grid-template-columns:minmax(0,1fr)}
  .case-card{padding:26px}
}

/* ===== Innovate Platform pages ===== */
.g5{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr))}
.parts .item{display:flex;flex-direction:column;gap:2px}
.parts .item h3{font-size:24px}
.linkcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s}
.linkcard:hover{transform:translateY(-2px)}
.linkcard .more{margin-top:auto;padding-top:18px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.chat{padding:0;overflow:hidden}
.chat .case-head{margin:0}
.chat .msgs{display:flex;flex-direction:column;gap:12px;padding:20px}
/* Self-hosted fonts (SIL OFL; licences in fonts/). No request to Google Fonts. Built by ship/make-fonts.py. */
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/google-sans.woff) format("woff")}
@font-face{font-family:"Google Sans";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/google-sans-italic.woff) format("woff")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-800.woff) format("woff")}
/* Tighter vertical rhythm (Sarfraz 2026-10-15: gaps between sections were too large). Overrides the base values above. */
section.block{padding-block:60px}
.head{margin-bottom:34px}
.hero{padding-block:60px 36px}
.closing{padding-block:16px 64px}
section.block.shot-band{padding-block:0 24px}
.hero + .shot-band{padding-top:6px}
@media (max-width:720px){section.block{padding-block:40px}.hero{padding-block:44px 28px}.head{margin-bottom:26px}}
.shot{margin:0 auto;max-width:1080px}
.shot img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--float);border:1px solid var(--line);background:var(--navy)}
.shot figcaption{margin-top:14px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--slate)}
.shot figcaption b{color:var(--navy);font-weight:600}
.msg{max-width:88%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.5}
.msg .who{display:block;font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;opacity:.75}
.msg.you{align-self:flex-end;background:var(--navy);color:var(--white);border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;background:var(--tint);border:1px solid var(--hair);color:var(--text);border-bottom-left-radius:6px}
.msg.ai .who{color:var(--teal);opacity:1}
.kind h3{font-weight:700;font-size:19px;color:var(--text)}
.kind .chips{margin-top:14px}
@media (max-width:960px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g5{grid-template-columns:minmax(0,1fr)}.msg{max-width:100%}}

/* ===== Button spotlight: one pointermove listener feeds --fx-x / --fx-y ===== */
.btn{
  --fx-color:var(--teal);        /* glow + spotlight colour            */
  --fx-spot-size:110px;          /* inner spotlight radius (hover)     */
  --fx-spot-strength:22%;        /* inner spotlight intensity          */
  --fx-ring-size:140px;          /* border light radius (proximity)    */
  --fx-ring-strength:95%;        /* border light intensity             */
  --fx-border:1.5px;             /* border light thickness             */
  --fx-halo-blur:14px;           /* outer glow softness                */
  --fx-halo-strength:.45;        /* outer glow opacity                 */
  --fx-x:-999px; --fx-y:-999px;  /* set by script, relative to button  */
  position:relative;isolation:isolate}
.btn-soft,.btn-ghost{--fx-spot-strength:12%;--fx-halo-strength:.35}
.btn-primary::before,.btn-primary::after,.btn-primary .btn-halo{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1}
/* layer 1: inner spotlight, only while hovered */
.btn-primary::before{background:radial-gradient(var(--fx-spot-size) circle at var(--fx-x) var(--fx-y),color-mix(in srgb,var(--fx-color) var(--fx-spot-strength),transparent),transparent 70%);opacity:0;transition:opacity .25s}
.btn-primary:hover::before{opacity:1}
/* layer 2: border light, shows as the pointer comes near */
.btn-primary::after{padding:var(--fx-border);background:radial-gradient(var(--fx-ring-size) circle at var(--fx-x) var(--fx-y),color-mix(in srgb,var(--fx-color) var(--fx-ring-strength),transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* layer 3: soft outer glow following the same light */
.btn-primary .btn-halo{background:radial-gradient(var(--fx-ring-size) circle at var(--fx-x) var(--fx-y),var(--fx-color),transparent 65%);filter:blur(var(--fx-halo-blur));opacity:var(--fx-halo-strength);inset:-2px;z-index:-2}
/* off where there is no fine pointer (touch) */
@media not ((hover:hover) and (pointer:fine)){.btn-primary::before,.btn-primary::after,.btn-primary .btn-halo{display:none}}
@media (prefers-reduced-motion:reduce){.btn-primary::before,.btn-primary::after,.btn-primary .btn-halo{display:none}}


/* ---- Sunlit logo mark (logo.html) ----
   Angle: change x1/y1/x2/y2 on the two gradients (formula in logo.html).
   Intensity: --sunlit-strength (0 to 1), or the stop-opacity values.
   Duration: --sunlit-duration (light fade); band drift = the animateTransform dur in logo.html (20s = 10s each way). */
.sunlit{--sunlit-duration:450ms;--sunlit-strength:1;--sunlit-rim:.6;display:block;overflow:visible;isolation:isolate}
.sunlit .sun{opacity:0;mix-blend-mode:screen;transition:opacity var(--sunlit-duration) cubic-bezier(.4,0,.2,1);pointer-events:none}
.sunlit .rim{opacity:var(--sunlit-rim)}
.sunlit:hover .sun,
a:hover .sunlit .sun,button:hover .sunlit .sun,
a:focus-visible .sunlit .sun,button:focus-visible .sunlit .sun{opacity:var(--sunlit-strength)}
@media (prefers-reduced-motion:reduce){.sunlit .sun{transition:none}.sunlit .mark-band{transform:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.logo-page{display:grid;place-items:center;min-height:calc(100vh - 220px);padding-block:56px}
.logo-stage{margin:0;width:clamp(120px,24vw,260px)}
.logo-stage .sunlit{width:100%;height:auto}
/* ---- Lockup: mark + typed wordmark (logo.html) ----
   Hovering anywhere on the lockup lights the mark AND the wordmark with the same sunlight
   (135deg, same fade as .sunlit; the wordmark uses a paler, softer light, --wm-light-strength,
   because full gold over navy reads olive-grey). Typing speed: data-type-ms on .wm (ms per letter). */
.logo-lockup{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin:0}
.logo-lockup .logo-stage{width:clamp(72px,12vw,150px)}
.logo-lockup:hover .sunlit .sun{opacity:var(--sunlit-strength)}
.wm{position:relative;display:inline-block;font:800 clamp(40px,8.5vw,104px)/1 Montserrat,"Segoe UI",Arial,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.wm-ghost{visibility:hidden}
.wm-type,.wm-light{position:absolute;inset:0}
.wm-type{color:var(--navy)}
.wm-type .ml{color:var(--teal)}
.wm-light{color:transparent;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(135deg,rgba(255,252,236,.62) 0%,rgba(255,240,196,.42) 14%,rgba(255,222,150,.2) 36%,rgba(255,210,120,.05) 60%,rgba(255,210,120,0) 80%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 6px rgba(255,220,140,.35));
  transition:opacity var(--sunlit-duration,450ms) cubic-bezier(.4,0,.2,1)}
.logo-lockup:hover .wm-light{opacity:var(--wm-light-strength,.7)}
.wm-caret{display:inline-block;width:.07em;height:.82em;margin-left:.04em;vertical-align:-.04em;background:var(--teal);animation:wm-blink 1s steps(1) infinite}
.wm-caret.gone{opacity:0;transition:opacity .4s;animation:none}
@keyframes wm-blink{50%{opacity:0}}
@media (max-width:620px){.logo-lockup{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.wm-light{transition:none}.wm-caret{display:none}}

/* ---- Paragraph links: semibold, lime marker on hover ---- */
p a:not(.btn){--mark-hl:rgba(192,229,0,.6);position:relative;isolation:isolate;font-weight:600;color:inherit;text-decoration:none;transition:color .35s}
p a:not(.btn)::before{content:"";position:absolute;inset:-.08em -.3em;z-index:-1;pointer-events:none;background:var(--mark-hl);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;rotate:-1.5deg;transform-origin:left center;scale:0 1;
  transition:scale .35s cubic-bezier(.3,.9,.3,1)}
p a:not(.btn):hover::before,p a:not(.btn):focus-visible::before{scale:1 1}
p a:not(.btn):hover,p a:not(.btn):focus-visible{color:var(--navy);text-decoration:none}
@media (prefers-reduced-motion:reduce){p a:not(.btn),p a:not(.btn)::before{transition:none}}

/* ===== Contact page (plan: CONTACT_PAGE_PLAN.md) ===== */
.contact2{padding-block:48px 88px}
.c2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.c2-copy h1{font-weight:700;font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-.04em;color:var(--navy);margin-top:18px}
.c2-copy h1 .fade{display:inline-block;background:linear-gradient(90deg,#002B55 0%,#0A4C86 22%,#0074C4 42%,#0094CF 58%,#00AEBB 72%,#00B68A 86%,#C0E500 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.c2-copy .sub{margin-top:20px;font-size:19px;color:var(--body-text);max-width:520px}
.promise{margin-top:20px;font-size:17px;color:var(--navy)}
.c2-h2{margin-top:40px;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.next{list-style:none;counter-reset:n;margin:16px 0 0;padding:0;max-width:520px}
.next li{counter-increment:n;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.next li:last-child{border-bottom:1px solid var(--line)}
.next li::before{content:counter(n);grid-row:1 / span 2;font:600 15px/1.5 var(--body);color:var(--teal)}
.next li b{font:600 16px var(--head);color:var(--text)}
.next li span{color:var(--body-text);font-size:15.5px;margin-top:4px}
@media (min-width:961px){.c2-grid .form-card{position:sticky;top:24px}}
.form-card h2{margin-bottom:0}
.field label .opt{font-weight:400;color:var(--slate)}
.field select{appearance:auto}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#9B1C1C;background:#FFFBFB}
.err{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:13.5px;line-height:1.4;color:#9B1C1C}
.err[hidden]{display:none}
.err .icon{width:16px;height:16px;margin-top:1px}
.c2-summary{margin-top:18px;padding:12px 14px;border-radius:10px;border:1px solid #E7B4B4;background:#FFF6F6;color:#7A1515;font-size:14.5px}
.c2-summary[hidden]{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-card .form-foot{margin-top:24px}
.fine{margin:14px 0 0;font-size:13.5px;color:var(--slate)}
.alt{display:flex;align-items:center;gap:10px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--body-text)}
.alt .icon{width:18px;height:18px;color:var(--slate)}
.alt a{color:var(--blue);font-weight:600;text-decoration:none}
.alt a:hover{text-decoration:underline}
.form-card .devnote{margin-top:12px;padding:0;background:none;box-shadow:none;border-radius:0;color:var(--slate);font-size:13px}
.c2-done{padding-block:8px}
.c2-done[hidden],#c2-form-wrap[hidden]{display:none}
.c2-done .icon{width:36px;height:36px;color:var(--teal)}
.c2-done h2{margin-top:16px;font-size:26px;letter-spacing:-.02em}
.c2-done p{margin-top:12px;color:var(--body-text)}
.c2-done a{color:var(--blue);font-weight:600}
.c2-done:focus,#c2-card :focus-visible{outline-offset:4px}
@media (max-width:960px){.c2-grid{grid-template-columns:minmax(0,1fr);gap:40px}.contact2{padding-block:32px 64px}}
@media (max-width:620px){.fgrid{grid-template-columns:minmax(0,1fr)}.form-card{padding:26px}}


/* ===== About / team ===== */
.links a[aria-current="page"]{color:var(--navy)}
.mcard{display:grid;grid-template-columns:240px minmax(0,1fr);gap:44px;align-items:center;padding:36px}
.mcard + .mcard{margin-top:24px}
.mcard img{width:240px;height:240px;border-radius:50%;object-fit:cover;box-shadow:var(--float-sm)}
.mbody h3{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.03em;color:var(--text)}
.mbody .role{margin-top:6px;font:600 16px var(--body);color:var(--slate)}
.mbody .leads{margin-top:16px;color:var(--body-text);font-size:15.5px}
.mbody .leads b{color:var(--navy)}
.mbody .bio{margin-top:14px;color:var(--body-text);font-size:17px;max-width:640px}
.mbody .line{margin-top:18px}
.about-cta{margin-top:40px}
.mbody .ext{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;text-decoration:none}
.mbody .ext:hover{text-decoration:underline}
.mbody .ext .icon{width:16px;height:16px}
@media (max-width:760px){.mcard{grid-template-columns:minmax(0,1fr);gap:24px;padding:26px}.mcard img{width:168px;height:168px}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ===== Legal pages and footer links ===== */
.updated{margin-top:10px;font-size:14px;color:var(--slate)}
.legal{max-width:780px}
.legal h2{margin-top:36px;font-size:24px;letter-spacing:-.02em;color:var(--text)}
.legal h3{margin-top:22px;font-size:18px;color:var(--text)}
.legal p,.legal li{color:var(--body-text);font-size:16.5px;line-height:1.65}
.legal p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-left:22px}
.legal li{margin:6px 0}
.legal a{color:var(--blue);font-weight:600}
.foot-right{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 24px}
.foot-right a{color:var(--slate);text-decoration:none}
.foot-right a:hover{color:var(--navy);text-decoration:underline}
.fine a{color:var(--slate);text-decoration:underline}

/* router: programmatic focus target after a page swap */
#main:focus,#main h1:focus{outline:none}