/* ==========================================================================
   Journal Publication Agency, Landing Page
   Design tokens → base → layout → components → sections → responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Brand, deep academic navy */
  --navy-950:#04121F;
  --navy-900:#08243F;
  --navy-800:#0C3055;
  --navy-700:#12406E;
  --brand-700:#0E49A6;
  --brand-600:#1257B8;
  --brand-500:#1A6BDB;
  --brand-400:#4B90F0;
  --brand-100:#D7E5FA;
  --brand-50:#EEF4FD;

  /* Aurora washes, soft section backgrounds */
  --aurora-blue:#CFE1FF;
  --aurora-pink:#FFD2FB;
  --aurora-coral:#FFD6D3;
  --aurora-lilac:#EEDDFF;
  --aurora-lav:#F1F1FF;
  --aurora-peach:#FFF0DF;
  --aurora-mint:#D8F5EE;

  /* Accents */
  --teal-600:#0E9E8F;
  /* Darker teals for text, #0E9E8F is only ~3.3:1 on white, fine for large
     display numerals but short of AA for small labels. */
  --teal-700:#0B8073;
  --teal-800:#096B60;
  --teal-400:#3ED6C0;
  --teal-50:#E4F6F3;
  --amber-600:#C97C16;
  /* Darker amber reserved for text, #C97C16 only reaches ~3.3:1 on white,
     which fails AA at body sizes. This one clears 5:1. */
  --amber-700:#9E5C0D;
  --amber-50:#FBF1E1;
  --rose-600:#C4436B;
  --rose-50:#FBE9EF;

  /* Warm CTA gradient */
  --warm-a:#FF5C2B;
  --warm-b:#FF9147;

  --wa:#25D366;
  --wa-dark:#12A85A;

  /* Neutrals */
  --ink:#0B1B2B;
  --slate-700:#3C4C60;
  --slate-600:#55657A;
  --slate-500:#6F7E92;
  --slate-400:#93A1B3;
  --line:#E3E9F0;
  --line-soft:#EDF1F6;
  --bg:#FFFFFF;
  --bg-soft:#F6F9FC;

  /* Type */
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Plus Jakarta Sans for display: distinctive letterforms (a, g, y) give the
     headings character, but it stays serious enough for an academic audience.
     Swap this one line to change every heading, the logo and the numerals. */
  --font-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Space & shape */
  --radius-sm:8px;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(11,27,43,.05),0 1px 3px rgba(11,27,43,.06);
  --shadow:0 4px 6px -2px rgba(11,27,43,.05),0 12px 24px -6px rgba(11,27,43,.10);
  --shadow-lg:0 12px 28px -8px rgba(11,27,43,.14),0 32px 64px -16px rgba(11,27,43,.18);
  --shadow-dark:0 18px 40px -12px rgba(2,10,20,.55),0 40px 80px -20px rgba(2,10,20,.45);

  --header-h:74px;
  --container:1200px;
  --gutter:24px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.021em;
  margin:0;
  color:var(--navy-900);
}

p{margin:0;}
img,svg{max-width:100%;}
img{height:auto;display:block;}

a{color:var(--brand-600);text-decoration:none;}
a:hover{text-decoration:underline;}

ul,ol{margin:0;padding:0;list-style:none;}

button{font:inherit;color:inherit;}

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

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--navy-800);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-weight:600;transition:top .18s ease;
}
.skip-link:focus{top:0;text-decoration:none;}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-narrow{max-width:880px;}

.section{
  position:relative;isolation:isolate;
  padding:clamp(48px,5.4vw,80px) 0;
  overflow:hidden;
}

/* Soft aurora washes behind sections, the colour that makes the page feel alive.
   Kept low-opacity so body copy keeps its contrast. */
.section-aurora::before,
.section-aurora-warm::before{
  content:"";position:absolute;inset:0;z-index:-2;
}
.section-aurora::before{
  background:
    radial-gradient(52rem 30rem at 12% 0%,var(--aurora-blue) 0%,rgba(207,225,255,0) 60%),
    radial-gradient(46rem 28rem at 88% 12%,var(--aurora-pink) 0%,rgba(255,210,251,0) 62%),
    radial-gradient(40rem 26rem at 62% 100%,var(--aurora-coral) 0%,rgba(255,214,211,0) 60%),
    linear-gradient(180deg,#FBFCFF 0%,#FFFFFF 100%);
  opacity:.62;
}
.section-aurora-warm::before{
  background:
    radial-gradient(48rem 28rem at 8% 6%,var(--aurora-lilac) 0%,rgba(238,221,255,0) 60%),
    radial-gradient(50rem 30rem at 92% 0%,var(--aurora-peach) 0%,rgba(255,240,223,0) 62%),
    radial-gradient(38rem 24rem at 45% 106%,var(--aurora-mint) 0%,rgba(216,245,238,0) 62%),
    linear-gradient(180deg,#FDFCFF 0%,#FFFFFF 100%);
  opacity:.7;
}

/* Hairline separators so the washes read as distinct bands */
.section-aurora,.section-aurora-warm{border-block:1px solid rgba(255,255,255,.6);}

.section-head{max-width:790px;margin-bottom:clamp(28px,3.4vw,44px);}
.section-head-center{margin-inline:auto;text-align:center;}
.section-title{
  font-size:clamp(2.05rem,3.9vw,3.05rem);
  font-weight:800;letter-spacing:-.032em;
  margin-bottom:18px;text-wrap:balance;
}
.section-lead{color:var(--slate-600);font-size:1.09rem;}

/* Gradient-highlighted words inside headings */
.grad{
  background:linear-gradient(100deg,var(--brand-500) 0%,var(--brand-700) 45%,var(--teal-600) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Eyebrow as a tinted pill */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);
  font-size:.755rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-700);
  background:rgba(26,107,219,.09);
  border:1px solid rgba(26,107,219,.16);
  padding:7px 14px;border-radius:999px;
  margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-500),var(--teal-600));
}
.section-head-center .eyebrow{margin-inline:auto;}


/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--brand-600);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-sans);
  font-weight:600;font-size:1rem;line-height:1;
  padding:16px 28px;border:1px solid transparent;border-radius:999px;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,filter .18s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow);}
.btn:active{transform:translateY(0);}

.btn-primary{--btn-bg:var(--brand-600);}
.btn-primary:hover{--btn-bg:var(--brand-700);}

/* WhatsApp CTA, recognisable green, strong on both light and dark */
.btn-wa{
  --btn-fg:#fff;
  background:linear-gradient(135deg,var(--wa) 0%,var(--wa-dark) 100%);
  box-shadow:0 8px 22px -6px rgba(18,168,90,.55);
}
.btn-wa:hover{filter:brightness(1.06);box-shadow:0 14px 30px -8px rgba(18,168,90,.6);}

