/* Arvine Labs — approach page styles */
/* ===== sub-hero ===== */
.subhero { background: var(--wine-night); color: var(--cream); position: relative; overflow: hidden;
  padding-top: 132px; padding-bottom: clamp(3rem,6vw,5rem); }
.subhero__topo { position:absolute; inset:0; opacity: calc(0.42 + 0.28); z-index:0; }
.subhero__topo path { fill: none; stroke: var(--ochre-light); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.subhero .wrap { position: relative; z-index: 1; }
.subhero .eyebrow { color: var(--ochre-light); }
.subhero h1 { color: var(--cream); font-size: clamp(2.6rem, 7vw, 4.5rem); margin: 1.4rem 0 1.6rem; max-width: 14ch; }
@media (min-width: 761px) { .subhero h1 { max-width: none; } }
.subhero p { color: rgba(243,237,226,0.72); max-width: 60ch; font-size: clamp(1.05rem,0.9rem+0.6vw,1.3rem); line-height: 1.55; }

/* framework nav cards */
.fw-nav { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(0.8rem,1.6vw,1.2rem);
  margin-top: clamp(2.5rem,5vw,3.5rem); }
.fw-card { display:flex; flex-direction:column; gap:0.6rem; padding: 1.4rem 1.5rem; border-radius:6px;
  border:1px solid rgba(243,237,226,0.13); background: rgba(243,237,226,0.025);
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
.fw-card:hover { background: rgba(243,237,226,0.06); border-color: rgba(192,160,92,0.5); transform: translateY(-4px); }
.fw-card .n { font-family:var(--mono); font-size: clamp(0.82rem, 1.1vw, 0.98rem); letter-spacing:0.14em; color: var(--ochre-light); }
.fw-card .t { font-family:var(--serif); font-size: clamp(1.3rem,2vw,1.7rem); color: var(--cream); }
.fw-card .a { font-family:var(--mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
  color: rgba(243,237,226,0.5); display:flex; align-items:center; gap:0.5em; margin-top:auto; padding-top:0.6rem; }
@media (max-width:760px){ .fw-nav { grid-template-columns:1fr; } }

/* ===== section scaffold ===== */
.step-sec { position: relative; }
.step-sec--light { background: var(--cream); }
.step-sec--dark { background: var(--wine-night); color: var(--cream); }
.sec-head { display:grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem,3vw,3rem); align-items:start;
  margin-bottom: clamp(2.5rem,5vw,4rem); }
.sec-head .marker { padding-top:0.7rem; white-space:nowrap; }
.step-sec--dark .sec-head .marker { color: var(--ochre-light); }
.sec-head h2 { font-size: clamp(2rem,4.6vw,3.6rem); }
.step-sec--dark .sec-head h2 { color: var(--cream); }
.sec-head .lead { color: var(--ink-70); max-width: 64ch; margin-top: 1.2rem; }
.step-sec--dark .sec-head .lead { color: rgba(243,237,226,0.7); }
.sec-head .eyebrow { color: var(--ochre); }

/* ===== TERROIR GRID ===== */
.tr-wrap { display:grid; grid-template-columns: 1.55fr 0.95fr; gap: clamp(1.5rem,3vw,3rem); align-items:start; }
.tg-scroll { overflow-x:auto; }
.tg { display:grid; grid-template-columns: minmax(96px,1.3fr) repeat(6,minmax(0,1fr)); gap:6px; min-width:0; }
.tg-corner { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.3em; padding:0 0.4rem 0.5rem 0;
  font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-45); }
.tg-corner .ar { color: var(--ochre); } .tg-corner .sl { opacity:0.4; }
.tg-fh { display:flex; align-items:flex-end; padding:0 0.2rem 0.5rem; min-height:54px; min-width:0;
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
  font-family:var(--mono); font-size:0.6rem; line-height:1.25; letter-spacing:0.03em; text-transform:uppercase;
  color: var(--ink-45); transition: color .35s var(--ease); }
.tg-fh.hl { color: var(--wine); }
.tg-ph { display:flex; align-items:center; justify-content:flex-end; text-align:right; padding-right:0.7rem;
  font-family:var(--sans); font-size:0.82rem; font-weight:500; line-height:1.2; color: var(--ink-70);
  transition: color .35s var(--ease); }
.tg-ph.hl { color: var(--wine); }
.tg-cell { aspect-ratio:1/1; border-radius:3px; background: rgba(33,30,26,0.04);
  border:1px solid var(--line-soft); position:relative; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .5s var(--ease), opacity .5s var(--ease); }
.tg-cell.seen { } /* entrance via opacity below */
.tg-cell:not(.seen) { opacity:0; transform: scale(0.82); }
.tg-cell.row-on, .tg-cell.col-on { background: rgba(154,122,64,0.16); border-color: rgba(154,122,64,0.4); }
.tg-cell.lit { background: var(--wine); border-color: transparent; }
.tg-cell.lit .pip { width:8px; height:8px; border-radius:50%; background: var(--ochre-light);
  box-shadow: 0 0 0 4px rgba(192,160,92,0.18); transition: transform .4s var(--ease); }
.tg-cell.lit.row-on, .tg-cell.lit.col-on { background: var(--wine-bright); }
.tg-cell.cross { background: var(--wine-bright); border-color: var(--wine); box-shadow: inset 0 0 0 2px var(--wine); }
.tg-cell.lit.cross { background: var(--wine); }
.tg-cell.lit.cross .pip { transform: scale(1.25); }
.tg-cell:hover { transform: translateY(-2px); }

.tr-read { position: sticky; top: 110px; border:1px solid var(--line); border-radius:6px;
  background: var(--paper); padding: clamp(1.5rem,2.5vw,2rem); }
.tr-num { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--ink-45); display:inline-flex; align-items:center; gap:0.5em; }
.tr-num::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--ink-45); }
.tr-num.is-lit { color: var(--wine); } .tr-num.is-lit::before { background: var(--wine); }
#trPair { font-family:var(--serif); font-size: clamp(1.5rem,2.4vw,2.1rem); line-height:1.12; margin:1rem 0 1.1rem;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3em; }
#trPair em { color: var(--ochre); font-style:normal; font-size:0.8em; }
#trBody { color: var(--ink-70); font-size:1.02rem; line-height:1.6; min-height: 3.2em; }
.tr-hint { margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.05em; color: var(--ink-45); }
@media (max-width: 900px){ .tr-wrap { grid-template-columns:1fr; } .tr-read { position:static; } }
@media (max-width: 620px){
  .tg { grid-template-columns: minmax(58px,0.85fr) repeat(6,minmax(0,1fr)); gap:4px; }
  .tg-fh { font-size:0.5rem; min-height:46px; padding:0 0.12rem 0.35rem; letter-spacing:0.01em; }
  .tg-ph { font-size:0.62rem; padding-right:0.35rem; }
  .tg-corner { font-size:0.5rem; padding:0 0.25rem 0.35rem 0; }
}
@media (max-width: 400px){
  .tg { grid-template-columns: minmax(48px,0.8fr) repeat(6,minmax(0,1fr)); gap:3px; }
  .tg-fh { font-size:0.46rem; min-height:42px; }
  .tg-ph { font-size:0.56rem; }
}

