:root {
  --burgundy:    #4A0E20;
  --burgundy2:   #6B1530;
  --ruby:        #8B1A3A;
  --gold:        #C9963C;
  --gold2:       #E8B84B;
  --gold3:       #F5D07A;
  --champagne:   #EDE1C5;
  --champagne2:  #D8C5A5;
  --ivory:       #FAF6EE;
  --deep:        #13070d;
  --navy:        #0D1B2A;
  --emerald:     #1A3A2A;
  --muted:       #7A6451;
  --text:        #231517;
}

*::before,
*::after {box-sizing:border-box;
    margin:0;
    padding:0;
}
*{box-sizing:border-box;}

html{scroll-behavior:smooth}

body {
    font-family: 'Lato', sans-serif;
    background: var(--ivory);
    color: var(--text);
    overflow-x: hidden;
    margin: 0;
}

/* GRAIN OVERLAY */
body::after {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:.025;
    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.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════
NAV
═══════════════════════════ */
nav {
    position: fixed;
    top:0;left:0;right:0;
    z-index: 1000;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    background: linear-gradient(135deg, rgba(26,10,18,.97) 0%, rgba(74,14,32,.95) 100%);
    border-bottom: 1px solid rgba(201,150,60,.3);
    backdrop-filter: blur(20px);
}

.nav-brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
min-width: 0;
}

.nav-crest {
width: 42px; height: 42px;
border: 1.5px solid var(--gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
position: relative;
flex-shrink: 0;
}
.nav-crest::before {
content: '✦';
font-size: 16px;
color: var(--gold);
}

.nav-name {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.nav-name-top {
font-family: 'Cinzel', serif;
font-size: 13px;
letter-spacing: .18em;
color: var(--gold2);
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.nav-name-sub {
font-size: 9px;
letter-spacing: .3em;
text-transform: uppercase;
color: rgba(245,208,122,.5);
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.nav-links {
display: flex;
align-items: center;
gap: 0;
list-style: none;
}

.nav-links li a {
display: block;
padding: 0 22px;
height: 80px;
line-height: 80px;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(245,237,216,.65);
text-decoration: none;
font-weight: 300;
transition: all .3s;
border-bottom: 2px solid transparent;
position: relative;
}
.nav-links li a:hover,
.nav-links li a.active {
color: var(--gold2);
border-bottom-color: var(--gold);
background: rgba(201,150,60,.06);
}

.nav-cta {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
color: var(--deep) !important;
padding: 12px 28px !important;
height: auto !important;
line-height: 1 !important;
font-weight: 500 !important;
letter-spacing: .15em !important;
border-bottom: none !important;
transition: opacity .3s !important;
}
.nav-cta:hover { opacity:.88; background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%) !important; }

/* Mobile nav toggle (hamburger) */
.nav-toggle {
display: none;
width: 44px;
height: 44px;
border: 1px solid rgba(201,150,60,.35);
background: rgba(201,150,60,.06);
cursor: pointer;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
content:'';
display:block;
width: 20px;
height: 1.5px;
background: var(--gold2);
position: relative;
transition: transform .3s, opacity .3s;
}
.nav-toggle-bar::before { position:absolute; top:-7px; }
.nav-toggle-bar::after { position:absolute; top:7px; }
.nav-toggle.open .nav-toggle-bar { background: transparent; }
.nav-toggle.open .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); background: var(--gold2); }
.nav-toggle.open .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); background: var(--gold2); }

.nav-scrim {
display: none;
}

/* ═══════════════════════════
PAGES
═══════════════════════════ */
.page { 
    display: block; 
    padding-top: 80px; 
    min-height: 100dvh; 
}
/* .page .active { 
    display: block; 
} */

/* ═══════════════════════════
HOME — HERO
═══════════════════════════ */
.hero {
min-height: 100dvh;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}

.hero-bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg,
var(--burgundy) 0%,
var(--deep) 35%,
var(--navy) 65%,
var(--emerald) 100%
);
}

.hero-bg::before {
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse 80% 70% at 30% 50%, rgba(201,150,60,.12) 0%, transparent 70%),
radial-gradient(ellipse 60% 80% at 80% 30%, rgba(139,26,58,.25) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 70% 80%, rgba(26,58,42,.3) 0%, transparent 60%);
}

