/* ==========================================================================
   Commercial Cleaning Services Industry Page (cc-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
   css/industry-page.css and css/home-service-page.css
   so no other page is touched.
   ========================================================================== */

/* ==========================================
   HERO — full-bleed night-lobby photo, centered
   headline in a spotlight vignette, slow Ken Burns
   drift, and a single slow "gleam" sweep across the
   glass/marble to underline the polished, spotless
   feel the whole page is meant to sell.
========================================== */

.cc-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding-top:120px;

}
.cc-hero__media{

    position:absolute;

    inset:-5%;

    z-index:0;

}
.cc-hero__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:46% 60%;

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

    will-change:transform;

}
.cc-hero__scrim{

    position:absolute;

    inset:0;

    z-index:0;

    background:

        radial-gradient(ellipse 62% 56% at 50% 38%, rgba(8,21,45,.86) 0%, rgba(8,21,45,.34) 62%, rgba(8,21,45,0) 100%),

        linear-gradient(180deg, rgba(8,21,45,.6) 0%, rgba(8,21,45,.12) 26%, rgba(8,21,45,.14) 66%, rgba(8,21,45,.7) 100%);

}
.cc-hero__gleam{

    position:absolute;

    inset:-20% -40%;

    z-index:0;

    background:linear-gradient(75deg, transparent 42%, rgba(255,255,255,.09) 48%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.09) 52%, transparent 58%);

    mix-blend-mode:screen;

    pointer-events:none;

    transform:translateX(-70%);

    animation:ccGleamSweep 13s cubic-bezier(.4,0,.2,1) infinite;

}
.cc-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");

}
.cc-hero__inner{

    position:relative;

    z-index:1;

    text-align:center;

    margin-top:-160px;

}
.cc-hero__copy{

    max-width:820px;

    margin:0 auto;

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

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

    content:"";

    width:28px;

    height:1px;

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

}
.cc-hero__tag::after{

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

}
.cc-hero__copy h1{

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

    font-weight:600;

    font-size:clamp(2.4rem, 4.4vw, 3.7rem);

    line-height:1.24;

    letter-spacing:-.5px;

    color:var(--color-white);

    text-shadow:0 10px 34px rgba(0,0,0,.55);

    margin-bottom:28px;

}
.cc-hero__copy h1 em{

    font-style:italic;

    color:var(--color-gold);

}
.cc-hero__lede{

    font-size:1.18rem;

    line-height:1.85;

    color:var(--color-text);

    text-shadow:0 4px 18px rgba(0,0,0,.5);

    max-width:660px;

    margin:0 auto 42px;

}
.cc-hero .hero__buttons{

    justify-content:center;

}
.cc-hero__tag,
.cc-hero__copy h1,
.cc-hero__lede,
.cc-hero .hero__buttons{

    opacity:0;

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

}
.cc-hero__tag{ animation-delay:.15s; }
.cc-hero__copy h1{ animation-delay:.32s; }
.cc-hero__lede{ animation-delay:.5s; }
.cc-hero .hero__buttons{ animation-delay:.68s; }

.cc-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:ccHeroFadeUp .8s cubic-bezier(.22,.68,0,1) forwards;

    animation-delay:1s;

}
.cc-hero__scrollcue svg{

    width:16px;

    height:16px;

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

}
@keyframes ccHeroZoom{

    from{ transform:scale(1); }

    to{ transform:scale(1.09); }

}
@keyframes ccGleamSweep{

    0%{ transform:translateX(-70%); opacity:0; }

    4%{ opacity:1; }

    22%{ transform:translateX(70%); opacity:0; }

    100%{ transform:translateX(70%); opacity:0; }

}
@keyframes ccHeroFadeUp{

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

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

}
@keyframes ccHeroBob{

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

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

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

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

    .cc-hero__scrollcue{ display:none; }

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

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

}
/* ==========================================
   SECTION 2 — THE OBJECTION
   Left: their line, staged as an actual spoken
   speech bubble. Right: the rebuttal, with the
   pivot phrase highlighted and the takeaway boxed.
========================================== */

