/* ==========================================================================
   Çikolata Kisti v2 — homepage sections

   The ring does a job in every block here rather than being drawn as
   decoration: it frames the hero video, it counts the eight signals, it is
   the hover on a topic card, and it crops the risk panel.
   ========================================================================== */

.section { padding-block: var(--pad-y); }
.sechead { max-width: 62ch; margin-bottom: clamp(20px, 2.4vw, 34px); }
.sechead h2 { margin-top: 12px; font-size: var(--fs-h2); }
.sechead p { margin-top: 12px; color: var(--muted); line-height: 1.75; }
.sechead__more { margin-top: clamp(18px, 2.2vw, 28px); }

.btn-ghost {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  color: var(--navy); font-size: .87rem; font-weight: 700;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .btn-ghost:hover { color: var(--pink-700); border-color: var(--pink); transform: translateY(-2px); } }

/* ---------- Hero ----------
   The intro video is kept but demoted to ground: it sits under a veil deep
   enough to read white type on, inside a ring that crops it. The block's
   real work is the four routes underneath. */
.hero {
  position: relative; overflow: hidden;
  /* the whole screen, not most of it — svh so a phone's collapsing
     address bar cannot leave a strip of the next section showing */
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--shell-h) + 60px);
  padding-bottom: clamp(30px, 4vw, 56px);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* deep enough at the bottom to carry white type, clear at the top so the
   footage is still footage */
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,25,53,.34) 0%, rgba(0,25,53,.58) 42%, rgba(0,25,53,.92) 100%);
}
/* the motif, once and very large: a ring cropped by the hero's own edge */
.hero__ring {
  position: absolute; right: -16vw; top: -28vw;
  width: min(74vw, 980px); aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}
.hero__ring::before {
  content: ""; position: absolute; inset: 15%;
  border: 1px solid rgba(255, 143, 184, .22); border-radius: 50%;
}

.hero__copy { position: relative; max-width: 68ch; color: var(--white); }
.hero__copy .eyebrow { color: var(--pink-light); }
.hero__copy .eyebrow::before { background: var(--pink-light); }
.hero h1 { margin-top: 16px; font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -.03em; color: var(--white); }
.hero__lead { margin-top: 18px; max-width: 58ch; font-size: var(--fs-lead); line-height: 1.75; color: rgba(255,255,255,.8); }

/* ---------- Hero routes ----------
   Four doors into the guide. At rest each is a titled card; on hover the
   card turns over to the topic's own picture and a summary slides out of
   its side. The row is a flex line, so the panel opens by taking width
   from its neighbours rather than covering them.

   Timings are deliberately unhurried — .62s for the turn, .68s for the
   panel. The first pass ran these in under .3s and the flip read as a
   flicker rather than as a card being turned over. */
.hero__routes {
  display: flex; flex-wrap: wrap;
  gap: 12px; margin-top: clamp(26px, 3.4vw, 44px);
}
.route {
  position: relative; display: flex; align-items: stretch;
  flex: 0 1 auto;
  border-radius: var(--r-petal);
  color: var(--white);
}

/* the two faces share one box; --r-petal is mirrored on the back so the
   shape still reads the same way round after the turn */
.route__face {
  position: relative; flex: none;
  width: clamp(150px, 15vw, 196px); min-height: 132px;
  transform-style: preserve-3d;
  transition: transform .62s var(--ease);
}
/* A TINT, not a frost. These eight faces (four cards × two sides) sit over a
   playing video, and a backdrop-filter there has to re-blur live footage
   every frame: measured at 27 dropped frames out of 34 with it, 0 without.
   A translucent ink fill reads almost the same over dark footage and costs
   nothing. */
.route__front, .route__back {
  position: absolute; inset: 0;
  display: grid; align-content: start; gap: 4px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-petal);
  background: rgba(0, 25, 53, .42);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: border-color .62s var(--ease), background .62s var(--ease);
}
.route__back {
  /* display:block, not the grid it inherits from the shared rule: a grid
     with align-content:start would give the picture its intrinsic height and
     leave the rest of the face empty */
  display: block;
  transform: rotateY(180deg);
  padding: 0; overflow: hidden;
  background: var(--ink-900);
}
.route__back img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.route__arc {
  width: 16px; height: 16px; margin-bottom: 10px;
  background: var(--pink-light);
  border-radius: 1px 70% 1px 70%;
  transition: transform .62s var(--ease-pop);
}
.route__front strong { font-size: 1.02rem; }
.route__sub { font-size: .82rem; line-height: 1.45; color: rgba(255,255,255,.68); }

