/* SATX Painting & Renovation — site styles (loaded after base.css) */

/* Archivo variable, latin subset: one file for every width and weight used */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:75% 100%;font-display:optional;
  src:url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.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}

body{font-stretch:100%}
h1,h2,h3{font-stretch:82%;letter-spacing:-.01em}
h1{font-weight:800}
h2{font-weight:800}
h3{font-weight:700}
.num,.price{font-variant-numeric:tabular-nums lining-nums}

/* Header */
.site-header{background:color-mix(in srgb,var(--bg) 92%,transparent)}
.brand img{height:52px;width:auto}
.brand span{font-stretch:82%;font-size:var(--fs-md);line-height:1.1}
.nav a{color:var(--ink)}
.nav .btn{font-variant-numeric:tabular-nums}
@media(max-width:860px){.brand span{display:none}}

/* Buttons: square-ish, sturdy */
.btn{border-radius:var(--radius);font-weight:650}
.btn-primary{box-shadow:none}
.btn-outline{background:var(--surface)}
.btn svg{flex:none}

/* Hero */
.hero{padding-block:clamp(2rem,6vw,5rem) clamp(2.5rem,6vw,5rem)}
.hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center}}
.hero h1{max-width:13ch;margin-bottom:var(--s-5)}
.hero .lede{color:var(--ink-2)}
.hero .actions{margin-top:var(--s-6)}
.hero .actions .btn{min-height:48px}
@media(min-width:960px){.hero .actions .btn-lg{font-size:var(--fs-md);padding:.9em 1.2em}}
.hero .where{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--ink-3)}
@media(max-width:480px){.hero .actions .btn{width:100%}}

/* The rate sheet: the one bold element */
.sheet{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--brand);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow);position:relative}
.sheet::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}
.sheet h2{font-size:var(--fs-xl);margin-bottom:var(--s-2)}
.sheet .sub{font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:var(--s-4)}
.sheet .sheet-foot{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--ink-3)}
.sheet .sheet-foot a{font-weight:600}

/* Price rows with dotted leaders */
.rates{list-style:none;margin:0;padding:0}
.rates li{display:flex;align-items:baseline;gap:.6em;padding:.7em 0;border-bottom:1px solid var(--line)}
.rates li:last-child{border-bottom:0}
.rates .item{flex:0 1 auto;min-width:0}
.rates .item small{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:.15em}
.rates .dots{flex:1 1 1.5rem;border-bottom:2px dotted var(--line);transform:translateY(-.3em);min-width:1rem}
.rates .price{flex:none;font-weight:700;color:var(--brand);text-align:right;white-space:nowrap}
.rates .price em{font-style:normal;font-weight:500;color:var(--ink-3);font-size:var(--fs-sm)}
@media(max-width:400px){.rates .dots{flex-basis:.75rem;min-width:.5rem}.rates li{font-size:var(--fs-sm)}}
@media(max-width:340px){
  .rates li{flex-wrap:wrap;gap:.15em .6em}
  .rates .dots{display:none}
  .rates .item{flex-basis:100%}
}

/* Full price list */
.prices-head{max-width:720px;margin-bottom:var(--s-7)}
.trade{display:grid;gap:var(--s-5) clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr);padding-block:var(--s-7);border-top:2px solid var(--ink)}
.trade:last-child{padding-bottom:0}
@media(min-width:900px){.trade{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.trade h3{font-size:var(--fs-2xl);margin-bottom:var(--s-2)}
.trade .motto{font-weight:600;color:var(--brand);margin-bottom:var(--s-4)}
.trade .varies{font-size:var(--fs-sm);color:var(--ink-3)}
.trade .ask{display:inline-block;margin-top:var(--s-4);font-weight:600}
.trade .group{font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin:var(--s-5) 0 0;padding-bottom:.4em;border-bottom:1px solid var(--ink)}
.trade .group:first-child{margin-top:0}
.trade .group span{font-weight:400;color:var(--ink-3)}

/* Contact */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;gap:var(--s-6) clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.phone-big{display:inline-block;font-family:var(--font-display);font-stretch:82%;font-weight:800;font-size:clamp(2.2rem,1.6rem + 3vw,3.6rem);line-height:1;color:var(--brand);text-decoration:none;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:var(--s-2) 0 var(--s-5)}
.phone-big:hover{text-decoration:underline;text-decoration-thickness:3px}
.contact .actions .btn{min-height:48px}
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contact-list li{padding:var(--s-4) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s-3)}
.contact-list .k{color:var(--ink-3);font-size:var(--fs-sm)}
.contact-list a{font-weight:600;overflow-wrap:anywhere}

/* Footer */
.site-footer{background:var(--ink)}
.footer-row{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7);justify-content:space-between;align-items:flex-start}
.footer-row .logo-chip{background:#fff;border-radius:var(--radius);padding:.5rem .7rem;display:inline-block}
.footer-row .logo-chip img{height:56px;width:auto}
.footer-row p{margin:0}
.footer-row .tag{color:#fff;font-weight:600;margin-top:var(--s-3)}