/* ============================================================
ROCC Component Library — 2026 Web Styleguide tokens + components
Single source of truth in CSS. Reference: ROCC-WEB-STYLEGUIDE-2026.md
Namespace: every component root carries .r26 ; classes prefixed r26-
Tokens are prefixed --r26-* so they can never clash with theme vars.
============================================================ */
:root{
/* 1. Colors */
--r26-canvas:#F5F4F1; /* page bg — NEVER pure white */
--r26-surface:#FFFFFF; /* cards / boxes */
--r26-blue-deep:#1A2A5C; /* headlines, primary btn, dark bands */
--r26-blue:#2F4E9E; /* kicker, links, accent */
--r26-blue-light:#8FB8D9; /* ONLY on dark */
--r26-chip:#ECEFF7; /* badges, tag bg, light-btn hover fill */
--r26-ink:#1C1C1A; /* strong UI text — never #000 */
--r26-body:#2A2A28; /* body copy */
--r26-muted:#7A7A7A; /* captions, footnotes, footer */
--r26-muted-soft:#9B9A93; /* section-tags, tertiary */
--r26-hairline:#D9D6CE; /* section dividers */
--r26-hairline-soft:#E5E3DE; /* card borders, row lines */
/* 2. Type */
--r26-font-head:"Montserrat",system-ui,sans-serif;
--r26-font-body:"DM Sans",system-ui,sans-serif;
--r26-font-mono:"DM Mono",ui-monospace,monospace;
/* 4. Layout */
--r26-maxw:1140px;
--r26-maxw-wide:1500px; /* wide content pages (kontakt) — matches chrome/portfolio/team: 1500 + clamp(20px,4vw,40px) pad = 1420 content */
--r26-maxw-chrome:1500px; /* header+footer inner — matches the portfolio page .rcf__container--wide (rocc-films.css) so chrome edges align with portfolio content */
--r26-pad-x:32px;
--r26-pad-sec:clamp(64px,8vw,112px);
--r26-radius-btn:8px;
--r26-radius-card:10px;
--r26-radius-band:12px;
}
/* ---- base / reset (scoped) ---- */
.r26,.r26 *,.r26 *::before,.r26 *::after{box-sizing:border-box;}
.r26{
font-family:var(--r26-font-body);
color:var(--r26-body);
line-height:1.65;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.r26 img{max-width:100%;height:auto;display:block;}
.r26 a{color:var(--r26-blue);text-decoration-color:var(--r26-blue-light);text-underline-offset:2px;}
.r26 a:hover{text-decoration-color:var(--r26-blue);}
/* ---- layout primitives ---- */
.r26-section{padding:var(--r26-pad-sec) 0;background:var(--r26-canvas);}
.r26-section--dark{background:var(--r26-blue-deep);}
.r26-container{max-width:var(--r26-maxw);margin-inline:auto;padding-inline:var(--r26-pad-x);}
@media(max-width:640px){.r26-container{padding-inline:20px;}}
/* ---- typography helpers ---- */
.r26-kicker{
font-family:var(--r26-font-body);font-weight:700;font-size:13px;
text-transform:uppercase;letter-spacing:.14em;color:var(--r26-blue);
margin:0 0 12px;
}
.r26-section--dark .r26-kicker{color:var(--r26-blue-light);}
.r26-h2{
font-family:var(--r26-font-head);font-weight:700;
font-size:clamp(28px,3.6vw,38px);line-height:1.14;letter-spacing:-0.018em;
color:var(--r26-blue-deep);margin:0;text-wrap:balance;
}
.r26-section--dark .r26-h2{color:#fff;}
.r26-lead{
font-size:20px;line-height:1.55;color:var(--r26-blue);
max-width:640px;margin:18px 0 0;
}
.r26-section--dark .r26-lead{color:var(--r26-blue-light);}
.r26-p{font-size:17px;line-height:1.65;color:var(--r26-body);max-width:62ch;text-wrap:pretty;}
.r26-head{margin-bottom:40px;}
/* ---- buttons ---- */
.r26-btn{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--r26-font-body);font-weight:600;font-size:15px;line-height:1;
padding:13px 26px;border-radius:var(--r26-radius-btn);
border:1.5px solid transparent;cursor:pointer;text-decoration:none;
transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.r26-btn--primary{background:var(--r26-blue-deep);color:#fff;}
.r26-btn--primary:hover{background:var(--r26-blue);}
.r26-btn--secondary{background:transparent;border-color:var(--r26-blue-deep);color:var(--r26-blue-deep);}
.r26-btn--secondary:hover{background:var(--r26-chip);}
/* on dark band */
.r26-section--dark .r26-btn--primary,.r26-cta .r26-btn--primary{background:#fff;color:var(--r26-blue-deep);}
.r26-section--dark .r26-btn--primary:hover,.r26-cta .r26-btn--primary:hover{background:var(--r26-chip);}
.r26-section--dark .r26-btn--ghost,.r26-cta .r26-btn--ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent;}
.r26-section--dark .r26-btn--ghost:hover,.r26-cta .r26-btn--ghost:hover{background:rgba(255,255,255,.08);}
/* ---- card ---- */
.r26-card{
background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);
border-radius:var(--r26-radius-card);padding:26px;
transition:transform .2s ease,box-shadow .2s ease;
}
.r26-card--hover:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(20,20,18,.08);}
/* ---- closing CTA band ---- */
.r26-cta-wrap{padding:var(--r26-pad-sec) 0;background:var(--r26-canvas);}
.r26-cta{
background:var(--r26-blue-deep);border-radius:var(--r26-radius-band);
padding:clamp(36px,5vw,64px);text-align:center;color:#fff;
}
.r26-cta .r26-h2{color:#fff;}
.r26-cta-lead{color:var(--r26-blue-light);font-size:19px;margin:14px auto 28px;max-width:560px;}
.r26-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
/* ---- logo slider (marquee) ---- */
.r26-logos{padding:clamp(40px,6vw,72px) 0;background:var(--r26-canvas);overflow:hidden;}
.r26-logos-lead{
text-align:center;font-size:13px;font-weight:500;text-transform:uppercase;
letter-spacing:.2em;color:var(--r26-muted-soft);margin:0 0 32px;
}
.r26-logos-mask{
position:relative;width:100%;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.r26-logos-track{display:flex;width:max-content;align-items:center;gap:clamp(40px,6vw,80px);animation:r26-marquee 48s linear infinite;}
.r26-logos:hover .r26-logos-track{animation-play-state:paused;}
.r26-logo-item{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:34px;}
.r26-logo-item img{height:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s;}
.r26-logo-item:hover img{filter:grayscale(0);opacity:1;}
@keyframes r26-marquee{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.r26-logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}}
/* ---- trust badges ---- */
.r26-badges{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
.r26-badge{
display:flex;align-items:center;gap:12px;background:var(--r26-surface);
border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);
padding:16px 22px;text-decoration:none;color:var(--r26-ink);min-width:170px;
transition:transform .2s,box-shadow .2s;
}
.r26-badge:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(20,20,18,.08);}
.r26-badge-name{font-weight:700;font-size:15px;}
.r26-badge-sub{font-size:13px;color:var(--r26-muted);}
/* ---- utility ---- */
.r26-stack-12>*+*{margin-top:12px;}
.r26-stack-16>*+*{margin-top:16px;}
.r26-grid{display:grid;gap:16px;}
@media(min-width:900px){.r26-grid--3{grid-template-columns:repeat(3,1fr);gap:32px;}}
.r26-center{text-align:center;}
.r26-mx-auto{margin-inline:auto;}
/* ============================================================
Theme-bleed guard — host themes (Hello/Elementor) apply global
element typography like `.elementor-kit-XXX h2` (specificity 0,1,1)
and `.elementor-kit-XXX a` that beat our single-class rules (0,1,0).
Re-assert component typography prefixed with the .r26 wrapper
(0,2,x) so it wins WITHOUT !important. Class names unchanged.
============================================================ */
.r26 .r26-h2{font-family:var(--r26-font-head);font-weight:700;color:var(--r26-blue-deep);line-height:1.14;letter-spacing:-0.018em;}
.r26 .r26-section--dark .r26-h2,.r26 .r26-cta .r26-h2{color:#fff;}
.r26 .r26-kicker{font-family:var(--r26-font-body);color:var(--r26-blue);}
.r26 .r26-section--dark .r26-kicker{color:var(--r26-blue-light);}
.r26 .r26-lead{font-family:var(--r26-font-body);color:var(--r26-blue);}
.r26 .r26-section--dark .r26-lead{color:var(--r26-blue-light);}
.r26 .r26-cta-lead{color:var(--r26-blue-light);}
.r26 .r26-p{font-family:var(--r26-font-body);color:var(--r26-body);}
.r26 .r26-logos-lead{font-family:var(--r26-font-body);color:var(--r26-muted-soft);}
.r26 .r26-badge-name{color:var(--r26-ink);}
.r26 .r26-badge-sub{color:var(--r26-muted);}
.r26 a.r26-btn{text-decoration:none;}
.r26 a.r26-btn--primary{color:#fff;}
.r26 a.r26-btn--secondary{color:var(--r26-blue-deep);}
.r26 .r26-section--dark a.r26-btn--primary,.r26 .r26-cta a.r26-btn--primary{color:var(--r26-blue-deep);}
.r26 .r26-section--dark a.r26-btn--ghost,.r26 .r26-cta a.r26-btn--ghost{color:#fff;}
/* ============================================================
HOME / LANDING COMPONENTS — hero · services · portfolio · case · testimonials
Text rules prefixed `.r26 ` (0,2,x) to beat Elementor-kit element typography.
============================================================ */
/* H1 / H3 */
.r26 .r26-h1{font-family:var(--r26-font-head);font-weight:800;font-size:clamp(34px,5.2vw,58px);line-height:1.06;letter-spacing:-0.022em;color:var(--r26-blue-deep);margin:0;text-wrap:balance;}
.r26 .r26-h3{font-family:var(--r26-font-head);font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-0.012em;color:var(--r26-blue-deep);margin:0;}
/* HERO */
.r26-hero{background:var(--r26-canvas);}
.r26-hero-media{position:relative;width:100%;aspect-ratio:2.388/1;background:#0c1020;overflow:hidden;}
.r26-hero-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.r26-hero-body{max-width:880px;text-align:center;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(48px,6vw,80px);}
.r26 .r26-hero-lead{font-family:var(--r26-font-body);font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--r26-blue);max-width:660px;margin:18px auto 0;}
.r26-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
.r26-hero-stats{display:flex;gap:clamp(24px,5vw,56px);justify-content:center;flex-wrap:wrap;margin-top:40px;padding-top:32px;border-top:1px solid var(--r26-hairline);}
.r26-stat{text-align:center;}
.r26 .r26-stat-num{font-family:var(--r26-font-head);font-weight:800;font-size:clamp(26px,3vw,34px);color:var(--r26-blue-deep);line-height:1;}
.r26 .r26-stat-label{display:block;font-family:var(--r26-font-body);font-size:13px;color:var(--r26-muted);margin-top:8px;letter-spacing:.02em;}
/* SERVICES */
.r26-services{display:grid;gap:18px;grid-template-columns:1fr;}
@media(min-width:680px){.r26-services{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.r26-services{grid-template-columns:repeat(3,1fr);}}
.r26-svc{display:flex;flex-direction:column;gap:12px;background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);padding:28px 26px;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;}
.r26-svc:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(20,20,18,.09);border-color:var(--r26-hairline);}
.r26 .r26-svc-copy{font-family:var(--r26-font-body);font-size:15px;line-height:1.6;color:var(--r26-body);flex:1;margin:0;}
/* PORTFOLIO */
.r26-port{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
@media(min-width:900px){.r26-port{grid-template-columns:repeat(3,1fr);}}
.r26-port-item{position:relative;display:block;border-radius:var(--r26-radius-card);overflow:hidden;aspect-ratio:16/10;background:#0c1020;text-decoration:none;}
.r26-port-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.r26-port-item:hover img{transform:scale(1.05);}
.r26-port-cap{position:absolute;inset:auto 0 0 0;padding:16px 18px;background:linear-gradient(transparent,rgba(12,16,32,.85));}
.r26 .r26-port-cat{font-family:var(--r26-font-body);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--r26-blue-light);}
.r26 .r26-port-title{font-family:var(--r26-font-head);font-weight:700;font-size:17px;line-height:1.2;color:#fff;margin-top:4px;}
/* CASE STUDY */
.r26-case{display:grid;gap:clamp(28px,4vw,48px);align-items:center;grid-template-columns:1fr;}
@media(min-width:920px){.r26-case{grid-template-columns:1.02fr .98fr;}}
.r26-case-media{border-radius:var(--r26-radius-card);overflow:hidden;background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);}
.r26-case-media img{width:100%;height:auto;display:block;}
.r26 .r26-case-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;}
.r26 .r26-case-list li{position:relative;padding-left:26px;font-family:var(--r26-font-body);font-size:16px;color:var(--r26-body);margin:0;}
.r26 .r26-case-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--r26-blue);}
.r26-case-quote{margin:24px 0 0;padding:20px 24px;background:var(--r26-chip);border-radius:var(--r26-radius-card);}
.r26 .r26-case-quote p{font-family:var(--r26-font-head);font-weight:700;font-size:19px;line-height:1.35;color:var(--r26-blue-deep);margin:0;}
.r26 .r26-case-quote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--r26-font-body);font-size:14px;color:var(--r26-muted);}
/* TESTIMONIALS */
.r26-rating{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:36px;}
.r26 .r26-rating-score{font-family:var(--r26-font-head);font-weight:800;font-size:40px;color:var(--r26-blue-deep);line-height:1;}
.r26-rating-stars{color:#f5b50a;font-size:20px;letter-spacing:2px;}
.r26 .r26-rating-meta{font-family:var(--r26-font-body);font-size:14px;color:var(--r26-muted);line-height:1.5;}
.r26 .r26-rating-meta a{color:var(--r26-blue);}
.r26-car{position:relative;}
.r26-car-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;}
.r26-car-track::-webkit-scrollbar{display:none;}
.r26-testi{flex:0 0 300px;max-width:82vw;scroll-snap-align:start;background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);overflow:hidden;cursor:pointer;}
.r26-testi-media{position:relative;aspect-ratio:16/10;background:#0c1020;}
.r26-testi-media img{width:100%;height:100%;object-fit:cover;}
.r26-testi-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.r26-testi-play::before{content:"";width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.3);}
.r26-testi-play::after{content:"";position:absolute;border:solid transparent;border-width:10px 0 10px 16px;border-left-color:var(--r26-blue-deep);margin-left:4px;}
.r26 .r26-testi-name{padding:14px 18px;font-family:var(--r26-font-body);font-weight:700;font-size:15px;color:var(--r26-ink);}
.r26-car-navs{display:flex;gap:10px;justify-content:center;margin-top:24px;}
.r26-car-nav{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--r26-hairline);background:var(--r26-surface);cursor:pointer;font-size:18px;color:var(--r26-blue-deep);line-height:1;}
.r26-car-nav:hover{background:var(--r26-chip);}
/* ============================================================
SHARED ROADMAP COMPONENTS — faq · interlink · process · reviews
(landing pages delegate to these; markup is r26-namespaced).
Text rules prefixed `.r26 ` (0,2,x) to beat Elementor-kit element typography.
============================================================ */
/* FAQ ACCORDION — driven by rocc-2026.js (.r26-acc-q click toggles .is-open on .r26-acc-item) */
.r26-faq{max-width:820px;}
.r26-acc{display:grid;gap:12px;}
.r26-acc-item{background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);overflow:hidden;}
.r26-acc-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 24px;}
.r26-acc-q::after{content:"+";font-weight:400;font-size:26px;line-height:1;color:var(--r26-blue);transition:transform .22s ease;flex:0 0 auto;}
.r26-acc-item.is-open .r26-acc-q::after{transform:rotate(45deg);}
.r26-acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;}
.r26-acc-item.is-open .r26-acc-a{grid-template-rows:1fr;}
.r26-acc-a-inner{min-height:0;overflow:hidden;}
@media(prefers-reduced-motion:reduce){.r26-acc-a{transition:none;}}
.r26 .r26-acc-q{font-family:var(--r26-font-head);font-weight:700;font-size:17px;line-height:1.3;color:var(--r26-blue-deep);}
.r26 .r26-acc-a-inner>*{font-family:var(--r26-font-body);font-size:16px;line-height:1.6;color:var(--r26-body);margin:0;padding:0 24px;}
.r26 .r26-acc-a-inner>*:last-child{padding-bottom:22px;}
/* INTERLINK — related-format link cards */
.r26-interlink{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:680px){.r26-interlink{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.r26-interlink{grid-template-columns:repeat(3,1fr);}}
.r26-interlink-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);padding:20px 24px;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;}
.r26-interlink-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(20,20,18,.08);border-color:var(--r26-hairline);}
.r26-interlink-arrow{flex:0 0 auto;transition:transform .2s ease;}
.r26-interlink-card:hover .r26-interlink-arrow{transform:translateX(4px);}
.r26 a.r26-interlink-card{text-decoration:none;}
.r26 .r26-interlink-label{font-family:var(--r26-font-head);font-weight:700;font-size:17px;line-height:1.3;color:var(--r26-blue-deep);}
.r26 .r26-interlink-arrow{font-family:var(--r26-font-body);font-size:20px;color:var(--r26-blue);}
/* PROCESS — numbered steps (mirrors rocc_l_render_process, r26-namespaced) */
.r26-process{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:1fr;}
@media(min-width:780px){.r26-process{grid-template-columns:repeat(3,1fr);gap:32px;}}
.r26-process-step{display:flex;gap:18px;align-items:flex-start;margin:0;}
.r26-process-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--r26-blue-deep);}
.r26-process-body{flex:1;}
.r26 .r26-process-num{font-family:var(--r26-font-head);font-weight:800;font-size:18px;line-height:1;color:#fff;}
.r26 .r26-process-title{font-family:var(--r26-font-head);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-0.012em;color:var(--r26-blue-deep);margin:0 0 8px;}
.r26 .r26-process-desc{font-family:var(--r26-font-body);font-size:15px;line-height:1.6;color:var(--r26-body);margin:0;}
/* GOOGLE WRITTEN REVIEWS — rating header (.r26-rating) + quote-card carousel (.r26-car) */
.r26-reviews{position:relative;}
.r26-review{flex:0 0 340px;max-width:86vw;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);padding:26px;}
.r26-review-stars{color:#f5b50a;font-size:18px;letter-spacing:2px;line-height:1;}
.r26-review-foot{margin-top:auto;}
.r26 .r26-review-quote{font-family:var(--r26-font-body);font-size:16px;line-height:1.6;color:var(--r26-body);margin:0;flex:1;}
.r26 .r26-review-author{display:block;font-family:var(--r26-font-head);font-weight:700;font-size:15px;color:var(--r26-ink);}
.r26 .r26-review-meta{display:block;font-family:var(--r26-font-body);font-size:13px;color:var(--r26-muted);margin-top:2px;}
/* ============================================================
2026 VISUAL-QA PASS — home (draft 12351) audit, applied 2026-06-17.
Overrides layered after the base rules (equal/higher specificity +
source order win, no !important). Every selector is namespaced and
globally safe for the landing / film-hub / catalog consumers.
Rationale per [tag] in tmp/audit_findings.txt.
============================================================ */
/* widow/orphan control on leads & service-card copy ([20][34][38][32][39]) */
.r26-lead{text-wrap:pretty;}
.r26 .r26-svc-copy{text-wrap:pretty;}
/* portfolio caption: category + title were collapsing onto ONE line ([01] BLOCKER) */
.r26 .r26-port-cat{display:block;}
.r26 .r26-port-title{display:block;}
/* case study: top-align media so a short still doesn't float in dead canvas ([02]) */
.r26-case{align-items:flex-start;}
/* closing CTA: restore the missing gap between headline and buttons when no lead ([19]) */
.r26-cta .r26-h2 + .r26-cta-actions{margin-top:28px;}
/* carousel nav: re-assert the 44px circle over the Elementor-kit button bleed ([13][30]) */
.r26 .r26-car-nav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:0;padding:0;border-radius:50%;border:1.5px solid var(--r26-hairline);background:var(--r26-surface);color:var(--r26-blue-deep);font-size:18px;line-height:1;}
/* written-reviews carousel: match testimonials width so the next card peeks on mobile ([27]) */
.r26-review{flex:0 0 300px;max-width:82vw;}
/* video testimonials: posters are 16:9 — match the media box so nothing is side-cropped ([14]) */
.r26-testi-media{aspect-ratio:16/9;}
/* testimonials read as a continuation of the reviews rating header above ([07]) */
.r26-section--cont{padding-top:clamp(16px,2vw,24px);}
/* press wall: uniform 4-up grid (2-up on small screens), replaces the ragged auto-fit hack ([10][11][12]) */
.r26-press{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start;}
.r26 .r26-press img{width:100%;height:auto;display:block;border-radius:var(--r26-radius-card);border:1px solid var(--r26-hairline-soft);}
.r26 .r26-press br{display:none;} /* wpautop injects
between the bare imgs — keep them out of the grid */
@media(max-width:820px){.r26-press{grid-template-columns:repeat(2,1fr);gap:16px;}}
/* intro: narrow + center the body column under the centered hero, via [rocc_section class="r26-narrow"] ([03]) */
.r26-narrow .r26-container{max-width:784px;}
/* ---- contrast / WCAG-AA legibility of visible text ---- */
.r26 .r26-logos-lead{color:#6F6F69;} /* eyebrow 2.56:1 -> ~4.6:1 ([04][33]) */
.r26 .r26-rating-meta{color:#5F5F5C;} /* rating meta 3.9:1 -> ~5.8:1 ([05]) */
.r26 .r26-review-meta{color:#6F6F6F;} /* review-card meta 4.29:1 -> ~5.0:1 ([24]) */
.r26 .r26-stat-label{color:#6A6A66;} /* hero stat caption 3.9:1 -> ~4.9:1 ([22]) */
.r26 .r26-case-quote cite{color:var(--r26-body);} /* case cite 3.7:1 -> 12.5:1 on the chip ([17]) */
/* ---- responsive polish ---- */
@media(max-width:640px){
.r26-hero-actions{flex-direction:column;align-items:center;}
.r26-hero-actions .r26-btn{width:100%;max-width:300px;justify-content:center;} /* equal-width stacked hero CTAs ([21]) */
.r26-car-track{align-items:flex-start;} /* one visible card: natural height, no dead band ([28][37]) */
.r26 .r26-rating-meta{text-align:center;} /* center wrapped meta under the centered score ([41]) */
}
@media(max-width:520px){
.r26-port-cap{padding:12px;}
.r26 .r26-port-title{font-size:15px;line-height:1.18;} /* tighter caption so titles don't swamp small tiles ([29]) */
}
/* ============================================================
ÜBER-UNS + KONTAKT V2 COMPONENTS (2026) — team · stats · contact
Added 2026-06-17 for the /uber-uns/ + /kontakt/ rebuilds.
Namespaced .r26-*, reuse --r26-* tokens, source-order win, no !important.
============================================================ */
/* TEAM — member grid ([rocc_team]) */
.r26-team{display:grid;gap:24px;grid-template-columns:1fr;}
@media(min-width:680px){.r26-team{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.r26-team{grid-template-columns:repeat(3,1fr);}}
.r26-tm{display:flex;flex-direction:column;background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);overflow:hidden;}
.r26-tm-photo{aspect-ratio:4/5;background:#0c1020;}
.r26-tm-photo img{width:100%;height:100%;object-fit:cover;}
.r26-tm-body{display:flex;flex-direction:column;gap:8px;padding:22px 24px;}
.r26 .r26-tm-name{display:flex;align-items:center;gap:8px;font-family:var(--r26-font-head);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-0.01em;color:var(--r26-blue-deep);margin:0;}
.r26 .r26-tm-name a{display:inline-flex;color:var(--r26-blue);transition:color .2s ease,transform .2s ease;}
.r26 .r26-tm-name a:hover{color:var(--r26-blue-deep);transform:translateY(-2px);}
.r26-tm-li{width:18px;height:18px;display:block;}
.r26 .r26-tm-role{font-family:var(--r26-font-body);font-weight:600;font-size:14px;color:var(--r26-blue);margin:0;}
.r26 .r26-tm-bio{font-family:var(--r26-font-body);font-size:14.5px;line-height:1.6;color:var(--r26-body);margin:4px 0 0;text-wrap:pretty;}
/* STATS — KPI band ([rocc_stats]); reuses .r26-stat-* from the hero */
.r26-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,40px);}
@media(max-width:720px){.r26-stats{grid-template-columns:repeat(2,1fr);gap:28px;}}
.r26 .r26-section--dark .r26-stats .r26-stat-num{color:#fff;}
.r26 .r26-section--dark .r26-stats .r26-stat-label{color:var(--r26-blue-light);}
/* closing CTA: optional kicker line (now supported by [rocc_cta]) */
.r26 .r26-cta .r26-kicker{color:var(--r26-blue-light);}
/* CONTACT HERO — split copy + 3-image gallery ([rocc_contact_hero]) */
.r26-chero{max-width:var(--r26-maxw-wide);margin-inline:auto;padding:clamp(24px,3vw,44px) clamp(20px,4vw,40px) clamp(36px,4.5vw,60px);display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,5vw,72px);align-items:center;}
@media(max-width:980px){.r26-chero{grid-template-columns:1fr;gap:40px;}}
@media(max-width:640px){.r26-chero{padding-inline:20px;}}
.r26 .r26-chero .r26-h1{font-size:clamp(30px,4.4vw,48px);} /* a touch smaller than the global h1 */
.r26 .r26-chero-sub{font-family:var(--r26-font-body);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.55;color:var(--r26-body);max-width:36em;margin:18px 0 0;text-wrap:pretty;}
.r26-chero-steps{list-style:none;display:grid;gap:16px;margin:30px 0 0;padding:0;counter-reset:rcstep;}
.r26-chero-steps li{display:flex;gap:14px;align-items:flex-start;counter-increment:rcstep;}
.r26 .r26-chero-steps li>span:last-child{font-family:var(--r26-font-body);font-size:16px;line-height:1.55;color:var(--r26-body);}
.r26-chero-step-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--r26-chip);color:var(--r26-blue);font-family:var(--r26-font-head);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;}
.r26-chero-step-num::before{content:counter(rcstep);}
/* hero actions: [CTA] + mail + phone as three button-columns in one row (auto-stacks on mobile) */
.r26-chero-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:12px;margin-top:34px;align-items:stretch;}
.r26-chero-actions .r26-btn{width:100%;justify-content:center;}
.r26 .r26-chero-cbtn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border:1.5px solid var(--r26-hairline);border-radius:var(--r26-radius-btn);background:var(--r26-surface);color:var(--r26-blue-deep);font-family:var(--r26-font-body);font-weight:600;font-size:15px;line-height:1.1;text-decoration:none;transition:border-color .18s,background .18s,transform .18s;}
.r26 .r26-chero-cbtn:hover{border-color:var(--r26-blue);background:var(--r26-chip);transform:translateY(-1px);}
.r26-chero-cbtn-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--r26-blue);}
.r26-chero-cbtn-ic svg{width:18px;height:18px;display:block;}
.r26-chero-cbtn-val{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.r26-chero-gallery{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:14px;aspect-ratio:1/1;}
.r26-chero-gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--r26-radius-card);}
.r26-cg-main{grid-row:1 / 3;}
@media(max-width:980px){.r26-chero-gallery{grid-template-rows:auto auto;aspect-ratio:auto;}.r26-cg-main{grid-column:1 / 3;aspect-ratio:16/10;}}
/* CONTACT BLOCK — form + map + info ([rocc_contact]) */
.r26-contact-sec{padding-top:clamp(28px,3.2vw,52px);}
.r26-contact-sec .r26-container{max-width:var(--r26-maxw-wide);padding-inline:clamp(20px,4vw,40px);}
.r26-contact-sec .r26-head{margin-bottom:clamp(28px,3.4vw,48px);}
.r26-contact-row{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(26px,2.6vw,40px);align-items:stretch;}
@media(max-width:860px){.r26-contact-row{grid-template-columns:1fr;}}
.r26-contact-form{background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:18px;padding:clamp(28px,3vw,40px);box-shadow:0 28px 64px -38px rgba(16,22,46,.45);}
.r26-contact-form-head{margin-bottom:24px;}
.r26 .r26-contact-form-lead{font-family:var(--r26-font-body);font-size:15px;line-height:1.6;color:var(--r26-body);margin:8px 0 0;}
.r26 .r26-contact-form .wpcf7-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.r26 .r26-contact-form .wpcf7-form>*{grid-column:1 / -1;margin:0;}
.r26 .r26-contact-form .wpcf7-form>.k-field{grid-column:auto;}
.r26 .r26-contact-form .wpcf7-form>.k-field-full{grid-column:1 / -1;}
@media(max-width:520px){.r26 .r26-contact-form .wpcf7-form>.k-field{grid-column:1 / -1;}}
.r26 .r26-contact-form .k-field label{display:block;font-family:var(--r26-font-body);font-weight:600;font-size:.9rem;color:var(--r26-ink);margin-bottom:8px;}
.r26 .r26-contact-form input,.r26 .r26-contact-form textarea{font:inherit;width:100%;color:var(--r26-body);background:var(--r26-canvas);border:1.5px solid var(--r26-hairline-soft);border-radius:12px;padding:14px 16px;transition:border-color .18s,box-shadow .18s,background .18s;}
.r26 .r26-contact-form input::placeholder,.r26 .r26-contact-form textarea::placeholder{color:var(--r26-muted-soft);}
.r26 .r26-contact-form input:focus,.r26 .r26-contact-form textarea:focus{outline:none;border-color:var(--r26-blue);background:var(--r26-surface);box-shadow:0 0 0 3px rgba(47,78,158,.14);}
.r26 .r26-contact-form textarea{min-height:172px;resize:vertical;}
.r26 .r26-contact-form .wpcf7-submit{appearance:none;cursor:pointer;width:100%;background:var(--r26-blue-deep);color:#fff;border:0;border-radius:12px;padding:16px 28px;margin-top:4px;font-family:var(--r26-font-body);font-weight:600;font-size:15.5px;box-shadow:0 16px 30px -16px rgba(26,42,92,.55);transition:background .18s,transform .18s,box-shadow .18s;}
.r26 .r26-contact-form .wpcf7-submit:hover{background:var(--r26-blue);transform:translateY(-1px);box-shadow:0 20px 34px -16px rgba(26,42,92,.5);}
.r26-contact-free{display:flex;align-items:center;gap:8px;margin:18px 0 0;}
.r26 .r26-contact-free{font-family:var(--r26-font-body);font-size:14px;color:var(--r26-muted);}
.r26-contact-free-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--r26-chip);color:var(--r26-blue);font-size:12px;flex:0 0 auto;}
/* aside: map (top, framed in a white box) + info card (bottom) */
.r26-contact-aside{display:flex;flex-direction:column;gap:clamp(18px,1.6vw,24px);}
.r26-contact-map{flex:1 1 auto;display:flex;flex-direction:column;background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:18px;padding:clamp(12px,1.2vw,16px);box-shadow:0 28px 64px -42px rgba(16,22,46,.42);}
.r26-contact-map-inner{position:relative;flex:1 1 auto;width:100%;min-height:clamp(280px,26vw,400px);border-radius:11px;overflow:hidden;background:var(--r26-chip);}
.r26-contact-map-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.r26-contact-info{background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:18px;padding:6px clamp(20px,2.2vw,30px);box-shadow:0 28px 64px -44px rgba(16,22,46,.4);}
.r26-contact-info ul{list-style:none;margin:0;padding:0;}
.r26-cinfo-item{display:flex;align-items:center;gap:16px;padding:18px 2px;border-bottom:1px solid var(--r26-hairline-soft);}
.r26-cinfo-item:last-child{border-bottom:0;}
.r26-cinfo-ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:var(--r26-chip);color:var(--r26-blue);display:flex;align-items:center;justify-content:center;}
.r26-cinfo-ic svg{width:21px;height:21px;display:block;}
.r26-cinfo-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.r26 .r26-clbl{font-family:var(--r26-font-body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--r26-muted);}
.r26 .r26-cval,.r26 .r26-cval a{font-family:var(--r26-font-body);font-size:15.5px;font-weight:500;color:var(--r26-ink);line-height:1.45;}
.r26 .r26-cval a{color:var(--r26-blue);text-decoration:none;}
.r26 .r26-cval a:hover{color:var(--r26-blue-deep);text-decoration:underline;}
/* ===== LOGO-WALL POLISH (2026-06-17, Robin: slower marquee + bigger heading + larger logos) ===== */
.r26 .r26-logos{padding:clamp(60px,7.5vw,104px) 0;}
/* heading: tiny uppercase eyebrow -> clean centered Montserrat title in blue-deep */
.r26 .r26-logos-lead{
font-family:var(--r26-font-head);font-weight:700;
font-size:clamp(22px,2.6vw,32px);line-height:1.2;letter-spacing:-0.01em;
text-transform:none;color:var(--r26-blue-deep);
max-width:38ch;margin:0 auto clamp(36px,4.6vw,56px);text-wrap:balance;
}
/* marquee speed (tuned by feel, Robin) — one full set ≈ 136s (was 156s; +15% speed) */
.r26 .r26-logos-track{animation-duration:136s;gap:clamp(52px,6vw,96px);}
/* larger, slightly more present logos */
.r26 .r26-logo-item{height:clamp(42px,4.6vw,58px);}
/* cap width so ultra-wide wordmarks (e.g. Automattic 500x39) can't dominate the row */
.r26 .r26-logo-item img{opacity:.72;max-width:240px;}
/* per-brand size tweaks (Robin): rein in the widest wordmarks */
.r26 .r26-logo--automattic img{max-width:160px;}
.r26 .r26-logo--porsche img{max-width:150px;}
/* on hover: keep running (don't pause). The ~50% speed-up is done SMOOTHLY in JS via
playbackRate — setting animation-duration here re-maps position and glitches, so it's NOT set. */
.r26 .r26-logos:hover .r26-logos-track{animation-play-state:running;}
.r26 .r26-logo-item:hover img{opacity:1;}
/* softer, wider edge fade so the larger logos don't clip hard at the mask edges */
.r26 .r26-logos-mask{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
/* ==================================================================
GLOBAL SITE CHROME (2026) — shared header + footer.
Rendered by rocc_render_site_header()/_footer() in rocc-components.php
(replaces the Header-Footer-Elementor chrome). Tokens + .r26 wrapper
like the rest of the lib; link/typography rules carry a .r26 ancestor
so they beat the Elementor kit (theme-bleed safe). The header forces
overflow:visible so the dropdown panels are never clipped.
================================================================== */
/* ---------- sticky header — ALIVE: blue-deep at top -> white on scroll; hide down / reveal up ---------- */
.r26-site-head{position:-webkit-sticky;position:sticky;top:0;z-index:1000;overflow:visible;background:var(--r26-blue-deep);border-bottom:1px solid transparent;font-family:var(--r26-font-body);transition:transform .4s cubic-bezier(.22,.61,.36,1),background-color .35s ease,box-shadow .35s ease,border-color .35s ease;}
.r26-site-head *{box-sizing:border-box;}
.r26-site-head.is-scrolled{background:var(--r26-surface);border-bottom-color:var(--r26-hairline);box-shadow:0 8px 28px -16px rgba(20,20,18,.22);}
.r26-site-head.nav-hidden{transform:translateY(-100%);}
.admin-bar .r26-site-head{top:32px;}
.r26-head-inner{max-width:var(--r26-maxw-chrome);margin:0 auto;padding:0 clamp(20px,4vw,40px);height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px;}
.r26-brand{display:inline-flex;align-items:center;flex:0 0 auto;}
.r26-brand img{width:auto;display:block;height:40px;transition:height .35s ease;}
.r26-site-head.is-scrolled .r26-brand img{height:30px;}
.r26-brand .r26-logo-dark{display:none;}
.r26-site-head.is-scrolled .r26-brand .r26-logo-light{display:none;}
.r26-site-head.is-scrolled .r26-brand .r26-logo-dark{display:block;}
.r26-nav{display:flex;align-items:center;gap:32px;}
.r26-site-head .r26-nav a{font-family:var(--r26-font-body);text-decoration:none;}
.r26-site-head .r26-nav>a,.r26-site-head .r26-nav .r26-has-sub>a{font-size:16.5px;font-weight:500;color:#fff;position:relative;display:inline-flex;align-items:center;gap:.42em;padding:27px 0;transition:color .25s;}
.r26-site-head.is-scrolled .r26-nav>a,.r26-site-head.is-scrolled .r26-nav .r26-has-sub>a{color:var(--r26-body);}
.r26-site-head .r26-nav>a::after,.r26-site-head .r26-nav .r26-has-sub>a::after{content:"";position:absolute;left:0;bottom:22px;width:0;height:2px;background:var(--r26-blue-light);transition:width .25s,background-color .35s;}
.r26-site-head.is-scrolled .r26-nav>a::after,.r26-site-head.is-scrolled .r26-nav .r26-has-sub>a::after{background:var(--r26-blue);}
.r26-site-head .r26-nav>a:hover{color:#fff;}
.r26-site-head.is-scrolled .r26-nav>a:hover,.r26-site-head.is-scrolled .r26-nav .r26-has-sub:hover>a,.r26-site-head.is-scrolled .r26-nav .r26-has-sub:focus-within>a{color:var(--r26-blue);}
.r26-site-head .r26-nav>a:hover::after,.r26-site-head .r26-nav .r26-has-sub:hover>a::after{width:100%;}
.r26-caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s;display:inline-block;}
.r26-site-head .r26-nav .r26-has-sub:hover>a .r26-caret,.r26-site-head .r26-nav .r26-has-sub:focus-within>a .r26-caret{transform:rotate(-135deg) translateY(-1px);}
.r26-nav .r26-has-sub{position:relative;}
.r26-nav .r26-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:250px;background:var(--r26-surface);border:1px solid var(--r26-hairline);border-radius:var(--r26-radius-card);box-shadow:0 22px 48px -20px rgba(20,20,18,.28);padding:10px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:1001;}
.r26-nav .r26-has-sub:hover .r26-sub,.r26-nav .r26-has-sub:focus-within .r26-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.r26-site-head .r26-nav .r26-sub a{display:block;padding:10px 14px;border-radius:7px;font-size:14.5px;font-weight:500;color:var(--r26-body);white-space:nowrap;}
.r26-site-head .r26-nav .r26-sub a::after{display:none;}
.r26-site-head .r26-nav .r26-sub a:hover{background:var(--r26-chip);color:var(--r26-blue);}
.r26-head-cta{display:flex;align-items:center;gap:18px;}
.r26-site-head .r26-lang{font-size:14px;font-weight:600;letter-spacing:.06em;color:#fff;text-decoration:none;padding:6px 4px;transition:color .25s;}
.r26-site-head.is-scrolled .r26-lang{color:var(--r26-body);}
.r26-site-head .r26-lang:hover{color:var(--r26-blue-light);}
.r26-site-head.is-scrolled .r26-lang:hover{color:var(--r26-blue);}
.r26-site-head .r26-btn{padding:12px 24px;font-size:15px;}
.r26-site-head:not(.is-scrolled) .r26-btn--primary{background:#fff;color:var(--r26-blue-deep);}
.r26-site-head:not(.is-scrolled) .r26-btn--primary:hover{background:var(--r26-blue-light);color:var(--r26-blue-deep);}
.r26-nav>a.r26-nav-cta{display:none;}
.r26-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.r26-site-head .r26-burger{border:0;background:none;box-shadow:none;border-radius:0;-webkit-appearance:none;appearance:none;}
.r26-site-head .r26-burger:focus,.r26-site-head .r26-burger:active{border:0;box-shadow:none;background:none;outline:none;}
.r26-site-head .r26-burger:focus-visible{outline:2px solid var(--r26-blue-light);outline-offset:3px;}
.r26-burger span{display:block;width:24px;height:2px;background:#fff;transition:transform .3s,opacity .3s,background-color .35s;}
.r26-site-head.is-scrolled .r26-burger span{background:var(--r26-blue-deep);}
.r26-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.r26-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.r26-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* ---------- footer (blue-deep dark band) ---------- */
.r26-foot{background:var(--r26-blue-deep);color:rgba(255,255,255,.74);font-family:var(--r26-font-body);}
.r26-foot *{box-sizing:border-box;}
.r26-foot.r26 a{color:rgba(255,255,255,.74);text-decoration:none;transition:color .2s;}
.r26-foot.r26 a:hover{color:#fff;}
.r26-foot .r26-container{max-width:var(--r26-maxw-chrome);margin-inline:auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px);}
/* closing CTA band */
.r26-foot-cta{padding:clamp(54px,7vw,84px) 0;background:var(--r26-canvas);border-top:1px solid var(--r26-hairline);}
.r26-foot-cta-inner{display:grid;grid-template-columns:1.5fr auto;gap:48px;align-items:start;}
.r26-foot-aside{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,2.6vw,32px);}
/* kicker + founder-role colours use the .r26-foot.r26 compound (0,3-4,x) so they BEAT the QA-block soft-white overrides near EOF even if those revert (landing session keeps re-adding them) */
.r26-foot.r26 .r26-foot-cta .r26-kicker{color:var(--r26-blue);}
.r26-foot.r26 .r26-h2{color:var(--r26-blue-deep);}
.r26 .r26-foot-cta .r26-h2{margin-top:10px;max-width:18ch;font-size:clamp(28px,3.4vw,40px);}
.r26 .r26-foot-cta p{margin-top:15px;font-size:18px;line-height:1.65;color:var(--r26-body);max-width:46ch;}
.r26-foot-cta-actions{display:flex;align-items:center;gap:32px;margin-top:28px;flex-wrap:wrap;}
.r26-foot.r26 .r26-foot-cta .r26-btn--primary{background:var(--r26-blue-deep);color:#fff;}
.r26-foot.r26 .r26-foot-cta .r26-btn--primary:hover{background:var(--r26-blue);color:#fff;}
.r26-foot-contact{display:flex;flex-direction:column;gap:12px;}
.r26 .r26-foot-contact a{display:inline-flex;align-items:center;gap:13px;color:var(--r26-blue-deep);font-weight:700;font-size:clamp(18px,1.4vw,21px);letter-spacing:-.01em;line-height:1.1;text-decoration:none;transition:color .2s,transform .2s;}
.r26 .r26-foot-contact a:hover{color:var(--r26-blue);transform:translateX(2px);}
.r26-foot-contact-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--r26-chip);border:1px solid var(--r26-hairline-soft);display:flex;align-items:center;justify-content:center;color:var(--r26-blue);transition:background .2s,border-color .2s,color .2s;}
.r26-foot-contact-ic svg{width:20px;height:20px;display:block;}
.r26 .r26-foot-contact a:hover .r26-foot-contact-ic{background:var(--r26-blue);border-color:var(--r26-blue);color:#fff;}
.r26-foot-person{display:flex;align-items:center;gap:18px;}
.r26-foot-person img{width:124px;height:124px;border-radius:50%;object-fit:cover;border:2px solid var(--r26-hairline);}
.r26-foot-person b{display:block;color:var(--r26-blue-deep);font-weight:700;font-size:16px;}
.r26-foot.r26 .r26-foot-person span{display:block;color:var(--r26-blue);font-size:13.5px;margin-top:3px;font-weight:500;}
/* main columns */
.r26-foot-main{padding:clamp(48px,6vw,68px) 0 0;}
.r26-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.12);}
.r26-foot-logo{display:inline-flex;align-items:center;}
.r26-foot-logo img{height:34px;width:auto;display:block;}
.r26-foot-brand p{font-size:14.5px;color:rgba(255,255,255,.6);max-width:32ch;line-height:1.7;margin:16px 0 0;}
.r26-foot-addr{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.6;}
.r26-foot-social{display:flex;gap:10px;margin-top:20px;}
.r26 .r26-foot-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);transition:background .2s,border-color .2s,color .2s,transform .2s;}
.r26 .r26-foot-social a:hover{background:var(--r26-blue);border-color:var(--r26-blue);color:#fff;transform:translateY(-2px);}
.r26-foot-social svg{width:19px;height:19px;display:block;}
.r26-foot.r26 .r26-foot-col h5{font-family:var(--r26-font-body);color:#fff;font-size:12.5px;text-transform:uppercase;letter-spacing:.16em;margin:0 0 16px;font-weight:700;}
.r26-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.r26 .r26-foot-col a{font-size:14.5px;}
/* trust / awards strip — on small white chips so brand marks keep their colour */
.r26-foot-awards{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.r26-foot-awards .r26-award{background:#fff;border-radius:8px;padding:9px 14px;height:58px;display:flex;align-items:center;}
.r26-foot-awards .r26-award img{height:38px;width:auto;object-fit:contain;display:block;}
/* bottom bar */
.r26-foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:24px 0 38px;font-size:13.5px;color:rgba(255,255,255,.5);}
.r26-foot-legal{display:flex;gap:22px;flex-wrap:wrap;}
/* ---------- chrome responsive ---------- */
@media(max-width:980px){
.r26-foot-cta-inner{grid-template-columns:1fr;gap:30px;}
.r26-foot-top{grid-template-columns:1fr 1fr;gap:34px;}
.r26-foot-brand{grid-column:1/-1;}
}
@media screen and (max-width:782px){
.admin-bar .r26-site-head{top:46px;}
.r26-nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--r26-surface);border-bottom:1px solid var(--r26-hairline);box-shadow:0 24px 40px -24px rgba(20,20,18,.25);padding:10px var(--r26-pad-x) 22px;max-height:calc(100vh - 76px);overflow:auto;display:none;}
.admin-bar .r26-nav{top:122px;}
.r26-nav.is-open{display:flex;}
.r26-site-head .r26-nav>a,.r26-site-head .r26-nav .r26-has-sub>a{padding:13px 2px;color:var(--r26-body);}
.r26-nav>a,.r26-nav .r26-has-sub{border-bottom:1px solid var(--r26-hairline-soft);}
.r26-nav>a::after,.r26-nav .r26-has-sub>a::after{display:none;}
.r26-nav .r26-has-sub{position:static;}
.r26-nav .r26-sub{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:none;border:0;box-shadow:none;padding:2px 0 8px 14px;}
.r26-site-head .r26-nav .r26-sub a{padding:9px 2px;color:var(--r26-muted);}
.r26-caret{display:none;}
.r26-head-cta .r26-lang{display:none;}
.r26-head-cta .r26-btn{display:none;}
.r26-site-head .r26-nav>a.r26-nav-cta{display:inline-flex!important;align-self:stretch;justify-content:center;margin-top:14px;background:var(--r26-blue-deep);color:#fff;border-color:transparent;}
.r26-burger{display:flex;}
.r26-foot-top{grid-template-columns:1fr 1fr;gap:26px;}
}
@media screen and (max-width:600px){ .admin-bar .r26-site-head{top:0;} .admin-bar .r26-nav{top:76px;} }
@media(max-width:460px){
.r26-foot-top{grid-template-columns:1fr;}
.r26-foot-bottom{justify-content:flex-start;}
}
@media(prefers-reduced-motion:reduce){ .r26-site-head *,.r26-foot *{transition:none!important;} }
/* ===== HOME 2026 REBUILD v2 — components (2026-06-18 session 2) ===== */
/* film overlay-tile CSS (shared by the carousel + the new grid) */
/* ==================================================================
[rocc_film_carousel] — home Highlights carousel (overlay film tiles)
Appended to the end of assets/rocc-2026.css.
Reuses the SHARED carousel shell (.r26-car / .r26-car-track /
.r26-car-navs / .r26-car-nav[data-dir]) already styled above + driven
by rocc-2026.js. This block only adds: the film TILE (overlay design
ported from rocc-films.css .rcf-tile-* into r26 classes), tile sizing
inside the flex track, and an inline-SVG restyle of the nav chevrons.
Theme-bleed safety: every rule is scoped .r26 .r26-xxx (>=0,2,0). No
!important. Specificity notes inline where a global rule is beaten.
================================================================== */
/* --- the carousel track on home: a little more breathing room than the
default .r26-car-track; tiles snap-align so the 85% scroll lands clean --- */
.r26 .r26-film-car .r26-car-track{gap:clamp(16px,2vw,24px);padding-bottom:6px;scroll-padding-left:2px;}
/* --- film tile: fixed-width card, the whole thing is the link --- */
.r26 .r26-film-tile{
flex:0 0 clamp(280px,78vw,360px);
scroll-snap-align:start;
display:block;
background:var(--r26-surface);
border:1px solid var(--r26-hairline-soft);
border-radius:var(--r26-radius-card);
overflow:hidden;
text-decoration:none;
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.r26 .r26-film-tile:hover{
transform:translateY(-3px);
border-color:var(--r26-blue);
box-shadow:0 14px 34px rgba(47,78,158,.16);
}
/* --- 16:9 media box: overflow hidden, navy fallback bg --- */
.r26 .r26-ft-media{
position:relative;
display:block;
aspect-ratio:16/9;
overflow:hidden;
background:var(--r26-blue-deep);
}
/* the still — cover-fills the box, subtle hover zoom.
.r26 .r26-ft-shot = (0,2,0) → beats the global `.r26 img{height:auto}` (0,1,1). */
.r26 .r26-ft-media .r26-ft-shot{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.r26 .r26-film-tile:hover .r26-ft-shot{transform:scale(1.06);}
/* light bottom-up navy scrim so the white tagline stays legible */
.r26 .r26-ft-scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,
rgba(13,18,42,.68) 0%,
rgba(13,18,42,.30) 28%,
rgba(13,18,42,.04) 56%,
transparent 80%);
}
/* overlay layer holds the tagline (bottom-left) + the pinned chip */
.r26 .r26-ft-ov{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
gap:12px;
padding:clamp(14px,1.6vw,22px);
pointer-events:none;
}
/* white client-logo chip pinned bottom-right (matches .rcf-tile-logo).
.r26 .r26-ft-ov .r26-ft-logo = (0,3,0) → beats `.r26 img` (0,1,1) with NO !important,
so the fixed height + chip styling win cleanly. */
.r26 .r26-ft-ov .r26-ft-logo{
position:absolute;right:14px;bottom:14px;z-index:2;
height:38px;width:auto;max-width:50%;
object-fit:contain;
background:#fff;
padding:5px 9px;
border-radius:7px;
box-shadow:0 2px 12px rgba(8,12,32,.30);
}
/* text fallback chip when a brand has no logo image */
.r26 .r26-ft-ov .r26-ft-client{
position:absolute;right:14px;bottom:14px;z-index:2;
font-family:var(--r26-font-body);font-weight:700;font-size:11px;
letter-spacing:.04em;text-transform:uppercase;color:var(--r26-blue-deep);
background:#fff;padding:5px 9px;border-radius:7px;
box-shadow:0 2px 12px rgba(8,12,32,.30);
}
/* tagline: Montserrat, white, 2-line clamp, bottom-left, text-shadow.
leaves room for the chip via max-width. */
.r26 .r26-ft-tag{
font-family:var(--r26-font-head);font-weight:700;color:#fff;
font-size:clamp(.9rem,1.05vw,1.05rem);line-height:1.24;letter-spacing:-.01em;
margin:0;max-width:62%;
text-shadow:0 1px 14px rgba(8,12,32,.65);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* hover play glyph, centered (matches the hub .ply) */
.r26 .r26-ft-play{
position:absolute;top:50%;left:50%;z-index:3;
transform:translate(-50%,-50%) scale(.8);
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.32);color:#fff;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;pointer-events:none;
transition:opacity .25s ease,transform .25s ease,background .25s ease;
}
.r26 .r26-film-tile:hover .r26-ft-play{
opacity:1;transform:translate(-50%,-50%) scale(1);background:var(--r26-blue);
}
/* --- nav chevrons: the shared .r26-car-nav is already a 44px circular
surface button (border:1.5px hairline; color:blue-deep). It was sized
for a TEXT glyph (font-size:18px); here we drop in an inline SVG, so
just center it and let the SVG inherit currentColor (blue-deep). --- */
.r26 .r26-film-car .r26-car-nav{
display:inline-flex;align-items:center;justify-content:center;
padding:0;
}
.r26 .r26-film-car .r26-car-nav svg{display:block;width:20px;height:20px;}
.r26 .r26-film-car .r26-car-nav:hover{border-color:var(--r26-blue);color:var(--r26-blue);}
/* --- mobile: keep the swipe carousel comfortable at 390px — one card
~85vw with a peek of the next, no vertical overflow. --- */
@media(max-width:600px){
.r26 .r26-film-tile{flex-basis:85vw;}
.r26 .r26-ft-tag{max-width:68%;}
}
/* respect reduced-motion: no hover zoom / glyph slide (the shared JS already
uses behavior:auto under reduced-motion for the scroll). */
@media (prefers-reduced-motion: reduce){
.r26 .r26-film-tile,
.r26 .r26-ft-shot,
.r26 .r26-ft-play{transition:none;}
.r26 .r26-film-tile:hover{transform:none;}
.r26 .r26-film-tile:hover .r26-ft-shot{transform:none;}
.r26 .r26-film-tile:hover .r26-ft-play{transform:translate(-50%,-50%);}
}
/* reset old zig-zag media framing — the card owns border/shadow/radius now */
.r26 .r26-feat-media{border:0;box-shadow:none;border-radius:0;}
/* ==================================================================
FEATURES — 3-COLUMN intro card row ([rocc_features])
REPLACEMENT for the old ".r26-feat*" zig-zag block (rocc-2026.css,
the rows added 2026-06-18). The client asked for the 3 intro blocks
"in one row and columns" — 3 cards side by side, image on TOP — not
the alternating image/text rows.
Append at the END of assets/rocc-2026.css. Because it is source-order
last it WINS over the old rules with no !important — but the old block
should be REMOVED (it is fully superseded). Selectors superseded /
replaced (see NOTES.md for the full list): .r26-feat, .r26-feat-intro,
.r26-feat-row (+ :nth-child even/odd order swaps), .r26-feat-media(/img),
.r26-feat-body, .r26-feat-title, .r26-feat-copy and their @media(820)/(480)
blocks. The .r26-feat-row class no longer exists in the new markup.
Theme-bleed: structural ".r26-foo" stays single-class; anything that
restyles a typography element the Elementor kit also targets (h3/p) is
scoped ".r26 .r26-feat-*" (0,2,0) for a source-order win, no !important.
================================================================== */
/* wrapper: owns the vertical rhythm between the intro lead and the grid.
Tighter than the section pad so lead + cards read as one connected unit. */
.r26-feat{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,44px);}
/* centered lead — body colour (NEVER blue), comfortable reading measure */
.r26 .r26-feat-intro{
font-family:var(--r26-font-body);
font-size:clamp(18px,2vw,20px);line-height:1.6;
color:var(--r26-body);
max-width:760px;margin:0 auto;text-align:center;text-wrap:pretty;
}
/* a touch more breathing room below the lead before the cards */
.r26-feat-intro{margin-bottom:clamp(4px,1vw,12px);}
/* the 3-up grid: equal columns, equal-height cards (stretch is the grid
default), generous-but-intentional gutter. */
.r26-feat-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(20px,2.4vw,32px);align-items:stretch;
}
/* one CARD: surface panel, hairline border, rounded, image-top + body.
Column flex so the media sits on top and the body fills the rest, giving
equal-height cards a clean baseline. Mirrors the .r26-svc card idiom. */
.r26-feat-card{
display:flex;flex-direction:column;height:100%;
background:var(--r26-surface);
border:1px solid var(--r26-hairline-soft);
border-radius:var(--r26-radius-card);
overflow:hidden;
box-shadow:0 18px 44px -30px rgba(16,22,46,.40);
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
/* subtle, inviting hover lift (calm, not flashy) */
.r26-feat-card:hover{
transform:translateY(-3px);
box-shadow:0 22px 52px -28px rgba(16,22,46,.48);
border-color:var(--r26-hairline);
}
/* media frame: image on TOP, ~16:11 landscape, cover-cropped, flush to the
card top (radius inherited from the card's overflow:hidden). */
.r26-feat-media{
position:relative;
aspect-ratio:16/11;
background:#0c1020;
overflow:hidden;
}
.r26-feat-media img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* slow, friendly image zoom on card hover */
.r26-feat-card:hover .r26-feat-media img{transform:scale(1.045);}
/* body: comfortable padding, grows to equalise card heights */
.r26-feat-body{
display:flex;flex-direction:column;
flex:1 1 auto;
padding:clamp(20px,1.8vw,26px) clamp(20px,1.8vw,26px) clamp(22px,2vw,28px);
}
/* card title (real