/* ═══════════════════════════════════════════════════════════════════════════
   THE HEALTH VERGE — main.css v4
   Complete design system. Matches thv-complete-final.html exactly.
═══════════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────────── */
:root {
    --iv:  #FAF6EF;
    --iv2: #F2EBE0;
    --cr:  #E8DDD0;
    --sg:  #3D6952;
    --sg2: #557A66;
    --sg3: #8AAE97;
    --sgp: #EAF0EB;
    --tr:  #C85A38;
    --tr2: #D97855;
    --trp: #F8EDE8;
    --oc:  #D4922A;
    --ocp: #FBF3E2;
    --fo:  #1C3628;
    --ink: #1E2B24;
    --ik2: #3A4A40;
    --ik3: #6A7A6E;
    --wh:  #FFFFFF;
    --bd:  #DDD5C8;
    --bd2: #C8BFB0;

    /* Typography */
    --sf: 'Instrument Serif', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    --ss: 'DM Sans', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    --hd: 'Brush Script MT', 'Bradley Hand', 'Segoe Script', cursive;
}

/* ── RESET ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    background: var(--iv);
    color: var(--ink);
    font-family: var(--ss);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; cursor: pointer; }
ul { list-style: none; }
button { font-family: inherit; }

/* ── CUSTOM CURSOR ─────────────────────────────────────────────────────────── */
.cd {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--tr);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    transition: opacity .3s;
}
.cr {
    position: fixed;
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(61,105,82,.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width .4s, height .4s, border-color .3s, opacity .3s;
}
.cr.big { width: 50px; height: 50px; border-color: var(--tr); background: rgba(200,90,56,.04); }
@media (hover: none) { .cd, .cr { display: none; } }

/* ── NAVIGATION ────────────────────────────────────────────────────────────── */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: 68px;
    padding: 0 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .4s, box-shadow .4s;
}
nav.on {
    background: rgba(250,246,239,.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 var(--bd);
}
.nl { display: flex; align-items: center; gap: 12px; }
.li {
    width: 42px; height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transition: transform .3s;
    backface-visibility: hidden;
    display: block;
}
.li:hover { transform: rotate(-5deg) scale(1.08); }
.ln { font-family: var(--sf); font-size: 1.08rem; color: var(--ink); letter-spacing: -.01em; line-height: 1.1; }
.lt { font-size: .57rem; font-weight: 600; color: var(--ik3); letter-spacing: .14em; text-transform: uppercase; }
.nls { display: flex; align-items: center; gap: 3px; }
.nk {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ik2);
    padding: 7px 14px;
    border-radius: 100px;
    transition: all .2s;
    white-space: nowrap;
}
.nk:hover, .nk.act { background: var(--sgp); color: var(--sg); }
.nk.w:hover { background: var(--trp); color: var(--tr); }
.nc {
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: var(--sg);
    padding: 9px 22px;
    border-radius: 100px;
    transition: all .25s;
    box-shadow: 0 3px 14px rgba(61,105,82,.32);
    white-space: nowrap;
}
.nc:hover { background: var(--fo); transform: translateY(-2px); }
.hb {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
}
.hl { display: block; width: 22px; height: 2px; background: var(--ik2); border-radius: 2px; transition: all .25s; }
.mm {
    display: none;
    position: fixed;
    top: 68px; left: 0; right: 0;
    background: rgba(250,246,239,.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--bd);
    padding: 20px 24px 28px;
    z-index: 999;
    transform: translateY(-110%);
    transition: transform .3s;
}
.mm.open { transform: translateY(0); }
.ml {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik2);
    padding: 14px 0;
    border-bottom: 1px solid var(--bd);
    transition: color .2s, padding-left .2s;
}
.ml:hover { color: var(--sg); padding-left: 8px; }
.ml.w:hover { color: var(--tr); }

