/* ============================================================
   ARTISTHAUS STUDIO — Stylesheet v2
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

@font-face {
  font-family: 'MoreSugar';
  src: url('../fonts/MoreSugar-Regular.otf') format('opentype'),
       url('../fonts/MoreSugar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --amber-glow:      #ff9f0e;
  --bright-sky:      #15AAD9;
  --wild-strawberry: #ff5286;
  --lemon-lime:      #cbde1a;
  --grape-soda:      #9e5597;
  --ivory-mist:      #fcf5e4;
  --charcoal:        #494949;
  --floral-white:    #fffcf5;
  --font-display:    'MoreSugar', cursive;
  --font-body:       'Poppins', sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* root-level guard — body alone can't stop html from scrolling on some browsers */
  width: 100%;
  max-width: 100%;
}
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: #fff;
  overflow-x: clip; /* secondary guard — clip (not hidden) preserves position:sticky on child nav */
  width: 100%;
  max-width: 100%;
  /* Sticky footer — body fills full viewport height; content sections can flex-grow to push footer down */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
img  { max-width: 100%; display: block; } /* individual max-width: none overrides are still permitted on specific elements */
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

/* ============================================================
   INNER CONTAINER — max-width, centered
   All sections have full-bleed backgrounds.
   Content inside each section uses .inner to stay centered.
   ============================================================ */
.inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.nav__inner {
  padding: 0 24px; /* no vertical padding — logo height (130px) sets the nav height */
  display: flex;
  align-items: center;
  justify-content: center; /* whole group centered in viewport */
  gap: 0;
}

.nav-links {
  display: flex;
  gap: 8px;       /* tight gap between items */
  flex: 0 0 auto; /* don't stretch — only as wide as content */
}

.nav-links--right {
  justify-content: flex-start;
}

.nav-links a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;   /* was 12px */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--charcoal);
  padding: 6px 14px;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--amber-glow); }

.nav-logo { flex: 0 0 auto; padding: 0 16px; }
.nav-logo img { height: 130px; width: auto; } /* 2× original + 25% = 130px */

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  z-index: 201;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--charcoal);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--ivory-mist);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: color 0.2s;
}

.mobile-nav a:hover { color: var(--amber-glow); }

/* ============================================================
   BUTTON
   ============================================================ */
