/*
Theme Name: Shift•ology Communication
Theme URI: https://shift-ology.com
Author: Shift•ology / Designed by John
Author URI: https://designedbyjohn.com
Description: Custom, Divi-free theme for Shift•ology Communication. Faithful rebuild of the agency site using clean semantic templates, dynamic CPTs (projects, team, testimonials), ACF and Gravity Forms.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shiftology
*/

/* =============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Brand colors (from original Divi child theme) */
    --magenta:    #DF0366;
    --teal:       #5BBFC6;
    --yellow:     #FCB040;
    --grey:       #808285;

    /* Neutrals */
    --dark:       #1a1a1a;
    --dark-2:     #1a1a1a;
    --dark-3:     #1a1a1a;
    --black:      #1a1a1a;
    --white:      #ffffff;
    --offwhite:   #f4f4f4;
    --ink:        #1a1a1a;
    --body-text:  #333333;

    /* Type — Acumin (Adobe Fonts kit jsy3phh) with strong fallbacks */
    --font-display: "acumin-pro-condensed", "Oswald", "Arial Narrow", sans-serif;
    --font-head:    "acumin-pro", "Montserrat", system-ui, sans-serif;
    --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Layout — single consistent content max-width (section > container > content) */
    --maxw: 1300px;
    --maxw-wide: 1300px;
    --gutter: clamp(20px, 5vw, 60px);
    --section-y: clamp(60px, 9vw, 120px);
    --radius: 6px;
    --header-h: 90px;

    --ease: cubic-bezier(.4,0,.2,1);

    /* film-grain noise overlay (SVG fractal noise) */
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); background: var(--dark); }
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--body-text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: 15px; }
/* Logos are transparent brand marks — never round them */
.site-logo img, .custom-logo, .footer-brand img, .logo-grid img,
.award-grid img, .footer-awards img { border-radius: 0; }
a { color: var(--magenta); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--magenta); }
ul, ol { padding-left: 1.2em; }
button { font-family: inherit; cursor: pointer; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* =============================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); line-height: 1.1; color: var(--ink); font-weight: 700; }

.display {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: .92;
    letter-spacing: .005em;
}
.h-xl { font-size: clamp(3.2rem, 9vw, 7rem); }
.h-lg { font-size: clamp(2.6rem, 6vw, 5rem); }
.h-md { font-size: clamp(2.4rem, 6vw, 5rem); }
.h-sm { font-size: clamp(1.5rem, 3vw, 2.2rem); }

/* two-tone display helpers */
.t-grey    { color: var(--grey); }
.t-magenta { color: var(--magenta); }
.t-yellow  { color: var(--yellow); }
.t-teal    { color: var(--teal); }
.t-white   { color: var(--white); }
.t-dark    { color: var(--ink); }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.7; }
.eyebrow { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--magenta); }

/* =============================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--dark  { background: var(--dark); color: #e9e9e9; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--black { background: var(--black); color: #e9e9e9; }
.section--light { background: var(--white); }
.section--off   { background: var(--offwhite); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 760px; }
.stack > * + * { margin-top: 1.2em; }

.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* =============================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; gap: .5em;
    font-family: var(--font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; font-size: .9rem;
    padding: .85em 1.8em; border-radius: 100px;
    background: var(--yellow); color: var(--black); border: 2px solid var(--yellow);
    transition: all .2s var(--ease);
}
.btn:hover { background: transparent; color: var(--yellow); }
.btn--magenta { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.btn--magenta:hover { background: transparent; color: var(--magenta); }
.btn--teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--teal:hover { background: transparent; color: var(--teal); }
.btn--outline { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--outline.on-dark { color: #fff; }
.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--magenta); }
.link-arrow i { transition: transform .2s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }

/* =============================================================================
   6. HEADER / NAV
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: transparent;
    transition: padding .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header .container-wide { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding-block: 12px; }
/* Transparent over the (dark) hero; solidifies to dark once scrolled. */
.site-header.is-stuck { background: var(--dark); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.site-logo img { max-height: 48px; width: auto; }
.site-logo .wordmark { font-family: var(--font-head); font-weight: 700; color: var(--magenta); font-size: 1.2rem; }

.main-nav > ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.main-nav a { color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a { color: var(--yellow); }
.main-nav li { position: relative; }
.main-nav .menu-item-has-children > a::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .6em; margin-left: .5em; opacity: .8; }
.main-nav .sub-menu {
    position: absolute; top: 100%; left: -16px; min-width: 230px;
    background: var(--white); list-style: none; margin: 0; padding: 10px 0;
    border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,.22);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .2s var(--ease); z-index: 10;
}
.main-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .sub-menu a { display: block; color: var(--ink); padding: 9px 22px; font-weight: 600; font-size: .95rem; }
.main-nav .sub-menu a:hover { color: var(--magenta); background: var(--offwhite); }
.main-nav .sub-menu .menu-item-has-children > a::after { content: "\f054"; float: right; }

.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; }

/* mobile nav */
@media (max-width: 980px) {
    .nav-toggle { display: block; }
    .main-nav {
        position: fixed; inset: var(--header-h) 0 0 auto; width: min(360px, 85vw);
        background: var(--dark-2); transform: translateX(100%);
        transition: transform .3s var(--ease); overflow-y: auto; padding: 20px 26px 60px;
        box-shadow: -20px 0 50px rgba(0,0,0,.4);
    }
    body.nav-open .main-nav { transform: translateX(0); }
    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.08); }
    .main-nav a { display: block; padding: 14px 0; }
    .main-nav .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; background: transparent; padding: 0 0 8px 14px; display: none;
    }
    .main-nav li.open > .sub-menu { display: block; }
    .main-nav .sub-menu a { color: #cfcfcf; padding: 8px 0; }
    .main-nav .sub-menu a:hover { background: transparent; color: var(--yellow); }
    .main-nav .menu-item-has-children > a::after { float: right; }
}

