/* ==========================================================================
   BETH-HARAN GLOBAL GROUPS — components
   Navigation, hero, service cards, ticker, footer.
   ========================================================================== */

/* ==========================================================================
   Scroll progress — a hairline of gold across the very top of the viewport
   ========================================================================== */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  z-index:220;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--gold-line);
  pointer-events:none;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav{
  position:fixed;
  z-index:200;
  top:0;left:0;right:0;
  height:var(--nav-h);
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#fff;
  transition:height var(--med) var(--ease),background var(--med) var(--ease),
             box-shadow var(--med) var(--ease);
}

/* Solid state once scrolled, or whenever the dropdown is open */
.nav.is-scrolled,
.nav.has-open-panel{
  height:var(--nav-h-scrolled);
  background:rgba(78,4,59,.94);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.09);
}

/* On light-ground pages the nav needs a permanent ground to stay legible */
.nav--solid{
  background:rgba(78,4,59,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.nav__brand{
  display:flex;
  align-items:center;
  flex:none;
  transition:opacity var(--fast) var(--ease);
}
.nav__brand:hover{opacity:.82}
.nav__logo{
  height:62px;
  width:auto;
  max-width:210px;
  object-fit:contain;
  transition:height var(--med) var(--ease);
}
.nav.is-scrolled .nav__logo{height:50px}

.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(26px,3.4vw,54px);
}

.nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 0;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:1.22rem;
  letter-spacing:.14em;
  color:#fff;
  background:none;
  border:0;
  cursor:pointer;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:2px;
  height:1px;
  background:var(--gold-line);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform var(--med) var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-expanded="true"]::after,
.nav__link.is-current::after{transform:scaleX(1);transform-origin:left}
.nav__link.is-current{color:var(--gold-light)}

.nav__caret{
  width:7px;height:7px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--med) var(--ease);
}
.nav__link[aria-expanded="true"] .nav__caret{transform:translateY(1px) rotate(-135deg)}

/* ==========================================================================
   Services dropdown — a full-width panel, three linked columns
   ========================================================================== */

.nav__group{position:static}

.panel{
  position:fixed;
  top:var(--nav-h-scrolled);
  left:0;right:0;
  z-index:190;
  background:rgba(78,4,59,.97);
  backdrop-filter:blur(24px) saturate(1.25);
  -webkit-backdrop-filter:blur(24px) saturate(1.25);
  border-top:1px solid var(--gold-dim);
  box-shadow:0 30px 70px rgba(78,4,59,.42);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-14px);
  transition:opacity var(--med) var(--ease),transform var(--med) var(--ease),
             visibility var(--med) var(--ease);
}
.panel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.panel__inner{
  max-width:var(--max);
  margin-inline:auto;
  padding:44px var(--gutter) 50px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}

.panel__item{
  position:relative;
  display:block;
  padding:6px 34px 8px;
  color:#fff;
  transition:transform var(--med) var(--ease);
}
.panel__item{border-left:1px solid var(--line-dark)}
.panel__item:first-child{padding-left:0;border-left:0}
.panel__item:last-child{padding-right:0}

.panel__media{
  aspect-ratio:16/9;
  margin-bottom:22px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,var(--aubergine-lift),var(--aubergine-deep));
}
.panel__media img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease),filter .8s var(--ease);
  filter:saturate(.82) brightness(.86);
}
.panel__item:hover .panel__media img,
.panel__item:focus-visible .panel__media img{
  transform:scale(1.09);
  filter:saturate(1.02) brightness(1);
}

.panel__title{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(1.7rem,2.1vw,2.35rem);
  line-height:1;
  letter-spacing:.02em;
  margin-bottom:11px;
  transition:color var(--fast) var(--ease);
}
.panel__item:hover .panel__title,
.panel__item:focus-visible .panel__title{color:var(--gold-light)}

.panel__desc{
  font-size:.9rem;
  line-height:1.62;
  color:var(--on-dark-soft);
  max-width:36ch;
}

/* ==========================================================================
   Mobile — full-screen overlay menu
   ========================================================================== */