/* Warm accent button, borrowed heat for non-WhatsApp actions */
.btn-warm{
  --btn-fg:#fff;
  background:linear-gradient(135deg,var(--warm-a) 0%,var(--warm-b) 100%);
  box-shadow:0 8px 22px -6px rgba(255,92,43,.5);
}
.btn-warm:hover{filter:brightness(1.05);}

.btn-white{--btn-bg:#fff;--btn-fg:var(--navy-800);}
.btn-white:hover{--btn-bg:#F2F6FC;}

.btn-ghost{
  --btn-bg:transparent;--btn-fg:var(--navy-800);
  border-color:var(--line);box-shadow:none;
}
.btn-ghost:hover{--btn-bg:#fff;border-color:var(--brand-100);}

/* Ghost on a dark background */
.btn-ghost-light{
  --btn-bg:rgba(255,255,255,.07);--btn-fg:#fff;
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:none;
}
.btn-ghost-light:hover{--btn-bg:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);}

.btn-sm{padding:11px 18px;font-size:.925rem;}
.btn-lg{padding:18px 32px;font-size:1.06rem;}

.ico-wa{width:19px;height:19px;fill:currentColor;flex:none;}
.ico-check{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
/* Transparent over the dark hero, solid once you scroll past it */
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 1px 20px rgba(11,27,43,.07);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}

.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.brand{display:inline-flex;align-items:center;gap:11px;color:#fff;}
.brand:hover{text-decoration:none;}
.brand-mark{display:inline-flex;color:#fff;transition:color .25s ease;}
/* The tile takes `currentColor`; the letterform must always be its inverse.
   Over the dark hero: white tile, navy letter. Once stuck: navy tile, white letter. */
.brand-mark svg path{stroke:var(--navy-900);transition:stroke .25s ease;}
.site-header.is-stuck .brand-mark svg path{stroke:#fff;}
.brand-text{
  font-family:var(--font-display);
  font-weight:700;font-size:1.235rem;
  letter-spacing:-.01em;color:#fff;
  transition:color .25s ease;
}
.site-header.is-stuck .brand-mark{color:var(--navy-800);}
.site-header.is-stuck .brand-text{color:var(--navy-900);}

.nav{display:flex;align-items:center;gap:32px;}
.nav-list{display:flex;align-items:center;gap:30px;}
.nav-list a{
  color:rgba(255,255,255,.86);font-weight:500;font-size:.965rem;
  position:relative;padding-block:6px;
  transition:color .25s ease;
}
.nav-list a:hover{color:#fff;text-decoration:none;}
.nav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.nav-list a:hover::after,.nav-list a.is-active::after{transform:scaleX(1);}
.nav-list a.is-active{color:#fff;font-weight:600;}

.site-header.is-stuck .nav-list a{color:var(--slate-700);}
.site-header.is-stuck .nav-list a:hover,
.site-header.is-stuck .nav-list a.is-active{color:var(--brand-700);}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:12px;
  cursor:pointer;
}
.site-header.is-stuck .nav-toggle{background:transparent;border-color:var(--line);}
.nav-toggle-bars{display:block;width:20px;}
.nav-toggle-bars span{
  display:block;height:2px;background:#fff;border-radius:2px;
  transition:transform .22s ease,opacity .18s ease,background-color .25s ease;
}
.site-header.is-stuck .nav-toggle-bars span{background:var(--navy-800);}
.nav-toggle-bars span+span{margin-top:5px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* --------------------------------------------------------------------------
   6. Hero, dark, with an aurora bloom
   -------------------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + clamp(40px,4.4vw,64px));
  padding-bottom:0;
  background:var(--navy-950);
  overflow:hidden;
}

.hero-bg{position:absolute;inset:0;z-index:-1;}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(56rem 34rem at 78% -10%,rgba(89,72,255,.50) 0%,rgba(89,72,255,0) 62%),
    radial-gradient(48rem 32rem at 12% 4%,rgba(20,120,235,.48) 0%,rgba(20,120,235,0) 64%),
    radial-gradient(42rem 30rem at 58% 108%,rgba(14,190,168,.34) 0%,rgba(14,190,168,0) 62%),
    radial-gradient(38rem 26rem at 96% 78%,rgba(255,92,43,.22) 0%,rgba(255,92,43,0) 60%),
    linear-gradient(165deg,#071B33 0%,#04121F 58%,#061A2E 100%);
}
/* Fine grid, faded at the edges */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(78% 62% at 50% 26%,#000 0%,transparent 82%);
  -webkit-mask-image:radial-gradient(78% 62% at 50% 26%,#000 0%,transparent 82%);
}

.hero-inner{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(34px,5vw,70px);align-items:center;
  padding-bottom:clamp(34px,4.2vw,54px);
}

.hero .eyebrow{
  color:#BFD8FF;
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* Eased down from the serif's 4.15rem: Plus Jakarta Sans sets noticeably wider
   at the same size, and the old value pushed this headline to four ragged
   lines. Paired with a slightly wider copy column below, it lands on three. */
.hero-title{
  font-size:clamp(2.4rem,4.6vw,3.8rem);
  font-weight:800;
  color:#fff;margin-bottom:24px;
  letter-spacing:-.038em;line-height:1.1;
  text-wrap:balance;
}
.hero-title em{
  font-style:italic;
  background:linear-gradient(100deg,#7CC6FF 0%,#A99BFF 48%,#5FE6C8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.hero-sub{
  font-size:clamp(1.06rem,1.55vw,1.22rem);
  color:rgba(226,236,248,.8);max-width:34em;margin-bottom:34px;
}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px;}

/* Hero visual, manuscript tracking mockup */
.hero-visual{position:relative;}

.track-card{
  position:relative;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-dark);
  padding:28px;
  transform:perspective(1500px) rotateY(-7deg) rotateX(2.5deg);
}
/* Soft halo so the card sits in the light rather than on top of it */
.track-card::before{
  content:"";position:absolute;inset:-14%;z-index:-1;
  background:radial-gradient(closest-side,rgba(124,198,255,.28),rgba(124,198,255,0) 72%);
  filter:blur(12px);
}

.track-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--line-soft);
}
.track-label{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate-400);margin-bottom:5px;
}
.track-title{
  font-family:var(--font-display);font-weight:600;
  font-size:1.04rem;line-height:1.35;color:var(--navy-900);max-width:22em;
}

.pill{
  flex:none;
  font-size:.74rem;font-weight:600;
  padding:5px 11px;border-radius:999px;
  border:1px solid transparent;
}
.pill-live{
  background:var(--teal-50);color:var(--teal-600);border-color:#C6EAE4;
  display:inline-flex;align-items:center;gap:6px;
}
.pill-live::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--teal-600);
  animation:pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

.track-steps{padding:18px 0 4px;}
.track-steps li{
  display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;
  padding:9px 0;font-size:.92rem;color:var(--slate-500);
  position:relative;
}
.track-steps li .dot{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line);background:#fff;
  justify-self:center;position:relative;z-index:1;
}
.track-steps li:not(:last-child)::before{
  content:"";position:absolute;left:10px;top:26px;bottom:-8px;
  width:2px;background:var(--line-soft);
}
.track-steps li.is-done:not(:last-child)::before{background:var(--teal-600);opacity:.35;}
.track-steps li.is-done .dot{
  border-color:var(--teal-600);background:var(--teal-600);
  box-shadow:inset 0 0 0 2px #fff;
}
.track-steps li.is-done .s-name{color:var(--slate-700);}
.track-steps li.is-active .dot{
  border-color:var(--brand-600);
  box-shadow:0 0 0 4px rgba(26,107,219,.14);
}
.track-steps li.is-active .s-name{color:var(--navy-900);font-weight:600;}
.track-steps li.is-active .s-meta{color:var(--brand-600);font-weight:600;}
.s-meta{font-size:.8rem;color:var(--slate-400);}

.track-foot{padding-top:16px;border-top:1px solid var(--line-soft);}
.progress{
  height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-bottom:10px;
}
.progress span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-500),var(--teal-600));
}
/* slate-500 lands at 4.14:1 here, under AA for text this size. */
.track-foot-text{font-size:.83rem;color:var(--slate-600);}

