/* ============================================================
   The Reichmann Co. design system
   One typeface. One hue axis. Two accents, strictly scoped.
   No drop shadows: depth is a hairline plus a luminance step.
   Every text pairing clears WCAG AA; ratios recorded inline.

    1. Font face
    2. Tokens
    3. Reset + base
    4. Focus / a11y
    5. Nav
    6. Links + buttons
    7. Shell + sections
    8. Hero
    9. Proof band + figures
   10. Cards + grids
   11. Dachshund brand
   11b. Lumarix brand
   11c. Product imagery
   12. Prose + legal
   13. Forms
   14. Footer
   15. Motion
   16. Responsive
   ============================================================ */

/* ---------- 1. FONT FACE ------------------------------------
   Instrument Sans, SIL OFL 1.1, self-hosted, latin only.
   One rule, one file, variable 400-700. Afrikaans and English
   diacritics all live in U+0000-00FF, so no latin-ext needed.
   ------------------------------------------------------------ */
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(/fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 2. TOKENS --------------------------------------- */
:root{
  --font:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* light surfaces */
  --page:#ffffff;
  --surface:#f1f3f6;

  /* text on light */
  --ink:#0f1216;            /* 18.78:1 on page */
  --ink-2:#5e6673;          /*  5.79:1 on page,  5.21:1 on surface */
  --ink-3:#6e7684;          /*  4.58:1 on page, placeholders only */

  /* dark surfaces: two values, no pure black anywhere */
  --dark:#0c0f14;
  --dark-2:#161b23;

  /* text on dark */
  --on-dark:#f1f3f6;        /* 17.27:1 on dark */
  --on-dark-2:#9ba5b3;      /*  7.70:1 on dark */

  /* accent: The Reichmann Co. */
  --accent:#0f4ec4;         /*  7.22:1 on page */
  --accent-hover:#0b3e9e;
  --accent-dark:#6aa5ff;    /*  7.71:1 on dark */
  --accent-on:#ffffff;

  /* accent: Dachshund, scoped to body.dachshund main and .dach-* */
  --rust:#ab4f1e;           /*  5.43:1 on page */
  --rust-dark:#e08348;      /*  6.86:1 on dark */
  --dach-cream:#fdf8f0;

  /* lines + fills */
  --hairline:rgba(15,18,22,.11);
  --hairline-soft:rgba(15,18,22,.07);
  --hairline-dark:rgba(241,243,246,.13);
  --hairline-dark-soft:rgba(241,243,246,.08);
  --field-border:#818892;   /* 3.58:1 vs white, SC 1.4.11 */
  --tint:rgba(15,78,196,.07);
  --whatsapp:#25d366;       /* 9.47:1 with an --ink label. Never white. */

  /* type scale */
  --t-display:clamp(2.75rem,6vw,4.5rem);
  --t-h1:clamp(2.25rem,4.6vw,3.4rem);
  --t-h2:clamp(1.9rem,3.4vw,2.75rem);
  --t-h3:1.3125rem;
  --t-lede:clamp(1.125rem,1.5vw,1.3125rem);
  --t-body:1.0625rem;       /* 17px, Apple's considered default */
  --t-sm:0.9375rem;
  --t-xs:0.8125rem;
  --t-eyebrow:0.75rem;
  --t-num:clamp(2.5rem,5vw,4rem);

  /* tracking in em so it scales with clamp() */
  --ls-display:-0.035em;
  --ls-h1:-0.032em;
  --ls-h2:-0.028em;
  --ls-h3:-0.018em;
  --ls-body:-0.006em;
  --ls-eyebrow:0.09em;

  /* rhythm: one number, everywhere */
  --section:96px;
  --band:128px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* geometry: rectangles, not pills */
  --r1:4px; --r2:6px; --r3:8px; --r4:12px; --r5:16px;

  --shell:1120px;
  --measure:68ch;
  --nav-h:60px;
  --ease:cubic-bezier(.2,0,0,1);
}

/* Dachshund pages: rust replaces blue inside <main> only.
   Nav and footer stay Reichmann blue, they are parent chrome. */
body.dachshund main{
  --accent:var(--rust);
  --accent-hover:#8e4118;
  --accent-dark:var(--rust-dark);
  --tint:rgba(171,79,30,.08);
}

/* ---------- 3. RESET + BASE --------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.6;
  letter-spacing:var(--ls-body);
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:lining-nums;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
h1,h2,h3,h4{font-weight:500;text-wrap:balance;}
h1{font-size:var(--t-h1);line-height:1.06;letter-spacing:var(--ls-h1);}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:var(--ls-h2);}
h3{font-size:var(--t-h3);line-height:1.3;letter-spacing:var(--ls-h3);}
p{text-wrap:pretty;}
::selection{background:#c9dcff;color:#0a2e6e;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- 4. FOCUS / A11Y --------------------------------- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  /* no border-radius here, the outline follows the element's own */
}
.dark :focus-visible,.band--dark :focus-visible{outline-color:var(--accent-dark);}
.skip-link{
  position:absolute;left:50%;top:8px;transform:translate(-50%,-160%);
  background:var(--ink);color:var(--page);
  padding:10px 18px;border-radius:var(--r2);font-size:var(--t-sm);
  z-index:100;transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0);}
