
/* ==============================
 DESIGN SYSTEM — Dark Navy / White
 ============================== */
:root{
 --c-navy:#0a1628;
 --c-navy-light:#142035;
 --c-navy-mid:#1e3a5f;
 --c-blue:#1d4ed8;
 --c-blue-light:#3b82f6;
 --c-accent:#60a5fa;
 --c-white:#ffffff;
 --c-off:#f8fafc;
 --c-grey:#e2e8f0;
 --c-border:#e2e8f0;
 --c-text:#0f172a;
 --c-muted:#475569;
 --c-muted-light:#94a3b8;
 --ff-body:'Inter',system-ui,sans-serif;
 --ff-display:'Fraunces',Georgia,serif;
 --r:12px;
 --r-lg:20px;
 --sh:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.08);
 --sh-lg:0 8px 32px rgba(0,0,0,.12),0 24px 64px rgba(0,0,0,.08);
 --max:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{font-family:var(--ff-body);color:var(--c-text);background:var(--c-white);line-height:1.6;overflow-x:hidden;padding-top:66px;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:var(--ff-body);}
input,select,textarea{font-family:var(--ff-body);}

/* ==============================
 OFFER BAR
 ============================== */
.offer-bar{display:none;}
.offer-bar__shine{
 color:#fff;font-weight:600;
}
.offer-bar a{color:var(--c-accent);font-weight:700;margin-left:8px;}










































/* ==============================
 PAGE ROUTING
 ============================== */
.page{display:none;}.page.active{display:block;}

/* ==============================
 BUTTONS
 ============================== */
