/* ==========================================================================
   Sharpline Elite Services: site styles (The Poster). Reads only tokens.css.
   A red opening band with the headline, one off-white page on a 12-column
   grid, an ink band for the consultation and the footer. No cards, no
   eyebrows, no illustrations.
   ========================================================================== */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;overflow-x:clip;-webkit-tap-highlight-color:transparent}
body{min-height:100svh;display:flex;flex-direction:column;background:var(--color-paper);color:var(--color-ink-2);font-family:var(--font);font-size:var(--text-body);font-weight:var(--weight-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a,button{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul[role=list],ol[role=list]{list-style:none;padding:0}
h1,h2,h3{color:var(--color-ink);font-weight:var(--weight-strong);letter-spacing:var(--tracking-h2);line-height:var(--leading-tight);text-wrap:balance}
h2{font-size:var(--display-2)}
h3{font-size:var(--title);letter-spacing:var(--tracking-h3);line-height:var(--leading-title)}
p{text-wrap:pretty}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[hidden]{display:none!important}
main{flex:1}
.skip-link{position:absolute;left:var(--gutter);top:-100%;z-index:100;padding:var(--space-1) var(--space-2);background:var(--color-ink);color:var(--color-onyx-ink);border-radius:var(--radius-field)}
.skip-link:focus{top:var(--space-1)}

/* ---- Grid ---- */
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.container--narrow{width:min(100% - 2*var(--gutter),var(--container-narrow));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:var(--space-4)}
.sec{padding-block:var(--space-section)}

/* ---- Text roles ---- */
.fine{font-size:var(--text-fine);color:var(--color-muted)}
.muted{color:var(--color-muted)}
.link{display:inline-block;font-weight:var(--weight-strong);color:var(--color-red);border-bottom:var(--rule-strong) solid currentColor;padding-bottom:2px}
.link:active{color:var(--color-red-deep)}
.link-inline{text-decoration:underline;text-underline-offset:.15em}

/* ---- Buttons: one shape, two kinds per ground ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--btn-h);padding:1rem 1.75rem;border-radius:var(--radius-pill);font-weight:var(--weight-strong);font-size:var(--text-body);line-height:1;text-align:center;border:var(--border-btn) solid currentColor;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn--white{background:var(--color-white);border-color:var(--color-white);color:var(--color-red)}
.btn--ghost-white{color:var(--color-on-red)}
.btn--ink{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-onyx-ink)}
.btn--block{width:100%}
.btn--small{min-height:var(--btn-h-small);padding:.6rem 1.1rem;font-size:var(--text-small)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(var(--hover-lift))}
  .btn--white:hover{background:var(--color-red-tint);border-color:var(--color-red-tint)}
  .btn--ghost-white:hover{background:var(--color-on-red);color:var(--color-red)}
  .btn--ink:hover{background:var(--color-red);border-color:var(--color-red)}
}

/* ---- The red opening band: header and hero ---- */
.top{background:var(--color-red);color:var(--color-on-red)}
.top :focus-visible{outline-color:var(--color-on-red)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--header-h)}
.wm{display:flex;align-items:center;gap:.6rem;font-weight:var(--weight-bold);font-size:1.125rem;letter-spacing:var(--tracking-wm);color:inherit}
.wm i{width:9px;height:9px;background:var(--color-gold);transform:rotate(45deg);flex:none}
.nav{display:flex;gap:1.75rem;font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--color-red-tint)}
.nav a{padding-block:.5rem;border-bottom:var(--rule) solid transparent;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.nav a:active{color:var(--color-on-red)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--color-on-red);border-bottom-color:var(--color-on-red)}}
.hd .actions{display:flex;align-items:center;gap:var(--space-2)}
.nav-toggle{display:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center;border-radius:var(--radius-pill);color:var(--color-on-red)}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle:active{background:var(--color-red-deep)}
.mobile-nav{border-top:var(--rule) solid var(--color-red-deep);padding-block:var(--space-2) var(--space-4)}
.mobile-nav li a{display:flex;align-items:center;min-height:var(--tap);padding-block:.4rem;font-size:1.25rem;font-weight:var(--weight-strong);color:var(--color-on-red);border-bottom:var(--rule) solid var(--color-red-deep)}
.mobile-nav li a:active{color:var(--color-red-tint)}
.mobile-nav .btn{margin-top:var(--space-3)}
.mobile-nav .btn+.btn{margin-top:var(--space-2)}

