/* ==========================================================================
   Kenneth Jura — "Stories for Change"
   Design language: Cinematic Editorial
   Palette sampled directly from the brand logo:
     orange #F95701 · navy #012562 · white #FFFFFF

   Proportion is 60 white / 30 navy / 10 orange. White is the ground the logo
   itself sits on. The earlier warm sand was invented rather than sampled, and
   warm cream with a serif and an orange accent is the current house style of
   generated design — which is what a reviewer saw before it was changed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typefaces (self-hosted variable fonts, latin subset)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/fraunces.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* --- brand primitives, straight off the logo --- */
    --jk-orange:      #F95701;
    --jk-orange-700:  #C63F00;
    --jk-orange-600:  #E14D00;
    --jk-orange-300:  #FF8B4D;
    --jk-orange-100:  #FFE3D2;

    --jk-navy:        #012562;
    --jk-navy-950:    #00081A;
    --jk-navy-900:    #01102F;
    --jk-navy-800:    #011A45;
    --jk-navy-700:    #012562;
    --jk-navy-600:    #05367F;
    --jk-navy-400:    #4B6BA6;
    --jk-navy-200:    #B9C6DC;

    /* The logo sits on plain white, so the site does too. The two greys below are
       biased toward the navy rather than toward warmth: a neutral that leans into
       the brand reads as chosen, and a warm one reads as somebody else's. */
    --jk-white:       #FFFFFF;
    --jk-mist:        #F3F6FA;
    --jk-mist-deep:   #E8EDF5;
    --jk-mist-line:   #D9E1ED;

    /* --- semantic surfaces --- */
    --surface:            var(--jk-white);
    --surface-raised:     var(--jk-mist);
    --surface-inverse:    var(--jk-navy-900);
    --surface-inverse-alt: var(--jk-navy-800);
    --surface-inverse-deep: var(--jk-navy-950);

    /* Always dark, in both modes. In daylight a tile contrasts with the white page;
       at night it lifts off the navy ground instead of inverting away from it. */
    --tile:               var(--jk-navy-900);
    --tile-text:          #F6F8FC;
    --tile-text-muted:    #A9BAD6;

    /* Always light, in both modes. A card of writing is paper: white in daylight,
       and at night a lit page on a dark desk rather than another patch of navy.
       This is what carries the white share once the ground turns over. */
    --panel:              var(--jk-mist);
    --panel-text:         var(--jk-navy-900);
    --panel-text-muted:   #4A5468;
    --panel-line:         var(--jk-mist-line);

    /* --- semantic text --- */
    --text:               var(--jk-navy-900);
    --text-muted:         #4A5468;
    --text-subtle:        #6B7488;
    --text-inverse:       #F6F8FC;
    --text-inverse-muted: #A9BAD6;

    /* --- accent --- */
    /* The brand orange on white measures 3.29:1, which is fine for a button or a
       heading but below the 4.5 small text needs. Small orange text on a light
       surface therefore uses the darker step, which measures 5.11. On navy the
       bright orange measures 5.72 and is used as-is. */
    --accent:             var(--jk-orange);
    --accent-text:        var(--jk-orange-700);
    --accent-strong:      var(--jk-orange-600);
    --accent-on:          #FFFFFF;

    /* --- lines & elevation --- */
    --line:               var(--jk-mist-line);
    --line-strong:        #BDC8D9;
    --line-inverse:       rgba(255, 255, 255, .14);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(1, 16, 47, .06), 0 2px 6px rgba(1, 16, 47, .05);
    --shadow-md: 0 8px 24px -8px rgba(1, 16, 47, .18), 0 2px 8px rgba(1, 16, 47, .06);
    --shadow-lg: 0 30px 60px -24px rgba(1, 16, 47, .32), 0 10px 24px -12px rgba(1, 16, 47, .16);
    --shadow-frame: 0 40px 80px -32px rgba(0, 8, 26, .55);

    /* --- rhythm --- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --section-y: clamp(4.5rem, 9vw, 8.5rem);

    /* --- motion --- */
    --ease-out: cubic-bezier(.2, .7, .3, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .18s;
    --dur: .34s;
    --dur-slow: .7s;

    /* --- bootstrap bridge --- */
    --bs-body-font-family: 'Archivo', 'Segoe UI', 'Helvetica Neue', sans-serif;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--surface);
    --bs-link-color: var(--jk-navy-700);
    --bs-link-hover-color: var(--accent);
    --bs-border-color: var(--line);
    --bs-primary: var(--jk-orange);
    --bs-focus-ring-color: rgba(249, 87, 1, .35);
}

