/* ==========================================================================
   Chiara Coulin-Becker — Fotografie & Social Media
   Design system: warm ivory / charcoal / clay accent
   Display: Cormorant Garamond · Body: Inter
   ========================================================================== */

:root{
  --ink:        #1c1a17;
  --ink-soft:   #4a453f;
  --ink-faint:  #8a8377;
  --bg:         #f8f5f0;
  --bg-alt:     #efe8dc;
  --bg-deep:    #e6ddcd;
  --line:       #ddd3c0;
  --cream:      #f7f4ef;
  --clay:       #a8623f;
  --clay-soft:  #c2865f;
  --clay-deep:  #8a4c30;
  --dark:       #17140f;
  --dark-alt:   #201c16;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --container: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .7s;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 90px; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

::selection{ background: var(--clay); color: var(--cream); }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typography ---------- */
h1, h2, h3, .display{ font-family: var(--serif); font-weight: 500; letter-spacing: .01em; color: var(--ink); }
h1{ font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.05; }
h2{ font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; }
h3{ font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.3; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--clay);
}
.eyebrow::before, .eyebrow::after{ content:""; width: 28px; height: 1px; background: var(--clay); display:inline-block; flex-shrink:0; }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); line-height:1.7; font-weight: 400; }
.italic{ font-style: italic; }
.text-center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 1em 2em; border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing:.12em; text-transform:uppercase;
  border: 1px solid transparent; transition: all .35s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--ink); color: var(--cream); }
.btn-primary:hover{ background: var(--clay); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(168,98,63,.5); }
.btn-outline{ border-color: currentColor; color: var(--ink); background: transparent; }
.btn-outline:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-light{ border-color: rgba(247,244,239,.55); color: var(--cream); }
.btn-light:hover{ background: var(--cream); color: var(--ink); }
.btn-clay{ background: var(--clay); color: var(--cream); }
.btn-clay:hover{ background: var(--clay-deep); transform: translateY(-2px); }
.btn-block{ width:100%; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 22px 0; transition: all .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: 1.5rem; }
.site-header.is-solid{ background: rgba(248,245,240,.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); padding: 14px 0; }

.logo-mark{ font-family: var(--serif); font-size: clamp(1rem, 1.55vw, 1.4rem); letter-spacing: .04em; color: var(--cream); transition: color .4s var(--ease); white-space: nowrap; flex-shrink: 0; }
.logo-mark b{ font-weight:600; }
.site-header.is-solid .logo-mark, .site-header.on-light .logo-mark{ color: var(--ink); }
.logo-mark small{ display:block; font-family: var(--sans); font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--clay); font-weight:600; white-space:nowrap; }

.nav-desktop{ display:flex; align-items:center; gap: clamp(1.1rem, 2vw, 2.2rem); flex-shrink: 0; }
.nav-desktop a{
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); position:relative; padding: 6px 0; white-space: nowrap;
  transition: color .4s var(--ease);
}
.site-header.is-solid .nav-desktop a, .site-header.on-light .nav-desktop a{ color: var(--ink); }
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: currentColor;
  transition: width .35s var(--ease);
}
.nav-desktop a:hover::after, .nav-desktop a.active::after{ width:100%; }
.nav-desktop a.active{ color: var(--clay); }

.nav-cta{ display:flex; align-items:center; gap:1.2rem; flex-shrink:0; }
.site-header .nav-cta .btn{ padding:.8em 1.5em; font-size:.7rem; letter-spacing:.1em; }
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(247,244,239,.4);
  background: rgba(20,17,13,.25); align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.site-header.is-solid .nav-toggle, .site-header.on-light .nav-toggle{ border-color: var(--line); background: rgba(28,25,23,.06); }
.nav-toggle span{ width:18px; height:1px; background: var(--cream); display:block; transition: all .3s var(--ease); }
.site-header.is-solid .nav-toggle span, .site-header.on-light .nav-toggle span{ background: var(--ink); }

