@charset "UTF-8";

/*
    West Bay Boat Works — main stylesheet

    Utility class names follow Tailwind's naming (pulled from the compiled
    mockup bundle) so markup can keep using them.

    1.  Design tokens
    2.  Base / reset
    3.  Animations
    4.  Brand (logo lockup)
    5.  Site header
    5a. Hero caption bar
    5b. Warranty call-out
    6.  Layout utilities
    7.  Typography utilities
    8.  Color utilities
    9.  Effects & transitions
    10. Hover & interaction states
    11. Responsive: small (640px+)
    12. Responsive: large (1024px+)
    13. Responsive: x-large (1280px+)
    14. Reduced motion
*/

#tinymce {
    padding-top: 0px;
}

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* Brand palette */
    --paper: oklch(97.9% .006 247);
    --card: oklch(100% 0 0);
    --ink: oklch(25% .06 256);
    --ink-soft: oklch(45% .07 257);
    --line: oklch(25% .06 256 / .12);
    --deep: oklch(38% .15 264);
    --blue: oklch(50% .19 262);
    --sky: oklch(76% .1 246);
    --sky-soft: oklch(95.5% .02 246);
    --gold: oklch(81% .13 80);

    /* Semantic roles */
    --color-background: var(--paper);
    --color-foreground: var(--ink);
    --color-border: var(--line);
    --color-ring: var(--blue);

    /* Fonts */
    --default-font-family: "Manrope", system-ui, sans-serif;
    --font-display: "Source Serif 4", Georgia, serif;

    /* Spacing & sizing */
    --spacing: .25rem;
    --container-7xl: 80rem;

    /* Type scale */
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;

    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --tracking-tight: -.025em;
    --tracking-widest: .1em;

    --leading-snug: 1.375;
    --leading-relaxed: 1.625;

    /* Effects */
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Per-element defaults for the composable utility variables
   (shadow, translate, backdrop, etc.). Set on every element so they don't inherit. */
*, :before, :after, ::backdrop {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-border-style: solid;
    --tw-leading: initial;
    --tw-font-weight: initial;
    --tw-tracking: initial;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: initial;
    --tw-shadow-alpha: 100%;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-backdrop-blur: initial;
    --tw-backdrop-brightness: initial;
    --tw-backdrop-contrast: initial;
    --tw-backdrop-grayscale: initial;
    --tw-backdrop-hue-rotate: initial;
    --tw-backdrop-invert: initial;
    --tw-backdrop-opacity: initial;
    --tw-backdrop-saturate: initial;
    --tw-backdrop-sepia: initial;
    --tw-duration: initial;
    --tw-ease: initial;
}


/* ==========================================================================
   2. Base / reset
   ========================================================================== */

*, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    border-color: var(--color-border);
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family);
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    margin: 0;
}

/* Interior pages (everything but the homepage) get a plain white background */
body:not(#home),
body:not(#home) > .bg-paper {
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
}

a:hover {
    text-decoration: none !important;
}

a:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 3px;
}

b, strong {
    font-weight: bolder;
}

ol, ul, menu {
    list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
}

img, video {
    max-width: 100%;
    height: auto;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

[hidden]:where(:not([hidden=until-found])) {
    display: none !important;
}


/* ==========================================================================
   3. Animations
   ========================================================================== */

@keyframes rise {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.animate-rise { animation: .5s cubic-bezier(.32, .72, 0, 1) both rise; }
.animate-rise-delay-1 { animation: .6s cubic-bezier(.32, .72, 0, 1) 80ms both rise; }
.animate-rise-delay-2 { animation: .6s cubic-bezier(.32, .72, 0, 1) .16s both rise; }
.animate-rise-delay-3 { animation: .6s cubic-bezier(.32, .72, 0, 1) .24s both rise; }


/* ==========================================================================
   4. Brand (logo lockup)
   Sails + two-line wordmark, sized together via font-size.
   Breakpoint sizes live in the responsive sections below.
   ========================================================================== */

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 4.75px;
    color: var(--ink);
    transition: font-size .25s ease;
}

.brand-mark {
    height: 10.9em;
    width: auto;
}

.brand-word {
    display: flex;
    flex-direction: column;
    margin-left: .5em;
    padding-top: 0;
    font-family: var(--font-display);
    font-size: 3.5em;
    font-weight: 800;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.brand-line-2 {
    padding-left: .5em;
}

/* Shrunk logo once the page is scrolled (class toggled by script) */
.is-scrolled .brand { font-size: 3.5px; }

/* Footer copy of the logo sits on the dark ink background */
.brand-footer {
    color: var(--paper);
}

/* Fixed small size in the footer; out-specifies the breakpoint .brand sizes */
.brand.brand-footer { font-size: 3.5px; }


/* ==========================================================================
   5. Site header
   Turns dark blue with reversed (light) text once scrolled.
   ========================================================================== */

.main-nav {
    font-size: 13px;
    padding: 0 3rem;
}

/* Lay the top-level menu items out side by side */
.main-nav .navbar-nav {
    gap: 2rem;
}

/* Bootstrap makes .navbar-nav dropdowns static outside .navbar-expand-*; float them instead */
.main-nav .navbar-nav .dropdown-menu {
    position: absolute;
}

#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color .25s ease, border-color .25s ease;
}

#site-header.is-scrolled {
    background-color: oklch(38% .15 264 / .97);
    border-color: oklch(97.9% .006 247 / .12);
}

