/* Bryn BK — header/footer fidelity
 * Buttons: Figma Section 406:5897 (Ghost 2:812 / HERO 2:1209 / menu-hamburger 118:791 / Outline 2:1186)
 * Footer: 360:3665
 *
 * Cap-height: Figma trimmer tekstboksen til cap/alphabetic. `text-box-trim` virker
 * ikke på en flex-container (ingen block-line-boks å trimme), så komponenthøyden
 * settes eksplisitt til Figma-høyden i stedet — line-boksen sentreres, og fordi
 * cap-boksen er sentrisk i line-boksen gir det nøyaktig 8px over/under cap.
 */
:root {
  /* Farger — navn = Figma-variabel */
  --bryn-blaa: #3d4477;        /* Surface/Brand/Blå */
  --bryn-blaa-lys: #4e5798;    /* Surface/Brand/Blå Lys */
  --bryn-blaa-mork: #2a2e51;   /* Text/BRYN-BLÅ */
  --bryn-rod: #ff2d44;         /* Surface/Brand/Rød */
  --bryn-rod-lys: #ff808d;     /* Surface/Brand/Rød Lys */
  --bryn-gronn: #b2b286;       /* Surface/Brand/Grønn */
  --bryn-rod-hover: #cc0017;   /* Text/BRYN-RØD */
  --bryn-text: #333333;        /* Text/Dark */
  --bryn-black: #000000;       /* text-black — Figma 536:2699 ingress */
  --bryn-disable: #999999;     /* Text/Disable */
  --bryn-white: #ffffff;       /* Text/Light · Surface/Light/Light */
  --bryn-card: #f5f5f5;        /* Surface/Light/Card */
  --bryn-hover: #d9d9d9;       /* Surface/Light/Hover — accordion 162:1458 / 162:1476 */
  --bryn-gra: #d9d9d9;         /* Surface/Brand/BRYN GRÅ — News Content 9:196 */
  --bryn-disable-bg: #bfbfbf;  /* Surface/Light/Disable */
  --bryn-ghost-hover-bg: rgba(255, 255, 255, 0.5); /* Ghost Hover: rå rgba i Figma, ingen variabel */
  --bryn-backdrop: rgba(42, 46, 81, 0.35);         /* prosjekttillegg — finnes ikke i Figma */
  /* Spacing — navn = Figma-variabel */
  --bryn-s-50: 2px;
  --bryn-s-100: 4px;   /* scale/100 */
  --bryn-s-200: 8px;   /* Scale/200 · Nautrals/200 2 */
  --bryn-s-300: 12px;
  --bryn-s-400: 16px;
  --bryn-s-600: 24px;
  --bryn-s-800: 32px;
  --bryn-s-1000: 48px;
  --bryn-s-1100: 64px;
  --bryn-s-1200: 96px;
  --bryn-s-1300: 128px;        /* Scale/1300 */
  --bryn-max: 1344px;          /* innholdsbredde, header 118:1329 max-w */
  --bryn-drawer-w: 432px;      /* drawer 118:1366 — brukes som mobil-fallback */
  --bryn-drawer-content: 336px; /* 432 − 48 − 48 = innholdsbredden i drawer */
  --bryn-footer-brand-h: 292px;
  /* Typografi */
  --bryn-font-display: "Space Grotesk", system-ui, sans-serif;
  --bryn-font-body: Inter, system-ui, sans-serif;
  --bryn-sub1-size: 20px;       /* sub1/font-size */
  --bryn-sub1-lh: 28px;         /* sub1/line height */
  --bryn-sub1-gap: 12px;        /* sub1/paragraph spacing */
  --bryn-sub2-size: 18px;       /* sub2/font-size — Figma 536:2699 */
  --bryn-sub2-lh: 25.2px;       /* sub2/line height */
  --bryn-sub2-gap: 12px;        /* sub1/paragraph spacing, lagt på sub2 — ingress */
  --bryn-p2-size: 16px;         /* p2/font-size */
  --bryn-p2-lh: 22.4px;         /* p2/line height */
  --bryn-p2-gap: 16px;          /* p2 paragraph spacing — Figma 262:2242 Scale/400 */
  --bryn-h3-size: 32px;         /* h3/font-size */
  --bryn-h3-lh: 41.6px;         /* h3/line height */
  --bryn-h4-size: 24px;         /* h4/font-size */
  --bryn-h4-lh: 31.2px;         /* h4/line height */
  --bryn-prose: 660px;          /* brød/liste-bredde — Figma 536:2702 */
  --bryn-measure: 888px;        /* H2/H4/ingress-bredde — Figma 262:2209 */
  --bryn-toc-col: 432px;        /* TOC-kolonne — Figma 262:2199 */
  --bryn-button-font-size: 16px;    /* button/font-size */
  --bryn-button-line-height: 22.4px; /* button/line height */
  /* Komponenthøyder fra Figma-variantene */
  --bryn-h-ghost: 28px;   /* 2:813 */
  --bryn-h-hero: 36px;    /* 2:1210 */
  --bryn-h-outline: 44px; /* 2:1187 min-h */
  --bryn-h-burger: 44px;  /* 118:790 */
  --bryn-h-header: 92px;  /* 118:1329: 24 + 44 + 24 */
  --bryn-h-navlink: 28px; /* 223:1633 */
  /* Forside-seksjoner */
  --bryn-hero-h: 80vh;         /* bestilt høyde; Figma 9:166 er faste 936px */
  --bryn-hero-col: 660px;      /* 9:168 */
  --bryn-card-bar: 92px;       /* 266:2962 — stripens høyde i Default */
  --bryn-card-ratio: 318 / 424; /* 266:3370 */
  /* Figma eksporterer ingen motion-noder for disse komponentene (get_motion_context = []).
   * Varighet/easing er derfor prosjektverdi, ikke lest fra Figma. */
  --bryn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bryn-dur: 300ms;
}

/* Forsiden har en Elementor-seksjon som stikker 47px ut. `body` har allerede
 * overflow-x: hidden, men det propagerer ikke til viewporten, så <html> kunne
 * scrolles sidelengs (målt scrollLeft 42.5). `hidden` her lar overflow-y bli
 * `auto` og beholder vertikal scroll. Bruk ikke `clip` — det låser scrollTop. */
html {
  overflow-x: hidden;
  /* Rullefeltsporet reserveres permanent, slik at scroll-låsen under
   * ikke flytter innholdet 15px sidelengs når menyen åpnes. */
  scrollbar-gutter: stable;
}

/* —— Header (118:1329) —— sticky med scroll-oppførsel
 * 0–200px scrollet: gjennomsiktig, alltid synlig
 * >200px + scroll ned: skjules oppover
 * >200px + scroll opp: vises igjen med Surface/Light/Card som bakgrunn
 */
.bryn-header {
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bryn-s-600) var(--bryn-s-1000);
  background: transparent;
  box-sizing: border-box;
  transform: translateY(0);
  transition:
    transform var(--bryn-dur) var(--bryn-ease),
    background-color var(--bryn-dur) var(--bryn-ease);
}
/* Child-temaets legacy-regel `body.home header { position: absolute }`
 * (style.css:347) har høyere spesifisitet enn .bryn-header. Doblet klasse
 * vinner uten at legacy-CSS må endres. */
.bryn-header.bryn-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
}
.bryn-header[data-scroll="top"] {
  background: transparent;
  transform: translateY(0);
}
.bryn-header[data-scroll="shown"] {
  background: var(--bryn-card);
  transform: translateY(0);
}
.bryn-header[data-scroll="hidden"] {
  background: var(--bryn-card);
  transform: translateY(-100%);
}
/* Med drawer åpen skal headeren alltid være synlig og uten card-bakgrunn
 * (Figma 118:1331 har ingen fyll bak den hvite outline-knappen). */
body.bryn-drawer-open .bryn-header {
  background: transparent;
  transform: translateY(0);
}
/* Plassholder for den fixed headeren. Forsiden legger headeren over hero,
 * slik den gjorde da den var absolutt posisjonert. */
.bryn-header__spacer {
  height: var(--bryn-h-header);
}
/* Enhver side som starter med hero legger headeren over bildet, ikke bare
 * forsiden — spacer'en ville ellers skjøvet heroen 92px ned. */
body:has(.bryn-hero) .bryn-header__spacer,
body:has(.bryn-fag-hero) .bryn-header__spacer,
body:has(.bryn-fa-hero) .bryn-header__spacer,
.home .bryn-header__spacer,
.page-id-824 .bryn-header__spacer {
  display: none;
}
.bryn-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--bryn-max);
  min-width: 0;
  gap: 0;
}
.bryn-header__logo {
  display: block;
  flex-shrink: 0;
  width: 177px;
  height: 44px;
  line-height: 0;
}
.bryn-header__logo img {
  display: block;
  width: 177px;
  height: 44px;
  object-fit: contain;
}
.bryn-header__nav {
  display: flex;
  align-items: center;
  gap: var(--bryn-s-400); /* 16 */
  flex-shrink: 0;
}
.bryn-header__links {
  display: flex;
  align-items: center;
  gap: var(--bryn-s-200); /* 8 */
  transition: opacity var(--bryn-dur) var(--bryn-ease), width var(--bryn-dur) var(--bryn-ease);
}
body.bryn-drawer-open .bryn-header__links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 0;
  overflow: hidden;
  gap: 0;
}

/* —— Ghost button (2:812) — 28px høy: 8px cap-padding oppe/nede + 8px sider —— */
.bryn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--bryn-s-100); /* scale/100 = 4 */
  padding: var(--bryn-s-200); /* Scale/200 = 8 på alle sider */
  height: var(--bryn-h-ghost); /* 28 = 8 + cap(11.63) + 8 */
  box-sizing: border-box;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: var(--bryn-button-font-size);
  line-height: var(--bryn-button-line-height);
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--bryn-dur) var(--bryn-ease),
    background-color var(--bryn-dur) var(--bryn-ease);
}
/* Hover, Mode=Dark (2:819) */
.bryn-ghost:hover,
.bryn-ghost:focus-visible {
  background: var(--bryn-ghost-hover-bg);
  color: var(--bryn-rod-hover); /* Text/BRYN-RØD */
  outline: none;
  text-decoration: none;
}
/* Default, Mode=Light (2:825) */
.bryn-ghost--light {
  color: var(--bryn-white); /* Text/Light */
}
/* Hover, Mode=Light (2:831) */
.bryn-ghost--light:hover,
.bryn-ghost--light:focus-visible {
  background: var(--bryn-ghost-hover-bg);
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
}

