@font-face {
  font-family: 'Veluwe Display Clean';
  src: url('/outputs/veluwe-font/VeluweDisplay-Regular.woff2?v=0.4-16faabf3f13c') format('woff2');
  font-style: normal; font-weight: 400; font-display: block;
}
.hero__landscape { z-index: 2; }
.hero__foreground { z-index: 3; }
.hero__copy-window,.hero__controls-window {
  position: absolute; left: 50%; top: 50%; width: 100vw; height: 100svh;
  transform: translate(-50%, -50%); z-index: 1; pointer-events: none;
}
.hero__controls-window { z-index: 4; }
.hero__headline {
  position: absolute; left: var(--headline-x, 50%); top: var(--headline-y, 42%);
  transform: translate(-50%, -50%); margin: 0; width: max-content;
  font: 400 calc(var(--headline-size, 10.4) * 1vw)/.82 'Veluwe Display Clean';
  text-align: center; color: #0756A6; letter-spacing: 0; text-transform: uppercase;
  -webkit-mask-image: none; mask-image: none; user-select: none;
}
.hero__headline span { display: block; }
.hero__headline span:nth-child(1) { font-size: 1em; }
.hero__headline span:nth-child(2) { font-size: .4em; letter-spacing: .025em; margin-top: .24em; }
[data-theme="night"] .hero__headline { color: #F3E6C8; }
.hero__cta {
  position: absolute; left: var(--button-x, 50%); top: var(--button-y, 60.5%);
  transform: translate(-50%, -50%); width: calc(var(--button-size, 23.5) * 1vw);
  max-width: none; pointer-events: auto;
}
.hero__cta-label {
  position: absolute; inset: 0; display: flex; gap: .5em; align-items: center; justify-content: center;
  color: #F3E6C8; font: 400 calc(var(--button-size, 23.5) * .071vw)/1.2 Georgia, serif;
  white-space: nowrap; pointer-events: none; z-index: 1;
}
.hero__cta-label span { font-family: Georgia, serif; }
.hero-layout-toggle {
  position: absolute; bottom: 18px; left: 20px; z-index: 5; border: 1px solid #123c3250;
  background: #F3E6C8; color: #123C32; padding: 9px 13px; font: 12px/1.3 system-ui,sans-serif;
}
.hero-layout-panel {
  position: fixed; bottom: 60px; left: 20px; width: min(320px, calc(100vw - 40px));
  max-height: calc(100svh - 155px); overflow: auto; z-index: 20; color: #123C32;
  background: #F3E6C8; border: 1px solid #123c3260; box-shadow: 0 12px 40px #123c3230;
  padding: 16px; font: 13px/1.45 system-ui,sans-serif;
}
.hero-layout-panel[hidden] { display: none; }
.hero-layout-panel header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero-layout-panel header strong { font-size: 16px; }
.hero-layout-panel button { font: inherit; padding: 7px 10px; border: 1px solid #123c3260; background: transparent; color: #123C32; }
.hero-layout-panel header button { font-size: 20px; padding: 0 7px; border: 0; }
.hero-layout-panel p { margin: 8px 0 14px; }
.hero-layout-tabs { display: flex; gap: 7px; margin-bottom: 16px; }
.hero-layout-tabs button { flex: 1; }
.hero-layout-tabs [aria-pressed="true"] { color: #F3E6C8; background: #123C32; }
.hero-layout-panel label { display: block; margin: 13px 0; }
.hero-layout-panel output { float: right; font-variant-numeric: tabular-nums; }
.hero-layout-panel input { display: block; width: 100%; margin: 7px 0 0; accent-color: #0756A6; }
.hero-layout-panel footer { display: flex; gap: 8px; margin: 18px 0 10px; }
.hero-layout-panel footer button { flex: 1; font-size: 11px; }
.hero-layout-panel small { opacity: .8; }
.hero-layout-panel button:focus-visible,.hero-layout-toggle:focus-visible { outline: 2px solid #0756A6; outline-offset: 3px; }
html.is-hero-layout-editing [data-layout-item] { pointer-events: auto; touch-action: none; cursor: grab !important; }
html.is-hero-layout-editing [data-layout-item].is-layout-selected { outline: 1px dashed currentColor; outline-offset: 8px; }
html.is-hero-layout-dragging,html.is-hero-layout-dragging * { cursor: grabbing !important; }
@media (max-width: 700px) {
  /* Keep the shorter title readable when the registered fox fills the phone crop. */
  .hero__copy-window { z-index: 4; }
  .hero__headline { left: var(--headline-x, 50%); top: var(--headline-y, 36%); font-size: calc(var(--headline-size, 19.5) * 1vw); }
  .hero__headline { -webkit-text-stroke: 1.2px #F3E6C8; paint-order: stroke fill; }
  [data-theme="night"] .hero__headline { -webkit-text-stroke-color: #123C32; }
  .hero__cta { left: var(--button-x, 50%); top: var(--button-y, 47.5%); width: calc(var(--button-size, 58) * 1vw); }
  .hero__cta-label { font-size: calc(var(--button-size, 58) * .071vw); }
}

/* Placement tools belong to explicit editor mode, never the normal homepage. */
.hero-layout-toggle[hidden],.hero-layout-panel[hidden]{display:none!important}
