/* ==========================================================================
   Forma Hem AB — main stylesheet

   Design tokens are ported from the reference design, which authored them in
   oklch(). The hex values below are the exact sRGB renderings of those colours
   (all sit well inside the sRGB gamut, so nothing is lost); the original oklch
   is kept in a comment beside each so the source of truth stays traceable.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Typography
     4.  Layout primitives
     5.  Components
     6.  Header & navigation
     7.  Hero
     8.  Intro & stats
     9.  Services
     10. Projects
     11. Process
     12. Guarantees
     13. About
     14. CTA
     15. Footer
     16. Landing pages
     17. Contact
     18. Editor / misc
   ========================================================================== */


/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Palette */
  --fh-background:         #f8f5f0; /* oklch(97.2% .008 85) */
  --fh-foreground:         #241e1a; /* oklch(24%   .012 60) */
  --fh-card:               #fcfaf6; /* oklch(98.5% .006 85) */
  --fh-primary:            #241e1a; /* oklch(24%   .012 60) */
  --fh-primary-foreground: #f8f5f0; /* oklch(97.2% .008 85) */
  --fh-secondary:          #ede7de; /* oklch(93%   .014 82) */
  --fh-muted:              #efebe3; /* oklch(94%   .011 84) */
  --fh-muted-foreground:   #69625b; /* oklch(50%   .014 70) */
  --fh-accent:             #ad8c5a; /* oklch(66%   .078 78) */
  --fh-accent-foreground:  #15110d; /* oklch(18%   .01  60) */
  --fh-border:             #dbd7cf; /* oklch(88%   .012 82) */
  --fh-stone-deep:         #191512; /* oklch(20%   .008 60) */
  --fh-brass:              #b69255; /* oklch(68%   .09  80) */
  --fh-sand:               #e4ddd1; /* oklch(90%   .018 82) */
  --fh-clay:               #9e7f6a; /* oklch(62%   .05  55) */

  /* Channel triplets, for the translucent variants used throughout */
  --fh-background-rgb:         248 245 240;
  --fh-foreground-rgb:          36  30  26;
  --fh-secondary-rgb:          237 231 222;
  --fh-border-rgb:             219 215 207;
  --fh-primary-foreground-rgb: 248 245 240;
  --fh-stone-deep-rgb:          25  21  18;

  /* Type */
  --fh-font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --fh-font-display: "Cormorant Garamond", Georgia, serif;

  /* Metrics */
  --fh-radius: 2px;
  --fh-container: 1400px;
  --fh-gutter: 1.5rem;
  --fh-section-y: 6rem;

  /* Motion — a single decelerating curve unifies every transition */
  --fh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fh-delay: 0ms;
}

@media (min-width: 768px) {
  :root {
    --fh-gutter: 3rem;
    --fh-section-y: 9rem;
  }
}


/* 2. Reset & base ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--fh-background);
  color: var(--fh-foreground);
  font-family: var(--fh-font-sans);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* `li` is reset too — wp_nav_menu can emit list items without their parent. */
ul, ol, li { margin: 0; padding: 0; list-style: none; }
figure, dl, dd, p, blockquote { margin: 0; }

::selection {
  background: var(--fh-brass);
  color: var(--fh-stone-deep);
}

:focus-visible {
  outline: 2px solid var(--fh-accent);
  outline-offset: 3px;
}

.fh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--fh-primary);
  color: var(--fh-primary-foreground);
  padding: 1rem 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fh-skip-link:focus { left: 0; }

.fh-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* 3. Typography ------------------------------------------------------------
   The design was authored against a scale that pairs each size with its own
   line-height, so both are always set together. Where a rule below omits
   line-height it is deliberate — that element inherits 1.5 from the body.
     0.75rem/1rem   0.875rem/1.25rem  1rem/1.5rem     1.125rem/1.75rem
     1.25rem/1.75rem  1.5rem/2rem     1.875rem/2.25rem  2.25rem/2.5rem
   Headings that set their own ratio (1.04–1.15) are display type and override
   the pairing; long-form copy uses 1.625.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

