/* ==========================================================================
   Our Process Page (op-page)
   Same brand palette/type as the rest of the site
   (navy / gold / white, from variables.css) — its
   own layout language lives here, isolated from
   the other page stylesheets so no other page is
   touched.
   ========================================================================== */

/* ==========================================
   HERO — full-bleed photo, given a navy/gold
   duotone grade so it reads as branded rather than
   raw stock color, with a warm glow breathing right
   where the two people's hands meet over the
   binder — the literal moment the headline is
   describing.
========================================== */

.op-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:120px 0 76px;

}
.op-hero__media{

    position:absolute;

    top:-5%;

    bottom:-5%;

    left:20%;

    right:-5%;

    z-index:0;

    overflow:hidden;

}
.op-hero__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:68% 44%;

    filter:grayscale(.2) contrast(1.08) saturate(1.05);

    animation:opHeroZoom 38s ease-in-out infinite alternate;

    will-change:transform;

}
.op-hero__duotone{

    position:absolute;

    inset:0;

    background:

        linear-gradient(135deg, rgba(8,21,45,.5) 0%, rgba(8,21,45,.1) 55%),

        linear-gradient(320deg, rgba(216,177,75,.24) 0%, rgba(216,177,75,0) 50%);

    mix-blend-mode:color;

    pointer-events:none;

}
.op-hero__scrim{

    position:absolute;

    inset:0;

    z-index:0;

    background:linear-gradient(180deg, rgba(8,21,45,.5) 0%, rgba(8,21,45,.05) 22%, rgba(8,21,45,.05) 70%, rgba(8,21,45,.55) 100%);

}
.op-hero__glow{

    position:absolute;

    left:53%;

    top:80%;

    z-index:0;

    width:360px;

    height:360px;

    transform:translate(-50%, -50%) scale(1);

    border-radius:50%;

    background:radial-gradient(circle, rgba(216,177,75,.4) 0%, rgba(216,177,75,.14) 42%, rgba(216,177,75,0) 72%);

    mix-blend-mode:screen;

    pointer-events:none;

    animation:opGlowPulse 6.5s ease-in-out infinite;

}
.op-hero__grain{

    position:absolute;

    inset:0;

    z-index:0;

    opacity:.05;

    mix-blend-mode:overlay;

    pointer-events:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}
.op-hero__inner{

    position:relative;

    z-index:1;

    text-align:left;

    transform:translateY(-70px);

}
.op-hero__card{

    max-width:500px;

    margin:0;

    background:rgba(8,21,45,.5);

    backdrop-filter:blur(22px) saturate(140%);

    -webkit-backdrop-filter:blur(22px) saturate(140%);

    border:1px solid rgba(255,255,255,.14);

    border-radius:var(--radius-lg);

    box-shadow:0 40px 70px -20px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;

    padding:38px 48px;

    opacity:0;

    animation:opCardIn .5s ease-out forwards, opCardFloat 6s ease-in-out 1.3s infinite;

}
.op-hero__tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--color-gold);

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:26px;

}
.op-hero__tag::before,
.op-hero__tag::after{

    content:"";

    width:28px;

    height:1px;

    background:linear-gradient(90deg, rgba(216,177,75,0), var(--color-gold));

}
.op-hero__tag::after{

    background:linear-gradient(90deg, var(--color-gold), rgba(216,177,75,0));

}
.op-hero__card h1{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.2vw, 2.9rem);

    line-height:1.26;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:22px;

}
.op-hero__card h1 em{

    font-style:italic;

    color:var(--color-gold);

}
.op-hero__lede{

    font-size:1.02rem;

    line-height:1.7;

    color:var(--color-text);

    margin:0 0 14px;

}
.op-hero__punch{

    font-family:var(--font-heading);

    font-style:italic;

    font-weight:600;

    font-size:1.3rem;

    line-height:1.5;

    color:var(--color-gold-hover);

    margin:0 0 26px;

}
.op-hero .hero__buttons{

    justify-content:flex-start;

}
.op-hero__tag,
.op-hero__card h1,
.op-hero__lede,
.op-hero__punch,
.op-hero .hero__buttons{

    opacity:0;

    animation:opHeroFadeUp .85s cubic-bezier(.22,.68,0,1) forwards;

}
.op-hero__tag{ animation-delay:.15s; }
.op-hero__card h1{ animation-delay:.32s; }
.op-hero__lede{ animation-delay:.5s; }
.op-hero__punch{ animation-delay:.64s; }
.op-hero .hero__buttons{ animation-delay:.78s; }

