/* ============================================================================
   GEC — Landing page sections
   ========================================================================= */

/* ------------------------------------------------------------------ HERO */
/* `padding-top: var(--header-h)` used to give the content exactly the header's
   height and not a pixel more. The hero is bottom-aligned, so the moment the
   content grew tall enough to eat the slack — anything under about 820px of
   viewport height — the top line landed at y=86px, flush against the header's
   bottom edge and squarely in the nav band. Measured at 760px tall: 0px of
   clearance. The clamp guarantees real air at every height. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + clamp(1.4rem, 5vh, 3.5rem));
  padding-bottom: clamp(2.2rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

/* Slideshow timing lives here and nowhere else. gec.js reads --hero-dur so the
   interval, the dot sweep and the Ken Burns drift cannot fall out of step. */
:root {
  --hero-dur:  12s;    /* how long each frame holds */
  --hero-fade: 3.4s;   /* how long one photograph takes to become the next */
}

.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--bg); }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--hero-fade) var(--ease-in-out);
}

/* Only the INCOMING frame fades. The outgoing one is pinned opaque underneath
   until the new one has fully arrived, then dropped behind it. Cross-fading
   both at once sends each to ~50% mid-transition, and two half-transparent
   photographs over the black ground read as a dip to grey in the middle of
   every change. */
.hero__slide.was-active { opacity: 1; z-index: 1; transition: none; }
.hero__slide.is-active  { opacity: 1; z-index: 2; }

.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.045);
}

/* The drift runs for exactly one hold, so at the moment the frame hands over it
   is precisely at the keyframe's end value — which `.was-active` then holds.
   Any other duration leaves a visible jump as the animation is taken away. */
.hero__slide.is-active img  { animation: kenburns var(--hero-dur) linear forwards; }
.hero__slide.was-active img { animation: none; transform: scale(1.105); }

/* 6% over twelve seconds. The old 9% over nine was a noticeable creep; this
   reads as the photograph breathing. */
@keyframes kenburns {
  from { transform: scale(1.045); }
  to   { transform: scale(1.105); }
}

/* The slideshow runs from a dim riad interior to a bright sunset, so the scrim has
   to hold the text legible against the extreme frame, not the average one. */
.hero__slide img { filter: brightness(.86) saturate(.95); }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.62) 100%),
    linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.44) 46%, rgba(0,0,0,.12) 100%);
}

/* ---- Light theme hero ----
   The photograph is lifted and desaturated into a pale wash so dark type reads
   over it. The overlay is deliberately heavy on the text side: the slideshow
   includes a near-black riad interior, and the headline has to hold against
   that frame as well as against the sunset. */
/* ---- Light theme hero ----
   A global brightness lift blows out the sunset frames while barely rescuing the
   riad one, and a flat overlay erases the photograph. So the wash is directional
   instead: almost solid behind the column of text, falling away to nearly clear
   on the opposite side, where the image is left to read at full strength. Dark
   type gets a dependable light field; the photograph still carries the screen. */
:root[data-theme="light"] .hero__slide img {
  filter: brightness(1.1) saturate(.8) contrast(.95);
}

:root[data-theme="light"] .hero__scrim {
  background:
    /* Solid enough to carry the headline, which runs to about 72% of the width,
       then falling away so the right quarter of the photograph reads clearly. */
    linear-gradient(to right,
      rgba(247,245,240,.96) 0%,  rgba(247,245,240,.93) 42%,
      rgba(247,245,240,.8)  62%, rgba(247,245,240,.36) 80%,
      rgba(247,245,240,.08) 100%),
    /* Lifts the band behind the fixed header, whose nav reaches the right edge. */
    linear-gradient(to top,
      rgba(247,245,240,.48) 0%, rgba(247,245,240,.1) 30%,
      rgba(247,245,240,.04) 60%, rgba(247,245,240,.56) 100%);
}

:root[data-theme="light"] .hero .zellige { opacity: .3; }

/* On a phone the text block spans the full width, so a side-to-side wash covers
   the whole screen and the photograph vanishes. Below tablet it runs top-to-
   bottom instead: solid through the band of text, opening up above and below so
   the image still frames the screen. */
