/* GRV site styles — generated, do not hand-edit. Source of truth is the design file. */
.grv *,.grv *::before,.grv *::after{box-sizing:border-box;}
.grv img{max-width:100%;height:auto;}
.ast-container,.site-content .ast-container{max-width:none!important;padding:0!important;}
#content,.site-content{padding:0!important;margin:0!important;}
.entry-content>*{margin:0;}
/* Elementor kit CSS (post-6.css) sets the body background at higher specificity. */
html body{background:#F7FBFC!important;}

/* ============================================================
   GRV IT SOLUTIONS — FIVE PAGE SITE
   Shared design system, five deliberately different page layouts.
   Logo files are the real GRV artwork, embedded unmodified.
   ============================================================ */
:root{
  --navy:#0B2033; --navy-2:#16283A; --navy-3:#17414A;
  --teal:#128FA3; --teal-br:#22B8CC; --cyan-lt:#90DDE4;
  --teal-wash:rgba(34,184,204,.13);
  --canvas:#F7FBFC; --surface:#FFFFFF; --surface-2:#EEF7F8;
  --tx:#16202E; --tx-2:#2E3D4C; --tx-mut:#64717F;
  --tx-on-navy:#E8F2F5; --tx-on-navy-mut:#9FB6C2;
  --rule:rgba(11,32,51,.09); --rule-navy:rgba(255,255,255,.13);
  --r-xl:44px; --r-lg:36px; --r-md:32px; --r-sm:18px; --r-pill:9999px;
  --sh:0 1px 2px rgba(22,40,58,.06),0 10px 30px rgba(22,40,58,.06);
  --sh-2:0 2px 6px rgba(22,40,58,.07),0 24px 56px rgba(22,40,58,.12);
  --glass:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.68));
  --glass-in:inset 0 1px 0 0 rgba(255,255,255,.9);
  --grad:linear-gradient(100deg,#22B8CC,#90DDE4);
  --grad-navy:linear-gradient(145deg,#16283A 0%,#17414A 100%);
  --container:1320px; --gutter:32px; --sec:96px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --f:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --f-s:"Instrument Serif",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--canvas);color:var(--tx);font-family:var(--f);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* TYPE */
h1,h2,h3,h4{margin:0;text-wrap:balance;}
.d1{font-size:clamp(2.6rem,1.3rem + 6.6vw,7.4rem);font-weight:800;line-height:1;letter-spacing:-.035em;text-transform:uppercase;}
.d2{font-size:clamp(2.1rem,1.3rem + 3.6vw,4.4rem);font-weight:800;line-height:1.04;letter-spacing:-.032em;}
.d-serif{font-family:var(--f-s);font-weight:400;font-style:italic;text-transform:none;letter-spacing:-.028em;color:var(--teal);}
.h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.9rem);font-weight:700;line-height:1.11;letter-spacing:-.022em;}
.h3-row{font-size:clamp(1.45rem,1.05rem + 1.7vw,2.4rem);font-weight:600;line-height:1.3;letter-spacing:-.022em;}
.h3{font-size:1.32rem;font-weight:700;line-height:1.32;letter-spacing:-.022em;}
.h4{font-size:1.1rem;font-weight:700;line-height:1.4;letter-spacing:-.02em;}
.lead{font-size:clamp(1.02rem,.96rem + .34vw,1.18rem);line-height:1.62;color:var(--tx-mut);}
.sm{font-size:.94rem;line-height:1.65;color:var(--tx-mut);}
.xs{font-size:.84rem;line-height:1.55;color:var(--tx-mut);}
.lab{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);}
p.measure{max-width:58ch;}

/* SHELL */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.sec{padding:var(--sec) 0;}
.navy-s{background:var(--navy);color:var(--tx-on-navy);}
.navy-s .sm,.navy-s .lead,.navy-s .xs{color:var(--tx-on-navy-mut);}
.navy-s .lab{color:var(--teal-br);}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:52px;}

/* BLUEPRINT PANEL */
.panel{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-navy);
  color:var(--tx-on-navy);padding:64px;}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 10%,rgba(34,184,204,.28) 0%,rgba(34,184,204,0) 60%);}
.panel > *{position:relative;z-index:2;}
.panel .sm,.panel .lead,.panel .xs{color:var(--tx-on-navy-mut);}
.panel .lab{color:var(--teal-br);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f);
  font-size:1rem;font-weight:600;padding:15px 30px;border-radius:var(--r-pill);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:background .38s var(--ease),color .38s var(--ease),border-color .38s var(--ease),
             transform .28s var(--ease),box-shadow .38s var(--ease);}
.btn-n{background:var(--navy);color:#fff;}
.btn-n:hover{background:var(--teal);transform:translateY(-2px);box-shadow:0 12px 30px rgba(18,143,163,.32);}
.btn-t{background:var(--teal-br);color:#06222A;}
.btn-t:hover{background:var(--teal);color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(18,143,163,.34);}
.btn-g{background:var(--surface);color:var(--tx);border-color:var(--rule);box-shadow:var(--glass-in);}
.btn-g:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--sh);}
.navy-s .btn-g,.panel .btn-g{background:rgba(255,255,255,.08);color:#fff;border-color:var(--rule-navy);}
.navy-s .btn-g:hover,.panel .btn-g:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);}
.btn .a{transition:transform .32s var(--ease);}
.btn:hover .a{transform:translateX(4px);}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal-br);outline-offset:3px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:20px;top:12px;z-index:400;background:var(--navy);color:#fff;padding:11px 20px;border-radius:var(--r-pill);}

