/**
 * HAVEN Child — rapid-sprint components.
 *
 * Mobile navigation, the language switch, the service system, two spotlights,
 * the repeating CTA panel and the mobile conversion bar.
 *
 * Every value resolves to a token already defined in style.css. No new colour,
 * font, radius or shadow is introduced: the density this sprint adds has to
 * come from composition, not from a second design language.
 */

/* =========================================================================
   1. MEDIA PRIMITIVES
   ========================================================================= */

/* One ratio for every card visual, so a photograph and a designed placeholder
   are interchangeable in the same grid and the row never goes ragged. */
.hvn-shot,
.hvn-ph {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hvn-primary-deep);
}

.hvn-shot img,
.hvn-ph__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   2. HEADER — desktop bar, language switch, mobile disclosure
   ========================================================================= */

/*
 * The nav carries five items now rather than three, and the actions cluster
 * carries a language switch. Both stop fitting well before the old 860px
 * breakpoint, so the bar hands over to the disclosure panel at 1024px.
 */
.hvn-lang {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: var(--hvn-tr-label);
}

.hvn-lang a,
.hvn-lang span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: var(--hvn-tap);
  padding: 0 .3rem;
  text-decoration: none;
  color: var(--hvn-text-secondary);
  border-bottom: 2px solid transparent;
}

.hvn-lang [aria-current] { color: var(--hvn-text); border-bottom-color: var(--hvn-primary); }
.hvn-lang a:hover { color: var(--hvn-text); }

/* --- burger ------------------------------------------------------------- */

.hvn-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--hvn-tap);
  height: var(--hvn-tap);
  padding: 0;
  background: transparent;
  border: 1px solid var(--hvn-border);
  border-radius: var(--hvn-radius);
  color: var(--hvn-text);
  cursor: pointer;
}

.hvn-burger__box {
  display: grid;
  gap: 4px;
  width: 1.15rem;
}

.hvn-burger__box i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--hvn-dur) var(--hvn-ease), opacity var(--hvn-dur) var(--hvn-ease);
}

.hvn-burger.is-open .hvn-burger__box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hvn-burger.is-open .hvn-burger__box i:nth-child(2) { opacity: 0; }
.hvn-burger.is-open .hvn-burger__box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- disclosure panel ---------------------------------------------------- */

.hvn-mnav {
  /* Above the header's over-hero gradient scrim (an absolutely positioned
     ::before that grows with the header and dimmed the open panel). */
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--hvn-border);
  background: var(--hvn-surface);
  padding-block: var(--hvn-s4) var(--hvn-s5);
  box-shadow: 0 28px 48px -18px rgba(20, 26, 34, .45);
}

.hvn-mnav__links { list-style: none; margin: 0; padding: 0; }

.hvn-mnav__links a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-size: var(--hvn-fs-h3);
  font-weight: 500;
  color: var(--hvn-text);
  text-decoration: none;
  border-bottom: 1px solid var(--hvn-border);
}

.hvn-mnav__links a:hover { color: var(--hvn-primary-deep); }

.hvn-mnav__foot {
  display: grid;
  gap: var(--hvn-s3);
  margin-top: var(--hvn-s5);
}

.hvn-mnav__tel,
.hvn-mnav__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hvn-tap);
  font-weight: 600;
  color: var(--hvn-text);
  text-decoration: none;
  border: 1px solid var(--hvn-border-strong);
  border-radius: var(--hvn-radius);
  font-variant-numeric: tabular-nums;
}

.hvn-mnav__tel:hover,
.hvn-mnav__wa:hover { border-color: var(--hvn-primary); }

@media (min-width: 1200px) {
  /* The panel is a small-screen affordance only; the bar above already has
     every one of its links. */
  .hvn-mnav { display: none; }
}

@media (max-width: 1199px) {
  .hvn-header__nav { display: none; }
  .hvn-header__tel { display: none; }
  .hvn-burger { display: inline-flex; }
  .hvn-header__inner { gap: var(--hvn-s3); }
  .hvn-header__actions { margin-inline-start: auto; gap: var(--hvn-s2); }
}

