/* ==========================================================================
   Axis Centretown — pack-level custom CSS
   Layered on the theme's Bootstrap 5.3 base (Bootstrap + --bs-* tokens are
   provided by the active Arc theme in the canvas and on the front-end — NOT
   bundled here). This file holds only pack-specific brand styling. Layout is
   Bootstrap grid/utilities; the rules below are the bespoke visual layer.
   ========================================================================== */

:root {
  --axis-red: #8c1109;
  --axis-red-2: #a5271c;          /* lighter red for hover/press */
  --axis-ink: #2e2119;            /* warm near-black text on cream */
  --axis-cream: #f7f0e7;          /* section background */
  --axis-cream-2: #fdf8f1;        /* lighter panel background */
  --axis-cream-soft: #fffbf5;     /* logos / brightest cream */
  --axis-font: "Montserrat", var(--bs-body-font-family, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* Dev-preview only — stripped from the exported pack. */
.tpl-label {
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 8px 14px;
  background: #1c1c1c;
  color: #eaeaea;
}
.tpl-label label { color: #9aa0a6; margin-right: 4px; }

/* --- Shared type / rhythm ------------------------------------------------- */
.axis-hero,
.axis-sec,
.axis-neighbourhood { font-family: var(--axis-font); }

.axis-sec { padding-block: clamp(3.5rem, 8vw, 7rem); }

.axis-h2 {
  font-family: var(--axis-font);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--axis-red);
  margin: 0;
}

.axis-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.85;
  margin-bottom: 1rem;
}

.axis-rule {
  display: block;
  width: 58px;
  height: 1px;
  margin-top: 1.25rem;
  background: currentColor;
  opacity: 0.55;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.axis-hero {
  position: relative;
  background: var(--axis-red);
  color: var(--axis-cream-soft);
  overflow: hidden;
}

.axis-nav { position: absolute; inset: 0 0 auto 0; z-index: 3; }

/* --- Wordmark logo (inline, recolours via currentColor) ------------------ */
.axis-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--axis-cream-soft);
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
}
.axis-logo__mark { height: 46px; width: auto; display: block; }
.axis-logo__stack { display: flex; flex-direction: column; }
.axis-logo__word { font-weight: 300; font-size: 1.6rem; letter-spacing: 0.34em; }
.axis-logo__sub {
  font-weight: 400;
  font-size: 0.56rem;
  letter-spacing: 0.42em;
  opacity: 0.9;
  margin-top: 0.35rem;
}
.axis-logo--stack { flex-direction: column; gap: 0.55rem; text-align: center; }
.axis-logo--stack .axis-logo__mark { height: clamp(70px, 8vw, 92px); }
.axis-logo__word--lg { font-size: clamp(2.1rem, 3vw, 3rem); letter-spacing: 0.3em; }
.axis-logo__estrow { display: flex; align-items: center; gap: 1rem; }
.axis-logo__est { font-size: 0.72rem; letter-spacing: 0.2em; opacity: 0.85; }
.axis-logo--stack .axis-logo__sub { margin-top: 0; font-size: 0.72rem; }