/* ── SEARCH OVERLAY ────────────────────────────────────────────────────────── */
.thv-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(250,246,239,.96);
    backdrop-filter: blur(24px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.thv-search-overlay.open { opacity: 1; pointer-events: all; }
.thv-search-inner { width: 100%; max-width: 640px; padding: 44px; position: relative; }
.thv-search-close {
    position: absolute;
    top: 0; right: 44px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--ik3);
    cursor: pointer;
    line-height: 1;
    transition: color .2s;
}
.thv-search-close:hover { color: var(--ink); }
.thv-search-form { width: 100%; }
.thv-search-wrap {
    display: flex;
    gap: 0;
    background: #fff;
    border: 2px solid var(--bd);
    border-radius: 100px;
    overflow: hidden;
    transition: border-color .2s;
    box-shadow: 0 4px 32px rgba(30,43,36,.08);
}
.thv-search-wrap:focus-within { border-color: var(--sg); }
.thv-search-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    outline: none;
    font-family: var(--sf);
    font-size: 1.1rem;
    color: var(--ink);
    background: transparent;
}
.thv-search-input::placeholder { color: var(--ik3); font-style: italic; }
.thv-search-btn {
    padding: 0 22px;
    background: var(--sg);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background .2s;
}
.thv-search-btn:hover { background: var(--fo); }
.thv-search-hints {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items: center;
    font-size: .72rem;
    color: var(--ik3);
}
.thv-search-hints a {
    background: #fff;
    border: 1.5px solid var(--bd);
    border-radius: 100px;
    padding: 5px 13px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--ik2);
    transition: all .2s;
}
.thv-search-hints a:hover { border-color: var(--sg); color: var(--sg); }

/* ── HERO ──────────────────────────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 104px 44px 80px;
    position: relative;
    overflow: hidden;
}
.hbg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 82% 38%, rgba(214,148,90,.14) 0%, transparent 58%),
        radial-gradient(ellipse 48% 48% at 14% 78%, rgba(61,105,82,.10) 0%, transparent 54%),
        radial-gradient(ellipse 38% 38% at 88% 88%, rgba(212,146,42,.08) 0%, transparent 48%);
}
.hgr {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px;
}
.hin {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 64px;
    align-items: center;
}
/* Hero greeting */
.hg {
    font-family: var(--hd);
    font-size: 1.55rem;
    color: var(--tr2);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .8s, transform .8s;
}
.hg.sh { opacity: 1; transform: translateX(0); }
.gl { width: 36px; height: 1.5px; background: var(--tr2); opacity: .55; flex-shrink: 0; }
/* Hero headline */
.hhl {
    font-family: var(--sf);
    font-size: clamp(3.2rem, 7vw, 6.2rem);
    line-height: .98;
    letter-spacing: -.025em;
    color: var(--ink);
    margin-bottom: 26px;
}
.hw { display: inline-block; overflow: hidden; }
.hi { display: inline-block; transform: translateY(110%); transition: transform .9s; }
.hi.up { transform: translateY(0); }
.hsg { color: var(--sg); font-style: italic; }
.htr { color: var(--tr); }
/* Hero sub */
.hs {
    font-family: var(--sf);
    font-style: italic;
    font-size: 1.12rem;
    color: var(--ik2);
    line-height: 1.75;
    max-width: 500px;
    margin-bottom: 38px;
    border-left: 3px solid var(--tr2);
    padding-left: 20px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s .5s, transform .8s .5s;
}
.hs.sh { opacity: 1; transform: translateY(0); }
/* Hero CTAs */
.hcs {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s .7s, transform .7s .7s;
}
.hcs.sh { opacity: 1; transform: translateY(0); }
/* Trust chips */
.hts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s .9s, transform .6s .9s;
}
.hts.sh { opacity: 1; transform: translateY(0); }

