/* ===========================
   Gold Detailing — Part 4 (author-tuned)
   Responsive fine-tuning, Print+, Dark-Brass extras, Accessibility, Patterns
   =========================== */

/* 0) Extra tokens and color math */
:root{
  --gold-underline: linear-gradient(90deg, rgba(210,180,108,0), rgba(210,180,108,.85) 15%, rgba(210,180,108,0) 85%);
  --focus-ring: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 4px color-mix(in oklab, var(--gdt-gold-500) 70%, white 30%);
  --elev-1: 0 10px 30px rgba(0,0,0,.42);
  --elev-2: 0 18px 40px rgba(0,0,0,.58);
  --mask-grad: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7));
  /* Glows (for pattern presets) */
  --glow-g1: var(--gdt-glow-gold-1);
  --glow-g2: var(--gdt-glow-gold-2);
  --glow-i1: var(--gdt-glow-ice-1);
  --glow-i2: var(--gdt-glow-ice-2);
}

/* Kill accidental horizontal scroll (modern clip with fallback) */
html, body{ overflow-x: clip }
@supports not (overflow: clip){
  html, body{ overflow-x: hidden }
}

/* 1) Header/nav refinements at breakpoints */
@media (max-width: 1280px){
  .primary-nav .menu a{ padding:10px 4px }
}
@media (max-width: 1024px){
  .gdt-nav .container{ padding-top:10px; padding-bottom:10px }
  .nav-cta .btn{ display:none } /* hero CTA is visible; keep header compact on tablet */
}
@media (max-width: 780px){
  .gdt-topbar .container{ flex-wrap:wrap }
  .gdt-topbar .topbar-right{ width:100%; justify-content:space-between; gap:8px; font-size:.92rem }
  .gdt-topbar .topbar-note{ order:-1 }
}

/* 2) Mobile contacts strip (optional floating bar) */
.mobile-contacts-strip{
  position:fixed; left:0; right:0; bottom:0; z-index: var(--z-overlay);
  display:none; gap:8px; padding: 8px var(--gdt-grid-pad);
  background: color-mix(in oklab, var(--gdt-surface) 88%, black 12%);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -12px 30px rgba(0,0,0,.5);
}
.mobile-contacts-strip .btn{ flex:1 }
@media (max-width: 680px){
  .mobile-contacts-strip{ display:flex }
}

/* 3) Hero cosmetics on small screens */
@media (max-width: 900px){
    .hero {
        padding-top: clamp(90px, 10vw, 120px);
        padding-bottom: clamp(100px, 12vw, 100px);
    }
  .hero-copy .lead{ max-width: 60ch }
}
@media (max-width: 600px){
  .hero-copy .hero-bullets{ gap:6px }
  .hero .hero-cta .btn{ flex:1 }
  .hero .hero-cta{ gap:8px }
}

/* 4) Services cards micro-tuning on tiny screens */
@media (max-width: 520px){
  .svc-card .svc-meta{ font-size:.95rem }
  .svc-card .svc-actions .btn{ flex:1 }
}

/* 5) Pricing density controls */
@media (max-width: 540px){
  .pricing-row{ grid-template-columns: 1fr; align-items:flex-start; gap:8px }
  .p-side{ justify-content:space-between }
}

/* 6) FAQ: large hit area and chevron */
.faq-item > summary{ position:relative; padding-right:36px }
.faq-item > summary::after{
  content:""; position:absolute; right:12px; top:50%; width:16px; height:16px; transform: translateY(-50%) rotate(0deg);
  border-right: 2px solid rgba(255,255,255,.6); border-bottom: 2px solid rgba(255,255,255,.6);
  transform-origin: 50% 50%; rotate: -45deg; opacity:.9; transition: transform var(--gdt-fast) var(--gdt-ease), opacity var(--gdt-fast) var(--gdt-ease)
}
.faq-item[open] > summary::after{ transform: translateY(-50%) rotate(135deg); opacity:1 }

/* 7) BA slider touch targets */
.ba-range{ height:8px }
.ba-range::-webkit-slider-thumb{ width:24px; height:24px }
.ba-handle{ width:3px }

/* 8) Article reading width + images */
.article-content{ max-width: 78ch }
.article-content img{ height:auto }

/* 9) Gold underline link utility */
.link-underline{
  background-image: var(--gold-underline);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom:2px;
}
.link-underline:hover{ color: var(--gdt-accent-2) }

