/* ============================================================
   TRAVEL2GETHER — "The Mosaic" design system
   Every journey is a tessera; together they form the Holy Land.
   ============================================================ */

:root {
  /* ── palette: lamplit mosaic + Jerusalem stone ── */
  --grout:     #0B181B;   /* deepest petrol-black — the grout between tiles */
  --petrol:    #102A2F;   /* lifted dark surface */
  --petrol-2:  #18424A;   /* dark surface, lighter still */
  --teal:      #15A2AE;   /* Dome-of-the-Rock turquoise (logo) */
  --teal-lo:   #0B7782;
  --teal-hi:   #46C6D1;
  --ember:     #EE7B3D;   /* desert sun (logo) */
  --ember-lo:  #D35F26;
  --ember-hi:  #F79D63;
  --gold:      #C8A24E;   /* Byzantine gold tesserae */
  --gold-hi:   #DCBE7C;
  --limestone: #E7DECC;   /* Jerusalem stone — primary light bg */
  --bone:      #F6F1E6;   /* lightest surface */
  --sand:      #DDD2BB;
  --ink:       #14201F;   /* text on light */
  --ink-soft:  #5E5848;   /* secondary text on light */
  --line:      rgba(20,32,31,.14);
  --line-dk:   rgba(247,241,230,.12);

  --grad: linear-gradient(118deg, var(--teal) 0%, var(--ember) 100%);

  /* ── type ── */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;

  /* ── geometry: square = tessera ── */
  --radius: 2px;
  --tile: 52px;                 /* tessera grid unit */
  --shadow:    0 2px 22px rgba(11,24,27,.10);
  --shadow-lg: 0 26px 70px rgba(11,24,27,.30);
  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .42s var(--ease);
  --max: 1280px;
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);font-size:16px;line-height:1.72;
  color:var(--ink);background:var(--bone);
  -webkit-font-smoothing:antialiased;font-synthesis:none;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
::selection{background:var(--ember);color:#fff}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:1px}

/* ============================================================
   TESSERA PRIMITIVES (the recurring motif)
   ============================================================ */

/* 3-tile marker that sits before every eyebrow/label, site-wide */
.label::before,
.hero__eyebrow::before{
  content:'';display:inline-block;vertical-align:middle;
  width:30px;height:8px;margin-right:12px;
  background:
    linear-gradient(90deg,
      var(--teal) 0 8px, transparent 8px 11px,
      var(--ember) 11px 19px, transparent 19px 22px,
      var(--gold) 22px 30px);
}

/* thin mosaic band used as a divider / section seam */
.mosaic-band{
  height:9px;width:100%;
  background-color:var(--grout);
  background-image:
    linear-gradient(90deg,
      var(--teal)      0 9px, transparent 9px 12px,
      var(--ember)     12px 21px, transparent 21px 24px,
      var(--gold)      24px 33px, transparent 33px 36px,
      var(--teal-lo)   36px 45px, transparent 45px 48px,
      var(--limestone) 48px 57px, transparent 57px 60px,
      var(--ember-lo)  60px 69px, transparent 69px 72px);
  background-size:72px 100%;
}

/* faint tessera grid texture (over hero photos) */
.tess-grid{
  background-image:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--tile) - 1px), rgba(11,24,27,.30) calc(var(--tile) - 1px) var(--tile)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--tile) - 1px), rgba(11,24,27,.30) calc(var(--tile) - 1px) var(--tile));
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container{max-width:var(--max);margin:0 auto;padding:0 48px}
.section{padding:118px 0;position:relative}
.section--bone{background:var(--bone)}
.section--limestone{background:var(--limestone)}
.section--grout{background:var(--grout);color:var(--bone)}
.section--petrol{background:var(--petrol);color:var(--bone)}
/* legacy class aliases so existing pages inherit the new system */
.section--ivory{background:var(--limestone)}
.section--sand{background:var(--bone)}
.section--white{background:var(--bone)}
.section--navy,.section--night{background:var(--grout);color:var(--bone)}
.text-center{text-align:center}

/* dark sections flip text colors */
.section--grout .heading,.section--petrol .heading,
.section--navy .heading,.section--night .heading{color:var(--bone)}
.section--grout .body-text,.section--petrol .body-text,
.section--navy .body-text,.section--night .body-text{color:rgba(231,222,204,.74)}

