/* RAKEZ blue edition v2 — ONLY Brand Book 1.1 p.24 colours + white.
   Same structure and fixes as the green edition (green-edition/next/green-theme.css);
   only the colour roles differ.

   Colour roles (one job each):
   Sapphire = brand surfaces (header, dark chapters, footer) and readable text.
   Euclase  = accents, lines, light washes, the second stat. Never text on white.
   Emerald  = a small secondary accent (one card bar, one stat line).
   Yellow   = the one action colour (buttons). Orange = small markers only.

   Contrast (WCAG 2.1): white on Sapphire 11.8:1, white on Sapphire 7699 6.3:1,
   Sapphire on Euclase 2975 7.1:1, Sapphire on Sapphire 5435 5.8:1, Onyx on white 7.1:1.
   Euclase on white is 2.7:1, so Euclase is never used for text on light backgrounds. */
:root{
  --em:#00a9a9;--em2:#4cbbbc;--em3:#6ec4c4;--em4:#9dd4d6;
  --eu:#13a8e1;--eu2:#3fb4e6;--eu3:#70c5ea;--eu4:#98d5e8;
  --sa:#0e3a5c;--sa2:#34657f;--sa3:#778793;--sa4:#a8bbc8;
  --on:#58585a;--on4:#d1d2d4;
  --or:#ff5f00;--ye:#ffdd00;
  --navy:var(--sa);--ink:var(--sa);--paper:#ffffff;--muted:var(--on);--line:var(--on4);
  --wash-eu:#98d5e838;--wash-sa:#a8bbc833;
  --font:'Roboto Condensed',Arial,Helvetica,sans-serif;
}

