/* ============================================================
   MIRAME MARKETING & MINDSET — Design System
   Editorial / Premium / Social Media Studio
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- Design Tokens ---------- */
:root{
  /* Colors */
  --c-red: #B11226;
  --c-red-dark: #8C0E1E;
  --c-maroon: #501216;
  --c-cream: #F5EFE6;
  --c-cream-soft: #FBF8F3;
  --c-beige: #DDD0B8;
  --c-ink: #3A2620;
  --c-ink-soft: #6B5850;
  --c-white: #FFFFFF;

  /* Type */
  --f-serif: 'Fraunces', Georgia, serif;
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* Layout */
  --maxw: 1240px;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 24px;

  /* Motion */
  --ease: cubic-bezier(.25,.7,.35,1);
  --dur: .35s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--f-sans);
  color: var(--c-ink);
  background: var(--c-cream);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family: inherit; font-size: 1rem; color: inherit; }
svg{ display:block; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
@media (max-width: 640px){ .container{ padding: 0 var(--sp-3); } }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family: var(--f-serif); color: var(--c-maroon); line-height: 1.12; font-weight: 500; letter-spacing: -.01em; }
h1{ font-size: clamp(2.5rem, 5.5vw, 4.4rem); font-weight: 500; }
h2{ font-size: clamp(2rem, 3.6vw, 3rem); }
h3{ font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
h4{ font-size: 1.15rem; font-weight: 600; }
p{ margin: 0; }
.lede{ font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--c-ink-soft); line-height: 1.6; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--f-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-red);
  margin-bottom: var(--sp-2);
}
.eyebrow::before{ content:''; width: 24px; height: 1px; background: var(--c-red); display:inline-block; }
.serif-italic{ font-style: italic; font-weight: 400; color: var(--c-red); }
.text-center{ text-align:center; }
.measure{ max-width: 640px; }
.measure-wide{ max-width: 780px; }
.center-col{ margin-left:auto; margin-right:auto; }

/* ---------- Sections & Layout helpers ---------- */
section{ padding: var(--sp-8) 0; position: relative; }
@media (max-width: 780px){ section{ padding: var(--sp-6) 0; } }
.section-tight{ padding: var(--sp-6) 0; }
.bg-white{ background: var(--c-white); }
.bg-cream-soft{ background: var(--c-cream-soft); }
.bg-beige{ background: var(--c-beige); }
.bg-maroon{ background: var(--c-maroon); color: var(--c-cream); }
.bg-maroon h1, .bg-maroon h2, .bg-maroon h3, .bg-maroon h4{ color: var(--c-cream); }
.bg-red{ background: var(--c-red); color: var(--c-cream); }
.bg-red h1, .bg-red h2, .bg-red h3{ color: var(--c-white); }

