/* Novacom site styles — premium light theme */
:root{
  --navy:#0A1F44;
  --blue:#1E9BFF;
  --sky:#7CC4FF;
  --bg:#FFFFFF;
  --bg-soft:#F6F9FD;
  --bg-tint:#EEF4FB;
  --ink:#0A1F44;
  --ink-soft:#475472;
  --ink-mute:#7A8499;
  --line:rgba(10,31,68,0.08);
  --line-strong:rgba(10,31,68,0.14);
  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;
  --shadow-sm:0 1px 2px rgba(10,31,68,0.04), 0 2px 8px rgba(10,31,68,0.04);
  --shadow-md:0 4px 14px rgba(10,31,68,0.06), 0 16px 40px rgba(10,31,68,0.06);
  --shadow-lg:0 8px 30px rgba(10,31,68,0.08), 0 30px 80px rgba(10,31,68,0.08);
  --shadow-blue:0 14px 40px rgba(30,155,255,0.25);
  --maxw:1240px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv11';
  line-height:1.5;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}

/* ─────────────────────────────────────────────────────────────────────────── */
/* TYPE                                                                          */
/* ─────────────────────────────────────────────────────────────────────────── */

.h-display{
  font-size:clamp(40px, 6.6vw, 92px);
  line-height:0.98;
  letter-spacing:-0.035em;
  font-weight:700;
  margin:18px 0 24px;
  text-wrap:balance;
}
.h-sec{
  font-size:clamp(32px, 4.4vw, 60px);
  line-height:1.02;
  letter-spacing:-0.025em;
  font-weight:700;
  margin:12px 0 18px;
  text-wrap:balance;
}
.grad-text{
  background:linear-gradient(96deg, var(--blue) 0%, var(--navy) 60%, var(--blue) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:grad-shift 9s ease-in-out infinite;
}
@keyframes grad-shift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px rgba(30,155,255,0.15);
}

.lede{
  font-size:clamp(17px, 1.55vw, 21px);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:560px;
  margin:0 0 32px;
}

.sec-sub{
  font-size:clamp(16px, 1.3vw, 19px);
  color:var(--ink-soft);
  max-width:620px;
  margin:0;
  line-height:1.55;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* BUTTONS                                                                     */
/* ─────────────────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;
  border-radius:999px;
  font-weight:600;font-size:14px;letter-spacing:-0.005em;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
  white-space:nowrap;
  border:1px solid transparent;
}
.btn-sm{padding:9px 14px;font-size:13px}
.btn-lg{padding:16px 26px;font-size:15px}
.btn-block{width:100%}

.btn-primary{
  background:linear-gradient(96deg, var(--blue), color-mix(in oklab, var(--blue), var(--navy) 35%));
  color:#fff;
  box-shadow:var(--shadow-blue);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 50px rgba(30,155,255,0.35);
}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{
  background:rgba(255,255,255,0.7);
  color:var(--navy);
  border-color:var(--line-strong);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  background:#fff;
  border-color:var(--navy);
  transform:translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* HEADER                                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

.site-hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s, border-color .3s, box-shadow .3s, padding .3s;
  padding:18px 0;
}
.site-hd.scrolled{
  background:rgba(255,255,255,0.78);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.hd-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
@media (max-width:580px){.hd-inner{padding:0 16px;gap:8px}}
.hd-logo img{height:34px;width:auto;display:block}
@media (max-width:580px){.hd-logo img{height:26px}}
.hd-nav{display:flex;align-items:center;gap:6px}
.hd-nav a{
  font-size:14px;font-weight:500;color:var(--ink);
  padding:8px 14px;border-radius:999px;
  transition:background .2s, color .2s;
}
.hd-nav a:hover{background:var(--bg-tint);color:var(--navy)}
.hd-actions{display:flex;align-items:center;gap:12px}
@media (max-width:580px){.hd-actions{gap:8px}}
.hd-phone{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--navy);
  padding:6px 10px;border-radius:999px;
  transition:color .2s;
}
.hd-phone:hover{color:var(--blue)}
.hd-burger{
  display:none;
  width:40px;height:40px;border-radius:10px;
  align-items:center;justify-content:center;
  color:var(--navy);
  border:1px solid var(--line);
}

@media (max-width:980px){
  .hd-nav, .hd-phone{display:none}
  .hd-burger{display:flex}
}
@media (max-width:480px){
  /* On the smallest screens, hide the Free Estimate button — the sticky bottom-bar covers CTA */
  .hd-actions .btn-primary{display:none}
}

