/* ==========================================================================
   LUCIDA STUDIO — Design tokens
   ========================================================================== */
:root{
  --purple: #662d91;
  --purple-dark: #4c2170;
  --purple-tint: #ece2f5;
  --teal: #00d4d1;
  --teal-dark: #00a3a1;
  --peach: #f2c8a4;
  --peach-soft: #f8e2cc;
  --off-white: #f9f9f9;
  --charcoal: #302b39;
  --charcoal-soft: #423a4d;
  --charcoal-line: rgba(249,249,249,0.12);

  --font-display: "Unbounded", "Poppins", -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", monospace;

  --container: 1220px;
  --radius: 2px;
  --ease: cubic-bezier(.6,.06,.24,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--off-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing: -.01em; }
p{ margin:0 0 1em; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size:1rem; }

:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

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

.eyebrow{
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--purple);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 18px;
  margin-top: 20px;
}
.eyebrow::before{
  content:"";
  width: 26px;
  height: 1px;
  background: var(--purple);
  display:inline-block;
}
.eyebrow.on-dark{ color: var(--teal); }
.eyebrow.on-dark::before{ background: var(--teal); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary{
  background: var(--purple);
  color: var(--off-white);
}
.btn-primary:hover{ background: var(--purple-dark); transform: translateY(-2px); }
.btn-outline{
  border-color: currentColor;
  background: transparent;
}
.btn-outline:hover{ background: var(--charcoal); color: var(--off-white); border-color: var(--charcoal); transform: translateY(-2px); }
.btn-outline.on-dark{ color: var(--off-white); }
.btn-outline.on-dark:hover{ background: var(--teal); color: var(--charcoal); border-color: var(--teal); }
.btn-teal{ background: var(--teal); color: var(--charcoal); }
.btn-teal:hover{ background: #12e6e3; transform: translateY(-2px); }
.btn-block{ width:100%; justify-content:center; }

.text-center-container {
  text-align: center;
}

/* ==========================================================================
   ND Creative Arts logo marks
   ========================================================================== */
.logomark{
  width: 34px; height:34px;
  object-fit: contain;
  display:inline-block;
  transform-origin: 50% 62%;
  transition: transform .5s var(--ease);
}
.logofull{
  height: 46px; width:auto;
  object-fit: contain;
  display:block;
}
.brandmark-anim:hover,
.brandmark-anim.is-open{
  transform: rotate(-9deg) scale(1.06);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(249,249,249,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(48,43,57,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--charcoal);
}
.brand .logomark{ width:40px; height:40px; }
.brand small{
  display:block;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--purple);
  font-weight: 400;
}
.nav-links{
  display:flex; align-items:center; gap: 40px;
}
.nav-links a{
  font-size: .92rem;
  position: relative;
  padding: 6px 0;
  color: var(--charcoal-soft);
  transition: color .25s ease;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: var(--purple);
  transition: right .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color: var(--charcoal); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:22px; }
.nav-toggle{
  display:none;
  background:none; border:none; flex-direction:column; gap:5px; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--charcoal); display:block; }

@media (max-width: 900px){
  .nav-links{
    /* NOT inset:0 — .site-header (this element's ancestor) has
       backdrop-filter set on it, and backdrop-filter on an ancestor makes
       IT the positioning container for any position:fixed descendant,
       instead of the actual browser viewport. That silently shrank
       inset:0 down to "cover the header bar" (~74px) instead of the full
       screen, which is why the background only ever showed near the very
       top — everything below that had no box behind it at all. height:
       100vh sidesteps this entirely, since vh units are always relative
       to the true viewport no matter what element contains it. */
    position:fixed; top:0; left:0; right:0; height:100vh;
    background: #ffffff;
    flex-direction:column; align-items:flex-start;
    padding: 96px 32px 32px;
    gap: 26px;
    z-index: 99;
    box-shadow: 0 16px 32px rgba(48,43,57,.14);
    transform: translateY(-12px);
    visibility: hidden;
    pointer-events:none;
    /* Only transform animates — background stays fully solid the entire
       time. Using opacity here previously faded the background itself
       (not just the links), which is what made the panel look
       transparent while opening/closing. visibility switches instantly
       on open, but waits for the slide-out to finish before hiding on
       close (the 0s duration + .3s delay on the second transition). */
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .nav-links.open{
    transform:translateY(0);
    visibility: visible;
    pointer-events:auto;
    transition: transform .3s ease, visibility 0s linear 0s;
  }
  .nav-links a{ font-size:1.2rem; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn span.btn-label{ display:none; }
}

/* ==========================================================================
   Hero — full-bleed background media with text overlaid on top
   ========================================================================== */
.hero{
  position: relative;
  min-height: 88vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color: var(--off-white);
  padding-bottom: 90px;
}
.hero-media-wrap{
  position:absolute; inset:0; z-index:0;
}
.hero-media,
.hero-bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover; object-position: center;
}
.hero-media{
  background:
    radial-gradient(circle at 30% 20%, rgba(0,212,209,.5), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(242,200,164,.55), transparent 55%),
    linear-gradient(155deg, var(--purple) 0%, var(--charcoal) 68%);
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity:.5;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(48,43,57,.18) 0%, rgba(48,43,57,.3) 45%, rgba(48,43,57,.88) 100%);
}
.hero .container.hero-content{
  position:relative; z-index:2;
  max-width: 700px;
}
.hero h1{
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.02;
  color: var(--off-white);
}
.hero h1 em{
  font-style: normal;
  font-weight: 800;
  color: var(--peach);
}
.hero-sub{
  max-width: 480px;
  font-size: 1.08rem;
  color: rgba(249,249,249,.85);
  
}
.hero-actions{ display:flex; gap:18px; margin-top: 36px; flex-wrap:wrap; }
.hero-stats{
  display:flex; gap:38px; margin-top: 62px;
  font-family: var(--font-mono);
}
.hero-stats div strong{
  display:block; font-family: var(--font-display); font-size:1.7rem; color: var(--teal);
}
.hero-stats div span{ font-size:.72rem; letter-spacing:.08em; color:rgba(249,249,249,.65); text-transform:uppercase; }

.hero .frame-tag{
  position:absolute; right:28px; bottom:28px; z-index:2;
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--off-white);
  letter-spacing:.1em;
  display:flex; align-items:center; gap:10px;
}
.hero .frame-tag .logomark{ width:22px; height:22px; filter: brightness(0) invert(1); opacity:.92; }
.hero .corner-mark{
  position:absolute; width:26px; height:26px; z-index:2;
  border: 1px solid rgba(249,249,249,.65);
}
.corner-mark.tl{ top:24px; left:24px; border-width:1px 0 0 1px; }
.corner-mark.tr{ top:24px; right:24px; border-width:1px 1px 0 0; }
.corner-mark.bl{ bottom:24px; left:24px; border-width:0 0 1px 1px; }
.corner-mark.br{ bottom:24px; right:24px; border-width:0 1px 1px 0; }

