/* ============================================================
   GLYDE - Sections 2 & 3 (desktop, 1440px design)
   ============================================================ */

:root {
  --navy: #010E32;          /* section 2 base */
  --near-black: #0C0C0D;    /* section 3 base */
  --zone-launch: #011D66;
  --zone-build: #022B99;
  --zone-scale: #0339CC;
  --blue: #366DFD;
  --cyan: #03D7FF;
  --cyan-light: #81EBFF;
  --accent-green: #6DFD36;
  --accent-pink: #FD366D;
  --accent-amber: #FFB703;
  --font-display: "Funnel Display", sans-serif;
  --font-lato: "Lato", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* reveal-on-scroll (JS adds .revealed when the element enters view).
   --d = per-element stagger delay. */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease var(--d, 0s),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
[data-reveal].revealed { opacity: 1; transform: none; }
/* circles scale up rather than rise */
.service[data-reveal] { transform: scale(0.72); }
.service[data-reveal].revealed { transform: none; }

/* headline that carries continuously from the hero into Section 2:
   a fixed clone, scroll-morphed in JS between the two real headlines */
.headline-bridge {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 941px;
  max-width: 92vw;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  color: #fff;
  z-index: 8;
  pointer-events: none;
  display: none;
  will-change: top, font-size;
}
.headline-bridge--on { display: block; }

html {
  scroll-behavior: smooth;
  /* keep the scrollbar gutter reserved so unlocking scroll after the
     loader (and any overflow toggling) never shifts the layout */
  scrollbar-gutter: stable;
}

body {
  background: var(--near-black);
  font-family: var(--font-display);
  overflow-x: hidden; /* 768-1439px zoom scaling handles narrow viewports */
  -webkit-font-smoothing: antialiased;
}

/* ------- placeholder bands for unbuilt sections ------- */
.placeholder-section {
  height: 60vh;
  display: grid;
  place-items: center;
  background: #06070f;
  color: rgba(255, 255, 255, 0.25);
  font: 400 14px/1 var(--font-lato);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ============================================================
   SECTION 1 - HERO (scenes 5-7)
   Frame: 1440 x 762, image 1440x810 bleeding 24px top/bottom
   ============================================================ */

.hero {
  position: relative;
  height: 762px;
  background: var(--near-black);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 1440px;
  width: 100%;
  height: 810px;
  object-fit: cover;
}
/* the placeholder still img gets desaturated; the production video is
   already graded B&W with cyan energy baked in, so leave it untouched */
.hero__media img { filter: grayscale(1) contrast(1.05) brightness(0.95); }

/* Pulse animated gradient (Framer preset) - cyan energy over the media */
.hero__pulse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0; /* hidden until the 3s dwell fires (even speed-0 renders a static frame) */
  transition: opacity 1.2s ease;
  display: none; /* shown when WebGL2 initializes */
  pointer-events: none;
}
.hero--pulse .hero__pulse { display: block; }
/* video already has cyan energy baked in — keep this subtle */
.hero--pulse-live .hero__pulse { opacity: 0.28; }

.hero__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }

.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
  background-size: 10px 10px;
  background-position: 0 5px;
}

/* footage darkens to near-black across the lower part of the hero */
.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 300px;
  /* reaches solid near-black before the bottom, so scroll-down sits on black */
  background: linear-gradient(to bottom, transparent, var(--near-black) 62%);
  pointer-events: none;
}

/* --- site nav --- */

.nav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 92px;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.nav__logo { display: inline-block; line-height: 0; }
.nav__logo img { display: block; }

.nav__links { display: flex; gap: 48px; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 16px/1.2 var(--font-lato);
  color: #FAFAFB;
  text-decoration: none;
  transition: color 0.25s ease;
}
.nav__links a:hover { color: var(--cyan); }

.nav__cta {
  font: 600 16px/1.2 var(--font-lato);
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #003BD7 0%, var(--blue) 100%);
  padding: 13px 28px;
  border-radius: 38px;
  transition: filter 0.25s ease;
}
.nav__cta:hover { filter: brightness(1.15); }

