/*
Theme Name: Colorvix
Theme URI: https://colorvix.com/
Author: Colorvix
Author URI: https://colorvix.com/
Description: Colorvix — professional image editing & photo retouching studio theme. Clipping path, background removal, ghost mannequin, jewelry retouching and e-commerce photo editing. Built from the original Colorvix site, fully responsive, mobile-first, with SEO and accessibility baked in.
Version: 2.0.1
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: colorvix
Tags: one-column, custom-menu, featured-images, translation-ready
*/

:root{
  --ink:#14171f; --body:#5b6373;
  /* #828a99 only reached 3.4:1 on white — this clears AA at 4.8:1 */
  --muted:#6b7280;
  --accent:#f0851f;          /* brand orange: fills, icons, rules, logo      */
  --accent-ink:#a85608;      /* orange TEXT on light backgrounds  (5.3:1)   */
  --btn-ink:#231404;         /* text ON an orange fill            (6.5:1)   */
  --accent-dk:#d1700f; --accent-soft:#fff4e9;
  --slate:#3f4759; --slate-2:#59637a;
  --line:#e7e9ef; --soft:#f7f8fa; --white:#fff;
  --r:12px; --r-sm:8px;
  --sh-1:0 1px 2px rgba(16,20,30,.06),0 2px 8px rgba(16,20,30,.04);
  --sh-2:0 4px 12px rgba(16,20,30,.07),0 12px 32px rgba(16,20,30,.08);
  --sh-3:0 18px 50px rgba(16,20,30,.16);
  --head-h:76px;
  --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 14px);-webkit-text-size-adjust:100%}
body{overflow-x:clip}
body{
  font-family:var(--ff);color:var(--body);background:var(--white);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{color:var(--ink);line-height:1.25;font-weight:700;letter-spacing:-.015em}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.pad{padding:96px 0}
.soft{background:var(--soft)}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--btn-ink);font-weight:600;padding:12px 20px;z-index:999}
.skip:focus{left:12px;top:12px;border-radius:6px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  background:var(--accent);color:var(--btn-ink);border:1.5px solid var(--accent);
  padding:13px 26px;border-radius:var(--r-sm);font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;
  box-shadow:0 6px 18px rgba(240,133,31,.28);white-space:nowrap;
}
.btn:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff;
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(240,133,31,.36)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.btn-2{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn-2:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.btn-light{background:rgba(9,12,17,.58);border-color:rgba(255,255,255,.5);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.24)}
/* The ghost button used to flip to a solid white fill on hover, while a later
   rule forced its label white as well - so it went white-on-white and the text
   disappeared. On a phone the hover state sticks after a tap, so it stayed
   blank. It now darkens instead of inverting: white on this stays around 16:1
   whatever photo is behind it, in hover, focus and active alike. */
