/* ============================================================
   TWO-COLUMN SEO GUIDE  (.tl-guide) — shared by Tile-Roofing.html
   and Insurance-Claims.html. Built from the 883x1781 tile guide comp.
   Two independent columns, left x26-426, right x464-860 of the comp.
   1 comp px = 0.11325cqw. Photos, tile cards, swatches and brand
   marks are cut from the comp; all copy is live.
   ============================================================ */
.tl-guide{
  --k:.11325cqw;
  display:grid;grid-template-columns:calc(400*var(--k)) calc(396*var(--k));
  column-gap:calc(38*var(--k));padding:calc(18*var(--k)) calc(23*var(--k)) calc(40*var(--k)) calc(26*var(--k));
  background:#fff;position:relative;color:var(--navy);
}
.tl-guide::before{content:"";position:absolute;top:0;bottom:0;left:calc(445*var(--k));width:1px;background:#e9eef6;}
.tg-col{min-width:0;}
.tg-eb{
  margin:0;display:flex;align-items:center;gap:calc(12*var(--k));
  font-family:var(--ui);font-weight:800;font-size:calc(10.5*var(--k));letter-spacing:.04em;line-height:1;color:var(--navy);
}
.tg-eb::before{content:"";width:calc(30*var(--k));height:calc(2.5*var(--k));background:var(--red);}
.tg-h1{
  margin:calc(12*var(--k)) 0 0;font-family:var(--display);font-weight:700;
  font-size:calc(46*var(--k));line-height:1;letter-spacing:-.01em;color:var(--navy);white-space:nowrap;
}
.tg-h1 span{color:var(--red);}
.tg-tag{
  margin:calc(9*var(--k)) 0 0;font-family:var(--display);font-weight:700;
  font-size:calc(16*var(--k));line-height:1.1;color:var(--navy);
}
.tg-p{
  margin:calc(13*var(--k)) 0 0;font-family:var(--ui);font-weight:400;
  font-size:calc(12.6*var(--k));line-height:1.3;color:var(--navy);
}
.tg-tight{margin-top:calc(6*var(--k));}
.tg-photo{display:block;width:100%;height:auto;margin-top:calc(12*var(--k));border-radius:calc(3*var(--k));}
.tg-h2{
  margin:calc(20*var(--k)) 0 0;display:flex;align-items:center;gap:calc(12*var(--k));
  font-family:var(--display);font-weight:700;font-size:calc(18.6*var(--k));line-height:1.1;
  letter-spacing:-.005em;color:var(--navy);
}
.tg-h2::before{content:"";flex:0 0 auto;width:calc(30*var(--k));height:calc(2.5*var(--k));background:var(--red);}
.tg-h2.tg-first{margin-top:calc(-4*var(--k));}

.tg-icons{list-style:none;margin:calc(16*var(--k)) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);}
.tg-icons li{
  display:flex;flex-direction:column;align-items:center;gap:calc(7*var(--k));
  border-left:1px solid #dfe5ee;padding:calc(2*var(--k)) 0;
}
.tg-icons li:first-child{border-left:0;}
.tg-icons svg{width:calc(42*var(--k));height:calc(42*var(--k));fill:var(--navy);color:var(--navy);}
.tg-icons b{
  font-family:var(--display);font-weight:700;font-size:calc(11*var(--k));line-height:1.25;
  text-align:center;color:var(--navy);letter-spacing:.01em;
}

.tg-types{list-style:none;margin:calc(17*var(--k)) 0 0;padding:0;display:grid;gap:calc(9.5*var(--k));}
.tg-types > li{
  display:grid;grid-template-columns:calc(180*var(--k)) 1fr;background:#f3f8fd;
  border-radius:calc(3*var(--k));overflow:hidden;
}
.tg-types > li > img{display:block;width:100%;height:100%;object-fit:cover;}
.tg-types > li > div{padding:calc(6*var(--k)) calc(12*var(--k)) calc(8*var(--k)) calc(21*var(--k));display:flex;flex-direction:column;}
.tg-types h4{
  margin:0;font-family:var(--display);font-weight:700;font-size:calc(18.5*var(--k));line-height:1.2;color:var(--navy);
}
.tg-types p{margin:calc(3*var(--k)) 0 0;font-family:var(--ui);font-size:calc(13.2*var(--k));line-height:1.22;color:var(--navy);}
.tg-brand{display:block;margin:auto auto 0;height:auto;}
.tg-types li:nth-child(1) .tg-brand{width:calc(100*var(--k));margin-top:calc(2*var(--k));}
.tg-types li:nth-child(2) .tg-brand{width:calc(134*var(--k));margin-bottom:calc(6*var(--k));}
.tg-types li:nth-child(3) .tg-brand{width:calc(141*var(--k));}
.tg-types li:nth-child(4) .tg-brand{width:calc(120*var(--k));margin-bottom:calc(3*var(--k));}