.grid{ display:grid; gap: var(--sp-4); }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr 1fr; } .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.divider{ height:1px; background: var(--c-beige); border:none; margin: var(--sp-6) 0; }
.hairline-top{ border-top: 1px solid var(--c-beige); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: .95em 1.9em; border-radius: var(--radius-s);
  font-family: var(--f-sans); font-weight: 600; font-size: .95rem;
  letter-spacing: .02em; white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-primary{ background: var(--c-red); color: var(--c-white); box-shadow: 0 1px 2px rgba(80,18,22,.15); }
.btn-primary:hover{ background: var(--c-red-dark); transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(177,18,38,.45); }
.btn-outline{ background: transparent; color: var(--c-maroon); border: 1.5px solid var(--c-maroon); }
.btn-outline:hover{ background: var(--c-maroon); color: var(--c-cream); transform: translateY(-2px); }
.btn-outline-light{ background: transparent; color: var(--c-cream); border: 1.5px solid rgba(245,239,230,.6); }
.btn-outline-light:hover{ background: var(--c-cream); color: var(--c-maroon); border-color: var(--c-cream); }
.btn-ghost{ background: transparent; color: var(--c-maroon); padding: .5em 0; font-weight: 600; border-bottom: 1.5px solid var(--c-maroon); border-radius:0; }
.btn-ghost:hover{ color: var(--c-red); border-color: var(--c-red); gap: .9em; }
.btn-lg{ padding: 1.1em 2.4em; font-size: 1rem; }
.btn-row{ display:flex; gap: var(--sp-3); flex-wrap: wrap; align-items:center; }

/* ---------- Header / Navigation ---------- */
.site-header{
  position: sticky; top:0; z-index: 200;
  background: rgba(245,239,230,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(221,208,184,.7);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow: 0 6px 24px -14px rgba(58,38,32,.25); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.05rem 0;
}
.brand{ display:flex; align-items:center; }
.brand img{ height: 34px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1; font-family: var(--f-serif); }

.nav-primary{ display:flex; align-items:center; gap: var(--sp-5); }
.nav-links{ display:flex; align-items:center; gap: var(--sp-4); }
.nav-links > li{ position: relative; }
.nav-link{
  font-size: .95rem; font-weight: 500; color: var(--c-maroon);
  padding: .5rem .1rem; position:relative;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: var(--c-red); transition: right var(--dur) var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after{ right:0; }
.nav-link.is-active{ color: var(--c-red); }

.has-dropdown{ display:flex; align-items:center; gap:.35em; }
.caret{ width:9px; height:9px; transition: transform var(--dur) var(--ease); }
.dropdown-wrap:hover .caret, .dropdown-wrap.is-open .caret{ transform: rotate(180deg); }
.dropdown-wrap{ position:relative; }
.dropdown{
  position:absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 260px; background: var(--c-white); border: 1px solid var(--c-beige);
  border-radius: var(--radius-m); padding: .6rem; box-shadow: 0 24px 48px -20px rgba(58,38,32,.28);
  opacity:0; visibility:hidden; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.dropdown-wrap:hover .dropdown, .dropdown-wrap.is-open .dropdown{
  opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}
.dropdown a{
  display:flex; flex-direction:column; gap:.15rem; padding: .7rem .85rem; border-radius: var(--radius-s);
  transition: background var(--dur) var(--ease);
}
.dropdown a:hover{ background: var(--c-cream-soft); }
.dropdown a strong{ font-size: .92rem; font-weight: 600; color: var(--c-maroon); }
.dropdown a span{ font-size: .8rem; color: var(--c-ink-soft); }

.nav-cta{ display:flex; align-items:center; gap: var(--sp-3); }
.nav-cta .btn{ padding: .8em 1.5em; font-size: .88rem; }

.burger{ display:none; width:26px; height:20px; position:relative; flex-shrink:0; }
.burger span{ position:absolute; left:0; right:0; height:2px; background: var(--c-maroon); transition: all .3s var(--ease); }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:9px; }
.burger span:nth-child(3){ top:18px; }
.burger.is-open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.mobile-panel{
  display:none; position: fixed; inset: 0; top: 0; background: var(--c-cream);
  z-index: 199; padding: 6.5rem var(--sp-3) var(--sp-4); overflow-y:auto;
  transform: translateY(-8px); opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-panel.is-open{ opacity:1; transform: translateY(0); pointer-events:auto; }
.mobile-panel a{ font-family: var(--f-serif); font-size: 1.6rem; color: var(--c-maroon); }
.mobile-nav-list{ display:flex; flex-direction:column; gap: 1.3rem; }
.mobile-sub{ display:flex; flex-direction:column; gap: .9rem; padding: 1rem 0 0 1rem; border-left: 2px solid var(--c-beige); margin-top: .5rem; }
.mobile-sub a{ font-family: var(--f-sans); font-size: 1.05rem; font-weight: 500; color: var(--c-ink); }
.mobile-panel .btn{ margin-top: 2rem; width:100%; }
.mobile-social{ display:flex; gap: var(--sp-3); margin-top: var(--sp-5); }

@media (max-width: 980px){
  .nav-links, .nav-cta{ display:none; }
  .burger{ display:block; }
  .mobile-panel{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding: var(--sp-7) 0 var(--sp-8); position:relative; overflow:hidden; }
.hero-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(circle at 15% 20%, rgba(177,18,38,.06), transparent 45%),
                     radial-gradient(circle at 85% 75%, rgba(221,208,184,.5), transparent 50%);
}
.hero-inner{ position:relative; z-index:1; }
.hero-tag{ margin-bottom: var(--sp-3); }
.hero h1{ max-width: 16ch; }
.hero .lede{ margin-top: var(--sp-3); max-width: 46ch; }
.hero .btn-row{ margin-top: var(--sp-5); }
.hero-meta{ display:flex; gap: var(--sp-5); margin-top: var(--sp-6); flex-wrap:wrap; }
.hero-meta div strong{ display:block; font-family: var(--f-serif); font-size: 1.7rem; color: var(--c-red); }
.hero-meta div span{ font-size: .82rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: .08em; }

.hero-split{ display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-6); align-items:center; }
@media (max-width: 900px){ .hero-split{ grid-template-columns: 1fr; } }

/* ---------- Placeholder image blocks ---------- */
.ph{
  position:relative; border-radius: var(--radius-l); overflow:hidden;
  background: linear-gradient(150deg, var(--c-beige) 0%, var(--c-cream-soft) 60%, var(--c-white) 100%);
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(80,18,22,.08);
}
.ph::before{
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(80,18,22,.035) 0 2px, transparent 2px 18px);
}
.ph-label{
  position:relative; z-index:1; text-align:center; padding: var(--sp-3);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-maroon);
  font-weight: 600; opacity:.55;
}
.ph-4-5{ aspect-ratio: 4/5; }
.ph-16-9{ aspect-ratio: 16/9; }
.ph-1-1{ aspect-ratio: 1/1; }
.ph-3-4{ aspect-ratio: 3/4; }

/* ---------- Problem list ---------- */
.problem-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
@media (max-width: 720px){ .problem-grid{ grid-template-columns: 1fr; } }
.problem-item{
  background: var(--c-white); border: 1px solid var(--c-beige); border-radius: var(--radius-m);
  padding: var(--sp-4); display:flex; gap: var(--sp-3); align-items:flex-start;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.problem-item:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(58,38,32,.3); }
.problem-item .num{ font-family: var(--f-serif); font-style:italic; color: var(--c-beige); font-size:1.8rem; line-height:1; flex-shrink:0; }
.problem-item p{ font-size: 1.02rem; color: var(--c-ink); }

/* ---------- Cards (services) ---------- */
.card{
  background: var(--c-white); border: 1px solid var(--c-beige); border-radius: var(--radius-m);
  padding: var(--sp-5); display:flex; flex-direction:column; height:100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(58,38,32,.35); border-color: transparent; }
.card .icon-wrap{
  width:48px; height:48px; border-radius: 10px; background: var(--c-cream-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom: var(--sp-3);
  color: var(--c-red);
}
.card h3{ margin-bottom: .6rem; }
.card p{ color: var(--c-ink-soft); flex-grow:1; }
.card .btn-ghost{ margin-top: var(--sp-3); align-self:flex-start; }
.card-benefit{
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--c-beige);
  font-size: .88rem; color: var(--c-maroon); font-weight: 600;
}

/* ---------- Why us / feature rows ---------- */
.feature-row{ display:flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-beige); }
.feature-row:last-child{ border-bottom:none; }
.feature-num{ font-family: var(--f-serif); font-style: italic; font-size: 1.5rem; color: var(--c-red); width: 56px; flex-shrink:0; }
.feature-row h4{ margin-bottom: .4rem; }
.feature-row p{ color: var(--c-ink-soft); }

