/* Shared blue/yellow site, extending the approved painted homepage. */
:root { --header-h:96px; }
html { scroll-padding-top:calc(var(--header-h) + 16px); }
body { --orange:#ddf200; --lavender:#fff8ef; }
::selection { background:#ddf200; color:#20201f; }
em { color:inherit; font-style:italic; }
.skip { z-index:101; }
.skip:focus { position:fixed; top:10px; }
.header { position:sticky; top:0; z-index:100; width:100%; max-width:none; padding:22px max(var(--gutter),calc((100vw - 1440px)/2)); background:var(--cream); box-shadow:0 1px 0 #20201f20; }
/* Focus rings stay visible on cobalt bands (the paper journey panels keep a cobalt ring). */
:is(.site-cta,.collage-cta) :focus-visible,
.collage-journey :is(.journey-heading,.journey-stepper,.journey-bottom,.journey-close) :focus-visible { outline:3px solid var(--cream); outline-offset:5px; }
.collage-journey .journey-panel :focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.main-nav { gap:28px; }
.main-nav>a[aria-current="page"]:not(.button) { border-bottom:1px solid; }
.button.yellow,.header .button { background:#ddf200; color:#20201f; border:1px solid #20201f; }
.button.yellow:hover,.header .button:hover { background:#e8fa3e; }
.remix-painted { --hero-image:url('assets/hero-original-v21.webp'); }
.remix-painted .collage-hero .hero-content>.button,.remix-painted #contact .button { border-color:var(--ink); }
.inner-page h1,.inner-page .display { font-family:Anton,sans-serif; font-weight:400; letter-spacing:-.035em; line-height:1.02; }
.page-intro { padding-block:65px 52px; display:grid; grid-template-columns:1.35fr 1fr; align-items:end; gap:8%; }
.page-intro .eyebrow { margin-bottom:27px; }
.page-intro h1 { font-size:clamp(64px,7.6vw,110px); }
.page-intro>p { font-size:21px; line-height:1.5; max-width:36ch; padding-bottom:4px; }
.blue { color:var(--blue); }
.page-rule { height:17px; margin:0; background:url('assets/ribbon-paint-v18.webp') center / 100% 55px; }
.service-directory { list-style:none; padding:0; margin-block:5px 70px; }
.service-directory li { border-top:1px solid #20201f30; }
.service-directory li:last-child { border-bottom:1px solid #20201f30; }
.service-directory a { display:grid; grid-template-columns:40px 1.15fr 1fr 32px; gap:25px; align-items:center; padding:27px 0; }
.service-directory a:hover h2 { color:var(--blue); }
.service-directory .number,.service-directory .arrow { color:var(--blue); }
.service-directory .number { font:13px Space,sans-serif; }
.service-directory h2 { font:700 clamp(25px,2.7vw,39px)/1.12 Satoshi,sans-serif; letter-spacing:-.05em; }
.service-directory p { font-size:16px; max-width:36ch; color:#5f5b55; }
.service-directory .arrow { font-size:30px; }
.service-layout { display:grid; grid-template-columns:290px minmax(0,1fr); gap:8%; padding-block:55px 65px; }
.service-sidebar .eyebrow { margin-bottom:20px; }
.service-sidebar ol { list-style:none; margin:0; padding:0; }
.service-sidebar a { display:flex; gap:12px; padding:15px 0; border-bottom:1px solid #20201f25; font-size:16px; line-height:1.35; }
.service-sidebar a span { font:11px/1.9 Space,sans-serif; color:var(--blue); }
.service-sidebar a[aria-current="page"] { color:var(--blue); font-weight:700; }
.service-copy>h2 { font-size:30px; margin-bottom:20px; letter-spacing:-.04em; }
.simple-steps { list-style:none; margin:0; padding:0; }
.simple-steps li { display:grid; grid-template-columns:35px 1fr; gap:20px; border-top:1px solid #20201f30; padding:24px 0; }
.simple-steps .number { color:var(--blue); font:14px Space,sans-serif; }
.simple-steps h3 { font-size:23px; line-height:1.2; letter-spacing:-.035em; margin-bottom:8px; }
.simple-steps p { font-size:17px; max-width:48ch; }
.fit-note { border-top:1px solid #20201f30; padding-top:25px; margin-top:7px; }
.fit-note .eyebrow { color:var(--blue); margin-bottom:9px; font-size:12px; }
.fit-note p { font-size:17px; }
.site-cta { background:var(--blue); color:var(--cream); padding:45px 0; }
.site-cta>.wrap { display:flex; justify-content:space-between; align-items:center; gap:35px; }
.site-cta h2 { font:clamp(35px,4vw,55px)/1.06 Anton,sans-serif; letter-spacing:-.025em; }
.site-cta p { margin-top:12px; font-size:17px; }
.site-cta .button { flex-shrink:0; }
.about-copy { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding-block:50px 55px; }
.about-copy h2 { font-size:35px; line-height:1.12; }
.about-copy p { font-size:19px; margin-bottom:20px; }
.about-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; padding-bottom:65px; }
.about-principles>div { border-top:1px solid #20201f40; padding-top:23px; }
.about-principles .eyebrow { color:var(--blue); margin-bottom:22px; }
.about-principles h3 { font-size:26px; margin-bottom:13px; letter-spacing:-.04em; }
.about-principles p { font-size:17px; }
.work-page .proof-panel { padding:0; }
.work-page .work-gallery { --gallery-height:430px; --gallery-gap:24px; margin:0; }
.work-page .work-gallery-track { padding-inline:0; }
.work-page .gallery-item figcaption { margin-top:16px; }
.work-page .gallery-results { margin-top:30px; }
.work-page .work-bottom { margin-top:12px; margin-bottom:12px; }
.work-page .work-bottom p { font-size:12px; color:#69645d; max-width:none; }
.work-disclaimer { margin-block:0 55px; font-size:13px; line-height:1.5; color:#6b675f; }
.work-disclaimer a { text-decoration:underline; text-underline-offset:3px; }
.blog-intro { padding-bottom:35px; }
.blog-controls { display:flex; align-items:end; justify-content:space-between; gap:25px; padding-bottom:24px; border-bottom:1px solid #20201f40; }
.blog-controls label { font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.blog-controls input { display:block; width:300px; max-width:100%; background:transparent; border:0; border-bottom:1px solid #20201f80; padding:10px 0; border-radius:0; color:var(--ink); font:17px Satoshi,sans-serif; margin-top:5px; }
.blog-filters { display:flex; flex-wrap:wrap; gap:8px 18px; }
.blog-filters button { border:0; border-bottom:1px solid transparent; padding:8px 0; font-size:14px; }
.blog-filters button[aria-pressed="true"] { border-bottom-color:var(--blue); color:var(--blue); font-weight:700; }
.blog-count { font-size:12px; color:#6b675f; padding-block:15px; }
.post-list { list-style:none; margin:0; padding:0; }
.post-row { border-bottom:1px solid #20201f30; }
.post-row>a { display:grid; grid-template-columns:150px minmax(0,1fr) 40px; gap:35px; padding:29px 0; align-items:start; }
.post-meta { font-size:12px; color:#6b675f; line-height:1.7; }
.post-category { display:block; color:var(--blue); text-transform:uppercase; font:12px/1.5 Space,sans-serif; margin-bottom:9px; }
.post-row h2 { font:700 clamp(22px,2.1vw,30px)/1.18 Satoshi,sans-serif; letter-spacing:-.035em; max-width:32ch; }
.post-row p { font-size:16px; margin-top:11px; color:#5f5b55; max-width:65ch; }
.post-row>a:hover h2 { color:var(--blue); }
.post-row .arrow { font-size:30px; color:var(--blue); }
.blog-bottom { display:flex; align-items:center; justify-content:center; padding-block:35px 60px; }
[hidden] { display:none!important; }
.blog-empty { padding:50px 0; font-size:20px; }
.article-wrap { width:calc(100% - var(--gutter)*2); max-width:800px; margin:auto; padding-block:45px 65px; }
.article-back { font-size:14px; display:inline-block; margin-bottom:35px; border-bottom:1px solid; }
.article-header .eyebrow { color:var(--blue); margin-bottom:22px; }
.inner-page .article-header h1 { font:700 clamp(36px,4.4vw,62px)/1.08 Satoshi,sans-serif; letter-spacing:-.045em; text-wrap:balance; }
.article-header .dek { font-size:21px; line-height:1.45; margin-top:25px; color:#5f5b55; }
.article-byline { font-size:13px; margin-top:25px; padding-bottom:30px; border-bottom:1px solid #20201f35; color:#6b675f; }
.article-content { margin-top:35px; overflow-wrap:anywhere; }
.article-content p { max-width:none; margin-block:20px; line-height:1.75; }
.article-content h2 { font:700 30px/1.2 Satoshi,sans-serif; letter-spacing:-.035em; margin-top:42px; margin-bottom:18px; }
.article-content h3 { font-size:23px; line-height:1.25; letter-spacing:-.025em; margin-top:28px; margin-bottom:14px; }
.article-content h4 { margin-bottom:10px; }
.article-content ul,.article-content ol { padding-left:24px; margin-block:20px; }
.article-content li { padding-left:5px; margin-bottom:12px; line-height:1.65; }
.article-content a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.article-content blockquote { border-left:3px solid var(--blue); margin:25px 0; padding:1px 0 1px 24px; }
.article-content table { display:block; overflow-x:auto; width:100%; border-collapse:collapse; margin-block:24px; font-size:15px; }
.article-content td,.article-content th { padding:12px; border:1px solid #20201f35; text-align:left; min-width:120px; }
.article-content th { background:#ddf20040; }
.article-content details { border-top:1px solid #20201f30; padding-block:18px; }
.article-content summary { font-weight:700; cursor:pointer; }
.article-content pre { overflow:auto; background:#f0e9df; padding:20px; font-size:14px; }
.article-related { border-top:1px solid #20201f30; margin-top:45px; padding-top:25px; }
.article-related>a { display:block; font-size:20px; font-weight:700; margin-top:15px; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding-block:55px 75px; }
.contact-layout h2 { font-size:32px; margin-bottom:18px; }
.contact-layout p { font-size:18px; margin-bottom:24px; }
.contact-layout .button { margin:6px 0 20px; }
.contact-note { font-size:13px!important; color:#6b675f; }
.contact-info { border-top:1px solid #20201f35; margin:0; }
.contact-info>div { padding-block:22px; border-bottom:1px solid #20201f35; }
.contact-info dt { font:12px Space,sans-serif; text-transform:uppercase; color:var(--blue); margin-bottom:9px; }
.contact-info dd { margin:0; font-size:20px; }
.contact-info a { border-bottom:1px solid; }
.contact-info .sms-disclosure { display:block; max-width:52ch; margin-top:10px; font-size:12px; line-height:1.5; color:#6b675f; }
.contact-info .sms-disclosure a { border-bottom:0; text-decoration:underline; text-underline-offset:2px; }
.contact-page .page-intro { padding-block:45px 36px; }
.contact-page .page-intro h1 { font-size:clamp(52px,5.8vw,84px); }
.contact-page .contact-layout { grid-template-columns:.85fr 1.2fr; gap:10%; padding-top:42px; }
.contact-copy .contact-info { margin-top:34px; }
.lead-form-panel { min-width:0; }
.lead-form-panel h2 { margin-bottom:26px; }
.form-fields { display:grid; grid-template-columns:1fr 1fr; gap:24px 22px; }
.form-fields label { font-size:14px; font-weight:700; }
.optional { color:#6b675f; font-size:13px; font-weight:400; }
.field-wide { grid-column:1/-1; }
.form-fields input,.form-fields select,.form-fields textarea { display:block; width:100%; min-height:44px; margin-top:7px; padding:10px 0; border:0; border-bottom:1px solid #20201f80; background:transparent; border-radius:0; color:var(--ink); font:16px/1.5 Satoshi,sans-serif; }
.form-fields textarea { resize:vertical; min-height:96px; }
.form-fields input:focus-visible,.form-fields select:focus-visible,.form-fields textarea:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.form-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.lead-form-panel .button { margin-block:28px 14px; min-width:210px; justify-content:space-between; }
.lead-form-panel .button:disabled { opacity:.65; cursor:wait; }
.lead-form-panel [data-submit-label] { font-size:inherit; line-height:inherit; }
.contact-layout .form-privacy { font-size:12px; color:#6b675f; margin:0; }
.form-privacy a { text-decoration:underline; text-underline-offset:3px; }
.contact-layout .form-error { margin:22px 0 0; padding-left:13px; border-left:3px solid var(--ink); font-size:16px; }
.form-success { border-top:2px solid var(--blue); padding-top:30px; }
.form-success .eyebrow { color:var(--blue); }
.form-success:focus { outline:none; }
.footer { border-top:1px solid #20201f20; }
/* Touch-size (44px) hit areas for small text links, drawn as an invisible layer so nothing moves. */
@media(max-width:760px),(pointer:coarse) {
  .main-nav>a:not(.button),.footer a:not(.brand),.contact-info dd>a,.article-back,.blog-filters button { position:relative; }
  .main-nav>a:not(.button)::before,.footer a:not(.brand)::before,.contact-info dd>a::before,.article-back::before,.blog-filters button::before { content:""; position:absolute; top:calc(50% - 22px); bottom:calc(50% - 22px); left:min(-6px,calc(50% - 22px)); right:min(-6px,calc(50% - 22px)); }
  .blog-filters button:first-child::before { left:min(-6px,calc(100% - 36px)); }
}
@media(max-width:1000px) { .main-nav { gap:20px; } .service-layout { grid-template-columns:245px minmax(0,1fr); gap:6%; } .blog-controls { align-items:start; flex-direction:column; } }
@media(max-width:760px) {
  :root { --header-h:80px; }
  .header { padding-block:17px; }
  .main-nav { max-height:calc(100vh - var(--header-h)); max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain; }
  .footer-bottom nav { flex-wrap:wrap; gap:26px 20px; }
  .footer-bottom nav a { white-space:nowrap; }
  .page-intro { padding-block:40px 35px; grid-template-columns:1fr; gap:25px; }
  .page-intro h1 { font-size:clamp(49px,12vw,77px); }
  .page-intro>p { font-size:18px; max-width:35ch; }
  .page-intro .eyebrow { margin-bottom:20px; font-size:12px; }
  .service-directory { margin-bottom:42px; }
  .service-directory a { grid-template-columns:25px 1fr 25px; gap:14px; padding-block:22px; }
  .service-directory h2 { font-size:26px; }
  .service-directory p { grid-column:2; grid-row:2; font-size:16px; }
  .service-directory .arrow { grid-column:3; grid-row:1; }
  .service-layout { grid-template-columns:1fr; padding-block:30px 45px; gap:38px; }
  .service-sidebar { order:2; }
  .service-sidebar a { padding-block:12px; }
  .simple-steps li { gap:10px; grid-template-columns:25px 1fr; }
  .site-cta { padding-block:35px; }
  .site-cta>.wrap { align-items:start; flex-direction:column; gap:25px; }
  .site-cta h2 { font-size:40px; }
  .about-copy { grid-template-columns:1fr; gap:25px; padding-block:35px 20px; }
  .about-copy p { font-size:18px; }
  .about-principles { grid-template-columns:1fr; gap:25px; padding-bottom:40px; }
  .about-principles .eyebrow { margin-bottom:12px; }
  .work-page .work-gallery { --gallery-height:320px; }
  .blog-controls input { width:100%; }
  .blog-controls label { width:100%; }
  .post-row>a { grid-template-columns:1fr 22px; gap:12px; padding-block:24px; }
  .post-meta { grid-column:1/-1; }
  .post-row h2 { font-size:25px; }
  .post-row p { font-size:16px; }
  .article-wrap { padding-block:30px 45px; }
  .article-header .dek { font-size:19px; }
  .article-content { font-size:17px; }
  .article-content h2 { font-size:27px; }
  .article-content h3 { font-size:22px; }
  .contact-layout { grid-template-columns:1fr; gap:30px; padding-block:35px 45px; }
  .contact-page .contact-layout { grid-template-columns:1fr; gap:38px; }
  .contact-page .page-intro h1 { font-size:clamp(46px,11vw,68px); }
  .contact-copy { order:2; }
  .form-fields { gap:22px 16px; }
  .contact-info dd { font-size:18px; }
}

/* Read by screen readers, not shown (e.g. the h2 above the /work reel). */
.visually-hidden { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }