/* Shared styles for pmforcontractors.com subpages.
   Extracted 2 Oct 2026 so the subpages cannot drift apart as more are added.
   Design tokens match the homepage in index.html. */

/* Tokens the shared chrome needs, matching index.html. */
:root{
  --pine-200:#c7ddce; --r-pill:999px; --r-sm:10px; --r-md:16px; --r-lg:22px;
  --shadow-sm:0 1px 2px color-mix(in srgb, #211f19 10%, transparent);
  --shadow-md:0 8px 24px -8px color-mix(in srgb, #211f19 28%, transparent);
}
:root{
  --paper:#f6f1e5; --paper-2:#ece2cd; --ink:#211f19; --ink-2:#3a362c;
  --ink-muted:color-mix(in srgb, #211f19 68%, transparent);
  --line:color-mix(in srgb, #211f19 13%, transparent);
  --pine:#1e5c3f; --pine-700:#123d29; --pine-100:#e4efe6;
  --gold:#c07d1f; --card:#fffdf8;
  --font-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 32px}
a{color:var(--pine-700)}
header{border-bottom:1px solid var(--line);padding:18px 0;background:var(--paper)}
main{padding:52px 0 72px}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,7vw,66px);line-height:1.0;letter-spacing:-.01em;margin:0 0 18px;text-transform:uppercase}
h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.6vw,36px);line-height:1.08;margin:52px 0 14px;text-transform:uppercase;letter-spacing:.005em}
h3{font-family:var(--font-body);font-weight:700;font-size:17px;margin:26px 0 6px}
p{margin:0 0 18px;color:var(--ink-2)}
ul{padding-left:22px;margin:0 0 20px}
li{margin:0 0 9px;color:var(--ink-2)}
strong{font-weight:700;color:var(--ink)}
.lede{font-size:20px;line-height:1.55;color:var(--ink)}
.rule{height:1px;background:var(--line);border:0;margin:44px 0}
.callout{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pine);border-radius:10px;padding:22px 24px;margin:0 0 26px}
.callout p:last-child{margin-bottom:0}
.q{border-bottom:1px solid var(--line);padding:4px 0}
.q summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;font-size:17px}
.q summary::-webkit-details-marker{display:none}
.q summary:before{content:"+";display:inline-block;width:20px;color:var(--pine);font-weight:700}
.q[open] summary:before{content:"\2013"}
.q .a{padding:0 0 16px 20px}
.q .a p{margin:0;color:var(--ink-muted);font-size:16px}
.cta{background:var(--pine);color:var(--paper);border-radius:14px;padding:34px 30px;margin:52px 0 0}
.cta h2{color:var(--paper);margin:0 0 10px}
.cta p{color:color-mix(in srgb, #f6f1e5 88%, transparent);margin:0 0 22px}
.btn{display:inline-block;background:var(--paper);color:var(--pine-700);text-decoration:none;font-weight:700;padding:15px 26px;border-radius:8px}
.btn:hover{filter:brightness(1.04)}
.meta{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 20px}
footer{border-top:1px solid var(--line);padding:24px 0 44px;font-size:14px;color:var(--ink-muted)}
footer a{color:var(--ink-muted)}
/* comparison table */
.tablewrap{overflow-x:auto;margin:8px 0 26px}
table.cmp{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px}
table.cmp th,table.cmp td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--ink)}
table.cmp thead th:nth-child(2){color:var(--ink-muted)}
table.cmp tbody th{font-weight:700;color:var(--ink);width:30%}
table.cmp td:nth-child(2){color:var(--ink-muted)}
table.cmp td:nth-child(3){background:var(--card)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- comparison table, phones
   PROBLEM (owner, 2026-10-11): "the comparison table does not display properly, it cuts off and I
   need to drag it." Cause: 520px min-width inside a ~350px viewport, wrapped in overflow-x:auto.
   Horizontal scrolling is a documented usability failure -- content exists off-screen that the
   reader has no reason to suspect, and a drag gesture competes with page scroll.

   FIX: below 640px the table stops being a table. Each ROW becomes a card, the header row is
   dropped, and each cell announces its own column name via ::before. The reader never scrolls
   sideways and never has to infer which column a value belongs to. This is the standard stacked
   pattern and it also matches the card language the rest of the page already uses. */
@media (max-width:640px){
  .tablewrap{overflow-x:visible}
  table.cmp{min-width:0;border-collapse:separate;border-spacing:0;font-size:14.5px}
  table.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table.cmp tbody tr{display:block;background:var(--card,transparent);border:1px solid var(--line);border-radius:14px;padding:16px 15px;margin-bottom:14px}
  table.cmp tbody tr:last-child{margin-bottom:0}
  table.cmp tbody th,table.cmp tbody td{display:block;width:auto;padding:0;border:0;background:none}
  table.cmp tbody th{font-family:var(--font-display);font-size:17px;font-weight:800;line-height:1.25;margin-bottom:12px}
  table.cmp tbody td{padding:11px 0 0;border-top:1px solid var(--line)}
  table.cmp tbody td + td{margin-top:11px}
  table.cmp tbody td::before{display:block;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:5px;opacity:.85}
  table.cmp tbody td:nth-child(2)::before{content:"What it costs"}
  table.cmp tbody td:nth-child(3)::before{content:"What that looks like"}
  table.cmp tbody td:nth-child(3){background:none}
}

/* ---------------------------------------------------------------- tools ---- */
/* Interactive tool widgets (egress calculator and future tools). */
:root{ --fail:#a3341f; --ok:#1e5c3f; --line-2:color-mix(in srgb, #211f19 22%, transparent); }
.tool{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 24px;margin:0 0 26px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld>span{font-size:13px;font-weight:600;color:var(--ink-muted);line-height:1.35}
.fld input,.fld select{
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  padding:11px 12px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--paper);width:100%;
}
.fld input:focus,.fld select:focus{outline:2px solid var(--pine);outline-offset:1px;border-color:var(--pine)}
.chk{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;font-size:15px;color:var(--ink-2);cursor:pointer}
.chk input{margin:3px 0 0;width:17px;height:17px;flex:none;accent-color:var(--pine)}
.verdict{margin:22px 0 0;padding:18px 20px;border-radius:10px;border:1px solid var(--line);background:var(--paper-2)}
.verdict strong{display:block;font-family:var(--font-display);font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
.verdict span{display:block;margin-top:6px;font-size:15px;color:var(--ink-muted)}
.verdict.pass{background:#e8f0e9;border-color:#bcd4c2}
.verdict.pass strong{color:var(--ok)}
.verdict.fail{background:#f7e9e4;border-color:#e0c2b8}
.verdict.fail strong{color:var(--fail)}
.verdict.warn strong{color:var(--gold)}
.results{margin-top:18px}
table.res{margin:0;min-width:0}
table.res th,table.res td{padding:11px 13px;font-size:15px}
table.res td.mark{text-align:center;font-weight:700;width:44px}
table.res tr.ok td.mark{color:var(--ok)}
table.res tr.no td.mark{color:var(--fail)}
table.res tr.no th{color:var(--fail)}
.fineprint{font-size:13.5px;color:var(--ink-muted);margin:14px 0 0;line-height:1.5}

/* An author `display` rule beats the UA stylesheet's [hidden] { display:none },
   so .fld{display:flex} was defeating the hidden attribute on the calculator's
   conditional fields. Restore it explicitly. */
[hidden]{display:none !important}

/* ------------------------------------------------- homeowner portal demo ---- */
/* Illustrative product mockup on /homeowner-portal. Deliberately reads as a
   product surface rather than page furniture. */
.demo{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0 0 28px;box-shadow:0 18px 40px -24px color-mix(in srgb,#211f19 40%,transparent)}
.demo-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.demo-bar span{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,#211f19 18%,transparent);flex:none}
.demo-bar em{font-family:var(--font-mono);font-style:normal;font-size:11.5px;color:var(--ink-muted);margin-left:8px}
.demo-body{padding:24px}
.demo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.demo-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.demo-head h3{font-family:var(--font-display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.01em;margin:5px 0 0}
.demo-status{background:var(--pine-100);color:var(--pine-700);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.demo-block{margin-bottom:20px}
.demo-block h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 10px}
ul.demo-phases{list-style:none;padding:0;margin:0}
ul.demo-phases li{position:relative;padding:0 0 12px 26px;font-size:15px;color:var(--ink-muted);margin:0}
ul.demo-phases li:before{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;border:2px solid var(--line-2)}
ul.demo-phases li.done{color:var(--ink-2)}
ul.demo-phases li.done:before{background:var(--pine);border-color:var(--pine)}
ul.demo-phases li.now{color:var(--ink);font-weight:700}
ul.demo-phases li.now:before{border-color:var(--pine);box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 9px var(--pine)}
ul.demo-docs{list-style:none;padding:0;margin:0}
ul.demo-docs li{font-size:15px;color:var(--ink-2);padding:9px 0;border-bottom:1px solid var(--line);margin:0}
ul.demo-docs li:last-child{border-bottom:0}
.demo-note{margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-muted)}

/* ============================================================ site chrome ===
   Header, nav, buttons, hero band and footer, lifted from index.html so the
   subpages read as pages of the same site rather than standalone documents.
   The chrome is 1180px wide like the homepage; the article column is 820px. */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:600}
.navlinks a{text-decoration:none;color:var(--ink-muted);position:relative;padding:4px 0;white-space:nowrap}
.navlinks a:hover{color:var(--ink)}
.navcta{display:flex;align-items:center;gap:14px}
/* header CTA: full phrase on desktop, short one on phones so it never ends mid-sentence */
.cta-mini{display:none}
@media (max-width:560px){ .cta-full{display:none} .cta-mini{display:inline} }
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:32px;height:32px;flex:none}
.brand .lockup{display:flex;flex-direction:column;line-height:1}
.brand .l1{font-family:var(--font-display);font-weight:800;font-size:25px;letter-spacing:-0.01em;color:var(--ink)}
.brand .l2{font-family:var(--font-body);font-weight:700;font-size:10.5px;letter-spacing:0.15em;text-transform:uppercase;color:var(--pine);margin-top:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:14.5px;padding:14px 26px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;border-radius:var(--r-pill);white-space:nowrap;transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-primary{background:var(--pine);color:#fdfbf6;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--pine-700);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-sm{padding:9px 16px;font-size:13px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink)}
.mobile-drawer{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);background:var(--paper);max-height:0;overflow:hidden;opacity:0;transition:max-height .32s cubic-bezier(.2,.7,.2,1),opacity .22s ease}
.mobile-drawer.open{max-height:820px;opacity:1}
.mobile-drawer a{padding:15px 32px;padding-left:max(32px,env(safe-area-inset-left));text-decoration:none;color:var(--ink);font-weight:600;border-top:1px solid var(--line)}

/* NAV DECLUTTER, shared pages (owner, 2026-10-11: "the nav bar is too busy"). index.html carries
   its own copy of these rules inline; this is the same treatment for every sub-page that loads
   page.css, so the header cannot drift between them again.
     - ES and Log in move into the drawer; only Apply stays in the bar
     - the lockup drops its second line under 520px
     - the hamburger morphs to an X, the drawer animates, and safe-area padding keeps a notch off
       the Apply button
   All of it sits inside the prefers-reduced-motion guard already at the top of this file. */
.hamburger span{transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
header{transition:box-shadow .25s ease}
header.scrolled{box-shadow:0 10px 30px -18px color-mix(in srgb,#211f19 45%,transparent)}
.nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
/* 1200px, not 860: the desktop links plus the CTA measure ~1185px on one row; below that they
   squeezed onto two lines and under 1014px the CTA was pushed off the right edge. Same rule and
   same reason as home.css, so the two headers cannot drift. */
@media (max-width:1199px){
  .navlinks{display:none}
  .navcta .btn-ghost{display:none}
  .hamburger{display:flex}
  .navcta{gap:10px}
  .drawer-alt{border-top:1px solid var(--line);margin-top:8px;padding-top:16px!important;color:var(--pine)!important;font-weight:700}
  .drawer-alt + .drawer-alt{border-top:0;margin-top:0;padding-top:8px!important}
}
@media (max-width:520px){
  .nav{gap:10px;padding:12px 0}
  .brand .l2{display:none}
  .brand .l1{font-size:20px}
  .navcta .langswitch{display:none}
  .navcta .btn-primary{padding:9px 15px;font-size:13.5px}
  .hamburger{padding:4px}
}

/* hero band on a subpage — same language as the homepage hero, smaller */
.page-hero{padding:64px 0 34px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);display:flex;align-items:center;gap:8px}
.page-hero .eyebrow:before{content:"";width:16px;height:2px;background:var(--gold);display:inline-block}
.page-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,5vw,64px);line-height:1.03;letter-spacing:-.01em;margin:16px 0 0;text-transform:uppercase}
.page-h1 .hl{position:relative;color:var(--pine);display:inline-block}
.page-h1 .hl svg{position:absolute;left:0;bottom:-12px;width:100%;height:12px}
.page-lede{margin:24px 0 0;font-size:19px;line-height:1.55;color:var(--ink-2);font-weight:500;max-width:56ch}
.page-meta{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin:20px 0 0}
.page-body{padding:44px 0 72px}
/* trade-detail block: the trade-specific paperwork section on the 11 trade pages */
.trade-detail .licence{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}

/* footer — same structure as the homepage */
footer{padding:44px 0 36px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-muted)}
footer a{color:var(--ink-muted)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px 40px}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-contact{font-style:normal;display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px 32px}
.foot-legal-links{display:flex;gap:20px;flex-wrap:wrap}

/* Responsive rules lifted from index.html so the header behaves identically. */
@media (max-width:760px){ .wrap, .wrap-narrow{padding:0 20px} }
@media (max-width:400px){ .brand .l1{font-size:21px} .brand .l2{font-size:9px;letter-spacing:.12em} }
@media (max-width:960px){ .page-hero{padding:48px 0 28px} .page-body{padding:36px 0 56px} }

/* Small phones: the header cannot fit the brand, the full CTA and the menu
   button side by side. Shorten the CTA rather than let the brand wrap. */
@media (max-width:430px){
  .brand{flex:none}
}

/* language switcher — must stay visible on mobile, so it is not a .btn-ghost */
.langswitch{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--pine-700);border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  padding:6px 10px;text-decoration:none;white-space:nowrap;flex:none}
.langswitch:hover{border-color:var(--pine);color:var(--pine)}