/* ==========================================================================
   Ginger Tec Solutions
   One direction: signal brought down from the sky and landed here in Solwezi.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --canvas:#f5f7fb;
  --canvas-deep:#0b1220;
  --canvas-deep-2:#0e1729;
  --panel:#ffffff;
  --panel-deep:#111c30;
  --accent:#1a56db;
  --accent-hover:#1544ad;
  --accent-soft:#e8effc;
  --accent-muted:#c7d7f7;
  --copper:#b4541f;
  --copper-light:#d9762f;
  --copper-soft:#f6e7db;
  --text-primary:#0f1b2d;
  --text-secondary:#4a5a72;
  --text-on-deep:#e9eefa;
  --text-on-deep-2:#9aabc7;
  --line:#dce3ee;
  --line-deep:#22304a;

  --display:'Sora',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono','Courier New',monospace;

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

  --shell:1200px;
  --pad:clamp(20px,5vw,40px);

  --tshadow:0 1px 2px rgba(5,8,18,.95),0 3px 12px rgba(5,8,18,.78),0 10px 44px rgba(5,8,18,.8);
  --shadow-card:0 1px 2px rgba(15,27,45,.05),0 12px 32px -12px rgba(15,27,45,.14);
  --shadow-card-hi:0 2px 4px rgba(15,27,45,.06),0 26px 54px -18px rgba(26,86,219,.30);
  --radius:14px;
}

/* ---------- Reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth}
body{
  overflow-x:hidden;overflow-x:clip;
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- The fixed environment layer ---------- */
/* One place, not stacked sections. A slow cool drift behind everything. */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 88% -8%,rgba(26,86,219,.075),transparent 62%),
    radial-gradient(760px 620px at 2% 42%,rgba(180,84,31,.05),transparent 60%),
    radial-gradient(900px 700px at 60% 108%,rgba(26,86,219,.06),transparent 62%);
  animation:envdrift 90s var(--ease) -30s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2.2%,1.6%,0) scale(1.06)}
}
.page{position:relative;z-index:1}

