/* ============================================================
   ELUSIVE MOOSE AGENCY — Design System
   We Find What Others Miss.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* Palette */
  --forest:#2F5D50;
  --forest-deep:#1E3F36;
  --forest-ink:#16302A;
  --moss:#6E8B5C;
  --moss-light:#8FAA7C;
  --tan:#C8A36B;
  --tan-light:#E2C99C;
  --orange:#D9792B;
  --orange-light:#EFA463;
  --charcoal:#222529;
  --charcoal-soft:#3A4046;
  --offwhite:#F8F6F2;
  --paper:#FBFAF6;
  --paper-warm:#F2EDE2;
  --line:rgba(34,37,41,.10);
  --line-strong:rgba(34,37,41,.18);

  /* Type */
  --display:'Manrope',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  /* Space */
  --gutter:clamp(20px,5vw,64px);
  --maxw:1220px;
  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --r-xl:40px;

  /* Shadow */
  --sh-sm:0 2px 8px rgba(22,48,42,.06);
  --sh:0 10px 30px -12px rgba(22,48,42,.18), 0 2px 8px rgba(22,48,42,.05);
  --sh-lg:0 34px 70px -30px rgba(22,48,42,.34), 0 8px 24px rgba(22,48,42,.08);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.68;
  color:var(--charcoal);
  background:var(--offwhite);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain — very subtle, applied globally */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* height:auto is not optional here. Every screenshot carries width/height
   attributes for layout stability, and without this the height attribute wins
   and the image stretches. */
img,svg{max-width:100%;height:auto;display:block}

/* Any image that fills a fixed-ratio box. */
.frame{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--forest-ink)}
.frame > img,.frame > svg{
  width:100%;height:100%;object-fit:cover;object-position:top center;
}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.028em;margin:0 0 .5em;color:var(--forest-ink)}
h1{font-size:clamp(2.6rem,6.4vw,5.1rem)}
h2{font-size:clamp(2rem,4.1vw,3.35rem)}
h3{font-size:clamp(1.3rem,2vw,1.72rem);letter-spacing:-.02em}
h4{font-size:1.08rem;letter-spacing:-.01em;font-weight:700}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.wrap-wide{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--display);font-weight:700;font-size:.735rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--moss);display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";width:26px;height:1.5px;background:currentColor;opacity:.5;border-radius:2px;
}
.eyebrow.on-dark{color:var(--tan)}

.lead{font-size:clamp(1.06rem,1.42vw,1.24rem);color:var(--charcoal-soft);line-height:1.68;max-width:60ch}
.muted{color:var(--charcoal-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.62em;
  font-family:var(--display);font-weight:700;font-size:.955rem;letter-spacing:-.005em;
  padding:.98em 1.7em;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2.5px)}
.btn:hover svg{transform:translateX(3.5px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px -10px rgba(217,121,43,.72)}
.btn-primary:hover{background:#c96c23;box-shadow:0 18px 34px -12px rgba(217,121,43,.8)}
.btn-forest{background:var(--forest);color:#fff;box-shadow:0 10px 24px -10px rgba(47,93,80,.6)}
.btn-forest:hover{background:var(--forest-deep)}
.btn-ghost{
  border-color:var(--forest);color:var(--forest-ink);background:rgba(255,255,255,.82);
  box-shadow:0 6px 18px -12px rgba(22,48,42,.5);
}
.btn-ghost:hover{border-color:var(--forest-deep);background:#fff;box-shadow:0 12px 26px -14px rgba(22,48,42,.5)}
.btn-ghost.on-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42);color:#fff;
  box-shadow:none}
.btn-ghost.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.18);box-shadow:none}
.btn-sm{padding:.72em 1.3em;font-size:.875rem}