.tg-colors{
  list-style:none;margin:calc(11*var(--k)) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);column-gap:calc(12*var(--k));row-gap:calc(13*var(--k));
}
.tg-colors li{
  display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--k));
  font-family:var(--ui);font-size:calc(10*var(--k));line-height:1.1;color:var(--navy);text-align:center;
}
.tg-colors img{display:block;width:100%;height:auto;border-radius:calc(2*var(--k));}
.tg-colors + .tg-photo{margin-top:calc(18*var(--k));}

.tg-cta{
  margin-top:calc(18*var(--k));background:#f3f8fd;border-radius:calc(4*var(--k));
  padding:calc(18*var(--k)) calc(22*var(--k)) calc(24*var(--k)) calc(20*var(--k));
  display:grid;grid-template-columns:calc(64*var(--k)) 1fr;column-gap:calc(18*var(--k));align-items:center;
}
.tg-house{width:calc(64*var(--k));height:calc(64*var(--k));fill:var(--navy);align-self:start;margin-top:calc(8*var(--k));}
.tg-cta b{display:block;font-family:var(--ui);font-weight:800;font-size:calc(11*var(--k));letter-spacing:.01em;color:var(--navy);}
.tg-cta p{margin:calc(5*var(--k)) 0 0;font-family:var(--ui);font-size:calc(12*var(--k));line-height:1.36;color:var(--navy);}
.tg-btn{
  grid-column:1 / -1;margin-top:calc(14*var(--k));justify-self:center;width:calc(352*var(--k));height:calc(43*var(--k));
  display:flex;align-items:center;justify-content:center;gap:calc(12*var(--k));text-decoration:none;
  background:linear-gradient(180deg,#e41b25,#c8102e);color:#fff;border-radius:calc(3*var(--k));
  font-family:var(--ui);font-weight:800;font-size:calc(15*var(--k));letter-spacing:.01em;
  box-shadow:0 calc(2*var(--k)) calc(6*var(--k)) rgba(200,16,46,.3);
}
.tg-btn:hover{background:var(--red-dark);}
.tg-btn svg{width:calc(16*var(--k));height:calc(16*var(--k));fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

.tg-trust{list-style:none;margin:calc(30*var(--k)) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);}
.tg-trust li{
  display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--k));
  border-left:1px solid #dfe5ee;padding:calc(4*var(--k)) 0;
}
.tg-trust li:first-child{border-left:0;}
.tg-trust svg{width:calc(36*var(--k));height:calc(36*var(--k));fill:var(--navy);}
.tg-trust b{font-family:var(--display);font-weight:700;font-size:calc(11*var(--k));line-height:1.3;text-align:center;color:var(--navy);}