.cc-objection{

    background:var(--color-white);

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

}
.cc-objection__grid{

    display:grid;

    grid-template-columns:minmax(280px,380px) 1fr;

    gap:70px;

    align-items:center;

}
.cc-objection__quote{

    position:relative;

    background:var(--color-white);

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

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

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

    padding:44px 40px 38px;

}
.cc-objection__quote-mark{

    display:inline-block;

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

    font-size:2.4rem;

    line-height:0;

    vertical-align:-.28em;

    color:var(--color-gold);

    margin-right:4px;

}
.cc-objection__quote-text{

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

    font-style:italic;

    font-weight:600;

    font-size:1.7rem;

    line-height:1.4;

    color:var(--color-background);

}
.cc-objection__cite{

    margin-top:22px;

    font-size:.94rem;

    font-style:italic;

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

}
.cc-objection__copy p{

    font-size:1.08rem;

    line-height:1.9;

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

}
.cc-objection__copy p + p{

    margin-top:22px;

}
.cc-highlight{

    color:var(--color-background);

    font-weight:700;

    text-decoration:underline;

    text-decoration-color:var(--color-gold);

    text-decoration-thickness:2px;

    text-underline-offset:4px;

}
.cc-objection__callout{

    margin-top:30px;

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

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

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

    padding:20px 26px;

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

    font-weight:600;

    font-size:1.28rem;

    line-height:1.5;

    color:var(--color-background);

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

    .cc-objection__grid{ grid-template-columns:1fr; gap:44px; }

    .cc-objection__quote{ max-width:380px; }

}
/* ==========================================
   SECTION 3 — YOU'RE SELLING CONFIDENCE
   Deep navy background, trust-question card grid
   on the left, the meticulous-detail /
   large-scale-facility diptych on the right.
========================================== */

.cc-trust{

    background:var(--color-background);

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

}
.cc-trust__grid{

    display:grid;

    grid-template-columns:1.15fr 1fr;

    gap:70px;

    align-items:center;

}
.cc-trust__copy 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);

    max-width:600px;

}
.cc-trust__copy h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.cc-trust__lede{

    margin-top:20px;

    font-size:1.08rem;

    line-height:1.8;

    color:var(--color-text);

    max-width:560px;

}
.cc-trust__cards{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:44px;

}
.cc-trust__card{

    background:var(--color-card);

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

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

    padding:24px 22px;

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

}
.cc-trust__card:hover{

    transform:translateY(-4px);

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

}
.cc-trust__icon{

    width:24px;

    height:24px;

    color:var(--color-gold);

    margin-bottom:16px;

}
.cc-trust__card h3{

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

    font-weight:600;

    font-size:1.15rem;

    color:var(--color-white);

    margin-bottom:8px;

}
.cc-trust__card p{

    font-size:.92rem;

    line-height:1.55;

    color:var(--color-text);

}
.cc-trust__media{

    position:relative;

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

    overflow:hidden;

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

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

    aspect-ratio:4/3;

}
.cc-trust__media img{

    width:100%;

    height:100%;

    object-fit:cover;

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

    .cc-trust__grid{ grid-template-columns:1fr; gap:48px; }

    .cc-trust__media{ max-width:560px; margin:0 auto; }

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

    .cc-trust__cards{ grid-template-columns:1fr; }

}
/* ==========================================
   SECTION 4 — LOOK LIKE YOU CAN HANDLE IT
   Clean two-column row, no card borders: photo on
   the left, the statement vertically centered
   against it on the right. Facility checklist runs
   full-width underneath as the proof.
========================================== */

