/* The Cheeky Rooster: visual refresh layer (Oct 2026).
   Photos sit under transparent brand-color overlays. Palette and type are unchanged:
   Navy #1E2D4A, Sky #5882BC, Lavender #B4A0F0 (accent only), Georgia + Arial. */

/* ---------- mobile menu (works without JavaScript) ---------- */
.navlinks a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;color:#fff;font:700 .8rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:11px 14px;border:1.5px solid rgba(200,216,240,.5);border-radius:3px}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:rgba(255,255,255,.08)}
.mnav ul{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;margin:0;padding:10px 0;list-style:none;
  background:var(--navy-deep);border:1px solid rgba(200,216,240,.25);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);z-index:30}
.mnav li a{display:block;padding:11px 20px;color:var(--powder);text-decoration:none;font-size:.95rem}
.mnav li a:hover{color:#fff;background:rgba(255,255,255,.06)}
@media (max-width:760px){.mnav{display:block}.nav .btn-primary{display:none}}

/* ---------- photo bands: image under a transparent brand overlay ---------- */
.photo{position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.photo > .ph-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;max-width:none}
.photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(30,45,74,.94) 0%,rgba(30,45,74,.86) 42%,rgba(30,45,74,.55) 72%,rgba(88,130,188,.38) 100%)}
.photo.sky::before{background:linear-gradient(110deg,rgba(30,45,74,.93) 0%,rgba(30,45,74,.8) 45%,rgba(63,101,155,.55) 75%,rgba(88,130,188,.35) 100%)}
.photo.lav::before{background:linear-gradient(115deg,rgba(30,45,74,.94) 0%,rgba(30,45,74,.78) 48%,rgba(180,160,240,.38) 100%)}
.photo.deep::before{background:rgba(22,35,58,.88)}
.photo .wrap{position:relative}
@media (max-width:760px){
  .photo::before{background:linear-gradient(180deg,rgba(30,45,74,.9) 0%,rgba(30,45,74,.86) 100%)}
}
:root[data-theme="dark"] .photo::before{opacity:1}

/* hero */
.hero-photo .hero{padding-block:112px 96px}
.hero-photo h1{color:#fff;text-shadow:0 1px 18px rgba(16,24,40,.25)}
@media (max-width:640px){.hero-photo .hero{padding-block:68px 60px}}

/* proof strip that sits on the hero */
.prooflet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;background:rgba(200,216,240,.18);border:1px solid rgba(200,216,240,.18)}
.prooflet div{background:rgba(22,35,58,.55);padding:18px 18px 16px;backdrop-filter:blur(2px)}
.prooflet b{display:block;font:700 1.55rem/1.1 var(--serif);color:#fff;letter-spacing:-.01em}
.prooflet span{display:block;margin-top:6px;font-size:.76rem;line-height:1.4;color:var(--powder)}
.prooflet-note{margin-top:10px;font-size:.74rem;color:rgba(200,216,240,.8);max-width:80ch}
@media (max-width:860px){.prooflet{grid-template-columns:repeat(2,1fr)}}

/* ---------- tinted image cards ---------- */
.tint{position:relative;overflow:hidden;border-radius:2px}
.tint img{display:block;width:100%;height:100%;object-fit:cover}
.tint::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(88,130,188,.15),rgba(30,45,74,.55));mix-blend-mode:multiply}

/* portrait with lavender frame offset */
.portrait.framed{padding:0 14px 14px 0}
.portrait.framed::before{content:"";position:absolute;right:0;bottom:14px;width:calc(100% - 14px);height:calc(100% - 28px);
  border:2px solid var(--lav);z-index:0}
.portrait.framed img{position:relative;z-index:1}

/* split section: copy + tall photo */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:stretch}
.split .tint{min-height:340px}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:28px}.split .tint{min-height:220px}}