/* ---------- NAV — the real logo ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:16px var(--gutter);}
.nav-in{max-width:var(--container);margin:0 auto;display:flex;align-items:center;gap:16px;}
.brand{display:flex;align-items:center;text-decoration:none;background:var(--surface);
  padding:9px 22px;border-radius:var(--r-pill);box-shadow:var(--sh),var(--glass-in);}
.brand img{height:34px;width:auto;display:block;}
.navpill{margin-left:auto;display:flex;align-items:center;gap:4px;background:var(--surface);
  border-radius:var(--r-pill);padding:6px 6px 6px 24px;box-shadow:var(--sh),var(--glass-in);}
.navpill a{color:var(--tx-2);text-decoration:none;font-size:.94rem;font-weight:500;padding:0 13px;
  transition:color .3s var(--ease);position:relative;}
.navpill a:hover{color:var(--teal);}
.navpill a.act{color:var(--teal);font-weight:700;}
.navpill .cta{background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:11px 22px;
  display:inline-flex;align-items:center;gap:9px;font-weight:600;transition:background .35s var(--ease);}
.navpill .cta:hover,.navpill .cta.act{background:var(--teal);color:#fff;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--teal-br);flex:none;box-shadow:0 0 0 3px rgba(34,184,204,.28);}
/* ---------- MOBILE NAV ---------- */
.burger{display:none;margin-left:auto;background:var(--surface);border:0;border-radius:var(--r-pill);
  padding:14px 16px;color:var(--navy);cursor:pointer;box-shadow:var(--sh);
  position:relative;z-index:201;-webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);}
.burger:active{transform:scale(.96);}
.burger .bars{position:relative;display:block;width:18px;height:12px;}
.burger .bars i{position:absolute;left:0;right:0;top:0;height:1.8px;border-radius:2px;
  background:currentColor;
  transition:transform .34s var(--ease),opacity .18s linear,top .34s var(--ease);}
.burger .bars i:nth-child(2){top:5.1px;}
.burger .bars i:nth-child(3){top:10.2px;}
.burger[aria-expanded="true"]{background:rgba(255,255,255,.12);color:#fff;box-shadow:none;}
.burger[aria-expanded="true"] .bars i:nth-child(1){top:5.1px;transform:rotate(45deg);}
.burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0;transform:scaleX(.2);}
.burger[aria-expanded="true"] .bars i:nth-child(3){top:5.1px;transform:rotate(-45deg);}

/* The panel stays in the DOM and fades, so it can actually animate.
   overflow-y matters: twelve links do not fit on a small phone. */
.mob{display:flex;position:fixed;inset:0;z-index:199;background:rgba(11,32,51,.97);
  backdrop-filter:blur(10px);padding:110px var(--gutter) 40px;flex-direction:column;gap:6px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .36s var(--ease),visibility 0s linear .36s;}
.mob.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .26s var(--ease),transform .36s var(--ease),visibility 0s;}
.mob a{color:#fff;text-decoration:none;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  padding:16px 0;border-bottom:1px solid var(--rule-navy);flex:none;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),color .2s var(--ease);}
.mob.on a{opacity:1;transform:none;}
.mob.on a:nth-child(1){transition-delay:.05s}  .mob.on a:nth-child(2){transition-delay:.08s}
.mob.on a:nth-child(3){transition-delay:.11s}  .mob.on a:nth-child(4){transition-delay:.14s}
.mob.on a:nth-child(5){transition-delay:.17s}  .mob.on a:nth-child(6){transition-delay:.19s}
.mob.on a:nth-child(7){transition-delay:.21s}  .mob.on a:nth-child(8){transition-delay:.23s}
.mob.on a:nth-child(9){transition-delay:.25s}  .mob.on a:nth-child(10){transition-delay:.27s}
.mob.on a:nth-child(11){transition-delay:.29s} .mob.on a:nth-child(12){transition-delay:.31s}
.mob.on a:nth-child(n+13){transition-delay:.33s}
.mob a:active{color:var(--teal-br);}
.mob a.act{color:var(--teal-br);}
/* Stop the page behind scrolling while the menu is open. */
html.mob-open,html.mob-open body{overflow:hidden;}

/* Contact call-to-action, pinned to the bottom of the panel. The link list is
   taller than a phone screen, so a plain link at the end would sit below the
   fold; sticky keeps it reachable however far down the list you are. */
.mob a.mobcta{
  position:sticky;bottom:0;z-index:2;order:99;margin-top:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:19px 26px;border:0;border-radius:var(--r-pill);
  background:var(--teal);color:#fff;
  font-size:1.06rem;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 12px 34px rgba(11,32,51,.5);
  transform:none;                       /* sticky and translate do not mix */
}
.mob.on a.mobcta{transform:none;transition-delay:.1s;}
.mob a.mobcta .a{transition:transform .3s var(--ease);}
.mob a.mobcta:active{background:var(--navy);}
.mob a.mobcta:active .a{transform:translateX(4px);}



/* ---------- HERO VARIANTS ---------- */
.hero{padding:230px 0 88px;position:relative;overflow:hidden;}
.hero > .wrap{position:relative;z-index:2;}
.hero .line{display:flex;align-items:baseline;gap:clamp(10px,2vw,28px);flex-wrap:wrap;}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:48px;}
/* page-header used on inner pages — deliberately shorter than home */
.phead{padding:190px 0 56px;position:relative;overflow:hidden;}
.phead > .wrap{position:relative;z-index:2;}

/* mesh */
.mesh{position:absolute;top:-26%;right:-14%;width:min(1120px,82vw);height:min(980px,104vh);
  z-index:0;pointer-events:none;filter:blur(46px);opacity:0;animation:meshIn 1.5s var(--ease) .25s forwards;}
