/* =============================================================
   FLORA — Editorial Garden
   Fine-art wedding & event florals · Charleston, SC
   Hand-built design system. Cormorant Garamond + Jost.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  --ivory:        #efe8e0;
  --ivory-2:      #e8e0d5;   /* deeper surface */
  --ivory-3:      #e2d9cc;
  --ink:          #1c1b18;
  --ink-soft:     #34322c;
  --olive:        #666544;
  --olive-deep:   #4f4e35;
  --sand:         #d0c7b8;
  --sand-soft:    #ddd5c8;
  --sage:         #80805f;
  --sage-soft:    #9a9a7e;
  --sage-text:    #5d5d44;   /* AA-compliant small text on ivory (4.6:1) */
  --sage-on-sand: #4f4f38;   /* AA-compliant small text on sand */

  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* fluid type scale */
  --fs-hero:   clamp(3.4rem, 9vw, 9rem);
  --fs-d1:     clamp(2.6rem, 6vw, 5rem);
  --fs-d2:     clamp(2.1rem, 4.2vw, 3.4rem);
  --fs-h3:     clamp(1.5rem, 2.4vw, 2rem);
  --fs-lead:   clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-body:   1.0625rem;
  --fs-cap:    0.9rem;
  --fs-eyebrow:0.72rem;

  /* spacing */
  --gutter: clamp(1.4rem, 5vw, 6rem);
  --section-y: clamp(5.5rem, 13vh, 11rem);
  --maxw: 1440px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hdr-h: 84px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }
body {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* paper-grain texture (tactile, ~3%) */
body::before{
  content:""; position: fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--olive-deep); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(239,232,224,.7); }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family: var(--ff-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; }
.display { font-family: var(--ff-display); font-weight: 300; }
em, .italic { font-style: italic; }

.eyebrow{
  font-family: var(--ff-sans); font-size: var(--fs-eyebrow); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.28em; color: var(--sage-text);
  display:inline-block;
}
.lead{ font-weight: 300; font-size: var(--fs-lead); line-height: 1.7; }
.measure{ max-width: 62ch; }

/* ribbon headline: animated olive underline under .ink-word */
.uline{ position: relative; white-space: nowrap; }
.uline::after{
  content:""; position:absolute; left:0; bottom:0.08em; height:2px; width:100%;
  background: var(--olive); transform-origin: left;
  transition: transform 0.9s var(--ease) 0.2s;
}
.js .uline::after{ transform: scaleX(0); }
.in-view .uline::after{ transform: scaleX(1); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.section{ padding-block: var(--section-y); }
.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family: var(--ff-sans); font-size:.82rem; font-weight:400;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 1.05rem 2.2rem; border-radius: 999px;
  background: var(--olive); color: var(--ivory);
  transition: background .4s var(--ease), letter-spacing .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background: var(--olive-deep); letter-spacing: 0.24em; }
