/*
Theme Name: Simply Clean
Theme URI: https://simplycleanoxford.com/
Author: Simply Clean
Description: Oxford's premier home cleaning service. A direct port of the Simply Clean static site — same layout, same animations — with the photography, the home page copy, the navigation and every interior page made editable from wp-admin, and the Commercial, Book Now and Gift Card pages wired to the client's Launch27 booking forms.
Version: 1.8.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simply-clean
Tags: one-column, custom-logo, custom-menu, editor-style, full-width-template
*/

/* ==========================================================================
   Merged from the inline <style> blocks of index.html and pages.html.
   Everything above the "front page only" divider is shared; the reveal system
   is pages.html's (html.js-reveal + [data-shown]), which degrades to plain
   visible content when JS is off, and is now used on the front page too.
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',-apple-system,sans-serif;color:#333;background:#ece8e0;line-height:1.6;-webkit-font-smoothing:antialiased}

/* Horizontal clipping, without the side effect the old rule had.
   body{overflow-x:hidden} on its own can make the body its own scroll
   container, and a scroll container's content box excludes its scrollbar — so
   the body ends up NARROWER than the viewport. Anything position:fixed keeps
   sizing against the viewport, which is the full width, so the fixed nav and
   the fixed hero were drawn wider than every section in normal flow and bled
   past the right-hand edge of the page, taking the menu button with them.

   overflow-x:clip clips exactly the same way but never creates a scroll
   container, so the body stays the width of the viewport and the fixed layer
   and the flowed layer cannot disagree. Setting it on html as well stops the
   body's overflow from being propagated up to the viewport in the first place.
   hidden stays as the first declaration so browsers without clip keep today's
   behaviour rather than losing the clipping altogether. */
html,body{overflow-x:hidden;overflow-x:clip}
/* pages.html carried a darker default text colour than index.html; keep both
   exactly as they were rather than picking a winner */
