/* ===========================================================================
   Components: the pieces the PHP renderers print (inc/render.php) — contact
   details, the calculator, the article cards, breadcrumbs, the form stand-in
   — plus the reviews and the article template.

   Every selector starts with `.dl` (the body class): the Elementor kit styles
   bare elements at (0,1,1), and `.dl .x` wins that tie on any site.
   =========================================================================== */

/* ----------------------------------------------------------- breadcrumbs */

.dl .crumbs-nav ol{display:flex;flex-wrap:wrap;gap:.2rem .55rem;margin:0;padding:0;list-style:none;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.dl .crumbs-nav li{display:inline-flex;align-items:center;gap:.55rem;color:var(--on-dark-3)}
.dl .crumbs-nav li + li::before{content:"/";color:var(--gold)}
.dl .crumbs-nav a{color:var(--on-dark-2);text-decoration:none}
.dl .crumbs-nav a:hover{color:var(--gold)}
.dl .crumbs-nav [aria-current]{color:var(--on-dark)}
body .elementor .elementor-widget.crumbs{margin-bottom:1.6rem}
.dl .page-head .crumbs-nav{margin-bottom:1.4rem}

/* ---------------------------------------------------------------- contact */

.dl .contact{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.dl .contact-item{display:flex;gap:1rem;align-items:flex-start}
.dl .contact-ico{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;border-radius:12px;background:var(--navy);color:var(--gold)}
.dl .contact-ico .ico{width:21px;height:21px}
.dl .contact-body{min-width:0}
.dl .contact-k{margin:0 0 .1rem;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.dl .contact-v{margin:0;font-family:var(--font-display);font-size:1.45rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.dl .contact-v a{color:var(--text);text-decoration:none}
.dl .contact-v a:hover{color:var(--navy)}
.dl .contact-s{margin:.15rem 0 0;font-size:.88rem;color:var(--muted)}
.dl :is(.sec-stout,.sec-navy) .contact-ico{background:var(--gold);color:var(--stout)}
.dl :is(.sec-stout,.sec-navy) .contact-k{color:var(--gold)}
.dl :is(.sec-stout,.sec-navy) .contact-v a{color:var(--white)}
.dl :is(.sec-stout,.sec-navy) .contact-s{color:var(--on-dark-3)}
/* cards (Contact page) */
.dl .contact-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.dl .contact-cards .contact-item{flex-direction:column;gap:.9rem;padding:1.8rem 1.6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);position:relative;overflow:hidden}
.dl .contact-cards .contact-item::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--amber))}
.dl .contact-cards .link-arrow{margin-top:.8rem}
@media (max-width:1024px){ .dl .contact-cards{grid-template-columns:1fr} }
/* footer */
.dl .contact-footer{gap:.9rem}
.dl .contact-footer .contact-ico{width:38px;height:38px;border-radius:10px;background:rgba(254,194,43,.12);color:var(--gold)}
.dl .contact-footer .contact-ico .ico{width:17px;height:17px}
.dl .contact-footer .contact-k{color:var(--on-dark-3)}
.dl .contact-footer .contact-v{font-size:1.15rem}
.dl .contact-footer .contact-v a{color:var(--white)}
.dl .contact-footer .contact-v a:hover{color:var(--gold)}

/* -------------------------------------------------------------- the forms */

body .elementor .form-card > .elementor-widget-wrap{
  padding:clamp(1.5rem, 1rem + 2vw, 2.6rem);background:var(--paper);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);border-top:5px solid var(--gold);
}
body .elementor .form-card-title .elementor-heading-title{font-size:clamp(1.6rem, 1.3rem + 1vw, 2.2rem);text-transform:uppercase;color:var(--text)}
body .elementor .form-card:has(.form-fallback){align-self:flex-start}
body .elementor .sec-form .form-copy .elementor-widget-shortcode{margin-top:.6rem}
.dl .form-fallback{padding:.4rem 0 0}
.dl .form-fallback-admin{margin:0 0 1.1rem;padding:.75rem .95rem;border-left:3px solid var(--navy);background:var(--mist);font-size:.88rem;color:var(--text-2)}
.dl .form-fallback-text{margin:0 0 1.4rem;font-size:1.15rem;line-height:1.55;color:var(--text)}
.dl .form-fallback-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}