/* the panel: width 0 at rest, so it takes no room until it is wanted */
.route__panel {
  display: grid; align-items: center;
  width: 0; overflow: hidden;
  transition: width .68s var(--ease);
}
.route__panel-in {
  display: grid; gap: 10px; align-content: center;
  width: clamp(200px, 20vw, 260px);
  padding: 18px 18px 18px 16px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .4s var(--ease) .16s, transform .5s var(--ease) .16s;
}
.route__text { font-size: .84rem; line-height: 1.6; color: rgba(255,255,255,.76); }
.route__more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; color: var(--pink-light);
}
.route__more svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }

.route:focus-visible .route__face { transform: rotateY(180deg); }
@media (min-width: 681px) and (hover: hover) { .route:hover .route__face { transform: rotateY(180deg); } }
@media (min-width: 681px) and (hover: hover) { .route:hover .route__arc { transform: rotate(90deg) scale(1.15); } }
.route:focus-visible .route__panel { width: clamp(200px, 20vw, 260px); }
@media (min-width: 681px) and (hover: hover) { .route:hover .route__panel { width: clamp(200px, 20vw, 260px); } }
.route:focus-visible .route__panel-in { opacity: 1; transform: none; }
@media (min-width: 681px) and (hover: hover) { .route:hover .route__panel-in { opacity: 1; transform: none; } }
@media (min-width: 681px) and (hover: hover) { .route:hover .route__more svg { transform: translateX(3px); } }
@media (min-width: 681px) and (hover: hover) { .route:hover .route__front, .route:hover .route__back { border-color: rgba(255,143,184,.5); } }

/* ---------- Accreditations (2026-10-16) ----------
   SRC accredited the surgeon and the centre in 2022 and again in 2025, so
   the block is built on two rings: the outer one is the first cycle, the
   inner one the second, and they draw in that order when the band arrives.
   The band itself is the surface — the two accreditations are the only
   cards, nothing is boxed around them. */
.akr-sec { padding-block: clamp(48px, 6vw, 96px); background: var(--plum-50); position: relative; overflow: hidden; isolation: isolate; }
.akr-sec::before {
  content: ""; position: absolute; z-index: -1; right: -12vw; top: 50%;
  width: min(62vw, 820px); aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%; border: 1px solid rgba(107,43,82,.08);
  box-shadow: 0 0 0 70px rgba(255,255,255,.35), 0 0 0 71px rgba(107,43,82,.06);
}
.akr { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.akr.reveal { opacity: 1; transform: none; }

.akr__seal { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; justify-self: center; }
.akr__seal svg { width: 100%; height: 100%; overflow: visible; }
.akr__spin { transform-origin: 120px 120px; animation: akr-spin 60s linear infinite; }
@keyframes akr-spin { to { transform: rotate(360deg); } }
.akr__ringtext { font-size: 10.4px; font-weight: 700; letter-spacing: .2em; fill: var(--berry); }
.akr__track { fill: none; stroke: rgba(107,43,82,.12); stroke-width: 10; }
.akr__arc { fill: none; stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 120px 120px; }
/* r=78 -> 490.1 · r=62 -> 389.6 */
.akr__arc--a { stroke: var(--berry); stroke-dasharray: 490.1; stroke-dashoffset: 490.1; }
.akr__arc--b { stroke: var(--pink); stroke-dasharray: 389.6; stroke-dashoffset: 389.6; }
.akr.in .akr__arc--a { animation: akr-draw 1.3s cubic-bezier(.16,1,.3,1) .1s forwards; }
.akr.in .akr__arc--b { animation: akr-draw 1.3s cubic-bezier(.16,1,.3,1) .75s forwards; }
@keyframes akr-draw { to { stroke-dashoffset: 0; } }
.akr__core {
  position: absolute; inset: 31%; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--white); box-shadow: 0 18px 40px rgba(74,29,57,.16), inset 0 0 0 1px rgba(107,43,82,.08);
}
.akr__core b { font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; letter-spacing: -.04em; color: var(--ink-900); }
.akr__core span { margin-top: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .3em; color: var(--pink-700); padding-left: .3em; }
.akr.reveal .akr__core { opacity: 0; transform: scale(.86); transition: opacity .6s var(--ease), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: 1.3s; }
.akr.in .akr__core { opacity: 1; transform: none; }