/* ---------- Portfolio cards ---------- */
.portfolio-card{
  background: var(--c-white); border-radius: var(--radius-m); overflow:hidden; border: 1px solid var(--c-beige);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display:flex; flex-direction:column;
}
.portfolio-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(58,38,32,.35); }
.portfolio-body{ padding: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-2); flex-grow:1; }
.portfolio-tag{ font-size: .74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c-red); font-weight:700; }
.portfolio-meta{ display:grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--c-beige); }
.portfolio-meta dt{ font-size: .72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--c-ink-soft); }
.portfolio-meta dd{ font-size: .88rem; font-weight:600; color: var(--c-maroon); margin-top:.15rem; }

/* ---------- Pricing / package cards ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); align-items:stretch; }
@media (max-width: 980px){ .pricing-grid{ grid-template-columns: 1fr; max-width: 480px; margin:0 auto; } }
.price-card{
  background: var(--c-white); border: 1px solid var(--c-beige); border-radius: var(--radius-l);
  padding: var(--sp-5); display:flex; flex-direction:column; position:relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.price-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px -30px rgba(58,38,32,.35); }
.price-card.is-featured{ background: var(--c-maroon); color: var(--c-cream); border-color: var(--c-maroon); }
.price-card.is-featured h3, .price-card.is-featured .price-for{ color: var(--c-cream); }
.price-card.is-featured .price-value{ color: var(--c-white); }
.price-card.is-featured .price-list li::before{ color: var(--c-red); }
.price-card.is-featured .divider{ background: rgba(245,239,230,.25); }
.price-badge{
  position:absolute; top:-14px; left: var(--sp-5); background: var(--c-red); color:#fff;
  font-size: .72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding: .4rem .9rem; border-radius: 100px;
}
.price-for{ font-size: .85rem; color: var(--c-ink-soft); margin-top: .3rem; }
.price-value{ font-family: var(--f-serif); font-size: 2.1rem; color: var(--c-red); margin: var(--sp-3) 0; }
.price-value small{ font-family: var(--f-sans); font-size: .95rem; font-weight:500; color: var(--c-ink-soft); }
.price-list{ display:flex; flex-direction:column; gap: .7rem; margin: var(--sp-3) 0 var(--sp-4); flex-grow:1; }
.price-list li{ padding-left: 1.5em; position:relative; font-size: .93rem; }
.price-list li::before{ content:'—'; position:absolute; left:0; color: var(--c-red); font-weight:700; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom: 1px solid var(--c-beige); }
.faq-item:first-child{ border-top: 1px solid var(--c-beige); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3);
  padding: var(--sp-4) 0; text-align:left; font-family: var(--f-serif); font-size: 1.15rem; color: var(--c-maroon);
}
.faq-q .plus{ width:22px; height:22px; position:relative; flex-shrink:0; }
.faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background: var(--c-red); transition: transform .3s var(--ease); }
.faq-q .plus::before{ top:50%; left:0; right:0; height:2px; transform: translateY(-50%); }
.faq-q .plus::after{ left:50%; top:0; bottom:0; width:2px; transform: translateX(-50%); }
.faq-item.is-open .plus::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a-inner{ padding-bottom: var(--sp-4); color: var(--c-ink-soft); max-width: 68ch; }
.faq-item.is-open .faq-a{ max-height: 400px; }

/* ---------- Testimonial-style quote / philosophy ---------- */
.quote-block{ max-width: 780px; }
.quote-block p{ font-family: var(--f-serif); font-size: clamp(1.4rem,2.6vw,2.1rem); font-style: italic; color: var(--c-red); line-height:1.4; }
.quote-block cite{ display:block; margin-top: var(--sp-3); font-style:normal; font-size: .88rem; color: var(--c-ink-soft); }
.bg-maroon .quote-block p{ color: var(--c-cream); }
.bg-maroon .quote-block cite{ color: rgba(245,239,230,.7); }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; padding: var(--sp-8) 0; }
.cta-band h2{ max-width: 18ch; margin: 0 auto var(--sp-3); }
.cta-band .lede{ max-width: 50ch; margin: 0 auto; }
.cta-band .btn-row{ justify-content:center; margin-top: var(--sp-5); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap: .5rem; margin-bottom: var(--sp-3); }
.field.full{ grid-column: 1/-1; }
.field label{ font-size: .85rem; font-weight:600; color: var(--c-maroon); }
.field input, .field select, .field textarea{
  background: var(--c-white); border: 1.5px solid var(--c-beige); border-radius: var(--radius-s);
  padding: .85em 1em; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--c-red); box-shadow: 0 0 0 4px rgba(177,18,38,.1);
}
.field textarea{ resize: vertical; min-height: 130px; }
.radio-group{ display:flex; flex-direction:column; gap: .6rem; }
.radio-option{ display:flex; align-items:center; gap: .7rem; padding: .7em .9em; border:1.5px solid var(--c-beige); border-radius: var(--radius-s); cursor:pointer; transition: border-color var(--dur), background var(--dur); }
.radio-option:hover{ border-color: var(--c-red); }
.radio-option input{ accent-color: var(--c-red); width:16px; height:16px; }
.checkbox-row{ display:flex; align-items:flex-start; gap: .7rem; margin: var(--sp-3) 0; }
.checkbox-row input{ margin-top: .3em; accent-color: var(--c-red); width:16px; height:16px; flex-shrink:0; }
.checkbox-row label{ font-size: .88rem; color: var(--c-ink-soft); }
.checkbox-row a{ color: var(--c-maroon); text-decoration: underline; }