/* ── eyebrow / label (mono "manifest" voice) ── */
.label{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal-lo);
  margin-bottom:22px;
}
.section--grout .label,.section--petrol .label,
.section--navy .label,.section--night .label{color:var(--teal-hi)}

/* ── headings (Fraunces) ── */
.heading{
  font-family:var(--display);
  font-size:clamp(2.2rem,4.4vw,3.8rem);
  font-weight:340;line-height:1.04;letter-spacing:-.02em;
  color:var(--grout);margin-bottom:24px;
  font-optical-sizing:auto;
}
.heading em{font-style:italic;font-weight:340;color:var(--ember)}
.heading em.teal{color:var(--teal)}

/* ── body copy ── */
.body-text{font-size:1.04rem;font-weight:400;line-height:1.85;color:var(--ink-soft);max-width:60ch}
.body-text--white{color:rgba(231,222,204,.74)}
.body-text+.body-text{margin-top:18px}

/* ============================================================
   BUTTONS — squared tesserae
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;border-radius:var(--radius);
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
}
.btn--primary{background:var(--grad);color:#fff;background-size:140% 140%;background-position:0 0}
.btn--primary:hover{background-position:100% 100%;transform:translateY(-2px);box-shadow:0 14px 34px rgba(238,123,61,.32)}
.btn--ghost,.btn--outline-white{background:transparent;color:var(--bone);border-color:rgba(231,222,204,.4)}
.btn--ghost:hover,.btn--outline-white:hover{border-color:var(--gold);color:var(--gold-hi);transform:translateY(-2px)}
.btn--outline-navy{background:transparent;color:var(--grout);border-color:var(--grout)}
.btn--outline-navy:hover{background:var(--grout);color:var(--bone);transform:translateY(-2px)}
.btn--teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--teal:hover{background:var(--teal-lo);transform:translateY(-2px)}

/* ============================================================
   NAVIGATION — light limestone bar over a dark hero
   ============================================================ */
.nav{position:sticky;top:0;z-index:1000;background:var(--bone)}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;
  background-color:var(--grout);
  background-image:linear-gradient(90deg,
    var(--teal) 0 9px,transparent 9px 12px,
    var(--ember) 12px 21px,transparent 21px 24px,
    var(--gold) 24px 33px,transparent 33px 36px,
    var(--teal-lo) 36px 45px,transparent 45px 48px,
    var(--limestone) 48px 57px,transparent 57px 60px);
  background-size:60px 100%;}
.nav__inner{display:flex;align-items:center;justify-content:space-between;
  height:82px;max-width:var(--max);margin:0 auto;padding:0 48px}
.nav__logo{display:flex;align-items:center}
.nav__logo-img{height:54px;width:auto}
/* hide the old text wordmark beside the logo if present */
.nav__logo-name,.nav__logo-text{display:none}

.nav__links{display:flex;align-items:center;list-style:none}
.nav__item{position:relative}
.nav__link{
  display:block;padding:11px 17px;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  transition:color var(--t);position:relative;
}
.nav__link::after{content:'';position:absolute;left:17px;bottom:7px;width:0;height:6px;
  background:var(--teal);transition:width .3s var(--ease)}
.nav__link:hover,.nav__link.active{color:var(--grout)}
.nav__link:hover::after,.nav__link.active::after{width:14px}

.nav__dropdown{display:none;position:absolute;top:calc(100% + 5px);left:0;
  background:var(--grout);min-width:230px;padding:8px 0;
  border-top:3px solid var(--ember);box-shadow:var(--shadow-lg)}
.nav__item:hover .nav__dropdown{display:block}
.nav__dropdown a{display:block;padding:11px 22px;
  font-family:var(--body);font-size:.86rem;color:rgba(231,222,204,.7);
  transition:color var(--t),background var(--t),padding var(--t)}
.nav__dropdown a:hover{background:rgba(21,162,174,.14);color:var(--bone);padding-left:28px}

.nav__cta{
  background:var(--grad)!important;color:#fff!important;
  padding:11px 22px!important;border-radius:var(--radius)!important;
  font-family:var(--mono)!important;font-size:.68rem!important;
  letter-spacing:.12em!important;margin-left:12px;
}
.nav__cta::after{display:none!important}
.nav__cta:hover{transform:translateY(-1px)}

