/* ==========================================================================
   Shell (header) / Footer / Mobile menu / Cycle dial / Splash

   SYMMETRY CONTRACT — the same idea as the sibling sites, and the one thing
   deliberately copied: --shell-w is the header's width and .container is
   pinned to the same number, so the header, every section and the footer
   share one edge-to-edge column. Enforced by the token, not by matching
   values by hand.
   ========================================================================== */
:root {
  --shell-w: 1240px;
  --shell-h: 76px;
  --shell-h-dock: 62px;      /* height once it docks */
  --shell-pad: 20px;
  --shell-gap: 0px;
}
: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;
}

/* ---------- Header ----------
   A DIFFERENT idea from the sibling sites: theirs is a floating pill that
   drops its navigation as you scroll down. This one never hides the
   navigation — a guide people read across is the wrong place to take the
   menu away. It starts flush against the top of the page, transparent, and
   DOCKS on scroll: it shortens, lifts onto a berry-tinted glass and gains a
   shadow, while the links stay exactly where they were. */
/* z-index above the mobile panel (1200): the panel used to cover its own
   close button, so the only ways out were the backdrop and Escape */
.shell-head {
  position: fixed; inset: 0 0 auto 0; z-index: 1300;
  display: flex; justify-content: center;
  padding-inline: var(--gutter);
  transition: background var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease),
              -webkit-backdrop-filter var(--dur-slow) var(--ease), backdrop-filter var(--dur-slow) var(--ease);
}
.shell-head.is-docked {
  background: rgba(255, 252, 254, .82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(0, 25, 53, .06), 0 18px 40px -30px rgba(0, 25, 53, .5);
}
.shell {
  display: flex; align-items: center; gap: 20px;
  width: 100%; max-width: var(--shell-w);
  height: var(--shell-h);
  padding-inline: var(--shell-pad);
  transition: height var(--dur-slow) var(--ease);
}
.shell-head.is-docked .shell { height: var(--shell-h-dock); }

/* On the homepage the header floats over a dark video, so until it docks
   it has to be light-on-dark — navy links on that footage were all but
   invisible. Scoped to .home: every other page has a pale hero and needs
   the dark type. */
.home .shell-head:not(.is-docked) .shell__links > a,
.home .shell-head:not(.is-docked) .shell__drop > button,
.home .shell-head:not(.is-docked) .langacc__cur { color: rgba(255, 255, 255, .88); }
.home .shell-head:not(.is-docked) .langacc__cur { border-color: rgba(255, 255, 255, .28); }
.home .shell-head:not(.is-docked) .shell__links > a::before,
.home .shell-head:not(.is-docked) .shell__drop > button::before { border-color: var(--pink-light); }
.home .shell-head:not(.is-docked) .shell__links > a[aria-current="page"] { color: var(--white); }
@media (min-width: 681px) and (hover: hover) { .home .shell-head:not(.is-docked) .shell__links > a:hover, .home .shell-head:not(.is-docked) .shell__drop:hover > button { color: var(--white); } }
/* html:not(.menu-open) — once the panel is open the button sits on white,
   and white-on-white bars would vanish exactly when they are the close
   control */
html:not(.menu-open) .home .shell-head:not(.is-docked) .shell__burger { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.1); }
html:not(.menu-open) .home .shell-head:not(.is-docked) .shell__burger span { background: var(--white); }
/* The light cut of the logo leads over the hero video; everywhere else, and
   once the header docks, the dark one does. No filter is involved, which is
   the whole point — a filter that lifts the navy to white takes the pink
   with it. */
.shell__brand { position: relative; flex: none; display: flex; align-items: center; }
.shell__logo { width: auto; height: 38px; transition: height var(--dur-slow) var(--ease); }
.shell-head.is-docked .shell__logo { height: 32px; }
.shell__logo--light { display: none; }
/* html:not(.menu-open), for the same reason the burger carries it: once the
   white panel is under the header, a white wordmark is invisible. */
html:not(.menu-open) .home .shell-head:not(.is-docked) .shell__logo--dark { display: none; }
html:not(.menu-open) .home .shell-head:not(.is-docked) .shell__logo--light { display: block; }

