@import url('menu.css');
@import url('form.css');
@import url('swiper.css');
@import url('faqs.css');

/* Text selection highlight */
::selection {
    background-color: #B65234;
    color: white;
}

::-moz-selection {
    background-color: #B65234;
    color: white;
}

/*
*   ROTATING HERO WORD
*/
/* "Stand On" on line one; the rotating word on its own line below.
   Every word sits in the same grid cell, so the slot is always as wide
   as the longest word and nothing reflows when the word changes. */
.rotating-word-wrapper {
    display: grid;
    justify-items: center;
    font-size: min(1em, 9.5vw);
}

.rotating-word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(0.3em);
    white-space: nowrap;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.rotating-word.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/*
*   HERO CONTENT
*/
.hero_canvas_container {
    width: 100vw;
    height: 100svh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.section_hero.hp_section_hero {
    min-height: 150svh;
}
 

.section_hero_followup_content_card .abode-display-text {
    position: absolute;
    opacity: 0;
    left: unset;
    right: -6.25rem;
    transform: translate(-1rem, 0);
}

/* "Made / for" — stacked above the tag, equidistant */
.section_hero_followup_content_card .abode-display-text:nth-child(1) {
    left: 50%;
    right: unset;
    bottom: calc(100% + 0.4rem);
    top: unset;
    transform: translate(-50%, 0.5rem);
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.5);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
}

.abode_feat_tag_container_inner {
    transform: translate(0rem, 0);
}

.section_hero_followup_content_card:hover .abode_feat_tag_container_inner,
.section_hero_followup_content_card.active .abode_feat_tag_container_inner {
    transform: translate(0rem, 0);
}

.section_hero_followup_content_card:hover .abode-display-text,
.section_hero_followup_content_card.active .abode-display-text {
    opacity: 1;
    transform: translate(0rem, 0);
}

/* Override the generic hover translate for the centered "Made for" */
.section_hero_followup_content_card:hover .abode-display-text:nth-child(1),
.section_hero_followup_content_card.active .abode-display-text:nth-child(1) {
    transform: translate(-50%, 0);
}

/* Swap card tag text on hover: Residential→Living, Commercial→Business, Custom→You */
.abode_feat_tag .tag-hover {
    display: none;
}

.section_hero_followup_content_card:hover .abode_feat_tag .tag-default,
.section_hero_followup_content_card.active .abode_feat_tag .tag-default {
    display: none;
}

.section_hero_followup_content_card:hover .abode_feat_tag .tag-hover,
.section_hero_followup_content_card.active .abode_feat_tag .tag-hover {
    display: inline;
}

@media screen and (max-width: 767px) {
    .section_hero_followup_content_card.active {
        max-width: 100%;
        aspect-ratio: 345 / 263;
    }
}


/*
*   INTERACTIVE ITALY MAP
*/
.italia_map_hover_container .italia_map_info_container {
    opacity: 0;
    transform: translate(-1rem, 0);
}

.italia_map_hover_container .map_hover_trigger:hover ~ .italia_map_info_container {
    opacity: 1;
    transform: translate(0, 0);
}

/* Radar rings */
.radar-ring {
    animation: radar-pulse 4s ease-out infinite;
}

.radar-ring:nth-child(1) {
    animation-delay: 0s;
}

.radar-ring:nth-child(2) {
    animation-delay: 1.25s;
}

.radar-ring:nth-child(3) {
    animation-delay: 2.75s;
}

.radar-ring:nth-child(4) {
    animation-delay: 3.25s;
}

@media screen and (min-width: 768px) {
    @keyframes radar-pulse {
        0% {
            width: 1rem;
            height: 1rem;
            opacity: 0.8;
            border-color: #B65234;
        }
        100% {
            width: 4rem;
            height: 4rem;
            opacity: 0;
            border-color: #B65234;
        }
    }
}

@media screen and (max-width: 767px) {
    @keyframes radar-pulse {
        0% {
            width: .25rem;
            height: .25rem;
            opacity: 0.8;
            border-color: #B65234;
        }
        100% {
            width: 2.25rem;
            height: 2.25rem;
            opacity: 0;
            border-color: #B65234;
        }
    }
}

@media screen and (max-width: 479px) {
    .radar-ring {
        animation: radar-pulse 2.5s ease-out infinite;
    }

    .radar-ring:nth-child(1) {
        animation-delay: 0s;
    }

    .radar-ring:nth-child(2) {
        animation-delay: 1.25s;
    }

    .radar-ring:nth-child(3),
    .radar-ring:nth-child(4) {
        display: none;
    }
}

/*
*   HP SERVICES LIST
*/
@media screen and (min-width: 992px) and (max-width: 1200px) {

    .waterfall_text_block_line_container {
        max-width: calc(100% - 11rem);
    }

    .waterfall_text_block_line_container.line_2 {
        max-width: calc(100% - 14rem);
    }

    .waterfall_text_block_line_container.line_2, .waterfall_text_block_line_container.line_3 {
        max-width: calc(100% - 15.5rem);
    }
}










/*
*   MATERIALS — Dark Category Section
*/
.materials-dark {
    background: #1a1612;
    color: #f2e8d4;
}

.materials-dark .background-image-container {
    display: none;
}

.materials-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4rem;
    margin-bottom: 3.5rem;
}

.materials-header-left {
    flex: 1 1 55%;
}

.materials-heading {
    color: #f2e8d4;
}

.materials-header-right {
    flex: 0 1 22rem;
    padding-bottom: 0.25rem;
}

.materials-intro {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(242, 232, 212, 0.55);
}

/* ── Category Grid ── */
.materials-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0.75rem;
}

.material-tile {
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
    display: block;
    text-decoration: none;
    color: #fff;
    aspect-ratio: 5 / 4;
}

.material-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.material-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.15) 45%,
        transparent 100%
    );
    transition: background 0.5s ease;
}

.material-tile:hover .material-tile-img {
    transform: scale(1.05);
}

.material-tile:hover .material-tile-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.3) 55%,
        rgba(0, 0, 0, 0.08) 100%
    );
}

.material-tile-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.material-tile-label {
    font-family: var(--_typography---font-styles--heading, 'Cormorant Garamond', serif);
    font-size: 1.85rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    color: #fff;
}

.material-tile-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.015em;
    line-height: 1.5;
}

.material-tile-cta {
    font-size: 0.75rem;
    color: #d37955;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0.6rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.material-tile:hover .material-tile-cta {
    opacity: 1;
    transform: translateY(0);
}

/* ── Bridge CTA ── */
.materials-bridge {
    margin-top: 3.5rem;
    text-align: center;
}

.materials-bridge-rule {
    width: 3rem;
    height: 1px;
    background: rgba(242, 232, 212, 0.18);
    margin: 0 auto 2rem;
}

.materials-bridge-copy {
    font-size: 1.05rem;
    color: rgba(242, 232, 212, 0.6);
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.materials-bridge-copy strong {
    color: #f2e8d4;
    font-weight: 500;
}

.materials-bridge-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.materials-btn-primary {
    display: inline-block;
    padding: 0.9rem 2.25rem;
    background: #d37955;
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 0.2rem;
    transition: background 0.3s ease;
}

.materials-btn-primary:hover {
    background: #c06840;
}

.materials-btn-secondary {
    display: inline-block;
    color: rgba(242, 232, 212, 0.6);
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    transition: color 0.3s ease;
}

.materials-btn-secondary:hover {
    color: #f2e8d4;
}

/* ── Materials — Tablet ── */
@media screen and (max-width: 991px) {
    .materials-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        margin-bottom: 2.5rem;
    }

    .materials-header-right {
        flex: none;
        max-width: 100%;
    }

    .material-tile-label {
        font-size: 1.6rem;
    }
}

