/* Shared editorial rhythm. Kept last so page-specific components retain their behavior. */
:root{--content-width:1200px;--page-gutter:clamp(18px,3vw,40px)}
main>.breadcrumb,.skills-checkout>.breadcrumb,.checkout-page>.breadcrumb{max-width:var(--content-width);margin-inline:auto;padding:22px var(--page-gutter) 16px;font-size:12px;line-height:1.6}
.skills-checkout,.checkout-page{padding-inline:var(--page-gutter)}
.skills-checkout>.breadcrumb,.checkout-page>.breadcrumb{padding-inline:0;max-width:1100px}
.button,.skills-summary .work-options label:has(input),.skills-checkout .skill-row>.remove-skill,.checkout-columns .benefits label,.checkout-inputs .compact-choice select{border-radius:4px}
.dark:hover,.jokes-aside .contact-actions .button.primary:hover{background:#41433b;border-color:#41433b}
.cart-steps [aria-current] b{background:var(--ink);border-color:var(--ink)}
.checkout-page .cart-steps .step-complete b{border-color:#77796f;color:var(--ink)}
.checkout-columns .benefits label:has(input:checked){background:#eeeee8;border-color:#77796f;color:var(--ink)}
.checkout-page #rate-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,#55584e var(--offer-position),#e6e7e1 var(--offer-position))}
.checkout-page #rate-slider::-webkit-slider-thumb{background:#55584e;box-shadow:0 0 0 1px #55584e}
.checkout-page #rate-slider::-moz-range-progress{background:#55584e}
.checkout-page #rate-slider::-moz-range-thumb{background:#55584e;border:3px solid white}
.skills-summary{top:84px;max-height:calc(100dvh - 108px)}
.skills-intro>p:last-child,.skill-proof,.product-card p.description,.editorial-copy p:not(.eyebrow),.about p:not(.eyebrow){font-size:14px;line-height:1.7}
.campaign{min-height:440px;height:39vw;max-height:540px;margin-inline:var(--page-gutter)}
.campaign-copy>p:not(.eyebrow){font-size:15px;line-height:1.7;max-width:38ch}
.campaign h1{font-size:clamp(40px,4.2vw,64px);margin:20px 0}
.campaign .edition{margin-top:24px}
.detail-layout{max-width:var(--content-width);margin:auto;padding:8px var(--page-gutter) 32px;gap:40px;align-items:start}
.detail-photo{position:static;height:420px;border-radius:4px;overflow:hidden}
.detail-copy{padding:0}.detail-copy h1{font-size:clamp(32px,3.6vw,46px);margin:12px 0 16px}
.detail-copy>.summary{font-size:16px;line-height:1.65;margin-bottom:16px}
.detail-copy .detail-type{margin:12px 0}.detail-copy .detail-tabs{margin-top:16px}
.detail-copy details{padding:12px 0}.detail-copy details p{font-size:14px;line-height:1.65}
.detail-photo img[src*="book"]{object-fit:contain;padding:16px}
.case-jump-nav{margin-bottom:28px;padding:16px var(--page-gutter);gap:24px;font-size:13px}
.case-content .case-meta{margin-bottom:28px;padding-block:20px}
.case-content .case-feature{padding:26px;gap:28px;margin-bottom:32px}
.case-content .case-feature>img{height:280px;object-fit:contain}
.case-content .legacy-main>section,#case-study{scroll-margin-top:84px}
.about-content{max-width:var(--content-width);margin:auto;padding-inline:var(--page-gutter)}
.about-content .about-intro{padding:16px 0 44px;gap:6%;align-items:center}
.about-content .about-intro h1{font-size:clamp(40px,4.5vw,58px)}
.about-content .about-photo img{height:500px}
.about-content .about-intro h1 em,.about-content .section-label{color:#55584e}
.checkout-order{top:84px}
.pay-summary>div[hidden]{display:none}
.skills-mobile-review{display:none}
@media(max-width:750px){
 .skills-summary{grid-row:auto;position:static;max-height:none;overflow:visible}
 .skills-intro>p:last-child{font-size:14px}
 .skills-mobile-review{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:19;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--page-gutter) calc(10px + env(safe-area-inset-bottom));background:#fffefaf5;border-top:1px solid var(--line);font-size:13px}
 .skills-mobile-review a{background:var(--ink);color:white;border-radius:4px;padding:12px 18px;min-height:44px}
 body:has(.skills-mobile-review) footer{padding-bottom:100px}
 .skills-summary{scroll-margin-top:80px}
 .skills-checkout .skill-row h2{font-size:16px;line-height:1.4}
 .detail-layout{display:flex;flex-direction:column;gap:20px;padding-top:0}
 .detail-copy{display:contents}.detail-copy>.eyebrow{order:0}.detail-copy>h1{order:1;margin:0}.detail-copy>.summary{order:2;margin:0}
 .detail-photo{order:3;width:100%;height:280px}.detail-copy>.detail-type{order:4;margin:0}.detail-copy>.button{order:5;margin:0}.detail-copy>.detail-tabs{order:6;width:100%;margin:0}
 .detail-copy h1{font-size:36px}.detail-copy>.summary{font-size:16px}
 .case-jump-nav{gap:16px;font-size:12px}.case-content .case-meta{gap:12px}
 .about-content .about-intro{padding-top:16px;gap:24px}.about-content .about-photo img{height:400px}
 .checkout-order{top:auto;padding:18px}
 .checkout-order .payment-fields{border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0 8px}
 .checkout-page .payment-fields .rate-slider-label>span:first-child{font-size:13px}
 .checkout-page .payment-fields .amount-label #pay-period{font-size:13px}
 .checkout-order .offer-result{margin:0 0 16px}
 .checkout-order #offer-receipt{min-height:0;padding:12px 0;margin:0;line-height:1.4}
 .checkout-columns>.mobile-offer-summary{background:white;border:1px solid var(--line);padding:16px}
 .mobile-offer-summary .pay-summary{margin:0;border:0;padding:0}
 .mobile-offer-summary #pay-equivalent{margin-top:12px}
 .checkout-columns{gap:18px}
}
@media(max-width:600px){
 .campaign{height:auto;min-height:0;grid-template-columns:1fr;margin-inline:var(--page-gutter)}
 .campaign-copy{grid-row:1;padding:30px 22px}.campaign .eyebrow{font-size:10px;letter-spacing:1px}
 .campaign h1{font-size:42px;margin:16px 0}.campaign-copy>p:not(.eyebrow){font-size:15px;line-height:1.65}
 .campaign .button{font-size:14px;margin-top:20px;padding:12px 18px}.campaign .edition{display:none}
 .campaign-photo:not(.right){height:180px}.campaign-photo img{object-position:50% 40%}
 .image-note{font-size:9px}.intro-line{font-size:10px;padding-inline:var(--page-gutter)}
 .service-strip{font-size:11px;padding:16px var(--page-gutter);gap:12px}
 .product-card p.description{font-size:13px}.project-link,.filters button,.text-link{font-size:13px}
 .product-meta{font-size:10px}.product-card h3{font-size:16px}.collection-note{font-size:12px}
 .filters button{min-height:44px}.section-heading h2{font-size:32px}
 .department p,.dept-link{font-size:14px}.about p:not(.eyebrow){font-size:15px}
}
@media(max-width:750px){
 .checkout-page .payment-fields .amount-label #pay-period{width:80px;flex:0 0 80px;padding-right:18px}
 .checkout-page .payment-fields .amount-label .currency-input{width:100px}
}
@media(max-width:360px){
 .checkout-page .payment-fields{grid-template-columns:1fr}
 .checkout-page .payment-fields .rate-slider-label>span:first-child{grid-column:1;grid-row:1}
 .checkout-page .payment-fields .amount-label{grid-column:1;grid-row:2;justify-self:end}
 .checkout-page .payment-fields #rate-slider{grid-row:3}
 .checkout-page .payment-fields .slider-ticks{grid-row:4}
}
/* Align the framing of cases and About with the 1100px cart grid. */
:root{--content-width:calc(1100px + 2 * var(--page-gutter))}
main .about-content{margin-inline:auto;background:var(--paper)}
@media(max-width:360px){
 .header .masthead .wordmark{font-size:14px;letter-spacing:.2px}
 .header .utilities{gap:3px}
 .header .site-menu-toggle{width:28px}
}

/* Keyboard focus uses the approved accent without changing the visual hierarchy. */
:root{--focus-accent:#D4ED31}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #22231f;outline-offset:3px;box-shadow:0 0 0 5px var(--focus-accent)}
.header .wordmark{min-height:24px;display:inline-flex;align-items:center}
.footer-bottom a{min-height:24px;display:inline-flex;align-items:center}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Approved audit refinement: editorial typography, one restrained lime accent. */
:root{--accent:#D4ED31;--accent-hover:#c3dc21}
.campaign-copy{background:#f0f0e8}
.campaign{height:auto;min-height:510px;max-height:none;grid-template-columns:.8fr 1.45fr .7fr}
.campaign-copy .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.07em}
.campaign-copy .button{background:var(--accent);border-color:var(--ink);color:var(--ink);margin-top:20px}
.campaign-copy .button:hover{background:var(--accent-hover)}
.campaign-copy .hero-resume{display:block;width:fit-content;margin:14px auto 0;font-size:13px}
.campaign-copy .edition{font-size:10px;line-height:1.7;letter-spacing:.05em;margin-top:20px}
.announcement-carousel{background:var(--ink)!important;color:white}
.announcement-carousel .announcement-slide{background:var(--ink);color:white}
.announcement-carousel .announcement-slide[data-tone="1"]{background:var(--accent);color:var(--ink)}
.announcement-carousel .announcement-slide[data-tone="2"]{background:#e9ebdf;color:var(--ink)}
.filters button.active,.skills-summary .work-options label:has(input:checked){background:var(--accent);border-color:var(--ink);color:var(--ink)}
.cart-steps [aria-current] b{background:var(--accent);color:var(--ink)}
.case-content{--case-accent:#D4ED31;--lime:#D4ED31}
.product-meta,.detail-type,.detail-copy summary,.detail-copy details p,.footer-bottom,.text-link{font-size:13px;line-height:1.65}
.eyebrow,.badge{font-size:10px;line-height:1.5}
.editorial-banner{margin-bottom:64px}
@media(max-width:1000px){.campaign{grid-template-columns:.8fr 1.4fr}}
@media(max-width:600px){.campaign{display:flex;flex-direction:column;min-height:0}.campaign-copy{padding:30px 24px}.campaign .campaign-photo{height:180px;min-height:180px}.campaign-copy>p:not(.eyebrow){font-size:15px}.campaign-copy .hero-resume{font-size:14px}.product-card h3{font-size:16px}.product-meta{font-size:11px}.badge{font-size:9px}}
.campaign-copy .edition{display:block}

/* Project saving: only the heart changes on hover or when saved. */
.detail-copy .button[data-save]{background:transparent;border-color:var(--paper);color:var(--ink)}
.detail-copy .button[data-save]:hover{background:transparent;border-color:var(--line);color:var(--ink)}
.detail-copy .button[data-save]:hover .heart-icon,.detail-copy .button[data-save][aria-pressed="true"] .heart-icon{color:#8b343c}
.detail-copy .button[data-save]:hover .heart-icon path,.detail-copy .button[data-save][aria-pressed="true"] .heart-icon path{fill:currentColor}