/*
Theme Name: Honey-Do Helpers
Description: Hello Elementor child theme carrying the Honey-Do Helpers design system and self-hosted brand fonts. Built by Mockup LLC for use with Elementor Free.
Author: Mockup LLC
Author URI: https://mockup.gg
Template: hello-elementor
Version: 1.7.0
Text Domain: honey-do-helpers
*/

/* CHANGELOG
   1.7.0 - Second round of live-deploy fixes.
           Header logo is an Image widget again, so it can be swapped in two
           clicks, but the theme now paints a shipped logo behind it until one
           is uploaded. That keeps the "just add an image" workflow without the
           blank header 1.5.0 shipped.
           Header columns rebalanced 24/44/32. Phone and CTA were sharing 20%
           of the bar and were crushed against the right edge.
           Cards restructured: the CARD IS THE COLUMN now, so it can hold an
           icon box plus a real button widget. Card titles are no longer links
           (an underlined heading reads as a mistake) and each linking card has
           a Learn More button at its foot. The gutter moved to the column
           because Elementor normally makes it with padding on
           .elementor-element-populated, which is the card here.
           FIXED: .card on the column also matched the mockup's plain .card
           rule, drawing a card inside a card. Column is reset first, same
           wrapper trap as .btn on a button widget.
           Call-now line gained its phone icon and centres on mobile with real
           space before the form.
           FIXED: the split image's offset block painted OVER the photo. The
           widget container now creates a stacking context above it.
           CTA button aligned to the right edge of the grid.
   1.6.0 - Fixes found on the first live deploy (Elementor 4.3.2).
           FIXED: icons invisible sitewide. Elementor 4.x renders Font Awesome
           as inline SVG with a FILLED path; the theme set fill:none on it.
           Fill is now currentColor, with a .is-stroke opt-out.
           FIXED: five icon names were Font Awesome 6 only (fa-trowel,
           fa-house-chimney, fa-droplet, fa-gear, fa-house) and resolved to
           nothing in the FA5 set Elementor bundles. Remapped.
           FIXED: white band around the gold trust strip. Elementor pads every
           column and spaces every widget, and the template generator hardcoded
           tablet/mobile padding so a zero-padding section still got 60px.
           Responsive padding now derives from the padding actually set.
           FIXED: Ready To Start copy and the CTA button sat at the top of their
           bands. Sections now carry Vertical Align: Middle and the theme sets
           align-items:center on those containers.
           FIXED: the compat layer had no responsive ramp, so a 98px hero
           headline stayed 98px on a phone and clipped.
           FIXED: mobile menu opened as a narrow strip because
           .elementor-widget-container was missing from the position:static
           chain the absolute panel needs.
           FIXED: header logo was an empty Image widget, so the header rendered
           with no logo at all. Ships as markup now.
           Call-now line raised to 22px; button underlines removed.
   1.5.0 - Elementor compatibility layer. Elementor's kit stylesheet loads after
           the theme and its widget selectors are two classes deep, so out of the
           box every heading rendered Elementor Primary cyan (#6EC1E4) and every
           button Elementor Accent green (#61CE70). Rather than fight those
           selectors, the theme now redefines the CSS custom properties they
           read, via body[class*="elementor-kit-"] at (0,1,1), which outranks
           Elementor's own .elementor-kit-N at (0,1,0). Adds type scale, button,
           icon-box, image-box, accordion and posts-widget rules on top.
           FIXED: .btn lands on Elementor's widget WRAPPER, not the anchor, so
           the wrapper painted a second full-column-width gold block behind each
           button. Wrapper is now stripped back.
           FIXED: an Elementor image widget with no image set collapsed to zero
           height. Empty ones now show the same placeholder block as the mockup.
           Verified by rendering all 9 templates through a simulator that
           reproduces Elementor's DOM and load order (elementor-sim/).
   1.4.0 - Testimonial styles extended for the Honey-Do Helpers Testimonials
           plugin: muted .off stars, the .where location line, and .grid-1 for
           single-column shortcode output.
           FIXED: :visited was grouped with :hover on every button variant, so a
           button the visitor had clicked stayed in its hover colour for good.
           :focus did the same after a mouse click. Resting state now carries
           :visited; only :hover and :active change colour.
           FIXED: the global a:hover/:focus/:active/:visited neutraliser is
           (0,1,1) and outranked component link rules at (0,1,0), so a focused
           .card-link inherited its parent colour. Wrapped in :where().
           FIXED: .has-sub was text-height, so the services panel needed a 22px
           margin to clear the header and that gap dropped :hover before the
           pointer arrived. .has-sub is now full header height, gap is zero.
           CTA banner centres below 767px.
   1.3.0 - Real copy throughout, built from the client's service list. Three
           sub-service pages renamed and re-slugged: interior-repairs, flooring,
           outdoor-repairs. Real phone (304) 370-4238 and email wired into the
           header, footer, contact page and schema. Client hero photo shipped in
           /images/ and applied to the home hero, every interior sub-hero and the
           parallax band, with a flat darker overlay below 767px.
           Mobile header reworked to logo-left / hamburger-right with the phone
           moved into the open menu as its own row. Trust bar centres when it
           stacks. Section heading column widened to 820px so real headlines sit
           on one line.
           FIXED: the website kit referenced fonts at ../theme/, a path that does
           not exist inside the kit zip, so the delivered mockup rendered in
           fallback faces. Fonts now ship inside site/fonts/.
   1.2.0 - Home page fitted to Draft 7 by measurement rather than eye. Display
           scale solved from Draft 7 text widths (H1 98px, H2 49px, parallax H2
           71px, hero lede 22px, section lede 16px, card body 13px, trust bar
           18px). Hero band trimmed to Draft 7's 560px, trust bar to 71px, card
           grid to 32px gaps, hero buttons to 58px.
           FIXED: section:not([class*="elementor"]) is (0,1,1) and was silently
           overriding padding on .hero, .subhero, .parallax, .cta-band and
           .quote-band, all of which sat at 88px instead of their own values.
           Wrapped in :where() to drop it to (0,0,1).
           ADDED: photo upload field on the quote forms, with styling for
           Forminator, Contact Form 7 and WPForms upload fields.
   1.1.0 - Type revision against Draft 7. Big Shoulders dropped from 700/800 to
           500 for section headings and card titles; only the hero H1 and the
           parallax H2 stay heavy. Trust bar and footer column headings moved
           from condensed Big Shoulders to Public Sans. Display scale enlarged
           to Draft 7 proportions (H1 82px, H2 44px). Family switched to
           'Big Shoulders'. Header CTA padding raised to hold the 40px minimum.
           Mobile header held to one row at 390px.
   1.0.0 - Initial build. Gold/black system, 9 pages, self-hosted fonts.
*/

/* ---- SELF-HOSTED BRAND FONTS (latin subset, only weights in use) ----
   Big Shoulders ships 500 / 600 / 700 only. Nothing in this system sets a
   display heading at 400, so that face is not shipped. If you add one,
   add the @font-face and the file together. */
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/big-shoulders-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/big-shoulders-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/big-shoulders-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/public-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/public-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/public-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/public-sans-latin-700-normal.woff2') format('woff2');}

/* Metric-matched fallbacks so a late swap does not reflow the page */
@font-face{font-family:'DisplayFallback';src:local('Arial Narrow'),local('Helvetica Neue Condensed'),local('sans-serif');
  size-adjust:86%;ascent-override:98%;descent-override:20%;line-gap-override:0%;}
@font-face{font-family:'BodyFallback';src:local('Helvetica Neue'),local('Arial'),local('sans-serif');
  size-adjust:100%;ascent-override:96%;descent-override:24%;line-gap-override:0%;}

/* ============================================================
   DESIGN TOKENS - never hardcode a hex inside a component rule
   ============================================================ */
