/* ============================================================
   The Meraki Partnership: v3
   Inspired by systemsltd.com: near-black cinematic hero, white body,
   big light headlines against bold section heads, one accent gradient.
   Every colour, size and spacing value lives in :root below.
   ============================================================ */
:root{
  /* Surfaces */
  --ink:      #05070D;   /* hero, contact, dark bands */
  --ink-2:    #0D111B;   /* dark cards */
  --ink-3:    #1C2231;   /* hairlines on dark */
  --paper:    #FFFFFF;
  --band:     #F5F6F8;   /* light grey alternating band */
  --line:     #E4E7EC;

  /* Accent: Meraki blue into cyan (Systems Ltd uses purple into orange) */
  --blue:     #1150CC;   /* buttons + links on white, 6.9:1 */
  --blue-lt:  #5B93FF;   /* accents on dark */
  --cyan:     #36C2F0;
  --grad:     linear-gradient(90deg, #1150CC 0%, #5B93FF 55%, #36C2F0 100%);

  /* Text */
  --text:       #0B0D12;
  --text-soft:  #586070;   /* 6.2:1 on white */
  --on-dark:    #FFFFFF;
  --on-dark-2:  #A9B1C2;   /* 8.4:1 on ink */

  /* Type: one family, many weights */
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --t-hero: clamp(2.35rem, 1.4rem + 3.4vw, 4.1rem);
  --t-h2:   clamp(1.8rem, 1.3rem + 1.7vw, 2.6rem);
  --t-h3:   clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --t-lead: clamp(1rem, .95rem + .3vw, 1.15rem);
  --t-small: .9375rem;
  --t-micro: .75rem;

  --gut: clamp(1rem, .4rem + 2.4vw, 2.5rem);
  --sec: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --max: 1440px;
  --head-h: 76px;
  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================ Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--sans);
  font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg,video,canvas{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; line-height:1.12}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
:focus-visible{outline:2px solid var(--blue-lt); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-999px; top:0; z-index:100; background:var(--paper); color:var(--text); padding:.75rem 1rem}
.skip:focus{left:1rem; top:1rem}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut)}

/* Type roles */
h1,.h1{font-size:var(--t-hero); font-weight:400; letter-spacing:-.03em}
.h2{font-size:var(--t-h2); font-weight:700}
.lead{font-size:var(--t-lead); color:var(--text-soft); line-height:1.65}
.sub{color:var(--text-soft); font-size:var(--t-small); text-transform:uppercase; letter-spacing:.12em; font-weight:600; margin-top:.6rem}
.kicker{font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.16em; font-weight:700; color:var(--blue)}

/* ============================================================ Buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-weight:700; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease)}
.btn span{transition:transform .25s var(--ease)}
.btn:hover span{transform:translateX(4px)}
.btn-pill{padding:.85rem 1.4rem; border-radius:999px; border:1.5px solid transparent}
.btn-white{background:var(--paper); color:var(--ink)}
.btn-white:hover{background:var(--blue-lt); color:var(--paper)}
.btn-ghost{border-color:rgba(255,255,255,.7); color:var(--paper)}
.btn-ghost:hover{background:var(--paper); color:var(--ink)}
.btn-outline-dark{border-color:var(--text); color:var(--text)}
.btn-outline-dark:hover{background:var(--text); color:var(--paper)}
.link-arrow{display:inline-flex; gap:.5rem; align-items:center; font-weight:700; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none; color:var(--text)}
.link-arrow span{transition:transform .25s var(--ease)}
.link-arrow:hover span{transform:translateX(4px)}

/* ============================================================ Header */
.head{position:fixed; inset:0 0 auto; z-index:50; height:var(--head-h); color:var(--on-dark);
  transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease)}
.head.stuck{background:rgba(255,255,255,.96); color:var(--text); box-shadow:0 1px 0 var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px)}
.head-in{position:relative; height:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem}
.brand{font-weight:500; font-size:1.55rem; letter-spacing:-.04em; text-decoration:none; line-height:1}
.brand span{font-weight:300; margin-left:.1em; color:var(--blue-lt)}   /* accent blue, legible on the dark hero */
.head.stuck .brand span{color:var(--blue)}                              /* the deeper blue once the bar turns white */
.nav{display:flex; align-items:center; gap:.25rem}
.nav-item{position:relative}
.nav-link{display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .85rem; font-size:.875rem;
  font-weight:600; text-decoration:none; border-radius:8px}
