/* ==========================================================================
   Bloom Decor & Photo — core stylesheet
   Palette: warm ivory paper, deep ink, antique gold, blush
   Type:    Cormorant Garamond (display) + Jost (interface)
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  --ink:        #17130F;
  --ink-soft:   #2A2320;
  --paper:      #FAF7F2;
  --paper-2:    #F933;              /* overridden below, kept for clarity */
  --paper-warm: #F3ECE2;
  --white:      #FFFFFF;
  --gold:       #B08D57;
  --gold-lt:    #D9C4A0;
  --gold-dim:   rgba(176, 141, 87, 0.14);
  --blush:      #EADFD8;
  --muted:      #7A6E66;
  --muted-lt:   rgba(250, 247, 242, 0.62);
  --line:       rgba(23, 19, 15, 0.12);
  --line-soft:  rgba(23, 19, 15, 0.07);
  --line-inv:   rgba(250, 247, 242, 0.16);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:      'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shell:   1240px;
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --r-sm: 2px;
  --r-md: 3px;
}
:root { --paper-2: #F3ECE2; }

/* --- Base ----------------------------------------------------------------- */
/* overflow-x lives on html, not body: setting it on body computes overflow-y
   to `auto` and turns body into its own scroll container. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.nav-open { overflow: hidden; }

/* Fine paper grain — reads as print stock rather than flat screen colour */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--gold); color: var(--paper); }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.25; }
em { font-style: italic; color: var(--gold); }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold); opacity: 0.55; flex: none; }
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after { content: ''; width: 34px; height: 1px; background: var(--gold); opacity: 0.55; flex: none; }

.lede { font-size: clamp(1.02rem, 1.35vw, 1.15rem); line-height: 1.8; color: var(--muted); max-width: 56ch; }
.lede.is-centered { margin-inline: auto; }

/* --- Layout --------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 900px; }
.section { padding-block: var(--section); }
.section--flush-top { padding-top: 0; }
.section-head { max-width: 62ch; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head h2 + .lede { margin-top: 1.4rem; }

.rule { height: 1px; background: var(--line-soft); border: 0; }

/* Dark inverted band */
.band-dark { background: var(--ink); color: var(--paper); }
.band-dark .lede { color: var(--muted-lt); }
.band-dark .eyebrow { color: var(--gold-lt); }
.band-dark .eyebrow::before,
.band-dark .eyebrow::after { background: var(--gold-lt); }
.band-warm { background: var(--paper-warm); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.1rem 2.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
  z-index: 0;
}
.btn > * , .btn { position: relative; }
.btn span { position: relative; z-index: 1; }
.btn:hover::before { transform: translateY(0); }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid::before { background: var(--gold); }
.btn--solid:hover { color: var(--ink); }

.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--paper); border-color: var(--ink); }

.btn--light { border-color: var(--line-inv); color: var(--paper); }
.btn--light::before { background: var(--paper); }
.btn--light:hover { color: var(--ink); border-color: var(--paper); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold::before { background: var(--paper); }
.btn--gold:hover { color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }
.btn-row.is-centered { justify-content: center; }

/* Understated text link with a gold rule that draws in on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease), color 0.3s var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; color: var(--gold); }
.link-arrow svg { width: 14px; height: 14px; transition: transform 0.45s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.band-dark .link-arrow { color: var(--paper); }

/* --- Header --------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem var(--gutter);
  transition: background-color 0.5s var(--ease), padding 0.5s var(--ease), border-color 0.5s var(--ease), color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Over-hero state: transparent, light text */
.site-head[data-mode='over'] { color: var(--paper); }
/* Over a photo the gold reads too dim, so the bloom lifts to the pale tint */
.site-head[data-mode='over']:not(.is-stuck) .brand-bloom { color: var(--gold-lt); }
/* Once scrolled (or on inner pages): solid paper */
.site-head.is-stuck,
.site-head[data-mode='solid'] {
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
  padding-block: 1rem;
}
.site-head.is-stuck .brand-bloom,
.site-head[data-mode='solid'] .brand-bloom { color: var(--gold); }

/* --- Brand lockup --------------------------------------------------------
   Letterspaced caps divided by a hairline rule, with the bloom beside the
   words in the header and above them in the footer. Built from live text
   rather than an image so it inherits the header's colour as that flips
   between the hero and the scrolled state, and stays crisp at any size. */
.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }

.brand-bloom { width: 25px; height: 25px; flex: none; color: var(--gold); }

.brand-lockup { display: flex; align-items: center; gap: 0.6rem; }

