/* ==========================================================================
   Metaglobe Trading (Pvt) Ltd — site styles
   Palette: deep plum-charcoal + warm bone + copper, with a violet spark
            lifted from the globe in the logo.
   Type:    Archivo (display) / Inter Tight (body)
            To try another display face, change --f-display below AND the
            Google Fonts <link> in build.py + index.html. Nothing else.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* neutrals — plum-warm, deliberately no blue in them */
  --ink:        #2A1F33;
  --ink-2:      #3B2D48;
  --ink-3:      #4E3D5D;
  --slate:      #7A6B86;
  --mist:       #A99BB3;
  --shell:      #F8F4ED;
  --sand:       #EFE6D8;
  --sand-2:     #E0D3BF;
  --white:      #FFFFFF;

  /* brand — the violet spark keeps the token name --teal so the
     component rules below stay readable; it is the logo's purple. */
  --teal:       #7B3FA8;
  --teal-2:     #9A55CC;
  --teal-soft:  #EDE2F5;
  --orange:     #C9762F;
  --orange-2:   #E39B54;
  --orange-soft:#F7E8D8;

  /* logo globe gradient — decorative use only */
  --globe-a:    #22B4F2;
  --globe-b:    #6C5BE0;
  --globe-c:    #A93BD8;

  /* type */
  --f-display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-body:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* space + shape */
  --r-sm: 8px;
  --r:    16px;
  --r-lg: 26px;
  --r-xl: 40px;
  --shadow-sm: 0 2px 8px rgba(42,31,51,.06);
  --shadow:    0 14px 40px -18px rgba(42,31,51,.35);
  --shadow-lg: 0 40px 90px -40px rgba(42,31,51,.55);
  --maxw: 1220px;
  --gut: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(16px,.55vw + 14.4px,17.5px);
  line-height:1.72;
  color:var(--ink-2);
  background:var(--shell);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block; height:auto}
/* An SVG carrying only a viewBox stretches to fill its container, so a single
   missed rule turns a 30px icon into a full-width graphic. Default every SVG to
   icon size; anything that needs to be bigger (.route-map) overrides it. */
svg{display:block; max-width:100%; width:24px; height:24px; flex:none}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:700; line-height:1.12; letter-spacing:-.028em; color:var(--ink)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--orange); color:#fff}

/* ---------- Type scale ---------- */
.h-hero{font-size:clamp(2.6rem,6.1vw,5.1rem); letter-spacing:-.035em; font-weight:700; line-height:1.03}
.h1{font-size:clamp(2rem,3.8vw,3.25rem); font-weight:700; line-height:1.1}
.h2{font-size:clamp(1.7rem,2.9vw,2.6rem); font-weight:700}
.h3{font-size:clamp(1.2rem,1.6vw,1.5rem); letter-spacing:-.018em; font-weight:700}
.h4{font-size:1.06rem; font-family:var(--f-body); font-weight:700; letter-spacing:-.005em}
.lead{font-size:clamp(1.04rem,1.2vw,1.22rem); line-height:1.66; color:var(--ink-3)}
.small{font-size:.875rem; line-height:1.6}
.muted{color:var(--slate)}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.wrap-wide{max-width:1500px}
.section{padding-block:clamp(64px,8.5vw,132px)}
.section-tight{padding-block:clamp(48px,5.5vw,84px)}
.grid{display:grid; gap:clamp(20px,2.4vw,34px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,84px); align-items:center}
.stack-sm{display:flex; flex-direction:column; gap:14px}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.measure{max-width:62ch}
.measure-sm{max-width:48ch}

@media(max-width:960px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:34px}
}
@media(max-width:600px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
}

