/* D028: adapt the accepted About baseline to each page's purpose. */
/* D034: all pill actions share one left-to-right fill and arrow rhythm. */
:root{--action-duration:.2s;--action-easing:ease-out}
/* Keep the same fill image in every state: earlier background shorthands otherwise
   remove it before background-position can animate forward or back. */
.button,
.button:focus-visible:not(:disabled),
.button:active:not(:disabled),
.button:hover:not(:disabled):not(:active){
  background-image:linear-gradient(90deg,var(--button-primary-hover) 50%,var(--button-primary-fill) 50%);
  background-repeat:no-repeat;background-size:205% 100%;
}
.button{
  --button-primary-hover:var(--rudy-warm-white);
  --button-primary-pressed:var(--rudy-warm-white);
  --button-hover-text:var(--rudy-clear-blue);
  background-position:100% 0;
  border-color:var(--rudy-clear-blue);
  transition:background-position var(--action-duration) var(--action-easing),color var(--action-duration) var(--action-easing),box-shadow var(--action-duration) var(--action-easing);
}
.button .link-arrow{transition:transform var(--action-duration) var(--action-easing)}
.route-action .link-arrow{transition:transform .2s ease-out}
.button:focus-visible:not(:disabled),.button:active:not(:disabled){background-position:0 0;color:var(--button-hover-text)}
.button:focus-visible:not(:disabled) .link-arrow,.button:active:not(:disabled) .link-arrow{transform:translate(2px,-2px)}
.button:active:not(:disabled){box-shadow:inset 0 0 0 1px var(--button-hover-text);transition:none}
.button:active:not(:disabled) .link-arrow{transition:none}
.button-inverse{
  --button-primary-fill:var(--rudy-warm-white);--button-primary-hover:var(--rudy-clear-blue);
  --button-primary-pressed:var(--rudy-clear-blue);--button-primary-text:var(--rudy-clear-blue);
  --button-hover-text:var(--rudy-warm-white);
  color:var(--button-primary-text);border-color:var(--rudy-warm-white);
}
.button-inverse:focus-visible{outline-color:var(--focus-on-dark)}
.page-not-found .button-inverse{border-color:var(--rudy-clear-blue)}
.page-not-found .button-inverse:focus-visible{outline-color:var(--focus-on-light)}
.button:disabled{background-image:none;background-color:var(--disabled-fill);color:var(--disabled-text);transition:none}
.button:disabled .link-arrow{transform:none;transition:none}
.nav-links a{
  text-decoration:none;background-image:linear-gradient(var(--rudy-honey-gold),var(--rudy-honey-gold));
  background-repeat:no-repeat;background-position:left calc(100% - 6px);background-size:0 1px;
  transition:background-size .18s ease-out,color .18s ease-out;
}
.nav-links .nav-contact{background-image:linear-gradient(var(--rudy-clear-blue),var(--rudy-clear-blue));background-position:left bottom;background-size:100% 1px}
.nav-links a:is(:focus-visible,:active,[aria-current=page]){background-size:100% 1px}
.nav-links a:active{transition:none}
.text-link.reading-link{padding-bottom:6px}
.service-page-links{margin-top:24px}
.service-page-links .contents-links{gap:0 24px}
main :is(h2,h3)[id]{scroll-margin-top:48px}
main h2[tabindex="-1"]:focus{outline:none}
main h2[tabindex="-1"]:focus-visible{outline:2px solid var(--focus-on-light);outline-offset:8px}