body.sc-interior{color:#2d3e50}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

@keyframes lineUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes tabFill{from{height:0%}to{height:100%}}

/* fixed nav states */
.site-nav{transition:background 0.4s ease,border-color 0.4s ease,box-shadow 0.4s ease}
.site-nav.scrolled{background:#2d3e50 !important;border-bottom-color:rgba(255,255,255,0.08) !important;box-shadow:0 8px 32px rgba(26,37,48,0.25)}

/* nav links. In the static site these styles were inline on each <a>; wp_nav_menu
   emits <ul><li><a>, so they live here instead — same computed result. */
.site-nav .nav-links ul{display:flex;align-items:center;gap:24px;white-space:nowrap;list-style:none;margin:0;padding:0}
.site-nav .nav-links li{display:flex;align-items:center}
.site-nav .nav-links a{color:#4de65f;font-family:'Josefin Sans',sans-serif;font-size:0.65rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer}
.site-nav .nav-links a:not(.nav-cta){position:relative}
/* One brush stroke, the same on every link. It used to be width:115% of the
   link, which meant the stroke was sized by how long the word was: underline-
   stroke2.png is 1454x130, an 11.2:1 strip, so "SHORT TERM RENTALS" was wide
   enough to draw it at full height while "HELP" squeezed it down to about 3px
   and looked like a smudge. A fixed box draws all of them identically. Width is
   the only real knob — background-size:contain keeps the strip's proportions, so
   the stroke is always width/11.2 tall; raise 64px to make it bigger, and keep
   height just under width/11.2 so the box stays snug around it. */
.site-nav .nav-links a:not(.nav-cta)::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) scaleX(0);width:64px;height:6px;background:url('assets/underline-stroke2.png') center/contain no-repeat;transition:transform 0.3s ease,opacity 0.3s ease;opacity:0;pointer-events:none}
.site-nav .nav-links a:not(.nav-cta):hover::after,
.site-nav .nav-links .current-menu-item>a:not(.nav-cta)::after,
.site-nav .nav-links .current_page_item>a:not(.nav-cta)::after,
.site-nav .nav-links .current-menu-ancestor>a:not(.nav-cta)::after{transform:translateX(-50%) scaleX(1);opacity:1}
/* The green pill is drawn on the <a>, and the selector has to say so.
   The menu item stores `nav-cta` as its class, which wp_nav_menu prints on the
   <li>, and sc_nav_menu_link_attributes() copies it onto the <a> as well — so
   both elements carry it. An unqualified .nav-cta therefore painted the
   background, the padding and the radius TWICE, one pill nested inside the
   other, and the button came out roughly double size with the label floating
   off-centre. Qualifying with `a.` leaves the <li> a plain list item. */
a.nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:6px;background:#3ab54a;color:#ffffff !important;font-weight:600 !important;letter-spacing:0.1em !important;transition:background 0.2s,transform 0.2s;line-height:1.2}
a.nav-cta:hover{background:#34a843 !important;transform:translateY(-1px)}

/* ==========================================================================
   Viewport height on phones

   The hero is a position:fixed panel of height:100vh with a matching 100vh
   spacer scrolling past it. On a phone that does not mean what it says: mobile
   browsers measure vh against the viewport with the address bar *hidden*, so
   100vh is taller than the screen actually is, by the height of the toolbars.
   The hero was therefore drawn taller than the visible area and its centred
   contents sat low and ran off the bottom — and being position:fixed, nothing
   could be scrolled to reach them.

   svh is the same measurement taken with the toolbars *shown*: the smallest the
   viewport ever gets, so a 100svh hero always fits. Both declarations are kept
   deliberately. A browser too old to know svh drops that line as invalid and
   keeps the vh above it, which is exactly the behaviour it has today.

   The hero and the spacer must always carry the same height or the page scrolls
   out of step with the panel behind it, so they are set together, here, once.
   ========================================================================== */
.hero-fixed,.hero-spacer{height:100vh !important;height:100svh !important}

/* The menu button's label, and anything else meant for screen readers only.
   WordPress themes are expected to carry this; nothing needed it until now. */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* mobile menu button. display:none here and turned on at the breakpoint, so the
   desktop navigation is exactly what it always was. 44px is the touch target;
   the three bars inside are 24px wide and become an X when the panel opens. */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:none;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.nav-toggle-box{display:block;position:relative;width:24px;height:16px}
.nav-toggle-bar{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:#4de65f;transition:transform 0.3s ease,opacity 0.2s ease}
.nav-toggle-bar:nth-child(1){top:0}
.nav-toggle-bar:nth-child(2){top:7px}
.nav-toggle-bar:nth-child(3){top:14px}
.site-nav.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-nav.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
.site-nav.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* masked line reveals */
.mask-line{display:block;overflow:hidden}
.mask-line>span{display:inline-block}
html.js-reveal .mask-line>span{transform:translateY(112%)}
html.js-reveal .hero-line>span{animation:lineUp 1.1s cubic-bezier(0.19,1,0.22,1) forwards}
html.js-reveal .split .mask-line>span{transition:transform 1s cubic-bezier(0.19,1,0.22,1)}
html.js-reveal .split[data-shown] .mask-line>span{transform:translateY(0)}

/* Reveal states apply ONLY once the stamping loop has proven it is alive
   (html.js-reveal). Without JS everything renders normally — content can
   never be gated off by a lifecycle hiccup. State lives on [data-shown]. */
html.js-reveal [data-reveal]{opacity:0;transform:translateY(44px);transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.19,1,0.22,1)}
html.js-reveal [data-reveal="left"]{transform:translateX(-72px)}
html.js-reveal [data-reveal="right"]{transform:translateX(72px)}
html.js-reveal [data-reveal][data-shown]{opacity:1;transform:none}

/* brush underline beneath section headings — only used on non-green sections */
.heading-underline{display:block}
html.js-reveal .heading-underline{opacity:0;transform:scaleX(0.35);transform-origin:center;transition:opacity 0.8s ease 0.5s,transform 1.1s cubic-bezier(0.19,1,0.22,1) 0.5s}
html.js-reveal .split[data-shown] .heading-underline{opacity:1;transform:scaleX(1)}

/* photo mask reveals */
html.js-reveal .pr{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(0.65,0,0.35,1) 0.15s}
html.js-reveal .pr.pr-l{clip-path:inset(0 100% 0 0)}
html.js-reveal .pr.pr-r{clip-path:inset(0 0 0 100%)}
html.js-reveal .split[data-shown] .pr{clip-path:inset(0 0 0 0)}
html.js-reveal .pr>img,html.js-reveal .pr>div>img{transform:scale(1.3);transition:transform 1.6s cubic-bezier(0.22,0.61,0.36,1) 0.15s}
html.js-reveal .split[data-shown] .pr>img,html.js-reveal .split[data-shown] .pr>div>img{transform:scale(1)}

/* form controls */

/* FAQ accordion */
.faq{border-bottom:1px solid rgba(45,62,80,0.14)}
.faq-q{width:100%;background:none;border:none;text-align:left;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:'Poppins',sans-serif;font-size:1rem;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;color:#2d3e50;transition:color 0.25s ease}
.faq-q:hover{color:#3ab54a}
.faq-q::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:300;color:#3ab54a;transition:transform 0.35s ease}
.faq.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;opacity:0;overflow:hidden;transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1),opacity 0.35s ease,padding 0.45s ease;padding:0 44px 0 0}
.faq.open .faq-a{max-height:340px;opacity:1;padding:0 44px 24px 0}

/* checklist page — grouped task cards. The tick is a ::before rather than a
   markup span: 51 list items. No hover lift on the cards (see the front page). */
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.check-card{background:#fff;border-radius:16px;padding:26px 28px;box-shadow:0 1px 6px rgba(0,0,0,0.04)}
.check-card h3{font-family:'Poppins',sans-serif;font-size:0.95rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#2d3e50;margin-bottom:14px}
.check-list li{position:relative;padding-left:28px;font-family:'Montserrat',sans-serif;font-size:0.9375rem;line-height:1.75;color:#44505e;margin-bottom:9px;text-wrap:pretty}
.check-list li:last-child{margin-bottom:0}
.check-list li::before{content:'✓';position:absolute;left:0;top:0;color:#3ab54a;font-weight:700}
.check-list.on-dark li{color:rgba(255,255,255,0.82)}
.check-list.on-dark li::before{color:#4de65f}
.check-cols{columns:3 250px;column-gap:34px}
.check-cols li{break-inside:avoid}

/* terms page — long-form legal document. Class-based rather than inline: ~50
   paragraphs. No [data-reveal] on the body copy either — staggered fade-ins
   fight you when you are actually trying to read a contract. */
.legal h3{font-family:'Poppins',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#2d3e50;margin:40px 0 12px;scroll-margin-top:96px}
.legal h3:first-child{margin-top:0}
.legal h4{font-family:'Poppins',sans-serif;font-size:0.9rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:#3ab54a;margin:22px 0 8px}
.legal p,.legal li{font-family:'Montserrat',sans-serif;font-size:0.9375rem;line-height:1.95;color:#44505e;text-wrap:pretty}
.legal p+p{margin-top:14px}
/* the global reset only clears ul markers, so an ol would double-number
   ("1. 1)") against the explicit numbering in the copy */
.legal ol,.legal ul{list-style:none;margin:14px 0 0}
.legal li{position:relative;padding-left:30px;margin-bottom:8px}
.legal li>span{position:absolute;left:0;top:0;color:#3ab54a;font-weight:600}
.legal a{color:#2d3e50;font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:break-word}
.legal a:hover{color:#3ab54a}
.legal-note{border-left:4px solid #3ab54a;padding:6px 0 6px 20px;margin:24px 0}
.legal-note p{color:#2d3e50}
.toc{columns:3 200px;column-gap:34px;margin-top:6px}
.toc button{display:block;width:100%;text-align:left;background:none;border:none;padding:0;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:0.875rem;line-height:2.05;color:#1f2c3a;break-inside:avoid;transition:color 0.2s ease}
.toc button:hover{color:#14532d;text-decoration:underline;text-underline-offset:3px}
.toc-label{font-family:'Josefin Sans',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#1f2c3a;opacity:0.65;margin-bottom:2px}

/* covid page — frequently touched sanitation list */
/* multicol, not grid: items flow down each column so a wrapping item can't
   stretch a whole row and leave ragged gaps beside it */
.sanit-grid{columns:3 250px;column-gap:32px}
.sanit-grid li{break-inside:avoid;position:relative;padding-left:26px;font-family:'Montserrat',sans-serif;font-size:1rem;line-height:2.15;color:#44505e}
.sanit-grid li>span{position:absolute;left:0;top:0;color:#3ab54a;font-weight:300}

/* work page — numbered "basics" rows + apply callouts */
.stack-row.on-light{border-bottom-color:rgba(45,62,80,0.14)}
.step-num{font-family:'Poppins',sans-serif;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;line-height:1;color:#3ab54a}
.apply-tag{display:inline-block;padding:1px 9px;border-radius:5px;background:rgba(31,44,58,0.14);font-weight:700;color:#1f2c3a;white-space:nowrap}

/* in-page jump targets (help groups, apply section) — clears the fixed nav */
.jump-target{scroll-margin-top:96px}

/* help page — FAQ group headings, jump chips, in-answer links */
.help-chip{padding:11px 20px;border-radius:999px;border:1px solid rgba(45,62,80,0.28);background:rgba(255,255,255,0.5);font-family:'Josefin Sans',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#1f2c3a;cursor:pointer;transition:background 0.25s ease,border-color 0.25s ease,color 0.25s ease}
.help-chip:hover{background:#fff;border-color:#2d3e50;color:#2d7a35}
/* ==========================================================================
   The blog — index.php

   The old site's listing was a two-thirds/one-third split: posts on the left,
   category and tag links on the right. Same shape here, drawn in the interior
   pages' vocabulary — the white .check-card, Poppins headings, the Josefin
   Sans eyebrow, the green brush colour on the meta line.
   ========================================================================== */
.blog-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;align-items:start}
.blog-main{min-width:0}

.blog-card{margin-bottom:18px}
/* .check-card h3 is sized for the checklist's short labels; a headline needs
   more room and sentence-cased letterforms to stay readable at length. */
.blog-card h3{font-size:1.2rem;line-height:1.35;text-transform:none;letter-spacing:0;margin-bottom:12px}
.blog-card h3 a{color:#2d3e50;transition:color 0.2s ease}
.blog-card h3 a:hover{color:#3ab54a}
.blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:'Josefin Sans',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#3ab54a}
.blog-avatar{border-radius:50%;flex:0 0 auto}
.blog-excerpt{font-family:'Montserrat',sans-serif;font-size:0.9375rem;line-height:1.9;color:#44505e;text-wrap:pretty}
.view-article{display:inline-block;margin-top:14px;font-family:'Josefin Sans',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#3ab54a;border-bottom:2px solid rgba(58,181,74,0.3);padding-bottom:2px;transition:color 0.2s ease,border-color 0.2s ease}
.view-article:hover{color:#2d3e50;border-bottom-color:#2d3e50}

.blog-aside{background:#fff;border-radius:16px;padding:26px 28px;box-shadow:0 1px 6px rgba(0,0,0,0.04)}
.blog-aside-title{font-family:'Josefin Sans',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#2d3e50;opacity:0.6;margin-bottom:14px}
.blog-aside-title:not(:first-child){margin-top:28px}
.blog-aside-list li{border-bottom:1px solid rgba(45,62,80,0.08)}
.blog-aside-list li:last-child{border-bottom:0}
.blog-aside-list a{display:block;padding:9px 0;font-family:'Montserrat',sans-serif;font-size:0.9rem;color:#2d3e50;transition:color 0.2s ease}
.blog-aside-list a:hover{color:#3ab54a}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px}
.blog-tag{display:inline-block;padding:6px 12px;border-radius:999px;background:#f0ece4;font-family:'Montserrat',sans-serif;font-size:0.78rem;color:#44505e;transition:background 0.2s ease,color 0.2s ease}
.blog-tag:hover{background:#3ab54a;color:#fff}

/* Pagination. WordPress wraps the numbers in <div class="nav-links">, which is
   the nav bar's class — hence .site-nav scoping on every rule up top. These
   rules are what that div gets instead. */
.pagination{margin-top:34px}
.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:8px;background:#fff;font-family:'Josefin Sans',sans-serif;font-size:0.8rem;font-weight:600;letter-spacing:0.06em;color:#2d3e50;box-shadow:0 1px 6px rgba(0,0,0,0.04);transition:background 0.2s ease,color 0.2s ease}
.pagination a.page-numbers:hover{background:#3ab54a;color:#fff}
.pagination .page-numbers.current{background:#2d3e50;color:#fff}
.pagination .page-numbers.dots{background:none;box-shadow:none;min-width:0;padding:0 4px}

/* ==========================================================================
   A single post — single.php

   Post content is written in the editor, not by this theme, so it arrives as
   plain h2/h3/p/ul/blockquote and has to be styled generically. Three of the
   resets at the top of this file have to be undone inside it: the site sets
   ul{list-style:none}, a{color:inherit;text-decoration:none} and
   img{display:block}, all correct for a hand-built marketing page and all
   wrong for an article, where a bulleted list needs its bullets and a link
   has to look like one.
   ========================================================================== */
.post-body{font-family:'Montserrat',sans-serif;font-size:1.0625rem;line-height:1.9;color:#2d3e50;text-wrap:pretty}
.post-body>*+*{margin-top:22px}
.post-body h2,.post-body h3,.post-body h4{font-family:'Poppins',sans-serif;font-weight:600;color:#2d3e50;line-height:1.3}
.post-body h2{font-size:1.5rem;margin-top:44px}
.post-body h3{font-size:1.2rem;margin-top:36px}
.post-body h4{font-size:1.05rem;margin-top:30px}
.post-body a{color:#2d7a35;font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:color 0.2s ease}
.post-body a:hover{color:#3ab54a}
.post-body ul,.post-body ol{padding-left:24px}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin-top:8px}
.post-body li::marker{color:#3ab54a}
.post-body img{max-width:100%;height:auto;border-radius:12px;margin-left:auto;margin-right:auto}
.post-body figure{margin-top:30px}
.post-body figcaption{margin-top:10px;font-family:'Josefin Sans',sans-serif;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(45,62,80,0.55);text-align:center}
.post-body blockquote{border-left:4px solid #3ab54a;padding:4px 0 4px 22px;font-size:1.125rem;font-style:italic;color:#1f2c3a}
.post-body hr{border:0;height:1px;background:rgba(45,62,80,0.14);margin-top:40px}
.post-body table{width:100%;border-collapse:collapse;font-size:0.95rem}
.post-body th,.post-body td{border:1px solid rgba(45,62,80,0.14);padding:10px 12px;text-align:left}
.post-body th{background:rgba(45,62,80,0.05);font-family:'Poppins',sans-serif;font-weight:600}
.post-body .aligncenter{margin-left:auto;margin-right:auto}

/* categories and tags under the article */
.post-terms{margin-top:44px;padding-top:26px;border-top:1px solid rgba(45,62,80,0.12);font-family:'Montserrat',sans-serif;font-size:0.9rem;color:#44505e}
.post-terms-row+.post-terms-row{margin-top:10px}
.post-terms-label{font-family:'Josefin Sans',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:rgba(45,62,80,0.55);margin-right:10px}
.post-terms a{color:#2d3e50;text-decoration:underline;text-underline-offset:3px;transition:color 0.2s ease}
.post-terms a:hover{color:#3ab54a}

/* previous / next. .nav-links here is the post navigation's, not the nav bar's
   — see the .site-nav scoping at the top of this file. */
.post-navigation{margin-top:34px}
.post-navigation .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.post-navigation .nav-next{text-align:right}
.post-navigation a{display:block;background:#fff;border-radius:12px;padding:18px 20px;box-shadow:0 1px 6px rgba(0,0,0,0.04);transition:transform 0.2s ease,box-shadow 0.2s ease}
.post-navigation a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(45,62,80,0.1)}
.post-nav-label{display:block;font-family:'Josefin Sans',sans-serif;font-size:0.68rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#3ab54a;margin-bottom:6px}
.post-nav-title{font-family:'Poppins',sans-serif;font-size:0.95rem;font-weight:600;color:#2d3e50;line-height:1.4}
.post-back{margin-top:34px;text-align:center}
.post-pagelinks{margin-top:30px;font-family:'Montserrat',sans-serif;font-size:0.9rem}

.faq-link{color:#2d3e50;font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:color 0.2s ease}
.faq-link:hover{color:#3ab54a}
.faq-a p+p,.faq-a p+ul,.faq-a ul+p{margin-top:14px}
.faq-a li{position:relative;padding-left:24px;line-height:2}
.faq-a li>span{position:absolute;left:0;top:0;color:#3ab54a;font-weight:300}

/* booking step tabs */

.stack-row{display:grid;grid-template-columns:180px 1fr;gap:40px;align-items:center;padding:52px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.stack-row:last-child{border-bottom:none}

/* footer link columns. Inline in the static site; here so wp_nav_menu output
   lands in the same place. */
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col a{display:block;font-family:'Josefin Sans',sans-serif;font-size:0.875rem;font-weight:600;color:#3ab54a;letter-spacing:0.08em;line-height:2.4;transition:opacity 0.2s}
.footer-col a:hover{opacity:0.7}

/* inline style-hover conversions (dc runtime metadata → real CSS :hover) */
.cta-dark:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,37,48,0.3)}
.cta-outline:hover{background:#2d3e50;color:#ffffff}
.social-btn:hover{background:rgba(77,230,95,0.14);transform:translateY(-3px)}
.book-appt-btn:hover{background:#34a843}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}

/* ==========================================================================
   FRONT PAGE ONLY — from index.html
   ========================================================================== */

.zip-input::placeholder{color:rgba(0,0,0,0.35)}
.zip-btn:hover{background:#34a843 !important}

/* autotabs state machine */
.autotab{padding:14px 28px 14px 60px;cursor:pointer;position:relative;overflow:hidden;transition:background 0.4s ease,padding 0.4s ease,box-shadow 0.4s ease,border-radius 0.4s ease;border-radius:0;z-index:1}
.autotab:hover{background:rgba(58,181,74,0.04)}
.autotab.active{background:#fff;padding:24px 28px 24px 60px;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04);z-index:2}
.autotab-progress{position:absolute;top:25px;bottom:25px;left:22px;width:6px;border-radius:4px;background:rgba(58,181,74,0.12);overflow:hidden;transition:top 0.4s ease,bottom 0.4s ease}
.autotab:not(.active) .autotab-progress{top:30%;bottom:30%}
.autotab-fill{position:absolute;top:0;left:50%;transform:translateX(-50%);width:6px;height:0%;background:#3ab54a;border-radius:4px}
.autotab-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#3ab54a;color:#fff;font-family:'Montserrat',sans-serif;font-size:0.75rem;font-weight:700;margin-bottom:8px;opacity:0.3;transform:scale(0.85);transition:opacity 0.4s ease,transform 0.4s ease}
.autotab.active .autotab-num{opacity:1;transform:scale(1)}
.autotab-title{font-family:'Poppins',sans-serif;font-size:1.125rem;font-weight:600;color:#2d3e50;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0;opacity:0.35;transition:color 0.4s ease,margin 0.4s ease,opacity 0.4s ease}
.autotab.active .autotab-title{color:#3ab54a;margin-bottom:10px;opacity:1}
/* every step reserves the same description height (--desc-h, measured in JS).
   Steps have different copy lengths, so without this the column is a different
   height per step and — being center-aligned — the whole tab stack drifts up
   and down each time the carousel advances. */
.autotab-desc{font-family:'Montserrat',sans-serif;font-size:0.875rem;color:#2d3e50;line-height:1.7;height:0;opacity:0;overflow:hidden;transition:height 0.5s cubic-bezier(0.4,0,0.2,1),opacity 0.4s ease}
.autotab.active .autotab-desc{height:var(--desc-h,72px);opacity:1}
.autotab-image{position:absolute;inset:0;opacity:0;transform:scale(1.06);clip-path:inset(0 0 100% 0);transition:opacity 0.55s ease,transform 0.9s cubic-bezier(0.22,0.61,0.36,1),clip-path 0.75s cubic-bezier(0.65,0,0.35,1)}
.autotab-image.active{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0)}

/* ==========================================================================
   Breakpoints

   The first five rules came from pages.html and are unchanged. Everything after
   them is new: the static site was built for a desktop and index.html carried no
   media queries at all, so the navigation, the front page's two side-by-side
   sections and the FAQ answers all broke on a phone.

   A lot of this needs !important, which is not carelessness — the layout it is
   overriding is written inline on the elements themselves (a direct port of the
   static markup), and an inline declaration outranks any stylesheet rule that
   is not !important. Where a rule targets something not set inline, it is left
   plain. The class hooks these rely on — .nav-bar, .hiw-row, .hiw-tabs,
   .hiw-media, .feat-row, .hero-zip — exist only to give this section something
   to aim at.
   ========================================================================== */

@media (max-width:900px){
  .two-col{grid-template-columns:1fr;gap:34px}
  /* the sidebar drops under the posts rather than squeezing beside them */
  .blog-row{grid-template-columns:1fr;gap:30px}
  /* previous/next side by side leaves each about 150px on a phone */
  .post-navigation .nav-links{grid-template-columns:1fr}
  .post-navigation .nav-next{text-align:left}
  .stack-row{grid-template-columns:1fr;gap:22px;padding:42px 0}
  .stack-row>div:first-child{justify-content:flex-start !important}
  .footer-col{text-align:center}

  /* --- navigation: one nowrap row of eight becomes a drop-down panel ---
     Below about 880px the row stopped fitting and body{overflow-x:hidden} cut
     the overflow off, which is what made the site unnavigable: the links were
     rendered, just outside the viewport with no way to scroll to them. */
  .nav-bar{justify-content:space-between !important;gap:14px !important;padding:0 18px !important}
  .nav-toggle{display:flex}
  /* the bar is transparent until you scroll; an open panel hanging off a
     transparent bar reads as floating, so opening it fills the bar in too */
  .site-nav.nav-open{background:#2d3e50 !important;border-bottom-color:rgba(255,255,255,0.08) !important}
  /* absolute against .site-nav (position:fixed), so top:100% is under the bar */
  .site-nav .nav-links{position:absolute;top:100%;left:0;right:0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;background:#2d3e50;box-shadow:0 18px 34px rgba(26,37,48,0.32);transition:max-height 0.35s ease,opacity 0.25s ease,visibility 0s linear 0.35s}
  /* visibility, not just height: a 0-height panel still holds tab stops.
     The cap is in svh for the same reason the hero is: at 100vh the panel is
     allowed to run past the bottom of the screen, and because it is absolute
     inside a fixed bar the page cannot be scrolled to bring the last few links
     back. Bounded to the *visible* height it fills at most the screen and
     scrolls internally instead. Both units again, oldest first. */
  .site-nav.nav-open .nav-links{max-height:calc(100vh - 64px);max-height:calc(100svh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;opacity:1;visibility:visible;transition:max-height 0.35s ease,opacity 0.25s ease,visibility 0s}
  .site-nav .nav-links ul{flex-direction:column;align-items:stretch;gap:0;white-space:normal;padding:6px 0 14px}
  .site-nav .nav-links li{display:block}
  .site-nav .nav-links a{display:block;padding:15px 22px;font-size:0.78rem;letter-spacing:0.12em}
  /* the brush stroke is centred under a word in a row; stacked it just floats */
  .site-nav .nav-links a:not(.nav-cta)::after{display:none}
  /* Needs `.site-nav .nav-links a.nav-cta`, not `.nav-cta`: the .site-nav .nav-links a rule above
     is more specific than a bare class and would otherwise hand the pill the
     full-width stacked-link padding on top of its own. */
  .site-nav .nav-links a.nav-cta{display:inline-flex;margin:12px 22px 16px;padding:14px 26px}

  /* --- front page: "how it works" ---
     The tab column is flex:0 0 380px beside a photo. At 380px fixed it is wider
     than the content box on a phone, so the row overflowed rather than shrank. */
  .hiw-row{flex-direction:column;gap:24px !important;min-height:0 !important}
  .hiw-tabs{flex:1 1 auto !important}
  /* every pane inside is position:absolute, so once the row's min-height goes
     this box has no height of its own and the photograph vanishes outright */
  .hiw-media{min-height:300px}
  .autotab{padding:14px 18px 14px 52px}
  .autotab.active{padding:20px 18px 20px 52px}

  /* --- front page: the two photo-beside-cards feature rows --- */
  .feat-row{grid-template-columns:1fr !important}

  /* an answer that ran to three lines on a desktop runs to eight on a phone,
     and the desktop cap cut the rest off with no way to see it */
  .faq.open .faq-a{max-height:1400px}

  /* --- hero contents sized against their container, not the viewport ---
     The wordmark is width:min(640px,84vw): 84% of the *viewport*. The box it
     sits in is the viewport minus the hero's side padding, so on a narrow
     screen the image is wider than its own container, and an inline-block that
     outgrows its line box spills to the right — space to the left of the mark,
     the right-hand end cut off. The footer wordmark has never done this because
     it is sized width:100% + max-width, against the container. Same idea here.

     body{overflow-x:hidden} was never going to catch it: a position:fixed
     element's containing block is the viewport rather than the body, so the
     hero and everything in it sits outside what that rule can clip. */
  .hero-inner .mask-line>span{max-width:100%}
  .hero-inner img{width:100% !important;max-width:520px !important;height:auto !important}
  /* and nothing inside the hero may widen the viewport in the first place */
  .hero-fixed{overflow-x:hidden}
}
@media (max-width:640px){
  /* The booking widget's white card. Its padding is inline on the element, so
     trimming it needs !important like every other override in this block. A
     375px screen spends 56px on the section's own padding before the card even
     starts, and what is left is the width the booking form has to lay itself
     out in — so on a phone the card stops being a frame and just holds an edge. */
  .sc-widget{padding:10px 8px !important;border-radius:10px !important}
  .footer-cols{grid-template-columns:1fr 1fr !important}
  .check-card{padding:22px 20px}
  .faq-q{font-size:0.9rem;padding:18px 38px 18px 0}
}
@media (max-width:480px){
  /* the field and the button each took half the row; below ~480px that leaves
     the button's label — which is white-space:nowrap — nowhere to go */
  .hero-zip{flex-direction:column;gap:10px}
  .hero-zip .zip-input{border-radius:8px !important}
  .hero-zip .zip-btn{border-radius:8px !important;flex:0 0 auto !important}
  /* 110px of it clears the 64px bar; the bar is the same height on a phone, so
     the rest is breathing room the screen no longer has to spare */
  .hero-inner{padding:92px 20px 32px !important}
}

/* A phone held sideways is only ~390px tall, and the hero's wordmark, tagline
   and (stacked) postcode row do not fit inside that with the padding above.
   Keyed on height rather than width so a tablet in portrait — plenty tall — is
   not stripped back for no reason. */
@media (max-height:560px){
  .hero-inner{padding:74px 20px 22px !important}
  .hero-zip{margin-top:20px !important}
}