/* ---------- Skip link / focus ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:1000;padding:.85em 1.4em;background:var(--forest);
  color:#fff;font-family:var(--display);font-weight:700;border-radius:0 0 12px 0;
}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:4px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(248,246,242,.86);backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--line);box-shadow:0 1px 24px rgba(22,48,42,.05)}
.nav-inner{max-width:1440px;margin-inline:auto;padding:.85rem var(--gutter);display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;flex:none}
.brand-mark{width:40px;height:40px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--display);font-weight:800;font-size:.94rem;letter-spacing:-.03em;
  color:var(--forest-ink);white-space:nowrap}
.brand-tag{font-family:var(--display);font-weight:700;font-size:.53rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--moss);margin-top:4px;white-space:nowrap}

.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--display);font-weight:600;font-size:.895rem;color:var(--charcoal-soft);
  padding:.55rem .82rem;border-radius:100px;transition:color .25s,background .25s;position:relative;white-space:nowrap;
}
.nav-links a:hover{color:var(--forest-ink);background:rgba(47,93,80,.07)}
.nav-links a.active{color:var(--forest);font-weight:700}
.nav-cta{margin-left:.6rem}

/* dropdown */
.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 10px);left:-8px;min-width:265px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .28s var(--ease);list-style:none;margin:0;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:.62rem .8rem;border-radius:11px;font-size:.885rem}
.sub a small{display:block;font-family:var(--body);font-weight:400;font-size:.775rem;color:var(--charcoal-soft);margin-top:1px;letter-spacing:0}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;flex-direction:column;gap:5px;margin-left:auto}
.burger span{display:block;width:24px;height:2px;background:var(--forest-ink);border-radius:2px;transition:transform .3s var(--ease),opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1000px){
  /* the brand already pushes the burger right with margin-left:auto — the 2rem
     flex gap on top of that pushed the burger past the edge on 320px screens */
  .nav-inner{gap:.6rem}
  .nav-links{
    position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--paper);padding:1.1rem var(--gutter) 1.8rem;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-lg);transform:translateY(-125%);transition:transform .42s var(--ease);
    max-height:calc(100svh - 68px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.8rem .6rem;font-size:1rem}
  /* min-width:265px is for the desktop dropdown; inside the drawer it overflowed
     the gutter on narrow phones */
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:rgba(47,93,80,.045);padding:.25rem;margin:.1rem 0 .4rem;min-width:0}
  .nav-cta{margin:.7rem 0 0}
  /* the burger is the only way to navigate on a phone — give it a full 44px target */
  .burger{display:flex;justify-content:center;min-width:44px;min-height:44px;padding:.5rem .35rem}
  .nav:not(.scrolled){background:rgba(248,246,242,.9);backdrop-filter:blur(14px)}
}

@media(max-width:360px){
  .brand-mark{width:34px;height:34px}
  .brand-name{font-size:.86rem}
}

