/* ============================================================
   AURELIAN CLUB LONDON — STYLESHEET
   ============================================================

   TABLE OF CONTENTS
   -----------------
   1.  CSS Custom Properties
   2.  Reset & Base
   3.  Typography Utilities
   4.  Buttons
   5.  Navigation
   6.  Hero Section
   7.  About Section
   8.  Services Section
   9.  Why Aurelian Section
   10. Membership Section
   11. Enquiry Form Section
   12. Social Section
   13. Footer
   14. Scroll Animations
   15. Responsive — Tablet (768px+)
   16. Responsive — Desktop (1024px+)

   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* Colours */
  --color-bg:               #F9F6F1;
  --color-dark:             #0E0E0E;
  --color-dark-card:        #161616;
  --color-gold:             #C4A96A;
  --color-gold-dark:        #AE9459;
  --color-text:             #1C1C1C;
  --color-text-light:       #E8E4DC;
  --color-text-muted:       #9A9488;
  --color-text-subtle:      #6B6560;
  --color-text-dim:         #5A5650;
  --color-border:           #D9D2C4;
  --color-border-dark:      rgba(196, 169, 106, 0.2);
  --color-border-dark-hover:rgba(196, 169, 106, 0.6);
  --color-error:            #C0392B;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-width:    1200px;
  --nav-height:   80px;

  /* Transitions */
  --t-fast:   200ms ease;
  --t-medium: 300ms ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul {
  list-style: none;
}

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

address {
  font-style: normal;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared section inner wrapper */
.section-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 24px;
}

/* Dark section variant */
.section--dark {
  background-color: var(--color-dark);
}


/* ============================================================
   3. TYPOGRAPHY UTILITIES
   ============================================================ */

.overline {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 14px;
}

.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: 16px;
}

.section-heading--light {
  color: var(--color-text-light);
}

/* Gold horizontal rule beneath headings */
.section-rule {
  width: 60px;
  height: 1px;
  background-color: var(--color-gold);
  margin-bottom: 32px;
}

.section-rule--center {
  margin-left: auto;
  margin-right: auto;
}

.body-copy {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 20px;
}

.text-link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-gold);
  display: inline-block;
  margin-top: 8px;
  transition: color var(--t-fast);
}

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


/* ============================================================
   4. BUTTONS
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  padding: 15px 32px;
  min-height: 44px;
  border-radius: 2px;
  transition:
    background-color var(--t-fast),
    border-color     var(--t-fast),
    color            var(--t-fast),
    transform        var(--t-fast),
    box-shadow       var(--t-fast);
}

.btn--gold {
  background-color: var(--color-gold);
  color: var(--color-dark);
  border: 1px solid var(--color-gold);
}

.btn--gold:hover {
  background-color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  transform: scale(1.02);
  box-shadow: 0 0 28px rgba(196, 169, 106, 0.45), 0 6px 20px rgba(196, 169, 106, 0.25);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.btn--outline:hover {
  background-color: rgba(196, 169, 106, 0.06);
  box-shadow: 0 0 24px rgba(196, 169, 106, 0.3), inset 0 0 16px rgba(196, 169, 106, 0.07);
}

.btn--full {
  display: block;
  width: 100%;
}


/* ============================================================
   5. NAVIGATION
   ============================================================ */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background-color var(--t-medium), border-bottom-color var(--t-medium);
  border-bottom: 1px solid transparent;
}

/* Triggers via JS on scroll past 80px */
#site-header.scrolled {
  background-color: rgba(249, 246, 241, 0.97);
  border-bottom-color: var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Wrapper clips the transparent padding around the artwork */
.nav__logo-link {
  display: block;
  height: 52px;
  overflow: hidden;
  flex-shrink: 0;
}

.nav__logo {
  height: 220px;
  width: auto;
  margin-top: -77px; /* 220px × ~35% transparent top = 77px */
}

/* Hidden on mobile, shown on desktop */
.nav__links {
  display: none;
  align-items: center;
  gap: 40px;
}

.nav__link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color var(--t-fast);
}

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

/* Hidden on mobile, shown on desktop */
.nav__cta {
  display: none;
  padding: 11px 22px;
  font-size: 12px;
}

/* Hamburger button */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

.nav__hamburger-line {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--color-gold);
  transition: transform var(--t-fast), opacity var(--t-fast);
  transform-origin: center;
}

.nav__hamburger.open .nav__hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__hamburger.open .nav__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__hamburger.open .nav__hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile dropdown overlay */
.nav__mobile-overlay {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 48px 24px;
  z-index: 999;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-medium), opacity var(--t-medium);
}

.nav__mobile-overlay.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.nav__mobile-link {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 300;
  color: var(--color-text);
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--t-fast);
}

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


/* ============================================================
   6. HERO SECTION
   ============================================================ */

#hero {
  min-height: 100vh;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: calc(var(--nav-height) + 40px) 24px 80px;
  text-align: center;
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  width: 100%;
}

