/*
 * Brand layer — loaded last. Enforces the Harrison design system (tokens.css, DESIGN-SYSTEM.md)
 * over the legacy stylesheet. !important is deliberate: the legacy CSS sets type with hundreds of
 * page-specific rules, and this file is the single place the brand type system is enforced.
 */

/* ===================================================================== */
/* 1. Type system — only the guide's five styles exist on the site        */
/* ===================================================================== */
body.visari-mode{font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:1.6;color:var(--color-text);background:var(--surface)}
body.visari-mode *{font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;font-style:normal!important;letter-spacing:normal!important;line-height:inherit!important}
body.visari-mode :is(strong,b){font-weight:700!important}

/* Headings: primary typeface, Bold, navy. H1 34pt · H2 22pt · H3 18pt */
body.visari-mode :is(h1,h2,h3){font-family:var(--font-heading)!important;font-weight:var(--fw-heading)!important;line-height:1.25!important;text-transform:none!important;color:var(--color-heading)!important}
body.visari-mode h1{font-size:var(--fs-h1)!important}
body.visari-mode h2{font-size:var(--fs-h2)!important}
body.visari-mode h3{font-size:var(--fs-h3)!important}
body.visari-mode :is(h1,h2,h3) :is(em,.gold-word){color:var(--color-accent)!important}

/* Non-heading titles that play the H3 role (card and list titles) */
body.visari-mode :is(.cta-card-title,.pin-title,.related-card strong,.mega-title,.aside-title,.mobile-sub-title,.post-card h2,.review-card cite){font-family:var(--font-heading)!important;font-size:var(--fs-h3)!important;font-weight:var(--fw-heading)!important;line-height:1.3!important;color:var(--color-heading)}
body.visari-mode .pin-js .pin-item:not(.is-active) .pin-title{color:var(--ink-55)}

/* Description: 12pt Roboto Regular — labels, navigation, captions, notes, footer links */
body.visari-mode :is(
  .eyebrow,.eyebrow-dark,.v-label,.v-kicker,.footer-label,.service-group-title,.audience-links-label,
  .contact-details dt,.v-about-image-note,.mobile-nav-label,
  .desktop-nav>a,.nav-services>a,.services-dropdown-intro span,.services-dropdown-links a,.services-dropdown-intro a,
  .crumbs,.footer-links a,.footer-bottom,.draft-note,.form-status,.field .optional,.skip-link,.audience-jump a,
  .step-list span,.related-card span,.audience-links a,.pin-body a,.pin-all,.aside-nav a,.post-meta,.contact-details dd,.footer-contact
){font-size:var(--fs-desc)!important;font-weight:var(--fw-desc)!important;line-height:1.55!important}
body.visari-mode .v-about::before{font-size:var(--fs-desc)!important;font-family:var(--font-body)!important}

/* Small uppercase labels: navy (gold fails AA at 12pt) with light tracking for legibility */
body.visari-mode :is(.eyebrow,.eyebrow-dark,.v-label,.v-kicker,.footer-label,.service-group-title,.audience-links-label,.contact-details dt,.v-about-image-note,.mobile-nav-label){letter-spacing:.08em!important;color:var(--color-label)!important}
body.visari-mode .v-about::before{letter-spacing:.08em!important;color:var(--color-label)!important}
body.visari-mode :is(.eyebrow,.eyebrow-dark)::before{background:var(--color-accent)}
body.visari-mode :is(.audience-card .audience-summary,.step-list li::before,.crumbs a:hover){color:var(--brand-navy)}

/* ===================================================================== */
/* 2. Home hero — copy sits on a brand-navy scrim                        */
/* ===================================================================== */
body.visari-mode.light-mode .v-hero h1,body.visari-mode.light-mode .v-hero h1 .hero-title-line{color:var(--white)!important}
body.visari-mode.light-mode .v-hero h1 :is(em,.hero-title-line--accent){color:var(--color-accent-on-dark)!important}
body.visari-mode .v-hero h1 .hero-title-line--accent{margin-left:0!important;padding-left:0!important;text-indent:0!important;display:inline-block;animation-name:hero-title-rise!important}
body.visari-mode.light-mode .v-hero-content .v-kicker{color:var(--color-accent-on-dark)!important}
body.visari-mode.light-mode .v-hero-copy{color:var(--white)}

/* ===================================================================== */
/* 3. Logo clear space (Guide p.05: at least 50px on every side)          */
/* ===================================================================== */
/* Header: the translucent band from the approved design, sticky on scroll (see DESIGN-SYSTEM.md §1
   for the clear-space note). Only the logo size is set here. */
body.visari-mode .brand img{height:var(--logo-header-h)!important}