.mesh.sm-mesh{top:-40%;right:-22%;width:min(820px,70vw);height:min(700px,80vh);filter:blur(40px);}
.blob{position:absolute;border-radius:50%;will-change:transform;}
.b1{inset:6% 8% 30% 18%;background:radial-gradient(circle at 50% 50%,#22B8CC 0%,rgba(34,184,204,.55) 42%,rgba(34,184,204,0) 70%);animation:blobA 30s ease-in-out infinite;}
.b2{inset:22% 26% 14% 4%;background:radial-gradient(circle at 50% 50%,#1B85A0 0%,rgba(27,133,160,.5) 44%,rgba(27,133,160,0) 71%);animation:blobB 38s ease-in-out infinite;}
.b3{inset:2% 30% 40% 34%;background:radial-gradient(circle at 50% 50%,#16283A 0%,rgba(22,40,58,.4) 40%,rgba(22,40,58,0) 68%);animation:blobC 34s ease-in-out infinite;}
@keyframes meshIn{to{opacity:.92;}}
@keyframes blobA{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-5%,4%,0) scale(1.12);}}
@keyframes blobB{0%,100%{transform:translate3d(0,0,0) scale(1.05);}50%{transform:translate3d(6%,-5%,0) scale(.93);}}
@keyframes blobC{0%,100%{transform:translate3d(0,0,0) scale(.96);}50%{transform:translate3d(-4%,-6%,0) scale(1.1);}}

/* pill marquee */
.pillmarq{overflow:hidden;margin:0 0 30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 82%,transparent);}
.pillmarq-in{display:flex;gap:12px;width:max-content;animation:marqueeX 38s linear infinite;}
.chip{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:12px 26px;font-size:1rem;font-weight:500;color:var(--tx-2);white-space:nowrap;
  letter-spacing:-.01em;box-shadow:0 1px 2px rgba(22,40,58,.05),var(--glass-in);}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy);}
@keyframes marqueeX{to{transform:translateX(-50%);}}

/* particles */
.parts{position:absolute;inset:0;z-index:1;pointer-events:none;}
.p{position:absolute;color:var(--teal);opacity:0;animation:fadeIn .9s var(--ease) forwards;animation-delay:var(--in,600ms);}
.p svg{display:block;animation:var(--anim,drift1) var(--dur,22s) ease-in-out infinite;animation-delay:var(--del,0s);}
.p.screw{color:var(--teal-br);} .p.on-mesh{color:#fff;}
@keyframes fadeIn{to{opacity:var(--op,.2);}}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) rotate(0);}50%{transform:translate3d(14px,-22px,0) rotate(9deg);}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) rotate(0);}50%{transform:translate3d(-18px,-14px,0) rotate(-11deg);}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) rotate(0);}33%{transform:translate3d(10px,-16px,0) rotate(6deg);}66%{transform:translate3d(-8px,-26px,0) rotate(-5deg);}}
@keyframes spin{to{transform:rotate(360deg);}}

/* CARDS */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.val{background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:var(--r-md);
  padding:30px;box-shadow:var(--sh),var(--glass-in);display:flex;flex-direction:column;gap:12px;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease);}
.val:hover{transform:translateY(-5px);box-shadow:var(--sh-2),var(--glass-in);}
.val .ic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--teal-wash);color:var(--teal);
  display:grid;place-items:center;transition:background .4s var(--ease),color .4s var(--ease);}