/* ---------- Contact info cards ---------- */
.contact-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
@media (max-width: 780px){ .contact-cards{ grid-template-columns: 1fr; } }
.contact-card{ background: var(--c-white); border:1px solid var(--c-beige); border-radius: var(--radius-m); padding: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-2); }
.contact-card .icon-wrap{ width:42px; height:42px; border-radius:10px; background: var(--c-cream-soft); display:flex; align-items:center; justify-content:center; color: var(--c-red); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--c-maroon); color: var(--c-cream); padding: var(--sp-7) 0 var(--sp-4); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-5); padding-bottom: var(--sp-6); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand p{ color: rgba(245,239,230,.75); margin-top: var(--sp-2); max-width: 32ch; }
.footer-claim{ font-family: var(--f-serif); font-style: italic; color: var(--c-cream); font-size: 1.05rem; margin-top: var(--sp-2); }
.footer-col h4{ color: var(--c-cream); font-family: var(--f-sans); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight:700; margin-bottom: var(--sp-3); opacity:.85; }
.footer-col ul{ display:flex; flex-direction:column; gap: .75rem; }
.footer-col a{ color: rgba(245,239,230,.82); font-size: .95rem; transition: color var(--dur), padding-left var(--dur); }
.footer-col a:hover{ color: var(--c-cream); padding-left: 4px; }
.footer-social{ display:flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(245,239,230,.3);
  display:flex; align-items:center; justify-content:center; transition: background var(--dur), border-color var(--dur), transform var(--dur);
}
.footer-social a:hover{ background: var(--c-red); border-color: var(--c-red); transform: translateY(-3px); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-2);
  padding-top: var(--sp-4); border-top: 1px solid rgba(245,239,230,.18);
  font-size: .82rem; color: rgba(245,239,230,.65);
}
.footer-bottom-links{ display:flex; gap: var(--sp-4); }
.footer-bottom-links a:hover{ color: var(--c-cream); }
.footer-logo{ height: 26px; width:auto; filter: brightness(0) invert(1) sepia(1) saturate(0) hue-rotate(0deg); opacity:.92; }