.shell__links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.shell__links > a, .shell__drop > button {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--navy); font-size: .89rem; font-weight: 500; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.shell__drop > button svg { width: 9px; height: 9px; transition: transform var(--dur) var(--ease); }
/* The hover is a RING that draws itself around the item — the splash's own
   gesture, brought down to link size. Nothing fills, nothing slides. */
.shell__links > a::before, .shell__drop > button::before {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid var(--pink);
  border-radius: var(--r-pill);
  opacity: 0; transform: scale(.82);
  transition: opacity .26s var(--ease), transform .34s var(--ease-pop);
}
.shell__links > a[aria-current="page"] { color: var(--pink-700); }
@media (min-width: 681px) and (hover: hover) { .shell__links > a:hover, .shell__drop:hover > button { color: var(--pink-700); } }
.shell__links > a[aria-current="page"]::before { opacity: 1; transform: scale(1); }
@media (min-width: 681px) and (hover: hover) { .shell__links > a:hover::before, .shell__drop:hover > button::before { opacity: 1; transform: scale(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% + 12px); left: 50%;
  translate: -50% 0;
  display: grid; gap: 2px; min-width: 250px; padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.97);
  transform-origin: 50% 0;
  transition: opacity .24s var(--ease), transform .3s 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 it closing */
.shell__drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.shell__panel a {
  padding: 10px 13px; border-radius: var(--r-md);
  color: var(--muted); font-size: .86rem;
  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(--plum-50); color: var(--pink-700); transform: translateX(5px); } }

/* margin-left:auto, because what pushed this group to the right edge was
   .shell__links' own auto margin — and the links are the first thing a
   narrow screen hides, which left the menu button stranded beside the logo */
.shell__actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }

/* ---------- Language switcher ---------- */
.langacc { position: relative; flex: none; }
.langacc__cur {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; color: var(--navy);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .langacc__cur:hover { border-color: var(--pink); color: var(--pink-700); } }
.langacc__cur svg { width: 9px; height: 9px; transition: transform var(--dur) var(--ease); }
.langacc__cur[aria-expanded="true"] svg { transform: rotate(180deg); }
.langacc__list {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 190px;
  display: grid; grid-template-rows: 0fr;
  border-radius: var(--r-lg);
  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 */
.langacc__scroll { overflow: hidden; min-height: 0; max-height: min(420px, 60vh); border-radius: var(--r-lg); }
.langacc.is-open .langacc__scroll { overflow-y: auto; padding: 6px; }
.langacc__list a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: var(--r-md);
  font-size: .78rem; color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .langacc__list a:hover { background: var(--plum-50); color: var(--pink-700); } }
.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; }

/* ---------- Appointment button ----------
   Deliberately quiet: the ring gesture belongs to the navigation, and
   using it here too would be the same trick twice on one bar. The button
   just warms from the deep gradient to the pink one and lifts. */
.btn-appt {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px 0 20px;
  border-radius: var(--r-pill);
  background: var(--grad-deep); color: var(--white);
  font-size: .85rem; font-weight: 700; white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-appt::before {
  content: ""; position: absolute; inset: -1px; z-index: 0;
  border-radius: inherit;
  background: var(--grad-pink);
  opacity: 0;
  transition: opacity .38s var(--ease);
}
.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:focus-visible::before { opacity: 1; }
@media (min-width: 681px) and (hover: hover) { .btn-appt:hover::before { opacity: 1; } }
.btn-appt__in { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; }
.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: 50px; }

/* ---------- The menu button ----------
   It used to be two flat bars in a plain circle sitting wherever the flex
   row left it. It is now the site's own mark at button size: a disc with a
   ring that draws itself around it, and two bars of DIFFERENT lengths that
   swing into a cross when the menu opens. The button reports its own state
   through aria-expanded, so the open shape needs no extra class. */