/* Geometric ornament */
.hero-bg::after {
content:'';
position:absolute;
right: -100px; top: 50%;
transform: translateY(-50%);
width: 700px; height: 700px;
border: 1px solid rgba(201,150,60,.12);
border-radius: 50%;
box-shadow:
0 0 0 60px rgba(201,150,60,.05),
0 0 0 130px rgba(201,150,60,.03),
0 0 0 220px rgba(201,150,60,.02);
}

.hero-content {
position: relative;
z-index: 2;
padding: 0 80px;
max-width: 780px;
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(201,150,60,.4);
padding: 8px 20px 8px 14px;
margin-bottom: 48px;
background: rgba(201,150,60,.08);
opacity: 0;
animation: fadeUp .9s .2s forwards;
}
.hero-badge-dot {
width: 6px; height: 6px;
background: var(--gold);
border-radius: 50%;
flex-shrink: 0;
}
.hero-badge span {
font-size: 10px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold2);
font-weight: 300;
}

.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(52px, 7vw, 96px);
font-weight: 400;
line-height: 1.04;
color: var(--champagne);
margin-bottom: 36px;
opacity: 0;
animation: fadeUp .9s .4s forwards;
}
.hero-title em {
font-style: italic;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold3) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero-sub {
font-size: 16px;
font-weight: 300;
line-height: 1.95;
color: rgba(245,237,216,.65);
max-width: 520px;
margin-bottom: 56px;
opacity: 0;
animation: fadeUp .9s .6s forwards;
}

.hero-btns {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp .9s .8s forwards;
}

.btn-gold {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
color: var(--deep);
padding: 18px 52px;
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
border: none;
cursor: pointer;
transition: all .3s;
display: inline-block;
box-shadow: 0 8px 32px rgba(201,150,60,.35);
text-align: center;
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(201,150,60,.5);
}

.btn-outline {
border: 1px solid rgba(201,150,60,.5);
color: var(--champagne);
padding: 17px 44px;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
text-decoration: none;
font-weight: 300;
transition: all .3s;
cursor: pointer;
display: inline-block;
font-family: 'Lato', sans-serif;
background: transparent;
text-align: center;
}
.btn-outline:hover {
background: rgba(201,150,60,.08);
border-color: var(--gold);
color: var(--gold2);
}

/* HERO STATS BAR */
.hero-stats {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid rgba(201,150,60,.2);
background: rgba(26,10,18,.6);
backdrop-filter: blur(12px);
}
.hero-stat {
padding: 28px 40px;
display: flex;
flex-direction: column;
gap: 6px;
border-right: 1px solid rgba(201,150,60,.15);
min-width: 0;
}
.hero-stat:last-child { border-right: none; }
.hero-stat-num {
font-family: 'Playfair Display', serif;
font-size: 38px;
font-weight: 400;
color: var(--gold2);
line-height: 1;
}
.hero-stat-label {
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(245,237,216,.4);
font-weight: 300;
}

/* ═══════════════════════════
SECTION COMMONS
═══════════════════════════ */
.section {
padding: 110px 80px;
position: relative;
}

.s-eyebrow {
display: flex;
align-items: center;
gap: 16px;
font-size: 10px;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--gold2);
font-weight: 500;
margin-bottom: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.s-eyebrow::before {
content:'';
width: 36px; height: 1px;
background: linear-gradient(to right, var(--gold), transparent);
flex-shrink: 0;
}

.ps-eyebrow {
  color: var(--deep);
}

.s-title {
font-family: 'Playfair Display', serif;
font-size: clamp(36px, 4vw, 60px);
font-weight: 400;
line-height: 1.1;
color: var(--deep);
}
.s-title em { font-style: italic; color: var(--ruby); }

.s-title-light {
color: var(--champagne);
}
.s-title-light em { color: var(--gold2); }

/* ═══════════════════════════
HOW IT WORKS — Dark Luxury
═══════════════════════════ */
.hiw-section {
background: linear-gradient(135deg, var(--deep) 0%, var(--burgundy) 50%, var(--navy) 100%);
padding: 110px 80px;
position: relative;
overflow: hidden;
}
.hiw-section::before {
content:'';
position:absolute;
top:-200px; right:-200px;
width:600px; height:600px;
border-radius:50%;
background: radial-gradient(circle, rgba(201,150,60,.08) 0%, transparent 70%);
}

.hiw-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-top: 72px;
}