/* Floating WhatsApp button — stays hidden until the visitor reaches the case
   studies section (JS toggles .wa-float--in), then sits fixed bottom-right. */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;            /* WhatsApp green */
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.wa-float--in { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wa-float:hover { background: #1EBD5B; }
.wa-float svg { width: 30px; height: 30px; }
body.menu-open .wa-float { opacity: 0; pointer-events: none; }   /* hide behind an open mobile menu */
@media (max-width: 1024px) {
  .wa-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* --- Services dropdown --- */

.nav__drop { position: relative; }

.nav__drop-toggle svg { transition: transform 0.25s ease; }
.nav__drop:hover .nav__drop-toggle svg,
.nav__drop:focus-within .nav__drop-toggle svg { transform: rotate(180deg); }

.nav__drop-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -24px;
  min-width: 300px;
  padding: 10px;
  background: rgba(12, 12, 13, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* invisible bridge so the cursor can cross the gap */
.nav__drop-panel::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav__drop:hover .nav__drop-panel,
.nav__drop:focus-within .nav__drop-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__drop-panel a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  font: 400 14px/1.3 var(--font-lato);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav__drop-panel a:hover { background: rgba(255, 255, 255, 0.07); color: var(--cyan); }

/* --- hamburger (mobile only) --- */

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
/* 3 identical bars — integer 2px height renders evenly (1.6px rounded unevenly
   across the three, making them look unequal) */
.nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* --- mobile menu overlay --- */

.mmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* black canvas — the flame (lava + glow) rises from the bottom */
  background: #000;
  overflow: hidden;
  /* slides in from the right (where the hamburger lives) */
  transform: translateX(102%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.5s;
}
.mmenu--open { transform: translateX(0); visibility: visible; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* staggered entrance: bar fades, links rise one after another */
.mmenu__bar,
.mmenu__links > a,
.mmenu__svc,
.mmenu__sub {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.mmenu__bar { transform: translateY(-14px); }
.mmenu--open .mmenu__bar,
.mmenu--open .mmenu__links > a,
.mmenu--open .mmenu__svc,
.mmenu--open .mmenu__sub {
  opacity: 1;
  transform: translateY(0);
}
.mmenu--open .mmenu__bar { transition-delay: 0.05s; }
.mmenu--open .mmenu__links > :nth-child(1) { transition-delay: 0.12s; }
.mmenu--open .mmenu__links > :nth-child(2) { transition-delay: 0.19s; }
.mmenu--open .mmenu__links > :nth-child(3) { transition-delay: 0.26s; }
.mmenu--open .mmenu__links > :nth-child(4) { transition-delay: 0.33s; }
.mmenu--open .mmenu__links > :nth-child(5) { transition-delay: 0.40s; }

/* QA / reduced motion: no entrance animation */
.mmenu--instant,
.mmenu--instant .mmenu__bar,
.mmenu--instant .mmenu__links > a,
.mmenu--instant .mmenu__svc,
.mmenu--instant .mmenu__sub { transition: none; }

/* lava flames rising from the bottom of the menu */
.mmenu__lava {
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: -20px;
  width: calc(100% + 80px);
  height: 46%;
  display: none; /* shown when WebGL2 initializes */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 60%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 60%);
}
.mmenu--lava .mmenu__lava { display: block; }

.mmenu__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* glows sit at the BOTTOM so they halo the flame; top of the menu stays black */
.mmenu__glow--blue { left: -281px; bottom: -130px; width: 974px; height: 340px; background: var(--blue); filter: blur(140px); }
.mmenu__glow--cyan { left: -102px; bottom: -56px; width: 622px; height: 170px; background: var(--cyan); filter: blur(120px); opacity: 0.85; }

.mmenu__bar {
  position: relative;
  height: 80px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mmenu__bar .nav__logo img { width: 88px; height: 32px; }

.mmenu__close {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.mmenu__links {
  position: relative;
  display: block;
  padding: 48px 16px 0;
}
.mmenu__links > a, .mmenu__svc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  font: 400 24px/1.4 var(--font-display);
  color: #fff;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-align: left;
}
.mmenu__svc svg { transition: transform 0.25s ease; }
.mmenu__svc[aria-expanded="true"] svg { transform: rotate(180deg); }

.mmenu__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  border-bottom: 0 solid rgba(255, 255, 255, 0.08);
}
.mmenu__sub--open { max-height: 240px; border-bottom-width: 1px; }
.mmenu__sub a {
  display: block;
  padding: 12px 0 12px 16px;
  font: 300 16px/1.4 var(--font-display);
  color: #C7C7C7;
  text-decoration: none;
}
.mmenu__sub a:active, .mmenu__sub a:hover { color: var(--cyan); }

.mmenu__links > a.mmenu__cta {
  margin-top: 40px;
  justify-content: center;
  border: 0;
  border-radius: 38px;
  background: linear-gradient(180deg, #003BD7 0%, var(--blue) 100%);
  font: 600 16px/1.2 var(--font-lato);
  padding: 16px 0;
}

/* --- hero content (scene 7) --- */

.hero__content {
  position: absolute;
  top: 181px;
  left: 50%;
  transform: translateX(-50%);
  width: 941px;
  text-align: center;
  z-index: 5;
}

.hero__eyebrow {
  font: 400 14px/1.2 var(--font-lato);
  letter-spacing: 2.52px;
  color: var(--cyan);
  text-transform: uppercase;
}

.hero__content h1 {
  margin-top: 44px;
  font: 700 72px/69px var(--font-display);
  color: #fff;
}

.hero__content > p {
  margin-top: 36px;
  font: 300 20px/30px var(--font-display);
  color: #B5B5B5;
}
/* sub-headline line break that only applies on mobile (desktop keeps 2 lines) */
.hero__br-m { display: none; }

.hero__form {
  position: relative;
  width: 471px;
  height: 64px;
  margin: 48px auto 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 160px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
}

.hero__form input[name="contact"] {
  width: 320px;
  height: 100%;
  padding: 0 0 0 28px;
  background: none;
  border: 0;
  outline: none;
  font: 400 16px/1.2 var(--font-lato);
  color: #fff;
}
.hero__form input[name="contact"]::placeholder { color: #A2A2A2; }

/* honeypot - invisible to humans */
.hero__form input[name="company"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.hero__form button {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 44px;
  padding: 0 28px;
  border: 0;
  border-radius: 38px;
  background: linear-gradient(180deg, #003BD7 0%, var(--blue) 100%);
  font: 600 16px/1.2 var(--font-lato);
  color: #fff;
  cursor: pointer;
  transition: filter 0.25s ease;
}
.hero__form button:hover { filter: brightness(1.15); }
.hero__form button:disabled { filter: grayscale(0.4); cursor: wait; }

.hero__form-msg {
  margin-top: 16px;
  font: 400 14px/1.4 var(--font-lato);
  color: var(--cyan);
  min-height: 20px;
}

.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font: 400 12px/1.2 var(--font-lato);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  z-index: 5;
}
.hero__scroll svg { animation: hero-scroll-bob 1.8s ease-in-out infinite; }

@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* --- content reveal (scene 6 -> 7) --- */

.hero__content > *, .hero__scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__content > .hero__form-msg { transform: none; }

.hero--reveal .hero__content > *, .hero--reveal .hero__scroll {
  opacity: 1;
  transform: translateY(0) translateX(var(--rx, 0));
}
/* the headline text comes up first (eyebrow -> title -> subtext) ... */
.hero--reveal .hero__content > :nth-child(1) { transition-delay: 0.05s; }  /* eyebrow */
.hero--reveal .hero__content > :nth-child(2) { transition-delay: 0.15s; }  /* title */
.hero--reveal .hero__content > :nth-child(3) { transition-delay: 0.28s; }  /* subtext */
/* ... then the form and scroll land just after — kept tight, the form is the CTA */
.hero--reveal .hero__content > :nth-child(4) { transition-delay: 0.45s; }  /* form */
.hero--reveal .hero__content > :nth-child(5) { transition-delay: 0.45s; }  /* form-msg */
.hero--reveal .hero__scroll { transition-delay: 0.55s; --rx: -50%; }

/* the scroll indicator keeps its centering transform */
.hero__scroll { transform: translateX(-50%) translateY(24px); }
.hero--reveal .hero__scroll { transform: translateX(-50%) translateY(0); }

/* once a form message is shown, hide "Scroll Down" so they don't overlap */
.hero:has(.hero__form-msg:not(:empty)) .hero__scroll { opacity: 0; visibility: hidden; }

/* the nav fades/drops in on the later beat too.
   `translate` carries the reveal so the nav's centering transform is untouched. */
.hero .nav {
  position: fixed;   /* sticky on the homepage: stays at the top while scrolling */
  z-index: 50;       /* above section content, below the loader (100) */
  /* frosted-glass bar — translucent tint + blur of whatever scrolls under it */
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* the glass bar spans full width; the content is centred in .nav__inner.
     Padding moves to the inner so the bar itself goes edge to edge. */
  padding: 0;
  justify-content: center;
  opacity: 0;
  translate: 0 -12px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero .nav .nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1440px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
/* below 1440 the hero's zoom stretches the 1440-wide nav to fill the viewport;
   at/above 1440 (no zoom) switch the bar to the full viewport width */
@media (min-width: 1440px) {
  .hero .nav { left: 0; width: 100%; transform: none; }
}
.hero--reveal .nav {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.95s;
}

/* The fixed homepage nav is light-on-dark; while the white cases section sits
   under it, JS adds .nav--on-light to flip the bar/text/logo dark so it stays
   legible on #FAFAFB instead of vanishing. */
.hero .nav--on-light {
  background: rgba(250, 250, 251, 0.72);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
.nav--on-light .nav__links a { color: #1A1A1A; }
.nav--on-light .nav__links a:hover { color: var(--blue); }
.nav--on-light .nav__burger span { background: #0E0E0E; }
.nav__logo .nav__logo-dark { display: none; }
.nav--on-light .nav__logo .nav__logo-light { display: none; }
.nav--on-light .nav__logo .nav__logo-dark { display: block; }
/* Services dropdown must flip light too — otherwise the .nav--on-light dark link
   colour lands on the dark panel bg and the items vanish (dark-on-dark). */
.nav--on-light .nav__drop-panel { background: rgba(250, 250, 251, 0.92); border-color: rgba(14, 14, 14, 0.08); }
.nav--on-light .nav__drop-panel a { color: #262626; }
.nav--on-light .nav__drop-panel a:hover { background: rgba(14, 14, 14, 0.05); color: var(--blue); }

/* instant mode (QA screenshots, reduced motion): no entry animation */
.hero--instant .hero__content > *, .hero--instant .hero__scroll,
.hero--instant .nav { transition: none; }

/* Section 2's heading sits in the first viewport (the hero is 762px tall), so
   it fades up on the SAME beat as the hero's nav/form — driven by the hero's
   reveal state, not a separate scroll trigger. */
.services__header h2, .services__header p {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero--reveal ~ .services .services__header h2 { opacity: 1; transform: none; transition-delay: 0.45s; }
.hero--reveal ~ .services .services__header p  { opacity: 1; transform: none; transition-delay: 0.57s; }
.hero--instant ~ .services .services__header h2,
.hero--instant ~ .services .services__header p { transition: none; }

/* ============================================================
   LOADING WIDGET (scenes 1-4) - logo morph, then mask reveal
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--near-black);
  display: grid;
  place-items: center;
}

/* phase 3: the logo becomes a hole punched through the black overlay */
.loader--hole {
  background: none;
}
.loader--hole::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--near-black);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='77' height='124' viewBox='0 0 77 124' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38.4436 0C17.2112 0 0 17.4318 0 38.9368C0 60.4415 17.2112 77.8728 38.4436 77.8728C59.6761 77.8728 76.8872 60.4415 76.8872 38.9368C76.8872 17.4318 59.6761 0 38.4436 0ZM38.4436 59.8261C27.0515 59.8261 17.8314 50.475 17.8314 38.95C17.8314 27.4245 27.0646 18.0735 38.4436 18.0735C49.8227 18.0735 59.0558 27.4245 59.0558 38.95C59.0558 50.475 49.8227 59.8261 38.4436 59.8261Z' fill='%23366DFD'/%3E%3Cpath d='M59.0681 85.0632C59.0681 96.6014 49.8357 105.939 38.4567 105.939C27.0776 105.939 17.8445 96.5882 17.8445 85.0632H0C0 106.568 17.2112 124 38.4436 124C59.6761 124 76.8872 106.568 76.8872 85.0632H59.0558H59.0681Z' fill='%230055FF'/%3E%3Cpath d='M59.0681 85.0632C59.0681 96.6014 49.8357 105.939 38.4567 105.939C27.0776 105.939 17.8445 96.5882 17.8445 85.0632H0C0 106.568 17.2112 124 38.4436 124C59.6761 124 76.8872 106.568 76.8872 85.0632H59.0558H59.0681Z' fill='%230043A5'/%3E%3Cpath d='M59.0681 85.0632C59.0681 96.6014 49.8357 105.953 38.4436 105.953C27.0515 105.953 17.8191 96.6014 17.8191 85.0632H0C0 98.8412 7.07323 110.916 17.7284 117.844C62.9603 117.819 59.0681 85.0764 59.0681 85.0764V85.0632Z' fill='%230239CA'/%3E%3Cpath d='M59.1426 85.063C59.1426 85.063 62.9441 117.805 17.7123 117.831C23.6989 121.72 30.7984 124 38.4405 124C59.673 124 76.8972 106.568 76.8972 85.0498H59.1426V85.063Z' fill='url(%23paint0_linear_140_58737)'/%3E%3Cpath d='M59.0681 38.9368C59.0681 50.475 49.8357 59.8262 38.4436 59.8262C27.0515 59.8262 17.8191 50.475 17.8191 38.9368H0C0 52.7016 7.07323 64.7761 17.7284 71.7046C62.9603 71.6782 59.0681 38.9368 59.0681 38.9368Z' fill='%230239CA'/%3E%3Cpath d='M59.1426 38.9369C59.1426 38.9369 62.9441 71.6783 17.7123 71.7047C23.6989 75.5944 30.7984 77.8737 38.4405 77.8737C59.673 77.8737 76.8972 60.4416 76.8972 38.9237H59.1426V38.9369Z' fill='url(%23paint1_linear_140_58737)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_140_58737' x1='47.2978' y1='123.58' x2='47.2978' y2='84.133' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2303D7FF'/%3E%3Cstop offset='1' stop-color='%23366DFD'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_140_58737' x1='47.2978' y1='77.4412' x2='47.2978' y2='37.9937' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2303D7FF'/%3E%3Cstop offset='1' stop-color='%23366DFD'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(#fff, #fff);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-size: var(--hole, 77px) auto, cover;
  -webkit-mask-composite: destination-out;
  mask-image: url("data:image/svg+xml,%3Csvg width='77' height='124' viewBox='0 0 77 124' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38.4436 0C17.2112 0 0 17.4318 0 38.9368C0 60.4415 17.2112 77.8728 38.4436 77.8728C59.6761 77.8728 76.8872 60.4415 76.8872 38.9368C76.8872 17.4318 59.6761 0 38.4436 0ZM38.4436 59.8261C27.0515 59.8261 17.8314 50.475 17.8314 38.95C17.8314 27.4245 27.0646 18.0735 38.4436 18.0735C49.8227 18.0735 59.0558 27.4245 59.0558 38.95C59.0558 50.475 49.8227 59.8261 38.4436 59.8261Z' fill='%23366DFD'/%3E%3Cpath d='M59.0681 85.0632C59.0681 96.6014 49.8357 105.939 38.4567 105.939C27.0776 105.939 17.8445 96.5882 17.8445 85.0632H0C0 106.568 17.2112 124 38.4436 124C59.6761 124 76.8872 106.568 76.8872 85.0632H59.0558H59.0681Z' fill='%230055FF'/%3E%3Cpath d='M59.0681 85.0632C59.0681 96.6014 49.8357 105.939 38.4567 105.939C27.0776 105.939 17.8445 96.5882 17.8445 85.0632H0C0 106.568 17.2112 124 38.4436 124C59.6761 124 76.8872 106.568 76.8872 85.0632H59.0558H59.0681Z' fill='%230043A5'/%3E%3Cpath d='M59.0681 85.0632C59.0681 96.6014 49.8357 105.953 38.4436 105.953C27.0515 105.953 17.8191 96.6014 17.8191 85.0632H0C0 98.8412 7.07323 110.916 17.7284 117.844C62.9603 117.819 59.0681 85.0764 59.0681 85.0764V85.0632Z' fill='%230239CA'/%3E%3Cpath d='M59.1426 85.063C59.1426 85.063 62.9441 117.805 17.7123 117.831C23.6989 121.72 30.7984 124 38.4405 124C59.673 124 76.8972 106.568 76.8972 85.0498H59.1426V85.063Z' fill='url(%23paint0_linear_140_58737)'/%3E%3Cpath d='M59.0681 38.9368C59.0681 50.475 49.8357 59.8262 38.4436 59.8262C27.0515 59.8262 17.8191 50.475 17.8191 38.9368H0C0 52.7016 7.07323 64.7761 17.7284 71.7046C62.9603 71.6782 59.0681 38.9368 59.0681 38.9368Z' fill='%230239CA'/%3E%3Cpath d='M59.1426 38.9369C59.1426 38.9369 62.9441 71.6783 17.7123 71.7047C23.6989 75.5944 30.7984 77.8737 38.4405 77.8737C59.673 77.8737 76.8972 60.4416 76.8972 38.9237H59.1426V38.9369Z' fill='url(%23paint1_linear_140_58737)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_140_58737' x1='47.2978' y1='123.58' x2='47.2978' y2='84.133' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2303D7FF'/%3E%3Cstop offset='1' stop-color='%23366DFD'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_140_58737' x1='47.2978' y1='77.4412' x2='47.2978' y2='37.9937' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2303D7FF'/%3E%3Cstop offset='1' stop-color='%23366DFD'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(#fff, #fff);
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-size: var(--hole, 77px) auto, cover;
  mask-composite: exclude;
}

.loader__mark {
  grid-area: 1 / 1;
  width: 77px;
  opacity: 0;
}

/* overshoot, dip, settle. `backwards` fill shows the 0% frame at start,
   then reverts to the cascaded rest state so scene 3's fade still works. */
/* entrance pop: gentle overshoot, dip, settle */
@keyframes logoBounce {
  0%   { opacity: 0; transform: scale(0.6); }
  55%  { opacity: 1; transform: scale(1.08); }  /* small overshoot */
  78%  { transform: scale(0.98); }              /* gentle dip */
  100% { opacity: 1; transform: scale(1); }
}

/* scene 2 motion: the whole U drops down into place, then settles with its
   own position bounce — same overshoot/dip/settle rhythm as the ring, but a
   separate beat. The clip travels with the transform, so the U stays whole. */
@keyframes tailDrop {
  0%   { transform: translateY(-38%); }   /* up by the ring */
  55%  { transform: translateY(8%); }     /* drops past rest (overshoot) */
  75%  { transform: translateY(-3%); }    /* rebounds up */
  90%  { transform: translateY(1.5%); }   /* small dip */
  100% { transform: translateY(0); }      /* settles */
}

/* scene 2: the ring lifts to its g-position and bounces to settle — same
   overshoot/rebound rhythm as the U (peaks at 55%) so they spring apart
   together. On the `translate` longhand so it composes with logoBounce. */
@keyframes ringRise {
  0%   { translate: 0 20px; }   /* low (lone ring centred) */
  55%  { translate: 0 -4px; }   /* overshoots up past rest */
  75%  { translate: 0 2px; }    /* rebounds down */
  90%  { translate: 0 -1px; }   /* tiny dip */
  100% { translate: 0 0; }      /* settles */
}

/* scene 1: the top ring bounces in. It sits ~20px low and lifts to its
   g-position as the U drops. `translate` longhand is used for the lift so it
   composes with logoBounce's scale instead of fighting it. */
.loader__mark--top {
  transform-origin: 50% 31%;   /* ring centre */
  translate: 0 20px;            /* sits low until the U drops */
}
.loader--m1 .loader__mark--top {
  opacity: 1;
  animation: logoBounce 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) backwards;
}
/* scene 2: ring lifts up to the g-position AND bounces, in sync with the U.
   logoBounce stays first in the list so the entrance pop isn't restarted;
   ringRise (translate) composes with it. */
.loader--m2 .loader__mark--top {
  opacity: 1;
  animation: logoBounce 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) backwards,
             ringRise 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

/* scene 2: the whole tail slides straight down out from under the ring and
   bounces to settle below it. The U sits in a static clip window (.loader__tail)
   whose top edge is just below the ring, so the U stays hidden until it emerges
   below; the window extends past the mark's bottom so the overshoot isn't clipped. */
.loader__tail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 77px;
  height: 160px;                       /* mark is 124 tall; +36 below for overshoot room */
  transform: translate(-50%, -62px);   /* centre X; top-left aligned to the mark's top */
  clip-path: inset(50% 0 0 0);         /* fixed window: hide above ~mark-y 80 (just under the ring) */
  pointer-events: none;
}
.loader__mark--bottom {
  display: block;
  transform: translateY(-38%);         /* rest-before: tucked up behind the ring, in the hidden zone */
}
.loader--m2 .loader__mark--bottom {
  opacity: 1;
  animation: tailDrop 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

/* scene 3: both parts fade as the hole opens behind */
.loader--hole .loader__mark { opacity: 0; transition: opacity 0.4s ease; }

.loader--done { display: none; }

body.is-loading { overflow: hidden; }

/* ============================================================
   SECTION 2 - Services
   Frame: 1440 x 878, bg #010E32
   ============================================================ */

.services {
  background: var(--navy);
  position: relative;
  /* rounded top corners sit over the hero's black bottom */
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  /* height set by JS: frame height + scroll distance for the step-through */
}

.services__sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* adaptive composition: header top, circle row centered in the leftover
   space, watermarks bottom -- the frame height (set by JS to the viewport)
   is absorbed by flexible spacing instead of stretching fixed positions */
.services__frame {
  position: relative;
  width: 1440px;
  height: 878px; /* design reference; JS sets the live height >=768px */
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- zone gradients: transparent (top) -> color (bottom) --- */
.services__zone {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
/* positioned from the viewport centre so the LAUNCH/SCALE zones bleed all the
   way to the screen edges; the 480px BUILD band stays centred. Boundaries match
   the centred 1440 frame's old zones (480/960) at any width or zoom level. */
.services__zone--launch { left: 0; width: calc(50% - 240px);    background: linear-gradient(180deg, rgba(1, 29, 102, 0) 0%, #011D66 100%); }
.services__zone--build  { left: calc(50% - 240px); width: 480px; background: linear-gradient(180deg, rgba(2, 43, 153, 0) 0%, #022B99 100%); }
/* SCALE uses the same color as BUILD */
.services__zone--scale  { left: calc(50% + 240px); right: 0;     background: linear-gradient(180deg, rgba(2, 43, 153, 0) 0%, #022B99 100%); }

.services[data-active="launch"] .services__zone--launch,
.services[data-active="build"]  .services__zone--build,
.services[data-active="scale"]  .services__zone--scale { opacity: 1; }

/* --- watermark words --- */
.services__watermark {
  position: absolute;
  bottom: 30px;
  font: 900 80px/89px var(--font-lato);
  letter-spacing: 8px;
  color: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}
.services__watermark--launch { left: 240px; }
.services__watermark--build  { left: 720px; }
.services__watermark--scale  { left: 1200px; }

/* --- heading --- */
.services__header {
  position: relative;
  width: 941px;
  margin: 0 auto;
  padding-top: clamp(44px, 9.5vh, 88px);
  text-align: center;
  z-index: 3;
  pointer-events: none;
  flex-shrink: 0;
}
.services__header h2 {
  font: 600 48px/54px var(--font-display);
  color: #fff;
}
.services__header p {
  font: 300 16px/26px var(--font-display);
  color: rgba(255, 255, 255, 0.7);
  width: 672px;
  margin: 32px auto 0;
}
.services__header p strong {
  font-weight: 500;
  color: #fff;
}

/* --- service circles --- */
.services__row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;             /* design pitch: 160px circles + 80px gaps */
  padding-bottom: 130px; /* biases circles to the design position (center 509/878) */
  position: relative;
  z-index: 2;
}

.service {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  z-index: 2;
}

/* expanded halo behind hovered circle (382px, centered) */
.service__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 382px;
  height: 382px;
  margin: -191px 0 0 -191px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.service__circle {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  transition: background 0.35s ease;
}
.service__circle span {
  font: 500 16px/20px var(--font-display);
  color: #fff;
  transition: color 0.35s ease;
}

/* caption under the halo */
.service__caption {
  position: absolute;
  top: 237px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 320px;
  text-align: center;
  font: 400 16px/24px var(--font-display);
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  pointer-events: none;
}

/* --- chat bubbles --- */
/* the 2x2 pill cluster is centered above the active circle and self-balances for
   any pill width (so wide pills don't overflow the edge circles) — two columns,
   each a stack of two pills */
.service__bubbles {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);   /* nestle the cluster onto the circle (matches the frame) */
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  width: max-content;
  pointer-events: none;
  z-index: 4;
}

/* mobile: each bubble rises in (used by the staggered one-by-one reveal) */
@keyframes bubbleRise {
  from { opacity: 0; transform: translateY(34px) scale(0.7); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;      /* the two pills in a column centre on each other */
  gap: 18px;                /* vertical gap between the two pills in a column */
  opacity: 0;
  transform: scale(0.3) translateY(14px);
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 4;
}
.bubble:nth-child(1) { transition-delay: 0.05s; }
.bubble:nth-child(2) { transition-delay: 0.14s; }
.bubble:nth-child(3) { transition-delay: 0.23s; }

.bubble__pill {
  display: block;
  position: relative;   /* anchors each pill's own corner emoji */
  background: var(--cyan);
  color: var(--navy);
  font: 700 13px/15.6px var(--font-lato);
  padding: 12px 20px;
  border-radius: 40px;
  box-shadow:
    inset 0 4px 4px var(--cyan-light),
    inset 0 -4px 4px rgba(0, 24, 86, 0.24);
  white-space: nowrap;
  text-align: center;
}
.bubble--sm .bubble__pill { padding: 9px 20px; }

.bubble__emoji {
  position: absolute;
  font-size: 17px;
  line-height: 1;
  z-index: 1;   /* sit on top of the pill, straddling its border */
}
/* Anchored to a pill corner, then nudged with translate so the glyph sits ON
   the rounded border (≈half over the pill, half out) instead of floating in
   the empty gap off the corner. */
.bubble__emoji--tr { top: 0; right: 0;  transform: translate(12%, -32%)  rotate(14deg); }
.bubble__emoji--bl { bottom: 0; left: 0;  transform: translate(-12%, 32%) rotate(-12deg); }
.bubble__emoji--tl { top: 0; left: 0;   transform: translate(-12%, -32%) rotate(-14deg); }
.bubble__emoji--br { bottom: 0; right: 0; transform: translate(12%, 32%)  rotate(12deg); }

/* --- active state (scroll step-through / observer / QA) --- */
.service--active { z-index: 5; }
.service--active .service__halo {
  opacity: 1;
  transform: scale(1);
}
.service--active .service__circle {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.service--active .service__circle span { color: var(--blue); }
.service--active .service__caption {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.service--active .bubble {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* --- hover state: ONLY on devices with a real cursor. On touch, taps
   leave a sticky :hover that would open a second circle alongside the
   scroll-activated one. --- */
/* hover (#2) — off in scroll mode (.services--scroll), so 1st visit is scroll-only */
@media (hover: hover) and (pointer: fine) {
  .services:not(.services--scroll) .service:hover { z-index: 5; }
  .services:not(.services--scroll) .service:hover .service__halo {
    opacity: 1;
    transform: scale(1);
  }
  .services:not(.services--scroll) .service:hover .service__circle {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .services:not(.services--scroll) .service:hover .service__circle span { color: var(--blue); }
  .services:not(.services--scroll) .service:hover .service__caption {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .services:not(.services--scroll) .service:hover .bubble {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* while the mouse is on a circle, the scroll-activated one steps aside */
.services--hovering .service--active:not(:hover) { z-index: 2; }
.services--hovering .service--active:not(:hover) .service__halo { opacity: 0; transform: scale(0.55); }
.services--hovering .service--active:not(:hover) .service__circle {
  background: rgba(255, 255, 255, 0.1);
}
.services--hovering .service--active:not(:hover) .service__circle span { color: #fff; }
.services--hovering .service--active:not(:hover) .service__caption { opacity: 0; }
.services--hovering .service--active:not(:hover) .bubble { opacity: 0; transform: scale(0.3) translateY(14px); }

/* ============================================================
   SECTION 3 - Why Glyde
   Frame: 1440 x 993, bg #0C0C0D, scroll-captured card slider
   ============================================================ */

.why {
  position: relative;
  background: var(--near-black);
  /* height set by JS: frame height + scroll distance */
}

.why__sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* adaptive composition: header top, cards centered in leftover space,
   progress bar anchored at the bottom (frame height set by JS >=768px) */
.why__frame {
  position: relative;
  width: 100%;
  height: 993px; /* design reference; JS sets the live height >=768px */
  margin: 0 auto;
  overflow: hidden;
  background: var(--near-black);
  display: flex;
  flex-direction: column;
}

/* --- animated lava gradient (WebGL) — the §3 "flame" background.
   A broad canvas spreads the warp pattern so the flame reads big across the top
   half; the vertical mask fades it to black lower down so it's a glow, not a wash. --- */
.why__lava {
  position: absolute;
  left: -500px;
  right: -500px;
  top: -320px;
  height: calc(100% + 1000px); /* reaches further down behind the cards */
  width: calc(100% + 1000px); /* very broad spread → big blobs filling the top */
  /* the warp shader is already soft - no blur, like the Framer component */
  display: none; /* shown only when WebGL initializes */
  pointer-events: none;
  opacity: 0.95;
  /* lava rises from the canvas bottom - flip it so it hangs from the
     section top; mask (applied pre-flip) fades the visual bottom out */
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(0deg, transparent 4%, #000 32%, #000 100%);
  mask-image: linear-gradient(0deg, transparent 4%, #000 32%, #000 100%);
}

.why__frame--lava .why__lava { display: block; }
.why__frame--lava .why__glow { display: none; }

/* --- §3 flame: looping video (replaces the WebGL lava). The clip is a blue
   flame on solid black, so `screen` keeps only the flame and drops the black;
   it hangs from the section top and is masked to melt into the dark lower half. */
.why__flame {
  position: absolute;
  inset: 0;                   /* full-bleed background covering the whole frame */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  mix-blend-mode: screen;     /* black backdrop drops out, blue flame shows */
  opacity: 0.8;
  z-index: 0;
}
/* scrim over the flame (below the content) so the glass cards' text stays
   readable; lighter at the top so the flame still glows behind the header */
.why__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 11, 24, 0) 0%,
    rgba(5, 11, 24, 0.32) 38%,
    rgba(5, 11, 24, 0.55) 100%);
}
/* the CSS glow now serves only as the reduced-motion / no-video fallback */
.why__glow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .why__flame { display: none; }
  .why__glow { display: block; }
}

/* --- top glow (two blurred shapes) — no-WebGL fallback for the lava --- */
.why__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.why__glow--blue {
  width: 1700px;
  height: 660px;
  left: calc(50% - 850px);
  top: -220px;
  background: var(--blue);
  filter: blur(185px);
  opacity: 0.6;
}
.why__glow--cyan {
  width: 1220px;
  height: 500px;
  left: calc(50% - 610px);
  top: -150px;
  background: var(--cyan);
  filter: blur(165px);
  opacity: 0.65;
}

/* --- header --- */
.why__header {
  position: relative;
  width: 941px;
  margin: 0 auto;
  padding-top: clamp(56px, 12.5vh, 120px);
  text-align: center;
  z-index: 2;
  flex-shrink: 0;
}
.why__eyebrow {
  font: 400 14px/17px var(--font-lato);
  letter-spacing: 2.52px;
  color: #fff;
}
.why__header h2 {
  font: 600 48px/54px var(--font-display);
  color: #fff;
  margin-top: 25px;
}
.why__header p {
  font: 300 16px/26px var(--font-display);
  color: #fff;
  margin-top: 10px;
}

/* --- horizontal card track --- */
.why__viewport {
  position: relative;
  width: 100%;
  height: 440px;
  margin: auto 0; /* centers in the space between header and progress bar */
  z-index: 2;
  flex-shrink: 0;
}
.why__track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

.why-card {
  width: 640px;
  height: 385px;
  flex-shrink: 0;
  border-radius: 32px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  /* frosted glass: light catches the top-left, fading cool toward the bottom-right */
  background:
    linear-gradient(145deg,
      rgba(200, 232, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 28%,
      rgba(255, 255, 255, 0.02) 66%,
      rgba(8, 26, 64, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),   /* bright top rim */
    inset 0 0 40px rgba(255, 255, 255, 0.05),  /* faint inner glow */
    0 30px 70px rgba(0, 0, 0, 0.5);            /* depth */
}
/* bright glass sheen bleeding from the top-left corner */
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 90% at 0% 0%,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
  z-index: 0;
}
.why-card > * { position: relative; z-index: 1; }

.why-card__head {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 52px;
}
/* Glass number — REAL text, no image, truly SEE-THROUGH. The fill is
   transparent so the digits are windows onto the frosted card behind them
   (the card already has backdrop-filter: blur). A bright rim (text-stroke)
   catches the light like a glass edge, a top highlight + drop-shadow give it
   dimension. */
.why-card__num {
  font: 900 76px/56px var(--font-lato);
  letter-spacing: -2px;
  /* transparent fill so the glossy gradient (clipped to the glyphs) shows
     instead of a flat colour — liquid-glass look */
  color: transparent;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.70) 0%,    /* bright highlight */
    rgba(255, 255, 255, 0.10) 40%,   /* transparent body */
    rgba(255, 255, 255, 0.05) 60%,   /* deep transparency */
    rgba(255, 255, 255, 0.40) 100%   /* bottom refraction */
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.30);    /* crisp glass rim */
  text-stroke: 1px rgba(255, 255, 255, 0.30);
  /* 3D liquid depth + soft drop shadow */
  filter:
    drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.50))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.05));
  user-select: none;
  line-height: 60px;
}
.why-card__tag {
  background: var(--cyan);
  color: var(--navy);
  font: 700 13px/15.6px var(--font-lato);
  letter-spacing: 1.04px;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 40px;
  box-shadow:
    inset 0 4px 4px var(--cyan-light),
    inset 0 -4px 4px rgba(0, 24, 86, 0.24);
}

.why-card h3 {
  font: 600 32px/40px var(--font-display);
  color: var(--cyan);
  margin-top: 40px;
}
.why-card h4 {
  font: 400 18px/30px var(--font-display);
  color: #fff;
  margin-top: 6px;
}
.why-card p {
  font: 300 16px/26px var(--font-display);
  color: #C7C7C7;
  margin-top: 22px;
  max-width: 590px;
}

/* ============================================================
   SECTION 4 - CASE STUDIES
   Frame: 1440 x 1739, light bg #FAFAFB
   ============================================================ */

.cases { background: #FAFAFB; }

.cases__frame {
  width: 1920px;          /* wider showcase canvas; JS scales the section from 1920 */
  margin: 0 auto;
  padding: 80px 160px;
}

.cases__header {
  width: 941px;
  margin: 0 auto;
  text-align: center;
}
.cases__header h2 {
  font: 600 48px/54px var(--font-display);
  color: #0E0E0E;
}
.cases__header p {
  margin-top: 22px;
  font: 300 16px/26px var(--font-display);
  color: #494949;
}

.cases__row {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.cases__row:first-of-type { margin-top: 123px; }

/* "All Case Studies" button below the rows */
.cases__cta-wrap { text-align: center; margin-top: 64px; }
.cases__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 500 17px/1 var(--font-display);
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.cases__cta:hover { background: #003BD7; transform: translateY(-2px); }
.cases__cta svg { transition: transform 0.25s ease; }
.cases__cta:hover svg { transform: translateX(3px); }

/* widths fill the 1600px content area (frame 1920 - 160*2 padding);
   space-between leaves the 20px gutter. Ratio kept from the design. */
.case { display: block; text-decoration: none; width: 518px; }
.case--wide { width: 1062px; }

/* 2x2 grid of case-study banners: the covers are all 1500x1185 designed banners,
   so every cell is equal and uses the banner ratio — each banner shows in full,
   no cropping. (aspect applies at all widths; the 2 columns only on desktop.) */
.cases__row--grid .case__img { height: auto; aspect-ratio: 1500 / 1185; }
@media (min-width: 1025px) {
  .cases__row--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .cases__row--grid .case { width: auto; }
}

.case__img {
  display: block;
  height: 797px;          /* keeps the design's image aspect ratio at the new width */
  border-radius: 24px;
  overflow: hidden;
}
.case__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.case:hover .case__img img { transform: scale(1.04); }

.case h3 {
  margin-top: 24px;
  font: 600 32px/40px var(--font-display);
  color: #0E0E0E;
}
.case p {
  margin-top: 4px;
  font: 300 16px/30px var(--font-display);
  color: #494949;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: #0A0A0B;
}

.footer__frame {
  width: 1440px;
  margin: 0 auto;
  padding: 96px 80px 40px;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__logo { text-decoration: none; display: inline-block; line-height: 1; }
/* real GLYDE Studios logomark (same SVG as the nav), forced white for the black footer */
.footer__logo img { display: block; width: 150px; height: auto; filter: brightness(0) invert(1); }
.footer__logo-word {
  display: block;
  font: 700 30px/1 var(--font-display);
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
}
.footer__logo-sub {
  display: block;
  margin-top: 4px;
  font: 300 12px/1 var(--font-lato);
  letter-spacing: 7px;
  color: #fff;
}

.footer__made { text-align: left; }
.footer__made p { font: 400 16px/1.4 var(--font-display); color: #fff; }
.footer__flags { margin-top: 10px; display: flex; gap: 8px; }
.footer__flags img { width: 22px; height: 16.5px; border-radius: 2px; display: block; }

.footer__cols {
  display: flex;
  margin-top: 90px;
}

.footer__contact { flex: 1; }
.footer__contact div {
  display: flex;
  margin-bottom: 28px;
}
.footer__contact dt {
  width: 125px;
  font: 300 16px/26px var(--font-display);
  color: rgba(255, 255, 255, 0.45);
}
.footer__contact dd {
  font: 400 16px/26px var(--font-display);
  color: #fff;
}
/* the two email lines: gap matched to the .footer__col link spacing (26px) */
.footer__contact dd > span { display: block; }
.footer__contact dd > span + span { margin-top: 26px; }

.footer__col { width: 325px; }
.footer__col + .footer__col { margin-left: 0; }
.footer__col h4 {
  font: 400 14px/1 var(--font-lato);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 30px;
}
.footer__col a {
  display: block;
  font: 400 16px/1 var(--font-display);
  color: #fff;
  text-decoration: none;
  margin-bottom: 26px;
  transition: color 0.25s ease;
}
.footer__col a:hover { color: var(--cyan); }

/* Oversized "GLYDESTUDIOS" watermark — the exact vector exported from Figma
   (assets/glydestudios-wordmark.svg, fill #494949). The design node is 1549px
   wide on a 1440 frame and centred, so it bleeds ~54px (≈3.8vw) off each edge
   (the outer G and S are clipped). Width in vw keeps that ratio at any size;
   the SVG's fixed 1554.75:156 aspect keeps the height correct automatically. */
.footer__wordmark {
  margin-top: 88px;
  margin-bottom: 20px;
  width: 106vw;                        /* bleeds ~3vw off each edge so the outer G and S are cut a little (matches the footer frame) */
  margin-left: calc(50% - 53vw);       /* centre the oversized wordmark on the viewport */
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
.footer__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
}
.footer__bottom p { font: 300 14px/1 var(--font-display); color: rgba(255, 255, 255, 0.4); }

.footer__social { display: flex; gap: 16px; }
.footer__social a {
  font: 400 14px/1 var(--font-display);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 11px 24px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.footer__social a:hover { border-color: var(--cyan); color: var(--cyan); }

/* --- progress line --- */
.why__progress {
  position: relative;
  width: 100%;
  height: 10px;
  margin-bottom: clamp(36px, 11vh, 110px);
  z-index: 2;
  flex-shrink: 0;
}
.why__progress-line {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}
.why__progress-fill {
  position: absolute;
  top: 4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
}
.why__progress-dot {
  position: absolute;
  top: 0;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}


/* ============================================================
   MOBILE / PORTRAIT TABLET (max-width 1024px)
   Design reference: 412px frames. Extended up to 1024px so touch tablets
   get the swipe-native layout instead of a tiny zoomed desktop.
   ============================================================ */

@media (max-width: 1024px) {

  body { min-width: 0; overflow-x: hidden; }

  /* ---------- nav / hero ---------- */

  .nav {
    width: 100%;
    height: 80px;
    padding: 0 16px;
  }
  .nav__logo img { width: 88px; height: 32px; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  /* hero fills the viewport — only the hero + "Scroll Down" show; §2 starts
     below the fold (matches final_mobile.mp4) */
  .hero { height: 100vh; height: 100svh; min-height: 600px; }
  .hero__media img,
  .hero__media video { top: 0; min-width: 0; width: 100%; height: 100%; }

  .hero__content {
    top: 160px;
    width: calc(100% - 32px);
  }
  .hero__eyebrow { font-size: 13px; letter-spacing: 2.34px; }
  .hero__content h1 {
    margin-top: 28px;
    font-size: 36px;
    line-height: 48px;
  }
  .hero__content > p {
    margin-top: 22px;
    font-size: 15px;
    line-height: 24px;
    color: #ECECEC;
  }
  .hero__br-m { display: inline; }   /* show the extra sub-headline break on mobile */
  .hero__form { width: 100%; max-width: 380px; margin-top: 40px; }
  .hero__form input[name="contact"] { width: calc(100% - 150px); }
  .hero__scroll { bottom: 38px; font-size: 14px; }

  /* ---------- section 2: horizontal swipe carousel ---------- */

  .services { height: auto !important; }
  .services__sticky { position: static; height: auto; overflow: visible; }
  .services__frame { width: 100%; height: auto !important; display: block; padding-bottom: 36px; }

  .services__header {
    position: relative;   /* above the absolute zone gradient */
    z-index: 4;
    transform: none;
    width: auto;
    padding: 96px 16px 0;
  }
  .services__header h2 { font-size: 28px; line-height: 36px; }
  .services__header p { width: auto; margin-top: 20px; font-size: 13px; line-height: 22px; color: #C7C7C7; }

  /* one full-bleed zone gradient behind the carousel; only the active zone
     shows (opacity driven by [data-active], same as desktop lines 770-772) */
  .services__zone {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .services__zone--launch { background: linear-gradient(180deg, rgba(1, 29, 102, 0) 0%, #011D66 100%); }
  .services__zone--build  { background: linear-gradient(180deg, rgba(2, 43, 153, 0) 0%, #022B99 100%); }
  .services__zone--scale  { background: linear-gradient(180deg, rgba(2, 43, 153, 0) 0%, #022B99 100%); }

  /* one centered watermark, swapped per active zone (the desktop's three
     fixed-X words won't sit centered on a 412px screen) */
  .services__watermark {
    left: 50%;
    bottom: 28px;
    font-size: 64px;
    line-height: 56px;
    letter-spacing: 6px;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .services[data-active="launch"] .services__watermark--launch,
  .services[data-active="build"]  .services__watermark--build,
  .services[data-active="scale"]  .services__watermark--scale { opacity: 1; }

  /* circles laid out in a horizontal swipe row; the snapped circle centers,
     neighbours peek at the edges (JS toggles .service--active off scrollLeft) */
  .services__row {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 56px;
    /* top room for the rising bubbles, bottom for the caption; the side
       padding centers the 160px circle in the viewport */
    padding: 168px calc(50vw - 80px) 104px;
    margin-top: 4px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 2;
  }
  .services__row::-webkit-scrollbar { display: none; }

  .service {
    position: relative;
    left: auto !important;
    margin-left: 0;
    flex: 0 0 auto;
    width: 160px;
    height: 160px;
    scroll-snap-align: center;
  }

  .service__circle { width: 160px; height: 160px; }
  .service__circle span { font-size: 15px; line-height: 19px; }

  /* halo centered on the 160px circle */
  .service__halo {
    width: 280px;
    height: 280px;
    top: 50%;
    left: 50%;
    margin: -140px 0 0 -140px;
  }
  /* bubbles stack in a centered column above the circle (the desktop scatter
     positions fall off a 412px screen); each pill rises in one by one.
     The active circle + its bubbles paint above the neighbouring circles. */
  .service--active { z-index: 20; }
  .service__bubbles {
    position: absolute;
    inset: auto;
    left: 50%;
    bottom: calc(100% + 8px); /* whole stack sits ABOVE the 120px circle */
    transform: translateX(-50%);
    width: max-content;
    max-width: 94vw;
    display: flex;
    flex-direction: row;       /* two stacks side by side -> 2x2 grid (matches new mobile) */
    align-items: flex-end;     /* bottom row stays level + hugs the circle even if a column wraps */
    justify-content: center;   /* keep the cluster grouped over the circle (not jammed to the edges) */
    gap: 30px;                 /* wider column gutter than the old tight stack, matches the frame's spread */
    pointer-events: none;
    z-index: 6;
  }
  .service .bubble { gap: 22px; }   /* row gap between the two pills in a column */
  /* dim + shrink the non-active circles so the centered one dominates */
  .services[data-active] .service:not(.service--active) .service__circle { opacity: 0.5; transform: scale(0.82); transition: opacity 0.4s ease, transform 0.4s ease; }
  .service .bubble {
    position: relative;       /* keeps emoji anchored, flows in the column */
    align-items: center;      /* symmetric stack on the mobile vertical column */
    left: auto;
    top: auto;
    opacity: 0;
    transform: translateY(34px) scale(0.7);
    transform-origin: bottom center;
    transition: none;
  }
  /* on activation each pill rises in via keyframes (more reliable than
     staggered transitions). Bottom pill first, then up — one by one. */
  .service--active .bubble {
    animation: bubbleRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .service--active .bubble:nth-last-child(1) { animation-delay: 0.15s; }
  .service--active .bubble:nth-last-child(2) { animation-delay: 0.50s; }
  .service--active .bubble:nth-last-child(3) { animation-delay: 0.85s; }
  .bubble__pill { font-size: 12px; line-height: 12px; padding: 10px 16px; white-space: normal; text-align: center; }

  /* caption fades in last, after the bubbles have settled (below the 160px circle) */
  .service__caption {
    top: 176px;
    width: 290px;
    font-size: 14px;
    line-height: 20px;
  }
  .service--active .service__caption { transition: opacity 0.5s ease 1.15s, transform 0.5s ease 1.15s; }

  /* ---------- section 3: native swipe, no pinning ---------- */

  .why { height: auto !important; }
  .why__sticky { position: static; height: auto; overflow: visible; }
  .why__frame { width: 100%; height: auto; padding-bottom: 56px; }

  /* lava band sized for the mobile section (hangs from the top, behind
     the header; CSS glows stay as the no-WebGL2 fallback) */
  .why__lava {
    left: -60px;
    right: -60px;
    width: calc(100% + 120px);
    top: -170px;        /* flame raised higher up the section */
    height: 1400px;
  }
  /* full-bleed flame background on the narrower mobile section */
  .why__flame { inset: 0; width: 100%; height: 100%; }
  /* brighter, larger cyan glow filling the upper section */
  .why__glow--blue { width: 1040px; height: 300px; left: -300px; top: -110px; filter: blur(120px); opacity: 0.95; }
  .why__glow--cyan { width: 700px; height: 200px; left: -120px; top: -90px; filter: blur(100px); opacity: 0.95; }

  .why__header {
    position: static;
    transform: none;
    width: auto;
    padding: 80px 16px 0;
  }
  .why__eyebrow { font-size: 12px; letter-spacing: 2.16px; }
  .why__header h2 { margin-top: 14px; font-size: 28px; line-height: 38px; }
  .why__header p { margin-top: 8px; font-size: 13px; line-height: 24px; }

  .why__viewport {
    position: static;
    height: auto;
    margin-top: 36px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .why__viewport::-webkit-scrollbar { display: none; }

  .why__track {
    transform: none !important;
    gap: 16px;
    padding: 0 16px;
  }

  .why-card {
    width: 360px;
    height: auto;
    min-height: 320px;      /* match the frame's card aspect (~358x320); content needs ~263px */
    border-radius: 24px;
    padding: 24px;
    scroll-snap-align: center;
  }
  .why-card__head { gap: 16px; height: 36px; }
  .why-card__num { font-size: 48px; line-height: 36px; }
  .why-card__num--img img { height: 44px; }
  .why-card__tag { font-size: 12px; letter-spacing: 0.96px; padding: 8px 12px; }
  .why-card h3 { margin-top: 28px; font-size: 17px; line-height: 21px; }
  .why-card h3 br { display: none; }
  .why-card h4 { margin-top: 4px; font-size: 15px; line-height: 24px; }
  .why-card p { margin-top: 14px; font-size: 13px; line-height: 22px; color: #DADADA; }

  .why__progress { position: relative; margin: 28px 0 0; }

  /* ---------- case studies ---------- */

  .cases__frame { width: 100%; padding: 80px 16px; }
  .cases__header { width: auto; }
  .cases__header h2 { font-size: 28px; line-height: 36px; }
  .cases__header p { margin-top: 14px; font-size: 13px; line-height: 22px; }

  .cases__row {
    display: block;
    margin-top: 0;
  }
  .cases__row:first-of-type { margin-top: 40px; }
  .case, .case--wide { width: 100%; margin-top: 24px; }
  .case__img { height: 285px; }
  .case h3 { margin-top: 20px; font-size: 17px; line-height: 21px; }
  .case p { margin-top: 2px; font-size: 15px; line-height: 24px; }

  /* ---------- footer ---------- */

  .footer__frame { width: 100%; padding: 64px 16px 24px; }

  /* logo (left) + "Proudly made in Singapore" + flags (right) stay side-by-side, top-aligned */
  .footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .footer__logo { line-height: 0; }
  .footer__made p { font-size: 13px; line-height: 20px; }   /* compact so it fits beside the logo */
  .footer__flags { margin-top: 8px; flex-wrap: wrap; }
  .footer__flags img { width: 20px; height: 15px; }

  .footer__cols { display: block; margin-top: 48px; }
  .footer__contact div { display: block; margin-bottom: 22px; }
  .footer__contact dt { width: auto; font-size: 13px; line-height: 26px; }
  .footer__contact dd { font-size: 13px; line-height: 26px; }

  /* mobile stacks both link columns ("GLYDE STUDIOS" then "OUR SERVICES"),
     matching the design */
  .footer__col { width: auto; margin-top: 44px; }
  .footer__col h4 { font-size: 12px; margin-bottom: 24px; }
  .footer__col a { font-size: 13px; margin-bottom: 22px; }

  .footer__wordmark { margin-top: 52px; margin-bottom: 12px; }

  /* copyright + social sit below the wordmark (small gap) */
  .footer__bottom { margin-top: 20px; align-items: flex-start; }
  .footer__bottom p { font-size: 11px; line-height: 16px; max-width: 180px; }
  .footer__social a { font-size: 12px; padding: 9px 16px; }
}


/* ============================================================
   SHORT VIEWPORTS (>=1025px wide, low height — e.g. 1366x768 laptops)
   Desktop-only: the floor sits above the mobile/tablet range (<=1024px) so
   these pinned-layout tweaks never touch the swipe layout. The adaptive flex
   composition compresses spacing automatically; below ~800px of height also
   shrink the circles and cards a notch so captions and bubbles keep fitting
   inside the pinned frame.
   ============================================================ */

@media (min-width: 1025px) and (max-height: 820px) {
  .service { zoom: 0.9; }
  .services__row { gap: 64px; padding-bottom: 110px; }
  .services__watermark { font-size: 64px; bottom: 48px; }
  .why-card { zoom: 0.88; }
  .why__viewport { height: auto; }
}

@media (min-width: 1025px) and (max-height: 700px) {
  .service { zoom: 0.8; }
  .services__header h2 { font-size: 40px; line-height: 46px; }
  .why-card { zoom: 0.76; }
  .why__header h2 { font-size: 40px; line-height: 46px; }
}


/* ============================================================
   SUBPAGES: CASE STUDY (showcase) + CONTACT US
   ============================================================ */

body.lightpage { background: #FAFAFB; }

/* light nav variant (case-study page: white bg, dark links) */
.nav--light .nav__links a { color: #262626; }
.nav--light .nav__links a:hover { color: var(--blue); }
.nav--light .nav__drop-panel {
  background: rgba(250, 250, 251, 0.92);
  border-color: rgba(14, 14, 14, 0.08);
}
.nav--light .nav__drop-panel a { color: #262626; }
.nav--light .nav__drop-panel a:hover { background: rgba(14, 14, 14, 0.05); color: var(--blue); }
.nav--light .nav__burger span { background: #0E0E0E; }

/* portfolio + contact subpages: nav sticks to the top, frosted glass like the
   homepage (base .nav is absolute and scrolls away). Frame top-padding already
   clears the bar, so switching absolute→fixed doesn't shift content. */
.subpage .nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transform: none;
  z-index: 50;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* light (case-study) page: tint the glass so the bar reads on the white bg */
.lightpage .subpage .nav {
  background: rgba(250, 250, 251, 0.72);
  border-bottom-color: rgba(14, 14, 14, 0.08);
}

/* --- case study (light page) --- */

.showcase {
  position: relative;
  background: #FAFAFB;
}

.showcase__frame {
  width: 846px;
  margin: 0 auto;
  padding: 172px 0 80px;
  text-align: center;
}
/* index pages (blog/cases) get a wider canvas so the filters fit on one inline
   row and the 3-up grid has more room (single posts keep the 846px width) */
@media (min-width: 1025px) {
  .showcase__frame:has(.content-index) { width: min(1200px, 92vw); }
}

.showcase__frame h1 {
  font: 600 48px/54px var(--font-display);
  color: #0E0E0E;
}

.showcase__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  font: 300 16px/26px var(--font-display);
  color: #494949;
}
.showcase__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D9D9D9;
}

.showcase__img {
  display: block;
  width: 846px;
  height: 498px;
  margin: 40px 0 0;
  border-radius: 24px;
  overflow: hidden;
}
.showcase__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase__text {
  width: 750px;
  margin: 40px auto 0;
  font: 300 16px/26px var(--font-display);
  color: #0E0E0E;
  text-align: left;
}

/* --- contact page (navy band) --- */

.contactpage {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}

.contactpage__frame {
  width: 1440px;
  margin: 0 auto;
  padding: 180px 0 90px;
  text-align: center;
}

.contactpage__frame h1 {
  font: 600 48px/54px var(--font-display);
  color: #fff;
}

.contactpage__sub {
  width: 672px;
  margin: 26px auto 0;
  font: 300 16px/26px var(--font-display);
  color: rgba(255, 255, 255, 0.75);
}

/* ===== Contact page form (redesigned) ===== */
.contactpage__eyebrow {
  display: inline-block;
  font: 700 12px/1 var(--font-lato);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
}

.cform { width: min(1080px, 92%); margin: 44px auto 0; text-align: left; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* main fields: two-column grid */
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; align-items: start; }
.cfield { display: flex; flex-direction: column; gap: 9px; }
.cfield > span {
  font: 700 12px/1 var(--font-lato);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.cfield > span i { color: var(--cyan); font-style: normal; }
.cfield input,
.cfield textarea,
.cfield__select {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  outline: none;
  font: 400 15px/1.4 var(--font-lato);
  color: #FAFAFB;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cfield textarea { resize: vertical; min-height: 96px; }
.cform ::placeholder { color: rgba(255, 255, 255, 0.34); }
.cfield input:focus,
.cfield textarea:focus,
.cfield__select:focus { border-color: rgba(3, 215, 255, 0.5); background: rgba(255, 255, 255, 0.07); }
.cfield__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2303D7FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.cfield__select option { color: #111; }   /* native dropdown renders light */

/* collapsible "if you already know what you want" — clean compact toggle pill */
.cform__more { margin-top: 40px; }
.cform__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font: 600 15px/1.3 var(--font-display);
  color: #fff;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cform__more > summary:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(3, 215, 255, 0.45); }
.cform__more > summary::-webkit-details-marker { display: none; }
.cform__more-chev { color: var(--cyan); flex-shrink: 0; transition: transform 0.22s ease; }
.cform__more[open] .cform__more-chev { transform: rotate(90deg); }

/* uniform 2 x 3 grid — every box the same size */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 20px; margin: 18px 0 8px; }

/* service card — frosted glass, matching the Why Glyde cards */
.svc-card {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(145deg,
      rgba(200, 232, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 28%,
      rgba(255, 255, 255, 0.02) 66%,
      rgba(8, 26, 64, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 22px 24px 26px;
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 0 40px rgba(255, 255, 255, 0.05),
    0 24px 56px rgba(0, 0, 0, 0.40);
}
.svc-card__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.svc-card__icon { color: var(--cyan); flex-shrink: 0; }
.svc-card__head h3 { font: 700 13px/1.35 var(--font-lato); letter-spacing: 0.6px; text-transform: uppercase; color: #fff; }

/* checkbox option */
.svc-opt { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin-top: 15px; }
.svc-opt > span { font: 600 15px/1.4 var(--font-display); color: #fff; }
.svc-check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.svc-check:hover { border-color: var(--cyan); }
.svc-check:checked { background: var(--cyan); border-color: var(--cyan); }
.svc-check:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1.5px;
  width: 5px; height: 9px;
  border: solid #03122B;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.svc-check:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.svc-opt--nested { margin-top: 10px; }
.svc-opt--nested > span { font: 400 14px/1.4 var(--font-display); color: rgba(255, 255, 255, 0.82); }

/* descriptive sub-items */
.svc-sub { list-style: none; margin: 7px 0 0; padding: 0 0 0 29px; }
.svc-sub li {
  position: relative;
  padding: 4px 0 4px 14px;
  font: 400 13px/1.5 var(--font-display);
  color: rgba(255, 255, 255, 0.62);
}
.svc-sub li::before {
  content: "";
  position: absolute;
  left: 1px; top: 12px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
}
.svc-sub li strong { color: rgba(255, 255, 255, 0.88); font-weight: 700; }
.svc-sub .svc-lead { margin: 2px 0; padding-left: 14px; font: 400 13px/1.5 var(--font-display); color: rgba(255, 255, 255, 0.62); }
.svc-sub .svc-opt--nested { padding-left: 14px; }
.svc-note { margin: 11px 0 0 14px; font: italic 400 12.5px/1.5 var(--font-display); color: rgba(255, 255, 255, 0.5); }

/* "Fractional" tag — blue, no underline */
.frac { color: var(--blue); font-weight: 700; }

/* inline API name field */
.svc-inline { padding-left: 29px; margin-top: 8px; }
.api-name { display: flex; align-items: center; gap: 8px; font: 400 13px/1.4 var(--font-display); color: rgba(255, 255, 255, 0.62); }
.api-name input {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 7px 11px;
  color: #fff;
  font: 400 13px/1.4 var(--font-lato);
  outline: none;
}
.api-name input::placeholder { color: rgba(255, 255, 255, 0.4); }
.api-name input:focus { border-color: rgba(3, 215, 255, 0.6); }

/* "Not quite sure" card */
.svc-card__hint { margin-top: 14px; font: 400 13px/1.55 var(--font-display); color: rgba(255, 255, 255, 0.58); }
.svc-card--notsure textarea {
  flex: 1;
  width: 100%;
  margin-top: 14px;
  min-height: 150px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 13px 16px;
  color: #fff;
  font: 400 14px/1.5 var(--font-lato);
  outline: none;
}
.svc-card--notsure textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.svc-card--notsure textarea:focus { border-color: rgba(3, 215, 255, 0.6); background: rgba(255, 255, 255, 0.08); }

/* submit */
.cform__foot { margin-top: 44px; text-align: center; }
.cform__foot button {
  padding: 16px 40px;
  min-width: 180px;
  border: 0;
  border-radius: 38px;
  font: 600 16px/1.2 var(--font-lato);
  cursor: pointer;
  transition: filter 0.25s ease, background 0.3s ease, color 0.3s ease;
  background: rgba(255, 255, 255, 0.18);
  color: #B5B5B5;
}
.cform__foot button:not(:disabled) { background: linear-gradient(180deg, #003BD7 0%, var(--blue) 100%); color: #fff; }
.cform__foot button:not(:disabled):hover { filter: brightness(1.15); }
.cform__foot button:disabled { cursor: not-allowed; }

.contact-form__msg { margin-top: 18px; font: 400 14px/1.4 var(--font-lato); color: var(--cyan); min-height: 20px; }
.contact-form__msg.is-error { color: #FF8D8D; }

/* --- blog / case studies (PHP content pages) --- */
.content-index { margin-top: 48px; }

/* filter toolbar: category pills + service dropdown */
.content-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 9px;
}

/* category navigation — display:contents flattens the pills into the toolbar
   row so the category pills AND the service dropdown all sit inline */
.content-filter {
  display: contents;
}
.content-filter__btn {
  padding: 9px 15px;
  border: 1px solid #E2E3EA;
  border-radius: 999px;
  background: #fff;
  font: 600 13px/1 var(--font-lato);
  color: #565B6E;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.content-filter__btn:hover { border-color: #C7CEE6; color: var(--navy); }
.content-filter__btn.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #003BD7 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(54, 109, 253, 0.25);
}

/* dropdown filter (service on all sizes; category on mobile) */
.content-select { position: relative; display: inline-flex; align-items: center; }
.content-select--cat { display: none; } /* desktop uses the pill nav instead */
.content-select__field {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 34px 10px 15px;
  min-width: 166px;
  border: 1px solid #E2E3EA;
  border-radius: 999px;
  background: #fff;
  font: 600 13px/1 var(--font-lato);
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.content-select__field:hover { border-color: #C7CEE6; }
.content-select__field:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(54, 109, 253, 0.18);
}
.content-select__chev {
  position: absolute;
  right: 16px;
  color: #8A8F9E;
  pointer-events: none;
}

.postgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 24px;
  margin-top: 40px;
  text-align: left;
}
.post-card { display: flex; flex-direction: column; }
.post-card__link { display: block; text-decoration: none; }
.post-card__img {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #366DFD, #03D7FF);
}
.post-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-card__link:hover .post-card__img img { transform: scale(1.04); }
.post-card h3 { margin-top: 18px; font: 600 22px/28px var(--font-display); color: #0E0E0E; }
.post-card__meta { margin-top: 6px; font: 300 14px/20px var(--font-display); color: #6B6B6B; }

/* blog: category label on its own row above the title */
.post-card__cat {
  display: inline-block;
  margin-top: 16px;
  font: 600 12px/1 var(--font-lato);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}
.post-card__cat + h3 { margin-top: 8px; }

/* case cards: Company (project) / Industry / Service tag */
/* case covers are 1500x1185 designed banners — match the tile ratio so the
   title/tagline aren't cropped (blog cards keep 16:10) */
.post-card--cases .post-card__img { aspect-ratio: 1500 / 1185; }
.post-card--cases h3 { margin-top: 16px; }
.post-card__project { font-weight: 400; color: #6B6B6B; }
.post-card__industry { margin-top: 6px; font: 300 14px/20px var(--font-display); color: #6B6B6B; }
.post-card__service {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 13px;
  border: 1px solid #E2E3EA;
  border-radius: 999px;
  background: #F4F5F9;
  font: 600 12.5px/1 var(--font-lato);
  color: #3C4255;
}

/* ============================================================
   /work (case-studies index) — DARK theme. Matches the case
   study pages so the index → case transition isn't a jarring
   light → dark jump. Toggled by body.pagedark, which render_index
   sets for $type === 'cases' only (the blog index stays light).
   ============================================================ */
body.pagedark { background: #010E32; }
body.pagedark .showcase { background: #010E32; }
/* nav: dark glass bar, light links, white logo (like the case pages) */
body.pagedark .subpage .nav { background: rgba(1, 14, 50, 0.72); border-bottom-color: rgba(255, 255, 255, 0.09); }
body.pagedark .nav--light .nav__links a,
body.pagedark .nav--light .nav__drop-toggle { color: #E5E5E6; }
body.pagedark .nav--light .nav__links a:hover,
body.pagedark .nav--light .nav__drop-toggle:hover { color: var(--cyan); }
body.pagedark .nav--light .nav__logo img { filter: brightness(0) invert(1); }
body.pagedark .nav--light .nav__burger span { background: #fff; }
body.pagedark .nav--light .nav__drop-panel { background: rgba(1, 14, 50, 0.96); border-color: rgba(255, 255, 255, 0.10); }
body.pagedark .nav--light .nav__drop-panel a { color: #E5E5E6; }
body.pagedark .nav--light .nav__drop-panel a:hover { background: rgba(255, 255, 255, 0.06); color: var(--cyan); }
/* heading + intro line */
body.pagedark .showcase__frame h1 { color: #FAFAFB; }
body.pagedark .showcase__meta { color: #B0B2B5; }
body.pagedark .showcase__dot { background: rgba(255, 255, 255, 0.28); }
/* filter toolbar: category pills + service dropdown (is-active keeps its blue gradient) */
body.pagedark .content-filter__btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #B0B2B5;
}
body.pagedark .content-filter__btn:hover { border-color: var(--cyan); color: #fff; }
/* selected filter matches the hover look (cyan outline), not a filled gradient */
body.pagedark .content-filter__btn.is-active {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: none;
}
body.pagedark .content-select__field {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #E5E5E6;
}
body.pagedark .content-select__field:hover { border-color: var(--cyan); }
body.pagedark .content-select__field option { color: #0E0E0E; } /* native list stays readable */
/* case cards */
body.pagedark .post-card h3 { color: #FAFAFB; }
body.pagedark .post-card__project,
body.pagedark .post-card__industry,
body.pagedark .post-card__meta { color: #95999D; }
body.pagedark .post-card__service {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #C9CCD2;
}
body.pagedark .postgrid-empty { color: #B0B2B5; }

/* service-tag chips (magenta box) — button-like, clickable to filter */
.post-card__tags, .showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.showcase__tags { justify-content: center; }
.tag-chip {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid #E2E3EA;
  border-radius: 999px;
  background: #F4F5F9;
  font: 600 12.5px/1 var(--font-lato);
  color: #3C4255;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.tag-chip:hover { background: #EAF0FF; border-color: #C7D6FF; color: var(--blue); }
.tag-chip.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #003BD7 0%, var(--blue) 100%);
  color: #fff;
}

/* empty state */
.postgrid-empty {
  margin-top: 44px;
  text-align: center;
  font: 300 16px/26px var(--font-display);
  color: #6B6B6B;
}
.postgrid-empty__reset {
  border: 0;
  background: none;
  padding: 0;
  font: 600 16px/26px var(--font-display);
  color: var(--blue);
  cursor: pointer;
}
.postgrid-empty__reset:hover { text-decoration: underline; }

/* pagination (client-side, blog/case index — 9 per page) */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 52px;
}
.pagination__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid #E2E3EA;
  border-radius: 999px;
  background: #fff;
  font: 600 14px/1 var(--font-lato);
  color: #565B6E;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pagination__btn:hover:not(:disabled):not(.is-active) { border-color: #C7CEE6; color: var(--navy); }
.pagination__btn.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #003BD7 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(54, 109, 253, 0.25);
}
.pagination__btn:disabled { opacity: 0.4; cursor: default; }
.pagination__nav { font-size: 17px; }
/* dark index (.pagedark = /work) */
body.pagedark .pagination__btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #B0B2B5; }
body.pagedark .pagination__btn:hover:not(:disabled):not(.is-active) { border-color: var(--cyan); color: #fff; }

/* related articles block at the foot of a single post */
.related {
  width: 846px;
  max-width: 100%;
  margin: 76px auto 0;
  padding-top: 44px;
  border-top: 1px solid #E6E7EC;
  text-align: left;
}
.related__title {
  font: 600 26px/32px var(--font-display);
  color: #0E0E0E;
}
.postgrid--related { margin-top: 30px; gap: 40px 24px; }
.postgrid--related .post-card h3 { font-size: 20px; line-height: 26px; }

.article {
  width: 750px;
  max-width: 100%;
  margin: 40px auto 0;
  text-align: left;
  font: 300 17px/29px var(--font-display);
  color: #1A1A1A;
}
.article > :first-child { margin-top: 0; }
.article p { margin-top: 22px; }
.article h2 { margin-top: 40px; font: 600 30px/38px var(--font-display); color: #0E0E0E; }
.article h3 { margin-top: 32px; font: 600 22px/30px var(--font-display); color: #0E0E0E; }
.article ul, .article ol { margin-top: 22px; padding-left: 22px; }
.article li { margin-top: 8px; }
.article a { color: var(--blue); text-decoration: underline; }
.article img { display: block; width: 100%; border-radius: 18px; margin-top: 32px; }
.article blockquote {
  margin-top: 32px; padding-left: 20px;
  border-left: 3px solid var(--cyan); color: #494949; font-style: italic;
}
.article code {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05); padding: 2px 6px; border-radius: 6px;
}
.article--back { margin-top: 48px; }
.article--back a { color: var(--blue); text-decoration: none; font-weight: 500; }

/* --- single-post two-column layout: content + sticky sidebar (TOC + related) --- */
.article-head { text-align: left; }
.showcase__frame--article .showcase__meta,
.showcase__frame--article .showcase__tags { justify-content: flex-start; }

@media (min-width: 1025px) {
  .showcase__frame--article { width: min(1180px, 92vw); text-align: left; }
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 304px;
    grid-template-areas: "main aside";
    gap: 0 64px;
    align-items: start;
    margin-top: 16px;
  }
  .article-main  { grid-area: main; min-width: 0; }
  /* TOC + Related travel together as one sticky column */
  .article-aside {
    grid-area: aside;
    align-self: start;
    position: sticky;
    top: 108px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .article-related { margin-top: 28px; }
  /* content fills its column (override the centered single-column widths) */
  .article-layout .showcase__img { width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 0; }
  .article-layout .article { width: auto; max-width: none; margin: 36px 0 0; }
  .showcase__frame--article .related { width: 100%; margin-top: 72px; }
}
.article :is(h2, h3) { scroll-margin-top: 108px; }

/* sidebar shared */
.article-side__title { font: 600 17px/24px var(--font-display); color: #0E0E0E; margin-bottom: 14px; }
/* TOC + Related share the same card box (same width, padding, radius, background) */
.article-toc, .article-related { background: #F5F6F8; border-radius: 16px; padding: 24px 22px; }

/* Table of Contents card */
.toc-list { list-style: none; counter-reset: toc; }
.toc-list__item { counter-increment: toc; margin-top: 11px; }
.toc-list__item:first-child { margin-top: 0; }
.toc-list__item--sub { counter-increment: none; padding-left: 16px; margin-top: 8px; }
.toc-list a {
  display: flex; gap: 8px;
  font: 400 15px/21px var(--font-display);
  color: #565B6E; text-decoration: none;
  transition: color 0.2s ease;
}
.toc-list__item > a::before { content: counter(toc) "."; color: #9AA0B0; flex: 0 0 auto; }
.toc-list__item--sub > a::before { content: "–"; }
.toc-list a:hover { color: var(--navy); }
.toc-list a.is-active { color: var(--blue); font-weight: 600; }

/* Related cases list */
.related-list { list-style: none; }
.related-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; text-decoration: none;
  border-top: 1px solid #ECEDF1;
}
.related-list li:first-child .related-item { border-top: 0; padding-top: 0; }
.related-item__img {
  flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #366DFD, #03D7FF);
}
.related-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-item__text { flex: 1 1 auto; min-width: 0; }
.related-item__name {
  display: block; font: 600 15px/20px var(--font-display); color: #0E0E0E;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.related-item__meta { display: block; font: 300 13px/18px var(--font-display); color: #8A8F9E; }
.related-item__arrow {
  flex: 0 0 auto; color: #B6BAC6; font-size: 16px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.related-item:hover .related-item__name { color: var(--blue); }
.related-item:hover .related-item__arrow { color: var(--blue); transform: translateX(3px); }

/* mobile: stack — TOC on top, content, then related */
@media (max-width: 1024px) {
  .article-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "toc" "main" "related";
    gap: 24px 0;
    margin: 26px 16px 0;
  }
  /* dissolve the sticky wrapper so its children take their own grid rows */
  .article-aside { display: contents; }
  .article-toc { grid-area: toc; position: static; }
  .article-related { grid-area: related; margin-top: 4px; }
  .article-layout .article { width: auto; margin: 28px 0 0; }
  .article-layout .showcase__img { width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 0; }
}

/* 404 page (no padding override here — the .showcase__frame top padding clears the nav) */
.error404__code {
  font: 700 132px/1 var(--font-display);
  letter-spacing: 2px;
  background: linear-gradient(180deg, #2BD6FF 0%, #2148E8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error404 h1 { margin-top: 12px; }
.error404__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: center;
}
.error404__btn {
  padding: 14px 30px;
  border-radius: 38px;
  background: linear-gradient(180deg, #003BD7 0%, var(--blue) 100%);
  color: #fff;
  font: 600 15px/1 var(--font-lato);
  text-decoration: none;
  transition: filter 0.25s ease;
}
.error404__btn:hover { filter: brightness(1.15); }
.error404__link { color: var(--blue); text-decoration: none; font: 500 15px/1 var(--font-lato); }
.error404__link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .content-index { margin-top: 32px; }
  /* mobile: swap the category pill nav for a dropdown; stack both filters full-width */
  .content-toolbar { flex-direction: column; gap: 12px; align-self: stretch; }
  .content-filter { display: none; }
  .content-select { display: flex; align-self: stretch; }
  .content-select__field { min-width: 0; width: 100%; }
  .postgrid { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .post-card h3 { font-size: 19px; line-height: 24px; }
  .related { margin: 52px 16px 0; padding-top: 32px; }
  .related__title { font-size: 22px; line-height: 28px; }
  .postgrid--related { gap: 32px; }
  .article { width: auto; margin: 32px 16px 0; font-size: 15px; line-height: 26px; }
  .article h2 { font-size: 24px; line-height: 30px; }
  .article--back { margin-left: 16px; margin-right: 16px; }
  .error404__code { font-size: 88px; }
}

/* --- subpage mobile --- */

@media (max-width: 1024px) {

  .showcase__frame {
    width: 100%;
    padding: 136px 16px 56px;
    text-align: center;   /* heading + meta centered; body text stays left */
  }
  .showcase__frame h1 { font-size: 28px; line-height: 36px; }
  .showcase__meta { justify-content: center; margin-top: 16px; font-size: 13px; line-height: 22px; }
  .showcase__img { width: 100%; height: 285px; margin-top: 32px; }
  .showcase__text {
    width: auto;
    margin: 32px 24px 0;
    font-size: 13px;
    line-height: 22px;
  }

  .contactpage__frame {
    width: 100%;
    padding: 136px 16px 136px;
    text-align: center;   /* heading + sub centered */
  }
  .contactpage__frame h1 { font-size: 28px; line-height: 36px; }
  .contactpage__sub { width: auto; margin-top: 20px; font-size: 13px; line-height: 24px; color: rgba(255,255,255,0.75); }

  .cform { width: 100%; margin-top: 30px; }
  .cform__grid { grid-template-columns: 1fr; gap: 18px; }
  .cform__more > summary { font-size: 16px; padding: 20px 2px; }
  .svc-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .cform__foot button { display: block; width: 100%; }
}

/* ===== Blog article components — scoped to .article, shared by the rich blog posts
   (generated from the source HTML exports; per-article components included). ===== */
.article *::before, .article *::after { box-sizing:border-box;margin:0;padding:0 }
.article { --cyan:#03D7FF;--blue:#366DFD;--navy:#010E32;--offwhite:#FAFAFB;--lightgray:#E5E5E6;--pink:#FD366D;--amber:#FFB703;--green:#6DFD36;--text-h:#010E32;--text-body:#2C3345;--text-muted:#62666A;--text-faint:#95999D;--bg-page:#FAFAFB;--bg-white:#ffffff;--border:#E5E5E6;--font-head:'Lato',-apple-system,BlinkMacSystemFont,sans-serif;--font-body:'Quicksand',-apple-system,BlinkMacSystemFont,sans-serif }
.article .section-eyebrow { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:6px }
.article hr.rule { border:none;border-top:1px solid var(--border);margin:32px 0 0 }
.article .callout-navy { background:var(--navy);border-radius:10px;padding:18px 22px;margin:20px 0 24px }
.article .callout-navy p { color:rgba(255,255,255,0.82);font-size:14px;line-height:1.75;margin:0;font-weight:500 }
.article .callout-navy p strong { color:#fff }
.article .callout-blue { background:#EEF3FF;border-left:3px solid var(--blue);border-radius:0 8px 8px 0;padding:14px 20px;margin:14px 0 24px }
.article .callout-blue p { color:var(--navy);font-size:14px;line-height:1.7;margin:0;font-weight:600 }
.article .stat-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 26px }
.article .stat-card { background:var(--bg-white);border:1px solid var(--border);border-top:3px solid var(--blue);border-radius:8px;padding:14px 10px;text-align:center }
.article .stat-value { font-family:var(--font-head);font-size:22px;font-weight:900;color:var(--blue);display:block;line-height:1 }
.article .stat-label { font-family:var(--font-body);font-size:11px;color:var(--text-muted);font-weight:500;margin-top:6px;display:block;line-height:1.4 }
.article .data-table { width:100%;border-collapse:collapse;margin:16px 0 26px;font-size:12px }
.article .data-table thead th { background:var(--navy);color:#fff;font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:9px 10px;text-align:left }
.article .data-table thead th:first-child { border-radius:6px 0 0 0 }
.article .data-table thead th:last-child { border-radius:0 6px 0 0 }
.article .data-table tbody td { padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text-body);font-weight:500;vertical-align:middle }
.article .data-table tbody td:first-child { font-family:var(--font-head);font-weight:700;color:var(--navy) }
.article .data-table tbody tr:last-child td { border-bottom:none }
.article .data-table tbody tr:nth-child(even) td { background:#F8F9FF }
.article .decision-guide { display:flex;flex-direction:column;gap:8px;margin:16px 0 26px }
.article .decision-row { display:flex;align-items:flex-start;gap:12px;background:var(--bg-white);border:1px solid var(--border);border-radius:8px;padding:13px 16px }
.article .decision-row:hover { border-color:var(--blue) }
.article .decision-if { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);min-width:36px;padding-top:2px;flex-shrink:0 }
.article .decision-text { font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--text-body);line-height:1.6 }
.article .decision-text strong { color:var(--navy);font-weight:700 }
.article .sources-block { background:var(--bg-page);border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin:22px 0 0 }
.article .sources-title { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px }
.article .sources-block ol { padding-left:18px }
.article .sources-block ol li { font-family:var(--font-body);font-size:11px;color:var(--text-muted);font-weight:500;line-height:1.65;margin-bottom:5px }
.article .sources-block ol li a { color:var(--blue);text-decoration:none }
.article .sources-block ol li a:hover { text-decoration:underline }
.article .framework-block { background:var(--navy);border-radius:10px;padding:26px 22px;margin:22px 0 30px }
.article .framework-title { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.3);text-align:center;margin-bottom:18px }
.article .fw-steps { display:flex;justify-content:space-between;gap:6px;align-items:flex-start }
.article .fw-step { flex:1;text-align:center }
.article .fw-step .fw-num { font-family:var(--font-head);font-size:10px;font-weight:700;color:rgba(255,255,255,0.3);margin-bottom:4px;letter-spacing:0.06em }
.article .fw-step .fw-name { display:block;font-family:var(--font-head);font-size:12px;font-weight:700;color:#fff;padding:9px 4px;background:rgba(255,255,255,0.09);border-radius:6px;margin-bottom:4px }
.article .fw-step .fw-sub { display:block;font-family:var(--font-body);font-size:10px;color:rgba(255,255,255,0.35);font-weight:500 }
.article .fw-arrow { color:rgba(255,255,255,0.2);font-size:15px;padding-top:14px;flex-shrink:0;align-self:flex-start }
.article .article-cta { background:linear-gradient(135deg,var(--blue) 0%,#0BB5E8 100%);border-radius:10px;padding:32px 26px;text-align:center;margin:32px 0 }
.article .article-cta h3 { font-family:var(--font-head);font-size:21px;font-weight:900;color:#fff;margin-bottom:8px;letter-spacing:-0.01em }
.article .article-cta p { font-size:14px;font-weight:500;color:rgba(255,255,255,0.8);margin-bottom:20px }
.article .btn-primary { display:inline-block;background:#fff;color:var(--navy);font-family:var(--font-head);font-size:14px;font-weight:700;padding:12px 28px;border-radius:20px;text-decoration:none;letter-spacing:0.02em;transition:opacity 0.15s }
.article .btn-primary:hover { opacity:0.88 }
@media(max-width:600px){
.article .stat-strip { grid-template-columns:1fr 1fr }
.article .fw-steps { flex-direction:column;align-items:stretch }
.article .fw-arrow { display:none }
.article .dg-head span:nth-child(2), .article .dg-head span:nth-child(3) { font-size:9px }
.article .dg-head, .article .dg-row { grid-template-columns:1.3fr 0.85fr 0.85fr }
.article .dg-cell { padding:11px 8px;font-size:12px }
.article .dg-budget { font-size:12px }
}
@media(max-width:380px){
.article .stat-strip { grid-template-columns:1fr }
}
.article .tier-list { display:flex;flex-direction:column;gap:10px;margin:16px 0 26px }
.article .tier { background:var(--bg-white);border:1px solid var(--border);border-radius:10px;overflow:hidden }
.article .tier-header { display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border) }
.article .tier-icon { width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:15px;font-weight:900;color:#fff;flex-shrink:0;background:var(--blue) }
.article .tier-name { font-family:var(--font-head);font-size:15px;font-weight:900;color:var(--navy) }
.article .tier-sub { font-family:var(--font-body);font-size:12px;color:var(--text-muted);font-weight:500 }
.article .tier-price { margin-left:auto;font-family:var(--font-head);font-size:15px;font-weight:900;color:var(--blue);text-align:right;white-space:nowrap;line-height:1.3 }
.article .tier-body { padding:10px 16px;font-size:13px;color:var(--text-muted);font-weight:500;line-height:1.6 }
.article .decision-grid { display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:16px 0 26px }
.article .dg-head { display:grid;grid-template-columns:1.6fr 1fr 1fr;background:var(--navy) }
.article .dg-head span { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.55);padding:10px 14px }
.article .dg-row { display:grid;grid-template-columns:1.6fr 1fr 1fr;background:var(--bg-white);border-top:1px solid var(--border) }
.article .dg-row:nth-child(even) { background:#F8F9FF }
.article .dg-cell { padding:13px 14px;display:flex;align-items:center }
.article .dg-situation { font-size:13px;font-weight:600;color:var(--text-body);line-height:1.4 }
.article .dg-tier { font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--navy) }
.article .dg-budget { font-family:var(--font-head);font-size:13px;font-weight:900;color:var(--blue) }
.article .checklist { list-style:none;padding:0;margin:14px 0 26px }
.article .checklist li { display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px;font-weight:500;color:var(--text-body) }
.article .checklist li:last-child { border-bottom:none }
.article .check-icon { width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px }
.article .compare-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 24px }
.article .compare-card { border:1px solid var(--border);border-radius:10px;padding:18px;background:var(--bg-white) }
.article .compare-card.winner { border:2px solid var(--blue) }
.article .cc-eyebrow { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px }
.article .compare-card.winner .cc-eyebrow { color:var(--blue) }
.article .compare-card h4 { font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--navy);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border) }
.article .compare-card ul { list-style:none;padding:0 }
.article .compare-card ul li { font-size:12px;color:var(--text-muted);padding:5px 0;border-bottom:0.5px solid var(--border);display:flex;gap:8px;align-items:flex-start;line-height:1.45;font-weight:500 }
.article .compare-card ul li:last-child { border-bottom:none }
.article .cc-dot { width:5px;height:5px;border-radius:50%;background:#D1D5DB;flex-shrink:0;margin-top:5px }
.article .compare-card.winner .cc-dot { background:var(--blue) }
@media(max-width:600px){
.article .dg-head, .article .dg-row { grid-template-columns:1.5fr 0.8fr 1fr }
.article .dg-cell { padding:10px 8px }
.article .dg-situation { font-size:11px }
.article .dg-why { font-size:10px }
.article .dg-channel { font-size:11px }
.article .tc-legend { font-size:11px;gap:12px }
}
.article .timeline { display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:16px 0 26px }
.article .tl-row { display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--bg-white);border-bottom:1px solid var(--border) }
.article .tl-row:last-child { border-bottom:none }
.article .tl-month { font-family:var(--font-head);font-size:12px;font-weight:900;color:var(--blue);min-width:60px }
.article .tl-label { font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--navy);flex:1 }
.article .tl-note { font-family:var(--font-body);font-size:11px;color:var(--text-muted);font-weight:500 }
.article .roi-split { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 26px }
.article .roi-card { background:var(--bg-white);border:1px solid var(--border);border-top:4px solid var(--blue);border-radius:10px;padding:18px;text-align:center }
.article .roi-card.paid { border-top-color:var(--amber) }
.article .roi-label { font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px }
.article .roi-value { font-family:var(--font-head);font-size:36px;font-weight:900;color:var(--blue);line-height:1 }
.article .roi-card.paid .roi-value { color:var(--amber) }
.article .roi-sub { font-size:12px;color:var(--text-muted);font-weight:500;margin-top:6px }
.article .timeline-chart { background:var(--bg-white);border:1px solid var(--border);border-radius:10px;padding:20px 18px 14px;margin:16px 0 24px }
.article .tc-legend { display:flex;gap:18px;margin-bottom:8px;flex-wrap:wrap }
.article .tc-legend-item { display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--text-h) }
.article .tc-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0 }
.article .tc-dot.seo { background:var(--blue) }
.article .tc-dot.paid { background:var(--amber) }
.article .dg-head { display:grid;grid-template-columns:1.7fr 0.9fr 1fr;background:var(--navy) }
.article .dg-head span { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:rgba(255,255,255,0.55);padding:10px 12px }
.article .dg-row { display:grid;grid-template-columns:1.7fr 0.9fr 1fr;background:var(--bg-white);border-top:1px solid var(--border) }
.article .dg-cell { padding:12px;display:flex;align-items:center }
.article .dg-situation { font-size:12px;font-weight:600;color:var(--text-body);line-height:1.4 }
.article .dg-channel { font-family:var(--font-head);font-size:12px;font-weight:900 }
.article .dg-channel.seo { color:var(--blue) }
.article .dg-channel.paid { color:#D97706 }
.article .dg-channel.both { color:var(--pink) }
.article .dg-why { font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.4 }
@media(max-width:600px){
.article .split-2col { grid-template-columns:1fr }
.article .dg3-head, .article .dg3-row { grid-template-columns:1.3fr 1fr 0.8fr }
.article .dg3-cell { padding:10px 8px }
.article .dg3-situation { font-size:11px }
.article .dg3-action { font-size:11px }
.article .dg3-why { font-size:10px }
.article .ai-icon-box { width:40px;height:40px }
.article .ai-icon-box svg { width:22px;height:22px }
}
.article .usecase-list { display:flex;flex-direction:column;gap:10px;margin:16px 0 28px }
.article .usecase { background:var(--bg-white);border:1px solid var(--border);border-radius:10px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start }
.article .usecase-num { font-family:var(--font-head);font-size:20px;font-weight:900;color:var(--blue);min-width:32px;line-height:1 }
.article .usecase-content h3 { font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--navy);margin-bottom:5px }
.article .usecase-content p { font-size:13px;color:var(--text-muted);margin:0;line-height:1.6;font-weight:500 }
.article .ai-icon-grid { display:flex;flex-direction:column;gap:10px;margin:16px 0 28px }
.article .ai-card { background:var(--bg-white);border:1px solid var(--border);border-radius:10px;padding:16px 18px;display:flex;gap:16px;align-items:flex-start;transition:border-color 0.15s }
.article .ai-card:hover { border-color:var(--blue) }
.article .ai-icon-box { width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#EEF3FF }
.article .ai-icon-box svg { width:26px;height:26px }
.article .ai-card-content h3 { font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--navy);margin-bottom:5px }
.article .ai-card-content p { font-size:13px;color:var(--text-muted);margin:0;line-height:1.6;font-weight:500 }
.article .ai-badge { display:inline-block;font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--blue);background:#EEF3FF;padding:2px 8px;border-radius:4px;margin-top:8px }
.article .split-2col { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 24px }
.article .split-box { border-radius:10px;padding:20px 18px;border:1px solid var(--border) }
.article .split-box.gen { background:#FFF9EE;border-color:#FBE4BB }
.article .split-box.auto { background:#EEF3FF;border-color:#D0DEFF }
.article .split-icon { width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px }
.article .split-box.gen .split-icon { background:#FFEACB }
.article .split-box.auto .split-icon { background:#D9E4FF }
.article .split-icon svg { width:24px;height:24px }
.article .split-box h3 { font-family:var(--font-head);font-size:15px;font-weight:900;color:var(--navy);margin-bottom:8px }
.article .split-box p { font-size:13px;color:var(--text-body);margin:0;line-height:1.65;font-weight:500 }
.article .grants-table { width:100%;border-collapse:collapse;margin:16px 0 26px;font-size:12px }
.article .grants-table thead th { background:var(--navy);color:#fff;font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:10px 12px;text-align:left }
.article .grants-table thead th:first-child { border-radius:6px 0 0 0 }
.article .grants-table thead th:last-child { border-radius:0 6px 0 0 }
.article .grants-table tbody td { padding:11px 12px;border-bottom:1px solid var(--border);color:var(--text-body);font-weight:500;vertical-align:top;line-height:1.5 }
.article .grants-table tbody td:first-child { font-family:var(--font-head);font-weight:700;color:var(--navy);width:28% }
.article .grants-table tbody tr:last-child td { border-bottom:none }
.article .grants-table tbody tr:nth-child(even) td { background:#F8F9FF }
.article .grant-pill { display:inline-block;font-family:var(--font-head);font-size:10px;font-weight:700;color:var(--blue);background:#EEF3FF;padding:2px 8px;border-radius:4px;margin-top:4px }
.article .decision-grid3 { display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:16px 0 26px }
.article .dg3-head { display:grid;grid-template-columns:1.6fr 1.1fr 1fr;background:var(--navy) }
.article .dg3-head span { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.55);padding:10px 12px }
.article .dg3-row { display:grid;grid-template-columns:1.6fr 1.1fr 1fr;background:var(--bg-white);border-top:1px solid var(--border) }
.article .dg3-row:nth-child(even) { background:#F8F9FF }
.article .dg3-cell { padding:12px;display:flex;align-items:center }
.article .dg3-situation { font-size:12px;font-weight:600;color:var(--text-body);line-height:1.4 }
.article .dg3-action { font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--blue) }
.article .dg3-why { font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.4 }
@media(max-width:600px){
.article .dg5-head, .article .dg5-row { grid-template-columns:1.4fr 0.9fr 1.2fr }
.article .dg5-cell { padding:10px 8px }
.article .dg5-situation { font-size:11px }
.article .dg5-model { font-size:11px }
.article .dg5-why { font-size:10px }
.article .model-head { flex-wrap:wrap }
.article .model-price { margin-left:0;width:100%;justify-content:flex-end;margin-top:4px }
}
.article .model-cards { display:flex;flex-direction:column;gap:10px;margin:16px 0 28px }
.article .model-card { background:var(--bg-white);border:1px solid var(--border);border-radius:10px;overflow:hidden }
.article .model-head { display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border) }
.article .model-icon { width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.article .model-icon svg { width:24px;height:24px }
.article .model-name { font-family:var(--font-head);font-size:15px;font-weight:900;color:var(--navy) }
.article .model-sub { font-family:var(--font-body);font-size:12px;color:var(--text-muted);font-weight:500 }
.article .model-price { margin-left:auto;font-family:var(--font-head);font-size:15px;font-weight:900;color:var(--blue);text-align:right;white-space:nowrap;display:flex;align-items:baseline;gap:3px }
.article .model-price .price-unit { font-size:11px;font-weight:700;color:var(--text-muted) }
.article .model-tags { padding:10px 16px;display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border) }
.article .mt { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:3px 8px;border-radius:4px }
.article .mt.gr { background:#ECFDF5;color:#059669 }
.article .mt.gy { background:var(--bg-page);color:var(--text-muted);border:1px solid var(--border) }
.article .decision-grid5 { display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:16px 0 26px }
.article .dg5-head { display:grid;grid-template-columns:1.7fr 0.9fr 1.4fr;background:var(--navy) }
.article .dg5-head span { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.55);padding:10px 12px }
.article .dg5-row { display:grid;grid-template-columns:1.7fr 0.9fr 1.4fr;background:var(--bg-white);border-top:1px solid var(--border) }
.article .dg5-row:nth-child(even) { background:#F8F9FF }
.article .dg5-cell { padding:12px;display:flex;align-items:center }
.article .dg5-situation { font-size:12px;font-weight:600;color:var(--text-body);line-height:1.4 }
.article .dg5-model { font-family:var(--font-head);font-size:12px;font-weight:900;color:var(--blue) }
.article .dg5-why { font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.4 }
@media(max-width:600px){
.article .dg4-head, .article .dg4-row { grid-template-columns:1.3fr 1fr 0.9fr }
.article .dg4-cell { padding:10px 8px }
.article .dg4-situation { font-size:11px }
.article .dg4-action { font-size:11px }
.article .dg4-why { font-size:10px }
.article .app-funnel { flex-wrap:wrap;gap:6px }
.article .funnel-purpose { font-size:10px }
}
.article .plugin-list { display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:16px 0 28px }
.article .plugin-row { display:grid;grid-template-columns:36px 1fr auto;align-items:stretch;background:var(--bg-white);border-bottom:1px solid var(--border) }
.article .plugin-row:last-child { border-bottom:none }
.article .pl-num { font-family:var(--font-head);font-size:13px;font-weight:900;color:var(--blue);background:#EEF3FF;padding:14px 0;text-align:center;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.article .pl-content { padding:12px 14px }
.article .pl-content h3 { font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--navy);margin-bottom:3px }
.article .pl-content p { font-size:12px;color:var(--text-muted);margin:0;line-height:1.55;font-weight:500 }
.article .pl-cat { padding:12px 14px 12px 0;display:flex;align-items:center;flex-shrink:0 }
.article .pl-chip { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--blue);background:#EEF3FF;border:1px solid #D0DEFF;border-radius:6px;padding:4px 9px;white-space:nowrap }
.article .app-list { display:flex;flex-direction:column;gap:10px;margin:16px 0 28px }
.article .app-card { background:var(--bg-white);border:1px solid var(--border);border-radius:10px;overflow:hidden }
.article .app-head { display:flex;align-items:flex-start;gap:14px;padding:16px 18px }
.article .app-logo { width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.article .app-logo svg { width:24px;height:24px }
.article .app-name { font-family:var(--font-head);font-size:14px;font-weight:900;color:var(--navy);margin-bottom:3px }
.article .app-desc { font-size:12px;color:var(--text-muted);margin:0;line-height:1.55;font-weight:500 }
.article .app-funnel { display:flex;align-items:center;gap:8px;padding:10px 18px;border-top:1px solid var(--border);background:var(--bg-page) }
.article .funnel-stage { font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;flex-shrink:0 }
.article .funnel-stage.top { background:#EEF3FF;color:var(--blue) }
.article .funnel-stage.mid { background:#E0F9FF;color:#0891B2 }
.article .funnel-stage.bottom { background:#FFF0F3;color:var(--pink) }
.article .funnel-purpose { font-size:11px;font-weight:600;color:var(--text-body) }
.article .funnel-purpose strong { color:var(--navy) }
.article .decision-grid4 { display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:16px 0 26px }
.article .dg4-head { display:grid;grid-template-columns:1.6fr 1.1fr 1fr;background:var(--navy) }
.article .dg4-head span { font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.55);padding:10px 12px }
.article .dg4-row { display:grid;grid-template-columns:1.6fr 1.1fr 1fr;background:var(--bg-white);border-top:1px solid var(--border) }
.article .dg4-row:nth-child(even) { background:#F8F9FF }
.article .dg4-cell { padding:12px;display:flex;align-items:center }
.article .dg4-situation { font-size:12px;font-weight:600;color:var(--text-body);line-height:1.4 }
.article .dg4-action { font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--blue);line-height:1.3 }
.article .dg4-why { font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.4 }
@media(max-width:600px){
.article .channel-grid { grid-template-columns:1fr }
.article .dg4-head, .article .dg4-row { grid-template-columns:1.2fr 0.9fr 1.1fr }
}
.article .channel-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 28px }
.article .channel-card { background:var(--bg-white);border:1px solid var(--border);border-top:3px solid var(--blue);border-radius:8px;padding:16px }
.article .channel-card .ch-logo { width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:10px }
.article .channel-card .ch-logo svg { width:24px;height:24px }
.article .channel-card .ch-name { font-family:var(--font-head);font-size:14px;font-weight:900;color:var(--navy);margin-bottom:6px }
.article .channel-card p { font-size:12px;color:var(--text-muted);margin:0;line-height:1.55;font-weight:500 }
.article .matrix-table { width:100%;border-collapse:collapse;margin:16px 0 28px;font-size:12px }
.article .matrix-table th { background:var(--navy);color:#fff;font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:9px 10px;text-align:center }
.article .matrix-table th:first-child { border-radius:6px 0 0 0;text-align:left }
.article .matrix-table th:last-child { border-radius:0 6px 0 0 }
.article .matrix-table td { padding:9px 10px;border-bottom:1px solid var(--border);text-align:center;font-weight:500;color:var(--text-body) }
.article .matrix-table td:first-child { text-align:left;font-family:var(--font-head);font-weight:700;color:var(--navy) }
.article .matrix-table tr:last-child td { border-bottom:none }
.article .matrix-table tr:nth-child(even) td { background:#F8F9FF }
.article .dg4-head { display:grid;grid-template-columns:1.5fr 1fr 1.3fr;background:var(--navy) }
.article .dg4-row { display:grid;grid-template-columns:1.5fr 1fr 1.3fr;background:var(--bg-white);border-top:1px solid var(--border) }
.article .yes { color:#059669;font-weight:700 }
.article .no { color:var(--text-muted) }
.article .partial { color:#D97706;font-weight:700 }
/* component body text uses the site font (the export's Quicksand isn't loaded) */
.article { --font-body: 'Funnel Display', -apple-system, sans-serif; }
/* Notion "Link Article To" -> related service circle on the homepage */
.article .article-service { margin: 30px 0 0; font: 600 15px/1.6 var(--font-display); color: var(--navy); }
.article .article-service a { color: var(--blue); text-decoration: none; font-weight: 700; }
.article .article-service a:hover { text-decoration: underline; }