.btn-primary{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 background:var(--c-blue);color:#fff;
 padding:15px 32px;border-radius:999px;
 font-size:15px;font-weight:700;border:none;
 transition:all .2s;box-shadow:none;
 cursor:pointer;white-space:nowrap;
}
.btn-primary:hover{background:#1e40af;transform:translateY(-2px);box-shadow:0 8px 28px rgba(29,78,216,.4);}
.btn-outline{
 display:inline-flex;align-items:center;gap:8px;
 background:transparent;color:var(--c-navy);
 padding:14px 30px;border-radius:999px;
 font-size:15px;font-weight:700;border:2px solid var(--c-navy);
 transition:all .2s;cursor:pointer;
}
.btn-outline:hover{background:var(--c-navy);color:#fff;}
.btn-white{
 display:inline-flex;align-items:center;gap:8px;
 background:#fff;color:var(--c-navy);
 padding:15px 32px;border-radius:999px;
 font-size:15px;font-weight:700;border:none;
 transition:all .2s;box-shadow:0 4px 20px rgba(0,0,0,.12);cursor:pointer;
}
.btn-white:hover{background:var(--c-off);transform:translateY(-1px);}
.btn-ghost{
 display:inline-flex;align-items:center;gap:8px;
 background:rgba(255,255,255,.12);color:#fff;
 padding:14px 28px;border-radius:999px;
 font-size:14px;font-weight:600;border:1.5px solid rgba(255,255,255,.25);
 transition:all .2s;cursor:pointer;
}
.btn-ghost:hover{background:rgba(255,255,255,.2);}

/* ==============================
 FORMS
 ============================== */
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted);margin-bottom:6px;}
.form-input,.form-select{
 width:100%;padding:13px 16px;
 border:1.5px solid var(--c-border);border-radius:10px;
 font-family:var(--ff-body);font-size:15px;color:var(--c-text);
 background:#fff;outline:none;appearance:none;
 transition:border-color .18s,box-shadow .18s;
}
.form-input:focus,.form-select:focus{
 border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(29,78,216,.1);
}
.form-input::placeholder{color:var(--c-muted-light);}
.form-select-wrap{position:relative;}
.form-select-wrap::after{
 content:'';position:absolute;right:14px;top:50%;
 width:9px;height:9px;
 border-right:2px solid var(--c-blue);border-bottom:2px solid var(--c-blue);
 transform:translateY(-68%) rotate(45deg);pointer-events:none;
}
.form-select{padding-right:36px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ==============================
 HERO — VIDEO ONLY (no poster)
 ============================== */
.hero{
 position:relative;overflow:hidden;
 background:var(--c-navy);
 min-height:calc(100vh - 106px);display:flex;align-items:center;
}
.hero__video-wrap{position:absolute;inset:0;z-index:0;}
.hero__video-wrap video{
 width:100%;height:100%;object-fit:cover;
 display:block;
}
.hero__overlay{
 position:absolute;inset:0;
 background:linear-gradient(110deg,rgba(10,22,40,.88) 0%,rgba(10,22,40,.65) 55%,rgba(10,22,40,.4) 100%);
}
.hero__inner{
 position:relative;z-index:2;
 max-width:var(--max);margin:0 auto;padding:100px 24px 80px;
 width:100%;
 display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center;
}
.hero__eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 background:rgba(96,165,250,.15);border:1px solid rgba(96,165,250,.3);
 color:var(--c-accent);font-size:11px;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:22px;
}
.hero__title{
 font-family:var(--ff-display);
 font-size:clamp(2.6rem,5vw,4.8rem);
 font-weight:400;line-height:1.05;letter-spacing:-.03em;
 color:#fff;margin-bottom:22px;
}
.hero__title em{font-style:italic;color:var(--c-accent);}
.hero__desc{
 font-size:clamp(1rem,1.4vw,1.15rem);
 line-height:1.75;color:rgba(255,255,255,.78);
 max-width:520px;margin-bottom:36px;
}
.hero__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.hero__stats{display:flex;gap:36px;margin-top:44px;}
.hero__stat__num{
 font-family:var(--ff-display);font-size:2.2rem;font-weight:400;
 color:var(--c-accent);line-height:1;
}
.hero__stat__label{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px;}
/* Hero quote card */
.hero__card{
 background:rgba(255,255,255,.97);
 border-radius:var(--r-lg);padding:32px 28px;
 box-shadow:0 32px 80px rgba(0,0,0,.35);
 backdrop-filter:blur(8px);
}
.hero__card h2{
 font-family:var(--ff-display);font-size:1.55rem;font-weight:400;
 color:var(--c-navy);margin-bottom:4px;line-height:1.2;
}
.hero__card p{font-size:13.5px;color:var(--c-muted);margin-bottom:22px;}
.form-submit{
 width:100%;padding:16px;background:var(--c-navy);color:#fff;
 border:none;border-radius:10px;font-size:15px;font-weight:700;
 cursor:pointer;transition:all .2s;margin-top:4px;
 box-shadow:0 4px 16px rgba(10,22,40,.25);
}
.form-submit:hover{background:var(--c-navy-mid);transform:translateY(-1px);}
.form-submit.success{background:#16a34a!important;}
.form-note{
 text-align:center;font-size:12px;color:var(--c-muted);
 margin-top:10px;display:flex;align-items:center;justify-content:center;gap:5px;
}
.form-note svg{color:#22c55e;flex-shrink:0;}

/* ==============================
 TRUST BAR
 ============================== */
.trust-bar{background:var(--c-navy-light);padding:16px 24px;}
.trust-bar-inner{
 max-width:var(--max);margin:0 auto;
 display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
}
.trust-item{
 display:flex;align-items:center;gap:8px;
 font-size:13px;font-weight:600;color:rgba(255,255,255,.75);
 padding:8px 24px;white-space:nowrap;
}
.trust-item:not(:last-child){border-right:1px solid rgba(255,255,255,.1);}
.trust-item svg{color:var(--c-accent);flex-shrink:0;}

/* ==============================
 SECTIONS
 ============================== */
.section{padding:96px 24px;}
.section--grey{background:var(--c-off);}
.section--navy{background:var(--c-navy);color:#fff;}
.section--navy .section-title{color:#fff;}
.section--navy .section-subtitle{color:rgba(255,255,255,.62);}
.section-inner{max-width:var(--max);margin:0 auto;}
.section-eyebrow{
 display:inline-flex;align-items:center;gap:7px;
 background:transparent;color:var(--c-blue);
 font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
 padding:0;border-radius:0;margin-bottom:12px;
}
.section--navy .section-eyebrow{background:rgba(96,165,250,.15);color:var(--c-accent);border:1px solid rgba(96,165,250,.25);}
.section-title{
 font-family:var(--ff-display);font-size:clamp(1.9rem,3.5vw,2.9rem);
 font-weight:400;color:var(--c-navy);line-height:1.1;letter-spacing:-.02em;margin-bottom:14px;
}
.section-title em{font-style:italic;color:var(--c-blue);}
.section-subtitle{font-size:1.05rem;color:var(--c-muted);max-width:560px;line-height:1.65;}

/* ==============================
 SERVICES GRID (homepage)
 ============================== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
.service-card{
 border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border);
 background:#fff;cursor:pointer;transition:transform .22s,box-shadow .22s,border-color .22s;
 display:block;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(29,78,216,.2);}
.service-card__img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 15%;display:block;}
.service-card__vid{width:100%;aspect-ratio:4/3;overflow:hidden;background:#0a1628;position:relative;}
.service-card__vid video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.service-card__body{padding:22px;}
.service-card__title{
 font-family:var(--ff-display);font-size:1.2rem;font-weight:400;
 color:var(--c-navy);margin-bottom:8px;
}
.service-card__desc{font-size:13.5px;color:var(--c-muted);line-height:1.6;margin-bottom:14px;}
.service-card__link{
 display:inline-flex;align-items:center;gap:6px;
 font-size:13px;font-weight:700;color:var(--c-blue);
}
.service-card__link svg{transition:transform .18s;}
.service-card:hover .service-card__link svg{transform:translateX(4px);}

/* ==============================
 HOW IT WORKS
 ============================== */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:56px;}
.how-step__num{
 width:48px;height:48px;
 background:rgba(96,165,250,.15);border:1.5px solid rgba(96,165,250,.3);
 border-radius:50%;display:flex;align-items:center;justify-content:center;
 font-family:var(--ff-display);font-size:1.3rem;color:var(--c-accent);margin-bottom:18px;
}
.how-step__title{font-family:var(--ff-display);font-size:1.1rem;font-weight:400;color:#fff;margin-bottom:8px;}
.how-step__desc{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.65;}

/* ==============================
 WHY CLEAVA (homepage)
 ============================== */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.why-img-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;}
.why-img-wrap img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;object-position:center top;}
.why-badge{
 position:absolute;bottom:20px;left:20px;
 background:#fff;border-radius:var(--r);padding:14px 18px;
 box-shadow:var(--sh-lg);display:flex;align-items:center;gap:12px;
}
.why-badge__num{font-family:var(--ff-display);font-size:1.8rem;color:var(--c-navy);line-height:1;}
.why-badge__text{font-size:12px;color:var(--c-muted);max-width:80px;line-height:1.4;}
.why-features{display:flex;flex-direction:column;gap:24px;margin-top:32px;}
.why-feat{display:flex;gap:16px;align-items:flex-start;}
.why-feat__icon{
 width:36px;height:36px;
 display:flex;align-items:center;justify-content:center;
 color:var(--c-blue);flex-shrink:0;
}
.why-feat__title{font-size:15px;font-weight:700;color:var(--c-navy);margin-bottom:3px;}
.why-feat__desc{font-size:13.5px;color:var(--c-muted);line-height:1.6;}

/* ==============================
 REVIEWS CAROUSEL
 ============================== */
.reviews-section{background:var(--c-off);}
.reviews-meta{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap;}
.stars{display:flex;gap:2px;}.stars svg{color:#f59e0b;width:19px;height:19px;}
.rating-score{font-family:var(--ff-display);font-size:1.3rem;color:var(--c-navy);}
.rating-count{font-size:13px;color:var(--c-muted);}
.g-pill{
 display:inline-flex;align-items:center;gap:5px;
 border:1.5px solid var(--c-border);background:#fff;
 padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;color:var(--c-muted);
}
.reviews-carousel{position:relative;margin-top:44px;overflow:hidden;}
.reviews-track-wrap{overflow:hidden;}
.reviews-track{
 display:flex;gap:18px;
 transition:transform .5s cubic-bezier(.23,1,.32,1);
 cursor:grab;user-select:none;
}
.reviews-track:active{cursor:grabbing;}
.review-card{
 background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
 padding:24px 22px;min-width:320px;max-width:320px;flex-shrink:0;
 box-shadow:var(--sh);transition:transform .2s,box-shadow .2s;
}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.review-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.review-card__author{display:flex;align-items:center;gap:10px;}
.review-card__avatar{
 width:40px;height:40px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:15px;font-weight:700;color:#fff;flex-shrink:0;
}
.review-card__name{font-size:14px;font-weight:700;color:var(--c-navy);}
.review-card__via{font-size:11px;color:var(--c-muted);margin-top:1px;display:flex;align-items:center;gap:4px;}
.review-card__stars{display:flex;gap:2px;}.review-card__stars svg{width:14px;height:14px;color:#f59e0b;}
.review-card__text{font-size:13.5px;line-height:1.65;color:#334155;}
.review-card__date{font-size:11px;color:var(--c-muted-light);margin-top:12.5px;}
.reviews-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px;}
.reviews-arrow{
 width:44px;height:44px;border-radius:50%;
 border:1.5px solid var(--c-border);background:#fff;color:var(--c-navy);
 display:flex;align-items:center;justify-content:center;
 cursor:pointer;transition:all .18s;
}
.reviews-arrow:hover{background:var(--c-navy);color:#fff;border-color:var(--c-navy);}
.reviews-dots{display:flex;gap:6px;}
.reviews-dot{width:7px;height:7px;border-radius:50%;background:rgba(10,22,40,.15);border:none;padding:0;cursor:pointer;transition:all .2s;}
.reviews-dot.active{background:var(--c-blue);width:22px;border-radius:3px;}

/* ==============================
 AREAS
 ============================== */
.areas-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;}
.area-pill{
 background:#fff;border:1.5px solid var(--c-border);border-radius:999px;
 padding:8px 18px;font-size:14px;font-weight:500;color:var(--c-navy);
 transition:all .18s;
}
.area-pill:hover{background:#eff6ff;border-color:rgba(29,78,216,.25);color:var(--c-blue);}

/* ==============================
 FRESKA-STYLE CTA SECTION
 ============================== */
.cta-section{
 background:var(--c-navy);padding:96px 24px;position:relative;overflow:hidden;
}
.cta-section::before{
 content:'';position:absolute;inset:0;
 background:radial-gradient(ellipse 800px 600px at 60% 50%,rgba(29,78,216,.25) 0%,transparent 70%);
}
.cta-inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;}
.cta-split{display:grid;grid-template-columns:1fr 480px;gap:72px;align-items:center;}
.cta-title{
 font-family:var(--ff-display);font-size:clamp(2rem,3.5vw,3.2rem);
 font-weight:400;color:#fff;line-height:1.1;letter-spacing:-.02em;margin-bottom:16px;
}
.cta-title em{font-style:italic;color:var(--c-accent);}
.cta-desc{font-size:1.05rem;color:rgba(255,255,255,.68);line-height:1.65;margin-bottom:32px;}
.cta-checks{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;}
.cta-check{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.8);font-weight:500;}
.cta-check svg{color:var(--c-accent);flex-shrink:0;}
.cta-card{background:#fff;border-radius:var(--r-lg);padding:32px 28px;}
.cta-card h3{
 font-family:var(--ff-display);font-size:1.5rem;font-weight:400;
 color:var(--c-navy);margin-bottom:6px;
}
.cta-card p{font-size:13.5px;color:var(--c-muted);margin-bottom:22px;}

/* ==============================
 FOOTER
 ============================== */
footer{background:var(--c-navy);color:rgba(255,255,255,.65);padding:64px 24px 36px;}
.footer-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;}
.footer-logo img{height:48px;width:auto;object-fit:contain;margin-bottom:14px;display:block;max-width:200px;}
.footer-brand p{font-size:13.5px;line-height:1.7;max-width:220px;}
.footer-contacts{margin-top:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.footer-contacts a{font-size:13px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:7px;transition:color .15s;}
.footer-contacts a:hover{color:#fff;}
.footer-hours{margin-top:14px;}
.footer-hours__label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:6px;}
.footer-hours p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.8;}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:16px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:13.5px;color:rgba(255,255,255,.62);transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
 max-width:var(--max);margin:48px auto 0;
 padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
 display:flex;align-items:center;justify-content:space-between;
 flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.35);
}
.footer-bottom a{color:rgba(255,255,255,.35);transition:color .15s;}
.footer-bottom a:hover{color:rgba(255,255,255,.6);}

/* ==============================
 MODAL
 ============================== */
.modal-overlay{
 position:fixed;inset:0;z-index:9999;
 background:rgba(10,22,40,.65);backdrop-filter:blur(8px);
 display:none;align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.open{display:flex;}
.modal{
 background:#fff;border-radius:var(--r-lg);padding:36px 32px 28px;
 width:min(100%,520px);position:relative;
 box-shadow:0 32px 80px rgba(0,0,0,.3);
 animation:modalIn .2s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.modal__close{
 position:absolute;top:14px;right:14px;border:none;background:none;
 width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 color:var(--c-muted-light);font-size:18px;transition:all .15s;
}
.modal__close:hover{background:var(--c-off);color:var(--c-navy);}
.modal__title{font-family:var(--ff-display);font-size:1.7rem;font-weight:400;color:var(--c-navy);margin-bottom:4px;}
.modal__sub{font-size:14px;color:var(--c-muted);margin-bottom:24px;}

/* ==============================
 FAB
 ============================== */
.fab{
 position:fixed;bottom:24px;right:24px;z-index:997;
 background:var(--c-blue);color:#fff;border:none;
 border-radius:999px;padding:13px 24px;
 font-size:14px;font-weight:700;
 box-shadow:0 8px 28px rgba(29,78,216,.4);
 display:flex;align-items:center;gap:8px;
 transition:all .2s;

}
.fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 36px rgba(29,78,216,.5);}


/* ==============================
 SERVICE PAGES — NEW DESIGN
 ============================== */
/* Split hero */
.sp-hero{
 position:relative;background:var(--c-navy);
 overflow:hidden;min-height:56vh;
 display:flex;align-items:center;
}
.sp-hero__bg{position:absolute;inset:0;}
.sp-hero__bg img{
 width:100%;height:100%;
 object-fit:cover;object-position:center 15%;
 display:block;
}
.sp-hero__bg::after{
 content:'';position:absolute;inset:0;
 background:linear-gradient(105deg,rgba(10,22,40,.96) 0%,rgba(10,22,40,.88) 44%,rgba(10,22,40,.55) 72%,rgba(10,22,40,.2) 100%);
}
.sp-hero__content{
 position:relative;z-index:2;
 max-width:var(--max);margin:0 auto;
 padding:80px 24px 64px;
 width:100%;
 max-width:680px;
 margin-left:max(24px, calc((100vw - var(--max))/2));
}
.sp-hero__eyebrow{
 display:inline-flex;align-items:center;gap:7px;
 background:rgba(96,165,250,.15);border:1px solid rgba(96,165,250,.3);
 color:var(--c-accent);font-size:11px;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.sp-hero__title{
 font-family:var(--ff-display);
 font-size:clamp(2rem,4vw,3.6rem);
 font-weight:400;color:#fff;
 line-height:1.06;letter-spacing:-.03em;margin-bottom:14px;
}
.sp-hero__title em{color:var(--c-accent);}
.sp-hero__desc{
 font-size:1rem;color:rgba(255,255,255,.75);
 line-height:1.72;max-width:480px;margin-bottom:28px;
}
.sp-hero__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.sp-hero__actions a[href^="tel"]{color:rgba(255,255,255,.85)!important;font-weight:600;text-decoration:none;font-size:15px;}
.sp-hero__actions a[href^="tel"]:hover{color:#fff!important;}
@media(max-width:768px){
 .sp-hero{min-height:auto;}
 .sp-hero__content{
 padding:56px 20px 44px;
 margin-left:0;max-width:100%;
 }
}

/* Service content layout */
.sp-body{max-width:var(--max);margin:0 auto;padding:72px 24px;}
.sp-content{max-width:760px;}.sp-content h2{font-family:var(--ff-display);font-size:1.85rem;font-weight:400;color:var(--c-navy);margin-bottom:14px;letter-spacing:-.02em;}
.sp-content h3{font-family:var(--ff-display);font-size:1.2rem;font-weight:400;color:var(--c-navy);margin:28px 0 10px;}
.sp-content p{font-size:14.5px;color:var(--c-muted);line-height:1.8;margin-bottom:14px;}
.sp-content ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px;}
.sp-content ul li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--c-muted);line-height:1.55;}
.sp-content ul li::before{content:'✓';color:var(--c-blue);font-weight:800;flex-shrink:0;margin-top:1px;}

/* Features 2-col grid */
.sp-features{margin:36px 0;}
.sp-feature{background:#fff;border:1px solid var(--c-border);border-radius:14px;padding:22px;transition:box-shadow .2s,transform .2s;}.sp-feature:hover{box-shadow:0 8px 28px rgba(0,0,0,.08);transform:translateY(-2px);}
.sp-feature__icon{
 width:40px;height:40px;background:#eff6ff;border-radius:9px;
 display:flex;align-items:center;justify-content:center;color:var(--c-blue);margin-bottom:12px;
}
.sp-feature h3{font-size:15px;font-weight:700;color:var(--c-navy);margin:0 0 6px!important;}
.sp-feature p{font-size:13.5px;color:var(--c-muted);line-height:1.6;margin:0!important;}

/* Sticky sidebar */


.sp-sidebar-card h3{font-family:var(--ff-display);font-size:1.35rem;font-weight:400;color:var(--c-navy);margin-bottom:6px;}
.sp-sidebar-card>p{font-size:13.5px;color:var(--c-muted);margin-bottom:22px;line-height:1.55;}
.hours-box{background:var(--c-off);border:1px solid var(--c-border);border-radius:var(--r);padding:14px 16px;margin-top:16px;}
.hours-box__label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-blue);margin-bottom:9px;}
.hours-row{display:flex;justify-content:space-between;font-size:13px;color:var(--c-navy);padding:3px 0;}
.hours-row span:first-child{font-weight:600;}