.hero{padding-block:var(--space-6) var(--space-section);text-align:center}
.hero h1{color:var(--color-on-red);font-size:var(--display-1);letter-spacing:var(--tracking-display);line-height:var(--leading-display);max-width:11ch;margin-inline:auto}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .w span{display:inline-block}
.hero .lede{color:var(--color-red-tint);font-size:var(--text-lede);line-height:var(--leading-lede);max-width:38rem;margin:var(--space-4) auto 0}
.hero .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-5)}

/* A short header band for the inner pages */
.top--bar .hd{border-bottom:0}

/* ---- Statement ---- */
.proof{padding-top:var(--space-section)}
.proof .row{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
.proof .row p{grid-column:1/8;font-size:var(--text-statement);line-height:var(--leading-statement);letter-spacing:var(--tracking-h3);color:var(--color-ink);font-weight:var(--weight-medium)}
.proof .row small{grid-column:8/13;color:var(--color-muted);font-size:var(--text-small);line-height:var(--leading-quote)}

/* ---- Services: three columns of unequal width on one rule ---- */
.services h2{grid-column:1/13;max-width:16ch}
.svc{position:relative;grid-column:1/13;display:grid;grid-template-columns:5fr 4fr 3fr;column-gap:var(--gap);padding-top:var(--space-4)}
.svc::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--rule-strong);background:var(--color-ink);transform-origin:left}
.svc article+article{border-left:var(--rule) solid var(--color-line);padding-left:var(--gap)}
.svc h3{margin-bottom:var(--space-2)}
.svc p{max-width:28rem}
.svc .link{margin-top:var(--space-3)}

/* ---- Funding: a ruled list, heading left ---- */
.funding h2{grid-column:1/6;max-width:10ch}
.funding .list{grid-column:7/13}
.funding li{display:grid;grid-template-columns:minmax(0,14rem) 1fr;gap:var(--space-1) var(--space-4);padding-block:var(--space-3);border-top:var(--rule) solid var(--color-line)}
.funding li:last-child{border-bottom:var(--rule) solid var(--color-line)}
.funding li h3{font-size:var(--text-quote);letter-spacing:0;line-height:var(--leading-title)}
.funding li p{font-size:var(--text-small);color:var(--color-muted)}
.funding .fine{grid-column:7/13}
.funding .cta{grid-column:7/13}

/* ---- Results: two giant numerals, then four on a rule ---- */
.results{background:var(--color-white);border-block:var(--rule) solid var(--color-line)}
.results h2{grid-column:1/13}
.big{grid-column:1/13;display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gap);row-gap:var(--space-5)}
.big .n{font-size:var(--display-num);line-height:var(--leading-num);font-weight:var(--weight-bold);letter-spacing:var(--tracking-num);color:var(--color-red);font-variant-numeric:tabular-nums}
.big .n em{font-style:normal;font-size:var(--text-num-join);letter-spacing:0;font-weight:var(--weight-medium);color:var(--color-muted);margin-left:.4em;vertical-align:.5em;font-variant-numeric:normal}
.big blockquote p{margin-top:var(--space-3);max-width:var(--measure);font-size:var(--text-quote);line-height:var(--leading-quote);color:var(--color-ink-2)}
.big figcaption{margin-top:var(--space-2);color:var(--color-muted);font-size:var(--text-small)}
.rest{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap);row-gap:var(--space-4);padding-top:var(--space-5);border-top:var(--rule) solid var(--color-line)}
.rest b{display:block;font-size:var(--text-result);font-weight:var(--weight-bold);letter-spacing:var(--tracking-h2);color:var(--color-ink)}
.rest blockquote p{margin-top:var(--space-2);font-size:var(--text-small)}
.rest figcaption{margin-top:var(--space-1);color:var(--color-muted);font-size:var(--text-fine)}
.results .note{grid-column:1/13;font-size:var(--text-small);color:var(--color-muted)}

