/* ==========================================================================
   HOME PAGE (aesthetic lap, 15 Oct 2026, owner Hannah Cole)
   Every rule is scoped under body#index so nothing here reaches another page.
   Linked from index.html after css/style.css. css/style.css is shared and is not edited.
   ========================================================================== */

/* Finding 6: the hero headline must never break inside a word.
   js/main.js initSplitTextAnimation wraps each word in span.hero-word (inline-block, nowrap);
   under 400 px the headline drops to 28 px so "Solutions" and "Creative" fit one line at 320.
   text-wrap: balance keeps a lone "for" from hanging on its own line when the first line wraps. */
body#index .hero-section h1 {
    text-wrap: balance;
}

@media (max-width: 399px) {
    body#index .hero-section h1 {
        font-size: 1.75rem;
    }
}

/* Finding 22: one primary and one ghost in the hero, instead of two identical white buttons.
   style.css 330 to 345 sets .btn-secondary with !important, so these overrides need it too. */
body#index .hero-actions .btn-hero-book {
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: #1f2937 !important; /* ink on brand orange is 6.5:1; white on it is 2.2:1 */
    border-color: var(--color-primary) !important;
}

body#index .hero-actions .btn-hero-book:hover {
    background: var(--color-primary-light) !important;
    background-color: var(--color-primary-light) !important;
    color: #1f2937 !important;
    border-color: var(--color-primary-light) !important;
}

body#index .hero-actions .btn-hero-ghost {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body#index .hero-actions .btn-hero-ghost:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #ffffff !important;
}

body#index .hero-actions .btn-secondary:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    /* stacked on a phone: the two buttons share one width so the primary reads as the lead */
    body#index .hero-actions {
        align-items: stretch;
        width: min(100%, 20rem);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Finding 49 (hero half): a navy gradient over the photo instead of the flat orange wash.
   The wash came from .hero-splash at 0.3 opacity over an orange gradient. The photo now shows at full
   strength and the overlay sits above it (z-index 1, under the text at 2). The video fades in at the same
   opacity as the splash, so the optional hero video keeps working. */
body#index .hero-section {
    background: var(--bg-dark);
}

body#index .hero-section .hero-splash {
    opacity: 1;
}

body#index .hero-background .hero-video.is-playing {
    opacity: 1; /* same as .hero-splash above, so the text sits on the same tint */
}

/* Keep the splash under the playing video: fading both at once would show the navy behind them */
body#index .hero-background:has(.hero-video.is-playing) .hero-splash {
    opacity: 1;
}

body#index .hero-section::before {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.8) 100%);
}

/* Finding 45: the Around Festival band. White text crossed an olive photo with blue swirls, so its contrast
   changed word by word. A navy overlay at 0.82 (style.css 2260 has a flat black 0.5) makes the band read as part of the
   brand and keeps the swirl artwork as texture only. White text on the lightest possible pixel under it is above 4.5:1.
   The primary button had white text on orange (2.2:1), so it takes ink text here, as in the hero. */
body#index .callout--around-festival::before {
    background: rgba(15, 23, 42, 0.82);
}

body#index .callout--around-festival .btn-primary {
    color: #1f2937 !important;
}

body#index .callout--around-festival .btn-primary:hover {
    background: var(--color-primary-light) !important;
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
    color: #1f2937 !important;
}

body#index .callout--around-festival .btn-primary:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Finding 48: the two logo walls.
   School wall: every logo is 48px high with its natural width, no white box, a light greyscale that goes to full
   colour on hover. The files in images/PastClientsLogos/trimmed are the originals with the empty margin cropped
   (scripts/trim-partner-logos.mjs), so 48px shows the mark and not a 12px strip inside a square.
   js/main.js freezePartnerItemWidths measures each item after load, so the carousel keeps working at any width. */
/* white band: a logo saved with an opaque white background (several admin uploads are JPEGs) then has no visible box */
body#index .partners-section {
    background: #ffffff;
}

body#index .logo-wall-caption {
    margin: 0 0 1rem;
    color: #4b5563;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

body#index .partners-section .carousel-track {
    gap: 3rem;
    align-items: center;
}

body#index .partners-section .partner-logo {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
    min-width: 0;
    max-width: none;
}

body#index .partners-section .partner-logo:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

body#index .partners-section .partner-logo img {
    width: auto;
    height: 48px;
    max-width: 200px; /* a very wide wordmark keeps its 48px box and is letterboxed, not stretched */
    aspect-ratio: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.8);
}

body#index .partners-section .partner-logo:hover img {
    filter: none;
}

/* Technology wall: the five software logos in one row at the same 48px, under their own caption.
   style.css gives .content-wrapper an 800px cap, and the five logos plus their gaps need about 850px, so the cap
   is lifted here (finding 51 moved the old paragraphs up into #home-intro, so only the caption and the row are left). */
body#index .about-gravity-section .content-wrapper {
    max-width: 1100px;
}

body#index .software-logos {
    display: flex;
    flex-wrap: wrap; /* one row from 768px; a phone cannot fit five logos side by side, so it wraps and centres */
    justify-content: center;
    align-items: center;
    gap: 1.5rem 3rem;
    max-width: none;
    margin: 0 auto 1rem;
}

body#index .software-logos img {
    width: auto;
    height: 48px;
    max-width: 190px;
    object-fit: contain;
}

@media (max-width: 899px) {
    /* too narrow for one row: a centred 3 + 2, not four and an orphan */
    body#index .software-logos {
        max-width: 30rem;
        gap: 1.25rem 2rem;
    }
}

/* Finding 51: one heading style for the home h2s, the intro merged into one block, the quote band on the grid.
   Before: bold italic here, 40px there (services and the configurator band), trailing full stops on four of them.
   Italics and the full stops are gone from the markup; this rule makes size, weight and style one thing even if a
   page-editor edit puts an em back. 2rem is the site's own h2 size (1.75rem under 768px, as in style.css). */
body#index main h2 {
    font-size: 2rem;
    font-weight: 700;
    font-style: normal;
}

body#index main h2 em {
    font-style: normal;
}

@media (max-width: 768px) {
    body#index main h2 {
        font-size: 1.75rem;
    }
}

body#index .partners-section h2 {
    margin-bottom: 1rem; /* the Trusted by caption now sits between the heading and the logos */
}

/* The View case studies button now lives under the merged intro paragraph */
body#index .home-intro-actions {
    margin-top: 1.5rem;
}

/* style.css 2148 caps the quote band at 1000px, which left it off the grid every other section sits on:
   it now spans the container, so the quote starts where the heading text column does and the photo ends at the
   same right edge as the header button. Under 768px the band is already one centred column. */
body#index .testimonial-quote {
    max-width: none;
}

/* Finding 49 (form half): labels above the fields, as on the contact page, instead of placeholders alone.
   Each label and its control sit in div.form-field. The sizes and gaps stay with the #contact rules at the end of
   style.css (tests/brochure-form-layout.test.mjs asserts them): this only stacks label over control and colours the
   label for the navy panel. The asterisk comes from the field being required, so it cannot drift from the markup. */
body#index #main-contact-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

body#index #main-contact-form .form-field > label {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

body#index #main-contact-form .form-field:has(:required) > label::after {
    content: ' *';
}

@media (max-width: 479px) {
    /* two name fields side by side leave 160px each at 375: stack them */
    body#index #main-contact-form .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* "Thank you" panel after the form is sent: the paragraphs took the site's grey (#4b5563) on the near-black
   panel (#111827), 2.35:1. Light grey on that panel is above 14:1. */
body#index .contact-confirmation p {
    color: #e5e7eb;
}