/* ===== Page: default (Home) — Section 1 Hero “Harvest Ribbon” ===== */

/* Subtle “grain” background using layered gradients + noise-like pattern */
.hero-harvest {
  position: relative;
  overflow: clip;
  padding-block: clamp(64px, 10vw, 120px);
  isolation: isolate;
}
.grain-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(66,135,103,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(173,136,71,.12), transparent 60%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.02) 0 2px, rgba(0,0,0,0) 2px 6px),
    #f8f5ef;
  animation: bg-drift 18s linear infinite alternate;
}
@keyframes bg-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 6% 2%, -4% 3%, 12px 8px; }
}

/* Decorative ribbon */
.ribbon {
  position: absolute; z-index: -1;
  left: -10%; right: -10%; bottom: -80px; height: 220px;
  background:
    radial-gradient(40% 140% at 50% 50%, rgba(255,255,255,.35) 0 40%, rgba(255,255,255,0) 60%),
    linear-gradient(90deg, #2d6a4f 0%, #3b7d5f 35%, #4f8f6c 70%, #6aa57e 100%);
  transform: rotate(-2.8deg);
  filter: blur(1.2px) saturate(1.05);
  opacity: .85;
}

/* Layout */
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

/* Copy */
.hero-eyebrow {
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #2d6a4f; margin: 0 0 10px;
}
.hero-title {
  font-family: Playfair, serif;
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.08; margin: 0 0 14px;
}
.hero-lede { max-width: 54ch; margin: 0 0 18px; }

/* Badges row */
.hero-badges {
  display: flex; gap: clamp(12px, 2vw, 20px); list-style: none; padding: 0; margin: 22px 0 0;
}
.hb {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hb:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,.10); }
.hb-img { border-radius: 10px; }

/* Media area */
.hero-media { display: grid; gap: 16px; }
.hm-card { margin: 0; }
.hm-card figcaption { font-size: .92rem; color: #355d48; margin-top: 8px; }

/* Floating stack */
.hm-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.float-y { animation: floatY 6s ease-in-out infinite; }
.float-x { animation: floatX 7s ease-in-out infinite; }
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes floatX {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(6px); }
}

/* Hover “lift” for all hero images */
.media-img {
  border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.media-img:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 36px rgba(0,0,0,.14); }

/* ===== Responsive for hero ===== */
@media (max-width: 1040px){
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
}
@media (max-width: 720px){
  .hero-badges { flex-wrap: wrap; }
  .hb { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 420px){
  .hero-title { font-size: clamp(26px, 8vw, 34px); }
}
/* ===== SECTION 2: Pasture Timeline ===== */
.pasture-timeline { padding-block: clamp(56px, 8vw, 96px); position: relative; }
.pt-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }
.sec-title{ font-family:Playfair,serif; margin:0 0 6px; font-size:clamp(24px,4vw,40px); }
.sec-lede{ margin:0 0 18px; max-width:60ch; }

.pt-rail{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78ch, 86vw);
  gap: clamp(16px, 3vw, 28px);
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding: 14px 6px 6px;
}
.tl-step{
  scroll-snap-align: start;
  background:#fff; border-radius:16px; padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.tl-step h3{ margin:4px 0 8px; font-size:1.2rem; }
.tl-step p{ margin:0; }
.tl-fig{ margin:0 0 8px; }
.tl-fig img{ border-radius:12px; }

.pt-controls{
  display:flex; justify-content:flex-end; gap:12px; margin-top:12px;
}
.pt-btn{
  width:40px; height:36px; border:1px solid rgba(0,0,0,.12); background:#fff; border-radius:10px;
  font-size:20px; line-height:1; cursor:pointer; transition:transform .2s, box-shadow .2s;
}
.pt-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.10); }

/* ===== SECTION 3: Flavor Ribbon ===== */
.flavor-ribbon{ position:relative; padding-block: clamp(56px, 8vw, 100px); overflow:clip; }
.fr-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.fr-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  position:relative;
}
.fr-col{
  background:#fff; border-radius:18px; padding:18px 18px 22px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  transform: translateY(0);
  transition: transform .25s ease;
}
.fr-col:nth-child(2){ transform: translateY(10px); }
.fr-col:nth-child(3){ transform: translateY(20px); }
.fr-col:hover{ transform: translateY(-2px); }

