/* Essence Adverts — individual service pages. Loaded after essence.css, essence-home.css and essence-services.css. */

/* ---------- hero ---------- */
.sp .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px;font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sp .crumbs a{transition:color .3s}
.sp .crumbs a:hover{color:var(--brand)}
.sp .crumbs .sep{width:8px;height:8px;background:var(--brand);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.sp .sv-statement{font-size:clamp(42px,6.6vw,112px)}
.sp .sp-intro{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;margin-top:52px;align-items:end}
.sp .sp-intro .lead p{font-size:clamp(18px,1.6vw,22px);line-height:1.6;color:var(--ink)}
.sp .sp-intro .lead p + p{margin-top:14px;font-size:16.5px;color:var(--ink-2)}
.sp .sp-intro .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.sp .sp-reel{position:relative;margin-top:70px;height:76vh;max-height:760px;min-height:340px;overflow:hidden;clip-path:inset(0 32px round 32px);background:#000}
.sp .sp-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp .sp-reel.wide{height:auto;max-height:none;min-height:0;aspect-ratio:16/9} /* films with on-screen text (motion page): always show the whole 16:9 frame */

/* ---------- statement band ---------- */
.sp-statement{border-radius:56px 56px 0 0}
.sp-statement h2{font-size:clamp(34px,4.6vw,72px);font-weight:900;letter-spacing:-.04em;line-height:1;max-width:1100px}
.sp-statement h2 .serif{font-weight:300}
.sp-statement .sub{margin-top:22px;font-family:var(--font-head);font-weight:600;font-size:clamp(17px,1.5vw,21px);color:#bdb8b0;max-width:900px}
.sp-statement .cols{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:56px}
.sp-statement .cols.one{grid-template-columns:minmax(0,820px)}
.sp-statement .cols p{color:#c9c4bc;font-size:16.5px;line-height:1.8}
.sp-statement .cols p + p{margin-top:18px}

/* ---------- generic section head ---------- */
.sp-head{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end;margin-bottom:60px}
.sp-head h2{font-size:clamp(32px,4.4vw,68px);font-weight:900;letter-spacing:-.04em;line-height:1;margin-top:20px}
.sp-head h2 .serif{font-weight:300}
.sp-head .intro p{font-size:16.5px;line-height:1.75;color:var(--ink-2)}
.sp-head .intro p + p{margin-top:14px}
.on-dark .sp-head .intro p{color:#c9c4bc}

/* ---------- process / capability cards ---------- */
/* balanced rows: 3 per row (5 = 3+2, 6 = 3+3), 8 = 4+4, .four = 2+2; a short last row is centred, never a lone orphan on the left */
.sp-cards{--cols:3;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;counter-reset:card}
.sp-cards > .sp-card{flex:0 0 calc((100% - (var(--cols) - 1) * 18px) / var(--cols));min-width:0}
.sp-cards:has(> .sp-card:nth-child(8):last-child){--cols:4}
.sp-cards.four{--cols:2}
.sp-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:26px;padding:34px 30px 32px;background:var(--white);overflow:hidden;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.sp-card:hover{transform:translateY(-6px);border-color:var(--brand);box-shadow:0 30px 60px -35px rgba(0,0,0,.35)}
.sp-card .n{font-family:var(--font-head);font-weight:200;font-size:56px;line-height:1;letter-spacing:-.05em;color:var(--brand)}
.sp-card .k{margin-top:22px;font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.sp-card h3{margin-top:18px;font-size:clamp(20px,1.7vw,25px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.sp-card .k + h3{margin-top:8px}
.sp-card p{margin-top:14px;font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.sp-card::after{content:"";position:absolute;left:30px;bottom:0;width:48px;height:3px;background:var(--brand);transition:width .6s var(--ease)}
.sp-card:hover::after{width:calc(100% - 60px)}

/* ---------- tags (channels) ---------- */
.sp-tags{display:flex;flex-wrap:wrap;gap:12px}
.sp-tags span{display:inline-flex;align-items:center;gap:12px;padding:18px 24px;border:1.5px solid var(--ink);font-family:var(--font-head);font-weight:800;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.01em;transition:background .3s,color .3s}
.sp-tags span::before{content:"";width:12px;height:12px;background:var(--brand);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.sp-tags span:hover{background:var(--ink);color:#fff}

/* ---------- editorial text block ---------- */
.sp-text{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.sp-text .k{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.sp-text h2{font-size:clamp(30px,3.6vw,56px);font-weight:900;letter-spacing:-.04em;line-height:1.02;margin-top:14px}
.sp-text p{font-size:16.5px;line-height:1.8;color:var(--ink-2)}
.sp-text p + p{margin-top:16px}
.sp-text .badge{margin-top:30px;width:150px}

/* ---------- statement band (big lines) ---------- */
.sp-band{background:var(--brand);color:#111;border-radius:40px;padding:clamp(50px,7vw,100px) clamp(28px,6vw,90px);text-align:center}
.sp-band h2{font-size:clamp(28px,3.8vw,58px);font-weight:900;letter-spacing:-.04em;line-height:1.05;max-width:1100px;margin:0 auto}
.sp-band p{margin:22px auto 0;max-width:820px;font-family:var(--font-head);font-weight:300;font-size:clamp(18px,1.8vw,26px);line-height:1.35}

/* ---------- work + cases ---------- */
/* balanced rows like .sp-cards: 4 per row, but 3/5/6/9 items go 3 per row on desktop; a short last row is centred */
.sp-work{--cols:4;--g:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.sp-work > a{flex:0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols));min-width:0}
@media (min-width:1101px){.sp-work:has(> a:nth-child(3):last-child),.sp-work:has(> a:nth-child(5):last-child),.sp-work:has(> a:nth-child(6):last-child),.sp-work:has(> a:nth-child(9):last-child){--cols:3}}
.sp-work a{display:block}
/* grouped film rows (motion & video editing page): label on the left, two 16:9 films on the right */
.sp-films{display:grid;gap:48px}
.sp-film-group{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:44px;align-items:start;padding-top:30px;border-top:1px solid var(--line)}
.sp-film-h{margin-top:14px;font-family:var(--font-head);font-weight:800;font-size:clamp(20px,1.7vw,25px);letter-spacing:-.025em;line-height:1.15}
.sp-film-group p{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.sp-work.films{--cols:2}
.sp-work.films .img{aspect-ratio:16/9}
.sp-work .img{border-radius:22px;overflow:hidden;background:var(--paper-2);aspect-ratio:1/1}
.sp-work img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sp-work a:hover img{transform:scale(1.05)}
.sp-work h3{margin-top:14px;font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.sp-work small{display:block;margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sp-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.sp-case{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;border-radius:26px;overflow:hidden;color:#fff;isolation:isolate;background:#222}
.sp-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.sp-case::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.15) 65%)}
.sp-case:hover img{transform:scale(1.06)}
.sp-case .body{padding:30px}
.sp-case .client{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-2)}
.sp-case h3{margin-top:10px;font-size:clamp(20px,1.8vw,26px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.sp-case .more{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:4px}
.sp-more{margin-top:44px;display:flex;justify-content:center}

/* ---------- related ---------- */
.sp-related .sv-item{grid-template-columns:70px 1fr 1.25fr 56px}
/* explore more services: each row shows its discipline above the name */
.sv-name{min-width:0}
.sv-cat{display:block;margin-bottom:8px;font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep);transition:color .4s}
.sv-item:hover .sv-cat{color:var(--brand)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sp .sp-intro,.sp-head,.sp-text{grid-template-columns:1fr;gap:30px}
  .sp .sp-intro .acts{justify-content:flex-start}
  .sp-statement .cols{grid-template-columns:1fr;gap:18px}
  .sp-work{--cols:3}
  .sp-work:has(> a:nth-child(4):last-child){--cols:2}
  .sp-film-group{grid-template-columns:minmax(0,1fr);gap:22px}
  .sp-related .sv-item{grid-template-columns:56px 1fr 52px}
  .sp-cards,.sp-cards:has(> .sp-card:nth-child(8):last-child){--cols:2}
}
@media (max-width:760px){
  .sp .sv-statement{font-size:clamp(36px,10.5vw,58px)}
  .sp .sp-reel{height:56vh;clip-path:inset(0 16px round 24px);margin-top:40px}  .sp-statement{border-radius:32px 32px 0 0}
  .sp-cards,.sp-cards.four,.sp-cards:has(> .sp-card:nth-child(8):last-child){--cols:1}
  .sp-card{padding:28px 24px}
  .sp-work{--cols:2;--g:12px}
  .sp-work.films{--cols:1;--g:22px}
  .sp-work h3{font-size:14px}
  .sp-case{min-height:340px}
  .sp-band{border-radius:26px}
  .sp-tags span{padding:14px 18px}
  .sp-related .sv-item{grid-template-columns:40px 1fr 44px}
}

.sp-statement .kicker + h2{margin-top:22px}
.sp .sec[data-tight]{padding-top:40px}