.brand-word {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  /* letter-spacing leaves a trailing gap after the last glyph; pull it back
     so the divider sits optically centred rather than pushed right */
  margin-right: -0.2em;
}

.brand-rule { width: 1px; height: 14px; background: currentColor; opacity: 0.32; flex: none; }

/* Stacked primary lockup — the full-strength version, used in the footer */
.lockup-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.lockup-stack .brand-bloom { width: 21px; height: 21px; }
.lockup-stack .brand-word { font-size: 1.4rem; }
.lockup-stack .brand-rule { width: 88px; height: 1px; opacity: 0.3; }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.nav a {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease), opacity 0.3s var(--ease);
  opacity: 0.82;
}
.nav a:hover { background-size: 100% 1px; opacity: 1; }
.nav a[aria-current='page'] { background-size: 100% 1px; opacity: 1; color: var(--gold); }

.head-cta { flex: none; }
.head-cta .btn { padding: 0.85rem 1.6rem; }
.site-head[data-mode='over']:not(.is-stuck) .head-cta .btn { border-color: var(--line-inv); color: var(--paper); }
.site-head[data-mode='over']:not(.is-stuck) .head-cta .btn::before { background: var(--paper); }
.site-head[data-mode='over']:not(.is-stuck) .head-cta .btn:hover { color: var(--ink); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0;
  cursor: pointer;
  position: relative;
  flex: none;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 25px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--paper);
  padding: 7rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
  visibility: hidden;
}
body.nav-open .drawer { transform: translateY(0); visibility: visible; }
.drawer-nav { display: flex; flex-direction: column; gap: 0.35rem; }
.drawer-nav a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.9rem);
  font-weight: 300;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  transition: color 0.3s var(--ease), padding-left 0.4s var(--ease);
}
.drawer-nav a:hover { color: var(--gold); padding-left: 0.6rem; }
.drawer-foot { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.drawer-foot a { color: var(--gold); }

/* --- Media slots (graceful when a photo hasn't been added yet) ------------- */
.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--paper-warm) 0%, var(--blush) 55%, var(--gold-lt) 100%);
  isolation: isolate;
}
/* The photo stays hidden until it genuinely loads, so a missing or
   still-pending file never flashes a broken-image icon.
   Scoped to .js so that with JavaScript disabled everything simply shows. */
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.7s var(--ease);
}
.js .media img { opacity: 0; }
.js .media.is-loaded img { opacity: 1; }
/* Ornament holds the space until a real photo arrives */
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.4s var(--ease);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58px 58px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2317130F' stroke-opacity='0.28' stroke-width='0.9'%3E%3Cpath d='M24 8c4 5 4 9 0 13-4-4-4-8 0-13z'/%3E%3Cpath d='M24 21c5-4 9-4 13 0-5 4-9 4-13 0z'/%3E%3Cpath d='M24 21c-5-4-9-4-13 0 5 4 9 4 13 0z'/%3E%3Cpath d='M24 21v19'/%3E%3Ccircle cx='24' cy='21' r='1.6'/%3E%3C/svg%3E");
}
.media.is-loaded::after, html:not(.js) .media::after { opacity: 0; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
}
.hero .media { position: absolute; inset: 0; z-index: 0; }
.hero .media img { transform: scale(1.06); animation: heroDrift 18s var(--ease) forwards; }
@keyframes heroDrift { to { transform: scale(1); } }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(23,19,15,0.82) 0%, rgba(23,19,15,0.34) 45%, rgba(23,19,15,0.42) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.hero h1 { max-width: 15ch; margin-bottom: 1.6rem; }
.hero h1 em { color: var(--gold-lt); }
.hero .lede { color: rgba(250, 247, 242, 0.8); max-width: 48ch; }
.hero .eyebrow { color: var(--gold-lt); }
.hero .eyebrow::before { background: var(--gold-lt); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-inv);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.72);
}
.hero-meta strong { color: var(--gold-lt); font-weight: 500; }

/* Page hero for inner pages.
   padding-block, never the padding shorthand — these elements are also
   .shell, and the shorthand would zero the inline gutter it sets, pushing
   the heading flush against the screen edge on phones. */
.page-hero { padding-block: clamp(9rem, 16vw, 13rem) clamp(3rem, 6vw, 5rem); }
.page-hero h1 { max-width: 16ch; margin-bottom: 1.5rem; }

