/* Services page hero "Signal" (owner's choice, 4 Oct 2026): a calm centred headline in the homepage's family,
   lit by one warm hairline that carries six points of light - one for each service.
   A slow pulse travels the line and each point flares as it passes.
   Loaded by services.html only. Every rule lives under .hero-ledger. */

/* ---- calm ground: one centred column, nothing crosses the words ---- */
.hero-ledger{
  color-scheme:dark; /* forced dark modes would invert the headline gradient */
  --sg-ease:cubic-bezier(0.22,1,0.36,1);
  --sg-cycle:6.6s;   /* one pulse every 6.6s */
  --sg-loop:2.6s;    /* the loop waits for the entrance to finish */
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:min(calc(100svh - 60px),880px);
  padding-block:clamp(36px,5vh,64px) clamp(44px,6vh,76px);padding-inline:8px;margin-inline:-8px;
  overflow:clip
}
.hero-ledger::before{display:none}
.hero-ledger .mega-type,.hero-ledger .lh-rule{display:none}

/* ---- the mast: one glass capsule, the jump link a lit segment inside it ---- */
.hero-ledger .lh-mast{
  display:inline-flex;align-items:center;gap:14px;max-width:100%;
  margin:0;padding:5px 5px 5px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(241,239,232,0.075),rgba(241,239,232,0.025));
  border:1px solid rgba(241,239,232,0.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 12px 32px -14px rgba(0,0,0,0.8);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)
}
.hero-ledger .lh-kicker{gap:10px;font-size:0.66rem;font-weight:600;letter-spacing:0.2em;color:#a6a195}
.hero-ledger .lh-kicker::before{width:6px;height:6px;box-shadow:0 0 10px rgba(255,107,0,0.85)}
.hero-ledger .lh-hair{flex:none;width:1px;height:14px;background:rgba(241,239,232,0.16)}
.hero-ledger .lh-jump{
  gap:6px;min-height:30px;padding:0 13px;border-radius:999px;
  font-size:0.76rem;font-weight:600;letter-spacing:0.01em;color:#ece9e1;
  background:rgba(241,239,232,0.07);border:1px solid rgba(241,239,232,0.1);
  transition:border-color 0.3s var(--sg-ease),color 0.3s var(--sg-ease)
}
.hero-ledger .lh-jump span{color:#ff8a33}
.hero-ledger .lh-jump:hover{color:#fff;border-color:rgba(255,138,51,0.55)}

/* ---- headline: General Sans 600, one statement over three calm rows ---- */
.hero-ledger .mega-title{
  position:relative;z-index:0;
  font-family:var(--font-display);font-weight:600;font-style:normal;font-variation-settings:normal;
  font-size:clamp(2.5rem,5vw,5.4rem);line-height:1.04;letter-spacing:-0.034em;
  max-width:none;margin-top:clamp(26px,3.6vh,40px);text-wrap:balance;color:#f1efe8
}
.hero-ledger .mega-title .line{display:block;overflow:visible;padding-block:0}
.hero-ledger .mega-title .line>span{text-wrap:balance}
.hero-ledger .mega-title .line+.line{font-size:0.8em;letter-spacing:-0.03em;margin-top:0.14em}
.hero-ledger .mega-title .line .accent{
  display:block;width:fit-content;margin-inline:auto;
  font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit
}

/* metallic sheen, white at the top of each row and warm grey at the foot.
   Without JavaScript the line carries it (one tile per row); once motion.js
   splits the words, each word carries its own copy. */
.hero-ledger .mega-title .line>span,
.hero-ledger .mega-title .line .swi{
  background-image:linear-gradient(180deg,#ffffff 6%,#f6f3ec 42%,#c4bdb1 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.hero-ledger .mega-title .line:nth-child(2)>span,
.hero-ledger .mega-title .line:nth-child(2) .swi{
  background-image:linear-gradient(180deg,#f4f1ea 6%,#ddd7cc 44%,#aba498 94%)
}
.hero-ledger .mega-title .line>span{background-size:100% 1.04em;background-repeat:repeat-y}
.hero-ledger .mega-title .line .swi{background-size:100% 100%;padding-bottom:0.06em;margin-bottom:-0.06em}
.hero-ledger .mega-title .line:nth-child(n)>span:has(.sw){background-image:none}
/* the accent: same sans, lit orange from above */
.hero-ledger .mega-title .line:nth-child(n) .accent,
.hero-ledger .mega-title .line:nth-child(n) .accent .swi{
  background-image:linear-gradient(180deg,#ffb347 4%,#ff8a33 46%,#ff6b00 92%);background-size:100% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.hero-ledger .mega-title .line:nth-child(n) .accent:has(.sw){background-image:none}

/* the halo: the same warm light, very faint, blooming behind the words */
.hero-ledger .mega-title::before{
  content:"";position:absolute;z-index:-1;left:-28%;right:-28%;top:-95%;bottom:-75%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,122,26,0.075),rgba(255,107,0,0.04) 42%,rgba(255,107,0,0.012) 72%,rgba(255,107,0,0) 100%)
}

/* ---- opening paragraph: small and quiet ---- */
.hero-ledger>.lh-sub{
  margin-top:clamp(22px,2.8vh,30px);max-width:46em;
  font-size:clamp(0.98rem,1.08vw,1.08rem);line-height:1.62;font-weight:400;color:#9d988d;text-wrap:balance
}

/* ---- "Coverage and terms": a quiet line of text with a hairline plus ---- */
.hero-ledger .hero-fold{margin:clamp(12px,1.8vh,18px) 0 0;max-width:min(46em,100%)}
.hero-ledger .hero-fold summary{
  display:inline-flex;gap:10px;padding:5px 5px 5px 12px;border:0;border-radius:999px;
  font-family:var(--font-display);font-weight:500;font-size:0.84rem;letter-spacing:0.01em;color:#a8a397;
  transition:color 0.3s var(--sg-ease)
}
.hero-ledger .hero-fold summary::after{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(241,239,232,0.16);background:rgba(241,239,232,0.04);
  font-size:0.95rem;line-height:1;color:#ff8a33;transition:border-color 0.3s var(--sg-ease)
}
.hero-ledger .hero-fold summary:hover{border:0;color:#ece9e1}
.hero-ledger .hero-fold summary:hover::after{border-color:rgba(255,138,51,0.6)}
.hero-ledger .hero-fold .sec-fold-body{padding-top:10px}
.hero-ledger .hero-fold .lh-sub{margin:0 auto;max-width:44em;font-size:0.92rem;line-height:1.62;color:#8f8a80;text-wrap:balance}

/* ---- the signal: one warm hairline, six points of light ---- */
.hero-ledger>.sg-signal{
  position:relative;z-index:0;flex:none;width:min(860px,66%);height:24px;
  margin-top:clamp(30px,4.8vh,48px);pointer-events:none
}
/* the light the line spills, up and down */
.hero-ledger .sg-signal::before{
  content:"";position:absolute;left:-14%;right:-14%;top:50%;height:200px;margin-top:-100px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,122,26,0.2),rgba(255,107,0,0.075) 42%,rgba(255,107,0,0.02) 72%,rgba(255,107,0,0) 100%)
}
/* the track holds the line and the pulse, and fades both out at the ends */
.hero-ledger .sg-track{
  position:absolute;left:0;right:0;top:-18px;bottom:-18px;container-type:inline-size;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.5) 10%,#000 26%,#000 74%,rgba(0,0,0,0.5) 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.5) 10%,#000 26%,#000 74%,rgba(0,0,0,0.5) 90%,transparent 100%)
}
.hero-ledger .sg-line{
  position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-0.5px;
  background:linear-gradient(90deg,rgba(255,150,70,0.45),rgba(255,196,146,0.8) 34%,#ffeedd 50%,rgba(255,196,146,0.8) 66%,rgba(255,150,70,0.45));
  box-shadow:0 0 6px rgba(255,138,51,0.6),0 0 22px rgba(255,107,0,0.3)
}
/* the pulse: a soft streak of light with a bright head and a tail behind it */
.hero-ledger .sg-pulse{
  position:absolute;left:0;top:50%;width:280px;height:48px;margin-top:-24px;opacity:0;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,214,170,0.6),rgba(255,138,51,0.2) 38%,rgba(255,107,0,0.05) 62%,rgba(255,107,0,0) 76%)
}
.hero-ledger .sg-pulse::before{
  content:"";position:absolute;left:8%;right:50%;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,150,70,0),rgba(255,176,110,0.6) 55%,#fff4e6);
  box-shadow:0 0 8px rgba(255,138,51,0.45)
}
.hero-ledger .sg-pulse::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#fffaf3;box-shadow:0 0 6px 2px rgba(255,220,180,0.95),0 0 22px 6px rgba(255,138,51,0.55)
}
/* the six points; the middle two are the brightest, the outer two fade with the line */
.hero-ledger .sg-pt{position:absolute;top:50%;width:0;height:0;opacity:var(--o,1)}
.hero-ledger .sg-pt:nth-child(2){left:10%;--o:0.5;--d:0.218s}
.hero-ledger .sg-pt:nth-child(3){left:26%;--o:0.8;--d:0.789s}
.hero-ledger .sg-pt:nth-child(4){left:42%;--o:1;--d:1.359s}
.hero-ledger .sg-pt:nth-child(5){left:58%;--o:1;--d:1.929s}
.hero-ledger .sg-pt:nth-child(6){left:74%;--o:0.8;--d:2.499s}
.hero-ledger .sg-pt:nth-child(7){left:90%;--o:0.5;--d:3.070s}
.hero-ledger .sg-pt::before{ /* bloom */
  content:"";position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;opacity:0.7;
  background:radial-gradient(closest-side,rgba(255,184,120,0.7),rgba(255,122,26,0.24) 48%,rgba(255,107,0,0) 100%)
}
.hero-ledger .sg-pt::after{ /* core */
  content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
  background:#fff6ea;box-shadow:0 0 4px 1px rgba(255,206,160,0.95),0 0 14px 3px rgba(255,122,26,0.55)
}

/* ---- the shelf: buttons like the homepage, facts quiet underneath ---- */
.hero-ledger .lh-shelf{
  display:flex;flex-direction:column;align-items:center;gap:0;width:100%;
  margin-top:clamp(30px,4.6vh,46px);padding:0;border:0
}
.hero-ledger .lh-ctas{justify-content:center;gap:12px 14px}
.hero-ledger .btn-hero{
  min-height:50px;padding:0 28px;background:linear-gradient(180deg,#ff8f3a 0%,#ff6b00 100%);color:#1a0d02;
  box-shadow:inset 0 1px 0 rgba(255,232,205,0.55),inset 0 -1px 0 rgba(110,36,0,0.25),0 12px 34px -12px rgba(255,107,0,0.75)
}
.hero-ledger .btn-hero:hover{box-shadow:inset 0 1px 0 rgba(255,232,205,0.6),inset 0 -1px 0 rgba(110,36,0,0.25),0 16px 44px -12px rgba(255,107,0,0.9)}
.hero-ledger .lh-ghost{
  min-height:50px;padding:0 27px;color:var(--ink);border:1px solid rgba(241,239,232,0.16);
  background:linear-gradient(180deg,rgba(241,239,232,0.06),rgba(241,239,232,0.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 10px 30px -14px rgba(0,0,0,0.7);
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%)
}
.hero-ledger .lh-ghost:hover{border-color:rgba(255,138,51,0.6);color:#fff}
.hero-ledger .lh-facts{margin:clamp(28px,4.4vh,46px) 0 0;justify-content:center;gap:10px 40px}
.hero-ledger .lh-facts li{font-size:0.86rem;color:#8f8a80}
.hero-ledger .lh-facts b{color:#ece9e1}

/* ---- motion ---- */
@keyframes sg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sg-fade{from{opacity:0}}
@keyframes sg-bloom{from{opacity:0;transform:scale(0.82)}}
@keyframes sg-draw{from{clip-path:inset(-20px 100% -20px 0)}to{clip-path:inset(-20px 0 -20px 0)}}
@keyframes sg-on{from{opacity:0;transform:scale(0.2)}}
/* the pulse crosses the line in the first 54% of the cycle, then rests */
@keyframes sg-travel{
  0%{transform:translateX(-50%);opacity:0}
  5%{opacity:1}
  49%{opacity:1}
  54%{transform:translateX(calc(100cqw - 50%));opacity:0}
  100%{transform:translateX(calc(100cqw - 50%));opacity:0}
}
@keyframes sg-flare-bloom{0%{opacity:0.7;transform:scale(1)}3%{opacity:1;transform:scale(2.1)}17%,100%{opacity:0.7;transform:scale(1)}}
@keyframes sg-flare-core{0%{transform:scale(1)}3%{transform:scale(1.6)}17%,100%{transform:scale(1)}}

@media (prefers-reduced-motion:no-preference){
  /* the site's own title choreography is replaced by the word rise below */
  html.motion-on .hero-ledger .mega-title{animation:none}
  html.motion-on .hero-ledger .mega-title .line>span{transform:none;animation:none;opacity:1;filter:none}
  html.motion-on .hero-ledger .lh-shelf{animation:none} /* its buttons and facts rise on their own */

  /* before the curtain lifts: everything waits, unlit */
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger :is(.lh-mast,.hero-fold,.lh-ctas,.lh-facts,.sg-track,.sg-pt),
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger>.lh-sub,
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger .mega-title::before,
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger .sg-signal::before{opacity:0;animation:none}

  /* the words rise and sharpen (motion.js wraps them in .sw/.swi) */
  html.motion-on .hero-ledger .mega-title .swi{
    transition:transform 1.1s var(--sg-ease) var(--swd,0ms),opacity 1.1s var(--sg-ease) var(--swd,0ms),filter 1.25s var(--sg-ease) var(--swd,0ms)
  }
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger .mega-title .swi,
  html.motion-on .hero-ledger .mega-title:not(.sw-in) .swi{opacity:0;filter:blur(12px);transform:translateY(0.42em)}

  /* the entrance: the halo blooms, the line draws left to right, the points switch on in turn */
  html.motion-on.si-revealed .hero-ledger .mega-title::before{animation:sg-bloom 1.6s var(--sg-ease) 0.1s backwards}
  html.motion-on.si-revealed .hero-ledger .lh-mast{animation:sg-rise 0.9s var(--sg-ease) 0.05s backwards}
  html.motion-on.si-revealed .hero-ledger>.lh-sub{animation:sg-rise 1s var(--sg-ease) 0.35s backwards}
  html.motion-on.si-revealed .hero-ledger .hero-fold{animation:sg-rise 1s var(--sg-ease) 0.45s backwards}
  html.motion-on.si-revealed .hero-ledger .sg-track{animation:sg-draw 1.2s cubic-bezier(0.45,0.05,0.25,1) 0.6s backwards}
  html.motion-on.si-revealed .hero-ledger .sg-signal::before{animation:sg-fade 1.4s var(--sg-ease) 0.9s backwards}
  html.motion-on.si-revealed .hero-ledger .sg-pt{animation:sg-on 0.7s var(--sg-ease) backwards}
  html.motion-on.si-revealed .hero-ledger .sg-pt:nth-child(2){animation-delay:0.72s}
  html.motion-on.si-revealed .hero-ledger .sg-pt:nth-child(3){animation-delay:0.86s}
  html.motion-on.si-revealed .hero-ledger .sg-pt:nth-child(4){animation-delay:1s}
  html.motion-on.si-revealed .hero-ledger .sg-pt:nth-child(5){animation-delay:1.14s}
  html.motion-on.si-revealed .hero-ledger .sg-pt:nth-child(6){animation-delay:1.28s}
  html.motion-on.si-revealed .hero-ledger .sg-pt:nth-child(7){animation-delay:1.42s}
  html.motion-on.si-revealed .hero-ledger .lh-ctas{animation:sg-rise 1s var(--sg-ease) 0.75s backwards}
  html.motion-on.si-revealed .hero-ledger .lh-facts{animation:sg-rise 1s var(--sg-ease) 0.95s backwards}

  /* the loop: one pulse every 6.6s; each point flares as the pulse reaches it (--d) */
  html.motion-on.si-revealed .hero-ledger .sg-pulse{animation:sg-travel var(--sg-cycle) linear var(--sg-loop) infinite}
  html.motion-on.si-revealed .hero-ledger .sg-pt::before{animation:sg-flare-bloom var(--sg-cycle) var(--sg-ease) calc(var(--sg-loop) + var(--d)) infinite}
  html.motion-on.si-revealed .hero-ledger .sg-pt::after{animation:sg-flare-core var(--sg-cycle) var(--sg-ease) calc(var(--sg-loop) + var(--d)) infinite}
  /* off screen, the loop rests (hero-signal.js toggles .sg-idle) */
  html.motion-on.si-revealed .hero-ledger.sg-idle .sg-pulse,
  html.motion-on.si-revealed .hero-ledger.sg-idle .sg-pt::before,
  html.motion-on.si-revealed .hero-ledger.sg-idle .sg-pt::after{animation-play-state:paused}
}


/* ---- tablet: the chip rail sits on top, so the hero centres in what is left of the screen ---- */
@media (max-width:1099px) and (min-width:701px){
  .hero-ledger{min-height:min(calc(100svh - 190px),820px)}
  .hero-ledger .mega-title{font-size:clamp(2.5rem,6.4vw,4.6rem)}
}
@media (max-width:1099px) and (min-width:701px) and (max-height:860px){
  .hero-ledger{min-height:0;padding-block:24px 40px}
  .hero-ledger .mega-title{font-size:clamp(2.5rem,5.2vw,4rem);margin-top:20px}
  .hero-ledger>.lh-sub{margin-top:16px}
  .hero-ledger>.sg-signal{margin-top:22px}
  .hero-ledger .lh-shelf{margin-top:22px}
}

/* ---- phone ---- */
@media (max-width:700px){
  .hero-ledger{min-height:0;justify-content:flex-start;padding-block:22px 34px}
  .hero-ledger .lh-mast{flex-direction:column;gap:10px;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-ledger .lh-hair{display:none}
  .hero-ledger .lh-kicker{font-size:0.6rem;letter-spacing:0.14em}
  .hero-ledger .lh-jump{min-height:36px;padding:0 15px;font-size:0.78rem;
    background:linear-gradient(180deg,rgba(241,239,232,0.075),rgba(241,239,232,0.025));border-color:rgba(241,239,232,0.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
  .hero-ledger .mega-title{font-size:clamp(2rem,10.2vw,2.7rem);line-height:1.05;margin-top:22px}
  .hero-ledger .mega-title .line>span{background-size:100% 1.05em}
  .hero-ledger .mega-title .line+.line{font-size:0.72em;margin-top:0.3em}
  .hero-ledger .mega-title .line .accent{display:inline;width:auto;margin:0}
  .hero-ledger .mega-title::before{left:-10%;right:-10%;top:-60%;bottom:-50%}
  .hero-ledger>.lh-sub{margin-top:18px;font-size:0.97rem;line-height:1.58}
  .hero-ledger .hero-fold{margin-top:10px}
  .hero-ledger>.sg-signal{width:88%;margin-top:26px}
  .hero-ledger .sg-pulse{width:190px}
  .hero-ledger .sg-pt::before{left:-15px;top:-15px;width:30px;height:30px}
  .hero-ledger .lh-shelf{margin-top:24px}
  .hero-ledger .lh-ctas{width:100%;gap:10px 8px}
  .hero-ledger .btn-hero{padding:0 14px;font-size:0.88rem}
  .hero-ledger .lh-ghost{padding:0 14px;font-size:0.88rem}
  .hero-ledger .lh-facts{margin-top:26px;gap:6px 20px}
  .hero-ledger .lh-facts li{font-size:0.82rem}
}

/* ---- print / save as PDF: backgrounds are dropped, so the headline takes solid colours ---- */
@media print{
  .hero-ledger .mega-title .line:nth-child(n)>span,
  .hero-ledger .mega-title .line:nth-child(n) .swi,
  .hero-ledger .mega-title .line:nth-child(n) .accent,
  .hero-ledger .mega-title .line:nth-child(n) .accent .swi{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
  .hero-ledger .mega-title .line:nth-child(n) .accent,
  .hero-ledger .mega-title .line:nth-child(n) .accent .swi{color:var(--orange)}
  .hero-ledger .mega-title::before,.hero-ledger>.sg-signal{display:none}
}

/* ---- Windows high contrast: solid text gets backplates, so the rows need more leading ---- */
@media (forced-colors:active){.hero-ledger .mega-title{line-height:1.2}}