/* ══════════════════════════════════════════════
   HILLNESST — BASE CSS
   Bhowali, Nainital, Uttarakhand
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Outfit:wght@200;300;400;500;600&display=swap');

/* ── VARIABLES ── */
:root {
  --pine:         #253325;
  --pine-mid:     #2e4030;
  --pine-light:   #3a5c3c;
  --moss:         #4a6741;
  --sage:         #7a9e72;
  --cream:        #f5f0e6;
  --warm:         #faf7f0;
  --ivory:        #fffdf8;
  --gold:         #b87d2a;
  --gold-mid:     #c99040;
  --gold-light:   #d9aa5a;
  --copper:       #a06830;
  --mist:         #8ba499;
  --stone:        #3d3830;
  --charcoal:     #252018;
  --text:         #2a2520;
  --text-light:   #6b655d;
  --text-muted:   #9c968e;
  --white:        #ffffff;
  --border:       rgba(0,0,0,0.08);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.06);
  --shadow-md:    0 6px 28px rgba(0,0,0,0.1);
  --shadow-lg:    0 16px 56px rgba(0,0,0,0.14);
  --radius:       3px;
  --transition:   0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  background: var(--warm);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── TYPOGRAPHY ── */
.display {
  font-family: 'Cormorant Garamond', serif;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  line-height: 1.15;
}

/* ── UTILITY CLASSES ── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.container-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.section-pad {
  padding: 7rem 0;
}

.section-pad-sm {
  padding: 4.5rem 0;
}

/* ── SECTION LABELS ── */
.label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-mid);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold-mid);
  flex-shrink: 0;
}

.label.center {
  justify-content: center;
}

.label.center::before {
  display: none;
}

.label.light {
  color: var(--gold-light);
}

.label.light::before {
  background: var(--gold-light);
}

/* ── HEADINGS ── */
.h-display {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--stone);
}

.h-display em {
  font-style: italic;
  color: var(--moss);
}

.h-display.light {
  color: var(--white);
}

.h-display.light em {
  color: var(--gold-light);
}

.h-section {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--stone);
}

.h-section em {
  font-style: italic;
  color: var(--moss);
}

/* ── GOLD RULE ── */
.rule {
  width: 48px;
  height: 1.5px;
  background: var(--gold-mid);
  margin: 1.4rem 0;
}

.rule.center {
  margin: 1.4rem auto;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.95rem 2.2rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--gold-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184, 125, 42, 0.3);
}

.btn-secondary {
  background: var(--pine);
  color: var(--white);
}

.btn-secondary:hover {
  background: var(--pine-light);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.45);
}

.btn-outline:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.1);
}

.btn-outline-dark {
  background: transparent;
  color: var(--pine);
  border: 1.5px solid var(--pine);
}

.btn-outline-dark:hover {
  background: var(--pine);
  color: var(--white);
}

.btn-sm {
  font-size: 0.65rem;
  padding: 0.7rem 1.5rem;
  letter-spacing: 0.2em;
}

.btn-lg {
  font-size: 0.78rem;
  padding: 1.1rem 2.8rem;
}

