/* ============================================================
   openmoove — "How it works" buyer-journey explainer
   Page-scoped styles, on the brand palette. Loaded by
   /how-it-works/ and /how-it-works/for-agents/ (for_agents.html reuses
   this whole stylesheet). Relies on base.html for the navbar, footer and
   the General Sans body font.

   These values used to live under a .brand-openmoove scope, because a
   TAUK-branded variant of the page shared the file and redefined the
   palette below it. That page is retired, so the scope is gone and the
   brand values sit directly on :root.
   ============================================================ */

:root {
  --p50:#FFF0F6;  --p100:#FFD9EA; --p200:#FFB3D3; --p300:#FE84B4;
  --p400:#FE4594; --p500:#E21F73; --p600:#B81861; --p700:#8E1049;
  --p800:#7A0D3D; --p900:#5C0A2F;

  --ink:#292934; --ink-2:#43434f; --body:#6b6b78; --muted:#9ca3af;
  --line:#ece2e9; --line-2:#f1f2f4;

  /* --grad tints .grad-text, so both stops stay dark enough to read as
     body-weight text: om-600 is 6.28:1 on white, om-500 4.49:1. The brand's
     own bg-om-grad-pink is deliberately not reused — it opens on #FE7DB4,
     which is 2.38:1. */
  --grad:     linear-gradient(to right,#B81861,#E21F73,#B81861);
  --grad-btn: linear-gradient(to right, var(--p700), var(--p600), var(--p700));
  --shadow-xl:0 30px 60px -20px rgba(92,10,47,0.30), 0 12px 24px -12px rgba(41,41,52,0.18);

  --maxw:1180px;
}

/* offset anchor jumps so they clear the fixed navbar */
html { scroll-padding-top: 84px; }

/* ---- blob backdrop — uses the home page's animate-blob-* classes
       (defined in base.html). Scoped to the hero: absolutely positioned within
       .hero (which is position:relative; z-index:2), sitting behind the hero
       content only. The rest of the page has no animated background. ---- */
.hiw-blobs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); position:relative; z-index:2; }

/* section label; the services band restyles this to uppercase om-300 */
.eyebrow {
  font-size:14px; letter-spacing:0.025em;
  color:var(--p600); font-weight:600; margin:0 0 14px;
  display:inline-block;
}

/* ---- Hero ---- */
/* full-bleed section: the blob backdrop fills the whole page width */
.hero {
  position:relative; z-index:2; overflow:hidden;
  padding:clamp(96px,9vw,120px) 0 clamp(56px,7vw,88px);
}
/* constrained inner column keeps the hero content centred and readable */
.hero-inner {
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:clamp(24px,5vw,70px); align-items:center; max-width:81rem; margin:0 auto;
  padding:0 clamp(20px,5vw,40px);
}
.hero-copy h1 { font-weight:700; font-size:clamp(36px,5.5vw,52px); line-height:1.15; margin:14px 0 22px; color:var(--ink); }
.hero-copy h1 .line { display:block; }
.hero-copy .lede { font-size:20px; color:var(--body); max-width:34ch; margin:0 0 32px; }
.hero-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }


.hero-art { position:relative; display:flex; justify-content:center; }
.hero-card {
  position:relative; border-radius:34px; padding:30px; display:flex; justify-content:center;
}
.hero-card .phone-main { width:min(240px,60%); position:relative; z-index:2; transform:rotate(-3deg); }
.hero-card .phone-side { width:min(190px,48%); margin-left:-52px; align-self:flex-end; transform:rotate(5deg); }

/* ---- Journey sections ---- */
.journey-intro { text-align:center; padding:clamp(64px,9vw,110px) 0 clamp(24px,4vw,44px); }
.journey-intro h2 { font-weight:700; font-size:clamp(36px,4.5vw,48px); line-height:1.12; margin:0 auto; max-width:18ch; }
.journey-intro p { color:var(--body); max-width:56ch; margin:20px auto 0; font-size:20px; }

.step { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,84px); align-items:center; padding:clamp(44px,6vw,80px) 0; position:relative; }
.step.reverse .step-art { order:2; }
.step.reverse .step-copy { order:1; }

.step-copy { position:relative; }
/* large index numeral sits above the label, never overlapping it */
.step-num { display:block; font-weight:800; font-size:clamp(60px,8vw,104px); line-height:0.9; color:rgba(184,24,97,0.20); letter-spacing:-0.04em; margin:0 0 6px; pointer-events:none; user-select:none; }
.step-copy .inner { position:relative; }
.step-copy h3 { font-weight:700; font-size:clamp(24px,3vw,32px); line-height:1.2; margin:6px 0 16px; color:var(--ink); }
.step-copy p { color:var(--body); font-size:17px; margin:0 0 22px; max-width:46ch; }

.feature-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.feature-list li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); }
.feature-list li .tick { flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--p100); color:var(--p700); display:grid; place-items:center; font-size:12px; font-weight:800; }

.step-art { display:flex; justify-content:center; position:relative; }
.step-art .frame { position:relative; padding:22px; }
.step-art .frame::before { content:""; position:absolute; inset:6% 8%; background:radial-gradient(circle at 50% 45%, rgba(254,132,180,0.22), rgba(254,132,180,0) 70%); filter:blur(20px); z-index:0; }
.step-art img { position:relative; z-index:1; filter:drop-shadow(var(--shadow-xl)); border-radius:30px; }

/* ---- Services band ---- */
/* Takes its cues from the home page's Moove Smooth section
   (www/templates/www/sections/moove-smooth.html): flat ink surface, om-300
   accents, translucent white cards, so the two read as one component. */
