@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* Top Property Inspections — "The Descent"
   Tokens live in :root. See DESIGN.md. Everything below references tokens only. */
:root{
  --night:#0e1315;      /* roof & attic field */
  --night-2:#182023;    /* raised surface on night */
  --bg:#e2e4e6;         /* cool logo-grey ground (report paper sits on it) */
  --paper:#f5f6f7;      /* the report paper */
  --surface:#d4d8db;    /* tone step on the ground */
  --ink:#141414;        /* all type on light */
  --muted:#4c5359;      /* secondary notes on light (6.1:1 on --bg) */
  --on-night:#f5f6f7;   /* type on night */
  --on-night-2:#b9c1c3; /* secondary on night (9:1) */
  --accent:#c42d34;     /* logo red, deepened for white text (5.6:1): the one action */
  --logo-red:#d0333a;   /* the logo's check */
  --logo-grey:#a8aeb4;  /* the logo's letters */
  --red-text:#b3262d;   /* red text on light grounds (5.1:1) */
  --accent-hover:#a3232a;
  --accent-ink:#ffffff;
  --accent-night:#ff8a90; /* logo red readable on night (8.3:1) */
  --beam:#ffe3a3;       /* flashlight warm */
  --water:#9ccfdc;
  --wood:#8a5a32;

  --f:"Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --step-small:clamp(0.8125rem,0.79rem + 0.1vw,0.875rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-hero:clamp(2.6rem,1.2rem + 4.4vw,5.4rem);

  --m:clamp(30px,4.2vw,64px);      /* outer margin (ladder lives inside it) */
  --max:1360px;
  --gap:clamp(110px,12vw,200px);   /* between sections */
  --r:22px;                        /* sheet radius (only on sheets) */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-ui:220ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--f);font-size:var(--step-body);line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
