/* ============================================================
   HOMEPAGE — index.css
   All homepage-specific styles. Uses tokens from heirloom.css.
   ============================================================ */

/* ── Reset homepage body ─────────────────────────────────── */
.hp-body { overflow-x: hidden; }

/* ── HERO ────────────────────────────────────────────────── */
.hp-hero {
    position:        relative;
    height:          100vh;
    min-height:      600px;
    max-height:      900px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
}

.hp-hero-img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center 40%;
    filter:     brightness(.55) contrast(1.1);
    transform:  scale(1.04);
    animation:  heroZoom 12s ease-out forwards;
}

@keyframes heroZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1.0); }
}

/* Grain texture overlay */
.hp-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
    opacity:    .4;
    z-index:    1;
    pointer-events: none;
}

/* Gradient vignette — bottom fade for text legibility */
.hp-hero::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.1) 0%,
        rgba(0,0,0,.0) 40%,
        rgba(0,0,0,.55) 100%
    );
    z-index:    2;
}

.hp-hero-content {
    position:   relative;
    z-index:    3;
    text-align: center;
    padding:    0 24px;
    max-width:  820px;
    animation:  heroFade 1.4s ease both;
    animation-delay: .3s;
}

@keyframes heroFade {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hp-hero-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          rgba(212,175,80,.9);
    margin-bottom:  20px;
    display:        block;
}

.hp-hero-title {
    font-family:    var(--ff-display);
    font-size:      clamp(36px, 6vw, 72px);
    font-weight:    400;
    color:          #f8f4ee;
    line-height:    1.1;
    letter-spacing: .06em;
    margin-bottom:  24px;
}

.hp-hero-rule {
    width:      56px;
    height:     1px;
    background: rgba(212,175,80,.8);
    margin:     0 auto 24px;
}

.hp-hero-sub {
    font-family:    var(--ff-editorial);
    font-size:      clamp(17px, 2vw, 22px);
    font-weight:    300;
    font-style:     italic;
    color:          rgba(248,244,238,.82);
    line-height:    1.6;
    letter-spacing: .01em;
    margin-bottom:  40px;
    max-width:      600px;
    margin-left:    auto;
    margin-right:   auto;
}

.hp-hero-ctas {
    display:     flex;
    gap:         16px;
    justify-content: center;
    flex-wrap:   wrap;
}

.hp-btn-primary {
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--carbon);
    background:      rgba(212,175,80,.95);
    border:          1px solid rgba(212,175,80,.95);
    padding:         14px 36px;
    text-decoration: none;
    transition:      background .2s, color .2s;
    display:         inline-block;
}
.hp-btn-primary:hover {
    background: #f5f5f0;
    border-color: #f5f5f0;
}

.hp-btn-ghost {
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           rgba(248,244,238,.9);
    background:      transparent;
    border:          1px solid rgba(248,244,238,.45);
    padding:         14px 36px;
    text-decoration: none;
    transition:      border-color .2s, color .2s;
    display:         inline-block;
}
.hp-btn-ghost:hover {
    border-color: rgba(212,175,80,.8);
    color:        rgba(212,175,80,.9);
}

/* Scroll indicator */
.hp-scroll-hint {
    position:   absolute;
    bottom:     32px;
    left:       50%;
    transform:  translateX(-50%);
    z-index:    3;
    display:    flex;
    flex-direction: column;
    align-items:center;
    gap:        6px;
    animation:  heroFade 1.4s ease both;
    animation-delay: 1.2s;
}
.hp-scroll-hint span {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color:          rgba(212,175,80,.7);
}
.hp-scroll-line {
    width:     1px;
    height:    40px;
    background:rgba(212,175,80,.5);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100% { transform: scaleY(1); opacity:.5; }
    50%      { transform: scaleY(.5); opacity:1; }
}


/* ── FEATURED SECTION ────────────────────────────────────── */
.hp-featured {
    background: var(--chalk);
    padding:    clamp(64px, 8vw, 96px) 0;
}
.hp-featured-inner {
    max-width: 1300px;
    margin:    0 auto;
    padding:   0 clamp(20px, 4vw, 48px);
}
.hp-section-label {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    text-align:     center;
    margin-bottom:  10px;
    display:        block;
}
.hp-section-title {
    font-family:    var(--ff-display);
    font-size:      clamp(22px, 3vw, 34px);
    font-weight:    400;
    color:          var(--carbon);
    text-align:     center;
    letter-spacing: .06em;
    margin-bottom:  48px;
}