/* ---------- Sections ---------- */
section{position:relative}
.sec{padding:clamp(72px,9.5vw,140px) 0}
.sec-sm{padding:clamp(54px,6.5vw,90px) 0}
.sec-dark{background:var(--forest-ink);color:rgba(255,255,255,.86)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-dark .lead,.sec-dark .muted{color:rgba(255,255,255,.72)}
.sec-paper{background:var(--paper-warm)}
.sec-forest{background:var(--forest);color:rgba(255,255,255,.88)}
.sec-forest h1,.sec-forest h2,.sec-forest h3,.sec-forest h4{color:#fff}
.sec-forest .lead,.sec-forest .muted,.sec-forest p{color:rgba(255,255,255,.78)}

/* topo contour texture layer */
.topo{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%232F5D50' stroke-opacity='.13' stroke-width='1.1'%3E%3Cpath d='M-40 300c90-70 190-40 260 20s150 90 250 40 160-30 210 20'/%3E%3Cpath d='M-40 355c95-72 196-42 268 18s152 92 254 42 162-32 214 22'/%3E%3Cpath d='M-40 410c100-74 202-44 276 16s154 94 258 44 164-34 218 24'/%3E%3Cpath d='M-40 130c70-52 158-30 224 26s134 76 226 34 150-24 200 20'/%3E%3Cpath d='M-40 78c74-54 164-32 232 24s138 78 232 36 154-26 206 22'/%3E%3Cpath d='M-40 520c108-78 214-48 292 14s158 98 264 48'/%3E%3C/g%3E%3C/svg%3E");
  background-size:760px;
}
.topo.on-dark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%23C8A36B' stroke-opacity='.16' stroke-width='1.1'%3E%3Cpath d='M-40 300c90-70 190-40 260 20s150 90 250 40 160-30 210 20'/%3E%3Cpath d='M-40 355c95-72 196-42 268 18s152 92 254 42 162-32 214 22'/%3E%3Cpath d='M-40 410c100-74 202-44 276 16s154 94 258 44 164-34 218 24'/%3E%3Cpath d='M-40 130c70-52 158-30 224 26s134 76 226 34 150-24 200 20'/%3E%3Cpath d='M-40 78c74-54 164-32 232 24s138 78 232 36 154-26 206 22'/%3E%3Cpath d='M-40 520c108-78 214-48 292 14s158 98 264 48'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.75;
}

/* ---------- Reveal animation ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}.rv-d6{transition-delay:.54s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.05ms!important}
}

/* ---------- Cards ---------- */
.grid{display:grid;gap:clamp(18px,2.2vw,30px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,36px);box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:rgba(110,139,92,.4)}
/* Icons are sized globally, never by their container. Left unsized, an inline
   SVG expands to the full width of whatever it lands in. */
.icon{width:52px;height:52px;flex:none}
.card .icon{margin-bottom:1.25rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.955rem;color:var(--charcoal-soft);margin-bottom:0}
.card-dark{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.card-dark:hover{border-color:rgba(200,163,107,.45);background:rgba(255,255,255,.07)}
.card-dark p{color:rgba(255,255,255,.7)}

.card-link{display:inline-flex;align-items:center;gap:.45em;margin-top:1.1rem;font-family:var(--display);font-weight:700;font-size:.885rem;color:var(--orange)}
.card-link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.card:hover .card-link svg{transform:translateX(4px)}

/* ---------- Trail marker (section connector) ---------- */
.trail-marks{display:flex;align-items:center;justify-content:center;gap:22px;padding:6px 0}
.trail-marks svg{width:26px;height:26px;opacity:0;transform:translateY(10px) rotate(var(--rot,0deg))}
.trail-marks.in svg{animation:hoof .6s var(--ease) forwards}
.trail-marks.in svg:nth-child(2){animation-delay:.14s}
.trail-marks.in svg:nth-child(3){animation-delay:.28s}
.trail-marks.in svg:nth-child(4){animation-delay:.42s}
.trail-marks.in svg:nth-child(5){animation-delay:.56s}
@keyframes hoof{to{opacity:.42;transform:translateY(0) rotate(var(--rot,0deg))}}

/* ---------- Stats ---------- */
.stat{text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,4.4vw,3.5rem);letter-spacing:-.045em;color:var(--tan);line-height:1}
.stat span{display:block;font-size:.83rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;margin-top:.6rem;opacity:.8}

/* ---------- Footer ---------- */
.footer{background:var(--forest-ink);color:rgba(255,255,255,.66);padding:clamp(56px,6vw,84px) 0 2rem;position:relative;overflow:hidden}
.footer h4{color:#fff;font-size:.75rem;letter-spacing:.19em;text-transform:uppercase;color:var(--tan);margin-bottom:1.15rem}
.footer a{color:rgba(255,255,255,.66);transition:color .25s}
.footer a:hover{color:var(--tan-light)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:clamp(28px,3.5vw,54px)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.92rem}
/* thumb-sized footer links on touch screens — 17px-tall text links sat too close
   together to hit reliably */
@media(max-width:760px){
  /* tapping an email or phone number is the whole point of those links on a phone */
  a[href^="mailto:"],a[href^="tel:"]{display:inline-block;padding-block:.4rem}
  .footer ul{gap:.1rem}
  .footer ul a{display:inline-block;padding:.55rem 0;min-height:24px}
  .footer-bottom{font-size:.86rem;gap:.75rem}
  .footer-bottom a{display:inline-block;padding:.35rem 0}
}
.footer-bottom{
  margin-top:clamp(40px,4.5vw,64px);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.83rem;color:rgba(255,255,255,.48);
}
.footer-ridge{position:absolute;left:0;right:0;top:0;height:60px;opacity:.16;pointer-events:none}

/* newsletter */
.nl{display:flex;gap:.55rem;margin-top:1rem;flex-wrap:wrap}
.nl input{
  flex:1 1 170px;min-width:0;padding:.85em 1.1em;border-radius:100px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#fff;font-family:var(--body);font-size:.9rem;
}
.nl input::placeholder{color:rgba(255,255,255,.42)}
.nl input:focus{outline:none;border-color:var(--tan);background:rgba(255,255,255,.11)}

/* ---------- Forms ---------- */
.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.03em;margin-bottom:.42rem;color:var(--forest-ink)}
.field input,.field select,.field textarea{
  width:100%;padding:.88em 1.05em;border:1.5px solid var(--line-strong);border-radius:14px;
  font-family:var(--body);font-size:.96rem;background:var(--paper);color:var(--charcoal);
  transition:border-color .25s,box-shadow .25s;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--moss);box-shadow:0 0 0 4px rgba(110,139,92,.15);
}

/* ---------- Misc ---------- */
.pill{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.42em .95em;border-radius:100px;background:rgba(110,139,92,.16);color:var(--forest);
}
.pill.tan{background:rgba(200,163,107,.24);color:#8a6a2e}
.pill.orange{background:rgba(217,121,43,.16);color:#a9541a}
.pill.on-dark{background:rgba(200,163,107,.2);color:var(--tan-light)}

.center{text-align:center}
.mx-auto{margin-inline:auto}
.stack-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.center .stack-cta{justify-content:center}

hr.rule{border:0;height:1px;background:var(--line);margin:clamp(40px,4vw,64px) 0}

/* ---------- Motion primitives ---------- */
@keyframes sway{
  0%,100%{transform:rotate(calc(var(--sway-amt,1deg) * -1))}
  50%{transform:rotate(var(--sway-amt,1deg))}
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-16px) rotate(3deg)}
}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg);opacity:0}
  10%{opacity:.55}
  90%{opacity:.35}
  100%{transform:translate(70px,150px) rotate(190deg);opacity:0}
}
@keyframes flicker{
  0%,100%{opacity:.85;transform:scaleY(1)}
  50%{opacity:1;transform:scaleY(1.09)}
}

/* Hidden moose peek */
.peek{transition:transform 1.1s var(--ease),opacity 1.1s var(--ease);opacity:0}
.peek.peeking{opacity:1}
.peek-up{transform:translateY(38px)}
.peek-up.peeking{transform:translateY(0)}
.peek-right{transform:translateX(-34px)}
.peek-right.peeking{transform:translateX(0)}
.peek-left{transform:translateX(34px)}
.peek-left.peeking{transform:translateX(0)}

