/* ============================================================
   ONEIA — Travel · Access · Peace of Mind
   Design tokens
   ============================================================ */
:root{
  --ivory:        #F6F2E9;
  --ivory-deep:    #EFE9DB;
  --paper:        #FBF9F4;
  --ink:          #26241F;
  --ink-soft:     #55524A;
  --line:         #D8D0BE;
  --forest:       #1E2A22;
  --forest-deep:  #16201A;
  --forest-soft:  #2C3A2E;
  --gold:         #A9895F;
  --gold-soft:    #C7AE86;
  --cream-on-dark: #EDE7D8;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --body:  "EB Garamond", "Georgia", serif;

  --maxw: 1240px;
  --gap:  clamp(1.25rem, 3vw, 2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
p{ margin:0 0 1em; }
button{ font-family:var(--sans); cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
  margin-bottom:.9rem;
}
.rule{ width:40px; height:1px; background:var(--gold); border:0; margin:0 0 1.1rem; }
.rule--light{ background:rgba(237,231,216,.55); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.95rem 1.9rem;
  background:var(--forest);
  color:var(--cream-on-dark);
  font-family:var(--sans);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid var(--forest);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ background:var(--forest-deep); }
.btn--outline{
  background:transparent;
  border:1px solid rgba(237,231,216,.5);
  color:var(--cream-on-dark);
}
.btn--outline:hover{ background:rgba(237,231,216,.12); }


/* ---------------- Header / Nav ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,242,233,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.1rem; padding-bottom:1.1rem;
}
.logo{
  display:flex; align-items:center;
  color:var(--ink);
}
.logo-img{ height:52px; width:auto; display:block; }
.main-nav{ display:flex; gap:2.3rem; }
.main-nav a{
  font-family:var(--sans); font-size:.76rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-soft);
  padding-bottom:6px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{ color:var(--ink); border-color:var(--gold); }

.header-tag{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft); text-align:right;
  line-height:1.6; padding-left:1.4rem; border-left:1px solid var(--line);
}

.nav-toggle{
  display:none; background:none; border:0; padding:.4rem;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:24px; height:1px; background:var(--ink); display:block; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  color:var(--cream-on-dark);
  display:flex; align-items:center;
  min-height:78vh;
  background:linear-gradient(180deg,#7E6A4D 0%, #B98F60 32%, #D9A566 52%, #7E93A6 78%, #3A5064 100%);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,22,16,.42) 0%, rgba(20,22,16,.12) 38%, rgba(20,22,16,.55) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero--center{ text-align:center; }
.hero--center .hero__inner{ max-width:760px; margin:0 auto; padding:6rem clamp(1.25rem,4vw,3rem); }
.hero--split{ align-items:flex-end; }
.hero--split .wrap{ position:relative; z-index:2; width:100%; padding-bottom:4.5rem; padding-top:9rem; }
.hero-logo-img{ display:block; margin:0 auto 1.3rem; height:auto; width:clamp(180px,26vw,300px); }
.hero .wordmark{
  font-family:var(--serif); font-size:clamp(2.6rem,6vw,4.4rem);
  letter-spacing:.16em; margin:.2rem 0 .3rem;
}
.hero .tagline{
  font-family:var(--sans); font-size:.8rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(237,231,216,.85); margin-bottom:1.6rem;
}
.hero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); max-width:640px; }
.hero .lede{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2vw,1.5rem);
  color:rgba(237,231,216,.92); max-width:520px; margin-bottom:1.9rem;
}
.hero .lede--plain{ font-family:var(--sans); font-style:normal; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }
.hero .sub{ max-width:480px; color:rgba(237,231,216,.88); font-size:1.05rem; }
.hero-strip{
  position:absolute; top:2.4rem; right:clamp(1.25rem,4vw,3rem); z-index:2;
  text-align:right; font-family:var(--sans); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(237,231,216,.85); line-height:1.9;
}
.hero-strip::after{ content:""; display:block; height:1px; width:100%; background:rgba(237,231,216,.4); margin-top:.5rem; }
.hero-corner{
  position:absolute; z-index:2; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(237,231,216,.85); line-height:2;
}
.hero-corner--tl{ top:9rem; left:clamp(1.25rem,4vw,3rem); }
.hero--split .hero-corner--tl{ left:auto; right:clamp(1.25rem,4vw,3rem); text-align:right; }
.hero-tags{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,231,216,.8); margin-top:1.6rem; }

/* ---------------- Icon strip ---------------- */
.icon-strip{
  display:grid; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.icon-strip__item{
  padding:2.2rem 1rem; text-align:center; border-right:1px solid var(--line);
}
.icon-strip__item:last-child{ border-right:0; }
.icon-strip svg{ width:26px; height:26px; margin:0 auto .8rem; color:var(--gold); }
.icon-strip__label{ font-family:var(--sans); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------------- Section layouts ---------------- */
.section{ padding:5.5rem 0; }
.section--tight{ padding:3.6rem 0; }
.split{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--gap); align-items:start;
}
.split h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); }
.split .body-copy{ color:var(--ink-soft); max-width:44ch; }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.6rem; }
.card-grid--4{ grid-template-columns:repeat(4,1fr); }
.feature-card figure{
  margin:0 0 1.1rem; aspect-ratio:4/5; overflow:hidden; background:#cfc6ae;
}
.feature-card--wide figure{ aspect-ratio:16/11; }
.feature-card h3{ font-size:1.18rem; margin-bottom:.35rem; }
.feature-card p{ font-style:italic; color:var(--ink-soft); font-size:.98rem; margin-bottom:.6rem; }
.feature-card .card-link{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; align-items:center; gap:.4rem;
}