/* —— Outline button (2:1186) —— min-h 44, py 12 / px 24 */
.bryn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bryn-s-100);
  min-height: var(--bryn-h-outline);
  height: var(--bryn-h-outline); /* 12 + cap + 12 = 35.6 → min-h 44 gjelder */
  padding: var(--bryn-s-300) var(--bryn-s-600);
  border: 2px solid var(--bryn-blaa);
  background: transparent;
  color: var(--bryn-text);
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: var(--bryn-button-font-size);
  line-height: var(--bryn-button-line-height);
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    background-color var(--bryn-dur) var(--bryn-ease),
    color var(--bryn-dur) var(--bryn-ease),
    border-color var(--bryn-dur) var(--bryn-ease);
}
.bryn-outline:hover,
.bryn-outline:focus-visible {
  background: var(--bryn-blaa);
  border-color: var(--bryn-blaa);
  color: var(--bryn-white);
  outline: none;
  text-decoration: none;
}
.bryn-outline:active {
  background: var(--bryn-blaa);
  border-color: var(--bryn-rod);
  color: var(--bryn-white);
}
body.bryn-drawer-open .bryn-header .bryn-outline {
  border-color: var(--bryn-white);
  color: var(--bryn-white);
  background: transparent;
}
body.bryn-drawer-open .bryn-header .bryn-outline:hover,
body.bryn-drawer-open .bryn-header .bryn-outline:focus-visible {
  background: var(--bryn-white);
  border-color: var(--bryn-white);
  color: var(--bryn-blaa-mork);
}
body.bryn-drawer-open .bryn-header .bryn-outline:active {
  background: var(--bryn-white);
  border-color: var(--bryn-rod);
  color: var(--bryn-blaa-mork);
}

/* —— menu-hamburger (118:791) — exact 44×44 square
 * Default: 3 bars · Hover: morph to left chevron · Clicked: morph to X
 * BG stays --bryn-rod in all states
 */
.bryn-burger {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--bryn-h-burger) !important;
  height: var(--bryn-h-burger) !important;
  min-width: var(--bryn-h-burger) !important;
  max-width: var(--bryn-h-burger) !important;
  min-height: var(--bryn-h-burger) !important;
  max-height: var(--bryn-h-burger) !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  margin: 0;
  /* Tema-/Elementor-border la på 1px → absolutt-posisjonerte streker ble
   * forskjøvet 1px ned/høyre inne i padding-boksen. Må nulles hardt. */
  border: 0 !important;
  border-radius: 0;
  background: var(--bryn-rod) !important;
  cursor: pointer;
  flex: 0 0 var(--bryn-h-burger);
  overflow: hidden;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
}
.bryn-burger__bar {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--bryn-white);
  transform-origin: center;
  transition:
    opacity var(--bryn-dur) var(--bryn-ease),
    transform var(--bryn-dur) var(--bryn-ease),
    top var(--bryn-dur) var(--bryn-ease),
    left var(--bryn-dur) var(--bryn-ease),
    width var(--bryn-dur) var(--bryn-ease);
}
/* Default — Figma 118:790 */
.bryn-burger__bar:nth-child(1) { top: 13px; }
.bryn-burger__bar:nth-child(2) { top: 21px; }
.bryn-burger__bar:nth-child(3) { top: 29px; }

/* Hover — morph til `<` (118:792): 16×2 armer, rotasjon 135° / 45° som i Figma.
 * AVVIK: Figma plasserer armene i 12.728-bokser @ left 13 → pil-senter x = 19.36
 * mot boks-senter 22, altså 2.6px til venstre. Her sentreres pilen (arm-senter
 * 22/17 og 22/27 → pil-bbox sentrert på 22,22). */
.bryn-burger:hover:not([aria-expanded="true"]) .bryn-burger__bar:nth-child(1),
.bryn-burger:focus-visible:not([aria-expanded="true"]) .bryn-burger__bar:nth-child(1) {
  top: 16px;
  left: 14px;
  width: 16px;
  transform: rotate(135deg);
}
.bryn-burger:hover:not([aria-expanded="true"]) .bryn-burger__bar:nth-child(2),
.bryn-burger:focus-visible:not([aria-expanded="true"]) .bryn-burger__bar:nth-child(2) {
  opacity: 0;
}
.bryn-burger:hover:not([aria-expanded="true"]) .bryn-burger__bar:nth-child(3),
.bryn-burger:focus-visible:not([aria-expanded="true"]) .bryn-burger__bar:nth-child(3) {
  top: 26px;
  left: 14px;
  width: 16px;
  transform: rotate(45deg);
}

/* Clicked / open — X (118:805) */
.bryn-burger[aria-expanded="true"] .bryn-burger__bar:nth-child(1) {
  top: 21px;
  left: 10px;
  width: 24px;
  transform: rotate(45deg);
}
.bryn-burger[aria-expanded="true"] .bryn-burger__bar:nth-child(2) {
  opacity: 0;
}
.bryn-burger[aria-expanded="true"] .bryn-burger__bar:nth-child(3) {
  top: 21px;
  left: 10px;
  width: 24px;
  transform: rotate(-45deg);
}

/* —— Drawer (118:1366) ——
 * Innholdet i drawer skal høyrestilles mot sidens 1344px-kolonne.
 * Sidegutteren er 48px så lenge viewporten er ≤ 1440, og vokser deretter.
 * `100%` løses mot .bryn-drawer, som er fixed inset:0 → ICB-bredden
 * (uten rullefelt), i motsetning til 100vw.
 *   ≤1440: gutter 48  → panel 336 + 48 + 48  = 432
 *   1920:  gutter 288 → panel 336 + 48 + 288 = 672, høyrekant flush
 * Innholdsbredden er konstant 336px i begge tilfeller.
 */
.bryn-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  --bryn-gutter: max(var(--bryn-s-1000), calc((100% - var(--bryn-max)) / 2));
}
.bryn-drawer[data-open="true"] { pointer-events: auto; }
.bryn-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bryn-backdrop);
}
.bryn-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--bryn-drawer-content) + var(--bryn-s-1000) + var(--bryn-gutter));
  max-width: 100%;
  height: 100%;
  background: var(--bryn-blaa-lys);
  color: var(--bryn-white);
  padding: var(--bryn-s-1000) var(--bryn-gutter) var(--bryn-s-1000) var(--bryn-s-1000);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: auto;
  /* Instant open/close — no slide */
  transform: none;
  transition: none;
}
.bryn-drawer__primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bryn-s-800); /* 32 */
  padding-top: var(--bryn-s-1200); /* 96 */
  width: 100%;
}

/* NAV item (118:995) — w-full, gap 8 (Nautrals/200 2), radius 2 (Scale/50) */
/* Doblet klasse: når NAV item er en <button> treffer temaets knappestil den med
 * høyere spesifisitet og gir rød bakgrunn, 7px 31px padding, 1px ramme og
 * button-fonten. Alle egenskapene temaet rører må derfor stå her. */
.bryn-nav-item.bryn-nav-item {
  display: flex;
  align-items: center;
  gap: var(--bryn-s-200);
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 0;
  border: 0;
  box-shadow: none;
  color: var(--bryn-white); /* Text/Light */
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 24px; /* h4/font-size */
  line-height: 31.2px; /* h4/line height */
  border-radius: var(--bryn-s-50);
  background: transparent;
  border: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.bryn-nav-item__icon {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  overflow: hidden;
}
.bryn-nav-item__diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  background: var(--bryn-rod);
  transform: rotate(45deg);
  transition:
    transform var(--bryn-dur) var(--bryn-ease),
    width var(--bryn-dur) var(--bryn-ease),
    height var(--bryn-dur) var(--bryn-ease),
    margin var(--bryn-dur) var(--bryn-ease),
    background-color var(--bryn-dur) var(--bryn-ease);
}
.bryn-nav-item__label {
  font: inherit;
  color: inherit;
}
.bryn-nav-item__chevron {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}
.bryn-nav-item.bryn-nav-item:hover,
.bryn-nav-item.bryn-nav-item:focus-visible {
  color: var(--bryn-white); /* Text/Light — lås mot tema-a:hover og knappe-hover */
  background: transparent;
}
.bryn-nav-item:hover .bryn-nav-item__diamond,
.bryn-nav-item:focus-visible .bryn-nav-item__diamond {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--bryn-blaa);
  transform: rotate(-135deg);
}
.bryn-nav-item:focus-visible {
  outline: 2px solid var(--bryn-white);
  outline-offset: 4px;
}
/* —— NAV dropdown (118:1050) ——
 * Lukket = kun NAV item. Åpen = NAV item + 16px (Scale/400) + liste.
 * Ikonet i diamanten bytter fra keyboard_arrow_down til stat_1 (opp-chevron).
 * Figma har ingen motion-node her (get_motion_context = []), så varighet/easing
 * er prosjektverdien --bryn-dur / --bryn-ease.
 */
.bryn-dropdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  /* Gapet ligger her, ikke som padding inne i panelet: padding kan ikke
   * komprimeres til 0 og etterlot 16px synlig i lukket tilstand. */
  row-gap: 0;
  transition: row-gap var(--bryn-dur) var(--bryn-ease);
}
.bryn-dropdown[data-open="true"] {
  row-gap: var(--bryn-s-400); /* Scale/400 = 16, gapet i 118:1051 */
}
.bryn-nav-item__chevron--up {
  opacity: 0;
  transition: opacity var(--bryn-dur) var(--bryn-ease);
}
.bryn-nav-item__chevron--down {
  transition: opacity var(--bryn-dur) var(--bryn-ease);
}
.bryn-dropdown[data-open="true"] .bryn-nav-item__chevron--down { opacity: 0; }
.bryn-dropdown[data-open="true"] .bryn-nav-item__chevron--up { opacity: 1; }