.nav__toggle{display:none;flex-direction:column;gap:5px;padding:10px;margin-right:-10px}
.nav__toggle span{display:block;width:23px;height:2px;background:var(--grout);transition:var(--t)}

/* ============================================================
   HERO — the mosaic assembles
   ============================================================ */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;
  background:var(--grout);overflow:hidden}
.hero--medium{min-height:60vh}

.hero__photo,.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.7) contrast(1.02)}
/* duotone + legibility wash */
.hero__duotone,.hero__overlay{position:absolute;inset:0}
.hero__duotone{
  background:
    linear-gradient(115deg, rgba(11,24,27,.86) 0%, rgba(11,24,27,.5) 48%, rgba(16,42,47,.62) 100%),
    linear-gradient(0deg, rgba(21,162,174,.28), rgba(238,123,61,.14));
  mix-blend-mode:normal;
}
.hero__overlay{
  background:linear-gradient(108deg, rgba(11,24,27,.84) 0%, rgba(11,24,27,.46) 55%, rgba(16,42,47,.58) 100%);
}
/* tessera grid texture over the photo (inner pages, static) */
.hero__overlay::after,.hero--home .hero__photo::after{content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--tile) - 1px), rgba(11,24,27,.34) calc(var(--tile) - 1px) var(--tile)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--tile) - 1px), rgba(11,24,27,.34) calc(var(--tile) - 1px) var(--tile));}

/* animated tessera layer (homepage) */
.hero__mosaic{position:absolute;inset:0;display:grid;pointer-events:none;z-index:2}
.hero__mosaic .tess{background:var(--c,var(--petrol));opacity:0;
  animation:tessReveal .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes tessReveal{
  0%{opacity:1;transform:scale(.6)}
  60%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}

.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:7px;z-index:3;
  background-color:var(--grout);
  background-image:linear-gradient(90deg,
    var(--teal) 0 9px,transparent 9px 12px,var(--ember) 12px 21px,transparent 21px 24px,
    var(--gold) 24px 33px,transparent 33px 36px,var(--teal-lo) 36px 45px,transparent 45px 48px,
    var(--limestone) 48px 57px,transparent 57px 60px);
  background-size:60px 100%;}

.hero__panel,.hero__content{position:relative;z-index:4;max-width:var(--max);
  margin:0 auto;padding:0 48px;width:100%}
.hero__panel-inner{max-width:760px}

.hero__eyebrow{display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal-hi);margin-bottom:26px}

.hero__title{font-family:var(--display);font-optical-sizing:auto;
  font-size:clamp(3rem,8.2vw,7rem);font-weight:300;line-height:.98;
  letter-spacing:-.035em;color:var(--bone);margin-bottom:28px}
.hero__title em{font-style:italic;font-weight:300;color:var(--ember-hi)}

.hero__sub{font-size:clamp(1rem,1.5vw,1.16rem);font-weight:400;line-height:1.7;
  color:rgba(231,222,204,.82);max-width:46ch;margin-bottom:40px}
.hero--medium .hero__sub{margin-left:auto;margin-right:auto;text-align:center}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}

/* inner-page medium hero is centered */
.hero--medium{text-align:center;justify-content:center}
.hero--medium .hero__content{text-align:center}
.hero--medium .hero__eyebrow{justify-content:center}
.hero--medium .hero__actions{justify-content:center}
.hero--medium .hero__title{font-size:clamp(2.6rem,6.5vw,5rem)}

/* ============================================================
   TRUST STRIP — on dark grout, mono manifest
   ============================================================ */
.trust{background:var(--grout);padding:30px 0;position:relative}
.trust::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background-color:var(--petrol);
  background-image:linear-gradient(90deg,
    var(--teal) 0 9px,transparent 9px 12px,var(--ember) 12px 21px,transparent 21px 24px,
    var(--gold) 24px 33px,transparent 33px 36px);background-size:36px 100%;opacity:.9}
.trust__inner{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;
  max-width:var(--max);margin:0 auto;padding:0 48px}
.trust__label{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);padding:0 22px}
.trust__item{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(231,222,204,.82);padding:0 22px}
.trust__divider{width:7px;height:7px;background:var(--ember);transform:rotate(45deg)}