/* ── Materials — Mobile ── */
@media screen and (max-width: 767px) {
    .materials-grid {
        grid-template-columns: 1fr;
    }

    .material-tile {
        aspect-ratio: 3 / 2;
    }

    .material-tile-label {
        font-size: 1.5rem;
    }

    .material-tile-cta {
        opacity: 1;
        transform: translateY(0);
    }

    .materials-bridge {
        margin-top: 2.5rem;
    }

    .materials-bridge-actions {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ── Materials — Small Mobile ── */
@media screen and (max-width: 479px) {
    .material-tile {
        aspect-ratio: 4 / 3;
    }

    .material-tile-content {
        padding: 1.25rem;
    }

    .material-tile-label {
        font-size: 1.3rem;
    }

    .materials-bridge-copy {
        font-size: 0.95rem;
    }

    .materials-btn-primary {
        width: 100%;
        text-align: center;
    }
}

/*
*   PHILOSOPHY — held cinematic moment
*   Full-screen video that fades in from the hero, holds while the headline
*   changes (morning → night, never both at once), then releases.
*/
.philosophy-scene {
    height: 100vh;
    height: 100svh;
    position: relative;
    overflow: hidden;
    background: #0e0c0a;
}

.philosophy-sticky {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.philosophy-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    will-change: transform;
}

.philosophy-overlay-dark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 50%, rgba(26, 22, 18, .15) 40%, rgba(26, 22, 18, .55) 100%),
        rgba(26, 22, 18, .28);
}