.btn .arrow{ transition: transform .4s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }
.btn--ivory{ background: var(--ivory); color: var(--olive); }
.btn--ivory:hover{ background:#fff; }
.btn--ghost{
  background: transparent; color: var(--ink); border: 1px solid var(--sage);
}
.btn--ghost:hover{ background: var(--sage); color: var(--ivory); letter-spacing:.24em; }

.tlink{
  font-family: var(--ff-sans); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.18em; color: var(--ink); position: relative; padding-bottom:.35em;
  display:inline-flex; gap:.6em; align-items:center;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: var(--olive); transform: scaleX(0); transform-origin:left;
  transition: transform .45s var(--ease);
}
.tlink:hover::after{ transform: scaleX(1); }
.tlink .arrow{ transition: transform .4s var(--ease); }
.tlink:hover .arrow{ transform: translateX(5px); }

/* ---------- Header / Nav ---------- */
.header{
  position: fixed; top:0; left:0; width:100%; z-index: 100;
  height: var(--hdr-h);
  display:flex; align-items:center;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{
  font-family: var(--ff-display); font-weight:400; font-size:1.7rem;
  letter-spacing: 0.42em; text-indent:0.42em; color: var(--ink);
  transition: color .5s var(--ease), font-size .5s var(--ease);
}
.nav{ display:flex; align-items:center; gap: clamp(1.4rem, 3vw, 2.8rem); }
.nav a{
  font-family: var(--ff-sans); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.2em; color: var(--ink); position:relative; padding: .4em 0;
  transition: color .4s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform: scaleX(1); }
.nav a[aria-current="page"]{ color: var(--olive); }
.nav .btn{ padding:.7rem 1.4rem; font-size:.72rem; }

/* transparent over hero (home) — light text on a soft dark top bar */
.header--top{
  background: linear-gradient(180deg, rgba(28,27,24,0.62) 0%, rgba(28,27,24,0.42) 55%, rgba(28,27,24,0) 100%);
}
.header--top .brand{ color: var(--ivory); text-shadow: 0 1px 18px rgba(28,27,24,.35); }
.header--top .nav a{ color: var(--ivory); text-shadow: 0 1px 14px rgba(28,27,24,.35); }
.header--top .burger span{ background: var(--ivory); }
.header--top .nav a[aria-current="page"]{ color: var(--ivory); }
/* solid on scroll */
.header--solid{
  background: rgba(239,232,224,0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(128,128,95,0.25);
  height: 66px;
}
.header--solid .brand{ font-size:1.45rem; }

/* hamburger */
.burger{ display:none; width:48px; height:48px; position:relative; z-index:120; }
.burger span{ left:7px; width:34px; }
.burger span{ position:absolute; left:0; height:1.5px; width:100%; background: var(--ink); transition: transform .45s var(--ease), opacity .3s var(--ease), background .4s; }
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:50%; transform: translateY(-50%); }
.burger span:nth-child(3){ bottom:15px; }
body.menu-open .burger span:nth-child(1){ top:50%; transform: translateY(-50%) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ bottom:auto; top:50%; transform: translateY(-50%) rotate(-45deg); }

/* mobile overlay menu */
.mobile-menu{
  position: fixed; inset:0; z-index:110; background: var(--ivory);
  display:flex; flex-direction:column; justify-content:center; padding: var(--gutter);
  transform: translateY(-100%); transition: transform .6s var(--ease);
  visibility:hidden;
}
body.menu-open .mobile-menu{ transform: translateY(0); visibility:visible; }
.mobile-menu a{ font-family: var(--ff-display); font-size: clamp(2.5rem,12vw,4rem); font-weight:300; padding:.2em 0; opacity:0; transform: translateY(20px); }
body.menu-open .mobile-menu a{ animation: mItem .6s var(--ease) forwards; }
body.menu-open .mobile-menu a:nth-child(1){ animation-delay:.15s; }
body.menu-open .mobile-menu a:nth-child(2){ animation-delay:.23s; }
body.menu-open .mobile-menu a:nth-child(3){ animation-delay:.31s; }
body.menu-open .mobile-menu a:nth-child(4){ animation-delay:.39s; }
@keyframes mItem{ to{ opacity:1; transform: translateY(0);} }
.mobile-menu .m-foot{ margin-top: 2.5rem; font-family:var(--ff-sans); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color: var(--sage-text); }

/* ---------- Reveal animation (gated by .js so no-JS shows everything) ---------- */
.reveal{ transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal{ opacity:0; transform: translateY(26px); }
.reveal.in-view{ opacity:1; transform: none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; } .reveal-d3{ transition-delay:.24s; }

/* image reveal: overflow-frame + fade/scale (no clip-path — universally reliable) */
.img-mask{ overflow:hidden; }
.img-mask img{ transition: transform 1.5s var(--ease), opacity 1.1s var(--ease); }
.js .img-mask img{ opacity:0; transform: scale(1.06); }
.img-mask.in-view img{ opacity:1; transform: scale(1); }

/* botanical sprig self-draw */
.sprig path, .sprig line{ stroke: var(--sage); stroke-width:1.1; fill:none; stroke-linecap:round; }
.sprig .leaf{ fill: var(--sage); stroke:none; transition: opacity 1.2s var(--ease) .5s; }
.js .sprig .leaf{ opacity:0; }
.js .sprig path{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.in-view .sprig path{ animation: draw 1.8s var(--ease) forwards; }
.in-view .sprig .leaf{ opacity:.85; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position: relative; min-height: 100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; top:-9%; left:0; right:0; height:118%; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(130% 100% at 16% 80%, rgba(28,27,24,0.46), rgba(28,27,24,0) 62%),
    linear-gradient(180deg, rgba(28,27,24,0.38) 0%, rgba(28,27,24,0.22) 38%, rgba(28,27,24,0.38) 72%, rgba(28,27,24,0.6) 100%),
    /* uniform darkening layer across the whole image */
    linear-gradient(rgba(28,27,24,0.46), rgba(28,27,24,0.46));
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom: clamp(3rem,8vh,6rem); padding-top: calc(var(--hdr-h) + 2rem); }
.hero__eyebrow{ color: var(--ivory); opacity:.92; margin-bottom: 1.4rem; }
.hero__title{
  color: var(--ivory); font-weight:300; font-size: var(--fs-hero);
  line-height: 0.98; letter-spacing:-0.015em; max-width: 16ch;
  text-shadow: 0 1px 2px rgba(28,27,24,0.45), 0 2px 28px rgba(28,27,24,0.4);
}
.hero__title em{ font-weight: 400; }
.hero__sub{ color: var(--ivory); opacity:.96; margin-top: 1.6rem; max-width: 40ch; font-weight:300; text-shadow: 0 1px 14px rgba(28,27,24,0.45); }
.hero__cta .tlink{ text-shadow: 0 1px 14px rgba(28,27,24,0.5); }
.hero__cta{ margin-top: 2.4rem; display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; left:50%; bottom: 1.6rem; transform: translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.7rem; color:var(--ivory);
  font-family:var(--ff-sans); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; opacity:.85;
}
.hero__scroll .line{ width:1px; height:48px; background: var(--ivory); transform-origin:top; animation: scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:scaleY(0)} 40%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }

/* page hero (portfolio/contact) — compact */
.page-hero{ padding-top: calc(var(--hdr-h) + clamp(3rem,9vh,7rem)); padding-bottom: clamp(2rem,5vh,4rem); }
.page-hero .eyebrow{ margin-bottom:1.1rem; }
.page-hero h1{ font-size: var(--fs-d1); font-weight:300; }
.page-hero p{ margin-top:1.3rem; }

/* ============================================================
   PHILOSOPHY (big ivory statement)
   ============================================================ */
.philosophy{ text-align:center; }
.philosophy .sprig{ width:54px; height:auto; margin: 0 auto 2rem; }
.philosophy blockquote{
  font-family: var(--ff-display); font-weight:300; font-style: italic;
  font-size: var(--fs-d1); line-height:1.18; letter-spacing:-0.01em;
  max-width: 22ch; margin-inline:auto; color: var(--ink);
}
.philosophy blockquote em{ font-style: normal; }

/* ============================================================
   SIGNATURE WORK — asymmetric 3-piece
   ============================================================ */
.signature .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom: clamp(2.5rem,5vw,4rem); flex-wrap:wrap; }
.signature .head h2{ font-size: var(--fs-d2); font-weight:300; max-width:14ch; }
.sig-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(1rem,2.2vw,2rem); align-items:start; }
.sig-a{ grid-column: 1 / 6; }
.sig-b{ grid-column: 7 / 13; margin-top: clamp(2rem,6vw,5rem); }
.sig-c{ grid-column: 3 / 9; margin-top: clamp(1rem,3vw,2.5rem); }
.figure{ position:relative; }
.figure img{ width:100%; height:auto; }
.figure figcaption{ margin-top:.9rem; font-family:var(--ff-display); font-style:italic; font-size:1.15rem; color: var(--ink-soft); }
.figure figcaption .v{ font-family:var(--ff-sans); font-style:normal; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; display:block; margin-top:.3rem; color:var(--sage-text); }

/* ============================================================
   ABOUT teaser (sand block)
   ============================================================ */
.about{ background: var(--sand); position:relative; overflow:hidden; }
.about .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items:center; }
.about__img{ position:relative; }
.about__img img{ width:100%; height:auto; }
.about__img .sprig{ position:absolute; top:-26px; right:-10px; width:90px; }
.about__body h2{ font-size: var(--fs-d2); font-weight:300; margin:.8rem 0 1.4rem; max-width:16ch; }
.about__body p{ margin-bottom:1.1rem; color: var(--ink-soft); }
.about__sign{ font-family:var(--ff-display); font-style:italic; font-size:1.8rem; color: var(--olive); margin:.6rem 0 1.6rem; }

