/* Phoenix Hero Carousel
   Composition rule: the slide is never shorter than the artwork's aspect
   ratio, so `cover` always scales by width and the artwork can never crop
   sideways into the text column. */

.ph-hero{
  --ph-accent:#FF5A1F;
  --ph-accent-dk:#E8490F;
  --ph-accent-ink:#D8440E;
  --ph-ink:#2E2E2E;
  --ph-ink-soft:#5D6166;
  --ph-card-bg:rgba(255,255,255,.96);
  --ph-radius:10px;
  --ph-ratio:2.5;
  --ph-maxh:800px;
  --ph-product-w:84px;
  position:relative;overflow:hidden;color:var(--ph-ink);
}
.ph-hero *,.ph-hero *::before,.ph-hero *::after{box-sizing:border-box}

.ph-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  align-items:start;                 /* each slide keeps its own height */
  transition:height .32s ease;
}
.ph-track::-webkit-scrollbar{display:none}
.ph-track:focus-visible{outline:3px solid #1B6ACB;outline-offset:-3px}

.ph-slide{scroll-snap-align:start;min-width:0;position:relative;isolation:isolate}
.ph-plate{
  position:absolute;inset:0;z-index:-1;
  background-repeat:no-repeat;background-size:cover;background-position:center right;
}
.ph-inner{
  --ph-cards-w:30%;
  --ph-pad-y:clamp(24px,2.6vw,46px);
  --ph-pad-x:clamp(18px,3.4vw,64px);
  padding:var(--ph-pad-y) var(--ph-pad-x);
  display:grid;gap:clamp(20px,2.4vw,40px);align-items:center;
  grid-template-columns:minmax(0,1fr);
  min-height:min(calc(100vw / var(--ph-ratio)),var(--ph-maxh));
}
.ph-l-pricing .ph-inner{grid-template-columns:minmax(0,1fr) minmax(0,var(--ph-cards-w))}

.ph-col-a{--ph-text-w:34%;--ph-wide-w:56%;min-width:0}
.ph-col-b{min-width:0;display:flex;flex-direction:column;gap:16px}

/* ---------- text ---------- */
.ph-headline{
  margin:0;font-weight:800;color:var(--ph-ink);letter-spacing:-.025em;
  font-size:clamp(1.95rem,3.1vw,4rem);line-height:1.06;
  max-width:var(--ph-headline-w,var(--ph-text-w));
}
.ph-hl{color:var(--ph-accent)}
.ph-sub .ph-hl,.ph-tagline .ph-hl{color:var(--ph-accent-ink);font-weight:600}
.ph-sub{margin:16px 0 0;font-size:clamp(.95rem,1.05vw,1.2rem);font-weight:500;max-width:var(--ph-sub-w,var(--ph-text-w))}
.ph-rule{display:block;width:118px;height:3px;background:var(--ph-accent);margin:22px 0 0}
.ph-tagline{margin:16px 0 0;font-size:clamp(.9rem,.93vw,1.05rem);font-weight:500;max-width:var(--ph-tagline-w,var(--ph-text-w))}

/* ---------- trust strip ---------- */
.ph-strip{
  --ph-strip-cols:4;
  background:var(--ph-card-bg);border-radius:var(--ph-radius);
  box-shadow:0 6px 22px rgba(40,25,18,.10);
  padding:16px 22px;margin-top:22px;max-width:var(--ph-wide-w);
  display:grid;grid-template-columns:repeat(var(--ph-strip-cols,4),minmax(0,1fr));
  gap:14px 20px;align-items:center;justify-content:start;
}
.ph-feat{display:flex;flex-direction:row;align-items:center;gap:var(--ph-feat-gap,11px);min-width:0}
.ph-feat-label{min-width:0}
.ph-feat .ph-ic{
  width:var(--ph-feat-ic,34px);height:var(--ph-feat-ic,34px);
  font-size:calc(var(--ph-feat-ic,34px) * .78);
  flex:none;color:var(--ph-accent);display:grid;place-items:center;
}
.ph-feat .ph-ic svg{width:1em;height:1em;fill:currentColor}
.ph-feat .ph-ic i{font-size:inherit;line-height:1}
.ph-hero .ph-feat-img{
  height:var(--ph-feat-img-h,38px) !important;
  width:auto !important;max-width:100%;object-fit:contain;flex:none;
}
.ph-feat-label{font-size:clamp(12.5px,.78vw,15px);font-weight:600;line-height:1.25}
.ph-logos{
  grid-template-columns:repeat(var(--ph-logo-cols,4),minmax(0,1fr));
  justify-items:center;align-items:center;
}
.ph-logos .ph-feat{justify-self:start}
/* each logo sits in a fixed-height box and fits inside it, so mixed
   aspect ratios (tall square vs wide wordmark) line up on one baseline */
.ph-brandbox{
  display:flex;align-items:center;justify-content:center;
  height:var(--ph-logo-h,34px);width:100%;min-width:0;
}
.ph-hero .ph-brand{
  width:100% !important;height:100% !important;
  max-width:100%;object-fit:contain;object-position:center;
}

/* ---------- pricing cards ---------- */
.ph-pcard{
  position:relative;background:#fff;border-radius:calc(var(--ph-radius) + 2px);
  box-shadow:0 6px 22px rgba(40,25,18,.10);padding:18px 20px;overflow:hidden;
}
.ph-product{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:var(--ph-product-w);height:auto;pointer-events:none;
}
.ph-pcard-in{padding-right:0}
.ph-pcard.ph-has-product .ph-pcard-in{padding-right:calc(var(--ph-product-w) + 16px)}
.ph-badge{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:6px 12px;border-radius:5px;color:#fff;background:var(--ph-ink);
}
.ph-pcard-accent .ph-badge{background:var(--ph-accent)}
.ph-warranty{margin:10px 0 0;font-size:clamp(1rem,1.3vw,1.3rem);font-weight:700;color:var(--ph-accent);letter-spacing:-.01em}
.ph-hr{display:block;border-top:1px solid #E7E3E0;margin:13px 0}
.ph-from{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--ph-ink-soft)}
.ph-price{margin:2px 0 10px;font-size:clamp(1.45rem,1.8vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ph-plist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ph-plist li{display:flex;align-items:center;gap:9px;font-size:clamp(12.5px,.75vw,14.5px);font-weight:500}
.ph-tick{
  width:var(--ph-tick,17px);height:var(--ph-tick,17px);font-size:var(--ph-tick,17px);
  flex:none;color:var(--ph-accent);display:grid;place-items:center;
}
.ph-tick svg{width:1em;height:1em;fill:currentColor}
.ph-tick i{font-size:inherit;line-height:1}

.ph-quote{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  align-self:flex-start;width:auto;text-align:center;
  background:var(--ph-accent);color:#fff;text-decoration:none;font-weight:600;
  font-size:clamp(1rem,.35vw + .92rem,1.16rem);padding:15px 26px;border-radius:8px;
  box-shadow:0 6px 22px rgba(40,25,18,.10);transition:background .15s ease;
}
.ph-quote:hover,.ph-quote:focus{background:var(--ph-accent-dk);color:#fff}
.ph-col-a .ph-quote{margin-top:22px;max-width:var(--ph-btn-maxw,var(--ph-wide-w))}
.ph-ic-sm{
  width:var(--ph-btn-ic,19px);height:var(--ph-btn-ic,19px);font-size:var(--ph-btn-ic,19px);
  flex:none;display:grid;place-items:center;
}
.ph-ic-sm svg{width:1em;height:1em;fill:currentColor}
.ph-ic-sm i{font-size:inherit;line-height:1}

/* ---------- call + serving ---------- */
.ph-contact{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px;max-width:var(--ph-wide-w)}
.ph-callcard{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--ph-accent);color:#fff;border-radius:var(--ph-radius);
  padding:14px 22px 14px 16px;box-shadow:0 6px 22px rgba(40,25,18,.10);
  transition:background .15s ease;
}
.ph-callcard:hover,.ph-callcard:focus{background:var(--ph-accent-dk);color:#fff}
.ph-round{
  width:var(--ph-round,52px);height:var(--ph-round,52px);
  font-size:calc(var(--ph-round,52px) * .43);
  border-radius:50%;background:#fff;color:var(--ph-accent);
  display:grid;place-items:center;flex:none;
}
.ph-round svg{width:1em;height:1em;fill:currentColor}
.ph-round i{font-size:inherit;line-height:1}
.ph-callcard-t small{display:block;font-size:15px;font-weight:500;line-height:1.3}
.ph-callcard-t b{display:block;font-size:clamp(1.1rem,.4vw + 1rem,1.35rem);font-weight:700;line-height:1.3}
.ph-servecard{
  display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--ph-radius);
  padding:14px 22px;box-shadow:0 6px 22px rgba(40,25,18,.10);max-width:390px;
}
.ph-servecard .ph-ic{
  width:var(--ph-serve-ic,36px);height:var(--ph-serve-ic,36px);
  font-size:var(--ph-serve-ic,36px);
  color:var(--ph-accent);flex:none;display:grid;place-items:center;
}
.ph-servecard .ph-ic svg{width:1em;height:1em;fill:currentColor}
.ph-servecard .ph-ic i{font-size:inherit;line-height:1}
.ph-servecard-t small{display:block;font-size:15.5px;font-weight:700;color:var(--ph-accent);line-height:1.35}
.ph-servecard-t span{display:block;font-size:14.5px;font-weight:500;line-height:1.4}

/* ---------- feature columns ---------- */
.ph-fourup{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px;align-items:start;
  background:var(--ph-card-bg);border-radius:var(--ph-radius);
  box-shadow:0 6px 22px rgba(40,25,18,.10);padding:22px 20px;max-width:var(--ph-wide-w);
}
.ph-fcol{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--ph-fcol-gap,8px);min-width:0}
.ph-fcol .ph-ic{
  width:var(--ph-fcol-ic,40px);height:var(--ph-fcol-ic,40px);
  font-size:calc(var(--ph-fcol-ic,40px) * .78);
  flex:none;color:var(--ph-accent);display:grid;place-items:center;
}
.ph-fcol .ph-ic svg{width:1em;height:1em;fill:currentColor}
.ph-fcol .ph-ic i{font-size:inherit;line-height:1}
.ph-fcol-t{display:flex;flex-direction:column;gap:var(--ph-fcol-tgap,2px);min-width:0}
.ph-fcol-title{display:block;font-size:clamp(12.5px,.78vw,15px);font-weight:700;line-height:1.25}
.ph-fcol-text{display:block;font-size:clamp(12px,.72vw,14px);font-weight:500;color:var(--ph-ink-soft);line-height:1.35}

/* ---------- controls ---------- */
.ph-ctrl{
  position:absolute;left:0;right:0;bottom:18px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none;
}
.ph-dots{display:flex;gap:9px;background:rgba(255,255,255,.82);padding:9px 13px;
  border-radius:999px;box-shadow:0 6px 22px rgba(40,25,18,.10);pointer-events:auto}
.ph-dots button{
  appearance:none;border:0;padding:0;cursor:pointer;background:#C9C2BD;
  width:9px;height:9px;border-radius:999px;transition:width .2s ease,background .2s ease;
}
.ph-dots button[aria-current="true"]{background:var(--ph-accent);width:26px}
.ph-arrow{
  pointer-events:auto;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.88);box-shadow:0 6px 22px rgba(40,25,18,.10);
  display:grid;place-items:center;color:var(--ph-ink);
}
.ph-arrow:hover{background:#fff}
.ph-arrow svg{width:18px;height:18px}

/* =====================================================================
   Stacked view: the plate stops being a background and becomes a block.
   Nothing scales down, nothing overlaps.
   ================================================================== */
@media (max-width:1180px){
  .ph-stack-1180 .ph-inner{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:64px}
  .ph-stack-1180 .ph-plate{position:static;z-index:0;order:-1;aspect-ratio:16/9;
    border-radius:calc(var(--ph-radius) + 2px);background-position:right center}
  .ph-stack-1180 .ph-headline,.ph-stack-1180 .ph-sub,.ph-stack-1180 .ph-tagline,
  .ph-stack-1180 .ph-strip,.ph-stack-1180 .ph-contact,.ph-stack-1180 .ph-fourup{max-width:none}
}
@media (max-width:1024px){
  .ph-stack-1024 .ph-inner{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:64px}
  .ph-stack-1024 .ph-plate{position:static;z-index:0;order:-1;aspect-ratio:16/9;
    border-radius:calc(var(--ph-radius) + 2px);background-position:right center}
  .ph-stack-1024 .ph-headline,.ph-stack-1024 .ph-sub,.ph-stack-1024 .ph-tagline,
  .ph-stack-1024 .ph-strip,.ph-stack-1024 .ph-contact,.ph-stack-1024 .ph-fourup{max-width:none}
}
@media (max-width:991px){
  .ph-stack-991 .ph-inner{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:64px}
  .ph-stack-991 .ph-plate{position:static;z-index:0;order:-1;aspect-ratio:16/9;
    border-radius:calc(var(--ph-radius) + 2px);background-position:right center}
  .ph-stack-991 .ph-headline,.ph-stack-991 .ph-sub,.ph-stack-991 .ph-tagline,
  .ph-stack-991 .ph-strip,.ph-stack-991 .ph-contact,.ph-stack-991 .ph-fourup{max-width:none}
}

/* ---------- phones ---------- */
@media (max-width:620px){
  /* Column counts, item direction and alignment are control-driven, so
     nothing here may set them — it would beat the panel. */
  .ph-hero .ph-fcol .ph-ic{flex:none}
  .ph-hero .ph-plate{aspect-ratio:4/3}
  .ph-hero .ph-callcard,.ph-hero .ph-servecard{width:100%}
  .ph-hero .ph-col-a .ph-quote{max-width:none}
  .ph-hero .ph-arrow{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ph-hero *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .ph-track{scroll-behavior:auto}
}