.shell__burger {
  position: relative; display: none; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  place-items: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.shell__burger::before {
  content: ""; position: absolute; inset: -5px;
  border: 1.5px solid var(--pink); border-radius: 50%;
  opacity: 0; transform: scale(.82);
  transition: opacity .28s var(--ease), transform .42s var(--ease-pop);
  pointer-events: none;
}
.shell__burger:focus-visible::before, .shell__burger[aria-expanded="true"]::before { opacity: 1; transform: none; }
@media (min-width: 681px) and (hover: hover) { .shell__burger:hover::before { opacity: 1; transform: none; } }
@media (min-width: 681px) and (hover: hover) { .shell__burger:hover { transform: translateY(-1px); } }
/* Both bars are 18px and the short one is SCALED, not narrowed: scaleX is a
   compositor transform, where animating width would relayout the button on
   every frame of the open. A .611 scale of 18px is 11px, and the -3.5px
   shift puts that 11px where a short bar would sit. */
.shell__burger span {
  position: absolute;
  width: 18px; height: 2px; border-radius: 2px; background: var(--navy);
  transition: transform .34s var(--ease), background var(--dur) var(--ease);
}
/* the short bar is the tell: two equal lines read as a generic icon */
.shell__burger span:first-child { transform: translateY(-4px); }
.shell__burger span:last-child  { transform: translate(-3.5px, 4px) scaleX(.611); }
.shell__burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.shell__burger[aria-expanded="true"] span:last-child  { transform: rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobilemenu {
  position: fixed; inset: 0 0 0 auto; z-index: 1200;
  width: min(360px, 88vw);
  display: flex; flex-direction: column; gap: 6px;
  padding: 90px 22px 26px;
  background: var(--white);
  transform: translateX(101%);
  transition: transform .42s var(--ease);
  overflow-y: auto;
}
.mobilemenu.is-open { transform: none; }
.mobilemenu__nav { display: grid; gap: 2px; }
.mobilemenu__nav > a {
  padding: 13px 14px; border-radius: var(--r-md);
  color: var(--navy); font-size: .95rem; font-weight: 500;
  transition: background var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .mobilemenu__nav > a:hover { background: var(--plum-50); } }
.mobilemenu__nav > a[aria-current="page"] { color: var(--pink-700); background: var(--plum-50); }

/* ---------- The menu's accordions ----------
   <details>/<summary>, so the open/close is the browser's and needs no
   script; name= makes them exclusive, so only one group is ever open and
   the panel never becomes a scroll of everything at once. */
.mnu-acc { border-radius: var(--r-md); }
.mnu-acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; border-radius: var(--r-md);
  color: var(--navy); font-size: .95rem; font-weight: 500;
  cursor: pointer; list-style: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mnu-acc > summary::-webkit-details-marker { display: none; }
.mnu-acc > summary svg { flex: none; width: 13px; height: 13px; color: var(--muted-2); transition: transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .mnu-acc > summary:hover { background: var(--plum-50); } }
.mnu-acc[open] > summary { color: var(--pink-700); background: var(--plum-50); }
.mnu-acc[open] > summary svg { transform: rotate(180deg); color: var(--pink); }
/* the children sit on a rule, so a long group still reads as one block */
.mnu-acc__body { display: grid; gap: 1px; margin: 2px 0 6px; padding-left: 14px; border-left: 1.5px solid var(--pink-100); }
.mnu-acc__body a {
  padding: 11px 12px; border-radius: var(--r-sm);
  color: var(--muted); font-size: .9rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .mnu-acc__body a:hover { background: var(--plum-50); color: var(--pink-700); } }
/* the language list is two columns — ten rows of one would be the longest
   thing in the panel */
.mnu-acc__body--lang { grid-template-columns: 1fr 1fr; }
.mnu-lang { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.mnu-lang b { font-size: .72rem; letter-spacing: .08em; color: var(--pink); }
.mnu-lang.is-current { padding: 11px 12px; font-size: .9rem; color: var(--navy); font-weight: 600; }
.mobilemenu__foot { margin-top: auto; padding-top: 18px; }
.mobilemenu__backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0, 25, 53, .42);
  opacity: 0; pointer-events: none;
  transition: opacity .38s var(--ease);
}
.mobilemenu__backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Cycle dial (to top) ----------
   Not an escalator and not a bar: a ring that fills as the reader moves
   through the page, which is the site's motif doing a job. The arc is a
   stroked circle driven by --p, so no JS touches geometry — it only writes
   one number. */
.dial {
  position: fixed; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px);
  z-index: 900;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .38s var(--ease), transform .38s var(--ease-pop);
}
.dial.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dial__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.dial__ring circle { fill: none; stroke-width: 2.5; }
.dial__track { stroke: var(--surface-2); }
.dial__fill {
  stroke: var(--pink);
  stroke-linecap: round;
  /* r=24 → circumference 150.8 */
  stroke-dasharray: 150.8;
  stroke-dashoffset: calc(150.8 - 150.8 * var(--p, 0));
}
.dial__arrow { position: relative; width: 16px; height: 16px; color: var(--navy); transition: transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .dial:hover .dial__arrow { transform: translateY(-3px); } }

