/*
Theme Name: A+ Auto Diesel & Transmission
Theme URI: https://example.com/
Author: A+ Auto
Description: Block theme for A+ Auto Diesel & Transmission. Full site editing: every section is editable in the block editor, and each section is also available as a reusable pattern.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 3.18.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aplus
Tags: full-site-editing, block-patterns, one-column, business
*/

:root{
  --blk:#0B0C0C; --steel:#141618; --panel:#1C1F21; --panel-2:#262A2D;
  --bone:#E9E5DC; --bone-2:#D4CFC2; --bone-3:#B3AC9C;
  --grn:#3CB242; --grn-lo:#2B8631;
  --dsp:'Big Shoulders Display',system-ui,sans-serif;
  --mono:'Courier Prime',ui-monospace,monospace;
  --bd:Archivo,system-ui,sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --aplus-seam:transparent;
  --aplus-logo-h:50px; --aplus-footer-logo-h:62px;
  /* No section background photos by default — the hero and the CTA band carry the
     photography. Add one per section in Appearance → A+ Site Settings if wanted. */
  --aplus-bg-board:none;
  --aplus-bg-process:none;
  --aplus-bg-owner:none;
  --aplus-bg-reviews:none;
  --aplus-bg-hours:none;
}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%}
:focus-visible{outline:2px solid var(--grn);outline-offset:3px}
a{text-decoration:none}
p a{text-decoration:underline;text-underline-offset:3px}

/* ---------- shared bits ---------- */
.lbl{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--grn);margin:0 0 14px}
.lbl--d{color:var(--grn-lo)}
/* No margin reset here meant the browser default heading margin (~0.83em, so
   about 56px at the top of the clamp) sat under every section heading. The old
   markup was inside a WordPress layout wrapper, which zeroed it for us. */
.sec__h{margin:0;font-size:clamp(36px,5.4vw,68px)}
.sec__sub{margin:0;max-width:36ch;color:var(--bone-3);font-size:16px}
/* Padding, not margin. The "nuclear" reset further down uses
   .wp-site-blocks > * > *, which matches these headers and forces their bottom
   margin to 0. Padding is untouched by it and reads identically here since
   neither header has a border or background. */
/* Aligned on the last text baseline, not on the boxes. Big Shoulders carries a
   deep descender space below its capitals, so bottom-aligning the boxes drops
   the subheading well below where the heading visually ends. flex-end stays as
   the fallback for anything that does not understand last baseline. */
.sec__hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;align-items:last baseline;gap:16px 40px;padding-bottom:clamp(28px,2.6vw,46px)}
.sec__hd .sec__h{flex:0 1 auto}
.sec__hd .sec__sub{flex:0 1 42ch}
.wp-block-button__link{transition:.14s}
.is-style-aplus-line .wp-block-button__link{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px rgba(233,229,220,.32)}
.is-style-aplus-line .wp-block-button__link:hover{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px var(--bone)}