.nav__toggle{
  display:none;
  width:46px;height:46px;
  place-content:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(78,4,59,.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  flex:none;
  position:relative;
  z-index:320;
}
.nav__toggle span{
  display:block;
  width:19px;height:1px;
  background:#fff;
  transition:transform var(--med) var(--ease),opacity var(--fast) var(--ease);
}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--nav-h-scrolled) + 30px) 26px 40px;
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(216,154,70,.17),transparent 56%),
    linear-gradient(168deg,var(--aubergine) 0%,var(--aubergine-deep) 100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s var(--ease),visibility .5s var(--ease);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.drawer.is-open{opacity:1;visibility:visible;pointer-events:auto}

.drawer__list{display:flex;flex-direction:column}

.drawer__row{
  border-bottom:1px solid rgba(255,255,255,.14);
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.drawer.is-open .drawer__row{opacity:1;transform:none}
.drawer.is-open .drawer__row:nth-child(1){transition-delay:.1s}
.drawer.is-open .drawer__row:nth-child(2){transition-delay:.17s}
.drawer.is-open .drawer__row:nth-child(3){transition-delay:.24s}
.drawer.is-open .drawer__row:nth-child(4){transition-delay:.31s}

.drawer__link{
  display:block;
  padding:21px 2px;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:2.5rem;
  line-height:1;
  letter-spacing:.06em;
  color:#fff;
}
.drawer__link.is-current{color:var(--gold-light)}

/* Services sub-list sits open permanently — nothing to discover, no accordion */
.drawer__sub{
  padding:0 0 20px 22px;
  display:flex;
  flex-direction:column;
  gap:2px;
  border-left:1px solid var(--gold-dim);
  margin-left:2px;
}
.drawer__sublink{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:11px 0;
  font-size:1.02rem;
  letter-spacing:.03em;
  color:var(--on-dark);
}
.drawer__sublink::before{
  content:"";
  width:14px;height:1px;
  background:var(--gold);
  flex:none;
  transform:translateY(-4px);
  transition:width var(--fast) var(--ease);
}
.drawer__sublink:hover::before{width:24px}
.drawer__sublink.is-current{color:var(--gold-light)}

.drawer__foot{
  margin-top:auto;
  padding-top:38px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:.94rem;
  color:var(--on-dark-soft);
  opacity:0;
  transition:opacity .5s var(--ease) .4s;
}
.drawer.is-open .drawer__foot{opacity:1}
.drawer__foot a{color:var(--gold-light)}

@media(max-width:1000px){
  .nav__links{display:none}
  .nav__toggle{display:grid}
  :root{--nav-h:80px;--nav-h-scrolled:68px}
  .nav__logo{height:52px}
  .nav.is-scrolled .nav__logo{height:44px}
}
@media(max-width:620px){
  .nav__logo{height:46px;max-width:160px}
  .nav.is-scrolled .nav__logo{height:40px}
}

/* ==========================================================================
   Hero — rotating photography, fixed headline
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
  background:var(--aubergine-deep);
  color:#fff;
}

.hero__stage{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.6s var(--ease-io);
  will-change:opacity;
}
.hero__slide.is-active{opacity:1}

.hero__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos,center);
  transform:scale(1.06);
  /* Covers the moment the pan animation is detached on the outgoing slide */
  transition:transform 1.6s linear;
}
/* Drift only runs on the slide currently in view, so each entry starts fresh */
.hero__slide.is-active img{
  animation:hero-pan 11s linear both;
}
@keyframes hero-pan{
  from{transform:scale(1.045) translate3d(0,0,0)}
  to  {transform:scale(1.14) translate3d(-1.4%,-1%,0)}
}

.hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    /* soft dark band along the top so the white menu links stay readable on bright photos */
    linear-gradient(180deg,rgba(78,4,59,.7),transparent 22%),
    linear-gradient(96deg,
      rgba(78,4,59,.93) 0%,
      rgba(78,4,59,.8) 26%,
      rgba(78,4,59,.46) 47%,
      rgba(78,4,59,.14) 72%,
      rgba(78,4,59,.3) 100%),
    linear-gradient(0deg,rgba(78,4,59,.72),transparent 52%);
}
/* Fine grain — keeps large flat gradients from banding on wide screens */
.hero__grain{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(ellipse at 60% 40%,transparent 0 30%,rgba(78,4,59,.2) 74%,rgba(78,4,59,.5) 100%),
    repeating-linear-gradient(0deg,rgba(255,240,220,.02) 0 1px,transparent 1px 4px);
}

.hero__content{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-top:var(--nav-h);
}
.hero__copy{max-width:min(56vw,860px)}

.hero__eyebrow{
  opacity:0;
  transform:translateY(16px);
  animation:rise .8s .2s var(--ease) forwards;
}

.hero__title{
  margin:22px 0 0;
  text-shadow:0 4px 30px rgba(78,4,59,.42);
}
.hero__line{
  display:block;
  overflow:hidden;
}