/* 0fr → 1fr gir animert høyde uten å måtte måle innholdet i JS */
.bryn-dropdown__panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  max-width: 344px;
  transition: grid-template-rows var(--bryn-dur) var(--bryn-ease);
}
.bryn-dropdown[data-open="true"] .bryn-dropdown__panel {
  grid-template-rows: 1fr;
}
.bryn-dropdown__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bryn-s-200); /* Scale/200 = 8 */
  min-height: 0;
  overflow: hidden;
}

/* nav content button (223:1633) — 28px høy, py 4 / px 0, gap 4.
 * Hover (223:1635): gap 4 → 16, altså chevronen glir 12px utover. */
.bryn-nav-link {
  display: flex;
  align-items: center;
  column-gap: var(--bryn-s-100); /* scale/100 = 4 */
  padding: var(--bryn-s-100) 0; /* py Scale/100 = 4, px Scale/0 = 0 */
  height: var(--bryn-h-navlink); /* 28 = 4 + ikon 20 + 4 */
  box-sizing: border-box;
  color: var(--bryn-white); /* Text/Light */
  text-decoration: none;
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: var(--bryn-button-font-size);
  line-height: var(--bryn-button-line-height);
  white-space: nowrap;
  transition: column-gap var(--bryn-dur) var(--bryn-ease);
}
.bryn-nav-link:hover,
.bryn-nav-link:focus-visible {
  column-gap: var(--bryn-s-400); /* Scale/400 = 16 */
  color: var(--bryn-white);
  text-decoration: none;
}
.bryn-nav-link:focus-visible {
  outline: 2px solid var(--bryn-white);
  outline-offset: 2px;
}
.bryn-nav-link__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bryn-drawer__secondary {
  display: flex;
  align-items: flex-start;
  gap: var(--bryn-s-600);
  max-width: 344px;
  width: 100%;
}
.bryn-drawer__col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bryn-s-100); /* 4 */
}

/* —— HERO button Light, rightIcon=false (2:1209) — 36px høy: 8 + ikon 20 + 8
 * Hover: diamanten roterer 180° og skaleres 12px → 8px.
 * Teksten beholder fargen sin og får 75% opacity.
 */
.bryn-hero-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bryn-s-200); /* Nautrals/200 2 = 8 */
  padding: var(--bryn-s-200); /* Scale/200 = 8 */
  height: var(--bryn-h-hero); /* 36 */
  box-sizing: border-box;
  color: var(--bryn-white); /* Text/Light */
  text-decoration: none;
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: var(--bryn-button-font-size);
  line-height: var(--bryn-button-line-height);
  white-space: nowrap;
}
.bryn-hero-link__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bryn-hero-link__diamond {
  width: 12px;
  height: 12px;
  background: var(--bryn-rod); /* Surface/Brand/Rød */
  transform: rotate(45deg);
  transform-origin: center;
  flex-shrink: 0;
  transition: transform var(--bryn-dur) var(--bryn-ease);
}
/* 45° + 180° = 225°, skala 8/12 = 0.6667 */
.bryn-hero-link:hover .bryn-hero-link__diamond,
.bryn-hero-link:focus-visible .bryn-hero-link__diamond {
  transform: rotate(225deg) scale(0.666667);
}
.bryn-hero-link__label {
  color: inherit;
  transition: opacity var(--bryn-dur) var(--bryn-ease);
}
/* I drawer er HERO-knappen w-full og labelen flex-1 uten nowrap (172:1774),
 * ellers sprenger «Service og vedlikehold» 336px-kolonnen og gir sidescroll. */
.bryn-drawer .bryn-hero-link {
  width: 100%;
  height: auto;
  min-height: var(--bryn-h-hero);
  white-space: normal;
}
.bryn-drawer .bryn-hero-link__label {
  flex: 1 0 0;
  min-width: 0;
  white-space: normal;
}
/* Samme farge, kun opacity. Tema/Elementor satte a:hover til #333366 — må låses. */
.bryn-hero-link:hover,
.bryn-hero-link:focus-visible {
  color: var(--bryn-white); /* Text/Light */
}
.bryn-hero-link:hover .bryn-hero-link__label,
.bryn-hero-link:focus-visible .bryn-hero-link__label {
  color: inherit;
  opacity: 0.75;
}
.bryn-hero-link:focus-visible {
  outline: 2px solid var(--bryn-white);
  outline-offset: 2px;
}

/* Scroll-lås. Må ligge på <html>, som eier scrollingen når html har
 * overflow-x: hidden — overflow på <body> alene låser ingenting. */
html.bryn-drawer-open {
  overflow-y: hidden;
}

/* —— Footer (360:3665) —— */
.bryn-footer {
  background: var(--bryn-blaa-lys);
  color: var(--bryn-white);
  padding: var(--bryn-s-1000); /* 48 */
  box-sizing: border-box;
}
.bryn-footer__inner {
  max-width: var(--bryn-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}
/* Brand + cols share 292px so Personvern/Cookies baseline = Jobb hos oss */
.bryn-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: var(--bryn-footer-brand-h); /* 292 */
  width: 623px;
  max-width: 100%;
  gap: 0;
}
.bryn-footer__logo {
  display: block;
  width: 102px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
}
.bryn-footer address {
  font-style: normal;
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 19.6px;
  color: var(--bryn-white);
  margin: 57.5px 0 0; /* Figma: logo bottom → address */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-footer__legal {
  display: flex;
  align-items: flex-start;
  gap: 12px; /* Frame 487 */
  width: 100%;
  margin-top: auto; /* pin to bottom → align with Jobb hos oss */
}
.bryn-footer__cols {
  display: flex;
  align-items: stretch;
  gap: var(--bryn-s-600); /* 24 */
  align-self: stretch;
  min-height: var(--bryn-footer-brand-h);
}
.bryn-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: var(--bryn-footer-brand-h);
}
.bryn-footer__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bryn-s-200); /* 8 */
}
.bryn-footer__group--ghost {
  gap: 12px;
  margin-top: auto; /* pin to bottom with Personvern/Cookies */
}

/* —— Primary button (2:651) —— min-h 44, py 12 / px 24, 2px kant i samme farge
 * Default 2:652 blå · Hover 2:664 Blå Lys · Pressed 2:656 rød kant · Disable 2:660
 * Doblet klasse: Elementor/temaet styrer a-farge, padding og text-decoration.
 */
.bryn-primary.bryn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bryn-s-100); /* scale/100 = 4 */
  min-height: var(--bryn-h-outline); /* 44 */
  padding: var(--bryn-s-300) var(--bryn-s-600); /* 12 / 24 */
  border: var(--bryn-s-50) solid var(--bryn-blaa); /* 2px */
  border-radius: 0;
  background: var(--bryn-blaa); /* Surface/Brand/Blå */
  color: var(--bryn-white); /* Text/Light */
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: var(--bryn-button-font-size);
  line-height: var(--bryn-button-line-height);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: none;
  transition:
    background-color var(--bryn-dur) var(--bryn-ease),
    border-color var(--bryn-dur) var(--bryn-ease),
    color var(--bryn-dur) var(--bryn-ease);
}
.bryn-primary.bryn-primary:hover,
.bryn-primary.bryn-primary:focus-visible {
  background: var(--bryn-blaa-lys); /* Surface/Brand/Blå Lys */
  border-color: var(--bryn-blaa-lys);
  color: var(--bryn-white);
  text-decoration: none;
}
.bryn-primary.bryn-primary:focus-visible {
  outline: 2px solid var(--bryn-blaa-mork);
  outline-offset: 2px;
}
.bryn-primary.bryn-primary:active {
  background: var(--bryn-blaa);
  border-color: var(--bryn-rod); /* Surface/Brand/Rød */
}
.bryn-primary.bryn-primary[hidden] {
  display: none !important;
}
.bryn-primary.bryn-primary[aria-disabled="true"] {
  background: var(--bryn-disable-bg); /* Surface/Light/Disable */
  border-color: var(--bryn-disable-bg);
  color: var(--bryn-disable); /* Text/Disable */
  pointer-events: none;
}

/* —— Forside: Hero (9:166) ——
 * Bildet ligger som <img> med z-index -1 i stedet for background-image, slik at
 * WP kan levere srcset og nettleseren kan prioritere det som LCP-element.
 */
.bryn-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  min-height: var(--bryn-hero-h); /* 80vh — bestilt */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--bryn-s-1000); /* Scale/1000 = 48 */
}
.bryn-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none; /* Elementor setter img { max-width: 100% } */
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.bryn-hero__inner {
  width: 100%;
  max-width: var(--bryn-max); /* 1344 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 9:167 — innholdet mot høyre */
}
.bryn-hero__content {
  width: var(--bryn-hero-col); /* 660 */
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-1100); /* Scale/1100 = 64 */
  padding: var(--bryn-s-1000) var(--bryn-s-1000) var(--bryn-s-600); /* 48 48 24 */
}
.bryn-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-800); /* Scale/800 = 32 */
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
}
/* Figma trimmer tekstboksen til cap/alphabetic. Uten trim blir 32px-gapet
 * visuelt større, fordi line-boksens leading legger seg på toppen. */
.bryn-hero__title,
.bryn-hero__lead,
.bryn-hero__services-label,
.bryn-content__title,
.bryn-card__title,
.bryn-card__body {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-hero__title {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 44px; /* h2/font-size */
  line-height: 1.2; /* 52.8 / 44 */
  letter-spacing: 0;
  color: inherit;
}
.bryn-hero__lead {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 18px; /* sub2/font-size */
  line-height: 1.4; /* 25.2 / 18 */
  color: inherit;
}
.bryn-hero__services {
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-300); /* scale/300 = 12 */
}
.bryn-hero__services-label {
  margin: 0;
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: 14px; /* caption/font-size */
  line-height: 1.4; /* 19.6 / 14 */
  color: var(--bryn-text); /* Text/Dark */
}
.bryn-hero__cta {
  display: flex;
  align-items: flex-start;
  gap: var(--bryn-s-400); /* Scale/400 = 16 */
  flex-wrap: wrap; /* Figma har nowrap; wrap hindrer overflyt på smale skjermer */
}