.hiw-card {
background: rgba(245,237,216,.03);
border: 1px solid rgba(201,150,60,.15);
padding: 56px 44px;
position: relative;
overflow: hidden;
transition: all .4s;
cursor: default;
}
.hiw-card::before {
content:'';
position:absolute;
top:0;left:0;right:0;
height:2px;
background: linear-gradient(90deg, var(--gold), var(--gold2));
transform: scaleX(0);
transform-origin: left;
transition: transform .5s;
}
.hiw-card:hover::before { transform: scaleX(1); }
.hiw-card:hover { background: rgba(201,150,60,.06); }

.hiw-num {
font-family: 'Cinzel', serif;
font-size: 72px;
font-weight: 400;
color: rgba(201,150,60,.12);
line-height: 1;
margin-bottom: 28px;
transition: color .4s;
}
.hiw-card:hover .hiw-num { color: rgba(201,150,60,.25); }

.hiw-icon {
width: 52px; height: 52px;
border: 1px solid rgba(201,150,60,.3);
display: flex; align-items: center; justify-content: center;
margin-bottom: 28px;
font-size: 22px;
}

.hiw-title {
font-family: 'Playfair Display', serif;
font-size: 22px;
font-weight: 400;
color: var(--champagne);
margin-bottom: 16px;
}
.hiw-text {
font-size: 14px;
font-weight: 300;
line-height: 1.95;
color: rgba(245,237,216,.5);
}

/* ═══════════════════════════
PROMISE SECTION
═══════════════════════════ */
.promise-section {
background: var(--champagne2);
padding: 110px 80px;
}
.promise-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
margin-top: 72px;
background: rgba(201,150,60,.2);
}
.promise-card {
background: var(--champagne);
padding: 60px 56px;
position: relative;
overflow: hidden;
transition: background .3s;
}
.promise-card:hover { background: var(--ivory); }
.promise-card::after {
content:'';
position:absolute;
bottom: 0; left: 56px;
width: 40px; height: 2px;
background: var(--gold);
}
.promise-tag {
font-family: 'Cinzel', serif;
font-size: 9px;
letter-spacing: .3em;
color: var(--gold);
margin-bottom: 18px;
}
.promise-title {
font-family: 'Playfair Display', serif;
font-size: 26px;
font-weight: 400;
color: var(--deep);
margin-bottom: 16px;
}
.promise-text {
font-size: 14px;
font-weight: 300;
line-height: 1.95;
color: var(--muted);
}

/* ═══════════════════════════
TESTIMONIALS PAGE
═══════════════════════════ */
.testi-hero {
background: linear-gradient(160deg, var(--burgundy) 0%, var(--deep) 40%, var(--emerald) 100%);
padding: 100px 80px 80px;
position: relative;
overflow: hidden;
}
.testi-hero::after {
content:'✦';
position:absolute;
right:10%; top:50%;
transform:translateY(-50%);
font-size:280px;
color:rgba(201,150,60,.04);
font-family:'Cinzel',serif;
line-height:1;
}

.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 80px;
}

.testi-card {
background: white;
padding: 52px 44px;
position: relative;
overflow: hidden;
border-bottom: 3px solid var(--gold);
box-shadow: 0 4px 40px rgba(74,14,32,.08);
transition: transform .3s, box-shadow .3s;
}
.testi-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 60px rgba(74,14,32,.14);
}
.testi-card::before {
content:'"';
position:absolute;
top: 24px; left: 36px;
font-family: 'Playfair Display', serif;
font-size: 100px;
font-style:italic;
color: rgba(201,150,60,.12);
line-height:1;
}

.testi-stars {
display: flex;
gap: 4px;
margin-bottom: 24px;
}
.star { color: var(--gold2); font-size: 14px; }

.testi-text {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 17px;
line-height: 1.8;
color: var(--text);
margin-bottom: 36px;
position: relative;
z-index: 1;
}

.testi-divider {
height: 1px;
background: linear-gradient(to right, var(--gold), rgba(201,150,60,.1));
margin-bottom: 28px;
}

