:root {
  --burgundy: #5e0914;
  --burgundy-2: #7a1424;
  --wine-deep: #3d060f;
  --gold: #c08d58;
  --gold-deep: #a67a45;
  --cream: #faf5eb;
  --paper: #fffdf8;
  --ink: #26190f;
  --body: #4c3d2e;
  --muted: #7a6a58;
  --line: #e7dcc4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 54px 20px 6px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-deep);
}
.plaque {
  display: inline-block; background: #fff; margin-top: 22px;
  padding: 26px 34px 20px;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(192, 141, 88, .45); outline-offset: 5px;
  box-shadow: 0 24px 50px rgba(94, 9, 20, .10);
}
.hero-logo { width: 424px; max-width: 76vw; height: auto; display: block; }
.tagline {
  margin-top: 32px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: clamp(28px, 4.6vw, 41px); line-height: 1.15;
  color: var(--burgundy);
}
.grule {
  position: relative; width: 132px; height: 2px; margin: 22px auto 0;
  background: var(--gold);
  animation: drawIn 1.1s .5s cubic-bezier(.22, .61, .21, 1) backwards;
}
.grule::after {
  content: "◆"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--cream); padding: 0 9px;
  color: var(--gold-deep); font-size: 9px;
}
.intro { max-width: 648px; margin: 22px auto 0; font-size: 17.5px; line-height: 1.68; color: var(--body); }
.rise { animation: riseIn .95s cubic-bezier(.22, .61, .21, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- creed band ---------- */
.creed {
  margin-top: 60px; text-align: center; padding: 46px 22px 50px;
  background: linear-gradient(160deg, #4a060f 0%, #751527 55%, #4a060f 100%);
  color: #f6ead2;
}
.eyebrow-light { color: #d9b878; }
.values {
  margin-top: 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: clamp(24px, 4.4vw, 37px); line-height: 1.3;
}
.values .dia { color: var(--gold); font-size: .42em; vertical-align: .55em; padding: 0 .3em; }
.creed-line { margin: 16px auto 0; max-width: 620px; color: #e8d5ae; font-size: 16.5px; line-height: 1.65; }

/* ---------- companies ---------- */
.companies { max-width: 1140px; margin: 0 auto; padding: 66px 20px 6px; }
.sec-head { text-align: center; }
.sec-head h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700; font-size: clamp(31px, 5vw, 43px); color: var(--burgundy);
}
.lede {
  margin-top: 4px;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: 20.5px; color: var(--muted);
}
.cards { margin-top: 38px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 920px; margin-left: auto; margin-right: auto; }
.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; text-align: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 0 28px; scroll-margin-top: 18px;
  box-shadow: 0 10px 26px rgba(94, 9, 20, .06);
  transition: transform .55s cubic-bezier(.22, .61, .21, 1), box-shadow .55s ease;
}
.card .bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); opacity: .9;
  transform: scaleX(.3); transform-origin: left;
  transition: transform .65s cubic-bezier(.22, .61, .21, 1);
}
.card h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 28px; line-height: 1.1; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--burgundy); }
.what { margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); }
.line { margin-top: 10px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 19.5px; color: var(--burgundy); }
.desc { margin-top: 9px; font-size: 15px; line-height: 1.62; color: var(--body); flex: 1; }
.phone { margin-top: 16px; font-weight: 600; font-size: 16.5px; }
.phone a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(192, 141, 88, .55); padding-bottom: 1px; }
.phone a:hover { color: var(--burgundy); border-bottom-color: var(--burgundy); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(94, 9, 20, .12); }
  .card:hover .bar { transform: scaleX(1); }
  .visit:hover .arr { transform: translateX(4px); }
}

/* ---------- more under the standard ---------- */
.more { max-width: 730px; margin: 62px auto 0; padding: 0 22px; text-align: center; }
.more-text { margin-top: 14px; font-size: 16.5px; line-height: 1.72; color: var(--body); }
.more-text a { color: var(--burgundy); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(192, 141, 88, .6); }
.more-text a:hover { border-bottom-color: var(--burgundy); }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 68px; padding: 40px 20px 36px; text-align: center;
  background: var(--wine-deep);
  color: #cdbb96; font-size: 14px;
}
.site-footer p + p { margin-top: 6px; }
.foot-brand {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700;
  font-size: 18px; letter-spacing: .26em; text-transform: uppercase; color: #f2e3c2;
}
.foot-brand .dia { color: var(--gold); font-size: .5em; vertical-align: .5em; padding: 0 .2em; }

/* ---------- scroll reveal (JS-gated; content is visible without JS) ---------- */
.js .rv { opacity: 0; }
.js .rv.in { opacity: 1; animation: riseIn .85s cubic-bezier(.22, .61, .21, 1) backwards; animation-delay: var(--d, 0s); }

