/* ============================================================
   WebK3 — Design System v3
   Headings: Livvic SemiBold · Body: Plus Jakarta Sans
   Solid brand colors (no gradients) · dot-globe motif
   teal = build · orange = grow · navy base
============================================================ */
:root{
  --navy-900:#071121; --navy-800:#071121; --navy-700:#071121;
  --teal-700:#006d73; --teal:#00787c; --teal-400:#008385; --teal-300:#008b8b; --teal-050:#008b8b;
  --orange:#ff6a00; --orange-600:#ff6a00; --orange-050:#ff6a00;
  --ink:#14202e; --ink-soft:#586879; --ink-mute:#8597a6;
  --bg:#ffffff; --bg-soft:#f3f8fb; --line:#e4edf3; --white:#fff;
  --display:"Outfit", sans-serif;;
  --body:"Outfit", sans-serif;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-2xl:40px;
  --sh-sm:0 2px 10px rgba(15,40,60,.06);
  --sh-md:0 18px 44px rgba(15,60,80,.12);
  --sh-lg:0 34px 80px rgba(10,50,70,.18);
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.62;overflow-x:hidden}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.txt-teal{color:var(--teal-700)} .txt-orange{color:var(--orange-600)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-700)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--orange);border-radius:2px}
.eyebrow.light{color:var(--teal-300)}
.eyebrow.center{justify-content:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:.95rem;padding:14px 28px;border-radius:999px;cursor:pointer;border:1.6px solid transparent;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.btn:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(244,123,32,.28)}
.btn-primary:hover{background:var(--orange-600);transform:translateY(-3px);box-shadow:0 16px 32px rgba(244,123,32,.36)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--teal-300);box-shadow:var(--sh-sm)}
.btn-light{background:#fff;color:var(--navy-900);border-color:#fff}
.btn-light:hover{background:var(--teal-050);transform:translateY(-3px)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.btn-dark{background:var(--navy-900);color:#fff}
.btn-dark:hover{background:var(--teal-700);transform:translateY(-3px);box-shadow:var(--sh-md)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-700);transform:translateY(-3px)}

/* Utility bar */
.utility{background:var(--navy-900);color:#aebccb;font-size:.82rem}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;height:42px}
.utility .u-left{display:flex;gap:22px;align-items:center}
.utility .u-left span,.utility .u-left a{display:inline-flex;align-items:center;gap:7px}
.utility a:hover{color:#fff}
.utility .u-right{display:flex;gap:10px;align-items:center}
.utility .u-right a{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#cdd9e6}
.utility .u-right a:hover{background:var(--teal)}
.utility .dot{width:7px;height:7px;border-radius:50%;background:#2bd17e;box-shadow:0 0 0 3px rgba(43,209,126,.2)}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,1);backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center}
.brand img{height:54px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links>li>a{font-family:var(--display);font-weight:500;font-size:.93rem;padding:11px 13px;border-radius:10px;color:var(--ink-soft);transition:.15s;display:inline-flex;align-items:center;gap:6px}
.nav-links>li>a:hover,.nav-links>li>a[aria-current="page"]{color:var(--ink);background:var(--bg-soft)}
.nav-cta{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.25s}

/* Halftone motif */
.halftone-orb{aspect-ratio:1;border-radius:50%;-webkit-mask:radial-gradient(circle at center,#000 1.7px,transparent 2px) 0 0/13px 13px;mask:radial-gradient(circle at center,#000 1.7px,transparent 2px) 0 0/13px 13px}
.halftone-orb.duo{background:
  radial-gradient(circle at center,var(--orange) 1.7px,transparent 2px) 0 0/13px 13px,
  var(--teal)}
.orb-wrap{position:relative;display:grid;place-items:center}

/* dot texture helper */
.dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.42) 1px,transparent 1.4px);background-size:20px 20px;opacity:.22;pointer-events:none}

/* watermark logo (background element) */
.wm-logo{position:absolute;pointer-events:none;opacity:.05;width:330px;z-index:0;right:-30px;bottom:-26px}
.wm-logo img{width:100%}
.section.navy .wm-logo,.cta-band .wm-logo,.hero .wm-logo,.page-hero .wm-logo{opacity:.07}
/* watermark ghost section title (added via JS) */
.section-wm{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(2.6rem,8vw,6rem);letter-spacing:.05em;color:var(--ink);opacity:.04;white-space:nowrap;z-index:0;pointer-events:none}
.section.navy .section-wm{color:#fff;opacity:.07}
.section-head{position:relative}
.section-head>.eyebrow,.section-head>h2,.section-head>p{position:relative;z-index:1}

/* HERO */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;padding:84px 0 96px}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);background-size:26px 26px;opacity:.5;-webkit-mask:linear-gradient(180deg,#000,transparent 78%);mask:linear-gradient(180deg,#000,transparent 78%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.2vw,4rem);color:#fff;line-height:1.06}
.hero h1 .txt-teal{color:var(--teal-300)} 
.hero p.lead{font-size:1.15rem;color:#bcccdb;margin:22px 0 30px;max-width:42ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-pill{display:inline-flex;gap:10px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:600;font-family:var(--display);margin-bottom:24px;color:#dce7f1}
.hero-pill b{color:var(--teal-300)} .hero-pill .o{color:#ff9a4d}
.hero-mini{display:flex;gap:30px;margin-top:36px;flex-wrap:wrap}
.hero-mini .m b{font-family:var(--display);font-size:1.7rem;color:#fff;display:block}
.hero-mini .m span{font-size:.82rem;color:#9fb1c2}
.hero-visual{position:relative;display:grid;place-items:center; background-image: url(assets/img/WebK3-Collaboration.webp); background-position: center; background-size: cover; border-radius: 50px;}
.hero-visual .halftone-orb{width:min(380px,86%)}
.float-card{position:absolute;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--sh-lg);display:flex;gap:12px;align-items:center;animation:floaty 5s ease-in-out infinite;z-index:3}
.float-card .fi{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.float-card b{font-family:var(--display);font-size:.92rem;display:block;color:var(--ink)}
.float-card span{font-size:.76rem;color:var(--ink-soft)}
.float-card.fc1{top:8%;left:-4%;animation-delay:.2s}.float-card.fc1 .fi{background:var(--teal)}
.float-card.fc2{bottom:10%;right:-6%;animation-delay:1.4s}.float-card.fc2 .fi{background:var(--orange)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Logo marquee */
.marquee-band{background:#fff;border-bottom:1px solid var(--line);padding:26px 0; display:none}
.marquee-band .lbl{text-align:center;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:18px}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scrollx 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--display);font-weight:700;font-size:1.4rem;color:#b4c2cf;white-space:nowrap;letter-spacing:-.01em}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:92px 0;position:relative}
.section.tint{background:var(--bg-soft)}
.section.navy{background:var(--navy-900);color:#fff;overflow:hidden}
.section.navy h2,.section.navy h3{color:#fff}
.section.navy .section-head p{color:#aebccb}
.section-head{max-width:700px;margin-bottom:50px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(1.95rem,3.8vw,2.9rem);margin:14px 0 14px}
.section-head p{color:var(--ink-soft);font-size:1.06rem}

/* Stats band (solid navy) */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy-900);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);position:relative}
.stats-band .dots{opacity:.18}
.stat-cell{padding:36px 26px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.1);position:relative;z-index:1}
.stat-cell:last-child{border-right:0}
.stat-cell b{font-family:var(--display);font-size:2.6rem;display:block;line-height:1;color:var(--teal-300)}
.stat-cell:nth-child(even) b{color:#ff9a4d}
.stat-cell span{font-size:.9rem;opacity:.9;margin-top:6px;display:block}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;transition:.24s;position:relative;overflow:hidden}
.svc::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--orange);transition:width .3s}
.svc.build::after{background:var(--teal)}
.svc:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:transparent}
.svc:hover::after{width:100%}
.svc .ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;color:#fff}
.svc.build .ic{background:var(--teal)} .svc.grow .ic{background:var(--orange)}
.svc h3{font-size:1.2rem;margin-bottom:9px}
.svc p{color:var(--ink-soft);font-size:.95rem;margin-bottom:16px}
.svc .more{font-family:var(--display);font-weight:600;font-size:.86rem;display:inline-flex;align-items:center;gap:7px}
.svc.build .more{color:var(--teal-700)} .svc.grow .more{color:var(--orange-600)}
.svc.cta-cell{background:var(--navy-900);color:#fff;border:0;display:grid;align-content:center;text-align:center;position:relative;overflow:hidden}
.svc.cta-cell h3,.svc.cta-cell p{color:#fff;position:relative;z-index:1}
.svc.cta-cell .btn{position:relative;z-index:1}

/* Split / overview */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.media-left .media{order:-1}
.media-panel{position:relative;border-radius:var(--r-2xl);overflow:hidden;background:var(--navy-900);min-height:380px;box-shadow:var(--sh-md);display:grid;place-items:center;padding:36px}
.media-panel .halftone-orb{width:62%;position:relative}
.media-badge{position:absolute;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:var(--sh-lg);font-family:var(--display);font-weight:600;font-size:.85rem;display:flex;gap:10px;align-items:center;z-index:2}
.media-badge .d{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff}
.media-badge.b1{top:24px;left:24px}.media-badge.b1 .d{background:var(--teal)}
.media-badge.b2{bottom:24px;right:24px}.media-badge.b2 .d{background:var(--orange)}
.check-list{list-style:none;margin-top:22px;display:grid;gap:14px}
.check-list li{display:flex;gap:13px;align-items:flex-start;color:var(--ink-soft)}
.check-list li .ck{width:24px;height:24px;border-radius:7px;background:var(--teal-050);color:var(--teal-700);display:grid;place-items:center;flex-shrink:0;margin-top:2px;font-size:.8rem}
.check-list li b{color:var(--ink);font-family:var(--display)}

/* Why choose */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.why-card{padding:30px 26px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:.22s;position:relative;z-index:1}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.why-card .wn{font-family:var(--display);font-weight:700;font-size:1.05rem;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--bg-soft);color:var(--teal-700);margin-bottom:16px}
.why-card:nth-child(even) .wn{color:var(--orange-600)}
.why-card h3{font-size:1.12rem;margin-bottom:8px}
.why-card p{color:var(--ink-soft);font-size:.92rem}
.section.navy .why-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.section.navy .why-card p{color:#aebccb}
.section.navy .why-card .wn{background:rgba(255,255,255,.08);color:var(--teal-300)}

/* Testimonials */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tst{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;transition:.22s}
.tst:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.stars{color:var(--orange);letter-spacing:2px;font-size:.9rem;margin-bottom:14px}
.tst p{color:var(--ink);font-size:.98rem;margin-bottom:22px}
.tst .who{display:flex;align-items:center;gap:13px}
.tst .av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:1.05rem}
.tst .who b{font-family:var(--display);font-size:.96rem;display:block}
.tst .who span{font-size:.82rem;color:var(--ink-soft)}

/* Industries */
.ind-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ind{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px 14px;text-align:center;transition:.2s}
.ind:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:transparent}
.ind .ii{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin:0 auto 12px;background:var(--bg-soft);color:var(--teal-700)}
.ind:hover .ii{background:var(--teal);color:#fff}
.ind b{font-family:var(--display);font-size:.92rem;font-weight:600}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;padding:30px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);z-index:1}
.step .n{font-family:var(--display);font-weight:700;font-size:2rem;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:var(--teal);color:#fff;margin-bottom:16px}
.step:nth-child(even) .n{background:var(--orange)}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:.92rem}

/* FAQ */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:14px;position:relative;z-index:1}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:4px 24px;transition:.2s}
.faq details[open]{box-shadow:var(--sh-md);border-color:transparent}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--display);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex-shrink:0;transition:.2s;color:var(--teal-700)}
.faq details[open] summary .pm{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(45deg)}
.faq details p{color:var(--ink-soft);padding:0 0 20px;font-size:.96rem}

/* CTA band (solid navy) */
.cta-band{position:relative;border-radius:var(--r-2xl);padding:66px 48px;text-align:center;overflow:hidden;/*background:var(--navy-900);*/color:#fff;box-shadow:var(--sh-lg); background-image: url(assets/img/Contact-us.webp); background-position: center; background-size: cover;}
.cta-band:after {
    content: "";
    background: #081020e3;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}.cta-band .dots{opacity:.16}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);position:relative;z-index:1}
.cta-band p{position:relative;z-index:1;max-width:58ch;margin:16px auto 28px;color:#c4d2e0}
.cta-band .hero-cta{justify-content:center;position:relative;z-index:1}

/* Forms */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:38px;box-shadow:var(--sh-md)}
.field{margin-bottom:18px}
.field label{font-family:var(--display);font-weight:500;font-size:.9rem;display:block;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:var(--body);font-size:.96rem;color:var(--ink);background:var(--bg-soft);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-050);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* Modal (Get a Quote popup) */
.modal-overlay{position:fixed;inset:0;background:rgba(8,16,32,.62);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:42px 16px;z-index:200;overflow:auto}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:26px;max-width:600px;width:100%;padding:36px;box-shadow:var(--sh-lg);position:relative;animation:pop .26s ease}
@keyframes pop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.modal h3{font-size:1.5rem;margin-bottom:4px}
.modal .sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:22px}
.modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1.2rem;display:grid;place-items:center;color:var(--ink-soft);line-height:1}
.modal-close:hover{background:var(--bg-soft);color:var(--ink)}
.modal-note{margin-top:14px;padding:13px 15px;background:var(--teal-050);border:1px solid var(--teal-300);border-radius:10px;color:var(--teal-700);font-weight:600;font-size:.9rem}

/* Blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.22s}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.post .thumb{height:170px;position:relative;display:grid;place-items:center}
.post .thumb.build{background:var(--teal)} .post .thumb.grow{background:var(--orange)}
.post .thumb .tag{position:relative;z-index:1;background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.post .body{padding:22px 24px 26px}
.post .date{font-size:.8rem;color:var(--ink-mute);font-weight:600}
.post h3{font-size:1.14rem;margin:9px 0}
.post p{color:var(--ink-soft);font-size:.92rem;margin-bottom:14px}
.post .more{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--teal-700);display:inline-flex;gap:7px;align-items:center}

/* Page hero (inner, solid navy) */
.page-hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;padding:74px 0 82px}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px);background-size:26px 26px;opacity:.45;-webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,4.8vw,3.5rem);margin:14px 0 16px;max-width:18ch}
.page-hero p{font-size:1.12rem;color:#c0d0df;max-width:60ch}
.breadcrumb{font-size:.84rem;color:#90a4b6;margin-bottom:6px;font-weight:600}
.breadcrumb a:hover{color:var(--teal-300)}

/* Footer */
.site-footer{background:url(assets/img/webk3-footer.webp) center ;color:#9fb0c0;padding:70px 0 26px;position:relative;overflow:hidden; background-size:cover;}
.site-footer::before{content:"";position:absolute;inset:0;background:#081020e3;opacity:1}
.foot-top{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer .brand img{height:50px}
.foot-tag{color:#8195a8;margin:16px 0 20px;max-width:34ch;font-size:.93rem}
.foot-socials{display:flex;gap:10px}
.foot-socials a{width:38px;height:38px;border-radius:10px;background:var(--teal-400);display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#cdd9e6; position:relative;}
.foot-socials a:hover{background:var(--orange-600)}
.site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.site-footer .foot-col a{color:#fff;display:block;padding:5px 0;font-size:.92rem}
.site-footer .foot-col a:hover{color:var(--teal-300);padding-left:4px;transition:.15s}
.news-row{display:flex;gap:8px;margin-top:14px}
.news-row input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-family:var(--body);font-size:.9rem}
.news-row input::placeholder{color:#7f93a6}
.news-row button{border:0;border-radius:10px;padding:0 16px;background:var(--orange);color:#fff;font-family:var(--display);font-weight:600;cursor:pointer}
.news-row button:hover{background:var(--orange-600)}
.foot-bottom{position:relative;z-index:1;margin-top:24px;display:flex;justify-content:space-between;font-size:.85rem;color:#7a8da0;flex-wrap:wrap;gap:10px}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:1000px){
  .hero-grid,.split{grid-template-columns:1fr}
  .hero-visual{order:-1;margin-bottom:10px}
  .hero-visual .halftone-orb{width:min(300px,70%)}
  .float-card.fc1{left:2%}.float-card.fc2{right:2%}
  .svc-grid,.why-grid,.tst-grid,.post-grid,.steps{grid-template-columns:1fr 1fr}
  .stats-band{grid-template-columns:1fr 1fr}.stat-cell:nth-child(2){border-right:0}.stat-cell{border-bottom:1px solid rgba(255,255,255,.1)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .nav-links,.nav-cta .btn-ghost{display:none}
  .menu-toggle{display:block}
  .utility .u-left span:nth-child(n+2){display:none}
  .nav-links.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:84px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:14px 20px;gap:4px;box-shadow:var(--sh-md);z-index:80}
}
@media(max-width:620px){
  .svc-grid,.why-grid,.tst-grid,.post-grid,.steps,.grid-2{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr}
  .section{padding:62px 0}
  .cta-band{padding:48px 24px}
  .hero{padding:54px 0 64px}
  .float-card{display:none}
  .hero-mini{gap:22px}
  .modal{padding:28px 22px}
  .brand img{height:46px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track,.float-card{animation:none}
  .btn:hover,.svc:hover,.tst:hover,.post:hover,.why-card:hover,.ind:hover{transform:none}
}

/* ===== v4 additions: FA icons, corporate images, php pages ===== */
.utility .u-right a i, .foot-socials a i{font-size:.95rem;     position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 15px;
    height: 15px;}
.utility .u-left a i{color:var(--teal-300)}
.svc .ic i{font-size:24px;line-height:1}
.media-badge .d i{font-size:15px}
.float-card .fi i{font-size:18px}
.ind .ii i{font-size:20px}
.check-list li .ck i{font-size:.8rem}

/* corporate image inside media panel */
.media-panel.has-img{background:#fff;padding:24px;min-height:auto}
.media-img{width:100%;height:auto;border-radius:18px;position:relative;z-index:1;display:block}
.media-panel.has-img .media-badge{box-shadow:var(--sh-md)}

/* two-column page hero with image (inner pages) */
.ph-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:center}
.ph-media{position:relative}
.ph-media img{width:100%;border-radius:22px;box-shadow:var(--sh-lg);display:block}
.ph-media .ph-badge{position:absolute;bottom:-16px;left:-16px;background:#fff;color:var(--ink);border-radius:14px;padding:12px 16px;box-shadow:var(--sh-lg);font-family:var(--display);font-weight:600;font-size:.85rem;display:flex;gap:9px;align-items:center}
.ph-media .ph-badge i{color:var(--orange)}
@media(max-width:1000px){.ph-grid{grid-template-columns:1fr}.ph-media{display:none}}

/* contact illustration */
.contact-illus{width:100%;border-radius:18px;box-shadow:var(--sh-sm);margin-bottom:24px;border:1px solid var(--line)}

/* Thank-you page */
.thanks{min-height:62vh;display:grid;place-items:center;text-align:center;background:var(--navy-900);color:#fff;position:relative;overflow:hidden;padding:80px 0}
.thanks::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px);background-size:26px 26px;opacity:.5}
.thanks .inner{position:relative;z-index:1;max-width:560px;padding:0 20px}
.thanks .tick{width:96px;height:96px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin:0 auto 26px;color:#fff;font-size:42px;box-shadow:0 16px 40px rgba(21,147,165,.4)}
.thanks h1{color:#fff;font-size:clamp(2rem,5vw,3rem);margin-bottom:14px}
.thanks p{color:#c0d0df;font-size:1.1rem;margin-bottom:28px}


/* ===== Mobile header fixes ===== */
@media (max-width: 1000px) {
  /* Remove the Get a Quote button on mobile */
  .nav-cta .btn-primary,
  .nav-cta .js-quote { display: none; }

  /* Utility (top) bar alignment */
  .utility { font-size: .78rem; }
  .utility .wrap { justify-content: center; gap: 16px; }
  .utility .u-left { gap: 16px; flex-wrap: nowrap; }
  .utility .u-left > span:first-child { display: none; }   /* hide "Available for new projects" */
  .utility .u-left a { white-space: nowrap; }
  .utility .u-right { display: none; }                     /* hide top-bar socials (still in footer) */
}

@media (max-width: 440px) {
  /* On very small screens keep only the phone to avoid wrapping 
  .utility .u-left a[href^="mailto"] { display: none; }*/
}