/* ============================================================
   MAIN.CSS — Variables, Reset, Typography, Section Layouts
   Unique Stays Media
============================================================ */

/* ------------------------------------------------------------
   DESIGN TOKENS
------------------------------------------------------------ */
:root {
  /* Backgrounds */
  --color-void:        #f5f0e8;
  --color-deep:        #ece6db;
  --color-surface:     #e4ddd0;
  --color-surface-alt: #dbd4c6;

  /* Text */
  --color-ivory:       #18130c;
  --color-cream:       #2d2318;
  --color-muted:       #7a7060;
  --color-whisper:     #cdc6b8;

  /* Accent */
  --color-gold:        #8b6914;
  --color-gold-light:  #a07c20;
  --color-gold-dim:    #b89650;

  /* Overlays (always dark — used on video/images regardless of theme) */
  --overlay-light:     rgba(18, 12, 6, 0.50);
  --overlay-mid:       rgba(18, 12, 6, 0.70);
  --overlay-heavy:     rgba(18, 12, 6, 0.88);

  /* Typography */
  --font-display:      'Cormorant Garamond', Georgia, serif;
  --font-label:        'Cormorant SC', Georgia, serif;
  --font-body:         'Cormorant Garamond', Georgia, serif;

  /* Type scale — root 20px, so 1rem = 20px */
  --text-xs:    0.75rem;     /* 15px  — labels, captions       */
  --text-sm:    0.9rem;      /* 18px  — meta, footer, tags      */
  --text-base:  1rem;        /* 20px  — buttons, nav, UI        */
  --text-lg:    1.2rem;      /* 24px  — body / fließtext        */
  --text-xl:    1.4rem;      /* 28px  — leads, intros           */
  --text-2xl:   1.65rem;     /* 33px  — card titles, nav links  */
  --text-3xl:   2.1rem;      /* 42px  — section titles          */
  --text-4xl:   2.9rem;      /* 58px  — display headings        */
  --text-5xl:   3.9rem;      /* 78px  — hero / stat numbers     */
  --text-6xl:   5.2rem;      /* 104px — large display           */
  --text-7xl:   6.75rem;     /* 135px — hero headline max       */

  /* Spacing (8px base) */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;
  --space-48:  12rem;

  /* Layout */
  --container-max:      1280px;
  --container-narrow:   820px;
  --nav-height:         80px;

  /* Motion */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:       180ms;
  --dur-base:       400ms;
  --dur-slow:       700ms;
  --dur-cinematic:  1100ms;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
  font-size: 20px;
}

body {
  background-color: var(--color-void);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.82;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain overlay — film-like texture over entire page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.032;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

textarea {
  resize: vertical;
}


/* ------------------------------------------------------------
   TYPOGRAPHY — Global
------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.12;
  color: var(--color-ivory);
}

em {
  font-style: italic;
  color: var(--color-gold);
}

.display-heading {
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-6xl));
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.label {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
}


/* ------------------------------------------------------------
   LAYOUT UTILITIES
------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section-header {
  margin-bottom: var(--space-16);
}

.section-header .display-heading {
  margin-top: var(--space-3);
}

.section-header__intro {
  margin-top: var(--space-6);
  max-width: 600px;
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: 1.82;
}


/* ------------------------------------------------------------
   HERO SECTION
------------------------------------------------------------ */
#hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-24);
  overflow: hidden;
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__video--mobile {
  display: none;
}

.hero__poster--mobile {
  display: none;
}

@media (max-width: 768px) {
  .hero__video--desktop {
    display: none;
  }
  .hero__poster--mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 12, 6, 0.35) 0%,
    rgba(18, 12, 6, 0.60) 45%,
    rgba(18, 12, 6, 0.88) 75%,
    rgba(245, 240, 232, 1.00) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  /* Always light text — sits on dark video overlay regardless of theme */
  color: #f5f0e8;
}

.hero__content h1,
.hero__content .hero__headline {
  color: #faf7f2;
}

.hero__content em {
  color: #e8c99a;
}

