:root{--ink:#111827;--muted:#667085;--line:#e5e7eb;--max:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth}.dark-showcase [data-petaq-section]{scroll-margin-top:76px}body{margin:0;font-family:var(--site-font,Manrope,ui-sans-serif,system-ui,sans-serif);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}a{color:inherit}
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--header) 95%,transparent);border-bottom:0;box-shadow:none;outline:0;backdrop-filter:blur(12px)}.navin{height:64px;max-width:var(--max);margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brandline{display:inline-flex;align-items:center;gap:8px;color:var(--header-text);text-decoration:none;font-weight:800;letter-spacing:-.02em}.brandicon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 auto}.brandicon.has-logo{width:31px;height:31px;min-width:31px;max-width:31px;max-height:31px;overflow:hidden}.brandicon.has-logo img,.brandicon[data-site-logo-wrap] img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;display:block!important}.brandicon.is-mark{width:auto;height:auto;font-size:13px;line-height:1}.brandicon svg{width:100%;height:100%;fill:currentColor}.menu{display:flex;align-items:center;gap:30px}.menu a{font-size:13px;font-weight:650;color:var(--header-muted);text-decoration:none;transition:.18s}.menu a:hover,.menu a[data-nav-section].is-active{color:var(--header-text)}.navcta,.btnmain,.btnalt{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;border-radius:9px;transition:.2s}.navcta{background:var(--accent);color:var(--accent-text)!important;padding:10px 16px}.navcta:hover,.btnmain:hover{filter:brightness(.92);transform:translateY(-1px)}.menubtn{display:none;border:0;background:transparent;color:var(--header-text);font-size:27px;cursor:pointer}.mobile-links{display:none;background:color-mix(in srgb,var(--header) 93%,var(--header-contrast-mix));border-top:1px solid color-mix(in srgb,var(--header) 84%,var(--header-contrast-mix));padding:10px 24px 18px}.mobile-links.open{display:flex;flex-direction:column}.mobile-links a{color:var(--header-muted);text-decoration:none;font-size:13px;font-weight:750;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--header) 86%,var(--header-contrast-mix))}.mobile-links a:hover,.mobile-links a[data-nav-section].is-active{color:var(--header-text)}.mobile-links a:last-child{border-bottom:0}
.hero-default{background:#fff;padding:54px 24px 72px}.hero-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--accent) 22%,white);background:color-mix(in srgb,var(--accent) 7%,white);color:var(--accent);padding:7px 12px;border-radius:999px;font-size:11px;font-weight:800}.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}h1{font-size:clamp(44px,5.3vw,72px);line-height:1.02;letter-spacing:-.055em;margin:0;font-weight:800;color:#111827}.hero-copy p{font-size:17px;line-height:1.75;color:#6b7280;max-width:610px;margin:0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btnmain{min-height:50px;background:var(--accent);color:var(--accent-text);padding:0 28px;box-shadow:none}.btnalt{min-height:50px;border:1px solid #e5e7eb;background:#fff;color:#111827;padding:0 28px}.btnalt:hover{background:#f9fafb}.hero-media{position:relative;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#f3f4f6;box-shadow:0 28px 70px rgba(17,24,39,.18)}.hero-media img,.about-media img,.service-thumb img{width:100%;height:100%;object-fit:cover;display:block}.dark-showcase .hero-media>img{transform:scale(var(--hero-image-scale,1));transform-origin:center center;transition:transform .16s ease}.hero-media:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(17,24,39,.06);pointer-events:none}
.dark-showcase .hero-default{background:var(--hero-bg);color:var(--hero-text)}
.dark-showcase .quality{background:var(--primary);color:var(--primary-text)}
.dark-showcase .hero-default{position:relative;isolation:isolate;overflow:hidden}
.dark-showcase .hero-default.has-background-image:before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--hero-background-image-desktop);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:var(--hero-background-opacity,1);pointer-events:none}

/* Responsive Hero background image: Tablet/Mobile override Desktop only when set. */
@media(max-width:1020px){.dark-showcase .hero-default.has-background-image:before{background-image:var(--hero-background-image-tablet,var(--hero-background-image-desktop))}}
@media(max-width:560px){.dark-showcase .hero-default.has-background-image:before{background-image:var(--hero-background-image-mobile,var(--hero-background-image-desktop))}}
.dark-showcase .hero-default.has-background-image:after{display:none}
.dark-showcase .hero-default>.hero-grid{position:relative;z-index:1}
/* Hero layout options: text-left/image-right (default), centered text-only, or image-left/text-right. */
.dark-showcase .hero-layout-centered{padding-top:88px;padding-bottom:88px}
.dark-showcase .hero-layout-centered .hero-grid{grid-template-columns:1fr;max-width:920px;min-height:360px;gap:0;justify-items:center;align-items:center}
.dark-showcase .hero-layout-centered .hero-copy{width:100%;max-width:880px;margin:0 auto;align-items:center;text-align:center}
.dark-showcase .hero-layout-centered .hero-copy p{margin-left:auto;margin-right:auto}
.dark-showcase .hero-layout-centered .hero-actions{justify-content:center}
.dark-showcase .hero-layout-centered .hero-media{display:none}
/* Hero layout option: image on the left, text on the right. */
.dark-showcase .hero-layout-image_left .hero-media{grid-column:1;grid-row:1}
.dark-showcase .hero-layout-image_left .hero-copy{grid-column:2;grid-row:1}

/* Responsive Hero content alignment.
   Only cross-axis alignment and text alignment change: grid columns, child widths,
   gaps and section padding stay untouched, so Left / Center / Right cannot cause
   a layout-height jump. Text-only Centered and Slider layouts keep their existing
   layout semantics. */
.dark-showcase .hero-layout-split.hero-align-left .hero-copy,
.dark-showcase .hero-layout-image_left.hero-align-left .hero-copy{align-items:flex-start;text-align:left}
.dark-showcase .hero-layout-split.hero-align-left .hero-actions,
.dark-showcase .hero-layout-image_left.hero-align-left .hero-actions{justify-content:flex-start}
.dark-showcase .hero-layout-split.hero-align-center .hero-copy,
.dark-showcase .hero-layout-image_left.hero-align-center .hero-copy{align-items:center;text-align:center}
.dark-showcase .hero-layout-split.hero-align-center .hero-actions,
.dark-showcase .hero-layout-image_left.hero-align-center .hero-actions{justify-content:center}
.dark-showcase .hero-layout-split.hero-align-right .hero-copy,
.dark-showcase .hero-layout-image_left.hero-align-right .hero-copy{align-items:flex-end;text-align:right}
.dark-showcase .hero-layout-split.hero-align-right .hero-actions,
.dark-showcase .hero-layout-image_left.hero-align-right .hero-actions{justify-content:flex-end}

