/* =============================================================================
   SitePilot demo template — base stylesheet
   Plain CSS, no build step and no external requests: the whole site is static
   files served from S3 behind CloudFront, so every third-party font or script
   would be a second origin that can go down.

   EVERY colour in this file is a custom property on :root. Nothing is written
   as a literal hex outside that block, which is the whole point — the design
   panel rewrites those properties live, so a client can sit in front of the
   page and change the scheme without a rebuild or a redeploy.
   ========================================================================== */

:root {
    /* --- the ten colours a client actually chooses -------------------------
       Kept deliberately small. More knobs than this and the choosing stops
       being a decision and starts being a job. */

    --brand:        #FE5900;   /* accent: buttons, links, eyebrows, icons */
    --dark-1:       #081F2D;   /* header, footer, deepest section fill */
    --dark-2:       #0C2A3C;   /* mid stop of the dark gradients */
    --dark-3:       #123A52;   /* light stop of the dark gradients */
    --page:         #FFFFFF;   /* body background */
    --surface:      #FFFFFF;   /* card / panel background */
    --surface-alt:  #F6F7F8;   /* alternating section background */
    --ink:          #17222B;   /* headings and body text */
    --ink-soft:     #55636E;   /* secondary text */
    --line:         #DCE2E6;   /* borders and rules */

    /* --- derived, never picked directly ------------------------------------
       Hover and tint shades come from --brand by mixing, so one choice stays
       consistent everywhere instead of the client having to pick a matching
       darker orange by eye. */
    --brand-deep: color-mix(in srgb, var(--brand) 82%, #000);
    --brand-soft: color-mix(in srgb, var(--brand) 62%, #fff);
    --brand-tint: color-mix(in srgb, var(--brand) 12%, transparent);
    --brand-ring: color-mix(in srgb, var(--brand) 24%, transparent);

    /* Text colour that sits on dark fills and on the brand colour. These two
       are overwritten by designer.js, which measures the chosen colour's
       luminance and flips them to near-black when the client picks something
       light. Without that, a pale brand gives white-on-yellow buttons. */
    --on-dark:      #FFFFFF;
    --on-dark-soft: rgba(255, 255, 255, .82);
    --on-dark-mute: rgba(255, 255, 255, .62);
    --on-dark-line: rgba(255, 255, 255, .10);
    --on-brand:     #FFFFFF;

    /* --- motion ------------------------------------------------------------
       Read by animations.css. The panel writes these, so speed is part of the
       scheme a client signs off on, not a constant baked into the CSS. */
    --anim-duration: .65s;
    --anim-ease: cubic-bezier(.22, .61, .36, 1);
    --marquee-speed: 26s;

    /* --- the hero / page-head band -----------------------------------------
       Multipliers rather than absolute sizes, so the responsive clamp() behind
       each one still does its job: a client scaling the headline up by a fifth
       gets a fifth larger at every viewport width, instead of pinning it to a
       size that then overflows a phone. 1 = as designed. */
    --band-heading-scale: 1;
    --band-text-scale: 1;
    --band-btn-scale: 1;
    --band-padding-scale: 1;

    /* --- background pattern ------------------------------------------------
       Drawn with gradients rather than an image: it tiles at any size, costs
       no request, and takes its colour from the palette. */
    --pattern-scale: 22px;
    --pattern-opacity: .08;

    /* --- geometry ---------------------------------------------------------- */
    --wrap: 1120px;
    --radius: 6px;
    --shadow: 0 1px 2px rgba(18, 38, 63, .06), 0 8px 24px rgba(18, 38, 63, .07);
    --shadow-lift: 0 4px 8px rgba(18, 38, 63, .08), 0 16px 40px rgba(18, 38, 63, .10);

    --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--page);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1.1em; }
a  { color: var(--brand); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.eyebrow {
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .8rem;
}
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 60ch; }

/* ------------------------------------------------------------------ header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--dark-1);
    border-bottom: 1px solid var(--on-dark-line);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 88px;
}

/* Wordmark is drawn inline rather than loaded as an image, so it inherits the
   chosen brand colour. A supplied logo file could not repaint itself, and the
   point of this template is that everything on screen responds to the picker. */
.wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.wordmark svg { display: block; width: 34px; height: 34px; color: var(--brand); }
.wordmark .name {
    font-family: var(--serif);
    font-size: 1.35rem;
    letter-spacing: .04em;
    color: var(--on-dark);
    line-height: 1;
}
.wordmark .name span { color: var(--brand); }
@media (max-width: 780px) { .wordmark .name { font-size: 1.15rem; } }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
    color: var(--on-dark-soft);
    text-decoration: none;
    font-size: .94rem;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--brand); }
