/* Clark Fork, design B: "Instant price". Loads after site.css and b.css on every B page.
   The newest kind of contractor site (Trust Roofing, Shasta Pools): light and plain, with tools
   that answer the homeowner before a call. A ballpark price builder in the hero, a siding color
   visualizer, a stat strip. Forest green with one lime accent, Plus Jakarta Sans throughout. */
.b{
  --snow:#f5f6f2; --white:#ffffff; --stone:#eef0ea; --stone-2:#e2e5dc;
  --ink:#14211a; --ink-2:#1c2c23; --ink-3:#3f4d45;
  --steel:#5f6b64; --steel-2:#7f8a83; --steel-3:#a9b2ac;
  --rule:rgba(20,33,26,.10); --rule-2:rgba(20,33,26,.22); --rule-inv:rgba(255,255,255,.14);
  --abc:#ffc629; --abc-2:#f0b400; --rust:#ffc629;
  --y:#ffc629; --y2:#f0b400; --k:#14211a; --g:#f5f6f2; --g2:#e2e5dc; --tx:#3f4d45; --mut:#5f6b64;
  --hd:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --f:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --tile:#ffffff; --tile-2:#f5f6f2; --edge:rgba(20,33,26,.10); --rad:20px;
  --hi:#14241b; --deep:#16402b; --deep-2:#0f2f1f;
  background:var(--snow);color:var(--tx);font-family:var(--f)
}
.b h1,.b h2,.b h3{font-family:var(--hd);text-transform:none;letter-spacing:-.025em;font-weight:600;color:var(--hi);line-height:1.02}
.b h2{font-size:clamp(32px,3.6vw,52px)}
.b h3{font-size:21px;letter-spacing:-.015em}
.b h2::before{display:none}
.b .kick{font-family:var(--f);text-transform:none;letter-spacing:0;font-size:14px;color:var(--mut)}
.b .fintro,.b .fhead p{color:var(--mut)}