.mobile-nav{
  position: fixed; inset:0; background: var(--dark); z-index: 99;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.6rem;
  transform: translateY(-100%); transition: transform .55s var(--ease);
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{ font-family: var(--serif); font-size: 2rem; color: var(--cream); }
.mobile-nav .eyebrow{ color: var(--clay-soft); }
.mobile-nav .eyebrow::before, .mobile-nav .eyebrow::after{ background: var(--clay-soft); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height: 100svh; display:flex; align-items:flex-end;
  color: var(--cream); overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; background-size: cover; background-position: center;
  transform: scale(1.08);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,13,10,.45) 0%, rgba(15,13,10,.2) 30%, rgba(15,13,10,.55) 55%, rgba(15,13,10,.9) 100%),
    linear-gradient(90deg, rgba(15,13,10,.35) 0%, rgba(15,13,10,0) 35%, rgba(15,13,10,0) 65%, rgba(15,13,10,.35) 100%);
}
.hero-content{ position:relative; z-index:2; padding-bottom: 6.5rem; width:100%; }
.hero .eyebrow{ color: var(--clay-soft); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.hero .eyebrow::before, .hero .eyebrow::after{ background: var(--clay-soft); }
.hero h1{ color: var(--cream); margin-top:.5rem; max-width: 16ch; text-shadow: 0 4px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); }
.hero-sub{ margin-top: 1.4rem; max-width: 46ch; font-size: 1.1rem; color: rgba(247,244,239,.9); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 1rem; margin-top: 2.4rem; }

.scroll-cue{
  position:absolute; bottom: 2.2rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.65rem; letter-spacing:.24em; text-transform:uppercase; color: rgba(247,244,239,.75);
}
.scroll-cue .line{ width:1px; height:38px; background: rgba(247,244,239,.5); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--cream); animation: scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

.hero-sm{ min-height: 62vh; }

/* ---------- Sections ---------- */
section{ position:relative; }
.section{ padding: clamp(5rem,10vw,9rem) 0; }
.section-alt{ background: var(--bg-alt); }
.section-dark{ background: var(--dark); color: var(--cream); }
.section-dark h2, .section-dark h3{ color: var(--cream); }
.section-dark .lede{ color: rgba(247,244,239,.7); }
.section-head{ max-width: 640px; margin-bottom: 3.4rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.hairline{ height:1px; background: var(--line); border:0; margin: 0; }
.section-dark .hairline{ background: rgba(247,244,239,.15); }

/* ---------- Reveal animation ---------- */
[data-reveal]{ opacity:0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal-delay="1"]{ transition-delay: .1s; }
[data-reveal-delay="2"]{ transition-delay: .22s; }
[data-reveal-delay="3"]{ transition-delay: .34s; }
[data-reveal-delay="4"]{ transition-delay: .46s; }

/* ---------- Intro / About teaser grid ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items:center; }
.split > *{ min-width:0; }
.split img, .split .frame{ border-radius: 2px; }
.frame{ position:relative; }
.frame::before{
  content:""; position:absolute; inset: -18px auto auto -18px; width:70%; height:70%;
  border: 1px solid var(--clay); z-index:-1;
}

/* ---------- Service / category cards ---------- */
.cats-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.cat-card{
  position:relative; aspect-ratio: 4/5; overflow:hidden; border-radius: 3px; display:block;
  isolation:isolate;
}
.cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.cat-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(15,13,10,.85) 0%, rgba(15,13,10,.05) 55%); z-index:1; }
.cat-card:hover img{ transform: scale(1.08); }
.cat-card-label{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 1.6rem; color: var(--cream); }
.cat-card-label .num{ font-size:.7rem; letter-spacing:.2em; color: var(--clay-soft); font-weight:600; }
.cat-card-label h3{ color: var(--cream); margin-top:.3rem; }
.cat-card-label span.arrow{ display:inline-block; margin-top:.6rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }

/* ---------- Portfolio filter + gallery ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap: .6rem 1rem; margin-bottom: 3rem;
}
.filter-btn{
  padding: .65em 1.4em; border-radius: 999px; border:1px solid var(--line);
  background:transparent; font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-soft); transition: all .3s var(--ease);
}
.filter-btn:hover{ border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active{ background: var(--ink); border-color: var(--ink); color: var(--cream); }

.gallery{
  display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 1.1rem;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:2px; cursor: zoom-in;
  break-inside: avoid; opacity:1; transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.gallery-item.tall{ grid-row: span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); display:block; }
.gallery-item:hover img{ transform: scale(1.05); }
.gallery-item.is-hidden{ display:none; }
.category-block.is-hidden{ display:none; }
.gallery-item .zoom-hint{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background: rgba(20,17,13,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .3s var(--ease); font-size:1rem;
}
.gallery-item:hover .zoom-hint{ opacity:1; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index: 300; background: rgba(15,13,10,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .4s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; border-radius:2px; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:transparent; border:1px solid rgba(247,244,239,.3); color:var(--cream);
  border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; transition: all .3s var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: var(--cream); color: var(--ink); }
.lightbox-close{ top: 2rem; right: 2rem; }
.lightbox-prev{ left: 2rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right: 2rem; top:50%; transform:translateY(-50%); }
.lightbox-caption{ position:absolute; bottom: 2rem; left:0; right:0; text-align:center; color: rgba(247,244,239,.7); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; align-items:stretch; }
.price-card{
  background: var(--cream); border: 1px solid var(--line); border-radius: 6px;
  padding: 2.6rem 2.2rem; display:flex; flex-direction:column; position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.price-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(28,25,23,.25); }
.price-card.is-popular{ background: var(--dark); color: var(--cream); border-color: var(--dark); transform: scale(1.045); z-index:2; }
.price-card.is-popular:hover{ transform: scale(1.045) translateY(-6px); }
.price-card.is-popular h3, .price-card.is-popular .price-desc{ color: var(--cream); }
.price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--clay); color: var(--cream); font-size:.65rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding: .5em 1.2em; border-radius:999px; white-space:nowrap;
}
.price-name{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--clay); }
.price-card.is-popular .price-name{ color: var(--clay-soft); }
.price-hours{ font-size:.85rem; color: var(--ink-faint); margin-top:.5rem; }
.price-card.is-popular .price-hours{ color: rgba(247,244,239,.55); }
.price-value{ font-family: var(--serif); font-size: 3.1rem; margin: 1.1rem 0 .2rem; }
.price-value sup{ font-size:1.3rem; top:-1.4em; }
.price-desc{ color: var(--ink-soft); font-size:.95rem; margin-bottom: 1.6rem; }
.price-features{ margin: 0 0 2rem; flex-grow:1; }
.price-features li{ display:flex; gap:.7em; padding: .55em 0; font-size:.92rem; border-top: 1px solid var(--line); }
.price-card.is-popular .price-features li{ border-color: rgba(247,244,239,.15); }
.price-features li:first-child{ border-top:0; }
.price-features li svg{ flex-shrink:0; margin-top:.2em; color: var(--clay); }

.addon-bar{
  display:flex; flex-wrap:wrap; gap: 1.2rem; justify-content:center; margin-top: 3rem;
  padding: 1.6rem 2rem; border: 1px dashed var(--line); border-radius: 8px; background: rgba(168,98,63,.05);
}
.addon-bar .addon{ display:flex; align-items:center; gap:.8rem; font-size:.92rem; }
.addon-bar strong{ font-family: var(--serif); font-size:1.2rem; color: var(--clay); }

.travel-note{
  display:flex; gap:1rem; align-items:flex-start; background: var(--bg-alt);
  border-radius: 8px; padding: 1.6rem 1.8rem; margin-top: 2.4rem; font-size:.93rem; color: var(--ink-soft);
}
.travel-note svg{ flex-shrink:0; color: var(--clay); margin-top:.15em; }

/* ---------- FAQ ---------- */
.faq-item{ border-top: 1px solid var(--line); }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; padding: 1.6rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family: var(--serif); font-size: 1.2rem; color: var(--ink);
}
.faq-q .plus{ font-size:1.4rem; color: var(--clay); transition: transform .35s var(--ease); flex-shrink:0; }
.faq-item.is-open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.faq-a p{ padding: 0 0 1.6rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- Testimonials ---------- */
.testi-track{ display:flex; gap: 2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:none; }
.testi-track::-webkit-scrollbar{ display:none; }
.testi-card{
  scroll-snap-align:start; flex: 0 0 min(480px,86vw); background: var(--cream);
  border:1px solid var(--line); border-radius:6px; padding: 2.2rem;
}
.testi-stars{ color: var(--clay); letter-spacing:.2em; font-size:.9rem; }
.testi-quote{ font-family: var(--serif); font-size:1.3rem; line-height:1.5; margin: 1rem 0 1.4rem; }
.testi-name{ font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }

/* ---------- Logo Marquee ---------- */
.logo-marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee-track{ display:inline-flex; align-items:center; animation: logomarquee 32s linear infinite; }
.logo-marquee-track img{ height: 46px; width:auto; max-width:150px; object-fit:contain; margin: 0 2.6rem; opacity:.75; filter: brightness(0) invert(1); transition: opacity .3s var(--ease); }
.logo-marquee-track img:hover{ opacity:1; }
@keyframes logomarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-dark .marquee{ border-color: rgba(247,244,239,.15); }
.marquee-track{ display:inline-flex; animation: marquee 34s linear infinite; }
.marquee-track span{
  font-family: var(--serif); font-size: clamp(1.6rem,4vw,3rem); padding: 1.4rem 2.4rem; color: var(--ink-faint);
  display:inline-flex; align-items:center; gap: 2.4rem;
}
.section-dark .marquee-track span{ color: rgba(247,244,239,.35); }
.marquee-track span i{ font-style:normal; color: var(--clay); font-size:1.2rem; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Social page: platform cards ---------- */
.social-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem; }
.social-card{
  border:1px solid var(--line); border-radius:8px; padding: 2.4rem; background: var(--cream);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.social-card:hover{ transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(28,25,23,.3); }
.social-card .icon{ width:46px; height:46px; border-radius:50%; background: var(--bg-alt); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; color: var(--clay); }

.client-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.client-card{
  border:1px solid var(--line); border-radius:8px; padding: 1.6rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; transition: all .3s var(--ease);
  background: var(--cream);
}
.client-card:hover{ border-color: var(--clay); transform: translateY(-3px); }
.client-card .handle{ font-size:.82rem; color: var(--ink-faint); }

/* ---------- Contact ---------- */
.contact-wrap{ display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,6vw,5rem); }
.contact-form-card{
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(1.8rem, 3vw, 2.8rem); box-shadow: 0 30px 70px -40px rgba(28,25,23,.35);
}
.contact-form-card .form-field input,
.contact-form-card .form-field select,
.contact-form-card .form-field textarea{ background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .8em 1em; }
.contact-form-card .form-field input:focus,
.contact-form-card .form-field select:focus,
.contact-form-card .form-field textarea:focus{ background: #fff; border-color: var(--clay); }
.contact-info-item{ display:flex; gap:1rem; padding: 1.4rem 0; border-top:1px solid var(--line); }
.contact-info-item:first-child{ border-top:0; }
.contact-info-item svg{ color: var(--clay); flex-shrink:0; margin-top:.2em; }
.contact-info-item h3{ font-size:1rem; font-family:var(--sans); font-weight:600; margin-bottom:.3rem; }
.contact-info-item p, .contact-info-item a{ color: var(--ink-soft); font-size:.95rem; }

.form-field{ margin-bottom: 1.5rem; }
.form-field label{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:.6rem; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:0; border-bottom: 1px solid var(--line); background:transparent;
  padding: .8em .2em; color: var(--ink); transition: border-color .3s var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color: var(--clay); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.form-note{ font-size:.82rem; color: var(--ink-faint); margin-top: 1rem; }
.form-success{
  display:none; text-align:center; padding: 3rem 1rem;
}
.form-success.is-visible{ display:block; }
.form-success .icon{ width:56px; height:56px; border-radius:50%; background: var(--clay); color:#fff; display:flex; align-items:center; justify-content:center; margin: 0 auto 1.4rem; font-size:1.5rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--dark); color: rgba(247,244,239,.75); padding: 5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.4rem; padding-bottom: 3.4rem; }
.footer-grid h4{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--cream); margin-bottom: 1.3rem; }
.footer-grid li{ padding: .4rem 0; }
.footer-grid a:hover{ color: var(--clay-soft); }
.footer-logo{ font-family: var(--serif); font-size: 1.8rem; color: var(--cream); margin-bottom: 1rem; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top: 2rem; border-top: 1px solid rgba(247,244,239,.12); font-size:.78rem; }
.social-icons{ display:flex; gap: .9rem; }
.social-icons a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(247,244,239,.25); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); }
.social-icons a:hover{ background: var(--clay); border-color: var(--clay); }

/* ---------- Misc ---------- */
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.stat{ text-align:center; }
.stat .num{ font-family: var(--serif); font-size: clamp(2rem,4vw,3.2rem); color: var(--clay); }
.stat .label{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); margin-top:.4rem; }

