@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-300.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2')}

:root{
  --ink:#0f1d18; --deep:#0a1410; --panel:#132420;
  --sand:#d7b78b; --sand-lit:#eac9a0; --terracotta:#ba6548;
  --cream:#eae4d6; --muted:#8fa096; --body:#b7c4bb; --dim:#c4cfc6;
  --paper:#fbf8f1; --blush:#f7e5da; --blush-lit:#f3d9c9;
  --body-dim:#a9b7ad; --faint:#6f8078; --faint-deep:#5f6f67;
  --stripe-a:#1e352c; --stripe-b:#16281f;
  --invert-hover:#0f1d18;
  /* rgb triples, for the alpha variants of the colours above */
  --ink-rgb:15,29,24; --deep-rgb:10,20,16; --sand-rgb:215,183,139;
  --cream-rgb:234,228,214; --paper-rgb:251,248,241; --terracotta-rgb:186,101,72;
  --line-rgb:215,183,139;
  --line:rgba(var(--line-rgb),.22); --line-mid:rgba(var(--line-rgb),.35);
  --pad: clamp(20px, 4vw, 84px); --sec:clamp(56px,8vw,96px);
  /* Shared main/aside split, so every bordered aside starts on the same x. */
  --split: 1.15fr .85fr; --split-gap: clamp(36px,6vw,96px);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);
  font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
a{color:var(--sand);text-decoration:none}
a:hover{color:var(--sand-lit)}
img{display:block;max-width:100%;height:auto}
input,textarea,button,select{font:inherit}
::placeholder{color:var(--faint)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:8px;z-index:60;background:var(--sand);color:var(--ink);padding:10px 16px}

/* --- shared type --- */
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.kicker--wide{letter-spacing:.2em}
.kicker--light{color:var(--blush-lit)}
.label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.num{font-family:var(--mono);font-size:12px;color:var(--terracotta)}
.h1{font-weight:300;font-size:clamp(36px,5.2vw,72px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.h2{font-weight:300;font-size:clamp(30px,3.6vw,46px);line-height:1.13;letter-spacing:-.03em;text-wrap:balance}
.h3{font-weight:300;font-size:clamp(26px,2.9vw,38px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:var(--dim);text-wrap:pretty}
.prose-lead{font-size:clamp(17px,1.6vw,21px);line-height:1.6;font-weight:300;color:var(--cream);text-wrap:pretty}
.prose p{font-size:15px;line-height:1.85;color:var(--body);text-wrap:pretty}
.prose{display:flex;flex-direction:column;gap:26px;max-width:820px;min-width:0}

.btn{display:inline-flex;align-items:center;height:54px;padding:0 30px;border:0;cursor:pointer;
  background:var(--sand);color:var(--ink);font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .18s ease,color .18s ease}
.btn:hover{background:var(--sand-lit);color:var(--ink)}
.btn--invert{background:var(--paper);color:var(--terracotta)}
.btn--invert:hover{background:var(--invert-hover);color:var(--paper)}
.textlink{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1px solid rgba(var(--line-rgb),.5);padding-bottom:3px}

/* --- header --- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(var(--deep-rgb),.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,24px);flex-wrap:wrap;padding:clamp(14px,2vw,20px) var(--pad)}
.brand{display:flex;align-items:baseline;gap:14px;color:var(--cream)}
.brand:hover{color:var(--cream);opacity:.75}
.brand__name{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.brand__place{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.header__right{display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.nav{display:flex;gap:clamp(13px,2vw,30px);font-size:clamp(12px,1.1vw,13px);white-space:nowrap}
.nav a{color:var(--dim)}
.nav a:hover,.nav a[aria-current]{color:var(--sand)}
.lang{display:flex;gap:12px;padding-left:clamp(14px,2vw,26px);
  border-left:1px solid rgba(var(--line-rgb),.3);font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang a{color:var(--muted)}
.lang a:hover{color:var(--sand)}
.lang a[aria-current]{color:var(--sand);border-bottom:1px solid var(--sand);padding-bottom:2px}

/* --- image placeholders --- */
.slot{position:relative;background:var(--panel);display:flex;align-items:flex-end;padding:22px;overflow:hidden}
.slot::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,var(--stripe-a) 0 14px,var(--stripe-b) 14px 28px)}
.slot::after{content:"";position:absolute;inset:18px;border:1px dashed var(--line-mid)}
.slot__note{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(var(--cream-rgb),.6);line-height:1.6;max-width:290px}
.slot--service{min-height:600px}
.slot--about{min-height:520px}
.slot--map{min-height:320px;min-width:0}

/* --- hero --- */
.hero{position:relative;height:clamp(520px,68vh,760px);border-bottom:1px solid var(--line);
  background:var(--panel);overflow:hidden}
.hero__map{position:absolute;top:0;bottom:0;right:clamp(0px,18vw,340px);
  width:clamp(0px,calc((100vw - 500px) * 1.3),780px);opacity:.8;pointer-events:none;
  padding:clamp(20px,3vw,44px) 0;box-sizing:border-box}
.hero__map svg{width:100%;height:100%;display:block}
.hero__wash{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(var(--ink-rgb),.97) 0%,rgba(var(--ink-rgb),.86) 24%,rgba(var(--ink-rgb),0) 56%)}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(var(--deep-rgb),.7),rgba(var(--deep-rgb),.25) 45%,rgba(var(--deep-rgb),.94))}
.hero__in{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--pad) clamp(36px,5vw,60px)}
.hero h1{margin-top:26px;font-weight:300;font-size:clamp(34px,6.4vw,84px);
  line-height:.98;letter-spacing:-.04em;max-width:900px;text-wrap:balance}