/* ---------- Eyebrow / rule ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.62em;
  font-size:.71rem; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--teal);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--teal-2));
}
.eyebrow.on-dark{color:var(--orange-2)}
.eyebrow.on-dark::before{background:linear-gradient(90deg,var(--orange),transparent)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 1.65em; border-radius:100px;
  background:var(--bg); color:var(--fg);
  font-weight:700; font-size:.94rem; letter-spacing:.005em;
  isolation:isolate; overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), color .3s;
  box-shadow:0 1px 2px rgba(42,31,51,.14);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(105deg,var(--orange),var(--orange-2));
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.btn:hover{transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(201,118,47,.72)}
.btn:hover::after{transform:translateY(0)}
.btn .arw{transition:transform .45s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
.btn-accent{--bg:linear-gradient(105deg,var(--orange),var(--orange-2))}
.btn-accent::after{background:var(--ink)}
.btn-accent:hover{box-shadow:0 16px 30px -14px rgba(42,31,51,.6)}
.btn-ghost{--bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(42,31,51,.18)}
.btn-ghost:hover{--fg:#fff}
.btn-light{--bg:#fff; --fg:var(--ink)}
.btn-outline-light{--bg:transparent; --fg:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}

.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:700; font-size:.92rem; color:var(--teal);
  border-bottom:1.5px solid transparent; padding-bottom:2px;
  transition:color .3s, border-color .3s, gap .3s var(--ease-out);
}
.link-arrow:hover{color:var(--orange); border-color:var(--orange); gap:.75em}

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:120;
  padding-block:clamp(14px,1.6vw,22px);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s;
}
.hdr::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(26,17,33,.55),transparent);
  opacity:1; transition:opacity .5s;
}
.hdr.is-stuck{
  background:rgba(248,244,237,.92);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 rgba(42,31,51,.09), 0 12px 30px -26px rgba(42,31,51,.6);
  padding-block:10px;
}
.hdr.is-stuck::before{opacity:0}
.hdr-inner{display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{position:relative; display:flex; align-items:center; flex-shrink:0}
.brand .lg{
  height:clamp(46px,4.4vw,60px); width:auto;
  transition:height .5s var(--ease), opacity .45s var(--ease);
}
.hdr.is-stuck .brand .lg{height:44px}
/* two artwork variants: white wordmark over the dark hero, navy once the bar goes light */
.brand .lg-dark{position:absolute; inset:0 auto 0 0; opacity:0}
.hdr.is-stuck .brand .lg-light,
.hdr.on-light .brand .lg-light{opacity:0}
.hdr.is-stuck .brand .lg-dark,
.hdr.on-light .brand .lg-dark{opacity:1}

.nav{display:flex; align-items:center; gap:clamp(4px,1.2vw,10px)}
.nav a{
  position:relative; padding:.5em .82em; border-radius:100px;
  font-size:.9rem; font-weight:600; color:rgba(255,255,255,.82);
  transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:.82em; right:.82em; bottom:.28em; height:2px;
  background:var(--orange); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff}
.hdr.is-stuck .nav a,.hdr.on-light .nav a{color:var(--ink-3)}
.hdr.is-stuck .nav a:hover,.hdr.is-stuck .nav a[aria-current="page"],
.hdr.on-light .nav a:hover,.hdr.on-light .nav a[aria-current="page"]{color:var(--ink)}
.hdr .btn{padding:.72em 1.25em; font-size:.85rem}
.hdr:not(.is-stuck):not(.on-light) .btn-ghost{--fg:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.38)}

.burger{
  display:none; width:44px; height:44px; border-radius:12px; position:relative;
  background:rgba(255,255,255,.1);
}
.hdr.is-stuck .burger,.hdr.on-light .burger{background:rgba(42,31,51,.06)}
.burger span{
  position:absolute; left:12px; width:20px; height:2px; border-radius:2px; background:#fff;
  transition:transform .4s var(--ease-out), opacity .25s, background .4s;
}
.hdr.is-stuck .burger span,.hdr.on-light .burger span{background:var(--ink)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg); background:#fff}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg); background:#fff}

