/* ============================================================
   Byrå24 — /transport-til-og-fra-utlandet/ (2026-08-13)
   ============================================================

   Scope: `main.b24-repat` only. Nothing here can reach another page —
   the class is printed by template-byra24-tjeneste-detail.php solely
   when the page carries the r23_hero_form meta flag (page 1754).

   WHAT THIS FILE IS FOR
   ---------------------
   The page had turned every piece of information into its own object:
   a chooser card beside the h1, a honey "Kort fortalt" panel, two more
   honey panels side by side, a bordered call band, a petrol call block,
   and a section per fact. Boxes were carrying the hierarchy that
   whitespace and type should carry.

   So the rules below do three things and nothing else:
     1. ONE content column, one left edge, hero to footer.
     2. Panels become type on paper — the outline is removed, the
        content and its spacing stay.
     3. Section rhythm comes from b24-rhythm.css; this file only sets
        the two places where a section must sit closer to its neighbour
        than the global step (the chooser under the hero).
   ============================================================ */

/* ------------------------------------------------------------
   1. ONE CONTENT GRID
   The site container is 1200px, but the body content of this page is a
   single ~760px measure. That left every section starting at the
   container edge with 400px of nothing to its right, and the eye read
   it as an unfinished two-column layout. Narrowing the container makes
   the measure the column: same left edge for the h1, the chooser, every
   heading and every paragraph. Header and footer are outside <main> and
   keep the full 1200px.
   ------------------------------------------------------------ */
main.b24-repat .container { max-width: 900px; }

/* ------------------------------------------------------------
   1b. TWO MEASURES AND ONE TYPE SCALE (2026-08-13, round 4)
   A design QA pass measured what this file had actually produced: SIX right
   edges (824 / 938 / 958 / 1046 / 1062 / 1122px) and TWENTY font sizes, twelve
   of them between 13.5px and 19px — six different sizes doing the single job of
   "a paragraph of explanatory text". One left edge was achieved; the measure
   never was, and a ragged right edge reads as disorder.

   So: exactly two widths and five body sizes, as tokens. Everything below draws
   from these. `ch` units are gone — with this stack 62ch computed to 744px in
   one place and never bit at all in another, so the cap was invisible.
   ------------------------------------------------------------ */
main.b24-repat {
	--b24-col: 100%;      /* section structures: headings, rules, accordion rows */
	--b24-measure: 700px; /* anything that is read or filled in */

	--b24-fs-note: 14px;
	--b24-fs-meta: 15px;
	--b24-fs-body: 16px;
	--b24-fs-lead: 18px;
	--b24-fs-head: clamp(28px, 3vw, 35px);
}

/* One section-heading size. `.gblock h2` carried its own clamp(28px, 3.4vw, 40px)
   inside .gcompose, so "Slik foregår det" rendered LARGER than "Erfaring…" on
   desktop and SMALLER on mobile — the reading order of the page changed with the
   viewport. Both selectors now resolve to the same token. */
main.b24-repat .brassrule-head,
main.b24-repat .gblock h2,
main.b24-repat .b24-cflow__h { font-size: var(--b24-fs-head); }

/* The remaining near-misses, each measured on the live page and each doing a job the scale
   already has a size for: 14.5 and 16.5 and 17 and 18.5 and 19 collapse into 15 / 16 / 18.
   Control labels and section-row titles are body size; an accordion question is a lead. */
main.b24-repat .b24-cflow__meta { font-size: var(--b24-fs-meta); }
main.b24-repat .b24-cflow__label,
main.b24-repat .b24-btn,
main.b24-repat .svc-related-title,
main.b24-repat select,
main.b24-repat option { font-size: var(--b24-fs-body); }
main.b24-repat .svc-related-desc { font-size: var(--b24-fs-meta); }
main.b24-repat .faq-item summary { font-size: var(--b24-fs-lead); }
main.b24-repat .hero-eyebrow { font-size: var(--b24-fs-body); }

/* The hero mountains are a full-bleed decoration and must not follow
   the narrowed column. */
main.b24-repat .hero-mountains { max-width: none; }

/* ------------------------------------------------------------
   2. HERO — one column, and the first thing said is what the page is
   ------------------------------------------------------------ */
main.b24-repat .hero-content { display: block; }
/* The title is 39 characters and cannot hold one line at display size. Left to itself it
   broke after "til", stranding a preposition; forced narrower it went to three lines.
   text-wrap: balance lets the browser even the two lines out, which lands the break where
   the sense breaks — what is transported / where to. The max-width is only a ceiling for
   browsers without balance, never the thing choosing the break. */
main.b24-repat .hero h1 { max-width: 22ch; text-wrap: balance; }
main.b24-repat .hero-sub { max-width: var(--b24-measure); }