/* 10) Chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)
}
.chip.gold{ background: rgba(210,180,108,.16); border-color: rgba(210,180,108,.35); color: var(--gdt-gold-300) }

/* 11) Scroll shadows (utility) */
.scroller{ overflow:auto; -webkit-overflow-scrolling: touch; position:relative }
.scroller.shadow::before, .scroller.shadow::after{
  content:""; position:absolute; top:0; bottom:0; width:18px; pointer-events:none
}
.scroller.shadow::before{ left:0; background: linear-gradient(90deg, rgba(10,13,18,1), rgba(10,13,18,0)) }
.scroller.shadow::after{ right:0; background: linear-gradient(270deg, rgba(10,13,18,1), rgba(10,13,18,0)) }

/* 12) HDR tweak */
@media (dynamic-range: high){
  .btn{ box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px color-mix(in oklab, var(--gdt-gold-500) 40%, black 60%) }
}

/* 13) Forced colors (Windows) */
@media (forced-colors: active){
  :root{
    --gdt-bg: Canvas; --gdt-text: CanvasText; --gdt-muted: GrayText; --gdt-gold-500: Highlight; --gdt-gold-400: Highlight;
  }
  .btn{ border: 1px solid Highlight; color: CanvasText !important; background: Canvas !important }
  .btn--gold{ background: Highlight !important; color: Canvas !important }
  .card, .svc-card, .blog-card, .generic-card, .faq-item{ border:1px solid ButtonBorder; background: Canvas }
  .gdt-breadcrumbs a{ text-decoration: underline }
}

/* 14) Prefers-contrast */
@media (prefers-contrast: more){
  .btn{ border-color: rgba(255,255,255,.7) }
  .primary-nav .menu a{ background: rgba(255,255,255,.07) }
  .faq-item > summary{ font-weight:800 }
}

/* 15) Reduced data */
@media (prefers-reduced-data: reduce){
  .hero-image, .hero-video{ filter: none }
  .pattern{ background-image: none }
}

/* 16) Footer stacking on very small screens */
@media (max-width: 420px){
  .gdt-footer .grid-4{ grid-template-columns: 1fr }
  .gdt-footer .footer-book .btn{ width:100% }
}

/* 17) Tiny phones */
@media (max-width: 360px){
  .btn{ padding:10px 12px }
  .burger{ width:40px; height:40px }
  .hero-badge{ font-size:.9rem }
}

