/* =========================================================================
   MARROW & BLOOM — Whole-person wellbeing studio
   Bespoke system. Display: Marcellus · Body: Geologica · Mono: Inconsolata
   Palette: burgundy-wine · pale peach · brass
   ========================================================================= */

:root {
  /* core palette */
  --wine:        #4a1626;   /* deep burgundy-wine */
  --wine-deep:   #2e0d18;   /* near-black wine */
  --wine-soft:   #6e2238;   /* lifted wine */
  --peach:       #fbeadf;   /* pale peach */
  --peach-warm:  #f6d9c4;   /* warmer peach */
  --peach-paper: #fdf4ee;   /* page paper */
  --brass:       #b07d3c;   /* brass accent */
  --brass-light: #d9ad6e;   /* lit brass */
  --brass-deep:  #8a5d24;

  --ink:         #2b1a1f;   /* text on light */
  --ink-soft:    #6a5057;   /* muted text on light */
  --cream:       #f8ede4;   /* text on dark */
  --cream-soft:  #d8c2b6;   /* muted text on dark */

  --line:        rgba(74,22,38,.14);
  --line-dark:   rgba(248,237,228,.16);

  --font-display: "Marcellus", Georgia, serif;
  --font-body:    "Geologica", system-ui, sans-serif;
  --font-mono:    "Inconsolata", ui-monospace, monospace;

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 4px;

  --shadow-soft: 0 24px 60px -28px rgba(46,13,24,.45);
  --shadow-card: 0 18px 44px -26px rgba(46,13,24,.40);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--peach-paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 350;
  font-size: clamp(1rem, .55vw + .9rem, 1.075rem);
  line-height: 1.72;
  letter-spacing: .003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--wine);
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.3rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.7vw, 1.7rem); }
p  { margin: 0 0 1.2em; }
a  { color: var(--wine-soft); text-decoration-color: rgba(110,34,56,.35); text-underline-offset: 3px; }
a:hover { color: var(--brass-deep); }

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: linear-gradient(90deg, var(--brass), transparent);
}
.eyebrow.center::before { display: none; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); position: relative; }
.lede { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.6; color: var(--ink-soft); max-width: 40ch; }

/* skip link */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--wine); color: var(--cream);
  padding: .8rem 1.2rem; border-radius: var(--radius);
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2.5px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- buttons ---------- */
.btn {
  --bg: var(--wine); --fg: var(--cream);
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .18em; font-size: .76rem; font-weight: 600;
  background: var(--bg); color: var(--fg);
  padding: 1.05rem 1.9rem; border: 0; border-radius: 100px;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .35s;
  box-shadow: 0 12px 30px -14px rgba(46,13,24,.6);
}
.btn .arw { transition: transform .4s var(--ease); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(46,13,24,.7); color: var(--fg); }
.btn:hover .arw { transform: translateX(5px); }
.btn::after {
  content:""; position:absolute; inset:0; border-radius:100px;
  background: radial-gradient(120% 140% at 0% 0%, var(--brass-light), transparent 60%);
  opacity:0; transition: opacity .4s;
}
.btn:hover::after { opacity:.35; }
.btn--ghost {
  --bg: transparent; --fg: var(--wine);
  border: 1px solid var(--line); box-shadow: none;
}
.btn--ghost:hover { box-shadow: 0 14px 30px -18px rgba(46,13,24,.4); }
.btn--peach { --bg: var(--peach-warm); --fg: var(--wine-deep); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--peach-paper) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.05rem;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--wine); }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name {
  font-family: var(--font-display); font-size: 1.32rem; letter-spacing: .01em; line-height: 1;
}
.brand__name b { font-weight: 400; color: var(--brass-deep); }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.nav a {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .15em;
  font-size: .73rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  position: relative; padding: .3rem 0; transition: color .3s;
}
.nav a::after {
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background: var(--brass); transition: width .35s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--wine); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width:100%; }
.nav .btn { padding: .7rem 1.3rem; }
.nav__links { display:flex; gap: clamp(1rem,2vw,2.1rem); align-items:center; }
.nav__toggle { display:none; }