@media (max-width: 980px) {
  .cards { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .plaque { padding: 20px 20px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; }
  .js .creed .vw { opacity: 1; }
  .cards::before, .cards::after { transform: none; }
}

/* ================= v7: overhaul + designer-panel package ================= */
/* hero ceremony */
.plaque{position:relative}
.plaque::before{content:"";position:absolute;inset:-7px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:scaleX(0);animation:drawX 1.2s .3s cubic-bezier(.22,.61,.21,1) both;pointer-events:none}
.plaque::after{content:"";position:absolute;inset:-7px;border-left:1px solid var(--gold);border-right:1px solid var(--gold);transform:scaleY(0);animation:drawY 1.2s .95s cubic-bezier(.22,.61,.21,1) both;pointer-events:none}
@keyframes drawX{to{transform:scaleX(1)}}
@keyframes drawY{to{transform:scaleY(1)}}
.hero-logo{animation:crestLight 2s 1.2s both}
@keyframes crestLight{0%{filter:brightness(1)}40%{filter:brightness(1.13)}100%{filter:brightness(1)}}
/* hero index line (roll call) */
.index{margin:28px auto 0;font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.index a{color:var(--burgundy);text-decoration:none}
.index a:hover{color:var(--burgundy-2);text-decoration:underline}
.index .dia{color:var(--gold);padding:0 .5em;font-size:.85em}
/* creed word lighting */
.js .creed .vw{opacity:0;display:inline-block}
.creed.in .vw{animation:wordUp .6s cubic-bezier(.22,.61,.21,1) both}
.creed.in .vw:nth-child(1){animation-delay:.05s}.creed.in .vw:nth-child(3){animation-delay:.25s}.creed.in .vw:nth-child(5){animation-delay:.45s}.creed.in .vw:nth-child(7){animation-delay:.65s}.creed.in .vw:nth-child(9){animation-delay:.85s}
@keyframes wordUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.creed.in .dia{animation:diaGlow .7s both}
.creed.in .dia:nth-child(2){animation-delay:.37s}.creed.in .dia:nth-child(4){animation-delay:.57s}.creed.in .dia:nth-child(6){animation-delay:.77s}.creed.in .dia:nth-child(8){animation-delay:.97s}
@keyframes diaGlow{0%{text-shadow:none}45%{text-shadow:0 0 14px rgba(255,220,150,.95)}100%{text-shadow:0 0 6px rgba(216,184,120,.75)}}
/* the traveling standard: grid frame */
.cards{position:relative}
.cards::before{content:"";position:absolute;inset:-13px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:scaleX(0);pointer-events:none;z-index:0}
.cards::after{content:"";position:absolute;inset:-13px;border-left:1px solid var(--gold);border-right:1px solid var(--gold);transform:scaleY(0);pointer-events:none;z-index:0}
.cards:has(.card.in)::before{animation:drawX 1.3s .1s cubic-bezier(.22,.61,.21,1) both}
.cards:has(.card.in)::after{animation:drawY 1.3s .75s cubic-bezier(.22,.61,.21,1) both}
/* card media rows: logo left, motion right, gold seam between */
.media{display:flex;height:232px;border-bottom:1px solid #ead9c2;overflow:hidden;position:relative;z-index:1;background:var(--paper)}
.mlogo{width:45%;flex:none;display:flex;align-items:center;justify-content:flex-start;padding:16px 6px 16px 20px;overflow:hidden;background:#fff;border-right:2px solid var(--gold);box-shadow:inset 0 0 0 1px rgba(192,141,88,.35)}
.mlogo img{max-width:100%;max-height:100%;object-fit:contain;object-position:left center}
.mlogo img.p-badge{height:84%;width:auto}
.mlogo img.p-shield{height:97%;width:auto}
.mlogo img.p-neon{height:100%;width:auto}
.mlogo.bg-cream{background:#FBF6EC}
.mlogo.bg-dark{background:#0B0B10}
.mlogo.mlogo-photo{padding:0}
.mlogo.mlogo-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.mvideo{flex:1;position:relative;min-width:0;background:#111}
.mvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mvideo video.v-olgs{object-position:50% 46%}
.mvideo video.v-haul{object-position:50% 40%}
.mvideo video.v-seal{object-position:50% 45%}
.mvideo .posterfade{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .6s ease;z-index:1;pointer-events:none}
.mvideo.live .posterfade{opacity:0}
.mvideo .tap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:2;color:#fff;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:rgba(24,10,6,.28);cursor:pointer}
body.tap-mode .mvideo .tap{display:flex}
body.tap-mode .mvideo.playing .tap{display:none}

/* BaddieHaul store scene, shrunk into the card (Bill, 2026-11-08) */
#bhStage{flex:1 1 auto; height:100%; min-width:0; background:#FBF5EC;}
#bhStage .scene{width:100%; height:100%;}
#bhStage .scene svg{width:100%; height:100%; display:block;}
#bhStage.paused *{animation-play-state:paused !important;}
#bhStage .trav{transform-box:fill-box; transform-origin:center; opacity:0; animation:bh-fly 12s linear infinite;}
#bhStage .t2{animation-delay:4s;}
#bhStage .t3{animation-delay:8s;}
#bhStage .girl{transform-box:fill-box; transform-origin:50% 90%; animation:bh-hop 12s ease-in-out infinite;}
#bhStage .heart{transform-box:fill-box; transform-origin:center; opacity:0; animation:bh-pop 12s linear infinite;}
#bhStage .h2{animation-delay:4s;}
#bhStage .h3{animation-delay:8s;}
#bhStage .vespa{transform-box:fill-box; transform-origin:center; opacity:0; animation:bh-ride 12s linear infinite;}
#bhStage .wheelspin{transform-box:fill-box; transform-origin:center; animation:bh-wheelspin .8s linear infinite;}
#bhStage .dressbob{transform-box:fill-box; transform-origin:50% 0%; animation:bh-sway 1.6s ease-in-out infinite alternate;}
@keyframes bh-fly{
    0%{transform:translate(0,0) rotate(0deg); opacity:0;}
    3%{opacity:1;}
    12%{transform:translate(180px,-58px) rotate(-8deg); opacity:1;}
    24%{transform:translate(360px,-16px) rotate(6deg); opacity:1;}
    29%{transform:translate(452px,6px) rotate(0deg); opacity:1;}
    33%{opacity:0;}
    100%{transform:translate(452px,6px); opacity:0;}
  }
@keyframes bh-hop{
    0%,8%,35%,42%,68%,75%,100%{transform:translateY(0) rotate(0deg);}
    29%{transform:translateY(-13px) rotate(-5deg);}
    31.5%{transform:translateY(0) rotate(4deg);}
    62%{transform:translateY(-13px) rotate(5deg);}
    64.5%{transform:translateY(0) rotate(-4deg);}
    95%{transform:translateY(-13px) rotate(-5deg);}
    97.5%{transform:translateY(0) rotate(0deg);}
  }
@keyframes bh-pop{
    0%,26%{opacity:0; transform:scale(.3) translateY(6px);}
    31%{opacity:1; transform:scale(1.15) translateY(-4px);}
    38%{opacity:0; transform:scale(1.3) translateY(-14px);}
    100%{opacity:0;}
  }
@keyframes bh-ride{
    0%{transform:translate(0,0) rotate(0deg); opacity:0;}
    4%{transform:translate(0,0) rotate(0deg); opacity:1;}
    11%{transform:translate(140px,-52px) rotate(-6deg); opacity:1;}
    20%{transform:translate(280px,-50px) rotate(5deg); opacity:1;}
    27%{transform:translate(405px,0) rotate(0deg); opacity:1;}
    30%{transform:translate(405px,0); opacity:0;}
    33%{transform:translate(0,0); opacity:0;}
    36%{transform:translate(0,0) rotate(0deg); opacity:1;}
    44%{transform:translate(140px,-52px) rotate(-6deg); opacity:1;}
    53%{transform:translate(280px,-50px) rotate(5deg); opacity:1;}
    60%{transform:translate(405px,0) rotate(0deg); opacity:1;}
    63%{transform:translate(405px,0); opacity:0;}
    66%{transform:translate(0,0); opacity:0;}
    69%{transform:translate(0,0) rotate(0deg); opacity:1;}
    77%{transform:translate(140px,-52px) rotate(-6deg); opacity:1;}
    86%{transform:translate(280px,-50px) rotate(5deg); opacity:1;}
    93%{transform:translate(405px,0) rotate(0deg); opacity:1;}
    96%{transform:translate(405px,0); opacity:0;}
    99%,100%{transform:translate(0,0); opacity:0;}
  }
@keyframes bh-wheelspin{ to{transform:rotate(360deg);} }
@keyframes bh-sway{ from{transform:rotate(-3deg);} to{transform:rotate(4deg);} }

/* ---------- v11 repairs: CTA boxes, card-body furniture, footer links ---------- */
.card-body{position:relative;padding:22px 22px 0}
.cnum{position:absolute;top:8px;right:16px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--gold-deep)}
.visit{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 26px;background:var(--burgundy);color:#FFF6E9;font-weight:600;font-size:16px;letter-spacing:.02em;text-decoration:none;border-radius:10px;box-shadow:0 8px 20px rgba(94,9,20,.18);transition:background .3s ease}
.visit:hover{background:var(--burgundy-2)}
.visit .arr{color:var(--gold);transition:transform .3s ease}
.foot-crest{border-radius:50%;border:1px solid var(--gold);background:var(--paper);padding:2px;object-fit:cover}
.foot-index{margin-top:16px;font-size:13.5px;line-height:2}
.foot-index a{color:#e8d5ae;text-decoration:none;border-bottom:1px solid rgba(192,141,88,.45);padding-bottom:1px}
.foot-index a:hover{color:#fff;border-bottom-color:#fff}
.foot-index .dia{color:var(--gold);padding:0 .5em;font-size:.85em}

/* ---------- v12: the crest seals every button ---------- */
.visit-wrap{position:relative;display:inline-block;margin-top:18px}
.visit-crest{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);background:var(--paper);padding:1px;object-fit:cover;z-index:2}

/* ---------- v13: desktop emails, mobile texts (Bill's standing rule) ---------- */
.d-only{display:none}
@media (hover:hover) and (pointer:fine){
  .m-only{display:none}
  span.visit-wrap.d-only{display:inline-block}
  .phone span.d-only{display:inline}
}