/* =============================================================================
 CNB Renovation — Design System v2.0 "White Perfection"
 Red #D72522 + Black #111111 + White #FFFFFF
 WebCoreLab 2026
 ============================================================================= */

/* ---------- Fonts ---------- */
@font-face{
 font-family:'Fraunces';
 src:url('../fonts/Fraunces-400.woff2') format('woff2');
 font-weight:400;
 font-display:swap;
}
@font-face{
 font-family:'Fraunces';
 src:url('../fonts/Fraunces-500.woff2') format('woff2');
 font-weight:500;
 font-display:swap;
}
@font-face{
 font-family:'Inter';
 src:url('../fonts/Inter-400.woff2') format('woff2');
 font-weight:400;
 font-display:swap;
}
@font-face{
 font-family:'Inter';
 src:url('../fonts/Inter-500.woff2') format('woff2');
 font-weight:500;
 font-display:swap;
}
@font-face{
 font-family:'Space Mono';
 src:url('../fonts/SpaceMono-400.woff2') format('woff2');
 font-weight:400;
 font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
 --red:#D72522;
 --red-hover:#B51E1B;
 --black:#111111;
 --ink:#2C2C2C;
 --muted:#888888;
 --border:#E5E5E5;
 --bg:#FFFFFF;
 --bg-alt:#F7F7F7;
 --bg-dark:#111111;

 --font-display:'Fraunces',Georgia,serif;
 --font-body:'Inter',system-ui,-apple-system,sans-serif;
 --font-mono:'Space Mono','SF Mono',Menlo,monospace;

 --fs-h1:clamp(2.75rem,5.5vw,4.5rem);
 --fs-h2:clamp(1.875rem,3.5vw,2.75rem);
 --fs-h3:1.375rem;
 --fs-body:1.0625rem;
 --fs-sm:0.875rem;

 --sp-2:.5rem;
 --sp-3:.75rem;
 --sp-4:1rem;
 --sp-6:1.5rem;
 --sp-8:2rem;
 --sp-12:3rem;
 --sp-16:4rem;
 --sp-24:6rem;

 --r:4px;
 --r-md:8px;
 --r-lg:16px;
 --container:1240px;
 --pad:max(1.5rem,5vw);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
 background:var(--bg);
 color:var(--ink);
 font-family:var(--font-body);
 font-size:var(--fs-body);
 line-height:1.6;
 -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;}
button{cursor:pointer;font:inherit;}
ul{list-style:none;}

/* ---------- Container ---------- */
.cnb-container{
 max-width:var(--container);
 margin-inline:auto;
 padding-inline:var(--pad);
}

/* ---------- Sections ---------- */
.cnb-section{
 padding-block:var(--sp-24);
}
.cnb-section--alt{
 background:var(--bg-alt);
}
.cnb-section--dark{
 background:var(--bg-dark);
 color:#fff;
}
.cnb-section--tight{
 padding-block:var(--sp-16);
}

/* ---------- Eyebrow ---------- */
.cnb-eyebrow{
 display:inline-block;
 font-family:var(--font-mono);
 font-size:.75rem;
 font-weight:400;
 letter-spacing:.14em;
 text-transform:uppercase;
 color:var(--red);
 margin-bottom:var(--sp-4);
}

/* ---------- Headings ---------- */
h1,.h1{
 font-family:var(--font-display);
 font-size:var(--fs-h1);
 font-weight:400;
 line-height:1.1;
 color:var(--black);
}
h2,.h2{
 font-family:var(--font-body);
 font-size:var(--fs-h2);
 font-weight:700;
 line-height:1.2;
 color:var(--black);
 letter-spacing:-.02em;
}
h3,.h3{
 font-family:var(--font-body);
 font-size:var(--fs-h3);
 font-weight:700;
 color:var(--black);
 line-height:1.3;
}
.cnb-section--dark h1,
.cnb-section--dark h2,
.cnb-section--dark h3{color:#fff;}

/* ---------- Buttons ---------- */
.cnb-btn{
 display:inline-flex;
 align-items:center;
 gap:.5rem;
 padding:.875rem 2rem;
 border-radius:var(--r);
 font-weight:600;
 font-size:1rem;
 text-decoration:none;
 transition:background .18s,color .18s,transform .15s;
 white-space:nowrap;
 border:2px solid transparent;
}
.cnb-btn--primary{
 background:var(--red);
 color:#fff;
}
.cnb-btn--primary:hover{
 background:var(--red-hover);
 transform:translateY(-1px);
}
.cnb-btn--outline{
 border-color:var(--black);
 color:var(--black);
 background:transparent;
}
.cnb-btn--outline:hover{
 background:var(--black);
 color:#fff;
}
.cnb-btn--outline-white{
 border-color:rgba(255,255,255,.5);
 color:#fff;
 background:transparent;
}
.cnb-btn--outline-white:hover{
 border-color:#fff;
 background:rgba(255,255,255,.08);
}

/* =============================================================================
 HERO SLIDER — full width
 ============================================================================= */
.cnb-slider{
 position:relative;
 height:92vh;
 min-height:580px;
 max-height:900px;
 overflow:hidden;
 background:#111;
}
.cnb-slide{
 position:absolute;
 inset:0;
 background-size:cover;
 background-position:center;
 opacity:0;
 transition:opacity .9s ease;
 pointer-events:none;
}
.cnb-slide.is-active{
 opacity:1;
 pointer-events:auto;
}
.cnb-slide__overlay{
 position:absolute;
 inset:0;
 background:linear-gradient(
 105deg,
 rgba(0,0,0,.72) 0%,
 rgba(0,0,0,.45) 55%,
 rgba(0,0,0,.15) 100%
 );
}
.cnb-slide__content{
 position:absolute;
 inset:0;
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding-block:var(--sp-24);
 max-width:min(680px,55%);
}
.cnb-slide__eyebrow{
 display:inline-block;
 font-family:var(--font-mono);
 font-size:.75rem;
 letter-spacing:.18em;
 text-transform:uppercase;
 color:rgba(255,255,255,.65);
 margin-bottom:var(--sp-4);
}
.cnb-slide__h1{
 font-family:var(--font-display);
 font-size:clamp(2.5rem,5.5vw,4.5rem);
 font-weight:400;
 line-height:1.08;
 color:#fff;
 margin-bottom:var(--sp-6);
}
.cnb-slider__red{color:var(--red);font-style:normal;}
.cnb-slide__sub{
 font-size:clamp(1rem,1.6vw,1.125rem);
 color:rgba(255,255,255,.82);
 line-height:1.65;
 max-width:520px;
 margin-bottom:var(--sp-8);
}
.cnb-slide__actions{
 display:flex;
 gap:var(--sp-3);
 flex-wrap:wrap;
}
.cnb-btn--red{
 background:var(--red);
 color:#fff;
 border:2px solid var(--red);
 padding:.875rem 2rem;
 border-radius:var(--r);
 font-weight:600;
 font-size:1rem;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 transition:background .18s,border-color .18s,transform .15s;
}
.cnb-btn--red:hover{background:var(--red-hover);border-color:var(--red-hover);transform:translateY(-1px);}
.cnb-btn--ghost{
 background:transparent;
 color:#fff;
 border:2px solid rgba(255,255,255,.55);
 padding:.875rem 2rem;
 border-radius:var(--r);
 font-weight:600;
 font-size:1rem;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 transition:border-color .18s,background .18s;
}
.cnb-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}

/* Dots */
.cnb-slider__dots{
 position:absolute;
 bottom:var(--sp-6);
 left:50%;
 transform:translateX(-50%);
 display:flex;
 gap:.5rem;
 z-index:10;
}
.cnb-slider__dot{
 width:8px;
 height:8px;
 border-radius:50%;
 background:rgba(255,255,255,.35);
 border:none;
 cursor:pointer;
 padding:0;
 transition:background .2s,transform .2s;
}
.cnb-slider__dot.is-active{
 background:#fff;
 transform:scale(1.3);
}

/* Arrows */
.cnb-slider__arrow{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 background:rgba(255,255,255,.12);
 backdrop-filter:blur(4px);
 border:1px solid rgba(255,255,255,.2);
 border-radius:50%;
 width:48px;
 height:48px;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#fff;
 cursor:pointer;
 z-index:10;
 transition:background .18s;
}
.cnb-slider__arrow:hover{background:rgba(255,255,255,.22);}
.cnb-slider__arrow--prev{left:var(--sp-6);}
.cnb-slider__arrow--next{right:var(--sp-6);}

@media (max-width:768px){
 .cnb-slider{height:80vh;min-height:480px;}
 .cnb-slide__content{max-width:100%;padding-inline:var(--pad);}
 .cnb-slider__arrow{display:none;}
}

/* =============================================================================
 HEADER
 ============================================================================= */
.cnb-header{
 position:fixed;
 top:0;
 left:0;
 right:0;
 z-index:100;
 background:transparent;
 border-bottom:1px solid transparent;
 height:68px;
 display:flex;
 align-items:center;
 transition:background 0.35s ease,border-color 0.35s ease,backdrop-filter 0.35s ease,box-shadow 0.35s ease;
}
.cnb-header__inner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 width:100%;
 max-width:var(--container);
 margin-inline:auto;
 padding-inline:var(--pad);
}
.cnb-logo{
 display:flex;
 align-items:baseline;
 gap:.35rem;
 text-decoration:none;
 user-select:none;
}
.cnb-logo__cnb{
 font-family:var(--font-body);
 font-weight:700;
 font-size:1.5rem;
 color:var(--red);
 letter-spacing:-.01em;
}
.cnb-logo__reno{
 font-family:var(--font-body);
 font-weight:700;
 font-size:1.5rem;
 color:var(--black);
 letter-spacing:-.01em;
}
.cnb-nav{
 display:flex;
 align-items:center;
 gap:var(--sp-8);
}
.cnb-nav__links{
 display:flex;
 gap:var(--sp-6);
}
.cnb-nav__link{
 font-size:.9375rem;
 font-weight:500;
 color:rgba(255,255,255,0.85);
 text-decoration:none;
 transition:color .15s;
}
.cnb-nav__link:hover{color:#cc2027;}
.cnb-header__cta{
 font-family:var(--font-mono);
 font-size:.875rem;
 font-weight:400;
 padding:.5rem 1.25rem;
 background:var(--red);
 color:#fff;
 border-radius:var(--r);
 text-decoration:none;
 transition:background .18s;
 letter-spacing:.02em;
}
.cnb-header__cta:hover{background:var(--red-hover);}

/* Mobile nav toggle */
.cnb-nav__toggle{
 display:none;
 background:none;
 border:none;
 padding:.25rem;
 color:var(--black);
}
@media (max-width:768px){
 .cnb-nav__links{display:none;}
 .cnb-nav__toggle{display:flex;}
 .cnb-nav.is-open .cnb-nav__links{
 display:flex;
 flex-direction:column;
 position:absolute;
 top:64px;
 left:0;
 right:0;
 background:#fff;
 border-bottom:1px solid var(--border);
 padding:var(--sp-6) var(--pad);
 gap:var(--sp-4);
 z-index:99;
}
}

/* =============================================================================
 HERO — Split layout
 ============================================================================= */
.cnb-hero{
 min-height:calc(100svh - 64px);
 display:grid;
 grid-template-columns:1fr 1fr;
 overflow:hidden;
}
.cnb-hero__content{
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:var(--sp-24) var(--pad) var(--sp-24) calc(var(--pad) + max(0px,(100% - var(--container)/2)));
 max-width:calc(var(--container)/2 + var(--pad));
}
.cnb-hero__h1{
 font-family:var(--font-display);
 font-size:var(--fs-h1);
 font-weight:400;
 line-height:1.08;
 color:var(--black);
 margin-bottom:var(--sp-6);
}
.cnb-hero__h1 em{
 font-style:normal;
 color:var(--red);
}
.cnb-hero__sub{
 font-size:1.125rem;
 color:#555;
 line-height:1.6;
 max-width:480px;
 margin-bottom:var(--sp-8);
}
.cnb-hero__actions{
 display:flex;
 gap:var(--sp-3);
 flex-wrap:wrap;
 margin-bottom:var(--sp-8);
}
.cnb-hero__chips{
 display:flex;
 flex-wrap:wrap;
 gap:var(--sp-2);
}
.cnb-chip{
 display:inline-flex;
 align-items:center;
 gap:.375rem;
 font-family:var(--font-mono);
 font-size:.75rem;
 letter-spacing:.06em;
 text-transform:uppercase;
 color:var(--muted);
 border:1px solid var(--border);
 border-radius:100px;
 padding:.3rem .8rem;
}
.cnb-chip__dot{
 width:6px;
 height:6px;
 border-radius:50%;
 background:var(--red);
 flex-shrink:0;
}

.cnb-hero__photo{
 position:relative;
 overflow:hidden;
}
.cnb-hero__photo img{
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
}
.cnb-hero__caption{
 position:absolute;
 bottom:var(--sp-6);
 left:var(--sp-6);
 background:rgba(17,17,17,.82);
 backdrop-filter:blur(8px);
 color:rgba(255,255,255,.9);
 font-family:var(--font-mono);
 font-size:.6875rem;
 letter-spacing:.08em;
 text-transform:uppercase;
 padding:.4rem .9rem;
 border-radius:var(--r);
}

@media (max-width:900px){
 .cnb-hero{
 grid-template-columns:1fr;
 min-height:auto;
}
 .cnb-hero__content{
 padding:var(--sp-16) var(--pad);
 max-width:none;
}
 .cnb-hero__photo{
 aspect-ratio:16/9;
}
}

/* =============================================================================
 STATS STRIP — dark
 ============================================================================= */
.cnb-stats{
 background:var(--bg-dark);
 padding-block:var(--sp-16);
}
.cnb-stats__grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:1px;
 background:rgba(255,255,255,.06);
}
.cnb-stat{
 padding:var(--sp-8) var(--sp-6);
 background:var(--bg-dark);
 text-align:center;
}
.cnb-stat__num{
 font-family:var(--font-mono);
 font-size:clamp(2rem,4vw,3rem);
 font-weight:400;
 color:var(--red);
 line-height:1;
 display:block;
}
.cnb-stat__label{
 font-size:.8125rem;
 color:rgba(255,255,255,.5);
 text-transform:uppercase;
 letter-spacing:.1em;
 margin-top:.5rem;
 display:block;
}
@media (max-width:600px){
 .cnb-stats__grid{grid-template-columns:repeat(2,1fr);}
}

/* =============================================================================
 SERVICES — white cards
 ============================================================================= */
.cnb-services__grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:1.5rem;
 margin-top:var(--sp-12);
}
.cnb-service-card{
 background:var(--bg);
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 padding:var(--sp-8);
 transition:border-color .18s,box-shadow .18s,transform .2s;
 display:flex;
 flex-direction:column;
}
.cnb-section--alt .cnb-service-card{
 background:#fff;
}
.cnb-service-card:hover{
 border-color:var(--red);
 box-shadow:0 4px 24px rgba(215,37,34,.08);
 transform:translateY(-2px);
}
.cnb-service-card__icon{
 width:48px;
 height:48px;
 border-radius:var(--r-md);
 background:#FFF0F0;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-bottom:var(--sp-4);
 flex-shrink:0;
}
.cnb-service-card__icon svg{
 width:24px;
 height:24px;
 stroke:var(--red);
 fill:none;
 stroke-width:2;
 stroke-linecap:round;
 stroke-linejoin:round;
}
.cnb-service-card h3{
 margin-bottom:var(--sp-3);
}
.cnb-service-card p{
 color:#666;
 font-size:.9375rem;
 line-height:1.6;
 flex:1;
 margin-bottom:var(--sp-6);
}
.cnb-service-card__link{
 font-size:.875rem;
 font-weight:600;
 color:var(--red);
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 gap:.375rem;
 margin-top:auto;
}
.cnb-service-card__link:hover{text-decoration:underline;}

/* =============================================================================
 PROCESS STEPS
 ============================================================================= */