.val:hover .ic{background:var(--teal);color:#fff;}

/* NUMBERED ROWS */
.nrow{display:grid;grid-template-columns:74px 1fr minmax(0,400px) auto;gap:30px;align-items:center;
  padding:32px 0;border-top:1px solid var(--rule-navy);text-decoration:none;color:inherit;}
.nrow:last-of-type{border-bottom:1px solid var(--rule-navy);}
.nrow .n{font-size:.98rem;font-weight:700;color:var(--teal-br);}
.nrow h3{transition:transform .42s var(--ease);color:#fff;}
.nrow:hover h3{transform:translateX(12px);}
.nrow .go{width:52px;height:52px;border-radius:50%;border:1px solid var(--rule-navy);display:grid;
  place-items:center;color:#fff;flex:none;
  transition:background .38s var(--ease),color .38s var(--ease),border-color .38s var(--ease),transform .38s var(--ease);}
.nrow:hover .go{background:var(--teal-br);color:#06222A;border-color:var(--teal-br);transform:rotate(-45deg);}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.step{background:var(--surface);border-radius:var(--r-md);padding:34px;box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:13px;transition:transform .42s var(--ease),box-shadow .42s var(--ease);}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-2);}
.tags{display:flex;gap:8px;flex-wrap:wrap;}
.tag{font-size:.76rem;font-weight:600;padding:6px 14px;border-radius:var(--r-pill);background:var(--teal-wash);color:#0B6273;}
.step .big{font-size:1rem;font-weight:700;color:var(--teal);}

/* TIMELINE */
.tlrow{display:grid;grid-template-columns:130px 1fr;gap:32px;padding:28px 0;border-top:1px solid var(--rule);}
.tlrow:last-child{border-bottom:1px solid var(--rule);}
.tlrow .yr{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;color:var(--teal);font-variant-numeric:tabular-nums;}

/* MISSION/VISION + CHECKS */
.mv{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.mvc{background:rgba(255,255,255,.06);border:1px solid var(--rule-navy);border-radius:var(--r-md);
  padding:32px;display:flex;flex-direction:column;gap:12px;transition:background .4s var(--ease),border-color .4s var(--ease);}
.mvc:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);}
.checks{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:var(--tx-on-navy);}
.checks .ck{width:24px;height:24px;flex:none;border-radius:50%;background:var(--teal-br);color:#06222A;
  display:grid;place-items:center;margin-top:2px;}

/* FIGURES / HUBS */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.figc{background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:var(--r-md);
  padding:32px;box-shadow:var(--sh),var(--glass-in);}
.figc .n{font-size:clamp(2.3rem,1.7rem + 2.4vw,3.5rem);font-weight:800;line-height:1;letter-spacing:-.04em;
  color:var(--navy);font-variant-numeric:tabular-nums;}
.figc .n .u{color:var(--teal);}
.hubs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hubc{background:var(--surface);border-radius:var(--r-md);padding:32px;box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:14px;transition:transform .42s var(--ease),box-shadow .42s var(--ease);}
.hubc:hover{transform:translateY(-6px);box-shadow:var(--sh-2);}
.pinbadge{width:46px;height:46px;border-radius:var(--r-sm);background:var(--grad);display:grid;place-items:center;color:#06222A;}

/* FAQ */
.faq{max-width:820px;margin:0 auto;}
details{background:var(--surface);border-radius:var(--r-sm);margin-bottom:12px;box-shadow:var(--sh);}
summary{list-style:none;cursor:pointer;padding:22px 28px;display:flex;gap:18px;align-items:center;
  justify-content:space-between;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--navy);}
summary::-webkit-details-marker{display:none;}
summary .pm{width:26px;height:26px;flex:none;border-radius:50%;background:var(--teal-wash);position:relative;}
summary .pm::before,summary .pm::after{content:"";position:absolute;background:var(--teal);left:50%;top:50%;transition:transform .35s var(--ease);}
summary .pm::before{width:12px;height:2px;transform:translate(-50%,-50%);}
summary .pm::after{width:2px;height:12px;transform:translate(-50%,-50%);}
details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0);}
details p{padding:0 28px 22px;margin:0;color:var(--tx-mut);font-size:.95rem;}

/* FORM */
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-on-navy-mut);}
.field input,.field textarea,.field select{font-family:var(--f);font-size:1rem;padding:14px 18px;
  border-radius:var(--r-sm);border:1px solid var(--rule-navy);background:rgba(255,255,255,.07);
  color:#fff;width:100%;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.34);}
.field select option{background:var(--navy-2);color:#fff;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal-br);box-shadow:0 0 0 3px rgba(34,184,204,.22);}
.ok{display:none;padding:14px 18px;border-radius:var(--r-sm);background:rgba(34,184,204,.15);
  border:1px solid var(--teal-br);color:#fff;font-size:.95rem;}
.ok.on{display:block;}

/* SERVICE DETAIL ROWS (services page) */
.svc{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:52px;align-items:center;
  background:var(--surface);border-radius:var(--r-lg);padding:44px;box-shadow:var(--sh);margin-bottom:20px;}
.svc:nth-child(even) .svc-body{order:2;}
.svc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.svc ul li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--tx-2);}
.svc ul .ck{width:22px;height:22px;flex:none;border-radius:50%;background:var(--teal-wash);color:var(--teal);
  display:grid;place-items:center;margin-top:2px;}
.svc-art{border-radius:var(--r-md);background:var(--surface-2);display:grid;place-items:center;
  min-height:230px;overflow:hidden;position:relative;}

/* BLOG */
.feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);}
.feat-art{background:var(--grad-navy);position:relative;min-height:320px;display:grid;place-items:center;}
.feat-art::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:44px 44px;}
.feat-body{padding:48px;display:flex;flex-direction:column;gap:16px;justify-content:center;}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.post{background:var(--surface);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease);}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-2);}
.post-art{height:150px;position:relative;display:grid;place-items:center;color:#fff;}
.pa1{background:linear-gradient(135deg,#22B8CC,#128FA3);}
.pa2{background:linear-gradient(135deg,#128FA3,#17414A);}
.pa3{background:linear-gradient(135deg,#17414A,#0B2033);}
.pa4{background:linear-gradient(135deg,#90DDE4,#22B8CC);color:#06222A;}
.pa5{background:linear-gradient(135deg,#1B6E85,#22B8CC);}
.pa6{background:linear-gradient(135deg,#0B2033,#128FA3);}
.post-body{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1;}
.post .meta{display:flex;gap:10px;align-items:center;font-size:.78rem;color:var(--tx-mut);font-weight:600;}
.post .meta .cat{color:var(--teal);}
.cats{display:flex;gap:10px;flex-wrap:wrap;}
.cats button{font-family:var(--f);font-size:.88rem;font-weight:600;padding:9px 20px;border-radius:var(--r-pill);
  border:1px solid var(--rule);background:var(--surface);color:var(--tx-2);cursor:pointer;
  transition:all .3s var(--ease);}
.cats button:hover{border-color:var(--navy);}
.cats button.on{background:var(--navy);color:#fff;border-color:var(--navy);}

/* FOOTER */
.foot{background:var(--navy);color:var(--tx-on-navy);padding:0 0 32px;}
.foot-g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-top:72px;}
.foot img{height:40px;width:auto;display:block;}
.foot a{color:var(--tx-on-navy-mut);text-decoration:none;font-size:.94rem;transition:color .3s var(--ease);}
.foot a:hover{color:var(--teal-br);}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot h4{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-on-navy-mut);}
.foot .base{margin-top:52px;padding-top:26px;border-top:1px solid var(--rule-navy);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--tx-on-navy-mut);font-size:.87rem;}

/* MOTION */
/* Fail-safe reveals: content is visible by default. Only once grv.js has
   confirmed it is running (html.grv-js) do elements start hidden. If the
   script never loads, the page still renders in full. */
.rv{opacity:1;transform:none;}
.grv-js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms);}
.grv-js .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .rv{opacity:1;transform:none;}
  .pillmarq-in{animation:none;} .mesh{opacity:.92;animation:none;} .blob{animation:none;}
  .mob{transition:none;} .mob a{opacity:1;transform:none;transition:none;transition-delay:0s!important;}
  .burger .bars i{transition:none;}
}

/* RESPONSIVE */
@media (max-width:1150px){
  .nrow{grid-template-columns:56px 1fr auto;gap:22px;} .nrow .desc{grid-column:2/-1;max-width:none;}
  .triad{grid-template-columns:1fr;} .posts{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  :root{--gutter:22px;--sec:68px;--r-xl:32px;--r-lg:28px;--r-md:24px;}
  .navpill{display:none;} .burger{display:block;}
  .hero{padding:170px 0 60px;} .phead{padding:150px 0 44px;}
  .panel{padding:40px 26px;}
  .steps,.mv,.hubs,.figs,.svc,.feat{grid-template-columns:1fr;}
  .svc{padding:28px;gap:30px;} .svc:nth-child(even) .svc-body{order:0;}
  .feat-body{padding:32px;}
  .tlrow{grid-template-columns:1fr;gap:10px;}
  .p:nth-child(6),.p:nth-child(9){display:none;} .p{transform:scale(.78);}
  .mesh{top:-20%;right:-30%;width:min(760px,110vw);height:min(620px,70vh);filter:blur(38px);}
  .chip{font-size:.94rem;padding:10px 20px;}
}
@media (max-width:620px){
  :root{--gutter:18px;--sec:56px;}
  .hero{padding:142px 0 48px;} .phead{padding:130px 0 36px;}
  .nrow{grid-template-columns:1fr auto;gap:10px 18px;padding:24px 0;}
  .nrow .n,.nrow .desc{grid-column:1/-1;} .nrow:hover h3{transform:none;} .nrow .go{width:44px;height:44px;}
  .foot-g{grid-template-columns:1fr;gap:32px;}
  .posts{grid-template-columns:1fr;}
  .p{display:none;transform:scale(.7);} .p:nth-child(1),.p:nth-child(3),.p:nth-child(7){display:block;}
  .p svg{animation:none;}
  .mesh{top:-14%;right:-42%;width:min(560px,125vw);height:min(460px,52vh);filter:blur(30px);animation:none;opacity:.85;}
  .blob{animation:none;}
  .chip{font-size:.88rem;padding:9px 18px;} .pillmarq-in{gap:10px;animation-duration:30s;}
  .step,.val,.hubc,.figc{padding:26px;}
  .herocta{flex-direction:column;align-items:stretch;} .herocta .btn{width:100%;}
  .brand img{height:28px;} .brand{padding:8px 16px;}
}
@media (max-width:380px){:root{--gutter:15px;}}


/* ---------- PROSE COLUMN ----------
   Reading measure without breaking the grid: the container stays the full
   1320px so its left edge matches every other section, and each child block
   is capped instead. Previously these sections were centred at 900px, which
   made body copy start ~150px further in than the section above it. */
.wrap.prose{max-width:1320px;}
.wrap.prose > *{max-width:900px;}
.wrap.prose > .faq{max-width:900px;margin-left:0;margin-right:0;}

/* ---------- SERVICES DROPDOWN ---------- */
.hasdrop{position:relative;display:flex;align-items:center;}
.hasdrop > a{display:inline-flex;align-items:center;gap:6px;}
.hasdrop > a svg{transition:transform .3s var(--ease);}
.hasdrop:hover > a svg,.hasdrop:focus-within > a svg,.hasdrop.open > a svg{transform:rotate(180deg);}
.drop{
  position:absolute;top:100%;left:50%;min-width:252px;z-index:120;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:var(--sh-2),var(--glass-in);padding:9px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(14px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
/* invisible bridge so the menu survives the gap under the pill */
.hasdrop::after{content:"";position:absolute;top:100%;left:0;right:0;height:22px;}
/* .open is set by grv.js when the parent is clicked. Hover alone was not
   enough: a click on the parent navigated away before the panel could be read. */
.hasdrop:hover .drop,.hasdrop:focus-within .drop,.hasdrop.open .drop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(18px);}
.drop a{
  padding:11px 15px;border-radius:var(--r-sm);font-size:.92rem;font-weight:500;
  color:var(--tx-2);white-space:nowrap;text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease);}
.drop a:hover{background:var(--surface-2);color:var(--teal);}
/* The parent page moved into the panel once the parent link became a toggle. */
.drop a.drop-top{font-weight:600;}
.drop .drop-sep{height:1px;background:var(--rule);margin:6px 7px;}

/* mobile drawer sub-items */
.mob .sub{font-size:1.05rem;font-weight:600;color:var(--tx-on-navy-mut);padding:12px 0 12px 20px;
  border-bottom:1px solid var(--rule-navy);}
.mob .sub::before{content:"";display:inline-block;width:14px;height:1px;background:var(--teal-br);
  vertical-align:middle;margin-right:12px;}
@media (max-width:900px){ .hasdrop,.drop{display:none;} }
/* ---------- INLINE GRID OVERRIDE ----------
   Several sections carry grid-template-columns as an inline style, and inline
   styles beat media queries. Without this, About and Contact stayed in two
   ~140px columns on a phone. Everything stacks below 900px. */
@media (max-width:900px){
  .grv [style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
    gap:32px!important;
  }
  .grv .wrap[style*="gap:64px"],
  .grv .wrap[style*="gap:56px"]{ gap:32px!important; }
}
@media (max-width:620px){
  .grv [style*="grid-template-columns"]{ gap:22px!important; }
  /* stacked cards should not keep desktop side padding */
  .grv .panel{ padding:32px 22px; }
}
/* ---------- FOOTER HEADINGS + TAP TARGETS ----------
   Footer column headings are h3 so the document outline never skips a level.
   Styling is unchanged. Link padding meets the 24px minimum tap target, and
   goes past 44px on touch devices. */
.foot h3.foot-h{font-size:.75rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tx-on-navy-mut);margin:0;}
.foot ul a,.foot .base a{display:inline-block;padding:5px 0;}
@media (pointer:coarse){
  .foot ul a{padding:11px 0;}
  .drop a{min-height:44px;display:flex;align-items:center;}
  .navpill a{padding-top:10px;padding-bottom:10px;}
}

/* ---------- HOMEPAGE IMAGERY ----------
   Photography slots on the home page. Nothing here changes copy or layout
   rhythm; each figure sits inside the card or panel that already existed. */
.gfig{position:relative;overflow:hidden;margin:0;line-height:0;
  border-radius:var(--r-lg);background:var(--navy-2);box-shadow:var(--sh);}
.gfig img{display:block;width:100%;height:100%;object-fit:cover;}
.gfig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,32,51,0) 58%,rgba(11,32,51,.22));}

/* 1. Wide band under the hero. */
.heroband .gfig{aspect-ratio:21/9;border-radius:var(--r-xl);box-shadow:var(--sh-2);}

/* 2. Image beside a heading inside a navy panel. */
.pmedia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:44px;align-items:center;}
.pmedia .head{margin-bottom:0;}
.pmedia .gfig{aspect-ratio:4/3;border:1px solid var(--rule-navy);}

/* 3. Image stacked above the Lenovo checklist. */
.lencol{display:flex;flex-direction:column;gap:26px;}
.lencol .gfig{aspect-ratio:4/3;border:1px solid var(--rule-navy);}

/* 4. Thumbnails inside the specialist-repair cards. */
.hubc .gfig{aspect-ratio:3/2;border-radius:var(--r-sm);box-shadow:none;}
.hubc-wide .gfig{aspect-ratio:16/6;margin-bottom:14px;}
.hubc:hover .gfig img{transform:scale(1.035);}
.hubc .gfig img{transition:transform .6s var(--ease);}

@media (max-width:900px){
  .pmedia{grid-template-columns:1fr;gap:32px;}
  .hubc-wide .gfig{aspect-ratio:16/8;}
}
@media (prefers-reduced-motion:reduce){
  .hubc:hover .gfig img{transform:none;}
}


/* ---------- HOME HERO PHOTO ----------
   The home hero carries the diagnosis shot at top-right, bleeding off the
   right edge, with the copy holding a left column. The mesh moves behind the
   type so the photograph owns the right half of the frame instead of
   competing with it. Only .hero.has-shot is affected; inner-page heroes and
   .phead are untouched. */
.hero.has-shot{padding-top:206px;}
.hero.has-shot .mesh{top:-44%;right:auto;left:-34%;
  width:min(880px,64vw);height:min(760px,90vh);filter:blur(96px);
  animation-name:meshInSoft;}
@keyframes meshInSoft{to{opacity:.40;}}
.hero.has-shot .lab,
.hero.has-shot .pillmarq,
.hero.has-shot .d1,
.hero.has-shot .hero-foot{max-width:min(56%,740px);}
.hero.has-shot .d1{font-size:clamp(2.4rem,1.1rem + 4.4vw,5rem);}
.hero.has-shot .hero-foot{flex-direction:column;align-items:flex-start;gap:26px;margin-top:38px;}
.hero.has-shot .lead.measure{max-width:44ch;}
.hero.has-shot .d-serif{font-size:clamp(2rem,1rem + 4.2vw,4.6rem);}

.hero-shot{position:absolute;z-index:1;top:84px;right:0;width:min(54%,940px);
  margin:0;line-height:0;pointer-events:none;-webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0,#000 30%);
  opacity:0;animation:shotIn 1.15s var(--ease) .3s forwards;}
.hero-shot img{display:block;width:100%;height:auto;}
@keyframes shotIn{from{opacity:0;transform:translate3d(30px,-16px,0);}to{opacity:1;transform:none;}}

/* Stacked under the copy once the two columns stop fitting side by side. */
@media (max-width:1100px){
  .hero.has-shot{padding-top:176px;}
  .hero.has-shot .lab,
  .hero.has-shot .pillmarq,
  .hero.has-shot .d1,
  .hero.has-shot .hero-foot{max-width:none;}
  .hero.has-shot .d1{font-size:clamp(2.6rem,1.3rem + 6.6vw,7.4rem);}
  .hero.has-shot .hero-foot{flex-direction:row;justify-content:space-between;
    align-items:flex-end;flex-wrap:wrap;gap:32px;margin-top:48px;}
  .hero.has-shot .lead.measure{max-width:58ch;}
  .hero.has-shot .d-serif{font-size:clamp(2.2rem,1.05rem + 5.4vw,6.2rem);}
  .hero.has-shot .mesh{top:-26%;right:-14%;left:auto;
    width:min(1120px,82vw);height:min(980px,104vh);filter:blur(46px);}
  .hero-shot{position:static;width:100%;margin:44px 0 -70px;
    -webkit-mask-image:none;mask-image:none;
    opacity:1;animation:none;}
}
@media (max-width:620px){
  .hero-shot{margin:32px 0 -54px;}
}
@media (prefers-reduced-motion:reduce){
  .hero-shot{opacity:1;animation:none;}
}


/* ---------- SERVICE CARD PHOTOGRAPHS ----------
   .svc-art was built to centre a small inline SVG (place-items:center).
   When it holds a photograph instead, the art box becomes a full-bleed
   frame: the image fills the rounded box and crops, rather than sitting
   centred at its intrinsic size. Only art boxes that actually contain an
   img are switched, so the remaining SVG cards are untouched. */
.svc-art:has(img){place-items:stretch;}
.svc-art img{width:100%;height:100%;min-height:230px;object-fit:cover;display:block;}
@media (max-width:900px){.svc-art img{min-height:200px;}}

/* ---------- PAGE-HEADER PHOTOGRAPH ----------
   A wide band sitting under the .phead copy. It is deliberately let-through
   rather than boxed: same rounded frame and shadow as the service cards, so
   the header reads as the first card in the stack rather than a banner. */
.phead-shot{margin:44px 0 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);line-height:0;}
.phead-shot img{width:100%;height:auto;display:block;}
@media (max-width:900px){.phead-shot{margin-top:32px;}}


/* ============================================================
   SERVICES DARK HERO
   Full-bleed bench photograph, navy scrim, copy on the empty left.
   The nav sits over it while the hero is in view (.nav-solid flips
   it back to the light pill once you scroll past — see grv.js).
   ============================================================ */
.svc-hero{position:relative;overflow:hidden;background:var(--navy);
  color:var(--tx-on-navy);padding:184px 0 52px;}
.svc-hero-bg{position:absolute;inset:0;z-index:0;}
.svc-hero-bg picture,.svc-hero-bg img{display:block;width:100%;height:100%;}
/* The photograph is 2400x847 with the bench empty on the left and the
   technician on the right — cover crops horizontally, so hold the frame
   left of centre to keep the empty half under the headline. */
.svc-hero-bg img{object-fit:cover;object-position:32% 50%;}
/* Two scrims: a left-to-right ramp so the headline always has contrast,
   and a top/bottom pass so the fixed nav and the section seam stay clean. */
.svc-hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(7,20,33,.96) 0%,rgba(7,20,33,.9) 32%,rgba(7,20,33,.62) 58%,rgba(7,20,33,.3) 100%),
             linear-gradient(180deg,rgba(7,20,33,.7) 0%,rgba(7,20,33,0) 30%,rgba(7,20,33,0) 62%,rgba(11,32,51,.9) 100%);}
.svc-hero > .wrap{position:relative;z-index:2;}

.svc-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;}
.svc-hero-copy{min-width:0;}
.svc-hero .lab{color:var(--teal-br);}
.svc-hero h1{color:#fff;}
.svc-hero .d-serif{color:var(--teal-br);}
.svc-hero .lead{color:rgba(232,242,245,.84);}
.svc-hero .btn-g{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none;}
.svc-hero .btn-g:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);}