/* ---------- The signature: the signal line ---------- */
/* A trunk that draws itself down the page and spurs into each section. */
.rail{
  position:fixed;left:max(14px,calc((100vw - var(--shell))/2 - 30px));top:0;
  width:22px;height:100vh;z-index:3;pointer-events:none;color:var(--accent);
}
.rail__track,.rail__fill{position:absolute;left:10px;width:1.5px;border-radius:2px}
.rail__track{top:0;bottom:0;background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent)}
.rail__fill{
  top:0;height:100%;background:linear-gradient(180deg,var(--accent),var(--accent-muted));
  transform-origin:top center;transform:scaleY(var(--rail,0));opacity:.85;
}
.rail__dot{
  position:absolute;left:6.2px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);top:calc(var(--rail,0) * 100%);margin-top:-4.5px;
  box-shadow:0 0 0 3px rgba(26,86,219,.16),0 0 12px rgba(26,86,219,.85);
}
.rail__node{
  position:absolute;left:7.7px;width:6px;height:6px;border-radius:50%;
  background:var(--line);margin-top:-3px;
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease);
}
.rail__node.hit{background:var(--accent);box-shadow:0 0 9px rgba(26,86,219,.75)}
@media (max-width:1180px){.rail{display:none}}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(245,247,251,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.hdr.stuck{border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(15,27,45,.5)}
.hdr__in{display:flex;align-items:center;gap:18px;height:74px}

/* Every page opens on a dark section, and the header floats over it rather
   than sitting on top of it as a separate bar. The negative margin is what
   puts the artwork behind the header; the sections below compensate with
   their own top padding. */
main{margin-top:-74px}

/* over a dark top section the bar goes dark too, or it reads as a pale slab */
.hdr--dark{
  background:linear-gradient(180deg,rgba(6,10,20,.78),rgba(6,10,20,.34));
  border-bottom-color:transparent;box-shadow:none;
}
.hdr--dark.stuck{
  background:linear-gradient(180deg,rgba(6,10,20,.88),rgba(6,10,20,.6));
  border-bottom-color:rgba(199,215,247,.14);box-shadow:none;
}
.hdr--dark .brand__name{color:#fff}
.hdr--dark .brand__name i{color:var(--accent-muted)}
.hdr--dark .nav a{color:#b7c5dd}
.hdr--dark .nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.hdr--dark .nav a[aria-current="page"]{color:#fff}
.hdr--dark .btn--ghost{--btn-fg:#e9eefa;--btn-bd:rgba(233,238,250,.32)}
.hdr--dark .btn--ghost:hover{--btn-fg:#fff;--btn-bd:#fff}
.hdr--dark .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.hdr--dark .drawer{background:rgba(10,16,30,.97);border-top-color:rgba(199,215,247,.16)}
.hdr--dark .drawer a{color:#e9eefa;border-bottom-color:rgba(199,215,247,.14)}
.hdr--dark .drawer a[aria-current="page"]{color:var(--accent-muted)}
.hdr .brand__name,.hdr .nav a{transition:color .4s var(--ease),background-color .3s var(--ease)}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand__mark{width:34px;height:34px;flex:0 0 auto;color:var(--accent)}
.brand__name{
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  line-height:1.05;color:var(--text-primary);white-space:nowrap;
}
.brand__name i{font-style:normal;color:var(--accent)}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;text-decoration:none;color:var(--text-secondary);
  font-size:15.5px;font-weight:500;padding:9px 14px;border-radius:9px;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover{color:var(--text-primary);background:rgba(26,86,219,.055)}
.nav a[aria-current="page"]{color:var(--text-primary);font-weight:600}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.hdr__cta{display:flex;align-items:center;gap:10px;margin-left:8px}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);
  background:var(--panel);border-radius:11px;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-primary);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.burger:hover{border-color:var(--accent-muted)}
.burger span{display:block;width:18px;height:1.6px;background:currentColor;border-radius:2px;position:relative;transition:transform .35s var(--ease),opacity .2s linear}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.burger[aria-expanded="true"] span::after{opacity:0}

.drawer{
  display:none;border-top:1px solid var(--line);
  background:rgba(245,247,251,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.drawer ul{display:flex;flex-direction:column;padding:10px 0 18px}
.drawer a{
  display:block;text-decoration:none;color:var(--text-primary);font-size:17px;font-weight:500;
  padding:14px 2px;border-bottom:1px solid var(--line);
}
.drawer a[aria-current="page"]{color:var(--accent);font-weight:600}
.drawer .drawer__cta{display:flex;gap:10px;flex-wrap:wrap;padding-top:18px}
.drawer .drawer__cta .btn{flex:1 1 160px}

@media (max-width:980px){
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
  .hdr.open .drawer{display:block}
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--accent);--btn-fg:#fff;--btn-bd:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:15.5px;font-weight:600;line-height:1;
  padding:14px 22px;border-radius:11px;text-decoration:none;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  transition:transform .35s var(--ease),background-color .3s var(--ease),
             border-color .3s var(--ease),color .3s var(--ease),box-shadow .4s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(26,86,219,.66)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:0 0 auto}

.btn--primary:hover{--btn-bg:var(--accent-hover);--btn-bd:var(--accent-hover)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text-primary);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bd:var(--accent);--btn-fg:var(--accent);box-shadow:0 14px 30px -18px rgba(15,27,45,.4)}
/* WhatsApp's own green puts white text at 3.5:1, under the 4.5 floor.
   This is that green taken down until white on it measures 4.9:1. */
.btn--wa{--btn-bg:#167f3e;--btn-fg:#fff;--btn-bd:#167f3e}
.btn--wa:hover{--btn-bg:#0f6330;--btn-bd:#0f6330;box-shadow:0 14px 30px -14px rgba(22,127,62,.62)}
.btn--sm{padding:11px 16px;font-size:14.5px}
.btn--onDeep{--btn-bg:transparent;--btn-fg:var(--text-on-deep);--btn-bd:rgba(233,238,250,.32)}
.btn--onDeep:hover{--btn-bd:var(--text-on-deep);box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.btn--block{width:100%}

@media (pointer:coarse){
  .btn{min-height:46px}
  .nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- Section furniture ---------- */
.sec{position:relative;padding-block:clamp(64px,9vw,116px)}
.sec--deep{background:var(--canvas-deep);color:var(--text-on-deep)}
.sec--deep h2,.sec--deep h3{color:#fff}
.sec--tight{padding-block:clamp(48px,6vw,72px)}

.kicker{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
}
.kicker::before{content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px}
.sec--deep .kicker{color:var(--accent-muted)}
.kicker--copper{color:var(--copper-light)}

.h2{font-size:clamp(28px,4.1vw,45px)}
.h3{font-size:clamp(20px,2.3vw,25px)}
.lede{
  font-size:clamp(17px,1.55vw,19.5px);line-height:1.72;color:var(--text-secondary);
  max-width:66ch;margin-top:18px;
}
.sec--deep .lede{color:var(--text-on-deep-2)}
.sec__head{max-width:820px}

/* ---------- Reveal choreography ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.stag > *{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.stag.in > *{opacity:1;transform:none}
.stag.in > *:nth-child(1){transition-delay:0ms}
.stag.in > *:nth-child(2){transition-delay:70ms}
.stag.in > *:nth-child(3){transition-delay:140ms}
.stag.in > *:nth-child(4){transition-delay:210ms}
.stag.in > *:nth-child(5){transition-delay:280ms}
.stag.in > *:nth-child(6){transition-delay:350ms}
.stag.in > *:nth-child(7){transition-delay:420ms}
/* Retire the stagger once the entrance is done, or every later hover lags forever.
   Specificity has to match the nth-child rules above, hence the repeated selector. */
.stag.done.in > *:nth-child(1),.stag.done.in > *:nth-child(2),.stag.done.in > *:nth-child(3),
.stag.done.in > *:nth-child(4),.stag.done.in > *:nth-child(5),.stag.done.in > *:nth-child(6),
.stag.done.in > *:nth-child(7){transition-delay:0s!important}

/* ---------- Service cards ---------- */
.grid-svc{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));margin-top:44px}

.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 26px 30px;
  box-shadow:var(--shadow-card);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease);
  overflow:hidden;
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-muted));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hi);border-color:var(--accent-muted)}
.card:hover::after{transform:scaleX(1)}
.card__ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:18px;
  transition:transform .5s var(--ease),background-color .4s var(--ease);
}
.card:hover .card__ico{transform:translateY(-2px) scale(1.05);background:#dbe7fb}
.card__ico svg{width:23px;height:23px}
.card h3{font-size:19.5px;margin-bottom:9px;letter-spacing:-.01em}
.card p{color:var(--text-secondary);font-size:16px;line-height:1.66}

/* one living element per section, at whisper level */
.card__glow{
  position:absolute;right:-38px;bottom:-38px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,86,219,.14),transparent 68%);
  opacity:.5;pointer-events:none;
}
.sec.live .card__glow{animation:breathe 7s var(--ease) -2.4s infinite alternate}
@keyframes breathe{from{opacity:.28;transform:scale(.9)}to{opacity:.7;transform:scale(1.12)}}

/* ---------- Why-choose strip ---------- */
.why{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:42px}
.why__item{
  position:relative;padding:26px 22px 28px;border-radius:var(--radius);
  background:var(--panel-deep);border:1px solid var(--line-deep);
  transition:transform .5s var(--ease),border-color .4s var(--ease);
}
.why__item:hover{transform:translateY(-4px);border-color:rgba(26,86,219,.55)}
.why__n{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--accent-muted);display:block;margin-bottom:12px}
.why__item h3{font-size:19px;color:#fff;margin-bottom:8px}
.why__item p{color:var(--text-on-deep-2);font-size:15.5px;line-height:1.65}

/* ---------- The interactive moment: hold to connect ---------- */
.connect{
  display:grid;gap:34px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin-top:8px;
}
@media (max-width:860px){.connect{grid-template-columns:1fr}}

.holder{
  position:relative;border-radius:18px;padding:38px 30px 34px;
  background:linear-gradient(165deg,#132241,#0b1220 65%);
  border:1px solid var(--line-deep);overflow:hidden;
  text-align:center;
  display:flex;flex-direction:column;justify-content:center;
}
.holder__track{width:100%;max-width:340px;margin:0 auto 22px;display:block}
.holder__track .base{fill:none;stroke:rgba(199,215,247,.16);stroke-width:2;stroke-linecap:round}
.holder__track .live{
  fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:var(--hlen,300);
  stroke-dashoffset:calc(var(--hlen,300) * (1 - var(--hold,0)));
  filter:drop-shadow(0 0 7px rgba(26,86,219,.85));
  transition:stroke .3s var(--ease);
}
.holder__track .dot{
  fill:var(--accent);opacity:calc(.2 + .8*var(--hold,0));
  filter:drop-shadow(0 0 6px rgba(26,86,219,.9));
}
.holder__track .rack rect{
  fill:rgba(199,215,247,.10);stroke:rgba(199,215,247,.2);stroke-width:1;
}
.holder__track .lamp{fill:#3d5170}
.holder.on .holder__track .lamp{fill:var(--accent);filter:drop-shadow(0 0 5px rgba(26,86,219,.95))}
.holder__track .lamp{transition:fill .45s var(--ease)}
.holder.on .holder__track .lamp:nth-of-type(2){transition-delay:.12s}
.holder.on .holder__track .lamp:nth-of-type(3){transition-delay:.24s}
.holder.on .holder__track .lamp:nth-of-type(4){transition-delay:.36s}

.holder__btn{
  --btn-bg:transparent;--btn-fg:var(--text-on-deep);--btn-bd:rgba(199,215,247,.34);
  user-select:none;-webkit-user-select:none;touch-action:none;
  align-self:center;
}
.holder__btn:hover{--btn-bd:var(--accent);--btn-fg:#fff}
.holder__hint{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-on-deep-2);margin-top:16px;
  transition:color .4s var(--ease);
}
.holder.on .holder__hint{color:var(--accent-muted)}

.holder__reveal{
  margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  opacity:calc(var(--hold,0));
  transform:translateY(calc((1 - var(--hold,0)) * 12px));
  pointer-events:none;
}
.holder.on .holder__reveal{pointer-events:auto}

/* ---------- Community band (deliberately unlike the paid services) ---------- */
.give{
  position:relative;background:var(--canvas-deep);color:var(--text-on-deep);overflow:hidden;
}
.give::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 420px at 12% 18%,rgba(180,84,31,.30),transparent 62%),
    radial-gradient(560px 460px at 88% 92%,rgba(217,118,47,.16),transparent 64%);
}
.give__in{position:relative;display:grid;gap:44px;grid-template-columns:1.05fr .95fr;align-items:center}
@media (max-width:900px){.give__in{grid-template-columns:1fr;gap:32px}}
.give__tag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  color:#f4cdae;background:rgba(180,84,31,.24);border:1px solid rgba(217,118,47,.42);
  padding:7px 14px;border-radius:999px;margin-bottom:20px;
}
.give h2{font-size:clamp(27px,3.6vw,40px);color:#fff}
.give h2 em{font-style:normal;color:var(--copper-light)}
.give p{color:#d9cbc0;font-size:17.5px;line-height:1.72;margin-top:18px;max-width:56ch}
.give__btn{--btn-bg:var(--copper);--btn-fg:#fff;--btn-bd:var(--copper);margin-top:28px}
.give__btn:hover{--btn-bg:var(--copper-light);--btn-bd:var(--copper-light);box-shadow:0 14px 30px -14px rgba(217,118,47,.7)}

.give__list{display:grid;gap:12px}
.give__list li{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.045);border:1px solid rgba(217,118,47,.26);
  border-radius:12px;padding:17px 19px;
}
.give__list svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;color:var(--copper-light)}
.give__list b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;color:#fff;margin-bottom:3px}
.give__list span{color:#c6b6aa;font-size:15px;line-height:1.6}

/* ---------- Detailed service rows (Services page) ---------- */
.svc{display:grid;gap:38px;grid-template-columns:.9fr 1.1fr;align-items:center;padding-block:clamp(38px,5vw,56px);border-top:1px solid var(--line)}
.svc:first-of-type{border-top:0}
.svc:nth-child(even) .svc__art{order:-1}
@media (max-width:860px){
  .svc{grid-template-columns:1fr;gap:24px}
  .svc:nth-child(even) .svc__art{order:0}
}
.svc__n{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--accent);margin-bottom:12px;display:block}
.svc h3{font-size:clamp(22px,2.6vw,29px);margin-bottom:14px}
.svc p{color:var(--text-secondary);font-size:17px;line-height:1.72;max-width:60ch}
.svc__pts{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.svc__pts li{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-muted);
  padding:7px 12px;border-radius:999px;
}
/* a technical plate, not a blown up icon: blueprint grid, corner ticks,
   a mono label. These panels hold the place of the photographs to come. */
.svc__art{
  position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,rgba(199,215,247,.055) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(199,215,247,.055) 0 1px,transparent 1px 34px),
    linear-gradient(160deg,#152b4d,#0b1220 70%);
  border:1px solid var(--line-deep);
  display:grid;place-items:center;
}
.svc__art svg{width:32%;height:32%;color:var(--accent);position:relative;z-index:2}
.svc__art::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(420px 300px at 32% 24%,rgba(26,86,219,.26),transparent 66%);
}
.svc__art::before{
  content:"";position:absolute;inset:18px;pointer-events:none;z-index:2;
  border:1px solid rgba(199,215,247,.13);border-radius:8px;
}
.svc__cap{
  position:absolute;left:24px;bottom:22px;z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(199,215,247,.5);
}
.sec.live .svc__art::after{animation:artpulse 9s var(--ease) -3s infinite alternate}
@keyframes artpulse{from{opacity:.55}to{opacity:1}}