.cc-scale{

    background:var(--color-white);

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

}
.cc-scale__row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}
.cc-scale__media{

    position:relative;

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

    overflow:hidden;

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

    aspect-ratio:4/3;

}
.cc-scale__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 30%;

    animation:ccScaleZoom 22s ease-in-out infinite alternate;

    will-change:transform;

}
.cc-scale__badge{

    position:absolute;

    left:20px;

    bottom:20px;

    z-index:1;

    display:inline-flex;

    align-items:center;

    gap:9px;

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

    backdrop-filter:blur(6px);

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

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

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

    padding:11px 18px 11px 14px;

    color:var(--color-white);

    font-size:.86rem;

    font-weight:600;

    box-shadow:0 10px 26px rgba(0,0,0,.28);

    animation:ccBadgeFloat 4.5s ease-in-out infinite;

}
.cc-scale__badge svg{

    flex:none;

    width:16px;

    height:16px;

    color:#4CD97B;

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

    border-radius:50%;

    padding:3px;

    box-sizing:content-box;

}
.cc-scale__intro h2{

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

    font-weight:600;

    font-size:clamp(2.1rem, 3.2vw, 2.8rem);

    line-height:1.24;

    letter-spacing:-.6px;

    color:var(--color-background);

}
.cc-scale__intro h2 em{

    font-style:italic;

    background:linear-gradient(100deg, var(--color-gold) 20%, #fbe8b0 40%, var(--color-gold) 60%);

    background-size:220% 100%;

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    animation:ccShine 5s linear infinite;

}
.cc-scale__bar{

    display:block;

    width:64px;

    height:4px;

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

    background:var(--color-gold);

    margin:24px 0;

}
.cc-scale__lede{

    font-size:1.08rem;

    line-height:1.75;

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

    max-width:460px;

}
.cc-scale__lists{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0 44px;

    margin-top:64px;

}
.cc-scale__lists-label{

    grid-column:1 / -1;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1.4px;

    text-transform:uppercase;

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

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

    display:inline-block;

    padding:6px 14px;

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

    margin-bottom:20px;

}
.cc-scale__list li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:13px 0;

    font-size:1.02rem;

    font-weight:500;

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

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

}
.cc-scale__list li:last-child{

    border-bottom:none;

}
.cc-scale__list li svg{

    flex:none;

    width:14px;

    height:14px;

    color:var(--color-gold);

}
@keyframes ccShine{

    0%{ background-position:220% 0; }

    100%{ background-position:-220% 0; }

}
@keyframes ccScaleZoom{

    from{ transform:scale(1); }

    to{ transform:scale(1.08); }

}
@keyframes ccBadgeFloat{

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

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

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

    .cc-scale__row{ grid-template-columns:1fr; gap:32px; }

    .cc-scale__lede{ max-width:none; }

    .cc-scale__lists{ margin-top:44px; }

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

    .cc-scale__break{ display:none; }

    .cc-scale__lists{ grid-template-columns:1fr; }

}
/* ==========================================
   SECTION 5 — THE SEARCH YOU NEVER SEE
   Deep navy, console-style query cards on the
   left, the reframe + pull-quote on the right.
========================================== */

.cc-search{

    background:var(--color-background);

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

}
.cc-search__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

}
/* Grid items default to min-width:auto, sizing to their content's
   min-content — which for .cc-search__col means the full nowrap
   width of the longest typed search query (~67ch). That forced the
   column (and the page) wider than the viewport on narrow screens
   even after the grid itself collapsed to one column; min-width:0
   lets the column actually shrink to the track, so .cc-search__typed's
   own overflow:hidden/max-width:100% can clip it as intended. */
