/* ==========================================================================
   RE HOUSE — Main Stylesheet
   Built from mockup: ReHouse_Homepage_V1_3.html
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Design tokens (colours, type, layout)
   02. Reset & base
   03. Reusable utilities (sections, headings, buttons, wordmark)
   04. Navigation
   05. Hero
   06. Concept / philosophy
   07. Process
   08. Services
   09. Contact
   10. Footer
   11. Motion
   12. Legal & utility pages
   --------------------------------------------------------------------------
   Screen-size rules live in css/responsive.css
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Change a colour here and it updates everywhere on the site.
   ========================================================================== */
:root {
  /* Brand colours */
  --bone:        #F8F5F0;
  --pebble:      #E8E0D4;
  --tan:         #C4A882;
  --tan-light:   #D4BCA0;
  --charcoal:    #5A5048;
  --charcoal-dk: #3E3830;
  --black:       #2A2420;
  --mid:         #8A8078;
  --light-mid:   #B0A89C;
  --border:      #D0C8BC;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  /* Layout */
  --nav-height: 64px;
  --max-width:  1200px;
  --section-y:  7rem;
  --section-x:  4rem;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Visible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px;
}

/* Skip link — hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--black);
  color: var(--bone);
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }


/* ==========================================================================
   03. REUSABLE UTILITIES
   ========================================================================== */
.section {
  padding: var(--section-y) var(--section-x);
  max-width: var(--max-width);
  margin: 0 auto;
}

.accent-bar {
  height: 3px;
  background: var(--tan);
}

.eyebrow {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1.5rem;
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--black);
}

/* Heading spacing helpers */
.h2--gap-sm { margin-bottom: 1.5rem; }
.h2--gap    { margin-bottom: 1.75rem; }
.h2--gap-lg { margin-bottom: 3rem; }
.h2--gap-xl { margin-bottom: 4.5rem; }

/* Buttons */
.btn-primary {
  display: inline-block;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--tan);
  color: var(--black);
  padding: 14px 28px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--charcoal);
  color: var(--bone);
}

.btn-ghost {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(90, 80, 72, 0.3);
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus { color: var(--tan); }

/* Wordmark lockup — "Re | HOUSE". Sized per context below. */
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}
.wordmark__re {
  font-family: var(--font-display);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.02em;
}
.wordmark__rule {
  width: 1px;
  flex-shrink: 0;
}
.wordmark__house {
  font-family: var(--font-body);
  font-weight: 200;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}


/* ==========================================================================
   04. NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.5rem;
  background: rgba(248, 245, 240, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 0.5px solid var(--border);
}

.nav .wordmark__re    { font-size: 28px; color: var(--black); }
.nav .wordmark__rule  { height: 18px; background: var(--border); }
.nav .wordmark__house { font-size: 9px; color: var(--charcoal); }

.nav__cta {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--bone);
  padding: 10px 22px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.nav__cta:hover,
.nav__cta:focus { background: var(--charcoal); }


/* ==========================================================================
   05. HERO
   ========================================================================== */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 36% 64%;
  padding-top: var(--nav-height);
}

/* --- Left: dark brand panel --- */
.hero__left {
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.5rem 2.75rem 0;
}

/* Pushes the logo block down to the lower third on desktop */
.hero__spacer { flex: 1; }

.hero__left .wordmark        { margin-bottom: 10px; }
.hero__left .wordmark__re    { font-size: 38px; color: var(--bone); }
.hero__left .wordmark__rule  { height: 24px; background: rgba(208, 200, 188, 0.4); }
.hero__left .wordmark__house { font-size: 10px; color: var(--pebble); }

.hero__rule {
  width: 32px;
  height: 1px;
  background: var(--tan);
  margin: 16px 0;
}

.hero__left-body {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(232, 224, 212, 0.58);
  line-height: 1.7;
}

/* Tan bar pinned to the bottom of the dark panel */
.hero__left-foot {
  background: var(--tan);
  margin: 3rem -2.75rem 0;
  padding: 1rem 2.75rem;
}
.hero__left-foot-text {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--black);
}

/* --- Right: headline --- */
.hero__right {
  background: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4.5rem 5rem 4rem;
  position: relative;
  overflow: hidden;
}

