/* Copper Run Plumbing & Heating. A concept site by Three Roses Digital. */

@font-face{font-family:"Big Shoulders";src:url("../fonts/big-shoulders-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Stand ins, shown only for the moment before the fonts above arrive on a slow connection. Each is a font the device already has,
   resized so its words take up the same room, so nothing jumps when the real font appears. */
@font-face{font-family:"Big Shoulders Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:800;size-adjust:68.6%;ascent-override:143.5%;descent-override:31.1%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders Fallback 2";src:local("Roboto");font-weight:800;size-adjust:73.2%;ascent-override:134.5%;descent-override:29.1%;line-gap-override:0%}
@font-face{font-family:"Barlow Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");font-weight:400;size-adjust:96.1%;ascent-override:104.1%;descent-override:20.8%;line-gap-override:0%}
@font-face{font-family:"Barlow Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");font-weight:600;size-adjust:98.0%;ascent-override:102.0%;descent-override:20.4%;line-gap-override:0%}

:root{
  --white:#FFFFFF;
  --steel:#EEF1F4;
  --ink:#171A1E;
  --text:#2A2F36;
  --muted:#4A525C;
  --copper:#B5622E;
  --copper-dk:#8A4416;
  --copper-lt:#F0B88A;
  --line:#D6DBE2;
  --display:"Big Shoulders","Big Shoulders Fallback","Big Shoulders Fallback 2","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Barlow Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1240px;
  --pad:clamp(16px,4vw,56px);
  --gutter:clamp(34px,7.4vw,112px);
  --pw:clamp(8px,1vw,14px);
  --pipe:linear-gradient(90deg,#6E350F 0%,#B5622E 18%,#F0B88A 42%,#D08A55 58%,#9A4F1E 82%,#6E350F 100%);
  --pipe-h:linear-gradient(180deg,#6E350F 0%,#B5622E 18%,#F0B88A 42%,#D08A55 58%,#9A4F1E 82%,#6E350F 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;background:var(--white);color-scheme:light;color-scheme:only light}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--body);font-weight:400;font-size:clamp(1.02rem,.25vw + .97rem,1.14rem);line-height:1.55;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,table{margin:0}
ul,ol{padding:0;list-style:none}
svg{display:block}
a{color:inherit}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.skip{position:absolute;left:12px;top:-80px;z-index:20;padding:12px 16px;background:var(--ink);color:var(--white);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2 * var(--pad),var(--max));margin-inline:auto}

.concept-note{padding:9px var(--pad);background:#0D0D0D;color:#FFFFFF;font:400 13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center}
.concept-note a{white-space:nowrap;text-underline-offset:2px}

/* Header */
.top{border-bottom:1px solid var(--line)}
.top-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:16px}
.logo{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.logo-mark{width:46px;height:46px}
.logo-name{display:block;font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:.9;letter-spacing:.01em;text-transform:uppercase}
.logo-sub{display:block;margin-top:4px;font-weight:600;font-size:.82rem;line-height:1;color:var(--copper-dk)}
.top ul{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.nav-link a{padding:6px 0;border-bottom:3px solid transparent;font-weight:600;text-decoration:none;transition:border-color .2s}
.nav-link a:hover,.nav-link a:focus-visible{border-bottom-color:var(--copper)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.7em 1.5em;border:2px solid var(--copper-dk);border-radius:6px;background:var(--copper-dk);color:var(--white);font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;text-align:center;overflow-wrap:anywhere;max-width:100%;flex-shrink:0;transition:background-color .2s,border-color .2s,color .2s}
.btn:hover{border-color:var(--ink);background:var(--ink)}
.btn-line{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--white)}
.btn-small{min-height:46px;font-size:1.25rem}

/* The pipe run */
.run{position:relative;padding-left:var(--gutter);padding-bottom:clamp(40px,6vw,80px)}
.run::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gutter) * .32);width:var(--pw);background:var(--pipe)}
.valve{position:absolute;z-index:1;top:clamp(42px,7vw,92px);left:calc(var(--gutter) * .32 + var(--pw) / 2);width:clamp(34px,4.6vw,62px);height:auto;transform:translateX(-50%)}
.tee{position:relative}
.tee::before{content:"";position:absolute;top:50%;right:100%;width:calc(var(--gutter) * .68 - var(--pw) - 14px);height:calc(var(--pw) * .74);margin-right:14px;background:var(--pipe-h);transform:translateY(-50%)}
.tee::after{content:"";position:absolute;top:50%;left:calc(var(--gutter) * -.68 - 4px);width:calc(var(--pw) + 8px);height:calc(var(--pw) * 2.6);border-radius:3px;background:var(--pipe);box-shadow:0 0 0 1px rgba(110,53,15,.35);transform:translateY(-50%)}
.drip{position:absolute;bottom:-46px;left:calc(var(--gutter) * .32 + var(--pw) / 2);z-index:2;width:clamp(14px,1.6vw,22px);height:auto;transform:translateX(-50%)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,84px) clamp(48px,7vw,100px)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(3.1rem,1rem + 8.4vw,8.4rem);line-height:.9;letter-spacing:.005em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--copper)}
.hero-lead{max-width:30em;margin-top:clamp(18px,2.2vw,28px);font-size:clamp(1.12rem,.5vw + 1rem,1.34rem);line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-urgent{margin-top:22px;padding-left:14px;border-left:4px solid var(--copper);font-size:1.02rem}

/* The data plate */
.plate{position:relative;padding:34px 30px 28px;border:1px solid #B5BDC8;border-radius:10px;background:linear-gradient(168deg,#FBFCFD 0%,#E4E8ED 55%,#D5DAE1 100%);box-shadow:0 26px 44px -26px rgba(23,26,30,.55),inset 0 1px 0 #FFFFFF}
.rivet{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF,#9AA3AE 70%);box-shadow:0 1px 1px rgba(0,0,0,.35)}
.r1{top:12px;left:12px}.r2{top:12px;right:12px}.r3{bottom:12px;left:12px}.r4{bottom:12px;right:12px}
.plate-name{font-family:var(--display);font-weight:800;font-size:2.5rem;line-height:.9;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.plate-sub{margin-top:6px;font-weight:600;font-size:.9rem;color:var(--copper-dk)}
.plate-rows{margin-top:18px;border-top:2px solid var(--ink)}
.plate-rows div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #B5BDC8}
.plate-rows dt{font-weight:600;font-size:.98rem}
.plate-rows dd{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.plate-foot{margin-top:14px;font-size:.9rem;color:var(--muted)}

/* Sections */
.sec{padding-block:clamp(44px,6vw,84px);border-top:1px solid var(--line)}
.sec h2{font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,1.2rem + 5vw,5.4rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.sec-lead{max-width:36em;margin-top:16px;font-size:1.12rem}

.fix-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(26px,3.4vw,44px)}
.fix-col h3{padding-bottom:10px;border-bottom:4px solid var(--copper);font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.fix-list li{padding:15px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.fix-list strong{display:block;font-size:1.1rem;color:var(--ink)}

.cost{width:100%;max-width:860px;margin-top:clamp(24px,3vw,40px);border-collapse:collapse}
.cost thead th{padding:0 0 10px;border-bottom:4px solid var(--ink);font-weight:600;font-size:.9rem;color:var(--muted);text-align:left}
.cost thead th:last-child{text-align:right}
.cost tbody th{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:1.1rem;color:var(--ink);text-align:left}
.cost tbody th span{display:block;margin-top:2px;font-weight:400;font-size:.96rem;color:var(--muted)}
.cost td{padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,1.4rem + 1.2vw,2.5rem);line-height:1;letter-spacing:.01em;color:var(--copper-dk);text-align:right;white-space:nowrap;vertical-align:top}
.cost td small{font-family:var(--body);font-weight:400;font-size:.9rem;letter-spacing:0;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);margin-top:clamp(26px,3.4vw,44px)}
.steps li{padding-top:16px;border-top:4px solid var(--ink)}
.steps .n{display:block;font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:.9;color:var(--copper)}
.steps h3{margin-top:8px;font-family:var(--display);font-weight:800;font-size:1.8rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.steps p{margin-top:8px;color:var(--muted)}

.towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,34px)}
.towns li{padding:9px 16px 8px;border:2px solid var(--ink);border-radius:4px;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.placeholders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px;margin-top:clamp(28px,3.6vw,46px)}
.placeholder{padding:18px 20px;border:2px dashed #AEB7C2;border-radius:8px;background:#F7F9FB;font-size:.98rem;color:var(--muted)}
.placeholder strong{display:block;margin-bottom:4px;color:var(--ink)}

/* Call band */
.call{padding-block:clamp(56px,7.5vw,108px);background:var(--ink);color:var(--white);text-align:center}
.call h2{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,1rem + 5.4vw,5.6rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase}
.call-tel{display:inline-block;margin-top:10px;font-family:var(--display);font-weight:800;font-size:clamp(3.1rem,16.2vw,12rem);line-height:.9;letter-spacing:.005em;color:var(--copper-lt);overflow-wrap:anywhere;text-decoration:none;transition:color .2s}
.call-tel:hover{color:var(--white)}
.call p{max-width:34em;margin:18px auto 0;font-size:1.1rem;color:#D5DAE1}
.call p a{color:var(--white)}

/* Footer */
.foot{padding-block:28px 40px;font-size:.95rem;color:var(--muted)}
.foot-grid{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 40px}
.foot-name{font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.foot p a{font-weight:600;color:var(--copper-dk)}
.callbar{display:none}

@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .plate{max-width:440px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nav-link{display:none}
  .logo-mark{width:40px;height:40px}
  .logo-name{font-size:1.6rem}
  .top .btn-small{display:none}
  .fix-grid,.placeholders{grid-template-columns:minmax(0,1fr)}
  .tee::before{display:none}
  .valve{top:10px;width:28px}
  .hero{padding-top:52px}
  html{scroll-padding-bottom:84px}
  body{padding-bottom:76px}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:center;min-height:64px;padding:10px 16px;background:var(--copper-dk);color:var(--white);font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;box-shadow:0 -8px 24px -8px rgba(23,26,30,.45)}
}
@media (max-width:460px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .hero-actions .btn{flex:1 1 100%}
  .cost tbody th{font-size:1.02rem}
}
/* Windows high contrast mode paints a plate behind text. Give the big number a full line so its plate does not cover the heading above. */
@media (forced-colors:active){
  .call-tel{line-height:1.3}
}
@media print{
  .concept-note,.btn,.logo-mark,.run::before,.tee::before,.tee::after,.valve,.plate,.rivet,.placeholder,.call{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .callbar{display:none}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}