/* Diagnose / Repair / Restore — the serif is the brand's one flourish. */
.svc-script{margin:0;font-family:var(--f-s);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,1rem + 1.5vw,2.45rem);line-height:1.26;letter-spacing:-.02em;
  text-align:right;color:rgba(255,255,255,.92);white-space:nowrap;
  /* it lands over the busiest part of the photograph */
  text-shadow:0 2px 18px rgba(7,20,33,.85),0 1px 3px rgba(7,20,33,.7);}
.svc-script span{display:block;}
.svc-script span:last-child{position:relative;padding-bottom:8px;}
.svc-script span:last-child::after{content:"";position:absolute;left:8%;right:0;bottom:0;
  height:2px;border-radius:2px;background:var(--teal-br);}

.svc-trust{list-style:none;margin:60px 0 0;padding:34px 0 0;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:18px 60px;}
.svc-trust li{display:flex;align-items:center;gap:12px;
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:#E8F2F5;}
.svc-trust svg{color:var(--teal-br);flex:none;}

/* ---- nav over the dark hero (services page only) ---- */
.brand .brand-alt{display:none;}
body.page-id-25 .nav:not(.nav-solid) .brand{background:transparent;box-shadow:none;padding:9px 0;}
body.page-id-25 .nav:not(.nav-solid) .brand .brand-main{display:none;}
body.page-id-25 .nav:not(.nav-solid) .brand .brand-alt{display:block;}
body.page-id-25 .nav:not(.nav-solid) .navpill{background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.17);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
/* Top-level pill links only. `.navpill a` also matched the links inside the
   dropdown panel, and at (0,4,1) it beat `.drop a`, so the panel rendered
   white text on its own white background - invisible until hovered. */
body.page-id-25 .nav:not(.nav-solid) .navpill > a,
body.page-id-25 .nav:not(.nav-solid) .navpill .hasdrop > a{color:rgba(255,255,255,.88);}
body.page-id-25 .nav:not(.nav-solid) .navpill > a:hover,
body.page-id-25 .nav:not(.nav-solid) .navpill > a.act,
body.page-id-25 .nav:not(.nav-solid) .navpill .hasdrop > a:hover,
body.page-id-25 .nav:not(.nav-solid) .navpill .hasdrop > a.act{color:var(--teal-br);}
body.page-id-25 .nav:not(.nav-solid) .navpill .cta{background:var(--teal-br);color:#06222A;}
body.page-id-25 .nav:not(.nav-solid) .navpill .cta:hover{background:#fff;color:var(--navy);}
body.page-id-25 .nav:not(.nav-solid) .navpill .cta .dot{background:#06222A;box-shadow:0 0 0 3px rgba(6,34,42,.22);}
body.page-id-25 .nav:not(.nav-solid) .burger{background:rgba(255,255,255,.12);color:#fff;box-shadow:none;}

@media (max-width:1040px){
  .svc-hero-in{grid-template-columns:1fr;gap:34px;}
  .svc-script{text-align:left;}
  .svc-script span:last-child::after{left:0;right:auto;width:64%;}
}
@media (max-width:760px){
  .svc-hero{padding:150px 0 44px;}
  .svc-hero-bg img{object-position:62% 40%;}
  .svc-hero-scrim{background:linear-gradient(180deg,rgba(7,20,33,.82) 0%,rgba(7,20,33,.7) 40%,rgba(11,32,51,.94) 100%);}
  .svc-script{display:none;}
  .svc-trust{margin-top:44px;padding-top:26px;gap:14px 32px;}
  .svc-trust li{font-size:.9rem;}
}
@media (prefers-reduced-motion:reduce){
  .svc-hero-bg img{transform:none;}
}

/* ---------- BLOG & LOCATION PHOTOGRAPHY ----------
   A post card keeps its tinted art block; when the post has a featured image
   the photo fills that same block, so the grid rhythm never shifts. */
.post-art.has-img,.feat-art.has-img{overflow:hidden;}
.post-art.has-img img,.feat-art.has-img img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;}
.post-art.has-img::after,.feat-art.has-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,32,51,0) 55%,rgba(11,32,51,.30));}
.feat-art.has-img::before{display:none;}
.post-art.has-img img{transition:transform .6s var(--ease);}
.post:hover .post-art.has-img img{transform:scale(1.04);}

/* Place photo at the top of a Locations card. */
.hubc>.gfig{margin:-6px 0 4px;}
@media (prefers-reduced-motion:reduce){
  .post:hover .post-art.has-img img{transform:none;}
}


/* ---------- HERO TECH BADGE ----------
   Replaces the flat eyebrow on the homepage hero with a dark signal chip.
   Cyan only ever sits on a navy ground, which is where the palette allows it. */
.techlab{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 20px 9px 15px;border-radius:var(--r-pill);
  background:var(--grad-navy);border:1px solid rgba(34,184,204,.34);
  box-shadow:0 10px 28px rgba(11,32,51,.18),inset 0 1px 0 rgba(255,255,255,.08);
  font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cyan-lt);position:relative;overflow:hidden;isolation:isolate;}