/* Three-panel asymmetric grid */
.hp-panels {
    display:               grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap:                   3px;
    height:                clamp(460px, 54vw, 680px);
}

.hp-panel {
    position:       relative;
    overflow:       hidden;
    display:        flex;
    align-items:    flex-end;
    text-decoration:none;
    color:          inherit;
}

.hp-panel img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.4,0,.2,1);
    filter:     brightness(.72);
}
.hp-panel:hover img { transform: scale(1.06); filter: brightness(.6); }

.hp-panel::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 55%);
    z-index:    1;
}

.hp-panel-body {
    position:  relative;
    z-index:   2;
    padding:   28px 24px;
    width:     100%;
}

.hp-panel-tag {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color:          rgba(212,175,80,.85);
    display:        block;
    margin-bottom:  8px;
}
.hp-panel-name {
    font-family:    var(--ff-display);
    font-size:      clamp(18px, 2.2vw, 26px);
    font-weight:    400;
    color:          #f5f0e8;
    letter-spacing: .06em;
    line-height:    1.2;
    margin-bottom:  14px;
    display:        block;
}
.hp-panel-link {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          rgba(212,175,80,.8);
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    transition:     gap .2s, color .2s;
}
.hp-panel:hover .hp-panel-link { gap: 14px; color: rgba(212,175,80,1); }
.hp-panel-link::after { content: '→'; }


/* ── TRUST STRIP ─────────────────────────────────────────── */
.hp-trust {
    background: var(--carbon);
    border-top: 3px solid var(--red);
    padding:    clamp(56px, 7vw, 88px) 0;
    position:   relative;
    overflow:   hidden;
}

/* Subtle diagonal texture */
.hp-trust::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.012) 0px,
        rgba(255,255,255,.012) 1px,
        transparent 1px,
        transparent 40px
    );
    pointer-events: none;
}

.hp-trust-inner {
    max-width: 1100px;
    margin:    0 auto;
    padding:   0 clamp(20px, 4vw, 48px);
    display:   grid;
    grid-template-columns: repeat(3, 1fr);
    gap:       clamp(24px, 4vw, 64px);
    align-items: center;
}

.hp-trust-item {
    text-align:  center;
    position:    relative;
    padding:     0 24px;
}
.hp-trust-item + .hp-trust-item::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        10%;
    height:     80%;
    width:      1px;
    background: #1e1e1e;
}

.hp-trust-num {
    font-family:    var(--ff-display);
    font-size:      clamp(52px, 7vw, 84px);
    font-weight:    400;
    color:          rgba(212,175,80,.9);
    letter-spacing: .02em;
    line-height:    1;
    display:        block;
    margin-bottom:  8px;
}
.hp-trust-num sup {
    font-size:   50%;
    vertical-align: super;
    letter-spacing: .06em;
}
.hp-trust-label {
    font-family:    var(--ff-display);
    font-size:      clamp(13px, 1.4vw, 16px);
    font-weight:    400;
    font-style:     italic;
    color:          #888;
    letter-spacing: .04em;
    line-height:    1.5;
    display:        block;
    margin-bottom:  8px;
}
.hp-trust-detail {
    font-family:    var(--ff-ui);
    font-size:      11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          #3a3a3a;
    line-height:    1.6;
}

/* Five stars */
.hp-stars {
    display:         flex;
    justify-content: center;
    gap:             3px;
    margin-bottom:   10px;
}
.hp-stars span {
    color:     rgba(212,175,80,.85);
    font-size: 18px;
    line-height: 1;
}


/* ── ABOUT ───────────────────────────────────────────────── */
.hp-about {
    background: var(--surface);
    padding:    clamp(72px, 9vw, 112px) 0;
    overflow:   hidden;
}
.hp-about-inner {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 clamp(20px, 4vw, 48px);
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       clamp(40px, 6vw, 96px);
    align-items: center;
}

.hp-about-img-wrap {
    position:   relative;
    aspect-ratio: 4 / 5;
    overflow:   hidden;
}
.hp-about-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform .8s ease;
}
.hp-about-img-wrap:hover img { transform: scale(1.03); }

/* Decorative offset border */
.hp-about-img-wrap::before {
    content:    '';
    position:   absolute;
    top:        -12px;
    left:       -12px;
    right:      12px;
    bottom:     12px;
    border:     1px solid var(--rule);
    z-index:    -1;
}

