/* ================================================================
   SELLERS PAGE — PAGE-SPECIFIC STYLES
   Location: /home/kitchenbrand/public_html/T-Belle/styles/sellers.css

   Requires global.css to be loaded first.

   Variable map (old → new):
     --gold              → var(--accent)           [global]
     --gold-lt           → var(--accent-light)      [global]
     --char              → var(--charcoal)           [global]
     --r-md/lg/xl/2xl    → var(--radius-md/lg/xl/2xl) [global]
     --pine/pine-md/lt   → kept as page tokens (unique forest green family)
     --tiffany*          → removed (header handled by global)
     DM Sans             → var(--sans) = Jost        [global]

   Page palette notes:
     --pine is the dominant interactive color on this page.
     The header still uses --main (tiffany) from global — consistent site-wide.
     Body background overrides global white → warm cream.
================================================================ */


/* ================================================================
   PAGE-SPECIFIC TOKENS
================================================================ */
:root {
    /* ── Forest pine — sellers page primary ─────────────────── */
    --pine:     #1A3829;
    --pine-md:  #244D38;
    --pine-lt:  #2E6349;

    /* ── Warm neutrals (shared pattern with buyers page) ────── */
    --cream:     #FAF7F2;
    --cream-dk:  #F0EBE1;
    --stone:     #D6D0C4;
    --stone-dk:  #9A9488;
    --gold-pale: #F5E8D4;  /* very light accent tint */

    /* ── Deep dark (green-tinted black for footer/overlays) ─── */
    --ink:  #0E1210;

    /* ── Additional shadows (more depth than global) ────────── */
    --shadow-sm:   0 1px 8px  rgba(26,56,41,.08);
    --shadow-deep: 0 24px 80px rgba(14,18,16,.35);

    /* ── Slow transition variant ────────────────────────────── */
    --trans-slow: 0.5s cubic-bezier(.4,0,.2,1);
}

/* ================================================================
   BODY OVERRIDE
   Sellers page uses warm cream as body background vs global white.
================================================================ */
body {
    background:  var(--cream);
    color:       var(--charcoal);
    overflow-x:  hidden;
}


/* ================================================================
   READING PROGRESS BAR
================================================================ */
#read-progress {
    position:       fixed;
    top:            0;
    left:           0;
    z-index:        2000;
    height:         3px;
    width:          0%;
    background:     linear-gradient(90deg, var(--pine), var(--accent));
    transition:     width 0.1s linear;
    pointer-events: none;
}


/* ================================================================
   SCROLL REVEAL — disabled, content always visible
================================================================ */
.reveal, .reveal.visible,
.reveal-left, .reveal-left.visible,
.reveal-right, .reveal-right.visible {
    opacity:    1;
    transform:  none;
    transition: none;
}
.rd1, .rd2, .rd3, .rd4 { transition-delay: 0s; }