/* ============================================================
   SPLIT
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split--rev .split__visual{order:-1}
.split__visual{position:relative}
.split__visual::before{content:'';position:absolute;inset:auto auto -16px -16px;
  width:120px;height:120px;background:var(--grad);opacity:.16;z-index:0}
.split__visual::after{content:'';position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--gold);opacity:.5;pointer-events:none}
.split__visual img{width:100%;height:520px;object-fit:cover;position:relative;z-index:1;
  filter:saturate(.86)}
.split__text .body-text{margin-bottom:18px}
.split__text .btn{margin-top:8px}

/* ============================================================
   GRIDS & CARDS — tesserae
   ============================================================ */
.grid{display:grid;gap:16px}
.grid--5{grid-template-columns:repeat(5,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{border-radius:var(--radius);overflow:hidden;position:relative}

/* image tile */
.card--img{display:block;height:340px;position:relative;cursor:pointer;background:var(--grout)}
.card--img-tall{height:460px}
.card__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.82);transition:transform .8s var(--ease)}
.card--img:hover .card__bg{transform:scale(1.07)}
.card__shade{position:absolute;inset:0;
  background:linear-gradient(to top, rgba(11,24,27,.92) 0%, rgba(11,24,27,.18) 52%, rgba(11,24,27,0) 100%);
  transition:var(--t)}
.card--img:hover .card__shade{background:linear-gradient(to top, rgba(11,24,27,.96) 0%, rgba(11,24,27,.4) 60%, rgba(11,24,27,.06) 100%)}
/* gold tessera frame reveal on hover */
.card--img::after{content:'';position:absolute;inset:9px;border:1px solid var(--gold);
  opacity:0;transition:opacity var(--t);z-index:2;pointer-events:none}
.card--img:hover::after{opacity:.85}

.card__foot{position:absolute;left:0;right:0;bottom:0;padding:28px 24px;z-index:3}
.card__name{font-family:var(--display);font-size:1.55rem;font-weight:400;color:var(--bone);
  line-height:1.08;margin-bottom:7px}
.card__desc{font-size:.82rem;font-weight:400;color:rgba(231,222,204,.72);margin-bottom:13px}
.card__cta{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-hi)}
.card__cta::after{content:' \2192';display:inline-block;transition:transform var(--t)}
.card--img:hover .card__cta::after{transform:translateX(6px)}

/* content tile */
.card--box{padding:38px 34px;background:var(--bone);position:relative;
  border:1px solid var(--line);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card--box::before{content:'';position:absolute;top:0;left:0;width:46px;height:6px;background:var(--grad)}
.card--box:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.section--grout .card--box,.section--petrol .card--box,
.section--navy .card--box,.section--night .card--box{background:var(--petrol);border-color:var(--line-dk)}
.card__icon{font-size:1.7rem;margin-bottom:18px}
.card__title{font-family:var(--display);font-size:1.32rem;font-weight:430;color:var(--grout);margin-bottom:12px}
.section--grout .card__title,.section--petrol .card__title,
.section--navy .card__title,.section--night .card__title{color:var(--bone)}
.card__body{font-size:.94rem;line-height:1.74;color:var(--ink-soft)}
.section--grout .card__body,.section--petrol .card__body,
.section--navy .card__body,.section--night .card__body{color:rgba(231,222,204,.68)}
a.card--box .card__title{transition:color var(--t)}
a.card--box:hover .card__title{color:var(--teal)}

/* asymmetric destination mosaic (homepage) */
.dest-grid{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;
  gap:16px;height:580px}
.dest-grid__main{grid-row:1/3;height:100%!important}
.dest-grid__stack{display:flex;flex-direction:column;gap:16px;height:100%}
.dest-grid__stack .card--img{flex:1;height:auto!important}

/* ============================================================
   STATS — mono figures
   ============================================================ */
.stats{display:flex;gap:60px;flex-wrap:wrap;padding:38px 0 6px}
.stat__num{font-family:var(--display);font-size:clamp(2.8rem,4.6vw,4.2rem);
  font-weight:330;line-height:1;color:var(--ember)}
.stat__label{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-soft);margin-top:8px}
.section--grout .stat__label,.section--navy .stat__label,.section--night .stat__label{color:rgba(231,222,204,.6)}

/* ============================================================
   CHECK LIST — tesserae bullets
   ============================================================ */