/* soft seams: the hero dissolves into the film, the film into the next section */
.philosophy-fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 30vh;
    pointer-events: none;
    z-index: 1;
}
.philosophy-fade-top { top: 0; height: 42vh; background: linear-gradient(180deg, #0e0c0a 0%, rgba(14, 12, 10, .93) 18%, rgba(14, 12, 10, .72) 38%, rgba(14, 12, 10, .42) 60%, rgba(14, 12, 10, .15) 82%, rgba(14, 12, 10, 0) 100%); }
.philosophy-fade-bottom { bottom: 0; background: linear-gradient(0deg, #1a1612 0%, rgba(26, 22, 18, .55) 45%, rgba(26, 22, 18, 0) 100%); }

.philosophy-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
    max-width: 60rem;
}

/* both headlines share one slot; only one is ever visible */
.philosophy-heading-group { display: grid; }
.philosophy-head {
    grid-area: 1 / 1;
    margin: 0;
    color: #f2e8d4;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
    line-height: 1.12;
}
.philosophy-head .pl { display: block; overflow: hidden; padding-bottom: .06em; }
.philosophy-head .pl > span { display: block; }
.philosophy-head-night .pl > span { transform: translateY(110%); }

/* Philosophy — Tablet */
@media screen and (max-width: 991px) {
    .philosophy-content { padding: 0 1.5rem; max-width: 40rem; }
}

/* Philosophy — Mobile: a simple band, no hold */
@media screen and (max-width: 767px) {
    .philosophy-scene { height: 72vh; height: 72svh; }
    .philosophy-fade { height: 22vh; }
    .philosophy-head { font-size: 1.9rem; }
}

@media screen and (max-width: 479px) {
    .philosophy-scene { height: 64vh; height: 64svh; }
    .philosophy-head { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .philosophy-head-night { display: none; }
}

/* HERO SECTION */
.header32_background-image-wrapper.overlay-reveal {
    clip-path: polygon(25% 100%, 75% 100%, 75% 100%, 25% 100%);
    transform-origin: center center;
}


/* STEPS SECTION */
.pj_step_context_container {
    opacity: 0;
}

.step-row.active {
    opacity: 1;
    position: relative;
}

.gallery6_item-wrapper .gallery6_image {
    transition: opacity .3s ease;
}

.gallery6_item-wrapper:hover .gallery6_image {
    opacity: .75;
}

@media screen and (max-width: 991px) {
    .step-row.mobile-hidden {
        opacity: 0;
    }

    .pj_step_context_container::before {
        content: '';
        position: absolute;
        top: 0;
        left: -1.25rem;
        height: 10rem;
        width: 100vw;
        background: #1a1612;
        background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(8, 14, 0, 1) 40%);
        z-index: 0;
    }
}

.step-row.active .trace {
    width: 1.5rem;
}

.pj_step_desc.active {
    opacity: 1;
}


/*
*   WORKS
*/
.blog12_item-link:hover img {
    transform: scale(1.1);
}

.see-more-text-container {
    opacity: 0;
}

.see-more-text-container.show {
    opacity: 1;
}


.blur-overlay::before {
    left: 0;
    -webkit-mask-image: linear-gradient(90deg, black 10%, transparent 80%);
    mask-image: linear-gradient(90deg, black 10%, transparent 80%);
}

.blur-overlay::after {
    right: 0;
    -webkit-mask-image: linear-gradient(270deg, black 10%, transparent 80%);
    mask-image: linear-gradient(270deg, black 10%, transparent 80%);
}

.blur-overlay::before,
.blur-overlay::after {
    content: "";
    position: absolute;
    z-index: 999;
    height: 100%;
    width: 2.5rem;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.hero-overlay-svg-mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6; /* Should be higher than .hero_image-plant-overlay-layer */
}

.hero_image-plant-overlay-layer {
    mask: url(#heroCircleMask);
    -webkit-mask: url(#heroCircleMask);
}

.hero-overlay-svg-mask {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

#heroCircleFade {
    width: 70vw;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

.hero_image-plant-overlay-layer {
    mask: url(#heroCircleMask);
    -webkit-mask: url(#heroCircleMask);
    opacity: 0;
    mix-blend-mode: overlay;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: opacity 0.6s ease;
}

/* Floor plan reveals on hover */
.section_hero:hover .hero_image-plant-overlay-layer {
    opacity: 1;
}

@media screen and (max-width: 991px) {
    #heroCircleFade {
        width: 400px;
    }
}


/*
*   RICH TEXT HEADINGS
*/

.rich-text-legal h1 {
    visibility: hidden;
}

.rich-text-legal h2,
.rich-text-legal h3,
.rich-text-legal h4,
.rich-text-legal h5,
.rich-text-legal h6 {
    font-family: var(--_typography---font-styles--heading);
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}

.rich-text-legal h2 {
    letter-spacing: 0;
    font-size: 3rem;
    line-height: 1.1;
}

.rich-text-legal h3 {
    letter-spacing: 0;
    font-size: 2rem;
    line-height: 1.1;
}

.rich-text-legal h4 {
    font-size: 2rem;
    line-height: 1.3;
}

.rich-text-legal h5 {
    font-size: 1.5rem;
    line-height: 1.4;
}

@media screen and (max-width: 991px) {
    .rich-text-legal h2 {
        font-size: 2.75rem;
    }

    .rich-text-legal h3 {
        font-size: 2.25rem;
    }

    .rich-text-legal h4 {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 767px) {

    .rich-text-legal h2,
    .rich-text-legal h3,
    .rich-text-legal h4,
    .rich-text-legal h5,
    .rich-text-legal h6 {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }

    .rich-text-legal h2 {
        font-size: 2rem;
    }

    .rich-text-legal h3 {
        font-size: 1.5rem;
    }

    .rich-text-legal h4 {
        font-size: 1.5rem;
        line-height: 1.4;
    }

    .rich-text-legal h5 {
        font-size: 1.25rem;
    }
}
/* ============================
   WHY ABODE — pinned horizontal sequence
   Five promises drawn as flooring line art,
   closing on Diablo Best of the East Bay.
   Palette: espresso #1a1612 · cream #f2e8d4 · beige #F3EDE3 · bronze #A67C52
   ============================ */

.wa {
  position: relative;
  background: #1a1612;
  color: #f2e8d4;
  overflow-x: clip;
}

/* ---------- intro (a still beat before the pin) ---------- */
.wa-intro {
  padding: 20vh 6vw 16vh;
  text-align: center;
}
.wa-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #d4c4b0;
  margin: 0;
}
.wa-eyebrow .b { opacity: .5; }
.wa .wa-title {
  color: #f2e8d4;
  margin: 1.6rem 0 1.4rem;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
}
.wa-intro-sub {
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #A67C52;
  margin: 0;
}

/* ---------- pinned stage ---------- */
.wa-pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.wa-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.wa-panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 5vw;
  padding: 10vh 7vw 13vh;
  overflow: hidden;
  box-sizing: border-box;
}
.wa-light { background: #F3EDE3; color: #2C1E14; }
.wa-dark  { background: #1a1612; color: #f2e8d4; }

/* ---------- line art ---------- */
.wa-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-height: 66vh;
}
.wa-light .wa-art { color: rgba(44, 30, 20, .72); }
.wa-dark  .wa-art { color: rgba(242, 232, 212, .72); }
.wa-art svg {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 66vh;
  overflow: visible;
}
.wa-art path, .wa-art line, .wa-art polyline, .wa-art polygon,
.wa-art rect, .wa-art circle, .wa-art ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.wa-art .wall  { stroke-width: 2.2; }
.wa-art .faint { opacity: .45; }
.wa-art text {
  fill: currentColor;
  stroke: none;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
/* the hero's warm spotlight, returning behind each drawing */
.wa-glow {
  position: absolute;
  inset: -12%;
  background: radial-gradient(closest-side, rgba(166, 124, 82, .38), rgba(166, 124, 82, 0) 72%);
  opacity: 0;
  pointer-events: none;
}
.wa-light .wa-glow {
  background: radial-gradient(closest-side, rgba(166, 124, 82, .26), rgba(166, 124, 82, 0) 72%);
}

/* ---------- copy ---------- */
.wa-copy { max-width: 34rem; }
.wa-count {
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #A67C52;
  margin: 0 0 1.6rem;
}
.wa-count-of { opacity: .6; }
.wa-panel h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 1.6rem;
}
.wa-rule {
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  opacity: .35;
  margin-bottom: 1.6rem;
}
.wa-copy p:not(.wa-count) {
  font-family: 'Jost', sans-serif;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.75;
  margin: 0 0 1rem;
  opacity: .86;
}

/* ---------- closing panel: the award ---------- */
.wa-close {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wa-close .wa-art {
  position: absolute;
  inset: 8vh 8vw 12vh;
  max-height: none;
  color: rgba(242, 232, 212, .2);
}
.wa-close .wa-art svg { max-width: 980px; max-height: 80vh; }
.wa-close .wa-glow {
  background: radial-gradient(closest-side, rgba(166, 124, 82, .5), rgba(166, 124, 82, 0) 70%);
}
.wa-award { position: relative; z-index: 2; padding: 3rem 2rem; }
.wa-award::before {
  content: "";
  position: absolute;
  inset: -12% -18%;
  background: radial-gradient(closest-side, rgba(26, 22, 18, .92), rgba(26, 22, 18, .7) 55%, rgba(26, 22, 18, 0));
  z-index: -1;
}
.wa-award h3 { margin-bottom: 1rem; font-size: clamp(2.4rem, 4.4vw, 4.4rem); }
.wa-award .wa-count { margin-bottom: 1.4rem; color: #c49a6c; }
.wa-award-cat {
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #d4c4b0;
  margin: 0;
}
.wa-years {
  display: flex;
  justify-content: center;
  margin-top: 3.2rem;
}
.wa-year {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 5.8rem);
  line-height: 1;
  padding: .2rem clamp(1rem, 2.6vw, 2.8rem);
  border-left: 1px solid rgba(242, 232, 212, .25);
  font-variant-numeric: lining-nums;
}
.wa-year:first-child { border-left: 0; }

/* ---------- progress rule ---------- */
.wa-bar {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: 5.5vh;
  height: 1px;
  background: rgba(166, 124, 82, .28);
  z-index: 5;
}
.wa-bar span {
  display: block;
  height: 100%;
  background: #A67C52;
  transform-origin: left center;
  transform: scaleX(0);
}

/* ---------- tablet ---------- */
@media screen and (max-width: 991px) {
  .wa-panel { gap: 4vw; padding: 9vh 6vw 12vh; }
  .wa-copy p:not(.wa-count) { font-size: .95rem; }
}

/* ---------- mobile: panels stack, no pin ---------- */
@media screen and (max-width: 767px) {
  .wa-intro { padding: 14vh 6vw 10vh; }
  .wa-pin { height: auto; overflow: visible; }
  .wa-track { display: block; transform: none !important; }
  .wa-panel {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 11vh 7vw;
  }
  .wa-art { max-height: none; }
  .wa-art svg { max-width: 440px; max-height: none; }
  .wa-copy { max-width: none; }
  .wa-panel h3 { font-size: 2.2rem; }
  .wa-close { min-height: 92vh; }
  .wa-close .wa-art { inset: 6vh 3vw; }
  .wa-bar { display: none; }
}

@media screen and (max-width: 479px) {
  .wa-intro { padding: 12vh 6vw 8vh; }
  .wa-panel { padding: 9vh 6vw; gap: 2rem; }
  .wa-panel h3 { font-size: 1.9rem; }
  .wa-award h3 { font-size: 2.2rem; }
  .wa-years { flex-wrap: wrap; row-gap: 1rem; }
  .wa-year { font-size: 2.4rem; padding: .1rem .9rem; }
  .wa-year:nth-child(3) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-track { transform: none !important; }
}

/* ============================
   CLOSING CTA — sample promise
   ============================ */
.cta_sample-line {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #2C1E14;
  opacity: .78;
  max-width: 30rem;
  margin: 1.1rem auto 0;
}

/* ============================
   WAREHOUSE BRIDGE
   A quiet signpost after the main CTA,
   for visitors who already know what they want.
   ============================ */
.warehouse-bridge {
  background: #D4C4B0;
  color: #2C1E14;
  border-top: 1px solid rgba(44, 30, 20, .12);
  padding: 4.5rem 6vw;
  text-align: center;
}
.wb-inner { max-width: 40rem; margin: 0 auto; }
.wb-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #6b4f38;
  margin: 0 0 1rem;
}
.wb-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 .9rem;
  color: #2C1E14;
}
.wb-body {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  opacity: .8;
  margin: 0 0 1.6rem;
}
.wb-link {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #2C1E14;
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(44, 30, 20, .45);
  transition: border-color .3s ease, color .3s ease;
}
.wb-link:hover, .wb-link:focus-visible {
  color: #6b4f38;
  border-bottom-color: #6b4f38;
}
.wb-link span { display: inline-block; transition: transform .3s ease; }
.wb-link:hover span { transform: translateX(4px); }

@media screen and (max-width: 767px) {
  .warehouse-bridge { padding: 3.5rem 7vw; }
  .cta_sample-line { font-size: 1rem; padding: 0 4vw; }
}
@media screen and (max-width: 479px) {
  .warehouse-bridge { padding: 3rem 6vw; }
  .wb-heading { font-size: 1.6rem; }
  .wb-link { font-size: .74rem; letter-spacing: .12em; }
}

/* "See What's Possible" slides are display-only for now */
.hp_works_slide_link[aria-disabled="true"] { cursor: default; }

/* ============================
   NAV BAR — lighter bar, one clear action
   Transparent over the hero; condenses into a soft translucent bar on scroll.
   The booking button is the only filled element in the bar.
   ============================ */
.navbar-wrapper .navbar {
  background: rgba(26, 22, 18, 0);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(242, 232, 212, 0);
  border-radius: 999px;
  transition: background .45s ease, border-color .45s ease, backdrop-filter .45s ease, padding .45s ease;
}
html.nav-scrolled .navbar-wrapper .navbar,
body.navbar-menu-open .navbar-wrapper .navbar {
  background: rgba(26, 22, 18, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border-color: rgba(242, 232, 212, .12);
}

/* links: same small letterspaced Jost as the section labels */
.navbar .desktop-menu-list .menu-link {
  font-family: 'Jost', sans-serif;
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(242, 232, 212, .78);
  opacity: 1;
  position: relative;
  padding: .35rem 0;
  transition: color .3s ease;
}
.navbar .desktop-menu-list .menu-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: #c49a6c; transform: scaleX(0); transform-origin: left center;
  transition: transform .35s ease;
}
.navbar .desktop-menu-list .menu-link:hover { color: #f2e8d4; }
.navbar .desktop-menu-list .menu-link:hover::after { transform: scaleX(1); }
/* current page: full color with a bronze underline (no more gray) */
.navbar .desktop-menu-list .menu-link.w--current { color: #f2e8d4; opacity: 1; }
.navbar .desktop-menu-list .menu-link.w--current::after { transform: scaleX(1); }

/* the one filled element: Book a Free Visit */
.button.nav-cta {
  display: inline-flex; align-items: center; gap: 0;
  background: #A67C52 !important;
  color: #1a1612 !important;
  border: 0 !important;
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
  box-shadow: 0 0 0 rgba(166, 124, 82, 0);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease, gap .3s ease;
}
.nav-cta-arrow {
  display: inline-block; width: 0; overflow: hidden; opacity: 0;
  transition: width .3s ease, opacity .3s ease;
}
.button.nav-cta:hover, .button.nav-cta:focus-visible {
  background: #d9b98f !important;
  color: #1a1612 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(166, 124, 82, .35);
  gap: .6rem;
}
.button.nav-cta:hover .nav-cta-arrow, .button.nav-cta:focus-visible .nav-cta-arrow { width: 1em; opacity: 1; }
.button.nav-cta:focus-visible { outline: 1px solid #f2e8d4; outline-offset: 3px; }

/* phones: a slim booking bar pinned where thumbs are */
.m-book { display: none; }
@media screen and (max-width: 767px) {
  .m-book {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 900;
    background: #A67C52; color: #1a1612; text-decoration: none;
    font-family: 'Jost', sans-serif; font-weight: 500; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
    padding: 1rem 1.2rem; border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    transform: translateY(160%); opacity: 0;
    transition: transform .45s ease, opacity .45s ease, background .3s ease;
  }
  html.nav-scrolled .m-book { transform: translateY(0); opacity: 1; }
  body.navbar-menu-open .m-book { transform: translateY(160%); opacity: 0; }
  .m-book:active { background: #d9b98f; }
  .footer { padding-bottom: 5.5rem; }
}
.navbar .button.nav-cta { padding: .85rem 1.5rem !important; }

/* Hero cards float above the film's faded top edge instead of being clipped by it */
@media screen and (min-width: 768px) {
  .section_hero.hp_section_hero { position: relative; z-index: 3; }
  .philosophy-scene { z-index: 1; }
}


/* See What's Possible: same espresso as the sections around it (was pure black),
   and a shorter gap into Why Abode */
.section_hp-works { background-color: #1a1612 !important; }
.wa-intro { padding-top: 12vh; }
@media screen and (max-width: 767px) { .wa-intro { padding-top: 9vh; } }

/* ============================
   EMBLEM BEAT — the AL mark rises in the dark between the hero cards and the film
   ============================ */
.emblem-beat { position: relative; z-index: 4; height: 0; pointer-events: none; }
/* dissolve the hero's textured dark into the film's plain dark, so there's no seam line */
/* the hero background (not the cards) dissolves at its bottom edge,
   so it melts into the film instead of ending on a hard line */
@media screen and (min-width: 768px) {
  .hp_section_hero .header30_background-image-wrapper {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 38vh), rgba(0,0,0,.55) calc(100% - 16vh), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 38vh), rgba(0,0,0,.55) calc(100% - 16vh), transparent 100%);
  }
  .main-wrapper { background-color: #0e0c0a; }
}
.eb-mark { z-index: 2; }
.eb-mark {
  position: absolute; left: 50%; top: 0;
  height: 30vh; height: 30svh; aspect-ratio: 640 / 1112;
  opacity: 0; will-change: transform, opacity, filter;
}
.eb-fill {
  /* the emblem shape, filled with a soft cream-to-sand gradient so it reads as embossed */
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #f2e8d4 0%, #e3d0b1 60%, #c9ab83 100%);
  -webkit-mask: url(../images/abode-emblem-mark.png) center / contain no-repeat;
          mask: url(../images/abode-emblem-mark.png) center / contain no-repeat;
}
.eb-glow {
  position: absolute; left: 50%; top: 52%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(196, 154, 108, .22), rgba(196, 154, 108, 0) 70%);
}
@media screen and (max-width: 767px) {
  .eb-mark { height: 22vh; height: 22svh; }
}

/* See What's Possible: film-frame numbers under each image */
.hp_works_title_initials {
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  letter-spacing: .32em;
  color: rgba(196, 154, 108, .8);
  font-variant-numeric: tabular-nums;
  padding-left: .32em; /* balance the letterspacing so it sits centered on the tick */
}

/* ============================
   WHY ABODE — title card as the first frame of the sequence
   ============================ */
.wa-title-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative;
}
.wa-title-card .wa-title { margin: 1.6rem 0 1.4rem; }
.wa-hint {
  font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(242, 232, 212, .45); margin: 3.2rem 0 0;
}
.wa-hint span { display: inline-block; animation: waNudge 2.4s ease-in-out infinite; }
@keyframes waNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
/* film-edge ruler along the bottom, echoing See What's Possible */
.wa-ruler {
  position: absolute; left: 7vw; right: 0; bottom: 9vh; height: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(242, 232, 212, .45) 0 1px, transparent 1px 160px) bottom left / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgba(242, 232, 212, .22) 0 1px, transparent 1px 32px) bottom left / 100% 7px no-repeat;
}

/* persistent corner label while the panels pass */
.wa-label {
  position: absolute; left: 7vw; bottom: calc(5.5vh + 16px); z-index: 5;
  display: flex; gap: 1.1rem; align-items: baseline;
  font-family: 'Jost', sans-serif; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
  color: #8a6a4c; opacity: 0; transition: opacity .4s ease, color .4s ease;
  pointer-events: none;
}
.wa-label.on { opacity: 1; }
.wa-label.on-dark { color: #c49a6c; }
.wa-label-n { font-variant-numeric: tabular-nums; opacity: .8; }

@media screen and (max-width: 767px) {
  .wa-title-card { min-height: 0; padding: 14vh 7vw 9vh; }
  .wa-hint, .wa-label { display: none; }
  .wa-ruler { position: relative; left: 0; bottom: auto; width: 100%; margin-top: 3rem; }
}

/* "The Abode Method": a slow sweep of warm bronze light, like light moving across a finished floor */
.wa-shimmer {
  background: linear-gradient(100deg, #d4c4b0 0%, #d4c4b0 38%, #e9c48c 45%, #fff1d6 50%, #e9c48c 55%, #d4c4b0 62%, #d4c4b0 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: waShimmer 6s ease-in-out 1.2s infinite;
}
@keyframes waShimmer {
  0%   { background-position: 100% 0; }
  45%  { background-position: 0% 0; }   /* sweep takes ~2.7s */
  100% { background-position: 0% 0; }   /* then rests before the next pass */
}
@media (prefers-reduced-motion: reduce) {
  .wa-shimmer { animation: none; -webkit-text-fill-color: #d4c4b0; color: #d4c4b0; background: none; }
}

/* ============================
   CLOSING — the finale (shared by every page)
   Dark, warm, the real showroom behind it; one bronze action; the AL mark as a small seal.
   ============================ */
.cta-finale {
  position: relative; overflow: hidden; isolation: isolate;
  background: #1a1612; color: #f2e8d4;
  min-height: 82vh; min-height: 82svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 20vh 7vw;
}
.cf-bg { position: absolute; inset: 0; z-index: -1; }
.cf-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; filter: saturate(.85); transform: scale(1.04); }
.cf-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #1a1612 0%, rgba(26,22,18,.55) 22%, rgba(26,22,18,.55) 78%, #1a1612 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(26,22,18,.35) 30%, rgba(26,22,18,.8) 100%),
    rgba(26,22,18,.45);
}
.cf-inner { max-width: 46rem; }
.cf-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%;
  border: 1px solid rgba(196,154,108,.45);
  margin-bottom: 2.4rem;
}
.cf-seal span {
  display: block; width: 22px; height: 37px;
  background: linear-gradient(180deg, #f2e8d4 0%, #e3d0b1 60%, #c9ab83 100%);
  -webkit-mask: url(../images/abode-emblem-mark.png) center / contain no-repeat;
          mask: url(../images/abode-emblem-mark.png) center / contain no-repeat;
}
.cf-heading {
  font-family: 'Cormorant Garamond', serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.06; letter-spacing: .01em;
  color: #f2e8d4; margin: 0 0 1.6rem;
}
.cf-line {
  font-family: 'Jost', sans-serif; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.75;
  color: rgba(242,232,212,.82); max-width: 30rem; margin: 0 auto 2.6rem;
}
.cf-btn {
  display: inline-flex; align-items: center; gap: 0;
  background: #A67C52; color: #1a1612; text-decoration: none;
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 1.05rem 2rem; border-radius: 999px;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease, gap .3s ease;
}
.cf-arrow { display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width .3s ease, opacity .3s ease; }
.cf-btn:hover, .cf-btn:focus-visible {
  background: #d9b98f; color: #1a1612; transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(166,124,82,.35); gap: .6rem;
}
.cf-btn:hover .cf-arrow, .cf-btn:focus-visible .cf-arrow { width: 1em; opacity: 1; }
.cf-btn:focus-visible { outline: 1px solid #f2e8d4; outline-offset: 3px; }

/* Warehouse: a quiet side door, not a second pitch */
.wb-row { position: relative; z-index: 1; background: #1a1612; color: #f2e8d4; padding: 0 7vw; }
.wb-row-inner {
  max-width: 76rem; margin: 0 auto; padding: 2.4rem 0;
  border-top: 1px solid rgba(242,232,212,.14);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap;
}
.wb-row-text { margin: 0; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.wb-row-eyebrow { font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; color: #c49a6c; }
.wb-sep { width: 22px; height: 1px; background: rgba(242,232,212,.3); }
.wb-row-h { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.25rem, 1.6vw, 1.5rem); text-transform: uppercase; letter-spacing: .02em; }
.wb-row-link {
  font-family: 'Jost', sans-serif; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242,232,212,.85); text-decoration: none; padding-bottom: .3rem;
  border-bottom: 1px solid rgba(242,232,212,.35); transition: color .3s ease, border-color .3s ease;
}
.wb-row-link:hover, .wb-row-link:focus-visible { color: #d9b98f; border-bottom-color: #d9b98f; }

@media screen and (max-width: 767px) {
  .cta-finale { min-height: 74vh; min-height: 74svh; padding: 15vh 7vw; }
  .cf-seal { width: 56px; height: 56px; margin-bottom: 1.8rem; }
  .cf-seal span { width: 19px; height: 32px; }
  .wb-row-inner { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2rem 0 2.4rem; }
  .wb-row-link { font-size: .7rem; letter-spacing: .12em; }
}

/* the Abode wax seal: a sign-off pressed onto the page */
.cf-wax {
  display: block; width: 92px; height: auto; margin: 0 auto 2.2rem;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
@media screen and (max-width: 767px) { .cf-wax { width: 76px; margin-bottom: 1.8rem; } }

/* the embossed AL (her artwork): raised cream letters with their own bevel and paper texture */
.eb-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: sepia(.12) drop-shadow(0 12px 24px rgba(0, 0, 0, .45)); }

/* ============================
   FOOTER WORDMARK — light tracing the letters
   The ABODE letters are real outlines; a small warm light travels around each one.
   ============================ */
.abode-footer-svg { display: block; height: .945em; width: auto; max-width: 100%; margin: 0 auto; overflow: visible; }
.abode-footer-svg .ft-base {
  fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .12); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.abode-footer-svg .ft-trace {
  fill: none; stroke-width: 90; /* path units are 10x (traced wordmark) */ stroke-linejoin: round;
  opacity: 0; transition: opacity 1.2s ease;
}
.abode-footer-svg .ft-glow { filter: drop-shadow(0 0 3px rgba(245, 214, 160, .9)) drop-shadow(0 0 10px rgba(196, 154, 108, .6)); }
.abode-footer-svg.is-live .ft-trace { opacity: .95; }
@media (prefers-reduced-motion: reduce) {
  .abode-footer-svg .ft-trace { display: none; }
}

/* Wax seal: pressed onto the page as the closing section arrives */
html.wax-ready .cf-wax { opacity: 0; }
html.wax-ready .cf-wax.is-pressed { animation: waxPress 1.05s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes waxPress {
  0%   { opacity: 0; transform: translateY(-22px) scale(1.4);
         filter: drop-shadow(0 34px 34px rgba(0,0,0,.28)) drop-shadow(0 8px 10px rgba(0,0,0,.15)); }
  55%  { opacity: 1; transform: translateY(0) scale(.95);
         filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
  75%  { transform: translateY(0) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1);
         filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
}
@media (prefers-reduced-motion: reduce) {
  html.wax-ready .cf-wax { opacity: 1; }
  html.wax-ready .cf-wax.is-pressed { animation: none; }
}

/* Footer: tappable contact, license, and review links */
.abode-contact-line a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); transition: border-color .3s ease, color .3s ease; }
.abode-contact-line a:hover { color: #f2e8d4; border-bottom-color: #c49a6c; }
.ft-license { margin-top: .6rem; font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(242,232,212,.45); }
.ft-reviews { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.ft-reviews-label { font-family: 'Jost', sans-serif; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(242,232,212,.45); margin-right: .3rem; }
.ft-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border: 1px solid rgba(242,232,212,.22); border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242,232,212,.85); text-decoration: none;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.ft-pill:hover, .ft-pill:focus-visible { border-color: #c49a6c; color: #f2e8d4; background: rgba(196,154,108,.08); }
.ft-star { color: #c49a6c; font-size: .8rem; letter-spacing: 0; }

/* text for screen readers and search engines only */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ft-reviews-label { flex-basis: 100%; margin: 0 0 .1rem; }
.ft-ico { width: 13px; height: 13px; fill: currentColor; opacity: .85; flex: none; }
.ft-pill:hover .ft-ico { opacity: 1; }

/* hero cards link to their section of the Services page */
.section_hero_followup_content_card { position: relative; }
.section_hero_followup_content_card .card-link { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.section_hero_followup_content_card .card-link:focus-visible { outline: 1px solid #c49a6c; outline-offset: 4px; }

/* ============================
   WHY ABODE — title card warmth + chapter guide
   ============================ */
/* warm light behind the title, breathing slowly, and a whisper of film grain */
.wa-title-card::before {
  content: ""; position: absolute; left: 50%; top: 47%; width: min(92vw, 1500px); aspect-ratio: 1.7;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side, rgba(233, 196, 140, .20), rgba(196, 154, 108, .09) 45%, rgba(196, 154, 108, 0) 75%);
  animation: waBreathe 9s ease-in-out infinite alternate;
}
@keyframes waBreathe { from { opacity: .72; transform: translate(-50%, -50%) scale(1); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.wa-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wa-dark > *:not(.wa-ruler) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .wa-title-card::before { animation: none; } }

/* chapter guide: the five promises along the bottom, lighting up as you pass them */
.wa-guide { position: absolute; left: 7vw; right: 7vw; bottom: 5.5vh; z-index: 6; --line: rgba(242, 232, 212, .2); --dim: rgba(242, 232, 212, .38); --done: rgba(242, 232, 212, .72); --on: #c49a6c; transition: color .4s ease; }
.wa-guide.on-light { --line: rgba(44, 30, 20, .18); --dim: rgba(44, 30, 20, .38); --done: rgba(44, 30, 20, .7); --on: #8a6a4c; }
.wa-guide-line { height: 1px; background: var(--line); transition: background .4s ease; }
.wa-guide-line span { display: block; height: 100%; background: #A67C52; transform-origin: left center; transform: scaleX(0); }
.wa-guide ol { list-style: none; margin: 0; padding: 0; }
.wa-guide li { position: absolute; left: var(--x); bottom: 0; transform: translateX(-50%); }
.wa-guide li::before { content: ""; position: absolute; left: 50%; bottom: -4px; width: 1px; height: 9px; background: var(--dim); transition: background .4s ease, height .4s ease; }
.wa-guide button {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 0 .4rem 1.1rem; margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--dim); white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  transition: color .4s ease;
}
.wa-guide-n { font-variant-numeric: tabular-nums; opacity: .8; }
.wa-guide-t { padding-left: .3em; }
.wa-guide li.is-done button { color: var(--done); }
.wa-guide li.is-done::before { background: var(--done); }
.wa-guide li.is-on button { color: var(--on); }
.wa-guide li.is-on::before { background: var(--on); height: 13px; bottom: -6px; }
.wa-guide button:hover, .wa-guide button:focus-visible { color: var(--on); outline: none; }
.wa-guide button:focus-visible .wa-guide-t { text-decoration: underline; text-underline-offset: 4px; }
@media screen and (min-width: 768px) { .wa-title-card .wa-ruler { display: none; } }
@media screen and (max-width: 991px) { .wa-guide-t { display: none; } }
@media screen and (max-width: 767px) { .wa-guide { display: none; } }
.wa-guide li.is-on .wa-guide-t { font-weight: 500; }

/* Diablo Magazine masthead on the award panel */
.wa-award .wa-diablo { margin: 0 auto 1.8rem; line-height: 0; }
.wa-diablo img { display: block; width: 160px; height: auto; margin: 0 auto; opacity: .92; }
@media screen and (max-width: 479px) { .wa-diablo img { width: 130px; } }

/* award years link to Diablo's winner announcements */
a.wa-year { color: inherit; text-decoration: none; transition: color .35s ease; }
a.wa-year:hover, a.wa-year:focus-visible { color: #c49a6c; outline: none; }

/* hero: quiet pointer to the in-home consultation */
.hero-note {
  display: block; margin-top: 1.3rem; text-align: center;
  font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(242, 232, 212, .72); text-decoration: none; transition: color .3s ease;
}
.hero-note:hover, .hero-note:focus-visible { color: #c49a6c; outline: none; }
@media screen and (max-width: 479px) { .hero-note { font-size: .62rem; letter-spacing: .22em; } }
.hero-note { color: rgba(242, 232, 212, .9); text-shadow: 0 1px 12px rgba(26, 22, 18, .55); }

/* Why Abode title card: the family line */
.wa-story {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.5; color: rgba(242, 232, 212, .72); max-width: 34rem; margin: 1.6rem auto 0;
}
@media screen and (max-width: 479px) { .wa-story { font-size: 1.05rem; padding: 0 .5rem; } }

/* See What's Possible: one quiet line under the heading */
.hw-sub { font-family: 'Jost', sans-serif; font-size: 1rem; line-height: 1.7; opacity: .75; margin: 1rem 0 0; }

/* script accent: La Belle Aurore (free, licensed for web) replaces Adobe Handwriting Ernie */
.cursive_font { font-family: 'La Belle Aurore', cursive; letter-spacing: .01em; }
.hp_hero_made-in_container .cursive_font p { font-size: 1.3em; }

/* ============================
   HOME STORY: a slim band between See What's Possible and Why Abode
   ============================ */
.home-story { background: #F3EDE3; color: #2C1E14; padding: 16vh 7vw; position: relative; z-index: 1; }
.hs-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 6vw; align-items: end; max-width: 90rem; margin: 0 auto; }
.hs-big { font-family: 'Cormorant Garamond', serif; font-weight: 400; text-transform: uppercase; font-size: clamp(2.8rem, 6.4vw, 6.4rem); line-height: .98; letter-spacing: .01em; margin: 0; }
.hs-big span { display: block; }
.hs-big span + span { padding-left: 7vw; color: #8a6a4c; }
.hs-ticks { display: flex; align-items: flex-end; gap: 10px; height: 14px; margin-bottom: 1.6rem; color: #2C1E14; }
.hs-ticks span { width: 1px; height: 8px; background: currentColor; opacity: .45; }
.hs-ticks .tall { height: 14px; opacity: .8; }
.hs-body { font-family: 'Jost', sans-serif; font-size: 1.02rem; line-height: 1.8; opacity: .86; margin: 0 0 1.8rem; max-width: 30rem; }
.hs-link { display: inline-block; font-family: 'Jost', sans-serif; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .3rem; transition: color .3s ease; }
.hs-link:hover, .hs-link:focus-visible { color: #A67C52; outline: none; }
@media screen and (max-width: 991px) { .hs-grid { grid-template-columns: 1fr; gap: 3rem; align-items: start; } }
@media screen and (max-width: 767px) {
  .home-story { padding: 11vh 7vw; }
  .hs-big span + span { padding-left: 0; }
}
@media screen and (max-width: 479px) { .hs-big { font-size: 2.6rem; } }


/* See What's Possible: no title swap on hover, the frame number stays */
@media screen and (min-width: 768px) {
  .swiper-slide.hp_works_slide:hover .hp_works_title_full { opacity: 0 !important; }
  .swiper-slide.hp_works_slide:hover .hp_works_title_initials { opacity: 1 !important; }
}
.hp_works_slide_link { cursor: default; }

/* Chapter guide: hover lift + one-time shimmer (hints that it's clickable) */
.wa-guide button { position: relative; }
.wa-guide-n { display: inline-block; transition: transform .35s ease; }

.wa-guide button:hover .wa-guide-n, .wa-guide button:focus-visible .wa-guide-n { transform: translateY(-2px); }
.wa-guide li:hover::before, .wa-guide li:focus-within::before { background: var(--on); height: 13px; bottom: -6px; }
.wa-guide-line { position: relative; overflow: visible; }
.wa-guide-line::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 16%; height: 3px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(196,154,108,0), rgba(214,176,128,.95), rgba(196,154,108,0));
  filter: blur(1px);
}
.wa-guide.is-hint .wa-guide-line::after { animation: waGuideSweep 1.9s cubic-bezier(.45,.05,.35,1) forwards; }
@keyframes waGuideSweep { 0% { left: -16%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.wa-guide.is-hint li button { animation: waGuideGlint 1s ease forwards; }
.wa-guide.is-hint li:nth-child(1) button { animation-delay: .2s; }
.wa-guide.is-hint li:nth-child(2) button { animation-delay: .5s; }
.wa-guide.is-hint li:nth-child(3) button { animation-delay: .8s; }
.wa-guide.is-hint li:nth-child(4) button { animation-delay: 1.1s; }
.wa-guide.is-hint li:nth-child(5) button { animation-delay: 1.4s; }
@keyframes waGuideGlint { 0%, 100% { filter: none; } 40% { color: var(--on); } }
@media (prefers-reduced-motion: reduce) {
  .wa-guide.is-hint .wa-guide-line::after, .wa-guide.is-hint li button { animation: none; }
  .wa-guide-n { transition: none; }
}

/* ---------- Cursor ring (desktop, mouse only; added by js/cursor-ring.js) ---------- */
.cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .35s ease; }
.cursor-ring::before {
  content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(166, 124, 82, .75); background: rgba(196, 154, 108, 0);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background-color .4s ease, border-color .4s ease;
}
.cursor-ring.is-on { opacity: 1; }
.cursor-ring.is-away { opacity: 0; }
.cursor-ring.is-link::before { transform: scale(1.55); background: rgba(196, 154, 108, .12); border-color: rgba(166, 124, 82, .55); }
.cursor-ring.is-small::before { transform: scale(.6); border-color: rgba(196, 154, 108, .8); }
.cursor-ring.is-press::before { transform: scale(.85); }
.cursor-ring.is-link.is-press::before { transform: scale(1.3); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-ring { display: none; } }

/* ---------- Award years: one-time glow (js/award-glow.js) ---------- */
.wa-years.is-glow .wa-year { animation: waYearGlow 1s ease both; }
.wa-years.is-glow .wa-year:nth-child(1) { animation-delay: 0s; }
.wa-years.is-glow .wa-year:nth-child(2) { animation-delay: .22s; }
.wa-years.is-glow .wa-year:nth-child(3) { animation-delay: .44s; }
.wa-years.is-glow .wa-year:nth-child(4) { animation-delay: .66s; }
@keyframes waYearGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(214,176,128,0); }
  40% { color: #e2bd8c; text-shadow: 0 0 18px rgba(214,176,128,.55), 0 0 42px rgba(196,154,108,.25); }
}
@media (prefers-reduced-motion: reduce) { .wa-years.is-glow .wa-year { animation: none; } }

/* Phones: "Made for" on one line with a little more room above the tag (was crowding "Living") */
@media screen and (max-width: 767px) {
  .section_hero_followup_content_card .abode-display-text:nth-child(1) { font-size: 1.15rem; letter-spacing: .3em; bottom: calc(100% + .7rem); line-height: 1.2; }
  .section_hero_followup_content_card .abode-display-text:nth-child(1) br { display: none; }
}

/* ---------- Back to top (added by js/back-to-top.js) ---------- */
.to-top {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 890;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212, 196, 176, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(166, 124, 82, .7); color: #6f4e2f;
  box-shadow: 0 6px 18px rgba(26, 22, 18, .12);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s, background-color .3s ease, border-color .3s ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .4s ease, transform .4s ease, visibility 0s, background-color .3s ease, border-color .3s ease; }
.to-top:hover { background: rgba(222, 208, 190, .92); border-color: #A67C52; }
.to-top:hover svg { transform: translateY(-2px); }
.to-top svg { transition: transform .3s ease; }
.to-top:focus-visible { outline: 1px solid #A67C52; outline-offset: 3px; }
body.navbar-menu-open .to-top { opacity: 0; visibility: hidden; }
@media screen and (max-width: 767px) {
  .to-top { right: 14px; width: 44px; height: 44px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top svg { transition: none; }
  .to-top:hover svg { transform: none; }
}

/* Home intro: keep the hero text and menu hidden until their entrance animation starts (no flash). Removed by js/main.js, or 1.5s after the page loads as a fallback. */
.intro-wait .hp_section_hero h1, .intro-wait .cascade_reveal, .intro-wait .navbar { visibility: hidden; }

/* ---------- Why Abode side arrows (desktop; added by js/why-abode.js) ---------- */
.wa-arrow {
  position: absolute; top: 50%; z-index: 5; width: 60px; height: 60px; margin-top: -30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: #C49A6C; opacity: .42;
  transition: opacity .35s ease, color .35s ease, transform .35s ease, visibility 0s;
}
.wa-arrow--prev { left: 12px; }
.wa-arrow--next { right: 12px; }
.wa-arrow.on-light { color: #8a6440; }
.wa-arrow:hover, .wa-arrow:focus-visible { opacity: 1; }
.wa-arrow--prev:hover { transform: translateX(-3px); }
.wa-arrow--next:hover { transform: translateX(3px); }
.wa-arrow:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.wa-arrow.is-off { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
@media (max-width: 767px) { .wa-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-arrow { transition: none; } .wa-arrow:hover { transform: none; } }

/* ---------- Footer signature: "Lafayette" signed beside the wordmark (js/footer-sign.js) ---------- */
.abode-footer-logo.has-sign { position: relative; margin-bottom: 5.5vw; }
.abode-footer-logo.has-sign .abode-footer-svg { transform: translateX(-7%); }
.footer15_image-wrapper { overflow: visible; }
.ft-sign { position: absolute; width: 31%; right: 9%; bottom: -34%; transform: rotate(-6deg); overflow: visible; pointer-events: none; }
.ft-sign .sg-l {
  fill: #f2e8d4; fill-opacity: 0; stroke: #f5dcae; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .95;
}
.ft-sign.is-signing, .ft-sign.is-signed { filter: drop-shadow(0 0 2px rgba(245, 214, 160, .7)) drop-shadow(0 0 10px rgba(196, 154, 108, .45)); }
.ft-sign.is-signing .sg-l {
  animation: sgDraw .55s cubic-bezier(.45, .05, .35, 1) forwards, sgFill .9s ease forwards;
  animation-delay: calc(var(--i) * .32s), calc(3.3s + var(--i) * .06s);
}
.ft-sign.is-signed .sg-l { stroke-dashoffset: 0; fill-opacity: .92; stroke-opacity: .35; }
@keyframes sgDraw { to { stroke-dashoffset: 0; } }
@keyframes sgFill { to { fill-opacity: .92; stroke-opacity: .35; } }
@media screen and (max-width: 767px) {
  .abode-footer-logo.has-sign { margin-bottom: 9vw; }
  .abode-footer-logo.has-sign .abode-footer-svg { transform: translateX(-9%); }
  .ft-sign { width: 40%; right: 6%; bottom: -44%; }
}

/* Footer: AL emblem beside the wordmark (cream, matches the word) */
.footer_abode .footer15_logo-link-2 { display: inline-flex; align-items: center; gap: .95rem; text-decoration: none; }
.footer_abode .footer15_logo-link-2::before {
  content: ""; flex: none; width: 21px; height: 35px;
  background: #f2e8d4;
  -webkit-mask: url(../images/abode-emblem-mark.png) center / contain no-repeat;
          mask: url(../images/abode-emblem-mark.png) center / contain no-repeat;
}

/* Why Abode title card: "Why" over the bold abode wordmark, in cream */
.wa-title-card .wa-title { display: flex; flex-direction: column; align-items: center; gap: .18em; line-height: 1; }
.wa-title-card .wa-why { display: block; font-size: .6em; letter-spacing: .14em; }
.wa-title-card .wa-abode { display: block; height: 1.3em; width: auto; max-width: 80vw; overflow: visible; }
.wa-title-card .wa-abode path { fill: #f2e8d4; }

/* Wordmark: the bold "abode" logo everywhere the name appears as a logo (menu, footer).
   The text stays in the page for screen readers and search; the logo is drawn as a mask in the text colour. */
.abode-wordmark {
  display: inline-block; vertical-align: middle;
  height: 1.45rem; width: 5.43rem;              /* 3.74 : 1, the logo's proportions */
  letter-spacing: 0; text-indent: 110%; overflow: hidden; white-space: nowrap;
  background-color: currentColor;
  -webkit-mask: url(../images/abode-wordmark.svg) left center / contain no-repeat;
          mask: url(../images/abode-wordmark.svg) left center / contain no-repeat;
}
@media screen and (max-width: 767px) { .abode-wordmark { height: 1.3rem; width: 4.87rem; } }
.footer_abode .abode-wordmark { color: #f2e8d4; }   /* match the cream emblem beside it */

/* Phones: back-to-top sits beside the Book bar, on the same row, so neither covers text */
@media screen and (max-width: 767px) {
  .m-book { height: 46px; padding-top: 0; padding-bottom: 0; transition: transform .45s ease, opacity .45s ease, background .3s ease, right .4s ease; }
  html.to-top-on .m-book { right: 68px; }
  .to-top { width: 46px; height: 46px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
}
/* Phones: "Made for" sits over the bright photo above it; a deeper soft shadow so it stays readable */
@media screen and (max-width: 767px) {
  .section_hero_followup_content_card .abode-display-text:nth-child(1) {
    text-shadow: 0 0 3px rgba(20, 16, 12, .9), 0 0 10px rgba(20, 16, 12, .75), 0 0 26px rgba(20, 16, 12, .55);
  }
}

/* Hero: each rotating word carries its own copy of the headline's gradient.
   (The parent h1's clipped gradient doesn't reach words that fade and move, so they were invisible.) */
.gradient-text .rotating-word {
  background-image: linear-gradient(126deg, #fff, #f8e7c380);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================
   HOME: "Made for" expanding panels (replaces the three floating cards)
   Three tall photos in a row; the one you point at widens and its word appears.
   ============================ */
.hp_section_hero .section_hero_followup_content { padding-left: 4vw; padding-right: 4vw; gap: 12px; align-items: center; }
.hp_section_hero .section_hero_followup_content_card {
  flex: 1 1 0; max-width: none; width: auto; height: 72vh; height: 72svh; aspect-ratio: auto !important;
  margin: 0 !important; border-radius: 10px; overflow: hidden;
  transition: flex .8s cubic-bezier(.2, .75, .2, 1);
}
.hp_section_hero .section_hero_followup_content_card.card-2 { order: 1; }   /* Residential first */
.hp_section_hero .section_hero_followup_content_card.card-1 { order: 2; }   /* then Commercial, then Custom */
.hp_section_hero .section_hero_followup_content_card .abode_feat_tag_bg { position: absolute; inset: 0; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.hp_section_hero .section_hero_followup_content_card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 17, 13, 0) 45%, rgba(21, 17, 13, .78) 100%);
}
.pn-vert {
  position: absolute; left: 1.4rem; bottom: 1.6rem; z-index: 2; pointer-events: none;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Jost', sans-serif; font-size: .78rem; letter-spacing: .34em; text-transform: uppercase; color: #f2e8d4;
  transition: opacity .4s ease;
}
.pn-big {
  position: absolute; left: 2.2rem; bottom: 2rem; z-index: 2; pointer-events: none; color: #f2e8d4;
  opacity: 0; transform: translateY(14px); transition: opacity .6s ease .15s, transform .6s ease .15s;
}
.pn-mf { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; color: #c9a476; }
.pn-w { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.pn-sub { margin-top: .6rem; font-family: 'Jost', sans-serif; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(242, 232, 212, .65); }
@media (hover: hover) and (min-width: 768px) {
  .hp_section_hero .section_hero_followup_content_card:hover,
  .hp_section_hero .section_hero_followup_content_card:focus-within { flex-grow: 2.6; }
  .hp_section_hero .section_hero_followup_content_card:hover .pn-vert,
  .hp_section_hero .section_hero_followup_content_card:focus-within .pn-vert { opacity: 0; }
  .hp_section_hero .section_hero_followup_content_card:hover .pn-big,
  .hp_section_hero .section_hero_followup_content_card:focus-within .pn-big { opacity: 1; transform: none; }
  .hp_section_hero .section_hero_followup_content_card:hover .abode_feat_tag_bg { transform: scale(1.03); }
}
/* Phones: panels stack at one height (no jumping while you scroll); the one in view shows its word */
@media screen and (max-width: 767px) {
  .hp_section_hero .section_hero_followup_content { padding-left: 1rem; padding-right: 1rem; }
  .hp_section_hero .section_hero_followup_content_card,
  .hp_section_hero .section_hero_followup_content_card.active { flex: none; width: 100%; height: 42vh; height: 42svh; max-width: 100%; }
  .pn-vert { writing-mode: horizontal-tb; transform: none; left: 1.2rem; bottom: 1.3rem; }
  .pn-big { left: 1.4rem; bottom: 1.4rem; }
  .pn-w { font-size: 2.6rem; }
  .hp_section_hero .section_hero_followup_content_card.active .pn-vert { opacity: 0; }
  .hp_section_hero .section_hero_followup_content_card.active .pn-big { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hp_section_hero .section_hero_followup_content_card, .pn-big, .pn-vert, .abode_feat_tag_bg { transition: none !important; }
}

/* Closing section: quiet "or text us a photo" under the main button */
.cf-photo { display: block; width: max-content; margin: 1.1rem auto 0; font-family: 'Jost', sans-serif; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(242,232,212,.75); text-decoration: none; border-bottom: 1px solid rgba(242,232,212,.3); transition: color .3s ease, border-color .3s ease; }
.cf-photo:hover, .cf-photo:focus-visible { color: #f2e8d4; border-bottom-color: #c49a6c; }

/* Desktop menu: phone number beside Book a Free Visit (many homeowners prefer to call) */
.nav-phone {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: .8rem; letter-spacing: .12em;
  color: #f2e8d4; text-decoration: none; white-space: nowrap; margin-right: 1.6rem; opacity: .85;
  transition: opacity .3s ease, color .3s ease;
}
.nav-phone:hover, .nav-phone:focus-visible { opacity: 1; color: #d9b98f; }
@media screen and (max-width: 1100px) { .nav-phone { display: none; } }

/* Why Abode arrows: a little more visible (thin ring + brighter chevron), sized to clear the panel text */
.wa-arrow { width: 50px; height: 50px; margin-top: -25px; opacity: .8; border: 1px solid rgba(196, 154, 108, .55); background: transparent; }
.wa-arrow svg { width: 30px; height: 30px; }
.wa-arrow.on-light { border-color: rgba(138, 100, 64, .45); background: transparent; }
.wa-arrow svg path { stroke-width: 1.4; }
.wa-arrow--prev { left: 8px; }
.wa-arrow--next { right: 14px; }

/* Longer rotating phrases ("Something Built to Last"): keep them on one line on phones */
@media screen and (max-width: 767px) { .rotating-word-wrapper { font-size: min(1em, 6.6vw); } }