/* ================================================================
   HERO
================================================================ */
.hero {
    position:    relative;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    overflow:    hidden;
    background:  var(--pine);
}
/* Grid texture overlay */
.hero::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:  60px 60px;
    pointer-events:   none;
}
/* Photo background layer */
.hero-photo-bg {
    position:   absolute;
    inset:      0;
    background: url('https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=85') center/cover no-repeat;
}
.hero-photo-bg::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(26,56,41,.88) 0%, rgba(26,56,41,.70) 50%, rgba(26,56,41,.40) 100%);
}
/* Glow effects */
.hero-glow {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 60% at 65% 45%, rgba(200,146,58,.12) 0%, transparent 65%),
        radial-gradient(ellipse 50% 70% at 10% 80%, rgba(46,99,73,.30)  0%, transparent 55%);
}
.hero-inner {
    position:              relative;
    z-index:               1;
    max-width:             1280px;
    margin:                0 auto;
    padding:               120px 80px 100px;
    display:               grid;
    grid-template-columns: 1fr 480px;
    gap:                   80px;
    align-items:           center;
    width:                 100%;
}
.hero-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            14px;
    font-size:      11px;
    font-weight:    500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  24px;
    animation:      fadeUp .9s ease both;
}
.hero-eyebrow::before {
    content:    '';
    display:    block;
    width:      36px;
    height:     1px;
    background: var(--accent);
}
.hero-title {
    font-family:    var(--serif);
    font-size:      clamp(52px, 6.5vw, 84px);
    font-weight:    300;
    color:          var(--white);
    line-height:    .98;
    letter-spacing: -.01em;
    margin-bottom:  28px;
    animation:      fadeUp .9s .12s ease both;
}
.hero-title em {
    font-style:  italic;
    color:       var(--accent-light);
    display:     block;
}
.hero-body {
    font-size:     16px;
    color:         rgba(255,255,255,.62);
    max-width:     480px;
    line-height:   1.80;
    margin-bottom: 40px;
    animation:     fadeUp .9s .22s ease both;
}
.hero-ctas {
    display:   flex;
    gap:       14px;
    flex-wrap: wrap;
    animation: fadeUp .9s .32s ease both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero stats row */
.hero-stats-row {
    display:   flex;
    gap:       28px;
    margin-top: 44px;
    flex-wrap: wrap;
    animation: fadeUp .9s .42s ease both;
}
.h-stat-num {
    font-family:   var(--serif);
    font-size:     36px;
    font-weight:   300;
    color:         var(--white);
    line-height:   1;
}
.h-stat-num sup    { font-size: 18px; color: var(--accent); }
.h-stat-lbl        { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-top: 3px; }


/* ================================================================
   HERO VALUATION CARD
================================================================ */
.hero-val-card {
    background:    var(--white);
    border-radius: var(--radius-2xl);
    box-shadow:    var(--shadow-deep);
    overflow:      hidden;
    animation:     fadeUp .9s .18s ease both;
}
.hero-val-card-head {
    background: linear-gradient(135deg, var(--pine) 0%, var(--pine-md) 100%);
    padding:    28px 32px;
}
.hero-val-card-head p {
    font-size:      11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.55);
    margin-bottom:  6px;
}
.hero-val-card-head h3 {
    font-family: var(--serif);
    font-size:   28px;
    font-weight: 300;
    color:       var(--white);
}
.hero-val-card-body { padding: 28px 32px; }
.val-input-group    { margin-bottom: 16px; }
.val-input-group label {
    display:        block;
    font-size:      11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--stone-dk);
    margin-bottom:  5px;
}
.val-input-group input,
.val-input-group select {
    width:        100%;
    padding:      12px 14px;
    border:       1.5px solid var(--stone);
    border-radius: var(--radius-md);
    font-size:    14px;
    color:        var(--charcoal);
    background:   var(--white);
    appearance:   none;
    -webkit-appearance: none;
    font-family:  var(--sans);
    transition:   border-color var(--trans), box-shadow var(--trans);
}
.val-input-group input:focus,
.val-input-group select:focus {
    outline:      none;
    border-color: var(--pine);
    box-shadow:   0 0 0 3px rgba(26,56,41,.10);
}
.val-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.val-btn {
    width:           100%;
    padding:         15px;
    background:      var(--accent);
    color:           var(--white);
    border:          none;
    border-radius:   var(--radius-md);
    font-size:       14px;
    font-weight:     500;
    font-family:     var(--sans);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    transition:      background var(--trans), transform var(--trans), box-shadow var(--trans);
    margin-top:      4px;
    cursor:          pointer;
}
.val-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,146,58,.38); }
.val-privacy {
    font-size:       11px;
    color:           var(--stone-dk);
    text-align:      center;
    margin-top:      10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
}
.val-divider {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      14px 0;
    font-size:   11px;
    color:       var(--stone-dk);
}
.val-divider::before,
.val-divider::after { content: ''; flex: 1; height: 1px; background: var(--stone); }
.val-alt-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    font-size:       13px;
    color:           var(--pine);
    font-weight:     500;
    padding:         11px;
    border:          1.5px solid var(--stone);
    border-radius:   var(--radius-md);
    transition:      all var(--trans);
}
.val-alt-link:hover { border-color: var(--pine); background: rgba(26,56,41,.04); }


/* ================================================================
   FLOATING VALUATION PILL
================================================================ */
#val-pill {
    position:      fixed;
    bottom:        28px;
    left:          50%;
    transform:     translateX(-50%) translateY(80px);
    z-index:       800;
    opacity:       0;
    background:    var(--pine);
    color:         var(--white);
    border-radius: 999px;
    padding:       14px 28px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    box-shadow:    0 8px 32px rgba(26,56,41,.40);
    transition:    transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
    white-space:   nowrap;
    cursor:        pointer;
    border:        none;
    font-family:   var(--sans);
}
#val-pill.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
#val-pill:hover   { background: var(--pine-lt); }
.pill-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--accent);
    animation:     pillPulse 2s ease-in-out infinite;
}
@keyframes pillPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.8)} }
.pill-text  { font-size: 14px; font-weight: 500; }
.pill-sub   { font-size: 11px; color: rgba(255,255,255,.55); margin-left: 4px; }
.pill-arrow {
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      rgba(255,255,255,.12);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       14px;
}


/* ================================================================
   BUTTONS (extend global .btn base)
================================================================ */
.btn-accent {
    background:   var(--accent);
    color:        var(--white);
    border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,146,58,.38); }

.btn-pine {
    background:   var(--pine);
    color:        var(--white);
    border-color: var(--pine);
}
.btn-pine:hover { background: var(--pine-lt); transform: translateY(-1px); }

.btn-outline-pine {
    background:   transparent;
    color:        var(--pine);
    border-color: var(--pine);
}
.btn-outline-pine:hover { background: var(--pine); color: var(--white); }

.btn-outline-white {
    background:   transparent;
    color:        var(--white);
    border-color: rgba(255,255,255,.40);
}
.btn-outline-white:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.75); }


/* ================================================================
   SECTION UTILITIES
================================================================ */
.section       { padding: 100px 80px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            12px;
    font-size:      11px;
    font-weight:    500;
    letter-spacing: .20em;
    text-transform: uppercase;
    margin-bottom:  14px;
}
.section-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; }