.techlab::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(144,221,228,.20) 50%,transparent 62%);
  transform:translateX(-120%);animation:tlSweep 6s var(--ease) 1.2s infinite;}
@keyframes tlSweep{0%{transform:translateX(-120%);}55%,100%{transform:translateX(120%);}}
.techlab .tl-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-br);flex:none;
  animation:tlPulse 2.6s var(--ease) infinite;}
@keyframes tlPulse{0%{box-shadow:0 0 0 0 rgba(34,184,204,.55);}
  70%{box-shadow:0 0 0 9px rgba(34,184,204,0);}100%{box-shadow:0 0 0 0 rgba(34,184,204,0);}}
.techlab .tl-txt{color:#fff;}
.techlab .tl-sep{width:1px;height:13px;background:rgba(144,221,228,.34);flex:none;}
.techlab .tl-city{color:var(--cyan-lt);opacity:.92;}
.techlab .tl-slash{color:var(--teal-br);opacity:.5;margin:0 -5px;}
@media (max-width:560px){
  .techlab{letter-spacing:.1em;gap:9px;padding:8px 15px 8px 12px;}
  .techlab .tl-sep{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .techlab::after{animation:none;}
  .techlab .tl-dot{animation:none;}
}

/* ---------- FOUR-UP HUB GRID ----------
   The bench grid was built for three. Hyderabad makes four, so a modifier
   drops to two columns early rather than leaving one card stranded. */
.hubs.hubs-4{grid-template-columns:repeat(4,1fr);gap:18px;}
.hubs.hubs-4 .hubc{padding:26px;}
@media (max-width:1180px){.hubs.hubs-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.hubs.hubs-4{grid-template-columns:1fr;}}

/* ---------- FRANCHISE PAGE ----------
   Same field styling as the contact form, on a navy panel. */
.fr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start;}
@media (max-width:960px){.fr-grid{grid-template-columns:1fr;gap:38px;}}
.fr-form{display:flex;flex-direction:column;gap:16px;}
.fr-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){.fr-two{grid-template-columns:1fr;}}
.fr-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.fr-points li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--tx-2);}
.navy-s .fr-points li{color:var(--tx-on-navy-mut);}
.fr-points .ck{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--teal-wash);color:var(--teal-br);margin-top:2px;}