/* Call button: phone icon + number (click to dial) */
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: .75em;
    line-height: 1.2;
}

.header-cta:hover,
.header-cta:focus {
    color: #fff;
    text-decoration: none;
}

.header-cta-icon {
    font-size: 1.6em;
    line-height: 1;
}

.header-cta-number {
    font-size: 1.25em;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}

#site-header.is-scrolled .brand {
    color: var(--paper);
}

#site-header.is-scrolled .main-nav {
    color: oklch(97.9% .006 247 / .8);
}

#site-header.is-scrolled .main-nav a:hover {
    color: var(--sky);
}

#site-header.is-scrolled .header-cta {
    background-color: var(--paper);
    color: var(--deep);
    box-shadow: none;
}

#site-header.is-scrolled .header-cta:hover {
    background-color: var(--sky);
    color: var(--deep);
}

/* Mobile: collapse the call button to a bare blue phone icon */
@media (max-width: 639.98px) {
    #site-header .header-cta,
    #site-header .header-cta:hover,
    #site-header .header-cta:focus,
    #site-header .header-cta:active {
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        color: var(--blue);
        -webkit-tap-highlight-color: transparent;
    }

    #site-header .header-cta-icon {
        font-size: 2.4em;
    }

    #site-header .header-cta-number {
        display: none;
    }

    /* Blue disappears against the scrolled (deep blue) header; use sky instead */
    #site-header.is-scrolled .header-cta,
    #site-header.is-scrolled .header-cta:hover,
    #site-header.is-scrolled .header-cta:focus,
    #site-header.is-scrolled .header-cta:active {
        background-color: transparent;
        color: var(--sky);
    }

    /* Stack the menu button under the phone icon */
    #site-header .header-actions {
        flex-direction: column;
        gap: .25rem;
    }
}

/* Hamburger menu button (shown until the full nav fits, at 1024px) */
.nav-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

#site-header.is-scrolled .nav-toggle {
    color: var(--sky);
}

@media (min-width: 1024px) {
    .nav-toggle { display: none; }
}

/* Open mobile menu: the main nav drops down as a full-width panel under the header */
@media (max-width: 1023.98px) {
    #site-header.nav-open .main-nav {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        padding: .5rem 1.5rem 1rem;
        background-color: var(--paper);
        border-bottom: 1px solid oklch(76% .1 246 / .25);
        box-shadow: 0 10px 20px oklch(38% .15 264 / .1);
    }

    #site-header.is-scrolled.nav-open .main-nav {
        background-color: var(--deep);
    }

    #site-header .main-nav .navbar-nav {
        gap: 0;
    }

    #site-header .main-nav .nav-link {
        padding: .75rem 0;
    }

    /* Submenus open inline instead of floating */
    #site-header .main-nav .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 .5rem 1rem;
    }

    #site-header.is-scrolled .main-nav .dropdown-item {
        color: oklch(97.9% .006 247 / .8);
    }
}


/* ==========================================================================
   5a. Hero caption bar
   Turns Bootstrap's floating .carousel-caption into a full-width deep blue
   band pinned to the bottom of each slide, with reversed (light) text.
   ========================================================================== */

.carousel-caption.hero-caption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 4rem 2rem;   /* bottom room for the slide indicators */
    background-color: oklch(38% .15 264 / .92);
    border-top: 3px solid var(--sky);
    color: var(--paper);
    text-shadow: none;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    line-height: var(--leading-snug);
    letter-spacing: -.01em;
}

.hero-caption > * { margin: 0; }
.hero-caption > * + * { margin-top: .35em; }

.hero-caption h1,
.hero-caption h2,
.hero-caption h3,
.hero-caption h4 {
    color: var(--paper);
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: -.02em;
}

