/* Habitat Grand: one stylesheet for all five pages.
   Every colour, font and size lives here in :root. Layout uses flexbox only. */

:root {
  /* Colours, taken from the Habitat Grand logo */
  --color-teal: #1e3b3e;
  --color-teal-deep: #142a2c;
  --color-teal-soft: #2c5054;
  --color-rose: #c8a291;
  --color-rose-light: #e4cfc4;
  --color-cream: #f6f1eb;
  --color-sand: #ece3d9;
  --color-white: #ffffff;
  --color-ink: #1b2627;
  --color-muted: #5f6b6c;
  --color-line: #d9cfc4;
  --color-line-dark: #3b5e62;
  --color-overlay: rgba(20, 42, 44, 0.55);

  /* Fonts */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", "Helvetica Neue", "Arial", sans-serif;

  /* Font sizes */
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-md: 1.125rem;
  --size-lg: 1.375rem;
  --size-xl: 1.75rem;
  --size-2xl: 2.25rem;
  --size-3xl: 3rem;
  --size-4xl: 4rem;
  --size-stat: 3.25rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.15;
  --leading-body: 1.65;
  --tracking-wide: 0.18em;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: 2.5rem;

  /* Sizes */
  --page-max: 75rem;
  --text-max: 40rem;
  --full: 100%;
  --logo-height: 3.5rem;
  --hero-min: 40rem;
  --map-min: 26rem;
  --photo-ratio: 4 / 3;
  --photo-ratio-wide: 16 / 9;
  --photo-ratio-tall: 3 / 4;
  --card-min: 16rem;
  --dot-size: 0.5rem;
  --step-size: 2.75rem;
  --icon-bar-w: 1.5rem;
  --icon-bar-h: 0.125rem;
  --border-thin: 1px;
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-round: 50%;
  --input-height: 3rem;
  --textarea-height: 8rem;
  --z-nav: 10;
  --shadow-card: 0 0.5rem 1.5rem rgba(20, 42, 44, 0.08);
  --transition: 0.2s ease;

  /* Images (swap the file names here when the real photos arrive) */
  --hero-image: url("../images/hero.jpg");
}

/* Tablet values */
@media (max-width: 1024px) {
  :root {
    --size-3xl: 2.5rem;
    --size-4xl: 3.25rem;
    --size-stat: 2.75rem;
    --gutter: 2rem;
    --space-9: 4.5rem;
    --hero-min: 32rem;
  }
}

/* Mobile values */
@media (max-width: 640px) {
  :root {
    --size-2xl: 1.875rem;
    --size-3xl: 2.125rem;
    --size-4xl: 2.5rem;
    --size-stat: 2.25rem;
    --gutter: 1rem;
    --space-8: 3rem;
    --space-9: 3.5rem;
    --hero-min: 30rem;
    --logo-height: 2.5rem;
    --map-min: 18rem;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: var(--space-0);
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; display: flex; flex-direction: column; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: var(--space-0);
  color: var(--color-teal);
}
h1 { font-size: var(--size-4xl); }
h2 { font-size: var(--size-3xl); }
h3 { font-size: var(--size-xl); }

p { margin: var(--space-0); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: var(--full); }
ul, ol { margin: var(--space-0); padding: var(--space-0); list-style: none; }
figure { margin: var(--space-0); }

/* ---------- Layout helpers ---------- */
.section {
  display: flex;
  justify-content: center;
  padding: var(--space-9) var(--gutter);
}
.section-sand { background: var(--color-sand); }
.section-teal { background: var(--color-teal); color: var(--color-cream); }
.section-teal h2, .section-teal h3 { color: var(--color-cream); }

.container {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  width: var(--full);
  max-width: var(--page-max);
}

.split {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}
.split > * { flex: 1 1 0; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--text-max);
}
.section-head-center { align-self: center; align-items: center; text-align: center; }

.eyebrow {
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-rose);
}

.lead { font-size: var(--size-md); color: var(--color-muted); }
.section-teal .lead { color: var(--color-rose-light); }

.text-block { display: flex; flex-direction: column; gap: var(--space-5); }

/* ---------- Buttons ---------- */
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.button-primary,
.button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.button-primary {
  background: var(--color-rose);
  color: var(--color-teal-deep);
  border: var(--border-thin) solid var(--color-rose);
}
.button-primary:hover { background: var(--color-rose-light); }
.button-outline {
  background: transparent;
  color: var(--color-cream);
  border: var(--border-thin) solid var(--color-cream);
}
.button-outline:hover { background: var(--color-cream); color: var(--color-teal); }
.button-outline-dark { color: var(--color-teal); border-color: var(--color-teal); }
.button-outline-dark:hover { background: var(--color-teal); color: var(--color-cream); }

