/*
Theme Name: Cold Room Spec
Description: Walk-in cooler and freezer specialists, Greater Boston. Engineering-grade specification-sheet design.
Version: 1.0.0
Author: Walk-In Cooler Repair Boston
*/

/* ---------- tokens ---------- */
:root{
  --paper:#f6f8f8;
  --sheet:#ffffff;
  --tint:#eaf2f3;
  --ink:#0f171c;
  --ink-2:#425560;
  --ink-3:#6c8089;
  --line:#d6dee1;
  --line-soft:#e7edee;
  --cold:#0a5f6e;
  --cold-deep:#063b45;
  --signal:#c2410c;
  --signal-tint:#fdf0e8;
  --ok:#1f6b47;
  --maxw:1160px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--cold)}
h1,h2,h3,h4{font-family:Manrope,system-ui,sans-serif;margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.12}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800}
h3{font-size:1.22rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cold);font-weight:500;display:block}

/* ---------- utility bar ---------- */
.utility{background:var(--cold-deep);color:#cfe3e6;font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.06em}
.utility .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;padding-block:7px}
.utility .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;margin-right:7px;vertical-align:middle}

/* ---------- header ---------- */
.site-head{background:var(--sheet);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:0 1 auto;min-width:0}
.brand .mark{width:34px;height:34px;flex:none}
.brand>span{min-width:0}
.brand b{font-family:Manrope,sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;display:block;line-height:1.15}
.brand span{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.93rem;font-weight:600}
.nav a:hover{color:var(--cold)}
.callbtn{flex:none;display:inline-flex;flex-direction:column;background:var(--signal);color:#fff;text-decoration:none;padding:9px 18px;border-radius:3px;line-height:1.1}
.callbtn small{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.callbtn strong{font-family:Manrope,sans-serif;font-size:1.22rem;font-weight:800;letter-spacing:-.02em}
@media(max-width:900px){
  .nav{display:none}
  .site-head .wrap{gap:10px}
  .callbtn{margin-left:auto;padding:10px 14px}
  .callbtn strong{font-size:1.28rem}
}
@media(max-width:560px){
  .brand .mark{width:28px;height:28px}
  .brand b{font-size:.82rem;max-width:8.5em}
  .brand>span>span{display:none}
  .callbtn small{display:none}
  .callbtn strong{font-size:1.22rem}
  .utility .wrap{gap:4px 14px;font-size:.66rem}
  .chip .n{font-size:1.28rem}
}
/* Nothing may push the page sideways.
   Grid and flex children default to min-width:auto, which lets a wide table
   stretch its own container instead of scrolling inside .tscroll. */
.hero-grid>*,.bigform-grid>*,.twocol>*,.foot-grid>*{min-width:0}
.wrap,.entry,.leadbox,.answer,.ruled,.faq,.aside{min-width:0}
.tscroll{max-width:100%}
/* Safety net: clip (not hidden) so position:sticky on the header still works. */
body{overflow-x:clip}
.entry table{display:block;overflow-x:auto;white-space:normal}

/* ---------- hero ---------- */
.hero{background:var(--sheet);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;padding-block:58px 44px;align-items:start}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:34px;padding-block:36px 30px}}
.hero h1{margin:.3em 0 .45em}
.hero .lede{font-size:1.16rem;color:var(--ink-2);max-width:56ch}
.creds{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.creds b{color:var(--ink);font-weight:600}

/* ---------- spec chips (signature device) ---------- */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:0;margin:30px 0 0;border:1px solid var(--line);background:var(--line)}
.chip{background:var(--sheet);padding:14px 16px}
.chip .n{font-family:Manrope,sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.chip .l{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;line-height:1.3}

/* ---------- lead form ---------- */
.leadbox{background:var(--tint);border:1px solid var(--line);padding:22px}
.leadbox h2,.leadbox h3{font-size:1.16rem;margin-bottom:4px}
.leadbox p.sub{font-size:.9rem;color:var(--ink-2);margin-bottom:16px}
.leadform{display:grid;gap:11px}
.leadform input,.leadform select,.leadform textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:3px;background:var(--sheet);
  font:inherit;font-size:1rem;color:var(--ink)
}
.leadform input:focus,.leadform select:focus,.leadform textarea:focus{outline:2px solid var(--cold);outline-offset:1px;border-color:var(--cold)}
.leadform button{
  background:var(--cold);color:#fff;border:0;padding:14px;border-radius:3px;
  font-family:Manrope,sans-serif;font-weight:800;font-size:1.02rem;cursor:pointer;letter-spacing:-.01em
}
.leadform button:hover{background:var(--cold-deep)}
.leadform .hp{position:absolute;left:-9999px}
.formnote{font-size:.78rem;color:var(--ink-3);margin:10px 0 0;line-height:1.45}
.bigform{border-top:3px solid var(--cold);background:var(--sheet)}
.bigform .wrap{padding-block:48px}
.bigform-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:860px){.bigform-grid{grid-template-columns:1fr;gap:26px}}

