/* =============================================================
   ATELIER M. — standalone stylesheet (rebuilt from the Squarespace site)
   -------------------------------------------------------------
   Colour tokens, type scale and section themes are copied from the
   live site's computed values. Section backgrounds:
     light           #f3f2f0  (text #18191e)
     bright          #f0ebe7  (text #000)
     bright-inverse  #18191e  (text #f0ebe7)
     white           #ffffff
     sand            #f4f2ec  (custom-CSS override on some sections)
     paper           #faf7f3  (sticky header)
   ============================================================= */

/* ---------- Fonts (your uploaded files — see README) ---------- */
@font-face {
  font-family: 'atelierm';
  src: url('../assets/fonts/AbovetheBeyondSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'atelierm script';
  src: url('../assets/fonts/Milton_Two_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'atelier garamond';
  src: url('../assets/fonts/AGaramondPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #18191e;
  --black: #000;
  --cream: #f0ebe7;
  --stone: #f3f2f0;
  --sand: #f4f2ec;
  --paper: #faf7f3;
  --white: #fff;
  --line: #94876e;
  --grey: #424242;
  --rule: #d8d8d8;

  --font-display: 'atelierm', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-script: 'atelierm script', 'Pinyon Script', 'Snell Roundhand', cursive;
  --font-body: 'atelier garamond', 'adobe-garamond-pro', 'EB Garamond', Garamond, Georgia, serif;
  --font-ui: 'acumin-pro', 'Acumin Pro', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Squarespace fluid type: value * (1rem) scaled by viewport */
  --fs-h1: clamp(2rem, 1.3rem + 1.1vw, 2.5rem);     /* ~35px @1440 */
  --fs-h2: clamp(1.75rem, 1.2rem + 1.05vw, 2.4rem); /* ~33px @1440 */
  --fs-h3: clamp(1.15rem, 0.95rem + 0.45vw, 1.5rem);/* ~21px @1440 */
  --fs-h4: clamp(1rem, 0.9rem + 0.2vw, 1.15rem);    /* ~17px @1440 */
  --fs-p:  clamp(1.05rem, 0.95rem + 0.25vw, 1.2rem);/* ~18px @1440 */
  --fs-small: 0.875rem;

  --header-h: 52px;
  --gutter: 4vw;
  --section-pad: clamp(3.5rem, 6.6vw, 7rem);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { font-variant-ligatures: none; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-p);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, h1, h2, h3 { hyphens: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.34;
  margin: 0 0 0.6em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.38; }
h4 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.4;
  margin: 0 0 0.6em;
}
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

/* Script accents inside headings — copied from the site's custom CSS:
   h2 em { font-family:'atelierm script'; font-size:80px; } */
h2 em, h2 i {
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(3rem, 2.2rem + 2.8vw, 5rem);
  -webkit-text-stroke: .15px currentColor;
}
h3 em, h3 i {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05em;
}
h1 em { font-style: italic; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fs-small);
}

/* Text link used for CONTACT / EXPLORE SITE / LISTEN ON SPOTIFY */
.textlink {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .3s ease;
}
.textlink:hover { opacity: .6; }

/* Buttons: Squarespace "outline / square" primary button in Acumin */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .89rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.05em 2em;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
/* Hover: outline buttons fill charcoal with white text (as on the old site) */
.btn:hover { background: #343434; border-color: #343434; color: #fff; }
.btn--solid {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn--solid:hover { background: var(--ink); color: var(--cream); opacity: .9; }

/* ---------- Layout helpers ---------- */
.container {
  width: min(1400px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.section {
  position: relative;
  padding: var(--section-pad) 0;
}
.section--light  { background: var(--stone); color: var(--ink); }
.section--bright { background: var(--cream); color: var(--black); }
.section--dark   { background: var(--ink);   color: var(--cream); }
.section--white  { background: var(--white); color: var(--ink); }
.section--sand   { background: var(--sand);  color: var(--ink); }
.section--center { text-align: center; }

.section--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section--bg > .container { position: relative; z-index: 1; }
.section--bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: var(--overlay, .31);
}

/* Site animation — matches the old site's Squarespace setting exactly:
   Animation style "Fade", curve "ease", complexity "detailed".
   Every heading, paragraph, image and list item fades 0 → 1 over 1.5s as it
   enters the screen, staggered across 0.2s; header items fade in on load.
   js/main.js decides which elements animate and adds .fx / .fx-in. */
.fx { opacity: 0; }                                   /* hidden instantly… */
.fx.fx-in { opacity: 1; transition: opacity 1.5s ease; } /* …and only the fade-in animates */
/* Hide content for the split second before main.js runs, so nothing flashes
   visible-then-hidden. Safety net: shows everything after 2.5s regardless. */
html.fx-wait main,
html.fx-wait footer,
html.fx-wait .header > * { visibility: hidden; animation: fx-unhide 0s linear 2.5s forwards; }
@keyframes fx-unhide { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .fx { opacity: 1; transition: none; }
  html { scroll-behavior: auto; }
}

.visually-hidden {
  position: absolute !important;
  left: 0; top: 0;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0 !important; padding: 0 !important; margin: -1px !important;
  opacity: 0;
}

/* =============================================================
   HEADER
   Transparent over dark heroes (white logo), becomes a fixed paper
   bar with the dark logo once scrolled (= the site's ".shrink" CSS).
   ============================================================= */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(16px, 2vw, 30px);
  background: transparent;
  color: var(--white);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.header__logo {
  grid-column: 2;
  display: block;
  line-height: 0;
}
.header__logo img { height: 24px; width: auto; }
.header__logo .logo-dark { display: none; }

.header__nav {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 1.3em;
  margin: 0; padding: 0;
  list-style: none;
}
.header__nav a {
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.header__nav a:hover,
.header__nav a[aria-current="page"] { border-bottom-color: currentColor; }

/* Scrolled / solid state, and pages without a dark hero */
.header.is-solid,
body.header-solid .header {
  background: var(--paper);
  color: var(--black);
  border-bottom-color: var(--grey);
}
.header.is-solid .logo-white,
body.header-solid .header .logo-white { display: none; }
.header.is-solid .logo-dark,
body.header-solid .header .logo-dark { display: block; }
/* Pages with a light photo behind the header (links): see-through with dark
   text at the top, then the same solid bar once scrolled */
body.header-dark .header { color: var(--black); }
body.header-dark .header .logo-white { display: none; }
body.header-dark .header .logo-dark { display: block; }
body.header-nologo .header__logo { visibility: hidden; }

/* Burger (mobile) */
.header__burger {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: none;
  width: 34px; height: 34px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  color: inherit;
}
/* Two thin lines, as on the old site (Squarespace "double line" icon, 1px) */
.header__burger { flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.header__burger span {
  display: block;
  height: 1px; width: 26px;
  background: currentColor;
  transition: transform .3s ease;
}
.header__burger span:nth-child(2) { display: none; }

.header__burger:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; }

/* Phones: matches the old site's mobile header — logo centred in the space
   left of the menu icon, 84px tall at the top of the page, 68px once scrolled,
   and a full-screen white menu with the links centred. */
@media (max-width: 820px) {
  :root { --header-h: 68px; }
  .header {
    grid-template-columns: 1fr 88px;
    padding: 0;
    transition: background .35s ease, color .35s ease, border-color .35s ease, height .35s ease;
  }
  body:not(.header-solid):not(.nav-open) .header:not(.is-solid) { height: 84px; }
  .header__logo { grid-column: 1; justify-self: center; }
  .header__logo img { height: 23px; }
  .header__burger { display: flex; grid-column: 2; justify-self: center; }
  .header__nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.55rem;
    padding: 37px 0 0;
    background: var(--white);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .header__nav a { font-size: 1.72rem; }
  .header__nav a[aria-current="page"] { border-bottom-color: transparent; }
  body.nav-open .header__nav { opacity: 1; visibility: visible; transition: opacity .35s ease; }
  body.nav-open .header { background: var(--white); color: var(--ink); border-bottom-color: transparent; }
  body.nav-open .header .logo-white { display: none; }
  body.nav-open .header .logo-dark { display: block; }
  body.nav-open .header__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  body.nav-open .header__burger span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
  body.nav-open { overflow: hidden; }
}

/* =============================================================
   HOME — hero video band
   ============================================================= */
.hero-video {
  position: relative;
  min-height: clamp(380px, 41.5vw, 600px);
  background: var(--ink);
  overflow: hidden;
}
.hero-video video,
.hero-video .hero-video__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);      /* the live clip is black & white */
}
.hero-video::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(24,25,30,.25), rgba(24,25,30,.05) 40%, rgba(24,25,30,.15));
}

/* =============================================================
   HOME — intro (SOULFUL & CONTEMPORARY)
   ============================================================= */
.intro { padding-top: clamp(3rem, 5.7vw, 82px); padding-bottom: clamp(3rem, 14vw, 202px); overflow: hidden; }
.intro__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 8rem);
  align-items: start;
  padding: 0 clamp(0px, 6vw, 110px);
}
.intro__text { padding-top: .5rem; }
.intro__text h1 { max-width: 560px; }
.intro__text p { max-width: 500px; }

