/* ═══════════════════════════════════════════════════════════════
   SERVICE.CSS — one outline for every service page, loaded after the
   page's own stylesheet. Same order, same numbering, everywhere:

     01 Hero (page's own)
     02 What's included   BENTO   offerings as tiles of different weight
     03 Proof             BOLD    one real case study, or three big numbers
     —  Break             SPACE   one line of big type (sometimes a clip)
     04 How it works      SPACE   numbered steps with room to breathe
     05 Investment        BOLD    packages as equal colour cards
     06 FAQ               SPACE   questions on black
     —  CTA               BOLD    the page's colour panel

   Colour tiles use the four core colours only; ink and cream are the
   neutrals. One motion clip per page, each in a different role.
   ═══════════════════════════════════════════════════════════════ */

/* Numbered eyebrow, defined here too so every service page spaces it the same */
.eyebrow-num { display: flex; align-items: baseline; gap: .7rem; }

main > section.sv { padding: clamp(4rem, 9vw, 8rem) clamp(10px, 2vw, 20px) !important; border: 0 !important; }
.sv-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: end; padding: 0 clamp(.4rem, 2vw, 1.6rem); margin-bottom: clamp(1.8rem, 4vw, 3rem); }
main .sv-head h2 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: .92; color: var(--cream); }
main .sv-head p { margin: 0; font-size: 1.05rem; line-height: 1.7; color: rgba(243,236,223,.62); max-width: 46ch; justify-self: end; }
.sv-head .eyebrow-num { grid-column: 1 / -1; margin: 0; }
@media (max-width: 800px) { .sv-head { grid-template-columns: 1fr; } main .sv-head p { justify-self: start; } }

/* shared tile */
.sv-tile { --c: var(--orange); --hatch: 60deg; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.4rem, 2.8vw, 2.4rem); border-radius: clamp(12px, 2vw, 20px); background-color: var(--c); color: var(--ink);
  background-image: repeating-linear-gradient(var(--hatch), rgba(0,0,0,.09) 0, rgba(0,0,0,.09) 1px, transparent 1px, transparent 6px); }
.sv-tile[data-color="mag"]  { --c: var(--mag);  --hatch: 135deg; }
.sv-tile[data-color="teal"] { --c: var(--teal); --hatch: 45deg; }
.sv-tile[data-color="red"]  { --c: var(--red);  --hatch: 115deg; }
.sv-tile[data-color="cream"] { --c: var(--cream); background-image: none; }
.sv-tile[data-color="ink"] { --c: #000; background-image: none; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(243,236,223,.12); }
.sv-num { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
main .sv-tile h3 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: .95; color: inherit; }
main .sv-tile p { margin: 0; color: inherit; opacity: .86; font-size: .98rem; line-height: 1.6; max-width: 46ch; }
.sv-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .4rem; }
.sv-chips span { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; padding: .3rem .5rem; opacity: .8; }

/* 02 · bento */
.sv-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: clamp(10px, 1.4vw, 16px); }
/* Every row splits at the same lines (4 and 8 of 12) so gutters align:
   big/wide = 8, med/small/third = 4. */
.sv-tile.is-big   { grid-column: span 8; grid-row: span 2; }
.sv-tile.is-big h3 { font-size: clamp(2.2rem, 4.4vw, 4rem); }
.sv-tile.is-med   { grid-column: span 4; }
.sv-tile.is-wide  { grid-column: span 8; }
.sv-tile.is-small { grid-column: span 4; }
.sv-tile.is-third { grid-column: span 4; }
.sv-tile--motion { background: #0c1a1b !important; color: var(--cream) !important; }
.sv-tile--motion .panel-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .9; }
@media (max-width: 1000px) {
  .sv-tile.is-big, .sv-tile.is-med, .sv-tile.is-wide, .sv-tile.is-small, .sv-tile.is-third { grid-column: span 6; grid-row: auto; }
  .sv-tile.is-big { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .sv-bento > * { grid-column: 1 / -1 !important; } }

/* 03 · proof: case study slab + image, or three big numbers */
.sv-case { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 0; text-decoration: none; color: var(--ink); }
.sv-case .sv-tile { border-radius: clamp(14px, 2vw, 22px) 0 0 clamp(14px, 2vw, 22px); gap: 1.1rem; }
main .sv-case h3 { font-size: clamp(2.4rem, 5vw, 4.6rem) !important; line-height: .88 !important; }
.sv-facts { list-style: none; margin: auto 0 .4rem; padding: 1rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; border-top: 2px solid currentColor; }
.sv-facts b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1; }
.sv-facts span { display: block; margin-top: .35rem; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.sv-case-media { position: relative; overflow: hidden; border-radius: 0 clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px) 0; background: #111; min-height: 360px; }
.sv-case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sv-case-media.is-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sv-case-media.is-strip img { position: static; aspect-ratio: auto; height: 100%; }
.sv-go { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--cream); padding: .9rem 1.4rem; }
.sv-case:hover .sv-go { background: var(--cream); color: var(--ink); }
.sv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.sv-stats .sv-tile { min-height: 260px; justify-content: flex-end; }
.sv-stat { font-family: var(--display); font-weight: 900; line-height: .85; font-size: clamp(4rem, 9vw, 7.5rem); display: flex; align-items: baseline; gap: .1em; }
.sv-stat small { font-size: .4em; opacity: .7; }
.sv-quote { max-width: 900px; margin: clamp(3rem, 7vw, 5rem) auto 0; padding: 0 clamp(.4rem, 2vw, 1.6rem); text-align: center; }
main .sv-quote p { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.4rem, 2.8vw, 2.4rem); line-height: 1.05; color: var(--cream); }
@media (max-width: 1000px) {
  .sv-case { grid-template-columns: 1fr; }
  .sv-case .sv-tile { border-radius: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px) 0 0; }
  .sv-case-media { border-radius: 0 0 clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px); min-height: 0; aspect-ratio: 16 / 11; }
  .sv-stats { grid-template-columns: 1fr; }
  .sv-stats .sv-tile { min-height: 0; }
}