/* ---------- Mission pillars (About) ---------- */
.pillars{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));margin-top:44px}
.pillar{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px 32px;box-shadow:var(--shadow-card);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hi);border-color:var(--accent-muted)}
.pillar__ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--copper-soft);color:var(--copper);margin-bottom:18px}
.pillar__ico svg{width:22px;height:22px}
.pillar h3{font-size:19.5px;margin-bottom:10px}
.pillar ul{margin-top:12px;display:grid;gap:9px}
.pillar li{display:flex;gap:10px;align-items:flex-start;color:var(--text-secondary);font-size:15.5px;line-height:1.6}
.pillar li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--copper);margin-top:9px}

/* ---------- Pull quote ---------- */
.quote{position:relative;text-align:center;max-width:900px;margin-inline:auto}
.quote__mark{font-family:var(--display);font-size:90px;line-height:.7;color:var(--accent-muted);display:block;margin-bottom:6px}
.quote blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(21px,3.1vw,33px);line-height:1.35;letter-spacing:-.02em}
.quote cite{display:block;margin-top:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);font-style:normal}
.sec--deep .quote cite{color:var(--text-on-deep-2)}

/* ---------- Stat row ---------- */
.stats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:44px}
.stat{padding:26px 22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(32px,4.4vw,44px);color:var(--accent);letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:9px;color:var(--text-secondary);font-size:15.5px;line-height:1.55}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin-top:40px;display:grid;gap:12px}
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.faq details[open]{border-color:var(--accent-muted);box-shadow:var(--shadow-card)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 22px;
  font-family:var(--display);font-weight:600;font-size:17.5px;
  display:flex;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq .ans{padding:0 22px 22px;color:var(--text-secondary);font-size:16.5px;line-height:1.7;max-width:64ch}

/* ---------- Contact cards ---------- */
.ways{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.way{
  display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-card);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.way:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hi);border-color:var(--accent-muted)}
