/* ============================================================
   AIRIS DESIGN STUDIO — HOMEPAGE STYLESHEET
   ============================================================
   FONT NOTE: "Canela" is a paid, licensed font (Colophon Foundry)
   and is NOT available on Google Fonts or any free CDN. We cannot
   legally load it from the internet without you owning a license.
   This file lists 'Canela' first in the font stack — if you ever
   buy the license and upload the font files, it will be used
   automatically with no other changes needed. Until then, the
   browser will fall back to Cormorant Garamond (a close, free,
   elegant serif), so the site still looks considered either way.
   ============================================================ */

:root{
  --white:      #FBF6EF;
  --black:      #07020D;
  --magenta:    #DA47EA;
  --pink:       #EFADF6;
  --indigo:     #44375E;

  /* Display/heading font: Canela first, free elegant serif fallback */
  --serif: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  /* Body font: Montserrat (as requested) */
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-w: 1280px;
  --gutter: clamp(24px, 6vw, 96px);
  --section-space: clamp(48px, 9vw, 120px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--black);
}

p{ margin: 0 0 18px; }
p:last-child{ margin-bottom: 0; }

a{ color: inherit; text-decoration: none; }

img{ display: block; max-width: 100%; }

.wrap{
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow{
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 20px;
}

section{ position: relative; }

/* ============================================================
   PLACEHOLDER IMAGE BLOCKS
   These are clearly labeled stand-ins for your real photography.
   Search this file for "REPLACE" to find every spot to swap.
   ============================================================ */
.ph{
  width: 100%;
  background: linear-gradient(155deg, var(--indigo) 0%, #362c4c 100%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.ph::before{
  content:'';
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(251,246,239,0.35);
  pointer-events: none;
}
.ph span{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(251,246,239,0.9);
  background: rgba(7,2,13,0.35);
  padding: 6px 12px;
  border-radius: 3px;
}
.ph.tall{ aspect-ratio: 3 / 4; }
.ph.square{ aspect-ratio: 1 / 1; }
.ph.pink-tone{ background: linear-gradient(155deg, #c98bd4 0%, var(--pink) 100%); }
.ph.pink-tone span{ color: var(--black); background: rgba(251,246,239,0.55); }
.ph.pink-tone::before{ border-color: rgba(7,2,13,0.2); }

/* Fixed-size placeholders (exact pixel dimensions requested) */
.ph.fixed-slide{ width: 247.2px; height: 370.8px; flex-shrink: 0; aspect-ratio: unset; }
.ph.fixed-process{ height: 568.9px; width: 100%; aspect-ratio: unset; }

/* Logo placeholder in header */
.logo-placeholder{
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0;
  text-decoration: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 16px 34px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 550ms var(--ease), color 550ms var(--ease), border-color 550ms var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--magenta); color: var(--white); }
.btn-primary:hover{ background: #c02fd1; }
.btn-primary:focus-visible{ outline: 2px solid var(--black); outline-offset: 3px; }

.btn-outline{ background: transparent; border-color: currentColor; color: var(--white); }
.btn-outline:hover{ background: var(--white); color: var(--black); }

a:focus-visible, button:focus-visible{ outline: 2px solid var(--black); outline-offset: 3px; }

/* ============================================================
   NAVIGATION
   Now a permanently solid magenta header, separated clearly
   from the hero from the moment the page loads.
   ============================================================ */
.nav{
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--magenta);
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow 400ms var(--ease), padding 400ms var(--ease);
}
.nav.scrolled{
  padding-top: 14px;
  padding-bottom: 14px;
  box-shadow: 0 4px 18px rgba(7,2,13,0.18);
}

.nav-menu{
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-menu a{
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  position: relative;
  padding-bottom: 4px;
}
.nav-menu a:not(.btn)::after{
  content:'';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 400ms var(--ease);
}
.nav-menu a:not(.btn):hover::after{ transform: scaleX(1); transform-origin: left; }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--white);
}

/* ============================================================
   HERO
   Fixed 770px height, text centered (horizontally + vertically).
   ============================================================ */
.hero{
  position: relative;
  height: 616px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
.hero-content{
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter);
  max-width: 780px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .eyebrow{ color: var(--magenta); }
.hero h1{
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.15;
  color: var(--indigo);
  margin-bottom: 24px;
  white-space: normal;
}
/* On desktop widths, allow the heading to sit on a single line */
@media (min-width: 1100px){
  .hero h1{
    white-space: nowrap;
    font-size: clamp(26px, 2.9vw, 42px);
  }
}
.hero p{
  font-size: 17px;
  color: var(--indigo);
  max-width: 560px;
  margin: 0 auto 36px;
}

/* ============================================================
   GENERIC SECTION LAYOUT HELPERS
   ============================================================ */
.section-pad{ padding-top: var(--section-space); padding-bottom: var(--section-space); }

.sec-work{ padding-left: var(--gutter); padding-right: var(--gutter); }
.split{
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* stacked below 900px */
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 900px){
  .split{
    /* "auto" sizes this column to the carousel's real rendered width
       instead of a rigid 50%, so the carousel can never be wider than
       the space actually given to it (that mismatch was the clipping bug). */
    grid-template-columns: auto 1fr;
    gap: clamp(32px, 4vw, 64px);
  }
}
.split-copy h2{ font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; margin-bottom: 24px; }
.split-copy p{ font-size: 16px; color: #2a2432; max-width: 480px; }

/* ---- Selected Work: carousel on the left, copy on the right ----
   Slide size (247.2 x 370.8px) is unchanged from the original spec.
   Always shows exactly 2 complete images from 640px up (never 1 on
   desktop, never a partial 3rd) and 1 on mobile. Below 900px the
   carousel and copy stack (full-width carousel on top) because a true
   side-by-side layout doesn't leave the copy enough room to read
   comfortably at those widths — see the note in chat for the numbers. */
.slider-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 900px){
  .slider-wrap{ justify-content: flex-start; }
}
.sw-carousel{
  position: relative;
  width: 247.2px;
  height: 370.8px;
  overflow: hidden;
  border-radius: 2px;
}
@media (min-width: 640px){
  .sw-carousel{ width: calc(247.2px * 2 + 20px); }
}
.sw-track{
  display: flex;
  gap: 20px;
  height: 100%;
  transition: transform 550ms var(--ease);
}
.sw-slide{
  flex: 0 0 247.2px;
  width: 247.2px;
  height: 100%;
}
.sw-slide .ph.fixed-slide{
  width: 100%;
  height: 100%;
}
/* Ready for when placeholder divs are swapped for real <img> tags:
   keeps the full print visible with no cropping or stretching. */
.sw-slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: none;
  outline: none;
}
.sw-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(251,246,239,0.9);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 300ms var(--ease), opacity 300ms var(--ease);
  z-index: 2;
}
.sw-arrow:hover{ background: var(--white); }
.sw-arrow-prev{ left: 10px; }
.sw-arrow-next{ right: 10px; }
.sw-arrow.is-disabled{ opacity: 0.35; cursor: default; }
.sw-arrow:focus-visible{ outline: 2px solid var(--magenta); outline-offset: 2px; }

/* ---- The Studio: intro (centered text flanked by two images) ---- */
.studio-intro{
  position: relative;
  overflow: hidden;
  background: var(--indigo); /* shows briefly before/if the bg image is set */
}
.studio-intro .studio-bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
  border: none;
  outline: none;
  display: block;
  z-index: 0;
}
.studio-intro .ph.studio-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7,2,13,0.45);
}
.studio-intro-copy{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}
.studio-intro-copy h2{ font-size: clamp(26px, 3.2vw, 38px); color: var(--indigo); }
.studio-intro-copy .eyebrow{ color: var(--magenta); }