main:focus{outline:none;}

/* ---------- 5. NAV ------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:50;
  height:var(--nav-h);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hairline-soft);
}
.nav-inner{
  max-width:var(--shell);margin:0 auto;height:100%;
  padding:0 var(--s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
}
.wordmark{
  display:inline-flex;align-items:center;gap:9px;
  font-size:0.9375rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.wordmark .mk{
  width:22px;height:22px;flex:none;
  background:url(/assets/logo-mark.png) center/contain no-repeat;
}
.nav-links{display:flex;align-items:center;gap:var(--s6);}
.nav-links a{
  font-size:0.875rem;font-weight:450;letter-spacing:-.004em;
  color:var(--ink-2);text-decoration:none;
  transition:color .14s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);}
.nav-toggle{
  display:none;width:44px;height:44px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle span{width:19px;height:1.5px;background:var(--ink);border-radius:2px;}

/* ---------- 6. LINKS + BUTTONS ------------------------------ */
.ilink{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-body);font-weight:500;letter-spacing:-.008em;
  color:var(--accent);text-decoration:none;
}
.ilink .chev{transition:transform .16s var(--ease);}
.ilink:hover .chev{transform:translateX(3px);}
.band--dark .ilink{color:var(--accent-dark);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:1rem;font-weight:500;letter-spacing:-.006em;
  padding:12px 20px;border-radius:var(--r2);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease),transform .14s var(--ease);
}
.btn:active{transform:scale(.985);}
/* Vercel's move: the primary CTA is ink, not the accent.
   That reserves the accent for links and keeps one loud thing per view. */
.btn-primary{background:var(--ink);color:var(--page);}
.btn-primary:hover{background:#252a31;}
.btn-secondary{background:var(--page);color:var(--ink);border-color:var(--hairline);}
.btn-secondary:hover{border-color:var(--ink-3);}
.band--dark .btn-primary{background:var(--on-dark);color:var(--dark);}
.band--dark .btn-primary:hover{background:#fff;}
.band--dark .btn-secondary{background:transparent;color:var(--on-dark);border-color:var(--hairline-dark);}
.band--dark .btn-secondary:hover{border-color:var(--on-dark-2);}
/* The WhatsApp button carries its own green on every band, so its label must
   be a literal. var(--ink) inverts to near-white inside .band--dark and
   measured 1.78:1 there. 9.47:1 as written. Never white. */
.btn-wa{background:var(--whatsapp);color:#0f1216;}
.btn-wa:hover{background:#1ebe5a;}
.band--dark .btn-wa{color:#0f1216;}

/* ---------- 7. SHELL + SECTIONS ----------------------------- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--s5);}
.band{padding-block:var(--section);}
.band--hero,.band--close{padding-block:var(--band);}
.band--surface{background:var(--surface);}
.band--dark{
  /* A circuit lattice over the dark ground. The tile is seamless and its
     traces sit at 5.5% white, so the 17.27:1 contrast of --on-dark on
     --dark is unchanged: the texture reads at arm's length and disappears
     behind the type. Layer order is texture first, then the flat colour. */
  background:url(/assets/bg/circuit.webp) 0 0/256px repeat,var(--dark);
  color:var(--on-dark);
  /* re-point the tokens so every child inverts with no variant classes */
  --ink:var(--on-dark);
  --ink-2:var(--on-dark-2);
  --hairline:var(--hairline-dark);
  --hairline-soft:var(--hairline-dark-soft);
  --page:var(--dark);
  --surface:var(--dark-2);
}
.eyebrow{
  display:block;
  font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s4);
}
.band--dark .eyebrow{color:var(--accent-dark);}
.head{max-width:760px;margin-bottom:var(--s8);}
.head h2{max-width:20ch;}
.head .lede{
  font-size:var(--t-lede);line-height:1.5;letter-spacing:-.012em;
  color:var(--ink-2);max-width:52ch;margin-top:var(--s4);
}

/* ---------- 8. HERO ----------------------------------------- */
.hero{padding-block:clamp(72px,12vh,140px) var(--band);}
.hero h1{
  font-size:var(--t-display);line-height:1.02;letter-spacing:var(--ls-display);
  max-width:19ch;
}
.hero .lede{
  font-size:var(--t-lede);line-height:1.5;letter-spacing:-.012em;
  color:var(--ink-2);max-width:54ch;margin-top:var(--s5);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s7);align-items:center;}
.hero-meta{
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--hairline);
  font-size:var(--t-sm);color:var(--ink-2);max-width:60ch;
}

/* ---------- 9. PROOF BAND + FIGURES ------------------------- */
.figures{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s7) var(--s6);margin-top:var(--s8);
}
.figures--3{grid-template-columns:repeat(3,1fr);}
.figure b{
  display:block;
  font-size:var(--t-num);font-weight:500;line-height:1;
  letter-spacing:-.04em;color:var(--on-dark);
  font-variant-numeric:tabular-nums lining-nums;   /* 11 / 64 / 0 align */
}
.figure b em{font-style:normal;color:var(--accent-dark);}
.figure span{
  display:block;margin-top:var(--s3);
  font-size:var(--t-sm);line-height:1.45;color:var(--on-dark-2);max-width:24ch;
}
.plain{
  margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--hairline-dark);
  font-size:var(--t-lede);line-height:1.5;color:var(--on-dark);max-width:56ch;
}