/* 18) Print (extended) */
@media print{
  :root{ --print-black:#000; --print-gray:#444; --print-gold:#aaa }
  html, body{ background:#fff !important; color: var(--print-black) !important }
  .pattern, .hero-overlay, .hero-bg, .mobile-nav, .gdt-topbar{ display:none !important }
  .gdt-nav{ position:static; border:none; box-shadow:none }
  .gdt-header, .gdt-footer{ background:#fff !important; color: var(--print-black) !important }
  a{ color: var(--print-black) !important; text-decoration: underline }
  .btn, .burger{ display:none !important }
  .section{ padding: 14px 0 !important; background:#fff !important }
  .section::before, .section::after{ display:none !important }
  .card, .faq-item, .svc-card, .blog-card, .generic-card{ border:1px solid #ddd !important; box-shadow:none !important; background:#fff !important }
  .gdt-breadcrumbs{ color: var(--print-gray) }
  .gdt-breadcrumbs a{ text-decoration: underline }
  .footer-contact address{ color: var(--print-black) }
  .footer-bottom .legal{ color: var(--print-gray) }
  p, li{ orphans:3; widows:3 }
  img{ max-width:100% !important; height:auto !important; filter:none !important }
}

/* 19) Brass glow accents */
.glow{ box-shadow: 0 0 0 2px rgba(210,180,108,.2), 0 0 30px rgba(210,180,108,.25) }
.glow:hover{ box-shadow: 0 0 0 2px rgba(210,180,108,.28), 0 0 38px rgba(210,180,108,.35) }

/* 20) Animated brass border */
.gold-border{ position:relative; border-radius: var(--gdt-radius); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) }
.gold-border::before{
  content:""; position:absolute; inset:-1px; border-radius: inherit; padding:1px;
  background: linear-gradient(120deg, rgba(255,255,255,.2), rgba(210,180,108,.35), rgba(255,255,255,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference){
  .gold-border::before{ animation: borderFlow 6s linear infinite }
}
@keyframes borderFlow{ 0%{ background-position: 0% 50% } 100%{ background-position: 200% 50% } }

/* 21) Focus utilities */
.focus-ring{ box-shadow: var(--focus-ring) !important }
.focus-visible:focus-visible{ box-shadow: var(--focus-ring) }

/* 22) Hide/show */
.hide-mobile{ display:initial } .show-mobile{ display:none }
@media (max-width: 768px){
  .hide-mobile{ display:none !important }
  .show-mobile{ display:initial !important }
}

/* 23) Sticky helpers */
.sticky-top{ position:sticky; top:80px } .sticky-top-sm{ position:sticky; top:60px }

/* 24) Masked header image for posts */
.header-mask{ position:relative; overflow:hidden; border-radius: var(--gdt-radius) }
.header-mask img{ display:block; width:100%; height:auto }
.header-mask::after{ content:""; position:absolute; inset:auto 0 0 0; height: 40%; background: var(--mask-grad) }

/* 25) Breadcrumbs compact */
.breadcrumbs-compact .gdt-breadcrumbs{ font-size:.9rem; opacity:.95 }
.breadcrumbs-compact .gdt-breadcrumbs li{ gap:6px }

/* 26) Micro loaders */
.loader{
  width:16px; height:16px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.2); border-top-color: var(--gdt-gold-500);
  animation: spin 900ms linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }

/* 27) Button variants */
.btn.rounded{ border-radius: 999px } .btn.block{ display:flex; width:100% }
.btn.icon-left > .ico{ margin-right:8px } .btn.icon-right > .ico{ margin-left:8px }

/* 28) Headings gold accent line */
.heading-accent{ position:relative; padding-bottom:10px }
.heading-accent::after{ content:""; position:absolute; left:0; bottom:0; width: 72px; height:2px; background: linear-gradient(90deg, var(--gdt-gold-500), transparent) }

/* 29) Large screens gaps */
@media (min-width: 1440px){
  .container{ padding-left: max(var(--gdt-grid-pad), 24px); padding-right: max(var(--gdt-grid-pad), 24px) }
  .features-grid{ gap: 28px } .services-grid{ gap: 28px } .blog-grid{ gap: 28px }
}

/* 30) A11y helpers */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip: rect(1px,1px,1px,1px)
}
.visually-hidden:focus{ position:static; width:auto; height:auto; overflow:visible; clip:auto }

/* 31) Safe-area for iOS */
@supports (padding: max(0px)){
  .mobile-contacts-strip{ padding-bottom: max(8px, env(safe-area-inset-bottom)) }
  .mobile-nav{ padding-bottom: max(16px, env(safe-area-inset-bottom)) }
}

/* 32) Hover hints */
.svc-card .svc-media::after, .port-card .port-media::after{
  content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.35) 90%); opacity:0; transition: opacity var(--gdt-fast) var(--gdt-ease)
}
.svc-card:hover .svc-media::after, .port-card:hover .port-media::after{ opacity:1 }

/* 33) Responsive tables */
.table-responsive{ width:100%; overflow:auto; -webkit-overflow-scrolling:touch; border-radius: var(--gdt-radius); border:1px solid rgba(255,255,255,.06) }
.table-responsive .table{ border:0; border-radius:0 }

/* 34) Breadcrumbs spacing fix */
.gdt-breadcrumbs-wrap + .section.alt .section-head{ padding-top: 6px }

/* 35) Tiny badges */
.badge.xs{ font-size:.9rem; padding:3px 6px }

/* 36) Icon baseline */
.ico{ display:inline-block; line-height:0 } .ico svg{ display:block; width:1em; height:1em }

/* 37) Animated diagonal separators (hover only) */


/* 38) Autofill fix */
input:-webkit-autofill, textarea:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.05) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* 39) Form error banner */
.form-error{ border:1px solid rgba(255,107,107,.5); background: rgba(255,107,107,.1); color:#fff; padding:10px 12px; border-radius: var(--gdt-radius) }

/* 40) Newsletter widths */
.nl-card form, .nl-form{ display:flex; gap:8px; flex-wrap:wrap }
.nl-card input[type="email"], .nl-form input[type="email"]{ flex:1; min-width: 180px }

/* 41) Selection color (brass) */
::selection{ background: rgba(210,180,108,.35); color:#fff }

/* 42) RTL checkmark fix */
:root[dir="rtl"] .checklist li::before{ margin-left:8px; margin-right:0 }

/* 43) Breadcrumbs overflow guard */
.gdt-breadcrumbs ol{ overflow:auto; -webkit-overflow-scrolling: touch }
.gdt-breadcrumbs ol::-webkit-scrollbar{ height: 6px }
.gdt-breadcrumbs ol::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:999px }

/* 44) Meta bars */
.meta-bar{ display:flex; gap:8px; color: var(--gdt-muted); align-items:center; flex-wrap:wrap }
.meta-bar .dot{ opacity:.35 }

/* 45) Keyboard focus elevation */
a:focus-visible .svc-card, a:focus-visible .blog-card, a:focus-visible .generic-card{ outline: none; box-shadow: var(--focus-ring) }

/* 46) Map contrast for dark */
.map-contrast{ position:relative }
.map-contrast::after{ content:""; position:absolute; inset:0; background: radial-gradient(80% 50% at 50% 50%, rgba(0,0,0,.0), rgba(0,0,0,.25)); pointer-events:none }

/* 47) Footer legal spacing */
.gdt-footer .footer-bottom .container{ display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between }
.gdt-footer .footer-bottom a:hover{ color: var(--gdt-accent-2) }

/* 48) Hidden headings helper */
.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 }