/* =============================================================================
   7. HERO (generic page hero)
   ========================================================================== */
.page-hero { background: var(--dark); color: #fff; text-align: center; padding-block: clamp(80px, 12vw, 150px); }
.page-hero .display { margin-bottom: .35em; }
.page-hero p { color: #cfcfcf; }

/* =============================================================================
   8. ROTATING BADGE (See All Work)
   ========================================================================== */
.spin-badge { position: relative; width: clamp(190px, 22vw, 260px); aspect-ratio: 1; }
.spin-badge .ring { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.spin-badge .ring text { fill: var(--yellow); font-family: var(--font-head); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 17px; }
.spin-badge .core {
    position: absolute; inset: 22%; border-radius: 50%; background: var(--yellow);
    display: grid; place-items: center; text-align: center;
    font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
    color: var(--black); font-size: clamp(1rem, 1.6vw, 1.4rem); line-height: 1; padding: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin-badge .ring { animation: none; } }

/* =============================================================================
   9. CARDS
   ========================================================================== */
.card { background: #fff; border-radius: var(--radius); overflow: hidden; }
.work-card { display: block; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--dark); }
.work-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .5s var(--ease); }
.work-card:hover img { transform: scale(1.05); }
.work-card .work-card__body {
    position: absolute; inset: auto 0 0 0; padding: 22px 24px;
    background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
    color: #fff;
}
.work-card .work-card__cat { display: inline-block; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--yellow); margin-bottom: .3em; }
.work-card .work-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: #fff; }

/* =============================================================================
   10. TEAM
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 34px); }
.team-card { text-align: left; }
.team-card__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: var(--offwhite); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.team-card:hover .team-card__photo img { transform: scale(1.04); }
.team-card h3 { margin: .7em 0 .1em; font-size: 1.15rem; }
.team-card .role { color: var(--grey); font-size: .82rem; line-height: 1.4; }

/* =============================================================================
   11. JOURNEY / TIMELINE
   ========================================================================== */
.timeline { position: relative; max-width: 820px; margin-inline: auto; }
.timeline::before { content: ""; position: absolute; left: 80px; top: 0; bottom: 0; width: 2px; background: #e3e3e3; }
.timeline__item { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 30px; padding-block: 18px; }
.timeline__year { font-family: var(--font-display); font-weight: 800; color: var(--magenta); font-size: 1.4rem; text-align: right; }
.timeline__item::before { content: ""; position: absolute; left: 74px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--yellow); }
.timeline__text { padding-top: 2px; }

/* =============================================================================
   12. TOPIC / FOCUS BANDS
   ========================================================================== */
.band {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: clamp(170px, 24vw, 320px);
    padding: 40px var(--gutter); position: relative; overflow: hidden;
    text-decoration: none; transition: background .3s var(--ease);
}
.band .band__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 5rem); color: #fff; position: relative; z-index: 2; transition: color .3s var(--ease); }
.band .band__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .4s var(--ease); z-index: 1; }
.band:hover .band__bg { opacity: .55; }
.band:hover .band__title { color: #fff; }
.band--magenta { background: var(--magenta); }
.band--yellow  { background: var(--yellow); }
.band--teal    { background: var(--teal); }
.band--dark    { background: var(--dark-2); }
.band--grey    { background: var(--grey); }

/* Big color blocks (focus areas / services) */
.color-block {
    display: grid; place-items: center; text-align: center; min-height: clamp(150px, 18vw, 240px);
    border-radius: var(--radius); color: #fff; padding: 30px; text-decoration: none;
    font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.6rem, 3vw, 2.6rem); transition: transform .25s var(--ease);
}
.color-block:hover { transform: translateY(-4px); color: #fff; }

/* method columns */
.method-col { border-radius: var(--radius); padding: 34px 28px; color: #fff; }
.method-col h3 { color: #fff; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.8rem; margin-bottom: .4em; }
.method-col p { font-size: .95rem; line-height: 1.6; }

/* =============================================================================
   13. ACCORDION / TABS (PR services)
   ========================================================================== */
.accordion__item { border-bottom: 1px solid #e2e2e2; }
.accordion__head {
    width: 100%; text-align: left; background: none; border: 0; padding: 22px 0;
    font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--ink);
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.accordion__head .ico { color: var(--magenta); transition: transform .25s var(--ease); }
.accordion__item.open .accordion__head .ico { transform: rotate(45deg); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.accordion__panel-inner { padding: 0 0 24px; columns: 2; gap: 40px; }
.accordion__panel-inner li { margin-bottom: .4em; }
@media (max-width: 640px){ .accordion__panel-inner { columns: 1; } }

/* =============================================================================
   14. LOGO GRIDS (clients / awards)
   ========================================================================== */
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 2.8vw, 46px); align-items: center; }
.logo-grid img { width: 100%; height: 100px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: all .3s var(--ease); }
.logo-grid a:hover img { filter: none; opacity: 1; }
.award-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.award-grid .award { text-align: center; color: #cfcfcf; }
.award-grid .award img { height: 90px; width: 100%; object-fit: contain; margin-bottom: 14px; }
.award-grid .award span { font-size: .82rem; display: block; line-height: 1.4; }

/* =============================================================================
   15. CTA BLOCK (Let's Chat)
   ========================================================================== */
.cta-chat { background: var(--dark); color: #fff; text-align: center; padding-block: var(--section-y); }
.cta-chat .display { margin-bottom: .3em; }

/* =============================================================================
   16. FORMS (Gravity Forms styling)
   ========================================================================== */
.gform_wrapper { max-width: 760px; margin-inline: auto; }
.gform_wrapper .gfield_label { font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel],
.gform_wrapper textarea, .gform_wrapper select {
    width: 100%; padding: 14px 16px; border: 2px solid #d8d8d8; border-radius: var(--radius);
    font-family: var(--font-body); font-size: 1rem; background: #fff;
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus { outline: none; border-color: var(--magenta); }
.gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_button {
    background: var(--yellow); color: #000; border: 2px solid var(--yellow); font-family: var(--font-head);
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 14px 34px;
    border-radius: 100px; cursor: pointer; transition: all .2s var(--ease);
}
.gform_wrapper .gform_footer input[type=submit]:hover { background: transparent; color: var(--yellow); }

/* =============================================================================
   17. FOOTER
   ========================================================================== */
.site-footer { background: var(--dark); color: #cfcfcf; padding-top: clamp(30px, 4vw, 56px); }
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: var(--yellow); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(24px, 4vw, 60px); }
.footer-brand img { max-width: 220px; margin-bottom: 22px; }
.footer-brand address { font-style: normal; line-height: 1.6; }
.footer-brand address > * { display: block; margin-bottom: 1em; }
.footer-brand address > *:last-child { margin-bottom: 0; }
.footer-col h4 { color: var(--yellow); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; margin-bottom: 1em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .15em; }
.footer-col li a { line-height: 1.35; }
.footer-newsletter h4 { color: var(--teal); }
.social-list { display: flex; gap: 14px; list-style: none; padding: 0; margin: 16px 0 0; }
.social-list a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; }
.social-list a:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.footer-awards { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 60px); padding-block: 40px; margin-top: 50px; border-top: 1px solid rgba(255,255,255,.03); }
.footer-awards img { height: 60px; width: auto; object-fit: contain; opacity: .85; transition: opacity .2s var(--ease); }
.footer-awards a:hover img { opacity: 1; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.03); padding-block: 60px 40px; font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 8px 24px; }
.footer-bottom .footer-partner { font-size: .78rem; }
.footer-bottom .footer-partner a { color: rgba(255,255,255,.4); }
.footer-bottom .footer-partner a:hover { color: var(--yellow); text-decoration: underline; }
.footer-bottom .footer-partner .fa-heart { color: var(--magenta); font-size: .9em; }
@media (max-width: 560px) { .footer-bottom { justify-content: center; text-align: center; } }

/* =============================================================================
   18. SINGLE PROJECT
   ========================================================================== */
.project-hero { background: var(--dark); color: #fff; padding-block: clamp(70px,10vw,130px); text-align: center; }
.project-hero .client { color: var(--yellow); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.w-block { padding-block: clamp(40px, 6vw, 80px); }
.w-block h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem,4vw,3rem); margin-bottom: .4em; }
.w-block .w-letter { color: var(--magenta); }
.project-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; }
.project-gallery img { width: 100%; border-radius: var(--radius); }
.testimonial { background: var(--offwhite); border-left: 5px solid var(--teal); padding: 30px 34px; border-radius: var(--radius); font-size: 1.15rem; font-style: italic; }
.testimonial cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; color: var(--magenta); }

/* =============================================================================
   19. BLOG / GENERIC CONTENT
   ========================================================================== */
.entry-content { max-width: 820px; margin-inline: auto; }
.entry-content h2 { margin: 1.4em 0 .5em; }
.entry-content img { border-radius: var(--radius); margin-block: 1.5em; }
.post-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-card .pad { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; }

/* =============================================================================
   20. MODAL (video / team)
   ========================================================================== */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; place-items: center; z-index: 1000; padding: 20px; }
