/* ==========================================================================
   Hybrid Fit Lab — stylesheet
   Palette: espresso brown over cream, with a fired-clay accent.
   Type: Avenir / Segoe UI for display, Cambria for reading.
   Written for this studio only. No framework, no reset library.
   ========================================================================== */

:root {
  --hfl-espresso:  #2E211A;
  --hfl-espresso-2:#403025;
  --hfl-bark:      #5A463A;
  --hfl-cream:     #F7F1E4;
  --hfl-cream-2:   #EFE6D4;
  --hfl-parchment: #FDFAF4;
  --hfl-clay:      #A75531;
  --hfl-clay-lit:  #C4703F;
  --hfl-clay-soft: #E4C4B0;
  --hfl-moss:      #5C6B4E;
  --hfl-ink:       #221812;
  --hfl-ink-soft:  #6A5A50;
  --hfl-line:      #DCCFB9;
  --hfl-line-dark: #554236;

  --hfl-display: Avenir, "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hfl-read: Cambria, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --hfl-bar-h: 74px;
  --hfl-bar-h-tight: 58px;
  --hfl-shell: 1220px;
  --hfl-radius: 3px;
  --hfl-radius-lg: 6px;
  --hfl-shadow: 0 14px 34px -22px rgba(46, 33, 26, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hfl-bar-h) + 18px);
}

body.hfl-doc {
  margin: 0;
  background: var(--hfl-cream);
  color: var(--hfl-ink);
  font-family: var(--hfl-read);
  font-size: 17.5px;
  line-height: 1.72;
  padding-top: var(--hfl-bar-h);
  -webkit-font-smoothing: antialiased;
}

body.hfl-doc--locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--hfl-display);
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.14;
  margin: 0 0 0.5em;
  color: var(--hfl-espresso);
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--hfl-clay); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hfl-espresso); }

img, svg { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.42em; }

hr.hfl-divide {
  border: 0;
  height: 1px;
  background: var(--hfl-line);
  margin: 38px 0;
}

.hfl-jump {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hfl-espresso);
  color: var(--hfl-cream);
  padding: 12px 20px;
  font-family: var(--hfl-display);
  z-index: 90;
}
.hfl-jump:focus { left: 12px; top: 12px; }

/* ---------- fixed slim bar ------------------------------------------------ */

.hfl-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--hfl-bar-h);
  background: var(--hfl-espresso);
  border-bottom: 1px solid rgba(247, 241, 228, 0.14);
  z-index: 70;
  transition: height 190ms ease, background 190ms ease;
}

.hfl-topbar--tight {
  height: var(--hfl-bar-h-tight);
  background: rgba(34, 24, 18, 0.97);
  box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.9);
}

.hfl-topbar__inner {
  height: 100%;
  max-width: var(--hfl-shell);
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.hfl-mark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: 0 0 auto;
}

.hfl-mark__glyph {
  font-family: var(--hfl-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--hfl-cream);
  border: 1.5px solid var(--hfl-clay);
  padding: 7px 8px 6px;
  border-radius: var(--hfl-radius);
  background: rgba(167, 85, 49, 0.18);
}

.hfl-mark__words { display: flex; flex-direction: column; line-height: 1.1; }

.hfl-mark__name {
  font-family: var(--hfl-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--hfl-cream);
  letter-spacing: -0.01em;
}

.hfl-mark__where {
  font-family: var(--hfl-display);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(247, 241, 228, 0.58);
  margin-top: 3px;
}

.hfl-topbar--tight .hfl-mark__where { display: none; }

.hfl-menu { margin-left: auto; }