/* ---------- CARD INTERIOR ALIGNMENT ----------
   The grid already gives every card in a row the same outer height. These rules
   make the insides agree too: the trailing call to action sits on the card floor
   rather than wherever the copy above it happened to stop, so a one-line address
   and a three-line address still produce buttons on the same line. */
.hubc > .btn:last-child,
.hubc > .lnk:last-child,
.hubc > span:last-child,
.hubc > p.xs:last-child,
.val  > .btn:last-child,
.step > .btn:last-child{margin-top:auto!important;}
/* !important because these trailing elements carry hand-written inline margins
   (margin:0 resets on the paragraphs, margin-top:6px on some buttons) that would
   otherwise win and leave the row ragged. */

/* Where the titles in one row wrap to different line counts, reserve two lines
   so the copy beneath them starts level. Opt-in with .cards-align, because most
   rows are single-line titles that would only gain dead space. */
@media (min-width:901px){
  .cards-align .val > .h3,
  .cards-align .hubc > .h3{min-height:2.64em;}
}

/* A location card whose photo has not been uploaded yet keeps the same 3:2
   block, so the cards beside it do not sit against a hole in the row. */
.gfig-ph{background:linear-gradient(135deg,var(--surface-2),rgba(34,184,204,.18));
  display:grid;place-items:center;color:var(--teal);opacity:.85;}