/* ---- Process: a row of verbs ---- */
.process h2{grid-column:1/13}
.steps{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap);row-gap:var(--space-4)}
.step{position:relative;padding-top:var(--space-3)}
.step::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--rule-strong);background:var(--color-ink);transform-origin:left}
.step h3{font-size:var(--title-step);letter-spacing:var(--tracking-h2)}
.step .when{color:var(--color-red);font-weight:var(--weight-strong);margin-top:var(--space-1)}
.step p+p{margin-top:var(--space-2);font-size:var(--text-small)}

/* ---- About: heading left, text right ---- */
.about{background:var(--color-white);border-top:var(--rule) solid var(--color-line)}
.about h2{grid-column:1/6;font-size:var(--display-4);max-width:10ch}
.about .txt{grid-column:7/13}
.about p+p{margin-top:var(--space-2)}
.about ul{margin-top:var(--space-4);display:grid;gap:var(--space-2)}
.about li b{color:var(--color-ink);font-weight:var(--weight-strong)}

/* ---- FAQ: two columns of questions ---- */
.faq h2{grid-column:1/13}
.faq .list{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-6);row-gap:0}
.faq details{border-top:var(--rule) solid var(--color-line)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);min-height:var(--tap);padding:1.1rem 0;cursor:pointer;list-style:none;font-size:var(--text-summary);font-weight:var(--weight-strong);color:var(--color-ink);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-red);flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:active{color:var(--color-red)}
.faq details p{padding-bottom:1.1rem;font-size:var(--text-small);max-width:var(--measure)}

/* ---- Consultation: the ink band mirrors the red at the start ---- */
.consult{background:var(--color-ink);color:var(--color-onyx-ink-2)}
.consult :focus-visible{outline-color:var(--color-ring)}
.consult h2{color:var(--color-onyx-ink);grid-column:1/7;font-size:var(--display-3)}
.consult .txt{grid-column:1/6}
.consult .txt p{max-width:26rem}
.consult .direct{margin-top:var(--space-4);display:grid;gap:var(--space-2)}
.consult .direct a{display:block;color:var(--color-onyx-ink);font-size:var(--text-direct);font-weight:var(--weight-strong);letter-spacing:var(--tracking-h3);overflow-wrap:anywhere}
.consult .direct a:active{color:var(--color-onyx-ink-2)}
.consult .direct small{display:block;color:var(--color-onyx-muted);font-size:var(--text-small);font-weight:var(--weight-body);letter-spacing:0}
.consult .form-wrap{grid-column:7/13}
.form{display:grid;gap:var(--space-3)}
.field{display:grid;gap:.4rem;min-width:0}
.field label{font-size:var(--text-small);color:var(--color-onyx-ink);font-weight:var(--weight-medium)}
.field label span{color:var(--color-onyx-muted);font-weight:var(--weight-body)}
.field input,.field select,.field textarea{width:100%;min-height:var(--field-h);padding:.9rem 1rem;border:var(--border-btn) solid var(--color-onyx-border);border-radius:var(--radius-field);background:var(--color-onyx-2);color:var(--color-onyx-ink);font:inherit;font-size:var(--text-body)}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-ring)}
.field [aria-invalid=true]{border-color:var(--color-error)}
.field .err{font-size:var(--text-fine);color:var(--color-error);min-height:1.2em}
.field .err:empty{display:none}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.form .btn--white{color:var(--color-ink)}
.form .status{font-size:var(--text-small);color:var(--color-error)}
.form .status:empty{display:none}
.consult .fine{color:var(--color-onyx-muted)}
.consult .fine a{text-decoration:underline;text-underline-offset:.15em}
.success{display:grid;gap:var(--space-2);max-width:var(--measure)}
.success svg{width:48px;height:48px;color:var(--color-onyx-ink)}
.success h3{color:var(--color-onyx-ink)}
.success h3:focus{outline:none}

