/* Lanka OpenSoft — site stylesheet
   Display: Outfit  ·  Body: Manrope  ·  Palette: navy #0B1B2E + brand orange #E83E18
*/
/* ===================================================================
   Lanka OpenSoft — navy / brand-orange theme
   Display: Outfit  ·  Body: Manrope
   =================================================================== */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --logo-ink:url("../img/logo.png");
  --logo-inv:url("../img/logo-light.png");

  /* constants across both schemes */
  --navy-900:#061220;
  --navy:#0B1B2E;
  --navy-2:#11263D;
  --navy-3:#17314D;
  --navy-line:rgba(233,240,247,.13);
  --on-navy:#E9F0F7;
  --on-navy-2:#93AEC9;
  --brand:#E83E18;
  --brand-deep:#D6350F;
  --brand-lite:#FF7A52;

  /* light scheme */
  --paper:#F4F7FA;
  --surface:#FFFFFF;
  --surface-2:#EDF2F7;
  --ink:#0B1B2E;
  --ink-2:#3D5570;
  --muted:#4E6885;
  --line:#DCE5EE;
  --line-soft:#E9EFF5;
  --shadow:0 20px 48px -30px rgba(11,27,46,.45);

  --font-display:'Outfit','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Manrope','Helvetica Neue',Helvetica,system-ui,sans-serif;

  --pad:clamp(1.15rem,4.5vw,2.5rem);
  --maxw:1220px;
  --sect:clamp(3.75rem,8vw,6.5rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#081521;
    --surface:#0E1F30;
    --surface-2:#132A3F;
    --ink:#E9F0F7;
    --ink-2:#B3C6D8;
    --muted:#8AA3BA;
    --line:#1D3348;
    --line-soft:#16283A;
    --shadow:0 20px 48px -30px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#081521;--surface:#0E1F30;--surface-2:#132A3F;--ink:#E9F0F7;
  --ink-2:#B3C6D8;--muted:#8AA3BA;--line:#1D3348;--line-soft:#16283A;
  --shadow:0 20px 48px -30px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:inherit}
