/* ==========================================================================
   YARRA'S EDGE - BONN Real Estate
   Shared stylesheet. Edit this one file and all pages update.
   ========================================================================== */

:root {
  --ink:        #0F0F0F;
  --ink-mid:    #4A4A4A;
  --ink-soft:   #70706A;   /* darkened from #8C8C86 - the old value was 3.4:1 on
                              white, below the 4.5:1 WCAG AA floor for small text.
                              This is 4.98:1 and reads the same at a glance. */
  --line:       #E4E4E0;
  --paper:      #FFFFFF;
  --paper-alt:  #F7F7F4;
  --green:      #113D00;
  --green-mid:  #1A5C00;
  --cream:      #F4FFEF;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(1.5rem, 5vw, 5rem);
  --nav-h: 84px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink-mid);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- Layout primitives ---------- */

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap--narrow { max-width: 1120px; }

.section       { padding: clamp(5rem, 11vw, 11rem) 0; }
.section--tight{ padding: clamp(3.5rem, 7vw, 7rem) 0; }
.section--alt  { background: var(--paper-alt); }
.section--rule { border-top: 1px solid var(--line); }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  display: block;
}

.h-display {
  font-size: clamp(38px, 7vw, 104px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.h-section {
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.h-sub {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-transform: none;
}

.lede {
  font-size: clamp(16px, 1.25vw, 18px);
  color: var(--ink-mid);
  line-height: 1.8;
}

.lede + .lede { margin-top: 1.5rem; }
.lede strong  { color: var(--ink); font-weight: 600; }

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .45s ease, border-color .45s ease, color .45s ease;
  border-bottom: 1px solid transparent;
  color: #fff;
}

.nav.is-solid {
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--line);
  color: var(--ink);
}

.nav-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nav-links { display: flex; gap: 2.25rem; align-items: center; }
.nav-right { justify-self: end; display: flex; gap: 2.25rem; align-items: center; }

.nav a, .nav button {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  opacity: .8;
  transition: opacity .25s ease;
  /* Anchors inherit body line-height, buttons default to normal.
     Matching both keeps them on the same baseline. */
  line-height: 1;
  display: inline-flex;
  align-items: center;
}


.nav a:hover, .nav button:hover { opacity: 1; }
.nav a.is-current { opacity: 1; }

/* Centred wordmark */
.brand {
  justify-self: center;
  display: flex;
  align-items: baseline;
  gap: .28rem;
  text-decoration: none;
  color: inherit;
}

.brand-word {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1;
}

.brand-dot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }

/* Dropdown */
.menu {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: .75rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 24px 60px rgba(0,0,0,.10);
}

.menu-panel.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.menu-panel a {
  display: block;
  padding: .8rem 1.6rem;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 1;
  transition: color .2s ease, background .2s ease;
}

.menu-panel a:hover { color: var(--ink); background: var(--paper-alt); }
.menu-panel a.is-current { color: var(--green); }
.menu-panel .menu-rule { height: 1px; background: var(--line); margin: .6rem 0; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #101410;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #101410;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,8,.55) 0%, rgba(8,12,8,.18) 38%, rgba(8,12,8,.62) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: var(--nav-h) var(--gutter) 4rem;
  max-width: 1100px;
}

.hero-mark {
  width: 46px;
  height: auto;
  margin: 0 auto 2.75rem;
  display: block;
}