.band { position:relative; z-index:2; margin-top:clamp(40px,6vw,76px); overflow:hidden; background:var(--ink); color:#fff; }
.band .wrap { padding-block:clamp(58px,8vw,96px); position:relative; z-index:1; }
.band .eyebrow {
  color:#FE84B4;                                  /* om-300 — 6.28:1 on om-ink */
  text-transform:uppercase; letter-spacing:0.1em;
  font-size:12px; font-weight:600;
}
/* .grad-text is a pink gradient, and the band used to be a pink gradient too —
   so the four accented words in this headline rendered pink-on-pink, at roughly
   1.0-1.5:1 depending where you sampled the two gradients. Solid om-300 on ink
   is the home page's treatment and reads properly. */
.band .grad-text {
  background:none;
  -webkit-text-fill-color:#FE84B4;
  color:#FE84B4;
}
.band h2 { font-weight:700; font-size:clamp(28px,4vw,40px); line-height:1.15; margin:0 0 16px; max-width:18ch; }
.band p { color:rgba(255,255,255,0.86); max-width:54ch; font-size:17px; }

/* ---- CTA ---- */
.cta { position:relative; z-index:2; text-align:center; padding:clamp(76px,10vw,140px) 0 clamp(56px,7vw,96px); }
.cta-brand { display:inline-flex; align-items:center; gap:10px; justify-content:center; margin-bottom:22px; }
.cta-brand img { width:52px; height:52px; }
.cta-brand .name { font-weight:700; font-size:28px; color:var(--ink); }
.cta h2 { font-weight:700; font-size:clamp(34px,5vw,52px); line-height:1.12; margin:0 0 18px; }
.cta p { color:var(--body); max-width:48ch; margin:0 auto 34px; font-size:20px; }

/* ---- Scroll reveal ---- */
html:not(.js) .reveal { opacity:1; transform:none; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; }
.reveal.d2 { transition-delay:.16s; }
.reveal.d3 { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .animate-blob-primary, .animate-blob-secondary { animation:none; }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .hero { padding-top:88px; }
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-copy .lede { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .hero-art { margin-top:28px; }
  .eyebrow { justify-content:center; }
  .step { grid-template-columns:1fr; gap:8px; text-align:center; }
  .step.reverse .step-art, .step.reverse .step-copy { order:0; }
  .step-copy p { margin-inline:auto; }
  .feature-list { max-width:360px; margin-inline:auto; text-align:left; }
  .step-art { margin-top:16px; }
  /* full-width frame on mobile, but keep the fixed-width phone box centred */
  .step-art .frame { width:100%; display:flex; justify-content:center; }
}

/* ============================================================
   Restored 26/08/2026. This skin was deleted during the rebrand when
   /how-it-works/tauk/ became a 301; the page serves again because TAUK
   link to it.

   TYPOGRAPHY IS DELIBERATELY NOT RESTORED. The original set Poppins for
   body and Playfair Display for headings, both from Google Fonts. Those
   two origins were dropped from base.html when this page was retired —
   see the comment there — and putting them back for one partner page
   would undo that for every visitor. The palette carries the identity;
   the type is the site's self-hosted General Sans.
   ============================================================ */

/* ============================================================
   TAUK (The Agency UK) brand skin — Theme A, "light & refined".
   Scoped to .brand-tauk so the default openmoove page is untouched.
   Most of the page already reads its palette from custom properties,
   so we mainly redefine those + fonts + button shape, plus a few
   hard-coded pink values (step numerals, art glow, hero blobs,
   the Tailwind gradient hero button).
   ============================================================ */
.brand-tauk {
  /* gold / taupe palette in place of openmoove pink */
  --p50:#faf7f2;  --p100:#f3ece1; --p200:#e9ddca; --p300:#dcc8a9;
  --p400:#cdb189; --p500:#c09c79; --p600:#c09c79; --p700:#a8855f;
  --p800:#8c6e4d; --p900:#6f573c;
  --grad:     linear-gradient(to right,#a8855f,#c09c79,#a8855f);
  --grad-btn: linear-gradient(to right,#a8855f,#c09c79,#a8855f);
  --shadow-xl:0 30px 60px -20px rgba(111,87,60,0.28), 0 12px 24px -12px rgba(28,28,28,0.16);

  background:#fff;                          /* white page */
}

/* eyebrows: uppercase, letter-spaced, gold (colour already via --p600) */
.brand-tauk .eyebrow { text-transform:uppercase; letter-spacing:.22em; }

/* buttons — all four (hero + CTA) are Tailwind-classed anchors inside
   .hero-actions (rounded-full, font-semibold, pink from-primary / border-primary
   classes baked into the markup). Square them, uppercase + letter-space, 12px. */
.brand-tauk .hero-actions a {
  border-radius:2px !important;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:12px !important; font-weight:400 !important;
}
/* solid (first) buttons: gold gradient instead of pink */
.brand-tauk .hero-actions a:first-child { background-image:var(--grad-btn) !important; }
/* ghost (last) buttons: gold border instead of the baked-in primary-200 pink */
.brand-tauk .hero-actions a:last-child { border-color:var(--p300) !important; }
.brand-tauk .hero-actions a:last-child:hover { border-color:var(--p600) !important; }

/* large step numerals — hard-coded pink rgba in the base rule */
.brand-tauk .step-num { color:rgba(192,156,121,0.22); }

/* step art glow — hard-coded pink rgba radial in the base rule */
.brand-tauk .step-art .frame::before {
  background:radial-gradient(circle at 50% 45%, rgba(192,156,121,0.22), rgba(192,156,121,0) 70%);
}

/* hero blobs — Tailwind from-primary-* gradients baked into the markup */
.brand-tauk .hiw-blobs > div {
  background-image:linear-gradient(to right,#dcc8a9,#c09c79) !important;
  opacity:.5;
}