/* Pittman Supply Company — static brochure site
No ecommerce, no catalog, no external dependencies except Google Fonts. */
:root{
/* Palette matches the Pool & Spa logo artwork, which uses the same blue as
the official brand color card: #0D36C4. (The earlier logo export used
#334CA1 — that file was out of date; this now agrees with the sheet.)
Brand blue #0D36C4 · brand gray #414141 · Texas Bath & Kitchen navy #023F80 */
--navy:#0D36C4;
--navy-lt:#2E52DA;
--navy-dk:#0A2B9E;
--tbk:#023F80;
--ink:#2C2C2E;
--graphite:#414141;
--paper:#f3f4f7;
--white:#fff;
--edge:#dcdee5;
--muted:#63656d;
/* Brochure brass, sampled from the printed bi-fold.
--gold sits on DARK backgrounds; --gold-dk on LIGHT ones and anywhere
white text sits on top of it (light brass fails contrast with white). */
--pumpkin:#F0782A;
--gold:#C9A867;
--gold-dk:#8A6A33;
/* Apple Messages SMS green, used only in the text-your-order panel. */
--imsg:#34C759;
--wrap:1240px;
--display:'Archivo',system-ui,sans-serif;
--body:'IBM Plex Sans',system-ui,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-.02em}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--gold-dk);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;z-index:99}
/* ---------- PHOTO PLACEHOLDERS ----------
Branded navy panels that stand in for photography. They are designed to look
intentional, so the site is presentable before the photos exist.
To use a real photo, replace the whole element:
--> 
*/
.ph{
position:relative;overflow:hidden;
box-shadow:inset 0 -3px 0 var(--gold);
background:
repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),
repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),
linear-gradient(155deg,var(--navy) 0%,var(--navy-dk) 55%,var(--ink) 100%);
}
.ph::before{ /* ghosted wordmark */
content:"";position:absolute;inset:0;
background:url('images/pittman-logo-white.png') center/min(48%,240px) no-repeat;
opacity:.16;
}
.ph::after{ /* caption: what photo belongs here */
content:attr(data-label);
position:absolute;left:16px;bottom:14px;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.5);
}
/* ---------- utility bar ---------- */
.util{background:var(--ink);color:#c3cde0;font-family:var(--mono);font-size:12px;letter-spacing:.03em}
.util .wrap{display:flex;gap:26px;align-items:center;min-height:38px;flex-wrap:wrap}
.util a{text-decoration:none}
.util a:hover{color:#fff}
.util .spacer{margin-left:auto}
.util strong{color:#fff;font-weight:500}
/* ---------- header ---------- */
.masthead{background:var(--white);border-bottom:1px solid var(--edge)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap}
.logo{display:block;text-decoration:none;line-height:0}
.logo img{width:270px;height:auto}
@media(max-width:600px){.logo img{width:238px}}
.head-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.head-tel{font-family:var(--mono);font-size:15px;font-weight:500;text-decoration:none;color:var(--ink)}
.head-tel:hover{color:var(--navy)}
/* ---------- nav ---------- */
.mainnav{background:var(--navy)}
.mainnav ul{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.mainnav a{display:block;padding:14px 22px;color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase}
.mainnav a:hover{background:var(--navy-lt)}
.mainnav li:first-child a{padding-left:0}
.mainnav a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--gold)}
/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;padding:14px 28px;border:0;cursor:pointer}
.btn:hover{background:var(--navy)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
/* ---------- hero ---------- */
.hero{background:var(--white);border-bottom:1px solid var(--edge);padding:60px 0 64px}
.hero .lede{max-width:52ch}
.hero h1{font-size:clamp(38px,5vw,60px);font-weight:800;max-width:12ch}
.hero h1 em{font-style:normal;color:var(--navy)}
.hero .lede{font-size:18px;color:var(--muted);max-width:52ch;margin:22px 0 0}
/* 5 stats in a narrow column: a deliberate 3+2 grid beats a ragged 4+1 wrap.
Row one is the three square-footage figures, row two the rest. */
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:22px 48px;margin-top:34px;padding-top:28px;border-top:1px solid var(--edge);max-width:620px}
.stat b{display:block;font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* ---------- text-to-order band (full width) ---------- */
.order{background:var(--ink);color:#fff;border-top:1px solid var(--edge)}
.order .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
padding-top:56px;padding-bottom:56px}
.order .eyebrow{color:var(--imsg);margin-bottom:12px}
.order h2{font-size:clamp(25px,3vw,34px);font-weight:700;color:#fff;max-width:18ch}
.order p{margin:16px 0 0;font-size:16.5px;color:#a9b5cb;max-width:50ch}
.ordernum{display:inline-flex;flex-direction:column;gap:4px;margin-top:26px;
background:#3d3d40;padding:16px 26px;text-decoration:none;border-left:3px solid var(--imsg)}
.ordernum:hover{background:#4a4a4d}
.ordernum .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#a9b5cb}
.ordernum .no{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.02em;color:#fff}
.thread{display:flex;flex-direction:column;gap:10px}
.bub{font-family:var(--mono);font-size:14px;padding:13px 17px;max-width:78%;line-height:1.45}
.bub.out{background:var(--imsg);color:#fff;align-self:flex-end;border-radius:16px 16px 4px 16px}
.bub.in{background:#3d3d40;color:#dbe3f0;align-self:flex-start;border-radius:16px 16px 16px 4px}
/* ---------- sections ---------- */
.sec{padding:64px 0}
.sec.tight{padding-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(25px,3vw,34px);font-weight:700}
.sec-head a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold-dk);padding-bottom:2px}
/* ---------- page header (interior) ---------- */
.pagehead{background:var(--ink);color:#fff;padding:56px 0 60px}
.pagehead .eyebrow{color:#8b99b5;margin-bottom:12px}
.pagehead h1{font-size:clamp(34px,4.6vw,52px);font-weight:800;max-width:17ch;color:#fff}
.pagehead p{color:#a9b5cb;font-size:18px;max-width:54ch;margin:20px 0 0}
/* ---------- what we stock (no prices, no cart) ---------- */
.stock{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--white);border:1px solid var(--edge);display:block;text-decoration:none}
.card .ph{aspect-ratio:3/2}
.card .lb{padding:18px}
.card h3{font-size:18px;font-weight:700;margin-bottom:8px}
.card p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
/* ---------- line card ---------- */
.linecard{columns:4;column-gap:32px;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.linecard li{break-inside:avoid;list-style:none;padding:7px 0;border-bottom:1px solid var(--edge);color:#33405c}
.linecard{margin:0;padding:0}
/* ---------- service strip ---------- */
.svc{background:var(--navy);color:#fff}
.svc .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding-left:0;padding-right:0}
.svc .item{padding:30px 26px;background:var(--navy)}
.svc .item + .item{box-shadow:-1px 0 0 rgba(255,255,255,.22)}
.svc .eyebrow{color:#a8bbe6;margin-bottom:8px}
.svc h3{font-size:19px;font-weight:700;color:#fff}
.svc p{margin:7px 0 0;font-size:14px;color:#c6d3ec}
/* ---------- split band ---------- */
.band{background:var(--white);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.band .grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.band .ph{min-height:420px}
.band .copy{padding:64px 56px 64px 0}
.band h2{font-size:clamp(27px,3.4vw,38px);font-weight:700;max-width:15ch}
.band p{color:var(--muted);max-width:48ch;margin:18px 0 0;font-size:16.5px}
.band .btn{margin-top:28px}
/* ---------- prose ---------- */
.prose{display:grid;grid-template-columns:1fr 1.45fr;gap:56px;align-items:start}
.prose h2{font-size:clamp(24px,3vw,32px);font-weight:700;max-width:14ch}
.prose p{margin:0 0 18px;font-size:17px;color:#33405c;line-height:1.65}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--navy);font-weight:500}
/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge)}
.tl li{display:grid;grid-template-columns:130px 1fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--edge);align-items:start}
.tl .yr{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--navy);line-height:1}
.tl h3{font-size:18px;font-weight:700;margin-bottom:6px}
.tl p{margin:0;color:var(--muted);font-size:15.5px;max-width:60ch}
/* ---------- capability numbers ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge)}
.caps div{background:var(--white);padding:28px 24px}
.caps b{display:block;font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.035em;color:var(--navy);line-height:1}
.caps span{display:block;margin-top:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
/* ---------- branches ---------- */
.branches{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.branch{background:var(--white);border:1px solid var(--edge);border-top:4px solid var(--navy);padding:28px}
.branch h3{font-size:21px;font-weight:700}
.branch dl{margin:18px 0 0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:14.5px}
.branch dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.branch dd{margin:0}
.branch a{color:var(--navy);text-decoration:none;font-weight:500}
.branch a:hover{text-decoration:underline}
.branch .tel{font-family:var(--mono);font-weight:500}
/* ---------- form ---------- */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--edge);background:var(--white);padding:12px 14px;font-family:var(--body);font-size:15.5px;color:var(--ink);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none}
.field textarea{min-height:130px;resize:vertical}
/* ---------- footer ---------- */
footer{background:var(--ink);color:#a9b5cb;padding:56px 0 0;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer a{color:#a9b5cb;text-decoration:none}
footer a:hover{color:#fff}
.flogo{display:block;line-height:0;margin-bottom:4px}
.flogo img{width:230px;height:auto}
.fblurb{margin:14px 0 0;max-width:36ch;font-size:14px;line-height:1.6}
.faddr{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#a9b5cb}
.affil{display:flex;gap:16px;margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#6f7d99;flex-wrap:wrap}
.legal{border-top:1px solid #414144;margin-top:48px;padding:20px 0 26px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#6f7d99}
.legal .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
@media(max-width:1000px){
.order .grid{grid-template-columns:1fr;gap:34px}
.band .grid,.branches,.prose,.formgrid{grid-template-columns:1fr}
.prose{gap:24px}
.band .copy{padding:48px 0}
.band .ph{min-height:260px;order:-1}
.stock{grid-template-columns:repeat(2,1fr)}
.linecard{columns:2}
.svc .wrap{grid-template-columns:1fr}
.svc .item + .item{box-shadow:0 -1px 0 rgba(255,255,255,.22)}
.fgrid,.caps{grid-template-columns:1fr 1fr}
.tl li{grid-template-columns:1fr;gap:8px}
}
@media(max-width:600px){
.stats{grid-template-columns:repeat(2,auto);gap:18px 26px}
.stock,.fgrid{grid-template-columns:1fr}
.linecard{columns:1}
.util .wrap{padding-top:9px;padding-bottom:9px;gap:14px}
.util .spacer{margin-left:0}
.sec{padding:46px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* ---------- logo lockups ---------- */
.tbk-mark{margin-bottom:24px}
.tbk-mark img{width:290px;height:auto}
.band .tbk-mark img{width:320px}
.pagehead .tbk-mark img{width:340px}
@media(max-width:600px){.tbk-mark img,.band .tbk-mark img,.pagehead .tbk-mark img{width:240px}}
/* ---------- featured lines ---------- */
.linefeat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.linefeat.four{grid-template-columns:repeat(2,1fr)}
.lf{background:var(--white);border:1px solid var(--edge);border-top:4px solid var(--navy);padding:30px 26px;display:flex;flex-direction:column}
.lf .eyebrow{margin-bottom:9px}
.lf h3{font-size:27px;font-weight:800;letter-spacing:-.035em;margin-bottom:10px}
.lf .tag{font-family:var(--body);font-size:15px;color:var(--ink);font-weight:600;margin:0 0 12px}
.lf p{margin:0 0 18px;font-size:15px;color:var(--muted);line-height:1.55}
.lf ul{list-style:none;margin:0 0 22px;padding:0;font-size:14.5px;color:#3d4152}
.lf li{padding:8px 0;border-top:1px solid var(--edge);display:flex;gap:11px;line-height:1.45}
.lf li::before{content:"";flex:0 0 6px;height:6px;margin-top:7px;background:var(--gold-dk)}
.lf .go{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold-dk);padding-bottom:3px}
.lf .go:hover{color:var(--ink)}
.lf.tbk-line{border-top-color:var(--tbk)}
/* ---------- spotlight band (TOTO / bidets) ---------- */
.spotlight{background:var(--tbk);color:#fff}
.spotlight .grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.spotlight .copy{padding:62px 56px 62px 0}
.spotlight h2{font-size:clamp(27px,3.4vw,38px);font-weight:700;color:#fff;max-width:16ch}
.spotlight p{color:#c6d8ec;max-width:50ch;margin:18px 0 0;font-size:16.5px}
.spotlight .ph{min-height:440px}
.spotlight .btn{margin-top:28px;background:#fff;color:var(--tbk)}
.spotlight .btn:hover{background:var(--gold-dk);color:#fff}
.badge{display:inline-block;border:1px solid rgba(255,255,255,.45);padding:9px 15px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:20px;color:#fff}
.speclist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22);max-width:520px}
.speclist li{background:var(--tbk);padding:13px 16px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-size:14.5px}
.speclist b{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#a8c4e0;font-weight:400}
@media(max-width:1000px){
.linefeat,.linefeat.four{grid-template-columns:1fr}
.spotlight .grid{grid-template-columns:1fr}
.spotlight .copy{padding:48px 0}
.spotlight .ph{min-height:280px;order:-1}
}
/* ---------- form extras ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formfoot{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
.formfoot span{font-size:14.5px;color:var(--muted)}
.formfoot a{color:var(--navy);font-weight:500}
/* ---------- confirmation page ---------- */
.thanks{padding:96px 0 110px;text-align:center}
.thanks h1{font-size:clamp(32px,4.4vw,50px);font-weight:800;max-width:18ch;margin:0 auto}
.thanks p{font-size:18px;color:var(--muted);max-width:52ch;margin:22px auto 0}
.thanks .tick{width:56px;height:56px;margin:0 auto 26px;border:3px solid var(--navy);border-radius:50%;position:relative}
.thanks .tick::after{content:"";position:absolute;left:18px;top:9px;width:14px;height:26px;border:solid var(--navy);border-width:0 3px 3px 0;transform:rotate(45deg)}
.thanks .actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- wide feature card (Sterling) ---------- */
.lf.wide{grid-column:1/-1;min-width:0}
.lf.wide .lfgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;min-width:0}
.lf.wide .lfgrid > *{min-width:0}
.lf.wide h3{font-size:32px}
.lf.wide p{font-size:15.5px}
.yardstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);margin:0 0 20px}
.yardstats div{background:var(--paper);padding:16px 14px;min-width:0}
.yardstats b{display:block;font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1;overflow-wrap:break-word}
/* word-based stats need a smaller size than numerals */
.yardstats.words b{font-size:17px;letter-spacing:-.01em}
.yardstats span{display:block;margin-top:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);line-height:1.4}
@media(max-width:1000px){
.lf.wide .lfgrid{grid-template-columns:1fr;gap:20px}
.yardstats{grid-template-columns:1fr}
.lf.wide h3{font-size:27px}
}
/* ---------- flipped band (photo on the left) ---------- */
.band.flip .copy{padding:64px 0 64px 56px}
.band .yardstats{margin:26px 0 0;max-width:460px}
@media(max-width:1000px){
.band.flip .copy{padding:48px 0}
}
/* ---------- real photos dropped into placeholder slots ----------
Swap for 
and these rules keep the crop and the layout identical. */
img.ph{display:block;width:100%;height:100%;object-fit:cover}
.card img.ph{aspect-ratio:3/2;height:auto}
/* ---------- tighter masthead on phones ----------
The phone number + quote button wrap below the logo on narrow screens,
which pushed the header past a third of the viewport. Compact it. */
@media(max-width:600px){
.masthead .wrap{padding-top:14px;padding-bottom:14px;gap:12px}
.head-cta{gap:14px;width:100%}
.head-cta .btn{padding:11px 18px;font-size:12.5px}
.head-tel{font-size:14px}
}
/* ---------- real photos in the spotlight band ----------
The copy column is tall, so a stretched image column butchers a landscape
photo. Centre it at its own ratio instead and let the navy show through. */
.spotlight img.ph{
align-self:center;
aspect-ratio:4/3;
height:auto;
min-height:0;
}
@media(max-width:1000px){
.spotlight img.ph{aspect-ratio:16/10}
}
/* ---------- utility bar: call + text order ---------- */
.util a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.util a:hover{border-bottom-color:#fff}
.util .hide-sm{display:inline}
@media(max-width:820px){ .util .hide-sm{display:none} }
/* ---------- horizontal brand rail (showroom) ---------- */
.rail-wrap{position:relative}
.rail{display:flex;align-items:stretch;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:4px 24px 22px;margin:0 -24px;-webkit-overflow-scrolling:touch;
scrollbar-width:thin;scrollbar-color:var(--gold-dk) var(--edge)}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-track{background:var(--edge)}
.rail::-webkit-scrollbar-thumb{background:var(--gold-dk)}
.rail > *{scroll-snap-align:start;flex:0 0 300px}
.rail .lf{height:auto}
.railhint{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.railhint::after{content:"→";font-size:14px;letter-spacing:0}
@media(max-width:600px){ .rail > *{flex:0 0 82%} }
/* ---------- account application cards ---------- */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.app{background:var(--white);border:1px solid var(--edge);border-top:4px solid var(--navy);
padding:30px 28px;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.app:hover{border-color:var(--navy)}
.app .eyebrow{margin-bottom:10px}
.app h3{font-size:23px;font-weight:700;margin-bottom:10px}
.app p{margin:0 0 20px;font-size:15.5px;color:var(--muted);line-height:1.55}
.app ul{list-style:none;margin:0 0 24px;padding:0;font-size:14.5px;color:#3d4152}
.app li{padding:8px 0;border-top:1px solid var(--edge);display:flex;gap:11px;line-height:1.45}
.app li::before{content:"";flex:0 0 6px;height:6px;margin-top:7px;background:var(--gold-dk)}
.app .cta{margin-top:auto;align-self:flex-start;background:var(--ink);color:#fff;
font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.09em;
text-transform:uppercase;padding:13px 24px}
.app:hover .cta{background:var(--navy)}
.app .ext{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin-top:12px}
@media(max-width:820px){ .apps{grid-template-columns:1fr} }
/* ---------- appointment page ---------- */
.booking{background:var(--paper);border:1px solid var(--edge);padding:0;margin:0 0 8px}
.booking-slot{min-height:180px;display:flex;align-items:center;justify-content:center;
text-align:center;padding:40px 28px;background:
repeating-linear-gradient(135deg,#e9edf4 0 12px,#e3e8f1 12px 24px)}
.booking-slot p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:#6b7a94}
.appt-note{background:var(--white);border:1px solid var(--edge);border-left:4px solid var(--gold-dk);
padding:22px 26px;margin:0 0 34px}
.appt-note h3{font-size:17px;font-weight:700;margin-bottom:8px}
.appt-note p{margin:0;font-size:15px;color:var(--muted);line-height:1.6}
.appt-note a{color:var(--navy);font-weight:500}
.checkrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.checkrow label{display:flex;align-items:flex-start;gap:9px;background:var(--white);
border:1px solid var(--edge);padding:12px 14px;font-size:14.5px;cursor:pointer;line-height:1.4}
.checkrow label:hover{border-color:var(--navy)}
.checkrow input{margin-top:2px;flex:0 0 auto;accent-color:var(--navy)}
.whatto{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.whatto ul{list-style:none;margin:14px 0 0;padding:0;font-size:15.5px;color:#3d4152}
.whatto li{padding:10px 0;border-top:1px solid var(--edge);display:flex;gap:12px;line-height:1.5}
.whatto li::before{content:"";flex:0 0 6px;height:6px;margin-top:8px;background:var(--gold-dk)}
@media(max-width:820px){
.checkrow{grid-template-columns:1fr 1fr}
.whatto{grid-template-columns:1fr;gap:24px}
}
@media(max-width:520px){ .checkrow{grid-template-columns:1fr} }
/* ---------- Microsoft Bookings: direct link panel ----------
Bookings pages send a frame-blocking header on most tenants, so this
links out rather than embedding. A link works everywhere; a frame does not. */
.bookcard{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
background:var(--ink);color:#fff;padding:52px 48px;margin:0 0 40px}
.bookcard .eyebrow{color:var(--imsg);margin-bottom:12px}
.bookcard h2{font-family:var(--display);font-size:clamp(25px,3vw,34px);font-weight:700;
color:#fff;max-width:18ch;letter-spacing:-.02em;line-height:1.05}
.bookcard > div > p{margin:16px 0 0;font-size:16.5px;color:#a9b5cb;max-width:46ch}
.bookbtn{display:inline-flex;align-items:center;gap:12px;margin-top:28px;
background:var(--imsg);color:#0d2b16;text-decoration:none;
font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em;
padding:18px 32px}
.bookbtn:hover{background:#fff;color:var(--ink)}
.booknote{margin:18px 0 0;font-size:13.5px;color:#8b99b5;line-height:1.6}
.booknote a{color:#fff}
.bookwhat{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:#3d3d40;border:1px solid #3d3d40}
.bookwhat li{background:var(--ink);padding:18px 20px;display:flex;gap:16px;align-items:flex-start}
.bookwhat b{font-family:var(--display);font-size:19px;font-weight:800;color:var(--imsg);line-height:1.2;flex:0 0 auto}
.bookwhat span{font-size:15px;color:#c6d3ec;line-height:1.5}
/* ---------- cannot-find-a-time fallback ---------- */
.appt-fallback{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.appt-fallback h2{font-family:var(--display);font-size:clamp(23px,2.8vw,30px);font-weight:700;max-width:17ch;letter-spacing:-.02em;line-height:1.08}
.appt-fallback > div > p{margin:16px 0 0;font-size:16px;color:var(--muted);max-width:48ch}
.appt-ways{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
.appt-ways a{background:var(--white);padding:17px 20px;display:flex;justify-content:space-between;
gap:16px;align-items:baseline;text-decoration:none;flex-wrap:wrap}
.appt-ways a:hover{background:var(--paper)}
.appt-ways .w{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.appt-ways .v{font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy)}
@media(max-width:900px){
.bookcard{grid-template-columns:1fr;gap:32px;padding:38px 26px}
.appt-fallback{grid-template-columns:1fr;gap:26px}
}
/* ---------- wide subjects in the split bands ----------
The band stretches its image column to match the copy, which crops the
sides off a landscape photo. For subjects that lose their meaning when
cropped (the three tub canopies), keep the full frame and centre it. */
.band img.ph.keep-wide{
align-self:center;
aspect-ratio:4/3;
height:auto;
min-height:0;
}
/* ---------- policy / legal pages ---------- */
.policy{max-width:74ch}
.policy h2{font-family:var(--display);font-size:clamp(21px,2.4vw,26px);font-weight:700;
letter-spacing:-.02em;margin:44px 0 14px}
.policy h2:first-of-type{margin-top:0}
.policy h3{font-family:var(--display);font-size:17.5px;font-weight:700;margin:26px 0 10px}
.policy p{margin:0 0 16px;font-size:16.5px;color:#33405c;line-height:1.7}
.policy ul{margin:0 0 16px;padding:0;list-style:none}
.policy li{padding:9px 0;border-top:1px solid var(--edge);display:flex;gap:12px;
font-size:16px;color:#33405c;line-height:1.6}
.policy li::before{content:"";flex:0 0 6px;height:6px;margin-top:9px;background:var(--gold-dk)}
.policy a{color:var(--navy);font-weight:500}
.policy .updated{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);margin-bottom:34px}
/* the SMS clause carriers look for — called out so it is easy to find */
.smsblock{background:var(--white);border:1px solid var(--edge);border-left:4px solid var(--navy);
padding:26px 28px;margin:0 0 16px}
.smsblock p:last-child{margin-bottom:0}
.smsblock strong{color:var(--ink)}
.legal .wrap a{color:#6f7d99;text-decoration:none}
.legal .wrap a:hover{color:#fff}
/* ---------- hours inside the footer address columns ---------- */
.fhrs{margin:16px 0 0;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#a9b5cb}
.fhrs b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:#fff;font-weight:500;margin-bottom:4px}
/* ---------- line card download ---------- */
.dl{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:#fff;
text-decoration:none;font-family:var(--display);font-weight:600;font-size:13.5px;
letter-spacing:.06em;text-transform:uppercase;padding:14px 26px}
.dl:hover{background:var(--navy)}
.dl .pdf{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
border:1px solid rgba(255,255,255,.45);padding:3px 7px;text-transform:none}
.dlband{background:var(--white);border:1px solid var(--edge);border-top:4px solid var(--navy);
padding:34px 36px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-top:44px}
.dlband h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.dlband p{margin:0;color:var(--muted);font-size:15.5px;max-width:56ch;line-height:1.55}
@media(max-width:820px){ .dlband{grid-template-columns:1fr} }
/* ---------- three-trade strip under the hero ---------- */
.trades{background:var(--white);border-bottom:1px solid var(--edge)}
.trades .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
padding-left:0;padding-right:0}
.trades a{padding:34px 30px;background:var(--white);text-decoration:none;color:inherit;display:block}
.trades a + a{box-shadow:-1px 0 0 var(--edge)}
.trades a:hover{background:var(--paper)}
.trades .eyebrow{margin-bottom:10px}
.trades h3{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:9px}
.trades p{margin:0 0 16px;font-size:15px;color:var(--muted);line-height:1.55}
.trades .go{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--navy);border-bottom:2px solid var(--gold-dk);padding-bottom:3px}
.trades .new{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;background:var(--navy);color:#fff;padding:3px 8px;margin-left:8px;vertical-align:2px}
@media(max-width:900px){
.trades .wrap{grid-template-columns:1fr}
.trades a + a{box-shadow:0 -1px 0 var(--edge)}
}
/* ---------- reviews ---------- */
.reviews{background:var(--paper)}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:var(--white);border:1px solid var(--edge);border-top:4px solid var(--gold-dk);
padding:28px 26px;display:flex;flex-direction:column}
.rev .stars{color:var(--gold-dk);font-size:16px;letter-spacing:3px;margin-bottom:14px}
.rev p{margin:0 0 20px;font-size:16px;color:#33405c;line-height:1.65}
.rev .who{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted)}
/* Trustindex injects its own markup. These rules nudge it toward the rest of
the site — square corners and our typeface — without fighting the widget.
If Trustindex changes its class names these simply stop applying; nothing
breaks. */
.revwidget{min-height:120px}
.revwidget .ti-widget,
.revwidget .ti-widget *{font-family:var(--body)!important}
.revwidget .ti-widget .ti-review-item,
.revwidget .ti-widget .ti-review-item > .ti-inner{border-radius:0!important}
.revwidget .ti-widget .ti-name,
.revwidget .ti-widget .ti-header-title{font-family:var(--display)!important}
@media(max-width:900px){ .revgrid{grid-template-columns:1fr} }
/* ================================================================
HALLOWEEN COUNTER DAY — banner + feature card
Retire after 21 Oct: delete the .announce block and the
block in index.html. Styles can stay.
================================================================ */
:root{ --pumpkin:#FF7A18; --pumpkin-lt:#FFA33F; --murk:#120A1E; --murk2:#1E0F30; --slime:#8BC34A; }
.announce{position:relative;overflow:hidden;color:#fff;
background:linear-gradient(96deg,#0B0512 0%,#25102F 38%,#3A1408 72%,#5A1E06 100%)}
.announce .wrap{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px;
padding-right:46px;flex-wrap:wrap;position:relative;z-index:3}
/* drifting bats */
.announce .bats{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5}
.announce .bats span{position:absolute;display:block;line-height:0}
.announce .bats svg{width:100%;height:auto;display:block;fill:#0B0512}
.announce .bats .b1{left:26%;top:12%;width:24px;animation:flap 7s ease-in-out infinite}
.announce .bats .b2{left:56%;top:56%;width:16px;animation:flap 9s ease-in-out infinite reverse}
.announce .bats .b3{left:78%;top:18%;width:20px;animation:flap 11s ease-in-out infinite}
@keyframes flap{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(16px,-7px) rotate(5deg)}}
/* cobweb in the left corner */
.announce .web{position:absolute;left:0;top:0;width:88px;height:88px;z-index:2;
opacity:.32;pointer-events:none;stroke:#fff;fill:none;stroke-width:1.1}
.announce .tag{position:relative;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;background:var(--pumpkin);color:#2A0E02;padding:6px 11px;font-weight:700;
white-space:nowrap;box-shadow:0 0 18px rgba(255,122,24,.55)}
.announce .msg{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;
text-shadow:0 1px 10px rgba(0,0,0,.6)}
.announce .msg b{font-weight:800;color:var(--pumpkin-lt)}
.announce .when{font-family:var(--mono);font-size:12.5px;color:#CBB3D6;white-space:nowrap}
.announce .go{margin-left:auto;font-family:var(--display);font-weight:800;font-size:12px;
letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
background:var(--pumpkin);color:#2A0E02;padding:10px 17px;white-space:nowrap;
box-shadow:0 0 22px rgba(255,122,24,.5)}
.announce .go:hover{background:#fff;color:var(--murk)}
.announce .close{position:absolute;right:18px;top:50%;transform:translateY(-50%);background:none;
border:0;color:#9B86A8;font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;z-index:4}
.announce .close:hover{color:#fff}
@media(max-width:820px){
.announce .when{display:none}
.announce .go{margin-left:0;width:100%;text-align:center;padding:12px 18px}
}
@media(max-width:600px){
.announce .wrap{gap:11px;padding-top:11px;padding-bottom:11px;padding-right:42px}
.announce .tag{font-size:9px;padding:4px 8px}
.announce .msg{font-size:13.5px;line-height:1.35}
.announce .go{font-size:11.5px;padding:11px 16px}
.announce .close{top:13px;transform:none;right:12px;font-size:20px}
.announce .web{width:60px;height:60px}
}
/* ---------------- feature card ---------------- */
.event{position:relative;overflow:hidden;color:#fff;
background:radial-gradient(ellipse at 22% 0%, #3B1640 0%, transparent 58%),
radial-gradient(ellipse at 88% 100%, #5A1E06 0%, transparent 55%),
linear-gradient(165deg,#0B0512 0%,#1B0B27 55%,#100617 100%)}
.event .moon{position:absolute;right:7%;top:38px;width:108px;height:108px;border-radius:50%;
background:radial-gradient(circle at 36% 32%, #FFF6DC 0%, #F3DFA6 52%, #D9BF75 100%);
box-shadow:0 0 70px 22px rgba(255,225,150,.22);z-index:1}
.event .webc{position:absolute;left:0;top:0;width:150px;height:150px;z-index:2;opacity:.28;
stroke:#fff;fill:none;stroke-width:1.2}
.event .webc.r{left:auto;right:0;transform:scaleX(-1)}
.event .bat{position:absolute;display:block;line-height:0;opacity:.8;z-index:2}
.event .bat svg{width:100%;height:auto;display:block;fill:#0B0512}
.event .bat.e1{left:14%;top:16%;width:40px;animation:drift 13s ease-in-out infinite}
.event .bat.e2{left:60%;top:9%;width:26px;animation:drift 17s ease-in-out infinite reverse}
.event .bat.e3{left:82%;top:62%;width:32px;animation:drift 15s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(26px,-16px) rotate(7deg)}}
.event .wrap{position:relative;z-index:4;display:grid;grid-template-columns:1.05fr .95fr;
gap:52px;align-items:center;padding-top:64px;padding-bottom:64px}
.event .eyebrow{color:var(--slime);margin-bottom:14px;text-shadow:0 0 14px rgba(139,195,74,.5)}
.event h2{font-family:var(--display);font-size:clamp(30px,4vw,48px);font-weight:800;
letter-spacing:-.035em;line-height:.99;color:#fff;max-width:14ch;
text-shadow:0 3px 26px rgba(0,0,0,.75)}
.event h2 em{font-style:normal;color:var(--pumpkin);
text-shadow:0 0 34px rgba(255,122,24,.75)}
.event .blurb{margin:18px 0 0;font-size:16.5px;color:#D9C9E4;max-width:47ch;line-height:1.62}
.event .datebox{display:grid;grid-template-columns:auto 1fr;gap:0 24px;align-items:center;
background:rgba(8,3,14,.62);border:1px solid rgba(255,122,24,.42);padding:22px 26px;margin-top:28px;
box-shadow:0 0 40px rgba(255,122,24,.12) inset}
.event .day{font-family:var(--display);font-weight:800;font-size:50px;line-height:.88;
color:var(--pumpkin);text-align:center;text-shadow:0 0 28px rgba(255,122,24,.65)}
.event .day span{display:block;font-size:11px;letter-spacing:.18em;font-weight:700;color:#D9C9E4;margin-top:7px}
.event .dl2{font-size:15.5px;color:#EFE4F5;line-height:1.62}
.event .dl2 b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:#A98CB8;font-weight:400;margin-bottom:3px}
.event .btn{margin-top:26px;background:var(--pumpkin);color:#2A0E02;
box-shadow:0 0 26px rgba(255,122,24,.45)}
.event .btn:hover{background:#fff;color:var(--murk)}
.event .perks{list-style:none;margin:0;padding:0;display:grid;gap:1px;
background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13)}
.event .perks li{background:rgba(11,5,18,.78);padding:18px 20px;display:flex;gap:16px;align-items:flex-start}
.event .perks .ic{flex:0 0 30px;height:30px}
.event .perks strong{display:block;font-family:var(--display);font-size:16px;font-weight:800;color:#fff;margin-bottom:3px}
.event .perks span{font-size:14px;color:#C4B0D2;line-height:1.5}
/* Milwaukee logo lockup */
.mlogo{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.mlogo img{height:38px;width:auto}
.mlogo .slot{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
color:#8C74A0;border:1px dashed rgba(255,255,255,.28);padding:11px 16px}
.mlogo .x{font-family:var(--display);font-weight:800;font-size:15px;color:#7A6489}
@media(max-width:900px){
.event .wrap{grid-template-columns:1fr;gap:32px}
.event .moon{width:76px;height:76px;right:6%;top:24px}
.event .webc{width:100px;height:100px}
}
@media(prefers-reduced-motion:reduce){
.announce .bats svg,.event .bat{animation:none!important}
}
/* Milwaukee logo lockups */
.announce .mtag{height:30px;width:auto;position:relative;z-index:3;flex:0 0 auto}
.mlogo img{height:40px;width:auto}
.mlogo img[src*="pittman"]{height:32px}
@media(max-width:600px){ .announce .mtag{height:24px} }
/* ================================================================================
SEASONAL THEMES
================================================================================
Everything below is scoped to a class on . Nothing here touches the site
unless that class is present, so switching seasons is a one word edit and
removing it puts the site back to normal exactly as it was.
festive
normal
Only index.html carries a theme. The other pages stay standard year round.
New seasons: copy the .theme-halloween block, rename it, change the colours.
================================================================================ */
/* ---------------------------- HALLOWEEN ---------------------------- */
.theme-halloween{
/* --pumpkin is for dark backgrounds. On light ones it drops to 2.4:1, so
text over pale surfaces uses --pumpkin-ink instead. */
--pumpkin-ink:#BC4B08;
--navy:#5B2C86; /* nav + links become purple */
--navy-lt:#7440A6;
--navy-dk:#3C1A5E;
--gold-dk:#B8621A; /* underlines + markers go amber */
--ink:#160B22;
--paper:#F6F1F8;
--edge:#E2D6EA;
}
/* nav: purple with a pumpkin marker on the current page */
.theme-halloween .mainnav{
background:linear-gradient(90deg,#3C1A5E 0%,#5B2C86 48%,#6B2F6E 100%)}
.theme-halloween .mainnav a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--pumpkin)}
/* hero: warm dusk wash, cobweb in the corner, a couple of bats */
.theme-halloween .hero{
position:relative;overflow:hidden;
background:linear-gradient(168deg,#FFFFFF 0%,#FBF4FA 46%,#F7EDE4 100%)}
.theme-halloween .hero::before{
content:"";position:absolute;right:-60px;top:-70px;width:340px;height:340px;
background:radial-gradient(circle,rgba(255,122,24,.16) 0%,transparent 68%);pointer-events:none}
.theme-halloween .hero h1 em{color:var(--pumpkin-ink)}
.theme-halloween .hero .stat b{color:#5B2C86}
.theme-halloween .hero .web-deco{
position:absolute;left:-4px;top:-4px;width:132px;height:132px;
stroke:#5B2C86;fill:none;stroke-width:1.1;opacity:.22;pointer-events:none;z-index:1}
.theme-halloween .hero .wrap{position:relative;z-index:2}
.theme-halloween .hero .bat-deco{position:absolute;display:block;line-height:0;z-index:1;opacity:.30}
.theme-halloween .hero .bat-deco svg{width:100%;height:auto;display:block;fill:#3C1A5E}
.theme-halloween .hero .bd1{right:16%;top:16%;width:34px;animation:flap 12s ease-in-out infinite}
.theme-halloween .hero .bd2{right:29%;top:46%;width:22px;animation:flap 16s ease-in-out infinite reverse}
/* trade strip: pumpkin eyebrows, warm hover */
.theme-halloween .trades a:hover{background:#FBF2E9}
.theme-halloween .trades .eyebrow{color:var(--pumpkin-ink)}
.theme-halloween .trades .new{background:var(--pumpkin);color:#2A0E02}
.theme-halloween .trades .go{color:#5B2C86;border-bottom-color:var(--pumpkin)}
/* section headings + link underlines */
.theme-halloween .sec-head a{color:#5B2C86;border-bottom-color:var(--pumpkin)}
.theme-halloween .eyebrow{color:#7A5A34}
/* category + brand cards: warm border, amber marker */
.theme-halloween .card,
.theme-halloween .lf,
.theme-halloween .branch{border-color:var(--edge)}
.theme-halloween .card:hover{border-color:var(--pumpkin)}
.theme-halloween .branch{border-top-color:#5B2C86}
.theme-halloween .lf li::before{background:var(--pumpkin)}
.theme-halloween .lf .go{color:#5B2C86;border-bottom-color:var(--pumpkin)}
/* service strip: dusk gradient instead of flat brand blue */
.theme-halloween .svc{
background:linear-gradient(100deg,#3C1A5E 0%,#5B2C86 46%,#7A3520 100%)}
.theme-halloween .svc .item{background:transparent}
.theme-halloween .svc .item + .item{box-shadow:-1px 0 0 rgba(255,255,255,.20)}
.theme-halloween .svc .eyebrow{color:var(--pumpkin-lt)}
/* text-to-order band: purple night, keep the SMS green bubble */
.theme-halloween .order{
background:linear-gradient(100deg,#160B22 0%,#2E1440 52%,#3F1A20 100%);
border-top-color:var(--edge)}
.theme-halloween .ordernum{background:#33184A;border-left-color:var(--imsg)}
.theme-halloween .ordernum:hover{background:#3F1D5B}
.theme-halloween .bub.in{background:#33184A}
/* split bands (Sterling, showroom): warm paper */
.theme-halloween .band{background:#FDF8F4;border-color:var(--edge)}
.theme-halloween .band .btn{background:#5B2C86}
.theme-halloween .band .btn:hover{background:var(--pumpkin);color:#2A0E02}
/* photo placeholders pick up the season too */
.theme-halloween .ph{
box-shadow:inset 0 -3px 0 var(--pumpkin);
background:
repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),
repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),
linear-gradient(155deg,#5B2C86 0%,#3C1A5E 55%,#160B22 100%)}
/* reviews band */
.theme-halloween .reviews{background:#FAF4F2}
.theme-halloween .rev{border-top-color:var(--pumpkin)}
/* buttons + focus. The event card and booking panel set their own pumpkin
buttons on dark backgrounds — exclude them or they go dark on dark. */
.theme-halloween .btn:not(.event .btn):not(.bookbtn){background:var(--ink)}
.theme-halloween .btn:not(.event .btn):not(.bookbtn):hover{background:#5B2C86}
.theme-halloween .event .btn{background:var(--pumpkin);color:#2A0E02}
.theme-halloween .event .btn:hover{background:#fff;color:var(--ink)}
.theme-halloween a:focus-visible,
.theme-halloween button:focus-visible,
.theme-halloween input:focus-visible,
.theme-halloween textarea:focus-visible{outline-color:var(--pumpkin)}
/* footer: deep purple night */
.theme-halloween footer{
background:linear-gradient(170deg,#160B22 0%,#241033 60%,#2E1622 100%)}
.theme-halloween .legal{border-top-color:#3A2350}
.theme-halloween .fhrs b{color:var(--pumpkin-lt)}
@media(prefers-reduced-motion:reduce){
.theme-halloween .hero .bat-deco{animation:none!important}
}
/* ---------------------------- FOOTBALL SEASON ----------------------------
Deliberately generic: field green, chalk yard lines, pigskin. No league or
team marks anywhere — those are trademarked and not licensed to us.
------------------------------------------------------------------------- */
.theme-football{
--turf:#1E7A3C;
--turf-dk:#12592B;
--turf-ink:#12592B; /* text on pale surfaces */
--chalk:#F4F7F2;
--pigskin:#8A4B24;
--navy:#12592B; /* nav + links go field green */
--navy-lt:#1E7A3C;
--navy-dk:#0B3F1E;
--gold-dk:#8A6A18;
--ink:#0E1A12;
--paper:#F2F6F1;
--edge:#D4E0D4;
}
/* nav: turf with a chalk stripe on the current page */
.theme-football .mainnav{
background:linear-gradient(90deg,#0B3F1E 0%,#12592B 46%,#1E7A3C 100%)}
.theme-football .mainnav a[aria-current="page"]{box-shadow:inset 0 -4px 0 #F4F7F2}
/* hero: chalk yard lines running up the page */
.theme-football .hero{
position:relative;overflow:hidden;
background:
repeating-linear-gradient(90deg,
transparent 0 118px,
rgba(30,122,60,.13) 118px 120px),
linear-gradient(168deg,#FFFFFF 0%,#F6FAF5 48%,#EAF3E8 100%)}
.theme-football .hero::before{
content:"";position:absolute;right:-70px;top:-80px;width:360px;height:360px;
background:radial-gradient(circle,rgba(30,122,60,.16) 0%,transparent 68%);pointer-events:none}
.theme-football .hero h1 em{color:var(--turf-ink)}
.theme-football .hero .stat b{color:var(--turf-ink)}
.theme-football .hero .wrap{position:relative;z-index:2}
.theme-football .hero .web-deco,
.theme-football .hero .bat-deco,
.theme-football .hero .leaf{display:none}
.hero .ball{display:none}
.theme-football .hero .ball{display:block;position:absolute;display:block;line-height:0;z-index:1;opacity:.42}
.theme-football .hero .ball svg{width:100%;height:auto;display:block}
.theme-football .hero .bl1{right:15%;top:17%;width:66px;animation:spiral 15s ease-in-out infinite}
.theme-football .hero .bl2{right:30%;top:52%;width:38px;animation:spiral 20s ease-in-out infinite reverse}
@keyframes spiral{0%,100%{transform:translate(0,0) rotate(-16deg)}50%{transform:translate(-24px,-14px) rotate(12deg)}}
.theme-football .trades a:hover{background:#EFF6ED}
.theme-football .trades .eyebrow{color:var(--turf-ink)}
.theme-football .trades .new{background:var(--turf);color:#fff}
.theme-football .trades .go{color:var(--turf-ink);border-bottom-color:var(--turf)}
.theme-football .sec-head a{color:var(--turf-ink);border-bottom-color:var(--turf)}
.theme-football .eyebrow{color:#4A6B4E}
.theme-football .card:hover{border-color:var(--turf)}
.theme-football .branch{border-top-color:var(--turf-ink)}
.theme-football .lf li::before{background:var(--turf)}
.theme-football .lf .go{color:var(--turf-ink);border-bottom-color:var(--turf)}
/* service strip: turf with chalk yard lines */
.theme-football .svc{
background:
repeating-linear-gradient(90deg,
transparent 0 96px, rgba(255,255,255,.13) 96px 98px),
linear-gradient(100deg,#0B3F1E 0%,#12592B 48%,#1E7A3C 100%)}
.theme-football .svc .item{background:transparent}
.theme-football .svc .item + .item{box-shadow:-1px 0 0 rgba(255,255,255,.22)}
.theme-football .svc .eyebrow{color:#A8DCB4}
/* text-to-order: stadium at night */
.theme-football .order{
background:linear-gradient(100deg,#0E1A12 0%,#123322 52%,#0B3F1E 100%);
border-top-color:var(--edge)}
.theme-football .ordernum{background:#1A3A26;border-left-color:var(--imsg)}
.theme-football .ordernum:hover{background:#224A30}
.theme-football .bub.in{background:#1A3A26}
.theme-football .band{background:#F7FBF6;border-color:var(--edge)}
.theme-football .band .btn{background:var(--turf-ink)}
.theme-football .band .btn:hover{background:var(--pigskin);color:#fff}
.theme-football .ph{
box-shadow:inset 0 -3px 0 #F4F7F2;
background:
repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.10) 58px 60px),
linear-gradient(155deg,#1E7A3C 0%,#12592B 55%,#0E1A12 100%)}
.theme-football .reviews{background:#F4F9F3}
.theme-football .rev{border-top-color:var(--pigskin)}
.theme-football .btn:not(.event .btn):not(.bookbtn){background:var(--ink)}
.theme-football .btn:not(.event .btn):not(.bookbtn):hover{background:var(--turf-ink)}
.theme-football a:focus-visible,
.theme-football button:focus-visible,
.theme-football input:focus-visible,
.theme-football textarea:focus-visible{outline-color:var(--turf-ink)}
.theme-football footer{
background:linear-gradient(170deg,#0E1A12 0%,#123322 60%,#0B3F1E 100%)}
.theme-football .legal{border-top-color:#1F4A2E}
.theme-football .fhrs b{color:#A8DCB4}
/* football-season announcement bar */
/* Stays in the green family end to end. An earlier version finished on
pigskin brown, which read as a leftover from the fall theme rather than
as leather. */
.theme-football .announce{
background:
repeating-linear-gradient(90deg,transparent 0 104px,rgba(255,255,255,.10) 104px 106px),
linear-gradient(96deg,#0B3F1E 0%,#12592B 42%,#1E7A3C 76%,#25914A 100%)}
.theme-football .announce .tag{background:#F4F7F2;color:#0B3F1E;box-shadow:0 0 18px rgba(255,255,255,.35)}
.theme-football .announce .msg b{color:#A8DCB4}
.theme-football .announce .when{color:#C6E4CC}
.theme-football .announce .go{background:#F4F7F2;color:#0B3F1E;box-shadow:0 0 22px rgba(255,255,255,.3)}
.theme-football .announce .go:hover{background:var(--pigskin);color:#fff}
.theme-football .announce .web,
.theme-football .announce .bats{display:none}
@media(prefers-reduced-motion:reduce){
.theme-football .hero .ball{animation:none!important}
}
/* --------------------------- THANKSGIVING --------------------------- */
.theme-thanksgiving{
--harvest:#C8641B; /* on dark surfaces */
--harvest-ink:#9A4A10; /* text on pale surfaces */
--cranberry:#7C2028;
--wheat:#E8B658;
--navy:#7C2028; /* nav + links go cranberry */
--navy-lt:#98303A;
--navy-dk:#5C1219;
--gold-dk:#9A6A18;
--ink:#241309;
--paper:#FBF5EC;
--edge:#E6D8C4;
}
.theme-thanksgiving .mainnav{
background:linear-gradient(90deg,#5C1219 0%,#7C2028 46%,#8A3A18 100%)}
.theme-thanksgiving .mainnav a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--wheat)}
/* hero: warm harvest light, falling leaves */
.theme-thanksgiving .hero{
position:relative;overflow:hidden;
background:linear-gradient(168deg,#FFFFFF 0%,#FDF7EC 44%,#F8EAD8 100%)}
.theme-thanksgiving .hero::before{
content:"";position:absolute;right:-70px;top:-80px;width:360px;height:360px;
background:radial-gradient(circle,rgba(200,100,27,.16) 0%,transparent 68%);pointer-events:none}
.theme-thanksgiving .hero h1 em{color:var(--harvest-ink)}
.theme-thanksgiving .hero .stat b{color:var(--cranberry)}
.theme-thanksgiving .hero .wrap{position:relative;z-index:2}
.hero .leaf{display:none}
.theme-thanksgiving .hero .leaf{display:block;position:absolute;display:block;line-height:0;z-index:1;opacity:.5}
.theme-thanksgiving .hero .leaf svg{width:100%;height:auto;display:block}
.theme-thanksgiving .hero .lf1{right:14%;top:14%;width:44px;animation:fall1 14s ease-in-out infinite}
.theme-thanksgiving .hero .lf2{right:26%;top:44%;width:30px;animation:fall1 18s ease-in-out infinite reverse}
.theme-thanksgiving .hero .lf3{right:34%;top:22%;width:24px;animation:fall1 22s ease-in-out infinite}
@keyframes fall1{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(-18px,22px) rotate(14deg)}}
/* Halloween-only decorations must not leak into other seasons */
.theme-thanksgiving .hero .web-deco,
.theme-thanksgiving .hero .bat-deco{display:none}
.theme-thanksgiving .trades a:hover{background:#FBF1E2}
.theme-thanksgiving .trades .eyebrow{color:var(--harvest-ink)}
.theme-thanksgiving .trades .new{background:var(--harvest);color:#fff}
.theme-thanksgiving .trades .go{color:var(--cranberry);border-bottom-color:var(--harvest)}
.theme-thanksgiving .sec-head a{color:var(--cranberry);border-bottom-color:var(--harvest)}
.theme-thanksgiving .eyebrow{color:#7A5A34}
.theme-thanksgiving .card:hover{border-color:var(--harvest)}
.theme-thanksgiving .branch{border-top-color:var(--cranberry)}
.theme-thanksgiving .lf li::before{background:var(--harvest)}
.theme-thanksgiving .lf .go{color:var(--cranberry);border-bottom-color:var(--harvest)}
.theme-thanksgiving .svc{
background:linear-gradient(100deg,#5C1219 0%,#7C2028 44%,#9A5416 100%)}
.theme-thanksgiving .svc .item{background:transparent}
.theme-thanksgiving .svc .item + .item{box-shadow:-1px 0 0 rgba(255,255,255,.20)}
.theme-thanksgiving .svc .eyebrow{color:var(--wheat)}
.theme-thanksgiving .order{
background:linear-gradient(100deg,#241309 0%,#3E1A15 52%,#5C2A10 100%);
border-top-color:var(--edge)}
.theme-thanksgiving .ordernum{background:#3E2416;border-left-color:var(--imsg)}
.theme-thanksgiving .ordernum:hover{background:#4C2C1B}
.theme-thanksgiving .bub.in{background:#3E2416}
.theme-thanksgiving .band{background:#FDF8F0;border-color:var(--edge)}
.theme-thanksgiving .band .btn{background:var(--cranberry)}
.theme-thanksgiving .band .btn:hover{background:var(--harvest);color:#fff}
.theme-thanksgiving .ph{
box-shadow:inset 0 -3px 0 var(--wheat);
background:
repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),
repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),
linear-gradient(155deg,#8A3A18 0%,#5C1219 55%,#241309 100%)}
.theme-thanksgiving .reviews{background:#FCF6EE}
.theme-thanksgiving .rev{border-top-color:var(--harvest)}
.theme-thanksgiving .btn:not(.event .btn):not(.bookbtn){background:var(--ink)}
.theme-thanksgiving .btn:not(.event .btn):not(.bookbtn):hover{background:var(--cranberry)}
.theme-thanksgiving a:focus-visible,
.theme-thanksgiving button:focus-visible,
.theme-thanksgiving input:focus-visible,
.theme-thanksgiving textarea:focus-visible{outline-color:var(--harvest-ink)}
.theme-thanksgiving footer{
background:linear-gradient(170deg,#241309 0%,#3A1A12 60%,#4A2415 100%)}
.theme-thanksgiving .legal{border-top-color:#4E2E1C}
.theme-thanksgiving .fhrs b{color:var(--wheat)}
/* Thanksgiving announcement bar */
.theme-thanksgiving .announce{
background:linear-gradient(96deg,#241309 0%,#5C1219 38%,#8A3A18 72%,#A85A14 100%)}
.theme-thanksgiving .announce .tag{background:var(--wheat);color:#3A2408;box-shadow:0 0 18px rgba(232,182,88,.5)}
.theme-thanksgiving .announce .msg b{color:var(--wheat)}
.theme-thanksgiving .announce .when{color:#E6CFA8}
.theme-thanksgiving .announce .go{background:var(--wheat);color:#3A2408;box-shadow:0 0 22px rgba(232,182,88,.45)}
.theme-thanksgiving .announce .go:hover{background:#fff;color:var(--ink)}
.theme-thanksgiving .announce .web,
.theme-thanksgiving .announce .bats{display:none}
@media(prefers-reduced-motion:reduce){
.theme-thanksgiving .hero .leaf{animation:none!important}
}
/* --------------------- STARTERS FOR OTHER SEASONS ---------------------
Copy this pattern. Each one only needs the variables plus whichever
section overrides you want. Halloween above is the fullest example.
To use one, put the class on in index.html, e.g.
.theme-christmas{ --navy:#0F5132; --navy-lt:#166B44; --navy-dk:#0A3B24;
--gold-dk:#9A2A2A; --accent:#C8102E; }
.theme-fourth { --navy:#0A2A6B; --navy-lt:#123B8C; --gold-dk:#9E1B32; }
.theme-spring { --navy:#2E6B4F; --navy-lt:#3E8A66; --gold-dk:#A6761D; }
Two things worth remembering, both learned the hard way on Halloween:
1. A bright accent that reads well on a dark band will usually fail
contrast on a pale one. Keep a darker variant for text on light
surfaces — see --pumpkin-ink above.
2. Any section that sets its own button colours on a dark background
needs excluding from the generic .btn override, or the button
turns dark on dark. See the .btn rule in the Halloween block.
---------------------------------------------------------------------- */
/* ---------- open to the public callout ---------- */
.public{background:var(--white);border:1px solid var(--edge);border-left:4px solid var(--tbk);
padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-bottom:44px}
.public .mark{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.1em;
text-transform:uppercase;background:var(--tbk);color:#fff;padding:10px 16px;white-space:nowrap}
.public h3{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.public p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.55;max-width:62ch}
@media(max-width:760px){ .public{grid-template-columns:1fr;gap:14px} }
/* ---------- designer profile ---------- */
.designer{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:start;
background:var(--white);border:1px solid var(--edge);border-top:4px solid var(--tbk);padding:36px 38px}
.designer .shot{flex:0 0 auto}
.designer .shot img{width:190px;height:auto;display:block}
.designer .shot .cap{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;
letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:center}
.designer h3{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.025em;margin-bottom:4px}
.designer .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--tbk);margin-bottom:16px}
.designer p{margin:0 0 16px;font-size:16.5px;color:#33405c;line-height:1.62;max-width:56ch}
.designer .svcs{list-style:none;margin:20px 0 0;padding:0;display:grid;
grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge)}
.designer .svcs li{background:var(--paper);padding:15px 18px}
.designer .svcs b{display:block;font-family:var(--display);font-size:15px;font-weight:700;margin-bottom:3px}
.designer .svcs span{font-size:14px;color:var(--muted);line-height:1.5}
.designer .cta{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.designer .cta a.btn{margin:0}
.designer .cta .or{font-size:14.5px;color:var(--muted)}
.designer .cta .or a{color:var(--navy);font-weight:500}
@media(max-width:820px){
.designer{grid-template-columns:1fr;gap:26px;padding:28px 24px}
.designer .shot img{width:160px}
.designer .svcs{grid-template-columns:1fr}
}