/* ============================================================
   TAMON — Services page (loaded after main.css, on services.html only)
   The client's seven services, grouped under the four disciplines of their own "Who we are" line.
   · Hero: the headline, and an index of the four disciplines set large; hovering one draws the neon
     under it and lifts its light, the others step back.
   · Chapters: one per discipline. With room (1024 px and up) the discipline's name holds still at the
     left while its services pass on the right, a neon line under the name filling as the chapter goes by,
     and each discipline has its own light (--tone). Narrower, the name heads its services.
   · Services: glass cards. The opening line and what the service covers are always shown; the rest opens
     under the name (a disclosure button), with a link that starts an enquiry about that service.
   All copy is the client's own (the live Services page); the covers are its own phrases.
   ============================================================ */

/* ---------- Hero ---------- */
.sv-hero{position:relative;isolation:isolate;overflow:clip;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding-top:var(--bar-h);background-color:var(--ink)}
.sv-hero__light{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(46% 52% at 100% 0%,rgb(var(--grad-c-rgb) / .11),transparent 72%),
             radial-gradient(44% 50% at 0% 92%,rgb(var(--grad-a-rgb) / .12),transparent 72%)}
.sv-hero__grain{z-index:-1}
.sv-hero__inner{flex:1 0 auto;display:grid;align-content:space-between;row-gap:clamp(3rem,9vh,6rem);
  padding-block:clamp(2rem,7vh,5rem) clamp(2.5rem,7vh,4.5rem)}
/* sized to its own column: the longest line ("Tailored, evidence-based") is about 10.9em wide */
.sv-hero__head{container-type:inline-size;min-width:0}
.sv-hero__title{margin-top:clamp(.9rem,2.2vh,1.4rem);font-weight:300;font-size:clamp(2.4rem,.6rem + 4.6vw,6rem);
  font-size:max(2.2rem,min(6.4rem,8.8cqi));line-height:1.02;letter-spacing:-.035em}
@media (min-width:768px){.sv-hero__title .rise__line>span{white-space:nowrap}}

/* the index: four disciplines, a line each */
.sv-index__caption{margin-bottom:.9rem;font-family:var(--display);font-weight:500;font-size:var(--fs-sm);color:var(--text-dim)}
.sv-index__list{border-top:1px solid var(--hair)}
.sv-index__item{position:relative;border-bottom:1px solid var(--hair)}
.sv-index__link{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem 2rem;align-items:baseline;
  padding-block:clamp(.95rem,2.3vh,1.5rem);color:var(--text)}
@media (min-width:768px){.sv-index__link{grid-template-columns:minmax(0,1fr) auto}}
.sv-index__name{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,.9rem + 2.6vw,3.5rem);line-height:1.05;letter-spacing:-.028em;
  transition:translate .75s var(--ease-enter),color .35s var(--ease-out)}
.sv-index__services{font-size:var(--fs-sm);line-height:1.45;color:var(--text-dim);transition:color .35s var(--ease-out)}
/* the discipline's own light, and the neon along its rule */
.sv-index__link::before{content:"";position:absolute;inset:-30% -4% -30% -8%;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(36% 70% at 14% 55%,rgb(var(--tone) / .16),transparent 72%);transition:opacity .6s var(--ease-out)}
.sv-index__line{position:absolute;left:0;right:0;bottom:-1px;transform-origin:0 50%;scale:0 1;transition:scale .9s var(--ease-enter)}
.sv-index__link:focus-visible{outline-offset:-2px}
.sv-index__link:focus-visible .sv-index__line{scale:1 1}
@media (hover:hover){
  .sv-index__link:hover .sv-index__name{translate:.3em 0}
  .sv-index__link:hover .sv-index__services{color:var(--text-soft)}
  .sv-index__link:hover .sv-index__line{scale:1 1}
  .sv-index__link:hover::before{opacity:1}
  .sv-index__list:has(.sv-index__link:hover) .sv-index__link:not(:hover) .sv-index__name{color:var(--text-dim)}
}
.sv-index .neon-flow{animation-play-state:paused}
.sv-index__link:is(:hover,:focus-visible) .neon-flow{animation-play-state:running}

/* ---------- Chapters ---------- */
.sv-chapter{position:relative;padding-block:var(--section-y);border-top:1px solid var(--hair)}
.sv-chapter__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(2rem,6vh,3.5rem)}
.sv-chapter__head{position:relative;isolation:isolate;min-width:0}
/* the discipline's light travels with its name: its own stop of the gradient, and where that stop is khaki, the
   firebrick beside it (khaki alone over the navy reads olive; with firebrick it reads as warm light) */
.sv-chapter__glow{position:absolute;left:-40%;top:-60%;width:150%;height:220%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 34% at 62% 58%,rgb(var(--tone-2,var(--tone)) / .07),transparent 72%),
             radial-gradient(closest-side,rgb(var(--tone) / .12),rgb(var(--tone) / .045) 55%,transparent)}