.hub-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.9rem; margin-top:3rem; }
.hub-card figure{ aspect-ratio:4/3; margin:0 0 1.2rem; background:#cfc6ae; overflow:hidden; }
.hub-card h3{ font-size:1.5rem; text-align:center; }
.hub-card .card-copy{ text-align:center; font-style:italic; color:var(--ink-soft); margin-bottom:.7rem; }
.hub-card{ text-align:center; }
.hub-card .card-link{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  display:inline-flex; gap:.4rem; align-items:center; justify-content:center;
}

.center-statement{ text-align:center; max-width:760px; margin:0 auto; }
.center-statement h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); }
.center-statement p{ color:var(--ink-soft); }
.divider-star{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:2.2rem; }
.divider-star span{ width:70px; height:1px; background:var(--line); }
.divider-star svg{ width:16px; height:16px; color:var(--gold); }

.photo-band{ position:relative; min-height:64vh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg,#597086 0%, #7E93A6 30%, #C79A63 62%, #8B6F4C 100%);
  color:var(--cream-on-dark); overflow:hidden;
}
.photo-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,17,13,.05), rgba(15,17,13,.6)); }
.photo-band .wrap{ position:relative; z-index:2; padding-bottom:4rem; padding-top:4rem; }
.photo-band h2{ font-size:clamp(1.6rem,3vw,2.3rem); max-width:420px; color:var(--cream-on-dark); }
.photo-band .btn{ margin-top:1rem; }

/* Dark statement band with copy + side list */
.dark-band{ background:var(--forest); color:var(--cream-on-dark); }
.dark-band .split{ grid-template-columns:.55fr 1fr .55fr; align-items:center; gap:2.6rem; }
.dark-band figure{ aspect-ratio:16/11; overflow:hidden; background:#3a4a3c; }
.dark-band h2{ color:var(--cream-on-dark); font-size:clamp(1.6rem,3vw,2.3rem); }
.dark-band .side-list{ list-style:none; margin:0; padding:0; font-family:var(--sans);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; line-height:2.4; color:rgba(237,231,216,.85); }
.dark-band .side-note{ font-family:var(--serif); font-style:italic; font-size:1.15rem; margin-top:1.4rem; color:var(--cream-on-dark); }

/* Two-col image + copy service section */
.service-row{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.9fr); gap:2.2rem; align-items:center; }
.service-row > *{ min-width:0; }
.service-photos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; min-width:0; }
.service-photos figure{ aspect-ratio:3/4; margin:0; overflow:hidden; background:#cfc6ae; }
.service-photos h4{ font-family:var(--sans); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; margin:.7rem 0 .25rem; }
.service-photos p{ font-style:italic; color:var(--ink-soft); font-size:.92rem; margin:0; }

/* Photography slots — each holds a real <img>, cropped with object-fit.
   The class on the wrapper only sets a fallback background colour in
   case an image is ever missing; it is not a placeholder. */
.ph{
  width:100%; height:100%; position:relative; overflow:hidden;
  background:#cabf9e;
}
.ph-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ph-img--sailboat{ object-position:15% center; }
.ph-img--family{ object-position:28% center; }
.ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,12,0) 55%, rgba(20,18,12,.22) 100%);
  pointer-events:none;
}

/* ---------------- Enquire page ---------------- */
.enquire-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:3.5rem; }
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-family:var(--sans); font-size:.75rem; letter-spacing:.06em; margin-bottom:.4rem; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); background:var(--paper); padding:.85rem .9rem;
  font-family:var(--body); font-size:1rem; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1.8rem; }