h1, h2, h3 {
  font-family: var(--fh-font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.fh-display { font-family: var(--fh-font-display); }

/* The small uppercase label that opens nearly every block. */
.fh-eyebrow {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fh-muted-foreground);
}

/* Stays at 1rem across breakpoints — only the hero lead scales up. */
.fh-lead {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
  max-width: 36rem;
}

.fh-prose { line-height: 1.625; color: var(--fh-muted-foreground); }
.fh-prose + .fh-prose { margin-top: 1.25rem; }


/* 4. Layout primitives ----------------------------------------------------- */

.fh-container {
  width: 100%;
  max-width: var(--fh-container);
  margin-inline: auto;
}

.fh-section {
  padding-block: var(--fh-section-y);
  padding-inline: var(--fh-gutter);
}

/* First section on an inner page clears the fixed header. */
.fh-section--page-top { padding-top: 10rem; }
@media (min-width: 768px) {
  .fh-section--page-top { padding-top: 13rem; }
}

.fh-section--muted   { background-color: rgb(var(--fh-secondary-rgb) / 0.4); }
.fh-section--muted-soft { background-color: rgb(var(--fh-secondary-rgb) / 0.2); }
.fh-section--dark {
  background-color: var(--fh-primary);
  color: var(--fh-primary-foreground);
}
.fh-section--dark .fh-eyebrow { color: rgb(var(--fh-primary-foreground-rgb) / 0.6); }

/* The 12-column grid the whole design is set on. */
.fh-grid {
  display: grid;
  gap: 4rem;
}
@media (min-width: 768px) {
  .fh-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Pushes a grid away from a full-width image sitting above it. */
.fh-grid--spaced { margin-top: 5rem; }

.fh-story__heading { font-size: 1.875rem; line-height: 1.15; }
@media (min-width: 768px) {
  .fh-story__heading { font-size: 2.25rem; }
}

.fh-section-head { max-width: 48rem; }
.fh-section-head h1,
.fh-section-head h2 {
  margin-top: 1.5rem;
  font-size: 2.25rem;
  line-height: 1.1;
}
/* The eyebrow is also a <p>, and must keep its own zero margin. */
.fh-section-head p:not(.fh-eyebrow) { margin-top: 2rem; }
@media (min-width: 768px) {
  .fh-section-head h1,
  .fh-section-head h2 { font-size: 3.75rem; }
}


/* 5. Components ------------------------------------------------------------ */

/* Buttons — square, letter-spaced, no radius beyond the 2px token. */
.fh-btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--fh-radius);
  padding: 1rem 2.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.5s var(--fh-ease), color 0.5s var(--fh-ease),
              background-color 0.5s var(--fh-ease), border-color 0.5s var(--fh-ease);
}

.fh-btn--accent {
  border-color: var(--fh-accent);
  background-color: var(--fh-accent);
  color: var(--fh-accent-foreground);
}
.fh-btn--accent:hover { opacity: 0.85; }

.fh-btn--ghost-light {
  border-color: rgb(255 255 255 / 0.4);
  color: #fff;
}
.fh-btn--ghost-light:hover { border-color: #fff; }

.fh-btn--ghost-dark {
  border-color: rgb(var(--fh-primary-foreground-rgb) / 0.3);
  color: var(--fh-primary-foreground);
}
.fh-btn--ghost-dark:hover { border-color: var(--fh-primary-foreground); }

.fh-btn--outline {
  border-color: rgb(var(--fh-foreground-rgb) / 0.25);
  color: var(--fh-foreground);
}
.fh-btn--outline:hover {
  border-color: var(--fh-accent);
  background-color: var(--fh-accent);
  color: var(--fh-accent-foreground);
}

.fh-btn--sm { padding: 0.875rem 1.75rem; font-size: 0.68rem; }

.fh-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}

/* Underlined text link used for tertiary actions. */
.fh-textlink {
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(var(--fh-foreground-rgb) / 0.3);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s var(--fh-ease), border-color 0.3s var(--fh-ease);
}
.fh-textlink:hover {
  color: var(--fh-accent);
  border-color: var(--fh-accent);
}

/* Slow image zoom on hover — the design's one recurring flourish. */
.fh-zoom { overflow: hidden; background-color: var(--fh-muted); }
.fh-zoom--4x5 { aspect-ratio: 4 / 5; }
.fh-zoom img { transition: transform 1.4s var(--fh-ease); }
.fh-zoom:hover img,
.fh-card:hover .fh-zoom img { transform: scale(1.045); }