h2{font-size:var(--step-head)}
h3{font-size:var(--step-lead);letter-spacing:-.02em;line-height:1.15}
:focus-visible{outline:3px solid var(--accent-night);outline-offset:3px;border-radius:2px}
.light :focus-visible,.paper :focus-visible{outline-color:var(--accent)}
::selection{background:var(--beam);color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px;font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--m));margin:0 auto;padding:0 var(--m)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.btn{--bfill:var(--accent);--bink:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 1.5em;background:var(--bfill);color:var(--bink);font-weight:600;font-size:1rem;letter-spacing:-.01em;text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:background-color var(--t-ui) ease,transform var(--t-ui) var(--ease);will-change:transform}
.btn:hover{--bfill:var(--accent-hover)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn--paper{--bfill:var(--paper);--bink:var(--ink)}
.btn--paper:hover{--bfill:#fff}
.btn--ink{--bfill:var(--ink);--bink:var(--paper)}
.btn--ink:hover{--bfill:#000}
.btn--block{width:100%}
.link{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em;transition:text-decoration-color var(--t-ui) ease,color var(--t-ui) ease}
.link:hover{text-decoration-color:var(--accent)}

/* ---------- Header ---------- */
.topline{position:relative;z-index:41;background:#070a0b;color:var(--on-night-2);font-size:var(--step-small)}
.topline .wrap{display:flex;gap:1.6em;justify-content:space-between;align-items:center;min-height:38px;flex-wrap:wrap}
.topline a{color:var(--on-night);text-decoration:none;font-weight:500}
.topline a:hover{text-decoration:underline}
.topline .tl-right{display:flex;gap:1.4em}
.site-head{position:sticky;top:0;z-index:40;background:var(--night);color:var(--on-night);transition:transform 300ms var(--ease)}
.site-head.is-hidden{transform:translateY(-100%)}
.site-head .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{display:flex;align-items:center;text-decoration:none;line-height:1;margin-right:auto;padding:6px 0}
.brand b{font-weight:600;font-size:1.3rem;letter-spacing:-.03em}
.brand span{font-size:var(--step-small);color:var(--on-night-2);margin-top:5px}
.nav{display:flex;gap:4px;align-items:center}
.nav>a,.nav .dd>button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;background:none;border:0;color:var(--on-night);text-decoration:none;font-size:1rem;font-weight:500;cursor:pointer;transition:color var(--t-ui) ease}
.nav>a:hover,.nav .dd>button:hover,.nav a[aria-current="page"]{color:var(--accent-night)}
.dd{position:relative}
.dd svg{width:12px;height:12px;transition:transform var(--t-ui) var(--ease)}
.dd[data-open] svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:300px;background:var(--paper);color:var(--ink);padding:10px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.dd[data-open] .dd-panel{display:block;animation:ddIn 220ms var(--ease) both}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd-panel a{display:block;padding:11px 14px;text-decoration:none;font-weight:500;transition:background-color var(--t-ui) ease}
.dd-panel a small{display:block;font-weight:400;color:var(--muted);font-size:var(--step-small);margin-top:2px}
.dd-panel a:hover{background:var(--surface)}
.head-cta{min-height:48px}
.menu-btn{display:none;min-height:48px;min-width:48px;background:none;border:0;color:var(--on-night);cursor:pointer;padding:0 6px;font-weight:600}
.menu-btn svg{width:26px;height:26px}
.drawer{position:fixed;inset:0;z-index:60;background:var(--night);color:var(--on-night);display:none;flex-direction:column;padding:20px var(--m) 120px;overflow:auto}
.drawer[data-open]{display:flex;animation:drawerIn 280ms var(--ease) both}
@keyframes drawerIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.drawer-top{display:flex;justify-content:space-between;align-items:center;min-height:56px}
.drawer nav{display:flex;flex-direction:column;margin-top:18px}
.drawer nav a{padding:12px 0;font-size:1.5rem;font-weight:600;letter-spacing:-.03em;text-decoration:none}
.drawer nav .sub{display:flex;flex-direction:column}
.drawer nav .sub a{font-size:1.125rem;font-weight:500;padding:9px 0 9px 16px;color:var(--on-night-2)}
.drawer nav h2{font-size:var(--step-small);font-weight:500;letter-spacing:0;color:var(--on-night-2);margin:18px 0 4px}
.drawer .btn{margin-top:28px}

/* ---------- Ladder (signature) ---------- */
.ladder{position:fixed;top:0;bottom:0;left:calc((var(--m) - 34px)/2);width:34px;z-index:30;pointer-events:none;color:#8d9597}
.ladder .rails{position:absolute;inset:0;}
.ladder .rails::before,.ladder .rails::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:currentColor;border-radius:2px}
.ladder .rails::before{left:4px}.ladder .rails::after{right:4px}
.ladder .rungs{position:absolute;left:6px;right:6px;top:-40px;bottom:-40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='40'%3E%3Crect x='0' y='18' width='22' height='3' rx='1.5' fill='%238d9597'/%3E%3C/svg%3E");background-size:22px 40px;background-repeat:repeat-y;will-change:transform}
.climber{position:absolute;left:50%;top:42vh;width:46px;height:74px;margin-left:-23px;will-change:transform}
.climber svg{width:100%;height:100%;overflow:visible}
.climber .pose-b{display:none}
.climber.step .pose-a{display:none}
.climber.step .pose-b{display:block}
.ladder .depth{position:absolute;display:var(--depth-d,block);left:50%;bottom:22px;transform:translateX(-50%) rotate(-90deg);transform-origin:center;white-space:nowrap;font-size:13px;font-weight:600;color:var(--on-night-2);opacity:.9}
.ladder-ground{position:absolute;left:-4px;right:-4px;height:6px;background:currentColor;border-radius:3px;bottom:0;transform:translateY(100%);transition:transform 300ms var(--ease)}
.ladder.at-bottom .ladder-ground{transform:none}

/* ---------- Sections & sheets ---------- */
main{position:relative;z-index:2;background:var(--night)}
.night{background:var(--night);color:var(--on-night)}
.light{background:var(--bg);color:var(--ink)}
.light-2{background:var(--surface);color:var(--ink)}
.sheet{border-radius:var(--r) var(--r) 0 0;margin-top:calc(-1 * var(--r));position:relative}
main>section,main>div,.reply{position:relative;z-index:1}
main>.pin{position:sticky;top:var(--pin-top,0px);z-index:0}
.sec{padding:var(--gap) 0}
.sec-tight{padding:clamp(80px,9vw,140px) 0}
.lede{font-size:var(--step-lead);line-height:1.4;letter-spacing:-.015em;max-width:34ch}
.note{font-size:var(--step-small);color:var(--muted)}
.night .note{color:var(--on-night-2)}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}

/* ---------- Hero (roof) ---------- */
.hero{position:relative;min-height:min(92svh,980px);overflow:hidden;color:var(--on-night);background:var(--night);display:flex;flex-direction:column}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform-origin:60% 70%;animation:drift 26s var(--ease) both}
.hero-media::after{content:"";position:absolute;inset:0;background:rgba(6,10,12,.3)}
.hero-media .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,12,.78) 0,rgba(6,10,12,.55) 45%,rgba(6,10,12,0) 75%)}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-in{position:relative;flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-content:end;padding-top:clamp(40px,6vh,80px)}
.hero-copy{grid-column:1/span 8;padding-bottom:clamp(48px,7vh,90px)}
.hero h1{font-size:var(--step-hero);line-height:.95;letter-spacing:-.045em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:block;animation:rise 900ms var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:90ms}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .lede{margin-top:36px;max-width:40ch;color:var(--on-night);animation:fade 700ms ease 250ms both}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;animation:fade 700ms ease 350ms both}
.hero-proof{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:var(--step-small);color:var(--on-night-2);animation:fade 700ms ease 450ms both}
.hero-proof .stars{color:var(--beam);letter-spacing:2px;font-size:1rem}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* the report cover, cropped by the bottom edge */
.cover{grid-column:9/span 4;align-self:end;background:var(--paper);color:var(--ink);padding:32px 32px 56px;margin-bottom:-36px;position:relative;animation:coverIn 1100ms var(--ease) 300ms both}
.cover{-webkit-mask:radial-gradient(circle 16px at 0 0,transparent 15.5px,#000 16px) top left/51% 51% no-repeat,radial-gradient(circle 16px at 100% 0,transparent 15.5px,#000 16px) top right/51% 51% no-repeat,linear-gradient(#000,#000) bottom/100% 50% no-repeat;mask:radial-gradient(circle 16px at 0 0,transparent 15.5px,#000 16px) top left/51% 51% no-repeat,radial-gradient(circle 16px at 100% 0,transparent 15.5px,#000 16px) top right/51% 51% no-repeat,linear-gradient(#000,#000) bottom/100% 50% no-repeat}
@keyframes coverIn{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.cover h2{font-size:1.75rem;letter-spacing:-.03em;line-height:1.05}
.cover .by{font-size:var(--step-small);color:var(--muted);margin:10px 0 22px}
.cover ul{list-style:none;margin:0;padding:0}
.cover li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:1rem}
.cover li span:last-child{font-weight:600;text-align:right}
.dots{flex:1;min-width:16px;border-bottom:4px dotted var(--muted);transform:translateY(-6px);opacity:.55}

/* ---------- Attic (flashlight) ---------- */
.attic-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;margin-bottom:48px}
.attic-head h2{grid-column:1/span 6}
.attic-head p{grid-column:8/span 5;margin:0;color:var(--on-night)}
.torch{position:relative;aspect-ratio:16/9;overflow:hidden;background:#05080a;cursor:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.torch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.torch .dark{filter:brightness(.1) saturate(.4)}
.torch .lit{--x:50%;--y:50%;--r:clamp(110px,15vw,220px);-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0 55%,rgba(0,0,0,.6) 72%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0 55%,rgba(0,0,0,.6) 72%,transparent 100%);filter:sepia(.18) saturate(1.05) brightness(1.08)}
.find{position:absolute;transform:translate(-50%,-50%);width:0;height:0}
.find .ring{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border:3px solid var(--beam);border-radius:50%;opacity:0;transform:scale(.6);transition:opacity 260ms ease,transform 260ms var(--ease)}
.find .tag{position:absolute;left:34px;top:-22px;background:var(--paper);color:var(--ink);padding:10px 14px;width:max-content;max-width:240px;font-size:.9375rem;line-height:1.3;opacity:0;transform:translateY(6px);transition:opacity 260ms ease,transform 260ms var(--ease)}
.find .tag b{display:block}
.find.flip .tag{left:auto;right:34px}
.find.on .ring,.find.on .tag{opacity:1;transform:none}
.find.seen .ring{opacity:.8;transform:none}
.torch-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;color:var(--on-night-2);font-size:var(--step-small)}
.torch-bar strong{color:var(--on-night);font-size:1rem}
.torch.static .dark{filter:brightness(.55)}
.torch.static .lit{display:none}
.torch.static .find .ring,.torch.static .find .tag{opacity:1;transform:none}