/* Mobile menu */
.mobile-menu{
  position:fixed;inset:0;background:#fff;z-index:200;
  display:flex;flex-direction:column;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.mm-top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.mm-logo{height:32px}
.mm-close{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);color:var(--navy);display:flex;align-items:center;justify-content:center}
.mm-nav{display:flex;flex-direction:column;padding:24px;gap:4px;flex:1}
.mm-nav a{
  display:flex;justify-content:space-between;align-items:center;
  font-size:24px;font-weight:600;letter-spacing:-0.02em;
  padding:18px 8px;border-bottom:1px solid var(--line);
  color:var(--ink);
}
.mm-nav a:hover{color:var(--blue)}
.mm-foot{padding:24px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}

/* ─────────────────────────────────────────────────────────────────────────── */
/* HERO                                                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100vh;
  padding:140px 0 100px;
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
}
@media (max-width:980px){.hero{min-height:auto;padding:120px 0 72px}}
@media (max-width:580px){.hero{padding:100px 0 56px}}
.hero-scene{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, #fff 0%, #F4F9FF 50%, #FFFFFF 100%);
}
.hero-mesh{position:absolute;inset:0;overflow:hidden}
.mesh-blob{position:absolute;border-radius:50%;filter:blur(40px);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mesh-blob-1{width:60vw;height:60vw;top:-20vw;left:-15vw;animation:float1 16s ease-in-out infinite}
.mesh-blob-2{width:50vw;height:50vw;top:30vh;right:-15vw;animation:float2 18s ease-in-out infinite}
.mesh-blob-3{width:40vw;height:40vw;bottom:-15vw;left:30vw;animation:float3 22s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,20px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}

.hero-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:transform .4s ease}

.line-travel{
  stroke-dasharray:160 1200;
  animation:travel 7s linear infinite;
}
.line-travel-2{animation-duration:9s;animation-delay:-3s}
@keyframes travel{from{stroke-dashoffset:1360}to{stroke-dashoffset:0}}

/* Particles */
.hero-particles{position:absolute;inset:0;pointer-events:none}
.particle{
  position:absolute;
  border-radius:50%;
  filter:blur(0.5px);
  animation:float-particle 8s ease-in-out infinite;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
@keyframes float-particle{
  0%,100%{transform:translateY(0) scale(1);opacity:.4}
  50%{transform:translateY(-30px) scale(1.2);opacity:1}
}

/* Floaters */
.hero-floaters{position:absolute;inset:0;pointer-events:none}
.float-tile{
  position:absolute;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:16px;
  box-shadow:0 1px 1px rgba(255,255,255,0.8) inset, 0 20px 60px rgba(10,31,68,0.14);
  color:var(--navy);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  animation:tile-bob 6s ease-in-out infinite;
}
.float-tile.glow::before{
  content:'';position:absolute;inset:-2px;border-radius:18px;z-index:-1;
  background:radial-gradient(closest-side, var(--accent), transparent 70%);
  filter:blur(20px);opacity:0.4;
}
.float-tile.ft-mini{padding:14px;border-radius:50%}
.ft-meta{display:flex;flex-direction:column;line-height:1.2}
.ft-title{font-size:13px;font-weight:600}
.ft-sub{font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;margin-top:2px}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.dot.live{background:#FF3A52;box-shadow:0 0 0 3px rgba(255,58,82,0.18);animation:pulse-live 2s ease-in-out infinite}
.dot.ok{background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,0.18)}
@keyframes pulse-live{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}

.ft-1{top:18%;left:6%;animation-delay:0s}
.ft-2{top:22%;right:8%;animation-delay:-2s}
.ft-3{top:62%;left:10%;animation-delay:-4s}
.ft-4{top:58%;right:14%;animation-delay:-1s}
.ft-5{top:78%;right:30%;animation-delay:-3s}

@keyframes tile-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

@media (max-width:980px){
  .ft-1,.ft-2,.ft-3,.ft-4,.ft-5{opacity:0.6}
  .ft-1{top:8%;left:4%}
  .ft-2{top:10%;right:4%;}
  .ft-3{display:none}
  .ft-4{display:none}
  .ft-5{display:none}
}

/* Hero content */
.hero-content{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  width:100%;
}

/* Two-column hero: text + hero image */
.hero-split{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  gap:64px;
  align-items:center;
}
.hero-text{max-width:620px}
.hero-visual{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  max-height:640px;
}
.hero-image-frame{
  position:relative;
  width:100%;height:100%;
  border-radius:24px;
  overflow:visible;
  isolation:isolate;
}
.hero-image-frame::before{
  /* soft glow behind image */
  content:'';position:absolute;inset:-20px;z-index:-1;
  background:radial-gradient(closest-side, rgba(30,155,255,0.28), transparent 70%);
  filter:blur(30px);
  border-radius:40px;
}
.hero-image-frame image-slot{
  width:100%;height:100%;
  display:block;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(10,31,68,0.18), 0 4px 12px rgba(10,31,68,0.06);
  border:1px solid rgba(255,255,255,0.8);
}
/* Floating chips on the hero image */
.hero-chip{
  position:absolute;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(10,31,68,0.16);
  z-index:2;
  animation:tile-bob 6s ease-in-out infinite;
}
.hero-chip-1{top:24px;left:-28px;animation-delay:0s}
.hero-chip-2{bottom:32px;right:-28px;animation-delay:-3s}
.hc-ico{
  width:32px;height:32px;border-radius:10px;
  background:rgba(30,155,255,0.12);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hc-meta{display:flex;flex-direction:column;line-height:1.2}
.hc-title{font-size:13px;font-weight:600;color:var(--navy)}
.hc-sub{font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;margin-top:2px}

@media (max-width:980px){
  .hero-split{grid-template-columns:1fr;gap:40px}
  .hero-text{max-width:none}
  .hero-visual{aspect-ratio:5/4;max-height:420px}
  .hero-chip-1{top:14px;left:14px}
  .hero-chip-2{bottom:14px;right:14px}
}
@media (max-width:580px){
  .hero-chip{padding:8px 12px;border-radius:12px}
  .hero-chip .hc-ico{width:28px;height:28px;border-radius:8px}
  .hero-chip .hc-title{font-size:12px}
  .hero-chip .hc-sub{font-size:10px}
  .hero-visual{aspect-ratio:4/3;max-height:340px}
  .hero-image-frame::before{inset:-10px}
}

/* When using split hero, dial back the abstract floaters so they don't fight the photo */
.hero-split ~ * .hero-floaters{display:none}
.hero .hero-floaters{display:none}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.trust-row{
  list-style:none;padding:0;margin:48px 0 0;
  display:flex;flex-wrap:wrap;gap:10px 20px;
}
.trust-row li{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;
  color:var(--ink-soft);
  padding:8px 14px;
  background:rgba(255,255,255,0.7);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(10px);
}
.trust-row li svg{color:var(--blue)}

.hero-scroll{
  position:absolute;
  bottom:30px;left:50%;transform:translateX(-50%);
  width:24px;height:38px;border:1.5px solid var(--line-strong);border-radius:14px;
  display:flex;justify-content:center;padding-top:6px;
}
.hero-scroll span{
  width:3px;height:8px;background:var(--blue);border-radius:2px;
  animation:scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot{0%{transform:translateY(0);opacity:1}80%{transform:translateY(12px);opacity:0}100%{opacity:0}}

@media (max-width:980px){
  .hero-scroll{display:none}
}
@media (max-width:680px){
  .trust-row{gap:6px;margin-top:32px}
  .trust-row li{font-size:11.5px;padding:6px 10px;gap:6px}
  .trust-row li svg{width:13px;height:13px}
}
@media (max-width:480px){
  .hero-cta{flex-direction:column;width:100%;gap:10px}
  .hero-cta .btn{width:100%}
  .h-display{font-size:clamp(34px, 11vw, 48px) !important}
  .lede{font-size:16px}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* GENERIC SECTIONS                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */

.sec{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:140px 32px;
}
.density-compact .sec{padding:96px 32px}
.density-comfy .sec{padding:180px 32px}

.sec-head{max-width:760px;margin:0 0 64px}
.sec-head-center{margin:0 auto 64px;text-align:center}
.sec-head-center .eyebrow{justify-content:center}
.sec-head.tight{margin-bottom:32px}

@media (max-width:680px){
  .sec{padding:72px 20px}
  .density-compact .sec{padding:56px 20px}
  .density-comfy .sec{padding:96px 20px}
  .sec-head{margin-bottom:36px}
  .sec-head .h-sec{font-size:clamp(28px, 8vw, 36px)}
}
@media (max-width:480px){
  .sec{padding:64px 16px}
  .hero-content{padding:0 16px}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* ABOUT STRIP                                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.about-strip{position:relative}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0, 0.85fr) minmax(0, 1fr);
  gap:72px;
  align-items:center;
}
@media (max-width:580px){
  .about-portrait-wrap{max-width:320px}
  .about-portrait-wrap image-slot{aspect-ratio:1/1 !important}
  .about-badge{left:auto;right:12px;bottom:12px;padding:10px 14px}
  .ab-t{font-size:12px}
  .ab-s{font-size:10.5px}
}
.about-portrait-wrap{
  position:relative;
  width:100%;
}
.about-portrait-wrap image-slot{
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,0.8);
}
.about-portrait-wrap::before{
  content:'';position:absolute;inset:-16px;z-index:-1;
  background:linear-gradient(135deg, rgba(30,155,255,0.18), transparent 70%);
  filter:blur(30px);
  border-radius:32px;
}
.about-badge{
  position:absolute;left:-20px;bottom:30px;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px 12px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-md);
}
.ab-dot{
  width:10px;height:10px;border-radius:50%;
  background:#22C55E;
  box-shadow:0 0 0 4px rgba(34,197,94,0.18);
  animation:pulse-live 2.4s ease-in-out infinite;
}
.ab-t{font-size:13px;font-weight:600;color:var(--navy);line-height:1.2}
.ab-s{font-size:11px;color:var(--ink-soft);margin-top:2px}

.about-stats{
  margin-top:32px;
  display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
  padding-top:28px;border-top:1px solid var(--line);
}
.about-stats > div{display:flex;flex-direction:column;gap:6px}
.about-stats b{
  font-size:clamp(24px, 2.6vw, 34px);font-weight:700;letter-spacing:-0.02em;color:var(--navy);
}
.about-stats span{font-size:13px;color:var(--ink-soft);line-height:1.4}

@media (max-width:980px){
  .about-grid{grid-template-columns:1fr;gap:48px}
  .about-badge{left:auto;right:20px;bottom:20px}
  .about-stats{gap:16px}
}
@media (max-width:580px){
  .about-stats{grid-template-columns:1fr;gap:14px;padding-top:20px}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SERVICES                                                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

.services{position:relative}
.services::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:90%;max-width:1100px;height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.svc-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
}
.svc-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:36px 32px 32px;
  cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
  overflow:hidden;
}
@media (max-width:580px){
  .svc-card{padding:28px 22px 24px;border-radius:18px}
  .svc-num{top:18px;right:20px}
  .svc-ico{width:52px;height:52px;border-radius:14px;margin-bottom:18px}
  .svc-name{font-size:21px}
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--blue), var(--sky));
  opacity:0;transition:opacity .4s;
}
.svc-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(30,155,255,0.06), transparent 50%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.svc-card.is-active,.svc-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(30,155,255,0.3);
}
.svc-card.is-active::before,.svc-card:hover::before{opacity:1}
.svc-card.is-active::after,.svc-card:hover::after{opacity:1}