:root{
  --dark:#141210;          /* header, hero, dark bands (warm near-black, not #000) */
  --dark-deep:#0C0B09;     /* footer, deepest surface */
  --accent:#E3A11B;        /* primary gold: buttons, trust bar, CTA band */
  --accent-deep:#BE840E;   /* gold hover / deeper bands */
  --accent-alt:#3A342A;    /* warm graphite: icon hexes, rules on dark */
  --highlight:#F0B93D;     /* bright gold: eyebrows, stars, links on dark */
  --bg:#FAF7F0;            /* page background (off-white, never pure white) */
  --bg-alt:#F1ECE0;        /* alternate section background */
  --line:#E3DCCB;          /* borders and dividers */
  --ink:#211F1A;           /* body text */
  --muted:#6E675A;         /* secondary text */

  --display:'Big Shoulders','DisplayFallback','Arial Narrow',sans-serif;
  --body:'Public Sans','BodyFallback',Arial,sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--bg);color:var(--ink);
  font-size:14.5px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}

/* Headings default to MEDIUM. Only the hero and parallax H2 go heavy.
   v1.0.0 set this to 700 and the whole page read as too thick. */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;text-transform:uppercase;
  line-height:1.04;letter-spacing:.005em;}
/* Neutralises the browser's default link colours (blue, purple when visited)
   without outranking component rules. Written bare, `a:hover` is (0,1,1) and
   beats any single-class rule like .card-link (0,1,0), which means a focused
   card link inherits its parent's colour and looks permanently hovered.
   :where() keeps the same matching at (0,0,1). Same trap as the section
   padding rule below. */
a{color:inherit;text-decoration:none;}
a:where(:hover,:focus,:active,:visited){color:inherit;text-decoration:none;}
:focus-visible{outline:3px solid var(--highlight);outline-offset:3px;}
/* :where() keeps Elementor's own <section> wrappers excluded while dropping
   this rule to element-only specificity (0,0,1). Without it this selector
   is (0,1,1) and silently overrides every component band below. */
section:where(:not([class*="elementor"])){padding:88px 0;}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;}
main{display:block;}

/* ---- Type scale ----
   Sizes are measured off Draft 7, where the display face runs large against
   the container. Big Shoulders is narrow, so a 44px H2 here occupies about
   the same width as a 30px H2 in a normal-width sans. */
h1{font-size:98px;font-weight:700;line-height:.98;}  /* hero only, the one heavy face */
h2{font-size:49px;font-weight:500;}
h3{font-family:var(--body);font-size:17px;font-weight:600;
  text-transform:none;letter-spacing:0;line-height:1.4;}
.eyebrow{font-family:var(--body);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;color:var(--accent-deep);display:block;margin-bottom:14px;}
.eyebrow-light{color:var(--highlight);}
/* The hero eyebrow in Draft 7 is white and roughly half again the size of
   the gold section eyebrows. Scoped so it cannot leak into sections. */