.way__ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:16px}
.way__ico svg{width:22px;height:22px}
.way b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:7px;font-weight:500}
.way span{display:block;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--text-primary);word-break:break-word}
.way small{display:block;margin-top:6px;color:var(--text-secondary);font-size:14.5px;font-family:var(--body);letter-spacing:0;text-transform:none}
.way--wa .way__ico{background:#e4f5eb;color:#1f9d55}
/* the address is one word: size it to fit rather than let it break mid-word */
.way--email span{font-size:15.5px;letter-spacing:-.005em;word-break:normal;overflow-wrap:anywhere}

/* ---------- Form ---------- */
.formwrap{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow-card);
}
.frow{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:700px){.frow{grid-template-columns:1fr}}
.field{display:block;margin-bottom:18px}
.field > span{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:8px;font-weight:500;
}
.field .req{color:var(--accent);margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16.5px;color:var(--text-primary);
  background:var(--canvas);border:1.5px solid var(--line);border-radius:11px;
  padding:13px 15px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5a72' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:42px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent-muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--panel);
  box-shadow:0 0 0 4px rgba(26,86,219,.14);
}
.field input::placeholder,.field textarea::placeholder{color:#93a2b8}

.fnote{margin-top:16px;color:var(--text-secondary);font-size:14.5px;line-height:1.6}
.fstatus{
  margin-top:18px;padding:16px 18px;border-radius:12px;font-size:16px;line-height:1.6;
  display:none;
}
.fstatus.show{display:block}
.fstatus.ok{background:#e6f6ec;border:1px solid #a9dcbd;color:#14663a}
.fstatus.bad{background:#fdecec;border:1px solid #f2bcbc;color:#8f2020}

/* ---------- CTA band ---------- */
.cta{
  position:relative;background:var(--canvas-deep);color:var(--text-on-deep);overflow:hidden;
  text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 460px at 50% 0%,rgba(26,86,219,.34),transparent 66%);
}
.sec.live.cta::before{animation:ctapulse 11s var(--ease) -4s infinite alternate}
@keyframes ctapulse{from{opacity:.62}to{opacity:1}}
.cta__in{position:relative}
.cta h2{font-size:clamp(28px,4.2vw,46px);color:#fff}
.cta p{color:var(--text-on-deep-2);font-size:18px;margin-top:16px;max-width:56ch;margin-inline:auto}
.cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- Footer ---------- */
/* the bottom padding keeps the floating WhatsApp button off the last line */
.ftr{background:#070d18;color:#93a4bf;padding-block:60px 96px;position:relative;z-index:1}
.ftr__grid{display:grid;gap:38px;grid-template-columns:1.35fr 1fr 1.15fr}
@media (max-width:840px){.ftr__grid{grid-template-columns:1fr;gap:30px}}
.ftr__brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-bottom:16px}
.ftr__brand .brand__name{color:#fff}
/* the brand mark is not a list icon: keep it off the 16px icon rule below */
.ftr__brand svg{width:32px;height:32px;margin-top:0;color:var(--accent)}
.ftr p{font-size:15.5px;line-height:1.7;max-width:42ch}
.ftr h4{font-family:var(--mono);font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:#7c8ca8;margin-bottom:16px;font-weight:500}
.ftr li{margin-bottom:11px}
.ftr a{
  color:#c3d0e6;text-decoration:none;font-size:15.5px;
  display:inline-flex;align-items:flex-start;gap:9px;
  transition:color .3s var(--ease);
}
.ftr a:hover{color:#fff}
.ftr a svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--accent)}
.ftr__base{
  margin-top:44px;padding-top:22px;border-top:1px solid #17233a;
  display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;
  font-size:13.5px;color:#7c8ca8;
}
.ftr__base p{max-width:none}

/* ---------- Floating WhatsApp ---------- */
.float{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:80;
  display:inline-flex;align-items:center;gap:11px;
  background:#167f3e;color:#fff;text-decoration:none;
  padding:13px 19px 13px 15px;border-radius:999px;font-weight:600;font-size:15.5px;
  box-shadow:0 12px 34px -10px rgba(22,127,62,.62),0 2px 8px rgba(0,0,0,.18);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .3s var(--ease);
}
.float:hover{background:#0f6330;transform:translateY(-3px) scale(1.03);box-shadow:0 18px 42px -10px rgba(22,127,62,.72)}
.float svg{width:23px;height:23px;flex:0 0 auto}
.float::before{
  content:"";position:absolute;inset:0;border-radius:999px;border:2px solid #167f3e;
  animation:halo 3.4s var(--ease) -1.1s infinite;pointer-events:none;
}
@keyframes halo{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(1.32);opacity:0}
}
body.paused .float::before{animation-play-state:paused}
@media (max-width:520px){
  .float__label{display:none}
  .float{padding:15px;border-radius:50%}
}
@media (max-height:520px){.float{display:none}}

/* ==========================================================================
   THE HERO (Home only)
   ========================================================================== */
.hero{position:relative;height:520vh}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas-deep);
  display:grid;place-items:center;
}

/* the drawn scene: carries the hero when there is no video, and it always works */
.scene{position:absolute;inset:0;width:100%;height:100%;display:block;color:var(--accent)}
.scene .lamp{filter:drop-shadow(0 0 5px rgba(26,86,219,.95))}
.scene .lamp:last-of-type{filter:drop-shadow(0 0 5px rgba(217,118,47,.95))}

.vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
  transform:translateZ(0);will-change:transform;
}
.stage.video-ready .vid{opacity:1}
/* once the footage is in, the drawn scene steps out of the way completely:
   at any opacity it would double up the light and the shelter already in shot */
.stage.video-ready .scene{opacity:0;transition:opacity .9s var(--ease)}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s var(--ease)}
.stage.poster-ready .poster{opacity:1}
.stage.video-ready .poster{opacity:0}

