/* ============================================================
   TILE ROOFING page  (Tile-Roofing.html)
   Built from the 941x1672 comp. Every desktop size is in cqw of the
   page, so 1 comp px = 0.10627cqw and the page scales like the comp.
   Plates cut from the comp, text cleared and set live:
     images/tile-hero.jpg   comp y0-445    (1882x890)
     images/tile-cta.jpg    comp y1383-1606 (1882x446)
     images/tile-style-*.jpg  swatches, labels cleared
     images/tile-why-home.jpg comp x418-941 y772-1108
   ============================================================ */
.tile2page{--tl-bg:#f4f8fd;}

/* Header: same nav, logo and call button as the rest of the site, sized to the
   same slot the shingle/metal heroes paint (aa-shingle.css .shinglepage rules),
   so the top of the page reads the same everywhere. The hero plate carries no
   painted logo or phone, so the live ones show; a soft scrim keeps the white
   nav legible over the light top of the plate. */
@media (min-width:1001px){

  .tl-hero .layer::before{
    content:"";position:absolute;left:0;right:0;top:0;height:19%;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,42,91,.5),rgba(11,42,91,.16) 62%,rgba(11,42,91,0));
  }
}

/* ---------- shared type ---------------------------------- */
.tl-eyebrow{
  margin:0;font-family:var(--ui);font-weight:800;color:var(--red);
  font-size:1.2cqw;letter-spacing:.08em;line-height:1;
  display:flex;align-items:center;gap:.95cqw;
}
.tl-eyebrow::before{content:"";display:block;width:3.9cqw;height:.24cqw;background:var(--red);flex:0 0 auto;}
.tl-center{text-align:center;justify-content:center;}
.tl-h2{
  margin:0;font-family:var(--ui);font-weight:900;color:var(--navy);
  font-size:3.6cqw;line-height:1.02;letter-spacing:-.025em;
  transform:scaleX(.88);
}
.tl-center.tl-h2{transform-origin:center top;}
.tl-why .tl-h2{transform-origin:left top;}
.tl-h2 span{color:var(--red);}
.tl-sub{margin:0;font-family:var(--ui);font-weight:400;color:var(--navy);font-size:1.4cqw;line-height:1.3;}