/* --------------------------------------------------------------------------
   Dark mode

   The same design with its proportions turned over: navy becomes the ground the
   page sits on, and the panels that were navy in daylight become the light
   relief. Nothing moves, because every surface already reads its colour from a
   token whose name describes its job rather than its hue: "inverse" has always
   meant the opposite of whatever the page sits on, which is true in both modes.

   The orange is untouched. It is the one fixed point in the brand, and it holds
   up on both grounds: 5.72 against the navy, 5.11 as the darker step on white.

   Three states, not two. An explicit choice stamps data-theme on the root; the
   default setting stamps nothing at all, and only prefers-color-scheme separates
   day from night. So the tokens are declared for both, and the explicit choice
   is written last so it wins either way.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface:            var(--jk-navy-900);
        --surface-raised:     var(--panel);
        --surface-inverse:    var(--jk-navy-950);
        --surface-inverse-alt: var(--jk-navy-800);
        --surface-inverse-deep: var(--jk-navy-950);

        /* lifted off the navy ground rather than inverted away from it */
        --tile:               var(--jk-navy-800);

        --text:               #E8EEF9;
        --text-muted:         #A9BAD6;
        --text-subtle:        #8B9CBA;
        --text-inverse:       #F6F8FC;
        --text-inverse-muted: #A9BAD6;

        --accent-text:        var(--jk-orange-300);

        --line:               rgba(255, 255, 255, .13);
        --line-strong:        rgba(255, 255, 255, .24);
        --line-inverse:       var(--jk-mist-line);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55);
        --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, .7);
        --shadow-frame: 0 40px 80px -32px rgba(0, 0, 0, .8);

        --bs-link-color: var(--jk-orange-300);
    }
}

:root[data-theme="dark"] {
    --surface:            var(--jk-navy-900);
    --surface-raised:     var(--panel);
    --surface-inverse:    var(--jk-navy-950);
    --surface-inverse-alt: var(--jk-navy-800);
    --surface-inverse-deep: var(--jk-navy-950);

    /* lifted off the navy ground rather than inverted away from it */
    --tile:               var(--jk-navy-800);

    --text:               #E8EEF9;
    --text-muted:         #A9BAD6;
    --text-subtle:        #8B9CBA;
    --text-inverse:       #F6F8FC;
    --text-inverse-muted: #A9BAD6;

    --accent-text:        var(--jk-orange-300);

    --line:               rgba(255, 255, 255, .13);
    --line-strong:        rgba(255, 255, 255, .24);
    --line-inverse:       var(--jk-mist-line);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55);
    --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, .7);
    --shadow-frame: 0 40px 80px -32px rgba(0, 0, 0, .8);

    --bs-link-color: var(--jk-orange-300);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--surface);
    color: var(--text);
    font-family: 'Archivo', 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* film-grain atmosphere — kept extremely light so it never costs a repaint */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .028;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, .display-serif {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 1;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.022em;
    color: var(--text);
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.6rem, 6.2vw, 4.9rem); font-weight: 600; }
h2, .h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3, .h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.18; }
h4, .h4 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.25; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead-xl {
    font-size: clamp(1.1rem, 1.5vw, 1.32rem);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 58ch;
}

.lead {
    font-size: 1.09rem;
    line-height: 1.62;
    color: var(--text-muted);
    max-width: 62ch;
}

.text-muted-ink { color: var(--text-muted) !important; }
.text-accent { color: var(--accent) !important; }

/* the recurring editorial signature: a numbered, tracked-out label */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: 'Archivo', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 1.1rem;
}

.eyebrow::before {
    content: '';
    width: 2.2rem;
    height: 2px;
    background: currentColor;
    flex: none;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
    content: '';
    width: 2.2rem;
    height: 2px;
    background: currentColor;
    flex: none;
}

/* pulled-out serif quote, the editorial voice of the site */
.pull-quote {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 120, 'SOFT' 20, 'WONK' 1;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    line-height: 1.28;
    letter-spacing: -.02em;
    font-weight: 500;
}

