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

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Brand, charcoal. The old navy scale, retuned to a neutral-warm charcoal
     so the orange carries all of the colour on the page. Names kept so the
     rest of the sheet did not have to be rewritten. */
  --navy-950:#0E0E0F;
  --navy-900:#141415;
  --navy-800:#1F2022;
  --navy-700:#2E2F33;

  /* Primary orange. --brand-500 is the signature; --brand-600 and --brand-700
     are the text-safe steps (4.5:1 and 5.9:1 on white). Never set small text
     in --brand-500, it only reaches ~3.1:1. */
  --brand-700:#B8360A;
  --brand-600:#D6420C;
  --brand-500:#FF551D;
  --brand-400:#FF7A48;
  --brand-100:#FFDCCD;
  --brand-50:#FFF3ED;

  /* Warm washes, soft section backgrounds. Peach and stone rather than the
     old aurora spectrum, so the sections read as one family. */
  --aurora-blue:#FFE7DA;
  --aurora-pink:#F7F2EC;
  --aurora-coral:#FFEFE3;
  --aurora-lilac:#F3F0EC;
  --aurora-lav:#F8F6F2;
  --aurora-peach:#FFF1E4;
  --aurora-mint:#EFECE6;

  /* Accents. The former teal slot is now a deeper burnt orange, used for
     "done" states and secondary gradients. */
  --teal-600:#C2410C;
  --teal-700:#9A3412;
  --teal-800:#7C2D12;
  --teal-400:#FF8A3D;
  --teal-50:#FFF1E8;
  --amber-600:#D6660C;
  --amber-700:#8A4A12;
  --amber-50:#FBF1E4;
  /* The former rose slot carries the "stalled" section. Warm charcoal greys,
     deliberately colourless, so the problem side reads flat next to the
     orange of the solution side. */
  --rose-600:#6B625E;
  --rose-50:#F2EFEB;

  /* Warm CTA gradient */
  --warm-a:#FF551D;
  --warm-b:#FF8A3D;

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

  /* Neutrals, warmed off the old blue-greys to sit under the orange */
  --ink:#141415;
  --slate-700:#3A3735;
  --slate-600:#57524E;
  --slate-500:#736D68;
  --slate-400:#9A938D;
  --line:#E6E3DE;
  --line-soft:#F0EDE8;
  --bg:#FFFFFF;
  --bg-soft:#F7F6F2;

  /* 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(20,20,21,.05),0 1px 3px rgba(20,20,21,.06);
  --shadow:0 4px 6px -2px rgba(20,20,21,.05),0 12px 24px -6px rgba(20,20,21,.10);
  --shadow-lg:0 12px 28px -8px rgba(20,20,21,.14),0 32px 64px -16px rgba(20,20,21,.18);
  --shadow-dark:0 18px 40px -12px rgba(10,10,11,.55),0 40px 80px -20px rgba(10,10,11,.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(255,231,218,0) 60%),
    radial-gradient(46rem 28rem at 88% 12%,var(--aurora-pink) 0%,rgba(247,242,236,0) 62%),
    radial-gradient(40rem 26rem at 62% 100%,var(--aurora-coral) 0%,rgba(255,239,227,0) 60%),
    linear-gradient(180deg,#FDFCFA 0%,#FFFFFF 100%);
  opacity:.62;
}
.section-aurora-warm::before{
  background:
    radial-gradient(48rem 28rem at 8% 6%,var(--aurora-lilac) 0%,rgba(243,240,236,0) 60%),
    radial-gradient(50rem 30rem at 92% 0%,var(--aurora-peach) 0%,rgba(255,241,228,0) 62%),
    radial-gradient(38rem 24rem at 45% 106%,var(--aurora-mint) 0%,rgba(239,236,230,0) 62%),
    linear-gradient(180deg,#FDFCFA 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(255,85,29,.09);
  border:1px solid rgba(255,85,29,.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(154,52,18,.55);
}
.btn-wa:hover{filter:brightness(1.06);box-shadow:0 14px 30px -8px rgba(154,52,18,.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,85,29,.5);
}
.btn-warm:hover{filter:brightness(1.05);}

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

.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(20,20,21,.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;}
/* The mark is a filled path set to `currentColor`, so colour is the only thing
   that changes between contexts: white over the dark hero, navy once stuck. */
.brand-mark{display:inline-flex;color:#fff;transition:color .25s ease;}
.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(255,85,29,.50) 0%,rgba(255,85,29,0) 62%),
    radial-gradient(48rem 32rem at 12% 4%,rgba(255,105,45,.48) 0%,rgba(255,105,45,0) 64%),
    radial-gradient(42rem 30rem at 58% 108%,rgba(255,122,72,.34) 0%,rgba(255,122,72,0) 62%),
    radial-gradient(38rem 26rem at 96% 78%,rgba(255,85,29,.22) 0%,rgba(255,85,29,0) 60%),
    linear-gradient(165deg,#1A1A1C 0%,#0E0E0F 58%,#161617 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:#DCD6CF;
  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,#FFD3A3 0%,#FFA35C 46%,#FF6B2C 100%);
  -webkit-background-clip:text;background-clip:text;
  /* background-clip:text crops at the inline box, which cuts the overhang of
     the italic final letter. Pad the box out and pull the space back. */
  padding-right:.08em;margin-right:-.08em;
  -webkit-text-fill-color:transparent;color:transparent;
}