.akr__title { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.03em; color: var(--ink-900); max-width: 20ch; text-wrap: balance; }
.akr__lead { margin-top: 16px; max-width: 60ch; font-size: var(--fs-lead); line-height: 1.65; color: var(--navy-700); }
.akr__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 34px); }
.akr__card {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--white); border-radius: var(--r-petal);
  box-shadow: 0 2px 4px rgba(74,29,57,.04), 0 18px 40px rgba(74,29,57,.08);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.akr__card:nth-child(2) { border-radius: var(--r-petal-alt); }
@media (min-width: 681px) and (hover: hover) { .akr__card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(74,29,57,.05), 0 26px 54px rgba(74,29,57,.14); } }
.akr__kind { font-size: var(--fs-h3); line-height: 1.2; color: var(--ink-900); }
.akr__en { font-size: .8rem; line-height: 1.45; font-weight: 600; color: var(--berry); }
.akr__who { font-size: .9rem; line-height: 1.5; color: var(--muted); }
/* 2022 -> 2025: two stops on one line, the second lights after the first */
.akr__line { list-style: none; margin: auto 0 0; padding: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.akr__line::before, .akr__line::after { content: ""; position: absolute; top: 19px; left: 6px; right: calc(50% - 6px); height: 2px; border-radius: 2px; }
.akr__line::before { background: rgba(107,43,82,.14); }
.akr__line::after { background: linear-gradient(90deg, var(--berry), var(--pink)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.16,1,.3,1) 1.2s; }
.akr.in .akr__line::after { transform: scaleX(1); }
.akr__line li { position: relative; display: grid; gap: 2px; }
.akr__line li::before { content: ""; position: absolute; top: -18px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 4px var(--white); }
.akr__line li:nth-child(2)::before { background: var(--pink); transform: scale(0); transition: transform .5s var(--ease-pop) 2s; }
.akr.in .akr__line li:nth-child(2)::before { transform: scale(1); }
.akr__line b { font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.akr__line span { font-size: .78rem; line-height: 1.4; color: var(--muted); }
.akr__cert {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-weight: 700; font-size: .92rem; color: var(--pink-700);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(184,47,102,.35);
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.akr__cert svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
@media (hover: hover) { .akr__cert:hover { color: var(--berry); text-decoration-color: currentColor; } .akr__cert:hover svg { transform: translate(2px, -2px); } }
.akr__cert:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 1040px) {
  .akr { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .akr__seal { max-width: 260px; }
  .akr__title, .akr__lead { margin-inline: auto; }
  .akr__pair { text-align: left; width: 100%; }
}
@media (max-width: 680px) {
  .akr__seal { max-width: 210px; }
  .akr__pair { grid-template-columns: 1fr; }
  .akr-sec::before { right: -40vw; width: 110vw; }
}
@media (prefers-reduced-motion: reduce) {
  .akr__spin { animation: none; }
  .akr__arc--a, .akr__arc--b, .akr.in .akr__arc--a, .akr.in .akr__arc--b { animation: none; stroke-dashoffset: 0; }
  .akr.reveal .akr__core, .akr__line::after, .akr__line li:nth-child(2)::before, .akr__card { transition: none; }
  .akr.reveal .akr__core { opacity: 1; transform: none; }
  .akr__line::after { transform: scaleX(1); }
  .akr__line li:nth-child(2)::before { transform: scale(1); }
}

/* ---------- The eight signals ----------
   A pinned scene: the dial stays, the signals move past it, and the ring
   gains a tick per signal. --p is the scene's own 0-1 scroll position. */
.signals-sec { position: relative; height: 420vh; padding: 0; background: var(--grad-deep); }
.signals__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.signals__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 80px); align-items: center; }
.signals__dial { color: var(--white); }
.signals__dial .eyebrow { color: var(--pink-light); }
.signals__dial .eyebrow::before { background: var(--pink-light); }
.signals__dial h2 { margin-top: 10px; font-size: var(--fs-hero); color: var(--white); line-height: 1; }
.signals__intro { margin-top: 18px; max-width: 48ch; font-size: 1.12rem; color: rgba(255,255,255,.74); line-height: 1.7; }

/* 2026-10-06: the dial is now a horizontal line, not a circle. The same
   markup (ring + count + eight ticks) is restyled: the ring is the track,
   each tick spans from the previous point to its own and lights pink when
   reached, the count sits above the line. */
.orbit {
  position: relative;
  width: 100%; max-width: 560px; height: 124px;
  margin-top: clamp(26px, 3.4vw, 44px);
}
.orbit__ring { position: absolute; left: 0; right: 0; bottom: 11px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.18); }
.orbit__tick {
  position: absolute; bottom: 11px; height: 2px;
  left: calc((var(--i) - 1) * 100% / 7); width: calc(100% / 7);
}
.orbit__tick::before {
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  background: var(--pink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease);
}
.orbit__tick[style*="--i:0"]::before { display: none; }
.orbit__tick::after {
  content: ""; position: absolute; right: -6px; top: -5px;
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,.32); border-radius: 50%;
  background: var(--ink-900);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease-pop);
}
/* A tick lights once the scene has scrolled past its share. CSS cannot
   compare one custom property against another, so main.js marks the ticks
   it has reached; it writes a class and a number and nothing else. */
