/* Ridgeway Plumbing & Heating — trades concept. Trustworthy, direct, built for enquiries. Work Sans + Geist. */
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/work-sans.woff2") format("woff2"); }

.trd { --n: #0d2138; --n2: #14314f; --y: #ffc21a; --g: #eef2f6; --t: #1b2a3a; --mut: #5b6b7c;
  background: #fff; color: var(--t); font: 400 16px/1.65 "Geist", system-ui, sans-serif; }
.trd :focus-visible { outline: 3px solid #0a6cff; outline-offset: 3px; }
.trd h1, .trd h2, .trd h3 { font-family: "Work Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: -.03em; line-height: 1.04; }
.t-wrap { width: min(100%, 1200px); margin: 0 auto; padding: 0 5vw; }
.t-eyebrow { margin: 0 0 14px; font: 600 12px "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #a87400; }
.t-head { margin-bottom: 40px; }
.t-head h2, .t-areas h2, .t-quote h2 { font-size: clamp(34px, 5vw, 60px); }
.trd h2 span, .trd h1 span { color: #a87400; }
.t-sub { max-width: 460px; margin-top: 14px; color: var(--mut); }
.t-fine { margin-top: 10px; font-size: 12px; color: #9fb3c8; }

.t-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 2px solid transparent; border-radius: 10px; font: 600 15px "Work Sans", sans-serif; letter-spacing: .01em; transition: transform .2s, box-shadow .2s, background-color .2s, color .2s; }
.t-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(13,33,56,.25); }
.t-btn-y { background: var(--y); border-color: var(--y); color: #14210d; color: #1a1400; }
.t-btn-o { border-color: currentColor; background: transparent; color: #fff; }

.t-nav { position: sticky; top: 44px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 5vw; background: #fff; border-bottom: 1px solid #dfe6ed; }
.t-logo { display: inline-flex; align-items: center; gap: 12px; }
.t-logo svg { width: 40px; height: 40px; }
.lg-bg { fill: var(--n); } .lg-fg { fill: none; stroke: var(--y); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.t-logo span { display: grid; font: 600 19px/1.05 "Work Sans", sans-serif; letter-spacing: -.02em; color: var(--n); }
.t-logo small { font: 500 11px "Work Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.t-nav nav { display: flex; gap: 26px; font: 500 14px "Work Sans", sans-serif; }
.t-nav nav a { padding: 10px 2px; border-bottom: 2px solid transparent; }
.t-nav nav a:hover { border-bottom-color: var(--y); }
.t-call { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 10px; background: var(--n); color: #fff; font: 600 14px "Work Sans", sans-serif; transition: background-color .2s, transform .2s; }
.t-call:hover { background: var(--n2); transform: translateY(-2px); }

/* hero */
.t-hero { position: relative; overflow: hidden; padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 120px); background: var(--n); color: #fff; }
.t-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 46%; background: linear-gradient(135deg, var(--n2), var(--n)); clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); }
.t-hero::after { content: ""; position: absolute; right: -8%; bottom: -40%; width: 60%; height: 90%; background: var(--y); opacity: .12; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.t-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 5vw; align-items: center; }
.t-hero h1 { font-size: clamp(42px, 6vw, 84px); }
.t-hero h1 span { color: var(--y); }
.t-hero .t-eyebrow { color: var(--y); }
.t-lede { max-width: 480px; margin-top: 22px; font-size: 18px; color: #c9d7e6; }
.t-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.t-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding: 0; list-style: none; }
.t-badges li { padding: 8px 14px 8px 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font: 500 13px "Work Sans", sans-serif; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23ffc21a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 10px center / 14px; }
.t-quick { display: grid; gap: 16px; padding: 30px; border-radius: 18px; background: #fff; color: var(--t); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.t-quick h2 { font-size: 28px; }
.t-quick label, .t-form label { display: grid; gap: 6px; font: 600 13px "Work Sans", sans-serif; }
.t-quick input, .t-quick select, .t-form input, .t-form select, .t-form textarea { min-height: 50px; padding: 0 14px; border: 2px solid #cfd9e3; border-radius: 10px; background: #fff; color: var(--t); font: 400 16px "Geist", sans-serif; }
.t-form textarea { padding: 12px 14px; min-height: 110px; resize: vertical; }
.t-quick input:focus, .t-quick select:focus, .t-form input:focus, .t-form select:focus, .t-form textarea:focus { border-color: var(--n); outline: none; box-shadow: 0 0 0 4px rgba(255,194,26,.4); }
.t-confirm { padding: 14px 16px; border-radius: 10px; background: #fff7d6; border: 1px solid #ecd27a; font-size: 14px; color: var(--t); }

/* services */
.t-services, .t-projects, .t-areas, .t-reviews, .t-quote { padding: clamp(70px, 9vw, 120px) 0; }
.t-services { background: var(--g); }
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.t-card { display: grid; align-content: start; gap: 10px; width: 100%; height: 100%; padding: 28px; border: 2px solid transparent; border-radius: 16px; background: #fff; color: var(--t); text-align: left; transition: transform .25s, box-shadow .25s, background-color .25s, color .25s; }
.t-card svg { width: 46px; height: 46px; color: var(--n); transition: color .25s, transform .3s; }
.t-card h3 { font-size: 24px; }
.t-card p { color: var(--mut); font-size: 15px; transition: color .25s; }
.t-card span { margin-top: 6px; font: 600 14px "Work Sans", sans-serif; color: #a87400; transition: color .25s; }
.t-card:hover, .t-card:focus-visible { transform: translateY(-6px); background: var(--n); color: #fff; box-shadow: 0 24px 50px rgba(13,33,56,.25); }
.t-card:hover svg, .t-card:focus-visible svg { color: var(--y); transform: scale(1.1) rotate(-4deg); }
.t-card:hover p, .t-card:focus-visible p { color: #c9d7e6; }
.t-card:hover span, .t-card:focus-visible span { color: var(--y); }

/* projects */
.t-proj-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; align-items: start; }
.t-projects .cx-compare { --cx-radius: 16px; box-shadow: 0 24px 60px rgba(13,33,56,.18); }
.t-proj-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.t-proj-list li { padding: 20px 22px; border: 1px solid #dfe6ed; border-radius: 14px; transition: border-color .2s, transform .2s; }
.t-proj-list li:hover { border-color: var(--y); transform: translateX(6px); }
.t-tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: #fff3cc; font: 600 10px "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b4800; }
.t-proj-list h3 { font-size: 22px; }
.t-proj-list p { margin-top: 4px; font-size: 14px; color: var(--mut); }

/* areas */
.t-areas { background: var(--n); color: #fff; }
.t-areas .t-eyebrow { color: var(--y); } .t-areas h2 span { color: var(--y); } .t-areas .t-sub { color: #c9d7e6; }
.t-areas-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; }
.t-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.t-chips li { padding: 12px 20px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; font: 500 15px "Work Sans", sans-serif; transition: background-color .2s, color .2s, transform .2s; }
.t-chips li:hover { background: var(--y); color: #1a1400; border-color: var(--y); transform: translateY(-3px); }

/* reviews */
.t-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.t-rev-grid figure { height: 100%; margin: 0; padding: 26px; border: 1px solid #dfe6ed; border-radius: 16px; background: #fff; }
.t-stars { color: #e39f00; font-size: 20px; letter-spacing: 3px; }
.t-rev-grid blockquote { margin: 12px 0 18px; font-size: 17px; line-height: 1.5; }
.t-rev-grid figcaption { display: grid; gap: 6px; justify-items: start; font: 600 14px "Work Sans", sans-serif; }
.t-rev-grid em { font-style: normal; padding: 3px 9px; border-radius: 999px; background: #eef2f6; font: 600 10px "Work Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }

/* quote */
.t-quote { background: var(--g); }
.t-quote-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; align-items: start; }
.t-phone { margin-top: 22px; font: 600 22px "Work Sans", sans-serif; }
.t-phone a { border-bottom: 3px solid var(--y); }
.t-phone small { display: block; margin-top: 4px; font: 500 12px "Geist", sans-serif; color: var(--mut); }
.t-form { display: grid; gap: 16px; padding: 30px; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(13,33,56,.12); }
.t-foot { padding: 46px 0 90px; background: var(--n); color: #c9d7e6; }
.t-foot .t-wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.t-logo-txt { font: 600 18px "Work Sans", sans-serif; color: #fff; }
.t-foot p { font-size: 13px; }
.t-foot a { border-bottom: 2px solid var(--y); padding-bottom: 2px; }

/* sticky call bar (phones) */
.t-sticky { position: fixed; inset: auto 0 0 0; z-index: 900; display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--n); box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
.t-sticky .t-btn { flex: 1; min-height: 50px; }

/* motion */
@keyframes slide-in { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .t-hero::before { animation: slide-in 1s cubic-bezier(.22,1,.36,1) both; }
  .t-hero-copy > * { animation: slide-in .9s cubic-bezier(.22,1,.36,1) both; }
  .t-hero-copy > *:nth-child(2) { animation-delay: .08s; } .t-hero-copy > *:nth-child(3) { animation-delay: .16s; } .t-hero-copy > *:nth-child(4) { animation-delay: .24s; } .t-hero-copy > *:nth-child(5) { animation-delay: .32s; }
}

/* responsive */
@media (max-width: 900px) {
  .t-nav nav { display: none; }
  .t-hero-grid, .t-proj-grid, .t-areas-grid, .t-quote-grid { grid-template-columns: 1fr; gap: 34px; }
  .t-grid, .t-rev-grid { grid-template-columns: 1fr 1fr; }
  .t-hero::before { width: 100%; clip-path: none; opacity: .5; }
}
@media (max-width: 760px) {
  .t-sticky { display: flex; }
  .t-call { display: none; }
  .t-nav { justify-content: center; }
}
@media (max-width: 560px) {
  .t-grid, .t-rev-grid { grid-template-columns: 1fr; }
  .t-quick, .t-form { padding: 22px 18px; }
  .t-cta .t-btn { flex: 1 1 100%; }
  .t-logo span { font-size: 17px; }
}