.op-hero__scrollcue{

    position:absolute;

    left:50%;

    bottom:32px;

    z-index:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:rgba(255,255,255,.55);

    font-size:.68rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    transform:translateX(-50%);

    opacity:0;

    animation:opHeroFadeUp .8s cubic-bezier(.22,.68,0,1) forwards;

    animation-delay:1.05s;

}
.op-hero__scrollcue svg{

    width:16px;

    height:16px;

    animation:opHeroBob 2.2s ease-in-out infinite;

}
@keyframes opCardIn{

    from{ opacity:0; transform:translateY(10px); }

    to{ opacity:1; transform:translateY(0); }

}
@keyframes opCardFloat{

    0%, 100%{ transform:translateY(0); }

    50%{ transform:translateY(-10px); }

}
@keyframes opHeroZoom{

    from{ transform:scale(1); }

    to{ transform:scale(1.08); }

}
@keyframes opGlowPulse{

    0%, 100%{ opacity:.55; transform:translate(-50%, -50%) scale(1); }

    50%{ opacity:1; transform:translate(-50%, -50%) scale(1.18); }

}
@keyframes opHeroFadeUp{

    from{ opacity:0; transform:translateY(20px); }

    to{ opacity:1; transform:translateY(0); }

}
@keyframes opHeroBob{

    0%, 100%{ transform:translateY(0); }

    50%{ transform:translateY(6px); }

}
/* ==========================================
   SHARED — small eyebrow tag reused across the
   page's sections (gold line-flourish, matching
   the hero's tag style).
========================================== */

.op-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--color-gold);

    letter-spacing:2.6px;

    font-size:.8rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:22px;

}
.op-tag i{

    display:block;

    width:26px;

    height:1px;

    background:linear-gradient(90deg, rgba(216,177,75,0), var(--color-gold));

}
.op-tag i:last-child{

    background:linear-gradient(90deg, var(--color-gold), rgba(216,177,75,0));

}

/* ==========================================
   DISCOVERY — the full questionnaire, not the
   trimmed-down version. Centered statement up top,
   the nine real questions in a scannable two-column
   grid, then the "no right answer" quote and
   callout sitting side by side as the payoff.
========================================== */

.op-discovery{

    background:var(--color-white);

    padding:var(--space-3xl) 0;

}
.op-discovery__head{

    max-width:720px;

    margin:0 auto;

    text-align:center;

}
.op-discovery__head h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.4vw, 2.7rem);

    line-height:1.28;

    letter-spacing:-.5px;

    color:var(--color-background);

}
.op-discovery__head p{

    margin-top:18px;

    font-size:1.06rem;

    line-height:1.8;

    color:rgba(8,21,45,.66);

}
.op-discovery__lead{

    max-width:720px;

    margin:40px auto 22px;

    font-weight:700;

    color:var(--color-background);

}
.op-discovery__questions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0 48px;

    max-width:980px;

    margin:0 auto;

}
.op-discovery__q{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:16px 0;

    border-top:1px solid rgba(8,21,45,.08);

}
.op-discovery__q svg{

    flex:none;

    width:16px;

    height:16px;

    margin-top:2px;

    color:var(--color-gold-hover);

}
.op-discovery__q span{

    font-size:1rem;

    line-height:1.5;

    color:rgba(8,21,45,.8);

}
.op-discovery__bottom{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:32px;

    max-width:980px;

    margin:52px auto 0;

    align-items:stretch;

}
.op-discovery__quote{

    background:rgba(8,21,45,.03);

    border:1px solid rgba(8,21,45,.08);

    border-radius:var(--radius-lg);

    padding:30px 32px;

}
.op-discovery__quote-lead{

    font-size:.92rem;

    color:rgba(8,21,45,.55);

    margin-bottom:12px;

}
.op-discovery__quote blockquote{

    font-family:var(--font-heading);

    font-style:italic;

    font-weight:600;

    font-size:1.2rem;

    line-height:1.5;

    color:var(--color-background);

    margin:0;

}
.op-discovery__quote-note{

    margin-top:14px;

    font-size:.92rem;

    color:rgba(8,21,45,.55);

}
.op-discovery__callout{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:8px;

    background:rgba(216,177,75,.08);

    border-left:3px solid var(--color-gold);

    border-radius:0 var(--radius-md) var(--radius-md) 0;

    padding:28px 30px;

}
.op-discovery__callout strong{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:1.2rem;

    color:var(--color-background);

}
.op-discovery__callout span{

    font-size:.98rem;

    line-height:1.6;

    color:rgba(8,21,45,.66);

}
@media (max-width:800px){

    .op-discovery__questions,
    .op-discovery__bottom{ grid-template-columns:1fr; }

    .op-ongoing__chain{ justify-content:flex-start; }

}

