/* Shared illustration and legibility refinements. */
h1,h2,h3{text-wrap:balance}
a,button,input,select,textarea{touch-action:manipulation}
.round-arrow{padding:0;position:relative;font-size:0;flex-shrink:0}
.round-arrow::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.hero-english{font-size:clamp(48px,6.2vw,90px);top:115px}
.hero h1{text-wrap:initial}
.hero .motion-toggle{position:absolute;right:24px;bottom:12px;z-index:6;margin:0;background:#fff9efeb;border-color:#e4c2a1;color:#684421;min-height:34px;padding:6px 14px;font-size:11px}
.section-head>p:not(.eyebrow){color:#515962}
.message-band{color:#382b20;background:linear-gradient(125deg,#ffbf82,#ffab5d)}
.message-band h2{color:#422d1d}
.point-card p,.feature-grid article>p,.work-grid p{color:#51565b}
.teamwork-art{display:flex;flex-direction:column;justify-content:center}
.teamwork-art>img{width:100%;height:auto}
.role-captions{display:flex;justify-content:space-around;font-size:12px;color:#686052;font-weight:600}
.expansion-art{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.expansion-art img{width:160px;height:160px}
.expansion-art>span{font-size:12px;color:#686052}
.work-grid article{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:23px;align-items:center;padding:28px 30px;min-height:150px}
.work-grid article>.work-icon{position:static;grid-row:1/3;width:88px;height:88px;border-radius:21px;background:#fff4e5;display:flex;align-items:center;justify-content:center}
.work-icon img{width:82px;height:82px}
.work-grid h3{margin:0;padding:0 0 10px;font-size:17px;align-self:end;line-height:1.7}
.work-grid p{font-size:13px;margin:8px 0 0;align-self:start;line-height:1.8}
.steps{gap:16px}
.steps li{padding:10px 8px;display:flex;flex-direction:column;align-items:center}
.steps .step-art{width:90px;height:90px;margin:0 0 18px;padding:5px;background:#fff5e7;border-radius:22px}
.steps span{font-size:16px;margin-bottom:14px}
.steps b{font-size:16px}
.steps p{font-size:12px;line-height:1.9}
.contact-guide .guide-art{width:100px;height:100px;padding:6px;border-radius:22px;background:#fff2e0;margin:15px auto}
.guide-art img{width:100%;height:100%}
.contact-guide p{font-size:14px}
.fine{font-size:12px;line-height:1.9;color:#60666c}
.calculation-note{font-size:12px}
.fields label{font-size:12px}
.input-wrap>span{font-size:11px}
.form-heading>span{font-size:11px}
.result-row{font-size:13px}
.result-number,.result-row b,.input-wrap input{font-variant-numeric:tabular-nums}
.result-caption{font-size:12px}
.text-button{min-height:38px}
#cost-form .text-button{padding:8px 0}
#consult-form :is(input,select,textarea),#review-title{scroll-margin-top:140px}
@media(max-width:1100px){.work-grid article{grid-template-columns:76px minmax(0,1fr);gap:0 16px;padding:25px}.work-grid article>.work-icon{width:76px;height:76px}.work-icon img{width:70px;height:70px}}
@media(max-width:760px){
 .hero-english{top:410px;font-size:25px;letter-spacing:0;opacity:.85}
 .hero-points{bottom:55px}
 .hero .motion-toggle{bottom:10px;right:12px;font-size:10px;min-height:32px}
 .case-grid{gap:14px}
 .case-grid article{padding:22px 12px}
 .case-grid p{font-size:12px;line-height:1.9;text-wrap:pretty}
 .case-grid p br{display:none}
 .case-grid p strong{display:block;margin-top:5px}
 .section-head>p:not(.eyebrow){font-size:13px}
 .message-band p{font-size:13px;line-height:2.1}
 .point-card p{font-size:13px}
 .point-card h3{font-size:18px}
 .teamwork-art{width:230px;max-width:100%}
 .role-captions{font-size:11px}
 .expansion-art img{width:140px;height:140px}
 .feature-grid article>p{font-size:13px}
 .feature-top h3{font-size:18px}
 .work-grid article{grid-template-columns:70px minmax(0,1fr);gap:0 15px;padding:23px 20px;min-height:127px}
 .work-grid article>.work-icon{width:70px;height:70px;border-radius:17px}
 .work-icon img{width:65px;height:65px}
 .work-grid h3{font-size:15px;line-height:1.7}
 .work-grid p{font-size:12px;line-height:1.8}
 .steps li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:5px 20px;padding:25px 0;text-align:left;align-items:start}
 .steps .step-art{grid-column:1;grid-row:1/4;width:72px;height:72px;margin:0;border-radius:18px;align-self:center}
 .steps span{grid-column:2;grid-row:1;font-size:14px;margin:0}
 .steps b{grid-column:2;grid-row:2;font-size:16px;min-height:0;display:block}
 .steps p{grid-column:2;grid-row:3;font-size:12px;margin:0}
 .contact-guide{grid-template-columns:1fr;gap:18px;margin-bottom:34px}
 .contact-guide>div{display:grid;grid-template-columns:64px 1fr;gap:3px 17px;text-align:left;padding:0 0 18px;border-bottom:1px solid #f1e5d9}
 .contact-guide>div+div{border-left:0}
 .contact-guide span{grid-column:2;grid-row:1;font-size:14px;align-self:end}
 .contact-guide .guide-art{grid-column:1;grid-row:1/3;width:64px;height:64px;margin:0;padding:4px;border-radius:17px}
 .contact-guide p{grid-column:2;grid-row:2;font-size:12px;line-height:1.8;margin:0}
 .contact-guide p br{display:none}
 .fine,.calculation-note{font-size:11px}
 .fields label{font-size:11px}
 .input-wrap>span{font-size:10px}
 .form-heading>span{font-size:10px}
 .result-caption{font-size:12px}
 .hero-points small{font-size:8px}
 .hero-points strong{font-size:12px}
 .provider-intro{font-size:12px!important}
 .provider-intro a,.footer-link{font-size:12px}
}
@media(max-width:359px){.hero-english{top:380px;font-size:22px}.case-grid p{font-size:11px}.hero-points small{font-size:7px}.hero-points strong{font-size:11px}.work-grid article{grid-template-columns:60px minmax(0,1fr);gap:0 12px;padding:20px 16px}.work-grid article>.work-icon{width:60px;height:60px}.work-icon img{width:56px;height:56px}.work-grid h3{font-size:14px}}
.contact-section>.wrap>.section-head,.contact-section>.wrap>.section-head .eyebrow{color:#442c1b}
.contact-section>.wrap>.section-head>p:not(.eyebrow){color:#513725}
.provider-intro a{margin-left:auto;margin-right:auto}
/* Clear hierarchy, opaque scrolled header, and shorter mobile rhythm. */
.header{transition:background-color .2s ease,box-shadow .2s ease}
.header.is-scrolled{background:#fff;box-shadow:0 2px 12px #2632470d}
.header-cta{background:#fff7ed;border:1px solid #e8b78d;color:#995019;box-shadow:none}
.header-cta:hover{background:#ffecd6}
.hero-link.hero-primary{display:inline-flex;min-height:58px;padding:17px 29px;border:0;color:#332718;background:#f48120;font-size:16px;font-weight:700;gap:23px;box-shadow:0 5px 13px #a94a1420}
.hero-link.hero-primary:hover{background:#ff9b43;color:#332718}
.calculator-actions{display:flex;align-items:center;gap:20px;margin-top:14px;flex-wrap:wrap}
.result-jump{font-size:13px;padding:13px 23px;min-height:46px;gap:12px}
#cost-results{scroll-margin-top:138px}
#cost-results:focus-visible{outline:3px solid #ad510d;outline-offset:-4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cost-breakdown,.cost-timeline{margin:18px 0 0;padding-top:16px;border-top:1px solid #d0a88280}
.cost-timeline{margin-top:14px}
.cost-visual-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.cost-visual-heading h3{margin:0;color:#73451f;font-size:12px;letter-spacing:.045em}
.cost-visual-heading h3 small{font-size:10px;font-weight:600;color:#91643e}
.cost-visual-heading>span{color:#91643e;font-size:10px}
.stacked-cost-bar{display:flex;height:13px;overflow:hidden;border-radius:999px;background:#e8c59f;box-shadow:inset 0 0 0 1px #a9683130}
.cost-segment{display:block;height:100%;min-width:0;transition:width .28s ease}
.cost-segment.salary,.legend-dot.salary{background:#bd4d0a}
.cost-segment.recurring,.legend-dot.recurring{background:#e88934}
.cost-segment.recruiting,.legend-dot.recruiting{background:#8d6339}
.cost-segment.training,.legend-dot.training{background:#f5b773}
.cost-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;list-style:none;margin:11px 0 0;padding:0}
.cost-legend li{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#784d2b;font-size:10px;line-height:1.5}
.cost-legend li>span{display:flex;align-items:center;min-width:0;gap:5px}
.cost-legend b,.cumulative-row b{font-variant-numeric:tabular-nums;color:#663611;font-size:11px;white-space:nowrap}
.legend-dot{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%}
.cumulative-bars{display:grid;gap:8px}
.cumulative-row{display:grid;grid-template-columns:35px minmax(0,1fr) 47px;align-items:center;gap:8px;color:#784d2b;font-size:10px;line-height:1.4}
.cumulative-row b{text-align:right}
.cumulative-track{height:9px;overflow:hidden;border-radius:999px;background:#edcfaa}
.cumulative-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d86214,#f19b4e);transition:width .28s ease}
.replacement-detail{margin:6px 0 0;color:#865126;font-size:10px;text-align:right}
@media(max-width:760px){
 .section{padding:50px 0}
 .section-head{margin-bottom:28px}
 .section-head>p:not(.eyebrow){margin-top:16px}
 .theme{padding-bottom:35px}
 .theme-note{margin-top:42px;min-height:205px}
 .message-band{padding:37px 0 40px}
 .about{padding-top:92px}
 .about .section-head{margin-bottom:28px}
 .point-list{gap:20px}
 .point-card{padding:23px 21px;gap:16px}
 .point-visual.mascot-point{width:160px}
 .feature-grid{gap:18px}
 .feature-top{padding:19px 22px}
 .feature-grid article>p{padding:20px 22px}
 .work-grid{gap:15px}
 .work-grid article{padding-top:19px;padding-bottom:19px;min-height:116px}
 .work-bottom{margin-top:27px}
 .steps{margin-top:24px}
 .steps li{padding:20px 0}
 .cta-band{padding:34px 0}
 .contact-section{padding:48px 0}
 .contact-panel{padding-top:25px;padding-bottom:28px}
 .hero-link.hero-primary{font-size:14px;padding:14px 24px;min-height:49px;margin-top:5px}
 .hero-english{top:430px}
 .hero-visual{margin-top:14px}
 .hero{height:890px}
 .hero-points{bottom:55px}
 .calculator-actions{gap:12px;flex-direction:column;align-items:stretch}
 .result-jump{width:100%;min-height:48px;font-size:14px}
 .calculator-actions .text-button{align-self:center}
 #cost-results{scroll-margin-top:122px}
 .cost-breakdown,.cost-timeline{margin-top:15px;padding-top:14px}
 .cost-legend{gap:6px 10px}
 .cost-legend li{font-size:9px}
 .cumulative-row{grid-template-columns:32px minmax(0,1fr) 44px;font-size:9px}
 .cost-legend b,.cumulative-row b{font-size:10px}
}
@media(max-width:359px){.hero{height:825px}.hero-english{top:403px}.hero-link.hero-primary{font-size:13px;padding:13px 22px}.work-grid article{padding-left:16px;padding-right:16px}}

/* Site chrome: a compact service header and an intentional closing section. */
.header{
  height:104px;
  padding:17px 40px;
  align-items:center;
  background:linear-gradient(180deg,#fffffff2 0%,#ffffffdc 68%,#ffffff00 100%);
}
.header-brand{flex:0 0 auto}
.header-brand>p.provider-mark{margin:0 0 3px;font-size:12px;line-height:1.2;color:#263247}
.header .brand{font-size:27px;line-height:1.05;letter-spacing:.015em;color:#263247}
.header .brand small{margin-top:5px;font-size:10px;line-height:1.15;letter-spacing:.06em}
.header-nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,34px);margin:0 auto;padding:12px 22px 0}
.header-nav a{display:flex;align-items:center;min-height:44px;position:relative;color:#4a5361;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.04em;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.header-nav a::after{content:"";position:absolute;right:0;bottom:-7px;left:0;height:1px;background:#d86b22;transform:scaleX(0);transform-origin:right;transition:transform .2s ease}
.header-nav a:hover,.header-nav a:focus-visible{color:#b85010}
.header-nav a:hover::after,.header-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.header-cta{min-width:210px;min-height:52px;margin-top:0;padding:15px 21px;border-color:#e4a16e;border-radius:999px;font-size:13px;justify-content:center;letter-spacing:.06em}
.header.is-scrolled{background:#fffffff5;box-shadow:0 1px 0 #26324712,0 5px 18px #2632470a}

.contact-section{padding-bottom:32px}
.site-footer{position:relative;overflow:hidden;padding:0;background:#263247;color:#fff;text-align:left}
.site-footer::before{content:"";position:absolute;top:0;right:-8vw;width:44vw;height:2px;background:linear-gradient(90deg,#f48120,#ffc087);opacity:.95}
.footer-main{position:relative;display:grid;grid-template-columns:minmax(240px,.95fr) minmax(400px,1.25fr);gap:80px;padding-top:58px;padding-bottom:48px}
.footer-identity{align-self:start}
.site-footer .brand{display:inline-flex;color:#fff;font-size:30px;line-height:1.05;letter-spacing:.015em;text-decoration:none}
.site-footer .brand small{margin-top:7px;color:#ffc087;font-size:10px;line-height:1.2;letter-spacing:.07em}
.footer-provider{margin:23px 0 0;color:#dce1e9;font-size:12px;font-weight:600;letter-spacing:.025em}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:0 42px;border-left:1px solid #ffffff2b;padding-left:52px}
.footer-nav a{display:flex;align-items:center;min-height:43px;border-bottom:1px solid #ffffff1c;color:#eef1f5;font-size:12px;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:color .2s ease,padding .2s ease,border-color .2s ease}
.footer-nav a:hover,.footer-nav a:focus-visible{padding-left:7px;border-color:#ffc087;color:#ffc087}
.footer-nav a span{margin-left:7px;color:#ffc087}
.footer-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:58px;border-top:1px solid #ffffff24;color:#bdc4cf}
.footer-bottom small{font-size:10px;letter-spacing:.05em}
.footer-top{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-decoration:none}
.footer-top span{color:#ffc087;font-size:15px;line-height:1;transition:transform .2s ease}
.footer-top:hover span,.footer-top:focus-visible span{transform:translateY(-3px)}

@media(max-width:1100px){
 .header{padding-right:28px;padding-left:28px}
 .header-nav{gap:18px;padding-right:14px;padding-left:14px}
 .header-nav a{font-size:11px}
 .footer-main{gap:48px}
 .footer-nav{padding-left:38px;gap:0 28px}
}
@media(max-width:1050px){.header-nav{display:none}}
@media(max-width:840px){
 .header{height:90px;padding:14px 20px;align-items:center;background:linear-gradient(180deg,#fffffff5 0%,#ffffffd9 75%,#ffffff00 100%)}
 .header-brand>p.provider-mark{font-size:10px;margin-bottom:3px}
 .header .brand{font-size:24px}
 .header .brand small{font-size:8px;margin-top:3px}
 .header-cta{min-height:46px;min-width:162px;padding:12px 16px;font-size:12px}
 .footer-main{grid-template-columns:1fr;gap:35px;padding-top:45px;padding-bottom:33px}
 .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #ffffff2b;border-left:0;padding:11px 0 0;gap:0 28px}
 .footer-bottom{min-height:54px}
}
@media(max-width:480px){
 .header{height:82px;padding:12px 14px}
 .header-brand>p.provider-mark{font-size:9px}
 .header .brand{font-size:22px}
 .header .brand small{font-size:7.5px;letter-spacing:.035em}
 .header-cta{min-width:0;min-height:42px;padding:10px 13px;gap:9px;font-size:11px}
 .site-footer::before{right:0;width:78vw}
 .footer-main{width:calc(100% - 40px);padding-top:39px;padding-bottom:27px;gap:29px}
 .site-footer .brand{font-size:27px}
 .footer-provider{margin-top:17px;font-size:11px}
 .footer-nav{grid-template-columns:1fr;gap:0;padding-top:7px}
 .footer-nav a{min-height:44px;font-size:11px}
 .footer-bottom{width:calc(100% - 40px);min-height:51px}
 .footer-top{font-size:10px;gap:8px}
}
@media(max-width:359px){
 .header{padding-right:10px;padding-left:10px}
 .header-brand>p.provider-mark{font-size:8px}
 .header .brand{font-size:20px}
 .header-cta{padding:9px 10px;font-size:10px}
}

@media(max-width:760px){.contact-section{padding-bottom:24px}}

/* Header brand lockup: the company and service names read as one calm signature. */
.header-brand{display:flex;align-items:center;gap:18px;min-width:0}
.header-brand>p.provider-mark{position:relative;display:flex;flex-direction:column;gap:2px;flex:0 0 auto;margin:0;padding-right:18px;font-size:10px;line-height:1.05;letter-spacing:.015em}
.header-brand>p.provider-mark::after{content:"";position:absolute;top:3px;right:0;bottom:2px;width:1px;background:#26324766}
.header-brand>p.provider-mark strong{font-size:15px;line-height:1;letter-spacing:-.045em;white-space:nowrap}
.header-brand>p.provider-mark span{font-size:9px;line-height:1.15;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.header .brand{display:inline-flex;flex:0 1 auto;align-items:center;font-size:28px;line-height:1;letter-spacing:.025em;white-space:nowrap}
.header .brand small{margin-top:5px;font-size:9px;line-height:1.1;letter-spacing:.045em;white-space:nowrap}

@media(max-width:840px){
 .header-brand{gap:13px}
 .header-brand>p.provider-mark{gap:2px;padding-right:13px}
 .header-brand>p.provider-mark strong{font-size:13px}
 .header-brand>p.provider-mark span{font-size:8px}
 .header .brand{font-size:25px}
 .header .brand small{font-size:8px}
}
@media(max-width:480px){
 .header-brand{gap:10px}
 .header-brand>p.provider-mark{padding-right:10px}
 .header-brand>p.provider-mark strong{font-size:11px}
 .header-brand>p.provider-mark span{font-size:7px}
 .header .brand{font-size:22px}
 .header .brand small{display:none}
}
@media(max-width:359px){
 .header-brand{gap:8px}
 .header-brand>p.provider-mark{padding-right:8px}
 .header-brand>p.provider-mark strong{font-size:10px}
 .header-brand>p.provider-mark span{font-size:6.5px}
 .header .brand{font-size:20px}
}

/* Keep the contact introduction brief and close to the form. */
.contact-response-note{margin:0 0 28px;text-align:center;color:#61676e;font-size:14px;line-height:1.8}
@media(max-width:760px){.contact-response-note{margin-bottom:22px;font-size:13px}}

/* Make the charts readable at a glance, including on narrow screens. */
.cost-visual-heading h3{font-size:14px;letter-spacing:0}
.cost-visual-heading h3 small,.cost-visual-heading>span{font-size:11px}
.stacked-cost-bar{height:22px}
.cost-legend li{font-size:12px}
.cost-legend b,.cumulative-row b{font-size:13px}
.cumulative-bars{gap:12px}
.cumulative-row{grid-template-columns:40px minmax(0,1fr) minmax(52px,max-content);font-size:12px}
.cumulative-track{height:15px}
@media(max-width:480px){
 .cost-legend{grid-template-columns:1fr;gap:8px}
 .cost-legend li{font-size:12px}
 .cumulative-row{grid-template-columns:36px minmax(0,1fr) minmax(48px,max-content);gap:7px;font-size:11px}
 .cost-legend b,.cumulative-row b{font-size:12px}
}