.orbit__tick.is-lit::before { transform: scaleX(1); }
.orbit__tick.is-lit::after { border-color: var(--pink); background: var(--pink); transform: scale(1.2); }
.orbit__count {
  position: absolute; left: 0; top: 0;
  font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.orbit__count::after { content: " / 08"; font-size: .34em; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.45); vertical-align: .9em; margin-left: .3em; }

/* A grid with every card in the SAME cell, not eight absolutely positioned
   boxes: the list is as tall as its longest signal.
   2026-10-16 redesign: a light editorial card on the deep band. The photos
   are 600x330 landscapes, so they lead the card at their own shape instead
   of being cropped into a disc; the number sits in a ring on the photo and
   the ring draws when the signal becomes active. Changing signal wipes the
   photo open (clip-path) and brings the words up out of a short blur. */
.signals__list { display: grid; }
.signal {
  grid-area: 1 / 1;
  display: grid; grid-template-rows: auto 1fr;
  padding: 10px;
  border-radius: var(--r-petal);
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0,25,53,.12), 0 40px 80px -24px rgba(0,25,53,.55);
  color: var(--ink-900);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
  pointer-events: none;
}
.signal.is-active { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; pointer-events: auto; }
.signal__fig {
  position: relative; display: block; overflow: hidden;
  height: clamp(170px, 30svh, 300px);
  border-radius: 28px 6px 28px 6px;
  background: var(--surface-2);
  clip-path: inset(0 100% 0 0 round 28px 6px 28px 6px);
  transition: clip-path .9s cubic-bezier(.16,1,.3,1);
}
.signal.is-active .signal__fig { clip-path: inset(0 0 0 0 round 28px 6px 28px 6px); }
.signal__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.signal.is-active .signal__fig img { transform: none; }
.signal__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,25,53,.34), transparent 42%); pointer-events: none; }
.signal__no { position: absolute; z-index: 1; left: 16px; top: 16px; width: 56px; height: 56px; display: grid; place-items: center; }
.signal__no svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.signal__no-track { fill: rgba(0,25,53,.55); stroke: rgba(255,255,255,.28); stroke-width: 2; }
.signal__no-arc { fill: none; stroke: var(--pink-light); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) .25s; }
.signal.is-active .signal__no-arc { stroke-dashoffset: 0; }
.signal__no b { position: relative; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; color: var(--white); font-variant-numeric: tabular-nums; }
.signal__body { display: grid; align-content: start; gap: 10px; padding: clamp(18px, 2vw, 26px) clamp(14px, 1.8vw, 22px) clamp(12px, 1.4vw, 16px); }
.signal h3 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.025em; color: var(--ink-900); text-wrap: balance; }
.signal p { font-size: 1rem; line-height: 1.65; color: var(--navy-700); max-width: 60ch; }
.signal h3, .signal p, .signal__cta { opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.16,1,.3,1), filter .5s var(--ease); }
.signal.is-active h3 { opacity: 1; transform: none; filter: none; transition-delay: .18s; }
.signal.is-active p { opacity: 1; transform: none; filter: none; transition-delay: .26s; }
.signal.is-active .signal__cta { opacity: 1; transform: none; filter: none; transition-delay: .34s; }
.signal__cta {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: .9rem; font-weight: 700; color: var(--pink-700);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(184,47,102,.3);
}
.signal__cta svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
@media (hover: hover) { .signal__cta:hover { color: var(--berry); text-decoration-color: currentColor; } .signal__cta:hover svg { transform: translateX(3px); } }
.signal__cta:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: 4px; }