.hp-about-text {}
.hp-about-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    display:        block;
    margin-bottom:  16px;
}
.hp-about-title {
    font-family:    var(--ff-display);
    font-size:      clamp(24px, 3vw, 38px);
    font-weight:    400;
    color:          var(--carbon);
    line-height:    1.2;
    letter-spacing: .04em;
    margin-bottom:  8px;
}
.hp-about-rule {
    width:      40px;
    height:     2px;
    background: var(--red);
    margin:     20px 0 24px;
}
.hp-about-lead {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px, 1.6vw, 19px);
    font-weight:    300;
    font-style:     italic;
    color:          #444;
    line-height:    1.75;
    margin-bottom:  20px;
}
.hp-about-body {
    font-family:    var(--ff-ui);
    font-size:      14px;
    color:          #666;
    line-height:    1.85;
    letter-spacing: .02em;
    margin-bottom:  20px;
}
.hp-about-body + .hp-about-body { margin-top: -8px; }

.hp-about-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--carbon);
    text-decoration: none;
    border-bottom:   1px solid rgba(15,15,15,.3);
    padding-bottom:  2px;
    margin-top:      16px;
    transition:      gap .2s, border-color .2s, color .2s;
}
.hp-about-cta::after { content: '→'; }
.hp-about-cta:hover  { gap: 16px; color: var(--red); border-color: var(--red); }


/* ── CONTACT ─────────────────────────────────────────────── */
.hp-contact {
    background:    var(--warm);
    border-top:    1px solid var(--rule);
    padding:       clamp(64px, 8vw, 96px) 0;
}
.hp-contact-inner {
    max-width:   860px;
    margin:      0 auto;
    padding:     0 clamp(20px, 4vw, 48px);
    text-align:  center;
}
.hp-contact-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    display:        block;
    margin-bottom:  16px;
}
.hp-contact-title {
    font-family:    var(--ff-display);
    font-size:      clamp(24px, 3.5vw, 40px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .06em;
    margin-bottom:  8px;
}
.hp-contact-rule {
    width:      40px;
    height:     2px;
    background: var(--red);
    margin:     20px auto 28px;
}
.hp-contact-copy {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px, 1.6vw, 19px);
    font-weight:    300;
    font-style:     italic;
    color:          #555;
    line-height:    1.75;
    margin-bottom:  40px;
    max-width:      600px;
    margin-left:    auto;
    margin-right:   auto;
}
.hp-contact-actions {
    display:         flex;
    gap:             16px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-bottom:   48px;
}

.hp-wa-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    color:           #f5f5f0;
    background:      #1e4a1e;
    border:          1px solid #2a6a2a;
    padding:         14px 28px;
    text-decoration: none;
    transition:      background .2s;
}
.hp-wa-btn:hover { background: #264e26; }

.hp-email-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    color:           var(--carbon);
    background:      transparent;
    border:          1px solid #ccc;
    padding:         14px 28px;
    text-decoration: none;
    transition:      border-color .2s;
}
.hp-email-btn:hover { border-color: var(--carbon); }

/* Contact details */
.hp-contact-details {
    display:         flex;
    justify-content: center;
    gap:             48px;
    flex-wrap:       wrap;
    border-top:      1px solid var(--rule);
    padding-top:     32px;
}
.hp-contact-detail-item {
    text-align: center;
}
.hp-contact-detail-label {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color:          var(--muted);
    display:        block;
    margin-bottom:  6px;
}
.hp-contact-detail-val {
    font-family:    var(--ff-editorial);
    font-size:      15px;
    font-style:     italic;
    color:          var(--carbon);
}


/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .hp-panels {
        grid-template-columns: 1fr;
        height:                auto;
    }
    .hp-panel {
        height: 340px;
    }
    .hp-trust-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hp-trust-item + .hp-trust-item::before { display: none; }
    .hp-trust-item { border-top: 1px solid #1e1e1e; padding-top: 48px; }
    .hp-trust-item:first-child { border-top: none; padding-top: 0; }
    .hp-about-inner {
        grid-template-columns: 1fr;
    }
    .hp-about-img-wrap {
        aspect-ratio: 3/2;
        max-height: 360px;
    }
    .hp-about-img-wrap::before { display: none; }
}

@media (max-width: 600px) {
    .hp-hero-title   { font-size: clamp(30px, 9vw, 48px); }
    .hp-panel        { height: 280px; }
    .hp-hero-ctas    { flex-direction: column; align-items: center; }
    .hp-btn-primary,
    .hp-btn-ghost    { width: 100%; text-align: center; max-width: 280px; }
}