/* —— Forside: Content Section (9:176) —— */
.bryn-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-1200); /* Scale/1200 = 96 */
  padding: var(--bryn-s-1300) var(--bryn-s-1000); /* 128 / 48 */
}
.bryn-content__wrapper {
  width: 100%;
  max-width: var(--bryn-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-1000); /* Scale/1000 = 48 */
}
.bryn-content__row {
  display: flex;
  align-items: flex-start;
  gap: var(--bryn-s-600); /* 24 */
}
.bryn-content__col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bryn-content__col--text {
  max-width: var(--bryn-hero-col); /* 660 */
  align-items: center;
  justify-content: center;
  padding-right: var(--bryn-s-600); /* 24 */
  padding-bottom: var(--bryn-s-200); /* 8 */
}
.bryn-content__title {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 32px; /* h3/font-size */
  line-height: 1.3; /* 41.6 / 32 */
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
}
.bryn-content__body {
  width: 100%;
}
.bryn-content__body p {
  margin: 0;
  font-family: var(--bryn-font-body);
  font-weight: 400;
  font-size: 18px; /* p1/font-size */
  line-height: 1.4; /* 25.2 / 18 */
  color: var(--bryn-text); /* Text/Dark */
}
.bryn-content__body p + p {
  margin-top: var(--bryn-s-300); /* p1/paragraph spacing = 12 */
}

/* —— fagområder-card (266:2977) ——
 * Default 266:2976 · Hover 266:2978 (Variant2)
 *
 * Stripen er full korthøyde og skjøvet ned med translateY, ikke animert
 * height: 92px → 100%. height kan ikke interpoleres mellom px og %, og
 * transform flytter dessuten tittelen på GPU uten reflow.
 *
 * Figma har ingen motion-node for kortet (get_motion_context = null), så
 * varighet/easing er prosjektverdi (--bryn-dur / --bryn-ease), ikke lest fra design.
 */
.bryn-content__cards {
  display: flex;
  align-items: flex-start;
  gap: var(--bryn-s-600); /* 24 — 4×318 + 3×24 = 1344 */
  width: 100%;
  max-width: var(--bryn-max);
}
.bryn-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: var(--bryn-card-ratio); /* 318 / 424 */
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}
.bryn-card__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.bryn-card__panel {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--bryn-s-600); /* 24 */
  background: var(--bryn-blaa); /* Surface/Brand/Blå */
  transform: translateY(calc(100% - var(--bryn-card-bar))); /* viser øverste 92px */
  transition:
    transform var(--bryn-dur) var(--bryn-ease),
    background-color var(--bryn-dur) var(--bryn-ease);
}
.bryn-card:hover .bryn-card__panel,
.bryn-card:focus-visible .bryn-card__panel {
  transform: translateY(0);
  background: var(--bryn-blaa-mork); /* Surface/Brand/Blå Mørk */
}
.bryn-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-600); /* 24 */
  width: 100%;
}
.bryn-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.bryn-card__title {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 24px; /* h4/font-size */
  line-height: 1.3; /* 31.2 / 24 */
  color: var(--bryn-white); /* Text/Light */
}
/* HERO-knapp uten tekst: 20×20 ikonboks + 8px padding = 36×36 (2:1210) */
.bryn-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: var(--bryn-s-200); /* 8 */
  box-sizing: content-box;
  flex-shrink: 0;
}
.bryn-card__diamond {
  width: 12px;
  height: 12px;
  background: var(--bryn-rod); /* Surface/Brand/Rød */
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--bryn-dur) var(--bryn-ease);
}
/* 45° + 180° = 225°, skala 8/12 = 0.6667 — samme som HERO-knappen i headeren */
.bryn-card:hover .bryn-card__diamond,
.bryn-card:focus-visible .bryn-card__diamond {
  transform: rotate(225deg) scale(0.666667);
}
.bryn-card__body,
.bryn-card__foot {
  opacity: 0;
  transition: opacity var(--bryn-dur) var(--bryn-ease);
}
.bryn-card:hover .bryn-card__body,
.bryn-card:hover .bryn-card__foot,
.bryn-card:focus-visible .bryn-card__body,
.bryn-card:focus-visible .bryn-card__foot {
  opacity: 1;
}
.bryn-card__body {
  margin: 0;
  width: 100%; /* 270 inne i 24px padding — I448:6018;266:2984 */
  font-family: var(--bryn-font-body);
  font-weight: 400;
  font-size: 18px; /* p1/font-size */
  line-height: 1.4; /* 25.2 / 18 */
  color: var(--bryn-white); /* Text/Light */
}
.bryn-card__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}
/* Outline button Type=Light (2:1186 / I448:6018;266:2986).
 * Default 53:211: hvit kant, hvit tekst, gjennomsiktig.
 * Hover 53:217: Surface/Light/Light fyll + Text/BRYN-BLÅ.
 * Pressed 53:213: samme fyll, kant Surface/Brand/Rød.
 * <span>, ikke knapp — hele kortet er lenken. Hover treffer bare
 * når pekeren er over CTA-en, ikke når kortet alene er hovered. */
.bryn-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bryn-s-100);
  min-height: var(--bryn-h-outline); /* 44 */
  height: var(--bryn-h-outline); /* trim virker ikke på flex — eksplisitt 44 som .bryn-outline */
  padding: var(--bryn-s-300) var(--bryn-s-600); /* 12 / 24 */
  border: var(--bryn-s-50) solid var(--bryn-white); /* Surface/Light/Light */
  background: transparent;
  color: var(--bryn-white); /* Text/Light */
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: var(--bryn-button-font-size);
  line-height: var(--bryn-button-line-height);
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    background-color var(--bryn-dur) var(--bryn-ease),
    color var(--bryn-dur) var(--bryn-ease),
    border-color var(--bryn-dur) var(--bryn-ease);
}
.bryn-card__cta:hover {
  background: var(--bryn-white); /* Surface/Light/Light */
  border-color: var(--bryn-white);
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
}
.bryn-card:active .bryn-card__cta:hover {
  background: var(--bryn-white);
  border-color: var(--bryn-rod); /* Surface/Brand/Rød */
  color: var(--bryn-blaa-mork);
}
.bryn-card:focus-visible {
  outline: 2px solid var(--bryn-blaa-mork);
  outline-offset: 2px;
}

/* Gamle Elementor-seksjoner på forsiden (page 824) som er erstattet av
 * [bryn_hero] + [bryn_forside_fagomrader]. Beholdes i DB for rollback.
 * a3a6bb8 / ace315a / 9ce5c23 = gamle hero/intro (9ce5c23 er widescreen-skjult variant).
 * ceb613a = overskrift «Våre fag og tjenester»
 * 3f38678 = olivenkort Ventilasjon/Kjøling/Byggautomasjon/Renluft
 * 2f76947 = «Vi har kontorer fra Troms…» + KONTAKT OSS + bildecollage
 * c00e60a = gamle Nyheter — skjult etter at .bryn-news er i DOM (curl 2026-09-18) */
.home .elementor-element-a3a6bb8,
.page-id-824 .elementor-element-a3a6bb8,
.home .elementor-element-ace315a,
.page-id-824 .elementor-element-ace315a,
.home .elementor-element-9ce5c23,
.page-id-824 .elementor-element-9ce5c23,
.home .elementor-element-ceb613a,
.page-id-824 .elementor-element-ceb613a,
.home .elementor-element-3f38678,
.page-id-824 .elementor-element-3f38678,
.home .elementor-element-2f76947,
.page-id-824 .elementor-element-2f76947,
.home .elementor-element-c00e60a,
.page-id-824 .elementor-element-c00e60a {
  display: none !important;
}

/* —— Forside: Banner (266:3437) ——
 * Seksjon 1440×633, padding Scale/1300 / Scale/1000, justify-end.
 * Innhold 266:3438 max 1344, items-end. Boks 266:3439 = 660, Surface/Brand/Blå.
 * get_motion_context = [] — ingen motion-node for seksjonen.
 */
