/* Visual direction: quiet editorial typography, field-note linework, and a warmer material palette. */
:root {
  --paper: #f5f1e8;
  --paper-deep: #ebe6da;
  --ink: #252b27;
  --muted: #646d65;
  --line: #d2cec3;
  --green: #365945;
  --green-deep: #243a2d;
  --lime: #d4c29a;
  --orange: #a95f43;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'IBM Plex Sans', Arial, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  scroll-behavior: smooth;
}

body { background: var(--paper); color: var(--ink); }
.section-shell { width: min(1120px, calc(100% - 72px)); }
.section-pad { padding-block: 106px; }
.site-header { border-color: var(--line); }
.nav-shell { width: min(1240px, calc(100% - 72px)); height: 82px; }
.brand { gap: 11px; }
.brand-mark { width: auto; height: auto; display: block; border: 0; font: italic 500 34px/.8 var(--serif); letter-spacing: -3px; }
.brand-mark span { color: var(--orange); }
.brand-name { display: flex; flex-direction: column; gap: 2px; font-size: 13px; letter-spacing: 0; font-weight: 400; line-height: 1; }
.brand-name strong { font: 500 17px var(--serif); letter-spacing: -.2px; }
.brand-name small { color: var(--muted); font: 9px var(--mono); letter-spacing: .06em; }
.brand-name b { color: var(--green); }
.primary-nav { gap: 30px; font-size: 13px; }
.primary-nav a:not(.nav-cta) { transition: color .18s; }
.primary-nav a:not(.nav-cta):hover, .text-link:hover { color: var(--orange); }
.nav-cta { padding: 11px 13px; border-color: #bdb8ab; font-size: 12px; }
.nav-cta:hover { background: var(--paper-deep); border-color: var(--ink); }

.hero { min-height: 600px; padding-block: 82px 88px; grid-template-columns: 1.08fr .92fr; gap: clamp(48px, 7vw, 90px); }
.eyebrow { color: var(--green); font: 500 11px var(--sans); letter-spacing: .055em; text-transform: lowercase; font-variant: small-caps; }
.eyebrow-dot { width: 6px; height: 6px; margin-right: 8px; background: var(--orange); }
.hero h1 { max-width: 640px; margin: 26px 0 23px; font: 400 clamp(59px, 6vw, 78px)/.99 var(--serif); letter-spacing: -2.5px; text-wrap: balance; }
.hero h1 em { color: var(--green); font-weight: 400; }
.hero-lede { max-width: 505px; margin-bottom: 27px; color: #505b53; font-size: 16px; line-height: 1.7; }
.hero-actions { gap: 22px; }
.button { min-height: 48px; padding-inline: 18px; font-size: 13px; transition: color .18s, background .18s, transform .18s; }
.button:hover { transform: translateY(-1px); }
.button-dark { background: var(--green-deep); }
.button-dark:hover { background: #314c3a; }
.button-light { background: var(--lime); color: var(--ink); }
.button-light:hover { background: #dfd0ae; }
.text-link { gap: 10px; font-size: 13px; }
.hero-footnote { max-width: 380px; margin-top: 25px; color: #757b72; font-size: 11px; line-height: 1.6; }

.flow-illustration { position: relative; padding: 22px 24px 17px; border: 1px solid #c9c4b7; border-radius: 0; background: #efebe1; box-shadow: 8px 8px 0 #e4dfd2; transform: none; }
.flow-title, .flow-caption { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: #69736a; font: 10px var(--mono); letter-spacing: .015em; }
.flow-title { padding-bottom: 16px; border-bottom: 1px solid #d4d0c4; color: var(--ink); font: 500 13px var(--serif); }
.flow-title-mark { color: var(--green); font: 10px var(--mono); }
.flow-map { position: relative; padding-block: 7px; }
.flow-map::before { position: absolute; top: 30px; bottom: 31px; left: 17px; width: 1px; background: #b5b8a8; content: ''; }
.flow-row { position: relative; min-height: 81px; display: grid; grid-template-columns: 37px 1fr; gap: 13px; align-items: center; border-bottom: 1px solid #dedacf; }
.flow-row:last-child { border-bottom: 0; }
.step-index { z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; align-self: center; padding: 0; border: 1px solid #b5b8a8; border-radius: 50%; background: #efebe1; color: var(--green); font: 10px var(--mono); }
.flow-row strong { display: block; font: 500 16px var(--serif); }
.flow-row small { display: block; margin-top: 5px; color: #707970; font-size: 11px; }
.flow-note { margin: 4px 0 17px; color: var(--green-deep); font: italic 15px/1.4 var(--serif); }
.flow-note span { margin-right: 6px; color: var(--orange); font-style: normal; }
.flow-caption { padding-top: 12px; border-top: 1px solid #d4d0c4; font-size: 8px; letter-spacing: .045em; }

.principles { background: var(--green-deep); color: #f2eee5; }
.principles-inner { min-height: 61px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.principles-inner span { font: 11px var(--sans); }
.principles-inner span + span { padding-left: 24px; border-left: 1px solid #526453; }
.approach { grid-template-columns: .9fr 1.1fr; gap: 82px; }
.section-intro h2, .service-heading h2, .sandbox-intro h2, .delivery-head h2, .contact-layout h2, .about-copy h2 { font: 400 clamp(43px, 4.7vw, 60px)/1.03 var(--serif); letter-spacing: -1.4px; text-wrap: balance; }
.section-intro h2 { margin-top: 20px; }
.approach-body { padding-top: 42px; }
.intro-large { font: 400 25px/1.35 var(--serif); }
.approach-body > p:not(.intro-large) { color: var(--muted); font-size: 14px; line-height: 1.8; }
.link-rule { border-color: #b9b5a9; }
.service-line { grid-template-columns: 1fr 1.05fr; gap: 72px; padding-block: 58px 76px; border-color: var(--line); }
.service-heading h2 { margin-top: 19px; font-size: clamp(42px, 4.4vw, 54px); }
.service-copy { max-width: 490px; }
.service-copy > p { color: #59635b; font-size: 14px; line-height: 1.75; }
.plain-list { border-color: #cfcabe; }
.plain-list li { min-height: 47px; padding: 11px 0; border-color: #cfcabe; font-size: 13px; line-height: 1.5; }
.plain-list li span { color: var(--orange); font-size: 10px; }

.about-section { padding-block: 90px; background: var(--paper-deep); }
.about-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 78px; align-items: center; }
.about-signature { display: flex; flex-direction: column; align-items: flex-start; }
.signature-mark { color: var(--green); font: italic 500 72px/.8 var(--serif); letter-spacing: -7px; }
.signature-rule { width: 78px; height: 1px; margin: 20px 0 13px; background: #aaa898; }
.signature-caption { color: #73776e; font: 10px/1.7 var(--mono); }
.about-copy .eyebrow { margin-bottom: 17px; }
.about-copy h2 { margin-bottom: 22px; }
.about-copy > p:not(.eyebrow) { max-width: 625px; color: #59635b; font-size: 14px; line-height: 1.8; }
.about-copy > p:last-child { margin-bottom: 0; }

.sandbox-section { padding-block: 105px; background: #eeeee6; }
.sandbox-layout { grid-template-columns: .75fr 1.25fr; gap: clamp(42px, 6vw, 78px); }
.sandbox-intro { padding-top: 18px; }
.sandbox-intro h2 { margin: 18px 0; }
.sandbox-intro > p:not(.eyebrow) { max-width: 360px; color: #59645c; font-size: 14px; line-height: 1.75; }
.notice-box { max-width: 370px; margin-top: 27px; grid-template-columns: 19px 1fr; gap: 10px; padding-top: 14px; border-color: #c9cabe; }
.notice-symbol { width: 18px; height: 18px; border-color: #9ca294; color: var(--green); }
.notice-box p { color: #667067; font-size: 11px; line-height: 1.65; }
.sandbox-app { border-color: #cacbbf; border-radius: 0; background: #faf9f4; box-shadow: 7px 7px 0 #dfe0d5; }
.sandbox-bar { height: 43px; padding-inline: 20px; border-color: #dedfd6; color: #5d685f; font: 11px var(--sans); letter-spacing: .01em; }
.sandbox-lock { padding: 5px 7px; background: #e7e8dc; color: var(--green-deep); font: 8px var(--mono); letter-spacing: .02em; }
.sandbox-content { padding: 26px clamp(18px, 3.5vw, 34px) 25px; }
.sandbox-heading { margin-bottom: 15px; }
.sandbox-heading h3 { margin-top: 5px; font: 400 26px var(--serif); }
.sandbox-heading .eyebrow { font-size: 10px; }
.preset-row { gap: 8px; margin-bottom: 12px; }
.preset-button { min-height: 40px; padding-inline: 11px; border-color: #c9cabe; color: #46534a; font: 11px var(--sans); }
.preset-button:hover, .preset-button:focus-visible { background: #e9ebdf; border-color: #7b8a78; }
textarea, input { border-color: #c9cabe; background: #fffefa; font-size: 13px; }
textarea { padding: 13px 14px; line-height: 1.65; }
textarea::placeholder, input::placeholder { color: #858d83; }
.input-meta { color: #727a70; font: 9px var(--mono); }
.sandbox-submit-row .button { min-height: 44px; font-size: 12px; }
.demo-status { color: #69736a; font-size: 11px; }
.demo-status.is-error, .inline-error { color: #943f2a; }
.demo-result { border-color: #d3d4c9; }
.result-top h3 { font: 400 25px var(--serif); }
.review-badge { background: #e9ecdf; color: var(--green-deep); font: 9px var(--mono); }
.result-reason { color: #69736a; font-size: 11px; }
.result-fields { border-color: #d5d6cc; }
.result-field { border-color: #d5d6cc; }
.result-field span { color: #687269; font-size: 9px; }
.result-field strong { font-size: 11px; }
.draft-block { background: #efefe7; }
.draft-head { color: #5e695f; }
.draft-block p { color: #434e46; }
.next-step p { color: #59655c; font-size: 11px; }
.reset-button { min-height: 40px; color: #4f5d53; font-size: 11px; }
.sandbox-foot { display: none; }

.delivery { grid-template-columns: .8fr 1.2fr; gap: 84px; }
.delivery-head h2 { margin-top: 18px; }
.delivery-list { border-color: #cfcabe; }
.delivery-item { grid-template-columns: 34px 1fr auto; gap: 14px; padding: 23px 0; border-color: #cfcabe; }
.delivery-num { color: var(--orange); font-size: 10px; }
.delivery-item h3 { font: 500 20px var(--serif); }
.delivery-item p { color: #59635b; font-size: 12px; line-height: 1.7; }
.delivery-mark { color: #72796f; font: 9px var(--mono); }

.contact-section { padding-block: 88px 94px; background: var(--green-deep); color: #f5f1e8; }
.contact-section .eyebrow { color: #d6c59e; }
.contact-copy > p { color: #d0d3c8; font-size: 14px; line-height: 1.75; }
.contact-form { margin-top: 24px; }
.contact-form label { color: #e0e1d7; font-size: 11px; }
.contact-form input, .contact-form textarea { min-height: 45px; padding: 12px; border-color: #6e7e6e; background: #2b4333; color: #f5f1e8; font-size: 13px; }
.contact-form textarea { min-height: 88px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #bbc4b8; }
.contact-form .button { min-height: 48px; }
.contact-status { color: #c0cbbc; font-size: 10px; }
.contact-status.is-error { color: #f1bf9e; }
.site-footer { background: #1c3024; color: #e3e4da; }
.footer-inner { min-height: 88px; border-color: #425343; }
.brand-footer .brand-mark { color: #f3eee4; }
.brand-footer .brand-name strong { color: #f3eee4; }
.brand-footer .brand-name small { color: #c3cbbd; }
.footer-inner > p { color: #c2c9bd; font-size: 11px; }
.back-top { color: #d7d9cf; font: 11px var(--sans); }
.footer-bottom { color: #b0bbae; font: 9px var(--mono); }

@media (max-width: 900px) {
  .section-shell, .nav-shell { width: min(100% - 48px, 680px); }
  .hero { min-height: auto; padding-block: 68px 74px; grid-template-columns: 1fr; gap: 42px; }
  .hero h1 { max-width: 650px; font-size: clamp(58px, 9vw, 76px); }
  .flow-illustration { max-width: 580px; }
  .approach { grid-template-columns: 1fr; gap: 18px; }
  .approach-body { padding-top: 0; max-width: 620px; }
  .service-line { gap: 42px; }
  .about-layout { grid-template-columns: .5fr 1.5fr; gap: 44px; }
  .sandbox-layout { grid-template-columns: 1fr; gap: 32px; }
  .sandbox-intro > p:not(.eyebrow) { max-width: 540px; }
  .notice-box { max-width: 540px; }
  .delivery { grid-template-columns: 1fr; gap: 32px; }
  .contact-layout { grid-template-columns: 1fr 1fr; gap: 44px; }
}

@media (max-width: 600px) {
  .section-shell, .nav-shell { width: calc(100% - 36px); }
  .nav-shell { height: 72px; }
  .menu-toggle { display: block; min-width: 54px; min-height: 44px; padding: 0 12px; border-color: #bdb8ab; font-size: 12px; }
  .primary-nav { display: none; position: absolute; z-index: 10; top: 72px; right: 18px; left: 18px; padding: 12px; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 18px #252b2718; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { min-height: 44px; display: flex; align-items: center; padding: 9px; }
  .nav-cta { margin-top: 6px; }
  .hero { padding-block: 53px 61px; gap: 35px; }
  .hero h1 { margin-block: 21px; font-size: clamp(48px, 12.5vw, 64px); letter-spacing: -1.8px; }
  .hero-lede { font-size: 14px; }
  .hero-actions { gap: 15px; flex-wrap: wrap; }
  .hero-footnote { margin-top: 19px; }
  .flow-illustration { padding: 18px 15px 14px; box-shadow: 5px 5px 0 #e4dfd2; }
  .flow-title { font-size: 12px; }
  .flow-row { min-height: 74px; grid-template-columns: 34px 1fr; gap: 10px; }
  .flow-row strong { font-size: 14px; }
  .flow-row small { font-size: 10px; }
  .flow-map::before { left: 16px; }
  .step-index { width: 32px; height: 32px; font-size: 9px; }
  .flow-note { font-size: 14px; }
  .flow-caption { font-size: 7px; }
  .principles-inner { min-height: 0; padding-block: 15px; flex-direction: column; align-items: flex-start; gap: 0; }
  .principles-inner span { width: 100%; padding: 9px 0; font-size: 12px; }
  .principles-inner span + span { padding-left: 0; border-top: 1px solid #526453; border-left: 0; }
  .section-pad { padding-block: 72px; }
  .section-intro h2, .service-heading h2, .sandbox-intro h2, .delivery-head h2, .contact-layout h2, .about-copy h2 { font-size: 45px; letter-spacing: -1px; }
  .approach { gap: 23px; }
  .intro-large { font-size: 22px; }
  .service-line { grid-template-columns: 1fr; gap: 24px; padding-block: 48px 58px; }
  .about-section { padding-block: 64px; }
  .about-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-signature { display: grid; grid-template-columns: 54px 1fr; column-gap: 15px; align-items: center; }
  .signature-mark { grid-row: span 2; font-size: 58px; }
  .signature-rule { width: 58px; margin: 0 0 5px; }
  .signature-caption { font-size: 9px; }
  .about-copy h2 br { display: none; }
  .about-copy > p:not(.eyebrow) { font-size: 13px; }
  .sandbox-section { padding-block: 69px; }
  .sandbox-app { box-shadow: 5px 5px 0 #dfe0d5; }
  .sandbox-bar { min-height: 43px; height: auto; gap: 10px; padding-inline: 12px; font-size: 10px; }
  .sandbox-lock { font-size: 7px; }
  .sandbox-content { padding: 21px 13px 18px; }
  .preset-row { gap: 6px; }
  .preset-button { min-height: 42px; padding-inline: 8px; font-size: 10px; }
  .input-meta { font-size: 8px; }
  .sandbox-submit-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .result-fields { grid-template-columns: 1fr; }
  .result-field { border-right: 0; border-bottom: 1px solid #d5d6cc; }
  .result-field:last-child { border-bottom: 0; }
  .delivery-item { grid-template-columns: 27px 1fr; }
  .delivery-mark { display: none; }
  .contact-section { padding-block: 67px 72px; }
  .contact-layout { grid-template-columns: 1fr; gap: 27px; }
  .footer-inner { align-items: flex-start; flex-direction: column; padding-block: 22px; gap: 13px; }
  .footer-bottom { gap: 10px; flex-direction: column; font-size: 8px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 42px; letter-spacing: -1.4px; }
  .hero .eyebrow { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Handoff walkthrough (hero step carousel) ---------- */
.process-card { scroll-margin-top: 24px; }
.step-carousel { position: relative; }
.step-track { display: grid; margin: 0; padding: 0; list-style: none; touch-action: pan-y; }
.step-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 37px 1fr; gap: 15px; align-items: start; padding: 22px 0 18px; opacity: 0; visibility: hidden; transform: translateX(14px); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.step-slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }
.step-slide .step-index { align-self: start; margin-top: 2px; width: 36px; height: 36px; border-color: var(--green); background: var(--green-deep); color: #f2eee5; }
.step-body h3 { margin: 6px 0 9px; font: 500 22px/1.2 var(--serif); letter-spacing: -.3px; }
.step-body p { margin: 0 0 15px; max-width: 420px; color: #59635b; font-size: 13px; line-height: 1.7; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tool-chips li { padding: 4px 8px; border: 1px solid #c9c4b7; background: #f7f4ec; color: var(--green-deep); font: 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.step-progress { height: 2px; background: #dcd8cc; }
.step-progress span { display: block; width: 12.5%; height: 100%; background: var(--orange); transition: width .45s ease; }
.step-controls { display: flex; align-items: center; gap: 10px; padding: 13px 0 4px; }
.step-dots { flex: 1; display: flex; justify-content: center; gap: 7px; }
.step-dot { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.step-dot::before { position: absolute; inset: 7px; border: 1px solid #a9ad9e; border-radius: 50%; content: ''; transition: background .2s, border-color .2s, transform .2s; }
.step-dot.is-done::before { background: #b5b8a8; border-color: #b5b8a8; }
.step-dot.is-active::before { background: var(--orange); border-color: var(--orange); transform: scale(1.25); }
.step-dot:hover::before { border-color: var(--green-deep); }
.carousel-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid #bdb8ab; background: transparent; color: var(--ink); cursor: pointer; font: 15px var(--sans); transition: background .18s, border-color .18s; }
.carousel-btn:hover { background: var(--paper-deep); border-color: var(--ink); }
.carousel-toggle { min-width: 52px; height: 38px; flex: none; padding: 0 9px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.carousel-toggle:hover { color: var(--orange); }
.process-card .flow-note { margin-top: 12px; }

/* ---------- Tools carousel ---------- */
.tools-section { padding-block: 96px 100px; border-top: 1px solid var(--line); scroll-margin-top: 0; }
.tools-head { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: end; margin-bottom: 40px; }
.tools-head h2 { margin: 19px 0 0; font: 400 clamp(42px, 4.4vw, 54px)/1.03 var(--serif); letter-spacing: -1.4px; text-wrap: balance; }
.tools-intro p { max-width: 470px; margin: 0 0 22px; color: #59635b; font-size: 14px; line-height: 1.75; }
.tools-controls { display: flex; gap: 8px; align-items: center; }
.tools-carousel { position: relative; }
.tools-carousel::after { position: absolute; top: 0; right: 0; bottom: 0; width: 56px; background: linear-gradient(90deg, #f5f1e800, var(--paper)); content: ''; pointer-events: none; }
.tools-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 3.6); gap: 16px; margin: 0; padding: 4px 4px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.tools-track::-webkit-scrollbar { display: none; }
.tools-track:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.tool-card { scroll-snap-align: start; display: flex; flex-direction: column; min-height: 196px; padding: 20px 20px 22px; border: 1px solid #c9c4b7; background: #efebe1; box-shadow: 6px 6px 0 #e4dfd2; transition: transform .2s, border-color .2s; }
.tool-card:hover { transform: translateY(-2px); border-color: #a9a495; }
.tool-mark { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; font: italic 500 20px/1 var(--serif); letter-spacing: -.5px; }
.tool-mark-1 { background: var(--green-deep); color: #f2eee5; }
.tool-mark-2 { background: var(--lime); color: var(--ink); }
.tool-mark-3 { background: var(--orange); color: #fbf7ef; }
.tool-mark-4 { border: 1px solid var(--green); color: var(--green); }
.tool-cat { color: var(--orange); font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tool-card h3 { margin: 7px 0 8px; font: 500 20px/1.2 var(--serif); letter-spacing: -.2px; }
.tool-card p { margin: 0; color: #59635b; font-size: 12px; line-height: 1.65; }
.tools-foot { margin: 22px 0 0; color: var(--green-deep); font: italic 15px/1.4 var(--serif); }
.tools-foot span { margin-right: 6px; color: var(--orange); font-style: normal; }

@media (max-width: 1100px) { .primary-nav { gap: 22px; } }
@media (max-width: 900px) {
  .tools-head { grid-template-columns: 1fr; gap: 20px; }
  .tools-track { grid-auto-columns: calc((100% - 16px) / 2.3); }
}
@media (max-width: 760px) and (min-width: 601px) { .primary-nav { gap: 14px; font-size: 12px; } .nav-cta span { margin-left: 6px; } }
@media (max-width: 600px) {
  .step-slide { grid-template-columns: 34px 1fr; gap: 11px; padding: 18px 0 15px; }
  .step-slide .step-index { width: 32px; height: 32px; }
  .step-body h3 { margin-top: 4px; font-size: 19px; }
  .step-body p { font-size: 12.5px; }
  .step-controls { gap: 4px; }
  .step-dots { gap: 0; }
  .step-dot { width: 18px; height: 30px; }
  .step-dot::before { inset: 10px 4px; }
  .carousel-btn { width: 40px; height: 40px; }
  .carousel-toggle { min-width: 44px; height: 40px; padding: 0 4px; }
  .tools-section { padding-block: 66px 70px; }
  .tools-head h2 { font-size: 45px; letter-spacing: -1px; }
  .tools-head { margin-bottom: 28px; }
  .tools-intro p { font-size: 13px; }
  .tools-track { grid-auto-columns: 76%; gap: 12px; }
  .tools-carousel::after { width: 28px; }
  .tool-card { min-height: 200px; box-shadow: 5px 5px 0 #e4dfd2; }
}
@media (prefers-reduced-motion: reduce) {
  .step-slide, .step-slide.is-active { transform: none; }
  .tools-track { scroll-behavior: auto; }
}