/* ════════════════════════════════════════════════════════════
   Mark Oehler Photography — static site styles
   Self-contained: brand tokens + components + page layout.
   No build step, no framework. Upload as-is.
   ════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&display=swap");

:root {
  /* neutrals */
  --bone-50:#faf6f0; --bone-100:#f4ede3; --bone-200:#e9ddcd; --bone-300:#d8c8b2;
  --bone-400:#b9a589; --clay-500:#8a7259;
  --ink-900:#1f1a16; --ink-700:#3a322b; --ink-500:#6b5f53; --white:#fff;
  /* terracotta */
  --terra-50:#fbeee7; --terra-100:#f4d7c6; --terra-300:#d99a78;
  --terra-500:#b56a4a; --terra-600:#9c5639; --terra-700:#7d422b;
  /* sage / gold */
  --sage-100:#e4e8dd; --sage-500:#7c8a6f; --sage-600:#63704f; --gold-400:#c89b4a;
  /* semantic */
  --bg-page:var(--bone-50); --bg-alt:var(--bone-100); --surface-card:var(--white);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --accent:var(--terra-500); --accent-hover:var(--terra-600); --accent-press:var(--terra-700);
  --accent-tint:var(--terra-50); --border-hair:var(--bone-200); --border-strong:var(--bone-300);
  --link:var(--terra-600); --link-hover:var(--terra-700);
  --bg-dark:#211b16;
  /* type */
  --font-display:"Cormorant Garamond","Hoefler Text",Georgia,serif;
  --font-body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* space */
  --gutter:clamp(20px,5vw,64px); --maxw-wide:1320px; --maxw-content:1140px; --maxw-prose:680px;
  /* radii + shadow */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(31,26,22,.06); --shadow-sm:0 2px 8px rgba(31,26,22,.08);
  --shadow-md:0 8px 24px rgba(31,26,22,.10); --shadow-lg:0 18px 48px rgba(31,26,22,.14);
  --shadow-frame:0 24px 60px rgba(31,26,22,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── reset ── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  color:var(--text-body); background:var(--bg-page); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em;
  color:var(--text-strong); line-height:1.08; margin:0; }
p { margin:0; text-wrap:pretty; }

