/* ==================================================================
   KINETIC — pale blue daylight, white panels floating on it, and a
   header that sits away from the top edge.

   Layered over style.css. Scoped to [data-style="kinetic"] throughout.
================================================================== */

[data-style="kinetic"]{
  --f-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Azeret Mono",ui-monospace,SFMono-Regular,monospace;
  --r:18px; --r-lg:30px;
  --pan:clamp(20px,3.4vw,40px);   /* panel radius */
  --wrap:1280px; --gut:clamp(16px,4vw,52px);
}

[data-style="kinetic"][data-theme="light"]{
  --bg:#EDF1F7; --bg-2:#E2EAF5; --surf:#FFFFFF; --surf-2:#F5F8FD;
  --text:#414B68; --head:#0F1436; --muted:#5C6680;   /* 5.0:1 on the page colour */
  --line:rgba(15,20,54,.10); --line-2:rgba(22,103,200,.32);
  --accent:#1667C8; --accent-ink:#fff;
  --amber-text:#A85408;
  --amber-line:rgba(168,84,8,.36);
  --card:#FFFFFF;
  --shadow:0 28px 54px -30px rgba(15,20,54,.34);
  --glow:0 0 46px -18px rgba(22,103,200,.42);
  --amber-glow:0 16px 34px -14px rgba(230,126,34,.5);
}
[data-style="kinetic"][data-theme="dark"]{
  --bg:#0A0F20; --bg-2:#101833; --surf:#16203E; --surf-2:#1D2A4C;
  --text:#D3DCF0; --head:#FFFFFF; --muted:#8B97B6;
  --line:rgba(160,190,255,.14); --line-2:rgba(79,210,255,.34);
  --accent:#4FD2FF; --accent-ink:#06132B;
  --amber-text:#F5A93F;
  --amber-line:rgba(245,169,63,.4);
  --card:#16203E;
  --shadow:0 30px 60px -30px #000;
  --glow:0 0 56px -14px rgba(79,210,255,.4);
  --amber-glow:0 16px 36px -14px rgba(245,169,63,.42);
}

/* ---------------- type ---------------- */
[data-style="kinetic"] h1,[data-style="kinetic"] h2,
[data-style="kinetic"] h3,[data-style="kinetic"] h4{letter-spacing:-.035em;font-weight:700}
[data-style="kinetic"] h1{font-size:clamp(2.4rem,5.8vw,4.9rem);line-height:1.01}
[data-style="kinetic"] h2{font-size:clamp(1.85rem,3.4vw,3rem);line-height:1.06}
[data-style="kinetic"] body{font-size:clamp(16px,.34vw + 15.1px,18px);line-height:1.74}
[data-style="kinetic"] .eyebrow{font-size:.68rem;letter-spacing:.16em;gap:.6rem}
[data-style="kinetic"] .eyebrow::before{width:20px;height:6px;border-radius:99px}

/* ---------------- header floats ---------------- */
[data-style="kinetic"] .hdr{padding-top:clamp(10px,1.6vw,18px);background:none!important;
  border:0!important;backdrop-filter:none!important}