.serif-accent {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 120, 'SOFT' 40, 'WONK' 1;
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Layout scaffolding
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Paper is paper in both modes: white in daylight, a lit page at night. It is
   what carries the white share once the ground turns navy. */
.section--paper { background: var(--panel); color: var(--panel-text); }
.section--paper .lead, .section--paper .lead-xl { color: var(--panel-text-muted); }
.section--sand  { background: var(--surface); }
.section--deep  { background: var(--surface-inverse); color: var(--text-inverse); }

.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4 { color: var(--text-inverse); }
.section--deep .lead,
.section--deep .lead-xl { color: var(--text-inverse-muted); }

/* Editor-authored block copy. Only `_html` fields render blocks; the rhythm below
   matches the `p` rules above so a rich value looks the same as a plain one. */
.lead > :last-child,
.lead-xl > :last-child { margin-bottom: 0; }

.lead ul, .lead ol,
.lead-xl ul, .lead-xl ol {
    margin: 0 0 1.15em;
    padding-left: 1.25em;
}

.lead li, .lead-xl li { margin-bottom: 0.35em; }

.lead h2, .lead h3, .lead h4,
.lead-xl h2, .lead-xl h3, .lead-xl h4 {
    font-size: 1.18rem;
    margin: 1.6em 0 0.5em;
    color: var(--text);
}

.section--deep .lead h2, .section--deep .lead h3, .section--deep .lead h4 { color: var(--text-inverse); }

.lead blockquote, .lead-xl blockquote {
    margin: 0 0 1.15em;
    padding-left: 1.1em;
    border-left: 3px solid var(--accent);
    font-style: italic;
}

.container-jk {
    width: min(100% - 2.5rem, 1220px);
    margin-inline: auto;
}

@media (max-width: 575.98px) {
    .container-jk { width: min(100% - 1.75rem, 1220px); }
}

.stack-tight > * + * { margin-top: .75rem; }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100%;
    z-index: 2000;
    padding: .8rem 1.3rem;
    background: var(--jk-navy-900);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: 1rem; color: #fff; }

/* --------------------------------------------------------------------------
   6. The film-strip motif
   Lifted from the ribbon in the logo and reused as the site's structural
   signature: section rules, card rails, hero framing.
   -------------------------------------------------------------------------- */
.filmstrip {
    --hole: rgba(255, 255, 255, .82);
    --strip-bg: var(--jk-navy-900);
    height: 26px;
    background: var(--strip-bg);
    position: relative;
    overflow: hidden;
}

.filmstrip::before,
.filmstrip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background-image: repeating-linear-gradient(
        to right,
        var(--hole) 0 11px,
        transparent 11px 25px
    );
}

.filmstrip::before { top: 5px; }
.filmstrip::after  { bottom: 5px; }

.filmstrip--accent { --strip-bg: var(--accent); --hole: rgba(255, 255, 255, .92); }
.filmstrip--slim   { height: 16px; }
.filmstrip--slim::before { top: 3px; height: 4px; }
.filmstrip--slim::after  { bottom: 3px; height: 4px; }

/* a single vertical sprocket rail used down the edge of work cards */
.sprocket-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14px;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, .5) 0 9px,
        transparent 9px 22px
    );
    opacity: .55;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */
.jk-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--jk-white) 82%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.jk-nav.is-scrolled {
    background: color-mix(in srgb, var(--jk-white) 94%, transparent);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px -18px rgba(1, 16, 47, .5);
}

.jk-nav__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 74px;
}

.jk-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--text);
    margin-right: auto;
    padding-block: .4rem;
}

.jk-brand__mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: none;
    transition: transform var(--dur) var(--ease-out);
}

.jk-brand:hover .jk-brand__mark { transform: rotate(-4deg) scale(1.06); }

.jk-brand__name {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: .93rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--jk-navy-700);
}

.jk-brand__name em {
    color: var(--accent);
    font-style: normal;
}

.jk-brand__tag {
    display: block;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 40, 'SOFT' 40, 'WONK' 1;
    font-style: italic;
    font-size: .78rem;
    letter-spacing: .01em;
    color: var(--text-subtle);
    line-height: 1.2;
    margin-top: .1rem;
}