/* ============================================================
   TESTIMONIAL (cinematic, rotating)
   ============================================================ */
.testi{ text-align:center; position:relative; }
.testi .qmark{ font-family:var(--ff-display); font-size: clamp(7rem,16vw,13rem); line-height:.5; color: var(--sand); opacity:.6; display:block; height:.4em; }
.testi__track{ display:grid; max-width: 32ch; margin:1.2rem auto 0; }
.testi__item{ grid-area: 1 / 1; opacity:0; visibility:hidden; transition: opacity .8s var(--ease), visibility .8s var(--ease); }
.testi__item.active{ opacity:1; visibility:visible; }
.testi blockquote{ font-family:var(--ff-display); font-style:italic; font-weight:300; font-size: var(--fs-d2); line-height:1.25; color: var(--ink); }
.testi cite{ display:block; margin-top:1.4rem; font-family:var(--ff-sans); font-style:normal; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color: var(--sage-text); }
.testi__dots{ display:flex; gap:.7rem; justify-content:center; margin-top:2.2rem; }
.testi__dots button{ width:7px; height:7px; border-radius:50%; background: var(--sand); transition: background .4s, transform .4s; }
.testi__dots button.active{ background: var(--olive); transform: scale(1.25); }

/* ============================================================
   CTA + FOOTER (the single olive moment)
   ============================================================ */