/* "what happens next" */
.dl .next-steps{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem;counter-reset:nx}
.dl .next-steps li{counter-increment:nx;position:relative;padding-left:3.2rem;min-height:2.4rem}
.dl .next-steps li::before{content:counter(nx,decimal-leading-zero);position:absolute;left:0;top:-.1rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border-radius:50%;background:var(--navy);color:var(--gold);font-family:var(--font-mono);font-size:.8rem;font-weight:600}
.dl .next-steps strong{display:block;color:var(--text);font-family:var(--font-display);font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em}
.dl .next-steps span{color:var(--text-2)}

/* ------------------------------------------------------------- calculator */

.dl .calc{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(1.3rem, 1rem + 1.6vw, 2.2rem);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),var(--stout-2);
  border:1px solid var(--line-dark-strong);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
  color:var(--on-dark);
}
.dl .calc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bubbles) 0 0 / 380px auto;opacity:.5;pointer-events:none}
.dl .calc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;margin-bottom:1.3rem;padding-bottom:1rem;border-bottom:1px dashed var(--line-dark-strong)}
.dl .calc-k{font-family:var(--font-display);font-size:1.6rem;font-weight:800;text-transform:uppercase;color:var(--white);letter-spacing:.02em}
.dl .calc-note{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.dl .calc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem 1rem}
.dl .calc-grid .calc-field{grid-column:span 2}
.dl .calc-grid .calc-field.calc-half{grid-column:span 3}
.dl .calc-field{display:grid;gap:.35rem;min-width:0}
.dl .calc-l{font-size:.82rem;font-weight:500;color:var(--on-dark-2)}
.dl .calc-in{position:relative;display:flex;align-items:center}
.dl .calc input[type=number],.dl .calc select{
  min-height:48px;background:rgba(9,10,32,.6);border:1px solid var(--line-dark-strong);color:var(--white);
  font-family:var(--font-mono);font-size:1.05rem;font-weight:600;border-radius:var(--r-sm);
}
.dl .calc select{font-family:var(--font-text);font-size:.95rem;font-weight:500}
.dl .calc select option{color:var(--text);background:var(--paper)}
.dl .calc input:focus-visible,.dl .calc select:focus-visible{outline-color:var(--gold);border-color:var(--gold)}
.dl .calc-u{position:absolute;right:.85rem;font-family:var(--font-mono);font-size:.85rem;color:var(--on-dark-3);pointer-events:none}
.dl .calc-field:has(.calc-u) input{padding-right:2.4rem}
.dl .calc-u.calc-pre{right:auto;left:.9rem}
.dl .calc-field:has(.calc-pre) input{padding-left:1.9rem;padding-right:.9rem}
.dl .calc-range{grid-column:1 / -1}
.dl .calc-loss-v{float:right;font-family:var(--font-mono);font-weight:600;color:var(--gold)}
.dl .calc input[type=range]{
  --fill:33%;-webkit-appearance:none;appearance:none;width:100%;height:8px;margin:.6rem 0 .2rem;border-radius:99px;cursor:pointer;
  background:linear-gradient(90deg,var(--gold) 0 var(--fill),rgba(255,255,255,.14) var(--fill) 100%);
}
.dl .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--white);border:5px solid var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.dl .calc input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--white);border:5px solid var(--gold)}
.dl .calc-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.4rem}
.dl .calc-r{display:grid;gap:.2rem;padding:.9rem 1rem;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid var(--line-dark)}
.dl .calc-rk{font-size:.74rem;color:var(--on-dark-3)}
.dl .calc-rv{font-family:var(--font-display);font-size:1.7rem;font-weight:800;line-height:1;color:var(--white)}
.dl .calc-big{grid-column:1 / -1;grid-template-columns:1fr auto;align-items:center;
  background-color:var(--gold);background-image:linear-gradient(100deg,var(--gold),var(--amber));border:0}
.dl .calc-big .calc-rk{font-family:var(--font-display);font-size:1.15rem;font-weight:700;text-transform:uppercase;color:var(--stout)}
.dl .calc-big .calc-rv{font-size:clamp(2.2rem, 1.6rem + 2vw, 3.2rem);color:var(--stout)}
.dl .calc-fine{margin:1rem 0 0;font-size:.8rem;line-height:1.5;color:var(--on-dark-3)}
@media (max-width:600px){
  .dl .calc-grid{grid-template-columns:1fr}
  .dl .calc-grid .calc-field,.dl .calc-grid .calc-field.calc-half{grid-column:auto}
  .dl .calc-results{grid-template-columns:1fr 1fr}
  .dl .calc-big{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- articles */

.dl .articles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dl-gap)}
@media (max-width:1024px){ .dl .articles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .dl .articles{grid-template-columns:1fr} }
.dl .article-card{
  position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.8rem 1.6rem 1.6rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.dl .article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--gold)}