.modal.open { display: grid; }
.modal__inner { width: min(960px, 100%); }
.modal__inner .ratio { position: relative; padding-top: 56.25%; }
.modal__inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.modal__close { position: absolute; top: 24px; right: 30px; background: none; border: 0; color: #fff; font-size: 2rem; }
.play-bar {
    display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%;
    background: var(--dark-3); color: #fff; padding: 22px; border: 0; border-radius: var(--radius);
    font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .05em;
}
.play-bar:hover { color: var(--yellow); }

/* =============================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .logo-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .award-grid { grid-template-columns: repeat(2, 1fr); }
    .method-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .logo-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr; }
    .timeline::before { left: 60px; }
    .timeline__item { grid-template-columns: 60px 1fr; gap: 18px; }
    .timeline__item::before { left: 54px; }
}

/* CTA row (side-by-side buttons / links) */
.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* "We work with winners" intro — left-aligned to match the live site */
.winners-intro { text-align: left; }
.winners-intro .cta-row { justify-content: flex-start; }

/* Play Video bar — "Play Video ►►►►►" */
.play-bar__arrows { display: inline-flex; gap: .12em; margin-left: .5em; }
.play-bar__arrows i { font-size: .62em; }

/* News section header row (title left, CTA right) */
.news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
@media (max-width: 640px) { .news-header { flex-direction: column; align-items: flex-start; } }

/* Post card meta */
.post-card__date   { font-size: .8rem; color: var(--grey); margin-bottom: .35em; }
.post-card__title  { font-size: 1.1rem; line-height: 1.3; margin-bottom: .5em; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--magenta); }
.post-card__excerpt { font-size: .92rem; color: var(--grey); }
/* circular right-chevron "read more" affordance, pushed to the bottom-right */
.post-card__more {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; margin: auto 0 0 auto;
    background: var(--magenta); color: #fff; font-size: .9rem;
    transition: transform .25s var(--ease-spring), background .2s var(--ease), color .2s var(--ease);
}
.post-card__more:hover { background: var(--ink); color: #fff; transform: translateX(4px); }
.post-card:hover .post-card__more { transform: translateX(4px); }

/* CTA section phone link */
.cta-chat .cta-phone,
.cta-chat .company-phone {
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
}
.cta-chat .cta-phone:hover,
.cta-chat .company-phone:hover { color: var(--yellow); }

/* pause/hide autoplay background video for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .section--dark video[autoplay] { display: none; }
}

/* =============================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */

/* Visually-hidden but screen-reader-accessible (overrides any plugin that sets
   display:none on .screen-reader-text, which axe flags as inaccessible) */
.screen-reader-text,
.sr-only {
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}
.screen-reader-text:focus,
.sr-only:focus {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    position: static !important;
    width: auto !important;
}

/* Keyboard focus ring — visible on keyboard nav, suppressed on mouse/touch */
:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Footer nav links: block display + min tap-target height (WCAG 2.5.8 24px) */
.footer-col a,
.footer-col li a {
    display: block;
    padding-block: .2em;
    min-height: 24px;
}

/* reveal on scroll — only hide when JS is available (progressive enhancement) */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* method columns grid */
.method-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}