.svc-num{
  position:absolute;top:24px;right:28px;
  font-size:11px;font-weight:600;letter-spacing:0.18em;color:var(--ink-mute);
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
.svc-ico{
  width:60px;height:60px;border-radius:18px;
  background:linear-gradient(135deg, rgba(30,155,255,0.12), rgba(124,196,255,0.06));
  color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  transition:transform .4s;
}
.svc-card:hover .svc-ico{transform:scale(1.06) rotate(-3deg)}
.svc-name{font-size:24px;letter-spacing:-0.02em;font-weight:700;margin:0 0 10px}
.svc-blurb{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0 0 20px;min-height:72px}
.svc-bullets{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:8px}
.svc-bullets li{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--ink);
}
.svc-bullets svg{color:var(--blue);flex-shrink:0}
.svc-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--navy);
  padding:8px 0;
  border-bottom:1px solid var(--line-strong);
  transition:color .2s, border-color .2s, gap .2s;
}
.svc-cta:hover{color:var(--blue);border-color:var(--blue);gap:10px}

@media (max-width:980px){
  .svc-grid{grid-template-columns:1fr;gap:16px}
  .svc-blurb{min-height:auto}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* WHY                                                                         */
/* ─────────────────────────────────────────────────────────────────────────── */

.why{
  background:linear-gradient(180deg, #fff 0%, var(--bg-soft) 30%, #fff 100%);
  border-radius:32px;
}
.why-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;
}
.why-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:28px 26px;
  transition:transform .4s, box-shadow .4s, border-color .4s;
}
.why-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(30,155,255,0.25);
}
.why-ico{
  width:44px;height:44px;border-radius:12px;
  background:rgba(30,155,255,0.1);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.why-card h4{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin:0 0 8px}
.why-card p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0}

