/* Royce Heating & Air — homepage additions (backup-first build, 2026-09-22)
   Scoped to the homepage additions: hero heading sizing, services cards,
   founder's-message trust column, and the 5-item "Why Choose" grid. */

/* ---------- Hero heading: sized for the longer tagline ---------- */
.site-home #g-slideshow .overlay-title h2 {
    max-width: 900px;
    font-size: clamp(2.3rem, 4.8vw, 4.5rem);
}

/* ---------- Services section (below the service-overview grid) ---------- */
.site-home #g-header .services-container > .g-content { margin: 0; padding: 0; }
.services-section-wrapper { margin-top: 56px; padding-top: 44px; border-top: 1px solid #dce3ea; }
.services-section-head { text-align: center; margin-bottom: 34px; }
.services-section-head h6 {
    margin: 0 0 12px;
    color: var(--royce-orange);
    font: 800 11px/1.5 var(--body-font-family);
    text-transform: uppercase;
    letter-spacing: .17em;
}
.services-section-head h3 {
    margin: 0;
    color: var(--royce-navy);
    font: 900 clamp(1.7rem, 3.2vw, 2.6rem)/1.06 var(--body-font-family);
    text-transform: uppercase;
    letter-spacing: -.04em;
}
.services-section-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.service-card { background: #fff; border: 1px solid #d8e1e9; box-shadow: 0 12px 22px -18px #071a3a70; padding: 28px 22px; }
.service-card-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: var(--royce-navy);
    color: var(--royce-orange);
    font-size: 22px;
}
.service-card h4 { margin: 24px 0 12px; color: var(--royce-navy); font: 800 14px/1.4 var(--body-font-family); text-transform: uppercase; }
.service-card p { margin: 0; color: var(--royce-muted); font: 400 14px/1.8 var(--body-font-family); }

/* ---------- Founder's Message column: wider text, smaller stacked heading ---------- */
.difference-wrapper { grid-template-columns: 46% 54%; }
.difference-wrapper .difference-text-column { padding-right: 32px; }
.difference-wrapper .difference-text-title h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }

/* ---------- Founder's Message / What to Expect list ---------- */
.difference-expect { margin-top: 6px; }
.difference-expect h4 {
    margin: 0 0 14px;
    color: var(--royce-navy);
    font: 800 13px/1.4 var(--body-font-family);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.difference-expect-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.difference-expect-list li { position: relative; padding-left: 28px; color: var(--royce-muted); font: 400 14px/1.5 var(--body-font-family); }
.difference-expect-list li::before {
    content: '\f00c';
    position: absolute;
    left: 0;
    top: .12em;
    color: var(--royce-orange);
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 13px;
}

/* ---------- Why Choose Royce — 3 cards ---------- */
.why-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.why-card { position: relative; margin: 0; padding: 28px 22px; background: #fff; border: 1px solid #d8e1e9; box-shadow: 0 12px 22px -18px #071a3a70; }
.why-card .why-num {
    position: absolute;
    right: 18px;
    top: 6px;
    color: #edf2f7;
    font: 800 64px/1 var(--body-font-family);
    pointer-events: none;
}
.why-card h4 { position: relative; margin: 0 0 12px; color: var(--royce-navy); font: 800 13px/1.4 var(--body-font-family); text-transform: uppercase; }
.why-card p { margin: 0; color: var(--royce-muted); font: 400 13px/1.7 var(--body-font-family); }
.why-card::after { content: ''; display: block; width: 40px; height: 2px; background: var(--royce-orange); margin-top: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 62rem) {
    .services-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 50.99rem) {
    .site-home #g-slideshow .overlay-title h2 { font-size: clamp(2rem, 8vw, 3rem); }
    .difference-wrapper { grid-template-columns: 1fr; }
    .difference-wrapper .difference-text-column { padding-right: 8px; }
    .services-section-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
}

/* Ductwork quicklink icon: blue background, matching the cooling icon */
.royce-icon-quicklinks .g-blockcontent-subcontent-block:has(.fa-wind) .g-blockcontent-subcontent-title-icon { background: var(--royce-blue); }

/* Services cards now live in the feature section, below the founder's message */
.services-container > .g-content { margin: 0; padding: 0; }
.services-section-wrapper { margin-bottom: 72px; }

/* ---------- Scroll reveal (house pattern: workflows/page-animation) ----------
   Hidden state is gated on scripting + no reduced-motion, so a JS-off or
   reduced-motion visitor always sees the finished page. */
.site-home { --royce-ease: cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .site-home .royce-icon-quicklinks,
    .site-home .difference-wrapper,
    .site-home .services-section-wrapper,
    .site-home .choose-wrapper,
    .site-home .review-wrapper,
    .site-home .bottom-contact-quicklinks {
        opacity: 0;
        transform: translateY(1.75rem);
        transition: opacity .7s var(--royce-ease), transform .7s var(--royce-ease);
    }
    .site-home .service-card,
    .site-home .why-card {
        opacity: 0;
        transform: translateY(1rem);
        transition: opacity .6s var(--royce-ease), transform .6s var(--royce-ease), box-shadow .3s var(--royce-ease);
    }
    .site-home .royce-icon-quicklinks.rv-in,
    .site-home .difference-wrapper.rv-in,
    .site-home .services-section-wrapper.rv-in,
    .site-home .choose-wrapper.rv-in,
    .site-home .review-wrapper.rv-in,
    .site-home .bottom-contact-quicklinks.rv-in {
        opacity: 1;
        transform: none;
    }
    .site-home .service-card.rv-in,
    .site-home .why-card.rv-in { opacity: 1; transform: none; }
}
/* Hover lift for the service / why cards (movement only) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .site-home .service-card:hover,
    .site-home .why-card:hover { transform: translateY(-4px); }
}

/* ---------- Hero tagline reveal (plays on load; the hero is above the fold) ---------- */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .site-home .overlay-wrapper .overlay-title h2 {
        opacity: 0;
        transform: translateY(1.5rem);
        transition: opacity .9s var(--royce-ease), transform .9s var(--royce-ease);
    }
    .site-home .overlay-wrapper.rv-in .overlay-title h2 {
        opacity: 1;
        transform: none;
    }
}

/* Hero tagline: pure-CSS entrance so a stale cached JS can never leave it hidden */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .site-home .overlay-wrapper .overlay-title h2 {
        opacity: 1;
        transform: none;
        transition: none;
        animation: royce-hero-in .9s var(--royce-ease) both;
    }
}
@keyframes royce-hero-in {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Hero tagline: the question types out, then the answer fades up ---------- */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    /* Cancel the earlier whole-heading fade so only the pieces animate */
    .site-home .overlay-wrapper .overlay-title h2 {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
    .site-home .overlay-wrapper .overlay-title .ht-q {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        max-width: 0;
        padding-right: 3px;
        border-right: 3px solid var(--royce-orange);
        animation: ht-type 1.3s steps(19, end) .25s forwards,
                   ht-caret .45s step-end .25s 4,
                   ht-caret-off .001s linear 1.75s forwards;
    }
    .site-home .overlay-wrapper .overlay-title .ht-a {
        display: inline-block;
        opacity: 0;
        transform: translateY(.85rem);
        animation: ht-answer .6s var(--royce-ease) 1.7s forwards;
    }
}
@keyframes ht-type { to { max-width: 100%; } }
@keyframes ht-caret { 50% { border-right-color: transparent; } }
@keyframes ht-caret-off { to { border-right-color: transparent; } }
@keyframes ht-answer {
    from { opacity: 0; transform: translateY(.85rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero answer: slower fade-up (user request) */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .site-home .overlay-wrapper .overlay-title .ht-a {
        animation: ht-answer 1.3s var(--royce-ease) 1.7s forwards;
    }
}

/* Hero answer: 2s fade-up (user request) */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .site-home .overlay-wrapper .overlay-title .ht-a {
        animation: ht-answer 2s var(--royce-ease) 1.7s forwards;
    }
}

/* ---------- Contact strip: center the icon and text block in each cell ---------- */
html body .bottom-contact-quicklinks .g-blockcontent-subcontent-block-content {
    align-items: center;
}
html body .bottom-contact-quicklinks .g-blockcontent-subcontent-desc {
    margin-top: 0;
    margin-bottom: 0;
}