/* ============================================================
   Byrå24 — contact flow chooser (2026-08-13)
   ============================================================

   Replaces "the six-step wizard is the default state of every service page".
   The page now opens with four ways to make contact and nothing expanded; the
   panel appears only after the visitor picks one. That is what removes the tall
   reserved column on service pages — there is no hidden form holding space,
   because the wizard is not in the DOM flow until it is asked for.

   Everything here is scoped under .b24-cflow so it cannot leak into the rest of
   the site, and so the shared rhythm layer stays the single owner of page spacing.

   FORM DENSITY (applies to every form this component renders)
   ----------------------------------------------------------
   Inputs were 58px tall with 14px/16px padding and a 7px label gap, which made a
   four-field form taller than the content beside it. Here: 46px, 10px/14px, 5px —
   about 35% less height for the same fields, and on desktop the fields pair up two
   to a row, so a name/phone/e-post/språk form is two rows instead of four. */

:root {
  --b24-cf-gap: 10px;          /* label -> field */
  --b24-cf-row: 14px;          /* field -> field */
  --b24-cf-block: 22px;        /* block -> block inside the card */
  --b24-cf-input-h: 46px;
}

/* ---------- the chooser ---------- */

body.brand-page .b24-cflow {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px);
  width: 100%;
  box-sizing: border-box;
}
body.brand-page .b24-cflow__h {
  font-family: 'Fraunces', serif;
  font-weight: 360;
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 4px;
}
body.brand-page .b24-cflow__lead {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--b24-cf-block);
}

body.brand-page .b24-cflow__choices {
  display: grid;
  gap: 12px;                    /* was 8-10px between adjacent controls: too tight to tap */
  margin: 0;
}
body.brand-page .b24-cflow__choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;             /* comfortably above the 44px touch minimum */
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: 'Instrument Sans', sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
body.brand-page .b24-cflow__choice:hover { border-color: var(--petrol); }
body.brand-page .b24-cflow__choice[aria-expanded="true"] {
  border-color: var(--petrol);
  background: rgba(58, 82, 92, 0.04);
}
body.brand-page .b24-cflow__choice svg {
  width: 22px; height: 22px; flex: 0 0 auto; color: var(--petrol);
}
body.brand-page .b24-cflow__choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.brand-page .b24-cflow__label { font-size: 17px; font-weight: 600; line-height: 1.25; }
body.brand-page .b24-cflow__meta { font-size: 14.5px; line-height: 1.35; color: var(--ink-soft); }

/* The call option is the fastest path and the only one that converts today, so it
   carries the solid weight. The other three are equals beneath it. */
body.brand-page .b24-cflow__choice--call {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--ivory);
}
body.brand-page .b24-cflow__choice--call:hover { background: var(--petrol-deep); border-color: var(--petrol-deep); }
body.brand-page .b24-cflow__choice--call svg { color: var(--ivory); }
body.brand-page .b24-cflow__choice--call .b24-cflow__meta { color: rgba(244, 242, 234, 0.82); }

/* ---------- panels ---------- */

body.brand-page .b24-cflow__panel {
  margin-top: var(--b24-cf-block);
  padding-top: var(--b24-cf-block);
  border-top: 1px solid var(--hairline);   /* exactly one separator, never a stack */
}
body.brand-page .b24-cflow__panel[hidden] { display: none; }
body.brand-page .b24-cflow__panel > .r23-card,
body.brand-page .b24-cflow__panel > .r23-guided {
  /* the wizard brings its own card chrome; inside a panel that would be a box in a
     box, with two borders 22px apart */
  background: none;
  border: 0;
  padding: 0;
}

/* ---------- compact fields ---------- */