html{min-height:100%;scroll-behavior:smooth;scroll-padding-top:calc(96px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{
  min-height:100%;margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:1.0325rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
::selection{background:var(--brand);color:#fff}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;line-height:1.1;letter-spacing:-0.025em;font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,3.85rem);font-weight:700;letter-spacing:-0.035em}
h2{font-size:clamp(1.8rem,3.4vw,2.65rem);font-weight:700;letter-spacing:-0.03em}
h3{font-size:clamp(1.1rem,1.6vw,1.26rem);letter-spacing:-0.015em;line-height:1.28}
h4{font-size:1rem;letter-spacing:-0.01em;line-height:1.35}
p{margin:0 0 1.05em;max-width:68ch}
p:last-child{margin-bottom:0}
a{color:var(--brand-deep);text-underline-offset:3px}
a:hover{color:var(--brand)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(2.75rem,6vw,4.25rem)}
.navy{background:var(--navy);color:var(--on-navy)}
.navy h2,.navy h3,.navy h4{color:var(--on-navy)}
.navy p{color:var(--on-navy-2)}

:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
.navy :focus-visible,.hero :focus-visible{outline-color:var(--brand-lite)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.7rem 1.1rem;font-family:var(--font-display)}
.skip:focus{left:0}
.u-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- eyebrow pill ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-size:.815rem;font-weight:500;letter-spacing:.01em;
  color:var(--brand-lite);background:rgba(232,62,24,.12);
  border:1px solid rgba(232,62,24,.32);border-radius:100px;
  padding:.42rem .9rem .42rem .7rem;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(232,62,24,.25)}
.pill--light{color:var(--brand-deep);background:rgba(232,62,24,.08);border-color:rgba(232,62,24,.24)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:.78rem 1.6rem;
  font-family:var(--font-display);font-size:.98rem;font-weight:500;letter-spacing:-0.005em;
  border:1.5px solid transparent;border-radius:6px;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--brand{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep);box-shadow:0 10px 24px -14px rgba(232,62,24,.9)}
.btn--brand:hover{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 14px 30px -14px rgba(232,62,24,1)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--outline:hover{border-color:var(--brand);color:var(--brand-deep)}
.navy .btn--outline,.hero .btn--outline{color:var(--on-navy);border-color:var(--navy-line)}
.navy .btn--outline:hover,.hero .btn--outline:hover{border-color:var(--on-navy);color:var(--on-navy);background:rgba(233,240,247,.07)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:.5rem;
  font-family:var(--font-display);font-size:.93rem;font-weight:500;
  color:var(--brand-deep);text-decoration:none;
}
.link-arrow svg{width:13px;height:13px;transition:transform .2s ease}

/* ============ TOP BAR ============ */
.topbar{background:var(--navy-900);color:var(--on-navy-2);font-size:.845rem}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap}
.topbar a{color:var(--on-navy-2);text-decoration:none;display:inline-flex;align-items:center;gap:.42rem}
.topbar a:hover{color:var(--brand-lite)}
.topbar svg{width:14px;height:14px;flex:0 0 auto}
.topbar-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.topbar-note{display:none}
@media (min-width:720px){.topbar-note{display:block}}

/* ============ HEADER ============ */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:90;background:var(--surface);border-bottom:1px solid var(--line-soft);transition:box-shadow .2s ease}
.site-header.is-stuck{box-shadow:0 10px 30px -22px rgba(11,27,46,.6)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px}
.logo{display:block;height:34px;aspect-ratio:931/150;background-repeat:no-repeat;background-size:contain;background-position:left center;background-image:var(--logo-ink)}
@media (min-width:600px){.logo{height:38px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo{background-image:var(--logo-inv)}}
:root[data-theme="dark"] .logo{background-image:var(--logo-inv)}
.logo--inv{background-image:var(--logo-inv)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo--inv{background-image:var(--logo-inv)}}

.nav{display:none}
@media (min-width:1040px){.nav{display:flex;align-items:center;gap:.15rem}}
.nav a:not(.btn),.nav > .has-menu > button{
  font-family:var(--font-display);font-size:.965rem;font-weight:500;color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:.6rem .85rem;border-radius:5px;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;transition:color .15s ease,background-color .15s ease;
}
.nav a:not(.btn):hover,.nav > .has-menu > button:hover{color:var(--brand-deep);background:var(--surface-2)}
.nav .caret{width:10px;height:10px;transition:transform .2s ease}
.nav [aria-expanded="true"] .caret{transform:rotate(180deg)}
.header-cta{display:none;margin-left:.7rem;min-height:46px;padding:.6rem 1.25rem;font-size:.94rem}
@media (min-width:1040px){.header-cta{display:inline-flex}}

.has-menu{position:relative}
.menu-panel{
  position:absolute;top:calc(100% + 12px);left:-.5rem;z-index:95;min-width:346px;padding:.45rem;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:none;
}
.menu-panel[data-open="true"]{display:block}
.menu-panel a{display:flex;gap:.75rem;padding:.7rem .75rem;border-radius:7px;text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-size:.93rem;font-weight:500;line-height:1.3}
.menu-panel a small{display:block;font-family:var(--font-body);font-weight:400;font-size:.845rem;color:var(--muted);margin-top:.18rem;line-height:1.42}
.menu-panel a:hover{background:var(--surface-2);color:var(--brand-deep)}
.menu-panel .mi{width:19px;height:19px;flex:0 0 auto;margin-top:.15rem;color:var(--brand)}

.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-.6rem;background:none;border:0;cursor:pointer;color:var(--ink)}
@media (min-width:1040px){.burger{display:none}}
.burger svg{width:23px;height:23px}

.drawer{position:fixed;inset:0;z-index:120;background:var(--surface);overflow-y:auto;display:none;
  padding:calc(.75rem + env(safe-area-inset-top,0px)) var(--pad) calc(2.5rem + env(safe-area-inset-bottom,0px))}
.drawer[data-open="true"]{display:block}
@media (min-width:1040px){.drawer{display:none !important}}
.drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin-bottom:1rem}
.drawer nav{display:flex;flex-direction:column}
.drawer nav > a:not(.btn),.drawer .sub-toggle{
  font-family:var(--font-display);font-size:1.28rem;font-weight:500;letter-spacing:-0.025em;color:var(--ink);
  text-decoration:none;background:none;border:0;padding:.9rem 0;text-align:left;cursor:pointer;width:100%;
  border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.drawer .sub-toggle .caret{width:13px;height:13px;color:var(--muted);transition:transform .2s ease}
.drawer .sub-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.drawer .sub{display:none;padding:.3rem 0 .7rem;border-bottom:1px solid var(--line-soft)}
.drawer .sub[data-open="true"]{display:block}
.drawer .sub a{display:block;padding:.62rem 0 .62rem 1rem;border-left:2px solid var(--line);
  font-family:var(--font-display);font-size:1rem;color:var(--ink-2);text-decoration:none}
.drawer .sub a:hover{color:var(--brand-deep);border-color:var(--brand)}
.drawer .btn{margin-top:1.9rem;width:100%}
.drawer-contact{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);display:grid;gap:.7rem}
.drawer-contact a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;font-size:.97rem}
.drawer-contact svg{width:16px;height:16px;color:var(--brand)}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);padding-block:clamp(3rem,6.5vw,5.25rem) clamp(4rem,8vw,6rem)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(233,240,247,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,247,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 12%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 78% 12%,#000 0%,transparent 72%);
}
.hero::after{
  content:"";position:absolute;top:-28%;right:-12%;width:64%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(232,62,24,.30) 0%,rgba(232,62,24,.09) 38%,transparent 68%);
  filter:blur(6px);animation:glow 11s ease-in-out infinite;
}
@keyframes glow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:var(--on-navy);max-width:15ch}
.hero-lede{font-size:clamp(1.06rem,1.55vw,1.21rem);line-height:1.62;color:var(--on-navy-2);max-width:52ch;margin-top:1.5rem}
.hero-grid{display:grid;gap:clamp(2.75rem,5vw,3.5rem)}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center}}