.slideshow {
  position: relative;
  overflow: hidden;
  background: #dcd8d2;
}
.slideshow img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.slideshow img.is-active { opacity: 1; }
.intro__slideshow { aspect-ratio: 395 / 518; width: min(100%, 395px); }
/* The "ATELIER M." wordmark, as on the old site: two identical PNGs in the
   same spot — cream underneath, black on top. The cream fades in first; once
   the wordmark scrolls up to the middle of the screen the black fades in over
   it, so the letters go from beige to black (passing through grey). It sits
   above the bottom edge of the portrait. Timing lives in js/main.js. */
.intro__watermark {
  position: relative; z-index: 2;
  pointer-events: none;
  display: grid;
  width: 87.9vw;
  max-width: 1800px;
  margin: clamp(-62px, -4.3vw, -1.5rem) 0 0 2.08vw;
}
.intro__watermark img { grid-area: 1 / 1; width: 100%; height: auto; }
@media (max-width: 820px) {
  .intro__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro__slideshow { margin-left: 0; width: min(100%, 340px); }
  .intro__text h1 { max-width: none; }
  .intro__watermark { width: 96vw; margin: 2rem 0 0 2vw; }
}

/* =============================================================
   HOME — "boutique digital agency" band (wave background)
   ============================================================= */
