/* ==================================================
   Homepage Why Choose Us — editorial rebuild, original content kept.
   Same isolated-rebuild pattern as the other home-* sections: hard
   reset every descendant, then style fresh.

   The before/after compare slider used to reuse the legacy class
   names (.before-after-slider, .after-image-wrapper, .slider-handle,
   .handle-button) that the old site-wide stylesheet (index_style.css)
   also targets -- including several ::before pseudo-elements that
   the all:revert reset below can't touch (the * selector doesn't
   match pseudo-elements): a permanent "Drag to compare" pill, and a
   "loading shimmer" gradient that was supposed to hide itself once
   each photo loaded but never did (its selector checked :not([src])
   on the wrapper <div>, which never has a src attribute -- only
   <img> does -- so the shimmer sat over both photos forever, muting
   the visible difference between them). Rather than keep hunting for
   more legacy rules targeting those names, the slider now uses its
   own amzy-compare-* class names throughout (markup + JS), so nothing
   in index_style.css can match it at all anymore.
   ================================================== */
:root {
    --hc-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --hc-orange: #ff5e14;
    --hc-ink: #14161a;
    --hc-muted: #6b7280;
    --hc-line: #e4e6eb;
}

.amzy-choose,
.amzy-choose * {
    all: revert;
    box-sizing: border-box;
}

.amzy-choose {
    display: block;
    background: #fff;
    padding: 100px 0;
    font-family: var(--hc-font);
    overflow: hidden;
}

.amzy-choose .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Intro: eyebrow + heading + description + stat pair --- */
.amzy-choose-intro { max-width: 640px; margin: 0 0 60px; }

.amzy-choose-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--hc-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--hc-orange);
    margin-bottom: 18px;
}

.amzy-choose-eyebrow::before {
    content: '';
    display: block;
    width: 26px;
    height: 1.5px;
    background: var(--hc-orange);
}

.amzy-choose-title {
    display: block;
    font-family: var(--hc-font);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--hc-ink);
    margin: 0 0 18px;
}

.amzy-choose-title span { color: var(--hc-orange); }

.amzy-choose-desc {
    font-family: var(--hc-font);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--hc-muted);
    margin: 0 0 32px;
}

/* Circular ring stats -- CSS-only conic-gradient progress ring, no SVG.
   Each item's fill level comes from the inline --p custom property. */
.amzy-choose-rings {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
}

.amzy-choose-ring-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    width: 100px;
}

.amzy-choose-ring {
    --p: 100;
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: conic-gradient(var(--hc-orange) calc(var(--p) * 1%), var(--hc-line) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.amzy-choose-ring::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #fff;
}

.amzy-choose-ring span {
    position: relative;
    z-index: 1;
    font-family: var(--hc-font);
    font-weight: 700;
    font-size: 17px;
    color: var(--hc-ink);
}

.amzy-choose-ring-label {
    font-family: var(--hc-font);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--hc-muted);
    line-height: 1.3;
}

/* --- Main grid: image left, content right --- */
.amzy-choose-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: start;
}

/* --- Before/after slider --- */
/* No position:sticky here -- the section has overflow:hidden above,
   and any overflow value other than visible on an ancestor silently
   breaks position:sticky per spec. min-width:0 is defensive: grid
   items default to min-width:auto, refusing to shrink below their
   content's own width, which is how a single oversized column
   elsewhere on this page (the portable bathrooms teaser, just above
   this section) can drag the whole page into horizontal scroll on a
   real phone even though this column's own content is otherwise
   properly sized. */
.amzy-choose-image { opacity: 1; transform: none; min-width: 0; }