/* One line where a button and two badges used to be. The call is a secondary action here —
   the choice section directly below is the hero's actual call to action. */
main.b24-repat .b24-heroline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: var(--b24-space-md) 0 0;
	font-size: var(--b24-fs-body);
	line-height: 1.5;
	color: var(--ink-soft);
}
/* inline-block + vertical padding takes the phone number from a 20px-tall tap
   target to 44px without changing where the line sits. */
main.b24-repat .b24-heroline a {
	display: inline-block;
	padding-block: 11px;
	color: var(--petrol);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
main.b24-repat .b24-heroline a:hover { color: var(--petrol-deep); }
main.b24-repat .b24-heroline__sep { color: var(--brass-deep); }
@media (max-width: 600px) {
	/* Stacked, so the number keeps a line of its own and stays easy to hit. */
	main.b24-repat .b24-heroline { flex-direction: column; gap: 4px; }
	main.b24-repat .b24-heroline__sep { display: none; }
}

/* ------------------------------------------------------------
   3. THE CONTACT CHOICE
   It follows the hero as its own step in the flow, so it opens tight
   under it rather than a full section step away — the hero's own bottom
   padding is already the separation.
   ------------------------------------------------------------ */
/* Zero on the bottom, because .b24-why below owns that gap — two sections each applying
   the full section step stack it twice, which is how a 150px band of nothing appears.
   But zero on TOP was too far: it put the chooser heading at delta 0.00px from the hero's
   bottom edge, so the page's most important block sat on the hero's seam and read as a
   leftover fragment of it. One step of clearance restores it to a section of its own. */
main.b24-repat .b24-choice { padding-block: var(--b24-space-lg) 0; }

/* The chooser is a group of controls, not a card. The controls keep
   their outlines (they are tappable); the box around them goes. */
main.b24-repat .b24-cflow {
	background: none;
	border: 0;
	padding: 0;
	max-width: var(--b24-measure);
}
/* It was an h3 at 29px with no brass rule while every other section carried an h2 at 35px
   with one — so the conversion block announced itself as less than a section. Same size,
   same rule, same weight as the rest. The rule is drawn here rather than by adding
   .brassrule-head to the markup, because the markup is shared with other pages. */
main.b24-repat .b24-cflow__h {
	font-weight: 400;
	margin-bottom: var(--b24-space-2xs);
}
main.b24-repat .b24-cflow__h::before {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: var(--brass);
	margin-bottom: 30px;
}
main.b24-repat .b24-cflow__lead {
	font-size: var(--b24-fs-body);
	max-width: var(--b24-measure);
	margin-bottom: var(--b24-space-md);
}

/* The written-enquiry option is a sentence under the three choices, not
   a fourth equal-weight row. */
main.b24-repat .b24-cflow__alt {
	margin: 8px 0 0;
	font-size: var(--b24-fs-meta);
	line-height: 1.5;
	color: var(--ink-soft);
}
main.b24-repat .b24-cflow__altbtn {
	border: 0;
	background: none;
	padding-block: 11px;   /* 23px tall was under the 44px target */
	padding-inline: 0;
	font: inherit;
	color: var(--petrol);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
main.b24-repat .b24-cflow__altbtn:hover { color: var(--petrol-deep); }

/* ------------------------------------------------------------
   4. WHY THIS BYRÅ — one section replacing three
   "Dette hjelper vi deg med", "Kort fortalt" and the missing "why us"
   are one block of type: a lead, what we do, then the facts.
   ------------------------------------------------------------ */
main.b24-repat .b24-why { padding-block: var(--b24-space-section) 0; }
main.b24-repat .b24-why > .container > .brassrule-head { margin-bottom: var(--b24-space-sm); }
main.b24-repat .b24-why__prose { max-width: var(--b24-measure); }
main.b24-repat .b24-why__prose p {
	font-size: var(--b24-fs-lead);
	line-height: 1.75;
	color: var(--ink-soft);
	margin: 0 0 var(--b24-space-sm);
}
main.b24-repat .b24-why__prose p:last-child { margin-bottom: 0; }

/* Four facts under a rule, not four icon rows.
   No middot separators: whichever side of the item the separator is drawn on, a wrapped row
   either starts or ends with a floating dot — the first attempt put "· 5,0 av 5 …" at the
   head of line two. The gap does the separating, which is one fewer mark on the page. */
main.b24-repat .b24-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 34px;
	max-width: var(--b24-measure);
	margin: var(--b24-space-block) 0 0;
	padding-top: var(--b24-space-md);
	border-top: 1px solid var(--hairline);
	font-size: var(--b24-fs-meta);
	line-height: 1.5;
	color: var(--ink-soft);
}

/* ------------------------------------------------------------
   5. THE PROCESS AND THE PRACTICAL SECTION
   One process on the page, then the reference material folded away.
   ------------------------------------------------------------ */
/* Six steps, one line. The shared list draws a rule under every step, which makes six
   stacked slabs; here a single continuous hairline runs the height of the process and the
   numerals sit in their own column to the left of it. Nothing encloses a step. */
main.b24-repat .gsteps-list {
	position: relative;
	max-width: var(--b24-measure);
	border-top: 0;
	margin-top: var(--b24-space-md);
	padding-left: 48px;
}
main.b24-repat .gsteps-list::before {
	content: "";
	position: absolute;
	left: 34px;
	top: 6px;
	bottom: 10px;
	width: 1px;
	background: var(--brass);
	opacity: 0.5;
}
main.b24-repat .gstep {
	border-bottom: 0;
	padding: 0 0 var(--b24-space-block) 0;
}
main.b24-repat .gstep:last-child { padding-bottom: 0; }
/* The numeral is absolute against .gstep, and .gstep no longer carries the shared 54px left
   padding — so left:0 put every numeral underneath its own step title. It has to be pulled
   back out by the list's whole padding to reach the numeral column left of the line. */
main.b24-repat .gstep-num {
	left: -48px;
	top: 0;
	width: 22px;
	text-align: right;
	font-size: 19px;
	line-height: 1.5;
	color: var(--brass-deep);
}
main.b24-repat .gstep strong { font-size: var(--b24-fs-lead); margin-bottom: 4px; }
main.b24-repat .gstep span { font-size: var(--b24-fs-body); line-height: 1.7; }
@media (max-width: 600px) {
	main.b24-repat .gsteps-list { padding-left: 34px; }
	main.b24-repat .gsteps-list::before { left: 24px; }
	main.b24-repat .gstep-num { left: -34px; width: 16px; font-size: 17px; }
}
/* No lead paragraph here any more: the section opened with the Latin etymology of
   "repatriering", which is not what somebody arranging a relative's transport came to read.
   It starts at the practical questions. */
/* The rows are a section structure and keep the full column; only the answer text is
   held to the reading measure. `62ch` here never bit at all — the rows were 804px while
   the prose above them was 744px, so the two disagreed by 60px for no reason. */
main.b24-repat .gaccordion .faq-grid { max-width: var(--b24-col); margin-top: var(--b24-space-md); }

/* The answer text was 19px — LARGER than the page's own argument (18px) and than the
   process steps (16.5px). Material deliberately folded away was the biggest type on the
   page. Secondary material sits at the body size, never above it.
   The row also bled 14px past the column on both sides (a shared `margin: 0 -14px`), and
   its hover state painted that oversized band grey — the most visibly wrong thing on the
   page at desktop width. The question and its own answer were staggered by 2px. */
main.b24-repat .faq-item summary { margin: 0; padding: 22px 0; }
main.b24-repat .faq-item summary:hover { background: none; color: var(--petrol-deep); }
main.b24-repat .faq-content {
	max-width: var(--b24-measure);
	padding: 4px 0 28px;
	font-size: var(--b24-fs-body);
	line-height: 1.7;
}
main.b24-repat .faq-content p { font-size: inherit; line-height: inherit; }
/* The plus glyph is rotated 45° to mean "open", which inflates its bounding box by √2 —
   the open row's marker read ~40% bigger than its neighbours'. Scale it back as it turns. */
main.b24-repat .faq-item[open] summary svg { transform: rotate(45deg) scale(0.707); }

/* The .r23-midcta rules that stood here are gone with the block itself (round 3 removed
   the mid-page call line). Dead selectors are how a removed component comes back. */

/* ------------------------------------------------------------
   6b. THE OPEN WIZARD (2026-08-13, round 4)
   The owner's words were "framed stupidly", and the frame is inherited, not designed.
   b24-contact-flow.css strips the wizard card's border, background and padding inside a
   panel — but b24-rhythm.css loads AFTER it and draws the same card an `inset 0 0 0 1px`
   ring, which that reset never touches. With padding at 0 the ring lands directly on the
   text. Nothing else on this page has an outline, so it floated.

   Everything here removes chrome or aligns the wizard to the page it now lives in.
   ------------------------------------------------------------ */

/* The inherited ring. And the inherited width: .r23-guided carries max-width:640px from
   r23-conversion.css, so the wizard sat 60px narrower than the three chooser rows directly
   above it — a step in the left-hand column's right edge, inside one component. */
main.b24-repat .b24-cflow__panel > .r23-card,
main.b24-repat .b24-cflow__panel > .r23-guided { box-shadow: none; max-width: none; }

/* The wizard repeated the label of the button that opened it, verbatim, 136px lower and
   in a different size — "Start en transportforespørsel" twice on one screen. The button
   the visitor just pressed is the heading. The intro line stays: it carries the one fact
   that matters here, that no documents are uploaded. */
main.b24-repat .b24-cflow__panel .r23-card__h { display: none; }
main.b24-repat .b24-cflow__panel .r23-card__intro {
	font-size: var(--b24-fs-body);
	max-width: var(--b24-measure);
	margin-bottom: var(--b24-space-md);
}

/* The honey call pill: the only honey object and the only bordered pill left on the page,
   inside the one component the owner was complaining about. Same inline treatment §6 gives
   the mid-page call — the number stays available mid-form, the box does not. */
main.b24-repat .b24-cflow__panel .r23-callbar {
	display: inline;
	background: none;
	box-shadow: none;
	border: 0;
	padding: 0;
	margin: 0 0 var(--b24-space-md);
	min-height: 0;
	white-space: normal;
	text-decoration: underline;
	text-underline-offset: 3px;
}
main.b24-repat .b24-cflow__panel .r23-callbar__label {
	font-size: var(--b24-fs-body);
	color: var(--petrol);
	font-weight: 600;
	margin-right: 7px;
}
main.b24-repat .b24-cflow__panel .r23-callbar__num {
	font-family: 'Instrument Sans', sans-serif;
	font-size: var(--b24-fs-body);
	color: var(--petrol);
	font-weight: 600;
}
/* An inline box ignores vertical margin, so the call line's own margin-bottom does nothing
   and it lands hard against the progress track. The gap is owned by what follows it. */
main.b24-repat .b24-cflow__panel .r23-progress { margin-top: var(--b24-space-md); }

/* Two renderings of one interaction, a quarter-screen apart: the three chooser rows are
   bordered white buttons; the three wizard options 250px below were slabs filled
   rgb(241,240,234) against a rgb(247,246,242) page — a 6/255 delta, so they read as table
   rows rather than controls. Wizard options now use the chooser's treatment exactly. */
main.b24-repat .b24-cflow__panel .r23-opt {
	min-height: 60px;
	background: #fff;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--hairline);
	border-radius: var(--radius);
}
main.b24-repat .b24-cflow__panel .r23-opt:hover { box-shadow: inset 0 0 0 1px var(--petrol); }
main.b24-repat .b24-cflow__panel .r23-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--petrol); }