@media (max-width: 600px) {
  /* At phone width the quote button and the burger are the whole cluster;
     the language switch moves into the panel's own footer region visually by
     shrinking to its two glyphs. */
  .hvn-header__cta { display: none; }
  .hvn-lang a, .hvn-lang span { min-width: 1.9rem; }
}

/* The old 860px rule in style.css still hides the nav and the phone number;
   these restore them once the bar actually has room.
   1200px, not 1024px: the actions cluster alone (language switch + phone
   number + quote button) measures 468px, and with the logo and five nav items
   the bar overflowed the viewport by ~200px anywhere between 1024 and ~1280.
   The disclosure panel covers everything below this width. */
@media (min-width: 1200px) {
  .hvn-header__nav { display: block; }
  .hvn-header__tel { display: inline-flex; }
}

/* Belt and braces: even above the breakpoint the bar must never be the thing
   that widens the page. */
.hvn-header__inner { flex-wrap: wrap; }
.hvn-header__nav ul { flex-wrap: wrap; }

/* =========================================================================
   3. SERVICE SYSTEM
   ========================================================================= */

.hvn-svc { background: var(--hvn-surface-alt); }

.hvn-svc__head {
  display: grid;
  gap: var(--hvn-s5);
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: var(--hvn-s7);
}

.hvn-svc__head .hvn-lede { margin: 0; }

@media (min-width: 860px) {
  .hvn-svc__head { grid-template-columns: 1.25fr 1fr; gap: var(--hvn-s8); }
}

.hvn-svc__grid {
  display: grid;
  gap: var(--hvn-s5);
  grid-template-columns: 1fr;
}

@media (min-width: 620px)  { .hvn-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hvn-svc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hvn-svc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hvn-surface);
  border: 1px solid var(--hvn-border);
  border-radius: var(--hvn-radius-lg);
  overflow: hidden;
  transition: transform var(--hvn-dur) var(--hvn-ease), border-color var(--hvn-dur) var(--hvn-ease);
}

.hvn-svc__card:hover,
.hvn-svc__card:focus-within {
  transform: translateY(-3px);
  border-color: var(--hvn-border-strong);
}

.hvn-svc__media { position: relative; }

.hvn-svc__media .hvn-shot img { transition: transform var(--hvn-dur-slow) var(--hvn-ease); }
.hvn-svc__card:hover .hvn-shot img { transform: scale(1.035); }

/* The number sits on the artwork rather than above the title: it reads as a
   catalogue index, and it gives every card — photograph or placeholder — one
   consistent anchor point. */
.hvn-svc__num {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  background: var(--hvn-primary-deep);
  color: var(--hvn-text-invert);
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: var(--hvn-tr-label);
  font-variant-numeric: tabular-nums;
}

.hvn-svc__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--hvn-s5);
}

.hvn-svc__body h3 { margin: 0 0 var(--hvn-s3); font-size: var(--hvn-fs-h3); font-weight: 600; }
.hvn-svc__body h3 a { color: inherit; text-decoration: none; }

/* Stretch the title link across the whole card. `position: static` on the
   anchor is what lets its ::after resolve against the card. */
.hvn-svc__card--link h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hvn-svc__body p {
  margin: 0 0 var(--hvn-s5);
  color: var(--hvn-text-secondary);
  font-size: var(--hvn-fs-small);
  max-width: none;
}

/* Pushed to the foot of the card so every card in a row ends on the same
   line even though the descriptions differ in length. */
.hvn-svc__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase;
  color: var(--hvn-primary);
}

.hvn-svc__go::after {
  content: '';
  width: .5rem;
  height: .5rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate var(--hvn-dur) var(--hvn-ease);
}

.hvn-svc__card:hover .hvn-svc__go::after { translate: 3px 0; }

/* Whole-card target for the five services that have no page of their own yet:
   they route to the enquiry module rather than to a 404. */
.hvn-svc__cover { position: absolute; inset: 0; z-index: 2; }