@media (max-width:980px){
  .why-grid{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:580px){
  .why-grid{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* GALLERY                                                                     */
/* ─────────────────────────────────────────────────────────────────────────── */

.gallery-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  margin-bottom:48px;flex-wrap:wrap;
}
@media (max-width:580px){
  .gallery-head{gap:20px;margin-bottom:32px}
  .gal-filters{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;flex-wrap:nowrap}
  .gal-filters::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0}
}
.gal-filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:8px 16px;border-radius:999px;
  font-size:13px;font-weight:500;
  background:#fff;border:1px solid var(--line);
  color:var(--ink-soft);
  transition:all .2s;
}
.chip:hover{border-color:var(--blue);color:var(--navy)}
.chip.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}

.gal-grid{
  columns:3;
  column-gap:20px;
}
.gal-card{
  break-inside:avoid;
  margin:0 0 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .4s, box-shadow .4s;
}
.gal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.gal-img{
  position:relative;height:var(--h);
  overflow:hidden;
}
.gal-img image-slot{
  width:100%;height:100%;
  display:block;
}
.gal-overlay{
  position:absolute;top:12px;left:12px;
}
.gal-tag{
  padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:0.05em;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  color:var(--navy);
}
.gal-card figcaption{padding:18px 22px 22px}
.gal-card h5{font-size:16px;font-weight:600;margin:0 0 4px;letter-spacing:-0.01em}
.gal-card p{font-size:13px;color:var(--ink-soft);margin:0}