/* ==========================================
   HOMEWORK — the copy and the four research
   tiles both live ON the photo as glass panels,
   instead of a photo column next to a card grid.
   The card sits over the quiet window/skyline
   corner; the tiles rest along the desk at the
   bottom, right in front of the laptop, like
   readouts pulled from the screen next to them.
========================================== */

.op-homework{

    background:var(--color-background);

    padding:var(--space-3xl) 0;

}
.op-homework__panel{

    position:relative;

    min-height:680px;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-card);

}
.op-homework__media{

    position:absolute;

    inset:0;

}
.op-homework__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 42%;

    animation:opHomeworkZoom 30s ease-in-out infinite alternate;

    will-change:transform;

}
.op-homework__scrim{

    position:absolute;

    inset:0;

    background:

        linear-gradient(115deg, rgba(8,21,45,.72) 0%, rgba(8,21,45,.28) 42%, rgba(8,21,45,.05) 62%),

        linear-gradient(0deg, rgba(8,21,45,.75) 0%, rgba(8,21,45,.05) 30%);

}
.op-homework__glow{

    position:absolute;

    left:63%;

    top:44%;

    width:280px;

    height:280px;

    transform:translate(-50%, -50%);

    border-radius:50%;

    background:radial-gradient(circle, rgba(140,190,255,.35) 0%, rgba(140,190,255,.1) 42%, rgba(140,190,255,0) 72%);

    mix-blend-mode:screen;

    pointer-events:none;

    animation:opGlowPulse 7s ease-in-out infinite;

}
.op-homework__card{

    position:absolute;

    top:44px;

    left:44px;

    right:44px;

    max-width:440px;

    background:rgba(8,21,45,.5);

    backdrop-filter:blur(20px) saturate(140%);

    -webkit-backdrop-filter:blur(20px) saturate(140%);

    border:1px solid rgba(255,255,255,.14);

    border-radius:var(--radius-lg);

    box-shadow:0 30px 60px -18px rgba(0,0,0,.5);

    padding:32px 34px;

}
.op-homework__card .op-tag{

    margin-bottom:16px;

}
.op-homework__card h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(1.7rem, 2.6vw, 2.2rem);

    line-height:1.28;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:14px;

}
.op-homework__card p{

    font-size:.98rem;

    line-height:1.7;

    color:var(--color-text);

}
.op-homework__grid{

    position:absolute;

    left:44px;

    right:44px;

    bottom:36px;

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:16px;

}
.op-homework__tile{

    background:rgba(8,21,45,.55);

    backdrop-filter:blur(16px) saturate(140%);

    -webkit-backdrop-filter:blur(16px) saturate(140%);

    border:1px solid rgba(255,255,255,.14);

    border-radius:var(--radius-md);

    padding:20px 18px;

    transition:transform var(--transition), border-color var(--transition);

}
.op-homework__tile:hover{

    transform:translateY(-4px);

    border-color:rgba(216,177,75,.4);

}
.op-homework__tile svg{

    width:22px;

    height:22px;

    color:var(--color-gold);

    margin-bottom:14px;

}
.op-homework__tile-eyebrow{

    display:block;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

    color:var(--color-gold-hover);

    margin-bottom:6px;

}
.op-homework__tile h3{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:1.05rem;

    color:var(--color-white);

}
@keyframes opHomeworkZoom{

    from{ transform:scale(1); }

    to{ transform:scale(1.07); }

}

/* ==========================================
   PROPOSAL — white background. The visual is a
   live "site builder" mockup: a mini browser frame
   that continuously assembles a nav bar, a hero
   headline + CTA, then a cursor nudges the layout,
   the image, and the button color before a
   "Proposal Ready" badge confirms it — on an
   infinite 14s loop.
========================================== */