/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ss);
    font-size: .88rem;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 100px;
    border: none;
    letter-spacing: .01em;
    transition: all .28s;
    cursor: pointer;
}
.btr { background: var(--tr); color: #fff; box-shadow: 0 4px 20px rgba(200,90,56,.35); }
.btr:hover { background: #a84020; transform: translateY(-3px); }
.bsg { background: var(--sg); color: #fff; box-shadow: 0 4px 20px rgba(61,105,82,.32); }
.bsg:hover { background: var(--fo); transform: translateY(-3px); }
.bgh { background: transparent; color: var(--ik2); border: 2px solid var(--bd2); }
.bgh:hover { background: #fff; border-color: var(--sg3); color: var(--sg); transform: translateY(-3px); }

/* ── TRUST CHIPS ───────────────────────────────────────────────────────────── */
.chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1.5px solid var(--bd);
    border-radius: 100px;
    padding: 6px 13px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--ik2);
    box-shadow: 0 1px 6px rgba(30,43,36,.05);
    transition: all .25s;
    cursor: default;
}
.chip:hover { border-color: var(--sg3); transform: translateY(-2px); }
.cd2 { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ds { background: var(--sg);  animation: dp 2.2s ease-in-out infinite; }
.dt { background: var(--tr);  animation: dp 2.2s .4s ease-in-out infinite; }
.do { background: var(--oc);  animation: dp 2.2s .8s ease-in-out infinite; }
.df { background: var(--fo);  animation: dp 2.2s 1.2s ease-in-out infinite; }
@keyframes dp {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(.7); }
}

/* ── HERO PANEL ────────────────────────────────────────────────────────────── */
.hp {
    position: relative;
    opacity: 0;
    transform: translateY(28px) rotate(.8deg);
    transition: opacity .9s .4s, transform .9s .4s;
}
.hp.sh { opacity: 1; transform: translateY(0) rotate(0); }
.sc {
    background: #fff;
    border-radius: 24px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid rgba(221,213,200,.7);
    box-shadow: 0 20px 80px rgba(30,43,36,.11), 0 2px 10px rgba(30,43,36,.06);
}
.sc::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tr) 0%, var(--oc) 50%, var(--sg) 100%);
}
/* ECG */
.es { width: 100%; margin-bottom: 20px; }
.em {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: dE 2.4s 1.6s ease-out forwards;
}
@keyframes dE { to { stroke-dashoffset: 0; } }
/* Card elements */
.ce { font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sg3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ce::before { content: ''; width: 18px; height: 1.5px; background: var(--sg3); flex-shrink: 0; }
.ct { font-family: var(--sf); font-size: 1.42rem; color: var(--ink); line-height: 1.22; margin-bottom: 12px; }
.cb { font-size: .85rem; color: var(--ik3); line-height: 1.67; margin-bottom: 20px; }
.cn { font-family: var(--hd); font-size: 1.12rem; color: var(--tr); display: block; padding: 14px 0; border-top: 1px dashed rgba(200,90,56,.25); transform: rotate(-1deg); }
/* Float badges */
.fb { position: absolute; background: #fff; border: 1.5px solid var(--bd); border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 28px rgba(30,43,36,.10); }
.fb1 { top: -16px; right: 20px; animation: ff 4s ease-in-out infinite; }
.fb2 { bottom: -16px; left: 14px; animation: ff 5s ease-in-out infinite reverse; }
@keyframes ff {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.fl { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ik3); margin-bottom: 3px; }
.fv { font-family: var(--sf); font-size: .9rem; color: var(--ink); }
.fdt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* ── MARQUEE ───────────────────────────────────────────────────────────────── */
.mq { background: var(--fo); padding: 15px 0; overflow: hidden; }
.mt { display: flex; width: max-content; animation: mr 28s linear infinite; }
.mi {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 30px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
}
.mg { opacity: .35; font-size: .65rem; }
@keyframes mr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── SECTIONS ──────────────────────────────────────────────────────────────── */
.sec { padding: 96px 44px; }
.sw  { background: #fff; }
.si  { background: var(--iv); }
.si2 { background: var(--iv2); }
.stp {
    background: var(--trp);
    position: relative;
    overflow: hidden;
}
.stp::before {
    content: '';
    position: absolute;
    width: 340px; height: 340px;
    background: rgba(200,90,56,.06);
    border-radius: 50%;
    top: -80px; right: -80px;
    pointer-events: none;
}
.sop {
    background: var(--ocp);
    position: relative;
    overflow: hidden;
}
.sop::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    background: rgba(212,146,42,.07);
    border-radius: 50%;
    bottom: -60px; left: -60px;
    pointer-events: none;
}
.sf  { background: var(--fo); }
.mx  { max-width: 1280px; margin: 0 auto; }
.mxs { max-width: 800px;  margin: 0 auto; }

/* ── SECTION OPENER ────────────────────────────────────────────────────────── */
.so {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 52px;
    padding-bottom: 24px;
    border-bottom: 1.5px solid var(--bd);
}
.sg2- {
    font-family: var(--hd);
    font-size: 1.18rem;
    color: var(--tr2);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sgl { width: 26px; height: 1.5px; background: var(--tr2); opacity: .5; flex-shrink: 0; }
.sh {
    font-family: var(--sf);
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.022em;
    color: var(--ink);
}
.sh em { font-style: italic; color: var(--sg); }
.sh.tr em  { color: var(--tr); }
.sh.oc em  { color: var(--oc); }
.sh.wh    { color: #fff; }
.sh.wh em  { color: var(--oc); }
.sb2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sg);
    border: 2px solid rgba(61,105,82,.3);
    border-radius: 100px;
    padding: 9px 20px;
    transition: all .25s;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    background: transparent;
}
.sb2:hover { background: var(--sg); color: #fff; border-color: var(--sg); gap: 11px; }
.sb2.tr { color: var(--tr); border-color: rgba(200,90,56,.3); }
.sb2.tr:hover { background: var(--tr); color: #fff; border-color: var(--tr); }
.sb2.oc { color: var(--oc); border-color: rgba(212,146,42,.3); }
.sb2.oc:hover { background: var(--oc); color: #fff; border-color: var(--oc); }

/* ── GRIDS ─────────────────────────────────────────────────────────────────── */
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ── FEATURED CARD ─────────────────────────────────────────────────────────── */
.feat {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    background: #fff;
    border: 2px solid var(--bd);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 26px;
    box-shadow: 0 4px 24px rgba(30,43,36,.07);
    transition: transform .4s, box-shadow .4s, border-color .25s;
    cursor: pointer;
}
.feat:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(30,43,36,.13); border-color: var(--sg3); }
.feat.terra:hover { border-color: rgba(200,90,56,.5); }
.fi { position: relative; overflow: hidden; }
.fi-in { width: 100%; height: 100%; min-height: 300px; transition: transform .6s; display: block; object-fit: cover; }
.feat:hover .fi-in { transform: scale(1.06); }
.ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,54,40,.55) 0%, transparent 55%); pointer-events: none; }
.fb2 { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.fm { font-size: .67rem; font-weight: 700; color: var(--ik3); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.fh { font-family: var(--sf); font-size: 1.65rem; line-height: 1.18; color: var(--ink); margin-bottom: 14px; transition: color .2s; }
.feat:hover .fh { color: var(--sg); }
.feat.terra:hover .fh { color: var(--tr); }
.fe { font-size: .9rem; color: var(--ik3); line-height: 1.65; margin-bottom: 22px; }
.fc { font-size: .75rem; font-weight: 800; color: var(--sg); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; }
.feat.terra .fc { color: var(--tr); }
.feat:hover .fc { gap: 11px; }

/* ── BLOG CARD ─────────────────────────────────────────────────────────────── */
.bc {
    background: #fff;
    border: 2px solid var(--bd);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s, box-shadow .35s, border-color .25s;
    cursor: pointer;
}
.bc:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(30,43,36,.11); }
.bc.sage:hover  { border-color: var(--sg3); }
.bc.terra:hover { border-color: rgba(200,90,56,.45); }
.bc.ochre:hover { border-color: rgba(212,146,42,.5); }
.bi { position: relative; overflow: hidden; flex-shrink: 0; }
.bi-i { width: 100%; aspect-ratio: 16/9; transition: transform .55s; display: block; object-fit: cover; }
.bc:hover .bi-i { transform: scale(1.055); }
.bdg {
    position: absolute;
    top: 12px; left: 12px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    padding: 5px 12px;
    border-radius: 100px;
}
.bs { background: var(--sg); }
.bt { background: var(--tr); }
.bo { background: var(--oc); }
.bf { background: var(--fo); }
.bb { padding: 19px 21px 23px; flex: 1; display: flex; flex-direction: column; }
.bh { font-family: var(--sf); font-size: 1.05rem; line-height: 1.28; color: var(--ink); margin-bottom: 9px; transition: color .2s; }
.bc:hover .bh { color: var(--sg); }
.bc.terra:hover .bh { color: var(--tr); }
.bc.ochre:hover .bh { color: var(--oc); }
.be { font-size: .82rem; color: var(--ik3); line-height: 1.62; margin-bottom: 14px; flex: 1; }
.bm { font-size: .67rem; font-weight: 700; color: var(--ik3); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.md { opacity: .38; }
.bct { font-size: .72rem; font-weight: 800; color: var(--sg); display: inline-flex; align-items: center; gap: 5px; transition: gap .2s; margin-top: auto; }
.bc.terra .bct  { color: var(--tr); }
.bc.ochre .bct  { color: var(--oc); }
.bc:hover .bct  { gap: 9px; }
.ic { display: flex; justify-content: center; margin-bottom: 40px; }

/* ── QUOTE STRIP ───────────────────────────────────────────────────────────── */
.qs {
    background: var(--fo);
    padding: 76px 44px;
    position: relative;
    overflow: hidden;
}
.qs::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 85% 50%, rgba(61,105,82,.2) 0%, transparent 62%);
    pointer-events: none;
}
.qi { max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.qm {
    font-family: var(--sf);
    font-size: 7rem;
    line-height: .55;
    color: rgba(255,255,255,.07);
    display: block;
    margin-bottom: -14px;
    user-select: none;
}
.qt {
    font-family: var(--sf);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    color: rgba(255,255,255,.92);
    line-height: 1.42;
    margin-bottom: 24px;
}
.qt em { color: var(--oc); font-style: normal; }
.qa { font-family: var(--hd); font-size: 1.15rem; color: rgba(255,255,255,.4); }

/* ── ABOUT SECTION ─────────────────────────────────────────────────────────── */
.ai { display: grid; grid-template-columns: 1fr 1fr; gap: 92px; align-items: center; }
.an {
    font-family: var(--sf);
    font-size: .75rem;
    font-style: italic;
    color: var(--ik3);
    letter-spacing: .1em;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.an::before { content: '—'; color: var(--tr2); margin-right: 2px; }
.ah {
    font-family: var(--sf);
    font-size: clamp(3rem, 6vw, 5.2rem);
    line-height: .97;
    letter-spacing: -.03em;
    color: var(--ink);
    margin-bottom: 24px;
}
.ags { color: var(--sg); }
.agt { color: var(--tr); font-style: italic; }
.ab {
    font-family: var(--sf);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ik2);
    line-height: 1.82;
    margin-bottom: 28px;
}
.ats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.at {
    font-size: .72rem;
    font-weight: 700;
    color: var(--sg);
    background: var(--sgp);
    border: 1.5px solid rgba(61,105,82,.25);
    border-radius: 100px;
    padding: 5px 13px;
}

/* ── PILLAR LIST ───────────────────────────────────────────────────────────── */
.pls { display: flex; flex-direction: column; gap: 12px; }
.pl {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: #fff;
    border: 2px solid var(--bd);
    border-radius: 14px;
    padding: 18px 20px;
    transition: all .3s;
    cursor: default;
}
.pl:hover { border-color: var(--sg3); transform: translateX(7px); box-shadow: 0 6px 24px rgba(61,105,82,.09); }
.pi { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.p1 { background: var(--sgp); }
.p2 { background: var(--trp); }
.p3 { background: var(--ocp); }
.p4 { background: var(--iv2); }
.pt { font-family: var(--sf); font-size: .97rem; color: var(--ink); margin-bottom: 4px; transition: color .2s; }
.pl:hover .pt { color: var(--sg); }
.pb { font-size: .8rem; color: var(--ik3); line-height: 1.58; }

/* ── EMAIL SIGNUP SECTION ──────────────────────────────────────────────────── */
.thv-email-section { padding: 80px 44px; }
.thv-email-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    background: #fff;
    border: 2px solid var(--bd);
    border-radius: 24px;
    padding: 56px 64px;
    position: relative;
    overflow: hidden;
}
.thv-email-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tr), var(--oc) 50%, var(--sg));
}
.thv-email-promises {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}
.thv-email-form-wrap { display: flex; flex-direction: column; gap: 16px; }
.thv-email-form { width: 100%; }
.thv-email-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.thv-email-input {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid var(--bd);
    border-radius: 100px;
    font-family: var(--ss);
    font-size: .9rem;
    color: var(--ink);
    background: var(--iv);
    outline: none;
    transition: border-color .2s;
}
.thv-email-input:focus { border-color: var(--sg); }
.thv-email-input::placeholder { color: var(--ik3); }
.thv-email-note {
    font-size: .72rem;
    color: var(--ik3);
    line-height: 1.6;
}