.testi-meta {
display: flex;
align-items: center;
gap: 16px;
}
.testi-avatar {
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--burgundy), var(--ruby));
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 20px;
font-style: italic;
color: var(--gold2);
border: 2px solid rgba(201,150,60,.3);
flex-shrink: 0;
}
.testi-name {
font-family: 'Cinzel', serif;
font-size: 12px;
letter-spacing: .1em;
color: var(--deep);
margin-bottom: 4px;
}
.testi-loc {
font-size: 11px;
color: var(--muted);
font-weight: 300;
letter-spacing: .08em;
}

/* Featured testimonial */
.testi-featured {
background: linear-gradient(135deg, var(--burgundy) 0%, var(--deep) 100%);
padding: 80px;
margin: 60px 0 0;
position: relative;
overflow: hidden;
}
.testi-featured::before {
content:'"';
position:absolute;
top:-20px; left:60px;
font-family:'Playfair Display',serif;
font-size:220px;
font-style:italic;
color:rgba(201,150,60,.08);
line-height:1;
}
.testi-featured-text {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: clamp(22px, 3vw, 34px);
line-height: 1.6;
color: var(--champagne);
max-width: 860px;
position: relative;
z-index: 1;
margin-bottom: 40px;
}
.testi-featured-name {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: .25em;
    color: var(--gold2);
}

/* ═══════════════════════════
PROFILE PAGE
═══════════════════════════ */
.profile-hero {
background: linear-gradient(135deg, var(--emerald) 0%, var(--deep) 50%, var(--burgundy) 100%);
padding: 80px 80px 70px;
position: relative;
overflow: hidden;
}
.profile-hero::after {
content:'';
position:absolute;
bottom:-200px;right:-200px;
width:500px;height:500px;
border:1px solid rgba(201,150,60,.08);
border-radius:50%;
}

.profile-body {
background: var(--champagne2);
padding: 0;
}

.profile-layout {
display: grid;
grid-template-columns: 320px 1fr;
min-height: calc(100dvh - 80px);
}

.profile-sidebar {
background: white;
border-right: 1px solid rgba(201,150,60,.2);
padding: 48px 36px;
position: sticky;
top: 80px;
height: fit-content;
}

.profile-avatar-wrap {
text-align: center;
margin-bottom: 36px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(201,150,60,.2);
}

.profile-avatar {
width: 100px; height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, var(--burgundy), var(--ruby));
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 40px;
font-style: italic;
color: var(--gold2);
border: 3px solid rgba(201,150,60,.4);
margin: 0 auto 20px;
overflow: hidden;
}

.profile-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.profile-avatar-upload {
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.profile-photo-upload {
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 600;
}

.profile-name {
font-family: 'Playfair Display', serif;
font-size: 22px;
font-weight: 400;
color: var(--deep);
margin-bottom: 6px;
}

.profile-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
background: rgba(26,58,42,.1);
border: 1px solid rgba(26,58,42,.2);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--emerald);
font-weight: 400;
}
.status-dot {
width: 6px; height: 6px;
background: #3A8A5A;
border-radius: 50%;
flex-shrink: 0;
}

.sidebar-section {
margin-bottom: 28px;
}
.sidebar-label {
font-size: 9px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
font-weight: 400;
}
.sidebar-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(201,150,60,.1);
font-size: 13px;
gap: 12px;
}
.sidebar-item-key {
color: var(--muted);
font-weight: 300;
}
.sidebar-item-val {
color: var(--text);
font-weight: 400;
text-align: right;
}

.profile-main {
padding: 52px 60px;
}

