/* Pink identity accents over blue, navy and ice-blue supporting surfaces. */
:root{--rogue-pink:#ff246a;--rogue-pink-dark:#c91450;--rogue-blue:#3054f5;--rogue-blue-dark:#2442c6;--rogue-blue-light:#91a9ff;--rogue-ice:#dbe7ff;--rogue-navy:#0c1231;--pink:var(--rogue-pink);--pink-surface:var(--rogue-pink-dark);--blue:var(--rogue-blue);--lime:var(--rogue-ice);--accent:var(--rogue-pink-dark);--accent-ink:#fff}

/* Strong contrast on blue-filled controls and covers. */
.rulebook-cover{color:#fff}
.flow-choice[aria-pressed="true"]>span:last-child{color:#fff}
.concept-button:enabled:hover,.concept-button:focus-visible,.is-concept-active .concept-button{color:#fff}
.concept-button:enabled:hover .concept-title>span,.concept-button:focus-visible .concept-title>span,.is-concept-active .concept-title>span{color:#fff}
body.contact-page .enquiry-submit,body.contact-page .topic-option input:checked+span b{color:#fff}
body.contact-page .enquiry-submit:hover{color:var(--ink)}
.partnership-pick[aria-expanded="true"] span{color:#fff}
.partnership-line:nth-child(even) .partnership-pick[aria-expanded="true"] span{color:var(--ink)}
.wheel-centre{color:#fff}

/* Pink navigation highlights contrast with the blue backdrop. */
.nav .site-links>a[aria-current="page"]:not(.nav-contact):not(.rulebook-nav),
.nav .site-links .rulebook-nav .rulebook-nav-pink,
.mobile-menu-ready body>.nav.menu-open .site-links .rulebook-nav-pink{color:var(--rogue-pink)}
body.contact-page .topic-option small,body.contact-page .topic-option input:checked+span small,
body.contact-page .contact-phone span{color:var(--rogue-blue-light)}

/* A richer navy gives the watercolour question mark and pink G a blue backdrop. */
.manifesto{background:#162b80}
.manifesto-last{background:var(--rogue-pink-dark);color:#fff}

/* Keep focus states clear on both dark and white surfaces. */
.brand-lockup:focus-visible{outline-color:var(--rogue-blue-light)}
.work-model h2 span,.rb-end h2 em{color:var(--rogue-ice)}

/* The opening occupies the entire viewport, with navigation over the film. */
html body.home-page:not(.privacy-page)>.nav{position:fixed;top:0;left:0;right:0;background:transparent;border-color:transparent;box-shadow:none;transition:background .25s ease,border-color .25s ease}
html body.home-page.page-scrolled:not(.privacy-page)>.nav,
html body.home-page:not(.privacy-page)>.nav.menu-open{background:var(--ink);border-color:#ffffff25}
.home-page .agency-masthead.video-opening{min-height:100vh;min-height:100svh;min-height:100dvh;margin-block:0;padding-block:max(3rem,env(safe-area-inset-top))}
/* Reserve room for the E's nudge so the larger lettering never clips. */
.home-page .video-opening .opening-word{padding-left:.06em;padding-right:.36em}
.home-page .hero-grid{margin-top:0;padding-top:clamp(3rem,7vw,6rem)}

/* Clear blue hover/focus states, retaining white labels on filled buttons. */
.hero .hero-cta:hover,body:not(.privacy-page)>.nav .site-links>a.nav-contact:hover{background:var(--rogue-blue-dark);border-color:var(--rogue-blue-dark);color:#fff}
body.contact-page .enquiry-submit:hover{background:var(--rogue-blue-dark);color:#fff}
body.contact-page .enquiry-form :is(input,textarea,button):focus-visible{outline-color:var(--rogue-blue-light)}
.work-page .concept-button:focus-visible,.flow-choice:focus-visible{outline-color:var(--rogue-blue-dark)}
@media(prefers-reduced-motion:reduce){html body.home-page:not(.privacy-page)>.nav{transition:none}}

/* Signature pink G, with blue reserved for the flames and supporting panels. */
.home-page .video-opening .opening-glyph>.opening-g{color:var(--rogue-pink)!important}
.hero-proposition>.headline-pink{color:var(--rogue-pink)!important}
.rulebook-invite strong,.partnership-title .challenge-highlight,.rb-book{color:var(--rogue-pink)}
.rulebook-cover{background:var(--rogue-pink-dark);border-left-color:var(--rogue-blue);color:#fff}
.rb-counter{color:var(--rogue-pink-dark)}
body:not(.privacy-page)>.nav .site-links>a.nav-contact{background:var(--rogue-pink-dark);border-color:var(--rogue-pink-dark);color:#fff}
.nav-toggle-icon:before,.nav-toggle-icon:after{background:var(--rogue-pink)}
.flow-choice[aria-pressed="true"]>span:last-child{background:var(--rogue-pink-dark);border-color:var(--rogue-pink-dark);color:#fff}
.concept-button:enabled:hover,.concept-button:focus-visible,.is-concept-active .concept-button{background:var(--rogue-blue);color:#fff}
body.contact-page .enquiry-intro h1 em,body.contact-page .contact-phone span{color:var(--rogue-pink)}
body.contact-page .contact-prompt{border-left-color:var(--rogue-pink)}

/* More breathing room between homepage chapters, without changing the opening. */
.home-page{--section-space:clamp(8rem,13vw,15rem)}
.home-page main>.section,
.home-page main>.experience-eighty,
.home-page main>.manifesto{padding-block:var(--section-space)}
.home-page main>.hero{padding-bottom:0}
.home-page .hero-grid{padding-block:var(--section-space)}
@media(max-width:760px){
  .home-page{--section-space:clamp(6rem,14vw,7.5rem)}
}

/* Keep the question and its answer comfortably inside the page at every width. */
.home-page .what-grid{width:100%;max-width:100rem;margin-inline:auto;min-width:0}
.home-page .what-copy{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);align-items:center;gap:clamp(3rem,7vw,8rem);min-width:0}
.home-page .what-copy h2{grid-row:auto;min-width:0;margin:0;font-size:clamp(4rem,7.6vw,8.5rem);line-height:1.12;letter-spacing:-.045em;overflow-wrap:normal}
.home-page .what-story{display:grid;gap:1.75rem;min-width:0;max-width:38rem}
.home-page .what-story h3{margin:0;font-size:clamp(1.6rem,2.2vw,2.75rem);line-height:1.3;letter-spacing:-.025em}
.home-page .what-story p{max-width:50ch;margin:0;font-size:1.125rem;line-height:1.8;letter-spacing:normal}
@media(max-width:980px){
  .home-page .what-copy{grid-template-columns:minmax(0,1fr);gap:3rem}
  .home-page .what-copy h2{font-size:clamp(3rem,13vw,6rem)}
}
@media(max-width:760px){
  .home-page .what-story{gap:1.5rem}
  .home-page .what-story p{font-size:1rem;line-height:1.8}
}