.creds{display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--navy-line)}
.creds span{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.875rem;font-weight:500;color:var(--on-navy)}
.creds span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-lite);flex:0 0 auto}

/* ============ ANIMATED ARTWORK — operations in orbit ============ */
.stage{width:100%;max-width:430px;margin-inline:auto}
@media (min-width:1000px){.stage{max-width:none;margin-inline:0}}
.stage svg{width:100%;height:auto;display:block;overflow:visible}

.sv .glow{fill:url(#coreGlow)}
.sv .ring{fill:none;stroke:rgba(233,240,247,.20);stroke-width:1.3}
.sv .ring-2{fill:none;stroke:rgba(233,240,247,.14);stroke-width:1.2}
.sv .spoke{fill:none;stroke:rgba(233,240,247,.17);stroke-width:1.2;stroke-linecap:round}
.sv .core-fill{fill:rgba(233,240,247,.055);stroke:rgba(233,240,247,.34);stroke-width:1.5}
.sv .crescent{fill:none;stroke:var(--brand);stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(232,62,24,.45))}
.sv .dot{fill:var(--brand-lite)}
.sv .node-bg{fill:#11263D;stroke:rgba(233,240,247,.38);stroke-width:1.5}
.sv .ripple{fill:none;stroke:var(--brand-lite);stroke-width:1.6;opacity:0}
.sv .pulse{fill:none;stroke:var(--brand-lite);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:22 300;filter:drop-shadow(0 0 5px rgba(255,122,82,.9))}

/* --- orbits: parent rotates, node counter-rotates so icons stay upright --- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinRev{to{transform:rotate(-360deg)}}
.sv .orbit{transform-box:view-box;transform-origin:230px 190px}
.sv .orbit-a{animation:spin 30s linear infinite}
.sv .orbit-b{animation:spinRev 46s linear infinite}
.sv .rev-a{animation:spinRev 30s linear infinite;transform-box:fill-box;transform-origin:center}
.sv .rev-b{animation:spin 46s linear infinite;transform-box:fill-box;transform-origin:center}

/* --- entrance --- */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:none}}
.sv .f{opacity:0;animation:fade .75s ease both}
.sv .p{opacity:0;animation:pop .66s cubic-bezier(.2,1.35,.45,1) both;transform-box:fill-box;transform-origin:center}
.sv .d1{animation-delay:.04s}.sv .d2{animation-delay:.16s}.sv .d3{animation-delay:.3s}
.sv .d4{animation-delay:.46s}.sv .d5{animation-delay:.52s}.sv .d6{animation-delay:.64s}
.sv .d7{animation-delay:.78s}.sv .d8{animation-delay:.9s}.sv .d9{animation-delay:1.02s}
.sv .d10{animation-delay:1.14s}