/* Oversized "RH" watermark behind the headline */
.hero__watermark {
  position: absolute;
  bottom: -0.08em;
  right: -0.04em;
  font-family: var(--font-display);
  font-size: clamp(160px, 20vw, 280px);
  font-weight: 300;
  color: rgba(42, 36, 32, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hero__eyebrow {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1.75rem;
  position: relative;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 300;
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 2rem;
  position: relative;
}
.hero__title em {
  font-style: italic;
  color: var(--charcoal);
}

/* Line break that only applies on desktop, so the headline
   wraps naturally on phones instead of breaking awkwardly. */
.hero__title .break-desktop { display: none; }
@media (min-width: 769px) {
  .hero__title .break-desktop { display: inline; }
}

.hero__accent {
  width: 36px;
  height: 1.5px;
  background: var(--tan);
  margin-bottom: 1.75rem;
  position: relative;
}

.hero__sub {
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  max-width: 400px;
  margin-bottom: 2.75rem;
  position: relative;
}

.hero__buttons {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}


/* ==========================================================================
   06. CONCEPT / PHILOSOPHY
   ========================================================================== */
.concept {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.concept__body {
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.concept__body:last-of-type { margin-bottom: 0; }

.concept__aside { padding-top: 3.5rem; }

.concept__pullquote {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.5;
  padding-left: 1.5rem;
  border-left: 3px solid var(--tan);
}


/* ==========================================================================
   07. PROCESS
   ========================================================================== */
.process {
  background: var(--pebble);
}

.process__wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-y) var(--section-x);
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}

/* Horizontal connecting line behind the dots */
.steps__spine {
  position: absolute;
  top: 5px;
  left: 10%;
  right: 10%;
  height: 0.5px;
  background: var(--border);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.75rem;
  position: relative;
}
.step__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--tan);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.step__number {
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  color: var(--tan);
  margin-bottom: 0.6rem;
}
.step__title {
  font-size: 12px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 0.4rem;
}
.step__meta {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: 0.15em;
  color: var(--charcoal);
  margin-bottom: 0.65rem;
}
.step__body {
  font-size: 11px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
}


/* ==========================================================================
   08. SERVICES
   ========================================================================== */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.tier {
  background: var(--bone);
  padding: 2.5rem 2rem;
  position: relative;
}
.tier--featured { background: var(--black); }

.tier__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--charcoal);
}
.tier--featured .tier__bar { background: var(--tan); }
.tier--bespoke  .tier__bar { background: var(--tan); opacity: 0.5; }

.tier__badge {
  font-size: 8px;
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 1rem;
}
.tier--featured .tier__badge,
.tier--bespoke  .tier__badge { color: var(--tan); }

.tier__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  color: var(--black);
  margin-bottom: 0.5rem;
}
.tier--featured .tier__name { color: var(--bone); }

.tier__price {
  font-size: 12px;
  font-weight: 300;
  color: var(--tan);
  margin-bottom: 1.5rem;
}

.tier__rule {
  width: 32px;
  height: 0.5px;
  background: var(--border);
  margin-bottom: 1.5rem;
}
.tier--featured .tier__rule { background: rgba(232, 224, 212, 0.18); }

.tier__list {
  list-style: none;
  color: var(--mid);
}
.tier--featured .tier__list { color: var(--pebble); }

.tier__list li {
  font-size: 12px;
  font-weight: 300;
  padding: 5px 0 5px 1.2rem;
  position: relative;
  line-height: 1.5;
}
.tier__list li::before {
  content: '—';
  position: absolute;
  left: 0;
}


/* ==========================================================================
   09. CONTACT
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.contact__body {
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.contact__checks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact__check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.contact__dash {
  width: 16px;
  height: 1.5px;
  background: var(--tan);
  margin-top: 9px;
  flex-shrink: 0;
}
.contact__check-text {
  font-size: 13px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.6;
}

/* --- Dark contact panel --- */
.panel {
  background: var(--black);
  padding: 2.75rem;
}