.nav-link:hover{opacity:.75}
.caret{width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .25s var(--ease)}
.has-menu.open .caret{transform:translateY(1px) rotate(-135deg)}
.nav-cta{margin-left:.75rem; background:var(--paper); color:var(--ink); padding:.7rem 1.15rem}
.nav-cta:hover{background:var(--blue-lt); color:var(--paper)}
.head.stuck .nav-cta{background:var(--blue); color:var(--paper)}
.head.stuck .nav-cta:hover{background:var(--ink)}

/* Dropdowns */
.menu{position:absolute; top:calc(100% + 14px); left:0; background:var(--paper); color:var(--text);
  border-radius:var(--r); box-shadow:0 24px 60px -12px rgba(5,7,13,.35), 0 0 0 1px rgba(5,7,13,.06);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s}
.menu::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px}  /* hover bridge */
.has-menu.open .menu{opacity:1; visibility:visible; transform:none}
.drop{min-width:210px; padding:.5rem}
.drop a{display:block; padding:.65rem .9rem; border-radius:8px; font-size:.9rem; font-weight:500; text-decoration:none}
.drop a:hover{background:var(--band)}
.nav-item.mega-host{position:static}
.mega::before{top:-30px; height:30px}
.mega{width:min(760px, calc(100% - 2 * var(--gut))); left:auto; right:var(--gut); top:calc(100% - 6px); display:grid; grid-template-columns:230px 1fr; padding:1.75rem; gap:1.75rem}
.mega-intro{border-right:1px solid var(--line); padding-right:1.5rem; display:flex; flex-direction:column; gap:.9rem}
.mega-intro p:not(.kicker){font-size:.9rem; color:var(--text-soft)}
.mega-intro .link-arrow{margin-top:auto; color:var(--blue)}
.mega-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.25rem}
.mega-list a{display:block; padding:.7rem .85rem; border-radius:10px; text-decoration:none}
.mega-list a:hover{background:var(--band)}
.mega-list b{display:block; font-size:.92rem; font-weight:700}
.mega-list span{display:block; font-size:.8rem; color:var(--text-soft); margin-top:.15rem}

.burger{display:none; width:44px; height:44px; position:relative}
.burger span{position:absolute; left:11px; right:11px; height:1.5px; background:currentColor; transition:transform .3s var(--ease)}
.burger span:first-child{top:17px}
.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* ============================================================ Hero */
.hero{position:relative; min-height:100vh; min-height:100svh; background:var(--ink); color:var(--on-dark);
  display:flex; align-items:center; overflow:hidden; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(38% 55% at 70% 50%, rgba(17,80,204,.32), transparent 70%), var(--ink)}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:screen}
#hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease)}
#hero-video.ready{opacity:1}
.hero-shade{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,7,13,.92) 0%, rgba(5,7,13,.55) 42%, rgba(5,7,13,0) 70%),
             linear-gradient(0deg, rgba(5,7,13,.8) 0%, rgba(5,7,13,0) 30%)}
.hero-in{position:relative; padding-top:calc(var(--head-h) + 3rem); padding-bottom:7rem}
.hero h1{margin-bottom:1.5rem; max-width:18ch}
.hero-lead{font-size:var(--t-lead); color:#D3D9E6; margin-bottom:2.25rem; max-width:34rem; line-height:1.55}

/* ============================================================ Sections */
.sec{padding:var(--sec) 0}
.sec-tight{padding-bottom:calc(var(--sec) * .6)}
.band{background:var(--band)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(2rem, 1.5rem + 2vw, 3.25rem)}
.sec-head .sub{margin-top:.75rem}
.sec-intro{margin-top:1.1rem; max-width:52rem; color:var(--text-soft); font-size:var(--t-lead); line-height:1.6}
.ink .sec-intro{color:var(--on-dark-2)}

/* Reveal on scroll */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ============================================================ Client reviews
   Quote leads, attribution and the client's own link sit under it.
   Same sideways-scrolling treatment as the capabilities row. */
.quotes-row{display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:0 max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) .5rem;
  scroll-padding:0 max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)))}
.quotes-row::-webkit-scrollbar{display:none}
.quote{flex:none; width:min(380px, 84vw); scroll-snap-align:start; margin:0; display:flex; flex-direction:column;
  background:var(--ink-2); color:var(--on-dark); border-radius:var(--r); padding:2rem 1.75rem 1.6rem;
  position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.quote::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--grad)}
.quote:hover{transform:translateY(-3px); box-shadow:0 22px 50px -26px rgba(5,7,13,.8)}
.quote blockquote{margin:0 0 1.5rem; font-size:1.2rem; font-weight:500; line-height:1.45; letter-spacing:-.01em}
.quote figcaption{margin-top:auto; display:flex; flex-direction:column; gap:.15rem;
  padding-top:1.1rem; border-top:1px solid var(--ink-3)}