/* ---- Footer ---- */
.site-footer{background:var(--color-ink);color:var(--color-onyx-muted);border-top:var(--rule) solid var(--color-onyx-line);padding-block:var(--space-5)}
.site-footer :focus-visible{outline-color:var(--color-ring)}
.foot{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:var(--space-3);font-size:var(--text-small)}
.foot .a{grid-column:1/6;color:var(--color-onyx-ink)}
.foot .a p{margin-top:var(--space-2);max-width:30rem;color:var(--color-onyx-muted)}
.foot .b{grid-column:7/10}
.foot .c{grid-column:10/13}
.foot ul{display:grid;gap:.4rem}
.foot a:active{color:var(--color-onyx-ink)}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--color-onyx-ink)}}
.site-footer .fine{color:var(--color-onyx-muted)}
.foot .legal{grid-column:1/13;max-width:60rem;padding-top:var(--space-3);border-top:var(--rule) solid var(--color-onyx-line)}
.foot .legal a{text-decoration:underline;text-underline-offset:.15em}

/* ---- Inner pages: privacy, 404 ---- */
.doc{padding-block:var(--space-6) var(--space-section)}
.doc h1{font-size:var(--title-doc)}
.doc .fine{margin-top:var(--space-2)}
.doc h2{font-size:var(--title);letter-spacing:var(--tracking-h3);margin-top:var(--space-5)}
.doc p,.doc ul{margin-top:var(--space-2);max-width:var(--measure)}
.doc ul{padding-left:1.2em}
.doc a:not(.btn){color:var(--color-red);text-decoration:underline;text-underline-offset:.15em}
.doc .cta{margin-top:var(--space-5)}

/* ---- Responsive ---- */
@media (max-width:64rem){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .proof .row p,.proof .row small,.funding h2,.funding .list,.funding .fine,.funding .cta,.about h2,.about .txt,.consult h2,.consult .txt,.consult .form-wrap,.foot .a,.foot .b,.foot .c{grid-column:1/-1}
  .svc{grid-template-columns:1fr}
  .svc article+article{border-left:0;padding-left:0;border-top:var(--rule) solid var(--color-line);padding-top:var(--space-3);margin-top:var(--space-3)}
  .big,.rest,.steps,.faq .list{grid-template-columns:1fr}
  .about h2,.funding h2{max-width:none}
  .proof .row small{margin-top:var(--space-2)}
}
@media (max-width:36rem){
  .form .two{grid-template-columns:1fr}
  .hero{padding-top:var(--space-5)}
  .btn:not(.btn--small){white-space:normal}
  .funding li{grid-template-columns:1fr}
}

@media (max-width:24rem){
  .hd .actions .btn{display:none}
}

/* ---- Motion ----
   One idea: the page is set, then everything arrives in reading order. The headline
   words lift out of their masks on load; every later section's rows settle in as it
   is reached, each a beat after the last; the rules under the services and the steps
   draw across; the two lead scores climb from the old number to the new one.
   Start states apply only with JS on and motion allowed, and never from opacity 0. */
