/* African Beauty Tresses — multi-page preview theme (espresso & gold) */
:root{--espresso:#2b1a12;--mocha:#5a3a26;--gold:#c9a227;--gold-2:#e3c766;--cream:#fdf8f1;--line:#e8dcc8;--muted:#7a6353}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,serif;background:var(--cream);color:#2a1d14;line-height:1.6}
a{color:var(--mocha)}
.preview-banner{background:#3d2417;color:#e9dcc4;text-align:center;font-size:13px;padding:8px 12px}
header.site{background:linear-gradient(160deg,#2b1a12,#3d2417);color:#fff;padding:22px 20px 18px}
.header-inner{max-width:1020px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
/* Same logo treatment as the live site: centered, large, and screen-blended
   so the logo's black background melts into the dark header. */
.header-inner img.logo{width:min(300px,68vw);height:auto;mix-blend-mode:screen}
.head-contact{font-size:13px;color:#e9dcc4;letter-spacing:.14em;text-transform:uppercase}
.head-contact a{color:#e9dcc4;text-decoration:none}
nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;justify-content:center}
nav a{color:#e8d9c4;text-decoration:none;padding:8px 12px;border-radius:999px;font-size:14.5px;letter-spacing:.14em;text-transform:uppercase}
nav a:hover,nav a.on{color:var(--gold-2);background:rgba(255,255,255,.08)}
nav a.book{background:var(--gold);color:#2b1a12;font-weight:700}
nav a.book:hover{background:var(--gold-2)}
.wrap{max-width:1020px;margin:0 auto;padding:24px 16px 48px}
.hero{border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(43,26,18,.18);margin-bottom:24px}
.hero img{width:100%;display:block;max-height:520px;object-fit:cover}
.hero-text{padding:24px}
.hero-text h1{font-size:34px;margin:0 0 8px;font-weight:400}
.hero-text p{color:var(--muted);margin:0 0 16px}
h2{font-size:26px;font-weight:400;margin:28px 0 6px}
p.sub{color:var(--muted);margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 6px 24px rgba(43,26,18,.08)}
.card h3{margin:0 0 6px;font-weight:400;font-size:20px}
.card p{margin:0 0 12px;color:#4a3628}
.price{color:var(--mocha);font-weight:700}
.price small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.btn{display:inline-block;background:var(--espresso);color:#fff;text-decoration:none;padding:11px 20px;border-radius:999px;font-size:15px}
.btn.gold{background:var(--gold);color:#2b1a12;font-weight:700}
.btn.ghost{background:#fff;color:var(--espresso);border:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 24px rgba(43,26,18,.08)}
/* Whole photos, never cropped: contain fits each photo fully inside its
   box (cream bars fill the leftover space) instead of cover, which cut
   faces off whenever a photo's shape didn't match the box. */
.gallery img{width:100%;height:320px;object-fit:contain;background:var(--cream-2);display:block}
/* Paired front/back views share one card, side by side. */
.gallery figure.pair{display:grid;grid-template-columns:1fr 1fr}
.gallery figure.pair img{height:260px;object-fit:contain;background:var(--cream-2)}
.gallery figure.pair figcaption{grid-column:1/-1}
.gallery figcaption{padding:10px 12px;font-size:14px}
.gallery figure .gdesc{padding:0 12px;font-size:14px;line-height:1.55;margin:0 0 12px}
.gallery figure .btn{margin:0 12px 14px}
.stars{color:var(--gold);letter-spacing:2px}
blockquote{margin:0;font-style:italic}
footer{border-top:1px solid var(--line);padding:24px 16px;text-align:center;color:var(--muted);font-size:14px}
footer a{color:var(--mocha)}
.steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.step-num{font-size:28px;color:var(--gold)}
@media(max-width:600px){.hero-text h1{font-size:27px}.brand{font-size:19px}}