/*
Theme Name: J Schleis Services
Theme URI: https://jschleisservices.com
Author: MCM Digital Products
Author URI: https://www.mcmdigitalproducts.com
Description: Custom lightweight theme for J Schleis Services LLC — forestry mulching, land clearing and habitat restoration in Northeast Wisconsin. Photography-forward, WCAG-conscious, performance-first. Built-in accessibility toolbar, gallery lightbox and county map. No page builder, no plugin dependency.
Version: 1.1.3
Requires PHP: 7.4
License: Proprietary
Text Domain: jschleis
*/

/* ============================================================
   PALETTE — J Schleis Services LLC
   Sampled directly from the final "Vintage Badge" mark, not
   guessed alongside it. The badge is a distressed circular
   stamp on cream: deep pine lettering, olive and orange pines,
   a dark brown ring, rust "SERVICES LLC", wheat highlights.

   Measured off the artwork (share of non-background pixels):
     #2d4137  pine green, the "J. Schleis" lettering   7.8%
     #47542b  olive, the tree mass                     8.4%
     #251a16  near-black brown, ring and outlines      8.3%
     #4d2c1e  ring brown                               5.8%
     #a8562c  rust, "SERVICES LLC"                     3.5%
     #e37d3b  bright orange, accent pines              1.9%
     #f1d19d  wheat, the light peaks behind the trees  2.6%

   So the structural dark is a PINE green — the badge's own
   lettering color — not a neutral charcoal and not a navy. Rust
   is THE accent and it is the logo's exact rust: #a8562c clears
   4.5:1 both as white-on-button (5.2) and as text on the paper
   base (4.8), which the brighter #c1602c did not. Wheat is the
   eyebrow highlight on dark bands (7.5:1 on the pine panel).

   The paper base is deliberately a shade COOLER and lighter than
   the badge's own cream (#fdf7e7), so the logo's disc still
   reads as a disc on light sections instead of dissolving into
   the page.

   Type: Bitter (slab serif display) + Barlow (UI) — the slab has
   the workwear, printed-sign character the stamp is asking for.
   Corners: 3px. Not square, not soft.
   ============================================================ */