/* on desktop the menu is a single row: links, then the CTA */
.jk-navmenu {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.jk-navlinks {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jk-navlink {
    position: relative;
    display: inline-block;
    padding: .55rem .85rem;
    font-size: .93rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease-out);
}

.jk-navlink::after {
    content: '';
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .3rem;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
}

.jk-navlink:hover,
.jk-navlink:focus-visible { color: var(--text); }
.jk-navlink:hover::after,
.jk-navlink:focus-visible::after { transform: scaleX(1); }

.jk-navlink.is-active { color: var(--jk-navy-700); font-weight: 600; }
.jk-navlink.is-active::after { transform: scaleX(1); }

/* language switch — two locales, so a pair of links beats a dropdown */
.langswitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    flex: none;
}

.langswitch__opt {
    display: inline-block;
    padding: .34rem .7rem;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text-subtle);
    text-decoration: none;
    line-height: 1.2;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

/* --- appearance switch, beside the language switch --- */
.themeswitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
}

.themeswitch[hidden] { display: none; }

.themeswitch__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.themeswitch__opt:hover { color: var(--text); }

.themeswitch__opt.is-current {
    background: var(--surface);
    color: var(--accent-text);
    box-shadow: var(--shadow-sm);
}

.themeswitch__opt:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}


.langswitch__opt:hover { color: var(--text); }

.langswitch__opt.is-current {
    background: var(--jk-navy-700);
    color: #fff;
}

@media (max-width: 991.98px) {
    /* inside the dark drawer the switch has to invert */
    .langswitch {
        border-color: var(--line-inverse);
        align-self: flex-start;
        margin-top: 1.25rem;
    }

    .langswitch__opt { color: var(--text-inverse-muted); padding: .5rem .95rem; }
    .langswitch__opt:hover { color: #fff; }
    .langswitch__opt.is-current { background: var(--accent); color: #fff; }
}

/* mobile drawer toggle */
.jk-navtoggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    padding: 0;
    place-items: center;
    cursor: pointer;
    color: var(--text);
}

.jk-navtoggle span,
.jk-navtoggle span::before,
.jk-navtoggle span::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}

.jk-navtoggle span { position: relative; }
.jk-navtoggle span::before,
.jk-navtoggle span::after { content: ''; position: absolute; left: 0; }
.jk-navtoggle span::before { top: -6px; }
.jk-navtoggle span::after  { top: 6px; }

.jk-navtoggle[aria-expanded="true"] span { background: transparent; }
.jk-navtoggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.jk-navtoggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .jk-navtoggle { display: grid; }

    .jk-navmenu {
        position: fixed;
        inset: 74px 0 auto;
        background: var(--jk-navy-900);
        padding: 1.25rem 1.5rem 2rem;
        display: grid;
        gap: .25rem;
        clip-path: inset(0 0 100% 0);
        transition: clip-path var(--dur) var(--ease-out);
        border-top: 1px solid var(--line-inverse);
        max-height: calc(100dvh - 74px);
        overflow-y: auto;
    }

    .jk-navmenu.is-open { clip-path: inset(0 0 0 0); }

    .jk-navlinks {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .jk-navlink {
        padding: .9rem .25rem;
        font-size: 1.08rem;
        color: var(--text-inverse-muted);
        border-bottom: 1px solid var(--line-inverse);
        border-radius: 0;
    }

    .jk-navlink:hover,
    .jk-navlink.is-active { color: #fff; }
    .jk-navlink::after { left: .25rem; right: auto; width: 24px; bottom: .5rem; }

    .jk-navmenu .btn { margin-top: 1.1rem; width: 100%; }
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
    --btn-y: .85rem;
    --btn-x: 1.6rem;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .005em;
    padding: var(--btn-y) var(--btn-x);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn-brand {
    background: var(--accent);
    color: var(--accent-on);
    box-shadow: 0 10px 24px -12px rgba(249, 87, 1, .75);
}

.btn-brand:hover,
.btn-brand:focus-visible {
    background: var(--accent-strong);
    color: var(--accent-on);
    box-shadow: 0 14px 30px -12px rgba(249, 87, 1, .85);
}

.btn-ink {
    background: var(--jk-navy-700);
    color: #fff;
}

.btn-ink:hover,
.btn-ink:focus-visible { background: var(--jk-navy-600); color: #fff; }

.btn-outline-ink {
    background: transparent;
    color: var(--jk-navy-700);
    border-color: var(--line-strong);
}

.btn-outline-ink:hover,
.btn-outline-ink:focus-visible {
    border-color: var(--jk-navy-700);
    background: var(--jk-navy-700);
    color: #fff;
}

.btn-outline-light-ink {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .34);
}

.btn-outline-light-ink:hover,
.btn-outline-light-ink:focus-visible {
    background: #fff;
    color: var(--jk-navy-900);
    border-color: #fff;
}

/* quiet text link with a travelling arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--jk-navy-700);
    text-decoration: none;
}

.link-arrow svg { transition: transform var(--dur) var(--ease-out); flex: none; }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover svg { transform: translateX(5px); }

.section--deep .link-arrow { color: var(--jk-orange-300); }

/* Bright orange measures 5.72 against navy, so the darkened step is not needed there. */
.section--deep .eyebrow,
.masthead .eyebrow,
.hero__card .eyebrow,
.card-jk--feature .eyebrow { color: var(--accent); }
.section--deep .link-arrow:hover { color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   9. Hero — letterboxed, layered, asymmetric
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
    overflow: hidden;
}

/* soft radial light bloom behind the composition */
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    max-width: 780px;
    max-height: 780px;
    background: radial-gradient(circle, rgba(249, 87, 1, .16), transparent 62%);
    pointer-events: none;
    z-index: 0;
}

.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
}