.q-who{font-size:.95rem; font-weight:700}
.q-org{font-size:.9rem; color:var(--on-dark-2)}
.q-link{margin-top:.5rem; font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--blue-lt);
  text-decoration:none; width:fit-content; border-bottom:1px solid transparent; word-break:break-word}
.q-link:hover{border-color:currentColor}

/* ============================================================ About + stats */
.intro{margin-bottom:clamp(3rem, 2rem + 3vw, 4.5rem)}
.intro .lead{max-width:62rem; margin-bottom:1.15rem}
.intro .lead:last-of-type{margin-bottom:clamp(2.5rem, 2rem + 2vw, 3.5rem)}
.stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(1.25rem, .5rem + 2vw, 2.5rem)}
.stat{padding-top:1.5rem; position:relative}
.stat::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad)}
.stat b{display:block; font-size:clamp(2.75rem, 1.8rem + 3vw, 4.5rem); font-weight:300; letter-spacing:-.04em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:.9rem; font-size:1.05rem; line-height:1.4}

/* ============================================================ Platform strip
   Understated band of platform names, drifting sideways. Set in the page
   font and desaturated so it reads as a quiet line of proof, not a
   billboard. Swap the <li> text for <img> logos and they inherit the
   same greyscale and sizing. */
.plats{padding:clamp(2.5rem, 2rem + 1.5vw, 3.5rem) 0; border-bottom:1px solid var(--line); overflow:hidden}
.plats-head{font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:1.75rem}
.plats-rail{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.plats-track{display:flex; align-items:center; gap:clamp(2.75rem, 1.75rem + 3.2vw, 5.5rem);
  list-style:none; margin:0; padding:0; width:max-content; animation:platdrift 38s linear infinite}
.plats:hover .plats-track{animation-play-state:paused}
@keyframes platdrift{to{transform:translateX(calc(-50% - clamp(1.25rem, .75rem + 1.5vw, 2.5rem)))}}
.plat{flex:none; display:grid; place-items:center}
/* One height for every logo, aspect ratio kept, greyscale and held back
   so the strip reads as quiet proof rather than a wall of branding. */
.plat img{height:clamp(34px, 28px + 1.2vw, 48px); width:auto; max-width:clamp(110px, 85px + 4.5vw, 165px);
  object-fit:contain; filter:grayscale(1) contrast(1.05); opacity:.7;
  transition:filter .3s var(--ease), opacity .3s var(--ease)}
.plat:hover img{filter:grayscale(0); opacity:1}
/* Two logos need a nudge so the row reads evenly: Power BI is pale to
   begin with, SAP is a solid dark block. */
.plat-lift img{opacity:1; filter:grayscale(1) contrast(1.75) brightness(.7); height:clamp(30px, 25px + 1vw, 42px)}
.plat-calm img{opacity:.55}
.plat-lift:hover img,.plat-calm:hover img{filter:grayscale(0); opacity:1}

/* ============================================================ Services */
.row-ctrl{display:flex; gap:.6rem}
.arrow-dark{border-color:var(--line); color:var(--text); background:var(--paper)}
.arrow-dark:hover{border-color:var(--text); background:var(--paper)}
.arrow-dark:disabled{opacity:.35; cursor:default}
.svc-row{display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:0 max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) .5rem;
  scroll-padding:0 max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)))}
.svc-row::-webkit-scrollbar{display:none}
.svc{flex:none; width:min(360px, 82vw); min-height:480px; scroll-snap-align:start; background:var(--paper);
  border-radius:var(--r); padding:2rem 1.75rem 0; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 0 0 1px rgba(5,7,13,.05); transition:box-shadow .3s var(--ease), transform .3s var(--ease)}
.svc:hover{box-shadow:0 20px 50px -20px rgba(17,80,204,.35), 0 0 0 1px rgba(17,80,204,.15); transform:translateY(-3px)}
.svc.flash{box-shadow:0 0 0 2px var(--blue)}
.svc h3{font-size:clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight:600; letter-spacing:-.03em; line-height:1.08}
.svc p{font-size:.92rem; color:var(--text-soft); margin:1rem 0 1.1rem}
/* Supporting line: louder than the description, quieter than the title,
   and divided off from the CTA below it. */
.svc .svc-line{font-size:1.05rem; font-weight:700; line-height:1.35; letter-spacing:-.01em;
  color:var(--text); margin:0 0 1.15rem; padding-bottom:1.15rem; border-bottom:1px solid var(--line)}