/* ---------- Termites ---------- */
.walls{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:center}
.walls .eat{grid-column:1/span 5;position:relative}
.walls .eat img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.eat-layer{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.eat-layer canvas{position:absolute;left:0;top:0;max-width:none}
.walls .copy{grid-column:7/span 6}
.walls .copy .lede{margin:28px 0 30px}
.checklist{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.checklist li{break-inside:avoid;display:flex;gap:12px;padding:8px 0;font-size:1.0625rem}
.checklist svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--red-text)}
.checklist svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 600ms var(--ease)}
.in .checklist svg path,.checklist.in svg path{stroke-dashoffset:0}
.caption{font-size:var(--step-small);color:var(--muted);margin-top:12px}

/* ---------- Plumbing (drips) ---------- */
.plumb-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);margin-bottom:56px;align-items:end}
.plumb-head h2{grid-column:1/span 7}
.plumb-head p{grid-column:9/span 4;margin:0}
.plumb{display:grid;grid-template-columns:7fr 5fr;gap:clamp(16px,2vw,32px);align-items:start}
.plumb figure{margin:0}
.plumb figure:nth-child(2){margin-top:clamp(60px,12vw,180px)}
.drip{position:relative}
.drip img{width:100%;aspect-ratio:4/5;object-fit:cover}
.drip .drops{position:absolute;left:0;right:0;top:100%;height:clamp(120px,14vw,200px);pointer-events:none;overflow:visible}
.drop{position:absolute;top:-4px;width:10px;height:14px;margin-left:-5px;background:var(--water);border-radius:50% 50% 50% 50%/62% 62% 40% 40%;transform-origin:50% 0;opacity:0}
.drop.form{animation:dform var(--hang,1.6s) ease-out forwards}
.drop.fall{animation:dfall var(--fall,520ms) cubic-bezier(.55,0,1,.45) forwards}
@keyframes dform{0%{opacity:0;transform:scale(.2,.1)}35%{opacity:.95}100%{opacity:.95;transform:scale(1,1.15)}}
@keyframes dfall{from{opacity:.95;transform:translateY(0) scale(.9,1.25)}to{opacity:.9;transform:translateY(var(--dist,160px)) scale(.8,1.4)}}
.splash{position:absolute;width:30px;height:8px;margin-left:-15px;border:2px solid var(--water);border-radius:50%;opacity:0;animation:splash 600ms ease-out forwards}
@keyframes splash{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}
.drops-in{position:absolute;inset:0;pointer-events:none}
.drops-in .drop{width:7px;height:10px;margin-left:-3.5px}
.drops-in .splash{width:22px;height:6px;margin-left:-11px}
.drip-edge{position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--water);opacity:.0}
.plumb figure{display:flex;flex-direction:column}
.plumb figcaption{order:-1;font-size:var(--step-small);color:var(--muted);margin:0 0 14px}