.hero-sub{
  font-size:clamp(1.06rem,1.55vw,1.22rem);
  color:rgba(240,237,232,.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(255,122,72,.28),rgba(255,122,72,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:#FFD9C4;
  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(255,85,29,.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(26,26,28,.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(10,10,11,.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(107,98,94,.13) 0%,rgba(107,98,94,0) 60%),
    radial-gradient(42rem 28rem at 4% 96%,rgba(214,102,12,.11) 0%,rgba(214,102,12,0) 62%),
    linear-gradient(180deg,#F9F8F4 0%,#F3F1EC 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:#4A4441;
  background:rgba(107,98,94,.09);
  border-color:rgba(107,98,94,.18);
}
.eyebrow-warn::before{background:linear-gradient(135deg,var(--rose-600),var(--amber-600));}

.grad-warn{
  background:linear-gradient(100deg,var(--rose-600) 0%,#57504C 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(20,20,21,.08),0 26px 56px -20px rgba(60,54,50,.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(107,98,94,.2),rgba(107,98,94,0) 72%);
  filter:blur(12px);
}

.pill-stalled{
  background:var(--rose-50);color:#4A4441;border-color:#E3DED8;
  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(214,102,12,.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 #E3DED8;
  border-radius:999px;
  box-shadow:0 12px 28px -12px rgba(60,54,50,.4);
  padding:11px 17px;font-size:.86rem;font-weight:600;color:#4A4441;
}
.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(20,20,21,.09);
}
.problem-item:last-child{border-bottom:1px solid rgba(20,20,21,.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:214,66,12;
  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(20,20,21,.04),0 14px 34px -20px rgba(20,20,21,.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(20,20,21,.05),0 26px 50px -22px rgba(var(--accent-rgb),.42);
}
.svc:hover::before{opacity:1;}

.svc:nth-of-type(1){--accent:#D6420C;--accent-rgb:214,66,12;}
.svc:nth-of-type(2){--accent:#C2410C;--accent-rgb:194,65,12;}
.svc:nth-of-type(3){--accent:#8A4A12;--accent-rgb:138,74,18;}
.svc:nth-of-type(4){--accent:#B8360A;--accent-rgb:184,54,10;}
.svc:nth-of-type(5){--accent:#3A3735;--accent-rgb:58,55,53;}
.svc:nth-of-type(6){--accent:#9A3412;--accent-rgb:154,52,18;}

/* 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(255,122,72,.30) 0%,rgba(255,122,72,0) 62%),
    radial-gradient(44rem 30rem at 88% 6%,rgba(255,85,29,.36) 0%,rgba(255,85,29,0) 62%),
    radial-gradient(38rem 26rem at 60% 106%,rgba(255,85,29,.26) 0%,rgba(255,85,29,0) 60%),
    linear-gradient(170deg,#161617 0%,#0E0E0F 60%,#1A1A1C 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(240,237,232,.74);}
.section-journey .eyebrow{
  color:#DCD6CF;
  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,#FFD3A3 0%,#FFA35C 46%,#FF6B2C 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%,#FF9E5C 50%,var(--teal-400) 100%);
  box-shadow:0 0 18px rgba(255,196,138,.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(255,122,72,.5))
         drop-shadow(0 0 14px rgba(255,196,138,.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(240,237,232,.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(22,22,23,.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(240,237,232,.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(255,122,72,.55);
  box-shadow:0 0 0 6px rgba(255,85,29,.10),0 0 26px -4px rgba(255,196,138,.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(20,20,21,.04),0 10px 28px -16px rgba(20,20,21,.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(20,20,21,.05),0 18px 38px -16px rgba(20,20,21,.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(194,65,12,.16) 0%,rgba(194,65,12,0) 62%),
    radial-gradient(44rem 28rem at 90% 2%,rgba(255,85,29,.13) 0%,rgba(255,85,29,0) 62%),
    radial-gradient(38rem 24rem at 55% 108%,rgba(255,196,138,.14) 0%,rgba(255,196,138,0) 60%),
    linear-gradient(180deg,#FBF9F5 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(194,65,12,.15),rgba(194,65,12,0) 64%),
    linear-gradient(180deg,#FFFFFF 0%,#FBF9F5 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 28px 28px;
  box-shadow:0 1px 2px rgba(20,20,21,.04),0 14px 34px -20px rgba(20,20,21,.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(194,65,12,.3);
  box-shadow:0 4px 10px rgba(20,20,21,.05),0 26px 50px -20px rgba(194,65,12,.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(194,65,12,.09);
  border:1px solid rgba(194,65,12,.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(194,65,12,.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(194,65,12,.055),rgba(255,85,29,.045));
  border:1px solid rgba(194,65,12,.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(194,65,12,.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(194,65,12,.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(20,20,21,.04),0 14px 40px -18px rgba(20,20,21,.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(255,85,29,.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(255,85,29,.44) 0%,rgba(255,85,29,0) 62%),
    radial-gradient(40rem 26rem at 86% 104%,rgba(255,122,72,.34) 0%,rgba(255,122,72,0) 62%),
    radial-gradient(34rem 22rem at 96% 4%,rgba(255,85,29,.20) 0%,rgba(255,85,29,0) 60%),
    linear-gradient(150deg,#1A1A1C 0%,#0E0E0F 62%,#161617 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(240,237,232,.76);font-size:1.11rem;margin-bottom:34px;}
.cta-alt{margin-top:22px;font-size:.93rem;color:rgba(240,237,232,.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;}

/* ---- 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(10,10,11,.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(240,237,232,.82);
  margin-bottom:7px;
}
.field .req{color:var(--teal-400);}
.field .opt{color:rgba(240,237,232,.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(240,237,232,.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(255,138,61,.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:#141415;background:#fff;}

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

.field-error{
  min-height:0;margin-top:6px;
  font-size:.815rem;color:#FFC0AC;
}
.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(240,237,232,.78);
}
.form-status:empty{margin-top:0;}
.form-status.is-ok{color:var(--teal-400);font-weight:600;}
.form-status.is-error{color:#FFC0AC;}

.form-note{
  margin-top:16px;font-size:.815rem;
  color:rgba(240,237,232,.5);
}
.form-note a{color:rgba(240,237,232,.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-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(255,85,29,.10) 0%,rgba(255,85,29,0) 62%),
    radial-gradient(40rem 24rem at 90% 0%,rgba(194,65,12,.09) 0%,rgba(194,65,12,0) 62%),
    linear-gradient(180deg,#FDFCFA 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 #F5DCC4;
  border-radius:var(--radius);
  padding:18px 20px;margin-bottom:34px;
  font-size:.93rem;line-height:1.55;color:#8A4A12;
}
.legal-draft strong{color:#6B3609;}
.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(107,98,94,.1);
  border-bottom:1px dashed rgba(107,98,94,.5);
  color:#4A4441;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(240,237,232,.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(154,52,18,.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;}
}

/* --------------------------------------------------------------------------
   BRAND LOGO
   The supplied artwork is an orange tree with black lettering on transparency,
   so it cannot sit directly on the dark hero header or the dark footer. Rather
   than boxing it in white, we ship a reversed copy (white lettering, same
   orange tree) and stack the two in the header so they crossfade on the same
   timing as the existing transparent -> stuck transition. The footer is always
   dark, so it only ever needs the reversed copy.
   -------------------------------------------------------------------------- */
.brand-logo{display:block;width:180px;max-width:100%;height:auto;}

.site-header .brand{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  line-height:0;
}
.site-header .brand-logo{transition:opacity .25s ease;}
/* The on-light copy sits on top of the on-dark one and fades in over it. */
.site-header .brand-logo-on-light{position:absolute;top:0;left:0;opacity:0;}
.site-header.is-stuck .brand-logo-on-dark,
body.legal-page .brand-logo-on-dark{opacity:0;}
.site-header.is-stuck .brand-logo-on-light,
body.legal-page .brand-logo-on-light{opacity:1;}

.site-footer .footer-brand{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-self:start;
  line-height:0;
  text-decoration:none;
}
.site-footer .brand-logo{width:240px;}

@media (max-width:480px){
  .site-header .brand-logo{width:156px;}
}
@media (prefers-reduced-motion:reduce){
  .site-header .brand-logo{transition:none;}
}

/* --------------------------------------------------------------------------
   STACKED LOGO MARKS
   Most marks in the network row are horizontal wordmarks, capped at 46px so
   they read at the same optical weight. A stacked lockup (icon above type,
   roughly square) loses badly at that cap because its wordmark is only a
   fraction of the total height, so give it a little more room.
   -------------------------------------------------------------------------- */
.logo-slot.is-stacked img{max-height:62px;}
.marquee-item.is-stacked img{max-height:52px;}
@media (max-width:640px){
  .logo-slot.is-stacked img{max-height:52px;}
  .marquee-item.is-stacked img{max-height:42px;}
}

/* Footer postal address. Sits on its own row above the copyright line; the
   <address> element defaults to italic, which reads oddly at this size. */
.footer-address{
  width:100%;
  font-style:normal;
  font-size:.9rem;line-height:1.55;
  color:rgba(255,255,255,.62);
}

.legal-address{font-style:normal;line-height:1.7;margin:0 0 24px;}