.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,60px);margin-top:34px;flex-wrap:wrap}
.hero__foot p{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--dim);max-width:560px;text-wrap:pretty}

/* --- terms strip --- */
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(16px,2.4vw,36px);padding:clamp(16px,1.8vw,20px) var(--pad);
  background:var(--deep);border-bottom:1px solid var(--line)}
.terms p{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--sand)}

/* --- sections --- */
.sec{padding:var(--sec) var(--pad);border-bottom:1px solid var(--line)}
.sec--deep{background:var(--deep)}
.sec--split{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,5vw,80px)}
.sec--split > *{min-width:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);margin-top:44px}
.two-col p{font-size:15px;line-height:1.85;color:var(--body);text-wrap:pretty}

/* Same 1fr 2fr grid and gap as .sec--split on the about page. It used to be
   a flex row with the heading pinned to 340px, which gave the title no room
   to breathe and a smaller gap — visibly cramped in German, where
   "Ein verlässliches System im Hintergrund" wraps to five lines in 340px. */
.service{background:var(--deep);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,5vw,80px);
  padding:clamp(56px,8vw,96px) var(--pad)}
.service > *{min-width:0}
/* No max-width: the heading fills its column, as the about page's does. The
   old 480px cap was dormant while the column was pinned to 340px, and only
   started biting once the column grew. */
.service__head h2{margin:22px 0 0;font-weight:300;font-size:clamp(30px,3.6vw,46px);
  line-height:1.13;letter-spacing:-.03em;text-wrap:balance}
.duty{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:24px 0;border-top:1px solid rgba(var(--line-rgb),.24)}
.duty:last-child{border-bottom:1px solid rgba(var(--line-rgb),.24)}
.duty h3{margin-bottom:8px;font-weight:400;font-size:21px}
.duty p{font-size:14px;line-height:1.75;color:var(--body-dim)}

.engagement{background:var(--terracotta);color:var(--paper);padding:clamp(52px,7vw,84px) var(--pad);
  display:grid;grid-template-columns:var(--split);gap:var(--split-gap);align-items:center}