.fr-float{
  position:absolute; width:min(320px, 60vw);
  background:#fff; border-radius:16px; box-shadow:0 14px 32px rgba(0,0,0,.10);
  padding:10px;
  animation: bob 7.5s ease-in-out infinite;
}
.fr-float img{ border-radius:10px; }
.fr-float figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }
.fr-float-a{ top: 18%; left: -2%; }
.fr-float-b{ bottom: 10%; right: -2%; animation-duration: 8.5s; }

@keyframes bob {
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

/* декоративная лента */
.fr-ribbon{
  position:absolute; inset:auto -30% 6% -30%; height: 160px;
  background: linear-gradient(90deg,#6aa57e 0%,#4f8f6c 40%,#3b7d5f 70%,#2d6a4f 100%);
  transform: rotate(-2deg);
  filter: blur(1px);
  opacity:.85;
  z-index:-1;
}

/* ===== SECTION 4: Cold-Chain Belt ===== */
.coldchain-belt{ padding-block: clamp(56px, 8vw, 96px); }
.cb-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.cb-belt{
  position:relative; background:#fff; border-radius:20px; padding:24px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.cb-track{
  position:absolute; left:16px; right:16px; top:62px; height:6px; border-radius:3px;
  background: linear-gradient(90deg, rgba(45,106,79,.15), rgba(45,106,79,.25));
  overflow:hidden;
}
.cb-track .dot{
  position:absolute; top:-4px; width:14px; height:14px; border-radius:50%;
  background:#2d6a4f;
  animation: moveDots 7s linear infinite;
}
.cb-track .dot:nth-child(1){ left:-8%; animation-delay:0s; }
.cb-track .dot:nth-child(2){ left:10%; animation-delay:.4s; }
.cb-track .dot:nth-child(3){ left:30%; animation-delay:.8s; }
.cb-track .dot:nth-child(4){ left:55%; animation-delay:1.2s; }
.cb-track .dot:nth-child(5){ left:80%; animation-delay:1.6s; }
@keyframes moveDots {
  0%{ transform: translateX(0) }
  100%{ transform: translateX(220%) }
}

.cb-stations{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2.5vw, 22px);
}
.cb-node{
  background:#f9fbfa; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:14px;
  transition: transform .2s, box-shadow .2s;
}
.cb-node:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.cb-node h3{ margin:6px 0 8px; font-size:1.1rem; }
.cb-fig{ margin:0 0 8px; }
.cb-fig img{ border-radius:10px; }

/* ===== Responsive tweaks for 2–4 ===== */
@media (max-width: 960px){
  .fr-grid{ grid-template-columns: 1fr; }
  .fr-col:nth-child(2), .fr-col:nth-child(3){ transform:none; }
  .fr-float-a{ top: -2%; left: -1%; }
  .fr-float-b{ bottom: -2%; right: -1%; }
  .cb-stations{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .pt-rail{ grid-auto-columns: 86vw; }
  .fr-float{ position:relative; inset:auto; width:100%; margin-top:12px; }
  .fr-ribbon{ display:none; }
  .cb-stations{ grid-template-columns: 1fr; }
}
/* --- FIX: prevent floats from overlapping text in Flavor Ribbon --- */
.flavor-ribbon { position: relative; }

/* Карточки и заголовок поверх всего */
.fr-head,
.fr-grid { position: relative; z-index: 3; }

/* Плавающие изображения ниже карточек */
.fr-float { 
  z-index: 1;           /* было по умолчанию; теперь точно ниже .fr-grid */
  pointer-events: none; /* чтобы не перекрывали ссылки/текст */
}

/* Декоративная лента ещё ниже */
.fr-ribbon { z-index: 0; }

/* Чуть сместим float-элементы, чтобы они не заходили на блоки */
.fr-float-a{ top: 10%; left: -4%; }
.fr-float-b{ bottom: 8%; right: -4%; }

/* На узких экранах они и так становятся relative — подстрахуем отступами */
@media (max-width: 960px){
  .fr-grid{ margin-top: 8px; }
}
@media (max-width: 640px){
  .fr-float{ 
    position: relative; 
    inset: auto; 
    width: 100%; 
    margin-top: 12px; 
    z-index: 2;        /* чуть выше ленты, но ниже карточек */
  }
}
/* ===== SECTION 5: Field Notes ===== */
.field-notes{ padding-block: clamp(56px, 8vw, 96px); position: relative; }
.fn-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.fn-ticker{
  position: relative;
  background:#fff; border-radius:20px; padding:22px;
  box-shadow:0 14px 32px rgba(0,0,0,.08);
  overflow:hidden;
}
.fn-row{
  display:flex; gap:16px; align-items:center;
  white-space: nowrap;
  padding:6px 0;
  animation: fn-marquee 22s linear infinite;
}
.fn-row.clone{ animation-delay: -11s; }
@keyframes fn-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.pill{
  display:inline-block;
  background:#f3faf6; color:#1a1a1a;
  border:1px solid rgba(0,0,0,.08);
  padding:10px 14px; border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-weight:600;
}
.fn-ticker:hover .fn-row{ animation-play-state: paused; }

/* фото в уголках */
.fn-photo{
  position:absolute; width:min(320px, 60vw); background:#fff; border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.10); padding:10px;
}
.fn-photo img{ border-radius:10px; }
.fn-photo figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }
.fn-photo.a{ top:-18px; right:-12px; }
.fn-photo.b{ bottom:-18px; left:-12px; }
@media (max-width: 700px){
  .fn-photo{ position:relative; inset:auto; width:100%; margin-top:10px; }
}

/* ===== SECTION 6: Grazing Map ===== */
.grazing-map{ padding-block: clamp(56px, 8vw, 100px); }
.gm-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.gm-board{
  position: relative;
  height: 320px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, #e9f4ee, #d7ecdf),
    repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 2px, rgba(255,255,255,0) 2px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 2px, rgba(255,255,255,0) 2px 40px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  overflow:hidden;
}

.gm-node{
  position:absolute; width:16px; height:16px; border-radius:50%;
  background:#2d6a4f; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.15);
  cursor:pointer;
}
.gm-node:focus-visible{ outline:3px solid #6aa57e; outline-offset:2px; }

.gm-pop{
  position:absolute; left:50%; transform:translate(-50%, -110%);
  white-space: nowrap; background:#fff; border:1px solid rgba(0,0,0,.08);
  padding:8px 10px; border-radius:10px; box-shadow:0 10px 22px rgba(0,0,0,.10);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  font-weight:600; color:#355d48;
}
.gm-node:hover .gm-pop,
.gm-node:focus .gm-pop{ opacity:1; transform:translate(-50%, -120%); }

/* координаты без инлайна */
.gm-node.n1{ left:18%; top:22%; }
.gm-node.n2{ left:64%; top:28%; }
.gm-node.n3{ left:74%; top:66%; }
.gm-node.n4{ left:32%; top:70%; }

/* боковая колонка с фото */
.gm-side{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 20px);
  margin-top:14px;
}
.gm-fig{ margin:0; background:#fff; border-radius:16px; padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); }
.gm-fig img{ border-radius:10px; }
.gm-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 820px){
  .gm-board{ height: 280px; }
  .gm-side{ grid-template-columns: 1fr; }
}

/* ===== SECTION 7: Quiet Tools ===== */
.quiet-tools{ padding-block: clamp(56px, 8vw, 96px); position:relative; }
.qt-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.qt-item{
  background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding:12px 16px; margin-bottom:10px;
}
.qt-item > summary{
  list-style:none; cursor:pointer; font-weight:800;
}
.qt-item > summary::-webkit-details-marker{ display:none; }
.qt-item[open]{ border-color: rgba(45,106,79,.3); }
.qt-item p{ margin:8px 0 4px; }

.qt-float{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px;
}
.qt-fig{ margin:0; background:#fff; border-radius:16px; padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); }
.qt-fig img{ border-radius:10px; }
.qt-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 720px){
  .qt-float{ grid-template-columns: 1fr; }
}
/* ===== 8. Pasture Compass ===== */
.pasture-compass{ padding-block: clamp(56px, 8vw, 100px); }
.pc-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.pc-grid{ display:grid; gap:16px; }
.pc-wedges{
  --r: 520px; /* виртуальный диаметр сетки, не влияет на реальную ширину родителя */
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 2vw, 18px);
  list-style:none; margin:0; padding:0;
  position:relative;
}
.pc-wedge{
  background:#fff; border-radius:18px; padding:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
}
.pc-wedge:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }

/* декоративный круг в центре сетки */
.pc-wedges::before{
  content:"";
  position:absolute; inset: 10% 35% auto 35%; aspect-ratio:1 / 1;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(45,106,79,.12), transparent 60%);
  z-index:0;
}

/* фото-подвал */
.pc-photos{
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: clamp(12px, 2vw, 18px);
}
.pc-fig{ margin:0; background:#fff; border-radius:16px; padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); }
.pc-fig img{ border-radius:10px; }
.pc-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 900px){
  .pc-wedges{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .pc-wedges{ grid-template-columns: 1fr; }
  .pc-photos{ grid-template-columns: 1fr; }
}

/* ===== 9. Milking Rhythm ===== */
.milking-rhythm{ padding-block: clamp(56px, 8vw, 96px); }
.mrh-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.mrh-flow{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(12px, 2.5vw, 24px);
  align-items:start;
}
.mrh-steps{
  counter-reset: step;
  display:grid; gap:12px; margin:0; padding:0; list-style:none;
  position:relative;
}
.mrh-steps::before{
  content:""; position:absolute; left:14px; top:0; bottom:0; width:3px; border-radius:3px;
  background: linear-gradient(180deg, rgba(45,106,79,.25), rgba(45,106,79,.45));
}
.mrh-step{
  position:relative; background:#fff; border-radius:16px; padding:14px 14px 14px 46px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.mrh-step::before{
  counter-increment: step;
  content: counter(step);
  position:absolute; left:10px; top:12px;
  width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:#2d6a4f; color:#fff; font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
/* «шагающие» точки вдоль линии */
.mrh-steps::after{
  content:"";
  position:absolute; left:11px; top:0; width:9px; height:9px; border-radius:50%;
  background:#2d6a4f;
  animation: mrh-walk 4.5s linear infinite;
}
@keyframes mrh-walk{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(100%); }
}

.mrh-side{ display:grid; gap:12px; }
.mrh-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.mrh-fig img{ border-radius:10px; }
.mrh-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 900px){
  .mrh-flow{ grid-template-columns: 1fr; }
}