.hvn-svc__actions { margin-top: var(--hvn-s7); }

/* =========================================================================
   4. OFFICE MOVE SPOTLIGHT
   ========================================================================= */

.hvn-office__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

.hvn-office__fig { margin: 0; }
.hvn-office__fig .hvn-shot { border-radius: var(--hvn-radius-lg); }

.hvn-office__points {
  list-style: none;
  margin: var(--hvn-s6) 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.hvn-office__points li {
  padding: var(--hvn-s4) 0;
  border-top: 1px solid var(--hvn-border);
}

.hvn-office__points li:last-child { border-bottom: 1px solid var(--hvn-border); }
.hvn-office__points h3 { margin: 0 0 var(--hvn-s1); font-size: var(--hvn-fs-body); font-weight: 600; }
.hvn-office__points p  { margin: 0; color: var(--hvn-text-secondary); font-size: var(--hvn-fs-small); max-width: 46ch; }

@media (min-width: 960px) {
  .hvn-office__grid { grid-template-columns: 1.05fr .95fr; }
  /* The photograph is the argument in this section, so it takes the wider
     column and fills its height rather than floating at 16:9 in the middle
     of a taller copy column. */
  .hvn-office__grid { align-items: stretch; }
  .hvn-office__fig { display: flex; }
  .hvn-office__fig .hvn-shot { aspect-ratio: auto; flex: 1; min-height: 28rem; }
  .hvn-office__copy { align-self: center; }
}

/* =========================================================================
   5. OPERATIONAL CREDIBILITY
   ========================================================================= */

.hvn-crew { background: var(--hvn-surface-alt); }

.hvn-crew__head {
  display: grid;
  gap: var(--hvn-s5);
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: var(--hvn-s6);
}

.hvn-crew__head .hvn-lede { margin: 0; }

@media (min-width: 860px) {
  .hvn-crew__head { grid-template-columns: 1.2fr 1fr; gap: var(--hvn-s8); }
}

.hvn-crew__strip {
  display: grid;
  gap: var(--hvn-s4);
  grid-template-columns: 1fr;
}

.hvn-crew__strip figure { margin: 0; }
.hvn-crew__strip .hvn-shot { border-radius: var(--hvn-radius-lg); }

@media (min-width: 720px) {
  .hvn-crew__strip { grid-template-columns: 1.15fr 1fr; }
}

.hvn-crew__marks {
  display: grid;
  gap: var(--hvn-s5);
  grid-template-columns: 1fr;
  margin: var(--hvn-s7) 0 0;
}

.hvn-crew__marks div { border-top: 2px solid var(--hvn-primary); padding-top: var(--hvn-s4); }
.hvn-crew__marks dt { font-size: var(--hvn-fs-h3); font-weight: 600; margin: 0 0 var(--hvn-s2); }
.hvn-crew__marks dd { margin: 0; color: var(--hvn-text-secondary); font-size: var(--hvn-fs-small); }

@media (min-width: 620px)  { .hvn-crew__marks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hvn-s5) var(--hvn-s6); } }
@media (min-width: 1000px) { .hvn-crew__marks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =========================================================================
   6. REPEATING CTA PANEL
   ========================================================================= */

.hvn-ctap {
  background: var(--hvn-primary);
  color: var(--hvn-text-invert);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.hvn-ctap--light {
  background: var(--hvn-surface-alt);
  color: var(--hvn-text);
  border-top: 1px solid var(--hvn-border);
  border-bottom: 1px solid var(--hvn-border);
}

.hvn-ctap__inner {
  display: grid;
  gap: var(--hvn-s6);
  grid-template-columns: 1fr;
  align-items: center;
}

.hvn-ctap h2 {
  /* The global h2 rule paints navy; on the navy variant that is invisible.
     Stated explicitly rather than inherited. */
  color: var(--hvn-text-invert);
  font-size: var(--hvn-fs-h2);
  line-height: var(--hvn-lh-heading);
  font-weight: 600;
  margin: 0 0 var(--hvn-s3);
  max-width: 24ch;
}

.hvn-ctap p { margin: 0; color: var(--hvn-text-invert-soft); max-width: 48ch; }

.hvn-ctap--light h2 { color: var(--hvn-text); }
.hvn-ctap--light p  { color: var(--hvn-text-secondary); }

.hvn-ctap__actions { display: flex; flex-wrap: wrap; gap: var(--hvn-s3); }

@media (min-width: 900px) {
  .hvn-ctap__inner { grid-template-columns: 1.25fr 1fr; gap: var(--hvn-s8); }
  .hvn-ctap__actions { justify-content: flex-end; }
}

/* =========================================================================
   7. MOBILE CONVERSION BAR
   ========================================================================= */

/* An author `display` declaration beats the UA's `[hidden] { display: none }`
   whatever the specificity, so the grid below made the `hidden` attribute inert
   and the bar sat over the Hero's own calls to action from the first paint.
   Stated explicitly, before the rule that would otherwise win. */
.hvn-mbar[hidden] { display: none !important; }

.hvn-mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, .18);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -1px 0 rgba(24, 42, 63, .18);
}