@media(max-width:1000px){
  .nav-desk{display:none}
  .burger{display:block}
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:115;
  background:linear-gradient(165deg,var(--ink),#3A2450 58%,#4A2A5E);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px var(--gut) 40px;
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .75s var(--ease-out);
  visibility:hidden;
}
body.menu-open .drawer{clip-path:circle(155% at calc(100% - 44px) 44px); visibility:visible}
.drawer a.d-link{
  display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(1.75rem,6.6vw,2.8rem);
  color:#fff; padding:.16em 0; letter-spacing:-.03em;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
body.menu-open .drawer a.d-link{opacity:1; transform:none}
.drawer a.d-link:hover{color:var(--orange-2)}
.drawer a.d-link:nth-child(1){transition-delay:.14s}
.drawer a.d-link:nth-child(2){transition-delay:.19s}
.drawer a.d-link:nth-child(3){transition-delay:.24s}
.drawer a.d-link:nth-child(4){transition-delay:.29s}
.drawer a.d-link:nth-child(5){transition-delay:.34s}
.drawer a.d-link:nth-child(6){transition-delay:.39s}
.drawer-foot{
  margin-top:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.6); font-size:.9rem;
  opacity:0; transition:opacity .5s .44s;
}
body.menu-open .drawer-foot{opacity:1}
.drawer-foot a{color:#fff; font-weight:700}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:min(100svh,940px);
  display:flex; align-items:flex-end;
  padding-block:170px clamp(52px,7vw,96px);
  background:var(--ink); overflow:hidden; isolation:isolate;
}
.hero-media{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.12);
  animation:kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.1) translate3d(-1%,0,0)}
  to{transform:scale(1.2) translate3d(2%,-2%,0)}
}
/* the photography is cool-toned; this pulls it into the plum palette
   so the hero doesn't read as a blue site with a plum footer */
.hero-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(150deg,#4A2A5E,#2A1F33 55%,#6B3B4A);
  mix-blend-mode:color; opacity:.72;
}
.hero-media img{filter:saturate(.82) contrast(1.04)}
.hero-media::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg,rgba(26,17,33,.62) 0%,rgba(26,17,33,.26) 32%,rgba(26,17,33,.9) 88%),
    linear-gradient(100deg,rgba(42,31,51,.8),transparent 64%);
}
.hero-inner{position:relative; width:100%}
.hero h1{color:#fff; max-width:16ch}
.hero h1 .accent{
  background:linear-gradient(100deg,var(--orange-2),#FFCB8E);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{color:rgba(255,255,255,.82); max-width:52ch; margin-top:1.35rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  margin-top:clamp(38px,5vw,62px); padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.7); font-size:.83rem; font-weight:600; letter-spacing:.02em;
}
.hero-badges span{display:inline-flex; align-items:center; gap:.55em}
.hero-badges .dot{width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none}

/* scroll cue */
.scroll-cue{
  position:absolute; right:var(--gut); bottom:clamp(52px,7vw,96px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.55); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  writing-mode:vertical-rl;
}
.scroll-cue i{
  display:block; width:1px; height:56px; background:rgba(255,255,255,.28); position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--orange);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
@media(max-width:900px){.scroll-cue{display:none}}

/* page hero (inner pages) */
.phero{
  position:relative; background:var(--ink); overflow:hidden; isolation:isolate;
  padding-block:clamp(140px,16vw,210px) clamp(56px,7vw,92px);
}
.phero-media{position:absolute; inset:0; z-index:-2}
.phero-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.06)}
.phero-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(150deg,#4A2A5E,#2A1F33 55%,#6B3B4A);
  mix-blend-mode:color; opacity:.72;
}
.phero-media img{filter:saturate(.82) contrast(1.04)}
.phero-media::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(26,17,33,.78),rgba(26,17,33,.5) 45%,rgba(26,17,33,.92));
}
.phero h1{color:#fff; max-width:18ch}
.phero p{color:rgba(255,255,255,.8); max-width:56ch; margin-top:1.1rem}
.crumbs{display:flex; gap:.5em; font-size:.78rem; color:rgba(255,255,255,.55); margin-bottom:1.2rem; letter-spacing:.04em}
.crumbs a:hover{color:var(--orange-2)}

/* ---------- Ticker ---------- */
.ticker{
  background:var(--ink); color:rgba(255,255,255,.5);
  padding-block:15px; overflow:hidden; white-space:nowrap;
  border-block:1px solid rgba(255,255,255,.08);
}
.ticker-track{display:inline-flex; gap:0; animation:slide 46s linear infinite; will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  display:inline-flex; align-items:center; gap:2.4rem; padding-right:2.4rem;
  font-family:var(--f-display); font-size:clamp(.95rem,1.5vw,1.2rem); letter-spacing:.02em;
}
.ticker-track span::after{content:"◆"; color:var(--orange); font-size:.5em; opacity:.8}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Cards ---------- */
.card{
  position:relative; background:var(--white); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,36px);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(42,31,51,.06);
  overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s;
}
.card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--teal-2));
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.card:hover{transform:translateY(-7px); box-shadow:var(--shadow); border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .num{
  font-family:var(--f-display); font-size:2.5rem; font-weight:700; line-height:1; letter-spacing:-.035em;
  color:var(--sand-2); margin-bottom:.5rem; display:block;
  transition:color .4s;
}
.card:hover .num{color:var(--orange)}
.card h3{margin-bottom:.55rem}
.card p{color:var(--slate); font-size:.96rem}

.ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--teal-soft); color:var(--teal); margin-bottom:1.15rem;
  transition:background .45s var(--ease), color .45s, transform .55s var(--ease-out);
}
.card:hover .ico{background:var(--orange); color:#fff; transform:rotate(-6deg) scale(1.06)}
.ico svg{width:24px; height:24px; stroke-width:1.7}

/* product cards */
.pcard{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink); aspect-ratio:4/5; display:flex; align-items:flex-end;
  box-shadow:var(--shadow-sm);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.pcard img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out), filter .6s;
  filter:saturate(1.02);
}
.pcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 32%,rgba(26,17,33,.28) 55%,rgba(26,17,33,.92) 100%);
  transition:opacity .5s;
}
.pcard-body{position:relative; z-index:2; padding:clamp(20px,2.2vw,30px); color:#fff; width:100%}
.pcard-body h3{color:#fff; font-size:1.2rem; line-height:1.2}
.pcard-body .tag{
  display:block; font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-2); margin-bottom:.5rem;
}
.pcard-body p{
  color:rgba(255,255,255,.78); font-size:.9rem; margin-top:.5rem; margin-bottom:0;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease-out), opacity .45s, margin-top .5s;
}
.pcard:hover{transform:translateY(-9px); box-shadow:var(--shadow-lg)}
.pcard:hover img{transform:scale(1.09)}
.pcard:hover .pcard-body p{max-height:9em; opacity:1}
.pcard:focus-within .pcard-body p{max-height:9em; opacity:1}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,32px)}
.stat{padding:clamp(20px,2.4vw,30px) 0; border-top:2px solid rgba(42,31,51,.1)}
.stat .n{
  font-family:var(--f-display); font-size:clamp(2.25rem,4.3vw,3.45rem); font-weight:700; line-height:1;
  color:var(--ink); letter-spacing:-.03em; display:flex; align-items:baseline; gap:.06em;
}
.stat .n .suf{color:var(--orange); font-size:.6em}
.stat .n .word{color:var(--slate); font-size:.34em; font-family:var(--f-body);
  font-weight:700; letter-spacing:.02em; margin-left:.3em}