@media (max-width: 860px) {
  .nav__toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border:1px solid var(--line); background:transparent;
    border-radius:50%; cursor:pointer; color:var(--wine);
  }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.6rem; padding: 2rem var(--gutter);
    background: var(--wine);
    transform: translateX(100%); transition: transform .5s var(--ease);
    box-shadow: var(--shadow-soft);
  }
  .nav__links a { color: var(--cream-soft); font-size: .9rem; }
  .nav__links a:hover { color: var(--cream); }
  .nav__links .btn { color: var(--wine-deep); }
  body.nav-open .nav__links { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
}

/* ---------- footer ---------- */
.site-foot { background: var(--wine-deep); color: var(--cream-soft); position: relative; overflow: hidden; }
.site-foot__grad {
  position:absolute; inset:-30%; z-index:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(176,125,60,.28), transparent 70%),
    radial-gradient(45% 55% at 85% 80%, rgba(110,34,56,.55), transparent 70%);
  animation: floatgrad 26s ease-in-out infinite alternate;
}
.site-foot__inner { position: relative; z-index:1; padding-block: clamp(3.5rem,6vw,5.5rem); }
.foot-grid {
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem 2rem;
}
.site-foot h4 { color: var(--cream); font-size: 1.05rem; margin-bottom: 1.1rem; }
.site-foot .brand__name { color: var(--cream); }
.site-foot a { color: var(--cream-soft); text-decoration: none; }
.site-foot a:hover { color: var(--brass-light); }
.foot-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.foot-links a { font-size:.92rem; }
.foot-bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
}
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; overflow: clip; padding-block: clamp(4rem, 7vw, 7rem) clamp(4.5rem,8vw,8rem); }
.hero__bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__mesh {
  position:absolute; inset:-25%;
  background:
    radial-gradient(38% 45% at 18% 28%, rgba(246,217,196,.9), transparent 65%),
    radial-gradient(42% 50% at 82% 18%, rgba(217,173,110,.55), transparent 62%),
    radial-gradient(55% 60% at 70% 90%, rgba(110,34,56,.30), transparent 65%),
    radial-gradient(45% 55% at 30% 88%, rgba(176,125,60,.28), transparent 60%);
  filter: blur(6px);
  animation: floatgrad 24s ease-in-out infinite alternate;
}
.hero__grain { position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"); }

@keyframes floatgrad {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08) rotate(2deg); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.04) rotate(-2deg); }
}

.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1.3rem; }
.hero h1 .em { font-style: italic; color: var(--brass-deep); }
.hero__lede { font-size: clamp(1.1rem,1.4vw,1.32rem); color: var(--ink-soft); max-width: 46ch; margin-bottom: 2rem; line-height:1.62; }
.hero__cta { display:flex; gap: 1rem; flex-wrap: wrap; align-items:center; }
.hero__tag { margin-bottom: 1.6rem; }

.hero__media { position: relative; }
.hero__frame {
  position: relative; border-radius: 220px 220px 14px 14px;
  overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-soft);
  border: 1px solid rgba(176,125,60,.4);
}
.hero__frame img { width:100%; height:100%; object-fit: cover; display:block; transform: scale(1.06); }
.hero__frame::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(46,13,24,.42));
}
.hero__badge {
  position: absolute; z-index: 3; bottom: -1.2rem; left: -1.4rem;
  background: var(--peach-paper); border:1px solid var(--line);
  border-radius: 14px; padding: 1rem 1.2rem; box-shadow: var(--shadow-card);
  display:flex; align-items:center; gap:.85rem; max-width: 230px;
}
.hero__badge .num { font-family: var(--font-display); font-size: 2.3rem; color: var(--wine); line-height:1; }
.hero__badge .lab { font-size:.78rem; color: var(--ink-soft); line-height:1.3; }

/* curtain reveal */
.reveal-line { display:block; overflow:hidden; }
.reveal-line > span { display:block; will-change: transform; }