.hfl-menu ul {
  display: flex;
  align-items: center;
  gap: 21px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hfl-menu li { margin: 0; }

.hfl-menu a {
  font-family: var(--hfl-display);
  font-size: 13.5px;
  letter-spacing: 0.005em;
  color: rgba(247, 241, 228, 0.78);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease;
}

.hfl-menu a:hover { color: var(--hfl-cream); border-bottom-color: rgba(167, 85, 49, 0.7); }
.hfl-menu__on a { color: var(--hfl-cream); border-bottom-color: var(--hfl-clay); }

/* Contact block that only appears inside the mobile drop panel. */
.hfl-menu__foot { display: none; }

.hfl-topbar__side { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.hfl-topbar__tel {
  font-family: var(--hfl-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hfl-cream);
  text-decoration: none;
  white-space: nowrap;
}
.hfl-topbar__tel:hover { color: var(--hfl-clay-soft); }

.hfl-topbar__book { padding: 9px 16px; font-size: 12.5px; }

.hfl-burger {
  display: none;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid rgba(247, 241, 228, 0.32);
  border-radius: var(--hfl-radius);
  color: var(--hfl-cream);
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hfl-burger__bars, .hfl-burger__bars::before, .hfl-burger__bars::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--hfl-cream);
  transition: transform 170ms ease, opacity 170ms ease;
}
.hfl-burger__bars { position: relative; }
.hfl-burger__bars::before, .hfl-burger__bars::after { content: ""; position: absolute; left: 0; }
.hfl-burger__bars::before { top: -5px; }
.hfl-burger__bars::after { top: 5px; }

.hfl-burger--x .hfl-burger__bars { background: transparent; }
.hfl-burger--x .hfl-burger__bars::before { transform: translateY(5px) rotate(45deg); }
.hfl-burger--x .hfl-burger__bars::after { transform: translateY(-5px) rotate(-45deg); }

/* ---------- shared shell + section bands ---------------------------------- */

.hfl-shell {
  max-width: var(--hfl-shell);
  margin: 0 auto;
  padding: 0 26px;
}

.hfl-shell--narrow { max-width: 830px; }

.hfl-band { padding: 78px 0; }
.hfl-band--tint { background: var(--hfl-cream-2); }
.hfl-band--paper { background: var(--hfl-parchment); }

.hfl-band--espresso {
  background: var(--hfl-espresso);
  color: rgba(247, 241, 228, 0.86);
}
.hfl-band--espresso h2,
.hfl-band--espresso h3 { color: var(--hfl-cream); }
.hfl-band--espresso a { color: var(--hfl-clay-soft); }
.hfl-band--espresso .hfl-kicker { color: var(--hfl-clay-soft); }

.hfl-kicker {
  display: block;
  font-family: var(--hfl-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hfl-clay);
  margin-bottom: 13px;
}

.hfl-h2 { font-size: clamp(27px, 3.3vw, 39px); }
.hfl-h3 { font-size: clamp(19px, 2vw, 23px); }

.hfl-lede {
  font-size: 19.5px;
  line-height: 1.66;
  color: var(--hfl-ink-soft);
}

.hfl-band--espresso .hfl-lede { color: rgba(247, 241, 228, 0.75); }

/* ---------- the asymmetric two-column grid -------------------------------- */

.hfl-split {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr);
  gap: 58px;
  align-items: start;
}

.hfl-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; }
.hfl-split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.58fr); }

