/* Excursion Elite — styles measured from excursion-elite.com */

:root{
  --black:#000000;
  --dark:#161616;
  --gold:#E4A604;
  --grey:#F1F1F1;
  --white:#FFFFFF;
  --head:#161616;
  --sub:#111111;
  --muted:#525252;
  --muted-2:#5E5E5E;
  --teal-dark:#233833;
  --teal-light:#436B62;
  --on-dark-head:#F7F7F7;
  --on-dark-body:#A4A4A4;
  --wrap:1232px;
  --display:"Playfair Display",Georgia,serif;
  --body:"Old Standard TT",Georgia,"Times New Roman",serif;
}

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

body{
  margin:0;
  background:var(--white);
  color:var(--muted);
  font-family:var(--body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* ---------- Header ---------- */

.masthead{background:var(--black);position:sticky;top:0;z-index:60}

.masthead .wrap{
  max-width:1860px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:92px;position:relative;
}

.brand{display:block;text-decoration:none}
.brand img{height:66px;width:auto}

/* hamburger trigger — always the three lines, top right, at every screen size */
.menu-btn{
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  gap:5px;width:30px;height:24px;background:none;border:0;padding:0;cursor:pointer;
  flex:0 0 auto;
}
.menu-btn .bar{display:block;height:2px;width:100%;background:#fff}

/* dimmed backdrop behind the off-canvas drawer — sits under the header
   (z-index 60) so the menu button/logo stay fully lit, and under the
   drawer itself (z-index 100) so only the page content behind it dims */
.nav-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:55;
}
.nav-backdrop.show{opacity:1;visibility:visible}

body.nav-open{overflow:hidden}

/* off-canvas drawer — slides in from the left, stacked links */
.nav{
  position:fixed;top:0;left:0;bottom:0;z-index:100;
  width:min(340px,86vw);background:var(--black);
  display:flex;flex-direction:column;align-items:flex-start;
  padding:88px 34px 40px;overflow-y:auto;
  transform:translateX(-100%);transition:transform .3s ease;
}
.nav.open{transform:translateX(0)}

.nav-close{
  position:absolute;top:24px;right:24px;
  background:none;border:0;color:#fff;font-size:30px;line-height:1;
  cursor:pointer;padding:4px;font-family:var(--body);
}

.nav a{
  color:#FFFFFF;text-decoration:none;width:100%;
  font-family:var(--body);
  font-size:18px;letter-spacing:.04em;text-transform:uppercase;
  padding:13px 0;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{border-bottom-color:#FFFFFF}

/* Sign In sits apart from the main pages, its own labeled group */
.nav-account{
  width:100%;margin-top:26px;padding-top:22px;border-top:1px solid #262626;
}
.nav-account-label{
  display:block;color:#6E6E6E;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:4px;
}

/* ---------- Hero ---------- */

.hero{
  position:relative;min-height:667px;display:grid;place-items:center;
  text-align:center;color:var(--white);padding:120px 0;
  background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("images/hero.jpg") center/cover no-repeat,
    var(--black);
}

.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.5rem,4.4vw,64px);
  line-height:1.15;margin:0 auto;max-width:17ch;color:var(--white);
}

.hero p{
  margin:26px auto 0;max-width:70ch;
  font-size:clamp(1.05rem,1.6vw,24px);color:var(--white);
}

/* ---------- Bands ---------- */

.band{padding:96px 0;background:var(--white)}
.band-gold{background:var(--gold);padding:76px 0}
.band-grey{background:var(--grey);padding:24px 0}
.band-dark{background:var(--dark);padding:96px 0}

.center{text-align:center}

h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,3.4vw,48px);line-height:1.4;
  color:var(--head);margin:0 0 26px;
}
.band-gold h2{margin:0;color:var(--head)}

h4{
  font-family:var(--body);font-weight:400;
  font-size:24px;line-height:1.25;color:var(--sub);margin:0 0 16px;
}

.band p{margin:0 auto 20px;max-width:74ch;color:var(--muted-2);font-size:18px}
.band p:last-child{margin-bottom:0}

/* ---------- Button ---------- */

.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--body);font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;color:#DBDBDB;background:var(--black);
  border:1px solid var(--black);padding:15px 42px;margin-top:16px;
  transition:background .18s ease,color .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--black)}

/* ---------- Inside the Society: 2x2 photo cards ---------- */

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:38px;margin-top:52px}

