/* ═══════════════════════════════════════════════════════════════════════════
   Fun-Tastic 悠樂長 · pages/services.css
   Page-only styles for Services. Not in a cascade layer, so it wins over the design
   system; everything is scoped to .page--services and nothing shared is restyled.

   Contents
     1  Anchors            4  Chapters and the six service panels
     2  Hero: six on the bridge     5  Who we serve
     3  The chapter rail            6  How we come to you     7  Action
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── 1 Anchors ──
   Other pages link straight to a service (#retina), a chapter or #who-we-serve.
   The page already keeps anchors clear of the header (scroll-padding on the root);
   the extra margin that :target adds on top is taken off here, so that a link from
   another page and a jump made by the script land in the same place: a panel or a
   chapter one rem under the header, in every language and at every text size.
   #who-we-serve is a whole section: its negative margin takes the section's top
   padding back out, so the heading (not the seam above it) is what arrives. */
.page--services :is(.chapter, .service) { scroll-margin-block-start: 0; }
.page--services .who { scroll-margin-block-start: calc(2.5rem - var(--section-pad)); }
.page--services .who:focus { outline: none; }   /* a jump target, not a control: the section fills the screen */

/* Single-column grids on this page take the width they are given, never the width their content
   would like: an implicit "auto" column can be pushed wider than the screen by one long unbreakable
   word. :where() keeps this at the weight of one class, so any layout rule below wins. */
.page--services :where(.svc__layout, .svc__chapters, .chapter, .chapter__title, .chapter__services, .service__facts, .service__more, .who__layout, .who__intro, .who__list, .audience__text, .cta__panel, .cta__text) { grid-template-columns: minmax(0, 1fr); }

/* ───────────────────────────────────────── 2 Hero: six on the bridge ──
   The bridge of the brand, with the six services standing on it. The stops sit on
   the arc's own geometry (see the template), sized as a share of the drawing so the
   whole thing scales as one. */
.page--services .page-hero__art { max-inline-size: 30rem; }
.page--services .sixbridge {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 600 / 220;
  margin-block: 6% 1%;
}
.page--services .sixbridge > .bridge { position: absolute; inset: 0; block-size: 100%; }
.page--services .sixbridge__stop {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  inline-size: 10.6%;
  aspect-ratio: 1;
  translate: calc(-50% * var(--dir)) -50%;
}
.page--services .sixbridge__stop > .icon-circle {
  inline-size: 100%;
  block-size: 100%;
  box-shadow: 0 0 0 .25rem var(--bg);   /* a ring of the ground: the arc passes behind each stop */
}
.page--services .sixbridge__stop > .icon-circle > .icon { inline-size: 54%; block-size: 54%; }
@media (max-width: 55.99rem) {
  .page--services .page-hero__art { max-inline-size: 24rem; }
  .page--services .sixbridge__stop { inline-size: 11.8%; }
}

/* ─────────────────────────────────────────────── 3 The chapter rail ──
   Four plain links. On small screens a block of chunky rows before the chapters;
   from 75rem a strip map that stays beside the reader: a line, four stops, and the
   line fills as far as they have read (services.js). */