@media (max-width:980px){.gal-grid{columns:2}}
@media (max-width:580px){.gal-grid{columns:1}}

/* ─────────────────────────────────────────────────────────────────────────── */
/* TESTIMONIALS                                                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.testi{
  text-align:center;
}
.testi-wrap{
  position:relative;
  max-width:780px;margin:0 auto;
}
.testi-stage{
  position:relative;
  min-height:340px;
}
@media (max-width:980px){.testi-stage{min-height:380px}}
@media (max-width:580px){.testi-stage{min-height:440px}}
.testi-card{
  position:absolute;inset:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:48px 40px 36px;
  box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(20px);
  transition:opacity .5s, transform .5s;
  pointer-events:none;
}
.testi-card.is-on{opacity:1;transform:translateY(0);pointer-events:auto}

.testi-stars{display:flex;gap:3px;justify-content:center;margin-bottom:20px;color:#F5A623}
.testi-card blockquote{
  font-size:clamp(18px, 2vw, 24px);
  line-height:1.55;letter-spacing:-0.01em;
  color:var(--navy);
  margin:0 0 28px;
  font-weight:500;
  text-wrap:balance;
}
.testi-by{display:flex;align-items:center;gap:14px;justify-content:center}
.testi-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--navy));
  color:#fff;font-weight:600;font-size:14px;letter-spacing:0.04em;
  display:flex;align-items:center;justify-content:center;
}
.testi-name{font-size:14px;font-weight:600;text-align:left}
.testi-role{font-size:12px;color:var(--ink-soft);text-align:left}

.testi-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.tdot{
  width:8px;height:8px;border-radius:50%;
  background:var(--line-strong);
  transition:background .2s, transform .2s;
}
.tdot.is-on{background:var(--blue);transform:scale(1.3)}

@media (max-width:680px){
  .testi-card{padding:32px 22px 26px}
  .testi-card blockquote{font-size:18px}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* CONTACT                                                                     */
/* ─────────────────────────────────────────────────────────────────────────── */

