/* T&J Painting — site styles. Palette and type: brand.md §6. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:700 800;font-display:optional;src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:optional;src:url(https://fonts.gstatic.com/s/sourcesans3/v20/nwpStKy2OAdR1K-IwhWudF-R3w8aZQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--container:1200px}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
h3{font-weight:700}
body{font-size:1.0625rem}

/* Header */
.site-header{background:#fff}
.brand{gap:.65rem;color:var(--navy)}
.brand img{height:44px;width:44px}
.brand span{font-size:1.3rem;font-weight:800}
.nav a{color:var(--navy);font-weight:600;font-size:1rem}
.nav .btn{font-family:var(--font-display);font-weight:700}
.head-call{display:none;font-family:var(--font-display);font-weight:700;text-decoration:none;color:#fff;background:var(--brand);padding:.6em .9em;border-radius:var(--radius);min-height:44px;align-items:center;margin-left:auto}
.brand span,.head-call{white-space:nowrap}
@media(max-width:860px){.head-call{display:inline-flex}.site-header .container{gap:.5rem}}
@media(max-width:420px){.brand img{height:38px;width:38px}.brand span{font-size:1.1rem}.head-call{padding:.55em .7em;font-size:.95rem}}

/* Hero: the client's own photo, blue panel */
.hero-photo{position:relative;background:var(--navy)}
.hero-photo .shot{width:100%;height:clamp(420px,74vh,720px);object-fit:cover;object-position:50% 60%}
.hero-panel{background:var(--brand);color:#fff;border-top:8px solid var(--accent)}
.hero-panel .inner{padding:clamp(1.5rem,4vw,2.75rem)}
.hero-panel h1{color:#fff;font-size:clamp(2rem,1.4rem + 2.4vw,3.3rem);line-height:1.04;margin-bottom:var(--s-4);max-width:15ch}
.hero-panel .lede{color:#e6eaf6;max-width:48ch;font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
.hero-panel .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-5)}
.btn-white{background:#fff;color:var(--navy);font-family:var(--font-display);font-weight:800}
.btn-line{background:transparent;color:#fff;border-color:#fff;font-family:var(--font-display);font-weight:700}
.btn-line:hover{background:#fff;color:var(--brand)}
.hero-panel .fine{margin-top:var(--s-4);font-size:.95rem;color:#dfe5f4}
@media(min-width:900px){
  .hero-photo .shot{height:clamp(620px,calc(100vh - 68px),760px);object-position:62% 62%}
  .hero-photo .container{position:absolute;inset:auto 0 0 0}
  .hero-panel{max-width:640px;margin-bottom:clamp(-4rem,-5vw,-2rem);position:relative;z-index:2;box-shadow:0 24px 48px -24px rgba(26,33,62,.55)}
  .hero-photo{margin-bottom:clamp(2rem,5vw,4rem)}
}
@media(max-width:899px){
  .hero-photo .shot{height:auto;aspect-ratio:16/10}
  .hero-photo .container{width:100%}
  .hero-panel .inner{padding:1.25rem var(--gutter) 1.75rem}
  .hero-panel h1{font-size:clamp(1.9rem,7.6vw,2.4rem)}
  .hero-panel .lede{font-size:1.02rem}
  .hero-panel .actions .btn{flex:1 1 auto}
}

/* The layers: one band per step, last band lime (from the logo) */
.principle{padding-block:var(--section) var(--s-6)}
.principle h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.3rem);max-width:20ch;margin-bottom:var(--s-4)}
.principle p{font-size:var(--fs-lg);color:var(--ink-2)}
.layers{list-style:none;margin:0;padding:0;counter-reset:layer}
.layers li{counter-increment:layer}
.layers .band{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--s-4);padding-block:clamp(1.4rem,3vw,2.2rem)}
.layers .band>*{grid-column:2}
.layers .band::before{grid-column:1;grid-row:1 / span 2;content:counter(layer);font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1}
.layers h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);margin-bottom:.35rem}
.layers p{margin:0;max-width:62ch}
.layers li:nth-child(1){background:var(--sky);color:var(--navy)}
.layers li:nth-child(1) .band::before{color:var(--brand)}
.layers li:nth-child(1) p{color:var(--ink-2)}
.layers li:nth-child(2){background:#c9d3ee;color:var(--navy)}
.layers li:nth-child(2) .band::before{color:var(--brand)}
.layers li:nth-child(3){background:var(--brand);color:#fff}
.layers li:nth-child(3) h3{color:#fff}
.layers li:nth-child(3) p{color:#e6eaf6}
.layers li:nth-child(4){background:var(--accent);color:var(--navy)}
.layers li+li{border-top:3px solid #fff}
@media(max-width:899px){.layers .band{grid-template-columns:2.75rem minmax(0,1fr);gap:.25rem var(--s-3)}}
@media(min-width:900px){.layers .band{grid-template-columns:7rem minmax(0,1fr) minmax(0,.9fr);align-items:baseline}.layers .band::before{grid-row:1}.layers .band p{grid-column:3}.layers h3{margin:0}}

/* Services as rows */
.services-grid{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.services-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.svc{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.svc li{padding:var(--s-5) 0;border-bottom:1px solid var(--line);display:grid;gap:.4rem}
@media(min-width:700px){.svc li{grid-template-columns:13rem minmax(0,1fr);gap:var(--s-5)}}
.svc h3{font-size:1.3rem;margin:0}
.svc p{margin:0;color:var(--ink-2)}
.svc-photos{display:grid;gap:var(--s-4)}
.svc-photos figure,.work figure{margin:0}
.svc-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
figcaption{font-size:.95rem;color:var(--ink-2);margin-top:.5rem}

/* Work gallery */
.work{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
.work img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
@media(min-width:760px){
  .work{grid-template-columns:repeat(3,minmax(0,1fr))}
  .work .tall{grid-row:span 2}
  .work .tall img{aspect-ratio:auto;height:calc(100% - 2rem);min-height:0}
}

/* Family + reviews */
.family{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.family{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.facts{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:.6rem}
.facts li{padding-left:1.4rem;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;background:var(--accent);border-radius:2px}
.owner-quote{align-self:start;border-left:6px solid var(--brand);padding:var(--s-2) 0 var(--s-2) var(--s-5);margin:var(--s-6) 0 0}
.owner-quote p{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);line-height:1.35;color:var(--navy)}
.owner-quote footer{margin-top:.6rem;color:var(--ink-2);font-size:.95rem}
.reviews{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.reviews{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.reviews .lead{grid-row:span 2}}
.reviews blockquote{margin:0}
.reviews .lead p{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,1.1rem + 1vw,1.85rem);line-height:1.3;color:var(--navy);max-width:34ch}
.reviews .small-q p{font-size:1.05rem}
.reviews footer{margin-top:.6rem;color:var(--ink-2);font-size:.95rem}
.reviews .small-q{border-top:1px solid var(--line);padding-top:var(--s-4)}

/* Areas + contact */
.areas{columns:2 11rem;list-style:none;padding:0;margin:var(--s-4) 0 0}
.areas li{padding:.25rem 0;break-inside:avoid}
.estimate{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.estimate{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.estimate .form{background:#fff;padding:clamp(1.25rem,3vw,2rem);border-top:6px solid var(--brand);box-shadow:0 18px 40px -28px rgba(26,33,62,.5)}
.form button.btn{font-family:var(--font-display);font-weight:800;min-height:48px}
.big-phone{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,1.3rem + 1.4vw,2.3rem);color:var(--brand);text-decoration:none;display:inline-block;margin:.25rem 0 .5rem}
.contact-list{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:.7rem}
.contact-list b{display:block;font-family:var(--font-display);color:var(--navy)}
.hours{margin-top:.3rem}

/* Footer */
.site-footer{background:var(--navy)}
.site-footer .brand span{color:#fff}
.footer-bottom{color:#b9c0cc}