/* ==========================================================================
   Components — the vocabulary lifted from the company profile deck
   ========================================================================== */

/* --------------------------------------------------------------------------
   Registration frame. The deck puts a hairline L-bracket on nearly every
   page; here it wraps anything that deserves emphasis and draws itself in.
   -------------------------------------------------------------------------- */
.frame { position: relative; }
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  inline-size: clamp(28px, 4vw, 54px);
  block-size: clamp(28px, 4vw, 54px);
  border: 0 solid var(--frame-color, var(--rose));
  pointer-events: none;
  transition: inline-size var(--d-3) var(--ease), block-size var(--d-3) var(--ease);
}
.frame::before {
  inset-block-start: calc(var(--frame-gap, 14px) * -1);
  inset-inline-start: calc(var(--frame-gap, 14px) * -1);
  border-block-start-width: var(--hair);
  border-inline-start-width: var(--hair);
}
.frame::after {
  inset-block-end: calc(var(--frame-gap, 14px) * -1);
  inset-inline-end: calc(var(--frame-gap, 14px) * -1);
  border-block-end-width: var(--hair);
  border-inline-end-width: var(--hair);
}
.frame--gold { --frame-color: var(--gold); }
.frame--bone  { --frame-color: oklch(1 0 0 / 0.35); }

/* --------------------------------------------------------------------------
   The pointer. The profile marks each of its four working principles with a
   solid triangle in one of four colours, and uses the same shape as the mark
   beside "Our Services". It is the deck's loudest device, so it becomes the
   site's section-coding system: gold, crimson, teal, blue, in that order.

   None of the four clears 3:1 on the espresso ground, so a pointer is always
   a shape and never carries text.
   -------------------------------------------------------------------------- */
.pointer {
  --pt: var(--gold);
  inline-size: var(--pt-size, 1.4rem);
  block-size: var(--pt-size, 1.4rem);
  flex: none;
  background: var(--pt);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform var(--d-3) var(--ease), background var(--d-2) var(--ease);
}
:where([dir="rtl"]) .pointer { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.pointer--gold    { --pt: var(--gold); }
.pointer--crimson { --pt: var(--crimson); }
.pointer--teal    { --pt: var(--teal); }
.pointer--blue    { --pt: var(--blue); }
.pointer--lg { --pt-size: clamp(2rem, 4vw, 3.4rem); }

/* --------------------------------------------------------------------------
   Scrim panel. Full-bleed photograph, translucent espresso card floated on
   top. This is how nearly every page of the profile is composed.
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}
.scene__media { position: absolute; inset: 0; z-index: -2; }
.scene__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
}
.scene__wash {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    oklch(0.315 0.020 28 / 0.82), oklch(0.255 0.016 18 / 0.9));
}
.panel {
  background: var(--scrim);
  backdrop-filter: blur(2px);
  padding: clamp(1.2rem, 3vw, 2.4rem);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.panel--soft { background: var(--scrim-soft); }
.panel--pointer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Duo heading. The deck always sets the Arabic name of a section with the
   English beneath it. Both stay in both language modes: the Arabic is the
   identity, the English is the function.
   -------------------------------------------------------------------------- */
.duo { display: grid; gap: 0.34em; margin-block-end: var(--s-6); }
.duo__ar {
  font-family: var(--f-ar-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.24;
  color: var(--bone);
  letter-spacing: 0;
}
.duo__en {
  font-family: var(--f-en-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.85rem + 1vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--rose-ink);
  text-transform: uppercase;
  /* A Latin run inside an RTL paragraph: without isolation, trailing
     punctuation ("WHEN DO WE MEET?") jumps to the wrong end. Lay it out LTR,
     then align it back to the page's own reading edge. */
  direction: ltr;
  unicode-bidi: isolate;
}
:where([dir="rtl"]) .duo__en { text-align: right; }
:where([dir="rtl"]) .duo--center .duo__en,
.duo--center .duo__en { text-align: center; }
.duo--lg .duo__ar { font-size: var(--t-3xl); }
.duo--lg .duo__en { font-size: clamp(1.3rem, 0.9rem + 1.9vw, 2.6rem); }
.on-paper .duo__ar { color: var(--paper-ink); }
.on-paper .duo__en { color: var(--rose-paper); }
.on-wine .duo__en, .on-deep .duo__en { color: var(--blush); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--rose);
  --btn-ink: var(--ink-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.85em 1.6em;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: var(--hair) solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease),
              border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease),
              opacity var(--d-2) var(--ease);
}
html[lang="en"] .btn { text-transform: uppercase; letter-spacing: 0.045em; }

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rose-lift);
  transform: scaleX(0);
  transform-origin: var(--btn-origin, left);
  transition: transform var(--d-3) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