/* split hero (about / work) */
.split-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,70px)}
@media(max-width:860px){.split-hero{grid-template-columns:1fr}}

/* vision circles */
.vision-circles{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.vision-circles .circle{width:clamp(150px,15vw,190px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;padding:24px;color:#fff;font-family:var(--font-head);font-weight:700;font-size:.85rem;line-height:1.3}

/* hero with badge layout — single column text, badge overlapping bottom-right */
.hero-home{background:var(--dark);color:#fff;padding-block:clamp(80px,11vw,150px) 0;position:relative}
.hero-home__inner{display:block;position:static}
.hero-home .h-xl{font-size:clamp(3.2rem,9.5vw,8.2rem)}
.hero-home .lead{max-width:680px;margin-top:1.2em;font-size:16px;line-height:1.7}
.hero-home .hero-cta{margin-top:1.7em;padding-bottom:clamp(80px,10vw,140px)}
.hero-home .hero-link{
    display:inline-flex; align-items:center; gap:.5em;
    font-family:var(--font-head); font-weight:700;
    color:#fff; text-decoration:none;
    font-size:1.1rem; text-transform:uppercase; letter-spacing:.05em;
}
.hero-home .hero-link__text{ border-bottom:2px solid currentColor; padding-bottom:3px; }
.hero-home .hero-link i{ font-size:.8em; transition:transform .2s var(--ease-spring); }
.hero-home .hero-link:hover{ color:var(--yellow); }
.hero-home .hero-link:hover i{ transform:translateX(4px); }
/* badge centered ON the hero/why-first boundary (half above, half below) */
.hero-home__inner > div:last-child{
    position:absolute; right:clamp(40px,14vw,220px);
    bottom:calc(clamp(230px,24vw,320px) * -0.5);
    display:block!important; place-items:initial!important; z-index:3;
}
.hero-home .spin-badge{display:block;width:clamp(230px,24vw,320px)}
@media(max-width:980px){
    .hero-home__inner > div:last-child{position:static;display:flex!important;justify-content:center;margin-top:30px;padding-bottom:40px}
    .hero-home .lead{padding-bottom:0}
}

/* this-is-the-shift two col */
.sticky-col{position:sticky;top:120px}
@media(max-width:860px){.sticky-col{position:static}}

/* "This is The Shift" — narrower heading column so the work cards read larger,
   matching the live site's proportions */
.shift-split{grid-template-columns:0.75fr 1.5fr}
.shift-split .work-card img{aspect-ratio:4/3}
.shift-split .work-card__title{font-size:1.3rem}
@media(max-width:860px){.shift-split{grid-template-columns:1fr}}

/* utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.hide-on-mobile{}
@media(max-width:780px){.hide-on-mobile{display:none}}

/* Awards intro — bold statement, 40px (scales down on mobile) */
.awards-statement{ max-width:960px; font-size:clamp(1.5rem,3.4vw,30px); font-weight:600; line-height:1.3; }

/* Why-First — full-width intro, oversized headline (caps at 100px, scales on mobile) */
.why-h2{ font-size:clamp(2.25rem,9vw,100px); }
/* extra bottom room so the overlapping video lands in clear white space below the badges */
.section--rings{ padding-bottom: clamp(150px, 16vw, 230px); }

/* --- Video: rounded, overlaps 20% up into the white section, click opens modal --- */
.video-section{ display:flow-root; padding-top:0; }
.video-embed{
    position:relative; display:block; width:100%; aspect-ratio:16/9;
    margin-top:-11.25%;     /* 11.25% of width == 20% of a 16:9 height */
    padding:0; border:0; background:var(--dark); cursor:pointer;
    border-radius:15px; overflow:hidden;
}
.video-embed video{ width:100%; height:100%; object-fit:cover; }
.video-embed__play{
    position:absolute; inset:0; margin:auto;
    width:clamp(66px,7vw,96px); height:clamp(66px,7vw,96px);
    display:grid; place-items:center; border-radius:50%;
    background:rgba(0,0,0,.55); color:#fff; font-size:clamp(1.3rem,1.8vw,1.7rem);
    padding-left:.12em; /* optically center the play triangle */
    transition:transform .25s var(--ease-spring), background .2s var(--ease);
}
.video-embed:hover .video-embed__play{ transform:scale(1.08); background:var(--magenta); }
.video-embed:focus-visible{ outline:3px solid var(--yellow); outline-offset:4px; }
.why-intro p:not(:last-child){ max-width:980px; font-size:16px; font-weight:500; line-height:1.6; }

/* Credibility badges (Top 5 / Top 10) — text + icon, rebuilt from the flat PNGs.
   Side by side below the Why-First intro, brand teal #00a79c. */
.cred-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,4vw,58px); margin-top:clamp(46px,5vw,76px); }
@media(max-width:680px){ .cred-grid{ grid-template-columns:1fr; } }
.cred{ display:flex; align-items:center; gap:28px; color:var(--ink); text-decoration:none; }
.cred__icon{ color:#00a79c; font-size:clamp(4.8rem,8vw,6.6rem); flex:none; line-height:1; }
.cred__text{ display:flex; flex-direction:column; line-height:1.05; }
.cred__rank{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; color:#00a79c; font-size:clamp(3.4rem,5vw,4.8rem); }
.cred__title{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; color:#00a79c; font-size:clamp(1.55rem,2.2vw,2rem); letter-spacing:.02em; margin-top:.12em; }
.cred__sub{ font-size:1.25rem; color:var(--body-text); margin-top:.4em; line-height:1.3; }
.cred:hover .cred__icon{ transform:translateY(-3px); transition:transform .25s var(--ease-spring); }

/* =============================================================================
   22. REFRESH — bold + fun (no tilt): hero textures, circle frame, springy motion
   Additive layer over the existing design. Same type / color / sizes / structure.
   ========================================================================== */
:root{ --ease-spring: cubic-bezier(.34,1.56,.64,1); }

/* --- Homepage hero: blurred brand "splash" blobs (rings removed from hero) -- */
/* The spin badge intentionally overflows the hero bottom, so DON'T clip the
   hero itself — only the decorative fx layer is clipped. */

/* The dark hero(es) extend up BEHIND the transparent nav: pull them under the
   header and pad the content back down so the hero bg is the nav's backdrop. */
.hero-home, .page-hero, .project-hero, .hero-textured{
    margin-top: calc(-1 * (var(--header-h) + 24px));
    padding-top: calc(var(--header-h) + 24px + clamp(56px,8vw,108px));
}
.hero-fx{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* Gold-diamond texture across the whole hero (over the glow, beneath the copy) */
.hero-home::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:url(assets/img/diamond-pattern-gold.png) center / cover no-repeat;
    opacity:.03;
}
.hero-home::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:var(--noise); background-size:180px 180px; opacity:.07;
}
.hero-fx .blob{ position:absolute; border-radius:50%; filter:blur(72px); }
.hero-fx .blob--magenta{ width:34vw; max-width:460px; aspect-ratio:1; background:var(--magenta); top:-8%; left:-6%; opacity:.30; }
.hero-fx .blob--teal{ width:26vw; max-width:340px; aspect-ratio:1; background:var(--teal); bottom:-6%; right:6%; opacity:.28; }
.hero-fx .blob--yellow{ width:22vw; max-width:300px; aspect-ratio:1; background:var(--yellow); top:34%; right:28%; opacity:.20; }

/* Super-subtle blob drift — miniscule translate + barely-there scale, very slow,
   each blob on its own cycle so the glow feels alive without obvious motion. */
@media (prefers-reduced-motion: no-preference){
    .hero-fx .blob{ will-change:transform; }
    .hero-fx .blob--magenta{ animation: blob-wiggle-a 19s ease-in-out infinite alternate; }
    .hero-fx .blob--teal{ animation: blob-wiggle-b 23s ease-in-out infinite alternate; animation-delay:-7s; }
    .hero-fx .blob--yellow{ animation: blob-wiggle-a 16s ease-in-out infinite alternate; animation-delay:-4s; }
}
@keyframes blob-wiggle-a{
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(8px,-7px,0) scale(1.02); }
}
@keyframes blob-wiggle-b{
    from { transform: translate3d(0,0,0) scale(1.01); }
    to   { transform: translate3d(-7px,6px,0) scale(1); }
}
/* keep hero copy + badge above the fx */
.hero-home__inner > div{ position:relative; z-index:2; }

/* --- Gradient noise / grain over the hero glow ----------------------------- */
/* Fine fractal-noise grain blended over the blurred brand blobs, fading from
   the top so the glow reads as a grainy gradient. Sits above the blobs (z-1)
   but below the copy (z-2). */
.hero-fx::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 100% 100%, 180px 180px;
    mix-blend-mode: soft-light;
    opacity:.13;
}

/* --- Rings texture w/ parallax, below the hero (Why-First section) ---------- */
.section--rings{ position:relative; overflow:hidden; isolation:isolate; }
.section--rings > .container{ position:relative; z-index:2; }
.rings-fx{
    /* full-bleed background for the whole section; extra vertical inset gives
       the parallax room to travel without exposing an edge */
    position:absolute; inset:-20% 0; z-index:0;
    pointer-events:none; opacity:.5;
    background:url(assets/img/circles-frame.png) center center / cover no-repeat;
    will-change:transform;
    transform:translate3d(0, var(--ringY, 0px), 0);
}
@media (prefers-reduced-motion: reduce){
    .rings-fx{ transform:none; }
}

/* --- Internal page heroes inherit the homepage hero treatment --------------
   Dark, with the circle-outline frame hugging the edges and soft brand-color
   splash glows (the same look as .hero-home). Excludes blog/posts via
   .page-hero--plain; .hero-textured opts a custom hero in (e.g. About). */
.page-hero, .project-hero{ position:relative; overflow:hidden; isolation:isolate; }
/* Dark base; the soft glow comes from the .hero-fx blurred blobs (injected by
   main.js), identical to the homepage hero, so it reads organic, not "digital". */
.page-hero:not(.page-hero--plain),
.project-hero,
.hero-textured{
    background-color: var(--dark);
}
/* keep the injected blob layer behind the content (overrides .page-hero > * z-index) */
.page-hero > .hero-fx,
.project-hero > .hero-fx,
.hero-textured > .hero-fx{ position:absolute; inset:0; z-index:0; }
/* yellow diamond pattern (like the homepage hero) */
.page-hero:not(.page-hero--plain)::before,
.project-hero::before,
.hero-textured::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:url(assets/img/diamond-pattern-gold.png) center / cover no-repeat;
    opacity:.03;
}
/* film-grain noise on top */
.page-hero:not(.page-hero--plain)::after,
.project-hero::after,
.hero-textured::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:var(--noise); background-size:180px 180px; opacity:.07;
}
.hero-textured{ position:relative; overflow:hidden; isolation:isolate; }
.page-hero > *, .project-hero > *, .hero-textured > *{ position:relative; z-index:2; }