.hero__card {
    grid-column: 1 / 9;
    grid-row: 1;
    background: var(--tile);
    color: var(--tile-text);
    border-radius: var(--radius-xl);
    padding: clamp(2.2rem, 4.5vw, 4rem);
    padding-right: clamp(2.2rem, 12vw, 9rem);
    box-shadow: var(--shadow-frame);
    position: relative;
    overflow: hidden;
}

/* the logo's swoosh, abstracted into a corner glow */
.hero__card::after {
    content: '';
    position: absolute;
    left: -30%;
    bottom: -60%;
    width: 90%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(5, 54, 127, .55), transparent 60%);
    pointer-events: none;
}

.hero__card > * { position: relative; z-index: 1; }

.hero__title {
    color: #fff;
    font-size: clamp(2.5rem, 5.4vw, 4.4rem);
    margin-bottom: 1.2rem;
}

.hero__title .serif-accent { color: var(--jk-orange-300); }

.hero__lead {
    color: var(--text-inverse-muted);
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    max-width: 44ch;
    margin-bottom: 2rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: center;
}

/* the offset "film frame" that overlaps the card, echoing the reference layout */
.hero__frame {
    grid-column: 8 / 13;
    grid-row: 1;
    z-index: 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(155deg, var(--jk-navy-700), var(--jk-navy-950));
    aspect-ratio: 3 / 4;
    display: grid;
    grid-template-rows: auto 1fr auto;
    position: relative;
}

/*
 * The photo is a backdrop, not a grid item. Spanning it across the rows pushed the two
 * sprocket rails into implicit rows underneath it, so both ended up below the picture.
 * Taking it out of flow keeps the rails top and bottom where the film frame needs them.
 */
.hero__frame img.hero__portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

/*
 * Pin the rails to the first and last rows explicitly. With the photo out of flow only
 * two grid items remain, and auto-placement would drop the second rail into the middle
 * row instead of the bottom.
 */
.hero__frame > .filmstrip {
    position: relative;
    z-index: 1;
}

.hero__frame > .filmstrip:first-child { grid-row: 1; }
.hero__frame > .filmstrip:last-child { grid-row: 3; }

/* fallback composition used until a portrait is supplied */
.hero__framebody {
    grid-row: 2;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    text-align: center;
    gap: .9rem;
}

.hero__framemark {
    width: min(58%, 190px);
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45));
}

