/* Wiemer-inspired editorial system: restrained navigation, immersive cover, image-led story. */
:root {
  --paper: #f6f5f2;
  --ink: #201f22;
  --muted: #777478;
  --line: #e3e1dd;
  --accent: #d63e4a;
  --site-gutter: clamp(22px, 5.4vw, 84px);
}
html { scroll-padding-top: 84px; }
body { color: var(--ink); background: #fff; font-family: 'Roboto', sans-serif; }
main > section { scroll-margin-top: 84px; }

/* Minimal white masthead with only the most-used destinations. */
.site-masthead {
  position: fixed; inset: 0 0 auto; z-index: 1100;
  display: flex; align-items: center; justify-content: space-between;
  height: 78px; padding: 0 var(--site-gutter);
  border: 0; border-bottom: 1px solid rgba(32,31,34,.08);
  background: rgba(255,255,255,.98); box-shadow: none; backdrop-filter: blur(14px);
}
.site-masthead-brand { gap: 10px; color: var(--ink); }
.site-masthead-brand .brand-symbol { width: 40px; height: 46px; }
.site-masthead-brand .brand-wordmark { gap: 3px; }
.site-masthead-brand .brand-wordmark strong { font-size: 16px; letter-spacing: -.04em; }
.site-masthead-brand .brand-wordmark small { color: #555159; font-size: 7px; letter-spacing: .2em; }
.site-masthead .hollus-top-nav-bar { display: flex; align-items: center; gap: clamp(16px,2.4vw,36px); margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.site-masthead .hollus-top-nav { display: flex; gap: clamp(16px,2.1vw,30px); }
.site-masthead .hollus-nav-item { color: #4f4c51; font-size: 12px; font-weight: 500; }
.site-masthead .hollus-nav-item:hover { color: var(--accent); }
.site-masthead .hollus-nav-item::after { display: none; }
.site-masthead .weglot-switcher { gap: 5px; }
.site-masthead .weglot-flag-btn { border: 0; box-shadow: none; background: transparent; filter: none; }
.site-masthead .weglot-flag-btn.active { transform: none; }
.site-header-cta {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.site-header-cta:hover { background: transparent; color: var(--accent); transform: none; }
.site-header-arrow { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #aaa7aa; border-radius: 50%; font-size: 15px; line-height: 1; transition: transform .2s ease,border-color .2s ease; }
.site-header-cta:hover .site-header-arrow { transform: translateX(2px); border-color: currentColor; }

/* Full-frame photography, restrained copy and a quiet overlay like the reference. */
#hero { position: relative; z-index: auto; isolation: isolate; display: block; height: 100svh; min-height: 600px; overflow: hidden; background: #28252a; }
#hero .hero-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#hero .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--image-position,center); opacity: 0; transition: opacity 2s ease-in-out; }
#hero .hero-slide.is-active { opacity: 1; }
#hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg,rgba(19,18,20,.08) 15%,rgba(19,18,20,.04) 43%,rgba(19,18,20,.58) 100%); }
#hero .hero-right-content { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 112px var(--site-gutter) clamp(58px,11vh,126px); background: transparent; box-shadow: none; backdrop-filter: none; }
#hero .hero-text-block { width: min(100%,1000px); max-width: 1000px; margin: 0 auto; text-align: center; }
#hero .hero-eyebrow { margin-bottom: 12px; color: rgba(255,255,255,.91); font-size: 10px; font-weight: 600; letter-spacing: .2em; }
#hero .hollus-hero-heading { max-width: none; margin: 0 0 14px; color: #fff; font-family: 'Montserrat',sans-serif; font-size: clamp(58px,12.5vw,150px); font-weight: 600; line-height: .96; letter-spacing: -.075em; text-shadow: 0 2px 25px rgba(0,0,0,.18); }
#hero .cozy-accent { color: #fff; }
#hero .cozy-underline { display: none; }
#hero .hollus-hero-lead { max-width: 54ch; margin: 0 auto 23px; color: rgba(255,255,255,.95); font-size: clamp(14px,1.25vw,17px); line-height: 1.65; text-shadow: 0 1px 12px rgba(0,0,0,.24); }
#hero .hollus-hero-bullets { display: none; }
#hero .hollus-hero-buttons { justify-content: center; gap: 10px; }
#hero .hollus-hero-buttons .btn-dark-hollus,
#hero .hollus-hero-buttons .btn-hollow-hollus { min-height: 44px; padding: 0 19px; border-radius: 2px; font-size: 11px; }
#hero .btn-dark-hollus { background: var(--accent); color: #fff; }
#hero .btn-dark-hollus:hover { background: #b62f3a; }
#hero .btn-hollow-hollus { border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.06); color: #fff; }
#hero .btn-hollow-hollus:hover { background: #fff; color: var(--ink); }
#hero .hero-light-sweep { z-index: 1; pointer-events: none; animation-play-state: paused; }
#hero.hero-motion-ready .hero-light-sweep { animation-play-state: running; }
#hero.hero-motion-ready .hero-wave-word { animation: hero-word-wave 3s ease-in-out var(--wave-phase,0ms) infinite; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { #hero .hero-slider { transform: perspective(1000px) scale(1.08); } }

/* Story sections use a calm paper/white rhythm and let original project photos lead. */
.about-section-hollus,.services-section-hollus,.repairs-process-hollus,.calculator-hollus-section,
.portfolio-hollus-section,.styles-hollus-section,.testimonials-hollus-section,.contact-hollus-section {
  padding-block: clamp(72px,9vw,126px);
}
.about-section-hollus,.repairs-process-hollus,.styles-hollus-section { background: var(--paper); }
.about-section-hollus .diamond-pattern-bg,.repairs-process-hollus .diamond-pattern-bg,.styles-hollus-section .diamond-pattern-bg { display: none; }
.about-hollus-container { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(34px,7vw,104px); align-items: center; }
.about-card-left { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.about-hollus-title,.services-main-heading,.repairs-process-title,.calc-hollus-heading,.portfolio-hollus-title,
.styles-hollus-title,.testimonials-hollus-title,.contact-hollus-title {
  max-width: 16ch; color: var(--ink); font-family: 'Montserrat',sans-serif;
  font-size: clamp(34px,4.2vw,56px); font-weight: 600; line-height: 1.05; letter-spacing: -.06em; text-wrap: balance;
}
.about-text-lead { max-width: 52ch; margin-block: 20px 14px; font-size: clamp(16px,1.55vw,20px); line-height: 1.65; }
.about-text-sub { max-width: 54ch; color: var(--muted); font-size: 14px; line-height: 1.8; }
.about-stats-grid { gap: 12px; margin-top: 29px; padding-block: 20px; border-block: 1px solid var(--line); }
.about-stats-grid .stat-num-row { color: var(--ink); }
.about-stats-grid .stat-label { color: var(--muted); font-size: 10px; line-height: 1.45; }
.about-call-box { margin-top: 22px; padding: 14px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.about-call-box .call-box-tag { color: var(--muted); }
.about-call-box .call-box-num { color: var(--ink); font-size: 20px; }
.photo-right-frame { height: min(65vw,650px); min-height: 420px; border-radius: 0; box-shadow: none; }
.photo-right-frame img { object-fit: cover; }

.services-section-hollus { background: #fff; }
.services-section-hollus .container > .text-center { max-width: 760px; margin: 0 auto 44px; text-align: left; }
.services-main-heading { max-width: 14ch; margin: 0; }
.services-cube-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.service-cube { min-height: clamp(300px,31vw,430px); border: 0; border-radius: 0; background: var(--paper); box-shadow: none; }
.cube-front,.cube-back { border-radius: 0; }
.cube-front { background-color: #e8e7e4; }
.cube-title { max-width: 13ch; font-family: 'Montserrat',sans-serif; font-size: clamp(20px,2.2vw,30px); font-weight: 600; letter-spacing: -.045em; }
.cube-expand-icon { width: 34px; height: 34px; border-radius: 50%; }
.cube-back { padding: clamp(20px,2.5vw,32px); }
.cube-back-title { margin-bottom: 13px; font-size: 20px; }
.cube-back-list { gap: 8px; }
.cube-read-more { border-radius: 2px; }

.repairs-process-title { max-width: 14ch; margin-bottom: 42px; }
.repairs-steps-flow { align-items: flex-start; gap: clamp(18px,3.5vw,48px); }
.repair-step-item { flex: 1 1 0; align-items: flex-start; gap: 16px; }
.step-icon-circle { width: 52px; height: 52px; flex: 0 0 52px; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: none; }
.step-icon-circle img { width: 24px; }
.step-hollus-title { max-width: 19ch; font-family: 'Montserrat',sans-serif; font-size: 17px; line-height: 1.35; letter-spacing: -.025em; }
.step-hollus-desc { max-width: 36ch; color: var(--muted); font-size: 13px; line-height: 1.75; }
.step-curve-arrow { opacity: .2; }

.calculator-hollus-section { background: #fff; color: var(--ink); }
.calculator-hollus-container { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(36px,7vw,100px); align-items: center; }
.calculator-hollus-section .calc-hollus-heading { color: var(--ink); }
.calculator-hollus-section .calc-hollus-subtitle { max-width: 47ch; margin-bottom: 26px; color: var(--muted); line-height: 1.75; }
.calculator-hollus-section .line-input,.calculator-hollus-section .line-select { color: var(--ink); border-color: #cbc8c9; }
.calculator-hollus-section .line-input::placeholder { color: #969297; }
.calculator-hollus-section .line-select option { color: var(--ink); }
.calculator-hollus-section .calc-live-badge { padding: 10px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.calculator-hollus-section .live-badge-val { color: var(--accent); }
.calculator-hollus-section .video-preview-wrapper { border-radius: 0; box-shadow: none; }
.calculator-hollus-section .btn-gold-hollus { border-radius: 2px; }

.portfolio-hollus-section { background: #fff; }
.portfolio-header-block { max-width: 850px; margin: 0 0 32px; text-align: left; }
.portfolio-badge-pill { padding: 0; color: var(--accent); background: transparent; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.portfolio-hollus-title { max-width: 16ch; margin: 14px 0; }
.portfolio-subtitle { max-width: 58ch; margin: 0; color: var(--muted); line-height: 1.7; }
.portfolio-filter-nav { justify-content: flex-start; gap: 7px; margin: 24px 0; }
.portfolio-filter-btn { min-height: 35px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font-size: 11px; }
.portfolio-filter-btn.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.portfolio-showcase-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 18px; }
.project-showcase-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.project-media-wrapper { height: auto; aspect-ratio: 1.28; border-radius: 0; }
.project-card-info { padding: 13px 0 0; }
.project-card-title { font-family: 'Montserrat',sans-serif; font-size: 16px; line-height: 1.35; letter-spacing: -.025em; }
.project-card-desc { color: var(--muted); font-size: 12px; line-height: 1.55; }
.project-card-action { border-bottom: 1px solid var(--line); }
.portfolio-more-btn { border-radius: 2px; }

.styles-hollus-section { background: var(--paper); }
.styles-hollus-container { grid-template-columns: minmax(0,.9fr) minmax(0,1fr); gap: clamp(34px,7vw,100px); align-items: center; }
.styles-blueprints-frame { min-height: 400px; border-radius: 0; box-shadow: none; }
.styles-hollus-desc { max-width: 56ch; color: var(--muted); font-size: 14px; line-height: 1.8; }
.styles-dual-checklist { gap: 18px; }
.styles-dual-checklist .checklist-col li { line-height: 1.6; }
.styles-dual-checklist .checklist-col li i { color: var(--accent); }
.styles-right-block .btn-gold-hollus { border-radius: 2px; }

.testimonials-hollus-section { background: #fff; }
.testimonials-hollus-title { max-width: 13ch; margin-bottom: 26px; }
.testimonial-slide { border: 0; border-radius: 0; background: var(--paper); box-shadow: none; }
.client-quote-text { color: var(--ink); font-family: 'Montserrat',sans-serif; font-size: clamp(18px,2.1vw,25px); line-height: 1.55; }
.carousel-nav-btn { border: 1px solid var(--line); box-shadow: none; }

.contact-hollus-section { background: var(--paper); color: var(--ink); }
.contact-hollus-title { color: var(--ink); }
.contact-hollus-subtitle { color: var(--muted); line-height: 1.7; }
.contact-left-col,.contact-right-box { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.contact-left-col .line-input,.contact-left-col .line-textarea { color: var(--ink); border-color: #c9c6c5; }
.contact-left-col .line-input::placeholder,.contact-left-col .line-textarea::placeholder { color: #8d898d; }
.contact-left-col .line-input:focus,.contact-left-col .line-textarea:focus { border-color: var(--accent); }
.contact-right-box { color: var(--ink); }
.contact-right-box .contact-data-item,.contact-right-box a { color: #4c494e; }
.contact-right-box .contact-data-item i { color: var(--accent); }
.contact-hollus-section .btn-gold-hollus { border-radius: 2px; }

.site-footer-hollus { border-top: 1px solid var(--line); background: #fff; color: var(--ink); }
.footer-brand .brand-wordmark { color: var(--ink); }
.footer-brand .brand-symbol { width: 42px; height: 48px; }
.footer-hollus-container { gap: clamp(20px,4vw,62px); }
.footer-heading { color: var(--ink); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.footer-nav-list a,.footer-entry { color: #69666b; }
.footer-copyright-bar { border-top: 1px solid var(--line); background: #fff; }
.footer-copyright-inner { color: #777478; }

.mobile-toggle-btn { z-index: 1250; position: fixed; top: 17px; right: 20px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: none; }
.mobile-toggle-btn span { background: var(--ink); }
.mobile-drawer-overlay { z-index: 1200; }
.mobile-drawer { z-index: 1210; }

@media (max-width: 1200px) {
  .site-masthead { height: 74px; padding-inline: 20px; }
  .site-masthead .hollus-top-nav-bar { display: flex; gap: 14px; }
  .site-masthead .hollus-top-nav { display: none; }
  .site-masthead .site-header-cta { display: inline-flex; }
  .mobile-toggle-btn { top: 16px; right: 18px; }
}
@media (max-width: 760px) {
  .site-masthead { height: 68px; padding-inline: 16px; }
  .site-masthead-brand { gap: 8px; }
  .site-masthead-brand .brand-symbol { width: 34px; height: 40px; }
  .site-masthead-brand .brand-wordmark strong { font-size: 13px; }
  .site-masthead-brand .brand-wordmark small { font-size: 6px; }
  .site-masthead .hollus-top-nav-bar { gap: 9px; margin-right: 51px; }
  .site-masthead .site-header-cta { gap: 7px; font-size: 10px; }
  .site-header-arrow { width: 24px; height: 24px; }
  .mobile-toggle-btn { top: 13px; right: 13px; width: 40px; height: 40px; }
  #hero .hero-right-content { padding: 92px 19px max(38px,env(safe-area-inset-bottom)); }
  #hero .hero-eyebrow { margin-bottom: 10px; font-size: 8px; letter-spacing: .15em; }
  #hero .hollus-hero-heading { margin-bottom: 11px; font-size: clamp(52px,14.5vw,70px); }
  #hero .hollus-hero-lead { max-width: 34ch; margin-bottom: 18px; font-size: 13px; }
  #hero .hollus-hero-buttons { gap: 8px; }
  #hero .hollus-hero-buttons .btn-dark-hollus,#hero .hollus-hero-buttons .btn-hollow-hollus { min-height: 42px; padding-inline: 14px; font-size: 10px; }
  .about-hollus-container,.calculator-hollus-container,.styles-hollus-container { grid-template-columns: 1fr; }
  .about-photo-right { order: -1; }
  .photo-right-frame { height: 75vw; min-height: 260px; max-height: 430px; }
  .about-hollus-title,.services-main-heading,.repairs-process-title,.calc-hollus-heading,.portfolio-hollus-title,.styles-hollus-title,.testimonials-hollus-title,.contact-hollus-title { font-size: clamp(32px,9vw,46px); }
  .services-cube-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .service-cube { min-height: 300px; }
  .repairs-steps-flow { flex-direction: column; gap: 18px; }
  .repair-step-item { width: 100%; }
  .step-curve-arrow { display: none; }
  .styles-blueprints-frame { min-height: 280px; max-height: 410px; }
  .styles-dual-checklist { grid-template-columns: 1fr 1fr; }
  .portfolio-showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 12px; }
}
@media (max-width: 440px) {
  .site-masthead .weglot-switcher { display: none; }
  .site-masthead .hollus-top-nav-bar { margin-right: 51px; }
  .site-masthead .site-header-cta { max-width: 122px; overflow: hidden; }
  #hero .hero-right-content { padding-top: 84px; padding-bottom: max(36px,env(safe-area-inset-bottom)); }
  #hero .hollus-hero-heading { font-size: clamp(48px,13vw,60px); }
  .services-cube-grid,.portfolio-showcase-grid { grid-template-columns: 1fr; }
  .service-cube { min-height: 340px; }
  .about-stats-grid { gap: 8px; }
  .about-stats-grid .stat-label { font-size: 9px; }
  .styles-dual-checklist { grid-template-columns: 1fr; }
  #hero .hollus-hero-buttons { flex-wrap: wrap; }
}
@media (max-height: 640px) and (max-width: 760px) {
  #hero .hero-right-content { padding-top: 82px; padding-bottom: 24px; }
  #hero .hollus-hero-heading { font-size: 48px; }
  #hero .hollus-hero-lead { margin-bottom: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #hero .hero-slide { transition: none; }
  #hero.hero-motion-ready .hero-wave-word { animation: none; }
  #hero .hero-light-sweep { display: none; }
  .site-header-arrow { transition: none; }
}
/* Match the class toggled by the existing drawer controller. */
.mobile-drawer.active { right: 0; }
.mobile-drawer { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu-open .mobile-toggle-btn { opacity: 0; pointer-events: none; }
.mobile-close-btn { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
/* Small-screen refinements for Wiemer-like editorial alignment. */
#hero { min-height: 100svh; }
#projects .portfolio-header-block { text-align: left; }
#projects .portfolio-hollus-title { margin-left: 0; margin-right: 0; }
.portfolio-filter-nav { scrollbar-width: none; }
.portfolio-filter-nav::-webkit-scrollbar { display: none; }
@media (max-width: 360px) {
  .site-masthead .site-header-cta { display: none; }
  .site-masthead .hollus-top-nav-bar { margin-right: 48px; }
}

/* Keep the mobile filter rail clean while preserving horizontal swipe. */
#portfolio-filter-nav { scrollbar-width: none !important; }
#portfolio-filter-nav::-webkit-scrollbar { display: none !important; }


/* Full-bleed reference treatment: transparent masthead over the hero, then a quiet white bar. */
.site-masthead:not(.is-scrolled) {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(15,14,16,.34), rgba(15,14,16,0));
  backdrop-filter: none;
}
.site-masthead:not(.is-scrolled) .site-masthead-brand,
.site-masthead:not(.is-scrolled) .site-header-cta,
.site-masthead:not(.is-scrolled) .hollus-nav-item { color: #fff; }
.site-masthead:not(.is-scrolled) .site-masthead-brand .brand-symbol { filter: grayscale(1) brightness(0) invert(1); }
.site-masthead:not(.is-scrolled) .site-masthead-brand .brand-wordmark small { color: rgba(255,255,255,.82); }
.site-masthead:not(.is-scrolled) .site-header-arrow { border-color: rgba(255,255,255,.72); }
.site-masthead:not(.is-scrolled) .mobile-toggle-btn { border-color: rgba(255,255,255,.65); background: rgba(20,20,20,.16); }
.site-masthead:not(.is-scrolled) .mobile-toggle-btn span { background: #fff; }
.site-masthead.is-scrolled { transition: background .25s ease, box-shadow .25s ease; }
#hero::after { background: linear-gradient(180deg,rgba(19,18,20,.28) 0%,rgba(19,18,20,.11) 35%,rgba(19,18,20,.58) 100%); }
@media (prefers-reduced-motion: reduce) {
  .site-masthead, .site-masthead * { transition: none !important; }
}
/* Keep José's original emblem intact; only the wordmark switches to white over the cover. */
.site-masthead:not(.is-scrolled) .site-masthead-brand .brand-symbol { filter: none; }
.mobile-toggle-btn {
  border-color: rgba(255,255,255,.65);
  background: rgba(20,20,20,.16);
  backdrop-filter: blur(8px);
}
.mobile-toggle-btn span { background: #fff; }
.mobile-toggle-btn.is-scrolled { border-color: var(--line); background: #fff; backdrop-filter: none; }
.mobile-toggle-btn.is-scrolled span { background: var(--ink); }

/* Wiemer-inspired editorial composition with José Correa's indigo and sky blue. */
:root {
  --brand-blue: #2c5e84;
  --brand-blue-deep: #252131;
  --brand-sky: #6acbdc;
  --brand-blue-pale: #edf4f7;
}
.site-masthead:not(.is-scrolled) .site-masthead-brand .brand-symbol { filter: none; }
.mobile-toggle-btn { border-color: rgba(255,255,255,.65); background: rgba(20,20,20,.16); backdrop-filter: blur(8px); }
.mobile-toggle-btn span { background: #fff; }
.mobile-toggle-btn.is-scrolled { border-color: var(--line); background: #fff; backdrop-filter: none; }
.mobile-toggle-btn.is-scrolled span { background: var(--ink); }
#hero { min-height: 100svh; }
#hero::after { background: linear-gradient(180deg,rgba(17,19,26,.35) 0%,rgba(17,19,26,.08) 34%,rgba(17,19,26,.55) 100%); }
#hero .hero-right-content { align-items: center; padding-top: 110px; padding-bottom: clamp(58px,9vh,100px); }
#hero .hollus-hero-heading { font-size: clamp(76px,15vw,220px); font-weight: 500; letter-spacing: -.085em; line-height: .82; }
#hero .hero-eyebrow { letter-spacing: .24em; }
#hero .hollus-hero-lead { max-width: 48ch; font-size: clamp(15px,1.45vw,19px); }
#hero .hollus-hero-buttons .btn-dark-hollus,#hero .hollus-hero-buttons .btn-hollow-hollus { min-height: 48px; padding-inline: 22px; font-size: 12px; }
#hero .btn-dark-hollus { background: #fff; color: var(--brand-blue-deep); }
#hero .btn-dark-hollus:hover { background: var(--brand-sky); color: var(--brand-blue-deep); }
#hero .btn-hollow-hollus { border-color: rgba(255,255,255,.8); background: transparent; }
#about { position: relative; overflow: hidden; background: var(--brand-blue-deep); color: #fff; }
#about .about-hollus-title,#about .about-text-lead,#about .stat-num-row,#about .stat-label,#about .call-box-tag,#about .call-box-num { color: #fff; }
#about .about-text-sub { color: rgba(255,255,255,.72); }
#about .about-stats-grid { border-color: rgba(255,255,255,.22); }
#about .stat-num-row { color: var(--brand-sky); }
#about .about-call-box { border-color: rgba(255,255,255,.25); }
#about .read-more-link { color: var(--brand-sky); }
#about .photo-right-frame { height: min(72vw,740px); min-height: 470px; }
#services { background: #fff; }
#services .container > .text-center { max-width: none; margin: 0 0 38px; }
#services .services-main-heading { max-width: 15ch; font-size: clamp(42px,7vw,92px); }
#services .services-cube-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#services .service-cube { min-height: clamp(330px,36vw,470px); background: #e7edf0; }
#services .cube-front,#services .cube-back { border-radius: 0; }
#services .cube-overlay { background: linear-gradient(180deg,rgba(12,16,23,0) 35%,rgba(12,16,23,.74) 100%); }
#services .cube-title { max-width: 12ch; font-size: clamp(23px,2.6vw,38px); font-weight: 500; }
#services .cube-expand-icon { border: 1px solid rgba(255,255,255,.72); background: transparent; }
#services .cube-back { background: var(--brand-blue); color: #fff; }
#services .cube-back-title,#services .cube-back-list li { color: #fff; }
#services .cube-read-more { border-color: rgba(255,255,255,.6); background: transparent; color: #fff; }
#process { background: var(--brand-blue-pale); }
#process .repairs-process-title { max-width: 16ch; font-size: clamp(42px,7vw,90px); }
#process .step-icon-circle { border-color: rgba(44,94,132,.23); }
#process .step-hollus-title { color: var(--brand-blue-deep); }
#process .step-hollus-desc { color: #5c6570; }
#projects { background: #fff; }
#projects .portfolio-header-block { max-width: 900px; margin-bottom: 28px; }
#projects .portfolio-hollus-title { max-width: 17ch; font-size: clamp(42px,7vw,90px); }
#projects .portfolio-filter-nav { gap: 24px; margin: 26px 0 32px; padding-bottom: 9px; overflow-x: auto; border-bottom: 1px solid var(--line); }
#projects .portfolio-filter-btn { flex: 0 0 auto; min-height: 34px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: #6e7279; }
#projects .portfolio-filter-btn.active { color: var(--brand-blue); box-shadow: inset 0 -2px var(--brand-blue); }
#projects .portfolio-filter-btn .filter-count { color: var(--brand-blue); background: var(--brand-blue-pale); }
#projects .portfolio-showcase-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 42px 18px; }
#projects .project-showcase-card { grid-column: span 4; }
#projects .project-showcase-card:nth-child(6n + 1) { grid-column: span 7; }
#projects .project-showcase-card:nth-child(6n + 2) { grid-column: span 5; margin-top: 76px; }
#projects .project-media-wrapper { aspect-ratio: 1.32; }
#projects .project-showcase-card:nth-child(6n + 1) .project-media-wrapper { aspect-ratio: 1.52; }
#projects .project-card-info { padding-top: 15px; }
#projects .project-card-title { font-size: clamp(17px,1.7vw,23px); }
#projects .project-card-action { color: var(--brand-blue); }
#styles { background: var(--brand-blue); color: #fff; }
#styles .styles-hollus-title,#styles .styles-hollus-desc,#styles .checklist-col li { color: #fff; }
#styles .styles-hollus-title { max-width: 15ch; font-size: clamp(42px,6vw,78px); }
#styles .styles-dual-checklist .checklist-col li i { color: var(--brand-sky); }
#styles .btn-gold-hollus { border-color: #fff; background: #fff; color: var(--brand-blue-deep); }
#styles .styles-blueprints-frame { border: 0; }
#testimonials { background: #f6f5f2; }
#testimonials .testimonial-slide { background: transparent; }
#testimonials .carousel-nav-btn { color: var(--brand-blue); }
#contact { background: var(--brand-blue-pale); }
#contact .contact-hollus-title { max-width: 13ch; font-size: clamp(42px,6.5vw,82px); }
#contact .btn-gold-hollus { background: var(--brand-blue); }
#contact .contact-right-box .contact-data-item i { color: var(--brand-blue); }
.site-footer-hollus { border-color: rgba(255,255,255,.1); background: var(--brand-blue-deep); color: #fff; }
.site-footer-hollus .brand-wordmark,.site-footer-hollus .footer-heading,.site-footer-hollus .footer-entry,.site-footer-hollus .footer-nav-list a { color: #fff; }
.site-footer-hollus .footer-copyright-bar { border-color: rgba(255,255,255,.16); background: transparent; }
.site-footer-hollus .footer-copyright-inner { color: rgba(255,255,255,.65); }
@media (max-width: 900px) {
  #projects .project-showcase-card,#projects .project-showcase-card:nth-child(6n + 1),#projects .project-showcase-card:nth-child(6n + 2) { grid-column: span 6; margin-top: 0; }
}
@media (max-width: 760px) {
  #hero .hero-right-content { align-items: flex-end; padding: 100px 20px max(64px,env(safe-area-inset-bottom)); }
  #hero .hollus-hero-heading { font-size: clamp(48px,13vw,68px); letter-spacing: -.075em; line-height: .94; }
  #hero .hero-eyebrow { font-size: 8px; letter-spacing: .15em; }
  #hero .hollus-hero-lead { max-width: 32ch; font-size: 13px; }
  #about .about-hollus-container,#styles .styles-hollus-container { grid-template-columns: 1fr; }
  #about .about-photo-right { order: -1; }
  #about .photo-right-frame { width: 100%; height: 76vw; min-height: 260px; max-height: 430px; }
  #services .services-cube-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  #services .service-cube { min-height: 310px; }
  #process .repairs-steps-flow { gap: 26px; }
  #projects .portfolio-filter-nav { gap: 18px; }
  #projects .portfolio-showcase-grid { grid-template-columns: 1fr; gap: 34px; }
  #projects .project-showcase-card,#projects .project-showcase-card:nth-child(6n + 1),#projects .project-showcase-card:nth-child(6n + 2) { grid-column: 1; }
  #projects .project-media-wrapper,#projects .project-showcase-card:nth-child(6n + 1) .project-media-wrapper { aspect-ratio: 1.25; }
  #styles .styles-blueprints-frame { min-height: 270px; }
}
@media (max-width: 380px) {
  #hero .hollus-hero-heading { font-size: 12.4vw; }
  #hero .hollus-hero-buttons .btn-dark-hollus,#hero .hollus-hero-buttons .btn-hollow-hollus { padding-inline: 12px; font-size: 9px; }
  #services .services-cube-grid { grid-template-columns: 1fr; }
  #services .service-cube { min-height: 350px; }
}
@media (prefers-reduced-motion: reduce) {
  #hero .hero-slide { transition: none; }
  #hero.hero-motion-ready .hero-wave-word { animation: none; }
  #hero .hero-light-sweep { display: none; }
  .site-masthead,.site-masthead * { transition: none !important; }
}
/* Keep the story area light, as in the reference; reserve brand blue for selected bands. */
#about { background: var(--paper); color: var(--ink); }
#about .about-hollus-title,#about .about-text-lead,#about .stat-num-row,#about .stat-label,#about .call-box-tag,#about .call-box-num { color: var(--ink); }
#about .about-text-sub { color: var(--muted); }
#about .about-stats-grid { border-color: var(--line); }
#about .stat-num-row { color: var(--brand-blue); }
#about .about-call-box { border-color: var(--line); }
#about .read-more-link { color: var(--brand-blue); }

/* Brand colour rhythm: logo blue and red alternate through the page. */
#about { background: var(--brand-blue); color: #fff; }
#about .about-hollus-title,#about .about-text-lead,#about .stat-label,#about .call-box-tag,#about .call-box-num { color: #fff; }
#about .about-text-sub { color: rgba(255,255,255,.82); }
#about .about-stats-grid { border-color: rgba(255,255,255,.3); }
#about .stat-num-row { color: var(--brand-sky); }
#about .about-call-box { border-color: rgba(255,255,255,.3); }
#about .read-more-link { color: #fff; }
#services { background: var(--brand-blue-pale); }
#process { background: var(--accent); color: #fff; }
#process .repairs-process-title,#process .step-hollus-title,#process .step-hollus-desc { color: #fff; }
#process .step-icon-circle { border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.12); }
#process .step-icon-circle img { filter: brightness(0) invert(1); }
#process .step-curve-arrow { opacity: .7; }
#projects { background: var(--paper); }
#projects .portfolio-filter-btn.active { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
#projects .portfolio-filter-btn .filter-count { color: var(--accent); background: #f7e3e5; }
#projects .project-card-action { color: var(--accent); }
#styles { background: var(--brand-blue-deep); }
#styles .styles-dual-checklist .checklist-col li i { color: var(--brand-sky); }
#testimonials { background: #f8e9ea; }
#testimonials .carousel-nav-btn { color: var(--accent); }
#testimonials .testimonial-slide { background: transparent; }
#contact { background: #f8e9ea; }
#contact .btn-gold-hollus { border-color: var(--accent); background: var(--accent); color: #fff; }
#contact .contact-right-box .contact-data-item i { color: var(--accent); }

#process .step-icon-circle img { filter: none; }

/* Responsive typography and text alignment: mobile-first finishing pass. */
@media (max-width: 760px) {
  .about-section-hollus,
  .services-section-hollus,
  .repairs-process-hollus,
  .portfolio-hollus-section,
  .styles-hollus-section,
  .testimonials-hollus-section,
  .contact-hollus-section {
    padding-block: 58px;
  }

  .about-section-hollus .container,
  .services-section-hollus .container,
  .repairs-process-hollus .container,
  .portfolio-hollus-section .container,
  .styles-hollus-section .container,
  .testimonials-hollus-section .container,
  .contact-hollus-section .container {
    padding-inline: 20px;
  }

  #about .about-card-left { padding: 26px 22px; }
  #about .about-hollus-title,
  #services .services-main-heading,
  #process .repairs-process-title,
  #projects .portfolio-hollus-title,
  #styles .styles-hollus-title,
  #testimonials .testimonials-hollus-title,
  #contact .contact-hollus-title {
    max-width: 15ch;
    margin: 0 0 16px;
    text-align: left;
    font-size: clamp(34px, 9vw, 46px);
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
  }

  #about .about-text-lead { max-width: 42ch; margin: 14px 0 12px; font-size: 15px; line-height: 1.58; }
  #about .about-text-sub { max-width: 44ch; margin-bottom: 22px; font-size: 13.5px; line-height: 1.65; }
  #about .about-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-bottom: 22px; }
  #about .about-stats-grid .stat-col:last-child { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; }
  #about .about-stats-grid .stat-num-row { flex: 0 0 auto; margin: 0; font-size: 30px; }
  #about .about-stats-grid .stat-label { max-width: 19ch; font-size: 11px; line-height: 1.4; }
  #about .about-call-box { margin-top: 22px; }

  #services .container > .text-center { margin: 0 0 24px; text-align: left; }
  #services .container > .text-center > p { max-width: 42ch; margin-inline: 0; font-size: 14px; line-height: 1.6; }
  #services .service-cube { text-align: left; }
  #services .cube-title { max-width: 15ch; line-height: 1.14; text-wrap: balance; }

  #process .repairs-process-title { max-width: 14ch; margin-bottom: 24px; }
  #process .repairs-steps-flow { align-items: stretch; gap: 22px; }
  #process .repair-step-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  #process .step-icon-circle { width: 46px; height: 46px; }
  #process .step-icon-circle img { width: 25px; height: 25px; }
  #process .step-text-wrap { min-width: 0; }
  #process .step-hollus-title { max-width: 27ch; margin: 1px 0 5px; font-size: 15px; line-height: 1.3; text-wrap: balance; }
  #process .step-hollus-desc { max-width: 43ch; margin: 0; font-size: 12.5px; line-height: 1.55; }

  #projects .portfolio-header-block { max-width: none; margin-bottom: 22px; }
  #projects .portfolio-badge-pill { margin-bottom: 12px; font-size: 10px; }
  #projects .portfolio-hollus-title { max-width: 14ch; margin: 0 0 12px; }
  #projects .portfolio-subtitle { max-width: 43ch; margin: 0; font-size: 13.5px; line-height: 1.6; }
  #projects .portfolio-filter-nav { justify-content: flex-start; gap: 8px; margin: 22px 0 26px; }
  #projects .portfolio-filter-btn { min-height: 36px; padding: 8px 12px; font-size: 12px; }

  #styles .styles-hollus-container { gap: 26px; }
  #styles .styles-hollus-desc,
  #contact .contact-hollus-subtitle { max-width: 43ch; margin: 0 0 18px; font-size: 14px; line-height: 1.6; text-align: left; }
  #testimonials .testimonials-hollus-title { margin-bottom: 18px; }
  #testimonials .client-quote-text { max-width: 38ch; font-size: 15px; line-height: 1.6; }

  #contact .contact-hollus-container { align-items: stretch; gap: 28px; }
  #contact .contact-left-col { min-width: 0; }
  #contact .calc-line-row { gap: 12px; margin-bottom: 12px; }
  #contact .calc-line-field { width: 100%; min-width: 0; }
  #contact .contact-right-box { padding: 24px 20px; }
  #contact .contact-data-item { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .about-section-hollus .container,
  .services-section-hollus .container,
  .repairs-process-hollus .container,
  .portfolio-hollus-section .container,
  .styles-hollus-section .container,
  .testimonials-hollus-section .container,
  .contact-hollus-section .container { padding-inline: 18px; }

  #about .about-card-left { padding: 23px 18px; }
  #about .about-stats-grid .stat-label { font-size: 10.5px; }
  #services .services-cube-grid { gap: 10px; }
  #process .repair-step-item { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; }
  #process .step-icon-circle { width: 42px; height: 42px; }
  #process .step-hollus-title { font-size: 14px; }
  #process .step-hollus-desc { font-size: 12px; }
  #projects .portfolio-filter-nav { gap: 7px; }
  #projects .portfolio-filter-btn { padding-inline: 10px; font-size: 11px; }
  #contact .contact-right-box { padding-inline: 18px; }
}

/* Mobile services: give each flip card enough width and room for its full content. */
@media (max-width: 600px) {
  #services .container { padding-inline: 20px; }
  #services .services-main-heading {
    max-width: 13ch;
    margin: 0 0 30px;
    text-align: left;
    font-size: clamp(34px, 9.2vw, 42px);
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
  }
  #services .services-cube-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  #services .service-cube {
    width: 100%;
    height: 380px;
    min-height: 0;
  }
  #services .cube-front { padding: 24px; }
  #services .cube-title { max-width: 14ch; font-size: clamp(26px, 8vw, 34px); line-height: 1.12; }
  #services .cube-back {
    justify-content: flex-start;
    gap: 0;
    padding: 22px 22px 20px;
  }
  #services .cube-back-title { margin: 0 0 10px; font-size: 20px; line-height: 1.2; }
  #services .cube-back-list { flex: 1 1 auto; gap: 5px; min-height: 0; margin: 0 0 14px; }
  #services .cube-back-list li { font-size: 13px; line-height: 1.38; }
  #services .cube-read-more { flex: 0 0 auto; min-height: 40px; margin-top: auto; }
}

@media (max-width: 360px) {
  #services .container { padding-inline: 16px; }
  #services .service-cube { height: 390px; }
  #services .cube-back { padding: 20px 18px; }
  #services .cube-back-list li { font-size: 12.5px; }
}

/* Contact: deep logo red outside, clean high-contrast form and dark information panel. */
#contact {
  background: #B62F3A;
  color: #fff;
}
#contact .contact-hollus-container { align-items: stretch; }
#contact .contact-left-col { min-width: 0; color: #252131; }
#contact .contact-hollus-title { color: #fff; }
#contact .contact-hollus-subtitle { max-width: 54ch; color: rgba(255,255,255,.94); }
#contact .hollus-contact-form {
  padding: clamp(20px,3vw,32px);
  border: 1px solid rgba(37,33,49,.08);
  background: #fff;
  box-shadow: 0 16px 40px rgba(37,33,49,.16);
}
#contact .contact-left-col .line-input,
#contact .contact-left-col .line-select,
#contact .contact-left-col .line-textarea {
  border-bottom-color: #B9C0C9;
  color: #252131;
}
#contact .contact-left-col .line-input::placeholder,
#contact .contact-left-col .line-textarea::placeholder { color: #586270; opacity: 1; }
#contact .contact-left-col .line-input:focus,
#contact .contact-left-col .line-select:focus,
#contact .contact-left-col .line-textarea:focus { border-bottom-color: #B62F3A; }
#contact .contact-left-col .line-select option { background: #252131; color: #fff; }
#contact .contact-left-col .btn-gold-hollus { border-color: #B62F3A; background: #B62F3A; color: #fff; }
#contact .contact-left-col .btn-gold-hollus:hover { border-color: #912632; background: #912632; }
#contact .contact-right-box { background: #252131; color: #fff; }
#contact .contact-right-box .data-title,
#contact .contact-right-box .data-desc,
#contact .contact-right-box .data-desc span,
#contact .contact-right-box .contact-data-item > a:not(.data-phone-val) { color: #fff; }
#contact .contact-right-box .data-phone-val,
#contact .contact-right-box .contact-data-item i { color: #FFC3C8; }
#contact .contact-right-box a:focus-visible,
#contact .contact-left-col .btn-gold-hollus:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 760px) {
  #contact .contact-hollus-title { color: #fff; }
  #contact .hollus-contact-form { padding: 22px 18px; }
  #contact .contact-right-box { padding: 24px 20px; }
}

/* Gentle buoyancy with one brief shake on each three-second cycle. */
.floating-whatsapp {
  transform-origin: 50% 50%;
  animation: whatsapp-float 3s ease-in-out infinite, whatsapp-shake 3s ease-in-out infinite;
  will-change: translate, rotate;
}
@keyframes whatsapp-float {
  0%, 100% { translate: 0 0; }
  45% { translate: 0 -7px; }
  75% { translate: 0 -2px; }
}
@keyframes whatsapp-shake {
  0%, 78%, 100% { rotate: 0deg; }
  82% { rotate: -6deg; }
  85% { rotate: 6deg; }
  88% { rotate: -5deg; }
  91% { rotate: 4deg; }
  94% { rotate: -3deg; }
  97% { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp { animation: none; will-change: auto; translate: none; rotate: none; }
}

/* Shared type scale and alignment for clearer desktop and mobile reading. */
#services .services-main-heading,
#process .repairs-process-title,
#projects .portfolio-hollus-title,
#styles .styles-hollus-title,
#testimonials .testimonials-hollus-title,
#contact .contact-hollus-title {
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-align: left;
  text-wrap: balance;
}
#services .services-main-heading { max-width: none; margin: 0 0 34px; }
#services .services-cube-grid { gap: clamp(16px, 2vw, 26px); }
#process .repairs-process-title { max-width: 20ch; margin: 0 0 34px; }

#projects .portfolio-header-block { max-width: 850px; margin: 0 0 32px; text-align: left; }
#projects .portfolio-badge-pill { margin-bottom: 10px; }
#projects .portfolio-hollus-title { max-width: 16ch; margin: 0 0 14px; }
#projects .portfolio-subtitle { max-width: 62ch; margin: 0; font-size: 15px; line-height: 1.65; }
#projects .portfolio-filter-nav { gap: clamp(14px, 2vw, 24px); margin: 28px 0 36px; }
#projects .project-showcase-card { min-width: 0; }
#projects .project-card-info { padding: 16px 0 0; text-align: left; }
#projects .project-card-title {
  min-height: 2.6em;
  margin: 0 0 8px;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.3;
  letter-spacing: -.025em;
  text-align: left;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
#projects .project-card-desc {
  min-height: 3.1em;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
}
#projects .project-card-actions { justify-content: flex-start; padding-top: 11px; }
#projects .project-showcase-card:nth-child(6n + 2) { margin-top: 42px; }

#testimonials .testimonials-hollus-title { max-width: 900px; margin: 0 auto 28px; }
#testimonials .testimonials-carousel-wrap { max-width: 900px; margin: 0 auto; text-align: left; }
#testimonials .testimonial-track { min-height: 250px; }
#testimonials .testimonial-slide { text-align: left; }
#testimonials .client-avatar-circle { margin: 0 0 16px; }
#testimonials .client-quote-text {
  max-width: 66ch;
  margin: 0 0 16px;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.01em;
  text-align: left;
  text-wrap: pretty;
}
#testimonials .client-name,
#testimonials .client-role { text-align: left; }
#testimonials .carousel-dots { justify-content: flex-start; margin-top: 18px; }

@media (max-width: 760px) {
  #services .services-main-heading,
  #process .repairs-process-title,
  #projects .portfolio-hollus-title,
  #styles .styles-hollus-title,
  #testimonials .testimonials-hollus-title,
  #contact .contact-hollus-title {
    max-width: 16ch;
    margin-bottom: 20px;
    font-size: clamp(31px, 8.2vw, 40px);
    line-height: 1.08;
    letter-spacing: -.04em;
  }
  #services .services-main-heading { max-width: 18ch; margin-bottom: 26px; }
  #process .repairs-process-title { max-width: 17ch; margin-bottom: 24px; }
  #projects .portfolio-header-block { max-width: none; margin-bottom: 24px; }
  #projects .portfolio-hollus-title { max-width: 16ch; margin-bottom: 12px; }
  #projects .portfolio-subtitle { max-width: 58ch; font-size: 14px; line-height: 1.6; }
  #projects .portfolio-filter-nav { gap: 14px; margin: 22px 0 26px; }
  #projects .project-showcase-card:nth-child(6n + 2) { margin-top: 0; }
  #projects .project-card-info { padding: 14px 0 0; }
  #projects .project-card-title { min-height: 0; font-size: 18px; line-height: 1.32; }
  #projects .project-card-desc { min-height: 0; font-size: 13px; line-height: 1.6; }
  #projects .project-card-actions { padding-top: 10px; }

  #testimonials .testimonials-hollus-title { max-width: 16ch; margin: 0 0 22px; }
  #testimonials .testimonials-carousel-wrap { max-width: none; margin: 0; }
  #testimonials .testimonial-track { min-height: 270px; }
  #testimonials .client-avatar-circle { width: 52px; height: 52px; margin-bottom: 14px; }
  #testimonials .client-quote-text { max-width: none; padding: 0 42px; font-size: 16px; line-height: 1.6; }
  #testimonials .client-name,
  #testimonials .client-role { padding-inline: 42px; }
  #testimonials .carousel-nav-prev { left: -7px; }
  #testimonials .carousel-nav-next { right: -7px; }
  #testimonials .carousel-dots { justify-content: center; margin-top: 18px; }
}

@media (max-width: 420px) {
  #services .services-main-heading,
  #process .repairs-process-title,
  #projects .portfolio-hollus-title,
  #styles .styles-hollus-title,
  #testimonials .testimonials-hollus-title,
  #contact .contact-hollus-title { font-size: clamp(29px, 8vw, 34px); }
  #projects .project-card-title { font-size: 17px; }
  #testimonials .client-quote-text { padding-inline: 38px; font-size: 15px; }
  #testimonials .client-name,
  #testimonials .client-role { padding-inline: 38px; }
}

/* Keep the first staggered project pair aligned at its text baseline. */
@media (min-width: 901px) {
  #projects .project-showcase-card:nth-child(6n + 2) { margin-top: 86px; }
  #testimonials .carousel-nav-prev { left: -56px; }
  #testimonials .carousel-nav-next { right: -56px; }
}
@media (max-width: 900px) {
  #projects .project-showcase-card:nth-child(6n + 2) { margin-top: 0; }
}
@media (max-width: 760px) {
  #testimonials .testimonials-hollus-title { padding-left: 42px; }
  #testimonials .client-avatar-circle { margin-left: 42px; }
}
@media (max-width: 420px) {
  #testimonials .testimonials-hollus-title { padding-left: 38px; }
  #testimonials .client-avatar-circle { margin-left: 38px; }
}

/* Full-bleed photo backdrop for the About section. */
#about.about-section-hollus { position: relative; isolation: isolate; overflow: hidden; min-height: 680px; padding-block: clamp(64px, 7vw, 96px); background: #252131; }
#about .diamond-pattern-bg { z-index: 1; opacity: .035; }
#about .about-photo-backdrop { position: absolute; z-index: 0; inset: 0; overflow: hidden; isolation: isolate; }
#about .about-photo-backdrop .photo-right-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; }
#about .about-photo-backdrop .photo-right-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 66% center; transform: scale(1.015); filter: saturate(.92); }
#about .about-photo-backdrop::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(37,33,49,.82) 0%, rgba(37,33,49,.72) 34%, rgba(37,33,49,.52) 59%, rgba(37,33,49,.24) 100%), linear-gradient(0deg, rgba(37,33,49,.3), transparent 56%); }
#about .about-photo-backdrop .photo-right-frame::after { z-index: 2; }
#about .about-hollus-container { display: block; min-height: 500px; position: relative; z-index: 2; }
#about .about-card-left { width: min(100%, 760px); background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#about .about-hollus-title, #about .about-text-lead, #about .about-text-sub, #about .stat-label, #about .call-box-tag, #about .call-box-num, #about .read-more-link { color: #fff; }
#about .about-hollus-title { max-width: 17ch; }
#about .about-text-lead { max-width: 60ch; color: rgba(255,255,255,.96); line-height: 1.7; }
#about .about-text-sub { max-width: 60ch; color: rgba(255,255,255,.83); line-height: 1.7; }
#about .about-stats-grid { border-color: rgba(255,255,255,.32); }
#about .stat-num-row { color: #6ACBDC; }
#about .stat-label { line-height: 1.45; }
#about .about-call-box { border: 1px solid rgba(255,255,255,.28); background: rgba(20,18,29,.48); }
#about .headphone-watermark img { filter: brightness(0) invert(1); opacity: .88; }
#about .read-more-link:hover { color: #ffadb5; }
#about .read-more-link i { color: #ffadb5; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #about:hover .about-photo-backdrop .photo-right-frame > img, #about:focus-within .about-photo-backdrop .photo-right-frame > img { transform: scale(1.055); filter: saturate(1.08); }
  #about:hover .about-photo-backdrop .photo-right-frame::after, #about:focus-within .about-photo-backdrop .photo-right-frame::after { transform: translateX(120%); }
}
@media (max-width: 760px) {
  #about.about-section-hollus { min-height: 0; padding-block: 58px; }
  #about .about-hollus-container { min-height: 0; }
  #about .about-card-left { width: 100%; padding: 30px 24px; }
  #about .about-photo-backdrop .photo-right-frame > img { object-position: 70% center; }
  #about .about-photo-backdrop::before { background: linear-gradient(90deg, rgba(37,33,49,.66), rgba(37,33,49,.46)), linear-gradient(0deg, rgba(37,33,49,.32), rgba(37,33,49,.08)); }
  #about .about-stats-grid { gap: 14px; }
}
@media (max-width: 420px) {
  #about.about-section-hollus { padding-block: 46px; }
  #about .about-hollus-container { padding-inline: 18px; }
  #about .about-card-left { padding: 26px 20px; }
  #about .about-photo-backdrop .photo-right-frame > img { object-position: 74% center; }
  #about .stat-num-row { font-size: 28px; }
  #about .stat-suffix { font-size: 22px; }
  #about .stat-label { font-size: 11px; }
  #about .about-call-box { gap: 14px; padding: 18px; }
  #about .call-box-num { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { #about .about-photo-backdrop .photo-right-frame > img, #about .about-photo-backdrop .photo-right-frame::after { transition: none; } }
/* Crisp inline process icons: no raster assets or icon-font dependency. */
#process .step-icon-circle { color: #fff; }
#process .step-icon-circle .process-step-icon { display: block; width: 24px; height: 24px; overflow: visible; color: #fff; transition: transform .3s cubic-bezier(.2,.75,.25,1); }
#process .repair-step-item:hover .process-step-icon { transform: scale(1.08); }
@media (max-width: 760px) { #process .step-icon-circle .process-step-icon { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { #process .step-icon-circle .process-step-icon { transition: none; } }
/* Open, modern process pictograms and high-contrast curved connectors. */
#process .step-icon-standalone { display: flex; flex: 0 0 38px; align-items: flex-start; justify-content: center; width: 38px; height: auto; margin-top: 1px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#process .step-icon-standalone .process-step-icon { display: block; width: 34px; height: 34px; overflow: visible; color: #fff; stroke-width: 1.85px; transition: transform .3s cubic-bezier(.2,.75,.25,1); }
#process .repair-step-item:hover .step-icon-standalone .process-step-icon { transform: translateY(-3px) scale(1.07); }
#process .step-curve-arrow { display: block; width: 86px; height: 62px; opacity: 1; filter: drop-shadow(0 2px 3px rgba(100,18,28,.32)); }
#process .step-flow-arrow-svg { display: block; width: 100%; height: 100%; overflow: visible; }
#process .step-flow-arrow-svg path { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  #process .repair-step-item { grid-template-columns: 38px minmax(0,1fr); }
  #process .step-icon-standalone { width: 38px; flex-basis: 38px; }
  #process .step-icon-standalone .process-step-icon { width: 30px; height: 30px; }
  #process .step-curve-arrow { display: none; }
}
@media (max-width: 420px) {
  #process .repair-step-item { grid-template-columns: 32px minmax(0,1fr); }
  #process .step-icon-standalone { width: 32px; flex-basis: 32px; }
  #process .step-icon-standalone .process-step-icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { #process .step-icon-standalone .process-step-icon { transition: none; } }
#process .step-mobile-arrow { display: none; }
@media (max-width: 760px) {
  #process .step-mobile-arrow { display: grid; place-items: center; align-self: flex-start; width: 24px; height: 24px; margin: -8px 0 -8px 7px; }
  #process .step-mobile-arrow svg { display: block; width: 22px; height: 22px; overflow: visible; }
  #process .step-mobile-arrow path { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
}
/* Rounded technical portfolio: a consistent project grid instead of a property-listing mosaic. */
#projects.portfolio-hollus-section { background: var(--brand-blue-pale); }
#projects .portfolio-header-block { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.68fr); align-items: end; gap: 10px 36px; max-width: none; margin: 0 0 28px; }
#projects .portfolio-badge-pill { grid-column: 1 / -1; display: inline-flex; width: fit-content; margin: 0; padding: 7px 12px; border: 1px solid rgba(214,62,74,.22); border-radius: 999px; background: rgba(214,62,74,.08); color: var(--accent); font-size: 10px; letter-spacing: .14em; }
#projects .portfolio-hollus-title { max-width: 18ch; margin: 0; font-size: clamp(36px,4.5vw,60px); line-height: 1.03; letter-spacing: -.05em; }
#projects .portfolio-subtitle { max-width: 46ch; margin: 0 0 3px; color: #66717c; font-size: 14px; line-height: 1.65; }
#projects .portfolio-filter-nav { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 28px; padding: 0; overflow: visible; border: 0; }
#projects .portfolio-filter-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid rgba(44,94,132,.16); border-radius: 999px; background: rgba(255,255,255,.82); color: #46535e; font-size: 12px; font-weight: 600; transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease; }
#projects .portfolio-filter-btn:hover { transform: translateY(-2px); border-color: var(--brand-blue); color: var(--brand-blue); }
#projects .portfolio-filter-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 5px 14px rgba(214,62,74,.2); }
#projects .portfolio-filter-btn .filter-count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; margin: 0; padding: 0 5px; border-radius: 999px; background: rgba(44,94,132,.1); color: var(--brand-blue-deep); font-size: 10px; }
#projects .portfolio-filter-btn.active .filter-count { background: rgba(255,255,255,.2); color: #fff; }
#projects .portfolio-showcase-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; align-items: stretch; }
#projects .portfolio-showcase-grid > .project-showcase-card:nth-child(n) { grid-column: auto; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(35,63,84,.09); border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(35,63,84,.09); }
#projects .project-showcase-card:hover { transform: translateY(-5px); border-color: rgba(214,62,74,.24); box-shadow: 0 18px 34px rgba(35,63,84,.15); }
#projects .project-media-wrapper { width: auto; height: auto; aspect-ratio: 1.2; margin: 9px 9px 0; overflow: hidden; border-radius: 15px; background: #dbe3e8; }
#projects .project-media-wrapper .project-img { border-radius: inherit; }
#projects .card-top-badges { top: 10px; left: 10px; right: 10px; gap: 6px; }
#projects .badge-tag { max-width: 72%; padding: 6px 9px; overflow: hidden; border-radius: 999px; font-size: 9px; line-height: 1.2; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
#projects .badge-category { background: rgba(32,50,65,.86); color: #fff; }
#projects .badge-ba { max-width: none; border: 1px solid rgba(255,255,255,.45); background: var(--accent); color: #fff; }
#projects .ba-card-switcher { right: 9px; bottom: 9px; padding: 3px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
#projects .ba-pill-btn { padding: 5px 9px; border-radius: 999px; font-size: 10px; }
#projects .project-card-info { display: flex; flex: 1; flex-direction: column; padding: 15px 17px 17px; text-align: left; }
#projects .project-card-title { min-height: 2.55em; margin: 0 0 7px; color: #222934; font-size: 16px; line-height: 1.3; letter-spacing: -.02em; }
#projects .project-card-desc { display: -webkit-box; min-height: 4.55em; margin: 0 0 13px; overflow: hidden; color: #68717b; font-size: 12px; line-height: 1.52; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#projects .project-card-actions { justify-content: flex-start; margin-top: auto; padding-top: 12px; border-color: rgba(35,63,84,.1); }
#projects .btn-open-proj-modal { min-height: 36px; padding: 8px 12px; border: 1px solid rgba(44,94,132,.18); border-radius: 999px; background: #f0f5f7; color: var(--brand-blue-deep); font-size: 11px; }
#projects .btn-open-proj-modal:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
#projects .portfolio-more-btn { min-height: 42px; padding: 10px 19px; border: 1px solid rgba(44,94,132,.24); border-radius: 999px; background: #fff; color: var(--brand-blue-deep); }
#projects .portfolio-more-btn:hover { border-color: var(--brand-blue); background: var(--brand-blue); color: #fff; }
@media (max-width: 1100px) {
  #projects .portfolio-showcase-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  #projects .portfolio-header-block { grid-template-columns: 1fr; gap: 10px; }
  #projects .portfolio-badge-pill { grid-column: 1; }
  #projects .portfolio-subtitle { max-width: 58ch; }
  #projects .portfolio-showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
}
@media (max-width: 520px) {
  #projects.portfolio-hollus-section { padding-block: 48px; }
  #projects .portfolio-showcase-grid { grid-template-columns: 1fr; gap: 16px; }
  #projects .project-media-wrapper { aspect-ratio: 1.35; }
  #projects .project-card-info { padding: 15px 16px 17px; }
  #projects .project-card-title { min-height: 0; font-size: 17px; }
  #projects .project-card-desc { min-height: 0; }
  #projects .portfolio-filter-nav { flex-wrap: nowrap; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
  #projects .portfolio-filter-btn { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  #projects .project-showcase-card, #projects .project-img, #projects .portfolio-filter-btn { transition: none; }
}
/* Brand-led backdrop and red actions distinguish this work portfolio from property listings. */
#projects.portfolio-hollus-section { background: var(--brand-blue); color: #fff; }
#projects .portfolio-badge-pill { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; }
#projects .portfolio-hollus-title { color: #fff; }
#projects .portfolio-subtitle { color: rgba(255,255,255,.82); }
#projects .portfolio-filter-btn { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: rgba(255,255,255,.92); }
#projects .portfolio-filter-btn:hover { border-color: #fff; color: #fff; }
#projects .portfolio-filter-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }
#projects .portfolio-filter-btn .filter-count { background: rgba(255,255,255,.16); color: #fff; }
#projects .portfolio-filter-btn.active .filter-count { background: rgba(255,255,255,.22); color: #fff; }
#projects .portfolio-more-btn { border-color: rgba(255,255,255,.65); background: transparent; color: #fff; }
#projects .portfolio-more-btn:hover { border-color: #fff; background: #fff; color: var(--brand-blue-deep); }
#projects .portfolio-action-row .btn-gold-hollus { border-color: var(--accent); background: var(--accent); color: #fff; }
#projects .portfolio-action-row .btn-gold-hollus:hover { border-color: #fff; background: #fff; color: var(--brand-blue-deep); }
/* Blue charcoal card surfaces replace the white listing-style panels. */
#projects .portfolio-showcase-grid > .project-showcase-card:nth-child(n) { border-color: rgba(255,255,255,.14); background: linear-gradient(145deg,#244b66 0%,#1e3e56 100%); box-shadow: 0 14px 30px rgba(20,39,54,.22); }
#projects .project-showcase-card:hover { border-color: rgba(255,255,255,.38); box-shadow: 0 20px 38px rgba(14,31,44,.3); }
#projects .project-card-title { color: #fff; }
#projects .project-card-desc { color: rgba(255,255,255,.76); }
#projects .project-card-actions { border-color: rgba(255,255,255,.2); }
#projects .btn-open-proj-modal { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; }
#projects .btn-open-proj-modal:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
/* Sweep every heading on entry and replay the reveal when scrolling in either direction. */
.scroll-sweep-title { position: relative; isolation: isolate; overflow: hidden; }
.scroll-sweep-title::after { content: ""; position: absolute; z-index: 3; top: -18%; bottom: -18%; left: -38%; width: 28%; pointer-events: none; opacity: 0; background: linear-gradient(100deg,transparent 0%,rgba(255,255,255,.7) 48%,transparent 100%); transform: translateX(-170%) skewX(-19deg); }
.scroll-sweep-title.is-in-view::after { animation: title-light-sweep 1.1s cubic-bezier(.18,.66,.25,1) both; }
@keyframes title-light-sweep { 0% { opacity: 0; transform: translateX(-170%) skewX(-19deg); } 18% { opacity: .78; } 100% { opacity: 0; transform: translateX(560%) skewX(-19deg); } }

/* Every interface glyph gently levitates without replacing its own hover transform. */
i[class*="fa"], .process-step-icon, .step-mobile-arrow svg, .step-flow-arrow-svg, .site-header-arrow, #back-to-top-btn i, .floating-whatsapp i { animation: jc-icon-levitate 2.8s ease-in-out infinite; transform-origin: center; }
@keyframes jc-icon-levitate { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* A stronger float, shake, and pulse for the floating WhatsApp action. */
.floating-whatsapp { animation: whatsapp-float-strong 2.8s ease-in-out infinite, whatsapp-shake-strong 2.8s ease-in-out infinite; will-change: translate, rotate, scale; }
.floating-whatsapp::after { content: ""; position: absolute; inset: -4px; border: 2px solid rgba(37,211,102,.76); border-radius: inherit; pointer-events: none; opacity: 0; animation: whatsapp-pulse-strong 2.8s ease-out infinite; }
@keyframes whatsapp-float-strong { 0%,100% { translate: 0 0; scale: 1; } 24% { translate: 0 -13px; scale: 1.09; } 38% { translate: 0 -5px; scale: 1.035; } 52% { translate: 0 -10px; scale: 1.07; } 66% { translate: 0 0; scale: 1; } }
@keyframes whatsapp-shake-strong { 0%,70%,100% { rotate: 0deg; } 75% { rotate: -12deg; } 79% { rotate: 12deg; } 83% { rotate: -10deg; } 87% { rotate: 8deg; } 91% { rotate: -5deg; } 95% { rotate: 0deg; } }
@keyframes whatsapp-pulse-strong { 0%,68%,100% { opacity: 0; transform: scale(.92); } 72% { opacity: .68; } 98% { opacity: 0; transform: scale(1.62); } }

/* Full-bleed service gallery: six touch-friendly tiles in a gapless grid. */
#services.services-section-hollus { padding-block: 0; overflow: hidden; }
#services > .container { width: 100%; max-width: none; margin: 0; padding: 0; }
#services .services-cube-grid { display: grid; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
#services .service-cube { width: 100%; height: clamp(330px,36vw,520px); min-height: 0; margin: 0; border-radius: 0; overflow: hidden; }
#services .cube-front, #services .cube-back, #services .cube-inner { border-radius: 0; }
#services .cube-front { padding: clamp(18px,3vw,38px); }
#services .cube-title { max-width: 13ch; font-size: clamp(22px,3vw,42px); }
#services .cube-expand-icon { top: clamp(12px,2vw,22px); right: clamp(12px,2vw,22px); width: 36px; height: 36px; }
#services .cube-back { padding: clamp(18px,3vw,36px); }
#services .cube-back-title { font-size: clamp(18px,2vw,25px); }
#services .cube-back-list { gap: 7px; }
#services .cube-back-list li { font-size: clamp(12px,1.1vw,14px); line-height: 1.4; }
@media (max-width: 760px) {
  #services .services-cube-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #services .service-cube { height: clamp(330px,100vw,420px); }
  #services .cube-front { padding: 16px; }
  #services .cube-title { max-width: 12ch; font-size: clamp(17px,4.8vw,25px); line-height: 1.12; }
  #services .cube-expand-icon { width: 30px; height: 30px; }
  #services .cube-back { justify-content: flex-start; gap: 0; padding: 14px 12px; }
  #services .cube-back-title { margin-bottom: 8px; font-size: clamp(13px,3.8vw,17px); line-height: 1.2; }
  #services .cube-back-list { flex: 1 1 auto; min-height: 0; gap: 4px; margin: 0 0 10px; }
  #services .cube-back-list li { font-size: clamp(10px,2.8vw,12px); line-height: 1.28; }
  #services .cube-read-more { width: 100%; min-height: 34px; margin-top: auto; padding: 7px 8px; gap: 5px; font-size: clamp(9px,2.5vw,11px); line-height: 1.2; white-space: normal; }
}
@media (max-width: 380px) {
  #services .services-cube-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #services .service-cube { height: 330px; }
  #services .cube-front { padding: 13px; }
  #services .cube-back { padding: 12px 10px; }
  #services .cube-back-list li { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-sweep-title::after { display: none; }
  i[class*="fa"], .process-step-icon, .step-mobile-arrow svg, .step-flow-arrow-svg, .site-header-arrow, #back-to-top-btn i, .floating-whatsapp i { animation: none; }
  .floating-whatsapp, .floating-whatsapp::after { animation: none; will-change: auto; translate: none; rotate: none; scale: none; }
}
/* Full-bleed blueprint backdrop for the quality section, with centered readable content. */
#styles.styles-hollus-section { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(76px,9vw,124px); background: #142b3d; color: #fff; }
#styles .styles-section-backdrop { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
#styles .styles-section-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg,rgba(10,24,37,.87),rgba(18,44,63,.78) 54%,rgba(19,39,57,.85)); }
#styles .styles-section-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; filter: saturate(.82) contrast(1.06); transform: scale(1.015); }
#styles .styles-hollus-container { position: relative; z-index: 1; display: block; width: min(100%,1240px); margin-inline: auto; padding-inline: clamp(20px,5vw,56px); }
#styles .styles-right-block { display: flex; flex-direction: column; align-items: center; max-width: 1060px; margin-inline: auto; text-align: center; }
#styles .styles-hollus-title { max-width: 20ch; margin: 0 auto 22px; color: #fff; font-size: clamp(36px,5.3vw,68px); line-height: 1.06; text-align: center; text-wrap: balance; text-shadow: 0 3px 24px rgba(0,0,0,.45); }
#styles .styles-hollus-desc { max-width: 68ch; margin: 0 auto; color: rgba(255,255,255,.96); font-size: clamp(16px,1.3vw,19px); line-height: 1.72; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.46); }
#styles .styles-dual-checklist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: min(100%,930px); margin: clamp(28px,4vw,44px) auto 0; gap: 12px clamp(24px,5vw,64px); }
#styles .styles-dual-checklist .checklist-col { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; }
#styles .styles-dual-checklist .checklist-col li { display: flex; align-items: flex-start; gap: 11px; padding: 6px 0; color: #fff; font-size: clamp(14px,1.05vw,16px); line-height: 1.5; text-align: left; text-shadow: 0 1px 8px rgba(0,0,0,.42); }
#styles .styles-dual-checklist .checklist-col li i { flex: 0 0 auto; margin-top: .22em; color: #8dd8e5; filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
#styles .styles-action-wrap { align-self: center; margin-top: clamp(24px,3.5vw,38px); }
#styles .styles-action-wrap .btn-gold-hollus { min-height: 52px; padding-inline: 28px; border: 1px solid #fff; border-radius: 999px; background: #fff; color: #17364d; font-weight: 700; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
#styles .styles-action-wrap .btn-gold-hollus:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
@media (max-width: 760px) {
  #styles.styles-hollus-section { padding-block: 66px; }
  #styles .styles-section-backdrop img { object-position: 54% center; }
  #styles .styles-section-backdrop::after { background: linear-gradient(180deg,rgba(10,24,37,.84),rgba(18,44,63,.80) 48%,rgba(10,24,37,.88)); }
  #styles .styles-hollus-container { width: 100%; padding-inline: 22px; }
  #styles .styles-hollus-title { max-width: 18ch; margin-bottom: 16px; font-size: clamp(32px,8vw,48px); line-height: 1.08; }
  #styles .styles-hollus-desc { max-width: 48ch; font-size: 15px; line-height: 1.65; }
  #styles .styles-dual-checklist { grid-template-columns: 1fr; width: min(100%,520px); margin-top: 22px; gap: 0; }
  #styles .styles-dual-checklist .checklist-col { gap: 2px; }
  #styles .styles-dual-checklist .checklist-col li { padding: 6px 0; font-size: 14px; line-height: 1.45; }
  #styles .styles-action-wrap { width: 100%; margin-top: 24px; }
  #styles .styles-action-wrap .btn-gold-hollus { width: 100%; max-width: 360px; min-height: 50px; padding-inline: 18px; }
}
@media (max-width: 380px) {
  #styles.styles-hollus-section { padding-block: 56px; }
  #styles .styles-hollus-container { padding-inline: 18px; }
  #styles .styles-hollus-title { font-size: clamp(30px,8.8vw,36px); }
  #styles .styles-dual-checklist .checklist-col li { font-size: 13px; }
}

/* Customer reviews: photo-backed, high-contrast, lightweight Google-inspired cards. */
#testimonials.testimonials-hollus-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(64px, 8vw, 104px);
  color: #17202a;
  background-color: #182432;
  background-image:
    linear-gradient(115deg, rgba(16, 27, 39, .83), rgba(18, 37, 54, .72) 52%, rgba(15, 27, 40, .84)),
    url("images/04.avif");
  background-position: center 54%;
  background-size: cover;
  background-attachment: fixed;
}
#testimonials .container {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1180px);
}
#testimonials .testimonials-hollus-title {
  max-width: 18ch;
  margin: 0 auto clamp(28px, 4vw, 42px);
  color: #fff;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
#testimonials .testimonials-carousel-wrap {
  display: grid;
  grid-template-columns: 48px minmax(0, 780px) 48px;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 920px;
  margin-inline: auto;
  text-align: left;
}
#testimonials .testimonial-track {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 310px;
}
#testimonials .testimonial-slide {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3.7vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(20, 39, 57, .08);
  border-radius: 24px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .22);
  text-align: left;
}
#testimonials .testimonial-slide.active { transform: translateY(0); }
#testimonials .testimonial-review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 24px;
}
#testimonials .client-avatar-circle {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  margin: 0;
  border: 2px solid #f2f5f7;
  border-radius: 50%;
  background: #e7edf2;
  box-shadow: 0 3px 12px rgba(20, 39, 57, .14);
}
#testimonials .client-avatar-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
#testimonials .testimonial-reviewer { min-width: 0; }
#testimonials .client-name {
  color: #202b36;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
#testimonials .client-role {
  margin-top: 3px;
  color: #647181;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
#testimonials .testimonial-source {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid #e6ebef;
  border-radius: 999px;
  color: #566475;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
#testimonials .client-quote-text {
  max-width: 62ch;
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid #cf3f4d;
  color: #293542;
  font-size: clamp(16px, 1.6vw, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -.01em;
  text-align: left;
  text-wrap: pretty;
}
#testimonials .carousel-nav-btn {
  position: static;
  transform: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: #fff;
  color: #c83243;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-size: 20px;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
#testimonials .carousel-nav-btn:hover {
  transform: translateY(-2px);
  background: #c83243;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}
#testimonials .carousel-nav-prev { grid-column: 1; grid-row: 1; }
#testimonials .carousel-nav-next { grid-column: 3; grid-row: 1; }
#testimonials .carousel-dots {
  grid-column: 2;
  grid-row: 2;
  justify-content: center;
  margin-top: 0;
}
#testimonials .carousel-dot { background: rgba(255, 255, 255, .56); }
#testimonials .carousel-dot.active { background: #fff; }
@media (max-width: 760px) {
  #testimonials.testimonials-hollus-section {
    padding-block: 58px;
    background-position: 58% center;
    background-attachment: scroll;
  }
  #testimonials .container { width: min(100% - 36px, 600px); }
  #testimonials .testimonials-hollus-title {
    max-width: 15ch;
    margin-bottom: 24px;
    font-size: clamp(31px, 8vw, 44px);
    line-height: 1.1;
  }
  #testimonials .testimonials-carousel-wrap {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    grid-template-rows: auto 46px;
    gap: 18px 14px;
  }
  #testimonials .testimonial-track {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 350px;
  }
  #testimonials .testimonial-slide {
    min-height: 350px;
    justify-content: flex-start;
    padding: 24px 21px;
    border-radius: 20px;
  }
  #testimonials .testimonial-review-head { gap: 11px; margin-bottom: 22px; }
  #testimonials .client-avatar-circle { flex-basis: 52px; width: 52px; height: 52px; }
  #testimonials .client-name { font-size: 15px; }
  #testimonials .client-role { font-size: 12px; }
  #testimonials .testimonial-source { padding: 6px 8px; font-size: 10px; }
  #testimonials .client-quote-text { padding-left: 14px; font-size: 16px; line-height: 1.62; }
  #testimonials .carousel-nav-btn { width: 42px; height: 42px; }
  #testimonials .carousel-nav-prev {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }
  #testimonials .carousel-nav-next {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }
  #testimonials .carousel-dots {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}
@media (max-width: 380px) {
  #testimonials .container { width: min(100% - 28px, 600px); }
  #testimonials .testimonial-slide { min-height: 378px; padding: 20px 17px; }
  #testimonials .testimonial-review-head { flex-wrap: wrap; }
  #testimonials .testimonial-source { margin-left: 63px; }
  #testimonials .client-quote-text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #testimonials .testimonial-slide,
  #testimonials .carousel-nav-btn { transition: none; }
}
/* Sticky photo layer keeps the review backdrop still while the section is in view. */
#testimonials.testimonials-hollus-section { background-image: none; }
#testimonials .testimonials-photo-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
#testimonials .testimonials-photo-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(115deg, rgba(16, 27, 39, .83), rgba(18, 37, 54, .72) 52%, rgba(15, 27, 40, .84));
}
#testimonials .testimonials-photo-backdrop img {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  object-fit: cover;
  object-position: center 54%;
}
@media (max-width: 760px) {
  #testimonials .testimonials-photo-backdrop img { object-position: 60% center; }
}