/* Iron Ridge Construction — rebuilt from scratch.
   Design language: a contractor's own paperwork. Spec sheets, rule lines,
   condensed uppercase headings, numbers that can be checked. Safety orange
   is used for the things that change or need attention, never as decoration
   on the end of a headline.
   The hammer component is carried over from the previous build unchanged. */

@font-face{font-family:Barlow;src:url('assets/barlow-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/barlow-600.ttf') format('truetype');font-weight:600 800;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('assets/barlow-condensed-600.ttf') format('truetype');font-weight:600;font-display:swap}

:root{--fs-label:.875rem;--fs-text:1rem;--fs-read:1.125rem;
  --ink:#1e2220;
  --dark:#1d201e;
  --orange:#ef713d;        /* fills, and text on the dark bands */
  --orange-ink:#993c16;    /* orange as text on the light background */
  --paper:#dfe3e0;
  --paper-2:#d1d6d2;
  --line:#adb4ae;
  --muted:#515852;
  --heading:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:Barlow,Arial,Helvetica,sans-serif;
  --gutter:clamp(24px,5.5vw,88px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-read)/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange-ink);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:99}
.skip-link:focus{left:8px;top:8px}

/* ---------- type: hierarchy from size and weight, never from a tinted tail ---------- */
h1,h2,h3{margin:0;font-family:var(--heading);font-weight:600;text-transform:uppercase;letter-spacing:.005em;line-height:.96;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.6vw,5.1rem)}
h2{font-size:clamp(1.9rem,3.5vw,3rem)}
h3{font-size:1.28rem;line-height:1.1}
p{margin:0}
.lede{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.5;max-width:58ch}
.label{font:600 var(--fs-label)/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.label--orange{color:var(--orange-ink)}
.muted{color:var(--muted)}

/* ---------- masthead ---------- */
.site-header{border-bottom:2px solid var(--ink);background:var(--paper);position:relative;z-index:20}
.header-inner{max-width:1180px;margin-inline:auto;padding:14px var(--gutter);display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto}
.brand img{width:52px;height:52px;object-fit:contain;flex:none}
.brand-type{display:grid;gap:1px}
.brand-name{font:600 calc(var(--fs-label) * 1.5)/1 var(--heading);text-transform:uppercase;letter-spacing:.03em}
.brand-sub{font:400 var(--fs-label)/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 14px}
.site-nav a{font:600 var(--fs-label)/1 var(--body);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:9px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.header-phone{font:600 .95rem/1 var(--body);text-decoration:none;white-space:nowrap}
.header-phone span{display:block;font:400 var(--fs-label)/1.4 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.menu-toggle{display:none;appearance:none;border:2px solid var(--ink);background:transparent;width:44px;height:38px;cursor:pointer;padding:9px 8px;flex-direction:column;justify-content:space-between}
.menu-toggle span{display:block;height:2px;background:var(--ink)}

/* ---------- booking status: a real number, first thing ---------- */
.status{background:var(--dark);color:var(--paper)}
.status-inner{max-width:1180px;margin-inline:auto;padding:11px var(--gutter);display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;font:600 var(--fs-label)/1.5 var(--body);letter-spacing:.03em;text-transform:uppercase}
.status b{color:var(--orange);font-weight:600}
.status .sep{color:#6d716b}

/* ---------- hero ---------- */
.hero{border-bottom:2px solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero-copy{padding:clamp(34px,5vw,64px) var(--gutter) clamp(30px,4vw,52px);display:grid;align-content:center;gap:20px;max-width:760px;margin-left:auto;width:100%}
.hero-copy .lede{color:var(--muted)}
.hero-figure{position:relative;border-left:2px solid var(--ink);min-height:340px}
.hero-figure img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-stamp{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);padding:11px 16px;font:600 var(--fs-label)/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;z-index:2}

/* ---------- buttons, with the hammer ---------- */
.button{display:inline-flex;align-items:center;gap:11px;padding:14px 20px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  font:600 var(--fs-label)/1 var(--body);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .14s,color .14s}
.button:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.button--line{background:transparent;color:var(--ink)}
.button--line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.button-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- spec tables: the point of the whole site ---------- */
.spec-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spec-table th{text-align:left;font:600 var(--fs-label)/1.4 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:0 14px 10px 0;border-bottom:2px solid var(--ink)}
.spec-table th:last-child,.spec-table td:last-child{text-align:right;padding-right:0}
.spec-table td{padding:15px 14px 15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table .job{font:600 1.16rem/1.15 var(--heading);text-transform:uppercase;display:block}
.spec-table .note{display:block;font-size:var(--fs-text);line-height:1.5;color:var(--muted);margin-top:4px;max-width:46ch}
.spec-table .price{font:600 1.02rem/1.4 var(--body);white-space:nowrap}
.spec-table .dur{display:block;font:400 var(--fs-label)/1.5 var(--body);color:var(--muted);white-space:nowrap;margin-top:3px}

/* ---------- section frame ---------- */
.band{padding-block:clamp(44px,6vw,76px);border-bottom:2px solid var(--ink)}
.band--tint{background:var(--paper-2)}
.band--dark{background:var(--dark);color:var(--paper);border-bottom:0}
.band--dark .label{color:#9aa096}
.band--dark .label--orange{color:var(--orange)}
.band--dark .muted{color:#a8ada4}
.band-head{display:grid;gap:12px;margin-bottom:clamp(24px,3vw,38px);max-width:62ch}
.band-head .lede{color:var(--muted)}
.band--dark .band-head .lede{color:#b3b8af}

/* ---------- won't-do list ---------- */
.wont{display:grid;gap:0;margin:0;padding:0;border-top:2px solid var(--ink);max-width:78ch}
.wont li{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.wont .x{font:600 .95rem/1.5 var(--body);color:var(--orange-ink)}
.wont b{font:600 1.02rem/1.3 var(--heading);text-transform:uppercase;letter-spacing:.02em}
.wont p{color:var(--muted);font-size:var(--fs-read);margin-top:3px}

/* ---------- credentials ---------- */
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cred{background:var(--paper);padding:22px;display:grid;gap:7px;align-content:start}
.band--tint .cred{background:var(--paper-2)}
.cred b{font:600 1.75rem/1 var(--heading);color:var(--ink);letter-spacing:.01em}
.cred p{font-size:var(--fs-text);color:var(--muted)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#3a3f3b;border:1px solid #3a3f3b}
.step{background:var(--dark);padding:22px;display:grid;gap:8px;align-content:start}
.step .n{font:600 var(--fs-label)/1 var(--body);letter-spacing:.2em;color:var(--orange)}
.step h3{color:var(--paper)}
.step p{font-size:var(--fs-text);color:#a8ada4}
.step .when{font:600 var(--fs-label)/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}

/* ---------- service area ---------- */
.towns{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0}
.towns li{list-style:none;font:600 var(--fs-label)/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:9px 13px;border:1px solid var(--line);background:var(--paper)}
.band--tint .towns li{background:var(--paper-2)}

/* ---------- recent jobs ---------- */
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.job-card{display:grid;gap:12px;align-content:start}
.job-card img{border:2px solid var(--ink);aspect-ratio:4/3;object-fit:cover;width:100%}
.job-meta{font:600 var(--fs-label)/1.5 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--orange-ink)}
.job-card p{color:var(--muted);font-size:var(--fs-read);max-width:48ch}

/* ---------- closing ---------- */
.close-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px 54px;align-items:start}
.close-facts{border-top:2px solid var(--orange);padding-top:15px}
.close-facts div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #3a3f3b}
.close-facts dt{font:600 var(--fs-label)/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#a8ada4}
.close-facts dd{margin:0;font:600 var(--fs-text)/1.5 var(--body);text-align:right}

/* ---------- gateway credit + footer ---------- */
.credit{background:var(--orange);color:var(--ink);padding-block:26px}
.credit-inner{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter);display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between}
.credit p{font:600 var(--fs-read)/1.45 var(--body);max-width:56ch}
.credit .button{border-color:var(--ink)}
.site-footer{background:var(--dark);color:#a8ada4;padding-block:34px 24px;font-size:.93rem}
.footer-inner{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.site-footer strong{color:var(--paper);font:600 1.05rem/1.2 var(--heading);text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:8px}
.site-footer a{color:#cfd4cb;text-decoration:none}
.site-footer a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.2em}
.site-footer address{font-style:normal;line-height:1.7}
.footer-legal{max-width:1180px;margin:24px auto 0;padding:14px var(--gutter) 0;border-top:1px solid #3a3f3b;font-size:var(--fs-label);color:#878d83;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- dialog ---------- */
dialog.project-dialog{border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;max-width:min(560px,94vw);width:100%}
dialog.project-dialog::backdrop{background:#1d201ee6}
.dialog-inner{padding:clamp(24px,4vw,38px)}
.dialog-close{position:absolute;top:10px;right:12px;appearance:none;border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted)}
.dialog-close:hover{color:var(--ink)}
.dialog-inner h2{margin-bottom:12px}
.dialog-inner p{color:var(--muted);margin-bottom:14px}
.dialog-list{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:18px}
.dialog-list div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.dialog-list dt{color:var(--muted)}
.dialog-list dd{margin:0;font-weight:600;text-align:right}

/* ---------- the hammer (carried over unchanged) ---------- */
.button .hammer,.back-top .hammer{position:relative;display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;flex:0 0 29px;line-height:1}
.hammer-icon{display:block;width:27px;height:27px;transform-origin:24% 83%;overflow:visible}
.hammer-impact{position:absolute;width:15px;height:10px;right:-6px;bottom:-2px;opacity:0;background:linear-gradient(20deg,transparent 43%,currentColor 44% 56%,transparent 57%) 100% 100%/8px 6px no-repeat,linear-gradient(90deg,transparent 40%,currentColor 41% 59%,transparent 60%) 50% 0/5px 7px no-repeat}
.hammer-striking .hammer-icon{animation:hammer-strike 390ms ease-in-out}
.hammer-striking .hammer-impact{animation:hammer-spark 390ms linear}
@keyframes hammer-strike{0%{transform:rotate(0)}30%{transform:rotate(-42deg)}64%{transform:rotate(39deg)}77%{transform:rotate(12deg)}90%{transform:rotate(26deg)}100%{transform:rotate(0)}}
@keyframes hammer-spark{0%,58%{opacity:0;transform:scale(.6)}65%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.back-top{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:600 var(--fs-label)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#cfd4cb}

@media(max-width:980px){
  .creds,.steps,.jobs,.close-grid,.footer-inner{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr}
  .hero-figure{border-left:0;border-top:2px solid var(--ink);min-height:300px}
  .hero-copy{max-width:none;margin-left:0}
}
@media(max-width:780px){
  .menu-toggle{display:flex}
  .site-nav{display:none;order:4;width:100%;flex-direction:column;gap:0;border-top:1px solid var(--line);padding-top:8px}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:11px 0;border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
}
@media(max-width:560px){
  .spec-table .note{max-width:none}
  .header-phone{order:3}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Type floor, 2026-09-21: labels 14px, secondary text 16px, reading text 18px (17px on phones).
   Same three sizes as the rest of the portfolio. The name and the line under it scale as one
   unit so they stay the same width. The nav, the phone line and the status bar gave up some
   letter-spacing instead of size, so the header and the status bar keep one row at desktop. */
@media(max-width:560px){:root{--fs-read:1.0625rem}}