/* ============================================================
   LIBERTY LION INVESTMENTS — DESIGN TOKENS
   ============================================================ */
:root{
  --ink:#0A0908;          /* page black, warm */
  --ink-2:#121110;        /* raised surface */
  --ink-3:#1B1917;        /* hairline fills */
  --bone:#EFEAE0;         /* headings, warm off-white */
  --ash:#8E877C;          /* body copy, muted */
  --ash-dim:#5A544C;      /* tertiary */
  --gold:#C69A54;         /* primary accent */
  --gold-dim:#7A5E33;     /* rules, borders */
  --ruby:#A6362C;
  --emerald:#2E6B52;
  --silver:#9AA3A8;

  --f-display:'Archivo Black',Impact,sans-serif;
  --f-body:'EB Garamond',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --gut:clamp(20px,5vw,72px);   /* page gutter */
  --band:clamp(80px,11vw,168px);/* section rhythm */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--ash);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- shared type roles ---- */
.eyebrow{
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
}
.h-display{
  font-family:var(--f-display);color:var(--bone);
  text-transform:uppercase;line-height:.92;letter-spacing:-.02em;
  margin:0;font-weight:400;
}
.h-1{font-size:clamp(44px,9vw,116px)}
.h-2{font-size:clamp(32px,5.2vw,64px)}
.h-3{font-size:clamp(20px,2.2vw,30px)}
.gold{color:var(--gold)}
.lede{max-width:46ch;color:var(--ash);font-size:clamp(15px,1.15vw,18px)}
.rule{height:1px;background:var(--gold-dim);opacity:.35;border:0;margin:0}

/* scroll reveal — see the REVEAL ENGINE block at the end of this file.
   .rv marks a section as a reveal root; its children carry the animation. */
.rv{opacity:1;transform:none}

/* ============================================================
   INTRO CURTAIN
   ============================================================ */
#intro{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;text-align:center;
  transition:opacity .9s ease,visibility .9s;
}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
#intro video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.34;filter:grayscale(.5) contrast(1.1);
}
#intro::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent,var(--ink) 78%)}
.intro-in{position:relative;z-index:2;padding:0 24px}
.intro-in .mark{width:76px;height:76px;margin:0 auto 26px}
.intro-in h1{font-family:var(--f-display);text-transform:uppercase;color:var(--bone);
  font-size:clamp(26px,4.4vw,52px);line-height:1;margin:0 0 6px;letter-spacing:-.01em;font-weight:400}
.intro-in .est{font-family:var(--f-mono);font-size:9px;letter-spacing:.4em;color:var(--ash-dim);text-transform:uppercase}
.enter{
  margin-top:44px;position:relative;padding:16px 46px;
  border:1px solid var(--gold-dim);color:var(--gold);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  transition:color .4s,border-color .4s,letter-spacing .4s;
}
.enter::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1);z-index:-1}
.enter:hover{color:var(--ink);border-color:var(--gold);letter-spacing:.42em}
.enter:hover::before{transform:scaleX(1)}
.enter span{position:relative;z-index:1}

/* ============================================================
   HEADER
   ============================================================ */
#head{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px var(--gut);
  transition:background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
#head.stuck{background:rgba(10,9,8,.82);backdrop-filter:blur(14px);border-bottom-color:rgba(122,94,51,.3)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand .mark{width:42px;height:42px;flex:none}
.brand-txt{min-width:0}
.brand-name{
  font-family:var(--f-display);text-transform:uppercase;color:var(--bone);
  font-size:clamp(13px,1.5vw,19px);line-height:1;letter-spacing:.005em;white-space:nowrap;
}
.brand-sub{
  font-family:var(--f-mono);font-size:8px;letter-spacing:.3em;color:var(--ash-dim);
  text-transform:uppercase;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.menu-btn{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone);flex:none}
.menu-btn i{display:block;width:26px;height:1px;background:var(--gold);transition:width .4s}
.menu-btn:hover i{width:40px}

/* ============================================================
   NAV OVERLAY
   ============================================================ */
#nav{
  position:fixed;inset:0;z-index:180;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--gut) 60px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1);
}
#nav.open{clip-path:inset(0 0 0 0)}
.nav-close{position:absolute;top:26px;right:var(--gut);font-family:var(--f-mono);
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
#nav ol{list-style:none;margin:0;padding:0;counter-reset:n}
#nav li{counter-increment:n;border-top:1px solid rgba(122,94,51,.22);overflow:hidden}
#nav li:last-child{border-bottom:1px solid rgba(122,94,51,.22)}
#nav a{
  display:flex;align-items:baseline;gap:clamp(14px,3vw,40px);
  padding:clamp(12px,2vw,22px) 0;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(21px,4.6vw,58px);line-height:1;color:var(--bone);
  transition:color .4s,transform .5s cubic-bezier(.2,.7,.2,1);
}
#nav a::before{content:"0" counter(n);font-family:var(--f-mono);font-size:10px;
  letter-spacing:.2em;color:var(--gold);flex:none;transform:translateY(-.6em)}
