/* ==========================================================================
   LAKE-Digital overrides. Loaded AFTER main.css, so it wins without
   !important. Everything the Sass colour map cannot express lives here.

   Colour law: docs/brand-tokens.css. Never hand-pick a hex here either.
   Placement rules and what still needs doing: docs/reskin-map.md
   ========================================================================== */

/* Font Awesome is gone. The close button reuses the bundled plus glyph. */
.lake-rot45 {
  display: inline-block;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   The footer must be a FLAT ink ground.

   Solvior lays a skyscraper photo over `theme-dark` at z-index -1. Sampling
   the render showed it lifts the ground from #1C3D5A to #264C6E, and that
   quietly breaks three token guarantees: Honig 5.01 -> 3.99 (no longer AA
   text), --lake-error-on-ink 5.17 -> 4.12 (below AA), and
   --lake-border-on-ink-strong 3.77 -> 3.01 (onto the floor).

   Removing the photo restores all three, and generic stock architecture is
   the "looks like every consultancy" problem we are trying to avoid anyway.
   -------------------------------------------------------------------------- */
.h7-footer-overlay {
  display: none;
}

/* The copyright bar stays Seeblau, but it is a TEXT-ONLY ground: only
   --lake-surface text clears AA on it (5.88:1). Honig (2.73:1), the error
   colour (2.82:1) and every border token (<= 2.05:1) all fail there. */

/* --------------------------------------------------------------------------
   Static hero (the 3-slide Swiper carousel was dropped 2026-08-05).

   Solvior reveals the hero content only once Swiper stamps
   .swiper-slide-active on the slide. With no Swiper there is no active
   class, so ALL FOUR elements sit at opacity 0 forever, and nothing in the
   markup looks wrong. They are declared across two partials, which is how
   the first pass caught only one of them:

     _slider.scss:156  .sub-title       (eyebrow)
     _slider.scss:162  .slider-title    (h1)
     _slider.scss:171  .slider-button   (both CTAs)
     _h7-hero.scss:216 .desc            (subline)
   The .desc selector below is deliberately the FULL four-class chain. The
   base rule is `.h7-hero-slider .tj-slider-section .slider-content .desc`
   (0,4,0); a shorter override loses on specificity and the subline stays
   invisible, which is exactly what happened on the first attempt.
   -------------------------------------------------------------------------- */
.tj-hero-slider.style-1 .sub-title,
.tj-hero-slider.style-1 .slider-title,
.tj-hero-slider.style-1 .slider-button,
.h7-hero-slider .tj-slider-section .slider-content .desc {
  transform: none;
  opacity: 1;
  transition: none;
}

/* The wave is z-index 1 and .tj-slider-section is z-index 2. Swiper used to
   create the stacking context that kept them apart; without it the slide
   simply covers the wave. Raise the wave instead of lowering the slide,
   which would put it behind the hero background image. */
.h7-hero-slider .tj-hero-shape {
  z-index: 3;
}

/* --------------------------------------------------------------------------
   Legal pages (Impressum, Datenschutz). Solvior has no long-form prose
   style: its inner pages are all cards and grids, so headings and copy in a
   plain text column get no vertical rhythm at all without this.
   -------------------------------------------------------------------------- */
.lake-legal h2 {
  font-size: var(--tj-fs-h5);
  margin-top: 40px;
  margin-bottom: 12px;
}

.lake-legal p {
  max-width: 62ch;
  margin-bottom: 16px;
}

.lake-legal a {
  color: var(--tj-color-theme-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the header floats over the hero on the homepage; inner pages have no hero,
   so it needs a solid ground and the content needs to clear it */
.header-solid {
  position: relative;
  background-color: var(--tj-color-theme-dark);
}

/* --------------------------------------------------------------------------
   Logo lockup: ONE SVG, Robert's final artwork (2026-08-10).

   Until now this was the mark as an SVG next to the wordmark as HTML text,
   because an SVG referenced by <img> is an isolated document and cannot reach
   the page's webfonts, so live <text> inside it would fall back to a system
   face. That reason is gone: the type is converted to outlines, so the whole
   lockup is one file and the header shows the real logo instead of an
   approximation of it in a second typeface.

   The file is the REVERSED colourway, and the no-GmbH variant. Both are
   deliberate. Every header ground on this site is ink, where the light
   version's hull drops to 1.84:1 and vanishes; and the company is still in
   Gründung, so "GmbH" is not welded to the name anywhere on the site - the
   status line says "GmbH in Gründung" for the same reason.
   -------------------------------------------------------------------------- */
/* Specificity note: the template sets `.site-logo .logo { max-width:150px;
   width:100% }` and `.hamburger_logo .mobile_logo { max-width:120px }`, both
   (0,2,0). A bare `.lake-logo` (0,1,0) loses and the lockup is squeezed to
   150px. Match their specificity and release the cap. */
.site-logo .logo.lake-logo,
.hamburger_logo .mobile_logo.lake-logo {
  display: inline-flex;
  align-items: center;
  max-width: none;
  width: auto;
}

/* Sized by HEIGHT, so the lockup's 3.98:1 aspect governs its width and the
   header bar keeps its rhythm whatever the artwork's proportions become. */
.lake-logo img {
  height: 42px;
  width: auto;
  flex: none;
}

@media (max-width: 575px) {
  .lake-logo img { height: 32px; }
}

/* The offcanvas nav is `text-transform: capitalize` (_hamburger.scss:140,176),
   which is an English habit and wrong in German: it renders our "Über uns" as
   "Über Uns". German capitalises nouns, not every word in a phrase. */
.hamburger_menu .mean-nav ul li a {
  text-transform: none;
}

/* The process badge is a Seeblau disc in the template, where the mark's own
   Seeblau hull disappears (1.00:1 against itself). Ink disc + the reversed
   mark, the same pairing the header already uses. */
.h7-process-circle .circle-wrap .logo-icon {
  background: var(--tj-color-theme-dark);
}

.h7-process-circle .circle-wrap .logo-icon img {
  width: 62%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Hero photograph.

   Declared here rather than through the template's data-bg-image attribute,
   which main.js turned into an inline style at runtime. That made the hero
   photo JS-dependent (with scripting off the hero was an empty cream field)
   and forced !important on the phone-sized swap, because nothing beats an
   inline style. Both problems disappear by writing plain CSS.
   -------------------------------------------------------------------------- */
/* 2026-09-22: the craftsman in the workshop with a tablet replaces the stock
   skyscrapers (Robert; second version of the image, same day). New file
   names each time on purpose: images keep heuristic browser caching, so
   reusing a name would show returning visitors the previous photo.
   He stands in the right third (61-86% of the width, face at 71%, in the top
   sixth). Anchored at the TOP so the face clears the header bar. Centred on
   desktop, where the headline then sits over the workshop, not over him; on
   narrower screens the crop keeps only part of the width, so it shifts right
   to keep him in frame (a centred phone crop cuts him off entirely). */
.h7-hero-slider .tj-slider-section {
  background-image: url("../images/slider/hero-werkstatt.webp");
  background-position: center top;
}

@media (max-width: 1199px) {
  .h7-hero-slider .tj-slider-section {
    background-position: 75% top;
  }
}

/* 1024px version on phones: 45 KB instead of 91 KB */
@media (max-width: 767px) {
  .h7-hero-slider .tj-slider-section {
    background-image: url("../images/slider/hero-werkstatt-1024.webp");
    background-position: 80% top;
  }
}

/* --------------------------------------------------------------------------
   Hero legibility over the photograph.

   Sampled against the rendered hero, not guessed. With Solvior's 55% ink
   overlay the brightest sky left the subline at 4.02:1 (below the 4.5 floor,
   and 18px regular is NOT "large text") and the eyebrow at 3.00:1. Text over
   a photo has no single contrast value, so the fix has to hold at the WORST
   patch, not the average: a heavier overlay plus a brighter subline.
   -------------------------------------------------------------------------- */
.h7-hero-slider .tj-slider-section::before {
  opacity: 0.68;
}

.h7-hero-slider .tj-slider-section .slider-content .desc {
  color: var(--tj-color-common-white);
}

/* The eyebrow pill is `rgba(247,247,247,.1)`, i.e. barely there, so its text
   is really sitting on the photograph: 3.95:1 at the brightest patch, and at
   12px that is normal text needing 4.5. A solid ink pill makes it 10.17:1
   everywhere, independent of whichever photo the hero carries. */
.h7-hero-slider .slider-wrapper .slider-content .sub-title {
  background-color: var(--tj-color-theme-dark);
  color: var(--tj-color-common-white);
}

/* The headline breaks by hand after "zusammen," and its first line measures
   1044px at 72px (1440 viewport), 943px at 65px (1280). The template's 750px
   cap wrapped it a second time, leaving "zusammen," alone on a middle line.
   1100px fits the first line from 768px up; phones wrap it, which reads fine.
   The paragraph keeps its own 530px cap, so only the headline gets wider. */
.h7-hero-slider .tj-slider-section .slider-content {
  max-width: 1100px;
}

/* The hero has a single button since 2026-09-22, and _h7-hero.scss makes the
   LAST hero button transparent (in the template that slot is the bare email
   link). Robert wants it that way, as white text on the photograph, so only
   the label colour changes: the template's is ink (0,4,0), which vanished on
   the dark hero. White sits on the same ink overlay as the h1 and subline. */
.h7-hero-slider .tj-slider-section .slider-content .slider-button .btn_text {
  color: var(--tj-color-common-white);
}

/* The three feature cards carry different amounts of text, and each card was
   only as tall as its own copy. The columns already stretch to the row's
   height (flex), so the card only has to fill its column. */
.h7-feature-section .feature-item {
  height: 100%;
}

/* The preloader slot is `max-width:66px` with no width, sized for Solvior's
   near-square mark. Ours is 1.29:1, so it needs more width to read at the
   same visual weight inside the 100px spinner ring. */
#loading-icon {
  max-width: 78px;
  width: 78px;
}

/* ==========================================================================
   THE .js GATE  (2026-08-06)

   Everything below is the CSS half of lake.js, and the reason it exists is
   that the template made CONTENT depend on JavaScript. Rendered with scripting
   disabled, index.html was a blank cream field:

     - `.wow { opacity: 0 }` hid 21 blocks that only wow.js ever revealed: the
       whole Uber-uns text, all four service cards, all three process steps,
       all five FAQ items and the CTA button.
     - `.preloader` is a fixed full-screen cover that only main.js dismissed,
       so it stayed over the page forever.
     - The hero photograph arrived through `data-bg-image`, applied by main.js.

   The rule now is the inverse of the template's: the page is fully readable
   with no scripting, and JS only opts INTO the animation by putting `js` on
   <html> (the inline snippet in <head>, which runs before first paint so
   there is no flash of un-hidden content). Anything gated on `.js` must be
   decoration only. Never hide content behind it.
   ========================================================================== */

/* -- preloader: shown only when there is a script to dismiss it ------------ */
.preloader {
  display: none;
}

.js .preloader {
  display: flex; /* NOT block: the spinner is centred by the flex context */
  opacity: 1;
  transition: opacity 0.6s ease;
}

.js .preloader.preloader-done {
  opacity: 0;
  pointer-events: none;
}

/* -- scroll reveal: replaces wow.js + animate.css -------------------------- */
/* The 72 KB animate.css was shipped for exactly two of its animations. These
   are those two, copied verbatim so the motion is unchanged. */
.js .wow:not(.lake-in) {
  opacity: 0;
}

.js .wow.lake-in {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* The resting state after the reveal has played. It is a plain declaration and
   not `animation-fill-mode: both` on purpose: an element whose visibility
   depends on an animation still being attached can be re-rastered at its 0%
   keyframe and paint as invisible. lake.js adds this on animationend. */
.js .wow.lake-done,
.js .lake-split.lake-done .lake-char {
  opacity: 1;
  animation: none;
  transform: none;
}

.js .wow.fadeInUp.lake-in {
  animation-name: lakeFadeInUp;
}

.js .wow.fadeInLeft.lake-in {
  animation-name: lakeFadeInLeft;
}

@keyframes lakeFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lakeFadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* -- heading character reveal: replaces GSAP SplitText + ScrollTrigger ----- */
/* Words are wrapped as well as characters. Inline-block characters otherwise
   line-break anywhere they like, which shreds German compounds mid-word. */
.lake-word {
  display: inline-block;
  white-space: nowrap;
}

.lake-char {
  display: inline-block;
  will-change: transform, opacity;
}

/* The split wraps characters in <span>, and the template accents a word inside
   a heading with `.sec-heading .sec-title span { color: theme-primary }`. GSAP
   SplitText emitted <div>, so it never matched that rule; ours does, and every
   split heading rendered in Seeblau instead of ink - including the one on the
   ink ground, where it would also have broken contrast. Found by the pixel
   diff against the previous build, not by reading the markup.
   Specificity has to beat (0,2,1), hence the `.js` prefix. */
.js .lake-split .lake-word,
.js .lake-split .lake-char {
  color: inherit;
}

.js .lake-split:not(.lake-in) .lake-char {
  opacity: 0;
}

.js .lake-split.lake-in .lake-char {
  animation: lakeCharIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes lakeCharIn {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* -- marquee: replaces a 291 KB Swiper carrying twelve words --------------- */
/* The track holds the six terms twice, so translating it by exactly -50%
   lands on an identical frame and the loop is seamless. Six terms at the
   4s-per-item the Swiper used is one 24s cycle. */
.lake-marquee {
  overflow: hidden;
}

.lake-marquee-track {
  display: flex;
  width: max-content;
  animation: lakeMarquee 24s linear infinite;
}

.lake-marquee-track > .marquee-item {
  flex: 0 0 auto;
}

@keyframes lakeMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* -- feature icons: drawn when there is no script to draw them ------------- */
/* The three inline SVGs are "vivus-instant" output: each path carries a
   stroke-dasharray and a stroke-dashoffset that leave it UNDRAWN, plus a draw
   animation that _theme.scss freezes with animation-play-state: paused. Only
   the script ever completed the draw, so with scripting off all three icons
   were missing entirely. This is the drawn resting state; lake.js still does
   the scroll-triggered draw when there is a script. Beats the SVG's own inline
   <style> rule on specificity (0,2,2) vs (0,1,0), so no !important needed. */
html:not(.js) .svg-animate svg path {
  stroke-dashoffset: 0;
  animation: none;
}

/* -- reduced motion -------------------------------------------------------- */
/* The template honoured this nowhere. Everything above is decoration, so all
   of it can simply stop; nothing here is the only route to content. */
@media (prefers-reduced-motion: reduce) {
  .js .wow:not(.lake-in),
  .js .lake-split:not(.lake-in) .lake-char {
    opacity: 1;
  }

  .js .wow.lake-in,
  .js .lake-split.lake-in .lake-char,
  .lake-marquee-track,
  .marquee-icons img {
    animation: none;
  }

  .js .preloader {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   The four generated panels scale, rather than standing at intrinsic height.

   Each one carries width/height attributes so the browser knows its ratio
   before it loads. Solvior sizes these slots with `width: 100%` and never
   sets a height, which is harmless for an <img> whose height is already
   auto - but a height ATTRIBUTE is a presentational hint, and with it
   present the image renders at that literal height instead of scaling.

   At 1440 the whole page grew 6px and nothing looked wrong. At 375 the
   Uber-uns panel came out 351x639 where it should be 351x348: a squashed,
   nearly double-height block, and the page ran 565px longer. Found by
   rendering at both widths and diffing section heights against the previous
   commit, which is the only reason it was found at all.

   .about-statistics > img is deliberately absent: that one is sized
   `height: 300px; object-fit: cover` on purpose.
   -------------------------------------------------------------------------- */
.about-images-group-three img,
.h7-process .process-banner > img,
.h7-faq .faq-banner img {
  height: auto;
}

/* ==========================================================================
   LAKE Start, 2026-08-17

   Everything here exists because a Solvior helper turns out to be scoped to
   the one section of the one homepage variant it was written for, so reusing
   the component outside that section gets the markup but not the layout.
   ========================================================================== */

/* .btn-area is scoped to `.h7-about-section .about-float-area-left`, so a row
   of buttons anywhere else has no gap and no top margin at all. */
.lake-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 25px;
  margin-top: 30px;
}

/* .h7-process sets padding-bottom: 0 because the homepage fills that space
   with the process banner image. On lake-start.html the step list is the last
   thing in the section, so the padding has to come back. */
.lake-steps-section {
  padding-bottom: 120px;
}

@media (max-width: 1199px) {
  .lake-steps-section {
    padding-bottom: 100px;
  }
}

@media (max-width: 991px) {
  .lake-steps-section {
    padding-bottom: 80px;
  }
}

/* .process-inner is a right-aligned 612px column, sized for the homepage's
   5/7 split. In a half-width grid cell it has to fill the cell instead. */
.lake-steps .process-inner {
  max-width: 100%;
  margin-inline-start: 0;
}

/* The service cards turn Seeblau on hover. In the template a photograph with
   a dark overlay slides in behind them at the same moment, which is why only
   the title is recoloured. We ship no photographs, so without this the
   description stays ink on Seeblau: 1.79:1, i.e. unreadable while hovered.
   Pre-existing on the homepage's four cards; lake-start.html adds eight more. */
.h7-service-section .service-style-3:hover .desc,
.h7-service-section .service-style-3:hover .desc p,
.h7-service-section .service-style-3:hover .desc strong {
  color: var(--tj-color-common-white);
}

/* Bootstrap columns in a row are equal height; the box inside a column is not,
   so two price cards side by side start level and end ragged as soon as one
   description wraps to a second line. Fill the column, and let the feature
   list absorb the difference so both buttons land on the same line.

   Opt-in per row rather than blanket on .pricing__box: the "Ihr Einstieg" card
   sits beside a much taller column, where stretching it would just make a tall
   half-empty box. */
.lake-equal .pricing__box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.lake-equal .pricing__box .pricing__features-list {
  flex-grow: 1;
}

/* Solvior writes the price as "$19/month": the currency comes BEFORE the
   number, where a top-aligned 20px glyph reads as a currency sign. German puts
   it after, where the identical treatment reads as an exponent: 2.500 to the
   power of euro. Both small parts belong on the same baseline as each other,
   which is what the period span already does with margin-top: auto. */
.pricing__package-price .pricing__package-currency {
  margin-top: auto;
}

.pricing__package-price .pricing__package-period {
  margin-inline-start: 8px;
}

/* A burden list, not a benefit list: check-list-one's Seeblau tick would read
   as approval of the thing being listed. */
.lake-list-minus ul li i {
  color: var(--tj-color-common-black-3);
}

/* Callout under the price cards, and the quieter legal note at the page foot. */
.lake-note {
  margin-top: 40px;
  padding: 4px 0 4px 18px;
  border-inline-start: 3px solid var(--tj-color-theme-primary);
}

.lake-note p:last-child {
  margin-bottom: 0;
}

.lake-legal-note {
  margin-top: 50px;
  font-size: 15px;
  color: var(--tj-color-common-black-3);
  border-inline-start-color: var(--tj-color-border-2);
}

/* The roadmap grid sits inside the module section and needs a break from it. */
.lake-roadmap-head {
  margin-top: 60px;
  margin-bottom: 30px;
}

/* .pricing__box is Creme, and so is the module section it sits in, so these
   six cards rendered as invisible cards: correct padding, no edges. The rows
   above them are common-white on the same ground, so match those. Found by
   measuring section and card grounds, not by looking: at a glance the block
   read as "plain text, a bit airy". */
.lake-roadmap-grid .pricing__box {
  background-color: var(--tj-color-common-white);
}

.lake-roadmap-head .title {
  margin-bottom: 10px;
}

.lake-roadmap-head p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Contact form (#kontakt), added 2026-09-22.

   Solvior's contact-form-one is placeholder-only. A placeholder disappears on
   the first keystroke and is not a label, so every field carries a real
   <label> instead. The template draws each field as a faint underline, and
   Robert could not see where to write, so the fields are boxed in Seeblau
   (theme-primary, 5.8:1 on the card): the border is the field's only
   affordance and has to clear WCAG 1.4.11 with room to spare. The long
   selectors match the template's own, which carry four :not() attribute
   tests (0,7,1), so these win by one class instead of !important.
   -------------------------------------------------------------------------- */
.lake-kontakt .desc p {
  max-width: 420px;
}

.lake-kontakt .contact-form-one {
  max-width: none;
}

.lake-kontakt .contact-form-one .form-input label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tj-color-heading-primary);
}

.lake-kontakt .contact-form-one.style-2 .form-input input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="search"]),
.lake-kontakt .contact-form-one.style-2 .form-input textarea {
  border: 1px solid var(--tj-color-theme-primary);
  border-radius: 4px;
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
  padding: 12px 14px;
}

.lake-kontakt .contact-form-one.style-2 .form-input input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="search"]):focus,
.lake-kontakt .contact-form-one.style-2 .form-input textarea:focus {
  border-color: var(--tj-color-heading-primary);
  outline: 2px solid var(--tj-color-theme-primary);
  outline-offset: 1px;
}

.lake-kontakt .contact-form-one .form-input textarea {
  min-height: 110px;
}

.lake-form-note {
  margin: 0 0 25px;
  font-size: 14px;
  color: var(--tj-color-text-body-2);
}

.lake-form-note a {
  color: var(--tj-color-theme-primary);
  text-decoration: underline;
}

.lake-form-status {
  margin: 15px 0 0;
  font-weight: 600;
}

.lake-form-status:empty {
  display: none;
}

.lake-form-status.lake-error {
  color: var(--tj-color-state-error);
}

.lake-form button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.lake-form[hidden],
.lake-form-done[hidden] {
  display: none;
}

.lake-form-done {
  margin-bottom: 30px;
}

.lake-form-done h3 {
  margin-bottom: 10px;
  color: var(--tj-color-heading-primary);
}

.lake-form-done p {
  margin: 0;
}

.lake-form-done:focus {
  outline: none;
}

/* The honeypot: off-screen rather than display:none, which some bots skip. */
.lake-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Button labels lost their descenders: the "g" in "Neugierig" and "Anfrage".
   The template clips .btn_text with overflow:hidden at line-height 1, because
   its hover effect slides the label up and a copy in from below (a 23px
   text-shadow, translateY(-24px)). A line-height-1 box is exactly one em, and
   Lato's descenders hang below it. 3px more box top and bottom shows them and
   keeps the label centred; the copy starts 23px down, so it stays hidden. */
.tj-primary-btn .btn_inner .btn_text {
  padding-block: 3px;
}

/* --------------------------------------------------------------------------
   One-pager header (2026-09-22): logo left, "Neugierig? Meld dich!" right,
   nothing else. The nav links used to give the bar its height (their padding),
   so without them it shrank to the button and the button stuck out of the
   bar; the min-height restores the bar the site had. On phones the button
   used to be hidden behind the Menu button. It is the only thing on the right
   now, so it stays visible and gets a compact size to fit beside the logo
   (at 375px: 123px logo + 15px gap + about 200px button).
   -------------------------------------------------------------------------- */
.tj-header-area .header-wrapper {
  min-height: 80px;
  flex-wrap: nowrap;
}

@media (max-width: 991px) {
  .tj-header-area .header-wrapper {
    min-height: 72px;
  }
}

@media (max-width: 575px) {
  .tj-primary-btn.header_btn {
    font-size: 13px;
  }
  .tj-primary-btn.header_btn .btn_inner {
    padding: 9px 12px 9px 42px;
  }
  .tj-primary-btn.header_btn .btn_inner::before {
    width: 34px;
  }
  .tj-primary-btn.header_btn .btn_inner .btn_icon {
    min-width: 34px;
  }
}

/* Below 360px there is no room for the arrow as well: label only. */
@media (max-width: 359px) {
  .tj-primary-btn.header_btn .btn_inner {
    padding-inline-start: 12px;
  }
  .tj-primary-btn.header_btn .btn_inner::before,
  .tj-primary-btn.header_btn .btn_inner .btn_icon {
    display: none;
  }
}

/* FAQ: every answer starts closed (Robert, 2026-09-22; answer 02 used to be
   open on load). The accordion is lake.js, so with scripting off a closed
   answer could never be opened, and the FAQ would be six questions with no
   answers. Without JavaScript they are therefore all shown open. The <html>
   starts as .no-js and an inline script in <head> swaps it to .js. */
.no-js .accordion-collapse.collapse {
  display: block;
}