body.brand-page .b24-cflow__form { margin: 0; }
body.brand-page .b24-fieldrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b24-cf-row);
  margin: 0 0 var(--b24-cf-row);
}
@media (min-width: 720px) {
  /* Name+Telefon on one row, E-post+Språk on the next: four fields become two rows. */
  body.brand-page .b24-fieldrow--2 { grid-template-columns: 1fr 1fr; }
}
body.brand-page .b24-field { display: flex; flex-direction: column; gap: var(--b24-cf-gap); }
body.brand-page .b24-field label { font-size: 15px; font-weight: 550; color: var(--ink); line-height: 1.2; }
body.brand-page .b24-field input,
body.brand-page .b24-field select,
body.brand-page .b24-field textarea {
  min-height: var(--b24-cf-input-h);
  padding: 10px 14px;
  font-size: 16.5px;            /* stays >=16px: iOS zooms the page on smaller */
  font-family: 'Instrument Sans', sans-serif;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  width: 100%;
  box-sizing: border-box;
}
body.brand-page .b24-field textarea { min-height: 92px; line-height: 1.45; resize: vertical; }
body.brand-page .b24-field input:focus-visible,
body.brand-page .b24-field textarea:focus-visible,
body.brand-page .b24-field select:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; }

body.brand-page .b24-cflow__err { color: #8a2f2f; font-size: 15px; margin: 0 0 12px; }

body.brand-page .b24-btn {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 17px; cursor: pointer;
  border-radius: var(--radius); padding: 13px 24px; min-height: 50px;
  border: 1px solid var(--petrol); background: var(--petrol); color: var(--ivory);
  width: 100%;
  transition: background 180ms var(--ease);
}
body.brand-page .b24-btn:hover { background: var(--petrol-deep); }
body.brand-page .b24-btn[disabled] { opacity: 0.6; cursor: default; }

/* The reassurance line is not glued to the button — it reads as its own note. */
body.brand-page .b24-cflow__note {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
body.brand-page .b24-cflow__note a { color: var(--petrol); font-weight: 600; }

/* ---------- confirmation ---------- */

body.brand-page .b24-cflow__confirm { padding: 4px 0 0; }
body.brand-page .b24-cflow__confirm-h {
  font-family: 'Fraunces', serif; font-weight: 360; font-size: 22px;
  color: var(--ink); margin: 0 0 6px;
}
body.brand-page .b24-cflow__confirm-p { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }
body.brand-page .b24-cflow__confirm-call {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--petrol); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
body.brand-page .b24-cflow__confirm:focus { outline: none; }

/* The hero already carries the chooser, whose first option is "Ring nå" with the
   number on it. On desktop both are on screen at once, so the hero button was the
   same action twice, 400px apart. Mobile keeps it: there the chooser sits below the
   fold and a visitor in a hurry should not have to scroll to find a way to call. */
@media (min-width: 861px) {
  body.brand-page .r23-hero-split .hero-cta-row { display: none; }
}

/* The area-landing closing section lost its second form (the hero chooser covers every
   path), so the two-column contact grid now has one child and would otherwise leave a
   dead half-width column on desktop. */
body.brand-page .contact-grid--single { display: block; }
body.brand-page .contact-grid--single .contact-info { max-width: 640px; }

/* ============================================================
   Merged "help now" section (2026-08-13)
   ============================================================
   "Dette hjelper vi deg med" and "Hva gjør du nå" were two consecutive full-width
   sections answering one question between them, followed by a third section that
   repeated the phone number. They are one two-column block now. Related content
   belongs side by side on desktop; on mobile it stacks in reading order, help first. */
body.brand-page .b24-helpnow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3vw, 44px);
  align-items: start;
}
@media (min-width: 900px) {
  body.brand-page .b24-helpnow__grid { grid-template-columns: 1fr 1fr; gap: clamp(36px, 4vw, 64px); }
}
/* The two headings must sit on one baseline; brassrule-head carries its own top margin
   from the old stacked layout, where it followed a section instead of opening a column. */
body.brand-page .b24-helpnow__col > .brassrule-head { margin-top: 0; }
body.brand-page .b24-helpnow__col > .tl:last-child { margin-bottom: 0; }