#nav a:hover{color:var(--gold);transform:translateX(clamp(8px,1.6vw,26px))}

/* ============================================================
   HERO
   ============================================================ */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 var(--gut) clamp(40px,7vw,84px);overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(.62) contrast(1.14) brightness(.62)}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.86) 0%,rgba(10,9,8,.35) 34%,rgba(10,9,8,.95) 100%)}
.hero-in{position:relative;width:100%}
.hero-in h2{margin:0 0 clamp(20px,3vw,34px)}
.hero-in h2 span{display:block}
.hero-foot{display:flex;flex-wrap:wrap;gap:26px 60px;align-items:flex-end;justify-content:space-between}
.scroll-cue{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);
  font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.scroll-cue i{display:block;width:56px;height:1px;background:var(--gold-dim);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--gold);
  animation:sweep 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* marquee band */
.marquee{position:relative;overflow:hidden;padding:clamp(10px,1.6vw,22px) 0;
  border-block:1px solid rgba(122,94,51,.26);background:var(--ink)}
.marquee-t{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee-t span{font-family:var(--f-display);text-transform:uppercase;color:var(--gold);
  opacity:.19;font-size:clamp(58px,13vw,168px);line-height:.9;padding-right:.28em;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   PHILOSOPHY
   ============================================================ */
#philosophy{padding:var(--band) var(--gut);display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,90px)}
.phil-l{position:sticky;top:120px;align-self:start}
.phil-l h2{margin:18px 0 24px}
.phil-item{border-top:1px solid rgba(122,94,51,.24);padding:clamp(22px,3vw,34px) 0;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,34px);align-items:start;
  transition:border-color .5s}
.phil-item:last-child{border-bottom:1px solid rgba(122,94,51,.24)}
.phil-item:hover{border-color:var(--gold)}
.phil-num{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--gold);padding-top:.65em}
.phil-item h3{margin:0 0 10px;transition:color .4s}
.phil-item:hover h3{color:var(--gold)}
.phil-item p{margin:0;max-width:52ch}

/* ============================================================
   CAPABILITIES — horizontal gallery
   ============================================================ */
#capabilities{padding:var(--band) 0}
.cap-head{padding:0 var(--gut);display:grid;grid-template-columns:1fr minmax(0,44ch);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(34px,5vw,64px)}
.cap-head h2{margin:16px 0 0}
.cap-rail{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gut) 26px;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}
.cap-rail::-webkit-scrollbar{height:2px}
.cap-rail::-webkit-scrollbar-thumb{background:var(--gold-dim)}
.cap-card{position:relative;flex:none;width:clamp(260px,30vw,400px);height:clamp(400px,52vw,560px);
  scroll-snap-align:start;overflow:hidden;background:var(--ink-2);isolation:isolate}


.cap-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.15),rgba(10,9,8,.94))}
.cap-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(20px,2.2vw,30px)}
.cap-body h3{margin:12px 0 10px}
.cap-body p{margin:0 0 20px;font-size:15px;line-height:1.55}
.spec{list-style:none;margin:0;padding:0;border-top:1px solid rgba(122,94,51,.3)}
.spec li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  border-bottom:1px solid rgba(122,94,51,.14);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.spec b{color:var(--ash-dim);font-weight:400}
.spec span{color:var(--gold)}
.rail-cue{padding:0 var(--gut);font-family:var(--f-mono);font-size:9px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim)}

/* ============================================================
   TERRITORIES
   ============================================================ */
#markets{padding:var(--band) var(--gut)}
#markets>h2{max-width:20ch;margin:18px 0 clamp(40px,6vw,80px)}
.terr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,52px);
  align-items:center;margin-bottom:clamp(28px,4vw,60px)}
.terr:nth-child(odd) .terr-img{order:2}
.terr-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}

.terr:hover 
.terr h3{margin:14px 0 22px}
.terr ol{list-style:none;margin:0;padding:0;counter-reset:t}
.terr li{counter-increment:t;display:flex;gap:16px;padding:12px 0;
  border-bottom:1px solid rgba(122,94,51,.18);font-size:15.5px;line-height:1.5}
.terr li::before{content:counter(t,decimal-leading-zero);font-family:var(--f-mono);
  font-size:9px;letter-spacing:.14em;color:var(--gold);flex:none;padding-top:.45em}