/* ── PAGE HERO ─────────────────────────────────────────────────────────────── */
.ph {
    padding: 120px 44px 72px;
    background: var(--fo);
    position: relative;
    overflow: hidden;
}
.ph::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(61,105,82,.22) 0%, transparent 60%);
    pointer-events: none;
}
.phgr {
    position: absolute;
    inset: 0;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px;
    pointer-events: none;
}
.phi { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.pbc { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.45); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbc a { color: rgba(255,255,255,.55); cursor: pointer; transition: color .2s; }
.pbc a:hover { color: var(--oc); }
.pbs { opacity: .35; }
.pbdg {
    display: inline-block;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--tr);
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 18px;
}
.pbdg.sg { background: var(--sg); }
.pbdg.oc { background: var(--oc); }
.phl {
    font-family: var(--sf);
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    color: #fff;
    line-height: 1.05;
    letter-spacing: -.028em;
    margin-bottom: 18px;
}
.phl em { font-style: italic; color: var(--oc); }
.psu {
    font-family: var(--sf);
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(255,255,255,.55);
    line-height: 1.72;
    max-width: 600px;
}

/* ── ARTICLE LAYOUT ────────────────────────────────────────────────────────── */
.aly {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 64px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 44px 96px;
    align-items: start;
}
.acl { min-width: 0; }
.abdy {
    font-family: var(--sf);
    font-size: 1.12rem;
    line-height: 1.88;
    color: var(--ik2);
}
.abdy p { margin-bottom: 22px; }
.abdy h2 {
    font-family: var(--sf);
    font-size: 1.65rem;
    font-weight: 400;
    color: var(--sg);
    margin: 48px 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sgp);
    line-height: 1.2;
}
.abdy h3 {
    font-family: var(--sf);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--ink);
    margin: 36px 0 14px;
}
.abdy strong { color: var(--ink); font-weight: 700; }
.abdy ul { margin-bottom: 22px; }
.abdy ul li {
    padding: 7px 0 7px 22px;
    position: relative;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--bd);
    line-height: 1.68;
}
.abdy ul li:last-child { border-bottom: none; }
.abdy ul li::before { content: '—'; position: absolute; left: 0; color: var(--sg3); font-weight: 700; }
.abdy blockquote {
    background: var(--sgp);
    border-left: 4px solid var(--sg);
    border-radius: 0 12px 12px 0;
    padding: 22px 26px;
    margin: 32px 0;
}
.abdy blockquote p { font-style: italic; color: var(--sg); font-size: 1.08rem; margin: 0; }
.abdy a { color: var(--sg); text-decoration: underline; text-decoration-color: rgba(61,105,82,.4); transition: text-decoration-color .2s; }
.abdy a:hover { text-decoration-color: var(--sg); }