.float-chip{
  position:absolute;
  display:inline-flex;align-items:center;gap:8px;
  /* Dark glass, these overlap the white card, so a light chip would vanish. */
  background:rgba(7,23,40,.82);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-radius:999px;
  box-shadow:0 12px 30px -10px rgba(2,10,20,.75);
  padding:11px 17px;font-size:.86rem;font-weight:600;color:#fff;
  animation:float 5.5s ease-in-out infinite;
}
.float-chip .ico-check{color:var(--teal-400);width:16px;height:16px;}
.float-chip-1{top:-20px;left:-28px;}
.float-chip-2{bottom:-22px;right:-16px;animation-delay:-2.6s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

.hero{padding-bottom:clamp(36px,4.4vw,58px);}

/* --------------------------------------------------------------------------
   6b. Publisher marquee
   -------------------------------------------------------------------------- */
.marquee-band{
  background:#fff;
  border-bottom:1px solid var(--line-soft);
  padding:clamp(26px,3.4vw,40px) 0;
  overflow:hidden;
}

.marquee-label{
  text-align:center;
  font-size:.735rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-400);
  margin-bottom:clamp(18px,2.4vw,28px);
  padding-inline:var(--gutter);
}

/* Fade the strip out at both edges so logos enter and leave, rather than
   being chopped off at the viewport boundary. */
.marquee{
  position:relative;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}

.marquee-track{
  display:flex;
  width:max-content;
}
/* The class is added by JS only once the duplicate set exists, animating a
   single set would scroll it clean off the screen and leave a gap. */
.marquee-track.is-animated{
  animation:marquee-scroll var(--marquee-duration,46s) linear infinite;
}
.marquee:hover .marquee-track.is-animated,
.marquee:focus-within .marquee-track.is-animated{
  animation-play-state:paused;
}

@keyframes marquee-scroll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

.marquee-set{
  display:flex;align-items:center;
  flex:none;
}
.marquee-item{
  display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(26px,3.6vw,52px);
  flex:none;
}
.marquee-item img{
  max-height:38px;width:auto;
  object-fit:contain;
  transition:transform .25s ease;
}
.marquee-item:hover img{transform:scale(1.06);}

.marquee-item .logo-fallback{
  font-family:var(--font-display);
  font-size:.95rem;font-weight:600;
  color:var(--slate-400);white-space:nowrap;
}

@media (max-width:680px){
  .marquee-item{padding-inline:22px;}
  .marquee-item img{max-height:30px;}
}

/* --------------------------------------------------------------------------
   6c. Problem section
   Deliberately NOT built from .card, three card grids in a row was the thing
   that made this read as generic. Editorial list + a failing counterpart to
   the hero card instead.
   -------------------------------------------------------------------------- */
.section-problem{
  position:relative;isolation:isolate;
  border-block:1px solid var(--line-soft);
}
/* Warmer and heavier than the aurora sections, the page should feel like it
   dips here before the services section lifts it again. */
.section-problem::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(48rem 30rem at 88% -4%,rgba(196,67,107,.13) 0%,rgba(196,67,107,0) 60%),
    radial-gradient(42rem 28rem at 4% 96%,rgba(201,124,22,.11) 0%,rgba(201,124,22,0) 62%),
    linear-gradient(180deg,#FAF8F9 0%,#F6F7FA 100%);
}

.problem-inner{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(36px,5vw,72px);align-items:center;
}

/* ---- Warm variants of the shared accents ---- */
.eyebrow-warn{
  color:#A8365B;
  background:rgba(196,67,107,.09);
  border-color:rgba(196,67,107,.18);
}
.eyebrow-warn::before{background:linear-gradient(135deg,var(--rose-600),var(--amber-600));}

.grad-warn{
  background:linear-gradient(100deg,var(--rose-600) 0%,#B4527F 45%,var(--amber-700) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---- The stalled manuscript card ---- */
.problem-visual{position:relative;}

.stall-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 10px -4px rgba(11,27,43,.08),0 26px 56px -20px rgba(120,40,70,.28);
  padding:28px;
  transform:perspective(1500px) rotateY(6deg) rotateX(2.5deg);
}
/* Mirrors the hero card's halo, in the warning hue */
.stall-card::before{
  content:"";position:absolute;inset:-14%;z-index:-1;
  background:radial-gradient(closest-side,rgba(196,67,107,.2),rgba(196,67,107,0) 72%);
  filter:blur(12px);
}

.pill-stalled{
  background:var(--rose-50);color:#A8365B;border-color:#F2CBD9;
  display:inline-flex;align-items:center;gap:6px;
}
.pill-stalled::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--rose-600);
}