.hfl-rail {
  position: sticky;
  top: calc(var(--hfl-bar-h) + 22px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hfl-rail__box {
  background: var(--hfl-parchment);
  border: 1px solid var(--hfl-line);
  border-left: 3px solid var(--hfl-clay);
  border-radius: var(--hfl-radius);
  padding: 22px 24px;
}

.hfl-band--espresso .hfl-rail__box {
  background: rgba(247, 241, 228, 0.06);
  border-color: rgba(247, 241, 228, 0.16);
  border-left-color: var(--hfl-clay);
}

.hfl-rail__head {
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hfl-bark);
  margin: 0 0 10px;
}

.hfl-band--espresso .hfl-rail__head { color: var(--hfl-clay-soft); }

.hfl-rail__box p, .hfl-rail__box li { font-size: 15.5px; line-height: 1.6; }

/* ---------- buttons ------------------------------------------------------- */

.hfl-cta {
  display: inline-block;
  font-family: var(--hfl-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: var(--hfl-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.hfl-cta--solid { background: var(--hfl-clay); color: #FFF6EC; }
.hfl-cta--solid:hover { background: #8E4526; color: #FFF6EC; transform: translateY(-1px); }

.hfl-cta--line {
  border-color: var(--hfl-espresso);
  color: var(--hfl-espresso);
  background: transparent;
}
.hfl-cta--line:hover { background: var(--hfl-espresso); color: var(--hfl-cream); }

/* Any dark surface flips the outline button to cream so it stays legible. */
.hfl-band--espresso .hfl-cta--line,
.hfl-open .hfl-cta--line,
.hfl-callout .hfl-cta--line,
.hfl-menu__foot .hfl-cta--line { border-color: rgba(247, 241, 228, 0.62); color: var(--hfl-cream); }

.hfl-band--espresso .hfl-cta--line:hover,
.hfl-open .hfl-cta--line:hover,
.hfl-callout .hfl-cta--line:hover,
.hfl-menu__foot .hfl-cta--line:hover { background: var(--hfl-cream); color: var(--hfl-espresso); }

/* ---------- opening block ------------------------------------------------- */

.hfl-open {
  background:
    linear-gradient(112deg, var(--hfl-espresso) 0%, var(--hfl-espresso) 54%, var(--hfl-espresso-2) 100%);
  color: var(--hfl-cream);
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}

.hfl-open::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -110px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(167, 85, 49, 0.35);
  border-radius: 50%;
  pointer-events: none;
}

.hfl-open__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 62px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hfl-open__kicker {
  font-family: var(--hfl-display);
  font-size: 11.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--hfl-clay-soft);
  display: block;
  margin-bottom: 20px;
}

.hfl-open__title {
  font-size: clamp(34px, 4.9vw, 58px);
  color: var(--hfl-cream);
  margin-bottom: 22px;
}

.hfl-open__text {
  font-size: 19px;
  line-height: 1.68;
  color: rgba(247, 241, 228, 0.8);
  max-width: 42em;
}

.hfl-open__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hfl-open__card {
  background: rgba(247, 241, 228, 0.055);
  border: 1px solid rgba(247, 241, 228, 0.18);
  border-radius: var(--hfl-radius-lg);
  padding: 26px 26px 22px;
  backdrop-filter: blur(2px);
}

.hfl-open__card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--hfl-display);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hfl-clay-soft);
  border-bottom: 1px solid rgba(247, 241, 228, 0.16);
  padding-bottom: 12px;
  margin-bottom: 6px;
}

.hfl-readout { list-style: none; margin: 0; padding: 0; }

.hfl-readout li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(247, 241, 228, 0.14);
  font-size: 15px;
  margin: 0;
}
.hfl-readout li:last-child { border-bottom: 0; }

.hfl-readout span:first-child { color: rgba(247, 241, 228, 0.62); }
.hfl-readout span:last-child { font-family: var(--hfl-display); font-weight: 600; color: var(--hfl-cream); }

/* ---------- interior page crest ------------------------------------------- */

.hfl-crest {
  background: var(--hfl-cream-2);
  border-bottom: 1px solid var(--hfl-line);
  padding: 62px 0 54px;
}

.hfl-crest__trail {
  font-family: var(--hfl-display);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hfl-bark);
  display: block;
  margin-bottom: 15px;
}

.hfl-crest__title { font-size: clamp(30px, 4vw, 46px); max-width: 17em; }
.hfl-crest .hfl-lede { max-width: 46em; margin-top: 14px; }

/* ---------- cards / decks ------------------------------------------------- */

