:root{
  --brand: #4c0019;

  --pill-w: 150px;
  --pill-h: 54px;
  --pill-pad-x: 18px;
  --pill-hover-blue: #5eaed6;
  --pill-hover-green: #2a5d34;

  /* Pill radius: single source-of-truth + alias */
  --radius-pill: 6px;
  --pill-radius: var(--radius-pill);

  --header-height: 116px;
  --header-height-mobile: 70px;

  --logo-height: 96px;
  --logo-height-mobile: 52px;
  --logo-pad-y: 8px;
  --logo-pad-y-mobile: 6px;

  --logo-scale-compact: 0.66;
  --logo-shift-compact: -6px;
  --logo-scale-compact-mobile: 0.82;
  --logo-shift-compact-mobile: -2px;

  --container-max: 1200px;
  --container-pad: 20px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --cta-radius: 6px;                 /* keep consistent */
  --cta-border: rgba(255,255,255,0.85);

  --cta-green: var(--pill-hover-green);
  --cta-blue: var(--pill-hover-blue);
  --cta-blue-soft: rgba(94,174,214,0.25);
  
  /* Reviews accent (gold-ish) & Stars */
  --reviews-gold-soft: rgba(214,178,74,0.95);
  --reviews-border: rgba(255,255,255,0.90);
  --reviews-bg: rgba(0,0,0,0.90); 
  --stars-gold-1: #FFD700;
  --stars-gold-2: #FFC700;
  --stars-gold-grad: linear-gradient(90deg, var(--stars-gold-1), var(--stars-gold-2));
  --stars-shadow: 0 1px 1px rgba(0,0,0,0.25); }

/* ======A11Y UTILITIES ===================================================== */
.skip-link { position: absolute; left: -999px; top: 12px; z-index: 9999; padding: 10px 14px; border-radius: 10px; background: #fff; border: 2px solid var(--brand); color: var(--brand); font-weight: 700; text-decoration: none; }
.skip-link:focus{ left: 12px; outline: none; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }
/* === A11Y: screen-reader only text === */
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* === SCROLL REVEAL (section entrance) === */
[data-reveal]{ opacity: 0.2; transform: translateY(20px); transition: opacity .75s ease, transform .75s ease; will-change: opacity, transform; }
[data-reveal].is-in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity: 1; transform: none; transition: none; } }/* Respect reduced motion */

/* ===BASE================================================= */
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; font-family: var(--font-sans); line-height: 1.6; color: #222; background: #fff; }
h1 { font-size: 3rem; line-height: 1.3; margin: 0; } @media (max-width: 600px){ h1 { margin: 0 0 0.45rem 0; font-weight: 600; font-size: 2.4rem; } }
h2 { font-size: 2.2rem; margin: 0 0 0.75rem 0; font-weight: 600; } @media (max-width: 600px){ h2 { margin: 0 0 0.45rem 0; font-weight: 600; font-size: 1.45rem; line-height: 1.3; } }
h3 { font-size: 1.4rem; margin: 0 0 0.50rem 0; font-weight: 550; color: var(--brand); }
h4 { font-size: 1.2rem; margin: 0 0 0.50rem 0; font-weight: 500; color: var(--brand); }

main a:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }
main .cta-primary,main .cta-secondary,main .cta-primary:hover,main .cta-secondary:hover { text-decoration: none; }

p { margin: 6px 0 6px 0; }