.hero__content .label {
  color: #e8c99a;
}

.hero__eyebrow {
  margin-bottom: var(--space-4);
}

.hero__headline {
  font-size: clamp(var(--text-4xl), 7vw, var(--text-7xl));
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin-bottom: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line--accent em {
  font-style: italic;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-10);
  right: var(--space-8);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__scroll-text {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.7);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-gold), transparent);
  transform-origin: top center;
}


/* ------------------------------------------------------------
   INTRO SECTION
------------------------------------------------------------ */
#intro {
  padding-block: var(--space-40) var(--space-32);
  text-align: center;
  position: relative;
}

.intro__body {
  font-size: var(--text-lg);
  line-height: 1.85;
  color: var(--color-muted);
  margin-top: var(--space-8);
  max-width: 700px;
  margin-inline: auto;
}

.intro__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.stat {
  text-align: center;
}

.stat__number {
  display: inline;
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: 300;
  color: var(--color-ivory);
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat__suffix {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  color: var(--color-gold);
  font-weight: 300;
}

.stat__label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

.stat__divider {
  width: 1px;
  height: 60px;
  background: var(--color-whisper);
  flex-shrink: 0;
}

.intro__rule {
  width: 60px;
  height: 1px;
  background: var(--color-gold-dim);
  margin-inline: auto;
  margin-top: var(--space-24);
  opacity: 0.6;
}


/* ------------------------------------------------------------
   SERVICES SECTION
------------------------------------------------------------ */
#services {
  padding-block: var(--space-32) var(--space-40);
  background: var(--color-deep);
  position: relative;
}

#services::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-whisper), transparent);
  opacity: 0.7;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}


/* ------------------------------------------------------------
   TEAM SECTION
------------------------------------------------------------ */
#team {
  padding-block: var(--space-40);
}

.team__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin-top: var(--space-4);
}


/* ------------------------------------------------------------
   WORK / CASE STUDIES
------------------------------------------------------------ */
#work {
  padding-block: var(--space-32) var(--space-40);
  background: var(--color-deep);
  position: relative;
}

#work::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-whisper), transparent);
}

.case-studies {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}


/* ------------------------------------------------------------
   CONTACT SECTION
------------------------------------------------------------ */
#contact {
  padding-block: var(--space-40);
  text-align: center;
}


/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */
#footer {
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-whisper);
  background: var(--color-void);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.footer__logo {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  color: var(--color-cream);
}

.footer__social {
  display: flex;
  gap: var(--space-6);
}

.footer__social-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.05em;
  transition: color var(--dur-base) var(--ease-gentle);
}

.footer__social-link:hover {
  color: var(--color-gold);
}

.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.footer__copy {
  font-size: var(--text-sm);
  color: var(--color-whisper);
  letter-spacing: 0.05em;
}

.footer__legal-links {
  display: flex;
  gap: var(--space-4);
}

.footer__legal-link {
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.05em;
  transition: color var(--dur-base) var(--ease-gentle);
}

.footer__legal-link:hover {
  color: var(--color-gold);
}


/* ------------------------------------------------------------
   RESPONSIVE — Tablet
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

}

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  #hero {
    padding-top: calc(var(--nav-height) + var(--space-6));
    padding-bottom: var(--space-10);
    align-items: flex-start;
    text-align: center;
    overflow: visible;
  }

  .hero__headline {
    font-size: clamp(2rem, 11vw, 3.2rem);
    margin-bottom: var(--space-8);
  }

  .hero__scroll-indicator {
    display: none;
  }

  .hero__content {
    padding-inline: var(--space-6);
  }

  .intro__stats {
    gap: var(--space-8);
  }

  .container {
    padding-inline: var(--space-6);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .footer__legal {
    align-items: center;
  }

  .footer__social {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  .intro__stats {
    flex-direction: column;
    gap: var(--space-8);
  }

  .stat__divider {
    width: 40px;
    height: 1px;
  }

  .container {
    padding-inline: var(--space-4);
  }
}