.btn-light:hover,
.btn-light:focus-visible,
.btn-light:active{background:rgba(9,12,17,.82);border-color:#fff;color:#fff}
.btn-sm{padding:10px 20px;font-size:14px}

/* ---------- eyebrow label (used by every section) ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px;flex:0 0 auto}
.htxt .eyebrow,.business .eyebrow,.endcta .eyebrow,.contact .eyebrow{color:var(--accent)}
.htxt .eyebrow{text-shadow:0 1px 0 rgba(0,0,0,.55),0 -1px 0 rgba(0,0,0,.55),1px 0 0 rgba(0,0,0,.55),-1px 0 0 rgba(0,0,0,.55),1px 1px 0 rgba(0,0,0,.5),-1px 1px 0 rgba(0,0,0,.5),1px -1px 0 rgba(0,0,0,.5),-1px -1px 0 rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.55)}


/* ---------- reading progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),#ffb15e);
  transform:scaleX(0);transform-origin:left;transition:transform .08s linear;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s,background .3s;
}
header.stuck{box-shadow:0 1px 0 rgba(16,20,30,.06),0 8px 28px rgba(16,20,30,.08);background:rgba(255,255,255,.97)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);gap:22px;transition:height .3s cubic-bezier(.4,0,.2,1)}
header.stuck .nav{height:66px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo-svg,.logo-img{height:46px;width:auto;transition:height .3s cubic-bezier(.4,0,.2,1)}
header.stuck .logo-svg,header.stuck .logo-img{height:40px}
.logo-img{display:none}
.logo-img.ok{display:block}
.logo{transition:transform .3s cubic-bezier(.34,1.3,.5,1)}
.logo:hover{transform:translateY(-1px)}

/* one-off reveal: the wordmark assembles itself when the page opens */
.logo-svg .lg-a,.logo-svg .lg-b{opacity:0}
.logo-svg .lg-t{opacity:0}
.logo-svg .lg-l,.logo-svg .lg-r{transform:scaleX(0)}
/* the wordmark writes itself on: COLOR wipes in, then VIX, then the rules draw
   out and the tagline settles */
.logo-svg.go .lg-a{animation:lgWipe .62s cubic-bezier(.22,.68,.3,1) .1s both}
.logo-svg.go .lg-b{animation:lgWipe .5s cubic-bezier(.22,.68,.3,1) .58s both}
.logo-svg.go .lg-l{animation:lgBar .5s cubic-bezier(.16,.84,.34,1) .96s both}
.logo-svg.go .lg-r{animation:lgBar .5s cubic-bezier(.16,.84,.34,1) 1.02s both}
.logo-svg.go .lg-t{animation:lgFade .55s ease 1.06s both}
@keyframes lgWipe{
  from{opacity:1;clip-path:inset(0 100% 0 0)}
  to{opacity:1;clip-path:inset(0 -2% 0 0)}
}
@keyframes lgBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lgFade{from{opacity:0;letter-spacing:1.6px}to{opacity:1;letter-spacing:normal}}
.logo-svg .lg-l{transform-origin:1px 46px}
.logo-svg .lg-r{transform-origin:253px 46px}
/* the sweep only starts once the wordmark has finished assembling */
.lg-shine{opacity:0;transition:opacity .5s ease}
.logo-svg.go .lg-shine{opacity:1;transition-delay:1.7s}
/* hover: the rules stretch out and VIX warms up */
.logo-svg .lg-l,.logo-svg .lg-r,.logo-svg .lg-b{transition:transform .34s cubic-bezier(.34,1.3,.5,1),fill .25s}
.logo:hover .lg-l,.logo:hover .lg-r{transform:scaleX(1.22)}
.logo:hover .lg-b{fill:#ff9433}
/* the real logo file gets the same entrance */
.logo-img{animation:lgImg .7s cubic-bezier(.16,.84,.34,1) .06s both}
@keyframes lgImg{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.menu{list-style:none;display:flex;align-items:center;gap:30px}
.menu>li>a{
  font-size:15px;font-weight:500;color:#39404f;padding:26px 0;display:inline-flex;align-items:center;gap:6px;
  position:relative;transition:color .2s,padding .3s cubic-bezier(.4,0,.2,1);
}
header.stuck .menu>li>a{padding:21px 0}
.menu>li>a:hover,.menu>li>a.active{color:var(--accent-ink)}
.menu>li>a.active::after{content:"";position:absolute;left:0;right:0;bottom:20px;height:2px;background:var(--accent);border-radius:2px}
.caret{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s}
.has-sub:hover .caret{transform:rotate(180deg)}
.has-sub{position:relative}
.submenu{
  position:absolute;top:100%;left:-16px;min-width:300px;list-style:none;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:0 0 var(--r) var(--r);
  box-shadow:var(--sh-2);padding:8px;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:10px 14px;font-size:14.5px;border-radius:var(--r-sm);color:#39404f;transition:.16s}
.submenu a:hover{background:var(--accent-soft);color:var(--accent-dk);transform:translateX(3px)}
.nav-cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav-social{display:flex;align-items:center;gap:8px;padding-right:14px;border-right:1px solid var(--line)}
.nav-social a{
  width:36px;height:36px;border-radius:50%;background:var(--soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:transform .22s,background .22s,border-color .22s;
}
.nav-social svg{width:15px;height:15px;fill:#4a5364;transition:fill .22s}
.nav-social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.nav-social a:hover svg{fill:#fff}
/* WhatsApp keeps its own brand colour so people spot it instantly */
.nav-social a.wa-btn{background:#25d366;border-color:#1eb455}
.nav-social a.wa-btn svg{fill:#fff}
.nav-social a.wa-btn:hover{background:#1eb455;border-color:#189343}
.nav-social a.wa-btn::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #25d366;
  opacity:0;animation:waPing 2.6s ease-out infinite;pointer-events:none;
}
.nav-social a.wa-btn{position:relative}
@keyframes waPing{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nav-social a.wa-btn::after{animation:none}}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
.burger svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- hero ---------- */
.hero{
  position:relative;display:flex;align-items:center;overflow:hidden;background:#0e1116;
  /* One full screen = header + hero + trust bar, so the four promises are visible
     without scrolling. --trust-h is measured by the script (the bar's height changes
     with the viewport); the 104px here is the no-JS fallback. svh so mobile browsers
     measure against the visible viewport, not the toolbar-less one. min-height (not
     height) so the copy can still push the hero taller if it ever needs to. */
  min-height:660px;
/* A floor on the hero. Reserving room for the trust bar is right on a normal
   phone, but on a short screen (568px tall) it squeezed the hero to ~365px and
   the photo almost disappeared. max() keeps the bar on the first screen when
   there is room and simply lets it fall below the fold when there is not. */
  min-height:max(480px, calc(100vh - var(--head-h) - 1px - var(--trust-h, 104px)));
  min-height:max(480px, calc(100svh - var(--head-h) - 1px - var(--trust-h, 104px)));
}
.hero-media{position:absolute;inset:0;z-index:0}
.hslide{
  /* cover: the photo fills the whole frame edge to edge, no empty band anywhere */
  position:absolute;inset:0;opacity:0;background-size:cover;background-position:center;
  background-color:#0e1116;
  background-repeat:no-repeat;transform:scale(1.06);
  transition:opacity .62s cubic-bezier(.4,0,.2,1);will-change:opacity,transform;
}
.hslide.active{opacity:1;transform:scale(1);transition:opacity .62s cubic-bezier(.4,0,.2,1),transform 4.4s linear}
/* The photo is shown as shot — no wash across the frame at all. Readability comes
   from a defined plate behind the copy (.hero-stack::before) instead of dimming the
   picture. The only overlay left is a short gradient across the bottom 13% so the
   dots and the slide counter stay legible. */
/* The photos are already retouched — this used to push brightness, contrast and
   saturation well past 1, which made them look processed rather than real. A
   trace of contrast is all that is left, so what shows is the photograph. */
.hslide{filter:contrast(1.02)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(6,8,12,.44) 0%, rgba(6,8,12,.16) 7%, rgba(6,8,12,0) 13%);
}
.hero-in{position:relative;z-index:3;width:100%;padding:clamp(30px,8vh,104px) 0}

/* no plate, no column: the copy sits straight on the photograph and the picture
   is never covered by anything. Legibility comes from the type's own shadow. */
.hero-copy{position:relative;width:max-content;max-width:100%}
/* text layers: stacked, so the hero never changes height when a slide swaps */
.hero-stack{position:relative;min-height:352px;width:680px;max-width:100%}
.htxt{
  position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;max-width:680px;
  transition:opacity .3s ease,visibility .3s;
}
.htxt.active{opacity:1;visibility:visible;pointer-events:auto}
.js .htxt>*{opacity:0;transform:translateY(20px)}
.htxt.active>*{animation:hIn .46s cubic-bezier(.16,.84,.34,1) forwards}
.htxt.active>*:nth-child(1){animation-delay:.02s}
.htxt.active>*:nth-child(2){animation-delay:.08s}
.htxt.active>*:nth-child(3){animation-delay:.15s}
.htxt.active>*:nth-child(4){animation-delay:.22s}
@keyframes hIn{to{opacity:1;transform:none}}
.htitle{
  color:#fff;font-size:clamp(33px,4.4vw,58px);line-height:1.08;letter-spacing:-.032em;
  /* Nothing sits behind the type, so legibility is built into the glyph itself:
     eight 1px offsets draw a crisp dark outline (no blur = no smudge on the photo),
     plus one short drop shadow for depth. Works on a light photo as well as a dark one. */
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 -1px 0 rgba(0,0,0,.55),1px 0 0 rgba(0,0,0,.55),-1px 0 0 rgba(0,0,0,.55),1px 1px 0 rgba(0,0,0,.5),-1px 1px 0 rgba(0,0,0,.5),1px -1px 0 rgba(0,0,0,.5),-1px -1px 0 rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.55);
  font-weight:800;margin:0;
}
.htxt p{color:#eef1f6;font-size:clamp(15px,1.25vw,18px);margin-top:20px;max-width:566px;
        text-shadow:0 1px 0 rgba(0,0,0,.55),0 -1px 0 rgba(0,0,0,.55),1px 0 0 rgba(0,0,0,.55),-1px 0 0 rgba(0,0,0,.55),1px 1px 0 rgba(0,0,0,.5),-1px 1px 0 rgba(0,0,0,.5),1px -1px 0 rgba(0,0,0,.5),-1px -1px 0 rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.5)}
.hero-btns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-meta{
  display:inline-flex;gap:0;flex-wrap:wrap;color:#dbe2ec;font-size:10.5px;font-weight:500;
  margin-top:24px;padding:9px 4px;border-radius:11px;
  /* a small chip, not a panel: an outline on 10px type turns to mush, so this keeps
     a light dark fill. No backdrop blur, so the photo behind stays sharp. */
  background:rgba(9,12,17,.52);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 20px rgba(0,0,0,.2);
}
.hero-meta>div{position:relative;padding:0 15px}
.hero-meta>div+div::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.18);
}
.hero-meta>div>span{
  display:block;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:#e2e8f1;
  text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.4);
}
.hero-meta b{
  color:#fff;display:block;font-size:16px;letter-spacing:-.02em;font-weight:700;line-height:1.25;
  margin-bottom:1px;text-shadow:0 1px 4px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.45);
}

/* dots: the visible bar stays 4px, but the tappable area is 44x22 so it is easy to hit */
.dots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:4}
.dot{
  width:44px;height:22px;background:none;border:0;padding:0;cursor:pointer;position:relative;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.dot::before{
  content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;
  /* the photo underneath is no longer dimmed, so the track carries its own dark
     backing plus a hairline — otherwise it vanishes on a bright shot */
  background:rgba(10,13,18,.5);box-shadow:0 0 0 1px rgba(255,255,255,.42) inset,0 1px 3px rgba(0,0,0,.3);
  transition:background .25s;
}
.dot:hover::before{background:rgba(255,255,255,.6)}
.dot.active{width:74px}
.dot.active::before{background:rgba(10,13,18,.55)}
.dot i{position:absolute;left:0;top:9px;height:4px;width:0;background:var(--accent);border-radius:4px;display:block}
.dot.active i{width:100%;transition:width var(--dur,5.5s) linear}
.dot.active.paused i{transition:none}
.hero-count{
  position:absolute;right:32px;bottom:26px;z-index:4;color:rgba(255,255,255,.68);
  font-size:13px;letter-spacing:.14em;font-variant-numeric:tabular-nums;
  /* small dark chip so it stays readable over a bright photo */
  padding:6px 13px;border-radius:999px;background:rgba(9,12,17,.55);
  border:1px solid rgba(255,255,255,.13);line-height:1;
}
.hero-count b{color:#fff;font-size:19px;font-weight:700}

/* ---------- trust bar ---------- */
.trust{background:var(--ink);color:#fff;position:relative}
.trust::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 22%,var(--accent) 78%,transparent);
  opacity:.55;
}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.js .trust-item{opacity:0}
.trust-item{
  display:flex;gap:16px;align-items:center;padding:28px 26px;
  border-left:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;
  transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,.84,.34,1),background .3s;
}
.trust-item:first-child{border-left:0}
.trust.in .trust-item{opacity:1;transform:none}
.trust.in .trust-item:nth-child(1){transition-delay:.02s}
.trust.in .trust-item:nth-child(2){transition-delay:.1s}
.trust.in .trust-item:nth-child(3){transition-delay:.18s}
.trust.in .trust-item:nth-child(4){transition-delay:.26s}
.trust-item:hover{background:rgba(255,255,255,.035)}
.trust-item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.16,.84,.34,1);
}
.trust-item:hover::after{transform:scaleX(1)}
.trust .badge{
  width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:rgba(240,133,31,.13);border:1px solid rgba(240,133,31,.28);
  transition:background .3s,border-color .3s,transform .34s cubic-bezier(.34,1.3,.5,1);
}
.trust-item:hover .badge{background:var(--accent);border-color:var(--accent);transform:rotate(-6deg) scale(1.05)}
.trust svg{width:21px;height:21px;stroke:var(--accent);fill:none;stroke-width:2;transition:stroke .3s}
.trust-item:hover svg{stroke:#fff}
.trust b{display:block;font-size:15.5px;color:#fff;font-weight:600;letter-spacing:-.01em}
.trust span{font-size:13.5px;color:#98a1b1}

/* ---------- section heads ---------- */
.sec-head{max-width:720px;margin:0 auto 56px;text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(27px,3.2vw,40px);letter-spacing:-.028em}
.sec-head p{margin-top:16px;font-size:17px;color:var(--body)}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 28px;
  transition:transform .28s,box-shadow .28s,border-color .28s;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .32s}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .ic{
  width:54px;height:54px;border-radius:14px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:.28s;
}
.card:hover .ic{background:var(--accent);transform:rotate(-6deg)}
.card .ic svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:.28s}
.card:hover .ic svg{stroke:#fff}
.card h3{font-size:18px;margin-bottom:11px}
.card p{font-size:14.5px;line-height:1.7}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:600;color:var(--accent-ink);opacity:0;transform:translateX(-6px);transition:.28s}
.card:hover .more{opacity:1;transform:translateX(0)}
.card .more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ---------- who we are ---------- */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.who-grid p{margin-bottom:18px}
.who-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/3;background:#e6e9ef linear-gradient(135deg,#e6e9ef,#ccd2dd);background-size:cover;background-position:center;position:relative}
.who-badge{
  position:absolute;left:24px;bottom:24px;background:#fff;border-radius:var(--r);padding:18px 22px;
  box-shadow:var(--sh-2);display:flex;gap:16px;align-items:center;
}
.who-badge b{font-size:26px;color:var(--accent-ink);letter-spacing:-.02em;line-height:1}
.who-badge span{font-size:13px;color:var(--muted);display:block;margin-top:3px}

/* ---------- portfolio carousel ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:1000px;margin:0 auto 40px;padding:0 24px}
.filters button{
  border:1px solid var(--line);background:#fff;color:#4d5666;padding:8px 17px;border-radius:99px;
  font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;transition:.2s;
}
.filters button:hover{border-color:var(--accent);color:var(--accent-ink)}
.filters button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-2:hover{color:#fff}
.carousel{position:relative;padding:0 24px}
.track{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
       scrollbar-width:none;padding:6px 0 10px;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.item{
  flex:0 0 calc((100% - 60px)/4);scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .28s,box-shadow .28s;
}
.item:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.item.hide{display:none}
.item .ph{aspect-ratio:4/3;background:#fff;overflow:hidden;cursor:zoom-in;position:relative}
.item .ph img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.item:hover .ph img{transform:scale(1.04)}
.item .zoom{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,23,31,.42);opacity:0;transition:.25s;
}
.item:hover .zoom{opacity:1}
.item .zoom span{width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.item .zoom svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2.2}
.item .t{padding:15px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.item .t b{font-size:14px;font-weight:600;color:var(--ink)}
.item .t i{font-style:normal;font-size:11.5px;color:var(--muted);background:var(--soft);padding:3px 9px;border-radius:99px;white-space:nowrap}
.navb{
  position:absolute;top:calc(50% - 32px);transform:translateY(-50%);z-index:5;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;color:var(--ink);
}
.navb:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.navb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
.navb.p{left:0}.navb.n{right:0}   /* -2px used to push the page 2px wide sideways */
.navb[disabled]{cursor:default}

/* auto-tour progress + control */
.tour-track{
  max-width:1152px;margin:16px auto 0;height:3px;border-radius:3px;background:var(--line);
  overflow:hidden;
}
.tour-track i{
  display:block;height:100%;background:var(--accent);border-radius:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .5s ease;
}
.filters button.flash{animation:chipFlash .9s ease}
@keyframes chipFlash{
  0%{box-shadow:0 0 0 0 rgba(240,133,31,.55)}
  100%{box-shadow:0 0 0 12px rgba(240,133,31,0)}
}

.tour-bar{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;
  flex-wrap:wrap;padding:0 24px;
}
.tour-btn{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;
  color:#4a5364;padding:8px 16px;border-radius:99px;font-size:13.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:.2s;
}
.tour-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.tour-btn svg{width:14px;height:14px;fill:currentColor}
.tour-btn.off{background:var(--accent);border-color:var(--accent);color:var(--btn-ink)}
.tour-hint{
  font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;
}
.tour-hint::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:tourPulse 1.8s ease-in-out infinite;
}
@keyframes tourPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(10,12,17,.95);display:none;align-items:center;justify-content:center;z-index:300;padding:36px}
.lb.open{display:flex}
.lb>img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:6px;box-shadow:var(--sh-3)}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
.lb button:hover{background:var(--accent)}
.lb button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}
.lb .close{top:26px;right:26px}
.lb .prev{left:26px;top:50%;transform:translateY(-50%)}
.lb .next{right:26px;top:50%;transform:translateY(-50%)}
.lb .cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#cfd5e0;font-size:14px}