.bryn-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: var(--bryn-s-1300) var(--bryn-s-1000); /* 128 / 48 */
}
.bryn-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none; /* Elementor setter img { max-width: 100% } */
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.bryn-banner__inner {
  width: 100%;
  max-width: var(--bryn-max); /* 1344 — 266:3438 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 266:3438 — innholdet mot høyre */
}
.bryn-banner__content {
  width: var(--bryn-hero-col); /* 660 — 266:3439 */
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bryn-s-1000); /* Scale/1000 = 48 */
  padding: var(--bryn-s-1000) var(--bryn-s-1000) var(--bryn-s-600); /* 48 48 24 */
  background: var(--bryn-blaa); /* Surface/Brand/Blå */
}
.bryn-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-1000); /* Scale/1000 = 48 — 266:3440 */
  width: 100%;
  color: var(--bryn-white); /* Text/Light */
}
.bryn-banner__title.bryn-banner__title {
  margin: 0;
  width: 100%;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 44px; /* h2/font-size */
  line-height: 1.2; /* 52.8 / 44 */
  letter-spacing: 0;
  color: var(--bryn-white); /* Text/Light — doblet klasse slår .elementor-kit-4 h2 */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-banner__lead {
  margin: 0;
  width: 100%;
  font-family: var(--bryn-font-body);
  font-weight: 400;
  font-size: 18px; /* p1/font-size */
  line-height: 1.4; /* 25.2 / 18 */
  color: inherit;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-banner__cta {
  display: flex;
  align-items: flex-start;
  gap: var(--bryn-s-400); /* Scale/400 = 16 — 266:3443 */
  width: 100%;
  flex-wrap: wrap; /* Figma har nowrap; wrap hindrer overflyt på smale skjermer */
}
/* HERO-knapp-instans 266:3444 / 266:3445: pl 8, pr 16, py 8, radius Scale/100.
 * Delt .bryn-hero-link har 8 rundt — overstyres kun inne i banneren. */
.bryn-banner .bryn-hero-link {
  padding: var(--bryn-s-200) var(--bryn-s-400) var(--bryn-s-200) var(--bryn-s-200);
  border-radius: var(--bryn-s-100); /* Scale/100 = 4 */
}
.bryn-banner--gronn .bryn-banner__content {
  background: var(--bryn-gronn); /* Surface/Brand/Grønn — 266:4017 */
}

/* —— Forside: Info/FAQ (172:1677) ——
 * Seksjon 1440×1260, padding 96/48/64, gap 96 mellom Info Content og FAQ.
 * Diamantposisjoner er Figma-metadata 172:1691–1694 (px / 1344 og 731).
 * Accordion 101:1990: Default Closed #f5f5f5, Hover Closed/Open #d9d9d9,
 * Clicked Open pb 24 + gap 24 + slot pr 48.
 * get_motion_context på 101:1990 = [] — --bryn-dur / --bryn-ease.
 */
.bryn-info {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bryn-s-1200); /* Scale/1200 = 96 */
  padding: var(--bryn-s-1200) var(--bryn-s-1000) var(--bryn-s-1100); /* 96 48 64 */
  overflow-x: hidden; /* Image 3 stikker 191px forbi 1440 */
}
.bryn-info__media {
  display: none; /* midlertidig — Tinius 2026-09-18, collage 172:1691 */
  position: relative;
  width: 100%;
  max-width: var(--bryn-max); /* 1344 — 172:1691 */
  aspect-ratio: 1344 / 731;
  flex-shrink: 0;
}
.bryn-info__diamond {
  position: absolute;
  line-height: 0;
}
.bryn-info__diamond-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}
/* 172:1692 — bounding box 709.255, left 874.373, top 0 */
.bryn-info__diamond--3 {
  left: 65.056%;
  top: 0;
  width: 52.772%;
  aspect-ratio: 1;
  z-index: 1;
}
/* 172:1693 — bounding box 487.084, left 357.542, top 244.285 */
.bryn-info__diamond--2 {
  left: 26.603%;
  top: 33.418%;
  width: 36.242%;
  aspect-ratio: 1;
  z-index: 2;
}
/* 172:1694 — bounding box 221.885, left 493.815, top 108.012 */
.bryn-info__diamond--1 {
  left: 36.743%;
  top: 14.776%;
  width: 16.509%;
  aspect-ratio: 1;
  z-index: 3;
}
/* Overlay 172:1695: 616×135, sentrert, gap 14 (rå px i Figma), py 32 / px 24 */
.bryn-info__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px; /* Figma rå 14px — ingen scale-token */
  width: 616px;
  max-width: 100%;
  padding: var(--bryn-s-800) var(--bryn-s-600); /* 32 / 24 */
  background: var(--bryn-card); /* Surface/Light/Card */
}
.bryn-info__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-600); /* 24 — I172:1695;24:352 */
  flex: 1 0 0;
  min-width: 0;
}
.bryn-info__card-title,
.bryn-info__card-body,
.bryn-info__faq-title,
.bryn-accordion__title,
.bryn-accordion__body p {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-info__card-title {
  margin: 0;
  width: 100%;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 18px; /* sub2/font-size */
  line-height: 1.4; /* 25.2 / 18 */
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
}
.bryn-info__card-body {
  margin: 0;
  width: 100%;
  font-family: var(--bryn-font-body);
  font-weight: 400;
  font-size: 16px; /* p2/font-size */
  line-height: 1.4; /* 22.4 / 16 */
  color: var(--bryn-text); /* Text/Dark */
}
/* 44×44 boks, 28px diamant rotert 45° (I172:1695;2:1050) */
.bryn-info__card-icon {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
}
.bryn-info__card-diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  background: var(--bryn-blaa); /* Surface/Brand/Blå */
  transform: rotate(45deg);
}

.bryn-info__faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bryn-s-600); /* 24 — 266:4313 */
  width: 100%;
  max-width: 660px;
}
h2.bryn-info__faq-title.bryn-info__faq-title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 24px; /* h4/font-size — 266:4314, ikke tema-h2 36px */
  line-height: 1.3; /* 31.2 / 24 */
  letter-spacing: 0;
  text-transform: none;
  color: var(--bryn-text); /* Text/Dark */
  scroll-margin-top: 40px;
}
.bryn-info__faq-items {
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-200); /* Scale/200 = 8 — 266:4315 */
  width: 100%;
  max-width: 660px;
}

/* Accordion 101:1990
 * Default Closed 101:1989: bg Card, py 16, pl 24, pr 12, 52px
 * Hover Closed 162:1458: bg Hover #d9d9d9
 * Clicked Open 101:1991: pt 16 pb 24, gap 24, slot pr 48
 * Hover Open 162:1476: samme som Open + Hover-fyll
 * Figma stroke 2px inside, samme farge som fyll — inset box-shadow så 52px holder.
 */
.bryn-accordion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0; /* pb 16 sitter på trigger i lukket tilstand, ellers blir 52+16 */
  background: var(--bryn-card);
  box-shadow: inset 0 0 0 var(--bryn-s-50) var(--bryn-card);
  row-gap: 0;
  transition:
    background-color var(--bryn-dur) var(--bryn-ease),
    box-shadow var(--bryn-dur) var(--bryn-ease),
    row-gap var(--bryn-dur) var(--bryn-ease),
    padding-bottom var(--bryn-dur) var(--bryn-ease);
}
.bryn-accordion[data-open="true"] {
  row-gap: var(--bryn-s-600); /* 24 mellom header-rad og slot */
  padding-bottom: var(--bryn-s-600); /* 24 — Clicked Open */
}
.bryn-accordion:hover,
.bryn-accordion:has(.bryn-accordion__trigger:focus-visible) {
  background: var(--bryn-hover); /* Surface/Light/Hover */
  box-shadow: inset 0 0 0 var(--bryn-s-50) var(--bryn-hover);
  outline: none;
}
/* Doblet klasse: temaets knappestil (rød bg, 7px 31px padding) må overstyres. */
.bryn-accordion__trigger.bryn-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bryn-s-600);
  width: 100%;
  min-height: 20px;
  margin: 0;
  padding: var(--bryn-s-400) var(--bryn-s-300) 0 var(--bryn-s-600); /* 16 12 0 24 */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--bryn-text);
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 18px; /* sub2/font-size */
  line-height: 1.4; /* 25.2 / 18 */
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  white-space: normal; /* Hello/Elementor button { white-space: nowrap } klipper 1.4.10 */
  height: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none; /* Hello/Elementor button-hover er rød — ikke Figma */
}
.bryn-accordion__trigger.bryn-accordion__trigger:hover,
.bryn-accordion__trigger.bryn-accordion__trigger:focus {
  background: transparent;
  color: var(--bryn-text);
  box-shadow: none;
  white-space: normal;
  border: 0;
  outline: none;
}
button.bryn-accordion__trigger.bryn-accordion__trigger:focus:not(:focus-visible) {
  outline: none;
}
button.bryn-accordion__trigger.bryn-accordion__trigger:focus-visible,
.elementor-kit-4 button.bryn-accordion__trigger.bryn-accordion__trigger:focus-visible {
  outline: 2px solid var(--bryn-blaa-mork) !important;
  outline-offset: 2px;
}
.elementor-kit-4 .bryn-accordion__trigger.bryn-accordion__trigger:hover,
.elementor-kit-4 .bryn-accordion__trigger.bryn-accordion__trigger:focus {
  outline: none;
  border: 0;
}
.bryn-accordion[data-open="false"] .bryn-accordion__trigger.bryn-accordion__trigger,
.bryn-accordion:not([data-open="true"]) .bryn-accordion__trigger.bryn-accordion__trigger {
  padding-bottom: var(--bryn-s-400); /* 16 — Default Closed py */
}
.bryn-accordion__title {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: inherit;
  white-space: normal;
  overflow-wrap: break-word;
}
.bryn-accordion__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.bryn-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows var(--bryn-dur) var(--bryn-ease);
}
.bryn-accordion[data-open="true"] .bryn-accordion__panel {
  grid-template-rows: 1fr;
}
.bryn-accordion__body {
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--bryn-s-300) 0 var(--bryn-s-600); /* pl 24 pr 12 */
}
.bryn-accordion__body p {
  margin: 0;
  padding-right: var(--bryn-s-1000); /* slot pr 48 — 101:1995 */
  font-family: var(--bryn-font-body);
  font-weight: 400;
  font-size: 16px; /* p2/font-size */
  line-height: 1.4; /* 22.4 / 16 */
  color: var(--bryn-text); /* Text/Dark — 101:1996. Instans 454:6170 sa svart; token er Dark */
}

/* —— Forside: News Section (9:193) ——
 * Seksjon gap 24 (Scale/600). Tittelrad 9:194 px 48, h3 32/41.6 Text/BRYN-BLÅ.
 * News Content 9:196: Surface/Brand/BRYN GRÅ, padding 48/48/24.
 * Grid 345:2350: max 1344, gap 24, tre nyheter-card flex 1.
 * Kort 345:2314 Default / 345:2316 Hover. Kun tittel (ingen body).
 * Frame14 Hover: diamant 28→22px, rotate 45° → −135°, opacity 0→1.
 * Overlay 20 % Blå Mørk. Grid stretch så kortene får lik høyde.
 * get_motion_context på 9:193 og 345:2315 = [] — --bryn-dur / --bryn-ease.
 */