.btn {
  display: inline-block;
  background: var(--amber-glow);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 44px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.btn:hover { background: #e88e00; transform: translateY(-2px); }

/* ============================================================
   HOME — HERO SPACER
   White gap between nav and cream hero so arm overflow is visible
   ============================================================ */
.hero-spacer {
  background: #fff;
  height: 100px;
}

/* ============================================================
   HOME — HERO
   ============================================================ */
.home-hero {
  background: var(--ivory-mist);
  position: relative;
  height: 520px;
  clip-path: inset(-200px 0 0 0);
  /*
    clip-path inset(top right bottom left):
    top    -200px → clip region extends 200px ABOVE section, so arm overflow stays visible
    right       0 → clips flush at right edge
    bottom      0 → clips flush at bottom edge — legs end exactly at cream boundary
    left        0 → clips flush at left edge
    (replaces overflow: hidden which would have clipped the top arms too)
  */
}

.home-hero__squiggle {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.home-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: flex-end;
  height: 100%; /* fills the section's fixed 520px height */
  position: relative;
  z-index: 2;
}

.home-hero__text {
  flex: 0 0 44%;
  align-self: center;
  padding-bottom: 0;
  padding-top: 0;
}

.home-hero__text h1 {
  font-family: var(--font-display);
  font-size: 62px;
  color: var(--charcoal);
  line-height: 1.05;
}

.home-hero__image {
  flex: 0 0 56%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.home-hero__image img {
  height: 640px;     /* taller than min-height: 520px — excess overflows above section top */
  max-height: 90vh;  /* never cropped on short screens — scales down, stays bottom-flush */
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
}

/* ============================================================
   HOME — INTRO TEXT
   ============================================================ */
.home-intro {
  background: #fff;
  padding: 44px 0 0; /* bottom 0 — heading sits flush against service cards below */
}

.home-intro .inner {
  text-align: center;
  max-width: 720px;
}

.home-intro p {
  font-size: 15px;
  line-height: 1.75;
}

.home-intro p + p { margin-top: 10px; }

.home-intro__heading {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--charcoal);
  line-height: 1.2;
  margin-top: 3rem;  /* wider gap from the copy paragraph above */
}

/* ============================================================
   HOME — SERVICE CARDS
   ============================================================ */
.services {
  background: #fff;
  padding: 80px 0 52px; /* extra top padding gives room for icons overflowing above cards */
}

.services .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cards-row {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 820px;
  margin-bottom: 32px;
}

.card {
  flex: 1;
  border-radius: 16px;
  padding: 28px 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: visible; /* lets icon burst above card top */
}

.card--blue   { background: var(--bright-sky); }
.card--purple { background: var(--grape-soda); }
.card--pink   { background: var(--wild-strawberry); }

.card__icon {
  width: 140px;      /* 2× original 70px */
  height: 140px;
  object-fit: contain;
  margin-top: -90px; /* card padding-top is 28px → icon overflows 62px above card edge */
  margin-bottom: 16px;
  position: relative;
  z-index: 2;        /* sits above card background */
}

.card h2 {
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 8px;
}

.card p {
  font-size: 15px;   /* was 13px */
  line-height: 1.6;
  opacity: 0.96;
}

/* ============================================================
   HOME — CREATIVITY SECTION
   ============================================================ */
.creativity {
  background: var(--ivory-mist);
  position: relative;
  overflow: hidden;
  height: 480px;
}

.creativity__squiggle {
  display: none; /* removed per design */
}

.creativity__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;    /* remove top/bottom padding — section height controls size */
  display: flex;
  align-items: center;
  height: 100%;       /* fill fixed 580px section height */
  position: relative;
  z-index: 2;
}

.creativity__image {
  flex: 0 0 42%;
  align-self: stretch; /* stretch full section height */
  position: relative;
}

.creativity__image img {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 560px;       /* taller than 480px section → crops at top, flush at bottom */
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: bottom left;
}

.creativity__text {
  flex: 1;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.creativity__text p {
  font-size: 17px;
  line-height: 1.75;
  max-width: 360px;
  margin-bottom: 8px;
}

.creativity__text .btn { margin-top: 24px; }

/* ============================================================
   HOME — CTA SECTION (white, full-width, below creativity)
   ============================================================ */
.home-cta {
  background: #fff;
  padding: 52px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============================================================
   ABOUT — HERO
   Rebuilt from scratch. The section is position:relative so all
   absolutely-positioned children (squiggle, dot, h1) use the
   SECTION as their containing block — not any inner wrapper.
   ============================================================ */
.about-hero {
  background: var(--ivory-mist);
  position: relative;    /* containing block for all absolute children */
  overflow: hidden;      /* clips squiggle at edges */
  height: 218px;         /* 272px × 0.8 — another 20% shorter */
}

/* Pink squiggle — top right corner */
.about-hero__squiggle {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44%;
  pointer-events: none;
  z-index: 1;
}

/* Pink dot — bottom left accent */
.about-hero__dot {
  position: absolute;
  bottom: 28px;
  left: 60px;
  width: 22px;
  height: 22px;
  background: var(--wild-strawberry);
  border-radius: 50%;
  z-index: 2;
}

/* Headline — dead center of the cream section */
.about-hero h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* pulls back by exactly half own width & height */
  margin: 0;
  font-family: var(--font-display);
  font-size: 58px;
  color: var(--charcoal);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;  /* <br> in HTML sets the 2-line break; prevents unexpected wrapping */
  z-index: 2;
}

/* ============================================================
   ABOUT — LAURA SECTION
   ============================================================ */
.laura {
  background: #fff;
  position: relative;
  overflow: hidden;
  height: 520px; /* fixed — image overflows above, clips flush at bottom */
}

.laura .inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;        /* fill fixed section height */
  padding-top: 0;      /* removed — text gets its own padding below */
  padding-bottom: 0;
}

.laura__image-wrap {
  position: relative;
  flex: 0 0 38%;
  align-self: stretch; /* stretch from section top to bottom */
}

.laura__image-wrap img {
  position: absolute;
  bottom: 0;           /* anchor to section bottom — legs flush */
  left: 50%;
  transform: translateX(-50%);
  height: 496px;       /* 620px × 0.8 — 20% smaller, fits within 520px section */
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: bottom center;
  z-index: 2;
}

.laura__squiggle {
  display: none; /* removed per design */
}

.laura__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 44px 0; /* breathing room since inner no longer has top/bottom padding */
}