.cnb-process__grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:2px;
 background:var(--border);
 margin-top:var(--sp-12);
 border-radius:var(--r-lg);
 overflow:hidden;
}
.cnb-step{
 background:#fff;
 padding:var(--sp-8) var(--sp-6);
}
.cnb-section--alt .cnb-step{background:var(--bg-alt);}
.cnb-step__num{
 font-family:var(--font-mono);
 font-size:2.5rem;
 color:var(--red);
 line-height:1;
 margin-bottom:var(--sp-4);
 display:block;
}
.cnb-step h3{margin-bottom:var(--sp-2);}
.cnb-step p{color:#666;font-size:.9375rem;margin:0;}
@media (max-width:768px){
 .cnb-process__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
 .cnb-process__grid{grid-template-columns:1fr;}
}

/* =============================================================================
 TRUST / PERMIT SECTION
 ============================================================================= */
.cnb-trust__split{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:var(--sp-16);
 align-items:center;
}
.cnb-trust__list{
 margin-top:var(--sp-6);
 display:flex;
 flex-direction:column;
 gap:var(--sp-4);
}
.cnb-trust__item{
 display:flex;
 gap:var(--sp-4);
 align-items:flex-start;
}
.cnb-trust__check{
 width:22px;
 height:22px;
 border-radius:50%;
 background:var(--red);
 display:flex;
 align-items:center;
 justify-content:center;
 flex-shrink:0;
 margin-top:.1rem;
}
.cnb-trust__check svg{
 width:12px;
 height:12px;
 stroke:#fff;
 fill:none;
 stroke-width:2.5;
 stroke-linecap:round;
}
.cnb-trust__item p{
 font-size:.9375rem;
 color:var(--ink);
 margin:0;
 line-height:1.5;
}
.cnb-trust__item strong{color:var(--black);}

.cnb-trust__photo{
 position:relative;
 border-radius:var(--r-lg);
 overflow:hidden;
 aspect-ratio:4/5;
}
.cnb-trust__photo img{
 width:100%;
 height:100%;
 object-fit:cover;
}
.cnb-trust__badge{
 position:absolute;
 top:var(--sp-4);
 right:var(--sp-4);
 background:var(--red);
 color:#fff;
 font-family:var(--font-mono);
 font-size:.6875rem;
 letter-spacing:.08em;
 text-transform:uppercase;
 padding:.4rem .8rem;
 border-radius:var(--r);
 font-weight:400;
}

@media (max-width:768px){
 .cnb-trust__split{grid-template-columns:1fr;}
 .cnb-trust__photo{aspect-ratio:16/9;}
}

/* =============================================================================
 QUOTE FORM
 ============================================================================= */
.cnb-form-wrap{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:var(--sp-16);
 align-items:flex-start;
 margin-top:var(--sp-12);
}
.cnb-form-intro h2{margin-bottom:var(--sp-4);}
.cnb-form-intro p{color:#666;font-size:1rem;margin-bottom:var(--sp-6);}
.cnb-form-promises{
 display:flex;
 flex-direction:column;
 gap:var(--sp-3);
}
.cnb-form-promises li{
 display:flex;
 align-items:center;
 gap:.625rem;
 font-size:.9375rem;
 color:var(--ink);
}
.cnb-form-promises li::before{
 content:'';
 width:18px;
 height:18px;
 border-radius:50%;
 background:var(--red);
 flex-shrink:0;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
 background-size:10px;
 background-repeat:no-repeat;
 background-position:center;
}

/* Form card */
.cnb-form-card{
 background:#fff;
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 padding:var(--sp-8);
 box-shadow:0 4px 32px rgba(0,0,0,.06);
}

/* Progress */
.cnb-progress{
 height:3px;
 background:var(--border);
 border-radius:100px;
 margin-bottom:var(--sp-4);
 overflow:hidden;
}
.cnb-progress__bar{
 height:100%;
 background:var(--red);
 transition:width .3s ease;
 border-radius:100px;
}
.cnb-step-label{
 font-size:.8125rem;
 color:var(--muted);
 margin-bottom:var(--sp-6);
 font-family:var(--font-mono);
 letter-spacing:.05em;
}

/* Radio cards */
.cnb-radio-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:.5rem;
 margin-top:var(--sp-3);
}
.cnb-radio-card{
 display:flex;
 flex-direction:column;
 cursor:pointer;
}
.cnb-radio-card input[type="radio"]{
 position:absolute;
 opacity:0;
 pointer-events:none;
}
.cnb-radio-label{
 border:1.5px solid var(--border);
 border-radius:var(--r-md);
 padding:.75rem 1rem;
 font-size:.9375rem;
 font-weight:500;
 color:var(--ink);
 transition:border-color .15s,background .15s,color .15s;
 text-align:center;
}
.cnb-radio-card:has(input:checked) .cnb-radio-label,
.cnb-radio-card.is-checked .cnb-radio-label{
 border-color:var(--red);
 background:#FFF0F0;
 color:var(--red);
}

/* Form fields */
.cnb-field{
 display:flex;
 flex-direction:column;
 gap:.375rem;
 margin-bottom:var(--sp-4);
}
.cnb-field label{
 font-size:.875rem;
 font-weight:600;
 color:var(--black);
}
.cnb-field input{
 border:1.5px solid var(--border);
 border-radius:var(--r-md);
 padding:.75rem 1rem;
 font-size:1rem;
 font-family:var(--font-body);
 color:var(--black);
 outline:none;
 transition:border-color .15s;
 width:100%;
}
.cnb-field input:focus{border-color:var(--red);}

.cnb-form-legend{
 font-size:.9375rem;
 font-weight:600;
 color:var(--black);
 margin-bottom:var(--sp-3);
 display:block;
}
.cnb-fieldset{border:none;padding:0;margin:0 0 var(--sp-6);}

.cnb-form-actions{
 display:flex;
 gap:.75rem;
 margin-top:var(--sp-6);
}
.cnb-form-actions .cnb-btn{flex:1;justify-content:center;}

.cnb-form-privacy{
 font-size:.8125rem;
 color:var(--muted);
 margin-top:var(--sp-4);
 text-align:center;
}

/* Success state */
.cnb-form-success{
 display:none;
 text-align:center;
 padding:var(--sp-12) var(--sp-8);
}
.cnb-form-success__icon{
 width:64px;
 height:64px;
 border-radius:50%;
 background:var(--red);
 color:#fff;
 font-size:1.75rem;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto var(--sp-4);
}
.cnb-form-success h3{margin-bottom:var(--sp-2);}
.cnb-form-success p{color:#666;}

.cnb-form-error{
 display:none;
 background:#FFF0F0;
 border:1px solid #fcc;
 border-radius:var(--r-md);
 padding:var(--sp-4);
 font-size:.9375rem;
 color:var(--red);
 margin-top:var(--sp-4);
 text-align:center;
}

.cnb-form-step{display:none;}
.cnb-form-step.is-active{display:block;}

@media (max-width:768px){
 .cnb-form-wrap{grid-template-columns:1fr;}
}

/* =============================================================================
 FAQ
 ============================================================================= */
.cnb-faq{
 max-width:760px;
 margin-top:var(--sp-12);
}
.cnb-faq details{
 border-bottom:1px solid var(--border);
}
.cnb-faq summary{
 padding:var(--sp-6) 0;
 font-size:1rem;
 font-weight:600;
 color:var(--black);
 cursor:pointer;
 list-style:none;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:var(--sp-4);
 user-select:none;
}
.cnb-faq summary::-webkit-details-marker{display:none;}
.cnb-faq summary::after{
 content:'+';
 font-size:1.5rem;
 font-weight:300;
 color:var(--red);
 flex-shrink:0;
 transition:transform .2s;
}
.cnb-faq details[open] summary::after{
 transform:rotate(45deg);
}
.cnb-faq details[open] summary{color:var(--red);}
.cnb-faq details p{
 padding-bottom:var(--sp-6);
 color:#555;
 font-size:.9375rem;
 line-height:1.7;
}

/* =============================================================================
 NEIGHBOURHOOD SECTION (mini cards)
 ============================================================================= */
.cnb-hoods__grid{
 display:flex;
 flex-wrap:wrap;
 gap:.75rem;
 margin-top:var(--sp-8);
}
.cnb-hood-pill{
 display:inline-flex;
 align-items:center;
 gap:.5rem;
 border:1px solid var(--border);
 border-radius:100px;
 padding:.5rem 1.25rem;
 font-size:.9375rem;
 font-weight:500;
 color:var(--ink);
 text-decoration:none;
 transition:border-color .15s,color .15s;
}
.cnb-hood-pill:hover{border-color:var(--red);color:var(--red);}
.cnb-hood-pill__dot{
 width:7px;
 height:7px;
 border-radius:50%;
 background:var(--red);
 flex-shrink:0;
}

/* =============================================================================
 GALLERY STRIP
 ============================================================================= */
.cnb-gallery-strip{
 display:grid;
 grid-template-columns:2fr 1fr 1fr;
 gap:.5rem;
 margin-top:var(--sp-12);
 border-radius:var(--r-lg);
 overflow:hidden;
}
.cnb-gallery-strip > *{aspect-ratio:4/3;overflow:hidden;}
.cnb-gallery-strip > *:first-child{aspect-ratio:auto;grid-row:span 2;}
.cnb-gallery-strip img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform .5s;
}
.cnb-gallery-strip > *:hover img{transform:scale(1.04);}
@media (max-width:600px){
 .cnb-gallery-strip{grid-template-columns:1fr 1fr;}
 .cnb-gallery-strip > *:first-child{grid-row:auto;}
}

/* =============================================================================
 FOOTER
 ============================================================================= */
.cnb-footer{
 background:var(--bg-dark);
 color:rgba(255,255,255,.7);
 padding-block:var(--sp-16);
}
.cnb-footer__grid{
 display:grid;
 grid-template-columns:1.5fr 1fr 1fr 1fr;
 gap:var(--sp-12);
 padding-bottom:var(--sp-12);
 border-bottom:1px solid rgba(255,255,255,.08);
}
.cnb-footer__logo .cnb-logo__cnb{font-size:1.25rem;}
.cnb-footer__logo .cnb-logo__reno{font-size:1.25rem;color:#fff;}
.cnb-footer__tagline{
 font-size:.875rem;
 margin-top:var(--sp-3);
 line-height:1.6;
}
.cnb-footer__phone{
 display:inline-block;
 font-family:var(--font-mono);
 font-size:1rem;
 color:#fff;
 text-decoration:none;
 margin-top:var(--sp-4);
 letter-spacing:.04em;
}
.cnb-footer__col h4{
 font-size:.75rem;
 text-transform:uppercase;
 letter-spacing:.12em;
 color:rgba(255,255,255,.4);
 margin-bottom:var(--sp-4);
 font-weight:500;
}
.cnb-footer__col a{
 display:block;
 font-size:.9375rem;
 color:rgba(255,255,255,.65);
 text-decoration:none;
 margin-bottom:var(--sp-3);
 transition:color .15s;
}
.cnb-footer__col a:hover{color:var(--red);}
.cnb-footer__bottom{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding-top:var(--sp-6);
 font-size:.8125rem;
}
.cnb-footer__legal{display:flex;gap:var(--sp-6);}
.cnb-footer__legal a{color:rgba(255,255,255,.4);text-decoration:none;}
.cnb-footer__legal a:hover{color:rgba(255,255,255,.7);}

@media (max-width:768px){
 .cnb-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
 .cnb-footer__grid{grid-template-columns:1fr;}
 .cnb-footer__bottom{flex-direction:column;gap:var(--sp-4);text-align:center;}
}

/* =============================================================================
 STICKY CTA BAR (mobile)
 ============================================================================= */
.cnb-sticky-bar{
 display:none;
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 z-index:90;
 background:#fff;
 border-top:1px solid var(--border);
 padding:.625rem var(--pad);
 gap:.5rem;
 opacity:0;
 transform:translateY(100%);
 transition:opacity .25s,transform .25s;
}
.cnb-sticky-bar.is-visible{
 opacity:1;
 transform:translateY(0);
}
.cnb-sticky-bar__call{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:.5rem;
 flex:1;
 padding:.75rem;
 background:var(--bg-dark);
 color:#fff;
 border-radius:var(--r-md);
 font-weight:600;
 font-size:.9375rem;
 text-decoration:none;
}
.cnb-sticky-bar__quote{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:.5rem;
 flex:1;
 padding:.75rem;
 background:var(--red);
 color:#fff;
 border-radius:var(--r-md);
 font-weight:600;
 font-size:.9375rem;
 text-decoration:none;
}
@media (max-width:768px){
 .cnb-sticky-bar{display:flex;}
 body{padding-bottom:72px;}
}

/* =============================================================================
 NEIGHBOURHOOD PAGE
 ============================================================================= */
.cnb-nb-hero{
 background:var(--bg-alt);
 padding-block:var(--sp-16);
}
.cnb-nb-stats{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:1px;
 background:var(--border);
 border-radius:var(--r-lg);
 overflow:hidden;
 margin-top:var(--sp-12);
}
.cnb-nb-stat{
 background:#fff;
 padding:var(--sp-8) var(--sp-6);
 text-align:center;
}
.cnb-nb-stat__n{
 font-family:var(--font-mono);
 font-size:2rem;
 color:var(--red);
 display:block;
 margin-bottom:.375rem;
}
.cnb-nb-stat__l{
 font-size:.8125rem;
 color:var(--muted);
 text-transform:uppercase;
 letter-spacing:.08em;
}
@media (max-width:600px){
 .cnb-nb-stats{grid-template-columns:1fr;}
}

/* =============================================================================
 UTILITY
 ============================================================================= */
.mt-12{margin-top:var(--sp-12);}
.mt-6{margin-top:var(--sp-6);}
.text-muted{color:var(--muted);}
.text-red{color:var(--red);}
.font-mono{font-family:var(--font-mono);}
.sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 border:0;
}
/* =============================================================================
 CNB ANIMATION LAYER — "Exclusive Premium" v1.0
 Parallax · Glassmorphism · Spring Physics · Text Reveal · Magnetic
 Respects prefers-reduced-motion
 ============================================================================= */

/* ── 1. HERO PARALLAX ORBS ─────────────────────────────────────────────── */
.cnb-slider{
 overflow:hidden;
}
/* Ambient floating gradient orb — top right */
.cnb-slider::before{
 content:'';
 position:absolute;
 width:700px;
 height:700px;
 background:radial-gradient(ellipse at center,
 rgba(215,37,34,0.10) 0%,
 rgba(215,37,34,0.03) 50%,
 transparent 70%);
 border-radius:50%;
 top:-180px;
 right:-140px;
 z-index:2;
 pointer-events:none;
 animation:cnb-orb1 10s ease-in-out infinite;
}
/* Second orb — bottom left */
.cnb-slider::after{
 content:'';
 position:absolute;
 width:500px;
 height:500px;
 background:radial-gradient(ellipse at center,
 rgba(255,255,255,0.06) 0%,
 transparent 65%);
 border-radius:50%;
 bottom:-100px;
 left:-80px;
 z-index:2;
 pointer-events:none;
 animation:cnb-orb2 13s ease-in-out infinite;
}
@keyframes cnb-orb1{
 0%,100%{transform:translate(0px,0px) scale(1);}
 33%{transform:translate(-40px,30px) scale(1.08);}
 66%{transform:translate(25px,-20px) scale(0.95);}
}
@keyframes cnb-orb2{
 0%,100%{transform:translate(0px,0px) scale(1);}
 40%{transform:translate(30px,-25px) scale(1.06);}
 70%{transform:translate(-20px,15px) scale(0.96);}
}

/* ── 2. GLASSMORPHISM — Service cards ──────────────────────────────────── */
.cnb-service-card{
 background:rgba(255,255,255,0.88);
 border:1px solid rgba(255,255,255,0.70);
 box-shadow:
 0 4px 24px rgba(0,0,0,0.06),
 inset 0 1px 0 rgba(255,255,255,0.9);
}
@supports (backdrop-filter:blur(1px)){
 .cnb-service-card{
 backdrop-filter:blur(16px) saturate(160%);
 -webkit-backdrop-filter:blur(16px) saturate(160%);
}
}

/* ── 3. SPRING HOVER — weightlessness ──────────────────────────────────── */
.cnb-service-card{
 transition:
 transform 0.55s cubic-bezier(0.34,1.56,0.64,1),
 box-shadow 0.40s ease,
 border-color 0.3s ease;
 will-change:transform;
}
.cnb-service-card:hover{
 transform:translateY(-14px) scale(1.025);
 box-shadow:
 0 28px 72px rgba(0,0,0,0.13),
 0 8px 24px rgba(215,37,34,0.07),
 inset 0 1px 0 rgba(255,255,255,1);
 border-color:rgba(215,37,34,0.18);
}

/* ── 4. HEADER GLASS ON SCROLL ─────────────────────────────────────────── */
.cnb-header{
 transition:background 0.35s ease,box-shadow 0.35s ease,backdrop-filter 0.35s ease;
}
.cnb-header.is-scrolled{
 background:rgba(10,10,10,0.92) !important;
 border-bottom-color:rgba(204,32,39,0.18) !important;
 box-shadow:0 4px 40px rgba(0,0,0,0.45);
}
@supports (backdrop-filter:blur(1px)){
 .cnb-header.is-scrolled{
 backdrop-filter:blur(24px) saturate(160%);
 -webkit-backdrop-filter:blur(24px) saturate(160%);
}
}

/* ── 5. TEXT REVEAL — clip-path stagger ────────────────────────────────── */
.cnb-reveal{
 clip-path:inset(0 0 110% 0);
 opacity:0;
 transition:
 clip-path 0.75s cubic-bezier(0.16,1,0.3,1),
 opacity 0.4s ease;
}
.cnb-reveal.is-visible{
 clip-path:inset(0 0 0% 0);
 opacity:1;
}
.cnb-reveal--d1{transition-delay:0.05s;}
.cnb-reveal--d2{transition-delay:0.15s;}
.cnb-reveal--d3{transition-delay:0.25s;}
.cnb-reveal--d4{transition-delay:0.35s;}

/* ── 6. MAGNETIC BUTTON ────────────────────────────────────────────────── */
.cnb-btn{
 transition:
 transform 0.15s ease,
 background 0.25s ease,
 box-shadow 0.25s ease;
 will-change:transform;
}
.cnb-btn--red:hover,
.cnb-btn--red:focus-visible{
 box-shadow:0 8px 28px rgba(215,37,34,0.35);
}

/* ── 7. PROCESS STEPS — animated connector line ─────────────────────────── */
.cnb-steps{
 position:relative;
}
.cnb-steps::before{
 content:'';
 position:absolute;
 top:2.25rem;
 left:calc(12.5% + 1rem);
 right:calc(12.5% + 1rem);
 height:2px;
 background:var(--border);
 z-index:0;
}
.cnb-steps::after{
 content:'';
 position:absolute;
 top:2.25rem;
 left:calc(12.5% + 1rem);
 width:0%;
 height:2px;
 background:var(--red);
 z-index:1;
 transition:width 1.4s cubic-bezier(0.16,1,0.3,1);
}
.cnb-steps.is-visible::after{
 width:calc(75% - 2rem);
}
@media (max-width:768px){
 .cnb-steps::before,
 .cnb-steps::after{display:none;}
}

/* ── 8. STATS GLOW ─────────────────────────────────────────────────────── */
.cnb-stat__num{
 transition:text-shadow 0.6s ease;
}
.cnb-stat__num.is-counting{
 text-shadow:0 0 40px rgba(215,37,34,0.50);
}

/* ── 9. GALLERY HOVER ──────────────────────────────────────────────────── */
.cnb-gallery__item{
 overflow:hidden;
}
.cnb-gallery__item img{
 transition:transform 0.65s cubic-bezier(0.16,1,0.3,1),filter 0.4s ease;
 will-change:transform;
}
.cnb-gallery__item:hover img{
 transform:scale(1.07);
 filter:brightness(1.06) saturate(1.1);
}

/* ── 10. STICKY MOBILE CALL BAR ────────────────────────────────────────── */
.cnb-sticky-bar{
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 z-index:200;
 background:var(--red);
 color:#fff;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:1rem;
 padding:.9rem 1rem;
 transform:translateY(100%);
 transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
 box-shadow:0 -4px 24px rgba(0,0,0,0.18);
}
.cnb-sticky-bar.is-visible{
 transform:translateY(0);
}
.cnb-sticky-bar__phone{
 font-weight:700;
 font-size:1.125rem;
 color:#fff;
 text-decoration:none;
 letter-spacing:.02em;
}
.cnb-sticky-bar__cta{
 background:rgba(255,255,255,0.18);
 border:1px solid rgba(255,255,255,0.4);
 color:#fff;
 padding:.4rem .9rem;
 border-radius:6px;
 font-size:.875rem;
 font-weight:600;
 text-decoration:none;
 transition:background 0.2s ease;
}
.cnb-sticky-bar__cta:hover{background:rgba(255,255,255,0.28);}
@media (min-width:769px){.cnb-sticky-bar{display:none;}}

/* ── 11. HERO SLIDE TEXT — glow effect ─────────────────────────────────── */
.cnb-slider__h1{
 transition:opacity 0.4s ease,transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.cnb-slide:not(.is-active) .cnb-slider__h1{
 opacity:0;
 transform:translateY(20px);
}
.cnb-slide.is-active .cnb-slider__h1{
 opacity:1;
 transform:translateY(0);
}

/* ── 12. SCROLL PROGRESS BAR (top of page) ─────────────────────────────── */
.cnb-progress-bar{
 position:fixed;
 top:0;
 left:0;
 width:0%;
 height:3px;
 background:var(--red);
 z-index:9999;
 transition:width 0.05s linear;
 transform-origin:left;
}

/* ── prefers-reduced-motion — kill all ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
 .cnb-slider::before,
 .cnb-slider::after{animation:none !important;}
 .cnb-service-card{transition:none !important;}
 .cnb-reveal{clip-path:none !important;opacity:1 !important;transition:none !important;}
 .cnb-steps::after{transition:none !important;width:calc(75% - 2rem) !important;}
 .cnb-gallery__item img{transition:none !important;}
 .cnb-btn{transition:background 0.2s ease !important;}
}
/* =============================================================================
 CNB NEIGHBOURHOOD PAGES — Layout styles
 ============================================================================= */

/* ── HERO LAYOUT ────────────────────────────────────────────────────────── */
.cnb-nbhd__hero{
 padding-top:5rem;
 padding-bottom:4rem;
}
.cnb-nbhd__hero-inner{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:4rem;
 align-items:center;
}
.cnb-nbhd__h1{
 font-family:var(--font-display);
 font-size:var(--fs-h1);
 line-height:1.08;
 letter-spacing:-.02em;
 margin:.75rem 0 1rem;
 color:var(--black);
}
.cnb-nbhd__intro{
 font-size:1.125rem;
 line-height:1.7;
 color:var(--muted);
 max-width:520px;
}

/* ── BADGE CARDS ────────────────────────────────────────────────────────── */
.cnb-nbhd__hero-badges{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:1.25rem;
}
.cnb-badge-card{
 background:var(--bg-alt);
 border:1px solid var(--border);
 border-radius:12px;
 padding:1.5rem;
 display:flex;
 flex-direction:column;
 gap:.4rem;
 transition:box-shadow .3s ease,transform .4s cubic-bezier(0.34,1.56,0.64,1);
}
.cnb-badge-card:hover{
 box-shadow:0 8px 32px rgba(0,0,0,.08);
 transform:translateY(-4px);
}
.cnb-badge-card__num{
 font-family:var(--font-display);
 font-size:clamp(1.25rem,2.5vw,1.625rem);
 font-weight:600;
 line-height:1;
}
.cnb-badge-card__label{
 font-size:.8125rem;
 color:var(--muted);
 text-transform:uppercase;
 letter-spacing:.07em;
}

/* ── WHY GRID ───────────────────────────────────────────────────────────── */
.cnb-why-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:2rem;
 margin-top:2.5rem;
}
.cnb-why-item{
 background:var(--bg);
 border:1px solid var(--border);
 border-radius:12px;
 padding:1.75rem 1.5rem;
 transition:box-shadow .3s ease,transform .4s cubic-bezier(0.34,1.56,0.64,1);
}
.cnb-why-item:hover{
 box-shadow:0 8px 28px rgba(0,0,0,.08);
 transform:translateY(-6px);
}
.cnb-why-item__icon{
 font-size:1.75rem;
 margin-bottom:.75rem;
}
.cnb-why-item h3{
 font-family:var(--font-display);
 font-size:1.125rem;
 margin-bottom:.5rem;
}
.cnb-why-item p{
 font-size:.9rem;
 color:var(--muted);
 line-height:1.65;
}

/* ── SERVICE GRID (nbhd page) ───────────────────────────────────────────── */
.cnb-service-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:1.5rem;
}
.cnb-service-grid .cnb-service-card h3{
 font-size:1.125rem;
 margin-bottom:.6rem;
}
.cnb-service-grid .cnb-service-card p{
 font-size:.9rem;
 color:var(--muted);
 line-height:1.65;
}

