/*
Theme Name: Shine Remodeling
Theme URI: https://www.shineremodeling.com/
Author: Goodnewsviral
Description: Block theme for Shine Remodeling & Construction Corp, Orlando FL. Converted from the approved v4 static design. Every section is a core-block pattern so the owner can edit text, images and links in the WordPress editor.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shine-remodeling
Tags: full-site-editing, block-theme, one-page, business
*/

/* ============================================================
   1. TOKEN ALIASES
   The v4 :root names are bound 1:1 to theme.json presets so the
   component CSS below stays byte-comparable with v4/index.html.
   Change a colour in theme.json, not here.
   ============================================================ */
:root{
  --ink:        var(--wp--preset--color--ink);
  --ink-soft:   var(--wp--preset--color--ink-soft);
  --paper:      var(--wp--preset--color--paper);
  --tint:       var(--wp--preset--color--tint);
  --line:       var(--wp--preset--color--line);
  --accent:     var(--wp--preset--color--accent);
  --accent-hover: var(--wp--preset--color--accent-hover);
  --accent-deep:var(--wp--preset--color--accent-deep);
  --on-accent:  var(--wp--preset--color--on-accent);
  --on-dark:    var(--wp--preset--color--on-dark);
  --on-dark-dim:var(--wp--preset--color--on-dark-dim);
  --font-heading: var(--wp--preset--font-family--heading);
  --font-body:    var(--wp--preset--font-family--body);
  --radius: 10px;
  --wrap: 1120px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* ============================================================
   2. BASE
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-heading);
  font-weight:300;
  line-height:1.15;
  text-wrap:balance;
}
h1 strong, h2 strong{ font-weight:600; }
p{ text-wrap:pretty; }
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent-deep); }

/* Block-editor bridge: WordPress puts a 24px block gap between every
   top-level child of the post content. Sections must butt edge to edge. */
.wp-block-post-content > *{ margin-block-start:0; margin-block-end:0; }
.wp-block-group{ box-sizing:border-box; }
.wp-block-image{ margin:0; }
.wp-block-image img{ display:block; }
.editor-styles-wrapper .wp-block-post-content > *{ margin-block-start:0; }

/* One shared container. Emitted as a Group block with class "wrap". */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

section.wp-block-group{ padding-block:clamp(4rem, 9vw, 7rem); }

.kicker{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-deep);
  display:block;
  margin-bottom:.9rem;
}
.dark .kicker{ color:var(--accent); }

h2{ font-size:clamp(1.9rem, 3.6vw, 2.75rem); margin-bottom:1rem; }
.section-intro{
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:34em;
}
.dark .section-intro{ color:var(--on-dark-dim); }

/* ============================================================
   3. BUTTONS
   Core Buttons put the block class on the WRAPPER div, so the wrapper
   is neutralised and the styling hangs on the inner anchor.
   ============================================================ */
.wp-block-buttons{ display:flex; flex-wrap:wrap; gap:.9rem; }
div.wp-block-button{ background:transparent; border:0; padding:0; margin:0; }
.wp-block-button > .wp-block-button__link,
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-heading); font-weight:600; font-size:.95rem;
  padding:.85rem 1.7rem; border-radius:999px;
  text-decoration:none; border:1.5px solid transparent;
  background:transparent; color:var(--ink);
  cursor:pointer; box-shadow:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.wp-block-button > .wp-block-button__link:active,
.btn:active{ transform:scale(.98); }
.wp-block-button > .wp-block-button__link:focus-visible,
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wp-block-button.btn-primary > .wp-block-button__link,
.btn.btn-primary{ background:var(--accent); color:var(--on-accent); }
.wp-block-button.btn-primary > .wp-block-button__link:hover,
.btn.btn-primary:hover{ background:var(--accent-hover); color:var(--on-accent); }

.wp-block-button.btn-ghost > .wp-block-button__link,
.btn.btn-ghost{ border-color:currentColor; color:var(--ink); background:transparent; }
.wp-block-button.btn-ghost > .wp-block-button__link:hover,
.btn.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-deep); }
.dark .wp-block-button.btn-ghost > .wp-block-button__link,
.dark .btn.btn-ghost{ color:var(--on-dark); }
.dark .wp-block-button.btn-ghost > .wp-block-button__link:hover,
.dark .btn.btn-ghost:hover{ color:var(--accent); }

