:root{--orange:#ed8224;--black:#0f0f0f;--white:#f7f7f5;--muted:#aaaaa5;--hair:rgba(255,255,255,.2)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.5;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}::selection{background:var(--orange);color:#111}
.display{font-family:Impact,'Arial Narrow','Arial Black',sans-serif;letter-spacing:.01em;font-weight:900;line-height:.92;text-transform:uppercase}
.eyebrow{letter-spacing:.26em;font-size:.7rem;text-transform:uppercase;font-weight:800}.orange{color:var(--orange)}
.max{max-width:1440px;margin:auto;padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}
.nav{position:fixed;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:50;background:rgba(12,12,12,.91);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);padding:0 clamp(20px,5vw,80px)}
.brand{display:flex;align-items:center;gap:12px;line-height:1}
.brand .brand-image{display:block;width:clamp(145px,15.5vw,208px);height:auto;max-height:56px;object-fit:contain;object-position:left center}
.navlinks{display:flex;gap:clamp(16px,3vw,48px);align-items:center}.navlinks a{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;white-space:nowrap}.navlinks a:hover,.navlinks a:focus-visible,.navlinks a[aria-current=page]{color:var(--orange)}
.nav-cta{border:1px solid var(--orange);padding:10px 16px}.navlinks .nav-cta:hover{color:#111;background:var(--orange)}
.menu{display:none;border:1px solid #444;background:#111;color:white;padding:8px 12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 21px;border:1px solid #fff;background:transparent;color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;font-weight:800;transition:.2s}
.btn:hover{background:#fff;color:#111}.btn.orange-btn{background:var(--orange);border-color:var(--orange);color:#111}.btn.orange-btn:hover{background:white;border-color:white}
.foot{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:28px 0;border-top:1px solid #333;color:#888;font-size:.72rem;letter-spacing:.06em}.foot button{border:0;background:none;color:#999;font:inherit}.foot button:hover{color:var(--orange)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(max-width:650px){.nav{height:66px}.brand .brand-image{width:155px;max-height:46px}.menu{display:block}.navlinks{display:none;position:absolute;top:66px;right:0;left:0;flex-direction:column;align-items:stretch;background:#111;border-bottom:1px solid #555;padding:22px}.navlinks.open{display:flex}.navlinks a{padding:11px}.foot{flex-wrap:wrap}}

@media (max-width: 1040px) and (min-width: 821px) {
 .navlinks {gap:14px;} .navlinks a {font-size:.65rem;letter-spacing:.1em;}
 .brand .brand-image {width:155px;}
}
@media (max-width: 820px) and (min-width: 651px) {
 .menu {display:block;}
 .navlinks {display:none;position:absolute;top:76px;right:0;left:0;flex-direction:column;align-items:stretch;background:#111;border-bottom:1px solid #555;padding:22px;}
 .navlinks.open {display:flex;} .navlinks a {padding:11px;}
}
/* V11: social links shared by both website footers. */
.foot { flex-wrap: wrap; }
.foot .footer-socials {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}
.foot .footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid #4b4b4b;
  border-radius: 50%;
  color: #ddd;
  background: #1b1b1b;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.foot .footer-socials svg { display: block; width: 17px; height: 17px; }
.foot .footer-socials a:hover {
  color: #101010;
  background: var(--orange, #ed8224);
  border-color: var(--orange, #ed8224);
  transform: translateY(-2px);
}
.foot .footer-socials a:focus-visible {
  outline: 2px solid var(--orange, #ed8224);
  outline-offset: 3px;
}
@media (max-width: 650px) {
  .foot { gap: 16px 22px; }
  .foot .footer-socials { margin-left: 0; }
  .foot > button { margin-left: auto; }
}



/* V13 / PLOT TWIST CREATIVE / Enquiry modal. The main layout and book are unchanged. */
.contact-links .enquiry-open {
  width: min(100%, 410px);
  margin-top: 6px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  text-align: left;
  font-size: .72rem;
  letter-spacing: .135em;
  box-shadow: 5px 5px 0 rgba(237,130,36,.10);
}
.contact-links .enquiry-open span { font-size: 1.25rem; line-height: 1; }
.enquiry-dialog {
  box-sizing: border-box;
  width: min(665px, calc(100% - 28px));
  max-width: 665px;
  max-height: min(92vh, 900px);
  max-height: min(92dvh, 900px);
  padding: 0;
  border: 1px solid #68503c;
  border-top: 4px solid var(--orange);
  border-radius: 0;
  background: #141313;
  color: #fff;
  box-shadow: 0 34px 140px rgba(0,0,0,.87);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.enquiry-dialog::backdrop { background: rgba(0,0,0,.80); backdrop-filter: blur(7px); }
.enquiry-dialog:not([open]) { display: none; }
.enquiry-dialog .enquiry-inner { padding: clamp(20px,4.2vw,43px); }
.enquiry-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.enquiry-overline { color: var(--orange); font: 800 .65rem Arial,sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.enquiry-close {
  display: grid; place-items: center; flex: 0 0 37px;
  width: 37px; height: 37px; border: 1px solid #58504b;
  color: #e4e0db; background: transparent; font-size: 1.25rem;
  transition: color .2s, border-color .2s, background .2s;
}
.enquiry-close:hover { color: #101010; background: var(--orange); border-color: var(--orange); }
.enquiry-dialog h2 {
  font-family: Impact,'Arial Narrow','Arial Black',sans-serif;
  font-size: clamp(2.8rem,6vw,4.55rem);
  letter-spacing: .005em; text-transform: uppercase; line-height: .96;
  margin: 18px 0 10px; font-weight: 900;
}
.enquiry-dialog h2 span { color: var(--orange); }
.enquiry-intro { color: #c6bfba; max-width: 520px; margin: 0 0 24px; font-size: .92rem; line-height: 1.65; }
.enquiry-form { display: grid; gap: 16px; }
.enquiry-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.enquiry-field { display: flex; flex-direction: column; min-width: 0; gap: 7px; }
.enquiry-field label { color: #eeeae6; font: 800 .68rem Arial,sans-serif; letter-spacing: .115em; text-transform: uppercase; }
.enquiry-field label .required { color: var(--orange); }
.enquiry-field label .optional { color: #958b85; font-weight: 700; font-size: .58rem; letter-spacing: .07em; }
.enquiry-field input, .enquiry-field select, .enquiry-field textarea {
  display: block; box-sizing: border-box; width: 100%; max-width: 100%;
  border: 1px solid #55504b; border-radius: 0;
  background: #211f1e; color: #f7f7f7;
  padding: 12px 13px; font: 400 16px/1.4 Arial,Helvetica,sans-serif;
  outline-offset: 2px; transition: border-color .2s, background .2s;
}
.enquiry-field input::placeholder, .enquiry-field textarea::placeholder { color: #aea6a1; opacity: 1; }
.enquiry-field select { cursor: pointer; }
.enquiry-field textarea { resize: vertical; min-height: 98px; }
.enquiry-field input:hover, .enquiry-field select:hover, .enquiry-field textarea:hover { border-color: #8c8178; }
.enquiry-field input:focus-visible, .enquiry-field select:focus-visible, .enquiry-field textarea:focus-visible {
  border-color: var(--orange); outline: 2px solid var(--orange); outline-offset: 1px;
}
.enquiry-actions { display: flex; align-items: center; gap: 14px; margin-top: 1px; }
.enquiry-submit { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-width: 220px; }
.enquiry-submit:disabled { opacity: .57; cursor: wait; }
.enquiry-hint { color: #a9a19c; font: 400 .77rem/1.5 Arial,sans-serif; }
.enquiry-privacy { color: #a8a29f; font: 400 .7rem/1.6 Arial,sans-serif; margin: 0; }
.enquiry-privacy a, .enquiry-error a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.enquiry-error { color: #ffad8b; padding: 11px 13px; border: 1px solid #8e4831; background: #2b1d18; margin: 0; font-size: .85rem; }
/* A lost browser response does not mean the form wasn't delivered. */
.enquiry-uncertain {
  color: #f4d5a9; padding: 13px 14px; border: 1px solid #927041;
  background: #2b241b; margin: 0; font-size: .85rem; line-height: 1.6;
}
.enquiry-uncertain strong { color: #ffd6a0; display: block; margin-bottom: 3px; }
.enquiry-uncertain a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.enquiry-form[hidden], .enquiry-success[hidden], .enquiry-error[hidden], .enquiry-uncertain[hidden] { display: none; }
.enquiry-success { padding: 10px 0 7px; }
.enquiry-success .enquiry-success-mark { color: var(--orange); font: 900 2rem Arial,sans-serif; }
.enquiry-success p { color: #c6bfba; font-size: .96rem; line-height: 1.7; max-width: 480px; margin-bottom: 23px; }
.enquiry-success .btn { min-width: 160px; }
body.enquiry-lock { overflow: hidden; }
@media (max-width: 540px) {
  .contact-links .enquiry-open { width: 100%; }
  .enquiry-row { grid-template-columns: 1fr; gap: 16px; }
  .enquiry-dialog { max-height: 94vh; max-height: 94dvh; }
  .enquiry-dialog .enquiry-inner { padding: 22px 19px 25px; }
  .enquiry-dialog h2 { margin-top: 17px; }
  .enquiry-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .enquiry-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .enquiry-close, .enquiry-field input, .enquiry-field select, .enquiry-field textarea { transition: none; }
}



/* V16 / dedicated services page: original package detail and pricing. */
.services-section {
  position: relative;
  scroll-margin-top: 76px;
  padding: calc(76px + clamp(28px, 4.6vw, 64px)) 0 clamp(75px, 8vw, 125px);
  background: var(--black);
  border: 0;
  overflow: hidden;
}
.services-section .services-content { position: relative; z-index: 1; }
.services-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  align-items: end;
  gap: 38px;
  border-bottom: 1px solid #3b3b3b;
  padding-bottom: clamp(25px,3vw,42px);
  margin-bottom: clamp(24px,3.5vw,45px);
}
.services-heading h1 {
  margin: 16px 0 0;
  max-width: 850px;
  font-size: clamp(4rem, 7.6vw, 8.5rem);
  line-height: .9;
}
.services-heading-aside { max-width: 425px; padding-bottom: 7px; }
.services-heading-aside p { margin: 0; font-size: clamp(1rem,1.5vw,1.24rem); color: #d5cfc8; line-height: 1.6; }
.services-heading-aside .services-meta {
  color: #aaa; font-weight: 800; letter-spacing: .2em; font-size: .62rem;
  display: block; margin-bottom: 15px;
}
.services-kicker {
  color: #ed8224;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .21em;
  text-transform: uppercase;
}
.services-subhead {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin: clamp(44px,5vw,75px) 0 21px;
}
.services-subhead h3 { font-size: clamp(2.6rem,5.7vw,5.2rem); margin: 9px 0 0; }
.services-subhead > p { max-width: 475px; color: #bebebe; margin: 0 0 5px; line-height: 1.65; }
.services-capabilities {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-top: 1px solid #393939;
  border-left: 1px solid #393939;
}
.services-capability {
  min-width: 0;
  padding: clamp(20px,2.4vw,33px);
  border-right: 1px solid #393939;
  border-bottom: 1px solid #393939;
  background: rgba(255,255,255,.012);
  transition: background .25s ease;
}
.services-capability:hover { background: rgba(237,130,36,.075); }
.services-capability-number {
  color: var(--orange);
  display: block;
  font-size: .69rem;
  letter-spacing: .2em;
  font-weight: 800;
  margin-bottom: clamp(23px,3vw,44px);
}
.services-capability h4 {
  text-transform: uppercase; font: 900 clamp(1.35rem,2.35vw,2.2rem)/1.05 Impact,'Arial Narrow','Arial Black',sans-serif;
  letter-spacing: .015em; margin: 0 0 13px;
}
.services-capability p { color: #bbb; margin: 0; line-height: 1.65; font-size: .9rem; }
.services-offering-divider { display: flex; align-items: center; gap: 15px; margin: 35px 0; color: #ad9886; font-size: .65rem; font-weight: 800; letter-spacing: .23em; }
.services-offering-divider::before, .services-offering-divider::after { content: ""; height: 1px; background: #393939; flex: 1; }
.services-projects { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.services-project-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 345px;
  padding: clamp(22px,2.6vw,34px);
  background: #191919;
  border: 1px solid #444;
  transition: border-color .25s ease, transform .25s ease;
}
.services-project-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.services-project-card .services-card-tag { font-weight: 800; font-size: .65rem; letter-spacing: .2em; color: #e0a77e; text-transform: uppercase; }
.services-project-card h4 {
  margin: 24px 0 15px;
  font: 900 clamp(2.5rem,4.1vw,4.25rem)/.95 Impact,'Arial Narrow','Arial Black',sans-serif;
  text-transform: uppercase;
}
.services-project-card p { font-size: .91rem; color: #c5c5c5; margin: 0 0 20px; line-height: 1.65; }
.services-card-bottom { margin-top: auto; padding-top: 19px; border-top: 1px solid #444; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.services-card-bottom span { color: #aaa; font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.services-link {
  appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--orange);
  padding: 5px 0; color: #fff;
  text-transform: uppercase; letter-spacing: .14em; font-size: .65rem; font-weight: 900;
  cursor: pointer;
  transition: color .2s ease;
}
.services-link:hover { color: var(--orange); }
.services-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.services-retainer-area { margin-top: clamp(70px,9vw,133px); }
.services-retainer-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 35px; margin: 0 0 30px; }
.services-retainer-heading h3 { font-size: clamp(3.5rem,7vw,7.8rem); margin: 14px 0 0; }
.services-retainer-intro { color: #c7beb3; font-size: 1rem; line-height: 1.75; max-width: 535px; justify-self: end; margin: 0 0 7px; }
.services-retainer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; align-items: stretch; }
.services-retainer-card {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  padding: clamp(24px,3vw,37px); min-height: 420px;
  background: #191919; border: 1px solid #444;
}
.services-retainer-card.is-featured { background: #241b14; border-color: var(--orange); box-shadow: 7px 7px 0 rgba(237,130,36,.10); }
.services-retainer-card.is-featured .services-plan-kicker { padding-right: 75px; }
.services-retainer-card.is-featured::before { content: "BEST VALUE"; position: absolute; right: 0; top: 0; background: var(--orange); color: #111; padding: 9px 12px; font-weight: 900; letter-spacing: .15em; font-size: .58rem; }
.services-retainer-card .services-plan-kicker { color: #e7a371; letter-spacing: .2em; font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.services-retainer-card h4 { font: 900 clamp(2.1rem,3.5vw,3.6rem)/.96 Impact,'Arial Narrow','Arial Black',sans-serif; text-transform: uppercase; margin: 16px 0 8px; }
.services-retainer-card .services-plan-copy { color: #bbb; font-size: .89rem; line-height: 1.55; margin: 0 0 25px; min-height: 68px; }
.services-retainer-card .services-price { font-family: Impact,'Arial Narrow','Arial Black',sans-serif; font-size: clamp(3.1rem,5.6vw,5.1rem); line-height: 1; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.services-retainer-card .services-price small { color: #bbb; font: 800 .75rem Arial,sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.services-retainer-card .services-from { font: 900 .62rem Arial,sans-serif; letter-spacing: .15em; color: #eaa36f; vertical-align: middle; }
.services-retainer-card .services-price-note { color: #aaa; font-size: .81rem; margin: 8px 0 0; }
.services-retainer-card .services-saving { color: #ed8224; font-weight: 900; margin: 19px 0 0; font-size: .86rem; }
.services-retainer-card .services-plan-cta { margin-top: auto; padding-top: 25px; }
.services-retainer-card .services-plan-cta button { width: 100%; min-height: 47px; font-size: .68rem; justify-content: space-between; gap: 22px; }
.services-retainer-card.is-featured .services-plan-cta button { color: #101010; background: var(--orange); border: 1px solid var(--orange); }
.services-retainer-card.is-featured .services-plan-cta button:hover { color: #111; background: #fff; border-color: #fff; }
.services-retainer-extra {
  margin-top: 17px; padding: 23px clamp(22px,3vw,34px);
  display: flex; align-items: center; justify-content: space-between; gap: 25px;
  border: 1px solid #444; background: #191919;
}
.services-retainer-extra h4 { margin: 0 0 6px; font-family: Impact,'Arial Black',sans-serif; text-transform: uppercase; font-size: clamp(1.4rem,2.2vw,2.2rem); }
.services-retainer-extra p { margin: 0; color: #bbb; font-size: .9rem; line-height: 1.6; }
.services-retainer-extra strong { color: #f2a45e; white-space: nowrap; font-size: clamp(.85rem,1.4vw,1.03rem); }
.services-standard-note { margin: 15px 0 0; color: #aaa; font-size: .72rem; line-height: 1.7; }
.services-terms {
  display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, .65fr);
  gap: 30px; border-top: 1px solid #3b3b3b; margin-top: clamp(60px,7vw,95px); padding-top: 28px;
}
.services-terms-heading h3 { font-size: clamp(2.5rem,4.8vw,4.8rem); margin: 8px 0 0; }
.services-terms-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px 34px; }
.services-term h4 { margin: 0 0 7px; text-transform: uppercase; font-size: .71rem; letter-spacing: .14em; color: #f0c09c; }
.services-term p { margin: 0; color: #bbb; line-height: 1.7; font-size: .82rem; }
.services-last-cta {
  margin-top: 40px; padding: clamp(24px,3vw,38px);
  border: 1px solid #745334;
  background: linear-gradient(100deg,#1c1c1c,#161616);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.services-last-cta h3 { font-size: clamp(2rem,4vw,4rem); margin: 0 0 7px; }
.services-last-cta p { color: #c4b9ae; margin: 0; line-height: 1.6; }
.services-last-cta button { flex: none; }
@media (max-width: 980px) {
  .services-heading { grid-template-columns: 1fr; gap: 22px; }
  .services-heading-aside { max-width: 680px; }
  .services-capabilities { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .services-project-card h4 { font-size: 2.5rem; }
  .services-project-card { padding: 23px; }
}
@media (max-width: 820px) {
  .services-projects, .services-retainer-grid { grid-template-columns: 1fr; }
  .services-project-card { min-height: 235px; }
  .services-project-card h4 { margin-top: 18px; }
  .services-retainer-heading { grid-template-columns: 1fr; gap: 13px; }
  .services-retainer-intro { justify-self: start; }
  .services-retainer-card { min-height: 320px; }
  .services-retainer-card .services-plan-copy { min-height: 0; }
  .services-terms { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .services-section { scroll-margin-top: 66px; padding-top: calc(66px + 30px); }
  .services-heading h1 { font-size: clamp(3.45rem,12.7vw,5.9rem); }
  .services-subhead { display: block; }
  .services-subhead > p { margin-top: 12px; }
  .services-capabilities { grid-template-columns: 1fr; }
  .services-capability-number { margin-bottom: 17px; }
  .services-capability { padding: 23px; }
  .services-retainer-extra, .services-last-cta { flex-direction: column; align-items: flex-start; }
  .services-retainer-extra strong { white-space: normal; }
  .services-terms-grid { grid-template-columns: 1fr; gap: 21px; }
  .services-last-cta button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .services-capability, .services-project-card, .services-link { transition: none; }
}


/* Context shown to a visitor who opens the enquiry from a services card. */
.enquiry-dialog .enquiry-chosen {
  margin: -8px 0 22px; padding: 11px 14px; background: #2b2119;
  border-left: 3px solid var(--orange); color: #f2d7bd;
  font-size: .85rem; line-height: 1.5;
}
.enquiry-dialog .enquiry-chosen[hidden] { display: none; }


/* Keep in-page service links clear of the fixed navigation. */
#project-services,#retainers,#service-options{scroll-margin-top:100px}


/* V21 / COME WITH ME IF YOU WANNA LIVE! / onboarding sequence */
.services-onboarding {
  border-top: 1px solid #3b3b3b;
  margin-top: clamp(64px, 8vw, 118px);
  padding-top: clamp(36px, 5.5vw, 70px);
  background: transparent;
}
.services-onboarding-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  gap: clamp(26px, 5vw, 75px);
  margin-bottom: clamp(30px, 4vw, 52px);
}
.services-onboarding-head h3 {
  font-size: clamp(2.9rem, 4.6vw, 5.4rem);
  line-height: .95;
  margin: 15px 0 0;
}
.services-onboarding-intro { max-width: 480px; justify-self: end; }
.services-onboarding-intro p {
  color: #c4c4c4;
  font-size: clamp(.96rem, 1.3vw, 1.1rem);
  line-height: 1.75;
  margin: 0 0 4px;
}
.services-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.services-onboarding-step {
  min-width: 0;
  background: #191919;
  border: 1px solid #3b3b3b;
  padding: clamp(21px, 2.4vw, 31px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.services-onboarding-number {
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .17em;
  color: var(--orange, #ed8224);
}
.services-onboarding-step h4 {
  font: 900 clamp(1.85rem, 2.6vw, 2.85rem)/.98 Impact, 'Arial Narrow', 'Arial Black', sans-serif;
  text-transform: uppercase;
  margin: 27px 0 15px;
}
.services-onboarding-step p {
  color: #bebebe;
  line-height: 1.67;
  font-size: .88rem;
  margin: 0;
}
.services-onboarding-retainer {
  display: grid;
  /* Match THE FINE PRINT grid so the text columns share one left edge. */
  grid-template-columns: minmax(0, .35fr) minmax(0, .65fr);
  gap: 30px;
  border-bottom: 1px solid #3b3b3b;
  padding: 24px 0 26px;
  align-items: baseline;
}
.services-onboarding-retainer-label {
  color: var(--orange, #ed8224);
  font-weight: 900;
  letter-spacing: .14em;
  font-size: .69rem;
}
.services-onboarding-retainer p {
  margin: 0;
  line-height: 1.7;
  font-size: .86rem;
  color: #bbb;
}
/* THE FINE PRINT stacks at 820px; align the monthly-partner row at the same breakpoint. */
@media (max-width: 820px) {
  .services-onboarding-retainer { grid-template-columns: 1fr; gap: 8px; }
}
/* Avoid a double divider when THE FINE PRINT follows immediately. */
.services-onboarding + .services-terms {
  border-top: 0;
  margin-top: clamp(36px, 5vw, 65px);
  padding-top: 0;
}
@media(max-width: 1080px) {
  .services-onboarding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 690px) {
  .services-onboarding-head, .services-onboarding-retainer { grid-template-columns: 1fr; }
  .services-onboarding-intro { justify-self: start; }
  .services-onboarding-head h3 { font-size: clamp(1.8rem, 8.4vw, 3.8rem); }
}
@media(max-width: 480px) {
  .services-onboarding-steps { grid-template-columns: 1fr; }
  .services-onboarding-step h4 { margin-top: 17px; font-size: 2.2rem; }
  .services-onboarding-retainer { gap: 8px; }
}

/* V24: Onboarding is authored in services.html, not injected by JS.
   Keep it visible and within the page width at narrow mobile breakpoints. */
@media (max-width: 690px) {
  .services-onboarding { display: block; width: 100%; min-width: 0; }
  .services-onboarding-head,
  .services-onboarding-steps,
  .services-onboarding-retainer { max-width: 100%; min-width: 0; }
  .services-onboarding-head > *,
  .services-onboarding-step,
  .services-onboarding-retainer > * { min-width: 0; }
}

/* V27 / The real work takes the spotlight. No icon glyphs, no stock photography.
   All cropped imagery comes from the PLOT TWIST CREATIVE portfolio. */
.services-capabilities { border: 0; gap: 14px; }
.services-capability {
  padding: 0 0 23px;
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid #3b3b3b;
  background: #181818;
  overflow: hidden;
}
.services-capability-media {
  position: relative; width: 100%; height: clamp(155px,14vw,195px);
  overflow: hidden; flex: none; background: #242424;
  border-bottom: 1px solid #393939;
}
.services-capability-media::after,
.services-project-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg,rgba(15,15,15,.22) 0%, transparent 70%);
}
.services-capability-media img,
.services-project-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.78) contrast(1.07);
  transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .65s;
}
.services-capability:hover .services-capability-media img,
.services-project-card:hover .services-project-media img {
  transform: scale(1.055);
  filter: saturate(1) contrast(1.06);
}
.services-capability-number { margin: 22px 26px 14px; font-size: .65rem; }
.services-capability h4 { margin: 0 26px 11px; }
.services-capability p { margin: 0 26px; font-size: .9rem; }
.services-capability:hover { background: #1b1b1b; }

.services-project-card { padding: 0 0 clamp(22px,2.6vw,34px); }
.services-project-media { position: relative; width: 100%; height: clamp(128px,11vw,154px); overflow: hidden; flex: none; border-bottom: 1px solid #444; background: #232323; }
.services-project-card .services-card-tag { margin: 22px clamp(22px,2.6vw,34px) 0; }
.services-project-card h4 { margin: 22px clamp(22px,2.6vw,34px) 15px; }
.services-project-card > p { margin: 0 clamp(22px,2.6vw,34px) 20px; }
.services-project-card .services-card-bottom { margin: auto clamp(22px,2.6vw,34px) 0; }
.services-retainer-rule { width: 36px; height: 2px; margin: 17px 0 8px; background: var(--orange); }
.services-retainer-card.is-featured { background: #211a15; }
@media (max-width: 980px) {
  .services-capabilities { gap: 12px; }
  .services-capability-media { height: clamp(158px,24vw,215px); }
}
@media (max-width: 820px) {
  .services-project-media { height: clamp(155px,30vw,240px); }
}
@media (max-width: 620px) {
  .services-capability-media { height: clamp(180px,47vw,260px); }
  .services-capability-number { margin: 20px 23px 13px; }
  .services-capability h4 { margin: 0 23px 11px; }
  .services-capability p { margin: 0 23px; }
  .services-project-media { height: clamp(145px,42vw,230px); }
}
@media (prefers-reduced-motion: reduce) {
  .services-capability-media img, .services-project-media img { transition: none; }
}


/* V28 / ORIGINAL CINEMATIC TREATMENT
   Images are separate, replaceable assets. All typography stays live HTML.
   Retainer cards retain the approved V27 typography-only treatment. */
.services-capabilities { gap: 12px; }
.services-capability {
  position: relative;
  isolation: isolate;
  min-height: clamp(255px, 22vw, 315px);
  padding: clamp(22px, 2.25vw, 31px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: #111;
  border: 1px solid #383838;
  overflow: hidden;
}
.services-capability-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  border: 0;
  background: #111;
}
.services-capability-media::after {
  background: linear-gradient(90deg,
    rgba(9,9,9,.96) 0%,
    rgba(9,9,9,.89) 31%,
    rgba(9,9,9,.58) 60%,
    rgba(9,9,9,.10) 100%),
    linear-gradient(0deg,rgba(0,0,0,.32),transparent 70%);
}
.services-capability-media img {
  width: 100%;height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.87) contrast(1.04);
}
.services-capability-number {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(20px,2.2vw,32px);
  font-size: .68rem;
}
.services-capability h4 {
  position: relative;
  z-index: 1;
  margin: 0 0 13px;
  max-width: 85%;
  font-size: clamp(1.3rem, 2.3vw, 2.2rem);
  line-height: 1.03;
  text-shadow: 0 2px 9px rgba(0,0,0,.7);
}
.services-capability p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(72%,275px);
  font-size: clamp(.74rem,.98vw,.88rem);
  line-height: 1.5;
  color: #e4dfda;
  text-shadow: 0 1px 9px #000;
}
.services-capability:hover { background:#111; border-color: #ed8224; }
.services-capability:hover .services-capability-media img {
  transform: scale(1.035);
  filter:saturate(1) contrast(1.03);
}

/* One-off packages: a full-card cinematic background, copy remains real text. */
.services-projects {gap:14px;}
.services-project-card {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  min-height: clamp(300px,23.5vw,345px);
  padding: clamp(24px,2.4vw,34px);
  background: #111;
  border-color: #444;
}
.services-project-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width:100%; height:100%;
  border:0;
  background:#111;
}
.services-project-media::after {
  background:linear-gradient(90deg,
    rgba(8,8,8,.98) 0%,
    rgba(8,8,8,.91) 27%,
    rgba(8,8,8,.58) 64%,
    rgba(8,8,8,.10) 100%),
    linear-gradient(0deg,rgba(0,0,0,.9) 0%,transparent 31%);
}
.services-project-media img {object-fit:cover;object-position:center;filter:saturate(.91) contrast(1.05);}
.services-project-card .services-card-tag {margin:0 0 clamp(17px,2.1vw,25px);z-index:1;color:#f4a86b;}
.services-project-card h4 {
  z-index:1;
  margin:0 0 16px;
  max-width: 83%;
  font-size:clamp(2.2rem,3.25vw,3.65rem);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.services-project-card > p {
  z-index:1;
  max-width:min(75%,280px);
  margin:0 0 25px;
  color:#e0ded9;
  font-size:clamp(.78rem,.95vw,.89rem);
  line-height:1.58;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
.services-project-card .services-card-bottom {
  z-index:1;
  margin:auto 0 0;
  padding-top:18px;
  border-color:rgba(255,255,255,.35);
}
.services-project-card:hover .services-project-media img {transform:scale(1.035);filter:saturate(1) contrast(1.06);}
@media(max-width:980px){
  .services-capabilities {gap:12px;}
  .services-capability {min-height:285px;}
  .services-capability h4 {max-width:80%;}
  .services-capability p {max-width:70%;}
}
@media(max-width:820px){
  .services-project-card {min-height:300px;}
  .services-project-media {height:100%;}
  .services-project-card h4 {font-size:clamp(2.6rem,6vw,4rem);}
}
@media(max-width:620px){
  .services-capabilities {gap:9px;}
  .services-capability {min-height:245px;padding:23px;}
  .services-capability-media {height:100%;}
  .services-capability-number {margin:0 0 22px;}
  .services-capability h4 {margin:0 0 12px;max-width:80%;font-size:clamp(1.8rem,6.5vw,2.4rem);}
  .services-capability p {margin:0;max-width:73%;font-size:.85rem;}
  .services-project-card {min-height:290px;padding:25px;}
  .services-project-card h4 {margin:0 0 14px;font-size:clamp(2.5rem,10vw,3.8rem);}
  .services-project-card > p {max-width:79%;}
}
@media (prefers-reduced-motion:reduce) {
  .services-capability-media img,.services-project-media img {transition:none;}
}

/* V29 / THE ONBOARDING CUT. These overrides touch onboarding only.
   All wording remains accessible HTML, while the photographed artwork is swappable. */
#onboarding.services-onboarding {
  margin-top: clamp(66px,8vw,114px);
  padding-top: 0;
  border-top: 1px solid #3b3b3b;
}
#onboarding .services-onboarding-head {
  position: relative;
  display: flex;
  min-height: clamp(270px,27vw,338px);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(27px,4.1vw,56px) clamp(23px,3.5vw,48px);
  margin: 0;
  background: #111;
  border-bottom: 1px solid #48423d;
}
#onboarding .services-onboarding-hero-art {
  position:absolute;
  z-index:-2;
  inset:0 0 0 auto;
  width:69%; height:100%;
  object-fit:cover;
  object-position:center center;
}
#onboarding .services-onboarding-head::after {
  content:"";
  position:absolute; z-index:-1; inset:0;
  background:linear-gradient(90deg,
    #111 0%,
    rgba(15,15,15,.98) 25%,
    rgba(15,15,15,.87) 41%,
    rgba(15,15,15,.35) 62%,
    rgba(15,15,15,.02) 100%);
  pointer-events:none;
}
#onboarding .services-onboarding-header-copy { position:relative; width:min(77%,750px); }
#onboarding .services-onboarding-kicker {
  display:block; color:var(--orange);
  letter-spacing:.23em; text-transform:uppercase;
  font-weight:900; font-size:clamp(.62rem,.85vw,.78rem);
  margin-bottom:18px;
}
#onboarding .services-onboarding-head h3 {
  margin:0;
  font-size:clamp(2.55rem,5.2vw,5.8rem);
  line-height:.96;
  letter-spacing:0;
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}
#onboarding .services-onboarding-header-copy p {
  max-width:510px;
  margin:18px 0 0;
  font-size:clamp(.87rem,1.12vw,1.03rem);
  line-height:1.65;
  color:#f2f0ec;
  text-shadow:0 2px 11px #080808;
}
#onboarding .services-onboarding-steps {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px; margin:12px 0 0; padding:0;
  list-style:none; align-items:stretch;
}
#onboarding .services-onboarding-step {
  display:flex; flex-direction:column;
  padding:0; overflow:hidden; min-width:0;
  background:#141414;
  border:1px solid #48413c;
}
#onboarding .services-onboarding-step-art {
  display:block; width:100%; height:auto;
  aspect-ratio: 1.22 / 1;
  object-fit:cover; object-position:center;
  flex:none;
  border-bottom:1px solid #3d3834;
}
#onboarding .services-onboarding-step-copy {
  padding:clamp(18px,1.75vw,25px) clamp(18px,1.7vw,24px) clamp(23px,2vw,30px);
  display:flex; flex-direction:column;
  flex:1;
}
#onboarding .services-onboarding-step h4 {
  margin:0 0 14px;
  font:900 clamp(1.5rem,2vw,2.35rem)/1.04 Impact,'Arial Narrow','Arial Black',sans-serif;
  text-transform:uppercase;
  color:#f9f9f8;
}
#onboarding .services-onboarding-step h4 .services-onboarding-number {
  display:inline;
  font:900 .68em/1 Impact,'Arial Narrow','Arial Black',sans-serif;
  letter-spacing:0;
  color:var(--orange);
  white-space:nowrap;
}
#onboarding .services-onboarding-step p {
  color:#d8d6d4;
  font-size:clamp(.79rem,.96vw,.92rem);
  line-height:1.65;
  margin:0;
}
#onboarding .services-onboarding-retainer {
  display:grid;
  grid-template-columns:minmax(0,.35fr) minmax(0,.65fr);
  gap:30px;
  align-items:center;
  margin-top:20px;
  padding:23px clamp(21px,2.8vw,35px);
  border:1px solid #3b3531;
  background:linear-gradient(95deg,#211a16,#151515 70%);
}
#onboarding .services-onboarding-retainer-label {
  font-size:.77rem; line-height:1.5;
}
#onboarding .services-onboarding-retainer p {color:#e4dcd5; font-size:.88rem;}
#onboarding + .services-terms {margin-top:clamp(44px,5vw,67px); border-top:1px solid #3b3b3b; padding-top:28px;}
@media(max-width:1100px){
  #onboarding .services-onboarding-steps {grid-template-columns:repeat(2,minmax(0,1fr));}
  #onboarding .services-onboarding-step-art {aspect-ratio:1.6/1;}
  #onboarding .services-onboarding-step h4 {font-size:clamp(1.8rem,3vw,2.65rem);}
}
@media(max-width:820px){
  #onboarding .services-onboarding-hero-art {width:82%;object-position:48% center;}
  #onboarding .services-onboarding-head::after {background:linear-gradient(90deg,#111 0%,rgba(15,15,15,.95) 30%,rgba(15,15,15,.73) 54%,rgba(15,15,15,.22) 100%);}
  #onboarding .services-onboarding-header-copy {width:92%;}
  #onboarding .services-onboarding-head h3 {font-size:clamp(2.7rem,7.1vw,4.6rem);}
  #onboarding .services-onboarding-retainer {grid-template-columns:1fr;gap:8px;}
}
@media(max-width:580px){
  #onboarding .services-onboarding-head {min-height:360px;padding:27px 20px;align-items:center;}
  #onboarding .services-onboarding-hero-art {width:100%;height:100%;object-position:58% center;opacity:.62;}
  #onboarding .services-onboarding-head::after {background:linear-gradient(90deg,rgba(14,14,14,.97),rgba(14,14,14,.80) 54%,rgba(14,14,14,.43)),linear-gradient(0deg,#111 0%,transparent 58%);}
  #onboarding .services-onboarding-header-copy {width:100%;}
  #onboarding .services-onboarding-head h3 {font-size:clamp(2.15rem,10vw,3.6rem);}
  #onboarding .services-onboarding-steps {grid-template-columns:1fr;gap:12px;}
  #onboarding .services-onboarding-step-art {aspect-ratio:1.5/1;}
  #onboarding .services-onboarding-step-copy {padding:20px 22px 25px;}
  #onboarding .services-onboarding-step h4 {font-size:2rem;}
  #onboarding .services-onboarding-retainer {margin-top:14px;padding:21px;}
}
@media(prefers-reduced-motion:reduce){
  #onboarding .services-onboarding-step-art {transition:none;}
}


/* V30 / Exact two-line onboarding typography, matched to the approved reference. */
#onboarding .services-onboarding-step-copy > .services-onboarding-number {
  display:block;
  margin:0;
  color:var(--orange);
  font:800 clamp(.62rem,.78vw,.74rem)/1.4 Arial,Helvetica,sans-serif;
  letter-spacing:.20em;
  white-space:normal;
}
#onboarding .services-onboarding-step h4 {
  margin:clamp(21px,2.1vw,30px) 0 17px;
  font-family:Impact,'Arial Narrow','Arial Black',sans-serif;
  font-size:clamp(1.4rem,2vw,2.32rem);
  font-weight:900;
  line-height:.99;
  text-transform:uppercase;
  color:#fff;
  letter-spacing:.005em;
}
#onboarding .services-onboarding-title-line {
  display:block;
  white-space:nowrap;
  color:inherit;
}
@media (max-width:1100px) {
  #onboarding .services-onboarding-step h4 {font-size:clamp(1.85rem,3.3vw,2.45rem);}
}
@media (max-width:580px) {
  #onboarding .services-onboarding-step h4 {font-size:clamp(1.95rem,8.3vw,2.45rem);}
}