.card{
  position:relative;display:grid;place-items:center;
  aspect-ratio:4/5;overflow:hidden;background:var(--dark);
  background-size:cover;background-position:center;
}
.card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.52))}
.card h3{
  position:relative;z-index:2;margin:0;padding:0 26px;text-align:center;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,2.9vw,48px);line-height:1.25;color:var(--white);
}

.card-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .3s ease;
}
.card-img.img-ready{opacity:1}

/* ---------- The Architecture: alternating circles ---------- */

.stage{
  display:grid;grid-template-columns:592px 1fr;align-items:center;
  gap:56px;padding:24px 0;
}
.stage.flip{grid-template-columns:1fr 592px}
.stage.flip .stage-media{order:2}
.stage.flip .stage-text{order:1}

.stage-media img{
  width:592px;height:592px;border-radius:50%;object-fit:cover;background:var(--black);
}

.stage-text{text-align:center;max-width:592px;margin:0 auto}
.stage-text h4{margin-bottom:14px}
.stage-text p{margin:0;color:var(--muted);font-size:18px}

/* ---------- FAQ ---------- */

.faq{max-width:900px;margin:44px auto 0;text-align:left}
.faq details{border-bottom:1px solid #DCDCDC}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--body);font-size:20px;color:var(--sub);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:20px;color:var(--gold);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 24px;color:var(--muted-2);max-width:none}

/* ---------- Forms ---------- */

.form{max-width:660px;margin:40px auto 0;display:grid;gap:20px;text-align:left}
.form label{font-size:16px;color:var(--muted)}
.form input,.form textarea{
  width:100%;font-family:var(--body);font-size:17px;color:var(--sub);
  background:var(--white);border:1px solid #CFCFCF;padding:14px 16px;margin-top:7px;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.form textarea{min-height:170px;resize:vertical}
.form .btn{justify-self:center}

/* ---------- Long-form pages ---------- */

.prose{max-width:860px;margin:0 auto;text-align:left}
.prose h2{margin-top:46px;font-size:clamp(1.7rem,2.6vw,36px)}
.prose h2.first{margin-top:0}
.prose p{max-width:none;margin:0 0 20px}
.prose ul{padding-left:22px;margin:0 0 20px}
.prose li{margin-bottom:12px;color:var(--muted-2)}

/* ---------- Dark closing band ---------- */

.band-dark h2{color:var(--white)}
.band-dark p{color:#BDBDBD;margin-left:auto;margin-right:auto;max-width:74ch}

.services{max-width:900px;margin:52px auto 0;display:flex;flex-direction:column;gap:18px;text-align:left}

.service{
  border:0;background:transparent;
  border-bottom:1px solid #2E2E2E;
  padding:30px 4px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:32px;
}
.service:last-child{border-bottom:0}
.service-body{flex:1;min-width:0}
.service h4{color:var(--white);margin:0 0 6px;font-size:24px;line-height:1.3}
.service-meta{color:#8C8C8C;font-size:16px;letter-spacing:.02em;margin:0 0 14px}

.service-desc{
  margin:0;font-size:17px;line-height:1.6;
  color:var(--on-dark-body);text-align:left;
}

.service-book{flex:0 0 auto;align-self:center}
.service-book .btn-book{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--body);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--white);background:var(--teal-dark);
  border:1px solid var(--teal-light);padding:13px 26px;white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.service-book .btn-book:hover,.service-book .btn-book:focus-visible{
  background:var(--teal-light);border-color:var(--teal-light);color:var(--white);
}

@media(max-width:640px){
  .service{flex-direction:column;align-items:flex-start;gap:18px}
  .service-book{align-self:flex-start}
}

/* ---------- Dark interior pages (About, Contact) ---------- */

.page-dark{background:var(--dark);padding:88px 0 96px}
.page-dark .wrap{max-width:1300px}
.page-dark h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,3.4vw,48px);line-height:1.3;
  color:var(--teal-light);margin:0 0 44px;text-align:center;
}
.page-dark h4{color:var(--on-dark-head);font-size:24px;line-height:1.3;margin:0 0 18px}
.page-dark p{color:var(--on-dark-body);font-size:18px;margin:0 0 20px}
.page-dark a{color:var(--on-dark-head)}

/* alternating image / text rows, rectangular (not circles) */
.row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:52px}
.row:last-child{margin-bottom:0}
.row.flip .row-media{order:2}
.row.flip .row-text{order:1}
.row-media img{
  width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:var(--black);
  opacity:0;transition:opacity .3s ease;
}
.row-media img.img-ready{opacity:1}
.row-text{text-align:center}