/* ---------- Topic grid ----------
   Hover draws a ring across the card — the one gesture this site owns. */
.hubgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hubcard {
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: 6px;
  min-height: 178px; padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-petal);
  background: var(--white);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease),
              border-color .34s var(--ease), opacity .34s var(--ease), filter .34s var(--ease);
}
.hubcard:nth-child(even) { border-radius: var(--r-petal-alt); }
.hubcard__no { font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--pink); }
.hubcard h3 { font-size: 1.04rem; line-height: 1.3; }
.hubcard p { font-size: .85rem; line-height: 1.55; color: var(--muted); }
/* the ring: a circle that scales up from the corner and is cropped by the
   card, so the card looks like it has been stamped rather than filled */
.hubcard__ring {
  position: absolute; right: -40px; bottom: -40px;
  width: 150px; height: 150px;
  border: 1.5px solid var(--pink-100); border-radius: 50%;
  transform: scale(.35); opacity: 0;
  transition: transform .55s var(--ease-pop), opacity .4s var(--ease);
  pointer-events: none;
}
@media (min-width: 681px) and (hover: hover) { .hubcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--pink); } }
@media (min-width: 681px) and (hover: hover) { .hubcard:hover .hubcard__ring { transform: scale(1); opacity: 1; } }
/* The grid answers as a whole: the card under the pointer stays lit and
   the other eleven step back. Dimming the rest rather than decorating the
   one makes the effect the size of the thing it describes — a choice among
   twelve — instead of twelve separate flourishes. :has on the grid is what
   lets a child's hover style its siblings. */
.hubgrid:has(.hubcard:focus-visible) .hubcard:not(:focus-visible) {
  opacity: .38;
  filter: saturate(.55);
  transform: scale(.985);
}
@media (min-width: 681px) and (hover: hover) { .hubgrid:has(.hubcard:hover) .hubcard:not(:hover) {
  opacity: .38;
  filter: saturate(.55);
  transform: scale(.985);
} }

/* ---------- Risk test ---------- */
.risk {
  position: relative; overflow: hidden;
  padding: clamp(30px, 4vw, 58px);
  border-radius: var(--r-petal);
  background: var(--grad-dusk); color: rgba(255,255,255,.78);
}
.risk__ring {
  position: absolute; left: -8%; bottom: -70%;
  width: min(46%, 460px); aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
}
.risk__copy { position: relative; max-width: 62ch; }
.risk .eyebrow { color: var(--pink-light); }
.risk .eyebrow::before { background: var(--pink-light); }
.risk h2 { margin-top: 10px; color: var(--white); font-size: var(--fs-h2); }
.risk p { margin: 12px 0 22px; color: rgba(255,255,255,.74); line-height: 1.75; }
.risk .btn-appt { background: var(--white); color: var(--navy); height: 52px; padding: 0 26px; }
@media (min-width: 681px) and (hover: hover) { .risk .btn-appt:hover { color: var(--white); } }

/* ---------- Article cards ---------- */
.bgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-petal);
  background: var(--white); overflow: hidden;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.bcard:nth-child(even) { border-radius: var(--r-petal-alt); }
.bcard__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.bcard__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
/* the ring sweeps over the picture as the card lifts — the site's gesture
   where a plain zoom used to be */