/* marquee strip */
.strip {
  background: var(--wine); color: var(--cream-soft);
  border-block: 1px solid rgba(176,125,60,.25);
  overflow: hidden; position: relative;
}
.strip__track {
  display:flex; gap: 3.5rem; padding-block: 1.05rem; white-space: nowrap;
  width: max-content; animation: marquee 38s linear infinite;
}
.strip__track span {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .26em;
  font-size: .78rem; display:inline-flex; align-items:center; gap: 1.2rem; color: var(--cream-soft);
}
.strip__track span::after { content:"✦"; color: var(--brass-light); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================================
   GENERIC SECTIONS / CARDS
   ========================================================================= */
.section--peach { background: linear-gradient(180deg, var(--peach) 0%, var(--peach-paper) 100%); }
.section--wine {
  background: var(--wine-deep); color: var(--cream); position:relative; overflow:hidden;
}
.section--wine h2, .section--wine h3 { color: var(--cream); }
.section--wine .lede { color: var(--cream-soft); }
.section--wine .eyebrow { color: var(--brass-light); }
.section--wine .eyebrow::before { background: linear-gradient(90deg, var(--brass-light), transparent); }
.section__grad {
  position:absolute; inset:-30%; z-index:0; opacity:.55; pointer-events:none;
  background:
    radial-gradient(40% 50% at 12% 18%, rgba(176,125,60,.30), transparent 68%),
    radial-gradient(46% 56% at 88% 84%, rgba(110,34,56,.6), transparent 70%);
  animation: floatgrad 30s ease-in-out infinite alternate;
}
.section--wine > .wrap { position: relative; z-index: 1; }

.sec-head { max-width: 60ch; margin-bottom: clamp(2.5rem,5vw,4rem); }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head .eyebrow { margin-bottom: 1.1rem; }
.sec-head p { color: var(--ink-soft); }
.section--wine .sec-head p { color: var(--cream-soft); }

/* split intro */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.split--media-first .split__media { order:-1; }
.split__media { position: relative; }
.split__media img {
  width:100%; border-radius: 14px; display:block; box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.split__media .tag-chip {
  position:absolute; top:1rem; left:1rem;
  background: var(--peach-paper); color: var(--wine);
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.5rem .9rem; border-radius:100px; box-shadow: var(--shadow-card);
}
@media (max-width:820px){ .split, .hero__grid { grid-template-columns: 1fr; } .split--media-first .split__media{ order:0; } }

/* pillars / services grid */
.cards { display:grid; gap: 1.4rem; grid-template-columns: repeat(3,1fr); }
.cards--2 { grid-template-columns: repeat(2,1fr); }
.card {
  background: var(--peach-paper); border:1px solid var(--line); border-radius: 14px;
  padding: clamp(1.6rem, 2.4vw, 2.2rem); position: relative; overflow:hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.card::before {
  content:""; position:absolute; left:0; top:0; height:100%; width:3px;
  background: linear-gradient(var(--brass), var(--wine-soft)); transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(176,125,60,.5); }
.card:hover::before { transform: scaleY(1); }
.card__num { font-family: var(--font-mono); color: var(--brass-deep); font-size:.78rem; letter-spacing:.2em; }
.card h3 { margin: .8rem 0 .5rem; }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 0; }
.card__icon {
  width: 50px; height: 50px; border-radius: 12px; display:grid; place-items:center;
  background: var(--peach); border:1px solid var(--line); color: var(--wine); margin-bottom: 1rem;
}
.section--wine .card {
  background: rgba(248,237,228,.05); border-color: var(--line-dark);
}
.section--wine .card h3 { color: var(--cream); }
.section--wine .card p { color: var(--cream-soft); }
.section--wine .card__icon { background: rgba(176,125,60,.16); border-color: var(--line-dark); color: var(--brass-light); }
@media (max-width:860px){ .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .cards, .cards--2 { grid-template-columns: 1fr; } }

/* stats */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; }
.stat { text-align:left; padding: 1.6rem 0; border-top: 1px solid var(--line-dark); }
.stat .n { font-family: var(--font-display); font-size: clamp(2.6rem,4vw,3.6rem); color: var(--cream); line-height:1; }
.stat .n em { color: var(--brass-light); font-style: normal; }
.stat .l { font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color: var(--cream-soft); margin-top:.7rem; }
@media (max-width:760px){ .stats { grid-template-columns: 1fr 1fr; } }

/* testimonials */
.quotes { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.quote {
  background: var(--peach-paper); border:1px solid var(--line); border-radius: 16px;
  padding: clamp(1.7rem,2.4vw,2.3rem); display:flex; flex-direction:column; gap:1.2rem;
  position: relative;
}
.quote__mark { font-family: var(--font-display); font-size:3.4rem; color: var(--brass-light); line-height:.6; height:1.4rem; }
.quote p { font-family: var(--font-display); font-size: 1.18rem; line-height:1.45; color: var(--wine); margin:0; }
.quote__who { display:flex; align-items:center; gap:.8rem; margin-top:auto; }
.quote__av {
  width:44px; height:44px; border-radius:50%; flex:none;
  background: linear-gradient(135deg, var(--brass-light), var(--wine-soft));
  display:grid; place-items:center; color: var(--peach-paper); font-family: var(--font-display); font-size:1.1rem;
}
.quote__name { font-weight: 600; font-size:.92rem; color: var(--ink); }
.quote__role { font-family: var(--font-mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color: var(--ink-soft); }
@media (max-width:860px){ .quotes { grid-template-columns: 1fr; } }

/* team */
.team { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.member { text-align:center; }
.member__ph {
  aspect-ratio: 1; border-radius: 16px; margin-bottom: 1rem; position:relative; overflow:hidden;
  background: linear-gradient(150deg, var(--peach-warm), var(--wine-soft));
  display:grid; place-items:center;
}
.member__ph span { font-family: var(--font-display); font-size: 3rem; color: var(--peach-paper); opacity:.92; }
.member h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.member .role { font-family: var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--brass-deep); }
.member p { color: var(--ink-soft); font-size:.92rem; margin-top:.7rem; }
@media (max-width:760px){ .team { grid-template-columns: 1fr 1fr; } }
@media (max-width:460px){ .team { grid-template-columns: 1fr; } }

/* approach steps */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; counter-reset: step; }
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position:absolute; top:0; left:0; font-family: var(--font-display); font-size: 2.4rem; color: var(--brass-light);
}
.step h3 { font-size:1.3rem; margin-bottom:.4rem; }
.step p { color: var(--ink-soft); font-size:.96rem; margin:0; }
.section--wine .step p { color: var(--cream-soft); }
@media (max-width:760px){ .steps { grid-template-columns: 1fr; } }

/* =========================================================================
   INSIGHTS (posts) + RESOURCES
   ========================================================================= */
.insights { display:grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem; }
.post-card {
  display:flex; flex-direction:column; background: var(--peach-paper);
  border:1px solid var(--line); border-radius: 16px; overflow:hidden; text-decoration:none; color:inherit;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(176,125,60,.5); color:inherit; }
.post-card__media { aspect-ratio: 16/9; overflow:hidden; background: var(--peach-warm); }
.post-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__noimg {
  width:100%; height:100%; display:grid; place-items:center;
  background: linear-gradient(140deg, var(--wine), var(--brass-deep));
  font-family: var(--font-display); color: var(--peach); font-size:1.4rem; padding:1rem; text-align:center;
}
.post-card__body { padding: 1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.post-card__meta { font-family: var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--brass-deep); display:flex; gap:.8rem; }
.post-card h3 { font-size: 1.4rem; margin:0; }
.post-card p { color: var(--ink-soft); font-size:.95rem; margin:0; }
.post-card__more { margin-top:auto; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--wine); display:inline-flex; gap:.4rem; }
.post-card:hover .post-card__more { color: var(--brass-deep); }
@media (max-width:720px){ .insights { grid-template-columns: 1fr; } }