/* 49) Smooth scroll */
html{ scroll-behavior: smooth }

/* 50) END EXTRAS */


/* --------------------------
   Content & Container patches
   -------------------------- */
.container{ padding-left: var(--gdt-grid-pad) !important; padding-right: var(--gdt-grid-pad) !important }
/*.entry-content, .page-content, .service-content{ --content-max: 72ch }*/
.entry-content > *:not(.alignfull):not(.alignwide),
.page-content  > *:not(.alignfull):not(.alignwide),
.service-content> *:not(.alignfull):not(.alignwide){ max-width: var(--content-max); margin-left:auto; margin-right:auto }
.alignwide{ width: min(1100px, 95vw); margin-left:auto !important; margin-right:auto !important }
.alignfull{ width:100vw; margin-left:50% !important; transform:translateX(-50%) }
@media (max-width: 768px){ .alignfull{ width:100%; margin-left:0 !important; transform:none } }
.entry-content img, .page-content img, .service-content img{ max-width:100%; height:auto; border-radius: var(--gdt-radius) }
.entry-content .wp-block-table, .page-content .wp-block-table{ overflow:auto }
.entry-content .wp-block-gallery img, .page-content .wp-block-gallery img{ border-radius: var(--gdt-radius-sm) }

:root{
  --bp-sm: 600px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px; --bp-3xl: 1600px;
  --container-xs: 100%; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-3xl: 1600px;
}
.container{ width:100%; margin-left:auto; margin-right:auto; max-width: var(--container-xs) }
@media (min-width: 600px){  .container{ max-width: var(--container-sm) } }
@media (min-width: 768px){  .container{ max-width: var(--container-md) } }
@media (min-width: 1024px){ .container{ max-width: var(--container-lg) } }
@media (min-width: 1280px){ .container{ max-width: var(--container-xl) } }
@media (min-width: 1440px){ .container{ max-width: var(--container-2xl) } }
@media (min-width: 1600px){ .container{ max-width: var(--container-3xl) } }
.container--narrow{ max-width: 840px !important }
.container--wide{   max-width: 1440px !important }
.container--xl{     max-width: 1600px !important }
.container--full{   max-width: 100% !important }

/* Visual placeholders */
.svc-media .placeholder, .blog-media .placeholder, .port-media .placeholder,
.hero .hero-bg:not(:has(img,video))::before{
  content:""; display:block; width:100%; aspect-ratio: 16/10;
  background:
    radial-gradient(1200px 600px at -10% -30%, rgba(210,180,108,.10), transparent 60%),
    radial-gradient(800px 400px at 110% -20%, rgba(210,180,108,.08), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1); border-radius: var(--gdt-radius);
}
.ba-wrap:not(:has(img)){ min-height:280px }

