/* Third Pig Masonry design system, tp- prefix. Slate, tan and brick from the shirt logo. v4 adds the job photos and David's own logo, v5 fits the eight item menu, v6 fixes from the photo review. */
:root{
  --tp-teal:#3A4852; --tp-teal-dk:#27323A; --tp-teal-lt:#ECE6D8;
  --tp-orange:#B5532F; --tp-orange-dk:#8C3E22;
  --tp-ink:#1F282F; --tp-slate:#34404A; --tp-text:#2A2E31; --tp-muted:#656A6D;
  --tp-cream:#EFE5CE; --tp-line:#E4DDCE; --tp-white:#ffffff;
  --tp-radius:14px;
}
body .tp-page{ color:var(--tp-text); font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; line-height:1.65; }
body .tp-page *{ box-sizing:border-box; }
body .tp-page h1,body .tp-page h2,body .tp-page h3,body .tp-page h4{ font-family:"Rubik","Inter",system-ui,sans-serif; color:var(--tp-ink); letter-spacing:-.01em; margin:0; }
body .tp-page h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:800; line-height:1.08; margin:0 0 .5em; }
body .tp-page h3{ font-size:1.22rem; font-weight:700; line-height:1.25; }
body .tp-page p{ margin:0 0 1em; }
body .tp-page a{ color:var(--tp-teal); }
body .tp-page .lead{ font-size:1.18rem; line-height:1.6; color:#444B50; }
body .tp-page ul,body .tp-page ol{ padding-left:1.2em; margin:0 0 1em; }
body .tp-page li{ margin:.3em 0; }

/* release YOOtheme's 1200 container, the tp-wrap carries the measure */
body main.tm-main.uk-section{ padding-top:0; padding-bottom:0; }
body .tm-main > .uk-container{ max-width:none; padding-left:0; padding-right:0; }

/* rhythm */
.tp-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.tp-narrow{ max-width:780px; }
.tp-sec{ padding:84px 0; }
.tp-sec-sm{ padding:42px 0; }
@media (max-width:640px){ .tp-sec{ padding:56px 0; } }
.tp-alt{ background:#F7F4EC; }
.tp-cream{ background:var(--tp-cream); }

/* signature eyebrow: orange dotted dash, from the logo's dot rows */
.tp-label{ display:inline-flex; align-items:center; gap:12px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:var(--tp-orange); font-family:"Rubik","Inter",sans-serif; margin-bottom:14px; }
.tp-label::before{ content:""; width:28px; height:3px; border-radius:2px; background:var(--tp-orange); flex-shrink:0; }
.tp-label.on-dark{ color:var(--tp-cream); }
.tp-rule{ position:relative; height:2px; background:var(--tp-line); margin:24px 0; }
.tp-rule::before{ content:""; position:absolute; left:0; top:0; height:2px; width:90px; background:var(--tp-orange); }

/* buttons */
.tp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border-radius:999px; font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:1rem; letter-spacing:.02em; text-decoration:none!important; transition:transform .15s,background .2s,box-shadow .2s,color .2s; border:2px solid transparent; cursor:pointer; }
.tp-btn-primary{ background:var(--tp-orange); color:#fff!important; }
.tp-btn-primary:hover,.tp-btn-primary:focus{ background:var(--tp-orange-dk); color:#fff!important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(181,83,47,.32); }
.tp-btn-ghost{ background:transparent; color:#fff!important; border-color:rgba(255,255,255,.45); }
.tp-btn-ghost:hover,.tp-btn-ghost:focus{ background:#fff; color:var(--tp-ink)!important; border-color:#fff; transform:translateY(-2px); }
.tp-btn-teal{ background:var(--tp-teal); color:#fff!important; }
.tp-btn-teal:hover,.tp-btn-teal:focus{ background:var(--tp-teal-dk); color:#fff!important; transform:translateY(-2px); }
.tp-btn-outline{ background:transparent; color:var(--tp-teal)!important; border-color:var(--tp-teal); }
.tp-btn-outline:hover,.tp-btn-outline:focus{ background:var(--tp-teal); color:#fff!important; }
.tp-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:2em; }

/* hero */
.tp-hero{ position:relative; overflow:hidden; background:var(--tp-ink); background-image:linear-gradient(115deg,#1E272E 0%,var(--tp-teal) 55%,#4A5964 100%); padding:110px 0 0; color:#fff; }
.tp-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(244,237,218,.16) 1.4px,transparent 1.6px); background-size:26px 26px; opacity:.55; pointer-events:none; }
.tp-hero::after{ content:""; position:absolute; right:-140px; top:-80px; width:640px; height:640px; background:url('/wp-content/uploads/tp/third-pig-badge-transparent.png') center/contain no-repeat; opacity:.13; pointer-events:none; }
.tp-hero .tp-wrap{ position:relative; z-index:1; }
.tp-hero .tp-label{ color:var(--tp-cream); }
.tp-hero h1{ color:#fff; margin:0; line-height:1; letter-spacing:-.02em; }
.tp-hero h1 .l1{ display:block; font-weight:900; font-size:clamp(2.4rem,6.2vw,4.6rem); }
.tp-hero h1 .l2{ display:block; font-weight:800; font-size:clamp(1.15rem,2.6vw,1.8rem); color:var(--tp-orange); margin-top:.3em; }
.tp-hero p{ color:#ECE8DF; max-width:620px; margin:1.4em 0 0; font-size:1.15rem; line-height:1.6; }
.tp-hero .tp-btn-ghost{ border-color:rgba(244,237,218,.55); }
.tp-ticker{ position:relative; z-index:1; margin-top:56px; border-top:1px solid rgba(255,255,255,.18); display:flex; flex-wrap:wrap; gap:10px 28px; padding:22px 0 30px; }
.tp-ticker span,.tp-ticker a{ color:#DDD8CC; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.tp-ticker span::before,.tp-ticker a::before{ content:""; width:7px; height:7px; background:var(--tp-orange); border-radius:50%; }
.tp-hero.sm{ padding:84px 0 64px; }
.tp-hero.sm h1 .l1{ font-size:clamp(2rem,4.8vw,3.4rem); }
.tp-hero.sm::after{ width:460px; height:460px; right:-120px; top:-40px; }
.tp-crumb{ display:flex; gap:8px; flex-wrap:wrap; font-size:.82rem; color:#CFC9BB; margin-bottom:18px; }
.tp-crumb a{ color:#CFC9BB; text-decoration:none; }
.tp-crumb span::before{ content:"/"; margin-right:8px; color:var(--tp-orange); }

/* promise band */
.tp-band{ background:var(--tp-ink); color:#fff; }
.tp-band .row{ display:grid; grid-template-columns:repeat(3,1fr); }
.tp-band .cell{ padding:30px 26px; border-left:1px solid rgba(255,255,255,.1); }
.tp-band .cell:first-child{ border-left:0; }
.tp-band .k{ font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:1.15rem; color:#fff; display:flex; align-items:center; gap:10px; }
.tp-band .k::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--tp-orange); flex:0 0 auto; }
.tp-band .d{ color:#C2BCAE; margin-top:.4em; font-size:.95rem; }
@media (max-width:760px){ .tp-band .row{ grid-template-columns:1fr; } .tp-band .cell{ border-left:0; border-top:1px solid rgba(255,255,255,.1); padding:20px 24px; } .tp-band .cell:first-child{ border-top:0; } }

/* two column */
.tp-two{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
@media (max-width:900px){ .tp-two{ grid-template-columns:1fr; gap:32px; } }
.tp-card{ background:#fff; border:1px solid var(--tp-line); border-radius:var(--tp-radius); padding:28px; }
.tp-card.teal{ background:var(--tp-teal); border-color:var(--tp-teal); color:#fff; }
.tp-card.teal h3{ color:#fff; }
.tp-card.teal p{ color:#DDD8CC; }
.tp-card.teal .tp-phone{ color:#fff; }
.tp-card.cream{ background:var(--tp-cream); border-color:#DDCFAE; }
.tp-phone{ display:inline-block; font-family:"Rubik","Inter",sans-serif; font-weight:900; font-size:1.7rem; color:var(--tp-ink); text-decoration:none!important; line-height:1.1; margin:.2em 0 .5em; }
.tp-phone:hover{ color:var(--tp-orange); }

/* check list */
.tp-checks{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.tp-checks li{ position:relative; padding-left:32px; margin:0; }
.tp-checks li::before{ content:""; position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%; background:var(--tp-teal); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E"); background-size:14px; background-position:center; background-repeat:no-repeat; }
.tp-checks.one{ grid-template-columns:1fr; }
@media (max-width:640px){ .tp-checks{ grid-template-columns:1fr; } }

/* services grid */
.tp-svc{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px; }
.tp-svc a{ display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--tp-line); border-radius:var(--tp-radius); padding:26px 24px 24px; text-decoration:none!important; color:var(--tp-text); transition:transform .18s,box-shadow .2s,border-color .2s; position:relative; overflow:hidden; }
.tp-svc a::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--tp-teal); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.tp-svc a:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(31,40,47,.12); border-color:#D8D2C4; }
.tp-svc a:hover::before{ transform:scaleX(1); }
.tp-svc .ic{ width:46px; height:46px; border-radius:12px; background:var(--tp-teal-lt); display:flex; align-items:center; justify-content:center; color:var(--tp-teal); }
.tp-svc .ic svg{ width:26px; height:26px; }
.tp-svc h3{ font-size:1.08rem; }
.tp-svc .desc{ color:var(--tp-muted); font-size:.95rem; line-height:1.5; }
.tp-svc .arw{ margin-top:auto; color:var(--tp-orange); font-weight:800; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; font-family:"Rubik","Inter",sans-serif; }
@media (max-width:1000px){ .tp-svc{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tp-svc{ grid-template-columns:1fr; } }

/* why us dark */
.tp-why{ background:var(--tp-ink); color:#DAD5C9; position:relative; overflow:hidden; }
.tp-why::after{ content:""; position:absolute; left:-160px; bottom:-200px; width:560px; height:560px; background:url('/wp-content/uploads/tp/third-pig-badge-transparent.png') center/contain no-repeat; opacity:.07; pointer-events:none; }
.tp-why .tp-wrap{ position:relative; z-index:1; }
.tp-why h2,.tp-why h3{ color:#fff; }
.tp-why .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px; margin-top:36px; }
.tp-why .item{ display:grid; grid-template-columns:44px 1fr; gap:16px; }
.tp-why .tick{ width:44px; height:44px; border-radius:12px; background:rgba(181,83,47,.16); border:1px solid rgba(181,83,47,.4); display:flex; align-items:center; justify-content:center; color:var(--tp-orange); font-family:"Rubik","Inter",sans-serif; font-weight:900; }
.tp-why p{ color:#C2BCAE; margin:.4em 0 0; }
@media (max-width:760px){ .tp-why .grid{ grid-template-columns:1fr; } }

/* steps */
.tp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; counter-reset:step; }
.tp-steps .st{ background:#fff; border:1px solid var(--tp-line); border-radius:var(--tp-radius); padding:28px 24px; }
.tp-steps .st::before{ counter-increment:step; content:"0" counter(step); display:block; font-family:"Rubik","Inter",sans-serif; font-weight:900; font-size:2rem; color:var(--tp-orange); line-height:1; margin-bottom:12px; }
@media (max-width:800px){ .tp-steps{ grid-template-columns:1fr; } }

/* area pills */
.tp-areas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.tp-areas a{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; background:#fff; border:1px solid var(--tp-line); color:var(--tp-ink); font-weight:700; text-decoration:none!important; transition:all .2s; }
.tp-areas a::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--tp-orange); }
.tp-areas a:hover{ background:var(--tp-teal); border-color:var(--tp-teal); color:#fff; }
.tp-areas a.now{ background:var(--tp-ink); border-color:var(--tp-ink); color:#fff; }

/* town cards */
.tp-towns{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.tp-towns a{ display:block; background:#fff; border:1px solid var(--tp-line); border-radius:var(--tp-radius); padding:26px; text-decoration:none!important; color:var(--tp-text); transition:transform .18s,box-shadow .2s; }
.tp-towns a:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(31,40,47,.12); }
.tp-towns .st{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tp-orange); font-weight:800; font-family:"Rubik","Inter",sans-serif; }
.tp-towns h3{ margin:.3em 0 .4em; }
.tp-towns p{ color:var(--tp-muted); font-size:.95rem; margin:0; }
@media (max-width:900px){ .tp-towns{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tp-towns{ grid-template-columns:1fr; } }

/* FAQ, restyled UIkit accordion */
.tp-faq .uk-accordion{ margin-top:28px; border-top:1px solid var(--tp-line); }
.tp-faq .uk-accordion > li{ margin:0; border-bottom:1px solid var(--tp-line); }
.tp-faq .uk-accordion-title{ font-family:"Rubik","Inter",sans-serif; font-weight:700; font-size:1.08rem; color:var(--tp-ink); padding:20px 44px 20px 0; position:relative; text-decoration:none; }
.tp-faq .uk-accordion-title::before{ content:""; position:absolute; right:0; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:var(--tp-teal-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2316707C' stroke-width='2.2' stroke-linecap='round' d='M10 5v10M5 10h10'/%3E%3C/svg%3E") center/12px no-repeat; }
.tp-faq .uk-open > .uk-accordion-title::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2316707C' stroke-width='2.2' stroke-linecap='round' d='M5 10h10'/%3E%3C/svg%3E"); }
.tp-faq .uk-accordion-content{ margin:0; padding:0 0 22px; color:var(--tp-text); }

/* CTA band */
.tp-cta{ background:var(--tp-orange); color:#fff; text-align:center; position:relative; overflow:hidden; }
.tp-cta .tp-wrap{ position:relative; z-index:1; }
.tp-cta h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.7rem); }
.tp-cta p{ color:#F6E7DF; font-size:1.15rem; max-width:640px; margin:0 auto; }
.tp-cta .tp-actions{ justify-content:center; }
.tp-cta .tp-btn-primary{ background:var(--tp-ink); }
.tp-cta .tp-btn-primary:hover{ background:#12181D; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.tp-cta .tp-btn-ghost{ border-color:rgba(255,255,255,.7); }
.tp-cta .tp-btn-ghost:hover{ color:var(--tp-orange-dk)!important; }

/* estimate: form + info */
.tp-estimate .tp-two{ grid-template-columns:1.15fr 1fr; }
.tp-formwrap{ background:#fff; border:1px solid var(--tp-line); border-radius:var(--tp-radius); padding:18px; min-height:640px; }
.tp-formwrap iframe{ min-height:600px; display:block; }
.tp-info h3{ margin-bottom:.4em; }
.tp-info .row{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:20px; }
.tp-info .it{ display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:start; }
.tp-info .it .ic{ width:42px; height:42px; border-radius:11px; background:var(--tp-teal-lt); color:var(--tp-teal); display:flex; align-items:center; justify-content:center; }
.tp-info .it .ic svg{ width:22px; height:22px; }
.tp-info .it b{ display:block; color:var(--tp-ink); font-family:"Rubik","Inter",sans-serif; }
.tp-info .it p{ margin:0; color:var(--tp-muted); font-size:.95rem; }

/* prose */
.tp-prose h2{ font-size:clamp(1.45rem,2.6vw,2rem); margin-top:1.6em; }
.tp-prose h2:first-child{ margin-top:0; }
.tp-prose h3{ margin:1.4em 0 .5em; }

/* related list */
.tp-related{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr; gap:8px; }
.tp-related a{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border:1px solid var(--tp-line); border-radius:10px; text-decoration:none!important; color:var(--tp-ink); font-weight:700; background:#fff; }
.tp-related a::after{ content:"\2192"; color:var(--tp-orange); }
.tp-related a:hover{ border-color:var(--tp-teal); color:var(--tp-teal); }

/* notice */
.tp-notice{ background:var(--tp-cream); border:1px solid #DDCFAE; border-radius:var(--tp-radius); padding:24px 28px; }
.tp-notice b{ color:var(--tp-ink); }

/* header chrome */
body .tm-toolbar.tm-toolbar-default{ background:var(--tp-ink)!important; background-image:none!important; color:#fff; }
body .tm-toolbar .uk-container{ max-width:none; padding-left:40px; padding-right:40px; }
.tp-tb{ display:flex; align-items:center; gap:22px; font-size:.86rem; color:#DAD5C9; }
.tp-tb a{ color:#fff; text-decoration:none; font-weight:700; }
.tp-tb a:hover{ color:var(--tp-orange); }
.tp-tb .tp-btn{ min-height:38px; padding:0 18px; font-size:.82rem; }
.tp-tb .dot::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--tp-orange); margin-right:8px; vertical-align:middle; }
body .tm-header .uk-navbar-container{ background:#fff; }
body .tm-header .uk-navbar-nav > li > a{ font-family:"Rubik","Inter",sans-serif; font-weight:700; color:var(--tp-ink); text-transform:none; font-size:.98rem; letter-spacing:0; min-height:88px; }
body .tm-header .uk-navbar-nav > li:hover > a,body .tm-header .uk-navbar-nav > li.uk-active > a{ color:var(--tp-teal); }
body .tm-header .uk-drop,body .tm-header .uk-navbar-dropdown,body .uk-navbar-container .uk-navbar-dropdown{ position:absolute!important; }
body .uk-navbar-dropdown{ background:#fff; border-radius:12px; box-shadow:0 18px 40px rgba(31,40,47,.16); padding:18px 22px; width:300px; }
body .uk-navbar-dropdown-nav > li > a{ color:var(--tp-ink); font-weight:600; padding:7px 0; }
body .uk-navbar-dropdown-nav > li > a:hover{ color:var(--tp-teal); }
body .uk-logo img{ max-height:64px; width:auto; }
body .uk-logo{ flex-shrink:0; }
body .uk-offcanvas-bar{ background:var(--tp-ink); }
body .uk-offcanvas-bar .uk-nav > li > a{ color:#fff; font-family:"Rubik","Inter",sans-serif; font-weight:700; font-size:1.05rem; }
body .uk-offcanvas-bar .uk-nav-sub a{ color:#C2BCAE; }
body .uk-offcanvas-bar .uk-nav-parent-icon > a::after{ filter:invert(1); }

/* mobile sticky call bar (HFCM Mobile Buttons) */
body .mobile-buttons{ display:none; }
@media (max-width:1099px){
  body .mobile-buttons{ display:flex!important; position:fixed; top:0; left:0; right:0; z-index:1000!important; width:100%; }
  body .mobile-buttons ul{ display:grid!important; grid-template-columns:1fr 1fr; width:100%; margin:0; padding:0; list-style:none; }
  body .mobile-buttons li{ margin:0; }
  body .mobile-buttons a{ display:flex; align-items:center; justify-content:center; height:60px; font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:.95rem; text-decoration:none; color:#fff; letter-spacing:.02em; }
  body .mobile-buttons .button-left{ background:var(--tp-orange); }
  body .mobile-buttons .button-right{ background:var(--tp-teal); }
  body .tm-page{ padding-top:60px; }
}

/* footer */
body footer.tm-footer,body .tm-footer .uk-section-default{ background:var(--tp-ink); }
body .tm-footer .uk-container.uk-container-expand,body footer .uk-container{ padding-left:0!important; padding-right:0!important; max-width:none!important; }
body footer .uk-grid.tm-grid-expand{ margin-left:0!important; }
body footer .uk-grid.tm-grid-expand > *{ padding-left:0!important; }
body footer .uk-section{ padding:0; }
.tp-footer{ background:var(--tp-ink); color:#C2BCAE; font-family:"Inter",system-ui,sans-serif; font-size:.95rem; }
.tp-footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:64px 0 48px; }
.tp-footer h4{ color:#fff; font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; }
.tp-footer ul{ list-style:none; padding:0; margin:0; }
.tp-footer li{ margin:0 0 9px; }
.tp-footer a{ color:#DAD5C9; text-decoration:none; }
.tp-footer a:hover{ color:var(--tp-orange); }
.tp-footer .mark{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.tp-footer .mark img{ width:64px; height:64px; display:block; }
.tp-footer .mark b{ display:block; color:#fff; font-family:"Rubik","Inter",sans-serif; font-weight:900; font-size:1.25rem; line-height:1.05; letter-spacing:-.01em; }
.tp-footer .mark span{ display:block; color:var(--tp-orange); font-family:"Rubik","Inter",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-top:4px; }
.tp-footer .brand p{ max-width:340px; margin:0 0 14px; }
.tp-footer .brand .tp-phone{ color:#fff; font-size:1.4rem; }
.tp-footer .bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:#9A9484; }
.tp-footer .bottom a{ color:#9A9484; }
@media (max-width:900px){ .tp-footer .top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tp-footer .top{ grid-template-columns:1fr; padding:48px 0 32px; } }
@media (max-width:1099px){ body{ padding-bottom:0; } }

/* ---- v2 specificity fixes (theme h1/h3/a rules were winning) ---- */
body .tp-page .tp-hero h1,body .tp-page .tp-hero h1 .l1{ color:#fff; }
body .tp-page .tp-hero h1 .l2{ color:var(--tp-orange); }
body .tp-page .tp-hero .tp-label{ color:var(--tp-cream); }
body .tp-page .tp-ticker a,body .tp-page .tp-ticker span{ color:#DDD8CC; }
body .tp-page .tp-crumb a{ color:#CFC9BB; }
body .tp-page .tp-crumb a:hover{ color:#fff; }
body .tp-page .tp-why h2,body .tp-page .tp-why h3{ color:#fff; }
body .tp-page .tp-why p{ color:#C2BCAE; }
body .tp-page .tp-card.teal h3,body .tp-page .tp-card.teal .tp-phone{ color:#fff; }
body .tp-page .tp-card.teal p{ color:#DDD8CC; }
body .tp-page .tp-cta h2{ color:#fff; }
body .tp-page .tp-cta p{ color:#F6E7DF; }
body .tp-page .tp-band .k{ color:#fff; }
body .tp-page .tp-label.on-dark{ color:var(--tp-cream); }
body .tp-page .tp-svc a,body .tp-page .tp-towns a,body .tp-page .tp-areas a,body .tp-page .tp-related a{ color:var(--tp-ink); }
body .tp-page .tp-svc h3,body .tp-page .tp-towns h3{ color:var(--tp-ink); }
body .tp-page .tp-areas a:hover,body .tp-page .tp-areas a.now{ color:#fff; }
body .tp-page .tp-related a:hover{ color:var(--tp-teal); }
body .tp-page .tp-svc .arw,body .tp-page .tp-towns .st{ color:var(--tp-orange); }
body .tp-page .tp-svc .desc,body .tp-page .tp-towns p{ color:var(--tp-muted); }
@media (max-width:900px){ body .tp-page .tp-estimate .tp-two{ grid-template-columns:1fr; } }
body .uk-logo img{ max-height:80px; }
@media (max-width:1099px){
  body .mobile-buttons .button-left{ background:var(--tp-orange)!important; color:#fff!important; }
  body .mobile-buttons .button-right{ background:var(--tp-teal)!important; color:#fff!important; }
}

@media (prefers-reduced-motion:reduce){ .tp-page *{ transition:none!important; } }

/* v3 phone pass. mobile header is a separate YOOtheme header (tm-header-mobile), style it like the desktop one */
body .tm-header-mobile .uk-navbar-container{ background:#fff; border-bottom:1px solid var(--tp-line); }
body .tm-header-mobile .uk-container{ padding-left:24px!important; padding-right:24px!important; }
body .tm-header-mobile .uk-logo img{ max-height:56px; }
body .tm-header-mobile .uk-navbar-toggle{ color:var(--tp-ink); }
/* hero on phones: badge as a real element, no ghost watermark, tighter top */
.tp-hero-badge{ display:none; }
@media (max-width:760px){
  .tp-hero{ padding-top:56px; }
  .tp-hero::after,.tp-hero.sm::after{ display:none; }
  .tp-hero-badge{ display:block; width:88px; height:88px; margin:0 0 20px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
  .tp-label{ letter-spacing:.14em; font-size:.7rem; }
  .tp-hero h1 .l1{ font-size:2.35rem; }
  .tp-hero p{ font-size:1.05rem; }
  .tp-ticker{ margin-top:36px; gap:8px 18px; }
  .tp-actions{ gap:10px; }
  .tp-actions .tp-btn{ width:100%; }
}
/* towns on phones: two even columns instead of a ragged pill stack */
@media (max-width:640px){
  .tp-areas{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .tp-areas a{ padding:11px 10px; font-size:.86rem; justify-content:flex-start; white-space:nowrap; gap:8px; }
  .tp-formwrap{ padding:10px; }
  .tp-cta{ text-align:left; }
  .tp-cta p{ margin:0; }
  .tp-cta .tp-actions{ justify-content:flex-start; }
  .tp-footer .top{ gap:28px; }
}

/* v4: the 60px the page reserves for the fixed call bar showed the theme's grey html background, paint it white.
   footer lists sit two up on phones so the footer is half as tall. */
@media (max-width:1099px){ html,body{ background:#fff!important; } }

/* v5: footer centered on phones, Zack: "I like keeping things centered on that" */
@media (max-width:560px){
  .tp-footer .top{ grid-template-columns:1fr 1fr; gap:28px 16px; text-align:center; padding:44px 0 28px; }
  .tp-footer .brand{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; }
  .tp-footer .mark{ flex-direction:column; gap:10px; text-align:center; }
  .tp-footer .brand p{ max-width:320px; margin:0 auto 12px; }
  .tp-footer h4{ margin-bottom:12px; }
  .tp-footer .bottom{ justify-content:center; text-align:center; flex-direction:column; gap:6px; }
  .tp-footer .top > div:last-child{ grid-column:1 / -1; }  /* Company alone on the second row, centered across both columns */
}
/* v5: the call bar. The template's snippet CSS pushed body down 70px on top of the 60px the page reserves,
   so the header floated 130px down with a white hole above it. One reservation, the bar's own height. */
@media (max-width:1099px){
  html{ padding-top:0!important; margin-top:0!important; }
  body{ margin-top:0!important; padding-top:0!important; }
  body .tm-page{ padding-top:56px!important; margin-top:0!important; }  /* the template's mobile bar snippet sets .tm-page margin-top:70px, it collapsed through body and read as a body offset */
  body .mobile-buttons a{ height:56px; font-size:.92rem; letter-spacing:.01em; }
  body .tm-header-mobile .uk-navbar-container{ box-shadow:0 1px 0 var(--tp-line); }
}
/* v5: compact hero for the contact page, the form is the point of that page */
.tp-hero.compact{ padding:64px 0 48px; }
.tp-hero.compact::after{ display:none; }
.tp-hero.compact .tp-hero-badge{ display:none; }
@media (max-width:760px){
  .tp-hero.compact{ padding:36px 0 32px; }
  .tp-hero.compact h1 .l1{ font-size:2rem; }
  .tp-hero.compact p{ margin-top:.9em; }
  .tp-estimate.first{ padding-top:36px; }
}

/* reviews band */
.tp-reviews{ background:#fff; }
.tp-reviews-slot{ margin-top:10px; min-height:0; }
.tp-notice .tp-reviews-slot{ margin-top:14px; }

/* QA 2026-09-08: the fixed call bar's anchors were content-box, 2px taller and wider than their slot */
@media (max-width:1099px){ body .mobile-buttons a{ box-sizing:border-box; border:0; } }
/* the hero paragraph gap lost to body .tp-page p (0,1,2) */
body .tp-page .tp-hero p{ margin:1.4em 0 0; }
@media (max-width:760px){ body .tp-page .tp-hero.compact p{ margin-top:.9em; } }
.tp-tel{ white-space:nowrap; font-weight:700; }

/* ---- parity pass 2026-09-20: same render fixes as the Roofing and Electrician builds ---- */
/* plain sections showed the theme's grey main background */
body .tp-page{ background:#fff; }
/* links inside the coloured hero were brand colour on brand colour */
body .tp-page .tp-hero p a,body .tp-page .tp-hero a.tp-tel{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* body .tp-page p (0,1,2) was beating these: CTA paragraph centering, prose heading gap, list padding */
body .tp-page .tp-cta p{ margin:0 auto; }
@media (max-width:640px){ body .tp-page .tp-cta p{ margin:0; } }
body .tp-page .tp-prose h2{ margin-top:1.6em; }
body .tp-page .tp-prose h2:first-child,body .tp-page .tp-prose .tp-label + h2{ margin-top:0; }
body .tp-page ul.tp-checks,body .tp-page ul.tp-related{ padding-left:0; }
/* the footer sits outside .tp-page, so its wrap was content-box and 24px wider than the page measure */
.tp-footer,.tp-footer *{ box-sizing:border-box; }
/* the template's own call bar rule leaves a 1px border on the two halves */
@media (max-width:1099px){ body .mobile-buttons a.button-left,body .mobile-buttons a.button-right{ border:0!important; } }
/* active nav underline was the theme blue */
body .tm-header .uk-navbar-nav > li > a::before{ background-color:var(--tp-orange)!important; }

/* ---- where we work, 2026-09-20 (Zack on the Electrician site: "should be kind of centered, those little things there. Maybe add some maps") ---- */
/* the service area block is centered: label, heading, lead and the town pills */
body .tp-page .tp-sec:has(.tp-areas){ text-align:center; }
body .tp-page .tp-sec:has(.tp-areas) .tp-label{ justify-content:center; }
body .tp-page .tp-sec:has(.tp-areas) .lead{ margin-left:auto; margin-right:auto; }
body .tp-page .tp-areas{ justify-content:center; }
@media (max-width:640px){ body .tp-page .tp-areas a{ justify-content:center; } }
/* service area map: our own inline SVG, towns plotted from their coordinates, palette from the site variables */
.tp-map{ max-width:720px; margin:34px auto 0; background:var(--tp-cream); border:1px solid var(--tp-line); border-radius:var(--tp-radius); padding:10px; overflow:hidden; }
.tp-map svg{ display:block; width:100%; height:auto; }
/* Google Maps embed (Zack 2026-09-20, he wanted a Google map, not the drawn one) */
.tp-map.tp-gmap{ max-width:960px; padding:0; background:#fff; }
.tp-map.tp-gmap iframe{ display:block; width:100%; height:440px; border:0; }
@media (max-width:640px){ .tp-map.tp-gmap iframe{ height:320px; } }
.tp-map .arg{ opacity:.13; }
.tp-map .arg polygon{ fill:var(--tp-teal); stroke:var(--tp-teal); stroke-width:96; stroke-linejoin:round; }
.tp-map .lg .sw{ fill:var(--tp-teal); fill-opacity:.2; }
.tp-map .rc{ fill:none; stroke:var(--tp-line); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
.tp-map .rd{ fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.tp-map .sh rect{ fill:#fff; stroke:var(--tp-line); stroke-width:1.5; }
.tp-map .sh text{ font:700 11px "Inter",system-ui,sans-serif; fill:var(--tp-muted); letter-spacing:.04em; }
.tp-map .td{ fill:var(--tp-orange); stroke:#fff; stroke-width:3; }
.tp-map .hd{ fill:var(--tp-teal); stroke:#fff; stroke-width:3; }
.tp-map .hr{ fill:var(--tp-teal); fill-opacity:.16; }
.tp-map .tl{ font:800 16px "Rubik","Inter",system-ui,sans-serif; fill:var(--tp-ink); paint-order:stroke; stroke:var(--tp-cream); stroke-width:4px; stroke-linejoin:round; }
.tp-map .tl.hl{ font-size:18px; }
.tp-map .ts{ font:700 10px "Inter",system-ui,sans-serif; fill:var(--tp-muted); text-transform:uppercase; letter-spacing:.14em; paint-order:stroke; stroke:var(--tp-cream); stroke-width:3px; }
.tp-map .lg text{ font:700 12px "Inter",system-ui,sans-serif; fill:var(--tp-muted); }
.tp-map a{ text-decoration:none!important; cursor:pointer; }
.tp-map a:hover .tl,.tp-map a:focus .tl{ fill:var(--tp-teal); text-decoration:underline; }
.tp-map a:hover .td,.tp-map a:focus .td{ fill:var(--tp-teal); }
@media (max-width:640px){ .tp-map{ margin-top:26px; padding:6px; } .tp-map .tl{ font-size:22px; } .tp-map .tl.hl{ font-size:24px; } .tp-map .ts{ font-size:14px; } .tp-map .sh text{ font-size:14px; } .tp-map .lg text{ font-size:17px; } }

/* v2 (2026-10-15 rebuild): no dot pattern on phones, towns pills may wrap their text instead of overflowing */
@media (max-width:760px){ .tp-hero::before{ display:none; } }
@media (max-width:640px){ .tp-areas a{ white-space:normal; text-align:left; line-height:1.2; } }

/* v3: the theme's body font was Work Sans while every page runs Inter. One site font: Inter on body, so menu, footer and the GHL form all match. */
body{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

/* ==== v4 2026-10-18: David's job photos and his own logo ==== */

/* David's emblem replaces our redraw in the ghost marks */
.tp-hero::after,.tp-why::after{ background-image:url('/wp-content/uploads/tp/third-pig-emblem-v2-cream.png'); }

/* header lockup is his emblem plus the wordmark, an SVG sized by height */
body .uk-logo img[src*="third-pig-logo-wide-v2"]{ height:66px; width:auto; max-height:none; }
body .tm-header-mobile .uk-logo img[src*="third-pig-logo-wide-v2"]{ height:52px; }

/* photo hero: a real job photo behind the copy, dark wash so the H1 and buttons stay readable */
body .tp-page .tp-hero.has-photo{ background-color:var(--tp-ink); background-image:none; }
body .tp-page .tp-hero.has-photo::before,body .tp-page .tp-hero.has-photo::after{ display:none; }
body .tp-page .tp-hero-photo{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; overflow:hidden; background-color:var(--tp-ink); }
body .tp-page .tp-hero-photo img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
body .tp-page .tp-hero-photo::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background-image:linear-gradient(180deg,rgba(18,24,29,.80) 0%,rgba(18,24,29,.68) 40%,rgba(18,24,29,.86) 100%); }
body .tp-page .tp-hero.has-photo .tp-wrap{ position:relative; z-index:2; }
body .tp-page .tp-hero.has-photo h1{ text-shadow:0 2px 22px rgba(0,0,0,.4); }
body .tp-page .tp-hero.has-photo p{ text-shadow:0 1px 12px rgba(0,0,0,.45); }
body .tp-page .tp-hero.has-photo .tp-ticker{ border-top-color:rgba(255,255,255,.24); }
@media (min-width:761px){
  body .tp-page .tp-hero-photo::after{ background-image:linear-gradient(90deg,rgba(18,24,29,.93) 0%,rgba(18,24,29,.85) 38%,rgba(18,24,29,.62) 70%,rgba(18,24,29,.46) 100%),linear-gradient(0deg,rgba(18,24,29,.55) 0%,rgba(18,24,29,0) 42%); }
  body .tp-page .tp-hero.sm.has-photo{ padding-bottom:92px; }
  body .tp-page .tp-hero.compact.has-photo{ padding-bottom:64px; }
}

/* framed photos: heavy frame, offset brick shadow, caption ON the photo */
body .tp-page .tp-fig{ position:relative; margin:0; aspect-ratio:var(--ar,1); border:7px solid var(--tp-ink); background-color:var(--tp-ink); box-shadow:10px 10px 0 var(--tp-orange); overflow:hidden; }
body .tp-page .tp-fig > a{ position:absolute; top:0; right:0; bottom:0; left:0; display:block; overflow:hidden; }
body .tp-page .tp-fig img{ position:absolute; top:0; left:0; width:100%; height:100%; max-width:none; object-fit:cover; transform:scale(1.001); transition:transform 1.6s cubic-bezier(.2,.65,.25,1); }
body .tp-page .tp-fig:hover img{ transform:scale(1.07); }
body .tp-page .tp-fig figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:48px 16px 14px; background-image:linear-gradient(180deg,rgba(17,23,28,0) 0%,rgba(17,23,28,.58) 46%,rgba(17,23,28,.92) 100%); color:#fff; font-family:"Rubik","Inter",system-ui,sans-serif; font-weight:800; font-size:.84rem; line-height:1.22; letter-spacing:.07em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.35); pointer-events:none; }
body .tp-page .tp-fig figcaption::before{ content:""; display:block; width:26px; height:3px; margin:0 0 9px; border-radius:2px; background-color:var(--tp-orange); }

/* justified grid: rows fill the width, every photo shown whole at its own shape */
body .tp-page .tp-gal{ --row:250px; display:flex; flex-wrap:wrap; gap:30px 28px; margin:34px 0 0; padding:0 12px 12px 0; }
body .tp-page .tp-gal::after{ content:""; flex-grow:999999; }
body .tp-page .tp-gal .tp-fig{ flex-grow:calc(var(--ar) * 100); flex-shrink:1; flex-basis:calc(var(--ar) * var(--row)); }

/* even tiles: the home strip, the town strips, the crew on About */
body .tp-page .tp-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 28px; margin:34px 0 0; padding:0 12px 12px 0; }
body .tp-page .tp-tiles.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
body .tp-page .tp-tiles .tp-fig{ --ar:1; }
body .tp-page .tp-tiles.tall .tp-fig{ --ar:.8; }
@media (max-width:900px){
  body .tp-page .tp-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* photo band on dark: cream frames */
body .tp-page .tp-photos{ background-color:var(--tp-ink); color:#DAD5C9; }
body .tp-page .tp-photos h2,body .tp-page .tp-photos h3{ color:#fff; }
body .tp-page .tp-photos .tp-label{ color:var(--tp-cream); }
body .tp-page .tp-photos .lead{ color:#C9C3B6; }
body .tp-page .tp-photos .tp-fig{ border-color:var(--tp-cream); background-color:var(--tp-cream); }
body .tp-page .tp-photos .tp-more a{ color:#fff; }
body .tp-page .tp-gal-h{ margin:48px 0 0; font-size:1.3rem; }
body .tp-page .tp-gal-h:first-of-type{ margin-top:30px; }
body .tp-page .tp-more{ margin:34px 0 0; font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; }
body .tp-page .tp-more a{ color:var(--tp-orange); text-decoration:none; }
body .tp-page .tp-more a::after{ content:"\2192"; margin-left:10px; }
body .tp-page .tp-more a:hover{ text-decoration:underline; text-underline-offset:4px; }
body .tp-page .tp-photos .tp-actions{ margin-top:36px; }

/* service cards with a photo on top (Masonry Services page) */
body .tp-page .tp-svc a .ph{ display:block; margin:-26px -24px 4px; aspect-ratio:1.6; overflow:hidden; background-color:var(--tp-ink); border-bottom:4px solid var(--tp-orange); }
body .tp-page .tp-svc a .ph img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform 1.6s cubic-bezier(.2,.65,.25,1); }
body .tp-page .tp-svc a:hover .ph img{ transform:scale(1.06); }
body .tp-page .tp-svc a .ph + .ic{ position:relative; z-index:1; margin-top:-36px; margin-left:2px; border:3px solid #fff; box-sizing:content-box; }

/* Our Work: jump links and anchor offset under the header */
body .tp-page section[id]{ scroll-margin-top:110px; }
body .tp-page .tp-jumps{ margin-top:0; }

@media (max-width:640px){
  body .tp-page .tp-gal{ --row:150px; gap:20px 16px; padding:0 7px 7px 0; margin-top:26px; }
  body .tp-page .tp-tiles{ gap:20px 16px; padding:0 7px 7px 0; margin-top:26px; }
  body .tp-page .tp-tiles.three .tp-fig:first-child{ grid-column:span 2; --ar:1.6; }
  body .tp-page .tp-fig{ border-width:4px; box-shadow:6px 6px 0 var(--tp-orange); }
  body .tp-page .tp-fig figcaption{ padding:34px 10px 9px; font-size:.68rem; letter-spacing:.05em; }
  body .tp-page .tp-fig figcaption::before{ width:18px; height:2px; margin-bottom:6px; }
  body .tp-page .tp-svc a .ph{ margin:-26px -24px 4px; }
  body .tp-page section[id]{ scroll-margin-top:80px; }
}
@media (prefers-reduced-motion:reduce){ body .tp-page .tp-fig img,body .tp-page .tp-svc a .ph img{ transition:none; } body .tp-page .tp-fig:hover img,body .tp-page .tp-svc a:hover .ph img{ transform:none; } }

/* v5: eight menu items now that Our Work is in. From 960 (where the desktop header starts) to 1199 the nav ran into the logo, so it tightens there */
@media (min-width:960px) and (max-width:1199px){
  body .tm-header .uk-navbar-nav{ gap:22px; }
  body .tm-header .uk-navbar-nav > li > a{ font-size:.92rem; white-space:nowrap; }
  body .tm-header .uk-logo img[src*="third-pig-logo-wide-v2"]{ height:58px; }
}

/* v6, Oct 18 2026: fixes from the photo review */

/* hero photo: a wide crop on desktop and a tall crop on phones (picture element), each with its own focus point */
body .tp-page .tp-hero-photo picture{ display:block; width:100%; height:100%; }
body .tp-page .tp-hero-photo img{ object-position:var(--pd,50% 50%); }
@media (max-width:760px){ body .tp-page .tp-hero-photo img{ object-position:var(--pm,50% 50%); } }

/* hero subtitle over a photo: a light brick tint with a soft shadow, the brick orange sank into light siding and sky */
body .tp-page .tp-hero.has-photo h1 .l2{ color:#F3C2A4; text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.5); }
/* and the desktop wash stays darker further right, under the end of the subtitle */
@media (min-width:761px){
  body .tp-page .tp-hero-photo::after{ background-image:linear-gradient(90deg,rgba(18,24,29,.93) 0%,rgba(18,24,29,.86) 38%,rgba(18,24,29,.76) 62%,rgba(18,24,29,.68) 76%,rgba(18,24,29,.52) 100%),linear-gradient(0deg,rgba(18,24,29,.55) 0%,rgba(18,24,29,0) 42%); }
}
/* phones: the wash a touch darker through the middle, where the subtitle sits */
@media (max-width:760px){
  body .tp-page .tp-hero-photo::after{ background-image:linear-gradient(180deg,rgba(18,24,29,.80) 0%,rgba(18,24,29,.73) 40%,rgba(18,24,29,.86) 100%); }
}

/* About: six crew tiles, three across, two across from 900 down */
body .tp-page .tp-tiles.six{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ body .tp-page .tp-tiles.six{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* justified grids: the row height is set per gallery (inline --rowd and --rowm) so no photo sits alone on a last row */
body .tp-page .tp-gal{ --row:var(--rowd,250px); }

@media (max-width:640px){
  /* town strips: the first photo full width, the other two side by side under it (was three columns with tiny squares) */
  body .tp-page .tp-tiles.three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body .tp-page .tp-gal{ --row:var(--rowm,180px); }
  /* every phone row is justified, the last one too, so no photo is left small at the end of a grid */
  body .tp-page .tp-gal::after{ display:none; }
  /* narrow portrait tiles on phones: a smaller caption so it covers less of the photo */
  body .tp-page .tp-gal .tp-fig.pt figcaption{ padding:26px 8px 8px; font-size:.62rem; letter-spacing:.03em; }
  body .tp-page .tp-gal .tp-fig.pt figcaption::before{ width:14px; margin-bottom:5px; }
}

/* full size view: the caption in the same style as the captions on the photos, not the UIkit grey */
body .uk-lightbox .uk-lightbox-caption{ padding:60px 20px 22px; background-color:transparent; background-image:linear-gradient(180deg,rgba(17,23,28,0) 0%,rgba(17,23,28,.66) 45%,rgba(17,23,28,.94) 100%); color:#fff; font-family:"Rubik","Inter",system-ui,sans-serif; font-weight:800; font-size:.95rem; line-height:1.25; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.35); }
body .uk-lightbox .uk-lightbox-caption::before{ content:""; display:block; width:28px; height:3px; margin:0 auto 10px; border-radius:2px; background-color:#B5532F; }
@media (max-width:640px){ body .uk-lightbox .uk-lightbox-caption{ font-size:.8rem; padding:48px 16px 18px; } }

/* the template's call bar snippet pushes .tm-page down 70px up to 1100px wide, the reset above stopped at 1099 */
@media (max-width:1100px){ body .tm-page{ margin-top:0!important; } }

/* ===== v7 2026-10-21 (Zack) ===== */

/* Services grid: an odd count no longer leaves a ragged last row hanging left, the last row centers */
body .tp-page .tp-svc{ display:flex; flex-wrap:wrap; justify-content:center; }
body .tp-page .tp-svc > a{ flex:0 0 calc((100% - 54px) / 4); max-width:calc((100% - 54px) / 4); }
@media (max-width:1000px){ body .tp-page .tp-svc > a{ flex-basis:calc((100% - 18px) / 2); max-width:calc((100% - 18px) / 2); } }
@media (max-width:520px){ body .tp-page .tp-svc{ gap:14px; } body .tp-page .tp-svc > a{ flex-basis:100%; max-width:100%; } }

/* Where we work: dark coursed-stone band, home base card left, towns by state right */
body .tp-page .tp-where{ position:relative; background-color:var(--tp-ink); color:#D9D3C6; overflow:hidden; }
body .tp-page .tp-where::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.07;
  background-image:repeating-linear-gradient(0deg, #fff 0, #fff 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(90deg, #fff 0, #fff 1px, transparent 1px, transparent 96px);
  -webkit-mask-image:linear-gradient(115deg, #000 0%, transparent 70%); mask-image:linear-gradient(115deg, #000 0%, transparent 70%); }
body .tp-page .tp-where .tp-wrap{ position:relative; }
body .tp-page .tp-where-grid{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.4fr); gap:56px; align-items:start; }
body .tp-page .tp-where h2{ color:#fff; }
body .tp-page .tp-where-intro > p{ color:#C9C2B3; margin:16px 0 0; }
body .tp-page .tp-where-base{ display:flex; align-items:center; gap:16px; margin-top:26px; padding:18px 20px; border-radius:var(--tp-radius);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-left:4px solid var(--tp-orange); text-decoration:none!important; transition:background .2s; }
body .tp-page .tp-where-base:hover{ background:rgba(255,255,255,.1); }
body .tp-page .tp-where-base .pin{ flex:0 0 48px; height:48px; border-radius:50%; background:var(--tp-orange); color:#fff; display:flex; align-items:center; justify-content:center; }
body .tp-page .tp-where-base .pin svg{ width:24px; height:24px; }
body .tp-page .tp-where-base .tx{ display:flex; flex-direction:column; line-height:1.25; }
body .tp-page .tp-where-base small{ font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tp-cream); }
body .tp-page .tp-where-base b{ font-family:"Rubik","Inter",sans-serif; font-size:1.35rem; font-weight:800; color:#fff; }
body .tp-page .tp-where-base em{ font-style:normal; font-size:.9rem; color:#A9A293; }
body .tp-page .tp-where-note{ font-size:.95rem; color:#A9A293!important; }
body .tp-page .tp-where .tp-actions{ margin-top:24px; }
body .tp-page .tp-where-states{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
body .tp-page .tp-where-state{ background:#fff; border-radius:var(--tp-radius); padding:22px 22px 10px; box-shadow:0 18px 40px rgba(0,0,0,.25); }
body .tp-page .tp-where-state .hd{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:2px solid var(--tp-line); }
body .tp-page .tp-where-state .ab{ flex:0 0 auto; font-family:"Rubik","Inter",sans-serif; font-weight:900; font-size:.85rem; letter-spacing:.06em; color:#fff; background:var(--tp-teal); border-radius:8px; padding:6px 9px; line-height:1; }
body .tp-page .tp-where-state h3{ font-size:1.2rem; margin:0; color:var(--tp-ink); }
body .tp-page .tp-where-state .n{ margin-left:auto; font-size:.8rem; font-weight:700; color:var(--tp-orange); white-space:nowrap; }
body .tp-page .tp-where-state ul{ list-style:none; margin:0; padding:0; }
body .tp-page .tp-where-state li{ margin:0; border-bottom:1px solid var(--tp-line); }
body .tp-page .tp-where-state li:last-child{ border-bottom:0; }
body .tp-page .tp-where-state li a{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 4px; text-decoration:none!important; color:var(--tp-ink); transition:padding .2s, color .2s; }
body .tp-page .tp-where-state li a b{ font-weight:700; font-size:1rem; }
body .tp-page .tp-where-state li a span{ font-size:.82rem; color:var(--tp-muted); white-space:nowrap; }
body .tp-page .tp-where-state li a::after{ content:"\2192"; color:var(--tp-orange); font-weight:800; margin-left:4px; }
body .tp-page .tp-where-state li a span{ margin-left:auto; }
body .tp-page .tp-where-state li a:hover{ color:var(--tp-orange); padding-left:10px; }
@media (max-width:1000px){ body .tp-page .tp-where-grid{ grid-template-columns:1fr; gap:36px; } }
@media (max-width:640px){
  body .tp-page .tp-where-states{ grid-template-columns:1fr; gap:16px; }
  body .tp-page .tp-where-state{ padding:18px 16px 6px; }
  body .tp-page .tp-where-base{ padding:16px; }
  body .tp-page .tp-where .tp-actions .tp-btn{ width:100%; }
}

/* Estimate form panel: a little more room now the form has more questions */
body .tp-page .tp-formwrap{ min-height:0; }
body .tp-page .tp-formwrap iframe{ min-height:900px; }

/* v8: state cards size to their own list */
body .tp-page .tp-where-states{ align-items:start; }

/* v9 2026-10-21: phones get compact service rows, icon left, text right */
@media (max-width:520px){
  body .tp-page .tp-svc{ gap:10px; margin-top:24px; }
  body .tp-page .tp-svc > a{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; row-gap:4px; padding:16px; align-items:start; }
  body .tp-page .tp-svc > a .ic{ grid-row:1 / span 3; width:44px; height:44px; }
  body .tp-page .tp-svc > a h3{ font-size:1.02rem; margin:0; }
  body .tp-page .tp-svc > a .desc{ font-size:.9rem; line-height:1.45; }
  body .tp-page .tp-svc > a .arw{ margin-top:2px; font-size:.78rem; }
  body .tp-page .tp-svc > a .ph{ display:none; }
}

/* v10 2026-10-21: breadcrumb links get a finger-sized tap area */
body .tp-page .tp-crumb a{ display:inline-block; padding:10px 2px; margin:-10px 0; }

/* v11 2026-10-21: phones, more finger room on the hero service links and the linked check lists */
@media (max-width:640px){
  body .tp-page .tp-ticker a{ display:inline-block; padding:6px 0; }
  body .tp-page .tp-checks li a{ display:inline-block; padding:5px 0; }
}

/* v12 2026-11-03: check lists, no stock circle badge. Orange check, hairline rows, spec sheet look */
body .tp-page .tp-checks{ gap:0 40px; margin-top:22px; }
body .tp-page .tp-checks li{ padding:14px 0 14px 34px; border-bottom:1px solid var(--tp-line); line-height:1.5; font-weight:500; color:var(--tp-text); }
body .tp-page .tp-checks li::before{ top:17px; left:2px; width:18px; height:18px; border-radius:0; background:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23B5532F' stroke-width='2.8' stroke-linecap='square' stroke-linejoin='miter' d='M3.5 10.5l4.2 4.2L16.5 5.5'/%3E%3C/svg%3E"); background-size:18px; background-position:center; background-repeat:no-repeat; }
body .tp-page .tp-checks li:nth-last-child(-n+2):nth-child(odd), body .tp-page .tp-checks li:last-child{ border-bottom-color:transparent; }
body .tp-page .tp-checks.one li:nth-last-child(2){ border-bottom-color:var(--tp-line); }
@media (max-width:640px){ body .tp-page .tp-checks li:nth-last-child(2){ border-bottom-color:var(--tp-line); } }
@media (max-width:640px){ body .tp-page .tp-checks li:nth-last-child(-n+2):nth-child(odd){ border-bottom-color:var(--tp-line); } body .tp-page .tp-checks li:last-child{ border-bottom-color:transparent; } }
/* v14 2026-11-03: check list marker = small running bond brick stack */
body .tp-page .tp-checks li{ padding-left:42px; }
body .tp-page .tp-checks li::before{ top:14px; left:0; width:26px; height:22px; background-size:26px 22px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cg fill='%23B5532F'%3E%3Crect x='0' y='0' width='9' height='5.5' rx='.8'/%3E%3Crect x='10.5' y='0' width='13.5' height='5.5' rx='.8'/%3E%3C/g%3E%3Cg fill='%238C3E22'%3E%3Crect x='0' y='7' width='14' height='5.5' rx='.8'/%3E%3Crect x='15.5' y='7' width='8.5' height='5.5' rx='.8'/%3E%3C/g%3E%3Cg fill='%23C66A43'%3E%3Crect x='0' y='14' width='6' height='5.5' rx='.8'/%3E%3Crect x='7.5' y='14' width='16.5' height='5.5' rx='.8'/%3E%3C/g%3E%3C/svg%3E"); transition:transform .2s; }
body .tp-page .tp-checks li:hover::before{ transform:translateY(-2px); }