.fh-ratio-4x5  { aspect-ratio: 4 / 5;  width: 100%; object-fit: cover; }
.fh-ratio-16x9 { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.fh-ratio-16x11 { aspect-ratio: 16 / 11; width: 100%; object-fit: cover; }
.fh-ratio-fill { height: 100%; width: 100%; object-fit: cover; }

/* Scroll reveal. Hidden only when JS is present, so no-JS users see content. */
.js .fh-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--fh-ease) var(--fh-delay),
              transform 1.1s var(--fh-ease) var(--fh-delay);
}
.js .fh-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* The hero animates on load rather than on scroll. */
.fh-reveal-now { animation: fh-reveal-up 1.1s var(--fh-ease) both; }

@keyframes fh-reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fh-reveal { opacity: 1; transform: none; transition: none; }
  .fh-reveal-now { animation: none; }
  .fh-zoom img { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* 6. Header & navigation --------------------------------------------------- */

.fh-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(var(--fh-border-rgb) / 0.7);
  background-color: rgb(var(--fh-background-rgb) / 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.5s var(--fh-ease);
}

.fh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--fh-container);
  margin-inline: auto;
  padding: 1.5rem var(--fh-gutter);
  transition: padding 0.5s var(--fh-ease);
}

/* Condenses once the page has scrolled past 24px. */
.fh-header.is-scrolled .fh-header__inner { padding-block: 1rem; }

.fh-brand { display: flex; flex-direction: column; line-height: 1; }
.fh-brand__name {
  font-family: var(--fh-font-display);
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.fh-brand__accent { color: var(--fh-accent); }
.fh-brand__tag {
  margin-top: 0.375rem;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fh-muted-foreground);
}
@media (min-width: 768px) {
  .fh-brand__name { font-size: 1.6rem; }
}

.fh-nav { display: none; }
@media (min-width: 768px) {
  .fh-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }
}

.fh-nav__list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.fh-nav a {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--fh-foreground-rgb) / 0.75);
  transition: color 0.3s var(--fh-ease);
}
.fh-nav a:hover,
.fh-nav .current-menu-item > a,
.fh-nav .current_page_item > a { color: var(--fh-accent); }

.fh-nav .fh-btn {
  font-size: 0.7rem;
  padding: 0.75rem 1.5rem;
  color: var(--fh-foreground);
}
.fh-nav .fh-btn:hover { color: var(--fh-accent-foreground); }

/* Hamburger — two rules that rotate into a cross. */
.fh-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
@media (min-width: 768px) { .fh-burger { display: none; } }

.fh-burger__box { position: relative; display: block; width: 1.5rem; height: 0.75rem; }
.fh-burger__box span {
  position: absolute;
  left: 0;
  display: block;
  width: 1.5rem;
  height: 1px;
  background-color: var(--fh-foreground);
  transition: transform 0.5s var(--fh-ease), top 0.5s var(--fh-ease);
}
.fh-burger__box span:first-child { top: 0; }
.fh-burger__box span:last-child  { top: 0.75rem; }

.fh-burger[aria-expanded="true"] .fh-burger__box span:first-child { top: 0.375rem; transform: rotate(45deg); }
.fh-burger[aria-expanded="true"] .fh-burger__box span:last-child  { top: 0.375rem; transform: rotate(-45deg); }

.fh-mobile-nav {
  display: none;
  border-top: 1px solid var(--fh-border);
  background-color: var(--fh-background);
  padding: 1.5rem var(--fh-gutter) 2.5rem;
}
.fh-mobile-nav.is-open { display: block; }
@media (min-width: 768px) { .fh-mobile-nav { display: none !important; } }

.fh-mobile-nav a {
  display: block;
  padding: 0.875rem 0;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fh-border);
}
.fh-mobile-nav li:last-child a { border-bottom: 0; }
.fh-mobile-nav .fh-btn { margin-top: 1.5rem; width: 100%; text-align: center; border-bottom: 0; }


/* 7. Hero ------------------------------------------------------------------ */

.fh-hero {
  position: relative;
  width: 100%;
  min-height: 92vh;
  min-height: 92dvh;
  overflow: hidden;
}