@media (max-width: 860px) {
  :root[data-theme="light"] .hero__scrim {
    background: linear-gradient(to bottom,
      rgba(247,245,240,.5)  0%,
      rgba(247,245,240,.78) 11%,
      rgba(247,245,240,.94) 24%,
      rgba(247,245,240,.94) 66%,
      rgba(247,245,240,.6)  84%,
      rgba(247,245,240,.28) 100%);
  }
}

.hero .zellige { z-index: -1; opacity: .22; }

.hero__in {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__content { max-width: min(1180px, 100%); display: flex; flex-direction: column; gap: clamp(1.3rem, 2.4vw, 2rem); }

/* ---- Rotating slide caption ----
   Names the service the current frame stands for. This slot used to hold the
   static positioning line, which has moved down to the foot strip. */
.hero__cap {
  align-self: flex-start;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  padding-block: .3rem;
}

.hero__cap-no,
.hero__cap-name {
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.hero__cap-no {
  flex: none;
  font-size: .66rem;
  letter-spacing: .22em;
  color: var(--gold-on-bg);
}

.hero__cap-rule {
  flex: none;
  width: clamp(22px, 4vw, 54px);
  height: 1px;
  background: var(--gold);
  opacity: .6;
}

.hero__cap-name {
  min-width: 0;
  font-size: .73rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text);
}

.hero__cap-go {
  flex: none;
  width: 13px; height: 13px;
  color: var(--gold-on-bg);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* The caption links through to the service page, so on touch it needs a real
   hit area — measured at 30px tall. This lives here rather than in layout.css's
   touch-target block because home.css loads *after* layout.css on this page and
   would otherwise win with its .3rem. */
@media (max-width: 900px) {
  .hero__cap { padding-block: .82rem; }
}

.hero__cap:hover .hero__cap-name { color: var(--gold-on-bg); }
.hero__cap:hover .hero__cap-go   { opacity: 1; transform: none; }
[dir="rtl"] .hero__cap-go        { transform: scaleX(-1) translateX(-6px); }
[dir="rtl"] .hero__cap:hover .hero__cap-go { transform: scaleX(-1); }

/* The slideshow sets this for the length of the swap, so the old service name
   clears out before the new one is written in. */
.hero__cap.is-swapping .hero__cap-no,
.hero__cap.is-swapping .hero__cap-name { opacity: 0; transform: translateY(-7px); }

/* The headline's staggered delays are meant for its arrival. Applied on the way
   out they make the second line linger 220ms behind the first, which reads as a
   stumble rather than a departure — so the stagger is zeroed while leaving and
   restored for the return. */
.hero__content.is-swapping .rise > span,
.hero__content.is-swapping .hero__lead { transition-delay: 0ms; }

.hero h1 { margin-block: .35rem .2rem; }

.hero h1 .ln { display: block; }

.hero__lead { max-width: 58ch; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: clamp(2.4rem, 5vw, 4.2rem);
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}

.places {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .73rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The positioning line, moved here off the top of the hero. It leads the strip
   and sits a step stronger than the places that follow it. */
.places__id { color: var(--text); }

.places .khatam { width: 9px; height: 9px; color: var(--gold-on-bg); opacity: .8; flex: none; }

/* Slide progress dots.
   The visible rule is 2px, but the button itself is padded out to a 44px tap
   target — a 2px hit area is unusable on a phone. */
.hero__dots { display: flex; gap: .2rem; align-items: center; }

/* 30px rule + 7px each side = a 44px hit area. Measured at 6px it came to 42px,
   which is under the touch minimum. */
.hero__dot {
  width: 30px;
  height: 2px;
  background: color-mix(in srgb, currentColor 28%, transparent);
  position: relative;
  box-sizing: content-box;
  padding-block: 21px;
  padding-inline: 7px;
  background-clip: content-box;
}

.hero__dot i {
  position: absolute;
  inset: 21px 7px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

[dir="rtl"] .hero__dot i { transform-origin: right; }

.hero__dot.is-active i { animation: dotFill var(--hero-dur) linear forwards; }

@keyframes dotFill { to { transform: scaleX(1); } }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.scroll-cue__line {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-cue__line::after {
  content: "";
  position: absolute; left: 0; top: -34px;
  width: 1px; height: 34px;
  background: var(--gold-lt);
  animation: cueDrop 2.4s var(--ease-in-out) infinite;
}

@keyframes cueDrop { to { top: 34px; } }

/* Six slides instead of four: the dot rail grew from ~170px to ~264px. Shrinking
   the dots to claw that back was the wrong trade — it took the hit area to 26px,
   under the touch minimum. The rail keeps its 44px cells and the strip wraps
   instead, which it is already built to do. The places line tightens to delay
   that as long as possible. */
@media (max-width: 980px) {
  .places { gap: .8rem; letter-spacing: .2em; }
}

/* Short windows — a laptop with a bookmarks bar, or a browser with devtools
   docked. The content is what overflows, so the content is what tightens. */
@media (min-width: 701px) and (max-height: 880px) {
  .hero__content { gap: clamp(.8rem, 1.5vh, 1.3rem); }
  .hero__lead    { font-size: 1rem; }
  .hero__foot    { margin-top: clamp(1.2rem, 3vh, 2.4rem); padding-top: 1.1rem; }
  .hero__cta     { margin-top: .2rem; }
}

@media (max-width: 700px) {
  .hero { align-items: center; padding-top: calc(var(--header-h) + 2rem); }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__dots { order: 2; }
  .scroll-cue { display: none; }
  .hero__cta .btn { flex: 1 1 100%; }
  .places { gap: .7rem; font-size: .66rem; letter-spacing: .17em; }
}

/* --------------------------------------------------------------- MARQUEE */
.marquee {
  position: relative;
  padding-block: 1.15rem;
  border-block: 1px solid var(--line-gold);
  background: var(--bg-alt);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 42s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
  flex: none;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  font-family: var(--font-display);
  font-size: clamp(.98rem, 1.5vw, 1.32rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.marquee__item .khatam { width: 11px; height: 11px; color: var(--gold-on-bg); flex: none; }

@keyframes slide { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------- ABOUT */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.about__media { position: relative; aspect-ratio: 4 / 5; }

.about__media img { width: 100%; height: 100%; object-fit: cover; }

/* Small inset card overlapping the arch image */
.about__badge {
  position: absolute;
  /* clamp() needs min <= max, so the negative offsets read low-to-high */
  right: clamp(-2.4rem, -2vw, -1.5rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  background: var(--bg-alt);
  border: 1px solid var(--line-gold);
  padding: 1.35rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  box-shadow: var(--shadow-lg);
  z-index: 3;
}

.about__badge b {
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-on-bg);
}

.about__badge span {
  font-size: .63rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about__close {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  font-style: italic;
  color: var(--gold-on-bg);
  line-height: 1.35;
}

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--line);
  border: 1px solid var(--line);
}

.stat {
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: background-color var(--t-med) var(--ease);
}

.stat:hover { background: var(--bg-raise); }

.stat b {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.15rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold-on-bg);
}

.stat span {
  font-size: .655rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { aspect-ratio: 3 / 4; max-width: 460px; }
  .about__badge { right: 1rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------- SIGNATURE SERVICES */
/* Twelve columns, not six. Six could only divide into halves and thirds, so the
   six services fell 2 / 3 / 1 and left the last tile stranded alone on its own
   row. Twelve divides into halves AND quarters, which is what puts the two
   feature tiles on the first row and the remaining four together on the second. */
.sig {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 1.8vw, 1.7rem);
}

.sig__tile { grid-column: span 6; }
.sig__tile:nth-child(n+3) { grid-column: span 3; }

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  transition: border-color var(--t-med) var(--ease);
}

.tile:hover { border-color: var(--line-gold); }

.tile__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.sig__tile:nth-child(n+3) .tile__media { aspect-ratio: 3 / 3.5; }

.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.66) saturate(.92);
  transition: transform 1.6s var(--ease), filter 1.6s var(--ease);
}

.tile:hover .tile__media img { transform: scale(1.07); filter: brightness(.78) saturate(1); }

.tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.93) 4%, rgba(0,0,0,.46) 42%, rgba(0,0,0,.05) 78%);
}

/* Gold arch hairline that draws in on hover */
.tile__arch {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(100% - 2.4rem);
  height: calc(100% - 1.6rem);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 46% 46% 0 0 / 26% 26% 0 0;
  transition: border-color .8s var(--ease);
  pointer-events: none;
}

.tile:hover .tile__arch { border-color: var(--line-gold); }

.tile__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  z-index: 2;
}