.check-list{list-style:none;display:grid;gap:12px}
.check-list li{display:flex;align-items:flex-start;gap:14px;font-size:.98rem;font-weight:400}
.check-list li::before{content:'';width:9px;height:9px;margin-top:8px;flex-shrink:0;
  background:var(--teal);transform:rotate(45deg)}
.check-list li:nth-child(2n)::before{background:var(--ember)}
.check-list li:nth-child(3n)::before{background:var(--gold)}

/* ============================================================
   BLOCKQUOTE
   ============================================================ */
.blockquote{border-left:3px solid var(--ember);padding:8px 0 8px 28px;margin:32px 0;
  font-family:var(--display);font-size:1.3rem;font-style:italic;font-weight:360;
  color:var(--grout);line-height:1.5}
.blockquote cite{display:block;font-family:var(--mono);font-size:.66rem;font-style:normal;
  font-weight:500;color:var(--teal-lo);margin-top:14px;letter-spacing:.16em;text-transform:uppercase}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:flex;flex-direction:column}
.faq__item{border-bottom:1px solid var(--line)}
.faq__question{width:100%;text-align:left;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:22px 0;
  font-family:var(--body);font-size:1rem;font-weight:600;color:var(--grout)}
.faq__question::after{content:'';width:13px;height:13px;flex-shrink:0;background:var(--teal);
  transition:transform .3s var(--ease),background .3s;transform:rotate(0)}
.faq__item.open .faq__question::after{transform:rotate(45deg);background:var(--ember)}
.faq__answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__item.open .faq__answer{max-height:420px}
.faq__answer p{padding:0 0 22px;font-size:.96rem;line-height:1.8;color:var(--ink-soft);max-width:68ch}

/* ============================================================
   CTA — deep grout
   ============================================================ */
.cta{background:var(--grout);padding:120px 0;text-align:center;position:relative;color:var(--bone)}
.cta::before{content:'';position:absolute;top:0;left:0;right:0;height:7px;
  background-color:var(--petrol);
  background-image:linear-gradient(90deg,
    var(--teal) 0 9px,transparent 9px 12px,var(--ember) 12px 21px,transparent 21px 24px,
    var(--gold) 24px 33px,transparent 33px 36px,var(--teal-lo) 36px 45px,transparent 45px 48px,
    var(--limestone) 48px 57px,transparent 57px 60px);background-size:60px 100%}
.cta .label{justify-content:center;color:var(--teal-hi)}
.cta__title{font-family:var(--display);font-size:clamp(2.4rem,5vw,4rem);font-weight:320;
  color:var(--bone);margin-bottom:18px;line-height:1.05;letter-spacing:-.02em}
.cta__title em{font-style:italic;color:var(--ember-hi)}
.cta__sub{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:rgba(231,222,204,.55);margin-bottom:18px}
.cta__email{display:inline-block;font-family:var(--display);font-style:italic;font-size:1.5rem;
  color:var(--gold-hi);margin-bottom:42px}
.cta__email:hover{color:var(--gold)}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial{background:var(--bone);padding:42px 34px 34px;position:relative;overflow:hidden;
  border:1px solid var(--line)}
.testimonial::before{content:'';position:absolute;top:0;left:0;width:46px;height:6px;background:var(--grad)}
.testimonial__stars{color:var(--ember);font-size:.74rem;letter-spacing:.16em;margin-bottom:18px}
.testimonial__text{font-family:var(--display);font-size:1.08rem;font-style:italic;font-weight:380;
  color:var(--grout);line-height:1.6;margin-bottom:24px}
.testimonial__name{font-family:var(--mono);font-size:.66rem;font-weight:500;color:var(--grout);
  text-transform:uppercase;letter-spacing:.14em}
.testimonial__origin{font-size:.84rem;color:var(--ink-soft);margin-top:4px}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--grout);padding:8px}
.gallery img{width:100%;height:230px;object-fit:cover;transition:var(--t);filter:saturate(.82)}
.gallery img:hover{filter:saturate(1);transform:scale(1.02)}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form{display:flex;flex-direction:column;gap:20px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form__group{display:flex;flex-direction:column;gap:8px}
.form__label{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grout)}
.form__input,.form__select,.form__textarea{
  padding:14px 16px;font-family:var(--body);font-size:.96rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--t),box-shadow var(--t);outline:none;appearance:none}
