/* Digital marketing city pages: Durban and Pretoria (offer mockups, 7 October 2026).
   Loads after local.css and adds only what these two pages need. Every rule is scoped
   to .local-page--city, so the Johannesburg pages that share local.css are untouched.
   Grammar follows the homepage and Brand Guide v4: near-black ground, tight ExtraBold
   display type, red square markers, 1px rules, warm-metal corner brackets, hairline
   grid, one full yellow Growth field, inversion plus a small lift for every state. */

.local-page--city{--red-deep:#a93129;--red-lift:#ff746b}

/* Interaction: inversion plus a small lift; hover and keyboard focus are one state. */
.local-page--city .button{transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}
.local-page--city .button--light:is(:hover,:focus-visible){background:var(--black);border-color:var(--paper);color:var(--paper);transform:translateY(-3px)}
.local-page--city .button--ink:is(:hover,:focus-visible){background:var(--yellow);border-color:var(--ink);color:var(--ink);transform:translateY(-3px)}
.local-page--city .button:focus-visible{outline:3px solid var(--red);outline-offset:4px}

/* ---------- Hero ---------- */
.local-page--city .local-hero{align-content:center}
.local-page--city .local-hero .service-breadcrumb{margin-bottom:clamp(28px,3vw,48px)}
.local-page--city .city-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:clamp(40px,5vw,96px);align-items:center}
.local-page--city .local-hero h1{max-width:16ch;margin:22px 0 0;font-size:clamp(2.6rem,4.7vw,4.5rem);line-height:.94;letter-spacing:-.058em;text-wrap:balance}
.local-page--city .local-hero h1 .kw-line{padding-bottom:.16em;margin-bottom:-.16em}
.local-page--city .local-hero .hero-sub{max-width:52ch;margin-top:28px;font-size:clamp(1.05rem,1.25vw,1.2rem);line-height:1.55;color:rgba(243,239,230,.8)}
.local-page--city .local-hero__cta{margin-top:36px}

/* ---------- The Growth Retainer field (yellow) ---------- */
.city-retainer{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(84px,8vw,132px);border-top:2px solid var(--ink);background:var(--yellow);color:var(--ink)}
.city-retainer::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(16,16,15,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(16,16,15,.065) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 88%,transparent)}
.city-retainer__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.66fr);gap:clamp(40px,7vw,120px);align-items:end;padding-bottom:clamp(32px,4vw,52px);border-bottom:2px solid rgba(16,16,15,.72)}
.local-page--city .city-retainer h2{max-width:11ch;margin-top:20px;font-size:clamp(3.2rem,6.4vw,6.6rem);line-height:.86;letter-spacing:-.07em}
.local-page--city .city-retainer__head p{max-width:44ch;font-size:clamp(1.08rem,1.35vw,1.25rem);font-weight:600;line-height:1.5;color:rgba(16,16,15,.84)}
.city-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,28px);margin-top:clamp(36px,4vw,56px)}
.city-tier{display:flex;flex-direction:column;min-width:0;padding:clamp(26px,3vw,44px);border:1px solid rgba(16,16,15,.42);background:transparent;color:var(--ink);transition:background .34s cubic-bezier(.16,1,.3,1),color .34s cubic-bezier(.16,1,.3,1),transform .34s cubic-bezier(.16,1,.3,1)}
.local-page--city .city-tier h3{display:flex;align-items:center;gap:12px;font-size:.78rem;font-weight:800;letter-spacing:.16em;line-height:1.2;text-transform:uppercase}
.city-tier h3::before{content:'';width:9px;height:9px;background:var(--ink);flex:none}
.local-page--city .city-tier__for{max-width:36ch;min-height:2.7em;margin-top:18px;font-size:clamp(1.08rem,1.3vw,1.22rem);font-weight:600;line-height:1.35;color:rgba(16,16,15,.84)}
.city-tier__price{display:grid;gap:10px;margin-top:28px;padding-left:22px;border-left:4px solid var(--red-deep)}
.local-page--city .city-tier__price strong{font-size:clamp(3rem,5.2vw,5.4rem);line-height:.86;letter-spacing:-.065em}
.city-tier__price sup{margin-left:.04em;font-size:.42em;vertical-align:super;line-height:0;letter-spacing:0}
.city-tier__price span{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.city-tier__spec{display:grid;margin:34px 0 0;border-top:1px solid rgba(16,16,15,.42)}
.city-tier__spec div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding:14px 0;border-bottom:1px solid rgba(16,16,15,.2)}
.city-tier__spec dt{font-size:.68rem;font-weight:800;letter-spacing:.13em;line-height:1.5;text-transform:uppercase;color:rgba(16,16,15,.66)}
.city-tier__spec dd{margin:0;font-size:1rem;font-weight:700;line-height:1.4}
.local-page--city .city-tier .button{align-self:flex-start;margin-top:34px}
.city-tier:is(:hover,:focus-within){background:var(--ink);color:var(--yellow);transform:translateY(-5px)}
.city-tier:is(:hover,:focus-within) h3::before{background:var(--red-lift)}
.local-page--city .city-tier:is(:hover,:focus-within) .city-tier__for{color:rgba(255,224,51,.86)}
.city-tier:is(:hover,:focus-within) .city-tier__price{border-left-color:var(--red-lift)}
.city-tier:is(:hover,:focus-within) .city-tier__spec{border-top-color:rgba(255,224,51,.4)}
.city-tier:is(:hover,:focus-within) .city-tier__spec div{border-bottom-color:rgba(255,224,51,.18)}
.city-tier:is(:hover,:focus-within) .city-tier__spec dt{color:rgba(255,224,51,.66)}
.local-page--city .city-tier:is(:hover,:focus-within) .button--ink{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.local-page--city .city-tier:is(:hover,:focus-within) .button--ink:is(:hover,:focus-visible){background:var(--ink);border-color:var(--yellow);color:var(--yellow)}
.city-retainer__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 48px;align-items:start;margin-top:clamp(28px,3vw,40px)}
.local-page--city .city-retainer__terms{max-width:70ch;font-size:.92rem;line-height:1.5;font-weight:600;color:rgba(16,16,15,.76)}
.city-retainer__links{display:grid;gap:10px;justify-items:start}
.local-page--city .city-retainer__links p{font-size:1rem;font-weight:700}
.city-retainer__links a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.city-retainer__links a:is(:hover,:focus-visible){color:var(--red-deep);outline:none}