/* --- The pivot word. "BECOME" is the same on every slide, so it never moves:
       it rises into place once, on page load, and the words around it change. --- */
.hero__pivot > span{
  display:block;
  transform:translateY(106%);
  animation:line-in 1s var(--ease) .44s forwards;
}

/* --- Reels: the first and last words. Every letter is its own column. When the slide
       changes, the outgoing letter and its replacement roll together as one rigid strip
       (same timing, same distance), so they never touch. The first word rolls upward and
       the last word downward, meeting at BECOME. Only flat movement is used: no 3D and
       no filters, so the browser animates it on the graphics chip without any shimmer.
       --k is the letter's place in the wave (left to right on top, right to left below);
       --base is a one-off delay used only on page load. --- */
.hero__reel{
  position:relative;
  height:.84em;
}
.hero__reel--up  {--park:112%;--exit:-112%}
.hero__reel--down{--park:-112%;--exit:112%;--lag:.06s}

.reel__word{
  position:absolute;
  left:0;top:0;
  display:block;
  white-space:nowrap;
}
.reel__word .c{
  position:relative;
  display:inline-block;
  vertical-align:top;
  transform:translate3d(0,var(--park),0);          /* waiting place, out of sight */
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}
.reel__word.is-in .c{
  animation:c-in .85s cubic-bezier(.76,0,.24,1)
            calc(var(--base,0s) + var(--lag,0s) + var(--k) * 34ms) both;
}
.reel__word.is-out .c{
  animation:c-out .85s cubic-bezier(.76,0,.24,1)
            calc(var(--lag,0s) + var(--k) * 34ms) both;
}

/* A gold copy of each letter sits on top and fades out just after the letter lands,
   so a wave of gold runs across the new word. Opacity only, so it stays smooth. */
.reel__word .c::after{
  content:attr(data-c);
  position:absolute;
  left:0;top:0;
  color:var(--gold-light);
  opacity:0;
  pointer-events:none;
}
.reel__word.is-in .c::after{
  animation:c-glint 1s ease-out
            calc(var(--base,0s) + var(--lag,0s) + var(--k) * 34ms + .35s) both;
}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes line-in{to{transform:translateY(0)}}
@keyframes c-in  {from{transform:translate3d(0,var(--park),0)} to{transform:translate3d(0,0,0)}}
@keyframes c-out {from{transform:translate3d(0,0,0)} to{transform:translate3d(0,var(--exit),0)}}
@keyframes c-glint{0%{opacity:0} 18%{opacity:.95} 100%{opacity:0}}

/* --- Buttons. One pair per slide, stacked in the same spot. The old pair tips
       forward and drops away like a box rolling over; the new pair rolls down
       into place from above and lands with a small bounce. The pivot sits half a
       button behind the face, so it behaves like a cube. --- */
.hero__actions{
  display:grid;
  margin-top:38px;
}
.hero__meta{
  grid-area:1/1;
  justify-self:start;
  max-width:100%;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;        /* both buttons as wide as the longer of the two */
  align-items:stretch;          /* ...and exactly as tall as each other */
  gap:26px;
  visibility:hidden;
  --btn-h:62px;
}
.hero__meta.is-active,
.hero__meta.is-leaving{visibility:visible}

.hero__meta .action{
  transform-origin:50% 50% calc(var(--btn-h) * -.5);
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}
.hero__meta.is-active .action{
  animation:roll-in 1s cubic-bezier(.3,0,.2,1) var(--in-delay,.35s) backwards;
}
.hero__meta.is-active .action:nth-child(2){
  animation-delay:calc(var(--in-delay,.35s) + .1s);
}
.hero__meta.is-leaving .action{
  animation:roll-out .6s cubic-bezier(.55,0,.85,.35) both;
}
.hero__meta.is-leaving .action:nth-child(2){animation-delay:.08s}

@keyframes roll-in{
  0%  {transform:perspective(900px) rotateX(90deg);opacity:0}
  20% {opacity:1}
  70% {transform:perspective(900px) rotateX(-9deg)}
  100%{transform:perspective(900px) rotateX(0deg)}
}
@keyframes roll-out{
  0%  {transform:perspective(900px) rotateX(0deg);opacity:1}
  75% {opacity:1}
  100%{transform:perspective(900px) rotateX(-90deg);opacity:0}
}
/* Same-size buttons: words on the left, arrow pinned to the right edge. The arrow
   nudges sideways on hover instead of growing, so the pair never changes width. */