/* base scrim: no frame is ever raw behind the page */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,12,24,0) 32%,rgba(8,12,24,.66) 100%);
}

/* the loader and the scroll cue live bottom left, clear of the settle
   composition in the centre of frame and clear of the WhatsApp button */
.ring{
  position:absolute;left:var(--pad);bottom:30px;transform:rotate(-90deg);
  width:38px;height:38px;color:rgba(199,215,247,.8);pointer-events:none;
  transition:opacity .5s var(--ease);
}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.cue{
  position:absolute;left:var(--pad);bottom:28px;
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(199,215,247,.72);pointer-events:none;
  opacity:0;transition:opacity .7s var(--ease);
}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:1}
.stage.past-intro .cue{opacity:0}
.cue svg{width:15px;height:15px;animation:nudge 2.4s var(--ease) -.6s infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
@media (max-height:560px){.cue,.ring{display:none}}

/* --- caption bands --- */
.bands{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.band{
  position:absolute;inset:0;display:grid;place-items:center;
  padding-inline:var(--pad);
  opacity:0;text-shadow:var(--tshadow);
}
.band > .band__in{position:relative;text-align:center;max-width:min(1040px,100%)}
.band .btn{text-shadow:none}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 76% 60% at 50% 50%,rgba(5,8,18,.70) 0%,rgba(5,8,18,.46) 46%,rgba(5,8,18,0) 76%);
}
/* Peak alphas tuned against each band's worst frame in the real footage, not
   its average one. Band 2 sits over the brightest cloud moment and band 3 over
   the lit horizon, so both run deeper than the opening beat. */