/* ---------- FAQ and close: the shared local patterns, small additions ---------- */
.local-page--city .site-faq__intro .eyebrow{margin-bottom:18px}
.local-page--city .local-close__grid h2{max-width:13ch;margin-top:20px;font-size:clamp(2.6rem,4.6vw,4.7rem);line-height:.92;letter-spacing:-.056em}
.local-page--city .local-close .text-link{padding-bottom:4px;border-bottom:1px solid rgba(243,239,230,.3);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,239,230,.8);transition:color .2s ease,border-color .2s ease}
.local-page--city .local-close .text-link:is(:hover,:focus-visible){color:var(--paper);border-bottom-color:var(--red);outline:none}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .local-page--city .city-hero__grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:980px){
  .city-retainer__head{grid-template-columns:1fr;gap:28px}
}
@media(max-width:760px){
  .city-tiers{grid-template-columns:1fr}
  .local-page--city .city-tier__for{min-height:0}
  .city-retainer__foot{grid-template-columns:1fr}
}
@media(max-width:640px){
  .local-page--city .local-hero h1{font-size:clamp(2.35rem,10.4vw,3.2rem);line-height:.96}
  .local-page--city .local-hero{padding-bottom:84px}
  .local-page--city .local-hero__cta{margin-top:30px}
  .local-page--city .local-close__grid h2{font-size:clamp(2.2rem,9.6vw,2.8rem)}
  .local-page--city .city-retainer h2{font-size:clamp(2.8rem,13vw,3.8rem)}
  .city-tier__spec div{grid-template-columns:1fr;gap:4px}
  .local-page--city .city-tier .button{align-self:stretch}
}
@media(prefers-reduced-motion:reduce){
  .local-page--city .city-tier,.local-page--city .button{transition:none}
  .local-page--city .city-tier:is(:hover,:focus-within){transform:none}
}

/* City image heroes (Mark, 9 Oct 2026). Durban: Codex's two OPEN artworks from assets/images/2026-10-09-durban-responsive/.
   Pretoria: the laptop storefront, assets/images/SBLMNL-three-website-heroes/01-laptop-storefront-text-free.png.
   Wide screens: the full 16:9 artwork fills the hero; the H1 runs across the clear yellow band above the letters
   (the letters start 26% down) and the supporting copy sits in the yellow column left of the O (33.7% across).
   Narrow or tall screens: the copy stacks on the yellow wall and the 4:3 artwork follows it, all four letters whole. */