/* ===== 10. Neighbours & Markets ===== */
.neigh-markets{ padding-block: clamp(56px, 8vw, 96px); }
.nm-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(14px, 3vw, 28px); align-items:start; }

.nm-sticky{
  position: sticky; top: 84px;   /* ниже фикс-хедера с запасом */
  background: #f7fbf8;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px; padding:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.nm-stories{ display:grid; gap:12px; }
.nm-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding:14px;
  transition: transform .2s, box-shadow .2s;
}
.nm-card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }

/* галерея снизу секции */
.nm-gallery{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:10px;
}
.nm-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.nm-fig img{ border-radius:10px; }
.nm-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .nm-wrap{ grid-template-columns: 1fr; }
  .nm-sticky{ position: static; }
  .nm-gallery{ grid-template-columns: 1fr; }
}
/* ===== 11. Seed Ledger ===== */
.seed-ledger{ padding-block: clamp(56px, 8vw, 96px); }
.sl-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.sl-wrap{
  display:grid; grid-template-columns: 1.3fr .7fr; gap: clamp(12px, 2.5vw, 24px);
  align-items:start;
}
.sl-grid{
  overflow:auto;
  border-radius:18px; background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.sl-row{ display:grid; grid-template-columns: 1fr .8fr .7fr 1.2fr; }
.sl-headrow{ position: sticky; top:0; background:#f5faf7; z-index:2; font-weight:800; }
.sl-cell{
  padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.06);
  min-width: 140px;
}
.sl-cell.is-sticky{
  position: sticky; left:0; z-index:1; background: linear-gradient(90deg,#ffffff 70%, rgba(255,255,255,.9));
  border-right:1px solid rgba(0,0,0,.06);
  font-weight:700;
}
.sl-side{ display:grid; gap:12px; }
.sl-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.sl-fig img{ border-radius:10px; }
.sl-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 900px){
  .sl-wrap{ grid-template-columns: 1fr; }
}

/* ===== 12. Monsoon Watch ===== */
.monsoon-watch{ padding-block: clamp(56px, 8vw, 96px); position:relative; }
.mw-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.mw-dial{
  position:relative; margin: 6px auto 16px; width: min(360px, 80vw); aspect-ratio: 1 / 1;
}
.mw-arc{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from -120deg, #6aa57e 0 30%, #4f8f6c 30% 60%, #3b7d5f 60% 85%, transparent 85% 100%);
  mask: radial-gradient(circle at 50% 50%, transparent 62%, #000 63%);
  opacity:.25;
}
.mw-needle{
  position:absolute; left:50%; top:50%; width:2px; height:42%;
  background:#2d6a4f; transform-origin: bottom center; transform: translate(-50%, -100%) rotate(18deg);
  border-radius:2px; box-shadow:0 2px 8px rgba(0,0,0,.18);
  animation: mw-swing 6s ease-in-out infinite;
}
@keyframes mw-swing{
  0%{ transform: translate(-50%, -100%) rotate(-18deg); }
  50%{ transform: translate(-50%, -100%) rotate(22deg); }
  100%{ transform: translate(-50%, -100%) rotate(-18deg); }
}
.mw-dots{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 30% 60%, rgba(45,106,79,.18) 0 6px, transparent 7px 100%);
  animation: mw-drift 9s linear infinite;
}
@keyframes mw-drift{
  from{ transform: rotate(0deg); } to{ transform: rotate(360deg); }
}

.mw-cards{
  display:grid; grid-template-columns: repeat(3,1fr); gap:12px;
}
.mw-card{
  background:#fff; border-radius:16px; padding:14px; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.mw-gallery{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px;
}
.mw-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.mw-fig img{ border-radius:10px; }
.mw-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .mw-cards{ grid-template-columns: 1fr; }
  .mw-gallery{ grid-template-columns: 1fr; }
}