.laura__text h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  color: var(--charcoal);
  margin-bottom: 16px;
}

.laura__text p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--charcoal);
  margin-bottom: 12px;
  max-width: 420px;
}

/* ============================================================
   ABOUT — WHY SECTION
   ============================================================ */
.why {
  background: var(--grape-soda);
  position: relative;
  overflow: hidden; /* clips squiggle horizontally */
  /* no fixed height — section grows to fit full image */
}

.why__squiggle {
  display: none; /* removed per design */
  opacity: 1; /* solid white — stroke is #fff in SVG */
}

.why .inner {
  display: flex;
  align-items: flex-start; /* text anchors to top of section */
  gap: 40px;
  height: auto;
  padding-top: 52px;
  padding-bottom: 0;
}

.why__text {
  flex: 1;
  color: #fff;
  position: relative;
  z-index: 2;
  padding: 40px 0 16px; /* top breathing room preserved; bottom trimmed tight */
}

.why__text h2 {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.05;
  margin-bottom: 20px;
}

.why__text p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 12px;
  opacity: 0.95;
}

.why__image {
  flex: 0 0 40%;
  position: relative;
  z-index: 2;
  align-self: flex-end; /* pin image column to section bottom */
}

.why__image img {
  display: block;
  width: 100%;         /* constrained to column — no text overlap */
  height: 360px;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: bottom center; /* sits flush at the bottom */
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  background: #fff;
  padding: 56px 0;
  text-align: center;
}

.cta-section p {
  font-size: 16px;
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto 32px;
}

/* ============================================================
   CLASSES — SHARED SUBTITLE HELPER
   ============================================================ */
.section-subtitle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
}

/* ============================================================
   CLASSES — HERO
   Mirrors home-hero pattern: cream bg, bottom-flush image,
   full-width squiggle overlay, solid dot accent, text beside.
   clip-path exposes overflow above so pirate can peep over.
   ============================================================ */
.classes-hero {
  background: var(--ivory-mist);
  position: relative;
  height: 468px;  /* was 520px — −10% */
  clip-path: inset(-200px 0 0 0);
}

.classes-hero__squiggle {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.classes-hero__dot {
  position: absolute;
  right: 14%;
  top: 26%;
  width: 52px;
  height: 52px;
  background: var(--bright-sky);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
}

.classes-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: flex-end;
  height: 100%;
  position: relative;
  z-index: 2;
}

.classes-hero__image {
  flex: 0 0 46%;
  position: relative;
  align-self: stretch; /* stretch to full section height so bottom: 0 anchors to section floor */
}

.classes-hero__image img {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 630px;          /* taller than 520px → overflows above into hero-spacer */
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom left;
  transform: scale(0.856);         /* +7% from previous 0.8 */
  transform-origin: bottom left;  /* anchor scale to bottom-left so feet stay flush */
}

.classes-hero__text {
  flex: 1;
  align-self: stretch;        /* override flex-end on inner — stretch to full section height */
  display: flex;
  align-items: center;        /* true vertical centre within that full height */
  justify-content: center;
  text-align: center;
  /* no asymmetric padding — centering is handled by flexbox */
}

.classes-hero__text h1 {
  font-family: var(--font-display);
  font-size: 62px;
  color: var(--charcoal);
  line-height: 1.1;
}

/* ============================================================
   CLASSES — PRIVATE LESSONS  (Wild Strawberry / pink)
   Text left, art-tools image bottom-flush right.
   White squiggle decorates left edge (mirrors About › Why).
   ============================================================ */
.classes-private {
  background: var(--wild-strawberry);
  position: relative;
  height: 584px;   /* 520 + 64px (+2rem top + 2rem bottom breathing room) */
  overflow: hidden;
}

.classes-private__squiggle {
  display: none; /* removed per design — squiggle not needed in this section */
}

.classes-private .inner {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
  padding-bottom: 88px; /* matches Workshop section bottom padding */
}

.classes-private__text {
  flex: 1;
  color: #fff;
  text-align: left;
}

.classes-private__text h2 {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.05;
  margin-bottom: 4px;
}

.classes-private__text .section-subtitle {
  font-size: 15px;
  margin-bottom: 22px;
  opacity: 0.96;
}

.classes-private__text p {
  font-size: 15px;   /* was 13.5px */
  line-height: 1.8;
  margin-bottom: 10px;
  max-width: 460px;
  opacity: 0.95;
}

