/* ============================================================
   GTM Digital — shared site styles
   Design system: dark theme, teal accent, navy, Poppins.
   Sizing rule: images never exceed 100% width, always use
   object-fit:contain inside fixed-aspect containers so nothing
   stretches across mobile / 1080p / 1440p / 4K.
   ============================================================ */

:root{
  --gtm-teal:#14C4BC;
  --gtm-light-blue:#19A6F7;
  --gtm-blue:#1F70CC;
  --gtm-purple:#764BD9;
  --gtm-navy:#191259;
  --gtm-charcoal:#303338;
  --gtm-white:#FFFFFF;
  --gtm-dark:#161618;
  --gtm-dark-2:#1C1C1F;
  --gtm-card:#212125;
  --gtm-card-border:rgba(255,255,255,0.09);
  --gtm-text-light:rgba(255,255,255,0.66);
  --font:'Poppins',Arial,sans-serif;
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);color:var(--gtm-text-light);line-height:1.6;background:var(--gtm-dark);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
a{color:var(--gtm-blue);text-decoration:none;}
img{max-width:100%;height:auto;display:block;}

/* ---------- Nav ---------- */
.siteheader{position:sticky;top:0;z-index:100;background:rgba(22,22,24,0.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--maxw);margin:0 auto;position:relative;}
.navbrand{display:block;}
.navlogo{height:36px;width:auto;display:block;}
.navlinks{display:flex;gap:28px;align-items:center;}
.navlinks a{color:rgba(255,255,255,0.82);font-size:15px;font-weight:400;transition:color .15s ease;}
.navlinks a:hover{color:#fff;}
.navlinks a.active{color:var(--gtm-teal);font-weight:500;}
.nav a.navcta{background:var(--gtm-teal);color:var(--gtm-navy);padding:10px 20px;border-radius:8px;font-weight:600;font-size:14px;transition:transform .15s ease,box-shadow .15s ease;}
.nav a.navcta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,196,188,0.3);color:var(--gtm-navy);}
.navtoggle{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;line-height:1;}
@media(max-width:900px){
  .navlinks{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--gtm-dark-2);padding:20px 24px;gap:16px;border-top:1px solid var(--gtm-card-border);z-index:50;}
  .navlinks.open{display:flex;}
  .navtoggle{display:block;}
  .nav a.navcta{align-self:flex-start;}
}

/* ---------- Buttons ---------- */
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn{display:inline-block;padding:15px 30px;border-radius:9px;font-weight:600;font-size:16px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;cursor:pointer;}
.btn-primary{background:var(--gtm-teal);color:var(--gtm-navy);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(20,196,188,0.35);color:var(--gtm-navy);}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.4);}
.btn-ghost:hover{border-color:#fff;color:#fff;}

/* ---------- Hero ---------- */
.hero{background:#161618;color:#fff;padding:64px 0 64px;position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;right:-140px;top:50%;transform:translateY(-50%);width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(25,166,247,0.10),transparent 70%);pointer-events:none;z-index:0;}
.hero .wrap{position:relative;z-index:1;}
.herogrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.herocopy{max-width:600px;}
.hero .label{display:inline-block;color:var(--gtm-teal);font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;}
.hero h1{font-size:clamp(34px,4.4vw,52px);font-weight:700;line-height:1.06;letter-spacing:-1.2px;margin-bottom:22px;}
.hero h1 em{font-style:normal;color:var(--gtm-teal);}
.hero p.sub{font-size:18px;font-weight:300;color:rgba(255,255,255,0.82);margin-bottom:26px;}
.hero .mission{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:30px;}
.hero .mission span{font-size:14px;font-weight:500;color:rgba(255,255,255,0.9);display:flex;align-items:center;gap:8px;}
.hero .mission span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gtm-teal);display:inline-block;flex-shrink:0;}

/* THE FIX: fixed-aspect container, image contained — never stretches.
   Shading matches the landing pages: rich drop shadow, slight contrast/saturation
   lift, and a soft bottom mask fade so the image melts into the dark hero. */
.heroimg-wrap{position:relative;}
/* Matches the landing-page treatment exactly: the subject bleeds to the bottom
   edge of the image, and the mask fades the shirt itself into black so he melts
   into the dark hero with no visible rectangle. No drop-shadow (it would draw the
   image's box edge); contrast/saturation lift only. */
.heroimg{width:104%;max-width:104%;display:block;margin:0 auto -2px;
  filter:contrast(1.05) saturate(1.08) brightness(1.03);
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);}
@media(max-width:860px){
  .hero{padding:44px 0 48px;}
  .herogrid{grid-template-columns:1fr;gap:24px;}
  .heroimg-wrap{order:-1;max-width:340px;margin:0 auto;}
  .heroimg{width:100%;max-width:100%;margin:0 auto -6px;}
  .hero .mission{gap:12px;}
}

/* ---------- Logo wall ---------- */
.logowall{background:var(--gtm-dark-2);padding:44px 0;}
.logowall p.kicker{text-align:center;color:var(--gtm-text-light);font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;margin-bottom:30px;}
.logogrid{display:grid;grid-template-columns:repeat(6,1fr);gap:30px 36px;align-items:center;}
.logogrid img{height:28px;width:auto;max-width:130px;margin:0 auto;object-fit:contain;opacity:0.7;filter:brightness(0) invert(1);transition:opacity .2s ease;}
.logogrid img:hover{opacity:1;}
@media(max-width:860px){.logogrid{grid-template-columns:repeat(3,1fr);gap:26px;}}
@media(max-width:460px){.logogrid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Section base ---------- */
section{padding:80px 0;}
.eyebrow{color:var(--gtm-teal);font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;display:block;}
h2{font-size:clamp(26px,3vw,36px);font-weight:700;color:#fff;letter-spacing:-0.6px;line-height:1.15;margin-bottom:18px;}
.lead{font-size:18px;font-weight:300;max-width:720px;color:var(--gtm-text-light);}
@media(max-width:860px){section{padding:56px 0;}}

/* ---------- Value / why ---------- */
.valuegrid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
.valuegrid .copy p{margin-bottom:18px;font-size:16px;font-weight:300;}
.valuegrid .copy p strong{color:#fff;font-weight:600;}
.valuegrid .copy .btn{margin-top:8px;}
.valueimg{border-radius:16px;overflow:hidden;border:1px solid var(--gtm-card-border);background:var(--gtm-card);aspect-ratio:3/2;}
.valueimg img{width:100%;height:100%;object-fit:cover;object-position:center;}
@media(max-width:860px){.valuegrid{grid-template-columns:1fr;gap:30px;}}

/* ---------- Stat panel (replaces clashing image in value section) ---------- */
.statpanel{background:var(--gtm-card);border:1px solid var(--gtm-card-border);border-radius:18px;padding:14px 8px;display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;position:relative;}
.statpanel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(20,196,188,0.10),transparent 60%);pointer-events:none;}
.statcell{padding:26px 24px;position:relative;z-index:1;}
.statcell .big{font-size:clamp(30px,4vw,40px);font-weight:700;color:var(--gtm-teal);letter-spacing:-1px;line-height:1;}
.statcell .big.stars{font-size:clamp(22px,3vw,28px);letter-spacing:3px;line-height:1.2;}
.statcell .cap{font-size:14px;font-weight:300;color:var(--gtm-text-light);margin-top:9px;line-height:1.45;}
@media(max-width:520px){.statpanel{grid-template-columns:1fr 1fr;}.statcell{padding:22px 16px;}}

/* ---------- Two paths ---------- */
.pathgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;}
.pathcard{background:var(--gtm-card);border:1px solid var(--gtm-card-border);border-radius:16px;padding:34px 32px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.pathcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,0.35);border-color:rgba(20,196,188,0.4);}
.pathcard .ptag{display:inline-block;background:rgba(20,196,188,0.12);color:var(--gtm-teal);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:30px;margin-bottom:18px;}
.pathcard h3{font-size:24px;font-weight:600;color:#fff;margin-bottom:12px;}
.pathcard p{font-size:16px;font-weight:300;color:var(--gtm-text-light);margin-bottom:20px;}
.pathcard .plink{color:var(--gtm-teal);font-weight:600;font-size:15px;}
.pathcard .plink:hover{color:#fff;}
@media(max-width:860px){.pathgrid{grid-template-columns:1fr;}}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px;}
.card{background:var(--gtm-card);border:1px solid var(--gtm-card-border);border-radius:14px;padding:30px 26px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,0.35);border-color:rgba(20,196,188,0.4);}
.card .ic{width:46px;height:46px;border-radius:11px;background:rgba(20,196,188,0.12);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--gtm-teal);margin-bottom:18px;}
.card h3{font-size:18px;font-weight:600;color:#fff;margin-bottom:9px;}
.card p{font-size:15px;font-weight:300;color:var(--gtm-text-light);}
@media(max-width:860px){.cards{grid-template-columns:1fr;}}

/* ---------- Functions strip ---------- */
.func{background:var(--gtm-dark-2);}
.funcgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px;}
.funcpill{background:var(--gtm-card);border:1px solid var(--gtm-card-border);border-radius:11px;padding:18px 12px;text-align:center;font-size:14px;font-weight:500;color:#fff;transition:border-color .15s ease,color .15s ease;}
.funcpill:hover{border-color:var(--gtm-teal);color:var(--gtm-teal);}
@media(max-width:860px){.funcgrid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Testimonials ---------- */
.testgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px;}
.testcard{background:var(--gtm-card);border:1px solid var(--gtm-card-border);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;}
.testcard .stars{color:var(--gtm-teal);font-size:15px;margin-bottom:14px;letter-spacing:2px;}
.testcard .quote{font-size:15px;font-weight:300;color:var(--gtm-text-light);line-height:1.65;margin-bottom:22px;flex-grow:1;}
.testcard .who{display:flex;align-items:center;gap:12px;}
.testcard .who .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.testcard .who .name{font-size:15px;font-weight:600;color:#fff;}
.testcard .who .role{font-size:13px;font-weight:300;color:var(--gtm-text-light);}
@media(max-width:860px){.testgrid{grid-template-columns:1fr;}}

/* ---------- Testimonials slider ---------- */
.tslider{position:relative;max-width:860px;margin:46px auto 0;}
.tviewport{overflow:hidden;border-radius:16px;}
.ttrack{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.tslide{flex:0 0 100%;min-width:100%;}
.tslide .inner{background:var(--gtm-card);border:1px solid var(--gtm-card-border);border-radius:16px;padding:42px 44px;text-align:center;margin:0 2px;}
.tslide .stars{color:var(--gtm-teal);font-size:16px;letter-spacing:3px;margin-bottom:18px;}
.tslide .quote{font-size:clamp(17px,2.1vw,21px);font-weight:300;color:#fff;line-height:1.55;letter-spacing:-0.3px;margin-bottom:26px;}
.tslide .who{display:flex;align-items:center;justify-content:center;gap:13px;}
.tslide .who .avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.tslide .who .name{font-size:15px;font-weight:600;color:#fff;text-align:left;}
.tslide .who .role{font-size:13px;font-weight:300;color:var(--gtm-text-light);text-align:left;}
.tnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--gtm-card);border:1px solid var(--gtm-card-border);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,background .15s ease,color .15s ease;z-index:3;}
.tnav:hover{border-color:var(--gtm-teal);color:var(--gtm-teal);}
.tnav.prev{left:-22px;}
.tnav.next{right:-22px;}
.tdots{display:flex;gap:9px;justify-content:center;margin-top:26px;}
.tdot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.22);border:none;cursor:pointer;padding:0;transition:background .15s ease,transform .15s ease;}
.tdot.active{background:var(--gtm-teal);transform:scale(1.25);}
@media(max-width:920px){
  .tnav.prev{left:6px;}
  .tnav.next{right:6px;}
  .tnav{background:rgba(28,28,31,0.9);}
  .tslide .inner{padding:34px 28px;}
}

/* ---------- AI consulting strip ---------- */
.aistrip{background:var(--gtm-dark);border-top:1px solid var(--gtm-card-border);border-bottom:1px solid var(--gtm-card-border);}
.aigrid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:center;}
.aigrid h2{margin-bottom:12px;}
.aicta{text-align:right;}
@media(max-width:860px){.aigrid{grid-template-columns:1fr;gap:20px;}.aicta{text-align:left;}}