.stall-steps{padding:18px 0 4px;}
.stall-steps li{
  display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;
  padding:11px 0;font-size:.92rem;color:var(--slate-700);
  position:relative;
}
.stall-steps li:not(:last-child)::before{
  content:"";position:absolute;left:10px;top:30px;bottom:-10px;
  width:2px;background:var(--line-soft);
}
.stall-steps .dot{
  position:relative;
  width:17px;height:17px;border-radius:50%;
  border:2px solid var(--line);background:#fff;
  justify-self:center;z-index:1;
}
/* Secondary, but still real content, slate-400 would drop it to 2.6:1. */
.stall-steps .s-name em{font-style:normal;color:var(--slate-600);}
.stall-steps .s-meta{font-size:.8rem;font-weight:600;}

/* Rejected, a red dot carrying a small white cross */
.stall-steps li.is-fail .dot{
  border-color:var(--rose-600);background:var(--rose-600);
}
.stall-steps li.is-fail .dot::before,
.stall-steps li.is-fail .dot::after{
  content:"";position:absolute;left:50%;top:50%;
  width:7px;height:2px;background:#fff;border-radius:2px;
}
.stall-steps li.is-fail .dot::before{transform:translate(-50%,-50%) rotate(45deg);}
.stall-steps li.is-fail .dot::after{transform:translate(-50%,-50%) rotate(-45deg);}
.stall-steps li.is-fail .s-meta{color:var(--rose-600);}

/* Still waiting */
.stall-steps li.is-waiting .dot{
  border-color:var(--amber-600);
  box-shadow:0 0 0 4px rgba(201,124,22,.14);
}
.stall-steps li.is-waiting .s-name{color:var(--navy-900);font-weight:600;}
.stall-steps li.is-waiting .s-meta{color:var(--amber-700);}

.progress-stalled span{background:linear-gradient(90deg,var(--rose-600),var(--amber-600));}
.track-foot-text strong{color:var(--navy-900);font-weight:700;}

.stall-chip{
  position:absolute;bottom:-20px;left:-18px;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #F2CBD9;
  border-radius:999px;
  box-shadow:0 12px 28px -12px rgba(120,40,70,.4);
  padding:11px 17px;font-size:.86rem;font-weight:600;color:#A8365B;
}
.ico-x{
  width:15px;height:15px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;
}

/* ---- Editorial problem list (no boxes) ---- */
.problem-list{margin-top:clamp(28px,3.4vw,40px);}
.problem-item{
  display:grid;grid-template-columns:auto 1fr;
  gap:20px;align-items:start;
  padding:22px 0;
  border-top:1px solid rgba(11,27,43,.09);
}
.problem-item:last-child{border-bottom:1px solid rgba(11,27,43,.09);}

.problem-num{
  font-family:var(--font-display);font-weight:700;
  font-size:1.35rem;line-height:1.2;
  background:linear-gradient(135deg,var(--rose-600),var(--amber-700));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  min-width:2ch;
}
.problem-title{font-size:1.18rem;margin-bottom:6px;}
.problem-text{color:var(--slate-600);font-size:.985rem;}

/* --------------------------------------------------------------------------
   7. Service cards
   Six identical pale-blue icon tiles were the thing that read as generic, so
   each card carries its own accent and the tile is gone, the icon sits on a
   soft glow instead.
   -------------------------------------------------------------------------- */
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.svc{
  --accent:var(--brand-600);
  --accent-rgb:18,87,184;
  position:relative;overflow:hidden;
  padding:34px 30px 32px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.74) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(11,27,43,.04),0 14px 34px -20px rgba(11,27,43,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
/* Accent bloom in the top-right corner */
.svc::before{
  content:"";position:absolute;top:-42%;right:-28%;
  width:72%;height:84%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),0) 72%);
  opacity:.6;transition:opacity .3s ease;
}
.svc:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--accent-rgb),.34);
  box-shadow:0 4px 10px rgba(11,27,43,.05),0 26px 50px -22px rgba(var(--accent-rgb),.42);
}
.svc:hover::before{opacity:1;}