/* ===Scroll-margin for anchored sections (header offset)==================== */
:where(#main-content, #applications, #materials){ scroll-margin-top: var(--header-height); }
@media (max-width:1080px){ :where(#main-content, #applications, #materials){ scroll-margin-top: var(--header-height-mobile); } }

/* === STARS === */
.stars-gold { background: var(--stars-gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: var(--stars-shadow); display: inline-block; }
:where(.stars-gold, .hero-trust__stars, .reviews-badge__stars, .testimonial-project::after){ background: var(--stars-gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: var(--stars-shadow); display: inline-block; }
.c-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 18px 18px 16px; box-shadow: 0 10px 22px rgba(0,0,0,.20); }
.c-card h3 { margin: 0 0 8px; }
.c-card p { margin: 0 0 10px; }
.c-card p:last-child { margin-bottom: 0; }
.c-card--link { display: block; text-decoration: none; color: inherit; position: relative; cursor: pointer; }
.c-card--link:focus { outline: none; }
.c-card--link:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, white); outline-offset: 3px; }
.c-card--link h3 { display: inline-flex; align-items: center; gap: 8px; }

/* === CTA COMPONENT === */
.cta-primary,.cta-secondary { position: relative; color: #fff; overflow: hidden; align-items: center; justify-content: center; height: 50px; padding: 0 18px; margin: 0; white-space: nowrap; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: 0.01em; display: inline-flex; border-radius: var(--cta-radius); border: 1px solid var(--cta-border); cursor: pointer; text-align: center; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: transform .4s ease, background-color .4s ease, border-color .4s ease, color .4s ease; text-shadow: 0 1px 1px rgba(0,0,0,0.90), 0 0 6px rgba(0,0,0,0.90); }
.cta-primary { background: var(--cta-green); }
.cta-secondary { background: var(--cta-blue); }
/* inner border base */
.cta-primary::after,.cta-secondary::after { content:""; position:absolute; inset: 2px; border-radius: calc(var(--cta-radius) - 2px); border: 0 solid transparent; pointer-events:none; transition: border-color .25s ease, border-width .25s ease; }
.cta-primary:hover,.cta-secondary:hover,.cta-primary:focus-visible,.cta-secondary:focus-visible { filter: brightness(0.95); transform: translateY(-1px); }
.cta-primary:hover::after,.cta-secondary:hover::after,.cta-primary:focus-visible::after,.cta-secondary:focus-visible::after { border-width: 1px; border-color: var(--cta-border); }
.cta-primary:focus-visible,.cta-secondary:focus-visible { outline: 2px solid rgba(255,255,255,0.95); outline-offset: 3px; }
/* For <a> states */
a.cta-primary:link, a.cta-primary:visited,a.cta-secondary:link, a.cta-secondary:visited { color: #fff; }
/* Back to Top */
#backToTop { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; border: none; background-color: var(--brand); opacity:.5; color: #ffffff; font-size: 22px; cursor: pointer; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 7000; }
#backToTop:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
#backToTop.show { opacity: .7; visibility: visible; transform: translateY(0); }

/* ===HEADER / NAV========================================== */
#site-header { position: sticky; top: 0; z-index: 2000; background: #fff; height: var(--header-height); max-height: 160px; }
#navigation-menu { height: 100%; border-bottom: 0; }
#navigation-menu .nav-inner{ max-width: 1320px; margin: auto; padding: 0 var(--container-pad); height: 100%; display: grid; grid-template-columns: 320px 1fr; align-items: center; column-gap: 28px; }
#site-header.header-compact .logo-wrap { transition-delay: .2s; transform: translateZ(0) translateY(var(--logo-shift-compact)) scale(var(--logo-scale-compact));}
#site-header:not(.header-compact) .logo-wrap{ transition-delay: 0ms; }

/*===HEADER LOGO=========================================== */
.logo-wrap { background: #fff; padding: var(--logo-pad-y) 1.1rem; border-radius: 6px; display: inline-flex; align-items: center; max-width: 100%; transform-origin: left center; transform: translateZ(0) translateY(0) scale(1); transition: transform .28s ease; }
.logo-wrap img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(var(--logo-height), calc(var(--header-height) - (var(--logo-pad-y) * 2))); }

/* DESKTOP LINKS */
.nav-brand { display: flex; align-items: center; position: relative; z-index: 1200; min-width: 0; }
.nav-home { display: flex; align-items: center; text-decoration: none; color: inherit; }
.nav-links { justify-self: end; list-style: none; display: flex; gap: 10px; align-items: center; margin: 0; padding: 0; font-size: 16px; font-weight: 600; }
.nav-links > li { position: relative; flex: 0 0 var(--pill-w); height: var(--pill-h); }

.nav-btn { display: inline-flex; align-items: center; height: var(--pill-h); padding: 0 6px; line-height: 1.2; white-space: nowrap; text-decoration: none; font-size: 16px; font-weight: 600; cursor: pointer; }
button.nav-btn { background: none; border: 0; }

.nav-links > li > a { position: relative; width: 100%; height: var(--pill-h); justify-content: center; padding: 0 var(--pill-pad-x); border-radius: var(--pill-radius); border: 1px solid rgba(0,0,0,0.18); background: #fff; color: var(--brand); text-decoration: none; transform: none; transition: border-color .25s ease, color .25s ease; }
.nav-links > li > .nav-btn { position: relative; width: 100%; height: var(--pill-h); justify-content: center; padding: 0 var(--pill-pad-x); border-radius: var(--pill-radius); border: 1px solid rgba(0,0,0,0.18); background: #fff;
  color: var(--brand); text-decoration: none; transform: none; transition: border-color .25s ease, color .25s ease; }
.nav-links > li > a:hover { text-decoration: none; }
.nav-links > li > a::after,.nav-links > li > .nav-btn::after { content: ""; position: absolute; inset: 2px; border-radius: calc(var(--pill-radius) - 2px); border: 0 solid transparent; pointer-events: none; transition: border-color .25s ease, border-width .25s ease; }

/* BLUE — outer border */
.nav-links > li.nav-blue:hover > a{ border-color: var(--pill-hover-blue); }
.nav-links > li.nav-blue:hover > .nav-btn{ border-color: var(--pill-hover-blue); }
.nav-links > li.nav-blue:focus-within > a{ border-color: var(--pill-hover-blue); }
.nav-links > li.nav-blue:focus-within > .nav-btn{ border-color: var(--pill-hover-blue); }
.nav-links > li.nav-blue > .nav-btn[aria-expanded="true"]{ border-color: var(--pill-hover-blue); }
/* BLUE — inner border (::after) */
.nav-links > li.nav-blue:hover > a::after{ border-width: 1px; border-color: var(--pill-hover-blue); }
.nav-links > li.nav-blue:hover > .nav-btn::after{ border-width: 1px; border-color: var(--pill-hover-blue); }
.nav-links > li.nav-blue:focus-within > a::after{ border-width: 1px; border-color: var(--pill-hover-blue); }
.nav-links > li.nav-blue:focus-within > .nav-btn::after{ border-width: 1px; border-color: var(--pill-hover-blue); }
.nav-links > li.nav-blue > .nav-btn[aria-expanded="true"]::after{ border-width: 1px; border-color: var(--pill-hover-blue); }

/* GREEN — outer border */
.nav-links > li.nav-green:hover > a{ border-color: var(--pill-hover-green); }
.nav-links > li.nav-green:hover > .nav-btn{ border-color: var(--pill-hover-green); }
.nav-links > li.nav-green:focus-within > a{ border-color: var(--pill-hover-green); }
.nav-links > li.nav-green:focus-within > .nav-btn{ border-color: var(--pill-hover-green); }
/* GREEN — inner border (::after) */
.nav-links > li.nav-green:hover > a::after{ border-width: 1px; border-color: var(--pill-hover-green); }
.nav-links > li.nav-green:hover > .nav-btn::after{ border-width: 1px; border-color: var(--pill-hover-green); }
.nav-links > li.nav-green:focus-within > a::after{ border-width: 1px; border-color: var(--pill-hover-green); }
.nav-links > li.nav-green:focus-within > .nav-btn::after{ border-width: 1px; border-color: var(--pill-hover-green); }
.nav-links > li.nav-tel > .nav-btn{ font-size: 15px; letter-spacing: 0.01em; }

/* === FOCUS STYLES Unified nav focus ring ===================================*/
:where(.nav-links a, .nav-btn, .has-dropdown > .dropdown a):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.has-dropdown > .dropdown a:focus-visible { outline-offset: 2px; }

/* DROPDOWNS */
.has-dropdown > .dropdown { position: absolute; top: 100%; left: 50%; transform: translate3d(-50%, 10px, 0); background: #fff; min-width: 220px; box-shadow: 0 12px 22px rgba(0,0,0,0.10); border-radius: 0 0 6px 6px; padding: 0.5rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; z-index: 999; overflow: hidden; }
.has-dropdown > .dropdown li { padding: 0; list-style: none; }
.has-dropdown > .dropdown a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 1.25rem; line-height: 1.2; color: #222; font-size: 0.95rem; text-decoration: none; border: 1px solid rgba(0,0,0,0.10); border-radius: var(--radius-pill); margin: 6px 10px; background: transparent; transform: none; transition: border-color .25s ease, color .25s ease; }
.has-dropdown > .dropdown a::after { content: ""; position: absolute; inset: 2px; border-radius: calc(var(--radius-pill) - 2px); border: 0 solid transparent; pointer-events: none; transition: border-color .25s ease, border-width .25s ease; }
.has-dropdown > .dropdown a:hover,.has-dropdown > .dropdown a:focus { background: transparent; border-color: var(--pill-hover-blue); color: #222; }
.has-dropdown > .dropdown a:hover::after,.has-dropdown > .dropdown a:focus::after { border-width: 1px; border-color: var(--pill-hover-blue); }

.has-dropdown > .nav-btn[aria-expanded="true"] + .dropdown{ opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(-50%, 0, 0); transition: opacity .25s ease, transform .25s ease, visibility 0s; }
@media (hover:hover){ .has-dropdown:hover > .dropdown{ opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(-50%, 0, 0); transition: opacity .25s ease, transform .25s ease, visibility 0s; } }

/* MOBILE TOGGLE + OVERLAY */
#mobile-toggle { justify-self: end; display: none; padding: 8px; gap: 5px; border: 1px solid rgba(0,0,0,0.18); border-radius: 999px; box-shadow: 0 10px 22px rgba(0,0,0,0.10); cursor: pointer; z-index: 3001; background: #fff;}
#mobile-toggle span { width: 26px; height: 3px; background: var(--brand); display: block; transition: transform .25s ease, opacity .25s ease; }
#mobile-toggle.active span:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
#mobile-toggle.active span:nth-child(2){ opacity: 0; }
#mobile-toggle.active span:nth-child(3){ transform: rotate(-45deg) translate(6px,-6px); }
#mobile-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-pill); }
body.menu-open { overflow: hidden; }

/* ================MOBILE NAV ========================== */
#mobile-nav { position: fixed; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; background: rgba(0,0,0,0.55); z-index: 3000; }
#mobile-nav.active { opacity: 1; visibility: visible; pointer-events: auto; }
.mnav { position: relative; height: 100%; width: min(520px, 92vw); margin-left: auto; margin-top:0; background: #fff; display: flex; flex-direction: column; border-left: 3px solid var(--brand); border-bottom: 3px solid var(--brand); box-shadow: -18px 0 40px rgba(0,0,0,0.25); transform: translateX(100%); transition: transform .28s ease; }
#mobile-nav.active .mnav{ transform: translateX(0); } /* when overlay is active: slide in */
#mobile-nav[hidden] { display: none !important; } /* Mobile nav: true closed state */
@media (max-width:1080px){ .mnav__close { display: none; } } /* Prevent the panel close button from overlapping the header toggle */
.mnav__top{ display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 12px 14px; background: var(--brand); }
.mnav__spacer { width: 44px; height: 44px; }
.mnav__top .mnav__cta { justify-self: center; }
.mnav__close{ position: static; justify-self: end; width: 44px; height: 44px; margin: 0; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; background: rgba(255,255,255,0.10); color: #fff; font-size: 18px; cursor: pointer; }
.mnav__close:focus-visible { outline: 2px solid rgba(255,255,255,0.95); outline-offset: 3px; }
.mnav__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mnav__cta--green { background: var(--pill-hover-green); color: #fff; border: 1px solid rgba(255,255,255,0.85); }
.mnav__cta:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.mnav__group { display: grid; grid-template-columns: 1fr 120px; column-gap: 1px; align-items: stretch; padding: 9px; border-radius: 6px; background: rgba(255,255,255,0.06); }
.mnav__title { display: grid; place-items: center; align-self: stretch; text-align: center; margin: 0; padding: 6px 6px; background: var(--cta-blue-soft); color: #00000065; font-size: 0.85rem; font-weight: 900;  letter-spacing: 0.06em; text-transform: uppercase; }
.mnav__list { display: grid; gap: 3px; padding: 3px 3px; background: #fff; border-top: 1px solid var(--pill-hover-blue); border-right: 1px solid var(--pill-hover-blue); border-bottom: 1px solid var(--pill-hover-blue); }
.mnav__list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; color: #222; font-size: 1rem; font-weight: 600; }
.mnav__list a:hover { background: rgba(76,0,25,0.04); }
.mnav__list a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (max-width:1080px){ :root{ --logo-scale-compact: var(--logo-scale-compact-mobile); } /* Mobile-only: show toggle, hide desktop links */
  .nav-links { display: none; }
  #mobile-toggle { display: flex; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; }
  #navigation-menu .nav-inner { grid-template-columns: 1fr auto; column-gap: 12px; padding: 0 12px; }
  .logo-wrap { padding: var(--logo-pad-y-mobile) 0.6rem; }
  .logo-wrap img { max-height: min(var(--logo-height-mobile), calc(var(--header-height-mobile) - (var(--logo-pad-y-mobile) * 2))); }
  #site-header { height: var(--header-height-mobile); }}

/*=== STRAPLINE ============================================================= */
.strapline{ background-color: #4c0019; height: 44px; color: #ffffff; text-align: left; padding: 8px 0 10px; } 
@media (max-width: 768px){ .strapline{ display: none; } }

/*=== HERO ================================================================== */ 
.hero { position: relative; display: flex; align-items: flex-start; justify-content: center; height: 750px; min-height: 0; padding-top: 20px; padding-bottom: 0; margin:0; }
@media (max-width: 900px){ .hero{ height: auto; min-height: min(82svh, 760px); padding-top: 18px; padding-bottom: 56px; } }
/* === HIDER PANEL === */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* === HIDER PANEL (RESPONSIVE) === */
.hero-media::after { content:""; position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; width: clamp(0px, calc((100vw - 1300px) * 0.55), 250px); background: var(--brand); pointer-events: none; }
@media (max-width: 768px){.hero-media::after{ width: 0; height: 0; background: none; } }
.hero-media::before { content:""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 38%, rgba(0,0,0,0.00) 62% ); }
/* === HERO OVERLAY - H1, CTA'S === */ 
.hero-inner { position: relative; z-index: 2; width: min(var(--container-max), calc(100% - (var(--container-pad) * 2))); margin: 0 auto; text-align: left; }
.hero-copy { padding: 0; color: #fff; }
.hero-title { max-width: 73ch; line-height: 1.15; margin: 0 0 1rem 0; text-shadow: 0 2px 18px rgba(0,0,0,0.55); }
.hero-title__line2 { display: inline; font-size: 2rem;}
.hero-copy p { font-size: 1.05rem; margin-bottom: .5rem; }
.hero-copy-panel { letter-spacing: -0.01em; max-width: none; width: 100%; padding: 0; background: transparent; }
.hero-copy-inner { padding-top: 12px; transform: translateY(var(--hero-text-y, 0px));  transition: transform 0.1s linear; }
.hero-intro { max-width: 73ch; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,0.55); }
.hero-trust { display: inline-flex; align-items: center; gap: 10px; width:250px;  margin-top: 12px; padding: 10px 12px; border-radius: 6px; background: rgba(0,0,0,0.40); color: rgba(250,250,250,0.65); font-size: 0.95rem; font-weight: 600; line-height: 1; }
@media (max-width: 600px) {
  .hero-title { line-height: 1.18; margin: 0 0 0.55rem 0; }
  .hero-title__line2 { display: block; font-size: 1.35rem; font-weight: 600; opacity: 0.92; margin-top: 3px; } }
@media (max-width: 768px) {
  .hero-title { max-width: 42ch; } 
  .hero-copy p { font-size: .96rem; }
  .hero-copy-panel { max-width: 100%; padding: 15px 0 15px; border: 0; background: none; } .hero-intro { letter-spacing: -0.015em; max-width: 42ch; }
  .hero-trust { display: none; } }

/* SHORT CUT FROM HERO TO SECTION 3 */
.cta-jump { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 16px; border-radius: var(--cta-radius); border: 1px solid var(--pill-hover-blue); background: rgba(0,0,0,0.30); color: #fff; font-weight: 600; transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
.cta-jump:hover,.cta-jump:focus-visible{ transform: translateY(-1px); border-color: var(--pill-hover-blue); background: rgba(0,0,0,0.26); }
.cta-jump:focus-visible{ outline: 2px solid rgba(255,255,255,0.95); outline-offset: 3px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1rem; }
@media (max-width: 768px){ .hero-actions{ margin-top: 6rem; } }
.hero-actions .cta-primary,.hero-actions .cta-secondary,.hero-actions .cta-jump { width: 170px; height: 60px; padding: 0; white-space: wrap; }

.cta-note{ margin: 0; padding: 10px 16px; max-width: 46ch; font-size: 14px; line-height: 1.4; font-weight: 500; color: #fff; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 10px; }
@media (max-width: 600px){.cta-note{ font-size: 13px; padding: 8px 14px; max-width: 100%; } }

/* ======= HERO OVERLAY - Desktop layout: ======*/
@media (min-width: 900px){ 
  .hero-inner { position: relative; z-index: 2; width: min(var(--container-max), calc(102% - (var(--container-pad) * 2))); }  
  .hero-copy-inner { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "copy  copy" "trust trust" "ctas  ."; column-gap: 40px; row-gap: 16px; align-items: start; }
  .hero-copy-panel { grid-area: copy; width: 100%; }
  .hero-trust { grid-area: trust; margin-top: 0; justify-self: start; }
  .hero-actions { grid-area: ctas; margin-top: 0; } }

/* ===== REVIEWS GALLERY / COURTESY / INSTALLATION LINK ===== */
.reviews-bar { width:100%; margin:0; padding:0; }
.reviews-badge { position: relative; width: 100%; margin: 0; border-radius: 0; display: grid; grid-template-columns: 250px 1fr; align-items: stretch; background: var(--reviews-bg); border-top: 1px solid var(--reviews-border); border-bottom: 1px solid var(--reviews-border); color: #fff; overflow: hidden; isolation: isolate; transition: transform .25s ease, background-color .25s ease, border-color .25s ease; }
.reviews-badge:hover,.reviews-badge:focus-within { background-color: rgba(0,0,0,0.92); transform: none; border-color: rgba(255,255,255,0.85); }
/* =====  SHEEN  ===== */
.reviews-badge::after { content:""; position:absolute; inset: 2px; border: 0 solid transparent; pointer-events:none; z-index: 2; transition: border-color .25s ease, border-width .25s ease; }
.reviews-badge::before { content:""; position:absolute; inset: -60% -25%; background: linear-gradient( 120deg, rgba(255,255,255,0.00) 42%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.00) 58%); transform: translateX(-22%) rotate(-6deg); opacity: 0.45; pointer-events:none; z-index: 1; transition: transform .25s ease, opacity .25s ease; }
.reviews-badge:hover::before,.reviews-badge:focus-within::before { transform: translateX(10%) rotate(-6deg); opacity: 0.85; }
.reviews-badge:hover::after,.reviews-badge:focus-within::after { border-width: 1px; border-color: var(--reviews-gold-soft); }
/* ===== Cell 1: google stars rated=== */
.reviews-google{ display: grid; place-content: center; padding: 20px 14px; text-align: center; border-right: 1px solid rgba(255,255,255,0.12); }
.reviews-google__label { font-size: 1.1rem; font-weight: 600; line-height: 1; }
.reviews-badge__stars { animation: none; font-size: 1.45rem;}
.reviews-badge:hover .reviews-badge__stars,.reviews-badge:focus-within .reviews-badge__stars { animation: starPulse 1.5s ease infinite alternate; }
@keyframes starPulse{ 0% { transform: scale(1); } 50%{ transform: scale(1.1); } 100%{ transform: scale(1); } }
/* ===== Cell 2: link area ===== */
.reviews-link { display: grid; grid-template-rows: auto auto; align-content: center; row-gap: 8px; padding: 10px 16px; color: inherit; min-height: 100%; }
.reviews-link,.reviews-link:hover { text-decoration: none; }
.reviews-link:focus-visible { outline: 2px solid rgba(255,255,255,0.95); outline-offset: 3px; }
.reviews-credit { font-size: .8rem; font-weight: 350; opacity: .60; letter-spacing: .06rem; line-height: 1.2; margin: 0; }
.reviews-gallery { margin: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 1.3rem; font-weight: 400; opacity: .85; }
@media (max-width: 640px){ .reviews-badge{ grid-template-columns: max-content 1fr; }
  .reviews-google{ padding: 12px 10px; min-width: 0; }
  .reviews-google__label{ font-size: 0.95rem; }
  .reviews-badge__stars{ font-size: 1.15rem; }
  .reviews-credit { display: none; }
  .reviews-gallery { margin: 0; font-size: 0; border-top: 0; padding-top: 0; margin-top: 0; text-align: center; }
  .reviews-gallery::before { content: "Review & Installation"; display: block; font-size: 1.2rem; font-weight: 600; line-height: 1.15; opacity: 0.92; }
  .reviews-gallery::after { content: "Gallery"; display: block; margin-top: 4px; font-size: 1.5rem; font-weight: 800; line-height: 1.05; letter-spacing: 0.01em; opacity: 0.98; } }
/* ===== REVIEWS BAR — TRUST VARIANT (3-CELL) =============================== */
/* Uses the same .reviews-badge base from the original block (Block A). */
.reviews-badge--trust{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Trust cells */
.reviews-badge--trust .trust-cell { display: grid; place-items: center; padding: 14px 16px; position: relative; z-index: 3; border-right: 1px solid rgba(255,255,255,0.12); }
.reviews-badge--trust .trust-cell:last-child { border-right: 0; }
/* Badge layout inside trust cells */
.trust-badge { display: grid; grid-template-columns: 62px 1fr; column-gap: 12px; align-items: center; text-align: left; width: min(340px, 100%); }
.trust-ico { width: 54px; height: 54px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; background: rgba(255,255,255,0.06); }
.trust-ico svg { display: block; fill: var(--reviews-gold-soft); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.trust-stack{ display: grid; row-gap: 2px; }
.trust-head { display: grid; row-gap: 2px; }
.trust-title { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1.05; }
.trust-subtitle { display: block; font-size: 1.05rem; font-weight: 700; opacity: 0.90; line-height: 1.05; }
.trust-meta { display: block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; opacity: 0.65; letter-spacing: 0.02em; line-height: 1.15; }
/* Mobile: trust bar stacks */
@media (max-width: 640px){ .reviews-badge--trust { grid-template-columns: 1fr; }
  .reviews-badge--trust .trust-cell { border-right: 0; border-top: 1px solid rgba(255,255,255,0.12); padding: 14px 12px; }
  .reviews-badge--trust .trust-cell:first-child { border-top: 0; }
  .trust-badge { grid-template-columns: 54px 1fr; width: 100%; }
  /* Merge title + subtitle to one line */
  .trust-head { display: inline; }
  .trust-title,.trust-subtitle { display: inline; }
  .trust-subtitle::before { content: " - "; font-weight: 600; opacity: 0.95; } }

/* === ARTICLE HERO ========================================================= */
.article-hero-kicker { margin:0; padding:9px 0 9px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform: uppercase; color:#5b6c67; }
.article-title { font-size: 3rem; line-height: 1; }
@media (max-width: 768px) {
  .article-hero-kicker { position: absolute; width:100%; top:0; }
  .article-title { font-size: 2.1rem; letter-spacing: -.02em; }
  .article-header-browse .browse { margin-top: 18px; } }
/* === INTRO FACTS GRID ===================================================== */
.article-intro-facts { padding: 9px; border: 1px solid #e5e5e5; border-radius: 6px; width:360px; background: #ffffff80; transition: 0.2s ease; }
.article-intro-facts span { display: block; font-size: 0.8rem; color: #777; margin-bottom: 3px; border-bottom: 1px solid #ddd; text-transform: uppercase; letter-spacing: -0.05em; }
.article-intro-facts strong { font-size: 1rem; padding-bottom: 9px; }
.article-intro-facts:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
@media (max-width: 768px) {
  .article-intro-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 2fr)); gap: 6px; margin-top: 6px; } }



/* ===LAYOUT PRIMITIVES===================================== */
.s { padding: 40px 0 40px; width: 100%; } /* SECTION PADDING */

.t-light { background: #f7f7f7; }
.t-mid { background: #f2f1ee; }
.t-dark { background: #e6e6e6; }
.t-darker { background: #dbdbdb; }

.l-container { width: min(var(--container-max), calc(100% - (var(--container-pad) * 2))); margin: 0 auto; }

.wht { color: #fff; }
.wht a { color: var(--pill-hover-blue); text-decoration: none; }
.wht a:hover { color: #fff; transition: color .2s ease; }
.blk { color: #000; }
.blu { color: #73b9ee; }

.title-left h2,.title-left .lead { text-align: left; }
.title-right h2,.title-right .lead { text-align: right; }
.title-h3 { color: #fff; text-align: right; }

.sub-title-card { padding: 27px 0 9px 0; }
.sub-title-card h3 { color: #fff; }

.lead { margin: 0 0 8px 0; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4;  }
.sub-lead { font-size: 1.09rem; font-weight: 400; padding: 9px 0 9px 0; max-width: 108ch; }

.para { margin: 9px 0 18px 0; max-width: 117ch; letter-spacing: -0.01em; font-weight: 400; } /* PARAGRAPH PADDING TOP & BOTTOM */

.bullets { list-style: none; padding-left: 0; margin: 0; }
.bullets li { position: relative; margin-left: 27px; }
.bullets li::before { content: "➤"; position: absolute; left: -21px; top: 0.1em; color: inherit; font-size: 0.9em; }
.wht .bullets { color: #fff; }
.bullet-copy { font-size: .95rem; font-weight: 300; }

.spacer { padding: 30px 0 0 0; }

@media (max-width: 900px){ 
    .lead { margin: 0 0 9px 0; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; } 
    .sub-lead { padding: 9px 0 9px; font-size: 1.02rem; font-weight: 400; line-height: 1.3;  }
    .para { margin: 9px 0 18px 0; font-size: .99rem; line-height: 1.3; font-weight: 300; } }

.sub-title-card.bullets li::before { content: "➤"; position: absolute; left: 0; top: 0.1em; color: #fff; font-size: 0.9em; }
.page-title .lead-sidebar { font-size: 16px; border-left: 2px solid #ffffff80; margin: 10px; padding: 9px 0 9px 9px; }


/* ======================= SECTION MODULES ================================== */

/* === SIDEBAR 3 HORIZONTAL ROW  === */
.sidebar-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.sidebar-item { width: 100%; min-height: 222px; display: grid; place-items: center; padding: 15px; background: transparent; }
.sidebar { width: 100%; border-left:2px solid var(--brand); padding: 9px; display: flex; flex-direction: column; justify-content: center; }
.sidebar h3 { margin: 0 0 9px; line-height: 1.15; }
.sidebar p { margin: 0; line-height: 1.3; border-top: 2px solid rgba(0,0,0,0.12); }
.sidebar-br { display: block; }
@media (max-width: 640px){
  .sidebar-card { grid-template-columns: 1fr; gap: 12px; }  
  .sidebar-item { min-height: 150px; padding: 9px; }
  .sidebar p { padding-top: 9px; } }

/* === SERVICE FLOW === */
.c-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; width: 100%; }
.c-flow__step{ background: linear-gradient(90deg, var(--pill-hover-green) 0%, var(--pill-hover-blue) 100%);  opacity: .6; min-height: 50px; display: grid; place-items: center; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 2px 2px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.35); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; }
.c-flow__step.is-first { clip-path: polygon( 0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 0 50% ); }
.c-flow__step.is-mid { clip-path: polygon( 0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50% ); }
.c-flow__step.is-last { clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, 15px 50% ); }
.c-flow__step--nudge{ padding-left: 12px; }
@media (max-width: 520px){ .c-flow__step{ min-height: 40px; font-size: .8rem; letter-spacing: -0.05em; } }

/* === SAWBLADE BACGROUND === */
.s3 { position: relative; overflow: hidden; isolation: isolate; }
.s3::before,.s3::after { content:""; position: absolute; width: 520px; height: 520px; background-image: url("/img/diamond-saw-blade.webp"); background-repeat: no-repeat; background-size: contain; opacity: 0.05; pointer-events: none; z-index: 0; transform: rotate(-8deg); }
.s3::before { top: -120px; left: -140px; }
.s3::after { bottom: -120px; right: -140px; }
.s3 .l-container { position: relative; z-index: 1; }

/* === IMAGEBAR 3 HORIZONTAL === */
.imagebar-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.imagebar-item { position: relative; display: grid; grid-template-rows: auto auto 1fr; border-radius: 0 0 27px 27px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.10); }
.imagebar-image { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; border-bottom: 1px solid rgba(0,0,0,.10); }
.imagebar-image > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.03); transition: transform .35s ease; filter: saturate(1.02) contrast(1.03); }
.imagebar-image::after{ content:""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 14px 26px rgba(0,0,0,.18); pointer-events: none; }
@media (hover:hover){ .imagebar-item:hover .imagebar-image > img{ transform: scale(1.06); } }
.imagebar-head { display: flex; justify-content: center; transform: translateY(-2px); border-top: 3px solid var(--brand); background: rgba(255,255,255,.20); }
.imagebar-title { display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; min-width: 191px; max-width: calc(100% - 28px); background: var(--brand); color: rgba(255,255,255,0.90); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.05em; white-space: nowrap; text-align: center; border-radius: 0 0 6px 6px; transform: translateY(-3px); box-shadow: 0 9px 18px rgba(0,0,0,.20); }
.imagebar-body { padding: 9px; display: grid; gap: 9px; }
@media (max-width: 900px){ 
  .imagebar-card { grid-template-columns: 1fr; }
  .imagebar-image { aspect-ratio: 16 / 9; } }
@media (max-width: 640px){
  .imagebar-card { gap: 9px; }
  .imagebar-body { padding: 15px 15px 15px; }
  .imagebar-title { font-size: 1.15rem; min-width: 191px; } }

/* === WHY CHOOSE & SHOWROOM === */
.why-media { margin-left:0; margin-top:40px; width: 100%; height:400px; position: relative; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,.1); background: #fff; }
.why-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.why-overlay { position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 2; padding: 9px 9px 9px; border-radius: 6px; background: rgba(0,0,0,0.30); color: rgba(255,255,255,0.80); }
.why-overlay h3 { font-size: 1.5rem; margin: 0 0 6px 0; color: #fff; }
.why-overlay p {margin: 0; color: rgba(255,255,255,0.85); line-height: 1.2; max-width: 72ch; }
@media (max-width: 640px){ .why-media { margin-top: 18px; height: 320px; } .why-overlay { padding: 10px; } .why-overlay h3 { font-size: 1.25rem; } }

/* === STONE SURFACE MATERIALS ========================================== */
.material-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:18px; margin:30px 0 36px; align-items:stretch; }
.material-card { position:relative; min-height: 180px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--brand); border:1px solid rgba(255,255,255,.24); border-radius:6px; overflow:hidden; }
.material-card::after { content:""; position: absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius: 9%; background:radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 70%); pointer-events:none; z-index:0; }
.material-card:hover { background: var(--brand); opacity: .9; }
.material-card-link { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; min-height: 180px; height:100%; padding: 9; color: inherit; text-decoration: none; }
.material-copy { position:relative; z-index:2; display:flex; flex-direction:column; gap: 9px; margin: 18px; color:rgba(255,255,255,.9); }
.material-copy h3 { margin: 0; font-size:1.7rem; line-height:1.05; font-weight:700; letter-spacing:-0.03em; color:#fff; }
.material-copy p { margin: 0; font-size: 1rem; line-height:1.55; color:rgba(255,255,255,.82); }
.material-kicker { display:inline-block; margin-bottom: 6px; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.68); }
.material-arrow { position:absolute; right:18px; top: 18px; width: 153px; height:63px; opacity:.18; pointer-events:none; transform:translate3d(0,0,0); transform-origin:center; transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .38s ease; z-index:1; }
.material-arrow svg { display:block; width:100%; height:100%; }
.material-arrow path { fill:none; stroke:#fff; stroke-width:5.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.material-card:hover .material-arrow,.material-card:focus-within .material-arrow { transform:translate3d(50px, 0, 0); opacity:.26; }
@media (max-width: 640px){  
  .material-grid { grid-template-columns:1fr; gap:16px; margin:24px 0 30px; }
  .material-card { min-height:auto; border-radius: 6px; }
  .material-card-link { min-height:180px; }
  .material-copy { margin: 18px; }
  .material-copy h3 { font-size:1.45rem; }
  .material-copy p { max-width:none; font-size:.98rem; }
  .material-arrow { right:27px; top: 9px; width:120px; height:63px; }
  .material-card:hover .material-arrow, .material-card:focus-within .material-arrow { transform:translate3d(50px, 0, 0); } }

/* === REASSURANCE TESTIMONIAL === */
#testimonial-quote { position:relative; text-align:center; padding:33px; margin:0 auto; max-width:1000px; background:rgba(255,255,255,0.92); border-radius:9px; border:1px solid rgba(0,0,0,0.14); box-shadow:0 14px 34px rgba(0,0,0,0.20); overflow: hidden; }
#testimonial-quote::before { content:""; position:absolute; inset: 10px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--brand) 18%, rgba(0,0,0,0.10)); pointer-events:none; opacity: 0.9; }
#testimonial-quote::after { content:""; position:absolute; left: 18px; right: 18px; top: 9px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0), var(--reviews-gold-soft), rgba(255,255,255,0) ); opacity: 0.85; pointer-events:none; }
.testimonial-project { display: inline-block; margin: 0 auto 16px; padding: 0 0 12px; font-weight: 600; font-style: italic; font-size: 1.1rem; letter-spacing: 0.1em; color: rgba(0,0,0,0.56); border-bottom: 1px solid rgba(0,0,0,0.12); }
.testimonial-project::after { content: none; }
.testimonial-quote { margin: 6px auto 6px; max-width: 75ch; font-size: 1.1rem; line-height: 1.75; font-style: italic; color: rgba(0,0,0,0.86); position: relative; }
.testimonial-quote::before { content: none; font-size: 2.6rem; line-height: 1; color: var(--brand); opacity: 0.55; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); }
.testimonial-author::before { content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(320px, 70%); height: 2px; border-radius: 999px; background: linear-gradient( 90deg, rgba(255,255,255,0), var(--reviews-gold-soft), rgba(255,255,255,0) ); opacity: 0.9; }
.testimonial-author{ position: relative; margin-top: 12px; padding-top: 16px; font-weight: 800; font-style: normal; letter-spacing: 0.02em; color: var(--brand); }
.testimonial-landing-image { width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; margin-bottom: 12px; }
.testimonial-image img { width:100%; height:auto; display:block; overflow:hidden; object-fit:cover; }
@media (max-width: 768px){
  #testimonial-quote { padding: 24px 16px 22px; border-radius: 12px; }
  #testimonial-quote::before { inset: 8px; border-radius: 9px; }
  #testimonial-quote::after { left: 14px; right: 14px; top: 6px; }
  .testimonial-quote { font-size: 1rem; line-height: 1.6; }
  .testimonial-quote::before { font-size: 2.2rem; top: -14px; } }

/* === TRUST IMAGES === 100% WIDTH IMAGES === */
.img-band { background: #fff; }
.img-band img { width: 100%; max-height: 500px; object-fit: cover; object-position: center; display: block; }
@media (max-width: 900px){ .img-band img { width:100%; height:auto; } } 

/* === FAQ === */
.faq-item { background: #fff; border: 2px solid var(--pill-hover-blue); border-radius: 6px; margin: 10px 0; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.faq-item summary { list-style: none; cursor: pointer; padding: 14px 14px; font-weight: 600; color: var(--brand); position: relative; transition: background .3s ease; }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: translateY(-50%) rotate(45deg); transition: transform .3s ease; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(225deg); }
.faq-item[open] { border-color: var(--brand); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.faq-item p{ margin: 0; padding: 0 14px 14px; color: #222; }
.faq-item summary:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }
.faq-item:hover{ border-color: var(--pill-hover-blue); }
.faq-content { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease, opacity .3s ease; opacity: 0; }
.faq-item[open] .faq-content { grid-template-rows: 1fr; opacity: 1; }

/* === RESOURCES === */
.resource { display: block; margin: 18px 0 18px 0; background: #fff; border: 2px solid var(--pill-hover-blue); border-radius: 9px; padding: 18px; box-shadow: 0 9px 21px rgba(0,0,0,.21); text-decoration: none; color: inherit; position: relative; cursor: pointer;}
.resource p {border-top: 1px solid #ddd; }
.resource span { font-size: 1.3rem; line-height: 1.2rem; color: var(--pill-hover-blue); } 
.resource-link { border-radius: 9px; background: #fff; transition: border-color .25s ease, color .25s ease, transform .25s ease; text-decoration: none; }
.resource-link:focus { outline: none; }
.resource-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, white); outline-offset: 3px; }
.resource-link::after{ content: ""; position: absolute; inset: 2px; border-radius: calc(9px - 2px); border: 0 solid transparent; pointer-events: none; transition: border-color .25s ease, border-width .25s ease; }
.resource-link:hover, .resource-link:focus-within{ border-color: var(--pill-hover-blue); }
.resource-link:hover::after, .resource-link:focus-within::after{ border-width: 1px; border-color: var(--pill-hover-blue); }
.arrow { font-size: 18px;}

/* === 9 === SUPPLIERS ===*/
#supplier-logos { padding: 9px; border-radius: 6px; background: #ffffff; }
#supplier-logos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; }
#supplier-logos-grid img { width: 100%; height: 50px; object-fit: contain; background: #fff; border: 1px solid rgba(0,0,0,0.10); border-radius: 6px; padding: 8px; box-shadow: 0 12px 26px rgba(0,0,0,.25); }

@media (max-width: 900px) { #supplier-logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s9-intro { font-weight: 700; border-left: 2px solid var(--brand); padding: 0 0 0 12px; }
.s9 .supplier-base { text-align: center; font-weight: 500; padding-bottom: 20px; padding-top: 20px; }
.s9-cta { margin-top:60px; max-width: 335px; }

/* === SECTION DIVIDER TRIM ================================================= */
.section-trim { width: 100%; height: 3px; position: relative; }
.section-trim::before,.section-trim::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; }
.section-trim::before { top: 0; background: var(--reviews-gold-soft); }
.section-trim::after { bottom: 0; background: var(--brand); }

/* ===================== MOBILE SWEEP: SPACING / DENSITY ==================== */
@media (max-width: 768px){ 
  .hero { min-height: min(74svh, 680px); padding-top: 14px; padding-bottom: 34px; }
  .hero-title { font-size: 2.15rem; }
  .hero-title__line2 { font-size: 1.15rem; }
  .hero-intro { font-size: 0.95rem; line-height: 1.45; }
  .hero-actions { margin-top: 1.25rem; gap: 10px; } }
@media (max-width: 640px){
  :root { --container-pad: 16px; }
  .c-card { padding: 16px 14px 14px; border-radius: 12px; }
  h2 { margin: 0 0 0.55rem 0; }
  p { margin: 0 0 0.85rem 0; }
  .reviews-google { padding: 10px 10px; }
  .reviews-link { padding: 10px 12px; } }
  
/* === FOOTER =============================================================== */
#site-footer{ background-color: #4c0019; color: #e6ece9; font-size: 0.95rem; line-height: 1.6; }
#site-footer .footer-col ul li a { white-space: nowrap; display: inline-block; }
/* Footer social icons (inline SVG, no external assets) */
#site-footer .footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; font-size: 0.9rem; color: #d3dad6; }
#site-footer .social-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #cfd8d4; text-decoration: none; transition: color .4s ease, opacity .4s ease; }
#site-footer .social-link:hover{ color: #ffffff; opacity: 0.95; text-decoration: none; }
#site-footer .social-ico { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
#site-footer .social-ico svg{ display: block; fill: currentColor; }
#site-footer .social-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
/* Footer layout */
#site-footer .footer-inner { max-width: min(1320px, calc(100% - 30px)); margin: 0 auto; padding: 3rem 1.5rem 3rem; display: grid; grid-template-columns: 2.2fr 1fr 1fr; column-gap: 5rem; row-gap: 2.5rem; align-items: start; }
#site-footer .footer-bottom { background-color: #000000; border-top: 1px solid rgba(255,255,255,0.08); padding: 1.25rem 1.5rem; text-align: center; font-size: 0.85rem; color: #fff; }
#site-footer .footer-col h3 { color: #ffffff; font-size: 1.1rem; font-weight: 600; margin-bottom: 1.05rem; letter-spacing: 0.02em; }
#site-footer .footer-col p { margin-bottom: 0.75rem; color: #d3dad6; }
#site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
#site-footer .footer-col li { margin-bottom: 0.5rem; }
#site-footer .footer-col a { color: #cfd8d4; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; }
#site-footer .footer-col a:hover{ color: #ffffff; opacity: 0.9; }
#site-footer .footer-contact { margin-top: 1rem; }
#site-footer .footer-follow { font-weight: 600; }
#site-footer .footer-social span{ font-weight: 600; }
#site-footer .footer-social a { color: #cfd8d4; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; }
#site-footer .footer-social a:hover{ color: #ffffff; opacity: 0.9; }
#site-footer .footer-social span { margin-bottom: 0.5rem; }

@media (max-width: 520px){
  #site-footer .footer-inner{ grid-template-columns: repeat(2, 1fr); padding: 3rem 1.25rem 2.5rem; gap: 2rem; }
  #site-footer .footer-inner .footer-col:first-child{ grid-column: 1 / -1; }
  #site-footer .footer-col h3 { margin-top: 1.5rem; }
  #site-footer .footer-social { flex-direction: row; align-items: flex-start; } }
@media (max-width: 560px){
  #site-footer .footer-inner { padding-left: 0.85rem; padding-right: 0.85rem; }
  #site-footer .footer-bottom { padding-left: 0.85rem; padding-right: 0.85rem; }
  #site-footer .social-link{ gap: 0.45rem; } }
@media (max-width: 900px){
  #site-footer .footer-inner{ grid-template-columns: repeat(2, 1fr); } }

/* =============== ESTIMATE MODAL — POLISH / MOBILE CONDENSE ================ */
#estimate { z-index: 5000; display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
#estimate[aria-hidden="false"]{ display:block; }
#estimate-form { overscroll-behavior: contain;  position: relative; background: #fff; width: min(640px, 94vw); margin: auto; margin-top: clamp(14px, 5vh, 42px); padding: 22px 20px; border-radius: 18px; border: 1px solid rgba(0,0,0,0.10); max-height: min(86svh, 760px); overflow: auto; -webkit-overflow-scrolling: touch; }
#estimate-form h2{ margin: 0 0 14px 0; color: var(--brand); letter-spacing: -0.01em; }
.modal-close { position: absolute; top: 12px; right: 10px; float: none;  z-index: 2; display: inline-flex; margin-left: auto; padding: 8px 10px; border-radius: var(--radius-pill); border: 1px solid rgba(0,0,0,0.12); background: rgba(242,241,238,0.55); color: var(--brand); }
.modal-close:hover { border-color: var(--pill-hover-blue); }
#estimate-form label{ display: block; margin: 10px 0 6px; font-weight: 700; font-size: 0.92rem; color: #222; }
#estimate-form input,#estimate-form textarea,#estimate-form select{ width: 100%; height: 44px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.14); background: #fff; margin: 0; padding: 0 12px; transition: .2s ease; font-size: 15px; }
#estimate-form textarea{ height: 96px; padding: 10px 12px; }
#estimate-form input:focus,#estimate-form textarea:focus,#estimate-form select:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(76,0,25,0.12); }
#estimate-form .select-row { align-content: start;  margin-top: 6px; }
@media (max-width: 600px){ #estimate-form .select-row { gap: 10px; } }
#estimate-form .select-row label { margin: 0 0 6px; }
#estimate-form .select-row select { margin: 0; }
.captcha-row{ margin-top: 12px; gap: 10px; }
.captcha-row img { width: 140px; height: auto; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); }
#estimate-form input[type="submit"]{ width: 100%; margin-top: 14px; height: 48px; border-radius: var(--cta-radius); background: var(--cta-green); border: 1px solid rgba(255,255,255,0.85); font-weight: 800; color: #fff; letter-spacing: 0.02em; text-shadow: 0 1px 1px rgba(0,0,0,0.55); }
#estimate-form input[type="submit"]:hover{ filter: brightness(0.95); transform: translateY(-1px); }
@media (max-width: 600px){ #estimate{ padding: 12px; } #estimate-form { padding: 18px 14px; border-radius: 16px; } #estimate-form label { margin-top: 9px; } .captcha-row { grid-template-columns: 1fr; } .captcha-row img { width: min(220px, 100%); } }
/* ========================================================================== */
/* Cookie policy floating icon — emoji-safe */
#cookiePolicyBtn { position: fixed; bottom: 50px; left: 25px; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: transparent; border: 0; padding: 0; margin: 0; line-height: 1; font-size: 28px; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; opacity: .55; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 7000; transform: translateZ(0); -webkit-font-smoothing: antialiased; text-decoration: none; transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease; }
#cookiePolicyBtn:hover{ opacity: .65; transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
#cookiePolicyBtn:focus-visible{ outline: 2px solid #fff; outline-offset: 3px;}