/* ---------- Scroll reveal ---------- */
/* Progressive enhancement: only hide [data-reveal] once JS confirms it can reveal them again.
   Without JS (or before it runs), content stays fully visible. */
.js [data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }
[data-reveal-delay="1"]{ transition-delay: .08s; }
[data-reveal-delay="2"]{ transition-delay: .16s; }
[data-reveal-delay="3"]{ transition-delay: .24s; }
[data-reveal-delay="4"]{ transition-delay: .32s; }

/* ---------- Misc ---------- */
.tag-pill{
  display:inline-flex; align-items:center; gap:.4em; background: var(--c-white); border:1px solid var(--c-beige);
  padding: .4em .9em; border-radius:100px; font-size:.82rem; font-weight:600; color: var(--c-maroon);
}
.tag-row{ display:flex; flex-wrap:wrap; gap: .6rem; }
.legal-content{ max-width: 760px; }
.legal-content h2{ margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.legal-content p{ margin-bottom: var(--sp-3); color: var(--c-ink-soft); }
.placeholder-box{
  background: var(--c-white); border: 2px dashed var(--c-red); border-radius: var(--radius-m);
  padding: var(--sp-5); color: var(--c-red); font-weight:700; text-align:center; letter-spacing: .02em;
}
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--c-red); color:#fff; padding:1em; z-index:999; }
.skip-link:focus{ left: var(--sp-3); top: var(--sp-3); }