.engagement > *{min-width:0}
.engagement h2{margin:22px 0 0;max-width:620px}
.engagement__text{margin-top:24px;font-size:clamp(15px,1.3vw,17px);line-height:1.75;color:var(--blush);max-width:620px;text-wrap:pretty}
.price-box{border-left:1px solid rgba(var(--paper-rgb),.4);padding-left:clamp(22px,3vw,44px)}
.price{margin-top:14px;font-weight:300;font-size:clamp(24px,2.3vw,30px);letter-spacing:-.02em;line-height:1.3;max-width:22ch;text-wrap:pretty}
.price-rule{height:1px;background:rgba(var(--paper-rgb),.4);margin:28px 0}
.price-note{font-size:13px;line-height:1.7;color:var(--blush)}

.coverage{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,56px);min-width:0}
.coverage div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:15px 0;border-top:1px solid var(--line);font-size:21px;font-weight:300}
.coverage div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.coverage div:last-child{color:var(--muted)}
.coverage span:last-child{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

.enquiry{display:grid;grid-template-columns:var(--split);gap:var(--split-gap)}
.enquiry > *{min-width:0}
.enquiry h2{margin:24px 0 34px;font-weight:300;font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;letter-spacing:-.03em;max-width:520px;text-wrap:balance}
.aside{border-left:1px solid var(--line);padding-left:clamp(22px,3vw,44px)}
.steps{display:flex;flex-direction:column;gap:26px;margin-top:26px}
.step{display:grid;grid-template-columns:34px 1fr;gap:14px}
.step span:last-child{font-size:15px;line-height:1.7;color:var(--body)}
.aside__more{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.aside__more p{font-size:14px;line-height:1.8;color:var(--muted)}
.aside__more .textlink{margin-top:12px}

/* --- forms --- */
.form{display:flex;flex-direction:column;gap:26px;max-width:620px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{display:flex;flex-direction:column;gap:9px}
.field > span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input{border:0;border-bottom:1px solid rgba(var(--line-rgb),.45);background:transparent;
  padding:9px 0;font-size:15px;color:var(--cream);outline:none;border-radius:0}
.field input:focus{border-bottom-color:var(--sand)}
.field textarea{border:1px solid rgba(var(--line-rgb),.32);background:transparent;padding:14px;
  font-size:15px;color:var(--cream);outline:none;resize:vertical}
.field textarea:focus{border-color:var(--sand)}
.privacy{font-size:12px;line-height:1.6;color:var(--muted)}
.form .btn{align-self:flex-start;height:52px}
.honeypot{position:absolute;left:-9999px}
.notice{border:1px solid var(--line-mid);padding:34px;max-width:560px}
.notice h2{margin:18px 0 14px;font-weight:300;font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.02em}
.notice p{margin-top:16px;font-size:16px;line-height:1.75;color:var(--body)}
.error{border-color:rgba(var(--terracotta-rgb),.7)}
.error .kicker{color:var(--terracotta)}

/* --- about --- */
.about-hero{display:grid;grid-template-columns:2fr 1fr;border-bottom:1px solid var(--line)}
.about-hero__copy{padding:clamp(56px,8vw,110px) var(--pad);display:flex;
  flex-direction:column;justify-content:center;min-width:0}
.about-hero__copy h1{margin-top:26px;max-width:900px}
.about-hero__copy .lead{margin-top:30px;max-width:600px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,4vw,64px)}
.facts div{border-top:1px solid rgba(var(--line-rgb),.24);padding-top:22px}
.facts p{margin-top:12px;font-weight:300;font-size:26px}
.cta-band{background:var(--terracotta);color:var(--paper);padding:clamp(52px,7vw,84px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(28px,4vw,64px);flex-wrap:wrap}
.cta-band h2{max-width:680px;font-size:clamp(28px,3.4vw,44px);line-height:1.1}

/* --- contact --- */
.contact-top{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.contact-top > *{min-width:0}
.contact-intro{background:var(--deep);padding:clamp(48px,7vw,96px) var(--pad);
  display:flex;flex-direction:column;justify-content:center}
.contact-intro h1{margin-top:26px;font-size:clamp(34px,4.6vw,62px);max-width:560px}
.contact-intro .lead{margin-top:28px;max-width:520px;font-size:clamp(16px,1.3vw,18px);line-height:1.7}
.details{margin-top:44px;padding-top:30px;border-top:1px solid rgba(var(--line-rgb),.24);
  display:grid;grid-template-columns:1fr 1fr;gap:28px}
.details p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--cream)}
.details__caveat{margin-top:26px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.contact-form{padding:clamp(48px,7vw,96px) var(--pad)}
.contact-form h2{margin-bottom:34px;font-weight:300;font-size:clamp(26px,2.8vw,36px);
  line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.contact-bottom{padding:clamp(48px,7vw,88px) var(--pad);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);border-bottom:1px solid var(--line)}
.contact-bottom > *{min-width:0}

/* --- footer --- */
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding:26px var(--pad);background:var(--deep);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.site-footer nav{display:flex;gap:22px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--sand)}

@media (max-width:1000px){
  .terms{grid-template-columns:repeat(2,1fr)}
  .terms div:nth-child(2n){border-right:0}
  .terms div{border-bottom:1px solid var(--line)}
  .sec--split,.service,.engagement,.enquiry,.about-hero,.contact-top,.contact-bottom,.facts{grid-template-columns:1fr}
  .slot--service{min-height:340px;order:-1}
  .aside,.price-box{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:34px}
  .price-box{border-top-color:rgba(var(--paper-rgb),.4)}
  .facts{gap:24px}
  .about-hero__copy{order:-1}
}
@media (max-width:640px){
  .terms{grid-template-columns:1fr}
  .terms div{border-right:0}
  .two-col,.coverage,.form__row,.details{grid-template-columns:1fr}
  .coverage div:nth-last-child(-n+2){border-bottom:0}
  .coverage div:last-child{border-bottom:1px solid var(--line)}
  .nav{gap:14px;font-size:12px}

  /* The hero map is sized from calc((100vw - 500px) * 1.3), so below a 500px
     viewport it clamps to zero width and the hero renders empty on a phone
     in portrait. Fill the hero instead, the way .daysec__map fills its
     section on the about page — that one has always worked on mobile.
     The wash also flips from a left-to-right gradient (which only makes
     sense beside a right-hand map) to a vertical one that keeps the
     headline legible over the island. */
  .hero__map{inset:0;width:auto;right:0;opacity:.5;padding:clamp(28px,9vw,52px) 0}
  .hero__wash{background:linear-gradient(to bottom,
    rgba(var(--ink-rgb),0) 0%,rgba(var(--ink-rgb),.35) 45%,rgba(var(--ink-rgb),.9) 100%)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.site-footer__attr{color:var(--faint-deep)}

.site-footer__legal{display:flex;gap:22px}
.legal-page{padding:clamp(56px,8vw,110px) var(--pad);border-bottom:1px solid var(--line)}
.legal-page h1{margin-top:24px;font-weight:300;font-size:clamp(32px,4.4vw,58px);line-height:1.04;letter-spacing:-.035em;max-width:720px;text-wrap:balance}
.legal-page__lead{margin-top:26px;font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:var(--dim);max-width:620px;text-wrap:pretty}
.legal-page__flag{margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta)}
.legal-sec{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,72px);padding:clamp(48px,7vw,90px) var(--pad);border-bottom:1px solid var(--line)}
.legal-sec__label{flex:0 0 auto;width:min(100%,260px)}
.legal-sec__body{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:20px;max-width:760px}
.legal-sec__body p{font-size:15px;line-height:1.85;color:var(--body);text-wrap:pretty}
.legal-sec__body strong{font-weight:400;color:var(--cream)}
.legal-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(28px,4vw,56px);padding:clamp(48px,7vw,90px) var(--pad);border-bottom:1px solid var(--line)}
.legal-facts div{border-top:1px solid var(--line-mid);padding-top:20px}
.legal-facts p{margin-top:12px;font-size:17px;line-height:1.5;color:var(--cream)}
.legal-updated{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* contact: intro column carries the process, bottom-aligned with the button */
.contact-direct{margin-top:26px;font-size:15px;line-height:1.7;color:var(--dim)}
.contact-steps{margin-top:auto;padding-top:30px;border-top:1px solid var(--line-mid)}
.contact-intro{justify-content:flex-start}

/* contact: closing story band */
.story-band{background:var(--terracotta);color:var(--paper);display:flex;flex-wrap:wrap;
  gap:clamp(32px,5vw,80px);align-items:flex-start;padding:clamp(48px,7vw,84px) var(--pad)}
.story-band h2{flex:1 1 380px;min-width:0;font-weight:300;font-size:clamp(28px,3.2vw,42px);
  line-height:1.1;letter-spacing:-.03em;max-width:520px;text-wrap:balance}
.story-band > div{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;
  gap:24px;align-items:flex-start}
.story-band p{font-size:clamp(15px,1.3vw,17px);line-height:1.75;color:var(--blush);max-width:560px;text-wrap:pretty}
.textlink--invert{color:var(--paper);border-bottom-color:rgba(var(--paper-rgb),.5)}

/* about: facts row slimmed */
.facts{padding:clamp(30px,3.4vw,40px) var(--pad);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(20px,3vw,44px)}
.facts div{border-top:1px solid var(--line-mid);padding-top:16px}
.facts p{margin-top:8px;font-weight:300;font-size:20px}

/* No 1680px cap on main, the header inner or the footer.
   It used to sit on all three, but the sticky .site-header itself was never
   capped — so its bar ran edge to edge while every band inside main (the
   terracotta CTA, contact-intro, the footer) stopped short and floated in a
   gutter of bare page background. Everything is now full-bleed and aligned
   on --pad. Line length is still protected per element: .prose is 820px,
   .lead 560px, headings 900px, so the measure never runs away even on an
   ultrawide display. */

/* form: validation and delivery states */
.notice{border:1px solid var(--line-mid);padding:30px}
.notice .kicker{color:var(--sand)}
.notice h2{margin:16px 0 12px;font-weight:300;font-size:clamp(24px,2.4vw,32px);line-height:1.15}
.notice p{margin:0;font-size:16px;line-height:1.75;color:var(--body)}
.notice.error{border-color:rgba(var(--terracotta-rgb),.55);background:rgba(var(--terracotta-rgb),.08);
  padding:18px 20px;margin-bottom:32px}
.notice.error .kicker{color:var(--terracotta)}
.notice.error p{font-size:14px;line-height:1.65}
.field--error input,.field--error textarea{border-color:var(--terracotta)}
.field--error input{border-bottom-color:var(--terracotta)}
.field__err{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the mark */
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{display:flex;flex:0 0 auto;color:var(--sand)}
.brand__mark .mark{display:block}
.site-footer__brand{display:inline-flex;align-items:center;gap:11px}
.site-footer__mark{display:flex;color:var(--sand);opacity:.9}
.site-footer__mark .mark{display:block}
.mark text{font-family:var(--mono);font-weight:400}

/* ---- decorative island ------------------------------------------------- */
/* the custom element must fill its box: its internal svg is height:100% */
hero-map{display:block;width:100%;height:100%}

.daysec{position:relative;height:clamp(300px,42vh,480px);background:var(--ink);
  border-bottom:1px solid var(--line);overflow:hidden}
.daysec__map{position:absolute;inset:0;padding:clamp(18px,3vw,40px) 0;
  box-sizing:border-box;pointer-events:none}
.daysec__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--ink-rgb),.55),
    rgba(var(--ink-rgb),0) 42%,rgba(var(--ink-rgb),.72))}