.classes-private__image {
  flex: 0 0 46%;
  position: relative;
  align-self: stretch;
}

.classes-private__image img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.85); /* −15% visual size; scale from center so vertical centre holds */
  transform-origin: center center;
  bottom: auto;
  right: 60px;
  height: 429px;    /* layout box kept — scale() shrinks visually, translateY(-50%) still centres */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center right;
}

/* ============================================================
   CLASSES — WORKSHOPS + CLASSES  (white)
   Framed cyanotype image left, centered text right.
   ============================================================ */
.classes-workshops {
  background: #fff;
  padding: 88px 0 88px;
}

.classes-workshops .inner {
  display: flex;
  align-items: center;
  gap: 68px;
}

/* Photo-frame treatment: white mat, thin warm border, like a mounted print */
.classes-workshops__frame {
  flex: 0 0 30%;
  background: #fff;
  padding: 10px;
  border: 1.5px solid #ccc5b3;
  display: block;
  line-height: 0; /* collapses bottom gap under img */
}

.classes-workshops__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.classes-workshops__text {
  flex: 1;
  text-align: left;
}

.classes-workshops__text h2 {
  font-family: var(--font-display);
  font-size: 46px;
  color: var(--charcoal);
  line-height: 1.05;
  margin-bottom: 4px;
}

.classes-workshops__text .section-subtitle {
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: 22px;
}

.classes-workshops__text p {
  font-size: 15px;   /* was 13.5px */
  line-height: 1.8;
  color: var(--charcoal);
  margin-bottom: 10px;
  max-width: 460px;
}

/* ============================================================
   CLASSES — CUSTOM SESSIONS  (Bright Sky / blue)
   Text left, stamps image bottom-flush right.
   White squiggle decorates right edge.
   ============================================================ */
.classes-custom {
  background: var(--bright-sky);
  position: relative;
  height: 584px;   /* 520 + 64px (+2rem top + 2rem bottom breathing room) */
  overflow: hidden;
}

.classes-custom__squiggle {
  display: none; /* removed per design — squiggle not needed in this section */
}

.classes-custom .inner {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
  padding-bottom: 88px; /* matches Workshop section bottom padding */
}

.classes-custom__text {
  flex: 1;
  color: #fff;
  text-align: left;
}

.classes-custom__text h2 {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.05;
  margin-bottom: 4px;
}

.classes-custom__text .section-subtitle {
  font-size: 15px;
  margin-bottom: 22px;
  opacity: 0.96;
}

.classes-custom__text p {
  font-size: 15px;   /* was 13.5px */
  line-height: 1.8;
  margin-bottom: 10px;
  max-width: 460px;
  opacity: 0.95;
}

.classes-custom__image {
  flex: 0 0 48%;
  position: relative;
  align-self: stretch;
}

.classes-custom__image img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.85); /* −15% visual size; scale from center so vertical centre holds */
  transform-origin: center center;
  bottom: auto;
  right: 60px;
  height: 429px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center right;
}

/* ============================================================
   COMING SOON
   ============================================================ */
.coming-soon {
  min-height: calc(100vh - 74px);
  background: var(--ivory-mist);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
}

.coming-soon__squiggle-tl {
  position: absolute;
  top: -10px; left: -10px;
  width: 360px;
  pointer-events: none;
}

.coming-soon__squiggle-br {
  position: absolute;
  bottom: -10px; right: -10px;
  width: 320px;
  pointer-events: none;
  transform: rotate(180deg);
}

.coming-soon h1 {
  font-family: var(--font-display);
  font-size: 80px;
  color: var(--charcoal);
  margin-bottom: 12px;
  position: relative; z-index: 2;
}

.coming-soon__tag {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--wild-strawberry);
  margin-bottom: 20px;
  position: relative; z-index: 2;
}

.coming-soon p {
  font-size: 17px;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 40px;
  position: relative; z-index: 2;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero {
  background: var(--ivory-mist);
  position: relative;   /* containing block for all absolute children */
  overflow: hidden;     /* clips squiggle at edges */
  height: 218px;        /* 272px × 0.8 — another 20% shorter */
}

/* Blue squiggle — top right corner */
.contact-hero__squiggle {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;   /* spans the full section — never cropped at any viewport width */
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* Headline — dead center of the cream section */
.contact-hero h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--font-display);
  font-size: 60px;
  color: var(--charcoal);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}