.profile-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid rgba(201,150,60,.2);
margin-bottom: 48px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.profile-tab {
padding: 14px 28px;
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all .3s;
font-weight: 300;
white-space: nowrap;
}
.profile-tab.active {
color: var(--gold);
border-bottom-color: var(--gold);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.form-row.triple { grid-template-columns: 1fr 1fr 1fr; }
.form-row.full { grid-template-columns: 1fr; }

.form-field {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.form-lbl {
font-size: 9px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
font-weight: 400;
}
.form-inp {
border: none;
border-bottom: 1.5px solid rgba(201,150,60,.25);
padding: 12px 0;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
color: var(--text);
background: transparent;
outline: none;
transition: border-color .3s;
width: 100%;
}
.form-inp:focus { border-bottom-color: var(--gold); }
.form-inp::placeholder { color: rgba(42,21,32,.25); }

select.form-inp {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9963C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 4px center;
}
textarea.form-inp {
border: 1.5px solid rgba(201,150,60,.25);
padding: 14px 16px;
min-height: 110px;
resize: none;
font-family: 'Lato', sans-serif;
transition: border-color .3s;
}
textarea.form-inp:focus { border-color: var(--gold); }

/* WORD COUNTER (shown under textareas that have a word limit, e.g. About Yourself /
   Spiritual Goals). Kept live and in sync by the WORD_LIMITS logic in profile.js. */
.word-counter {
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  text-align: right;
  letter-spacing: .05em;
  margin-top: -2px; /* pulls it a bit closer to the textarea above it */
}
/* Turns red once the user goes over the word limit, as a clear warning */
.word-counter.over-limit {
  color: #c0392b;
  font-weight: 400;
}

.qualities-wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.q-chip {
padding: 8px 18px;
border: 1px solid rgba(201,150,60,.3);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
transition: all .25s;
font-weight: 300;
background: none;
font-family: 'Lato', sans-serif;
}
.q-chip:hover, .q-chip.active {
border-color: var(--burgundy);
color: var(--burgundy);
background: rgba(74,14,32,.05);
}

.profile-section-title {
font-family: 'Playfair Display', serif;
font-size: 22px;
font-weight: 400;
color: var(--deep);
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(201,150,60,.15);
display: flex;
align-items: center;
gap: 12px;
}
.profile-section-title::before {
content:'';
width: 3px; height: 22px;
background: linear-gradient(to bottom, var(--gold), var(--ruby));
flex-shrink: 0;
}

.form-actions {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(201,150,60,.15);
flex-wrap: wrap;
}
.btn-save {
background: linear-gradient(135deg, var(--burgundy) 0%, var(--ruby) 100%);
color: var(--champagne);
padding: 16px 52px;
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: all .3s;
box-shadow: 0 4px 20px rgba(74,14,32,.3);
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(74,14,32,.4); }
.btn-secondary {
border: 1px solid rgba(201,150,60,.4);
color: var(--gold);
padding: 15px 36px;
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
background: none;
cursor: pointer;
transition: all .3s;
font-family: 'Lato', sans-serif;
}
.btn-secondary:hover { background: rgba(201,150,60,.06); }

/* ═══════════════════════════
ABOUT PAGE
═══════════════════════════ */
.about-hero {
background: linear-gradient(155deg, var(--navy) 0%, var(--deep) 40%, var(--burgundy) 100%);
padding: 100px 80px;
position: relative;
overflow: hidden;
}

.about-mission {
background: var(--champagne);
padding: 110px 80px;
}
.about-mission-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
margin-top: 72px;
}
.about-mission-text {
font-size: 15px;
font-weight: 300;
line-height: 2;
color: var(--muted);
}
.about-verse {
padding: 48px;
background: linear-gradient(135deg, var(--burgundy), var(--deep));
position: relative;
}
.about-verse::before {
content:'"';
position:absolute;
top:-10px;left:36px;
font-family:'Playfair Display',serif;
font-size:140px;
font-style:italic;
color:rgba(201,150,60,.1);
line-height:1;
}
.about-verse-text {
font-family:'Playfair Display',serif;
font-style:italic;
font-size:22px;
line-height:1.7;
color:var(--champagne);
position:relative;
z-index:1;
margin-bottom:20px;
}
.about-verse-ref {
font-size:11px;
letter-spacing:.2em;
color:var(--gold2);
text-transform:uppercase;
}

.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 72px;
}
.team-card {
text-align: center;
padding: 52px 36px;
background: white;
box-shadow: 0 2px 20px rgba(74,14,32,.06);
transition: transform .3s;
}
.team-card:hover { transform: translateY(-6px); }
.team-avatar {
width: 80px; height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--burgundy), var(--ruby));
margin: 0 auto 20px;
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 32px;
font-style: italic;
color: var(--gold2);
border: 2px solid rgba(201,150,60,.3);
}
.team-name {
font-family: 'Playfair Display', serif;
font-size: 20px;
color: var(--deep);
margin-bottom: 6px;
}
.team-role {
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.team-bio {
font-size: 13px;
font-weight: 300;
line-height: 1.85;
color: var(--muted);
}

/* ═══════════════════════════
CONTACT PAGE
═══════════════════════════ */
.contact-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
min-height: calc(100dvh - 80px);
}
.contact-form-side {
background: var(--champagne);
padding: 80px;
}
.contact-info-side {
background: linear-gradient(155deg, var(--deep) 0%, var(--burgundy) 60%, var(--ruby) 100%);
padding: 80px;
position: relative;
overflow: hidden;
}
.contact-info-side::before {
content:'';
position:absolute;
bottom:-150px;right:-150px;
width:400px;height:400px;
border:1px solid rgba(201,150,60,.1);
border-radius:50%;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 44px;
}
.contact-icon {
width: 44px; height: 44px;
border: 1px solid rgba(201,150,60,.3);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.contact-item-title {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: .18em;
color: var(--gold2);
margin-bottom: 6px;
}
.contact-item-text {
font-size: 14px;
font-weight: 300;
color: rgba(245,237,216,.6);
line-height: 1.7;
}

/* ═══════════════════════════
FOOTER
═══════════════════════════ */
footer {
background: var(--deep);
padding: 80px;
position: relative;
z-index: 1;
}
.footer-grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1fr;
gap: 64px;
padding-bottom: 60px;
border-bottom: 1px solid rgba(201,150,60,.12);
margin-bottom: 40px;
}
.footer-brand-name {
font-family: 'Cinzel', serif;
font-size: 16px;
letter-spacing: .18em;
color: var(--gold2);
margin-bottom: 6px;
}
.footer-brand-sub {
font-size: 10px;
letter-spacing: .22em;
color: rgba(201,150,60,.45);
text-transform: uppercase;
margin-bottom: 20px;
}
.footer-desc {
font-size: 13px;
font-weight: 300;
line-height: 1.9;
color: rgba(245,237,216,.3);
max-width: 280px;
}
.footer-heading {
font-size: 9px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
font-size: 13px;
font-weight: 300;
color: rgba(245,237,216,.3);
text-decoration: none;
transition: color .3s;
letter-spacing: .04em;
}
.footer-links a:hover { color: var(--gold2); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-copy { font-size: 11px; color: rgba(245, 248, 248, 0.953); }
.footer-verse {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 13px;
color: rgba(245, 248, 248, 0.953);
}

/* ═══════════════════════════
REVEAL ANIMATION
═══════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@keyframes fadeUp {
from { opacity:0; transform:translateY(24px); }
to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
from { opacity:0; }
to   { opacity:1; }
}

/* LUXURY DIVIDER */
.luxury-divider {
display: flex;
align-items: center;
gap: 20px;
margin: 24px 0;
}
.luxury-divider::before, .luxury-divider::after {
content:'';
flex:1;
height:1px;
background: linear-gradient(to right, transparent, rgba(201,150,60,.4), transparent);
}
.luxury-divider-icon { color: var(--gold); font-size: 14px; }

/* PROGRESS BAR (profile completion) */
.completion-bar {
margin-top: 20px;
}
.completion-label {
display: flex;
justify-content: space-between;
font-size: 10px;
letter-spacing: .15em;
text-transform: uppercase;
margin-bottom: 8px;
}
.completion-label span:first-child { color: var(--muted); }
.completion-label span:last-child { color: var(--gold); }
.completion-track {
height: 3px;
background: rgba(201,150,60,.15);
position: relative;
}
.completion-fill {
height: 100%;
width: 65%;
background: linear-gradient(to right, var(--gold), var(--gold2));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints: 1080px (tablet/small laptop), 768px (tablet),
   540px (mobile)
   ══════════════════════════════════════════════════════════ */

/* ---------- ≤1080px : tablet / small laptop ---------- */
@media (max-width: 1080px) {
  .section,
  .hiw-section,
  .promise-section,
  .about-mission,
  .testi-hero,
  .profile-hero,
  .about-hero {
    padding-left: 48px;
    padding-right: 48px;
  }

  .hero-content { padding: 0 48px; max-width: 620px; }

  .hiw-grid,
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .testi-grid { grid-template-columns: repeat(2, 1fr); }

  .about-mission-layout { gap: 56px; }

  .profile-layout { grid-template-columns: 260px 1fr; }
  .profile-main { padding: 44px 40px; }
  .profile-sidebar { padding: 40px 28px; }

  .contact-layout { grid-template-columns: 1fr; }
  .contact-form-side,
  .contact-info-side { padding: 56px 48px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  footer { padding: 60px 48px; }
  nav {padding: 0 32px;}
}

/* ---------- ≤900px : nav collapses to hamburger ---------- */
@media (max-width: 900px) {
  nav { padding: 0 24px; height: 68px; }
  .nav-crest { width: 36px; height: 36px; }
  .nav-name-top { font-size: 11px; }
  .nav-name-sub { font-size: 8px; }

  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 70%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(160deg, rgba(19,7,13,.99) 0%, rgba(74,14,32,.99) 100%);
    border-bottom: 1px solid rgba(201,150,60,.3);
    max-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: max-height .35s ease;
  }
  /* Open menu is fixed and reaches down to 70% of the viewport height,
     measured from the very top of the screen (not just the nav bar). */
  .nav-links.open { max-height: 70vh;         top: 70%;}

  .nav-links li { width: 100%; }
  .nav-links li a {
    height: auto;
    line-height: 1.4;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(201,150,60,.1);
  }
  .nav-links li a.active { background: rgba(201,150,60,.08); }
  .nav-cta { margin: 16px 28px !important; text-align: center; }

  .page { padding-top: 68px; }
    .hero-content { padding: 140px 28px 0; max-width: 100%;}

}

/* ---------- ≤768px : tablet portrait / large phone ---------- */
@media (max-width: 768px) {
  .section,
  .hiw-section,
  .promise-section,
  .about-mission,
  .testi-hero,
  .profile-hero,
  .about-hero {
    padding: 72px 28px;
  }

  .hero { min-height: auto; padding-bottom: 200px;  flex-direction: column;  gap: 10px;}
  .hero-content { padding: 140px 28px 0; max-width: 100%; flex-direction: column; }
  .hero-title { font-size: clamp(38px, 10vw, 56px); margin-bottom: 24px; }
  .hero-sub { font-size: 15px; margin-bottom: 40px; }
  .hero-badge { margin-bottom: 32px; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: 14px; }
  .btn-gold, .btn-outline { width: 100%; padding: 18px 24px; }

  .hero-stats { grid-template-columns: repeat(2, 1fr); position: relative; }
  .hero-stat { padding: 20px 20px; border-bottom: 1px solid rgba(201,150,60,.15); }
  .hero-stat:nth-child(2n) { border-right: none; }
  .hero-stat-num { font-size: 30px; }

  .hiw-grid,
  .promise-grid,
  .team-grid,
  .testi-grid { grid-template-columns: 1fr; }
  .hiw-card { padding: 40px 32px; }
  .promise-card { padding: 44px 32px; }
  .testi-card { padding: 40px 32px; }

  .about-mission-layout { grid-template-columns: 1fr; gap: 40px; }
  .about-verse { padding: 36px 28px; }

  .testi-featured { padding: 48px 32px; }

  .profile-layout { grid-template-columns: 1fr; }
  .profile-sidebar {
    width: 100vw;
    position: static;
    border-right: none;
    border-bottom: 1px solid rgba(201,150,60,.2);
  }
  .profile-main { padding: 40px 28px; width: 100vw;}

  .form-row,
  .form-row.triple { grid-template-columns: 1fr; gap: 20px; }

  .contact-form-side,
  .contact-info-side { padding: 48px 28px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  footer { padding: 56px 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-desc { max-width: 100%; }
}

/* ---------- ≤540px : phone ---------- */
@media (max-width: 540px) {
  .nav-name-sub { display: none; }

  .hero-content { padding: 24px 20px 0; }
  .hero-title { font-size: clamp(34px, 11vw, 44px); }
  .hero-badge span { font-size: 9px; }

  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat { padding: 18px 16px; }
  .hero-stat-num { font-size: 26px; }

  .s-title { font-size: clamp(28px, 8vw, 40px); }

  .hiw-card, .promise-card, .testi-card { padding: 32px 24px; }
  .hiw-num { font-size: 54px; }

  .testi-featured-text { font-size: 20px; }
  .testi-featured { padding: 40px 24px; }

  .profile-avatar { width: 80px; height: 80px; font-size: 32px; }
  .profile-main { padding: 32px 20px; width: 100vw;}
  .profile-sidebar { padding: 32px 20px; width: 100vw;}

  .btn-save, .btn-secondary { width: 100%; text-align: center; padding: 16px 24px; }
  .form-actions { flex-direction: column-reverse; }

  footer { padding: 48px 20px; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-badge, .hero-title, .hero-sub, .hero-btns { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
}