/* Hero fallback bg when no image/video set */
.hero .hero-bg:not(:has(img,video)){
  background:
    radial-gradient(1200px 600px at -10% -30%, rgba(210,180,108,.10), transparent 60%),
    radial-gradient(800px 400px at 110% -20%, rgba(210,180,108,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}

/* Optional skew removal for hero */
.section.hero::before{ display:none }

/* Emphasize pulse */
.btn.pulse{ color:#fff }

/* --------------------------
   Topbar (mobile collapse)
   -------------------------- */
.topbar-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0 }
.topbar-call{ white-space:nowrap }
.topbar-toggle{
  display:none; align-items:center; gap:8px; padding:8px 12px; border-radius:10px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#fff;
}
.topbar-toggle__chev{
  width:10px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform: rotate(45deg); transition: transform var(--gdt-fast) var(--gdt-ease); opacity:.9;
}
.topbar-panel{
  margin-top:8px; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 12px; background: rgba(255,255,255,.03);
}
@media (min-width: 781px){
  .topbar-toggle{ display:none }
  .gdt-topbar .topbar-panel{ display:flex; align-items:center; justify-content:space-between; gap:12px }
}
@media (max-width: 1080px){
  .topbar-toggle{ display:inline-flex }
  .gdt-topbar .topbar-panel{ display:none }
  .gdt-topbar[aria-expanded="true"] .topbar-panel{ display:block }
  .gdt-topbar[aria-expanded="true"] .topbar-toggle__chev{ transform: rotate(-135deg) }
}

/* Ensure burger stays above overlays */
.burger{ position:relative; z-index: var(--z-max) }

/* --------------------------
   Services carousel — strict one slide (<=1024px)
   -------------------------- */
@media (max-width: 1024px){
  .services-carousel{ position:relative; overflow:hidden; width:100% }
  .services-grid{
    overflow-x:auto; overflow-y:hidden; gap:0;
    scroll-snap-type: x mandatory; scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; width:100%;
  }
  .services-grid::-webkit-scrollbar{ display:none }
  .services-grid{ scrollbar-width: none; -ms-overflow-style: none }
  .services-grid > .svc-card{ flex:0 0 100%; scroll-snap-align:start }
  .svc-thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; contain-intrinsic-size:auto 800px 600px }
  .car-btn{
    position:absolute; top:50%; transform: translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,.26); background: rgba(0,0,0,.55);
    color:#fff; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
    z-index: 9999; backdrop-filter: blur(3px);
  }
  .car-btn:hover{ background: rgba(0,0,0,.7); border-color: rgba(255,255,255,.4) }
  .car-btn[disabled]{ opacity:.4; pointer-events:none }
  .car-btn--prev{ left:8px } .car-btn--next{ right:8px }
}
@media (min-width: 1025px){ .car-btn{ display:none } }

/* Fix WP 6.6 auto sizes placeholder: prevent oversized intrinsic boxes */
img:is([sizes="auto" i], [sizes^="auto," i]){
  contain-intrinsic-size: auto 1200px 675px !important;
}

/* Tighter placeholders for our components */
.blog-thumb{ contain-intrinsic-size: auto 800px 500px }
.hero-image, .ba-img{ contain-intrinsic-size: auto 1920px 1080px }

/* --------------------------
   Author Patterns & Glows (opt‑in via classes)
   -------------------------- */