.on-ink .stat .n .word{color:rgba(255,255,255,.5)}
.stat .l{margin-top:.6rem; font-size:.86rem; color:var(--slate); font-weight:600; letter-spacing:.02em}
.on-ink .stat{border-color:rgba(255,255,255,.16)}
.on-ink .stat .n{color:#fff}
.on-ink .stat .l{color:rgba(255,255,255,.6)}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Dark band ---------- */
.band-ink{
  position:relative; background:var(--ink); color:rgba(255,255,255,.78);
  overflow:hidden; isolation:isolate;
}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink::before{
  content:""; position:absolute; z-index:-1; width:760px; height:760px; border-radius:50%;
  top:-38%; right:-16%;
  background:radial-gradient(circle,rgba(34,180,242,.2),rgba(169,59,216,.12) 42%,transparent 68%);
  filter:blur(10px);
}
.band-ink::after{
  content:""; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%;
  bottom:-32%; left:-12%;
  background:radial-gradient(circle,rgba(201,118,47,.24),transparent 66%);
}
.band-sand{background:var(--sand)}
.band-teal{background:var(--teal); color:rgba(255,255,255,.85)}
.band-teal h2{color:#fff}

/* ---------- Wave divider ---------- */
.wave{display:block; width:100%; height:auto; line-height:0}
.wave svg{display:block; width:100%; height:clamp(40px,5vw,86px)}
.wave path{animation:waveShift 14s ease-in-out infinite alternate}
.wave path:nth-child(2){animation-duration:19s; animation-direction:alternate-reverse}
@keyframes waveShift{from{transform:translateX(0)}to{transform:translateX(-3.5%)}}

/* ---------- Media / figures ---------- */
.figure{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.figure img{width:100%; transition:transform 1.3s var(--ease-out)}
.figure:hover img{transform:scale(1.045)}
.figure-tall{aspect-ratio:4/5}
.figure-tall img{height:100%; object-fit:cover}
.figure-wide{aspect-ratio:16/10}
.figure-wide img{height:100%; object-fit:cover}

.media-stack{position:relative}
.media-stack .figure-2{
  position:absolute; right:-8%; bottom:-11%; width:52%;
  border:8px solid var(--shell); border-radius:var(--r-lg);
}
@media(max-width:700px){
  .media-stack .figure-2{position:static; width:100%; margin-top:16px; border:0}
}

.badge-float{
  position:absolute; z-index:3; background:var(--white); border-radius:20px;
  padding:16px 20px; box-shadow:var(--shadow); display:flex; gap:13px; align-items:center;
  max-width:250px;
}
.badge-float .bi{width:38px; height:38px; border-radius:11px; background:var(--orange); color:#fff; display:grid; place-items:center; flex:none}
.badge-float .bi svg{width:19px; height:19px}
.badge-float b{display:block; font-size:.9rem; color:var(--ink); line-height:1.3}
.badge-float span{font-size:.76rem; color:var(--slate)}

/* ---------- Timeline ---------- */
.tl{position:relative; padding-left:0}
.tl::before{
  content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--orange),var(--teal-2),transparent);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.6s var(--ease-out);
}
.tl.in::before{transform:scaleY(1)}
.tl li{position:relative; padding:0 0 clamp(26px,3vw,40px) 62px}
.tl li:last-child{padding-bottom:0}
.tl li .dot{
  position:absolute; left:8px; top:4px; width:24px; height:24px; border-radius:50%;
  background:var(--shell); border:2px solid var(--orange); display:grid; place-items:center;
}
.tl li .dot::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--orange)}
.tl li h3{font-size:1.14rem; margin-bottom:.35rem}
.tl li p{color:var(--slate); font-size:.95rem}
.tl li .yr{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:.3rem}
.band-ink .tl li p{color:rgba(255,255,255,.66)}
.band-ink .tl li .dot{background:var(--ink)}
.band-ink .tl li .yr{color:var(--orange-2)}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid rgba(42,31,51,.12)}
.acc-item{border-bottom:1px solid rgba(42,31,51,.12)}
.acc-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:1.25em 0; text-align:left; font-weight:700; font-size:1.03rem; color:var(--ink);
  transition:color .3s;
}
.acc-q:hover{color:var(--orange)}
.acc-q .pm{position:relative; width:22px; height:22px; flex:none}
.acc-q .pm::before,.acc-q .pm::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:currentColor; border-radius:2px;
  transition:transform .45s var(--ease-out);
}
.acc-q .pm::after{transform:rotate(90deg)}
.acc-item.open .acc-q .pm::after{transform:rotate(0)}
.acc-item.open .acc-q{color:var(--orange)}
.acc-a{overflow:hidden; height:0; transition:height .5s var(--ease-out)}
.acc-a > div{padding:0 0 1.5em; color:var(--slate); max-width:70ch}