.ey-accent          { color: var(--accent); }
.ey-accent::before  { background: var(--accent); }
.ey-pine            { color: var(--pine); }
.ey-pine::before    { background: var(--pine); }
.ey-blue            { color: var(--secondary); }
.ey-blue::before    { background: var(--secondary); }

.section-title  { font-family: var(--serif); letter-spacing: -.01em; line-height: 1.04; }
.title-xl       { font-size: clamp(40px,5vw,64px); font-weight: 300; }
.title-lg       { font-size: clamp(32px,4vw,52px); font-weight: 300; }
.title-md       { font-size: clamp(26px,3vw,38px); font-weight: 400; }

.ey-gold           { color: var(--accent); }
.ey-gold::before   { background: var(--accent); }

/* ================================================================
   SELLER TICKER TAPE
================================================================ */
.seller-ribbon {
    background:  var(--pine-md);
    overflow:    hidden;
    position:    relative;
    height:      52px;
    display:     flex;
    align-items: center;
    border-top:  1px solid rgba(255,255,255,.08);
}
.seller-ribbon::before,
.seller-ribbon::after {
    content:        '';
    position:       absolute;
    top: 0; bottom: 0;
    z-index:        2;
    width:          160px;
    pointer-events: none;
}
.seller-ribbon::before { left: 0;  background: linear-gradient(to right, var(--pine-md) 30%, transparent 100%); }
.seller-ribbon::after  { right: 0; background: linear-gradient(to left,  var(--pine-md) 0%,  transparent 100%); }
.seller-tag {
    position:       absolute;
    left:           20px;
    z-index:        3;
    flex-shrink:    0;
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    background:     rgba(255,255,255,1);
    color:          var(--ink);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding:        6px 14px;
    border-radius:  20px;
    white-space:    nowrap;
}
.seller-ticker-track {
    display:    inline-flex;
    align-items: center;
    white-space: nowrap;
    animation:  seller-scroll 42s linear infinite;
    will-change: transform;
}
.seller-ticker-track:hover { animation-play-state: paused; }
@keyframes seller-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.seller-tip {
    display:      inline-flex;
    align-items:  center;
    gap:          10px;
    padding:      0 32px;
    border-right: 1px solid rgba(255,255,255,.15);
    flex-shrink:  0;
    white-space:  nowrap;
}
.seller-tip-icon            { font-size: 15px; line-height: 1; }
.seller-tip-text            { font-size: 13px; color: rgba(255,255,255,.80); line-height: 1.3; }
.seller-tip-text strong     { color: var(--white); font-weight: 500; }
.seller-ticker-sep {
    display:      inline-block;
    width:        5px;
    height:       5px;
    border-radius: 50%;
    background:   var(--accent);
    opacity:      .55;
    margin:       0 32px;
    flex-shrink:  0;
}