/* Insight card */
.ic2 {
    background: #fff;
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 24px 26px;
    margin: 32px 0;
    position: relative;
    overflow: hidden;
}
.ic2::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sg), var(--oc));
}
.il { font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sg3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.il::before { content: ''; width: 16px; height: 1.5px; background: var(--sg3); flex-shrink: 0; }
.ic2 p { font-size: .92rem; color: var(--ik2); line-height: 1.7; margin: 0; }

/* Story block */
.sb3 {
    background: var(--fo);
    border-radius: 14px;
    padding: 28px 30px;
    margin: 32px 0;
    position: relative;
    overflow: hidden;
}
.sb3::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 95% 5%, rgba(61,105,82,.2) 0%, transparent 60%);
    pointer-events: none;
}
.sl { font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sg3); margin-bottom: 12px; position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.sl::after { content: ''; flex: 1; height: 1px; background: rgba(106,177,135,.25); }
.st { font-family: var(--sf); font-style: italic; font-size: 1.02rem; color: rgba(244,241,235,.88); line-height: 1.78; margin: 0; position: relative; z-index: 1; }
.sa { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.28); margin-top: 14px; position: relative; z-index: 1; }

/* Article disclaimer */
.adis {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--trp);
    border: 1px solid rgba(200,90,56,.2);
    border-left: 4px solid var(--tr);
    border-radius: 0 12px 12px 0;
    padding: 18px 20px;
    margin-top: 36px;
}
.adis p { font-size: .82rem; color: var(--ik2); line-height: 1.65; margin: 0; }

/* Sidebar */
.asd { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 88px; }
.asc {
    background: #fff;
    border: 2px solid var(--bd);
    border-radius: 16px;
    padding: 20px 22px;
}
.asl {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ik3);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bd);
}
.acl2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ik2);
    padding: 9px 0;
    border-bottom: 1px solid var(--bd);
    transition: color .2s, padding-left .2s;
    cursor: pointer;
}
.acl2:last-child { border-bottom: none; }
.acl2:hover { color: var(--sg); padding-left: 4px; }
.acl2.tr { color: var(--tr); }
.acl2.tr:hover { color: #a84020; }
.ast { background: var(--sgp); border: 2px solid rgba(61,105,82,.2); border-radius: 16px; padding: 20px 22px; }
.ast .asl { border-bottom-color: rgba(61,105,82,.2); }
.ast ul { padding: 0; }
.ast ul li { font-size: .82rem; color: var(--sg); padding: 7px 0; border-bottom: 1px solid rgba(61,105,82,.12); display: flex; align-items: center; gap: 8px; }
.ast ul li:last-child { border-bottom: none; }
.ast ul li::before { content: '✓'; font-weight: 700; color: var(--sg); flex-shrink: 0; }

/* ── PRIVACY / DISCLAIMER CONTENT ──────────────────────────────────────────── */
.pv {
    max-width: 840px;
    margin: 0 auto;
    padding: 64px 44px 96px;
    font-family: var(--sf);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ik2);
}
.pv h2 {
    font-family: var(--sf);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--sg);
    margin: 40px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sgp);
    line-height: 1.2;
}
.pv p { margin-bottom: 18px; }
.pv ul { margin-bottom: 18px; padding-left: 0; }
.pv ul li {
    padding: 6px 0 6px 20px;
    position: relative;
    border-bottom: 1px solid var(--bd);
    font-size: 1rem;
}
.pv ul li:last-child { border-bottom: none; }
.pv ul li::before { content: '—'; position: absolute; left: 0; color: var(--sg3); }
.pv a { color: var(--sg); text-decoration: underline; }
.pv strong { color: var(--ink); }