/* floating leaf */
.leaf{position:absolute;pointer-events:none;opacity:.5;animation:float 9s ease-in-out infinite}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(660px,100svh,1000px);display:flex;align-items:center;overflow:hidden;background:linear-gradient(180deg,#F8F6F2 0%,#F0EFE7 44%,#E7E9DC 100%)}
.hero-scene{position:absolute;inset:0;pointer-events:none;z-index:0}
.hs-glow{position:absolute;inset:0;width:100%;height:100%}
.hs-layer{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;will-change:transform}
.hs-moose{z-index:2}
@media(max-width:760px){
  /* the global `svg{max-width:100%}` reset was capping this back to 100%, so the
     layers stayed viewport-wide but shifted -45% — leaving the right side of the
     hero bare. max-width:none lets the 190% zoom actually apply. */
  .hs-layer{width:190%;max-width:none;left:-45%}
  .hs-glow{width:100%}
}

/* Layer 1: soft fog, drifting very slowly */
.hs-fog{
  position:absolute;left:-18%;right:-18%;top:6%;height:48%;
  background:linear-gradient(90deg,transparent 0%,rgba(248,246,242,.55) 22%,
    rgba(248,246,242,.3) 50%,rgba(248,246,242,.55) 78%,transparent 100%);
  filter:blur(20px);opacity:.55;animation:fogDrift 48s ease-in-out infinite;will-change:transform;
}
@keyframes fogDrift{0%,100%{transform:translateX(-4%)}50%{transform:translateX(4%)}}

/* Layers 6/7: the hidden moose — found by moving the mouse, or scrolled partly into view */
.hsm-rig{transition:transform .3s var(--ease)}
.hsm-antlers{opacity:var(--antler-op,.4);transition:opacity .4s linear}
.hsm-head{opacity:var(--head-op,0);transition:opacity .55s linear}
.hsm-eyes{opacity:var(--eyes-op,0);transition:opacity .45s linear}
.hsm-shades{opacity:var(--shades-op,0);transition:opacity .5s linear}
.hs-cue{
  position:absolute;right:clamp(18px,4vw,64px);top:38%;z-index:2;max-width:170px;
  font-family:var(--display);font-size:.72rem;font-weight:600;line-height:1.4;color:var(--tan-light);
  background:rgba(22,48,42,.55);padding:.6rem .8rem;border-radius:var(--r-md);
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
.hs-cue.show{opacity:1}
@media(max-width:760px){.hs-cue{display:none}}
@media(prefers-reduced-motion:reduce){
  .hs-fog{animation:none}
  .hsm-antlers,.hsm-head,.hsm-eyes,.hsm-shades{opacity:1!important}
  .hs-cue{display:none}
}

/* "The forest opens into a clearing" — services section brightens into view */
.clearing{position:relative}
.clearing::before{
  content:"";position:absolute;inset:-10% -10% auto -10%;height:70%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(255,253,247,.95) 0%,rgba(255,253,247,0) 70%);
  opacity:0;transform:scale(.4);transform-origin:50% 0%;
  transition:opacity 1.4s var(--ease),transform 1.4s var(--ease);
}
.clearing.in::before{opacity:1;transform:scale(1)}
.clearing>.topo,.clearing>.wrap{position:relative;z-index:1}
.hero .wrap{padding-top:clamp(104px,12vh,140px);padding-bottom:clamp(300px,33vh,400px)}
.hero-copy{max-width:min(760px,92%)}
.hero-logo{
  width:clamp(148px,15vw,210px);height:auto;margin-bottom:clamp(18px,2.4vw,28px);
  filter:drop-shadow(0 14px 26px rgba(22,48,42,.16));
}
.hero h1{margin-bottom:.3em}
.hero h1 em{font-style:normal;color:var(--forest);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.03em;height:.14em;border-radius:6px;
  background:linear-gradient(90deg,var(--tan),var(--orange));opacity:.42;
  transform:scaleX(0);transform-origin:left;animation:underline 1.1s .75s var(--ease) forwards;
}
@keyframes underline{to{transform:scaleX(1)}}
.hero .lead{font-size:clamp(1.08rem,1.55vw,1.3rem);max-width:53ch}
.hero-fade-in{opacity:0;transform:translateY(20px);animation:heroIn .95s var(--ease) forwards}
.hero-fade-in.d1{animation-delay:.1s}.hero-fade-in.d2{animation-delay:.24s}
.hero-fade-in.d3{animation-delay:.38s}.hero-fade-in.d4{animation-delay:.52s}
@keyframes heroIn{to{opacity:1;transform:none}}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--display);font-size:.665rem;letter-spacing:.24em;text-transform:uppercase;color:var(--forest);opacity:.62;
}
.scroll-cue .line{width:1.5px;height:38px;background:linear-gradient(180deg,var(--forest),transparent);border-radius:2px;animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.45);transform-origin:top;opacity:.35}50%{transform:scaleY(1);transform-origin:top;opacity:.85}}
/* on phones the treeline reaches the bottom of the hero, so the cue sits on dark
   green — flip it light so it stays readable */