/* Pricing on service pages */
.sp-pricing{padding:72px 24px;background:var(--c-navy);}
.sp-pricing-inner{max-width:var(--max);margin:0 auto;}
.sp-pricing-title{
 font-family:var(--ff-display);font-size:clamp(1.7rem,2.8vw,2.4rem);
 font-weight:400;color:#fff;text-align:center;margin-bottom:8px;letter-spacing:-.02em;
}
.sp-pricing-sub{text-align:center;color:rgba(255,255,255,.6);font-size:14px;margin-bottom:44px;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pricing-card{border-radius:var(--r-lg);overflow:hidden;transition:transform .22s;}
.pricing-card:hover{transform:translateY(-4px);}
.pricing-card__top{background:var(--c-navy-mid);padding:24px 22px;border-bottom:1px solid rgba(255,255,255,.08);}
.pricing-card__top h3{font-family:var(--ff-display);font-size:1.15rem;font-weight:400;font-style:italic;color:#fff;line-height:1.3;}
.pricing-card__body{background:rgba(255,255,255,.06);padding:24px 22px;backdrop-filter:blur(4px);}
.pricing-price{
 font-family:var(--ff-display);font-size:3rem;font-weight:400;
 color:var(--c-accent);line-height:1;margin-bottom:12px;
}
.pricing-price span{font-size:1rem;font-family:var(--ff-body);font-weight:600;color:rgba(255,255,255,.6);}
.pricing-card__body p{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:20px;}
.pricing-card__btn{
 display:block;width:100%;padding:12px;
 background:#fff;color:var(--c-navy);
 border:none;border-radius:999px;text-align:center;
 font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
 cursor:pointer;font-family:var(--ff-body);transition:background .18s;
}
.pricing-card__btn:hover{background:var(--c-off);}
.pricing-note{font-size:11.5px;color:rgba(255,255,255,.4);margin-top:12px;font-style:italic;text-align:center;}

/* FAQ */
.sp-faq{max-width:var(--max);margin:0 auto;padding:72px 24px 64px;}
.sp-faq__title{font-family:var(--ff-display);font-size:1.9rem;font-weight:400;color:var(--c-navy);margin-bottom:30px;letter-spacing:-.02em;}








/* Reviews on service pages */
.sp-reviews{padding:72px 24px;background:var(--c-off);min-height:auto;}
.sp-reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px;}
.sp-review-item{
 background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
 padding:22px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--sh);
}
.sp-review-avatar{
 width:42px;height:42px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:15px;font-weight:700;color:#fff;flex-shrink:0;
}
.sp-review-name{font-size:14px;font-weight:700;color:var(--c-navy);margin-bottom:5px;}
.sp-review-text{font-size:13.5px;color:var(--c-muted);line-height:1.65;}
.sp-review-stars{display:flex;gap:2px;margin-bottom:8px;}.sp-review-stars svg{width:13px;height:13px;color:#f59e0b;}

/* FRESKA-STYLE SERVICE CTA (bottom of service page) */
.freska-cta{
 background:var(--c-navy);
 padding:96px 24px;text-align:center;position:relative;overflow:hidden;
}
.freska-cta::before{
 content:'';position:absolute;inset:0;
 background:radial-gradient(circle 600px at center,rgba(29,78,216,.2) 0%,transparent 70%);
}
.freska-cta__inner{position:relative;z-index:1;max-width:680px;margin:0 auto;}
.freska-cta__title{
 font-family:var(--ff-display);font-size:clamp(1.9rem,3.5vw,2.8rem);
 font-weight:400;color:#fff;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px;
}
.freska-cta__title em{font-style:italic;color:var(--c-accent);}
.freska-cta__desc{font-size:1rem;color:rgba(255,255,255,.7);margin-bottom:36px;line-height:1.65;}
.freska-cta__actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}