.fh-hero__media {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Two stacked washes: a left-to-right scrim for legibility, plus a rise from
   the bottom edge so the copy sits on the darkest part of the frame. */
.fh-hero::before,
.fh-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.fh-hero::before {
  inset: 0;
  background-image: linear-gradient(
    to right,
    rgb(var(--fh-stone-deep-rgb) / 0.75),
    rgb(var(--fh-stone-deep-rgb) / 0.4) 50%,
    rgb(var(--fh-stone-deep-rgb) / 0.05)
  );
}
.fh-hero::after {
  inset-inline: 0;
  bottom: 0;
  height: 66.6667%;
  background-image: linear-gradient(to top, rgb(var(--fh-stone-deep-rgb) / 0.6), transparent);
}

.fh-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: var(--fh-container);
  min-height: 92vh;
  min-height: 92dvh;
  margin-inline: auto;
  padding: 10rem var(--fh-gutter) 6rem;
}
@media (min-width: 768px) {
  .fh-hero__inner { padding-bottom: 8rem; }
}

.fh-hero__content { max-width: 42rem; }
.fh-hero .fh-eyebrow { color: rgb(255 255 255 / 0.7); }

.fh-hero h1 {
  margin-top: 2rem;
  font-size: 3rem;
  line-height: 1.04;
  color: #fff;
}
@media (min-width: 768px) { .fh-hero h1 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .fh-hero h1 { font-size: 6rem; } }

.fh-hero__lead {
  margin-top: 2rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.8);
}
@media (min-width: 768px) { .fh-hero__lead { font-size: 1.125rem; } }

/* Shorter variant used at the top of the service landing pages. */
.fh-hero--compact,
.fh-hero--compact .fh-hero__inner { min-height: 70vh; min-height: 70dvh; }
.fh-hero--compact::after { content: none; }
.fh-hero--compact::before {
  background-image: linear-gradient(
    to right,
    rgb(var(--fh-stone-deep-rgb) / 0.75),
    rgb(var(--fh-stone-deep-rgb) / 0.4) 50%,
    transparent
  );
}
.fh-hero--compact .fh-hero__inner { padding-bottom: 5rem; }
.fh-hero--compact h1 {
  margin-top: 1.75rem;
  font-size: 2.25rem;
  line-height: 1.06;
}
@media (min-width: 768px) { .fh-hero--compact h1 { font-size: 3.75rem; } }
.fh-hero--compact .fh-hero__lead { margin-top: 1.75rem; font-size: 1rem; }


/* 8. Intro & stats --------------------------------------------------------- */

/* Reusable 5 / 6 column split. `.fh-intro__*` adds the front page's own
   typography on top; other pages take the placement only. */
@media (min-width: 768px) {
  .fh-col-left,
  .fh-intro__head { grid-column: span 5; }
  .fh-col-right,
  .fh-intro__body { grid-column: 7 / span 6; }
}

.fh-intro__head h2 {
  margin-top: 1.5rem;
  font-size: 1.875rem;
  line-height: 1.15;
}
@media (min-width: 768px) {
  .fh-intro__head h2 { font-size: 3rem; }
}

.fh-intro__body > p:first-child { font-size: 1.125rem; line-height: 1.625; color: var(--fh-muted-foreground); }
.fh-intro__body > p + p { margin-top: 1.5rem; line-height: 1.625; color: var(--fh-muted-foreground); }

.fh-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--fh-border);
}
.fh-stats__value {
  font-family: var(--fh-font-display);
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.fh-stats .fh-eyebrow { margin-top: 0.5rem; }


/* 9. Services -------------------------------------------------------------- */

.fh-cards {
  display: grid;
  gap: 4rem 2rem;
  margin-top: 5rem;
}
@media (min-width: 640px)  { .fh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fh-cards--flush { margin-top: 0; }

.fh-card { display: block; }
.fh-card h2,
.fh-card h3 {
  margin-top: 1.75rem;
  font-size: 1.5rem;
  line-height: 2rem;
  transition: color 0.3s var(--fh-ease);
}
.fh-card:hover h2,
.fh-card:hover h3 { color: var(--fh-accent); }
.fh-card p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}
.fh-card__more {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fh-accent);
}


/* 10. Projects ------------------------------------------------------------- */

