/* What The Cuts niche landing pages (3 Nov 2026). Loaded after styles.css + wtc-chrome.css on the 3 niche pages,
   and on the home page only for the linked "What we make" / "Who we work with" pills. */
/* home: pills that link to a niche page (same pill look, the whole pill is the link) */
.pills a{display:inline-block;margin:-11px -16px;padding:11px 16px;border-radius:999px;color:inherit;text-decoration:none;transition:background .25s,color .25s}
.pills a::after{content:"\2192";display:inline-block;margin-left:8px;opacity:.7;transition:transform .25s}
.pills li:has(>a){transition:border-color .25s}
.pills li:has(>a):hover{border-color:var(--gold)}
.pills a:hover::after{transform:translateX(3px);opacity:1}
.pills--solid a:hover{background:var(--gold);color:var(--indigo)}
.pills a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* niche hero */
.nhero{min-height:0}
.nhero .hero__copy{max-width:700px}
.nhero h1{font-size:60px;line-height:.98}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;font:400 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
.crumbs a{color:var(--white);opacity:.8;text-decoration:none;border-bottom:1px solid rgba(244,183,64,.5)}
.crumbs a:hover{opacity:1;color:var(--gold)}
.nhero .phone video{background:var(--ink)}
@media (max-width:900px){.nhero h1{font-size:44px}}
@media (max-width:640px){.crumbs{display:none}.nhero h1{font-size:34px;line-height:1}.nhero .hero__reel{width:min(72%,250px)}.nhero .hero__ctas{margin-bottom:8px}}

/* proof grid: 3 across on desktop */
.grid.grid--niche{max-width:960px}
@media (min-width:901px){.grid.grid--niche{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.work .grid--niche + .fine{max-width:960px}

/* why section */
.nwhy{background:var(--white)}
.nwhy__in{max-width:var(--max);margin:0 auto;display:grid;gap:28px}
.nwhy__body p{margin:0 0 18px;font-size:18px;line-height:1.6;color:var(--slate);max-width:40em}
.nwhy__body p:first-child{font-size:20px;font-weight:500;color:var(--indigo)}
@media (min-width:1000px){.nwhy__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}.nwhy .label{grid-column:1/-1;margin-bottom:-36px}}
@media (max-width:640px){.nwhy__body p{font-size:17px}.nwhy__body p:first-child{font-size:18px}}

/* what we make: 3 across */
.nmake{background:var(--tint)}
@media (min-width:1181px){.svc-grid.nmake__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nmake .svc__n{position:static;display:block;margin:0 0 12px}

/* 3-step process */
@media (min-width:901px){.steps.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* final CTA */
.ncta{margin:36px 0 0}
.ndirect{margin-top:48px}
@media (min-width:900px){.ndirect{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.nalso{line-height:1.9}
.nalso a{font-size:17px}

/* case study page (b2b-tech-videos) */
@media (min-width:901px){.grid.grid--niche.grid--four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1120px}.work .grid--four + .fine{max-width:1120px}}
@media (min-width:641px) and (max-width:900px){.grid.grid--niche.grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cswork{background:var(--tint)}
.csfacts{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px;max-width:560px}
.csfacts li{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:baseline;font-size:16px;line-height:1.45;color:var(--white);border-top:1px solid rgba(255,255,255,.14);padding-top:10px}
.csfacts span{font:400 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
@media (min-width:901px){.steps.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:641px) and (max-width:900px){.steps.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}