.hero__meta .action{justify-content:space-between}
.hero__meta .action__arrow{transition:transform var(--med) var(--ease)}
.hero__meta .action:hover .action__arrow,
.hero__meta .action:focus-visible .action__arrow{width:19px;transform:translateX(6px)}

@media(max-width:620px){
  .hero__meta{grid-auto-flow:row;--btn-h:54px}     /* stacked, still identical in size */
}

/* Slide indicators — thin bars that fill in time with the interval */
.hero__dots{
  position:absolute;
  z-index:4;
  right:var(--gutter);
  bottom:calc(clamp(40px,6vh,72px) - 11px);
  display:flex;
  gap:11px;
}
.hero__dot{
  position:relative;
  width:52px;height:24px;          /* tall tap area; the visible line is the 2px bar inside */
  background:none;
  overflow:hidden;
  cursor:pointer;
  border:0;
  padding:0;
}
.hero__dot::before{
  content:"";
  position:absolute;
  left:0;right:0;top:11px;
  height:2px;
  background:rgba(255,255,255,.28);
}
.hero__dot::after{
  content:"";
  position:absolute;
  left:0;right:0;top:11px;
  height:2px;
  background:var(--gold-line);
  transform:scaleX(0);
  transform-origin:left;
}
.hero__dot.is-active::after{
  animation:dot-fill var(--hero-interval,6800ms) linear forwards;
}
@keyframes dot-fill{to{transform:scaleX(1)}}

.hero__caption{
  position:absolute;
  z-index:4;
  left:var(--gutter);
  bottom:clamp(40px,6vh,72px);
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.92rem;
  letter-spacing:.2em;
  color:var(--gold-light);
  transition:opacity var(--med) var(--ease);
}

.hero__cue{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  width:1px;height:56px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
}
.hero__cue::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gold-light);
  animation:cue 2.6s var(--ease-io) infinite;
}
@keyframes cue{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

.hero__slide picture{display:block;width:100%;height:100%}
@media (max-width:1000px) and (max-aspect-ratio:1/1){
  .hero__slide img{object-position:var(--pos-m,var(--pos,center))}
}
@media(max-width:1000px){
  .hero__copy{max-width:100%}
  .hero__content{padding-top:calc(var(--nav-h) + 40px)}
  .hero__dots{right:26px;bottom:21px}
  .hero__dot{width:34px}
  .hero__caption{left:26px;bottom:32px;font-size:.78rem}
  .hero__cue{display:none}
  .hero__scrim{
    background:
      linear-gradient(150deg,rgba(78,4,59,.9) 0%,rgba(78,4,59,.62) 52%,rgba(78,4,59,.34) 100%),
      linear-gradient(0deg,rgba(78,4,59,.86),transparent 58%);
  }
}

/* ==========================================================================
   Page hero — the shorter variant used on interior pages
   ========================================================================== */

.pagehead{
  position:relative;
  min-height:clamp(460px,68svh,720px);
  display:grid;
  align-items:end;
  isolation:isolate;
  overflow:hidden;
  background:var(--aubergine-deep);
  color:#fff;
}
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media[data-parallax]{top:-8%;height:116%}
.pagehead__media img{width:100%;height:100%;object-fit:cover}
.pagehead__media::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(78,4,59,.9) 0%,rgba(78,4,59,.68) 40%,rgba(78,4,59,.24) 100%),
    linear-gradient(0deg,rgba(78,4,59,.82),transparent 62%);
}
.pagehead__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  /* top padding reserves room for the fixed menu bar, so the breadcrumb and heading can never slide under the logo */
  padding:calc(var(--nav-h) + 28px) var(--gutter) clamp(52px,7vw,96px);
}
.pagehead__title{margin:22px 0 0;text-shadow:0 4px 26px rgba(78,4,59,.4)}
.pagehead__lede{margin-top:28px;color:var(--on-dark)}

/* Breadcrumb — a genuine hierarchy signal, not decoration */
.crumbs{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--on-dark-soft);
  margin-bottom:26px;
}
.crumbs a:hover{color:var(--gold-light)}
.crumbs span[aria-hidden]{opacity:.5}

/* ==========================================================================
   Service cards — pointer-reactive 3D
   ========================================================================== */