/* The quick-help list is a multi-column list by default. Inside the merged two-column
   section that made a two-column list inside a two-column grid: five items broke 3+2
   with ragged heights and separator lines dangling past the shorter side. In this
   context it is one column. */
body.brand-page .b24-helpnow .goptions-list {
  columns: 1 !important;
  column-count: 1 !important;
  display: block;
}
/* Each item carried a leading dash AND an underline — two separators for one boundary.
   The dash stays (it marks the item), the underline goes (the gap does that job). */
body.brand-page .b24-helpnow .goptions-list > li { border-bottom: 0 !important; }
body.brand-page .b24-helpnow .goptions-list > li + li { margin-top: 14px; }
/* The summary card is a distinct object in the column, not a continuation of the list. */
body.brand-page .b24-helpnow__aside { margin-top: 28px; }

/* ============================================================
   Sticky header offset (2026-08-13)
   ============================================================
   header.iv-header is sticky and 66px tall on desktop, 70px on tablet and phone.
   Headings already carry scroll-margin-top (100px / 86px), but SECTIONS and anchor
   targets do not — so jumping to #kontakt-bunn, or any scrollIntoView, parks the first
   line of the section under the bar. On /#nar-noen-dor at 768px that put the header's
   bottom edge straight through the "NOEN HAR NETTOPP GÅTT BORT" label.

   Applied through :where() so it adds no specificity and any page-level rule still wins. */
:where(section[id], div[id], article[id], .anchor-form, .hero-eyebrow, .section-eyebrow) {
  scroll-margin-top: 94px;
}
@media (max-width: 760px) {
  :where(section[id], div[id], article[id], .anchor-form, .hero-eyebrow, .section-eyebrow) {
    scroll-margin-top: 90px;
  }
}

/* ============================================================
   #nar-noen-dor — the empty rectangle (2026-08-13)
   ============================================================
   .when-text spans 5 of 12 columns and ends at the "Ring nå" button; .when-steps spans
   6 and ran the four steps in a single stack, so at 1440 the right column was ~200px
   taller and the section carried a blank rectangle under the left one.

   Fixed by composition, not by padding: the four steps run 2x2. The right column halves
   in height, the two columns land close to level, and nothing was added to the page just
   to fill space. Borders become top-only — a bottom border per step plus a top border on
   the first is two rules meeting at every seam once the steps sit side by side. */
@media (min-width: 861px) {
  body.brand-page .when-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(24px, 2.4vw, 40px);
    margin-top: clamp(24px, 3vw, 48px);
  }
  body.brand-page .when-steps .when-step {
    border-top: 1px solid var(--hairline);
    border-bottom: 0;
  }
  body.brand-page .when-steps .when-step:first-child { border-top: 1px solid var(--hairline); }
  /* the foot line sits under both columns, not inside one of them */
  body.brand-page .when-steps .when-steps-foot { grid-column: 1 / -1; }
}

/* The closing section on service pages lost its duplicate form, so the two-column grid
   has one child. It becomes one column, and the three contact methods — phone, e-mail,
   home visit — run across instead of stacking into a tall thin strip. */
body.brand-page .contact-grid--final { display: block; }
body.brand-page .contact-grid--final .contact-info { max-width: none; }
@media (min-width: 861px) {
  body.brand-page .contact-grid--final .contact-method,
  body.brand-page .contact-grid--final > .contact-info > .contact-method { margin: 0; }
  body.brand-page .contact-grid--final .contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 28px;
    align-items: start;
  }
  /* the heading block and the advisor span the full row above the three methods */
  body.brand-page .contact-grid--final .contact-info > .section-eyebrow,
  body.brand-page .contact-grid--final .contact-info > h2,
  body.brand-page .contact-grid--final .contact-info > p,
  body.brand-page .contact-grid--final .contact-info > .trust-person { grid-column: 1 / -1; }
}