.contact-body {
  background: #fff;
  padding: 60px 0 72px;
  flex: 1; /* grows to fill remaining viewport height — pushes footer to bottom */
}

.contact-body .inner {
  max-width: 680px;
}

.contact-social { margin-bottom: 52px; }

.contact-social__label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 16px;
}

.contact-social__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--charcoal);
  transition: color 0.2s;
}

.contact-social__link:hover { color: var(--wild-strawberry); }

.contact-social__icon {
  width: 32px;
  height: 32px;
  background: var(--wild-strawberry);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.contact-social__link:hover .contact-social__icon { background: #e04370; }
.contact-social__icon svg { width: 18px; height: 18px; fill: #fff; }

.contact-form h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--charcoal);
  margin-bottom: 28px;
}

.form-group { margin-bottom: 20px; }

.form-group label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e5e0d5;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--charcoal);
  background: #fff;
  transition: border-color 0.2s;
  outline: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--amber-glow); }

.form-group textarea { min-height: 140px; resize: vertical; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.65);
  text-align: center;
  padding: 24px 60px;
  font-size: 13px;
}

/* ============================================================
   RESPONSIVE — TABLET  ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .inner,
  .home-hero__inner,
  .creativity__inner { padding-left: 40px; padding-right: 40px; }

  .nav-logo img { height: 105px; } /* slightly smaller on tablet */

  .home-hero__text h1 { font-size: 52px; }
  .about-hero h1 { font-size: 44px; }
  .why__text h2 { font-size: 38px; }
  .contact-hero h1 { font-size: 48px; }

  /* ── Image scaling safety net ≤ 1024px ──────────────────────
     Large hero / section images that use max-width: none are
     capped at 90vh so they can't overflow on short-screen iPads.
     height: auto is NOT applied here — these images are absolutely
     positioned for bottom-flush layout and need explicit heights.
     max-width: 100% is already on the global img reset.
  ──────────────────────────────────────────────────────────── */
  .home-hero__image img,
  .classes-hero__image img,
  .laura__image-wrap img,
  .creativity__image img {
    max-height: 90vh; /* prevents overflow on landscape / short-screen tablets */
  }

  /* Rocket girl — tablet: scale down to section height so she's always fully visible */
  .home-hero__image img {
    height: 520px;      /* matches section height exactly — no overflow, no crop */
    max-width: 100%;    /* restore from desktop max-width:none — never bleeds past column */
    object-fit: contain;
    object-position: bottom center;
  }

  /* ── Classes — Tablet / iPad ──
     Goal: no image bleed into text, comfortable column ratios,
     text and images stay fully visible at 768–1024px.
  ────────────────────────────────────────────────── */

  /* Hero */
  .classes-hero                  { height: 460px; }   /* slightly tighter on tablet */
  .classes-hero__text h1         { font-size: 46px; }

  /* Section headings */
  .classes-private__text h2,
  .classes-workshops__text h2,
  .classes-custom__text h2       { font-size: 36px; }
  .classes-private__text p,
  .classes-workshops__text p,
  .classes-custom__text p        { font-size: 15px; } /* matches desktop base */

  /* Private — narrower image column so text never gets squeezed */
  .classes-private               { height: 540px; }   /* slightly reduced for tablet */
  .classes-private .inner        { padding-bottom: 64px; } /* matches Workshops 64px bottom padding on tablet */
  .classes-private__image        { flex: 0 0 38%; }   /* was 46% — give text more room */
  .classes-private__image img    {
    height: auto;                /* let image shrink — no forced fixed height */
    max-height: 320px;           /* cap height so it doesn't overwhelm the column */
    max-width: 85%;              /* never bleeds into text column */
    object-fit: contain;         /* whole image visible, no crop */
    object-position: center;
  }

  /* Workshops — tighter gap and frame */
  .classes-workshops             { padding: 64px 0; }
  .classes-workshops .inner      { gap: 44px; }
  .classes-workshops__frame      { flex: 0 0 30%; }

  /* Custom — narrower image column, reduced image height */
  .classes-custom                { height: 540px; }
  .classes-custom .inner         { padding-bottom: 64px; } /* matches Workshops 64px bottom padding on tablet */
  .classes-custom__image         { flex: 0 0 40%; }   /* was 48% */
  .classes-custom__image img     {
    height: auto;                /* let image shrink — no forced fixed height */
    max-height: 320px;           /* cap height so it doesn't overwhelm the column */
    max-width: 85%;              /* never bleeds into text column */
    object-fit: contain;         /* whole image visible, no crop */
    object-position: center;
  }
}

