/* 11 Nov 2026 review (John, WhatsApp 09:26, 09:29, 09:34). build.py block "11 Nov review". Loaded last on every page. */

/* 1. Vignettes: the black resolves more slowly into the white, and the white after it is a touch shorter */
.trk{height:104px;background:linear-gradient(180deg,#000 0,#000 25%,rgb(2,2,2) 32.5%,rgb(15,15,15) 40.0%,rgb(42,42,42) 47.5%,rgb(81,81,81) 55.0%,rgb(128,128,128) 62.5%,rgb(174,174,174) 70.0%,rgb(213,213,213) 77.5%,rgb(240,240,240) 85.0%,rgb(253,253,253) 92.5%,rgb(255,255,255) 100.0%)}
.trk + .tl,.trk + section.tl{padding-top:80px !important}
.trk + .blk.tl,.trk + section.blk.tl{padding-top:72px !important}
.dotband.dk11:has(+ .tl){padding-bottom:96px;background-image:radial-gradient(circle,rgba(255,255,255,.34) 1px,transparent 1.6px),linear-gradient(180deg,#000 0,#000 calc(100% - 96px),rgb(2,2,2) calc(100% - 86px),rgb(15,15,15) calc(100% - 77px),rgb(42,42,42) calc(100% - 67px),rgb(81,81,81) calc(100% - 58px),rgb(128,128,128) calc(100% - 48px),rgb(174,174,174) calc(100% - 38px),rgb(213,213,213) calc(100% - 29px),rgb(240,240,240) calc(100% - 19px),rgb(253,253,253) calc(100% - 10px),rgb(255,255,255) calc(100% - 0px));background-size:18px 10px,100% 100%;background-origin:content-box,border-box;background-clip:content-box,border-box;background-repeat:repeat,no-repeat}
.dotband.dk11:has(+ .tl)::after{bottom:96px}
.dotband.dk11 + .wrap.intro.tl{padding-top:44px !important}
.frz:has(+ .tl),.frz:has(+ .sec.lt),.frz:has(+ .sec.bookfeat),.frz:has(+ .gq-band.iv){padding-bottom:96px !important;background:linear-gradient(180deg,#000 0,#000 calc(100% - 96px),rgb(2,2,2) calc(100% - 86px),rgb(15,15,15) calc(100% - 77px),rgb(42,42,42) calc(100% - 67px),rgb(81,81,81) calc(100% - 58px),rgb(128,128,128) calc(100% - 48px),rgb(174,174,174) calc(100% - 38px),rgb(213,213,213) calc(100% - 29px),rgb(240,240,240) calc(100% - 19px),rgb(253,253,253) calc(100% - 10px),rgb(255,255,255) calc(100% - 0px)) !important}
.frz:has(+ .tl) + .tl,.frz:has(+ .sec.lt) + .sec.lt{padding-top:84px !important}
.frz:has(+ .wrap.intro.tl) + .wrap.intro.tl{padding-top:44px !important}
.rd .sec.dk:has(+ .sec.lt){background:linear-gradient(180deg,#000 0,#000 calc(100% - 110px),rgb(2,2,2) calc(100% - 99px),rgb(15,15,15) calc(100% - 88px),rgb(42,42,42) calc(100% - 77px),rgb(81,81,81) calc(100% - 66px),rgb(128,128,128) calc(100% - 55px),rgb(174,174,174) calc(100% - 44px),rgb(213,213,213) calc(100% - 33px),rgb(240,240,240) calc(100% - 22px),rgb(253,253,253) calc(100% - 11px),rgb(255,255,255) calc(100% - 0px))}
.rd .sec.dk + .sec.lt{padding-top:104px}
.rsec:not(.tl):has(+ .rsec.tl){padding-bottom:120px;background:linear-gradient(180deg,#000 0,#000 calc(100% - 110px),rgb(2,2,2) calc(100% - 99px),rgb(15,15,15) calc(100% - 88px),rgb(42,42,42) calc(100% - 77px),rgb(81,81,81) calc(100% - 66px),rgb(128,128,128) calc(100% - 55px),rgb(174,174,174) calc(100% - 44px),rgb(213,213,213) calc(100% - 33px),rgb(240,240,240) calc(100% - 22px),rgb(253,253,253) calc(100% - 11px),rgb(255,255,255) calc(100% - 0px))}
.gq-hero:has(+ .gq-band.iv){background:linear-gradient(180deg,#000 0,#000 calc(100% - 110px),rgb(2,2,2) calc(100% - 99px),rgb(15,15,15) calc(100% - 88px),rgb(42,42,42) calc(100% - 77px),rgb(81,81,81) calc(100% - 66px),rgb(128,128,128) calc(100% - 55px),rgb(174,174,174) calc(100% - 44px),rgb(213,213,213) calc(100% - 33px),rgb(240,240,240) calc(100% - 22px),rgb(253,253,253) calc(100% - 11px),rgb(255,255,255) calc(100% - 0px))}
header.wtop.bh + .wbody{position:relative}
header.wtop.bh + .wbody::before{content:"";display:block;height:84px;margin:0 0 -40px;background:linear-gradient(180deg,#000 0,#000 0%,rgb(2,2,2) 10.0%,rgb(15,15,15) 20.0%,rgb(42,42,42) 30.0%,rgb(81,81,81) 40.0%,rgb(128,128,128) 50.0%,rgb(174,174,174) 60.0%,rgb(213,213,213) 70.0%,rgb(240,240,240) 80.0%,rgb(253,253,253) 90.0%,rgb(255,255,255) 100.0%);box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
@media (max-width:760px){
 .trk{height:80px;background:linear-gradient(180deg,#000 0,#000 30%,rgb(2,2,2) 37.0%,rgb(15,15,15) 44.0%,rgb(42,42,42) 51.0%,rgb(81,81,81) 58.0%,rgb(128,128,128) 65.0%,rgb(174,174,174) 72.0%,rgb(213,213,213) 79.0%,rgb(240,240,240) 86.0%,rgb(253,253,253) 93.0%,rgb(255,255,255) 100.0%)}
 .trk + .tl,.trk + section.tl,.trk + .blk.tl,.trk + section.blk.tl{padding-top:56px !important}
 .dotband.dk11:has(+ .tl){padding-bottom:64px}
 .dotband.dk11:has(+ .tl)::after{bottom:64px}
 .frz:has(+ .tl),.frz:has(+ .sec.lt),.frz:has(+ .sec.bookfeat),.frz:has(+ .gq-band.iv){padding-bottom:68px !important}
 .rd .sec.dk + .sec.lt{padding-top:76px}
 header.wtop.bh + .wbody::before{height:60px;margin-bottom:-28px}
}

/* 2. Home: Nicole's photo behind "The right expertise at the moment it counts." a shade darker, so the headline pings */
.chap.gap.fm11 .ph img{filter:brightness(.82) contrast(1.04)}

/* 3. Rough Diamond book (the Rough Diamond page): a little bigger, bleeding into the left margin instead of the text, the text closer, less white */
.rd .sec.bookfeat{padding:clamp(48px,5.4vw,84px) 0 !important}
@media (min-width:900px){
 .rd .bookfeat .bf.stk{width:auto;max-width:1480px;margin:0 auto;padding:0 max(48px,calc((100vw - 1240px) / 2)) 0 clamp(12px,2.2vw,40px);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(22px,2.4vw,40px);align-items:center}
 .rd .bookfeat .bf.stk>div{display:block}
 .rd .bookfeat .bf.stk figure{margin:0;width:auto;max-width:none}
 .rd .bookfeat .bf.stk figure img{display:block;width:100%;max-width:none;margin:0;height:auto}
 .rd .bookfeat .bf.stk>div>*{order:initial}
}
@media (max-width:899px){
 .rd .bookfeat .bf.stk figure{margin:10px 0 -6px;width:100%;max-width:560px}
 .rd .bookfeat .bf.stk figure img{width:100%;max-width:560px}
}

/* 4. "Ask Nicole first" and the same light outline buttons: black with white text, gold on hover and focus */
.btn.alt,.anlive .btn.alt{background:#111;color:#fff;border:1px solid #111;padding:17px 26px;transition:background .2s,color .2s,border-color .2s}
.btn.alt:hover,.btn.alt:focus-visible,.anlive .btn.alt:hover,.anlive .btn.alt:focus-visible{background:#FFC629;color:#111;border-color:#FFC629}
.btn.alt:focus-visible,.btn:focus-visible{outline:3px solid #111;outline-offset:3px}
.dk .btn.alt,.gq-band.dk .btn.alt{border-color:rgba(255,255,255,.7)}
.dk .btn.alt:focus-visible,.dk .btn:focus-visible{outline-color:#FFC629}

/* 5. Good Questions in the header, beside Ask Nicole */
header.v2 .gqlink{margin-left:auto;margin-right:18px;position:relative;z-index:70;color:#fff;text-decoration:none;font:700 13px/1 Archivo,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:10px 2px;border-bottom:2px solid transparent;text-shadow:0 1px 8px rgba(0,0,0,.6)}
header.v2 .gqlink:hover,header.v2 .gqlink:focus-visible,header.v2 .gqlink[aria-current]{border-bottom-color:#FFC629;color:#fff}
header.v2 .gqlink:focus-visible{outline:2px solid #FFC629;outline-offset:3px}
header.v2 .gqlink + .askpill{margin-left:0}
@media (max-width:640px){header.v2 .gqlink{display:none}header.v2 .gqlink + .askpill{margin-left:auto}}

/* 6. The Black Book: the capability story first, on black, above the black book */
.bbcap{background:#000;color:#fff;padding-top:28px !important;padding-bottom:8px}
.bbcap h2{color:#fff;margin:0 0 18px;font-size:clamp(40px,5.2vw,76px);line-height:.98}
.bbcap h2 .pt{color:#FFC629}
.bbcap .lead,.bbcap .lead strong{color:#fff}
.bbcap .lead strong{font-weight:800}
.bbcap .seam{margin-top:clamp(28px,3.4vw,48px)}
.bbintro2{background:#000;color:#fff;padding-top:clamp(56px,6vw,88px) !important}
.bbintro2 .lead,.bbintro2 .lead strong{color:#fff}

/* A. Left and right margins: a gutter that holds from 1024 to 1440 */
@media (min-width:761px){
 main .wrap{width:min(1240px,100% - 2 * clamp(48px,5vw,72px))}
 main .wrap.intro{padding-left:clamp(0px,5.5vw,88px)}
}

/* B. How NYC works: five steps, strategy first */
@media (min-width:1100px){.hw3.hw5{grid-template-columns:repeat(5,1fr);gap:30px}.hw3.hw5 p{font-size:17px;line-height:1.6}.hw3.hw5 h3{font-size:clamp(20px,1.7vw,24px)}}
@media (min-width:761px) and (max-width:1099px){
 .hw3.hw5{grid-template-columns:1fr 1fr;gap:40px 48px}
 .hw-track:has(.hw5)::before{display:none}
 .hw-track:has(.hw5) .hw-dot{display:none}
}
/* C. The build, captioned: strategy first, then the brief, the team, the making, the measure */
.hb-cp{list-style:none;margin:16px auto 0;padding:0;max-width:44em;text-align:center;font:500 clamp(16px,1.35vw,19px)/1.45 Archivo,Arial,sans-serif;color:rgba(255,255,255,.86)}
.hb-cp li{margin:0 0 6px}
.hb-cp b{color:#FFC629;font-weight:700}
.hw-build.js-on .hb-cp{display:grid;min-height:3em}
.hw-build.js-on .hb-cp li{grid-area:1/1;opacity:0;transition:opacity .35s;margin:0}
.hw-build.js-on .hb-cp li.on{opacity:1}
.hb-svg .strat{stroke:#FFC629;stroke-width:5;stroke-linecap:round;fill:none}
.hb-svg .stratx{font:700 15px Archivo,Arial,sans-serif;letter-spacing:.14em;fill:#FFC629}
@media (max-width:760px){.hb-cp{font-size:15px;margin-top:12px}}
@media (prefers-reduced-motion:reduce){.hb-cp li{opacity:1 !important}}

/* D. Trust is the product: a calmer photograph from the shoot */
.hw-trust.rv11 .ph img{object-position:60% 20%}
.hw-trust.rv11 .copy .wrap{text-align:left}
.hw-trust.rv11 .hw-sub{margin-left:0;text-align:left}
.hw-trust.rv11 .ph::after{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 55%,rgba(0,0,0,0))}

/* E. Work: the 2022 to 2026 entries are case studies, each a card with a slot for the full article */
.clp .cases .case[data-cs11]{background:#0E0E0E;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:clamp(22px,2.4vw,34px);margin:0 0 18px}
.clp .cases .case[data-cs11] .cstag{display:inline-block;font:700 11px/1 Archivo,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#111;background:#FFC629;padding:6px 9px;border-radius:2px;margin:0 0 14px}
.clp .cases .case[data-cs11] .csfull{margin:18px 0 0;font:600 14px/1.3 Archivo,Arial,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.55)}
.clp .cssub{display:block;font-size:.5em;letter-spacing:.02em;color:rgba(255,255,255,.7);margin-top:8px}

/* F. Rough Diamond: black and white young people, the same strip size as the other pages */
.frz.frz-bw{padding:6px 0;background:#000}
.frz.frz-bw ul{height:104px;gap:6px;padding-right:6px}
.frz.frz-bw[data-mv] li{width:156px;height:104px;border-radius:0;background:#111}
.frz.frz-bw img{filter:grayscale(1) contrast(1.08);border-radius:0;transform:none !important}
@media (max-width:700px){.frz.frz-bw{padding:4px 0}.frz.frz-bw ul{height:72px;gap:4px;padding-right:4px}.frz.frz-bw[data-mv] li{width:108px;height:72px}}