/* 101 Auto Glass — demo stylesheet v1.0
   Scoped under .ag101 so the same CSS is safe standalone or dropped into a CMS.
   Brand colors sampled directly from the recovered vector logo:
     shield yellow #F6EB14 · type black #231F20 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

.ag101{
  --yellow:#F6EB14;
  --yellow-d:#D9CF00;
  --ink:#231F20;
  --ink-soft:#3B3638;
  --paper:#FFFFFF;
  --paper-2:#F4F4F1;
  --paper-3:#EAEAE5;
  --line:#DEDDD7;
  --muted:#6E6A67;
  --ok:#1B7F4B;

  --font-display:'Barlow Condensed',"Arial Narrow",system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1180px;
  --r:10px;
  --r-lg:16px;
  --shadow:0 1px 2px rgba(35,31,32,.06),0 8px 24px rgba(35,31,32,.07);
  --shadow-lg:0 2px 4px rgba(35,31,32,.06),0 18px 48px rgba(35,31,32,.13);

  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-sizing:border-box}
.ag101 img{max-width:100%;height:auto;display:block}
.ag101 .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- type ---------- */
.ag101 h1,.ag101 h2,.ag101 h3,.ag101 .display{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.005em;
  text-wrap:balance;
  margin:0 0 .45em;
  text-transform:uppercase;
}
.ag101 h1{font-size:clamp(2.6rem,6.4vw,4.5rem);max-width:15ch}
.ag101 h2{font-size:clamp(2rem,4.4vw,3.1rem);max-width:20ch}
.ag101 h3{font-size:1.42rem;max-width:24ch}
.ag101 p,.ag101 li{text-wrap:pretty;margin:0 0 1em}
.ag101 p:last-child{margin-bottom:0}
.ag101 .lead{font-size:1.19rem;line-height:1.55;color:var(--ink-soft);max-width:56ch}
.ag101 .sm{font-size:.94rem}
.ag101 a{color:inherit}
.ag101 .eyebrow{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;font-size:.95rem;
  color:var(--ink);background:var(--yellow);
  padding:.28em .7em;border-radius:4px;margin-bottom:.9em;
}
.ag101 .eyebrow.ghost{background:none;padding:0;color:var(--muted)}
.ag101 .nowrap{white-space:nowrap}

/* ---------- buttons ---------- */
.ag101 .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.12rem;line-height:1;
  padding:.92em 1.5em;border-radius:var(--r);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;
}
.ag101 .btn svg{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none}
.ag101 .btn-primary{background:var(--yellow);color:var(--ink);box-shadow:0 3px 0 var(--yellow-d)}
.ag101 .btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--yellow-d)}
.ag101 .btn-dark{background:var(--ink);color:#fff}
.ag101 .btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ag101 .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.ag101 .btn-outline:hover{background:var(--ink);color:#fff}
.ag101 .btn-outline-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.5)}
.ag101 .btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.ag101 .btn-lg{font-size:1.24rem;padding:1.02em 1.75em}
.ag101 .btn-sm{font-size:1rem;padding:.7em 1.1em}
.ag101 .btn-block{width:100%}

/* ---------- shield ---------- */
.ag101 .shield{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6em;height:2.75em;flex:none;
  background:var(--yellow);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:1em;
  clip-path:polygon(50% 0,100% 12%,100% 62%,50% 100%,0 62%,0 12%);
}