/* ---------- Generic content blocks (inner pages) ---------- */
.pagehero{background:#161618;color:#fff;padding:72px 0 56px;position:relative;overflow:hidden;}
.pagehero::after{content:"";position:absolute;right:-140px;top:-80px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(20,196,188,0.10),transparent 70%);pointer-events:none;}
.pagehero .wrap{position:relative;z-index:1;max-width:820px;}
.pagehero .label{display:inline-block;color:var(--gtm-teal);font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;}
.pagehero h1{font-size:clamp(32px,4vw,48px);font-weight:700;line-height:1.08;letter-spacing:-1px;margin-bottom:20px;}
.pagehero h1 em{font-style:normal;color:var(--gtm-teal);}
.pagehero p{font-size:18px;font-weight:300;color:rgba(255,255,255,0.82);max-width:640px;margin-bottom:28px;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px;}
.step{background:var(--gtm-card);border:1px solid var(--gtm-card-border);border-radius:14px;padding:28px 24px;}
.step .num{font-size:14px;font-weight:700;color:var(--gtm-navy);background:var(--gtm-teal);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.step h3{font-size:17px;font-weight:600;color:#fff;margin-bottom:8px;}
.step p{font-size:14px;font-weight:300;color:var(--gtm-text-light);}
@media(max-width:860px){.steps{grid-template-columns:1fr;}}

.foritems{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 34px;margin-top:38px;}
.foritem{display:flex;gap:14px;align-items:flex-start;}
.foritem .tick{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(20,196,188,0.14);color:var(--gtm-teal);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-top:2px;}
.foritem p{font-size:16px;font-weight:300;color:var(--gtm-text-light);}
.foritem strong{font-weight:600;color:#fff;}
@media(max-width:860px){.foritems{grid-template-columns:1fr;}}

.quoteband{background:var(--gtm-dark-2);}
.quotebox{max-width:820px;margin:0 auto;text-align:center;}
.quotebox .qmark{font-size:64px;line-height:0.4;color:var(--gtm-teal);font-weight:700;display:block;margin-bottom:24px;}
.quotebox p{font-size:clamp(20px,2.4vw,26px);font-weight:300;color:#fff;line-height:1.4;letter-spacing:-0.4px;}
.quotebox .attrib{font-size:15px;font-weight:400;color:var(--gtm-text-light);margin-top:24px;}

/* ---------- Contact cards ---------- */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px;}
.contactcard{background:var(--gtm-card);border:1px solid var(--gtm-card-border);border-radius:16px;padding:40px 36px;text-align:center;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.contactcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,0.35);border-color:rgba(20,196,188,0.4);}
.contactcard .ctag{display:inline-block;background:rgba(20,196,188,0.12);color:var(--gtm-teal);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:30px;margin-bottom:18px;}
.contactcard h3{font-size:22px;font-weight:600;color:#fff;margin-bottom:10px;}
.contactcard p{font-size:15px;font-weight:300;color:var(--gtm-text-light);margin-bottom:24px;}
.contactdetails{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:38px;font-size:16px;font-weight:300;color:var(--gtm-text-light);}
.contactdetails a{color:var(--gtm-teal);}
.contactdetails a:hover{color:#fff;}
@media(max-width:860px){.contactgrid{grid-template-columns:1fr;}}

/* ---------- Final CTA ---------- */
.finalcta{background:#1C1C1F;color:#fff;text-align:center;}
.finalcta h2{color:#fff;}
.finalcta p{font-size:18px;font-weight:300;color:rgba(255,255,255,0.85);max-width:560px;margin:16px auto 32px;}

/* ---------- Footer ---------- */
footer{background:#0F0F11;color:rgba(255,255,255,0.6);padding:52px 0 34px;}
.footgrid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:44px;margin-bottom:38px;}
.footlogo{height:32px;width:auto;margin-bottom:16px;}
.footgrid .tagline{font-size:14px;font-weight:300;max-width:260px;}
.footgrid h4{color:#fff;font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;}
.footgrid ul{list-style:none;}
.footgrid ul li{margin-bottom:10px;}
.footgrid ul li a{color:rgba(255,255,255,0.6);font-size:14px;font-weight:300;transition:color .15s ease;}
.footgrid ul li a:hover{color:var(--gtm-teal);}
.footgrid .contact a{color:var(--gtm-teal);font-size:14px;font-weight:300;display:block;margin-bottom:8px;}
.footgrid .contact a:hover{color:#fff;}
.footbottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;font-weight:300;}
.footbottom .socials a{color:rgba(255,255,255,0.6);margin-left:16px;}
.footbottom .socials a:hover{color:var(--gtm-teal);}
@media(max-width:860px){.footgrid{grid-template-columns:1fr 1fr;gap:30px;}}
@media(max-width:460px){.footgrid{grid-template-columns:1fr;}}