/* section shells: full-bleed dark panels with sunk photography */
.brd,.sa,.notes,.own,.hrs,.wo,.pg{padding-block:clamp(56px,7vw,96px)}
.brd,.sa,.notes,.own,.hrs{background-repeat:no-repeat;background-size:cover;background-position:center}
.brd{background-color:#0B0C0C}
.brd::after{background-image:var(--aplus-bg-board)}
.sa{background-color:#101214}
.sa::after{background-image:var(--aplus-bg-process)}
.own{background-color:#0B0C0C}
.own::after{background-image:var(--aplus-bg-owner)}
.notes{background-color:#101214}
.notes::after{background-image:var(--aplus-bg-reviews)}
.hrs{background-color:#0B0C0C}
.hrs::after{background-image:var(--aplus-bg-hours)}
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.095;pointer-events:none;mix-blend-mode:overlay;z-index:0}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(11,12,12,.93);backdrop-filter:blur(10px);border-bottom:1px solid #232628;padding-block:clamp(8px,1.1vw,16px)}
.hd__in{min-height:78px;align-items:center;gap:20px;flex-wrap:nowrap}
.hd__lg{flex:0 0 auto}
.hd__lg img,.hd__lg .custom-logo{height:var(--aplus-logo-h,50px);width:auto;max-width:none}
.hd__nav{flex:1 1 auto;justify-content:center}
.hd__nav .wp-block-navigation__container{gap:28px;justify-content:center}
/* Colour alone was too quiet at 13px mono. The text brightens and a green rule
   wipes in from the left, which reads as a target rather than a tint. */
.hd__nav a{position:relative;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);transition:color .16s}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--grn);
  transform:scaleX(0);transform-origin:left center;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.hd__nav a:hover,.hd__nav a:focus-visible{color:var(--bone)}
.hd__nav a:hover::after,.hd__nav a:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.hd__nav a::after{transition:none}}
.hd__ph{flex:0 0 auto;margin:0}
.hd__ph .wp-block-button__link{font-size:22px;padding:11px 22px;white-space:nowrap;letter-spacing:.02em}

/* ---------- hero ---------- */
.aplus-hero{align-items:center}
.aplus-hero .wp-block-cover__image-background{filter:grayscale(.5) contrast(1.18) brightness(.72)}

/* ---------- job board ---------- */
.rows{border-top:1px solid #2A2E30;gap:0}
.row{display:grid;grid-template-columns:minmax(200px,.9fr) 1.7fr;gap:clamp(14px,2.5vw,40px);align-items:baseline;padding:22px 12px 22px 0;border-bottom:1px solid #2A2E30;color:inherit;text-decoration:none;transition:background .16s,color .16s,padding .16s}
.row:hover{background:#131517;padding-left:12px}
.row:hover .row__t{color:var(--grn)}
.row:focus-visible{outline:2px solid var(--grn);outline-offset:-2px;background:#131517}
.row:focus-visible .row__t{color:var(--grn)}
@media(prefers-reduced-motion:reduce){.row{transition:none}}
.row>*{margin:0}
.row__t{font-size:clamp(20px,2.4vw,30px);line-height:1.05}
.row__d{color:var(--bone-3);font-size:16px}
/* Reserve two lines so every row is the same height. Descriptions never run past
   two lines at these widths, so nothing is clipped; the shorter ones just leave
   the second line empty. Not applied once the rows stack, where a floor would
   only pad out the short ones. */
@media(min-width:782px){
  .row__d{min-height:3.2em}
}

/* ---------- bleed cta ---------- */
.bleed{text-align:center}
.bleed .wp-block-cover__image-background{filter:grayscale(.7) contrast(1.15) brightness(.5)}
.bleed__h{font-size:clamp(32px,5.6vw,72px)}
.bleed__h em{font-style:normal;color:var(--grn)}

/* ---------- how we do business ---------- */
.sag{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,72px);border-top:1px solid #2E3235}
.sai{padding:26px 0;border-bottom:1px solid #2E3235;gap:9px}
.sai__h{font-size:clamp(21px,2.4vw,27px);color:var(--grn)}
.sai p{margin:0;font-size:16.5px;line-height:1.58;color:var(--bone-2)}
.sa__ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:clamp(28px,3.5vw,44px)}
.sa__ft p{margin:0;max-width:44ch;color:var(--bone-2)}

/* ---------- owner ---------- */
.own__in{gap:clamp(26px,4.5vw,68px);align-items:flex-start}
.own__ph{position:relative}
.own__img{margin:0}
.own__img img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.6) contrast(1.08) brightness(.78)}
.own__cap{position:absolute;left:0;right:0;bottom:0;margin:0;background:var(--blk);border-top:3px solid var(--grn);padding:13px 16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3)}
.own__tx p{color:var(--bone-2);font-size:17.5px;max-width:62ch}
.own__tx .sec__h{margin-bottom:24px}
.own__sign{display:flex;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid #2A2E30;align-items:baseline;gap:10px 20px}
.own__sign p{margin:0}
.own__sign-n{font-family:var(--dsp);font-weight:800;font-size:31px;text-transform:uppercase}
.own__sign-r{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}

/* ---------- reviews ---------- */
.notes__hd{padding-bottom:clamp(30px,2.8vw,50px);gap:12px}
.pinw{position:relative}
.pin{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;outline-offset:6px}
.pin::-webkit-scrollbar{display:none}
/* Three across on desktop, and a hair of the next card showing so it reads as
   scrollable rather than as a row that happens to end there. */
/* blockquote carries a 1em 40px browser default: 80px of side margin per card,
   which is most of the space that was sitting between the reviews. */
/* border-box matters here: the theme has no global reset, so without it the
   26px side padding is added on top of the flex-basis and three cards overflow. */
.note{margin:0;box-sizing:border-box;flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;display:flex;flex-direction:column;
  background:#F4F1EB;color:var(--blk);padding:28px 26px 24px;border-top:4px solid var(--grn)}
.note__q{flex:1 1 auto}
.pin__nav{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.pin__b{width:46px;height:46px;display:grid;place-items:center;cursor:pointer;font-size:18px;
  background:transparent;color:var(--bone);border:1px solid #2E3235;transition:.14s}
.pin__b:hover:not(:disabled){background:var(--grn);border-color:var(--grn);color:#08170A}
.pin__b:disabled{opacity:.3;cursor:default}
.note__q{margin:0 0 18px;font-size:16.5px;line-height:1.58}
.note__by{border-top:1px solid #C9C3B6;padding-top:14px;align-items:baseline;gap:12px}
.note__by p{margin:0}
.note__n{font-family:var(--dsp);font-weight:800;font-size:20px;text-transform:uppercase}
.note__s{font-family:var(--mono);font-size:12px;color:#635D52;letter-spacing:.08em}

/* ---------- work order / contact ---------- */
.wo{background:var(--bone);color:var(--blk)}
.wo .sec__h{margin-bottom:18px}
.wo__p{font-size:17px;line-height:1.62;margin:0 0 28px;max-width:46ch;color:#4A453C}
.wo__in{gap:clamp(28px,4.5vw,64px);align-items:flex-start}
.dl{border-top:2px solid var(--blk);gap:0}
.dl__r{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid #C3BDB0;align-items:baseline}
.dl__k{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#635D52;margin:0}
.dl__v{font-family:var(--dsp);font-weight:800;font-size:23px;text-transform:uppercase;line-height:1.15;margin:0}
.dl__v a{text-decoration:none}
.dl__v a:hover{color:var(--grn-lo)}
.dl__v .sm{font-family:var(--bd);font-weight:500;font-size:16px;text-transform:none;line-height:1.5}

.frm{background:#F4F1EB;border:2px solid var(--blk);box-shadow:9px 9px 0 rgba(11,12,12,.14);color:var(--blk)}
.frm__hd{background:var(--blk);color:var(--bone);padding:17px 26px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.frm__hd h3{font-family:var(--dsp);font-weight:800;text-transform:uppercase;font-size:26px;margin:0}
.frm__hd span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--bone-3)}
.frm__b{padding:28px 26px 26px}
.frm__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px 20px;margin-bottom:26px}
.fr{margin:0;min-width:0}
.fr--2{grid-column:span 2}
.fr--3{grid-column:span 3}
.fr--4{grid-column:span 4}
.fr--6{grid-column:span 6}
.fr label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#635D52;margin-bottom:7px}
.fr input,.fr textarea{box-sizing:border-box;display:block;width:100%;background:transparent;border:0;border-bottom:2px solid var(--blk);padding:9px 2px;font-family:var(--bd);font-size:16.5px;line-height:1.35;color:var(--blk)}
.fr textarea{min-height:88px;resize:vertical;border:2px solid var(--blk);padding:12px 13px}
.fr input:focus,.fr textarea:focus{outline:none;border-color:var(--grn-lo);background:rgba(60,178,66,.06)}
/* belt and braces against anything wpautop still manages to insert */
.frm__b p:empty,.frm__b form>br{display:none}
/* Honeypot. Off-screen rather than display:none, since some bots skip hidden
   fields but happily fill anything that is technically in the layout. */
.frm__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frm__err{margin:0 0 18px;padding:11px 14px;background:rgba(178,60,60,.10);border-left:3px solid #B23C3C;font-size:15px;line-height:1.45;color:#7A2727}
.frm__rc{margin-top:8px;font-size:10.5px;line-height:1.5;opacity:.8}
.frm__rc a{text-decoration:underline}

/* ---------- thank-you page ---------- */
.thx{max-width:52ch;padding-block:clamp(24px,5vw,64px)}
.thx__h{margin:6px 0 0;font-family:var(--dsp);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.012em;font-size:clamp(44px,7vw,92px)}
.thx__p{margin:clamp(16px,2.4vw,24px) 0 0;font-size:19px;line-height:1.6;color:var(--bone-2)}
.thx__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(26px,3.4vw,42px);padding-top:clamp(20px,2.6vw,30px);border-top:1px solid #2A2E30}
.thx__call{background:var(--grn);color:#08170A;font-family:var(--dsp);font-weight:800;font-size:21px;letter-spacing:.06em;text-transform:uppercase;padding:14px 30px;transition:.14s}
.thx__call:hover{background:#4AC751;color:#08170A}
.thx__back{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);border-bottom:1px solid #2A2E30;padding-bottom:4px;transition:.14s}
.thx__back:hover{color:var(--bone);border-bottom-color:var(--bone)}
/* The page title block is redundant when the shortcode carries its own heading. */
.pg:has(.thx) .pg__t{display:none}
/* Google's floating reCAPTCHA badge: the notice under the button covers the
   attribution requirement, and the badge sits on top of the mobile call bar. */
.grecaptcha-badge{visibility:hidden}
.frm button{display:block;width:100%;background:var(--grn);color:#08170A;border:0;cursor:pointer;font-family:var(--dsp);font-weight:800;font-size:21px;letter-spacing:.06em;text-transform:uppercase;padding:16px 30px}
.frm button:hover{background:#4AC751}
.frm__fine{font-family:var(--mono);font-size:11.5px;color:#635D52;margin:15px 0 0;text-align:center}
.frm__ok{display:none;padding:36px 26px;text-align:center}
.frm__ok h3{font-family:var(--dsp);font-weight:800;text-transform:uppercase;font-size:30px;color:var(--grn-lo);margin:0 0 8px}
.frm__ok p{margin:0;font-size:16.5px}
.frm.is-sent .frm__b{display:none}
.frm.is-sent .frm__ok{display:block}

/* ---------- hours + map ---------- */
/* The map keeps its own height and sits centred against the hours panel, rather
   than being stretched to match it. Seven day rows made that stretch too tall. */
.hrs__in{gap:clamp(24px,4vw,56px);align-items:center}
.hrs__in > .wp-block-column{display:flex;flex-direction:column;justify-content:center}
.board{border:2px solid #2A2E30;padding:clamp(20px,2.4vw,28px);gap:0;flex:0 0 auto}
.board__h{margin:0 0 14px;font-size:30px}
.ln{padding:8px 0;border-bottom:1px dashed #2A2E30;gap:16px}
.ln:last-child{border-bottom:0}
.ln p{margin:0;font-size:15.5px}
.ln__v{color:var(--bone-3)}
.map{border:2px solid #2A2E30;flex:0 0 auto;height:clamp(280px,24vw,340px)}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) invert(.92) contrast(.86)}

/* ---------- footer ---------- */
/* padding-block only. The shorthand set left/right to 0, which beat the
   has-global-padding rule WordPress applies to full-width sections, so the
   footer was the one section whose content touched the screen edge on mobile. */
.ft{background:#08090A;padding-block:clamp(46px,5vw,72px) 26px;font-size:15px;color:var(--bone-3)}
/* The lists are much narrower than an even column split, so equal columns left
   the content bunched to the left with dead space on the right. Size the list
   columns to their content and spread them instead. */
.ft__in{gap:clamp(28px,3.4vw,56px) clamp(24px,3vw,48px);justify-content:space-between}
.ft__in > .wp-block-column:not([style*="flex-basis"]){flex:0 0 auto}
.ft__lg img,.ft__lg .custom-logo{height:var(--aplus-footer-logo-h,62px);width:auto;max-width:none;margin-bottom:18px}
.ft__blurb{margin:0;max-width:34ch;line-height:1.62}
/* Mono label rather than another display heading: at 20px these were competing
   with the section headings above them for no reason. */
.ft__h{margin:0 0 16px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.ft__l{list-style:none;padding:0;margin:0;display:grid;gap:10px;line-height:1.45}
.ft__l li{margin:0}
.ft__hrs li{display:flex;justify-content:space-between;gap:14px;
  padding-bottom:9px;border-bottom:1px dashed #1D2022}
.ft__hrs li:last-child{border-bottom:0;padding-bottom:0}
.ft__hrs span:first-child{color:var(--bone)}
.ft a{transition:.14s}
.ft a:hover{color:var(--grn)}
.ft__bot{margin-top:clamp(34px,3.6vw,52px);padding-top:20px;border-top:1px solid #1D2022;gap:10px;font-size:12.5px;color:#5A6165}
.ft__bot p{margin:0}

/* ---------- inner pages / posts ---------- */
.pg__t{font-size:clamp(36px,5.4vw,68px);margin-bottom:24px}
.pg p{color:var(--bone-2)}

/* ---------- mobile call bar ---------- */
.aplus-mb{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;grid-template-columns:1fr 1fr}
.aplus-mb a{display:flex;align-items:center;justify-content:center;padding:16px 10px;white-space:nowrap;font-family:var(--dsp);font-weight:800;font-size:clamp(15px,4.4vw,19px);letter-spacing:.04em;text-transform:uppercase}
.aplus-mb a:first-child{background:var(--grn);color:#08170A}
.aplus-mb a:last-child{background:var(--panel-2);color:var(--bone)}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .note{flex-basis:calc((100% - 18px)/2)}
  .row{grid-template-columns:1fr;gap:6px}
  .sag{grid-template-columns:1fr}
  .own__img img{aspect-ratio:16/10}
}
@media(max-width:781px){
  .hd__nav{flex:0 0 auto;margin-left:auto}
  .own__in,.wo__in,.hrs__in{gap:32px}
}
@media(max-width:640px){
  .hd__in{min-height:60px}
  .hd__lg img,.hd__lg .custom-logo{height:calc(var(--aplus-logo-h,50px) * .8)}
  .hd__ph .wp-block-button__link{font-size:18px;padding:10px 16px}
  .aplus-mb{display:grid}
  .ft{padding-bottom:92px}
  /* 56px of section padding top and bottom is a lot of a phone screen when
     there are ten sections. */
  .brd,.sa,.notes,.own,.hrs,.wo,.pg{padding-block:42px}
  /* Footer links were 17px tall, well under a comfortable touch target. */
  .ft__l{gap:0}
  .ft__l a{display:inline-block;padding-block:12px}
  /* Eight service links stacked at touch height is most of a phone screen. */
  .ft__svc{grid-template-columns:1fr 1fr;column-gap:16px}
  .fr--2,.fr--3,.fr--4{grid-column:span 6}
  .note{flex-basis:86%}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ---------- section seams & scroll reveal ---------- */
.brd,.sa,.notes,.own,.hrs,.wo,.bleed,.aplus-hero{position:relative;isolation:isolate}
/* hairline seam with a soft dark bloom so one section melts into the next */
/* seam line removed — sections meet directly */
.brd::before,.sa::before,.notes::before,.own::before,.hrs::before{
  background-image:var(--noise);
}

.aplus-rv{opacity:0;transform:translateY(22px);transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}
.aplus-rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.aplus-rv{opacity:1!important;transform:none!important;transition:none}}
.board__lines .ln{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dashed #2A2E30}
.board__lines .ln:last-child{border-bottom:0}
.board__lines .ln p{margin:0;font-size:15.5px}
/* Seven rows now, so mark the current day to make the list scannable. */
.ln.is-today p{color:var(--grn)}

/* ---------- no gaps between full-width sections ---------- */
.wp-site-blocks > * + *{margin-block-start:0}
.wp-site-blocks > *{margin-block:0}
.wp-site-blocks .alignfull{margin-block:0}
.wp-site-blocks > .aplus-hero,
.wp-site-blocks > .brd,.wp-site-blocks > .sa,.wp-site-blocks > .own,
.wp-site-blocks > .notes,.wp-site-blocks > .wo,.wp-site-blocks > .hrs,
.wp-site-blocks > .bleed,.wp-site-blocks > .ft,.wp-site-blocks > .hd,
.wp-site-blocks > div > .hd,.wp-site-blocks > div > .ft{margin-block:0!important}

/* ---------- hard reset of WordPress' gap between top-level sections ---------- */
body .wp-site-blocks{display:block}
body .wp-site-blocks > *,
body .wp-site-blocks > * + *,
body .wp-site-blocks > div,
body .wp-site-blocks > main,
body .wp-site-blocks > header,
body .wp-site-blocks > footer,
body .wp-site-blocks > section,
body .wp-site-blocks > div > *{
  margin-block-start:0 !important;
  margin-block-end:0 !important;
}
body .wp-site-blocks > .alignfull,
body .wp-site-blocks > div > .alignfull{margin-top:0 !important;margin-bottom:0 !important}
/* the sections carry their own padding; nothing between them */
.aplus-hero,.brd,.bleed,.sa,.own,.notes,.wo,.hrs,.hd,.ft{margin:0 !important;border-top:0;border-bottom:0}

/* flat tints (no opaque edge ring) + attachment so photos fill edge to edge */
.brd,.sa,.own,.notes,.hrs{background-position:center center;background-size:cover}

/* ---------- nuclear: no spacing or edging between sections, at any nesting ---------- */
.aplus-hero,.brd,.bleed,.sa,.own,.notes,.wo,.hrs,.hd,.ft,
.wp-site-blocks > *,
/* Was .wp-site-blocks > * > *, which reached every section's own children and
   silently zeroed their spacing. The only depth-2 elements that need it are the
   header and footer, which sit inside a template-part wrapper. */
.wp-site-blocks > * > .hd,.wp-site-blocks > * > .ft{
  margin-top:0 !important;margin-bottom:0 !important;
}
.aplus-hero,.brd,.bleed,.sa,.own,.notes,.wo,.hrs{
  box-shadow:none !important;border-top:0 !important;border-bottom:0 !important;outline:0;
}
.wo::after{content:none !important}
/* pull each section up a hair so no sub-pixel hairline can show */
.brd,.bleed,.sa,.own,.notes,.wo,.hrs{margin-top:-1px !important}

/* ---------- soft transitions: photo layers dissolve at section edges ---------- */
.brd::after,.sa::after,.own::after,.notes::after,.hrs::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:center;
  opacity:.16;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
}
/* hero and CTA photos feather into the sections above and below */
.aplus-hero .wp-block-cover__image-background{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 82%,transparent 100%);
}
.bleed .wp-block-cover__image-background{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
}
/* the one intentional hard edge: bone-coloured contact block */
.wo{background:var(--bone)}

/* ---------- optional green seam (Appearance → A+ Site Settings) ---------- */
body.aplus-seams .brd,
body.aplus-seams .sa,
body.aplus-seams .own,
body.aplus-seams .notes,
body.aplus-seams .hrs,
body.aplus-seams .wo,
body.aplus-seams .ft,
body.aplus-seams .bleed{
  box-shadow:inset 0 2px 0 0 var(--aplus-seam,rgba(60,178,66,.55)) !important;
}

/* flat sections alternate two close tones so the eye still reads them apart */
.brd{background-color:#0B0C0C}
.sa{background-color:#101214}
.own{background-color:#0B0C0C}
.notes{background-color:#101214}
.hrs{background-color:#0B0C0C}
/* when a section photo IS set in the settings, keep it quiet */
.brd::after,.sa::after,.own::after,.notes::after,.hrs::after{opacity:.14}

/* dynamic lists render plain markup, not block wrappers */
.rows .row{text-decoration:none}
.rows .row__d{color:var(--bone-3);font-size:16px;margin:0}
.sag .sai h3{margin-bottom:9px}

/* hero: text left inside the normal centred 1280px column */
.aplus-hero .wp-block-cover__inner-container{text-align:left}
.aplus-hero{min-height:90vh !important}
.aplus-hero .wp-block-cover__inner-container{padding-block:clamp(48px,7vh,96px)}
.aplus-hero__h{
  /* The four line breaks are put in by inc/settings.php, so the measure only has
     to be wide enough to hold the longest of the four lines. Nothing here sizes
     the box off the viewport or off a percentage: both of those move the measure
     independently of the type size, which is what made the headline gain lines
     as the window got wider instead of losing them.
     font-size keeps its !important as a guard: if this template is ever edited in
     the Site Editor again it will pick up an inline fluid-type clamp, and a plain
     rule would lose to it. */
  box-sizing:border-box;
  width:auto !important;
  /* Must be the content size, not 100%. The cover's inner container is
     full-bleed, so 100% here overrides WordPress' constrained-layout cap and
     the headline escapes left of the column the paragraph sits in. */
  max-width:var(--wp--style--global--content-size,1280px) !important;
  padding-inline:0 !important;
  margin:0 auto !important;
  text-align:left !important;
  font-size:clamp(38px,5.4vw,84px) !important;
  line-height:.86;
  letter-spacing:-.012em;
  text-transform:uppercase;
  text-wrap:pretty;
}
.aplus-hero__h em{font-style:normal;color:var(--grn)}


/* paragraph left, buttons at the right edge of the column, hairline above */
.aplus-hero__u{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 40px;width:100%;margin-top:clamp(22px,3vw,38px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid rgba(233,229,220,.20)}
.aplus-hero__u .wp-block-buttons{margin-left:auto}
.aplus-hero__p{margin:0;max-width:34ch;color:var(--bone-2);font-size:17px;line-height:1.62}

/* ---------- phone layout ---------- */
@media(max-width:781px){
  /* Hero: centre the whole stack. Left-aligned type with a left-aligned button
     pair leaves a ragged right edge on a narrow screen. */
  .aplus-hero__h{text-align:center !important}
  .aplus-hero__u{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .aplus-hero__p{max-width:38ch;margin-inline:auto}
  .aplus-hero__u .wp-block-buttons{margin-left:0;justify-content:center}

  /* How we do business: the closing line and its button stack, so centre them
     and give the button room rather than letting it sit tight under the text. */
  /* Every .sai already ends in a bottom rule, so a border-top here drew a
     second line with the gap sitting between the two. */
  .sa__ft{flex-direction:column;align-items:center;text-align:center;gap:24px;
    margin-top:30px;padding-top:0;border-top:0}
  .sa__ft p{max-width:36ch}

  /* The 9px offset shadow reads as a misaligned grey edge once the panel is
     nearly as wide as the screen. */
  .frm{box-shadow:none}
  .frm__grid{gap:18px 16px}
  .fr label{margin-bottom:5px}
  .fr input{padding:7px 2px}

  /* The headline was sitting on its floor at roughly 33px. There is room for
     considerably more before the longest line runs out of width. */
  .aplus-hero__h{font-size:clamp(38px,11vw,44px) !important}

  /* The sticky call bar already carries the phone number, so the header button
     is the same action twice. Logo left, menu right.
     !important because WordPress prints .is-layout-flex in its global-styles
     inline block, which can land after the theme stylesheet in the head. */
  .hd__ph{display:none !important}
  .hd__nav{flex:0 0 auto !important;justify-content:flex-end !important;margin-left:auto !important}

  /* A 130px label column left too little room for the value, so a long email
     broke mid-word. Narrow the label, drop the value size, and allow a clean
     break if an address is ever longer still. */
  .dl__r{grid-template-columns:92px 1fr;gap:12px}
  .dl__v{font-size:19px;overflow-wrap:anywhere}

  /* Both footer link columns repeat what is already on the page: the services
     section above, and the hours and map block for the address. */
  .ft__work,.ft__find{display:none !important}

  /* Footer: centred reads better than a single left-aligned column. */
  .ft__in{justify-content:center;text-align:center}
  .ft__blurb{margin-inline:auto}
  .ft__l{justify-items:center}
  .ft__bot{justify-content:center;text-align:center}
}

/* ---------- mobile navigation overlay ----------
   Styles WordPress' own navigation overlay rather than replacing it, so the
   open/close behaviour, focus trap and aria wiring stay core's job.

   backdrop-filter on .hd makes the header the containing block for any
   position:fixed descendant, and WordPress' overlay is fixed and lives inside
   the header. Left alone it is trapped at header height instead of covering the
   screen. Drop the blur only while the menu is open; nothing is behind it. */
.hd:has(.wp-block-navigation__responsive-container.is-menu-open){backdrop-filter:none;background:transparent;border-bottom-color:transparent}
.hd__nav .wp-block-navigation__responsive-container-open,
.hd__nav .wp-block-navigation__responsive-container-close{
  display:grid;place-items:center;width:46px;height:46px;color:var(--bone);
  background:rgba(233,229,220,.06);border:1px solid #34393C;cursor:pointer;transition:.16s}
/* Setting display above re-showed the button on desktop, because core hides it
   with a rule of equal specificity that this stylesheet loads after. */
@media(min-width:600px){
  .hd__nav .wp-block-navigation__responsive-container-open:not(.always-shown){display:none !important}
}
.hd__nav .wp-block-navigation__responsive-container-open:hover,
.hd__nav .wp-block-navigation__responsive-container-close:hover{
  background:var(--grn);border-color:var(--grn);color:#08170A}

.hd__nav .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--blk) !important;color:var(--bone);
  padding:clamp(22px,6vw,40px) clamp(18px,5vw,40px);
  /* a touch of lift toward the top-left so it is not a flat black field */
  background-image:radial-gradient(120% 80% at 0% 0%, rgba(60,178,66,.10), transparent 60%) !important;
  align-items:stretch;justify-content:flex-start}

.hd__nav .is-menu-open .wp-block-navigation__responsive-container-close{
  position:absolute;top:0;right:0}

/* Core centres the overlay contents. The rest of the site is left-aligned, so
   force it at every level: the dialog, the content wrapper and the list all
   centre independently, and missing any one of them leaves it centred. */
.hd__nav .is-menu-open .wp-block-navigation__responsive-dialog,
.hd__nav .is-menu-open .wp-block-navigation__responsive-container-content{
  width:100% !important;align-items:flex-start !important;justify-content:flex-start !important;
  text-align:left !important}

.hd__nav .is-menu-open .wp-block-navigation__responsive-container-content{
  margin-top:clamp(56px,14vw,84px)}

.hd__nav .is-menu-open .wp-block-navigation__container{
  flex-direction:column;align-items:flex-start !important;justify-content:flex-start !important;
  gap:0;width:100% !important;text-align:left !important}

.hd__nav .is-menu-open .wp-block-navigation-item{width:100%;text-align:left}

/* Rule sits under the word, tight to it, and stops short of the edge. Drawn as
   a pseudo-element rather than a border on a 75%-wide box, so narrowing the rule
   can never squeeze the label into wrapping. */
.hd__nav .is-menu-open .wp-block-navigation-item__content{
  display:block;width:100%;padding:0;margin-bottom:22px;text-align:left;
  font-family:var(--dsp);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(30px,8.6vw,42px);line-height:1.02;color:var(--bone);transition:color .16s}
.hd__nav .is-menu-open .wp-block-navigation-item__content::after{
  /* position and transform are reset because the desktop nav underline uses the
     same pseudo-element, absolutely positioned and scaled to zero. */
  content:"";display:block;position:static;transform:none;
  width:75%;height:1px;margin-top:9px;inset:auto;
  background:#2A2E30;transition:background .16s}
.hd__nav .is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content{margin-bottom:0}

.hd__nav .is-menu-open .wp-block-navigation-item__content:hover,
.hd__nav .is-menu-open .wp-block-navigation-item__content:focus-visible{color:var(--grn)}
.hd__nav .is-menu-open .wp-block-navigation-item__content:hover::after,
.hd__nav .is-menu-open .wp-block-navigation-item__content:focus-visible::after{background:var(--grn)}

/* Hide the sticky call bar while the menu is open. No JS sets a body class, so
   this keys off the overlay's own state class. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .aplus-mb{display:none !important}