.cta{ position:relative; overflow:hidden; text-align:center; color: var(--ivory); }
.cta__bg{ position:absolute; top:-9%; left:0; right:0; height:118%; z-index:0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta__bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(79,78,53,0.72), rgba(79,78,53,0.82)); }
.cta__inner{ position:relative; z-index:2; padding-block: clamp(6rem,14vh,10rem); }
.cta h2{ font-size: var(--fs-d1); font-weight:300; max-width: 18ch; margin-inline:auto; }
.cta h2 em{ font-weight:400; }
.cta p{ margin-top:1.2rem; opacity:.9; font-weight:300; }
.cta .btn{ margin-top:2.4rem; }

.footer{ background: var(--olive); color: var(--ivory); }
.footer .grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(4rem,8vh,6rem); }
.footer .brand{ color: var(--ivory); font-size:1.9rem; }
.footer .tag{ margin-top:1rem; font-weight:300; opacity:.85; max-width:28ch; }
.footer .foot-h{ font-family:var(--ff-sans); font-weight:400; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color: var(--sand); margin-bottom:1.2rem; }
.footer ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.footer a:hover{ color: var(--sand); }
.footer .season{ font-family:var(--ff-display); font-style:italic; font-size:1.05rem; opacity:.9; }
.footer__bar{ border-top:1px solid rgba(239,232,224,0.22); padding-block:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--sand); }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.filters{ display:flex; gap: clamp(1rem,2.5vw,2rem); flex-wrap:wrap; margin-top:2rem; }
.filters button{
  font-family:var(--ff-sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--sage-text); padding-bottom:.4em; position:relative; transition: color .4s var(--ease);
}
.filters button::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background: var(--olive); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); }
.filters button:hover{ color: var(--ink); }
.filters button.active{ color: var(--olive); }
.filters button.active::after{ transform: scaleX(1); }