.hvn-mbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .15rem;
  min-height: 3.5rem;
  /* Tight enough that the two icon columns leave the quote button room for its
     label on one line at 360px. */
  padding: .4rem .7rem;
  line-height: 1.2;
  background: var(--hvn-primary-deep);
  color: var(--hvn-text-invert);
  text-decoration: none;
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase;
}

.hvn-mbar__ico { width: 1.25rem; height: 1.25rem; }

.hvn-mbar__item--cta {
  background: var(--hvn-tan);
  color: var(--hvn-primary-deep);
  font-size: .8125rem;
  letter-spacing: .01em;
  text-transform: none;
  text-wrap: balance;
}

.hvn-mbar__item:hover { filter: brightness(1.08); }

/* The bar overlays the last rows of the footer otherwise. */
body.hvn-has-mbar { padding-bottom: 3.5rem; }

@media (min-width: 768px) {
  /* The header keeps the phone number and the quote button in view at this
     width, so a second fixed copy of the same three actions is noise. */
  .hvn-mbar { display: none !important; }
  body.hvn-has-mbar { padding-bottom: 0; }
}

/* =========================================================================
   8. MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hvn-svc__card,
  .hvn-svc__media .hvn-shot img,
  .hvn-svc__go::after,
  .hvn-burger__box i { transition: none; }
  .hvn-svc__card:hover { transform: none; }
  .hvn-svc__card:hover .hvn-shot img { transform: none; }
  .hvn-svc__card:hover .hvn-svc__go::after { translate: 0; }
}

/* =========================================================================
   9. FOOTER — information-rich variant
   The footer previously carried four short label columns and nothing to act
   on. It now carries the brand statement, a real service index, contact,
   area/languages and the language switch, so it works as the second
   navigation the page never otherwise offers.
   ========================================================================= */

.hvn-footer__top {
  display: grid;
  gap: var(--hvn-s7);
  grid-template-columns: 1fr;
}

.hvn-footer__brand { max-width: 34rem; }
.hvn-footer__logo { margin-bottom: var(--hvn-s4); }

.hvn-footer__pitch {
  color: rgba(255, 255, 255, .82);
  margin: 0 0 var(--hvn-s5);
  max-width: 42ch;
}

/* On navy the primary button inverts to white-on-navy via .hvn-invert, which
   the footer is not — stated directly instead. */
.hvn-footer .hvn-btn--primary {
  background: var(--hvn-tan);
  border-color: var(--hvn-tan);
  color: var(--hvn-primary-deep);
}
.hvn-footer .hvn-btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--hvn-primary-deep);
}