/* ================= Typography ================= */
html body,html body button,html body input,html body select,html body textarea{font-family:var(--font)}
html body{background:#ffffff;color:var(--sa);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body p,html body li{font-size:max(17px,1em);line-height:1.55}
html body h1,html body h2,html body h3,html body h4{font-family:var(--font);font-weight:700;letter-spacing:-.01em;text-wrap:balance;color:var(--sa)}
html body h1{line-height:.98}
html body h2{line-height:1.02}
html body p{text-wrap:pretty}
html body strong,html body b{font-weight:700}
html body .eyebrow{font-weight:700;letter-spacing:.14em;color:var(--sa2)}
html body .eyebrow i,html body .eyebrow::before{background:var(--or)}
html body .button,html body .text-button{font-weight:700;letter-spacing:.01em}
html body h2 em{color:var(--sa2);font-style:normal}
html body h1 em{color:var(--sa)!important;font-style:normal;background:linear-gradient(transparent 60%,var(--eu4) 60%,var(--eu4) 92%,transparent 92%)}
html body button[aria-pressed=true][data-public-filter],html body [data-public-filter].active{background:var(--sa)!important;border-color:var(--sa)!important;color:#ffffff!important}

/* ================= Focus + touch targets ================= */
html body :focus-visible{outline:3px solid var(--sa);outline-offset:3px;border-radius:2px}
html body .site-header :focus-visible,html body #compass :focus-visible,html body .closing :focus-visible,
html body .public-footer :focus-visible,html body .price-highlight :focus-visible,html body #instant-licence :focus-visible,
html body .theme-navy :focus-visible{outline-color:var(--ye)}
html body .button,html body .service-filters button,html body .space-tabs button,html body .campaign-options button{min-height:44px}
html body .public-footer a{display:inline-flex;align-items:center;min-height:44px}
html body .public-footer .footer-columns a{display:flex;min-height:40px}

/* ================= Header: Sapphire, white bold nav, Euclase hairline ================= */
html body .site-header{background:var(--sa)!important;color:#ffffff;box-shadow:none}
html body .site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--eu)}
html body .site-header .desktop-nav > a,html body .site-header .desktop-nav summary,html body .site-header .header-actions .login{
  color:#ffffff!important;font-size:18px!important;font-weight:700!important}
html body .site-header .desktop-nav summary *{color:#ffffff!important}
html body .site-header .menu-trigger,html body .site-header .icon-button,html body .site-header .text-button{color:#ffffff!important;font-weight:700}
html body .site-header .about-menu a{font-size:17px!important;color:var(--sa)!important}
html body .site-header .desktop-nav a:hover,html body .site-header .login:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--eu)}
html body .site-header .nav-instant{color:#ffffff!important;box-shadow:inset 0 -4px 0 var(--ye)}
/* rakez.com practice: full-colour logo in a white tile, never recoloured */
html body .site-header .brand{background:#ffffff;padding:8px 14px;align-self:stretch;display:flex;align-items:center}
html body .site-header .brand img{filter:none!important}
html body .header-cta{background:var(--ye)!important;color:var(--sa)!important;font-size:17px}

/* ================= Hero: white, Sapphire type, Euclase marker ================= */
html body .opening{background:#ffffff!important}
html body .opening h1 span{color:var(--sa)}
html body .opening h1 .accent{color:var(--sa)!important;width:fit-content;
  background:linear-gradient(transparent 58%,var(--eu4) 58%,var(--eu4) 92%,transparent 92%)}
html body .opening .hero-description{color:var(--on);font-size:clamp(18px,1.4vw,21px)}
html body .opening .photo-frame{box-shadow:20px 20px 0 var(--eu4)}
html body .opening .photo-label{background:var(--sa);color:#ffffff;padding:6px 10px;font-size:12px;font-weight:700;letter-spacing:.12em}
html body .opening .image-caption{background:#0e3a5ceb;padding:14px 18px}
html body .opening .image-caption,html body .opening .image-caption *{color:#ffffff}
html body .opening .instant-hero-cta{border:2px solid var(--sa)!important;color:var(--sa)!important;background:#ffffff}
html body .opening .instant-hero-cta:hover{background:var(--sa)!important;color:#ffffff!important}
html body .opening .instant-hero-cta > span{font-size:19px;font-weight:700;line-height:1.15}
html body .opening .instant-hero-cta small{font-weight:300;color:inherit}
html body .opening .hero-guide{color:var(--sa2);font-weight:700}
html body .opening .campaign-bar{border-top-color:var(--on4)}
html body .opening .campaign-options button[aria-pressed=true]{box-shadow:inset 0 4px 0 var(--eu)}

/* ================= Instant licence: the ONE gradient (Sapphire depth) ================= */
html body #instant-licence{background:linear-gradient(110deg,var(--sa) 0%,var(--sa2) 100%)!important;color:#ffffff}
html body #instant-licence h2,html body #instant-licence .eyebrow,html body #instant-licence p,html body #instant-licence small{color:#ffffff!important}
html body #instant-licence h2 em{color:var(--ye)!important;box-shadow:none}
html body #instant-licence .feature-price strong,html body #instant-licence p strong{color:var(--sa)!important;background:var(--ye);padding:0 .25em}

/* ================= Packages ================= */
html body #packages{background:var(--wash-eu)!important}
html body .price-card{background:#ffffff!important;border:1px solid var(--on4)!important;border-top:6px solid var(--eu)!important;color:var(--sa)}
html body .price-card:nth-child(3){border-top-color:var(--em)!important}
html body .price-card .price-amount{color:var(--sa)}
html body .price-card .price-label{color:var(--on)}
html body .price-card.price-highlight{background:var(--sa)!important;border-color:var(--sa)!important;border-top:6px solid var(--ye)!important;color:#ffffff;box-shadow:0 30px 60px -30px #0e3a5c99}
html body .price-card.price-highlight .price-amount{color:var(--ye)}
html body .price-card.price-highlight .price-label,html body .price-card.price-highlight p,
html body .price-card.price-highlight li,html body .price-card.price-highlight a,html body .price-card.price-highlight summary{color:#ffffff}
html body .price-card.price-highlight .button.primary{color:var(--sa)!important;background:var(--ye)!important}
html body .price-card .price-tag{color:inherit}
html body .pricing-note{color:var(--on)}

/* ================= Why ================= */
html body #why{background:#ffffff!important}
html body #why .proof strong{color:var(--sa);font-size:clamp(44px,5vw,72px);font-variant-numeric:tabular-nums}
html body #why .proof div{border-top:6px solid var(--eu)}
html body #why .proof div:nth-child(2){border-top-color:var(--em)}

/* ================= Start: three blue tones ================= */
html body #start{background:#ffffff!important}
html body .journey-card.first{background:var(--eu4)!important;color:var(--sa)}
html body .journey-card.second{background:var(--sa4)!important;color:var(--sa)}
html body .journey-card.third{background:var(--sa)!important;color:#ffffff}
html body .journey-card.first *,html body .journey-card.second *{color:var(--sa)}
html body .journey-card.third *{color:#ffffff}
html body .journey-card.third svg,html body .journey-card.third svg *{stroke:var(--ye)}

/* ================= Spaces: light Euclase chapter ================= */
html body #spaces{background:var(--wash-eu)!important;color:var(--sa)}
html body #spaces .space-tabs button{background:#ffffff!important;color:var(--sa)!important;border:2px solid var(--eu)!important;font-weight:700}
html body #spaces .space-tabs button[aria-selected=true],html body #spaces .space-tabs button[aria-pressed=true],
html body #spaces .space-tabs button.active{background:var(--sa)!important;border-color:var(--sa)!important;color:#ffffff!important}
html body #spaces .space-information{background:#ffffff!important;color:var(--sa);border-top:6px solid var(--eu)}

/* ================= Compass: deep Sapphire chapter ================= */
html body #compass{background:var(--sa)!important;color:#ffffff}
html body #compass h2,html body #compass p,html body #compass .eyebrow,html body #compass .compass-words,html body #compass .compass-words *{color:#ffffff}
html body #compass h2 em{color:var(--eu4)}
html body #compass .button.light{background:#ffffff!important;color:var(--sa)!important}

/* ================= Services ================= */
html body #services{background:#ffffff!important}
html body .service-filters button{border:2px solid var(--eu)!important;color:var(--sa)!important;background:#ffffff!important;font-weight:700}
html body .service-filters button[aria-pressed=true],html body .service-filters button.active,
html body .service-filters button[aria-selected=true]{background:var(--sa)!important;border-color:var(--sa)!important;color:#ffffff!important}
html body .service-item{border-color:var(--on4)!important;transition:background .2s,box-shadow .2s}
html body .service-item:hover{background:var(--wash-eu)!important;box-shadow:inset 6px 0 0 var(--eu)}
html body .service-number{color:var(--sa2)!important;font-weight:700}
html body .service-arrow,html body .service-item svg{color:var(--sa);stroke:currentColor}
html body .service-note{color:var(--on)}

/* ================= People ================= */
html body #people{background:#ffffff!important}
html body .founder-card{border-bottom:6px solid var(--eu)}
html body .founder-card:nth-child(2){border-bottom-color:var(--sa2)}
html body .founder-card:nth-child(3){border-bottom-color:var(--ye)}
html body .founder-card .person-name{color:var(--on)}

/* ================= Guide ================= */
html body .guide-section{background:var(--wash-sa)!important}
html body .guide-section .orbit-ring{border-color:var(--eu)!important}
html body .guide-orbit > span{color:var(--sa)!important;font-size:13px;font-weight:700}
html body .guide-section .button.primary{background:var(--sa)!important;color:#ffffff!important;border-color:var(--sa)!important}
html body .guide-section .guide-note{color:var(--on)}

/* ================= Closing: Sapphire 7699 ================= */
html body .closing{background:var(--sa2)!important;color:#ffffff}
html body .closing h2,html body .closing .eyebrow{color:#ffffff!important}
html body .closing h2 em{color:var(--eu4)!important}
html body .closing .round-cta{background:var(--ye)!important;color:var(--sa)!important}

/* ================= Footer: Sapphire, Euclase band ================= */
html body .public-footer{background:var(--sa)!important;color:#ffffff;border-top:10px solid var(--eu)}
html body .public-footer a,html body .public-footer h2,html body .public-footer h3,html body .public-footer h4,
html body .public-footer p,html body .public-footer span,html body .public-footer strong{color:#ffffff}
html body .public-footer .footer-columns h3,html body .public-footer .footer-columns h4,html body .public-footer .footer-columns strong{color:var(--eu4)}
html body .public-footer a:hover{color:var(--ye)}
html body .public-footer .footer-bottom{border-top:1px solid #ffffff40}
html body .public-footer .brand img,html body .public-footer img{filter:none}

/* ================= Dark (Sapphire) panels on inner pages ================= */
html body .theme-navy .eyebrow,html body .theme-navy .text-button,html body .theme-navy h1,html body .theme-navy h2,
html body .theme-navy p,html body .theme-navy .breadcrumbs,html body .theme-navy .breadcrumbs *{color:#ffffff!important}
html body .theme-navy h1 em,html body .theme-navy h2 em{color:var(--eu4)!important;background:none}
html body .public-closing .eyebrow,html body .route-note .eyebrow,html body .stats-band span{color:var(--eu4)}

/* ================= Shared ================= */
html body .button.primary{background:var(--ye);color:var(--sa);border-color:var(--ye)}
html body .button.primary:hover{background:var(--sa);color:#ffffff;border-color:var(--sa)}
html body a.inline-link,html body .text-button{color:var(--sa2)}

/* ================= Phone hero: no empty gap, cropped photo, stacked actions ================= */
@media (max-width:760px){
  html body .opening{min-height:0!important;height:auto!important;max-height:none!important;overflow:visible!important;grid-template-rows:none!important;grid-template-columns:minmax(0,1fr)!important;row-gap:28px}
  html body .opening > *{grid-column:1/-1!important;grid-row:auto!important}
  html body .opening .campaign-bar{position:relative!important;inset:auto!important;transform:none!important}
  html body .opening .hero-visual{display:block!important;position:static!important;width:auto!important;height:auto!important;margin:0;inset:auto!important;transform:none!important;opacity:1!important}
  html body .opening .hero-actions{display:flex!important}
  html body .opening .photo-frame{aspect-ratio:4/3;height:auto!important;box-shadow:12px 12px 0 var(--eu4)}
  html body .opening .photo-frame img{width:100%;height:100%;object-fit:cover}
  html body .opening .blueprint-card,html body .opening .yellow-corner{display:none!important}
  html body .opening .hero-actions{flex-direction:column;align-items:stretch;gap:12px}
  html body .opening .hero-actions .button{width:100%;min-height:56px}
  html body .opening .hero-guide{margin-top:4px}
}

/* ================= Count-up + sticky mobile action (green-enhance.mjs, shared) ================= */
.green-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#ffffff;border-top:4px solid var(--eu);box-shadow:0 -10px 30px -12px #0e3a5c59;transform:translateY(110%);transition:transform .3s}
.green-sticky a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;font-weight:700;font-size:17px;text-decoration:none}
.green-sticky .go{background:var(--ye);color:var(--sa)}
.green-sticky .alt{border:2px solid var(--sa);color:var(--sa);flex:.8}
.green-sticky.show{transform:none}
@media (max-width:760px){
  .green-sticky{display:flex}
  html body{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){
  .green-sticky{transition:none}
  html body *{scroll-behavior:auto!important}
}