/* P4YE homepage comparison. Brand accent is matched to the supplied logo.
   Only .hero-option-a and .hero-option-b change the hero composition. */
:root {
  --green: #97B21D;
  --green-hover: #abc832;
  --forest: #52651c;
  --ink: #111a12;
  --black: #07100d;
  --mint: #f4f6ed;
  --mist: #f5f7f5;
  --muted: #576057;
  --line: #e2e6dd;
}
/* Supplied wordmark is framed with CSS, not redrawn or substituted.
   The visible crop is x=160..1320, y=345..789 in the original 1448x1086 image.
   Keep the frame, image and offsets proportional: changing only the frame
   width previously clipped the green letter and tagline on narrow phones. */
.brand .logo-window { position:relative; display:block; width:162px; max-width:100%; height:auto; aspect-ratio:162 / 62; overflow:hidden; flex-shrink:0; }
.brand .logo.logo-supplied { position:absolute; width:124.827586207%!important; max-width:none; height:auto!important; left:-13.793103448%; top:-77.702702703%; mix-blend-mode:screen; object-fit:initial; }
.site-header { background:#07100d; border-bottom:1px solid #ffffff12; }
.site-header .header-inner { height:78px; gap:26px; }
.site-header .primary-nav { gap:22px; }
.site-header .primary-nav a { font-size:12px; }
.site-header .header-referral { color:var(--ink); font-size:11px; }
.button-green, .event-badge strong { color:#142008; }
.events-promo { background:#111d10; }
.events-promo:before { background:radial-gradient(ellipse at top right,#52651c65,transparent 85%); }
.whats-on { background:#f5f7f5; }
.text-link, .service-card > .icon, .detail-line .icon, .event-arrow { color:var(--forest); }
.voice-categories { grid-template-columns:repeat(3,minmax(0,1fr)); }
.voice-category { min-height:110px; }
.voice-category span { max-width:200px; }
.referral-panel { background:var(--green); }
.referral-panel h2 { font-size:30px; }
.referral-panel p { color:#293317; }
.page-index .hero { background:var(--black); overflow:hidden; isolation:isolate; }
.page-index .hero-photo { width:77%; height:100%; object-fit:cover; object-position:center 42%; }
.page-index .hero:before { background:linear-gradient(90deg,#07100d 0%,#07100dfa 26%,#07100de8 37%,#07100d80 48%,#07100d0d 66%,#07100d00 100%); }
.page-index .hero:after { background:linear-gradient(180deg,#07100d05 15%,#07100d08 36%,#07100d42 58%,#07100ded 83%,#07100d 100%); }
.page-index .hero-inner { display:flex; align-items:center; min-height:332px; padding:34px 0 27px; }
.page-index .hero-copy { width:54%; max-width:635px; }
.page-index .hero h1 { font-size:60px; line-height:1.02; letter-spacing:-.044em; font-weight:800; }
.page-index .hero h1 span { display:block; color:#fff; }
.page-index .hero h1 .green { color:var(--green); }
.page-index .hero-copy > p { margin-top:18px; max-width:445px; color:#d5ddd5; font-size:16px; line-height:1.6; }
.hero-pathways { position:relative; z-index:1; }
.hero-pathways-inner { display:grid; grid-template-columns:1fr 1fr; }
.hero-route { display:block; min-width:0; position:relative; color:#fff; }
.route-audience { display:block; color:#c7d0bc; font-size:12px; font-weight:500; line-height:1.45; letter-spacing:.01em; }
.hero-route-title { display:flex; align-items:center; gap:18px; color:#fff; font-weight:700; font-size:25px; line-height:1.2; letter-spacing:-.025em; }
.hero-route-title .icon { color:var(--green); width:22px; height:22px; }
.hero-route-description { display:block; color:#b9c5bb; font-size:14px; line-height:1.5; margin-top:7px; }
.hero-route:focus-visible { outline:2px solid var(--green); outline-offset:5px; border-radius:0; }
.hero-route:hover .hero-route-title { color:var(--green); }
.hero-route .icon { transition:transform .18s; }
.hero-route:hover .hero-route-title .icon { transform:translateX(3px); }
.hero-support { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:12px; line-height:1.5; color:#b8c2b9; min-height:40px; }
.hero-support a { color:#e7ece2; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; display:inline-flex; align-items:center; min-height:40px; gap:7px; }
.hero-support a .icon { width:14px; height:14px; color:var(--green); }
.hero-support a:hover { color:var(--green); }
.hero-caption { font-size:9px; color:#a4afa5; letter-spacing:.025em; line-height:1.4; position:static; }
/* A: one full-width navigation band INSIDE the same photographic hero. */
.hero-option-a .hero-pathways-inner { border-top:1px solid #ffffff29; }
.hero-option-a .hero-route { padding:19px 32px 19px 0; }
.hero-option-a .hero-route + .hero-route { border-left:1px solid #ffffff25; margin-block:19px; padding:0 0 0 38px; }
.hero-option-a .hero-route-title { margin-top:7px; justify-content:space-between; }
.hero-option-a .hero-lower-line { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:8px; }
/* B: compact actions stay with the headline. The right half remains imagery. */
.hero-option-b .hero-inner { min-height:458px; padding-top:35px; padding-bottom:25px; }
.hero-option-b .hero-copy { width:55%; max-width:620px; }
.hero-option-b .hero-pathways { margin-top:24px; }
.hero-option-b .hero-pathways-inner { grid-template-columns:.95fr 1.28fr; gap:16px; max-width:558px; }
.hero-option-b .route-audience { min-height:17px; display:flex; align-items:flex-end; margin-bottom:8px; font-size:11px; max-width:230px; }
.hero-option-b .hero-route-title { min-height:46px; padding:11px 14px; border:1px solid #ffffff65; border-radius:5px; font-size:15px; line-height:1.35; justify-content:space-between; gap:10px; }
.hero-option-b .hero-route:first-child .hero-route-title { background:var(--green); border-color:var(--green); color:#142008; }
.hero-option-b .hero-route:first-child .hero-route-title .icon { color:#142008; }
.hero-option-b .hero-route-title .icon { width:18px; height:18px; }
.hero-option-b .hero-route:hover .hero-route-title { background:#ffffff0c; color:#fff; border-color:var(--green); }
.hero-option-b .hero-route:first-child:hover .hero-route-title { background:var(--green-hover); color:#142008; }
.hero-option-b .hero-support { margin-top:9px; }
.hero-option-b .hero-caption { position:absolute; right:14px; bottom:11px; }
.hero-option-b:after { background:linear-gradient(0deg,#07100db0 0%,#07100d12 42%,transparent 70%)!important; }
@media(min-width:1121px) and (max-width:1300px) {
  .site-header .primary-nav { gap:16px; }
  .site-header .header-inner { gap:19px; }
  .site-header .header-referral { margin-left:0; }
}
@media(max-width:1120px) {
  .site-header .primary-nav { display:none; }
  .site-header .header-inner { gap:14px; }
  .site-header .header-referral { margin-left:auto; }
  .menu-toggle { display:block; }
  .page-index .hero h1 { font-size:clamp(42px,5vw,56px); }
  .page-index .hero-copy { width:58%; }
  .page-index .hero-inner { min-height:324px; }
  .hero-option-b .hero-inner { min-height:450px; }
  .hero-option-b .hero-copy { width:65%; }
  .hero-option-b .hero-pathways-inner { max-width:540px; }
  .hero-route-title { font-size:23px; }
}
@media(max-width:760px) {
  .hero-option-b .hero-copy { width:76%; }
  .hero-option-a .hero-route + .hero-route { padding-left:24px; }
  .hero-route-title { font-size:21px; }
  .hero-route-description { font-size:13px; }
  .hero-route-title .icon { width:18px; height:18px; }
}
@media(max-width:700px) {
  .site-header .header-inner { height:68px; gap:10px; }
  .brand .logo-window { width:123px; }
  .site-header .header-referral { font-size:10px; min-height:40px; padding:10px 11px; gap:7px; }
  .page-index .wrap, .chrome-container { width:calc(100% - 40px); }
  .page-index .hero-photo { top:0; right:0; width:100%; height:314px; object-position:center 27%; }
  .page-index .hero:before { background:linear-gradient(180deg,#07100d0d 0px,#07100d10 85px,#07100d9c 160px,#07100df5 262px,#07100d 314px); }
  .page-index .hero:after { background:linear-gradient(90deg,#07100d80 0%,transparent 70%); }
  .page-index .hero-inner { min-height:0; padding-top:177px; padding-bottom:21px; align-items:flex-start; }
  .page-index .hero-copy { width:100%; max-width:none; }
  .page-index .hero h1 { font-size:clamp(32px,9.25vw,47px); line-height:1.025; }
  .page-index .hero-copy > p { font-size:14px; line-height:1.6; margin-top:15px; max-width:490px; }
  .hero-option-a .hero-pathways-inner { grid-template-columns:1fr; }
  .hero-option-a .hero-route { padding:15px 0 16px; }
  .hero-option-a .hero-route + .hero-route { border-left:0; border-top:1px solid #ffffff25; margin:0; padding:15px 0 16px; }
  .route-audience { font-size:11px; }
  .hero-option-a .hero-route-title { margin-top:6px; font-size:21px; }
  .hero-option-a .hero-route-description { margin-top:5px; font-size:13px; }
  .hero-option-a .hero-lower-line { display:block; padding-bottom:13px; }
  .hero-support { font-size:11px; min-height:36px; }
  .hero-support a { min-height:36px; }
  .hero-caption { font-size:8px; color:#9ba79d; }
  .hero-option-a .hero-caption { display:block; margin-top:1px; }
  .hero-option-b .hero-inner { padding-bottom:31px; }
  .hero-option-b .hero-pathways { margin-top:18px; }
  .hero-option-b .hero-pathways-inner { grid-template-columns:1fr; gap:13px; max-width:none; }
  .hero-option-b .route-audience { min-height:0; font-size:11px; max-width:none; margin-bottom:5px; }
  .hero-option-b .hero-route-title { min-height:44px; font-size:15px; padding:10px 13px; }
  .hero-option-b .hero-support { margin-top:8px; }
  .hero-option-b .hero-caption { left:20px; right:auto; bottom:12px; }
  .hero-option-b:after { background:linear-gradient(90deg,#07100d80 0%,transparent 70%)!important; }
  .voice-categories { grid-template-columns:1fr; }
  .voice-category { min-height:70px; flex-direction:row; padding:16px; justify-content:flex-start; gap:16px; }
  .voice-category span { max-width:none; text-align:left; font-size:14px; }
  .referral-panel h2 { font-size:27px; }
}
@media(max-width:359px) {
  .page-index .wrap, .chrome-container { width:calc(100% - 32px); }
  .site-header .header-inner { gap:7px; }
  .brand .logo-window { width:108px; }
  .site-header .header-referral { font-size:9px; padding-inline:8px; }
  .site-header .header-referral .icon { display:none; }
  .hero-route-title { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .hero-route .icon { transition:none; } }