/* ---------- case studies / selected work ---------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
@media (max-width:860px){.cases{grid-template-columns:1fr}}
.case{background:var(--card);border:1px solid var(--card-edge);border-top:4px solid var(--accent);padding:28px 28px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.case .tag{font:700 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.case h3{font-size:1.25rem}
.case p{color:var(--ink-2);font-size:.95rem}
.case .figs{display:flex;flex-wrap:wrap;gap:18px 28px;margin-top:4px;padding-top:14px;border-top:1px solid var(--rule)}
.case .figs div{min-width:120px}
.case .figs b{display:block;font:700 1.6rem/1.1 var(--serif);color:var(--ink)}
.case .figs span{display:block;font-size:.78rem;color:var(--ink-2);margin-top:4px;max-width:22ch}
.case .kind{display:block;margin-top:6px;font:700 .78rem/1.45 var(--sans);color:var(--accent-ink);background:var(--bg-fill);padding:7px 10px;border-radius:2px}
.case small{color:var(--ink-2);font-size:.78rem;line-height:1.5;margin-top:auto}
.disclose{margin-top:24px;background:var(--bg-fill);border-left:3px solid var(--accent);padding:16px 20px;font-size:.88rem;color:var(--ink-2);max-width:80ch}
.disclose b{color:var(--ink)}

/* ---------- process steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:34px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps article{position:relative;padding-top:54px}
.steps article::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font:700 2rem/1 var(--serif);color:var(--lav)}
.steps article::after{content:"";position:absolute;top:44px;left:0;width:36px;height:2px;background:var(--accent)}
.steps h3{font-size:1.12rem}
.steps p{color:var(--ink-2);font-size:.93rem;margin-top:8px}
.photo .steps p{color:var(--powder)}

/* ---------- deliverables table ---------- */
.dtable{width:100%;border-collapse:collapse;margin-top:30px;font-size:.93rem}
.dtable th{background:var(--navy);color:#fff;text-align:left;padding:12px 16px;font:700 .78rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.dtable td{padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.dtable td:first-child{color:var(--ink);font-weight:700;width:28%}
.dtable tr:nth-child(even) td{background:var(--bg-soft)}
@media (max-width:640px){
  .dtable thead{display:none}
  .dtable tr{display:block;border-bottom:1px solid var(--rule);padding:10px 0}
  .dtable td{display:block;border:0;padding:4px 0;width:auto!important;background:none!important}
}

/* ---------- not-for-us list ---------- */
.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
@media (max-width:860px){.nots{grid-template-columns:1fr}}
.nots article{border:1px dashed var(--card-edge);padding:20px 22px;background:var(--card)}
.nots h3{font-size:1rem}
.nots p{font-size:.9rem;color:var(--ink-2);margin-top:6px}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:.8rem;color:var(--band-sub);margin-bottom:22px}
.crumbs a{color:var(--band-sub);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{opacity:.6;margin:0 8px}

/* ---------- insight index ---------- */
.postlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:30px}
@media (max-width:820px){.postlist{grid-template-columns:1fr}}
.postlist article{border-top:1px solid var(--rule);padding:22px 0}
.postlist .meta{display:flex;gap:6px 14px;flex-wrap:wrap}
.postlist .meta span{font:400 10.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.postlist h2{font-size:1.25rem;margin-top:10px}
.postlist h2 a{color:var(--ink);text-decoration:none}
.postlist h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.postlist p{color:var(--ink-2);font-size:.95rem;margin-top:8px}

/* related link box on articles */
.related{margin:44px auto 0;max-width:720px;background:var(--bg-fill);border-left:3px solid var(--accent);padding:18px 22px;font-size:.95rem;color:var(--ink-2)}
.related b{color:var(--ink)}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .case,.models article,.icps article{transition:transform .2s ease,box-shadow .2s ease}
  .case:hover,.models article:hover,.icps article:hover{transform:translateY(-2px)}
}

/* fixes */
.sectors{padding-left:0}
.photo .ph-img{opacity:1}
.photo .bookcard{background:rgba(22,35,58,.62);backdrop-filter:blur(3px)}
#b2b-technology .deliv li{font-size:.95rem;line-height:1.55}
.related{margin-bottom:56px}
.nots.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.nots.two{grid-template-columns:1fr}}

/* ---------- VC section v2: light, editorial, numbered ---------- */
.vc2{background:var(--bg-fill);position:relative;overflow:hidden}
.vc2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--sky),var(--lav))}
.vc2-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start}
@media (max-width:900px){.vc2-grid{grid-template-columns:1fr;gap:34px}}
.vc2-intro{position:sticky;top:100px}
@media (max-width:900px){.vc2-intro{position:static}}
.vc2-pull{margin-top:22px;padding-left:18px;border-left:3px solid var(--lav);font:italic 1.15rem/1.5 var(--serif);color:var(--ink);max-width:38ch}
.vc2-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.vc2-list li{display:grid;grid-template-columns:64px 1fr;gap:18px;background:var(--card);border:1px solid var(--card-edge);padding:26px 26px 24px;box-shadow:var(--shadow)}
.vc2-n{font:700 2.1rem/1 var(--serif);color:var(--sky)}
.vc2-list h3{font-size:1.2rem}
.vc2-list p{color:var(--ink-2);font-size:.96rem;margin-top:8px}
@media (max-width:480px){.vc2-list li{grid-template-columns:1fr;gap:6px}}
.portrait img{height:auto}