.band--2::before{background:radial-gradient(ellipse 80% 58% at 50% 50%,rgba(5,8,18,.76) 0%,rgba(5,8,18,.52) 46%,rgba(5,8,18,0) 76%)}
.band--3::before{background:radial-gradient(ellipse 82% 64% at 50% 50%,rgba(5,8,18,.80) 0%,rgba(5,8,18,.56) 46%,rgba(5,8,18,0) 76%)}
.band .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#c7d7f7;background:rgba(8,12,24,.5);border:1px solid rgba(199,215,247,.25);
  border-radius:999px;padding:8px 15px;margin-bottom:24px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,8,18,.9);
}
.band h1,.band .h1{
  font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(38px,8.2vw,96px);line-height:1.02;letter-spacing:-.035em;
  margin:0;
}
.band .tag{
  font-family:var(--display);font-weight:600;color:#fff;
  font-size:clamp(24px,4.4vw,50px);line-height:1.18;letter-spacing:-.025em;
}
.band .settle{
  font-family:var(--display);font-weight:600;color:#fff;
  font-size:clamp(21px,3.5vw,40px);line-height:1.24;letter-spacing:-.02em;
  max-width:20ch;margin-inline:auto;
}
.band .sub{
  color:#dbe4f5;font-size:clamp(17px,2.1vw,23px);line-height:1.55;
  max-width:34ch;margin-inline:auto;
}
.band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;pointer-events:auto}