/* resources blogroll */
.resources { display:grid; grid-template-columns: repeat(2,1fr); gap: .9rem 1.6rem; }
.res-item {
  display:flex; align-items:baseline; gap:1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line-dark);
  text-decoration:none;
}
.res-item .res-anchor {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--cream);
  transition: color .3s; flex:1;
}
.res-item:hover .res-anchor { color: var(--brass-light); }
.res-item .res-host { font-family: var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--cream-soft); }
.res-item .arw { color: var(--brass-light); transition: transform .3s var(--ease); }
.res-item:hover .arw { transform: translateX(4px); }
@media (max-width:680px){ .resources { grid-template-columns: 1fr; } }

/* =========================================================================
   ARTICLE
   ========================================================================= */
.article-hero { padding-block: clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem); position:relative; overflow:hidden; }
.article-hero .section__grad { opacity:.4; }
.crumbs { font-family: var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--brass-deep); margin-bottom:1.5rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.crumbs a { color: var(--ink-soft); text-decoration:none; }
.crumbs a:hover { color: var(--wine); }
.article-hero h1 { font-size: clamp(2.2rem,4.6vw,3.8rem); max-width: 20ch; margin-bottom:1.2rem; }
.article-meta { display:flex; gap:1.6rem; flex-wrap:wrap; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }
.article-feat { margin: 0 auto; max-width: 1000px; padding-inline: var(--gutter); margin-top:-1rem; }
.article-feat img { width:100%; border-radius:16px; display:block; box-shadow: var(--shadow-soft); border:1px solid var(--line); aspect-ratio:16/8; object-fit:cover; }