/* ---------- topbar / header ---------- */
.ag101 .topbar{background:var(--ink);color:#EDEBE8;font-size:.9rem}
.ag101 .topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1.6em;padding-top:.6em;padding-bottom:.6em}
.ag101 .topbar a{text-decoration:none;display:inline-flex;align-items:center;gap:.45em;font-weight:600}
.ag101 .topbar a:hover{color:var(--yellow)}
.ag101 .topbar svg{width:1.05em;height:1.05em;stroke:var(--yellow);fill:none;stroke-width:1.7}
.ag101 .topbar .spacer{margin-left:auto;color:#B5B1AE}
@media(max-width:860px){.ag101 .topbar .spacer,.ag101 .topbar .hide-sm{display:none}}

.ag101 .header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.ag101 .header .wrap{display:flex;align-items:center;gap:1.2em;padding-top:.8em;padding-bottom:.8em}
.ag101 .brand img{height:52px;width:auto}

/* single-page scroller: no nav, the header CTA is the call */
.ag101 .header-call{margin-left:auto;text-align:left;padding:.62em 1.25em}
.ag101 .header-call span{display:flex;flex-direction:column;gap:.1em;line-height:1}
.ag101 .header-call small{
  font-family:var(--font-body);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;opacity:.72;
}
.ag101 .header-call span:not(small){font-size:1.42rem}
@media(max-width:560px){
  .ag101 .brand img{height:42px}
  .ag101 .header-call{padding:.55em .9em}
  .ag101 .header-call span:not(small){font-size:1.15rem}
}
@media(max-width:400px){
  .ag101 .header-call small{display:none}
}

/* ---------- hero ---------- */
.ag101 .hero{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.4rem,7vw,5.5rem);
}
.ag101 .hero::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(115deg,rgba(246,235,20,.055) 0 2px,transparent 2px 13px),
    radial-gradient(1100px 520px at 78% 12%,rgba(246,235,20,.15),transparent 62%);
  pointer-events:none;
}
.ag101 .hero .wrap{position:relative}
.ag101 .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
@media(max-width:940px){.ag101 .hero-grid{grid-template-columns:1fr}}
.ag101 .hero h1{color:#fff}
.ag101 .hero h1 em{font-style:normal;color:var(--yellow)}
.ag101 .hero .lead{color:#D3D0CD;font-size:1.24rem;max-width:52ch}
.ag101 .hero-kicker{
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:1rem;
  color:var(--yellow);margin:0 0 1em;
}
.ag101 .hero-kicker::before{content:"";width:34px;height:3px;background:var(--yellow)}
.ag101 .cta-row{display:flex;flex-wrap:wrap;gap:.8em;margin:1.7em 0 0}
.ag101 .hero-proof{
  display:flex;flex-wrap:wrap;gap:.7em 1.9em;margin-top:2em;
  padding-top:1.5em;border-top:1px solid rgba(255,255,255,.16);
}
.ag101 .hero-proof span{display:inline-flex;align-items:center;gap:.55em;font-size:.98rem;color:#C9C6C3}
.ag101 .hero-proof b{color:#fff}
.ag101 .hero-proof svg{width:1.25em;height:1.25em;flex:none;stroke:var(--yellow);fill:none;stroke-width:1.7}

/* ---------- quote card (call/text only — no web forms) ---------- */
.ag101 .quotecard{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.ag101 .quotehead{background:var(--yellow);padding:1.35em 1.5em}
.ag101 .quotehead h2{margin:0 0 .16em;font-size:1.72rem;max-width:none}
.ag101 .quotehead p{margin:0;font-size:.96rem;font-weight:500}
.ag101 .quotebody{padding:1.5em}
.ag101 .quoteintro{font-size:.98rem;color:var(--ink-soft);margin-bottom:1.1em}

.ag101 .tellus{list-style:none;counter-reset:t;padding:0;margin:0 0 1.5em}
.ag101 .tellus li{
  counter-increment:t;position:relative;padding-left:2.9em;margin:0 0 1em;
  display:flex;flex-direction:column;gap:.1em;
}
.ag101 .tellus li:last-child{margin-bottom:0}
.ag101 .tellus li::before{
  content:counter(t);position:absolute;left:0;top:-.05em;
  width:2em;height:2.1em;background:var(--ink);color:var(--yellow);
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 12%,100% 62%,50% 100%,0 62%,0 12%);
}
.ag101 .tellus b{font-size:1.05rem;line-height:1.25}
.ag101 .tellus span{font-size:.92rem;color:var(--muted)}

.ag101 .quoteactions{display:grid;gap:.7em}
.ag101 .quotenote{margin:.3em 0 0;font-size:.87rem;color:var(--muted);text-align:center}

/* ---------- trustbar ---------- */
.ag101 .trustbar{background:var(--yellow);border-bottom:3px solid var(--yellow-d)}
.ag101 .trustbar .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1em 1.6em;
  padding-top:1.15em;padding-bottom:1.15em;
}
.ag101 .trustbar .item{display:flex;align-items:center;gap:.7em;font-size:.95rem;line-height:1.28}
.ag101 .trustbar svg{width:1.7em;height:1.7em;flex:none;stroke:var(--ink);fill:none;stroke-width:1.6}
.ag101 .trustbar b{display:block;font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em}
@media(max-width:900px){.ag101 .trustbar .wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ag101 .trustbar .wrap{grid-template-columns:1fr}}

/* ---------- sections ---------- */
.ag101 .sec{padding:clamp(3.2rem,6.5vw,5.4rem) 0}
.ag101 .sec-alt{background:var(--paper-2)}
.ag101 .sec-dark{background:var(--ink);color:#fff}
.ag101 .sec-dark h2{color:#fff}
.ag101 .sec-dark .lead{color:#C9C6C3}
.ag101 .sec-head{max-width:60ch;margin-bottom:2.6em}
.ag101 .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.ag101 .sec-head.center h2,.ag101 .sec-head.center .lead{margin-left:auto;margin-right:auto}
.ag101 .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media(max-width:900px){.ag101 .split{grid-template-columns:1fr}}

/* ---------- service cards: explicit 3 cols, 6 items = 2 clean rows ---------- */
.ag101 .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:960px){.ag101 .cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ag101 .cards{grid-template-columns:1fr}}
.ag101 .card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7em 1.5em;display:flex;flex-direction:column;height:100%;
  transition:transform .14s,box-shadow .14s,border-color .14s;
}
.ag101 .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--ink)}
.ag101 .card .ico{
  width:52px;height:52px;border-radius:var(--r);background:var(--yellow);
  display:grid;place-items:center;margin-bottom:1em;
}
.ag101 .card .ico svg{width:27px;height:27px;stroke:var(--ink);fill:none;stroke-width:1.6}
.ag101 .card h3{font-size:1.3rem;margin-bottom:.4em}
.ag101 .card p{font-size:.98rem;color:var(--ink-soft);margin-bottom:0}
.ag101 .card .tag{
  margin-top:auto;padding-top:1.1em;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;font-size:.9rem;color:var(--muted);
}

/* ---------- steps ---------- */
.ag101 .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:s}
@media(max-width:820px){.ag101 .steps{grid-template-columns:1fr}}
.ag101 .step{position:relative;padding-left:4.1em}
.ag101 .step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-.1em;width:2.7em;height:2.85em;
  background:var(--yellow);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;
  display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 12%,100% 62%,50% 100%,0 62%,0 12%);
}
.ag101 .step h3{font-size:1.24rem;margin-bottom:.35em}
.ag101 .step p{font-size:.98rem;color:var(--ink-soft);margin:0}
.ag101 .sec-dark .step p{color:#C9C6C3}

/* ---------- checklist ---------- */
.ag101 .checks{list-style:none;padding:0;margin:1.4em 0 0;display:grid;gap:.75em}
.ag101 .checks li{display:flex;align-items:flex-start;gap:.7em;margin:0;font-size:1.02rem}
.ag101 .checks svg{width:1.4em;height:1.4em;flex:none;margin-top:.12em;stroke:var(--ok);fill:none;stroke-width:2.2}
.ag101 .sec-dark .checks svg{stroke:var(--yellow)}

/* ---------- reviews ---------- */
.ag101 .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:960px){.ag101 .reviews{grid-template-columns:1fr}}
.ag101 .review{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--yellow);border-radius:var(--r);padding:1.5em}
.ag101 .stars{display:flex;gap:.15em;margin-bottom:.7em}
.ag101 .stars svg{width:1.15em;height:1.15em;fill:var(--yellow);stroke:none}
.ag101 .review p{font-size:1.01rem;margin-bottom:.9em}
.ag101 .review .who{
  font-size:.9rem;color:var(--ink-soft);font-weight:700;margin:auto 0 0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em;
}
.ag101 .review .who span{font-weight:500;color:var(--muted);font-size:.84rem}
.ag101 .review{display:flex;flex-direction:column}