/* --- Let's Chat + footer read as ONE continuous dark section -----------------
   One gold-diamond texture spans both (anchored to the viewport via
   background-attachment:fixed so it aligns seamlessly across the boundary),
   then masks out — slowly fading to black as it descends through the footer. */
.cta-chat{ padding-bottom: clamp(46px,6vw,80px); }   /* tighten the gap to the footer */
.site-footer{ padding-top: clamp(46px,6vw,80px); }    /* (was --section-y) */
.cta-chat{ position:relative; overflow:hidden; isolation:isolate; }

/* Gold-diamond texture on the Let's Chat section. Full near the top, then a
   soft feather that fades to black through the upper-middle of the section
   (seam raised), gone before the footer. */
.cta-chat::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url(assets/img/diamond-pattern-gold.png) center / cover no-repeat fixed;
    opacity:.04;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 78%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 78%);
}
.cta-chat .container{ position:relative; z-index:2; }

/* --- Springy, upright motion (no rotation) --------------------------------- */
.btn{ transition:transform .25s var(--ease-spring), background .2s var(--ease), color .2s var(--ease); }
.btn:hover{ transform:translateY(-3px) scale(1.03); }

.work-card{ transition:transform .3s var(--ease-spring); }
.work-card:hover{ transform:translateY(-6px); }