.hero .eyebrow{font-size:15px;letter-spacing:.2em;color:#EEEEEE;margin-bottom:18px;}
.lede{font-size:16px;line-height:1.75;color:var(--muted);max-width:680px;}
.small{font-size:12.5px;line-height:1.65;color:var(--muted);}

/* ============================================================
   BUTTONS - one system, three variants, identical metrics
   ============================================================ */
.btn{display:inline-block;padding:18px 30px;font-family:var(--body);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
  border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;}
/* RESTING state includes :visited. Grouping :visited with :hover (which this
   did until v1.4.0) leaves every button the visitor has already clicked stuck
   in its hover colour for good. :focus is deliberately NOT here either: a
   mouse click leaves focus on the button, so using it for the colour change
   makes the button look hovered until you click elsewhere. Keyboard focus is
   covered by the global :focus-visible outline rule. */
.btn-primary,.btn-primary:visited{
  background:var(--accent);color:var(--dark);border-color:var(--accent);}
.btn-primary:hover,.btn-primary:active{
  background:var(--highlight);color:var(--dark);border-color:var(--highlight);}

.btn-outline-light,.btn-outline-light:visited{
  background:transparent;color:var(--accent);border-color:var(--accent);}
.btn-outline-light:hover,.btn-outline-light:active{
  background:var(--accent);color:var(--dark);border-color:var(--accent);}

.btn-outline-dark,.btn-outline-dark:visited{
  background:var(--dark);color:var(--accent);border-color:var(--dark);}
.btn-outline-dark:hover,.btn-outline-dark:active{
  background:var(--accent-alt);color:var(--highlight);border-color:var(--accent-alt);}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
/* Draft 7's hero pair measures 58px tall and ~183px wide. */
.hero .btn{padding:20px 34px;font-size:14px;}
.btn svg{vertical-align:-2px;margin-left:7px;}

/* ============================================================
   HEADER - scoped to classes, never to the <header> element,
   because Header & Footer Builder may not output one.
   ============================================================ */
.site-head{background:var(--dark);border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:100;}
.nav{max-width:1240px;margin:0 auto;padding:0 40px;height:68px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;}
.logo-slot{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.logo-slot .mark{width:25px;height:22px;flex-shrink:0;}
.logo-slot .word{font-family:var(--display);font-weight:700;
  font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:#fff;line-height:1;white-space:nowrap;}
/* Nav is plain sans in Draft 7, not condensed. */
.navlinks{display:flex;align-items:center;gap:30px;}
.navlinks > a,.navlinks .has-sub > a{font-family:var(--body);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:#D8D3C8;line-height:1;
  display:inline-flex;align-items:center;gap:5px;}
.navlinks > a:hover,.navlinks > a:focus-visible,
.navlinks .has-sub > a:hover,.navlinks .has-sub > a:focus-visible{color:var(--accent);}
.navlinks > a.active,.navlinks .has-sub.active > a{color:var(--accent);}
/* Full header height, so the panel below it has no gap to cross. Do not
   put a margin back on .submenu: any gap between the trigger and the panel
   drops :hover before the pointer arrives and the menu snaps shut. */
.has-sub{position:relative;display:inline-flex;align-items:center;height:68px;}
.submenu{position:absolute;top:100%;left:-18px;margin-top:0;background:var(--dark);
  border:1px solid var(--accent-alt);border-top:3px solid var(--accent);min-width:212px;padding:8px 0;
  display:none;z-index:120;}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block;}
.submenu a{display:block;padding:9px 18px;font-size:12px;font-weight:400;letter-spacing:.04em;
  color:#D8D3C8;text-transform:none;line-height:1.4;}
.submenu a:hover,.submenu a:focus-visible{color:var(--accent);background:var(--accent-alt);}
.nav-right{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.nav-phone{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.01em;
  color:var(--accent);white-space:nowrap;}
.nav-phone:hover,.nav-phone:focus-visible{color:var(--highlight);}
/* 14px padding keeps this at the house 40px minimum touch target even at
   the smaller Draft 7 type size. Do not trim it below 13px. */
.nav-cta{padding:14px 20px;font-size:10px;letter-spacing:.1em;}
.menu-toggle{display:none;background:transparent;border:0;padding:10px;cursor:pointer;line-height:0;}
.menu-toggle .bars{display:block;width:24px;}
.menu-toggle .bars span{display:block;height:2px;background:var(--accent);margin:5px 0;transition:.2s;}
.navlinks > a.menu-cta{display:none;}
.navlinks > a.menu-phone{display:none;}

/* ============================================================
   HERO
   The overlay gradient is what keeps the headline readable, so it stays
   even after the client swaps the photo. Position is 'center right' so the
   subject stays in frame while the copy sits over the dark left side.
   ============================================================ */
.hero{position:relative;background:var(--dark);min-height:560px;display:flex;align-items:center;
  padding:68px 0;overflow:hidden;}  /* 68px lands the band at Draft 7's 560px */
.hero-photo{position:absolute;inset:0;
  background-image:
    linear-gradient(100deg,rgba(20,18,16,.95) 0%,rgba(20,18,16,.88) 30%,rgba(20,18,16,.45) 58%,rgba(20,18,16,.22) 100%),
    url('images/hero-handyman.jpg');
  background-size:cover;background-position:center right;background-repeat:no-repeat;}
.hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 40px;width:100%;}
.hero-copy{max-width:620px;}
.hero h1{color:#fff;margin-bottom:22px;}
.hero p{color:#C3BDB1;font-size:22px;line-height:1.3;max-width:600px;margin-bottom:34px;}
.photo-note{position:absolute;right:40px;bottom:22px;z-index:3;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.34);}

/* ---- Interior page header band ---- */
.subhero{position:relative;background:var(--dark);padding:74px 0 66px;overflow:hidden;}
.subhero{background-image:url('images/subhero-handyman.jpg');
  background-size:cover;background-position:center right;background-repeat:no-repeat;}
.subhero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,18,16,.95) 0%,rgba(20,18,16,.88) 45%,rgba(20,18,16,.58) 100%);}
.subhero .wrap{position:relative;z-index:2;}
.subhero h1{color:#fff;font-size:62px;font-weight:600;margin-bottom:14px;}
.subhero p{color:#C3BDB1;max-width:620px;}
.crumb{font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#8F887B;margin-bottom:16px;}
.crumb a:hover,.crumb a:focus-visible{color:var(--accent);}
.crumb .sep{color:var(--accent);padding:0 7px;}

/* ============================================================
   TRUST STRIP
   Draft 7 sets these in plain uppercase sans, not condensed.
   ============================================================ */
.trust{background:var(--accent);}
.trust-row{max-width:1240px;margin:0 auto;padding:23px 40px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;}
.trust-item{display:flex;align-items:center;gap:10px;font-family:var(--body);
  font-weight:500;font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dark);line-height:1.4;}
.trust-item svg{flex-shrink:0;}

/* ============================================================
   SECTION HEADS
   ============================================================ */
/* Wide enough that a real headline sits on one line at 49px. The lede
   keeps its own narrower measure via .lede. */
.sec-head{max-width:820px;margin-bottom:44px;}
.sec-head h2{margin-bottom:12px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.on-dark h2,.on-dark h3{color:#fff;}
.on-dark p{color:#C3BDB1;}

/* ============================================================
   CARDS
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);padding:40px 26px;
  transition:transform .2s,box-shadow .2s;}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,18,16,.10);}
.card h3{margin-bottom:9px;font-family:var(--display);
  font-size:20px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;}
.card p{color:var(--muted);font-size:13px;line-height:1.9;}
.hexicon{width:46px;height:40px;background:var(--dark);display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);}
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);}
.card-link:hover,.card-link:focus-visible{color:var(--ink);}

/* ---- Photo tile with caption ---- */
.tile{display:block;}
.tile .ph{aspect-ratio:4/3;background:linear-gradient(145deg,#5c554a 0%,#3b352d 55%,#2a251f 100%);
  position:relative;overflow:hidden;}
.tile .ph::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--body);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.45);}
.tile .cap{padding:16px 0 0;}
.tile .cap strong{display:block;font-family:var(--display);
  font-size:22px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;}
.tile .cap span{font-size:12.5px;color:var(--muted);}
.tile:hover .ph{filter:brightness(1.12);}

/* ============================================================
   SPLIT SECTION (image + copy)
   Offset block sits BOTTOM-RIGHT, matching Draft 7.
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split-img{position:relative;}
.split-img .ph{aspect-ratio:4/3;background:linear-gradient(145deg,#6a6357 0%,#403a31 60%,#2a251f 100%);
  position:relative;z-index:2;}
.split-img .ph::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--body);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.45);}
.split-img::after{content:"";position:absolute;left:14px;top:14px;width:100%;height:100%;
  background:var(--dark);z-index:1;}
.checklist{list-style:none;margin:20px 0 26px;}
.checklist li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;font-weight:500;font-size:14px;}
.checklist svg{flex-shrink:0;margin-top:4px;}

/* ============================================================
   PARALLAX BAND WITH FORM
   ============================================================ */
.parallax{position:relative;background:var(--dark);overflow:hidden;padding:76px 0;}
.parallax-photo{position:absolute;inset:0;background-attachment:fixed;background-size:cover;
  background-position:center;
  background-image:linear-gradient(90deg,rgba(20,18,16,.94) 0%,rgba(20,18,16,.80) 55%,rgba(20,18,16,.72) 100%),
                   url('images/hero-handyman.jpg');}
.parallax .wrap{position:relative;z-index:2;}
.parallax-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.parallax h2{color:#fff;font-size:71px;font-weight:700;margin-bottom:18px;}
.parallax p{color:#C3BDB1;font-size:22px;line-height:1.3;margin-bottom:26px;max-width:600px;}
/* Calling is the primary conversion on a trades site, so this is sized to be
   read at a glance rather than tucked under the paragraph. */
.callnow{display:inline-flex;align-items:center;gap:11px;font-family:var(--body);
  font-size:22px;font-weight:600;letter-spacing:.01em;color:#fff;}
.callnow:hover,.callnow:focus-visible{color:var(--accent);}
.formcard{background:#fff;padding:32px;}
.formcard label{display:block;font-size:12.5px;font-weight:500;margin-bottom:6px;color:var(--ink);}
.formcard .fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.formcard input,.formcard textarea{width:100%;border:1px solid var(--ink);background:#fff;
  padding:10px 12px;font-family:inherit;font-size:14px;color:var(--ink);margin-bottom:16px;border-radius:0;}
.formcard input:focus,.formcard textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);}
.formcard textarea{min-height:96px;resize:vertical;}
.submitbtn{background:var(--accent);color:var(--dark);border:0;padding:13px 28px;font-family:var(--body);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:none;cursor:pointer;transition:.2s;}
.submitbtn,.submitbtn:visited{background:var(--accent);color:var(--dark);}
.submitbtn:hover,.submitbtn:active{background:var(--highlight);color:var(--dark);}

/* ---- File upload drop zone ----
   Photos of the job are the single most useful thing a handyman can get
   before quoting, so this sits directly above Submit. The real <input> is
   kept in the layout but visually hidden, so the label stays a real click
   target and keyboard focus still lands on it. */
.uploadfield{margin-bottom:16px;}
.dropzone{position:relative;display:block;border:1px dashed var(--ink);background:var(--bg);
  padding:22px 18px;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s;}
.dropzone:hover,.dropzone:focus-within{border-color:var(--accent);background:#fff;}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.dropzone .dz-icon{display:block;margin:0 auto 8px;}
.dropzone .dz-main{display:block;font-size:13px;font-weight:600;color:var(--ink);}
.dropzone .dz-main u{color:var(--accent-deep);text-underline-offset:2px;}
.dropzone .dz-hint{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5;}
.dropzone:focus-within{outline:3px solid var(--highlight);outline-offset:2px;}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#fff;}
.steps .step{padding:34px 30px;border-right:1px solid var(--line);}
.steps .step:last-child{border-right:0;}
.steps .num{font-family:var(--display);font-size:52px;font-weight:700;color:var(--accent);line-height:1;}
.steps h3{margin:12px 0 8px;font-family:var(--display);
  font-size:20px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;}
.steps p{color:var(--muted);}
.on-dark .steps{background:transparent;border-color:var(--accent-alt);}
.on-dark .steps .step{border-right-color:var(--accent-alt);}

/* ============================================================
   REVIEWS
   ============================================================ */
/* These classes are also what the Honey-Do Helpers Testimonials plugin
   outputs, so the shortcode inherits this styling with no extra CSS. */
.review{background:#fff;border:1px solid var(--line);padding:30px 26px;}
.stars{color:var(--accent);letter-spacing:3px;font-size:13px;margin-bottom:13px;line-height:1;}
.stars .off{color:var(--line);}
.review p{font-style:italic;color:var(--muted);font-size:13.5px;}
.review .who{margin-top:16px;font-family:var(--body);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-style:normal;}
.review .who .where{display:block;margin-top:4px;font-weight:400;letter-spacing:.04em;
  text-transform:none;font-size:12px;color:var(--muted);}
/* Single-column variant, for [honeydo_testimonials columns="1"]. */
.grid-1{display:grid;grid-template-columns:1fr;gap:32px;}
.hdh-testimonials{align-items:start;}

/* ============================================================
   FAQ ACCORDION (details/summary - no JS, no plugin)
   ============================================================ */
.qitem{background:#fff;border:1px solid var(--line);margin-bottom:12px;}
.qitem > summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;font-weight:500;font-size:14.5px;}
.qitem > summary::-webkit-details-marker{display:none;}
.qitem > summary::after{content:"+";font-family:var(--display);
  font-size:24px;line-height:1;color:var(--accent-deep);flex-shrink:0;}
.qitem[open] > summary::after{content:"\2013";}
.qitem[open] > summary{border-bottom:1px solid var(--line);}
.qitem .qbody{padding:16px 22px 22px;color:var(--muted);}
.qnav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.pill{border:1px solid var(--line);background:#fff;padding:10px 18px;font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
/* .active is the real current-section state. :focus is left out so a
   clicked pill does not keep looking selected. */
.pill:hover,.pill.active{background:var(--accent);border-color:var(--accent);color:var(--dark);}

/* ============================================================
   BLOG
   ============================================================ */
.post{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;height:100%;}
.post .ph{aspect-ratio:16/10;background:linear-gradient(145deg,#5c554a 0%,#3b352d 60%,#2a251f 100%);position:relative;}
.post .ph::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--body);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.45);}
.post .body{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column;}
.post .meta{font-family:var(--body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:10px;}
.post h3{font-family:var(--display);font-size:24px;font-weight:500;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:9px;}
.post p{color:var(--muted);flex:1;}
.post-feature{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--line);background:#fff;margin-bottom:34px;}
.post-feature .ph{aspect-ratio:auto;min-height:320px;}
.post-feature .body{padding:40px;justify-content:center;}
.post-feature h3{font-size:38px;}
.pager{display:flex;gap:8px;justify-content:center;margin-top:44px;}
.pager a{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;font-size:12px;font-weight:600;padding:0 12px;}
.pager a:hover,.pager a.active{background:var(--accent);border-color:var(--accent);color:var(--dark);}

/* ============================================================
   MISC BANDS
   ============================================================ */
.cta-band{background:var(--accent);padding:64px 0;}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;}
.cta-band h2{color:var(--dark);max-width:22ch;font-weight:500;}
.quote-band{background:var(--dark);padding:80px 0;text-align:center;}
.quote-band blockquote{font-family:var(--display);font-size:42px;
  font-weight:500;text-transform:uppercase;line-height:1.14;color:#fff;max-width:900px;margin:0 auto 18px;}
.quote-band cite{font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-style:normal;}
.strip{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.strip-row{display:flex;flex-wrap:wrap;gap:12px;}
.chip{border:1px solid var(--line);background:#fff;padding:9px 16px;font-family:var(--body);
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.timeline{border-left:2px solid var(--accent);padding-left:30px;}
.timeline .tl{margin-bottom:28px;}
.timeline .tl:last-child{margin-bottom:0;}
.timeline .yr{font-family:var(--display);font-size:32px;font-weight:700;color:var(--accent-deep);line-height:1;}
.timeline h3{margin:6px 0 5px;font-family:var(--display);font-size:22px;font-weight:500;text-transform:uppercase;}
.timeline p{color:var(--muted);}
.infocard{background:#fff;border:1px solid var(--line);padding:30px 28px;margin-bottom:22px;}
.infocard h3{font-family:var(--display);font-size:20px;
  font-weight:500;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;}
.inforow{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:14px;}
.inforow:last-child{margin-bottom:0;}
.inforow svg{flex-shrink:0;margin-top:4px;}
.hours{list-style:none;}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.hours li:last-child{border-bottom:0;}
.hours span:last-child{color:var(--muted);}
.map-ph{height:380px;background:linear-gradient(145deg,#d9d3c4 0%,#c8c1b0 100%);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--body);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}

/* ============================================================
   FOOTER
   Column headings are plain uppercase sans in Draft 7.
   ============================================================ */
.site-foot{background:var(--dark-deep);color:#A69F92;padding:62px 0 28px;}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;}
.footcol h4{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.18em;
  color:var(--accent);margin-bottom:16px;text-transform:uppercase;}
.footcol ul{list-style:none;}
.footcol li{margin-bottom:9px;font-size:13px;}
.footcol a:hover,.footcol a:focus-visible{color:var(--accent);}
.footcol p{font-size:13px;max-width:34ch;margin-top:14px;}
.socials{display:flex;gap:10px;margin-top:18px;}
.socials a{width:34px;height:34px;border:1px solid var(--accent-alt);display:inline-flex;
  align-items:center;justify-content:center;}
.socials a:hover,.socials a:focus-visible{border-color:var(--accent);background:var(--accent-alt);}
.footbottom{border-top:1px solid var(--accent-alt);margin-top:46px;padding-top:24px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;}

/* ============================================================
   RESPONSIVE - Elementor's breakpoints exactly (1024 / 767)
   ============================================================ */
@media(max-width:1024px){
  section:where(:not([class*="elementor"])){padding:60px 0;}
  .wrap{padding:0 24px;}
  .nav{padding:0 24px;flex-wrap:wrap;height:auto;min-height:64px;}
  h1{font-size:66px;}
  h2{font-size:36px;}
  .subhero h1{font-size:46px;}
  .parallax h2{font-size:48px;}
  .hero p,.parallax p{font-size:19px;}
  .callnow{font-size:19px;}
  .hero .eyebrow{font-size:13px;}
  .navlinks{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 0 20px;order:3;}
  .navlinks.open{display:flex;}
  .navlinks > a,.navlinks .has-sub > a{padding:13px 2px;border-bottom:1px solid var(--accent-alt);width:100%;
    font-size:12.5px;}
  .has-sub{display:block;width:100%;height:auto;}
  .submenu{display:block;position:static;margin:0;border:0;border-left:2px solid var(--accent);
    padding:4px 0 8px 14px;min-width:0;background:transparent;}
  .submenu a{padding:9px 0;}
  .menu-toggle{display:block;margin-left:auto;}
  /* .nav-right holds only the hamburger below 1024, so the bar reads
     logo-left / hamburger-right with nothing between them. */
  .nav-right{order:2;gap:0;margin-left:auto;}
  .nav-right .nav-phone{display:none;}
  .nav-cta{display:none;}
  .logo-slot{order:1;}
  .navlinks{order:3;}
  /* Phone gets its own row at the top of the open menu, where it is a full
     tap target instead of a cramped link in the bar. */
  .navlinks > a.menu-phone{display:flex;align-items:center;gap:9px;width:100%;
    padding:15px 2px;border-bottom:1px solid var(--accent-alt);
    font-family:var(--body);font-size:16px;font-weight:600;letter-spacing:.01em;
    color:var(--accent);text-transform:none;}
  .navlinks > a.menu-phone:hover,.navlinks > a.menu-phone:focus-visible{color:var(--highlight);}
  .navlinks > a.menu-cta{display:block;width:100%;text-align:center;margin-top:18px;
    padding:16px 30px;font-size:12px;border-bottom:0;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
  .steps .step{border-right:0;border-bottom:1px solid var(--line);}
  .steps .step:last-child{border-bottom:0;}
  .on-dark .steps .step{border-bottom-color:var(--accent-alt);}
  .split,.parallax-grid,.post-feature{grid-template-columns:1fr;gap:34px;}
  .footgrid{grid-template-columns:1fr 1fr;}
  .parallax-photo{background-attachment:scroll;}
  .post-feature .ph{min-height:240px;}
  .trust-item{font-size:15px;}
  .trust-row{padding:18px 24px;}
}
@media(max-width:767px){
  section:where(:not([class*="elementor"])){padding:48px 0;}
  h1{font-size:46px;}
  h2{font-size:28px;}
  .subhero h1{font-size:34px;}
  .parallax h2{font-size:35px;}
  .hero p,.parallax p{font-size:17px;}
  .callnow{font-size:18px;}
  .lede{font-size:15px;}
  .hero{min-height:0;padding:64px 0;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  /* Stacked trust items are centred as a group and individually. */
  .trust-row{flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;}
  .trust-item{font-size:14px;justify-content:center;}
  .formcard .fieldrow{grid-template-columns:1fr;}
  .footgrid{grid-template-columns:1fr;}
  .cta-row{flex-direction:column;align-items:center;text-align:center;gap:26px;}
  .cta-band h2{max-width:100%;}
  .btnrow .btn{width:100%;text-align:center;}
  .quote-band blockquote{font-size:28px;}
  /* The desktop overlay is a left-to-right fade, which only works when the
     copy has a dark half to sit on. At phone width the copy spans the whole
     image, so the overlay goes flat and darker instead. */
  .hero-photo{background-image:
    linear-gradient(180deg,rgba(20,18,16,.90) 0%,rgba(20,18,16,.82) 55%,rgba(20,18,16,.90) 100%),
    url('images/hero-handyman.jpg');
    background-position:center;}
  .subhero{background-position:center;}
  .subhero::after{background:linear-gradient(180deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,.86) 100%);}
  .parallax-photo{background-image:
    linear-gradient(180deg,rgba(20,18,16,.93) 0%,rgba(20,18,16,.88) 100%),
    url('images/hero-handyman.jpg');}
  .post-feature h3{font-size:28px;}
  .post-feature .body{padding:28px 24px;}
  .photo-note{display:none;}
}
@media(max-width:420px){
  .wrap,.nav{padding-left:18px;padding-right:18px;}
  /* Keep the logo, phone and hamburger on ONE row at 390px. Any larger and
     the bar wraps to two rows and the header doubles in height. */
  /* With the phone moved into the menu there is room for the full wordmark. */
  .logo-slot .word{font-size:18px;}
  .menu-toggle{padding:9px;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  html{scroll-behavior:auto;}
  .parallax-photo{background-attachment:scroll;}
}

/* ============================================================
   PLUGIN OVERRIDES
   Plugin stylesheets load after the theme, and WPForms colors its submit
   button through CSS custom properties, so setting the variables is the
   clean fix and the !important rules are the fallback. Commented because
   !important against plugin CSS needs a reason on the record.
   ============================================================ */
.wpforms-container, div[id^="wpforms-"]{
  --wpforms-button-background-color:var(--accent);
  --wpforms-button-text-color:var(--dark);
  --wpforms-field-background-color:#fff;
  --wpforms-field-border-color:var(--ink);
  --wpforms-field-text-color:var(--ink);
  --wpforms-label-color:var(--ink);
  --wpforms-field-border-radius:0px;
  --wpforms-button-border-radius:0px;
}
div.wpforms-container .wpforms-form button[type=submit]{
  background-color:var(--accent) !important; color:var(--dark) !important;
  border:none !important; border-radius:0 !important; padding:13px 28px !important;
  font-family:var(--body) !important; font-size:12px !important;
  font-weight:600 !important; letter-spacing:.1em !important; text-transform:none !important;
}
div.wpforms-container .wpforms-form button[type=submit]:hover,
div.wpforms-container .wpforms-form button[type=submit]:focus{
  background-color:var(--highlight) !important; color:var(--dark) !important;
}
div.wpforms-container .wpforms-form input[type=text],
div.wpforms-container .wpforms-form input[type=email],
div.wpforms-container .wpforms-form input[type=tel],
div.wpforms-container .wpforms-form textarea{
  border-radius:0 !important; border:1px solid var(--ink) !important; background:#fff !important;
}
div.wpforms-container .wpforms-form .wpforms-field-label{
  font-family:var(--body) !important; font-size:12.5px !important; font-weight:500 !important;
}


/* ============================================================
   HERO AND SUB-HERO PHOTOS
   Shipped in this theme's /images/ folder so the site looks right the moment
   it is activated. In Elementor the client replaces these by setting a
   Background Image on the hero section, which wins on specificity.
   ============================================================ */
.elementor-section.hero,
.hero{
  background-image:
    linear-gradient(100deg,rgba(20,18,16,.95) 0%,rgba(20,18,16,.88) 30%,rgba(20,18,16,.45) 58%,rgba(20,18,16,.22) 100%),
    url('images/hero-handyman.jpg');
  background-size:cover; background-position:center right; background-repeat:no-repeat;
}
.elementor-section.subhero,
.subhero{
  background-image:url('images/subhero-handyman.jpg');
  background-size:cover; background-position:center right; background-repeat:no-repeat;
}
.elementor-section.parallax,
.parallax{
  background-image:
    linear-gradient(90deg,rgba(20,18,16,.94) 0%,rgba(20,18,16,.80) 55%,rgba(20,18,16,.72) 100%),
    url('images/hero-handyman.jpg');
  background-size:cover; background-position:center; background-attachment:fixed;
}
@media(max-width:767px){
  .elementor-section.hero,.hero{
    background-image:
      linear-gradient(180deg,rgba(20,18,16,.90) 0%,rgba(20,18,16,.82) 55%,rgba(20,18,16,.90) 100%),
      url('images/hero-handyman.jpg');
    background-position:center;
  }
  .elementor-section.parallax,.parallax{
    background-image:
      linear-gradient(180deg,rgba(20,18,16,.93) 0%,rgba(20,18,16,.88) 100%),
      url('images/hero-handyman.jpg');
    background-attachment:scroll;
  }
}

/* ============================================================
   FILE UPLOAD FIELDS
   WPForms Lite has no File Upload field (it is a Pro field), so the quote
   forms need a plugin that ships one free. These rules cover the three
   realistic choices so the theme matches whichever is installed. See
   BUILD-GUIDE section 5 before picking.
   ============================================================ */

/* --- Forminator (recommended: free multi-file upload with drag and drop) --- */
.forminator-ui .forminator-file-upload,
.forminator-ui .forminator-multi-upload{
  border:1px dashed var(--ink) !important; border-radius:0 !important;
  background:var(--bg) !important; padding:22px 18px !important;
}
.forminator-ui .forminator-multi-upload:hover,
.forminator-ui .forminator-multi-upload.forminator-dragover{
  border-color:var(--accent) !important; background:#fff !important;
}
.forminator-ui .forminator-multi-upload .forminator-multi-upload-message span,
.forminator-ui .forminator-multi-upload .forminator-multi-upload-message p{
  font-family:var(--body) !important; font-size:13px !important; color:var(--ink) !important;
}
.forminator-ui .forminator-multi-upload .forminator-multi-upload-message a{
  color:var(--accent-deep) !important; text-decoration:underline !important;
}
.forminator-ui button.forminator-button-submit{
  background:var(--accent) !important; color:var(--dark) !important;
  border-radius:0 !important; font-family:var(--body) !important;
  font-size:12px !important; font-weight:600 !important; letter-spacing:.1em !important;
}
.forminator-ui button.forminator-button-submit:hover{ background:var(--highlight) !important; }

/* --- Contact Form 7 (always free, one file per [file] tag, no drag and drop) --- */
.wpcf7 input[type=file]{
  width:100%; border:1px dashed var(--ink); background:var(--bg); padding:18px;
  font-family:var(--body); font-size:13px; color:var(--ink); border-radius:0; cursor:pointer;
}
.wpcf7 input[type=file]:hover{ border-color:var(--accent); background:#fff; }
.wpcf7 input[type=file]::file-selector-button{
  background:var(--accent); color:var(--dark); border:0; border-radius:0;
  padding:9px 16px; margin-right:14px; font-family:var(--body);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.wpcf7 input[type=file]::file-selector-button:hover{ background:var(--highlight); }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea{
  width:100%; border:1px solid var(--ink); background:#fff; border-radius:0;
  padding:10px 12px; font-family:var(--body); font-size:14px; margin-bottom:16px;
}
.wpcf7 label{ display:block; font-family:var(--body); font-size:12.5px; font-weight:500; margin-bottom:6px; }
.wpcf7 input[type=submit]{
  background:var(--accent); color:var(--dark); border:0; border-radius:0; padding:13px 28px;
  font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.1em; cursor:pointer;
}
.wpcf7 input[type=submit]:hover{ background:var(--highlight); }

/* --- WPForms Pro, if the client upgrades rather than switching plugin --- */
div.wpforms-container .wpforms-field-file-upload .dz-default,
div.wpforms-container .wpforms-uploader{
  border:1px dashed var(--ink) !important; border-radius:0 !important;
  background:var(--bg) !important;
}
div.wpforms-container .wpforms-uploader:hover{ border-color:var(--accent) !important; background:#fff !important; }
div.wpforms-container .wpforms-uploader .modern-title,
div.wpforms-container .wpforms-uploader .modern-hint{
  font-family:var(--body) !important; color:var(--ink) !important;
}

/* Elementor's global button style targets bare <button> elements, which would
   repaint the hamburger toggle. Every state pinned. */
.site-head .menu-toggle,
.site-head .menu-toggle:hover,
.site-head .menu-toggle:focus,
.site-head .menu-toggle:active{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}

/* ============================================================
   ELEMENTOR HEADER WIRING
   Applies only in WordPress, where the header is three Elementor columns
   rather than the mockup's single flex row.
   ============================================================ */
.elementor-section.hdh-header{ position:relative; position:sticky; top:0; z-index:100;
  border-bottom:3px solid var(--accent); }
.hdh-header .elementor-container{ min-height:68px; align-items:center; }
.hdh-header .elementor-widget-image img{ width:auto; max-height:34px; }
.hdh-header .navlinks{ justify-content:center; }

/* The mobile panel has to escape the nav column to span the full bar. */
@media(max-width:1024px){
  .hdh-header .elementor-column.hdh-nav-col,
  .hdh-header .hdh-nav-col .elementor-widget{ position:static; }
  .hdh-header .elementor-container{ flex-wrap:wrap; }
  .hdh-header .navlinks{ position:absolute; left:0; right:0; top:100%;
    background:var(--dark); border-bottom:3px solid var(--accent);
    padding:8px 24px 24px; margin:0; z-index:99; }
  .hdh-header .menu-toggle{ position:absolute; right:24px; top:50%; transform:translateY(-50%); }
}

/* ============================================================
   ELEMENTOR COMPATIBILITY LAYER
   ------------------------------------------------------------
   Elementor's kit stylesheet loads AFTER the theme, and its widget selectors
   (.elementor-widget-heading .elementor-heading-title, and so on) are two
   classes deep, so they beat any plain element or single-class rule the theme
   states. Out of the box that paints every heading Elementor Primary cyan
   (#6EC1E4) and every button Elementor Accent green (#61CE70).

   Rather than fight those selectors one at a time, the block below redefines
   the CSS CUSTOM PROPERTIES they read. Elementor's own rules then resolve to
   brand values, so there is no specificity contest and nothing to re-patch
   when Elementor updates its markup. Same approach used for WPForms above.

   Specificity note: Elementor defines these on .elementor-kit-N, which is
   (0,1,0). body[class*="elementor-kit-"] is (0,1,1), so it wins on merit
   rather than on load order or !important.

   Setting Elementor > Site Settings > Global Colors and Global Fonts to the
   brand is still worth doing, because it makes the editor previews correct
   too. This block means the live site is right even if that step is missed.
   ============================================================ */
body[class*="elementor-kit-"]{
  --e-global-color-primary:var(--ink);
  --e-global-color-secondary:var(--muted);
  --e-global-color-text:var(--muted);
  --e-global-color-accent:var(--accent);

  --e-global-typography-primary-font-family:'Big Shoulders';
  --e-global-typography-primary-font-weight:500;
  --e-global-typography-secondary-font-family:'Big Shoulders';
  --e-global-typography-secondary-font-weight:500;
  --e-global-typography-text-font-family:'Public Sans';
  --e-global-typography-text-font-weight:400;
  --e-global-typography-accent-font-family:'Public Sans';
  --e-global-typography-accent-font-weight:600;
}

/* Headings: the variables above fix colour and family. These set the type
   scale per level, which Elementor applies globally rather than per tag. */
body .elementor-widget-heading .elementor-heading-title{
  font-family:var(--display); text-transform:uppercase; line-height:1.04; letter-spacing:.005em;
}
body .elementor-widget-heading h1.elementor-heading-title{ font-size:98px; font-weight:700; line-height:.98; }
body .elementor-widget-heading h2.elementor-heading-title{ font-size:49px; font-weight:500; }
body .elementor-widget-heading h3.elementor-heading-title{ font-size:20px; font-weight:500; }
body .hero .elementor-widget-heading h1.elementor-heading-title{ color:#fff; }
body .subhero .elementor-widget-heading h1.elementor-heading-title{ color:#fff; font-size:62px; font-weight:600; }
body .parallax .elementor-widget-heading h2.elementor-heading-title{ color:#fff; font-size:71px; font-weight:700; }
body .cta-band .elementor-widget-heading h2.elementor-heading-title{ color:var(--dark); }
body .quote-band .elementor-widget-heading .elementor-heading-title{ color:#fff; }

/* The eyebrow is a heading widget carrying .eyebrow, so the style has to
   reach the inner title, not just the wrapper. */
body .elementor-widget-heading.eyebrow .elementor-heading-title{
  font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent-deep); line-height:1.4;
}
body .hero .elementor-widget-heading.eyebrow .elementor-heading-title,
body .subhero .elementor-widget-heading.eyebrow .elementor-heading-title{
  font-size:15px; letter-spacing:.2em; color:#EEEEEE;
}

/* Text editor widget: family comes from the variables, measure does not. */
body .elementor-widget-text-editor{ font-family:var(--body); font-size:14.5px; line-height:1.8; }
body .elementor-widget-text-editor .lede{ font-size:16px; line-height:1.75; color:var(--muted); }

/* ---- Full-bleed bands ----
   Elementor gives every column 10px of padding and every non-last widget
   20px of bottom margin. On a full-bleed band like the gold trust strip that
   reads as a white border around the colour. */
body .trust-band > .elementor-container{ max-width:100% !important; }
body .trust-band .elementor-column > .elementor-element-populated{ padding:0; }
body .trust-band .elementor-widget{ margin-bottom:0; }
body .trust-band .elementor-widget-wrap{ padding:0; }

/* ---- Vertical alignment ----
   Columns stretch to the tallest sibling but their contents sit at the top,
   so a short column floats while a tall one sets the height. This is why the
   Ready To Start copy and the CTA button sat at the top of their bands. */
body .parallax > .elementor-container,
body .cta-band > .elementor-container,
body .split-band > .elementor-container{ align-items:center; }

/* Breathing room between the copy and the form in the parallax band. */
body .parallax > .elementor-container > .elementor-column > .elementor-element-populated{
  padding-left:20px; padding-right:20px;
}
@media(min-width:1025px){
  body .parallax > .elementor-container > .elementor-column:first-child > .elementor-element-populated{
    padding-right:48px;
  }
}

/* Call-now line is a primary conversion on a trades site, so it is sized to
   be read across a room, not tucked under the paragraph. */
body .parallax .callnow{
  display:inline-flex; align-items:center; gap:11px;
  font-size:22px; font-weight:600; color:#fff; text-decoration:none;
}
body .parallax .callnow:hover{ color:var(--accent); }
body .parallax .callnow svg{ width:20px; height:20px; flex-shrink:0; }

/* ---- CTA band: button sits at the right edge of the grid ---- */
body .cta-btn-col .elementor-widget-button .elementor-button-wrapper{ text-align:right; }
body .cta-btn-col .elementor-widget-wrap{ justify-content:flex-end; }

/* ---- Split image: the offset block belongs BEHIND the photo ----
   The block is drawn by .split-img::after, and without a stacking context on
   the image itself the block paints over the photo. */
body .elementor-widget-image.split-img{ position:relative; }
body .elementor-widget-image.split-img > .elementor-widget-container{ position:relative; z-index:2; }
body .elementor-widget-image.split-img::after{ z-index:1; }

/* ---- Buttons ----
   Elementor sets padding, radius and colours directly on .elementor-button,
   so the box model needs real rules. .btn lands on the widget WRAPPER, which
   is why every selector here reaches through to the inner anchor.

   It also means the wrapper itself picks up .btn / .btn-primary and paints a
   second, full-column-width gold block behind the real button. Stripping the
   wrapper back is the first thing this block does. */
body .elementor-widget-button.btn,
body .elementor-widget-button.btn-primary,
body .elementor-widget-button.btn-outline-light,
body .elementor-widget-button.btn-outline-dark{
  display:block; background:none; background-color:transparent; border:0;
  padding:0; letter-spacing:normal; line-height:inherit;
}
body .elementor-widget-button .elementor-button-wrapper{ display:block; }
body .elementor-widget-button .elementor-button{ width:auto; }
body .elementor-widget-button .elementor-button{
  font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.2; border-radius:0; border:1px solid transparent;
  padding:18px 30px; text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s;
}
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus{ text-decoration:none; }
body .btnrow a,body .btnrow a:hover{ text-decoration:none; }
body .elementor-widget-button.btn-primary .elementor-button,
body .elementor-widget-button.btn-primary .elementor-button:visited{
  background-color:var(--accent); color:var(--dark); border-color:var(--accent);
}
body .elementor-widget-button.btn-primary .elementor-button:hover,
body .elementor-widget-button.btn-primary .elementor-button:active{
  background-color:var(--highlight); color:var(--dark); border-color:var(--highlight);
}
body .elementor-widget-button.btn-outline-light .elementor-button,
body .elementor-widget-button.btn-outline-light .elementor-button:visited{
  background-color:transparent; color:var(--accent); border-color:var(--accent);
}
body .elementor-widget-button.btn-outline-light .elementor-button:hover,
body .elementor-widget-button.btn-outline-light .elementor-button:active{
  background-color:var(--accent); color:var(--dark); border-color:var(--accent);
}
body .elementor-widget-button.btn-outline-dark .elementor-button,
body .elementor-widget-button.btn-outline-dark .elementor-button:visited{
  background-color:var(--dark); color:var(--accent); border-color:var(--dark);
}
body .elementor-widget-button.btn-outline-dark .elementor-button:hover,
body .elementor-widget-button.btn-outline-dark .elementor-button:active{
  background-color:var(--accent-alt); color:var(--highlight); border-color:var(--accent-alt);
}
body .hero .elementor-widget-button .elementor-button{ padding:20px 34px; font-size:14px; }

/* ---- Cards ----
   The card is the COLUMN now, not the icon-box widget, so it can hold an icon
   box and a button together. Elementor paints the column through
   .elementor-element-populated, so that is what carries the card chrome. */
/* The mockup's plain .card rule also matches this column, which would paint a
   second card around the real one. Strip the column back first; the populated
   wrapper is the card. Same wrapper trap as .btn on a button widget. */
body .elementor-column.card{
  background:none; background-color:transparent; border:0; box-shadow:none;
  /* Elementor normally makes the gutter with 10px of padding on
     .elementor-element-populated, but that element is the card here. Move the
     gutter up to the column: box-sizing keeps three 33% columns adding to
     100%, and the cards end up 32px apart. */
  padding:0 16px;
}
body .elementor-column.card > .elementor-element-populated{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent);
  padding:40px 26px; height:100%;
  transition:transform .2s, box-shadow .2s;
}
body .elementor-column.card:hover > .elementor-element-populated{
  transform:translateY(-4px); box-shadow:0 14px 30px rgba(20,18,16,.10);
}
body .elementor-column.card .elementor-widget:not(:last-child){ margin-bottom:0; }
@media(max-width:767px){
  /* Stacked cards need the gutter vertically instead. */
  body .elementor-column.card{ padding:0; }
  body .elementor-column.card > .elementor-element-populated{ margin-bottom:24px; }
  body .elementor-column.card:last-child > .elementor-element-populated{ margin-bottom:0; }
}

body .card .elementor-icon-box-wrapper,
body .card .elementor-image-box-wrapper{ text-align:left; display:block; }
body .card .elementor-icon-box-title,
body .card .elementor-image-box-title{
  font-family:var(--display); font-size:20px; font-weight:500; color:var(--ink);
  text-transform:uppercase; letter-spacing:.02em; line-height:1.04; margin:0 0 9px;
}
/* Titles are plain text. An underlined heading reads as a mistake, and the
   button below is the clearer target. */
body .card .elementor-icon-box-title a,
body .card .elementor-image-box-title a{ color:var(--ink); text-decoration:none; }
body .card .elementor-icon-box-description,
body .card .elementor-image-box-description{
  font-family:var(--body); font-size:13px; line-height:1.9; color:var(--muted); margin:0;
}
body .card .elementor-icon-box-icon{ margin-bottom:18px; }
body .card .elementor-icon{
  width:46px; height:40px; background:var(--dark); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
body .card .elementor-icon svg{ width:20px; height:20px; fill:currentColor; stroke:none; }
body .card .elementor-icon svg.is-stroke{ fill:none; stroke:currentColor; stroke-width:2; }
body .card .elementor-image-box-img{ margin:-40px -26px 22px !important; width:auto !important; }
body .card .elementor-image-box-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ---- The card's own button ----
   Text-weight, left aligned, sitting at the bottom of the card. It reads as
   part of the card rather than a second CTA competing with the hero. */
body .elementor-widget-button.btn-card{
  display:block; background:none; border:0; padding:0; margin-top:18px;
}
body .elementor-widget-button.btn-card .elementor-button-wrapper{ text-align:left; }
body .elementor-widget-button.btn-card .elementor-button{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:0; padding:0;
  font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-deep); text-decoration:none;
}
body .elementor-widget-button.btn-card .elementor-button:after{
  content:"\2192"; font-size:13px; line-height:1; transition:transform .2s;
}
body .elementor-widget-button.btn-card .elementor-button:hover{ color:var(--ink); }
body .elementor-widget-button.btn-card .elementor-button:hover:after{ transform:translateX(3px); }
/* Push the button to the bottom so cards with shorter copy still line up. */
body .elementor-column.card > .elementor-element-populated{
  display:flex; flex-direction:column;
}
body .elementor-column.card .elementor-widget-wrap{ flex:1; align-content:flex-start; }
body .elementor-column.card .elementor-widget-button.btn-card{ margin-top:auto; padding-top:18px; }

/* ---- Accordion ---- */
body .qgroup .elementor-accordion-item{ background:#fff; border:1px solid var(--line); margin-bottom:12px; }
body .qgroup .elementor-tab-title{ padding:18px 22px; font-family:var(--body); font-weight:500; font-size:14.5px; }
body .qgroup .elementor-tab-title a,
body .qgroup .elementor-tab-title .elementor-accordion-title{ font-family:var(--body); color:var(--ink); }
body .qgroup .elementor-tab-title.elementor-active a,
body .qgroup .elementor-tab-title.elementor-active .elementor-accordion-title{ color:var(--accent-deep); }
body .qgroup .elementor-tab-content{ padding:16px 22px 22px; font-family:var(--body);
  color:var(--muted); border-top:1px solid var(--line); }

/* ---- Posts widget ---- */
body .postgrid .elementor-post{ background:#fff; border:1px solid var(--line); }
body .postgrid .elementor-post__text{ padding:24px; }
body .postgrid .elementor-post__title a{ font-family:var(--display); font-size:24px; font-weight:500;
  text-transform:uppercase; letter-spacing:.02em; color:var(--ink); }
body .postgrid .elementor-post__title a:hover{ color:var(--accent-deep); }
body .postgrid .elementor-post__excerpt p{ font-family:var(--body); color:var(--muted); }

/* ---- Image widgets with nothing set yet ----
   An Elementor image widget with no image collapses to zero height, which
   makes a designed section look broken before the client uploads photos.
   This gives it the same placeholder block the mockup uses, and it costs
   nothing once a real image is in place. */
body .elementor-widget-image .elementor-widget-container:has(img[src=""]),
body .elementor-widget-image .elementor-widget-container:has(img:not([src])){
  /* width first. Pairing min-height with aspect-ratio lets the ratio drive
     the WIDTH (340 x 4/3 = 453px), which overflows any narrower viewport. */
  display:block; width:100%; aspect-ratio:4/3;
  background:linear-gradient(145deg,#6a6357 0%,#403a31 60%,#2a251f 100%);
  position:relative;
}
body .elementor-widget-image .elementor-widget-container:has(img[src=""])::after,
body .elementor-widget-image .elementor-widget-container:has(img:not([src]))::after{
  content:"Image placeholder"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-family:var(--body);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
/* Fallback for browsers without :has(). Height only, never width. */
body .elementor-widget-image.split-img{ min-height:260px; max-width:100%; }
body .split-img.elementor-widget-image img[src=""]{ display:none; }


/* ============================================================
   ELEMENTOR LAYER: RESPONSIVE RAMP
   The rules above are desktop values. Without these, a 98px hero headline
   stays 98px on a phone and runs straight off the screen, which is what the
   client reported. Sizes mirror design_system.py exactly.
   ============================================================ */
@media(max-width:1024px){
  body .elementor-widget-heading h1.elementor-heading-title{ font-size:66px; }
  body .elementor-widget-heading h2.elementor-heading-title{ font-size:36px; }
  body .subhero .elementor-widget-heading h1.elementor-heading-title{ font-size:46px; }
  body .parallax .elementor-widget-heading h2.elementor-heading-title{ font-size:48px; }
  body .hero .elementor-widget-heading.eyebrow .elementor-heading-title,
  body .subhero .elementor-widget-heading.eyebrow .elementor-heading-title{ font-size:13px; }
  body .hero .elementor-widget-button .elementor-button{ padding:18px 30px; font-size:13px; }
  body .parallax .callnow{ font-size:19px; }
  body .parallax > .elementor-container > .elementor-column > .elementor-element-populated{
    padding-left:0; padding-right:0;
  }
}
@media(max-width:767px){
  body .elementor-widget-heading h1.elementor-heading-title{ font-size:46px; line-height:1; }
  body .elementor-widget-heading h2.elementor-heading-title{ font-size:28px; }
  body .subhero .elementor-widget-heading h1.elementor-heading-title{ font-size:34px; }
  body .parallax .elementor-widget-heading h2.elementor-heading-title{ font-size:35px; }
  /* Scoped away from .lede, which has its own smaller measure. */
  body .elementor-widget-text-editor p:not(.lede){ font-size:17px; }
  body .elementor-widget-text-editor .lede{ font-size:15px; }
  body .parallax .callnow{ font-size:18px; }
  /* Centre the copy and open up the gap before the form, which otherwise
     starts immediately under the phone number. */
  body .parallax-copy .elementor-widget-wrap{ text-align:center; }
  body .parallax-copy .elementor-heading-title,
  body .parallax-copy .elementor-widget-text-editor{ text-align:center; }
  body .parallax-copy .elementor-widget-text-editor p{ margin-left:auto; margin-right:auto; }
  body .parallax-copy .elementor-widget-html{ text-align:center; }
  body .parallax-copy .callnow{ justify-content:center; margin-bottom:8px; }
  body .parallax-copy{ margin-bottom:34px; }
  body .parallax > .elementor-container > .elementor-column.formcard{ margin-top:6px; }
  /* Full-width CTAs are easier to hit than centred pills on a phone. */
  body .hero .elementor-widget-button .elementor-button,
  body .cta-band .elementor-widget-button .elementor-button{ display:block; width:100%; text-align:center; }
  body .cta-band > .elementor-container{ text-align:center; }
  body .cta-band .elementor-widget-heading .elementor-heading-title{ text-align:center; }
}
@media(max-width:420px){
  body .elementor-widget-heading h1.elementor-heading-title{ font-size:38px; }
}

/* ---- Header logo ----
   An Image widget, so the client can swap it in two clicks. Until they
   upload one the theme paints the shipped logo behind it, which is why the
   header is never blank the way it was in 1.5.0. Once an image is set the
   :has() rule stops matching and the upload takes over. */
body .hdh-logo.elementor-widget-image{ text-align:left; }
body .hdh-logo .elementor-widget-container{ display:flex; align-items:center; }
body .hdh-logo img{ width:auto; max-height:38px; }
body .hdh-logo .elementor-widget-container:has(img[src=""]),
body .hdh-logo .elementor-widget-container:has(img:not([src])){
  width:200px; height:38px;
  background:url('images/logo.png') left center / contain no-repeat;
}
body .hdh-logo .elementor-widget-container:has(img[src=""]) img,
body .hdh-logo .elementor-widget-container:has(img:not([src])) img{ display:none; }

/* ---- Header right rail ----
   Phone and CTA were sharing 20% of the bar, which jammed them against the
   edge. Wider column, explicit gap, and the row ends flush with the grid
   rather than hugging the viewport. */
body .hdh-cta-col .nav-right{
  display:flex; align-items:center; justify-content:flex-end; gap:22px; width:100%;
}
body .hdh-cta-col .nav-phone{ white-space:nowrap; }
body .hdh-header .elementor-container{ gap:0; }
@media(min-width:1025px){
  body .hdh-header .navlinks{ justify-content:flex-start; gap:26px; }
}

body .hdh-header .navlinks > a.menu-phone{ display:none; }

/* ============================================================
   ELEMENTOR LAYER: MOBILE HEADER
   The panel is absolutely positioned against the header section, so every
   wrapper between it and that section has to be static or the panel anchors
   to the nav column and opens as a narrow strip. .elementor-widget-container
   was missing from that chain, which is the narrow panel in the screenshot.
   ============================================================ */
@media(max-width:1024px){
  .elementor-section.hdh-header{ position:relative; }
  .hdh-header .elementor-column.hdh-nav-col,
  .hdh-header .hdh-nav-col > .elementor-element-populated,
  .hdh-header .hdh-nav-col .elementor-widget,
  .hdh-header .hdh-nav-col .elementor-widget-container{ position:static; }
  /* The gutter lives on the container, not the section. An absolutely
     positioned panel resolves left:0/right:0 against the section's PADDING
     box, so padding on the section insets the panel instead of letting it
     span the bar. */
  .hdh-header .elementor-container{
    flex-wrap:nowrap; align-items:center; min-height:64px;
    padding-left:24px; padding-right:24px;
  }
  .hdh-header .elementor-column > .elementor-element-populated{ padding:0; }
  .hdh-header .elementor-widget{ margin-bottom:0; }
  .hdh-header .navlinks{
    position:absolute; left:0; right:0; width:auto;
    /* +3px clears the section's gold bottom border, which sits outside the
       padding box that top:100% resolves against. */
    top:calc(100% + 3px);
    background:var(--dark); border-bottom:3px solid var(--accent);
    padding:8px 24px 24px; margin:0; z-index:99;
  }
  /* Phone gets its own full-width row at the top of the open menu.
     The `body` prefix matters: the desktop display:none rule above is
     (0,3,2) and a media query adds no specificity, so without it that rule
     wins here too and the phone row never appears. */
  body .hdh-header .navlinks > a.menu-phone{
    display:flex; align-items:center; gap:9px; width:100%;
    padding:15px 2px; border-bottom:1px solid var(--accent-alt);
    font-family:var(--body); font-size:16px; font-weight:600; letter-spacing:.01em;
    color:var(--accent); text-transform:none; text-decoration:none;
  }
  body .hdh-header .navlinks > a.menu-phone:hover{ color:var(--highlight); }
  .hdh-header .menu-toggle{ margin-left:auto; }
  .hdh-header .logo-slot{ display:flex; }
  .hdh-header .logo-slot .word{ font-size:18px; }
}
@media(max-width:420px){
  .hdh-header .elementor-container{ padding-left:18px; padding-right:18px; }
  .hdh-header .navlinks{ padding:8px 18px 22px; }
  .hdh-header .logo-slot .word{ font-size:16px; }
  .hdh-header .logo-slot .mark{ width:22px; height:19px; }
}

/* ============================================================
   HELLO ELEMENTOR BLOG ARCHIVE
   Elementor Free has no Theme Builder, so the Posts archive and single
   posts render through Hello Elementor. These rules make them match the
   rest of the site without Pro.
   ============================================================ */
.archive .site-main, .blog .site-main, .single-post .site-main{
  max-width:1240px; margin:0 auto; padding:64px 40px;
}
.single-post .entry-title, .archive .entry-title, .blog .entry-title{
  font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.02em;
}
.single-post .entry-content{ max-width:720px; }
.single-post .entry-content p{ margin-bottom:20px; }
.single-post .entry-content a{ color:var(--accent-deep); text-decoration:underline; }
.single-post .entry-content a:hover, .single-post .entry-content a:focus{ color:var(--ink); }
.single-post .entry-content h2, .single-post .entry-content h3{ margin:32px 0 12px; }
@media(max-width:1024px){
  .archive .site-main, .blog .site-main, .single-post .site-main{ padding:44px 24px; }
}