/* 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; }

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 paper-cutout loop.

   Ten frames is not many, so hard-cutting between them reads as a slideshow no
   matter how fast it runs. Instead two stacked layers cross-fade: while one is
   visible the other jumps forward two frames behind it at zero opacity, so the
   cut is never seen and the eye reads one continuous movement. Opacity animates
   smoothly; position is a separate stepped animation, because a sliding
   background would splice two half-figures together mid-frame.

   Frame 0 holds briefly, the reaction runs, then the smile is held.
--------------------------------------------------------------------------- */
.cg-cutout { position: relative; max-width: 384px; margin-left: auto; margin-right: auto; }
.cg-cutout > i {
    position: absolute; inset: 0; display: block;
    background-image: var(--sprite);
    background-size: 1000% 100%;
    background-repeat: no-repeat;
}
.cg-fA { animation: cg-opA 4s linear infinite, cg-posA 4s steps(1) infinite; }
.cg-fB { animation: cg-opB 4s linear infinite, cg-posB 4s steps(1) infinite; }
.cg-cutout--delay > i { animation-delay: 0.8s, 0.8s; }

@keyframes cg-opA {
  0% { opacity: 1; }
  15% { opacity: 1; }
  18.8889% { opacity: 0; }
  22.7778% { opacity: 1; }
  26.6667% { opacity: 0; }
  30.5556% { opacity: 1; }
  34.4444% { opacity: 0; }
  38.3333% { opacity: 1; }
  42.2222% { opacity: 0; }
  46.1111% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes cg-opB {
  0% { opacity: 0; }
  15% { opacity: 0; }
  18.8889% { opacity: 1; }
  22.7778% { opacity: 0; }
  26.6667% { opacity: 1; }
  30.5556% { opacity: 0; }
  34.4444% { opacity: 1; }
  38.3333% { opacity: 0; }
  42.2222% { opacity: 1; }
  46.1111% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes cg-posA {
  0% { background-position-x: 0%; }
  18.8889% { background-position-x: 22.2222%; }
  26.6667% { background-position-x: 44.4444%; }
  34.4444% { background-position-x: 66.6667%; }
  42.2222% { background-position-x: 88.8889%; }
  100% { background-position-x: 88.8889%; }
}
@keyframes cg-posB {
  0% { background-position-x: 11.1111%; }
  22.7778% { background-position-x: 33.3333%; }
  30.5556% { background-position-x: 55.5556%; }
  38.3333% { background-position-x: 77.7778%; }
  46.1111% { background-position-x: 100%; }
  100% { background-position-x: 100%; }
}

/* ---------------------------------------------------------------------------
   "Step Two: The Page" — the fanned landing pages on How It Works.

   The three frames start stacked square and settle into their fan when the
   band scrolls into view, so the composition assembles itself rather than
   arriving pre-built. Rotations match the handoff exactly once settled.
--------------------------------------------------------------------------- */
.cg-js .cg-fan-a, .cg-js .cg-fan-b, .cg-js .cg-fan-c {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.cg-js .cg-fan-a { transform: rotate(0deg) translate(14%, 6%) scale(0.94); }
.cg-js .cg-fan-c { transform: rotate(0deg) translate(-14%, 6%) scale(0.94); }
.cg-js .cg-fan-b { transform: translateX(-50%) translateY(22px) scale(0.96); }

.cg-fan.is-in .cg-fan-a { opacity: 1; transform: rotate(-7deg); transition-delay: 0.12s; }
.cg-fan.is-in .cg-fan-c { opacity: 1; transform: rotate(6deg); transition-delay: 0.2s; }
.cg-fan.is-in .cg-fan-b { opacity: 1; transform: translateX(-50%); }

/* The centre frame is the live one; lift the whole stack a touch on hover. */
.cg-fan-a, .cg-fan-c { cursor: default; }
.cg-fan.is-in:hover .cg-fan-a { transform: rotate(-9deg) translateX(-2%); }
.cg-fan.is-in:hover .cg-fan-c { transform: rotate(8deg) translateX(2%); }
.cg-fan.is-in:hover .cg-fan-b { transform: translateX(-50%) translateY(-6px); }
/* The showcase film was composited on the old site's dark green backdrop, which
   fights the cream ground. Desaturating drops the green to a neutral dark that
   reads as the ink used elsewhere, and matches the handoff's own art direction
   ("no colour anywhere in the image so orange stays the only voice"). This is a
   holding fix: the real answer is a re-render without the background. */
.cg-fan-video {
    background: var(--ink);
    filter: saturate(0.12) contrast(1.06) brightness(0.94);
}

/* 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) {
    body.cg-ed .cg-head { flex-wrap: wrap; row-gap: 14px; justify-content: space-between; }
    /* Hover cannot open anything on touch, so the dropdown flattens into two
       plain links on its own row. */
    body.cg-ed .cg-nav {
        position: static; transform: none;
        order: 3; width: 100%; gap: 22px;
    }
    body.cg-ed .cg-nav-item { display: flex; align-items: center; gap: 22px; }
    body.cg-ed .cg-caret { display: none; }
    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::before { display: none; }

    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; }

    /* The hero figure sits under the headline instead of beside it. */
    body.cg-ed .cg-hero-figure { min-height: 460px !important; }

    /* The fan becomes the single live frame; the flanking stills would be
       unreadable at this width. */
    .cg-fan { height: 300px !important; }
    .cg-fan-a, .cg-fan-c { display: none; }
    .cg-fan-b { width: 92% !important; }
    .cg-fan.is-in .cg-fan-b { transform: translateX(-50%); }

    /* Vertical spine labels cost too much width on a phone. */
    body.cg-ed [style*="writing-mode:vertical-rl"] {
        writing-mode: horizontal-tb !important;
        transform: none !important;
    }
    body.cg-ed [style*="display:flex"][style*="background:#14100c"] { flex-wrap: wrap; }

    /* 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 .cg-cols4 { grid-template-columns: 1fr !important; }
    /* The chips strip wraps rather than scrolling off the edge. */
    body.cg-ed .cg-chips { flex-wrap: wrap !important; }
    body.cg-ed .cg-chips > span { border-right: 0 !important; }
}

/* 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-fA { opacity: 0 !important; }
    .cg-fB { opacity: 1 !important; background-position-x: 100% !important; }
    .cg-fan-a, .cg-fan-b, .cg-fan-c, .cg-rise { opacity: 1 !important; }
    .cg-fan-a { transform: rotate(-7deg) !important; }
    .cg-fan-c { transform: rotate(6deg) !important; }
    .cg-fan-b { transform: translateX(-50%) !important; }
    .cg-rise { transform: none !important; }
}