.hero__ornament {
  width: 60px;
  height: 1px;
  background-color: var(--color-gold);
  margin: 0 auto 28px;
}

.hero__ornament--bottom {
  margin: 28px auto 0;
}

/* Hidden on mobile — visible in nav header is sufficient */
.hero__logo {
  display: none;
}

.hero__headline {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 300;
  line-height: 1.12;
  color: var(--color-text);
  max-width: 900px;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

/* Sits directly under logo on desktop, directly under ornament on mobile */
.hero__slogan {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 400;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.hero__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-subtle);
  max-width: 560px;
  margin-bottom: 40px;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  align-items: stretch;
}

/* CSS-drawn downward chevron, absolutely placed at bottom of hero */
.hero__chevron {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  animation: chevron-bounce 2.2s ease-in-out infinite;
}

.hero__chevron-icon {
  display: block;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--color-gold);
  border-bottom: 1.5px solid var(--color-gold);
  transform: rotate(45deg) translateY(-3px);
}

@keyframes chevron-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}


/* ============================================================
   7. ABOUT SECTION
   ============================================================ */

#about {
  background-color: var(--color-bg);
}

.about__inner {
  position: relative;
  overflow: hidden;
}

.about__text {
  position: relative;
  z-index: 1;
}

/* Spacer column — shown only on desktop via grid */
.about__decorative {
  display: none;
}

/* Watermark "ACL" — hidden on mobile, absolute on desktop */
.about__watermark {
  display: none;
}


/* ============================================================
   8. SERVICES SECTION
   ============================================================ */

.services__inner {
  text-align: center;
}

.services__header {
  margin-bottom: 52px;
}

.services__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  text-align: left;
}

.service-card {
  background-color: var(--color-dark-card);
  border: 1px solid var(--color-border-dark);
  padding: 40px 36px;
  border-radius: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.service-card:hover {
  border-color: var(--color-border-dark-hover);
  box-shadow: 0 0 24px rgba(196, 169, 106, 0.09);
}

.service-card__numeral {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: 14px;
}

.service-card__heading {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-light);
  margin-bottom: 14px;
}

.service-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}


/* ============================================================
   9. WHY AURELIAN SECTION
   ============================================================ */

#why-aurelian {
  background-color: var(--color-bg);
}

.why__inner {
  text-align: center;
}

.why__header {
  margin-bottom: 52px;
}

.why__pillars {
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-align: left;
}

.pillar__rule {
  width: 30px;
  height: 1px;
  background-color: var(--color-gold);
  margin-bottom: 18px;
}

.pillar__heading {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 12px;
}

.pillar__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-subtle);
}


/* ============================================================
   10. MEMBERSHIP SECTION
   ============================================================ */

.membership {
  position: relative;
  overflow: hidden;
}

.membership__bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-weight: 300;
  /* ~6vw keeps all 16 chars visible at every viewport width without clipping */
  font-size: clamp(22px, 6vw, 96px);
  color: rgba(196, 169, 106, 0.04);
  white-space: nowrap;
  letter-spacing: 0.1em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.membership__inner {
  text-align: center;
  position: relative;
  z-index: 1;
}

.membership__content {
  max-width: 720px;
  margin: 0 auto;
}

.membership__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.membership__body--sub {
  font-size: 15px;
  margin-bottom: 40px;
}

.membership__form {
  margin-bottom: 20px;
}

.membership__form-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}

.membership__input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-light);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(196, 169, 106, 0.3);
  padding: 12px 0;
  outline: none;
  min-height: 44px;
  width: 100%;
  transition: border-bottom-color var(--t-fast);
  border-radius: 0;
}

.membership__input::placeholder {
  color: var(--color-text-muted);
}

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

.membership__submit {
  white-space: nowrap;
  flex-shrink: 0;
}

.membership__form-error {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-error);
  margin-top: 10px;
}

.membership__form-success {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-gold);
  margin-top: 16px;
}

.membership__disclaimer {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-dim);
  margin-top: 20px;
}


/* ============================================================
   11. ENQUIRY FORM SECTION
   ============================================================ */

#enquire {
  background-color: var(--color-bg);
}

.enquire__inner {
  text-align: center;
}

.enquire__header {
  margin-bottom: 48px;
}

.enquire__intro {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-subtle);
  max-width: 560px;
  margin: 0 auto;
}

.enquire__form-wrap {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

/* Each field container */
.form-field {
  margin-bottom: 32px;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 10px;
}

/* Shared input base: bottom border only, no box */
.form-input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 10px 0;
  outline: none;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-bottom-color var(--t-fast);
}

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

.form-input.error {
  border-bottom-color: var(--color-error);
}

.form-error {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-error);
  margin-top: 6px;
}

/* Custom select wrapper provides positioning for the arrow */
.form-select-wrap {
  position: relative;
}

.form-select {
  cursor: pointer;
  padding-right: 28px;
}

.form-select::-ms-expand {
  display: none;
}