.hfl-deck { display: grid; gap: 22px; }
.hfl-deck--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hfl-deck--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hfl-deck--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hfl-card {
  background: var(--hfl-parchment);
  border: 1px solid var(--hfl-line);
  border-radius: var(--hfl-radius);
  padding: 26px 26px 24px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hfl-card:hover {
  border-color: var(--hfl-clay-soft);
  box-shadow: var(--hfl-shadow);
  transform: translateY(-2px);
}

.hfl-card h3 { font-size: 20px; margin-bottom: 9px; }
.hfl-card p { font-size: 16px; color: var(--hfl-ink-soft); }

.hfl-card__num {
  font-family: var(--hfl-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--hfl-clay);
  display: block;
  margin-bottom: 12px;
}

.hfl-card--link { display: block; text-decoration: none; color: inherit; }
.hfl-card--link h3 { color: var(--hfl-espresso); }
.hfl-card--link:hover h3 { color: var(--hfl-clay); }

.hfl-band--espresso .hfl-card {
  background: rgba(247, 241, 228, 0.05);
  border-color: rgba(247, 241, 228, 0.15);
}
.hfl-band--espresso .hfl-card p { color: rgba(247, 241, 228, 0.72); }

/* ---------- lists --------------------------------------------------------- */

.hfl-ticks { list-style: none; padding: 0; margin: 0 0 1.1em; }

.hfl-ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 16.5px;
}

.hfl-ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--hfl-clay);
  border-bottom: 2px solid var(--hfl-clay);
  transform: rotate(-45deg);
}

.hfl-band--espresso .hfl-ticks li::before { border-color: var(--hfl-clay-soft); }

.hfl-plain { list-style: none; padding: 0; }
.hfl-plain li { border-bottom: 1px solid var(--hfl-line); padding: 11px 0; margin: 0; font-size: 16.5px; }
.hfl-plain li:last-child { border-bottom: 0; }

/* ---------- process steps ------------------------------------------------- */

.hfl-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.hfl-step {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 26px;
  padding: 28px 0;
  border-top: 1px solid var(--hfl-line);
  margin: 0;
}
.hfl-step:last-child { border-bottom: 1px solid var(--hfl-line); }

.hfl-step__no {
  font-family: var(--hfl-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--hfl-clay-soft);
}

.hfl-step h3 { font-size: 21px; margin-bottom: 8px; }
.hfl-step p { color: var(--hfl-ink-soft); }

/* ---------- data table ---------------------------------------------------- */

.hfl-tablewrap { overflow-x: auto; }

.hfl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 520px;
}

.hfl-table caption {
  text-align: left;
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hfl-bark);
  padding-bottom: 12px;
}

.hfl-table th, .hfl-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--hfl-line); }

.hfl-table thead th {
  font-family: var(--hfl-display);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hfl-cream);
  background: var(--hfl-bark);
  border-bottom: 0;
}

.hfl-table tbody tr:nth-child(even) { background: rgba(220, 207, 185, 0.28); }

/* ---------- pricing tiers ------------------------------------------------- */

.hfl-tier {
  background: var(--hfl-parchment);
  border: 1px solid var(--hfl-line);
  border-top: 4px solid var(--hfl-bark);
  border-radius: var(--hfl-radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}

.hfl-tier--flag { border-top-color: var(--hfl-clay); box-shadow: var(--hfl-shadow); }

.hfl-tier__price {
  font-family: var(--hfl-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--hfl-espresso);
  line-height: 1;
  margin: 6px 0 4px;
}

.hfl-tier__unit {
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hfl-ink-soft);
  display: block;
  margin-bottom: 16px;
}

.hfl-tier .hfl-cta { margin-top: auto; text-align: center; }

/* ---------- quotes -------------------------------------------------------- */

.hfl-quote {
  background: var(--hfl-parchment);
  border: 1px solid var(--hfl-line);
  border-radius: var(--hfl-radius);
  padding: 28px 28px 24px;
  margin: 0;
}

.hfl-quote__body { font-size: 17px; line-height: 1.68; color: var(--hfl-ink); }
.hfl-quote__body::before { content: "\201C"; color: var(--hfl-clay); font-size: 34px; line-height: 0; vertical-align: -4px; margin-right: 3px; }