/* — break: one line of big type with room around it (optionally over a clip) */
main > section.sv-break { position: relative; overflow: hidden; isolation: isolate; padding: clamp(6rem, 14vw, 12rem) clamp(1.25rem, 5vw, 4rem) !important; margin: 0 clamp(10px, 2vw, 20px); border-radius: clamp(14px, 2vw, 22px); }
.sv-break-line { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 9vw, 8.5rem); line-height: .86; color: var(--cream); max-width: 12ch; }
.sv-break-line span { display: block; }
.sv-break-line span:nth-child(2) { color: var(--accent); }
.sv-break.has-motion { background: #0c1a1b; }
.sv-break.has-motion .panel-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 1; }
.sv-break.has-motion .sv-break-line span:nth-child(2) { color: var(--cream); }

/* 04 · how it works: open, numbered, lots of space */
.sv-steps { list-style: none; margin: 0; padding: 0 clamp(.4rem, 2vw, 1.6rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); counter-reset: s; }
.sv-steps.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-steps li { counter-increment: s; border-top: 1px solid rgba(243,236,223,.2); padding-top: 1.4rem; }
.sv-steps li::before { content: '0' counter(s); display: block; font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 6vw, 5rem); line-height: .85; color: var(--accent); margin-bottom: 1.2rem; }
main .sv-steps h3 { margin: 0 0 .6rem; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; line-height: 1; color: var(--cream); }
main .sv-steps p { margin: 0; font-size: .98rem; line-height: 1.7; color: rgba(243,236,223,.62); }
.sv-note { max-width: 760px; margin: clamp(3rem, 6vw, 4.5rem) 0 0 auto; padding: 0 clamp(.4rem, 2vw, 1.6rem); }
main .sv-note h3 { margin: 0 0 .8rem; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.4rem; color: var(--cream); }
main .sv-note p { margin: 0; font-size: 1.05rem; line-height: 1.8; color: rgba(243,236,223,.62); }
.sv-steps-wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-steps-wrap.has-motion { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.sv-steps-media { position: relative; overflow: hidden; border-radius: clamp(14px, 2vw, 22px); min-height: 420px; background: #160c0c; }
.sv-steps-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-steps-wrap.has-motion .sv-steps { grid-template-columns: 1fr; gap: 1.6rem; }
@media (max-width: 1000px) {
  .sv-steps, .sv-steps.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-steps-wrap.has-motion { grid-template-columns: 1fr; }
  .sv-steps-media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) { .sv-steps, .sv-steps.is-three { grid-template-columns: 1fr; } }

/* 05 · investment: equal bold cards */
.sv-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.sv-prices .sv-tile { gap: 1rem; }
.sv-price { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: .95; }
.sv-price small { display: block; margin-top: .3rem; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.sv-prices ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sv-prices li { display: flex; gap: .6rem; font-size: .95rem; line-height: 1.45; }
.sv-prices li::before { content: ''; flex: none; width: 10px; height: 2px; margin-top: .65em; background: currentColor; }
.sv-ideal { margin-top: auto !important; padding-top: 1rem; border-top: 2px solid currentColor; font-family: var(--mono); font-size: .7rem !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sv-fine { max-width: 820px; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; padding: 0 clamp(.4rem, 2vw, 1.6rem); font-size: .95rem; line-height: 1.7; color: rgba(243,236,223,.6); }

/* 06 · FAQ */
.sv-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4rem); padding: 0 clamp(.4rem, 2vw, 1.6rem); }
.sv-faq .sv-head { padding: 0; margin: 0; grid-template-columns: 1fr; align-self: start; position: sticky; top: 120px; }
.sv-faq details { border-top: 1px solid rgba(243,236,223,.16); }
.sv-faq details:last-child { border-bottom: 1px solid rgba(243,236,223,.16); }
.sv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.15; color: var(--cream); }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: '+'; flex: none; font-family: var(--mono); color: var(--accent); }
.sv-faq details[open] summary::after { content: '–'; }
main .sv-faq details p { margin: 0 0 1.4rem; max-width: 62ch; font-size: 1rem; line-height: 1.75; color: rgba(243,236,223,.66); }
@media (max-width: 900px) { .sv-faq { grid-template-columns: 1fr; } .sv-faq .sv-head { position: static; } }