/* ---------- sections ---------- */
.sec{padding-block:52px;border-bottom:1px solid var(--line-soft)}
.sec.alt{background:var(--sheet)}
.sec-head{max-width:70ch;margin-bottom:26px}
.sec-head h2{margin:.25em 0 .35em}
.sec-head p{color:var(--ink-2);margin:0}

/* answer block — the AEO device */
.answer{border-left:4px solid var(--cold);background:var(--sheet);padding:18px 22px;margin:0 0 26px;max-width:78ch}
.answer .eyebrow{margin-bottom:6px}
.answer p{font-size:1.09rem;color:var(--ink);margin:0}

/* ruled list, not cards */
.ruled{list-style:none;margin:0;padding:0}
.ruled>li{border-top:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px}
.ruled>li:last-child{border-bottom:1px solid var(--line)}
.ruled .idx{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-3);padding-top:4px}
.ruled h3{margin-bottom:5px}
.ruled p{margin:0;color:var(--ink-2)}
@media(max-width:600px){.ruled>li{grid-template-columns:1fr;gap:6px}.ruled .idx{padding-top:0}}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--sheet);border:1px solid var(--line)}
.spec th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--tint);white-space:nowrap}
.spec td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.spec tr:last-child td{border-bottom:0}
.spec td.n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* service area list */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas a{background:var(--sheet);border:1px solid var(--line);padding:7px 13px;border-radius:2px;text-decoration:none;color:var(--ink-2);font-size:.9rem;font-weight:600}
.areas a:hover{border-color:var(--cold);color:var(--cold)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-family:Manrope,sans-serif;font-weight:700;font-size:1.05rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--cold);font-weight:800;margin-right:11px}
.faq details[open] summary::before{content:"\2212"}
.faq details p{margin:12px 0 0;color:var(--ink-2);max-width:78ch}

/* emergency strip */
.estrip{background:var(--signal-tint);border-block:1px solid #f0d3c2}
.estrip .wrap{padding-block:20px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.estrip .lbl{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);font-weight:600}
.estrip .txt{color:var(--ink);font-weight:600;flex:1;min-width:220px}
.estrip a.tel{font-family:Manrope,sans-serif;font-weight:800;font-size:1.5rem;color:var(--signal);text-decoration:none;letter-spacing:-.02em}

/* content typography for page bodies */
.entry{max-width:none}
.entry h2{margin:1.6em 0 .5em}
.entry h3{margin:1.5em 0 .4em}
.entry ul,.entry ol{margin:0 0 1.1em;padding-left:1.25em}
.entry li{margin-bottom:.4em}
.entry table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.2em 0}
.entry table th,.entry table td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry table th{background:var(--tint);font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.twocol{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:start;padding-block:44px}
@media(max-width:940px){.twocol{grid-template-columns:1fr;gap:32px}}
.aside{position:sticky;top:96px}
@media(max-width:940px){.aside{position:static}}

/* breadcrumb */
.crumb{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3);padding-block:14px;border-bottom:1px solid var(--line-soft)}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--cold)}

/* footer */
.site-foot{background:var(--cold-deep);color:#b9d3d7;padding-block:44px 30px;font-size:.92rem}
.site-foot a{color:#e3f0f2;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.site-foot h4{color:#fff;font-size:.72rem;font-family:"IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-weight:500}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:7px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px;font-size:.8rem;color:#8fb2b8;display:flex;flex-wrap:wrap;gap:8px 20px}

/* skip link + a11y */
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:100}
:focus-visible{outline:2px solid var(--cold);outline-offset:2px}
.notice{background:var(--ok);color:#fff;padding:14px 18px;border-radius:3px;margin-bottom:20px;font-weight:600}