.fh-projects { margin-top: 5rem; display: grid; gap: 6rem; }
.fh-projects__more { margin-top: 5rem; }

.fh-project { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) {
  .fh-project { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fh-project__media { grid-column: 1 / span 7; }
  .fh-project__body  { grid-column: 9 / span 4; }

  /* Every other row mirrors: image right, copy left. */
  .fh-project--flip .fh-project__media { grid-column: 6 / span 7; grid-row: 1; }
  .fh-project--flip .fh-project__body  { grid-column: 1 / span 4; grid-row: 1; }
}

.fh-project__body h2,
.fh-project__body h3 { margin-top: 1.25rem; font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 768px) {
  .fh-project__body h2,
  .fh-project__body h3 { font-size: 2.25rem; line-height: 2.5rem; }
}
.fh-project__body p:not(.fh-eyebrow) { margin-top: 1.25rem; line-height: 1.625; color: var(--fh-muted-foreground); }

/* Staggered two-column grid used on the Projects archive page. */
.fh-project-grid { display: grid; gap: 5rem 2.5rem; }
@media (min-width: 768px) {
  .fh-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fh-project-grid > :nth-child(4n + 2),
  .fh-project-grid > :nth-child(4n + 3) { padding-top: 4rem; }
}
.fh-project-card .fh-eyebrow { display: block; margin-top: 1.75rem; }
.fh-project-card h2 { margin-top: 1rem; font-size: 1.875rem; line-height: 2.25rem; }
.fh-project-card p {
  margin-top: 1rem;
  max-width: 28rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}


/* 11. Process -------------------------------------------------------------- */

/* Standalone heading for blocks that open with just an eyebrow + title. */
.fh-block-heading {
  margin-top: 1.5rem;
  max-width: 42rem;
  font-size: 2.25rem;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .fh-block-heading { font-size: 3.75rem; }
  /* Landing pages carry a slightly smaller variant. */
  .fh-block-heading--sm { font-size: 3rem; }
}

/* Hairline grid drawn with a 1px gap over a translucent background. */
.fh-steps {
  display: grid;
  gap: 1px;
  margin-top: 5rem;
  border: 1px solid rgb(var(--fh-primary-foreground-rgb) / 0.15);
  background-color: rgb(var(--fh-primary-foreground-rgb) / 0.15);
}
@media (min-width: 640px)  { .fh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fh-steps--tight { margin-top: 4rem; }

.fh-step { background-color: var(--fh-primary); }
.fh-step__inner { height: 100%; padding: 2.5rem; }
.fh-steps--tight .fh-step__inner { padding: 2.25rem; }

.fh-step__num {
  font-family: var(--fh-font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--fh-accent);
}
.fh-step h3 { margin-top: 1.5rem; font-size: 1.5rem; line-height: 2rem; }
.fh-steps--tight .fh-step h3 { margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.75rem; }
.fh-step p {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgb(var(--fh-primary-foreground-rgb) / 0.65);
}
.fh-steps--tight .fh-step p { margin-top: 0.75rem; }

/* Full-width numbered list used on the standalone Process page. */
.fh-steplist { border-top: 1px solid var(--fh-border); }
.fh-steplist li {
  display: grid;
  gap: 1.5rem;
  padding-block: 3rem;
  border-bottom: 1px solid var(--fh-border);
}
@media (min-width: 768px) {
  .fh-steplist li { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fh-steplist__num  { grid-column: span 2; }
  .fh-steplist__name { grid-column: span 4; }
  .fh-steplist__text { grid-column: span 6; }
}
.fh-steplist__num {
  font-family: var(--fh-font-display);
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: var(--fh-accent);
}
.fh-steplist__name { font-size: 1.875rem; line-height: 2.25rem; }
.fh-steplist__text { line-height: 1.625; color: var(--fh-muted-foreground); }


/* 12. Guarantees ----------------------------------------------------------- */

@media (min-width: 768px) {
  .fh-guarantees__head { grid-column: span 4; }
  .fh-guarantees__list { grid-column: 6 / span 7; }
}

.fh-deflist { border-block: 1px solid var(--fh-border); }
.fh-deflist__row {
  display: grid;
  gap: 0.75rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--fh-border);
}
.fh-deflist > :last-child .fh-deflist__row { border-bottom: 0; }
@media (min-width: 640px) {
  .fh-deflist__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fh-deflist__row dd { grid-column: span 2; }
}
.fh-deflist__row dt { font-size: 1rem; letter-spacing: 0.06em; }
.fh-deflist__row dd {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}

/* Compact 4-up grid of the same content, used as a reassurance strip. */
.fh-guarantee-strip {
  display: grid;
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px)  { .fh-guarantee-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fh-guarantee-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fh-guarantee-strip h3 { font-size: 1.125rem; line-height: 1.75rem; }
.fh-guarantee-strip p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}

/* Roomier variant carrying all eight guarantees on the Process page. */
.fh-guarantee-strip--wide { margin-top: 4rem; gap: 2.5rem; }
.fh-guarantee-strip--wide h3 { font-size: 1.25rem; line-height: 1.75rem; }
.fh-guarantee-strip--wide p { margin-top: 0.75rem; }


/* 13. About ---------------------------------------------------------------- */

.fh-grid--centered { align-items: center; }

@media (min-width: 768px) {
  .fh-about__media { grid-column: span 5; }
  .fh-about__body  { grid-column: 7 / span 6; }
}
.fh-about__body h2 {
  margin-top: 1.5rem;
  font-size: 2.25rem;
  line-height: 1.1;
}
@media (min-width: 768px) { .fh-about__body h2 { font-size: 3rem; } }
.fh-about__body > p:not(.fh-eyebrow) { margin-top: 1.25rem; line-height: 1.625; color: var(--fh-muted-foreground); }
.fh-about__body > .fh-eyebrow + h2 + p { margin-top: 2rem; }
.fh-about__body .fh-textlink { margin-top: 2.5rem; }

/* The "part of Fönstria" note. It appears in three different parents (the two
   about blocks and the footer), so it carries its own rhythm rather than
   relying on any of them. A brass hairline marks it as an aside without
   turning it into a box. */
.fh-affiliation {
  margin-top: 2.5rem;
  border-left: 1px solid var(--fh-accent);
  padding: 0.25rem 0 0.25rem 1.5rem;
}
.fh-affiliation__text {
  margin-top: 0.75rem;
  max-width: 32rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}
/* With the eyebrow suppressed, the text is the first line. */
.fh-affiliation > .fh-affiliation__text:first-child { margin-top: 0; }
.fh-affiliation .fh-textlink { margin-top: 1.5rem; }

.fh-affiliation--footer { margin-top: 1.5rem; padding-left: 1.25rem; }
.fh-affiliation--footer .fh-affiliation__text { font-size: 0.8125rem; max-width: 20rem; }
.fh-affiliation--footer .fh-textlink { margin-top: 1.25rem; font-size: 0.6875rem; }

/* On the dark ground the brass rule stays, but the copy has to lift. */
.fh-section--dark .fh-affiliation__text { color: rgb(var(--fh-primary-foreground-rgb) / 0.7); }


/* 14. CTA ------------------------------------------------------------------ */

.fh-cta { padding-block: 7rem; }
@media (min-width: 768px) { .fh-cta { padding-block: 9rem; } }

.fh-cta__inner { max-width: 48rem; }
.fh-cta h2 {
  margin-top: 1.5rem;
  font-size: 2.25rem;
  line-height: 1.1;
}
@media (min-width: 768px) { .fh-cta h2 { font-size: 3.75rem; } }
.fh-cta p:not(.fh-eyebrow) {
  margin-top: 2rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.625;
  color: rgb(var(--fh-primary-foreground-rgb) / 0.7);
}


/* 15. Footer --------------------------------------------------------------- */

.fh-footer {
  border-top: 1px solid var(--fh-border);
  background-color: rgb(var(--fh-secondary-rgb) / 0.4);
  padding: 5rem var(--fh-gutter);
}

.fh-footer__grid { display: grid; gap: 3.5rem; }
@media (min-width: 768px) {
  .fh-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fh-footer__brand { grid-column: span 4; }
  .fh-footer__contact { grid-column: span 3; }
  .fh-footer__links { grid-column: span 5; }
}

.fh-footer__name {
  font-family: var(--fh-font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fh-footer__blurb {
  margin-top: 1.5rem;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}

.fh-footer ul {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fh-muted-foreground);
}
.fh-footer__contact li + li { margin-top: 0.75rem; }
.fh-footer__links ul { display: grid; gap: 0.75rem; }
@media (min-width: 640px) {
  .fh-footer__links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fh-footer a { transition: color 0.3s var(--fh-ease); }
.fh-footer a:hover { color: var(--fh-accent); }

.fh-footer__base {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--fh-border);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fh-muted-foreground);
}
@media (min-width: 640px) {
  .fh-footer__base { flex-direction: row; justify-content: space-between; }
}


/* 16. Landing pages -------------------------------------------------------- */

@media (min-width: 768px) {
  .fh-landing__main  { grid-column: span 7; }
  .fh-landing__aside { grid-column: 9 / span 4; }
}

.fh-landing__articles { display: grid; gap: 4rem; }
.fh-landing__articles h2 { font-size: 1.875rem; line-height: 1.15; }
@media (min-width: 768px) { .fh-landing__articles h2 { font-size: 2.25rem; } }
.fh-landing__articles .fh-prose-group { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
/* The group spaces its children with `gap`, so suppress the sibling margin. */
.fh-prose-group > .fh-prose + .fh-prose { margin-top: 0; }

.fh-aside-card {
  position: sticky;
  top: 7rem;
  border: 1px solid var(--fh-border);
  background-color: rgb(var(--fh-secondary-rgb) / 0.4);
  padding: 2.25rem;
}
.fh-aside-card ul {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}
.fh-aside-card li {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--fh-border);
}
.fh-aside-card li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.fh-aside-card .fh-btn { margin-top: 2rem; }

.fh-gallery { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 640px) { .fh-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fh-gallery figcaption {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fh-muted-foreground);
}

/* FAQ shares the guarantees column split but with larger questions. */
.fh-faq { border-block: 1px solid var(--fh-border); }
.fh-faq__row { padding-block: 2rem; border-bottom: 1px solid var(--fh-border); }
.fh-faq > :last-child .fh-faq__row { border-bottom: 0; }
/* Questions are <dt>, not headings — they stay in the sans face. */
.fh-faq__row dt { font-size: 1.25rem; line-height: 1.75rem; }
.fh-faq__row dd {
  margin-top: 0.75rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}
@media (min-width: 768px) {
  .fh-faq-head { grid-column: span 4; }
  .fh-faq-body { grid-column: 6 / span 7; }
}
.fh-faq-head h2 { margin-top: 1.5rem; font-size: 2.25rem; line-height: 1.1; }

/* Values list on the About page — same skeleton, bigger terms. */
.fh-values {
  margin-top: 2rem;
  border-block: 1px solid var(--fh-border);
}
.fh-values__row { padding-block: 2rem; border-bottom: 1px solid var(--fh-border); }
.fh-values > :last-child .fh-values__row { border-bottom: 0; }
.fh-values__row dt { font-size: 1.5rem; line-height: 2rem; }
.fh-values__row dd { margin-top: 0.75rem; line-height: 1.625; color: var(--fh-muted-foreground); }


/* 17. Contact -------------------------------------------------------------- */

@media (min-width: 768px) {
  .fh-contact__info { grid-column: span 5; }
  .fh-contact__form { grid-column: 7 / span 6; }
}

.fh-contact__details { margin-top: 3.5rem; display: grid; gap: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.fh-contact__details dd { margin-top: 0.5rem; }
.fh-contact__details a { transition: color 0.3s var(--fh-ease); }
.fh-contact__details a:hover { color: var(--fh-accent); }

.fh-form { display: grid; gap: 2rem; }
.fh-form__row { display: grid; gap: 2rem; }
@media (min-width: 640px) {
  .fh-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The 1.5rem line box (not the label's own 11px type) sets the row rhythm. */
.fh-form label { display: block; line-height: 1.5rem; }

/* Inputs are bare rules, not boxes — they read as part of the page. */
.fh-form input,
.fh-form select,
.fh-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--fh-border);
  border-radius: 0;
  background-color: transparent;
  padding-block: 1rem;
  font-size: 1rem;
  transition: border-color 0.3s var(--fh-ease);
  -webkit-appearance: none;
  appearance: none;
}
.fh-form textarea { resize: none; }
.fh-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--fh-muted-foreground) 50%),
                    linear-gradient(135deg, var(--fh-muted-foreground) 50%, transparent 50%);
  background-position: calc(100% - 12px) 1.55rem, calc(100% - 7px) 1.55rem;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.fh-form input::placeholder,
.fh-form textarea::placeholder { color: var(--fh-muted-foreground); opacity: 1; }
.fh-form input:focus,
.fh-form select:focus,
.fh-form textarea:focus {
  outline: none;
  border-color: var(--fh-accent);
}
.fh-form input:focus-visible,
.fh-form select:focus-visible,
.fh-form textarea:focus-visible { outline: none; }

.fh-form__note {
  font-size: 0.8rem;
  line-height: 1.625;
  color: var(--fh-muted-foreground);
}

.fh-notice {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--fh-border);
  background-color: rgb(var(--fh-secondary-rgb) / 0.5);
  font-size: 0.875rem;
  line-height: 1.625;
}
.fh-notice--ok    { border-color: var(--fh-accent); }
.fh-notice--error { border-color: #b33832; color: #b33832; }


/* Pagination on the blog index and archives. */
.fh-pagination { margin-top: 5rem; }
.fh-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.fh-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--fh-border);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: border-color 0.3s var(--fh-ease), color 0.3s var(--fh-ease);
}
.fh-pagination .page-numbers:hover { border-color: var(--fh-accent); color: var(--fh-accent); }
.fh-pagination .page-numbers.current {
  border-color: var(--fh-accent);
  background-color: var(--fh-accent);
  color: var(--fh-accent-foreground);
}