.tile__no {
  font-size: .7rem;          /* 11.2px — under 10px is not comfortably legible */
  letter-spacing: .25em;
  color: var(--gold-on-bg);
  opacity: .9;
}

.tile__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 2.05rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--text);
}

.tile__tag {
  font-size: .845rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 42ch;
}

.tile__go {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: .5rem;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
}

.tile__go svg { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.tile:hover .tile__go svg { transform: translateX(7px); }

/* A quarter-width tile is roughly half the width of the third-width tile it
   replaced, so the type that suited the old row would wrap "Lifestyle
   Management" across three lines in the new one. The four-up row gets its own
   scale — smaller name, smaller tag, tighter inset — while the two feature
   tiles on the first row keep the full display size. */
.sig__tile:nth-child(n+3) .tile__body { padding: clamp(1.1rem, 1.7vw, 1.6rem); }
.sig__tile:nth-child(n+3) .tile__name { font-size: clamp(1.1rem, 1.45vw, 1.5rem); }
.sig__tile:nth-child(n+3) .tile__tag  { font-size: .79rem; line-height: 1.5; }
.sig__tile:nth-child(n+3) .tile__go   { font-size: .6rem; letter-spacing: .18em; margin-top: .35rem; }

/* Two across from 1080 down. Below that a quarter-width tile is too narrow to
   carry a service name and its line at any size worth reading. */
@media (max-width: 1080px) {
  .sig { grid-template-columns: repeat(2, 1fr); }
  .sig__tile, .sig__tile:nth-child(n+3) { grid-column: span 1; }
  .sig__tile:nth-child(n+3) .tile__media { aspect-ratio: 4 / 3.4; }

  /* Back to full size — at half-width these are as big as the feature tiles. */
  .sig__tile:nth-child(n+3) .tile__body { padding: clamp(1.4rem, 2.6vw, 2.2rem); }
  .sig__tile:nth-child(n+3) .tile__name { font-size: clamp(1.4rem, 2.3vw, 2.05rem); }
  .sig__tile:nth-child(n+3) .tile__tag  { font-size: .845rem; line-height: 1.6; }
  .sig__tile:nth-child(n+3) .tile__go   { font-size: .66rem; letter-spacing: .22em; margin-top: .5rem; }
}

@media (max-width: 620px) {
  .sig { grid-template-columns: 1fr; }
  .tile__media { aspect-ratio: 4 / 3.2 !important; }
}

/* -------------------------------------------------------- OUR SERVICES */
/* The 1px gaps show the grid's own background as hairlines between cards, so the
   cards carry the section's ground and the grid carries the rule colour. */
/* --------------------------------------------- DETAILED SERVICE GRID
   One cell per confirmed service: its mark, its line, and everything the
   service actually covers. Sits inside `.section--invert`, which redefines
   --text / --line / --gold-on-bg, so these rules stay token-only and read
   correctly in both themes without a single hard-coded colour.

   `minmax(0, 1fr)` rather than `1fr`: a plain 1fr track is minmax(auto, 1fr)
   and refuses to shrink below its content, which is what pushed the page
   sideways at 375px the last time this pattern was used. */
.svcx {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
}

.svcx__card {
  position: relative;
  min-width: 0;
  background: var(--bg-invert);
  padding: clamp(1.7rem, 2.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: .72rem;
  transition: background-color var(--t-med) var(--ease);
}

/* Lift the cell a touch toward the text colour, whichever way round that is. */
.svcx__card:hover { background: color-mix(in srgb, var(--bg-invert) 93%, var(--text)); }

.svcx__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}

.svcx__ico {
  flex: none;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-gold);
  color: var(--gold-on-bg);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}