.page--services .svc__layout { display: grid; gap: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); }
.page--services .rail { position: relative; }
.page--services .rail__list { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) and (max-width: 74.99rem) {
  .page--services .rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* four chapters: two by two, never three and one */
}
.page--services .rail__link {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-block-size: 3.75rem;
  padding-block: .5rem;
  padding-inline: .5rem 1.25rem;
  border-radius: 1.875rem;
  background: var(--row);
  color: var(--heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, scale var(--dur-1) var(--ease-out);
}
.page--services .rail__link:active { scale: .98; }
.page--services .rail__stop {
  background: var(--indigo);
  color: var(--white);
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.page--services .rail__track { display: none; }
@media (hover: hover) and (pointer: fine) {
  .page--services .rail__link:hover { background: var(--orchid-mist); }
}

@media (min-width: 75rem) {
  .page--services .svc__layout { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
  .page--services .rail { position: sticky; inset-block-start: calc(var(--header-h) + 1.75rem); }
  .page--services .rail__list { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .page--services .rail__link {
    min-block-size: 4.25rem;
    padding-inline: 0 .5rem;
    border-radius: var(--r-row);
    background: none;
    color: var(--fg-muted);
  }
  .page--services .rail__stop {
    background: var(--white);
    color: var(--indigo);
    box-shadow: inset 0 0 0 2px var(--line), 0 0 0 .3rem var(--white);
  }
  .page--services .rail__link:is([aria-current], .is-past) .rail__stop {
    background: var(--indigo);
    color: var(--white);
    box-shadow: inset 0 0 0 2px var(--indigo), 0 0 0 .3rem var(--white);
  }
  .page--services .rail__link[aria-current] { color: var(--heading); font-weight: var(--fw-strong); }
  .page--services .rail__link.is-past { color: var(--heading); }
  .page--services .rail__track {
    position: absolute;
    inset-block: 2.125rem;
    inset-inline-start: calc(1.375rem - 1.5px);
    display: block;
    inline-size: 3px;
    border-radius: 3px;
    background: var(--line);
  }
  .page--services .rail__fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--indigo);
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
}
@media (min-width: 75rem) and (hover: hover) and (pointer: fine) {
  .page--services .rail__link:hover { background: none; color: var(--heading); }
  .page--services .rail__link:hover .rail__stop { box-shadow: inset 0 0 0 2px var(--indigo), 0 0 0 .3rem var(--white); }
}

/* ─────────────────────────── 4 Chapters and the six service panels ──
   Each chapter is a container, so a panel lays itself out by the room it really has
   (beside the rail, across a tablet, down a phone), not by the width of the window. */
.page--services .svc__chapters { display: grid; gap: clamp(4rem, 2.9rem + 4.6vw, 7rem); min-inline-size: 0; }
.page--services .chapter {
  container: chapter / inline-size;
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}
.page--services .chapter__head { display: flex; align-items: center; gap: clamp(1rem, .6rem + 1.6vw, 1.75rem); }
.page--services .chapter__head > .icon-circle { --size: clamp(4.25rem, 3.5rem + 3vw, 6rem); }
.page--services .chapter__title { display: grid; gap: .4rem; min-inline-size: 0; }
.page--services .chapter__title > h3 {
  font-size: calc(clamp(1.7rem, 1.36rem + 1.5vw * var(--ts), 2.5rem) * var(--display-scale));
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-display);
}
.page--services .chapter__title > .lead { max-inline-size: 30em; color: var(--fg-muted); }
.page--services .chapter__services { display: grid; gap: clamp(1rem, .7rem + 1.2vw, 1.5rem); }

/* One panel. The same grammar in all six (icon and name, what happens, who it is for, who to
   contact), set differently by what each one has to show. */
.page--services .service {
  --media: 20rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.15rem, .95rem + .8vw, 1.6rem);
  align-content: start;
}
.page--services .service > * { min-inline-size: 0; margin-block-start: 0; }   /* the grid's gap replaces the panel's flow margins */
.page--services .service__head { display: flex; align-items: center; gap: .9rem 1.1rem; }
.page--services .service__name {
  font-size: calc(clamp(1.5rem, 1.28rem + 1vw * var(--ts), 2.05rem) * var(--display-scale));
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
}
.page--services .service__text { max-inline-size: var(--measure); }
.page--services .service__media { justify-self: start; inline-size: min(100%, 26rem); }
.page--services .service--start { --media: 16rem; }
.page--services .service--start > .service__media { inline-size: min(100%, 20rem); }
.page--services .service--start .frame { --ar: 1; }
.page--services .service--flagship { --media: 19rem; }
.page--services .service--flagship > .service__media { inline-size: min(100%, 20rem); }
/* The handicraft picture is a quiet one: it stays small, with its caption beside it. */
.page--services .service--small { --media: 11rem; }
.page--services .service--small > .service__media {
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  inline-size: 100%;
}

/* One band closes every panel: who it is for, then who to contact and the thing to press. */
.page--services .service__facts { display: grid; border-radius: var(--r-row); background: var(--row); }
.page--services .fact {
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: 1.05rem 1.25rem 1.2rem;
}
.page--services .fact + .fact { border-block-start: 1px solid var(--rule); }
.page--services .fact > dt {
  color: var(--fg-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
}
.page--services .fact--reach { container: reach / inline-size; }

/* Who to contact: the person, the sentence, and the one obvious thing to press. */
.page--services .reach { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .85rem 1rem; }
.page--services .reach__text { max-inline-size: none; }
.page--services .reach__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; }
.page--services .reach__mail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: var(--target);
  color: var(--link);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  text-decoration-line: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: var(--underline-offset);
}
.page--services .reach__mail > .icon { inline-size: 1.35em; block-size: 1.35em; }
@container reach (max-width: 22rem) {
  .page--services .reach__actions > .btn { flex: 1 1 100%; }
}
@media (hover: hover) and (pointer: fine) {
  .page--services .reach__mail:hover { text-decoration-thickness: .16em; }
}

.page--services .service__more { display: grid; gap: 1rem 2rem; align-items: center; }
.page--services .chapter__note > li { color: var(--fg-muted); }