/* ── PILLS ──────────────────────────────────────────────────────────────── */
.cnb-pills{
 display:flex;
 flex-wrap:wrap;
 gap:.6rem;
 justify-content:center;
 margin-top:1.5rem;
}
.cnb-pill{
 background:var(--bg);
 border:1px solid var(--border);
 border-radius:100px;
 padding:.35rem .9rem;
 font-size:.875rem;
 color:var(--ink);
 transition:background .2s,border-color .2s;
}
.cnb-pill:hover{
 background:var(--red);
 border-color:var(--red);
 color:#fff;
}

/* ── TRUST LIST ─────────────────────────────────────────────────────────── */
.cnb-trust-list{
 list-style:none;
 padding:0;
 margin:0;
 display:flex;
 flex-direction:column;
 gap:.6rem;
}
.cnb-trust-list li{
 font-size:.9375rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
 .cnb-nbhd__hero-inner{grid-template-columns:1fr;gap:2.5rem;}
 .cnb-nbhd__hero-badges{grid-template-columns:repeat(2,1fr);}
 .cnb-why-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
 .cnb-service-grid{grid-template-columns:1fr;}
 .cnb-why-grid{grid-template-columns:1fr;}
 .cnb-nbhd__hero-badges{grid-template-columns:1fr 1fr;gap:.75rem;}
 .cnb-badge-card{padding:1.1rem;}
}

/* =============================================================================
 SERVICE PAGE — split hero + supporting layout v2.0
 ============================================================================= */

/* ── Service hero split layout ──────────────────────────────────────────── */
.cnb-svc-hero{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:4rem;
 align-items:center;
}
.cnb-svc-hero__media{
 position:relative;
 border-radius:var(--r-lg);
 overflow:hidden;
 aspect-ratio:4 / 3;
 box-shadow:0 24px 64px rgba(0,0,0,.13);
}
.cnb-svc-hero__cap{
 position:absolute;
 bottom:1rem;
 left:1rem;
 background:rgba(0,0,0,.6);
 color:rgba(255,255,255,.85);
 font-family:var(--font-mono);
 font-size:.75rem;
 padding:.35rem .75rem;
 border-radius:4px;
 backdrop-filter:blur(4px);
 -webkit-backdrop-filter:blur(4px);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:900px){
 .cnb-svc-hero{
 grid-template-columns:1fr;
 gap:2.5rem;
}
 .cnb-svc-hero__media{
 order:-1;
 aspect-ratio:16 / 9;
}
}
@media (max-width:600px){
 .cnb-svc-hero__media{
 aspect-ratio:4 / 3;
}
}

/* =============================================================================
 TRUST BAND BLOCK — horizontal badge strip
 ============================================================================= */
.trust-band{
 padding:var(--sp-6) 0;
 border-top:1px solid var(--border);
 border-bottom:1px solid var(--border);
 background:var(--bg-alt);
}
.trust-band .container,
.trust-band .cnb-container{
 max-width:var(--container);
 margin-inline:auto;
 padding-inline:var(--pad);
}
.trust-band__inner{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:center;
 gap:1rem 2rem;
}
.trust-band__chip{
 display:flex;
 align-items:center;
 gap:.5rem;
 font-size:.875rem;
 color:var(--ink);
 white-space:nowrap;
}
.trust-band__chip svg{
 width:18px;
 height:18px;
 flex-shrink:0;
 color:var(--red);
}
.trust-band__chip strong{font-weight:600;}

/* =============================================================================
 COUNTER BAND BLOCK
 ============================================================================= */
.counter-band{
 padding:var(--sp-16) 0;
 background:var(--bg-dark);
 color:#fff;
}
.counter-band .container,
.counter-band .cnb-container{
 max-width:var(--container);
 margin-inline:auto;
 padding-inline:var(--pad);
}
.counter-band__grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:2rem;
 text-align:center;
}
.counter-band__num{
 font-family:var(--font-display);
 font-size:clamp(2.25rem,4vw,3.5rem);
 font-weight:500;
 color:#fff;
 line-height:1;
 margin-bottom:.5rem;
}
.counter-band__label{
 font-size:.8125rem;
 color:rgba(255,255,255,.55);
 text-transform:uppercase;
 letter-spacing:.08em;
}
@media (max-width:700px){
 .counter-band__grid{grid-template-columns:repeat(2,1fr);}
 .trust-band__inner{gap:.75rem 1.25rem;}
}

/* =============================================================================
 GALLERY PAGE — 3-col masonry grid + filter chips
 ============================================================================= */

/* ── Filter chips ─────────────────────────────────────────────────────── */
.gallery-filters{
 display:flex;
 flex-wrap:wrap;
 gap:.5rem;
 margin-top:var(--sp-8);
}
.gallery-chip{
 display:inline-flex;
 align-items:center;
 gap:.4rem;
 padding:.4rem 1rem;
 border-radius:100px;
 border:1px solid var(--border);
 background:var(--bg);
 font-size:.875rem;
 color:var(--ink);
 cursor:pointer;
 transition:background .2s,border-color .2s,color .2s;
}
.gallery-chip:hover{
 border-color:var(--red);
 color:var(--red);
}
.gallery-chip.is-active{
 background:var(--red);
 border-color:var(--red);
 color:#fff;
}
.chip-count{
 font-family:var(--font-mono);
 font-size:.75rem;
 opacity:.75;
}

/* ── Masonry grid ─────────────────────────────────────────────────────── */
.gallery-editorial{
 columns:3;
 column-gap:1rem;
 margin-top:var(--sp-8);
}
.gallery-tile{
 display:block;
 break-inside:avoid;
 margin-bottom:1rem;
 border-radius:var(--r-md);
 overflow:hidden;
 position:relative;
 text-decoration:none;
 background:var(--bg-alt);
}
.gallery-tile img{
 width:100%;
 height:auto;
 display:block;
 transition:transform .65s cubic-bezier(0.16,1,0.3,1),filter .4s ease;
 will-change:transform;
}
.gallery-tile:hover img{
 transform:scale(1.04);
 filter:brightness(1.05) saturate(1.08);
}
.gallery-tile__caption{
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 padding:.75rem 1rem;
 background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 100%);
 display:flex;
 flex-direction:column;
 gap:.15rem;
 opacity:0;
 transition:opacity .3s ease;
}
.gallery-tile:hover .gallery-tile__caption,
.gallery-tile:focus .gallery-tile__caption{
 opacity:1;
}
.gallery-tile__cat{
 font-family:var(--font-mono);
 font-size:.6875rem;
 text-transform:uppercase;
 letter-spacing:.08em;
 color:rgba(255,255,255,.7);
}
.gallery-tile__label{
 font-size:.875rem;
 color:#fff;
 font-weight:500;
}

@media (max-width:900px){
 .gallery-editorial{columns:2;}
}
@media (max-width:540px){
 .gallery-editorial{columns:1;}
}

/* -------------------------------------------------------
 TILES SECTION (What We Build — 6 photo tiles)
 v1.0 — 2026-05-22
 ------------------------------------------------------- */
.cnb-tiles-section{padding:5rem 0;background:#fff;}
.cnb-tiles__sub{
 color:#777;
 margin-top:0.5rem;
 margin-bottom:3rem;
 font-size:1.0625rem;
 line-height:1.6;
}
.cnb-tiles__grid{
 display:grid;
 grid-template-columns:1fr;
 gap:1.25rem;
}
@media (min-width:640px){
 .cnb-tiles__grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
 .cnb-tiles__grid{grid-template-columns:repeat(3,1fr);}
}
.cnb-tile{
 display:block;
 border-radius:12px;
 overflow:hidden;
 background:#fff;
 border:1px solid #ebebeb;
 box-shadow:0 2px 10px rgba(0,0,0,0.06);
 transition:box-shadow 0.3s ease,transform 0.3s ease;
 text-decoration:none;
 color:inherit;
}
.cnb-tile:hover{
 box-shadow:0 20px 50px rgba(0,0,0,0.14);
 transform:translateY(-4px);
}
.cnb-tile__img-wrap{
 position:relative;
 aspect-ratio:4/3;
 overflow:hidden;
}
.cnb-tile__img-wrap img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.7s ease;
 display:block;
}
.cnb-tile:hover .cnb-tile__img-wrap img{transform:scale(1.10);}
.cnb-tile__overlay{
 position:absolute;
 inset:0;
 background:rgba(204,32,39,0);
 transition:background 0.3s ease;
}
.cnb-tile:hover .cnb-tile__overlay{background:rgba(204,32,39,0.32);}
.cnb-tile__body{padding:1.25rem 1.5rem 1.5rem;}
.cnb-tile__body h3{
 font-size:1.125rem;
 font-weight:700;
 color:#1a1a2e;
 margin:0 0 0.5rem;
 line-height:1.3;
}
.cnb-tile__meta{
 display:inline-flex;
 align-items:center;
 gap:5px;
 font-size:0.78rem;
 font-weight:600;
 color:#cc2027;
}
.cnb-tile__meta svg{flex-shrink:0;}

/* -------------------------------------------------------
 GALLERY PAGE v3 — Category filter + photo grid
 2026-05-22
 ------------------------------------------------------- */