.hero-inner .h-display { color: #fff; }

.hero-eyebrow { color: rgba(255,255,255,.72); margin-bottom: 1.6rem; }

.hero-note {
  margin-top: 2rem;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
}

.hero-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

/* Compact hero for interior pages */
.hero--page { min-height: 78svh; }

/* ---------- Split statement ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 7vw, 8rem);
  align-items: start;
}

.split--lead { grid-template-columns: 1.1fr 1fr; }

/* ---------- Stat row ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

/* Adapts to however many configurations a building actually has */
.stats--auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Custom chart legend */
.legend {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.legend-swatch {
  width: 18px;
  height: 2px;
  flex: none;
}

.chart-wide { margin-top: clamp(3rem, 6vw, 5rem); }
.chart-wide .chart-canvas { height: 420px; }

.stat { padding: clamp(2rem, 3.5vw, 3.25rem) 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: clamp(1.25rem, 2.5vw, 2.5rem); }

.stat-num {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 62px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: .85rem;
}

.stat-label { font-size: 10px; letter-spacing: .2em; }

.stat-compare {
  display: block;
  margin-top: .55rem;
  font-family: var(--sans, inherit);
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--ink-soft, #8a8d87);
  text-transform: none;
}

/* ---------- Building cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
}

.card { text-decoration: none; display: block; }

.card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1B211B;
  display: grid;
  place-items: center;
}

.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.2,.8,.2,1);
}

.card:hover .card-media img { transform: scale(1.05); }

/* Ghost placeholder shown until a photo URL is supplied */
.card-ghost {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,.16);
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.card-name {
  margin-top: 1.15rem;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.card-more {
  margin-top: .5rem;
  display: inline-block;
  font-size: 12px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color .3s ease, color .3s ease;
}

.card:hover .card-more { color: var(--ink); border-color: var(--ink); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 1.05rem 2.4rem;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.btn:hover { background: var(--green); border-color: var(--green); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Segmented control ---------- */

.seg {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.seg button {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 1.05rem;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}

.seg button:hover { color: var(--ink); }
.seg button.is-on { color: var(--ink); border-bottom-color: var(--green); }

/* ---------- Charts ---------- */

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}

.chart-block { min-width: 0; }

.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  gap: 1rem;
}

.chart-canvas { position: relative; height: 340px; }

/* ---------- Table ---------- */

.table { width: 100%; border-collapse: collapse; }

.table thead th {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 0 1.25rem 1.1rem 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}

.table tbody td {
  padding: 1.35rem 1.25rem 1.35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-mid);
}

.table tbody td:first-child { color: var(--ink); font-weight: 500; }
.table tbody tr { transition: background .2s ease; }
.table tbody tr:hover { background: var(--paper-alt); }

.table-scroll { overflow-x: auto; }

.empty-note {
  padding: 3rem 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---------- CTA ---------- */

.cta { background: var(--green); color: var(--cream); }
.cta h2 { color: #fff; }
.cta .lede { color: rgba(244,255,239,.82); }
.cta .btn { background: var(--cream); color: var(--green); border-color: var(--cream); }
.cta .btn:hover { background: transparent; color: var(--cream); }
.cta .btn--ghost { background: transparent; color: var(--cream); border-color: rgba(244,255,239,.45); }
.cta .btn--ghost:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }

/* ---------- Appraisal form ---------- */

.appraisal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.5rem;
  margin-top: 2.5rem;
}

.field { display: flex; flex-direction: column; gap: .6rem; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,255,239,.6);
}

.field input,
.field textarea {
  font-family: var(--body);
  font-size: 15px;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244,255,239,.3);
  padding: .5rem 0;
  transition: border-color .25s ease;
  border-radius: 0;
  -webkit-appearance: none;
}

.field textarea { resize: vertical; min-height: 3.5rem; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--cream);
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(244,255,239,.35); }

.field input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}

.form-note {
  grid-column: 1 / -1;
  font-size: 14px;
  color: rgba(244,255,239,.75);
  margin: 0;
  min-height: 1.4em;
}