.dl .article-card:focus-within{border-color:var(--navy)}
.dl .article-n{position:absolute;right:1.2rem;top:.9rem;font-family:var(--font-display);font-size:3.2rem;font-weight:800;line-height:1;color:var(--mist)}
.dl .article-meta{margin:0;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.dl .article-title{margin:0;padding-right:3.4rem;font-size:1.55rem;font-weight:800;line-height:1.05;text-transform:uppercase;position:relative}
.dl .article-title a{color:var(--text);text-decoration:none}
.dl .article-title a::after{content:"";position:absolute;inset:-6rem -2rem -10rem -2rem}   /* the whole card is the link */
.dl .article-ex{margin:0;font-size:.95rem;color:var(--text-2);flex:1}
.dl .article-more{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.dl .article-more .ico{width:18px;height:18px;transition:transform .2s var(--ease)}
.dl .article-card:hover .article-more .ico{transform:translateX(4px)}
.dl .articles-none{text-align:center;color:var(--muted)}

/* ---------------------------------------------------------------- reviews */

body .elementor .reviews{column-count:2;column-gap:var(--dl-gap);max-width:1080px;margin-inline:auto}
@media (max-width:767px){ body .elementor .reviews{column-count:1} }
.dl .review{
  break-inside:avoid;margin:0 0 var(--dl-gap);padding:1.7rem 1.7rem 1.5rem;position:relative;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);
}
.dl .review::before{content:"\201C";position:absolute;right:1.2rem;top:-.4rem;font-family:var(--font-display);font-size:6rem;font-weight:800;line-height:1;color:var(--gold);opacity:.5}
.dl .review p{margin:0 0 1rem;color:var(--text);font-size:1.02rem;line-height:1.65}
.dl .review p.review-stars{display:inline-block;margin:0 0 1rem;padding:.25rem .7rem;border-radius:var(--pill);background:var(--navy);color:var(--gold);letter-spacing:.18em;font-size:.9rem;line-height:1.4}
.dl .review footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;padding-top:.9rem;border-top:1px solid var(--line)}
.dl .review cite{font-style:normal;font-family:var(--font-display);font-size:1.2rem;font-weight:700;text-transform:uppercase;color:var(--text)}
.dl .review footer span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* --------------------------------------------------------- article template */

.dl .page-head-article h1{max-width:24ch;font-size:clamp(2.3rem, 1.6rem + 3vw, 4.4rem)}
.dl .article-head-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:1.2rem 0 0;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3)}
.dl .article-head-meta span + span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:1.2rem;border-radius:50%;background:var(--gold);vertical-align:2px}
.dl .article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem, 4vw, 4.5rem);align-items:start}
@media (max-width:1024px){ .dl .article-grid{grid-template-columns:1fr} }
.dl .article-body{margin:0;max-width:none}
.dl .article-lede{font-size:var(--fs-lede);line-height:1.55;color:var(--text);padding-bottom:1.4rem;margin-bottom:1.6rem;border-bottom:2px solid var(--gold)}
.dl .article-side{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:1rem}
@media (max-width:1024px){ .dl .article-side{position:static} }
.dl .side-card{padding:1.4rem;border-radius:var(--r);background:var(--foam);border:1px solid var(--line)}
.dl .side-k{margin:0 0 .8rem;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.dl .side-links{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.dl .side-links a{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:var(--r-sm);color:var(--text);text-decoration:none;font-weight:500;line-height:1.3}
.dl .side-links a:hover{background:var(--paper);color:var(--navy)}
.dl .side-links .ico{width:30px;height:30px;padding:6px;border-radius:8px;background:var(--navy);color:var(--gold)}
.dl .side-cta{background:var(--glow-navy),var(--stout);color:var(--on-dark-2);border:0}
.dl .side-cta .side-k{color:var(--gold)}
.dl .side-h{margin:0 0 1rem;font-family:var(--font-display);font-size:1.7rem;font-weight:800;line-height:1;text-transform:uppercase;color:var(--white)}
.dl .side-cta .btn{width:100%}
.dl .side-tel{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.8rem;color:var(--white);text-decoration:none;font-weight:600}
.dl .side-tel .ico{color:var(--gold)}
.dl .more-articles{padding:var(--section-y) 0;background:var(--foam)}