/* --- the running system: each service reports in to the core --- */
@keyframes flow{0%,14%{stroke-dashoffset:22}64%,100%{stroke-dashoffset:-100}}
.sv .pulse{animation:flow 4s cubic-bezier(.45,0,.45,1) infinite}
@keyframes icoFlash{0%,9%{color:var(--on-navy)}17%{color:var(--brand-lite)}38%,100%{color:var(--on-navy)}}
.sv .ico{color:var(--on-navy);animation:icoFlash 4s ease-out infinite}
@keyframes nodeGlow{0%,9%{stroke:rgba(233,240,247,.38)}17%{stroke:var(--brand)}42%,100%{stroke:rgba(233,240,247,.38)}}
.sv .node-bg{animation:nodeGlow 4s ease-out infinite}
.sv .q1{animation-delay:1.35s}.sv .q2{animation-delay:1.75s}
.sv .q3{animation-delay:2.15s}.sv .q4{animation-delay:2.55s}

@keyframes ripple{0%{transform:scale(1.12);opacity:0}16%{opacity:.6}100%{transform:scale(2.95);opacity:0}}
.sv .ripple{transform-box:fill-box;transform-origin:center;animation:ripple 4s ease-out infinite}
.sv .r1{animation-delay:2.5s}.sv .r2{animation-delay:3.2s}
@keyframes beat{0%,52%,100%{transform:scale(1)}64%{transform:scale(1.55)}}
.sv .dot{transform-box:fill-box;transform-origin:center;animation:beat 4s ease-out 1.35s infinite}
@keyframes breathe{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.sv .glow{transform-box:fill-box;transform-origin:center;animation:breathe 10s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sv .f,.sv .p{opacity:1;animation:none}
  .sv .pulse,.sv .ripple{display:none}
  .sv .orbit-a,.sv .orbit-b,.sv .rev-a,.sv .rev-b,
  .sv .ico,.sv .node-bg,.sv .dot,.sv .glow,.hero::after{animation:none}
  *,*::before,*::after{transition-duration:.001ms !important}
}

/* ============ BADGE STRIP ============ */
.badges{position:relative;z-index:5;margin-top:calc(-1 * clamp(2rem,4vw,3.25rem))}
.badge-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
@media (min-width:640px){.badge-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.badge-grid{grid-template-columns:repeat(4,1fr)}}
.badge{background:var(--surface);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.55rem}
.badge .bi{width:26px;height:26px;color:var(--brand)}
.badge h3{font-size:1.02rem}
.badge p{font-size:.92rem;color:var(--muted);margin:0;line-height:1.55}

/* ============ SECTION HEAD ============ */
.shead{max-width:64ch}
.shead .pill{margin-bottom:1.1rem}
.shead h2{margin-bottom:.9rem}
.shead p{color:var(--ink-2);font-size:1.06rem}
.navy .shead p{color:var(--on-navy-2)}
.shead--center{margin-inline:auto;text-align:center}
.shead--center p{margin-inline:auto}

/* ============ SERVICE CARDS ============ */
.cards{display:grid;gap:1.25rem;margin-top:clamp(2.25rem,4vw,3.25rem)}
@media (min-width:680px){.cards{grid-template-columns:1fr 1fr}}
.card{
  position:relative;display:flex;flex-direction:column;gap:.7rem;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.5rem,2.6vw,2.1rem);text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.card::before{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.card:hover{border-color:var(--line);transform:translateY(-3px);box-shadow:var(--shadow)}
.card:hover::before{transform:scaleX(1)}
.card:hover .link-arrow svg{transform:translateX(4px)}
.card.is-lit{border-color:var(--brand);box-shadow:0 0 0 4px rgba(232,62,24,.14)}
.card.is-lit::before{transform:scaleX(1)}
.card-ic{width:clamp(54px,5.2vw,64px);height:clamp(54px,5.2vw,64px);border-radius:14px;
  background:rgba(232,62,24,.1);color:var(--brand);display:grid;place-items:center;
  margin-bottom:.5rem;transition:background-color .2s ease,transform .2s ease}
.card-ic svg{width:clamp(28px,2.7vw,33px);height:clamp(28px,2.7vw,33px)}
.card:hover .card-ic{background:rgba(232,62,24,.16);transform:translateY(-1px)}
.card p{font-size:.985rem;color:var(--ink-2);margin:0}

/* ============ RAIL (one partner) ============ */
.rail{display:grid;gap:0;margin-top:clamp(2.25rem,4vw,3rem);border-top:1px solid var(--navy-line)}
@media (min-width:760px){.rail{grid-template-columns:repeat(4,1fr)}}
.rail-item{padding:1.35rem 1.5rem 1.35rem 0;position:relative}
.rail-item::before{content:"";position:absolute;top:-1px;left:0;width:26px;height:2px;background:var(--brand)}
@media (max-width:759px){
  .rail-item{border-bottom:1px solid var(--navy-line);padding-left:1.15rem}
  .rail-item::before{width:2px;height:100%;top:0}
}
@media (min-width:760px){.rail-item{padding-left:1.35rem}.rail-item:first-child{padding-left:0}.rail-item:first-child::before{left:0}}
.rail-item h4{color:var(--on-navy);margin-bottom:.35rem}
.rail-item p{font-size:.92rem;line-height:1.55;color:var(--on-navy-2);margin:0}

/* ============ ABOUT SPLIT ============ */
.split{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:920px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0;list-style:none}
.tags li{font-family:var(--font-display);font-size:.885rem;font-weight:500;color:var(--ink-2);
  border:1px solid var(--line);border-radius:100px;padding:.4rem .95rem;background:var(--surface);
  display:inline-flex;align-items:center;gap:.5rem}
.tags li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:0 0 auto}

/* ============ CONTACT BAND ============ */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.25rem);align-items:center}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.contact-list{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1px;background:var(--navy-line);border:1px solid var(--navy-line);border-radius:12px;overflow:hidden}
.contact-list li{background:var(--navy);padding:1.1rem 1.35rem;display:flex;align-items:center;gap:.95rem}
.contact-list svg{width:19px;height:19px;color:var(--brand-lite);flex:0 0 auto}
.contact-list .k{display:block;font-family:var(--font-display);font-size:.775rem;color:var(--on-navy-2);margin-bottom:.1rem}
.contact-list a,.contact-list span.v{color:var(--on-navy);text-decoration:none;font-size:1rem;word-break:break-word}
.contact-list a:hover{color:var(--brand-lite)}