/* ---------- Report slips (showcase) ---------- */
.report{position:relative;min-height:96svh;overflow:hidden;color:var(--on-night);display:flex;flex-direction:column}
.report-bg{position:absolute;inset:0}
.report-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.35) saturate(.6)}
.report-copy{position:relative;padding:clamp(90px,12vw,160px) 0 0 18%;max-width:calc(18% + 46ch)}
.report-copy p{font-size:clamp(1.375rem,1rem + 1.2vw,2rem);line-height:1.25;letter-spacing:-.02em}
.report-copy h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.5rem);margin-bottom:22px}
.slips{position:relative;margin-top:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:0 var(--m);align-items:end;min-height:46svh}
.slip{background:var(--paper);color:var(--ink);padding:22px 20px 28px;font-size:.9375rem;line-height:1.4;min-height:var(--h);transform:rotate(var(--rot,0deg));transition:transform 900ms var(--ease),opacity 600ms ease}
.slip b{display:block;font-size:1rem}
.slip .rule{display:block;color:var(--muted);letter-spacing:2px;margin:6px 0 10px;white-space:nowrap;overflow:hidden}
.slip .sev{display:block;margin-top:10px;font-weight:600;color:var(--red-text)}

/* ---------- Itinerary slip ---------- */
.itin{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start}
.itin-copy{grid-column:1/span 5}
.itin-copy .lede{margin-top:28px}
.itin-copy .btn{margin-top:20px}
.slipcard{grid-column:7/span 6;max-width:540px;justify-self:end;width:100%;background:var(--paper);padding:40px 36px 64px;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),96% 100%,92% calc(100% - 14px),88% 100%,84% calc(100% - 14px),80% 100%,76% calc(100% - 14px),72% 100%,68% calc(100% - 14px),64% 100%,60% calc(100% - 14px),56% 100%,52% calc(100% - 14px),48% 100%,44% calc(100% - 14px),40% 100%,36% calc(100% - 14px),32% 100%,28% calc(100% - 14px),24% 100%,20% calc(100% - 14px),16% 100%,12% calc(100% - 14px),8% 100%,4% calc(100% - 14px),0 100%)}
.slipcard h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;margin:28px 0 6px}
.slipcard h3:first-child{margin-top:0}
.row{display:flex;align-items:baseline;gap:10px;padding:8px 0;font-size:1rem}
.row .r{font-weight:500;text-align:right;white-space:nowrap}
.row .l{max-width:62%}
.slipcard .total{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--ink);color:var(--paper);min-height:52px;padding:10px 16px;margin:30px -16px 0;font-weight:600}

/* ---------- Services menu sheet ---------- */
.menu-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start}
.menu-side{grid-column:1/span 4}
.menu-side .lede{margin-top:24px}
.menu-sheet{grid-column:6/span 7;background:var(--paper);padding:56px clamp(24px,4vw,64px) 64px;clip-path:polygon(0 12px,3% 0,6% 12px,9% 0,12% 12px,15% 0,18% 12px,21% 0,24% 12px,27% 0,30% 12px,33% 0,36% 12px,39% 0,42% 12px,45% 0,48% 12px,51% 0,54% 12px,57% 0,60% 12px,63% 0,66% 12px,69% 0,72% 12px,75% 0,78% 12px,81% 0,84% 12px,87% 0,90% 12px,93% 0,96% 12px,100% 0,100% calc(100% - 12px),96% 100%,93% calc(100% - 12px),90% 100%,87% calc(100% - 12px),84% 100%,81% calc(100% - 12px),78% 100%,75% calc(100% - 12px),72% 100%,69% calc(100% - 12px),66% 100%,63% calc(100% - 12px),60% 100%,57% calc(100% - 12px),54% 100%,51% calc(100% - 12px),48% 100%,45% calc(100% - 12px),42% 100%,39% calc(100% - 12px),36% 100%,33% calc(100% - 12px),30% 100%,27% calc(100% - 12px),24% 100%,21% calc(100% - 12px),18% 100%,15% calc(100% - 12px),12% 100%,9% calc(100% - 12px),6% 100%,3% calc(100% - 12px),0 100%)}
.menu-sheet h3.grp{font-size:1.25rem;margin:44px 0 6px}
.menu-sheet h3.grp:first-child{margin-top:0}
.item{display:block;text-decoration:none;padding:14px 0;transition:transform var(--t-ui) var(--ease)}
.item:hover{transform:translateX(6px)}
.item .top{display:flex;align-items:baseline;gap:10px;font-size:1.1875rem;font-weight:600;letter-spacing:-.015em}
.item .top .v{font-weight:500;font-size:1rem;white-space:nowrap}
.item .d{display:block;font-size:.9375rem;color:var(--muted);max-width:40ch;margin-top:4px}
.item:hover .top .n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}