.form-select option {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.form-select-arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.7;
  padding-top: 12px;
}

/* Success state: replaces the form */
.enquire__success {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 0;
}

.enquire__success-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--color-text);
  line-height: 1.5;
  text-align: center;
}

.enquire__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
}

.enquire__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-subtle);
}

.contact-icon {
  flex-shrink: 0;
}

.contact-link {
  color: var(--color-text-subtle);
  transition: color var(--t-fast);
}

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

.enquire__address {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 14px;
}


/* ============================================================
   12. SOCIAL SECTION
   ============================================================ */

#social {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.social__inner {
  text-align: center;
}

.social__header {
  margin-bottom: 48px;
}

.social__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-subtle);
  max-width: 480px;
  margin: 0 auto;
}

.social__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 32px;
  border: 1px solid var(--color-border);
  text-align: center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.social-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 0 22px rgba(196, 169, 106, 0.18);
}

.social-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-card__platform {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text);
}

.social-card__handle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-gold);
}


/* ============================================================
   13. FOOTER
   ============================================================ */

.footer {
  background-color: var(--color-dark);
}

.footer__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 80px 24px 64px;
}

/* Clip the logo's transparent canvas so only the artwork shows */
.footer__col--brand a {
  display: block;
  height: 56px;
  overflow: hidden;
  margin-bottom: 18px;
}

.footer__logo {
  height: 224px; /* 56px / 0.25 transparent ratio = 224px canvas height */
  width: auto;
  margin-top: -78px; /* 224 × 0.35 = 78px transparent top */
  margin-bottom: 0;
}

.footer__slogan {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 18px;
  color: var(--color-gold);
  margin-bottom: 10px;
}

.footer__statement {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.footer__col-heading {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 20px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  transition: color var(--t-fast);
}

.footer__link:hover {
  color: var(--color-text-light);
}

.footer__contact-item {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
}

.footer__contact-link {
  transition: color var(--t-fast);
}

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

.footer__address {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.footer__social {
  display: flex;
  gap: 16px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  width: 36px;
  height: 36px;
  transition: color var(--t-fast);
}

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

.footer__bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 24px;
  border-top: 1px solid rgba(196, 169, 106, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.footer__copyright,
.footer__bottom-address {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-dim);
}


/* ============================================================
   14. SCROLL ANIMATIONS
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

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

/* Honour system preference — disable all motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__chevron {
    animation: none;
  }
}


/* ============================================================
   15. RESPONSIVE — TABLET (768px+)
   ============================================================ */

@media (min-width: 768px) {

  .section-inner {
    padding: 96px 40px;
  }

  /* Hero: reveal logo on tablet+, clip its transparent canvas padding with negative margins */
  .hero__logo {
    display: block;
    width: 340px;
    height: auto;
    /* top: 340×0.35=119px transparent, bottom: 340×0.38=129px transparent */
    margin: -119px auto -121px;
  }

  .hero__ctas {
    flex-direction: row;
    max-width: none;
    align-items: center;
    justify-content: center;
  }

  .hero__ctas .btn {
    width: auto;
  }

  /* Services grid: 2 columns */
  .services__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Why pillars: horizontal row */
  .why__pillars {
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
    text-align: left;
  }

  .pillar {
    flex: 1;
  }

  /* Membership form: inline row */
  .membership__form-row {
    flex-direction: row;
    align-items: flex-end;
  }

  /* Enquire contact: horizontal */
  .enquire__contact {
    flex-direction: row;
    justify-content: center;
    gap: 48px;
  }

  /* Social cards: side by side */
  .social__cards {
    flex-direction: row;
  }

  .social-card {
    flex: 1;
  }

  /* Footer: 2 columns */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 80px 40px 64px;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    padding: 24px 40px;
    text-align: left;
  }

}


/* ============================================================
   16. RESPONSIVE — DESKTOP (1024px+)
   ============================================================ */

@media (min-width: 1024px) {

  .section-inner {
    padding: 112px 48px;
  }

  /* Nav: show links and CTA, hide hamburger */
  .nav__links {
    display: flex;
  }

  .nav__cta {
    display: inline-block;
  }

  .nav__hamburger {
    display: none;
  }

  /* Hero logo: full size — larger artwork with transparent padding collapsed */
  .hero__logo {
    width: 440px;
    /* top: 440×0.35=154px transparent, bottom: 440×0.38=167px transparent */
    margin: -154px auto -159px;
  }

  /* About: two-column grid */
  .about__inner {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 48px;
    align-items: center;
  }

  /* Decorative column spacer */
  .about__decorative {
    display: block;
    position: relative;
  }

  /* Watermark behind the grid — absolutely positioned relative to about__inner */
  .about__watermark {
    display: block;
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 340px;
    color: rgba(196, 169, 106, 0.11);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
  }

  /* Footer: three columns */
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1.3fr;
    gap: 64px;
    padding: 96px 48px 72px;
  }

  .footer__bottom {
    padding: 28px 48px;
  }

}