/* ---------- Logo mark / globe animation ---------- */
.globe-deco{
  position:absolute; pointer-events:none; opacity:.14; z-index:-1;
  animation:spin 60s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Map / coverage ---------- */
.coverage{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center}
@media(max-width:900px){.coverage{grid-template-columns:1fr}}
.route-map{width:100%; height:auto; max-height:min(82vh,820px); overflow:visible}
.route-map .d{
  fill:var(--sand); stroke:rgba(42,31,51,.16); stroke-width:.7;
  transition:fill .45s var(--ease);
}
.route-map .d:hover{fill:var(--sand-2)}
.route-map .hl-orange{fill:var(--orange-soft); stroke:rgba(201,118,47,.5); stroke-width:1.1}
.route-map .hl-teal{fill:var(--teal-soft); stroke:rgba(123,63,168,.5); stroke-width:1.1}
.route-map .hl-ink{fill:#E3DBE8; stroke:rgba(42,31,51,.32); stroke-width:1.1}
.route-map .districts{
  filter:drop-shadow(0 12px 22px rgba(42,31,51,.13));
  opacity:0; transform:translateY(14px);
  animation:mapIn 1.1s var(--ease-out) .15s forwards;
}
@keyframes mapIn{to{opacity:1; transform:none}}
.route-map .city{
  font-family:var(--f-body); font-size:17px; font-weight:800; fill:var(--ink);
  paint-order:stroke; stroke:var(--shell); stroke-width:4px; stroke-linejoin:round;
}
.route-map .role{
  font-family:var(--f-body); font-size:13px; font-weight:600; fill:var(--slate);
  paint-order:stroke; stroke:var(--shell); stroke-width:3.5px; stroke-linejoin:round;
}
.band-sand .route-map .city{stroke:var(--sand)}
.band-sand .route-map .role{stroke:var(--sand)}
.route-map .route{
  fill:none; stroke:var(--orange); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:5 7; animation:dashflow 3.2s linear infinite;
}
.route-map .route-2{stroke:var(--teal-2); animation-duration:2.6s}
@keyframes dashflow{to{stroke-dashoffset:-44}}
.route-map .pulse{transform-box:fill-box; transform-origin:center; animation:pulse 2.6s var(--ease) infinite}
.route-map .pulse.d2{animation-delay:.7s}
.route-map .pulse.d3{animation-delay:1.4s}
@keyframes pulse{0%{opacity:.85; r:4}70%{opacity:0; r:17}100%{opacity:0; r:17}}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:.45em; margin-bottom:1.15rem}
.field label{font-size:.82rem; font-weight:700; color:var(--ink-3); letter-spacing:.02em}
.field input,.field select,.field textarea{
  font:inherit; font-size:.97rem; color:var(--ink);
  padding:.86em 1.05em; border-radius:13px;
  border:1.5px solid rgba(42,31,51,.14); background:var(--white);
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.field textarea{resize:vertical; min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--teal-2);
  box-shadow:0 0 0 4px rgba(18,144,134,.14);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:.8rem; color:var(--slate); margin-top:.9rem}

/* ---------- Contact tiles ---------- */
.ctile{
  display:flex; gap:16px; align-items:flex-start; padding:clamp(20px,2.3vw,28px);
  background:var(--white); border-radius:var(--r); border:1px solid rgba(42,31,51,.07);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.ctile:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.ctile .ci{width:42px; height:42px; border-radius:12px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; flex:none}
.ctile .ci svg{width:20px; height:20px}
.ctile b{display:block; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); margin-bottom:.28rem}
.ctile a,.ctile span{color:var(--ink); font-weight:600; font-size:1rem; line-height:1.5}
.ctile a:hover{color:var(--orange)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; border-radius:var(--r-xl); overflow:hidden; isolation:isolate;
  background:linear-gradient(120deg,var(--ink) 0%,#452A5C 52%,#6B3B7A 100%);
  padding:clamp(40px,6vw,84px) clamp(28px,5vw,72px);
  color:rgba(255,255,255,.8);
}
.cta-band h2{color:#fff}
.cta-band::before{
  content:""; position:absolute; z-index:-1; inset:auto -10% -60% auto; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,118,47,.4),transparent 65%);
  animation:float 12s ease-in-out infinite alternate;
}
@keyframes float{to{transform:translate3d(-40px,-30px,0) scale(1.12)}}

/* ---------- Footer ---------- */
.ftr{background:var(--ink); color:rgba(255,255,255,.6); padding-block:clamp(52px,6vw,84px) 30px}
.ftr h4{color:#fff; font-family:var(--f-body); font-size:.76rem; letter-spacing:.15em;
  text-transform:uppercase; margin-bottom:1.1rem; font-weight:800}
.ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(28px,3.6vw,54px)}
@media(max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr a{transition:color .3s, padding-left .3s}
.ftr li a:hover{color:var(--orange-2); padding-left:5px}
.ftr li{margin-bottom:.6em; font-size:.94rem}
.ftr .logo-f{height:64px; width:auto; margin-bottom:1.2rem}
.ftr-bottom{
  margin-top:clamp(38px,4.5vw,60px); padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-size:.83rem; color:rgba(255,255,255,.45);
}
.ftr-bottom a:hover{color:#fff}
.soc{display:flex; gap:10px; margin-top:1.3rem}
.soc a{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff;
  transition:background .35s, transform .45s var(--ease-out);
}
.soc a:hover{background:var(--orange); transform:translateY(-3px)}
.soc svg{width:17px; height:17px}

/* ---------- Reveal animations ---------- */
[data-rv]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease-out), transform .95s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-rv="left"]{transform:translateX(-34px)}
[data-rv="right"]{transform:translateX(34px)}
[data-rv="scale"]{transform:scale(.94)}
[data-rv="clip"]{opacity:1; transform:none; clip-path:inset(0 0 100% 0)}
[data-rv].in{opacity:1; transform:none; clip-path:inset(0 0 0 0)}