@keyframes rise{from{opacity:var(--reveal-rest);transform:translateY(var(--reveal-rise))}to{opacity:1;transform:none}}
@keyframes lift{from{transform:translateY(108%)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .hero h1 .w span{animation:lift var(--dur-hero) var(--ease-out) both;animation-delay:calc(var(--w,0) * var(--word-stagger))}
  .js .hero .lede{animation:rise var(--dur-reveal) var(--ease-out) both;animation-delay:var(--hero-lede-delay)}
  .js .hero .cta{animation:rise var(--dur-reveal) var(--ease-out) both;animation-delay:var(--hero-cta-delay)}

  .js .reveal > *,.js .reveal :is(.svc,.steps,.rest,.big,.list) > *{opacity:var(--reveal-rest);transform:translateY(var(--reveal-rise));transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
  .js .reveal > :is(.svc,.steps,.rest,.big,.list){opacity:1;transform:none;transition:none}
  .js .reveal.is-in > *,.js .reveal.is-in :is(.svc,.steps,.rest,.big,.list) > *{opacity:1;transform:none}
  .js .reveal > :nth-child(2),.js .reveal :is(.svc,.steps,.rest,.big,.list) > :nth-child(2){transition-delay:calc(1 * var(--stagger))}
  .js .reveal > :nth-child(3),.js .reveal :is(.svc,.steps,.rest,.big,.list) > :nth-child(3){transition-delay:calc(2 * var(--stagger))}
  .js .reveal > :nth-child(4),.js .reveal :is(.svc,.steps,.rest,.big,.list) > :nth-child(4){transition-delay:calc(3 * var(--stagger))}
  .js .reveal > :nth-child(5),.js .reveal :is(.svc,.steps,.rest,.big,.list) > :nth-child(5){transition-delay:calc(4 * var(--stagger))}
  .js .reveal > :nth-child(6),.js .reveal :is(.svc,.steps,.rest,.big,.list) > :nth-child(6){transition-delay:calc(5 * var(--stagger))}
  .js .reveal > :nth-child(7),.js .reveal :is(.svc,.steps,.rest,.big,.list) > :nth-child(7){transition-delay:calc(6 * var(--stagger))}
  .js .reveal > :nth-child(8),.js .reveal :is(.svc,.steps,.rest,.big,.list) > :nth-child(8){transition-delay:calc(7 * var(--stagger))}
  .js .reveal > :nth-child(9),.js .reveal :is(.svc,.steps,.rest,.big,.list) > :nth-child(9){transition-delay:calc(8 * var(--stagger))}

  .js .reveal .svc::before,.js .reveal .step::before{transform:scaleX(0);transition:transform var(--dur-rule) var(--ease-out)}
  .js .reveal.is-in .svc::before,.js .reveal.is-in .step::before{transform:none}
  .js .reveal .steps > :nth-child(2) .step::before,.js .reveal .steps > .step:nth-child(2)::before{transition-delay:calc(1 * var(--stagger))}
  .js .reveal .steps > :nth-child(3) .step::before,.js .reveal .steps > .step:nth-child(3)::before{transition-delay:calc(2 * var(--stagger))}
  .js .reveal .steps > :nth-child(4) .step::before,.js .reveal .steps > .step:nth-child(4)::before{transition-delay:calc(3 * var(--stagger))}

  .js .faq details[open] > p{animation:rise var(--dur-reveal) var(--ease-out) both}
  .js .mobile-nav:not([hidden]) li,.js .mobile-nav:not([hidden]) .btn{animation:rise var(--dur-reveal) var(--ease-out) both}
  .js .mobile-nav:not([hidden]) li:nth-child(2){animation-delay:calc(1 * 50ms)}
  .js .mobile-nav:not([hidden]) li:nth-child(3){animation-delay:calc(2 * 50ms)}
  .js .mobile-nav:not([hidden]) li:nth-child(4){animation-delay:calc(3 * 50ms)}
  .js .mobile-nav:not([hidden]) li:nth-child(5){animation-delay:calc(4 * 50ms)}
  .js .mobile-nav:not([hidden]) .btn{animation-delay:calc(5 * 50ms)}
  .js .mobile-nav:not([hidden]) .btn+.btn{animation-delay:calc(6 * 50ms)}
}