.badge-row{ display:flex; flex-wrap:wrap; gap: .8rem; }
.badge{ display:inline-flex; align-items:center; gap:.5em; padding:.5em 1.1em; border:1px solid var(--line); border-radius:999px; font-size:.78rem; color: var(--ink-soft); }
.badge svg{ color: var(--clay); }

.breadcrumb{ font-size:.78rem; color: var(--ink-faint); letter-spacing:.04em; }
.breadcrumb a:hover{ color: var(--clay); }

/* ---------- Phone mockup (Social Media page) ---------- */
.phone-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.phone-card{ text-align:center; }
.phone-mock{
  display:block; position:relative; margin: 0 auto; width: 100%; max-width: 240px;
  aspect-ratio: 9/18.5; background: var(--dark); border-radius: 34px; padding: 10px;
  box-shadow: 0 30px 60px -25px rgba(28,25,23,.45); transition: transform .4s var(--ease);
}
.phone-mock:hover{ transform: translateY(-6px); }
.phone-mock::before{
  content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:36%; height:18px; background: var(--dark); border-radius:0 0 12px 12px; z-index:3;
}
.phone-screen{
  position:relative; width:100%; height:100%; background: var(--cream); border-radius:26px;
  overflow:hidden; display:flex; flex-direction:column;
}
.phone-screen img.phone-screen-fill{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.phone-ig-header{ display:flex; align-items:center; gap:.6rem; padding: 1.6rem .8rem .6rem; }
.phone-ig-avatar{
  width: 15%; aspect-ratio:1; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: var(--bg-alt); display:flex; align-items:center; justify-content:center;
  border: 1.5px solid var(--line);
}
.phone-ig-avatar img{ width:100%; height:100%; object-fit:contain; padding:3px; }
.phone-ig-avatar span{ font-family: var(--serif); font-size:.85rem; color: var(--clay); }
.phone-ig-handle{ font-size:.62rem; font-weight:700; color: var(--ink); line-height:1.3; }
.phone-ig-tag{ font-size:.5rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.phone-ig-grid{ display:grid; grid-template-columns: repeat(3,1fr); align-content:start; gap:2px; padding: 0 2px; flex-grow:1; }
.phone-ig-grid div{ aspect-ratio:1; overflow:hidden; background: var(--bg-alt); }
.phone-ig-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.phone-card h3{ margin-top:1.4rem; font-size:1.05rem; }
.phone-card .handle{ font-size:.82rem; color: var(--ink-faint); display:block; margin-top:.2rem; }

.video-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.6rem 1.2rem; max-width: 760px; margin: 0 auto; }
.video-placeholder{
  aspect-ratio: 9/16; border-radius:10px; background: var(--dark); position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.video-placeholder .play{
  width:52px; height:52px; border-radius:50%; background: rgba(247,244,239,.15); border:1px solid rgba(247,244,239,.4);
  display:flex; align-items:center; justify-content:center; color: var(--cream);
}
.video-placeholder .label{
  position:absolute; bottom:1rem; left:0; right:0; text-align:center; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color: rgba(247,244,239,.55);
}
.video-tile{
  aspect-ratio: 9/16; border-radius:10px; overflow:hidden; background: var(--dark);
  box-shadow: 0 20px 40px -25px rgba(28,25,23,.4);
}
.video-tile video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-caption{ display:block; margin-top:.7rem; text-align:center; font-size:.8rem; color: var(--ink-faint); }

/* ---------- Category sections (Fotografie page) ---------- */
.jump-nav{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; justify-content:center; }
.jump-nav a{
  padding:.65em 1.4em; border-radius:999px; border:1px solid var(--line);
  font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-soft); transition: all .3s var(--ease);
}
.jump-nav a:hover{ border-color: var(--ink); color: var(--ink); background: var(--cream); }

.category-block{ scroll-margin-top: 90px; }
.category-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:2.6rem; }
.category-cta{
  margin-top: 2.4rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.4rem; padding: 1.6rem 2rem; border-top: 1px solid var(--line);
}
.section-alt .category-cta{ border-color: rgba(28,25,23,.1); }
.category-cta .note{ font-size:.9rem; color: var(--ink-soft); }
.category-cta .note strong{ color: var(--clay); font-weight:600; }

