/* ==========================================================================
   Tub's Audio — values taken directly from the live Webflow site:
   background rgb(233,237,218), green rgb(55,126,78), Archivo Black,
   nav 13px/700/2px tracking uppercase, headings 3px tracking.
   ========================================================================== */

:root {
  --bg: #e9edda;          /* rgb(233,237,218) */
  --ink: #000000;
  --green: #377e4e;       /* rgb(55,126,78)   */
  --rule: rgba(0, 0, 0, 0.35);
  --muted: #5c6152;
  --max: 1400px;
  --font: "Archivo Black", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Custom cursor (Webflow scales it 2x on hover, 500ms outQuart) -- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--green);
  pointer-events: none;
  z-index: 9999;
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1),
              background-color 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
  mix-blend-mode: multiply;
}
.cursor.is-active { transform: scale(2); background: var(--ink); }
@media (hover: none), (max-width: 860px) { .cursor { display: none; } }

/* ---------- Nav ---------- */
.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 2.5rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}

.brand,
.site-nav a {
  font-family: var(--font);
  text-transform: uppercase;
  font-size: 13px;
}

.brand { letter-spacing: 1px; }
.site-nav { display: flex; gap: 3.2rem; }
.site-nav a { font-weight: 700; letter-spacing: 2px; }

/* Nav + social hover: Webflow moves them up 10px over 400ms */
.site-nav a, .site-footer .social-links a, .brand {
  display: inline-block;
  transition: transform 400ms ease, color 400ms ease;
}
.site-nav a:hover, .site-footer .social-links a:hover, .brand:hover {
  transform: translateY(-10px);
  color: var(--green);
}
.site-nav a.active { color: var(--green); }

/* Shield badge, centred over the nav rule */
.badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  pointer-events: none;
}
.badge svg { width: 100%; height: auto; display: block; }

/* ---------- Home stage ----------------------------------------------------
   Positions below are measured from the live Webflow site at 1280x565 and
   expressed as percentages of the viewport, so the composition scales.
   Both the words and the side illustrations deliberately bleed off the edges.
   -------------------------------------------------------------------------- */
body.home { overflow: hidden; }
body.home .site-header,
body.home .site-footer { position: relative; z-index: 10; }

body.home .stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.stage { flex: 1; }

.cat-word {
  position: absolute;
  font-family: var(--font);
  font-weight: 700;
  font-size: 6.37vw;          /* 81.5px @1280 */
  line-height: 1.1;
  letter-spacing: 3px;
  color: var(--green);
  white-space: nowrap;
  top: 42.12%;                /* y 238 / 565 */
  transition: transform 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.cat-hifi  { left: -1.56%; }  /* x -20 / 1280 — bleeds off the left edge  */
.cat-bigfi { right: -1.56%; } /* mirrored on the right                    */
.cat-word:hover { transform: scale(1.06); }

/* Side illustrations: 198 x 396 @1280x565 */
.illus {
  position: absolute;
  top: 13.63%;                /* y 77 / 565  */
  width: 15.47%;              /* 198 / 1280  */
}
.illus-hifi  { left: 15%; }   /* x 192 / 1280 */
.illus-bigfi { left: 69.53%; }/* x 890 / 1280 */
.illus img {
  width: 100%;
  height: auto;
  transition: transform 500ms ease-in;
}
.illus:hover img {
  transform: scale(1.1);
  transition: transform 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/* Centre figure — sits ABOVE the slogan (live site: figure z-index 1000,
   slogan z-index -500). */
.mascot-container {
  position: absolute;
  left: 39.22%;               /* x 502 / 1280 */
  top: 10.97%;                /* y 62 / 565   */
  width: 21.48%;              /* 275 / 1280   */
  z-index: 3;
}
.mascot-container > .mascot {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}

/* Rotating circular slogan, behind the figure */
.slogan {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 26%;
  width: 74.2%;               /* 204 / 275 of the figure's width */
  aspect-ratio: 1;
  translate: -50% 0;
  animation: slogan-spin 26s linear infinite;
}
.slogan img { width: 100%; }
.slogan .green { transition: opacity 400ms ease; }
.slogan .neon { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; }
.mascot-container:hover .slogan .neon { opacity: 1; }
.mascot-container:hover .slogan .green { opacity: 0; }

@keyframes slogan-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .slogan { animation: none; }
}

/* Page-load entrance (Webflow PAGE_START: opacity 0 + move, then settle) */
.fade-up { opacity: 0; transform: translateY(18px); animation: fade-up 900ms cubic-bezier(0.165,0.84,0.44,1) forwards; }
.d1 { animation-delay: 80ms; }
.d2 { animation-delay: 200ms; }
.d3 { animation-delay: 320ms; }
.d4 { animation-delay: 440ms; }
@keyframes fade-up { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; opacity: 1; transform: none; }
}