/* ---------- hero ---------------------------------------- */
.tl-hero{background:#fff;}
.tl-hero .layer{color:var(--navy);}
.tl-hero-eb{left:4.25cqw;top:13.1cqw;}
.tl-h1{
  left:3.95cqw;top:14.55cqw;margin:0;white-space:nowrap;
  font-family:var(--ui);font-weight:900;font-size:7.35cqw;line-height:.86;
  letter-spacing:-.035em;word-spacing:.14em;color:var(--navy);transform:scaleX(.835);transform-origin:left top;
}
.tl-h1 span{color:var(--red);}
.tl-hero-sub{
  left:4.2cqw;top:21.75cqw;margin:0;white-space:nowrap;
  font-family:var(--ui);font-weight:700;font-size:2.5cqw;line-height:1;letter-spacing:-.01em;color:var(--navy);
}
.tl-hero-p{
  left:4.2cqw;top:25.2cqw;width:47cqw;margin:0;
  font-family:var(--ui);font-weight:400;font-size:1.56cqw;line-height:1.26;color:var(--navy);
}
.tl-feats{
  left:1.2cqw;top:35.3cqw;margin:0;padding:0;list-style:none;display:flex;
}
.tl-feats li{
  width:11.4cqw;display:flex;flex-direction:column;align-items:center;gap:1.05cqw;
  border-left:.1cqw solid rgba(11,42,91,.22);
}
.tl-feats li:first-child{border-left:0;}
.tl-feats svg{width:3.5cqw;height:3.5cqw;fill:var(--navy);color:var(--navy);}
.tl-feats b{
  font-family:var(--ui);font-weight:800;font-size:1.08cqw;line-height:1.2;
  text-align:center;color:var(--navy);letter-spacing:-.01em;
}

/* ---------- styles -------------------------------------- */
.tl-styles{background:#fff;padding:1.9cqw 0 1cqw;}
.tl-styles .tl-h2{margin-top:1cqw;}
.tl-styles .tl-sub{margin-top:.7cqw;}
.tl-cards{
  list-style:none;margin:2cqw 2.45cqw 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.8cqw;
}
.tl-cards li{
  position:relative;border-radius:.5cqw;overflow:hidden;line-height:0;
  box-shadow:0 .25cqw .8cqw rgba(7,27,61,.18);
}
.tl-cards img{display:block;width:100%;height:auto;}
.tl-cards li::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(180deg,rgba(11,42,91,0) 0%,rgba(11,42,91,.88) 48%,#0B2A5B 100%);
}
.tl-cards b{
  position:absolute;left:0;right:0;bottom:1.25cqw;z-index:1;text-align:center;
  font-family:var(--ui);font-weight:800;font-size:1.5cqw;line-height:1;color:#fff;letter-spacing:-.01em;
}

/* ---------- why ------------------------------------------ */
.tl-why{
  background:#fff;display:grid;grid-template-columns:44.4cqw 1fr;align-items:start;
  padding-top:1.2cqw;
}
.tl-why-copy{padding:.9cqw 0 0 3.6cqw;}
.tl-why .tl-eyebrow{font-size:1.15cqw;}
.tl-why .tl-h2{margin-top:1.1cqw;font-size:3.75cqw;line-height:1.02;white-space:nowrap;}
.tl-why-p{
  margin:1.3cqw 0 0;max-width:none;white-space:nowrap;font-family:var(--ui);font-size:1.52cqw;line-height:1.2;color:var(--navy);
}
.tl-checks{list-style:none;margin:2cqw 0 0;padding:0;}
.tl-checks li{
  position:relative;padding-left:3.05cqw;margin-bottom:1.15cqw;
  font-family:var(--ui);font-size:1.55cqw;line-height:1.15;color:var(--navy);
}
.tl-checks li::before{
  content:"";position:absolute;left:0;top:50%;width:2cqw;height:2cqw;margin-top:-1cqw;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;
}
.tl-why-img{display:block;width:100%;height:auto;}

/* ---------- process -------------------------------------- */
.tl-proc{background:var(--tl-bg);margin-top:1cqw;padding:2.2cqw 0 2.2cqw;}
.tl-proc .tl-h2{margin-top:1cqw;}
.tl-proc .tl-sub{margin-top:.7cqw;}
.tl-steps{
  list-style:none;margin:2cqw 3.1cqw 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.tl-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;}
.tl-steps li + li::before{
  content:"";position:absolute;left:-.6cqw;top:3.2cqw;width:1cqw;height:1cqw;
  border-right:.22cqw solid #5d6f8f;border-top:.22cqw solid #5d6f8f;transform:rotate(45deg);
}
.tl-steps i{
  width:7.2cqw;height:7.2cqw;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 .3cqw 1.1cqw rgba(11,42,91,.16);
}
.tl-steps svg{width:4.1cqw;height:4.1cqw;fill:var(--navy);color:var(--navy);}
.tl-steps b{
  margin-top:1.3cqw;font-family:var(--ui);font-weight:800;font-size:1.36cqw;line-height:1.25;color:var(--navy);
}
.tl-steps span{margin-top:.35cqw;font-family:var(--ui);font-size:1.18cqw;line-height:1.3;color:var(--navy);}

/* ---------- CTA ----------------------------------------- */
.tl-cta .layer{color:#fff;}
.tl-cta .layer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,26,60,.8) 0%,rgba(8,26,60,.6) 38%,rgba(8,26,60,0) 62%);
}
.tl-cta .ov{z-index:1;}
.tl-cta-eb{left:4.25cqw;top:8.1cqw;color:#fff;}
.tl-cta-eb::before{background:var(--red);}
.tl-cta-h{
  left:4.1cqw;top:10.05cqw;margin:0;white-space:nowrap;
  font-family:var(--ui);font-weight:900;font-size:4.28cqw;line-height:1.02;letter-spacing:-.035em;color:#fff;
  transform:scaleX(.83);transform-origin:left top;
}
.tl-cta-h span{color:var(--red);}
.tl-cta-p{left:4.2cqw;top:18.8cqw;margin:0;font-family:var(--ui);font-size:1.55cqw;color:#fff;white-space:nowrap;}
.tl-cta-btn{
  left:64.5cqw;top:11.6cqw;width:31.4cqw;height:5.9cqw;
  display:flex;align-items:center;justify-content:center;gap:1.45cqw;text-decoration:none;
  background:linear-gradient(180deg,#e8202b,#c8102e);color:#fff;border-radius:.45cqw;
  box-shadow:0 .3cqw 1cqw rgba(0,0,0,.35);
  font-family:var(--ui);font-weight:800;font-size:1.7cqw;letter-spacing:-.01em;
}
.tl-cta-btn:hover{background:var(--red-dark);}
.tl-cta-btn svg{fill:#fff;flex:0 0 auto;}
.tl-cta-btn .cal{width:2.6cqw;height:2.6cqw;}
.tl-cta-btn .arr{width:1.9cqw;height:1.9cqw;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- trust strip --------------------------------- */
.tl-strip{
  list-style:none;margin:0;padding:1.9cqw 0;background:linear-gradient(90deg,var(--tl-bg),#fff 50%,var(--tl-bg));
  display:flex;justify-content:center;
}
.tl-strip li{
  display:flex;align-items:center;gap:1.35cqw;padding:0 4.3cqw;
  font-family:var(--ui);font-weight:600;font-size:1.3cqw;color:var(--navy);
}
.tl-strip li + li{border-left:.1cqw solid rgba(11,42,91,.22);}
.tl-strip svg{width:2.6cqw;height:2.6cqw;fill:var(--navy);}

/* ============ MOBILE (<=1000px) ============================
   Plates stay; overlay copy drops below them into the flow. */
@media (max-width:1000px){
  .tl-hero .layer,.tl-cta .layer{position:static;padding:22px 18px 24px;}
  .tl-hero .ov,.tl-cta .ov{position:static;transform:none;white-space:normal;}
  .tl-hero .layer{background:#fff;}
  .tl-cta{background:#0B2A5B;}
  .tl-cta .layer::before{display:none;}

  .tl-eyebrow{font-size:.78rem;gap:10px;}
  .tl-eyebrow::before{width:30px;height:3px;}
  .tl-h2{font-size:clamp(1.55rem,6.4vw,2.2rem);}
  .tl-sub{font-size:.95rem;padding:0 18px;}

  .tl-h1{margin-top:10px;font-size:clamp(2.6rem,12.5vw,4.2rem);line-height:.95;}
  .tl-hero-sub{margin-top:10px;font-size:1.2rem;}
  .tl-hero-p{margin-top:10px;width:auto;font-size:1rem;line-height:1.5;}
  .tl-feats{margin-top:18px;display:grid;grid-template-columns:repeat(5,1fr);}
  .tl-feats li{width:auto;gap:8px;padding:0 2px;}
  .tl-feats svg{width:28px;height:28px;}
  .tl-feats b{font-size:.6rem;}

  .tl-styles{padding:28px 0 8px;}
  .tl-styles .tl-h2{margin-top:10px;padding:0 14px;}
  .tl-styles .tl-sub{margin-top:8px;}
  .tl-cards{margin:18px 14px 0;grid-template-columns:repeat(2,1fr);gap:10px;}
  .tl-cards li{border-radius:6px;}
  .tl-cards b{font-size:.85rem;bottom:12px;}

  .tl-why{grid-template-columns:1fr;padding-top:18px;}
  .tl-why-copy{padding:10px 18px 22px;}
  .tl-why .tl-eyebrow{font-size:.78rem;}
  .tl-why .tl-h2{margin-top:10px;font-size:clamp(1.55rem,6.4vw,2.2rem);}
  .tl-why-p{margin-top:12px;font-size:1rem;line-height:1.5;}
  .tl-checks{margin-top:16px;}
  .tl-checks li{font-size:1rem;padding-left:32px;margin-bottom:12px;}
  .tl-checks li::before{width:21px;height:21px;margin-top:-10.5px;}

  .tl-proc{margin-top:0;padding:28px 0 30px;}
  .tl-proc .tl-h2{margin-top:10px;padding:0 14px;}
  .tl-proc .tl-sub{margin-top:8px;}
  .tl-steps{margin:22px 16px 0;grid-template-columns:repeat(2,1fr);gap:22px 12px;}
  .tl-steps li:last-child{grid-column:1 / -1;}
  .tl-steps li + li::before{display:none;}
  .tl-steps i{width:64px;height:64px;box-shadow:0 3px 12px rgba(11,42,91,.16);}
  .tl-steps svg{width:30px;height:30px;}
  .tl-steps b{margin-top:12px;font-size:.85rem;}
  .tl-steps span{margin-top:5px;font-size:.8rem;}

  .tl-cta-eb{color:#fff;}
  .tl-cta-h{margin-top:10px;font-size:clamp(1.8rem,8vw,2.6rem);line-height:1.05;}
  .tl-cta-p{margin-top:10px;font-size:1rem;}
  .tl-cta-btn{margin-top:18px;width:100%;height:auto;padding:15px 12px;font-size:1rem;gap:12px;border-radius:6px;}
  .tl-cta-btn .cal{width:22px;height:22px;}
  .tl-cta-btn .arr{width:18px;height:18px;}

  .tl-strip{flex-direction:column;align-items:flex-start;padding:18px 24px;gap:12px;}
  .tl-strip li{padding:0;font-size:.9rem;gap:12px;}
  .tl-strip li + li{border-left:0;}
  .tl-strip svg{width:24px;height:24px;}
}
@media (max-width:1000px){.tile2page br.dk{display:none;}}
@media (max-width:1000px){.tl-why .tl-h2,.tl-why-p{white-space:normal;}}

/* Mobile plates: the hero shows its photo half (the left half is the cleared
   copy area); the CTA drops its plate, whose right side has the painted button,
   and uses the left roof as a tinted backdrop behind the live copy. */
@media (max-width:1000px){
  .tl-hero > img.plate{aspect-ratio:16/10;object-fit:cover;object-position:88% 40%;}
  .tl-cta > img.plate{display:none;}
  .tl-cta{background:linear-gradient(rgba(8,26,60,.86),rgba(8,26,60,.86)),url("images/tile-cta.jpg") 0 50%/auto 100% no-repeat,#0B2A5B;}
}