/* ================================================================
   BREADCRUMB BAR
================================================================ */
.breadcrumb-bar {
    background:    var(--pine);
    padding:       14px 80px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.breadcrumb-bar nav {
    max-width:   1280px;
    margin:      0 auto;
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   12px;
    color:       rgba(255,255,255,.38);
}
.breadcrumb-bar a       { color: rgba(255,255,255,.38); transition: color var(--trans); }
.breadcrumb-bar a:hover { color: var(--accent); }
.breadcrumb-bar .sep    { opacity: .35; font-size: 10px; }
.breadcrumb-bar .current { color: rgba(255,255,255,.65); }


/* ================================================================
   INTRO / RESULTS SECTION
================================================================ */
.intro-section { background: var(--cream); padding: 100px 80px; }
.intro-inner {
    max-width:             1280px;
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    align-items:           center;
}
.intro-text .section-title { color: var(--charcoal); margin-bottom: 24px; }
.intro-text p              { font-size: 15px; color: #555550; line-height: 1.82; margin-bottom: 18px; }
.intro-text p.lead         { font-family: var(--serif); font-size: 20px; font-style: italic; color: var(--charcoal); line-height: 1.5; margin-bottom: 24px; }
.intro-img-wrap {
    position:      relative;
    aspect-ratio:  4/5;
    border-radius: var(--radius-2xl);
    overflow:      hidden;
    box-shadow:    var(--shadow-deep);
}
.intro-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.intro-img-badge {
    position:      absolute;
    bottom:        28px;
    left:          28px;
    background:    var(--pine);
    color:         var(--white);
    border-radius: var(--radius-xl);
    padding:       18px 22px;
    box-shadow:    0 8px 32px rgba(26,56,41,.40);
}
.intro-img-badge-num { font-family: var(--serif); font-size: 38px; font-weight: 300; line-height: 1; display: block; }
.intro-img-badge-lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 4px; line-height: 1.4; }

/* Results grid */
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.result-card {
    background:    var(--white);
    border-radius: var(--radius-xl);
    border:        1px solid var(--stone);
    padding:       28px 24px;
    box-shadow:    var(--shadow-sm);
    position:      relative;
    overflow:      hidden;
    transition:    transform var(--trans), box-shadow var(--trans);
}
.result-card::before {
    content:          '';
    position:         absolute;
    top: 0; left: 0; right: 0;
    height:           3px;
    background:       var(--accent);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform var(--trans);
}
.result-card:hover              { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.result-card:hover::before      { transform: scaleX(1); }
.result-num                     { font-family: var(--serif); font-size: 48px; font-weight: 300; color: var(--pine); line-height: 1; }
.result-num sup                 { font-size: 22px; color: var(--accent); }
.result-label                   { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-dk); margin-top: 6px; }
.result-sub                     { font-size: 12px; color: var(--stone-dk); margin-top: 3px; }
.result-card.featured           { background: var(--pine); border-color: var(--pine); grid-column: span 2; }
.result-card.featured .result-num   { color: var(--white); }
.result-card.featured .result-label { color: rgba(255,255,255,.55); }
.result-card.featured .result-sub   { color: rgba(255,255,255,.40); }


/* ================================================================
   MARKETING SECTION
================================================================ */
.marketing-section { background: var(--pine); padding: 100px 80px; }
.marketing-inner   { max-width: 1200px; margin: 0 auto; }
.marketing-header  { margin-bottom: 60px; }
.marketing-header .section-title { color: var(--white); margin-bottom: 16px; }
.marketing-header p              { font-size: 16px; color: rgba(255,255,255,.58); max-width: 560px; line-height: 1.75; }
.marketing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.mkt-card {
    background:    rgba(255,255,255,.05);
    border:        1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-xl);
    padding:       36px 30px;
    position:      relative;
    overflow:      hidden;
    transition:    background var(--trans), border-color var(--trans), transform var(--trans);
}
.mkt-card::after {
    content:          '';
    position:         absolute;
    bottom: 0; left: 0; right: 0;
    height:           2px;
    background:       var(--accent);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform var(--trans);
}
.mkt-card:hover       { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); transform: translateY(-4px); }
.mkt-card:hover::after { transform: scaleX(1); }
.mkt-icon {
    width:           52px;
    height:          52px;
    border-radius:   var(--radius-lg);
    background:      rgba(200,146,58,.15);
    border:          1px solid rgba(200,146,58,.25);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    margin-bottom:   22px;
}
.mkt-ghost-num {
    position:       absolute;
    top:            12px;
    right:          20px;
    font-family:    var(--serif);
    font-size:      80px;
    font-weight:    300;
    color:          rgba(255,255,255,.04);
    line-height:    1;
    user-select:    none;
    pointer-events: none;
}
.mkt-title { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 12px; line-height: 1.2; }
.mkt-desc  { font-size: 14px; color: rgba(255,255,255,.54); line-height: 1.75; }


/* ================================================================
   PROCESS — alternating editorial rows
================================================================ */
.process-section { background: var(--cream-dk); padding: 100px 80px; }
.process-inner   { max-width: 1100px; margin: 0 auto; }
.process-step-row {
    display:               grid;
    grid-template-columns: 80px 1fr 1fr;
    gap:                   48px;
    align-items:           center;
    padding:               52px 0;
    border-bottom:         1px solid var(--stone);
}
.process-step-row:first-of-type { padding-top: 0; }
.process-step-row:last-of-type  { border-bottom: none; padding-bottom: 0; }
.step-num-big {
    font-family:    var(--serif);
    font-size:      80px;
    font-weight:    300;
    color:          var(--stone);
    line-height:    1;
    text-align:     center;
    user-select:    none;
    transition:     color var(--trans);
}
.process-step-row:hover .step-num-big { color: var(--accent); }
.step-content h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--charcoal); margin-bottom: 12px; line-height: 1.15; }
.step-content p  { font-size: 14px; color: var(--stone-dk); line-height: 1.78; }
.step-detail {
    background:    var(--white);
    border-radius: var(--radius-lg);
    border:        1px solid var(--stone);
    padding:       22px 24px;
    box-shadow:    var(--shadow-sm);
}
.step-detail ul { list-style: none; }
.step-detail li {
    font-size:     13px;
    color:         var(--charcoal);
    padding:       6px 0;
    border-bottom: 1px solid var(--cream);
    display:       flex;
    align-items:   center;
    gap:           10px;
}
.step-detail li:last-child  { border-bottom: none; }
.step-detail li::before     { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.photo-strip {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    height:                320px;
    overflow:              hidden;
}
.photo-strip-img          { overflow: hidden; }
.photo-strip-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display:    block;
}
.photo-strip-img:hover img { transform: scale(1.05); }

/* Mobile: hide middle panel, show only 2 images side by side */
@media (max-width: 640px) {
    .photo-strip           { grid-template-columns: 1fr 1fr; height: 200px; }
    .photo-strip-mid       { display: none; }
}

