@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0F1115;
  --ink-2:#1B1F26;
  --teal:#0EA5A4;
  --teal-dark:#0B8483;
  --amber:#F59E0B;
  --bg:#F7F7F5;
  --line:#E7E5E1;
  --muted:#5B6168;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Work Sans',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-display{font-family:'Archivo Black',system-ui,sans-serif; letter-spacing:-0.01em;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);}
.reveal-scale.is-visible{opacity:1;transform:scale(1);}
.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-left.is-visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(36px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-right.is-visible{opacity:1;transform:translateX(0);}

/* ---------- Nav ---------- */
.site-nav{transition:background-color .3s ease, box-shadow .3s ease, padding .3s ease;}
.site-nav.scrolled{box-shadow:0 8px 30px -16px rgba(0,0,0,.5);}
.nav-link{position:relative;}
.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--teal);transition:width .25s ease;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}

/* ---------- Buttons ---------- */
.btn-cta{
  background:var(--teal);color:#fff;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 10px 24px -10px rgba(14,165,164,.55);
}
.btn-cta:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(14,165,164,.6);}
.btn-cta:active{transform:translateY(0);}
.btn-outline{border:1.5px solid rgba(255,255,255,.35);color:#fff;transition:all .2s ease;}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;}

/* ---------- Phone pulse ---------- */
.pulse-ring{position:relative;}
.pulse-ring::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--teal);opacity:.55;animation:pulseRing 2.2s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes pulseRing{0%{transform:scale(1);opacity:.55;}70%{transform:scale(1.7);opacity:0;}100%{opacity:0;}}

/* ---------- Hero geometric shapes ---------- */
.hero-shape{position:absolute;border-radius:50%;}
.hero-shape-1{background:var(--teal);opacity:.18;}
.hero-shape-2{background:var(--amber);opacity:.14;}
.hero-shape-ring{border:2px solid rgba(255,255,255,.12);border-radius:50%;}
@keyframes drift{0%,100%{transform:translate(0,0);}50%{transform:translate(14px,-18px);}}
.drift{animation:drift 10s ease-in-out infinite;}

/* ---------- Hero cutout photo ---------- */
.cutout-wrap{position:relative;}
.cutout-photo{
  border-radius:50% 50% 46% 46% / 60% 60% 40% 40%;
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, black 68%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 42%, black 68%, transparent 100%);
  filter:saturate(1.05) contrast(1.04);
}

/* ---------- Hero video ---------- */
.hero-video-wrap{position:absolute;inset:0;overflow:hidden;border-radius:inherit;}
.hero-video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;}
.hero-video-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,21,.2),rgba(15,17,21,.85));}

/* ---------- Cards ---------- */
.service-card{transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;border:1px solid var(--line);}
.service-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(15,17,21,.25);border-color:#D8D5CF;}
.icon-wrap{transition:transform .35s cubic-bezier(.16,1,.3,1), background-color .35s ease;}
.service-card:hover .icon-wrap{transform:scale(1.08) rotate(-5deg);background-color:var(--teal);}
.service-card:hover .icon-wrap svg{stroke:#fff;}

/* ---------- Counters ---------- */
.counter{font-family:'Archivo Black',sans-serif;}

/* ---------- Marquee ---------- */
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 26s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}

/* ---------- Sticky mobile call bar ---------- */
.mobile-call-bar{transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);}
.mobile-call-bar.show{transform:translateY(0);}

/* ---------- FAQ ---------- */
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-icon{transition:transform .25s ease;}
.faq-item summary{cursor:pointer;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}

/* ---------- Skeleton shimmer ---------- */
.skeleton{background:linear-gradient(90deg,#E7E5E1 25%,#F2F1EE 37%,#E7E5E1 63%);background-size:400% 100%;animation:shimmer 1.6s ease infinite;}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

::selection{background:var(--teal);color:#fff;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px;}

/* ============================================================
   NEW PATTERNS — distinct from the card-grid/counter template
   ============================================================ */

/* ---------- Full-bleed hero video + scroll cue ---------- */
.hero-full{position:relative;min-height:100vh;overflow:hidden;}
.hero-full video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-full .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,21,.55) 0%,rgba(15,17,21,.82) 60%,rgba(15,17,21,.96) 100%);}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.scroll-cue .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:scrollcue 1.8s ease-in-out infinite;}
@keyframes scrollcue{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(14px);opacity:0;}100%{opacity:0;}}

/* ---------- Floating quote card that overlaps into next section ---------- */
.float-card{position:relative;margin-top:-64px;z-index:20;}

/* ---------- Diagonal ticker band (replaces counters) ---------- */
.ticker-band{background:var(--amber);transform:rotate(-1.2deg);margin:0 -4vw;padding:1.1rem 0;overflow:hidden;}
.ticker-band .marquee-track{animation-duration:22s;}
.ticker-band span{color:var(--ink);font-family:'Archivo Black',sans-serif;font-size:1.1rem;}

/* ---------- Service tab explorer ---------- */
.svc-tab{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:1.1rem 1.25rem;border-radius:1rem;transition:background-color .25s ease,color .25s ease;cursor:pointer;border:1px solid transparent;}
.svc-tab:hover{background:rgba(255,255,255,.05);}
.svc-tab.active{background:var(--teal);color:#fff;}
.svc-tab .svc-num{font-family:'Archivo Black',sans-serif;opacity:.4;font-size:.8rem;}
.svc-tab.active .svc-num{opacity:.8;}
.svc-panel{display:none;}
.svc-panel.active{display:block;animation:fadein .45s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Sticky scrollytelling (Why Us) ---------- */
.sticky-figure{position:sticky;top:6rem;}
.story-block{padding:2.5rem 0;border-left:3px solid var(--line);padding-left:1.75rem;opacity:.35;transition:opacity .4s ease, border-color .4s ease;}
.story-block.active{opacity:1;border-color:var(--teal);}
.story-block .story-index{font-family:'Archivo Black',sans-serif;color:var(--teal);font-size:.8rem;}

/* ---------- Zigzag process steps ---------- */
.zigzag-step{display:flex;align-items:center;gap:2rem;}
.zigzag-step:nth-child(even){flex-direction:row-reverse;}
.zigzag-step:nth-child(even) .zigzag-text{text-align:right;}
@media (max-width:768px){
  .zigzag-step,.zigzag-step:nth-child(even){flex-direction:column;text-align:center;gap:1rem;}
  .zigzag-step:nth-child(even) .zigzag-text{text-align:center;}
}
.zigzag-line{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);}

/* ---------- Testimonial carousel ---------- */
.tcarousel-track{display:flex;transition:transform .55s cubic-bezier(.16,1,.3,1);}
.tcarousel-slide{flex:0 0 100%;}
.tcarousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .3s ease;cursor:pointer;}
.tcarousel-dot.active{background:var(--teal);width:22px;border-radius:5px;}
.tcarousel-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s ease;cursor:pointer;}
.tcarousel-arrow:hover{background:var(--teal);border-color:var(--teal);}