/* =========================================================================
   CompCode Solutions — INNER (spec 132)
   The motion and micro-interaction layer for every route except the home
   page. Loads after beat.css and uses its tokens. Everything that moves is
   transform/opacity; everything is off under reduced motion (the inline
   head script sets data-motion before first paint).
   Motion tokens: controls 180 ms, UI 320 ms, reveals 850 ms, one easing.
   ========================================================================= */
:root{
  --t-ctrl:.18s; --t-ui:.32s; --t-reveal:.85s;
  --ease-out:cubic-bezier(.22,.71,.16,1);
}

/* ── active route ─────────────────────────────────────────────── */
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{transform:scaleX(1);background:var(--bronze)}
.menu a[aria-current]{color:var(--thread)}

/* ── page hero: numbered eyebrow + hairline, title rises by word ── */
.page-hero{position:relative;padding-top:132px;overflow:hidden}
.page-hero::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--bronze);opacity:.55;transform-origin:left}
html.js[data-motion="full"] .page-hero::after{animation:drawRule 1.1s var(--ease-out) .15s both}
@keyframes drawRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.page-hero__eyebrow{position:relative;padding-left:0}
/* clip only the bottom edge: italic overhangs (r, l, t) must not be cut at the sides */
.page-hero__title.is-masked .wm{display:inline-block;vertical-align:bottom;clip-path:inset(-.35em -.25em 0 -.25em)}
.page-hero__title.is-masked .wm>span{display:inline-block;transform:translateY(108%);opacity:0;
  transition:transform .9s var(--ease-out),opacity .5s ease}
.page-hero__title.is-up .wm>span{transform:none;opacity:1}
html[data-motion="reduced"] .page-hero__title .wm>span{transform:none;opacity:1;transition:none}

/* ── reveals: beat.css owns .rv/.in; here only the stagger hook ──── */
.js[data-motion="full"] .rv{will-change:opacity,transform}
.js[data-motion="full"] .rv.in{will-change:auto}

/* ── links: underline grows from the left ─────────────────────── */
main a:not(.btn):not(.mark):not(.nav__link):not(.tile):not(.post__link):not(.more__link):not(.tl):not(.pf-ledger__row):not(.pf-product__host){
  text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-size:100% 1px;background-position:0 100%;padding-bottom:1px;transition:background-size var(--t-ui) var(--ease-out),color var(--t-ctrl)}
main a:not(.btn):not(.mark):not(.nav__link):not(.tile):not(.post__link):not(.more__link):not(.tl):not(.pf-ledger__row):not(.pf-product__host):hover{background-size:0% 1px;background-position:100% 100%;color:var(--thread-deep)}
main a:not(.btn):focus-visible{background-size:100% 2px}

/* ── buttons: press and focus ──────────────────────────────────── */
.btn{transition:transform var(--t-ctrl) var(--ease-out),background-color var(--t-ctrl),border-color var(--t-ctrl),color var(--t-ctrl),box-shadow var(--t-ctrl)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:2px solid var(--thread);outline-offset:3px}
.btn[disabled],.btn:disabled{opacity:.6;cursor:progress;transform:none}

/* ── cards, rows, faq: a 2 px lift and the border turning to ink ─── */
.card,.service-card,.why-card,.problem-card,.faq-item,.run-list__row,.callout,.terms-box,.contact-info__item{
  transition:transform var(--t-ui) var(--ease-out),border-color var(--t-ui),box-shadow var(--t-ui)}
.card:hover,.service-card:hover,.faq-item:hover{transform:translateY(-2px);border-color:var(--rule-2);box-shadow:0 18px 40px -28px rgba(22,21,15,.35)}
.why-card:hover,.problem-card:hover{border-top-color:var(--thread)}
.run-list__row:hover .run-list__mark{color:var(--thread-deep)}
.run-list__mark{transition:color var(--t-ctrl)}
.faq-question__icon{transition:transform var(--t-ui) var(--ease-out)}
.faq-item.open .faq-question__icon{transform:rotate(45deg)}
.faq-question:hover{color:var(--thread-deep)}

/* ── services: engagement identity (number + facts strip) ────────── */
.service-card{position:relative;counter-increment:svc;padding-left:clamp(24px,4vw,56px)}
.service-card::before{content:"0" counter(svc);position:absolute;left:clamp(10px,1.4vw,22px);top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--bronze)}
@media (max-width:599px){.service-card{padding-left:24px}.service-card::before{position:static;display:block;margin-bottom:8px}}
.service-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--thread);transform-origin:top;transform:scaleY(0);transition:transform .9s var(--ease-out) .2s}
.js[data-motion="full"] .service-card.in::after,html[data-motion="reduced"] .service-card::after,html:not(.js) .service-card::after{transform:scaleY(1)}
.service-card__price{display:inline-block;margin-top:14px;padding:6px 10px;border:1px solid var(--rule-2);font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink);background:var(--ground)}
.service-card__rate{margin-top:8px;font-size:14px;color:var(--muted)}
section[aria-labelledby="engagements-title"]{counter-reset:svc}