/* ================================================================
   VALUATION CTA — split layout
================================================================ */
.valuation-section { background: var(--cream); padding: 100px 80px; }
.val-split {
    max-width:             1200px;
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0;
    border-radius:         var(--radius-2xl);
    overflow:              hidden;
    box-shadow:            var(--shadow-lift);
}
.val-left {
    background: linear-gradient(160deg, var(--pine) 0%, var(--pine-md) 100%);
    padding:    60px 52px;
    display:    flex;
    flex-direction: column;
    justify-content: center;
    position:   relative;
    overflow:   hidden;
}
.val-left::before {
    content:        '';
    position:       absolute;
    top:            -100px;
    right:          -100px;
    width:          300px;
    height:         300px;
    border-radius:  50%;
    background:     rgba(200,146,58,.08);
    pointer-events: none;
}
.val-left .section-title { color: var(--white); margin-bottom: 20px; }
.val-left p              { font-size: 15px; color: rgba(255,255,255,.62); line-height: 1.78; margin-bottom: 28px; }
.val-feature-list        { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.val-feature             { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(255,255,255,.80); }
.val-feature-icon {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      rgba(200,146,58,.18);
    border:          1px solid rgba(200,146,58,.30);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    flex-shrink:     0;
}
.val-right {
    background:      var(--white);
    padding:         52px 48px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}
.val-right h3    { font-family: var(--serif); font-size: 32px; font-weight: 400; color: var(--charcoal); margin-bottom: 6px; }
.val-right > p   { font-size: 14px; color: var(--stone-dk); margin-bottom: 28px; }
.val-form .form-row { margin-bottom: 14px; }
.val-form .form-row label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 4px; }
.val-form .form-row input,
.val-form .form-row select,
.val-form .form-row textarea {
    width:        100%;
    padding:      11px 14px;
    border:       1.5px solid var(--stone);
    border-radius: var(--radius-md);
    font-size:    14px;
    color:        var(--charcoal);
    background:   var(--white);
    appearance:   none;
    -webkit-appearance: none;
    font-family:  var(--sans);
    transition:   border-color var(--trans), box-shadow var(--trans);
}
.val-form .form-row input:focus,
.val-form .form-row select:focus,
.val-form .form-row textarea:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(26,56,41,.10); }
.val-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.val-form-submit {
    width:           100%;
    padding:         15px;
    background:      var(--pine);
    color:           var(--white);
    border:          none;
    border-radius:   var(--radius-md);
    font-size:       14px;
    font-weight:     500;
    font-family:     var(--sans);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    transition:      background var(--trans), transform var(--trans);
    cursor:          pointer;
}
.val-form-submit:hover { background: var(--pine-lt); transform: translateY(-1px); }