/* ---------- Case study: real media (photos/video) ---------- */
.media-frame{
  position:relative; border-radius: var(--radius-l); overflow:hidden;
  border: 1px solid rgba(80,18,22,.08); background: var(--c-beige);
}
.media-frame img, .media-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-9-16{ aspect-ratio: 9/16; }

.portfolio-media{ position:relative; aspect-ratio: 4/5; overflow:hidden; }
.portfolio-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s var(--ease); }
.portfolio-card:hover .portfolio-media img{ transform: scale(1.045); }

/* Case study meta bar */
.case-meta{ display:flex; flex-wrap:wrap; gap: var(--sp-5); padding: var(--sp-4) 0; border-top:1px solid var(--c-beige); border-bottom:1px solid var(--c-beige); margin-top: var(--sp-5); }
.case-meta dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--c-ink-soft); margin-bottom:.3rem; }
.case-meta dd{ font-family: var(--f-serif); font-size:1.05rem; color: var(--c-maroon); }

/* Reel video gallery */
.reel-gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
@media (max-width: 780px){ .reel-gallery{ grid-template-columns: 1fr; max-width:340px; margin:0 auto; } }
.reel-card{ display:flex; flex-direction:column; gap: var(--sp-2); }
.reel-card .media-frame{ aspect-ratio: 9/16; box-shadow: 0 24px 48px -24px rgba(58,38,32,.35); }
.reel-views{ display:inline-flex; align-items:center; gap:.4em; font-size:.82rem; font-weight:700; color: var(--c-red); }
.reel-card h4{ font-size: 1rem; margin-top:.1rem; }
.reel-card p{ font-size:.88rem; color: var(--c-ink-soft); }

/* Stat row (case study numbers) */
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); text-align:center; }
@media (max-width: 780px){ .stat-row{ grid-template-columns: 1fr 1fr; } }
.stat-item strong{ display:block; font-family: var(--f-serif); font-size: clamp(1.7rem,3vw,2.2rem); color: var(--c-red); }
.stat-item span{ display:block; margin-top:.3rem; font-size:.78rem; color: var(--c-ink-soft); text-transform:uppercase; letter-spacing:.06em; }

/* Two-col content w/ image */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap: var(--sp-4); } }
.split.reverse .split-media{ order:2; }
@media (max-width: 900px){ .split.reverse .split-media{ order:0; } }