.svcx__ico svg { width: 26px; height: 26px; }

.svcx__card:hover .svcx__ico {
  background: var(--gold-on-bg);
  border-color: var(--gold-on-bg);
  color: var(--bg-invert);
}

.svcx__no {
  font-size: .7rem;
  letter-spacing: .22em;
  color: var(--gold-on-bg);
  opacity: .8;
}

.svcx__name {
  font-family: var(--font-display);
  font-size: clamp(1.24rem, 1.8vw, 1.55rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}

.svcx__tag {
  font-style: italic;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--gold-on-bg);
}

.svcx__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.svcx__list li {
  position: relative;
  padding-inline-start: 1.05rem;
  font-size: .855rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.svcx__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .6em;
  width: 4px; height: 4px;
  background: var(--gold-on-bg);
  transform: rotate(45deg);
  opacity: .7;
}

.svcx__go {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: auto;
  padding-top: 1.35rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
}

.svcx__go svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.svcx__card:hover .svcx__go svg { transform: translateX(6px); }
[dir="rtl"] .svcx__card:hover .svcx__go svg { transform: scaleX(-1) translateX(6px); }

/* Stretched link: the whole cell is the target, but only one link reaches the
   accessibility tree. */
.svcx__go::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 1000px) { .svcx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .svcx { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- WHY GEC */
.why { position: relative; }

.why__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.reason {
  position: relative;
  background: var(--bg);
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-height: 236px;
  overflow: hidden;
  transition: background-color var(--t-med) var(--ease);
}

.reason::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .75s var(--ease);
}

.reason:hover { background: var(--bg-raise); }
.reason:hover::before { transform: scaleX(1); }

.reason__no {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-on-bg);
  opacity: .34;
  transition: opacity var(--t-med) var(--ease);
}