.svc:nth-of-type(1){--accent:#1257B8;--accent-rgb:18,87,184;}
.svc:nth-of-type(2){--accent:#0E9E8F;--accent-rgb:14,158,143;}
.svc:nth-of-type(3){--accent:#6E5BD0;--accent-rgb:110,91,208;}
.svc:nth-of-type(4){--accent:#B96A0F;--accent-rgb:185,106,15;}
.svc:nth-of-type(5){--accent:#C4436B;--accent-rgb:196,67,107;}
.svc:nth-of-type(6){--accent:#1E8E5A;--accent-rgb:30,142,90;}

/* flex, not inline-flex: the title below is inline-block (so its underline can
   size to the text), and an inline-level icon would sit on the same line. */
.svc-icon{
  position:relative;
  display:flex;width:max-content;
  align-items:center;justify-content:center;
  margin-bottom:22px;color:var(--accent);
}
/* Glow standing in for the old tile */
.svc-icon::before{
  content:"";position:absolute;inset:-15px;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),0) 72%);
  transition:transform .3s ease;
}
.svc:hover .svc-icon::before{transform:scale(1.15);}
.svc-icon svg{position:relative;width:40px;height:40px;}

.ic-fill{fill:currentColor;opacity:.16;stroke:none;}
.ic-line{
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

.svc-title{
  position:relative;display:block;
  font-size:1.16rem;margin-bottom:16px;
  /* Reserve two lines so the paragraph below starts at the same height in every
     card. Without it a card whose title wraps pushes its copy ~18px lower than
     its neighbours and the row reads ragged.
     Block, not inline-block: an inline-block aligns its LAST line to the text
     baseline, so a two-line title sits 3px higher than a one-line one. */
  min-height:2.28em;
}
/* Accent rule that sweeps in on hover */
.svc-title::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),0));
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.svc:hover .svc-title::after{transform:scaleX(1);}

.svc-text{color:var(--slate-600);font-size:.975rem;}

/* --------------------------------------------------------------------------
   8. Process
   -------------------------------------------------------------------------- */
.section-journey{
  position:relative;isolation:isolate;
  background:var(--navy-950);
  overflow:hidden;
}
/* Teal-forward, so it reads as a different room from the indigo hero. */
.section-journey::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(46rem 30rem at 12% -6%,rgba(14,190,168,.30) 0%,rgba(14,190,168,0) 62%),
    radial-gradient(44rem 30rem at 88% 6%,rgba(26,107,219,.36) 0%,rgba(26,107,219,0) 62%),
    radial-gradient(38rem 26rem at 60% 106%,rgba(89,72,255,.26) 0%,rgba(89,72,255,0) 60%),
    linear-gradient(170deg,#061A2E 0%,#04121F 60%,#071B33 100%);
}
.section-journey::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(72% 60% at 50% 34%,#000 0%,transparent 82%);
  -webkit-mask-image:radial-gradient(72% 60% at 50% 34%,#000 0%,transparent 82%);
}

/* Light-on-dark overrides for the shared heading parts */
.section-journey .section-title{color:#fff;}
.section-journey .section-lead{color:rgba(226,236,248,.74);}
.section-journey .eyebrow{
  color:#BFD8FF;
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.section-journey .grad{
  background:linear-gradient(100deg,#7CC6FF 0%,#A99BFF 48%,#5FE6C8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---- The rail ---- */
/* The SVG is a sibling of the list, not a child, an <ol> may only contain
   <li> (plus script-supporting elements), and a stray child would also shift
   every :nth-child match inside it. */
.journey-wrap{
  position:relative;
  margin-top:clamp(8px,2vw,20px);
}
.journey{
  position:relative;
  display:grid;
  gap:clamp(30px,4vw,54px);
}

/* Straight-spine fallback, used only until JS draws the curve (and if JS never
   runs). Hidden the moment the real path is in place. */
.journey::before,
.journey::after{
  content:"";position:absolute;
  left:50%;transform:translateX(-50%);
  width:2px;border-radius:2px;
  mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.journey::before{
  top:0;bottom:0;
  background:rgba(255,255,255,.13);
}
.journey::after{
  top:0;height:var(--journey-fill,0%);
  background:linear-gradient(180deg,var(--brand-400) 0%,#A99BFF 50%,var(--teal-400) 100%);
  box-shadow:0 0 18px rgba(95,230,200,.45);
  transition:height .15s linear;
}
.journey.has-curve::before,
.journey.has-curve::after{display:none;}

/* ---- The snaking path ---- */
/* No viewBox on purpose: the SVG user units are CSS pixels, so the path JS
   builds from measured node centres lines up exactly and the stroke keeps a
   constant width instead of being distorted by non-uniform scaling. */
.journey-curve{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;pointer-events:none;
  z-index:0;
}
.journey-curve-track{
  stroke:rgba(255,255,255,.14);
  stroke-width:2;
  stroke-linecap:round;
}
.journey-curve-fill{
  stroke:url(#journeyGradient);
  stroke-width:2.5;
  stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(124,198,255,.5))
         drop-shadow(0 0 14px rgba(95,230,200,.32));
  transition:stroke-dashoffset .15s linear;
}

.journey-step{
  display:grid;
  /* Must clear half the node (32px) PLUS the node's 42px shift PLUS a gutter,
     or the shifted node overlaps the copy beside it. 216/2 - 42 - 32 = 34px clear. */
  grid-template-columns:1fr 216px 1fr;
  align-items:center;
}

/* Odd steps sit left of the spine, even steps right.
   grid-row:1 is required, not decorative, the node markup precedes the body,
   so without it auto-placement can't put a column-1 body back on row 1 and
   drops it to a second row, making odd steps taller than even ones. */
.journey-body{
  grid-column:1;grid-row:1;
  text-align:right;position:relative;padding-block:6px;
}
.journey-step:nth-of-type(even) .journey-body{grid-column:3;text-align:left;}

.journey-title{font-size:1.24rem;color:#fff;margin-bottom:9px;}
.journey-text{color:rgba(226,236,248,.72);font-size:.975rem;}

/* ---- Nodes ---- */
/* Nodes sit off-centre in alternating directions so the line genuinely weaves
   through them. The path JS measures their real positions, so it follows. */
.journey-node{
  --shift:-42px;
  grid-column:2;grid-row:1;justify-self:center;
  position:relative;z-index:2;
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(6,20,36,.92);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transform:translateX(var(--shift));
  transition:border-color .45s ease,box-shadow .45s ease,transform .45s ease;
}
.journey-step:nth-of-type(even) .journey-node{--shift:42px;}
.journey-num{
  font-family:var(--font-display);font-weight:700;
  font-size:1.12rem;letter-spacing:.01em;
  color:rgba(226,236,248,.6);
  transition:color .45s ease;
}

/* Lights up as each step scrolls into view, reuses the existing reveal class,
   so no extra observer is needed. */
.journey-step.is-visible .journey-node{
  border-color:rgba(124,198,255,.55);
  box-shadow:0 0 0 6px rgba(26,107,219,.10),0 0 26px -4px rgba(95,230,200,.45);
  /* Must repeat the shift, a bare scale() here would snap the node back to centre. */
  transform:translateX(var(--shift)) scale(1.05);
}
.journey-step.is-visible .journey-num{color:#fff;}

/* --------------------------------------------------------------------------
   9. Publishers
   -------------------------------------------------------------------------- */
/* Flex rather than grid: the count isn't a multiple of the column count,
   so a short last row should centre instead of stretching. */
.logo-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:18px;
}
.logo-slot{
  flex:0 1 calc(25% - 14px);
  display:flex;align-items:center;justify-content:center;
  min-height:112px;padding:22px 28px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(11,27,43,.04),0 10px 28px -16px rgba(11,27,43,.2);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.logo-slot:hover{
  transform:translateY(-3px);
  background:#fff;border-color:#fff;
  box-shadow:0 4px 8px rgba(11,27,43,.05),0 18px 38px -16px rgba(11,27,43,.28);
}

/* Logos arrive at wildly different aspect ratios, cap both axes and let
   object-fit letterbox them so every tile reads at the same optical weight.
   Height is held at 46px because the current source files are only 60px tall;
   displaying them larger just magnifies the softness. Swap in SVGs (or 2x PNGs
   at ~120px tall) and this can safely go back up to ~56px. */
.logo-slot img{
  max-height:46px;max-width:100%;width:auto;
  object-fit:contain;
  opacity:.92;transition:opacity .2s ease;
}
.logo-slot:hover img{opacity:1;}

/* Text stand-in shown when a logo file isn't present yet */
.logo-slot .logo-fallback{
  font-family:var(--font-display);
  font-size:.98rem;font-weight:600;line-height:1.25;
  color:var(--slate-500);text-align:center;
}

.logo-note{margin-top:24px;text-align:center;font-size:.85rem;color:var(--slate-500);}

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
/* Mint wash, distinct from the cool aurora above and the warm one below,
   and the success tone suits a section about accepted manuscripts. */
.section-outcomes{
  position:relative;isolation:isolate;
  border-block:1px solid rgba(255,255,255,.6);
}
.section-outcomes::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(46rem 30rem at 10% -6%,rgba(14,158,143,.16) 0%,rgba(14,158,143,0) 62%),
    radial-gradient(44rem 28rem at 90% 2%,rgba(26,107,219,.13) 0%,rgba(26,107,219,0) 62%),
    radial-gradient(38rem 24rem at 55% 108%,rgba(95,230,200,.14) 0%,rgba(95,230,200,0) 60%),
    linear-gradient(180deg,#F8FDFC 0%,#FFFFFF 100%);
  opacity:.75;
}

/* Outcome snapshots, result first, quote as supporting colour.
   Content flows top-down with nothing pinned to the bottom: the old layout
   stretched the quote to fill the card, which punched a 55px hole into any
   card whose quote ran short. */
.outcomes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.outcome{
  position:relative;overflow:hidden;
  /* Corner glow lives in the background rather than a pseudo-element: ::before
     is already the top bar, and an ::after would stack above the text. */
  background:
    radial-gradient(26rem 17rem at 106% -16%,rgba(14,158,143,.15),rgba(14,158,143,0) 64%),
    linear-gradient(180deg,#FFFFFF 0%,#FBFDFD 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 28px 28px;
  box-shadow:0 1px 2px rgba(11,27,43,.04),0 14px 34px -20px rgba(11,27,43,.22);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.outcome::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal-600),var(--brand-500));
}
.outcome:hover{
  transform:translateY(-5px);
  border-color:rgba(14,158,143,.3);
  box-shadow:0 4px 10px rgba(11,27,43,.05),0 26px 50px -20px rgba(14,158,143,.32);
}

.outcome-field{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal-800);
  background:rgba(14,158,143,.09);
  border:1px solid rgba(14,158,143,.18);
  padding:6px 13px;border-radius:999px;
  margin-bottom:16px;
}
.outcome-field::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal-600),var(--brand-500));
}

.outcome-result{
  display:flex;align-items:flex-start;gap:10px;
  font-size:1.2rem;line-height:1.25;
  margin-bottom:22px;
  /* Two lines reserved so the metric row and quote start at the same height in
     every card, otherwise a one-line result lifts its metrics 24px. */
  min-height:2.5em;
}
/* Filled badge rather than a bare tick, reads as a stamp of completion. */
.outcome-result .ico-check{
  flex:none;width:24px;height:24px;margin-top:1px;
  padding:5px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal-600),var(--brand-500));
  color:#fff;stroke-width:3;
  box-shadow:0 4px 10px -3px rgba(14,158,143,.55);
}

/* Tinted panel so the figures read as a distinct data block */
.outcome-metrics{
  display:grid;grid-template-columns:1fr 1fr;
  margin:0 0 22px;padding:18px 20px;
  background:linear-gradient(160deg,rgba(14,158,143,.055),rgba(26,107,219,.045));
  border:1px solid rgba(14,158,143,.14);
  border-radius:14px;
}
.outcome-metrics > div{padding-right:14px;}
.outcome-metrics > div + div{
  padding-left:20px;padding-right:0;
  border-left:1px solid rgba(14,158,143,.18);
}
.outcome-metrics dt{
  font-size:.755rem;line-height:1.35;
  color:var(--slate-600);margin-bottom:7px;
  /* Two lines reserved: at some widths one label wraps and its neighbour
     doesn't, which pushes the value and the quote below out of line. */
  min-height:2.7em;
}
.outcome-metrics dd{
  margin:0;
  font-family:var(--font-display);font-weight:800;
  font-size:1.65rem;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--brand-600),var(--teal-700));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* The unit sits inside dd, so it has to opt back out of the gradient clip. */
.outcome-metrics .unit{
  font-size:.88rem;font-weight:600;letter-spacing:0;
  background:none;-webkit-text-fill-color:var(--slate-500);color:var(--slate-500);
}

.outcome-quote{
  margin:0;
  padding-left:15px;
  border-left:2px solid rgba(14,158,143,.3);
}
/* Body font here, not the display one: only 600–800 of Plus Jakarta Sans is
   loaded, so running quote text at 400 would fall back or be synthesised.
   The quote marks and accent rule already mark it as a quote. */
.outcome-quote p{
  font-family:var(--font-sans);
  font-size:1rem;line-height:1.6;color:var(--slate-700);
}
.outcome-quote p::before{content:"\201C";}
.outcome-quote p::after{content:"\201D";}
.outcome-quote footer{
  margin-top:9px;
  /* slate-500 measures 4.14:1 here, under AA at this size. */
  font-family:var(--font-sans);font-size:.83rem;color:var(--slate-600);
}

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq{
  background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius);
  overflow:hidden;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 2px rgba(11,27,43,.04),0 14px 40px -18px rgba(11,27,43,.22);
}
.faq-item+.faq-item{border-top:1px solid var(--line-soft);}
.faq h3{margin:0;font-family:inherit;}

.faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:transparent;border:0;cursor:pointer;
  padding:23px 28px;text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:1.09rem;
  color:var(--navy-900);
  transition:background-color .18s ease,color .18s ease;
}
.faq-q:hover{background:rgba(26,107,219,.05);color:var(--brand-700);}