/* ================================================================
   TESTIMONIALS
================================================================ */
.testimonials-section { background: var(--cream-dk); padding: 100px 80px; }
.testimonials-inner   { max-width: 1200px; margin: 0 auto; }
.testimonials-header  { margin-bottom: 56px; }
.testimonials-header .section-title { color: var(--charcoal); }
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.t-card {
    background:    var(--white);
    border-radius: var(--radius-xl);
    border:        1px solid var(--stone);
    padding:       36px 32px;
    box-shadow:    var(--shadow-sm);
    position:      relative;
    overflow:      hidden;
    transition:    transform var(--trans), box-shadow var(--trans);
}
.t-card:hover           { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.t-card.featured        { background: var(--pine); border-color: var(--pine); }
.t-quote-mark           { font-family: var(--serif); font-size: 80px; font-weight: 300; line-height: .8; color: var(--gold-pale); margin-bottom: -8px; user-select: none; }
.t-card.featured .t-quote-mark { color: rgba(200,146,58,.20); }
.t-stars  { color: var(--accent); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.t-text   { font-family: var(--serif); font-size: 20px; font-style: italic; font-weight: 300; color: var(--charcoal); line-height: 1.55; margin-bottom: 24px; }
.t-card.featured .t-text { color: rgba(255,255,255,.88); }
.t-author { display: flex; align-items: center; gap: 12px; }
.t-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px; color: var(--white); flex-shrink: 0; }
.av-pine  { background: var(--pine-md); }
.av-accent { background: rgba(200,146,58,.85); }
.av-blue  { background: var(--secondary); }
.av-lt    { background: rgba(255,255,255,.18); }
.t-name   { font-size: 14px; font-weight: 500; color: var(--charcoal); }
.t-card.featured .t-name   { color: var(--white); }
.t-detail { font-size: 12px; color: var(--stone-dk); margin-top: 1px; }
.t-card.featured .t-detail { color: rgba(255,255,255,.42); }
.t-result {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    margin-top:    14px;
    background:    rgba(200,146,58,.10);
    border:        1px solid rgba(200,146,58,.22);
    border-radius: 999px;
    padding:       5px 12px;
    font-size:     12px;
    color:         var(--accent);
    font-weight:   500;
}
.t-card.featured .t-result { background: rgba(200,146,58,.15); border-color: rgba(200,146,58,.30); }


/* ================================================================
   COMPARISON TABLE
================================================================ */
.compare-section { background: var(--pine); padding: 100px 80px; }
.compare-inner   { max-width: 900px; margin: 0 auto; }
.compare-header  { margin-bottom: 48px; }
.compare-header .section-title { color: var(--white); margin-bottom: 12px; }
.compare-header p              { font-size: 15px; color: rgba(255,255,255,.55); max-width: 500px; line-height: 1.72; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th { padding: 14px 20px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.10); }
.compare-table th:first-child   { text-align: left; color: rgba(255,255,255,.45); }
.compare-table th:nth-child(2)  { background: rgba(200,146,58,.12); color: var(--accent); border-radius: 12px 12px 0 0; border: 1px solid rgba(200,146,58,.20); border-bottom: none; }
.compare-table th:nth-child(3)  { text-align: center; color: rgba(255,255,255,.35); }
.compare-table td               { padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; color: rgba(255,255,255,.72); }
.compare-table td:nth-child(2)  { background: rgba(200,146,58,.07); color: var(--white); font-weight: 500; text-align: center; border-left: 1px solid rgba(200,146,58,.15); border-right: 1px solid rgba(200,146,58,.15); }
.compare-table td:nth-child(3)  { text-align: center; color: rgba(255,255,255,.35); }
.compare-table tr:last-child td:nth-child(2) { border-radius: 0 0 12px 12px; }
.check { color: var(--accent); font-size: 16px; }
.cross { color: rgba(255,255,255,.25); font-size: 16px; }


/* ================================================================
   MARKET TIMING
================================================================ */
.timing-section { background: var(--pine); padding: 100px 80px; position: relative; overflow: hidden; }
.timing-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 90% 30%, rgba(200,146,58,.10) 0%, transparent 60%); }
.timing-inner  { max-width: 1200px; margin: 0 auto; }
.timing-header { margin-bottom: 56px; }
.timing-header .section-title { color: var(--white); margin-top: 12px; }
.timing-header p              { font-size: 15px; color: rgba(255,255,255,.55); max-width: 560px; line-height: 1.78; margin-top: 16px; }
.timing-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2px;
    border-radius:         var(--radius-xl);
    overflow:              hidden;
}
.timing-card        { padding: 36px 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); transition: background var(--trans); }
.timing-card:hover  { background: rgba(255,255,255,.08); }
.timing-season      { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.timing-season-icon { font-size: 18px; }
.timing-card-title  { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.10); }
.timing-body        { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.75; margin-bottom: 16px; }
.timing-badge       { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; }
.timing-hot    { background: rgba(200,146,58,.18); color: var(--accent);             border: 1px solid rgba(200,146,58,.30); }
.timing-strong { background: rgba(46,99,73,.40);   color: #7ecf91;                   border: 1px solid rgba(126,207,145,.25); }
.timing-slow   { background: rgba(255,255,255,.06); color: rgba(255,255,255,.45);    border: 1px solid rgba(255,255,255,.12); }


/* ================================================================
   SELLER FAQ
================================================================ */
.seller-faq-section { background: var(--cream-dk); padding: 100px 80px; }
.seller-faq-inner   { max-width: 1200px; margin: 0 auto; }
.seller-faq-header  { margin-bottom: 56px; }
.seller-faq-header .section-title { color: var(--charcoal); margin-top: 12px; }
.sfaq-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    border:                1px solid var(--stone);
    border-radius:         var(--radius-xl);
    overflow:              hidden;
}
.sfaq-item {
    padding:    36px 40px;
    border-right:  1px solid var(--stone);
    border-bottom: 1px solid var(--stone);
    transition: background var(--trans);
    background: var(--white);
}
.sfaq-item:nth-child(even)        { border-right: none; }
.sfaq-item:nth-last-child(-n+2)   { border-bottom: none; }
.sfaq-item:hover                  { background: var(--cream); }
.sfaq-q { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--charcoal); line-height: 1.3; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--accent); }
.sfaq-a { font-size: 14px; color: var(--stone-dk); line-height: 1.80; }
.sfaq-a p { margin-bottom: 10px; }
.sfaq-a p:last-child { margin-bottom: 0; }


