/*
Theme Name: Paint My House (Kadence Child)
Theme URI: https://paintmyhouse-mi.com
Description: Child theme for Paint My House LLC. Holds the design tokens and all site CSS from the PMH build spec. Parent: Kadence.
Author: PentaDimension
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* =========================================================
   1. Tokens (spec 2.1, 2.3, 2.4, 2.5)
   ========================================================= */
:root{
  --ink:#141414; --page:#F4F4F2; --surface:#FFFFFF;
  --canary:#FDFD4D; --cinnabar:#FF3933;
  --azure-text:#0B5FC2; --azure-display:#0D79F2; --skeleton:#E6E6E3;
  --placeholder-text:#6B6B69;
  --shadow:6px 6px 0 0 var(--ink); --shadow-sm:4px 4px 0 0 var(--ink);
  --text-shadow-photo:0 2px 8px rgba(20,20,20,.60);
  --gutter:24px; --gap:16px; --section:48px;
  --font-display:"Bricolage Grotesque","Arial Black",Arial,sans-serif;
  --font-body:"Public Sans",Arial,Helvetica,sans-serif;

  /* Kadence globals, overridden so the theme's own CSS follows the tokens */
  --global-palette1:#141414; --global-palette2:#F4F4F2; --global-palette3:#FFFFFF;
  --global-palette4:#FDFD4D; --global-palette5:#FF3933; --global-palette6:#0B5FC2;
  --global-palette7:#0D79F2; --global-palette8:#E6E6E3; --global-palette9:#6B6B69;
  --global-palette-highlight:#0B5FC2; --global-palette-highlight-alt:#0B5FC2;
  --global-palette-btn-bg:#FDFD4D; --global-palette-btn-bg-hover:#FDFD4D;
  --global-palette-btn:#141414; --global-palette-btn-hover:#141414;
  --global-body-font-family:"Public Sans",Arial,Helvetica,sans-serif;
  --global-heading-font-family:"Bricolage Grotesque","Arial Black",Arial,sans-serif;
  --global-primary-nav-font-family:"Public Sans",Arial,Helvetica,sans-serif;
  --global-content-edge-padding:24px;
  --global-content-width:calc(1200px + 2 * var(--global-content-edge-padding));
  --global-calc-content-width:1200px;
}
@media (min-width:768px){ :root{ --gutter:40px; --gap:24px; --section:64px; --global-content-edge-padding:40px; } }
@media (min-width:1025px){ :root{ --gutter:64px; --gap:32px; --section:80px; --global-content-edge-padding:64px; } }

/* =========================================================
   2. Global reset (spec 10.2, guards F1 and A3)
   ========================================================= */