/* light interior pages (FAQs, Privacy, Terms) */
.page-light{background:var(--white);padding:88px 0 96px}
.page-light h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,3.4vw,48px);line-height:1.3;
  color:var(--teal-dark);margin:0 0 18px;text-align:center;
}
.page-light h1.plain{color:var(--head)}
.page-light p{color:var(--muted-2);font-size:18px;margin:0 0 20px}

/* ---------- Dark form ---------- */

.form-dark{max-width:658px;margin:34px auto 0;display:grid;gap:18px;text-align:left}
.field{position:relative;background:var(--black)}
.field label{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-family:var(--body);font-size:14px;color:#8C8C8C;
  pointer-events:none;transition:top .15s ease,transform .15s ease,font-size .15s ease;
}
.field input,.field textarea{
  display:block;width:100%;background:transparent;border:0;outline:none;
  box-sizing:border-box;padding:23px 16px 7px;
  font-family:var(--body);font-size:14px;color:var(--on-dark-head);
}
.field input{height:47px}
.field textarea{min-height:47px;resize:vertical}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:8px;transform:translateY(0);font-size:11px;
}
.field:focus-within{outline:1px solid var(--teal-light);outline-offset:0}
.btn-send{
  justify-self:center;margin-top:18px;cursor:pointer;
  background:var(--teal-light);border:1px solid var(--teal-light);color:var(--white);
  font-family:var(--body);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  padding:13px 34px;transition:background .18s ease,color .18s ease;
}
.btn-send:hover,.btn-send:focus-visible{background:transparent;color:var(--teal-light)}
.fineprint{max-width:760px;margin:46px auto 0;text-align:center}
.fineprint p{font-size:17px}

/* ---------- Client Portal (sign-in) ---------- */

.portal-notice{
  max-width:658px;margin:18px auto 0;text-align:center;
  color:var(--on-dark-body);font-size:16px;line-height:1.6;
}
.portal-notice a{color:var(--teal-light)}

/* ---------- FAQ accordion (light) ---------- */

.faq-list{max-width:658px;margin:40px auto 0;text-align:left}
.faq-list details{border-bottom:1px solid #E0E0E0}
.faq-list summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--body);font-size:18px;color:var(--black);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:10px;top:28px;width:9px;height:9px;
  border-right:1.5px solid #6E6E6E;border-bottom:1.5px solid #6E6E6E;
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq-list details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq-list details p{margin:0 0 22px;color:var(--muted-2);font-size:18px}

/* ---------- Begin Your Architecture heading uses teal ---------- */

.band-dark h2{color:var(--teal-light)}

/* ---------- Footer ---------- */

.foot{background:var(--gold);color:var(--black);padding:56px 0;text-align:center;font-size:17px}
.foot a{color:var(--black)}
.foot p{margin:0 0 4px}
.foot .terms{margin-top:26px}

/* ---------- Cookie notice ---------- */

.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--black);color:#DCDCDC;padding:20px 28px;
  display:none;gap:22px;align-items:center;justify-content:center;
  flex-wrap:wrap;font-size:16px;
}
.cookie.show{display:flex}
.cookie p{margin:0;max-width:62ch}
.cookie button{
  font-family:var(--body);font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 26px;border:1px solid var(--gold);background:var(--gold);color:var(--black);cursor:pointer;
}

/* ---------- Responsive ---------- */

@media(max-width:1180px){
  .stage,.stage.flip{grid-template-columns:1fr;gap:28px;justify-items:center}
  .stage.flip .stage-media,.stage.flip .stage-text{order:initial}
  .stage-media img{width:min(592px,74vw);height:min(592px,74vw)}
  .band-grey{padding:56px 0}
}

@media(max-width:900px){
  .row,.row.flip{grid-template-columns:1fr;gap:26px}
  .row.flip .row-media,.row.flip .row-text{order:initial}
}

@media(max-width:760px){
  body{font-size:17px}
  .band{padding:64px 0}
  .band-dark{padding:64px 0}
  .cards{grid-template-columns:1fr;gap:26px}
  .hero{min-height:480px;padding:88px 0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}