.cc-search__col{

    min-width:0;

}
.cc-search__col h2{

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

    font-weight:600;

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

    line-height:1.32;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:36px;

}
.cc-search__col h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.cc-search__console{

    background:var(--color-card);

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

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

    padding:22px 24px;

}
.cc-search__console + .cc-search__console{

    margin-top:16px;

}
.cc-search__console-label{

    display:flex;

    align-items:center;

    gap:6px;

    font-family:"SFMono-Regular", Consolas, "Liberation Mono", monospace;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:.4px;

    text-transform:uppercase;

    color:var(--color-gold);

    margin-bottom:12px;

}
.cc-search__console-label svg{

    flex:none;

    width:12px;

    height:12px;

}
.cc-search__console-text{

    font-family:"SFMono-Regular", Consolas, "Liberation Mono", monospace;

    font-size:1rem;

    line-height:1.6;

    color:var(--color-white);

}
.cc-search__typed{

    display:inline-block;

    overflow:hidden;

    white-space:nowrap;

    max-width:100%;

    vertical-align:top;

}
.cc-search__typed--a{

    animation:ccTypeA 7s linear infinite;

}
.cc-search__typed--b{

    animation:ccTypeB 7s linear infinite;

    animation-delay:.4s;

}
.cc-search__cursor{

    display:inline-block;

    width:2px;

    height:1em;

    margin-left:2px;

    background:var(--color-gold);

    vertical-align:text-bottom;

    animation:ccCursorBlink .9s step-end infinite;

}
.cc-search__match{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:16px;

    padding:6px 13px;

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

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

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

    color:#6EE7A0;

    font-size:.82rem;

    font-weight:600;

    opacity:0;

    transform:translateY(6px);

}
.cc-search__match svg{

    flex:none;

    width:13px;

    height:13px;

}
.cc-search__match--a{

    animation:ccMatchA 7s ease infinite;

}
.cc-search__match--b{

    animation:ccMatchB 7s ease infinite;

    animation-delay:.4s;

}
@keyframes ccTypeA{

    0%{ width:0; opacity:1; animation-timing-function:steps(35,end); }

    23%{ width:36ch; opacity:1; }

    88%{ width:36ch; opacity:1; }

    96%{ width:36ch; opacity:0; }

    100%{ width:0; opacity:0; }

}
@keyframes ccTypeB{

    0%{ width:0; opacity:1; animation-timing-function:steps(66,end); }

    43%{ width:67ch; opacity:1; }

    88%{ width:67ch; opacity:1; }

    96%{ width:67ch; opacity:0; }

    100%{ width:0; opacity:0; }

}
@keyframes ccCursorBlink{

    0%, 100%{ opacity:1; }

    50%{ opacity:0; }

}
@keyframes ccMatchA{

    0%, 25%{ opacity:0; transform:translateY(6px); }

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

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

    96%, 100%{ opacity:0; transform:translateY(6px); }

}
@keyframes ccMatchB{

    0%, 45%{ opacity:0; transform:translateY(6px); }

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

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

    96%, 100%{ opacity:0; transform:translateY(6px); }

}
.cc-search__col--right{

    display:flex;

    flex-direction:column;

    justify-content:center;

}
.cc-search__lede{

    font-size:1.1rem;

    line-height:1.85;

    color:var(--color-text);

}
.cc-search__quote{

    position:relative;

    margin:32px 0 0;

    padding-left:24px;

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

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

    font-style:italic;

    font-weight:600;

    font-size:1.4rem;

    line-height:1.5;

    color:var(--color-white);

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

    .cc-search__grid{ grid-template-columns:1fr; gap:44px; }

}
/* ==========================================
   SECTION 6 — YOU'VE PROBABLY DONE MORE
   White background, centered header, stat cards
   paired with a photo of the fleet/equipment that
   backs the numbers up.
========================================== */

