/* ===========================================================
   Jackie Joyce Design Co. — stylesheet
   Palette: warm ivory, charcoal ink, real-logo sage green accent
   =========================================================== */

:root{
  --ivory: #FAF9F6;
  --ivory-deep: #F0F1EE;
  --ink: #302F2D;
  --ink-soft: #5C5B57;
  --accent: #5FA07C;
  --accent-deep: #468161;
  --sage: #68B28A;
  --line: #E4E7E6;
  --stripe: #E8ECF1;
  --white: #FFFFFF;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --max: 1160px;
  --header-h: 100px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--ivory);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 .4em;
  letter-spacing: .01em;
}
h1{ font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.08; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em; }
em{ font-style: italic; color: var(--ink-soft); }

.eyebrow{
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--accent-deep);
  margin: 0 0 .6em;
}
.center{ text-align:center; }
.section-lead{ max-width: 640px; margin: -.4em auto 1.5rem; color: var(--ink-soft); }

.section{ padding: 6.5rem 1.5rem; }
/* Sections that end on a single short link line (not a heading/paragraph)
   read as having too much trailing air with the full section padding —
   tighten just the bottom. */
#featured-projects{ padding-bottom: 3rem; }
.section-inner{ max-width: var(--max); margin: 0 auto; }
section[id]{ scroll-margin-top: var(--header-h); }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal-1{ transition-delay: .08s; }
.reveal-2{ transition-delay: .16s; }
.reveal-3{ transition-delay: .24s; }
.reveal-4{ transition-delay: .32s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-media{ animation: none !important; }
  .hero-content > *{ animation: none !important; opacity:1; }
  .scroll-cue{ animation: none !important; }
  .dancer-torso, .dancer-arm, .dancer-leg, .confetti span{ animation: none !important; }
  .success-popup-backdrop, .success-popup-card{ animation: none !important; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  padding: .85em 1.9em;
  border-radius: 999px;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  border: 1px solid transparent;
}
.btn-primary{
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover{ background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(70,129,97,.55); }
.btn-ghost{
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover{ background: var(--ink); color: var(--white); transform: translateY(-2px); }

/* ---------- header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  height: var(--header-h);
  display:flex; align-items:center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.solid, body:not(.has-hero) .site-header{
  background: rgba(250,249,246,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 24px -12px rgba(48,47,45,.18);
}
.header-inner{
  width:100%;
  max-width: var(--max); margin:0 auto;
  padding: 0 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap: 1.5rem;
}
.logo{
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--ink);
  white-space: nowrap;
}
.logo span{ color: var(--accent-deep); font-style: italic; }

.logo-mark{ display:flex; align-items:center; }
.logo-mark img{
  height: 72px; width:auto;
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.25));
  transition: filter .35s ease, height .35s ease;
}
.site-header.solid .logo-mark img, body:not(.has-hero) .logo-mark img{ filter: none; height: 80px; }

.main-nav{ display:flex; gap: 1.7rem; flex: 1; justify-content:center; }
.main-nav a{
  position: relative;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.95);
  padding: .3em 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: color .35s ease, text-shadow .35s ease;
}
.site-header.solid .main-nav a, body:not(.has-hero) .main-nav a{ color: var(--ink-soft); text-shadow:none; }
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.main-nav a:hover{ color: var(--accent-deep); text-shadow:none; }
.main-nav a:hover::after, .main-nav a:focus-visible::after{ transform: scaleX(1); transform-origin: left; }

/* Current-page indicator: stays visible on scroll, not just on hover,
   so it's always clear which page you're on. */
.main-nav a[aria-current="page"]{ color: var(--accent); font-weight: 500; text-shadow:none; }
.site-header.solid .main-nav a[aria-current="page"],
body:not(.has-hero) .main-nav a[aria-current="page"]{ color: var(--accent-deep); }
.main-nav a[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; }

.nav-cta{ font-weight: 500; }
.site-header.solid .nav-cta, body:not(.has-hero) .nav-cta{ color: var(--accent-deep); }

.header-social{ display:flex; align-items:center; gap: .7rem; }
.social-icon{
  display:flex; align-items:center; justify-content:center;
  width: 34px; height: 34px; box-sizing: border-box;
  color: rgba(255,255,255,.95);
  border: 1px solid currentColor; border-radius: 4px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
  transition: color .35s ease, filter .35s ease, border-color .35s ease;
}
.social-icon svg{ width: 16px; height: 16px; display:block; }
.site-header.solid .social-icon, body:not(.has-hero) .social-icon{ color: var(--ink-soft); filter:none; }
.social-icon[data-social="ltk"]{
  font-size: .68rem; font-weight:600; letter-spacing: .04em;
}
.social-icon:hover{ color: var(--accent-deep) !important; }

.nav-toggle{
  display:none; background:none; border:none; font-size: 1.4rem; cursor:pointer;
  color: rgba(255,255,255,.95); text-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: color .35s ease;
}
.site-header.solid .nav-toggle, body:not(.has-hero) .nav-toggle{ color: var(--ink); text-shadow:none; }

/* ---------- hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.09); }
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(38,36,33,.42) 0%, rgba(38,36,33,.28) 38%, rgba(30,29,27,.82) 100%);
}
.hero-content{
  position:relative; z-index:2;
  max-width: 620px;
  margin: 0; padding: 0 6vw 7rem;
  text-align:left; color: var(--white);
}
.hero-content > *{ animation: heroFadeUp .9s cubic-bezier(.22,1,.36,1) both; }
.hero-content > *:nth-child(1){ animation-delay: .15s; }
.hero-content > *:nth-child(2){ animation-delay: .32s; }
.hero-content > *:nth-child(3){ animation-delay: .5s; }
.hero-content > *:nth-child(4){ animation-delay: .68s; }
@keyframes heroFadeUp{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform:none; }
}
.hero .eyebrow{ color: #CDE9DA; }
.hero h1{ color: var(--white); }
.hero h1 em{ color: #CDE9DA; font-family: var(--font-serif); }
.hero-sub{ color: #EDEFEC; max-width: 480px; margin: 0 0 2rem; font-size: 1.05rem; }
.hero-actions{ display:flex; gap: 1rem; justify-content:flex-start; flex-wrap: wrap; }
.hero .btn-ghost{ border-color: var(--white); color: var(--white); }
.hero .btn-ghost:hover{ background: var(--white); color: var(--ink); }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; z-index:2;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: rgba(255,255,255,.85);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .2em;
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-cue svg{ width:14px; height:14px; }
@keyframes bob{
  0%,100%{ transform: translate(-50%,0); }
  50%{ transform: translate(-50%,8px); }
}

.stripe-accent{
  position:absolute; left:0; right:0; bottom:0; height: 10px; z-index:2;
  background: repeating-linear-gradient(90deg, var(--sage) 0 28px, var(--ivory) 28px 56px);
}

.stripe-divider{
  height: 46px;
  background-image: url('../images/jjd-logo-stripes.png');
  background-size: cover;
  background-position: center 35%;
  opacity: .6;
}

/* ---------- editorial about / team ---------- */
.about{ background: var(--white); overflow:hidden; }
.founder-spread{
  display:grid; grid-template-columns: 1fr 1fr;
  align-items:center;
  margin: 3rem 0 0;
}
.founder-spread + .founder-spread{ margin-top: 4rem; }
.founder-spread-reverse .founder-media{ order: 2; }
.founder-spread-reverse .founder-copy{ order: 1; }
.founder-media{ height: 620px; overflow:hidden; }
.founder-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .8s ease; }
.founder-media:hover img{ transform: scale(1.04); }
/* For photos where cropping to fill the frame would cut someone off at any
   screen width (eg. a full family/group shot) — show the whole image
   instead, letterboxed on a soft brand background rather than cropped. */
.founder-media-contain{ background: var(--white); }
.founder-media-contain img{ transform: none !important; }
.founder-media-contain:hover img{ transform: none !important; }
/* The bio paragraph is capped at a comfortable reading width (see
   .founder-copy p below), but the grid column it sits in keeps growing
   with the viewport — on a wide monitor that leaves a big, ever-growing
   gap between the text and the photo instead of just extra margin on the
   outer edge. Capping the whole copy block's width and pinning it to the
   edge nearest the photo (justify-self, set per row direction below)
   keeps the gap fixed and modest at any screen size. */
.founder-copy{ justify-self: start; max-width: 640px; padding: 0 clamp(1.5rem, 5vw, 4.5rem); }
.founder-spread-reverse .founder-copy{ justify-self: end; }
.founder-copy .role{ margin-top:0; }
.founder-copy p:not(.role){ font-size: 1.08rem; color: var(--ink-soft); max-width: 480px; }
.founder-copy h3{ font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* ---------- mini designer spotlight ---------- */
.mini-designer-spotlight{
  display:flex; align-items:center; justify-content:center; gap: 1.8rem;
  margin: 4rem auto 0; padding-top: 2.8rem;
  border-top: 1px solid var(--line);
  max-width: 620px; text-align:left;
}
.mini-designer-spotlight img{
  width: 150px; height:150px; border-radius: 50%; object-fit:cover; flex-shrink:0;
  border: 3px solid var(--ivory-deep);
  box-shadow: 0 12px 28px -14px rgba(48,47,45,.35);
}
.mini-designer-spotlight h4{ font-family: var(--font-serif); font-size: 1.5rem; margin:0 0 .2em; }
.mini-designer-spotlight .role{ margin: 0 0 .3em; }

/* ---------- services ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1rem; }
.card-grid-3{ grid-template-columns: repeat(3, 1fr); }
.service-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2.2rem 1.6rem;
  text-align:center;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(48,47,45,.25); border-color: transparent; }
.service-card h3{ margin-bottom:.5em; }
.service-card p{ color: var(--ink-soft); font-size:.92rem; margin:0; }

/* ---------- trust strip ---------- */
.trust-strip{ background: var(--ivory-deep); padding: 3rem 1.5rem; }
.trust-strip-inner{ max-width: var(--max); margin: 0 auto; text-align:center; }
.trust-list{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: 1.6rem 3rem; list-style:none; padding:0; margin: 0;
}
.trust-list li{ display:flex; align-items:center; }
.trust-list a{ display:block; }
.trust-list img{
  display:block; height: 58px; width:auto; max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) opacity(.65);
  transition: filter .35s ease, transform .35s ease;
}
.trust-list a:hover img{ filter: grayscale(0) opacity(1); transform: translateY(-2px); }

/* ---------- room-by-room project tour ---------- */
.room-nav{ padding-bottom: 2rem; }
.room-nav-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap: .6rem 1rem;
  margin-top: 1.5rem;
}
.room-nav-links a{
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-deep); border: 1px solid var(--line);
  border-radius: 999px; padding: .55em 1.1em; text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.room-nav-links a:hover{ background: var(--accent); color: #fff; border-color: var(--accent); }
.room-block{ padding-top: 3.5rem; padding-bottom: 3.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.room-block-alt{ background: var(--ivory-deep); }
.room-block .section-lead{ max-width: 620px; margin-left:auto; margin-right:auto; }
.room-masonry{ margin-top: 2rem; }
/* A room with exactly 4 photos often mixes portrait and landscape shots,
   which the column-flow masonry below can leave looking lopsided (three
   images edge-aligned across the top, one stranded by itself underneath).
   A plain 2x2 grid keeps every photo its natural, uncropped shape while
   lining them up cleanly in pairs. */
.room-masonry-grid4{
  columns: unset; display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px)); gap: 1.1rem;
  justify-content: center;
}
.room-masonry-grid4 .portfolio-item{ margin: 0; }

/* ---------- portfolio (masonry) ---------- */
.portfolio-masonry{ columns: 3 260px; column-gap: 1.1rem; }
.portfolio-masonry .portfolio-item{
  display:block; position:relative; overflow:hidden;
  border-radius: 6px; margin: 0 0 1.1rem;
  break-inside: avoid;
}
.portfolio-masonry .portfolio-item img{ width:100%; height:auto; display:block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.portfolio-masonry .portfolio-item:hover img{ transform: scale(1.06); }
.portfolio-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 2rem 1.1rem .9rem;
  background: linear-gradient(to top, rgba(20,19,18,.72), transparent);
  color:#fff; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  transform: translateY(12px); opacity:0;
  transition: transform .4s ease, opacity .4s ease;
}
.portfolio-item:hover .portfolio-caption{ transform: translateY(0); opacity:1; }

/* ---------- benefits ---------- */
.benefits{ background: var(--white); }
.benefits-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.benefits-grid-3{ grid-template-columns: repeat(3,1fr); }
.benefit-index{ font-family: var(--font-serif); font-size: 1.6rem; color: var(--sage); display:block; margin-bottom:.3em; }
.benefit h3{ margin-bottom:.5em; }
.benefit p{ color: var(--ink-soft); font-size: .92rem; }

/* ---------- testimonials (pull quote) ---------- */
.pull-quote{ position:relative; max-width: 840px; margin: 0 auto; text-align:center; }
.pull-quote .quote-mark{
  display:block; font-family: var(--font-serif); font-size: 6.5rem; line-height:1;
  color: var(--accent); opacity:.3; margin-bottom: -1.6rem;
}
.pull-quote p{
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem); line-height:1.55; color: var(--ink);
}
.pull-quote cite{
  display:block; margin-top: 1.4rem; font-style: normal;
  font-size: .78rem; text-transform: uppercase; letter-spacing:.12em; color: var(--ink-soft);
}
.section-note{ color: var(--ink-soft); font-size: .88rem; margin-top: 2.5rem; }