@media(max-width:760px){
  .scroll-cue{color:var(--tan-light);opacity:.85}
  .scroll-cue .line{background:linear-gradient(180deg,var(--tan-light),transparent)}
}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split.rev>*:first-child{order:2}
@media(max-width:880px){.split.rev>*:first-child{order:0}}

/* ---------- Numbered process trail ---------- */
.trail-steps{position:relative;display:grid;gap:clamp(26px,3vw,44px)}
.trail-steps::before{
  content:"";position:absolute;left:27px;top:24px;bottom:24px;width:2px;
  background:repeating-linear-gradient(180deg,var(--moss) 0 8px,transparent 8px 18px);opacity:.42;
}
@media(max-width:620px){.trail-steps::before{left:21px}}
.step{display:grid;grid-template-columns:56px 1fr;gap:clamp(16px,2vw,26px);align-items:start;position:relative}
@media(max-width:620px){.step{grid-template-columns:44px 1fr}}
.step-num{
  width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid rgba(110,139,92,.55);
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--forest);
  box-shadow:0 0 0 7px var(--offwhite);z-index:1;
}
@media(max-width:620px){.step-num{width:44px;height:44px;font-size:.9rem;box-shadow:0 0 0 6px var(--offwhite)}}
.sec-paper .step-num{box-shadow:0 0 0 7px var(--paper-warm)}
/* Sized against the 56px circle it sits in, not left looking like a pin. */
.step-ico{width:42px;height:42px;stroke-width:2.1;will-change:transform,opacity}
@media(max-width:620px){.step-ico{width:33px;height:33px}}
.step h3{margin-bottom:.35rem}
.step p{color:var(--charcoal-soft);font-size:.97rem;margin-bottom:0}

/* ---------- Quote ---------- */
.quote{
  position:relative;border-left:3px solid var(--tan);padding:.35rem 0 .35rem clamp(20px,2.4vw,34px);
  font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2vw,1.62rem);line-height:1.44;
  letter-spacing:-.02em;color:var(--forest-ink);
}
.sec-dark .quote,.sec-forest .quote{color:#fff}
.quote cite{display:block;font-family:var(--body);font-weight:400;font-size:.9rem;font-style:normal;color:var(--charcoal-soft);margin-top:1rem;letter-spacing:0}
.sec-dark .quote cite,.sec-forest .quote cite{color:rgba(255,255,255,.6)}

/* ---------- Form note ---------- */
.form-note{
  margin-top:1rem;padding:.9em 1.15em;border-radius:14px;background:rgba(110,139,92,.14);
  border:1px solid rgba(110,139,92,.32);color:var(--forest);font-size:.92rem;font-weight:500;
}

/* ---------- Sighting teaser cards (home) ---------- */
.sighting-card{
  display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.sighting-card:hover{transform:translateY(-7px);box-shadow:var(--sh-lg)}
.sighting-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--charcoal)}
.sighting-shot > img,.sighting-shot > svg{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .7s var(--ease);
}
.sighting-card:hover .sighting-shot > img,
.sighting-card:hover .sighting-shot > svg{transform:scale(1.035)}
.sighting-no{
  position:absolute;top:14px;left:14px;z-index:2;font-family:var(--display);font-weight:800;font-size:.66rem;
  letter-spacing:.16em;padding:.42em .8em;border-radius:100px;background:rgba(251,250,246,.92);color:var(--forest-ink);
}
.sighting-body{padding:clamp(20px,2.2vw,28px)}
.sighting-body h3{margin-bottom:.3rem}
.sighting-meta{font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--moss);margin-bottom:.85rem}
.sighting-body p{font-size:.94rem;color:var(--charcoal-soft);margin-bottom:0}

/* ---------- Tick lists ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.72rem}
.ticks li{position:relative;padding-left:1.85rem;font-size:.945rem;color:var(--charcoal-soft);line-height:1.5}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:1.05rem;height:1.05rem;border-radius:50%;
  background:rgba(110,139,92,.18);
}
.ticks li::after{
  content:"";position:absolute;left:.29rem;top:.68em;width:.46rem;height:.24rem;
  border-left:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(-45deg);
}

/* ---------- FAQ ---------- */
.faq{
  border-bottom:1px solid rgba(255,255,255,.13);padding:.35rem 0;
}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 2.4rem 1.05rem 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.5vw,1.12rem);
  color:#fff;letter-spacing:-.015em;transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--tan-light)}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--tan);border-bottom:2px solid var(--tan);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{padding:0 2.4rem 1.15rem 0;color:rgba(255,255,255,.72);font-size:.96rem;margin:0}