.bcard__ring {
  position: absolute; left: 50%; top: 50%;
  width: 118%; aspect-ratio: 1;
  margin: -59% 0 0 -59%;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 50%;
  opacity: 0; transform: scale(.55);
  transition: opacity .45s var(--ease), transform .7s var(--ease-pop);
  pointer-events: none;
}
.bcard__body { display: grid; gap: 6px; padding: 18px; }
.bcard__kicker { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }
.bcard h3 { font-size: .98rem; line-height: 1.35; }
.bcard p { font-size: .84rem; line-height: 1.55; color: var(--muted); }
.bcard__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: .78rem; font-weight: 700; color: var(--navy);
  opacity: 0; transform: translateY(6px);
  transition: opacity .34s var(--ease), transform .38s var(--ease), color .34s var(--ease);
}
.bcard__go svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .bcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--pink); } }
@media (min-width: 681px) and (hover: hover) { .bcard:hover .bcard__img img { transform: scale(1.07); filter: saturate(1.06); } }
@media (min-width: 681px) and (hover: hover) { .bcard:hover .bcard__ring { opacity: 1; transform: scale(1); } }
@media (min-width: 681px) and (hover: hover) { .bcard:hover .bcard__go { opacity: 1; transform: none; color: var(--pink-700); } }
@media (min-width: 681px) and (hover: hover) { .bcard:hover .bcard__go svg { transform: translateX(3px); } }

@media (max-width: 1040px) {
  /* One column, and CENTRED — stacked but still left-aligned, the dial sat
     against the edge with the whole right half of the screen empty. */
  .hubgrid { grid-template-columns: repeat(2, 1fr); }
  .bgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  /* Two by two, not four in a column: four stacked cards run past the fold
     on a phone and push the whole hero past a screen and a half. */
  .hero { padding-top: calc(var(--shell-h) + 26px); }
  .hero__routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
  .route { width: auto; }
  .route__face { width: 100%; min-height: 108px; }
  .route__front { padding: 14px; }
  .route__front strong { font-size: .96rem; }
  .route__sub { font-size: .76rem; }
  /* there is no hover here, so the slide-out panel is only dead weight */
  .route__panel { display: none; }
  .hero__lead { font-size: 1rem; line-height: 1.6; }

  /* Two up, not one: twelve full-width cards is twelve screens of scrolling,
     and each one only carries a number, a line and a clause. */
  .hubgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hubcard { min-height: 0; padding: 14px; }
  .hubcard h3 { font-size: .92rem; }
  .hubcard p { display: none; }          /* the title is the whole label here */
  .hubcard__ring { right: -30px; bottom: -30px; width: 110px; height: 110px; }

  .bgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .route, .route__face, .route__panel, .route__panel-in,
  .hubcard, .hubcard__ring, .bcard, .bcard__img img, .bcard__ring, .bcard__go,
  .route__arc { transition: none; }
}

/* ---------- Eight signals below the desktop (2026-10-16, rev. b) ----------
   The scene stays pinned on tablets and phones too, and scrolling changes
   the signal exactly as on the desktop. To fit one screen the dial folds
   into a compact header — heading, count and progress line — and the card
   sits under it with its photo sized to the screen height. */