.form-note[data-state="error"] { color: #FFC9C0; }
.form-note[data-state="ok"] { color: #fff; font-weight: 500; }

.appraisal-form button[disabled] { opacity: .5; cursor: default; }

.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .appraisal-form { grid-template-columns: 1fr; }
}

.footer {
  background: var(--ink);
  color: rgba(255,255,255,.55);
  padding: clamp(3.5rem, 6vw, 6rem) 0 2.5rem;
  font-size: 13px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.footer .brand-word { color: #fff; font-size: 18px; }
.footer a { text-decoration: none; transition: color .25s ease; }
.footer a:hover { color: #fff; }

.footer-contact { text-align: right; line-height: 2; }
.footer-contact strong { color: #fff; font-weight: 500; }

.footer-note {
  padding-top: 2rem;
  max-width: 68ch;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.38);
}

.footer-base {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: 1fr auto 1fr; }
  .split, .split--lead, .chart-row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .footer-top { grid-template-columns: 1fr; }
  .footer-contact { text-align: left; }
}

@media (max-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-right .contact-link { display: none; }
  .chart-canvas { height: 280px; }
  .table tbody td { font-size: 14px; padding: 1.1rem 1rem 1.1rem 0; }
}

/* ---------- Hero video (Premise section) ---------- */

.hero-video {
  margin-top: clamp(5.5rem, 10vw, 9.5rem);
  max-width: 100%;
}

.hero-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  background: var(--ink, #111);
  object-fit: cover;
}

.hero-video-caption {
  margin-top: .85rem;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .hero-video { margin-top: 2.5rem; }
}

/* ---------- Tower name on cards ---------- */

.card-tower {
  margin-top: .3rem;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Tower comparison chart ---------- */

.chart-canvas--tall { height: clamp(380px, 46vw, 520px); }

.chart-foot {
  margin-top: 1.5rem;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- Floorplate (dark feature band) ---------- */

.fp-band{
  background:#050D0A;
  color:#EAF6EF;
  padding-top:clamp(4rem,8vw,7rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.fp-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.fp-eyebrow{color:rgba(79,227,160,.8)}
.fp-title{color:#EAF6EF}
.fp-lede{color:rgba(234,246,239,.62)}

.fp-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:stretch;
}

.fp-stage{position:relative}
.fp-canvas{
  width:100%;
  height:clamp(420px,52vh,580px);
  border:1px solid rgba(79,227,160,.16);
  border-radius:4px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(79,227,160,.05) 0%, rgba(5,13,10,0) 70%),
    #050D0A;
  opacity:0;
  transition:opacity .6s ease;
  touch-action:none;            /* let one finger rotate instead of scrolling */
}
.fp-canvas.is-ready{opacity:1}
.fp-canvas canvas{display:block;width:100%;height:100%}

.fp-fallback{
  display:flex;align-items:center;justify-content:center;
  height:100%;padding:2rem;text-align:center;
}
.fp-fallback p{font-size:13px;color:rgba(234,246,239,.5);max-width:32ch;line-height:1.7}

.fp-modes{
  position:absolute;top:1rem;right:1rem;
  border-color:rgba(79,227,160,.2);
  background:rgba(6,16,12,.8);
  backdrop-filter:blur(10px);
  border-radius:3px;overflow:hidden;
}
.fp-modes button{
  color:rgba(234,246,239,.5);
  border-left-color:rgba(79,227,160,.2);
  padding:.6rem .95rem;font-size:10px;letter-spacing:.14em;
}
.fp-modes button.is-on{background:rgba(79,227,160,.14);color:#4FE3A0}
.fp-modes button:hover:not(.is-on){color:#EAF6EF;background:transparent}

.fp-panel{
  border:1px solid rgba(79,227,160,.16);
  border-radius:4px;
  background:rgba(8,20,15,.6);
  padding:1.4rem 1.35rem 1.5rem;
}
.fp-pos{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;color:#EAF6EF}
.fp-aspect{font-size:11.5px;color:rgba(234,246,239,.5);margin-top:.5rem;line-height:1.55}
.fp-rows{margin-top:1.2rem;border-top:1px solid rgba(79,227,160,.16)}
.fp-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.64rem 0;border-bottom:1px solid rgba(79,227,160,.1);
}
.fp-k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(234,246,239,.45)}
.fp-v{font-family:var(--display);font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fp-v.hot{color:#4FE3A0}
.fp-hint{font-size:11px;color:rgba(234,246,239,.45);line-height:1.6;margin-top:1rem}

.fp-note{
  margin-top:clamp(1.6rem,3vw,2.2rem);
  font-size:12.5px;line-height:1.75;
  color:rgba(234,246,239,.45);
  max-width:88ch;
}
.fp-note strong{color:rgba(234,246,239,.72);font-weight:600}

@media (max-width:900px){
  .fp-grid{grid-template-columns:1fr}
  .fp-canvas{height:clamp(360px,48vh,460px)}
  .fp-panel{background:rgba(8,20,15,.45)}
}
@media (max-width:560px){
  .fp-modes{
    position:static;display:flex;width:100%;margin-top:.75rem;
    background:transparent;backdrop-filter:none;
  }
  .fp-modes button{flex:1;text-align:center}
}

.fp-period{
  margin-top:.85rem;padding-top:.85rem;
  border-top:1px solid rgba(79,227,160,.12);
  font-size:10.5px;line-height:1.6;letter-spacing:.02em;
  color:rgba(234,246,239,.38);
}

.fp-bands{
  position:absolute;top:1rem;left:1rem;
  border-color:rgba(79,227,160,.2);
  background:rgba(6,16,12,.8);backdrop-filter:blur(10px);
  border-radius:3px;overflow:hidden;
}
.fp-bands button{
  color:rgba(234,246,239,.5);
  border-left-color:rgba(79,227,160,.2);
  padding:.6rem .9rem;font-size:10px;letter-spacing:.1em;
}
.fp-bands--stack{
  position:static;display:flex;flex-wrap:wrap;width:100%;
  margin-bottom:.75rem;background:transparent;backdrop-filter:none;
}
.fp-bands--stack button{flex:1 0 auto;text-align:center;padding:.6rem .7rem}
/* the band row now sits above the canvas, so drop the metric pill to the
   bottom of the stage rather than letting it land on top of the bands */
.fp-stage--stacked .fp-modes{top:auto;bottom:1rem}
.fp-bands button.is-on{background:rgba(79,227,160,.14);color:#4FE3A0}
.fp-bands button:hover:not(.is-on){color:#EAF6EF;background:transparent}
@media (max-width:560px){
  .fp-bands{position:static;display:flex;width:100%;margin-bottom:.6rem;background:transparent;backdrop-filter:none}
  .fp-bands button{flex:1;text-align:center;padding:.6rem .4rem}
}

/* ==========================================================================
   Consent banner (pixel.js) - small, bottom left, out of the way
   ========================================================================== */
.consent{
  position:fixed; left:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  z-index:60; max-width:min(30rem,calc(100vw - 2rem));
  padding:1.15rem 1.25rem 1rem;
  background:rgba(6,16,12,.94); backdrop-filter:blur(12px);
  border:1px solid rgba(79,227,160,.22); border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease;
}
.consent.is-up{opacity:1; transform:none}
.consent p{
  margin:0 0 .9rem; font-size:12.5px; line-height:1.7;
  color:rgba(234,246,239,.68);
}
.consent p a{color:#4FE3A0; text-decoration:none; border-bottom:1px solid rgba(79,227,160,.35)}
.consent p a:hover{color:#EAF6EF}
.consent-btns{display:flex; gap:.5rem; justify-content:flex-end}
.consent-btns button{
  font:inherit; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:.6rem 1rem; cursor:pointer; border-radius:3px;
  background:transparent; color:rgba(234,246,239,.55);
  border:1px solid rgba(79,227,160,.22);
}
.consent-btns button:hover{color:#EAF6EF}
.consent-btns button.is-on{background:rgba(79,227,160,.14); color:#4FE3A0; border-color:rgba(79,227,160,.4)}
.consent-btns button.is-on:hover{background:rgba(79,227,160,.22)}
@media (max-width:560px){
  .consent{left:.75rem; right:.75rem; bottom:.75rem; max-width:none}
}

/* Legal pages (privacy) - these sit on the light paper background */
.legal{max-width:68ch}
.legal h2{
  margin:2.9rem 0 .9rem; font-family:var(--display); font-weight:600;
  font-size:16px; letter-spacing:.01em; color:var(--ink);
}
.legal h2:first-child{margin-top:0}
.legal p, .legal li{font-size:15.5px; line-height:1.85; color:var(--ink-mid)}
.legal p{margin:0 0 1.1rem}
.legal ul{margin:0 0 1.1rem; padding-left:1.15rem}
.legal li{margin-bottom:.5rem}
.legal a{color:var(--green-mid); text-decoration:none; border-bottom:1px solid rgba(26,92,0,.3)}
.legal a:hover{color:var(--green); border-bottom-color:var(--green)}
.legal strong{color:var(--ink); font-weight:600}
.legal em{font-style:normal; font-weight:600; color:var(--ink)}

/* Opt-out button on the privacy page */
.optout{
  font:inherit; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:.75rem 1.25rem; cursor:pointer; border-radius:3px;
  background:transparent; color:var(--green-mid);
  border:1px solid rgba(26,92,0,.35); transition:background .2s ease, color .2s ease;
}
.optout:hover:not(:disabled){background:var(--green); color:var(--cream); border-color:var(--green)}
.optout:disabled{cursor:default; opacity:.55; color:var(--ink-soft); border-color:var(--line)}

/* ---------- Quarterly update signup ----------
   The .field styles were written for the dark green appraisal block, so the
   labels and inputs are cream. This section sits on light paper, so the same
   fields need ink colours instead. */
.quarterly-form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.75rem 1.5rem; margin-top:2.5rem;
}
.quarterly-form .form-actions{grid-column:1 / -1}
.quarterly-form .form-note{grid-column:1 / -1}

.quarterly-form .field label{ color:var(--ink-soft); }
.quarterly-form .field input{
  color:var(--ink);
  border-bottom-color:var(--line);
}
.quarterly-form .field input::placeholder{ color:var(--ink-soft); opacity:.7 }
.quarterly-form .field input:focus{ border-bottom-color:var(--green); }
.quarterly-form .form-note{ color:var(--ink-mid); }
.quarterly-form .form-note[data-state="ok"]{ color:var(--green-mid); }

@media (max-width:640px){ .quarterly-form{grid-template-columns:1fr} }

/* ---------- Autofill ----------
   Chrome and Safari paint their own background on autofilled inputs and set the
   text with -webkit-text-fill-color, which beats a plain `color` rule. Without
   this the quarterly form autofills white-on-white and the appraisal form
   autofills cream-on-yellow. The inset box-shadow is the standard way to
   repaint the background, since background-color itself is ignored. */

/* light sections */
.quarterly-form .field input:-webkit-autofill,
.quarterly-form .field input:-webkit-autofill:hover,
.quarterly-form .field input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
          box-shadow: 0 0 0 1000px var(--paper) inset;
  caret-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
}

/* the dark green appraisal block */
.cta .field input:-webkit-autofill,
.cta .field input:-webkit-autofill:hover,
.cta .field input:-webkit-autofill:focus,
.cta .field textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px var(--green) inset;
          box-shadow: 0 0 0 1000px var(--green) inset;
  caret-color: var(--cream);
  transition: background-color 5000s ease-in-out 0s;
}

/* select, styled to match the underlined text fields */
.quarterly-form .field select{
  font-family: var(--body); font-size:15px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.5rem 1.4rem .5rem 0; border-radius:0;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  transition:border-color .25s ease;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C8C86' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center;
}
.quarterly-form .field select:focus{ outline:none; border-bottom-color:var(--green); }
.quarterly-form .field select:invalid{ color:var(--ink-soft); }

/* date stamp under the Latest Update heading */
.update-date{
  margin-top:1.5rem; font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}

/* the written wrap inside The Latest Quarter */
.q-wrap{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--line);
  max-width:72ch;
}
.q-wrap-head{
  display:flex; align-items:baseline; gap:1.25rem;
  margin-bottom:1.75rem; flex-wrap:wrap;
}
.q-wrap-head .update-date{ margin-top:0 }
.q-wrap .lede + .lede{ margin-top:1.25rem }

/* ---------- Keyboard focus ----------------------------------------------
   :focus-visible fires for keyboard users but not for mouse clicks, so this
   never shows a ring on a click. Without it, someone tabbing through the site
   has no idea where they are. ------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero a:focus-visible,
.nav a:focus-visible,
.nav button:focus-visible,
.cta a:focus-visible,
.cta button:focus-visible,
.cta input:focus-visible,
.cta textarea:focus-visible {
  outline-color: #F4FFEF;
}

/* Skip link: off-screen until focused, then pinned to the top-left. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 500;
  background: var(--green);
  color: #F4FFEF;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .7rem 1.1rem;
  border-radius: 3px;
  transition: top .18s ease;
}
.skip-link:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* Present to a screen reader, invisible on screen. Used for table captions
   where the heading above already says what the table holds. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); }

.faq-item { border-bottom: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.faq-item:first-child { border-top: 1px solid var(--ink); }

.faq-item h3 {
  font-family: var(--display);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: .9rem;
  max-width: 40ch;
}

.faq-item p { font-size: 16px; line-height: 1.75; color: var(--ink-mid); max-width: 68ch; }
.faq-item p + p { margin-top: .9rem; }
.faq-item a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

.faq-group {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem;
}
.faq-group:first-of-type { margin-top: 0; }