/* ---------- Letter testimonial ---------- */
.letter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.letter .side{grid-column:1/span 3}
.letter .side .g{display:flex;gap:10px;align-items:center;font-weight:600}
.letter .side .stars{color:#b07a12;letter-spacing:2px}
.letter blockquote{grid-column:4/span 5;margin:0;max-width:42ch}
.letter .aside-q{grid-column:10/span 3;display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);padding-top:8px}
.letter .aside-q figure{margin:0;padding:24px 22px;background:var(--paper)}
.letter .aside-q figure:nth-child(2){background:var(--surface)}
.letter .aside-q blockquote{grid-column:auto;font-size:1rem;max-width:none}
.letter .aside-q figcaption{margin-top:12px;font-weight:600;font-size:.9375rem}
.letter .open{font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;margin-bottom:28px}
.letter blockquote p{font-size:1.1875rem;line-height:1.55}
.letter .sign{margin-top:40px;font-size:1rem}
.letter .sign b{display:block}
.lw .w{transition:color 300ms ease}
.lw.js .w{color:#5f5a54}
.lw.js .w.on{color:var(--ink)}
.more-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);margin-top:clamp(80px,8vw,120px)}
.more-quotes figure{margin:0;padding:28px 26px;background:var(--paper)}
.more-quotes figure:nth-child(2){background:var(--surface);transform:translateY(28px)}
.more-quotes blockquote{margin:0;font-size:1.0625rem}
.more-quotes figcaption{margin-top:16px;font-weight:600;font-size:.9375rem}

/* ---------- Areas ---------- */
.areas-list{list-style:none;margin:48px 0 0;padding:0}
.areas-list li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:baseline;padding:22px 0}
.areas-list li+li{background:none}
.areas-list a.county{grid-column:1/span 6;font-size:clamp(2.25rem,1.2rem + 4vw,5rem);font-weight:600;letter-spacing:-.045em;line-height:1;text-decoration:none;transition:color var(--t-ui) ease,transform var(--t-ui) var(--ease);display:inline-block}
.areas-list a.county:hover{color:var(--accent);transform:translateX(8px)}
.areas-list .cities{grid-column:7/span 6;margin:0;color:var(--ink)}

/* ---------- Ticket ---------- */
.ticket{position:relative;display:grid;grid-template-columns:7fr 3fr;background:var(--paper);color:var(--ink);max-width:1100px;margin:0 auto}
.ticket .main{padding:clamp(28px,3.4vw,48px)}
.ticket .main h2{font-size:clamp(2rem,1rem + 3vw,3.6rem)}
.ticket .terms{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin-top:40px;font-size:1.0625rem}
.ticket .stub{position:relative;padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:18px;background:var(--surface)}
.ticket .stub .big{font-size:clamp(1.5rem,.9rem + 1.6vw,2.4rem);font-weight:600;letter-spacing:-.03em;text-align:center;text-decoration:none;line-height:1.05}
.ticket .stub .note{text-align:center}
.ticket .perf{position:absolute;top:22px;bottom:22px;left:70%;width:6px;margin-left:-3px;background-image:radial-gradient(circle,var(--tk-ground,var(--bg)) 2.6px,transparent 3px);background-size:6px 14px}
.ticket .notch{position:absolute;left:70%;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--tk-ground,var(--bg))}
.ticket .notch.t{top:-14px}.ticket .notch.b{bottom:-14px}

/* ---------- FAQ index cards ---------- */
.faq-head{margin-bottom:48px}
.cards{max-width:1120px;margin-left:clamp(0px,8vw,140px)}
.card{--tab:0px;position:relative;margin-top:-18px;background:var(--cbg,var(--paper));color:var(--ink)}
.card:first-child{margin-top:40px}
.card:nth-child(3n+2){--cbg:var(--surface)}
.card:nth-child(3n+3){--cbg:#ecd9da}
.card .tabname{position:absolute;bottom:100%;left:min(var(--tab),calc(100% - 210px));width:200px;height:40px;display:flex;align-items:center;padding:0 18px;background:var(--cbg,var(--paper));font-size:1rem;font-weight:500;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%)}
.card button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:18px;text-align:left;background:none;border:0;padding:24px 28px;font-size:1.25rem;font-weight:500;letter-spacing:-.015em;cursor:pointer;min-height:76px}
.card button::after{content:"";flex:none;width:20px;height:20px;background:linear-gradient(currentColor,currentColor) center/100% 2.4px no-repeat,linear-gradient(currentColor,currentColor) center/2.4px 100% no-repeat;transition:transform var(--t-ui) var(--ease)}
.card button[aria-expanded="true"]::after{transform:rotate(45deg)}
.card .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows 300ms var(--ease)}
.card .ans>div{overflow:hidden}
.card .ans p{padding:0 28px;max-width:58ch;margin:0 0 1em}
.card .ans>div>:last-child{padding-bottom:30px}
.card.open .ans{grid-template-rows:1fr}
.card+.card{margin-top:30px}