/* rating band — headline social proof, sits directly under the trust bar */
.ag101 .ratingband{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:1.3em 2em;margin-bottom:2.6em;padding-bottom:2.2em;
  border-bottom:2px solid var(--paper-3);
}
.ag101 .ratingband-score{display:flex;flex-direction:column;gap:.15em}
.ag101 .ratingband-score .num{
  font-family:var(--font-display);font-weight:700;font-size:4.6rem;
  line-height:.85;color:var(--ink);
}
.ag101 .ratingband-score .stars svg{width:1.3em;height:1.3em}
.ag101 .ratingband-copy h2{margin:0 0 .2em;font-size:clamp(1.6rem,3vw,2.35rem);max-width:24ch}
.ag101 .ratingband-copy .lead{font-size:1.05rem;margin:0}
.ag101 .ratingband-cta{white-space:nowrap}
@media(max-width:900px){
  .ag101 .ratingband{grid-template-columns:auto 1fr;gap:1em 1.4em}
  .ag101 .ratingband-cta{grid-column:1/-1;justify-self:start}
}
@media(max-width:520px){
  .ag101 .ratingband{grid-template-columns:1fr}
  .ag101 .ratingband-score{flex-direction:row;align-items:center;gap:.7em}
  .ag101 .ratingband-score .num{font-size:3.4rem}
}