.dark-showcase .hero-slider{display:none;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.dark-showcase .hero-slider-track{display:flex;width:100%;height:100%;transform:translate3d(0,0,0);transition:transform .52s cubic-bezier(.22,.61,.36,1);will-change:transform}
.dark-showcase .hero-slide{display:none;flex:0 0 100%;width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:var(--hero-background-opacity,1)}
.dark-showcase .hero-slider-arrow,.dark-showcase .hero-slider-dots{display:none}
.dark-showcase .hero-layout-slider{position:relative;padding:0 24px;min-height:620px;overflow:hidden}
.dark-showcase .hero-layout-slider.has-background-image:before{display:none}
.dark-showcase .hero-layout-slider .hero-slider{display:block}
.dark-showcase .hero-layout-slider .hero-grid{grid-template-columns:1fr;min-height:620px;width:100%;max-width:var(--max);gap:0;align-items:center}
.dark-showcase .hero-layout-slider .hero-copy{width:min(720px,calc(100% - 112px));padding:92px 56px 118px;box-sizing:border-box;position:relative;z-index:2}
.dark-showcase .hero-layout-slider .hero-media{display:none}
.dark-showcase .hero-layout-slider .hero-grid{display:none}
.dark-showcase .hero-layout-slider .hero-slider-arrow{position:absolute;top:50%;z-index:4;width:46px;height:46px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(0,0,0,.34);color:#fff;display:grid;place-items:center;cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dark-showcase .hero-layout-slider .hero-slider-arrow span{font-size:31px;line-height:1;margin-top:-2px;color:inherit}
.dark-showcase .hero-layout-slider .hero-slider-arrow[hidden],.dark-showcase .hero-layout-slider .hero-slider-dots[hidden]{display:none!important}
.dark-showcase .hero-layout-slider .hero-slider-prev{left:18px}
.dark-showcase .hero-layout-slider .hero-slider-next{right:18px}
.dark-showcase .hero-layout-slider .hero-slider-dots{position:absolute;left:50%;bottom:24px;z-index:4;display:flex;align-items:center;justify-content:center;gap:9px;transform:translateX(-50%);padding:9px 12px;border-radius:999px;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dark-showcase .hero-layout-slider .hero-slider-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.58);cursor:pointer;transition:transform .18s ease,background .18s ease}
.dark-showcase .hero-layout-slider .hero-slider-dot.is-active{background:#fff;transform:scale(1.28)}
.dark-showcase .hero-layout-slider .hero-slider-arrow:focus-visible,.dark-showcase .hero-layout-slider .hero-slider-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dark-showcase .hero-default :where(h1,h2,h3,h4,h5,h6,strong,b,em,i,label,li){color:var(--hero-text)}
.dark-showcase .quality :where(h1,h2,h3,h4,h5,h6,strong,b,em,i,label,li){color:var(--primary-text)}
.dark-showcase .hero-default :where(p,small){color:var(--hero-muted)}
.dark-showcase .quality :where(p,small){color:var(--primary-muted)}
.dark-showcase .hero-default .badge{background:color-mix(in srgb,var(--accent) 12%,var(--hero-bg));border-color:color-mix(in srgb,var(--accent) 28%,var(--hero-contrast-mix));color:var(--hero-text)}
.dark-showcase .quality .badge{background:color-mix(in srgb,var(--accent) 12%,var(--primary));border-color:color-mix(in srgb,var(--accent) 28%,var(--primary-contrast-mix));color:var(--primary-text)}
.dark-showcase .hero-default .badge span,.dark-showcase .quality .badge span{color:inherit}
.dark-showcase .hero-default .btnmain,.dark-showcase .quality .btnmain{color:var(--accent-text)}
.dark-showcase .hero-default .btnmain span,.dark-showcase .quality .btnmain span{color:inherit}
.dark-showcase .hero-default .btnalt{background:color-mix(in srgb,var(--hero-bg) 88%,var(--hero-contrast-mix));border-color:color-mix(in srgb,var(--hero-bg) 72%,var(--hero-contrast-mix));color:var(--hero-text)}
.dark-showcase .hero-default .btnalt:hover{background:color-mix(in srgb,var(--hero-bg) 82%,var(--hero-contrast-mix))}
.dark-showcase .hero-media{border-radius:8px;background:var(--hero-bg);box-shadow:0 28px 70px rgba(0,0,0,.45)}
.dark-showcase .hero-default .media-placeholder{color:var(--hero-text)}
.dark-showcase .hero-default .media-placeholder span,.dark-showcase .hero-default .media-placeholder small{color:inherit;text-shadow:0 1px 14px color-mix(in srgb,var(--hero-bg) 70%,transparent)}
.media-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(145deg,var(--hero-bg),var(--accent));color:#fff;text-align:center;padding:25px}.media-placeholder span{font-size:12px;font-weight:900;letter-spacing:.12em}.media-placeholder small{font-size:10px;opacity:.65}.media-placeholder.light{background:linear-gradient(145deg,#f3f4f6,var(--surface));color:#6b7280}.section{padding:82px 24px}.inner{max-width:var(--max);margin:auto}.sectionhead{display:block;margin-bottom:34px}.sectionhead>div{max-width:820px}.sectionhead h2,.about-copy h2,.contact-copy h2{margin:0;font-size:clamp(32px,4vw,50px);line-height:1.06;letter-spacing:-.045em}.sectionhead p{margin:14px 0 0;max-width:720px;color:#6b7280;line-height:1.7;font-size:15px}.services{border-top:1px solid #f3f4f6}.filterrow{display:flex;gap:9px;overflow:auto;margin-bottom:30px}.filterchip{border:1px solid #e5e7eb;background:#fff;color:#4b5563;padding:9px 17px;border-radius:999px;font-size:12px;font-weight:800}.filterchip.active{border-color:var(--accent);background:var(--accent);color:var(--accent-text)}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.service-card{text-decoration:none;display:flex;flex-direction:column;gap:12px}.service-thumb{aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:#f3f4f6;position:relative;box-shadow:0 1px 3px rgba(17,24,39,.08);border:1px solid rgba(17,24,39,.06)}.service-thumb .number{position:absolute;inset:0;display:grid;place-items:center;font-size:74px;font-weight:900;color:color-mix(in srgb,var(--accent) 16%,#f3f4f6);background:linear-gradient(145deg,#fafafa,var(--surface))}.service-thumb-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;background:#f3f4f6}.service-thumb-empty span{display:inline-block;color:color-mix(in srgb,var(--accent) 16%,#f3f4f6);font-size:28px;line-height:1;font-weight:900;letter-spacing:-.045em}.service-card h3{font-size:16px;margin:0;font-weight:850}.service-card p{margin:0;color:#6b7280;font-size:13px;line-height:1.6}.tag{align-self:flex-start;background:#f9fafb;border:1px solid #e5e7eb;border-radius:999px;padding:4px 10px;font-size:9px;font-weight:800;letter-spacing:.08em;color:#6b7280;text-transform:uppercase}.aboutsection{background:#f9fafb;border-top:0;border-bottom:1px solid #f3f4f6}.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:62px;align-items:center}.about-media{height:470px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(17,24,39,.045);border:1px solid #eee}.about-copy .eyebrow{display:block;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px}.about-copy p{color:#6b7280;font-size:16px;line-height:1.85;white-space:pre-line;margin:22px 0 0}.about-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:var(--petaq-content-flex-justify,flex-start);margin-top:25px}.video-pill{display:inline-flex;margin-top:25px;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:11px 14px;font-size:11px;font-weight:800;text-decoration:none}.quality{background:var(--primary);color:var(--primary-text)}.quality .sectionhead h2{color:var(--primary-text)}.quality .sectionhead p{color:var(--primary-muted)}.quality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.quality-card{border:1px solid color-mix(in srgb,var(--primary) 76%,var(--primary-contrast-mix));border-radius:15px;padding:27px;background:color-mix(in srgb,var(--primary) 90%,var(--primary-contrast-mix));color:var(--primary-text)}.quality-icon{width:42px;height:42px;border-radius:11px;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;font-size:13px;font-weight:900;margin-bottom:34px}.quality-card h3{font-size:18px;margin:0 0 10px;color:var(--primary-text)}.quality-card p{font-size:13px;line-height:1.7;color:var(--primary-muted);margin:0}.contact{background:var(--surface)}.contact .btnmain{box-shadow:none}.footcta .btnmain{box-shadow:none}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.contact-copy p{color:#6b7280;line-height:1.7;max-width:520px}.details{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:8px 24px}.details div{padding:19px 0;border-bottom:1px solid #f0f1f2}.details div:last-child{border-bottom:0}.details small{display:block;color:#9ca3af;text-transform:uppercase;letter-spacing:.13em;font-size:9px;font-weight:800;margin-bottom:5px}.details strong{font-size:16px}.footcta{background:#fff;border-top:1px solid #eee}.footcta-in{max-width:var(--max);margin:auto;padding:55px 24px;display:flex;align-items:center;justify-content:space-between;gap:30px}.footcta h3{font-size:28px;letter-spacing:-.035em;margin:0 0 7px}.footcta p{color:#6b7280;margin:0}.footer{background:var(--footer);color:color-mix(in srgb,var(--footer-text) 62%,var(--footer))}.footerin{max-width:var(--max);margin:auto;min-height:96px;padding:25px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px}.footer strong{color:var(--footer-text)}.footer-main{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}.footer-main>strong{flex-basis:100%}.footer-copyright{display:inline-block}.footer-legal-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.footer-legal-links a{color:var(--footer-muted);text-decoration:none;font-weight:800;border-bottom:1px solid color-mix(in srgb,var(--footer-muted) 38%,transparent);padding-bottom:1px}.footer-legal-links a:hover{color:var(--footer-text);border-bottom-color:var(--footer-text)}.footer-credit{color:color-mix(in srgb,var(--footer-text) 62%,var(--footer))}.footer-main .petaq-social-links{flex-basis:100%;width:100%;margin-top:2px!important;align-items:center}
@media(max-width:1020px){.service-grid,.quality-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){.navin{justify-content:flex-start}.brandline{min-width:0;flex:1 1 auto;overflow:hidden}.brandline>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu{margin-left:auto;flex:0 0 auto}.menubtn{flex:0 0 auto}.menu a:not(.navcta){display:none}.menubtn{display:block}.hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.hero-layout-image_left .hero-copy,.hero-layout-image_left .hero-media{grid-column:1;grid-row:auto}.hero-default{padding:45px 20px 58px}.hero-grid{gap:38px}.hero-media{max-width:620px;width:100%;margin:auto}.section{padding:65px 20px}.sectionhead{display:block}.sectionhead p{margin-top:13px}.quality-grid{grid-template-columns:1fr}.about-media{height:350px}.footcta-in{display:block}.footcta .btnmain{margin-top:20px}.footerin{flex-direction:column;align-items:flex-start;min-height:120px}}
@media(max-width:860px){.dark-showcase .hero-default.hero-layout-centered{padding-top:45px;padding-bottom:45px}.dark-showcase .hero-default.hero-layout-centered .hero-grid{align-items:center}}
@media(max-width:560px){.service-grid{grid-template-columns:1fr}.footer-main{gap:7px 10px}.footer-legal-links{flex-basis:100%}}

.service-price{display:block;margin:8px 0 2px;font-size:14px;font-weight:800;color:var(--accent)}

/* Mobile header refinement */
@media(max-width:560px){
  .navin{height:56px;padding:0 12px;gap:10px}
  .brandline{min-width:0;gap:8px;font-size:13px;line-height:1;white-space:nowrap;flex:1 1 auto;overflow:hidden}
  .brandline>span:last-child{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brandicon.has-logo{width:26px;height:26px;min-width:26px;max-width:26px;max-height:26px;flex:0 0 26px}.brandicon.is-mark{width:auto;height:auto;min-width:0;flex:0 0 auto;font-size:12px}
  .menu{gap:8px;flex:0 0 auto}
  .navcta{min-height:36px;padding:0 11px;border-radius:8px;font-size:11px;line-height:1;white-space:nowrap;flex:0 0 auto}
  .menubtn{width:34px;height:36px;padding:0;display:grid;place-items:center;font-size:24px;line-height:1;flex:0 0 34px}
  .hero-default{padding:34px 16px 48px}
  .hero-layout-centered{padding-top:56px;padding-bottom:56px}
  .hero-layout-centered .hero-grid{min-height:300px;align-items:center}
  .hero-copy{gap:18px}
  h1{font-size:36px;line-height:1.02;letter-spacing:-.045em}
  .hero-copy p{font-size:15px;line-height:1.6}
  .hero-actions{gap:9px}
  .btnmain,.btnalt{min-height:44px;padding:0 18px;font-size:13px}
}

/* Services and Catalog are separate sections and separate data sources. */
.catalog-section{background:#f9fafb;border-top:1px solid #eef0f3;border-bottom:1px solid #eef0f3}
.catalog-section .service-grid{grid-template-columns:repeat(var(--catalog-columns-desktop,4),minmax(0,1fr))}
@media(min-width:1021px){
  .catalog-section[data-catalog-columns-desktop="auto"] .service-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
}
.catalog-section .service-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px 12px 16px;box-shadow:0 8px 24px rgba(17,24,39,.05)}
.catalog-section .service-thumb{box-shadow:none}
.catalog-empty{grid-column:1/-1;min-height:150px;display:grid;place-items:center;text-align:center;border:1px dashed #d1d5db;border-radius:14px;background:#fff;color:#6b7280;font-size:14px;font-weight:700;padding:28px}
.catalog-card.is-out-of-stock .service-thumb{filter:saturate(.72)}
.catalog-card.is-out-of-stock .service-thumb img{opacity:.78}

/* Product columns are adjustable per device; Auto is the default and fits clean cards to the available width.
   Breakpoint ranges are intentionally non-overlapping so an Auto rule from a
   larger device can never override a fixed Tablet/Mobile choice. */
@media(min-width:561px) and (max-width:1020px){
  .catalog-section .service-grid{
    grid-template-columns:repeat(var(--catalog-columns-tablet,2),minmax(0,1fr));
  }
  .catalog-section[data-catalog-columns-tablet="auto"] .service-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  }
}
@media(max-width:560px){
  .catalog-section .service-grid{
    grid-template-columns:repeat(var(--catalog-columns-mobile,2),minmax(0,1fr));
    gap:10px;
  }
  .catalog-section[data-catalog-columns-mobile="auto"] .service-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  }
  .catalog-section .service-card{
    min-width:0;
    gap:8px;
    padding:8px 8px 12px;
    border-radius:12px;
  }
  .catalog-section .service-thumb{
    border-radius:9px;
  }
  .catalog-section .service-thumb .number{
    font-size:44px;
  }
  .catalog-section .tag{
    max-width:100%;
    padding:3px 7px;
    font-size:7px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .catalog-section .service-card h3{
    font-size:13px;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
  .catalog-section .service-card p{
    font-size:11px;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .catalog-section .service-price{
    margin-top:5px;
    font-size:12px;
  }
}



/* Products category filter: use an explicit class so card visibility is not
   overridden by the flex card layout or preview/editor styles. */
.catalog-card.catalog-filter-hidden{display:none!important}
.catalog-filterrow [data-catalog-filter]{cursor:pointer;pointer-events:auto}

/* Products storefront card refinement: cleaner, more product-focused shopping UI. */
.catalog-section .catalog-grid{
  gap:22px;
}
.catalog-section .catalog-card{
  position:relative;
  gap:0;
  padding:10px 10px 12px;
  border:1px solid #e6e8ec;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 18px rgba(17,24,39,.045);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.catalog-section .catalog-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 20%,#e5e7eb);
  box-shadow:0 16px 36px rgba(17,24,39,.09);
}
.catalog-section .catalog-card .service-thumb{
  aspect-ratio:1/1;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #edf0f3;
  background:linear-gradient(145deg,#f8f9fb,#eef1f5);
}
.catalog-section .catalog-card .service-thumb img{
  transition:transform .28s ease;
}
.catalog-section .catalog-card:hover .service-thumb img{
  transform:scale(1.035);
}
.catalog-section .catalog-card .service-thumb .number{
  font-size:58px;
  letter-spacing:-.055em;
  color:color-mix(in srgb,var(--accent) 24%,#dfe3e8);
  background:linear-gradient(145deg,#fafbfc,#f1f3f6);
}
.catalog-section .catalog-card .catalog-category-tag{
  margin-top:12px;
  width:max-content;
  max-width:100%;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 16%,#e5e7eb);
  background:color-mix(in srgb,var(--accent) 6%,#fff);
  color:color-mix(in srgb,var(--accent) 82%,#374151);
  font-size:8px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.09em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.catalog-section .catalog-card h3{
  margin-top:9px;
  font-size:17px;
  line-height:1.28;
  letter-spacing:-.025em;
  color:#111827;
  font-weight:850;
}
.catalog-section .catalog-card .service-price{
  margin:8px 0 0;
  font-size:17px;
  line-height:1.2;
  letter-spacing:-.015em;
  font-weight:900;
  color:var(--accent);
}
.catalog-section .catalog-card>p{
  margin-top:9px;
  color:#6b7280;
  font-size:12px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

@media(max-width:560px){
  .catalog-section .catalog-grid{gap:10px}
  .catalog-section .catalog-card{
    gap:0;
    padding:7px 7px 9px;
    border-radius:13px;
    box-shadow:0 4px 14px rgba(17,24,39,.045);
  }
  .catalog-section .catalog-card:hover{transform:none}
  .catalog-section .catalog-card .service-thumb{
    aspect-ratio:1/1;
    border-radius:10px;
  }
  .catalog-section .catalog-card .service-thumb .number{font-size:38px}
  .catalog-section .catalog-card .catalog-category-tag{
    margin-top:8px;
    padding:3px 6px;
    font-size:6.5px;
  }
  .catalog-section .catalog-card h3{
    margin-top:6px;
    font-size:12.5px;
    line-height:1.3;
  }
  .catalog-section .catalog-card .service-price{
    margin-top:5px;
    font-size:13.5px;
  }
  .catalog-section .catalog-card>p{
    margin-top:6px;
    font-size:10px;
    line-height:1.4;
    -webkit-line-clamp:2;
  }
}

@media(prefers-reduced-motion:reduce){
  .catalog-section .catalog-card,
  .catalog-section .catalog-card .service-thumb img{transition:none}
}


@media(max-width:860px){
  .dark-showcase .hero-layout-slider{padding:0 18px;min-height:560px}
  .dark-showcase .hero-layout-slider .hero-grid{min-height:560px}
  .dark-showcase .hero-layout-slider .hero-copy{width:min(680px,calc(100% - 82px));padding:78px 38px 106px}
  .dark-showcase .hero-layout-slider .hero-slider-prev{left:12px}
  .dark-showcase .hero-layout-slider .hero-slider-next{right:12px}
}
@media(max-width:560px){
  .dark-showcase .hero-layout-slider{padding:0 12px;min-height:520px}
  .dark-showcase .hero-layout-slider .hero-grid{min-height:520px}
  .dark-showcase .hero-layout-slider .hero-copy{width:100%;padding:70px 46px 96px;align-items:center;text-align:center}
  .dark-showcase .hero-layout-slider .hero-copy p{margin-left:auto;margin-right:auto}
  .dark-showcase .hero-layout-slider .hero-actions{justify-content:center}
  .dark-showcase .hero-layout-slider .hero-slider-arrow{width:40px;height:40px}
  .dark-showcase .hero-layout-slider .hero-slider-arrow span{font-size:27px}
  .dark-showcase .hero-layout-slider .hero-slider-prev{left:8px}
  .dark-showcase .hero-layout-slider .hero-slider-next{right:8px}
  .dark-showcase .hero-layout-slider .hero-slider-dots{bottom:18px;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.dark-showcase .hero-slider-track{transition:none}}

/* Balanced Pinterest-style Gallery. JavaScript places each tile in the shortest column. */
.gallery-section{background:#fff;border-top:1px solid #f3f4f6}
.gallery-sectionhead{margin-bottom:28px}
.gallery-masonry{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.gallery-masonry.is-balanced{display:grid}
.gallery-masonry .gallery-column{display:flex;min-width:0;flex-direction:column;gap:16px}
.gallery-tile{display:block;margin:0;border-radius:16px;overflow:hidden;background:#f3f4f6;border:1px solid rgba(17,24,39,.06);box-shadow:0 8px 24px rgba(17,24,39,.06)}
.gallery-tile img{display:block;width:100%;height:auto;object-fit:cover}
@media(max-width:1020px){.gallery-masonry{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.gallery-masonry{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gallery-masonry .gallery-column{gap:12px}.gallery-tile{border-radius:13px}}
@media(max-width:420px){.gallery-masonry{gap:9px}.gallery-masonry .gallery-column{gap:9px}.gallery-tile{border-radius:11px}}

/* Header layout options from Content > Header. */
.nav.header-mode-hidden{display:none!important}
@media(max-width:860px){
  .nav.header-mode-mobile-no-hamburger .menubtn{display:none!important}
  .nav.header-mode-mobile-no-hamburger .mobile-links{display:none!important}
}

/* Hero PNG: preserve transparency and remove the card/box treatment. */
.dark-showcase .hero-media:has(> img[src*=".png" i]){
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
}
.dark-showcase .hero-media:has(> img[src*=".png" i])::after{
  display:none!important;
  content:none!important;
}
.dark-showcase .hero-media>img[src*=".png" i]{
  object-fit:contain!important;
  opacity:1!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
}


/* Scrolling Text / Marquee section: stronger type in a slimmer ribbon. */
.dark-showcase .marquee-section{
  width:100%;
  overflow:hidden;
  padding:0;
  background:var(--accent);
  color:var(--accent-text);
  border-top:1px solid color-mix(in srgb,var(--accent-text) 12%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent-text) 12%,transparent);
}
.dark-showcase .marquee-section.is-empty{display:none}
.dark-showcase .marquee-viewport{width:100%;overflow:hidden}
.dark-showcase .marquee-track{
  display:flex;
  width:max-content;
  min-width:200%;
  will-change:transform;
  /* Motion is driven by the shared JS marquee engine so Straight and Follow
     stay identical in preview and on the published website. */
  animation:none;
}
.dark-showcase .marquee-group{
  flex:0 0 auto;
  min-width:100vw;
  display:flex;
  align-items:center;
  justify-content:space-around;
}
.dark-showcase .marquee-item{
  flex:0 0 auto;
  white-space:nowrap;
  padding:10px 25px;
  font-size:clamp(14px,.82vw,16px);
  line-height:1.1;
  font-weight:850;
  letter-spacing:.055em;
}
.dark-showcase .marquee-separator{
  flex:0 0 auto;
  font-size:8px;
  line-height:1;
  opacity:.68;
}
/* When the next section also has a shape divider, the generated spacer lives
   inside the marquee. Keep that spacer deliberately short so the purple band
   stays elegant instead of becoming a tall block. */
.dark-showcase .marquee-section > .petaq-shape-divider-spacing{
  height:clamp(18px,1.35vw,24px)!important;
}
@media(max-width:560px){
  .dark-showcase .marquee-item{padding:9px 16px;font-size:13px;letter-spacing:.045em}
  .dark-showcase .marquee-section > .petaq-shape-divider-spacing{height:16px!important}
}
@media(prefers-reduced-motion:reduce){
  .dark-showcase .marquee-track{animation:none;transform:none}
}
.dark-showcase .marquee-section .marquee-accessible{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Repeatable Services / Why Choose Us: empty editor slots stay out of layout. */
.dark-showcase .service-grid>.service-card[hidden],
.dark-showcase .quality-grid>.quality-card[hidden]{display:none!important}


/* Custom Table section ---------------------------------------------------- */
.dark-showcase .table-sectionhead{align-items:end}
/* Keep the table visually tied to the active site theme instead of falling back
   to generic grey. The section band still controls the base background/text,
   while the Accent colour supplies the table's header, borders and row tint. */
.dark-showcase .custom-table-shell{margin-top:32px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--accent) 4%,var(--petaq-band-bg,var(--section_background)));color:var(--petaq-band-text,var(--section-text));box-shadow:none}
.dark-showcase .custom-table-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.dark-showcase .custom-table{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;table-layout:auto;color:inherit;background:transparent}
.dark-showcase .custom-table th,.dark-showcase .custom-table td{padding:17px 20px;border-right:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,transparent);text-align:left;vertical-align:top;line-height:1.5;overflow-wrap:anywhere}
.dark-showcase .custom-table th:last-child,.dark-showcase .custom-table td:last-child{border-right:0}
.dark-showcase .custom-table tbody tr:last-child td{border-bottom:0}
.dark-showcase .custom-table thead th{font-size:12px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;color:var(--petaq-band-text,var(--section-text));background:color-mix(in srgb,var(--accent) 14%,var(--petaq-band-bg,var(--section_background)))}
.dark-showcase .custom-table tbody td{font-size:14px;background:color-mix(in srgb,var(--accent) 2%,var(--petaq-band-bg,var(--section_background)))}
.dark-showcase .custom-table tbody td:first-child{font-weight:750}
.dark-showcase .custom-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--accent) 7%,var(--petaq-band-bg,var(--section_background)))}
@media(max-width:700px){
  .dark-showcase .custom-table-shell{margin-top:24px;border-radius:15px}
  .dark-showcase .custom-table{min-width:560px}
  .dark-showcase .custom-table th,.dark-showcase .custom-table td{padding:14px 16px}
}

/* Gallery demo tiles: removable placeholders that reveal the masonry shape before real images are added. */
.dark-showcase .gallery-tile-demo{position:relative;min-height:130px;box-shadow:none!important;border-color:rgba(17,24,39,.055)}
.dark-showcase .gallery-tile-demo.is-portrait{aspect-ratio:4/5}
.dark-showcase .gallery-tile-demo.is-landscape{aspect-ratio:4/3}
.dark-showcase .gallery-tile-demo.is-square{aspect-ratio:1/1}
.dark-showcase .gallery-tile-demo.is-tall{aspect-ratio:3/4}
.dark-showcase .gallery-tile-demo.is-wide{aspect-ratio:16/10}
.dark-showcase .gallery-demo-art{
  width:100%;height:100%;min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#f3f4f6;color:#94a3b8;text-align:center;padding:18px
}
.dark-showcase .gallery-demo-art span{font-size:11px;font-weight:900;letter-spacing:.16em}
.dark-showcase .gallery-demo-art small{font-size:10px;font-weight:700;opacity:.8}

/* Product search */
.catalog-search-wrap{margin:0 0 18px}
.catalog-search{width:min(100%,520px);min-height:48px;display:grid;grid-template-columns:48px minmax(0,1fr) 42px;align-items:center;background:#fff;border:1px solid #dfe3e8;border-radius:13px;box-shadow:0 1px 2px rgba(17,24,39,.03);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
.catalog-search:focus-within{border-color:color-mix(in srgb,var(--accent) 58%,#dfe3e8);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.catalog-search-icon{width:48px;height:100%;display:grid;place-items:center;color:#374151;pointer-events:none}
.catalog-search-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.catalog-search input{appearance:none;-webkit-appearance:none;width:100%;height:46px;min-width:0;margin:0!important;padding:0 10px 0 0!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:#111827;font:inherit;font-size:14px}
.catalog-search input::placeholder{color:#9ca3af;opacity:1}
.catalog-search-clear{width:34px;height:34px;display:grid;place-items:center;justify-self:center;border:0;background:transparent;border-radius:9px;color:#6b7280;cursor:pointer;padding:0}
.catalog-search-clear:hover{background:#f3f4f6;color:#111827}
.catalog-search-clear[hidden]{display:none!important}
.catalog-search-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.catalog-no-results{margin-top:6px;min-height:120px;place-items:center;text-align:center;border:1px dashed #d1d5db;border-radius:14px;background:#fff;color:#6b7280;font-size:14px;font-weight:700;padding:28px}
.catalog-no-results:not([hidden]){display:grid}
.catalog-section.catalog-hide-search .catalog-search-wrap{display:none!important}
@media(max-width:640px){.catalog-search{width:100%;grid-template-columns:44px minmax(0,1fr) 40px}.catalog-search-icon{width:44px}.catalog-search input{font-size:13px}}

/* Products category display modes ---------------------------------------- */
.catalog-filterrow .catalog-category-avatar{display:none}
.catalog-filterrow .catalog-category-filter-name{display:inline}
.catalog-category-style-image_name .catalog-filterrow,
.catalog-category-style-image_only .catalog-filterrow{
  gap:16px;
  align-items:flex-start;
  padding:2px 1px 5px;
  scrollbar-width:thin;
}
.catalog-category-style-image_name .catalog-filterrow .filterchip,
.catalog-category-style-image_only .catalog-filterrow .filterchip{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:72px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--petaq-band-muted,var(--surface-muted));
  box-shadow:none;
  font-size:11px;
  line-height:1.25;
  text-align:center;
}
.catalog-category-style-image_name .catalog-filterrow .filterchip:hover,
.catalog-category-style-image_only .catalog-filterrow .filterchip:hover{
  background:transparent;
  color:var(--petaq-band-text,var(--surface-text));
}
.catalog-category-style-image_name .catalog-filterrow .catalog-category-avatar,
.catalog-category-style-image_only .catalog-filterrow .catalog-category-avatar{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  border:2px solid #e5e7eb;
  background:#f4f5f7;
  color:#6b7280;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.catalog-category-style-image_name .catalog-filterrow .catalog-category-avatar img,
.catalog-category-style-image_only .catalog-filterrow .catalog-category-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.catalog-category-style-image_name .catalog-filterrow .filterchip:hover .catalog-category-avatar,
.catalog-category-style-image_only .catalog-filterrow .filterchip:hover .catalog-category-avatar{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 45%,#e5e7eb);
}
.catalog-category-style-image_name .catalog-filterrow .filterchip.active,
.catalog-category-style-image_only .catalog-filterrow .filterchip.active{
  background:transparent;
  color:var(--petaq-band-text,var(--surface-text));
}
.catalog-category-style-image_name .catalog-filterrow .filterchip.active .catalog-category-avatar,
.catalog-category-style-image_only .catalog-filterrow .filterchip.active .catalog-category-avatar{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
.catalog-category-style-image_name .catalog-filterrow .catalog-category-filter-name{
  display:block;
  color:inherit;
  max-width:92px;
  font-weight:800;
  white-space:normal;
}
.catalog-category-style-image_only .catalog-filterrow .filterchip{
  min-width:66px;
  gap:0;
}
.catalog-category-style-image_only .catalog-filterrow .catalog-category-filter-name{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@media(max-width:640px){
  .catalog-category-style-image_name .catalog-filterrow,
  .catalog-category-style-image_only .catalog-filterrow{gap:13px}
  .catalog-category-style-image_name .catalog-filterrow .catalog-category-avatar,
  .catalog-category-style-image_only .catalog-filterrow .catalog-category-avatar{width:58px;height:58px}
  .catalog-category-style-image_name .catalog-filterrow .filterchip{min-width:64px}
  .catalog-category-style-image_only .catalog-filterrow .filterchip{min-width:58px}
}

/* Product card metadata: keep stock on the same fixed row as price so card content does not shift. */
.catalog-section .catalog-card .catalog-meta-row{
  display:flex;
  align-items:center;
  width:100%;
  margin-top:12px;
  min-height:23px;
}
.catalog-section .catalog-card .catalog-meta-row .catalog-category-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  min-height:23px;
  margin:0;
  padding:0 9px;
  border-radius:999px;
  box-sizing:border-box;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.06em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.catalog-section .catalog-card .catalog-price-stock-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:24px;
  margin-top:8px;
}
.catalog-section .catalog-card .catalog-price-stock-row .service-price{
  flex:1 1 auto;
  min-width:0;
  margin:0;
}
.catalog-section .catalog-card .catalog-stock-line{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex:0 0 auto;
  min-height:17px;
  margin:0;
  color:#15803d;
  font-size:11px;
  line-height:1.3;
  font-weight:750;
  text-align:right;
  white-space:nowrap;
}
.catalog-section .catalog-card .catalog-stock-line.is-out-of-stock{color:#b42318}
.catalog-section .catalog-card .catalog-stock-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:currentColor;
}
.catalog-section .catalog-card .catalog-price-stock-row.is-price-empty,
.catalog-section.catalog-hide-price .catalog-card .catalog-price-stock-row{
  justify-content:flex-start;
}
.catalog-section .catalog-card .catalog-price-stock-row.is-price-empty .catalog-stock-line,
.catalog-section.catalog-hide-price .catalog-card .catalog-price-stock-row .catalog-stock-line{
  justify-content:flex-start;
  margin-left:0;
  text-align:left;
}

@media(max-width:560px){
  .catalog-section .catalog-card .catalog-meta-row{
    margin-top:8px;
    min-height:20px;
  }
  .catalog-section .catalog-card .catalog-meta-row .catalog-category-tag{
    min-height:20px;
    margin:0;
    padding:0 6px;
    font-size:6.5px;
    line-height:1;
  }
  .catalog-section .catalog-card .catalog-price-stock-row{
    gap:6px;
    min-height:20px;
    margin-top:5px;
  }
  .catalog-section .catalog-card .catalog-price-stock-row .service-price{
    margin:0;
  }
  .catalog-section .catalog-card .catalog-stock-line{
    gap:4px;
    min-height:14px;
    font-size:8.5px;
    line-height:1.2;
  }
  .catalog-section .catalog-card .catalog-stock-dot{
    width:5px;
    height:5px;
    flex-basis:5px;
  }
}
.catalog-section.catalog-hide-stock .catalog-card .catalog-stock-line{display:none!important}
.catalog-section .catalog-card .catalog-price-display{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px 7px;
}
.catalog-section .catalog-card .catalog-price-display .catalog-current-price{
  color:inherit;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
}
.catalog-section .catalog-card .catalog-price-display .catalog-regular-price{
  color:#98a2b3;
  font-size:.7em;
  line-height:1.2;
  font-weight:700;
  text-decoration-thickness:1.2px;
  white-space:nowrap;
}
@media(max-width:560px){
  .catalog-section .catalog-card .catalog-price-display{gap:3px 5px}
  .catalog-section .catalog-card .catalog-price-display .catalog-regular-price{font-size:.68em}
}
.catalog-section.catalog-hide-category .catalog-card .catalog-category-tag{display:none!important}


/* FAQ section */
.faq-section{background:#fff;border-top:1px solid #f1f2f4;border-bottom:1px solid #f1f2f4}.faq-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:72px;align-items:start}.faq-intro{position:sticky;top:108px;min-width:0}.faq-intro h2{margin:16px 0 0;font-size:clamp(32px,4vw,50px);line-height:1.06;letter-spacing:-.045em;color:#111827}.faq-intro p{margin:16px 0 0;max-width:540px;color:#6b7280;font-size:15px;line-height:1.75}.faq-list{display:grid;gap:12px;min-width:0}.faq-item{border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(17,24,39,.03);overflow:hidden}.faq-item[hidden]{display:none!important}.faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:18px;align-items:center;padding:20px 20px 20px 22px;color:#111827;font-size:15px;line-height:1.45;font-weight:600}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:"+";width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f6f7f9;color:#111827;font-size:20px;font-weight:500;line-height:1;transition:transform .16s ease,background .16s ease,color .16s ease}.faq-item[open] summary::after{content:"−";background:var(--accent);color:var(--accent-text)}.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:14px}.faq-answer{padding:0 66px 21px 22px}.faq-answer p{margin:0;color:#6b7280;font-size:14px;line-height:1.75;white-space:pre-line}.faq-item[open]{border-color:color-mix(in srgb,var(--accent) 24%,#e5e7eb);box-shadow:0 8px 24px rgba(17,24,39,.05)}
@media(max-width:860px){.faq-layout{grid-template-columns:1fr;gap:30px}.faq-intro{position:static}.faq-intro p{max-width:680px}}
@media(max-width:560px){.faq-item summary{padding:17px 16px 17px 17px;grid-template-columns:minmax(0,1fr) 30px;gap:12px;font-size:14px}.faq-item summary::after{width:30px;height:30px;border-radius:9px;font-size:18px}.faq-answer{padding:0 17px 18px}.faq-answer p{font-size:13px}.faq-list{gap:10px}}

/* FAQ polish: keep the whole active card visually rounded and remove square mobile tap flash. */
.faq-item summary{-webkit-tap-highlight-color:transparent;border-radius:15px}
.faq-item[open]{background:color-mix(in srgb,var(--accent) 3.5%,#fff)}
.faq-item[open] summary{border-radius:15px 15px 0 0}
.faq-item summary.petaq-editor-hover,.faq-item summary.petaq-editor-selected{border-radius:15px!important}
.faq-item[open] summary.petaq-editor-hover,.faq-item[open] summary.petaq-editor-selected{border-radius:15px 15px 0 0!important}

/* Editable content-section backgrounds + automatic readable text contrast.
   Bands are assigned from the CURRENT visible section order by template.php. */
.dark-showcase .petaq-band-section{
  --petaq-band-bg:var(--section_background);
  --petaq-band-text:var(--section-text);
  --petaq-band-muted:var(--section-muted);
  --petaq-band-mix:var(--section-contrast-mix)
}
.dark-showcase .petaq-band-alternate{
  --petaq-band-bg:var(--surface);
  --petaq-band-text:var(--surface-text);
  --petaq-band-muted:var(--surface-muted);
  --petaq-band-mix:var(--surface-contrast-mix)
}

/* Optional per-section override. Auto keeps the alternating class above.
   Custom mode overrides only this band's CSS variables, while readable text
   contrast continues to be calculated automatically. */
.dark-showcase [data-alternating-section][data-section-background-mode="custom"]{
  --petaq-band-bg:var(--petaq-custom-bg);
  --petaq-band-text:var(--petaq-custom-text);
  --petaq-band-muted:var(--petaq-custom-muted);
  --petaq-band-mix:var(--petaq-custom-mix)
}
.dark-showcase [data-alternating-section]{
  background:var(--petaq-band-bg,var(--section_background));
  border-color:color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 10%,transparent)
}

/* Text sitting directly on either editable band follows that band's contrast.
   Self-contained white cards/controls keep their own fixed readable dark text. */
.dark-showcase [data-alternating-section] .sectionhead h2,
.dark-showcase .services[data-alternating-section] .service-card h3,
.dark-showcase .faq-section[data-alternating-section] .faq-intro h2,
.dark-showcase .aboutsection[data-alternating-section] .about-copy h2,
.dark-showcase .contact[data-alternating-section] .contact-copy h2,
.dark-showcase .footcta[data-alternating-section] h3{color:var(--petaq-band-text,var(--section-text))}
.dark-showcase [data-alternating-section] .sectionhead p,
.dark-showcase .services[data-alternating-section] .service-card p,
.dark-showcase .faq-section[data-alternating-section] .faq-intro p,
.dark-showcase .aboutsection[data-alternating-section] .about-copy p,
.dark-showcase .contact[data-alternating-section] .contact-copy p,
.dark-showcase .footcta[data-alternating-section] p{color:var(--petaq-band-muted,var(--section-muted))}

/* Transparent image/name product category labels also follow whichever band the
   Products section receives after reorder/hide changes. */
.dark-showcase .catalog-section[data-alternating-section].catalog-category-style-image_name .catalog-filterrow .filterchip,
.dark-showcase .catalog-section[data-alternating-section].catalog-category-style-image_only .catalog-filterrow .filterchip{color:var(--petaq-band-muted,var(--section-muted))}
.dark-showcase .catalog-section[data-alternating-section].catalog-category-style-image_name .catalog-filterrow .filterchip:hover,
.dark-showcase .catalog-section[data-alternating-section].catalog-category-style-image_only .catalog-filterrow .filterchip:hover,
.dark-showcase .catalog-section[data-alternating-section].catalog-category-style-image_name .catalog-filterrow .filterchip.active,
.dark-showcase .catalog-section[data-alternating-section].catalog-category-style-image_only .catalog-filterrow .filterchip.active{color:var(--petaq-band-text,var(--section-text))}

/* These controls/cards keep a light surface, so force their own readable dark text
   even when the surrounding editable band becomes dark. */
.dark-showcase .aboutsection .video-pill,
.dark-showcase .contact .details{color:#111827}

/* Contact + lead form layout: the contact copy, details and form share the same
   typography rhythm and use clean outlined surfaces instead of dull grey fills. */
.dark-showcase .contact-has-form .contact-layout{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  grid-template-areas:
    "copy form"
    "details form";
  column-gap:58px;
  row-gap:22px;
  align-items:start;
}
.dark-showcase .contact-has-form .contact-copy{grid-area:copy;min-width:0;padding-top:3px}
.dark-showcase .contact-has-form .contact-copy p{
  margin-top:16px;
  max-width:540px;
  font-size:15px;
  line-height:1.75;
}
.dark-showcase .contact-has-form .contact-copy .btnmain{margin-top:20px!important}
.dark-showcase .contact-has-form .details{
  grid-area:details;
  min-width:0;
  margin:0;
  padding:5px 22px;
  background:transparent;
  color:var(--petaq-band-text,var(--section-text));
  border-color:color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 11%,transparent);
  border-radius:15px;
  box-shadow:none;
}
.dark-showcase .contact-has-form .details div{
  padding:17px 0;
  border-bottom-color:color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 8%,transparent)
}
.dark-showcase .contact-has-form .details small{
  margin-bottom:6px;
  color:var(--petaq-band-muted,var(--section-muted));
  font-size:10px;
  letter-spacing:.12em;
}
.dark-showcase .contact-has-form .details strong{
  color:var(--petaq-band-text,var(--section-text));
  font-size:15px;
  line-height:1.45;
  font-weight:800;
}
.dark-showcase .contact-has-form .contact-form-column{grid-area:form;min-width:0;width:100%}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-shell{width:100%;max-width:none;margin:0}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-card{
  width:100%;
  border-radius:16px;
  padding:30px 32px 27px;
  background:transparent;
  border-color:color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 11%,transparent);
}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-head{margin-bottom:24px;padding-bottom:20px}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-head strong{
  font-size:22px;
  line-height:1.18;
  letter-spacing:-.035em;
}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-head span{font-size:14px;line-height:1.6}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-grid{gap:20px 16px}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-field label{font-size:12px;font-weight:750;letter-spacing:0;text-transform:none}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-field input{height:50px}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-field textarea{min-height:144px}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-actions{margin-top:24px;padding-top:20px}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-note{font-size:11px}
.dark-showcase .contact-has-form .contact-form-column .petaq-lead-submit{font-size:13px;min-height:46px}

@media(max-width:900px){
  .dark-showcase .contact-has-form .contact-layout{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "details" "form";
    gap:24px;
  }
  .dark-showcase .contact-has-form .contact-copy{padding-top:0}
  .dark-showcase .contact-has-form .contact-form-column{margin-top:4px}
}
@media(max-width:560px){
  .dark-showcase .contact-has-form .contact-layout{gap:20px}
  .dark-showcase .contact-has-form .details{padding:3px 18px;border-radius:14px}
  .dark-showcase .contact-has-form .details div{padding:15px 0}
  .dark-showcase .contact-has-form .contact-form-column .petaq-lead-card{padding:21px 18px 18px;border-radius:14px}
  .dark-showcase .contact-has-form .contact-form-column .petaq-lead-head{margin-bottom:20px;padding-bottom:17px}
  .dark-showcase .contact-has-form .contact-form-column .petaq-lead-head strong{font-size:20px}
  .dark-showcase .contact-has-form .contact-form-column .petaq-lead-head span{font-size:13px}
}

/* Shape divider: the divider is part of the destination section.
   It inherits that section background, so there is intentionally no separate
   divider colour control. A transparent layout spacer is inserted at the end
   of the previous visible section so the divider gets its own room instead of
   consuming the section spacing that existed before dividers were enabled. */
.dark-showcase .petaq-shape-divider-spacing{
  display:block!important;
  width:100%!important;
  height:var(--petaq-shape-divider-spacing-height,0px)!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
  font-size:0!important;
  line-height:0!important;
  pointer-events:none!important;
  user-select:none!important
}
.dark-showcase [data-shape-divider-active="1"]{
  position:relative;
  z-index:2;
  overflow:visible!important
}
.dark-showcase [data-shape-divider-active="1"]::after{
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:calc(-1 * var(--petaq-shape-divider-height,56px) + 1px);
  width:100%;
  height:var(--petaq-shape-divider-height,56px);
  margin:0;
  padding:0;
  border:0;
  outline:0;
  box-shadow:none;
  background:inherit;
  pointer-events:none;
  z-index:0;
  clip-path:polygon(0 34%,100% 34%,100% 100%,0 100%);
  -webkit-mask-image:var(--petaq-shape-divider-mask);
  mask-image:var(--petaq-shape-divider-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center bottom;
  mask-position:center bottom;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%
}
.dark-showcase [data-shape-divider-active="1"] > *{position:relative;z-index:1}
/* Shape divider mask support: disable the simple fallback clip when SVG masks work. */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  /* Hide the mask image's top raster edge. Some Chromium/WebKit zoom/DPR
     combinations can expose it as a 1px horizontal hairline even though that
     part of the SVG is transparent. The real divider shape starts several
     pixels lower, so this 2px safety crop does not change the divider design. */
  .dark-showcase [data-shape-divider-active="1"]::after{
    -webkit-clip-path:inset(2px 0 0 0);
    clip-path:inset(2px 0 0 0)
  }
}

.dark-showcase [data-shape-divider-style="waves-large"]{--petaq-shape-divider-height:clamp(52px,7vw,86px);--petaq-shape-divider-clearance:clamp(48px,6.42vw,79px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2056%20C145%2017%20300%2010%20458%2044%20C640%2088%20838%2096%201008%2061%20C1080%2046%201147%2031%201200%2022%20L1200%20120%20L0%20120%20Z%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="waves-medium"]{--petaq-shape-divider-height:clamp(34px,5vw,58px);--petaq-shape-divider-clearance:clamp(29px,4.22vw,49px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27p%27%20width%3D%27190%27%20height%3D%27120%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2042%20Q47%2020%2095%2042%20T190%2042%20L190%20120%20L0%20120%20Z%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%271200%27%20height%3D%27120%27%20fill%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="waves-small"]{--petaq-shape-divider-height:clamp(20px,3vw,34px);--petaq-shape-divider-clearance:clamp(17px,2.43vw,28px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27p%27%20width%3D%2758%27%20height%3D%27120%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2032%20Q14.5%2021%2029%2032%20T58%2032%20L58%20120%20L0%20120%20Z%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%271200%27%20height%3D%27120%27%20fill%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="zigzag-large"]{--petaq-shape-divider-height:clamp(38px,5vw,62px);--petaq-shape-divider-clearance:clamp(32px,4.18vw,52px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27p%27%20width%3D%27128%27%20height%3D%27120%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2049%20L61%2018%20L128%2049%20L128%20120%20L0%20120%20Z%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%271200%27%20height%3D%27120%27%20fill%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="zigzag-medium"]{--petaq-shape-divider-height:clamp(27px,4vw,46px);--petaq-shape-divider-clearance:clamp(22px,3.23vw,37px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27p%27%20width%3D%2764%27%20height%3D%27120%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2039%20L31%2020%20L64%2039%20L64%20120%20L0%20120%20Z%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%271200%27%20height%3D%27120%27%20fill%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="zigzag-small"]{--petaq-shape-divider-height:clamp(18px,2.5vw,30px);--petaq-shape-divider-clearance:clamp(15px,2vw,24px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27p%27%20width%3D%2730%27%20height%3D%27120%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2031%20L14%2019%20L30%2031%20L30%20120%20L0%20120%20Z%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%271200%27%20height%3D%27120%27%20fill%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="wave-1"]{--petaq-shape-divider-height:clamp(54px,7vw,88px);--petaq-shape-divider-clearance:clamp(45px,5.61vw,71px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2025%20C155%2093%20324%20109%20492%2076%20C682%2037%20822%2031%20997%2068%20C1084%2084%201146%2090%201200%2086%20L1200%20120%20L0%20120%20Z%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="wave-2"]{--petaq-shape-divider-height:clamp(54px,7vw,88px);--petaq-shape-divider-clearance:clamp(50px,6.36vw,81px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2011%20C210%2050%20384%2089%20586%20101%20C816%20114%201000%20105%201200%2080%20L1200%20120%20L0%20120%20Z%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="tilt-1"]{--petaq-shape-divider-height:clamp(34px,5vw,58px);--petaq-shape-divider-clearance:clamp(21px,3.02vw,35px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2047%20L1200%2076%20L1200%20120%20L0%20120%20Z%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="tilt-2"]{--petaq-shape-divider-height:clamp(34px,5vw,58px);--petaq-shape-divider-clearance:clamp(28px,4.08vw,47px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2080%20L1200%2022%20L1200%20120%20L0%20120%20Z%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="mountains-1"]{--petaq-shape-divider-height:clamp(48px,6vw,78px);--petaq-shape-divider-clearance:clamp(40px,5vw,65px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2073%20L370%2020%20L775%2082%20L1200%2059%20L1200%20120%20L0%20120%20Z%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="mountains-2"]{--petaq-shape-divider-height:clamp(52px,7vw,84px);--petaq-shape-divider-clearance:clamp(44px,5.94vw,71px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2029%20L145%2067%20L306%2038%20L466%2060%20L700%2018%20L852%2083%20L1016%2044%20L1200%2072%20L1200%20120%20L0%20120%20Z%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="rough-edge"]{--petaq-shape-divider-height:clamp(30px,4vw,48px);--petaq-shape-divider-clearance:clamp(20px,2.7vw,32px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27p%27%20width%3D%27260%27%20height%3D%27120%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2057%20L13%2053%20L24%2054%20L34%2050%20L46%2051%20L56%2044%20L66%2049%20L74%2047%20L83%2052%20L95%2051%20L108%2055%20L119%2050%20L132%2051%20L143%2046%20L153%2049%20L164%2043%20L177%2050%20L189%2048%20L201%2054%20L214%2052%20L226%2057%20L238%2051%20L249%2054%20L260%2057%20L260%20120%20L0%20120%20Z%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%271200%27%20height%3D%27120%27%20fill%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E")}
.dark-showcase [data-shape-divider-style="cloud-scallop"]{--petaq-shape-divider-height:clamp(38px,5vw,62px);--petaq-shape-divider-clearance:clamp(31px,4.1vw,51px);--petaq-shape-divider-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27p%27%20width%3D%27300%27%20height%3D%27120%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M0%2058%20C0%2045%2013%2037%2028%2037%20C43%2037%2056%2045%2056%2058%20C56%2047%2068%2042%2082%2042%20C96%2042%20108%2047%20108%2058%20C108%2034%20129%2022%20153%2022%20C177%2022%20198%2034%20198%2058%20C198%2045%20213%2035%20229%2035%20C245%2035%20260%2045%20260%2058%20C260%2050%20269%2045%20280%2045%20C291%2045%20300%2050%20300%2058%20L300%20120%20L0%20120%20Z%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%271200%27%20height%3D%27120%27%20fill%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E")}

/* Scrolling Text can use the exact active divider contour as its motion path.
   Straight marquee remains in the layout as the height/fallback; once the SVG
   path is ready it is only visually hidden, so section spacing stays identical. */
/* Contain the scrollable overflow too: clip-path alone only clips paint.
   The full-width measurement line, hidden SVG and offscreen animated glyphs
   must never enlarge the page's horizontal scrolling area. */
.dark-showcase .marquee-follow-viewport{
  display:block;
  position:absolute!important;
  left:0;
  top:-160px;
  width:100%;
  max-width:100%;
  height:320px;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:3!important
}
.dark-showcase .marquee-follow-canvas{
  position:absolute;
  left:0;
  top:160px;
  width:100%;
  height:0;
  overflow:visible;
  pointer-events:none
}
/* Modern engines can clip only the horizontal axis without becoming a scroll
   container. Keep the original zero-height geometry origin and vertical paint
   allowance. The padded box above supplies the same origin on older engines. */
@supports (overflow:clip){
  .dark-showcase .marquee-follow-viewport{
    top:0;
    height:0;
    overflow-x:clip;
    overflow-y:visible;
    -webkit-clip-path:inset(-160px 0 -160px 0);
    clip-path:inset(-160px 0 -160px 0)
  }
  .dark-showcase .marquee-follow-canvas{top:0}
}
.dark-showcase .marquee-follow-svg{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:100%;
  overflow:visible;
  visibility:hidden;
  pointer-events:none
}
.dark-showcase .marquee-follow-layer{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  overflow:visible;
  color:inherit;
  transform:translate3d(0,var(--petaq-marquee-path-effective-offset,var(--petaq-marquee-path-offset,18px)),0);
  transform-origin:0 0;
  pointer-events:none
}
.dark-showcase .marquee-follow-measure,
.dark-showcase .marquee-follow-glyph{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:max-content;
  white-space:pre;
  font-family:inherit;
  font-size:16px;
  line-height:1;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:none;
  font-kerning:normal;
  font-variant-ligatures:none;
  pointer-events:none
}
.dark-showcase .marquee-follow-measure{
  visibility:hidden!important;
  transform:none!important
}
.dark-showcase .marquee-follow-glyph{
  visibility:hidden;
  transform-origin:50% 50%;
  transition:none!important;
  animation:none!important;
  backface-visibility:hidden
}
.dark-showcase .marquee-follow-glyph.is-measuring{
  visibility:hidden!important;
  transform:none!important
}
/* Keep the ordinary marquee visually centred inside the complete divider ribbon too.
   JS calculates this from the real top and next-section divider geometry. */
.dark-showcase .marquee-section[data-shape-divider-active="1"] [data-marquee-straight]{
  transform:translate3d(0,var(--petaq-marquee-straight-center-shift,0px),0)
}
.dark-showcase .marquee-section.marquee-path-ready[data-marquee-path-mode="follow"][data-shape-divider-active="1"] [data-marquee-straight]{
  visibility:hidden
}
.dark-showcase .marquee-section.marquee-path-ready[data-marquee-path-mode="follow"][data-shape-divider-active="1"] .marquee-follow-viewport{
  opacity:1;
  visibility:visible
}
@media(max-width:560px){
  .dark-showcase .marquee-follow-measure,
  .dark-showcase .marquee-follow-glyph{font-size:13px;letter-spacing:.045em}
}


/* Scrolling Text: exact vertical centering.
   The viewport/track use a real flex center instead of relying on line-height
   and vertical padding, so the label stays centred after ribbon resizing. */
.dark-showcase .marquee-viewport{
  display:flex;
  align-items:center;
  min-height:36px;
}
.dark-showcase .marquee-track{
  align-items:center;
  min-height:36px;
}
.dark-showcase .marquee-group{
  min-height:36px;
}
.dark-showcase .marquee-item{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:0 25px;
  line-height:1;
}
.dark-showcase .marquee-separator{
  display:flex;
  align-items:center;
  align-self:stretch;
  line-height:1;
}
@media(max-width:560px){
  .dark-showcase .marquee-viewport,
  .dark-showcase .marquee-track,
  .dark-showcase .marquee-group,
  .dark-showcase .marquee-item{min-height:32px}
  .dark-showcase .marquee-item{padding:0 16px}
}

/* Appointment Request — native responsive section; all colors follow the theme. */
.dark-showcase .appointment-section{width:100%;min-width:0}
.dark-showcase .appointment-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,76px);align-items:start}
.dark-showcase .appointment-copy{min-width:0}
.dark-showcase .appointment-copy h2{margin:22px 0 18px;font-size:clamp(32px,4vw,50px);line-height:1.06;letter-spacing:-.045em;overflow-wrap:anywhere}
.dark-showcase .appointment-copy>p{font-size:15px;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere}
.dark-showcase .appointment-note{display:flex;align-items:flex-start;gap:13px;padding:21px 0;margin-top:22px;border-top:1px solid color-mix(in srgb,currentColor 15%,transparent)}
.dark-showcase .appointment-note>svg{flex:0 0 22px;color:var(--accent);margin-top:3px}
.dark-showcase .appointment-note strong{display:block;font-size:14px;line-height:1.5}
.dark-showcase .appointment-note span{display:block;font-size:13px;line-height:1.7;margin-top:5px;opacity:.78}
.dark-showcase .appointment-copy .appointment-zone{font-size:12px;line-height:1.7;opacity:.8}
.dark-showcase .appointment-card{position:relative;min-width:0;padding:clamp(20px,3vw,36px);border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:20px;background:var(--section_background,#fff);color:var(--section-text,#111827);box-shadow:0 18px 48px rgba(0,0,0,.045)}
.dark-showcase .appointment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;min-width:0;margin:0;padding:0;border:0}
.dark-showcase .appointment-fields label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:12px;font-weight:750;line-height:1.5}
.dark-showcase .appointment-fields .appointment-wide{grid-column:1/-1}
.dark-showcase .appointment-fields input,.dark-showcase .appointment-fields select,.dark-showcase .appointment-fields textarea{display:block;width:100%;min-width:0;max-width:100%;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:10px;padding:11px 12px;background:transparent;color:inherit;font:inherit;font-size:16px;font-weight:400;line-height:1.5;box-sizing:border-box}
.dark-showcase .appointment-fields select{padding-right:48px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m7 10 5 5 5-5%27/%3E%3C/svg%3E");background-position:right 16px center;background-size:18px 18px;background-repeat:no-repeat}
.dark-showcase .appointment-fields select option{background:var(--section_background,#fff);color:var(--section-text,#111827)}
.dark-showcase .appointment-fields textarea{resize:vertical}
.dark-showcase .appointment-fields :is(input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dark-showcase .appointment-contact-note,.dark-showcase .appointment-preview-note{font-size:11px;line-height:1.7;opacity:.75;margin:18px 0}
.dark-showcase .appointment-submit{width:100%;display:flex;justify-content:space-between;gap:12px;font:inherit;font-size:13px;font-weight:800;border:0;cursor:pointer;white-space:normal;text-align:left;overflow-wrap:anywhere}
.dark-showcase .appointment-submit:disabled{opacity:.5;cursor:not-allowed}
.dark-showcase .appointment-notice{padding:14px 16px;margin-bottom:20px;border-radius:10px;border:1px solid currentColor;font-size:13px;line-height:1.6;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dark-showcase .appointment-notice.is-error{border-style:dashed}
.dark-showcase .appointment-unavailable{font-size:12px;line-height:1.6}
.dark-showcase .appointment-hp,.dark-showcase .appointment-sr{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px){.dark-showcase .appointment-layout{grid-template-columns:minmax(0,1fr);gap:24px}}
@media(max-width:560px){.dark-showcase .appointment-fields{grid-template-columns:minmax(0,1fr)}.dark-showcase .appointment-card{padding:20px 16px;border-radius:15px}}

.dark-showcase .appointment-refresh{font:inherit;font-size:12px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:7px;padding:7px 10px;margin:0 0 14px;cursor:pointer}
.dark-showcase .appointment-refresh:disabled{opacity:.5;cursor:default}

/* Appointment booking workspace: calendar first, contact details second. */
.dark-showcase .appointment-layout{grid-template-columns:minmax(0,.65fr) minmax(0,1.6fr);gap:clamp(28px,4vw,60px)}
.dark-showcase .appointment-copy{padding-top:18px}.dark-showcase .appointment-copy h2{font-size:clamp(32px,3.5vw,48px);line-height:1.12}.dark-showcase .appointment-card{padding:clamp(20px,3vw,36px);border-radius:24px;box-shadow:0 20px 70px #00000009}
.dark-showcase .appointment-widget-heading{display:flex;gap:12px;align-items:center;margin:0 0 22px}.dark-showcase .appointment-widget-heading h3{font-size:19px;letter-spacing:-.4px;line-height:1.3;margin:0 0 4px}.dark-showcase .appointment-widget-heading p{font-size:12px;line-height:1.6;opacity:.65;margin:0}.dark-showcase .appointment-step{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);border-radius:11px;font-size:12px;font-weight:700}
.dark-showcase .appointment-scheduling{display:block}.dark-showcase .appointment-scheduling>label{margin-bottom:22px}.dark-showcase .appointment-scheduling select{background-color:color-mix(in srgb,currentColor 3%,var(--section_background));min-height:48px}.dark-showcase .appointment-native-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.dark-showcase .appointment-enhanced .appointment-native-choices{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dark-showcase .appointment-picker{display:none;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}.dark-showcase .appointment-enhanced .appointment-picker{display:grid}.dark-showcase .appointment-picker h4{font-size:13px;font-weight:700;line-height:1.4;margin:0 0 14px}.dark-showcase .appointment-calendar-panel,.dark-showcase .appointment-time-panel{min-width:0}.dark-showcase .appointment-time-panel{border-left:1px solid color-mix(in srgb,currentColor 12%,transparent);padding-left:24px}.dark-showcase .appointment-picker-zone{font-size:11px;line-height:1.5;opacity:.6;margin:-5px 0 14px}
.dark-showcase .appointment-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.dark-showcase .appointment-calendar-head strong{font-size:13px;font-weight:650}.dark-showcase .appointment-calendar-head button{width:30px;height:30px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:7px;background:transparent;color:inherit;font:inherit;font-size:22px;cursor:pointer}
.dark-showcase .appointment-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.dark-showcase .appointment-weekday{font-size:10px;opacity:.5;text-align:center;padding:6px 0}.dark-showcase .appointment-calendar-grid button{display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:8px;background:color-mix(in srgb,var(--accent) 5%,transparent);color:inherit;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.dark-showcase .appointment-calendar-grid button:disabled{opacity:.28;border-color:transparent;background:transparent;cursor:default}.dark-showcase .appointment-calendar-head button:disabled{opacity:.25;cursor:default}.dark-showcase .appointment-calendar-grid button[aria-pressed=true]:not(:disabled),.dark-showcase .appointment-time-chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-text,#fff)}
.dark-showcase .appointment-time-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:290px;overflow-y:auto;padding:2px}.dark-showcase .appointment-time-chip{min-height:42px;padding:8px 4px;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:11px;font-weight:600;cursor:pointer;white-space:normal}.dark-showcase .appointment-time-chip:hover:not(:disabled){border-color:var(--accent)}.dark-showcase .appointment-time-empty{grid-column:1/-1;padding:20px 8px;font-size:12px;line-height:1.8;opacity:.6;text-align:center}
.dark-showcase .appointment-selected{display:flex;gap:12px;align-items:flex-start;margin:26px 0 28px;padding:16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}.dark-showcase .appointment-selected-icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--accent);color:var(--accent-text);font-size:12px}.dark-showcase .appointment-selected strong{font-size:12px}.dark-showcase .appointment-selected p{font-size:12px;line-height:1.7;opacity:.75;margin:4px 0 0;overflow-wrap:anywhere}
.dark-showcase .appointment-customer input,.dark-showcase .appointment-customer textarea{font-size:14px}.dark-showcase .appointment-customer textarea{min-height:80px}.dark-showcase .appointment-submit{min-height:50px;align-items:center;border-radius:10px;margin-top:4px}.dark-showcase .appointment-refresh{border:0;text-decoration:underline;text-underline-offset:3px;padding:4px 0;font-size:11px}.dark-showcase .appointment-contact-note{margin:16px 0 8px}.dark-showcase .appointment-unavailable{line-height:1.7;margin:10px 0}.dark-showcase .appointment-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:1050px){.dark-showcase .appointment-layout{grid-template-columns:minmax(0,1fr)}.dark-showcase .appointment-copy{max-width:650px;padding-top:0}.dark-showcase .appointment-copy h2{margin-top:16px}.dark-showcase .appointment-note{margin-top:12px;padding:14px 0}}
@media(max-width:600px){.dark-showcase .appointment-card{padding:22px 16px;border-radius:18px}.dark-showcase .appointment-picker{grid-template-columns:minmax(0,1fr);gap:22px}.dark-showcase .appointment-time-panel{border-left:0;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);padding:18px 0 0}.dark-showcase .appointment-calendar-grid button{aspect-ratio:auto;min-height:38px}.dark-showcase .appointment-time-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:190px}.dark-showcase .appointment-customer input,.dark-showcase .appointment-customer textarea{font-size:16px}.dark-showcase .appointment-calendar-panel{max-width:380px;width:100%;margin:auto}}

/* Compact appointment section; the booking calendar opens in the native top layer. */
.dark-showcase .appointment-layout{grid-template-columns:minmax(0,1fr) minmax(220px,.45fr);align-items:center;gap:clamp(24px,5vw,80px)}
.dark-showcase .appointment-copy{padding:0;max-width:670px}.dark-showcase .appointment-copy h2{margin:16px 0}.dark-showcase .appointment-note{display:none}.dark-showcase .appointment-copy .appointment-zone{margin-bottom:0}
.dark-showcase .appointment-launch{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0;text-align:center}.dark-showcase .appointment-launch-icon{display:grid;place-items:center;width:62px;height:62px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:18px}.dark-showcase .appointment-launch p{font-size:12px;line-height:1.6;opacity:.65;margin:0}.dark-showcase .appointment-open{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;min-height:52px;border:0;border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:normal;text-align:left}
.dark-showcase .appointment-dialog{position:fixed;inset:0;margin:auto;width:min(860px,calc(100% - 32px));max-width:860px;max-height:90vh;max-height:90dvh;padding:0;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:22px;overflow:hidden;overscroll-behavior:contain;background:var(--section_background,#fff);color:var(--section-text,#111827);font-family:var(--site-font,inherit);box-shadow:0 28px 100px #0004;box-sizing:border-box;text-align:left;flex-direction:column}
.dark-showcase .appointment-dialog[open]{display:flex}.dark-showcase .appointment-dialog:not([open]){display:none}.dark-showcase .appointment-dialog::backdrop{background:#0b1120b8;backdrop-filter:blur(4px)}
.dark-showcase .appointment-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);position:relative;z-index:2;flex:0 0 auto;background:var(--section_background,#fff)}.dark-showcase .appointment-dialog-header span{font-size:10px;font-weight:700;letter-spacing:1.5px;opacity:.55}.dark-showcase .appointment-dialog-header h2{font-size:22px;line-height:1.25;letter-spacing:-.5px;margin:5px 0 0}
.dark-showcase .appointment-dialog-close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:25px;cursor:pointer}.dark-showcase .appointment-dialog .appointment-card{margin:0;padding:26px 28px 28px;border:0;border-radius:0;box-shadow:none;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.dark-showcase .appointment-open:focus-visible,.dark-showcase .appointment-dialog-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.dark-showcase .appointment-layout{grid-template-columns:minmax(0,1fr);gap:24px}.dark-showcase .appointment-launch{align-items:flex-start;text-align:left}.dark-showcase .appointment-launch-icon{display:none}.dark-showcase .appointment-open{width:auto;min-width:230px;max-width:100%}.dark-showcase .appointment-dialog{width:calc(100% - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:16px}.dark-showcase .appointment-dialog-header{padding:18px}.dark-showcase .appointment-dialog-header h2{font-size:19px}.dark-showcase .appointment-dialog .appointment-card{padding:20px 16px}}

/* Two focused booking steps; time options expand instead of scrolling internally. */
.dark-showcase .appointment-dialog{width:min(960px,calc(100% - 32px));max-width:960px}
.dark-showcase .appointment-dialog [data-appointment-step-one][hidden],.dark-showcase .appointment-dialog [data-appointment-step-two][hidden]{display:none!important}
.dark-showcase .appointment-progress{font-size:11px;font-weight:700;letter-spacing:.3px;opacity:.65;margin:0 0 22px}
.dark-showcase .appointment-dialog .appointment-picker{grid-template-columns:minmax(250px,.9fr) minmax(0,1.35fr);gap:28px}
.dark-showcase .appointment-dialog .appointment-time-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible}
.dark-showcase .appointment-wizard-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.dark-showcase .appointment-next,.dark-showcase .appointment-back{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:48px;padding:12px 22px;border-radius:10px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.dark-showcase .appointment-next{border:0}.dark-showcase .appointment-next:disabled{opacity:.4;cursor:not-allowed}.dark-showcase .appointment-back{border:1px solid color-mix(in srgb,currentColor 20%,transparent);background:transparent;color:inherit}.dark-showcase .appointment-wizard-actions .appointment-submit{width:auto;min-width:210px;margin:0;gap:24px}
.dark-showcase [data-appointment-step-two] .appointment-selected{margin:0 0 24px}.dark-showcase .appointment-next:focus-visible,.dark-showcase .appointment-back:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.dark-showcase .appointment-dialog{width:calc(100% - 20px)}.dark-showcase .appointment-dialog .appointment-picker{grid-template-columns:minmax(0,1fr);gap:22px}.dark-showcase .appointment-dialog .appointment-time-panel{border-left:0;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);padding:18px 0 0}.dark-showcase .appointment-dialog .appointment-time-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible}.dark-showcase .appointment-next{width:100%}.dark-showcase .appointment-wizard-actions .appointment-submit{min-width:0;flex:1}.dark-showcase .appointment-back{padding:12px 16px}}

/* Keep an explicit availability refresh visually stable without making a newly selected service/date look available before its request resolves. */
.dark-showcase .appointment-card[data-appointment-refreshing="true"] .appointment-calendar-grid button:disabled,
.dark-showcase .appointment-card[data-appointment-refreshing="true"] .appointment-time-chip:disabled{opacity:.68;border-color:color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,currentColor 3%,transparent);color:inherit;cursor:wait}
.dark-showcase .appointment-card[data-appointment-refreshing="true"] .appointment-calendar-grid button[aria-pressed="true"]:disabled,
.dark-showcase .appointment-card[data-appointment-refreshing="true"] .appointment-time-chip[aria-pressed="true"]:disabled{opacity:1;background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:inherit}
.dark-showcase .appointment-calendar-grid button.is-unavailable-date:disabled,
.dark-showcase .appointment-time-chip.is-unavailable:disabled{opacity:.58;background:color-mix(in srgb,currentColor 5%,transparent);border-color:color-mix(in srgb,currentColor 22%,transparent);color:inherit;cursor:not-allowed}
.dark-showcase .appointment-calendar-grid button.is-unavailable-date[aria-pressed="true"]:disabled,
.dark-showcase .appointment-calendar-grid button.is-previous-selection:disabled,
.dark-showcase .appointment-time-chip.is-previous-selection:disabled{opacity:.68!important;background:color-mix(in srgb,var(--accent) 9%,transparent)!important;border-color:color-mix(in srgb,var(--accent) 34%,transparent)!important;color:inherit!important;cursor:not-allowed!important}
.dark-showcase .appointment-dialog .appointment-time-grid{align-content:start}

/* Appointment landing section — use the same dedicated Primary colour family as
   the default Why Choose Us section, while keeping the appointment layout intact. */
.dark-showcase .appointment-section{
  --petaq-band-bg:var(--primary);
  --petaq-band-text:var(--primary-text);
  --petaq-band-muted:var(--primary-muted);
  --petaq-band-mix:var(--primary-contrast-mix);
  position:relative;
  isolation:auto;
  overflow:visible;
  background:var(--primary);
  color:var(--primary-text)
}
/* No decorative circles/blobs in the section corners. */
.dark-showcase .appointment-section::before,
.dark-showcase .appointment-layout::before,
.dark-showcase .appointment-launch-card::after{content:none!important;display:none!important}

.dark-showcase .appointment-layout{
  position:relative;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:start;
  gap:clamp(34px,4.2vw,58px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none
}
.dark-showcase .appointment-layout>.appointment-copy,
.dark-showcase .appointment-layout>.appointment-launch{position:relative;z-index:1}
.dark-showcase .appointment-copy{
  max-width:620px;
  padding-top:3px;
  color:var(--petaq-band-text,var(--section-text))
}
.dark-showcase .appointment-copy .badge{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--primary-contrast-mix));
  background:color-mix(in srgb,var(--accent) 12%,var(--primary));
  color:var(--primary-text)
}
.dark-showcase .appointment-copy h2{
  max-width:620px;
  margin:18px 0 16px;
  font-size:clamp(32px,4vw,50px);
  line-height:1.06;
  letter-spacing:-.045em;
  color:var(--petaq-band-text,var(--section-text))
}
.dark-showcase .appointment-copy>p{
  max-width:560px;
  margin:0;
  color:var(--petaq-band-muted,var(--section-muted));
  font-size:15px;
  line-height:1.75
}
.dark-showcase .appointment-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px
}
.dark-showcase .appointment-benefits>span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--primary) 76%,var(--primary-contrast-mix));
  border-radius:9px;
  background:color-mix(in srgb,var(--primary) 90%,var(--primary-contrast-mix));
  font-size:11px;
  font-weight:750;
  color:var(--primary-text)
}
.dark-showcase .appointment-benefits svg{color:var(--accent);flex:0 0 auto}
.dark-showcase .appointment-note{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-top:24px;
  padding:20px 0;
  border-top:1px solid color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 10%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 10%,transparent);
  color:var(--petaq-band-text,var(--section-text))
}
.dark-showcase .appointment-note>svg{flex:0 0 22px;margin-top:3px;color:var(--accent)}
.dark-showcase .appointment-note strong{display:block;font-size:14px;line-height:1.5;color:var(--petaq-band-text,var(--section-text))}
.dark-showcase .appointment-note span{display:block;margin-top:5px;font-size:13px;line-height:1.7;color:var(--petaq-band-muted,var(--section-muted));opacity:1}
.dark-showcase .appointment-zone{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  padding-top:0;
  font-size:11px;
  line-height:1.55;
  color:var(--petaq-band-muted,var(--section-muted))
}
.dark-showcase .appointment-zone strong{color:var(--petaq-band-text,var(--section-text));font-weight:750}
.dark-showcase .appointment-zone-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:1px solid color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 11%,transparent);
  border-radius:9px;
  background:transparent;
  color:var(--accent)
}

.dark-showcase .appointment-launch{display:block;min-width:0;text-align:left;color:var(--petaq-band-text,var(--section-text))}
.dark-showcase .appointment-launch-card{
  position:relative;
  padding:30px 32px 27px;
  border:1px solid color-mix(in srgb,var(--primary) 76%,var(--primary-contrast-mix));
  border-radius:16px;
  background:color-mix(in srgb,var(--primary) 90%,var(--primary-contrast-mix));
  color:var(--primary-text);
  box-shadow:none;
  overflow:visible
}
.dark-showcase .appointment-launch-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding-bottom:20px;
  border-bottom:1px solid color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 9%,transparent)
}
.dark-showcase .appointment-launch-icon{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border:1px solid var(--accent);
  border-radius:11px;
  background:var(--accent);
  color:var(--accent-text)
}
.dark-showcase .appointment-launch-title{min-width:0}
.dark-showcase .appointment-launch-title>span{
  display:block;
  margin-bottom:4px;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
  color:var(--petaq-band-muted,var(--section-muted))
}
.dark-showcase .appointment-launch-title>strong{
  display:block;
  font-size:16px;
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--petaq-band-text,var(--section-text))
}
.dark-showcase .appointment-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  color:var(--petaq-band-text,var(--section-text));
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em
}
.dark-showcase .appointment-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:none
}
.dark-showcase .appointment-mini-flow{display:grid;gap:0;margin:8px 0 20px}
.dark-showcase .appointment-mini-step{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:13px 0
}
.dark-showcase .appointment-mini-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:16px;
  top:42px;
  bottom:-6px;
  width:1px;
  background:color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 12%,transparent)
}
.dark-showcase .appointment-mini-step>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--accent);
  border-radius:9px;
  background:var(--accent);
  font-size:9px;
  font-weight:850;
  color:var(--accent-text)
}
.dark-showcase .appointment-mini-step strong{
  display:block;
  padding-top:1px;
  font-size:12px;
  line-height:1.4;
  color:var(--petaq-band-text,var(--section-text))
}
.dark-showcase .appointment-mini-step small{
  display:block;
  margin-top:3px;
  font-size:10px;
  line-height:1.45;
  color:var(--petaq-band-muted,var(--section-muted))
}
.dark-showcase .appointment-open{
  position:relative;
  z-index:1;
  width:100%;
  min-height:52px;
  padding:0 10px 0 18px;
  border:0;
  border-radius:10px;
  box-shadow:none;
  font-size:13px;
  font-weight:800;
  text-align:left
}
.dark-showcase .appointment-open:hover{box-shadow:none}
.dark-showcase .appointment-open-arrow{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:8px;
  background:color-mix(in srgb,var(--accent-text) 16%,transparent);
  font-size:15px
}
.dark-showcase .appointment-launch-foot{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:12px 0 0!important;
  color:var(--petaq-band-muted,var(--section-muted));
  font-size:10px!important;
  line-height:1.5!important;
  opacity:1!important
}
.dark-showcase .appointment-launch-foot>span{color:var(--accent);font-weight:900}

@media(max-width:900px){
  .dark-showcase .appointment-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .dark-showcase .appointment-copy{max-width:720px;padding-top:0}
  .dark-showcase .appointment-launch{width:100%}
  .dark-showcase .appointment-launch-card{max-width:620px}
  .dark-showcase .appointment-open{width:100%;min-width:0;max-width:none}
}
@media(max-width:560px){
  .dark-showcase .appointment-section{padding-left:20px;padding-right:20px}
  .dark-showcase .appointment-layout{gap:24px}
  .dark-showcase .appointment-copy h2{font-size:clamp(32px,10.5vw,44px)}
  .dark-showcase .appointment-benefits{gap:7px;margin-top:20px}
  .dark-showcase .appointment-benefits>span{font-size:10px}
  .dark-showcase .appointment-launch-card{padding:21px 18px 18px;border-radius:14px}
  .dark-showcase .appointment-launch-head{grid-template-columns:auto minmax(0,1fr);gap:11px;padding-bottom:17px}
  .dark-showcase .appointment-live{grid-column:2;justify-self:start;margin-top:-4px}
  .dark-showcase .appointment-launch-icon{width:46px;height:46px;border-radius:10px}
  .dark-showcase .appointment-launch-icon svg{width:24px;height:24px}
  .dark-showcase .appointment-mini-step{padding:11px 0}
  .dark-showcase .appointment-zone{align-items:flex-start}
  .dark-showcase .appointment-launch-foot{justify-content:flex-start}
}

/* Catalog layout option: image on the left, product details on the right.
   The selectors are device-specific so Desktop / Tablet / Mobile can each use
   this layout independently while the existing Default card stays untouched. */
@media(min-width:1021px){
  .catalog-section[data-catalog-columns-desktop="auto"][data-catalog-thumbnail-layout-desktop="image_left"] .catalog-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));
  }
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card{
    display:grid;
    grid-template-columns:minmax(76px,38%) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    column-gap:14px;
    row-gap:0;
    align-items:start;
    min-height:184px;
    padding:10px;
  }
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .service-thumb{
    grid-column:1;
    grid-row:1 / -1;
    align-self:start;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1/1;
    border-radius:13px;
  }
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .catalog-meta-row,
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card>h3,
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .catalog-price-stock-row,
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card>p,
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .catalog-card-actions{grid-column:2;min-width:0}
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .catalog-meta-row{grid-row:1;margin-top:1px;min-height:22px}
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card>h3{grid-row:2;margin-top:7px;font-size:15px;line-height:1.28}
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .catalog-price-stock-row{grid-row:3;margin-top:7px;gap:7px;flex-wrap:wrap;justify-content:flex-start}
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .catalog-stock-line{justify-content:flex-start;text-align:left}
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card>p{grid-row:4;margin-top:7px;font-size:11px;line-height:1.45;-webkit-line-clamp:3}
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .catalog-card-actions{grid-row:5;align-self:end;padding-top:10px}
  .catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .catalog-add-cart{min-height:36px;border-radius:9px;font-size:10.5px}
}

@media(min-width:561px) and (max-width:1020px){
  .catalog-section[data-catalog-columns-tablet="auto"][data-catalog-thumbnail-layout-tablet="image_left"] .catalog-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  }
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card{
    display:grid;
    grid-template-columns:minmax(72px,38%) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    column-gap:12px;
    row-gap:0;
    align-items:start;
    min-height:172px;
    padding:9px;
  }
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .service-thumb{
    grid-column:1;
    grid-row:1 / -1;
    align-self:start;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1/1;
    border-radius:12px;
  }
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .catalog-meta-row,
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card>h3,
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .catalog-price-stock-row,
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card>p,
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .catalog-card-actions{grid-column:2;min-width:0}
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .catalog-meta-row{grid-row:1;margin-top:0;min-height:21px}
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card>h3{grid-row:2;margin-top:6px;font-size:14px;line-height:1.28}
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .catalog-price-stock-row{grid-row:3;margin-top:6px;gap:6px;flex-wrap:wrap;justify-content:flex-start}
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .catalog-stock-line{justify-content:flex-start;text-align:left}
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card>p{grid-row:4;margin-top:6px;font-size:10.5px;line-height:1.42;-webkit-line-clamp:3}
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .catalog-card-actions{grid-row:5;align-self:end;padding-top:8px}
  .catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .catalog-add-cart{min-height:34px;border-radius:8px;font-size:10px}
}

@media(max-width:560px){
  /* Image-left mobile: keep the square thumbnail prominent without letting it
     create one large empty flexible row above the cart action. */
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card{
    display:grid;
    /* Cap the square image on wider phones. The card still hugs the image with
       equal outer padding, while the detail column gets enough usable width. */
    grid-template-columns:clamp(124px,38%,164px) minmax(0,1fr);
    /* All detail rows are intrinsic. Previously row 4 was flexible, so all
       spare image height became a single obvious blank area above the button. */
    grid-template-rows:auto auto auto auto auto;
    column-gap:10px;
    row-gap:0;
    align-items:center;
    min-height:0;
    padding:8px;
  }
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .service-thumb{
    grid-column:1;
    grid-row:1 / -1;
    align-self:stretch;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1/1;
    border-radius:10px;
  }
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-meta-row,
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card>h3,
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-price-stock-row,
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card>p,
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-card-actions{grid-column:2;min-width:0}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-meta-row{grid-row:1;margin-top:0;min-height:18px;align-self:center}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-meta-row .catalog-category-tag{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:18px;min-height:18px;padding:2px 6px 0;font-size:6.5px;line-height:1}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card>h3{grid-row:2;margin-top:0;font-size:13.5px;line-height:1.26;align-self:center}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-price-stock-row{grid-row:3;margin-top:0;min-height:20px;gap:5px;flex-wrap:nowrap;justify-content:space-between;align-self:center}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-price-stock-row .service-price{font-size:13px}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-stock-line{justify-content:flex-end;text-align:right;font-size:8.5px}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card>p{grid-row:4;margin-top:0;font-size:10px;line-height:1.4;-webkit-line-clamp:2;align-self:center}
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-card-actions{
    grid-row:5;
    align-self:stretch;
    display:flex;
    align-items:stretch;
    /* Keep a small, intentional gap between description and CTA. */
    margin-top:8px;
    padding-top:0;
  }
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-add-cart{
    width:100%;
    min-height:34px;
    height:100%;
    max-height:38px;
    border-radius:8px;
    padding:0 8px;
    font-size:9.5px;
  }
  .catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .catalog-card-quantity-control{
    min-height:34px;
    height:100%;
    max-height:38px;
    grid-template-columns:34px minmax(0,1fr) 34px;
  }
}

/* Keep 1:1 product thumbnails neatly cropped in the Image left layout. */
.catalog-section[data-catalog-thumbnail-layout-desktop="image_left"] .catalog-card .service-thumb img,
.catalog-section[data-catalog-thumbnail-layout-tablet="image_left"] .catalog-card .service-thumb img,
.catalog-section[data-catalog-thumbnail-layout-mobile="image_left"] .catalog-card .service-thumb img{width:100%;height:100%;object-fit:cover}

/* Hero content alignment - final responsive layer.
   Text blocks keep identical widths in Left / Center / Right so alignment does
   not change line wrapping, Hero height, grid columns, media position or gaps. */
.dark-showcase .hero-default .hero-copy>h1{width:100%}
/* Manual Hero headline highlight. A short phrase from the headline can be
   highlighted in multiple selectable styles without changing the headline copy itself. */
.dark-showcase .hero-default .hero-copy>h1[data-hero-title-highlight-root]{position:relative}
.dark-showcase .hero-title-highlight{position:relative;display:inline-block;isolation:isolate;padding:.02em .03em .12em}
.dark-showcase .hero-title-highlight-text{position:relative;z-index:1;color:var(--hero-title-highlight-text-color,inherit)}
.dark-showcase .hero-title-highlight-decoration{position:absolute;pointer-events:none;z-index:0;color:var(--hero-title-highlight-color,var(--accent))}
.dark-showcase .hero-title-highlight--wave{position:static;display:inline;padding:0}
.dark-showcase .hero-title-highlight--wave .hero-title-highlight-text{position:relative;z-index:1}
.dark-showcase .hero-title-highlight--wave .hero-title-highlight-decoration{position:absolute;inset:0;overflow:visible;color:var(--hero-title-highlight-color,var(--accent))}
.dark-showcase .hero-title-highlight-wave-segment{position:absolute;display:block;overflow:hidden;pointer-events:none;color:inherit}
.dark-showcase .hero-title-highlight-wave-segment svg{position:absolute;left:0;top:0;width:200%;height:100%;max-width:none;overflow:visible;animation:petaq-hero-highlight-wave 1.6s linear infinite;transform:translateX(0)}
.dark-showcase .hero-title-highlight-wave-segment path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dark-showcase .hero-title-highlight--line{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.02em .05em .05em .03em;background-image:linear-gradient(var(--hero-title-highlight-color,var(--accent)),var(--hero-title-highlight-color,var(--accent)));background-repeat:repeat-x;background-size:100% .12em;background-position:0 calc(100% - .24em)}
.dark-showcase .hero-title-highlight--line .hero-title-highlight-decoration{display:none}
.dark-showcase .hero-title-highlight--marker{padding:.06em .16em .08em .14em}
.dark-showcase .hero-title-highlight--marker .hero-title-highlight-decoration{left:-.04em;right:-.04em;top:.10em;bottom:.03em;border-radius:0;background:currentColor;opacity:1;animation:petaq-hero-highlight-marker 2.4s ease-in-out infinite}
.dark-showcase .hero-title-highlight--circle{padding:.07em .22em .11em .18em}
.dark-showcase .hero-title-highlight--circle .hero-title-highlight-decoration{left:-.16em;right:-.16em;top:-.14em;bottom:-.10em;border:.11em solid currentColor;border-radius:999px;opacity:.96;transform:rotate(-3deg);animation:petaq-hero-highlight-circle 2.6s ease-in-out infinite}
.dark-showcase .hero-title-highlight--italic{padding:.01em .08em .04em .03em}.dark-showcase .hero-title-highlight--italic .hero-title-highlight-text{font-style:italic;display:inline-block;letter-spacing:-.035em;word-spacing:0;margin-inline:.01em .045em;color:var(--hero-title-highlight-text-color,var(--hero-title-highlight-color,var(--accent)))}
.dark-showcase .hero-title-highlight--italic .hero-title-highlight-decoration{display:none}
@keyframes petaq-hero-highlight-wave{to{transform:translateX(-50%)}}
@keyframes petaq-hero-highlight-line{0%,100%{transform:rotate(-1.6deg) scaleX(.88);opacity:.8}50%{transform:rotate(-2.1deg) scaleX(1);opacity:1}}
@keyframes petaq-hero-highlight-marker{0%,50%,100%{opacity:1}}
@keyframes petaq-hero-highlight-circle{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(-1.2deg) scale(1.03,.98)}}
.dark-showcase .hero-title-highlight--static .hero-title-highlight-decoration,
.dark-showcase .hero-title-highlight--static .hero-title-highlight-decoration svg,
.dark-showcase .hero-title-highlight--static .hero-title-highlight-wave-segment svg{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .dark-showcase .hero-title-highlight-wave-segment svg,
  .dark-showcase .hero-title-highlight--line .hero-title-highlight-decoration,
  .dark-showcase .hero-title-highlight--marker .hero-title-highlight-decoration,
  .dark-showcase .hero-title-highlight--circle .hero-title-highlight-decoration{animation:none}
}
.dark-showcase .hero-default .hero-copy>p{width:100%;max-width:610px}
.dark-showcase .hero-default .hero-actions{width:100%}
.dark-showcase .hero-default.hero-align-left .hero-copy{align-items:stretch;text-align:left}
.dark-showcase .hero-default.hero-align-left .hero-copy>.badge{align-self:flex-start}
.dark-showcase .hero-default.hero-align-left .hero-copy>p{margin-left:0;margin-right:auto}
.dark-showcase .hero-default.hero-align-left .hero-actions{justify-content:flex-start}
.dark-showcase .hero-default.hero-align-center .hero-copy{align-items:stretch;text-align:center}
.dark-showcase .hero-default.hero-align-center .hero-copy>.badge{align-self:center}
.dark-showcase .hero-default.hero-align-center .hero-copy>p{margin-left:auto;margin-right:auto}
.dark-showcase .hero-default.hero-align-center .hero-actions{justify-content:center}
.dark-showcase .hero-default.hero-align-right .hero-copy{align-items:stretch;text-align:right}
.dark-showcase .hero-default.hero-align-right .hero-copy>.badge{align-self:flex-end}
.dark-showcase .hero-default.hero-align-right .hero-copy>p{margin-left:auto;margin-right:0}
.dark-showcase .hero-default.hero-align-right .hero-actions{justify-content:flex-end}

/* Standard Hero canvas ----------------------------------------------------
   Keep every Hero layout on the same minimum canvas so background artwork
   can be prepared consistently. Content may still grow beyond the minimum
   rather than being clipped when a heading, CTA or stacked mobile layout
   needs more room. Recommended background artwork: 1920 x 900 px, with the
   important subject kept near the centre for cover-cropping. */
.dark-showcase .hero-default{
  --hero-standard-height:680px;
  min-height:var(--hero-standard-height);
}
.dark-showcase .hero-layout-slider,
.dark-showcase .hero-layout-slider .hero-grid{
  min-height:var(--hero-standard-height);
}
@media(max-width:1020px){
  .dark-showcase .hero-default{--hero-standard-height:560px}
}
@media(max-width:560px){
  .dark-showcase .hero-default{--hero-standard-height:520px}
}


/* Clients & collaborators --------------------------------------------------
   Compact social-proof wall inspired by editorial logo rows, translated into
   Dark Showcase's rounded, purple-accented visual system. */
.dark-showcase .clients-section{
  border-top:1px solid color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 7%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--petaq-band-text,var(--section-text)) 7%,transparent);
}
.dark-showcase .clients-inner{max-width:var(--max)}
.dark-showcase .clients-head{text-align:left;margin-bottom:38px}
.dark-showcase .clients-head>div{max-width:780px;margin:0 auto 0 0}
.dark-showcase .clients-head .badge{margin:0 auto 0 0}
.dark-showcase .clients-head h2{max-width:760px;margin:16px auto 0 0}
.dark-showcase .clients-head>p{max-width:650px;margin:14px auto 0 0}
.dark-showcase .clients-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
/* Clients logo display mode. Static remains the backward-compatible default.
   Auto slide duplicates the visible logo row and translates exactly one group
   width for a continuous loop without a visible jump. */
.dark-showcase .clients-marquee-viewport{width:100%;min-width:0}
.dark-showcase .clients-marquee-track{width:100%;min-width:0}
.dark-showcase .clients-grid-clone{display:none}
.dark-showcase .clients-section.clients-display-auto_slide .clients-marquee-viewport{
  overflow:hidden;
  box-sizing:border-box;
  padding-block:24px;
  margin-block:-24px;
}
.dark-showcase .clients-section.clients-display-auto_slide .clients-marquee-track{
  display:flex;
  width:max-content;
  min-width:100%;
  will-change:transform;
}
.dark-showcase .clients-section.clients-display-auto_slide.clients-slide-ready .clients-marquee-track{
  /* Motion is driven by the Clients runtime requestAnimationFrame loop. */
  animation:none;
}
.dark-showcase .clients-section.clients-display-auto_slide .clients-grid{
  display:flex;
  flex:none;
  width:max-content;
  grid-template-columns:none;
  gap:12px;
  padding-right:12px;
}
.dark-showcase .clients-section.clients-display-auto_slide .clients-grid-clone{display:flex}
.dark-showcase .clients-section.clients-display-auto_slide .client-mark{
  flex:0 0 clamp(150px,15vw,190px);
  width:clamp(150px,15vw,190px);
}
@media(max-width:680px){
  .dark-showcase .clients-section.clients-display-auto_slide .clients-grid{gap:10px;padding-right:10px}
  .dark-showcase .clients-section.clients-display-auto_slide .client-mark{flex-basis:140px;width:140px}
}
@media(prefers-reduced-motion:reduce){
  /* Public sites respect the visitor's reduced-motion preference. The editor
     preview still animates so selecting Auto slide visibly demonstrates it. */
  .dark-showcase .clients-section:not([data-clients-preview="1"]).clients-display-auto_slide .clients-marquee-viewport{overflow-x:auto;scrollbar-width:thin}
  .dark-showcase .clients-section:not([data-clients-preview="1"]).clients-display-auto_slide .clients-marquee-track{animation:none!important;transform:none!important}
}
.dark-showcase .client-mark{min-width:0;margin:0}
.dark-showcase .client-mark-media{
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border:1px solid rgba(17,24,39,.075);
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(17,24,39,.012);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.dark-showcase .client-mark:hover .client-mark-media{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 34%,#e5e7eb);
  box-shadow:0 8px 22px rgba(17,24,39,.04);
}
.dark-showcase .client-wordmark{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#111827;
  font-size:18px;
  font-weight:850;
  line-height:1.1;
  letter-spacing:-.035em;
  opacity:.56;
  transition:color .18s ease,opacity .18s ease;
}
.dark-showcase .client-mark:hover .client-wordmark{color:var(--accent);opacity:.92}
.dark-showcase .client-mark-media.has-image .client-wordmark{display:none}
.dark-showcase .client-logo-image{display:flex;width:100%;min-width:0;align-items:center;justify-content:center}
.dark-showcase .client-logo-image:empty{display:none}
.dark-showcase .client-logo-image img{
  display:block;
  width:auto;
  height:auto;
  max-width:min(150px,92%);
  max-height:44px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.58;
  transition:filter .18s ease,opacity .18s ease,transform .18s ease;
}
.dark-showcase .client-mark:hover .client-logo-image img{filter:grayscale(0);opacity:1;transform:scale(1.015)}
.dark-showcase .clients-empty-note{
  margin-top:14px;
  padding:14px 16px;
  border:1px dashed color-mix(in srgb,var(--accent) 35%,#d1d5db);
  border-radius:12px;
  color:var(--petaq-band-muted,var(--section-muted));
  background:color-mix(in srgb,var(--accent) 4%,transparent);
  font-size:12px;
  line-height:1.55;
  text-align:center;
}
@media(max-width:1020px){.dark-showcase .clients-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:680px){.dark-showcase .clients-head{margin-bottom:28px}.dark-showcase .clients-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dark-showcase .client-mark-media{min-height:84px;padding:14px}.dark-showcase .client-logo-image img{max-height:38px}.dark-showcase .client-wordmark{font-size:16px}}

/* Responsive Content alignment for standard content sections ----------------
   Mirrors Hero's Desktop / Tablet / Mobile alignment control without changing
   section grids, media placement, widths or spacing. Existing section defaults
   remain visually unchanged until a different alignment is selected. */
@media(min-width:1021px){
  .dark-showcase [data-content-align-desktop="left"]{--petaq-content-text-align:left;--petaq-content-block-start:0;--petaq-content-block-end:auto;--petaq-content-flex-align:flex-start;--petaq-content-flex-justify:flex-start;--petaq-content-footcta-justify:space-between}
  .dark-showcase [data-content-align-desktop="center"]{--petaq-content-text-align:center;--petaq-content-block-start:auto;--petaq-content-block-end:auto;--petaq-content-flex-align:center;--petaq-content-flex-justify:center;--petaq-content-footcta-justify:center}
  .dark-showcase [data-content-align-desktop="right"]{--petaq-content-text-align:right;--petaq-content-block-start:auto;--petaq-content-block-end:0;--petaq-content-flex-align:flex-end;--petaq-content-flex-justify:flex-end;--petaq-content-footcta-justify:flex-end}
}
@media(min-width:561px) and (max-width:1020px){
  .dark-showcase [data-content-align-tablet="left"]{--petaq-content-text-align:left;--petaq-content-block-start:0;--petaq-content-block-end:auto;--petaq-content-flex-align:flex-start;--petaq-content-flex-justify:flex-start;--petaq-content-footcta-justify:space-between}
  .dark-showcase [data-content-align-tablet="center"]{--petaq-content-text-align:center;--petaq-content-block-start:auto;--petaq-content-block-end:auto;--petaq-content-flex-align:center;--petaq-content-flex-justify:center;--petaq-content-footcta-justify:center}
  .dark-showcase [data-content-align-tablet="right"]{--petaq-content-text-align:right;--petaq-content-block-start:auto;--petaq-content-block-end:0;--petaq-content-flex-align:flex-end;--petaq-content-flex-justify:flex-end;--petaq-content-footcta-justify:flex-end}
}
@media(max-width:560px){
  .dark-showcase [data-content-align-mobile="left"]{--petaq-content-text-align:left;--petaq-content-block-start:0;--petaq-content-block-end:auto;--petaq-content-flex-align:flex-start;--petaq-content-flex-justify:flex-start;--petaq-content-footcta-justify:space-between}
  .dark-showcase [data-content-align-mobile="center"]{--petaq-content-text-align:center;--petaq-content-block-start:auto;--petaq-content-block-end:auto;--petaq-content-flex-align:center;--petaq-content-flex-justify:center;--petaq-content-footcta-justify:center}
  .dark-showcase [data-content-align-mobile="right"]{--petaq-content-text-align:right;--petaq-content-block-start:auto;--petaq-content-block-end:0;--petaq-content-flex-align:flex-end;--petaq-content-flex-justify:flex-end;--petaq-content-footcta-justify:flex-end}
}

/* Editable headlines/headings preserve intentional line breaks from the editor,
   while still wrapping naturally when a line is wider than the available space.
   Use data-bind (not data-editor-*) because published HTML intentionally strips
   editor-only metadata during site_optimize_html(). */
.dark-showcase h1[data-bind],
.dark-showcase h2[data-bind],
.dark-showcase h3[data-bind],
.dark-showcase h4[data-bind],
.dark-showcase h5[data-bind],
.dark-showcase h6[data-bind],
.dark-showcase .appointment-launch-title strong[data-bind="appointment_card_title"]{white-space:pre-line;overflow-wrap:break-word;word-break:normal}

/* Editable description/body copy preserves intentional line breaks from the editor
   while still wrapping naturally when a manual line is too wide. Keep this scoped
   to description-style *_text bindings so labels, buttons, badges and addresses
   retain their existing single-line behavior. data-bind survives published HTML. */
.dark-showcase p[data-bind$="_text"],
.dark-showcase p[data-bind="plugin_showroom_locator_description"]{white-space:pre-line;overflow-wrap:break-word;word-break:normal}

/* Shared section heading alignment. Horizontal margins move only constrained
   copy blocks; vertical margins and typography remain owned by each section. */
.dark-showcase [data-content-align-desktop] .sectionhead{text-align:var(--petaq-content-text-align,left)}
.dark-showcase [data-content-align-desktop] .sectionhead>div,
.dark-showcase [data-content-align-desktop] .sectionhead>p{margin-left:var(--petaq-content-block-start,0);margin-right:var(--petaq-content-block-end,auto)}

/* Services */
.dark-showcase [data-petaq-section="services"] .service-card{text-align:var(--petaq-content-text-align,left)}
.dark-showcase [data-petaq-section="services"] .service-card .tag{align-self:var(--petaq-content-flex-align,flex-start)}
.dark-showcase [data-petaq-section="services"] .service-card>p{margin-top:-6px}

/* Clients & collaborators. Left is the template default; responsive alignment
   variables can still switch the heading to Center or Right per device. */
.dark-showcase [data-petaq-section="clients"] .clients-head{text-align:var(--petaq-content-text-align,left)}
.dark-showcase [data-petaq-section="clients"] .clients-head>div,
.dark-showcase [data-petaq-section="clients"] .clients-head .badge,
.dark-showcase [data-petaq-section="clients"] .clients-head h2,
.dark-showcase [data-petaq-section="clients"] .clients-head>p{margin-left:var(--petaq-content-block-start,0);margin-right:var(--petaq-content-block-end,auto)}

/* Products */
.dark-showcase [data-petaq-section="catalog"] .catalog-card{text-align:var(--petaq-content-text-align,left)}
.dark-showcase [data-petaq-section="catalog"] .catalog-card .catalog-meta-row{justify-content:var(--petaq-content-flex-justify,flex-start)}
.dark-showcase [data-petaq-section="catalog"] .catalog-search{margin-left:var(--petaq-content-block-start,0);margin-right:var(--petaq-content-block-end,auto)}

/* About */
.dark-showcase [data-petaq-section="about"] .about-copy{text-align:var(--petaq-content-text-align,left)}

/* Why choose us */
.dark-showcase [data-petaq-section="quality"] .quality-card{text-align:var(--petaq-content-text-align,left)}
.dark-showcase [data-petaq-section="quality"] .quality-icon{margin-left:var(--petaq-content-block-start,0);margin-right:var(--petaq-content-block-end,auto)}

/* FAQ */
.dark-showcase [data-petaq-section="faq"] .faq-intro,
.dark-showcase [data-petaq-section="faq"] .faq-item summary,
.dark-showcase [data-petaq-section="faq"] .faq-answer p{text-align:var(--petaq-content-text-align,left)}
.dark-showcase [data-petaq-section="faq"] .faq-intro p{margin-left:var(--petaq-content-block-start,0);margin-right:var(--petaq-content-block-end,auto)}

/* Appointments. Only the descriptive copy is aligned; the booking controls
   stay structurally unchanged so form usability is unaffected. */
.dark-showcase [data-petaq-section="appointment"] .appointment-copy{
  text-align:var(--petaq-content-text-align,left);
  margin-left:var(--petaq-content-block-start,0);
  margin-right:var(--petaq-content-block-end,auto)
}
.dark-showcase [data-petaq-section="appointment"] .appointment-copy>p{margin-left:var(--petaq-content-block-start,0);margin-right:var(--petaq-content-block-end,auto)}
.dark-showcase [data-petaq-section="appointment"] .appointment-benefits{justify-content:var(--petaq-content-flex-justify,flex-start)}
.dark-showcase [data-petaq-section="appointment"] .appointment-note>div{text-align:var(--petaq-content-text-align,left)}

/* Contact. Form fields remain left-aligned; visitor-facing copy and contact
   details follow the selected content alignment. */
.dark-showcase [data-petaq-section="contact"] .contact-copy,
.dark-showcase [data-petaq-section="contact"] .details{text-align:var(--petaq-content-text-align,left)}
.dark-showcase [data-petaq-section="contact"] .contact-copy p{margin-left:var(--petaq-content-block-start,0);margin-right:var(--petaq-content-block-end,auto)}

/* Footer CTA */
.dark-showcase [data-petaq-section="footcta"] .footcta-in{
  text-align:var(--petaq-content-text-align,left);
  justify-content:var(--petaq-content-footcta-justify,space-between)
}


/* Content image shapes -----------------------------------------------------
   Square is intentionally a no-op so existing sites retain their exact look.
   Product/Catalog thumbnails are excluded by using explicit data attributes
   only on non-product content image containers. */
.dark-showcase{
  --petaq-image-heart-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M50 95C46 91 41 86 34 79C24 69 16 61 11 53C7 46 5 39 5 31C5 21 8 13 15 8C22 3 31 3 38 7C43 10 47 15 50 20C53 15 57 10 62 7C69 3 78 3 85 8C92 13 95 21 95 31C95 39 93 46 89 53C84 61 76 69 66 79C59 86 54 91 50 95Z'/%3E%3C/svg%3E");
  --petaq-image-star-clip:polygon(50% 2%,61% 35%,96% 35%,68% 55%,79% 90%,50% 69%,21% 90%,32% 55%,4% 35%,39% 35%);
}
.dark-showcase [data-image-shape="circle"]{border-radius:50%!important;-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%)}
.dark-showcase [data-image-shape="heart"]{border-radius:0!important;-webkit-clip-path:none;clip-path:none;-webkit-mask-image:var(--petaq-image-heart-mask);mask-image:var(--petaq-image-heart-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.dark-showcase [data-image-shape="star"]{border-radius:0!important;-webkit-clip-path:var(--petaq-image-star-clip);clip-path:var(--petaq-image-star-clip)}
.dark-showcase .about-media[data-image-shape="circle"],
.dark-showcase .about-media[data-image-shape="heart"],
.dark-showcase .about-media[data-image-shape="star"]{height:auto;aspect-ratio:1/1}
/* Gallery image ratio -------------------------------------------------------
   Original preserves each image's natural proportions and existing masonry
   behavior. Fixed ratios crop only the image inside the normal Gallery tile. */
.dark-showcase .gallery-masonry[data-gallery-image-ratio="1_1"] .gallery-tile{aspect-ratio:1/1}
.dark-showcase .gallery-masonry[data-gallery-image-ratio="3_4"] .gallery-tile{aspect-ratio:3/4}
.dark-showcase .gallery-masonry[data-gallery-image-ratio="4_5"] .gallery-tile{aspect-ratio:4/5}
.dark-showcase .gallery-masonry[data-gallery-image-ratio="4_3"] .gallery-tile{aspect-ratio:4/3}
.dark-showcase .gallery-masonry[data-gallery-image-ratio="16_9"] .gallery-tile{aspect-ratio:16/9}
.dark-showcase .gallery-masonry:not([data-gallery-image-ratio="original"]) .gallery-tile img{width:100%;height:100%;object-fit:cover}

/* Hero layout: Brand Spotlight ---------------------------------------------
   The promotional banner height follows the real content height on every
   viewport. The circular Hero image is pulled upward by exactly half of its
   own rendered size, so its centre always sits on the banner/surface boundary.
   Responsive Hero background images retain Desktop fallback semantics. */
.dark-showcase .hero-spotlight-name{display:none}
.dark-showcase .hero-default.hero-layout-brand_spotlight{
  --hero-spotlight-profile-size:136px;
  --hero-spotlight-profile-half:68px;
  min-height:0;
  padding:0 24px 54px;
  background:var(--surface)!important;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight.has-background-image:before{
  display:none!important;
  content:none!important;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-grid{
  grid-template-columns:1fr;
  gap:0;
  width:100%;
  min-height:0;
  justify-items:center;
  align-content:start;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy{
  position:relative;
  isolation:isolate;
  width:min(920px,100%);
  min-height:0;
  margin:0 auto;
  padding:54px 20px calc(var(--hero-spotlight-profile-half) + 28px);
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:18px;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy:before,
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy:before{
  z-index:-2;
  background:var(--hero-bg);
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy:after{
  z-index:-1;
  background-image:var(--hero-background-image-desktop,none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--hero-background-opacity,1);
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy>.badge{align-self:center}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy>p{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-actions{
  width:100%;
  justify-content:center;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media{
  grid-column:1;
  grid-row:auto;
  width:var(--hero-spotlight-profile-size);
  height:var(--hero-spotlight-profile-size);
  max-width:none;
  margin:calc(0px - var(--hero-spotlight-profile-half)) auto 0!important;
  aspect-ratio:1/1;
  border:6px solid var(--surface);
  border-radius:50%!important;
  background:var(--surface);
  box-shadow:0 14px 34px rgba(17,24,39,.16);
  -webkit-clip-path:circle(50% at 50% 50%)!important;
  clip-path:circle(50% at 50% 50%)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  overflow:hidden!important;
  z-index:2;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media:after{
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.08);
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media .media-placeholder{
  padding:10px;
  text-align:center;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media .media-placeholder span{font-size:9px;line-height:1.25}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media .media-placeholder small{font-size:8px;line-height:1.2}
/* Brand Spotlight profile image must fill its circular frame, including PNGs.
   This overrides the theme-wide transparent-PNG hero treatment only here. */
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media>img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;border-radius:50%!important;background:transparent!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media:has(> img[src*=".png" i]){background:var(--surface)!important;box-shadow:0 14px 34px rgba(17,24,39,.16)!important;border-radius:50%!important;overflow:hidden!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media:has(> img[src*=".png" i])::after{display:block!important;content:""!important;border-radius:50%!important;box-shadow:inset 0 0 0 1px rgba(17,24,39,.08)!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media>img[src*=".png" i]{object-fit:cover!important;border-radius:50%!important;background:transparent!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight .hero-spotlight-name{
  display:block;
  max-width:min(720px,100%);
  margin:16px auto 0;
  padding:0 12px;
  color:var(--surface-text);
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:800;
  text-align:center;
}
@media(max-width:1020px){
  .dark-showcase .hero-default.hero-layout-brand_spotlight{
    --hero-spotlight-profile-size:116px;
    --hero-spotlight-profile-half:58px;
    padding:0 20px 44px;
  }
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-grid{min-height:0}
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy{
    padding:44px 18px calc(var(--hero-spotlight-profile-half) + 26px);
  }
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy:after{
    background-image:var(--hero-background-image-tablet,var(--hero-background-image-desktop,none));
  }
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media{border-width:5px}
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-spotlight-name{font-size:24px;margin-top:14px}
}
@media(max-width:560px){
  .dark-showcase .hero-default.hero-layout-brand_spotlight{
    --hero-spotlight-profile-size:96px;
    --hero-spotlight-profile-half:48px;
    padding:0 16px 30px;
  }
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-grid{min-height:0}
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy{
    padding:30px 0 calc(var(--hero-spotlight-profile-half) + 24px);
    gap:14px;
  }
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy:after{
    background-image:var(--hero-background-image-mobile,var(--hero-background-image-desktop,none));
  }
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy>h1{font-size:clamp(34px,11vw,46px)}
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy>p{font-size:14px;line-height:1.55}
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-actions{gap:8px}
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-media{border-width:5px}
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-spotlight-name{font-size:21px;margin-top:12px}
}


/* Brand Spotlight standard balance ----------------------------------------
   Keep Desktop Layout OFF should feel visually balanced too. Remove the old
   inherited standard-height canvas and make the visible breathing room above
   the banner content match the bottom spacing below the business name. */

/* Keep Desktop Layout: Brand Spotlight desktop balance -------------------
   Desktop does not enter the scaled <=1020px rules below, so remove the
   standard 680px Hero canvas here as well. This keeps the visible breathing
   room above the banner content and below the business name at 54px / 54px. */
@media(min-width:1021px){
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight{
    min-height:0!important;
    padding-bottom:54px!important;
  }
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-grid{
    min-height:0!important;
  }
}

/* Desktop Brand Spotlight edge bleed -------------------------------------
   Prevent a thin white seam on the far-left / far-right edge caused by
   sub-pixel rounding when the top banner background is centered from the
   inner Hero copy block. Slightly overscan the banner background. */
@media(min-width:1021px){
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy:before,
  .dark-showcase .hero-default.hero-layout-brand_spotlight .hero-copy:after{
    left:calc(50% - 50vw - 4px)!important;
    width:calc(100vw + 8px)!important;
    transform:none!important;
  }
}


/* Keep Desktop Layout ------------------------------------------------------
   When enabled, Tablet/Mobile use the 1024px Desktop Hero composition and the
   Hero runtime proportionally scales that virtual canvas to the real viewport.
   Device-specific Hero background images remain active. */
@media(max-width:1020px){
  .dark-showcase .hero-default.hero-keep-desktop-layout{
    --hero-standard-height:680px;
    padding:54px 24px 72px!important;
  }
  .dark-showcase .hero-default.hero-keep-desktop-layout .hero-grid{
    grid-template-columns:1fr 1fr!important;
    max-width:var(--max)!important;
    gap:64px!important;
    align-items:center!important;
  }
  /* Standard two-column Hero layouts use a more compact virtual desktop
     canvas while Keep Desktop Layout is active. The top/bottom breathing room
     stays exactly balanced, but the excessive empty space from the 680px
     canvas is removed before the whole composition is scaled down. */
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-split,
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-image_left{
    --hero-standard-height:560px;
    display:grid!important;
    align-items:center!important;
    padding-top:36px!important;
    padding-bottom:36px!important;
  }
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-split .hero-grid,
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-image_left .hero-grid{
    width:100%!important;
  }
  .dark-showcase .hero-default.hero-keep-desktop-layout .hero-copy{gap:24px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout .hero-copy>h1{font-size:54px!important;line-height:1.02!important;letter-spacing:-.055em!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout .hero-copy>p{font-size:17px!important;line-height:1.75!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout .hero-actions{gap:12px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout .btnmain,
  .dark-showcase .hero-default.hero-keep-desktop-layout .btnalt{min-height:50px!important;padding:0 28px!important;font-size:16px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout .hero-media{max-width:none!important;width:100%!important;margin:0!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-image_left .hero-media{grid-column:1!important;grid-row:1!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-image_left .hero-copy{grid-column:2!important;grid-row:1!important}

  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-centered{padding-top:88px!important;padding-bottom:88px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-centered .hero-grid{grid-template-columns:1fr!important;max-width:920px!important;min-height:360px!important;gap:0!important;justify-items:center!important;align-items:center!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-centered .hero-copy{width:100%!important;max-width:880px!important;margin:0 auto!important;align-items:center!important;text-align:center!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-centered .hero-copy>p{margin-left:auto!important;margin-right:auto!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-centered .hero-actions{justify-content:center!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-centered .hero-media{display:none!important}

  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider{padding:0 24px!important;min-height:680px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-grid{min-height:680px!important;grid-template-columns:1fr!important;gap:0!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-copy{width:min(720px,calc(100% - 112px))!important;padding:92px 56px 118px!important;align-items:flex-start!important;text-align:left!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-copy>p{margin-left:0!important;margin-right:auto!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-actions{justify-content:flex-start!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-slider-arrow{width:46px!important;height:46px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-slider-arrow span{font-size:31px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-slider-prev{left:18px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-slider-next{right:18px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-slider .hero-slider-dots{bottom:24px!important;padding:9px 12px!important}

  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight{
    --hero-spotlight-profile-size:136px;
    --hero-spotlight-profile-half:68px;
    min-height:0!important;
    padding:0 24px 54px!important;
  }
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-grid{grid-template-columns:1fr!important;gap:0!important;min-height:0!important;justify-items:center!important;align-content:start!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-copy{width:min(920px,100%)!important;min-height:0!important;margin:0 auto!important;padding:54px 20px 96px!important;justify-content:center!important;align-items:center!important;text-align:center!important;gap:18px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-copy:before,
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-copy:after{width:1024px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-copy>p{max-width:680px!important;margin-left:auto!important;margin-right:auto!important;font-size:17px!important;line-height:1.75!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-actions{gap:12px!important;justify-content:center!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-media{width:136px!important;height:136px!important;max-width:none!important;margin:-68px auto 0!important;border-width:6px!important}
  .dark-showcase .hero-default.hero-keep-desktop-layout.hero-layout-brand_spotlight .hero-spotlight-name{font-size:28px!important;margin-top:16px!important}
}

/* Brand Spotlight content alignment ---------------------------------------
   Respect the shared Hero Content alignment control for banner content while
   keeping the overlapping profile image and business name structurally centered. */
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-left .hero-copy{
  align-items:stretch!important;
  text-align:left!important;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-left .hero-copy>.badge{align-self:flex-start!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-left .hero-copy>p{margin-left:0!important;margin-right:auto!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-left .hero-actions{justify-content:flex-start!important}

.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-center .hero-copy{
  align-items:stretch!important;
  text-align:center!important;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-center .hero-copy>.badge{align-self:center!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-center .hero-copy>p{margin-left:auto!important;margin-right:auto!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-center .hero-actions{justify-content:center!important}

.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-right .hero-copy{
  align-items:stretch!important;
  text-align:right!important;
}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-right .hero-copy>.badge{align-self:flex-end!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-right .hero-copy>p{margin-left:auto!important;margin-right:0!important}
.dark-showcase .hero-default.hero-layout-brand_spotlight.hero-align-right .hero-actions{justify-content:flex-end!important}



/* Services per row — Auto uses the same responsive auto-fit behavior as Products.
   Keep Auto rules isolated to their own device ranges; otherwise a higher-
   specificity Desktop/Tablet Auto selector can mask a smaller-device setting. */
.dark-showcase [data-petaq-section="services"] .service-grid{grid-template-columns:repeat(var(--services-columns-desktop,4),minmax(0,1fr))}
@media(min-width:1021px){
  .dark-showcase [data-petaq-section="services"][data-services-columns-desktop="auto"] .service-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
}
@media(min-width:561px) and (max-width:1020px){
  .dark-showcase [data-petaq-section="services"] .service-grid{grid-template-columns:repeat(var(--services-columns-tablet,2),minmax(0,1fr))}
  .dark-showcase [data-petaq-section="services"][data-services-columns-tablet="auto"] .service-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}
@media(max-width:560px){
  .dark-showcase [data-petaq-section="services"] .service-grid{grid-template-columns:repeat(var(--services-columns-mobile,2),minmax(0,1fr))}
  .dark-showcase [data-petaq-section="services"][data-services-columns-mobile="auto"] .service-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
}


/* Product & Services image ratio control. Defaults remain 1:1 for existing sites. */
.dark-showcase [data-petaq-section="services"] .service-card .service-thumb{
  aspect-ratio:var(--services-image-ratio,1 / 1);
}
.dark-showcase [data-petaq-section="catalog"] .catalog-card .service-thumb{
  aspect-ratio:var(--catalog-image-ratio,1 / 1);
}
/* Circle / heart / star need a square canvas so their silhouettes stay correct. */
.dark-showcase [data-petaq-section="services"] .service-thumb[data-image-shape="circle"],
.dark-showcase [data-petaq-section="services"] .service-thumb[data-image-shape="heart"],
.dark-showcase [data-petaq-section="services"] .service-thumb[data-image-shape="star"]{
  aspect-ratio:1 / 1;
}

/* Text Grid section: image-free repeatable cards with responsive per-row control.
   Device ranges are non-overlapping so Desktop/Tablet Auto never wins the CSS
   cascade over an explicit setting for a smaller preview. */
.dark-showcase .content-grid{display:grid;grid-template-columns:repeat(var(--grid-columns-desktop,3),minmax(0,1fr));gap:16px}
@media(min-width:1021px){
  .dark-showcase [data-petaq-section="grid"][data-grid-columns-desktop="auto"] .content-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
}
.dark-showcase .content-grid-card{min-width:0;padding:22px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:15px;background:color-mix(in srgb,var(--accent) 4%,var(--petaq-band-bg,var(--section_background)));color:var(--petaq-band-text,var(--section-text));text-align:var(--petaq-content-text-align,left);box-shadow:none}
.dark-showcase .content-grid-card h3{margin:0;font-size:18px;line-height:1.3;letter-spacing:-.02em;color:inherit}
.dark-showcase .content-grid-card p{margin:9px 0 0;font-size:13px;line-height:1.7;color:var(--petaq-band-muted,var(--section-muted))}
.dark-showcase .content-grid>.content-grid-card[hidden]{display:none!important}
@media(min-width:561px) and (max-width:1020px){
  .dark-showcase .content-grid{grid-template-columns:repeat(var(--grid-columns-tablet,2),minmax(0,1fr))}
  .dark-showcase [data-petaq-section="grid"][data-grid-columns-tablet="auto"] .content-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}
@media(max-width:560px){
  .dark-showcase .content-grid{grid-template-columns:repeat(var(--grid-columns-mobile,1),minmax(0,1fr));gap:12px}
  .dark-showcase [data-petaq-section="grid"][data-grid-columns-mobile="auto"] .content-grid{grid-template-columns:1fr}
  .dark-showcase .content-grid-card{padding:18px;border-radius:13px}
}


/* Responsive background images for every native non-Hero section. The image is
   painted on its own layer so Opacity affects the image only, exactly like Hero,
   while the section's existing background colour remains underneath.

   When a shape divider is active, the SAME image layer extends upward through
   the divider clearance and is masked into the divider shape. This is important:
   painting the image a second time on ::after would recrop `background-size:cover`
   against the much shorter divider box and make the divider look like a separate
   image. One continuous layer keeps the crop and image position seamless. */
.dark-showcase [data-petaq-section]:not([data-petaq-section="hero"]){
  --petaq-section-background-base:var(--section_background,#fff)
}
.dark-showcase [data-petaq-section][data-alternating-section]:not([data-petaq-section="hero"]){
  --petaq-section-background-base:var(--petaq-band-bg,var(--section_background,#fff))
}
.dark-showcase .marquee-section[data-petaq-section="marquee"]{
  --petaq-section-background-base:var(--accent)
}
.dark-showcase .quality[data-petaq-section="quality"],
.dark-showcase .appointment-section[data-petaq-section="appointment"]{
  --petaq-section-background-base:var(--primary)
}
.dark-showcase [data-petaq-section]:not([data-petaq-section="hero"])[style*="--petaq-section-background-image-"]{
  position:relative;
  isolation:isolate
}
.dark-showcase [data-petaq-section]:not([data-petaq-section="hero"])[style*="--petaq-section-background-image-"]::before{
  content:""!important;
  display:block!important;
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:var(--petaq-section-background-image-desktop,none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--petaq-section-background-opacity,1);
  pointer-events:none
}
/* The normal divider pseudo-element remains the base-colour layer underneath
   the image. The image itself is NOT painted here; it is the same ::before layer
   used by the section body. */
.dark-showcase [data-petaq-section]:not([data-petaq-section="hero"])[data-shape-divider-active="1"][style*="--petaq-section-background-image-"]::after{
  z-index:-2;
  background:var(--petaq-section-background-base,var(--section_background,#fff))
}
/* Do not offset the divider base for Locations & Map. Moving the masked
   divider down by even one physical pixel exposes its fully opaque bottom row as
   a straight horizontal strip. Seam protection is handled by the image-mask
   overlap below instead, so the divider contour stays clean. */
/* Extend the one image layer through the divider and combine two masks:
   1) a full rectangle for the real section body, overlapped upward by 2px, and
   2) the selected divider mask for the area above it.
   The tiny overlap removes raster/anti-alias seams without drawing a separate
   horizontal strip. Multiple mask layers are additive, so the result is one
   continuous visual surface rather than two independently cropped backgrounds. */
.dark-showcase [data-petaq-section]:not([data-petaq-section="hero"])[data-shape-divider-active="1"][style*="--petaq-section-background-image-"]::before{
  top:calc(-1 * var(--petaq-shape-divider-height,56px) + 1px);
  bottom:0;
  left:0;
  right:0;
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0 calc(var(--petaq-shape-divider-height,56px) - 2px),#000 calc(var(--petaq-shape-divider-height,56px) - 2px) 100%),
    var(--petaq-shape-divider-mask);
  mask-image:
    linear-gradient(to bottom,transparent 0 calc(var(--petaq-shape-divider-height,56px) - 2px),#000 calc(var(--petaq-shape-divider-height,56px) - 2px) 100%),
    var(--petaq-shape-divider-mask);
  -webkit-mask-repeat:no-repeat,no-repeat;
  mask-repeat:no-repeat,no-repeat;
  -webkit-mask-position:0 0,center top;
  mask-position:0 0,center top;
  -webkit-mask-size:100% 100%,100% var(--petaq-shape-divider-height,56px);
  mask-size:100% 100%,100% var(--petaq-shape-divider-height,56px)
}
/* Match the existing divider safety crop that hides a possible 1px SVG raster
   edge on Chromium/WebKit. This only clips the very top of the extended image
   layer; the section body remains untouched. */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .dark-showcase [data-petaq-section]:not([data-petaq-section="hero"])[data-shape-divider-active="1"][style*="--petaq-section-background-image-"]::before{
    -webkit-clip-path:inset(2px 0 0 0);
    clip-path:inset(2px 0 0 0)
  }
}
@media(max-width:1020px){
  .dark-showcase [data-petaq-section]:not([data-petaq-section="hero"])[style*="--petaq-section-background-image-"]::before{
    background-image:var(--petaq-section-background-image-tablet,var(--petaq-section-background-image-desktop,none))
  }
}
@media(max-width:560px){
  .dark-showcase [data-petaq-section]:not([data-petaq-section="hero"])[style*="--petaq-section-background-image-"]::before{
    background-image:var(--petaq-section-background-image-mobile,var(--petaq-section-background-image-desktop,none))
  }
}