.agency { --overlay: .31; min-height: clamp(360px, 30vw, 440px); display: grid; align-items: center; text-align: center; }
.agency h2 { margin-bottom: .9em; }
.agency h3 { max-width: 68vw; margin-inline: auto; font-size: var(--fs-h3); }
.agency h3 em { font-size: 1.05em; }

/* =============================================================
   HOME — press logos
   ============================================================= */
.press { border-top: 1px solid var(--line); text-align: center; }
.press h2 { margin-bottom: clamp(2rem, 5vw, 4.5rem); }
.press > .container { width: min(1440px, 100% - 4vw); }
.press__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.press__row li { display: flex; justify-content: center; }
.press__row img { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; object-fit: contain; }
@media (max-width: 820px) {
  .press__row { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   HOME — playlist (split: dark slideshow / cream list)
   ============================================================= */
.playlist { padding: 0; display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); }
.playlist__media {
  background: var(--ink);
  padding: clamp(3rem, 8vw, 8rem) clamp(1.5rem, 6vw, 5.5rem);
  display: flex; align-items: center;
}
.playlist__slideshow { aspect-ratio: 570 / 478; width: min(100%, 570px); }
.playlist__list {
  background: var(--cream);
  color: var(--black);
  padding: clamp(3rem, 8vw, 8rem) clamp(1.5rem, 8.8vw, 8rem);
  display: flex; flex-direction: column; justify-content: center;
}
.playlist__list h3 { margin-bottom: 1.8em; }
.playlist__list ol { list-style: none; margin: 0 0 2.5em; padding: 0; counter-reset: track; }
.playlist__list li { counter-increment: track; }
.playlist__list li::before { content: counter(track) ". "; }
.playlist__list h4 { margin: 0; }
@media (max-width: 820px) {
  .playlist { grid-template-columns: 1fr; }
}

/* =============================================================
   HOME — mission
   ============================================================= */
.mission { text-align: center; }
.mission p { margin-bottom: 2.5em; }
.mission h2 { max-width: 64vw; margin-inline: auto; }

/* =============================================================
   Instagram grid (static tiles — see README to wire a live feed)
   ============================================================= */
.instagram { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.instagram__handle { display: inline-block; margin-bottom: 2.5rem; }
.ig-grid {
  display: grid;
  gap: 20px;
  list-style: none; margin: 0; padding: 0;
}
.ig-grid--4 { grid-template-columns: repeat(4, 1fr); max-width: 920px; margin-inline: auto; }
.ig-grid--6 { grid-template-columns: repeat(6, 1fr); }
.ig-grid a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #2a2b31;
}
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ig-grid a:hover img { transform: scale(1.04); }
.ig-grid a::after {
  /* play triangle, as on the live reels */
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-40%, -50%);
  border-left: 18px solid rgba(255,255,255,.95);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
@media (max-width: 820px) {
  .ig-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ig-grid--6 { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   HOME — featured brands
   ============================================================= */
.featured { text-align: center; }
.featured__intro h2 { margin-bottom: .2em; }
.featured__intro p { max-width: 70vw; margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.featured > .container, .footer > .container { width: min(1440px, 100% - 4vw); }  /* 2vw gutter, as live */
.featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 627fr) minmax(0, 280fr) minmax(0, 280fr);
  gap: clamp(1.5rem, 4.86vw, 70px);
  align-items: start;
  max-width: 1327px;
}
.featured__video { aspect-ratio: 627 / 381; background: #d9d5cf; overflow: hidden; }
.featured__video video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.brand { text-align: center; }
.brand__img {
  display: block;
  aspect-ratio: 400 / 537;
  overflow: hidden;
  margin-bottom: 1.6rem;
  background: #d9d5cf;
}
.brand__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter .4s ease-in-out, transform .4s ease-in-out;
}
.brand__img:hover img { filter: none; transform: scale(1.04); }
.brand h4 { margin: 0 0 .4em; }
.brand h4.brand__name { text-transform: uppercase; margin-bottom: 1.2em; }
@media (max-width: 820px) {
  .featured__grid { grid-template-columns: 1fr 1fr; }
  .featured__video { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .featured__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   HOME — love notes (testimonial carousel)
   ============================================================= */
.notes { text-align: center; }
.notes h2 { margin-bottom: 2em; }
.carousel { position: relative; max-width: 64vw; margin-inline: auto; }
.carousel__track { position: relative; min-height: 9rem; }
.carousel__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.carousel__slide.is-active { position: relative; opacity: 1; visibility: visible; }
.carousel__slide blockquote { margin: 0; font-size: .95rem; line-height: 1.7; }
.carousel__slide cite { display: block; font-style: normal; margin-top: 1.4em; font-size: .95rem; }
.carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 8vw, 7rem);
  margin-top: 3.5rem;
}
.carousel__arrow {
  background: none; border: 0; padding: 10px; cursor: pointer; color: inherit; line-height: 0;
  transition: opacity .3s ease;
}
.carousel__arrow:hover { opacity: .6; }
.carousel__arrow svg { width: 44px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1; }
.carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 1.5rem; }
.carousel__dots button {
  width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0;
  background: currentColor; opacity: .3; cursor: pointer;
}
.carousel__dots button[aria-selected="true"] { opacity: 1; }

/* =============================================================
   Services ("THIS IS WHAT WE DO") — home + portfolio
   ============================================================= */
.services { text-align: center; }
.services__intro h2 { max-width: 82vw; margin-inline: auto; }
.services__intro .eyebrow { margin-bottom: 1.6em; }
.services__intro .regions { font-style: italic; margin-top: 1.2em; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.services--uppercase h2 { text-transform: uppercase; max-width: 56vw; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 8.8vw, 127px);
  align-items: start;
  padding: 0 clamp(0px, 2vw, 30px);
}
.service__img {
  aspect-ratio: 338 / 450;
  overflow: hidden;
  margin-bottom: 2.4rem;
  background: #d9d5cf;
}
.service__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.service h3 { text-transform: uppercase; margin-bottom: .9em; }
.service h4 { margin-bottom: 1.4em; }
@media (max-width: 820px) {
  .services__grid { grid-template-columns: 1fr; gap: 3rem; max-width: 420px; margin-inline: auto; }
}

/* =============================================================
   FOOTER ("THE WORLD OF ATELIER M.")
   ============================================================= */
.footer { background: var(--ink); color: var(--cream); padding-top: var(--section-pad); padding-bottom: 2.5rem; }
.footer h2 { text-align: center; margin-bottom: 1.5em; }
.footer__seal { display: block; width: 104px; margin: 2.2rem auto 0; opacity: .9; }
.footer hr { border: 0; border-top: 1px solid rgba(240,235,231,.5); margin: 1.5rem 0 2rem; }
.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  font-size: .95rem;
}
.footer__legal { text-align: center; display: flex; flex-direction: column; gap: .25em; }
.footer__legal a { text-decoration: none; border-bottom: 1px solid currentColor; }
.footer__social { justify-self: end; line-height: 0; }
.footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 640px) {
  .footer__bottom { grid-template-columns: 1fr; text-align: center; }
  .footer__social { justify-self: center; }
}

