/* Responsive refinements. */
img{max-width:100%}
.about-portrait{width:100%;max-width:440px;margin-inline:auto}
.hero-intro,.about-copy,.apply-intro,form,.service>div{min-width:0}
.header{padding:12px 0;gap:24px}
.service>a,.text-link,.hero-foot>a,.footer-bottom>a{min-height:44px;display:inline-flex;align-items:center}
.service>a{padding:6px 0}
.footer-bottom{align-items:center}
.hero-bottom,.section-heading{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.about-grid,.apply{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:850px){
 .about-grid,.apply{grid-template-columns:minmax(0,1fr);gap:36px}
 .about-grid{max-width:620px}
 .apply-intro>p:not(.eyebrow){max-width:100%}.apply-intro .consultation-photo{max-width:500px}
 .form-title{display:flex;flex-wrap:wrap}.form-title>span{margin:0}
 .service{grid-template-columns:32px minmax(0,1fr);column-gap:18px}.service>a{grid-column:2;justify-self:start;margin:0}
 .section-heading{column-gap:30px}.header nav{gap:10px}
}
@media(max-width:650px){
 html{scroll-padding-top:16px}.wrap{width:calc(100% - 40px)}
 .header{min-height:100px;gap:10px;padding:12px 0}.header .brand-logo{width:62px;height:62px}
 .hero{padding-top:26px}.hero .eyebrow{font-size:11px;letter-spacing:1.1px}
 h1{font-size:clamp(42px,10.8vw,66px);letter-spacing:-1.8px;line-height:1.08;margin:28px 0 24px}
 h2,.about-copy h2{font-size:clamp(38px,10vw,48px);line-height:1.1;letter-spacing:-1.4px}
 .hero-bottom{gap:28px;padding-top:0;padding-bottom:24px}.hero-intro .button{width:100%;font-size:15px;min-height:52px}
 .hero-intro>p:first-child{font-size:19px}.hero-foot{gap:12px;flex-wrap:wrap;padding:10px 0}.hero-foot a{font-size:14px}
 .hero-photo img{height:auto;aspect-ratio:5/4;object-position:50% 62%}
 .section{padding:54px 0}.section-heading{display:block}.service{padding:24px 0;gap:10px}
 .service h3{font-size:29px;overflow-wrap:break-word}.service>div>p{font-size:16px}.tags span{font-size:12px}.industries{font-size:14px}
 .about{padding:42px 0}.about-copy .lead{font-size:22px}
 .consultation-photo img{height:auto;aspect-ratio:4/3;object-position:50% 62%}.process p{font-size:15px}
 .form-title{gap:10px;margin-bottom:16px}.form-title h3{font-size:30px}.form-title>span{font-size:11px}
 label{font-size:15px}input,select,textarea{font-size:16px;min-height:50px}.availability{font-size:14px}.privacy-note{font-size:13px}
 .social-marquee{padding:24px 0 30px}.marquee-heading{margin-bottom:20px}.social-marquee h2{font-size:11px}
 .footer-bottom{flex-wrap:wrap;gap:0 16px;font-size:12px;padding:10px 0}.footer-top p{font-size:23px}.footer-bottom>a{margin-left:auto}.footer-top{gap:18px}
}
@media(max-width:360px){
 .wrap{width:calc(100% - 32px)}.header{gap:6px}.header .brand-logo{width:52px;height:52px}
 .service{grid-template-columns:24px minmax(0,1fr)}.footer-bottom>a{margin-left:0}.footer-top p{font-size:21px}
}


.header nav{gap:37px}
.about-portrait img{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.header nav a{display:inline-flex;align-items:center;min-height:44px;width:auto;height:auto;background:none;font-size:14px;font-weight:400;color:var(--ink)}
.header nav .nav-cta{border-bottom:1px solid var(--ink);padding:8px 0}
@media(max-width:650px){.header{gap:12px}.header nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 18px;max-width:230px}.header nav a{font-size:14px;min-height:44px}.header nav .nav-cta{display:inline-flex;white-space:nowrap;padding:4px 0}}

/* Featured brand mark: large logo on the left, navigation on the right */
.header{padding:40px 0 36px}
.header .wordmark{border-radius:50%;margin:11px;flex-shrink:0}
.header .brand-logo{width:240px;height:240px;outline:1px solid var(--line);outline-offset:10px;box-shadow:0 18px 40px -22px rgba(188,23,40,.45);animation:logo-in .9s cubic-bezier(.22,1,.36,1) both}
@keyframes logo-in{from{opacity:0;transform:scale(.92)}}
@media(max-width:850px){.header .brand-logo{width:180px;height:180px}}
@media(max-width:650px){.header{padding:26px 0 22px}.header .wordmark{margin:8px}.header .brand-logo{width:120px;height:120px;outline-offset:7px}.header nav{max-width:190px}}
@media(max-width:360px){.header .brand-logo{width:100px;height:100px}}
@media(prefers-reduced-motion:reduce){.header .brand-logo{animation:none}}



/* Scroll animations (enabled by app.js via .js-motion; play once) */
.js-motion .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--d,0ms),transform .8s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.js-motion .reveal.is-in{opacity:1;transform:none}
.js-motion .row-reveal{position:relative;border-top-color:transparent}
.js-motion .row-reveal:last-child{border-bottom-color:transparent}
.js-motion .row-reveal::before,.js-motion .row-reveal:last-child::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.js-motion .row-reveal:last-child::after{top:auto;bottom:-1px;transition-delay:.35s}
.js-motion .row-reveal>*{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.js-motion .row-reveal>:nth-child(1){transition-delay:.2s}.js-motion .row-reveal>:nth-child(2){transition-delay:.3s}.js-motion .row-reveal>:nth-child(3){transition-delay:.42s}
.js-motion .row-reveal.is-in::before,.js-motion .row-reveal.is-in::after{transform:none}
.js-motion .row-reveal.is-in>*{opacity:1;transform:none}
/* Clip lives on the img (a fully clipped figure never reports as intersecting); side insets offset the zoom so it stays inside its box */
.js-motion .photo-reveal img{clip-path:inset(100% 2.83% 2.83% 2.83%);transform:scale(1.06);transition:clip-path 1.2s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1)}
.js-motion .photo-reveal.is-in img{clip-path:inset(0);transform:none}
.js-motion .photo-reveal figcaption{opacity:0;transition:opacity .6s ease .7s}
.js-motion .photo-reveal.is-in figcaption{opacity:1}
@media print{.js-motion .reveal,.js-motion .row-reveal>*{opacity:1;transform:none}.js-motion .photo-reveal img{clip-path:none;transform:none}.js-motion .photo-reveal figcaption{opacity:1}}

