body { margin:0; background:#FBF6EE; font-family:'Heebo',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:#E4572E; text-decoration:none; }
  a:hover { color:#16324F; }
  @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
  @keyframes floatY2 { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-22px) rotate(4deg)} }
  @keyframes bounceBall { 0%,100%{transform:translateY(0) scaleX(1)} 45%{transform:translateY(-46px) scaleX(.96)} 55%{transform:translateY(-40px)} 98%{transform:translateY(0) scaleX(1.08)} }
  @keyframes riseIn { from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)} }
  @keyframes wag { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
  @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  @keyframes pulseRing { 0%{transform:scale(.9); opacity:.55} 70%{transform:scale(1.5); opacity:0} 100%{opacity:0} }
  @keyframes popIn { 0%{opacity:0; transform:scale(.2) translateY(10px)} 60%{opacity:1; transform:scale(1.18) translateY(0)} 100%{opacity:1; transform:scale(1)} }
  @keyframes curtainUp { 0%{transform:translateY(0)} 100%{transform:translateY(-102%)} }
  @keyframes settle { 0%{transform:scale(1)} 100%{transform:scale(.86)} }
  /* A single dot falls down a hairline, then the track rests for ~45% of the
     cycle. Tune = the 3.4s duration and the 55% end-of-travel stop below. */
  @keyframes cueRun { 0%{transform:translateY(-14px); opacity:0} 18%{opacity:.85} 55%,100%{transform:translateY(44px); opacity:0} }

  /* ---------- header nav ---------- */
  .navlinks { display:flex; align-items:center; gap:20px; }
  .navlinks a { font-size:14px; font-weight:700; color:#16324F; opacity:.75; white-space:nowrap; transition:opacity .2s ease, color .2s ease; }
  .navlinks a:hover { opacity:1; color:#E4572E; }
  /* No room for the links once the logo, language toggle and CTA are in. */
  @media (max-width:980px){ .navlinks { display:none } }
  /* The header is sticky, so an anchor jump would land the section underneath
     it without this offset. */
  #services, #about, #session, #dogs, #contact { scroll-margin-top:82px; }
  html { scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto } }

  /* ---------- hero scroll cue ---------- */
  .scrollcue { position:absolute; inset-inline:0; z-index:3; top:min(calc(100% - 70px), calc(100vh - 132px)); display:flex; justify-content:center; transition:opacity .45s ease, transform .45s ease; }
  .scrollcue[data-hide="1"] { opacity:0; transform:translateY(12px); pointer-events:none; }
  .scrollcue .cue-track { position:relative; width:1px; height:44px; background:rgba(22,50,79,.14); border-radius:1px; overflow:hidden; }
  /* Base state is the visible resting dot, so with animations off (reduced
     motion) the cue still reads instead of collapsing to a bare line. */
  .scrollcue .cue-track::after { content:''; position:absolute; top:0; left:0; width:1px; height:14px; border-radius:1px; background:#16324F; animation:cueRun 3.4s cubic-bezier(.4,0,.3,1) infinite; }
  .scrollcue:hover .cue-track { background:rgba(22,50,79,.3); }

  /* ---------- scroll-following dog mascot ---------- */
  @property --dgA { syntax: "<number>"; inherits: true; initial-value: 0; }
  @keyframes dgWag { 0%,100%{transform:rotate(-15deg)} 50%{transform:rotate(17deg)} }
  @keyframes dgHop { 0%,100%{transform:translateY(0)} 42%{transform:translateY(-5px)} 70%{transform:translateY(-1px)} }
  @keyframes dgBreathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.6px)} }
  @keyframes dgTilt { 0%,100%{transform:rotate(-1deg)} 50%{transform:rotate(9deg)} }
  @keyframes dgStepA { 0%,100%{transform:rotate(calc(var(--dgA) * -25deg))} 50%{transform:rotate(calc(var(--dgA) * 21deg))} }
  @keyframes dgStepB { 0%,100%{transform:rotate(calc(var(--dgA) * 21deg))} 50%{transform:rotate(calc(var(--dgA) * -25deg))} }
  @keyframes dgEar { 0%,100%{transform:rotate(calc(var(--dgA) * -10deg))} 50%{transform:rotate(calc(var(--dgA) * 8deg))} }

  /* The page column is content-box: max-width:1140 + 20px side padding, so the
     text edge sits at (100vw - 1180)/2. Every offset below is derived from that
     so the dog always stands in the empty margin beside the column. */
  .dogpal { --dgA:0; position:fixed; z-index:40; bottom:16px; width:96px; left:max(2px, calc((100vw - 1180px)/2 - 116px)); pointer-events:none; opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), --dgA .5s ease; }
  .dogpal[data-ready="1"] { opacity:1; transform:none; }
  /* The dog hugs the ragged line-end side of the column so it never lands on
     text: that is the left in RTL and the right once the EN toggle flips dir.
     It is mirrored so it keeps facing into the page. */
  .dogpal[data-side="right"] { left:auto; right:max(2px, calc((100vw - 1180px)/2 - 116px)); transform:translateY(10px) scaleX(-1); }
  .dogpal[data-side="right"][data-ready="1"] { transform:scaleX(-1); }
  .dogpal svg { width:100%; height:auto; display:block; overflow:visible; }
  .dogpal g { transform-box:view-box; }
  .dogpal .dg-part { transition:transform .55s cubic-bezier(.34,1.15,.5,1); }
  .dogpal .dg-body { transform-origin:65px 92px; }
  .dogpal .dg-head, .dogpal .dg-headb { transform-origin:96px 60px; }
  .dogpal .dg-ear, .dogpal .dg-gEar { transform-origin:98px 26px; }
  .dogpal .dg-tail, .dogpal .dg-tailw { transform-origin:36px 63px; }
  .dogpal .dg-legF1, .dogpal .dg-gF1 { transform-origin:88px 74px; }
  .dogpal .dg-legF2, .dogpal .dg-gF2 { transform-origin:94px 76px; }
  .dogpal .dg-legB1, .dogpal .dg-gB1 { transform-origin:44px 80px; }
  .dogpal .dg-legB2, .dogpal .dg-gB2 { transform-origin:51px 82px; }
  .dogpal .dg-tongue { opacity:0; transition:opacity .3s ease; }

  .dogpal[data-pose="alert"] .dg-head { transform:rotate(-5deg) }
  .dogpal[data-pose="alert"] .dg-ear { transform:rotate(-9deg) }
  .dogpal[data-pose="alert"] .dg-tail { transform:rotate(-24deg) }
  .dogpal[data-pose="alert"] .dg-tailw { animation:dgWag 1.7s ease-in-out infinite }
  .dogpal[data-pose="alert"] .dg-bounce { animation:dgBreathe 3.4s ease-in-out infinite }

  .dogpal[data-pose="sit"] .dg-body { transform:translateY(5px) rotate(-14deg) }
  .dogpal[data-pose="sit"] .dg-head { transform:rotate(-2deg) }
  .dogpal[data-pose="sit"] .dg-ear { transform:rotate(5deg) }
  .dogpal[data-pose="sit"] .dg-tail { transform:rotate(16deg) }
  .dogpal[data-pose="sit"] .dg-tailw { animation:dgWag 2.1s ease-in-out infinite }
  .dogpal[data-pose="sit"] .dg-legB1 { transform:translate(4px,11px) rotate(60deg) scaleY(.72) }
  .dogpal[data-pose="sit"] .dg-legB2 { transform:translate(4px,10px) rotate(60deg) scaleY(.72) }
  .dogpal[data-pose="sit"] .dg-legF1 { transform:translate(-5px,1px) rotate(-3deg) }
  .dogpal[data-pose="sit"] .dg-legF2 { transform:translate(-5px,1px) rotate(-3deg) }

  .dogpal[data-pose="down"] .dg-body { transform:translateY(14px) rotate(-1deg) }
  .dogpal[data-pose="down"] .dg-head { transform:translateY(2px) rotate(2deg) }
  .dogpal[data-pose="down"] .dg-ear { transform:rotate(7deg) }
  .dogpal[data-pose="down"] .dg-tail { transform:translateY(11px) rotate(36deg) }
  .dogpal[data-pose="down"] .dg-tailw { animation:dgWag 2.8s ease-in-out infinite }
  .dogpal[data-pose="down"] .dg-legF1 { transform:translateY(14px) rotate(50deg) }
  .dogpal[data-pose="down"] .dg-legF2 { transform:translateY(13px) rotate(50deg) }
  .dogpal[data-pose="down"] .dg-legB1 { transform:translateY(15px) rotate(-38deg) scaleY(.62) }
  .dogpal[data-pose="down"] .dg-legB2 { transform:translateY(14px) rotate(-38deg) scaleY(.62) }

  .dogpal[data-pose="bow"] .dg-body { transform:rotate(16deg) }
  .dogpal[data-pose="bow"] .dg-head { transform:rotate(-20deg) }
  .dogpal[data-pose="bow"] .dg-ear { transform:rotate(-16deg) }
  .dogpal[data-pose="bow"] .dg-tail { transform:rotate(-50deg) }
  .dogpal[data-pose="bow"] .dg-tailw { animation:dgWag .36s ease-in-out infinite }
  .dogpal[data-pose="bow"] .dg-legF1 { transform:translate(4px,7px) rotate(8deg) scaleY(.8) }
  .dogpal[data-pose="bow"] .dg-legF2 { transform:translate(4px,7px) rotate(8deg) scaleY(.8) }
  .dogpal[data-pose="bow"] .dg-legB1 { transform:translate(4px,-5px) scaleY(1.2) }
  .dogpal[data-pose="bow"] .dg-legB2 { transform:translate(4px,-4px) scaleY(1.2) }
  .dogpal[data-pose="bow"] .dg-tongue { opacity:1 }

  .dogpal[data-pose="happy"] .dg-head { transform:rotate(-4deg) }
  .dogpal[data-pose="happy"] .dg-headb { animation:dgTilt 2.4s ease-in-out infinite }
  .dogpal[data-pose="happy"] .dg-ear { transform:rotate(-5deg) }
  .dogpal[data-pose="happy"] .dg-tail { transform:rotate(-32deg) }
  .dogpal[data-pose="happy"] .dg-tailw { animation:dgWag .5s ease-in-out infinite }
  .dogpal[data-pose="happy"] .dg-bounce { animation:dgBreathe 1.9s ease-in-out infinite }
  .dogpal[data-pose="happy"] .dg-tongue { opacity:1 }

  .dogpal[data-pose="wag"] .dg-head { transform:rotate(-9deg) }
  .dogpal[data-pose="wag"] .dg-ear { transform:rotate(-13deg) }
  .dogpal[data-pose="wag"] .dg-tail { transform:rotate(-42deg) }
  .dogpal[data-pose="wag"] .dg-tailw { animation:dgWag .27s ease-in-out infinite }
  .dogpal[data-pose="wag"] .dg-bounce { animation:dgHop .62s ease-in-out infinite }
  .dogpal[data-pose="wag"] .dg-tongue { opacity:1 }

  .dogpal .dg-gait { animation-duration:.54s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
  .dogpal .dg-gF1, .dogpal .dg-gB2 { animation-name:dgStepA }
  .dogpal .dg-gF2, .dogpal .dg-gB1 { animation-name:dgStepB }
  .dogpal .dg-gEar { animation-name:dgEar }
  .dogpal[data-gait="rest"] .dg-gait { animation:none }
  .dogpal[data-gait="trot"] { --dgA:1; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), --dgA .16s ease-out; }
  .dogpal[data-gait="trot"] .dg-body,
  .dogpal[data-gait="trot"] .dg-legF1,
  .dogpal[data-gait="trot"] .dg-legF2,
  .dogpal[data-gait="trot"] .dg-legB1,
  .dogpal[data-gait="trot"] .dg-legB2 { transform:none }
  .dogpal[data-gait="trot"] .dg-head { transform:rotate(-4deg) }
  .dogpal[data-gait="trot"] .dg-ear { transform:rotate(-4deg) }
  .dogpal[data-gait="trot"] .dg-bounce { animation:dgBreathe .27s ease-in-out infinite }

  /* The dog lives in the free margin beside the 1140px container. That margin
     only exists above ~1270px, so below 1280 it is hidden rather than allowed
     to sit on top of body copy. */
  @media (max-width:1440px) { .dogpal { width:80px; left:2px; } .dogpal[data-side="right"] { right:2px; } }
  @media (max-width:1340px) { .dogpal { width:64px; } }
  @media (max-width:1279px) { .dogpal { display:none; } }

  /* The drawn mascot is hidden in favour of .cornerfig below, which puts
     Einav's own drawing in this same slot. The rig and its markup are left
     intact — delete this one line and hide .cornerfig to bring it back. */
  .dogpal { display:none !important; }

  /* ---------- corner figure: the drawing from Einav's logo ----------
     Parked in the margin beside the top of the page and left there: absolute,
     not fixed, so it scrolls away with the hero instead of following the
     viewport. That also means it only ever sits over the cream ground, so it
     never needs to recolour for the dark sections.
     Wider than the old mascot (the drawing is landscape, ~1.36:1), so it needs
     more free margin: it appears once there is room for 160px plus a gap
     beside the 1140px container, which lands at ~1500px of viewport. */
  /* Stands on the navy marquee strip, not on the fold. It lives inside
     .marqzone — a bare position:relative wrapper around the strip — so
     bottom:100% is the strip's own top edge and the 24px is a real gap above
     it, at every viewport height. It used to be top:calc(100vh - 142px),
     which only lined up on a viewport as tall as the hero happened to be:
     on any other the drawing drifted off the strip or sat on top of it.
     Nothing here is measured against the screen any more. */
  .marqzone { position:relative; }
  .cornerfig { position:absolute; z-index:40; bottom:calc(100% + 24px); width:160px;
    left:calc((100vw - 1140px)/2 - 182px); pointer-events:none;
    opacity:0; transition:opacity .7s ease; }
  .cornerfig[data-side="right"] { left:auto; right:calc((100vw - 1140px)/2 - 182px); }
  .cornerfig[data-ready="1"] { opacity:1; }
  @media (max-width:1499px) { .cornerfig { display:none; } }
  .cornerfig svg { width:100%; height:auto; display:block; }
  .cornerfig .fig-woman { fill:#054D2C; }
  .cornerfig .fig-dog, .cornerfig .fig-heart { fill:#F15004; }

  /* Same drawing on a dark band: her green would disappear into the navy, so
     the figure takes the cream and the dog takes the site's coral. */
  .drawfig svg { width:100%; height:auto; display:block; }
  .figdark .fig-woman { fill:#FBF6EE; }
  .figdark .fig-dog, .figdark .fig-heart { fill:#E4572E; }

  /* ---------- stroke-by-stroke reveal ----------
     Every path carries its own --i, so each stroke of the drawing appears in
     turn rather than a whole colour at a time. Filled outlines cannot be
     stroke-dashed, so each one is a clip whose leading edge travels
     right-to-left, the way the page reads. The heart is last and pops
     instead — the same beat as the coral fourth toe in the intro curtain. */
  /* --step is the gap between one stroke starting and the next; --lead is the
     pause before the first. Both live here so the whole sequence can be
     retimed from one place — nine strokes at .13s run about 1.6s end to end.
     (.3s was tried and read as too slow a reveal.) */
  .drawfig { --step:.13s; --lead:.2s; --draw:.5s; }
  .drawfig path { clip-path:inset(0 0 0 100%); }
  .drawfig .fig-heart path { clip-path:none; opacity:0; transform:scale(.4); transform-origin:78% 20%; }
  .drawfig[data-draw="1"] path {
    animation:figWipe var(--draw) cubic-bezier(.4,0,.2,1) forwards;
    animation-delay:calc(var(--i, 0) * var(--step) + var(--lead));
  }
  .drawfig[data-draw="1"] .fig-heart path {
    animation:figPop .55s cubic-bezier(.2,1.5,.4,1) forwards,
              figBeat 3.2s ease-in-out infinite;
    animation-delay:calc(var(--i, 0) * var(--step) + var(--lead)),
                    calc(var(--i, 0) * var(--step) + var(--lead) + .75s);
  }
  @keyframes figWipe { to { clip-path:inset(0 0 0 0); } }
  @keyframes figPop  { to { opacity:1; transform:scale(1); } }
  @keyframes figBeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.09)} }
  /* With motion off the drawing is simply there, whole, like the paw trail. */
  @media (prefers-reduced-motion: reduce) {
    .drawfig path { clip-path:none !important; opacity:1 !important; transform:none !important; }
  }

  /* ======================================================================
     MOBILE
     Below 820px the two-column sections already collapse on their own —
     the hero's flex bases are 380 and 360, so they stack once the column
     drops under ~780px. Nothing here fixes a break; it all exists so that
     stack reads as a layout of its own instead of a squeezed desktop page.
     ====================================================================== */

  /* ---------- paw trail ----------
     The page leaves a line of prints behind as you scroll, and near the
     contact section a second, human trail joins and the two walk in
     together. Nothing loops: each print transitions once, on entry, so
     there is never movement in the corner of the eye. The trail paw is
     deliberately monochrome — in the logo the coral fourth toe stands in
     for the person, and here the person gets a real footprint instead. */
  /* Anchored to the outside of the 1180px column rather than to the screen:
     inset-inline-start is the column's outer edge minus the lane width and a
     6px gap, so the lane can never slide under the text at any width. As the
     margin shrinks the lane walks off-screen instead of onto the copy, and
     the media query below hides the leftover sliver. Logical properties
     throughout, so the whole thing mirrors itself when EN flips dir. */
  .trail { position:absolute; inset-block:0; z-index:0; width:116px;
    inset-inline-start:calc((100vw - 1180px)/2 - 122px); pointer-events:none; }
  @media (min-width:821px) and (max-width:1424px) { .trail { display:none; } }
  .trail .pp { position:absolute; width:26px; color:#16324F; opacity:0;
    transform:translateY(9px) scale(.72);
    transition:opacity .5s ease, transform .65s cubic-bezier(.2,.9,.3,1); }
  .trail .pp svg { display:block; width:100%; height:auto; }
  .trail .pp.in { opacity:.16; transform:none; }
  /* Over the navy band, the dogs section and the footer the ink print would
     disappear, so those flip to cream. */
  .trail .pp.on-dark { color:#FBF6EE; }
  .trail .pp.on-dark.in { opacity:.22; }
  .trail .pp[data-s="0"] { inset-inline-start:4px; }
  .trail .pp[data-s="1"] { inset-inline-start:32px; }
  /* The human walks on the outside of the dog's line, in the coral that
     marks the person everywhere else on the page. */
  .trail .hp { width:23px; color:#E4572E; }
  .trail .hp.in { opacity:.30; }
  .trail .hp.on-dark { color:#F2A03D; }
  .trail .hp.on-dark.in { opacity:.34; }
  .trail .hp[data-s="0"] { inset-inline-start:66px; }
  .trail .hp[data-s="1"] { inset-inline-start:92px; }

  /* Mobile-only chrome, off by default. */
  .mnav-btn, .msheet, .mbar, .raildots { display:none; }

  @media (max-width:820px){

    /* --- header -------------------------------------------------------
       The header CTA needs ~164px of a 350px content box, which leaves
       ~59px for a brand name that wants ~90px. So the CTA moves to a
       fixed bottom bar and a menu button takes its place. */
    .hdr-cta { display:none; }
    .hdr-inner { padding:9px 16px !important; gap:10px !important; }
    .lang-btn { min-height:44px; padding:10px 14px !important; }

    .mnav-btn { display:inline-flex; align-items:center; justify-content:center;
      width:44px; height:44px; flex:none; padding:0; cursor:pointer;
      background:transparent; border:1.5px solid rgba(22,50,79,.18); border-radius:14px; }
    .mnav-btn span { position:relative; }
    .mnav-btn span, .mnav-btn span::before, .mnav-btn span::after {
      content:''; display:block; width:18px; height:2px; border-radius:2px;
      background:#16324F; transition:transform .25s ease, background .15s ease; }
    .mnav-btn span::before { position:absolute; top:-6px; }
    .mnav-btn span::after  { position:absolute; top:6px; }
    .mnav-btn[data-open="1"] span { background:transparent; }
    .mnav-btn[data-open="1"] span::before { transform:translateY(6px) rotate(45deg); }
    .mnav-btn[data-open="1"] span::after  { transform:translateY(-6px) rotate(-45deg); }

    /* The sheet sits *under* the header (z 49 vs 50) and slides out from
       beneath it, so the close button never travels with the panel. */
    .msheet { display:block; position:fixed; z-index:49; inset-inline:0; top:0;
      padding-top:62px; background:#FBF6EE; border-bottom:1px solid rgba(22,50,79,.08);
      box-shadow:0 24px 48px rgba(22,50,79,.16);
      transform:translateY(-102%); transition:transform .38s cubic-bezier(.2,.8,.2,1); }
    .msheet[data-open="1"] { transform:none; }
    .msheet nav { display:flex; flex-direction:column; padding:4px 20px 20px; }
    .msheet a { display:flex; align-items:center; min-height:54px; font-size:18px;
      font-weight:700; color:#16324F; border-top:1px solid rgba(22,50,79,.08); }
    .msheet a:first-child { border-top:0; }
    .msheet a.is-cta { margin-top:16px; border-top:0; justify-content:center;
      background:#E4572E; color:#FBF6EE; font-weight:900; border-radius:99px; }

    .mbar { display:flex; position:fixed; z-index:48; inset-inline:0; bottom:0; gap:10px;
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));
      background:rgba(251,246,238,.93); backdrop-filter:blur(10px);
      border-top:1px solid rgba(22,50,79,.10);
      transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .26s ease; }
    /* The bar is only a shortcut to the contact section. Once you are in it,
       the form is the call to action and the bar is in the way of it. */
    .mbar[data-hide="1"] { transform:translateY(130%); opacity:0; pointer-events:none; }
    .mbar-cta { flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
      min-height:50px; background:#E4572E; color:#FBF6EE; font-weight:900; font-size:16px;
      border-radius:99px; }
    /* Without this the bar covers the last line of the footer. */
    .pagewrap { padding-bottom:78px; }

    /* The sticky header is shorter here than the 82px desktop offset. */
    #services, #about, #session, #dogs, #contact { scroll-margin-top:64px; }

    /* --- hero ---------------------------------------------------------
       The four-photo mosaic is a desktop composition: at 350px each of its
       two columns is ~168px, so every photo becomes a thumbnail. One photo
       carries the fold instead, with the amber stat chip on its corner. */
    .hero-h1 { font-size:clamp(32px,9vw,44px) !important; }
    .hero-blob { display:none; }
    .hero-cta { flex:1 1 100%; display:flex; justify-content:center; }
    /* All three hero photos share one frame and cross-fade through it. The
       two column wrappers become display:contents so the images land as
       direct children of the frame and can stack on top of each other
       without touching the desktop collage markup. */
    .hero-art { display:block; position:relative; aspect-ratio:4/3; }
    .hero-col-a, .hero-col-b { display:contents; }
    .hero-shot { position:absolute; inset:0;
      width:100% !important; height:100%; aspect-ratio:auto !important;
      object-fit:cover; border-radius:24px !important; animation:none !important;
      opacity:0; transition:opacity .9s ease; }
    /* Before the script runs — and if it never does — the first photo shows. */
    .hero-p1 { opacity:1; }
    .hero-art[data-slides="1"] .hero-p1 { opacity:0; }
    .hero-art[data-slides="1"] .hero-shot.on { opacity:1; }
    /* Sits inside the frame as a badge. Hanging it off the bottom edge left
       a box half on the photo and half on the page background, which read as
       a mistake rather than as a deliberate overlap. */
    .hero-stat { position:absolute; z-index:2; inset-inline-start:12px; bottom:12px;
      display:flex; align-items:center; gap:9px;
      padding:9px 14px !important; border-radius:15px !important;
      animation:none !important; box-shadow:0 10px 24px rgba(22,50,79,.26); }
    .hero-stat > div:first-child { font-size:23px !important; }
    .hero-stat > div:last-child { font-size:12px !important; line-height:1.2; max-width:8.5em; }
    /* The cue's top resolves to min(100% - 70, 100vh - 132). Once the hero
       stacks to ~880px that lands it in the middle of the photo, and the
       bottom bar now owns that strip anyway. */
    .scrollcue { display:none; }

    /* --- card rails ---------------------------------------------------
       Four sections × 3–4 cards is 13 full-width cards of vertical scroll.
       As rails they bleed to the screen edge and the next card peeks, so
       the row reads as swipeable without a label saying so. */
    .rail { display:flex !important; grid-template-columns:none !important;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; margin-inline:-20px; padding:4px 20px 10px;
      scroll-padding-inline-start:20px; }
    .rail::-webkit-scrollbar { display:none; }
    .rail > * { flex:0 0 78%; min-width:0; scroll-snap-align:start; }
    .raildots { display:flex; justify-content:center; gap:7px; margin-top:10px; }
    .raildots i { width:6px; height:6px; border-radius:50%; background:rgba(22,50,79,.22);
      transition:width .25s ease, background .25s ease; }
    .raildots i.on { width:18px; border-radius:3px; background:#E4572E; }
    .rail-dark + .raildots i { background:rgba(251,246,238,.30); }
    .rail-dark + .raildots i.on { background:#F2A03D; }

    /* The certificate button otherwise wraps onto a ragged second line
       under the 34px icon, at ~30px tall. */
    .cert-link { flex:1 1 100%; display:flex; align-items:center; justify-content:center;
      min-height:44px; }

    /* --- paw trail on mobile ------------------------------------------
       There is no margin to walk in, so the page gives the trail a real
       lane: every content container is indented by 48px and the prints walk
       inside that gutter. This is why prints work where the drawn mascot did
       not — the lane costs 28px of width, the dog needed 96px of margin. */
    .trail { width:40px; inset-inline-start:4px; }
    .trail .pp { width:17px; }
    .trail .pp.in { opacity:.13; }
    .trail .pp.on-dark.in { opacity:.18; }
    .trail .pp[data-s="0"] { inset-inline-start:1px; }
    .trail .pp[data-s="1"] { inset-inline-start:11px; }
    .trail .hp { width:14px; }
    .trail .hp.in { opacity:.26; }
    .trail .hp[data-s="0"] { inset-inline-start:24px; }
    .trail .hp[data-s="1"] { inset-inline-start:21px; }

    /* The lane, scoped to data-trail so it disappears with the trail instead
       of leaving a lopsided 48px indent behind. !important because every one
       of these containers carries its padding as an inline shorthand from
       the design tool. */
    .pagewrap[data-trail="1"] .gut { padding-inline-start:48px !important; }
    /* A rail must bleed off the far edge only — bleeding both ways would put
       the peeking card straight back into the lane we just cleared. */
    .pagewrap[data-trail="1"] .rail { margin-inline:0 -20px; padding-block:4px 10px;
      padding-inline:0 20px; scroll-padding-inline-start:0; }
  }

  /* Every interactive element on this page is styled with style-hover only,
     which never fires on touch — so without this, nothing acknowledges a tap. */
  @media (hover:none){
    a, button { -webkit-tap-highlight-color:rgba(228,87,46,.12); }
    a:active, button:active { transform:scale(.98); }
  }

  @media (prefers-reduced-motion: reduce){ *{animation:none !important} }
  /* With transitions off the prints would pop in on scroll, which is worse
     than simply being there — so under reduced motion the whole trail is
     drawn from the start. */
  @media (prefers-reduced-motion: reduce){
    .trail .pp { opacity:.16 !important; transform:none !important; }
    .trail .pp.on-dark { opacity:.22 !important; }
    .trail .hp { opacity:.30 !important; }
  }
  @media (prefers-reduced-motion: reduce){ .dogpal, .dogpal *, .scrollcue, .msheet, .raildots i, .trail .pp { transition:none !important } .dogpal .dg-part { transform:none !important }
    /* The `*` rule above cannot reach pseudo-elements, so the cue dot needs
       its own stop; it then rests at the visible top-of-track base state. */
    .scrollcue .cue-track::after { animation:none !important } }

/* ---- generated from style-hover / style-focus ---- */
[data-x~="hover-1"]:hover { border-color:#16324F; background:#16324F; color:#FBF6EE; }
[data-x~="hover-2"]:hover { background:#16324F; color:#FBF6EE; }
[data-x~="hover-3"]:hover { background:#E4572E; }
[data-x~="hover-4"]:hover { background:rgba(22,50,79,.06); }
[data-x~="hover-5"]:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(22,50,79,.12); }
[data-x~="hover-6"]:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(22,50,79,.24); }
[data-x~="hover-7"]:hover { background:#16324F; color:#FBF6EE; border-color:#16324F; }
[data-x~="hover-8"]:hover { color:#E4572E; }
[data-x~="hover-9"]:hover { background:#16324F; }
[data-x~="hover-10"]:hover { background:#FBF6EE; color:#16324F; }
[data-x~="focus-11"]:focus { outline:none; border-color:#E4572E; }
[data-x]:hover { transition: transform .25s ease, box-shadow .25s ease, background .15s ease, color .15s ease, border-color .15s ease; }

/* ---- rails that stack instead of scrolling sideways ---- */
@media (max-width:820px){
  .rail[data-stack]{ display:grid !important; grid-template-columns:1fr !important;
    overflow-x:visible !important; scroll-snap-type:none !important;
    margin-inline:0 !important; padding-block:0 !important; }
  .rail[data-stack] > *{ flex:none !important; width:auto !important;
    scroll-snap-align:none !important; }
  .rail[data-stack] + .raildots{ display:none !important; }
}