.nav a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--on-dark); }

.btn {
    display: inline-block;
    background: var(--brand);
    color: var(--on-brand);
    text-decoration: none;
    font-size: .94rem;
    font-weight: 500;
    padding: 11px 22px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn-ghost { background: transparent; color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 50%, transparent); }
.btn-ghost:hover { background: color-mix(in srgb, var(--on-dark) 12%, transparent); }

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 1.5rem;
    color: var(--on-dark);
    cursor: pointer;
    line-height: 1;
}

/* -------------------------------------------------------------------- hero */

.hero {
    position: relative;
    background:
        radial-gradient(1000px 500px at 80% -10%, var(--brand-ring), transparent 60%),
        linear-gradient(160deg, var(--dark-1), var(--dark-2) 55%, var(--dark-3));
    color: var(--on-dark);
    padding: calc(clamp(72px, 12vw, 132px) * var(--band-padding-scale)) 0
             calc(clamp(84px, 12vw, 140px) * var(--band-padding-scale));
    overflow: hidden;
}
.hero h1 { color: var(--on-dark); max-width: 17ch; }
.hero h1 em { font-style: italic; color: var(--brand-soft); }
.hero p { color: var(--on-dark-soft); max-width: 52ch; }
.hero .eyebrow { color: var(--brand-soft); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* =============================================================================
   Band sizing
   The heading, the copy under it and the button in the hero / page-head band
   scale independently. Scoped to the band on purpose: growing every .btn on
   the site would take the header nav button with it, and that is not what is
   being adjusted here.
   ========================================================================== */

.hero h1, .page-head h1 {
    font-size: calc(clamp(2rem, 5vw, 3.25rem) * var(--band-heading-scale));
}
/* The rotating phrase is set to match the headline exactly — scaling one and
   not the other would break the thing it is there to do. */
.hero .rotator-item {
    font-size: calc(clamp(2rem, 5vw, 3.25rem) * var(--band-heading-scale));
}
.hero p, .page-head p {
    font-size: calc(1.1rem * var(--band-text-scale));
}
.hero .eyebrow, .page-head .eyebrow {
    font-size: calc(.78rem * var(--band-text-scale));
}
.hero .btn, .page-head .btn {
    font-size: calc(.94rem * var(--band-btn-scale));
    padding: calc(11px * var(--band-btn-scale)) calc(22px * var(--band-btn-scale));
}

/* =============================================================================
   Background pattern
   A single overlay on the three dark bands. It sits above the gradient and
   below the content, so nothing has to be re-stacked when it is switched on.
   `currentColor` is set on the layer itself, which is how one set of gradient
   definitions repaints with the palette.
   ========================================================================== */

.hero, .page-head, .cta { position: relative; }
.hero > *, .page-head > *, .cta > * { position: relative; z-index: 1; }

.hero::before, .page-head::before, .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    color: var(--on-dark);
    opacity: var(--pattern-opacity);
    background-repeat: repeat;
    background-position: center;
}

/* data-pattern="none" is the default: the layer exists but draws nothing. */

[data-pattern="dots"] .hero::before,
[data-pattern="dots"] .page-head::before,
[data-pattern="dots"] .cta::before,
.p-dots::before {
    background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
    background-size: var(--pattern-scale) var(--pattern-scale);
}

[data-pattern="grid"] .hero::before,
[data-pattern="grid"] .page-head::before,
[data-pattern="grid"] .cta::before,
.p-grid::before {
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: var(--pattern-scale) var(--pattern-scale);
}

[data-pattern="diagonal"] .hero::before,
[data-pattern="diagonal"] .page-head::before,
[data-pattern="diagonal"] .cta::before,
.p-diagonal::before {
    background-image: repeating-linear-gradient(
        45deg, currentColor 0 1px, transparent 1px var(--pattern-scale));
}

[data-pattern="crosshatch"] .hero::before,
[data-pattern="crosshatch"] .page-head::before,
[data-pattern="crosshatch"] .cta::before,
.p-crosshatch::before {
    background-image:
        repeating-linear-gradient( 45deg, currentColor 0 1px, transparent 1px var(--pattern-scale)),
        repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px var(--pattern-scale));
}

