/* ==========================================================================
   Shell (morphing header) / Footer / Mobile menu / To-top / WhatsApp FAB

   One width governs the whole site. --shell-w is the header's resting
   width, and .container is pinned to the same number, so the header, every
   section and the footer share one edge-to-edge column — the symmetry the
   brief asks for is enforced by the token, not by matching values by hand.
   ========================================================================== */
:root {
  --shell-w: 1080px;          /* medium shell: brand + nav + language + CTA */
  --shell-w-compact: 640px;   /* narrow shell: brand + CTA only */
  --shell-h: 68px;
  /* The shell's own inner padding is what the logo starts after, so the
     content column is inset by exactly the same amount — that, and not a
     matching max-width, is what actually makes the page line up. */
  --shell-pad: 18px;
  --shell-gap: 14px;          /* distance from the viewport top when floating */
  --glass: rgba(255, 255, 255, .72);
  --ease-shell: cubic-bezier(.34, 1.26, .5, 1);
}
/* The same column for content and footer, inset to the shell's padding.
   theme.css's own .container sets a max-width and a gutter padding, and
   both have to be cleared here or the measured width is re-padded and
   nothing lines up with the header. --col-w is published so nothing else
   has to re-derive this expression. */
:root {
  --col-w: min(calc(var(--shell-w) - var(--shell-pad) * 2), calc(100% - (var(--gutter) + var(--shell-pad)) * 2));
}
.container {
  width: var(--col-w);
  max-width: none;
  padding-inline: 0;
  margin-inline: auto;
}

/* ---------- Reading progress rail ---------- */
.readbar {
  position: fixed; inset: 0 0 auto 0; z-index: 1002;
  height: 2px; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-pink);
  will-change: transform;
}

/* ---------- Morphing shell ---------- */
.shell-head {
  position: fixed; inset: var(--shell-gap) 0 auto 0; z-index: 1000;
  display: flex; justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.shell {
  pointer-events: auto;
  display: flex; align-items: center; gap: 18px;
  width: 100%; max-width: var(--shell-w); height: var(--shell-h);
  padding: 0 var(--shell-pad);
  border: 1px solid rgba(15, 54, 97, .09);
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
              0 18px 44px -26px rgba(15, 54, 97, .55);
  /* only max-width changes between the two states now */
  transition: max-width .5s var(--ease-shell), box-shadow .4s var(--ease);
}
/* State two: scrolling down. Everything but the brand and the CTA folds
   away and the shell narrows — width only. Height, padding and the logo
   all hold, so the bar shortens from the sides instead of shrinking. */
.shell.is-compact { max-width: var(--shell-w-compact); }
/* Hovering the shrunken bar brings it back. Scrolling down folds the nav
   away, but reaching for it should not require scrolling up first — the
   pointer arriving on the bar is intent enough. focus-within does the same
   for the keyboard, so tabbing into the header opens it too. */
.shell.is-compact:focus-within { max-width: var(--shell-w); }
@media (min-width: 681px) and (hover: hover) { .shell.is-compact:hover { max-width: var(--shell-w); } }
.shell.is-compact:focus-within .shell__links {
  max-width: 640px; gap: 22px; opacity: 1;
  transform: none; pointer-events: auto; overflow: visible;
}
@media (min-width: 681px) and (hover: hover) { .shell.is-compact:hover .shell__links {
  max-width: 640px; gap: 22px; opacity: 1;
  transform: none; pointer-events: auto; overflow: visible;
} }
.shell.is-compact:focus-within .langacc { max-width: 200px; opacity: 1; pointer-events: auto; }
@media (min-width: 681px) and (hover: hover) { .shell.is-compact:hover .langacc { max-width: 200px; opacity: 1; pointer-events: auto; } }

.shell__brand { flex: none; display: flex; align-items: center; }
.shell__brand img { width: auto; height: 34px; }

.shell__links {
  display: flex; align-items: center; gap: 22px;
  margin-inline: auto;
  max-width: 640px; overflow: visible;
  transition: max-width .45s var(--ease-shell), opacity .26s var(--ease), transform .3s var(--ease);
}
.shell.is-compact .shell__links {
  max-width: 0; gap: 0; opacity: 0; overflow: hidden;
  transform: translateY(-6px); pointer-events: none;
}
.shell__links > a, .shell__drop > button {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: .88rem; font-weight: 500; white-space: nowrap;
  padding: 6px 0;
  transition: color var(--dur) var(--ease);
}
.shell__drop > button svg { width: 9px; height: 9px; transition: transform var(--dur) var(--ease); }
/* the underline grows from the left, the same motion as the readbar */
.shell__links > a::after, .shell__drop > button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--grad-pink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--ease);
}
.shell__links > a[aria-current="page"] { color: var(--navy); }
@media (min-width: 681px) and (hover: hover) { .shell__links > a:hover, .shell__drop:hover > button { color: var(--navy); } }
.shell__links > a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 681px) and (hover: hover) { .shell__links > a:hover::after, .shell__drop:hover > button::after { transform: scaleX(1); } }
@media (min-width: 681px) and (hover: hover) { .shell__drop:hover > button svg { transform: rotate(180deg); } }

