@font-face {
  font-family: "Catchy Manager";
  src: url("assets/fonts/catchy-mager (1)/Catchy Mager.otf") format("opentype"),
       url("assets/fonts/catchy-mager (1)/Catchy Mager.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glacial Indifference";
  src: url("assets/fonts/glacial-indifference/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glacial Indifference";
  src: url("assets/fonts/glacial-indifference/GlacialIndifference-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --gold: #b08d4f;
  --ink: #2b2b2b;
  --body-grey: #4a4a4a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #fff;
  font-family: "Glacial Indifference", Arial, sans-serif;
  color: var(--ink);
  overflow-x: hidden;            /* kill any horizontal scrollbar */
}

/* =========================================================
   HERO — full-bleed. Design reference = 1206 x 668.
   Sizes use cqw (container query width): 1cqw == 1% of the
   hero's OWN width, so layout is immune to scrollbar width
   and there is never a right-side gutter.
   1 design px == (100/1206)cqw == 0.08292cqw
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1206 / 668;
  background: #fff;
  overflow: hidden;
  container-type: inline-size;   /* enables cqw units below */
}

/* ---- Left stacked images (with vertical gap) ---- */
.hero__left {
  position: absolute;
  top: 0;
  left: 0;
  width: 43.3%;                  /* 522 / 1206 */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.04cqw;                  /* ~8px gap between the two images */
}

.hero__img {
  width: 100%;
  overflow: hidden;
}

.hero__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__img--top    { flex: 0 0 47.6%; }   /* ~318px */
.hero__img--bottom { flex: 1 1 auto; }    /* fills remainder */

/* ---- Right content ---- */
.hero__right {
  position: absolute;
  top: 0;
  left: 43.3%;
  right: 0;
  height: 100%;
}

/* gold brush strokes, top-right corner */
.hero__strokes {
  position: absolute;
  top: -0.5cqw;
  right: 0;
  width: 30cqw;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ---- Heading ---- */
.hero__heading-wrap {
  position: absolute;
  top: 9.8cqw;                   /* ~118px */
  right: 5.8cqw;                 /* ~70px */
  text-align: right;
}

.hero__heading {
  position: relative;            /* stacking context so .dot can sit behind the glyphs */
  z-index: 0;
  font-family: "Catchy Manager", "Times New Roman", serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(30px, 4.3cqw, 78px); /* 4.3cqw keeps line 1 clear of the left image; floor/cap for readability */
  line-height: 0.92;
  letter-spacing: 0.04cqw;
}

.hero__heading .line {
  display: block;
  white-space: nowrap;           /* intentional breaks only — never auto-wrap */
}

/* gold circle accent — sits BEHIND the "S" of SECRET and is glued
   to it (absolute inside the .acc wrapper), so it tracks the glyph
   at every viewport size. em-sized to match the reference. */
.acc {
  position: relative;
}

.dot {
  position: absolute;
  top: 0.34em;                   /* vertical placement on the S */
  left: -0.06em;                 /* peek out on the left of the S */
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--gold);
  z-index: -1;                   /* behind the glyph */
}

/* CTA button — left-aligned, below the paragraph */
.hero__btn {
  position: absolute;
  top: 120%;                /* just below the three sub lines */
  left: 95px;                 /* aligns with copy left edge (~2.7% of hero) */
  display: inline-block;
  padding: 0.85cqw 2.1cqw;
  background: #111;
  color: #fff;
  font-family: "Causten Round", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 1.05cqw, 15px);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s ease;
  z-index: 2;
}
.hero__btn:hover { background: #333; }

/* ---- Body paragraph ---- */
.hero__body {
  position: absolute;
  top: 38cqw;                    /* ~458px */
  right: 4.1cqw;                 /* ~50px */
  width: 45.2cqw;                /* ~545px */
  text-align: right;
  font-size: clamp(12px, 1.24cqw, 18px); /* readable on small desktops/tablets, caps on ultra-wide */
  line-height: 1.5;
  color: var(--body-grey);
}

/* ---- Logo bottom-right ---- */
.hero__logo {
  position: absolute;
  bottom: 1.8cqw;
  right: 2.5cqw;
  width: 4.3cqw;                 /* ~52px */
  height: auto;
}

/* =========================================================
   MOBILE / NARROW (≤ 768px) — reflow to a single column.
   The absolutely-positioned desktop composition is unwound
   into normal document flow: images on top, then heading,
   body, and logo, all readable and centered.
   ========================================================= */
@media (max-width: 768px) {
  .hero {
    aspect-ratio: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    container-type: normal;        /* disable cqw on mobile — use fixed/vw sizes */
    padding-bottom: 34px;
  }

  /* images: full-width, natural height, stacked */
  .hero__left {
    position: static;
    width: 100%;
    height: auto;
    gap: 6px;
    order: 1;
  }
  .hero__img,
  .hero__img img { height: auto; }
  .hero__img--top,
  .hero__img--bottom { flex: 0 0 auto; }

  /* content block below the images — plain block flow */
  .hero__right {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    order: 2;
    padding: 30px 22px 0;
  }

  .hero__strokes { display: none; }      /* decorative — drop on small screens */

  .hero__heading-wrap {
    position: static;
    right: auto;
    width: 100%;
    min-width: 0;                  /* allow shrink below content min-size */
    text-align: center;
  }
  .hero__heading {
    width: 100%;
    min-width: 0;
    font-size: clamp(24px, 8vw, 46px);
    letter-spacing: 0.5px;
    overflow-wrap: break-word;
  }
  .hero__heading .line { white-space: normal; }   /* allow wrapping on tiny screens */

  .hero__body {
    position: static;
    right: auto;
    width: 100%;
    max-width: 540px;
    min-width: 0;
    margin-top: 22px;
    text-align: center;
    font-size: 15px;
    overflow-wrap: break-word;
  }

  .hero__logo {
    position: static;
    display: block;
    width: 52px;
    margin: 24px auto 0;
  }
}

a.hero__btn.hero__btn--outline {
    left: 390px;
    background: #b08d4f;
}