.contact{
  position:relative;
}
.contact-grid{
  display:grid;grid-template-columns:1fr 1.05fr;gap:60px;
  align-items:start;
}
.contact-list{list-style:none;padding:0;margin:32px 0;display:flex;flex-direction:column;gap:18px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.ci-ico{
  width:42px;height:42px;border-radius:12px;
  background:rgba(30,155,255,0.1);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ci-label{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.ci-val{font-size:17px;font-weight:600;color:var(--navy);transition:color .2s}
a.ci-val:hover{color:var(--blue)}

.map-card{
  margin-top:28px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:#F4F7FB;
}
.map-svg{width:100%;height:260px;display:block}
.pin-pulse{animation:pin-pulse 2.4s ease-in-out infinite}
@keyframes pin-pulse{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.8);opacity:0}}

.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:36px 36px 32px;
  box-shadow:var(--shadow-md);
}
@media (max-width:580px){.contact-form{padding:24px 20px;border-radius:18px}}
/* Bigger tap targets for inputs on mobile */
@media (max-width:580px){
  .field input, .field textarea{padding:14px 14px;font-size:16px /* prevent iOS zoom */}
  .seg-opt{padding:12px 8px;font-size:13px}
  .seg{grid-template-columns:1fr 1fr}
}
.cf-head h3{font-size:24px;letter-spacing:-0.02em;margin:0 0 6px}
.cf-head p{color:var(--ink-soft);font-size:14px;margin:0 0 24px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;position:relative}
.field>span{font-size:12px;font-weight:600;color:var(--ink-soft);letter-spacing:0.04em}
.field input, .field textarea{
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 14px;
  font-family:inherit;font-size:14px;
  background:#FBFDFF;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 0 0 4px rgba(30,155,255,0.12);
}
.field.is-err input{border-color:#E14B4B;background:#FFF5F5}
.field em{font-style:normal;font-size:11px;color:#E14B4B;margin-top:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:4px;background:var(--bg-tint);border-radius:14px}
.seg-opt{
  padding:10px;font-size:13px;font-weight:500;color:var(--ink-soft);
  border-radius:10px;transition:all .2s;
}
.seg-opt:hover{color:var(--navy)}
.seg-opt.on{background:#fff;color:var(--navy);font-weight:600;box-shadow:0 1px 3px rgba(10,31,68,0.08)}

.cf-fine{font-size:12px;color:var(--ink-mute);text-align:center;margin:16px 0 0}
.cf-fine a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

.cf-success{text-align:center;padding:20px 0}
.cf-success-ico{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg, var(--blue), color-mix(in oklab, var(--blue), var(--navy) 30%));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  box-shadow:var(--shadow-blue);
}
.cf-success h3{font-size:24px;letter-spacing:-0.02em;margin:0 0 8px}
.cf-success p{color:var(--ink-soft);margin:0 0 24px}
.cf-success-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  background:var(--bg-tint);border-radius:12px;padding:16px;
  margin-bottom:20px;
}
.cf-success-meta div{text-align:left}
.cf-success-meta span{font-size:11px;color:var(--ink-mute);letter-spacing:0.08em;text-transform:uppercase;font-weight:600}
.cf-success-meta b{display:block;font-size:14px;color:var(--navy);font-weight:600;margin-top:2px}

@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .contact-form{padding:28px 24px}
  .field-row{grid-template-columns:1fr}
  .seg{grid-template-columns:1fr 1fr}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* FOOTER                                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

.site-ft{
  background:linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  border-top:1px solid var(--line);
  padding:80px 32px 32px;
}
.ft-grid{
  max-width:var(--maxw);
  margin:0 auto 60px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;
}
.ft-logo{height:32px;margin-bottom:18px}
.ft-brand p{color:var(--ink-soft);font-size:14px;line-height:1.6;max-width:340px;margin:0 0 20px}
.ft-contact{display:flex;flex-direction:column;gap:8px}
.ft-contact a{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy);font-weight:500;transition:color .2s}
.ft-contact a:hover{color:var(--blue)}
.ft-contact a svg{color:var(--blue)}
.ft-col h6{font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--navy);margin:0 0 16px}
.ft-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ft-col li{font-size:14px;color:var(--ink-soft)}
.ft-col a{transition:color .2s}
.ft-col a:hover{color:var(--blue)}
.ft-bottom{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-mute);
}
@media (max-width:980px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .site-ft{padding:60px 24px 24px}
}
@media (max-width:580px){
  .ft-grid{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* STICKY MOBILE                                                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.sticky-mobile{
  position:fixed;
  bottom:max(12px, env(safe-area-inset-bottom, 12px));
  left:12px;right:12px;z-index:90;
  display:none;
  align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;
  background:linear-gradient(96deg, var(--blue), color-mix(in oklab, var(--blue), var(--navy) 30%));
  color:#fff;font-weight:600;font-size:15px;
  border-radius:999px;
  box-shadow:var(--shadow-blue), 0 1px 0 rgba(255,255,255,0.2) inset;
  animation:sticky-in .4s cubic-bezier(.2,.8,.2,1) .8s both;
}
@keyframes sticky-in{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
@media (max-width:680px){
  .sticky-mobile{display:flex}
  body{padding-bottom:84px}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* REVEAL                                                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

.rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.rv-on{opacity:1;transform:translateY(0)}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  .rv{opacity:1;transform:none}
}