.shell__drop { position: relative; }
.shell__panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  translate: -50% 0;
  display: grid; gap: 2px; min-width: 258px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
  transform-origin: 50% 0;
  transition: opacity .24s var(--ease), transform .28s var(--ease-pop), visibility .24s;
}
.shell__drop:focus-within .shell__panel {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
@media (min-width: 681px) and (hover: hover) { .shell__drop:hover .shell__panel {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
} }
/* a hover bridge, so the pointer can cross the gap without the panel closing */
.shell__drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.shell__panel a {
  padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--muted); font-size: .85rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .shell__panel a:hover { background: var(--pink-50); color: var(--navy); transform: translateX(5px); } }

.shell__actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }

/* ---------- Language switcher: a one-slot accordion ---------- */
.langacc { position: relative; flex: none; }
.shell.is-compact .langacc { max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.langacc__cur {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: rgba(15, 54, 97, .06);
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; color: var(--navy);
  transition: background var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .langacc__cur:hover { background: rgba(15, 54, 97, .11); } }
.langacc__cur svg { width: 9px; height: 9px; transition: transform var(--dur) var(--ease); }
.langacc__cur[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The list unrolls from zero height rather than appearing. It holds ten
   languages now, so it is wider than the button that opens it and hangs
   off that button's right edge rather than stretching it. */
.langacc__list {
  position: absolute; top: calc(100% + 7px); right: 0; left: auto;
  width: 186px;
  display: grid; grid-template-rows: 0fr;
  border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: grid-template-rows .34s var(--ease), opacity .24s var(--ease);
}
.langacc.is-open .langacc__list { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
/* the 0fr row needs a child that can collapse to nothing, so the scroller
   sits inside it rather than being the row itself */
.langacc__scroll {
  overflow: hidden; min-height: 0;
  max-height: min(420px, 60vh);
  border-radius: var(--r-md);
}
.langacc.is-open .langacc__scroll { overflow-y: auto; padding: 6px; }
.langacc__list a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: .78rem; color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .langacc__list a:hover { color: var(--navy); background: var(--pink-50); } }
.langacc__code {
  flex: none; width: 26px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--navy);
}
.langacc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langacc__list a[dir="rtl"] { direction: ltr; }

/* ---------- Appointment button ---------- */
/* Default: the pink wake wipes across and the pip stays a pip. The paper
   plane is reserved for the one button where "send" is literally what it
   does — the contact form's submit, at the bottom of this block. Flying a
   plane out of every Randevu button on the site made a send gesture out of
   a navigation link. */
.btn-appt {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 18px 0 30px;
  border-radius: var(--r-pill);
  background: var(--navy); color: var(--white);
  font-size: .84rem; font-weight: 700; white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-appt::before {
  /* inset -1px, not 0. Flush to the edge, the wash's own antialiased rim
     let a hairline of the navy underneath show along the pill's curved
     ends on hover — most visible on the light card in the FAQ aside. One
     pixel of overhang, clipped by the button's overflow, removes it. */
  content: ""; position: absolute; inset: -1px; z-index: 0;
  border-radius: inherit;
  background: var(--grad-pink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.6, 0, .3, 1);
}
.btn-appt:focus-visible::before { transform: scaleX(1); }
@media (min-width: 681px) and (hover: hover) { .btn-appt:hover::before { transform: scaleX(1); } }

.btn-appt__dot {
  position: absolute; left: 14px; top: 50%; z-index: 3;
  width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%; background: var(--grad-pink);
  transition: transform .34s var(--ease-pop), background .3s var(--ease);
}
.btn-appt:focus-visible .btn-appt__dot { transform: scale(1.35); background: var(--white); }
@media (min-width: 681px) and (hover: hover) { .btn-appt:hover .btn-appt__dot { transform: scale(1.35); background: var(--white); } }

.btn-appt__in { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; }
.btn-appt:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-pink); }
@media (min-width: 681px) and (hover: hover) { .btn-appt:hover { transform: translateY(-2px); box-shadow: var(--shadow-pink); } }
.btn-appt svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .btn-appt:hover svg { transform: translateX(4px); } }
.btn-appt--block { width: 100%; justify-content: center; height: 48px; }