.submit-msg{ margin-top:1.2rem; font-family:var(--sans); font-size:.85rem; letter-spacing:.03em; display:none; }
.submit-msg.is-visible{ display:block; }
.submit-msg.ok{ color:#3d6b3f; }
.submit-msg.err{ color:#9a3e34; }

.contact-card h3{ font-size:1.7rem; }
.contact-email{ display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:1.02rem; margin:1rem 0 1.8rem; }
.contact-email svg{ width:18px; height:18px; color:var(--gold); }
.steps{ list-style:none; margin:0; padding:0; }
.steps li{ display:flex; gap:1rem; margin-bottom:1.1rem; }
.step-num{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:var(--sans); font-size:.8rem; color:var(--ink-soft);
}
.steps p{ margin:0; padding-top:.3rem; }
.closing-note{ font-family:var(--serif); font-style:italic; font-size:1.15rem; margin-top:1.8rem; }

.trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.trust-strip__item{ padding:2.4rem 1rem; border-right:1px solid var(--line); }
.trust-strip__item:last-child{ border-right:0; }
.trust-strip svg{ width:24px; height:24px; margin:0 auto .8rem; color:var(--gold); }
.trust-strip strong{ display:block; font-family:var(--sans); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.25rem; }
.trust-strip span{ font-style:italic; color:var(--ink-soft); font-size:.9rem; }

/* ---------------- Footer ---------------- */
.footer-cta{ background:var(--forest); color:var(--cream-on-dark); }
.footer-cta .wrap{ padding:3.4rem clamp(1.25rem,4vw,3rem); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; }
.footer-cta h3{ color:var(--cream-on-dark); font-size:1.5rem; max-width:340px; }
.footer-cta .logo-block{ text-align:center; }
.footer-cta .logo-block img{ height:64px; width:auto; margin:0 auto .5rem; }
.footer-cta .logo-block img,
.dark-band .closing-logo-img{
  filter:brightness(0) invert(92%) sepia(12%) saturate(320%) hue-rotate(356deg) brightness(102%);
}
.footer-cta .logo-block small{ font-family:var(--sans); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(237,231,216,.7); }
.footer-cta .right{ text-align:right; }

.site-footer{ background:var(--ivory-deep); border-top:1px solid var(--line); padding:1.6rem 0; }
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; }
.site-footer .footer-logo-img{ height:30px; width:auto; display:block; }
.site-footer .foot-tag{ font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.site-footer .foot-rule{ flex:1; height:1px; background:var(--line); margin:0 2.5rem; }

.closing-logo-img{ height:52px; width:auto; margin:0 auto .5rem; }
.closing-split{ grid-template-columns:1fr 1fr; align-items:center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px){
  .split{ grid-template-columns:1fr; }
  .card-grid, .card-grid--4{ grid-template-columns:repeat(2,1fr); }
  .hub-row{ grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  .dark-band .split{ grid-template-columns:1fr; text-align:left; }
  .service-row{ grid-template-columns:1fr; }
  .service-photos{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .enquire-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .footer-cta .wrap{ grid-template-columns:1fr; text-align:center; }
  .footer-cta .right{ text-align:center; }
  .header-tag{ display:none; }
}

@media (max-width: 780px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--forest); color:var(--cream-on-dark);
    flex-direction:column; gap:0; padding:6.2rem 2rem 2rem;
    transform:translateX(100%); transition:transform .35s ease; z-index:60;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ color:var(--cream-on-dark); padding:1rem 0; border-bottom:1px solid rgba(237,231,216,.15); width:100%; }
  .main-nav a[aria-current="page"]{ color:var(--gold-soft); }
  .nav-toggle{ display:flex; }
  .nav-scrim{ position:fixed; inset:0; background:rgba(10,10,8,.4); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:55; }
  .nav-scrim.is-open{ opacity:1; pointer-events:auto; }

  .hero{ min-height:auto; }
  .hero--center .hero__inner{ padding:8.5rem 1.25rem 4.5rem; }
  .hero--split .wrap{ padding-top:8rem; padding-bottom:3rem; }
  .hero--split .hero-corner--tl{ text-align:left; }
  .hero-strip{ display:none; }
  .hero-corner--tl{ position:static; margin-bottom:2rem; }

  .icon-strip{ grid-template-columns:repeat(2,1fr) !important; }
  .icon-strip__item{ border-bottom:1px solid var(--line); }
  .icon-strip__item:nth-last-child(-n+2){ border-bottom:0; }

  .card-grid, .card-grid--4, .hub-row{ grid-template-columns:1fr; }
  .service-photos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .field-row{ grid-template-columns:1fr; }
  .trust-strip{ grid-template-columns:repeat(2,1fr); }
  .trust-strip__item:nth-child(2n){ border-right:0; }
  .trust-strip__item:nth-child(n+3){ border-top:1px solid var(--line); }

  .section{ padding:3.6rem 0; }
}

@media (max-width: 480px){
  body{ font-size:16.5px; }
  .logo-img{ height:42px; }
}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}