/* ============ FOOTER ============ */
.site-footer{background:var(--navy-900);color:var(--on-navy);padding-block:clamp(3.25rem,6vw,4.75rem) 1.75rem}
.foot-grid{display:grid;gap:2.5rem}
@media (min-width:780px){.foot-grid{grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr))}}
.foot-grid h4{color:var(--on-navy);font-size:.87rem;font-weight:500;margin-bottom:1rem;letter-spacing:.02em}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:.6rem}
.foot-grid a{color:var(--on-navy-2);text-decoration:none;font-family:var(--font-display);font-size:.94rem}
.foot-grid a:hover{color:var(--brand-lite)}
.foot-brand p{color:var(--on-navy-2);font-size:.96rem;max-width:40ch;margin-top:1.25rem}
.foot-bottom{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--navy-line);
  display:flex;flex-wrap:wrap;gap:.7rem 1.75rem;align-items:center;justify-content:space-between;
  font-family:var(--font-display);font-size:.855rem;color:var(--on-navy-2)}
.regions{display:flex;gap:1.35rem;flex-wrap:wrap}
.regions span{display:inline-flex;align-items:center;gap:.5rem}
.regions span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-lite)}

/* ============ FLOATING WHATSAPP ============ */
.fab{
  position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:calc(clamp(1rem,3vw,1.75rem) + env(safe-area-inset-bottom,0px));
  z-index:110;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--brand-deep);color:#fff;text-decoration:none;
  font-family:var(--font-display);font-size:.93rem;font-weight:500;
  padding:.8rem 1.2rem;border-radius:100px;box-shadow:0 14px 34px -14px rgba(232,62,24,.95);
  transition:background-color .18s ease,transform .18s ease;
}
.fab:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
.fab svg{width:19px;height:19px;flex:0 0 auto}
.fab span{display:none}
@media (min-width:560px){.fab span{display:inline}}