:where([dir="rtl"]) .btn { --btn-origin: right; }

.btn:hover { box-shadow: 0 8px 24px -10px oklch(0.680 0.088 19 / 0.55); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--bone);
  border-color: var(--ink-line);
}
.btn--ghost::before { background: var(--bone); }
.btn--ghost:hover { color: var(--ink); border-color: var(--bone); box-shadow: none; }

.btn--bone { --btn-bg: var(--bone); --btn-ink: var(--ink-deep); }
.btn--bone::before { background: var(--rose-lift); }

.btn--lg { padding: 1.05em 2em; font-size: var(--t-base); }
.btn--full { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]::before { display: none; }

.btn__arrow {
  transition: transform var(--d-2) var(--ease);
  flex: none;
}
:where([dir="rtl"]) .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(3px); }
:where([dir="rtl"]) .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* Quiet text link with a rule that grows from the reading edge. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  color: var(--bone);
  text-decoration: none;
  padding-block-end: 3px;
  background-image: linear-gradient(var(--rose), var(--rose));
  background-repeat: no-repeat;
  background-position: var(--tlink-pos, 0 100%);
  background-size: 100% 1px;
  transition: background-size var(--d-3) var(--ease), color var(--d-2) var(--ease);
}
:where([dir="rtl"]) .tlink { --tlink-pos: 100% 100%; }
.tlink:hover { color: var(--rose-lift); background-size: 30% 1px; }
.on-paper .tlink { color: var(--paper-ink); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: oklch(0.315 0.020 28 / 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: var(--hair) solid transparent;
  transition: background var(--d-3) var(--ease), border-color var(--d-3) var(--ease);
}
.site-head.is-stuck {
  background: oklch(0.315 0.020 28 / 0.95);
  border-block-end-color: var(--ink-line);
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-block-size: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex: none;
}
.brand__mark {
  inline-size: clamp(74px, 8vw, 104px);
  aspect-ratio: 880 / 571;
  background: var(--bone);
  -webkit-mask: url("../assets/logos/wimy-mark.png") no-repeat center / contain;
  mask: url("../assets/logos/wimy-mark.png") no-repeat center / contain;
  transition: background var(--d-2) var(--ease);
}
.brand:hover .brand__mark { background: var(--rose-lift); }
.brand__sub {
  font-family: var(--f-en-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
  line-height: 1.2;
  max-inline-size: 7ch;
}

.site-nav { margin-inline-start: auto; }
.site-nav__list { display: flex; gap: clamp(0.6rem, 1.6vw, 1.9rem); align-items: center; }
.site-nav__link {
  position: relative;
  text-decoration: none;
  color: var(--bone-2);
  font-size: var(--t-sm);
  font-weight: 500;
  padding-block: 0.4rem;
  transition: color var(--d-2) var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: var(--btn-origin, left);
  transition: transform var(--d-2) var(--ease);
}
:where([dir="rtl"]) .site-nav__link::after { transform-origin: right; }
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--bone); }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.head-tools { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.lang-toggle {
  background: none;
  border: var(--hair) solid var(--ink-line);
  color: var(--bone-2);
  border-radius: var(--r-2);
  padding: 0.5rem 0.7rem;
  font-family: var(--f-en);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease),
              background var(--d-2) var(--ease);
}
.lang-toggle:hover { color: var(--bone); border-color: var(--bone-3); background: var(--ink-raise); }