/* ---- Studio process: two vertical photos with video in the middle ---- */
.process-row{
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---- Studio process: two photos with video in the middle ---- */
.process-image,
.process-media {
  display: block;
  width: 100%;
  height: 568.9px;
  min-width: 0;
  border: none;
  outline: none;
  border-radius: 2px;
}

.process-image {
  object-fit: cover;
  object-position: center;
}

.process-media {
  overflow: hidden;
}

.process-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: none;
  outline: none;
}


/* ============================================================
   CUSTOM WORK CALLOUT
   ============================================================ */
.callout{
  background: #EFADF6;
  border-top: 1px solid rgba(7,2,13,0.08);
  border-bottom: 1px solid rgba(7,2,13,0.08);
  padding: clamp(40px, 7vw, 88px) var(--gutter);
  text-align: center;
}
.callout-inner{ max-width: 640px; margin: 0 auto; }
.callout h2{ font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 20px; }
.callout p{ font-size: 17px; color: var(--black); margin-bottom: 36px; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-inner{
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}
.services-heading{ text-align: center; max-width: 640px; margin: 0 auto; }
.services-grid{
  display: grid;
  grid-template-columns: 1fr;        /* mobile: 1 x 4 */
  gap: 32px 48px;
  margin-top: 24px;
  align-items: start; /* each block sizes to its own content, no stretching */
}
@media (min-width: 640px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); } /* tablet: 2 x 2 */
}
@media (min-width: 1024px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); gap: 36px 56px; } /* desktop: 2 x 2 */
}
/* Plain text blocks — no card/box chrome (no background, border, or padding box) */
.service-card{ padding: 0; }
.service-card h3{ font-size: 22px; margin-bottom: 14px; }
.service-card p{ color: #2a2432; font-size: 14.5px; }
.services-btn-row{ text-align: center; margin-top: 24px; }

/* ============================================================
   LET'S CONNECT
   ============================================================ */
.connect{
  background: var(--indigo);
  color: var(--white);
  text-align: center;
  padding: clamp(44px, 7.5vw, 96px) var(--gutter);
}
.connect h2{ color: var(--white); font-size: clamp(30px, 4vw, 48px); margin-bottom: 24px; max-width: 700px; }
.connect p{ color: var(--pink); font-size: 17px; margin-bottom: 40px; max-width: 560px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background: var(--black); color: rgba(251,246,239,0.7); padding: 64px var(--gutter) 32px; }
.footer-top{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(251,246,239,0.15);
}
.footer-logo{ font-family: var(--serif); font-size: 22px; color: var(--white); margin-bottom: 12px; }
footer .foot-col h4{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
  font-weight: 600;
}
/* Direct-child combinator (">") on purpose: this must style the Contact
   column's own links/paragraphs only, and must NOT leak into the social
   icon links nested inside .social-icons li a below (that bug was why
   the icons previously broke into a vertical list). */
footer .foot-col > a, footer .foot-col > p{
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  color: rgba(251,246,239,0.7);
  transition: color 400ms var(--ease);
}
footer .foot-col > a:hover{ color: var(--pink); }

/* ---- Follow Us: single centered horizontal row, icons at 65% of their
   previous size (36px box / 16px glyph -> 23.4px box / 10.4px glyph) ---- */
.foot-col-social{ text-align: center; }
.foot-col-social h4{ text-align: center; }
.social-icons{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-icons li{ list-style: none; }
.social-icons a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(251,246,239,0.3);
  color: rgba(251,246,239,0.85);
  margin-bottom: 0;
  transition: border-color 300ms var(--ease), color 300ms var(--ease), background-color 300ms var(--ease);
}
.social-icons a:hover{
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(239,173,246,0.08);
}
.social-icons svg{ width: 24px; height: 24px; }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  font-size: 13px;
}

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
/* Scroll-reveal animation removed: it was making whole sections render
   invisible (opacity:0) whenever the page was viewed/captured without
   manually scrolling past each one first — which looked exactly like
   "empty sections" even though the sections themselves were always
   the correct height. Content is now always visible immediately. */