.faq-icon{position:relative;flex:none;width:20px;height:20px;}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--brand-600);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .24s ease,opacity .2s ease;
}
.faq-icon::before{width:14px;height:2px;}
.faq-icon::after{width:2px;height:14px;}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}

.faq-a{padding:0 28px 26px;}
.faq-a p{color:var(--slate-600);font-size:1rem;max-width:62em;}

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative;isolation:isolate;
  background:var(--navy-950);
  padding:clamp(52px,5.6vw,84px) 0;
  text-align:center;
  overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(44rem 26rem at 14% 0%,rgba(89,72,255,.44) 0%,rgba(89,72,255,0) 62%),
    radial-gradient(40rem 26rem at 86% 104%,rgba(14,190,168,.34) 0%,rgba(14,190,168,0) 62%),
    radial-gradient(34rem 22rem at 96% 4%,rgba(255,92,43,.20) 0%,rgba(255,92,43,0) 60%),
    linear-gradient(150deg,#071B33 0%,#04121F 62%,#061A2E 100%);
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(62% 62% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(62% 62% at 50% 50%,#000,transparent 78%);
}
/* Two columns: pitch + WhatsApp on the left, form on the right. The band was
   centre-aligned when it held only a button, so alignment is reset here. */
.cta-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,68px);
  align-items:center;text-align:left;
}

.cta-inner{max-width:740px;}
.cta-title{color:#fff;font-size:clamp(2.05rem,4vw,3.05rem);font-weight:800;margin-bottom:18px;letter-spacing:-.032em;}
.cta-sub{color:rgba(226,236,248,.76);font-size:1.11rem;margin-bottom:34px;}
.cta-alt{margin-top:22px;font-size:.93rem;color:rgba(226,236,248,.6);}
.cta-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;}

.cta-grid .cta-title{font-size:clamp(1.95rem,3.4vw,2.7rem);}
.cta-grid .cta-sub{margin-bottom:28px;font-size:1.06rem;}