/* Navigation sized to sit with the larger logo */
.header nav{gap:48px}
.header nav a{font-size:17px;min-height:48px;letter-spacing:.2px}
.header nav .nav-cta{padding:10px 0}
@media(max-width:850px){.header nav{gap:28px}.header nav a{font-size:16px}}
@media(max-width:650px){.header nav{gap:0 18px;max-width:200px}.header nav a{font-size:15px;min-height:44px}.header nav .nav-cta{padding:4px 0}}

/* Sticky header with shrinking logo (positions driven by --p from app.js) */
.header.is-sticky{position:sticky;z-index:5;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
.header.is-sticky .wordmark{transform-origin:left center;transform:translateY(calc(var(--p,0)*var(--range,0px)/2)) scale(calc(1 - var(--p,0)*(1 - var(--s,1))))}
.header.is-sticky nav{transform:translateY(calc(var(--p,0)*var(--range,0px)/2))}

/* Headline accent underline: draws in under the italic words as the heading appears */
.js-motion h1 em,.js-motion h2 em{background:linear-gradient(currentColor,currentColor) no-repeat 0 94%/0 1px;transition:background-size 1s cubic-bezier(.22,1,.36,1) .55s}
.js-motion h1 em{background-size:0 2px}
.js-motion h2 em.accent-in{background-size:100% 1px}
.js-motion h1 em.accent-in{background-size:100% 2px}
@media print{.js-motion h1 em,.js-motion h2 em{background:none}}

/* Phone tuning for the scroll animations: shorter travel and quicker timing suit a narrow, fast-scrolled column */
@media(max-width:650px){
 .js-motion .reveal{transform:translateY(12px);transition-duration:.55s,.6s}
 .js-motion .row-reveal::before,.js-motion .row-reveal:last-child::after{transition-duration:.75s}
 .js-motion .row-reveal>*{transform:translateY(10px);transition-duration:.5s,.55s}
 .js-motion .row-reveal>:nth-child(1){transition-delay:.12s}.js-motion .row-reveal>:nth-child(2){transition-delay:.2s}.js-motion .row-reveal>:nth-child(3){transition-delay:.3s}
 .js-motion .photo-reveal img{transition-duration:.95s}
 .js-motion .photo-reveal figcaption{transition-delay:.5s}
 .js-motion h1 em,.js-motion h2 em{transition-duration:.8s;transition-delay:.4s}
}

/* Phone nav: two even rows, with the CTA underline sitting close to its text */
@media(max-width:650px){
 .header nav{gap:0 22px;max-width:200px}
 .header nav a{min-height:40px}
 .header nav .nav-cta{border-bottom:0;padding:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
}

/* Phone nav on a single line: slightly smaller logo and type so all three links fit beside it */
@media(max-width:650px){
 .header{gap:8px}
 .header .brand-logo{width:84px;height:84px}
 .header nav{flex-wrap:nowrap;white-space:nowrap;gap:10px;max-width:none}
 .header nav a{font-size:13px;letter-spacing:0}
}
@media(max-width:360px){
 .header{gap:6px}
 .header .brand-logo{width:60px;height:60px}
 .header nav{gap:8px}
 .header nav a{font-size:12px}
}

/* Marquee hearts are drawn as SVG so phones can't swap the character for an emoji */
.marquee-star{display:inline-flex;align-items:center;line-height:1}
.marquee-heart{display:block;width:1.2em;height:1.2em}