/* =============================================================
   PORTFOLIO
   ============================================================= */
.portfolio { padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)); }
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4.9vw, 4.5rem) clamp(1.5rem, 4.9vw, 4.5rem);
  align-items: start;
}
.portfolio__label {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
.portfolio__label h1 { margin-bottom: .4em; letter-spacing: .01em; }
.portfolio__label h2 em { font-size: clamp(2.6rem, 1.8rem + 2.2vw, 4rem); }
.project { display: block; }
.project__img {
  position: relative;
  aspect-ratio: 395 / 340;
  overflow: hidden;
  background: #d9d5cf;
  margin-bottom: 1.6rem;
}
.project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.project:hover .project__img img { transform: scale(1.03); }
.project__img .project__logo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 20%;
  transform: none !important;
}
.project p { margin-bottom: .9em; }
.project h4 { font-style: italic; }
@media (max-width: 820px) {
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio__label { grid-column: 1 / -1; position: static; margin-bottom: 1rem; }
}
@media (max-width: 480px) {
  .portfolio__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   WORK WITH US
   ============================================================= */
.wwu-hero {
  --overlay: .36;
  min-height: 100vh;
  min-height: 100svh;
  display: grid; align-items: center; text-align: center;
  padding-top: var(--header-h);
}
.wwu-hero h2 { margin: 0; }
.wwu-hero__seal { width: clamp(120px, 11vw, 160px); margin: 2.4rem auto 2.6rem; }
.wwu-hero p { max-width: 39vw; margin: 1.6em auto 0; font-style: italic; }

.guide { text-align: center; }
.guide__lead { font-style: italic; margin-bottom: 1.6em; }
.guide h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.guide__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 8.8vw, 127px);
  align-items: start;
  text-align: left;
  padding: 0 clamp(0px, 6vw, 88px);
}
.guide__img { aspect-ratio: 511 / 715; overflow: hidden; background: #d9d5cf; }
.guide__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.guide__copy p { font-size: 1rem; }
.guide__copy h3 { text-transform: uppercase; margin: 2.6em 0 1.6em; }
@media (max-width: 820px) {
  .guide__grid { grid-template-columns: 1fr; }
  .guide__img { max-width: 420px; }
}

/* Form — styled like the Squarespace "solid / square / underline" fields */
.form { max-width: 520px; }
.form fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.form legend, .form .label {
  display: block;
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: .6em;
  color: var(--black);
}
.form .label .req { text-transform: none; font-size: .95em; opacity: .7; margin-left: .4em; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__field { margin-bottom: .5rem; }
.form__field small {
  display: block; font-family: var(--font-body); font-size: .95rem; margin-bottom: 2.4em;
}
.form__field small .req { opacity: .7; margin-left: .3em; }
.form input[type="text"],
.form input[type="email"],
.form select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: .6em 0;
  outline: none;
}
.form input:focus, .form select:focus { border-bottom-width: 2px; }
.form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M1 1l9 9 9-9' fill='none' stroke='%2318191e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
  padding-right: 32px;
}
.form .check { display: flex; align-items: center; gap: .6em; margin: 1rem 0 2.2rem; font-size: .95rem; }
.form .check input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); }
.form button { margin-top: .6rem; }
.form__status { margin-top: 1.2rem; font-size: 1rem; }
.form__status.is-error { color: #a33; }
/* "YOU'RE IN" panel that replaces the guide form after submitting */
.form-success { max-width: 520px; outline: none; }
.form-success[hidden] { display: none; }
.form-success__title { text-transform: uppercase; margin-bottom: .5em; }
.form-success__lead { font-size: 1.1rem; margin-bottom: 1.6em; }
.form-success p { font-size: 1rem; }
.form-success .btn { margin: .4rem 0 1.4rem; }
.form a { text-decoration: none; border-bottom: .5px solid currentColor; padding-bottom: 1px; color: inherit; }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink) !important; transition: background-color 9999s ease-in-out 0s; }
@media (max-width: 480px) { .form__row { grid-template-columns: 1fr; } }