/* Concentric rings, sized off the same scale so the slider means the same
   thing here as everywhere else. */
[data-pattern="rings"] .hero::before,
[data-pattern="rings"] .page-head::before,
[data-pattern="rings"] .cta::before,
.p-rings::before {
    background-image: repeating-radial-gradient(
        circle at 50% 50%, currentColor 0 1px, transparent 1px calc(var(--pattern-scale) * 1.4));
}

/* Nodes joined by edges. Gradients cannot draw this, so it is an inline SVG —
   but as a *mask* rather than a background image. A data URI is rendered in its
   own document, where `currentColor` resolves to black instead of inheriting,
   so a background-image version would be stuck at one colour the way the noise
   below is. Masking the layer and filling it with currentColor keeps it on the
   palette.

   The tile is seamless because its four corner nodes are shared: each renders
   as a quarter circle that four neighbouring tiles complete, and every edge
   that leaves the tile leaves at a corner. */
[data-pattern="graph"] .hero::before,
[data-pattern="graph"] .page-head::before,
[data-pattern="graph"] .cta::before,
.p-graph::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 0 L60 42 L120 0 M60 42 L95 78 L120 120 M60 42 L28 86 L0 120 M28 86 L95 78'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='0' cy='0' r='3.2'/%3E%3Ccircle cx='120' cy='0' r='3.2'/%3E%3Ccircle cx='0' cy='120' r='3.2'/%3E%3Ccircle cx='120' cy='120' r='3.2'/%3E%3Ccircle cx='60' cy='42' r='3.6'/%3E%3Ccircle cx='28' cy='86' r='2.8'/%3E%3Ccircle cx='95' cy='78' r='2.8'/%3E%3C/g%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 0 L60 42 L120 0 M60 42 L95 78 L120 120 M60 42 L28 86 L0 120 M28 86 L95 78'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='0' cy='0' r='3.2'/%3E%3Ccircle cx='120' cy='0' r='3.2'/%3E%3Ccircle cx='0' cy='120' r='3.2'/%3E%3Ccircle cx='120' cy='120' r='3.2'/%3E%3Ccircle cx='60' cy='42' r='3.6'/%3E%3Ccircle cx='28' cy='86' r='2.8'/%3E%3Ccircle cx='95' cy='78' r='2.8'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: calc(var(--pattern-scale) * 5) calc(var(--pattern-scale) * 5);
            mask-size: calc(var(--pattern-scale) * 5) calc(var(--pattern-scale) * 5);
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
}

/* Turbulence, inline as a data URI — no request, and nothing to 404. It is the
   one pattern that cannot take the palette's colour: feTurbulence generates its
   own, so this stays grey and leans on opacity instead. */
[data-pattern="noise"] .hero::before,
[data-pattern="noise"] .page-head::before,
[data-pattern="noise"] .cta::before,
.p-noise::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: calc(var(--pattern-scale) * 5) calc(var(--pattern-scale) * 5);
}

.hero .wrap.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

/* Inline SVG chart — drawn rather than fetched, so there is no image to 404
   and it recolours with the palette like everything else. */
.hero-art {
    position: absolute;
    right: -40px;
    bottom: -20px;
    width: min(46%, 520px);
    opacity: .28;
    pointer-events: none;
}

/* ----------------------------------------------------------------- marquee */

.marquee {
    background: var(--dark-1);
    color: var(--on-dark-mute);
    font-family: var(--serif);
    font-size: 1.05rem;
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid var(--on-dark-line);
}
.marquee-track { display: inline-block; padding-left: 100%; }
.marquee-track span { margin: 0 1.4rem; }
.marquee-track span::after { content: " ~"; color: var(--brand-soft); }

/* -------------------------------------------------------------- page intro */

.page-head {
    background: linear-gradient(160deg, var(--dark-1), var(--dark-2));
    color: var(--on-dark);
    padding: calc(clamp(56px, 8vw, 92px) * var(--band-padding-scale)) 0;
}
.page-head h1 { color: var(--on-dark); margin-bottom: .3em; }
.page-head p { color: var(--on-dark-soft); max-width: 58ch; margin: 0; }
.page-head .eyebrow { color: var(--brand-soft); }

/* ---------------------------------------------------------------- sections */

section { padding: clamp(56px, 8vw, 92px) 0; }
.section-alt { background: var(--surface-alt); }
.section-head { max-width: 60ch; margin-bottom: 44px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card h3 { color: var(--ink); }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 0; }
.card .icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--radius);
    background: var(--brand-tint);
    color: var(--brand);
    margin-bottom: 16px;
}
.card .icon svg { width: 21px; height: 21px; }
.card .icon strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }

/* Figures are placeholder throughout — deliberately not called "stats". */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; }
.fact strong {
    display: block;
    font-family: var(--serif);
    font-size: 2.4rem;
    color: var(--ink);
    line-height: 1;
}
.fact span { font-size: .9rem; color: var(--ink-soft); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--ink-soft); }
.checklist li::before {
    content: "";
    position: absolute; left: 0; top: .45em;
    width: 16px; height: 9px;
    border-left: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
}

.person { text-align: left; }
.person .avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--dark-2), var(--dark-3));
    color: var(--on-dark);
    font-family: var(--serif);
    font-size: 1.35rem;
    margin-bottom: 14px;
}
.person .role { color: var(--brand); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------------------------- CTA */

.cta {
    background: linear-gradient(160deg, var(--dark-2), var(--dark-3));
    color: var(--on-dark);
    text-align: center;
}
.cta h2 { color: var(--on-dark); }
.cta p { color: var(--on-dark-soft); max-width: 52ch; margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------------- form */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.field label .req { color: var(--brand); }
.field input, .field select, .field textarea {
    font: inherit;
    font-size: .95rem;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: 14px; }
.form-status {
    color: var(--ink);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.contact-detail { display: flex; gap: 14px; margin-bottom: 24px; align-items: flex-start; }
.contact-detail .icon {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--radius);
    background: var(--brand-tint);
    color: var(--brand);
}
.contact-detail .icon svg { width: 19px; height: 19px; }
.contact-detail h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; margin: 0 0 2px; color: var(--ink); }
.contact-detail p { margin: 0; color: var(--ink-soft); font-size: .94rem; }

/* ------------------------------------------------------------------ footer */

.site-footer {
    background: var(--dark-1);
    color: var(--on-dark-mute);
    padding: 56px 0 28px;
    font-size: .9rem;
}
.site-footer a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer h4 {
    color: var(--on-dark);
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--on-dark-line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    font-size: .82rem;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 780px) {
    .hero-art { display: none; }
    .nav-toggle { display: block; }
    .nav {
        position: absolute;
        top: 78px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--dark-1);
        border-bottom: 1px solid var(--on-dark-line);
        padding: 8px 24px 18px;
        display: none;
    }
    .nav.open { display: flex; }
    .nav a { padding: 12px 0; border-bottom: 1px solid var(--on-dark-line); }
    .nav a[aria-current="page"] { border-bottom-color: var(--brand); }
    .nav .btn { text-align: center; margin-top: 12px; border-bottom: 0; }
    .split { gap: 32px; }
}

/* =============================================================================
   Hero rotating message
   Sits opposite the headline at the same size as the "your business" line, so
   the two read as one thought rather than a headline plus a caption. The
   transition itself lives in animations.css, because which transition it uses
   is one of the things a client picks.
   ========================================================================== */

/* Grid rather than flex: every phrase occupies the same cell so they stack,
   and the text inside each still flows as normal inline content. With flex the
   <em> became a sibling flex item and "Built for" / "your business" laid out
   side by side instead of as one sentence. */
.rotator {
    position: relative;
    min-height: 4.6em;            /* reserves the tallest phrase, so nothing jumps */
    display: grid;
    align-items: center;
}
.rotator-item {
    grid-area: 1 / 1;
    align-self: center;
    display: block;
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.2;
    color: var(--on-dark);
    pointer-events: none;
}
.rotator-item em { font-style: italic; color: var(--brand); }

/* A quiet rule under the phrase, so the column has an anchor when the text is
   mid-fade and the area would otherwise look empty. */
.rotator::after {
    content: "";
    position: absolute;
    left: 0; bottom: -18px;
    width: 64px; height: 3px;
    background: var(--brand);
    opacity: .85;
}

@media (max-width: 900px) {
    .hero .wrap.hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .rotator { min-height: 3.4em; }
    /* Written as `.hero .rotator-item` to match the specificity of the band
       sizing rule above — as a bare `.rotator-item` it loses to it and the
       phrase keeps the desktop size on a phone. The headings need no such rule:
       their own clamp() already brings them down. */
    .hero .rotator-item {
        font-size: calc(clamp(1.6rem, 7vw, 2.2rem) * var(--band-heading-scale));
    }
}