/* "or use the form" rule */
.cta-or{
  display:flex;align-items:center;gap:14px;
  margin:26px 0 0;
  font-size:.83rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(226,236,248,.5);
}
.cta-or::before,.cta-or::after{
  content:"";flex:1;height:1px;background:rgba(255,255,255,.14);
}

/* ---- Form ---- */
.cta-form{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,36px);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 24px 60px -24px rgba(2,10,20,.8);
}

.form-title{
  color:#fff;font-size:1.3rem;margin-bottom:22px;
}

.field{margin-bottom:16px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.field label{
  display:block;
  font-size:.855rem;font-weight:500;
  color:rgba(226,236,248,.82);
  margin-bottom:7px;
}
.field .req{color:var(--teal-400);}
.field .opt{color:rgba(226,236,248,.45);font-weight:400;}

.cta-form input,
.cta-form select,
.cta-form textarea{
  width:100%;
  font-family:var(--font-sans);font-size:.97rem;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:11px;
  padding:12px 14px;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
  -webkit-appearance:none;appearance:none;
}
.cta-form textarea{resize:vertical;min-height:84px;line-height:1.5;}

.cta-form input::placeholder,
.cta-form textarea::placeholder{color:rgba(226,236,248,.42);}

.cta-form input:hover,
.cta-form select:hover,
.cta-form textarea:hover{border-color:rgba(255,255,255,.3);}

.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus{
  outline:none;
  border-color:var(--teal-400);
  background:rgba(255,255,255,.11);
  box-shadow:0 0 0 4px rgba(62,214,192,.16);
}

/* Native select arrow can't be styled, so draw our own on the stripped box. */
.cta-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFD8FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:17px;
  padding-right:38px;
}
/* The dropdown list itself renders in the OS theme, so force readable colours. */
.cta-form select option{color:#0B1B2B;background:#fff;}

.cta-form input[aria-invalid="true"],
.cta-form select[aria-invalid="true"],
.cta-form textarea[aria-invalid="true"]{
  border-color:#FF8A9B;
  background:rgba(255,138,155,.09);
}

.field-error{
  min-height:0;margin-top:6px;
  font-size:.815rem;color:#FFB3BE;
}
.field-error:empty{margin-top:0;}

/* Honeypot, off-screen rather than display:none, which some bots skip. */
.hp{
  position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;
}

.form-submit{
  width:100%;margin-top:8px;
  position:relative;
}
.form-submit[disabled]{opacity:.72;cursor:progress;}

.spinner{
  display:none;
  width:16px;height:16px;flex:none;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
.form-submit.is-sending .spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

.form-status{
  margin-top:14px;font-size:.9rem;
  color:rgba(226,236,248,.78);
}
.form-status:empty{margin-top:0;}
.form-status.is-ok{color:var(--teal-400);font-weight:600;}
.form-status.is-error{color:#FFB3BE;}

.form-note{
  margin-top:16px;font-size:.815rem;
  color:rgba(226,236,248,.5);
}
.form-note a{color:rgba(226,236,248,.85);text-decoration:underline;text-underline-offset:3px;}

/* --------------------------------------------------------------------------
   12b. Legal / content pages (privacy, terms)
   The header is transparent by default because it sits over the dark hero.
   These pages have no hero, so it has to start solid or it would be white
   text on a white background until you scrolled.
   -------------------------------------------------------------------------- */
body.legal-page .site-header{
  background:rgba(255,255,255,.94);
  border-bottom-color:var(--line);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
body.legal-page .brand-mark{color:var(--navy-800);}
body.legal-page .brand-mark svg path{stroke:#fff;}
body.legal-page .brand-text{color:var(--navy-900);}
body.legal-page .nav-list a{color:var(--slate-700);}
body.legal-page .nav-list a:hover{color:var(--brand-700);}
body.legal-page .nav-toggle{background:transparent;border-color:var(--line);}
body.legal-page .nav-toggle-bars span{background:var(--navy-800);}

.legal{
  position:relative;isolation:isolate;
  padding:clamp(40px,5vw,72px) 0 clamp(48px,5.4vw,80px);
  overflow:hidden;
}
.legal::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(44rem 26rem at 12% -8%,rgba(26,107,219,.10) 0%,rgba(26,107,219,0) 62%),
    radial-gradient(40rem 24rem at 90% 0%,rgba(14,158,143,.09) 0%,rgba(14,158,143,0) 62%),
    linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 46%);
}

.legal-inner{max-width:760px;}

.legal-title{
  font-size:clamp(2rem,3.6vw,2.8rem);
  font-weight:800;letter-spacing:-.032em;
  margin-bottom:12px;
}
.legal-updated{
  font-size:.9rem;color:var(--slate-600);
  padding-bottom:22px;margin-bottom:32px;
  border-bottom:1px solid var(--line);
}

/* Draft banner. Delete the element once a solicitor has signed these off. */
.legal-draft{
  display:flex;gap:12px;
  background:var(--amber-50);
  border:1px solid #EFD8AE;
  border-radius:var(--radius);
  padding:18px 20px;margin-bottom:34px;
  font-size:.93rem;line-height:1.55;color:#7A4E0B;
}
.legal-draft strong{color:#5E3B06;}
.legal-draft svg{
  flex:none;width:20px;height:20px;margin-top:2px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

.legal-inner h2{
  font-size:1.35rem;font-weight:700;
  margin-top:38px;margin-bottom:12px;
}
.legal-inner h3{
  font-size:1.06rem;font-weight:700;
  margin-top:24px;margin-bottom:8px;
}
.legal-inner p{color:var(--slate-700);margin-bottom:14px;line-height:1.7;}
.legal-inner ul{
  list-style:disc;padding-left:22px;
  margin-bottom:16px;color:var(--slate-700);
}
.legal-inner li{margin-bottom:8px;line-height:1.65;}
.legal-inner a{text-decoration:underline;text-underline-offset:3px;}
.legal-inner strong{color:var(--navy-900);}

/* Anything still needing your input is wrapped in <span class="fill"> */
.fill{
  background:rgba(196,67,107,.1);
  border-bottom:1px dashed rgba(196,67,107,.5);
  color:#A8365B;font-weight:600;
  padding:1px 5px;border-radius:4px;
}

.legal-back{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:40px;font-weight:600;font-size:.95rem;
}
.legal-back svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--navy-950);color:rgba(226,236,248,.7);padding:46px 0;}
.footer-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 32px;
}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;}
.footer-brand .brand-text{color:#fff;font-size:1.12rem;}
/* Invert the mark on the dark footer: white tile, navy letterform. */
.footer-brand .brand-mark{color:#fff;}

.footer-contact,.footer-links{display:flex;align-items:center;gap:10px;font-size:.92rem;flex-wrap:wrap;}
.footer-contact a,.footer-links a{color:rgba(255,255,255,.82);}
.footer-contact a:hover,.footer-links a:hover{color:#fff;}
.sep{color:rgba(255,255,255,.28);}

.footer-copy{
  width:100%;font-size:.85rem;color:rgba(255,255,255,.42);
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
}

/* --------------------------------------------------------------------------
   14. Sticky mobile CTA
   -------------------------------------------------------------------------- */
.mobile-cta{
  display:none;
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--wa) 0%,var(--wa-dark) 100%);
  color:#fff;
  font-weight:700;font-size:1rem;
  padding:16px;border-radius:999px;
  box-shadow:0 12px 32px -8px rgba(18,168,90,.65);
}
.mobile-cta:hover{text-decoration:none;}

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none;}

.outcomes .reveal:nth-child(2){transition-delay:.08s;}
.outcomes .reveal:nth-child(3){transition-delay:.16s;}

.services-grid .reveal:nth-child(2){transition-delay:.07s;}
.services-grid .reveal:nth-child(3){transition-delay:.14s;}
.services-grid .reveal:nth-child(5){transition-delay:.07s;}
.services-grid .reveal:nth-child(6){transition-delay:.14s;}
/* Journey steps are deliberately not staggered, each one lights up on its own
   as it reaches the viewport, which is the point of the rail. */

.problem-list .reveal:nth-child(2){transition-delay:.08s;}
.problem-list .reveal:nth-child(3){transition-delay:.16s;}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .nav-list{gap:22px;}
  .nav{gap:22px;}
  .float-chip-1{left:-8px;}
  .float-chip-2{right:0;}
}

@media (max-width:940px){
  :root{--gutter:20px;}

  /* Mobile nav */
  .nav-toggle{display:inline-flex;}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:12px 20px 22px;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-list a,
  .site-header .nav-list a{
    display:block;padding:15px 4px;font-size:1.05rem;
    color:var(--slate-700);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-list a::after{display:none;}
  .nav-cta{margin-top:18px;width:100%;}

  /* CTA, stack the pitch above the form */
  .cta-grid{grid-template-columns:1fr;gap:34px;}

  /* Hero */
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{margin-top:14px;max-width:520px;}
  .track-card{transform:none;}
  .float-chip-1{top:-16px;left:0;}
  .float-chip-2{bottom:-16px;right:0;}

  /* Problem section, copy first, then the visual */
  .problem-inner{grid-template-columns:1fr;gap:36px;}
  .problem-visual{order:2;max-width:520px;margin-top:8px;}
  .stall-card{transform:none;}
  .stall-chip{bottom:-18px;left:0;}

  /* Journey rail, spine to the left, every step to its right.
     Small shift so the wave still reads without running off-canvas. */
  .journey::before,.journey::after{left:38px;transform:none;}
  .journey-step{grid-template-columns:76px 1fr;column-gap:22px;align-items:start;}
  .journey-node{grid-column:1;width:54px;height:54px;--shift:-11px;}
  .journey-step:nth-of-type(even) .journey-node{--shift:11px;}
  .journey-body,
  .journey-step:nth-of-type(even) .journey-body{
    grid-column:2;text-align:left;padding-top:12px;
  }

  /* Grids */
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .outcomes{grid-template-columns:repeat(2,1fr);}
  .logo-slot{flex-basis:calc(33.333% - 12px);min-height:104px;}
}

@media (max-width:680px){
  body{font-size:16px;}

  .services-grid{grid-template-columns:1fr;gap:18px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  /* iOS Safari zooms the whole page when a focused control is under 16px. */
  .cta-form input,
  .cta-form select,
  .cta-form textarea{font-size:16px;}
  .outcomes{grid-template-columns:1fr;gap:18px;}
  .outcome{padding:28px 24px 26px;}
  .outcome-result{min-height:0;}
  .svc{padding:30px 26px 28px;}
  /* Single column, nothing to align across, so drop the reserved second line. */
  .svc-title{min-height:0;}
  .logo-row{gap:14px;}
  .logo-slot{flex-basis:calc(50% - 7px);min-height:92px;padding:18px 20px;}
  .logo-slot img{max-height:38px;}

  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}

  .float-chip{font-size:.79rem;padding:9px 14px;}
  .float-chip-2{display:none;}

  .stall-card{padding:22px;}
  .stall-steps li{grid-template-columns:20px 1fr;row-gap:2px;font-size:.88rem;}
  .stall-steps .s-meta{grid-column:2;justify-self:start;}
  .stall-chip{font-size:.79rem;padding:9px 14px;}
  .problem-item{gap:16px;padding:18px 0;}

  .faq-q{padding:19px 20px;font-size:1.02rem;}
  .faq-a{padding:0 20px 20px;}

  .footer-inner{flex-direction:column;align-items:flex-start;}

  /* Sticky WhatsApp bar on small screens */
  .mobile-cta{display:flex;}
  body{padding-bottom:84px;}
  .site-footer{padding-bottom:24px;}
}

/* --------------------------------------------------------------------------
   17. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none;}

  /* The blanket rule above would snap the marquee to its -50% end state and
     hide half the logos. Stop it outright and let the user scroll the row. */
  .marquee-track,.marquee-track.is-animated{
    animation:none !important;
    transform:none !important;
  }
  .marquee{
    overflow-x:auto;
    mask-image:none;-webkit-mask-image:none;
    scrollbar-width:thin;
  }
  .marquee-item img{transform:none;}
}

@media print{
  .site-header,.mobile-cta,.hero-visual,.nav-toggle{display:none !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  body{font-size:12pt;}
  .hero,.cta-band,.site-footer,.section-journey{background:#fff !important;color:#000 !important;}
  .hero-bg,.cta-band::after,.cta-band::before,.section-journey::before,.section-journey::after,
  .section-aurora::before,.section-aurora-warm::before,.section-problem::before{display:none !important;}
  .hero-title,.cta-title,.cta-sub,.hero-sub,
  .section-journey .section-title,.section-journey .section-lead,
  .journey-title,.journey-text,.journey-num{color:#000 !important;}
  .grad,.hero-title em,.problem-num,.grad-warn,
  .section-journey .grad{
    -webkit-text-fill-color:#000 !important;color:#000 !important;background:none !important;
  }
  .journey::before,.journey::after{background:#000 !important;box-shadow:none !important;}
  .journey-node{border-color:#000 !important;background:#fff !important;}
  .faq-a[hidden]{display:block !important;}
}