.hfl-quote__who {
  display: block;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--hfl-line);
  font-family: var(--hfl-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--hfl-espresso);
}

.hfl-quote__meta {
  display: block;
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hfl-ink-soft);
  margin-top: 4px;
}

/* ---------- staff --------------------------------------------------------- */

.hfl-person {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hfl-line);
  align-items: start;
}
.hfl-person:last-child { border-bottom: 0; }

.hfl-person__badge {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--hfl-bark);
  color: var(--hfl-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hfl-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hfl-person__name { font-size: 21px; margin-bottom: 3px; }

.hfl-person__role {
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hfl-clay);
  display: block;
  margin-bottom: 11px;
}

/* ---------- questions (native disclosure) --------------------------------- */

.hfl-ask {
  border-bottom: 1px solid var(--hfl-line);
  padding: 4px 0;
}

.hfl-ask > summary {
  cursor: pointer;
  list-style: none;
  padding: 19px 42px 19px 0;
  position: relative;
  font-family: var(--hfl-display);
  font-weight: 600;
  font-size: 17.5px;
  color: var(--hfl-espresso);
}

.hfl-ask > summary::-webkit-details-marker { display: none; }

.hfl-ask > summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--hfl-clay);
  line-height: 1;
}

.hfl-ask[open] > summary::after { content: "\2013"; }
.hfl-ask[open] > summary { color: var(--hfl-clay); }
.hfl-ask__body { padding: 0 34px 22px 0; color: var(--hfl-ink-soft); font-size: 16.5px; }

/* ---------- forms --------------------------------------------------------- */

.hfl-form {
  background: var(--hfl-parchment);
  border: 1px solid var(--hfl-line);
  border-radius: var(--hfl-radius-lg);
  padding: 30px 30px 34px;
}

.hfl-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.hfl-field { display: block; margin-bottom: 18px; }

.hfl-field__label {
  display: block;
  font-family: var(--hfl-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--hfl-bark);
  margin-bottom: 7px;
}

.hfl-field input,
.hfl-field select,
.hfl-field textarea {
  width: 100%;
  font-family: var(--hfl-read);
  font-size: 16px;
  color: var(--hfl-ink);
  background: #FFFFFF;
  border: 1px solid var(--hfl-line);
  border-radius: var(--hfl-radius);
  padding: 11px 13px;
}

.hfl-field textarea { min-height: 128px; resize: vertical; }

.hfl-field input:focus,
.hfl-field select:focus,
.hfl-field textarea:focus {
  outline: 2px solid var(--hfl-clay);
  outline-offset: 1px;
  border-color: var(--hfl-clay);
}

.hfl-form__fine { font-size: 14.5px; color: var(--hfl-ink-soft); margin-top: 14px; }

/* ---------- small parts --------------------------------------------------- */

.hfl-statset { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.hfl-stat {
  border-left: 2px solid var(--hfl-clay);
  padding-left: 16px;
}

.hfl-stat b {
  display: block;
  font-family: var(--hfl-display);
  font-size: 31px;
  font-weight: 700;
  color: var(--hfl-espresso);
  line-height: 1.1;
}

.hfl-band--espresso .hfl-stat b { color: var(--hfl-cream); }

.hfl-stat span {
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hfl-ink-soft);
}

.hfl-band--espresso .hfl-stat span { color: rgba(247, 241, 228, 0.62); }

.hfl-tagrow { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; }

.hfl-tagrow li {
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--hfl-line);
  border-radius: 100px;
  padding: 6px 14px;
  color: var(--hfl-bark);
  margin: 0;
  background: var(--hfl-parchment);
}