.hero__framecaption {
    font-family: 'Archivo', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.hero__frame .filmstrip { --strip-bg: rgba(0, 0, 0, .38); }

.hero__badge {
    position: absolute;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 3;
    background: var(--accent);
    color: var(--accent-on);
    border-radius: var(--radius-md);
    padding: .8rem 1.1rem;
    box-shadow: var(--shadow-md);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    .hero__grid { grid-template-columns: 1fr; gap: 0; }
    .hero__card {
        grid-column: 1;
        padding-right: clamp(2.2rem, 4.5vw, 4rem);
        padding-bottom: clamp(4rem, 16vw, 7rem);
    }
    .hero__frame {
        grid-column: 1;
        grid-row: 2;
        width: min(78%, 340px);
        margin: -14% auto 0;
        aspect-ratio: 4 / 5;
    }

    /* stacked layout leaves no room to float the badge — drop it into flow */
    .hero__badge {
        position: static;
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        margin-top: 1.5rem;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   10. Credit roll — clients marquee
   -------------------------------------------------------------------------- */
.creditroll {
    border-block: 1px solid var(--line);
    background: var(--surface-raised);
    padding-block: 1.6rem;
    overflow: hidden;
    position: relative;
}

.creditroll::before,
.creditroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12%;
    z-index: 2;
    pointer-events: none;
}

.creditroll::before { left: 0;  background: linear-gradient(to right, var(--surface-raised), transparent); }
.creditroll::after  { right: 0; background: linear-gradient(to left,  var(--surface-raised), transparent); }

.creditroll__track {
    display: flex;
    width: max-content;
    gap: 3.5rem;
    animation: creditroll 38s linear infinite;
}

.creditroll:hover .creditroll__track { animation-play-state: paused; }

.creditroll__item {
    font-family: 'Archivo', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--text-subtle);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3.5rem;
}

.creditroll__item::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}

@keyframes creditroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */
.card-jk {
    background: var(--panel);
    color: var(--panel-text);
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.card-jk:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--line-strong);
}

/* one service card per grid is inverted, borrowing the reference's accent tile */
.card-jk--feature {
    background: var(--tile);
    border-color: var(--tile);
    color: var(--tile-text);
}

.card-jk--feature h3 { color: var(--tile-text); }
.card-jk--feature p { color: var(--text-inverse-muted); }
.card-jk--feature .card-jk__icon {
    background: rgba(255, 255, 255, .1);
    color: var(--jk-orange-300);
    border-color: rgba(255, 255, 255, .16);
}

.card-jk__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--jk-orange-100);
    border: 1px solid transparent;
    color: var(--accent);
    margin-bottom: 1.15rem;
    flex: none;
    transition: transform var(--dur) var(--ease-out);
}

.card-jk:hover .card-jk__icon { transform: scale(1.08) rotate(-5deg); }
.card-jk h3 { font-size: 1.24rem; margin-bottom: .55rem; }
.card-jk p { color: var(--panel-text-muted); font-size: .97rem; margin-bottom: 1.1rem; }
/* the dark feature card is the exception: its copy reads against navy */
.card-jk--feature p { color: var(--tile-text-muted); }
.card-jk .link-arrow { margin-top: auto; }

/* --- work / film cards --- */
.work-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--tile);
    color: var(--tile-text);
    text-decoration: none;
    isolation: isolate;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.work-card__poster {
    aspect-ratio: 16 / 10;
    position: relative;
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(249, 87, 1, .35), transparent 58%),
        linear-gradient(150deg, var(--jk-navy-700), var(--jk-navy-950));
    overflow: hidden;
}

/* real poster photo, when one has been supplied */
.work-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.work-card:hover .work-card__image { transform: scale(1.05); }

/*
 * Scan lines belong to the logo-only treatment. Laid over a real photograph they read
 * as haze, so a card that has a picture skips them.
 */
.work-card__poster:has(.work-card__image)::before { content: none; }

.work-card__poster::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, .05) 0 1px,
        transparent 1px 4px
    );
    opacity: .6;
}