/* ===== 13. Taste Wheel ===== */
.taste-wheel{ padding-block: clamp(56px, 8vw, 96px); }
.tw-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.tw-wrap{ display:grid; gap:14px; }
.tw-ring{
  margin: 0 auto; width: min(420px, 86vw); aspect-ratio:1/1; border-radius:50%;
  background: conic-gradient(#6aa57e 0 20%, #4f8f6c 20% 36%, #3b7d5f 36% 52%, #2d6a4f 52% 68%, #8abf9d 68% 84%, #a6d3b5 84% 100%);
  mask: radial-gradient(circle, transparent 57%, #000 58%);
  filter: blur(0.6px) saturate(1.02);
  opacity:.35;
}
.tw-notes{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0; padding:0; list-style:none;
}
.tw-note{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:10px 14px; font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s;
}
.tw-note:hover{ transform: translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.10); }

.tw-gallery{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
.tw-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.tw-fig img{ border-radius:10px; }
.tw-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 760px){
  .tw-gallery{ grid-template-columns: 1fr; }
}
/* ===== 14. Dawn Routine ===== */
.dawn-routine{ padding-block: clamp(56px, 8vw, 96px); position:relative; }
.dr-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.dr-wrap{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(12px, 2.5vw, 24px); align-items:start;
}
.dr-steps{
  counter-reset: step;
  display:grid; gap:12px; margin:0; padding:0; list-style:none; position:relative;
}
.dr-step{
  position:relative; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:14px 14px 14px 52px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s;
}
.dr-step:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }
.dr-step::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center; background:#2d6a4f; color:#fff; font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* боковая пара фото */
.dr-side{ display:grid; gap:12px; }
.dr-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.dr-fig img{ border-radius:10px; }
.dr-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