.hfl-map {
  position: relative;
  border: 1px solid var(--hfl-line);
  border-radius: var(--hfl-radius);
  background:
    repeating-linear-gradient(0deg, rgba(90, 70, 58, 0.09) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(90, 70, 58, 0.09) 0 1px, transparent 1px 34px),
    var(--hfl-cream-2);
  min-height: 210px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hfl-map::before {
  content: "";
  position: absolute;
  left: 44%;
  top: 42%;
  width: 15px;
  height: 15px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--hfl-clay);
  box-shadow: 0 0 0 7px rgba(167, 85, 49, 0.18);
}

.hfl-map__label {
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hfl-bark);
}

.hfl-map__coord { font-family: var(--hfl-display); font-size: 14px; color: var(--hfl-espresso); font-weight: 600; }

.hfl-callout {
  background: var(--hfl-espresso);
  color: var(--hfl-cream);
  border-radius: var(--hfl-radius-lg);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.hfl-callout h2 { color: var(--hfl-cream); font-size: clamp(24px, 2.7vw, 32px); }
.hfl-callout p { color: rgba(247, 241, 228, 0.78); margin-bottom: 0; }
.hfl-callout__act { display: flex; flex-direction: column; gap: 11px; }
.hfl-callout__act .hfl-cta { text-align: center; }

/* ---------- journal ------------------------------------------------------- */

.hfl-postlist { display: grid; gap: 0; }

.hfl-post {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 32px;
  padding: 30px 0;
  border-top: 1px solid var(--hfl-line);
  align-items: start;
}
.hfl-post:last-child { border-bottom: 1px solid var(--hfl-line); }

.hfl-post__meta {
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hfl-ink-soft);
  line-height: 1.7;
}

.hfl-post h2 { font-size: 24px; margin-bottom: 8px; }
.hfl-post h2 a { text-decoration: none; color: var(--hfl-espresso); }
.hfl-post h2 a:hover { color: var(--hfl-clay); }
.hfl-post p { color: var(--hfl-ink-soft); font-size: 16.5px; margin-bottom: 10px; }

.hfl-post__more {
  font-family: var(--hfl-display);
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--hfl-clay-soft);
  padding-bottom: 2px;
}

.hfl-entry { font-size: 18px; }
.hfl-entry h2 { font-size: clamp(23px, 2.5vw, 29px); margin-top: 42px; }
.hfl-entry h3 { font-size: 20px; margin-top: 30px; }
.hfl-entry ul, .hfl-entry ol { margin-bottom: 1.2em; }
.hfl-entry li { font-size: 17.5px; }

.hfl-note {
  border-left: 3px solid var(--hfl-clay);
  background: var(--hfl-cream-2);
  padding: 20px 24px;
  margin: 30px 0;
  font-size: 17px;
}

.hfl-note strong { font-family: var(--hfl-display); }

.hfl-byline {
  font-family: var(--hfl-display);
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--hfl-ink-soft);
  border-bottom: 1px solid var(--hfl-line);
  padding-bottom: 16px;
  margin-bottom: 30px;
}

/* ---------- footer -------------------------------------------------------- */

.hfl-foot {
  background: var(--hfl-espresso);
  color: rgba(247, 241, 228, 0.72);
  padding: 64px 0 0;
  font-size: 16px;
}

.hfl-foot__grid {
  max-width: var(--hfl-shell);
  margin: 0 auto;
  padding: 0 26px 52px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 42px;
}

.hfl-foot__logotype {
  font-family: var(--hfl-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--hfl-cream);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.hfl-foot__blurb { font-size: 16px; line-height: 1.68; max-width: 38em; }

.hfl-foot__badges { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }

.hfl-foot__badges li {
  font-family: var(--hfl-display);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid rgba(247, 241, 228, 0.24);
  border-radius: 100px;
  padding: 5px 12px;
  margin: 0;
  color: rgba(247, 241, 228, 0.72);
}

.hfl-foot__head {
  font-family: var(--hfl-display);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hfl-clay-soft);
  margin: 0 0 15px;
}