/* ================= ROUTING ================= */

/* ================= PAGE HERO ================= */
.page-hero{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy);
  padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,4.75rem)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(233,240,247,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,247,.04) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(110% 95% at 80% 18%,#000 0%,transparent 70%);
  mask-image:radial-gradient(110% 95% at 80% 18%,#000 0%,transparent 70%)}
.page-hero::after{content:"";position:absolute;top:-40%;right:-10%;width:56%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(232,62,24,.24) 0%,rgba(232,62,24,.07) 40%,transparent 68%);filter:blur(6px)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:var(--on-navy);max-width:18ch}
.page-hero .hero-lede{max-width:50ch}
.page-hero-grid{display:grid;gap:clamp(2.25rem,4.5vw,3.5rem)}
@media (min-width:980px){.page-hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);align-items:center}}
.page-hero-art{width:100%;max-width:380px;margin-inline:auto}
@media (min-width:980px){.page-hero-art{max-width:none;margin-inline:0}}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--font-display);
  font-size:.855rem;color:var(--on-navy-2);margin-bottom:1.3rem}
.crumb a{color:var(--on-navy-2);text-decoration:none}
.crumb a:hover{color:var(--brand-lite)}
.crumb svg{width:10px;height:10px;opacity:.55}
.draft-note{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-size:.82rem;
  color:var(--on-navy-2);border:1px dashed var(--navy-line);border-radius:100px;padding:.38rem .95rem;margin-bottom:1.1rem}
.draft-note b{color:var(--brand-lite);font-weight:500}

/* ================= STATIC ARTWORK ================= */
.art-svg{width:100%;height:auto;display:block;overflow:visible}
.art-svg .pn{fill:rgba(233,240,247,.05);stroke:rgba(233,240,247,.44);stroke-width:1.5;stroke-linejoin:round}
.art-svg .pns{fill:none;stroke:rgba(233,240,247,.23);stroke-width:1.3;stroke-linejoin:round}
.art-svg .bk{fill:rgba(233,240,247,.16)}
.art-svg .bks{fill:rgba(233,240,247,.075)}
.art-svg .ln{fill:none;stroke:rgba(233,240,247,.46);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art-svg .lns{fill:none;stroke:rgba(233,240,247,.24);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.art-svg .ac{fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.art-svg .acf{fill:var(--brand);stroke:none}
.art-svg .dsh{fill:none;stroke:rgba(233,240,247,.28);stroke-width:1.2;stroke-dasharray:4 5;stroke-linecap:round}
@keyframes softPulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes dashFlow{to{stroke-dashoffset:-54}}
@keyframes drawLine{0%,10%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:0}}
@keyframes ringOut{0%{transform:scale(.92);opacity:.7}70%,100%{transform:scale(1.85);opacity:0}}
@keyframes growBar{0%,8%{transform:scaleX(.08)}55%,100%{transform:scaleX(1)}}
.art-svg .blink{animation:softPulse 3s ease-in-out infinite}
.art-svg .flow{animation:dashFlow 2.4s linear infinite}
.art-svg .draw{stroke-dasharray:100;animation:drawLine 4.2s ease-in-out infinite}
.art-svg .ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:ringOut 3s ease-out infinite}
.art-svg .grow,.art-svg .meter{transform-box:fill-box;transform-origin:left center;animation:growBar 4.2s ease-in-out infinite}
.art-svg .dl1{animation-delay:.5s}
.art-svg .dl2{animation-delay:1s}
@media (prefers-reduced-motion:reduce){
  .art-svg .blink,.art-svg .flow,.art-svg .draw,.art-svg .grow,.art-svg .meter{animation:none}
  .art-svg .ripple{display:none}
  .art-svg .grow,.art-svg .meter{transform:none}
}

/* white cards sitting inside a navy band must keep dark text */
.navy .card h3,.navy .badge h3,.navy .feat-item h3{color:var(--ink)}
.navy .card p,.navy .badge p,.navy .feat-item p{color:var(--ink-2)}
.navy .feat-item p,.navy .badge p{color:var(--muted)}
.navy .card .link-arrow{color:var(--brand-deep)}
.navy .note summary{color:var(--brand-deep)}
.navy .note-body p,.navy .note-body li{color:var(--ink-2)}
.navy .side-panel h3{color:var(--ink)}
.navy .side-panel a,.navy .side-panel .v{color:var(--ink)}

/* ================= CONTENT BLOCKS ================= */
.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:920px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}