/* ================================================================
   FINAL CTA STRIP
================================================================ */
.final-cta { background: var(--cream); padding: 80px; }
.final-cta-inner {
    max-width:             1200px;
    margin:                0 auto;
    background:            linear-gradient(135deg, var(--pine) 0%, var(--pine-md) 100%);
    border-radius:         var(--radius-2xl);
    padding:               64px 72px;
    display:               grid;
    grid-template-columns: 1fr auto;
    gap:                   48px;
    align-items:           center;
    position:              relative;
    overflow:              hidden;
}
.final-cta-inner::before {
    content:        '';
    position:       absolute;
    top:            -80px;
    right:          -80px;
    width:          280px;
    height:         280px;
    border-radius:  50%;
    background:     rgba(200,146,58,.10);
    pointer-events: none;
}
.final-cta-text .section-title { color: var(--white); margin-bottom: 14px; }
.final-cta-text p              { font-size: 15px; color: rgba(255,255,255,.62); line-height: 1.75; max-width: 480px; }
.final-cta-actions             { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.final-cta-actions .btn        { white-space: nowrap; }


/* ================================================================
   FOOTER (sellers page variant — dark ink bg)
================================================================ */
footer { background: var(--ink); padding: 64px 80px 32px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
    display:               grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   48px;
    padding-bottom:        48px;
    border-bottom:         1px solid rgba(255,255,255,.07);
}
.footer-brand .logo-main    { color: var(--white); font-size: 30px; margin-bottom: 6px; }
.footer-brand .logo-sub     { color: rgba(255,255,255,.30); }
.footer-brand p             { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.7; max-width: 260px; }
.footer-brand .contact-info { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.footer-brand .contact-info a       { font-size: 13px; color: rgba(255,255,255,.50); transition: color var(--trans); }
.footer-brand .contact-info a:hover { color: var(--accent); }
.footer-col h4              { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.26); margin-bottom: 18px; }
.footer-col ul              { list-style: none; }
.footer-col li              { margin-bottom: 11px; }
.footer-col a               { font-size: 13px; color: rgba(255,255,255,.50); transition: color var(--trans); }
.footer-col a:hover         { color: var(--white); }
.footer-bottom              { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 24px; }
.footer-bottom p            { font-size: 11px; color: rgba(255,255,255,.22); }

/* Live chat button */
#live-chat {
    position:      fixed;
    bottom:        28px;
    right:         28px;
    z-index:       700;
    width:         52px;
    height:        52px;
    border-radius: 50%;
    background:    var(--accent);
    color:         var(--white);
    border:        none;
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 4px 20px rgba(200,146,58,.45);
    transition:    transform var(--trans), box-shadow var(--trans);
    cursor:        pointer;
}
#live-chat:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(200,146,58,.55); }
.chat-tip {
    position:       absolute;
    right:          64px;
    top:            50%;
    transform:      translateY(-50%);
    background:     var(--ink);
    color:          var(--white);
    font-size:      12px;
    white-space:    nowrap;
    padding:        6px 12px;
    border-radius:  var(--radius-sm);
    pointer-events: none;
    opacity:        0;
    transition:     opacity var(--trans);
}
#live-chat:hover .chat-tip { opacity: 1; }


/* ================================================================
   MULTI-STEP VALUATION MODAL
================================================================ */
#val-modal {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         9000;
    background:      rgba(14,18,16,.80);
    backdrop-filter: blur(6px);
    align-items:     center;
    justify-content: center;
    padding:         20px;
}
#val-modal.open { display: flex; }
.val-modal-box {
    background:     var(--white);
    border-radius:  var(--radius-2xl);
    max-width:      560px;
    width:          100%;
    position:       relative;
    box-shadow:     var(--shadow-deep);
    animation:      modalPop .3s cubic-bezier(.34,1.36,.64,1) both;
    max-height:     94vh;
    overflow-y:     auto;
}
@keyframes modalPop { from{opacity:0;transform:scale(.92) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
.val-modal-close        { position: absolute; top: 16px; right: 20px; font-size: 24px; color: var(--stone-dk); line-height: 1; transition: color var(--trans); z-index: 2; cursor: pointer; }
.val-modal-close:hover  { color: var(--charcoal); }
.val-progress-bar       { height: 4px; background: var(--cream-dk); border-radius: 2px 2px 0 0; overflow: hidden; }
.val-progress-fill      { height: 100%; background: linear-gradient(90deg, var(--pine), var(--accent)); border-radius: 2px; transition: width .45s cubic-bezier(.4,0,.2,1); }
.val-step               { display: none; padding: 36px 40px 32px; }
.val-step.active        { display: block; }
.step-label             { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--pine); font-weight: 500; margin-bottom: 8px; }
.step-title             { font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--charcoal); margin-bottom: 6px; }
.step-sub               { font-size: 14px; color: var(--stone-dk); margin-bottom: 24px; }
.step-field             { margin-bottom: 16px; }
.step-field label       { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 5px; }
.step-field input,
.step-field select,
.step-field textarea {
    width:        100%;
    padding:      12px 14px;
    border:       1.5px solid var(--stone);
    border-radius: var(--radius-md);
    font-size:    14px;
    color:        var(--charcoal);
    background:   var(--white);
    appearance:   none;
    -webkit-appearance: none;
    font-family:  var(--sans);
    transition:   border-color var(--trans), box-shadow var(--trans);
}
.step-field input:focus,
.step-field select:focus,
.step-field textarea:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(26,56,41,.10); }
.step-field .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option-pills  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.option-pill {
    padding:         12px 16px;
    border:          1.5px solid var(--stone);
    border-radius:   var(--radius-md);
    font-size:       13px;
    color:           var(--charcoal);
    cursor:          pointer;
    text-align:      center;
    transition:      all var(--trans);
    display:         flex;
    align-items:     center;
    gap:             8px;
    justify-content: center;
    font-family:     var(--sans);
    background:      none;
}
.option-pill:hover    { border-color: var(--pine); color: var(--pine); }
.option-pill.selected { background: var(--pine); color: var(--white); border-color: var(--pine); }
.option-pill.full-width { grid-column: 1 / -1; }
.step-nav     { display: flex; gap: 10px; margin-top: 24px; }
.step-next,
.step-submit {
    flex:            1;
    padding:         14px;
    background:      var(--pine);
    color:           var(--white);
    border:          none;
    border-radius:   var(--radius-md);
    font-size:       14px;
    font-weight:     500;
    font-family:     var(--sans);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    transition:      background var(--trans);
    cursor:          pointer;
}
.step-next:hover,
.step-submit:hover { background: var(--pine-lt); }
.step-back {
    padding:       14px 20px;
    background:    transparent;
    color:         var(--stone-dk);
    border:        1.5px solid var(--stone);
    border-radius: var(--radius-md);
    font-size:     14px;
    font-family:   var(--sans);
    cursor:        pointer;
    transition:    all var(--trans);
}
.step-back:hover { border-color: var(--charcoal); color: var(--charcoal); }