.hero-caption a {
    color: var(--sky);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.hero-caption a:hover { color: var(--paper); }

@media (min-width: 1024px) {
    .carousel-caption.hero-caption {
        padding: 1.5rem 6rem 2.25rem;
        font-size: var(--text-xl);
    }
}


/* ==========================================================================
   5b. Warranty call-out
   Soft blue rounded panel: centred heading flanked by rules, one button.
   ========================================================================== */

.warranty-cta {
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    background-color: var(--sky-soft);
    text-align: center;
}

.warranty-cta-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

.warranty-cta-heading h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.warranty-cta-heading p {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--text-lg);
}

.warranty-cta-button {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin-top: 1.25rem;
    padding: .75rem 1.75rem;
    border-radius: .5rem;
    background-color: var(--blue);
    color: #fff;
    font-weight: 700;
    transition: background-color .15s ease;
}

.warranty-cta-button:hover,
.warranty-cta-button:focus {
    background-color: var(--deep);
    color: #fff;
    text-decoration: none;
}

/* Rules either side of the heading once there's room for them */
@media (min-width: 768px) {
    .warranty-cta-heading {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        column-gap: 2rem;
    }

    .warranty-cta-heading::before,
    .warranty-cta-heading::after {
        content: "";
        grid-row: 1 / span 2;
        align-self: center;
        border-top: 1px solid var(--ink-soft);
        opacity: .5;
    }

    .warranty-cta-heading::before { grid-column: 1; }
    .warranty-cta-heading::after { grid-column: 3; }
    .warranty-cta-heading h2,
    .warranty-cta-heading p { grid-column: 2; }
}


/* Footer nav: the menu template emits Bootstrap list-group columns;
   flatten them into a single inline row of white links */
.nl-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.nl-footer-nav .col,
.nl-footer-nav .list-group {
    display: contents;
}

.nl-footer-nav .list-group-item {
    padding: 0;
    border: 0;
    background: transparent;
}

.nl-footer-nav a {
    color: var(--paper);
    text-decoration: none;
    transition: color .15s ease;
}

.nl-footer-nav a:hover,
.nl-footer-nav .active > a {
    color: var(--sky);
}


/* ==========================================================================
   6. Layout utilities
   ========================================================================== */

/* Position */
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-40 { z-index: 40; }
.scroll-mt-24 { scroll-margin-top: calc(var(--spacing) * 24); }

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Flex & grid */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: calc(var(--spacing) * 3); }
.gap-4 { gap: calc(var(--spacing) * 4); }
.gap-8 { gap: calc(var(--spacing) * 8); }
.gap-10 { gap: calc(var(--spacing) * 10); }

/* Sizing */
.w-10 { width: calc(var(--spacing) * 10); }
.w-full { width: 100%; }
.h-0\.5 { height: calc(var(--spacing) * .5); }
.size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); }
.size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); }
.min-h-screen { min-height: 100vh; }
.max-w-7xl { max-width: var(--container-7xl); }
.aspect-\[4\/3\] { aspect-ratio: 4/3; }

/* Margin */
.mx-auto { margin-inline: auto; }
.mt-1 { margin-top: var(--spacing); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }
.mt-4 { margin-top: calc(var(--spacing) * 4); }
.mt-5 { margin-top: calc(var(--spacing) * 5); }
.mt-6 { margin-top: calc(var(--spacing) * 6); }

/* Padding */
.px-3 { padding-inline: calc(var(--spacing) * 3); }
.px-4 { padding-inline: calc(var(--spacing) * 4); }
.px-5 { padding-inline: calc(var(--spacing) * 5); }
.px-7 { padding-inline: calc(var(--spacing) * 7); }
.py-1 { padding-block: var(--spacing); }
.py-2\.5 { padding-block: calc(var(--spacing) * 2.5); }
.py-3 { padding-block: calc(var(--spacing) * 3); }
.py-4 { padding-block: calc(var(--spacing) * 4); }
.py-10 { padding-block: calc(var(--spacing) * 10); }
.pt-12 { padding-top: calc(var(--spacing) * 12); }
.pb-14 { padding-bottom: calc(var(--spacing) * 14); }

/* Overflow & media */
.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }

/* Borders */
.border { border-style: var(--tw-border-style); border-width: 1px; }
.border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; }


/* ==========================================================================
   7. Typography utilities
   ========================================================================== */

/* Families — serif headlines echo the logo's bold Century-style italic;
   body copy stays on the sans-serif Manrope */
.font-sans { font-family: Manrope, system-ui, sans-serif; }
.font-display { font-family: var(--font-display); }

/* Sizes */
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }
.text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); }
.text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); }

/* Line height */
.leading-\[1\.02\] { --tw-leading: 1.02; line-height: 1.02; }
.leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); }
.leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); }

/* Weight */
.font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); }
.font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); }
.font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); }