/* ---------- trade ---------- */
.ag101 .logolist{display:flex;flex-wrap:wrap;gap:.55em;margin-top:1.3em;padding:0;list-style:none}
.ag101 .logolist li{
  margin:0;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.95rem;
  border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:.42em .95em;color:#E4E2DF;
}

/* ---------- area ---------- */
.ag101 .arealist{columns:3;column-gap:2em;list-style:none;padding:0;margin:1.5em 0 0}
@media(max-width:760px){.ag101 .arealist{columns:2}}
@media(max-width:420px){.ag101 .arealist{columns:1}}
.ag101 .arealist li{
  break-inside:avoid;margin:0 0 .55em;padding-left:1.5em;position:relative;font-size:1.02rem;
}
.ag101 .arealist li::before{
  content:"";position:absolute;left:0;top:.52em;width:.62em;height:.62em;
  background:var(--yellow);border-radius:2px;
}

/* ---------- about ---------- */
.ag101 .ownercard{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.ag101 .photo-note{
  margin-top:.85em;font-size:.83rem;color:var(--muted);font-style:italic;
  border-left:3px solid var(--line);padding-left:.8em;
}

/* ---------- CTA band ---------- */
.ag101 .ctaband{background:var(--yellow);padding:clamp(2.6rem,5vw,3.8rem) 0;text-align:center}
.ag101 .ctaband h2{margin-bottom:.3em;max-width:22ch;margin-left:auto;margin-right:auto}
.ag101 .ctaband p{font-size:1.14rem;font-weight:500;max-width:54ch;margin:0 auto 1.6em}

/* ---------- footer ---------- */
.ag101 .footer{background:var(--ink);color:#B5B1AE;padding:3.4rem 0 6.5rem;font-size:.96rem}
.ag101 .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4em}
@media(max-width:820px){.ag101 .footer-grid{grid-template-columns:1fr}}
.ag101 .footer img{height:46px;width:auto;margin-bottom:1.1em;background:#fff;padding:.5em .7em;border-radius:var(--r)}
.ag101 .footer h4{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:1.06rem;color:#fff;margin:0 0 .9em;
}
.ag101 .footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.15em}
.ag101 .footer li{margin:0}
/* phone-first site — footer links are real tap targets, not 18px text */
.ag101 .footer a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:.15em 0}
.ag101 .footer a:hover{color:var(--yellow)}
.ag101 .footer-bottom{
  margin-top:2.6em;padding-top:1.5em;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.6em 1.5em;font-size:.88rem;color:#8C8885;
}

/* ---------- sticky mobile action bar ---------- */
.ag101 .actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--ink);
  box-shadow:0 -4px 18px rgba(0,0,0,.22);
}
.ag101 .actionbar a{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  padding:1.05em .6em;text-decoration:none;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.1rem;
}
.ag101 .actionbar .call{background:var(--yellow);color:var(--ink)}
.ag101 .actionbar .text{background:var(--ink);color:#fff}
.ag101 .actionbar svg{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.7}
@media(max-width:820px){.ag101 .actionbar{display:grid}}

/* ---------- demo banner ---------- */
.ag101 .demobar{
  background:#1D4ED8;color:#fff;text-align:center;font-size:.87rem;
  padding:.55em 1em;font-weight:600;letter-spacing:.02em;
}
.ag101 .demobar b{color:var(--yellow)}

@media(prefers-reduced-motion:reduce){
  .ag101 *{transition:none!important;animation:none!important}
}