.numbered-list{ counter-reset: item; display:flex; flex-direction:column; gap: var(--sp-4); }
.numbered-list li{ counter-increment: item; display:flex; gap: var(--sp-3); }
.numbered-list li::before{
  content: counter(item, decimal-leading-zero); font-family: var(--f-serif); font-style: italic;
  color: var(--c-red); font-size: 1.3rem; flex-shrink:0; width: 2.4em;
}

/* ---------- Price table (tiered pricing, e.g. Video Editing / UGC) ---------- */
.price-table{ width:100%; border-collapse: collapse; background: var(--c-white); border-radius: var(--radius-m); overflow:hidden; border: 1px solid var(--c-beige); }
.price-table th, .price-table td{ padding: .95rem 1.3rem; text-align:left; font-size: .95rem; }
.price-table thead th{ background: var(--c-maroon); color: var(--c-cream); font-family: var(--f-sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.price-table tbody tr{ border-bottom: 1px solid var(--c-beige); transition: background var(--dur) var(--ease); }
.price-table tbody tr:last-child{ border-bottom:none; }
.price-table tbody tr:hover{ background: var(--c-cream-soft); }
.price-table td:first-child, .price-table th:first-child{ font-weight:600; color: var(--c-maroon); }
.price-table td.price-highlight{ color: var(--c-red); font-weight:700; }
.price-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
@media (max-width:640px){ .price-table th, .price-table td{ padding:.8rem .9rem; font-size:.86rem; } }

/* ---------- Add-on / single-offer cards (Beratung, Add-ons, digitale Produkte) ---------- */
.addon-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }
@media (max-width: 780px){ .addon-grid{ grid-template-columns: 1fr; } }
.addon-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 980px){ .addon-grid.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .addon-grid.cols-3{ grid-template-columns: 1fr; } }
.addon-card{
  background: var(--c-white); border: 1px solid var(--c-beige); border-radius: var(--radius-m);
  padding: var(--sp-4); display:flex; flex-direction:column; gap: .5rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.addon-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(58,38,32,.3); }
.addon-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-2); }
.addon-card-head h4{ color: var(--c-maroon); }
.addon-price{ font-family: var(--f-serif); font-size:1.25rem; color: var(--c-red); white-space:nowrap; flex-shrink:0; }
.addon-card p{ color: var(--c-ink-soft); font-size:.92rem; }
.addon-card ul{ display:flex; flex-direction:column; gap:.4rem; margin-top:.3rem; }
.addon-card ul li{ padding-left:1.3em; position:relative; font-size:.88rem; color: var(--c-ink); }
.addon-card ul li::before{ content:'—'; position:absolute; left:0; color: var(--c-red); }

/* ---------- Savings / combo callout ---------- */
.combo-box{ background: var(--c-cream-soft); border: 1px solid var(--c-beige); border-radius: var(--radius-m); padding: var(--sp-4); margin-top: var(--sp-4); }
.combo-box .eyebrow{ margin-bottom:.4rem; }
.combo-old-price{ text-decoration: line-through; color: var(--c-ink-soft); font-size:.95rem; }
.combo-new-price{ font-family: var(--f-serif); font-size:1.4rem; color: var(--c-red); margin-top:.2rem; }

/* ---------- "Coming soon" badge (digitale Produkte) ---------- */
.badge-soon{
  display:inline-flex; align-items:center; gap:.4em; background: var(--c-beige); color: var(--c-maroon);
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.35em .8em; border-radius:100px; margin-left:.6em; vertical-align:middle;
}

/* ---------- In-page category jump nav (Preise-Übersicht) ---------- */
.price-jumpnav{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.price-jumpnav a{
  font-size:.85rem; font-weight:600; color: var(--c-maroon); background: var(--c-white);
  border:1px solid var(--c-beige); padding:.55em 1.1em; border-radius:100px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.price-jumpnav a:hover{ background: var(--c-maroon); color: var(--c-cream); border-color: var(--c-maroon); }
.price-category{ padding-top: var(--sp-3); scroll-margin-top: 6rem; }