.masonry{ columns: 3; column-gap: clamp(.8rem,1.6vw,1.4rem); margin-top: clamp(2.5rem,5vw,4rem); }
.tile{ break-inside: avoid; margin-bottom: clamp(.8rem,1.6vw,1.4rem); position:relative; overflow:hidden; cursor: pointer; background: var(--ivory-2); }
.tile img{ width:100%; height:auto; transition: transform 1s var(--ease), filter 1s var(--ease); }
.tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(28,27,24,0.5)); opacity:0; transition: opacity .5s var(--ease); }
.tile:hover img{ transform: scale(1.04); }
.tile:hover::after{ opacity:1; }
.tile__cap{ position:absolute; left:1.1rem; bottom:1rem; z-index:2; color: var(--ivory); opacity:0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tile:hover .tile__cap{ opacity:1; transform:none; }
.tile__cap .t{ font-family:var(--ff-display); font-style:italic; font-size:1.15rem; }
.tile__cap .v{ display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; margin-top:.2rem; opacity:.85; }
.tile.is-hidden{ display:none; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background: var(--ivory); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: opacity .45s var(--ease), visibility .45s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width: min(92vw, 1200px); max-height: 82vh; width:auto; height:auto; box-shadow: 0 30px 80px rgba(28,27,24,0.22); }
.lightbox__cap{ position:absolute; left:0; right:0; bottom: 2rem; text-align:center; font-family:var(--ff-display); font-style:italic; color: var(--sage-text); font-size:1.05rem; }
.lb-btn{ position:absolute; top:50%; transform: translateY(-50%); width:56px; height:56px; display:flex; align-items:center; justify-content:center; color: var(--olive); font-size:1.6rem; transition: background .3s; border-radius:50%; }
.lb-btn:hover{ background: var(--sand-soft); }
.lb-prev{ left: clamp(.5rem,3vw,3rem); } .lb-next{ right: clamp(.5rem,3vw,3rem); }
.lb-close{ position:absolute; top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); width:48px; height:48px; color: var(--ink); font-size:1.1rem; letter-spacing:.1em; }
.lb-count{ position:absolute; top: clamp(1.2rem,3vw,2.2rem); left: clamp(1.2rem,4vw,3rem); font-family:var(--ff-sans); font-size:.72rem; letter-spacing:.2em; color: var(--sage-text); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ display:grid; grid-template-columns: 0.85fr 1.15fr; min-height: 100svh; }
.contact__left{ background: var(--sand); padding: calc(var(--hdr-h) + clamp(3rem,8vh,6rem)) var(--gutter) clamp(3rem,8vh,6rem); position:relative; display:flex; flex-direction:column; }
.contact__left .eyebrow{ margin-bottom:1.2rem; }
.contact__left h1{ font-size: var(--fs-d1); font-weight:300; max-width:12ch; }
.contact__left .intro{ margin-top:1.4rem; max-width:38ch; color: var(--ink-soft); }
.contact__meta{ margin-top:auto; padding-top:2.5rem; border-top:1px solid rgba(79,79,56,.28); display:flex; flex-direction:column; gap:1rem; font-size:.95rem; }
.contact__meta .row .k{ font-family:var(--ff-sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color: var(--sage-on-sand); display:block; margin-bottom:.2rem; }
.contact__meta a:hover{ color: var(--olive); }
.contact__left .sprig{ position:absolute; bottom:1.5rem; right:1.5rem; width:120px; opacity:.5; }

.contact__right{ padding: calc(var(--hdr-h) + clamp(3rem,8vh,6rem)) var(--gutter) clamp(3rem,8vh,6rem); display:flex; align-items:center; }
.form{ width:100%; max-width: 560px; }
.field{ position:relative; margin-bottom: 1.7rem; }
.field input, .field textarea, .field select{
  width:100%; background: transparent; border:0; border-bottom:1px solid var(--sand);
  padding:.7rem 0; font-family:var(--ff-sans); font-size:1rem; color: var(--ink);
  transition: border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:90px; }
.field select{ -webkit-appearance:none; appearance:none; color: var(--ink); }
.field label{
  position:absolute; left:0; top:.7rem; font-family:var(--ff-sans); font-size:1rem; color: var(--sage-text);
  pointer-events:none; transition: all .35s var(--ease); text-transform:none; letter-spacing:0;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--olive); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select.filled + label{
  top:-.85rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--sage-text);
}
.field .req{ color: var(--olive); }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(1rem,3vw,2rem); }
.form__submit{ margin-top:.6rem; }
.form__note{ font-size:.8rem; color: var(--sage-text); margin-top:1.4rem; }
.form__success{ display:none; font-family:var(--ff-display); font-style:italic; font-size: var(--fs-h3); color: var(--olive); line-height:1.4; }
.form.sent .form__fields{ display:none; }
.form.sent .form__success{ display:block; animation: fadeUp .8s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(12px);} to{opacity:1; transform:none;} }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* custom cursor */
.cursor{ position:fixed; top:0; left:0; z-index:300; width:8px; height:8px; border-radius:50%; background: var(--sage); pointer-events:none; transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), opacity .3s; mix-blend-mode: multiply; }
.cursor--view{ width:74px; height:74px; background: rgba(102,101,68,0.9); }
.cursor__label{ color: var(--ivory); font-family:var(--ff-sans); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; opacity:0; transition: opacity .3s; }
.cursor--view .cursor__label{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .masonry{ columns: 2; }
  .contact{ grid-template-columns: 1fr; }
  .contact__left{ min-height:auto; padding-bottom: clamp(2.5rem,6vh,4rem); }
  .contact__right{ padding-top: clamp(2.2rem,5vh,3.5rem); }
  .about .grid{ grid-template-columns: 1fr; gap:2.5rem; }
  .about__img{ max-width: 460px; }
  .footer .grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .nav{ display:none; }
  .burger{ display:block; }
  .sig-grid{ display:flex; flex-direction:column; gap: 2.5rem; }
  .sig-a,.sig-b,.sig-c{ margin-top:0; }
  .form .row2{ grid-template-columns: 1fr; }
  .footer .grid{ grid-template-columns: 1fr; gap:2.2rem; }
  .hero__title{ max-width: 18ch; }
  .hero__scroll{ display:none; }
  .hero__cta{ row-gap:1rem; }
  .filters{ row-gap:.5rem; column-gap:1.5rem; }
  .filters button{ padding:.5em .1em .55em; }
}
@media (max-width: 400px){
  .masonry{ columns: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .img-mask img{ clip-path:none; transform:none; }
  .cursor{ display:none; }
  .hero__scroll .line{ animation:none; }
}