.op-proposal{

    background:var(--color-white);

    padding:var(--space-3xl) 0;

}
.op-proposal__grid{

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:64px;

    align-items:center;

}
.op-proposal__col h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.2vw, 2.6rem);

    line-height:1.3;

    letter-spacing:-.5px;

    color:var(--color-background);

}
.op-proposal__col h2 em{

    font-style:italic;

    color:var(--color-gold-hover);

}
.op-proposal__col p{

    margin-top:20px;

    font-size:1.05rem;

    line-height:1.85;

    color:rgba(8,21,45,.66);

}

/* ---- the browser mockup shell ---- */

.op-builder{

    border-radius:var(--radius-lg);

    overflow:hidden;

    border:1px solid rgba(8,21,45,.1);

    box-shadow:var(--shadow-card);

}
.op-builder__chrome{

    display:flex;

    align-items:center;

    gap:7px;

    background:#EEF1F5;

    padding:13px 16px;

}
.op-builder__dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:rgba(8,21,45,.15);

}
.op-builder__url{

    margin-left:10px;

    width:140px;

    height:10px;

    border-radius:var(--radius-pill);

    background:rgba(8,21,45,.1);

}

/* ---- the canvas being built ---- */

.op-builder__canvas{

    position:relative;

    background:var(--color-background);

    padding:26px 28px;

    min-height:300px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}