.split-line{display:block; overflow:hidden}
.split-line > span{
  display:block; transform:translateY(105%);
  transition:transform 1s var(--ease-out); transition-delay:var(--d,0ms);
}
.in .split-line > span,.split-line.in > span{transform:none}

/* ---------- Utility ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.42em 1em; border-radius:100px; font-size:.78rem; font-weight:700;
  background:var(--orange-soft); color:#B7500F; letter-spacing:.02em;
}
.chip-teal{background:var(--teal-soft); color:var(--teal)}
.chip-ghost{background:rgba(255,255,255,.1); color:#fff}
.rule{height:1px; background:rgba(42,31,51,.1); border:0; margin:0}
.pill-list{display:flex; flex-wrap:wrap; gap:9px}
.tick{display:flex; gap:.75em; align-items:flex-start; margin-bottom:.85em; font-size:.97rem}
.tick svg{width:20px; height:20px; flex:none; color:var(--orange); margin-top:.18em}
.band-ink .tick{color:rgba(255,255,255,.75)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:#fff; color:var(--ink); padding:12px 18px; border-radius:10px}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-rv]{opacity:1 !important; transform:none !important; clip-path:none !important}
  .split-line > span{transform:none !important}
  .hero-media img{transform:scale(1.05)}
}

/* ---------- WhatsApp ---------- */
/* The green is deliberate: it is the one colour people scan for. Everything
   around it (ring, shadow, label) is pulled back into the plum palette. */
