/* 123eppingroadbooking.com — exact-match clone of avayahousebooking.com's design.
   All values measured from the live original's computed styles at a 1920px
   viewport (2026-07-17 re-audit). The original (Duda) scales its whole desktop
   layout proportionally with viewport width, so sizes here use --u, one
   1920th of the viewport width (capped at 1px), instead of fixed px. */

:root {
  --black: rgb(0, 0, 0);
  --ink: rgb(45, 46, 50);        /* --color_4: nav / body copy / sub lines */
  --near-black: rgb(26, 27, 31); /* --color_1: section headings, secondary button bg */
  --white: rgb(255, 255, 255);
  --red: rgb(227, 11, 18);       /* --color_5 */
  --line: #e9e9ea;
  --u: calc(min(100vw, 1920px) / 1920);  /* 1px at the 1920 reference design */
  --font-display: 'Inter', sans-serif;   /* hero H1 spans only */
  --font-body: 'Poppins', sans-serif;    /* everything else */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(16 * var(--u));
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* Original's content container: 1200px at the 1920 reference */
.container {
  max-width: calc(1200 * var(--u));
  margin: 0 auto;
}
.center { text-align: center; }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--near-black);
}

.c-ink { color: var(--black); }
.c-red { color: var(--red); }

/* ---------- Header ----------
   Original: 103px tall, logo 140x63 88px from the left viewport edge,
   nav right-aligned ending 220px from the right edge. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(103 * var(--u));
  padding-left: calc(88 * var(--u));
  padding-right: calc(220 * var(--u));
}

.brand { display: flex; align-items: center; }
.brand img { height: calc(63 * var(--u)); width: auto; }

.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin: 0;
  padding: 0;
}
.primary-nav li.dot { color: var(--ink); opacity: 0.6; font-size: calc(14 * var(--u)); }

.primary-nav a {
  font-family: var(--font-body);
  color: var(--ink);
  font-weight: 400;
  font-size: calc(15 * var(--u));
  text-decoration: none;
}
.primary-nav a:hover { text-decoration: underline; }
.primary-nav a.active { font-weight: 700; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: calc(220 * var(--u));
  height: calc(62 * var(--u));
  padding: 0 calc(28 * var(--u));
  border-radius: calc(50 * var(--u));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(15 * var(--u));
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn:hover { text-decoration: none; opacity: 0.92; }

.btn-primary { background: var(--red); color: #fff; }
.btn-secondary { background: var(--near-black); color: #fff; }

/* ---------- Hero ----------
   Original geometry at 1920: text column 441 wide starting 9px inside the
   1200 container, H1 153px below the header; image column 600x677 with 20px
   rounded corners, 76px below the header, flush with the container's right
   edge (not bleeding to the viewport edge). */
.hero-grid {
  max-width: calc(1200 * var(--u));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding-bottom: calc(40 * var(--u));
}
.hero-text {
  width: calc(450 * var(--u));
  padding: calc(153 * var(--u)) 0 0 calc(9 * var(--u));
}
.hero-text h1 {
  font-family: var(--font-display);
  font-size: calc(60 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 calc(42 * var(--u));
}
/* The original's buttons sit on one row and overflow the 450-wide text
   column (they span 455px at 1920) — so no wrapping here. */
.hero-actions { display: flex; gap: calc(15 * var(--u)); flex-wrap: nowrap; width: max-content; }
.hero-actions.center { justify-content: center; }

.hero-image { padding-top: calc(76 * var(--u)); }
.hero-image img {
  width: calc(600 * var(--u));
  height: calc(677 * var(--u));
  object-fit: cover;
  border-radius: calc(20 * var(--u));
}

/* ---------- Sections ----------
   Original booking sections: 72px top padding, 30px Poppins 700 centered
   heading in near-black, 16px weight-300 sub line, Calendly 1200x757,
   80px bottom padding. */
.section { padding: calc(72 * var(--u)) 0 calc(80 * var(--u)); }
.section-title {
  font-family: var(--font-body);
  font-size: calc(30 * var(--u));
  font-weight: 700;
  color: var(--near-black);
  text-align: center;
  margin: 0 0 calc(10 * var(--u));
}
.section-sub {
  font-family: var(--font-body);
  font-size: calc(16 * var(--u));
  font-weight: 300;
  text-align: center;
  color: var(--ink);
  margin: 0 auto calc(10 * var(--u));
}
.lead {
  font-family: var(--font-body);
  font-size: calc(16 * var(--u));
  font-weight: 300;
  color: var(--ink);
}

/* Page titles (bookings, thank-you, and the additive pages):
   original is Poppins 700 50px near-black, left-aligned in the container,
   78px below the header. */
.page-title {
  font-family: var(--font-body);
  font-size: calc(50 * var(--u));
  font-weight: 700;
  color: var(--near-black);
  text-align: left;
  margin: 0 0 calc(14 * var(--u));
}
.section-top { padding-top: calc(78 * var(--u)); padding-bottom: calc(24 * var(--u)); }
.section-top-tight { padding-top: calc(24 * var(--u)); padding-bottom: calc(80 * var(--u)); }

/* ---------- Gallery ----------
   Original: full-bleed row, three 575x575 square tiles with 20px gaps,
   60px vertical padding, square corners. */
.gallery-strip {
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--u));
  padding: calc(60 * var(--u)) 0;
}
.gallery-strip img {
  width: calc(575 * var(--u));
  height: calc(575 * var(--u));
  object-fit: cover;
}