/* --- Marquee -------------------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--line-soft);
  background: var(--paper-warm);
  overflow: hidden;
  padding-block: 1.15rem;
}
.marquee-track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.marquee-track > span {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-style: italic;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-track > span::after { content: '\2726'; font-size: 0.6rem; color: var(--gold); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* --- Stats ---------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.stat { background: var(--paper); padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem); text-align: center; }
.stat-num { font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 300; line-height: 1; color: var(--ink); }
.stat-num sup { font-size: 0.45em; color: var(--gold); top: -0.75em; }
.stat-label { font-size: 0.6875rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--muted); margin-top: 0.85rem; }

/* --- Services ------------------------------------------------------------- */
/* Three across so the six cards land as two clean rows, never an orphan. */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc {
  background: var(--paper);
  padding: clamp(2rem, 3.4vw, 2.9rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: background-color 0.5s var(--ease);
  min-height: 260px;
}
.svc:hover { background: var(--white); }
.svc-index { font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--gold); }
.svc h3 { margin-top: 0.2rem; }
.svc p { font-size: 0.92rem; color: var(--muted); line-height: 1.75; }
.svc-more { margin-top: auto; padding-top: 1.2rem; }
.svc::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.svc:hover::before { transform: scaleX(1); }

/* Detailed service rows (services page) */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line-soft);
}
.svc-row:last-child { border-bottom: 0; }
.svc-row .media { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.svc-row:nth-child(even) .media { order: -1; }
.svc-row h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 1.1rem; }
.svc-row p { color: var(--muted); }
.svc-list { list-style: none; margin-top: 1.6rem; display: grid; gap: 0.6rem; }
.svc-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; color: var(--muted); }
.svc-list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--gold); }

/* --- Editorial gallery ---------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
.work { position: relative; overflow: hidden; border-radius: var(--r-md); }
.work .media { width: 100%; height: 100%; }
.work:hover .media img { transform: scale(1.05); }
.work-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.35rem 1.2rem;
  background: linear-gradient(to top, rgba(23,19,15,0.72), transparent);
  color: var(--paper);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.work:hover .work-cap, .work:focus-within .work-cap { opacity: 1; transform: none; }
.work-cap h3 { font-size: 1.1rem; }
.work-cap span { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lt); }
/* Magazine rhythm — tall, wide, tall */
.work--tall { grid-column: span 2; aspect-ratio: 3 / 4; }
.work--wide { grid-column: span 4; aspect-ratio: 16 / 10; }
.work--sq   { grid-column: span 2; aspect-ratio: 1; }

[data-lightbox] { cursor: pointer; }
[data-lightbox]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Filterable gallery page */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filter {
  background: none;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.6rem 1.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.35s var(--ease);
}
.filter:hover { border-color: var(--gold); color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: clamp(0.6rem, 1.4vw, 1.1rem); }
/* Held at four across on wide screens: twelve tiles divide evenly into three
   rows, and each photo is larger than it would be at five. */
@media (min-width: 1600px) { .masonry { grid-template-columns: repeat(4, 1fr); } }
.masonry .work { aspect-ratio: 4 / 5; }
.masonry .work.is-hidden { display: none; }
.masonry .work:nth-child(6n + 1) { aspect-ratio: 4 / 3; }
.masonry .work:nth-child(6n + 4) { aspect-ratio: 1; }

/* --- Lightbox ------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(12, 10, 8, 0.94);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--r-md); }
.lightbox-cap { color: var(--muted-lt); text-align: center; margin-top: 1.25rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.lightbox-close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  border: 1px solid var(--line-inv);
  border-radius: 50%;
  background: none;
  color: var(--paper);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.35s var(--ease);
}
.lightbox-close:hover { background: var(--paper); color: var(--ink); }

/* --- Split feature (about / cta) ------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split .media { aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.split--reverse .media { order: -1; }

.values { list-style: none; display: grid; gap: 0; margin-top: 2.5rem; }
.values li { padding-block: 1.5rem; border-top: 1px solid var(--line-soft); }
.values li:last-child { border-bottom: 1px solid var(--line-soft); }
.values h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.values p { font-size: 0.9rem; color: var(--muted); }

/* --- Process -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem); }
.step { position: relative; padding-top: 2.25rem; border-top: 1px solid var(--line-inv); }
.step-num { position: absolute; top: 1.4rem; right: 0; font-family: var(--font-display); font-size: 2.6rem; color: var(--gold); opacity: 0.4; line-height: 1; }
.step h3 { margin-bottom: 0.7rem; }
.step p { font-size: 0.9rem; color: var(--muted-lt); line-height: 1.75; }

/* --- Testimonials --------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.quote { background: var(--paper); padding: clamp(2rem, 3.6vw, 3rem); display: flex; flex-direction: column; gap: 1.5rem; }
.quote-stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.28em; }
.quote blockquote { font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-style: italic; font-weight: 300; line-height: 1.45; }
.quote cite { font-style: normal; font-size: 0.6875rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--muted); margin-top: auto; }

/* --- Instagram band ------------------------------------------------------- */
.ig-band { text-align: center; }
.ig-handle { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 300; display: inline-block; transition: color 0.4s var(--ease); }
.ig-handle:hover { color: var(--gold); }

