/*
 * PPC landing-page hero. Loaded ONLY by the dtl_ppc_hero widget (get_style_depends), so no
 * live service or location page ever requests it.
 *
 * Taken verbatim from the design reference the client approved
 * (scottishwebdesigner.co.uk/crossborderDT/), which carried these rules in five separate
 * inline <style> blocks. THE ORDER IS LOAD-BEARING: several selectors are declared more than
 * once at equal specificity, so the later one wins and the duplicates below are the reference's
 * own overrides, not mistakes. They are kept in source order rather than merged, so the
 * rendered result is identical to what was signed off. Where a value is superseded the winning
 * declaration is noted.
 *
 * One deliberate change: the reference hard-codes the hero background as
 *   background: url("us-canada-flags-hero.webp")
 * a filename relative to the saved page. Here it reads --dtl-img, which the widget sets from an
 * Elementor media control through DTL_Widget::bg_style(), the same way every other band in this
 * plugin takes a background. Nothing else differs.
 */

.dtl .dtl-ppc-hero{background:#070c3d;color:white;padding:58px 0 42px;position:relative}
.dtl .dtl-ppc-hero:before,.dtl .dtl-ppc-hero:after{display:none}
.dtl .dtl-ppc-copy{max-width:none}
/* superseded twice below: final font-size is clamp(40px,5.1vw,69px), final margin-bottom 37px */
.dtl .dtl-ppc-hero h1{font-size:clamp(42px,5.5vw,74px);line-height:1.06;max-width:1120px;margin:0 0 22px;letter-spacing:-.035em}
.dtl .dtl-ppc-hero h1 span{color:#fffbac}
/* margin superseded below: final is margin-top 0, margin-bottom 45px */
.dtl .dtl-ppc-pain{color:#fff;font-size:22px;line-height:1.55;margin:0 0 15px;max-width:950px}
.dtl .dtl-ppc-solution{color:#cdd3ed;font-size:18px;line-height:1.65;max-width:830px;margin:0}
/* margin-top superseded below: final is 0 */
.dtl .dtl-ppc-steps{display:grid;grid-template-columns:repeat(3,1fr);background:#111a56;border:1px solid #ffffff30;border-radius:80px;overflow:hidden;margin:30px 0 27px;padding:5px 13px}
.dtl .dtl-ppc-steps>div{display:grid;grid-template-columns:38px 1fr;gap:17px;padding:23px 23px;border-right:1px solid #ffffff25}
.dtl .dtl-ppc-steps>div:last-child{border:0}
.dtl .dtl-ppc-steps>div>span{color:#fffbac;font-size:30px;font-weight:700;line-height:1.15}
.dtl .dtl-ppc-steps h2{font-family:var(--dtl-sans);font-size:19px;font-weight:700;line-height:1.25;color:white;margin:0 0 9px;letter-spacing:-.015em}
.dtl .dtl-ppc-steps p{font-size:15px;line-height:1.5;color:#ccd3ed;margin:0}
.dtl .dtl-ppc-hero .dtl-hero-where{margin-top:20px;font-size:14px;line-height:1.8}

@media(max-width:850px){
  .dtl .dtl-ppc-steps{border-radius:35px;grid-template-columns:1fr;padding:5px 0}
  .dtl .dtl-ppc-steps>div{padding:21px 27px;border-right:0;border-bottom:1px solid #ffffff25}
  .dtl .dtl-ppc-hero{padding:38px 0 30px}
  .dtl .dtl-ppc-pain{font-size:19px}
  .dtl .dtl-ppc-solution{font-size:17px}
  .dtl .dtl-ppc-hero h1{font-size:clamp(39px,7vw,60px)}
  .dtl .dtl-ppc-steps h2{font-size:19px}
}

/* the step cell and its text column must be allowed to shrink, or a long word widens the grid */
.dtl .dtl-ppc-steps section{min-width:0}
.dtl .dtl-ppc-steps>div{min-width:0}

@media(max-width:767px){
  .dtl .dtl-ppc-hero h1{overflow-wrap:break-word}
  .dtl .dtl-ppc-steps{border-radius:28px}
}

.dtl .dtl-ppc-hero .dtl-ppc-copy>h1,.dtl .dtl-ppc-hero .dtl-ppc-pain,.dtl .dtl-ppc-hero .dtl-ppc-solution{text-align:center;margin-left:auto;margin-right:auto}
.dtl .dtl-ppc-hero .dtl-btn-row{justify-content:center}
.dtl .dtl-hero-reviews{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:23px 0 0;font-size:17px;line-height:1.5;font-weight:600;color:#fff}
.dtl .dtl-review-stars{color:#f5c542;letter-spacing:3px;font-size:22px;white-space:nowrap}

/* the reference's final overrides for the headline block */
.dtl .dtl-ppc-hero h1{font-size:clamp(40px,5.1vw,69px)}
.dtl .dtl-ppc-hero h1{margin-bottom:37px}
.dtl .dtl-ppc-hero .dtl-ppc-pain{margin-top:0;margin-bottom:45px}
.dtl .dtl-ppc-hero .dtl-ppc-steps{margin-top:0}

/* background photo, washed back behind the copy */
.dtl .dtl-ppc-hero{isolation:isolate;overflow:hidden}
.dtl .dtl-ppc-hero--img::before{display:block;content:"";position:absolute;inset:0;background:var(--dtl-img) center 55%/cover no-repeat;opacity:.18;z-index:0;pointer-events:none}
.dtl .dtl-ppc-hero>.dtl-wrap{position:relative;z-index:1}