/* ---------- 10. CARDS + GRIDS ------------------------------- */
.grid{display:grid;gap:var(--s5);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.card{
  background:var(--page);
  border:1px solid var(--hairline);
  border-radius:var(--r4);
  padding:var(--s5);
  transition:border-color .16s var(--ease);
}
.band--surface .card{background:#fff;}
.card:hover{border-color:var(--ink-3);}
.band--dark .card{background:var(--dark-2);}
.band--dark .card:hover{border-color:var(--on-dark-2);}
.card h3{margin-bottom:var(--s3);}
.card p{font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);max-width:52ch;}
.card .n{
  display:block;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s3);
}
.band--dark .card .n{color:var(--accent-dark);}

/* list of plain statements, used for gates, handover, guarantees */
.rows{border-top:1px solid var(--hairline);}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:var(--s5);
  padding-block:var(--s5);
  border-bottom:1px solid var(--hairline);
}
.row dt{font-weight:500;letter-spacing:-.012em;}
.row dd{font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);}
.row code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8125rem;color:var(--ink);
  background:var(--surface);padding:2px 6px;border-radius:var(--r1);
}
.band--dark .row code{background:var(--dark-2);color:var(--on-dark);}

/* ---------- 11. DACHSHUND BRAND ----------------------------- */
.dach-lockup{display:inline-flex;align-items:center;gap:14px;}
.dach-lockup .mk{
  width:74px;height:47px;flex:none;
  background:url(/assets/dachshund/mark.png) center/contain no-repeat;
}
.dach-lockup .wd{
  font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);
}
.dach-lockup .wd i{color:var(--rust);font-style:normal;}
.band--dark .dach-lockup .wd{color:var(--on-dark);}
.band--dark .dach-lockup .wd i{color:var(--rust-dark);}
.dach-icon{
  width:112px;height:112px;flex:none;border-radius:26px;
  background:var(--dach-cream) url(/assets/dachshund/icon.png) center/cover no-repeat;
  border:1px solid var(--hairline);
}

/* ---------- 11b. LUMARIX BRAND ------------------------------ */
/* Same lockup grammar as Dachshund: a mark, a gap, the word, a
   coloured full stop. The mark is square rather than long, so it
   takes the lockup's height and nothing more. The stop uses the
   house accent: Lumarix has no third colour and does not need one. */
.lum-lockup{display:inline-flex;align-items:center;gap:14px;}
.lum-lockup .mk{
  width:44px;height:44px;flex:none;
  background:url(/assets/lumarix/mark.svg) center/contain no-repeat;
}
.lum-lockup .wd{
  font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);
}
.lum-lockup .wd i{color:var(--accent);font-style:normal;}
.band--dark .lum-lockup .wd{color:var(--on-dark);}
.band--dark .lum-lockup .wd i{color:var(--accent-dark);}

/* ---------- 11c. PRODUCT IMAGERY ----------------------------- */
/* Screenshots of the real product rather than stock photography. The frame
   is drawn, not photographed, so it carries the same hairline-and-luminance
   language as everything else and there is still no drop shadow anywhere. */