.burger {
  display: none;
  inline-size: 2.6rem; block-size: 2.6rem;
  background: none;
  border: var(--hair) solid var(--ink-line);
  border-radius: var(--r-2);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger__bars { position: relative; inline-size: 17px; block-size: 11px; }
.burger__bars i {
  position: absolute; inset-inline: 0; block-size: 1.5px;
  background: var(--bone); border-radius: 2px;
  transition: transform var(--d-2) var(--ease), opacity var(--d-1) var(--ease);
}
.burger__bars i:nth-child(1) { inset-block-start: 0; }
.burger__bars i:nth-child(2) { inset-block-start: 5px; }
.burger__bars i:nth-child(3) { inset-block-start: 10px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Reading progress, hairline under the header. */
.progress-rail {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  block-size: 1.5px;
  inline-size: 100%;
  background: var(--rose);
  transform: scaleX(var(--p, 0));
  transform-origin: var(--btn-origin, left);
  pointer-events: none;
}
:where([dir="rtl"]) .progress-rail { transform-origin: right; }

@media (max-width: 62rem) {
  .burger { display: grid; }
  .site-nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    z-index: var(--z-drawer);
    background: var(--ink);
    border-block-end: var(--hair) solid var(--ink-line);
    padding: var(--s-5) var(--gutter) var(--s-7);
    margin: 0;
    display: grid;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--d-3) var(--ease);
  }
  .site-nav[data-open="true"] { clip-path: inset(0 0 0 0); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link {
    padding-block: var(--s-4);
    font-size: var(--t-md);
    border-block-end: var(--hair) solid var(--ink-line);
  }
  .site-nav__link::after { display: none; }
  .head-tools .btn { display: none; }
}

/* --------------------------------------------------------------------------
   Marquee — partner logos
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  inline-size: max-content;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee img {
  block-size: clamp(26px, 3.4vw, 42px);
  inline-size: auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity var(--d-2) var(--ease);
}
.marquee img:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; inline-size: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--hair);
  background: var(--ink-line);
  border-block: var(--hair) solid var(--ink-line);
}
.stat {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem);
  display: grid;
  align-content: start;
  gap: var(--s-2);
}
.stat__n {
  font-family: var(--f-en-display);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
  font-weight: 800;
  line-height: 0.86;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* Keep "500+" reading as number-then-plus; bidi would otherwise move the sign
   to the left of the digits inside an RTL paragraph. The isolate is on the
   inner run only, so the card itself still aligns with the page direction. */
.stat__num {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
}
.stat__n em { font-style: normal; color: var(--rose-ink); }
/* Small qualifier that replaces the "+" sign — "no fewer than" / "the equivalent of". */
.stat__qual {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--rose-ink);
  margin-block-end: 0.35em;
  white-space: nowrap;
}
html[lang="en"] .stat__qual { text-transform: uppercase; letter-spacing: 0.04em; }
.stat__label { font-size: var(--t-sm); color: var(--bone-3); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Figures — image with an offset plinth behind it
   -------------------------------------------------------------------------- */
.plinth { position: relative; }
.plinth::before {
  content: "";
  position: absolute;
  inset-block: 8% -1.6rem;
  inset-inline-start: -1.6rem;
  inline-size: 46%;
  background: var(--rose-deep);
  z-index: -1;
}
.plinth > img, .plinth > picture > img { position: relative; }

.shot {
  /* These are <span>s so they can live inside a <button>. Without an explicit
     block display they stay inline and aspect-ratio is ignored, which leaves
     every card image a different height. */
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ink-raise);
}
.shot img, .shot video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--d-4) var(--ease), filter var(--d-3) var(--ease);
}
.shot--tall  { aspect-ratio: 3 / 4; }
.shot--wide  { aspect-ratio: 16 / 10; }
.shot--sq    { aspect-ratio: 1; }
.shot--pano  { aspect-ratio: 21 / 9; }