/* Search form. */
.fh-search { display: flex; gap: 1rem; margin-top: 2rem; max-width: 32rem; }
.fh-search input[type="search"] {
  flex: 1;
  border: 0;
  border-bottom: 1px solid var(--fh-border);
  background: transparent;
  padding-block: 0.75rem;
  font-size: 1rem;
}
.fh-search input[type="search"]:focus { outline: none; border-color: var(--fh-accent); }

/* Comments — plain, since the design has no styling for them. */
.fh-comments { margin-top: 5rem; max-width: 48rem; }
.fh-comments ol { list-style: none; }
.fh-comments .comment-body { padding-block: 1.75rem; border-bottom: 1px solid var(--fh-border); }
.fh-comments .comment-meta { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fh-muted-foreground); }
.fh-comments p { margin-top: 0.75rem; line-height: 1.625; }


/* 18. Editor / misc -------------------------------------------------------- */

/* Fallback styling for arbitrary editor content on generic pages. */
.fh-entry { max-width: 48rem; }
.fh-entry h1, .fh-entry h2, .fh-entry h3 { margin-top: 2.5rem; }
.fh-entry h2 { font-size: 2.25rem; line-height: 1.15; }
.fh-entry h3 { font-size: 1.5rem; }
.fh-entry h4, .fh-entry h5, .fh-entry h6 { margin-top: 2rem; font-size: 1.125rem; letter-spacing: 0.04em; }
.fh-entry p, .fh-entry ul, .fh-entry ol { margin-top: 1.25rem; line-height: 1.625; color: var(--fh-muted-foreground); }
.fh-entry ul, .fh-entry ol { padding-left: 1.25rem; list-style: revert; }
.fh-entry li + li { margin-top: 0.5rem; }
.fh-entry a { color: var(--fh-accent); border-bottom: 1px solid rgb(173 140 90 / 0.4); }
.fh-entry a:hover { border-color: var(--fh-accent); }
.fh-entry img { margin-top: 2rem; }
.fh-entry blockquote {
  margin-top: 2rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--fh-accent);
  font-family: var(--fh-font-display);
  font-size: 1.5rem;
  line-height: 1.4;
}
.fh-entry > :first-child { margin-top: 0; }
.fh-entry--spaced { margin-top: 3rem; }

.alignleft  { float: left;  margin: 0 2rem 1.5rem 0; }
.alignright { float: right; margin: 0 0 1.5rem 2rem; }
.aligncenter { margin-inline: auto; }
.wp-caption-text { margin-top: 0.75rem; font-size: 0.8rem; color: var(--fh-muted-foreground); }