.cnb-gallery-header{
 padding:4rem 0 3rem;
 background:#fff;
 border-bottom:1px solid #f0f0f0;
}
.cnb-gallery-header h1{margin-bottom:0.5rem;}
.cnb-gallery-header__sub{color:#777;font-size:1.05rem;margin-bottom:2rem;}

.cnb-gallery-filters{
 display:flex;
 flex-wrap:wrap;
 gap:0.5rem;
 margin-top:2rem;
}
.cnb-chip{
 display:inline-flex;
 align-items:center;
 gap:6px;
 padding:0.45rem 1.1rem;
 border-radius:999px;
 border:none;
 cursor:pointer;
 font-size:0.875rem;
 font-weight:600;
 font-family:inherit;
 background:#f2f2f2;
 color:#333;
 transition:all 0.2s ease;
}
.cnb-chip:hover{background:#e5e5e5;}
.cnb-chip.is-active{background:#cc2027;color:#fff;}
.cnb-chip__count{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-width:20px;
 height:20px;
 padding:0 5px;
 border-radius:999px;
 font-size:0.72rem;
 font-weight:700;
 background:rgba(255,255,255,0.25);
}
.cnb-chip.is-active .cnb-chip__count{background:rgba(255,255,255,0.3);}

.cnb-gallery-wrap{padding:3rem 0 5rem;}

.cnb-gallery-grid{
 columns:4;
 column-gap:0.875rem;
}
@media (max-width:1100px){.cnb-gallery-grid{columns:3;}}
@media (max-width:700px){.cnb-gallery-grid{columns:2;}}
@media (max-width:420px){.cnb-gallery-grid{columns:1;}}

.cnb-gallery-tile{
 display:block;
 break-inside:avoid;
 margin-bottom:0.875rem;
 border-radius:10px;
 overflow:hidden;
 position:relative;
 text-decoration:none;
 background:#f5f5f5;
 cursor:pointer;
}
.cnb-gallery-tile__img{position:relative;overflow:hidden;}
.cnb-gallery-tile__img img{
 width:100%;
 height:auto;
 display:block;
 transition:transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.cnb-gallery-tile:hover .cnb-gallery-tile__img img{transform:scale(1.06);}

.cnb-gallery-tile__hover{
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 background:rgba(204,32,39,0);
 transition:background 0.3s ease;
 opacity:0;
 transition:opacity 0.3s ease;
}
.cnb-gallery-tile:hover .cnb-gallery-tile__hover{opacity:1;background:rgba(204,32,39,0.35);}

.cnb-gallery-tile__cat{
 display:block;
 padding:0.3rem 0.75rem 0.4rem;
 font-size:0.72rem;
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:0.06em;
 color:#888;
 background:#fff;
}

/* ============================================================
 GALLERY v2 — 2026-05-22 — Senso-style in-photo labels + reveal
 ============================================================ */

/* Category label INSIDE photo (Senso Design pattern) */
.cnb-gallery-tile__cat{
 position:absolute !important;
 bottom:0 !important;
 left:0 !important;
 right:0 !important;
 display:block !important;
 padding:2.5rem 0.875rem 0.7rem !important;
 background:linear-gradient(transparent,rgba(10,15,25,0.82)) !important;
 color:#fff !important;
 font-size:0.695rem !important;
 font-weight:700 !important;
 text-transform:uppercase !important;
 letter-spacing:0.08em !important;
 opacity:0 !important;
 transform:translateY(5px) !important;
 transition:opacity 0.32s ease,transform 0.32s ease !important;
 z-index:3 !important;
}
.cnb-gallery-tile:hover .cnb-gallery-tile__cat{
 opacity:1 !important;
 transform:translateY(0) !important;
}

/* Hover icon — more elegant:smaller,top-right corner */
.cnb-gallery-tile__hover{
 align-items:flex-start !important;
 justify-content:flex-end !important;
 padding:12px !important;
}
.cnb-gallery-tile__hover svg{
 opacity:0.92;
 filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

/* Scroll reveal — tiles fade+slide up as they enter viewport */
.cnb-gallery-tile{
 opacity:0;
 transform:translateY(22px);
 transition:opacity 0.5s ease,transform 0.5s ease,box-shadow 0.3s ease;
}
.cnb-gallery-tile.cnb-tile-visible{
 opacity:1;
 transform:translateY(0);
}
/* Tiles in first fold load instantly (set by JS) */
.cnb-gallery-tile.cnb-tile-instant{
 opacity:1 !important;
 transform:none !important;
 transition:box-shadow 0.3s ease;
}

/* Filter count badge */
.cnb-gallery-count{
 display:inline-block;
 font-size:0.8rem;
 color:#888;
 margin-left:1rem;
 font-weight:500;
}

/* Chips — Revival-style:pill,subtle border */
.cnb-chip{
 border-radius:999px !important;
 border:1.5px solid #e0e0e0 !important;
 padding:0.45rem 1.1rem !important;
 font-size:0.82rem !important;
 font-weight:600 !important;
 background:#fff !important;
 color:#333 !important;
 transition:all 0.2s ease !important;
 cursor:pointer !important;
}
.cnb-chip:hover{
 border-color:#cc2027 !important;
 color:#cc2027 !important;
 background:#fff !important;
}
.cnb-chip.is-active{
 background:#cc2027 !important;
 border-color:#cc2027 !important;
 color:#fff !important;
}
.cnb-chip__count{
 background:transparent !important;
 font-size:0.75rem !important;
 opacity:0.75 !important;
 margin-left:2px !important;
}
.cnb-chip.is-active .cnb-chip__count{opacity:0.85 !important;}

/* =============================================================================
 DESIGN MOLECULES v2 — fixes applied 2026-05-22
 Ref:refactoring-ui (spacing scale) + ux-heuristics (mobile UX) + interface-design (shadows)
 ============================================================================= */

/* FIX 1 — Dead zone:reduce top padding cnb-tiles-section (5rem→3rem = 48px scale)
 Issue:159px visual gap between dark stats bar and first content (severity S2) */
.cnb-tiles-section{
 padding-top:3rem !important;
}

/* FIX 2 — Service cards v2:add elevation shadow (currently flat = no elevation signal)
 Issue:cards look non-interactive without depth cue (severity S1) */
.service-card-v2{
 box-shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
 transition:box-shadow 0.2s ease,transform 0.2s ease;
 border-radius:12px;
 overflow:hidden;
}
.service-card-v2:hover{
 box-shadow:0 6px 20px rgba(0,0,0,0.10),0 2px 6px rgba(0,0,0,0.06);
 transform:translateY(-3px);
}

/* FIX 3 — Ghost button mobile:stronger border + white bg so it reads on dark hero
 Issue:"See our projects" barely visible on dark hero image (severity S2) */
@media (max-width:768px){
 .cnb-btn--ghost{
 border:2px solid rgba(255,255,255,0.85) !important;
 background:rgba(255,255,255,0.12) !important;
 backdrop-filter:blur(4px);
 -webkit-backdrop-filter:blur(4px);
}
 .cnb-btn--ghost:hover{
 background:rgba(255,255,255,0.22) !important;
 border-color:#fff !important;
}
}

/* FIX 4 — Mobile header phone:prevent 3-line wrap,compact display
 Issue:phone number breaks to 3 lines in header red pill (severity S1) */
@media (max-width:480px){
 .cnb-header__phone{
 font-size:0.78rem !important;
 letter-spacing:0 !important;
 padding:0.35rem 0.65rem !important;
 white-space:nowrap !important;
}
}

/* TILES WIDER — 2026-05-23
 Розширюємо 6 тайлів до 1520px (з 1240px).
 aspect-ratio:4/3 + object-fit:cover — пропорції не змінюються. */
.cnb-tiles-section .cnb-container{
 max-width:1520px;
}

/* ═══════════════════════════════════════════════════════════
 ABOUT / WHO WE ARE — 2026-05-23
 Split:text left + 4 stats cards right
 ═══════════════════════════════════════════════════════════ */
.cnb-about{padding:5rem 0;background:#fff;}
.cnb-about__split{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:4rem;
 align-items:center;
}
@media (max-width:900px){
 .cnb-about__split{grid-template-columns:1fr;gap:3rem;}
}
.cnb-about__body{max-width:560px;}
.cnb-about__body h2{
 font-size:clamp(1.75rem,3vw,2.5rem);
 font-weight:800;
 line-height:1.15;
 color:#1a1a2e;
 margin:0.75rem 0 1.25rem;
}
.cnb-about__body h2 em{
 font-style:normal;
 color:#cc2027;
}
.cnb-about__body > p{
 font-size:1.0625rem;
 line-height:1.75;
 color:#555;
 margin-bottom:2rem;
}
/* 3 promise pills */
.cnb-about__pills{
 display:flex;
 flex-direction:column;
 gap:0.75rem;
 margin-bottom:2.25rem;
}
.cnb-about__pill{
 display:flex;
 align-items:flex-start;
 gap:0.875rem;
}
.cnb-about__pill-icon{
 flex-shrink:0;
 width:36px;
 height:36px;
 background:#fff5f5;
 border-radius:8px;
 display:flex;
 align-items:center;
 justify-content:center;
}
.cnb-about__pill-icon svg{width:18px;height:18px;stroke:#cc2027;}
.cnb-about__pill-text strong{display:block;font-size:0.9375rem;color:#1a1a2e;font-weight:700;}
.cnb-about__pill-text span{font-size:0.875rem;color:#777;line-height:1.4;}
/* Stats grid — right side */
.cnb-about__stats{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:1rem;
}
.cnb-about__stat-card{
 background:#1a1a2e;
 border-radius:16px;
 padding:2rem 1.5rem;
 text-align:center;
 position:relative;
 overflow:hidden;
}
.cnb-about__stat-card::before{
 content:'';
 position:absolute;
 top:-30px;right:-30px;
 width:100px;height:100px;
 background:rgba(204,32,39,0.12);
 border-radius:50%;
}
.cnb-about__stat-card--accent{background:#cc2027;}
.cnb-about__stat-num{
 font-size:clamp(2.25rem,4vw,3rem);
 font-weight:900;
 color:#fff;
 line-height:1;
 display:block;
 margin-bottom:0.5rem;
 font-variant-numeric:tabular-nums;
}
.cnb-about__stat-label{
 font-size:0.8125rem;
 color:rgba(255,255,255,0.7);
 text-transform:uppercase;
 letter-spacing:0.07em;
 font-weight:600;
 line-height:1.3;
}
.cnb-about__stat-card--accent .cnb-about__stat-label{color:rgba(255,255,255,0.85);}

/* ═══════════════════════════════════════════════════════════
 ABOUT EDITORIAL v2 — 2026-05-23
 Dark split:left panel + watermark + photo right
 ═══════════════════════════════════════════════════════════ */
.cnb-about-ed{overflow:hidden;}
.cnb-about-ed__inner{
 display:grid;
 grid-template-columns:1.1fr 0.9fr;
 min-height:700px;
}
/* ── LEFT DARK PANEL ── */
.cnb-about-ed__left{
 background:#13121f;
 position:relative;
 overflow:hidden;
 display:flex;
 align-items:center;
}
.cnb-about-ed__watermark{
 position:absolute;
 bottom:-0.15em;
 right:-0.1em;
 font-size:22vw;
 font-weight:900;
 line-height:1;
 letter-spacing:-0.04em;
 color:transparent;
 -webkit-text-stroke:1px rgba(255,255,255,0.05);
 pointer-events:none;
 user-select:none;
 white-space:nowrap;
}
.cnb-about-ed__content{
 position:relative;
 z-index:2;
 padding:5rem 3.5rem 5rem 4.5rem;
 max-width:640px;
}
.cnb-eyebrow--light{
 color:rgba(255,255,255,0.45) !important;
 border-color:rgba(255,255,255,0.12) !important;
}
.cnb-about-ed__h2{
 font-size:clamp(2rem,2.6vw,3rem);
 font-weight:800;
 line-height:1.1;
 color:#fff;
 margin:0.875rem 0 1.75rem;
 letter-spacing:-0.02em;
}
.cnb-about-ed__h2 em{
 font-style:normal;
 color:#cc2027;
 display:block;
}
.cnb-about-ed__content p{
 color:rgba(255,255,255,0.65);
 font-size:1rem;
 line-height:1.78;
 margin-bottom:1.1rem;
}
.cnb-about-ed__tags{
 display:flex;
 flex-wrap:wrap;
 gap:0.5rem;
 margin-top:1.75rem;
}
.cnb-about-ed__tags span{
 border:1px solid rgba(255,255,255,0.18);
 border-radius:999px;
 padding:0.3rem 0.85rem;
 font-size:0.75rem;
 color:rgba(255,255,255,0.55);
 text-transform:uppercase;
 letter-spacing:0.08em;
 font-weight:600;
}
/* Ghost light button */
.cnb-btn--ghost-light{
 border:1.5px solid rgba(255,255,255,0.35) !important;
 color:#fff !important;
 background:transparent !important;
 padding:0.75rem 1.75rem !important;
 border-radius:4px !important;
 font-weight:700 !important;
 font-size:0.875rem !important;
 transition:border-color 0.2s,background 0.2s !important;
 text-decoration:none !important;
 text-transform:uppercase !important;
 letter-spacing:0.06em !important;
}
.cnb-btn--ghost-light:hover{
 border-color:#cc2027 !important;
 background:#cc2027 !important;
}
/* ── RIGHT:photo + sidebar stats ── */
.cnb-about-ed__right{
 display:grid;
 grid-template-columns:1fr 90px;
}
.cnb-about-ed__photo{
 position:relative;
 overflow:hidden;
}
.cnb-about-ed__photo img{
 width:100%;height:100%;
 object-fit:cover;
 display:block;
 transition:transform 8s ease;
}
.cnb-about-ed__photo:hover img{transform:scale(1.04);}
/* Year badge */
.cnb-about-ed__badge{
 position:absolute;
 bottom:2.5rem;
 left:0;
 background:#cc2027;
 color:#fff;
 padding:0.875rem 1.25rem;
 display:flex;
 flex-direction:column;
 align-items:center;
 line-height:1.1;
 box-shadow:4px 4px 20px rgba(0,0,0,0.3);
}
.cnb-about-ed__badge span{
 font-size:0.6rem;
 text-transform:uppercase;
 letter-spacing:0.12em;
 opacity:0.8;
}
.cnb-about-ed__badge strong{font-size:1.875rem;font-weight:900;}
/* Sidebar stats (thin right column) */
.cnb-about-ed__sidebar{
 background:#0d0c1a;
 display:flex;
 flex-direction:column;
}
.cnb-about-ed__sstat{
 flex:1;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
 padding:1.5rem 0.75rem;
 border-bottom:1px solid rgba(255,255,255,0.05);
 gap:0.4rem;
}
.cnb-about-ed__sstat--red{background:#cc2027;}
.cnb-about-ed__sstat b{
 font-size:1.75rem;
 font-weight:900;
 color:#fff;
 line-height:1;
 display:block;
}
.cnb-about-ed__sstat span{
 font-size:0.65rem;
 color:rgba(255,255,255,0.55);
 text-transform:uppercase;
 letter-spacing:0.07em;
 font-weight:600;
 line-height:1.3;
}
.cnb-about-ed__sstat--red span{color:rgba(255,255,255,0.82);}
/* Scroll reveal — CSS native */
@supports (animation-timeline:scroll()){
 .cnb-about-ed__h2{
 animation:edReveal linear both;
 animation-timeline:view();
 animation-range:entry 0% cover 30%;
}
 .cnb-about-ed__content p{
 animation:edReveal linear both;
 animation-timeline:view();
 animation-range:entry 5% cover 35%;
}
 @keyframes edReveal{
 from{opacity:0;transform:translateX(-20px);}
 to{opacity:1;transform:translateX(0);}
}
}
/* Mobile */
@media (max-width:900px){
 .cnb-about-ed__inner{grid-template-columns:1fr;min-height:auto;}
 .cnb-about-ed__right{grid-template-columns:1fr 72px;height:480px;}
 .cnb-about-ed__content{padding:3.5rem 1.5rem 3rem 1.5rem;}
 .cnb-about-ed__watermark{font-size:40vw;}
}

/* ═══════════════════════════════════════════════════════════
 ABOUT GLASS + PARALLAX + BLUEPRINT v3 — 2026-05-23
 Layer 1:photo parallax bg | Layer 2:glass content
 ═══════════════════════════════════════════════════════════ */
.cnb-about-glass{
 position:relative;
 min-height:85vh;
 display:flex;
 align-items:center;
 overflow:hidden;
 background:#0d0c1a;
}
/* ── LAYER 1:parallax photo ── */
.cnb-about-glass__bg{
 position:absolute;
 inset:-15%;
 z-index:0;
}
.cnb-about-glass__bgimg{
 width:100%;height:100%;
 object-fit:cover;
 display:block;
 will-change:transform;
 transform:scale(1.12);
}
.cnb-about-glass__overlay{
 position:absolute;
 inset:0;
 background:linear-gradient(
 105deg,
 rgba(13,12,26,0.91) 0%,
 rgba(13,12,26,0.80) 50%,
 rgba(13,12,26,0.55) 100%
 );
}
/* ── LAYER 2:scene grid ── */
.cnb-about-glass__scene{
 position:relative;
 z-index:2;
 width:100%;
 max-width:var(--container);
 margin:0 auto;
 padding:6rem var(--pad);
 display:grid;
 grid-template-columns:1fr 280px;
 grid-template-rows:auto auto;
 gap:2rem 3rem;
 align-items:start;
}
/* ── Blueprint SVG ── */
.cnb-blueprint-svg{
 position:absolute;
 top:3rem;right:calc(var(--pad) + 300px);
 width:220px;height:220px;
 opacity:0.7;
 pointer-events:none;
}
/* Blueprint line animation */
.bp-line{
 stroke-dasharray:600;
 stroke-dashoffset:600;
 transition:stroke-dashoffset 1.4s cubic-bezier(0.4,0,0.2,1);
}
.bp-line--drawn{stroke-dashoffset:0;}
/* CSS timeline fallback */
@supports (animation-timeline:view()){
 .bp-line{
 animation:bpDraw 1s linear both;
 animation-timeline:view(.cnb-about-glass);
 animation-range:entry 0% cover 40%;
 stroke-dashoffset:0;
 transition:none;
}
}
.bp-dot{
 opacity:0;
 animation:bpFade 0.4s 1.2s ease both;
}
@keyframes bpDraw{from{stroke-dashoffset:600;}to{stroke-dashoffset:0;}}
@keyframes bpFade{to{opacity:1;}}

/* ── GLASS CARD ── */
.cnb-about-glass__card{
 grid-column:1;grid-row:1;
 background:rgba(255,255,255,0.04);
 backdrop-filter:blur(18px) saturate(1.3);
 -webkit-backdrop-filter:blur(18px) saturate(1.3);
 border:1px solid rgba(255,255,255,0.09);
 border-radius:20px;
 padding:3rem 3rem 3rem 3.5rem;
 box-shadow:0 24px 64px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.07);
}
.cnb-about-glass__h2{
 font-size:clamp(1.9rem,2.5vw,2.875rem);
 font-weight:800;
 line-height:1.1;
 color:#fff;
 margin:0.75rem 0 1.625rem;
 letter-spacing:-0.025em;
}
.cnb-about-glass__h2 em{
 font-style:normal;
 color:#cc2027;
}
.cnb-about-glass__card p{
 color:rgba(255,255,255,0.68);
 font-size:1rem;
 line-height:1.78;
 margin-bottom:1.1rem;
}
.cnb-about-glass__pills{
 display:flex;
 flex-wrap:wrap;
 gap:0.5rem;
 margin-top:1.5rem;
}
.cnb-about-glass__pills span{
 border:1px solid rgba(255,255,255,0.18);
 border-radius:999px;
 padding:0.28rem 0.85rem;
 font-size:0.74rem;
 color:rgba(255,255,255,0.55);
 text-transform:uppercase;
 letter-spacing:0.08em;
 font-weight:600;
}
/* ── GLASS STATS column ── */
.cnb-about-glass__stats{
 grid-column:2;grid-row:1;
 display:flex;
 flex-direction:column;
 gap:0.75rem;
 align-self:center;
}
.cnb-about-glass__stat{
 background:rgba(255,255,255,0.05);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border:1px solid rgba(255,255,255,0.08);
 border-radius:14px;
 padding:1.375rem 1.5rem;
 box-shadow:0 8px 32px rgba(0,0,0,0.25);
}
.cnb-about-glass__stat--red{
 background:rgba(204,32,39,0.82);
 border-color:rgba(255,255,255,0.12);
}
.cnb-about-glass__stat b{
 display:block;
 font-size:2.375rem;
 font-weight:900;
 color:#fff;
 line-height:1;
 letter-spacing:-0.02em;
}
.cnb-about-glass__stat span{
 display:block;
 font-size:0.72rem;
 color:rgba(255,255,255,0.55);
 text-transform:uppercase;
 letter-spacing:0.08em;
 font-weight:600;
 margin-top:0.375rem;
 line-height:1.35;
}
.cnb-about-glass__stat--red span{color:rgba(255,255,255,0.8);}

/* Scroll reveal for glass card */
@supports (animation-timeline:view()){
 .cnb-about-glass__card{
 animation:glassIn 0.8s cubic-bezier(0.16,1,0.3,1) both;
 animation-timeline:view();
 animation-range:entry 0% cover 30%;
}
 .cnb-about-glass__stats{
 animation:glassIn 0.8s 0.15s cubic-bezier(0.16,1,0.3,1) both;
 animation-timeline:view();
 animation-range:entry 0% cover 30%;
}
 @keyframes glassIn{
 from{opacity:0;transform:translateY(32px);}
 to{opacity:1;transform:translateY(0);}
}
}
/* Mobile */
@media (max-width:900px){
 .cnb-about-glass__scene{grid-template-columns:1fr;}
 /* grid-row:2 — fixes overlap where both card+stats were in row:1 on single-col grid */
 .cnb-about-glass__stats{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;}
 .cnb-about-glass__stat{flex:1 1 calc(50% - 0.375rem);}
 .cnb-blueprint-svg{display:none;}
}

/* ============================================================
 GLOBAL PARALLAX SYSTEM v1 — 2026-05-23
 Pattern:B&W photo (background-attachment:fixed) + colored glass top
 ============================================================ */

.cnb-fx-parallax{
 position:relative;
 background-attachment:fixed;
 background-size:cover;
 background-position:center;
}
/* iOS Safari fallback — fixed bg not supported on mobile */
@media (max-width:768px){
 .cnb-fx-parallax{background-attachment:scroll;}
}

.cnb-parallax-overlay{
 position:absolute;
 inset:0;
 background:rgba(9,8,18,var(--ov,0.78));
 z-index:1;
 pointer-events:none;
}

.cnb-fx-parallax > .cnb-container{position:relative;z-index:2;}
.cnb-fx-parallax .cnb-container{position:relative;z-index:2;}

/* Background photo assignments — v3 luxury ensemble */
.cnb-bg-kitchen{background-image:url('../img/bg/bg_luxury_kitchen_bw.webp');}
.cnb-bg-lux-bath{background-image:url('../img/bg/bg_luxury_bathroom_bw.webp');}
.cnb-bg-bedroom{background-image:url('../img/bg/bg_luxury_bedroom_v4_bw.webp');}
.cnb-bg-process{background-image:url('../img/bg/bg_process_bw.webp');}
.cnb-bg-veranda{background-image:url('../img/bg/bg_luxury_veranda_v2_bw.webp');}
.cnb-bg-condo1{background-image:url('../img/bg/bg_condo_studio_1_bw.webp');}
.cnb-bg-condo2{background-image:url('../img/bg/bg_condo_studio_2_bw.webp');}
/* legacy kept for rollback */
.cnb-bg-bathroom{background-image:url('../img/bg/bg_bathroom_bw.webp');}
.cnb-bg-decking{background-image:url('../img/bg/bg_decking_bw.webp');}

/* ── Stats strip with parallax background ── */
.cnb-stats.cnb-fx-parallax{
 background-color:transparent;
}
.cnb-stats.cnb-fx-parallax .cnb-stat__num{color:#fff;}
.cnb-stats.cnb-fx-parallax .cnb-stat__label{color:rgba(255,255,255,0.60);}
.cnb-stats.cnb-fx-parallax .cnb-stat{border-color:rgba(255,255,255,0.12);}

/* ── Tiles section on dark parallax ── */
.cnb-tiles-section.cnb-fx-parallax h2,
.cnb-tiles-section.cnb-fx-parallax .cnb-tiles__sub{color:#fff !important;}
.cnb-tiles-section.cnb-fx-parallax .cnb-eyebrow{color:rgba(204,32,39,0.9);}

/* ── Glass step cards (Process section) ── */
.cnb-step--glass{
 background:rgba(255,255,255,0.05);
 border:1px solid rgba(255,255,255,0.11);
 backdrop-filter:blur(14px) saturate(1.2);
 -webkit-backdrop-filter:blur(14px) saturate(1.2);
 border-radius:18px;
 padding:2rem 1.75rem;
 transition:background 0.25s,border-color 0.25s;
}
.cnb-step--glass:hover{
 background:rgba(255,255,255,0.09);
 border-color:rgba(204,32,39,0.35);
}
.cnb-step--glass .cnb-step__num{color:#cc2027;text-shadow:0 0 20px rgba(204,32,39,0.4);}
.cnb-step--glass h3{color:#fff;margin-top:.75rem;}
.cnb-step--glass p{color:rgba(255,255,255,0.70);}
.cnb-section.cnb-fx-parallax h2,
.cnb-section.cnb-fx-parallax .cnb-eyebrow{color:#fff;}
.cnb-section.cnb-fx-parallax .cnb-eyebrow{color:rgba(204,32,39,0.95);}

/* ── Glass hood pills (GTA section) ── */
.cnb-hood-pill.cnb-pill--glass{
 background:rgba(255,255,255,0.06) !important;
 border-color:rgba(255,255,255,0.18) !important;
 color:#fff !important;
 backdrop-filter:blur(8px);
 -webkit-backdrop-filter:blur(8px);
 transition:background 0.2s,border-color 0.2s,transform 0.2s;
}
.cnb-hood-pill.cnb-pill--glass:hover{
 background:rgba(204,32,39,0.22) !important;
 border-color:rgba(204,32,39,0.5) !important;
 transform:translateY(-2px);
}
.cnb-hood-pill.cnb-pill--glass .cnb-hood-pill__dot{background:#cc2027 !important;}
.cnb-hood-pill.cnb-pill--glass[style*="dashed"]{
 border-style:dashed !important;
 opacity:.55;
}

/* ── Glass trust card (Why CNB section) ── */
.cnb-trust__glass-card{
 background:rgba(255,255,255,0.05);
 border:1px solid rgba(255,255,255,0.11);
 backdrop-filter:blur(16px) saturate(1.3);
 -webkit-backdrop-filter:blur(16px) saturate(1.3);
 border-radius:20px;
 padding:2.5rem;
}
.cnb-trust__glass-card h2{color:#fff !important;}
.cnb-trust__glass-card p{color:rgba(255,255,255,0.72) !important;}
.cnb-trust__glass-card strong{color:#fff !important;}
.cnb-trust__glass-card .cnb-trust__check{
 background:rgba(204,32,39,0.18);
 border-color:rgba(204,32,39,0.5);
}
.cnb-trust__glass-card .cnb-trust__check svg polyline{stroke:#cc2027;}

/* GTA section text */
.cnb-coverage-parallax .cnb-container > p{color:rgba(255,255,255,0.72) !important;}
.cnb-coverage-parallax h2{color:#fff !important;}


/* ============================================================
 PARALLAX v2 — Повністю прозоре скло (2026-05-23)
 Концепція:текст ніби написаний на прозорому склі
 Фон B&W їздить знизу,контент прямо на ньому без карток
 ============================================================ */

/* Зменшуємо overlay — фото має бути ВИДНИМ */
/* Overlay opacity unified — set via inline --ov on each section (0.52-0.55 range) */

/* Прибираємо фон у скляних картках → прозоре скло */
.cnb-step--glass{
 background:transparent !important;
 border:none !important;
 backdrop-filter:none !important;
 -webkit-backdrop-filter:none !important;
 padding:1.5rem 1rem;
}

/* Process:текст прямо на фоні з text-shadow */
.cnb-step--glass .cnb-step__num{
 color:#cc2027 !important;
 text-shadow:0 0 24px rgba(204,32,39,0.55),0 2px 8px rgba(0,0,0,0.7) !important;
 font-size:3.5rem;
 line-height:1;
 display:block;
 margin-bottom:.5rem;
}
.cnb-step--glass h3{
 color:#fff !important;
 text-shadow:0 2px 12px rgba(0,0,0,0.85) !important;
 font-size:1.2rem;
 margin:.4rem 0;
}
.cnb-step--glass p{
 color:rgba(255,255,255,0.88) !important;
 text-shadow:0 1px 6px rgba(0,0,0,0.75) !important;
 font-size:.95rem;
 line-height:1.6;
}

/* Trust:прибираємо фон картки → текст прямо */
.cnb-trust__glass-card{
 background:transparent !important;
 border:none !important;
 backdrop-filter:none !important;
 -webkit-backdrop-filter:none !important;
}
.cnb-trust__glass-card h2{
 text-shadow:0 2px 14px rgba(0,0,0,0.85) !important;
}
.cnb-trust__glass-card p,
.cnb-trust__glass-card li p{
 text-shadow:0 1px 6px rgba(0,0,0,0.70) !important;
}

/* GTA coverage pills — прозорий фон тільки рамка */
.cnb-hood-pill.cnb-pill--glass{
 background:transparent !important;
 border:1px solid rgba(255,255,255,0.35) !important;
 backdrop-filter:none !important;
 text-shadow:0 1px 6px rgba(0,0,0,0.70);
}
.cnb-hood-pill.cnb-pill--glass:hover{
 background:rgba(204,32,39,0.30) !important;
 border-color:#cc2027 !important;
}

/* Stats — числа прямо на фоні */
.cnb-stats.cnb-fx-parallax .cnb-stat{
 background:transparent !important;
 border-color:rgba(255,255,255,0.20) !important;
}
.cnb-stats.cnb-fx-parallax .cnb-stat__num{
 text-shadow:0 2px 16px rgba(0,0,0,0.80);
}
.cnb-stats.cnb-fx-parallax .cnb-stat__label{
 text-shadow:0 1px 6px rgba(0,0,0,0.70);
}

/* Tiles section heading */
.cnb-tiles-section.cnb-fx-parallax h2{
 text-shadow:0 2px 14px rgba(0,0,0,0.85);
}
.cnb-tiles-section.cnb-fx-parallax .cnb-tiles__sub{
 text-shadow:0 1px 6px rgba(0,0,0,0.70);
}


/* Process grid container — прозорий */
.cnb-fx-parallax .cnb-process__grid{
 background:transparent !important;
 box-shadow:none !important;
 border-radius:0 !important;
}

/* Stats individual cells — прозорі */
.cnb-stats.cnb-fx-parallax .cnb-stat{
 background:transparent !important;
 border:1px solid rgba(255,255,255,0.20) !important;
 box-shadow:none !important;
}


/* Gallery strip + Get-quote:text override for parallax */
.cnb-section.cnb-fx-parallax[aria-label="Project photos"] h2,
.cnb-section.cnb-fx-parallax[aria-label="Project photos"] .cnb-eyebrow{
 color:#fff !important;
 text-shadow:0 2px 12px rgba(0,0,0,0.80);
}
#get-quote.cnb-fx-parallax h2,
#get-quote.cnb-fx-parallax .cnb-eyebrow,
#get-quote.cnb-fx-parallax .cnb-form-intro p{
 color:#fff !important;
 text-shadow:0 2px 10px rgba(0,0,0,0.75);
}

/* Gallery strip:real photos should pop over dark bg */
.cnb-section.cnb-fx-parallax .cnb-gallery-strip div{
 border-radius:12px;
 overflow:hidden;
 box-shadow:0 8px 32px rgba(0,0,0,0.45);
}

/* Get-quote form card stays white for readability */
#get-quote.cnb-fx-parallax .cnb-form-wrap{
 background:rgba(255,255,255,0.95);
 border-radius:20px;
 backdrop-filter:blur(10px);
}


/* === UNIFIED 2-BG PARALLAX ENSEMBLE (2026-05-23) ===
 A = cnb-bg-bathroom (indoor marble) — Stats,Trust,Gallery strip,Get-quote
 B = cnb-bg-decking (outdoor deck) — Services,Process,GTA
 Overlay range:0.52-0.55 for all. No other bg photos in use.
 ================================================= */

/* Force all parallax section headings white */
.cnb-fx-parallax h2,
.cnb-fx-parallax h3,
.cnb-fx-parallax .cnb-eyebrow{
 color:#fff !important;
}
.cnb-fx-parallax p,
.cnb-fx-parallax li{
 color:rgba(255,255,255,0.88) !important;
}


/* ── CNB v3 Tiles — transparent caption + 3D inner glow hover ── */

/* Transparent tile body — only card border visible,original text colors */
.cnb-tile{background:transparent !important;}
.cnb-tile__body{background:transparent !important;}

/* Default:slightly dimmed + desaturated */
.cnb-tile__img-wrap img{
 filter:saturate(0.72) brightness(0.84);
 transition:transform 0.7s ease,filter 0.55s ease !important;
}

/* Hover:full vivid + bright */
.cnb-tile:hover .cnb-tile__img-wrap img{
 transform:scale(1.10);
 filter:saturate(1.08) brightness(1.12) !important;
}

/* Inner halo — 3D glow from inside (nimb effect) */
.cnb-tile__img-wrap::after{
 content:'';
 position:absolute;
 inset:0;
 opacity:0;
 background:radial-gradient(
 ellipse at 50% 38%,
 rgba(255,255,255,0.28) 0%,
 rgba(255,240,190,0.10) 42%,
 transparent 68%
 );
 transition:opacity 0.55s ease;
 pointer-events:none;
 z-index:3;
}
.cnb-tile:hover .cnb-tile__img-wrap::after{opacity:1;}

/* Card outer glow on hover */
.cnb-tile:hover{
 box-shadow:
 0 20px 50px rgba(0,0,0,0.20),
 0 0 0 1px rgba(255,255,255,0.15),
 0 0 38px 5px rgba(255,240,190,0.09) !important;
 transform:translateY(-5px);
}

/* ── CNB v3 Tiles — white neon inner glow fix ── */

/* Kill red overlay on hover — replace with white neon */
.cnb-tile:hover .cnb-tile__overlay{
 background:rgba(255,255,255,0) !important;
}

/* White neon inner glow — stronger nimb from center */
.cnb-tile__img-wrap::after{
 content:'' !important;
 position:absolute !important;
 inset:0 !important;
 opacity:0 !important;
 background:radial-gradient(
 ellipse at 50% 50%,
 rgba(255,255,255,0.55) 0%,
 rgba(255,255,255,0.22) 32%,
 rgba(255,255,255,0.06) 55%,
 transparent 72%
 ) !important;
 transition:opacity 0.5s ease !important;
 pointer-events:none !important;
 z-index:3 !important;
 mix-blend-mode:screen;
}
.cnb-tile:hover .cnb-tile__img-wrap::after{opacity:1 !important;}

/* White rim light on card edge */
.cnb-tile:hover .cnb-tile__img-wrap{
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.45),inset 0 0 40px rgba(255,255,255,0.12);
}

/* ── CNB v3 Tiles — brightness/glow calibration ── */

/* Default:darker images */
.cnb-tile__img-wrap img{
 filter:saturate(0.65) brightness(0.68) !important;
 transition:transform 0.7s ease,filter 0.55s ease !important;
}

/* Hover:natural brightness + subtle nimb (not aggressive) */
.cnb-tile:hover .cnb-tile__img-wrap img{
 transform:scale(1.10);
 filter:saturate(1.0) brightness(0.95) !important;
}

/* Softer nimb — less opacity */
.cnb-tile:hover .cnb-tile__img-wrap::after{opacity:0.55 !important;}

/* Nimb itself — softer gradient */
.cnb-tile__img-wrap::after{
 background:radial-gradient(
 ellipse at 50% 50%,
 rgba(255,255,255,0.35) 0%,
 rgba(255,255,255,0.12) 38%,
 rgba(255,255,255,0.03) 58%,
 transparent 72%
 ) !important;
}

/* FAQ parallax background */
.cnb-bg-office{background-image:url('../img/bg/bg_office_bw.webp');}

/* ── FAQ parallax — float in air over office bg ── */
#faq .cnb-eyebrow,
#faq h2{color:#fff !important;}

#faq .cnb-faq details{
 border-bottom:1px solid rgba(255,255,255,0.20) !important;
 background:transparent !important;
}
#faq .cnb-faq summary{
 color:#fff !important;
 background:transparent !important;
}
#faq .cnb-faq details[open] summary{color:rgba(204,32,39,0.9) !important;}
#faq .cnb-faq details p{
 color:rgba(255,255,255,0.78) !important;
 background:transparent !important;
}
#faq .cnb-faq summary::after{color:rgba(204,32,39,0.85);}
#faq .cnb-parallax-overlay{--ov:0.62;}


/* ===== Process Split Section v2 ===== */
.cnb-process-header{
 text-align:center;
 max-width:640px;
 margin:0 auto 48px;
}
.cnb-process-header .cnb-eyebrow{color:#cc2027;}
.cnb-process-header h2{
 color:#fff;
 font-size:clamp(1.6rem,3vw,2.2rem);
 line-height:1.25;
 margin-bottom:10px;
}
.cnb-process-header__sub{
 color:rgba(255,255,255,0.68);
 font-size:0.95rem;
 line-height:1.55;
 margin:0;
}

.cnb-process-split{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:48px;
 align-items:stretch;
}

/* LEFT column:only steps list,centered vertically */
.cnb-process-steps{
 display:flex;
 align-items:center;
}
.cnb-psteps-list{
 list-style:none;
 padding:0;
 margin:0;
 width:100%;
}
.cnb-pstep{
 display:flex;
 gap:16px;
 padding:14px 0;
 border-bottom:1px solid rgba(255,255,255,0.10);
 align-items:flex-start;
}
.cnb-pstep:last-child{border-bottom:none;}
.cnb-pstep__num{
 flex-shrink:0;
 width:34px;
 height:34px;
 background:#cc2027;
 color:#fff;
 font-size:0.70rem;
 font-weight:700;
 letter-spacing:0.04em;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:4px;
 margin-top:1px;
}
.cnb-pstep__body h3{
 color:#fff;
 font-size:0.94rem;
 font-weight:600;
 margin:0 0 3px;
 line-height:1.3;
}
.cnb-pstep__body p{
 color:rgba(255,255,255,0.60);
 font-size:0.82rem;
 margin:0;
 line-height:1.5;
}

/* RIGHT:photo slider */
.cnb-process-slider{
 position:relative;
 border-radius:12px;
 overflow:hidden;
 min-height:480px;
 background:#111;
 box-shadow:0 24px 64px rgba(0,0,0,0.55);
 align-self:stretch;
}
.cnb-pslider__track{
 position:relative;
 width:100%;
 height:100%;
}
.cnb-pslide{
 position:absolute;
 inset:0;
 opacity:0;
 transition:opacity 0.7s ease;
}
.cnb-pslide.is-active{opacity:1;}
.cnb-pslide img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}
.cnb-pslide__label{
 position:absolute;
 bottom:16px;
 left:16px;
 background:rgba(0,0,0,0.52);
 color:rgba(255,255,255,0.88);
 font-size:0.72rem;
 letter-spacing:0.07em;
 text-transform:uppercase;
 padding:4px 10px;
 border-radius:3px;
 backdrop-filter:blur(4px);
}
.cnb-pslider__btn{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 width:38px;
 height:38px;
 background:rgba(0,0,0,0.42);
 border:1px solid rgba(255,255,255,0.18);
 color:#fff;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 transition:background 0.2s;
 z-index:10;
 padding:0;
}
.cnb-pslider__btn:hover{background:rgba(204,32,39,0.75);}
.cnb-pslider__btn--prev{left:12px;}
.cnb-pslider__btn--next{right:12px;}
.cnb-pslider__dots{
 position:absolute;
 bottom:14px;
 right:14px;
 display:flex;
 gap:6px;
 z-index:10;
}
.cnb-pslider__dot{
 width:7px;
 height:7px;
 border-radius:50%;
 background:rgba(255,255,255,0.32);
 border:none;
 cursor:pointer;
 transition:background 0.2s,transform 0.2s;
 padding:0;
}
.cnb-pslider__dot.is-active{
 background:#cc2027;
 transform:scale(1.3);
}

/* Responsive */
.cnb-process-split-wrap{padding:0 0 80px;}
@media (max-width:860px){
 .cnb-process-split{
 grid-template-columns:1fr;
 gap:32px;
}
 .cnb-process-slider{
 aspect-ratio:16/9;
}
}

/* Trust section paragraph fix */
.cnb-trust__desc{
 color:rgba(255,255,255,0.80);
 margin-top:1rem;
 margin-bottom:0;
 font-size:1.0625rem;
 line-height:1.7;
}


/* ===== Why CNB — Icon Benefits Grid v2 ===== */
.cnb-ti-header{
 text-align:center;
 max-width:660px;
 margin:0 auto 56px;
}
.cnb-ti-header .cnb-eyebrow{color:#cc2027;}
.cnb-ti-header h2{
 color:#fff;
 font-size:clamp(1.7rem,3vw,2.3rem);
 line-height:1.2;
 margin-bottom:12px;
}
.cnb-ti-header__sub{
 color:rgba(255,255,255,0.65);
 font-size:0.95rem;
 line-height:1.6;
 margin:0;
}
.cnb-ti-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:48px 36px;
}

/* Card entrance animation */
.cnb-ti-item{
 text-align:center;
 color:#fff;
 opacity:0;
 transform:translateY(28px);
 transition:opacity 0.55s ease,transform 0.55s ease;
}
.cnb-ti-item.cnb-ti-visible{
 opacity:1;
 transform:translateY(0);
}
/* Stagger delays for 8 items */
.cnb-ti-item:nth-child(1){transition-delay:0.00s;}
.cnb-ti-item:nth-child(2){transition-delay:0.08s;}
.cnb-ti-item:nth-child(3){transition-delay:0.16s;}
.cnb-ti-item:nth-child(4){transition-delay:0.24s;}
.cnb-ti-item:nth-child(5){transition-delay:0.32s;}
.cnb-ti-item:nth-child(6){transition-delay:0.40s;}
.cnb-ti-item:nth-child(7){transition-delay:0.48s;}
.cnb-ti-item:nth-child(8){transition-delay:0.56s;}

/* Icon box — continuous glow pulse */
@keyframes cnb-icon-glow{
 0%,100%{box-shadow:0 0 0 0 rgba(204,32,39,0.0),inset 0 0 0 0 rgba(204,32,39,0.0);}
 50%{box-shadow:0 0 18px 4px rgba(204,32,39,0.30),inset 0 0 8px 0 rgba(204,32,39,0.12);}
}
/* Icon float animation */
@keyframes cnb-icon-float{
 0%,100%{transform:translateY(0px);}
 50%{transform:translateY(-6px);}
}

.cnb-ti-icon{
 width:76px;
 height:76px;
 margin:0 auto 18px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:18px;
 background:rgba(204,32,39,0.08);
 border:1.5px solid rgba(204,32,39,0.30);
 animation:cnb-icon-glow 2.8s ease-in-out infinite;
 transition:background 0.3s,border-color 0.3s;
}
/* Stagger glow animation offsets */
.cnb-ti-item:nth-child(2) .cnb-ti-icon{animation-delay:0.35s;}
.cnb-ti-item:nth-child(3) .cnb-ti-icon{animation-delay:0.70s;}
.cnb-ti-item:nth-child(4) .cnb-ti-icon{animation-delay:1.05s;}
.cnb-ti-item:nth-child(5) .cnb-ti-icon{animation-delay:1.40s;}
.cnb-ti-item:nth-child(6) .cnb-ti-icon{animation-delay:1.75s;}
.cnb-ti-item:nth-child(7) .cnb-ti-icon{animation-delay:2.10s;}
.cnb-ti-item:nth-child(8) .cnb-ti-icon{animation-delay:2.45s;}

.cnb-ti-item:hover .cnb-ti-icon{
 background:rgba(204,32,39,0.22);
 border-color:rgba(204,32,39,0.70);
}

/* Icon image — RED color + float animation */
.cnb-ti-icon img{
 width:40px;
 height:40px;
 object-fit:contain;
 /* White → CNB red #cc2027 */
 filter:brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(1500%) hue-rotate(342deg) brightness(92%) contrast(108%);
 animation:cnb-icon-float 3.2s ease-in-out infinite;
}
/* Stagger float offsets */
.cnb-ti-item:nth-child(2) .cnb-ti-icon img{animation-delay:0.4s;}
.cnb-ti-item:nth-child(3) .cnb-ti-icon img{animation-delay:0.8s;}
.cnb-ti-item:nth-child(4) .cnb-ti-icon img{animation-delay:1.2s;}
.cnb-ti-item:nth-child(5) .cnb-ti-icon img{animation-delay:1.6s;}
.cnb-ti-item:nth-child(6) .cnb-ti-icon img{animation-delay:2.0s;}
.cnb-ti-item:nth-child(7) .cnb-ti-icon img{animation-delay:2.4s;}
.cnb-ti-item:nth-child(8) .cnb-ti-icon img{animation-delay:2.8s;}

.cnb-ti-item h3{
 color:#fff;
 font-size:0.96rem;
 font-weight:600;
 margin:0 0 8px;
 line-height:1.3;
}
.cnb-ti-item p{
 color:rgba(255,255,255,0.58);
 font-size:0.82rem;
 line-height:1.55;
 margin:0;
}
@media (max-width:1024px){
 .cnb-ti-grid{grid-template-columns:repeat(2,1fr);gap:36px 28px;}
}
@media (max-width:580px){
 .cnb-ti-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
}

/* ── CNB-TI ICON UPGRADE — 2026-05-23 (bigger + white/visible icons) ─── */
.cnb-ti-icon{
 width:96px !important;
 height:96px !important;
 border-radius:22px !important;
 background:rgba(204,32,39,0.15) !important;
 border:1.5px solid rgba(204,32,39,0.50) !important;
 margin:0 auto 22px !important;
}
.cnb-ti-item:hover .cnb-ti-icon{
 background:rgba(204,32,39,0.28) !important;
 border-color:rgba(204,32,39,0.80) !important;
}
.cnb-ti-icon img{
 width:52px !important;
 height:52px !important;
 /* White icons — much better contrast on dark background */
 filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,0.35)) !important;
}
/* Slightly larger text */
.cnb-ti-item h3{
 font-size:1.0rem !important;
 margin:0 0 10px !important;
}
.cnb-ti-item p{
 font-size:0.875rem !important;
}

/* ═══════════════════════════════════════════════════════════
 REFERRAL PROGRAM v2 — icons → SVG timeline → text panels
 ═══════════════════════════════════════════════════════════ */

/* header */
.cnb-ref-header{text-align:center;max-width:700px;margin:0 auto 52px}
.cnb-ref-title{font-size:clamp(2.125rem,4vw,3.5rem);line-height:1.1;color:#fff;margin:.5rem 0 1rem}
.cnb-ref-title em{font-style:normal;color:#cc2027}
.cnb-ref-sub{color:rgba(255,255,255,.68);font-size:1.0625rem;line-height:1.72;max-width:560px;margin:0 auto}

/* ── icon row ── */
.cnb-ref-icons{
 display:grid;
 grid-template-columns:1fr 1fr 1fr;
 justify-items:center;
 margin-bottom:0;
}
.cnb-ref-icon-box{
 width:110px;height:110px;
 background:rgba(255,255,255,0.045);
 border:1px solid rgba(255,255,255,0.095);
 border-radius:28px;
 display:flex;align-items:center;justify-content:center;
 backdrop-filter:blur(16px);
 -webkit-backdrop-filter:blur(16px);
 box-shadow:0 24px 64px rgba(0,0,0,.40);
 opacity:0;transform:translateY(-32px) scale(.94);filter:blur(5px);
 animation:cnb-ref-float 3.8s ease-in-out infinite;
 transition:box-shadow .4s ease;
}
.cnb-ref-icon-box:nth-child(2){animation-delay:.9s}
.cnb-ref-icon-box:nth-child(3){animation-delay:1.8s}
.cnb-ref-icon-box--vis{
 opacity:1;transform:translateY(0) scale(1);filter:blur(0);
 transition:opacity .75s cubic-bezier(.22,1,.36,1),
 transform .75s cubic-bezier(.22,1,.36,1),
 filter .75s ease,
 box-shadow .4s ease;
}
.cnb-ref-icon-box:hover{
 box-shadow:0 24px 64px rgba(0,0,0,.40),0 0 32px rgba(204,32,39,.22);
}
@keyframes cnb-ref-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* override translateY from vis-state after animation kicks in */
.cnb-ref-icon-box--vis{animation:cnb-ref-float-active 3.8s ease-in-out infinite}
.cnb-ref-icon-box--vis:nth-child(2){animation-delay:.9s}
.cnb-ref-icon-box--vis:nth-child(3){animation-delay:1.8s}
@keyframes cnb-ref-float-active{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ── SVG timeline ── */
.cnb-ref-timeline{
 margin:0 0 0;
 padding:0;
}
.cnb-ref-tl-svg{
 display:block;
 width:100%;
 height:80px;
 overflow:visible;
}
.cnb-tl-line,.cnb-tl-glow{
 transition:none;/* set by JS */
}
.cnb-tl-node{opacity:0;transition:opacity .4s ease}
.cnb-tl-node--active{opacity:1}

/* ── text step panels ── */
.cnb-ref-steps{
 display:grid;
 grid-template-columns:1fr 1fr 1fr;
 gap:0 20px;
 margin-bottom:48px;
}
.cnb-ref-step{
 background:rgba(255,255,255,0.038);
 border:1px solid rgba(255,255,255,0.08);
 border-radius:16px;
 padding:28px 22px 26px;
 text-align:center;
 opacity:0;transform:translateY(32px);
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
 transition:border-color .4s ease,box-shadow .4s ease;
}
.cnb-ref-step--vis{
 opacity:1;transform:translateY(0);
 transition:opacity .75s ease,transform .75s ease,
 border-color .4s ease,box-shadow .4s ease;
}
.cnb-ref-step:hover{
 border-color:rgba(204,32,39,.30);
 box-shadow:0 0 40px rgba(204,32,39,.08);
}
.cnb-ref-step h3{font-size:1.0625rem;font-weight:600;color:#fff;margin-bottom:10px;line-height:1.35}
.cnb-ref-step p{font-size:.84375rem;color:rgba(255,255,255,.56);line-height:1.70;margin:0}
.cnb-ref-step p em{color:rgba(204,32,39,.85);font-style:normal;font-weight:600}

/* ── example ── */
.cnb-ref-example{
 background:rgba(204,32,39,.052);border:1px solid rgba(204,32,39,.22);border-radius:20px;
 padding:40px 48px 34px;text-align:center;margin-bottom:40px;
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 opacity:0;transform:translateY(28px);
 transition:opacity .8s ease .2s,transform .8s ease .2s;
}
.cnb-ref-example--vis{opacity:1;transform:translateY(0)}
.cnb-ref-example__tag{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.36);margin-bottom:22px}
.cnb-ref-eq{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.cnb-ref-eq__part{display:flex;flex-direction:column;align-items:center;gap:5px}
.cnb-ref-eq__lbl{font-size:.6875rem;font-family:var(--font-mono);letter-spacing:.08em;color:rgba(255,255,255,.38);text-transform:uppercase}
.cnb-ref-eq__val{font-size:1.625rem;font-weight:700;color:#fff}
.cnb-ref-eq__op{font-size:1.25rem;color:rgba(255,255,255,.28);align-self:flex-end;margin-bottom:4px}
.cnb-ref-reward-num{font-family:var(--font-mono);font-size:2.75rem;font-weight:700;color:#cc2027}
.cnb-ref-reward-cad{font-family:var(--font-mono);font-size:.9375rem;color:rgba(204,32,39,.65);padding-bottom:7px;align-self:flex-end}
.cnb-ref-example__note{margin:16px 0 0;font-size:.8125rem;color:rgba(255,255,255,.32);font-style:italic}

/* ── terms ── */
.cnb-ref-terms{text-align:center;max-width:640px;margin:0 auto}
.cnb-ref-terms p{font-size:.875rem;color:rgba(255,255,255,.42);line-height:1.8;margin-bottom:28px}
.cnb-ref-terms strong{color:rgba(204,32,39,.85);font-weight:600}

/* ── responsive ── */
@media(max-width:720px){
 .cnb-ref-icons,.cnb-ref-steps{grid-template-columns:1fr;gap:20px 0;justify-items:center}
 .cnb-ref-tl-svg{height:220px}
 .cnb-ref-example{padding:28px 18px}
 .cnb-ref-eq{gap:10px;flex-direction:column}
 .cnb-ref-reward-num{font-size:2.125rem}
}

/* fix:theme adds .cnb-reveal to h2 elements — override for referral header */
#referral .cnb-ref-title,
#referral .cnb-ref-sub,
#referral .cnb-eyebrow{
 opacity:1 !important;
 clip-path:none !important;
 transform:none !important;
}


/* ── FORM INTRO — steps + pricing ── */
.cnb-fi-steps{display:flex;flex-direction:column;gap:14px;margin:22px 0 20px}
.cnb-fi-step{
 display:flex;align-items:flex-start;gap:14px;
 opacity:0;transform:translateX(-22px);
 transition:opacity .6s ease,transform .6s ease;
}
.cnb-fi-step--vis{opacity:1;transform:translateX(0)}
.cnb-fi-step__num{
 font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
 color:#cc2027;background:rgba(204,32,39,.09);
 border:1px solid rgba(204,32,39,.25);border-radius:8px;
 padding:4px 9px;white-space:nowrap;flex-shrink:0;margin-top:3px;
}
.cnb-fi-step strong{display:block;font-size:.9375rem;font-weight:600;color:#fff;margin-bottom:3px}
.cnb-fi-step span{font-size:.8125rem;color:rgba(255,255,255,.50);line-height:1.52}

.cnb-fi-pricing{
 background:rgba(255,255,255,.038);border:1px solid rgba(255,255,255,.09);
 border-radius:14px;padding:16px 20px;backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
}
.cnb-fi-pricing__label{
 font-size:.6875rem;font-family:var(--font-mono);letter-spacing:.13em;
 text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:11px;
}
.cnb-fi-pricing__row{
 display:flex;justify-content:space-between;align-items:center;
 padding:7px 0;border-bottom:1px solid rgba(255,255,255,.065);
 font-size:.84375rem;
}
.cnb-fi-pricing__row:last-child{border-bottom:none}
.cnb-fi-pricing__row span:first-child{color:rgba(255,255,255,.62)}
.cnb-fi-pricing__row span:last-child{
 color:#fff;font-family:var(--font-mono);font-size:.8125rem;font-weight:600;text-align:right;
}
.cnb-fi-pricing__row small{font-size:.7rem;color:rgba(255,255,255,.45);font-weight:400}


/* ── FORM INTRO v2 — trust strip + promise bar ── */
.cnb-fi-trust{
 display:flex;flex-wrap:wrap;gap:8px;
 margin:12px 0 20px;
}
.cnb-fi-trust__chip{
 display:inline-flex;align-items:center;gap:5px;
 font-size:.75rem;font-family:var(--font-mono);letter-spacing:.03em;
 color:rgba(255,255,255,.70);
 background:rgba(255,255,255,.055);
 border:1px solid rgba(255,255,255,.10);
 border-radius:100px;padding:5px 10px;
 transition:background .25s;
}
.cnb-fi-trust__chip svg{flex-shrink:0}

.cnb-fi-promises{
 display:flex;gap:0;
 border:1px solid rgba(255,255,255,.09);border-radius:12px;
 overflow:hidden;margin:16px 0 0;
}
.cnb-fi-promise{
 flex:1;display:flex;flex-direction:column;align-items:center;
 gap:6px;padding:12px 8px;
 border-right:1px solid rgba(255,255,255,.09);
 background:rgba(255,255,255,.032);
 font-size:.72rem;font-family:var(--font-mono);letter-spacing:.04em;
 text-transform:uppercase;color:rgba(255,255,255,.62);
 text-align:center;
}
.cnb-fi-promise:last-child{border-right:none}
.cnb-fi-promise svg{flex-shrink:0}

/* ── GET-QUOTE:split-panel dark left / white right (2026-05-23 v2) ── */
#get-quote.cnb-fx-parallax .cnb-form-wrap{
 background:transparent !important;
 backdrop-filter:none !important;
 -webkit-backdrop-filter:none !important;
 border-radius:0 !important;
 box-shadow:none !important;
 align-items:stretch;
}
#get-quote.cnb-fx-parallax .cnb-form-intro{
 background:rgba(8,8,8,.52);
 border:1px solid rgba(255,255,255,.08);
 border-radius:20px;
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
 padding:36px 32px;
}
#get-quote.cnb-fx-parallax .cnb-form-card{
 border-radius:20px;
 box-shadow:0 8px 48px rgba(0,0,0,.28);
}
/* ensure text stays white on dark intro panel */
#get-quote .cnb-form-intro p,
#get-quote .cnb-form-intro li,
#get-quote .cnb-form-intro span:not(.cnb-fi-step__num):not(.cnb-eyebrow){
 color:rgba(255,255,255,.72) !important;
 text-shadow:none !important;
}

/* ── GET-QUOTE v3:swap columns — form LEFT,intro RIGHT ghost-glass ── */
#get-quote.cnb-fx-parallax .cnb-form-wrap{
 align-items:start;
}
#get-quote.cnb-fx-parallax .cnb-form-card{
 order:1;
 background:rgba(240,240,240,0.96) !important;
 border-radius:20px;
 box-shadow:0 8px 48px rgba(0,0,0,.30);
}
#get-quote.cnb-fx-parallax .cnb-form-intro{
 order:2;
 background:transparent !important;
 backdrop-filter:none !important;
 -webkit-backdrop-filter:none !important;
 border:1px solid rgba(255,255,255,0.18) !important;
 border-radius:20px;
 padding:36px 32px;
 box-shadow:none;
}

/* ── GET-QUOTE v3b:form card = dark glass,form inputs white ── */
#get-quote.cnb-fx-parallax .cnb-form-card{
 background:rgba(10,10,10,0.58) !important;
 border:1px solid rgba(255,255,255,0.10) !important;
 backdrop-filter:blur(20px) !important;
 -webkit-backdrop-filter:blur(20px) !important;
 box-shadow:0 8px 48px rgba(0,0,0,.40) !important;
}
/* form labels + legend + step indicator */
#get-quote .cnb-form-card .cnb-step-label,
#get-quote .cnb-form-card .cnb-form-legend,
#get-quote .cnb-form-card label,
#get-quote .cnb-form-card .cnb-field-label{
 color:rgba(255,255,255,0.85) !important;
}
/* radio option buttons */
#get-quote .cnb-form-card .cnb-radio-option{
 background:rgba(255,255,255,0.06) !important;
 border-color:rgba(255,255,255,0.15) !important;
 color:rgba(255,255,255,0.80) !important;
}
#get-quote .cnb-form-card .cnb-radio-option:hover,
#get-quote .cnb-form-card .cnb-radio-option.is-selected{
 background:rgba(204,32,39,0.18) !important;
 border-color:rgba(204,32,39,0.60) !important;
 color:#fff !important;
}
/* progress bar track */
#get-quote .cnb-form-card .cnb-progress{
 background:rgba(255,255,255,0.12) !important;
}
/* text inputs */
#get-quote .cnb-form-card input[type=text],
#get-quote .cnb-form-card input[type=tel],
#get-quote .cnb-form-card input[type=email],
#get-quote .cnb-form-card textarea,
#get-quote .cnb-form-card select{
 background:rgba(255,255,255,0.08) !important;
 border-color:rgba(255,255,255,0.16) !important;
 color:#fff !important;
}
#get-quote .cnb-form-card input::placeholder,
#get-quote .cnb-form-card textarea::placeholder{
 color:rgba(255,255,255,0.38) !important;
}


/* ── FORM v4:hook text + equal heights + expanded grid ── */

/* Hook (selling text top of right panel) */
.cnb-fi-hook{margin-bottom:20px}
.cnb-fi-hook__stars{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cnb-fi-hook__star-row{color:#cc2027;font-size:1rem;letter-spacing:1px}
.cnb-fi-hook__star-label{font-size:.75rem;font-family:var(--font-mono);color:rgba(255,255,255,.55);letter-spacing:.04em}
.cnb-fi-hook__quote{
 margin:0 0 14px;padding:14px 16px;
 background:rgba(255,255,255,.04);
 border-left:2px solid rgba(204,32,39,.55);
 border-radius:0 10px 10px 0;
}
.cnb-fi-hook__quote p{
 font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.80);
 font-style:italic;margin-bottom:6px;
}
.cnb-fi-hook__quote cite{
 font-size:.75rem;font-family:var(--font-mono);color:rgba(255,255,255,.40);
 letter-spacing:.03em;font-style:normal;
}
.cnb-fi-hook__divider{
 height:1px;background:rgba(255,255,255,.08);margin-bottom:16px;
}

/* Equal column heights */
#get-quote.cnb-fx-parallax .cnb-form-wrap{
 align-items:stretch !important;
}
#get-quote.cnb-fx-parallax .cnb-form-card{
 display:flex !important;
 flex-direction:column !important;
}
#get-quote .cnb-form-card form{
 flex:1;display:flex;flex-direction:column;
}
#get-quote .cnb-form-step.is-active{
 flex:1;display:flex;flex-direction:column;
}
#get-quote .cnb-form-step.is-active .cnb-form-actions{margin-top:auto;padding-top:12px}

/* 3-column radio grid variant */
.cnb-radio-grid--3{grid-template-columns:repeat(3,1fr)}
.cnb-radio-grid--2{grid-template-columns:repeat(2,1fr)}

/* textarea style */
#get-quote .cnb-form-card textarea{
 width:100%;resize:vertical;min-height:60px;
 padding:10px 14px;
 font-size:.9rem;font-family:inherit;
 border-radius:10px;
}

