/* Ferron — a restrained, typographic identity. */
@font-face{font-family:"Instrument Sans";src:url('/fonts/instrument-sans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
:root{--ground:#fcfcf9;--surface:#fff;--band:#f2f3ed;--ink:#171a16;--ink-2:#50554e;--ink-3:#70766d;--line:#dfe2d9;--sans:"Instrument Sans",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
body{font-size:17px;line-height:1.6}
h1,h2,h3{letter-spacing:-.045em}
h1{font-weight:600}
.label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.13em;line-height:1.5}
#nav{background:var(--ground);backdrop-filter:none;-webkit-backdrop-filter:none}
#nav .wrap{height:68px}
.mark{display:inline-flex;align-items:center;flex:none;line-height:1;letter-spacing:0;vertical-align:middle}
.brand-logo{display:block;width:115px;height:32px;fill:currentColor;overflow:visible}
footer .brand-logo{width:86px;height:24px}
nav ul{align-items:center;gap:26px}
#nav .tel-li{display:none!important}
#nav a[aria-current="page"]:not(.mark):not(.btn){color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.btn{border-radius:5px;padding:12px 20px;transition:background .18s ease,color .18s ease,transform .18s ease}
.btn:hover{opacity:1;transform:translateY(-2px)}
.hero .ctas>.btn::after,.close .ctas>.btn::after{content:'↗';font-size:18px;margin-left:14px;line-height:1}
.link-more::after{content:' ↗';display:inline-block;margin-left:4px;transition:transform .18s ease}
.link-more:hover::after{transform:translate(2px,-2px)}
.link-more[href^="#"]::after{content:' ↓'}
.hero{padding-top:clamp(66px,8vw,112px);padding-bottom:clamp(44px,6vw,72px)}
.hero>.label{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px}
.hero>.label::before{content:'';width:7px;height:7px;background:var(--ink);clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}
.hero h1{font-size:clamp(46px,7.3vw,94px);letter-spacing:-.06em;line-height:1.04}
/* A small brand accent takes the place of the fluorescent marker stripe. */
:is(.hero,.c-hero,.i-hero) h1 .hl{background:linear-gradient(transparent 91%,var(--lime) 91%,var(--lime) 98%,transparent 98%);padding-inline:0}
.hero p.lead{font-size:clamp(17px,1.65vw,20px);max-width:55ch;line-height:1.6;margin-top:28px;text-wrap:pretty}
.hero .ctas{margin-top:30px}
.clients{margin-inline:0;padding-bottom:20px}
.clients .label{margin-bottom:24px;font-size:10px}
.clients .marquee{mask-image:none;-webkit-mask-image:none;overflow:visible}
.clients .track{width:auto;justify-content:center;flex-wrap:wrap;gap:28px 64px;animation:none}
.clients .track li[aria-hidden]{display:none}
.clients .track img{max-width:160px;max-height:29px;object-fit:contain;opacity:.65}
.results{padding-top:48px}
.rgrid b,.fig b{font-weight:500;letter-spacing:-.055em}
.rgrid b::after,.fig b::after{display:none}
.rgrid small{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.1em}
.offer,.card,.output,.layer,.lens .col,.mee article,.person,.ex,.int-tease,.record,.sys-all,.opl-proof,.opl-vis,.shot{border-radius:7px;box-shadow:none}
.offers{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.offer{border:0;border-radius:0;background:transparent;padding:32px;gap:22px}
.offer+.offer{border-left:1px solid var(--line)}
.offer:first-child{padding-left:0}
.offer:last-child{padding-right:0}
.offer blockquote{border-left-width:2px;font-size:16px;color:var(--ink-2)}
.offer .builds a{border:0;border-radius:0;padding:3px 0;margin-right:12px;background:none;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.offer .builds a:hover{text-decoration-color:var(--ink)}
.output{background:transparent;border-width:0 0 1px;border-radius:0;padding:20px 0}
.outputs{gap:0;border-top:1px solid var(--line)}
.output .k{color:var(--ink-3)}
.tabs button,.sys-track li,.sys-groups li,.sys-more{border-radius:5px}
.dd-menu{border-radius:7px;box-shadow:0 12px 28px -18px rgba(23,26,22,.3)}
.person{border-radius:7px}
.person-bio h3{letter-spacing:-.03em}
.dark{--ink:#f4f4f0;--ink-2:#b9bcb3;--ink-3:#90968a;--line:#30362d;--surface:#151915;--ground:#111510;--band:#111510;background:var(--ground)}
.closing{background:#111510}
footer{padding-top:30px}
@media(max-width:1080px) and (min-width:721px){.offers{grid-template-columns:repeat(3,minmax(0,1fr))}.offer{padding:24px 20px}.offer h3{font-size:24px}}
@media(max-width:820px){#nav .wrap{height:auto;min-height:64px}.brand-logo{width:101px;height:28px}#nav .nav-mobile-intake{border-radius:5px;padding:9px 11px}#nav .nav-toggle{border-radius:5px;border-color:transparent;background:transparent;width:40px;height:42px}#nav .wrap{gap:8px}#nav #site-navigation{align-items:stretch}}
@media(max-width:720px){.offer,.offer:first-child,.offer:last-child{padding:28px 0}.offer+.offer{border-left:0;border-top:1px solid var(--line)}.clients .track{gap:24px 32px}.clients .track img{max-width:118px;max-height:25px}.hero>.label{font-size:10px;letter-spacing:.09em}.hero h1{font-size:clamp(43px,10.2vw,66px)}.hero p.lead{font-size:17px}.hero .ctas{gap:22px}.results{padding-top:36px}}
@media(prefers-reduced-motion:reduce){.btn,.link-more::after{transition:none}.btn:hover,.link-more:hover::after{transform:none}}

.mee>article:only-child{grid-column:1/-1}.mee>article:only-child>p:not(.meta){max-width:72ch}