.local-page--city .city-hero--open{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:0;border-bottom:0;background:#fcc61a;color:var(--ink);overflow:hidden;container-type:inline-size;--subject-left:.337}
.local-page--city .city-hero--open .city-hero__art{order:2;display:block;width:100%;max-width:none;margin:0}
/* The stacked art's top is plain wall; fading it in hides the join between the flat yellow and the painted texture. */
.city-hero--open .city-hero__art img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%);mask-image:linear-gradient(to bottom,transparent,#000 14%)}
.city-hero--open .growth-shell{order:1;position:relative;z-index:1;padding-block:clamp(32px,5vw,56px) clamp(36px,5vw,56px)}
.local-page--city .city-hero--open .city-hero__grid{grid-template-columns:minmax(0,780px)}
.city-hero--open .service-breadcrumb{color:rgba(16,16,15,.62)}
.city-hero--open .service-breadcrumb a{color:var(--ink)}
.local-page--city .city-hero--open h1{margin:0;color:var(--ink)}
.local-page--city .city-hero--open .hero-sub{color:var(--ink);font-weight:700}

/* Pretoria: the paper pages beside the laptop begin 42.9% across. Stacked, a 3:2 window on the artwork
   (34-100% across, 11-89% down) keeps the laptop and both page stacks whole and fills the width with them. */
.local-page--city .city-hero--pta{--subject-left:.429;background:#fddc2c}
.local-page--city .city-hero--pta .city-hero__art{position:relative;aspect-ratio:3/2;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%);mask-image:linear-gradient(to bottom,transparent,#000 12%)}
.city-hero--pta .city-hero__art img{position:absolute;right:0;top:-14.1%;width:auto;max-width:none;height:127.8%;-webkit-mask-image:none;mask-image:none}

@media (min-width:1101px) and (min-aspect-ratio:8/5){
  .local-page--city .city-hero--open{
    --art-w:max(100cqw, calc((100svh - 68px) * 1672 / 941));
    --o-left:calc(100cqw - (1 - var(--subject-left)) * var(--art-w));
    --shell-l:max(var(--gutter), calc((100cqw - 1320px) / 2));
    min-height:max(calc(100svh - 68px), calc(100vw * 941 / 1672));
  }
  .local-page--city .city-hero--open .city-hero__art{position:absolute;inset:0;z-index:0}
  /* Any extra width is cropped from the plain yellow on the left, so the N is never cut. */
  .city-hero--open .city-hero__art img{width:100%;height:100%;object-fit:cover;object-position:100% 100%;-webkit-mask-image:none;mask-image:none}
  .city-hero--open .growth-shell{padding-block:2.2vw 0}
  .local-page--city .city-hero--open .service-breadcrumb{margin-bottom:1.6vw}
  .local-page--city .city-hero--open .city-hero__grid{grid-template-columns:1fr}
  .local-page--city .city-hero--open h1{max-width:14em;font-size:3.7vw;line-height:.94;letter-spacing:-.058em;text-wrap:balance}
  .local-page--city .city-hero--open .hero-sub{max-width:calc(var(--o-left) - 40px - var(--shell-l));margin-top:clamp(24px,2.2vw,40px);font-size:clamp(1.1rem,1.2vw,1.4rem);line-height:1.42;text-wrap:pretty}
  .local-page--city .city-hero--open .local-hero__cta{margin-top:clamp(24px,2vw,36px)}
  /* Pretoria: the laptop's top corner sits 54% across and 21% down, so the H1 wraps to stay left of it. */
  .local-page--city .city-hero--pta .city-hero__art{aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
  .city-hero--open.city-hero--pta .city-hero__art img{position:static;width:100%;height:100%}
  .local-page--city .city-hero--open.city-hero--pta h1{max-width:calc(.54 * var(--art-w) - (var(--art-w) - 100cqw) - var(--shell-l) - 24px)}
}
/* Very wide screens: the 1320px shell would push the copy into the O, so the hero copy moves left to fit the column. */
@media (min-width:2100px) and (min-aspect-ratio:8/5){
  /* motion.css sets this shell's width later in the cascade, so this rule carries the page class too. */
  .local-page--city .city-hero--open .growth-shell{width:auto;margin-left:max(var(--gutter), calc(var(--o-left) - 40px - 440px));margin-right:var(--gutter)}
  .local-page--city .city-hero--open{--shell-l:max(var(--gutter), calc(var(--o-left) - 40px - 440px))}
}
/* Phones: the copy fills the first screen and the artwork starts at the fold. */
@media (max-width:720px){
  .city-hero--open .growth-shell{display:flex;flex-direction:column;min-height:calc(100svh - 58px);padding-block:20px 28px}
  .local-page--city .city-hero--open .service-breadcrumb{margin-bottom:20px}
  .local-page--city .city-hero--open .city-hero__grid{flex:1;align-items:center}
  .local-page--city .city-hero--open h1{font-size:clamp(2.3rem,12.4vw,3.4rem);line-height:.95}
  .local-page--city .city-hero--open .hero-sub{margin-top:22px;font-size:clamp(1rem,4.4vw,1.2rem);line-height:1.45}
  .local-page--city .city-hero--open .local-hero__cta{margin-top:26px}
}