.article-body { max-width: 720px; margin-inline:auto; padding-block: clamp(2.5rem,5vw,4rem); }
.article-body h2 { margin-top: 2.4rem; }
.article-body h3 { margin-top: 1.8rem; color: var(--wine-soft); }
.article-body p, .article-body li { color: #3a262c; }
.article-body a { color: var(--brass-deep); font-weight:500; text-decoration: underline; text-decoration-color: rgba(176,125,60,.5); }
.article-body a:hover { color: var(--wine); }
.article-body img { max-width:100%; height:auto; border-radius:12px; margin: 1.6rem 0; border:1px solid var(--line); display:block; }
.article-body ul, .article-body ol { padding-left: 1.3rem; margin: 1.2rem 0; }
.article-body li { margin-bottom: .5rem; }
.article-body strong { color: var(--wine); font-weight: 600; }
.article-body table { width:100%; border-collapse: collapse; margin: 1.6rem 0; font-size:.94rem; }
.article-body th { background: var(--peach); text-align:left; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--wine); padding:.8rem 1rem; border:1px solid var(--line); }
.article-body td { padding:.8rem 1rem; border:1px solid var(--line); vertical-align: top; }
.article-body section { margin: 1.5rem 0; }
.article-body h2:first-child, .article-body p:first-child { margin-top:0; }
.article-body blockquote { border-left:3px solid var(--brass); padding-left:1.2rem; margin:1.6rem 0; font-family: var(--font-display); font-size:1.3rem; color: var(--wine); }

.article-callout {
  background: var(--wine); color: var(--cream); border-radius:16px;
  padding: clamp(1.8rem,3vw,2.6rem); margin: 3rem auto 0; max-width:720px;
  display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; justify-content:space-between;
  position:relative; overflow:hidden;
}
.article-callout h3 { color: var(--cream); margin:0 0 .4rem; }
.article-callout p { color: var(--cream-soft); margin:0; max-width:42ch; }
.article-callout .article-callout__grad { position:absolute; inset:-40%; opacity:.5;
  background: radial-gradient(40% 50% at 80% 20%, rgba(176,125,60,.4), transparent 60%); animation: floatgrad 22s ease-in-out infinite alternate; }
.article-callout > * { position:relative; z-index:1; }