.gfig-ph::after{display:none;}


/* ---------- ABOUT PAGE PHOTO SLOTS ----------
   Every photo here is swappable from wp-admin, so the file behind a slot can be
   any size. With no explicit width the image renders at its own intrinsic width,
   and a replacement smaller than the container leaves a gap beside it. Filling
   the figure keeps the layout identical whatever gets uploaded. */
.ab-shot{display:block;}
.ab-shot img{display:block;width:100%;height:auto;}


/* ---------- ENGINEER PORTRAITS ----------
   Four branch portraits in the page container, on the shared navy ground. The
   photos are pre-cropped to 4:5 with the crown on a common line, so the frame
   only has to hold that ratio and never re-crop a head. */
.teamrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px);}
.teamc{margin:0;min-width:0;}
.teamph{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-sm);
  background:#E3EDF3;box-shadow:0 12px 30px rgba(4,14,24,.32);}
.teamph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .5s var(--ease);}
.teamc:hover .teamph img{transform:scale(1.035);}
.teamph::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--grad);}
.teamc figcaption{padding-top:16px;display:flex;flex-direction:column;gap:4px;}
.teamc .nm{font-size:1.06rem;font-weight:700;line-height:1.3;letter-spacing:-.018em;color:#fff;margin:0;}
.teamc .rl{font-size:.84rem;font-weight:600;letter-spacing:.02em;color:var(--teal-br);margin:0;}
@media (max-width:900px){
  .teamrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;}
}
@media (max-width:520px){
  .teamrow{grid-template-columns:minmax(0,1fr);max-width:320px;margin:0 auto;gap:26px;}
}
@media (prefers-reduced-motion:reduce){
  .teamph img{transition:none;}
  .teamc:hover .teamph img{transform:none;}
}