/* The .b24-cflow__dir rules that stood here are gone with the markup (2026-08-13) — see
   byra24_r23_contact_choice(). Dead selectors are how a "removed" component comes back. */

/* ---------- hero trust proof ---------- */
/* Fills the short hero column with the answer the fold has to give — why this byrå —
   using only facts already published elsewhere on the site. */
body.brand-page .b24-herotrust {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 14px; max-width: 460px;
}
body.brand-page .b24-herotrust li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15.5px; line-height: 1.45; color: var(--ink-soft);
}
body.brand-page .b24-herotrust li::before { content: none; }
body.brand-page .b24-herotrust svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; color: var(--brass-deep); }
body.brand-page .b24-herotrust strong { color: var(--ink); font-weight: 600; }

/* Two information panels that land next to each other — "Dokumenter som typisk kreves"
   and "Tid og kostnad" on the transport page — are related reference material and read
   better side by side than as two full-width slabs one after the other. */
body.brand-page .b24-panelpair { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 900px) {
  body.brand-page .b24-panelpair { grid-template-columns: 1fr 1fr; align-items: start; }
}
body.brand-page .b24-panelpair > .gblock { margin: 0; }

/* When a page carries only one of the two blocks, the section is one column at full
   content width — never a two-track grid with an empty side. */
body.brand-page .b24-helpnow__grid--single { grid-template-columns: 1fr !important; }
body.brand-page .b24-helpnow__grid--single .b24-helpnow__col { max-width: 760px; }

/* ---------- price ladder in the /priser/ hero ---------- */
/* The one argument this page has over the competition is that the numbers are published.
   They belong where the argument is made, not a screen and a half below it. Amounts are
   tabular so the three line up as a column the eye can compare in one movement. */
body.brand-page .b24-priceladder { list-style: none; margin: 26px 0 0; padding: 0; max-width: 520px; }
body.brand-page .b24-priceladder li + li { border-top: 1px solid var(--hairline); }
body.brand-page .b24-priceladder li::before { content: none; }
body.brand-page .b24-priceladder a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 13px 0; text-decoration: none; color: var(--ink);
  transition: color 160ms var(--ease);
}
body.brand-page .b24-priceladder a:hover { color: var(--petrol); }
body.brand-page .b24-priceladder a:hover .b24-priceladder__name { text-decoration: underline; text-underline-offset: 3px; }
body.brand-page .b24-priceladder__name { font-size: 16px; line-height: 1.35; }
body.brand-page .b24-priceladder__amt {
  font-family: var(--font-display), 'Fraunces', serif;
  font-size: 21px; font-weight: 400; color: var(--petrol-deep);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto;
}
body.brand-page .b24-priceladder__note {
  margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); max-width: 520px;
}
body.brand-page .b24-priceladder__note a { color: var(--petrol); font-weight: 600; }

/* The /priser/ hero is DARK. The ladder above was coloured for a paper card — ink names
   and petrol-deep amounts on a petrol background, i.e. the three numbers this page exists
   to publish were nearly invisible. Inside a dark hero it takes the ivory/brass pair the
   rest of that hero already uses. */
body.brand-page .hero:not(.hero--light) .b24-priceladder a { color: var(--ivory); }
body.brand-page .hero:not(.hero--light) .b24-priceladder li + li { border-top-color: rgba(244, 242, 234, 0.16); }
body.brand-page .hero:not(.hero--light) .b24-priceladder__name { color: var(--ivory-soft); }
body.brand-page .hero:not(.hero--light) .b24-priceladder__amt { color: var(--brass); }
body.brand-page .hero:not(.hero--light) .b24-priceladder a:hover { color: var(--ivory); }
body.brand-page .hero:not(.hero--light) .b24-priceladder a:hover .b24-priceladder__amt { color: var(--ivory); }
body.brand-page .hero:not(.hero--light) .b24-priceladder__note { color: rgba(244, 242, 234, 0.78); }
body.brand-page .hero:not(.hero--light) .b24-priceladder__note a { color: var(--brass); }