@media (max-width: 900px){
  .hero{ min-height: 78vh; padding-bottom: 64px; }
  .hero .frame-tag{ display:none; }
}
@media (max-width: 560px){
  .hero-stats{ gap:24px; }
}

/* ==========================================================================
   Section basics
   ========================================================================== */
section{ padding: 100px 0; }
.section-tight{ padding: 70px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom: 56px;
}
.section-head h2{ font-size: clamp(1.9rem,3vw,2.6rem); max-width:640px; }
.section-head p{ max-width: 360px; color: var(--charcoal-soft); margin:0; }
.on-dark{ background: var(--charcoal); color: var(--off-white); }
.on-dark .section-head p{ color: rgba(249,249,249,.65); }
.on-peach{ background: var(--peach-soft); }
.on-purpletint{ background: var(--purple-tint); }

/* ==========================================================================
   Featured work grid (home)
   ========================================================================== */
.work-grid{
  display:grid;
  grid-template-columns: repeat(6,1fr);
  gap: 22px;
}
.work-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/5;
  grid-column: span 2;
  cursor:pointer;
}
.work-card.wide{ grid-column: span 4; aspect-ratio: 8/5; }
/* Homepage grid only: the previous approach (giving the portrait tile its
   own separate aspect-ratio, hoping it happened to compute the same pixel
   height as its landscape sibling) never reliably matched — two
   independent ratio calculations don't land on the same number once grid
   gaps are factored in, which is what was causing the leftover whitespace.
   Fix: remove the portrait tile's own aspect-ratio entirely and let it
   inherit its height directly from the row instead — the row's height is
   already set by the .wide card in that row (aspect-ratio still applies
   there), and Grid's default stretch behavior fills the portrait tile to
   match automatically. This is correct at any viewport width, not just
   the one it happened to be tuned for. Scoped to desktop only — below
   800px everything already collapses to one uniform ratio (see the
   mobile rule further down) and isn't affected. Doesn't touch the
   portfolio page, which sizes its own tiles independently via
   .gallery .work-card and has no wide/portrait pairing to match. */