/* ── CARDS ── */
.card {
  background: var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── PILL TAGS ── */
.tag-pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  border: 1px solid rgba(0,0,0,0.1);
  padding: 0.22rem 0.65rem;
  border-radius: 2px;
}

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  background: var(--pine);
  color: var(--white);
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 400;
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal-left.in { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal-right.in { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal-scale.in { opacity: 1; transform: scale(1); }

/* ── DELAY UTILITIES ── */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }

/* ── PAGE HERO ── */
.page-hero {
  padding: 10rem 0 5rem;
  background: var(--pine);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.page-hero .label { justify-content: center; }
.page-hero .label::before { display: none; }

.page-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  color: var(--white);
  position: relative;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.page-hero p {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  margin: 1.2rem auto 0;
  line-height: 1.75;
  position: relative;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
}

.breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb a:hover { color: var(--gold-light); }

.breadcrumb span { color: rgba(255,255,255,0.25); }

/* ── FORM ELEMENTS ── */
.form-group {
  margin-bottom: 1.4rem;
}

.form-group label {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(0,0,0,0.12);
  outline: none;
  padding: 0.55rem 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--text);
  transition: border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.form-control:focus {
  border-bottom-color: var(--gold);
}

.form-control::placeholder {
  color: var(--text-muted);
  font-weight: 300;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* ── LANDSCAPE SVG IMAGE SYSTEM ── */
/* Beautiful CSS landscape backgrounds instead of broken images */
.img-mountain-dawn {
  background: linear-gradient(
    180deg,
    #e8f0eb 0%,
    #c5d8c0 15%,
    #8fb09a 35%,
    #5a8a6a 55%,
    #3a6545 70%,
    #2c4a30 85%,
    #1e3220 100%
  );
  position: relative;
  overflow: hidden;
}

.img-mountain-dawn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400 L0 200 Q100 120 200 180 Q300 240 400 140 Q500 60 600 100 Q700 140 800 80 Q900 20 1000 90 Q1100 150 1200 110 L1200 400 Z' fill='%232c4a30' fill-opacity='0.7'/%3E%3Cpath d='M0 400 L0 280 Q150 200 300 250 Q450 300 600 220 Q750 140 900 200 Q1050 260 1200 220 L1200 400 Z' fill='%231e3220' fill-opacity='0.8'/%3E%3C/svg%3E") no-repeat bottom center / 100% auto;
}

.img-pine-forest {
  background: linear-gradient(
    180deg,
    #7ba8c0 0%,
    #9dc0b0 25%,
    #6a9a6a 45%,
    #3d7040 65%,
    #2a5530 80%,
    #1a3820 100%
  );
  position: relative;
  overflow: hidden;
}

.img-garden-morning {
  background: linear-gradient(
    160deg,
    #d4e8d0 0%,
    #b0d0a8 20%,
    #8ab87a 40%,
    #5a9050 60%,
    #3a6e35 80%,
    #2c5228 100%
  );
}

.img-cottage-exterior {
  background: linear-gradient(
    180deg,
    #b8c8d8 0%,
    #8aaab8 20%,
    #6a8890 35%,
    #c8a870 50%,
    #8a6840 65%,
    #4a3828 80%,
    #2e2218 100%
  );
}

.img-valley-mist {
  background: linear-gradient(
    180deg,
    #dce8e0 0%,
    #b8d0c8 20%,
    #90b8b0 40%,
    #6a9890 55%,
    #4a7870 70%,
    #2c5050 100%
  );
}

.img-sunset-hills {
  background: linear-gradient(
    180deg,
    #f0d090 0%,
    #e8a860 20%,
    #c07840 40%,
    #7a5030 60%,
    #3a3020 80%,
    #1a1808 100%
  );
}

.img-bedroom-warm {
  background: linear-gradient(
    135deg,
    #e8d8b8 0%,
    #c8a870 30%,
    #a07840 60%,
    #6a4820 80%,
    #3a2810 100%
  );
}

.img-living-room {
  background: linear-gradient(
    135deg,
    #e0d0c0 0%,
    #c0a880 30%,
    #906840 60%,
    #5a3820 80%,
    #2a1808 100%
  );
}

.img-kitchen {
  background: linear-gradient(
    135deg,
    #e8e0d8 0%,
    #c8c0a8 40%,
    #908870 70%,
    #504830 100%
  );
}

.img-terrace-view {
  background: linear-gradient(
    160deg,
    #c8d8e8 0%,
    #98b8d0 25%,
    #78a0b8 45%,
    #508898 60%,
    #386878 75%,
    #204858 100%
  );
}

.img-lake-bhimtal {
  background: linear-gradient(
    180deg,
    #90c8e0 0%,
    #68a8c8 25%,
    #4888b0 45%,
    #386890 60%,
    #2a5878 80%,
    #1a3850 100%
  );
}

.img-nainital {
  background: linear-gradient(
    180deg,
    #b0c8e0 0%,
    #88a8c8 20%,
    #6888a8 40%,
    #4a7890 55%,
    #385878 70%,
    #203848 100%
  );
}

.img-himalaya-snow {
  background: linear-gradient(
    180deg,
    #dce8f0 0%,
    #c0d8e8 20%,
    #a0c0d8 35%,
    #80a8c0 50%,
    #6888a0 65%,
    #405878 80%,
    #283848 100%
  );
}

.img-orchard {
  background: linear-gradient(
    160deg,
    #d8e8c8 0%,
    #b8d0a0 25%,
    #90b878 45%,
    #689858 65%,
    #488038 80%,
    #2a5820 100%
  );
}

/* Photo overlay label */
.photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 1.5rem 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: rgba(255,255,255,0.85);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Nature illustration overlay */
.nature-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.3) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 35%);
}

/* ── FOOTER ── */
.site-footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.5);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  padding: 5rem 2.5rem 3.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

.footer-brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-style: italic;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-bottom: 0.7rem;
}

.footer-brand-tagline {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.2rem;
}

.footer-brand-desc {
  font-size: 0.84rem;
  line-height: 1.78;
  font-weight: 300;
  margin-bottom: 1.8rem;
}

.footer-address {
  font-size: 0.78rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.32);
}

.footer-social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.footer-social-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all var(--transition);
  cursor: pointer;
}

.footer-social-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.footer-col h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.5rem;
}

.footer-col ul li {
  margin-bottom: 0.7rem;
}

.footer-col ul li a {
  font-size: 0.84rem;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  transition: color var(--transition);
}

.footer-col ul li a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1.8rem 2.5rem;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.74rem;
}

.footer-bottom-links {
  display: flex;
  gap: 2rem;
}

.footer-bottom-links a {
  color: rgba(255,255,255,0.3);
  transition: color var(--transition);
}

.footer-bottom-links a:hover { color: var(--white); }

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .container { padding: 0 2rem; }
}

@media (max-width: 768px) {
  .section-pad { padding: 5rem 0; }
  .section-pad-sm { padding: 3rem 0; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 2rem 2rem; }
  .footer-bottom { padding: 1.5rem 2rem; flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; gap: 1.5rem; }
  .container { padding: 0 1.5rem; }
  .container-narrow { padding: 0 1.5rem; }
}