/* ---------- Embeds ---------- */
.calendly-wrap {
  height: calc(757 * var(--u));
  min-width: 100%;
}
.gcal-wrap iframe {
  width: 100%;
  height: calc(1580 * var(--u));
  border: 0;
  display: block;
}

/* Original map: full-bleed band, 304px tall at 1920 */
.map-band iframe {
  width: 100%;
  height: calc(304 * var(--u));
  border: 0;
  display: block;
}
.map-wrap-small iframe { width: 100%; height: 260px; border: 0; display: block; }

/* ---------- Contact (additive page) ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.contact-details p { margin: 0 0 18px; }
.contact-details h2, .contact-form-wrap h2 { font-size: 22px; margin-bottom: 20px; }

.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.form-row input, .form-row textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--red);
}
.contact-form .btn { align-self: flex-start; }
.form-status { font-family: var(--font-body); font-size: 14px; margin: 0; min-height: 20px; }
.form-status.success { color: #147a3a; }
.form-status.error { color: var(--red); }

/* ---------- Prose ---------- */
.prose h2 { font-size: 20px; margin-top: 32px; }
.prose p { font-family: var(--font-body); color: var(--ink); }

/* ---------- Footer ----------
   Original: white background, 1200 container, logo 126x56, address and
   contact lines Poppins 16px weight 300 with bold inline labels,
   underlined ink-colored links. */
.site-footer {
  background: var(--white);
  padding: calc(30 * var(--u)) 0 calc(40 * var(--u));
}
.footer-logo { width: calc(126 * var(--u)); height: calc(56 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.footer-address { margin: 0 0 calc(14 * var(--u)); }
.footer-inner p {
  font-family: var(--font-body);
  font-weight: 300;
  margin: 0 0 calc(4 * var(--u));
  font-size: calc(16 * var(--u));
  color: var(--ink);
}
.footer-inner strong { font-weight: 700; }
.footer-inner a { color: var(--ink); text-decoration: underline; }
.footer-fineprint { margin-top: calc(16 * var(--u)) !important; font-size: calc(13.5 * var(--u)); }
.footer-fineprint a { color: var(--ink); }

/* ---------- Responsive ----------
   Below 860px the original switches to Duda's separate mobile layout;
   these overrides give an equivalent usable mobile rendering. */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .container, .hero-grid { max-width: none; }
  .container { padding: 0 24px; }

  .menu-toggle { display: flex; }
  .header-inner { height: 72px; padding: 0 20px; }
  .brand img { height: 44px; }
  .primary-nav {
    position: fixed;
    inset: 72px 0 0 0;
    background: #fff;
    padding: 24px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .primary-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .primary-nav li.dot { display: none; }
  .primary-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line); width: 100%; font-size: 15px; }

  .hero-grid { flex-direction: column; padding: 0 0 32px; }
  .hero-text { width: auto; padding: 32px 24px 0; text-align: center; }
  .hero-text h1 { font-size: 34px; margin-bottom: 24px; }
  .hero-actions { justify-content: center; }
  .hero-image { padding: 24px 24px 0; }
  .hero-image img { width: 100%; height: auto; min-height: 260px; border-radius: 12px; }

  .btn { min-width: 200px; height: 56px; font-size: 15px; border-radius: 50px; padding: 0 24px; }

  .section { padding: 48px 0 56px; }
  .section-title { font-size: 22px; margin-bottom: 8px; }
  .section-sub, .lead { font-size: 15px; }
  .page-title { font-size: 32px; }
  .section-top { padding-top: 40px; }

  .gallery-strip { flex-direction: column; gap: 12px; padding: 32px 24px; }
  .gallery-strip img { width: 100%; height: 260px; }

  .calendly-wrap { height: 700px; }
  .gcal-wrap iframe { height: 900px; }
  .map-band iframe { height: 260px; }

  .footer-logo { width: 126px; height: 56px; }
  .footer-inner p { font-size: 15px; }
  .footer-fineprint { font-size: 13px; }

  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .calendly-wrap { height: 560px; }
  .btn { min-width: 0; width: 100%; }
}