.op-builder__nav{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:34px;

}
.op-builder__logo{

    width:16px;

    height:16px;

    border-radius:5px;

    background:var(--color-gold);

    opacity:0;

    animation:bldPop 14s ease-in-out infinite;

    animation-delay:.1s;

}
.op-builder__navpill{

    flex:none;

    width:44px;

    height:11px;

    border-radius:var(--radius-pill);

    background:rgba(255,255,255,.16);

    opacity:0;

    animation:bldPop 14s ease-in-out infinite;

}
.op-builder__navpill--1{ animation-delay:.3s; width:38px; }
.op-builder__navpill--2{ animation-delay:.6s; width:50px; }
.op-builder__navpill--3{ animation-delay:.9s; width:34px; }
.op-builder__navpill--4{ animation-delay:1.2s; width:46px; }
.op-builder__navpill--5{ animation-delay:1.5s; width:56px; background:var(--color-gold); }
.op-builder__herorow{

    display:flex;

    align-items:center;

    gap:24px;

    flex:1;

}
.op-builder__herotext{

    display:flex;

    flex-direction:column;

    gap:12px;

    flex:1.2;

}
.op-builder__tagpill{

    width:76px;

    height:9px;

    border-radius:var(--radius-pill);

    border:1px solid rgba(216,177,75,.5);

    opacity:0;

    animation:bldPop 14s ease-in-out infinite;

    animation-delay:2.1s;

}
.op-builder__headline{

    height:17px;

    border-radius:5px;

    background:rgba(255,255,255,.9);

    transform-origin:left center;

    opacity:0;

    animation:bldPop 14s ease-in-out infinite;

}
.op-builder__headline--1{

    width:92%;

    animation-name:bldPop, bldTweakWidth1;

    animation-delay:2.6s, 0s;

}
.op-builder__headline--2{

    width:66%;

    animation-delay:2.9s;

}
.op-builder__para{

    height:8px;

    border-radius:4px;

    background:rgba(201,209,220,.4);

    opacity:0;

    animation:bldPop 14s ease-in-out infinite;

}
.op-builder__para--1{ width:96%; animation-delay:3.3s; }
.op-builder__para--2{ width:78%; animation-delay:3.6s; }
.op-builder__cta{

    margin-top:6px;

    width:118px;

    height:30px;

    border-radius:var(--radius-pill);

    background:var(--color-gold);

    opacity:0;

    animation-name:bldPop, bldTweakColor;

    animation-duration:14s, 14s;

    animation-timing-function:ease-in-out, ease-in-out;

    animation-iteration-count:infinite, infinite;

    animation-delay:4s, 0s;

}
.op-builder__image{

    flex:1;

    align-self:stretch;

    border-radius:var(--radius-md);

    background:linear-gradient(135deg, rgba(216,177,75,.35), rgba(216,177,75,.05));

    opacity:0;

    animation-name:bldPop, bldTweakImage;

    animation-duration:14s, 14s;

    animation-timing-function:ease-in-out, ease-in-out;

    animation-iteration-count:infinite, infinite;

    animation-delay:4.4s, 0s;

}
.op-builder__cursor{

    position:absolute;

    left:0;

    top:0;

    width:18px;

    height:18px;

    color:var(--color-white);

    filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));

    opacity:0;

    animation:bldCursor 14s ease-in-out infinite;

}
.op-builder__badge{

    position:absolute;

    right:28px;

    bottom:24px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:var(--radius-pill);

    background:rgba(76,217,123,.14);

    border:1px solid rgba(76,217,123,.4);

    color:#6EE7A0;

    font-size:.82rem;

    font-weight:700;

    opacity:0;

    animation:bldBadge 14s ease-in-out infinite;

}
.op-builder__badge svg{

    width:14px;

    height:14px;

}
@keyframes bldPop{

    0%{ opacity:0; transform:translateY(6px) scaleX(.85); }

    6%{ opacity:1; transform:translateY(0) scaleX(1); }

    80%{ opacity:1; transform:translateY(0) scaleX(1); }

    90%{ opacity:0; transform:translateY(-4px) scaleX(.92); }

    100%{ opacity:0; }

}
@keyframes bldTweakWidth1{

    0%, 44%{ width:92%; }

    52%{ width:74%; }

    64%, 100%{ width:92%; }

}
@keyframes bldTweakColor{

    0%, 46%{ background:var(--color-gold); }

    54%{ background:#E86A5C; }

    62%, 82%{ background:var(--color-gold); }

    100%{ background:var(--color-gold); }

}
@keyframes bldTweakImage{

    0%, 40%{ transform:scale(1) translateX(0); border-radius:var(--radius-md); }

    50%{ transform:scale(.94) translateX(6px); border-radius:50% / 40%; }

    60%, 82%{ transform:scale(1) translateX(0); border-radius:var(--radius-md); }

    100%{ transform:scale(1) translateX(0); border-radius:var(--radius-md); }

}
@keyframes bldCursor{

    0%, 38%{ opacity:0; left:60%; top:36%; }

    42%{ opacity:1; left:60%; top:36%; }

    50%{ opacity:1; left:42%; top:38%; }

    58%{ opacity:1; left:78%; top:52%; }

    66%{ opacity:1; left:82%; top:74%; }

    74%, 100%{ opacity:0; left:82%; top:74%; }

}
@keyframes bldBadge{

    0%, 72%{ opacity:0; transform:translateY(8px); }

    78%{ opacity:1; transform:translateY(0); }

    92%{ opacity:1; transform:translateY(0); }

    98%, 100%{ opacity:0; transform:translateY(8px); }

}

/* ==========================================
   CUSTOM BUILD — navy. Photo left, copy right.
   Same quiet "glow at the meaningful screen" device
   used in the hero and the homework section, here
   landing on the live website preview on the studio
   monitor — the through-line for this page's photos.
========================================== */

.op-custom{

    background:var(--color-background);

    padding:var(--space-3xl) 0;

}
.op-custom__grid{

    display:grid;

    grid-template-columns:1.05fr 1fr;

    gap:64px;

    align-items:center;

}
.op-custom__media{

    position:relative;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-card);

    aspect-ratio:4/3;

}
.op-custom__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:22% 40%;

    animation:opCustomZoom 28s ease-in-out infinite alternate;

    will-change:transform;

}
.op-custom__glow{

    position:absolute;

    left:29%;

    top:33%;

    width:220px;

    height:220px;

    transform:translate(-50%, -50%);

    border-radius:50%;

    background:radial-gradient(circle, rgba(216,177,75,.32) 0%, rgba(216,177,75,.1) 42%, rgba(216,177,75,0) 72%);

    mix-blend-mode:screen;

    pointer-events:none;

    animation:opGlowPulse 7s ease-in-out infinite;

}
.op-custom__col h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.2vw, 2.6rem);

    line-height:1.3;

    letter-spacing:-.5px;

    color:var(--color-white);

}
.op-custom__col h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.op-custom__col p{

    margin-top:20px;

    font-size:1.05rem;

    line-height:1.85;

    color:var(--color-text);

}
@keyframes opCustomZoom{

    from{ transform:scale(1); }

    to{ transform:scale(1.08); }

}