/* ══════════════════════════════════════════════════════════
 CNB MOBILE PASS — 2026-05-23
 Targets:390px (iPhone 14 Pro),480px breakpoint
 ══════════════════════════════════════════════════════════ */

/* iOS parallax fix — background-attachment:fixed breaks on Safari/iOS */
@media (max-width:768px){
 .cnb-fx-parallax{
 background-attachment:scroll !important;
 background-size:cover !important;
 background-position:center center !important;
}
}

@media (max-width:480px){

 /* ── 1. HEADER — hide phone CTA (sticky bar covers it) ── */
 .cnb-header__cta{display:none !important;}

 /* ── 2. REFERRAL ICONS — 3-col row at 80px ── */
 .cnb-ref-icons{
 grid-template-columns:repeat(3,1fr) !important;
 gap:12px;
 justify-items:center;
}
 .cnb-ref-icon-box{
 width:80px !important;
 height:80px !important;
 border-radius:20px !important;
}
 .cnb-ref-icon-box svg,
 .cnb-ref-icon-box img{
 width:36px !important;
 height:36px !important;
}

 /* ── 3. REFERRAL SVG TIMELINE — hide (distorted at 390px) ── */
 .cnb-ref-timeline{display:none !important;}

 /* ── 4. REFERRAL TEXT PANELS — tighter padding ── */
 .cnb-ref-step{padding:18px 14px 16px !important;}
 .cnb-ref-example{padding:22px 16px !important;}

 /* ── 5. FORM — 3-col radio → 2-col ── */
 .cnb-radio-grid--3{grid-template-columns:repeat(2,1fr) !important;}

 /* ── 6. FORM INTRO (ghost panel) — no border on mobile,tighter ── */
 #get-quote.cnb-fx-parallax .cnb-form-intro{
 border:none !important;
 background:rgba(0,0,0,0.28) !important;
 backdrop-filter:blur(8px) !important;
 -webkit-backdrop-filter:blur(8px) !important;
 padding:24px 20px 20px !important;
 border-radius:16px !important;
 margin-top:16px;
}

 /* ── 7. FORM TRUST CHIPS — smaller ── */
 .cnb-fi-trust{gap:6px;}
 .cnb-fi-trust__chip{
 font-size:.68rem !important;
 padding:3px 8px !important;
}

 /* ── 8. HOOK QUOTE — tighter ── */
 .cnb-fi-hook__quote{padding:12px 14px;}
 .cnb-fi-hook__quote p{font-size:.8125rem;}

 /* ── 9. PROMISE BAR — compact ── */
 .cnb-fi-promise{padding:10px 4px;font-size:.65rem;}
 .cnb-fi-promise svg{width:14px !important;height:14px !important;}

 /* ── 10. PROCESS SECTION — prevent overflow bleed ── */
 #process,#trust{overflow:hidden;}

 /* ── 11. REFERRAL TERMS — smaller text ── */
 .cnb-ref-terms p{font-size:.8rem;}

 /* ── 12. SECTION HEADINGS — tighter on mobile ── */
 .cnb-section h2{font-size:clamp(1.5rem,7vw,2.25rem);}

 /* ── 13. SERVICE CARDS — ensure full width ── */
 .cnb-service-card{border-radius:16px;}

 /* ── 14. STATS BAR — ensure no overflow ── */
 .cnb-stats-bar{overflow:hidden;}

 /* ── 15. COVERAGE section ── */
 .cnb-coverage-grid{grid-template-columns:1fr !important;}

}