/* word and character split machinery, driven by --k */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* band 1: word-by-word rise */
.band--1 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 34px));
}
/* band 2: drift down, echoing the falling signal */
.band--2 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* band 3: staged settle. line, then support line, then the buttons */
.band--3 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 20px));
}
.band--3 .row{
  --kb:clamp(0,(var(--k,0) - .62)*3.4,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 18px));
}

/* --- THE STATIC HERO GATE ---------------------------------------------------
   Five conditions. These five strings are character for character the same list
   that lives in hero.js. If they ever drift apart, one side loads assets the
   other side hides. The static hero is a composed layout, not an apology. */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){

  .hero{height:auto}
  .stage{
    position:relative;top:auto;height:auto;min-height:min(90vh,760px);
    display:grid;place-items:center;
    padding-block:calc(clamp(76px,13vh,124px) + 74px) clamp(76px,13vh,124px);
  }
  .vid{display:none}
  .bands{position:relative;inset:auto;display:block;padding-inline:var(--pad)}
  .band{
    position:relative;inset:auto;opacity:1;display:block;padding-inline:0;
  }
  .band::before{display:none}
  .band--1{margin-bottom:18px}
  .band--2{margin-bottom:22px}
  .band .w,.band .sub,.band .row{opacity:1!important;transform:none!important}
  .band .row{margin-top:28px}
  .cue,.ring{display:none}
  /* The static hero is a composed layout, not an apology: it gets the real
     resting frame of the journey as a still. One small jpg, never the video.
     The drawn scene stays underneath as the backstop if that jpg fails. */
  .stage{background-image:url('hero-ending.jpg');background-size:cover;background-position:50% 42%}
  .scene .only-scrub{display:none}
  .scene{opacity:0}
  .scrim{background:linear-gradient(180deg,rgba(8,12,24,.62) 0%,rgba(8,12,24,.42) 45%,rgba(8,12,24,.78) 100%)}
}