:root{
  --ink:#22302a;         /* structural dark: body text, dark bands   */
  --ink-2:#2d4137;       /* the badge's own pine — layered panels    */
  --ink-soft:#4d5a51;    /* secondary text                           */
  --paper:#f8f5ec;       /* cream base                               */
  --paper-warm:#efe8d7;  /* alternating section tone                 */
  --brand:#a8562c;       /* THE accent — the logo's rust             */
  --brand-deep:#85401d;  /* accent hover / higher-contrast text      */
  --navy:#3f5a4a;        /* structural mid — pine                    */
  --navy-deep:#161f1a;   /* deepest dark: footer, drawer             */
  --stone:#6b7365;       /* muted text, meta                         */
  --sand:#f1d19d;        /* wheat — eyebrow highlight on dark        */
  --line:rgba(34,48,42,.12);
  --line-light:rgba(248,245,236,.18);
  --r:3px;               /* the one corner radius on the site        */
  --max:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip (not hidden) — hidden would turn html into a scroll
   container and break the sticky header on iOS. */
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
iframe,video,canvas,svg{max-width:100%}
/* 16px is the floor — anything smaller makes iOS Safari zoom the whole page
   in when a visitor taps a form field. */
input,select,textarea,button{font-family:inherit;font-size:16px;max-width:100%}
pre,table{max-width:100%;overflow-x:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
h1,h2,h3,.serif{font-family:'Bitter',Georgia,serif;font-weight:400;line-height:1.12;letter-spacing:-.01em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.eyebrow{font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;letter-spacing:.04em;transition:all .25s ease;cursor:pointer;border:1px solid transparent}
/* Fallback when no logo file is bundled and none is picked in Photo Check.
   A text wordmark beats a broken-image icon. Style it to the brand once the
   real logo lands, or delete it. */
.logo-wordmark{font-family:'Bitter',Georgia,serif;font-size:22px;line-height:1;color:#fff;letter-spacing:-.01em;display:inline-block}
.btn-solid{background:var(--brand);color:#fff}
.btn-solid:hover{background:var(--brand-deep)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--navy-deep)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:999}
.skip-link:focus{left:0}
/* The header is sticky, so an in-page jump (#area, #process) would land with
   the heading hidden underneath it without this. */
section[id]{scroll-margin-top:96px}

/* ---- corner treatment (J Schleis) ------------------------------
   One radius token, applied to the surfaces that carry photography
   and content. Buttons and the utility/nav bars stay square so the
   page still has hard structural edges. */
.btn{border-radius:var(--r)}
.svc,.g-tile,.g-tile img,.intro-photo,.intro-photo img,.card,
.area-side .card,.owner-shot,.owner-shot img,.rev-card,.post-card,
.post-card img,.hero-strip{border-radius:var(--r)}
.svc img,.post-thumb,.post-thumb img{border-radius:var(--r) var(--r) 0 0}

/* utility bar */
.util{background:var(--navy-deep);color:#aab5ab;font-size:13px;border-bottom:1px solid rgba(248,245,236,.08)}
.util .wrap{display:flex;justify-content:center;align-items:center;padding-top:9px;padding-bottom:9px;gap:16px}
.util a{color:#fff;font-weight:600}
.util span b{color:#fff;font-weight:600}
.util .lic{letter-spacing:.08em}

/* nav — dark navy to match the logo plate */
header.site-nav{position:sticky;top:0;z-index:60;background:rgba(26,37,31,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(248,245,236,.12)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:20px}
/* The logo file is tight-cropped to the badge disc, so this height IS the
   badge diameter — before, a 66px square held a ~58px badge floating in
   sage, which is what made it read as a sticker rather than a mark. A
   circular stamp also reads smaller than a horizontal wordmark at equal
   height, so it needs the extra size to carry the header. */
.logo img{height:98px;width:auto;display:block}
/* 16px, not 14px. The nav is one of only two places on the page a
   visitor is asked to make a decision, and it was set two steps smaller
   than the body copy underneath it. The gap tightens to compensate so the
   bar still clears the logo and the call button at 1000px. */
nav.links ul{display:flex;gap:28px;font-size:16px;font-weight:500;list-style:none}
nav.links li{position:relative}
nav.links a{position:relative;padding:6px 0;color:rgba(248,245,236,.78);display:block}
nav.links > ul > li > a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brand);transition:width .25s}
nav.links a:hover,nav.links a:focus{color:#fff}
nav.links > ul > li > a:hover:after{width:100%}
.nav-cta{font-size:14px;white-space:nowrap;flex-direction:column;align-items:center;gap:2px;line-height:1.15;text-align:center;padding-top:11px;padding-bottom:11px}
.nav-cta-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.nav-cta-num{font-size:15px;font-weight:600;letter-spacing:.01em}

/* services dropdown */
nav.links .menu-item-has-children > a{padding-right:16px}
nav.links .menu-item-has-children > a:before{content:"";position:absolute;right:0;top:50%;margin-top:-1px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
nav.links .sub-menu{display:none;position:absolute;top:100%;left:-20px;min-width:286px;flex-direction:column;gap:0;padding:10px 0;background:rgba(20,29,24,.98);border:1px solid var(--line-light);box-shadow:0 24px 60px rgba(0,0,0,.45)}
nav.links li:hover > .sub-menu,nav.links li:focus-within > .sub-menu{display:flex}
nav.links .sub-menu a{padding:12px 22px;font-size:15px;color:rgba(248,245,236,.76)}
nav.links .sub-menu a:hover{background:rgba(255,255,255,.07);color:#fff}

/* mobile nav */
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);padding:9px 11px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;transition:transform .25s,opacity .25s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-drawer{display:none;background:#161f1a;border-top:1px solid var(--line-light);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mobile-drawer.open{display:block}
.mobile-drawer ul{list-style:none}
.mobile-drawer a{display:block;padding:16px 24px;min-height:52px;color:rgba(248,245,236,.88);border-bottom:1px solid rgba(255,255,255,.07);font-size:16px}
.mobile-drawer .sub-menu a{padding-left:44px;font-size:15px;color:rgba(248,245,236,.62)}
.mobile-drawer .drawer-foot{padding:22px 24px 30px;display:flex;flex-direction:column;gap:16px;align-items:stretch}
.mobile-drawer .drawer-foot .btn{width:100%;justify-content:center;min-height:54px}
.mobile-drawer .drawer-foot .social-row{justify-content:center}

/* hero (front page) */
/* svh = the *small* viewport height, i.e. what is actually visible on a phone
   once the browser's own address bar is on screen. Plain vh overshoots and
   pushes the call buttons below the fold. */
.hero{position:relative;min-height:88vh;min-height:86svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 60%}
/* Hero scrim. Two gradients stacked, not one.
   The vertical pass darkens top (so the sticky nav reads) and bottom (so the
   fact strip reads). The angled pass darkens the LEFT column only, where all
   the type actually sits, and fades to nothing by ~78% so the equipment on the
   right of the photo stays visible. A single flat overlay dark enough to carry
   sand-on-siding would have flattened the whole picture. */
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(22,31,26,.52) 0%,rgba(22,31,26,.34) 24%,rgba(22,31,26,.52) 56%,rgba(22,31,26,.88) 100%),
  linear-gradient(101deg,rgba(22,31,26,.66) 0%,rgba(22,31,26,.5) 34%,rgba(22,31,26,.2) 62%,rgba(22,31,26,0) 80%)}
/* Belt and braces on the two lightest elements: the sand eyebrow and the white
   serif both land on pale siding in the current hero photo, and the client can
   swap that photo at any time. */
.hero .eyebrow,.svc-hero .crumb{text-shadow:0 1px 3px rgba(22,31,26,.55)}
.hero h1,.svc-hero h1{text-shadow:0 2px 10px rgba(22,31,26,.35)}
.hero-inner{position:relative;width:100%;padding:120px 0 72px}
.hero .eyebrow{color:var(--sand);margin-bottom:20px}
.hero h1{font-size:clamp(44px,6.4vw,84px);max-width:13ch;font-weight:300}
.hero h1 em{font-style:italic;font-weight:400}
.hero p.lede{max-width:52ch;margin:26px 0 38px;font-size:17px;color:rgba(255,255,255,.9)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-strip{position:relative;border-top:1px solid var(--line-light);margin-top:64px;padding-top:22px;display:flex;gap:48px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.88)}
.hero-strip b{display:block;font-family:'Bitter',serif;font-size:19px;font-weight:500;color:#fff}

/* intro */
.intro{padding:110px 0 100px}
.intro .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
/* No owner portrait yet -> one column, not one column plus a hole. The
   two-column intro assumes a photo on the right; without one the copy
   column keeps its narrow measure and half the section is empty space,
   which reads as a broken page rather than a restrained one. front-page.php
   adds .no-portrait when mcm_owner_photos() comes back empty. */
.intro .wrap.no-portrait{grid-template-columns:1fr;gap:0;max-width:900px}
.intro .wrap.no-portrait p{max-width:68ch}
.intro .wrap.no-portrait .intro-facts{gap:56px}
.intro .eyebrow{color:var(--brand);margin-bottom:18px}
.intro h2{font-size:clamp(32px,3.6vw,50px);margin-bottom:24px}
.intro p{color:var(--ink-soft);margin-bottom:18px;max-width:56ch}
.intro-facts{display:flex;gap:40px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line);flex-wrap:wrap}
.intro-facts div span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:4px}
.intro-facts div b{font-family:'Bitter',serif;font-size:22px;font-weight:500}
.intro-photo{position:relative}
.intro-photo figure{margin:0}
.intro-photo img{width:100%;height:600px;object-fit:cover;object-position:50% 22%}
.intro-photo figcaption{padding-top:14px;font-size:13px;line-height:1.4}
.intro-photo figcaption b{display:block;font-family:'Bitter',Georgia,serif;font-size:17px;font-weight:500}
.intro-photo figcaption span{color:var(--stone);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:600}
.intro-photo:before{content:"";position:absolute;top:24px;left:-24px;right:24px;bottom:-24px;border:1px solid var(--line);z-index:-1}
/* Two owners, two portraits. The second is nudged down so the pair reads as a
   composition instead of a police line-up. */
.intro-photo.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.intro-photo.pair img{height:430px}
.intro-photo.pair figure:last-child{margin-top:46px}

/* services grid */
.services{background:var(--ink);color:var(--paper);padding:110px 0}
.services .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.services .eyebrow{color:var(--sand);margin-bottom:16px}
.services h2{font-size:clamp(32px,3.6vw,50px);max-width:16ch}
.services .head p{max-width:44ch;color:rgba(248,245,236,.75);font-size:15px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light)}
.svc{background:var(--ink);position:relative;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end}
.svc .svc-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease}
.svc:hover .svc-img{transform:scale(1.05)}
/* The scrim ramps earlier and finishes darker than it used to. On a photo
   of a dark condenser the old curve was plenty; on the mini-split card the
   unit is close to white and the white body copy sitting on it was washing
   out. Deepening the bottom of the ramp fixes that card without dimming the
   photograph anywhere the text is not. */
.svc.photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,31,26,.05) 22%,rgba(22,31,26,.68) 62%,rgba(22,31,26,.95) 100%)}
.svc-body{position:relative;z-index:2;padding:32px}
.svc .num{font-family:'Bitter',serif;font-size:15px;color:var(--sand);letter-spacing:.1em;display:block;margin-bottom:10px}
.svc h3{font-size:24px;font-weight:500;margin-bottom:8px}
.svc h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.svc p{font-size:14px;color:rgba(248,245,236,.75);max-width:34ch}
/* ---- no-photo card ----------------------------------------------------
   A card with no job photo yet gets the logo as a watermark instead of
   sitting empty. Three rules keep it reading as texture rather than as a
   stamp: it is faint (7%), it is oversized and bled off the right edge so
   overflow:hidden crops it (a centered mark reads as "logo placement"), and
   it is anchored the same way on every card that uses it, because varying
   it reads as an accident. The gradient underneath tips the card darker
   toward the right, which is what sinks the mark behind the copy.

   The whole treatment is attached to .plain, which is also the class a
   photo card falls back to when its photograph has not been uploaded. Add
   the photo and the watermark disappears on its own — this is placeholder
   art that expires without anyone having to remember to remove it.
   ------------------------------------------------------------------- */
/* The gradient runs top-to-bottom now rather than corner-to-corner: it
   lifts slightly where the mark sits and sinks toward the bottom where the
   headline and copy sit, so the card gets darker exactly where it needs to
   carry white text. */
.svc.plain{background:linear-gradient(180deg,#33473c 0%,var(--ink-2) 54%,#1c2721 100%)}
.svc.plain:before{content:"";position:absolute;left:32px;top:32px;width:34px;height:2px;background:var(--brand);z-index:2}
/* Centred in the open space above the copy, fully inside the card. The
   first pass bled the mark off the right edge deliberately, to read as
   texture rather than as a logo -- but cropped through the wordmark it read
   as a mistake instead. Whole and centered, it reads as placed on purpose,
   which is what it is. Opacity comes up a step because a smaller mark at
   7% disappears. */
.svc.plain:after{content:"";position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);width:74%;aspect-ratio:1;background-image:var(--wm);background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.10;pointer-events:none;z-index:0}
/* Nothing to fade if the logo was never passed down from the template. */
.svc-grid:not([style*="--wm"]) .svc.plain:after{display:none}

/* gallery */
.work{padding:110px 0}
.work .head{text-align:center;max-width:640px;margin:0 auto 60px}
.work .eyebrow{color:var(--brand);margin-bottom:16px}
.work h2{font-size:clamp(32px,3.6vw,50px);margin-bottom:18px}
.work .head p{color:var(--ink-soft)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:300px;gap:14px}
.gallery-teaser{grid-auto-rows:340px}
.g-item{position:relative;display:block;overflow:hidden;background:var(--ink-2);cursor:zoom-in}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.g-item:hover img{transform:scale(1.05)}
.g-item .cap{display:block;position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;background:linear-gradient(180deg,transparent,rgba(22,31,26,.8));color:#fff;font-size:13px;letter-spacing:.06em}
/* The little + tells a visitor the photo opens. Drawn in CSS, no icon file. */
.g-zoom{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(22,31,26,.55);backdrop-filter:blur(4px);opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .25s ease}
.g-zoom:before,.g-zoom:after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.g-zoom:before{width:14px;height:2px}
.g-zoom:after{width:2px;height:14px}
.g-item:hover .g-zoom,.g-item:focus-visible .g-zoom{opacity:1;transform:scale(1)}
.work .more{text-align:center;margin-top:44px;font-size:14px;color:var(--ink-soft)}
.work .more a{color:var(--brand);font-weight:600;border-bottom:1px solid var(--brand);padding-bottom:2px}
.work-actions{text-align:center;margin-top:44px}
.work-actions .btn{margin:0 6px 10px}
.work-actions .sub{display:block;margin-top:14px;font-size:13px;color:var(--stone)}

/* our work page */
.work-page{padding:80px 0 100px}
.work-page .gallery{grid-auto-rows:290px}
.work-intro{max-width:760px;margin:0 auto 56px;text-align:center}
.work-intro p{color:var(--ink-soft);margin-bottom:16px}
.work-note{max-width:760px;margin:56px auto 0;padding-top:30px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:15px;text-align:center}

/* ---------- reviews band (third-party review widget lives here) ----------
   The vendor controls what renders inside .rev-embed, so this only sets the
   frame: section rhythm, a centered heading, and hard guards so a wide widget
   or a fixed-width iframe cannot force the page to scroll sideways on a
   phone. Everything inside is left alone on purpose. */
.reviews-band{padding:100px 0;background:var(--paper-warm)}
.reviews-band .head{text-align:center;max-width:640px;margin:0 auto 52px}
.reviews-band .eyebrow{color:var(--brand);margin-bottom:16px}
.reviews-band h2{font-size:clamp(32px,3.6vw,50px);margin-bottom:18px}
.reviews-band .head p{color:var(--ink-soft)}
.reviews-band.on-dark{background:var(--navy-deep);color:#fff}
.reviews-band.on-dark .eyebrow{color:var(--sand)}
.reviews-band.on-dark .head p{color:rgba(248,245,236,.72)}
.rev-embed{max-width:100%;overflow-x:hidden}
.rev-embed template{display:none}
.rev-embed iframe{max-width:100%;border:0}
.rev-embed img{max-width:100%;height:auto}
/* Reserves room before the widget loads so the page does not jump under a
   thumb mid-scroll. */
.rev-embed:empty,.rev-embed[data-lazy-embed]{min-height:320px}

/* ---------- native review cards -------------------------------------
   The reviews the theme renders itself. Square corners like everything
   else here -- a rounded review card is the tell that a widget was
   dropped in from somewhere else.

   The grid is CSS columns rather than a row grid on purpose. Reviews are
   wildly uneven in length; a row grid would stretch a fifteen-word review
   to the height of a four-paragraph one and leave a lake of white space
   under it. Columns let each card be exactly as tall as its own text. */
.rev-summary{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:15px;color:var(--ink-soft)}
.reviews-band.on-dark .rev-summary,.log-hero .rev-summary{color:rgba(255,255,255,.82)}
.rev-stars{color:#e8a13a;letter-spacing:.12em;font-size:15px;line-height:1;white-space:nowrap}

.rev-grid{columns:3;column-gap:22px}
.rev{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
     background:#fff;border:1px solid var(--line);padding:26px 24px 24px;margin:0 0 22px;
     display:inline-block;width:100%}
.reviews-band.on-dark .rev{background:var(--ink-2);border-color:var(--line-light)}
.rev-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rev-ava{flex:0 0 auto;width:40px;height:40px;background:var(--navy);color:#fff;
         display:flex;align-items:center;justify-content:center;
         font-family:'Bitter',Georgia,serif;font-size:18px;line-height:1}
.rev-who{display:block;min-width:0}
.rev-who b{display:block;font-family:'Bitter',Georgia,serif;font-size:17px;font-weight:500;line-height:1.25}
.rev-who span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);font-weight:600;margin-top:2px}
.reviews-band.on-dark .rev-who span{color:rgba(248,245,236,.6)}
.rev .rev-stars{display:block;margin-bottom:12px}
.rev-body{font-size:15px;line-height:1.65;color:var(--ink-soft)}
.rev-body p{margin:0 0 12px}
.rev-body p:last-child{margin-bottom:0}
.reviews-band.on-dark .rev-body{color:rgba(248,245,236,.8)}

/* A handful of reviews run to fifteen paragraphs. In the band they are cut
   off at a sane height with a link to the full text on /reviews/, where
   nothing is truncated. The fade is a gradient overlay rather than
   -webkit-line-clamp so it degrades to "slightly tall card" instead of
   "no truncation at all" in anything that does not support it. */
.rev.clamp .rev-body{position:relative;max-height:270px;overflow:hidden}
.rev.clamp .rev-body:after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.reviews-band.on-dark .rev.clamp .rev-body:after{background:linear-gradient(180deg,rgba(27,36,64,0),var(--ink-2))}
.rev-more{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brand);
  border-bottom:1px solid currentColor;padding-bottom:2px}
.rev-more:hover{color:var(--brand-deep)}
.reviews-band.on-dark .rev-more{color:var(--sand)}

/* The owner's answer, shown on /reviews/ only. This is the part a
   competitor's review page does not have, and it is the proof behind the
   promise that every review gets a reply. */
.rev-reply{margin-top:18px;padding:16px 18px;background:var(--paper-warm);border-left:3px solid var(--brand)}
.rev-reply b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);font-weight:600;margin-bottom:6px}
.rev-reply p{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.rev-reply p:last-child{margin-bottom:0}

.rev-actions{text-align:center;margin-top:34px}
.rev-actions .btn{margin:0 6px 10px}
.reviews-band.on-dark .rev-actions .btn-ghost{border-color:var(--line-light);color:#fff}

/* ---------- /reviews/ page ---------- */
.reviews-page{padding:80px 0 100px}
.rev-actions-top{margin:0 0 46px}
.reviews-page .rev{background:#fff}
.rev-note{max-width:760px;margin:48px auto 0;padding-top:26px;border-top:1px solid var(--line);
  color:var(--stone);font-size:14px;text-align:center}

/* process */
.process{background:var(--paper-warm);padding:110px 0}
.process .head{max-width:640px;margin-bottom:64px}
.process .eyebrow{color:var(--brand);margin-bottom:16px}
.process h2{font-size:clamp(32px,3.6vw,50px)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.step{border-top:2px solid var(--ink);padding-top:22px}
.step .num{font-family:'Bitter',serif;font-size:15px;color:var(--brand);letter-spacing:.12em;display:block;margin-bottom:12px}
.step h3{font-size:21px;font-weight:500;margin-bottom:10px}
.step p{font-size:14px;color:var(--ink-soft)}

/* service area */
.area{background:var(--ink);color:var(--paper);padding:100px 0}
.area .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.area .eyebrow{color:var(--sand);margin-bottom:16px}
.area h2{font-size:clamp(30px,3.2vw,44px);margin-bottom:22px}
.area p{color:rgba(248,245,236,.78);font-size:15px;max-width:44ch;margin-bottom:26px}
.area .hq{border-left:2px solid var(--brand);padding-left:18px;font-size:14px;color:rgba(248,245,236,.88)}
.area .hq b{display:block;font-family:'Bitter',serif;font-size:17px;font-weight:500;color:#fff;margin-bottom:2px}
.cities{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;list-style:none}
.cities li{padding:13px 2px;border-bottom:1px solid var(--line-light);font-size:15px;color:rgba(248,245,236,.92);font-family:'Bitter',serif}
.cities a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.cities a:hover{border-bottom-color:#fff}

/* ---------- service-area map -----------------------------------------
   Inline SVG, drawn in the theme's own variables so it follows the
   palette (including high-contrast mode) instead of being a picture of
   somebody else's map. Every color below is a custom property for that
   reason -- do not hardcode a hex in here. */
.area-map-wrap{grid-column:1/-1;margin:56px 0 0}
.area-map-wrap figcaption{margin-top:14px;font-size:13px;color:var(--stone)}
.area .area-map-wrap figcaption{color:rgba(248,245,236,.6)}
.area .area-map-wrap figcaption a{color:var(--sand);border-bottom:1px solid currentColor}
/* The map is portrait (the territory runs Sheboygan to the Door tip), so it
   is centered at its intrinsic ratio rather than stretched to the column.
   The SVG carries width/height attributes for exactly this reason — without
   them, width:100% letterboxes it inside a band of empty background. */
.area-map{width:auto;max-width:100%;height:auto;max-height:660px;display:block;margin:0 auto;background:var(--paper-warm);border:1px solid var(--line)}
.area .area-map{background:var(--navy-deep);border-color:var(--line-light)}
/* Surrounding counties, state lines and the shaded service area. */
.am-context path{fill:#e4dfd0;stroke:var(--paper-warm);stroke-width:.9}
.area .am-context path{fill:#243029;stroke:var(--navy-deep)}
.am-state path{fill:none;stroke:rgba(34,48,42,.3);stroke-width:1.6}
.area .am-state path{stroke:rgba(241,209,157,.28)}
.am-service path{fill:var(--brand);fill-opacity:.13;stroke:var(--brand);stroke-width:1.6;stroke-linejoin:round}
.area .am-service path{fill-opacity:.26;stroke:#a8562c}

/* Highway corridors. Deliberately quiet: they are there to orient somebody
   who knows the area, not to compete with the shading or the town names. */
.am-roads path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.am-interstate{stroke:rgba(34,48,42,.34);stroke-width:2.6}
.am-highway{stroke:rgba(34,48,42,.22);stroke-width:1.8;stroke-dasharray:7 5}
.area .am-interstate{stroke:rgba(241,209,157,.5)}
.area .am-highway{stroke:rgba(241,209,157,.3)}
.am-route-labels rect{fill:var(--paper-warm);stroke:rgba(34,48,42,.28);stroke-width:1}
.am-route-labels text{font-family:'Barlow',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;fill:var(--ink-soft)}
.area .am-route-labels rect{fill:var(--navy-deep);stroke:rgba(241,209,157,.45)}
.area .am-route-labels text{fill:rgba(241,209,157,.85)}

/* County names: ours in brand/sand, the neighbors faint so they read as
   context rather than as somewhere we work. */
.am-county-labels text{font-family:'Barlow',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.16em;fill:var(--brand);fill-opacity:.78}
.area .am-county-labels text{fill:var(--sand);fill-opacity:.8}
.am-ctx-labels text{font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;fill:var(--stone);fill-opacity:.6}
.area .am-ctx-labels text{fill:rgba(248,245,236,.3);fill-opacity:1}

/* Towns in three tiers: the four with pages of their own, other towns in
   the service area, and towns outside it. paint-order puts the halo behind
   the glyph so a name stays readable wherever it lands. */
.am-towns text{dominant-baseline:middle;paint-order:stroke;stroke:var(--paper-warm);stroke-width:3.5px;stroke-linejoin:round}
.area .am-towns text{stroke:var(--navy-deep)}
.am-t1 circle{fill:var(--brand);stroke:#fff;stroke-width:2.5}
.area .am-t1 circle{fill:var(--sand);stroke:var(--navy-deep)}
.am-t1 text{font-family:'Bitter',Georgia,serif;font-size:21px;fill:var(--ink)}
.area .am-t1 text{fill:#fff}
.am-t2 circle{fill:var(--ink);stroke:#fff;stroke-width:1.5}
.area .am-t2 circle{fill:rgba(248,245,236,.85);stroke:var(--navy-deep)}
.am-t2 text{font-family:'Barlow',sans-serif;font-size:13.5px;font-weight:500;fill:var(--ink-soft)}
.area .am-t2 text{fill:rgba(248,245,236,.9)}
.am-t3 circle{fill:none;stroke:var(--stone);stroke-width:1.5}
.area .am-t3 circle{stroke:rgba(248,245,236,.4)}
.am-t3 text{font-family:'Barlow',sans-serif;font-size:12.5px;fill:var(--stone)}
.area .am-t3 text{fill:rgba(248,245,236,.45)}
html.a11y-contrast .am-service path{fill-opacity:.3!important}

/* ---------- service-area index ---------- */
.areas-page{padding:80px 0 90px}
.areas-page .area-map-wrap{margin:0 0 46px}
.area-intro{max-width:70ch}
.area-intro p{color:var(--ink-soft);margin-bottom:16px}
.area-h2{font-size:clamp(26px,2.6vw,34px);margin:56px 0 8px}
.area-sub{color:var(--ink-soft);max-width:70ch;margin-bottom:26px}
.area-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.area-card{display:flex;flex-direction:column;background:var(--ink);color:#fff;padding:26px 24px;position:relative;transition:background .25s ease}
.area-card:hover{background:var(--ink-2)}
.area-card-name{font-family:'Bitter',Georgia,serif;font-size:25px;font-weight:500;line-height:1.15}
.area-card-county{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);font-weight:600;margin-top:8px}
.area-card-go{margin-top:20px;color:var(--sand);font-size:20px;line-height:1}
.county-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.county{background:var(--paper);border:1px solid var(--line);padding:24px 22px}
.county h3{font-size:18px;font-weight:500;margin-bottom:8px}
.county p{font-size:14px;line-height:1.7;color:var(--ink-soft)}

/* ---------- about ----------
   Shares the two-column frame and the sidebar with the town pages, because
   it is the same job: a body of prose with the trust card alongside it. */
.about-page{padding:80px 0 90px}
.about-page .wrap{display:grid;grid-template-columns:1fr 330px;gap:64px;align-items:start}
.about-main h2{font-size:clamp(24px,2.4vw,32px);margin:46px 0 16px}
.about-main h2:first-child{margin-top:0}
.about-main p{color:var(--ink-soft);margin-bottom:18px;font-size:16px;line-height:1.75}
.about-main a{border-bottom:1px solid var(--line);padding-bottom:1px}
.about-main a:hover{border-bottom-color:var(--brand);color:var(--brand)}
.about-owners{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0 18px}
.about-owners figure{margin:0}
.about-owners img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;display:block}
.about-owners figcaption{padding-top:12px}
.about-owners figcaption b{display:block;font-family:'Bitter',Georgia,serif;font-size:19px;font-weight:500}
.about-owners figcaption span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);font-weight:600}
.about-owners-note{font-size:15px}
.about-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0 8px}
.about-facts div{border-top:1px solid var(--line);padding-top:12px}
.about-facts b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-bottom:4px}
.about-facts span{font-family:'Bitter',Georgia,serif;font-size:17px;color:var(--ink)}

/* ---------- one town ---------- */
.area-page{padding:80px 0 90px}
.area-page .wrap{display:grid;grid-template-columns:1fr 330px;gap:64px;align-items:start}
.area-body p{color:var(--ink-soft);margin-bottom:18px;font-size:16px;line-height:1.75}
.area-main h2{font-size:clamp(24px,2.4vw,32px);margin:46px 0 18px}
.area-services{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.area-services li{background:var(--paper);border:1px solid var(--line)}
.area-services a{display:block;padding:16px 18px;font-family:'Bitter',Georgia,serif;font-size:17px}
.area-services a:hover{background:var(--paper-warm)}
.area-nearby{color:var(--ink-soft);line-height:1.75}
.area-work-link{margin-top:18px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.area-work-link a,.rev-note a,.about-owners-note a{border-bottom:1px solid var(--line);padding-bottom:1px}
.area-work-link a:hover,.rev-note a:hover,.about-owners-note a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.area-faq{padding:22px 0;border-bottom:1px solid var(--line)}
.area-faq h3{font-size:18px;font-weight:500;margin-bottom:8px}
.area-faq p{color:var(--ink-soft);font-size:15px;line-height:1.7}
.area-cta{margin-top:44px;padding:30px 28px;background:var(--paper-warm);border-left:3px solid var(--brand)}
.area-cta p{margin-bottom:18px;color:var(--ink-soft)}
.area-cta .row{display:flex;gap:12px;flex-wrap:wrap}
.area-side{position:sticky;top:110px}
.area-side .card{background:var(--ink);color:var(--paper);padding:30px 26px}
.area-side .card h3{font-size:20px;margin-bottom:16px}
.area-side .card ul{list-style:none;margin-bottom:20px}
.area-side .card li{font-size:14px;color:rgba(248,245,236,.82);padding:8px 0;border-bottom:1px solid var(--line-light)}
.area-side .card li b{font-family:'Bitter',serif;font-size:17px;color:#fff}
.area-side .hours{font-size:13px;color:rgba(248,245,236,.7);margin-bottom:20px;line-height:1.6}
.area-side .hours span{color:var(--stone)}
.area-side .card .btn{width:100%;justify-content:center}
.area-side .card .rev-more{display:block;text-align:center;margin-top:14px;color:var(--sand)}
.area-side .other{background:var(--paper-warm);padding:24px 26px;margin-top:16px}
.area-side .other h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-bottom:12px}
.area-side .other ul{list-style:none}
.area-side .other li{padding:7px 0;font-family:'Bitter',Georgia,serif;font-size:16px}


/* cta band */
.cta{padding:130px 0;text-align:center;position:relative;overflow:hidden;color:#fff}
.cta-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.cta-shade{position:absolute;inset:0;background:rgba(22,31,26,.84)}
.cta .wrap{position:relative}
.cta .eyebrow{color:var(--sand);margin-bottom:20px}
.cta h2{font-size:clamp(34px,4.4vw,60px);max-width:20ch;margin:0 auto 20px;font-weight:300}
.cta h2 em{font-style:italic;font-weight:400}
.cta p{color:rgba(255,255,255,.85);max-width:48ch;margin:0 auto 40px}
.cta .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta .sub{margin-top:26px;font-size:13px;color:rgba(255,255,255,.66);letter-spacing:.06em}

/* form embed zone (MCM360 form builder) */
.form-zone{background:#fff;border:1px solid var(--line);padding:40px;max-width:720px;margin:48px auto 0;text-align:left}
.form-zone h3{font-size:24px;margin-bottom:8px}
.form-zone .form-sub{font-size:14px;color:var(--ink-soft);margin-bottom:24px}
.form-zone .form-intro{font-size:15px;color:var(--ink-soft);margin-bottom:22px}
.form-zone .form-intro p{margin-bottom:12px}
/* Space is held for the form before it arrives. The embed is an async
   third-party script, so without a reservation the page paints short and
   then jumps a few hundred pixels when the fields appear — which is both a
   Core Web Vitals penalty and the thing that makes people mis-tap. */
.form-zone .mcm-form-embed{min-height:420px}

/* ---- the embedded form itself ------------------------------------------
   The MCM360 form builder renders into the normal page, not into an iframe,
   so the theme can style it directly. That matters for ownership: styling
   written here travels with the site and survives the form being rebuilt,
   where styling typed into the portal's Custom CSS box is lost the moment
   somebody starts a new form. Portal-side, only the eight Design tab values
   are set — everything visual past that is here.
   ---------------------------------------------------------------------- */
.form-zone input,.form-zone select,.form-zone textarea{width:100%;min-height:48px;font-size:16px;padding:12px 14px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.form-zone textarea{min-height:130px}
.form-zone input::placeholder,.form-zone textarea::placeholder{color:#98a49a}
.form-zone input:focus,.form-zone select:focus,.form-zone textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.form-zone label{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink);margin-bottom:6px}
.form-zone input[type=checkbox],.form-zone input[type=radio]{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--brand);flex:0 0 auto;margin-top:2px}

/* Consent boxes. The label beside them is legal text, not a field name, so
   it is set smaller, in the softer ink, and it wraps beside the box instead
   of under it. The links have to be visibly links — a carrier reviewing the
   A2P registration is looking for a reachable privacy policy and terms of
   service from the form itself. */
.form-zone .mcm-form-embed label:has(input[type=checkbox]),
.form-zone .mcm-form-embed label:has(input[type=radio]){display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:400;line-height:1.5;color:var(--ink-soft);letter-spacing:0}
.form-zone .mcm-form-embed a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.form-zone .mcm-form-embed a:hover{color:var(--brand-deep)}

.form-zone button,.form-zone input[type=submit]{min-height:52px;width:100%;cursor:pointer;background:var(--brand);color:#fff;border:1px solid var(--brand);font-weight:600;letter-spacing:.04em}
.form-zone button:hover,.form-zone input[type=submit]:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.form-zone iframe{width:100%;border:0}

/* Printed by the theme, not by the form, so it is still there when the
   form is not. */
.form-zone .form-fallback{margin-top:18px;font-size:13px;color:var(--ink-soft)}
.form-zone .form-fallback a{color:var(--brand);font-weight:600}

/* ===== contact page =====
   This two-column layout used to live in a style="" attribute on the
   template. An inline style cannot be overridden by a media query, so on a
   phone the two columns stayed side by side: the page scrolled sideways and
   the form was cut off at the edge of the screen. Anything that has to
   change with screen width belongs in the stylesheet, never in the markup.
   min-width:0 on the children matters too — a grid track will not shrink
   below its content by default, and the embedded form is wide. */
.contact-section{padding:80px 0 100px}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:start}
.contact-grid>*{min-width:0}
.contact-info h2{font-size:30px;margin-bottom:22px}
.contact-lede{color:var(--ink-soft);margin-bottom:26px}
.contact-list{list-style:none}
.contact-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.contact-list li:last-child{border-bottom:0}
.contact-list .tel{color:var(--brand);font-weight:600}
.contact-list .follow{display:block;margin-bottom:10px}
/* Inside the grid the card fills its own column and the column does the
   sizing, so the centring and the 720px cap the card carries elsewhere are
   released here. */
.contact-form{margin:0;max-width:none}

/* ===== social icons ===== */
.social-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.social-row a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.social-row svg{width:20px;height:20px;fill:currentColor;display:block}
.social-row.on-dark a{border-color:rgba(255,255,255,.22);color:rgba(248,245,236,.85)}
.social-row.on-dark a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.f-social{margin-top:22px}

/* ===== service page template ===== */
.svc-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.svc-hero .hero-bg{background-position:center}
.svc-hero .hero-inner{padding:100px 0 56px}
.svc-hero h1{font-size:clamp(38px,5vw,66px);font-weight:300;max-width:16ch}
.svc-hero .crumb{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand);margin-bottom:16px}
.svc-hero p.lede{max-width:54ch;margin-top:20px;color:rgba(255,255,255,.9)}
.svc-main{padding:96px 0}
.svc-main .wrap{display:grid;grid-template-columns:1.6fr .9fr;gap:72px;align-items:start}
.svc-content h2{font-size:clamp(26px,2.8vw,38px);margin:44px 0 18px}
.svc-content h2:first-child{margin-top:0}
.svc-content p{color:var(--ink-soft);margin-bottom:16px;max-width:64ch}
.svc-content ul.includes{list-style:none;margin:24px 0 8px}
.svc-content ul.includes li{padding:14px 0 14px 34px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.svc-content ul.includes li:before{content:"—";position:absolute;left:0;color:var(--brand);font-weight:700}
.faq{margin-top:20px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-family:'Bitter',serif;font-size:18px;padding:16px 0;list-style:none;position:relative;padding-right:36px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;color:var(--brand)}
.faq details[open] summary:after{content:"–"}
.faq .faq-a{padding:0 0 20px;color:var(--ink-soft);font-size:15px;max-width:60ch}
.svc-side{position:sticky;top:110px}
.svc-side .card{background:var(--ink);color:var(--paper);padding:34px}
.svc-side .card .eyebrow{color:var(--sand);margin-bottom:14px}
.svc-side .card h3{font-size:22px;margin-bottom:14px}
.svc-side .card p{font-size:14px;color:rgba(248,245,236,.78);margin-bottom:22px}
.svc-side .card .btn{width:100%;justify-content:center;margin-bottom:10px}
.svc-side .lic-chip{margin-top:14px;font-size:12px;letter-spacing:.08em;color:rgba(248,245,236,.6);text-align:center}
.svc-side .other{margin-top:28px;border:1px solid var(--line);padding:26px}
.svc-side .other h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.svc-side .other li{list-style:none;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.svc-side .other li:last-child{border-bottom:none}
.svc-side .other a:hover{color:var(--brand)}
.svc-gallery{padding:0 0 96px}
.svc-gallery .head{margin-bottom:28px}
.svc-gallery h2{font-size:clamp(24px,2.6vw,34px)}

/* ===== services index page ===== */
.svc-index{padding:80px 0 100px}
.svc-index .head{max-width:720px;margin:0 auto 56px;text-align:center}
.svc-index .head p{color:var(--ink-soft);margin-top:16px}
.svc-index .rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.svc-row{background:#fff;display:grid;grid-template-columns:280px 1fr;gap:0;align-items:stretch}
.svc-row .shot{position:relative;overflow:hidden;background:var(--ink-2);min-height:200px}
.svc-row .shot img{width:100%;height:100%;object-fit:cover}
.svc-row .txt{padding:34px 38px}
.svc-row h2{font-size:26px;margin-bottom:10px}
.svc-row h2 a:hover{color:var(--brand)}
.svc-row p{color:var(--ink-soft);font-size:15px;max-width:60ch;margin-bottom:16px}
.svc-row .go{font-size:13px;font-weight:600;color:var(--brand);border-bottom:1px solid var(--brand);padding-bottom:2px}
.svc-row.no-shot{grid-template-columns:1fr}

/* ===== article hub (rename per client: The Build Log, The Comfort Report...) ===== */
.log-hero{background:var(--ink);color:#fff;padding:90px 0 70px}
.log-hero .eyebrow{color:var(--sand);margin-bottom:16px}
.log-hero h1{font-size:clamp(36px,4.4vw,58px);font-weight:300}
.log-hero p{color:rgba(255,255,255,.78);max-width:52ch;margin-top:16px}
.log-grid{padding:80px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.log-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .25s}
.log-card:hover{box-shadow:0 14px 40px rgba(34,48,42,.1)}
.log-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-warm)}
.log-card .thumb img{width:100%;height:100%;object-fit:cover}
.log-card .body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.log-card .meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.log-card h2{font-size:21px;line-height:1.25}
.log-card h2 a:hover{color:var(--brand)}
.log-card .excerpt{font-size:14px;color:var(--ink-soft)}
.log-card .read{margin-top:auto;font-size:13px;font-weight:600;color:var(--brand)}
.pagination{display:flex;gap:8px;justify-content:center;padding-bottom:90px}
.pagination a,.pagination span{padding:10px 16px;border:1px solid var(--line);font-size:14px}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* single article */
.article-hero{padding:80px 0 40px;max-width:820px;margin:0 auto}
.article-hero .meta{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-bottom:18px}
.article-hero h1{font-size:clamp(32px,4vw,52px);font-weight:400}
.article-feat{max-width:1020px;margin:36px auto 0;padding:0 32px}
.article-feat img{width:100%;max-height:560px;object-fit:cover}
.article-body{max-width:720px;margin:56px auto 80px;padding:0 32px;font-size:17px;line-height:1.75}
.article-body p{margin-bottom:24px;color:#39463e}
.article-body h2{font-size:30px;margin:44px 0 18px}
.article-body h3{font-size:23px;margin:36px 0 14px}
.article-body ul,.article-body ol{margin:0 0 24px 22px}
.article-body li{margin-bottom:8px}
.article-body img{margin:32px 0}
.article-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{border-left:3px solid var(--brand);padding:8px 0 8px 24px;font-family:'Bitter',serif;font-size:21px;margin:32px 0;color:var(--ink)}
.article-cta{background:var(--paper-warm);border:1px solid var(--line);padding:34px;margin:48px 0 0;text-align:center}
.article-cta h3{font-size:24px;margin-bottom:8px}
.article-cta p{font-size:15px;margin-bottom:20px}

/* generic page */
.page-plain{max-width:820px;margin:0 auto;padding:80px 32px 100px}
.page-plain h1{font-size:clamp(34px,4vw,54px);margin-bottom:32px}
.page-plain p{margin-bottom:18px;color:var(--ink-soft)}

/* footer */
footer.site-footer{background:var(--navy-deep);color:#a2ada4;padding:70px 0 36px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.f-grid img{height:112px;width:auto;margin-bottom:20px}
.f-grid h4{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-family:'Barlow',sans-serif}
.f-grid li{list-style:none;padding:5px 0}
.f-grid a:hover{color:#fff}
.f-tag{max-width:34ch;line-height:1.7}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.04em;color:#767f76}
.f-bottom b{color:#a2ada4;font-weight:600}
.f-legal{display:flex;gap:20px}
.f-legal a{color:#a2ada4;text-decoration:underline;text-underline-offset:3px}
.f-legal a:hover{color:#fff}

/* ===== legal pages (privacy policy / terms of service) =====
   Long-form reading, so the measure is narrow, the type is a little
   larger than body copy, and the headings break the wall of text up.
   Nothing decorative — people land here to find one sentence. */
/* thank-you page */
.ty-lead{font-size:19px;color:var(--ink);border-left:3px solid var(--brand);padding-left:18px;margin-bottom:8px}
.ty-lead a{color:var(--brand);font-weight:600}
.ty-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.ty-extra{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}

.legal{padding:70px 0 90px}
.legal .wrap{max-width:74ch}
.legal h2{font-size:clamp(21px,2.2vw,27px);font-weight:400;margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:18px;font-weight:600;margin:26px 0 10px}
.legal p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin-bottom:14px}
.legal p strong{color:var(--ink)}
.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.legal ul,.legal ol{margin:0 0 16px 22px;color:var(--ink-soft);font-size:16px;line-height:1.75}
.legal li{margin-bottom:8px}
.legal-extra{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.legal-foot{margin-top:44px;padding:22px 24px;background:var(--paper-warm);border-left:3px solid var(--brand);font-size:15px}

/* Consent notice under the request-service form. */
.form-consent{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--stone)}
.form-consent a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* ===== photo placeholders =====
   Only used where a slot must hold its shape (hero / CTA backgrounds).
   Gallery and tile slots that cannot resolve a photo are not rendered at
   all — the grid reflows instead of showing an empty black panel. */
.photo-pending{display:block;width:100%;height:100%;min-height:220px;background:
  repeating-linear-gradient(135deg,#26332c 0 14px,#2d4137 14px 28px)}
.g-item .photo-pending{position:absolute;inset:0}
.hero .hero-bg,.cta .cta-bg,.svc-hero .hero-bg{background-color:#26332c}

/* ===== photo lightbox (built into the theme, not a plugin) =====
   Sits above everything including the accessibility button, because while
   it is open it is the only thing on screen. */
html.lb-open,html.lb-open body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;background:rgba(6,9,18,.94);padding:64px 76px;animation:lbIn .2s ease}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-fig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;max-width:100%;max-height:100%;margin:0}
.lb-img{max-width:100%;max-height:calc(100vh - 168px);max-height:calc(100svh - 168px);width:auto;height:auto;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.5);transition:opacity .18s ease}
.lb.is-loading .lb-img{opacity:.25}
.lb-cap{font-family:'Barlow',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);text-align:center}
.lb-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.lb-count{font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.lb-btn{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;line-height:1;transition:background .2s ease,border-color .2s ease}
.lb-btn:hover{background:rgba(255,255,255,.2);border-color:#fff}
.lb-btn[hidden]{display:none}
.lb-x{width:48px;height:48px;border-radius:50%;font-size:30px;padding-bottom:3px}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:32px;padding-bottom:4px}
.lb-prev{left:16px}
.lb-next{right:16px}
html.a11y-contrast .lb{background:#000!important}
html.a11y-contrast .lb-btn{background:#000!important;border-color:#fff!important}
html.a11y-contrast .lb-cap,html.a11y-contrast .lb-count{color:#fff!important}

/* ===== accessibility toolbar (built into the theme, not a plugin) ===== */
/* The chat widget pins itself at z-index 2147483639 — one below the 32-bit
   maximum — so anything meant to stay clickable alongside it has to sit up
   in the same neighbourhood. These two are bottom-LEFT and the chat is
   bottom-RIGHT, so they never actually collide; the high z-index is there
   so the accessibility button is not buried by the widget's backdrop when
   the chat is opened. */
.a11y-fab{position:fixed;left:20px;bottom:20px;z-index:2147483630;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;border:2px solid #fff;box-shadow:0 6px 22px rgba(0,0,0,.32);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.a11y-fab:hover{transform:scale(1.06);background:var(--brand)}
.a11y-fab svg{width:26px;height:26px;fill:currentColor}
.a11y-panel{position:fixed;left:20px;bottom:84px;z-index:2147483631;width:308px;max-width:calc(100vw - 40px);max-height:calc(100vh - 120px);max-height:calc(100svh - 120px);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#22302a;border:1px solid rgba(34,48,42,.16);box-shadow:0 22px 60px rgba(0,0,0,.28);display:none}
.a11y-panel.open{display:block}
.a11y-panel .a11y-head{background:var(--navy);color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.a11y-panel .a11y-head h2{font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.a11y-close{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}
.a11y-body{padding:14px 18px 18px}
.a11y-size{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.a11y-size span{font-size:13px;font-weight:600;flex:1}
.a11y-size button{width:44px;height:44px;border:1px solid rgba(34,48,42,.2);background:#fff;font-size:18px;font-weight:700;cursor:pointer;color:#22302a}
.a11y-size button:hover{background:var(--paper-warm)}
.a11y-size .a11y-level{flex:none;width:auto;font-size:12px;color:#6b7365;min-width:38px;text-align:center}
.a11y-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;text-align:left;padding:11px 12px;margin-bottom:6px;border:1px solid rgba(34,48,42,.14);background:#fff;font-family:'Barlow',sans-serif;font-size:14px;font-weight:500;color:#22302a;cursor:pointer}
.a11y-opt:hover{background:var(--paper-warm)}
.a11y-opt[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.a11y-opt .dot{width:10px;height:10px;border:1px solid currentColor;flex:none;border-radius:50%}
.a11y-opt[aria-pressed="true"] .dot{background:#fff}
.a11y-reset{width:100%;min-height:46px;margin-top:8px;padding:12px;background:var(--brand);color:#fff;border:none;font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.a11y-reset:hover{background:var(--brand-deep)}
.a11y-foot{font-size:11px;color:#6b7365;margin-top:12px;line-height:1.5}
@media(max-width:620px){
  .a11y-fab{left:14px;bottom:14px;width:48px;height:48px}
  .a11y-panel{left:14px;right:14px;bottom:70px;width:auto;max-width:none}
}

/* accessibility modes */
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px}
html.a11y-font *:not(.a11y-fab svg){font-family:Verdana,Tahoma,'DejaVu Sans',sans-serif!important;letter-spacing:normal!important;font-style:normal!important}
html.a11y-space p,html.a11y-space li,html.a11y-space h1,html.a11y-space h2,html.a11y-space h3,html.a11y-space span,html.a11y-space a{line-height:2!important;letter-spacing:.06em!important;word-spacing:.14em!important}
html.a11y-still *,html.a11y-still *:before,html.a11y-still *:after{animation:none!important;transition:none!important}
html.a11y-still{scroll-behavior:auto!important}
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 2l30 18-13 3 8 15-6 3-8-15-11 8z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 2,auto!important}
html.a11y-contrast{--paper:#fff;--paper-warm:#fff;--ink:#000;--ink-soft:#000;--stone:#1a1a1a;--brand:#8a3a00;--brand-deep:#63290a;--line:#000;--sand:#ffe9a8}
html.a11y-contrast body{background:#fff;color:#000}
html.a11y-contrast .util,html.a11y-contrast header.site-nav,html.a11y-contrast .services,html.a11y-contrast .area,html.a11y-contrast .log-hero,html.a11y-contrast .svc-side .card,html.a11y-contrast footer.site-footer,html.a11y-contrast .mobile-drawer,html.a11y-contrast nav.links .sub-menu,html.a11y-contrast .svc,html.a11y-contrast .svc.plain{background:#000!important;color:#fff!important}
html.a11y-contrast .hero-shade,html.a11y-contrast .cta-shade{background:rgba(0,0,0,.88)!important}
html.a11y-contrast .svc.photo:after{background:rgba(0,0,0,.72)!important}
html.a11y-contrast .svc.plain:after{display:none!important}
html.a11y-contrast .g-item .cap{background:#000!important}
html.a11y-contrast .util,html.a11y-contrast .f-bottom,html.a11y-contrast footer.site-footer,html.a11y-contrast .area p,html.a11y-contrast .svc p,html.a11y-contrast .services .head p{color:#fff!important}
html.a11y-contrast .process,html.a11y-contrast .article-cta,html.a11y-contrast .log-card,html.a11y-contrast .form-zone{background:#fff!important;border-color:#000!important}
html.a11y-contrast .btn-solid{background:#8a3a00!important;color:#fff!important}
html.a11y-contrast .btn-ghost{border-color:#fff!important;color:#fff!important}
html.a11y-contrast .a11y-panel,html.a11y-contrast .a11y-opt{background:#fff!important;color:#000!important;border-color:#000!important}
html.a11y-contrast .a11y-opt[aria-pressed="true"]{background:#000!important;color:#fff!important}

/* ============================================================
   RESPONSIVE — the phone is the primary screen, not the fallback.
   Most people who land here are standing in a hot house with a phone in
   their hand. Everything below is sized so nothing needs pinching, every
   tap target clears 44px, and the call button is never more than a thumb
   away. Desktop inherits from these, not the other way round.
   ============================================================ */

/* --- tablet / small laptop --- */
@media(max-width:1000px){
  .wrap{padding:0 24px}
  .site-nav .wrap{padding-top:11px;padding-bottom:11px;gap:12px}
  nav.links{display:none}
  .nav-toggle{display:block;padding:11px 12px}
  .nav-open{overflow:hidden}

  /* ---- MOBILE MENU ------------------------------------------------------
     On a phone the menu is a full-screen panel, not a box hanging off the
     bottom of the header bar. Two reasons: it opens all the way into view no
     matter how far down the page you are, and nothing further down the page
     can print on top of it.
     The blur on the bar is switched off here on purpose. A blurred bar
     becomes the frame that everything inside it gets measured against, so
     the open menu was sizing itself to the bar instead of the screen — that
     is what pushed the bottom of it behind the next section. It also breaks
     the sticky bar on iPhones, which is why the bar vanished on tap.
     --nav-h is the live height of the bar, written in by theme.js, so the
     panel starts exactly under it at any text size.
     --------------------------------------------------------------------- */
  header.site-nav{background:#0f1424;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.nav-open header.site-nav{position:fixed;top:0;left:0;right:0;z-index:9200}
  .mobile-drawer{position:fixed;top:var(--nav-h,64px);left:0;right:0;bottom:0;z-index:9199;background:#161f1a;padding-bottom:30px}
  .intro .wrap,.area .wrap,.svc-main .wrap{grid-template-columns:1fr;gap:52px}
  .area-page .wrap,.about-page .wrap{grid-template-columns:1fr;gap:48px}
  .about-page{padding:56px 0 70px}
  .area-side{position:static}
  .area-cards{grid-template-columns:repeat(2,1fr)}
  .county-grid{grid-template-columns:repeat(2,1fr)}
  .areas-page,.area-page{padding:56px 0 70px}
  .area-map-wrap{margin-top:8px}
  /* Stack, and lose the 72px gutter that only made sense side by side. */
  .contact-grid{grid-template-columns:1fr;gap:46px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gallery,.log-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:40px}
  .intro-photo img{height:420px}
  /* The pair was a fixed-height box that stayed the same height while the
     column got narrower, so below the desktop layout the box turned
     landscape while the portraits are square-ish. object-fit:cover then
     trimmed the top and bottom of every photo, and a head is what sits at
     the top. Tying the box to a ratio instead of a pixel height keeps it
     square at every width, so cover trims the sides, which have nothing
     in them. height:auto is required — it releases the 600px on the base
     rule so aspect-ratio can size the box. */
  .intro-photo.pair img{height:auto;aspect-ratio:1/1}
  .intro-photo.pair figure:last-child{margin-top:34px}
  .intro-photo:before{display:none}   /* the offset frame hangs off-canvas */
  .svc-side{position:static;margin-top:8px}
  .svc-row{grid-template-columns:220px 1fr}
  .intro,.services,.work,.process{padding:84px 0}
  .area{padding:76px 0}
  .cta{padding:96px 0}
  .hero-inner{padding:104px 0 60px}
  .article-feat,.article-body{padding:0 24px}
}

/* --- phone --- */
@media(max-width:760px){
  .wrap{padding:0 20px}
  /* The whole bar goes on a phone. The trust line inside it was already
     hidden at this width, and the phone number moved into the button, so
     what is left is an empty navy stripe eating the top 35px of the most
     valuable screen on the site. */
  .util{display:none}

  /* Room at the bottom of the page for the two things pinned over it: the
     chat launcher bottom-right and the accessibility button bottom-left.
     Without this the last line of the footer sits underneath them and the
     legal links — which the carriers check for — become untappable. */
  footer.site-footer{padding-bottom:104px}
  .logo img{height:76px}
  /* Two lines, so the button gets taller rather than wider. The number
     sets the width either way and "CALL / TEXT" is shorter than it, so
     nothing on the bar has to give up room for the label. */
  .nav-cta{padding:8px 14px;min-height:52px}
  .nav-cta-label{font-size:9px;letter-spacing:.12em}
  .nav-cta-num{font-size:14px}
  .nav-toggle{min-height:46px}

  .hero{min-height:78vh;min-height:76svh}
  /* On a phone the type runs the full width, so a left-side scrim is the wrong
     shape. Drop the angled pass and carry it all vertically instead. */
  .hero-shade{background:
    linear-gradient(180deg,rgba(22,31,26,.6) 0%,rgba(22,31,26,.5) 22%,rgba(22,31,26,.66) 52%,rgba(22,31,26,.9) 100%)}
  .hero-inner{padding:70px 0 46px}
  .hero h1{font-size:clamp(34px,9.2vw,46px);max-width:none}
  .hero .eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:14px}
  .hero p.lede{font-size:16px;margin:20px 0 28px}
  .hero-strip{margin-top:36px;padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
  .hero-strip b{font-size:17px}

  .intro,.services,.work,.process{padding:64px 0}
  .area{padding:60px 0}
  .cta{padding:72px 0}
  .intro .wrap,.area .wrap,.svc-main .wrap{gap:40px}
  .intro-photo img{height:330px}
  .intro-photo.pair{gap:14px}
  .intro-photo.pair img{height:auto;aspect-ratio:1/1}
  .intro-photo.pair figure:last-child{margin-top:24px}
  .intro-facts{gap:24px;margin-top:28px;padding-top:24px}
  .services .head,.process .head,.work .head,.area .head{margin-bottom:38px;gap:18px}

  section[id]{scroll-margin-top:76px}
  .svc-grid,.steps{grid-template-columns:1fr}
  .svc{min-height:290px}
  .svc-body{padding:26px 22px}
  .svc.plain:before{left:22px;top:26px}
  .svc p{max-width:none}

  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:190px;gap:10px}
  .gallery-teaser,.work-page .gallery{grid-auto-rows:190px}
  .g-item .cap{padding:26px 12px 11px;font-size:12px;letter-spacing:.03em}
  /* On a phone the + never gets a hover, so show it always. */
  .g-zoom{opacity:1;transform:scale(1);width:30px;height:30px;top:9px;right:9px}

  /* Arrows drop to the bottom corners: thumbs reach them, and they stop
     covering the middle of the photo on a narrow screen. */
  .lb{padding:60px 12px 96px}
  .lb-img{max-height:calc(100vh - 200px);max-height:calc(100svh - 200px)}
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none;width:56px;height:56px}
  .lb-prev{left:20px}
  .lb-next{right:20px}
  .lb-cap{font-size:12px}
  .work-actions{margin-top:34px}

  .reviews-band{padding:60px 0}
  .reviews-band .head{margin-bottom:34px}
  .rev-grid{columns:2}
  .reviews-page{padding:56px 0 70px}
  .rev-embed[data-lazy-embed]{min-height:260px}

  .cities{grid-template-columns:1fr 1fr;gap:0 20px}
  .area-cards{grid-template-columns:1fr}
  .county-grid{grid-template-columns:1fr}
  .area-services{grid-template-columns:1fr}
  .about-facts{grid-template-columns:1fr}
  /* On a phone the map is about 340px wide. Everything scales up, and the
     smallest tier of towns is dropped entirely -- twenty labels at that
     size is a smudge, not a map. */
  .am-t1 text{font-size:30px}
  .am-t2 text{font-size:21px}
  .am-t3,.am-ctx-labels,.am-route-labels{display:none}
  .am-county-labels text{font-size:19px}
  .am-t1 circle{r:11}
  .am-t2 circle{r:7}
  .cities li{padding:11px 2px;font-size:14px}

  .log-hero{padding:56px 0 44px}
  .log-grid{grid-template-columns:1fr;padding:56px 0;gap:26px}
  .pagination a,.pagination span{min-height:46px;display:inline-flex;align-items:center}

  .svc-hero{min-height:46vh;min-height:44svh}
  .svc-hero .hero-inner{padding:78px 0 42px}
  .svc-main{padding:56px 0}
  .svc-content h2{margin:34px 0 14px}
  .svc-content p,.faq .faq-a{max-width:none}

  .svc-index{padding:56px 0 72px}
  .svc-index .head{margin-bottom:34px}
  .svc-row{grid-template-columns:1fr}
  .svc-row .shot{min-height:200px}
  .svc-row .txt{padding:26px 22px}
  .svc-row p{max-width:none}

  .work-page{padding:56px 0 72px}
  .work-intro{margin-bottom:34px}
  .work-note{margin-top:40px}

  .f-grid{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:40px}
  .f-grid li{padding:9px 0}
  .f-grid img{height:88px}
  footer.site-footer{padding:56px 0 104px}

  .article-hero{padding:56px 0 26px}
  .article-body{margin:34px auto 60px;font-size:16.5px}
  .article-body h2{font-size:26px;margin:34px 0 14px}
  .article-body h3{font-size:20px}
  .article-cta{padding:26px 20px}
  .form-zone{padding:24px 20px;margin-top:36px}
  .contact-section{padding:48px 0 64px}
  .contact-info h2{font-size:25px}
  .contact-grid{gap:38px}
  .page-plain{padding:56px 20px 72px}
}

/* --- small phone --- */
@media(max-width:560px){
  .hero{min-height:74vh;min-height:72svh}
  .btn{padding:15px 22px;min-height:52px}
  /* Stacked, full-width buttons — a 50/50 split row puts both targets
     under 44px wide on a 360px screen. */
  .hero-ctas,.cta .row{flex-direction:column;align-items:stretch}
  .hero-ctas .btn,.cta .row .btn,.work-actions .btn,.article-cta .btn{width:100%;justify-content:center;margin:0 0 10px}
  .hero-strip{grid-template-columns:1fr;gap:15px}
  .intro-facts{gap:18px}
  .intro-facts div{min-width:46%}
  /* On a real phone the two columns are ~150px wide. A square box there is
     a stamp, so the box goes slightly portrait to buy back some height.
     Still taller than it is wide, so the crop stays on the sides. */
  .intro-photo.pair img{height:auto;aspect-ratio:4/5}
  .gallery{grid-template-columns:1fr;grid-auto-rows:230px}
  /* One column. Two columns of running text at 360px is unreadable, and
     this rule sits in the 560 block rather than the 620 block because the
     media queries in this file are not in descending order -- 620 is
     declared before 1000 and 760, so anything set there loses. */
  .rev-grid{columns:1}
  .rev{padding:22px 20px}
  .rev.clamp .rev-body{max-height:240px}
  .gallery-teaser,.work-page .gallery{grid-auto-rows:230px}
  .cities{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:28px}
  .f-bottom{flex-direction:column;gap:10px}
  .legal{padding:48px 0 64px}
  .legal h2{margin:34px 0 12px}
  .legal-foot{padding:18px 18px}
  .svc-side .card,.svc-side .other{padding:24px 20px}
  .services .head p,.area p,.cta p,.work .head p{max-width:none}
  /* An 18px glyph in a 44px box reads as a speck at arm's length on a
     phone. Bigger box, and a much bigger glyph inside it -- the tap target
     was already fine, it was the icon that was invisible. */
  .social-row{gap:12px}
  .social-row a{width:56px;height:56px}
  .social-row svg{width:28px;height:28px}
}

/* --- very small / large text --- */
@media(max-width:400px){
  .wrap{padding:0 16px}
  .nav-cta{padding:7px 10px}
  .nav-cta-label{font-size:8px;letter-spacing:.1em}
  .nav-cta-num{font-size:13px}
  .logo img{height:58px}
  .mobile-drawer a{padding-left:18px;padding-right:18px}
  .mobile-drawer .sub-menu a{padding-left:36px}
  .svc-body{padding:22px 18px}
  .svc.plain:before{left:18px;top:22px}
  .svc-row .txt{padding:22px 18px}
}