/* Footer: 50px between the logo and anything else */
body.visari-mode .footer-brand{display:block;margin:0}
body.visari-mode .footer-brand img{margin-bottom:var(--logo-clear)}
body.visari-mode .footer-statement{margin:0;font-family:var(--font-heading)!important;font-size:var(--fs-desc)!important;font-weight:var(--fw-heading)!important;line-height:1.7!important;color:var(--color-heading)}

/* ===================================================================== */
/* 4. Components                                                          */
/* ===================================================================== */
/* Watermark: the H mark as faded tints (Guide p.19) */
body.visari-mode .pin-watermark{width:clamp(260px,34vw,520px);height:auto;opacity:.07;top:8%}
body.visari-mode .pin-figure figcaption{font-family:var(--font-heading)!important;font-size:var(--fs-h2)!important;font-weight:var(--fw-heading)!important;color:var(--white)}

/* Hero insight card: card copy at description size so it fits the card */

/* Form error state: indigo, never colour alone (message text accompanies it) */
body.visari-mode :is(.field .req,.consent .req){color:var(--color-error)!important}
body.visari-mode .field-error{font-size:var(--fs-desc)!important;font-weight:var(--fw-desc)!important}

/* Dividers */
body.visari-mode :is(.footer-bottom,.site-footer){border-color:var(--color-border)}

/* Draft/preview notes: ink text on a light-gold tint (gold text fails AA at body size) */
body.visari-mode :is(.preview-banner,.draft-note){color:var(--brand-ink)!important}

/* Phones: the hero grows with its content instead of clipping it; the side card and
   scroll hint are dropped so they never cover the copy or buttons */
@media(max-width:680px){
  body.visari-mode .v-hero{height:auto!important;min-height:0!important}
  body.visari-mode .v-hero-content{height:auto!important;padding-block:128px 64px!important}
}

/* ===================================================================== */
/* 5. Footer — brand navy band with a tapered (curved) top corner          */
/* ===================================================================== */
body.visari-mode .site-footer{margin-top:clamp(48px,6vw,80px);padding-top:clamp(64px,7vw,96px);background:var(--brand-navy)!important;border:0!important;border-top-left-radius:clamp(64px,9vw,140px);color:var(--white)}
body.visari-mode .site-footer .footer-label,body.visari-mode .site-footer .footer-label a{color:var(--brand-gold-light)!important}
body.visari-mode .site-footer .footer-statement{color:var(--white)}
body.visari-mode .site-footer :is(.footer-links a,.footer-contact,.footer-contact a){color:rgba(255,255,255,.82)}
body.visari-mode .site-footer .footer-links a:hover,body.visari-mode .site-footer .footer-contact a:hover{color:var(--brand-gold-light)}
body.visari-mode .site-footer .footer-links a:focus-visible{outline-color:var(--brand-gold-light)}
body.visari-mode .site-footer .footer-bottom{border-color:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.7)}
body.visari-mode .site-footer .footer-bottom a{color:var(--white)}

/* ===================================================================== */
/* 6. Header — glass band: heavy blur keeps it see-through yet legible     */
/* ===================================================================== */
body.visari-mode.light-mode .site-header{
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.38) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border-bottom:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
body.visari-mode.light-mode .site-header.scrolled{
  background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.55) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border-bottom:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
body.visari-mode.light-mode .site-header::before{background:none}
body.visari-mode.light-mode .desktop-nav a,body.visari-mode.light-mode .nav-dropdown-toggle{color:var(--brand-navy);text-shadow:0 0 12px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.7)}
body.visari-mode.light-mode .desktop-nav>a,body.visari-mode.light-mode .nav-services>a{font-weight:var(--fw-body)!important}
body.visari-mode .cta-card .cta-card-title{color:var(--brand-gold-light)!important}

/* ===================================================================== */
/* 7. Mobile menu — a fixed overlay, so it opens on screen wherever the page is scrolled to   */
/* ===================================================================== */
@media(max-width:960px){
  body.visari-mode .mobile-nav:not([hidden]){
    position:fixed;inset:0 0 auto 0;z-index:25;
    max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    padding-top:96px!important;padding-bottom:32px;
    background:var(--white);box-shadow:0 24px 60px rgba(34,45,101,.18);
  }
  /* the header (logo + close button) stays above the open menu */
  body.visari-mode.menu-open .site-header{z-index:30;background:var(--white)!important}
}