/* ============================================================
   RESPONSIVE — iPad Air  768–880px
   Extra breathing room between images and text columns.
   Sits between the ≤1024 tablet block and ≤768 mobile block.
   ============================================================ */
@media (max-width: 880px) and (min-width: 769px) {
  .classes-private .inner,
  .classes-custom  .inner { gap: 2rem; }           /* explicit gap between text and image columns */

  .classes-private__image { padding-left: 2rem; }  /* push brushes column contents rightward */
  .classes-custom__image  { padding-left: 2rem; }  /* push stamps column contents rightward */
}

/* ============================================================
   RESPONSIVE — MOBILE  ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Nav */
  .nav         { position: relative; } /* disable sticky on hamburger views */
  .nav__inner { padding: 10px 20px; justify-content: space-between; }
  .nav-links  { display: none; }
  .hamburger  { display: flex; }
  .nav-logo img { height: 60px; } /* 52px × 1.15 — +15% on mobile */

  /* Shared inner padding */
  .inner,
  .home-hero__inner,
  .creativity__inner { padding-left: 24px; padding-right: 24px; }

  /* Home Hero */
  .hero-spacer            { display: none; }
  .home-hero              { height: auto; min-height: 0; overflow: hidden; clip-path: none; } /* revert to auto on mobile; plain overflow clip */
  .home-hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 36px;
    height: auto;
  }
  .home-hero__text        { flex: none; padding-bottom: 20px; padding-top: 0; }
  .home-hero__text h1     { font-size: 42px; }
  .home-hero__image       { flex: none; width: 100%; justify-content: center; }
  .home-hero__image img   { height: 320px; max-width: 100%; }

  /* Intro */
  .home-intro { padding: 36px 0 24px; }
  .home-intro p { font-size: 14px; }

  /* Services */
  .services { padding: 60px 0 44px; } /* top padding accounts for first icon overflow */
  .cards-row { flex-direction: column; gap: 60px; } /* extra gap so icons don't overlap card below */

  /* Creativity */
  .creativity__squiggle   { display: none; }
  .creativity             { position: relative; height: auto; }
  .creativity__inner {
    flex-direction: column;
    text-align: center;
    padding-top: 36px;
    padding-bottom: 0;
    height: auto;
  }
  .creativity__image      { position: static; width: 100%; flex: none; margin-top: 8px; order: 1; } /* order: 1 pushes image below text */
  .creativity__image img  { position: static; width: 100%; height: auto; max-width: 100%; object-fit: contain; object-position: bottom center; }
  .creativity__text       { padding-left: 0; padding-top: 0; padding-bottom: 0; order: 0; } /* order: 0 keeps text on top */
  .creativity__text p     { font-size: 16px; }

  /* About Hero */
  .about-hero             { height: 154px; } /* 192px × 0.8 */
  .about-hero__dot        { left: 24px; bottom: 20px; }
  .about-hero h1          { font-size: 34px; white-space: normal; width: 88%; }

  /* Laura */
  .laura                  { height: auto; }
  .laura .inner {
    flex-direction: column;
    height: auto;
    padding-top: 44px;
    padding-bottom: 44px;
    gap: 24px;
  }
  .laura__image-wrap      { flex: none; width: 100%; max-width: 280px; margin: 0 auto; align-self: auto; }
  .laura__image-wrap img  { position: static; transform: none; height: auto; max-height: 320px; width: 100%; max-width: 100%; }
  .laura__text            { padding: 0; }
  .laura__squiggle        { display: none; }
  .laura__text p          { font-size: 14px; }

  /* Why */
  .why__squiggle          { display: none; }
  .why                    { height: auto; }
  .why .inner {
    flex-direction: column;
    height: auto;
    padding-top: 44px;
    padding-bottom: 0;
    gap: 0;
  }
  .why__image             { position: static; width: 100%; max-width: 100%; margin: 24px 0 0; align-self: auto; } /* in flow — section grows to fit; image is last so it sits at section bottom */
  .why__image img         { position: static; width: 100%; height: auto; max-width: 100%; object-fit: contain; object-position: bottom center; }
  .why__text              { padding: 0; }
  .why__text h2           { font-size: 34px; }
  .why__text p            { font-size: 14px; }

  /* CTA */
  .cta-section            { padding: 44px 0; }
  .cta-section p          { font-size: 15px; padding: 0 24px; }

  /* Coming Soon */
  .coming-soon            { padding: 52px 24px; }
  .coming-soon h1         { font-size: 52px; }
  .coming-soon__tag       { font-size: 26px; }
  .coming-soon p          { font-size: 15px; }

  /* Contact */
  .contact-hero           { height: 154px; } /* 192px × 0.8 */
  .contact-hero h1        { font-size: 38px; white-space: normal; width: 88%; }
  .contact-body           { padding: 40px 0 52px; }

  /* Footer */
  .footer                 { padding: 20px 24px; }

  /* ── Classes Hero ── */
  .classes-hero           { height: auto; min-height: 0; clip-path: none; overflow: hidden; }
  .classes-hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 36px;
    height: auto;
  }
  .classes-hero__dot      { display: none; }
  /* text on top, image below */
  .classes-hero__image {
    flex: none;
    order: 1;         /* pushes image below text */
    width: 100%;
    align-self: auto;
    position: static;
    height: 300px;    /* fixed height container keeps image bottom-anchored */
    position: relative;
  }
  .classes-hero__image img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    max-width: 100%;
    object-position: bottom center;
  }
  .classes-hero__text {
    flex: none;
    order: 0;         /* keeps text on top */
    width: 100%;
    padding-bottom: 20px;
    padding-top: 0;
  }
  .classes-hero__text h1  { font-size: 40px; }

  /* ── Classes Private (pink) ── */
  .classes-private        { height: auto; }
  .classes-private__squiggle { display: none; }
  .classes-private .inner {
    flex-direction: column;
    height: auto;
    padding-top: 44px;
    padding-bottom: 52px; /* matches Workshops 52px bottom padding on mobile */
    text-align: left;
  }
  .classes-private__text  { text-align: left; }
  .classes-private__text p { max-width: 100%; }
  .classes-private__image {
    flex: none;
    order: -1;             /* image on top, above text */
    width: 100%;
    height: auto;          /* grows to fit image — no fixed crop box */
    position: static;      /* out of absolute-positioning context */
    align-self: auto;
    margin-top: 0;
    padding: 0 0 24px;     /* breathing room below only */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .classes-private__image img {
    position: static;          /* back in normal flow — no bottom-anchor */
    height: auto;
    width: auto;
    max-width: 85%;
    max-height: 220px;         /* cap so it never overwhelms text */
    object-fit: contain;       /* whole image visible, no cropping */
    object-position: center;
    transform: none;           /* clear desktop translateY(-50%) */
    top: auto; bottom: auto; right: auto; /* clear any inherited offsets */
  }

  /* ── Classes Workshops (white) ── */
  .classes-workshops      { padding: 52px 0 52px; }
  .classes-workshops .inner {
    flex-direction: column;
    gap: 32px;
  }
  .classes-workshops__frame {
    flex: none;
    width: 72%;
    max-width: 260px;
    margin: 0 auto;
  }
  .classes-workshops__text h2  { font-size: 36px; }
  .classes-workshops__text p   { font-size: 14px; }

  /* ── Classes Custom (blue) ── */
  .classes-custom         { height: auto; }
  .classes-custom__squiggle { display: none; }
  .classes-custom .inner {
    flex-direction: column;
    height: auto;
    padding-top: 44px;
    padding-bottom: 52px; /* matches Workshops 52px bottom padding on mobile */
    text-align: left;
  }
  .classes-custom__text   { text-align: left; }
  .classes-custom__text p { max-width: 100%; }
  .classes-custom__image {
    flex: none;
    order: -1;             /* image on top, above text */
    width: 100%;
    height: auto;          /* grows to fit image — no fixed crop box */
    position: static;      /* out of absolute-positioning context */
    align-self: auto;
    margin-top: 0;
    padding: 0 0 24px;     /* breathing room below only */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .classes-custom__image img {
    position: static;          /* back in normal flow — no bottom-anchor */
    height: auto;
    width: auto;
    max-width: 85%;
    max-height: 220px;         /* cap so it never overwhelms text */
    object-fit: contain;       /* whole image visible, no cropping */
    object-position: center;
    transform: none;           /* clear desktop translateY(-50%) */
    top: auto; bottom: auto; right: auto; /* clear any inherited offsets */
  }
}