.hvn-footer__lang { margin: var(--hvn-s4) 0 0; font-size: var(--hvn-fs-small); }
.hvn-footer__lang a { color: rgba(255, 255, 255, .82); }
.hvn-footer__lang a:hover { color: #fff; }

.hvn-footer__grid .hvn-footer__addr { margin-top: var(--hvn-s4); font-size: var(--hvn-fs-small); }

@media (min-width: 960px) {
  .hvn-footer__top { grid-template-columns: .85fr 1.6fr; gap: var(--hvn-s8); }
}

/* =========================================================================
   10. CTA COLOUR SYSTEM — one rule, stated once
   The primary button is navy. On a navy surface that is a navy button on a
   navy ground: the label was the only visible part, so the strongest call to
   action on the page read as plain text. Sections built on .hvn-invert already
   re-point the token; .hvn-ctap, .hvn-band and the footer do not, so they state
   it directly.

   The system is: TAN is the primary action on navy, NAVY is the primary action
   on light. The mobile bar and the footer already follow it; this brings the
   dark CTA panel into line instead of leaving it a special case.
   ========================================================================= */

.hvn-ctap:not(.hvn-ctap--light) .hvn-btn--primary {
  background: var(--hvn-tan);
  border-color: var(--hvn-tan);
  color: var(--hvn-primary-deep);
}

.hvn-ctap:not(.hvn-ctap--light) .hvn-btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--hvn-primary-deep);
}

/* =========================================================================
   11. RHYTHM CORRECTIONS
   ========================================================================= */

/* The service-area copy column runs out well before the motif column does, and
   `align-items: center` then parks both in the middle of a section sized to the
   taller one. Aligning to the top closes the gap the copy was floating in. */
@media (min-width: 900px) {
  .hvn-area__grid { align-items: center; }
  .hvn-area__fig { align-self: center; }
}

.hvn-area .hvn-facts--tight { margin-bottom: 0; }

/* The FAQ column is capped at the reading measure, which is right for the
   answers and leaves the section looking half-empty at desktop width. A heading
   column beside it uses the space for something rather than nothing. */
.hvn-faqwrap {
  display: grid;
  gap: var(--hvn-s6);
  grid-template-columns: 1fr;
  align-items: start;
}

.hvn-faqwrap .hvn-faq { max-width: none; }

.hvn-faqwrap__aside p { color: var(--hvn-text-secondary); max-width: 34ch; }

@media (min-width: 900px) {
  .hvn-faqwrap { grid-template-columns: .8fr 1.4fr; gap: var(--hvn-s8); }
}

/* =========================================================================
   12. EVEN ROWS
   Two images of the same aspect ratio in columns of different widths are not
   the same height, so the strip's bottom edge came out ragged with a band of
   empty surface under the narrower one. Stretching both to the row height and
   cropping to fill closes it.
   ========================================================================= */

@media (min-width: 720px) {
  .hvn-crew__strip { align-items: stretch; }
  .hvn-crew__strip figure { display: flex; }
  .hvn-crew__strip .hvn-shot { aspect-ratio: auto; flex: 1; min-height: 20rem; }
}

/* The four credibility headings are one or two lines depending on the string,
   which started their bodies at four different heights. Same floor as the
   process rail uses, for the same reason. */
@media (min-width: 620px) {
  .hvn-crew__marks dt { min-height: calc(var(--hvn-fs-h3) * 2 * var(--hvn-lh-heading)); }
}

/* The two vehicle thumbnails are portrait photographs of different heights and
   sat in a grid that let each keep its own, so the pair ended ragged. */
.hvn-thumbs img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* =========================================================================
   13. TWO LAST RHYTHM CORRECTIONS
   ========================================================================= */

/* Stretching the clearance still to the full height of a copy column roughly
   twice as tall cropped a 16:9 close-up down to an unreadable detail. Capping
   the height keeps the two columns reading as one composition without zooming
   the photograph past the point where the subject is recognisable. */
@media (min-width: 960px) {
  /* Top-aligned rather than centred: the copy column runs to ~1280px and a
     centred 350px image floats in the middle of the dark panel with nothing
     near it. Aligned to the top it pairs with the heading, and a fixed 30rem
     height gives it enough presence without cropping the close-up past the
     point where the subject reads. */
  .hvn-clear__fig { align-items: flex-start; }
  .hvn-clear__fig img { height: 30rem; min-height: 0; max-height: none; }
}