.fine-art {
  --overlay: .25;
  min-height: clamp(300px, 36vw, 520px);
  display: grid; align-items: start; text-align: center;
  background-position: center 30%;
}
.fine-art h2 { margin: 0; }

/* =============================================================
   CAREERS
   ============================================================= */
.careers-hero {
  --overlay: .36;
  min-height: clamp(560px, 55vw, 790px);
  display: grid; align-items: center; text-align: center;
  padding-top: var(--header-h);
}
.careers-hero h2 { margin: 0; }
.careers-hero p { max-width: 48vw; margin: 1.6em auto 0; }

.opportunity h2 { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.opportunity__grid {
  display: grid;
  grid-template-columns: minmax(0, 395fr) minmax(0, 512fr);
  gap: clamp(2rem, 12.8vw, 185px);
  align-items: start;
  padding: 0 clamp(0px, 6vw, 88px) 0 clamp(0px, 10vw, 145px);
}
.opportunity__img { aspect-ratio: 395 / 518; overflow: hidden; background: #d9d5cf; }
.opportunity__img img { width: 100%; height: 100%; object-fit: cover; }
.opportunity__copy p { margin-bottom: 1.2em; }
@media (max-width: 820px) {
  .opportunity__grid { grid-template-columns: 1fr; }
  .opportunity__img { max-width: 420px; }
}

.openings { text-align: center; border-top: 1px solid var(--line); }
.openings__title { margin-bottom: .5em; }
.openings h2 + h2 { margin-bottom: 1.2em; }
.openings p { max-width: 62vw; margin-inline: auto; font-size: 1rem; }
.openings p + p { margin-top: 1.2em; }
.openings__cta { margin-top: 2.5rem; }

/* Modal (the Squarespace "lightbox" form) */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--stone);
  color: var(--ink);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) 2.5rem;
}
.modal__close {
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: inherit; padding: .4rem;
}
.modal__title { font-family: var(--font-body); font-size: 1.2rem; margin-bottom: 2rem; }
body.modal-open { overflow: hidden; }