.shot{
  display:block;width:100%;max-width:820px;height:auto;
  margin:var(--s8) auto 0;
}
.shot--tight{margin-top:var(--s7);}
/* The mockup is rendered on transparency, so it needs no border or fill of
   its own. Below the mobile breakpoint it keeps its place: it is the product,
   not decoration, and a buyer on a phone has the most to gain from seeing it. */
@media (max-width:760px){
  .shot{margin-top:var(--s7);}
}

/* ---------- 12. PROSE + LEGAL ------------------------------- */
.prose{max-width:var(--measure);}
.prose h2{font-size:1.625rem;letter-spacing:-.022em;margin:var(--s8) 0 var(--s4);}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:var(--s4);line-height:1.65;color:var(--ink-2);}
.prose p strong{color:var(--ink);font-weight:500;}
.prose ul{list-style:none;margin:0 0 var(--s5);display:flex;flex-direction:column;gap:var(--s3);}
.prose li{position:relative;padding-left:22px;color:var(--ink-2);line-height:1.6;}
.prose li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
/* SC 1.4.1: the accent is only 2.60:1 against the ink around it, so a link
   sitting inside a block of text cannot rely on colour alone. Every context
   where that happens is listed here. Miss one and it inherits the browser
   default (#0000ee), which measured 1.30:1 on the confirmation tint. */
.prose a,.fact a,.confirm a,.note a,.row a,.hero-meta a,.lede a,.plain a,.hint a{
  color:var(--accent);text-decoration:underline;
  text-decoration-thickness:.06em;text-underline-offset:.18em;
}
.band--dark .prose a,.band--dark .row a,.band--dark .lede a,.band--dark .plain a{color:var(--accent-dark);}
.lead{font-size:var(--t-lede);line-height:1.55;color:var(--ink);}
.meta{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s5);}
.note{
  margin-top:var(--s7);padding:var(--s5);
  border:1px solid var(--hairline);border-radius:var(--r4);
  background:var(--surface);
}
.note p{font-size:var(--t-sm);color:var(--ink-2);margin:0;}

/* facts list: company record, contact details */
.facts{border-top:1px solid var(--hairline);}
.fact{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);
  gap:var(--s5);padding-block:var(--s4);
  border-bottom:1px solid var(--hairline);
  font-size:var(--t-sm);
}
.fact dt{color:var(--ink-2);}
.fact dd{color:var(--ink);}
.fact dd small{display:block;color:var(--ink-2);margin-top:2px;}

/* placeholder marker for values only Franco can supply */
.tbd{
  display:inline-block;
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  color:#8a5a00;background:#fff4d6;
  border:1px dashed #d9a441;border-radius:var(--r1);
  padding:1px 7px;
}

/* ---------- 13. FORMS --------------------------------------- */
.form{display:flex;flex-direction:column;gap:var(--s5);}
.field label{
  display:block;font-size:var(--t-sm);font-weight:500;
  margin-bottom:var(--s2);color:var(--ink);
}
.field input,.field textarea,.field select{
  width:100%;font-family:inherit;font-size:var(--t-body);
  color:var(--ink);background:var(--page);
  border:1px solid var(--field-border);     /* 3.58:1, SC 1.4.11 */
  border-radius:var(--r2);padding:12px 14px;
  transition:border-color .14s var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);}  /* 4.58:1 */
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);}
.hint{font-size:var(--t-xs);color:var(--ink-2);margin-top:var(--s2);}
.err{
  display:none;font-size:var(--t-xs);color:#b3261e;margin-top:var(--s2);font-weight:500;
}
.field[data-invalid] .err{display:block;}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:#b3261e;}
.confirm{
  display:none;padding:var(--s5);border-radius:var(--r4);
  border:1px solid var(--hairline);background:var(--tint);
  font-size:var(--t-sm);line-height:1.55;
}
.confirm.show{display:block;}
.confirm strong{font-weight:600;}

/* ---------- 14. FOOTER -------------------------------------- */
/* One row, not six columns. A mega-footer on a nine-page site is cosplay. */
footer{
  background:var(--page);
  border-top:1px solid var(--hairline);
  padding-block:var(--s8);
}
.foot{
  display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);
  align-items:baseline;justify-content:space-between;
}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s5);}
.foot a{font-size:var(--t-sm);color:var(--ink-2);text-decoration:none;}
.foot a:hover{color:var(--ink);}
.foot-legal{font-size:var(--t-xs);color:var(--ink-2);margin-top:var(--s6);line-height:1.6;}