/* бегущая прогресс-линия */
.dr-progress{
  position:relative; margin-top:14px; height: 10px; border-radius:6px; overflow:hidden;
  background: linear-gradient(90deg, rgba(45,106,79,.18), rgba(45,106,79,.28));
}
.dr-line{
  position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(45,106,79,.0), rgba(45,106,79,.55), rgba(45,106,79,.0));
  animation: dr-scan 5.5s linear infinite;
}
.dr-dot{
  position:absolute; top:50%; left:0; width:12px; height:12px; border-radius:50%;
  background:#2d6a4f; transform: translate(-50%, -50%);
  animation: dr-run 5.5s linear infinite;
}
@keyframes dr-scan{
  0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); }
}
@keyframes dr-run{
  0%{ left:0%; } 100%{ left:100%; }
}

@media (max-width: 900px){
  .dr-wrap{ grid-template-columns: 1fr; }
}

/* ===== 15. Yearbook Stories ===== */
.yearbook-stories{ padding-block: clamp(56px, 8vw, 100px); }
.ys-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.ys-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.5vw, 20px);
}
.ys-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s;
}
.ys-card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }
.ys-fig{ margin:0 0 8px; }
.ys-fig img{ border-radius:12px; }
.ys-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

.ys-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:14px; padding:12px 14px; border-radius:16px;
  background:#f3faf6; border:1px solid rgba(0,0,0,.06);
}

@media (max-width: 980px){
  .ys-grid{ grid-template-columns: 1fr; }
  .ys-foot{ flex-direction:column; align-items:flex-start; }
}
/* --- INTERACTIVE: Taste Wheel --- */
.taste-wheel { --tw-rot: 0deg; }

.tw-note { cursor: pointer; user-select: none; }
.tw-note.is-active{
  background:#2d6a4f; color:#fff; box-shadow:0 14px 30px rgba(0,0,0,.16);
}

/* кольцо + активный сектор поверх через ::after */
.tw-ring{ position: relative; }
.tw-ring::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  /* подсветка ровно 60deg (6 секторов) c мягким краем */
  background: conic-gradient(from -30deg,
      rgba(45,106,79,.55) 0 60deg, transparent 61deg 360deg);
  mask: radial-gradient(circle, transparent 57%, #000 58%);
  transform: rotate(var(--tw-rot));
  opacity: .0;                   /* пока не активировано */
  transition: transform .35s ease, opacity .2s ease;
}
.taste-wheel.is-on .tw-ring::after{ opacity: .9; }

/* контейнер для описания (JS добавит) */
.tw-desc{
  margin: 8px auto 0; max-width: 60ch; text-align:center;
  font-weight: 600; color:#355d48;
}
/* ===== CONTACT FORM ===== */
.contact-form{ padding-block: clamp(56px, 8vw, 96px); }
.contact-header .eyebrow{
  letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px;
}

.form-wrapper{
  margin-top:12px;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding: clamp(14px, 3vw, 22px);
  display:grid; gap:12px;
}

.form-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
@media (max-width: 720px){
  .form-row{ grid-template-columns: 1fr; }
}