/* ============================================================
   4. HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(252,251,249,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.8rem;
}
.logo{ display:flex; align-items:center; gap:.6rem; }
.logo-mark{ flex:none; width:34px; height:34px; }
.logo-mark img{ width:34px; height:34px; }
.logo-text{ line-height:1.1; }
.logo-name{ font-family:var(--font-heading); font-weight:600; font-size:1.05rem; letter-spacing:.06em; line-height:1.1; }
.logo-name a{ color:var(--ink); text-decoration:none; }
.logo-sub{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); line-height:1.1; }
.nav-actions{ display:flex; align-items:center; gap:1.25rem; }
.nav-phone{ white-space:nowrap; }
.nav-phone a{
  font-family:var(--font-heading); font-weight:600; font-size:.95rem;
  color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.45rem;
}
.nav-phone a:hover{ color:var(--accent-deep); }
.nav-phone a::before{
  content:""; flex:none; width:16px; height:16px; background:currentColor;
  -webkit-mask:url(assets/icons/phone.svg) no-repeat center/contain;
  mask:url(assets/icons/phone.svg) no-repeat center/contain;
}
.site-header .nav .wp-block-button > .wp-block-button__link{
  padding:.6rem 1.3rem; font-size:.85rem; white-space:nowrap;
}
.site-header .wp-block-buttons{ gap:0; }

/* Language toggle (fixed chrome, not client content) */
.lang-btn{
  font-family:var(--font-heading); font-weight:600; font-size:.78rem;
  letter-spacing:.08em; border:1.5px solid var(--line); background:#fff;
  color:var(--ink); border-radius:999px; padding:.45rem .8rem; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.lang-btn:hover{ border-color:var(--accent); color:var(--accent-deep); }
.lang-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ============================================================
   5. MOBILE STICKY CALL BAR
   ============================================================ */
.call-bar{
  display:none;
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-heading); font-weight:600; font-size:1rem;
  text-align:center;
  padding:.95rem 1rem calc(.95rem + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(30,42,50,.18);
}
.call-bar a{
  color:inherit; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
}
.call-bar a::before{
  content:""; flex:none; width:18px; height:18px; background:currentColor;
  -webkit-mask:url(assets/icons/phone.svg) no-repeat center/contain;
  mask:url(assets/icons/phone.svg) no-repeat center/contain;
}

/* ============================================================
   6. HERO
   ============================================================ */
section.hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--on-dark);
  padding-block:clamp(5rem, 12vw, 9rem);
}
.hero-art{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; margin:0;
}
.hero-art img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero > .wrap{ position:relative; }
.hero-content{ max-width:38rem; }
.hero h1{
  font-size:clamp(2.5rem, 6vw, 4.25rem);
  margin-bottom:1.25rem;
  color:#fff;
}
.hero-sub{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--on-dark-dim);
  margin-bottom:2.25rem;
  max-width:32em;
}
.wp-block-buttons.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.75rem; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:1.5rem 3rem; }
.stat-num{
  display:block; font-family:var(--font-heading); font-weight:600;
  font-size:1.9rem; color:var(--accent); line-height:1.15;
}
.stat-label{ font-size:.9rem; color:var(--on-dark-dim); line-height:28px; }

/* ============================================================
   7. SERVICES
   ============================================================ */