.home-question-panel{background:var(--surface-secondary);padding:52px;display:grid;grid-template-columns:.75fr 1.35fr;gap:64px}
.home-question-panel h2{max-width:280px}
.question-copy{max-width:640px}
.question-response{margin-top:32px}
.page-home .story-grid{grid-template-columns:.75fr 1.35fr;gap:72px}
.page-home .routes-section{border-top:0;padding-top:0}
.routes-grid{grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.route-card{position:relative;background:var(--surface-secondary);border:1px solid var(--border-decorative);border-top:2px solid var(--rudy-clear-blue);padding:34px 36px;color:var(--text-primary);text-decoration:none;transition:background-color .18s ease-out,border-color .18s ease-out}
.route-card h3{font-size:28px}
.route-card p{margin-top:20px;margin-bottom:28px;font-size:20px;line-height:1.55}
.route-action{display:flex;align-items:center;gap:20px;position:relative;width:fit-content;margin-top:auto;padding-block:4px 7px;border-bottom:1px solid var(--link);color:var(--link);font-size:18px}
.route-action:after{content:'';position:absolute;inset:auto 0 -1px;height:2px;background:var(--link-hover);transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out}
.route-card:is(:focus-visible,:active){background:var(--surface-page);border-color:var(--rudy-clear-blue);color:var(--text-primary)}
.route-card:is(:focus-visible,:active) .route-action:after{transform:scaleX(1)}
.route-card:focus-visible .link-arrow{transform:translate(2px,-2px)}
.route-card:active,.route-card:active .route-action:after{transition:none}

.contact-composition{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:0 64px;max-width:1100px;padding-top:55px}
.contact-composition .contact-intro{grid-column:1;grid-row:1;align-self:start;padding-top:7px}
.contact-intro h1:before{content:'';display:block;width:45px;height:1px;background:var(--rudy-honey-gold);margin-bottom:26px}
.contact-composition .contact-intro .lead{font-size:22px;line-height:1.5}
.contact-composition .contact-form{grid-column:2;grid-row:1;margin-top:0;padding:34px 36px;background:var(--surface-secondary)}
.contact-composition .field:first-of-type{margin-top:24px}
.contact-composition .individual-note{font-size:17px;padding-left:18px;margin-top:28px;border-left-width:2px}
.contact-composition .preview-status{background:var(--surface-page);margin-top:26px;padding:14px 16px;font-size:16px}
.contact-composition .contact-form .button{margin-top:4px}
.contact-composition .email-alternative{grid-column:2;grid-row:2;margin-top:28px;font-size:17px}
.contact-composition .email-alternative .text-link{line-height:1.8}
@media(hover:hover) and (pointer:fine){
 .button:hover:not(:disabled):not(:active){background-position:0 0;color:var(--button-hover-text)}
 .button:hover:not(:disabled) .link-arrow{transform:translate(2px,-2px)}
 .nav-links a:hover:not(:active){background-size:100% 1px}
 .route-card:hover:not(:active){background:var(--surface-page);border-color:var(--rudy-clear-blue);color:var(--text-primary)}
 .route-card:hover .route-action:after{transform:scaleX(1)}
 .route-card:hover .link-arrow{transform:translate(2px,-2px)}
}
@media(min-width:761px) and (max-width:1060px){
 .home-question-panel{padding:38px;gap:40px;grid-template-columns:.8fr 1.2fr}
 .page-home .story-grid{gap:48px}
 .route-card{padding:28px}
 .contact-composition{gap:0 40px}
 .contact-composition .contact-form{padding:28px}
}
@media(max-width:960px){
 .home-question-panel{display:block}
 .home-question-panel h2{max-width:520px;margin-bottom:28px}
 .question-copy{max-width:650px}
 .page-home .story-grid{grid-template-columns:1fr;gap:28px}
 .page-home .story-grid .section-title{max-width:580px}
 .contact-composition{display:block;max-width:640px}
 .contact-composition .contact-intro{padding-top:0}
 .contact-composition .contact-form{margin-top:30px}
 .contact-composition .email-alternative{margin-top:28px}
}
@media(max-width:760px){
 .home-question-panel{display:block;padding:30px 24px}
 .home-question-panel h2{max-width:none;margin-bottom:26px}
 .question-response{margin-top:28px}
 .page-home .story-grid{display:block}
 .routes-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:28px}
 .route-card{padding:28px 24px}
 .route-card+.route-card{margin-top:0;padding-top:28px;border-top:2px solid var(--rudy-clear-blue)}
 .route-card h3{font-size:25px}
 .route-card p{font-size:18px;margin-top:18px;margin-bottom:24px}
 .route-action{font-size:17px;min-height:40px}
 .contact-composition{padding-top:35px}
 .contact-composition .contact-intro .lead{font-size:21px}
 .contact-composition .contact-form{padding:26px 22px;margin-top:28px}
 .contact-composition .individual-note{font-size:16px;padding-left:15px}
 .contact-composition .preview-status{font-size:15px}
 .contact-intro h1:before{margin-bottom:22px}
}
@media(max-width:370px){
 .home-question-panel,.route-card{padding-inline:20px}
 .contact-composition .contact-form{padding-inline:20px}
 .service-page-links .contents-links{column-gap:18px}
}
@media(prefers-reduced-motion:reduce){
 .button,.button .link-arrow,.route-card,.route-action:after,.route-action .link-arrow,.nav-links a{transition:none}
}