/* The custom element wrappers do not create a box, so the sticky header
   sticks to the page, not to its wrapper. */
site-header, site-footer { display: contents; }

/* ---------- Header (component) ---------- */
.site-header {
  position: sticky;
  top: var(--space-0);
  z-index: var(--z-nav);
  background: var(--color-teal);
  display: flex;
  justify-content: center;
  padding: var(--space-3) var(--gutter);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: var(--full);
  max-width: var(--page-max);
}
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand-logo { height: var(--logo-height); width: auto; }
.brand-text {
  display: none;
  flex-direction: column;
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--color-rose);
}
.brand-text-top { font-size: var(--size-sm); letter-spacing: var(--tracking-wide); }
.brand-text-bottom { font-size: var(--size-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); }
.brand-missing .brand-logo { display: none; }
.brand-missing .brand-text { display: flex; }

.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav-link {
  font-size: var(--size-sm);
  color: var(--color-cream);
  padding: var(--space-2) var(--space-0);
  border-bottom: var(--border-thin) solid transparent;
}
.nav-link:hover, .nav-link-active { color: var(--color-rose); border-bottom-color: var(--color-rose); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: transparent;
  border: var(--border-thin) solid var(--color-line-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bar { width: var(--icon-bar-w); height: var(--icon-bar-h); background: var(--color-cream); }

/* ---------- Footer (component) ---------- */
.site-footer {
  background: var(--color-teal-deep);
  color: var(--color-rose-light);
  display: flex;
  justify-content: center;
  padding: var(--space-8) var(--gutter) var(--space-6);
}
.footer-inner { display: flex; flex-direction: column; gap: var(--space-7); width: var(--full); max-width: var(--page-max); }
.footer-columns { display: flex; gap: var(--space-7); }
.footer-col { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--size-sm); }
.footer-col-wide { flex: 2 1 0; }
.footer-title { font-family: var(--font-display); font-size: var(--size-lg); color: var(--color-rose); }
.footer-link:hover { color: var(--color-white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-line-dark);
  font-size: var(--size-xs);
  color: var(--color-muted);
}

/* ---------- Hero ---------- */
.hero {
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min);
  padding: var(--space-9) var(--gutter);
  background-color: var(--color-teal);
  background-image: linear-gradient(var(--color-overlay), var(--color-overlay)), var(--hero-image);
  background-size: cover;
  background-position: center;
  justify-content: center;
}
.hero-shade {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: var(--full);
  max-width: var(--page-max);
}
.hero-title { color: var(--color-cream); max-width: var(--text-max); }
.hero-title-accent {
  color: var(--color-rose);
  font-family: var(--font-display);
  font-size: var(--size-xl);
  line-height: var(--leading-tight);
  max-width: var(--text-max);
}
.hero-copy { color: var(--color-rose-light); font-size: var(--size-md); max-width: var(--text-max); }

.page-hero {
  display: flex;
  justify-content: center;
  padding: var(--space-8) var(--gutter);
  background: var(--color-teal);
}
.page-hero .section-head h1 { color: var(--color-cream); }
.page-hero .lead { color: var(--color-rose-light); }

/* ---------- Stats ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.stat {
  flex: 1 1 var(--card-min);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-0);
  border-top: var(--border-thin) solid var(--color-rose);
}
.stat-number { font-family: var(--font-display); font-size: var(--size-stat); color: var(--color-teal); line-height: var(--leading-tight); }
.stat-label { font-size: var(--size-sm); color: var(--color-muted); }

/* ---------- Photos ---------- */
.photo {
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-sand);
  aspect-ratio: var(--photo-ratio);
}
.photo-wide { aspect-ratio: var(--photo-ratio-wide); }
.photo-tall { aspect-ratio: var(--photo-ratio-tall); }
.photo-img { width: var(--full); height: var(--full); object-fit: cover; }
.photo-note {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  text-align: center;
  font-size: var(--size-sm);
  color: var(--color-muted);
  border: var(--border-thin) dashed var(--color-line);
  border-radius: var(--radius-md);
}
.photo-missing .photo-img { display: none; }
.photo-missing .photo-note { display: flex; }