.bryn-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bryn-s-600); /* Scale/600 = 24 */
  width: 100%;
  box-sizing: border-box;
}
.bryn-news__title-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: calc(var(--bryn-max) + 2 * var(--bryn-s-1000)); /* 1440 */
  padding: 0 var(--bryn-s-1000); /* Scale/1000 = 48 */
  box-sizing: border-box;
}
.bryn-news__title.bryn-news__title {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 32px; /* h3/font-size */
  line-height: 1.3; /* 41.6 / 32 */
  letter-spacing: 0;
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ — doblet klasse slår .elementor-kit-4 h3 */
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-news__content {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--bryn-s-1000) var(--bryn-s-1000) var(--bryn-s-600); /* 48 48 24 */
  background: var(--bryn-gra); /* Surface/Brand/BRYN GRÅ */
  box-sizing: border-box;
}
.bryn-news__grid {
  display: flex;
  align-items: stretch; /* lik korthøyde ved ulike tittel-lengder */
  gap: var(--bryn-s-600); /* Scale/600 = 24 */
  width: 100%;
  max-width: var(--bryn-max); /* 1344 */
}
.bryn-news-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  min-width: 0;
  gap: var(--bryn-s-600); /* Scale/600 = 24 */
  padding: var(--bryn-s-200) var(--bryn-s-200) var(--bryn-s-600); /* 8 8 24 */
  box-sizing: border-box;
  text-decoration: none;
  color: var(--bryn-text); /* Text/Dark */
  background: transparent;
  overflow: hidden;
  transition:
    background-color var(--bryn-dur) var(--bryn-ease),
    color var(--bryn-dur) var(--bryn-ease);
}
.bryn-news-card:hover,
.bryn-news-card:focus-visible {
  background: var(--bryn-blaa-lys); /* Surface/Brand/Blå Lys */
  color: var(--bryn-white); /* Text/Light */
  text-decoration: none;
}
.bryn-news-card:focus-visible {
  outline: 2px solid var(--bryn-blaa-mork);
  outline-offset: 2px;
}
.bryn-news-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 224/224 */
  overflow: hidden;
  flex-shrink: 0;
}
.bryn-news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none; /* Elementor setter img { max-width: 100% } */
  object-fit: cover;
  pointer-events: none;
  /* Fotoet er 100 %. Figma 345:2313 opacity 0.2 er tomt Images-lag, ikke bildet. */
}
.bryn-news-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--bryn-blaa-mork); /* Surface/Brand/Blå Mørk */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bryn-dur) var(--bryn-ease);
}
.bryn-news-card:hover .bryn-news-card__overlay,
.bryn-news-card:focus-visible .bryn-news-card__overlay {
  opacity: 0.2;
}
.bryn-news-card__row {
  display: flex;
  align-items: flex-start; /* tittel topp-venstre */
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  flex: 0 0 auto;
  padding-right: 44px; /* plass til pil nederst til høyre */
  box-sizing: border-box;
  min-height: 44px;
}
.bryn-news-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1 0 0;
  min-width: 0;
  gap: var(--bryn-s-400); /* Scale/400 = 16 */
  padding: 0 var(--bryn-s-200); /* Scale/200 = 8 */
  overflow-wrap: break-word;
}
.bryn-news-card__headline {
  margin: 0;
  width: 100%;
  color: inherit;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  transition: color var(--bryn-dur) var(--bryn-ease);
}
.bryn-news-card__headline.bryn-news-card__headline {
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 18px; /* sub2/font-size — 345:2302; doblet klasse slår .elementor-kit-4 h4 */
  line-height: 1.4; /* 25.2 / 18 */
  letter-spacing: 0;
}
.bryn-news-card:hover .bryn-news-card__headline,
.bryn-news-card:focus-visible .bryn-news-card__headline {
  color: var(--bryn-white); /* Text/Light */
}
.bryn-news-card__icon {
  position: absolute;
  right: var(--bryn-s-200); /* 8 — card px */
  bottom: var(--bryn-s-600); /* 24 — card pb */
  width: 44px;
  height: 44px;
  overflow: hidden;
}
.bryn-news-card__diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px; /* Frame14 Default 2:1041 */
  height: 28px;
  background: var(--bryn-white); /* Surface/Light/Light */
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--bryn-dur) var(--bryn-ease),
    opacity var(--bryn-dur) var(--bryn-ease);
}
/* Frame14 Hover 2:1044: 22px, rotate −135°. 22/28 = 0.785714. */
.bryn-news-card:hover .bryn-news-card__diamond,
.bryn-news-card:focus-visible .bryn-news-card__diamond {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-135deg) scale(0.785714);
}
.bryn-news-card__arrow {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
  display: block;
  z-index: 1;
}

/* Complianz «Administrer samtykke» → bottom-right */
.cmplz-manage-consent,
button.cmplz-manage-consent,
#cmplz-manage-consent,
.cmplz-btn.cmplz-manage-consent,
div.cmplz-manage-consent {
  left: auto !important;
  right: 16px !important;
  bottom: 16px !important;
}

/* Figma har ingen frames under 1440px for forside-seksjonene. Brekkpunktene
 * under er prosjektvalg, ikke lest fra design. */
@media (max-width: 1100px) {
  .bryn-content__cards { flex-wrap: wrap; }
  .bryn-content__cards .bryn-card { flex: 1 1 calc(50% - var(--bryn-s-600) / 2); }
  .bryn-news__grid { flex-wrap: wrap; }
  .bryn-news-card { flex: 1 1 calc(50% - var(--bryn-s-600) / 2); }
}

@media (max-width: 900px) {
  .bryn-header { padding: 16px 20px; }
  .bryn-header__links { display: none; }
  .bryn-header__spacer { height: 76px; }
  .bryn-drawer__panel {
    width: min(var(--bryn-drawer-w), 100%);
    padding: var(--bryn-s-1000);
  }
  .bryn-footer__inner { flex-direction: column; gap: var(--bryn-s-800); }
  .bryn-footer__brand {
    width: 100%;
    min-height: 292px;
  }
  .bryn-footer__col { min-height: 0; }
  .bryn-footer__group--ghost { margin-top: var(--bryn-s-800); }
  .bryn-drawer__secondary { max-width: none; flex-direction: column; }
  .bryn-hero { padding: var(--bryn-s-600); }
  .bryn-hero__content {
    width: 100%;
    padding: 0;
    gap: var(--bryn-s-800);
  }
  .bryn-hero__title { font-size: 32px; }
  .bryn-content { padding: var(--bryn-s-1100) var(--bryn-s-600); }
  .bryn-content__row { flex-direction: column; gap: var(--bryn-s-800); }
  .bryn-content__col--text {
    max-width: none;
    align-items: flex-start;
    padding-right: 0;
  }
  .bryn-banner { padding: var(--bryn-s-1100) var(--bryn-s-600); }
  .bryn-banner__content { width: 100%; }
  .bryn-banner__title { font-size: 32px; }
  .bryn-info { padding: var(--bryn-s-1100) var(--bryn-s-600) var(--bryn-s-1000); }
  .bryn-info__card { width: calc(100% - 32px); }
  .bryn-info__faq-title { font-size: 20px; }
  .bryn-news__title-row { padding: 0 var(--bryn-s-600); }
  .bryn-news__content { padding: var(--bryn-s-1000) var(--bryn-s-600) var(--bryn-s-600); }
  .bryn-news__title.bryn-news__title { font-size: 24px; }
}

@media (max-width: 600px) {
  .bryn-content__cards .bryn-card { flex: 1 1 100%; }
  .bryn-news-card { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bryn-ghost,
  .bryn-outline,
  .bryn-primary.bryn-primary,
  .bryn-card__panel,
  .bryn-card__diamond,
  .bryn-card__body,
  .bryn-card__foot,
  .bryn-card__cta,
  .bryn-nav-item__diamond,
  .bryn-hero-link__label,
  .bryn-hero-link__diamond,
  .bryn-burger__bar,
  .bryn-header__links,
  .bryn-header,
  .bryn-dropdown__panel,
  .bryn-nav-link,
  .bryn-nav-item__chevron--up,
  .bryn-nav-item__chevron--down,
  .bryn-accordion,
  .bryn-accordion__panel,
  .bryn-news-card,
  .bryn-news-card__overlay,
  .bryn-news-card__headline,
  .bryn-news-card__diamond {
    transition: none !important;
  }
}

/* —— /fagomrader innhold (223:3674 / 266:3948) ——
 * Wrapper er resten av Content Section 223:3020 uten hero (eget shortcode)
 * og uten FAQ/nyheter (eksisterende shortcodes).
 * get_motion_context på 223:3674 og 266:3948 = [] — --bryn-dur / --bryn-ease.
 */
.bryn-fag {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bryn-s-1200); /* Scale/1200 = 96 — 223:3020 */
  /* pt 96 = gap etter hero 223:3021. Seksjonens pt 128 eies av hero.
   * pb 0: [bryn_info_faq] har allerede pt 96 + pb 64. */
  padding: var(--bryn-s-1200) var(--bryn-s-1000) 0; /* 96 / 48 / 0 */
}
.bryn-fag > * {
  width: 100%;
  max-width: var(--bryn-max); /* 1344 */
}
h3.bryn-content__title.bryn-content__title {
  /* Doblet mot .elementor-kit-4 h3. Verdier = eksisterende .bryn-content__title. */
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 32px; /* h3/font-size */
  line-height: 1.3; /* 41.6 / 32 */
  letter-spacing: 0;
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
}
.bryn-fag .bryn-content__title {
  max-width: 546px; /* 223:3676 */
}

.bryn-cta-row {
  display: flex;
  align-items: flex-start;
  gap: var(--bryn-s-600); /* 24 — 266:3948 */
  width: 100%;
  max-width: var(--bryn-max);
}
.bryn-cta-card {
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  min-height: 196px; /* 266:3929 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bryn-s-800); /* 32 mellom tittel og HERO */
  padding: var(--bryn-s-1000) var(--bryn-s-1000) var(--bryn-s-600); /* 48 48 24 */
  background: var(--bryn-card); /* Surface/Light/Card */
  text-decoration: none;
  color: inherit;
}
h4.bryn-cta-card__title.bryn-cta-card__title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 24px; /* h4/font-size */
  line-height: 1.3; /* 31.2 / 24 */
  letter-spacing: 0;
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
/* HERO button Dark på lys flate — instans 266:3929 bruker Text/BRYN-BLÅ.
 * Hele kortet er lenken; inner .bryn-hero-link er <span>. */
.bryn-cta-card .bryn-hero-link,
.bryn-cta-card .bryn-hero-link:hover,
.bryn-cta-card .bryn-hero-link:focus-visible {
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
}
.bryn-cta-card:hover .bryn-hero-link__diamond,
.bryn-cta-card:focus-visible .bryn-hero-link__diamond {
  transform: rotate(225deg) scale(0.666667);
}
.bryn-cta-card:hover .bryn-hero-link__label,
.bryn-cta-card:focus-visible .bryn-hero-link__label {
  color: inherit;
  opacity: 0.75;
}
.bryn-cta-card:focus-visible {
  outline: 2px solid var(--bryn-blaa-mork);
  outline-offset: 2px;
}

/* Gamle Elementor-containere på /fagomrader/ (page 9847). Beholdes i DB.
 * 0a2bb98 = «Våre fagområder» + intro/CTA
 * ca4864e = Byggautomasjon
 * 3846da4 = Ventilasjon
 * 7e4e412 = Renluft
 * 3808bd3 = Kjøling */
.page-id-9847 .elementor-element-0a2bb98,
.page-id-9847 .elementor-element-ca4864e,
.page-id-9847 .elementor-element-3846da4,
.page-id-9847 .elementor-element-7e4e412,
.page-id-9847 .elementor-element-3808bd3 {
  display: none !important;
}