.axis-nav__link {
  color: rgba(255, 251, 245, 0.85);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.axis-nav__link:hover,
.axis-nav__link.is-hover,
.axis-nav__link:focus-visible,
.axis-nav__link.is-focus-visible { color: #fff; border-color: currentColor; }

.axis-hero__row { min-height: 640px; }

.axis-hero__copy { display: flex; align-items: center; }
.axis-hero__copy-inner {
  padding: 9rem clamp(1.5rem, 5vw, 3rem) 4rem clamp(1.5rem, 6vw, 6rem);
  max-width: 720px;
}

.axis-hero__title {
  font-weight: 200;
  font-size: clamp(2.9rem, 7vw, 6.2rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

.axis-hero__lead {
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  max-width: 30ch;
  color: rgba(255, 251, 245, 0.9);
  margin: 0 0 2.25rem;
}

.axis-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--axis-cream-soft);
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.axis-hero__cta-line {
  display: block;
  width: 34px;
  height: 1px;
  background: currentColor;
  transition: width 0.25s ease;
}
.axis-hero__cta:hover .axis-hero__cta-line,
.axis-hero__cta.is-hover .axis-hero__cta-line { width: 54px; }

.axis-hero__media { position: relative; min-height: 340px; }
.axis-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Oversized brand "A" watermark motif — pervades the design. */
.axis-watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.axis-watermark svg { display: block; width: 100%; height: 100%; }
.axis-hero .axis-watermark { top: -4%; left: 4%; width: 46%; height: 108%; color: #fff; opacity: 0.04; }
.axis-hero > .container-fluid { position: relative; z-index: 1; }

.axis-hero__scroll {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: 2rem;
  z-index: 3;
  color: rgba(255, 251, 245, 0.85);
  width: 34px;
  height: 34px;
  display: block;
}
.axis-hero__scroll svg { width: 100%; height: 100%; }
.axis-hero__scroll:hover,
.axis-hero__scroll.is-hover { color: #fff; }

@media (min-width: 992px) {
  .axis-hero__row { min-height: 100vh; }
}

/* --- Buttons -------------------------------------------------------------- */
.axis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.axis-btn--pill {
  padding: 0.7rem 1.6rem;
  color: var(--axis-cream-soft);
  border: 1px solid rgba(255, 251, 245, 0.55);
  background: transparent;
}
.axis-btn--pill:hover,
.axis-btn--pill.is-hover,
.axis-btn--pill:focus-visible,
.axis-btn--pill.is-focus-visible {
  background: var(--axis-cream-soft);
  color: var(--axis-red);
  border-color: var(--axis-cream-soft);
}
.axis-btn--solid {
  padding: 0.85rem 2.4rem;
  background: var(--axis-cream-soft);
  color: var(--axis-red);
  border: 1px solid var(--axis-cream-soft);
  font-weight: 500;
}
.axis-btn--solid:hover,
.axis-btn--solid.is-hover,
.axis-btn--solid:focus-visible,
.axis-btn--solid.is-focus-visible {
  background: transparent;
  color: var(--axis-cream-soft);
}

/* ==========================================================================
   2. About / Intro
   ========================================================================== */
.axis-about { background: var(--axis-cream); color: var(--axis-ink); }
.axis-about__head { max-width: 60rem; }
.axis-about__head .axis-h2 { margin-bottom: 1.5rem; }
.axis-about__lead {
  max-width: 56rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--axis-ink);
  opacity: 0.85;
}
.axis-about__cols { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.axis-feature__title {
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--axis-ink);
  margin: 0;
}
.axis-feature__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--axis-ink);
  opacity: 0.8;
  margin: 1.5rem 0 0;
}
.axis-about__cols .axis-rule { color: var(--axis-red); margin-block: 1.25rem; }

/* ==========================================================================
   3. Gallery
   ========================================================================== */
.axis-gallery { background: var(--axis-red); color: var(--axis-cream-soft); }
.axis-gallery__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.axis-gallery__head .axis-eyebrow { margin-bottom: 0.75rem; }

.axis-gallery__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.axis-gallery .axis-watermark { top: -12%; left: -10%; width: 46%; height: 128%; color: #000; opacity: 0.05; }

/* Thin line arrows (gallery + unit stepper) — no circle/border. */
.axis-arrow {
  border: 0;
  background: transparent;
  padding: 0.35rem;
  color: var(--axis-cream-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.axis-arrow svg { width: 46px; height: 22px; }
.axis-arrow:hover,
.axis-arrow.is-hover { opacity: 1; }
.axis-arrow--dark { color: var(--axis-red); }
.axis-arrow--dark svg { width: 34px; }
.axis-arrow--muted { color: rgba(46, 33, 25, 0.3); cursor: default; }
.axis-arrow--muted svg { width: 34px; }

.axis-dots {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.axis-dot {
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 251, 245, 0.35);
}
.axis-dot.is-active { background: var(--axis-cream-soft); }

/* ==========================================================================
   4. Floorplans
   ========================================================================== */
.axis-floorplans { background: var(--axis-cream-2); color: var(--axis-ink); }
.axis-floorplans__title { max-width: 60rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.axis-tabs { gap: clamp(1.5rem, 4vw, 3rem); margin-bottom: 1.75rem; }
.axis-tab {
  font-weight: 300;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  color: rgba(46, 33, 25, 0.45);
  padding-bottom: 0.55rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.axis-tab.is-active { color: var(--axis-ink); border-color: var(--axis-ink); }
.axis-tab:hover,
.axis-tab.is-hover { color: var(--axis-ink); }

.axis-subtabs {
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(46, 33, 25, 0.12);
}
.axis-subtab {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: rgba(46, 33, 25, 0.5);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.axis-subtab.is-active { color: var(--axis-red); border-color: var(--axis-red); }
.axis-subtab:hover,
.axis-subtab.is-hover { color: var(--axis-ink); }

.axis-unit__head { margin-bottom: 2rem; }
.axis-unit__title {
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  color: var(--axis-ink);
  margin: 0;
}

.axis-spec { margin: 0; }
.axis-spec__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0.25rem;
  border-bottom: 1px solid rgba(46, 33, 25, 0.14);
}
.axis-spec__row:first-child { border-top: 1px solid rgba(46, 33, 25, 0.14); }
.axis-spec__row dt {
  font-weight: 400;
  color: rgba(46, 33, 25, 0.65);
  font-size: 1rem;
}
.axis-spec__row dd {
  margin: 0;
  color: var(--axis-ink);
  font-size: 1rem;
}

.axis-floorplans__img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
}

/* ==========================================================================
   5. Amenities
   ========================================================================== */
.axis-amenities { background: var(--axis-cream); color: var(--axis-ink); }
.axis-amenities__title { max-width: 56rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.axis-amenities__grid { align-items: start; }

.axis-amenity__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(88px, 9vw, 118px);
  height: clamp(88px, 9vw, 118px);
  border-radius: 999px;
  border: 1px solid rgba(140, 17, 9, 0.35);
  color: var(--axis-red);
  margin-bottom: 1.5rem;
}
.axis-amenity__icon svg { width: 46%; height: 46%; }
.axis-amenity__label {
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  color: var(--axis-ink);
  margin: 0;
  max-width: 14ch;
  margin-inline: auto;
}
.axis-amenities__grid .axis-rule { color: var(--axis-red); margin-top: 1.5rem; }

/* ==========================================================================
   6. Neighbourhood
   ========================================================================== */
.axis-neighbourhood {
  background: var(--axis-cream);
  color: var(--axis-ink);
  padding-top: clamp(3.5rem, 8vw, 7rem);
}
.axis-neighbourhood__title { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.axis-place-tabs {
  gap: clamp(1rem, 2.6vw, 2.25rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(46, 33, 25, 0.15);
  margin-bottom: 0;
}
.axis-place {
  font-size: clamp(0.82rem, 1.1vw, 1rem);
  color: rgba(46, 33, 25, 0.55);
  padding-bottom: 1.5rem;
  margin-bottom: -1.5rem;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.axis-place.is-active { color: var(--axis-red); border-color: var(--axis-red); }
.axis-place:hover,
.axis-place.is-hover { color: var(--axis-ink); }

.axis-map { margin-top: clamp(1.5rem, 3vw, 2.5rem); position: relative; }
.axis-map img {
  width: 100%;
  height: clamp(320px, 40vw, 520px);
  object-fit: cover;
  display: block;
}
.axis-map__pin { position: absolute; width: 26px; height: 26px; color: var(--axis-red); transform: translate(-50%, -100%); }
.axis-map__logo { position: absolute; width: 40px; height: 62px; color: var(--axis-red); transform: translate(-50%, -50%); }
.axis-map__compass { position: absolute; top: 1.5rem; right: 2rem; width: 22px; color: var(--axis-red); text-align: center; }
.axis-map__compass svg { width: 100%; display: block; }
.axis-map__n { display: block; font-size: 0.72rem; font-weight: 600; margin-bottom: 2px; }
.axis-map__zoom {
  position: absolute;
  right: 1.75rem;
  bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.axis-map__zoom button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: var(--axis-ink);
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.axis-about { position: relative; overflow: hidden; }
.axis-about .axis-watermark { top: 4%; right: -8%; width: 40%; height: 92%; color: var(--axis-red); opacity: 0.04; }
.axis-about .container { position: relative; z-index: 1; }

/* ==========================================================================
   7. Contact + Footer
   ========================================================================== */
.axis-contact { background: var(--axis-red); color: var(--axis-cream-soft); }
.axis-contact__body { margin-bottom: clamp(3rem, 6vw, 5rem); }
.axis-contact .axis-h2 { margin-bottom: 1.5rem; }
.axis-contact__lead {
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 34ch;
  color: rgba(255, 251, 245, 0.9);
  margin-bottom: 2.5rem;
}

.axis-contact__list { margin: 0; display: grid; gap: 1.1rem; }
.axis-contact__list li { display: flex; align-items: center; gap: 0.9rem; font-size: 1rem; }
.axis-contact__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--axis-cream-soft); }
.axis-contact__icon svg { width: 100%; height: 100%; }

/* Form — Bootstrap form controls restyled for the red panel */
.axis-field__label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(255, 251, 245, 0.85);
  margin-bottom: 0.4rem;
}
.axis-field.form-control,
.axis-field.form-select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 251, 245, 0.4);
  border-radius: 0;
  color: var(--axis-cream-soft);
  padding: 0.55rem 0;
}
.axis-field.form-control::placeholder { color: rgba(255, 251, 245, 0.55); }
.axis-field.form-select {
  color: rgba(255, 251, 245, 0.75);
  --bs-form-select-bg-img: none;
}
.axis-field.form-select option { color: #222; }
.axis-field.form-control:focus,
.axis-field.form-select:focus,
.axis-field.form-control.is-focus,
.axis-field.form-select.is-focus {
  background: transparent;
  border-bottom-color: var(--axis-cream-soft);
  box-shadow: none;
  color: #fff;
}
.axis-contact { position: relative; overflow: hidden; }
.axis-contact .axis-watermark { top: 2%; left: -8%; width: 44%; height: 96%; color: #000; opacity: 0.06; }
.axis-contact__body,
.axis-contact .axis-footer { position: relative; z-index: 1; }
.axis-contact__form .axis-btn--solid { margin-top: 0.5rem; }

/* Footer */
.axis-footer { padding-top: clamp(2.5rem, 5vw, 4rem); }
.axis-footer__brand {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2rem;
}
.axis-footer__line { flex: 1 1 auto; height: 1px; background: rgba(255, 251, 245, 0.4); }
.axis-footer__legal {
  color: rgba(255, 251, 245, 0.7);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}