.form-field{ display:grid; gap:6px; }
.form-label{ font-weight:700; color:#355d48; }

.form-field input,
.form-field textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:12px 14px;
  font: inherit;
  background:#f9fbfa;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-field input:focus,
.form-field textarea:focus{
  outline: none;
  border-color:#2d6a4f;
  background:#fff;
  box-shadow:0 0 0 4px rgba(45,106,79,.12);
}

.form-checkbox{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; user-select:none;
}
.form-checkbox input{
  width:18px; height:18px; border-radius:4px; accent-color:#2d6a4f;
}
.form-checkbox a{ font-weight:700; }

.cta-button{
  justify-self: start;
  padding:12px 18px; border:0; border-radius:12px; cursor:pointer;
  background:#2d6a4f; color:#fff; font-weight:800;
  box-shadow:0 12px 24px rgba(45,106,79,.22);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.cta-button:hover{ transform: translateY(-2px); box-shadow:0 16px 32px rgba(45,106,79,.28); }
.cta-button:active{ transform: translateY(0); box-shadow:0 10px 20px rgba(45,106,79,.2); }

/* плавное появление при скролле (совместимо с твоим data-reveal) */
.animate-on-scroll{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.animate-on-scroll.is-in{ opacity:1; transform: translateY(0); }
/* ===== Origin Story (long-form section) ===== */
.origin-story{
  position: relative;
  padding-block: clamp(64px, 10vw, 120px);
  background:
    radial-gradient(120% 80% at 50% 120%, #e9f4ee 0%, #f8fcfa 70%);
  overflow: clip;
}
.os-wrap{ position: relative; }

.os-head .eyebrow{
  letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px;
}
.os-head .sec-title{ margin-bottom: 6px; }
.os-head .sec-lede{ max-width: 60ch; }

.os-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(14px, 2.8vw, 28px);
  align-items: start;
  margin-top: 10px;
}

.os-text{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding: clamp(14px, 2.4vw, 18px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  line-height: 1.65;
}
.os-text p + p{ margin-top: 10px; }

.os-fig{
  margin:0; background:#fff; border-radius:16px; padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); align-self: start;
  position: sticky; top: calc(var(--hdr-h, 64px) + 14px); /* приятная «прилипшая» фотокарточка */
}
.os-fig img{ display:block; width:100%; height:auto; max-width:350px; border-radius:10px; }
.os-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; text-align:center; }

.os-wave{
  position:absolute; left:0; right:0; bottom:-20px; height:70px;
  background: radial-gradient(120% 70px at 50% 0, rgba(45,106,79,.16), transparent 70%);
  filter: blur(.6px);
}

/* responsive */
@media (max-width: 980px){
  .os-grid{ grid-template-columns: 1fr; }
  .os-fig{ position: relative; top: 0; }
}
/* ==== Flavor Ribbon: keep photos behind text + add text shield ==== */
.flavor-ribbon{ position: relative; }
.flavor-ribbon .pp-wrap{ position: relative; z-index: 2; }

/* Контент всегда выше изображений */
.flavor-ribbon .fr-head,
.flavor-ribbon .fr-cards,
.flavor-ribbon .fr-content{
  position: relative;
  z-index: 3;
}

/* Декоративные фото по бокам: под контентом, без кликов */
.flavor-ribbon .fr-photo,
.flavor-ribbon .fr-fig,
.flavor-ribbon figure{
  position: relative;                 /* если у тебя они absolute — оставь, но с z-index:1 */
  z-index: 1;
  pointer-events: none;
  /* подстраховка, чтобы «не били» по тексту */
  filter: saturate(.95);
  opacity: .95;
}

/* Ограничение ширины картинок (глобальное требование ≤350px) */
.flavor-ribbon figure img{ max-width:350px; width:100%; height:auto; border-radius:12px; }

/* Небольшой «щиток» под заголовком/подзаголовком */
.flavor-ribbon .fr-head{ padding: 8px 12px; }
.flavor-ribbon .fr-head::before{
  content:"";
  position:absolute;
  inset:-6px -10px;                   /* поле вокруг текста */
  background: linear-gradient(
               90deg,
               rgba(255,255,255,.96) 0%,
               rgba(255,255,255,.80) 55%,
               rgba(255,255,255,0) 100%);
  border-radius:16px;
  z-index:-1;                         /* щиток позади текста */
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* На узких экранах усиливаем щиток для читабельности */
@media (max-width: 680px){
  .flavor-ribbon .fr-head::before{
    background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.9) 70%, rgba(255,255,255,0));
  }
}
/* ==== Home: Flavor Ribbon и подобные секции ==== */
/* сам блок обрезает любые «вылезания» декоративных картинок/псевдоэлементов */
.flavor-ribbon{ position:relative; overflow-x:clip; }

/* если в секции есть наклонная подложка/лента — центрируем и ограничиваем */
.flavor-ribbon::before,
.flavor-ribbon::after{
  left:50%;
  transform: translateX(-50%) skewY(var(--skew,0deg));
  width: min(1100px, 100%);     /* вместо 120vw/100vw */
  max-width: 100%;
}

/* все декоративные изображения держим внутри контейнера */
.flavor-ribbon .fr-photo,
.flavor-ribbon .fr-fig,
.flavor-ribbon figure[data-decor]{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  max-width: 350px;             /* ваше глобальное ограничение */
  inset: auto;                  /* сбрасываем возможные left:-20px/right:-20px */
}

/* страховка для любых «полноширинных» подложек в хедере/герое */
.pp-hero, .hero-ribbon, .tilt-band { overflow-x: clip; }