.work-card__frameno {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    font-family: 'Archivo', sans-serif;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.work-card__mark {
    width: 34%;
    max-width: 120px;
    opacity: .92;
    z-index: 1;
    transition: transform var(--dur-slow) var(--ease-out);
}

.work-card:hover .work-card__mark { transform: scale(1.09); }

.work-card__play {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .7);
    transform: scale(.85);
    opacity: 0;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.work-card:hover .work-card__play,
.work-card:focus-visible .work-card__play { transform: scale(1); opacity: 1; }

.work-card__body {
    padding: 1.4rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.work-card__cat {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--jk-orange-300);
}

.work-card__title {
    font-size: 1.2rem;
    color: var(--tile-text);
    margin: 0;
    line-height: 1.2;
}

.work-card__meta {
    font-size: .87rem;
    color: var(--text-inverse-muted);
    margin: 0;
}

/* --- project gallery --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1.4rem;
}

.gallery__item { margin: 0; }

.gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--jk-navy-900);
    box-shadow: var(--shadow-sm);
}

.gallery__item figcaption {
    margin-top: .65rem;
    font-size: .87rem;
    line-height: 1.5;
    color: var(--text-subtle);
}

/* The gallery sits on navy, where the subtle grey above would be unreadable. */
.section--deep .gallery__item figcaption { color: var(--text-inverse-muted); }

/* --- project fact list --- */
.factlist {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.factlist__row {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) 1fr;
    gap: 1rem;
    padding-block: .95rem;
    border-bottom: 1px solid var(--line);
}

.factlist dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin: 0;
}

.factlist dd {
    margin: 0;
    font-size: .98rem;
    color: var(--text);
}

@media (max-width: 575.98px) {
    .factlist__row { grid-template-columns: 1fr; gap: .2rem; }
}

/* --------------------------------------------------------------------------
   12. Stats, list rows, timeline
   -------------------------------------------------------------------------- */
.stat { padding-block: .5rem; }

.stat__value {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'WONK' 1;
    font-size: clamp(2.4rem, 4.6vw, 3.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--accent);
    display: block;
}

.stat__label {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--text-muted);
    max-width: 22ch;
}

.section--deep .stat__label { color: var(--text-inverse-muted); }

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    font-size: .99rem;
    color: var(--text-muted);
}

.checklist svg { flex: none; margin-top: .22rem; color: var(--accent); }

/* numbered process steps */
.step {
    position: relative;
    padding-left: 4.2rem;
    padding-block: 1.6rem;
    border-top: 1px solid var(--line-inverse);
}

.step__no {
    position: absolute;
    left: 0;
    top: 1.5rem;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'WONK' 1;
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--jk-orange-300);
    line-height: 1;
}

.step h3 { font-size: 1.22rem; margin-bottom: .4rem; }

/* career timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--line));
}

.timeline > li {
    position: relative;
    padding-left: 2.6rem;
    padding-bottom: 2.2rem;
}

.timeline > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-raised);
    border: 3px solid var(--accent);
}

.timeline__when {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    display: block;
    margin-bottom: .3rem;
}

.timeline__role { font-size: 1.12rem; margin-bottom: .3rem; }
.timeline__org { font-weight: 600; color: var(--text); }

/* --------------------------------------------------------------------------
   13. Page masthead (inner pages)
   -------------------------------------------------------------------------- */
.masthead {
    background: var(--surface-inverse);
    color: var(--text-inverse);
    padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
}

.masthead::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -5%;
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    background: radial-gradient(circle, rgba(249, 87, 1, .2), transparent 62%);
    pointer-events: none;
}

.masthead > * { position: relative; z-index: 1; }
.masthead h1 { color: var(--text-inverse); margin-bottom: 1rem; }
.masthead .lead-xl { color: var(--text-inverse-muted); }

.breadcrumb-jk {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-inverse-muted);
    margin-bottom: 1.4rem;
}

.breadcrumb-jk a { color: var(--jk-orange-300); text-decoration: none; }
.breadcrumb-jk a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Filter chips (work index)
   -------------------------------------------------------------------------- */
.chipbar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 2.5rem;
}

.chip {
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    padding: .55rem 1.15rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}

.chip:hover { border-color: var(--jk-navy-700); color: var(--text); }

.chip[aria-pressed="true"] {
    background: var(--jk-navy-700);
    border-color: var(--jk-navy-700);
    color: #fff;
}

.is-hidden-filtered { display: none !important; }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 1.3rem; }

.field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .5rem;
}

.field .req { color: var(--accent); }

.form-control,
.form-select {
    width: 100%;
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: .85rem 1.1rem;
    font-family: 'Archivo', sans-serif;
    font-size: 1rem;
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.form-control::placeholder { color: var(--text-subtle); opacity: .75; }

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(249, 87, 1, .16);
}

textarea.form-control { min-height: 150px; resize: vertical; }

.field__hint { font-size: .84rem; color: var(--text-subtle); margin-top: .4rem; }