/* the page-hero used by Services, About, Contact */
.phero{position:relative;background:var(--canvas-deep);color:var(--text-on-deep);overflow:hidden;
  padding-block:calc(clamp(74px,11vw,124px) + 74px) clamp(74px,11vw,124px)}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 460px at 78% 8%,rgba(26,86,219,.34),transparent 64%),
    radial-gradient(520px 420px at 6% 94%,rgba(180,84,31,.14),transparent 62%);
}
.phero__in{position:relative;max-width:820px}
.phero h1{font-size:clamp(34px,5.6vw,60px);color:#fff;letter-spacing:-.03em;line-height:1.05}
.phero p{color:var(--text-on-deep-2);font-size:clamp(17px,1.7vw,20px);line-height:1.68;margin-top:20px;max-width:60ch}
.phero .kicker{color:var(--accent-muted)}
.phero__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.phero__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;color:var(--accent-muted)}

/* ---------- Reduced motion, honoured completely ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .rv,.stag > *{opacity:1!important;transform:none!important}
  .card:hover,.pillar:hover,.way:hover,.btn:hover,.why__item:hover{transform:none}
  .rail .trunk{stroke-dashoffset:0}
  .rail .node{opacity:1}
  .holder__track .live{stroke-dashoffset:0}
  .band .w,.band .sub,.band .row{opacity:1!important;transform:none!important}
  /* keep positional transforms that are layout, not decoration */
  .float:hover{transform:none}
  .ring{opacity:0}
}