/* ---------- Footer ---------- */
.shell-foot { background: var(--grad-deep); color: rgba(255, 255, 255, .72); padding-block: clamp(34px, 4vw, 60px) 24px; }
/* The to-top dial is fixed at the bottom-right corner; at the very end of the
   page it sat on the credit / disclaimer line. The bar keeps clear of it. */
.shell-foot { padding-bottom: calc(clamp(16px, 3vw, 30px) + 54px + 18px); }
.shell-foot__inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(22px, 3vw, 46px); }
.shell-foot h4 { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-light); margin-bottom: 14px; }
.foot-col > summary { list-style: none; cursor: pointer; }
.foot-col > summary::-webkit-details-marker { display: none; }
.foot-col > summary svg { display: none; width: 14px; height: 14px; color: rgba(255,255,255,.55); transition: transform var(--dur) var(--ease); }
/* No `display` here on purpose. An author display on the body beats the UA
   rule that hides a closed <details>, so setting it unconditionally left
   every footer column permanently open. It is set per breakpoint below. */
.foot-col__body { gap: 2px; }
.foot-col a { padding: 7px 0; font-size: .87rem; color: rgba(255,255,255,.72); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .foot-col a:hover { color: var(--white); transform: translateX(4px); } }
/* Above 620px the column is never a control: the body is forced open and
   the heading takes no clicks, so <details> costs the desktop nothing. */
@media (min-width: 621px) {
  .foot-col__body { display: grid !important; }
  .foot-col > summary { pointer-events: none; }
  /* Chrome 131+ (and Safari 18.4+) hide a closed <details> through its
     ::details-content slot with content-visibility:hidden, which no author
     `display` overrides — the three link columns laid out but painted
     nothing, on every width above 620px. Measured 2026-09-28, Chrome 153. */
  .foot-col::details-content { content-visibility: visible; }
}
/* The brand column is a flex column so the social row can be pushed to the
   footer's baseline with margin-top:auto — it then finishes level with the
   last link in the tallest nav column instead of stopping halfway up. */
.foot-brand { display: flex; flex-direction: column; }
/* align-self, because a flex column would otherwise stretch the SVG to the
   column's full width and preserveAspectRatio would centre the wordmark in it */
.foot-brand img { align-self: flex-start; height: 40px; width: auto; margin-bottom: 14px; }
.foot-brand p { font-size: .87rem; line-height: 1.7; color: rgba(255,255,255,.62); max-width: 42ch; }

.foot-addr { display: grid; gap: 2px; margin-top: 18px; font-style: normal; }
.foot-addr__row {
  display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 10px;
  padding: 7px 0; font-size: .85rem; line-height: 1.55; color: rgba(255,255,255,.66);
  transition: color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .foot-addr__row:hover { color: var(--white); } }
/* The icon sits in the site's ring, which brightens with the row rather than
   carrying a hover of its own. */
.foot-addr__ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); color: var(--pink-light);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.foot-addr__ico svg { width: 14px; height: 14px; }
@media (min-width: 681px) and (hover: hover) { .foot-addr__row:hover .foot-addr__ico { border-color: var(--pink-light); background: rgba(255,143,184,.14); } }

/* Social. Each account is a seal: an outlined ring whose pink fill grows from
   the centre on hover, the same gesture the page uses everywhere else. No
   borrowed brand colours, so the row stays one material. */