/* Boxed variant of the form fields (the application form on the live site) */
.form--boxed input[type="text"],
.form--boxed input[type="email"],
.form--boxed input[type="tel"],
.form--boxed textarea,
.form--boxed select {
  width: 100%;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: .45em .6em;
  outline: none;
}
.form--boxed textarea { resize: vertical; }
.form--boxed .form__field { margin-bottom: 1.6rem; }
.form--boxed .form__field small { margin-bottom: .4em; }
.form--boxed input[type="file"] { display: block; font-family: var(--font-body); font-size: .95rem; margin-top: .5em; }
.form--boxed .check { margin: .6rem 0 1.8rem; }

/* =============================================================
   LINKS (link-in-bio page)
   ============================================================= */
/* The photo stays still while the page scrolls over it (the old site's
   parallax background), under a soft cream wash. clip-path keeps the fixed
   photo inside this section, and works on iPhone too. */
.links {
  position: relative;
  clip-path: inset(0);
  background: var(--cream);
  color: var(--black);
  text-align: center;
  padding: calc(var(--header-h) + 115px) 0 clamp(5rem, 9vw, 8rem);
}
.links__bg {
  position: fixed;
  inset: -8px;
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
}
.links__bg::after { content: ''; position: absolute; inset: 0; background: var(--cream); opacity: .6; }
.links > .container { position: relative; z-index: 1; }