/* ---------- Inner pages ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 2.5rem; width: 100%; }
main.page { flex: 1; padding-bottom: 3rem; }

/* Product listing pages have no heading on the original — the grid starts
   ~139px below the nav. */
.product-page { padding-top: 139px; }
@media (max-width: 860px) { .product-page { padding-top: 3rem; } }

.page-title {
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--green);
  margin: 2rem 0 2.2rem;
}

/* Product grid — measured from the live site at 1280:
   3 columns of 205px, 151px gutters, container 917px centred.
   No card box: the wireframe sits straight on the page background, with a
   sage-green label bar (rgb(200,209,174)) beneath holding the name. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 11.8%;          /* 151 / 1280 */
  row-gap: 4.5rem;
  max-width: 917px;
  margin: 0 auto;
}

.product-card {
  color: inherit;
  display: block;
  background: none;
  border: 0;
}

.product-card .thumb {
  height: 259px;              /* measured image band height */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
  overflow: visible;
}
.product-card .thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.product-card:hover .thumb img { transform: scale(1.06); }

/* The green name plate */
.product-card .meta {
  background: rgb(200, 209, 174);
  padding: 15px;
  text-align: center;
}
.product-card h3 {
  font-family: var(--font);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #000;
  margin: 0;
}
.product-card p {
  font-family: var(--font-body);
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.back-link {
  font-family: var(--font);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  display: inline-block; margin: 1.5rem 0 1rem;
}
.back-link:hover { color: var(--green); }

.product-detail h1 {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--green);
  margin: 0 0 0.2rem;
}
.product-detail .by { font-family: var(--font-body); color: var(--muted); margin: 0 0 1.5rem; }

.spec-sheet {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1rem;
  margin-bottom: 1.8rem;
}

.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  background: var(--green);
  color: #fff;
  border: 0; cursor: pointer;
  transition: transform 400ms ease, background 300ms ease;
}
.btn:hover { transform: translateY(-4px); background: #2c6640; }

.about-prose { max-width: 760px; font-family: var(--font-body); }
.about-prose h1 {
  font-family: var(--font);
  text-transform: uppercase; letter-spacing: 3px;
  color: var(--green);
  font-size: clamp(2rem, 5vw, 3rem);
}
.about-prose p { font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.2rem; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; font-family: var(--font-body); }
.contact-info .label { font-family: var(--font); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.contact-info a { color: var(--green); }
form .field { margin-bottom: 1rem; }
form label { display: block; font-family: var(--font); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.4rem; }
form input, form textarea {
  width: 100%; padding: 0.75rem 0.85rem;
  border: 1px solid var(--rule); background: #fff;
  font-family: var(--font-body); font-size: 1rem; border-radius: 0;
}
form textarea { min-height: 150px; resize: vertical; }

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 2.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--bg);
}
.site-footer .social-links { display: flex; gap: 2.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .site-header, .site-footer { padding: 1rem 1.25rem; }
  .site-nav { gap: 1.4rem; }
  .site-nav a { font-size: 11px; letter-spacing: 1px; }
  .badge { display: none; }

  /* The bleed-off-the-edges composition doesn't work on a phone — stack it. */
  body.home { overflow: auto; }
  body.home .stage {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1.25rem 3rem;
    overflow: visible;
  }
  .cat-word {
    position: static;
    font-size: clamp(2.6rem, 15vw, 4rem);
  }
  .illus { position: static; width: 45%; }
  .mascot-container { position: relative; left: auto; top: auto; width: 62%; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .product-grid { grid-template-columns: 1fr; }
}