/* /byggautomasjon/ page #11186: skjul gammel Elementor-canvas, ikke PHP-prepend. */
.page-id-11186 .elementor-11186 > .elementor-element {
  display: none !important;
}

@media (max-width: 1100px) {
  .bryn-cta-row { flex-wrap: wrap; }
  .bryn-cta-row .bryn-cta-card { flex: 1 1 calc(50% - var(--bryn-s-600) / 2); }
}

@media (max-width: 900px) {
  .bryn-fag { padding: var(--bryn-s-1100) var(--bryn-s-600) 0; }
}

@media (max-width: 600px) {
  .bryn-cta-row .bryn-cta-card { flex: 1 1 100%; }
}

/* —— /fagomrader hero (223:3021 / collage 475:6261) ——
 * CSS-ver merknad: 2.2.0-fagomrader (bump i fase1 eies av innholdsagenten).
 * get_motion_context 223:3021 recursive = [] — --bryn-dur / --bryn-ease.
 * Verdier er Figma-px uten avrunding.
 */
.bryn-fag-hero {
  --bryn-rod-lys: #ff808d; /* Surface/Brand/Rød Lys — 223:3031 */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: var(--bryn-s-1300) var(--bryn-s-1000) 0; /* 128 / 48 / 0 — 223:3020 pt/px */
}
/* Fast header overlay: spacer ville gitt 92+128 mot Figmas 128. */
body:has(.bryn-fag-hero) .bryn-header__spacer {
  display: none;
}
.bryn-fag-hero__row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--bryn-max); /* 1344 */
  height: 730.441px; /* 223:3021 */
  box-sizing: border-box;
}
.bryn-fag-hero__overlay {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 660px; /* 223:3022 */
  margin-right: -430.4px; /* Figma mr -430.4 — overlapper collagen */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px; /* Nautrals/900 2 */
  padding: var(--bryn-s-1000) var(--bryn-s-1000) var(--bryn-s-600); /* 48 48 24 */
  background: var(--bryn-blaa); /* Surface/Brand/Blå */
}
h1.bryn-fag-hero__title.bryn-fag-hero__title {
  margin: 0;
  width: 100%;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 58px; /* h1/font-size */
  line-height: 1.2; /* 69.6 / 58 */
  letter-spacing: 0;
  color: var(--bryn-white); /* Text/Light */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-fag-hero__collage {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 1114.4px; /* 475:6261 */
  height: 730.441px;
}
.bryn-fag-hero__shot.bryn-fag-hero__shot {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}
.bryn-fag-hero__shot.bryn-fag-hero__shot--lg {
  left: 405.88px;
  top: 0;
  width: 708.521px;
  height: 708.521px;
}
.bryn-fag-hero__shot.bryn-fag-hero__shot--md {
  left: 0;
  top: 243.95px;
  width: 486.489px;
  height: 486.489px;
}
.bryn-fag-hero__shot.bryn-fag-hero__shot--sm {
  left: 268.7px;
  top: 107.48px;
  width: 222.032px;
  height: 222.032px;
}
.bryn-fag-hero__crumb {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bryn-s-200); /* Scale/200 = 8 */
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ */
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: 14px; /* caption/font-size */
  line-height: 1.4; /* 19.6 / 14 */
}
.bryn-fag-hero__crumb-link.bryn-fag-hero__crumb-link {
  color: var(--bryn-blaa-mork);
  text-decoration: none;
  font: inherit;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-fag-hero__crumb-link.bryn-fag-hero__crumb-link:hover,
.bryn-fag-hero__crumb-link.bryn-fag-hero__crumb-link:focus-visible {
  color: var(--bryn-blaa-mork);
}
.bryn-fag-hero__crumb-link:focus-visible {
  outline: 2px solid var(--bryn-blaa-mork);
  outline-offset: 2px;
}
.bryn-fag-hero__crumb-cur {
  display: flex;
  align-items: center;
  gap: var(--bryn-s-200); /* 8 */
}
.bryn-fag-hero__crumb-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bryn-fag-hero__crumb-diamond {
  width: 8px;
  height: 8px;
  background: var(--bryn-rod-lys); /* Surface/Brand/Rød Lys */
  transform: rotate(45deg);
  flex-shrink: 0;
}
.bryn-fag-hero__crumb-here {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

@media (max-width: 1100px) {
  .bryn-fag-hero__row {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: var(--bryn-s-800);
  }
  .bryn-fag-hero__overlay {
    width: 100%;
    margin-right: 0;
  }
  .bryn-fag-hero__collage {
    width: 100%;
    max-width: 1114.4px;
    height: auto;
    aspect-ratio: 1114.4 / 730.441;
  }
  .bryn-fag-hero__shot.bryn-fag-hero__shot--lg {
    left: calc(405.88 / 1114.4 * 100%);
    top: 0;
    width: calc(708.521 / 1114.4 * 100%);
    height: auto;
    aspect-ratio: 1;
  }
  .bryn-fag-hero__shot.bryn-fag-hero__shot--md {
    left: 0;
    top: calc(243.95 / 730.441 * 100%);
    width: calc(486.489 / 1114.4 * 100%);
    height: auto;
    aspect-ratio: 1;
  }
  .bryn-fag-hero__shot.bryn-fag-hero__shot--sm {
    left: calc(268.7 / 1114.4 * 100%);
    top: calc(107.48 / 730.441 * 100%);
    width: calc(222.032 / 1114.4 * 100%);
    height: auto;
    aspect-ratio: 1;
  }
}

@media (max-width: 900px) {
  .bryn-fag-hero { padding: var(--bryn-s-1100) var(--bryn-s-600) 0; }
  h1.bryn-fag-hero__title.bryn-fag-hero__title { font-size: 32px; }
}

/* /byggautomasjon/ page template: Hello .site-main er 1140px og wrapper 4×318-gridet. */
.page-id-11186 .site-main.bryn-ba-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* /byggautomasjon listing (336:2228) + fagartikel-card (306:4386) ——
 * Title-only panel (showBody=false). Padding 32/24, gap 14. Panel strekker
 * lik høyde per grid-rad (1:1-bilde + flex:1 panel).
 */
.bryn-fa-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bryn-s-1000); /* 48 — 336:2226 */
  width: 100%;
  max-width: var(--bryn-max);
}
.bryn-fa-list__title {
  margin: 0;
  width: 100%;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3; /* 31.2 / 24 */
  color: var(--bryn-blaa-mork);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-fa-list__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bryn-s-600); /* 24 — 336:2228 */
  width: 100%;
  align-items: stretch;
  justify-items: stretch;
}
.bryn-fa-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 318px;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.bryn-fag.bryn-ba {
  padding-bottom: var(--bryn-s-1300); /* 128 — mellom listing og banner */
}
.bryn-fa-card__media {
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  background: var(--bryn-card);
  flex-shrink: 0;
}
.bryn-fa-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bryn-fa-card__panel {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--bryn-s-800) var(--bryn-s-600); /* 32 / 24 — 306:4369 */
  background: var(--bryn-card);
  transition:
    background-color var(--bryn-dur) var(--bryn-ease),
    color var(--bryn-dur) var(--bryn-ease);
}
.bryn-fa-card__copy {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.bryn-fa-card__title {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4; /* 25.2 / 18 — sub2 */
  color: var(--bryn-blaa-mork);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-fa-card__icon {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}
.bryn-fa-card__diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  background: var(--bryn-blaa);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform var(--bryn-dur) var(--bryn-ease), background-color var(--bryn-dur) var(--bryn-ease), width var(--bryn-dur) var(--bryn-ease), height var(--bryn-dur) var(--bryn-ease);
}
.bryn-fa-card__arrow {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
  display: block;
  /* arrow_forward.svg er #333 — Figma 306:4386 pila er Text/Light på diamanten */
  filter: brightness(0) invert(1);
}
.bryn-fa-card:hover .bryn-fa-card__panel,
.bryn-fa-card:focus-visible .bryn-fa-card__panel {
  background: var(--bryn-blaa);
}
.bryn-fa-card:hover .bryn-fa-card__title,
.bryn-fa-card:focus-visible .bryn-fa-card__title {
  color: var(--bryn-white);
}
.bryn-fa-card:hover .bryn-fa-card__diamond,
.bryn-fa-card:focus-visible .bryn-fa-card__diamond {
  width: 22px;
  height: 22px;
  background: var(--bryn-rod);
  transform: translate(-50%, -50%) rotate(-135deg);
}
.bryn-fa-card:focus-visible {
  outline: 2px solid var(--bryn-blaa-mork);
  outline-offset: 2px;
}

/* Mer om byggautomasjon — Figma 539:3015, 16 gap head→kort, 24 mellom kort */
.bryn-fa-more {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--bryn-max) + 2 * var(--bryn-s-1000));
  margin: 0 auto;
  padding: var(--bryn-s-1200) var(--bryn-s-1000); /* 96 — 6666.5−6570.5 */
}
.bryn-fa-more__inner {
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-400); /* 16 — 539:3015 */
  width: 100%;
  max-width: var(--bryn-max);
  margin: 0 auto;
}
.bryn-fa-more__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bryn-s-600);
  width: 100%;
  min-height: var(--bryn-h-outline);
}
h2.bryn-fa-more__title.bryn-fa-more__title {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: var(--bryn-h4-size);
  line-height: var(--bryn-h4-lh);
  color: var(--bryn-blaa-mork);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-fa-more__grid {
  width: 100%;
}
.bryn-fa-more .bryn-fa-card {
  max-width: none;
}

.bryn-ba-ask {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bryn-s-800);
  padding: 0 var(--bryn-s-1000) var(--bryn-s-1100);
}
.bryn-ba-ask__title {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.3;
  color: var(--bryn-blaa-mork);
  text-align: center;
}