.post-card{ transition:transform .3s var(--ease-spring), box-shadow .3s var(--ease); }
.post-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(0,0,0,.12); }

.award-grid .award{ transition:transform .3s var(--ease-spring); }
.award-grid .award:hover{ transform:translateY(-5px); }

.link-arrow:hover{ transform:translateX(2px); transition:transform .2s var(--ease-spring); }

/* bouncier reveal-in */
.js [data-reveal]{ transition:opacity .6s var(--ease), transform .7s var(--ease-spring); }

@media (prefers-reduced-motion: reduce){
    .btn:hover, .work-card:hover, .post-card:hover, .award-grid .award:hover, .link-arrow:hover{ transform:none; }
}

/* =============================================================================
   23. LET'S CHAT (two-column split) + NEWSLETTER band — match reference
   ========================================================================== */
/* --- Let's Chat: headline left, copy + CTAs right -------------------------- */
.cta-chat .chat-split{
    display:grid; grid-template-columns: 1fr 1.05fr;
    gap: clamp(30px, 6vw, 80px); align-items:center; text-align:left;
}
.cta-chat .chat-head .display{ font-size:clamp(3rem, 7vw, 6rem); line-height:.9; margin-bottom:0; }
.cta-chat .chat-body .cta-row{ justify-content:flex-start; margin-top:.4em; }
@media (max-width:860px){
    .cta-chat .chat-split{ grid-template-columns:1fr; gap:22px; }
}

/* phone rendered by [phone] shortcode -> magenta outline button */
.cta-chat .company-phone{
    display:inline-flex; align-items:center;
    font-family:var(--font-head); font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; font-size:.9rem; padding:.85em 1.8em;
    border:2px solid var(--magenta); border-radius:100px;
    color:var(--magenta); background:transparent;
    transition:transform .25s var(--ease-spring), background .2s var(--ease), color .2s var(--ease);
}
.cta-chat .company-phone:hover{ background:var(--magenta); color:#fff; transform:translateY(-3px) scale(1.03); }

/* --- Newsletter column (footer, far right) — teal accents ------------------ */
.footer-newsletter p{ font-size:.92rem; color:#cfcfcf; }
.footer-newsletter .gform_wrapper{ max-width:none; margin-top:1.1em; }
/* stack email + button in the narrow column (override Gravity's grid) */
.footer-newsletter .gform_fields{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }
.footer-newsletter .gfield{ grid-column:1 / -1 !important; max-width:100% !important; margin:0 !important; }
.footer-newsletter input[type=email]{
    background:#000; border:2px solid var(--teal); color:#fff;
    border-radius:8px; padding:14px 18px; font-size:1rem; width:100%;
}
.footer-newsletter input[type=email]::placeholder{
    color:#bdbdbd; text-transform:uppercase; letter-spacing:.08em; opacity:1;
}
.footer-newsletter input[type=email]:focus{ border-color:var(--teal); outline:none; }
.footer-newsletter .gform-button,
.footer-newsletter input[type=submit]{
    background:var(--teal); color:#000; border:2px solid var(--teal);
    border-radius:100px; font-family:var(--font-head); font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; padding:14px 30px; cursor:pointer;
    transition:transform .25s var(--ease-spring), background .2s var(--ease), color .2s var(--ease);
}
.footer-newsletter .gform-button:hover,
.footer-newsletter input[type=submit]:hover{ background:transparent; color:var(--teal); transform:translateY(-2px); }

/* =============================================================================
   24. FULL-BLEED, dialed-down dividers + footer breathing room + Let's Chat split
   ========================================================================== */
/* Footer columns framed by a top border (here) and a bottom border (.footer-awards),
   with generous inner padding so the center section breathes. */
.footer-top{ position:relative; padding-top: clamp(44px,5vw,76px); padding-bottom: clamp(44px,5vw,76px); }
.footer-top::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:100vw; height:1px; background:rgba(255,255,255,.06); pointer-events:none;
}

/* Horizontal dividers span the full viewport width; subtle. */
.footer-awards, .footer-bottom { position:relative; border-top:0; }
.footer-awards{ margin-top:0; }
.footer-awards::before, .footer-bottom::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:100vw; height:1px; background:rgba(255,255,255,.06); pointer-events:none;
}

/* Bring the headline and the copy/CTAs closer together. */
.cta-chat .chat-split{ grid-template-columns: auto 1fr; gap: clamp(26px, 4vw, 56px); }
@media (max-width:860px){ .cta-chat .chat-split{ grid-template-columns:1fr; gap:22px; } }