/* Tablet pass (481–768px) */
@media (min-width:481px) and (max-width:768px){
 .cnb-header__cta{font-size:.75rem;padding:.4rem .75rem;white-space:nowrap;}
 .cnb-radio-grid--3{grid-template-columns:repeat(2,1fr);}
 .cnb-ref-icons{
 grid-template-columns:repeat(3,1fr) !important;
 gap:16px;
 justify-items:center;
}
 .cnb-ref-icon-box{
 width:90px !important;
 height:90px !important;
}
 .cnb-ref-timeline{display:none !important;}
}

/* ── FORM DARK GLASS — radio label color fix (all screens) ── */
/* cnb-radio-label has var(--ink) = dark text,invisible on dark glass card */
#get-quote .cnb-form-card .cnb-radio-label{
 color:rgba(255,255,255,0.78) !important;
 border-color:rgba(255,255,255,0.16) !important;
 background:rgba(255,255,255,0.05) !important;
}
#get-quote .cnb-form-card .cnb-radio-card:has(input:checked) .cnb-radio-label,
#get-quote .cnb-form-card .cnb-radio-card.is-checked .cnb-radio-label{
 border-color:#cc2027 !important;
 background:rgba(204,32,39,0.18) !important;
 color:#fff !important;
}
#get-quote .cnb-form-card .cnb-form-legend,
#get-quote .cnb-form-card .cnb-step-label{color:rgba(255,255,255,0.88) !important;}
#get-quote .cnb-form-card .cnb-field label{color:rgba(255,255,255,0.82) !important;}
#get-quote .cnb-form-card input[type=text],
#get-quote .cnb-form-card input[type=tel],
#get-quote .cnb-form-card input[type=email],
#get-quote .cnb-form-card textarea{
 background:rgba(255,255,255,0.07) !important;
 border-color:rgba(255,255,255,0.15) !important;
 color:#fff !important;
}
#get-quote .cnb-form-card input::placeholder,
#get-quote .cnb-form-card textarea::placeholder{color:rgba(255,255,255,0.32) !important;}
#get-quote .cnb-form-card .cnb-form-privacy{color:rgba(255,255,255,0.38) !important;}