.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.svc{
  position:relative;
  display:block;
  color:#fff;
  background:var(--aubergine);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .34s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
.svc:hover{box-shadow:0 34px 68px rgba(78,4,59,.34)}
/* While the pointer drives the transform, the easing has to step aside or
   every frame queues behind the previous one. */
.svc.is-tilting{transition:box-shadow .5s var(--ease)}

.svc__media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:linear-gradient(150deg,var(--aubergine-lift),var(--aubergine-deep));
}
.svc__media img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.5s var(--ease),filter 1s var(--ease);
  filter:saturate(.9) brightness(.82);
}
.svc:hover .svc__media img{transform:scale(1.1);filter:saturate(1.04) brightness(.95)}
.svc__media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(78,4,59,.12) 30%,rgba(78,4,59,.9) 100%);
}

/* Specular sheen that tracks the pointer across the card */
.svc__sheen{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(
    420px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.14),
    transparent 62%);
}
.svc:hover .svc__sheen{opacity:1}

.svc__body{
  position:absolute;
  z-index:4;
  left:0;right:0;bottom:0;
  padding:clamp(26px,2.4vw,38px);
  transform:translateZ(26px);
}
.svc__title{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(1.9rem,2.6vw,3rem);
  line-height:.94;
  margin-bottom:20px;
}
.svc__desc{
  font-size:.93rem;
  line-height:1.6;
  color:var(--on-dark);
  max-width:34ch;
  margin-bottom:22px;
}
.svc__cue{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:1rem;
  letter-spacing:.16em;
  color:var(--gold-light);
}
.svc__cue span{
  width:20px;height:1px;
  background:currentColor;
  transition:width var(--med) var(--ease);
}
.svc:hover .svc__cue span{width:34px}

@media(max-width:1000px){
  .services{grid-template-columns:1fr;gap:16px}
  .svc__media{aspect-ratio:4/3}
}

/* ==========================================================================
   Editorial feature — image beside copy, alternating
   ========================================================================== */

.feature{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(34px,6vw,92px);
  align-items:center;
}
.feature--flip .feature__media{order:2}
/* Two equal copy columns (mission / vision) rather than media beside text */
.feature--duo{grid-template-columns:1fr 1fr;align-items:start}
.feature__copy h3{margin-bottom:26px}
.feature__list{
  margin:28px 0 0;
  display:grid;
  gap:11px;
}
.feature__list li{
  position:relative;
  padding-left:26px;
  font-size:.99rem;
  line-height:1.55;
  color:var(--body);
}
.on-dark .feature__list li{color:var(--on-dark)}
.feature__list li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:12px;height:1px;
  background:var(--gold);
}
.feature__foot{
  margin-top:34px;
  font-size:1.18rem;
  line-height:1.35;
  color:var(--aubergine);
  font-style:italic;
  max-width:44ch;
}
.on-dark .feature__foot{color:var(--gold-light)}

@media(max-width:1000px){
  .feature{grid-template-columns:1fr;gap:32px}
  .feature--flip .feature__media{order:0}
}

/* ==========================================================================
   Ticker — a slow marquee of destinations
   ========================================================================== */

.ticker{
  position:relative;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  background:var(--aubergine);
  color:#fff;
  /* metallic hairlines top and bottom, like a gold-edged ribbon */
  border:0;
}
.ticker::before,
.ticker::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1px;
  background:var(--gold-line);
  opacity:.5;
  z-index:3;
}
.ticker::before{top:0}
.ticker::after{bottom:0}

/* Fixed label on the left — the strip reads as a caption, not decoration */
.ticker__label{
  position:relative;
  z-index:2;
  flex:none;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 26px 0 var(--gutter);
  background:var(--aubergine);
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.8rem;
  letter-spacing:.3em;
  color:var(--gold-light);
  white-space:nowrap;
}
.ticker__label::after{
  content:"";
  width:1px;
  height:20px;
  background:var(--gold-dim);
}

/* Only the moving words fade at the edges. The purple behind stays solid,
   so no page colour can leak through. */
.ticker__viewport{
  position:relative;
  flex:1;
  min-width:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:ticker 46s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused}

.ticker__item{
  display:inline-flex;
  align-items:center;
  gap:26px;
  padding:19px 26px 19px 0;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(.98rem,1.15vw,1.18rem);
  letter-spacing:.2em;
  line-height:1;
  white-space:nowrap;
  color:rgba(255,255,255,.8);
  transition:color var(--fast) var(--ease);
}
.ticker__item:hover{color:var(--gold-light)}

/* Four-point spark between names — the same star that sits in the logo */
.ticker__item::after{
  content:"";
  width:9px;height:9px;
  flex:none;
  background:var(--gold-metal);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}