/* ── forms: focus ring, error, success ───────────────────────────── */
.form-group{position:relative}
.form-group label{transition:color var(--t-ctrl)}
.form-group.is-focus label{color:var(--thread)}
.form-control,.form-group input,.form-group select,.form-group textarea{transition:border-color var(--t-ctrl),box-shadow var(--t-ctrl),background-color var(--t-ctrl)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.form-control:focus{outline:none;border-color:var(--thread);box-shadow:0 0 0 3px var(--thread-soft);background:#fff}
.form-group input.error,.form-group select.error,.form-group textarea.error,.form-group.is-error input{border-color:#8A3A20;box-shadow:0 0 0 3px rgba(138,58,32,.12)}
.form-error-msg.visible{display:block;color:#8A3A20;font-size:13px;margin-top:6px}
#form-feedback,#agency-feedback{margin-top:14px;padding:0;font-size:14.5px;line-height:1.5;transition:opacity var(--t-ui)}
#form-feedback.success,#agency-feedback.success{padding:12px 14px;border:1px solid #3f6f5e;color:#1F3B2A;background:#E3EFE6}
#form-feedback.error,#agency-feedback.error{padding:12px 14px;border:1px solid #8A3A20;color:#5e2613;background:#F6E6DF}

/* ── blog index (R3) ─────────────────────────────────────────────── */
.post-feat{display:grid;gap:18px;padding:0 0 clamp(28px,4vw,48px);margin-bottom:clamp(8px,1.5vw,16px)}
@media (min-width:900px){.post-feat{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}}
.post-feat__title{font-size:clamp(32px,4.4vw,60px);line-height:1.02}
main a.tl:not(.btn):not(.mark):not(.nav__link){color:var(--ink);text-decoration:none;background-image:none;padding:0;transition:color var(--t-ctrl)}
main a.tl:not(.btn):not(.mark):not(.nav__link):hover{color:var(--thread-deep)}
.post-feat__excerpt{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--ink-2);max-width:48ch}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-meta b{font-weight:500;color:var(--thread)}
.post-list{display:grid}
.post{display:grid;gap:8px 24px;padding:22px 0;border-top:1px solid var(--rule);transition:background-color var(--t-ui)}
.post:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:800px){.post{grid-template-columns:150px minmax(0,1fr) auto;align-items:baseline}.post__excerpt{grid-column:2}}
@media (max-width:799px){.post__link{order:1}}
.post__title{font-size:clamp(21px,2.2vw,30px);line-height:1.15}
.post__excerpt{color:var(--ink-2);line-height:1.55;max-width:62ch;font-size:15.5px}
.post__link,.more__link{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--thread);white-space:nowrap;text-decoration:none}
.post__link::after,.more__link::after{content:"\2192";display:inline-block;margin-left:6px;transition:transform var(--t-ctrl) var(--ease-out)}
.post:hover .post__link::after,.more__link:hover::after{transform:translateX(4px)}

/* ── article (R4): reading progress + more writing ───────────────── */
.readbar{position:fixed;left:0;top:70px;z-index:61;height:2px;width:100%;background:var(--thread);transform-origin:left;transform:scaleX(0);pointer-events:none}
html[data-motion="reduced"] .readbar{display:none}
.blog-article .blog-meta{margin-bottom:10px}
.blog-article p{text-wrap:pretty}
.blog-article pre{border-left:2px solid var(--thread)}
.more{max-width:760px;margin-inline:auto;margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1px solid var(--rule)}
.more__title{font-size:clamp(22px,2.4vw,32px);margin-bottom:6px}
.more ul{display:grid;gap:0;margin-top:14px}
@media (min-width:800px){.more ul{grid-template-columns:1fr 1fr 1fr;gap:20px}}
.more li{border-top:1px solid var(--rule);padding:16px 0}
.more li .post-meta{margin-bottom:8px}
.more li h3{font-size:clamp(18px,1.6vw,22px);line-height:1.2;margin-bottom:8px}

/* ── about (R5): how we work strip ───────────────────────────────── */
.model{display:grid;gap:18px;margin-top:28px;counter-reset:model}
@media (min-width:800px){.model{grid-template-columns:1fr 1fr 1fr;gap:24px}}
@media (min-width:800px){.model--4{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.model--4{grid-template-columns:repeat(4,1fr)}}
.model__step{position:relative;padding:18px 0 0;border-top:1px solid var(--ink);counter-increment:model}
.model__step::before{content:"0" counter(model);display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--bronze)}
.model__step::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--thread);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease-out) .25s}
.js[data-motion="full"] .model__step.in::after,html[data-motion="reduced"] .model__step::after,html:not(.js) .model__step::after{transform:scaleX(1)}
.model__step h3{font-size:clamp(19px,1.8vw,24px);margin-bottom:8px}
.model__step p{color:var(--ink-2);line-height:1.55;font-size:15px}
.people{display:grid;gap:16px;margin-top:8px}
@media (min-width:720px){.people{grid-template-columns:1fr 1fr}}
.people__card{border:1px solid var(--rule);background:var(--paper);padding:18px 20px}
.people__card h3{font-size:clamp(20px,1.9vw,26px)}
.people__card .tag{display:block;margin:4px 0 10px}
.people__card p{color:var(--ink-2);line-height:1.55;font-size:15px}

/* ── 404 ─────────────────────────────────────────────────────────── */
.page-hero--404 .page-hero__eyebrow{color:var(--bronze)}

/* ── reduced motion: nothing moves, everything is visible ────────── */
@media (prefers-reduced-motion:reduce){
  .btn:hover,.card:hover,.service-card:hover,.faq-item:hover{transform:none}
  .post__link::after,.more__link::after,.faq-question__icon,.btn,.card,.service-card,.why-card,.faq-item,.page-hero::after,.service-card::after,.model__step::after{transition:none}
}

/* ── small-screen fixes found by the 390 px overflow check (spec 132) ── */
.btn{max-width:100%;overflow-wrap:anywhere;white-space:normal;text-align:center}
.blog-article table,.taxonomy-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ── WCAG AA contrast (K-27): highlight.js github theme comments are #6a737d (4.4:1 on paper); 5.4:1 here ── */
.blog-article .hljs-comment,.blog-article .hljs-quote{color:#5C6570}