.pattern--glow-gold{
  background-image:
    radial-gradient(900px 520px at 12% -14%, var(--glow-g1), transparent 60%),
    radial-gradient(700px 420px at 108% 0%, var(--glow-g2), transparent 68%),
    radial-gradient(1200px 680px at 50% -30%, rgba(255,255,255,.02), transparent 60%);
  background-blend-mode: screen, screen, normal;
}
.pattern--glow-ice{
  background-image:
    radial-gradient(820px 520px at -8% -12%, var(--glow-i1), transparent 62%),
    radial-gradient(620px 380px at 108% -16%, var(--glow-i2), transparent 70%),
    radial-gradient(1200px 680px at 50% -30%, rgba(255,255,255,.02), transparent 60%);
  background-blend-mode: screen, screen, normal;
}
.pattern--bubbles, .pattern--bubbles-soft{
  background-image:
    radial-gradient(14px 14px at 12% 18%, rgba(255,255,255,.06) 0 60%, transparent 61%),
    radial-gradient(10px 10px at 36% 8%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(11px 11px at 58% 20%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(9px 9px at 78% 14%, rgba(255,255,255,.04) 0 60%, transparent 61%),
    radial-gradient(15px 15px at 22% 36%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(9px 9px at 44% 34%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(12px 12px at 66% 38%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(8px 8px at 86% 36%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(13px 13px at 16% 58%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(9px 9px at 38% 54%, rgba(255,255,255,.04) 0 60%, transparent 61%),
    radial-gradient(11px 11px at 62% 56%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(10px 10px at 82% 52%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(14px 14px at 20% 80%, rgba(255,255,255,.06) 0 60%, transparent 61%),
    radial-gradient(9px 9px at 42% 78%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(12px 12px at 64% 82%, rgba(255,255,255,.05) 0 60%, transparent 61%),
    radial-gradient(10px 10px at 84% 76%, rgba(255,255,255,.05) 0 60%, transparent 61%);
  background-size: cover; background-repeat:no-repeat; opacity: .70;
}
.pattern--bubbles-soft{ opacity: .60 }
.pattern--foam-lines{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 8px, transparent 9px 22px); background-blend-mode: lighten }
.pattern--haze{ background-image: radial-gradient(1400px 800px at 50% -30%, rgba(0,0,0,.12), transparent 60%) }

.pattern-animate{ animation: patFloat 28s ease-in-out infinite alternate }
@keyframes patFloat{ 0%{ background-position: 0 0, 0 0, 0 0 } 100%{ background-position: 10px -6px, -12px 10px, 8px -8px } }
@media (prefers-reduced-motion: reduce){ .pattern-animate{ animation: none !important } }

@media (max-width: 780px){
  .pattern--bubbles, .pattern--bubbles-soft{
    opacity:.70;
    background-image:
      radial-gradient(12px 12px at 14% 16%, rgba(255,255,255,.06) 0 60%, transparent 61%),
      radial-gradient(10px 10px at 44% 14%, rgba(255,255,255,.05) 0 60%, transparent 61%),
      radial-gradient(12px 12px at 74% 20%, rgba(255,255,255,.05) 0 60%, transparent 61%),
      radial-gradient(10px 10px at 24% 52%, rgba(255,255,255,.05) 0 60%, transparent 61%),
      radial-gradient(12px 12px at 66% 58%, rgba(255,255,255,.05) 0 60%, transparent 61%),
      radial-gradient(11px 11px at 36% 82%, rgba(255,255,255,.05) 0 60%, transparent 61%);
  }
  .pattern--foam-lines{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.032) 0 8px, transparent 9px 22px) }
}

/* Меню (внизу добавлены ваши служебные правки) */
#menu-menu-main{ padding:0; margin:0; list-style:none }
.gdt-breadcrumbs-wrap.container{ margin-bottom: 15px;z-index: 5;position: relative; }

/* ===========================
   Robust diagonal separators (no gaps, no scrollbars)
   =========================== */
.section{ position:relative; overflow: visible }
.section::before,
.section::after{
  content:""; position:absolute; top:auto; bottom:auto;
  left:50%; width: 140vw; height:112px;
  transform: translateX(-50%) skewY(-2.1deg);
  background: inherit; will-change: transform; backface-visibility: hidden;
  pointer-events:none; z-index:0;
}
.section::before{ top:-56px;  box-shadow: 0 -1px 0 rgba(255,255,255,.03) inset }
.section::after { bottom:-56px; box-shadow: 0  1px 0 rgba(255,255,255,.03) inset }


/* Если хочешь полностью уйти от skew — можно включить вариант с clip-path:
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)){
  .section::before, .section::after{ transform: translateX(-50%) }
  .section::before{
    top:-56px; height:112px;
    clip-path: polygon(0 100%, 100% 60%, 100% 0, 0 0);
  }
  .section::after{
    bottom:-56px; height:112px;
    clip-path: polygon(0 100%, 100% 100%, 100% 40%, 0 0);
  }
}
*/

/* Collapsible sections (используем для #booking) */
.section[data-collapsible]{
  /*overflow: hidden;*/
   /*height: 0;*/
   /*opacity: 0;*/
  transition:
    height var(--gdt-mid) var(--gdt-ease),
    opacity var(--gdt-fast) var(--gdt-ease);
}
.section[data-collapsible].open{ opacity: 1 }

/* уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .section[data-collapsible]{ transition: none }
}

/* Typing title: allow wrapping to two lines, keep caret */
.typed-title{
  display:inline-block;
  white-space: normal;  /* разрешаем переносы */
}

/* Pricing groups — показываем только первые 2 группы */
.pricing-wrap.is-collapsed .pricing-group:nth-child(n+3){ display:none }

/* Кнопка "показать ещё" для групп */
.pricing-all-toggle{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px; color:#fff;
}
.pricing-all-toggle .chev{
  width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--gdt-fast) var(--gdt-ease); opacity:.9;
}
/* когда развёрнуто */
.pricing-wrap:not(.is-collapsed) ~ .pricing-all-toggle .chev{ transform: rotate(-135deg) }

@media (prefers-reduced-motion: reduce){
  .pricing-all-toggle .chev{ transition:none }
}

/* Feature-card watermark hover: subtle tilt */
.feature-card{
  position: relative;
  overflow: hidden;
}

.feature-card::after{
  /* уже есть как водяной знак — добавим плавность */
  transition: transform var(--gdt-slow) var(--gdt-ease), opacity var(--gdt-fast) var(--gdt-ease);
  will-change: transform;
  transform-origin: 85% 85%;           /* вращаем ближе к нижнему правому углу */
}

/* Навели/фокус внутри — чуть “повернули” и приподняли */
.feature-card:hover::after,
.feature-card:focus-within::after{
  transform: rotate(-2deg) scale(1.03);
  opacity: .08;                        /* можно на полтона ярче при ховере */
}

/* Уважение reduce-motion: без вращения, без изменения масштаба */
@media (prefers-reduced-motion: reduce){
  .feature-card::after{ transition: none }
  .feature-card:hover::after,
  .feature-card:focus-within::after{
    transform: none;
    opacity: .06;
  }
}


img.custom-logo {
    width: 190px;
    height: auto;
}

/* Service card highlights */
.svc-points{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.svc-points li{
  color: var(--gdt-muted);
  font-size: .98rem;
  line-height: 1.3;
}

/* Make details look like FAQ but smaller */
.svc-details{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px;
}

.svc-details > summary{
  cursor: pointer;
  user-select: none;
  color: #fff;
  font-weight: 700;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.svc-details > summary::-webkit-details-marker{ display:none; }

.svc-details > summary::after{
  content:"";
  position:absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.7);
  border-bottom: 2px solid rgba(255,255,255,.7);
  transform: translateY(-50%) rotate(45deg);
  transition: transform var(--gdt-fast) var(--gdt-ease);
}

.svc-details[open] > summary::after{
  transform: translateY(-50%) rotate(-135deg);
}

.svc-points--all{
  margin-top: 10px;
}





/* ===========================
   Reviews block (dark + gold)
   =========================== */

.reviews-wrap{
  display:grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 22px;
  align-items:start;
}

@media (max-width: 1024px){
  .reviews-wrap{ grid-template-columns: 1fr; }
}

/* Left side */
.reviews-title{
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1;
}

.reviews-rating{
  margin-top: 14px;
  padding: 14px 14px;
  background: rgba(255,255,255,.03);
}

.rr-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.rr-provider{
  font-weight: 800;
  letter-spacing: .02em;
}

.rr-stars{
  color: var(--gdt-gold-400);
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(210,180,108,.25);
}

.rr-meta{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--gdt-muted);
}

.rr-val{
  color:#fff;
  font-weight: 800;
}

/* Grid of review cards */
.reviews-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 740px){
  .reviews-grid{ grid-template-columns: 1fr; }
}

/* Collapse: hide all cards after first 4 (controlled by PHP + attribute) */
.reviews-grid.is-collapsed .review-card[data-hidden="1"]{ display:none; }

.review-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--elev-1);
}

.review-head{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 10px;
}

.review-avatar .r-ava{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(210,180,108,.25);
}

.review-avatar .r-ava.placeholder{
  width: 42px; height: 42px;
  border-radius: 999px;
}

.r-name{
  font-weight: 800;
  line-height: 1.1;
}

.review-stars{
  margin: 8px 0 10px;
}

.r-stars{
  color: var(--gdt-gold-400);
  letter-spacing: 1px;
}

.review-text{
  color: rgba(255,255,255,.86);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Toggle button like your pricing toggle */
.reviews-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top: 12px;
}

.reviews-toggle .chev{
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--gdt-fast) var(--gdt-ease);
  opacity:.9;
}

.reviews-grid:not(.is-collapsed) ~ .reviews-toggle .chev{
  transform: rotate(-135deg);
}


/* Split header: left title + right "More" */
.section-head--split{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

/* Mosaic (1 big left + 2 stacked right) */
.gallery-mosaic{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.gallery-mosaic .gallery-item{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius: var(--gdt-radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.gallery-mosaic .gallery-item img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform var(--gdt-slow) var(--gdt-ease);
}
.gallery-mosaic .gallery-item:hover img{ transform: scale(1.03); }

.gallery-mosaic .gallery-item.is-big{
  grid-row: 1 / span 2;
}
.gallery-mosaic .gallery-item.is-small{
  aspect-ratio: 16/9;
}

/* More grid */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1024px){
  .gallery-mosaic{ grid-template-columns: 1fr; }
  .gallery-mosaic .gallery-item.is-big{ grid-row:auto; }
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

.gallery-grid .gallery-item{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius: var(--gdt-radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  aspect-ratio: 16/10;
}
.gallery-grid .gallery-item img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform var(--gdt-slow) var(--gdt-ease);
}
.gallery-grid .gallery-item:hover img{ transform: scale(1.03); }

.gallery-grid.is-collapsed .gallery-item[data-hidden="1"]{ display:none; }

/* Load more button (match pricing toggle style) */
.gallery-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top: 12px;
}
.gallery-more .chev{
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--gdt-fast) var(--gdt-ease);
  opacity:.9;
}

/* Lightbox */
html.lb-lock, html.lb-lock body{ overflow:hidden; }

.gdt-lightbox{
  position:fixed;
  inset:0;
  z-index: 99999;
  display:none;
}
.gdt-lightbox.open{ display:block; }

.gdt-lb-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(3px);
}

.gdt-lb-dialog{
  position:absolute;
  inset: 20px;
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap: 10px;
}

.gdt-lb-figure{
  margin:0;
  border-radius: var(--gdt-radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,13,18,.85);
  box-shadow: var(--elev-2);
}
.gdt-lb-img{
  display:block;
  width:100%;
  height: calc(100vh - 140px);
  object-fit: contain;
  background: #000;
}
.gdt-lb-cap{
  padding: 10px 12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.gdt-lb-nav, .gdt-lb-close{
  border:1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.55);
  color:#fff;
  border-radius: 999px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
}
.gdt-lb-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width:42px;
  height:42px;
  font-size: 26px;
}

@media (max-width: 680px){
  .gdt-lb-dialog{ inset: 12px; grid-template-columns: 40px 1fr 40px; }
  .gdt-lb-nav{ width:40px; height:40px; }
  .gdt-lb-img{ height: calc(100vh - 160px); }
}

/* Gallery "more" grid hidden state */
#gallery [data-gallery="more"][hidden]{ display:none !important; }

/* Make the header "MORE" button look like a link */
.gallery-morelink{
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}


/* ===========================
   Ceramic Coating Packages (years cards like reference)
   =========================== */

.coating-packages{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

/* 3rd card spans full width (matches the screenshot layout) */
.coating-packages > .coating-pack:nth-child(3){
  grid-column: 1 / -1;
}

@media (max-width: 900px){
  .coating-packages{
    grid-template-columns: 1fr;
  }
  .coating-packages > .coating-pack:nth-child(3){
    grid-column: auto;
  }
}

.coating-pack{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--elev-1);
  border-radius: var(--gdt-radius);
  padding: 16px;
}

.coating-pack__title{
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: #fff;
}

.coating-pack__body{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 520px){
  .coating-pack__body{
    grid-template-columns: 1fr;
  }
}

.coating-pack__media{
  border-radius: var(--gdt-radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  aspect-ratio: 16/10;
}

.coating-pack__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.coating-pack__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 8px;
  color: rgba(255,255,255,.86);
  font-size: .98rem;
  line-height: 1.35;
}

.coating-pack__list li{
  position: relative;
  padding-left: 14px;
}

.coating-pack__list li::before{
  content: "–";
  position: absolute;
  left: 0;
  color: var(--gdt-gold-400);
  opacity: .95;
}

.coating-pack__footer{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.coating-pack__price{
  color: rgba(255,255,255,.86);
  font-size: .98rem;
}

.coating-pack__price strong{
  color:#fff;
  font-weight: 800;
}



/* ===========================
   Phone FAB (bottom-right)
   =========================== */
:root{
  --fab-bottom: 16px;
}

.gdt-phone-fab{
  position: fixed;
  right: 16px;
  bottom: var(--fab-bottom);
  width: 56px;
  height: 56px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--gdt-gold-500) 86%, white 14%),
    var(--gdt-gold-700)
  );
  border: 1px solid color-mix(in oklab, var(--gdt-gold-500) 78%, black 22%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 24px rgba(210,180,108,.22);

  z-index: 10020;
}

.gdt-phone-fab:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 14px 30px rgba(210,180,108,.28);
}

.gdt-phone-fab__ico{
  width: 22px;
  height: 22px;
  fill: #0a0d12;
}

/* iOS safe-area */
@supports (padding: max(0px)){
  .gdt-phone-fab{
    bottom: max(var(--fab-bottom), calc(env(safe-area-inset-bottom) + var(--fab-bottom)));
  }
}

/* чтобы не конфликтовать с нижними мобильными барами */
@media (max-width: 780px){
  :root{ --fab-bottom: 76px; }
}
@media (max-width: 680px){
  :root{ --fab-bottom: 92px; }
}



/* ===========================
   Sticky whole header (topbar + nav)
   =========================== */

/* header is the only sticky element */
.gdt-header{
  position: sticky;
  top: 0;
  z-index: 10050;
  isolation: isolate; /* prevents weird stacking issues */
}

/* disable sticky on nav when header is sticky */
.gdt-nav{
  position: relative;
  top: auto;
  z-index: 1;
}

/* keep topbar above nav inside header */
.gdt-topbar{
  position: relative;
  z-index: 2;
	background: #0e141b;
}

/* WP admin bar offset */
body.admin-bar .gdt-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .gdt-header{ top: 46px; }
}