@media(max-width:1000px){
  .ticker__label{padding:0 20px 0 var(--gutter);font-size:.72rem;gap:14px}
}
/* On phones the label would take half the strip — the names get it all */
@media(max-width:620px){
  .ticker__label{display:none}
  .ticker__viewport{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
  .ticker__item{padding-block:15px;gap:18px;padding-right:18px;font-size:.9rem;letter-spacing:.16em}
}

@keyframes ticker{to{transform:translate3d(-50%,0,0)}}

/* ==========================================================================
   Statement band — oversized pull quote on a dark ground
   ========================================================================== */

.statement{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(100% 120% at 82% 4%,rgba(216,154,70,.13),transparent 58%),
    linear-gradient(160deg,var(--aubergine) 0%,var(--aubergine-deep) 100%);
  color:#fff;
}
.statement__text{
  max-width:22ch;
  margin-inline:auto;
  text-align:center;
}
.statement__attrib{
  margin-top:36px;
  text-align:center;
  color:var(--gold-light);
  font-size:.86rem;
  letter-spacing:.2em;
}

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.closer{
  text-align:center;
  background:var(--paper);
}
.closer__lede{
  margin:32px auto 42px;
  text-align:center;
}
.closer__actions{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer{
  position:relative;
  overflow:hidden;
  background:var(--aubergine-deep);
  color:#fff;
  padding:clamp(66px,7vw,104px) var(--gutter) 30px;
}
.footer::before{
  content:"BETH-HARAN";
  position:absolute;
  right:-.03em;
  bottom:-.2em;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(9rem,22vw,26rem);
  line-height:.7;
  color:rgba(255,255,255,.026);
  pointer-events:none;
  white-space:nowrap;
}
.footer__inner{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin-inline:auto;
}
.footer__top{
  display:grid;
  grid-template-columns:1.5fr .8fr .8fr 1fr;
  gap:clamp(30px,4vw,64px);
  padding-bottom:clamp(48px,6vw,84px);
}
.footer__brand{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:2.2rem;
  line-height:.9;
  letter-spacing:.03em;
}
.footer__blurb{
  margin-top:20px;
  font-size:.95rem;
  line-height:1.75;
  color:var(--on-dark-soft);
  max-width:38ch;
}
.footer__head{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.98rem;
  letter-spacing:.2em;
  color:var(--g-text);
  margin-bottom:22px;
}
.footer__list{display:grid;gap:12px}
.footer__list a,
.footer__list span{
  font-size:.95rem;
  line-height:1.55;
  color:var(--on-dark);
}
.footer__list a:hover{color:var(--gold-light)}
.footer__phone{font-size:1.32rem!important;color:#fff!important}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.88rem;
  letter-spacing:.16em;
  color:var(--on-dark-soft);
}

@media(max-width:1000px){
  .footer__top{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .footer__top{grid-template-columns:1fr;gap:38px}
}

/* ==========================================================================
   Shared responsive collapse
   ========================================================================== */

@media(max-width:1000px){
  .heading-pair{grid-template-columns:1fr;gap:28px;align-items:start}
  .statement__text{max-width:100%}
}
@media(max-width:620px){
  :root{--gutter:22px}
  .drawer__link{font-size:2.05rem;padding:17px 2px}
  .action{padding:16px 26px;font-size:1.02rem}
}


/* ==========================================================================
   Portrait screens (phones, portrait tablets)
   The tall hero photos keep their subject in the bottom third, so the headline
   moves up into the sky and the dark fade at the bottom is eased off. Otherwise
   the buttons land on the subject and the fade turns it purple.
   ========================================================================== */
@media (max-width:1000px) and (max-aspect-ratio:1/1){
  .hero{align-items:start}
  .hero__content{padding-top:calc(var(--nav-h) + 5vh)}
  .hero__scrim{
    background:
      linear-gradient(160deg,rgba(78,4,59,.88) 0%,rgba(78,4,59,.55) 45%,rgba(78,4,59,.22) 100%),
      linear-gradient(0deg,rgba(78,4,59,.6),transparent 40%);
  }
}


/* Phones: the caption sits on its own line above the slide indicators, so a long caption
   such as "Domestic and international travel" can never run into them */
@media(max-width:620px){
  .hero__dots{left:26px;right:auto}
  .hero__caption{bottom:62px}
}

/* Breadcrumb links: a comfortable tap height */
.crumbs a{display:inline-block;padding:6px 0}