/* ---- the send button, and only the send button ----
   Three beats that must not overlap, or the first is invisible: the pip
   becomes a paper plane IN PLACE (~340ms, no movement), then the plane
   takes off, then the pink wake follows it. The flight animates `left`,
   not a transform, because a percentage `left` resolves against the button
   — the one way a single rule covers any button width. */
.ilet__form .btn-appt__dot {
  width: 17px; height: 15px; margin-top: -7.5px;
  border-radius: 0; background: none;
  transition: left .72s cubic-bezier(.36, -.16, .2, 1) .34s;
}
.ilet__form .btn-appt__dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--grad-pink);
  transition: opacity .2s var(--ease) .08s, transform .3s var(--ease);
}
.ilet__form .btn-appt__dot::after {
  content: ""; position: absolute; inset: 0;
  background: var(--pink-light);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  opacity: 0; transform: scale(.18) rotate(-42deg);
  transition: opacity .24s var(--ease) .1s, transform .42s var(--ease-pop) .1s;
}
.ilet__form .btn-appt:focus-visible .btn-appt__dot {
  left: calc(100% + 18px); transform: none; background: none;
}
@media (min-width: 681px) and (hover: hover) { .ilet__form .btn-appt:hover .btn-appt__dot {
  left: calc(100% + 18px); transform: none; background: none;
} }
.ilet__form .btn-appt:focus-visible .btn-appt__dot::before { opacity: 0; transform: scale(.25); }
@media (min-width: 681px) and (hover: hover) { .ilet__form .btn-appt:hover .btn-appt__dot::before { opacity: 0; transform: scale(.25); } }
.ilet__form .btn-appt:focus-visible .btn-appt__dot::after { opacity: 1; transform: scale(1) rotate(0deg); }
@media (min-width: 681px) and (hover: hover) { .ilet__form .btn-appt:hover .btn-appt__dot::after { opacity: 1; transform: scale(1) rotate(0deg); } }
.ilet__form .btn-appt::before { transition: transform .62s cubic-bezier(.6, 0, .3, 1); }
.ilet__form .btn-appt:focus-visible::before { transition-delay: .46s; }
@media (min-width: 681px) and (hover: hover) { .ilet__form .btn-appt:hover::before { transition-delay: .46s; } }

@media (prefers-reduced-motion: reduce) {
  .btn-appt__dot { display: none; }
  .btn-appt::before, .btn-appt, .btn-appt svg { transition: none; }
}