/* Modal success state */
#step-success        { text-align: center; padding: 52px 40px 48px; }
.success-icon        { font-size: 56px; margin-bottom: 16px; }
.success-title       { font-family: var(--serif); font-size: 34px; font-weight: 300; color: var(--charcoal); margin-bottom: 10px; }
.success-body        { font-size: 15px; color: var(--stone-dk); line-height: 1.7; margin-bottom: 28px; }
.success-next-steps  { background: var(--cream); border-radius: var(--radius-lg); padding: 20px 24px; text-align: left; margin-bottom: 24px; }
.success-next-steps p { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-dk); margin-bottom: 12px; font-weight: 500; }
.success-next-steps ul { list-style: none; }
.success-next-steps li { font-size: 14px; color: var(--charcoal); padding: 5px 0; display: flex; align-items: center; gap: 8px; }
.success-next-steps li::before { content: '✓'; color: var(--pine); font-weight: 500; }


/* ================================================================
   PAGE-LEVEL RESPONSIVE OVERRIDES
================================================================ */
@media (max-width: 1100px) {
    .hero-inner             { grid-template-columns: 1fr; gap: 48px; padding: 120px 48px 80px; }
    .hero-val-card          { max-width: 520px; }
    .section                { padding: 80px 48px; }
    .intro-section, .valuation-section, .process-section,
    .testimonials-section, .compare-section, .marketing-section,
    .final-cta              { padding-left: 48px; padding-right: 48px; }
    footer                  { padding: 48px 48px 24px; }
    .marketing-grid         { grid-template-columns: 1fr 1fr; }
    .val-split              { grid-template-columns: 1fr; }
    .val-right              { padding: 40px 44px; }
    .compare-table th:nth-child(3),
    .compare-table td:nth-child(3) { display: none; }
    .final-cta              { padding: 48px; }
    .final-cta-inner        { grid-template-columns: 1fr; padding: 48px; }
    .final-cta-actions      { flex-direction: row; }
    .seller-faq-section     { padding: 80px 48px; }
    .timing-section         { padding: 80px 48px; }
    .timing-grid            { grid-template-columns: 1fr 1fr; }
    .breadcrumb-bar         { padding: 14px 48px; }
}

@media (max-width: 820px) {
    header                  { padding: 0 24px; }
    .hero-inner             { padding: 120px 24px 80px; }
    .intro-inner            { grid-template-columns: 1fr; gap: 48px; }
    .results-grid           { grid-template-columns: 1fr 1fr; }
    .process-step-row       { grid-template-columns: 1fr; gap: 20px; }
    .step-num-big           { display: none; }
    .marketing-grid         { grid-template-columns: 1fr; }
    .testimonials-grid      { grid-template-columns: 1fr; }
    .footer-top             { grid-template-columns: 1fr 1fr; gap: 32px; }
    .section                { padding: 72px 24px; }
    .intro-section, .valuation-section, .process-section,
    .testimonials-section, .compare-section, .marketing-section,
    .final-cta              { padding-left: 24px; padding-right: 24px; }
    footer                  { padding: 48px 24px 24px; }
    .final-cta-inner        { padding: 36px 28px; }
    .final-cta-actions      { flex-direction: column; }
    #val-pill               { display: none; }
    .val-step               { padding: 28px 24px; }
    .seller-faq-section     { padding: 72px 24px; }
    .timing-section         { padding: 72px 24px; }
    .timing-grid            { grid-template-columns: 1fr; }
    .sfaq-grid              { grid-template-columns: 1fr; }
    .sfaq-item              { border-right: none !important; }
    .sfaq-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--stone) !important; }
    .sfaq-item:last-child   { border-bottom: none !important; }
    .breadcrumb-bar         { padding: 12px 24px; }
    .seller-ribbon          { height: 46px; }
    .seller-tag             { left: 14px; font-size: 9px; padding: 5px 10px; }
    .seller-tip             { padding: 0 22px; }
    .seller-tip-text        { font-size: 12px; }
}