/* Letter spacing */
.tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); }
.tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); }
.tracking-\[0\.15em\] { --tw-tracking: .15em; letter-spacing: .15em; }
.tracking-\[0\.2em\] { --tw-tracking: .2em; letter-spacing: .2em; }

/* Transform & wrapping */
.uppercase { text-transform: uppercase; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


/* ==========================================================================
   8. Color utilities
   Opacity variants (e.g. /70) fall back to the solid color where
   color-mix() isn't supported.
   ========================================================================== */

/* Text */
.text-ink { color: var(--ink); }
.text-ink\/70 { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }
.text-blue { color: var(--blue); }
.text-paper, .text-paper\/60 { color: var(--paper); }

/* Backgrounds */
.bg-paper { background-color: var(--paper); }
.bg-paper\/95 { background-color: var(--paper); }
.bg-ink { background-color: var(--ink); }
.bg-deep { background-color: var(--deep); }
.bg-blue { background-color: var(--blue); }
.bg-sky { background-color: var(--sky); }
.bg-sky-soft { background-color: var(--sky-soft); }

/* Borders */
.border-line { border-color: var(--line); }
.border-sky\/25 { border-color: var(--sky); }

/* Shadow color */
.shadow-sky\/40 { --tw-shadow-color: var(--sky); }

@supports (color: color-mix(in lab, red, red)) {
    .text-ink\/70 { color: color-mix(in oklab, var(--ink) 70%, transparent); }
    .text-paper\/60 { color: color-mix(in oklab, var(--paper) 60%, transparent); }
    .bg-paper\/95 { background-color: color-mix(in oklab, var(--paper) 95%, transparent); }
    .border-sky\/25 { border-color: color-mix(in oklab, var(--sky) 25%, transparent); }
    .shadow-sky\/40 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--sky) 40%, transparent) var(--tw-shadow-alpha), transparent); }
}


/* ==========================================================================
   9. Effects & transitions
   ========================================================================== */

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}

.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.duration-300 { --tw-duration: .3s; transition-duration: .3s; }
.duration-700 { --tw-duration: .7s; transition-duration: .7s; }


/* ==========================================================================
   10. Hover & interaction states
   Only applied on devices that support hover (avoids sticky hover on touch).
   ========================================================================== */

@media (hover: hover) {
    /* Direct hover */
    .hover\:text-blue:hover { color: var(--blue); }
    .hover\:bg-blue:hover { background-color: var(--blue); }
    .hover\:bg-deep:hover { background-color: var(--deep); color: #fff; }
    .hover\:border-blue:hover { border-color: var(--blue); }

    /* Hovering a .group parent (service cards, estimate button) */
    .group-hover\:text-blue:is(:where(.group):hover *) { color: var(--blue); }
    .group-hover\:w-full:is(:where(.group):hover *) { width: 100%; }
    .group-hover\:scale-\[1\.04\]:is(:where(.group):hover *) { scale: 1.04; }
    .group-hover\:translate-x-1:is(:where(.group):hover *) {
        --tw-translate-x: var(--spacing);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}


/* ==========================================================================
   11. Responsive: small (640px and up)
   ========================================================================== */

@media (min-width: 640px) {
    /* Brand */
    .brand { font-size: 6.25px; }
    .is-scrolled .brand { font-size: 4.5px; }

    /* Layout */
    .sm\:block { display: block; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:gap-6 { gap: calc(var(--spacing) * 6); }
    .sm\:gap-7 { gap: calc(var(--spacing) * 7); }
    .sm\:aspect-\[16\/9\] { aspect-ratio: 16/9; }

    /* Spacing */
    .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); }
    .sm\:py-3 { padding-block: calc(var(--spacing) * 3); }

    /* Typography */
    .sm\:text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); }
    .sm\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); }
}


/* ==========================================================================
   12. Responsive: large (1024px and up)
   ========================================================================== */

@media (min-width: 1024px) {
    /* Layout */
    .lg\:flex { display: flex; }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:gap-8 { gap: 2rem; }
    .lg\:aspect-\[2\/1\] { aspect-ratio: 2/1; }

    /* Spacing */
    .lg\:px-8 { padding-inline: calc(var(--spacing) * 8); }
    .lg\:pb-20 { padding-bottom: calc(var(--spacing) * 20); }

    /* Typography */
    .lg\:text-\[4\.2rem\] { font-size: 4.2rem; }
}


/* ==========================================================================
   13. Responsive: x-large (1280px and up)
   ========================================================================== */

@media (min-width: 1280px) {
    /* Brand */
    .brand { font-size: 8.5px; }
    .is-scrolled .brand { font-size: 5.5px; }
}


/* ==========================================================================
   14. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, :before, :after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .brand { transition: none; }
}