/* =============================================================================
   25. HERO SCROLL-DOWN CHEVRON (internal pages; injected by main.js)
   ========================================================================== */
.hero-scroll{
    position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
    z-index:3; width:52px; height:52px; border-radius:50%; padding:0;
    display:grid; place-items:center;
    background:transparent; border:2px solid rgba(255,255,255,.45); color:#fff; font-size:1rem;
    cursor:pointer;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
    animation:heroScrollBob 1.8s ease-in-out infinite;
}
.hero-scroll:hover{ background:var(--magenta); border-color:var(--magenta); color:#fff; }
@keyframes heroScrollBob{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%    { transform:translateX(-50%) translateY(7px); }
}
@media (prefers-reduced-motion: reduce){ .hero-scroll{ animation:none; } }

/* =============================================================================
   TEST-ONLY: hero FX toggle panel (bottom-left) + hide rules. Remove before launch.
   ========================================================================== */
.fx-toggle{
    position:fixed; left:18px; bottom:18px; z-index:9999;
    display:flex; flex-direction:column; gap:9px;
    background:rgba(16,16,16,.82); border:1px solid rgba(255,255,255,.12);
    border-radius:16px; padding:12px 14px;
    box-shadow:0 16px 40px rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.fx-toggle__label{
    display:flex; align-items:center; gap:7px;
    color:var(--yellow); font:800 10px/1 var(--font-head);
    text-transform:uppercase; letter-spacing:.14em;
}
.fx-toggle__label::before{
    content:"\f0c3"; /* flask */
    font-family:"Font Awesome 6 Free"; font-weight:900; font-size:11px;
}
.fx-toggle__btns{ display:flex; gap:9px; }
.fx-toggle button{
    display:inline-flex; align-items:center; gap:6px;
    font:700 12px/1 var(--font-head); text-transform:uppercase; letter-spacing:.04em;
    padding:10px 16px; border-radius:100px; cursor:pointer;
    border:2px solid var(--teal); background:var(--teal); color:#0a0a0a;
    box-shadow:0 6px 16px rgba(0,0,0,.4);
    transition:transform .2s var(--ease-spring), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fx-toggle button::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background:#0a0a0a; transition:background .2s var(--ease);
}
.fx-toggle button:hover{ transform:translateY(-2px); }
.fx-toggle button.is-off{
    background:transparent; color:#9a9a9a; border-color:#4a4a4a; box-shadow:none;
}
.fx-toggle button.is-off::before{ background:#4a4a4a; }

/* Blobs off — hides the glow blobs on every hero (home + internal) */
body.fx-no-blobs .hero-fx{ display:none; }
/* Texture off — hides the gold diamond pattern (::before) on every hero */
body.fx-no-texture .hero-home::before,
body.fx-no-texture .page-hero:not(.page-hero--plain)::before,
body.fx-no-texture .project-hero::before,
body.fx-no-texture .hero-textured::before{ display:none; }
/* Noise off — hides the film-grain noise (::after) on every hero */
body.fx-no-noise .hero-home::after,
body.fx-no-noise .page-hero:not(.page-hero--plain)::after,
body.fx-no-noise .project-hero::after,
body.fx-no-noise .hero-textured::after{ display:none; }

/* =============================================================================
   26. ABOUT — "Our Vision" overlapping circles + team-card links
   ========================================================================== */
.vision__grid{ display:grid; grid-template-columns: 0.82fr 1fr; gap: clamp(30px,5vw,72px); align-items:start; }
@media (max-width:860px){ .vision__grid{ grid-template-columns:1fr; gap:40px; } }

.vision__circles{ position:relative; width:100%; max-width:480px; margin-inline:auto; aspect-ratio: 62/100; }
.vcircle{
    position:absolute; border-radius:50%; aspect-ratio:1;
    display:grid; place-items:center; text-align:center; color:#fff;
    container-type:inline-size;
}
/* concentric "ring" outline inside each circle (the overlapping-rings motif) */
.vcircle::before{
    content:""; position:absolute; inset:4%; border-radius:50%;
    border:1.5px solid rgba(255,255,255,.55); pointer-events:none;
}
.vcircle__inner{ display:flex; flex-direction:column; align-items:center; gap:.12em; padding:13%; font-size:6.6cqw; line-height:1.1; }
.vc-reg   { font-family:var(--font-body); font-weight:500; }
.vc-bold  { font-family:var(--font-body); font-weight:800; }
.vc-caps  { text-transform:uppercase; letter-spacing:.02em; }
.vc-serif { font-family:Georgia,'Times New Roman',serif; font-weight:500; }
.vc-italic{ font-style:italic; }
.vc-lg    { font-size:1.7em; line-height:.98; }
.vc-md    { font-size:1.2em; }
.vc-sm    { font-size:.82em; }

.vcircle--magenta{ width:50%; top:1%;  right:4%; background:var(--magenta); z-index:4; }
.vcircle--grey   { width:66%; top:20%; left:1%;  background:var(--grey);    z-index:3; }
.vcircle--yellow { width:47%; top:48%; right:5%; background:var(--yellow);  z-index:2; }
.vcircle--teal   { width:59%; top:64%; left:1%;  background:var(--teal);    z-index:1; }

/* Team cards link to the member's individual page */
.team-card__link{ display:block; color:inherit; text-decoration:none; }
.team-card__link:hover h3{ color:var(--magenta); }
.team-card__social{ margin-top:.4em; }

/* Team member single page */
.team-single{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(30px,5vw,70px); align-items:start; }
@media (max-width:780px){ .team-single{ grid-template-columns:1fr; gap:28px; } }
.team-single__media img{ width:100%; border-radius:var(--radius); }
.team-single__back{ margin-bottom:1.4em; }
.team-single__back a{ font-size:.85rem; }
.team-single__role{ color:var(--magenta); font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:1.05rem; }
.team-single__bio{ color:var(--body-text); }
.team-single .social-list a{ border-color:rgba(0,0,0,.18); color:var(--ink); }
.team-single .social-list a:hover{ background:var(--magenta); border-color:var(--magenta); color:#fff; }

/* Team profile — quote + WHY.os block */
.team-single__quote{ border-left:4px solid var(--teal); padding:6px 0 6px 22px; margin:2.4em 0; font-style:italic; color:var(--ink); font-size:1.05rem; }
.why-os{ border-top:1px solid #ececec; }
.why-os__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,64px); align-items:center; }
@media (max-width:780px){ .why-os__grid{ grid-template-columns:1fr; gap:34px; } }
.why-os__title{ color:var(--magenta); }
.why-os__title :is(b,strong){ color:inherit; }
.why-os__bio{ color:var(--body-text); }
.why-os__bio a{ color:var(--magenta); font-weight:700; }
.why-os__badge{ display:grid; place-items:center; }
.why-os__badge img{ width:clamp(150px,17vw,210px); height:auto; border-radius:0; }

/* Team grid 5-across (bottom of profile) */
.team-grid--5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1024px){ .team-grid--5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .team-grid--5{ grid-template-columns:repeat(2,1fr); } }

/* Contact form on inner pages */
.contact-cta__title{ text-align:center; margin-bottom:.8em; }
.contact-cta .gform_wrapper{ max-width:780px; margin-inline:auto; }

/* Team profiles open on a light section -> give the nav a solid dark bg */
body.team-profile .site-header{ background:var(--dark); }

/* Team grid centered (Winner's Guide — few members) */
.team-grid--center{ grid-template-columns:repeat(auto-fit,minmax(170px,210px)); justify-content:center; }

/* =============================================================================
   27. ABOUT — Journey rail + Vision overlap
   ========================================================================== */
/* Journey: heading + intro left, vertical rail of cards right */
.journey__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:start; }
@media (max-width:860px){ .journey__grid{ grid-template-columns:1fr; gap:34px; } }
.journey__intro .display{ font-size:clamp(3rem,7vw,6rem); line-height:.9; }
.journey__lead{ margin-top:1.4em; color:var(--body-text); max-width:440px; }

.journey__rail{ position:relative; }
.journey__rail::before{ content:""; position:absolute; left:13px; top:14px; bottom:14px; width:2px; background:var(--magenta); }
.rail-item{ position:relative; padding-left:54px; margin-bottom:24px; }
.rail-item:last-child{ margin-bottom:0; }
.rail-dot{ position:absolute; left:0; top:3px; width:28px; height:28px; border-radius:50%; border:2px solid #cfcfcf; background:#fff; }
.rail-card{ position:relative; background:#ececec; border-radius:3px; padding:15px 22px; }
.rail-card::before{ content:""; position:absolute; left:-8px; top:15px; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #ececec; }
.rail-year{ display:block; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1.05rem; margin-bottom:.15em; }
.rail-text{ display:block; color:var(--body-text); font-size:.95rem; line-height:1.5; }

/* Vision: let the circle cluster bleed down into the section below */
.vision{ position:relative; z-index:2; padding-bottom:clamp(50px,6vw,90px); }
.vision__circles{ position:relative; z-index:3; margin-bottom:clamp(-150px,-9vw,-90px); }

/* Sticky intro columns — the heading/copy stays pinned while the circles / rail scroll past. */
@media (min-width:861px){
    .vision__intro,
    .journey__intro{ position:sticky; top:calc(var(--header-h) + 24px); align-self:start; }
}

/* About hero — force the two-tone headline onto exactly two lines */
.about-hero__h1{ font-size:clamp(2rem, 4.3vw, 3.6rem); }
.about-hero__h1 .ln{ display:block; white-space:nowrap; }

/* =============================================================================
   28. Animated process wheel (SVG) + "Not ready yet" gate modal
   ========================================================================== */
.process-wheel{ max-width:560px; margin-inline:auto; }
.process-wheel svg{ width:100%; height:auto; display:block; }
/* segments hidden until the wheel scrolls in, then build up clockwise like the GIF */
.process-wheel .cls-10,.process-wheel .cls-11,.process-wheel .cls-12,.process-wheel .cls-13,.process-wheel .cls-14{ opacity:0; transform-box:view-box; transform-origin:center; }
.process-wheel.in .cls-13{ animation:pw-seg .55s var(--ease) .05s forwards; }
.process-wheel.in .cls-10{ animation:pw-seg .55s var(--ease) .30s forwards; }
.process-wheel.in .cls-14{ animation:pw-seg .55s var(--ease) .55s forwards; }
.process-wheel.in .cls-11{ animation:pw-seg .55s var(--ease) .80s forwards; }
.process-wheel.in .cls-12{ animation:pw-seg .55s var(--ease) 1.05s forwards; }
@keyframes pw-seg{ from{ opacity:0; transform:scale(.55); } to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
    .process-wheel .cls-10,.process-wheel .cls-11,.process-wheel .cls-12,.process-wheel .cls-13,.process-wheel .cls-14{ opacity:1; animation:none; }
}

/* "Not ready yet" modal */
.soon-modal{ position:fixed; inset:0; z-index:1000; display:none; place-items:center; padding:20px; background:rgba(10,10,10,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.soon-modal.open{ display:grid; }
.soon-modal__box{ position:relative; background:#fff; border-radius:12px; padding:clamp(34px,5vw,54px); max-width:460px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.soon-modal__box h3{ color:var(--magenta); font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(2rem,5vw,3rem); line-height:.95; margin-bottom:.35em; }
.soon-modal__box p{ color:var(--body-text); margin-bottom:1.4em; }
.soon-modal__close{ position:absolute; top:8px; right:16px; background:none; border:0; font-size:2rem; line-height:1; color:#bbb; cursor:pointer; }
.soon-modal__close:hover{ color:var(--magenta); }