/* HINNASTO PAGE */
.pricing-page{max-width:1000px;margin:0 auto;padding:72px 24px;}
.pricing-page h1{font-family:var(--ff-display);font-size:clamp(2rem,4vw,3rem);font-weight:400;color:var(--c-navy);margin-bottom:8px;letter-spacing:-.02em;}
.pricing-page .lead{font-size:1.05rem;color:var(--c-muted);margin-bottom:56px;max-width:560px;}
.pricing-section-title{font-family:var(--ff-display);font-size:1.5rem;font-weight:400;color:var(--c-navy);margin-bottom:6px;letter-spacing:-.01em;}
.pricing-section-sub{font-size:13.5px;color:var(--c-muted);margin-bottom:24px;}
.pricing-table{border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:48px;background:#fff;box-shadow:var(--sh);}
.pricing-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--c-border);}
.pricing-row:last-child{border-bottom:none;}
.pricing-row--header{background:var(--c-navy);}
.pricing-row--header .pc{color:rgba(255,255,255,.6);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
.pc{padding:16px 20px;font-size:14px;}
.pc:not(:last-child){border-right:1px solid var(--c-border);}
.pricing-row--header .pc:not(:last-child){border-right-color:rgba(255,255,255,.08);}
.pc--name{font-weight:600;color:var(--c-navy);}
.pc--price{font-family:var(--ff-display);font-size:1.3rem;color:var(--c-blue);}
.pc--note{color:var(--c-muted);font-size:13px;}
.pricing-info{background:#eff6ff;border:1px solid rgba(29,78,216,.12);border-radius:var(--r);padding:20px 24px;margin-bottom:48px;}
.pricing-info h3{font-size:14px;font-weight:700;color:var(--c-navy);margin-bottom:8px;}
.pricing-info p{font-size:13.5px;color:var(--c-muted);line-height:1.7;margin:0;}

/* LEGAL PAGES */
.legal-page{max-width:720px;margin:0 auto;padding:72px 24px;}
.legal-page h1{font-family:var(--ff-display);font-size:2.4rem;font-weight:400;color:var(--c-navy);margin-bottom:6px;}
.legal-page .meta{font-size:13px;color:var(--c-muted);margin-bottom:36px;}
.legal-page h2{font-family:var(--ff-display);font-size:1.3rem;font-weight:400;color:var(--c-navy);margin:32px 0 10px;}
.legal-page p,.legal-page li{font-size:14.5px;color:var(--c-muted);line-height:1.8;margin-bottom:10px;}
.legal-page ul{padding-left:18px;margin-bottom:14px;}
.legal-page a{color:var(--c-blue);text-decoration:underline;}

/* REVEAL ANIMATIONS */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;}
.reveal.visible{opacity:1;transform:none;}

/* ==============================
 RESPONSIVE
 ============================== */
@media(max-width:1024px){
 .services-grid{grid-template-columns:repeat(2,1fr);}
 .how-grid{grid-template-columns:repeat(2,1fr);gap:28px;}
 .footer-inner{grid-template-columns:1fr 1fr;gap:36px;}
 .why-grid{gap:48px;}
 .sp-body{grid-template-columns:1fr;gap:40px;}
 .sp-sidebar{position:static;}
 .cta-split{grid-template-columns:1fr;}
 .pricing-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
 
 
 .hero__inner{grid-template-columns:1fr;gap:36px;padding:80px 20px 60px;}
 .hero{min-height:auto;}
 .hero__stats{gap:20px;}
 .services-grid{grid-template-columns:1fr;}
 .how-grid{grid-template-columns:1fr;}
 .why-grid{grid-template-columns:1fr;}
 .trust-bar-inner{flex-direction:column;align-items:flex-start;}
 .trust-item:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.08);}
 .trust-item{width:100%;}
 .footer-inner{grid-template-columns:1fr 1fr;}
 .review-card{min-width:280px;max-width:280px;}
 .fab{bottom:14px;right:14px;padding:11px 18px;font-size:13px;}
 .section{padding:60px 20px;}
 .sp-hero__content{padding:60px 20px 40px;}
 .sp-features{grid-template-columns:1fr;}
 .sp-reviews-grid{grid-template-columns:1fr;}
 .freska-cta__form{grid-template-columns:1fr;border-radius:var(--r);}
 .freska-cta__input+.freska-cta__input{border-left:none;border-top:1px solid rgba(255,255,255,.1);}
 .freska-cta__submit{padding:16px;}
 .pricing-grid{grid-template-columns:1fr;}
 .pricing-row{grid-template-columns:1fr 1fr;}
 .hero__card{padding:24px 20px;}
}
@media(max-width:480px){
 .footer-inner{grid-template-columns:1fr;}
 .form-row{grid-template-columns:1fr;}
 .hero__actions{flex-direction:column;align-items:flex-start;}
 .modal{padding:28px 18px 22px;}
 .sp-hero__actions{flex-direction:column;align-items:flex-start;}
}