/* ── layout helpers ── */
.wrap { max-width:var(--maxw-wide); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.wrap-c { max-width:var(--maxw-content); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section { padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(56px,8vw,96px); }
.alt { background:var(--bg-alt); border-top:1px solid var(--border-hair); border-bottom:1px solid var(--border-hair); }
.eyebrow { font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.lead { font-size:1.22rem; line-height:1.6; color:var(--ink-700); }
.center { text-align:center; }
.muted { color:var(--text-muted); }

/* ── buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  font-size:.9375rem; line-height:1; padding:14px 26px; border-radius:var(--r-pill);
  border:1.5px solid transparent; cursor:pointer; transition:all .16s var(--ease); }
.btn-lg { padding:16px 34px; font-size:1.0625rem; }
.btn-sm { padding:10px 18px; font-size:.8125rem; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-secondary { background:transparent; color:var(--text-strong); border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--bone-100); border-color:var(--clay-500); }
.btn-ondark { background:var(--bone-50); color:var(--ink-900); border-color:var(--bone-50); }
.btn-ondark:hover { background:#fff; }
.link-arrow { font-weight:700; color:var(--accent-press); text-transform:none; letter-spacing:0; }
.link-arrow:hover { color:var(--link-hover); }

/* ── badges ── */
.badge { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--terra-50); color:var(--terra-700); }
.badge-sage { background:var(--sage-100); color:var(--sage-600); }
.badge-solid { background:var(--accent); color:#fff; }

/* ── header ── */
.site-header { position:sticky; top:0; z-index:50; background:rgba(250,246,240,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border-hair); }
.site-header .bar { display:flex; align-items:center; gap:24px; padding-top:13px; padding-bottom:13px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand img { width:42px; height:42px; }
.brand .nm { font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink-900); line-height:1; white-space:nowrap; }
.brand .sb { font-size:9.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.nav { display:flex; gap:2px; margin-left:auto; }
.nav a { font-size:14px; font-weight:600; color:var(--ink-700); padding:8px 12px; border-radius:var(--r-sm);
  border-bottom:2px solid transparent; }
.nav a:hover { color:var(--accent-press); }
.nav a.active { color:var(--accent-press); border-bottom-color:var(--accent); }
.header-cta { white-space:nowrap; }
.menu-toggle { display:none; }

/* ── hero ── */
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-top:clamp(48px,6vw,72px); padding-bottom:clamp(40px,5vw,56px); }
.hero h1 { font-size:clamp(2.6rem,5vw,4.75rem); line-height:1.04; letter-spacing:-0.015em; margin:0 0 30px; }
.hero .it { font-style:italic; color:var(--accent); }
.hero-figure { position:relative; }
.hero-figure .frame { box-shadow:var(--shadow-frame); border-radius:var(--r-lg); overflow:hidden; }
.hero-figure .frame img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; }
.stat-chip { position:absolute; bottom:-18px; left:-18px; background:#fff; border-radius:var(--r-md);
  padding:12px 16px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px; }
.stat-chip .n { font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--accent); }
.stat-chip .t { font-size:12.5px; line-height:1.3; color:var(--ink-700); }

/* ── service cards ── */
.section-head { text-align:center; margin-bottom:44px; }
.section-head h2 { font-size:clamp(2rem,3.2vw,2.7rem); }
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.cards-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.gallery-cta { background:var(--terra-50); border:1px solid var(--terra-100); border-radius:var(--r-lg);
  padding:32px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.gallery-cta h3 { font-size:26px; margin:0 0 4px; }
.gallery-cta p { color:var(--ink-500); font-size:15px; }
.card { background:var(--surface-card); border:1px solid var(--border-hair); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .28s var(--ease),box-shadow .28s var(--ease);
  display:flex; flex-direction:column; }
a.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card .media { aspect-ratio:4/3; overflow:hidden; background:var(--bone-200); }
.card .media img { width:100%; height:100%; object-fit:cover; }
.card .body { padding:24px; }
.card h3 { font-size:27px; margin:12px 0 8px; }
.card .body p { font-size:15px; line-height:1.6; color:var(--ink-500); margin:0 0 16px; }

/* ── value band ── */
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; }
.values h4 { font-weight:600; font-size:22px; margin:0 0 10px; }
.values p { font-size:15px; color:var(--ink-500); }

/* ── dark CTA band ── */
.cta-band { background:var(--bg-dark); }
.cta-band .inner { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-top:64px; padding-bottom:64px; }
.cta-band h2 { color:var(--bone-50); font-size:clamp(1.9rem,3vw,2.5rem); margin:0 0 8px; }
.cta-band p { color:var(--bone-300,#d8c8b2); font-size:16px; }
.cta-band a.phone { color:var(--terra-300); font-weight:700; }

/* ── gallery grid ── */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery .tile { border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.gallery .tile img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery .r45 { aspect-ratio:4/5; } .gallery .r11 { aspect-ratio:1/1; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-weight:600; font-size:.8125rem; padding:7px 16px; border-radius:var(--r-pill);
  border:1px solid var(--border-strong); background:transparent; color:var(--text-body); cursor:pointer; }
.chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.gallery-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:28px; }

/* ── detail hero (service pages) ── */
.detail-hero { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding-top:clamp(40px,5vw,60px); padding-bottom:clamp(32px,4vw,44px); }
.detail-hero h1 { font-size:clamp(2.4rem,4vw,4rem); line-height:1.05; margin:16px 0 18px; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.duo .frame { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.duo .frame img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
.duo .frame:nth-child(2) { margin-top:28px; }

/* ── prices / info ── */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.price-card { background:#fff; border:1px solid var(--border-hair); border-radius:var(--r-lg);
  padding:30px 26px; box-shadow:var(--shadow-sm); }
.price-card h3 { font-size:24px; margin:0 0 4px; }
.price-card .amt { font-family:var(--font-display); font-size:40px; font-weight:600; color:var(--accent); margin:8px 0 4px; }
.price-card ul { list-style:none; padding:0; margin:16px 0 0; }
.price-card li { font-size:14.5px; color:var(--ink-700); padding:7px 0; border-top:1px solid var(--border-hair); display:flex; gap:8px; }
.price-card li::before { content:"\2713"; color:var(--sage-600); font-weight:700; }

/* ── contact ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-call { background:var(--bg-dark); border-radius:var(--r-lg); padding:40px; color:var(--bone-50); }
.contact-call .big { font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); font-weight:600; color:#fff; }
.contact-call a.phone { color:var(--terra-300); }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.field input, .field textarea { font-family:var(--font-body); font-size:1rem; color:var(--text-strong);
  background:#fff; padding:12px 14px; border:1.5px solid var(--border-strong); border-radius:var(--r-sm); outline:none; }
.field input:focus, .field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--terra-50); }

/* ── footer ── */
.site-footer { background:var(--bg-dark); color:var(--bone-50); }
.site-footer .top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  padding-top:64px; padding-bottom:40px; }
.site-footer .fbrand { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.site-footer .fbrand img { width:46px; height:46px; }
.site-footer .fbrand span { font-family:var(--font-display); font-weight:600; font-size:24px; }
.site-footer p { color:var(--bone-300,#d8c8b2); font-size:15px; line-height:1.7; max-width:340px; }
.site-footer h5 { font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terra-300); margin:0 0 10px; font-family:var(--font-body); }
.site-footer .col a { display:block; color:var(--bone-100); font-size:15px; padding:5px 0; }
.site-footer .col a:hover { color:#fff; }
.site-footer .phone-big { font-family:var(--font-display); font-size:26px; color:#fff; margin:4px 0 10px; }
.site-footer .legal { border-top:1px solid rgba(255,255,255,.1); padding-top:18px; padding-bottom:18px;
  display:flex; justify-content:space-between; gap:16px; font-size:12.5px; color:var(--bone-400); flex-wrap:wrap; }

/* ── responsive ── */
@media (max-width:1080px){ .cards-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .hero,.detail-hero,.contact-grid { grid-template-columns:1fr; gap:36px; }
  .cards-3,.values,.price-grid { grid-template-columns:1fr; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .site-footer .top { grid-template-columns:1fr; gap:28px; }
  .stat-chip { left:auto; right:16px; }
  .nav { display:none; }
  .nav.open { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--bone-50); border-bottom:1px solid var(--border-hair); padding:8px var(--gutter) 16px; gap:0; }
  .nav.open a { padding:12px 0; border-bottom:1px solid var(--border-hair); }
  .menu-toggle { display:inline-flex; margin-left:auto; background:none; border:none; cursor:pointer;
    font-size:26px; color:var(--ink-900); line-height:1; padding:4px 8px; }
  .header-cta { display:none; }
}
@media (max-width:520px){
  .cards-3,.cards-4 { grid-template-columns:1fr; }
  .duo { grid-template-columns:1fr; } .duo .frame:nth-child(2){ margin-top:0; }
}