/* The service area and the FAQ are both paper, so between them sat two full
   section paddings of undifferentiated white — the "dead space" the brief
   warns about, produced by rhythm rather than by missing content. Moving the
   area onto the alt surface restores the alternation:
   assurance (navy) -> area (grey) -> FAQ (paper) -> CTA (grey) -> band (navy). */
.hvn-area { background: var(--hvn-surface-alt); }


/* =========================================================================
   14. LONG GERMAN COMPOUNDS
   "Transportaufgabe." set at the display size is wider than a 320px content
   column, so the clearance heading pushed the page 13px wider than a 360px
   viewport. German hyphenates well and the document declares its language, so
   the browser can break the word properly rather than letting it hang out.
   ========================================================================= */

.hvn-display,
.hvn-display--sm,
.hvn-cine h1,
h1, h2 {
  overflow-wrap: break-word;
  hyphens: auto;
  /* PHASE 5 (2026-09-18). German headings need hyphenation — "Event- &
     Messetransport" has nowhere else to break — but the same rule was splitting
     ordinary English words, and the Human Owner saw "vehi-cle". A minimum word
     length of eight characters keeps every German compound hyphenating and
     leaves short English words whole ("vehicle" is seven). Where the property
     is unsupported, behaviour is unchanged. */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: 8 4 4;
}

/* The skip link is still positioned at left:-9999px in style.css — the same
   pattern that pushed the document canvas wider than the viewport when the
   honeypot used it. It is not currently measurable, because negative-left
   content does not extend an LTR scroll area, but the clip-based pattern has
   no such failure mode in any direction. */
.hvn-skip-link:not(:focus) {
  clip-path: inset(50%);
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.hvn-skip-link:focus { clip-path: none; width: auto; height: auto; }

/* =========================================================================
   15. REAL PHOTOGRAPHY — conversion band
   The contact band gains the rear of the real Sprinter, which carries the same
   phone number and WhatsApp route the band offers. It is a third column only
   where there is genuinely room for one; below that it is removed rather than
   squeezed, because three columns in a 900px band is clutter, not density.
   ========================================================================= */

.hvn-band__fig { margin: 0; display: none; }

.hvn-band__fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--hvn-radius-lg);
  display: block;
}

/* 1300px, not 1100px: measured at 1100 and 1200 the phone number still broke
   across two lines once a third column took its share. The photograph is worth
   having only where it costs the conversion tiles nothing. */
@media (min-width: 1300px) {
  .hvn-band__fig { display: block; align-self: stretch; }
  .hvn-band__grid { grid-template-columns: .8fr 1.05fr 1fr; gap: var(--hvn-s6); align-items: center; }
  /* With a third column taking its share, three action tiles side by side are
     each about 110px wide and the phone number broke across four lines.
     Stacked, every tile gets the full column and the number sits on one. */
  .hvn-band__actions { grid-template-columns: 1fr; gap: var(--hvn-s3); }
  .hvn-band__link { flex-direction: row; align-items: baseline; gap: var(--hvn-s4); }
  .hvn-band__kind { flex: none; min-width: 6.5rem; }
}

/* The three conversion tiles were laid out three-across from 800px up, which
   gave each about 120px of content width between 1000 and 1300px and broke
   "+43 664 390 77 46" across three lines. Pre-existing, and unrelated to the
   photograph — measured at 1024px (3 lines) and 1200px (2 lines) with the
   figure hidden. Stacked at every width below the three-column band, the
   number always sits on one line and each tile gets a real tap target. */
@media (max-width: 1299px) {
  .hvn-band__actions { grid-template-columns: 1fr; gap: var(--hvn-s3); }
  .hvn-band__link { flex-direction: row; align-items: baseline; gap: var(--hvn-s4); flex-wrap: wrap; }
  .hvn-band__kind { flex: none; min-width: 6.5rem; }
}

.hvn-band__val { white-space: nowrap; }