.reason:hover .reason__no { opacity: .85; }

.reason h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
}

.reason p { font-size: .885rem; color: var(--text-muted); line-height: 1.68; }

@media (max-width: 950px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .why__grid { grid-template-columns: 1fr; } .reason { min-height: 0; } }

/* -------------------------------------------------------- DESTINATIONS */
.dests {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.7rem);
}

.dest {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  transition: border-color var(--t-med) var(--ease);
}

.dest:hover { border-color: var(--line-gold); }

.dest img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.6);
  transition: transform 1.7s var(--ease), filter 1.7s var(--ease);
}

.dest:hover img { transform: scale(1.07); filter: brightness(.72); }

.dest__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.94) 2%, rgba(0,0,0,.34) 48%, transparent 82%);
}

.dest__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.dest__count {
  font-size: .63rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
}

.dest__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.1;
}

.dest__cities {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .75s var(--ease), opacity .75s var(--ease), margin-top .75s var(--ease);
}

.dest:hover .dest__cities,
.dest:focus-visible .dest__cities { max-height: 130px; opacity: 1; margin-top: .2rem; }

@media (max-width: 900px) { .dests { grid-template-columns: 1fr; } .dest { aspect-ratio: 16 / 10; } }

/* ---- Founder portrait framing ----
   The arch clip moves here from the <img> so the photograph can be scaled
   inside a fixed frame. `object-fit` alone can only slide a window across the
   source; it cannot close in. Sliding it made things worse — biasing left
   pulled the backdrop lettering into shot, biasing right left dead panelling
   beside him.

   Scaling about his face instead pushes the conference backdrop, the ® on the
   wall and most of the lanyard out of frame in one move. 1.22 is as far as it
   goes before his shoulders start to clip: the source is 640px shown in a 597px
   frame, so at this scale it is upscaled about 1.14x — slight, and worth it.

   Framed in CSS rather than re-cut and re-encoded, so the original file stays
   untouched and a better portrait can replace it with no code change. */