.ig-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 1.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ig-meta b { color: var(--ink); font-weight: 500; }

/* The Behold widget renders its own grid inside a custom element. It styles
   its internals from the Behold dashboard, so we only own the frame around
   it: width, rhythm, and a reserved height so the page doesn't jump while
   the feed loads. */
.ig-feed { margin-top: clamp(2.25rem, 4vw, 3rem); min-height: 220px; }
.ig-feed behold-widget { display: block; width: 100%; }
.ig-feed .lede { margin-inline: auto; }
/* Ad blockers routinely block social embeds. If the widget never renders,
   drop the reserved height and show a line of copy instead, so the section
   reads as finished rather than as a hole in the page. */
.ig-fallback { display: none; }
.ig-feed.is-unavailable { min-height: 0; }
.ig-feed.is-unavailable .ig-fallback { display: block; }
.ig-band .btn-row { margin-top: clamp(2rem, 3.5vw, 2.75rem); }

/* --- Contact / forms ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact-list { list-style: none; display: grid; gap: 0; }
.contact-list li { padding-block: 1.4rem; border-bottom: 1px solid var(--line-soft); }
.contact-list li:first-child { border-top: 1px solid var(--line-soft); }
.contact-key { font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.4rem; }
.contact-val { font-family: var(--font-display); font-size: 1.35rem; }
a.contact-val { transition: color 0.35s var(--ease); }
a.contact-val:hover { color: var(--gold); }

.form { display: grid; gap: 1.5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: grid; gap: 0.55rem; }
.field label { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0;
  font-size: 0.95rem;
  border-radius: 0;
  outline: none;
  transition: border-color 0.35s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: rgba(122, 110, 102, 0.55); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237A6E66'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 12px; padding-right: 24px; cursor: pointer; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-note { font-size: 0.8rem; color: var(--muted); }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .lede { margin-top: 1.4rem; }

/* --- Footer --------------------------------------------------------------- */
.site-foot { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); padding-bottom: 3.5rem; border-bottom: 1px solid var(--line-inv); }
.foot-brand .brand-bloom { color: var(--gold-lt); }
.foot-brand p { color: var(--muted-lt); font-size: 0.9rem; margin-top: 1.25rem; max-width: 34ch; }
.foot-col h4 { font-family: var(--font-ui); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-lt); font-weight: 500; margin-bottom: 1.35rem; }
.foot-col ul { list-style: none; display: grid; gap: 0.75rem; }
.foot-col a { font-size: 0.9rem; color: var(--muted-lt); transition: color 0.3s var(--ease); }
.foot-col a:hover { color: var(--paper); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-size: 0.75rem; color: rgba(250, 247, 242, 0.45); }

/* --- Scroll reveal --------------------------------------------------------
   Only hidden when JS is running to un-hide it — never a blank page. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay='1'] { transition-delay: 0.1s; }
.reveal[data-delay='2'] { transition-delay: 0.2s; }
.reveal[data-delay='3'] { transition-delay: 0.3s; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .work--wide { grid-column: span 6; }
  .work--tall, .work--sq { grid-column: span 3; }
}

@media (max-width: 860px) {
  .nav, .head-cta { display: none; }
  .nav-toggle { display: block; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid, .svc-row { grid-template-columns: 1fr; }
  .split--reverse .media, .svc-row:nth-child(even) .media { order: 0; }
  .split .media { aspect-ratio: 4 / 3; }
  .hero { min-height: 88svh; }
}

@media (max-width: 400px) {
  /* tighten the lockup so it keeps clear of the menu button on small phones */
  .brand-word { font-size: 0.97rem; letter-spacing: 0.16em; }
  .brand-bloom { width: 22px; height: 22px; }
  .brand { gap: 0.55rem; }
}

@media (max-width: 560px) {
  .work--tall, .work--sq, .work--wide { grid-column: span 6; aspect-ratio: 4 / 3; }
  .field-row { grid-template-columns: 1fr; }
  .hero-meta { gap: 0.5rem 1.1rem; font-size: 0.6875rem; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}

/* --- Motion / print ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media print {
  .site-head, .drawer, .marquee, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
}