/* page header for inner pages */
/* Bottom padding has to clear .head-ridge, or the copy sits on the curve. */
.page-head{padding:clamp(118px,13vw,168px) 0 clamp(112px,13vw,168px);position:relative;overflow:hidden;background:var(--paper-warm)}
.page-head .wrap{max-width:960px}
.page-head h1{margin-bottom:.35em}
.page-head .lead{max-width:56ch}
.head-ridge{position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,8vw,110px);pointer-events:none}

/* ============================================================
   CAMP SCENE
   Static background, live campfire. The fire is SVG so it can be
   animated with CSS and stays crisp at any size.
   ============================================================ */
.camp-scene{
  position:relative;
  width:100%;
  aspect-ratio:1200/909;          /* matches the artwork exactly, so the fire never drifts */
  overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  border:1px solid var(--line);
  background:#16302A;

  /* Where the flame sits. Measured against the artwork, not guessed. */
  --fire-x:49.3%;
  --fire-y:-5.2%;
  --fire-w:44%;
}
.camp-scene__img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- the fire ---------- */
.campfire-overlay{
  position:absolute;
  left:var(--fire-x);
  bottom:var(--fire-y);
  width:var(--fire-w);
  height:auto;
  transform:translateX(-50%);
  overflow:visible;
  pointer-events:none;
}
.fire-logs{display:none}   /* the artwork supplies the woodpile */