/* ============================================================
   MINE FLOOR — signature
   ============================================================ */
#minefloor{padding:var(--band) var(--gut)}
.mf-head{display:grid;grid-template-columns:1fr minmax(0,40ch);gap:clamp(24px,4vw,64px);
  align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.mf-head h2{margin:16px 0 0}
.mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px)}
.stone{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2);display:block;width:100%;text-align:left}


.stone::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,9,8,.9));pointer-events:none}
.stone-lbl{position:absolute;left:clamp(16px,1.8vw,26px);bottom:clamp(14px,1.8vw,24px);z-index:2}
.stone-lbl b{display:block;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(14px,1.6vw,22px);color:var(--bone);font-weight:400;transition:color .55s}
.stone-lbl em{display:block;margin-top:8px;font-family:var(--f-mono);font-style:normal;
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.stone:hover .stone-lbl em,.stone:focus-visible .stone-lbl em{opacity:1;transform:none}
.stone-no{position:absolute;top:clamp(14px,1.8vw,24px);left:clamp(16px,1.8vw,26px);z-index:2;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;color:var(--gold);opacity:.75}
.stone[data-tone="gold"]:hover .stone-lbl b{color:var(--gold)}
.stone[data-tone="emerald"]:hover .stone-lbl b{color:#5FBF95}
.stone[data-tone="silver"]:hover .stone-lbl b{color:var(--silver)}
.stone[data-tone="ruby"]:hover .stone-lbl b{color:#D8534A}

/* lightbox */
#film{position:fixed;inset:0;z-index:190;background:rgba(6,5,5,.96);
  display:grid;place-items:center;padding:clamp(16px,4vw,56px);
  opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
#film.open{opacity:1;visibility:visible}
.film-in{width:min(1040px,100%)}
.film-in video{width:100%;background:#000;border:1px solid rgba(122,94,51,.3)}
.film-meta{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-top:14px}
.film-meta p{margin:6px 0 0;font-size:15px}
.film-close{position:absolute;top:clamp(16px,3vw,34px);right:clamp(16px,3vw,34px);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

/* ============================================================
   COVENANT
   ============================================================ */
#covenant{padding:var(--band) var(--gut)}
.cov-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,72px);
  align-items:end;margin-bottom:clamp(40px,6vw,84px)}
.cov-head h2{margin:16px 0 0;max-width:16ch}
/* ---- Covenant: one image spanning two text blocks, sides alternating ----
   The band breaks out of the section gutter so the image runs to the
   viewport edge, exactly as the reference does. The text column carries
   the gutter back as padding so copy stays aligned with the rest of the
   page. ---------------------------------------------------------------- */
.cov-band{display:grid;grid-template-columns:1fr 1fr;
  margin-inline:calc(var(--gut) * -1);
  border-top:1px solid rgba(122,94,51,.2)}
.cov-band:first-of-type{border-top:0}

.cov-band-img{position:relative;overflow:hidden;background:var(--ink-2);
  min-height:clamp(320px,42vw,560px)}
.cov-band--flip .cov-band-img{order:2}

.cov-cap{position:absolute;top:clamp(12px,1.4vw,20px);left:clamp(14px,1.6vw,24px);
  z-index:3;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.7)}

.cov-band-txt{display:flex;flex-direction:column}
.cov-band-txt article{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.4vw,56px)}
.cov-band-txt article + article{border-top:1px solid rgba(122,94,51,.2)}
/* the outer edge of the text column lines up with the page gutter */
.cov-band:not(.cov-band--flip) .cov-band-txt article{padding-right:var(--gut)}
.cov-band--flip .cov-band-txt article{padding-left:var(--gut)}
.cov-band-txt h3{margin:12px 0 14px}
.cov-band-txt p{margin:0;max-width:44ch}

.cov-foot{display:grid;grid-template-columns:1.2fr auto;gap:clamp(24px,4vw,64px);
  align-items:end;margin-top:clamp(34px,5vw,64px);padding-top:clamp(24px,3vw,40px);
  border-top:1px solid rgba(122,94,51,.24)}
.cov-foot p{margin:0;max-width:56ch}
.cov-foot ul{list-style:none;margin:0;padding:0;text-align:right}
.cov-foot li{font-family:var(--f-mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash-dim);padding:6px 0;border-bottom:1px solid rgba(122,94,51,.16)}

/* ============================================================
   CONTACT
   ============================================================ */
#contact{padding:var(--band) var(--gut);position:relative}
.ct-grid{display:grid;grid-template-columns:1fr minmax(0,1fr);gap:clamp(30px,5vw,90px)}
.ct-l h2{margin:16px 0 22px}
.ct-l .lede{margin:0 0 34px}
.coords{list-style:none;margin:34px 0 0;padding:0}
.coords li{padding:9px 0;border-bottom:1px solid rgba(122,94,51,.18);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--ash)}
.coords a:hover{color:var(--gold)}