/* Mobile:tighter radio padding + prevent text wrap */
@media (max-width:480px){
 #get-quote .cnb-form-card .cnb-radio-label{
 padding:.55rem .4rem !important;
 font-size:.8125rem !important;
 line-height:1.25 !important;
}
 #get-quote .cnb-form-card .cnb-field input,
 #get-quote .cnb-form-card .cnb-field textarea{
 font-size:.9rem !important;
}
}


/* ── COVERAGE BLOCK v2 ── */

/* Header */
.cnb-cov-header{max-width:760px;margin-bottom:36px}
.cnb-cov-header h2{
 font-size:clamp(2rem,4vw,3rem);
 line-height:1.1;
 color:#fff;
 margin:.75rem 0 1rem;
}
.cnb-cov-lead{
 font-size:.9375rem;
 line-height:1.68;
 color:rgba(255,255,255,.72);
 max-width:700px;
}

/* City pills v2 — all static,no pointer */
.cnb-hoods__grid--v2{cursor:default;margin-bottom:40px}
.cnb-hoods__grid--v2 .cnb-hood-pill{cursor:default;text-decoration:none}
.cnb-hoods__grid--v2 .cnb-pill--plus{
 border-style:dashed;
 color:rgba(255,255,255,.50);
}

/* 3-col feature row */
.cnb-cov-features{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:20px;
 margin-bottom:40px;
}
.cnb-cov-feat{
 background:rgba(255,255,255,.055);
 border:1px solid rgba(255,255,255,.10);
 border-radius:16px;
 padding:24px 22px 26px;
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
}
.cnb-cov-feat__icon{
 width:50px;height:50px;
 background:rgba(204,32,39,.10);
 border:1px solid rgba(204,32,39,.22);
 border-radius:12px;
 display:flex;align-items:center;justify-content:center;
 margin-bottom:14px;
 flex-shrink:0;
}
.cnb-cov-feat strong{
 display:block;
 font-size:1rem;
 font-weight:700;
 color:#fff;
 margin-bottom:8px;
 line-height:1.25;
}
.cnb-cov-feat p{
 font-size:.84375rem;
 line-height:1.6;
 color:rgba(255,255,255,.60);
 margin:0;
}

/* Bottom CTA */
.cnb-cov-cta{
 display:flex;
 align-items:center;
 gap:20px;
 flex-wrap:wrap;
}
.cnb-cov-cta__btn{font-size:1rem;padding:14px 32px}
.cnb-cov-cta__note{
 font-size:.8125rem;
 color:rgba(255,255,255,.45);
 font-family:var(--font-mono);
 letter-spacing:.03em;
 margin:0;
}

/* Mobile */
@media(max-width:768px){
 .cnb-cov-features{grid-template-columns:1fr;gap:14px}
 .cnb-cov-header h2{font-size:1.75rem}
}
@media(max-width:480px){
 .cnb-cov-cta{flex-direction:column;align-items:flex-start;gap:10px}
 .cnb-cov-cta__btn{width:100%;justify-content:center}
}

/* ── COVERAGE:bypass global cnb-reveal — block is always visible on scroll-to ── */
#coverage .cnb-reveal,
#coverage .cnb-reveal.cnb-reveal--d1,
#coverage .cnb-reveal.cnb-reveal--d2{
 clip-path:none !important;
 opacity:1 !important;
 transition:none !important;
}


/* ── FIXED HEADER — body offset ──────────────────────────── */
body{padding-top:0;}
#main-content{/* hero sections overlap fixed header naturally */}
/* Pages without dark hero — add offset via wp-admin class */
.admin-bar .cnb-header{top:32px;}

/* ── HEADER TOP GRADIENT — legibility over bright heroes ──── */
.cnb-header::before{
 content:'';
 position:absolute;
 inset:0;
 background:linear-gradient(to bottom,rgba(0,0,0,0.38) 0%,transparent 100%);
 pointer-events:none;
 z-index:-1;
 transition:opacity 0.35s ease;
}
.cnb-header.is-scrolled::before{
 opacity:0;
}

