:root{--icon-navy:#061560}
/* ==========================================================================
   LA ROOFING masthead. Brush stroke, photo and badges are sliced images;
   every word is live HTML sitting on top.
   ========================================================================== */
.laroof{background:#fff}
.lam{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);
  gap:clamp(14px,1.8vw,32px);align-items:start}

/* title on the sliced brush */
.lam-title{display:inline-block;margin:0 0 clamp(10px,1.1vw,18px);
  background:url("../images/mast/brush-plain.png") center/100% 100% no-repeat;
  padding:clamp(13px,1.5vw,28px) clamp(30px,3.4vw,64px) clamp(19px,2.3vw,42px);
  color:#fff;font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:.01em;line-height:1;font-size:clamp(24px,2.9vw,50px);
  text-shadow:0 2px 5px rgba(0,0,0,.45)}

.lam-sub{margin:0 0 clamp(9px,1vw,16px);color:var(--blue);font-weight:800;font-style:italic;
  font-size:clamp(13px,1.08vw,20px);line-height:1.25}
.lam-lead{margin:0;max-width:62ch;color:#3E4658;
  font-size:clamp(12.5px,.9vw,15.5px);line-height:1.62}

.lam-benefits{list-style:none;margin:clamp(14px,1.6vw,26px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(9px,1.1vw,18px)}
.lam-benefits li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
.lam-bic{width:clamp(30px,2.8vw,46px);height:clamp(30px,2.8vw,46px);flex:none;border-radius:50%;
  display:grid;place-items:center}
.lam-bic svg{width:58%;height:58%}
.lam-bic-navy{background:var(--blue);color:#fff}
.lam-bic-gold{background:var(--gold);color:var(--blue)}
.lam-benefits b{font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(9.5px,.76vw,13px);line-height:1.15}
.lam-benefits span:last-child{color:#5A6472;font-size:clamp(9px,.7vw,11.5px);line-height:1.32}

/* artwork */
.lam-art{position:relative;line-height:0}
.lam-photo{display:block;width:100%;height:auto;border-radius:8px}

/* contact strip */
.lam-strip{display:grid;
  /* proportions measured off the supplied design: navy block to ~25%,
     gold button from ~75% */
  grid-template-columns:minmax(0,24%) minmax(0,1fr) minmax(0,24%);
  align-items:stretch;
  gap:clamp(10px,1.4vw,26px);margin-top:clamp(14px,1.7vw,30px);
  padding:clamp(9px,1vw,16px);border-radius:10px;background:#F4F6FA;border:1px solid var(--line)}
.lam-phone{display:flex;align-items:center;gap:clamp(7px,.8vw,13px);
  background:var(--blue);border-radius:9px;
  padding:clamp(8px,.9vw,15px) clamp(11px,1.2vw,20px);color:#fff}
.lam-phone-ic{width:clamp(24px,2.2vw,38px);height:clamp(24px,2.2vw,38px);flex:none;
  border-radius:50%;background:var(--gold);color:var(--blue);display:grid;place-items:center}
.lam-phone-ic svg{width:60%;height:60%}
.lam-phone-txt b{display:block;color:var(--gold);font-weight:900;text-transform:uppercase;
  font-size:clamp(8.5px,.66vw,11.5px)}
.lam-phone-txt span{display:block;font-weight:900;font-size:clamp(14px,1.25vw,22px)}
.lam-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(9px,1.2vw,22px)}
.lam-feats li{display:grid;grid-template-columns:auto 1fr;gap:clamp(6px,.75vw,11px);
  align-items:center;padding-left:clamp(7px,.9vw,16px);border-left:1px solid var(--line)}
.lam-feats li:first-child{border-left:0;padding-left:0}
.lam-sic{width:clamp(22px,2.1vw,34px);height:clamp(22px,2.1vw,34px);flex:none;color:var(--blue);
  display:grid;place-items:center}
.lam-sic svg{width:100%;height:100%}
.lam-feats b{display:block;font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(9px,.72vw,12px);line-height:1.15}
.lam-feats span{display:block;color:#5A6472;font-size:clamp(8.5px,.66vw,11px);line-height:1.3}
.lam-cta{display:inline-flex;align-items:center;gap:8px;background:var(--gold-cta);
  color:var(--blue);border-radius:8px;padding:clamp(8px,.95vw,15px) clamp(11px,1.3vw,22px);
  font-weight:900;text-transform:uppercase;line-height:1.15;text-align:left;
  font-size:clamp(9.5px,.78vw,13px);transition:filter .15s ease,transform .15s ease}
.lam-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.lam-phone{justify-content:center}
.lam-cta{justify-content:center;text-align:center}
.lam-chev{width:clamp(15px,1.4vw,24px);height:clamp(15px,1.4vw,24px);flex:none;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.15em;
  line-height:1;padding-bottom:2px}

@media (max-width:1000px){
  .lam{grid-template-columns:1fr}
  .lam-art{order:-1}
    .lam-strip{grid-template-columns:1fr}
  .lam-cta{justify-content:center;text-align:center}
}
@media (max-width:760px){
  .lam-benefits{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .lam-feats{grid-template-columns:1fr}
  .lam-feats li{border-left:0;padding-left:0}
}

/* ---- numbered content rows ------------------------------------------------ */
.la-row{display:grid;grid-template-columns:minmax(0,27%) minmax(0,1fr);
  gap:clamp(12px,1.6vw,30px);align-items:start;margin-top:clamp(18px,2.1vw,36px)}
.la-shot{margin:0;border-radius:9px;overflow:hidden;line-height:0}
.la-shot img{display:block;width:100%;height:auto}
.la-body{min-width:0}
.la-h{display:flex;align-items:flex-start;gap:clamp(7px,.8vw,13px);
  margin:0 0 clamp(8px,.9vw,14px);font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(13px,1.05vw,19px);line-height:1.2}
.la-num{flex:none;width:clamp(19px,1.6vw,27px);height:clamp(19px,1.6vw,27px);
  border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;
  font-size:.8em;font-weight:900;line-height:1}
.la-body p{margin:0 0 clamp(9px,.95vw,15px);color:#3E4658;
  font-size:clamp(12.5px,.9vw,15.5px);line-height:1.62}
.la-body b{color:var(--blue);font-weight:800}
.la-after{margin-bottom:0!important}

/* the nine signs read DOWN each column, as in the design */
.la-checks{list-style:none;margin:0 0 clamp(9px,1vw,16px);padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:column;
  grid-template-rows:repeat(3,auto);
  gap:clamp(5px,.6vw,10px) clamp(11px,1.4vw,26px)}
.la-checks li{position:relative;padding-left:clamp(19px,1.5vw,26px);color:#3E4658;
  font-size:clamp(11.5px,.83vw,14.5px);line-height:1.4}
.la-checks li::before{content:"";position:absolute;left:0;top:.18em;
  width:clamp(12px,1vw,17px);height:clamp(12px,1vw,17px);border-radius:50%;
  background:var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/72% no-repeat}

@media (max-width:1000px){
  .la-row{grid-template-columns:1fr}
  .la-shot img{aspect-ratio:21/9;object-fit:cover}
}
@media (max-width:760px){
  .la-checks{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto)}
}
@media (max-width:520px){
  .la-checks{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:auto}
}

@media (max-width:1000px){
}
@media (max-width:560px){
}


/* ---- trust bar ----------------------------------------------------------- */
.la-bar{list-style:none;margin:clamp(10px,1.2vw,20px) 0 0;padding:clamp(9px,1vw,16px) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(9px,1.2vw,22px);
  border-top:2px solid var(--line)}
.la-bar li{display:flex;align-items:center;justify-content:center;gap:clamp(6px,.8vw,12px);
  font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(9.5px,.78vw,13px);text-align:center}
.la-bar-ic{width:clamp(18px,1.7vw,28px);height:clamp(18px,1.7vw,28px);flex:none}
.la-bar-ic svg{width:100%;height:100%;display:block}
.la-bar-stars{color:var(--gold-trust);letter-spacing:1px;font-size:clamp(11px,.95vw,16px)}

@media (max-width:1100px){
}
@media (max-width:1000px){
  .la-bar{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .la-bar{grid-template-columns:1fr}
}
@media (max-width:560px){
}

/* ---- block 5: photo | copy | photo | copy -------------------------------- */
.la-split{display:grid;
  grid-template-columns:minmax(0,15%) minmax(0,1fr) minmax(0,17%) minmax(0,1.05fr);
  gap:clamp(11px,1.4vw,26px);align-items:start;margin-top:clamp(18px,2.1vw,36px)}
.la-body-mid{align-self:center}

/* ---- blocks 6 + 7 as a pair --------------------------------------------- */
.la-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,1.8vw,34px);align-items:start;margin-top:clamp(18px,2.1vw,36px)}
.la-pair .la-row{margin-top:0}
.la-row-tight{grid-template-columns:minmax(0,22%) minmax(0,1fr)}
.la-checks-2{grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;grid-template-rows:repeat(3,auto)}

@media (max-width:1100px){
  .la-pair{grid-template-columns:1fr}
  .la-split{grid-template-columns:minmax(0,22%) minmax(0,1fr)}
  .la-split .la-shot:nth-of-type(2){max-width:45%}
  .la-split > *:nth-child(3),.la-split > *:nth-child(4){grid-column:1/-1}
}
@media (max-width:760px){
  .la-checks-2{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:auto}
}
@media (max-width:560px){
  .la-split{grid-template-columns:1fr}
  .la-split .la-shot:nth-of-type(2){max-width:none}
  .la-row-tight{grid-template-columns:1fr}
}

/* ---- block 9: final thoughts --------------------------------------------- */
.la-final{display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);
  gap:clamp(12px,1.6vw,28px);align-items:center;
  background:#F4F6FA;border:1px solid var(--line);border-radius:11px;
  padding:clamp(12px,1.4vw,24px);margin-top:clamp(18px,2.1vw,36px)}
.la-final-shot{margin:0;border-radius:8px;overflow:hidden;line-height:0}
.la-final-shot img{display:block;width:100%;height:auto}
.la-h-final{margin-bottom:clamp(6px,.7vw,11px)}
.la-final p{margin:0;color:#3E4658;font-size:clamp(12px,.88vw,15px);line-height:1.6}
@media (max-width:760px){ .la-final{grid-template-columns:1fr} }

/* the three strip icons are sliced artwork, not SVG */
.lam-sic-img{width:clamp(26px,2.5vw,42px);height:auto;display:block;flex:none}

/* strip icons: navy structure with gold detail */
.lam-sic-2t{width:clamp(26px,2.5vw,42px);height:clamp(26px,2.5vw,42px);flex:none;
  display:grid;place-items:center}
.lam-sic-2t svg{width:100%;height:100%;display:block}

/* free roof banner: supplied artwork, full width */
.la-banner{margin:clamp(18px,2.2vw,38px) 0 clamp(10px,1.2vw,20px)}
.la-banner img{display:block;width:100%;height:auto;border-radius:10px}

/* ---- block 3: roofing system cards --------------------------------------- */
.la-h-wide{margin-top:clamp(20px,2.3vw,40px);flex-direction:column;align-items:flex-start;gap:0}
.la-h-wide{display:flex}
.la-h-wide::after{content:"";display:block;width:clamp(52px,5vw,86px);height:4px;
  background:var(--gold);border-radius:2px;margin-top:clamp(6px,.7vw,11px)}
.la-h-wide > .la-num{position:absolute;left:0;top:0}
.la-h-wide{position:relative;padding-left:clamp(28px,2.6vw,42px)}
.la-intro{margin:clamp(8px,.9vw,14px) 0 clamp(12px,1.3vw,22px);color:#3E4658;
  font-size:clamp(12.5px,.9vw,15.5px);line-height:1.62;max-width:82ch}

.la-systems{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.3vw,24px);align-items:stretch}
.la-systems article{background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 6px 16px rgba(6,21,96,.07)}
.la-sys-top{position:relative;line-height:0}
.la-sys-top > img:first-child{display:block;width:100%;height:auto;
  aspect-ratio:374/285;object-fit:cover}
.la-sys-ico{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  width:clamp(46px,4.4vw,74px);height:auto;z-index:2;
  border-radius:50%;box-shadow:0 0 0 4px #fff}
.la-sys-body{padding:clamp(30px,3vw,50px) clamp(11px,1.2vw,20px) clamp(12px,1.3vw,22px);
  display:flex;flex-direction:column;flex:1;text-align:center}
.la-systems h3{margin:0 0 clamp(7px,.8vw,13px);font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(11px,.92vw,16px);line-height:1.2;
  position:relative;padding-bottom:clamp(7px,.8vw,13px)}
.la-systems h3::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:60%;height:2px;background:var(--gold);border-radius:1px}
.la-systems p{margin:0;color:#3E4658;text-align:left;
  font-size:clamp(10.5px,.78vw,13.5px);line-height:1.55}

@media (max-width:1000px){ .la-systems{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .la-systems{grid-template-columns:1fr} }

/* ---- block 4: six benefit icons ------------------------------------------ */
.la-benlead{margin:clamp(6px,.7vw,11px) 0 clamp(10px,1.1vw,18px)!important;
  color:var(--blue)!important;font-weight:800;
  font-size:clamp(12px,.88vw,15px)!important}
.la-sixup{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,1fr);gap:0}
.la-sixup li{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(7px,.8vw,13px);padding:0 clamp(6px,.8vw,15px) clamp(11px,1.2vw,20px);
  border-left:1px solid var(--line);position:relative}
.la-sixup li:first-child{border-left:0}
.la-sixup img{width:clamp(34px,3.2vw,54px);height:auto;display:block}
.la-sixup b{font-weight:800;color:var(--blue);
  font-size:clamp(9.5px,.76vw,13px);line-height:1.35}
/* gold rule under each label, as in the design */
.la-sixup li::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:clamp(30px,3vw,50px);height:3px;background:var(--gold);border-radius:2px}

@media (max-width:1000px){
  .la-sixup{grid-template-columns:repeat(3,1fr);row-gap:clamp(14px,1.6vw,26px)}
  .la-sixup li:nth-child(3n+1){border-left:0}
}
@media (max-width:560px){
  .la-sixup{grid-template-columns:repeat(2,1fr)}
  .la-sixup li:nth-child(3n+1){border-left:1px solid var(--line)}
  .la-sixup li:nth-child(2n+1){border-left:0}
}

/* block 6 uses the same list but with inline SVG icons and five items */
.la-sixup-sm{grid-template-columns:repeat(5,1fr)}
.la-sixup-sm li::after{width:clamp(24px,2.4vw,40px)}
.la-sic{width:clamp(30px,2.9vw,48px);height:clamp(30px,2.9vw,48px);flex:none;
  color:var(--blue);display:grid;place-items:center}
.la-sic svg{width:100%;height:100%;display:block}
@media (max-width:1000px){
  .la-sixup-sm{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .la-sixup-sm{grid-template-columns:repeat(2,1fr)}
}

/* block 6 energy icons: sliced artwork */
.la-eic{width:clamp(28px,2.7vw,46px);height:auto;display:block;flex:none}
.la-sixup-sm li{gap:6px}

/* ==========================================================================
   Mobile minimums for the LA Roofing section. Google flags body text under
   12px; these lift the small labels without touching the desktop sizing.
   ========================================================================== */
@media (max-width:1100px){
  .lam-benefits b,.lam-benefits span:last-child{font-size:12px!important}
  .lam-feats b,.lam-feats span{font-size:12px!important}
  .lam-phone-txt b{font-size:11.5px!important}
  .lam-cta{min-height:48px;font-size:12.5px!important}
  .la-sixup b{font-size:12px!important}
  .la-checks li{font-size:13px!important}
  .la-systems h3{font-size:13px!important}
  .la-systems p{font-size:12.5px!important}
  .la-body p,.la-intro,.la-final p{font-size:13.5px!important}
  .la-bar li{font-size:12px!important}
  .la-h,.la-systems h3{line-height:1.25}
  /* numeral badges: keep them legible rather than shrinking with the heading */
  .la-num{font-size:12px!important;width:24px!important;height:24px!important}
  .la-chev,.lam-chev{font-size:15px!important;width:22px!important;height:22px!important}
}

/* closing CTA: supplied artwork, clickable, full width */
.la-ctabanner{display:block;margin:clamp(16px,2vw,34px) 0 clamp(10px,1.2vw,20px);
  border-radius:10px;overflow:hidden;line-height:0;
  transition:transform .15s ease,box-shadow .15s ease}
.la-ctabanner img{display:block;width:100%;height:auto}
.la-ctabanner:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(6,21,96,.22)}
.la-ctabanner:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---- blocks 10 + 11: LA Roofing SEO content and About Los Angeles -------- */
.la-seo,.la-about{margin-top:clamp(20px,2.3vw,40px)}
.la-seo-grid,.la-about-grid{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(14px,1.9vw,36px);align-items:start}
.la-seo h3,.la-about h3{margin:clamp(14px,1.6vw,28px) 0 clamp(6px,.7vw,11px);
  font-weight:900;text-transform:uppercase;color:var(--blue);line-height:1.22;
  font-size:clamp(12px,.98vw,17px);position:relative;padding-left:clamp(11px,1vw,16px)}
.la-seo h3::before,.la-about h3::before{content:"";position:absolute;left:0;top:.14em;bottom:.14em;
  width:4px;border-radius:2px;background:var(--gold)}
.la-seo-col > h3:first-child,.la-about-side > h3:first-child{margin-top:0}
.la-seo p,.la-about p{margin:0 0 clamp(9px,.95vw,15px);color:#3E4658;
  font-size:clamp(12.5px,.9vw,15.5px);line-height:1.66}
.la-seo b,.la-about b{color:var(--blue);font-weight:800}
.la-seo .la-checks li b{color:var(--blue)}

/* side panels */
.la-seo-side,.la-about-side{background:#F4F6FA;border:1px solid var(--line);
  border-top:5px solid var(--gold);border-radius:11px;
  padding:clamp(12px,1.3vw,22px);position:sticky;top:clamp(84px,7vw,110px)}
.la-about-side{position:static}
.la-seo-note{font-size:clamp(10.5px,.76vw,12.5px)!important;color:#5A6472!important;
  line-height:1.5!important}

/* figure lists */
.la-life,.la-facts{list-style:none;margin:clamp(8px,.9vw,14px) 0;padding:0;display:grid;gap:0}
.la-life li,.la-facts li{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:8px;align-items:baseline;padding:clamp(6px,.65vw,10px) 0;
  border-bottom:1px solid var(--line)}
.la-life li:last-child,.la-facts li:last-child{border-bottom:0}
.la-life b,.la-facts b{color:var(--blue);font-weight:800;
  font-size:clamp(11px,.8vw,13.5px);line-height:1.3}
.la-life span,.la-facts span{color:#3E4658;text-align:right;font-weight:700;
  font-size:clamp(10.5px,.76vw,12.5px);line-height:1.3}
.la-life em{display:block;font-style:normal;font-weight:600;color:#5A6472;
  font-size:.88em}
.la-facts li{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}

@media (max-width:1000px){
  .la-seo-grid,.la-about-grid{grid-template-columns:1fr}
  .la-seo-side{position:static}
}
@media (max-width:560px){
  .la-life li,.la-facts li{grid-template-columns:1fr;gap:2px}
  .la-life span,.la-facts span{text-align:left}
}

/* link on to the full LA Roofing guide */
.la-more{margin:clamp(12px,1.4vw,22px) 0 0;text-align:center}
.la-more a{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--blue);
  border-radius:9px;padding:clamp(10px,1.1vw,17px) clamp(16px,1.8vw,30px);font-weight:900;
  text-transform:uppercase;font-size:clamp(10.5px,.78vw,13.5px);min-height:48px;
  transition:filter .15s ease,transform .15s ease}
.la-more a:hover{filter:brightness(1.05);transform:translateY(-1px)}