[data-style="kinetic"] .hdr__in{
  height:66px;max-width:1160px;padding-inline:clamp(14px,2vw,22px);
  background:var(--surf);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 10px 30px -22px rgba(15,20,54,.6);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
[data-style="kinetic"] .hdr.stuck .hdr__in{box-shadow:0 18px 44px -26px rgba(15,20,54,.75)}
[data-style="kinetic"] .nav li > a,[data-style="kinetic"] .nav a{font-size:.9rem;padding:.5rem .8rem}
[data-style="kinetic"] .nav li > a::after,[data-style="kinetic"] .nav a::after{bottom:.16rem;height:2px}
[data-style="kinetic"] .nav .sub-menu{border-radius:20px;padding:.5rem}
[data-style="kinetic"] .nav .sub-menu li > a{border-radius:14px}
[data-style="kinetic"] .brand b{letter-spacing:-.045em}
[data-style="kinetic"] .drawer nav li > a{letter-spacing:-.04em}

/* ---------------- hero, centred ---------------- */
[data-style="kinetic"] .hero{padding-top:calc(66px + clamp(44px,7vw,84px))}
[data-style="kinetic"] .hero::before{top:-34%;right:-28%;width:86vw;height:86vw;
  background:radial-gradient(circle,rgba(22,103,200,.16),transparent 62%)}
[data-style="kinetic"] .hero__grid{grid-template-columns:minmax(0,1fr);
  justify-items:center;text-align:center;gap:clamp(30px,4vw,52px)}
[data-style="kinetic"] .hero h1{max-width:16ch;margin-inline:auto}
[data-style="kinetic"] .hero .lead{margin-inline:auto;max-width:54ch}
[data-style="kinetic"] .hero .eyebrow{justify-content:center}
[data-style="kinetic"] .hero__cta{justify-content:center}
[data-style="kinetic"] .hero__media{
  width:100%;aspect-ratio:21/9;border-radius:var(--pan);border-color:var(--line);
  box-shadow:var(--shadow)}
/* the standard fade to the page colour reads as a white smear on a card this
   large, so the hero picture keeps its own edges */
[data-style="kinetic"] .hero__media::after{
  background:linear-gradient(180deg,transparent 70%,color-mix(in srgb,var(--bg) 26%,transparent))}
[data-style="kinetic"] .hero__bg img{opacity:.34;filter:grayscale(.3) saturate(.7) brightness(1.12)}
[data-style="kinetic"][data-theme="dark"] .hero__bg img{opacity:.5;filter:grayscale(.4) saturate(.6) brightness(.6)}

/* the figures become a row of floating chips */
[data-style="kinetic"] .hero__meta{
  padding-top:0;gap:clamp(8px,1.2vw,14px);width:100%;max-width:820px;margin-inline:auto}
[data-style="kinetic"] .hero__meta::before,
[data-style="kinetic"] .hero__meta::after{display:none}
[data-style="kinetic"] .hero__meta div{
  padding:1rem .9rem;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 12px 26px -22px rgba(15,20,54,.7);text-align:center}
[data-style="kinetic"] .hero__meta div::before{display:none!important}
[data-style="kinetic"] .hero__meta b{font-size:clamp(1.5rem,2vw,1.9rem)}

/* ---------------- everything sits on a panel ---------------- */
[data-style="kinetic"] .svc,
[data-style="kinetic"] .cover__i,
[data-style="kinetic"] .faq,
[data-style="kinetic"] .other,
[data-style="kinetic"] .aud__card,
[data-style="kinetic"] .role,
[data-style="kinetic"] .tcard,
[data-style="kinetic"] .map,
[data-style="kinetic"] .eng{
  background:var(--surf);border-color:var(--line);border-radius:var(--pan);
  box-shadow:0 18px 40px -32px rgba(15,20,54,.6)}
[data-style="kinetic"] .faqs{gap:12px}
[data-style="kinetic"] .faq summary{padding:1.35rem 1.6rem}
[data-style="kinetic"] .faq__a{padding:0 1.6rem 1.6rem}
[data-style="kinetic"] .eng{border-left-width:1px;border-left-color:var(--line);
  padding:1.3rem 1.55rem}
[data-style="kinetic"] .eng span{color:var(--amber-text)}
[data-style="kinetic"] .aud__tabs button{border-radius:999px}
[data-style="kinetic"] .subnav{border-radius:999px;margin-inline:auto;max-width:var(--wrap);
  border:1px solid var(--line);background:var(--surf);top:calc(66px + 18px);
  box-shadow:0 14px 34px -28px rgba(15,20,54,.7)}
[data-style="kinetic"] .subnav__in{padding-inline:.5rem}
[data-style="kinetic"] .subnav a{border-radius:999px}

/* ---------------- service cards stagger ---------------- */
[data-style="kinetic"] .svcs{gap:clamp(16px,2vw,26px)}
[data-style="kinetic"] .svc{--stagger:0px;transform:translateY(var(--stagger));
  overflow:visible;padding:10px;border-width:1px}
[data-style="kinetic"] .svc::before{left:10px;right:10px;top:10px;height:3px;border-radius:99px;
  background:var(--amber-grad)}
[data-style="kinetic"] .svc:hover,[data-style="kinetic"] .svc:focus-within{
  transform:translateY(calc(var(--stagger) - 8px));box-shadow:var(--shadow)}
[data-style="kinetic"] .svc__img{border-radius:calc(var(--pan) - 10px);overflow:hidden}
[data-style="kinetic"] .svc__body{padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px)}
[data-style="kinetic"] .svc__no{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--amber-a) 16%,transparent);color:var(--amber-text);
  font-size:.66rem;margin-bottom:1rem}
[data-style="kinetic"] .svc__items li{border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:transparent}
@media(min-width:1001px){
  [data-style="kinetic"] .svcs > .svc:nth-child(2){--stagger:34px}
  [data-style="kinetic"] .svcs > .svc:nth-child(3){--stagger:14px}
}

/* ---------------- process steps get a track ---------------- */
[data-style="kinetic"] .steps li{border-top:0;padding-top:0}
[data-style="kinetic"] .steps li::before{display:none}
[data-style="kinetic"] .steps b{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--surf);border:1px solid var(--line);color:var(--accent);
  font-size:.72rem;letter-spacing:.08em;margin-bottom:1.1rem;position:relative;z-index:1;
  box-shadow:0 10px 22px -18px rgba(15,20,54,.8)}
[data-style="kinetic"] .steps li{position:relative}
[data-style="kinetic"] .steps li:not(:last-child)::after{
  content:"";position:absolute;left:44px;top:22px;right:calc(-1 * clamp(14px,1.6vw,20px));
  height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 11px)}
