/* =========================
HER Global — Shared Styles
Luxury / clean / editorial spacing
========================= */

:root{
--bg: #f6f3ee;
--panel: #fbfaf8;
--ink: #141414;
--muted: rgba(20,20,20,.68);
--hair: rgba(20,20,20,.14);
--soft: rgba(20,20,20,.08);
--shadow: 0 18px 50px rgba(0,0,0,.08);
--radius: 22px;
--radius-lg: 28px;

--serif: ui-serif, "Georgia", "Times New Roman", Times, serif;
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

--max: 1120px;
}

/* Base */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
margin:0;
font-family: var(--sans);
background: radial-gradient(1200px 800px at 10% 0%, rgba(0,0,0,.05), transparent 55%),
radial-gradient(900px 650px at 90% 8%, rgba(0,0,0,.04), transparent 60%),
var(--bg);
color: var(--ink);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

/* Header */
.site-header{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(14px);
background: rgba(246,243,238,.72);
border-bottom: 1px solid var(--hair);
}
.header-inner{
display:flex; align-items:center; justify-content:space-between;
padding: 18px 0;
gap: 18px;
}
.brand{
display:flex; flex-direction:column; line-height:1;
}
.brand .name{
font-family: var(--serif);
font-weight:700;
letter-spacing:.3px;
font-size: 20px;
}
.brand .tagline{
margin-top:6px;
font-size: 11px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
}

.nav{
display:flex; align-items:center; gap:18px;
color: var(--muted);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
}
.nav a{ padding:10px 8px; border-radius: 12px; }
.nav a:hover{ background: rgba(0,0,0,.05); color: var(--ink); }

