/* ================================================================
   STYLE 1 — TERRACOTTA MINIMAL
   Fonts: Cormorant Garamond + Jost
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
  --cream:      #FAF7F2;
  --warm-white: #F3EDE4;
  --clay:       #EDE4D8;
  --terracotta: #B5744A;
  --tc-light:   #D4956A;
  --dark:       #2C2420;
  --mid:        #6B5A50;
  --muted:      #8C7B70;
  --border:     #E8DDD4;
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'Jost', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--cream); color: var(--dark); font-weight: 300; }
a { text-decoration: none; }
p { line-height: 1.8; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }

/* ── Announce Bar ── */
#announce-bar { background: var(--dark); padding: 8px 56px; text-align: center; }
#announce-bar p { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #6B5A50; }

/* ── Nav ── */
#site-header { background: var(--cream); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
#main-nav { padding: 18px 56px; display: flex; justify-content: space-between; align-items: center; }
#site-logo { display: flex; align-items: center; gap: 10px; color: var(--dark); }
.logo-mark { display: none; }
.logo-text { font-family: var(--serif); font-size: 19px; font-weight: 400; }
#nav-links { display: flex; gap: 32px; list-style: none; }
#nav-links a { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
#nav-links a:hover { color: var(--terracotta); }
#nav-cta { background: var(--terracotta); color: var(--cream); padding: 10px 24px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; transition: background 0.2s; }
#nav-cta:hover { background: var(--tc-light); }

/* ── Hero ── */
#hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
#hero-content { background: var(--clay); padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }
#hero-kicker { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--terracotta); margin-bottom: 20px; }
#hero-headline { font-size: 52px; font-weight: 300; line-height: 1.15; margin-bottom: 24px; }
#hero-headline em { font-style: italic; color: var(--terracotta); }
#hero-body { font-size: 15px; color: var(--mid); margin-bottom: 36px; max-width: 420px; }
#hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
#hero-visual { background: var(--dark); overflow: hidden; min-height: 420px; }
#hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
#hero-visual.img-missing { display: flex; align-items: center; justify-content: center; }
#hero-visual.img-missing::after { content: 'Hero image — drop assets/hero.jpg'; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #5A4840; }
#hero-visual.img-missing img { display: none; }

/* ── Info Strip ── */
#info-strip { background: var(--dark); padding: 13px 56px; display: flex; flex-wrap: wrap; }
#info-strip span { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #6B5A50; padding: 0 24px; border-right: 1px solid #3A2C28; }
#info-strip span:first-child { padding-left: 0; }
#info-strip span:last-child { border-right: none; }
.strip-divider { display: none; }

/* ── Sections ── */
section { padding: 72px 64px; }
.section-header { margin-bottom: 40px; }
.eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--terracotta); margin-bottom: 12px; }
.section-header h2 { font-size: 36px; font-weight: 300; margin-bottom: 12px; }
.section-sub { font-size: 14px; color: var(--mid); max-width: 560px; }

/* ── Classes ── */
#classes { background: var(--warm-white); }
#offerings-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.offering-card { background: var(--cream); border: 1px solid var(--border); padding: 32px 28px; }
.offering-num { font-family: var(--serif); font-size: 48px; font-weight: 300; color: var(--border); line-height: 1; display: block; margin-bottom: 16px; }
.offering-card h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 10px; }
.offering-card p { font-size: 13px; color: var(--muted); line-height: 1.75; margin-bottom: 20px; }
.offering-link { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--terracotta); border-bottom: 1px solid var(--terracotta); padding-bottom: 2px; }

/* ── About ── */
#about { display: grid; grid-template-columns: 2fr 3fr; padding: 0; background: var(--dark); }
#about-visual { background: #3A2C28; overflow: hidden; min-height: 360px; }
#about-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
#about-visual.img-missing { display: flex; align-items: center; justify-content: center; }
#about-visual.img-missing::after { content: 'Portrait — drop assets/portrait.jpg'; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #5A4840; }
#about-visual.img-missing img { display: none; }
#about-content { padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; }
#about-content .eyebrow { color: var(--terracotta); }
#about-content h2 { font-size: 34px; font-weight: 300; color: var(--cream); margin-bottom: 20px; line-height: 1.2; }
#about-content p { font-size: 14px; color: #9C8E82; line-height: 1.9; margin-bottom: 14px; }