.hfl-foot__addr { font-style: normal; line-height: 1.7; }
.hfl-foot__line { margin: 8px 0 0; }
.hfl-foot a { color: rgba(247, 241, 228, 0.85); text-decoration: none; }
.hfl-foot a:hover { color: var(--hfl-clay-soft); text-decoration: underline; }

.hfl-foot__clock { margin: 0; font-size: 14.5px; }
.hfl-foot__clock > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dotted rgba(247, 241, 228, 0.15); }
.hfl-foot__clock dt { color: rgba(247, 241, 228, 0.6); }
.hfl-foot__clock dd { margin: 0; text-align: right; }

.hfl-foot__list { list-style: none; padding: 0; margin: 0; }
.hfl-foot__list li { margin-bottom: 8px; font-size: 15.5px; }

.hfl-foot__rule {
  border-top: 1px solid rgba(247, 241, 228, 0.14);
  padding: 20px 26px 26px;
  max-width: var(--hfl-shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(247, 241, 228, 0.5);
}

.hfl-foot__rule p { margin: 0; }

/* ---------- motion -------------------------------------------------------- */

/* The rise-in effect is opt-in: it only arms once the inline head script has
   stamped .hfl-js on the root element. Without scripting every block renders
   fully visible, which is what a crawler or a reader-mode browser will see. */
.hfl-js .hfl-rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.hfl-js .hfl-rise--in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hfl-js .hfl-rise { opacity: 1; transform: none; transition: none; }
  .hfl-card:hover, .hfl-cta--solid:hover { transform: none; }
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1180px) {
  .hfl-menu ul { gap: 15px; }
  .hfl-menu a { font-size: 12.8px; }
  .hfl-topbar__tel { display: none; }
}

@media (max-width: 1039px) {
  .hfl-burger { display: inline-flex; margin-left: auto; }
  .hfl-topbar__side { display: none; }

  .hfl-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--hfl-bar-h);
    background: var(--hfl-espresso-2);
    border-bottom: 0 solid var(--hfl-clay);
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
    margin-left: 0;
  }

  .hfl-menu--down { max-height: 78vh; overflow-y: auto; border-bottom-width: 3px; }

  .hfl-menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 0; }
  .hfl-menu li { border-bottom: 1px solid rgba(247, 241, 228, 0.1); }
  .hfl-menu a { display: block; padding: 15px 26px; font-size: 16px; border-bottom: 0; }
  .hfl-menu__on a { background: rgba(167, 85, 49, 0.22); }

  .hfl-menu__foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 26px 26px;
  }
  .hfl-menu__tel {
    font-family: var(--hfl-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--hfl-cream);
    text-decoration: none;
  }
  .hfl-menu__foot .hfl-cta { text-align: center; }

  .hfl-split, .hfl-split--wide-right, .hfl-split--even { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hfl-rail { position: static; }
  .hfl-open__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hfl-deck--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hfl-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .hfl-callout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body.hfl-doc { font-size: 16.5px; }
  .hfl-band { padding: 54px 0; }
  .hfl-open { padding: 58px 0 64px; }
  .hfl-shell, .hfl-topbar__inner, .hfl-foot__grid, .hfl-foot__rule { padding-left: 18px; padding-right: 18px; }
  .hfl-deck--2, .hfl-deck--3, .hfl-deck--4 { grid-template-columns: minmax(0, 1fr); }
  .hfl-statset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hfl-form__row { grid-template-columns: minmax(0, 1fr); }
  .hfl-post { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hfl-step { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; }
  .hfl-step__no { font-size: 30px; }
  .hfl-person { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
  .hfl-person__badge { width: 62px; height: 62px; font-size: 18px; }
  .hfl-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .hfl-callout { padding: 30px 24px; }
  .hfl-form { padding: 22px 20px 26px; }
  .hfl-mark__where { display: none; }
}

@media (max-width: 420px) {
  .hfl-open__acts .hfl-cta { width: 100%; text-align: center; }
  .hfl-statset { grid-template-columns: minmax(0, 1fr); }
}