/* Hero clip (web design page): sits on the right, fades into the hero */
.svc-hero.has-motion { position: relative; overflow: hidden; isolation: isolate; }
.sv-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; }
/* Full-bleed clip behind the hero; a left-side shade keeps the copy readable. */
.svc-hero.has-motion::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,8,8,.7) 0%, rgba(10,8,8,.25) 60%, transparent 100%); }

/* ── Colour as accent, not fill ──
   One colour block per section at most. Every other tile is ink, and its
   core colour only shows in the number, a top rule, or the key figure.
   Filled: the first bento tile, the proof card, a "Most popular" package
   and the CTA panel. */
.sv-bento .sv-tile:not(:first-child):not(.sv-tile--motion),
.sv-stats .sv-tile,
.sv-prices .sv-tile:not(.is-featured) {
  background-color: #000 !important; background-image: none !important; color: var(--cream) !important;
  box-shadow: inset 0 0 0 1px rgba(243,236,223,.1), inset 0 3px 0 var(--c);
}
.sv-bento .sv-tile:not(:first-child) .sv-num,
.sv-prices .sv-tile:not(.is-featured) .sv-num { color: var(--c); opacity: 1; }
.sv-bento .sv-tile:not(:first-child) .sv-chips span { border-color: rgba(243,236,223,.25); }
.sv-bento .sv-tile[data-color="cream"] { box-shadow: inset 0 0 0 1px rgba(243,236,223,.1), inset 0 3px 0 var(--cream); }
.sv-bento .sv-tile[data-color="cream"] .sv-go { background: var(--cream); color: var(--ink); }
.sv-stats .sv-stat { color: var(--c); }
.sv-prices .sv-tile:not(.is-featured) .sv-price { color: var(--c); }
.sv-prices .sv-tile:not(.is-featured) .sv-ideal { border-top-color: rgba(243,236,223,.2); color: rgba(243,236,223,.7); }

/* Social hero: the whole hero turns magenta (the clip's own backdrop) and
   the phone clip fills its right side, edge to edge top to bottom. */
.svc-hero.has-reel { position: relative; overflow: hidden; isolation: isolate; background: #b50452; min-height: min(100vh, 900px); display: flex; align-items: center; }
.svc-hero.has-reel > .wrap { position: static; width: 100%; }
.sv-reel { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; aspect-ratio: 9 / 16; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.sv-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-hero.has-reel h1, .svc-hero.has-reel .lead { color: var(--cream) !important; opacity: 1 !important; }
.svc-hero.has-reel .eyebrow-num em, .svc-hero.has-reel .eyebrow-num span { color: var(--cream) !important; }
.svc-hero.has-reel .btn-primary { background: var(--cream) !important; color: var(--ink) !important; border-color: var(--cream) !important; }
.svc-hero.has-reel .btn-secondary, .svc-hero.has-reel .platform-pill { color: var(--cream) !important; border-color: rgba(243,236,223,.5) !important; }
@media (max-width: 820px) {
  .sv-reel { inset: 0; width: 100%; min-width: 0; aspect-ratio: auto; opacity: .55; -webkit-mask-image: none; mask-image: none; }
}

/* ── Design review ──
   One hero headline style across every service page (SEO and Brand were
   sentence-case Space Grotesk), one section-label style (Local SEO's were
   italic), wider section headings, and quotes set to be read, not shouted. */
main h1, .sub-hero h1, .svc-hero h1 { font-family: var(--display) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: normal !important; line-height: .95 !important; }
.eyebrow-num { font-family: var(--mono) !important; }
.eyebrow-num em { font-style: normal !important; font-weight: 700; font-size: .95rem; color: var(--accent, var(--orange)); }
.eyebrow-num span { font-style: normal !important; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(243,236,223,.5); }
@media (min-width: 801px) { .sv-head { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); } }
.sub-hero h1 { font-size: clamp(2.3rem, 6.4vw, 4.6rem) !important; }
main .sv-quote p { font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 600 !important; text-transform: none !important; font-size: clamp(1.25rem, 2.2vw, 1.8rem) !important; line-height: 1.45 !important; }

/* Four-up stats and prices (Digital Marketing): 4 across, 2x2 below 1100px,
   so there's never a lone card on its own row. */
.sv-stats.is-four, .sv-prices.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-stats.is-four .sv-stat { font-size: clamp(3rem, 6vw, 5.2rem); }
.sv-stats .sv-tile p b { color: var(--cream); }
@media (max-width: 1100px) { .sv-stats.is-four, .sv-prices.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sv-stats.is-four, .sv-prices.is-four { grid-template-columns: 1fr; } }
/* "Best for" line on price cards: readable size. */
.sv-prices .sv-ideal { font-size: .84rem !important; line-height: 1.5; }

/* Bright clips (e.g. orange terrain) are dimmed so the statement stays readable. */
.sv-break.is-bright .panel-motion { filter: brightness(.38) saturate(.9); }
.sv-break.is-bright .sv-break-line span:nth-child(2) { color: var(--cream); }