/* Creatively Grow — editorial redesign.
   Structure and measured values live inline on the elements, ported from the
   design handoff. This file carries only what inline styles cannot express:
   animation, hover, focus, and the responsive collapse. */

:root {
    --cream: #f9f8eb;
    --ink: #14100c;
    --forest-dark: #0d140d;
    --forest-light: #2d3a2d;
    --sage: #4e5a4e;
    --cream-dim: #b8b8a8;
    --orange: #ef7938;
    --orange-hover: #d96a2d;
}

* { box-sizing: border-box; }

/* The prototype sets display inline on several blocks, which outranks the
   [hidden] attribute's UA rule and left collapsed panels visible. */
body.cg-ed [hidden] { display: none !important; }

body.cg-ed {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

body.cg-ed h1, body.cg-ed h2, body.cg-ed h3, body.cg-ed p { margin: 0; }
body.cg-ed a { color: var(--orange); text-decoration: none; transition: color 0.2s ease; }
body.cg-ed a:hover { color: var(--orange-hover); }
body.cg-ed img, body.cg-ed video { max-width: 100%; }

/* Buttons. The handoff specifies these as brand standard across all pages. */
body.cg-ed a[href="#contact"],
body.cg-ed a[href^="tel:"].cg-btn {
    display: inline-block;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
body.cg-ed a[href="#contact"]:hover {
    background: var(--orange-hover) !important;
    color: var(--ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(239, 121, 56, 0.4) !important;
}
/* The ghost CTA is the one #contact link with a border instead of a fill. */
body.cg-ed a[href="#contact"][style*="border:2px solid"]:hover {
    background: transparent !important;
    border-color: var(--orange) !important;
    color: var(--orange) !important;
    box-shadow: none !important;
}

/* Header navigation. Not in the handoff, which linked the other pages from the
   footer only, leaving a first-time visitor no way across. Centred absolutely
   so it sits dead centre of the bar no matter how wide the logo or phone
   blocks are - space-between would only centre it if both sides matched. */
body.cg-ed .cg-head { position: relative; z-index: 60; background: var(--cream); }
body.cg-ed .cg-nav {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center;
}
body.cg-ed .cg-nav-item { position: relative; }

body.cg-ed .cg-nav a {
    display: block;
    font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.16em; font-size: 11px; color: var(--ink); white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
body.cg-ed .cg-nav-trigger {
    padding-bottom: 3px; border-bottom: 2px solid transparent;
}
body.cg-ed .cg-nav a:hover,
body.cg-ed .cg-nav a[aria-current="page"] { color: var(--orange); }
body.cg-ed .cg-nav-trigger:hover,
body.cg-ed .cg-nav-trigger[aria-current="page"] { border-bottom-color: var(--orange); }

/* The caret is drawn rather than typed so it inherits colour and sits on the
   type baseline instead of riding above it like a glyph would. */
body.cg-ed .cg-caret {
    display: inline-block; width: 0; height: 0; margin-left: 7px;
    vertical-align: middle; position: relative; top: -1px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.2s ease;
}
body.cg-ed .cg-nav-item:hover .cg-caret,
body.cg-ed .cg-nav-item:focus-within .cg-caret { transform: rotate(180deg); }

/* Opens on hover and on keyboard focus. The trigger is a real link, so the
   dropdown is additive: it can never trap someone who cannot open it. */
body.cg-ed .cg-nav-drop {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px);
    margin-top: 10px; padding: 12px 18px;
    background: var(--cream); border: 1px solid var(--ink);
    box-shadow: 0 14px 30px rgba(20, 16, 12, 0.16);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 40;
}
body.cg-ed .cg-nav-item:hover .cg-nav-drop,
body.cg-ed .cg-nav-item:focus-within .cg-nav-drop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Bridges the gap between trigger and panel so the pointer can cross without
   the menu closing under it. */
body.cg-ed .cg-nav-drop::before {
    content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}

/* The condensed mobile bands. Hidden on desktop; below 900px they replace the
   desktop bands, which carry .cg-d. The header, hero, chips and bottom bar are
   NOT duplicated - those are the same markup restyled by the rules below. Only
   the bands whose copy is genuinely shorter in the condensed variant are
   forked, because no amount of CSS shortens a sentence. */
body.cg-ed .cg-m { display: none; }

/* Services strip. The track exists on every width so the markup is identical;
   only the phone animates it, and the duplicate set only renders there. */
body.cg-ed .cg-chips-track { display: flex; flex-wrap: wrap; }
body.cg-ed .cg-chip-clone { display: none; }

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

/* Hamburger + sticky action bar — phone only, per the mobile designs.
   Both are hidden on desktop, where the centred menu does the job. */
body.cg-ed .cg-burger { display: none; }
body.cg-ed .cg-bar { display: none; }

/* ---------------------------------------------------------------------------
   The paper-cutout loop.

   Deliberately hard cuts, one frame to the next, because that is what makes it
   read as stop motion. Cross-fading the frames was tried and reverted: blending
   two frames shows both at once, which looks like flashing rather than movement.

   steps(1) on every keyframe is what produces the hold. A single steps(10)
   across the whole animation gives even timing and the smile flashes past. With
   percentage background-position, plain steps(n) lands between frames and
   splices two half-figures together, hence the explicit per-frame keyframes.

   Frame 0 holds briefly, the reaction runs, then the smile is held.
--------------------------------------------------------------------------- */
.cg-cutout { max-width: 384px; margin-left: auto; margin-right: auto; }

@keyframes cg-flip {
    0%    { background-position-x: 0%;       animation-timing-function: steps(1); }
    18%   { background-position-x: 11.1111%; animation-timing-function: steps(1); }
    20.4% { background-position-x: 22.2222%; animation-timing-function: steps(1); }
    22.8% { background-position-x: 33.3333%; animation-timing-function: steps(1); }
    25.2% { background-position-x: 44.4444%; animation-timing-function: steps(1); }
    27.6% { background-position-x: 55.5556%; animation-timing-function: steps(1); }
    30%   { background-position-x: 66.6667%; animation-timing-function: steps(1); }
    32.4% { background-position-x: 77.7778%; animation-timing-function: steps(1); }
    34.8% { background-position-x: 88.8889%; animation-timing-function: steps(1); }
    37.2% { background-position-x: 100%;     animation-timing-function: steps(1); }
    100%  { background-position-x: 100%; }
}

/* ---------------------------------------------------------------------------
   "Step Two: The Page" — the showcase film.

   The film is generated on the same cream as the page, so it has no edge of its
   own; it simply sits on the paper. The mask feathers the outermost few percent
   so the small tone difference between the render and the page never draws a
   rectangle. No frame, border or shadow here on purpose - the handoff's fan of
   three static screenshots was replaced because the film already is a fan of
   three, and stacking one inside the other read as clutter.
--------------------------------------------------------------------------- */
.cg-fan {
    position: relative;
    aspect-ratio: 1200 / 656;
    /* No cap: the film fills its column. The 620px cap left it floating in
       nearly 500px of empty space and reading small. */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.cg-fan-video {
    width: 100%; height: 100%; display: block;
    object-fit: contain;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-composite: intersect;
}

/* Give the film more of the band than the handoff's 1fr 1.15fr split, so it
   carries the section rather than sitting beside it. Copy still has a
   comfortable measure at this ratio. */
@media (min-width: 901px) {
    body.cg-ed .cg-page-band { grid-template-columns: 1fr 2.1fr !important; }
    /* Let the film run out to the band's edge, reclaiming the gutter it was
       sitting inside. */
    body.cg-ed .cg-page-band .cg-fan {
        margin-right: calc(-1 * clamp(18px, 2.8vw, 40px));
    }
}

/* On a phone the film goes edge to edge - the gutter was the only thing left
   making it small once the band had stacked. The band's own gap is trimmed too,
   so the copy sits close to the film rather than across a field of cream. */
@media (max-width: 900px) {
    body.cg-ed .cg-page-band {
        gap: 14px !important;
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }
    body.cg-ed .cg-page-band .cg-fan {
        margin-left: calc(-1 * clamp(18px, 2.8vw, 40px));
        margin-right: calc(-1 * clamp(18px, 2.8vw, 40px));
        margin-bottom: -6px;
        width: auto;
    }
}

/* The decorative corner triangle sits behind this note, and the note's ink text
   over black is simply invisible - the last words disappeared rather than being
   clipped. Hold the text clear of the triangle instead of restyling either. */
body.cg-ed .cg-cornernote { padding-right: 132px; }

/* The desktop figure. Capped at 384px it read small against a 112px headline;
   the column is nearly twice that wide. The header now owns a stacking order,
   so she can run tall behind it the way the prototype had her. */
@media (min-width: 901px) {
    body.cg-ed .cg-cutout { max-width: 520px; }
}

/* Services page — draft-copy badge. The dashed border is the only dashed
   border in the system and exists solely to mark unfinished copy; remove the
   badge when real copy lands rather than restyling it. */
body.cg-ed .cg-draft {
    display: inline-block; align-self: flex-start;
    border: 1px dashed var(--ink); border-radius: 999px;
    padding: 8px 16px;
    font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.16em; font-size: 11px; color: var(--ink);
}

/* Services hero "list" on mobile: decorative pills, not a scroller and not
   links - deliberately distinct markup from .cg-chips so the homepage's
   auto-scroll marquee never attaches here. */
body.cg-ed .cg-svc-chips span {
    border: 1px solid rgba(20, 16, 12, 0.5); border-radius: 999px;
    padding: 7px 13px;
    font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 11px; color: var(--ink);
}

/* Services mobile accordion. One row open at a time; Local SEO starts open. */
body.cg-ed .cg-acc-row.is-open > button { background: rgba(239, 121, 56, 0.08); }
body.cg-ed .cg-acc-sign { transition: none; }

/* Contact modal. Structure keeps radius 0 per the design; only the button and
   the inputs are allowed their pill and 8px. */
body.cg-ed .cg-modal[hidden] { display: none !important; }
body.cg-ed .cg-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
body.cg-ed .cg-modal-scrim {
    position: absolute; inset: 0;
    background: rgba(20, 16, 12, 0.72);
    backdrop-filter: blur(3px);
    animation: cg-fade 0.18s ease;
}
body.cg-ed .cg-modal-box {
    position: relative;
    width: 100%; max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--ink);
    border: 2px solid var(--orange);
    padding: 26px 24px 24px;
    animation: cg-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cg-ed .cg-modal-x {
    position: absolute; top: 6px; right: 8px;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
    color: var(--cream-dim); font-size: 30px; line-height: 1;
}
body.cg-ed .cg-modal-x:hover { color: var(--orange); }
@keyframes cg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-pop {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
/* The page must not scroll behind the dialog. */
body.cg-ed.cg-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    body.cg-ed .cg-modal-scrim, body.cg-ed .cg-modal-box { animation: none !important; }
}

/* Contact form. Focus state is the brand standard from the handoff: the
   border is replaced by a 2px orange outline. */
body.cg-ed .cg-field {
    width: 100%; padding: 0 14px; color: var(--cream);
    font-family: 'Inter', sans-serif; font-size: 15px;
}
body.cg-ed .cg-field::placeholder { color: rgba(184, 184, 168, 0.5); }
body.cg-ed .cg-field:focus {
    outline: 2px solid var(--orange); outline-offset: 0; border-color: transparent;
}
body.cg-ed .cg-submit { transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
body.cg-ed .cg-submit:hover:not(:disabled) {
    background: var(--orange-hover); transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(239, 121, 56, 0.4);
}
body.cg-ed .cg-submit:disabled { opacity: 0.7; cursor: default; }
body.cg-ed .cg-success[hidden] { display: none; }
body.cg-ed .cg-success { padding: 8px 0; }

/* Film cards on Brand Films */
.cg-film-card img { transition: transform 0.4s ease, opacity 0.3s ease; }
.cg-film-card:hover img { transform: scale(1.03); }
.cg-film-card button { transition: color 0.2s ease, border-color 0.2s ease; }
.cg-film-card button:hover { color: var(--orange-hover) !important; border-color: var(--orange-hover) !important; }
.cg-film-card.is-playing img { opacity: 0.55; }

/* Sections fade up as they arrive. Subtle: this is an editorial layout, not a
   slideshow, so it is a short move and it only ever runs once. */
.cg-js .cg-rise { opacity: 0; transform: translateY(18px); }
.cg-js .cg-rise.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   Responsive. The prototypes are desktop-only at 1440px; display sizes already
   scale by viewport through clamp() on the elements. What is left is stacking
   the multi-column bands and unwinding the pieces that assume side-by-side.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Hover cannot open a dropdown on touch, so the menu becomes a panel
       behind a hamburger, matching the mobile designs. */
    body.cg-ed .cg-head {
        position: sticky; top: 0; justify-content: space-between;
        padding: 10px clamp(18px, 2.8vw, 40px) !important;
        background: rgba(249, 248, 235, 0.94);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(20, 16, 12, 0.15);
    }

    body.cg-ed .cg-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 0 8px;
        background: none; border: 0; cursor: pointer;
    }
    body.cg-ed .cg-burger > span {
        display: block; height: 2px; width: 100%; background: var(--ink);
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    /* Third bar is the accent, per the design. */
    body.cg-ed .cg-burger > span:nth-child(3) { background: var(--orange); }
    body.cg-ed .cg-head.is-open .cg-burger > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.cg-ed .cg-head.is-open .cg-burger > span:nth-child(2) { opacity: 0; }
    body.cg-ed .cg-head.is-open .cg-burger > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    body.cg-ed .cg-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        transform: none; display: block;
        background: var(--ink);
        border-bottom: 2px solid var(--orange);
        padding: 0 clamp(18px, 2.8vw, 40px);
        max-height: 0; overflow: hidden;
        transition: max-height 0.28s ease, padding 0.28s ease;
    }
    body.cg-ed .cg-head.is-open .cg-nav { max-height: 60vh; padding: 6px clamp(18px, 2.8vw, 40px) 18px; }

    body.cg-ed .cg-nav-item { display: block; }
    body.cg-ed .cg-caret { display: none; }
    body.cg-ed .cg-nav a {
        padding: 13px 0; font-size: 13px; letter-spacing: 0.14em;
        color: var(--cream);
        border-bottom: 1px solid var(--forest-light);
    }
    body.cg-ed .cg-nav a:hover, body.cg-ed .cg-nav a[aria-current="page"] { color: var(--orange); }
    body.cg-ed .cg-nav-drop {
        position: static; transform: none; opacity: 1; visibility: visible;
        pointer-events: auto; margin: 0; padding: 0;
        background: none; border: 0; box-shadow: none;
    }
    body.cg-ed .cg-nav-drop a { border-bottom: 0; }
    body.cg-ed .cg-nav-drop::before { display: none; }

    /* Sticky action bar. Keeps the phone number and the page's own primary
       call to action reachable without scrolling back. */
    body.cg-ed .cg-bar {
        display: grid; grid-template-columns: 1fr 1.25fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        border-top: 2px solid var(--ink);
    }
    body.cg-ed .cg-bar a {
        display: flex; align-items: center; justify-content: center;
        min-height: 44px;
        padding: 15px 10px calc(15px + env(safe-area-inset-bottom));
        text-align: center;
        font-family: 'Oswald', sans-serif; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
    }
    body.cg-ed .cg-bar-call { background: var(--ink); color: var(--cream); }
    body.cg-ed .cg-bar-cta { background: var(--orange); color: var(--ink); }
    /* Clear the bar so it never covers the last line of the footer. */
    body.cg-ed { padding-bottom: 76px; }

    /* Touch has no hover, so presses need their own feedback. */
    body.cg-ed a[href="#contact"]:active,
    body.cg-ed .cg-bar a:active,
    body.cg-ed .cg-submit:active,
    body.cg-ed .cg-dl:active { opacity: 0.9; transform: scale(1.02); }
    body.cg-ed a, body.cg-ed button { -webkit-tap-highlight-color: transparent; }

    body.cg-ed .cg-cols { grid-template-columns: 1fr !important; }
    body.cg-ed .cg-cols4 { grid-template-columns: 1fr 1fr !important; }

    /* Hairlines that divided columns now divide rows. */
    body.cg-ed .cg-cols > div[style*="border-right"] { border-right: 0 !important; }

    /* Stacked, the figure sits under the headline. Its column aligns children
       to the bottom, so a cutout taller than the column does not clip - it
       escapes upwards over the copy above. Cap the figure and give the columns
       room for it rather than letting it climb into the button. */
    body.cg-ed [style*="min-height:420px"] { min-height: 470px !important; }


    /* The vertical spine becomes a full-width orange bar above its band, as
       drawn. Turning the label horizontal is not enough on its own - the band
       is a flex row, so the spine has to stop being a column first. */
    body.cg-ed [style*="writing-mode:vertical-rl"] {
        writing-mode: horizontal-tb !important;
        transform: none !important;
    }
    body.cg-ed .cg-spine-band { flex-direction: column; }
    body.cg-ed .cg-spine {
        justify-content: flex-start !important;
        padding: 13px clamp(18px, 2.8vw, 40px) !important;
    }
    body.cg-ed .cg-spine-band > div:last-child { padding: 26px clamp(18px, 2.8vw, 40px) !important; }

    /* Under the player: the counter sits above the title, both left aligned. */
    body.cg-ed .cg-nowcap {
        flex-direction: column-reverse;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    body.cg-ed .cg-m { display: block; }
    body.cg-ed .cg-d { display: none !important; }

    /* Hero, condensed variant. One 500px stage instead of a 1,100px stack:
       the headline sits over the orange block, the figure behind it, and the
       lede and CTA ride a dark overlay across the bottom. Same DOM as desktop -
       display:contents frees the left column's children to be placed. */
    body.cg-ed .cg-hero-band {
        display: block !important;
        position: relative;
        height: 500px;
        overflow: hidden;
    }
    /* !important: the column carries display:flex inline, which would win. */
    body.cg-ed .cg-hero-left { display: contents !important; }

    /* The phone-ring badge. Unpositioned it would sit in normal flow and get
       painted over by the absolutely-positioned hero figure, so it needs its
       own stacking spot above the headline, same trick as the h1 below. */
    body.cg-ed .cg-hero-left > span {
        position: absolute; left: 20px; top: 16px; z-index: 3;
        font-size: 11px !important; padding: 6px 12px !important;
    }

    body.cg-ed .cg-hero-left > h1 {
        position: absolute; left: 20px; right: 20px; top: 48px; z-index: 2;
        font-size: 50px !important; line-height: 0.86; padding: 0 !important;
        /* The headline crosses both cream and orange; the glow keeps it legible
           over the join without introducing a second type colour. */
        text-shadow: 0 2px 12px rgba(249, 248, 235, 0.55);
    }
    /* All three lines are ink here - the accent line is a desktop treatment. */
    body.cg-ed .cg-hero-left > h1 span { color: var(--ink) !important; }
    /* Desktop breaks "Get more / calls." across two lines; the condensed hero
       keeps it on one, so the inner break is suppressed rather than the copy
       being changed. */
    body.cg-ed .cg-hero-left > h1 span br { display: none; }

    body.cg-ed .cg-hero-figure {
        position: absolute !important; inset: 0;
        min-height: 0 !important;
    }
    body.cg-ed .cg-hero-figure > div:nth-child(1) { width: 66% !important; height: 50% !important; }
    body.cg-ed .cg-hero-figure > div:nth-child(2) {
        left: 4% !important; right: 4% !important;
        top: 140px !important; bottom: 126px !important;
    }
    /* The nameplate is not in the condensed hero. */
    body.cg-ed .cg-hero-figure > div:nth-child(3) { display: none !important; }
    /* Height-driven here, so the figure fits the stage exactly. Scoped to the
       homepage's condensed hero specifically - .cg-cutout is shared site-wide
       (Services' call-cutout also uses it), and this !important rule would
       otherwise clobber its explicit width on that page. */
    body.cg-ed .cg-hero-figure .cg-cutout {
        height: 100% !important; width: auto !important; max-width: none !important;
    }

    body.cg-ed .cg-hero-left > div {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
        background: rgba(20, 16, 12, 0.92);
        backdrop-filter: blur(6px);
        padding: 18px 20px 20px !important;
        gap: 14px !important;
    }
    body.cg-ed .cg-hero-left > div > span:first-child { display: none !important; }
    body.cg-ed .cg-hero-left > div > p:first-of-type {
        font-size: 14px !important; line-height: 1.55 !important;
        color: var(--cream) !important; max-width: none !important;
    }
    body.cg-ed .cg-hero-left > div > p:last-of-type { display: none !important; }
    body.cg-ed .cg-hero-left > div > a[href="#contact"] {
        align-self: stretch !important; text-align: center;
        font-size: 16px !important; padding: 15px !important;
    }

    /* Decorative corner triangles overflow small panels. */
    body.cg-ed [style*="border-bottom:120px solid"],
    body.cg-ed [style*="border-bottom:130px solid"] { display: none; }
}

@media (max-width: 620px) {
    body.cg-ed [style*="min-height:420px"] { min-height: 420px !important; }
    /* The reel stays two-up; one-up made the page endless. */
    body.cg-ed .cg-cols4 { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    /* One of the two intentional scrollers: the chips run off the edge rather
       than wrapping to three rows. */
    body.cg-ed .cg-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.cg-ed .cg-chips::-webkit-scrollbar { display: none; }
    /* The condensed band's triangle is smaller, so the clearance is too. */
    body.cg-ed .cg-cornernote { padding-right: 78px; }
    /* Auto-scrolling, so the strip is no longer a manual scroller. */
    body.cg-ed .cg-chips { overflow-x: hidden; }
    body.cg-ed .cg-chips-track {
        flex-wrap: nowrap;
        flex: none;
        animation: cg-marquee 45s linear infinite;
        will-change: transform;
    }
    body.cg-ed .cg-chip-clone { display: block; }
    /* Hold it still while it is being read or touched. */
    body.cg-ed .cg-chips:hover .cg-chips-track,
    body.cg-ed .cg-chips:active .cg-chips-track { animation-play-state: paused; }
    body.cg-ed .cg-chips > span {
        flex: none; white-space: nowrap;
        font-size: 10px !important; padding: 10px 14px !important;
        border-right: 1px solid rgba(20, 16, 12, 0.15);
        border-bottom: 0;
    }
}

/* Respect the system setting: hold the last frame, drop every motion. */
@media (prefers-reduced-motion: reduce) {
    body.cg-ed *, body.cg-ed *::before, body.cg-ed *::after {
        animation: none !important;
        transition: none !important;
    }
    .cg-cutout { background-position-x: 100% !important; }
    /* No drift; the strip goes back to being swipeable instead. */
    .cg-chips-track { animation: none !important; transform: none !important; }
    .cg-chip-clone { display: none !important; }
    body.cg-ed .cg-chips { overflow-x: auto !important; }
    .cg-rise { opacity: 1 !important; }
    .cg-rise { transform: none !important; }
}