/* Question, help text and field labels onto the shared scale. */
main.b24-repat .b24-cflow__panel .r23-q { font-size: 24px; }
main.b24-repat .b24-cflow__panel .r23-help,
main.b24-repat .b24-cflow__panel .r23-field label,
main.b24-repat .b24-cflow__panel .b24-field label,
main.b24-repat .b24-cflow__panel .r23-suggest { font-size: var(--b24-fs-meta); }
main.b24-repat .b24-cflow__panel .b24-cflow__note { font-size: var(--b24-fs-meta); }

/* "Tilbake" was 111px and "Neste" 101px — the secondary action wider than the primary,
   both stranded at the left of the column with the rest of the row empty. */
main.b24-repat .b24-cflow__panel .r23-nav,
main.b24-repat .b24-cflow__panel .r23-contact-actions { justify-content: space-between; }
main.b24-repat .b24-cflow__panel .r23-btn--primary { min-width: 140px; }

/* ------------------------------------------------------------
   6c. SECTION RHYTHM, BOTTOM HALF
   §3 fixed the doubled section step for .b24-choice and .b24-why and then left it in place
   below: gcompose→svc-closing and svc-closing→closing block both measured 151px against a
   75px step everywhere else. Same zeroing, applied downward.
   ------------------------------------------------------------ */
main.b24-repat .gcompose,
main.b24-repat .svc-closing { padding-block: var(--b24-space-section) 0; }

/* Row text sat 4px inside its own hairlines. */
main.b24-repat .svc-related-list a { padding-inline: 0; }

/* ------------------------------------------------------------
   7. CLOSING BLOCK — compact
   It has one job: the phone number and the person who answers it.
   ------------------------------------------------------------ */
main.b24-repat .contact-section--compact { padding-block: var(--b24-space-xl) !important; }
main.b24-repat .contact-section--compact .trust-person { margin-block: var(--b24-space-md); }
main.b24-repat .contact-section--compact .contact-info > p { max-width: 460px; }

/* ------------------------------------------------------------
   8. MOBILE
   The narrowed container is a desktop measure; below it the site's own
   padding already governs. Only the trust facts need a note: one per
   row, so a two-line fact never sits beside a one-line fact.
   ------------------------------------------------------------ */
@media (max-width: 759px) {
	main.b24-repat .b24-why__trust { grid-template-columns: 1fr; }
}