/* ── Schedule ── */
#schedule { background: var(--clay); }
#schedule-cta-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* ── Pricing ── */
#pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.price-card { border: 1px solid var(--border); padding: 36px 28px; position: relative; }
.price-featured { border-color: var(--terracotta); background: #FDF5EE; }
.price-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--terracotta); color: var(--cream); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 4px 16px; white-space: nowrap; }
.price-type { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.price-amount { font-family: var(--serif); font-size: 52px; font-weight: 300; color: var(--dark); line-height: 1; margin-bottom: 4px; }
.price-currency { font-size: 28px; vertical-align: super; }
.price-frequency { font-size: 12px; color: var(--muted); margin-bottom: 24px; }
.price-features { list-style: none; margin-bottom: 28px; }
.price-features li { font-size: 13px; color: var(--mid); padding: 7px 0; border-bottom: 1px solid var(--border); }
.price-features li::before { content: '— '; color: var(--terracotta); }
.price-features li:first-child { border-top: 1px solid var(--border); }

/* ── Contact ── */
#contact { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
#contact-info { background: var(--clay); padding: 72px 56px; }
#contact-info .eyebrow { color: var(--terracotta); }
#contact-info h2 { font-size: 34px; font-weight: 300; margin-bottom: 16px; }
#contact-info > p { font-size: 14px; color: var(--mid); line-height: 1.85; margin-bottom: 32px; }
#contact-details { display: flex; flex-direction: column; gap: 14px; }
.contact-row { display: flex; }
.contact-row dt { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); width: 80px; flex-shrink: 0; padding-top: 2px; }
.contact-row dd { font-size: 14px; color: var(--dark); }
#contact-form-wrap { background: var(--dark); padding: 72px 56px; }
#contact-form-wrap h3 { font-family: var(--serif); font-size: 24px; color: var(--cream); margin-bottom: 28px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #6B5A50; margin-bottom: 8px; }
.form-field input, .form-field textarea, .form-field select { width: 100%; background: #3A2C28; border: 1px solid #4A3830; padding: 12px 16px; font-size: 14px; color: var(--cream); font-family: var(--sans); font-weight: 300; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--terracotta); }
.form-field textarea { height: 100px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #5A4840; }

/* ── Footer ── */
#site-footer { background: #1A120E; padding: 26px 64px; display: flex; justify-content: space-between; align-items: center; }
#footer-copy { font-size: 11px; color: #5A4840; }
#footer-nav { display: flex; gap: 24px; }
#footer-nav a { font-size: 11px; color: #5A4840; transition: color 0.2s; }
#footer-nav a:hover { color: var(--terracotta); }

/* ── Buttons ── */
.btn-primary { background: var(--terracotta); color: var(--cream); padding: 13px 30px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; border: none; cursor: pointer; font-family: var(--sans); transition: background 0.2s; display: inline-block; }
.btn-primary:hover { background: var(--tc-light); }
.btn-secondary { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--mid); border-bottom: 1px solid var(--muted); padding-bottom: 2px; transition: color 0.2s; }
.btn-secondary:hover { color: var(--terracotta); border-color: var(--terracotta); }
.btn-price { display: inline-block; border: 1px solid var(--dark); color: var(--dark); padding: 10px 24px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; transition: all 0.2s; }
.btn-price:hover { background: var(--dark); color: var(--cream); }
.price-featured .btn-price { border-color: var(--terracotta); color: var(--terracotta); }
.price-featured .btn-price:hover { background: var(--terracotta); color: var(--cream); }
.btn-submit { width: 100%; text-align: center; display: block; }
.img-placeholder { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #5A4840; }

/* ── Theme Switcher ── */
#theme-switcher { position: fixed; bottom: 28px; right: 28px; z-index: 9999; }
#theme-toggle { width: 48px; height: 48px; background: var(--terracotta); color: var(--cream); border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: background 0.2s; }
#theme-toggle:hover { background: var(--tc-light); }
#theme-panel { position: absolute; bottom: 56px; right: 0; background: var(--cream); border: 1px solid var(--border); padding: 20px; width: 220px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); display: none; }
#theme-panel.open { display: block; }
#theme-panel-label { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
#theme-options { display: flex; flex-direction: column; gap: 10px; }
.theme-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--border); padding: 8px 12px; cursor: pointer; font-family: var(--sans); font-size: 12px; color: var(--mid); text-align: left; transition: border-color 0.2s; }
.theme-btn:hover, .theme-btn.active { border-color: var(--terracotta); color: var(--dark); }
.theme-swatch { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border); }