/* RAKEZ green edition — WHITE HEADER option + colour review fixes (2026-11-07).
   Loads after green-theme.css and only overrides it. Same Brand Book 1.1 palette.

   Why each change:
   1 Header white: Sapphire nav on white is 11.8:1, so labels no longer need the 19px-bold
     large-text workaround that Emerald forced (that size is what made "About RAKEZ" collide
     with "My RAKEZ" between 981 and 1180px). Logo sits on white as rakez.com shows it — no tile.
     Emerald stays as the brand line under the header and the hover/active underline.
   2 One light wash: the site used two near-identical washes (Euclase 22% and Emerald 22%) that
     read as an off-white mistake. One wash, used on alternate chapters.
   3 Yellow means "act": it stays on buttons only. Decorative yellow (photo tag, card bar,
     photo corner) moves to Sapphire/white so a yellow shape is always clickable.
   4 Instant Licence band: Sapphire on the Emerald→Euclase gradient was 4.1:1 at best and looked
     muddy. Solid Sapphire with white type (11.8:1) and the yellow price tag gives the promo band
     the strongest contrast on the page, as a promotion should.
   5 Start cards: the two greyish tints (Emerald 324 / Euclase 2975 solid) dulled each other.
     White cards with a coloured top rule keep the three families and read cleaner.
   6 Tiny labels: eyebrows/labels were 10–11px; lifted to 12–13px so they read on phones. */