/* ---------- shop / ltk ---------- */
.shop{ background: var(--ivory-deep); }
.shop-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:center; }
.shop-actions{ display:flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.shop-grid-media{ display:grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }
.shop-grid-media img{ border-radius: 6px; aspect-ratio: 1/1; object-fit:cover; transition: transform .5s ease; }
.shop-grid-media img:hover{ transform: scale(1.04); }

/* ---------- contact ---------- */
.contact{ background: var(--white); }
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
.contact-details{ list-style:none; padding:0; margin: 1.6rem 0; }
.contact-details li{ margin-bottom:.6em; }
.contact-details strong{ display:inline-block; width: 90px; color: var(--accent-deep); text-transform: uppercase; font-size: .72rem; letter-spacing:.08em; vertical-align: top; }
.contact-note{ font-size: .85rem; }

.contact-form{ background: var(--ivory); border: 1px solid var(--line); border-radius: 8px; padding: 2rem; }
.contact-form label{ display:block; margin-bottom: 1.1rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.required-mark{ color: #A3413B; text-transform: none; letter-spacing: normal; }
.form-required-note{ font-size: .78rem; color: var(--ink-soft); margin: 0 0 1.3rem; }
.form-required-note .required-mark{ font-size: .85rem; }
.contact-form input, .contact-form textarea{
  width:100%; margin-top: .4em;
  padding: .75em .9em;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: .95rem;
  background: var(--white);
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
/* A native month/date input renders its internal text-plus-calendar-icon
   content a hair taller than a plain text/url input does under the exact
   same padding and font-size — browsers size that control's insides
   slightly differently. A fixed height (everything but the auto-growing
   textarea) forces every field to the same pixel height regardless of
   that difference. */
.contact-form input:not([type="radio"]){ height: 2.61rem; }
.contact-form input:focus, .contact-form textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(95,160,124,.18); }
.form-note{ font-size: .78rem; color: var(--ink-soft); margin-top: 1rem; margin-bottom:0; }

.form-status{
  margin-top: 1rem;
  padding: .9em 1.1em;
  border-radius: 5px;
  font-size: .88rem;
  line-height: 1.5;
}
.form-status-success{ background: #EAF4EE; color: var(--accent-deep); border: 1px solid rgba(70,129,97,.25); }
.form-status-error{ background: #FBEAEA; color: #A3413B; border: 1px solid rgba(163,65,59,.25); }
.form-status-error a{ color: inherit; text-decoration: underline; }
.contact-form button[disabled]{ opacity:.6; cursor: not-allowed; }

/* ---------- success pop-up (dancing celebration) ---------- */
.success-popup{ position: fixed; inset: 0; z-index: 200; display:flex; align-items:center; justify-content:center; padding: 1.5rem; }
.success-popup[hidden]{ display:none; }
.success-popup-backdrop{ position:absolute; inset:0; background: rgba(48,47,45,.55); animation: popup-fade-in .25s ease; }
.success-popup-card{
  position: relative;
  background: var(--ivory);
  border-radius: 14px;
  padding: 2.5rem 2rem 2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(48,47,45,.3);
  overflow: hidden;
  animation: popup-pop-in .35s cubic-bezier(.2,1.4,.4,1);
}
.success-popup-card h2{ margin: .2em 0 .4em; }
.success-popup-card p{ color: var(--ink-soft); font-size: .95rem; margin:0; }
.success-popup-close{
  position:absolute; top: .6rem; right: .8rem;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent;
  font-size: 1.4rem; line-height:1; color: var(--ink-soft); cursor:pointer;
  transition: background .2s ease;
}
.success-popup-close:hover{ background: var(--ivory-deep); }

@keyframes popup-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popup-pop-in{ from{ opacity:0; transform: scale(.85) translateY(10px); } to{ opacity:1; transform: scale(1) translateY(0); } }

/* the dancer */
.dancer{ position:relative; width: 110px; height: 140px; margin: 0 auto 1rem; }
.dancer-head{ position:absolute; top:0; left:50%; width:34px; height:34px; margin-left:-17px; border-radius:50%; background: var(--accent-deep); }
.dancer-torso{
  position:absolute; top:30px; left:50%; width:26px; height:50px; margin-left:-13px;
  border-radius: 13px; background: var(--accent);
  transform-origin: top center;
  animation: dancer-groove .6s ease-in-out infinite alternate;
}
.dancer-arm{ position:absolute; top:36px; width:8px; height:44px; border-radius:4px; background: var(--accent-deep); }
.dancer-arm-left{ left: calc(50% - 30px); transform-origin: top center; animation: arm-swing-left .5s ease-in-out infinite alternate; }
.dancer-arm-right{ left: calc(50% + 22px); transform-origin: top center; animation: arm-swing-right .5s ease-in-out infinite alternate; }
.dancer-leg{ position:absolute; top:78px; width:10px; height:50px; border-radius:5px; background: var(--ink); }
.dancer-leg-left{ left: calc(50% - 16px); transform-origin: top center; animation: leg-kick-left .5s ease-in-out infinite alternate; }
.dancer-leg-right{ left: calc(50% + 6px); transform-origin: top center; animation: leg-kick-right .5s ease-in-out infinite alternate; }

@keyframes dancer-groove{ from{ transform: translateY(0) rotate(-4deg); } to{ transform: translateY(-6px) rotate(4deg); } }
@keyframes arm-swing-left{ from{ transform: rotate(-50deg); } to{ transform: rotate(30deg); } }
@keyframes arm-swing-right{ from{ transform: rotate(50deg); } to{ transform: rotate(-30deg); } }
@keyframes leg-kick-left{ from{ transform: rotate(-12deg); } to{ transform: rotate(12deg); } }
@keyframes leg-kick-right{ from{ transform: rotate(12deg); } to{ transform: rotate(-12deg); } }

/* confetti */
.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti span{ position:absolute; top:-14px; width:8px; height:14px; border-radius:2px; opacity:.9; animation: confetti-fall 1.8s ease-in infinite; }
.confetti span:nth-child(1){ left:6%;  background: var(--accent); animation-delay: 0s; }
.confetti span:nth-child(2){ left:20%; background: #C9A227; animation-delay: .2s; }
.confetti span:nth-child(3){ left:35%; background: var(--sage); animation-delay: .05s; }
.confetti span:nth-child(4){ left:50%; background: var(--stripe); animation-delay: .35s; }
.confetti span:nth-child(5){ left:64%; background: var(--accent); animation-delay: .15s; }
.confetti span:nth-child(6){ left:78%; background: #C9A227; animation-delay: .4s; }
.confetti span:nth-child(7){ left:90%; background: var(--sage); animation-delay: .25s; }
.confetti span:nth-child(8){ left:97%; background: var(--stripe); animation-delay: .1s; }
@keyframes confetti-fall{
  0%{ transform: translateY(-10px) rotate(0deg); opacity:1; }
  100%{ transform: translateY(220px) rotate(360deg); opacity:0; }
}

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: #E9E3D8; padding: 3rem 1.5rem 2rem; }
.footer-inner{ max-width: var(--max); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 1.2rem; }
.site-footer .logo{ color: #E9E3D8; }
.site-footer .logo span{ color: #8FCBA9; }
.footer-social{ display:flex; gap: 1.4rem; }
.footer-social a{ font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: #C9C2B4; transition: color .2s ease; }
.footer-social a:hover{ color: var(--white); }
.footer-copy{ width:100%; text-align:center; font-size: .78rem; color: #9A9384; margin: 1.8rem 0 0; }

/* ---------- process ---------- */
.process{ background: var(--ivory-deep); }
.process-steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; position: relative; }
.process-step{ position: relative; padding-top: .5rem; }
.process-step::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display:block;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--accent);
  margin-bottom: .3em;
}
.process-step h3{ margin-bottom:.4em; }
.process-step p{ color: var(--ink-soft); font-size: .92rem; margin:0; }

/* ---------- richer contact form ---------- */
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
/* Two labels in a row can wrap to a different number of lines (one short,
   one long), which pushes their inputs out of alignment with each other.
   Reserving a consistent two-line block for the label text — and bottom-
   aligning shorter text within it — keeps every input in the row starting
   at the same height regardless of how its own label happens to wrap. */
/* A native month/date input carries its own internal minimum width (for
   the "Month Year" text plus the calendar icon) that some mobile browsers
   won't shrink below — as a flex/grid item its default min-width is
   "auto" (i.e. that internal minimum), which can win out over the
   width:100% below and make just this one field sit wider than every
   plain text input next to it. min-width:0 removes that floor so
   width:100% is respected like it is everywhere else. */
.form-row label{ display:flex; flex-direction:column; min-width: 0; }
.form-row label input{ min-width: 0; }
/* line-height is pinned here (rather than relying on the inherited 1.6)
   so the two-line reservation below is an exact, predictable multiple of
   it — the earlier attempt at this used min-height assuming 1em per line
   and came up short against the real ~1.6em line height, which is why
   the shorter one-line label was still sitting too high. */
.form-row .field-label{ display:flex; align-items:flex-end; line-height:1.3; min-height: 2.6em; }
@media (max-width: 480px){
  /* Below ~480px, native month/date-picker inputs have a minimum width
     the browser won't shrink past, which is wider than half this column
     — forcing the two fields to overlap instead of just looking cramped.
     Stacking them removes the width squeeze entirely. */
  .form-row{ grid-template-columns: 1fr; gap: 0; }
}
.radio-group{ display:flex; flex-wrap:wrap; gap: .6rem; margin-top:.4em; }
.radio-group label{
  display:inline-flex; align-items:center; gap:.4em;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .5em 1em;
  font-size: .8rem; text-transform:none; letter-spacing:normal;
  margin:0; cursor:pointer;
  color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease;
}
.radio-group label:has(input:checked){ border-color: var(--accent); background: rgba(95,160,124,.08); }
.radio-group input{ width:auto; margin:0; }
.contact-form select{
  width:100%; margin-top: .4em;
  padding: .75em .9em;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: .95rem;
  background: var(--white);
  color: var(--ink);
}

/* ---------- multi-page site: shared page header ---------- */
/* The header's own bottom padding plus the next section's top padding
   (and .section-lead's bottom margin, on pages that have one) used to
   stack into a very large gap between the page subtitle and whatever
   comes next. Tightened all three so pages using .page-header (Portfolio,
   Shop, Services, Collection, Journal, Project detail) read as one
   connected page instead of two disconnected blocks. */
.page-header{ padding-top: calc(var(--header-h) + 3rem); padding-bottom: 1.5rem; }
.page-header + section{ padding-top: 2.5rem; }
.placeholder-flag{
  max-width: 640px; margin: 0 auto 1.5rem; padding: .8rem 1.4rem;
  background: rgba(95,160,124,.1); border: 1px dashed var(--accent);
  border-radius: 10px; font-size: .92rem; color: var(--ink-soft);
}

/* ---------- project / product / collection cards ---------- */
.project-card-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin: 1rem 0 2.5rem;
}
.project-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.project-card-media{ aspect-ratio: 4/5; overflow:hidden; border-radius: 10px; background: var(--stripe); }
.project-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.project-card:hover .project-card-media img{ transform: scale(1.04); }
.project-card-copy{ padding-top: .9rem; }
.project-card-copy h3{ margin:.2rem 0 0; font-size: 1.3rem; }

.project-nav{ background: var(--ivory-deep); }
.project-nav-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 760px; margin: 2rem auto;
}
.project-nav-label{
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-deep); margin: 0 0 .7rem;
}
.project-nav-single{ grid-template-columns: minmax(0, 340px); justify-content: center; }

.product-card-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin: 1rem 0 2.5rem;
}
.product-card{ background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow:hidden; }
.product-card-media{ position:relative; aspect-ratio: 1/1; background: var(--stripe); }
.product-card-media img{ width:100%; height:100%; object-fit:cover; }
.product-card-badge{
  position:absolute; top:.6rem; right:.6rem; background: var(--ink); color:var(--white);
  font-size: .7rem; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .5rem; border-radius:5px;
}
.product-card-copy{ padding: 1rem 1.1rem 1.3rem; }
.product-card-category{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 .3rem; }
.product-card-copy h4{ margin:0 0 .3rem; font-size:1.05rem; }
.product-card-price{ margin:0 0 .7rem; color: var(--accent-deep); font-weight:500; }
.product-card-actions{ display:flex; gap: 1rem; }
.link-shop{ font-size:.85rem; font-weight:500; color: var(--accent-deep); text-decoration:none; border-bottom:1px solid currentColor; }
.link-shop:hover{ color: var(--ink); }

.collection-card{ display:block; text-decoration:none; color:inherit; text-align:center; }
.collection-card-media{ aspect-ratio: 4/3; overflow:hidden; border-radius: 10px; background: var(--stripe); margin-bottom: .8rem; }
.collection-card-media img{ width:100%; height:100%; object-fit:cover; }

.journal-card{ display:block; padding: 1.6rem; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:inherit; }
.journal-card:hover{ border-color: var(--accent); }

.link-more{ font-size:.95rem; font-weight:500; color: var(--accent-deep); text-decoration:none; border-bottom:1px solid currentColor; }
.link-more:hover{ color: var(--ink); }

.two-col{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.two-col h3{ margin-top:0; }

.final-cta{ text-align:center; padding: 5rem 0; }
.final-cta h2{ margin-bottom: 1.4rem; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .contact-grid, .shop-grid{ grid-template-columns: 1fr; }
  .card-grid, .benefits-grid, .process-steps{ grid-template-columns: repeat(2,1fr); }
  .founder-spread{ grid-template-columns: 1fr; }
  .founder-spread-reverse .founder-media, .founder-spread-reverse .founder-copy{ order: initial; }
  .founder-media{ height: 420px; }
  /* Stacked layout here: picture, then name, then title/role, then bio —
     leading with the name reads better than the role when the photo
     already introduces the person. */
  .founder-copy{
    justify-self: stretch; max-width: none;
    padding: 1.5rem clamp(1.5rem, 5vw, 3rem) 0;
    display:flex; flex-direction:column;
  }
  /* Name + title sit close together, like a signature block, with more
     air before the description that follows. */
  .founder-copy h2{ order: 0; margin: 0 0 .15em; }
  .founder-copy .role{ order: 1; margin: 0 0 1.2rem; }
  .founder-copy p:not(.role){ order: 2; }
  .portfolio-masonry{ columns: 2 220px; }
  .project-card-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-card-grid{ grid-template-columns: repeat(2, 1fr); }
  .two-col{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .main-nav{
    position:absolute; top: var(--header-h); left:0; right:0;
    background: rgba(250,249,246,.98); backdrop-filter: blur(8px);
    flex-direction:column; align-items:center; padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ color: var(--ink-soft); text-shadow:none; }
  .nav-toggle{ display:block; }
  .card-grid, .benefits-grid, .process-steps{ grid-template-columns: 1fr; }
  .mini-designer-spotlight{ flex-direction: column; text-align:center; gap: 1rem; }
  /* Same rule as the founder spread above: name leads, title follows. */
  .mini-designer-copy{ display:flex; flex-direction:column; }
  .mini-designer-copy h4{ order: 0; }
  .mini-designer-copy .role{ order: 1; margin: .3rem 0 0; }
  .hero-content{ padding: 0 6vw 5rem; }
  .portfolio-masonry{ columns: 1; }
  .room-masonry-grid4{ grid-template-columns: minmax(0, 320px); }
  .trust-list{ gap: .8rem 1.8rem; }
  .project-card-grid, .product-card-grid, .project-nav-grid{ grid-template-columns: 1fr; }
  .page-header{ padding-top: calc(var(--header-h) + 2rem); }
  /* Portfolio and Shop carry an extra subtitle line under the heading that
     Services doesn't have, which was pushing their content noticeably
     lower than Services on phones. Hide it here so all three pages start
     at the same height on mobile — the subtitle still shows on desktop. */
  .page-header-tight .section-lead{ display:none; }
  /* Cards stack into a single column here — put the title above the photo
     (rather than below it) so a long vertical list of images reads as a
     scannable list of named projects, not an anonymous photo stream.
     Within that block, lead with the project name and follow with the
     room-type/description line, then the photo. */
  .project-card-copy{ order: -1; padding: 0 0 .6rem; display:flex; flex-direction:column; }
  .project-card-copy .eyebrow{ order: 1; margin: .3rem 0 .6rem; }
  .project-card-copy h3{ order: 0; margin-top: 0; }
}