.links h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.07rem); line-height: 1.15; margin: 0 0 24px; }
.links h2 em { font-size: 80px; line-height: 0; }
.links h4 { margin: 0 auto 15px; }
.links__buttons { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.links__buttons .btn { width: 280px; max-width: 100%; text-align: center; padding: 28px 1em; }

.links__nl { margin-top: 106px; }
.links__nl-title { font-family: var(--font-body); font-size: clamp(1.29rem, 1.2rem + .15vw, 1.42rem); line-height: 1.3; margin: 0 0 10px; }
.links__nl-sub { font-size: calc(var(--fs-h4) * .93); line-height: 1.75; }

.form--newsletter { max-width: 288px; margin: 52px auto 0; text-align: left; }
.form--newsletter input[type="email"] {
  width: 100%; font-family: var(--font-body); font-size: 1rem; line-height: 1.4; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 0 0 12px; outline: none;
}
.form--newsletter input[type="email"]::placeholder { color: var(--ink); opacity: 1; }
/* Subscribe: soft white fill, charcoal with white text on hover */
.form--newsletter .btn {
  display: block; width: calc(100% - 20px); margin: 9px auto 0; padding: 25px 1em; text-align: center;
  background: rgba(255, 255, 255, .4);
}
.form--newsletter .btn:hover { background: #343434; }
.form--newsletter .form__status { text-align: center; }

.links__elsewhere { margin-top: 150px; }
.links__elsewhere h2 { margin-bottom: 20px; }
.links__elsewhere h4 { margin-bottom: 17px; }
.links__social { display: inline-block; line-height: 0; }
.links__social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Phones — measured from the old site's mobile layout */
@media (max-width: 767px) {
  .links { padding-top: 168px; }
  .links > .container { width: calc(100% - 40px); }
  .links h2 { font-size: 1.6rem; line-height: 1.18; margin-bottom: 25px; }
  .links__intro h2 { max-width: 300px; margin-inline: auto; }
  .links__intro h4 { max-width: 280px; font-size: 1.04rem; margin-bottom: 24px; }
  .links__buttons { flex-direction: column; align-items: center; }
  .links__buttons .btn { padding: 22px 1em; }
  .links__nl { max-width: 322px; margin: 45px auto 0; }
  .links__nl-title { font-size: 1.29rem; margin-bottom: 13px; }
  .links__nl-sub { font-size: .98rem; }
  .form--newsletter .btn { width: calc(100% - 8px); }
  .links__elsewhere { margin-top: 112px; }
  .links__elsewhere h2 { margin-bottom: 14px; }
  .links__elsewhere h4 { max-width: 360px; font-size: 1.02rem; margin-bottom: 20px; }
}

/* Phones: text runs the full width, as in Squarespace's mobile layout */
@media (max-width: 767px) {
  .mission h2, .agency h3, .featured__intro p, .carousel, .services__intro h2,
  .services--uppercase h2, .wwu-hero p, .careers-hero p, .openings p { max-width: none; }
}

/* =============================================================
   POLICY PAGES
   ============================================================= */
.policy { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); }
.policy .container { max-width: 680px; }
.policy h2 { margin-bottom: 1.2em; }
.policy p, .policy li { font-size: 1rem; line-height: 1.8; }
.policy h4 { font-weight: 700; margin: 2.2em 0 1em; }
.policy ul { padding-left: 1.4em; margin: 0 0 1.5em; }
.policy li { margin-bottom: .4em; }
.policy .meta p { margin-bottom: .2em; }
.policy .meta { margin-bottom: 2em; }