/* Single fagartikkel 262:2186 */
.bryn-fa-single {
  background: var(--bryn-white);
}
.bryn-fa-hero {
  background: var(--bryn-card);
  /* Header overlay: 92 + 24 gap til brødsmule (Tinius). */
  padding: calc(var(--bryn-h-header) + var(--bryn-s-600)) var(--bryn-s-1000) var(--bryn-s-1000);
}
.bryn-fa-hero__inner {
  max-width: var(--bryn-max);
  margin: 0 auto;
}
.bryn-fa-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bryn-s-200);
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bryn-blaa-mork);
  margin-bottom: var(--bryn-s-800);
}
.bryn-fa-crumb a {
  color: var(--bryn-blaa-mork);
  text-decoration: none;
}
.bryn-fa-crumb a:focus-visible {
  outline: 2px solid var(--bryn-blaa-mork);
  outline-offset: 2px;
}
.bryn-fa-crumb__plain {
  opacity: 0.75;
}
.bryn-crumb-sep {
  width: 8px;
  height: 8px;
  background: var(--bryn-rod-lys); /* Surface/Brand/Rød Lys */
  transform: rotate(45deg);
  flex-shrink: 0;
}
.bryn-fa-hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bryn-s-600);
}
.bryn-fa-hero__copy {
  flex: 1 1 var(--bryn-measure);
  min-width: 0;
  max-width: var(--bryn-measure);
}
h1.bryn-fa-hero__title.bryn-fa-hero__title {
  margin: 0 0 var(--bryn-s-800);
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.2;
  color: #000;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-fa-hero__byline {
  margin: 0;
  font-family: var(--bryn-font-body);
  font-size: 14px;
  color: var(--bryn-text);
}
.bryn-fa-hero__media,
.bryn-fa-hero__img {
  width: 432px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  flex-shrink: 0;
}
.bryn-fa-follow {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--bryn-s-600);
  width: 100%;
  max-width: calc(var(--bryn-max) + 2 * var(--bryn-s-1000)); /* 1344 + 48+48 */
  margin: 0 auto;
  padding: 0 var(--bryn-s-1000);
}
.bryn-fa-toc {
  width: 318px; /* TOC-liste 262:2201. Kolonne 432 får ikke plass ved 1440+scrollbar. */
  flex-shrink: 0;
  padding-top: var(--bryn-s-1300);
  position: sticky;
  top: 20px; /* 112 − 92 */
  align-self: flex-start;
}
/* html + body overflow-x:hidden lager to scrollporter og dreper sticky.
 * clip på body gjør html til eneste scrollport (målt tocTop 112 ved scrollY 1301). */
body.single-fagartikkel {
  overflow-x: clip;
}
.bryn-fa-toc__caption {
  margin: 0 0 16px;
  font-family: var(--bryn-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--bryn-text);
}
.bryn-fa-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 318px; /* 262:2201 */
}
.bryn-fa-toc__link {
  display: flex;
  align-items: center;
  gap: var(--bryn-s-200);
  min-height: 36px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--bryn-blaa-mork);
  font-family: var(--bryn-font-body);
  font-weight: 600;
  font-size: 16px;
  opacity: 0.75;
  transition: opacity var(--bryn-dur) var(--bryn-ease);
}
.bryn-fa-toc__diamond {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--bryn-blaa-lys);
  transform: rotate(-135deg);
  transition:
    width var(--bryn-dur) var(--bryn-ease),
    height var(--bryn-dur) var(--bryn-ease),
    background-color var(--bryn-dur) var(--bryn-ease),
    transform var(--bryn-dur) var(--bryn-ease);
}
.bryn-fa-toc__link.is-active {
  opacity: 1;
}
.bryn-fa-toc__link.is-active .bryn-fa-toc__diamond {
  width: 12px;
  height: 12px;
  background: var(--bryn-rod);
  transform: rotate(45deg);
}
.bryn-fa-article {
  flex: 1 1 var(--bryn-measure);
  min-width: 0;
  padding-top: var(--bryn-s-1300);
  max-width: var(--bryn-measure);
}
/* Bryn-FAQ i artikkelsporet (262:2259): 888-kolonne, linje med artikkel. */
.bryn-fa-follow > .bryn-info {
  flex: 1 1 100%;
  box-sizing: border-box;
  width: var(--bryn-measure);
  max-width: var(--bryn-measure);
  margin-left: calc(318px + var(--bryn-s-600)); /* TOC 318 + gap 24 — linje med artikkel */
  padding: var(--bryn-s-800) 0 0;
  align-items: flex-start;
  gap: 0;
}
.bryn-fa-follow > .bryn-info .bryn-info__faq {
  align-items: flex-start;
  max-width: var(--bryn-measure);
}
.bryn-fa-follow > .bryn-info .bryn-info__faq-title {
  text-align: left;
}
h2.bryn-fa-article__h2.bryn-fa-article__h2 {
  margin: var(--bryn-s-800) 0 var(--bryn-s-800); /* +forrige 32 = 64 seksjonsgap */
  max-width: var(--bryn-measure);
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: var(--bryn-h3-size);
  line-height: var(--bryn-h3-lh);
  color: var(--bryn-text); /* Text/Dark — Figma 537:2748; slår kit h2 36/40 */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  scroll-margin-top: 40px;
}
h3.bryn-fa-article__h4.bryn-fa-article__h4,
h2.bryn-fa-article__h4.bryn-fa-article__h4 {
  margin: 0 0 var(--bryn-s-600);
  max-width: var(--bryn-measure);
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: var(--bryn-h4-size);
  line-height: var(--bryn-h4-lh);
  color: var(--bryn-blaa-mork); /* Text/BRYN-BLÅ — Figma 536:2701; slår kit h3 30/40 */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  scroll-margin-top: 40px;
}
p.bryn-fa-article__lead.bryn-fa-article__lead {
  margin: 0 0 var(--bryn-sub2-gap); /* 12 — sub1/paragraph spacing på sub2 */
  max-width: var(--bryn-measure);
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: var(--bryn-sub2-size);
  line-height: var(--bryn-sub2-lh);
  color: var(--bryn-black); /* 536:2699 text-black */
  /* Ikke text-box-trim her. trim-both på hvert <p> kuttet både topp og bunn,
     så linjeboksene spiste de 12 px og avstanden ble ~2 px. */
}
p.bryn-fa-article__lead.bryn-fa-article__lead:has(+ .bryn-fa-article__h4) {
  margin-bottom: var(--bryn-s-1100); /* 64 — intro→kort, 391−327 */
}
.bryn-fa-article__p {
  margin: 0 0 var(--bryn-p2-gap); /* 16 — ikke GDoc-dobbeltlinje */
  max-width: var(--bryn-prose);
  font-family: var(--bryn-font-body);
  font-weight: 400;
  font-size: var(--bryn-p2-size);
  line-height: var(--bryn-p2-lh);
  color: var(--bryn-text);
}
.bryn-fa-article__p:has(+ :not(.bryn-fa-article__p)) {
  margin-bottom: var(--bryn-s-800); /* 32 før ul/h2/bilde — Figma-seksjon */
}
.bryn-fa-article__ul {
  box-sizing: border-box;
  margin: 0 0 var(--bryn-s-800);
  padding: 0;
  max-width: var(--bryn-prose);
  list-style: disc;
  font-family: var(--bryn-font-body);
  font-weight: 400;
  font-size: var(--bryn-p2-size);
  line-height: var(--bryn-p2-lh);
  color: var(--bryn-text);
}
.bryn-fa-article__ul li {
  margin: 0 0 var(--bryn-s-300) 0;
  padding: 0;
  margin-inline-start: var(--bryn-s-600); /* 24 — Figma 536:2702 li ms */
}
.bryn-fa-article__ul li:last-child {
  margin-bottom: 0;
}
.bryn-fa-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bryn-s-600); /* 24 — Figma 262:2215 */
  margin: 0 0 var(--bryn-s-800);
  width: 100%;
}
.bryn-fa-level:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.bryn-fa-level {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--bryn-s-600);
  width: 100%;
  min-width: 0;
  padding: 32px 24px; /* Scale/800 / Scale/600 */
  background: var(--bryn-card);
  border-radius: 4px;
}
h4.bryn-fa-level__title.bryn-fa-level__title {
  margin: 0;
  font-family: var(--bryn-font-display);
  font-weight: 500;
  font-size: var(--bryn-sub1-size);
  line-height: var(--bryn-sub1-lh);
  color: var(--bryn-blaa-mork);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-fa-level__body {
  margin: 0;
  font-family: var(--bryn-font-body);
  font-size: 14px;
  line-height: 19.6px;
  color: var(--bryn-text);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.bryn-fa-figure,
.bryn-fa-figure__img {
  width: 100%;
  max-width: var(--bryn-measure);
  margin: 0 0 var(--bryn-s-800);
  display: block;
  height: auto;
}
.bryn-fa-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bryn-s-600);
  margin: 0 0 var(--bryn-s-800);
}
.bryn-fa-pair__img {
  width: 432px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.bryn-fa-faq {
  margin: var(--bryn-s-800) 0;
  max-width: var(--bryn-measure); /* tittel 888 — 262:2247; accordion 660 */
}
.bryn-fa-faq > .bryn-fa-article__h4 {
  margin-bottom: var(--bryn-s-800); /* 32 — 262:2246 y 49−17 */
}
.bryn-fa-faq .bryn-info__faq-items {
  max-width: var(--bryn-prose);
}

@media (max-width: 1100px) {
  .bryn-fa-hero__row,
  .bryn-fa-follow { flex-direction: column; }
  .bryn-fa-toc { position: static; width: 100%; padding-top: var(--bryn-s-800); }
  .bryn-fa-toc__list { width: 100%; }
  .bryn-fa-article { padding-top: var(--bryn-s-600); max-width: none; }
  .bryn-fa-follow > .bryn-info {
    margin-left: 0;
    max-width: none;
    padding-top: var(--bryn-s-800);
  }
}

@media (max-width: 800px) {
  .bryn-fa-list__grid {
    grid-template-columns: 1fr;
  }
  .bryn-fa-card {
    max-width: none;
  }
  .bryn-fa-levels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .bryn-fa-card { width: 100%; height: auto; }
  .bryn-fa-hero { padding: calc(var(--bryn-h-header) + var(--bryn-s-600)) var(--bryn-s-600) var(--bryn-s-800); }
  .bryn-fa-follow { padding: 0 var(--bryn-s-600); }
  .bryn-fa-more { padding: var(--bryn-s-1000) var(--bryn-s-600); }
  .bryn-fa-more__head { flex-wrap: wrap; }
  h1.bryn-fa-hero__title.bryn-fa-hero__title { font-size: 32px; }
}