/* ── HEADER TEXT LEGIBILITY — shadow over bright heroes ───── */
.cnb-logo svg{
 filter:drop-shadow(0 1px 4px rgba(0,0,0,0.55));
}
.cnb-nav__link{
 text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.cnb-header.is-scrolled .cnb-logo svg,
.cnb-header.is-scrolled .cnb-nav__link{
 filter:none;
 text-shadow:none;
}

/* ── LOGO SPANS — transparent header ──────────────────────── */
.cnb-logo{align-items:center;gap:.5rem;}
.cnb-logo__cnb{color:#cc2027;text-shadow:0 1px 4px rgba(0,0,0,0.55);}
.cnb-logo__reno{color:rgba(255,255,255,0.82);text-shadow:0 1px 4px rgba(0,0,0,0.55);}
.cnb-header.is-scrolled .cnb-logo__cnb{color:#cc2027;text-shadow:none;}
.cnb-header.is-scrolled .cnb-logo__reno{color:rgba(255,255,255,0.65);text-shadow:none;}

/* ── RENOVATION — red (override white) ────────────────────── */
.cnb-logo__reno{color:#cc2027 !important;font-size:1.1rem;letter-spacing:.18em;}

/* ── CNB white / RENOVATION red (v0.5.2) ─────────────────── */
.cnb-logo__cnb{color:#fff !important;}
.cnb-logo__reno{color:#cc2027 !important;}

/* ── FAQ GRID v2 — 3 columns × 10 ────────────────────────── */
#faq.cnb-faq-v2 .cnb-parallax-overlay{--ov:0.44;}
.cnb-faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem;margin-top:3rem;}
.cnb-faq-col__label{font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#cc2027;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid rgba(204,32,39,.35);}
.cnb-faq-item{border-bottom:1px solid rgba(255,255,255,.14)!important;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.cnb-faq-item.is-vis{opacity:1;transform:translateY(0);}
.cnb-faq-item summary{padding:.85rem 0;font-size:.875rem;font-weight:600;color:rgba(255,255,255,.92)!important;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;line-height:1.4;}
.cnb-faq-item summary::-webkit-details-marker{display:none;}
.cnb-faq-item summary::after{content:'+';font-size:1.2rem;font-weight:300;color:#cc2027;flex-shrink:0;transition:transform .2s;}
.cnb-faq-item[open] summary::after{transform:rotate(45deg);}
.cnb-faq-item[open] summary{color:#cc2027!important;}
.cnb-faq-item p{padding-bottom:1rem;color:rgba(255,255,255,.75)!important;font-size:.875rem;line-height:1.7;}
.cnb-faq-intro{color:rgba(255,255,255,.7);font-size:1rem;margin-top:.5rem;margin-bottom:0;}
.cnb-faq-cta{margin-top:3.5rem;text-align:center;}
.cnb-faq-cta p{color:rgba(255,255,255,.8);font-size:1.05rem;margin-bottom:1.25rem;}
.cnb-faq-cta__btns{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;}
.cnb-faq-cta__call{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.85);text-decoration:none;font-weight:500;font-size:.9375rem;border:1px solid rgba(255,255,255,.3);padding:.55rem 1.25rem;border-radius:4px;transition:border-color .2s;}
.cnb-faq-cta__call:hover{border-color:rgba(255,255,255,.7);}
@media(max-width:900px){.cnb-faq-grid{grid-template-columns:1fr;}}


/* ── FAQ v2 — glass column panels (readability fix) ──────── */
#faq.cnb-faq-v2 .cnb-parallax-overlay{--ov:0.55;}
.cnb-faq-grid{align-items:start;}
.cnb-faq-col{
 background:rgba(8,8,12,0.72);
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
 border:1px solid rgba(255,255,255,0.07);
 border-top:1px solid rgba(204,32,39,0.30);
 border-radius:6px;
 padding:2rem 1.75rem 1.5rem;
}
.cnb-faq-col__label{
 font-size:.6875rem;
 font-weight:700;
 letter-spacing:.18em;
 text-transform:uppercase;
 color:#cc2027;
 margin-bottom:1.5rem;
 padding-bottom:.75rem;
 border-bottom:1px solid rgba(204,32,39,.35);
}
.cnb-faq-item{
 border-bottom:1px solid rgba(255,255,255,.10) !important;
 background:transparent !important;
}
.cnb-faq-item summary{
 color:rgba(255,255,255,.92) !important;
 text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.cnb-faq-item p{
 color:rgba(255,255,255,.72) !important;
}
@media(max-width:900px){
 .cnb-faq-col{margin-bottom:1.5rem;}
}

/* ── FAQ v2 — full-width stretch ────────────────────────── */
#faq.cnb-faq-v2 .cnb-container{
 max-width:100% !important;
 padding-left:48px !important;
 padding-right:48px !important;
}
#faq.cnb-faq-v2 .cnb-faq-grid{
 gap:0 24px;
 margin-top:2.5rem;
}
#faq.cnb-faq-v2 h2{
 font-size:clamp(1.8rem,3vw,2.8rem);
}
@media(max-width:900px){
 #faq.cnb-faq-v2 .cnb-container{
 padding-left:20px !important;
 padding-right:20px !important;
}
}

/* ── FAQ section — new dark marble bg (overrides cnb-bg-office) ── */
#faq.cnb-faq-v2{
 background-image:url('../img/bg/bg_faq_dark_bw.webp') !important;
 background-size:cover !important;
 background-position:center top !important;
}

/* ── FAQ v2 — glass-air floating style (no opaque panels) ─── */
.cnb-faq-col{
 background:rgba(255,255,255,0.04) !important;
 backdrop-filter:blur(6px) !important;
 -webkit-backdrop-filter:blur(6px) !important;
 border:1px solid rgba(255,255,255,0.10) !important;
 border-top:1px solid rgba(204,32,39,0.45) !important;
 border-radius:6px !important;
}
.cnb-faq-col__label{
 font-size:.75rem !important;
 letter-spacing:.22em !important;
 text-shadow:0 0 12px rgba(204,32,39,0.7);
}
.cnb-faq-item summary{
 font-size:1.0rem !important;
 font-weight:600 !important;
 color:#ffffff !important;
 text-shadow:0 0 18px rgba(255,255,255,0.55),0 1px 4px rgba(0,0,0,0.9) !important;
 letter-spacing:0.01em;
 line-height:1.4;
}
.cnb-faq-item summary::after{
 text-shadow:0 0 10px rgba(204,32,39,0.8) !important;
 font-size:1.4rem !important;
}
.cnb-faq-item p{
 font-size:.9375rem !important;
 color:rgba(255,255,255,0.80) !important;
 text-shadow:0 1px 6px rgba(0,0,0,0.8) !important;
 line-height:1.75 !important;
}
.cnb-faq-item{
 border-bottom:1px solid rgba(255,255,255,0.08) !important;
}
.cnb-faq-item[open] summary{
 color:#cc2027 !important;
 text-shadow:0 0 18px rgba(204,32,39,0.6),0 1px 4px rgba(0,0,0,0.9) !important;
}

/* ── FAQ v2 — compact padding + big text + clean shadow ──── */
#faq.cnb-faq-v2.cnb-section{
 padding-block:3.5rem !important;
}
#faq.cnb-faq-v2{
 background-position:center 38% !important;
}
#faq.cnb-faq-v2 .cnb-parallax-overlay{
 --ov:0.64 !important;
}

/* Eyebrow + heading — clear,no triple */
#faq.cnb-faq-v2 .cnb-eyebrow{
 text-shadow:none !important;
}
#faq.cnb-faq-v2 h2,
#faq.cnb-faq-v2 .cnb-reveal{
 text-shadow:0 2px 8px rgba(0,0,0,0.95) !important;
}

/* Column labels — no glow */
.cnb-faq-col__label{
 font-size:.8125rem !important;
 text-shadow:none !important;
}

/* FAQ items — 1.5× bigger,sharp shadow only (no glow blur) */
.cnb-faq-item summary{
 font-size:1.125rem !important;
 line-height:1.45 !important;
 color:#fff !important;
 text-shadow:0 1px 4px rgba(0,0,0,0.98) !important;
}
.cnb-faq-item summary::after{
 font-size:1.5rem !important;
 text-shadow:none !important;
}
.cnb-faq-item[open] summary{
 color:#cc2027 !important;
 text-shadow:0 1px 4px rgba(0,0,0,0.98) !important;
}
.cnb-faq-item p{
 font-size:1rem !important;
 line-height:1.75 !important;
 text-shadow:0 1px 3px rgba(0,0,0,0.9) !important;
}

/* Stretch columns to fill container */
#faq.cnb-faq-v2 .cnb-faq-grid{
 align-items:stretch !important;
}

/* ── FAQ FILL COLUMNS v0.6.1 — space-between + bigger font ── */
.cnb-faq-col{
 display:flex !important;
 flex-direction:column !important;
 justify-content:space-between !important;
}
.cnb-faq-item{
 flex:1 !important;
 display:flex !important;
 flex-direction:column !important;
 justify-content:center !important;
}
.cnb-faq-item summary{
 font-size:1.375rem !important;
 padding:1.05rem 0 !important;
 line-height:1.42 !important;
}
.cnb-faq-item p{
 font-size:1.05rem !important;
 line-height:1.75 !important;
}

/* ── FAQ CRISP TEXT v0.6.2 — no glow,sharp outline ── */
.cnb-faq-item summary{
 text-shadow:
 1px 1px 0 rgba(0,0,0,0.95),
 -1px -1px 0 rgba(0,0,0,0.85),
 1px -1px 0 rgba(0,0,0,0.85),
 -1px 1px 0 rgba(0,0,0,0.85) !important;
 font-weight:700 !important;
 -webkit-font-smoothing:antialiased !important;
}
.cnb-faq-item p{
 text-shadow:none !important;
 -webkit-font-smoothing:antialiased !important;
}

/* ── FORM SECTION — Google review cards v0.6.3 ── */
.cnb-fi-reviews{display:flex;flex-direction:column;gap:8px;margin:16px 0;}
.cnb-fi-review-card{
 background:rgba(255,255,255,0.07);
 border:1px solid rgba(255,255,255,0.10);
 border-left:2px solid #cc2027;
 border-radius:5px;
 padding:10px 12px;
}
.cnb-fi-review-card__stars{color:#cc2027;font-size:11px;letter-spacing:2px;margin-bottom:4px;}
.cnb-fi-review-card__text{
 font-size:13px !important;
 color:rgba(255,255,255,0.82) !important;
 line-height:1.52 !important;
 margin:0 0 5px !important;
 font-style:italic;
}
.cnb-fi-review-card__author{
 font-size:11px;
 color:rgba(255,255,255,0.40);
 font-family:var(--font-mono);
 letter-spacing:.02em;
}

/* ── FORM-CARD reviews — 2 cols side by side v0.6.4 ── */
.cnb-fc-reviews{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 margin-top:20px;
 padding-top:16px;
 border-top:1px solid rgba(255,255,255,0.10);
}
@media(max-width:600px){.cnb-fc-reviews{grid-template-columns:1fr;}}

/* ── FORM WRAP — natural height columns v0.6.5 ── */
#get-quote .cnb-form-wrap{
 align-items:start !important;
}

/* ── FORM-CARD natural height fix v0.6.6 ── */
#get-quote.cnb-fx-parallax .cnb-form-card{
 display:block !important;
}
#get-quote .cnb-form-card form{
 display:block !important;
 flex:none !important;
}
#get-quote .cnb-form-step.is-active{
 display:block !important;
 flex:none !important;
}

/* ── FORM SECTION — full width columns v0.6.7 ── */
#get-quote .cnb-container{
 max-width:100% !important;
 padding-left:48px !important;
 padding-right:48px !important;
}
#get-quote .cnb-form-wrap{
 gap:2rem !important;
 grid-template-columns:1fr 1fr !important;
}
#get-quote .cnb-section,
#get-quote.cnb-section{
 padding-block:3rem !important;
}

/* ── ATLAS MAP — hidden temporarily v0.6.8 ── */
#atlas,.cnb-atlas-wrap,.cnb-atlas-section{display:none !important;}

/* ── FOOTER areas — coming soon (no link) ── */
.cnb-footer__area-soon{
 display:block;
 color:rgba(255,255,255,0.35) !important;
 font-size:.875rem;
 padding:.2rem 0;
 cursor:default;
}

/* v0.7.1 — Neighbourhood pages:tighten section padding */
.page-template-page-neighbourhood .cnb-section{
 padding-block:2.5rem !important;
}
.page-template-page-neighbourhood .cnb-nbhd-hero.cnb-section{
 padding-top:5rem !important;
 padding-bottom:3rem !important;
}
.page-template-page-neighbourhood .cnb-fx-parallax:not(.cnb-nbhd-hero).cnb-section{
 padding-block:3rem !important;
}

/* v0.7.2 — Neighbourhood:disable JS-injected fade + reveal animations (FOUC fix) */
.page-template-page-neighbourhood .cnb-section{
 opacity:1 !important;
 transform:none !important;
 transition:none !important;
}
.page-template-page-neighbourhood .cnb-section h2.cnb-reveal,
.page-template-page-neighbourhood .cnb-section .cnb-eyebrow.cnb-reveal{
 opacity:1 !important;
 clip-path:none !important;
 transition:none !important;
}

/* v0.7.4 — Header phone bigger */
.cnb-header__cta{
 font-size:1.125rem !important;
 font-weight:600 !important;
 padding:.6rem 1.5rem !important;
 letter-spacing:.01em !important;
}

/* ================================================================
 v0.7.7 — MOBILE OVERFLOW FIXES 2026-05-25
 Three root causes:
 1. .cnb-process-slider:aspect-ratio:16/9 × min-height:480 = 853px
 2. Neighbourhood:inline grids don't collapse (1.2fr 1fr / repeat(4,1fr))
 3. Contact:inline grids don't collapse (1fr 1fr / repeat(3,1fr))
 ================================================================ */

/* 1 — Process slider:remove aspect-ratio on mobile,use fixed height */
@media (max-width:600px){
 .cnb-process-slider{
 aspect-ratio:unset !important;
 min-height:240px !important;
 max-width:100% !important;
 overflow:hidden !important;
}
}

/* 2 — Neighbourhood page grids (class-based,applied via PHP template) */
@media (max-width:700px){
 .cnb-nbhd-why-grid{
 grid-template-columns:repeat(2,1fr) !important;
}
 .cnb-nbhd-svc-grid{
 grid-template-columns:1fr !important;
}
 .cnb-nbhd-price-grid{
 grid-template-columns:1fr !important;
 gap:2rem !important;
}
}
@media (max-width:400px){
 .cnb-nbhd-why-grid{
 grid-template-columns:1fr !important;
}
}

/* 3 — Contact page grids (class-based,applied via PHP template) */
@media (max-width:700px){
 .cnb-contact-cards{
 grid-template-columns:1fr !important;
}
 .cnb-contact-form-grid{
 grid-template-columns:1fr !important;
 gap:2rem !important;
}
}
@media (max-width:480px){
 .cnb-contact-name-phone{
 grid-template-columns:1fr !important;
}
}

/* v0.7.7b — Get-quote form:force 1-column on mobile (overrides !important 1fr 1fr) */
@media (max-width:700px){
 #get-quote .cnb-form-wrap{
 grid-template-columns:1fr !important;
 gap:1.5rem !important;
}
 /* Reset over-padded container on mobile */
 #get-quote .cnb-container{
 padding-left:20px !important;
 padding-right:20px !important;
}
 /* Stack form card above intro panel */
 #get-quote.cnb-fx-parallax .cnb-form-card{order:1 !important;}
 #get-quote.cnb-fx-parallax .cnb-form-intro{order:2 !important;}
}

/* ================================================================
 v0.7.8 — Footer 3-col menus + About CTA overflow fix (2026-05-25)
 ================================================================ */

/* 1 — Footer:logo full-width top,menus in 3 equal cols below */
@media (max-width:480px){
 .cnb-footer__grid{
 grid-template-columns:1fr 1fr 1fr !important;
 gap:1.5rem 1rem !important;
}
 .cnb-footer__grid > div:first-child{
 grid-column:1 / -1;
 padding-bottom:1rem;
 border-bottom:1px solid rgba(255,255,255,.07);
 margin-bottom:.25rem;
}
 .cnb-footer__col h4{font-size:.65rem;margin-bottom:.6rem;}
 .cnb-footer__col a{font-size:.8125rem;margin-bottom:.4rem;}
}

/* 2 — About CTA band:prevent btns row from overflowing */
@media (max-width:500px){
 .cnb-about-cta-band__btns{
 flex-shrink:1 !important;
 width:100% !important;
 flex-wrap:wrap !important;
}
 .cnb-about-cta-band .cnb-btn-red,
 .cnb-about-cta-band .cnb-btn-outline{
 width:100% !important;
 text-align:center !important;
 box-sizing:border-box !important;
}
}

/* ================================================================
 v0.7.9b — Burger menu:dark links on white dropdown (2026-05-25)
 ================================================================ */
@media (max-width:768px){
 .cnb-nav.is-open .cnb-nav__link{
 color:#1a1a2e !important;
 text-shadow:none !important;
}
 .cnb-nav.is-open .cnb-nav__link:hover{
 color:#cc2027 !important;
}
}


/* v0.8.1b — Slider dot 44px touch target */
.cnb-slider__dot{
 background:transparent !important;
 width:44px !important;
 height:44px !important;
 padding:0 !important;
 margin:0 !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 transform:none !important;
}
.cnb-slider__dot::before{
 content:'';
 width:8px;
 height:8px;
 border-radius:50%;
 background:rgba(255,255,255,.35);
 transition:background .2s,transform .2s;
 flex-shrink:0;
}
.cnb-slider__dot.is-active::before{
 background:#fff !important;
 transform:scale(1.3);
}
.cnb-slider__dots{gap:0;}html{overflow-x:hidden}.cnb-about-glass__bg{overflow:hidden}@media(max-width:359px){.cnb-about-glass__card{padding:1.5rem 1.25rem}.cnb-about-glass__scene{padding-inline:1rem}.cnb-about-glass__h2{font-size:1.6rem}}
body{overflow-x:hidden}.cnb-about-glass{overflow:clip}
@media (pointer:fine){body{cursor:none}a,button,[role="button"],.cnb-service-card,.cnb-faq__q,.cnb-atlas-chip{cursor:none}}.cnb-cursor{position:fixed;top:0;left:0;width:10px;height:10px;background:#cc2027;border-radius:50%;pointer-events:none;z-index:99999;will-change:transform}.cnb-cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:1.5px solid rgba(204,32,39,0.55);border-radius:50%;pointer-events:none;z-index:99998;will-change:transform;transition:width 0.2s ease,height 0.2s ease,border-color 0.2s ease,opacity 0.2s ease}.cnb-cursor.is-hovering{width:6px;height:6px;background:#fff;mix-blend-mode:difference}.cnb-cursor-ring.is-hovering{width:52px;height:52px;border-color:rgba(204,32,39,0.9)}.cnb-h1-split .cnb-word{display:inline-block;opacity:0;transform:translateY(22px);transition:opacity 0.55s ease,transform 0.55s cubic-bezier(0.16,1,0.3,1)}.cnb-h1-split.is-visible .cnb-word{opacity:1;transform:translateY(0)}@keyframes cnb-count-glow{0%{text-shadow:none}40%{text-shadow:0 0 22px rgba(204,32,39,0.65),0 0 40px rgba(204,32,39,0.25)}100%{text-shadow:none}}.cnb-stat__num.count-done,.cnb-about__stat-num.count-done{animation:cnb-count-glow 0.9s ease forwards}.cnb-img-reveal{position:relative;overflow:hidden}.cnb-img-reveal::before{content:'';position:absolute;inset:0;background:#cc2027;transform:translateX(0);transition:transform 0.8s cubic-bezier(0.77,0,0.175,1);z-index:2;pointer-events:none}.cnb-img-reveal.is-revealed::before{transform:translateX(101%)}.bp-line,.bp-dot{stroke-dasharray:2000;stroke-dashoffset:2000}.cnb-service-card{transform-style:preserve-3d}.cnb-service-card__icon,.cnb-service-card h3{transition:transform 0.15s ease}.cnb-pstep{will-change:opacity,transform}.cnb-about__pill{will-change:opacity,transform}@media (prefers-reduced-motion:reduce){.cnb-cursor,.cnb-cursor-ring{display:none !important}body{cursor:auto !important}.cnb-h1-split .cnb-word{opacity:1 !important;transform:none !important;transition:none !important}.cnb-img-reveal::before{display:none !important}.bp-line,.bp-dot{stroke-dasharray:none !important;stroke-dashoffset:0 !important;transition:none !important}}
/* ===== v0.8.5 — Scroll Progress Indicator ===== */
.cnb-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: rgba(17,17,17,0.04);
}
.cnb-scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #D72522 0%, #FF6B68 50%, #D72522 100%);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform, background-position;
  transition: transform 0.12s linear, background-position 0.6s ease-out;
  box-shadow: 0 0 12px rgba(215,37,34,0.5), 0 0 4px rgba(215,37,34,0.8);
}
.cnb-scroll-progress--active .cnb-scroll-progress__bar {
  animation: cnb-scroll-shimmer 3s linear infinite;
}
@keyframes cnb-scroll-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cnb-scroll-progress__bar {
    transition: none !important;
    animation: none !important;
  }
}