/* buttons */
.b .fbtn{font-family:var(--hd);text-transform:none;letter-spacing:-.005em;font-weight:600;border-radius:999px;height:52px}
.b .fbtn-y{background:var(--deep);color:#fff}
.b .fbtn-y:hover{background:#1f4a32;color:#fff}
.b .fbtn-k{background:var(--deep);color:#fff}
.b .fbtn-k:hover{background:var(--y)}
.b .fbtn-o{border:1px solid var(--rule-2);color:var(--hi)}
.b .fbtn-o:hover{background:var(--deep);color:#fff}
.b .btn{border-radius:999px}
.b .btn-ink{background:var(--deep);color:#fff}
.b .btn-ink:hover{background:var(--y);color:#111}

/* utility bar + header */
.b .ub{background:var(--deep);color:rgba(255,255,255,.78);border-bottom:0}
.b .ub-in span:first-child::before{background:var(--y);border-radius:50%}
.b .ub-in nav a:hover{color:var(--y)}
.b .hdr{background:rgba(255,255,255,.94);box-shadow:none;border-bottom:1px solid var(--edge);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px)}
.b .hdr .btn{background:var(--deep);color:#fff;font-family:var(--hd);text-transform:none;letter-spacing:0;font-weight:600;border-radius:999px}
.b .hdr .btn:hover{background:#1f4a32;color:#fff}
.b .nav>a,.b .nav>button{color:var(--ink-3);font-family:var(--f);text-transform:none;letter-spacing:0}
.b .nav>a:hover,.b .nav>button:hover{color:var(--hi)}
.b .nav>button[aria-expanded="true"]{box-shadow:none;background:var(--tile-2);color:var(--hi)}
.b .logo-t{color:var(--hi)}
.b .hdr-ph{color:var(--hi)}
.b .burger i{background:var(--hi)}
.b .mm{background:#fff;border-bottom:1px solid var(--edge)}
.b .mm-cta{background:var(--tile-2);border-radius:var(--rad)}
.b .mm-list a:hover,.b .mm-list a.on{background:var(--tile-2)}

/* ---------- the rest of the page: dark tiles everywhere ---------- */
.b main>section{background:transparent}
.b .fsec,.b .sec{padding:clamp(56px,6vw,96px) 0}
.b .fx2,.b .fab,.b .fsv,.b .frev,.b .fcards,.b .farea,.b .faq,.b .ba,.b .fdealer{background:transparent}
.b .fx2-stripe,.b .fband::after{display:none}
.b .fband{background:var(--deep);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.b .fband,.b .fband h2,.b .fband p{color:#fff}
.b .sv{background:var(--tile);border:1px solid var(--edge);border-radius:var(--rad);overflow:hidden}
.b .sv::after{display:none}
.b .sv-m{background:none;color:var(--hi);font-family:var(--f);text-transform:none;letter-spacing:0}
.b .sv:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(20,33,26,.35)}
.b .frs{background:var(--tile);border:1px solid var(--edge);border-radius:var(--rad)}
.b .frs p{color:var(--hi)}
.b .frev-nav button{background:var(--tile-2);color:var(--hi)}
.b .fc{background:var(--tile);border:1px solid var(--edge);border-radius:var(--rad)}
.b .farea-towns a{background:var(--tile);border-color:var(--edge);color:var(--hi);font-family:var(--f);text-transform:none;letter-spacing:0;border-radius:999px}
.b .farea-towns a:hover{background:var(--deep);color:#fff}
.b .farea-map{background:var(--tile);border:1px solid var(--edge);border-bottom:1px solid var(--edge);border-radius:var(--rad)}
.b .fest{background:var(--tile);border-top:1px solid var(--edge)}
.b .fab-badge{background:var(--tile-2);border-radius:16px}
.b .exp i{background:var(--tile-2)}
.b .exp i svg{color:var(--deep)}
.b .fab-list li::before{background-color:#3d8a5a;border-radius:50%}
.b img{border-radius:inherit}
.b .fab img,.b .fx2 img,.b .ba .slider,.b .winter-img,.b .art figure img{border-radius:var(--rad)}
.b details{border-color:var(--edge)!important}
.b details summary{color:var(--hi)}
.b details[open] summary i{background:var(--deep);color:#fff}
.b .winter,.b .areas.dark,.b .fx{background:var(--deep)}
.b .ff{background:var(--deep);color:rgba(255,255,255,.7)}
.b .ff-stripe{display:none}
.b .ff-bot{background:var(--deep-2)}
.b .mbar .go{background:var(--deep);color:#fff}

/* inner pages: the page hero becomes a pair of tiles, photo beside the estimate card */
.b .phero{padding-top:clamp(18px,2vw,28px)}
.b .phero .hero-row{background:var(--tile);border:1px solid var(--edge);border-radius:var(--rad);padding:clamp(24px,3vw,44px);margin-top:12px}
.b .phero h1{font-size:clamp(40px,5vw,76px);letter-spacing:-.04em}
.b .phero .hero-side p{color:var(--ink-3)}
.b .phero .hero-fig{max-width:var(--wrap);margin:12px auto 0;padding:0 var(--gut);height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:12px;overflow:visible;background:none}
.b .phero .hero-fig img{height:clamp(320px,38vw,540px);border-radius:var(--rad);transform:none}
.b .phero .qs{position:static;width:auto;box-shadow:none;background:var(--tile);border:1px solid var(--edge);border-radius:var(--rad);display:flex;flex-direction:column;justify-content:center}
.b .qs h3{color:var(--hi)}
.b .row{background:var(--tile-2);border-color:var(--edge);border-radius:14px}
.b .row:hover{border-color:var(--deep)}
.b .row .ar{border-color:var(--edge)}
.b .crumbs,.b .crumbs a{color:var(--mut)}
.b .crumbs [aria-current]{color:var(--hi)}

@media (max-width:1100px){
}
@media (max-width:640px){
  .b .phero .hero-fig{grid-template-columns:1fr}
  .b .phero .hero-fig img{height:auto;aspect-ratio:4/3}
  .b .phero .qs{padding:22px 18px}
}

/* sentence case everywhere in B; the franchise caps and wide tracking are gone */
.b,.b *{text-transform:none!important}
.b :where(summary,.sv-m,.gs-b,.farea-towns a,.fab-badge,.kick,.fc-b a,.fbtn,.ub,.fh-sub,.frs footer,.ff h4,.ff a,.mm-label,.mm-list b){font-family:var(--f);letter-spacing:0}
.b summary{font-weight:600;font-size:17px}
/* wordmark: set in type, with a small amber mark */
.b .logo img{display:none}
.b .logo-t{display:flex;flex-direction:column;font-family:var(--hd);font-weight:700;font-size:21px;line-height:1;letter-spacing:-.03em;color:var(--hi);padding-left:18px;position:relative}
.b .logo-t::before{content:"";position:absolute;left:0;top:3px;width:10px;height:10px;border-radius:3px;background:var(--deep);box-shadow:3px 3px 0 var(--y)}
.b .logo-t span{font-family:var(--f);font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--mut);margin-top:5px}
.b .ff .logo-t{display:flex}

/* inner page hero, reset from B's full-bleed overlay into tiles */
.b .phero{background:transparent;color:inherit;overflow:visible;padding-top:clamp(14px,1.6vw,22px)}
.b .phero>.wrap:first-child{padding-top:10px}
.b .phero .crumbs,.b .phero .crumbs a{color:var(--mut)}
.b .phero .crumbs [aria-current]{color:var(--hi)}
.b .phero .hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(24px,4vw,64px);align-items:end;min-height:0;padding:clamp(26px,3vw,44px);max-width:calc(var(--wrap) - 2 * var(--gut));margin:12px auto 0;background:var(--tile);border:1px solid var(--edge);border-radius:var(--rad)}
.b .phero .hero-row>*{max-width:none}
.b .phero h1{color:var(--hi);font-weight:600;letter-spacing:-.04em}
.b .phero .hero-side{max-width:30em;margin-top:0}
.b .phero .hero-side p{color:var(--ink-3);font-size:17px}
.b .phero .hero-side .btn{background:var(--deep);color:#fff;border-radius:999px;font-family:var(--hd);letter-spacing:0;font-weight:600;margin-top:18px}
.b .phero .hero-fig{position:relative;inset:auto;z-index:auto;background:none}
.b .phero .hero-fig::after{display:none}
.b .phero .qs{right:auto;top:auto;transform:none;border-top:1px solid var(--edge);border-radius:var(--rad)}
.b .phero .qs h3{color:var(--hi)}
.b .phero>.wrap:last-child{background:transparent;max-width:var(--wrap);padding:0 var(--gut);margin:12px auto 0}
.b .phero .specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:none;padding:0}
.b .phero .specs div,.b .phero .specs div+div{background:var(--tile);border:1px solid var(--edge)!important;border-radius:var(--rad);padding:20px 22px!important}
.b .phero .specs b{color:var(--hi);font-family:var(--hd);letter-spacing:-.02em}
.b .phero .specs div>span{color:var(--mut)}
@media (max-width:960px){
  .b .phero .hero-row{grid-template-columns:1fr;margin:12px var(--gut) 0}
  .b .phero .hero-fig{padding-bottom:0}
  .b .phero .qs{margin:0}
  .b .phero .specs{grid-template-columns:1fr 1fr}
}
.b .phero .hero-fig:not(:has(.qs)){grid-template-columns:1fr}
.b .phero .hero-fig>.snow{position:absolute;inset:0 var(--gut);width:auto;height:100%;pointer-events:none;z-index:1;border-radius:var(--rad)}

/* B re-points --white to the tile and --ink to near-white text. Old rules that used them for
   "white text on a dark block" get explicit values here so those blocks stay dark with light type. */
.b :is(.winter,.est,.ftr,.mm-cta,.aside-card,.signs-cta,.prof.feat,.areas.dark,.fx,.fx-bot,.town,.cmp .us,.warr,.qw:first-child,.dock,.demo,.chat-hd){background:var(--deep)}
.b :is(.winter,.est,.ftr,.mm-cta,.aside-card,.signs-cta,.prof.feat,.areas.dark,.fx,.town,.cmp .us,.warr,.qw:first-child,.chat-hd,.gs,.fab-badge,.fmc-bar,.fx-cta,.fx-big,.fx-top,.mm-prev figcaption,.slider .hint,.demo){color:#fff}
.b :is(.mm-cta h3,.fc h3,.fest h2,.winter-txt h2,.aside-card h3,.est h2,.areas.dark h2,.warr h2,.prof.feat h3,.qw:first-child p,.town-b b,.ftr-big h2,.ftr h4,.fx-col h4,.fx-cta .tag,.est-call a,.mm-cta .or a,.aside-card .or a,.dock .x a){color:#fff}
.b .slider .lab.r,.b .rq-b:hover{color:#111}
.b .chat-fab,.b .dock .chat-fab{background:var(--deep);color:#fff}
/* the form's corner logo uses the same typeset wordmark */
.b .ff-brand img{display:none}
.b .ff-brand::before{content:"Clark Fork";display:block;font-family:var(--hd);font-weight:700;font-size:24px;letter-spacing:-.03em;color:#fff;padding-left:18px;background:linear-gradient(var(--y),var(--y)) 0 6px/10px 10px no-repeat;margin-bottom:14px}

/* ---------- home hero: copy and photo beside the price builder ---------- */
.ip-hero{padding:clamp(24px,3vw,44px) 0 clamp(40px,5vw,72px)}
.ip-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.85fr);gap:clamp(20px,2.6vw,40px);align-items:start}
.ip-k{font-size:14px;font-weight:600;color:#3d8a5a;letter-spacing:.01em}
.ip-hero h1{font-size:clamp(46px,5.6vw,88px);line-height:.98;letter-spacing:-.025em;font-weight:800;margin-top:14px;color:var(--hi)}
.ip-hero h1 .mask{display:block}
.ip-sub{margin-top:20px;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--ink-3);max-width:34em}
.ip-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-size:14.5px;color:var(--ink-3)}
.ip-trust li{display:inline-flex;align-items:center}
.ip-trust b{color:var(--hi);font-weight:700}
.ip-stars{display:inline-flex;gap:1px;color:#e2a614;margin-right:8px}
.ip-stars svg{width:15px;height:15px}
.ip-photo{position:relative;margin:clamp(24px,2.6vw,36px) 0 0;border-radius:var(--rad);overflow:hidden;aspect-ratio:16/8.6}
.ip-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.ip-photo .snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ip-photo figcaption{position:absolute;left:14px;bottom:14px;z-index:2;background:rgba(255,255,255,.92);color:var(--hi);font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px}

.ip-tool{position:sticky;top:96px;background:var(--deep);color:#fff;border-radius:24px;padding:clamp(22px,2.2vw,32px);box-shadow:0 30px 60px -36px rgba(13,36,23,.6)}
.ip-tool-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.ip-tool-h b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.ip-tool-h span{font-size:13px;color:rgba(255,255,255,.62)}
.ip-tool fieldset{border:0;margin:18px 0 0;padding:0;min-width:0}
.ip-tool legend{font-size:14px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:10px;padding:0}
.ip-opts{display:flex;flex-wrap:wrap;gap:8px}
.ip-opts button{height:42px;padding:0 15px;border-radius:12px;font-size:14.5px;font-weight:600;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.ip-tool .ip-opts button{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.16)}
.ip-tool .ip-opts button:hover{border-color:rgba(255,255,255,.5)}
.ip-tool .ip-opts button[aria-pressed="true"]{background:var(--y);color:var(--deep-2);border-color:var(--y)}
.ip-out{margin-top:22px;padding:18px 18px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ip-out span{display:block;font-size:13.5px;color:rgba(255,255,255,.66)}
.ip-out b{display:block;margin-top:4px;font-size:clamp(30px,2.8vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--y);font-variant-numeric:tabular-nums}
.ip-out small{display:block;margin-top:6px;font-size:13px;color:rgba(255,255,255,.6);line-height:1.4}
.ip-go{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;height:56px;border-radius:14px;background:var(--y);color:var(--deep-2);font-weight:700;font-size:16px;transition:background .2s}
.ip-go:hover{background:#fff}
.ip-go svg{width:15px;height:15px}
.ip-fine{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.5);text-align:center}

/* color visualizer */
.ip-viz{background:#fff;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:clamp(56px,6vw,96px) 0}
.ip-viz-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,72px);align-items:center}
.ip-viz h2{margin-top:12px;font-weight:800;letter-spacing:-.02em}
.ip-viz-copy>p:not(.ip-k):not(.ip-lab){margin-top:16px;color:var(--ink-3);font-size:17px;line-height:1.55;max-width:30em}
.ip-lab{margin-top:26px;margin-bottom:10px;font-size:14px;font-weight:700;color:var(--hi)}
.ip-lab span{font-weight:500;color:var(--mut);margin-left:6px}
.ip-prof button{background:var(--tile-2);color:var(--hi);border:1px solid var(--edge)}
.ip-prof button:hover{border-color:var(--rule-2)}
.ip-prof button[aria-pressed="true"]{background:var(--deep);color:#fff;border-color:var(--deep)}
.ip-sw{display:flex;flex-wrap:wrap;gap:10px}
.ip-sw button{width:40px;height:40px;border-radius:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer;transition:transform .2s,box-shadow .2s}
.ip-sw button:hover{transform:translateY(-2px)}
.ip-sw button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--deep)}
.ip-house{margin:0;background:linear-gradient(180deg,#dfe9ef,#f1f4f0);border-radius:var(--rad);padding:clamp(16px,3vw,40px) clamp(16px,3vw,40px) 0;overflow:hidden;position:relative}
.ip-house svg{display:block;width:100%;height:auto}
.ip-house rect,.ip-house path{transition:fill .35s}
.ip-house figcaption{position:absolute;right:14px;top:12px;font-size:12.5px;color:var(--mut)}

/* stat strip */
.ip-stats{padding:clamp(36px,4vw,56px) 0}
.ip-stats ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ip-stats li{background:#fff;border:1px solid var(--edge);border-radius:var(--rad);padding:22px 24px}
.ip-stats b{display:block;font-size:clamp(32px,3vw,44px);font-weight:800;letter-spacing:-.04em;color:var(--hi);line-height:1}
.ip-stats span{display:block;margin-top:8px;font-size:14.5px;color:var(--mut)}

@media (max-width:960px){
  .ip-grid,.ip-viz-in{grid-template-columns:1fr}
  .ip-tool{position:static}
  .ip-copy{display:contents}
  .ip-copy>*{grid-column:1}
  .ip-photo{order:3;margin-top:0}
  .ip-stats ul{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ip-hero h1{font-size:clamp(40px,12vw,54px)}
  .ip-opts button{flex:1 1 auto}
  .ip-photo{aspect-ratio:4/3}
  .ip-stats li{padding:18px}
}
.b .phero h1{font-size:clamp(40px,4.4vw,66px);letter-spacing:-.025em;font-weight:800}

/* contrast fixes: blocks that were dark in the bento design and are light here, and the reverse */
.b .fab-badge{background:var(--deep)!important}
.b .fab-badge,.b .fab-badge *{color:#fff!important}
.b .fband-ph,.b .fband-ph svg{color:#fff}
.b .fc-b h3{color:var(--hi)!important}
.b .fc-b p{color:var(--tx)}
.b .fest h2{color:var(--hi)!important}
.b .fest-call,.b .fest-call svg{color:var(--deep)}
.b .ff-ph,.b .ff-ph a,.b .ff h4{color:#fff!important}
.b .ff h4{opacity:.6}
.b a.est{background:var(--y)!important;color:var(--deep-2)!important;border-radius:10px}
.b summary i{background:var(--tile-2)}
.b summary i::before,.b summary i::after{background:var(--hi)}
.b details[open] summary i::before,.b details[open] summary i::after{background:#fff}
.b :is(.ff,.fband) :is(.fbtn-y,.fbtn-k){background:var(--y)!important;color:var(--deep-2)!important}
.b :is(.ff,.fband) :is(.fbtn-y,.fbtn-k):hover{background:#fff!important}

/* ---------- price guide ---------- */
.ip-guide{background:#fff;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:clamp(56px,6vw,96px) 0}
.ip-guide-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);align-items:start}
.ip-guide h2,.ip-how h2,.ip-wall h2{margin-top:12px;font-weight:800;letter-spacing:-.02em}
.ip-guide-copy>p:not(.ip-k){margin-top:16px;color:var(--ink-3);font-size:17px;line-height:1.55}
.ip-inc{list-style:none;margin:22px 0 26px;display:grid;gap:10px;font-size:15.5px;color:var(--hi)}
.ip-inc li{display:flex;gap:10px;align-items:flex-start}
.ip-inc li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%2312301f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ip-table-wrap{border:1px solid var(--edge);border-radius:var(--rad);overflow:hidden;background:#fff}
.ip-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ip-table caption{text-align:left;padding:16px 22px;font-size:13.5px;font-weight:600;color:var(--mut);background:var(--tile-2);border-bottom:1px solid var(--edge)}
.ip-table thead{display:none}
.ip-table th,.ip-table td{padding:16px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--edge);font-weight:400}
.ip-table tr:last-child th,.ip-table tr:last-child td{border-bottom:0}
.ip-table td{text-align:right;white-space:nowrap}
.ip-table b{display:block;font-weight:700;color:var(--hi);font-size:16px}
.ip-table td b{font-size:18px}
.ip-table span{display:block;margin-top:3px;font-size:13.5px;color:var(--mut)}
.ip-table tbody tr:hover{background:var(--tile-2)}
.ip-fine2{padding:10px 22px 14px;font-size:12.5px;color:var(--mut);border-top:1px solid var(--edge)}

/* ---------- how it works ---------- */
.ip-how{padding:clamp(56px,6vw,96px) 0}
.ip-sec-h{max-width:640px}
.ip-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(24px,3vw,40px);counter-reset:none}
.ip-steps li{background:#fff;border:1px solid var(--edge);border-radius:var(--rad);overflow:hidden;padding-bottom:22px}
.ip-steps img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0!important}
.ip-steps b{display:flex;align-items:center;gap:10px;margin:18px 22px 0;font-size:19px;font-weight:800;color:var(--hi);letter-spacing:-.01em}
.ip-steps b span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--y);color:var(--deep-2);font-size:14px}
.ip-steps p{margin:8px 22px 0;font-size:15px;line-height:1.55;color:var(--ink-3)}

/* ---------- review wall ---------- */
.ip-wall{background:#fff;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:clamp(56px,6vw,96px) 0}
.ip-wall-h{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ip-more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--deep);border-bottom:2px solid var(--y);padding-bottom:2px}
.ip-more svg{width:14px;height:14px}
.ip-wall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.ip-rv{margin:0;background:var(--tile-2);border:1px solid var(--edge);border-radius:var(--rad);padding:22px;display:flex;flex-direction:column}
.ip-rv-top{display:flex;align-items:center;justify-content:space-between}
.ip-g{width:20px;height:20px}
.ip-rv blockquote{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--hi)}
.ip-rv figcaption{margin-top:auto;padding-top:18px;font-size:14px;color:var(--mut)}
.ip-rv figcaption b{display:block;color:var(--hi);font-weight:700}

/* areas without the map */
.b .ip-area{grid-template-columns:1fr!important}
.b .ip-area .farea-towns{max-width:900px}

@media (max-width:960px){
  .ip-guide-in{grid-template-columns:1fr}
  .ip-steps,.ip-wall-grid{grid-template-columns:1fr 1fr}
  .ip-steps li:last-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .ip-steps,.ip-wall-grid{grid-template-columns:1fr}
  .ip-table th,.ip-table td{padding:14px 16px}
  .ip-table td b{font-size:16px}
  .ip-table caption{padding:14px 16px}
}

/* Clark Fork brand on B (2026-10-29): the real logo instead of the typeset mark */
.b .logo img.cf-logo{display:block!important;height:50px;width:auto}
.b .logo .logo-t{display:none!important}
.b .ff-brand img.cf-logo{display:block!important;height:54px;width:auto;margin-bottom:18px}
.b .ff-brand::before{content:none!important}
.b .hdr-in{height:80px}
@media (max-width:900px){.b .logo img.cf-logo{height:40px}.b .hdr-in{height:68px}}

/* siding packages, Shasta-style published tiers */
.ip-pks{padding:clamp(56px,6vw,96px) 0}
.ip-sec-h.c{margin:0 auto;text-align:center}
.ip-sec-h p:not(.ip-k){margin-top:14px;color:var(--ink-3);font-size:17px;line-height:1.55}
.ip-pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3vw,44px);align-items:stretch}
.ip-pk{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--edge);border-radius:var(--rad);padding:28px 26px 26px}
.ip-pk.hot{border:2.5px solid var(--deep);box-shadow:0 24px 48px -28px rgba(15,47,31,.45)}
.ip-pk-tag{position:absolute;top:-13px;left:24px;background:var(--y);color:var(--deep-2);font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.ip-pk-n{font-family:"Barlow Condensed",var(--hd);font-weight:900;font-size:30px;text-transform:uppercase;letter-spacing:.01em;color:var(--deep)}
.ip-pk-s{font-weight:600;color:var(--ink-3)}
.ip-pk-p{margin-top:18px;font-size:clamp(30px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--hi);font-variant-numeric:tabular-nums}
.ip-pk-u{font-size:13px;color:var(--mut)}
.ip-pk ul{list-style:none;margin:20px 0 24px;padding:18px 0 0;border-top:1px solid var(--edge);display:grid;gap:10px;font-size:15px;color:var(--hi)}
.ip-pk li{display:flex;gap:10px}
.ip-pk li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23ffc629' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ip-pk .fbtn{margin-top:auto;width:100%}
.b .ip-pk .fbtn-o{border:2px solid var(--deep);color:var(--deep)}
.b .ip-pk .fbtn-o:hover{background:var(--deep);color:#fff}
.b .ip-pk .fbtn-y{background:var(--y);color:var(--deep-2)}
/* headings across B pick up the brand's condensed face */
.ip-hero h1,.ip-guide h2,.ip-how h2,.ip-wall h2,.ip-viz h2,.ip-pks h2{font-family:"Barlow Condensed",var(--hd);font-weight:900;letter-spacing:-.005em;text-transform:none}
.ip-hero h1{font-size:clamp(50px,6vw,96px);line-height:.95}
.ip-out b{color:var(--y)}
.ip-tool .ip-opts button[aria-pressed="true"]{background:var(--y);color:var(--deep-2);border-color:var(--y)}
.ip-go{background:var(--y);color:var(--deep-2)}
.ip-k{color:#2f7a4f}
@media (max-width:960px){.ip-pk-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}}