/* ── FRESKA-EXACT CTA ABOVE FOOTER ── */
.fcta-footer{
 background:var(--c-navy-light);
 border-top:2px solid rgba(255,255,255,.2);border-bottom:2px solid rgba(255,255,255,.2);
 border-bottom:3px solid rgba(255,255,255,.04);
 padding:72px 24px;
 margin-bottom:0;
}
.fcta-footer__inner{
 max-width:var(--max);margin:0 auto;
 display:grid;grid-template-columns:1fr 1fr;
 gap:64px;align-items:center;
}
.fcta-footer__left h3{
 font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:8px;
}
.fcta-footer__left p{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:12px;}
.fcta-footer__left a{
 color:var(--c-accent);font-size:14px;font-weight:600;
 text-decoration:underline;text-underline-offset:3px;transition:color .15s;
}
.fcta-footer__right h3{
 font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:16px;
}
.fcta-pill-form{
 display:flex;align-items:stretch;
 background:#fff;border:none;
 border-radius:999px;overflow:hidden;
 box-shadow:0 4px 24px rgba(0,0,0,.2);
}
.fcta-pill-form select,.fcta-pill-form input{
 border:none;outline:none;font-family:var(--ff-body);
 font-size:14px;color:var(--c-text);background:#fff;
 padding:16px 18px;
 min-width:0;
}
.fcta-pill-form select{
 appearance:none;border-right:1.5px solid #e2e8f0;
 min-width:160px;cursor:pointer;
 background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a1628' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 14px center;
 padding-right:36px;
}
.fcta-pill-form input{flex:1;min-width:0;border-right:1.5px solid #e2e8f0;}
.fcta-pill-form input::placeholder{color:#94a3b8;}
.fcta-pill-btn{
 background:var(--c-blue);color:#fff;border:none;
 padding:16px 28px;font-size:14px;font-weight:700;
 cursor:pointer;white-space:nowrap;font-family:var(--ff-body);
 border-radius:0 999px 999px 0;
 transition:background .18s;flex-shrink:0;
}
.fcta-pill-btn:hover{background:#1e40af;}
.fcta-footer__note{font-size:12px;color:rgba(255,255,255,.42);margin-top:12.5px;}

/* ── FRESKA SERVICE HERO STYLE ── */
.sp-hero-freska{
 background:#e8eaf8;
 padding:80px 24px;
 position:relative;overflow:hidden;
}
.sp-hero-freska__inner{
 max-width:var(--max);margin:0 auto;
 display:grid;grid-template-columns:1fr 1fr;
 gap:48px;align-items:center;
}
.sp-hero-freska__title{
 font-size:clamp(2rem,4vw,3.2rem);font-weight:800;
 color:var(--c-navy);line-height:1.1;letter-spacing:-.02em;
 text-transform:uppercase;margin-bottom:16px;
}
.sp-hero-freska__desc{font-size:1rem;color:var(--c-muted);line-height:1.65;margin-bottom:28px;max-width:480px;}
.sp-hero-freska__btn-primary{
 display:inline-flex;align-items:center;gap:10px;
 background:var(--c-navy);color:#fff;
 padding:16px 36px;border-radius:999px;
 font-size:15px;font-weight:700;border:none;cursor:pointer;
 font-family:var(--ff-body);margin-bottom:20px;width:100%;max-width:340px;
 justify-content:center;transition:background .18s;
}
.sp-hero-freska__btn-primary:hover{background:var(--c-navy-mid);}
.sp-hero-freska__inline-form{
 display:flex;border-radius:999px;overflow:hidden;
 border:1.5px solid #c8cadc;background:#fff;
 max-width:340px;margin-bottom:12px;
}
.sp-hero-freska__inline-form input{
 flex:1;border:none;outline:none;padding:14px 18px;
 font-size:14px;font-family:var(--ff-body);color:var(--c-text);
 min-width:0;
}
.sp-hero-freska__inline-form input::placeholder{color:#94a3b8;}
.sp-hero-freska__inline-form input+input{border-left:1.5px solid #c8cadc;}
.sp-hero-freska__btn-secondary{
 display:inline-flex;align-items:center;justify-content:center;
 background:#fff;color:var(--c-navy);
 padding:14px 36px;border-radius:999px;
 font-size:15px;font-weight:700;border:2px solid var(--c-navy);cursor:pointer;
 font-family:var(--ff-body);width:100%;max-width:340px;
 transition:all .18s;
}
.sp-hero-freska__btn-secondary:hover{background:var(--c-navy);color:#fff;}
.sp-hero-freska__stars{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;color:var(--c-muted);}
.sp-hero-freska__stars svg{color:#f59e0b;width:16px;height:16px;}
.sp-hero-freska__img{border-radius:var(--r-lg);overflow:hidden;position:relative;}
.sp-hero-freska__img img,.sp-hero-freska__img video{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);}

@media(max-width:768px){
 .fcta-footer__inner{grid-template-columns:1fr;gap:36px;}
 .fcta-pill-form{flex-direction:column;border-radius:var(--r);}
 .fcta-pill-form select{border-right:none;border-bottom:1.5px solid #e2e8f0;min-width:auto;}
 .fcta-pill-form input{border-right:none;border-bottom:1.5px solid #e2e8f0;}
 .fcta-pill-btn{border-radius:0 0 var(--r) var(--r);padding:14px;}
 .sp-hero-freska__inner{grid-template-columns:1fr;}
 .sp-hero-freska{padding:56px 20px;}
}

/* BOOKING MODAL */
.booking-modal {
 width: min(100%, 580px);
 max-height: 90vh;
 overflow-y: auto;
 padding: 32px 28px 28px;
}
.bf-section {
 margin-bottom: 20px;
}
.bf-section__label {
 display: block;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: var(--c-muted);
 margin-bottom: 10px;
}
.bf-toggle {
 display: flex;
 gap: 0;
 border: 1.5px solid var(--c-border);
 border-radius: 10px;
 overflow: hidden;
}
.bf-toggle__btn {
 flex: 1;
 padding: 11px 16px;
 background: #fff;
 border: none;
 font-size: 14px;
 font-weight: 600;
 color: var(--c-muted);
 cursor: pointer;
 font-family: var(--ff-body);
 transition: all .15s;
}
.bf-toggle__btn.active {
 background: var(--c-navy);
 color: #fff;
}
.bf-toggle__btn:not(:last-child) {
 border-right: 1.5px solid var(--c-border);
}
.bf-radio-group {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
}
.bf-radio {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 11px 16px;
 border: 1.5px solid var(--c-border);
 border-radius: 10px;
 cursor: pointer;
 font-size: 14px;
 font-weight: 500;
 color: var(--c-text);
 transition: border-color .15s;
 flex: 1;
 min-width: 160px;
}
.bf-radio input { accent-color: var(--c-blue); }
.bf-radio:has(input:checked) {
 border-color: var(--c-blue);
 background: #eff6ff;
 color: var(--c-blue);
}
.bf-checks {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
}
.bf-check {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 14px;
 border: 1.5px solid var(--c-border);
 border-radius: 9px;
 cursor: pointer;
 font-size: 13.5px;
 font-weight: 500;
 transition: border-color .15s;
}
.bf-check input { accent-color: var(--c-blue); }
.bf-check:has(input:checked) { border-color: var(--c-blue); background: #eff6ff; }






@media(max-width:768px){
 .bf-checks { grid-template-columns: 1fr; }
 .bf-radio-group { flex-direction: column; }
 .booking-modal { padding: 24px 18px 20px; }
}

/* Mobile performance */
@media(max-width:768px){
 .reveal{opacity:1;transform:none;transition:none;}
 .service-card:hover{transform:none;box-shadow:var(--sh);}
 .btn-primary:hover{transform:none;}
 .btn-white:hover{transform:none;}
 * {-webkit-tap-highlight-color:transparent;}
}





/* Performance */
img{content-visibility:auto;}
.service-card__img{will-change:auto;}
.reviews-track{will-change:transform;}
video{will-change:auto;}

@media(max-width:768px){
 .sp-hero__actions{flex-direction:column;align-items:flex-start;gap:10px;}
 .sp-hero__actions a{display:none;}
 .sp-hero__content{padding:52px 20px 40px;}
 .sp-hero__title{font-size:clamp(1.9rem,7vw,2.8rem);}
 .sp-hero__desc{font-size:.95rem;}
 .sp-hero__eyebrow{font-size:10px;padding:5px 12px;}
 .btn-primary{width:100%;justify-content:center;padding:15px 24px;font-size:15px;}
}

@media(max-width:768px){
 /* Hero: stack video on top, content below */
 .hero{
 min-height:auto;
 display:flex;
 flex-direction:column;
 align-items:stretch;
 }
 .hero__video-wrap{
 position:relative;
 width:100%;
 height:56vw;
 min-height:220px;
 max-height:300px;
 flex-shrink:0;
 order:0;
 }
 .hero__video-wrap video{
 width:100%;height:100%;
 object-fit:cover;display:block;
 }
 .hero__overlay{display:none;}
 .hero__inner{
 position:relative;z-index:2;
 grid-template-columns:1fr;
 padding:32px 20px 36px;
 background:var(--c-navy);
 gap:28px;
 order:1;
 }
 .hero__copy{order:1;}
 .hero__card{order:2;}
 .hero__title{font-size:clamp(1.8rem,7vw,2.4rem);}
 .hero__desc{font-size:.95rem;color:rgba(255,255,255,.8);}
 .hero__stats{gap:16px;}
 .hero__stat__num{font-size:1.6rem;}
}

.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:16px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:13.5px;color:rgba(255,255,255,.62);transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{max-width:var(--max);margin:48px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.35);}
.footer-bottom a{color:rgba(255,255,255,.35);transition:color .15s;}
.footer-bottom a:hover{color:rgba(255,255,255,.6);}

/* ── KOTISIIVOUS PAGE SPECIFIC ── */
.koti-includes{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.koti-includes li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--c-muted);line-height:1.55;}
.koti-includes li::before{content:'✓';color:var(--c-blue);font-weight:800;flex-shrink:0;}
.koti-feat-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:20px;transition:box-shadow .2s;}
.koti-feat-card:hover{box-shadow:var(--sh-lg);}
.koti-feat-icon{width:36px;height:36px;background:#eff6ff;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--c-blue);font-weight:800;font-size:16px;margin-bottom:10px;}
.koti-feat-card h3{font-size:14px;font-weight:700;color:var(--c-navy);margin-bottom:6px;}
.koti-feat-card p{font-size:13px;color:var(--c-muted);line-height:1.55;}
.koti-price-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:28px 24px;text-align:center;display:flex;flex-direction:column;gap:0;}
.koti-price-card__top{flex:1;}
.koti-price-num{font-family:var(--ff-display);font-size:3rem;color:var(--c-accent);line-height:1;margin-bottom:12px;}
.koti-price-num span{font-size:1rem;font-family:var(--ff-body);font-weight:600;color:rgba(255,255,255,.55);}
.koti-price-card p{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:20px;}
.koti-price-btn{background:#fff;color:var(--c-navy);border:none;padding:12px 28px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer;font-family:var(--ff-body);transition:background .18s;margin-bottom:12px;}
.koti-price-btn:hover{background:var(--c-off);}
.koti-price-note{font-size:11.5px;color:rgba(255,255,255,.35);font-style:italic;}
.koti-guarantee{display:flex;gap:14px;align-items:flex-start;}
.koti-guarantee__icon{width:40px;height:40px;background:#eff6ff;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--c-blue);flex-shrink:0;}
.koti-guarantee__title{font-size:15px;font-weight:700;color:var(--c-navy);margin-bottom:3px;}
.koti-guarantee__desc{font-size:13.5px;color:var(--c-muted);line-height:1.55;}
@media(max-width:768px){
 .koti-feat-card h3{font-size:13px;}
 .koti-price-card{padding:22px 18px;}
 .koti-price-num{font-size:2.4rem;}
}
@media(max-width:1024px){
 .section-inner > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
 .section-inner > div > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr 1fr!important;}
 [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;}
}

/* ── SERVICE PAGE LAYOUT OVERHAUL ── */

/* sp-grid: responsive 2-col that collapses gracefully */
.sp-grid-2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 56px;
 align-items: start;
}
.sp-grid-3 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}
.sp-grid-4 {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 14px;
}

/* Feature cards — refined */
.koti-feat-card {
 background: #fff;
 border: 1px solid var(--c-border);
 border-radius: 14px;
 padding: 22px 20px;
 transition: box-shadow .2s, transform .2s;
}
.koti-feat-card:hover {
 box-shadow: 0 8px 28px rgba(0,0,0,.08);
 transform: translateY(-2px);
}
.koti-feat-card h3 {
 font-size: 15px !important;
 font-weight: 700 !important;
 color: var(--c-navy) !important;
 margin-bottom: 6px !important;
}
.koti-feat-card p {
 font-size: 13.5px !important;
 color: var(--c-muted) !important;
 line-height: 1.6 !important;
 margin: 0 !important;
}

/* Guarantee rows */
.koti-guarantee {
 display: flex;
 gap: 14px;
 align-items: flex-start;
 padding: 16px 0;
 border-bottom: 1px solid var(--c-border);
}
.koti-guarantee:last-child { border-bottom: none; }
.koti-guarantee__icon {
 width: 38px;
 height: 38px;
 background: #eff6ff;
 border-radius: 9px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--c-blue);
 flex-shrink: 0;
}
.koti-guarantee__title {
 font-size: 15px !important;
 font-weight: 700 !important;
 color: var(--c-navy) !important;
 margin-bottom: 3px !important;
}
.koti-guarantee__desc {
 font-size: 13.5px !important;
 color: var(--c-muted) !important;
 line-height: 1.55 !important;
 margin: 0 !important;
}

/* Price cards */
.koti-price-card {
 background: rgba(255,255,255,.06);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 16px;
 padding: 28px 24px;
 display: flex;
 flex-direction: column;
 gap: 0;
 transition: transform .2s, background .2s;
}
.koti-price-card:hover {
 transform: translateY(-3px);
 background: rgba(255,255,255,.1);
}
.koti-price-num {
 font-family: var(--ff-display);
 font-size: 3rem;
 color: var(--c-accent);
 line-height: 1;
 margin-bottom: 10px;
}
.koti-price-num span {
 font-size: .95rem;
 font-family: var(--ff-body);
 font-weight: 600;
 color: rgba(255,255,255,.5);
}
.koti-price-btn {
 background: #fff;
 color: var(--c-navy);
 border: none;
 padding: 12px 28px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: .04em;
 cursor: pointer;
 font-family: var(--ff-body);
 transition: background .18s;
 margin-top: auto;
 margin-bottom: 12px;
 width: 100%;
}
.koti-price-btn:hover { background: var(--c-off); }
.koti-price-note {
 font-size: 11.5px;
 color: rgba(255,255,255,.35);
 font-style: italic;
 text-align: center;
}

/* sp-reviews section */
.sp-reviews {
 padding: 72px 24px;
 background: var(--c-off);
}

/* Includes list */
.koti-includes {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-bottom: 4px;
}
.koti-includes li {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: 14.5px;
 color: var(--c-muted);
 line-height: 1.55;
}
.koti-includes li::before {
 content: '✓';
 color: var(--c-blue);
 font-weight: 800;
 flex-shrink: 0;
}

/* ── RESPONSIVE ── */
@media(max-width: 1024px) {
 .sp-grid-2 { grid-template-columns: 1fr; gap: 36px; }
 .sp-grid-3 { grid-template-columns: 1fr 1fr; }
 .sp-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 640px) {
 .sp-grid-3 { grid-template-columns: 1fr; }
 .sp-grid-4 { grid-template-columns: 1fr; }
 .koti-price-num { font-size: 2.4rem; }
}

/* ── PERFORMANCE OPTIMISATIONS ── */
@media(max-width:768px){
 /* Disable all CSS transitions on mobile for smoothness */
 .service-card{transition:none!important;}
 .service-card:hover{transform:none!important;box-shadow:var(--sh)!important;}
 .btn-primary:hover,.btn-white:hover,.btn-outline:hover{transform:none!important;}
 .review-card:hover{transform:none!important;box-shadow:var(--sh)!important;}
 .koti-feat-card:hover,.koti-price-card:hover{transform:none!important;}
 /* GPU-accelerate the video wrapper */
 .hero__video-wrap{
 transform:translateZ(0);
 -webkit-transform:translateZ(0);
 will-change:auto;
 backface-visibility:hidden;
 }
 /* Reduce reveal animation cost */
 .reveal{transition:opacity .3s ease!important;transform:none!important;}
}
/* Ensure video never blocks interaction */
.hero__video-wrap video{
 pointer-events:none;
 -webkit-transform:translateZ(0);
 transform:translateZ(0);
}

/* ── LAHJAKORTTI PAGE ── */
.lahjakortti-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lk-card {
 border:2px solid var(--c-border);
 border-radius:var(--r-lg);
 padding:24px 20px;
 cursor:pointer;
 transition:all .2s;
 background:#fff;
 position:relative;
 text-align:center;
}
.lk-card:hover { border-color:var(--c-blue); transform:translateY(-3px); box-shadow:0 8px 28px rgba(29,78,216,.12); }
.lk-card.selected { border-color:var(--c-blue); background:#eff6ff; box-shadow:0 8px 28px rgba(29,78,216,.15); }
.lk-badge {
 position:absolute; top:-12px; left:50%; transform:translateX(-50%);
 background:linear-gradient(135deg,var(--c-blue),#1e40af);
 color:#fff; font-size:11px; font-weight:700; padding:4px 14px;
 border-radius:999px; white-space:nowrap;
}
.lk-icon { font-size:32px; margin-bottom:12px; }
.lk-card h3 { font-size:16px; font-weight:700; color:var(--c-navy); margin-bottom:10px; }
.lk-price { font-family:var(--ff-display); font-size:2.6rem; color:var(--c-navy); line-height:1; }
.lk-price span { font-size:1.2rem; font-family:var(--ff-body); }
.lk-original { font-size:12px; color:var(--c-muted-light); text-decoration:line-through; margin:6px 0 12px; }
.lk-card p { font-size:13px; color:var(--c-muted); line-height:1.6; }
.lk-amount-btn {
 background:var(--c-off); border:1.5px solid var(--c-border);
 border-radius:999px; padding:10px 20px; font-size:15px;
 font-weight:700; color:var(--c-navy); cursor:pointer;
 font-family:var(--ff-body); transition:all .18s;
}
.lk-amount-btn:hover,.lk-amount-btn.active { background:var(--c-blue); color:#fff; border-color:var(--c-blue); }



/* ── READABILITY: darker body text ── */
p, li, .service-card__desc, .form-label, .form-note {
 color: var(--c-text);
}
.section-inner p, .sp-hero__desc, .koti-includes li,
.koti-guarantee__desc, .koti-feat-card p, .lk-card p {
 color: #4b5563;
}

.sp-hero__desc { color: rgba(255,255,255,.92) !important; }
.sp-hero__title { color: #fff !important; }
.sp-hero__eyebrow { color: rgba(255,255,255,.9) !important; }
.sp-hero__content h1, .sp-hero__content p { color: #fff !important; }






/* ── LAHJAKORTTI MOBILE ── */
@media(max-width:768px){
 .lahjakortti-grid{
 grid-template-columns:1fr 1fr !important;
 gap:12px !important;
 }
 .lk-card{ padding:18px 14px !important; }
 .lk-price{ font-size:2rem !important; }
 .lk-card h3{ font-size:14px !important; }
 .lk-badge{ font-size:10px !important; padding:3px 10px !important; }
 /* Form+terms: stack on mobile */
 #page-lahjakortti .sp-service-split{
 grid-template-columns:1fr !important;
 gap:28px !important;
 }
 /* Unstick terms on mobile */
 #page-lahjakortti [style*="position:sticky"]{
 position:relative !important;
 top:auto !important;
 }
}
@media(max-width:400px){
 .lahjakortti-grid{ grid-template-columns:1fr !important; }
}

/* ── PERFORMANCE ── */
.service-card,.review-card,.lk-card,.koti-feat-card{
 
}
img{
 max-width:100%;
 height:auto;
}
/* Prevent layout shift on images */
.service-card__img{
 aspect-ratio:4/3;
 object-fit:cover;
 width:100%;
}
/* Smooth scrolling */
html{ scroll-behavior:auto; }


@media(max-width:768px){
 .section{ padding:48px 20px !important; }
 .section-inner{ padding:0 !important; }
 .sp-service-split{ gap:28px !important; }
 /* Fix form+terms on mobile */
 .form-row{ flex-direction:column !important; gap:0 !important; }
}

.lahjakortti-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:16px;
}

/* ── FAQ TOGGLE ── */




/* ── FAQ ── */
.faq-item {
 border-bottom: 1px solid var(--c-border);
}
.faq-q {
 width: 100%;
 background: none;
 border: none;
 text-align: left;
 padding: 18px 0;
 font-size: 15px;
 font-weight: 700;
 color: var(--c-navy);
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;
 font-family: var(--ff-body);
 gap: 16px;
}
.faq-q::after {
 content: '+';
 font-size: 22px;
 font-weight: 700;
 color: var(--c-blue);
 flex-shrink: 0;
 line-height: 1;
 transition: transform .25s ease;
 display: inline-block;
 width: 22px;
 text-align: center;
}
.faq-q.open::after {
 content: '−';
 transform: rotate(0deg);
}
.faq-a {
 max-height: 0;
 overflow: hidden;
 transition: max-height .3s ease;
}
.faq-a.open {
 max-height: 400px;
}
.faq-a p {
 font-size: 14.5px;
 color: #4b5563;
 line-height: 1.75;
 padding-bottom: 18px;
 margin: 0;
}









/* Hide global fcta on specific pages */
body[data-page="myymalasiivous"] #contact-footer,
body[data-page="ravintolasiivous"] #contact-footer,
body[data-page="lattiahoito"] #contact-footer { display: none !important; }






.page, .page.active {
 position: static !important;
 z-index: auto !important;
 isolation: auto !important;
}


/* ── LAYOUT FIXES ── */

/* Section inner should be proper max-width */
.section-inner {
 max-width: 1120px;
 margin: 0 auto;
 width: 100%;
}

/* Section padding — not too much */
.section {
 padding: 72px 40px;
}

/* sp-service-split: always full width of container */
.sp-service-split {
 width: 100%;
}

/* Guarantees section: full width not narrow */
.section--grey .section-inner > div[style*="max-width:700px"],
.section--grey .section-inner > [style*="max-width:700px"] {
 max-width: 100% !important;
}

/* Hero: full viewport height, content left-aligned */
.sp-hero {
 min-height: auto;
 padding: 80px 0;
}
.sp-hero__content {
 max-width: 640px;
 padding: 80px 64px;
}

/* Reviews section width */
.sp-reviews > div {
 max-width: 1120px !important;
}

/* FAQ max-width matches content */
.section-inner[style*="max-width:760px"] {
 max-width: 800px !important;
}
.section-inner[style*="max-width:900px"] {
 max-width: 960px !important;
}

/* Ensure grids are balanced on desktop */
@media(min-width: 1024px) {
 .sp-service-split {
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 }
 .sp-grid-2 {
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 }
}

/* Remove massive padding overrides */
@media(min-width: 769px) {
 .section {
 padding: 72px 40px !important;
 }
}

no Soita,no tai */
@media(min-width: 769px){
}




/* ── CTA ABOVE FOOTER — visible separators ── */
.fcta-footer {
 border-top: 2px solid rgba(255,255,255,.22) !important;
 border-bottom: 2px solid rgba(255,255,255,.22) !important;
}

/* Guarantee grid responsive */
.guarantee-4col{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.guarantee-4col{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.guarantee-4col{grid-template-columns:1fr;}}

/* Guarantee grid responsive — single column on mobile */
@media(max-width:700px){
  .guarantee-grid{grid-template-columns:1fr !important;}
  .guarantee-grid > div{padding:36px 24px !important;font-size:56px;}
}

/* ── Section peek: next title always visible ── */
.page.active section, section { padding-top:56px !important; padding-bottom:56px !important; }

/* ── Guarantee grid ── */
/* Desktop: 2x2 — already in inline style */
@media(max-width:700px){
  .guarantee-grid { grid-template-columns:1fr !important; }
  .guarantee-grid > div { padding:36px 24px !important; grid-column:1/-1 !important; }
}

/* ── Includes section ── */
@media(max-width:900px){
  .sp-incl-grid { grid-template-columns:1fr !important; }
  .sp-incl-left { padding-right:0 !important; padding-bottom:28px; order:1; }
  .sp-incl-left .section-title { font-size:1.8rem !important; }
  .sp-incl-desc { font-size:17px !important; }
  .sp-incl-mid { order:2; flex-direction:row !important; padding:8px 0; }
  .sp-incl-mid > div:first-child,
  .sp-incl-mid > div:last-child { flex:none !important; width:60px !important; height:1.5px !important; }
  .sp-incl-right { padding-left:0 !important; order:3; }
  .sp-incl-right > div { padding:36px 24px !important; }
}


.sp-incl-grid{display:grid;grid-template-columns:1fr 80px 1fr;align-items:stretch;}
@media(max-width:900px){
  .sp-incl-grid{grid-template-columns:1fr !important;}
  .sp-incl-left{padding-right:0 !important;padding-bottom:28px;order:1;}
  .sp-incl-mid{order:2;flex-direction:row !important;padding:8px 0;}
  .sp-incl-mid>div:first-child,.sp-incl-mid>div:last-child{flex:none !important;width:60px !important;height:1.5px !important;}
  .sp-incl-right{padding-left:0 !important;order:3;}
}
.city-section{max-width:1200px;margin:0 auto;padding:72px 32px;}
.city-section h2{font-family:var(--ff-display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:400;color:var(--c-navy);margin-bottom:20px;}
.city-section h2 em{font-style:italic;color:var(--c-blue);}
.city-section p{font-size:17px;color:var(--c-muted);line-height:1.85;margin-bottom:16px;}
.city-section h3{font-size:19px;font-weight:700;color:var(--c-navy);margin:32px 0 12px;}
.city-grey{background:#f8fafc;}
.city-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px;}
.city-card{background:#fff;border:1.5px solid var(--c-border);border-radius:14px;padding:32px;}
.city-card h3{font-size:16px;font-weight:700;color:var(--c-navy);margin:0 0 10px;}
.city-card p{font-size:14px;color:#64748b;line-height:1.7;margin:0;}
.city-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;}
.city-price-card{border:1.5px solid var(--c-border);border-radius:14px;padding:28px 20px;text-align:center;}
.city-price-card h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);margin:0 0 12px;}
.city-price-card .price{font-size:44px;font-weight:800;color:var(--c-navy);line-height:1;}
.city-price-card .unit{font-size:16px;color:var(--c-muted);}
.city-price-card .after{font-size:13px;color:var(--c-blue);font-weight:600;margin-top:8px;}
.city-price-card p{font-size:13px;color:#64748b;line-height:1.6;margin:12px 0 0;}
.city-features{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;}
.city-feature{border-top:3px solid var(--c-navy);padding-top:20px;}
.city-feature-num{font-size:42px;font-weight:800;color:var(--c-navy);line-height:1;margin-bottom:10px;}
.city-feature-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-navy);margin-bottom:6px;}
.city-feature-desc{font-size:13px;color:#64748b;line-height:1.6;}
.city-areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.city-area-tag{background:#fff;border:1.5px solid var(--c-border);border-radius:999px;padding:8px 18px;font-size:14px;color:var(--c-navy);font-weight:500;}
.city-faq-wrap{max-width:760px;margin:0 auto;padding:72px 32px;}
.city-faq-wrap h2{font-family:var(--ff-display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:400;color:var(--c-navy);text-align:center;margin-bottom:40px;}
.city-faq-item{border-bottom:1px solid var(--c-border);padding:24px 0;}
.city-faq-q{font-size:16px;font-weight:700;color:var(--c-navy);margin-bottom:10px;}
.city-faq-a{font-size:15px;color:#64748b;line-height:1.75;margin:0;}
@media(max-width:900px){
  .city-pricing-grid{grid-template-columns:1fr 1fr;}
  .city-cards{grid-template-columns:1fr;}
  .city-features{grid-template-columns:1fr 1fr;}
}


/* ==============================
 KLIKATTAVA FAQ (override)
 ============================== */
.city-faq-wrap .city-faq-item{
 border-bottom:1px solid var(--c-border);
 padding:0;
 margin:0;
}
.city-faq-wrap .city-faq-q{
 cursor:pointer;
 position:relative;
 padding:20px 40px 20px 0;
 font-size:16px;
 font-weight:700;
 color:var(--c-navy);
 margin:0;
 user-select:none;
 line-height:1.4;
}
.city-faq-wrap .city-faq-q::after{
 content:'+';
 position:absolute;
 right:0;
 top:50%;
 transform:translateY(-50%);
 font-size:24px;
 font-weight:300;
 color:var(--c-blue);
 line-height:1;
}
.city-faq-wrap .city-faq-item.is-open .city-faq-q::after{
 content:'\2212';
}
.city-faq-wrap .city-faq-a{
 display:none;
 padding:0 0 20px 0;
 margin:0;
 font-size:15px;
 color:#64748b;
 line-height:1.75;
}
.city-faq-wrap .city-faq-item.is-open .city-faq-a{
 display:block;
}

/* ==============================
 MOBILE-NAVI: piilota Soita-painike
 ============================== */
@media(max-width:768px){
}

/* ==============================
 OSIOIDEN VÄLISTYS
 ============================== */
.city-section{padding:56px 32px !important;}
.city-faq-wrap{padding:56px 32px !important;}
.city-section + .city-grey > .city-section{padding-top:40px !important;}
.city-section:has(+ .city-grey){padding-bottom:40px !important;}
.city-grey + section.sp-includes-section{padding-top:0 !important;}
section.sp-includes-section + .city-grey > .city-section,
section.sp-includes-section + .city-grey > .city-faq-wrap{padding-top:0 !important;}
.city-section + .city-grey > .city-faq-wrap{padding-top:40px !important;}
section.sp-includes-section{padding:56px 32px !important;}


/* ==============================
 BREADCRUMB
 ============================== */
.city-breadcrumb{
 max-width:1200px;margin:0 auto;
 padding:24px 32px 0;
 font-size:13px;color:var(--c-muted);
 display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.city-breadcrumb a{
 color:var(--c-muted);text-decoration:none;transition:color .2s;
}
.city-breadcrumb a:hover{color:var(--c-blue);}
.city-breadcrumb span[aria-current]{
 color:var(--c-navy);font-weight:600;
}
.city-breadcrumb > span:not([aria-current]){
 color:var(--c-border);user-select:none;
}


/* ==============================
 CITY-CHIP (naapurikaupungit)
 ============================== */
.city-chip-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px;}
.city-chip{
 display:inline-block;padding:8px 18px;margin:4px;
 border-radius:999px;border:1.5px solid var(--c-border);
 font-size:13.5px;font-weight:600;text-decoration:none;
 color:var(--c-text);background:#fff;transition:all .2s;
}
.city-chip:hover{background:var(--c-blue);color:#fff;border-color:var(--c-blue);transform:translateY(-1px);}


/* ==============================
 REVIEWS CAROUSEL
 ============================== */
.reviews-section{background:var(--c-off);}
.reviews-meta{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap;}
.stars{display:flex;gap:2px;}.stars svg{color:#f59e0b;width:19px;height:19px;}
.rating-score{font-family:var(--ff-display);font-size:1.3rem;color:var(--c-navy);}
.rating-count{font-size:13px;color:var(--c-muted);}
.g-pill{
 display:inline-flex;align-items:center;gap:5px;
 border:1.5px solid var(--c-border);background:#fff;
 padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;color:var(--c-muted);
}
.reviews-carousel{position:relative;margin-top:44px;overflow:hidden;}
.reviews-track-wrap{overflow:hidden;}
.reviews-track{
 display:flex;gap:18px;
 transition:transform .5s cubic-bezier(.23,1,.32,1);
 cursor:grab;user-select:none;
}
.reviews-track:active{cursor:grabbing;}
.review-card{
 background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
 padding:24px 22px;min-width:320px;max-width:320px;flex-shrink:0;
 box-shadow:var(--sh);transition:transform .2s,box-shadow .2s;
}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.review-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.review-card__author{display:flex;align-items:center;gap:10px;}
.review-card__avatar{
 width:40px;height:40px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:15px;font-weight:700;color:#fff;flex-shrink:0;
}
.review-card__name{font-size:14px;font-weight:700;color:var(--c-navy);}
.review-card__via{font-size:11px;color:var(--c-muted);margin-top:1px;display:flex;align-items:center;gap:4px;}
.review-card__stars{display:flex;gap:2px;}.review-card__stars svg{width:14px;height:14px;color:#f59e0b;}
.review-card__text{font-size:13.5px;line-height:1.65;color:#334155;}
.review-card__date{font-size:11px;color:var(--c-muted-light);margin-top:12.5px;}
.reviews-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px;}
.reviews-arrow{
 width:44px;height:44px;border-radius:50%;
 border:1.5px solid var(--c-border);background:#fff;color:var(--c-navy);
 display:flex;align-items:center;justify-content:center;
 cursor:pointer;transition:all .18s;
}
.reviews-arrow:hover{background:var(--c-navy);color:#fff;border-color:var(--c-navy);}
.reviews-dots{display:flex;gap:6px;}
.reviews-dot{width:7px;height:7px;border-radius:50%;background:rgba(10,22,40,.15);border:none;padding:0;cursor:pointer;transition:all .2s;}
.reviews-dot.active{background:var(--c-blue);width:22px;border-radius:3px;}

/* CLEAVA-BATCH1-V13 — Puuttuvat review-card CSS-säännöt */ .review-card .review-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;} .review-card .review-avatar{width:42px;height:42px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex-shrink:0;} .review-card .review-meta-text{flex:1;min-width:0;} .review-card .review-name{font-weight:600;color:var(--c-navy);font-size:15px;line-height:1.3;} .review-card .review-date{font-size:12px;color:var(--c-text);opacity:.65;margin-top:2px;} .review-card .review-g{flex-shrink:0;display:flex;align-items:center;} .review-card .review-stars{display:flex;gap:2px;margin-bottom:10px;} .review-card .review-stars svg{width:16px;height:16px;color:#f59e0b;flex-shrink:0;} .review-card .review-text{font-size:14px;line-height:1.55;color:var(--c-text);}

/* === MIKSI CLEAVA mobile (toimistosiivous-style) === */
@media(max-width:768px){
.mc-why-grid{grid-template-columns:1fr !important;border-top:none !important;border-left:none !important;margin:0 16px 56px !important;gap:14px;display:flex !important;flex-direction:column}
.mc-why-grid > div{border:1.5px solid var(--c-navy) !important;padding:36px 28px !important}
.mc-why-grid > div > div:first-child{font-size:56px !important;margin-bottom:20px !important}
.mc-why-grid > div > h3{font-size:12px !important}
.mc-why-grid > div > p{font-size:14px !important}
}




/* Make footer logo readable on dark navy footer bg */
.footer-logo img{filter:brightness(0) invert(1)}


/* === RECOVERED v120: blog page styles lost during v109 CSS extraction === */


/* === BLOG PAGE — Cleava brand (navy/blue/white) === */
body.blog-body { background: #fff !important; padding-top: 78px !important; }
body.blog-body .section,
body.blog-body section { padding: 0 !important; }

/* Hero header */
body.blog-body .blog-hero {
  background: #0a1628;
  padding: 96px 32px 80px !important;
  text-align: center;
}
body.blog-body .blog-hero-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 18px;
  display: block;
}
body.blog-body .blog-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  max-width: 760px;
  margin: 0 auto 18px;
  letter-spacing: -.01em;
}
body.blog-body .blog-hero h1 em {
  font-style: italic;
  color: #60a5fa;
}
body.blog-body .blog-hero p {
  font-size: 17px;
  color: rgba(255,255,255,.72);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}
body.blog-body .blog-hero-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* Posts grid — 3 col desktop, 2 tablet, 1 mobile */
body.blog-body .blog-posts {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 80px 32px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
}
@media (max-width: 980px) {
  body.blog-body .blog-posts {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
    padding: 60px 24px !important;
  }
}
@media (max-width: 640px) {
  body.blog-body .blog-posts {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 48px 20px !important;
  }
}

/* Card — white, soft border, image top */
body.blog-body .blog-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  height: 100% !important;
}
body.blog-body .blog-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(10,22,40,.12) !important;
  border-color: rgba(29,78,216,.25) !important;
}
body.blog-body .blog-card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
body.blog-body .blog-card-body {
  padding: 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Category label — small caps, brand blue */
body.blog-body .blog-card-cat {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #1d4ed8 !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
}

/* Title — display serif, italic accent (matches site style) */
body.blog-body .blog-card h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: #0a1628 !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
}
body.blog-body .blog-card h2 em {
  font-style: italic !important;
  color: #1d4ed8 !important;
}

/* Date */
body.blog-body .blog-card-date {
  font-size: 13px !important;
  color: #94a3b8 !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
}

/* Excerpt */
body.blog-body .blog-card p {
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 0 18px !important;
}

/* Language toggle — small pills */
body.blog-body .blog-card-lang {
  display: flex !important;
  gap: 6px !important;
  margin: 0 0 16px !important;
  flex-wrap: wrap !important;
}
body.blog-body .blog-card-lang a {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #1d4ed8 !important;
  text-decoration: none !important;
  border: 1.2px solid rgba(29,78,216,.35) !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  transition: all .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
body.blog-body .blog-card-lang a:hover {
  background: #1d4ed8 !important;
  color: #fff !important;
  border-color: #1d4ed8 !important;
}

/* Read more — bottom button, brand navy with hover */
body.blog-body .blog-read-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #0a1628 !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  margin-top: auto !important;
  align-self: flex-start !important;
  transition: background .2s, transform .2s !important;
  border: none !important;
}
body.blog-body .blog-card:hover .blog-read-more {
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
}

/* === ARTICLE PAGE === */
body.blog-body .blog-article {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 72px 32px 96px !important;
}
body.blog-body .blog-article h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  color: #0a1628 !important;
  margin: 56px 0 18px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}
body.blog-body .blog-article h2 em {
  font-style: italic !important;
  color: #1d4ed8 !important;
}
body.blog-body .blog-article h3 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0a1628 !important;
  margin: 36px 0 14px !important;
}
body.blog-body .blog-article p {
  font-size: 17.5px !important;
  color: #334155 !important;
  line-height: 1.85 !important;
  margin-bottom: 22px !important;
}
body.blog-body .blog-article ul {
  margin: 18px 0 24px 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}
body.blog-body .blog-article ul li {
  font-size: 17px !important;
  color: #334155 !important;
  line-height: 1.85 !important;
  margin-bottom: 10px !important;
  padding-left: 28px !important;
  position: relative !important;
}
body.blog-body .blog-article ul li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}
body.blog-body .blog-article blockquote {
  border-left: 4px solid #1d4ed8 !important;
  padding: 20px 28px !important;
  background: #eff6ff !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 36px 0 !important;
  font-style: italic !important;
  color: #0a1628 !important;
  font-size: 17.5px !important;
  line-height: 1.7 !important;
}
body.blog-body .blog-highlight-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 36px !important;
  margin: 44px 0 !important;
}
body.blog-body .blog-highlight-box h3 { margin-top: 0 !important; }
body.blog-body .blog-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 36px 0 !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
body.blog-body .blog-table th {
  background: #0a1628 !important;
  color: #fff !important;
  padding: 14px 18px !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
body.blog-body .blog-table td {
  padding: 14px 18px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 15px !important;
  color: #475569 !important;
}
body.blog-body .blog-table tr:nth-child(even) td { background: #f8fafc !important; }

/* CTA box at end of article */
body.blog-body .blog-cta-box {
  background: #0a1628 !important;
  border-radius: 20px !important;
  padding: 56px 48px !important;
  text-align: center !important;
  margin: 64px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
body.blog-body .blog-cta-box::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 600px 400px at 50% 50%, rgba(29,78,216,.25) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
body.blog-body .blog-cta-box > * { position: relative !important; z-index: 1 !important; }
body.blog-body .blog-cta-box h2 {
  color: #fff !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
}
body.blog-body .blog-cta-box h2 em { font-style: italic; color: #60a5fa !important; }
body.blog-body .blog-cta-box p {
  color: rgba(255,255,255,.75) !important;
  font-size: 16px !important;
  margin-bottom: 32px !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.blog-body .blog-cta-box a {
  display: inline-block !important;
  background: #1d4ed8 !important;
  color: #fff !important;
  padding: 16px 40px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: all .2s !important;
  box-shadow: 0 4px 20px rgba(29,78,216,.4) !important;
}
body.blog-body .blog-cta-box a:hover {
  background: #1e40af !important;
  transform: translateY(-2px) !important;
}

body.blog-body .blog-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #1d4ed8 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  margin-bottom: 32px !important;
}
body.blog-body .blog-back-link:hover { text-decoration: underline !important; }

/* Article hero (for individual article pages) */
body.blog-body .blog-article-hero {
  background: #0a1628;
  padding: 96px 32px 64px !important;
  text-align: center;
}
body.blog-body .blog-article-hero .blog-hero-cat { color: #60a5fa !important; }
body.blog-body .blog-article-hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  max-width: 800px !important;
  margin: 0 auto 18px !important;
  letter-spacing: -.01em !important;
}
body.blog-body .blog-article-hero h1 em { font-style: italic; color: #60a5fa !important; }
body.blog-body .blog-article-hero p,
body.blog-body .blog-article-hero .blog-hero-meta {
  color: rgba(255,255,255,.7) !important;
  font-size: 15px !important;
}

@media (max-width: 768px) {
  body.blog-body .blog-article { padding: 48px 22px 64px !important; }
  body.blog-body .blog-article h2 { font-size: 1.45rem !important; margin: 40px 0 14px !important; }
  body.blog-body .blog-article p { font-size: 16.5px !important; }
  body.blog-body .blog-cta-box { padding: 36px 24px !important; }
  body.blog-body .blog-cta-box h2 { font-size: 1.6rem !important; }
}


/* v120: blog-related-card rules */
.blog-related-card { background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:22px;text-decoration:none;display:block;transition:transform .2s,box-shadow .2s; }
.blog-related-card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08); }
.blog-related-card .blog-card-cat { font-size:11px;letter-spacing:.1em;font-weight:700;color:#1d4ed8;text-transform:uppercase;margin-bottom:8px; }
.blog-related-card h3 { font-family:'Fraunces',Georgia,serif;font-size:1.1rem;color:#0a1628;font-weight:400;line-height:1.3;letter-spacing:-.01em; }


/* === v124: inline link styling within blog article body === */
body.blog-body .blog-article p a,
body.blog-body .blog-article li a,
body.blog-body .blog-article .blog-highlight-box a {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color .15s ease;
}
body.blog-body .blog-article p a:hover,
body.blog-body .blog-article li a:hover,
body.blog-body .blog-article .blog-highlight-box a:hover {
  color: #1e40af !important;
  text-decoration-thickness: 2px;
}
/* Don't apply to the back link, CTA box, or button-styled anchors */
body.blog-body .blog-article .blog-back-link {
  text-decoration: none !important;
  font-weight: 600 !important;
}