/* contact page */
.contact-grid { display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.contact-card {
  background: var(--peach-paper); border:1px solid var(--line); border-radius:18px;
  padding: clamp(1.8rem,3vw,2.6rem); box-shadow: var(--shadow-card);
}
.field { margin-bottom: 1.3rem; }
.field label { display:block; font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color: var(--wine); margin-bottom:.55rem; font-weight:600; }
.field input, .field textarea {
  width:100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #fff; border:1px solid var(--line); border-radius: 10px; padding: .9rem 1rem;
  transition: border-color .3s, box-shadow .3s; resize: vertical;
}
.field input:focus, .field textarea:focus { outline:none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(176,125,60,.2); }
.field textarea { min-height: 130px; }
.contact-aside .info-item { display:flex; gap:1rem; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.contact-aside .info-item:last-child { border-bottom:0; }
.contact-aside .ii-ic { width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--peach);border:1px solid var(--line);color:var(--wine); }
.contact-aside .ii-k { font-family: var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--brass-deep); }
.contact-aside .ii-v { font-size:1.05rem; color:var(--wine); }
.contact-aside a { color: var(--wine); }
@media (max-width:820px){ .contact-grid { grid-template-columns:1fr; } }

/* page hero (about/services/contact) */
.page-hero { position:relative; overflow:hidden; padding-block: clamp(4rem,7vw,6.5rem) clamp(3rem,5vw,4.5rem); }
.page-hero .hero__mesh { filter: blur(10px); }
.page-hero > .wrap { position:relative; z-index:2; }
.page-hero h1 { font-size: clamp(2.5rem,6vw,4.6rem); max-width: 16ch; }
.page-hero .lede { max-width: 52ch; margin-top: 1.2rem; }

/* feature list (about values) */
.values { display:grid; grid-template-columns: repeat(2,1fr); gap: 1.3rem; }
.value { display:flex; gap:1.1rem; padding:1.4rem; border:1px solid var(--line); border-radius:14px; background: var(--peach-paper); }
.value .v-ic { width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--peach);border:1px solid var(--line);color:var(--wine); }
.value h3 { font-size:1.2rem; margin-bottom:.3rem; }
.value p { font-size:.93rem; color:var(--ink-soft); margin:0; }
@media (max-width:680px){ .values { grid-template-columns:1fr; } }

/* service detail rows */
.svc { display:grid; grid-template-columns: .4fr 1fr; gap: 2rem; padding: clamp(2rem,4vw,3rem) 0; border-top:1px solid var(--line); align-items:start; }
.svc:first-of-type { border-top:0; }
.svc__k { font-family: var(--font-mono); color: var(--brass-deep); font-size:.78rem; letter-spacing:.2em; }
.svc h3 { font-size: clamp(1.5rem,2.4vw,2.1rem); margin-bottom:.7rem; }
.svc__feats { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.4rem; }
.svc__feats li { display:flex; gap:.6rem; font-size:.93rem; color:var(--ink-soft); }
.svc__feats li::before { content:"✦"; color: var(--brass); }
@media (max-width:680px){ .svc { grid-template-columns:1fr; gap:.8rem; } .svc__feats{ grid-template-columns:1fr; } }

/* big CTA band */
.cta-band { text-align:center; }
.cta-band h2 { font-size: clamp(2.2rem,4.5vw,3.6rem); max-width: 18ch; margin-inline:auto; }
.cta-band p { max-width: 46ch; margin: 1rem auto 2rem; }

/* =========================================================================
   MOTION — entrance / scroll reveal
   ========================================================================= */
[data-anim] { opacity: 0; }
.js [data-anim="up"]    { transform: translateY(34px); }
.js [data-anim="fade"]  { transform: none; }
.js [data-anim="left"]  { transform: translateX(-30px); }
.js [data-anim="right"] { transform: translateX(30px); }
[data-anim].is-in { opacity:1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-anim].is-in { transition-delay: var(--d, 0s); }

/* curtain (hero headline lines) */
.js .curtain > span { transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: var(--d,0s); }
.js .curtain.is-in > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-anim] { opacity:1 !important; transform:none !important; }
  .js .curtain > span { transform:none !important; }
  .hero__frame img { transform: scale(1); }
}