.fire-glow{transform-origin:100px 128px}
.fire-glow--outer{fill:url(#emGlowOut);animation:fireGlowOuter 2.3s ease-in-out infinite alternate}
.fire-glow--inner{fill:url(#emGlowIn);animation:fireGlowInner 1.8s ease-in-out infinite alternate}

.flame-group{transform-origin:100px 130px;animation:flameGroupMove 1.9s ease-in-out infinite alternate}
.flame{transform-origin:100px 130px}
.flame--outer{fill:#f59e0b;animation:outerFlame 1.55s ease-in-out infinite alternate}
.flame--mid{fill:#fb923c;animation:middleFlame 1.25s ease-in-out infinite alternate}
.flame--inner{fill:#fff0b5;animation:innerFlame 1.05s ease-in-out infinite alternate}

.ember{fill:#ffd36f;opacity:0}
.ember--1{animation:emberOne 2.6s ease-out infinite}
.ember--2{animation:emberTwo 2.2s ease-out infinite .45s}
.ember--3{animation:emberThree 2.9s ease-out infinite .8s}
.ember--4{animation:emberFour 2.4s ease-out infinite 1.15s}

@keyframes flameGroupMove{
  0%{transform:translateY(0) scaleX(1) scaleY(1)}
  45%{transform:translateY(-1px) scaleX(1.025) scaleY(.98)}
  100%{transform:translateY(-2px) scaleX(.99) scaleY(1.035)}
}
@keyframes outerFlame{
  0%{transform:translate(0,0) rotate(0deg) scaleX(1) scaleY(1);opacity:.94}
  35%{transform:translate(-1px,-1px) rotate(-1deg) scaleX(1.04) scaleY(.97);opacity:1}
  70%{transform:translate(1px,-2px) rotate(1deg) scaleX(.97) scaleY(1.06);opacity:.92}
  100%{transform:translate(0,-1px) rotate(-.5deg) scaleX(1.02) scaleY(1.02);opacity:.98}
}
@keyframes middleFlame{
  0%{transform:translate(0,0) rotate(0deg) scaleX(1) scaleY(1)}
  50%{transform:translate(1px,-2px) rotate(1.5deg) scaleX(.95) scaleY(1.08)}
  100%{transform:translate(-1px,-1px) rotate(-1deg) scaleX(1.04) scaleY(.98)}
}
@keyframes innerFlame{
  0%{transform:translateY(0) scaleX(1) scaleY(1);opacity:.9}
  50%{transform:translateY(-2px) scaleX(1.05) scaleY(.95);opacity:1}
  100%{transform:translateY(-1px) scaleX(.96) scaleY(1.08);opacity:.94}
}
@keyframes fireGlowOuter{
  0%{transform:scale(.92);opacity:.65}
  50%{transform:scale(1.04);opacity:.9}
  100%{transform:scale(1.12);opacity:.75}
}
@keyframes fireGlowInner{
  0%{transform:scale(.95);opacity:.7}
  100%{transform:scale(1.08);opacity:1}
}
@keyframes emberOne{
  0%{transform:translate(0,0) scale(.9);opacity:0}
  12%{opacity:.9} 60%{opacity:.7}
  100%{transform:translate(-7px,-28px) scale(.25);opacity:0}
}
@keyframes emberTwo{
  0%{transform:translate(0,0) scale(1);opacity:0}
  16%{opacity:1}
  100%{transform:translate(8px,-24px) scale(.3);opacity:0}
}
@keyframes emberThree{
  0%{transform:translate(0,0) scale(.8);opacity:0}
  14%{opacity:.85}
  100%{transform:translate(2px,-31px) scale(.25);opacity:0}
}
@keyframes emberFour{
  0%{transform:translate(0,0) scale(.7);opacity:0}
  15%{opacity:.8}
  100%{transform:translate(6px,-20px) scale(.2);opacity:0}
}

/* A still fire for anyone who has asked the OS for less movement. */
@media (prefers-reduced-motion: reduce){
  .campfire-overlay,.campfire-overlay *{animation:none !important}
  .ember{opacity:.55}
  .fire-glow--outer{opacity:.8}
  .fire-glow--inner{opacity:.9}
}

/* ============================================================
   BUTTERFLY
   Wanders the outside of the closing section. The path avoids the
   middle so it never crosses the headline or the buttons.
   ============================================================ */
.butterfly{
  position:absolute;
  width:clamp(18px,1.9vw,26px);
  left:-6%; top:62%;
  z-index:1;
  opacity:.92;
  pointer-events:none;
  will-change:left,top;
  animation:bfDrift 34s linear infinite;
}
.butterfly svg{width:100%;height:auto;overflow:visible}

/* Wings pivot on the body, each slightly out of step with the other. */
.bf-wing{transform-box:fill-box;transform-origin:right center}
.bf-wing--r{transform-origin:left center}
.bf-wing--l{animation:bfFlapL .42s ease-in-out infinite alternate}
.bf-wing--r{animation:bfFlapR .42s ease-in-out infinite alternate .04s}

@keyframes bfFlapL{
  0%{transform:scaleX(1) rotate(-4deg)}
  100%{transform:scaleX(.22) rotate(5deg)}
}
@keyframes bfFlapR{
  0%{transform:scaleX(1) rotate(4deg)}
  100%{transform:scaleX(.22) rotate(-5deg)}
}

/* A long, unhurried loop. Slight banking so the turns read as flight. */
@keyframes bfDrift{
  0%  {left:-6%;  top:64%; transform:rotate(-10deg)}
  10% {left:7%;   top:44%; transform:rotate(-16deg)}
  20% {left:15%;  top:26%; transform:rotate(-8deg)}
  30% {left:25%;  top:13%; transform:rotate(2deg)}
  42% {left:44%;  top:6%;  transform:rotate(6deg)}
  54% {left:66%;  top:10%; transform:rotate(10deg)}
  64% {left:81%;  top:22%; transform:rotate(16deg)}
  74% {left:91%;  top:40%; transform:rotate(12deg)}
  84% {left:95%;  top:60%; transform:rotate(4deg)}
  93% {left:92%;  top:76%; transform:rotate(-6deg)}
  100%{left:106%; top:82%; transform:rotate(-10deg)}
}

@media (max-width:760px){
  /* Less room beside the copy, so keep her low and out of the way. */
  @keyframes bfDrift{
    0%  {left:-8%; top:86%; transform:rotate(-8deg)}
    50% {left:48%; top:94%; transform:rotate(6deg)}
    100%{left:106%;top:86%; transform:rotate(-8deg)}
  }
}

@media (prefers-reduced-motion: reduce){
  .butterfly{animation:none;left:8%;top:24%}
  .bf-wing{animation:none}
}

/* Contact details read as links, without shouting. */
.footer-bottom a,
.field + .grid a,
.grid > div > p.muted > a{
  border-bottom:1px solid currentColor;
  border-bottom-color:rgba(58,64,70,.28);
  transition:color .25s,border-color .25s;
}
.grid > div > p.muted > a:hover{color:var(--orange);border-bottom-color:var(--orange)}

/* ============================================================
   FOREST SCENE
   Static artwork, three small movements. Slow enough that you notice
   it on the second look, not the first.
   ============================================================ */
.forest-scene{
  position:relative;
  width:100%;
  aspect-ratio:1013/1289;
  overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  border:1px solid var(--line);
  background:#B9C4AC;
}
.forest-scene__img{width:100%;height:100%;object-fit:cover;display:block}
.fs-fx{position:absolute;inset:0;width:100%;height:100%}

/* ---------- mist ---------- */
.fs-mist{
  position:absolute;
  left:-14%; width:128%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(224,230,213,0) 0%,
    rgba(224,230,213,.30) 22%,
    rgba(230,236,220,.42) 50%,
    rgba(224,230,213,.28) 76%,
    rgba(224,230,213,0) 100%);
  filter:blur(14px);
}
.fs-mist--a{top:29%; height:9%;  animation:fsMistA 41s ease-in-out infinite alternate}
.fs-mist--b{top:39%; height:7%;  opacity:.72;
            animation:fsMistB 57s ease-in-out infinite alternate}

@keyframes fsMistA{
  0%  {transform:translateX(-3.5%) scaleX(1)}
  100%{transform:translateX(3.5%)  scaleX(1.05)}
}
@keyframes fsMistB{
  0%  {transform:translateX(3%)  scaleX(1.04)}
  100%{transform:translateX(-3%) scaleX(1)}
}

/* ---------- the blink ---------- */
/* Closed for a fraction of a very long cycle, so it reads as a blink
   rather than a flicker. */
.fs-blink{
  transform-box:fill-box;
  transform-origin:center;
  transform:scaleY(0);
  animation:fsBlink 8.5s ease-in-out infinite;
}
@keyframes fsBlink{
  0%,  95.6%      {transform:scaleY(0)}
  96.6%, 97.8%    {transform:scaleY(1)}
  98.8%, 100%     {transform:scaleY(0)}
}

/* ---------- grass ---------- */
.fs-blade{transform-box:fill-box;transform-origin:bottom center}
.fs-blade--1{animation:fsBlade1 7.4s ease-in-out infinite alternate}
.fs-blade--2{animation:fsBlade2 9.1s ease-in-out infinite alternate -2.2s}
.fs-blade--3{animation:fsBlade3 8.2s ease-in-out infinite alternate -4.6s}

@keyframes fsBlade1{0%{transform:rotate(-1.4deg)} 100%{transform:rotate(1.9deg)}}
@keyframes fsBlade2{0%{transform:rotate(1.6deg)}  100%{transform:rotate(-1.5deg)}}
@keyframes fsBlade3{0%{transform:rotate(1.2deg)}  100%{transform:rotate(-2deg)}}

@media (prefers-reduced-motion: reduce){
  .fs-mist,.fs-blink,.fs-blade{animation:none}
  .fs-blink{transform:scaleY(0)}
}

/* ---------- "In the wild" gallery ---------- */
.wild-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,34px);
}
@media(max-width:720px){.wild-grid{grid-template-columns:1fr}}
.wild-item{margin:0}
.wild-item .frame{box-shadow:var(--sh);border:1px solid var(--line);overflow:hidden}
.wild-item figcaption{
  margin-top:.85rem;font-size:.86rem;color:var(--charcoal-soft);text-align:center;
}
.wild-grid{align-items:start}
.social-shot{max-width:420px;margin-inline:auto;width:100%}

/* A supplied PNG icon brings its own ring, so the CSS circle steps aside.
   These run larger than the bare SVGs did, because the ring is part of the
   artwork now and the glyph inside only occupies about half the box. */
/* The dashed trail runs behind these, so the badge still has to mask it. Disc
   and halo both take the page color, which hides the line without drawing a
   second ring around the one already in the artwork. */
.step-num:has(.is-png){border:0;width:64px;height:64px;
  background:var(--offwhite);box-shadow:0 0 0 7px var(--offwhite)}
.sec-paper .step-num:has(.is-png){background:var(--paper-warm);box-shadow:0 0 0 7px var(--paper-warm)}
.step-num .is-png{width:64px;height:64px}
/* A 64px badge needs a 64px track, and the trail has to run through its center
   rather than the center of the old 56px one. */
.step:has(.is-png){grid-template-columns:64px 1fr}
.trail-steps:has(.is-png)::before{left:31px}
.is-png{object-fit:contain}
.card .is-png,.is-png.icon{width:72px;height:72px}
@media(max-width:620px){
  .step-num:has(.is-png){width:52px;height:52px;box-shadow:0 0 0 6px var(--offwhite)}
  .sec-paper .step-num:has(.is-png){box-shadow:0 0 0 6px var(--paper-warm)}
  .step-num .is-png{width:52px;height:52px}
  .step:has(.is-png){grid-template-columns:52px 1fr}
  .trail-steps:has(.is-png)::before{left:25px}
  .card .is-png,.is-png.icon{width:60px;height:60px}
}

/* Body copy in a step can run to several paragraphs. The last one still sits
   flush, so the badges stay lined up with their headings. */
.step p + p{margin-top:.95em}

/* The disciplines band: the areas of work an entry covered, named plainly.
   Centered to match the stat band it sits next to. */
.disciplines{text-align:center}
.disc-label{font-family:var(--display);font-weight:800;font-size:.79rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--forest);margin:0 0 .5rem}
.disc-detail{font-size:.95rem;margin:0;max-width:30ch;margin-inline:auto}

/* Film grid: one wide clip across the top, verticals beneath it. */
.film-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,30px)}
.film-item{margin:0}
.film-item.film-wide{grid-column:1 / -1}
.film-vid{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  background:var(--forest-ink);box-shadow:var(--sh)}
.film-item figcaption{margin-top:.85rem;font-size:.85rem;color:var(--charcoal-soft);text-align:center}
@media(max-width:620px){.film-grid{grid-template-columns:1fr}}
/* Autoplay is a loop, which is exactly what reduced motion asks us not to do.
   Stop it and hand over the controls instead. */
@media(prefers-reduced-motion:reduce){
  .film-vid{animation:none}
}