.foot-social { display: flex; gap: 10px; margin-top: auto; padding-top: 22px; }
.foot-social__seal {
  position: relative; display: grid; place-items: center; isolation: isolate;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.78);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.foot-social__fill {
  position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--grad-pink); transform: scale(0); opacity: 0;
  transition: transform .34s var(--ease), opacity .24s var(--ease);
}
.foot-social__seal svg { width: 18px; height: 18px; }
.foot-social__seal:focus-visible { color: var(--white); border-color: transparent; transform: translateY(-3px); }
@media (min-width: 681px) and (hover: hover) { .foot-social__seal:hover { color: var(--white); border-color: transparent; transform: translateY(-3px); } }
.foot-social__seal:focus-visible .foot-social__fill { transform: scale(1); opacity: 1; }
@media (min-width: 681px) and (hover: hover) { .foot-social__seal:hover .foot-social__fill { transform: scale(1); opacity: 1; } }
.shell-foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: clamp(26px, 3vw, 44px); padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem; color: rgba(255,255,255,.5);
}
/* the studio credit: same size as its neighbours, the name itself a shade
   brighter so it reads as a name and not as more small print */
.shell-foot__by { white-space: nowrap; letter-spacing: .02em; }
.shell-foot__by b { font-weight: 700; color: rgba(255,255,255,.72); letter-spacing: .06em; }
a.shell-foot__by { color: inherit; text-decoration: none; }
a.shell-foot__by:hover b, a.shell-foot__by:focus-visible b { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* The full bar — brand, eight links, language pill, Randevu — needs about
   1300px to keep its 20px inner edge. The collapse used to sit at 1100, so
   from 1101 to ~1280 (an iPad Air/Pro in landscape, a small laptop) the
   Randevu button ran past the right edge of the screen. Measured 2026-09-25. */
@media (max-width: 1299px) {
  .shell__links { display: none; }
  .shell__burger { display: grid; }
  .shell__brand { min-height: 44px; }
  .shell__actions .btn-appt { display: none; }
  .langacc { display: none; }
}
@media (max-width: 1100px) {
  /* touch targets: the logo link and the language button were both short of
     the 44px a finger needs */
  .shell__brand { min-height: 44px; }
  .langacc__cur { height: 44px; }
  .langacc__scroll a { min-height: 44px; }
  /* The bar's own CTA goes: the same button is the last thing in the menu,
     and two of them side by side made the bar the busiest strip on a tablet.
     The language pill goes with it — it is a group in the menu now. */
  .shell__actions .btn-appt { display: none; }
  .langacc { display: none; }
  /* the three link columns stay side by side; only the brand block drops */
  .shell-foot__inner { grid-template-columns: repeat(3, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col a { padding-block: 11px; }
}
@media (max-width: 620px) {
  :root { --shell-h: 64px; --shell-h-dock: 56px; --shell-pad: 14px; }
  .shell-foot__bottom { justify-content: center; text-align: center; }
  /* ---------- The footer on a phone ----------
     Twenty-three links stacked was about a thousand pixels of scrolling
     after the page had already ended. The three columns become one column
     of three headings that open. */
  /* full width, so the header sits over one flat white rather than half
     panel and half video */
  .mobilemenu { width: 100%; padding-inline: 18px; }
  .shell-foot__inner { grid-template-columns: 1fr; gap: 0; }
  .foot-col { border-top: 1px solid rgba(255,255,255,.12); }
  .foot-col > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px;
  }
  .foot-col > summary svg { display: block; }
  .foot-col[open] > summary svg { transform: rotate(180deg); color: var(--pink-light); }
  /* explicit both ways — leaving the closed state to the UA rule left the
     links laid out and 89px of the column still showing */
  .foot-col:not([open]) .foot-col__body { display: none; }
  .foot-col[open] .foot-col__body { display: grid; }
  .shell-foot h4 { margin-bottom: 0; }
  .foot-col__body { padding-bottom: 10px; }
  .foot-brand { padding-bottom: 8px; }
  /* the social row stops being pushed to a baseline that no longer exists */
  .foot-social { margin-top: 0; padding-top: 18px; }
  .mnu-acc__body--lang { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .shell-head, .shell, .shell__panel, .btn-appt, .dial, .mobilemenu { transition: none; }
}


/* Carried over from the sibling site unchanged — the brief names the
   splash as one of the three things the projects share. That includes
   the corrected orbit centre: 62.736% is the measured ink centre of
   the "e", not the middle of the artwork band. */
/* ==========================================================================
   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; } }