@media (max-width:1000px){
  .tl-guide{--k:.9px;grid-template-columns:1fr;padding:28px 18px 34px;}
  .tl-guide::before{display:none;}
  .tg-col + .tg-col{margin-top:30px;padding-top:26px;border-top:1px solid #e6ecf4;}
  .tg-h1{font-size:clamp(2.1rem,10vw,2.8rem);white-space:normal;}
  .tg-tag{font-size:1.15rem;}
  .tg-p{font-size:1rem;line-height:1.55;}
  .tg-h2{font-size:1.3rem;align-items:flex-start;}
  .tg-h2::before{margin-top:.6em;}
  .tg-icons b,.tg-trust b{font-size:.72rem;}
  .tg-icons svg,.tg-trust svg{width:34px;height:34px;}
  .tg-types > li{grid-template-columns:38% 1fr;}
  .tg-types h4{font-size:1.15rem;}
  .tg-types p{font-size:.92rem;line-height:1.4;}
  .tg-types li:nth-child(n) .tg-brand{margin-top:10px;}
  .tg-colors{grid-template-columns:repeat(5,1fr);column-gap:8px;row-gap:12px;}
  .tg-colors li{font-size:.66rem;}
  .tg-cta{grid-template-columns:52px 1fr;column-gap:14px;padding:18px 16px 20px;}
  .tg-house{width:52px;height:52px;}
  .tg-cta b{font-size:.82rem;}
  .tg-cta p{font-size:.95rem;}
  .tg-btn{width:100%;height:50px;font-size:1.02rem;}
}

/* ---------- additions used by the claims guide ----------------- */
.tg-checks{list-style:none;margin:calc(12*var(--k)) 0 0;padding:0;}
.tg-checks li{
  position:relative;padding-left:calc(26*var(--k));margin-top:calc(8*var(--k));
  font-family:var(--ui);font-size:calc(12.4*var(--k));line-height:1.3;color:var(--navy);
}
.tg-checks li::before{
  content:"";position:absolute;left:0;top:calc(1*var(--k));width:calc(16*var(--k));height:calc(16*var(--k));border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-7.6' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
.tg-checks b{font-weight:700;}
.tg-steps{list-style:none;margin:calc(16*var(--k)) 0 0;padding:0;display:grid;gap:calc(9*var(--k));counter-reset:tgs;}
.tg-steps li{
  display:grid;grid-template-columns:calc(46*var(--k)) 1fr;column-gap:calc(14*var(--k));align-items:start;
  background:#f3f8fd;border-radius:calc(3*var(--k));padding:calc(12*var(--k)) calc(14*var(--k)) calc(12*var(--k)) calc(12*var(--k));
}
.tg-steps li::before{
  counter-increment:tgs;content:counter(tgs);
  width:calc(46*var(--k));height:calc(46*var(--k));border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--ui);font-weight:800;font-size:calc(19*var(--k));
}
.tg-steps h4{margin:0;font-family:var(--display);font-weight:700;font-size:calc(17*var(--k));line-height:1.15;color:var(--navy);}
.tg-steps p{margin:calc(3*var(--k)) 0 0;font-family:var(--ui);font-size:calc(12.4*var(--k));line-height:1.3;color:var(--navy);}
.tg-note{
  margin-top:calc(14*var(--k));border-left:calc(4*var(--k)) solid var(--red);background:#fff5f5;
  padding:calc(10*var(--k)) calc(14*var(--k));font-family:var(--ui);font-size:calc(12.4*var(--k));line-height:1.35;color:var(--navy);
}
.tg-note b{font-weight:800;}
@media (max-width:1000px){
  .tg-checks li{font-size:1rem;padding-left:28px;}
  .tg-checks li::before{width:18px;height:18px;top:2px;}
  .tg-steps li{grid-template-columns:40px 1fr;column-gap:12px;padding:14px;}
  .tg-steps li::before{width:40px;height:40px;font-size:1.05rem;}
  .tg-steps h4{font-size:1.1rem;}
  .tg-steps p{font-size:.95rem;line-height:1.45;}
  .tg-note{font-size:.95rem;padding:12px 14px;}
}
.tg-h1.tg-h1-long{font-size:calc(35*var(--k));}
@media (max-width:1000px){.tg-h1.tg-h1-long{font-size:clamp(1.9rem,9vw,2.6rem);}}

/* Script lock-up set over a guide photo, above the painted red swoosh
   (the artwork carries the swoosh but no type, so the words are live HTML). */
.tg-stampwrap{position:relative;margin:calc(12*var(--k)) 0 0;padding:0;container-type:inline-size;}
.tg-stampwrap img{display:block;width:100%;height:auto;border-radius:calc(3*var(--k));}
.tg-stamp{
  position:absolute;right:4.2%;top:14%;width:62%;text-align:right;color:#fff;
  text-shadow:0 .25cqw .9cqw rgba(6,18,40,.65);
}
.tg-stamp i{
  display:block;font-family:"Priestacy","Kaushan Script",cursive;font-style:normal;
  font-size:9.6cqw;line-height:1;
}
.tg-stamp b{
  display:block;margin-top:1.2cqw;font-family:var(--ui);font-weight:800;
  font-size:3.1cqw;line-height:1;letter-spacing:.06em;
}
@media (max-width:1000px){
  .tg-stamp i{font-size:11cqw;}
  .tg-stamp b{font-size:3.4cqw;}
}

/* before / after pair inside a guide column */
.tg-ba{list-style:none;margin:calc(11*var(--k)) 0 0;padding:0;display:grid;grid-template-columns:260fr 283fr;column-gap:calc(7*var(--k));}
.tg-ba img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(2*var(--k));}
@media (max-width:1000px){.tg-ba{column-gap:8px;}}