/* ===== TASTING PROFILE ===== */
.tp-wrap { display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
.tp-stage { position:relative; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
#radar { width:100%; max-width:380px; height:auto; overflow:visible; }
.r-web { fill:none; stroke: rgba(243,237,226,0.12); }
.r-axis { stroke: rgba(243,237,226,0.16); }
.r-label { fill: rgba(243,237,226,0.66); font-family:var(--mono); font-size:11px; letter-spacing:0.02em; }
.r-val { fill: rgba(192,160,92,0.22); stroke: var(--ochre-light); stroke-width:2; stroke-linejoin:round;
  transition: all .55s var(--ease); }
.r-dot { fill: var(--cream); stroke: var(--ochre-light); stroke-width:2; transition: all .55s var(--ease); }
.tp-readout { text-align:center; }
.tp-readout .lbl { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase;
  color: rgba(243,237,226,0.5); }
.tp-score { font-family:var(--serif); font-size: clamp(3rem,6vw,4.6rem); line-height:1; color: var(--cream); margin:0.3rem 0; }
.tp-score .of { color: rgba(243,237,226,0.4); font-size:0.42em; }
.tp-tier { font-size:0.8rem; letter-spacing:0.16em; }

.tp-controls { display:flex; flex-direction:column; gap:0.2rem; }
.tp-intro { color: rgba(243,237,226,0.6); margin-bottom:1.4rem; font-size:0.98rem; max-width:46ch; }
.tp-row { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 0.85rem 0; border-bottom: 1px solid rgba(243,237,226,0.1); }
.tp-name { display:flex; align-items:center; gap:0.8em; font-size:0.98rem; color: var(--cream); }
.tp-i { font-family:var(--mono); font-size:0.7rem; color: var(--ochre-light); }
.tp-pips { display:flex; gap:0.45rem; }
.tp-pip { width:18px; height:18px; border-radius:50%; border:1px solid rgba(243,237,226,0.3);
  background:transparent; cursor:pointer; transition: all .25s var(--ease); padding:0; }
.tp-pip:hover { border-color: var(--ochre-light); }
.tp-pip.on { background: var(--ochre-light); border-color: var(--ochre-light); }
.tp-scale { display:grid; grid-template-columns: repeat(4,1fr); gap:0.6rem; margin-top:1.6rem; }
.tp-tcard { border:1px solid rgba(243,237,226,0.13); border-radius:5px; padding:0.8rem 0.9rem;
  transition: all .35s var(--ease); }
.tp-tcard.on { border-color: var(--ochre-light); background: rgba(192,160,92,0.1); }
.tp-tcard .tn { font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; }
.tp-tcard .tr { font-family:var(--mono); font-size:0.66rem; color: rgba(243,237,226,0.5); margin-top:0.3rem; }
@media (max-width: 860px){ .tp-wrap { grid-template-columns:1fr; } .tp-scale { grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){
  /* shrink the radar so its axis labels (which extend past the chart's own circle) stay on screen */
  #radar { max-width: 270px; }
}

/* ===== VINIFICATION ===== */
.vin { position:relative; display:grid; grid-template-columns: 1fr; gap:0; padding-left: clamp(2rem,5vw,4rem); }
.vin-rail { position:absolute; left: clamp(0.6rem,1.6vw,1.2rem); top:18px; bottom:18px; width:2px;
  background: rgba(33,30,26,0.12); }
#vinFill { position:absolute; left:0; top:0; width:100%; height:0; background: linear-gradient(var(--wine), var(--ochre));
  transition: height .9s var(--ease); }
.vin-stage { position:relative; padding: clamp(1.6rem,3vw,2.4rem) 0; display:grid;
  grid-template-columns: 180px 1fr; gap: clamp(1.5rem,3vw,3rem); align-items:start;
  border-bottom:1px solid var(--line-soft); opacity:0.5; transition: opacity .7s var(--ease); }
.vin-stage:last-child { border-bottom:0; }
.vin-stage.on { opacity:1; }
.vin-node { position:absolute; left: calc(-1 * clamp(2rem,5vw,4rem) + clamp(0.6rem,1.6vw,1.2rem) - 8px); top: clamp(1.9rem,3.2vw,2.7rem);
  width:18px; height:18px; border-radius:50%; background: var(--cream); border:2px solid rgba(33,30,26,0.25);
  transition: all .5s var(--ease); }
.vin-stage.on .vin-node { background: var(--wine); border-color: var(--ochre); box-shadow: 0 0 0 5px rgba(154,122,64,0.16); }
.vin-meta { }
.vin-num { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; color: var(--ochre); }
.vin-fr { font-family:var(--serif); font-style:italic; font-size: clamp(1.8rem,3.4vw,2.8rem); line-height:1; margin-top:0.4rem; white-space:nowrap; }
.vin-body h4 { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--wine); font-weight:600; margin-bottom:0.8rem; }
.vin-body p { color: var(--ink-70); max-width:54ch; }
@media (max-width: 680px){ .vin-stage { grid-template-columns:1fr; gap:0.5rem; } }

/* ===== step CTA (inline, discreet) ===== */
.step-cta { margin-top: clamp(2.4rem,4vw,3.4rem); padding-top: clamp(1.5rem,3vw,2rem);
  border-top: 1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem 2rem; }
.step-cta__text { color: var(--ink-45); font-size: 0.98rem; max-width: 34ch; margin:0; }
.step-sec--dark .step-cta { border-top-color: rgba(243,237,226,0.12); }
.step-sec--dark .step-cta__text { color: rgba(243,237,226,0.55); }
@media (max-width: 560px){ .step-cta { flex-direction:column; align-items:flex-start; } }

/* CTA strip */
.cta-strip { background: var(--wine); color: var(--cream); }
.cta-strip .wrap { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding-block: clamp(3rem,6vw,5rem); }
.cta-strip h2 { color: var(--cream); font-size: clamp(1.8rem,3.6vw,2.8rem); max-width: 18ch; }