@media (min-width: 801px){
  .work-grid .work-card:not(.wide){ aspect-ratio: unset; height: 100%; }
}
.swatch{ position:absolute; inset:0; }
.swatch img,
.swatch video,
.swatch iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
}
/* Reusable utility for any real photo dropped into a placeholder frame
   (.swatch already applies this to its own img automatically above —
   this class exists so the same fill-and-crop behavior can be used
   anywhere else, e.g. inside .hero-media or .about-media). */
.fit-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.swatch::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity:.55;
  pointer-events: none;
}
.work-card .info{
  position:absolute; left:0; right:0; bottom:0;
  padding: 20px;
  display:flex; justify-content:space-between; align-items:flex-end;
  color: var(--off-white);
  background: linear-gradient(to top, rgba(24,20,29,.72), transparent 70%);
  transform: translateY(10px);
  opacity:0;
  transition: opacity .35s ease, transform .35s ease;
}
.work-card:hover .info{ opacity:1; transform:translateY(0); }
.work-card:hover .logomark{ transform: rotate(-9deg) scale(1.08); }
.work-card h4{ margin:0; font-size:1.02rem; }
.work-card .tag{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--teal); }
/* Video cards: the caption overlay must never block the native video's
   own control bar, which sits in this same bottom-edge region. */
.work-card[data-cat="video"] .info{ pointer-events:none; }