.form__input:focus,.form__select:focus,.form__textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(21,162,174,.14)}
.form__textarea{min-height:140px;resize:vertical}
.form__select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2314201F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.form__hint{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);letter-spacing:.04em}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--grout);color:rgba(231,222,204,.6);padding:90px 0 44px;position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:7px;
  background-color:var(--petrol);
  background-image:linear-gradient(90deg,
    var(--teal) 0 9px,transparent 9px 12px,var(--ember) 12px 21px,transparent 21px 24px,
    var(--gold) 24px 33px,transparent 33px 36px,var(--teal-lo) 36px 45px,transparent 45px 48px,
    var(--limestone) 48px 57px,transparent 57px 60px);background-size:60px 100%}
.footer__grid{display:grid;grid-template-columns:2.4fr 1fr 1.2fr 1fr;gap:56px;margin-bottom:64px}
.footer__logo{display:none}   /* swapped for a text wordmark */
.footer__wordmark{font-family:var(--display);font-size:2rem;font-weight:400;color:var(--bone);
  margin-bottom:16px;letter-spacing:-.01em}
.footer__wordmark span{color:var(--ember);font-style:italic}
.footer__tagline{font-size:.9rem;line-height:1.75;margin-bottom:22px;color:rgba(231,222,204,.5);max-width:38ch}
.footer__contact{font-family:var(--mono);font-size:.8rem}
.footer__contact a{color:var(--gold-hi)}
.footer__contact a:hover{color:var(--gold)}
.footer__social{display:flex;gap:10px;margin-top:24px}
.footer__social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line-dk);color:rgba(231,222,204,.55);font-family:var(--mono);font-size:.74rem;
  transition:var(--t)}
.footer__social a:hover{border-color:var(--gold);color:var(--gold)}
.footer__col-head{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.footer__links{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer__links a{font-size:.88rem;color:rgba(231,222,204,.5);transition:var(--t);padding:3px 0}
.footer__links a:hover{color:var(--bone)}
.footer__bottom{border-top:1px solid var(--line-dk);padding-top:30px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:rgba(231,222,204,.32);text-align:center}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .grid--5{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .split{gap:52px}
  .dest-grid{height:500px}
}
@media(max-width:840px){
  .section{padding:80px 0}
  .container{padding:0 30px}
  .nav__inner{padding:0 30px}
  .hero__panel,.hero__content{padding:0 30px}
  .trust__inner{padding:0 30px}
  .grid--5{grid-template-columns:repeat(2,1fr)}
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .split--rev .split__visual{order:0}
  .split__visual img{height:360px}
  .testimonials{grid-template-columns:1fr}
  .body-text{max-width:100%}
  .form__row{grid-template-columns:1fr}
  .dest-grid{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .dest-grid__main{grid-row:auto;height:360px!important}
  .dest-grid__stack{flex-direction:row}
  .dest-grid__stack .card--img{height:240px!important}

  .nav__links{display:none;position:absolute;top:82px;left:0;right:0;background:var(--grout);
    flex-direction:column;padding:14px 0;box-shadow:var(--shadow-lg)}
  .nav__links.open{display:flex}
  .nav__toggle{display:flex}
  .nav__link{color:rgba(231,222,204,.78)}
  .nav__link::after{display:none}
  .nav__dropdown{position:static;box-shadow:none;border-top:none;background:rgba(255,255,255,.04)}
  .nav__item:hover .nav__dropdown{display:none}
  .nav__item.open .nav__dropdown{display:block}
  .nav__cta{margin-left:0!important;margin-top:6px}
}
@media(max-width:520px){
  .container{padding:0 22px}
  .nav__inner{padding:0 22px}
  .hero__panel,.hero__content{padding:0 22px}
  .grid--5,.grid--4,.grid--3{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__actions,.cta__btns{flex-direction:column;align-items:stretch;max-width:300px}
  .hero__actions .btn,.cta__btns .btn{justify-content:center}
  .stats{flex-direction:column;gap:26px}
  .section{padding:64px 0}
  .dest-grid__stack{flex-direction:column}
  .dest-grid__stack .card--img{height:220px!important}
  .split__visual img{height:280px}
  .trust__divider{display:none}
  .trust__label,.trust__item{padding:5px 14px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__mosaic .tess{opacity:0!important}
  .reveal{opacity:1;transform:none}
}