body{ background:var(--page); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.7; font-weight:400; }
.content-bg, body.content-style-unboxed .site, .site{ background:var(--page); }
a{ color:var(--azure-text); }
a:hover, a:focus{ color:var(--azure-text); }
*, *::before, *::after{ border-radius:0 !important; }
img{ max-width:100%; height:auto; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:700; color:var(--ink); margin:0; }
h1, .pmh-display{ font-size:36px; line-height:1.05; letter-spacing:-0.02em; }
h2{ font-size:28px; line-height:1.15; letter-spacing:-0.01em; }
h3{ font-size:22px; line-height:1.25; letter-spacing:0; }
@media (min-width:768px){ h1,.pmh-display{ font-size:44px; } h2{ font-size:32px; } h3{ font-size:23px; } }
@media (min-width:1025px){ h1,.pmh-display{ font-size:52px; } h2{ font-size:36px; } h3{ font-size:24px; } }
p{ margin:0; }
.pmh-body-lg{ font-size:18px; line-height:1.7; }
@media (min-width:1025px){ .pmh-body-lg{ font-size:19px; } }
.pmh-small{ font-size:15px; line-height:1.5; font-weight:500; }
.pmh-small-700, .pmh-small strong{ font-weight:700; }
.pmh-measure{ max-width:62ch; }
.pmh-secondary, .pmh-secondary-p a{ display:inline-block; padding:14px 0; color:var(--azure-text); font-family:var(--font-body); font-weight:700; font-size:16px; line-height:1; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
:focus-visible{ outline:3px solid var(--azure-text); outline-offset:2px; }
.hide-focus-outline :focus-visible{ outline:3px solid var(--azure-text) !important; outline-offset:2px; }

/* Page chrome: the homepage content is full-bleed, sections handle their own container */
.page .content-area{ margin:0; }
.page .content-container, .page .site-content .content-wrap{ padding:0; max-width:none; }
.page .entry-content-wrap{ padding:0; }
.page .entry-content > *{ margin-top:0; margin-bottom:0; }
.page .entry-content > .pmh-band{ max-width:none; margin-left:0; margin-right:0; width:100%; }

/* =========================================================
   3. Layout helpers
   ========================================================= */
.pmh-band{ width:100%; margin:0; }
.pmh-wrap{ max-width:calc(1200px + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); box-sizing:border-box; }
.pmh-section{ padding-top:var(--section); }
.pmh-section-both{ padding-top:var(--section); padding-bottom:var(--section); }
.pmh-h2-row, .pmh-h2-row > .wp-block-group__inner-container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-bottom:16px; }
.pmh-h2-gap{ margin-bottom:16px; }
.pmh-stack-8 > * + *{ margin-top:8px; }
.pmh-stack-16 > * + *{ margin-top:16px; }
.pmh-stack-24 > * + *{ margin-top:24px; }
.pmh-stack-32 > * + *{ margin-top:32px; }
.pmh-grid, .pmh-grid > .wp-block-group__inner-container{ display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:768px){ .pmh-grid-3, .pmh-grid-3 > .wp-block-group__inner-container{ grid-template-columns:repeat(2,1fr); } .pmh-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){ .pmh-grid-3, .pmh-grid-3 > .wp-block-group__inner-container{ grid-template-columns:repeat(3,1fr); } .pmh-grid-4{ grid-template-columns:repeat(4,1fr); } }
.pmh-crew-grid > .wp-block-group__inner-container{ display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:1025px){ .pmh-crew-grid > .wp-block-group__inner-container{ grid-template-columns:2fr 1fr; align-items:start; } }

/* =========================================================
   4. Components
   ========================================================= */
/* 4.1 Primary button (core/button with class pmh-btn) */
.pmh-btn .wp-block-button__link, .pmh-btn .wp-element-button, a.pmh-btn-link, .header-button, .mobile-header-button, .fluentform .ff-btn-submit{
  display:inline-block; background:var(--canary) !important; color:var(--ink) !important;
  border:2px solid var(--ink) !important; border-radius:0 !important; box-shadow:var(--shadow) !important;
  padding:14px 24px !important; font-family:var(--font-body) !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important;
  text-decoration:none !important; transition:transform 80ms, box-shadow 80ms; cursor:pointer;
}
.pmh-btn .wp-block-button__link:hover, a.pmh-btn-link:hover, .header-button:hover, .mobile-header-button:hover, .fluentform .ff-btn-submit:hover{
  transform:translate(2px,2px); box-shadow:var(--shadow-sm) !important; background:var(--canary) !important; color:var(--ink) !important; }
.pmh-btn .wp-block-button__link:active, a.pmh-btn-link:active, .header-button:active, .mobile-header-button:active, .fluentform .ff-btn-submit:active{
  transform:translate(6px,6px); box-shadow:none !important; }
.pmh-btn .wp-block-button__link:focus-visible, a.pmh-btn-link:focus-visible, .header-button:focus-visible{ outline:3px solid var(--azure-text); outline-offset:2px; }
.wp-block-buttons{ margin:0; }
@media (prefers-reduced-motion:reduce){ .pmh-btn .wp-block-button__link, a.pmh-btn-link, .header-button, .fluentform .ff-btn-submit{ transition:none; } }

/* 4.3 Card */
.pmh-card{ background:var(--surface); border:2px solid var(--ink); box-shadow:var(--shadow); padding:24px; }
.pmh-card > * + *, .pmh-card > .wp-block-group__inner-container > * + *{ margin-top:8px; }