.panel__eyebrow {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1rem;
}
.panel__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  color: var(--bone);
  line-height: 1.25;
  margin-bottom: 1rem;
}
.panel__body {
  font-size: 13px;
  font-weight: 300;
  color: rgba(232, 224, 212, 0.72);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.panel__button {
  display: block;
  width: 100%;
  background: var(--tan);
  padding: 16px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.panel__button:hover,
.panel__button:focus {
  background: var(--charcoal);
  color: var(--bone);
}

.panel__note {
  font-size: 10px;
  font-weight: 300;
  color: rgba(196, 168, 130, 0.82);
  margin-top: 0.85rem;
  text-align: center;
  line-height: 1.6;
}

.panel__alt {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 0.5px solid rgba(196, 168, 130, 0.16);
}
.panel__alt-label {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.9rem;
}
.panel__alt-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.panel__link {
  font-size: 13px;
  font-weight: 300;
  color: rgba(232, 224, 212, 0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}
.panel__link:hover,
.panel__link:focus { color: var(--tan); }
.panel__link span {
  color: rgba(232, 224, 212, 0.58);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* --- Tally form slot ---------------------------------------------------
   The embed stays hidden and the email fallback shows until a real Tally
   form ID is set in js/config.js. js/main.js then adds .is-tally-live to
   the panel, which flips the two.
   --------------------------------------------------------------------- */
.tally-slot { display: none; }
.tally-slot iframe {
  display: block;
  width: 100%;
  border: 0;
}
.panel.is-tally-live .tally-slot     { display: block; }
.panel.is-tally-live .panel__fallback { display: none; }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.footer {
  background: var(--black);
  padding: 3.5rem var(--section-x);
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
}

.footer__logo { margin-bottom: 0.75rem; }
.footer__logo .wordmark__re    { font-size: 26px; color: var(--bone); }
.footer__logo .wordmark__rule  { height: 16px; background: rgba(208, 200, 188, 0.25); }
.footer__logo .wordmark__house { font-size: 8px; color: var(--pebble); }

.footer__tagline {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  color: rgba(232, 224, 212, 0.4);
  line-height: 1.5;
}

.footer__col-title {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer__link {
  font-size: 12px;
  font-weight: 300;
  color: rgba(232, 224, 212, 0.48);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__link:hover,
.footer__link:focus { color: var(--tan); }
.footer__link--plain { cursor: default; }

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 0.5px solid rgba(232, 224, 212, 0.07);
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer__copy {
  font-size: 10px;
  font-weight: 300;
  color: rgba(232, 224, 212, 0.25);
  letter-spacing: 0.05em;
}
.footer__copy a { color: inherit; text-decoration: none; }
.footer__copy a:hover { color: var(--tan); }


/* ==========================================================================
   11. MOTION
   ========================================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__right > *:not(.hero__watermark) {
  animation: fade-up 0.75s ease forwards;
  opacity: 0;
}
.hero__eyebrow { animation-delay: 0.20s; }
.hero__title   { animation-delay: 0.35s; }
.hero__accent  { animation-delay: 0.48s; }
.hero__sub     { animation-delay: 0.58s; }
.hero__buttons { animation-delay: 0.72s; }

/* Scroll-triggered reveal — add class="reveal" to opt an element in.
   js/main.js adds .is-visible when it scrolls into view. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__right > *:not(.hero__watermark) { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  * { transition-duration: 0.01ms !important; }
}


/* ==========================================================================
   12. LEGAL & UTILITY PAGES (privacy, 404)
   ========================================================================== */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 6rem) 2rem 6rem;
}

.page__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.page__meta {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 3rem;
}

.page h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 2.5rem 0 0.75rem;
}

.page p,
.page li {
  font-size: 14px;
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.9;
}
.page p  { margin-bottom: 1rem; }
.page ul { margin: 0 0 1rem 1.25rem; }
.page a  { color: var(--tan); }

/* Centred message page (404) */
.notice {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.notice .wordmark        { margin-bottom: 2.5rem; }
.notice .wordmark__re    { font-size: 34px; color: var(--black); }
.notice .wordmark__rule  { height: 22px; background: var(--border); }
.notice .wordmark__house { font-size: 10px; color: var(--charcoal); }

.notice__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.notice__body {
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.9;
  max-width: 460px;
  margin-bottom: 2.5rem;
}