.svc .link-arrow{color:var(--blue)}
.svc-art{max-width:none; margin:auto -1.75rem 0; width:calc(100% + 3.5rem); height:170px}

/* ============================================================ Process (dark)
   Steps and team sit in a left column the same width as the photo row, so
   the two line up; the particle panel fills the space beside them. */
.how-grid{display:grid; grid-template-columns:1fr; gap:clamp(2rem, 1rem + 2.5vw, 3.5rem); align-items:stretch}
.how-main{min-width:0}
.how-art{display:none; position:relative; border-radius:var(--r); overflow:hidden; min-height:100%;
  background:radial-gradient(60% 60% at 50% 45%, rgba(17,80,204,.28), transparent 70%), #070A12;
  box-shadow:inset 0 0 0 1px var(--ink-3)}
#how-canvas{position:absolute; inset:0; width:100%; height:100%}


.ink{background:var(--ink); color:var(--on-dark)}
.ink .sub{color:var(--on-dark-2)}
.steps{list-style:none; margin:0 0 clamp(2.5rem, 2rem + 2vw, 3.5rem); padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; counter-reset:s}
.steps li{border-top:1px solid var(--ink-3); padding-top:1.5rem; position:relative}
.steps li::before{content:""; position:absolute; top:-1px; left:0; width:40px; height:2px; background:var(--grad)}
.steps b{font-size:.8rem; letter-spacing:.14em; color:var(--blue-lt)}
.steps h3{font-size:1.15rem; font-weight:700; margin:.9rem 0 .6rem}
.steps p{font-size:.875rem; line-height:1.55; color:var(--on-dark-2)}

/* ============================================================ Team */
.team{display:grid; grid-template-columns:repeat(5, minmax(0, 150px)); gap:1.5rem}
.person{display:flex; flex-direction:column; max-width:150px}
.face{aspect-ratio:4/5; border-radius:var(--r); margin-bottom:1rem; display:grid; place-items:center; overflow:hidden;
  font-size:1.6rem; font-weight:300; color:var(--on-dark);
  background:radial-gradient(90% 70% at 30% 20%, #1D4FB8, transparent 70%), radial-gradient(80% 80% at 90% 100%, #0F6C95, transparent 70%), var(--ink-2)}
.face img{width:100%; height:100%; object-fit:cover}
.person-meta{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem}
.person b{display:block; font-size:.95rem}
.ink .person span{color:var(--on-dark-2)}
.ink .person-li{background:rgba(255,255,255,.08); color:#fff}
.ink .person-li:hover{background:#0A66C2; color:#fff}
.person span{display:block; font-size:.8rem; line-height:1.35; color:var(--text-soft)}
.person-li{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--band); color:var(--text); transition:background .2s, color .2s}
.person-li:hover{background:#0A66C2; color:#fff}
.person-li svg{width:15px; height:15px; fill:currentColor}

/* ============================================================ FAQ */
.faq-wrap{display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(2rem, 1rem + 4vw, 5rem)}
.faq-wrap .lead{margin-top:1rem}
.faq-wrap .lead a{color:var(--blue); font-weight:600}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0; font-weight:600; font-size:1.05rem; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:.4rem; top:50%; width:10px; height:10px; border-right:1.5px solid; border-bottom:1.5px solid;
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq details p{padding:0 2.5rem 1.5rem 0; color:var(--text-soft)}

/* ============================================================ Contact */
.contact{position:relative; background:var(--ink); color:var(--on-dark); padding:var(--sec) 0; overflow:hidden; isolation:isolate}
.contact-glow{position:absolute; z-index:-1; width:900px; height:900px; right:-300px; top:-300px; border-radius:50%;
  background:radial-gradient(circle, rgba(17,80,204,.35), transparent 65%)}
.contact-in{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2.5rem, 1rem + 5vw, 6rem)}
.contact .h1{font-size:clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem)}
.details{margin-top:2.5rem; display:grid; gap:1.1rem}
.details p{display:flex; flex-direction:column}
.details span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); font-weight:600}
.details a{font-size:1.05rem; text-decoration:none; width:fit-content; border-bottom:1px solid transparent}
.details a:hover{border-color:currentColor}
.hidden-field{position:absolute; left:-9999px; visibility:hidden}   /* spam trap */
.form{display:grid; grid-template-columns:1fr 1fr; gap:1.35rem 1.25rem}
.field{display:flex; flex-direction:column; gap:.45rem}
.full{grid-column:1/-1}
.field label{font-size:.82rem; font-weight:600; color:#D3D9E6}
.field em{color:var(--blue-lt); font-style:normal}
.field input,.field select,.field textarea{font:inherit; color:var(--on-dark); background:transparent; border:0;
  border-bottom:1px solid #3A4358; padding:.6rem 0; border-radius:0; transition:border-color .2s; width:100%}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A9B1C2' stroke-width='1.5'/%3E%3C/svg%3E") right .2rem center/12px no-repeat}
.field select option{color:var(--text)}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue-lt)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#FF7A7A}
.form-foot{display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:.5rem}
#form-note{font-size:.88rem; color:var(--on-dark-2)}

/* ============================================================ Footer */
.foot{padding:clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 2rem; background:var(--paper)}
.foot-cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line)}
.brand-dark{color:var(--text); display:inline-block; margin-bottom:1rem}
.brand-dark span{color:var(--blue)}
.foot-brand p{color:var(--text-soft); font-size:.9rem; max-width:22rem}
.foot h4{font-size:1.15rem; font-weight:600; margin-bottom:1.1rem}
.foot-cols > div:not(.foot-brand) a{display:block; text-decoration:none; font-size:.9rem; padding:.3rem 0; color:var(--text-soft)}
.foot-cols a:hover{color:var(--blue)}
.foot-base{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1.75rem; flex-wrap:wrap}
.foot-base p{font-size:.85rem; color:var(--text-soft)}
.socials{display:flex; gap:.6rem}
.socials a{width:38px; height:38px; border-radius:50%; background:var(--band); display:grid; place-items:center; transition:background .2s, color .2s}
.socials a:hover{background:var(--blue); color:#fff}
.socials svg{width:16px; height:16px; fill:currentColor}

/* Wide screens only: five capability cards without scrolling, and the
   steps/team column sized to the photo row with the panel beside it. */
@media (min-width:1200px){
  .how-grid{grid-template-columns:846px minmax(0, 1fr)}
  .how-art{display:block}
  .svc-row{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1rem; overflow:visible;
    width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut) .25rem}
  .svc{width:auto; min-height:0; padding:1.75rem 1.4rem 0}
  .svc h3{font-size:1.45rem}
  .svc p{font-size:.86rem; margin:.9rem 0 1rem}
  .svc .svc-line{font-size:.95rem; margin-bottom:1rem; padding-bottom:1rem}
  .svc .link-arrow{font-size:.75rem}
  .svc-art{margin:auto -1.4rem 0; width:calc(100% + 2.8rem); height:130px}
  #capabilities .row-ctrl{display:none}
}