/* --------------------------------------------------------------------------
   Tags & chips
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--f-en);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bone-3);
  border: var(--hair) solid var(--ink-line);
  border-radius: 999px;
  padding: 0.35em 0.85em;
  white-space: nowrap;
}
.tag--rose { color: var(--rose-lift); border-color: oklch(0.680 0.088 19 / 0.5); }
.tag--live { color: var(--gold); border-color: oklch(0.742 0.105 72 / 0.45); }
.tag__dot {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.filter {
  background: none;
  border: var(--hair) solid var(--ink-line);
  color: var(--bone-3);
  border-radius: 999px;
  padding: 0.5em 1.05em;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease),
              background var(--d-2) var(--ease);
}
.filter:hover { color: var(--bone); border-color: var(--bone-3); }
.filter[aria-pressed="true"] {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--ink-deep);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); }
.field__label {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--bone);
}
.field__label .req { color: var(--rose-ink); }
.field__hint { font-size: var(--t-xs); color: var(--bone-3); }

.input, .textarea, .select {
  inline-size: 100%;
  background: var(--ink-raise);
  border: var(--hair) solid var(--ink-line);
  border-radius: var(--r-2);
  padding: 0.85rem 1rem;
  color: var(--bone);
  font-size: var(--t-base);
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.textarea { min-block-size: 7rem; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--bone-3); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-high); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--rose);
  background: var(--ink-high);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--stop); }
.field__error { font-size: var(--t-xs); color: oklch(0.76 0.15 28); min-block-size: 1em; }

/* Selectable option built on a real radio/checkbox. */
.choice {
  position: relative;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border: var(--hair) solid var(--ink-line);
  border-radius: var(--r-2);
  background: var(--ink-raise);
  cursor: pointer;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.choice:hover { border-color: var(--ink-high); background: var(--ink-high); }
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice__box {
  flex: none;
  inline-size: 1.15rem; block-size: 1.15rem;
  margin-block-start: 0.2rem;
  border: var(--hair) solid var(--bone-3);
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.choice input[type="radio"] ~ .choice__box { border-radius: 50%; }
.choice__box::after {
  content: "";
  inline-size: 0.55rem; block-size: 0.55rem;
  background: var(--ink-deep);
  border-radius: inherit;
  transform: scale(0);
  transition: transform var(--d-2) var(--ease);
}
.choice input:checked ~ .choice__box { background: var(--rose); border-color: var(--rose); }
.choice input:checked ~ .choice__box::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--rose); background: oklch(0.680 0.088 19 / 0.20); }
.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.choice__body { display: grid; gap: 0.2rem; }
.choice__title { font-weight: 700; color: var(--bone); font-size: var(--t-base); }
.choice__note { font-size: var(--t-sm); color: var(--bone-3); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  border: 0;
  padding: 0;
  max-inline-size: min(100vw - 2rem, 78rem);
  max-block-size: min(100dvh - 2rem, 56rem);
  inline-size: 100%;
  background: var(--ink-raise);
  color: var(--bone-2);
  overflow: hidden;
  border-radius: var(--r-3);
  box-shadow: var(--lift-3);
}
.lightbox::backdrop {
  background: oklch(0.20 0.014 22 / 0.9);
  backdrop-filter: blur(6px);
}
.lightbox[open] { animation: lbIn var(--d-3) var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.lightbox__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  max-block-size: min(100dvh - 2rem, 56rem);
}
.lightbox__media { background: var(--ink); position: relative; min-block-size: 0; }
.lightbox__media > [data-lb-media] { block-size: 100%; }
.lightbox__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  max-block-size: min(100dvh - 2rem, 56rem);
}
.lightbox__side {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: var(--s-3);
}
.lightbox__side > * { margin: 0; }
/* The two scripts of the title belong together; everything else gets the
   column's own gap. */