.ruled{list-style:none;margin:clamp(1.75rem,3.5vw,2.5rem) 0 0;padding:0;border-top:1px solid var(--line)}
.ruled li{border-bottom:1px solid var(--line);padding:clamp(1.35rem,2.6vw,1.95rem) 0;display:grid;gap:.55rem 2.5rem}
@media (min-width:820px){.ruled li{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}}
.ruled h3{color:var(--ink)}
.ruled p{color:var(--ink-2);margin:0}
.navy .ruled,.navy .ruled li{border-color:var(--navy-line)}
.navy .ruled h3{color:var(--on-navy)}
.navy .ruled p{color:var(--on-navy-2)}

.rows{list-style:none;margin:1.85rem 0 0;padding:0;border-top:1px solid var(--line-soft)}
.rows li{border-bottom:1px solid var(--line-soft);padding:1rem 0;display:grid;gap:.2rem}
@media (min-width:700px){.rows li{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:1.75rem;align-items:baseline}}
.rows .k{font-family:var(--font-display);font-size:.95rem;font-weight:500;color:var(--brand-deep)}
.rows .v{color:var(--ink-2);font-size:1rem;line-height:1.6}
.navy .rows,.navy .rows li{border-color:var(--navy-line)}
.navy .rows .k{color:var(--brand-lite)}
.navy .rows .v{color:var(--on-navy-2)}

.steps{counter-reset:s;list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)}
.steps li{counter-increment:s;border-bottom:1px solid var(--line);padding:1.15rem 0 1.15rem 3.2rem;position:relative}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.35rem;
  font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--brand-deep)}
.steps h4{margin-bottom:.25rem}
.steps p{margin:0;color:var(--ink-2);font-size:1rem}
.navy .steps,.navy .steps li{border-color:var(--navy-line)}
.navy .steps li::before{color:var(--brand-lite)}
.navy .steps p{color:var(--on-navy-2)}

.feat{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:640px){.feat{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.feat{grid-template-columns:repeat(3,1fr)}}
.feat-item{background:var(--surface);padding:1.7rem 1.55rem;display:flex;flex-direction:column;gap:.5rem}
.feat-item .fi{width:42px;height:42px;border-radius:11px;background:rgba(232,62,24,.1);color:var(--brand);
  display:grid;place-items:center;margin-bottom:.45rem}
.feat-item .fi svg{width:22px;height:22px}
.feat-item h3{font-size:1.04rem}
.feat-item p{font-size:.94rem;color:var(--muted);margin:0;line-height:1.55}

.faq{border-top:1px solid var(--line);margin-top:2rem}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:flex-start;
  justify-content:space-between;gap:1.25rem;padding:1.35rem 0;text-align:left;
  font-family:var(--font-display);font-size:clamp(1.02rem,1.5vw,1.16rem);font-weight:500;
  letter-spacing:-.015em;line-height:1.35;color:var(--ink)}