.swatch-1{ background: linear-gradient(135deg,#4c2170,#662d91 55%,#8a52b8); }
.swatch-2{ background: linear-gradient(135deg,#00a3a1,#00d4d1 60%,#7ef1ef); }
.swatch-3{ background: linear-gradient(135deg,#f2c8a4,#e8ad78 60%,#c98a53); }
.swatch-4{ background: linear-gradient(140deg,#302b39,#5a4f6b 60%,#8a7ba0); }
.swatch-5{ background: linear-gradient(135deg,#662d91,#00d4d1 120%); }
.swatch-6{ background: linear-gradient(135deg,#302b39 10%,#662d91 60%,#f2c8a4 130%); }
.swatch-7{ background: linear-gradient(160deg,#f2c8a4,#662d91); }
.swatch-8{ background: linear-gradient(160deg,#00d4d1,#302b39); }
.swatch-9{ background: linear-gradient(135deg,#8a52b8,#f2c8a4 70%); }
.swatch-10{ background: linear-gradient(145deg,#00a3a1,#4c2170 70%); }
.swatch-11{ background: linear-gradient(150deg,#e8ad78,#302b39 75%); }
.swatch-12{ background: linear-gradient(130deg,#662d91,#00d4d1 65%,#f2c8a4); }
.swatch-13{ background: linear-gradient(160deg,#423a4d,#00a3a1 70%); }
.swatch-14{ background: linear-gradient(140deg,#f2c8a4,#4c2170 80%); }
.swatch-15{ background: linear-gradient(150deg,#00d4d1,#8a52b8 70%); }
.swatch-16{ background: linear-gradient(135deg,#302b39,#00d4d1 60%,#f2c8a4 130%); }
.swatch-17{ background: linear-gradient(145deg,#c98a53,#662d91 75%); }
.swatch-18{ background: linear-gradient(160deg,#4c2170,#f2c8a4 80%); }
.swatch-19{ background: linear-gradient(130deg,#00a3a1,#302b39 70%); }
.swatch-20{ background: linear-gradient(150deg,#8a52b8,#00d4d1 75%); }

@media (max-width: 800px){
  .work-grid{ grid-template-columns: repeat(2,1fr); }
  .work-card, .work-card.wide{ grid-column: span 2; aspect-ratio: 4/5; }
}

/* ==========================================================================
   Services strip (home) + process
   ========================================================================== */
.service-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:1px;
  background: var(--charcoal-line);
  border-top:1px solid var(--charcoal-line);
  border-bottom:1px solid var(--charcoal-line);
}
.service-strip .item{
  background: var(--charcoal);
  padding: 44px 36px;
}
.service-strip .item .num{ font-family: var(--font-mono); color: var(--teal); font-size:.8rem; }
.service-strip .item h3{ color: var(--off-white); margin: 18px 0 12px; font-size:1.3rem; }
.service-strip .item p{ color: rgba(249,249,249,.6); font-size:.94rem; }
@media (max-width: 800px){ .service-strip{ grid-template-columns:1fr; } }

/* Carousel galleries inside each service-strip column */
.carousel{
  position:relative;
  margin-top:26px;
}
.carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  border-radius: var(--radius);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  transition: transform 0.5s ease-in-out;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{
  position:relative;
  flex:0 0 100%;
  aspect-ratio: 4/5;
  scroll-snap-align:center;
  cursor:pointer;
  border-radius: var(--radius);
  overflow:hidden;
}
.carousel-slide .swatch{ position:absolute; inset:0; }
.play-badge{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
  pointer-events: none; /* safety net: never block clicks meant for a real <video>'s controls underneath */
}
.play-badge .play-circle{
  width:38px; height:38px; border-radius:50%;
  background: rgba(249,249,249,.92);
  display:flex; align-items:center; justify-content:center;
  transition: transform .25s ease, background .25s ease;
}
.play-circle svg{ width:13px; height:13px; margin-left:2px; fill: var(--charcoal); }
.carousel-slide:hover .play-circle{ transform:scale(1.12); background: var(--teal); }
/* Once a real <video> is dropped into a slide, hide the decorative
   placeholder play badge entirely — the video's own native controls
   take over from here. */
.carousel-slide:has(video) .play-badge{ display:none; }

.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  background: rgba(48,43,57,.75); border:1px solid rgba(249,249,249,.28);
  color: var(--off-white); display:flex; align-items:center; justify-content:center;
  z-index:2; font-size:.8rem; transition: all .2s ease;
}
.carousel-btn:hover:not(:disabled){ background: var(--teal); color: var(--charcoal); border-color: var(--teal); }
.carousel-btn:disabled{ opacity:.25; cursor:not-allowed; }
.carousel-btn.prev{ left:8px; }
.carousel-btn.next{ right:8px; }

.carousel-dots{
  display:flex; justify-content:center; gap:7px; margin-top:14px;
}
.carousel-dot{
  width:6px; height:6px; border-radius:50%; background: rgba(249,249,249,.25);
  border:none; padding:0; cursor:pointer; transition: all .2s ease;
}
.carousel-dot.active{ background: var(--teal); width:16px; border-radius:3px; }

.carousel-note{
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(249,249,249,.4); margin-top:12px; text-align:center;
}

/* ==========================================================================
   Testimonial / quote
   ========================================================================== */
.quote-block{
  max-width: 640px; margin: 0 auto; text-align:center;
}
.quote-block .logomark{ width:40px; height:40px; margin: 0 auto 24px; }
.testimonial{
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 26px;
  border: 3px solid var(--teal);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.testimonial img{
  width: 100%; height: 140%;
  object-fit: cover; object-position: center;
  display: block;
}
.quote-block blockquote{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.3rem,2.2vw,1.8rem);
  font-style: italic;
  line-height:1.5;
  letter-spacing: -.01em;
  margin: 0 0 22px;
}
.quote-block cite{
  font-family: var(--font-mono);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-style:normal;
  color: var(--charcoal-soft);
}
.about-header{
  width: 600px; height: 600px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 26px;
  border: 3px solid var(--teal);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.on-dark .quote-block cite{ color: rgba(249,249,249,.55); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background: var(--purple);
  color: var(--off-white);
  padding: 78px 0;
  text-align:center;
}
.cta-band h2{ font-size: clamp(1.9rem,3.4vw,2.8rem); max-width:640px; margin:0 auto 14px; }
.cta-band p{ color: rgba(249,249,249,.75); max-width:520px; margin:0 auto 32px; }

.icon-container {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 0px;
  font-family: sans-serif;
}

.png-icon {
  width: 100px;           /* Explicitly set the width */
  height: 100px;          /* Explicitly set the height */
  object-fit: contain;   /* Prevents the image from distorting */
}

.png-icon:hover {
  transform: scale(1.15);
  opacity: 0.8;
}


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--charcoal); color: rgba(249,249,249,.7); padding: 72px 0 28px; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 52px; border-bottom:1px solid var(--charcoal-line);
}
.footer-grid h5{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--teal); margin:0 0 18px;
}
.footer-grid .brand{ color: var(--off-white); margin-bottom:14px; }
.footer-grid .brand .logomark{ width:40px; height:40px; }
.footer-grid .brand small{ color: var(--teal); }
.footer-grid p{ font-size:.92rem; max-width: 280px; }
.footer-links li{ margin-bottom: 10px; font-size:.92rem; }
.footer-links a:hover{ color: var(--teal); }
.footer-social{ display:flex; gap:14px; margin-top:18px; }
.footer-social a{
  width:36px; height:36px; border:1px solid var(--charcoal-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition: border-color .25s ease, color .25s ease;
}
.footer-social a:hover{ border-color: var(--teal); color: var(--teal); }
.footer-bottom{
  display:flex; justify-content:space-between; padding-top: 26px;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.03em; color: rgba(249,249,249,.4);
  flex-wrap:wrap; gap:10px;
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.page-hero{
  padding: 64px 0 1px;
  border-bottom: 1px solid rgba(48,43,57,.08);
}
.page-hero h1{ font-size: clamp(2.2rem,4vw,3.2rem); max-width: 720px; }
.page-hero .lead{ max-width: 560px; color: var(--charcoal-soft); font-size:1.06rem; }
.crumb{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--purple); margin-bottom: 18px; display:block;
}

/* ==========================================================================
   Portfolio page
   ========================================================================== */
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 46px;
}
.filter-btn{
  font-family: var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  padding: 10px 20px; border:1px solid rgba(48,43,57,.2); background:transparent; border-radius:20px;
  transition: all .25s ease;
}
.filter-btn:hover{ border-color: var(--purple); color: var(--purple); }
.filter-btn.active{ background: var(--charcoal); color: var(--off-white); border-color: var(--charcoal); }

.gallery{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
.gallery .work-card{ grid-column: span 1; aspect-ratio: 5/7; }
.gallery .work-card.tall{ aspect-ratio: 5/7; }
.gallery .work-card[data-cat="video"] .tag::before{ content:"▶ "; }
.gallery .work-card.hide{ display:none; }
@media (max-width: 800px){ .gallery{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .gallery{ grid-template-columns: 1fr; } }

.gallery .work-card {
    grid-column: span 1;
}

.gallery .work-card.photo {
    aspect-ratio: 5/7;
}

.gallery .work-card.video-portrait {
    aspect-ratio: 5/7;
}

.gallery .work-card.video-landscape {
    aspect-ratio: 3/2;
    grid-column: span 2;
}

/* External portfolio embed (below the gallery) */
.portfolio-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(48,43,57,.12);
  background: var(--off-white);
}
.portfolio-embed iframe{
  position: absolute; inset:0;
  width:100%; height:100%;
  border:0;
  display:block;
}
@media (max-width: 700px){
  .portfolio-embed{ aspect-ratio: 3/4; }
}
/* Always-visible caption under the embed — not a hidden overlay, since a
   blocked iframe still renders as an opaque box rather than a transparent
   one, so a fallback stacked behind it would never actually be seen. */
.portfolio-embed-fallback{
  text-align:center; margin-top:20px;
}
.portfolio-embed-fallback p{
  margin:0 0 14px; color: var(--charcoal-soft); font-size:.9rem;
}

/* Instagram's official embed (the <blockquote> Instagram provides) sets
   its own inline width/margin and doesn't center itself in a wide
   container on its own — this just centers that block within our
   section, without touching Instagram's own inline styles at all. */
.instagram-embed{
  display:flex;
  justify-content:center;
}

/* Generic standalone video embed (YouTube/Vimeo) — for use anywhere
   OUTSIDE the .swatch tile system, e.g. a dedicated video section or a
   one-off embed on the About page. If you're swapping a video into an
   existing carousel/gallery slide instead, don't use this — just replace
   the <video> tag with an <iframe> directly inside that slide's existing
   .swatch div; .swatch iframe already handles the sizing. */
.video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--charcoal);
}
.video-embed iframe{
  position: absolute; inset:0;
  width:100%; height:100%;
  border:0;
  display:block;
}



/* ==========================================================================
   Services / pricing page
   ========================================================================== */
.pricing-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:26px;
}
.price-card{
  background: var(--off-white);
  border: 1px solid rgba(48,43,57,.12);
  padding: 40px 32px;
  border-radius: var(--radius);
  display:flex; flex-direction:column;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.price-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px rgba(48,43,57,.1); }
.price-card.featured{ background: var(--charcoal); color: var(--off-white); border-color: var(--charcoal); }
.price-card .reading{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; color: var(--purple);
}
.price-card.featured .reading{ color: var(--teal); }
.price-card h3{ font-size:1.5rem; margin: 12px 0 6px; }
.price-card .price{ font-family: var(--font-display); font-size:2.1rem; color: var(--purple); margin-bottom:18px; }
.price-card.featured .price{ color: var(--teal); }
.price-card .price span{ font-family: var(--font-mono); font-size:.7rem; color: var(--charcoal-soft); }
.price-card.featured .price span{ color: rgba(249,249,249,.55); }
.price-card ul{ margin: 22px 0 30px; flex:1; }
.price-card li{
  padding: 10px 0; border-top: 1px solid rgba(48,43,57,.1);
  font-size:.94rem; display:flex; gap:10px;
}
.price-card.featured li{ border-top-color: rgba(249,249,249,.12); }
.price-card li::before{ content:"—"; color: var(--purple); }
.price-card.featured li::before{ color: var(--teal); }

.addons{
  margin-top: 70px;
  display:grid; grid-template-columns: repeat(4,1fr); gap: 22px;
}
.addon{
  border: 1px solid rgba(48,43,57,.12); padding: 24px; border-radius: var(--radius);
}
.addon .amt{ font-family:var(--font-mono); color:var(--purple); font-size:.85rem; margin-bottom:6px; display:block; }
.addon h4{ font-size:1.02rem; margin-bottom:6px; }
.addon p{ font-size:.86rem; color: var(--charcoal-soft); margin:0; }

@media (max-width: 900px){ .pricing-grid{ grid-template-columns:1fr; } .addons{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .addons{ grid-template-columns: 1fr; } }

.compare-note{
  margin-top: 46px; padding: 26px 30px; background: var(--purple-tint);
  border-radius: var(--radius); font-size:.94rem; display:flex; gap:16px; align-items:flex-start;
}
.compare-note .logomark{ width:26px; height:26px; flex-shrink:0; margin-top:2px; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-grid{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items:center;
}
.about-portrait{
  aspect-ratio: 3/4; border-radius: var(--radius); position:relative; overflow:hidden;
}
.about-media{
  position:absolute; inset:0;
  background: linear-gradient(150deg,var(--purple),var(--charcoal) 70%);
}
.about-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center; display:block;
}
.about-media::after{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity:.5;
}
.about-copy p{ color: var(--charcoal-soft); font-size:1.02rem; }
.stat-row{ display:flex; gap:40px; margin-top:34px; }
.stat-row div strong{ display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--purple); }
.stat-row div span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--charcoal-soft); }

.timeline{ display:grid; grid-template-columns: repeat(4,1fr); gap: 26px; margin-top: 10px; }
.timeline .step{ padding-top: 24px; border-top: 2px solid var(--purple); }
.timeline .step .num{ font-family: var(--font-mono); color: var(--purple); font-size:.82rem; display:block; margin-bottom:12px; }
.timeline .step h4{ font-size:1.1rem; margin-bottom:8px; }
.timeline .step p{ font-size:.9rem; color: var(--charcoal-soft); margin:0; }
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } .timeline{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .timeline{ grid-template-columns: 1fr; } }

.values-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; margin-top:20px; }
.value-card{ padding: 30px; border: 1px solid rgba(249,249,249,.12); border-radius: var(--radius); }
.value-card h4{ color: var(--off-white); margin-bottom:10px; }
.value-card p{ color: rgba(249,249,249,.62); margin:0; font-size:.92rem; }
@media (max-width: 800px){ .values-row{ grid-template-columns:1fr; } }

/* ==========================================================================
   Contact + booking form
   ========================================================================== */
.contact-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 70px;
}
.contact-info h2{ font-size: 1.9rem; margin-bottom:18px; }
.contact-list{ margin-top: 34px; }
.contact-list li{ padding: 18px 0; border-top:1px solid rgba(48,43,57,.12); }
.contact-list li:last-child{ border-bottom:1px solid rgba(48,43,57,.12); }
.contact-list .lbl{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--purple); display:block; margin-bottom:6px; }
.contact-list .val{ font-size:1.02rem; }
.contact-social{ display:flex; gap:14px; margin-top:30px; }
.contact-social a{
  width:40px; height:40px; border:1px solid rgba(48,43,57,.2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition: all .25s ease;
}
.contact-social a:hover{ background: var(--purple); border-color: var(--purple); color: var(--off-white); }

.booking-card{
  background: var(--charcoal); color: var(--off-white);
  padding: 44px; border-radius: var(--radius);
}
.booking-card h3{ font-size:1.5rem; margin-bottom:6px; }
.booking-card .sub{ color: rgba(249,249,249,.6); font-size:.92rem; margin-bottom:32px; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1/-1; }
.field label{
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(249,249,249,.65);
}
.field-hint{
  font-family: var(--font-mono); font-size:.68rem; color: rgba(249,249,249,.4); margin-top:-2px;
}
.field input, .field select, .field textarea{
  background: rgba(249,249,249,.06);
  border: 1px solid rgba(249,249,249,.18);
  color: var(--off-white);
  padding: 13px 14px;
  border-radius: var(--radius);
  transition: border-color .25s ease, background .25s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(249,249,249,.35); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--teal); background: rgba(249,249,249,.1); outline:none;
}
.field select option{ color: var(--charcoal); }
.field textarea{ resize: vertical; min-height: 96px; font-family: inherit; }

.form-note{ font-size:.8rem; color: rgba(249,249,249,.45); margin-top:16px; }

/* ==========================================================================
   Cinematic scroll motion
   - .cine-frame .swatch   : reveal-on-scroll (grid tiles — no parallax, keeps a dense grid calm)
   - .cine-parallax        : reveal-on-scroll (filter only) + continuous JS-driven parallax drift
     transform on .cine-parallax is owned by the parallax scroll handler in script.js once it
     initializes; the scale(1.12) below is only the pre-JS / no-JS fallback baseline so there's
     no visible jump the moment the handler takes over.
   - Hover zoom (added on top, layout/spacing/colors untouched): hovering a
     tile or the hero/about photo adds a slight extra zoom, independent of
     scroll. Grid tiles use a plain CSS :hover rule; the hero/about photo's
     hover scale is set in script.js instead, since that element's transform
     is already being driven by the parallax scroll handler.
   ========================================================================== */
.cine-frame .swatch{
  transform: scale(1.12);
  filter: brightness(.82) saturate(.9);
  transition: transform .6s var(--ease), filter 1.4s var(--ease);
}
.cine-frame.in-view .swatch{
  transform: scale(1);
  filter: brightness(1) saturate(1);
}
.cine-parallax{
  transform: scale(1.12);
  filter: brightness(.82) saturate(.9);
  transition: filter 1.6s var(--ease), transform .2s ease;
  will-change: transform;
}
.cine-parallax.in-view{
  filter: brightness(1) saturate(1);
}
.work-card:hover .swatch,
.carousel-slide:hover .swatch{
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce){
  .cine-frame .swatch, .cine-parallax{ transform:none !important; }
  .work-card:hover .swatch, .carousel-slide:hover .swatch{ transform:none !important; }
}

/* ---- Booking calendar ---- */
.calendar-shell{ margin-bottom: 26px; }
.calendar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.calendar-head h4{
  font-family: var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  font-size:.82rem; color: var(--off-white); margin:0;
}
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  width:32px; height:32px; border:1px solid rgba(249,249,249,.25); background:transparent;
  color: var(--off-white); border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition: all .2s ease; font-size:.9rem;
}
.cal-nav button:hover:not(:disabled){ border-color: var(--teal); color: var(--teal); }
.cal-nav button:disabled{ opacity:.22; cursor:not-allowed; }
.cal-weekdays, .cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.cal-weekdays span{
  font-family: var(--font-mono); font-size:.62rem; text-align:center; color: rgba(249,249,249,.4);
  text-transform:uppercase; padding-bottom:6px;
}
.cal-day{
  aspect-ratio:1; border-radius: var(--radius); border:1px solid rgba(249,249,249,.12);
  background: rgba(249,249,249,.04); color: var(--off-white); font-family: var(--font-mono);
  font-size:.8rem; display:flex; align-items:center; justify-content:center; transition: all .2s ease;
}
.cal-day.is-empty{ border:none; background:none; }
.cal-day.is-available:hover{ border-color: var(--teal); background: rgba(0,212,209,.12); cursor:pointer; }
.cal-day.is-selected{ background: var(--teal); border-color: var(--teal); color: var(--charcoal); font-weight:700; }
.cal-day.is-booked{
  background: rgba(249,249,249,.03); border-color: rgba(249,249,249,.06); color: rgba(249,249,249,.28);
  text-decoration: line-through; cursor:not-allowed;
}
.cal-day.is-past{ opacity:.2; cursor:not-allowed; }
.cal-day.is-today{ box-shadow: inset 0 0 0 1px var(--peach); }
.cal-legend{
  display:flex; gap:18px; margin-top:14px; font-family: var(--font-mono); font-size:.68rem;
  color: rgba(249,249,249,.55); flex-wrap:wrap;
}
.cal-legend span{ display:flex; align-items:center; gap:6px; }
.cal-legend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }
.cal-legend .dot-avail{ background: rgba(249,249,249,.15); }
.cal-legend .dot-selected{ background: var(--teal); }
.cal-legend .dot-booked{ background: rgba(249,249,249,.06); }
.selected-date-readout{ font-family: var(--font-mono); font-size:.78rem; color: var(--teal); margin-top:14px; min-height:18px; }
.cal-error{ color:#ff9c9c; font-family: var(--font-mono); font-size:.76rem; margin-top:8px; display:none; }
.cal-error.show{ display:block; }

.confirm-panel{
  display:none; text-align:center; padding: 20px 6px 6px;
}
.confirm-panel.show{ display:block; }
.confirm-panel .logomark{ width:44px; height:44px; margin: 0 auto 18px; }
.confirm-panel h3{ margin-bottom:10px; }
.confirm-panel p{ color: rgba(249,249,249,.65); }
.confirm-summary{
  text-align:left; margin: 22px 0; padding: 20px; background: rgba(249,249,249,.05);
  border-radius: var(--radius); font-size:.9rem;
}
.confirm-summary div{ display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid rgba(249,249,249,.1); }
.confirm-summary div:first-child{ border-top:none; }
.confirm-summary span:first-child{ color: rgba(249,249,249,.55); font-family: var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; }

/* Map / location strip */
.map-strip{
  height: 340px; border-radius: var(--radius); overflow:hidden; position:relative;
  background:
    linear-gradient(rgba(48,43,57,.55), rgba(48,43,57,.55)),
    repeating-linear-gradient(45deg, #ddd 0 2px, #eee 2px 40px),
    repeating-linear-gradient(-45deg, #ddd 0 2px, #f4f4f4 2px 40px);
  display:flex; align-items:center; justify-content:center; margin-top: 60px;
}
.map-strip .pin{ text-align:center; color: var(--off-white); }
.map-strip .pin .logomark{ width:40px; height:40px; margin: 0 auto 14px; filter: brightness(0) invert(1); opacity:.95; }
.map-strip .pin .city{ font-family: var(--font-display); font-size:1.5rem; }
.map-strip .pin .addr{ font-family: var(--font-mono); font-size:.8rem; color: rgba(249,249,249,.7); margin-top:6px; }

/* FAQ */
.faq-list{ max-width: 780px; margin: 0 auto; }
.faq-item{ border-top: 1px solid rgba(48,43,57,.12); padding: 22px 0; }
.faq-item:last-child{ border-bottom: 1px solid rgba(48,43,57,.12); }
.faq-item summary{
  cursor:pointer; font-family: var(--font-display); font-size:1.1rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family: var(--font-mono); font-size:1.3rem; color: var(--purple); transition: transform .25s ease; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top:14px; color: var(--off-white); max-width:640px; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* Fade-in on scroll */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}