.lb-title { display: grid; gap: 0.45em; }
.lightbox__side .hairline { margin-block: var(--s-2); }
.lightbox__close {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: var(--z-raise);
  inline-size: 2.4rem; block-size: 2.4rem;
  display: grid; place-items: center;
  background: oklch(0.255 0.016 18 / 0.78);
  border: var(--hair) solid var(--ink-line);
  border-radius: 50%;
  color: var(--bone);
  cursor: pointer;
  transition: background var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.lightbox__close:hover { background: var(--rose); transform: rotate(90deg); }
.lightbox__nav { display: flex; gap: var(--s-2); }
.lightbox__thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.lightbox__thumb {
  inline-size: 62px; block-size: 44px;
  padding: 0; border: var(--hair) solid var(--ink-line);
  border-radius: var(--r-1); overflow: hidden; cursor: pointer;
  background: none;
  opacity: 0.55;
  transition: opacity var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.lightbox__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lightbox__thumb[aria-current="true"] { opacity: 1; border-color: var(--rose); }
.lightbox__thumb:hover { opacity: 1; }

@media (max-width: 54rem) {
  .lightbox__grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .lightbox__media img { max-block-size: 44dvh; }
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  inset-block-end: var(--s-5);
  inset-inline: var(--gutter) auto;
  z-index: var(--z-toast);
  max-inline-size: 26rem;
  background: var(--ink-high);
  border: var(--hair) solid var(--ink-line);
  border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--lift-2);
  font-size: var(--t-sm);
  color: var(--bone);
  animation: toastIn var(--d-3) var(--ease);
}
.toast--ok   { border-color: oklch(0.720 0.130 155 / 0.55); }
.toast--stop { border-color: oklch(0.640 0.190 25 / 0.6); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--ink-deep);
  color: var(--bone-2);
  padding-block: var(--section-t) var(--s-6);
  position: relative;
  overflow: hidden;
}
.site-foot::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dots);
  background-size: var(--dots-size);
  opacity: 0.8;
  pointer-events: none;
}
.site-foot > * { position: relative; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--s-7) var(--s-6);
  align-items: start;
}
.foot-title {
  font-family: var(--f-en-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.82 0.05 12);
  margin-block-end: var(--s-4);
}
.foot-list { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.foot-list a { text-decoration: none; transition: color var(--d-2) var(--ease); }
.foot-list a:hover { color: var(--bone); }
.foot-bottom {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid oklch(1 0 0 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--bone-2);
}
.foot-mark {
  inline-size: 132px;
  aspect-ratio: 880 / 571;
  background: var(--bone);
  -webkit-mask: url("../assets/logos/wimy-mark.png") no-repeat center / contain;
  mask: url("../assets/logos/wimy-mark.png") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Floating booking affordance — the site's one persistent CTA
   -------------------------------------------------------------------------- */
.dock {
  position: fixed;
  inset-block-end: var(--s-5);
  inset-inline-end: var(--gutter);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.7rem 0.75rem 0.7rem 1.15rem;
  background: oklch(0.368 0.021 23 / 0.92);
  backdrop-filter: blur(12px);
  border: var(--hair) solid var(--ink-line);
  border-radius: 999px;
  box-shadow: var(--lift-2);
  text-decoration: none;
  color: var(--bone);
  opacity: 0;
  transform: translateY(120%);
  transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease),
              border-color var(--d-2) var(--ease);
}
.dock.is-on { opacity: 1; transform: none; }
.dock:hover { border-color: var(--rose); }
.dock__txt { display: grid; gap: 1px; line-height: 1.25; }
.dock__k { font-size: var(--t-sm); font-weight: 700; }
.dock__v { font-size: var(--t-xs); color: var(--bone-3); font-variant-numeric: tabular-nums; }
.dock__go {
  inline-size: 2.3rem; block-size: 2.3rem;
  display: grid; place-items: center;
  background: var(--rose); color: var(--ink-deep);
  border-radius: 50%;
  flex: none;
  transition: background var(--d-2) var(--ease);
}
.dock:hover .dock__go { background: var(--rose-lift); }
:where([dir="rtl"]) .dock__go svg { transform: scaleX(-1); }
@media (max-width: 34rem) {
  .dock { inset-inline: var(--gutter); justify-content: space-between; }
}

/* Floating WhatsApp affordance — a labelled pill so the contact is unmissable,
   mirroring .dock on the opposite reading edge. */
.wa-float {
  position: fixed;
  inset-block-end: var(--s-5);
  inset-inline-start: var(--gutter);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: 0.42rem;
  padding-inline: 0.42rem 1.05rem;
  background: var(--rose);
  color: var(--ink-deep);
  border-radius: 999px;
  box-shadow: var(--lift-2);
  text-decoration: none;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1;
  opacity: 0;
  transform: translateY(120%);
  transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease),
              background var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.wa-float.is-on { opacity: 1; transform: none; }
.wa-float:hover { background: var(--rose-lift); box-shadow: 0 10px 28px -10px oklch(0.680 0.088 19 / 0.6); }
.wa-float__ico {
  flex: none;
  position: relative;
  inline-size: 2.15rem; block-size: 2.15rem;
  display: grid; place-items: center;
  background: var(--bone);
  color: var(--rose-deep);
  border-radius: 50%;
}
.wa-float__label { white-space: nowrap; }
/* A ring breathes outward from the icon while the button rests, drawing the eye
   without demanding it. Killed under prefers-reduced-motion by base.css. */
.wa-float__ico::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--bone);
  opacity: 0.6;
  animation: waPulse 2.8s var(--ease) infinite;
  pointer-events: none;
}
.wa-float:hover .wa-float__ico::before { animation-play-state: paused; opacity: 0; }
@keyframes waPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
/* On phones the booking dock spans the foot of the screen, so lift the pill
   clear of it. */
@media (max-width: 34rem) {
  .wa-float { inset-block-end: calc(var(--s-5) + 4.2rem); }
}

/* ==========================================================================
   NAMECARD — the bold, self-contained contact block that closes every page.
   Mirrors the profile's own contact slide: espresso wall, oversized mark,
   contact lines with pointer accents, socials. One striking card, not a
   four-column footer.
   ========================================================================== */