.faq-q:hover{color:var(--brand-deep)}
.faq-q .sign{flex:0 0 auto;width:18px;height:18px;margin-top:.26rem;color:var(--brand);transition:transform .22s ease}
.faq-q[aria-expanded="true"] .sign{transform:rotate(45deg)}
.faq-a{display:none;padding:0 0 1.5rem;max-width:68ch}
.faq-a[data-open="true"]{display:block}
.faq-a p{color:var(--ink-2);margin:0}

.note{margin-top:1.85rem;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.note summary{cursor:pointer;padding:1rem 1.2rem;font-family:var(--font-display);font-size:.96rem;
  font-weight:500;color:var(--brand-deep);list-style:none;display:flex;align-items:center;gap:.6rem}
.note summary::-webkit-details-marker{display:none}
.note summary::before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease;flex:0 0 auto}
.note[open] summary::before{transform:rotate(45deg)}
.note-body{padding:1.1rem 1.2rem 1.2rem;border-top:1px solid var(--line-soft)}
.note-body p,.note-body li{font-size:.96rem;color:var(--ink-2)}
.note ul{margin:0 0 1em;padding-left:1.2rem}
.note li{margin-bottom:.45rem}

.photo{margin:clamp(1.5rem,3vw,2.25rem) 0 0;border:1.5px dashed var(--line);border-radius:14px;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(11,27,46,.022) 11px 22px),var(--surface-2);
  display:grid;place-items:center;text-align:center;padding:clamp(2.5rem,7vw,4.75rem) 1.5rem;gap:.5rem}
.photo svg{width:34px;height:34px;color:var(--brand);opacity:.8}
.photo .pt{font-family:var(--font-display);font-size:1.04rem;font-weight:500;color:var(--ink)}
.photo .ph{font-size:.9rem;color:var(--muted);max-width:46ch;margin:0}
.navy .photo{border-color:var(--navy-line);
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(233,240,247,.028) 11px 22px),rgba(233,240,247,.03)}
.navy .photo .pt{color:var(--on-navy)}
.navy .photo .ph{color:var(--on-navy-2)}

/* ================= FORM ================= */
.form-shell{display:grid;gap:clamp(2rem,4vw,3.25rem)}
@media (min-width:980px){.form-shell{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}
.field-grid{display:grid;gap:1.15rem 1.35rem;margin-top:1.85rem}
@media (min-width:640px){.field-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--wide{grid-column:1/-1}
.field label{font-family:var(--font-display);font-size:.9rem;font-weight:500;color:var(--ink)}
.field .hint{font-family:var(--font-body);font-size:.85rem;color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:.75rem .9rem;
  min-height:50px;width:100%;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%234E6885' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:12px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(232,62,24,.16)}
.field [aria-invalid="true"]{border-color:#C0392B}
.err{font-family:var(--font-display);font-size:.83rem;color:#C0392B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#F09277}}
:root[data-theme="dark"] .err{color:#F09277}
.form-status{margin-top:1.6rem;padding:1.4rem 1.55rem;border:1px solid var(--brand);border-left-width:4px;
  border-radius:8px;background:rgba(232,62,24,.06);display:none}
.form-status[data-open="true"]{display:block}
.form-status h3{margin-bottom:.45rem;color:var(--brand-deep)}
.form-status p{color:var(--ink-2);font-size:1rem}
.side-panel{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:1.6rem;box-shadow:var(--shadow)}
.side-panel h3{margin-bottom:1rem}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{padding:.9rem 0;border-bottom:1px solid var(--line-soft);display:flex;gap:.85rem;align-items:flex-start}
.side-list li:last-child{border-bottom:0;padding-bottom:0}
.side-list svg{width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:.2rem}
.side-list .k{display:block;font-family:var(--font-display);font-size:.78rem;color:var(--muted);margin-bottom:.1rem}
.side-list a,.side-list .v{color:var(--ink);text-decoration:none;font-size:1rem;word-break:break-word}
.side-list a:hover{color:var(--brand-deep)}

@media (min-width:780px){.foot-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.wash{background:var(--surface-2)}

/* ================= PHOTOGRAPHS ================= */
.shot{margin:clamp(1.5rem,3vw,2.25rem) 0 0;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow);line-height:0}
.shot img{width:100%;height:auto;display:block}
.navy .shot{border-color:var(--navy-line);box-shadow:none}