/* Two columns once a chapter is wide enough for a picture and a readable line of text. */
@container chapter (min-width: 46rem) {
  .page--services .service:is(.service--end, .service--small, .service--start) {
    grid-template-columns: minmax(0, 1fr) var(--media);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 4cqi, 3.25rem);
  }
  .page--services .service.service--start { grid-template-columns: var(--media) minmax(0, 1fr); }
  .page--services .service > .service__head { grid-column: 1; grid-row: 1; }
  .page--services .service > .service__text { grid-column: 1; grid-row: 2; }
  .page--services .service > .service__media { grid-column: 2; grid-row: 1 / span 2; inline-size: 100%; }
  .page--services .service--start > :is(.service__head, .service__text) { grid-column: 2; }
  .page--services .service--start > .service__media { grid-column: 1; }
  .page--services .service--start .frame { --ar: 4 / 5; }
  .page--services .service--small > .service__media { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .page--services .service > :is(.service__facts, .service__more) { grid-column: 1 / -1; }
  .page--services .service:not(.service--plain) > .service__facts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .page--services .service:not(.service--plain) .fact + .fact { border-block-start: 0; border-inline-start: 1px solid var(--rule); }
  .page--services .service__more { grid-template-columns: auto minmax(0, 1fr); }
}
@container chapter (min-width: 46rem) and (max-width: 53.99rem) {
  .page--services .service { --media: 15rem; }
  .page--services .service--start { --media: 13rem; }
  .page--services .service--small { --media: 9.5rem; }
}
/* The two legal services have no photograph: the icon and the type carry them, side by side. */
@container chapter (min-width: 50rem) {
  .page--services .chapter__services--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--services .chapter__services--pair > .service { grid-template-rows: auto 1fr auto; align-content: stretch; }
}

/* ───────────────────────────────────────────────── 5 Who we serve ── */
.page--services .who__layout { display: grid; gap: clamp(2rem, 1rem + 4.5vw, 5rem); }
.page--services .who__intro { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-content: start; }
.page--services .who__intro > .section__head { margin-block-end: 0; }
.page--services .who__photo { inline-size: min(100%, 22rem); }
.page--services .who__list { display: grid; gap: .75rem; }
.page--services .audience {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1rem, .6rem + 1.5vw, 1.6rem);
  padding: clamp(1.1rem, .9rem + 1vw, 1.75rem);
  border-radius: var(--r-panel);
  background: var(--row);
}
.page--services .audience__text { display: grid; gap: .3rem; }
.page--services .audience__text > p { max-inline-size: none; color: var(--fg-muted); }
@media (min-width: 60rem) {
  .page--services .who__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
@media (max-width: 29.99rem) {
  .page--services .who__photo { inline-size: min(100%, 17rem); }
  .page--services .audience > .icon-circle { --size: 3.5rem; }
}

/* ──────────────────────────────────────────── 6 How we come to you ──
   A line runs through the four stops and fills as they are read (services.js).
   It is whole by default, so nothing is missing without scripts or with reduced motion.
   Four steps sit in a column, two by two, or four across: never three and one. */
.page--services .how__steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) {
  .page--services .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .page--services .how__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page--services .how__line {
  position: absolute;
  inset-block-start: -3px;
  inset-inline: 0;
  block-size: 3px;
  background: var(--heading);
  transform-origin: 0% 50%;
}
[dir="rtl"] .page--services .how__line { transform-origin: 100% 50%; }

/* ──────────────────────────────────────────────────────── 7 Action ── */
.page--services .cta__panel {
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding: clamp(2rem, 1.2rem + 4vw, 4.5rem);
}
.page--services .cta__panel > * { margin-block-start: 0; }
.page--services .cta__text { display: grid; gap: 1.1rem; justify-items: start; }
.page--services .cta__text > .btn { margin-block-start: .6rem; }
.page--services .cta__art { inline-size: min(100%, 24rem); }
@media (min-width: 56rem) {
  .page--services .cta__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page--services .cta__art { justify-self: end; }
}
@media (max-width: 55.99rem) {
  .page--services .cta__art { inline-size: min(60%, 14rem); }
}

/* Captions: the shared figcaption sets a fixed line-height of 1.5, which is right for Latin and
   makes Nastaliq lines collide. Follow the language's own rhythm instead (1.5 for Latin still). */
.page--services .figure > figcaption { line-height: max(1.5, calc(var(--lh-text) - .15)); }

/* A button with a glyph whose label runs to two lines (German, Russian, Urdu …): the label is set
   from the start side, so the glyph stays beside its first word instead of drifting away from it. */
.page--services .btn > .icon + span { text-align: start; }