.header-actions{
display:flex; align-items:center; gap:10px;
}
.btn{
display:inline-flex; align-items:center; justify-content:center;
border-radius: 999px;
padding: 12px 16px;
font-size: 12px;
letter-spacing:.14em;
text-transform: uppercase;
border: 1px solid var(--hair);
background: rgba(255,255,255,.55);
color: var(--ink);
transition: transform .12s ease, background .12s ease, border-color .12s ease;
cursor:pointer;
white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.85); border-color: rgba(0,0,0,.22); }
.btn.primary{
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.btn.primary:hover{ background:#0f0f0f; }

.btn.ghost{
background: transparent;
}

/* Layout sections */
.section{
padding: 72px 0;
}
.section-tight{
padding: 54px 0;
}
.kicker{
font-size: 12px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted);
}
.h1{
font-family: var(--serif);
font-size: clamp(42px, 5vw, 70px);
line-height: 0.95;
letter-spacing: -0.02em;
margin: 14px 0 14px;
}
.h2{
font-family: var(--serif);
font-size: clamp(30px, 3.6vw, 44px);
line-height: 1.02;
letter-spacing: -0.02em;
margin: 0 0 10px;
}
.lead{
color: var(--muted);
font-size: 16px;
line-height: 1.8;
max-width: 62ch;
}
.small{
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}

/* Hero */
.hero{
padding: 64px 0 42px;
}
.hero-grid{
display:grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 34px;
align-items:start;
}
.hero-card{
border: 1px solid var(--hair);
border-radius: var(--radius-lg);
background: rgba(255,255,255,.55);
box-shadow: var(--shadow);
padding: 18px;
}
.mood-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.mood{
border: 1px solid var(--hair);
border-radius: 18px;
overflow:hidden;
min-height: 92px;
position:relative;
background:
radial-gradient(520px 240px at 10% 0%, rgba(255,255,255,.65), transparent 60%),
linear-gradient(135deg, rgba(0,0,0,.22), rgba(0,0,0,.05));
}
.mood .label{
position:absolute; left:12px; bottom:10px;
font-size: 11px;
letter-spacing:.18em;
text-transform: uppercase;
color: rgba(255,255,255,.86);
text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.mood .sub{
position:absolute; left:12px; top:10px;
font-size: 10px;
letter-spacing:.22em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
}
.hero-actions{
display:flex; flex-wrap:wrap; gap:10px;
margin-top: 20px;
}
.hero-meta{
margin-top: 18px;
display:flex; flex-wrap:wrap; gap:10px;
}
.pill{
border: 1px solid var(--hair);
background: rgba(255,255,255,.45);
border-radius: 999px;
padding: 10px 12px;
font-size: 11px;
letter-spacing:.18em;
text-transform: uppercase;
color: var(--muted);
}

/* Two-column content */
.split{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
align-items:start;
}
.panel{
border: 1px solid var(--hair);
border-radius: var(--radius-lg);
background: rgba(255,255,255,.55);
box-shadow: var(--shadow);
padding: 26px;
}
.list{
margin: 14px 0 0;
padding: 0;
list-style:none;
display:grid;
gap: 10px;
}
.list li{
padding-left: 16px;
position:relative;
color: var(--muted);
line-height: 1.7;
}
.list li:before{
content:"•";
position:absolute;
left:0;
color: rgba(0,0,0,.55);
}

/* Division blocks */
.divisions{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.division{
border: 1px solid var(--hair);
border-radius: var(--radius-lg);
background: rgba(255,255,255,.55);
box-shadow: var(--shadow);
padding: 26px;
}
.division .title{
font-family: var(--serif);
font-size: 28px;
margin: 10px 0 8px;
}
.division .sub{
font-size: 11px;
letter-spacing:.26em;
text-transform: uppercase;
color: var(--muted);
}
.division .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

/* Gallery */
.gallery{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
margin-top: 22px;
}
.tile{
border: 1px solid var(--hair);
border-radius: 18px;
overflow:hidden;
min-height: 160px;
position:relative;
background:
radial-gradient(520px 240px at 10% 0%, rgba(255,255,255,.65), transparent 60%),
linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.05));
}
.tile .cap{
position:absolute; left:12px; bottom:10px;
font-size: 11px;
letter-spacing:.18em;
text-transform: uppercase;
color: rgba(255,255,255,.88);
text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.tile.span-6{ grid-column: span 6; }
.tile.span-4{ grid-column: span 4; }
.tile.span-8{ grid-column: span 8; }
.tile.span-12{ grid-column: span 12; }

/* Inquiry */
.form{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
.field{
display:flex;
flex-direction:column;
gap: 8px;
}
label{
font-size: 11px;
letter-spacing:.24em;
text-transform: uppercase;
color: var(--muted);
}
input, select, textarea{
border: 1px solid var(--hair);
background: rgba(255,255,255,.55);
border-radius: 16px;
padding: 14px 14px;
font: inherit;
color: var(--ink);
outline:none;
}
textarea{ min-height: 120px; resize: vertical; }
.form .span-2{ grid-column: span 2; }
.form-actions{
display:flex; flex-wrap:wrap; gap: 10px;
margin-top: 14px;
align-items:center;
}
.helper{
color: var(--muted);
font-size: 12px;
line-height: 1.6;
max-width: 78ch;
}

/* CTA banner */
.cta-banner{
border: 1px solid var(--hair);
border-radius: var(--radius-lg);
background:
linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45)),
radial-gradient(900px 500px at 10% 0%, rgba(255,255,255,.12), transparent 55%);
color: rgba(255,255,255,.92);
box-shadow: var(--shadow);
padding: 34px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap: 20px;
}
.cta-banner h3{
font-family: var(--serif);
font-size: 40px;
line-height: 1.02;
margin:0 0 10px;
}
.cta-banner p{ margin:0; color: rgba(255,255,255,.78); max-width: 62ch; line-height:1.7; }

.footer{
padding: 34px 0 54px;
border-top: 1px solid var(--hair);
color: var(--muted);
font-size: 12px;
}
.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap: 12px;
}

/* Responsive */
@media (max-width: 980px){
.hero-grid{ grid-template-columns: 1fr; }
.split{ grid-template-columns: 1fr; }
.divisions{ grid-template-columns: 1fr; }
.form{ grid-template-columns: 1fr; }
.form .span-2{ grid-column: auto; }
.gallery{ grid-template-columns: repeat(6, 1fr); }
.tile.span-8{ grid-column: span 6; }
.tile.span-6{ grid-column: span 6; }
.tile.span-4{ grid-column: span 6; }
.tile.span-12{ grid-column: span 6; }
.cta-banner{ flex-direction:column; align-items:flex-start; }
.nav{ display:none; } /* clean mobile */
}