.cc-proof{

    background:var(--color-white);

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

}
.cc-proof__head{

    max-width:680px;

    margin:0 auto 56px;

    text-align:center;

}
.cc-proof__head 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);

    margin-bottom:16px;

}
.cc-proof__head p{

    font-size:1.08rem;

    line-height:1.75;

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

}
.cc-proof__row{

    display:grid;

    grid-template-columns:1.15fr 1fr;

    gap:32px;

    align-items:stretch;

}
.cc-proof__stats{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}
.cc-proof__stat{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

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

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

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

    padding:32px 20px;

    text-align:center;

}
.cc-proof__number{

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

    font-weight:700;

    font-size:2.6rem;

    line-height:1;

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

    background-image:linear-gradient(135deg, #C68F2E, var(--color-gold-hover));

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}
.cc-proof__icon{

    width:34px;

    height:34px;

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

}
.cc-proof__label{

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

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

}
.cc-proof__media{

    position:relative;

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

    overflow:hidden;

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

    min-height:260px;

}
.cc-proof__media img{

    width:100%;

    height:100%;

    object-fit:cover;

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

    .cc-proof__row{ grid-template-columns:1fr; }

    .cc-proof__media{ min-height:260px; order:-1; }

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

    .cc-proof__stats{ grid-template-columns:1fr 1fr; gap:14px; }

    .cc-proof__stat{ padding:24px 14px; }

    .cc-proof__number{ font-size:2.1rem; }

}
/* ==========================================
   SECTION 7 — WE START WITH YOUR BUSINESS
   Deep navy, headline + copy on the left, the
   "what we analyze first" checklist card on the
   right.
========================================== */

.cc-approach{

    background:var(--color-background);

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

}
.cc-approach__panel{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

}
.cc-approach__copy h2{

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

    font-weight:600;

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

    line-height:1.32;

    letter-spacing:-.5px;

    color:var(--color-white);

}
.cc-approach__copy h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.cc-approach__copy p{

    margin-top:22px;

    font-size:1.08rem;

    line-height:1.85;

    color:var(--color-text);

}
.cc-approach__copy p em{

    font-style:italic;

    color:var(--color-white);

}
.cc-approach__card{

    background:var(--color-card);

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

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

    padding:38px 36px;

}
.cc-approach__card h3{

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

    font-weight:600;

    font-size:1.35rem;

    color:var(--color-white);

    margin-bottom:26px;

}
.cc-approach__list li{

    display:flex;

    align-items:flex-start;

    gap:16px;

}
.cc-approach__list li + li{

    margin-top:24px;

    padding-top:24px;

    border-top:1px solid rgba(255,255,255,.08);

}
.cc-approach__list svg{

    flex:none;

    width:22px;

    height:22px;

    margin-top:2px;

    color:var(--color-gold);

}
.cc-approach__list h4{

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

    font-size:1.02rem;

    font-weight:700;

    color:var(--color-white);

    margin-bottom:4px;

}
.cc-approach__list p{

    font-size:.94rem;

    line-height:1.6;

    color:var(--color-text);

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

    .cc-approach__panel{ grid-template-columns:1fr; gap:40px; }

}
/* ==========================================
   SECTION 8 — FINAL CTA
   White background, centered close, so the page
   ends on the same crisp note the hero opened on.
========================================== */

.cc-final{

    background:var(--color-white);

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

}
.cc-final__inner{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}
.cc-final__inner h2{

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

    font-weight:600;

    font-size:clamp(2.1rem, 3.6vw, 3rem);

    line-height:1.28;

    letter-spacing:-.5px;

    color:var(--color-background);

}
.cc-final__inner h2 em{

    font-style:italic;

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

    background-image:linear-gradient(135deg, #C68F2E, var(--color-gold-hover));

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}
.cc-final__inner p{

    margin-top:24px;

    font-size:1.1rem;

    line-height:1.85;

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

}
.cc-final__buttons{

    justify-content:center;

    margin-top:40px;

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

    .cc-search__typed{ animation:none; width:auto; opacity:1; }

    .cc-search__cursor{ animation:none; }

    .cc-search__match{ animation:none; opacity:1; transform:none; }

    .cc-scale__intro h2 em{

        animation:none;

        background:none;

        -webkit-text-fill-color:var(--color-gold);

        color:var(--color-gold);

    }

    .cc-scale__media img{ animation:none; }

    .cc-scale__badge{ animation:none; }

    .cc-hero__media img{ animation:none; }

    .cc-hero__gleam{ animation:none; opacity:0; }

    .cc-hero__tag,
    .cc-hero__copy h1,
    .cc-hero__lede,
    .cc-hero .hero__buttons,
    .cc-hero__scrollcue,
    .cc-hero__scrollcue svg{

        animation:none;

        opacity:1;

    }

}