.wa-fab{
  position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px);
  z-index:110; display:flex; align-items:center; gap:0;
  height:58px; padding:0 5px 0 0; border-radius:100px;
  background:#25D366; color:#fff;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.5), 0 4px 12px rgba(42,31,51,.28);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.9);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out),
             visibility .5s, box-shadow .4s;
}
.wa-fab.show{opacity:1; visibility:visible; transform:none}
.wa-fab:hover{box-shadow:0 16px 40px -8px rgba(37,211,102,.7), 0 6px 16px rgba(42,31,51,.34)}
.wa-fab .wa-ico{
  width:58px; height:58px; display:grid; place-items:center; flex:none;
  border-radius:50%; position:relative;
}
.wa-fab .wa-ico svg{width:30px; height:30px}
.wa-fab .wa-ico::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:waPing 2.8s var(--ease) infinite;
}
@keyframes waPing{
  0%{transform:scale(1); opacity:.7}
  70%,100%{transform:scale(1.65); opacity:0}
}
.wa-fab .wa-label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:.92rem; font-weight:700; letter-spacing:.005em;
  transition:max-width .45s var(--ease-out), padding .45s var(--ease-out);
}
.wa-fab:hover .wa-label,
.wa-fab:focus-visible .wa-label{max-width:190px; padding-right:20px}
@media(max-width:600px){
  .wa-fab{height:54px}
  .wa-fab .wa-ico{width:54px; height:54px}
  .wa-fab .wa-ico svg{width:28px; height:28px}
}
@media(prefers-reduced-motion:reduce){
  .wa-fab .wa-ico::after{display:none}
}

/* WhatsApp-green variant of .btn, for the contact page and CTA bands */
.btn-wa{--bg:#25D366; --fg:#fff; box-shadow:0 1px 2px rgba(42,31,51,.18)}
.btn-wa::after{background:#1EB855}
.btn-wa:hover{box-shadow:0 16px 30px -14px rgba(37,211,102,.7)}
.btn-wa svg{width:19px; height:19px; flex:none}

.ctile .ci.ci-wa{background:#DFF7E7; color:#1EA854}