/* ==========================================
   ONGOING PARTNERSHIP — white. The full copy,
   not the trimmed mockup: the five-clause "changes"
   chain flows as one line building to its own
   conclusion, then all four service categories (not
   three) with their full descriptions.
========================================== */

.op-ongoing{

    background:var(--color-white);

    padding:var(--space-3xl) 0;

}
.op-ongoing__head{

    max-width:680px;

    margin:0 auto;

    text-align:center;

}
.op-ongoing__head h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.4vw, 2.7rem);

    line-height:1.28;

    letter-spacing:-.5px;

    color:var(--color-background);

}
.op-ongoing__head p{

    margin-top:18px;

    font-size:1.06rem;

    line-height:1.8;

    color:rgba(8,21,45,.66);

}
.op-ongoing__chain{

    display:flex;

    flex-wrap:nowrap;

    justify-content:center;

    align-items:center;

    gap:clamp(6px, 1.1vw, 14px);

    max-width:100%;

    margin:40px auto 0;

    overflow-x:auto;

    scrollbar-width:none;

    padding:2px 4px 6px;

}
.op-ongoing__chain::-webkit-scrollbar{ display:none; }
@media (max-width:800px){

    /* The max-width:800px override earlier in this file (search
       "op-ongoing__chain") never wins — same-specificity selector
       positioned before this base rule, which comes later in source
       order and so always overrides it. Center-aligning a strip
       that's about to become horizontally scrollable hides the fact
       that it starts before the visible edge; left-aligning it here
       (correctly, after the rule it needs to beat) makes the start
       of the chain visible instead. */
    .op-ongoing__chain{ justify-content:flex-start; }

}
.op-ongoing__chain span{

    font-size:clamp(.68rem, 1.3vw, 1rem);

    font-weight:600;

    color:rgba(8,21,45,.5);

    white-space:nowrap;

}
.op-ongoing__chain svg{

    flex:none;

    width:14px;

    height:14px;

    color:var(--color-gold-hover);

}
.op-ongoing__so{

    margin:18px auto 0;

    text-align:center;

    font-family:var(--font-heading);

    font-weight:600;

    font-style:italic;

    font-size:1.5rem;

    color:var(--color-background);

}
.op-ongoing__lead{

    max-width:680px;

    margin:52px 0 24px;

    text-align:left;

    font-weight:700;

    color:var(--color-background);

}
.op-ongoing__grid{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:24px;

}
.op-ongoing__card{

    background:rgba(8,21,45,.02);

    border:1px solid rgba(8,21,45,.08);

    border-radius:var(--radius-md);

    padding:26px 22px;

    transition:transform var(--transition), border-color var(--transition);

}
.op-ongoing__card:hover{

    transform:translateY(-4px);

    border-color:rgba(216,177,75,.35);

}
.op-ongoing__card svg{

    width:26px;

    height:26px;

    color:var(--color-gold-hover);

    margin-bottom:16px;

}
.op-ongoing__card h3{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:1.12rem;

    color:var(--color-background);

    margin-bottom:8px;

}
.op-ongoing__card p{

    font-size:.9rem;

    line-height:1.6;

    color:rgba(8,21,45,.62);

}
.op-ongoing__close{

    max-width:640px;

    margin:48px auto 0;

    text-align:center;

    font-family:var(--font-heading);

    font-weight:600;

    font-size:1.25rem;

    line-height:1.5;

    color:var(--color-background);

}
.op-ongoing__close em{

    font-style:italic;

    color:var(--color-gold-hover);

}