.portrait-zoom {
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: url(#gec-arch);
  -webkit-clip-path: url(#gec-arch);
}

.portrait-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The arch now belongs to the wrapper; leaving it here would scale with it. */
  clip-path: none;
  -webkit-clip-path: none;

  /* The source is already cropped to the 4:5 this frame wants, so the zoom only
     has to close the last of the distance. The origin is the top-left corner,
     not the face, and that is deliberate: the photograph has barely 5% headroom
     above his head, so scaling about any point below it pushes his crown
     through the top of the arch. Growing from the corner keeps the head where
     it is, crops the surplus off the right and bottom instead, and leaves the
     wall lockup on the left fully in frame. */
  transform: scale(1.15);
  transform-origin: 0 0;
}

/* The founder's direct line, under his name and role. Kept LTR inside the RTL
   layout — an address reads left to right in any language. */
.founder__email { margin-top: .55rem; }
.founder__email .link-u { font-size: .78rem; letter-spacing: .04em; text-transform: none; }

/* ---- Portrait pending ----
   Shown in place of the founder's photograph until GEC supplies an approved
   one. Deliberately composed rather than apologetic: it fills the same arch,
   keeps the same aspect and reveal, and reads as a choice.

   Token-only, so it inherits `.section--warm`'s sand palette (which is light in
   BOTH themes and pushes gold to #5E4519 for contrast) without knowing about it. */
.portrait-pending {
  width: 100%;
  aspect-ratio: 1000 / 1250;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 2rem 1.4rem;
  text-align: center;
  background:
    radial-gradient(118% 88% at 50% 14%, rgba(200, 165, 91, .14), transparent 64%),
    color-mix(in srgb, var(--bg-warm) 88%, var(--text));

  /* gec.css clips the arch with `.arch-frame img`, scoped to images — so this
     panel, being a div, rendered as a bare rectangle sitting inside the arch
     outline instead of filling it. No border of its own either: `.arch-frame`
     already draws the gold hairline, and a rectangular border would be sliced
     off by the clip anyway. */
  clip-path: url(#gec-arch);
  -webkit-clip-path: url(#gec-arch);
}

.portrait-pending .brand__mark { width: clamp(58px, 17%, 100px); color: var(--gold-on-bg); }
.portrait-pending__rule { width: 44px; height: 1px; background: var(--gold-on-bg); opacity: .5; }

.portrait-pending__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}

.portrait-pending__role {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
}

[dir="rtl"] .portrait-pending__role { letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------- FOUNDER */
.founder { position: relative; overflow: hidden; }

.founder .zellige { opacity: .3; }

.founder__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.founder__media { position: relative; aspect-ratio: 4 / 5; }
.founder__media img { width: 100%; height: 100%; object-fit: cover; }

.founder .arch-frame::after { border-color: rgba(16,16,20,.28); }

.founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.1;
}

.founder__role {
  margin-top: .55rem;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
}

.founder__bio { display: flex; flex-direction: column; gap: 1.15rem; }
.founder__bio p { color: var(--text-muted); line-height: 1.8; max-width: 62ch; }

.founder__hl {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: .6rem;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(16,16,20,.2);
  background: rgba(255,255,255,.28);
  align-self: flex-start;
}

.founder__hl b {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-on-bg);
}

.founder__hl span {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(16,16,20,.68);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .founder__grid { grid-template-columns: 1fr; }
  .founder__media { aspect-ratio: 3 / 4; max-width: 420px; }
}

/* ------------------------------------------------------------- CONTACT */
.contact { position: relative; overflow: hidden; }
.contact .zellige { opacity: .25; }

.contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.contact__direct { display: flex; flex-direction: column; gap: .85rem; margin-top: 2.2rem; }

.direct {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.direct:hover { border-color: var(--line-gold); background: rgba(200,165,91,.045); }

.direct__ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid var(--line-gold);
  color: var(--gold-on-bg);
  border-radius: 50%;
}

.direct__ico svg { width: 17px; height: 17px; }

.direct__txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.direct__txt b {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
}

.direct__txt span {
  font-size: .92rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact__form {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  padding: clamp(1.7rem, 3.4vw, 2.9rem);
  position: relative;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-grid .span-2 { grid-column: 1 / -1; }

.form-foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.7rem;
}

.form-foot .btn { width: 100%; }

/* Success / failure panels */
.form-msg {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1rem;
}

.form-msg.is-shown { display: flex; }

.form-msg__ico {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  color: var(--gold-on-bg);
}

.form-msg__ico svg { width: 26px; height: 26px; }

.form-msg h3 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--text);
}

.form-msg p { color: var(--text-muted); max-width: 44ch; }

.is-sending .btn--gold { opacity: .6; pointer-events: none; }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}