/* ============================================================ Responsive */
@media (max-width:1080px){
  .steps{grid-template-columns:1fr 1fr; gap:2rem 1.25rem}
}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed; inset:var(--head-h) 0 0; background:var(--paper); color:var(--text); flex-direction:column; align-items:stretch;
    padding:1rem var(--gut) 2rem; gap:0; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s}
  .nav[data-open="true"]{opacity:1; visibility:visible; transform:none}
  .head.menu-open{background:var(--paper); color:var(--text); -webkit-backdrop-filter:none; backdrop-filter:none}
  .nav-link{width:100%; justify-content:space-between; padding:1.05rem 0; font-size:1.15rem; border-bottom:1px solid var(--line); border-radius:0}
  .menu{position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; padding:.25rem 0 .75rem}
  .menu::before{display:none}
  .has-menu.open .menu{display:block}
  .mega{width:auto; grid-template-columns:1fr}
  .mega-intro{display:none}
  .mega-list{grid-template-columns:1fr}
  .mega-list a,.drop a{padding:.6rem 0 .6rem 1rem}
  .mega-list span{display:none}
  .nav-cta{margin:1.5rem 0 0; justify-content:center; background:var(--blue); color:#fff; padding:1rem}
  .faq-wrap,.contact-in{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr; row-gap:2.5rem}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .team{grid-template-columns:repeat(3, minmax(0, 145px))}
  .person{max-width:145px}
  .hero-shade{background:linear-gradient(0deg, rgba(5,7,13,.95) 10%, rgba(5,7,13,.45) 60%, rgba(5,7,13,.3))}
  .hero{align-items:flex-end}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2, minmax(0, 135px))}
  .person{max-width:135px}
  .form{grid-template-columns:1fr}
  .row-ctrl{display:none}
  .hero h1 br{display:none}
  .foot-cols{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  .plats-track{animation:none; flex-wrap:wrap; width:auto; padding:0 var(--gut); gap:1.5rem 2.5rem}
}