/* ============================================================
   EXACT DESKTOP SECTION HEIGHTS
   These set the section's rendered height directly and vertically
   center its content inside that height with flex — rather than
   guessing at padding values, which is what failed to produce a
   visible change previously. Hero's 770px (set earlier, in the HERO
   block above) already matches its target, so it isn't repeated here.
   Breakpoint is 900px (not 1024px) to match this site's one existing
   desktop/mobile threshold (same one the nav and the Selected Work
   layout already switch on) — a narrower threshold here previously
   left a dead zone between 900–1023px wide where a real browser
   window of that width got no fixed height at all and silently fell
   back to taller, content-driven auto height instead.
   Below 900px these sections fall back to automatic, content-driven
   height (see the section-pad padding + the other max-width:900px
   rules further down), since these exact pixel targets are desktop-only.
   ============================================================ */
/* HEIGHT CALIBRATION: the client measures screenshots taken on a display
   running at 125% scaling, where 1 CSS px = 1.25 screenshot px. Heights
   below are the requested screenshot heights divided by 1.25:
   Hero 770->616, Selected Work 680->544, Studio 680->544,
   Process 770->616, Custom Work 680->544, Services 880->704,
   Connect 530->424. */
@media (min-width: 900px){
  .sec-work{
    height: 544px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }
  .studio-intro{
    height: 544px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }
  .sec-process{
    height: 616px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .callout{
    height: 544px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sec-services{
    height: 704px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }
  .connect{
    height: 424px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 899px){
  .nav-menu{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 80vw);
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 40px var(--gutter);
    transform: translateX(100%);
    transition: transform 500ms var(--ease);
    box-shadow: -8px 0 30px rgba(7,2,13,0.08);
  }
  .nav-menu.open{ transform: translateX(0); }
  .nav-menu a{ color: var(--black) !important; font-size: 18px; }
  .nav-toggle{ display: block; }

  .process-row{ grid-template-columns: 1fr; }
  .btn{ width: 100%; text-align: center; }
  .hero{ height: auto; min-height: 560px; padding: 72px 0; }
}
@media (max-width: 560px){
  .hero-content .btn{ width: 100%; text-align: center; }
  .footer-top{ flex-direction: column; }
  /* The Studio is short on phones, so its placeholder caption sat on top
     of the heading. The caption is only a placeholder label, so hide it here. */
  .studio-intro .ph.studio-bg span{ display: none; }
}
/* Six 48px social icons + 16px gaps = 368px, wider than a 375/390px phone's
   content area. Tighten the gap on small phones so the row stays on one line. */
@media (max-width: 420px){
  .social-icons{ gap: 4px; flex-wrap: wrap; justify-content: center; }
}