.coming-soon{
  border: 1px dashed var(--line); border-radius:10px; padding: 3.2rem 2rem; text-align:center;
  background: rgba(168,98,63,.04);
}
.coming-soon .icon{ width:48px; height:48px; border-radius:50%; background: var(--bg-alt); color:var(--clay); display:flex; align-items:center; justify-content:center; margin: 0 auto 1.2rem; }

.brand-strip{ display:flex; flex-wrap:wrap; gap:2rem; align-items:center; margin-top:1.8rem; }
.brand-strip img{ height:34px; width:auto; object-fit:contain; opacity:.75; transition: opacity .3s var(--ease); filter:grayscale(1); }
.brand-strip img:hover{ opacity:1; filter:grayscale(0); }

/* ---------- Cookie consent ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background: var(--dark); color: var(--cream);
  padding: 1.5rem clamp(1.2rem,4vw,3rem);
  display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; justify-content:space-between;
  transform: translateY(100%); transition: transform .5s var(--ease);
  box-shadow: 0 -20px 50px rgba(0,0,0,.3);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size:.86rem; color: rgba(247,244,239,.8); max-width:60ch; margin:0; line-height:1.6; }
.cookie-banner a{ color: var(--clay-soft); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:.8rem; flex-shrink:0; flex-wrap:wrap; }
.cookie-banner .btn{ padding:.75em 1.5em; font-size:.72rem; }
.cookie-banner-decline{ border:1px solid rgba(247,244,239,.35); color:var(--cream); background:transparent; }
.cookie-banner-decline:hover{ background: rgba(247,244,239,.1); }
.cookie-settings-link{ font-size:.78rem; color: var(--ink-faint); text-decoration:underline; background:none; border:0; cursor:pointer; padding:0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .cats-grid{ grid-template-columns: repeat(2,1fr); }
  .phone-grid{ grid-template-columns: repeat(2,1fr); }
  .video-grid{ grid-template-columns: repeat(2,1fr); }
  .pricing-grid{ grid-template-columns: 1fr; max-width:460px; margin:0 auto; }
  .price-card.is-popular{ transform:none; order:-1; }
  .price-card.is-popular:hover{ transform: translateY(-6px); }
  .contact-wrap{ grid-template-columns: 1fr; }
  .social-grid{ grid-template-columns: 1fr; }
  .client-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .stat-row{ grid-template-columns: repeat(2,1fr); gap: 2rem; }
}
@media (max-width: 760px){
  .nav-desktop, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .split{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 150px; gap:.7rem; }
  .cats-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .phone-grid{ grid-template-columns: repeat(2,1fr); gap:2.4rem 1.2rem; }
  .video-grid{ grid-template-columns: repeat(2,1fr); }
  .category-head{ align-items:flex-start; }
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; }
  .lightbox-prev{ left:.8rem; } .lightbox-next{ right:.8rem; }
  .lightbox-close{ top:1rem; right:1rem; }
}
@media (max-width: 480px){
  .client-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; text-align:left; }
}