@media (max-width: 900px) {
  .signals__sticky { align-items: center; padding-top: var(--shell-h-dock, 62px); }
  .signals__grid { grid-template-columns: 1fr; gap: clamp(16px, 3svh, 30px); }
  .signals__dial h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); }
  .signals__intro { margin-top: 10px; font-size: 1rem; line-height: 1.6; max-width: 60ch; }
  .orbit { max-width: none; height: 64px; margin-top: clamp(12px, 2svh, 22px); }
  .orbit__count { font-size: 2rem; }
  .signal { width: 100%; }
  .signal__fig { height: clamp(150px, 24svh, 300px); }
  .signal h3 { font-size: var(--fs-h3); }
  .signal p { font-size: .96rem; line-height: 1.6; }
}
@media (max-width: 600px) {
  .signals-sec { height: 520vh; }
  .signals__dial .eyebrow { font-size: .7rem; }
  .signals__dial h2 { margin-top: 4px; font-size: 2rem; }
  .signals__intro { display: none; }
  .orbit { height: 52px; margin-top: 8px; }
  .orbit__count { font-size: 1.6rem; }
  .orbit__tick::after { width: 10px; height: 10px; right: -5px; top: -4px; }
  .signal { padding: 8px; }
  .signal__fig { height: clamp(128px, 21svh, 220px); border-radius: 22px 6px 22px 6px; clip-path: inset(0 100% 0 0 round 22px 6px 22px 6px); }
  .signal.is-active .signal__fig { clip-path: inset(0 0 0 0 round 22px 6px 22px 6px); }
  .signal__no { width: 44px; height: 44px; left: 10px; top: 10px; }
  .signal__no b { font-size: .88rem; }
  .signal__body { gap: 6px; padding: 14px 12px 10px; }
  .signal h3 { font-size: 1.22rem; }
  .signal p { font-size: .9rem; line-height: 1.55; }
  .signal__cta { font-size: .84rem; margin-top: 2px; }
}
/* short phones: the test link goes, the words keep the room */
@media (max-width: 600px) and (max-height: 700px) {
  .signal__cta { display: none; }
  .signal__fig { height: 19svh; }
}
@media (prefers-reduced-motion: reduce) {
  .signals-sec { height: auto; }
  .signals__sticky { position: static; height: auto; padding-block: var(--pad-y); overflow: visible; }
  .signals__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .signal { grid-area: auto; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  .signal__fig { height: auto; aspect-ratio: 600 / 330; clip-path: none; transition: none; }
  .signal__fig img, .signal h3, .signal p, .signal__cta { opacity: 1; transform: none; filter: none; transition: none; }
  .signal__no-arc { stroke-dashoffset: 0; transition: none; }
  .signal__cta { display: none; }
  .orbit { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) { .signals__list { grid-template-columns: 1fr; } }

/* ---------- Document viewer (2026-10-16) ----------
   The certificate comes forward over the page on a blurred plum veil,
   on a paper sheet with rounded corners; it rises from slightly below and
   slightly small, and leaves faster than it came. */
html.belge-acik { overflow: hidden; }
.belge {
  width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100svh - 32px);
  margin: auto; padding: 0; border: 0; background: transparent; overflow: visible;
  color: var(--ink-900);
}
.belge::backdrop { background: rgba(0, 25, 53, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.belge__kagit {
  margin: 0; padding: clamp(6px, 1vw, 12px);
  background: var(--white); border-radius: 28px;
  box-shadow: 0 2px 6px rgba(0,25,53,.18), 0 50px 120px -30px rgba(0,25,53,.7);
}
.belge__kagit img {
  display: block; width: 100%; height: auto; max-height: calc(100svh - 80px); object-fit: contain;
  border-radius: 22px; background: #fdfcf8;
}
.belge__kapat {
  position: absolute; top: -14px; right: -14px;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--white); color: var(--ink-900);
  box-shadow: 0 8px 22px rgba(0,25,53,.28);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.belge__kapat svg { width: 18px; height: 18px; }
@media (hover: hover) { .belge__kapat:hover { background: var(--pink); color: var(--white); transform: rotate(90deg); } }
.belge__kapat:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
@media (max-width: 680px) { .belge__kapat { top: -18px; right: -6px; width: 40px; height: 40px; } .belge__kagit { border-radius: 20px; } .belge__kagit img { border-radius: 15px; } }
.belge[open] .belge__kagit { animation: belge-in .5s cubic-bezier(.16,1,.3,1); }
.belge[open]::backdrop { animation: belge-veil .35s ease-out; }
.belge.is-closing .belge__kagit { animation: belge-out .22s ease-in forwards; }
.belge.is-closing::backdrop { animation: belge-veil .22s ease-in reverse forwards; }
.belge.is-closing .belge__kapat { opacity: 0; transition: opacity .12s; }
@keyframes belge-in { from { opacity: 0; transform: translateY(28px) scale(.94); filter: blur(4px); } }
@keyframes belge-out { to { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes belge-veil { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .belge[open] .belge__kagit, .belge[open]::backdrop { animation: none; }
}

/* RTL (Arabic): arrows point the way the line reads */
[dir="rtl"] .signal__cta svg { transform: scaleX(-1); }
@media (hover: hover) { [dir="rtl"] .signal__cta:hover svg { transform: scaleX(-1) translateX(3px); } }
[dir="rtl"] .akr__cert svg { transform: scaleX(-1); }
@media (hover: hover) { [dir="rtl"] .akr__cert:hover svg { transform: scaleX(-1) translate(2px, -2px); } }
[dir="rtl"] .akr__line::before, [dir="rtl"] .akr__line::after { left: calc(50% - 6px); right: 6px; }
[dir="rtl"] .akr__line::after { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--berry), var(--pink)); }
[dir="rtl"] .akr__line li::before { left: auto; right: 0; }