/* ---------- 15. MOTION -------------------------------------- */
/* Visible is the DEFAULT. Animation is opt-in and CSS-only, so the
   page renders fully with JavaScript disabled, blocked or still loading. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 50%;
    }
  }
}
@keyframes reveal-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* in-page anchors must clear the sticky nav */
[id]{scroll-margin-top:calc(var(--nav-h) + 24px);}

/* ---------- 16. RESPONSIVE ---------------------------------- */
@media (max-width:1000px){
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .figures{grid-template-columns:repeat(2,1fr);}
  .figures--3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  :root{--section:64px;--band:80px;}
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--page);border-bottom:1px solid var(--hairline);
    padding:var(--s4) var(--s5) var(--s6);
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;
  }
  .nav-links.open{visibility:visible;opacity:1;transform:none;transition-delay:0s;}
  .nav-links a{padding-block:12px;font-size:1rem;}
  .grid--2,.grid--3,.figures,.figures--3{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .row,.fact{grid-template-columns:1fr;gap:var(--s2);}
  .foot{flex-direction:column;align-items:flex-start;}
}

/* ============================================================
   18. The brand arrival
   Landing on a product page the mark appears centred, then travels
   in one motion to the nav wordmark's exact resting position.

   The end state of the travel is transform:none, i.e. the mark's
   natural layout position, which is why it lands precisely rather
   than nearly. Everything defaults to opacity 0, so no animation
   support and no JavaScript both fail to "nothing happens", never
   to a sheet stuck over the page.

   The machinery below is brand-agnostic: it moves whatever lockup
   is handed to it, and the landing is measured off the nav rather
   than off the mark, so a new product needs a lockup and nothing
   else. Dachshund and Lumarix both use it unchanged.
   ============================================================ */

.wordmark--brand{gap:0;}
/* Height is explicit on both copies so the nav's line box cannot round the
   landing by half a pixel. The travel ends on a measured 0,0 offset. */
.dach-lockup--nav,.lum-lockup--nav{gap:10px;height:24px;}
.dach-lockup--nav .mk{width:38px;height:24px;}
.dach-lockup--nav .wd,.lum-lockup--nav .wd{font-size:1.0625rem;letter-spacing:-.025em;line-height:24px;}
.lum-lockup--nav .mk{width:24px;height:24px;}

.brand-splash{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  pointer-events:none;              /* can never trap a click, whatever happens */
  container-type:size;              /* so cqw below is the real width, scrollbar excluded */
}
.brand-splash::before{
  content:"";position:absolute;inset:0;
  background:var(--page);opacity:0;
}
.brand-splash__mark{opacity:0;}

@media (prefers-reduced-motion:no-preference){
  .brand-splash::before{animation:brand-sheet 1250ms var(--ease) both;}
  .brand-splash__mark{
    /* Where the nav wordmark actually sits: the shell is centred and
       padded, and below the shell width it is flush at the gutter. */
    --mark-x:max(var(--s5),calc((100cqw - var(--shell))/2 + var(--s5)));
    /* The travel. X: half its own width right of centre, less half the
       viewport, puts its left edge on the wordmark's. Y: the nav is
       border-box, so its usable height is --nav-h less the 1px hairline,
       and the wordmark centres on 29.5px rather than 30px. Measured. */
    --land-x:calc(var(--mark-x) + 50% - 50cqw);
    --land-y:calc((var(--nav-h) - 1px)/2 - 50cqh);
    --s0:4;
    animation:brand-land 1250ms var(--ease) both;
  }
  .wordmark--brand .dach-lockup,
  .wordmark--brand .lum-lockup{animation:brand-nav-in 1250ms var(--ease) both;}
}

@keyframes brand-sheet{
  0%,44%{opacity:1;}
  90%,100%{opacity:0;}
}

@keyframes brand-land{
  /* Centred by the grid, so the start needs scale only. */
  0%{opacity:0;transform:scale(calc(var(--s0) * .94));}
  14%,40%{opacity:1;transform:scale(var(--s0));}
  92%{opacity:1;transform:translate(var(--land-x),var(--land-y)) scale(1);}
  100%{opacity:0;transform:translate(var(--land-x),var(--land-y)) scale(1);}
}

/* Crossfades under the arriving mark over the last 100ms, so the handover
   is invisible even if a browser rounds the landing by a pixel. */
@keyframes brand-nav-in{
  0%,88%{opacity:0;}
  100%{opacity:1;}
}

@media (max-width:1024px){
  .brand-splash__mark{--s0:3;}
}
@media (max-width:760px){
  .brand-splash__mark{--s0:2;}
}