/* ── CONTACT FORM STYLES ───────────────────────────────────────────────────── */
.thv-contact-form-wrap { }
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--bd);
    border-radius: 10px;
    font-family: var(--ss);
    font-size: .9rem;
    color: var(--ink);
    background: var(--iv);
    outline: none;
    transition: border-color .2s;
    margin-bottom: 12px;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { border-color: var(--sg); }
.wpcf7-form input[type="submit"] {
    background: var(--sg);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-weight: 700;
    cursor: pointer;
    padding: 14px 28px;
    width: auto;
    transition: background .2s, transform .2s;
    box-shadow: 0 4px 20px rgba(61,105,82,.32);
}
.wpcf7-form input[type="submit"]:hover { background: var(--fo); transform: translateY(-2px); }

/* ── FOOTER ────────────────────────────────────────────────────────────────── */
footer {
    background: var(--fo);
    padding: 76px 44px 40px;
    position: relative;
    overflow: hidden;
}
footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 50% at 90% 90%, rgba(61,105,82,.18) 0%, transparent 58%);
    pointer-events: none;
}
.fb3 { height: 3px; background: linear-gradient(90deg, var(--tr), var(--oc) 50%, var(--sg)); margin-bottom: 60px; }
.fi2 { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.fg { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 52px; margin-bottom: 48px; }
.flo { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.fli { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; image-rendering: -webkit-optimize-contrast; filter: brightness(1.1); }
.fn { font-family: var(--sf); font-size: 1.02rem; color: #fff; }
.fd { font-family: var(--sf); font-style: italic; font-size: .88rem; color: rgba(255,255,255,.37); line-height: 1.72; margin-bottom: 14px; }
.ftg { font-family: var(--hd); font-size: 1.08rem; color: rgba(255,255,255,.22); }
.fch { font-size: .58rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.24); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.fnav { display: flex; flex-direction: column; }
.flk {
    font-size: .85rem;
    color: rgba(255,255,255,.43);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: color .2s, padding-left .2s;
    cursor: pointer;
}
.flk:last-child { border-bottom: none; }
.flk:hover { color: #fff; padding-left: 6px; }
.fpr { display: flex; flex-direction: column; }
.fpi { font-size: .82rem; color: rgba(255,255,255,.36); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; gap: 9px; line-height: 1.5; }
.fpi:last-child { border-bottom: none; }
.fdv { height: 1px; background: rgba(255,255,255,.07); margin-bottom: 24px; }
.fbt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.fcp { font-size: .72rem; color: rgba(255,255,255,.18); }
.fnt { font-size: .68rem; color: rgba(255,255,255,.14); text-align: center; max-width: 380px; line-height: 1.55; }
.fle { display: flex; gap: 14px; font-size: .72rem; }
.fle a { color: rgba(255,255,255,.26); transition: color .2s; cursor: pointer; }
.fle a:hover { color: var(--oc); }
.fen { height: 4px; margin-top: 34px; background: linear-gradient(90deg, var(--tr), var(--oc) 50%, var(--sg)); }

/* ── SCROLL REVEAL ANIMATIONS ──────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(32px); transition: opacity .75s, transform .75s; }
.rl { opacity: 0; transform: translateX(-32px); transition: opacity .75s, transform .75s; }
.rr { opacity: 0; transform: translateX(32px); transition: opacity .75s, transform .75s; }
.rv.v, .rl.v, .rr.v { opacity: 1; transform: translate(0); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* ── PAGINATION ────────────────────────────────────────────────────────────── */
.thv-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 24px 0; }
.thv-pagination a,
.thv-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 100px;
    font-size: .82rem;
    font-weight: 700;
    border: 2px solid var(--bd);
    color: var(--ik2);
    background: #fff;
    transition: all .2s;
}
.thv-pagination a:hover { background: var(--sg); color: #fff; border-color: var(--sg); }
.thv-pagination .current { background: var(--sg); color: #fff; border-color: var(--sg); }

/* ── SIDEBAR EMAIL WIDGET ──────────────────────────────────────────────────── */
.thv-sidebar-email { background: var(--sgp); border-color: rgba(61,105,82,.25); }
.thv-sidebar-email .asl { border-bottom-color: rgba(61,105,82,.2); }

/* ── RELATED POSTS GRID ────────────────────────────────────────────────────── */
.thv-related .g3 { gap: 20px; }

/* ── WORDPRESS ALIGNMENTS ──────────────────────────────────────────────────── */
.alignleft  { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }
.alignwide  { width: calc(100% + 88px); margin-left: -44px; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .78rem; color: var(--ik3); text-align: center; margin-top: 6px; font-style: italic; }

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hin { grid-template-columns: 1fr; gap: 48px; }
    .hp { display: none; }
    .aly { grid-template-columns: 1fr; gap: 40px; }
    .asd { position: static; }
    .g4 { grid-template-columns: repeat(2, 1fr); }
    .ai { grid-template-columns: 1fr; gap: 48px; }
    .fg { grid-template-columns: 1fr 1fr; gap: 36px; }
    .thv-email-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
    .feat { grid-template-columns: 1fr; }
    .g3 { grid-template-columns: repeat(2, 1fr); }
    .g4 { grid-template-columns: 1fr; }
    .sec { padding: 64px 24px; }
    .hero { padding: 100px 24px 64px; }
    nav { padding: 0 24px; height: 60px; }
    .nls { display: none; }
    .hb { display: flex; }
    .mm { display: block; top: 60px; }
    .ph { padding: 100px 24px 56px; }
    .aly { padding: 40px 24px 72px; }
    .pv { padding: 48px 24px 72px; }
    .qs { padding: 56px 24px; }
    .thv-email-section { padding: 56px 24px; }
    .thv-email-inner { padding: 36px 28px; }
    .thv-email-row { flex-direction: column; }
    .thv-email-row .btn { width: 100%; justify-content: center; }
    footer { padding: 56px 24px 32px; }
    .fg { grid-template-columns: 1fr; gap: 28px; }
    .hhl { font-size: clamp(2.8rem, 9vw, 4.5rem); }
    .fb2 { padding: 24px 28px; }
    .alignwide, .alignfull { width: 100%; margin-left: 0; }
}

@media (max-width: 560px) {
    .g3 { grid-template-columns: 1fr; }
    .g4 { grid-template-columns: 1fr; }
    .hcs { flex-direction: column; gap: 10px; }
    .hcs .btn { width: 100%; justify-content: center; }
    .so { flex-direction: column; align-items: flex-start; }
    .feat { border-radius: 14px; }
    .ai { gap: 32px; }
    .fbt { flex-direction: column; align-items: flex-start; gap: 8px; }
    .thv-email-promises { justify-content: flex-start; }
}

/* ── ACCESSIBILITY ─────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--sg);
    outline-offset: 3px;
    border-radius: 4px;
}
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── PRINT ─────────────────────────────────────────────────────────────────── */
@media print {
    nav, footer, .hp, .mq, .cd, .cr, .thv-search-overlay { display: none !important; }
    .aly { grid-template-columns: 1fr; }
    .abdy { font-size: 11pt; line-height: 1.6; }
}