.amzy-compare {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3.3;
    border-radius: 20px;
    overflow: hidden;
    cursor: ew-resize;
    box-shadow: 0 20px 50px rgba(20, 22, 26, 0.14);
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.amzy-compare-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.amzy-compare-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.amzy-compare-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.amzy-compare-label {
    position: absolute;
    top: 16px;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--hc-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
    z-index: 3;
}

.amzy-compare-label--before { left: 16px; background: rgba(20, 22, 26, 0.55); backdrop-filter: blur(4px); }
.amzy-compare-label--after { right: 16px; background: var(--hc-orange); }

/* Full-height invisible track the handle slides along -- no visible
   seam line, only the round grip shows. */
.amzy-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
}

.amzy-compare-handle-btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--hc-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(20, 22, 26, 0.25);
    cursor: ew-resize;
    pointer-events: auto;
    transition: background 0.2s ease, color 0.2s ease;
}

.amzy-compare-handle-btn:hover,
.amzy-compare.dragging .amzy-compare-handle-btn {
    background: var(--hc-orange);
    color: #fff;
}

.amzy-compare-handle-btn:focus-visible {
    outline: 2px solid var(--hc-orange);
    outline-offset: 3px;
}

/* Explicit Font Awesome declaration -- the all:revert boundary above
   strips the icon font/content the "fas" class would otherwise supply
   from a separate stylesheet, so it's restated here directly. */
.amzy-choose i {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
}

/* --- Right: feature list + progress bars + CTA --- */
.amzy-choose-content { display: flex; flex-direction: column; gap: 36px; min-width: 0; }

.amzy-choose-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.amzy-choose-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    background: #fafafa;
    border: 1px solid var(--hc-line);
    border-radius: 14px;
}

.amzy-choose-feature-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hc-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.amzy-choose-feature-text h4 {
    font-family: var(--hc-font);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--hc-ink);
    margin: 0 0 5px;
}

.amzy-choose-feature-text p {
    font-family: var(--hc-font);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--hc-muted);
    margin: 0;
}

.amzy-choose-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--hc-orange);
    color: #fff;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--hc-font);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.amzy-choose-cta:hover {
    background: #e54d0f;
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

/* --- Tablet --- */
@media (max-width: 992px) {
    .amzy-choose { padding: 76px 0; }
    .amzy-choose-grid { grid-template-columns: 1fr; gap: 40px; }
    .amzy-compare { aspect-ratio: 16 / 10; }
}

/* --- Mobile: compact, single column, no oversized elements --- */
@media (max-width: 768px) {
    .amzy-choose { padding: 52px 0; }
    .amzy-choose-intro { margin-bottom: 36px; }
    .amzy-choose-eyebrow { font-size: 11px; margin-bottom: 12px; }
    .amzy-choose-title { font-size: 24px; margin-bottom: 12px; }
    .amzy-choose-desc { font-size: 13.5px; margin-bottom: 22px; }
    .amzy-choose-rings { gap: 18px; justify-content: space-between; }
    .amzy-choose-ring-item { width: auto; flex: 1 1 0; gap: 8px; }
    .amzy-choose-ring { width: 62px; height: 62px; }
    .amzy-choose-ring span { font-size: 13px; }
    .amzy-choose-ring-label { font-size: 9.5px; }

    .amzy-choose-grid { gap: 30px; }
    .amzy-compare { aspect-ratio: 4 / 3.4; border-radius: 14px; }
    .amzy-compare-label { top: 10px; padding: 5px 12px; font-size: 10.5px; }
    .amzy-compare-label--before { left: 10px; }
    .amzy-compare-label--after { right: 10px; }
    .amzy-compare-handle-btn { width: 36px; height: 36px; font-size: 12px; }

    .amzy-choose-content { gap: 26px; }
    .amzy-choose-feature { padding: 14px; gap: 12px; border-radius: 12px; }
    .amzy-choose-feature-icon { width: 34px; height: 34px; font-size: 13.5px; }
    .amzy-choose-feature-text h4 { font-size: 14px; }
    .amzy-choose-feature-text p { font-size: 12.5px; }
    .amzy-choose-cta { padding: 12px 24px; font-size: 13px; align-self: stretch; justify-content: center; }
}