/* Phones: a lighter glass header (heavy blur is expensive on mobile GPUs) */
@media(max-width:960px){
  body.visari-mode.light-mode .site-header,body.visari-mode.light-mode .site-header.scrolled{-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
}

/* Very small phones (≤360px): H1 scales down just enough that long words fit; elsewhere it stays 34pt */
@media(max-width:360px){
  body.visari-mode h1{font-size:min(var(--fs-h1),9.4vw)!important;overflow-wrap:anywhere}
}

/* Phones: the headline sits over the photo, so the navy tint covers the whole hero, not just the left */
@media(max-width:680px){
  body.visari-mode.light-mode .v-hero-shade{background:linear-gradient(180deg,rgba(34,45,101,.62) 0%,rgba(34,45,101,.72) 55%,rgba(34,45,101,.35) 100%)}
}

/* The header button keeps its gold fill on hover so the glowing outline reads as an addition, not a replacement */
body.visari-mode.light-mode .site-header .header-cta:hover,body.visari-mode.light-mode .site-header .header-cta:focus-visible{background:var(--brand-gold-light);border-color:var(--brand-gold-light);color:var(--brand-ink)}


/* Service / Who We Help hero: white and gold type on the navy band */
body.visari-mode .detail-hero--navy{padding-top:clamp(150px,15vw,200px)!important;padding-bottom:clamp(56px,6vw,88px)}
body.visari-mode .detail-hero--navy h1{color:var(--white)!important}
body.visari-mode .detail-hero--navy h1 em{color:var(--brand-gold-light)!important}
body.visari-mode .detail-hero--navy .eyebrow-dark{color:var(--brand-gold-light)!important}
body.visari-mode .detail-hero--navy .eyebrow-dark::before{background:var(--brand-gold-light)}
body.visari-mode :is(.jump-chips a,.jump-label){font-size:var(--fs-desc)!important;font-weight:var(--fw-desc)!important}
body.visari-mode .block-num,body.visari-mode .process-num{font-family:var(--font-heading)!important;font-size:var(--fs-h3)!important;font-weight:var(--fw-heading)!important}
body.visari-mode .detail-block .block-num{color:var(--brand-gold)}
body.visari-mode .tick-grid li,body.visari-mode .tick-list li,body.visari-mode .detail-block p,body.visari-mode .detail-intro p{color:var(--color-text)}

/* Shared card interaction: every light-theme card warms to Harrison gold on pointer hover. */
@media (hover:hover){
  body.visari-mode.light-mode :is(.v-serve-grid article,.v-service-list a,.service-feature-card,.catalogue-card,.related-card,.audience-card,.process-card,.principle-card,.review-card,.post-card,.cta-card,.aside-card,.pin-item,.v-faq-list details){
    transition:transform .35s var(--ease),background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease;
  }
  body.visari-mode.light-mode :is(.v-serve-grid article,.v-service-list a,.service-feature-card,.catalogue-card,.related-card,.audience-card,.process-card,.principle-card,.review-card,.post-card,.cta-card,.aside-card,.pin-item,.v-faq-list details):hover{
    background:var(--brand-gold-light)!important;
    border-color:var(--brand-gold)!important;
    box-shadow:0 22px 44px rgba(160,131,89,.24)!important;
    color:var(--brand-navy)!important;
    transform:translateY(-5px);
  }
  body.visari-mode.light-mode :is(.v-serve-grid article,.v-service-list a,.service-feature-card,.catalogue-card,.related-card,.audience-card,.process-card,.principle-card,.review-card,.post-card,.cta-card,.aside-card,.pin-item,.v-faq-list details):hover :is(h2,h3,h4,strong,p,span,summary,a,dt,dd){color:var(--brand-navy)!important}
  body.visari-mode.light-mode :is(.v-serve-grid article,.v-service-list a,.service-feature-card,.catalogue-card,.related-card,.audience-card,.process-card,.principle-card,.review-card,.post-card,.cta-card,.aside-card,.pin-item,.v-faq-list details):hover img{filter:saturate(1.08)}
  body.visari-mode.light-mode .detail-block:hover{background:var(--surface)!important;border-color:var(--color-border)!important;box-shadow:none!important;transform:none!important}
  body.visari-mode.light-mode .tick-grid li{transition:transform .35s var(--ease),background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease}
  body.visari-mode.light-mode .tick-grid li:hover{background:var(--brand-gold-light)!important;border-color:var(--brand-gold)!important;box-shadow:0 14px 28px rgba(160,131,89,.2);transform:translateY(-3px);color:var(--brand-navy)}
}

/* Footer bottom bar: copyright | credit (centre) | back to top */
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.footer-bottom > a{justify-self:end}
.footer-bottom .footer-credit{margin:0;text-align:center}
.footer-bottom .footer-credit a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
  .footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center}
  .footer-bottom > a{justify-self:center}
}