/* ---------- Cards ---------- */
.card-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.card-service {
  flex: 1 1 var(--card-min);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card-number { font-family: var(--font-display); font-size: var(--size-2xl); color: var(--color-rose); line-height: var(--leading-tight); }
.card-text { color: var(--color-muted); font-size: var(--size-sm); }

.card-partner {
  flex: 1 1 var(--card-min);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-thin) solid var(--color-line-dark);
  border-radius: var(--radius-md);
}
.card-partner-name { font-family: var(--font-display); font-size: var(--size-xl); color: var(--color-rose); }
.card-partner-text { font-size: var(--size-sm); color: var(--color-rose-light); }

/* ---------- Lists with real dot elements ---------- */
.dot-list { display: flex; flex-direction: column; gap: var(--space-3); }
.dot-item { display: flex; align-items: baseline; gap: var(--space-3); }
.dot {
  flex: none;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-round);
  background: var(--color-rose);
}

/* ---------- Steps ---------- */
.step-list { display: flex; flex-direction: column; gap: var(--space-5); }
.step-item {
  display: flex;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.step-number {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-size);
  height: var(--step-size);
  border-radius: var(--radius-round);
  background: var(--color-teal);
  color: var(--color-rose);
  font-family: var(--font-display);
  font-size: var(--size-lg);
}
.step-body { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Gallery ---------- */
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.filter-chip {
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-teal);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  color: var(--color-teal);
  background: transparent;
  font-family: var(--font-body);
}
.filter-chip-active { background: var(--color-teal); color: var(--color-cream); }

.gallery-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.gallery-item { flex: 1 1 var(--card-min); display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-caption { font-size: var(--size-sm); color: var(--color-muted); }

/* ---------- Location ---------- */
.place-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.place-tag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
}

/* ---------- CTA band ---------- */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.cta-band .text-block { max-width: var(--text-max); }

/* ---------- Contact form mockup ---------- */
.mockup-badge {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  background: var(--color-rose-light);
  color: var(--color-teal-deep);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.form-row { display: flex; gap: var(--space-5); }
.form-field { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: var(--size-sm); font-weight: var(--weight-medium); color: var(--color-teal); }
.form-input {
  height: var(--input-height);
  padding: var(--space-0) var(--space-4);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--color-ink);
}
.form-textarea { height: var(--textarea-height); padding: var(--space-3) var(--space-4); resize: vertical; }
.form-note { font-size: var(--size-xs); color: var(--color-muted); }

.info-list { display: flex; flex-direction: column; gap: var(--space-5); }
.info-item { display: flex; flex-direction: column; gap: var(--space-1); }
.info-label { font-size: var(--size-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-rose); }
.info-value { font-size: var(--size-md); }

/* ---------- Notice card: for information still being prepared ---------- */
.card-notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-thin) dashed var(--color-rose);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

/* ---------- News list ---------- */
.news-list { display: flex; flex-direction: column; gap: var(--space-5); }
.news-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.news-date { font-size: var(--size-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-rose); }

/* ---------- Tablet layout ---------- */
@media (max-width: 1024px) {
  .split { gap: var(--space-7); }
  .footer-columns { flex-wrap: wrap; }
  .footer-col-wide { flex-basis: var(--full); }
  .gallery-item { flex-basis: calc(var(--full) / 3); }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ---------- Menu collapses earlier: eight items need the room ---------- */
@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    flex-basis: var(--full);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-0);
    padding-top: var(--space-3);
  }
  .nav-open .nav { display: flex; }
  .nav-link { padding: var(--space-3) var(--space-0); border-bottom: var(--border-thin) solid var(--color-line-dark); }
}

/* ---------- Mobile layout ---------- */
@media (max-width: 760px) {
  /* Text first, picture second, so the message lands before the image */
  .split { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .split-reverse { flex-direction: column-reverse; }
  .form-row { flex-direction: column; }
  .form-card { padding: var(--space-5); }
}

@media (max-width: 640px) {
  .stat-row { row-gap: var(--space-0); column-gap: var(--space-5); }
  .stat { flex-basis: calc(var(--full) / 2 - var(--space-3)); padding: var(--space-4) var(--space-0); }
  .card-row { flex-direction: column; }
  .card-service { padding: var(--space-5); }
  .gallery-row { gap: var(--space-4); }
  .gallery-item { flex-basis: var(--full); }
  .footer-columns { flex-direction: column; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; }
  .button-row { flex-direction: column; align-items: stretch; }
  .hero { padding-bottom: var(--space-7); }
}