/* 4.4 Image frame */
.pmh-frame{ margin:0; }
.pmh-frame img{ display:block; width:100%; object-fit:cover; border:2px solid var(--ink); box-shadow:none; box-sizing:border-box; }
.pmh-r-4x5 img{ aspect-ratio:4/5; } .pmh-r-1x1 img{ aspect-ratio:1/1; }
.pmh-r-16x9 img{ aspect-ratio:16/9; } .pmh-r-4x3 img{ aspect-ratio:4/3; }
.pmh-pos-portrait img{ object-position:75% 35%; }
.pmh-pos-video img{ object-position:50% 38%; }
.pmh-pos-detail1 img{ object-position:50% 60%; }
.pmh-pos-detail2 img{ object-position:50% 20%; }
.pmh-pos-detail3 img{ object-position:50% 25%; }
.pmh-caption{ font-size:15px; line-height:1.5; font-weight:700; margin-top:12px; }
.pmh-label{ font-size:15px; line-height:1.5; font-weight:500; margin-top:8px; }

/* 4.5 Placeholder tag */
.pmh-tag{ display:inline-block; padding:6px 10px; background:var(--canary); border:2px solid var(--ink); color:var(--ink); font:700 13px/1.3 var(--font-body); }
.pmh-tag-gap{ margin-bottom:16px; }
/* 5.3 Placeholder image slot */
.pmh-placeholder{ position:relative; background:var(--surface); border:2px solid var(--ink); box-sizing:border-box; width:100%; }
.pmh-placeholder .pmh-tag{ position:absolute; top:12px; left:12px; z-index:1; }
.pmh-placeholder.pmh-r-4x5{ aspect-ratio:4/5; } .pmh-placeholder.pmh-r-1x1{ aspect-ratio:1/1; } .pmh-placeholder.pmh-r-16x9{ aspect-ratio:16/9; }
.pmh-placeholder img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }

/* 4.6 Trust strip */
.pmh-trust{ background:var(--canary); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:24px 0; }
.pmh-trust-grid > .wp-block-group__inner-container{ display:grid; gap:12px 32px; grid-template-columns:1fr; }
@media (min-width:768px){ .pmh-trust-grid > .wp-block-group__inner-container{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){ .pmh-trust-grid > .wp-block-group__inner-container{ grid-template-columns:repeat(4,1fr); } }
.pmh-trust p{ font-size:15px; line-height:1.5; font-weight:500; color:var(--ink); }

/* 4.7 FAQ (core/details with class pmh-faq-item) */
.pmh-faq{ border-top:2px solid var(--ink); }
.pmh-faq-item{ border-bottom:2px solid var(--ink); margin:0; }
.pmh-faq-item > summary{ list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.25; color:var(--ink); min-height:44px; box-sizing:border-box; }
@media (min-width:768px){ .pmh-faq-item > summary{ font-size:23px; } }
@media (min-width:1025px){ .pmh-faq-item > summary{ font-size:24px; } }
.pmh-faq-item > summary::-webkit-details-marker{ display:none; }
.pmh-faq-item > summary::after{ content:""; position:absolute; right:8px; top:50%; width:0; height:0; margin-top:-7px;
  border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:10px solid var(--ink); transition:transform 150ms; }
.pmh-faq-item[open] > summary::after{ transform:rotate(90deg); }
.pmh-faq-item > summary:focus-visible{ outline:3px solid var(--azure-text); outline-offset:2px; }
.pmh-faq-item > :not(summary){ padding:0 0 24px; max-width:62ch; }
@media (prefers-reduced-motion:reduce){ .pmh-faq-item > summary::after{ transition:none; } }

/* 4.9 Testimonial empty state */
.pmh-quote-mark{ font-family:var(--font-display); font-weight:700; font-size:48px; line-height:1; color:rgba(20,20,20,.20); }
.pmh-skel{ height:14px; background:var(--skeleton); }
.pmh-skel + .pmh-skel{ margin-top:8px; }
.pmh-skel-72{ width:72%; }
.pmh-attr{ font-size:15px; line-height:1.5; font-weight:500; margin-top:16px; }

/* =========================================================
   5. Header (Kadence header builder + spec 4.11)
   ========================================================= */
#masthead{ background:var(--surface); border-bottom:2px solid var(--ink); }
#masthead .site-header-row-container-inner{ background:var(--surface) !important; }
#masthead .site-container{ padding-left:var(--gutter); padding-right:var(--gutter); }
.site-main-header-inner-wrap{ min-height:0 !important; padding:16px 0 0; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:16px; }
.site-header-section-left, .site-header-section-right{ flex-wrap:nowrap; }
.site-header-main-section-right{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.site-bottom-header-inner-wrap{ min-height:0 !important; padding:4px 0 5px; }
#masthead .site-branding{ padding:0; }
#masthead .site-branding a.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-decoration:none; }
#masthead .site-branding img.custom-logo{ height:40px; width:auto; max-width:none; object-fit:contain; align-self:flex-start; }
@media (min-width:768px){ #masthead .site-branding img.custom-logo{ height:48px; } }
@media (min-width:1025px){ #masthead .site-branding img.custom-logo{ height:56px; } }
#masthead .site-branding .site-tagline, #masthead .site-branding .site-description{ font-size:15px; line-height:1.5; font-weight:500; color:var(--ink); margin:0; display:block; }
#masthead .site-branding .site-title{ display:block; font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.05; color:var(--ink); }
#masthead .site-branding .has-logo-image .site-title{ display:none; }
#masthead .site-branding .site-title-wrap{ display:flex; flex-direction:column; }
#masthead .header-html{ font-size:15px; line-height:1.5; font-weight:700; }
#masthead .header-html a{ color:var(--ink); text-decoration:none; padding:11px 0; display:inline-block; }
#masthead .header-html a:hover{ text-decoration:underline; }
#masthead .header-html .kadence-html{ margin:0; }
#masthead .header-button{ margin:0 !important; }
/* Nav: row 2, small, wraps */
.header-navigation .header-menu-container > ul{ display:flex; flex-wrap:wrap; gap:0 24px; }
.header-navigation .header-menu-container > ul > li > a{ font-family:var(--font-body); font-size:15px; line-height:1.5; font-weight:500; color:var(--azure-text) !important; padding:11px 0 !important; background:none !important; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.header-navigation .header-menu-container > ul > li > a:hover{ color:var(--azure-text) !important; text-decoration-thickness:2px; }
.header-navigation[class*="header-navigation-style-underline"] .header-menu-container.primary-menu-container>ul>li>a:after{ display:none; }
/* Sticky (Kadence sticky header wraps a fixed clone; keep the border on it) */
#masthead .kadence-sticky-header.item-is-fixed{ border-bottom:2px solid var(--ink); }
#masthead .kadence-sticky-header.item-is-fixed > .site-header-row-container-inner{ background:var(--surface) !important; box-shadow:none !important; }
/* Mobile (Kadence mobile header row) */
.site-mobile-header-wrap #masthead, .site-header-inner-wrap .site-mobile-header-inner-wrap{ background:var(--surface); }
.site-mobile-header-inner-wrap{ min-height:0 !important; padding:12px 0; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-start; }
.site-header-mobile-section-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.site-mobile-bottom-header-inner-wrap{ min-height:0 !important; padding:0 0 12px; }
#masthead .mobile-navigation ul, #masthead .header-mobile-navigation ul{ display:flex; flex-wrap:wrap; gap:0 24px; }
#masthead .site-mobile-bottom-header-inner-wrap .mobile-navigation ul li a{ font-size:15px; line-height:1.5; font-weight:500; color:var(--azure-text) !important; padding:10px 0; border:0; text-decoration:underline; text-underline-offset:4px; }
#masthead .site-header-item.site-header-focus-item.mobile-html, #masthead .mobile-html{ font-size:15px; font-weight:700; }
#masthead .mobile-html a{ color:var(--ink); text-decoration:none; padding:8px 0; display:inline-block; }
#masthead .mobile-header-button{ margin:0 !important; }
.site-mobile-header-wrap .site-branding img.custom-logo, .site-mobile-header-wrap .site-branding img.custom-mobile-logo{ height:40px; width:auto; }

/* =========================================================
   6. Footer (spec 4.12) – content lives in the Kadence footer HTML item
   ========================================================= */
#colophon{ background:var(--ink); color:var(--page); }
#colophon .site-footer-row-container-inner{ background:var(--ink) !important; }
#colophon .site-container{ padding-left:var(--gutter); padding-right:var(--gutter); }
.site-bottom-footer-inner-wrap{ padding:48px 0 !important; min-height:0 !important; }
.site-bottom-footer-inner-wrap .site-footer-section:not(:last-child):after{ display:none; }
#colophon .footer-html, #colophon .footer-html p, #colophon .footer-html a{ color:var(--page); font-size:15px; line-height:1.5; font-weight:500; }
#colophon .footer-html a{ text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:11px 0; }
#colophon .footer-html a:hover{ color:var(--page); }
#colophon .footer-html .kadence-html{ margin:0; }
.pmh-footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:768px){ .pmh-footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){ .pmh-footer-grid{ grid-template-columns:repeat(4,1fr); } }
.pmh-footer-grid p{ margin:0; }
.pmh-footer-grid p + p{ margin-top:4px; }
.pmh-footer-grid .pmh-footer-head{ font-weight:700; margin-bottom:8px; }

/* =========================================================
   7. Hero and CTA over photo (spec 6, 10.7)
   ========================================================= */
.pmh-photo{ position:relative; overflow:hidden; background:var(--ink); }
.pmh-hero{ aspect-ratio:4/5; max-height:810px; }
@media (min-width:1024px){ .pmh-hero{ aspect-ratio:16/9; } }
.pmh-cta{ height:420px; } @media (min-width:1025px){ .pmh-cta{ height:600px; } }
.pmh-photo .pmh-photo-img{ position:absolute !important; inset:0; margin:0 !important; width:100%; height:100%; max-width:none; }
.pmh-photo .pmh-photo-img img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none; object-fit:cover; border:0; }
.pmh-hero .pmh-photo-img img{ object-position:50% 46%; }
.pmh-cta  .pmh-photo-img img{ object-position:50% 36%; } /* spec said 85% 18%; crew2 is a portrait frame, subject at left, so the face sat under the headline. 36% keeps the face above the text at 1440. */
.pmh-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(to top, rgba(20,20,20,.75) 0%, rgba(20,20,20,.45) 35%, rgba(20,20,20,0) 70%); }
@media (min-width:1025px){ .pmh-cta::after{
  background:linear-gradient(to right, rgba(20,20,20,.75) 0%, rgba(20,20,20,.45) 35%, rgba(20,20,20,0) 70%); } }
.pmh-photo-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--gutter); }
.pmh-photo-content > * + *, .pmh-photo-content > .wp-block-group__inner-container > * + *{ margin-top:24px; }
.pmh-photo-content h1, .pmh-photo-content h2{ color:#FFFFFF !important; text-shadow:var(--text-shadow-photo); max-width:620px; }
.pmh-photo-content .wp-block-button__link{ text-shadow:none; }
.pmh-scrim-off .pmh-photo::after{ display:none; } /* validation helper, spec 6.4 */
.pmh-lede{ padding:24px 0; }
@media (min-width:1025px){ .pmh-lede{ padding:40px 0; } }

/* =========================================================
   8. Carousel, Option A (spec 7, 10.8)
   ========================================================= */
.pmh-carousel{ display:flex !important; flex-wrap:nowrap !important; flex-direction:row; gap:var(--gap) !important;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; scrollbar-width:none; padding:0 0 8px 0; margin:0; }
.pmh-carousel::-webkit-scrollbar{ display:none; }
.pmh-carousel:focus-visible{ outline:3px solid var(--azure-text); outline-offset:2px; }
.pmh-slide{ flex:0 0 max(280px, calc((100% - 2 * var(--gap)) / 3)) !important; width:max(280px, calc((100% - 2 * var(--gap)) / 3)); scroll-snap-align:start; min-width:0; margin:0; }
.pmh-pair, .pmh-pair > .wp-block-group__inner-container{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pmh-pair > .wp-block-group__inner-container{ grid-column:1 / -1; }
.pmh-pair figure{ margin:0; }
.pmh-ctl{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.pmh-dots{ display:flex; flex-wrap:wrap; }
.pmh-dot{ width:44px; height:44px; padding:0; border:0 !important; background:transparent !important; box-shadow:none !important; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pmh-dot span{ width:12px; height:12px; border:2px solid var(--ink); background:transparent; display:block; box-sizing:border-box; }
.pmh-dot[aria-current="true"] span{ background:var(--ink); }
.pmh-dot:focus-visible{ outline:3px solid var(--azure-text); outline-offset:2px; }
.pmh-arrows{ display:flex; gap:16px; }
.pmh-arrow{ width:48px; height:48px; padding:0 !important; background:var(--surface) !important; color:var(--ink) !important; border:2px solid var(--ink) !important; box-shadow:var(--shadow-sm) !important; cursor:pointer; font-size:14px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.pmh-arrow:disabled{ opacity:.35; cursor:default; }
.pmh-arrow:focus-visible{ outline:3px solid var(--azure-text); outline-offset:2px; }
@media (max-width:767px){ .pmh-arrows{ display:none; } }

/* =========================================================
   9. Form (Fluent Forms inside a card)
   ========================================================= */
.pmh-form .fluentform .ff-el-form-control, .pmh-form .fluentform textarea, .pmh-form .fluentform select, .pmh-form .fluentform input[type="text"], .pmh-form .fluentform input[type="email"], .pmh-form .fluentform input[type="tel"]{
  background:var(--surface); border:2px solid var(--ink) !important; border-radius:0 !important; color:var(--ink); font-family:var(--font-body); font-size:17px; padding:12px 14px; box-shadow:none !important; }
.pmh-form .fluentform ::placeholder{ color:var(--placeholder-text); opacity:1; }
.pmh-form .fluentform .ff-el-input--label label{ font-size:15px; font-weight:700; color:var(--ink); }
.pmh-form .fluentform .ff-el-is-error .ff-el-form-control{ border-left:6px solid var(--cinnabar) !important; }
.pmh-form .fluentform .text-danger, .pmh-form .fluentform .error{ color:var(--ink); }
.pmh-form .fluentform .ff-el-form-control:focus{ outline:3px solid var(--azure-text); outline-offset:2px; }

/* Kadence editor parity: the block editor canvas should follow the tokens too */
.editor-styles-wrapper, body.block-editor-iframe__body{ background:var(--page) !important; color:var(--ink) !important; } /* Kadence maps its editor canvas to palette slots 9 and 4, which the PMH tokens repurpose */

/* Additions after first render */
#colophon .footer-html, #colophon .footer-html .kadence-html{ text-align:left; }
.pmh-form-card{ max-width:640px; }
.pmh-crew-video figure, .pmh-crew-portrait figure{ margin:0; }

/* Kadence keeps the legacy group inner container; flow block-gap is zeroed on the homepage and spacing is explicit */
:where(.page .entry-content .is-layout-flow) > *{ margin-block-start:0; margin-block-end:0; }
.page .entry-content .wp-block-group__inner-container{ max-width:none; }
.pmh-carousel.is-layout-flex{ justify-content:flex-start; align-items:stretch; }

/* Mobile header row (Kadence mobile builder) */
.site-mobile-header-wrap .site-main-header-inner-wrap{ padding:12px 0; align-items:center; }
.site-mobile-header-wrap .site-bottom-header-inner-wrap{ padding:8px 0 12px; }
.site-mobile-header-wrap .mobile-navigation ul.menu{ display:flex; flex-wrap:wrap; gap:0 24px; margin:0; padding:0; }
.site-mobile-header-wrap .mobile-navigation ul li{ border:0 !important; }
.site-mobile-header-wrap .mobile-navigation ul li a, .site-mobile-header-wrap .mobile-navigation ul li > a{ font-family:var(--font-body); font-size:15px; line-height:1.5; font-weight:500; color:var(--azure-text) !important; padding:11px 0 !important; border:0 !important; text-decoration:underline; text-underline-offset:4px; background:none !important; }
.site-mobile-header-wrap .mobile-html a{ color:var(--ink); font-size:15px; font-weight:700; text-decoration:none; padding:11px 0; display:inline-block; }
.site-mobile-header-wrap .mobile-header-button-wrap{ margin:0; }
.site-mobile-header-wrap .site-header-main-section-right{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; justify-content:flex-end; }
/* Fluent Forms required marker: ink, never red text */
.pmh-form .fluentform .ff-el-is-required.asterisk-right label:after, .pmh-form .fluentform .ff-el-is-required.asterisk-left label:before, .pmh-form .fluentform .ff-el-input--label.ff-el-is-required label .ff_required_asterisk{ color:var(--ink) !important; }

/* Kadence single-content rhythm off on the homepage; spacing is explicit */
.page .single-content figure, .page .single-content p, .page .single-content form, .page .single-content .wp-block-buttons, .page .single-content .wp-block-button, .page .single-content .wp-block-group, .page .single-content .wp-block-details, .page .single-content [class*="__inner-content"]{ margin-bottom:0; }
.page .single-content .pmh-slide{ margin-bottom:0 !important; }

.pmh-faq-item > :not(summary) a{ display:inline-block; padding:8px 0; }
.pmh-footer-grid p + p{ margin-top:0; }

.pmh-dot{ transition:none; }
@media (prefers-reduced-motion:reduce){ .pmh-carousel{ scroll-behavior:auto; } .pmh-arrow, .pmh-dot{ transition:none; } }

/* =========================================================
   10. Inner pages (Services, Contact, FAQ, About, Service area)
   ========================================================= */
.pmh-pagehead{ padding:var(--section) 0 32px; }
.pmh-pagehead h1{ max-width:16ch; }
.pmh-cta-band{ background:var(--cinnabar); color:var(--ink); padding:var(--section) 0; }
.pmh-cta-band h2, .pmh-cta-band p{ color:var(--ink); }
.pmh-cta-band h2{ margin-bottom:16px; }
/* C2 figure row */
.pmh-figures, .pmh-figures > .wp-block-group__inner-container{ display:flex; flex-direction:column; gap:16px; }
.pmh-figure{ padding:0; }
.pmh-figure-n{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.25; }
.pmh-figure-l{ font-size:15px; line-height:1.5; font-weight:500; margin-top:4px; }
@media (min-width:768px){
  .pmh-figures, .pmh-figures > .wp-block-group__inner-container{ flex-direction:row; gap:0; }
  .pmh-figure{ flex:1 1 0; padding:0 24px; border-left:2px solid var(--ink); }
  .pmh-figure:first-child{ padding-left:0; border-left:0; }
  .pmh-figure-n{ font-size:24px; }
}
/* C3 substrate list, C5 credentials */
.pmh-ticks{ list-style:none; margin:0; padding:0; }
.pmh-ticks li{ position:relative; padding-left:24px; margin:0 0 8px; font-size:17px; line-height:1.7; }
.pmh-ticks li::before{ content:""; position:absolute; left:0; top:13px; width:12px; height:2px; background:var(--ink); }
.pmh-subs h3{ margin-bottom:12px; }
.pmh-ticks-2{ display:grid; grid-template-columns:1fr; gap:0 32px; }
@media (min-width:768px){ .pmh-ticks-2{ grid-template-columns:1fr 1fr; } }
.pmh-ticks li .pmh-tag{ margin-left:8px; vertical-align:middle; }
/* C4 lead time note */
.pmh-note{ border-left:2px solid var(--ink); padding-left:16px; max-width:62ch; }
.pmh-note p{ margin:0; }
/* Contact grid */
.pmh-contact-grid > .wp-block-group__inner-container{ display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:1025px){ .pmh-contact-grid > .wp-block-group__inner-container{ grid-template-columns:1fr 1.2fr; align-items:start; } }
.pmh-contact-right .pmh-form-card{ max-width:none; }
/* FAQ page: first row open, 16px gap above the answer */
.pmh-faq-item > :not(summary){ padding-top:0; }
.pmh-faq-item[open] > summary{ padding-bottom:16px; }


/* Mobile: logo | button + hamburger; nav and phone live in the drawer */
.site-mobile-header-wrap .mobile-header-button{ padding:12px 16px !important; font-size:15px !important; box-shadow:var(--shadow-sm) !important; }
.mobile-toggle-open-container .menu-toggle-open{ width:44px; height:44px; padding:0 !important; border:2px solid var(--ink) !important; background:var(--surface) !important; color:var(--ink) !important; display:inline-flex; align-items:center; justify-content:center; }
.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon{ color:var(--ink); }
.mobile-toggle-open-container .menu-toggle-open:focus-visible{ outline:3px solid var(--azure-text); outline-offset:2px; }
#mobile-drawer .drawer-inner{ background:var(--surface) !important; color:var(--ink); border-left:2px solid var(--ink); }
#mobile-drawer .drawer-header .drawer-toggle{ color:var(--ink) !important; background:transparent !important; width:44px; height:44px; }
#mobile-drawer .mobile-navigation ul.menu{ display:block; }
#mobile-drawer .mobile-navigation ul li{ border:0 !important; border-bottom:2px solid var(--ink) !important; }
#mobile-drawer .mobile-navigation ul li:first-child{ border-top:2px solid var(--ink) !important; }
#mobile-drawer .mobile-navigation ul li a{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.25; color:var(--ink) !important; padding:16px 0 !important; text-decoration:none; background:none !important; }
#mobile-drawer .mobile-html{ margin-top:24px; font-size:15px; font-weight:700; }
#mobile-drawer .mobile-html a{ color:var(--ink); text-decoration:none; padding:11px 0; display:inline-block; }

.site-header-main-section-right{ align-self:center; }


/* =========================================================
   11. Core-block edition (every former Custom HTML block is now Group / Image / List / Paragraph)
   ========================================================= */
/* The grid classes sit on a Group whose Kadence inner container holds the children; the parent is a one-column grid so the inner container spans it. */
.pmh-grid > .wp-block-group__inner-container, .pmh-figures > .wp-block-group__inner-container, .pmh-h2-row > .wp-block-group__inner-container{ grid-column:1 / -1; width:100%; }
.pmh-figures{ flex-direction:column; }
.pmh-pair-col > .wp-block-group__inner-container > figure{ margin:0; }
/* Placeholder image slots: the yellow tag is the figure caption, so it can be edited or deleted in the editor */
.pmh-ph{ position:relative; }
.pmh-ph figcaption{ position:absolute; top:14px; left:14px; z-index:1; margin:0 !important; padding:0; width:auto; text-align:left; line-height:1.3; }
.pmh-ph img{ background:var(--skeleton); }
.pmh-tag-p{ line-height:1.3; }
.pmh-figure .pmh-figure-l{ margin-top:4px; } /* Kadence .single-content p outranks .pmh-figure-l */
.pmh-sub h3{ margin-bottom:12px; }
.pmh-quote-mark{ margin:0; }
/* Editor parity: the block canvas has no inner containers, so the same classes lay out their direct children */
.editor-styles-wrapper .pmh-wrap{ max-width:calc(1200px + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); }
.editor-styles-wrapper .pmh-crew-grid{ display:grid; gap:32px; grid-template-columns:1fr; }
.editor-styles-wrapper .pmh-contact-grid{ display:grid; gap:48px; grid-template-columns:1fr; }
.editor-styles-wrapper .pmh-trust-grid{ display:grid; gap:12px 32px; grid-template-columns:1fr; }
@media (min-width:768px){ .editor-styles-wrapper .pmh-trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){ .editor-styles-wrapper .pmh-crew-grid{ grid-template-columns:2fr 1fr; } .editor-styles-wrapper .pmh-contact-grid{ grid-template-columns:1fr 1.2fr; } .editor-styles-wrapper .pmh-trust-grid{ grid-template-columns:repeat(4,1fr); } }
.editor-styles-wrapper .pmh-carousel{ display:flex; flex-wrap:nowrap; gap:var(--gap); overflow-x:auto; }
.editor-styles-wrapper .pmh-band{ margin:0; }
@media (min-width:768px){ .editor-styles-wrapper .pmh-figures{ flex-direction:row; } }
.editor-styles-wrapper .wp-block-spacer.pmh-skel{ background:var(--skeleton); }


.pmh-secondary-p{ line-height:1; } .pmh-secondary-p a{ vertical-align:top; } /* the paragraph wraps the 44px link exactly, as the bare link did */
.pmh-card > .wp-block-group__inner-container > .pmh-attr{ margin-top:0; } /* matches the approved render, where Kadence zeroed the 16px */

.pmh-card > .wp-block-group__inner-container > .pmh-secondary-p{ margin-top:0; }

/* Editor: photo sections stack (image, then the dark text panel) instead of overlaying, so both stay clickable */
.editor-styles-wrapper .pmh-photo{ aspect-ratio:auto; height:auto; max-height:none; }
.editor-styles-wrapper .pmh-photo .pmh-photo-img{ position:relative !important; height:auto; }
.editor-styles-wrapper .pmh-photo .pmh-photo-img img{ position:relative; height:auto !important; aspect-ratio:16/9; }
.editor-styles-wrapper .pmh-photo::after{ display:none; }
.editor-styles-wrapper .pmh-photo-content{ position:relative; background:var(--ink); }
.editor-styles-wrapper .pmh-ph figcaption{ position:absolute; }

.editor-styles-wrapper :where(h1,h2,h3,h4,h5,h6){ color:var(--ink) !important; }