/* True North Handyman & Remodeling Services, design system v30, 2026-09-29. Written for this client, not forked.
   The brand is a compass. Colours come from THEIR logo (arrived 9/29): navy, blue, sky and silver. The first build was pine green and copper, kept as tn.css.bak-green-20260929. Token names still say pine, copper and brass: pine = navy, copper = blue, brass = sky. A compass rose drawn as line work sits behind the heroes,
   bands carry a ruler edge, services are listed like a job ticket. No photos exist yet, so nothing here needs one.
   Type: Barlow Condensed for display, Barlow for reading. */
:root{
  --tn-pine:#07233F; --tn-pine-2:#0E3560; --tn-pine-dk:#031426; --tn-pine-lt:#DFEAF4;
  --tn-copper:#1268B3; --tn-copper-dk:#0C4F8C; --tn-brass:#9CD8FC; --tn-brass-lt:#CFEBFD;
  --tn-ink:#051526; --tn-text:#22303D; --tn-muted:#5A6978; --tn-line:#D3DDE6; --tn-paper:#F0F4F8; --tn-white:#FFFFFF;
  --tn-disp:"Barlow Condensed","Arial Narrow",sans-serif; --tn-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- base ---------- */
body .tn-page{ background:var(--tn-white); color:var(--tn-text); font-family:var(--tn-body); font-size:18px; line-height:1.6; overflow-x:clip; }
body .tn-page *,.tn-footer,.tn-footer *{ box-sizing:border-box; }
body .tn-page h1,body .tn-page h2,body .tn-page h3,body .tn-page h4{ font-family:var(--tn-disp); color:var(--tn-pine); margin:0; letter-spacing:.01em; font-weight:700; text-transform:uppercase; }
body .tn-page h2{ font-size:clamp(2rem,3.6vw,3rem); line-height:1.02; margin:0 0 .5em; }
body .tn-page h3{ font-size:1.6rem; line-height:1.1; }
body .tn-page p{ margin:0 0 1em; }
body .tn-page a{ color:var(--tn-copper); }
body .tn-page .lead{ font-size:1.2rem; color:var(--tn-muted); max-width:680px; }
body .tn-page .tn-center .lead{ margin-left:auto; margin-right:auto; }
body .tn-page ul,body .tn-page ol{ padding-left:1.2em; margin:0 0 1em; }
.tn-tel{ white-space:nowrap; font-weight:700; }
@media (prefers-reduced-motion:reduce){ .tn-page *{ transition:none!important; } }

/* release YOOtheme's container, tn-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; }
.tn-wrap{ max-width:1240px; margin:0 auto; padding:0 28px; position:relative; }
.tn-narrow{ max-width:840px; }
.tn-sec{ padding:92px 0; }
.tn-alt{ background:var(--tn-paper); }
@media (max-width:640px){ .tn-sec{ padding:58px 0; } .tn-wrap{ padding:0 20px; } }

/* section heading: a copper north tick sits above it */
body .tn-page .tn-h{ position:relative; padding-top:26px; }
body .tn-page .tn-h::before{ content:""; position:absolute; left:0; top:0; width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:16px solid var(--tn-copper); }
body .tn-page .tn-center{ text-align:center; }
body .tn-page .tn-center .tn-h::before{ left:50%; margin-left:-9px; }

/* ---------- buttons: squared, heavy ---------- */
.tn-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:0 30px; border-radius:2px; border:2px solid transparent; font-family:var(--tn-disp); font-weight:700; font-size:1.25rem; letter-spacing:.05em; text-transform:uppercase; text-decoration:none!important; cursor:pointer; transition:transform .15s,background .2s,color .2s,box-shadow .2s; }
.tn-btn svg{ width:20px; height:20px; flex:0 0 auto; }
.tn-btn:hover,.tn-btn:focus{ transform:translate(-2px,-2px); }
.tn-btn-copper,body .tn-page .tn-btn-copper,body .tn-tb .tn-btn-copper{ background:var(--tn-copper); color:#fff!important; border-color:var(--tn-copper); box-shadow:4px 4px 0 var(--tn-pine-dk); }
.tn-btn-copper:hover,.tn-btn-copper:focus,body .tn-page .tn-btn-copper:hover,body .tn-tb .tn-btn-copper:hover{ background:var(--tn-copper-dk); border-color:var(--tn-copper-dk); color:#fff!important; box-shadow:6px 6px 0 var(--tn-pine-dk); }
body .tn-page .tn-btn-pine{ background:var(--tn-pine); color:#fff!important; border-color:var(--tn-pine); box-shadow:4px 4px 0 var(--tn-copper); }
body .tn-page .tn-btn-pine:hover,body .tn-page .tn-btn-pine:focus{ background:var(--tn-pine-2); box-shadow:6px 6px 0 var(--tn-copper); }
body .tn-page .tn-btn-ghost{ background:transparent; color:#fff!important; border-color:rgba(255,255,255,.75); }
body .tn-page .tn-btn-ghost:hover,body .tn-page .tn-btn-ghost:focus{ background:#fff; color:var(--tn-pine-dk)!important; }
body .tn-page .tn-btn-line{ background:transparent; color:var(--tn-pine)!important; border-color:var(--tn-pine); }
body .tn-page .tn-btn-line:hover,body .tn-page .tn-btn-line:focus{ background:var(--tn-pine); color:#fff!important; }
.tn-actions{ display:flex; gap:18px; flex-wrap:wrap; margin-top:1.7em; }
@media (max-width:640px){ .tn-actions .tn-btn{ width:100%; } .tn-btn{ font-size:1.12rem; padding:0 20px; } }

/* ---------- hero: pine, contour lines, the compass rose as line work ---------- */
.tn-hero{ position:relative; isolation:isolate; background-color:var(--tn-pine); color:#fff; padding:84px 0 96px; overflow:hidden;
  background-image:repeating-radial-gradient(ellipse 120% 90% at 78% 40%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46px,rgba(255,255,255,.045) 47px,rgba(255,255,255,0) 49px); }
.tn-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:18px; z-index:1; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--tn-brass) 0,var(--tn-brass) 2px,transparent 2px,transparent 14px),linear-gradient(var(--tn-copper),var(--tn-copper));
  background-size:auto 10px,auto 4px; background-position:0 0,0 100%; background-repeat:repeat-x,repeat-x; }
.tn-rose{ position:absolute; z-index:-1; color:rgba(156,216,252,.2); width:760px; height:760px; right:-150px; top:50%; margin-top:-380px; pointer-events:none; }
.tn-rose .n{ color:rgba(42,143,224,.55); }
.tn-hero.home .grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr); gap:64px; align-items:center; }
.tn-hero.sm{ padding:64px 0 84px; }
.tn-hero.sm .tn-rose{ width:620px; height:620px; margin-top:-310px; right:-120px; }
.tn-hero.compact{ padding:48px 0 64px; }
.tn-crumb{ display:flex; gap:8px; flex-wrap:wrap; font-size:.92rem; margin-bottom:22px; color:#C5D5E4; }
body .tn-page .tn-crumb a{ color:#C5D5E4; text-decoration:none; }
body .tn-page .tn-crumb a:hover{ color:#fff; }
.tn-crumb span::before{ content:"/"; margin-right:8px; color:var(--tn-brass); }
body .tn-page .tn-hero h1{ color:#fff; line-height:.95; }
body .tn-page .tn-hero h1 .kw{ display:inline-block; font-size:clamp(1.1rem,1.7vw,1.4rem); font-weight:600; letter-spacing:.12em; color:var(--tn-pine-dk); background:var(--tn-brass); padding:7px 14px 5px; margin-bottom:.9em; line-height:1.15; }
body .tn-page .tn-hero h1 .big{ display:block; font-weight:700; font-size:clamp(3.4rem,8vw,7rem); color:#fff; letter-spacing:0; }
body .tn-page .tn-hero h1 .big em{ font-style:normal; color:var(--tn-brass); }
body .tn-page .tn-hero h1 .l1{ display:block; font-weight:700; font-size:clamp(2.5rem,5.2vw,4.6rem); color:#fff; max-width:900px; }
body .tn-page .tn-hero h1 .l2{ display:block; font-weight:600; font-size:clamp(1.25rem,2.2vw,1.75rem); color:var(--tn-brass); margin-top:.5em; letter-spacing:.04em; line-height:1.15; }
body .tn-page .tn-hero p{ color:#E4EDF5; max-width:620px; margin:1.3em 0 0; font-size:1.2rem; }
.tn-points{ list-style:none; display:flex; flex-wrap:wrap; gap:14px 28px; margin:28px 0 0!important; padding:0!important; }
.tn-points li{ display:flex; align-items:center; gap:10px; margin:0; font-family:var(--tn-disp); font-weight:600; font-size:1.25rem; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.tn-points svg{ width:26px; height:26px; color:var(--tn-brass); flex:0 0 auto; }

/* the quote form card: cream, copper top, reads like a work order */
.tn-formcard{ background:var(--tn-white); border:2px solid var(--tn-pine-dk); border-top:10px solid var(--tn-copper); border-radius:2px; box-shadow:10px 10px 0 var(--tn-pine-dk); color:var(--tn-text); position:relative; }
.tn-hero .tn-formcard,.tn-reach .tn-formcard{ box-shadow:10px 10px 0 rgba(0,0,0,.35); border-color:var(--tn-brass); border-top-color:var(--tn-copper); }
.tn-formcard .hd{ padding:22px 24px 12px; border-bottom:2px dashed var(--tn-line); }
body .tn-page .tn-formcard h2{ font-size:2.1rem; margin:0 0 .1em; color:var(--tn-pine); line-height:1; }
body .tn-page .tn-formcard p{ margin:0; color:var(--tn-muted); font-size:1rem; max-width:none; }
.tn-formwrap{ padding:6px 8px 4px; }
/* the GHL embed script grows the frame to whatever height it is given, hold it to the form */
body .tn-page .tn-formwrap iframe{ display:block; height:640px!important; min-height:0; max-height:640px; }
@media (max-width:640px){ body .tn-page .tn-formwrap iframe{ height:660px!important; max-height:660px; } }
@media (max-width:980px){
  .tn-hero{ padding:52px 0 72px; }
  .tn-hero.home .grid{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .tn-rose,.tn-hero.sm .tn-rose{ width:520px; height:520px; margin-top:0; top:-120px; right:-220px; }
  .tn-formcard,.tn-hero .tn-formcard,.tn-reach .tn-formcard{ box-shadow:6px 6px 0 rgba(0,0,0,.35); margin-right:6px; }
}
@media (max-width:640px){ .tn-hero.sm{ padding:40px 0 60px; } body .tn-page .tn-hero p{ font-size:1.08rem; } .tn-points{ flex-direction:column; gap:10px; } }

/* ---------- call bar, straddles the hero's bottom edge ---------- */
.tn-callbar{ position:relative; z-index:3; margin-top:-44px; }
.tn-callbar .bar{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px 34px; align-items:center; background:var(--tn-white); border:2px solid var(--tn-pine-dk); border-left:12px solid var(--tn-copper); border-radius:2px; padding:20px 28px; box-shadow:8px 8px 0 var(--tn-pine-dk); }
.tn-callbar .t b{ display:block; font-family:var(--tn-disp); font-weight:700; font-size:1.8rem; line-height:1; text-transform:uppercase; color:var(--tn-pine); }
.tn-callbar .t span{ color:var(--tn-muted); font-size:1rem; }
body .tn-page .tn-callbar .ph{ text-decoration:none; color:var(--tn-pine); font-family:var(--tn-disp); font-weight:700; font-size:2.1rem; line-height:1; white-space:nowrap; }
body .tn-page .tn-callbar .ph:hover{ color:var(--tn-copper); }
@media (max-width:900px){ .tn-callbar .bar{ grid-template-columns:minmax(0,1fr); text-align:center; padding:20px; margin-right:8px; } }

/* ---------- the services, listed like a job ticket ---------- */
.tn-index{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; margin-top:40px; text-align:left; align-items:start; }
.tn-index .grp{ background:var(--tn-white); border:2px solid var(--tn-pine-dk); border-radius:2px; box-shadow:8px 8px 0 var(--tn-pine-lt); }
body .tn-page .tn-index .grp h3{ background:var(--tn-pine); color:var(--tn-brass); font-size:1.35rem; letter-spacing:.1em; padding:14px 20px 12px; }
body .tn-page .tn-index .row{ display:grid; grid-template-columns:auto 34px minmax(0,1fr) 24px; grid-template-areas:"no ic nm go" "no ic ds go"; column-gap:14px; align-items:center; padding:18px 20px; border-top:2px dashed var(--tn-line); text-decoration:none; color:var(--tn-text); transition:background .15s; }
body .tn-page .tn-index h3 + .row{ border-top:0; }
.tn-index .no{ grid-area:no; font-family:var(--tn-disp); font-weight:700; font-size:1.05rem; letter-spacing:.06em; color:var(--tn-copper); align-self:start; padding-top:5px; }
.tn-index .ic{ grid-area:ic; color:var(--tn-pine); line-height:0; }
.tn-index .ic svg{ width:34px; height:34px; stroke-width:1.7; }
.tn-index .nm{ grid-area:nm; font-family:var(--tn-disp); font-weight:700; font-size:1.5rem; line-height:1.05; text-transform:uppercase; color:var(--tn-pine); }
.tn-index .ds{ grid-area:ds; font-size:.98rem; line-height:1.35; color:var(--tn-muted); margin-top:3px; }
.tn-index .go{ grid-area:go; color:var(--tn-copper); line-height:0; transition:transform .15s; }
.tn-index .go svg{ width:24px; height:24px; }
body .tn-page .tn-index .row:hover,body .tn-page .tn-index .row:focus{ background:var(--tn-paper); }
body .tn-page .tn-index .row:hover .go{ transform:translateX(4px); }
@media (max-width:1000px){ .tn-index{ grid-template-columns:minmax(0,1fr); gap:26px; } .tn-index .grp{ margin-right:8px; } }

/* ---------- bands, with a ruler edge on top ---------- */
.tn-band{ position:relative; color:#fff; padding:100px 0 92px; }
.tn-band::before{ content:""; position:absolute; left:0; right:0; top:0; height:18px; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,currentColor 0,currentColor 2px,transparent 2px,transparent 14px),repeating-linear-gradient(90deg,currentColor 0,currentColor 2px,transparent 2px,transparent 70px);
  background-size:auto 9px,auto 18px; background-repeat:repeat-x,repeat-x; opacity:.45; }
.tn-band.pine{ background-color:var(--tn-pine); background-image:repeating-radial-gradient(ellipse 120% 90% at 20% 60%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46px,rgba(255,255,255,.04) 47px,rgba(255,255,255,0) 49px); }
.tn-band.copper{ background:var(--tn-copper); }
body .tn-page .tn-band h2,body .tn-page .tn-band h3{ color:#fff; }
body .tn-page .tn-band p{ color:#fff; }
body .tn-page .tn-band .lead{ color:#D6E3EF; }
body .tn-page .tn-band .tn-h::before{ border-bottom-color:var(--tn-brass); }
body .tn-page .tn-band a:not(.tn-btn):not(.pt){ color:var(--tn-brass-lt); }
body .tn-page .tn-band.copper .tn-btn-copper{ background:var(--tn-pine); border-color:var(--tn-pine); }
.tn-split{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:64px; align-items:center; }
.tn-split.top{ align-items:start; }
@media (max-width:900px){ .tn-split{ grid-template-columns:minmax(0,1fr); gap:34px; } .tn-band{ padding:76px 0 64px; } }

/* ---------- the four points ---------- */
.tn-compass{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr); grid-template-areas:". n ." "w mid e" ". s ."; gap:22px 26px; align-items:center; max-width:1040px; margin:44px auto 0; }
.tn-compass .mid{ grid-area:mid; position:static; width:260px; height:260px; margin:0; color:var(--tn-brass); z-index:0; }
.tn-compass .mid .n{ color:var(--tn-copper); }
body .tn-page .tn-compass .pt{ display:block; background:rgba(3,20,38,.72); border:2px solid var(--tn-brass); border-radius:2px; padding:20px 22px 22px; text-decoration:none; color:#fff; text-align:left; position:relative; transition:transform .15s,background .2s; }
body .tn-page .tn-compass .pt:hover,body .tn-page .tn-compass .pt:focus{ background:var(--tn-pine-dk); transform:translateY(-4px); }
.tn-compass .pt.n{ grid-area:n; grid-column:1 / -1; justify-self:center; width:min(100%,420px); }
.tn-compass .pt.s{ grid-area:s; grid-column:1 / -1; justify-self:center; width:min(100%,420px); }
.tn-compass .pt.e{ grid-area:e; }
.tn-compass .pt.w{ grid-area:w; }
.tn-compass .dir{ position:absolute; right:14px; top:8px; font-family:var(--tn-disp); font-weight:700; font-size:2.6rem; line-height:1; color:rgba(156,216,252,.35); }
.tn-compass .pt b{ display:block; font-family:var(--tn-disp); font-weight:700; font-size:1.7rem; line-height:1.05; text-transform:uppercase; color:var(--tn-brass); margin-bottom:6px; padding-right:40px; }
.tn-compass .pt span:last-child{ display:block; font-size:1.02rem; line-height:1.4; color:#E4EDF5; }
@media (max-width:860px){ .tn-compass{ grid-template-columns:minmax(0,1fr); grid-template-areas:"mid" "n" "e" "s" "w"; gap:16px; } .tn-compass .mid{ width:170px; height:170px; justify-self:center; } .tn-compass .pt.n,.tn-compass .pt.s{ width:100%; grid-column:auto; } }

/* check lists: a copper north arrow for the mark */
.tn-checks{ list-style:none; padding:0!important; margin:18px 0 0!important; display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; }
.tn-checks li{ position:relative; padding-left:34px; margin:0; font-size:1.08rem; line-height:1.3; }
.tn-checks li::before{ content:""; position:absolute; left:0; top:1px; width:22px; height:22px; background:var(--tn-copper); clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%); transform:rotate(90deg); }
.tn-band .tn-checks li::before,.tn-reach .tn-checks li::before{ background:var(--tn-brass); }
.tn-band.copper .tn-checks li::before{ background:var(--tn-pine-dk); }
body .tn-page .tn-checks a{ color:var(--tn-pine); font-weight:600; text-decoration:none; border-bottom:2px solid var(--tn-brass); }
body .tn-page .tn-checks a:hover{ color:var(--tn-copper); }
body .tn-page .tn-band .tn-checks a{ color:#fff!important; border-bottom-color:rgba(255,255,255,.45); }
body .tn-page .tn-band .tn-checks a:hover{ border-bottom-color:#fff; }
.tn-checks.one{ grid-template-columns:1fr; }
@media (max-width:640px){ .tn-checks{ grid-template-columns:1fr; gap:13px; } }

/* ---------- service and town pages: the copy, with the form riding beside it ---------- */
.tn-two .cols{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:64px; align-items:start; }
.tn-two .main > * { min-width:0; }
body .tn-page .tn-two .main h3{ margin:1.5em 0 .3em; }
.tn-two .side{ position:sticky; top:120px; display:grid; gap:26px; }
.tn-note{ background:var(--tn-paper); border-left:8px solid var(--tn-copper); padding:26px 28px 12px; margin:40px 0 8px; }
body .tn-page .tn-two .main .tn-note h3{ margin-top:0; }
body .tn-page .tn-sidecall{ display:block; background:var(--tn-pine); color:#fff; text-decoration:none; padding:20px 24px; border-radius:2px; border:2px solid var(--tn-pine-dk); box-shadow:8px 8px 0 var(--tn-copper); margin-right:8px; }
.tn-sidecall span{ display:block; font-size:1rem; color:#D6E3EF; }
.tn-sidecall b{ display:block; font-family:var(--tn-disp); font-weight:700; font-size:2.2rem; line-height:1.05; color:var(--tn-brass); white-space:nowrap; }
body .tn-page .tn-sidecall:hover b{ color:#fff; }
.tn-frame{ margin:34px 0 0; border:2px solid var(--tn-pine-dk); box-shadow:8px 8px 0 var(--tn-copper); line-height:0; }
.tn-frame img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.tn-contact .cols{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:56px; align-items:start; }
.tn-contact{ padding-top:64px; }
@media (max-width:980px){ .tn-two .cols,.tn-contact .cols{ grid-template-columns:minmax(0,1fr); gap:44px; } .tn-two .side{ position:static; } }

/* ---------- steps on a ruler ---------- */
.tn-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:44px; counter-reset:step; text-align:left; border-top:4px solid var(--tn-pine); }
.tn-steps .st{ position:relative; padding:34px 30px 6px 30px; border-left:2px dashed var(--tn-line); }
.tn-steps .st:first-child{ border-left:0; padding-left:0; }
.tn-steps .st::before{ counter-increment:step; content:"0" counter(step); display:block; font-family:var(--tn-disp); font-weight:700; font-size:3.4rem; line-height:1; color:var(--tn-copper); margin-bottom:10px; }
.tn-steps .st::after{ content:""; position:absolute; left:-2px; top:-4px; width:4px; height:20px; background:var(--tn-pine); }
.tn-steps .st:first-child::after{ left:0; }
body .tn-page .tn-steps h3{ margin-bottom:.3em; }
body .tn-page .tn-steps p{ margin:0; }
@media (max-width:860px){ .tn-steps{ grid-template-columns:minmax(0,1fr); border-top:0; border-left:4px solid var(--tn-pine); } .tn-steps .st,.tn-steps .st:first-child{ border-left:0; padding:0 0 30px 26px; } .tn-steps .st::after,.tn-steps .st:first-child::after{ left:-4px; top:22px; width:20px; height:4px; } }

/* ---------- reviews slot ---------- */
.tn-reviews{ padding:72px 0; }
.tn-reviews-slot{ margin-top:14px; min-height:0; }

/* ---------- cards ---------- */
.tn-card{ background:var(--tn-white); border:2px solid var(--tn-pine-dk); border-top:10px solid var(--tn-pine); border-radius:2px; padding:26px 28px 30px; box-shadow:8px 8px 0 var(--tn-brass); margin-right:8px; }
.tn-info .it{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start; margin-top:20px; }
.tn-info .it > div{ min-width:0; }
.tn-info .it .ic{ width:48px; height:48px; border-radius:2px; background:var(--tn-pine); color:var(--tn-brass); display:flex; align-items:center; justify-content:center; }
.tn-info .it .ic svg{ width:24px; height:24px; }
.tn-info .it b{ display:block; font-family:var(--tn-disp); font-weight:700; font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase; color:var(--tn-pine); line-height:1.2; }
body .tn-page .tn-info .it p{ margin:0; font-size:1.05rem; }
body .tn-page a[href^="mailto:"]{ overflow-wrap:anywhere; word-break:break-word; }

/* ---------- town links ---------- */
.tn-areas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
body .tn-page .tn-areas a{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px 10px; border-radius:2px; background:var(--tn-white); border:2px solid var(--tn-pine); color:var(--tn-pine); font-family:var(--tn-disp); font-weight:600; font-size:1.2rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:background .2s,color .2s; }
body .tn-page .tn-areas a svg{ width:18px; height:18px; color:var(--tn-copper); }
body .tn-page .tn-areas a:hover,body .tn-page .tn-areas a.now{ background:var(--tn-pine); color:#fff; }
body .tn-page .tn-areas a:hover svg,body .tn-page .tn-areas a.now svg{ color:var(--tn-brass); }
@media (max-width:640px){ .tn-areas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } body .tn-page .tn-areas a{ padding:11px 8px 10px; font-size:1rem; white-space:nowrap; gap:6px; justify-content:center; } }
.tn-towns{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:40px; text-align:left; }
body .tn-page .tn-towns a{ display:block; background:var(--tn-white); border:2px solid var(--tn-pine-dk); border-left:10px solid var(--tn-copper); border-radius:2px; box-shadow:8px 8px 0 var(--tn-pine-lt); padding:22px 24px; text-decoration:none; color:var(--tn-text); transition:transform .18s; }
body .tn-page .tn-towns a:hover{ transform:translate(-3px,-3px); }
.tn-towns .st{ font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tn-copper); }
body .tn-page .tn-towns h3{ margin:.1em 0 .3em; }
body .tn-page .tn-towns p{ margin:0; font-size:1rem; }
@media (max-width:900px){ .tn-towns{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; } }
@media (max-width:600px){ .tn-towns{ grid-template-columns:minmax(0,1fr); } body .tn-page .tn-towns a{ margin-right:8px; } }

/* ---------- FAQ ---------- */
.tn-faq .uk-accordion{ margin:30px 0 0; padding:0; list-style:none; text-align:left; border-top:4px solid var(--tn-pine); }
body .tn-page .tn-faq .uk-accordion > li{ margin:0!important; padding:0!important; border-top:0; border-bottom:2px dashed var(--tn-line); background:transparent; }
body .tn-page .tn-faq .uk-accordion-title{ display:block; margin:0; font-family:var(--tn-disp); font-weight:700; font-size:1.5rem; line-height:1.15; text-transform:uppercase; color:var(--tn-pine); padding:20px 56px 18px 0; position:relative; text-decoration:none; }
.tn-faq .uk-accordion-title::before{ content:""; position:absolute; right:4px; top:50%; width:30px; height:30px; margin-top:-15px; background:var(--tn-copper); clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%); transform:rotate(180deg); transition:transform .2s; }
.tn-faq .uk-open > .uk-accordion-title::before{ transform:rotate(0deg); }
.tn-faq .uk-accordion-content{ margin:0; padding:0 56px 22px 0; }
body .tn-page .tn-faq .uk-accordion-content p{ margin:0; }

/* ---------- long form text (legal pages) ---------- */
body .tn-page .tn-prose h2{ font-size:1.9rem; margin:1.5em 0 .3em; }
body .tn-page .tn-prose h2:first-child{ margin-top:0; }

/* ---------- closing contact band ---------- */
.tn-reach{ position:relative; isolation:isolate; background-color:var(--tn-pine-dk); color:#fff; padding:104px 0 96px; overflow:hidden;
  background-image:repeating-radial-gradient(ellipse 120% 90% at 85% 50%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46px,rgba(255,255,255,.04) 47px,rgba(255,255,255,0) 49px); }
.tn-reach::before{ content:""; position:absolute; left:0; right:0; top:0; height:18px; color:var(--tn-brass); pointer-events:none;
  background-image:repeating-linear-gradient(90deg,currentColor 0,currentColor 2px,transparent 2px,transparent 14px),repeating-linear-gradient(90deg,currentColor 0,currentColor 2px,transparent 2px,transparent 70px);
  background-size:auto 9px,auto 18px; background-repeat:repeat-x,repeat-x; opacity:.6; }
.tn-reach .tn-rose{ left:-220px; right:auto; color:rgba(156,216,252,.13); }
.tn-reach .grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:center; }
body .tn-page .tn-reach h2{ color:#fff; font-size:clamp(2.5rem,5vw,4.2rem); line-height:.98; margin-bottom:.2em; }
body .tn-page .tn-reach .sub{ color:var(--tn-brass); font-family:var(--tn-disp); font-weight:600; font-size:1.5rem; letter-spacing:.05em; text-transform:uppercase; margin:0 0 1em; }
.tn-reach .tn-checks li{ font-size:1.18rem; color:#fff; }
.tn-reachcard{ background:var(--tn-white); border:2px solid var(--tn-brass); border-top:10px solid var(--tn-copper); border-radius:2px; box-shadow:10px 10px 0 rgba(0,0,0,.35); padding:30px 32px 34px; display:flex; flex-direction:column; align-items:flex-start; margin-right:10px; }
.tn-reachcard .lb{ font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tn-copper); }
body .tn-page .tn-reachcard .big{ font-family:var(--tn-disp); font-weight:700; font-size:clamp(2.6rem,4.4vw,3.6rem); line-height:1; color:var(--tn-pine); text-decoration:none; white-space:nowrap; margin:2px 0 20px; }
body .tn-page .tn-reachcard .big:hover{ color:var(--tn-copper); }
body .tn-page .tn-reachcard .em{ font-weight:600; font-size:1.1rem; color:var(--tn-pine); margin:2px 0 26px; overflow-wrap:anywhere; }
@media (max-width:980px){ .tn-reach{ padding:80px 0 68px; } .tn-reach .grid{ grid-template-columns:minmax(0,1fr); gap:40px; } .tn-reachcard{ padding:24px 22px 28px; } .tn-reachcard .tn-btn{ width:100%; } }

/* ---------- header ---------- */
body .tm-toolbar.tm-toolbar-default{ background:var(--tn-pine-dk)!important; background-image:none!important; color:#fff; padding-top:7px; padding-bottom:7px; }
body .tm-toolbar .uk-container{ max-width:none; padding-left:40px; padding-right:40px; }
.tn-tb{ display:flex; align-items:center; gap:0; font-family:var(--tn-body); font-size:.95rem; color:#fff; }
.tn-tb .say{ font-family:var(--tn-disp); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tn-brass); font-size:1.05rem; }
body .tn-tb a{ color:#fff; text-decoration:none; font-weight:600; padding:0 18px; border-left:1px solid rgba(255,255,255,.22); display:inline-flex; align-items:center; gap:8px; line-height:1.2; }
body .tn-tb a:first-child{ border-left:0; }
body .tn-tb a:hover{ color:var(--tn-brass); }
body .tn-tb a.tn-btn{ border:2px solid var(--tn-copper); padding:0 18px; min-height:38px; font-size:1.05rem; margin-left:18px; box-shadow:none; }
body .tn-tb a.tn-btn:hover{ color:#fff; transform:none; }
body .tm-header .uk-navbar-container{ background:var(--tn-white); border-bottom:4px solid var(--tn-copper); }
body .tm-header .uk-navbar-nav > li > a{ font-family:var(--tn-disp); font-weight:600; color:var(--tn-ink); text-transform:uppercase; font-size:1.28rem; letter-spacing:.05em; min-height:96px; }
body .tm-header .uk-navbar-nav{ gap:26px; }
body .tm-header .uk-navbar-nav > li:hover > a,body .tm-header .uk-navbar-nav > li.uk-active > a{ color:var(--tn-copper); }
body .tm-header .uk-navbar-nav > li > a::before{ background-color:var(--tn-copper)!important; border-color:var(--tn-copper)!important; }
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:var(--tn-white); border-radius:2px; border:2px solid var(--tn-pine-dk); border-top:6px solid var(--tn-copper); box-shadow:8px 8px 0 rgba(3,20,38,.18); padding:14px 22px; width:330px; }
body .uk-navbar-dropdown-nav > li > a{ color:var(--tn-ink); font-family:var(--tn-body); font-weight:600; padding:7px 0; }
body .uk-navbar-dropdown-nav > li > a:hover{ color:var(--tn-copper); }
body .uk-logo{ flex-shrink:0; }
body .tm-header .uk-logo img{ max-height:68px; width:auto; }
@media (min-width:1100px) and (max-width:1380px){ body .tm-header .uk-logo img{ max-height:54px; } body .tm-header .uk-navbar-nav{ gap:14px; } body .tm-header .uk-navbar-nav > li > a{ font-size:1.12rem; } }
body .uk-offcanvas-bar{ background:var(--tn-pine-dk); }
body .uk-offcanvas-bar .uk-nav > li > a{ color:#fff; font-family:var(--tn-disp); font-weight:600; font-size:1.4rem; letter-spacing:.05em; text-transform:uppercase; }
body .uk-offcanvas-bar .uk-nav-sub a{ color:#C9D6E2; }
body .uk-offcanvas-bar .uk-nav-parent-icon > a::after{ filter:invert(1); }
body .tm-header-mobile .uk-navbar-container{ background:var(--tn-white)!important; border-bottom:4px solid var(--tn-copper); }
body .tm-header-mobile .uk-container{ padding-left:20px!important; padding-right:20px!important; }
body .tm-header-mobile .uk-logo img{ max-height:46px; width:auto; }
body .tm-header-mobile .uk-navbar-toggle{ color:var(--tn-ink); }

/* mobile sticky call bar (HFCM Mobile Buttons). One reservation, the bar's own height */
body .mobile-buttons{ display:none; }
@media (max-width:1099px){
  html,body{ background:#fff!important; }
  html{ padding-top:0!important; margin-top:0!important; }
  body{ margin-top:0!important; padding-top:0!important; padding-bottom:0; }
  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:56px; box-sizing:border-box; border:0!important; font-family:var(--tn-disp); font-weight:700; font-size:1.2rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:#fff; }
  body .mobile-buttons .button-left{ background:var(--tn-copper)!important; color:#fff!important; }
  body .mobile-buttons .button-right{ background:var(--tn-pine)!important; color:#fff!important; }
  body .tm-page{ padding-top:56px!important; margin-top:0!important; }
}

/* ---------- footer ---------- */
body footer.tm-footer,body .tm-footer .uk-section-default{ background:var(--tn-pine-dk); }
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; }
.tn-footer{ background:var(--tn-pine-dk); border-top:6px solid var(--tn-copper); color:#C9D6E2; font-family:var(--tn-body); font-size:1.02rem; }
.tn-footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:64px 0 44px; }
.tn-footer .tn-fh{ color:var(--tn-brass); font-family:var(--tn-disp); font-weight:700; font-size:1.4rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; }
.tn-footer ul{ list-style:none; padding:0; margin:0; }
.tn-footer li{ margin:0 0 9px; }
.tn-footer a{ color:#fff; text-decoration:none; }
body .tn-footer a:hover{ color:var(--tn-brass); }
.tn-footer .mark{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.tn-footer .mark img{ width:72px; height:72px; display:block; }
.tn-footer .mark b{ display:block; color:#fff; font-family:var(--tn-disp); font-weight:700; font-size:2.1rem; line-height:.95; letter-spacing:.03em; text-transform:uppercase; }
.tn-footer .mark span{ display:block; color:var(--tn-brass); font-family:var(--tn-disp); font-weight:600; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; margin-top:5px; }
.tn-footer .brand p{ max-width:360px; margin:0 0 12px; }
.tn-phone{ display:inline-block; font-family:var(--tn-disp); font-weight:700; font-size:2rem; line-height:1.1; text-decoration:none!important; }
.tn-footer .brand .tn-phone{ color:#fff; }
.tn-footer .bottom{ border-top:1px solid rgba(255,255,255,.16); padding:20px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.92rem; color:#9DB0C2; }
.tn-footer .bottom a{ color:#9DB0C2; }
@media (max-width:900px){ .tn-footer .top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .tn-footer .top{ grid-template-columns:1fr 1fr; gap:28px 16px; text-align:center; padding:44px 0 28px; }
  .tn-footer .brand{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; }
  .tn-footer .mark{ flex-direction:column; gap:10px; text-align:center; }
  .tn-footer .brand p{ max-width:320px; margin:0 auto 12px; }
  .tn-footer .bottom{ justify-content:center; text-align:center; flex-direction:column; gap:6px; }
  .tn-footer .top > div:last-child{ grid-column:1 / -1; }
}

/* ---------- v2: fixes from the first look ---------- */
.tn-rose .n{ color:rgba(42,143,224,.38); }
.tn-reach .tn-rose .n{ color:rgba(42,143,224,.22); }
body .tn-page .tn-formwrap iframe{ height:780px!important; max-height:780px; }   /* 2026-10-12: 780 measured after the service + town fields went on the form */
@media (max-width:640px){ body .tn-page .tn-formwrap iframe{ height:790px!important; max-height:790px; } }

/* ---------- v4: the working compass, cleaned up (Zack 9/29: likes the turn, wanted it cleaner) ----------
   A solid dial with one two tone needle. The needle turns to the card you point at and sways when idle. */
.tn-compass{ grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr); gap:30px 40px; max-width:1100px; margin-top:52px; }
.tn-compass .mid{ width:300px; height:300px; overflow:visible; filter:drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
.tn-compass .mid .rim{ fill:var(--tn-pine-dk); stroke:var(--tn-brass); stroke-width:8; }
.tn-compass .mid .face{ fill:#061A30; stroke:rgba(156,216,252,.35); stroke-width:2; }
.tn-compass .mid .ticks line{ stroke:var(--tn-brass); stroke-linecap:round; }
.tn-compass .mid .ticks .min{ stroke-width:2; opacity:.45; }
.tn-compass .mid .ticks .maj{ stroke-width:5; }
.tn-compass .mid .star{ fill:rgba(156,216,252,.1); stroke:rgba(156,216,252,.3); stroke-width:1.5; stroke-linejoin:round; }
.tn-compass .mid .na{ fill:#2A8FE0; }
.tn-compass .mid .nb{ fill:#125A9C; }
.tn-compass .mid .sa{ fill:#FFFFFF; }
.tn-compass .mid .sb{ fill:#C3CDD6; }
.tn-compass .mid .hub{ fill:var(--tn-brass); }
.tn-compass .mid .pin{ fill:var(--tn-pine-dk); }
.tn-compass .mid .needle{ transform-box:view-box; transform-origin:50% 50%; transform:rotate(0deg); transition:transform 1s cubic-bezier(.3,1.5,.5,1); animation:tn-needle 6s ease-in-out infinite; }
@keyframes tn-needle{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
.tn-compass:has(.pt:hover) .mid .needle,.tn-compass:has(.pt:focus) .mid .needle{ animation:none; }
.tn-compass:has(.pt.n:hover) .mid .needle,.tn-compass:has(.pt.n:focus) .mid .needle{ transform:rotate(0deg); }
.tn-compass:has(.pt.e:hover) .mid .needle,.tn-compass:has(.pt.e:focus) .mid .needle{ transform:rotate(90deg); }
.tn-compass:has(.pt.s:hover) .mid .needle,.tn-compass:has(.pt.s:focus) .mid .needle{ transform:rotate(180deg); }
.tn-compass:has(.pt.w:hover) .mid .needle,.tn-compass:has(.pt.w:focus) .mid .needle{ transform:rotate(-90deg); }
/* the cards: solid, and the one you point at lights up */
body .tn-page .tn-compass .pt{ background:var(--tn-pine-dk); border:2px solid rgba(156,216,252,.55); padding:22px 26px 24px; transition:transform .2s,border-color .2s,box-shadow .2s; }
body .tn-page .tn-compass .pt:hover,body .tn-page .tn-compass .pt:focus{ background:var(--tn-pine-dk); border-color:var(--tn-brass); box-shadow:6px 6px 0 var(--tn-copper); transform:translate(-3px,-3px); }
.tn-compass .pt.n,.tn-compass .pt.s{ width:min(100%,440px); }
.tn-compass .dir{ right:18px; top:14px; font-size:2.2rem; color:rgba(156,216,252,.4); transition:color .3s; }
body .tn-page .tn-compass .pt:hover .dir,body .tn-page .tn-compass .pt:focus .dir{ color:#5BB8F5; }
@media (max-width:1000px){ .tn-compass{ grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr); gap:24px; } .tn-compass .mid{ width:220px; height:220px; } }
@media (max-width:860px){ .tn-compass{ grid-template-columns:minmax(0,1fr); gap:16px; } .tn-compass .mid{ width:190px; height:190px; justify-self:center; margin-bottom:10px; } .tn-compass .pt.n,.tn-compass .pt.s{ width:100%; } body .tn-page .tn-compass .pt{ margin-right:6px; } }
@media (prefers-reduced-motion:reduce){ .tn-compass .mid .needle{ animation:none; } }

/* ---------- v5: the needle follows the mouse (HFCM footer row True North Compass sets the angle) ---------- */
.tn-compass.tn-track .mid .needle{ animation:none; transition:transform .25s cubic-bezier(.2,.9,.3,1.2); }

/* ---------- v6: the needle is driven by the script frame by frame, so no transition while it tracks ---------- */
.tn-compass.tn-track .mid .needle{ animation:none!important; transition:none!important; }
@keyframes tn-needle{ 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-4deg); } 75%{ transform:rotate(4deg); } }

/* ---------- v7: their real logo is a round badge, it needs more height than the stand in ---------- */
body .tm-header .uk-logo img{ max-height:84px; }
body .tm-header .uk-navbar-nav > li > a{ min-height:108px; }
@media (min-width:1100px) and (max-width:1380px){ body .tm-header .uk-logo img{ max-height:66px; } }
body .tm-header-mobile .uk-logo img{ max-height:54px; }
.tn-footer .mark img{ width:84px; height:84px; }

/* ---------- v9: phone and tablet, the N and S cards stuck out 3px past E and W (found by the 9/29 QA run) ---------- */
@media (max-width:860px){ .tn-compass .pt.n,.tn-compass .pt.s{ width:auto; justify-self:stretch; } body .tn-page .tn-compass .pt{ margin-right:0; } }

/* before and after pairs, 2026-10-04 */
.tn-ba{ margin:40px 0 0; }
.tn-ba h3{ margin:0 0 14px; }
.tn-ba-pair{ margin:0 0 26px; }
.tn-ba-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tn-ba figure{ margin:0; position:relative; border:2px solid var(--tn-pine-dk); line-height:0; }
.tn-ba img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.tn-ba figcaption{ position:absolute; left:0; top:0; line-height:1; padding:6px 10px; font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.08em; color:#fff; background:var(--tn-pine-dk); }
.tn-ba figure + figure figcaption{ background:var(--tn-copper); }
.tn-ba-pair p{ margin:8px 0 0; font-size:.95rem; }
@media (max-width:560px){ .tn-ba-row{ grid-template-columns:1fr; } }

/* work galleries, 2026-10-04 */
.tn-gal{ margin:34px 0; }
.tn-gal .g{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tn-gal .g a{ display:block; aspect-ratio:4/3; overflow:hidden; border:2px solid var(--tn-pine); background:var(--tn-pine); }
.tn-gal .g img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.tn-gal .g a:hover img{ transform:scale(1.04); }
@media (max-width:700px){ .tn-gal .g{ grid-template-columns:repeat(2,1fr); gap:8px; } }

/* ---------- v13: "Recent work" photo grid on pages that had no job photos (2026-10-12) ---------- */
.tn-work{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:34px; }
.tn-work a{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--tn-pine); border:2px solid var(--tn-pine); }
.tn-work img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.tn-work a:hover img{ transform:scale(1.05); }
.tn-work span{ position:absolute; left:0; bottom:0; padding:7px 12px; background:var(--tn-pine); color:#fff; font-family:var(--tn-disp); font-weight:600; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; }
.tn-work a:hover span{ background:var(--tn-copper); }
@media (max-width:900px){ .tn-work{ grid-template-columns:repeat(2,1fr); gap:8px; } .tn-work span{ font-size:.8rem; padding:5px 9px; } }

/* ---------- v17: Justin's content day video loops (2026-10-12) ---------- */
.tn-vids{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px; }
.tn-vids.one{ grid-template-columns:minmax(0,360px); margin:30px 0; }
.tn-vid{ margin:0; background:var(--tn-pine); border:2px solid var(--tn-pine); box-shadow:8px 8px 0 var(--tn-pine-lt); }
.tn-vid video{ display:block; width:100%; aspect-ratio:9/14; object-fit:cover; background:var(--tn-pine); }
.tn-vid figcaption{ padding:9px 14px; color:#fff; font-family:var(--tn-disp); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:760px){ .tn-vids{ grid-template-columns:repeat(3,72vw); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; } .tn-vid{ scroll-snap-align:start; } .tn-vids.one{ grid-template-columns:minmax(0,1fr); overflow:visible; } }

/* ---------- v18: family-run badge in the top bar, Jeff's photo on About (2026-10-12) ---------- */
.tn-tb .say .fam{ display:inline-block; background:var(--tn-copper); color:#fff; padding:4px 10px 3px; margin-right:12px; letter-spacing:.14em; font-weight:700; box-shadow:3px 3px 0 var(--tn-pine-dk); }
.tn-owner{ margin:0; max-width:480px; }
.tn-frame.tn-owner{ line-height:1.3; }
.tn-frame.tn-owner img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.tn-owner figcaption{ padding:10px 14px; background:var(--tn-pine); color:#fff; font-family:var(--tn-disp); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.95rem; }

/* ---------- v20: work photo behind the home hero, compass rose kept on top (Zack 2026-10-12: "change the image to a work one") ---------- */
.tn-hero.home{ background-color:var(--tn-pine);
  background-image:linear-gradient(90deg, rgba(3,20,38,.95) 0%, rgba(5,28,50,.88) 45%, rgba(7,35,63,.72) 100%), url(/wp-content/uploads/tn/true-north-handyman-remodeling-job-deck-and-screened-porch.jpg);
  background-size:cover, cover; background-position:center, center 40%; background-repeat:no-repeat; }
@media (max-width:900px){
  .tn-hero.home{ background-image:linear-gradient(180deg, rgba(7,35,63,.78) 0%, rgba(3,20,38,.92) 60%, rgba(3,20,38,.96) 100%), url(/wp-content/uploads/tn/true-north-handyman-remodeling-job-deck-and-screened-porch.jpg);
    background-position:center, 30% center; }
}

/* ---------- v24: services index evened out (Zack 2026-10-12: "a 3x3 and then a 2 by itself") ----------
   6 column grid: row 1 = three groups of 2 columns; row 2 = Pools across 4 columns with its 4 jobs 2 by 2, Builders 2 columns.
   Every card in a row stretches to the same height. Phones keep the single column (the 1000px rule above). */
@media (min-width:1001px){
  .tn-index{ grid-template-columns:repeat(6,minmax(0,1fr)); align-items:stretch; }
  .tn-index .grp{ grid-column:span 2; }
  .tn-index .grp.g-pool{ grid-column:span 4; display:grid; grid-template-columns:1fr 1fr; align-content:start; }
  body .tn-page .tn-index .g-pool h3{ grid-column:1 / -1; }
  body .tn-page .tn-index .g-pool h3 + .row + .row{ border-top:0; }
  body .tn-page .tn-index .g-pool .row:nth-of-type(odd){ border-right:2px dashed var(--tn-line); }
}

/* ---------- v25: before/after drag sliders (Zack 2026-10-12: "make it more interactive") ---------- */
.tn-ba .hint{ margin:-6px 0 16px; font-size:.95rem; color:var(--tn-muted); }
.tn-bas{ position:relative; aspect-ratio:4/3; overflow:hidden; border:2px solid var(--tn-pine-dk); box-shadow:8px 8px 0 var(--tn-pine-lt); background:var(--tn-pine); user-select:none; touch-action:pan-y; }
.tn-bas img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:auto; }
.tn-bas .bw{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.tn-bas .tag{ position:absolute; top:12px; z-index:2; padding:6px 10px 5px; line-height:1; font-family:var(--tn-disp); font-weight:700; font-size:.95rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; pointer-events:none; }
.tn-bas .tag.l{ left:12px; background:var(--tn-pine-dk); }
.tn-bas .tag.r{ right:12px; background:var(--tn-copper); }
.tn-bas .bar{ position:absolute; top:0; bottom:0; left:var(--pos); width:4px; margin-left:-2px; background:#fff; z-index:2; pointer-events:none; box-shadow:0 0 0 1px rgba(3,20,38,.25); }
.tn-bas .knob{ position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:var(--tn-copper); border:3px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.tn-bas .knob::before,.tn-bas .knob::after{ content:""; position:absolute; top:50%; margin-top:-6px; border:6px solid transparent; }
.tn-bas .knob::before{ left:5px; border-right-color:#fff; }
.tn-bas .knob::after{ right:5px; border-left-color:#fff; }
.tn-bas input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3; -webkit-appearance:none; appearance:none; }
.tn-ba-pair p{ margin:12px 0 0; font-size:1rem; line-height:1.45; }
.tn-ba-pair p b{ display:block; font-family:var(--tn-disp); font-size:1.3rem; letter-spacing:.03em; text-transform:uppercase; color:var(--tn-pine); }

/* ---------- v26: interactive "How it works" (Zack 2026-10-12) ---------- */
.tn-steps.fx{ position:relative; gap:18px; border-top-color:var(--tn-pine-lt); }
.tn-steps.fx::before{ content:""; position:absolute; left:0; top:-4px; height:4px; width:0; background:var(--tn-copper); transition:width 1.4s cubic-bezier(.2,.7,.2,1); }
.tn-steps.fx.in::before{ width:100%; }
.tn-steps.fx .st,.tn-steps.fx .st:first-child{ border-left:0; padding:30px 28px 28px; background:transparent; border:2px solid transparent; cursor:pointer; outline:none;
  opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease, background .25s, box-shadow .25s, border-color .25s; }
.tn-steps.fx.in .st{ opacity:1; transform:none; }
.tn-steps.fx.in .st:nth-child(2){ transition-delay:.18s, .18s, 0s, 0s, 0s; }
.tn-steps.fx.in .st:nth-child(3){ transition-delay:.36s, .36s, 0s, 0s, 0s; }
.tn-steps.fx .st::after{ display:none; }
.tn-steps.fx .st::before{ color:rgba(18,104,179,.35); transition:color .25s; }
.tn-steps.fx .si{ position:absolute; top:28px; right:26px; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--tn-pine-lt); color:var(--tn-pine); transition:background .25s, color .25s, transform .25s; }
.tn-steps.fx .si svg{ width:26px; height:26px; }
.tn-steps.fx .st.on,.tn-steps.fx .st:focus-visible{ background:#fff; border-color:var(--tn-pine-dk); box-shadow:8px 8px 0 var(--tn-copper); }
.tn-steps.fx .st.on::before{ color:var(--tn-copper); }
.tn-steps.fx .st.on .si{ background:var(--tn-copper); color:#fff; transform:rotate(-8deg) scale(1.06); }
@media (max-width:860px){
  .tn-steps.fx{ border-left:0; border-top:0; gap:14px; }
  .tn-steps.fx::before{ top:0; left:-2px; width:4px; height:0; transition:height 1.4s cubic-bezier(.2,.7,.2,1); }
  .tn-steps.fx.in::before{ width:4px; height:100%; }
  .tn-steps.fx .st,.tn-steps.fx .st:first-child{ padding:24px 22px 22px 24px; }
  .tn-steps.fx .si{ top:22px; right:20px; width:46px; height:46px; }
}
@media (prefers-reduced-motion: reduce){ .tn-steps.fx .st,.tn-steps.fx::before,.tn-steps.fx .si{ transition:none!important; } }

/* ---------- v27: captions ON the photo, bold over a dark fade, never plain text under (Zack's rule, 2026-10-12) ---------- */
.tn-bas .cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none; padding:46px 18px 16px; background:linear-gradient(180deg, rgba(3,20,38,0) 0%, rgba(3,20,38,.85) 100%);
  color:#fff; font-family:var(--tn-disp); font-weight:700; font-size:1.35rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.1; }
.tn-bas .cap::before{ content:""; display:block; width:34px; height:3px; background:var(--tn-brass); margin-bottom:8px; }
.tn-ba-pair{ margin:0 0 30px; }
.tn-frame.tn-owner,.tn-vid{ position:relative; }
.tn-owner figcaption,.tn-vid figcaption{ position:absolute; left:0; right:0; bottom:0; padding:48px 18px 16px; background:linear-gradient(180deg, rgba(3,20,38,0) 0%, rgba(3,20,38,.85) 100%);
  color:#fff; font-family:var(--tn-disp); font-weight:700; font-size:1.2rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.15; pointer-events:none; }
.tn-owner figcaption::before,.tn-vid figcaption::before{ content:""; display:block; width:34px; height:3px; background:var(--tn-brass); margin-bottom:8px; }
.tn-owner img,.tn-vid video{ transition:transform .6s ease; }
.tn-frame.tn-owner{ overflow:hidden; }
.tn-frame.tn-owner:hover img{ transform:scale(1.03); }

/* v28 2026-10-13 top bar badge is "Family Owned & Operated" (Jeff). Keep the bar on one line: links never wrap, the county line drops under 1400px */
.tn-tb .say{ white-space:nowrap; }
body .tn-tb a{ white-space:nowrap; }
@media (max-width:1399px){ .tn-tb .say .ar{ display:none; } }