/* --------------------------------------------------------------------------
   16. Contact detail rows
   -------------------------------------------------------------------------- */
.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--line-inverse);
}

.detail-row:last-child { border-bottom: 0; }

.detail-row__icon {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    color: var(--jk-orange-300);
}

.detail-row__label {
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-inverse-muted);
    margin-bottom: .15rem;
}

.detail-row__value { color: #fff; font-weight: 500; text-decoration: none; }
.detail-row__value:hover { color: var(--jk-orange-300); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.jk-footer {
    background: var(--surface-inverse-deep);
    color: var(--text-inverse-muted);
    padding-block: clamp(3.5rem, 6vw, 5rem) 0;
}

.jk-footer h2, .jk-footer h3, .jk-footer h4 { color: var(--text-inverse); }

.jk-footer__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 1.1rem;
}

.jk-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }

.jk-footer a {
    color: var(--text-inverse-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.jk-footer a:hover { color: var(--jk-orange-300); }

.jk-footer__mark { width: 54px; height: 54px; object-fit: contain; margin-bottom: 1rem; }

.jk-footer__bottom {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--line-inverse);
    padding-block: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: .88rem;
}

.social {
    display: flex;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-inverse);
    color: var(--text-inverse-muted);
    transition: all var(--dur-fast) var(--ease-out);
}

.social a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    background: linear-gradient(135deg, var(--jk-orange) 0%, var(--jk-orange-700) 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: clamp(2.5rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
}

.cta-band::before {
    content: '';
    position: absolute;
    right: -8%;
    top: -60%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .9); }

/* --------------------------------------------------------------------------
   19. Motion — entrance + scroll reveals
   -------------------------------------------------------------------------- */
/*
 * Entrance states are gated behind `.js`, which an inline snippet in <head> sets
 * before first paint. Without scripting the content simply renders — it is never
 * left stranded at opacity 0 by a blocked or broken script.
 */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* hero pieces animate on load rather than on scroll */
.js .hero [data-enter] {
    opacity: 0;
    transform: translateY(26px);
    animation: enter .9s var(--ease-out) forwards;
    animation-delay: var(--enter-delay, 0ms);
}

@keyframes enter {
    to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   20. Accessibility & preferences
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

.section--deep :focus-visible,
.jk-footer :focus-visible,
.masthead :focus-visible { outline-color: var(--jk-orange-300); }

.visually-hidden-jk {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .js [data-reveal] { opacity: 1; transform: none; }
    .js .hero [data-enter] { opacity: 1; transform: none; }
    .creditroll__track { animation: none; }
}

@media (prefers-contrast: more) {
    :root {
        --text-muted: #33405C;
        --line: #A99C86;
        --text-inverse-muted: #D6E1F2;
    }
}

/* --------------------------------------------------------------------------
   21. Responsive refinements
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body { font-size: 1rem; }
    .step { padding-left: 3.4rem; }
    .jk-footer__bottom { justify-content: flex-start; }
    .cta-band { text-align: left; }
}

@media (min-width: 1600px) {
    .container-jk { width: min(100% - 4rem, 1340px); }
}

/* comfortable touch targets on coarse pointers */
@media (pointer: coarse) {
    .jk-navlink { padding-block: .85rem; }
    .btn { --btn-y: .95rem; }
    .work-card__play { opacity: 1; transform: scale(1); }
}

@media print {
    .jk-nav, .jk-footer, .cta-band, .creditroll, .hero__frame { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    body::after { display: none; }
    .section { padding-block: 1rem; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- contact form: feedback and validation ---------- */
.alert-note {
    padding: .85rem 1.05rem; border-radius: 10px; margin: 0 0 1.4rem;
    font-size: .96rem; border: 1px solid transparent;
}

.alert-note--ok { background: #E4F4EC; color: #14603a; border-color: #B7E0C9; }
.alert-note--bad { background: #FDECEC; color: #8d1919; border-color: #F5C2C2; }

.field__error { margin: .35rem 0 0; font-size: .85rem; color: #9B1C1C; }

.form-control[aria-invalid="true"] { border-color: #C64B4B; }

.form-control[aria-invalid="true"]:focus {
    border-color: #C64B4B;
    box-shadow: 0 0 0 3px rgba(198, 75, 75, .18);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.nope {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden;
}