/* ---------- Burger (mobile) ---------- */
.shell__burger {
  display: none; position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(15, 54, 97, .06);
}
.shell__burger span {
  position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px;
  background: var(--navy);
  transition: transform .34s var(--ease-pop), opacity .2s var(--ease);
}
.shell__burger span:nth-child(1) { top: 16px; }
.shell__burger span:nth-child(2) { top: 22px; }
.shell__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.shell__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobilemenu {
  position: fixed; inset: 0 0 0 auto; z-index: 1001;
  width: min(360px, 88vw); padding: 96px 26px 26px;
  display: flex; flex-direction: column; gap: 22px;
  background: var(--white); box-shadow: var(--shadow-lg);
  transform: translateX(102%);
  transition: transform .48s var(--ease);
  overflow-y: auto;
}
.mobilemenu.is-open { transform: translateX(0); }
.mobilemenu__nav { display: flex; flex-direction: column; }
.mobilemenu__nav a {
  padding: 13px 0; border-bottom: 1px solid var(--line);
  color: var(--navy); font-weight: 500; font-size: .96rem;
  opacity: 0; transform: translateX(18px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color var(--dur) var(--ease);
}
.mobilemenu.is-open .mobilemenu__nav a { opacity: 1; transform: translateX(0); }
@media (min-width: 681px) and (hover: hover) { .mobilemenu__nav a:hover { color: var(--pink); } }
/* Language grid: twelve codes in two rows of six. Codes, not names, so a
   row fits a 308px drawer; the native name is the title. */
.mnu-langs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.mnu-langs__opt {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--navy);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mnu-langs__opt.is-current { background: var(--navy); border-color: var(--navy); color: var(--white); }
a.mnu-langs__opt:focus-visible { border-color: var(--pink); color: var(--pink); background: var(--pink-50); }
@media (min-width: 681px) and (hover: hover) { a.mnu-langs__opt:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-50); } }
.mobilemenu__backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11, 18, 32, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s;
}
.mobilemenu__backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------- Footer ---------- */
.shell-foot { background: var(--grad-navy); color: rgba(255, 255, 255, .72); }
.shell-foot__inner {
  width: min(calc(var(--shell-w) - var(--shell-pad) * 2), calc(100% - (var(--gutter) + var(--shell-pad)) * 2));
  margin-inline: auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(26px, 3.4vw, 44px);
  padding: clamp(44px, 6vw, 76px) 0 clamp(32px, 4vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* The supplied footer artwork is already the light-on-dark variant with
   its pink accent intact, so it needs no filter and no overlay. */
.foot-brand__logo img { width: auto; height: 40px; }
.foot-brand p { margin: 16px 0 20px; max-width: 34ch; font-size: .88rem; line-height: 1.7; color: rgba(255, 255, 255, .6); }
.foot-social { display: flex; gap: 9px; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .foot-social a:hover { background: var(--pink); transform: translateY(-3px); } }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col__head { color: var(--white); font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.foot-col__head--sp { margin-top: 18px; }
.foot-col a {
  font-size: .87rem; line-height: 1.5;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .foot-col a:hover { color: var(--pink); transform: translateX(4px); } }
.shell-foot__bottom {
  width: min(calc(var(--shell-w) - var(--shell-pad) * 2), calc(100% - (var(--gutter) + var(--shell-pad)) * 2));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-block: 20px; font-size: .82rem;
}
.shell-foot__bottom b { color: var(--pink); }

/* ---------- To-top ----------
   An escalator, not a ring: a belt of chevrons rides upward behind a mask
   forever, reading progress fills the capsule from the bottom, and the
   label slides out on hover. */
.totop {
  position: fixed; right: clamp(16px, 2.4vw, 30px); bottom: clamp(18px, 3vw, 30px); z-index: 900;
  display: flex; align-items: center; gap: 0;
  width: 52px; height: 52px; padding: 0;
  border-radius: var(--r-pill);
  background: var(--navy); color: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden; isolation: isolate;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .38s var(--ease), transform .42s var(--ease-pop), visibility .38s,
              width .42s var(--ease), box-shadow var(--dur) var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.totop__fill {
  position: absolute; inset: 0; z-index: 0;
  background: var(--grad-pink);
  /* scaled, not resized: this is written on every scroll frame, so it has
     to stay on the compositor instead of forcing layout each time */
  transform: scaleY(var(--totop-p, 0));
  transform-origin: 50% 100%;
}
/* The belt keeps the collapsed button's full width, so at rest the
   chevrons sit dead centre in the circle; when the capsule grows, the
   label takes the extra room and the belt stays put. */
.totop__belt {
  position: relative; z-index: 1; flex: none;
  width: 52px; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  animation: belt 1.9s linear infinite;
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.totop__belt svg { width: 17px; height: 17px; flex: none; margin-top: 6px; opacity: .55; }
.totop__belt svg:nth-child(2) { opacity: .8; }
.totop__belt svg:nth-child(3) { opacity: 1; }
@keyframes belt { from { transform: translateY(0); } to { transform: translateY(-23px); } }
.totop__label {
  position: relative; z-index: 1;
  font-size: .76rem; font-weight: 700; white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width .42s var(--ease), opacity .3s var(--ease), padding .42s var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .totop:hover { width: 142px; box-shadow: var(--shadow-lg); } }
@media (min-width: 681px) and (hover: hover) { .totop:hover .totop__label { max-width: 90px; opacity: 1; padding-right: 18px; } }
@media (min-width: 681px) and (hover: hover) { .totop:hover .totop__belt { animation-duration: .85s; } }

/* ---------- WhatsApp FAB ---------- */
.wa-fab {
  position: fixed; left: clamp(16px, 2.4vw, 30px); bottom: clamp(18px, 3vw, 30px); z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: var(--white);
  box-shadow: 0 14px 30px -12px rgba(37, 211, 102, .8);
  transition: transform var(--dur) var(--ease-pop), box-shadow var(--dur) var(--ease);
}
.wa-fab svg { width: 27px; height: 27px; }
.wa-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366;
  animation: wa-pulse 2.6s var(--ease) infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (min-width: 681px) and (hover: hover) { .wa-fab:hover { transform: scale(1.08) rotate(-6deg); } }

/* ---------- Lightbox ---------- */
.lbox {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(11, 18, 32, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lbox[hidden] { display: none; }
.lbox.is-on { opacity: 1; }
.lbox__stage {
  max-width: min(1000px, 100%); max-height: 100%;
  transform: scale(.94); opacity: 0;
  transition: transform .42s var(--ease-pop), opacity .3s var(--ease);
}
.lbox.is-on .lbox__stage { transform: scale(1); opacity: 1; }
.lbox__stage img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  background: var(--white);
}
.lbox__stage iframe {
  width: min(960px, 86vw); aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.lbox__close {
  position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--white);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lbox__close svg { width: 20px; height: 20px; }
@media (min-width: 681px) and (hover: hover) { .lbox__close:hover { background: var(--pink); transform: rotate(90deg); } }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: 12px 18px; background: var(--navy); color: var(--white); border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Responsive ---------- */
/* Wide monitors: the column grows with the screen instead of leaving the
   site as a 1080px strip in the middle. The reading measure is capped
   separately, so wider never means longer lines. */
@media (min-width: 1500px) { :root { --shell-w: 1240px; } }
@media (min-width: 1750px) { :root { --shell-w: 1380px; } }
@media (min-width: 2100px) { :root { --shell-w: 1520px; } }

/* The full bar needs ~1110px: from 1041 to ~1090 the Randevu button hung
   outside the pill (its right edge 37px past the shell at 1041). The bar
   collapses a little earlier than the footer does. Measured 2026-09-25. */
@media (max-width: 1109px) {
  .shell__links { display: none; }
  .shell__burger { display: block; }
}
@media (max-width: 1040px) {
  .shell-foot__inner { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }

  /* Tap targets from 1040px down, not only from 620px. Between the two the
     pointer is already a finger, and the logo link (34px), the language
     pill (34px), its ten rows (37px) and the social seals (38px) were all
     under the 44px one needs. */
  .shell__brand { min-height: 44px; }
  .langacc__cur { height: 44px; }
  .langacc__scroll a { min-height: 44px; }
  .foot-social a, .ilet__social a { width: 44px; height: 44px; }
  .foot-col a, .shell-foot a { padding-block: 11px; }
  .crumb a, .crumb span { padding-block: 11px; }
}
@media (max-width: 620px) {
  :root { --shell-h: 60px; --shell-pad: 12px; }
  .shell { gap: 10px; }
  /* The header CTA moves into the menu on a phone. Squeezed into the bar it
     had to drop its label and became an unlabelled pill; the mobile menu
     already carries a full-width, properly labelled Randevu button, so this
     one just gets out of the way and leaves the bar as brand + burger. */
  .shell__actions .btn-appt { display: none; }
  .langacc { display: none; }
  .shell-foot__inner { grid-template-columns: 1fr; }
  .shell-foot__bottom { justify-content: center; text-align: center; }

  /* Tap targets. The footer's link columns were 21px tall — half of what a
     finger needs — and the breadcrumbs the same. 44px is the guideline; the
     numbers below land every link between 40 and 44 without opening the
     footer up so far that it stops reading as a list. */
  .foot-col a, .shell-foot a { padding-block: 11px; }
  .crumb a, .crumb span { padding-block: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .shell, .shell__links, .shell__panel, .btn-appt, .btn-appt__dot,
  .totop, .totop__shaft, .totop__head, .wa-fab, .mobilemenu, .mobilemenu__nav a { transition: none; }
  .wa-fab::before { animation: none; }
}

/* ==========================================================================
   Splash
   Now on taner-usta-loader.svg — the "Prof. Dr. Taner Usta" lockup with the
   title, the same artwork the sister site's splash uses — instead of the
   header logo, whose band had to be cropped to hide its subtitle and which
   therefore showed the name without the title.

   Geometry measured off that file (viewBox 354.21 x 31.8, raster placed at
   x 161.208 w 192.922): the pink "e" spans 63.995%-69.525% of the width, so
   its centre is at 66.760% across and 62.736% down, and the artwork is
   8.978% as tall as it is wide. Every offset below derives from those
   numbers. The vertical figure is the measured ink centre of the glyph
   itself: it runs 29.2%-96.2% of the band, because a lowercase letter sits
   on the baseline rather than in the middle of the line.

   The orbit radius is .053 of the width against an "e" that is .0553 of it
   wide: the ring comes out very nearly twice the letter across, so it
   circles clearly outside the glyph. The previous radius was .058 of a
   narrower artwork, which put the stroke only 3px clear of the letter's
   sides — close enough that it read as spinning inside the "e".
   ========================================================================== */
.pageloader {
  position: fixed; inset: 0; z-index: 4000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  animation: pl-dismiss .6s var(--ease) 4.35s forwards;
}
.pageloader.is-skipped { display: none; }
.pageloader__stage {
  --pl-logo: 760px;                                        /* wordmark width */
  --pl-ex:    calc(var(--pl-logo) * .66760);               /* "e" centre from the left edge */
  --pl-shift: calc(var(--pl-logo) / 2 - var(--pl-ex));     /* puts the "e" on screen centre */
  --pl-left:  calc(var(--pl-ex) * -1);
  --pl-right: calc(var(--pl-logo) - var(--pl-ex));
  --pl-r:     calc(var(--pl-logo) * .053);                 /* orbit radius */
  --pl-th:    max(3px, calc(var(--pl-logo) * .0053));      /* stroke thickness */
  --pl-big: 4.2;
  position: relative;
  width: var(--pl-logo);
  height: calc(var(--pl-logo) * .08978);
  /* The measured centre of the "e" itself. The figure used before was the
     middle of the whole band, so the ring orbited a point above the letter
     and the letter sat low inside it. */
  transform-origin: var(--pl-ex) 62.736%;
  animation: pl-stage 4.35s linear forwards;
}
.pageloader__word, .pageloader__e { position: absolute; inset: 0; overflow: hidden; }
.pageloader__word img, .pageloader__e img { display: block; width: 100%; height: auto; }
.pageloader__word { clip-path: inset(0 100% 0 0); animation: pl-reveal 4.35s linear forwards; }
.pageloader__e { clip-path: inset(0 30.475% 0 63.995%); }
.pageloader__orbit {
  position: absolute; top: 62.736%; left: var(--pl-ex);
  width: 0; height: 0;
  animation: pl-orbit 4.35s linear forwards;
}
.pageloader__line {
  position: absolute;
  left: calc(var(--pl-r) * -2.6); top: calc(var(--pl-r) * -1.3);
  width: calc(var(--pl-r) * 5.2); height: calc(var(--pl-r) * 2.6);
  max-width: none; max-height: none;
  overflow: visible;
  animation: pl-line 4.35s linear forwards;
}
.pageloader__line path {
  fill: none; stroke: var(--navy); stroke-linecap: round;
  animation: pl-uncurl 4.35s linear forwards;
}
/* the closing beat: a pink rule drawing in under the finished lockup */
.pageloader__rule {
  position: absolute; left: 0; bottom: -14px;
  height: 2px; width: 100%; border-radius: 2px;
  background: var(--grad-pink);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: pl-rule 4.35s var(--ease) forwards;
}
@keyframes pl-orbit {
  0%     { transform: rotate(0deg); animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
  45.9%  { transform: rotate(720deg); }
  100%   { transform: rotate(720deg); }
}
@keyframes pl-uncurl {
  0%, 45.9% { d: path("M-79.34 60.88 C-106.89 24.97 -106.89 -24.97 -79.34 -60.88");
              stroke-width: calc(var(--pl-th) * 1.5 / var(--pl-big));
              animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  56.3%, 100% { d: path("M-200 0 C-133.33 0 -66.67 0 0 0"); stroke-width: var(--pl-th); }
}
@keyframes pl-line {
  0%, 45.9%   { transform: translateX(0); opacity: 1;
                animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  56.3%       { transform: translateX(calc(var(--pl-left) + var(--pl-r) * 2)); opacity: 1;
                animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  82.8%       { transform: translateX(calc(var(--pl-right) + var(--pl-r) * 2)); opacity: 1; }
  87.4%, 100% { transform: translateX(calc(var(--pl-right) + var(--pl-r) * 2)); opacity: 0; }
}
@keyframes pl-reveal {
  0%, 56.3% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  82.8%     { clip-path: inset(0 0% 0 0); }
  100%      { clip-path: inset(0 0% 0 0); }
}
@keyframes pl-stage {
  0%, 45.9% { transform: translateX(var(--pl-shift)) scale(var(--pl-big));
              animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  56.3%     { transform: translateX(var(--pl-shift)) scale(1);
              animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  82.8%     { transform: translateX(0) scale(1); }
  100%      { transform: translateX(0) scale(1); }
}
@keyframes pl-rule {
  0%, 82.8% { transform: scaleX(0); }
  95.4%     { transform: scaleX(1); }
  100%      { transform: scaleX(1); }
}
@keyframes pl-dismiss { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (max-width: 1000px) {
  .pageloader__stage { --pl-logo: 560px; }
}
@media (max-width: 640px) {
  .pageloader__stage { --pl-logo: 300px; --pl-big: 3.2; }
}
@media (prefers-reduced-motion: reduce) { .pageloader { display: none; } }

/* Touch input above 1040px (iPad landscape, 1180–1366px): the tap-target
   half of the ≤1040px block, keyed on the input instead of the width.
   (audit 2026-09-25) */
@media (pointer: coarse) {
  .shell__brand { min-height: 44px; }
  .langacc__cur { height: 44px; }
  .langacc__scroll a { min-height: 44px; }
  .foot-social a, .ilet__social a { width: 44px; height: 44px; }
  .foot-col a, .shell-foot a { padding-block: 11px; }
  .crumb a, .crumb span { padding-block: 11px; }
}

/* footer phone / WhatsApp rows: glyph + number (2026-10-22) */
a.foot-ico-link { display: inline-flex; align-items: center; gap: 9px; }
.foot-ico-link .foot-ico { width: 16px; height: 16px; flex-shrink: 0; }