/* ---------- Reply card (CTA + form) ---------- */
.reply{position:relative;overflow:hidden;background:var(--accent);color:#fff;padding:clamp(90px,10vw,150px) 0}
.reply .cols{align-items:end}
.reply .say{grid-column:1/span 5;padding-bottom:12px}
.reply .say h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem);color:#fff}
.reply .say p{font-size:clamp(1.125rem,1rem + .5vw,1.4rem);line-height:1.4;margin-top:24px}
.reply .say a{color:#fff}
.replycard{grid-column:7/span 6;background:var(--paper);color:var(--ink);padding:clamp(28px,3.4vw,48px);transform:rotate(-1.2deg)}
.replycard h3{font-size:clamp(1.6rem,1.2rem + 1vw,2rem);letter-spacing:-.03em;margin-bottom:8px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:24px}
.form .full{grid-column:1/-1}
.field label{display:block;font-weight:500;font-size:.9375rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;background:#fff;border:2px solid #8f8a83;border-radius:0;font-size:1rem;transition:border-color var(--t-ui) ease}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,45,52,.22)}
.field .err{display:none;color:#a3271b;font-size:.875rem;margin-top:6px;font-weight:500}
.field.bad input,.field.bad select{border-color:#a3271b}
.field.bad .err{display:block}
.form .hp{position:absolute;left:-9999px}
.form-msg{grid-column:1/-1;font-weight:600;min-height:1.4em}
.form-msg.ok{color:var(--accent)}
.form-msg.no{color:#a3271b}
.form .btn{grid-column:1/-1;min-height:58px}
.form-fine{grid-column:1/-1;font-size:var(--step-small);color:var(--muted);margin:0}

/* ---------- Footer: the back of the report (curtain) ---------- */
.foot{position:relative;z-index:1;background:var(--night);color:var(--on-night);padding:72px 0 40px}
.foot-card{background:var(--paper);color:var(--ink);padding:56px clamp(24px,4vw,64px) 28px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:28px;position:relative}
.foot-card::before{content:"";position:absolute;left:0;right:0;top:-16px;height:17px;background:radial-gradient(circle at 50% 100%,var(--paper) 15.5px,transparent 16px);background-size:64px 32px;background-position:center bottom}
.foot-say{grid-column:1/span 5}
.foot-say h2{font-size:2rem;letter-spacing:-.03em}
.foot-say p{margin-top:16px}
.foot-nav{grid-column:7/span 3}
.foot-nap{grid-column:10/span 3}
.foot-card h3{font-size:1rem;letter-spacing:-.01em;margin-bottom:12px}
.foot-card ul{list-style:none;margin:0;padding:0}
.foot-card li{padding:5px 0;font-size:1.0625rem}
.nw{white-space:nowrap}
.foot-card li a{text-decoration:none;font-size:1.0625rem}
.foot-card li a:hover{text-decoration:underline}
.imprint{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:var(--step-small);color:var(--muted);padding-top:24px}
.imprint a{color:inherit}
.stamp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;border:3px solid var(--accent);color:var(--accent);font-weight:600;text-align:center;line-height:1.1;font-size:.875rem;transform:rotate(-8deg);margin-top:20px}
.stamp b{font-size:1.25rem;letter-spacing:-.02em}

/* ---------- Phone call bar ---------- */
.callbar{display:none}

/* ---------- Inner page hero ---------- */
.phero{position:relative;color:var(--on-night);background:var(--night);overflow:hidden}
.phero .wrap{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(64px,7vw,110px)}
.phero .copy{grid-column:1/span 7}
.phero h1{font-size:clamp(2.5rem,1.3rem + 4vw,5rem);letter-spacing:-.045em;line-height:.97}
.phero .lede{margin-top:28px;max-width:42ch}
.phero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.phero .pic{grid-column:9/span 4;position:relative}
.phero .pic img{width:100%;aspect-ratio:3/4;object-fit:cover}
.crumbs{font-size:var(--step-small);color:var(--on-night-2);margin-bottom:28px}
.crumbs a{color:var(--on-night-2)}
.crumbs ol{list-style:none;display:flex;gap:8px;padding:0;margin:0;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px}

/* prose block for inner pages */
.prose-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.prose-grid .aside{grid-column:1/span 4}
.prose-grid .prose{grid-column:6/span 7}
.prose h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:32px 0 10px}
.prose p,.prose li{max-width:64ch}
.prose ul{padding-left:1.2em}
.prose li{margin:.35em 0}
.factbox{background:var(--paper);padding:30px 28px}
.factbox h2{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:12px}
.factbox .row{font-size:1rem}
.factbox .btn{margin-top:22px}

/* related links */
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px);margin-top:40px}
.related a{display:flex;flex-direction:column;justify-content:space-between;min-height:160px;padding:24px;background:var(--paper);text-decoration:none;font-weight:600;font-size:1.25rem;letter-spacing:-.02em;line-height:1.15;transition:background-color var(--t-ui) ease,transform var(--t-ui) var(--ease)}
.related a span{font-weight:400;font-size:.9375rem;color:var(--muted);letter-spacing:0}
.related a:hover{background:#fff;transform:translateY(-4px)}

/* reviews wall */
.wall{columns:3;column-gap:clamp(16px,2vw,28px)}
.wall figure{break-inside:avoid;margin:0 0 clamp(16px,2vw,28px);background:var(--paper);padding:26px 24px}
.wall figure:nth-child(4n+2){background:var(--surface)}
.wall blockquote{margin:0}
.wall figcaption{margin-top:14px;font-weight:600;font-size:.9375rem}
.wall figcaption span{font-weight:400;color:var(--muted)}

/* about portrait placeholder */
.ph{background:var(--night-2);color:var(--on-night-2);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;aspect-ratio:3/4;font-size:var(--step-small)}

/* ---------- Entrances (JS adds .rv; content visible without JS) ---------- */
@media (prefers-reduced-motion:no-preference){
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 700ms ease,transform 900ms var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv-pic{clip-path:inset(12% 0 0 0);transition:clip-path 1200ms var(--ease);transition-delay:var(--d,0ms)}
.js .rv-pic.in{clip-path:inset(0 0 0 0)}
.slip{transform:translateY(40px) rotate(var(--rot,0deg));opacity:0}
.in .slip{transform:rotate(var(--rot,0deg));opacity:1}
}

/* custom cursor: a small torch spot (mouse only) */
.spot{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--beam);pointer-events:none;z-index:90;opacity:0;transition:opacity 200ms ease,width 220ms var(--ease),height 220ms var(--ease),margin 220ms var(--ease);mix-blend-mode:difference}
.spot.on{opacity:1}
.spot.big{width:64px;height:64px;margin:-32px 0 0 -32px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ladder{width:22px;left:4px}
  .climber{width:26px;height:42px;margin-left:-13px}
  .ladder .depth{display:none}
  .nav{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .hero-copy{grid-column:1/span 12}
  .cover{grid-column:7/span 6}
  .menu-side{grid-column:1/span 12;position:static;margin-bottom:48px}
  .menu-sheet{grid-column:1/span 12}
  .related{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  main>.pin{position:relative;top:0}
  .topline .tl-left{display:none}
  .topline .wrap{justify-content:center}
  .head-cta{display:none}
  .hero{min-height:auto}
  .hero-in{display:block;padding-top:64px}
  .hero-copy{padding-bottom:40px}
  .hero-actions .btn{flex:1 1 220px}
  .cover{margin:0 0 -60px;padding:28px 24px 90px}
  .attic-head,.plumb-head{display:block}
  .attic-head p,.plumb-head p{margin-top:20px}
  .torch{aspect-ratio:4/3;margin:0 calc(-1 * var(--m) + 30px)}
  .walls{display:block}
  .walls .copy{margin-top:56px}
  .checklist{columns:1}
  .plumb{grid-template-columns:1fr 1fr;gap:12px}
  .plumb figure:nth-child(2){margin-top:60px}
  .report-copy{padding:90px 0 0;margin:0 var(--m)}
  .slips{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;min-height:0;padding:48px var(--m) 0;align-items:end;gap:12px}
  .slip{height:auto}
  .itin{display:block}
  .slipcard{margin-top:48px;max-width:none;padding:32px 22px 56px}
  .letter{display:block}
  .letter .aside-q{margin-top:56px}
  .letter .side{margin-bottom:28px}
  .more-quotes{grid-template-columns:1fr}
  .more-quotes figure:nth-child(2){transform:none}
  .areas-list li{display:block}
  .areas-list .cities{margin-top:10px}
  .ticket{grid-template-columns:1fr}
  .ticket .perf{left:22px;right:22px;top:auto;bottom:auto;width:auto;height:6px;margin:0;background-size:14px 6px}
  .ticket .notch{left:auto;top:auto}
  .ticket .notch.t{left:-14px}.ticket .notch.b{right:-14px;left:auto}
  .ticket .terms{grid-template-columns:1fr}
  .tk-split{position:relative}
  .cards{margin-left:0}
  .card .tabname{width:150px}
  .reply .cols{display:block}
  .replycard{transform:rotate(-.6deg);margin-top:40px}
  .form{grid-template-columns:1fr}
  .foot-card{display:block}
  .foot-nav,.foot-nap{margin-top:32px}
  .phero .wrap{display:block}
  .phero .pic{margin-top:40px;max-width:420px}
  .prose-grid{display:block}
  .prose-grid .aside{margin-bottom:48px}
  .wall{columns:1}
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--night);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .callbar .btn{min-height:52px}
  body{padding-bottom:72px}
  .foot{padding-bottom:110px}
}
@media (max-width:560px){
  .card .tabname{display:none}
  .card{margin-top:12px!important}
  .card:first-child{margin-top:0!important}
  :root{--m:30px}
  .hero h1{font-size:clamp(2rem,8.6vw,3.4rem)}
  .plumb{grid-template-columns:1fr}
  .plumb figure:nth-child(2){margin-top:72px}
  .related{grid-template-columns:1fr}
  .row{flex-wrap:wrap}
  .row .dots{display:none}
  .row .l{max-width:none;flex:1 1 60%}
  .ladder{width:24px;left:3px}
  .climber{width:30px;height:50px;margin-left:-15px}
  .ladder .depth{display:none}
}
@media (hover:hover) and (pointer:fine){.spot{display:block}}
@media (hover:none),(pointer:coarse){.spot{display:none}.torch{cursor:auto}}

/* reduced motion: fewer, gentler, never none */
@media (prefers-reduced-motion:reduce){
  .hero-media img{animation:none}
  .hero h1 .ln>span{animation:fade 400ms ease both}
  .cover{animation:fade 400ms ease both}
  .js .rv{transform:none;transition:opacity 400ms ease}
  .js .rv-pic{clip-path:none}
  .site-head{transition:none}
  .spot{display:none}
  .item:hover,.areas-list a.county:hover,.related a:hover{transform:none}
}
@media (prefers-contrast:more){
  :root{--muted:#2e2b27;--on-night-2:#e6ecee}
  .hero-media::after{background:rgba(6,10,12,.65)}
  .btn{outline:3px solid currentColor;outline-offset:-3px}
}

.stars{display:inline-flex;gap:3px;vertical-align:-2px}
.stars svg{width:16px;height:16px}
.stars-row .stars svg{width:22px;height:22px}
.term{display:flex;gap:10px;align-items:flex-start;padding:4px 0}
.term svg{margin-top:3px}
.wm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:center}
.wm-copy{grid-column:1/span 5}
.wm-pic{grid-column:7/span 6}
@media (max-width:860px){.wm-grid{display:block}.wm-pic{margin-top:40px}}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
.strip .sp{margin:0}
.strip .sp:nth-child(even){margin-top:clamp(28px,4vw,64px)}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover}
.strip figcaption{margin-top:12px;font-weight:600;font-size:1rem}
@media (max-width:860px){.strip{grid-template-columns:1fr 1fr}.phero h1{font-size:clamp(2rem,8.4vw,3rem)}}
.callbar{transition:transform 300ms var(--ease)}
.callbar.off{transform:translateY(110%)}

/* ---------- Logo (vector rebuild of the client's mark; geometry and colours unchanged) ---------- */
.tpi-logo{display:block;height:auto;overflow:visible}
.brand .tpi-logo{width:auto;height:80px}
.drawer .brand .tpi-logo{height:56px}
.cover-logo{background:var(--night);margin:-32px -32px 24px;padding:30px 32px 26px}
.cover-logo .tpi-logo{width:min(176px,62%)}
.foot-logo{width:170px;margin:0 0 44px}
.about-logo{background:var(--night-2);padding:clamp(28px,4vw,56px);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}
.about-logo .tpi-logo{width:100%}
.lg-glint{opacity:0;mix-blend-mode:soft-light}
.site-head .wrap{min-height:104px}
@media (prefers-reduced-motion:no-preference){
  .js .tpi-logo.draw .lg-letters,.js .tpi-logo.draw .lg-o{animation:lgUp 700ms var(--ease) both}
  .js .tpi-logo.draw .lg-o{animation-delay:80ms}
  .js .tpi-logo.draw .lg-roof{stroke-dasharray:1 1;animation:lgDraw 900ms cubic-bezier(.65,0,.35,1) 200ms both}
  .js .tpi-logo.draw .lg-check{stroke-dasharray:1 1;animation:lgDraw 650ms cubic-bezier(.16,1,.3,1) 900ms both}
  .js .tpi-logo.draw .lg-text{animation:lgUp 600ms var(--ease) 1250ms both}
  .js .tpi-logo.draw .lg-glint{animation:lgGlint 1100ms ease-in-out 1700ms both}
  .brand:hover .tpi-logo .lg-check,.cover:hover .tpi-logo .lg-check{stroke-dasharray:1 1;animation:lgDraw 600ms cubic-bezier(.16,1,.3,1) both}
  .brand:hover .tpi-logo .lg-glint,.cover:hover .tpi-logo .lg-glint{animation:lgGlint 900ms ease-in-out 450ms both}
}
@keyframes lgDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lgUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lgGlint{0%{opacity:.9;stroke-dashoffset:.07}100%{opacity:.9;stroke-dashoffset:-1.15}}
@media (max-width:560px){.brand .tpi-logo{height:56px}.site-head .wrap{min-height:84px}}