.gate-q{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.gate-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.gate-opts button{border:1px solid rgba(122,94,51,.4);padding:18px 16px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ash);
  transition:background .4s,color .4s,border-color .4s}
.gate-opts button:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.gate-done{display:none;justify-content:space-between;gap:20px;align-items:baseline;
  padding-bottom:22px;border-bottom:1px solid rgba(122,94,51,.24);margin-bottom:26px}
.gate-done b{font-family:var(--f-mono);font-size:10px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ash)}
.gate-done button{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--gold)}
.gate-done button:hover{text-decoration:underline}
#entryForm{display:none}
.ct-grid.verified .gate-opts,.ct-grid.verified .gate-q{display:none}
.ct-grid.verified .gate-done{display:flex}
.ct-grid.verified #entryForm{display:block}

.field{position:relative;margin-bottom:30px}
.field label{display:block;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:10px}
.field input,.field textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(122,94,51,.34);color:var(--bone);
  font-family:var(--f-body);font-size:17px;padding:8px 0;transition:border-color .4s}
.field textarea{resize:vertical;min-height:92px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.submit{position:relative;padding:17px 44px;border:1px solid var(--gold);color:var(--gold);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  overflow:hidden;transition:color .4s}
.submit::before{content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.submit:hover{color:var(--ink)}
.submit:hover::before{transform:scaleX(1)}
.submit span{position:relative;z-index:1}
.submit[disabled]{opacity:.5;pointer-events:none}
.form-note{margin-top:16px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;min-height:1.4em}
.form-note.err{color:#D8534A}
.form-note.ok{color:var(--gold)}
.sent{display:none;border:1px solid rgba(122,94,51,.4);padding:clamp(26px,4vw,44px)}
.sent h3{margin:14px 0 12px}
.sent p{margin:0;max-width:44ch}
.ct-grid.sent-state #entryForm,.ct-grid.sent-state .gate-done{display:none}
.ct-grid.sent-state .sent{display:block}

/* ============================================================
   FOOTER
   ============================================================ */
#foot{padding:var(--band) var(--gut) 40px;border-top:1px solid rgba(122,94,51,.24)}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(26px,4vw,72px);
  margin-bottom:clamp(40px,6vw,72px)}
.foot-top p{margin:14px 0 0;max-width:52ch}
.foot-top ul{list-style:none;margin:14px 0 0;padding:0}
.foot-top li{padding:7px 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--ash)}
.foot-top a:hover{color:var(--gold)}
.wordmark{line-height:.82;margin:0 0 clamp(28px,4vw,52px)}
.wordmark span{display:block;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(52px,17.5vw,260px);letter-spacing:-.03em}
.wordmark .a{color:var(--bone)}
.wordmark .b{color:var(--gold)}
.notice{font-size:13px;line-height:1.6;max-width:88ch;color:var(--ash-dim);margin:0 0 30px}
.foot-end{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;
  padding-top:24px;border-top:1px solid rgba(122,94,51,.2);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash-dim)}

/* ============================================================
   MAGNETIC CURSOR
   ============================================================ */
#cursor{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--gold);pointer-events:none;z-index:300;
  transform:translate(-50%,-50%);transition:width .35s,height .35s,background .35s,opacity .35s;
  opacity:0;mix-blend-mode:difference}
#cursor.on{opacity:.85}
#cursor.grow{width:66px;height:66px;background:rgba(198,154,84,.2)}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  #philosophy,.cap-head,.mf-head,.cov-head,.cov-foot,.ct-grid,.foot-top{grid-template-columns:1fr}
  .phil-l{position:static}
  .terr{grid-template-columns:1fr}
  .terr:nth-child(odd) .terr-img{order:0}
  .cov-band{grid-template-columns:1fr}
  .cov-band--flip .cov-band-img{order:0}
  .cov-band:not(.cov-band--flip) .cov-band-txt article,
  .cov-band--flip .cov-band-txt article{padding-inline:var(--gut)}
  .cov-foot ul{text-align:left;margin-top:20px}
  .brand-sub{display:none}
}
@media(max-width:560px){
  body{font-size:16px}
  .mf-grid,.gate-opts{grid-template-columns:1fr}
  .hero-foot{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   EMPTY MEDIA PLACEHOLDER + HOVER LAYER  (added for admin CMS)
   ============================================================ */
.ph{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--ink-2);
  background-image:repeating-linear-gradient(45deg,rgba(122,94,51,.07) 0 12px,transparent 12px 24px);
  border:1px dashed rgba(122,94,51,.32)}
.ph span{font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ash-dim);text-align:center;padding:12px;line-height:1.8}
.hero-bg.ph,.cov-band-img .ph{border:0}