.namecard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 85% -10%, oklch(0.680 0.088 19 / 0.28), transparent 60%),
    radial-gradient(110% 130% at -5% 110%, oklch(0.742 0.105 72 / 0.16), transparent 55%),
    var(--ink-deep);
  border-radius: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  margin: clamp(2rem, 5vw, 5rem) auto 0;
  width: min(100% - var(--gutter) * 2, var(--shell-wide));
  box-shadow: var(--lift-3);
}
/* Oversized wordmark ghosted into the corner. */
.namecard::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -14%;
  inset-inline-end: -6%;
  inline-size: clamp(16rem, 34vw, 34rem);
  aspect-ratio: 880 / 571;
  background: oklch(0.680 0.088 19 / 0.12);
  -webkit-mask: url("../assets/logos/wimy-mark.png") no-repeat center / contain;
  mask: url("../assets/logos/wimy-mark.png") no-repeat center / contain;
  pointer-events: none;
}
.namecard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 54rem) { .namecard__grid { grid-template-columns: 1fr; } }

.namecard__lead { display: grid; gap: var(--s-5); align-content: start; }
.namecard__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-en-display);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose-ink);
}
.namecard__eyebrow .pointer { --pt-size: 0.85rem; }
.namecard__title {
  font-family: var(--f-ar-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem);
  line-height: 1.2;
  color: var(--bone);
}
html[lang="en"] .namecard__title { font-family: var(--f-en-display); text-transform: uppercase; letter-spacing: -0.01em; }
.namecard__sub { max-inline-size: 42ch; color: var(--blush); font-size: var(--t-md); }
.namecard__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); }

/* contact lines */
.namecard__lines { display: grid; gap: var(--s-3); }
.nc-line {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border: var(--hair) solid oklch(1 0 0 / 0.12);
  border-radius: var(--r-3);
  background: oklch(1 0 0 / 0.03);
  text-decoration: none; color: var(--bone);
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease),
              transform var(--d-3) var(--ease);
}
a.nc-line:hover { border-color: var(--rose); background: oklch(0.680 0.088 19 / 0.12); transform: translateY(-2px); }
.nc-line__ico {
  flex: none; inline-size: 2.6rem; block-size: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: oklch(0.680 0.088 19 / 0.16);
  color: var(--rose-ink);
}
.nc-line__txt { display: grid; gap: 1px; }
.nc-line__k { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-3); font-family: var(--f-en); }
.nc-line__v { font-size: var(--t-base); font-weight: 700; color: var(--bone); }

.namecard__socials { display: flex; gap: var(--s-3); margin-block-start: var(--s-2); }
.nc-social {
  inline-size: 2.8rem; block-size: 2.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: var(--hair) solid oklch(1 0 0 / 0.16);
  color: var(--bone-2);
  transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease),
              background var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.nc-social:hover { color: var(--ink-deep); background: var(--rose); border-color: var(--rose); transform: translateY(-3px); }

/* slim closing strip under the card */
.foot-strip {
  width: min(100% - var(--gutter) * 2, var(--shell-wide));
  margin: var(--s-6) auto 0;
  padding-block: var(--s-5) var(--s-6);
  border-block-start: var(--hair) solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  font-size: var(--t-xs); color: var(--bone-3);
}
.foot-strip nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.foot-strip a { text-decoration: none; transition: color var(--d-2) var(--ease); }
.foot-strip a:hover { color: var(--bone); }

/* footer wrapper spacing + the header WhatsApp button */
.namecard-wrap { padding-block: var(--section-t) var(--s-7); background: var(--ink); }
.head-wa { gap: var(--s-2); }
.head-wa svg { flex: none; }
@media (max-width: 62rem) { .head-wa { display: none; } }

/* ==========================================================================
   MOTION — richer entrances. Reveals travel a little further and can be
   directional; headings get a clip-reveal; the hero settles on load.
   ========================================================================== */
.hero__media img { animation: heroKen 20s var(--ease) 0.1s both alternate infinite; }
@keyframes heroKen { from { transform: scale(1.06); } to { transform: scale(1.14) translateY(-2%); } }

/* directional reveal variants, opted into per element */
.js-reveal [data-reveal="up"]   { transform: translate3d(0, 26px, 0); }
.js-reveal [data-reveal="left"] { transform: translate3d(28px, 0, 0); }
.js-reveal [data-reveal="right"]{ transform: translate3d(-28px, 0, 0); }
.js-reveal [data-reveal="zoom"] { transform: scale(0.94); }
.js-reveal [data-reveal].is-in  { transform: none; }

/* the duo heading wipes its rose underline in on reveal */
.js-reveal .duo { position: relative; }

/* pointer triangles pulse once when their panel first appears */
.js-reveal [data-reveal] .pointer { transition: transform var(--d-4) var(--ease) 120ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
}