.services-head{ text-align:center; max-width:40rem; margin:0 auto 2.75rem; }
.center{ text-align:center; }
.center .section-intro, .services-head .section-intro{ margin-inline:auto; }
.services-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem;
}
.svc{
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
html.js-svc .svc{ cursor:pointer; }
.svc:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 18px 34px -24px rgba(30,42,50,.4); }
.svc:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(224,140,51,.35); }
.svc-photo{ aspect-ratio:4/3; overflow:hidden; background:var(--tint); margin:0; }
.svc-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.svc:hover .svc-photo img{ transform:scale(1.05); }
.svc-body{ padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.svc-body h3{ font-weight:600; font-size:1rem; margin-bottom:.4rem; }
.svc-tagline{ font-size:.9rem; color:var(--ink-soft); line-height:1.5; flex:1; }

/* Service detail: a core Details block inside each card.
   With JavaScript off it is a plain on-page accordion.
   With JavaScript on the same markup is cloned into the v4 modal. */
.svc-detail{
  margin-top:.85rem;
  display:flex; flex-direction:column; align-items:flex-start;
}
.svc-detail > *:not(summary){ margin-top:.9rem; }
.svc-detail > summary{
  list-style:none; display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-heading); font-weight:600; font-size:.83rem;
  line-height:normal;
  color:var(--accent-deep); cursor:pointer;
}
.svc-detail > summary::-webkit-details-marker{ display:none; }
.svc-detail > summary::marker{ content:""; }
.svc-detail > summary::after{
  content:""; flex:none; width:14px; height:14px; background:currentColor;
  -webkit-mask:url(assets/icons/arrow-right.svg) no-repeat center/contain;
  mask:url(assets/icons/arrow-right.svg) no-repeat center/contain;
  transition:transform .18s ease;
}
.svc:hover .svc-detail > summary::after{ transform:translateX(3px); }
.svc-detail > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.svc-detail p{ font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
.svc-inc-head{
  font-family:var(--font-heading);
  font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.sm-list{
  list-style:none; display:grid; grid-template-columns:1fr;
  gap:.45rem .9rem;
}
.sm-list li{ display:flex; align-items:baseline; gap:.5rem; font-size:.93rem; color:var(--ink); }
.sm-list li::before{
  content:""; flex:none; width:.7em; height:.7em; background:var(--accent-deep);
  -webkit-mask:url(assets/icons/check.svg) no-repeat center/contain;
  mask:url(assets/icons/check.svg) no-repeat center/contain;
}
/* Extra slides for the card's dialog. The client adds core Image and Video
   blocks to this group in the editor and they become slides. With JavaScript
   off they render stacked inside the open accordion. */
.svc-media{ display:grid; gap:.9rem; }
.svc-media:empty{ display:none; }
.svc-media figure{
  margin:0; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:#fff;
}
.svc-media img,
.svc-media video{ width:100%; height:auto; display:block; }
.svc-media video{ background:var(--ink); }
.svc-media figcaption{
  padding:.5rem .75rem .6rem; margin:0;
  font-family:var(--font-heading); font-weight:600; font-size:.82rem;
  color:var(--ink); text-align:left;
}
/* Editor only: label the empty slideshow group so the owner knows what the
   plus button is for. Never rendered on the front end. */
.editor-styles-wrapper .svc-media:empty{ display:grid; }
.editor-styles-wrapper .svc-media:not(:has(figure, img, video))::after{
  content:"Add photos or videos here. Each one becomes a slide in this card's pop-up.";
  display:block; padding:.85rem 1rem;
  border:1px dashed var(--accent); border-radius:var(--radius);
  color:var(--ink-soft); font-family:var(--font-body); font-size:.85rem;
  line-height:1.4; text-align:center;
}

/* When the modal is live the in-card copy stays in the DOM but hidden. */
html.js-svc .svc-detail > *:not(summary){ display:none; }

/* ============================================================
   8. SERVICE DETAIL MODAL (progressive enhancement)
   ============================================================ */
.svc-modal{
  position:fixed; inset:0; z-index:80;
  display:none; align-items:center; justify-content:center;
  padding:clamp(.75rem, 3vw, 2.5rem);
}
.svc-modal.open{ display:flex; }
.sm-backdrop{ position:absolute; inset:0; background:rgba(20,28,34,.66); backdrop-filter:blur(3px); }
.sm-panel{
  position:relative; z-index:1;
  width:min(660px, 100%); max-height:92vh; overflow-y:auto;
  background:var(--paper); color:var(--ink);
  border-radius:14px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
}
.sm-close{
  position:absolute; top:.75rem; right:.75rem; z-index:2;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(252,251,249,.92); color:var(--ink);
  display:grid; place-items:center;
}
.sm-close:hover{ background:#fff; }
.sm-close:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.sm-close::before{
  content:""; width:18px; height:18px; background:currentColor;
  -webkit-mask:url(assets/icons/close.svg) no-repeat center/contain;
  mask:url(assets/icons/close.svg) no-repeat center/contain;
}
/* ---- Media slideshow ----
   One scroll-snap track. Slide 1 is the card's own photo; the rest come from
   the card's "Extra photos and videos" group. No carousel library. */
.sm-media{ position:relative; background:var(--tint); overflow:hidden; }
.sm-slides{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  aspect-ratio:5/2;
  scrollbar-width:none; -ms-overflow-style:none;
}
.sm-slides::-webkit-scrollbar{ display:none; }
.sm-slide{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  position:relative; overflow:hidden; min-width:0;
}
.sm-slide figure{ margin:0; width:100%; height:100%; border:0; border-radius:0; }
/* Project photos are shown whole. Only the card's own photo fills the frame. */
.sm-slide img{ width:100%; height:100%; object-fit:contain; background:var(--ink); display:block; }
.sm-slide.is-hero img{ object-fit:cover; background:none; }
/* Core ships .wp-block-video [poster]{object-fit:cover}, which crops a video
   slide. Two classes here so the whole frame shows instead. */
.sm-media .sm-slide video{ width:100%; height:100%; object-fit:contain; display:block; background:var(--ink); }
.sm-slide figcaption{
  position:absolute; top:2.6rem; left:.6rem; right:auto; margin:0;
  max-width:min(60%, 22rem);
  padding:.3rem .6rem; border-radius:6px;
  background:rgba(20,28,34,.72); color:#fff;
  font-family:var(--font-heading); font-weight:600; font-size:.78rem; line-height:1.3;
  text-align:left;
}
.sm-count{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  padding:.25rem .6rem; border-radius:999px;
  background:rgba(20,28,34,.72); color:#fff;
  font-family:var(--font-heading); font-weight:600; font-size:.75rem; letter-spacing:.06em;
}
.sm-prev, .sm-next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(252,251,249,.92); color:var(--ink);
  display:grid; place-items:center;
}
.sm-prev:hover, .sm-next:hover{ background:#fff; }
.sm-prev:focus-visible, .sm-next:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.sm-prev{ left:.6rem; }
.sm-next{ right:.6rem; }
.sm-prev::before, .sm-next::before{
  content:""; width:16px; height:16px; background:currentColor;
  -webkit-mask:url(assets/icons/arrow-right.svg) no-repeat center/contain;
  mask:url(assets/icons/arrow-right.svg) no-repeat center/contain;
}
.sm-prev::before{ transform:rotate(180deg); }
.sm-prev[disabled], .sm-next[disabled]{ opacity:.35; cursor:default; }
.sm-media.is-single .sm-prev,
.sm-media.is-single .sm-next,
.sm-media.is-single .sm-count{ display:none; }
.sm-media.is-single .sm-slide figcaption{ top:.6rem; }

.sm-content{ padding:clamp(1.25rem, 4vw, 2rem); }
.sm-content h3{ font-family:var(--font-heading); font-weight:600; font-size:1.4rem; margin-bottom:.25rem; }
.sm-tagline{ color:var(--accent-deep); font-weight:600; font-size:.95rem; margin-bottom:.9rem; }
.sm-body p{ color:var(--ink-soft); margin-bottom:1.25rem; font-size:1.0625rem; line-height:1.65; }
.sm-body .svc-inc-head{ margin-bottom:.7rem; }
.sm-body .sm-list{ grid-template-columns:1fr 1fr; margin-bottom:1.5rem; }
.sm-cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
.sm-cta .wp-block-buttons{ gap:.75rem; margin:0; }
@media (max-width: 540px){
  .sm-body .sm-list{ grid-template-columns:1fr; }
  .sm-slides{ aspect-ratio:16/9; }
}
body.sm-lock{ overflow:hidden; }

/* ============================================================
   9. DARK BAND + PREVIOUS WORK
   ============================================================ */
.dark{ background:var(--ink); color:var(--on-dark); }
.dark h2{ color:#fff; }
.work{ background:var(--tint); }
/* The Previous Work section is a heading straight into the gallery, so the
   gallery sits a little lower than the shared margin puts it. */
.work .center + .gallery{ margin-top:4rem; }

.gallery{
  columns:3; column-gap:1.25rem;
  margin-top:2.75rem;
}
.gallery .wp-block-image{
  break-inside:avoid; margin:0 0 1.25rem;
  border-radius:var(--radius); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 18px 34px -26px rgba(30,42,50,.35);
  display:block;
}
.gallery .wp-block-image img{ width:100%; height:auto; display:block; will-change:transform; }
.gallery .wp-block-image figcaption{
  padding:.8rem 1rem .95rem; margin:0;
  font-family:var(--font-heading); font-weight:600; font-size:.92rem;
  color:var(--ink); text-align:left;
}
@media (max-width: 960px){ .gallery{ columns:2; } }
@media (max-width: 560px){ .gallery{ columns:1; } }

/* ============================================================
   10. WHY CHOOSE
   ============================================================ */
.why-list{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:2.25rem 1.75rem; margin-top:2.75rem;
}
.why-item{ position:relative; }
.why-item::before{
  content:"";
  width:36px; height:36px; border-radius:50%;
  background-color:rgba(224,140,51,.18);
  display:block; margin-bottom:.95rem;
}
.why-item::after{
  content:"";
  position:absolute; top:10px; left:10px;
  width:16px; height:16px; background:var(--accent);
  -webkit-mask:url(assets/icons/check.svg) no-repeat center/contain;
  mask:url(assets/icons/check.svg) no-repeat center/contain;
}
.why-item h3{ font-weight:600; font-size:1.05rem; margin-bottom:.35rem; color:#fff; }
.why-item p{ color:var(--on-dark-dim); font-size:.95rem; line-height:1.55; }
@media (max-width: 960px){ .why-list{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px){ .why-list{ grid-template-columns:minmax(0,1fr); gap:1.75rem; } }

/* ============================================================
   11. REVIEWS
   ============================================================ */
.reviews{ background:var(--tint); }
.reviews-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem;
  margin-top:2.75rem;
}
.review{
  background:#fff; border-radius:var(--radius);
  padding:1.75rem 1.5rem;
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:1rem;
}
.review-stars{ color:var(--accent); letter-spacing:.15em; font-size:.9rem; }
.review-quote{
  font-size:1rem; color:var(--ink); flex:1; margin:0; padding:0; border:0;
}
.review-quote p{ font-size:1rem; margin:0; }
.review-cite{ display:grid; gap:0; }
.review-name{
  font-style:normal; font-family:var(--font-heading); font-weight:600;
  font-size:.85rem;
}
.review-place{ font-family:var(--font-body); font-weight:400; color:var(--ink-soft); font-size:.82rem; }
/* ---- Google reviews plugin ("Rich Showcase for Google Reviews") ----
   Its list view is restyled into the same card as the three cards above, so
   real Google reviews drop into the existing design. Nothing renders here
   until a Google Business Profile is connected in the plugin. The plugin
   marks its own rules !important and exposes CSS variables, so both are used. */
.reviews .wp-gr{
  --rpi-star-color:var(--accent);
  --rpi-star-size:14px;
  --text-color:var(--ink);
  --name-color:var(--ink);
  margin-top:2.75rem;
}
.reviews .wp-gr .rpi-col16{
  --flx:grid; --gap:1.25rem; --align:stretch;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.reviews .wp-gr .wp-google-review{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.75rem 1.5rem; margin:0; display:flex; min-width:0;
}
.reviews .wp-gr .wp-google-review > .rpi-row12{ --gap:0; width:100%; min-width:0; }
.reviews .wp-gr .rpi-col4{ --gap:1rem; width:100%; min-width:0; }
.reviews .wp-gr .wp-google-feedback{
  order:1; display:flex; flex-direction:column; gap:1rem; flex:1;
}
.reviews .wp-gr .wp-google-name{ order:2; }
.reviews .wp-gr .wp-google-time{ order:3; }
.reviews .wp-gr .wp-google-text{
  font-family:var(--font-body) !important;
  font-size:1rem !important; line-height:1.65 !important;
  padding-left:0 !important; white-space:normal !important;
}
.reviews .wp-gr .wp-google-name,
.reviews .wp-gr a.wp-google-name{
  font-family:var(--font-heading) !important; font-weight:600 !important;
  font-size:.85rem !important; color:var(--ink) !important;
  white-space:normal !important;
}
.reviews .wp-gr a.wp-google-name:hover{ color:var(--accent-deep) !important; }
.reviews .wp-gr .wp-google-time{
  font-family:var(--font-body) !important; font-size:.82rem !important;
  color:var(--ink-soft) !important;
}
.reviews .wp-gr .grw-img-wrap,
.reviews .wp-gr img.grw-img{ display:none !important; }
/* The section already carries one "See our reviews on Google" button. */
.reviews .wp-gr .wp-google-url{ display:none !important; }
.reviews .wp-gr .wp-google-powered{ margin-top:1rem; text-align:center; font-size:.82rem; color:var(--ink-soft); }
@media (max-width: 960px){
  .reviews .wp-gr .rpi-col16{ grid-template-columns:minmax(0,1fr); }
}

.reviews-cta{ text-align:center; margin-top:2.5rem; }
.wp-block-buttons.reviews-cta{ display:block; }
.wp-block-button.btn-google > .wp-block-button__link{
  background:#fff; border-color:var(--line); color:var(--ink);
}
.wp-block-button.btn-google > .wp-block-button__link:hover{
  border-color:var(--accent); transform:translateY(-2px);
}
.wp-block-button.btn-google > .wp-block-button__link::before{
  content:""; width:18px; height:18px; flex:none;
  background:url(assets/icons/google-g.svg) no-repeat center/contain;
}

/* ============================================================
   12. FAQ
   ============================================================ */
.faq-list{ max-width:46rem; margin:2.5rem auto 0; text-align:left; border-top:1px solid var(--line); }
.faq-list .wp-block-details{ border-bottom:1px solid var(--line); }
.faq-list summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0;
  font-family:var(--font-heading); font-weight:600; font-size:1.02rem;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::marker{ content:""; }
.faq-list summary::after{
  content:""; flex:none; width:20px; height:20px; background:var(--accent-deep);
  -webkit-mask:url(assets/icons/plus.svg) no-repeat center/contain;
  mask:url(assets/icons/plus.svg) no-repeat center/contain;
  transition:transform .2s ease;
}
.faq-list summary:hover{ color:var(--accent-deep); }
.faq-list summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.faq-list .wp-block-details[open] summary::after{ transform:rotate(45deg); }
.faq-list .wp-block-details p{ padding:0 2.4rem 1.25rem 0; color:var(--ink-soft); }

/* ============================================================
   13. CONTACT
   ============================================================ */
section.contact{ padding-bottom:0; }
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem, 6vw, 5rem);
  padding-bottom:clamp(4rem, 9vw, 7rem);
}
.contact-info{ display:grid; gap:1.75rem; align-content:start; margin-top:2.25rem; }
.contact-info .kicker{ margin-bottom:0; }
.info-item h3{
  font-family:var(--font-heading);
  font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-dim); margin-bottom:.35rem;
}
.info-item p, .info-item a{ color:var(--on-dark); font-size:1.05rem; text-decoration:none; }
.info-item a:hover{ color:var(--accent); }
.info-phone a{
  font-family:var(--font-heading); font-weight:600;
  font-size:1.5rem;
}

/* ---- WPForms styled to match the v4 form card ---- */
.contact-form{ margin-top:2.25rem; }
.contact-form .wpforms-container,
.contact-form .wpforms-container-full{ margin:0; }
.contact-form .wpforms-field-container{ display:grid; gap:1.1rem; }
.contact-form .wpforms-field{ padding:0; }
.contact-form .wpforms-submit-container{ margin-top:1.1rem; }
.contact-form .wpforms-error-noscript{ display:block; color:var(--on-dark-dim); font-size:.9rem; }
.contact-form .wpforms-field-label,
.contact-form .wpforms-field-label-inline{
  display:block; font-family:var(--font-heading); font-weight:600;
  font-size:.8rem; letter-spacing:.05em; margin-bottom:.35rem;
  color:var(--on-dark); line-height:1.65;
}
.contact-form .wpforms-required-label{ color:var(--accent); }
.contact-form input[type=text],
.contact-form input[type=tel],
.contact-form input[type=email],
.contact-form textarea{
  width:100%; min-width:0; font:inherit; color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px; padding:.75rem .9rem;
  box-shadow:none; max-width:100%;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:rgba(237,233,226,.45); }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;
  background:rgba(255,255,255,.07); color:#fff;
}
.contact-form textarea{ resize:vertical; height:96px; min-height:96px; }
.contact-form .wpforms-submit-container{ padding:0; }
.contact-form button[type=submit],
.contact-form .wpforms-submit{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-heading); font-weight:600; font-size:.95rem;
  padding:.85rem 1.7rem; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer;
  background:var(--accent); color:var(--on-accent);
  transition:transform .15s ease, background .15s ease;
}
.contact-form button[type=submit]:hover,
.contact-form .wpforms-submit:hover{ background:var(--accent-hover); color:var(--on-accent); }
.contact-form button[type=submit]:focus-visible,
.contact-form .wpforms-submit:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.contact-form button[type=submit]:active{ transform:scale(.98); }
.contact-form .wpforms-field-description,
.contact-form .wpforms-field-sublabel{ font-size:.83rem; color:var(--on-dark-dim); }
.contact-form label.wpforms-error,
.contact-form em.wpforms-error{ color:#F0B27A; font-size:.9rem; display:block; margin-top:.35rem; }
.contact-form input.wpforms-error,
.contact-form textarea.wpforms-error{ border-color:#F0B27A; }
.contact-form .wpforms-confirmation-container,
.contact-form .wpforms-confirmation-container-full{
  display:flex; align-items:flex-start; gap:.9rem;
  background:rgba(224,140,51,.14); border:1px solid var(--accent);
  border-radius:var(--radius); padding:1.5rem; margin:0;
  color:var(--on-dark);
}
.contact-form .wpforms-confirmation-container::before,
.contact-form .wpforms-confirmation-container-full::before{
  content:""; flex:none; width:26px; height:26px; background:var(--accent);
  -webkit-mask:url(assets/icons/check-circle.svg) no-repeat center/contain;
  mask:url(assets/icons/check-circle.svg) no-repeat center/contain;
  margin-top:.1rem;
}
.contact-form .wpforms-confirmation-container p,
.contact-form .wpforms-confirmation-container-full p{ margin:0; color:var(--on-dark); }
.contact-form .wpforms-confirmation-container a,
.contact-form .wpforms-confirmation-container-full a{ color:var(--accent); white-space:nowrap; }

/* Fallback shown when WPForms Lite is not installed yet. */
.form-missing{
  border:1px dashed var(--accent); border-radius:var(--radius);
  padding:1.25rem; color:var(--on-dark); font-size:.95rem;
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink); color:var(--on-dark-dim);
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:1.75rem;
  font-size:.85rem;
}
.site-footer .wrap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem;
}
.site-footer p{ margin:0; }
.site-footer a{ color:var(--on-dark-dim); }
.site-footer a:hover{ color:var(--accent); }

/* ============================================================
   15. SCROLL REVEAL
   The hiding class is added by JavaScript, so content is always
   visible when JavaScript is off.
   ============================================================ */
html.js-reveal .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.js-reveal .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js-reveal .reveal{ opacity:1; transform:none; transition:none; }
  .wp-block-button > .wp-block-button__link, .btn, .svc{ transition:none; }
  .sm-slides{ scroll-behavior:auto; }
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .services-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .contact-grid{ grid-template-columns:minmax(0,1fr); }
  .reviews-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 720px){
  /* Bigger touch target for the card toggle without moving anything. */
  .svc-detail > summary{ padding-block:.75rem; margin-block:-.75rem; }
  .nav-phone a{ font-size:0; gap:0; }
  .call-bar{ display:block; }
  body{ padding-bottom:3.6rem; }
}
@media (max-width: 480px){
  .svc{ padding:1.1rem .9rem; }
  .site-header .nav .wp-block-button > .wp-block-button__link{ padding:.55rem .95rem; font-size:.78rem; }
  .logo-sub{ display:none; }
  /* At this width v4 squeezed the phone icon down to zero pixels. Hiding it
     outright reads the same and stops the header overflowing at 320px; the
     sticky call bar is the phone affordance on small screens. */
  .nav-phone{ display:none; }
  .nav-actions{ gap:.8rem; }
  .lang-btn{ padding:.45rem .6rem; }
  .svc-tagline{ font-size:.84rem; }
  .wp-block-buttons.hero-ctas{ display:grid; grid-template-columns:minmax(0,1fr); }
  .wp-block-buttons.hero-ctas .wp-block-button{ width:100%; }
  .wp-block-buttons.hero-ctas .wp-block-button__link{ width:100%; justify-content:center; }
}