/* hover media layer (gif or looping mp4 revealed on hover) */
/* (the hover layer is defined once, in the crossfade block below) */
.stone .hov,.cap-card .hov{z-index:1}
.stone::after,.cap-card::after{z-index:1}
.stone-lbl,.stone-no,.cap-body{z-index:3}

/* logo slot */
.mark img{width:100%;height:100%;object-fit:contain}

/* territory + covenant media (class-based so <video> works too) */

.terr:hover 

.cov-band:hover 
/* a video resting in the main slot behaves exactly like a still */
video.cov-shot,video.terr-shot,video.shot{width:100%;height:100%;object-fit:cover}


video.hero-bg{width:100%;height:100%;object-fit:cover}
video.shot{width:100%;height:100%;object-fit:cover}

/* a stone with no film uploaded shouldn't look clickable */
.stone[data-nofilm]{cursor:default}


/* shared easing tokens */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);      /* long tail, decisive start */
  --ease-wipe:cubic-bezier(.72,0,.24,1);    /* mask sweep */
}
/* ============================================================
   HOVER MEDIA — still to motion
   The clip sits UNDERNEATH at full opacity, always. The still sits
   on top and fades away on hover to reveal it.

   Exactly one element's opacity changes, and its resting value is
   the safe one: if the hover rule never fires, you still see the
   still image, which is what the panel is supposed to show at rest.
   ============================================================ */
.hov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;
  opacity:1;z-index:1;pointer-events:none}

/* the still covers it, then dissolves out of the way */
.shot,.terr-shot,.cov-shot{z-index:2}

/* While a block is still scrolling into view its still is animating up
   from opacity 0, which would briefly expose the clip underneath. Keep
   the clip hidden until the block has landed. Failing this rule only
   costs a brief flash, never a wrong resting state. */
.rv:not(.in) .hov{opacity:0}

.has-hover.has-hover:hover .shot,
.has-hover.has-hover:hover .terr-shot,
.has-hover.has-hover:hover .cov-shot,
.has-hover.has-hover:focus-within .shot,
.has-hover.has-hover:focus-within .terr-shot,
.has-hover.has-hover:focus-within .cov-shot{opacity:0}

/* ============================================================
   SECTION MEDIA — one resting look, one hovered look
   filter is declared EXACTLY ONCE, as var(--grey). Hover changes
   only the variable, so there is no specificity contest over the
   filter property itself — which is what kept going wrong when
   thirteen separate rules each tried to set it.
   Values measured from the original recording: at rest it retains
   9% of its saturation and 68% of its luminance.
   Both states use explicit numbers rather than `none`, so the
   browser can interpolate between them smoothly.
   ============================================================ */
.shot,.terr-shot,.cov-shot{
  /* Structural. These fill the container and must never be removed.
     Without background-size the image draws at natural size in the
     corner; without absolute positioning the element has no height
     and vanishes entirely. Both faults look like "the image is gone". */
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;                       /* when the element is a <video> */
  background-size:cover;background-position:center;   /* when it is a <div> */

  /* look — filter is declared here and NOWHERE else */
  --grey:grayscale(.91) brightness(.68);
  filter:var(--grey);
  transition:filter 1.1s cubic-bezier(.4,0,.3,1),
             transform 1.4s var(--ease-out),
             opacity .9s var(--ease-out);
}
.cap-card .shot{--grey:grayscale(1) contrast(1.16) brightness(.5)}
.stone .shot{--grey:grayscale(1) contrast(1.2) brightness(.5)}
.terr-shot{--grey:grayscale(.85) contrast(1.12) brightness(.66)}

/* hovered: full colour */
.cap-card:hover .shot{--grey:grayscale(.15) contrast(1.06) brightness(.66);transform:scale(1.06)}
.stone:hover .shot,.stone:focus-visible .shot{--grey:grayscale(0) contrast(1) brightness(1);transform:scale(1.05)}
.terr:hover .terr-shot{--grey:grayscale(.1) contrast(1) brightness(.78);transform:scale(1.05)}
.cov-band:hover .cov-shot{--grey:grayscale(0) brightness(1);transform:scale(1.04)}

/* placeholders and the hover layer are never greyed */
.ph{--grey:none}
.hov{--grey:none;filter:none}