@media(max-width:1000px){
  [data-style="kinetic"] .steps li:not(:last-child)::after{display:none}
}

/* ---------------- ticks become badges ---------------- */
[data-style="kinetic"] .ticks li{border-bottom:0;padding:.55rem 0}
[data-style="kinetic"] .ticks svg{
  width:30px;height:30px;padding:7px;border-radius:50%;box-sizing:border-box;margin-top:0;
  background:color-mix(in srgb,var(--amber-a) 15%,transparent);color:var(--amber-text)}

/* A photograph behind a pale blue page reads as grey unless it is tinted back
   toward the brand. Tint first, then wash. */
[data-style="kinetic"] .plate img{filter:grayscale(.5) saturate(.85) contrast(1) brightness(1.04)}
[data-style="kinetic"] .plate::after{
  background:
    radial-gradient(130% 95% at 50% 40%,color-mix(in srgb,var(--bg-2) 66%,transparent) 0%,
      color-mix(in srgb,var(--bg-2) 88%,transparent) 58%,var(--bg-2) 100%),
    linear-gradient(150deg,color-mix(in srgb,var(--accent) 16%,transparent),
      color-mix(in srgb,var(--bg-2) 88%,transparent) 68%)}
[data-style="kinetic"] .cta--plate .plate img{opacity:.75}
[data-style="kinetic"] .cta--plate .plate::after{
  background:
    radial-gradient(75% 85% at 50% 50%,color-mix(in srgb,var(--surf) 88%,transparent) 0%,
      color-mix(in srgb,var(--surf) 70%,transparent) 62%,var(--surf) 100%),
    linear-gradient(140deg,color-mix(in srgb,var(--accent) 18%,transparent),
      color-mix(in srgb,var(--surf) 86%,transparent) 70%)}
[data-style="kinetic"][data-theme="dark"] .plate img{filter:grayscale(.45) saturate(.8) brightness(.58)}

/* ---------------- the plate band floats ---------------- */
[data-style="kinetic"] .sec--plate{
  border:0;border-radius:var(--pan);
  margin-inline:clamp(10px,3vw,40px);background:var(--bg-2)}
[data-style="kinetic"] .banner{border-radius:var(--pan);
  margin-inline:clamp(10px,3vw,40px);border-inline:1px solid var(--line);overflow:hidden}

/* ---------------- closing block ---------------- */
[data-style="kinetic"] .cta{
  border-radius:var(--pan);border-color:transparent;
  background:linear-gradient(140deg,var(--surf),color-mix(in srgb,var(--accent) 10%,var(--surf)));
  box-shadow:var(--shadow)}
[data-style="kinetic"] .cta::before{
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%)}
[data-style="kinetic"] .others .other{border-radius:var(--pan)}

/* ---------------- footer is a panel too ---------------- */
[data-style="kinetic"] .ftr{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--pan) var(--pan) 0 0;
  margin-inline:clamp(10px,3vw,40px);border-bottom:0}
[data-style="kinetic"] .ftr__subrow input{border-radius:999px}
[data-style="kinetic"] .ftr__subrow button{border-radius:999px}
[data-style="kinetic"] .fab--top,[data-style="kinetic"] .fab--wa{border-radius:50%}

/* ---------------- odds and ends ---------------- */
[data-style="kinetic"] .media,[data-style="kinetic"] .shero__media,
[data-style="kinetic"] .work__img{border-radius:var(--pan)}
[data-style="kinetic"] .shero__tags li{border-radius:999px}
[data-style="kinetic"] .form input,[data-style="kinetic"] .form textarea,
[data-style="kinetic"] .form select{border-radius:var(--r)}
[data-style="kinetic"] .chips label{border-radius:999px}
[data-style="kinetic"] .prose p:first-of-type{font-weight:600;color:var(--head)}

/* ---------------- narrow screens ---------------- */
@media(max-width:860px){
  [data-style="kinetic"] .subnav{top:calc(66px + 14px);margin-inline:var(--gut)}
}
@media(max-width:560px){
  [data-style="kinetic"] .hdr__in{border-radius:26px;height:62px}
  [data-style="kinetic"] .ftr,[data-style="kinetic"] .sec--plate,
  [data-style="kinetic"] .banner{margin-inline:8px}
  [data-style="kinetic"] .hero__meta{gap:8px}
  [data-style="kinetic"] .hero__meta div{padding:.8rem .5rem}
}
@media(max-width:400px){
  [data-style="kinetic"] .ftr,[data-style="kinetic"] .sec--plate,
  [data-style="kinetic"] .banner{margin-inline:0;border-radius:0;border-inline:0}
  [data-style="kinetic"] .subnav{border-radius:18px;margin-inline:8px}
  [data-style="kinetic"] .svc{padding:7px}
  [data-style="kinetic"] .svc::before{left:7px;right:7px;top:7px}
}