/* ==========================================================================
   bbf Ingenieurgesellschaft mbH
   Stylesheet (framework-free). Design tokens captured from the reference design.
   Edit the variables in :root to re-theme the whole site.
   ========================================================================== */

@import url("fonts.css");

/* ---- Design tokens ------------------------------------------------------ */
:root{
  --green:      #a0d911;   /* brand accent (lime)         */
  --green-600:  #8fc00f;   /* darker green for hover      */
  --ink:        #1c1f21;   /* primary text / dark sections*/
  --ink-900:    #16181a;   /* darkest                     */
  --ink-800:    #22262b;   /* header/footer dark          */
  --muted:      #5d6369;   /* secondary text              */
  --muted-2:    #8b9096;   /* faint text                  */
  --line:       #e1e5ea;   /* borders                     */
  --bg:         #ffffff;
  --bg-soft:    #f4f5f6;   /* soft section background     */
  --bg-soft-2:  #fafafa;
  --red:        #dc2828;

  --container:  1240px;
  --gutter:     clamp(20px, 5vw, 48px);
  --radius:     4px;
  --radius-lg:  8px;
  --shadow-sm:  0 1px 2px rgba(28,31,33,.04), 0 1px 3px rgba(28,31,33,.06);
  --shadow-md:  0 10px 30px rgba(28,31,33,.08);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --section-y:  clamp(4.5rem, 9vw, 8rem);
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3,h4{ font-weight:800; line-height:1.08; letter-spacing:-.02em; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* ---- Layout helpers ----------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--soft{ background:var(--bg-soft); }
.section--dark{ background:var(--ink); color:#fff; }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.narrow{ max-width:760px; }
.grid{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); }
@media(min-width:720px){ .grid-2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

/* ---- Eyebrow ------------------------------------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.9rem;
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{ content:""; width:32px; height:2px; background:var(--green); flex:none; }
.section--dark .eyebrow{ color:#a7adb3; }

/* ---- Headings / type ---------------------------------------------------- */
.display{ font-size:clamp(2.4rem,6vw,4.4rem); }
.h-xl{ font-size:clamp(2rem,4.6vw,3.2rem); }
.h-lg{ font-size:clamp(1.6rem,3.2vw,2.3rem); }
.h-md{ font-size:clamp(1.25rem,2vw,1.6rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--muted); line-height:1.7; }
.muted{ color:var(--muted); }
.accent{ color:var(--green); }
.statement{ color:#c2c6ca; } /* light-gray statement headings on white */
.section--dark .statement{ color:#7e848b; }

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:var(--radius);
  font-weight:700; font-size:.98rem; border:1.5px solid transparent;
  transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; transform:translateY(-2px); }
.btn--green{ background:var(--green); color:var(--ink); }
.btn--green:hover{ background:var(--green-600); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
.section--dark .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.25); }
.section--dark .btn--ghost:hover{ border-color:#fff; }

/* text link with arrow */
.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--ink); }
.link-arrow svg{ width:1em; height:1em; color:var(--green); transition:transform .25s var(--ease); }
.link-arrow:hover svg{ transform:translate(3px,-3px); }
.section--dark .link-arrow{ color:#fff; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.is-scrolled{ border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:1.5rem; }
.nav-main{ display:none; gap:2.1rem; }
.nav-main a{ font-weight:600; font-size:1rem; color:var(--ink); position:relative; padding:.3rem 0; }
.nav-main a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--green); transition:right .3s var(--ease); }
.nav-main a:hover::after, .nav-main a.active::after{ right:0; }
.header-right{ display:flex; align-items:center; gap:1.1rem; }
.lang-toggle{ display:flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:700; color:var(--muted); }
.lang-toggle .globe{ width:16px; height:16px; color:var(--muted); }
.lang-toggle button{ background:none; border:none; padding:.15rem .1rem; color:var(--muted-2); font-weight:700; }
.lang-toggle button.active{ color:var(--ink); }
.lang-toggle .sep{ color:var(--line); }
.header-cta{ display:none; }
@media(min-width:1000px){
  .nav-main{ display:flex; }
  .header-cta{ display:inline-flex; }
}

/* logo */
.logo{ display:flex; align-items:center; gap:.7rem; }
.logo-word{ font-weight:800; font-size:1.7rem; letter-spacing:.12em; color:var(--ink); }
.logo .divider{ width:1px; height:26px; background:var(--line); }
.logo-mark{ height:26px; width:auto; }
.site-header .logo-word{ color:var(--ink); }
.site-footer .logo-word{ color:#fff; }

/* burger */
.burger{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--ink); transition:.3s var(--ease); }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(min-width:1000px){ .burger{ display:none; } }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:74px 0 0 0; background:#fff; z-index:55;
  transform:translateX(100%); transition:transform .35s var(--ease);
  display:flex; flex-direction:column; padding:2rem var(--gutter); gap:.4rem; overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav a{ font-size:1.5rem; font-weight:700; padding:.7rem 0; border-bottom:1px solid var(--line); }
.mobile-nav .btn{ margin-top:1.4rem; justify-content:center; }
body.nav-open{ overflow:hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; overflow:hidden; background:var(--bg); }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 78%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 78%);
  opacity:.5; filter:grayscale(.2);
}
.hero-inner{ position:relative; z-index:1; padding-block:clamp(4rem,10vw,9rem) clamp(3rem,7vw,6rem); }
.hero h1{ max-width:16ch; margin-top:1.6rem; }
.hero .lead{ max-width:52ch; margin-top:1.8rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero-badge{ position:absolute; top:2rem; right:0; display:flex; align-items:center; gap:.7rem; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
.hero-badge::before{ content:""; width:38px; height:2px; background:var(--green); }

/* ==========================================================================
   SERVICES CARDS (Planen / Überwachen / Betreuen)
   ========================================================================== */
.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem 2rem; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
  height:100%;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.card .card-num{ position:absolute; top:1.6rem; right:1.8rem; font-size:.85rem; font-weight:700; color:var(--line); }
.card .card-icon{ width:44px; height:44px; color:var(--green); margin-bottom:2.6rem; }
.card .card-icon svg{ width:100%; height:100%; }
.card h3{ font-size:1.4rem; margin-bottom:.8rem; }
.card p{ color:var(--muted); margin-bottom:1.4rem; }

/* generic section header block */
.section-head{ max-width:720px; }
.section-head .eyebrow{ margin-bottom:1.3rem; }
.section-head h2{ margin-bottom:1.2rem; }
.split{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media(min-width:900px){ .split{ grid-template-columns:1.05fr 1fr; } }

/* ==========================================================================
   METHODS (checklist + image)
   ========================================================================== */
.check-list{ margin-top:2rem; display:grid; gap:1.3rem; }
.check-list li{ display:flex; gap:.9rem; color:var(--muted); }
.check-list li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:.15rem;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.media-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--ink); box-shadow:var(--shadow-md); }
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-tags{ position:absolute; left:1rem; bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.media-tag{ font-size:.7rem; font-weight:700; letter-spacing:.05em; padding:.4rem .7rem; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(4px); }

/* ==========================================================================
   STATS (dark)
   ========================================================================== */
.stats{ display:grid; gap:2rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:820px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat .stat-num{ font-size:clamp(2.6rem,5vw,3.6rem); font-weight:800; color:var(--green); letter-spacing:-.03em; line-height:1; }
.stat .stat-label{ margin-top:.7rem; color:#b7bcc1; font-size:.98rem; }

/* ==========================================================================
   REFERENCES GRID
   ========================================================================== */
.ref-grid{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media(min-width:640px){ .ref-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .ref-grid{ grid-template-columns:repeat(3,1fr); } }
.ref-card{ display:flex; flex-direction:column; }
.ref-thumb{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); background:var(--bg-soft); }
.ref-thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .5s var(--ease), transform .6s var(--ease); }
.ref-card:hover .ref-thumb img{ filter:grayscale(0); transform:scale(1.04); }
.ref-tag{ margin-top:1.1rem; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--green-600); }
.ref-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:.5rem; }
.ref-head h3{ font-size:1.3rem; }
.ref-loc{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; }
.ref-card p{ margin-top:.6rem; color:var(--muted); }

/* ==========================================================================
   QUALIFICATIONS (2x2 icon grid)
   ========================================================================== */
.qual-grid{ display:grid; gap:1.25rem; }
@media(min-width:640px){ .qual-grid{ grid-template-columns:repeat(2,1fr); } }
.qual{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.6rem; transition:transform .3s var(--ease), box-shadow .3s; }
.qual:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.qual .q-icon{ width:34px; height:34px; color:var(--green); margin-bottom:1.4rem; }
.qual h3{ font-size:1.12rem; margin-bottom:.5rem; }
.qual p{ color:var(--muted); font-size:.96rem; }

/* ==========================================================================
   CLIENT LOGO MARQUEE
   ========================================================================== */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; align-items:center; gap:clamp(3rem,7vw,6rem); width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee img{ height:34px; width:auto; filter:grayscale(1); opacity:.5; transition:opacity .3s, filter .3s; }
.marquee img:hover{ filter:grayscale(0); opacity:1; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   HONORAR panel
   ========================================================================== */
.panel{ position:relative; overflow:hidden; background:var(--bg-soft); border-radius:var(--radius-lg); padding:clamp(2.2rem,5vw,4rem); }
.panel::after{ content:""; position:absolute; top:-40%; right:-10%; width:420px; height:420px; background:radial-gradient(circle, rgba(160,217,17,.22), transparent 65%); pointer-events:none; }
.panel-inner{ position:relative; display:grid; gap:2rem; align-items:center; }
@media(min-width:860px){ .panel-inner{ grid-template-columns:1.4fr auto; } }

/* ==========================================================================
   CTA (dark, centered)
   ========================================================================== */
.cta-center{ text-align:center; max-width:760px; margin-inline:auto; }
.cta-center h2{ margin-bottom:1.2rem; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; align-items:center; margin-top:2.2rem; }
.cta-phone{ display:inline-flex; align-items:center; gap:.6rem; font-weight:700; color:#fff; }
.cta-phone svg{ width:1.1em; height:1.1em; color:var(--green); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-grid{ display:grid; gap:1.4rem; }
@media(min-width:620px){ .form-grid .col-2{ grid-template-columns:1fr 1fr; display:grid; gap:1.4rem; } }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label, .field-legend{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0; }
.field input, .field textarea{
  font:inherit; font-size:1rem; padding:.85rem 1rem; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(160,217,17,.25); }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.consent input{ margin-top:.25rem; width:18px; height:18px; accent-color:var(--green); flex:none; }
.form-note{ font-size:.85rem; color:var(--muted-2); }
.form-status{ padding:1rem 1.2rem; border-radius:var(--radius); font-weight:600; display:none; }
.form-status.ok{ display:block; background:rgba(160,217,17,.15); color:#4b6b00; }
.form-status.err{ display:block; background:rgba(220,40,40,.1); color:var(--red); }

/* contact info block */
.contact-list{ display:grid; gap:1.4rem; }
.contact-item{ display:flex; gap:.9rem; align-items:flex-start; }
.contact-item svg{ width:20px; height:20px; color:var(--green); flex:none; margin-top:.2rem; }
.contact-item .label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }

/* ==========================================================================
   SERVICES INDEX (Leistungen page)
   ========================================================================== */
.svc-layout{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media(min-width:900px){ .svc-layout{ grid-template-columns:260px 1fr; } }
.svc-index{ position:sticky; top:100px; display:none; }
@media(min-width:900px){ .svc-index{ display:block; } }
.svc-index ol{ display:grid; gap:.1rem; counter-reset:none; }
.svc-index a{ display:flex; gap:.8rem; padding:.5rem 0; color:var(--muted); font-weight:600; font-size:.95rem; border-bottom:1px solid var(--line); }
.svc-index a .n{ color:var(--muted-2); font-variant-numeric:tabular-nums; }
.svc-index a:hover, .svc-index a.active{ color:var(--ink); }
.svc-index a.active .n{ color:var(--green-600); }
.svc-item{ padding-block:2.2rem; border-top:1px solid var(--line); scroll-margin-top:100px; }
.svc-item:first-child{ border-top:none; padding-top:0; }
.svc-item .n{ font-size:.85rem; font-weight:700; color:var(--green-600); letter-spacing:.1em; }
.svc-item h3{ font-size:clamp(1.5rem,2.5vw,2rem); margin:.5rem 0 .9rem; }
.svc-item p{ color:var(--muted); max-width:60ch; }

/* ==========================================================================
   COOKIE BANNER
   ========================================================================== */
.cookie{
  position:fixed; right:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px); z-index:70;
  max-width:360px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:1.4rem 1.4rem 1.2rem; font-size:.9rem; color:var(--muted);
  transform:translateY(140%); transition:transform .5s var(--ease); visibility:hidden;
}
.cookie.is-visible{ transform:translateY(0); visibility:visible; }
.cookie-actions{ display:flex; align-items:center; gap:1rem; margin-top:1.1rem; }
.cookie .btn{ padding:.7rem 1.3rem; font-size:.9rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--ink); color:#b7bcc1; }
.footer-top{ display:grid; gap:2.5rem; padding-block:clamp(3rem,6vw,5rem); }
@media(min-width:820px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } }
.footer-brand p{ margin-top:1.1rem; max-width:30ch; font-size:.95rem; color:#8a9096; }
.footer h4{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#7e848b; margin-bottom:1.2rem; font-weight:700; }
.footer-col a, .footer-col li{ display:block; padding:.32rem 0; color:#b7bcc1; font-size:.95rem; }
.footer-col a:hover{ color:#fff; }
.footer-contact .contact-item{ margin-bottom:.9rem; }
.footer-contact .contact-item svg{ color:var(--green); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-block:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.85rem; color:#7e848b; }
.footer-bottom nav{ display:flex; gap:1.5rem; }
.footer-bottom a:hover{ color:#fff; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .marquee-track{ animation:none; }
}

/* ---- page hero (inner pages) ------------------------------------------- */
.page-hero{ padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2rem,4vw,3rem); }
.page-hero .eyebrow{ margin-bottom:1.3rem; }
.page-hero h1{ max-width:20ch; }
.page-hero .lead{ margin-top:1.6rem; max-width:60ch; }

/* ==========================================================================
   MODAL (Honorar tool)
   ========================================================================== */
.modal{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,2rem); background:rgba(22,24,26,.55); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal-card{
  position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  background:#fff; border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:0 30px 80px rgba(0,0,0,.35); transform:translateY(20px); transition:transform .35s var(--ease);
}
.modal.is-open .modal-card{ transform:none; }
.modal-close{ position:absolute; top:1rem; right:1.1rem; background:none; border:none; font-size:1.8rem; line-height:1; color:var(--muted); }
.modal-close:hover{ color:var(--ink); }
.select{ font:inherit; font-size:1rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); }
.select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(160,217,17,.25); }
.scope-grid{ display:grid; gap:.6rem; margin-top:.6rem; }
@media(min-width:520px){ .scope-grid{ grid-template-columns:1fr 1fr; } }
.scope{ display:flex; align-items:center; gap:.6rem; font-size:.95rem; color:var(--ink); padding:.6rem .8rem; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; }
.scope input{ width:18px; height:18px; accent-color:var(--green); }
.h-result{ min-height:56px; display:flex; flex-direction:column; justify-content:center; padding:1rem 1.2rem; background:var(--bg-soft); border-radius:var(--radius); }
.h-result .h-range{ font-size:1.6rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }

/* small utilities */
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.center{ text-align:center; } .flex{ display:flex; } .between{ justify-content:space-between; }
.items-end{ align-items:flex-end; } .gap-1{ gap:1rem; } .wrap{ flex-wrap:wrap; }
.prose p{ margin-bottom:1.2rem; color:var(--muted); } .prose p:last-child{ margin-bottom:0; }
.prose h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:2.4rem 0 1rem; }
.prose h3{ font-size:1.15rem; margin:1.8rem 0 .6rem; }
.prose a{ color:var(--green-600); text-decoration:underline; }