/* ==========================================
   FINAL CTA — dark, glass card over two soft
   gold glows, matching the closing-CTA pattern
   used on the industry pages.
========================================== */
.op-cta{

    position:relative;

    background:var(--color-background);

    padding:var(--space-3xl) 0;

    overflow:hidden;

}
.op-cta__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

    z-index:0;

}
.op-cta__glow--one{

    width:560px;

    height:560px;

    top:-260px;

    left:4%;

    background:radial-gradient(circle, rgba(216,177,75,.24), rgba(216,177,75,0) 70%);

}
.op-cta__glow--two{

    width:460px;

    height:460px;

    bottom:-220px;

    right:6%;

    background:radial-gradient(circle, rgba(216,177,75,.14), rgba(216,177,75,0) 70%);

}
.op-cta__card{

    position:relative;

    z-index:1;

    max-width:760px;

    margin:0 auto;

    text-align:center;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(216,177,75,.22);

    border-radius:calc(var(--radius-lg) + 6px);

    padding:66px 60px;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 40px 90px rgba(0,0,0,.35);

    opacity:0;

    transform:translateY(24px);

    transition:opacity .7s ease, transform .7s ease;

}
.op-cta__card.is-visible{

    opacity:1;

    transform:translateY(0);

}
.op-cta__card h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.2vw, 2.6rem);

    line-height:1.3;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:22px;

}
.op-cta__card h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.op-cta__card p{

    font-size:1.1rem;

    line-height:1.8;

    color:var(--color-text);

    max-width:560px;

    margin:0 auto 40px;

}
.op-cta .hero__buttons{

    justify-content:center;

}
@media (max-width:900px){

    .op-hero{ min-height:92vh; padding:130px 0 60px; }

    .op-hero__media{ left:-5%; }

    .op-hero__media img{ object-position:center 44%; }

    .op-hero__inner{ text-align:center; transform:none; }

    .op-hero__lede,
    .op-hero__punch{ margin-left:auto; margin-right:auto; }

    .op-hero .hero__buttons{ justify-content:center; }

    .op-hero__card{ max-width:520px; margin:0 auto; padding:36px 26px; }

    .op-hero__scrollcue{ display:none; }

    .op-homework__panel{ min-height:auto; }

    .op-homework__media{ position:relative; aspect-ratio:4/3; }

    .op-homework__scrim,
    .op-homework__glow{ display:none; }

    .op-homework__card{ position:static; max-width:none; margin:24px 24px 0; box-shadow:none; }

    .op-homework__grid{ position:static; grid-template-columns:1fr 1fr; margin:16px 24px 24px; }

    .op-proposal__grid{ grid-template-columns:1fr; gap:40px; }

    .op-builder__herorow{ flex-direction:column; align-items:stretch; }

    .op-builder__image{ min-height:100px; }

    .op-builder__navpill--3,
    .op-builder__navpill--4{ display:none; }

    .op-custom__grid{ grid-template-columns:1fr; gap:36px; }

    .op-ongoing__grid{ grid-template-columns:1fr 1fr; }

    .op-cta__card{ padding:48px 28px; }

}
@media (max-width:640px){

    .op-hero{ padding:70px 0 50px; }

}
@media (max-width:400px){

    /* The 2-column fallback above still has each research tile too
       narrow on the smallest phones. */
    .op-homework__grid{ grid-template-columns:1fr; }

    /* Same story here: the intended max-width:800px 1-column
       override (search "op-ongoing__grid" earlier in this file)
       never wins — it's positioned before the base rule above, so
       the 900px 2-column rule right above this one, which comes
       later in source, always beats it. 2 columns is still too
       tight for these on the smallest phones anyway. */
    .op-ongoing__grid{ grid-template-columns:1fr; }

}
@media (prefers-reduced-motion: reduce){

    .op-hero__media img{ animation:none; }

    .op-hero__glow{ animation:none; opacity:.7; }

    .op-hero__card{ animation:none; opacity:1; }

    .op-homework__media img{ animation:none; }

    .op-homework__glow{ animation:none; opacity:.7; }

    .op-homework__tile{ transition:none; }

    .op-builder__logo,
    .op-builder__navpill,
    .op-builder__tagpill,
    .op-builder__headline,
    .op-builder__para,
    .op-builder__cta,
    .op-builder__image{ animation:none; opacity:1; transform:none; }

    .op-builder__cursor{ display:none; }

    .op-builder__badge{ animation:none; opacity:1; transform:none; }

    .op-custom__media img{ animation:none; }

    .op-custom__glow{ animation:none; opacity:.7; }

    .op-cta__card{ transition:none; opacity:1; transform:none; }

    .op-hero__tag,
    .op-hero__card h1,
    .op-hero__lede,
    .op-hero__punch,
    .op-hero .hero__buttons,
    .op-hero__scrollcue,
    .op-hero__scrollcue svg{

        animation:none;

        opacity:1;

    }

}