:root{--wash:#9dd4d62e}

/* ================= 1 Header: white ================= */
html body .site-header{background:#ffffff!important;color:var(--sa);box-shadow:0 1px 0 var(--on4)}
html body .site-header::after{height:3px;background:var(--em)}
html body.scrolled .site-header,html body .site-header.scrolled{box-shadow:0 10px 30px -18px #0e3a5c59}
html body .site-header .brand{background:transparent;padding:0}
html body .site-header .desktop-nav > a,html body .site-header .desktop-nav summary,html body .site-header .header-actions .login{
  font-size:17px!important;font-weight:700!important;color:var(--sa)!important}
html body .site-header .desktop-nav a:hover,html body .site-header .login:hover{text-decoration:none}
/* hover + current page: Emerald underline (decorative line, never text colour) */
html body .site-header .desktop-nav > a::after{background:var(--em)!important;height:3px!important;bottom:6px!important}
html body .site-header .desktop-nav > a[aria-current=page]::after{transform:scaleX(1)!important}
html body .site-header .nav-instant{box-shadow:none}
html body .site-header .nav-instant::after{transform:scaleX(1)!important}
html body .site-header .about-menu > div{background:#ffffff;border:1px solid var(--on4);border-top:3px solid var(--em);box-shadow:0 20px 40px -20px #0e3a5c59}
html body .site-header .about-menu a{color:var(--sa)!important}
html body .site-header .about-menu a:hover{background:var(--wash)}
html body .site-header .icon-button,html body .site-header .icon-button svg{color:var(--sa)!important;stroke:var(--sa)}
html body .site-header :focus-visible{outline-color:var(--sa)!important}
html body .header-cta{background:var(--ye)!important;color:var(--sa)!important}
html body .header-cta:hover{background:var(--sa)!important;color:#ffffff!important}
@media(min-width:981px) and (max-width:1180px){
  html body .site-header .desktop-nav > a,html body .site-header .desktop-nav summary,html body .site-header .header-actions .login{font-size:15px!important}
  html body .site-header .desktop-nav{gap:14px!important}
  html body .site-header .header-actions{gap:12px!important}
}
@media(max-width:980px){
  html body .site-header .menu-trigger,html body .site-header .text-button,html body .site-header .login{color:var(--sa)!important}
}

/* ================= 2 One light wash ================= */
html body #packages,html body #spaces,html body .guide-section{background:var(--wash)!important}

/* ================= 3 Yellow only on actions ================= */
html body .opening .yellow-corner{display:none!important}
html body .compass-photo > span{background:#ffffff!important;color:var(--sa)!important}
html body .founder-card:nth-child(3){border-bottom-color:var(--sa)}

/* ================= 4 Instant Licence band ================= */
html body #instant-licence{background:var(--sa)!important;color:#ffffff}
html body #instant-licence h2,html body #instant-licence h2 em,html body #instant-licence .eyebrow,
html body #instant-licence p,html body #instant-licence small{color:#ffffff!important}
html body #instant-licence .eyebrow{color:var(--em4)!important}
html body #instant-licence .feature-price strong,html body #instant-licence p strong{color:var(--sa)!important;background:var(--ye)}
html body #instant-licence :focus-visible{outline-color:var(--ye)}

/* ================= 5 Start cards ================= */
html body .journey-card.first,html body .journey-card.second{background:#ffffff!important;border:1px solid var(--on4);border-top:8px solid var(--em)}
html body .journey-card.second{border-top-color:var(--eu)}
html body .journey-card.first svg,html body .journey-card.second svg{color:var(--sa)}

/* ================= 6 Small labels ================= */
html body .eyebrow{font-size:12px!important}
html body #instant-licence .eyebrow{font-size:15px!important}

/* inner-page hero art: a big yellow arrow panel looked like a button but is not clickable */
html body .type-art{background:var(--em4)!important;color:var(--sa)!important}
html body .type-art *{color:var(--sa)!important;stroke:var(--sa)}

/* ================= Review round 2 (2026-11-07) ================= */
/* 1 Bring Emerald back as large shapes, never as text colour.
     Hero photo sits on a solid Emerald offset; "Spaces" becomes the one full Emerald chapter
     mid-page (headings are large bold Sapphire = 4.1:1, passes the 3:1 large-text rule;
     the small eyebrow sits on a white tag; tabs and the info panel are white). */
/* (a box-shadow is cut off by the frame's clip-path, so the Emerald offset is its own layer) */
html body .opening .photo-frame{box-shadow:none!important;position:relative;z-index:1}
html body .opening .hero-visual::before{content:"";position:absolute;inset:20px -20px -20px 20px;background:var(--em);z-index:0}
html body #spaces{background:var(--em)!important}
html body #spaces h2,html body #spaces h2 em{color:var(--sa)!important}
html body #spaces > div:first-child .eyebrow,html body #spaces > div:first-child p:first-child{display:inline-block;background:#ffffff;color:var(--sa)!important;padding:6px 10px}
html body #spaces .space-tabs button{border-color:#ffffff!important}
html body #spaces :focus-visible{outline-color:var(--sa)!important}
@media(max-width:760px){html body .opening .hero-visual{position:relative!important}html body .opening .hero-visual::before{inset:12px -12px -12px 12px}}

/* 2 The Instant Licence offer was shown three times in two screens (hero button, band,
     price card). The home page keeps the hero button and the price card; the band goes. */
html body .opening ~ #instant-licence{display:none!important}

/* 3 Hero shows at once: no fade-in on the first screen (the static HTML now matches the
     default campaign, so there is nothing to swap either). */
html body .hero-copy h1,html body .hero-description,html body .hero-actions,
html body .page-hero-copy,html body .page-hero-image{animation:none!important;opacity:1!important;transform:none!important}

/* 5 Closing: less weight before the navy footer — smaller headline, more air, and no
     second Emerald band on top of the footer. */
html body .closing{padding-bottom:clamp(64px,8vw,120px)}
html body .closing h2{font-size:clamp(56px,7.5vw,112px)!important;font-weight:700}
html body .public-footer{border-top:0!important}

/* ================= Inner pages (audit of 31 pages, 2026-11-07) ================= */
/* Navy panels: green-theme.css makes every h2 Sapphire, so headings on the Sapphire
   "route note" and closing panels were navy-on-navy — invisible on ~20 pages. */
html body .route-note h2,html body .public-closing h2{color:#ffffff!important}
html body .route-note h2 em,html body .public-closing h2 em{color:var(--em4)!important;background:none}
html body .route-note :focus-visible,html body .public-closing :focus-visible{outline-color:var(--ye)!important}

/* Photo captions were 9–10px white over a fading gradient; give them a solid Sapphire bar. */
html body .page-hero-image figcaption,html body .corporate-intro figcaption{font-size:12px!important;font-weight:700;
  background:#0e3a5ceb;color:#ffffff;padding:10px 14px;left:0!important;right:0!important;bottom:0!important}

/* Nothing readable under 12px (labels, captions, breadcrumbs, footer legal line). */
html body .breadcrumbs,html body .public-footer .footer-bottom,html body .public-footer .footer-bottom *,html body .footer-bottom span,
html body .source-note,html body .stats-band>p,html body .split-path article>span,html body .type-art>span,
html body .page-hero-copy>.eyebrow,html body .public-section-heading>.eyebrow,
html body .corp-related>.eyebrow,html body .founder-card>.eyebrow,html body .leader-card .eyebrow,
html body .card-top,html body .compass-words,html body .compass-words *,html body .space-information .eyebrow,html body .service-item .service-number,
html body .instant-copy>.eyebrow,html body .note-eyebrow,html body .note-signoff,html body .offer-label,html body .instant-bottom>span,
html body .instant-bottom a:last-child,html body .art-caption,html body .art-controls p,html body .promo-eyebrow,
html body .campaign-options button>span,html body .hero-reassurance{font-size:12px!important}

/* hero "Basic · AED 6,000" line under the Instant Licence button was 11px */
html body .opening .instant-hero-cta small,html body .opening .instant-hero-cta small *{font-size:13px!important}