/* ---------- business ---------- */
.business{position:relative;padding:110px 0;background:#131015 center/cover no-repeat;color:#fff;overflow:hidden}
.business::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,10,14,.86),rgba(9,10,14,.6))}
.business .wrap{position:relative;z-index:2}
.biz-grid{display:grid;grid-template-columns:49% 1fr;gap:56px;align-items:center}
.business h2{color:#fff;font-size:clamp(23px,2.5vw,31px);font-weight:700;line-height:1.45}
.business h2 .q{color:var(--accent)}
.vcard{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--sh-3);aspect-ratio:16/10;background:#22252c}
.vcard img{width:100%;height:100%;object-fit:cover}
.vcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,12,17,.24);transition:.25s}
.vcard:hover .play{background:rgba(10,12,17,.42)}
.vcard .play span{
  width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.16);border:3px solid rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;transition:.28s;backdrop-filter:blur(3px);
}
.vcard:hover .play span{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}
.vcard .play svg{width:28px;height:28px;fill:#fff;margin-left:5px}
.ping{position:absolute;width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.vbox{position:fixed;inset:0;background:rgba(9,11,15,.95);display:none;z-index:310;align-items:center;justify-content:center;padding:36px}
.vbox.open{display:flex}
.vbox .inner{width:min(1040px,94vw);aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-3)}
.vbox iframe,.vbox video,.vbox .inner>img{width:100%;height:100%;border:0;object-fit:contain}
.vbox .close{position:absolute;top:26px;right:26px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vbox .close:hover{background:var(--accent)}
.vbox .close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ---------- long service sections ---------- */
.svc{padding:96px 0}
.svc:nth-of-type(even){background:var(--soft)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.svc.flip .svc-grid{direction:rtl}
.svc.flip .svc-grid>*{direction:ltr}
.svc h2{font-size:clamp(24px,2.6vw,33px);margin-bottom:20px;letter-spacing:-.025em}
.svc p{margin-bottom:16px}
/* the samples are 465x358 side-by-side composites: matching the box to that
   ratio means neither the "before" nor the "after" half gets cropped */
.svc-photo{border-radius:var(--r);aspect-ratio:4/3;background:#e6e9ef linear-gradient(135deg,#e6e9ef,#ccd2dd);background-size:cover;background-position:center;box-shadow:var(--sh-2)}
.inc{font-weight:600;color:var(--ink);margin:22px 0 12px}
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.ticks li{padding:5px 0 5px 28px;position:relative;font-size:14.5px;color:#4d5666}
.ticks li::before{
  content:"";position:absolute;left:0;top:12px;width:16px;height:16px;border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0851f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------- process ---------- */
#process{position:relative;overflow:hidden}
#process::before{
  content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-190px;top:-180px;
  background:radial-gradient(circle,rgba(240,133,31,.09),rgba(240,133,31,0) 69%);pointer-events:none;
}
#process .wrap{position:relative}
#process .sec-head{margin-bottom:44px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{
  position:relative;min-width:0;padding:24px 22px 22px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.9);box-shadow:var(--sh-1);transition:transform .25s,box-shadow .25s,border-color .25s;
}
.step:hover{transform:translateY(-5px);border-color:rgba(240,133,31,.34);box-shadow:var(--sh-2)}
.step::before{
  content:attr(data-step);display:grid;place-items:center;width:52px;height:52px;margin-bottom:20px;
  border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);font-size:20px;font-weight:800;
  letter-spacing:-.03em;line-height:1;box-shadow:inset 0 0 0 1px rgba(240,133,31,.13);
}
.step::after{
  content:"";position:absolute;z-index:2;top:49px;left:74px;width:calc(100% - 32px);height:2px;
  background:repeating-linear-gradient(90deg,rgba(240,133,31,.42) 0 7px,transparent 7px 13px);pointer-events:none;
}
.step:last-child::after{display:none}
.step h3{font-size:17px;margin-bottom:9px}
.step p{font-size:14.5px;line-height:1.7}

/* the gap above the prices was two paddings stacked: the grey section's bottom
   plus this section's top. Both trimmed. */
#process{padding-bottom:64px}
/* the whole pricing block is sized to land inside one screen when you click
   "Pricing" — no scrolling to reach the buttons */
.pricing-sec{padding-top:24px;padding-bottom:34px}
.pricing-sec .sec-head{margin-bottom:12px;max-width:660px}
.pricing-sec .sec-head h2{font-size:clamp(25px,2.6vw,33px)}
.pricing-sec .sec-head p{font-size:14.5px;margin-top:10px}
.pricing-sec .eyebrow{margin-bottom:12px}

/* ---------- pricing ----------
   All four cards sit on the same top and bottom line. The featured one used to be
   pulled up 26px, which knocked every row out of alignment with its neighbours and
   left its footer hanging short — it now stands out through colour and shadow only. */
.price-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch;padding-top:22px;
}
.plan-wrap{position:relative;display:flex}
.plan{
  display:flex;flex-direction:column;width:100%;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;
  transition:transform .28s,box-shadow .28s,border-color .28s;
}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.plan .head{
  background:var(--ink);color:#fff;padding:13px 12px;text-align:center;font-size:13px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.plan .price{
  display:block;width:100%;border:0;border-bottom:1px solid var(--line);font-family:inherit;
  padding:16px 14px 13px;text-align:center;background:var(--soft);
}
.plan .price b{display:block;font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1}
.plan .price small{display:block;font-size:10.5px;letter-spacing:.13em;color:var(--muted);margin-top:5px;text-transform:uppercase}
.plan-meter{
  display:flex;gap:4px;justify-content:center;align-items:center;padding:11px 16px 0;
}
.plan-meter i{
  display:block;width:16px;height:4px;border-radius:2px;background:var(--line);transition:background .25s;
}
.plan-meter i.on{background:var(--accent)}
.plan-meter span{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:6px;
  font-weight:600;
}
.plan-tag{
  padding:8px 16px 6px;font-size:12.5px;color:var(--accent-ink);font-weight:600;text-align:center;
  line-height:1.4;min-height:52px;display:flex;align-items:center;justify-content:center;
}
.plan ul{list-style:none;flex:1 1 auto;padding:0 18px 4px}   /* grows so every footer lines up */
.plan ul li{
  position:relative;padding:4px 0 4px 22px;font-size:13px;color:#5b6373;line-height:1.45;
}
.plan ul li::before{
  content:"";position:absolute;left:0;top:9px;width:13px;height:13px;border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a85608' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/8px no-repeat;
}
.plan .foot{padding:10px 16px 15px;text-align:center;margin-top:auto}
.plan.featured{border-color:var(--accent);border-width:1.5px;
  box-shadow:0 12px 38px rgba(240,133,31,.18),var(--sh-2)}
.plan.featured .price{background:#fffaf4}
.plan.featured .head{background:var(--accent);color:var(--btn-ink)}
.plan.featured:hover{box-shadow:0 16px 44px rgba(240,133,31,.22),var(--sh-2)}
.tag{
  position:absolute;top:-28px;left:50%;transform:translateX(-50%);z-index:3;
  background:var(--accent);color:var(--btn-ink);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 15px;border-radius:99px;border:2px solid #fff;
  box-shadow:0 4px 14px rgba(240,133,31,.35);white-space:nowrap;
}

/* ---------- price detail popup ----------
   Laid out to fit one screen without scrolling: the header runs across the top and
   the body is two columns (what's covered | full rate table) instead of one long
   stack, which was overflowing and getting clipped at the bottom. */
.plan .price,.plan .foot a{cursor:pointer}
.plan .price{transition:background .22s}
.plan .price:hover{background:#f1f3f7}
.pbox{
  position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(10,12,17,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.pbox.open{display:flex}
.pbox-in{
  background:#fff;border-radius:var(--r);width:min(880px,100%);max-height:94vh;overflow:auto;
  box-shadow:var(--sh-3);position:relative;animation:pIn .3s cubic-bezier(.16,.84,.34,1);
}
@keyframes pIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.pbox-head{
  background:var(--ink);color:#fff;padding:22px 30px;display:flex;align-items:center;
  gap:26px;flex-wrap:wrap;
}
.pbox-head.hot{background:var(--accent);color:var(--btn-ink)}
.pbox-head .pname{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;opacity:.8}
.pbox-head .pprice{font-size:36px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-top:3px}
.pbox-head .pprice small{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.pbox-head .psub{
  font-size:14.5px;opacity:.92;flex:1 1 240px;min-width:0;padding-left:26px;
  border-left:1px solid rgba(255,255,255,.22);line-height:1.5;
}
.pbox-head.hot .psub{border-left-color:rgba(35,20,4,.24)}

.pbox-body{padding:24px 30px 26px}
.pbox-body>p{font-size:14px;margin-bottom:20px;color:var(--body)}
.pbox-cols{display:grid;grid-template-columns:1fr 1.05fr;gap:30px}
.pbox-body h3{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin-bottom:11px;font-weight:700;
}
.pbox-body ul{list-style:none}
.pbox-body ul li{padding:5px 0 5px 25px;position:relative;font-size:14px;color:#4d5666;line-height:1.5}
.pbox-body ul li::before{
  content:"";position:absolute;left:0;top:11px;width:15px;height:15px;border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a85608' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.pbox-meta{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);
  padding:4px 14px;
}
.pbox-meta div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13px}
.pbox-meta div+div{border-top:1px solid var(--line)}
.pbox-meta span{color:var(--muted)}
.pbox-meta b{color:var(--ink)}
.rate-table{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.rate-table div{display:flex;justify-content:space-between;gap:12px;padding:7px 13px;font-size:13px;color:#5b6373}
.rate-table div+div{border-top:1px solid var(--line)}
.rate-table div:nth-child(odd){background:var(--soft)}
.rate-table b{color:var(--ink);white-space:nowrap}
.pbox-foot{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.pbox-acts{display:flex;gap:11px;flex-wrap:wrap}
.pbox-note{font-size:12.5px;color:var(--muted);flex:1 1 260px;min-width:0;line-height:1.5;margin:0}
.pbox-close{
  position:absolute;top:15px;right:15px;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s;
}
.pbox-head.hot ~ .pbox-close,.pbox-in:has(.pbox-head.hot) .pbox-close{background:rgba(35,20,4,.16);color:var(--btn-ink)}
.pbox-close:hover{background:rgba(255,255,255,.34)}
.pbox-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

@media(max-width:760px){
  .pbox{padding:14px}
  .pbox-in{max-height:92vh}
  .pbox-head{padding:20px 22px;gap:14px}
  .pbox-head .psub{padding-left:0;border-left:0;flex-basis:100%}
  .pbox-body{padding:20px 22px 22px}
  .pbox-cols{grid-template-columns:1fr;gap:20px}
}

/* ---------- reviews ----------
   Matches the layout of the original site: a carousel of centred quotes with the
   client's logo or photo on top, name, stars, country. */
.reviews{background:#fff}
#reviews{padding-top:54px}   /* was 96px — left a dead band under the prices */
#reviews .sec-head{margin-bottom:34px}
#reviews .rule{margin:16px auto 0;background:var(--accent);width:74px;height:3px}

.rev-wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 56px}
.rev-track{
  display:flex;gap:0;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:4px 0;
}
.rev-track::-webkit-scrollbar{display:none}
.rev{
  flex:0 0 33.333%;scroll-snap-align:start;text-align:center;padding:8px 26px 4px;
  display:flex;flex-direction:column;align-items:center;
}
.rav{
  width:86px;height:86px;border-radius:50%;object-fit:contain;background:#fff;margin-bottom:22px;
  border:1px solid var(--line);padding:6px;flex:0 0 auto;overflow:hidden;font-size:0;
}
.rav-i{
  width:86px;height:86px;border-radius:50%;background:var(--ink);color:#fff;margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;flex:0 0 auto;
}
.rev p{font-size:14.5px;color:var(--body);margin-bottom:18px;line-height:1.7;max-width:330px}
.rev b{font-size:15.5px;color:var(--ink);margin-bottom:8px}
.rev .stars{display:inline-flex;gap:2px;margin-bottom:7px}
.rev .stars svg{width:15px;height:15px;fill:var(--accent)}
.rev small{font-size:13.5px;color:var(--muted)}

.rnav{
  position:absolute;top:96px;z-index:4;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;color:var(--ink);
}
.rnav:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.rnav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4}
.rnav.p{left:4px}
.rnav.n{right:4px}

.rev-dots{display:flex;gap:9px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.rev-dots button{
  width:10px;height:10px;border-radius:50%;border:0;background:#d3d8e1;cursor:pointer;padding:0;
  transition:.2s;
}
.rev-dots button:hover{background:#aeb6c3}
.rev-dots button.active{background:var(--accent);transform:scale(1.25)}

.rating{display:inline-flex;align-items:center;gap:11px;margin-top:30px;padding:9px 18px;
  background:#fff;border:1px solid var(--line);border-radius:99px;box-shadow:var(--sh-1)}
.rstars{display:inline-flex;gap:2px}
.rstars svg{width:15px;height:15px;fill:var(--accent)}
.rating b{font-size:16px;color:var(--ink);letter-spacing:-.01em}
.rtxt{font-size:13.5px;color:var(--muted)}

/* ---------- counters ----------
   Full-width photo with a dark wash, thin numerals inside outlined boxes —
   the same treatment the original site used for this band. */
.counters{position:relative;color:#fff;padding:96px 0;overflow:hidden;background:#14171f;isolation:isolate}
/* Two identical photo layers running the same forward push, offset by half a cycle.
   One layer alone would have to snap back to the start; crossfading two of them
   makes the travel endless, so it reads as a train running down the track. */
.counters .cbg{
  position:absolute;inset:0;z-index:0;background:#14171f center/cover no-repeat;
  /* origin sits on the vanishing point where the rails meet, so the zoom pushes
     straight down the track instead of blowing up from the middle of the frame */
  transform-origin:50% 40%;opacity:1;will-change:transform,opacity;
  animation:trainRun 9s linear infinite;
}
.counters .cbg2{animation-delay:-4.5s}
@keyframes trainRun{
  0%{transform:scale(1);opacity:0}
  50%{transform:scale(1.19);opacity:1}
  100%{transform:scale(1.42);opacity:0}
}
/* two-stop veil: darkest at the edges, lighter through the middle so the tracks stay readable */
.counters .cveil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,8,12,.42) 0%, rgba(6,8,12,.06) 40%, rgba(6,8,12,.10) 70%, rgba(6,8,12,.45) 100%),
    radial-gradient(125% 95% at 50% 48%, rgba(6,8,12,.46) 0%, rgba(6,8,12,.68) 58%, rgba(6,8,12,.85) 100%);
}
/* slow warm glow drifting behind the numbers — brand colour, very low opacity */
.counters .cglow{
  position:absolute;z-index:1;pointer-events:none;left:50%;top:56%;width:min(1100px,120%);height:520px;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(70px);opacity:.34;
  background:radial-gradient(closest-side, rgba(247,144,30,.5), rgba(247,144,30,0) 72%);
  animation:glowDrift 16s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  0%{transform:translate(-56%,-52%) scale(.92);opacity:.24}
  100%{transform:translate(-44%,-48%) scale(1.08);opacity:.42}
}
.counters .wrap{position:relative;z-index:3}
.counters .chead{text-align:center;margin-bottom:46px}
.counters .chead h2{
  color:#fff;font-size:clamp(27px,3.2vw,40px);letter-spacing:-.02em;font-weight:700;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
/* the rule under the heading draws itself outward once the section scrolls in */
.counters .chead .rule{
  width:120px;height:2px;margin:18px auto 0;background:rgba(255,255,255,.7);
  transform:scaleX(0);transform-origin:center;transition:transform .9s cubic-bezier(.2,.7,.3,1) .15s;
}
.counters .chead.in .rule{transform:scaleX(1)}

.cgrid{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto;
  border:1px solid rgba(255,255,255,.26);border-radius:6px;overflow:hidden;
  /* no backdrop blur here on purpose — the photo has to stay razor sharp behind the panel */
  background:rgba(6,8,12,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
/* faint brand line along the top edge of the panel */
.cgrid::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(247,144,30,.85),transparent);
  transform:scaleX(0);transform-origin:center;transition:transform 1.1s cubic-bezier(.2,.7,.3,1) .25s;
}
.cgrid.in::before{transform:scaleX(1)}
/* a slow shine that crosses the panel on its own every few seconds */
.cgrid::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%);
  transform:translateX(-100%);
}
.cgrid.in::after{animation:panelShine 9s ease-in-out 1.4s infinite}
@keyframes panelShine{0%{transform:translateX(-100%)}28%,100%{transform:translateX(100%)}}
.js .cgrid>div{opacity:0}
.cgrid>div{
  position:relative;text-align:center;padding:48px 20px;overflow:hidden;
  transition:background .35s;
  transform:translateY(16px);
}
.cgrid.in>div{animation:statIn .8s cubic-bezier(.2,.7,.3,1) forwards}
.cgrid.in>div:nth-child(2){animation-delay:.13s}
.cgrid.in>div:nth-child(3){animation-delay:.26s}
@keyframes statIn{to{opacity:1;transform:none}}
/* divider between cells, drawn as a soft gradient instead of a hard border */
.cgrid>div+div::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.34),transparent);
}
/* light sweep on hover */
.cgrid>div::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .85s ease;
}
.cgrid>div:hover{background:rgba(255,255,255,.07)}
.cgrid>div:hover::after{transform:translateX(120%)}
.cgrid .n{
  font-size:clamp(38px,4.4vw,54px);font-weight:200;color:#fff;letter-spacing:.01em;line-height:1;
  /* tight + wide shadow pair keeps the thin numerals readable without darkening the photo */
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 26px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;
}
/* short accent bar that grows between the number and its label */
.cgrid .bar{
  width:34px;height:2px;margin:18px auto 0;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:center;transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.cgrid.in .bar{transform:scaleX(1);transition-delay:.5s}
.cgrid.in>div:nth-child(2) .bar{transition-delay:.63s}
.cgrid.in>div:nth-child(3) .bar{transition-delay:.76s}
.cgrid>div:hover .bar{width:52px;transition:width .35s ease}
.cgrid .l{
  font-size:12px;color:#e9edf3;margin-top:14px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.6),0 1px 12px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion:reduce){
  .counters .cbg{animation:none;opacity:1;transform:none}
  .counters .cbg2{display:none}
  .counters .cglow{animation:none}
  .cgrid>div{opacity:1;transform:none;animation:none}
  .cgrid .bar,.cgrid::before,.counters .chead .rule{transform:none}
  .cgrid.in::after{animation:none;opacity:0}
}

/* ---------- free trial ---------- */
.cta-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.drop{
  border:2px dashed #cfd5e0;border-radius:var(--r-sm);padding:22px 18px;text-align:center;background:#fbfcfd;
  transition:.22s;cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop .ic{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.drop svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.drop small{display:block;color:var(--muted);font-size:12.5px}
.drop .files{font-size:12.5px;color:var(--accent-ink);margin-top:10px;word-break:break-all;font-weight:600}


/* ---------- enquiry form ---------- */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--sh-1);
}
.form-card h3{font-size:19px;margin-bottom:6px}
.form-card>p{font-size:14px;color:var(--muted);margin-bottom:22px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-field{margin-bottom:14px}
.f-field label{display:block;font-size:12.5px;font-weight:600;color:#3c4453;margin-bottom:6px}
.f-field label i{color:var(--accent-ink);font-style:normal}
.f-field input,.f-field select,.f-field textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;font-size:14.5px;
  font-family:inherit;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s;
}
.f-field textarea{min-height:104px;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,133,31,.15);
}
.f-field input::placeholder,.f-field textarea::placeholder{color:#a6adba}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.f-submit{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}
.f-note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.55}
.f-status{
  font-size:14px;padding:12px 15px;border-radius:var(--r-sm);margin-top:14px;display:none;line-height:1.55;
}
.f-status.show{display:block}
.f-status.ok{background:#eefaf1;color:#166534;border:1px solid #bbf0cb}
.f-status.err{background:#fdf0ef;color:#9b2019;border:1px solid #f6cbc7}
.f-status a{color:inherit;font-weight:600;text-decoration:underline}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.wa{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#0f7b7b;
  border:1.5px solid #cfe3e3;background:#f2fafa;padding:12px 18px;border-radius:var(--r-sm);transition:.2s;
}
.wa:hover{background:#0f7b7b;border-color:#0f7b7b;color:#fff}
.wa svg{width:17px;height:17px;fill:currentColor}


/* ---------- contact page ---------- */
.cbanner{
  position:relative;padding:96px 0 84px;color:#fff;text-align:center;
  background:#14171f center/cover no-repeat;
}
.cbanner::before{content:"";position:absolute;inset:0;background:rgba(6,8,12,.76)}
.cbanner .wrap{position:relative;z-index:2}
.cbanner .eyebrow{justify-content:center;color:var(--accent)}
.cbanner h1{color:#fff;font-size:clamp(32px,4vw,50px);letter-spacing:-.03em;text-shadow:0 3px 26px rgba(0,0,0,.5)}
.cbanner p{color:#c6ccd8;margin-top:14px;font-size:16px}
.crumb{margin-top:22px;font-size:13.5px;color:#98a1b1;display:flex;gap:9px;justify-content:center}
.crumb a:hover{color:var(--accent)}
.crumb b{color:#fff;font-weight:600}

.pad-c{padding:70px 0}
.cinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cbox{
  text-align:center;padding:38px 26px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:transform .28s,box-shadow .28s,border-color .28s;
}
.cbox:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.cico{
  width:60px;height:60px;border-radius:16px;background:var(--accent-soft);display:flex;
  align-items:center;justify-content:center;margin:0 auto 18px;transition:.28s;
}
.cbox:hover .cico{background:var(--accent);transform:rotate(-6deg)}
.cico svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.8;transition:.28s}
.cbox:hover .cico svg{stroke:#fff}
.cbox h2{font-size:18px;margin-bottom:9px}
.cbox p{font-size:14px;color:var(--muted);margin-bottom:14px}
.cval{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.6}
a.cval:hover{color:var(--accent-ink)}

.cform-sec{background:var(--soft);padding-top:0;padding-bottom:70px}
.cform-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:start;padding-top:64px}
.cform-grid h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px;letter-spacing:-.025em}
.cform-grid>div>p{color:var(--body);margin-bottom:20px}
.cquick{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.wa.ms{color:#4b4d8f;border-color:#d5d6ea;background:#f5f5fb}
.wa.ms:hover{background:#6264a7;border-color:#6264a7;color:#fff}
.cmap{width:100%;height:420px;border:0;display:block;filter:grayscale(.15)}

@media(max-width:960px){
  .cinfo,.cform-grid{grid-template-columns:1fr}
  .cform-grid{padding-top:44px;gap:34px}
  .cbanner{padding:70px 0 60px}
  .cmap{height:320px}
}

/* ---------- faq ---------- */
.faq{max-width:860px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;background:#fff;transition:.22s;overflow:hidden}
.faq details[open]{border-color:var(--accent);box-shadow:var(--sh-1)}
.faq summary{
  padding:20px 56px 20px 24px;cursor:pointer;font-weight:600;color:var(--ink);font-size:16px;
  list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2.4px solid var(--accent);border-bottom:2.4px solid var(--accent);
  transform:rotate(45deg);transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .a{padding:0 24px 22px;font-size:15px;color:var(--body)}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:#fff}
.contact .sec-head h2{color:#fff}
.contact .sec-head span{color:var(--accent)}
.contact .sec-head p{color:#a8b0be}
/* a single studio card: centred, and only as wide as it needs to be, so it reads
   as a deliberate panel rather than the leftover half of a two-column grid */
.offices{display:grid;grid-template-columns:1fr;gap:26px;max-width:540px;margin:0 auto}
.office{text-align:center}
.office h3{justify-content:center}
/* the rows stay left-aligned to each other, but sit as a centred block */
.office ul{display:inline-block;text-align:left}
/* the Teams mark is a filled shape, unlike the stroked line icons beside it */
.office li svg.ms-ic{fill:var(--accent);stroke:none}
.office{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:38px 40px;transition:.25s}
.office:hover{background:rgba(255,255,255,.08);border-color:rgba(240,133,31,.5);transform:translateY(-4px)}
.office h3{color:#fff;font-size:19px;display:flex;align-items:center;gap:10px}
.office h3 svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:2}
.office .city{font-size:12.5px;color:#8f98a8;letter-spacing:.11em;text-transform:uppercase;margin:6px 0 20px}
.office li{list-style:none;display:flex;gap:12px;align-items:center;padding:7px 0;font-size:15px;color:#d2d8e2}
.office li svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;flex:0 0 auto}
.office a:hover{color:var(--accent)}
/* ---------- studio contact card ----------
   Every line is a whole tappable row rather than a bare link: an icon tile, the
   channel name, then the actual number or address. Labelling each one means a
   visitor can see at a glance which channels exist instead of reading four
   similar-looking strings. */
.office ul{display:block;width:100%;margin-top:22px;text-align:left}
.office li{display:block;padding:0;margin-top:8px}
.office li a{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);
  transition:background .2s,border-color .2s,transform .2s;
}
.office li a:hover{background:rgba(255,255,255,.07);border-color:rgba(247,144,30,.5);transform:translateX(2px)}
.office li>a>svg:first-child{
  width:34px;height:34px;flex:0 0 34px;padding:8px;border-radius:9px;
  /* an explicit tint, not --accent-soft: that variable is a pale cream meant for
     light sections and reads as a white tile on this dark card */
  background:rgba(247,144,30,.15);stroke:var(--accent);fill:none;stroke-width:2;
}
.office li>a>svg.ms-ic{fill:var(--accent);stroke:none}
.office .ci{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.office .ci small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8f98a8;line-height:1}
.office .ci b{font-size:15px;font-weight:600;color:#e9edf3;line-height:1.25;overflow-wrap:anywhere}
.office li a:hover .ci b{color:#fff}
.office .ch{width:16px;height:16px;flex:0 0 16px;stroke:#6b7280;fill:none;stroke-width:2;transition:.2s}
.office li a:hover .ch{stroke:var(--accent);transform:translateX(3px)}
.office-cta{margin-top:22px;width:100%;justify-content:center}
.office-note{margin-top:14px;font-size:12.5px;color:#8f98a8}
@media(max-width:520px){
  .office li a{padding:11px 12px;gap:11px}
  .office .ci b{font-size:14px}
}

/* ---------- closing CTA band ---------- */
.endcta{
  background-color:#171b24;
  background-image:linear-gradient(120deg,#171b24 0%,#1e2532 52%,#2a2013 100%);
  color:#fff;padding:64px 0;position:relative;overflow:hidden;
}
.endcta::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,133,31,.28),transparent 68%);
}
.endcta-in{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:34px;flex-wrap:wrap;
}
.endcta h2{color:#fff;font-size:clamp(23px,2.6vw,31px);letter-spacing:-.025em;margin-bottom:8px}
.endcta p{color:#a9b2c1;font-size:15.5px;max-width:560px}
.endcta .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:#101319;color:#98a1b1;font-size:14.5px;padding:76px 0 0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:52px}
footer h3{color:#fff;font-size:15px;margin-bottom:20px;letter-spacing:.02em;font-weight:600}
footer ul{list-style:none}
footer li{padding:5px 0}
footer a{transition:.18s}
footer a:hover{color:var(--accent);padding-left:3px}
.foot-logo .logo-svg{height:56px;width:auto;margin-bottom:18px}
.foot-logo .logo-img{height:62px;width:auto;background:#fff;padding:10px 14px;border-radius:var(--r-sm);margin-bottom:18px}
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:.22s}
.social a:hover{background:var(--accent);transform:translateY(-3px);padding-left:0}
.social a.wa-f{background:#25d366}
.social a.wa-f:hover{background:#1eb455}
.social svg{width:16px;height:16px;fill:#fff}
.copy{border-top:1px solid rgba(255,255,255,.09);padding:24px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#78818f}

/* ---------- floating ---------- */
.float{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:120;display:flex;flex-direction:column;border-radius:8px 0 0 8px;overflow:hidden;box-shadow:var(--sh-2)}
.float a{width:44px;height:42px;background:#0f7b7b;display:flex;align-items:center;justify-content:center;transition:.2s}
.float a+a{border-top:1px solid rgba(255,255,255,.2)}
.float a:hover{background:var(--accent);width:52px}
.float svg{width:19px;height:19px;fill:#fff}
.top{
  position:fixed;right:20px;bottom:20px;z-index:130;width:46px;height:46px;border:0;border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(12px);transition:.25s;box-shadow:0 8px 24px rgba(240,133,31,.4);
}
.top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.top:hover{background:var(--accent-dk)}
.top svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- scroll reveal ---------- */
/* scoped to .js (added by colorvix.js on <html>) so the page can never render
   blank if the script is missing, blocked or minified away by a cache plugin */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1240px){
  /* tight header: drop the brand icons but keep WhatsApp — it is a real contact route */
  .nav-social{padding-right:10px}
  .nav-social a:not(.wa-btn){display:none}
}
@media(max-width:1100px){
  .item{flex:0 0 calc((100% - 40px)/3)}
  .cards,.trust-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(3){border-left:0}
  .step::after{display:none}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
  .pad{padding:72px 0}
  .svc{padding:72px 0}
  .menu{
    display:none;position:absolute;top:var(--head-h);left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:10px 14px 18px;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-2);max-height:calc(100vh - var(--head-h));overflow:auto;
  }
  .menu.open{display:flex}
  .menu>li>a{padding:13px 10px;justify-content:space-between}
  .menu>li>a.active::after{display:none}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--accent);border-radius:0;padding:0 0 0 12px;margin:0 0 8px 10px;min-width:0}
  .burger{display:block}
  .nav-cta .btn{display:none}
  .nav-social{padding-right:8px;border-right:0}
  .logo-svg,.logo-img,header.stuck .logo-svg,header.stuck .logo-img{height:38px}
  .price-grid,.who-grid,.svc-grid,.biz-grid,.cta-grid,.offices,.f-row{grid-template-columns:1fr}
  .rev{flex:0 0 50%}
  .price-grid{gap:44px;padding-top:34px}
  .svc.flip .svc-grid{direction:ltr}
  .cgrid{grid-template-columns:1fr}
  .cgrid>div{padding:34px 20px}
  /* stacked: the divider has to run across, not down */
  .cgrid>div+div::before{left:14%;right:14%;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)}
  .item{flex:0 0 calc((100% - 20px)/2)}
  .hero{min-height:max(480px, calc(100svh - var(--head-h) - 1px - var(--trust-h, 0px)))}
  .hero::after{
    background:
      linear-gradient(0deg, rgba(6,8,12,.44) 0%, rgba(6,8,12,.16) 8%, rgba(6,8,12,0) 15%);
  }
  .hero-in{padding:clamp(26px,6vh,72px) 0}
  .hero-stack{min-height:392px}
  .hero-meta>div{padding:0 13px}
}
/* touch devices: every link gets a finger-sized hit area */
@media(hover:none){
  footer li a,.office li a,.submenu a{min-height:44px;display:flex;align-items:center}
  .office li{padding:2px 0}
  .office li a{flex:1}
  .filters button{padding:11px 18px}
  .nav-social a.wa-btn{width:44px;height:44px}
  .nav-social a.wa-btn svg{width:19px;height:19px}
  .dot{height:34px}
  .dot::before,.dot i{top:15px}
  .menu>li>a{min-height:48px}
}
@media(max-width:620px){
  .wrap{padding:0 18px}
  .pad{padding:56px 0}
  .svc{padding:56px 0}
  .cards,.steps,.fgrid,.cgrid{grid-template-columns:1fr}
  #process .sec-head{margin-bottom:30px}
  .steps{gap:14px}
  .step{padding:20px}
  .step::before{width:48px;height:48px;margin-bottom:16px;border-radius:12px;font-size:18px}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-item{padding:16px 10px;gap:11px}
  .trust-item:nth-child(-n+2){border-top:0}
  .trust-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
  .trust-item:nth-child(odd){border-left:0}
  .trust-item b{font-size:13px}
  .trust-item span span{font-size:11px}
}
/* narrowest phones: the promise text wraps to two lines and the bar grows, which
   would push it off the first screen — tighten it just enough to keep it up there */
@media(max-width:430px){
  .trust-item{padding:13px 8px;gap:9px}
  .trust-item b{font-size:12px}
  .trust-item span span{font-size:10px}
  .trust-item .badge{width:34px;height:34px;flex:0 0 34px}
  .hero-in{padding:28px 0 40px}
  .ticks{grid-template-columns:1fr}
  .item{flex:0 0 82%}
  .carousel{padding:0 18px}
  .rev{flex:0 0 100%;padding:8px 10px 4px}
  .rev-wrap{padding:0 14px}
  .rnav{display:none}
  .navb{display:none}
  .hero{min-height:max(480px, calc(100svh - var(--head-h) - 1px - var(--trust-h, 0px)))}
  .hero::after{
    background:
      linear-gradient(0deg, rgba(6,8,12,.44) 0%, rgba(6,8,12,.16) 6%, rgba(6,8,12,0) 12%);
  }
  .hero-in{padding:36px 0 52px}
  .hero-stack{min-height:430px}
  .hero-btns{margin-top:26px}
  .hero-btns .btn{width:100%}
  .hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 0;padding:10px 2px;width:100%}
  .hero-meta>div{padding:0 11px}
  .hero-meta>div:nth-child(odd)::before{display:none}
  .hero-meta b{font-size:15px}
  .hero-meta>div>span{font-size:9.5px}
  .hero-count{display:none}
  .dots{bottom:22px}
  /* filter chips become one swipeable row instead of five stacked lines */
  .filters{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;
    padding:0 18px 4px;-webkit-overflow-scrolling:touch;
  }
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:0 0 auto}
  .copy{justify-content:center;text-align:center}
  .float{top:auto;bottom:74px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .trust-item{opacity:1;transform:none}
  .tour-hint::before{animation:none}
  .filters button.flash{animation:none}
  .track{scroll-behavior:auto}
  .hslide,.hslide.active{transform:none}
  .logo-svg .lg-a,.logo-svg .lg-b,.logo-svg .lg-l,.logo-svg .lg-r,.logo-svg .lg-t,.logo-img{animation:none;opacity:1;transform:none}
  .lg-shine{display:none}
  .htxt>*,.htxt.active>*{opacity:1;transform:none;animation:none}
  .dot.active i{transition:none;width:100%}
}

/* ---------- split hero on narrow screens ----------
   The copy plate is ~730px wide. Above 1150px that still leaves a good third of
   the frame showing bare photo. Below it the plate would swallow the whole
   picture, so the hero splits instead: a clean photo band with ZERO overlay on
   top, and the copy underneath on solid dark. Nothing is ever laid over the
   photograph. Placed last so it wins over the earlier hero breakpoints. */

/* ---------- real brand colours on the social buttons ---------- */
.nav-social a.s-fb,.social a.s-fb{background:#1877f2;border-color:#1877f2}
.nav-social a.s-fb:hover,.social a.s-fb:hover{background:#0c63d4;border-color:#0c63d4}
.nav-social a.s-li,.social a.s-li{background:#0a66c2;border-color:#0a66c2}
.nav-social a.s-li:hover,.social a.s-li:hover{background:#094fa0;border-color:#094fa0}
.nav-social a.s-ms,.social a.s-ms{background:#6264a7;border-color:#6264a7}
.nav-social a.s-ms:hover,.social a.s-ms:hover{background:#4f5195;border-color:#4f5195}
.nav-social a.s-ig,.social a.s-ig{
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color:#d6249f;
}
.nav-social a.s-ig:hover,.social a.s-ig:hover{filter:brightness(.93)}
.nav-social a.s-fb svg,.nav-social a.s-ig svg,.nav-social a.s-li svg,.nav-social a.s-ms svg,
.social a.s-fb svg,.social a.s-ig svg,.social a.s-li svg,.social a.s-ms svg{fill:#fff}
.nav-social a.s-fb:hover svg,.nav-social a.s-ig:hover svg,
.nav-social a.s-li:hover svg,.nav-social a.s-ms:hover svg{fill:#fff}

/* ---------- floating contact rail: real brand colours ---------- */
.float a.f-ms{background:#6264a7}
.float a.f-ms:hover{background:#4f5195}
.float a.f-wa{background:#25d366}
.float a.f-wa:hover{background:#1eb455}
.float a.f-mail{background:var(--accent)}
.float a.f-mail:hover{background:var(--accent-dk,#d97a10)}
.float a:hover{width:52px}

/* ---------- 404 ----------
   Kept on brand rather than a bare WordPress error: the point of the page is to
   give a lost visitor a route back into the site, so the links do the work. */
.err404{padding:clamp(70px,10vh,120px) 0;text-align:center}
.err404 h1{font-size:clamp(30px,4.4vw,54px);letter-spacing:-.03em;margin:14px 0 0}
.err404>.wrap>p{max-width:560px;margin:16px auto 0;color:var(--muted);font-size:17px}
.err-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.err-links{margin-top:56px}
.err-links h2{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.err-links ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.err-links a{
  display:inline-flex;padding:10px 18px;border:1px solid var(--line);border-radius:999px;
  font-size:14px;font-weight:600;color:var(--ink);background:#fff;transition:.22s;
}
.err-links a:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px)}
.err-search{margin-top:40px}
.err-search form{display:flex;gap:10px;max-width:420px;margin:0 auto}
.err-search input[type=search]{
  flex:1;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:15px;background:#fff;
}
.err-search input[type=search]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.err-search input[type=submit],.err-search button{
  padding:13px 22px;border:0;border-radius:var(--r-sm);background:var(--accent);
  color:var(--btn-ink);font:inherit;font-weight:700;cursor:pointer;
}
@media(max-width:620px){
  .err-links a{padding:9px 15px;font-size:13px}
}

/* ==========================================================================
   Touch devices (phones and tablets)
   Hover does not exist here, so anything that only appeared on hover was
   invisible but still taking up space — that was the empty gap under every
   service card. These rules make the site behave for fingers rather than
   for a mouse pointer.
   ========================================================================== */
@media (hover: none) {

  /* the "read more" link was hover-only: show it, and the card stops
     reserving room for something that never appears */
  .card .more{opacity:1;transform:none}

  /* finger-sized hit areas — 44px is the Apple/Android minimum */
  .menu > li > a,
  .submenu a,
  footer li a,
  .err-links a,
  .filters button,
  .center a{min-height:44px;display:flex;align-items:center}
  footer li{padding:0}
  .center a{justify-content:center}
  .rev-dots button{min-width:26px;min-height:26px}
  .tour-btn{min-height:40px}
  .nav-social a{width:42px;height:42px}
  .social a{width:44px;height:44px}
  .dot{min-width:34px;min-height:34px}

  /* the contact rail sat on top of the content on a narrow screen */
  .float{top:auto;bottom:96px;transform:none;border-radius:10px 0 0 10px}
  .float a{width:40px;height:40px}
  .float a:hover{width:40px}
  .float a svg{width:17px;height:17px}
  .top{bottom:22px}
}

@media (max-width: 620px) {
  /* on a phone the rail becomes a single row along the bottom edge, out of
     the way of the text instead of floating over it */
  .float{
    top:auto;bottom:0;right:0;left:0;flex-direction:row;border-radius:0;
    box-shadow:0 -6px 20px rgba(10,12,17,.16);
  }
  .float a{flex:1;height:46px;width:auto}
  .float a + a{border-top:0;border-left:1px solid rgba(255,255,255,.22)}
  .top{bottom:60px;right:14px}
  /* stop the last section hiding behind the new bottom bar */
  body{padding-bottom:46px}
}

/* ==========================================================================
   Phone hero
   On a phone the copy was filling almost the whole hero — on a 360px screen
   only about 110px of photograph was left showing. Everything below trims the
   type and the controls so the picture gets real room, without dropping any
   of the content.
   ========================================================================== */
@media (max-width: 620px) {

  /* headline scales with the screen instead of sitting at the 33px desktop floor */
  .htitle{font-size:clamp(24px,7vw,31px);line-height:1.12;letter-spacing:-.02em}

  /* the eyebrow used to wrap onto two lines on a 320px screen */
  .htxt .eyebrow{font-size:10px;letter-spacing:.16em}

  .htxt p{font-size:14.5px;line-height:1.5;margin-top:12px;max-width:100%}

  /* side by side rather than two stacked full-width buttons — saves a whole row */
  .hero-btns{gap:10px;margin-top:20px;flex-wrap:nowrap}
  .hero-btns .btn{width:auto;flex:1 1 0;padding:13px 10px;font-size:14px;justify-content:center;white-space:nowrap}

  /* the figures go back to one compact row */
  .hero-meta{display:flex;flex-wrap:nowrap;margin-top:16px;padding:8px 2px;width:100%}
  .hero-meta > div{flex:1;padding:0 8px;min-width:0}
  .hero-meta b{font-size:13px}
  .hero-meta > div > span{font-size:8.5px;letter-spacing:.08em;display:block;line-height:1.25}
  .hero-meta > div:nth-child(odd)::before{display:block}

  .hero-in{padding:22px 0 30px}
}

/* very small handsets: one more step down so the photo still reads */
@media (max-width: 360px) {
  .htitle{font-size:23px}
  .htxt p{font-size:13.5px}
  .hero-meta b{font-size:12px}
  .hero-meta > div > span{font-size:8px}
}