.sv-chapter__count{font-family:var(--display);font-weight:500;font-size:var(--fs-sm);color:var(--text-dim)}
.sv-chapter__title{margin-top:.8rem;font-weight:300;font-size:clamp(2.4rem,1rem + 4vw,5rem);line-height:1;letter-spacing:-.035em}
.sv-chapter__phrase{margin-top:1rem;max-width:26ch;font-size:var(--fs-lead);line-height:1.45;color:var(--text-soft)}
.sv-chapter__progress{display:none}
@media (min-width:1024px){
  .sv-chapter__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,6vw,7rem);align-items:start}
  /* the header can come back over the top of the page, so the name holds a little below it */
  .sv-chapter__head{position:sticky;top:calc(var(--bar-h-c) + clamp(1.5rem,6vh,3.5rem))}
  .sv-chapter__progress{display:block;position:relative;max-width:20rem;height:var(--neon-tube);margin-top:clamp(1.75rem,4.5vh,2.75rem);
    background:var(--hair)}
  .sv-chapter__progress .neon-line{position:absolute;inset:0;height:auto;transform-origin:0 50%}
}
/* the line fills while the chapter fills the screen; without scroll-driven CSS, site.js scrubs it ([data-scrub]) */
@keyframes sv-fill{from{scale:0 1}to{scale:1 1}}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .sv-chapter{view-timeline:--sv-chapter block}
  .sv-chapter__progress .neon-line{animation:sv-fill 1s linear both;animation-timeline:--sv-chapter;animation-range:contain 0% contain 100%}
}

/* where the discipline shows in the work: a chip per project, with its photo */
.sv-work{margin-top:clamp(2rem,5vh,3rem)}
.sv-work__label{font-family:var(--display);font-weight:500;font-size:var(--fs-sm);color:var(--text-dim)}
.sv-work__list{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.8rem}
.sv-work__link{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;padding:.3rem 1rem .3rem .3rem;border-radius:999px;
  font-family:var(--display);font-size:var(--fs-sm);color:var(--text);box-shadow:inset 0 0 0 1px var(--hair-strong);
  transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.sv-work__thumb{flex:none;width:2.25rem;height:2.25rem;border-radius:50%;overflow:clip;background-color:var(--tint,var(--ink-2))}
.sv-work__thumb img{width:100%;height:100%;object-fit:cover;scale:1.02;transition:scale .7s var(--ease-enter)}
.sv-work__link:hover{background-color:rgb(233 239 244 / .07);box-shadow:inset 0 0 0 1px rgb(233 239 244 / .38)}
.sv-work__link:hover .sv-work__thumb img{scale:1.3}

/* ---------- Service cards ---------- */
.sv-chapter__services{display:grid;gap:clamp(1rem,2vw,1.5rem);min-width:0}
.svc{padding:clamp(1.5rem,2.8vw,2.5rem)}
.svc__heading{font:inherit}
.svc__toggle{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;margin:0;padding:0;border:0;border-radius:12px;
  background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.svc__toggle:focus-visible{outline-offset:6px}
.svc__name{font-family:var(--display);font-weight:400;font-size:clamp(1.45rem,1.05rem + 1.2vw,2.15rem);line-height:1.12;letter-spacing:-.02em}
/* plus becomes minus; the neon outline lights while pointed at, and stays on the open card */
.svc__icon{position:relative;isolation:isolate;flex:none;display:block;width:44px;height:44px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--hair-strong);transition:box-shadow .4s var(--ease-out)}
.svc__icon::before,.svc__icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;
  border-radius:1px;background:currentColor;transition:rotate .6s var(--ease-enter)}
.svc__icon::after{rotate:90deg}
.svc.is-open .svc__icon::after{rotate:0deg}
.svc__icon .neon-ring{opacity:0;transition:opacity .5s var(--ease-out)}
.svc__toggle:hover .svc__icon,.svc.is-open .svc__icon{box-shadow:inset 0 0 0 1px transparent}
.svc__toggle:is(:hover,:focus-visible) .svc__icon .neon-ring,.svc.is-open .svc__icon .neon-ring{opacity:1}
.svc:not(.is-open) .svc__toggle:not(:hover) .svc__icon .neon-flow{animation-play-state:paused}

.svc__hook{max-width:34ch;margin-top:clamp(1rem,2.5vh,1.5rem);font-family:var(--display);font-weight:300;
  font-size:clamp(1.25rem,1rem + .95vw,1.8rem);line-height:1.28;letter-spacing:-.014em;color:var(--text)}
.svc__covers{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.svc__covers li{padding:.3rem .8rem;border-radius:999px;font-size:var(--fs-xs);line-height:1.4;color:var(--text-soft);
  box-shadow:inset 0 0 0 1px var(--hair)}
/* the rest of the description: shown in full without JavaScript. No padding on the clipping box (a closed row
   would still be as tall as its padding); the space above lives inside, as margin, and 4px either side keeps
   the link's focus ring in view */
.svc__more-inner{min-height:0;overflow:hidden;padding-inline:4px;margin-inline:-4px}
.svc__text{max-width:62ch;margin-top:clamp(1.25rem,3vh,1.75rem);line-height:1.7;color:var(--text-soft)}
.svc__ask{display:inline-block;margin:1.25rem 0 6px;padding-bottom:2px;font-family:var(--display);font-weight:500;color:var(--text);
  background:var(--gradient) no-repeat 0 100%/0 2px;transition:background-size .5s var(--ease-out)}
.svc__ask:hover,.svc__ask:focus-visible{background-size:100% 2px}
.js .svc__more{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .75s var(--ease-enter),visibility 0s linear .75s}
.js .svc.is-open .svc__more{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .75s var(--ease-enter),visibility 0s}
.js .svc__more-inner>*{opacity:0;translate:0 .8rem;transition:opacity .2s var(--ease-out),translate .2s var(--ease-out)}
.js .svc.is-open .svc__more-inner>*{opacity:1;translate:0 0;transition:opacity .6s var(--ease-out) .15s,translate .9s var(--ease-enter) .15s}
.no-js .svc__icon{display:none}
.no-js .svc__toggle{cursor:default}

@media (prefers-reduced-motion:reduce){
  .sv-index__name,.sv-index__line,.sv-index__link::before,.sv-work__thumb img,.svc__icon::after,
  .js .svc__more,.js .svc__more-inner>*{transition-duration:.01ms!important;transition-delay:0s!important}
}