/* BrandBrew — Service Page System (new 8-section structure). Scoped under .bbc-svc. Brand tokens: forest #197149 (buttons), vibrant #28B474 (accent pops), ink #0B100D, heading #18191C, slate #69727D, tint #F2F5F3. Fonts: Archivo (headings), Roboto (body). */ .bbc-svc{ --forest:#197149; --vibrant:#28B474; --ink:#0B100D; --head:#18191C; --slate:#69727D; --tint:#F2F5F3; --line:#E4E9E6; color:var(--head); font-family:"Roboto",Montserrat,sans-serif; line-height:1.6; } .bbc-svc *{box-sizing:border-box;} .bbc-svc__inner{max-width:1180px;margin-inline:auto;padding-inline:24px;} .bbc-svc__inner--narrow{max-width:820px;} .bbc-svc__sec{padding-block:88px;} .bbc-svc__sec--light{background:#fff;} .bbc-svc__sec--tint{background:var(--tint);} .bbc-svc__sec--dark{background:var(--ink);} /* Headings */ .bbc-svc__kicker{ text-transform:uppercase;letter-spacing:.14em;font:700 13px/1 "Montserrat",sans-serif; color:var(--vibrant);margin:0 0 18px; } .bbc-svc__h2{ font-family:"Archivo","Montserrat",sans-serif;font-weight:800;color:var(--head); font-size:clamp(28px,3.4vw,40px);line-height:1.15;margin:0 0 24px;max-width:22ch; } .bbc-svc__h2--onDark{color:#fff !important;} .bbc-svc__lead{font-size:clamp(17px,1.5vw,19px);color:#3d4650;max-width:60ch;margin:0 0 8px;} /* Buttons / CTAs (inter-section CTAs are pure buttons) */ .bbc-svc__cta{margin-top:32px;} .bbc-svc__btn{ display:inline-block;background:var(--forest);color:#fff !important;text-decoration:none; font:700 16px/1 "Montserrat",sans-serif;padding:16px 30px;border-radius:10px; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; box-shadow:0 10px 24px rgba(25,113,73,.22); } .bbc-svc__btn:hover{background:#14603d;transform:translateY(-2px);box-shadow:0 14px 30px rgba(25,113,73,.3);} /* White on vibrant #28B474 measures 2.67:1 — fails AA for 16px text, and this is the primary CTA on every v2 service page. Ink on vibrant keeps the accent identity and measures ~8.4:1. */ .bbc-svc__btn--accent{background:var(--vibrant);color:#0B100D !important;font-weight:700;box-shadow:0 12px 28px rgba(40,180,116,.32);} .bbc-svc__btn--accent:hover{background:#3ecb87;color:#0B100D !important;} .bbc-svc__btn--lg{padding:19px 40px;font-size:18px;} /* 1 · Hero (dark premium band) */ .bbc-svc__hero{ position:relative;background:var(--ink);color:#fff; padding:clamp(150px,16vw,215px) 0 clamp(90px,11vw,135px); overflow:hidden; } .bbc-svc__hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(60% 90% at 78% 12%,rgba(40,180,116,.28),transparent 60%), radial-gradient(50% 70% at 8% 100%,rgba(25,113,73,.22),transparent 60%); } .bbc-svc__hero .bbc-svc__inner{position:relative;max-width:960px;} .bbc-svc__hero-h{ font-family:"Archivo","Montserrat",sans-serif;font-weight:800; font-size:clamp(34px,5.2vw,60px);line-height:1.06;letter-spacing:-.01em;margin:0 0 22px; max-width:18ch; } .bbc-svc__hero-b{font-size:clamp(17px,1.7vw,21px);color:#c7cdd2;max-width:56ch;margin:0 0 8px;} /* 3 · Sub-services grid */ .bbc-svc__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:8px; } .bbc-svc__card{ background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .bbc-svc__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,16,13,.08);border-color:var(--vibrant);} .bbc-svc__card-mark{ display:block;width:40px;height:4px;border-radius:4px;background:var(--vibrant);margin-bottom:18px; } .bbc-svc__card-t{font-family:"Archivo","Montserrat",sans-serif;font-weight:700;font-size:19px;margin:0 0 8px;color:var(--head);} .bbc-svc__card-d{color:var(--slate);font-size:15px;margin:0;} /* 4 · Case studies */ .bbc-svc__case{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;} .bbc-svc__case-link{color:var(--forest);font-weight:700;text-decoration:none;font-size:15px;} .bbc-svc__case-link:hover{text-decoration:underline;} /* 5 · Why choose us */ .bbc-svc__why{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px 40px;} .bbc-svc__why-item{display:flex;gap:16px;align-items:flex-start;} .bbc-svc__why-ic{ flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(40,180,116,.14); color:var(--forest);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px; } .bbc-svc__why-t{font-family:"Archivo","Montserrat",sans-serif;font-weight:700;font-size:18px;margin:4px 0 6px;color:var(--head);} /* 6 · How we work (dark, numbered steps) */ .bbc-svc__how .bbc-svc__inner{position:relative;} .bbc-svc__steps{ list-style:none;margin:8px 0 0;padding:0;counter-reset:none; display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px; } .bbc-svc__step{position:relative;padding-top:8px;} .bbc-svc__step-n{ display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%; background:linear-gradient(135deg,var(--vibrant),var(--forest));color:#fff; font:800 22px/1 "Archivo","Montserrat",sans-serif;margin-bottom:16px; } .bbc-svc__step-t{font-family:"Archivo","Montserrat",sans-serif;font-weight:700;font-size:19px;color:#fff !important;margin:0 0 6px;} .bbc-svc__step-d{color:#aab2b8 !important;font-size:15px;margin:0;} /* 7 · Investment pull-quote */ .bbc-svc__quote{ /* padding must follow the border's side — physical padding-left left the RTL text sitting against the bar (bar flips to the right, gap stayed on the left). */ margin:0;border:0;padding-inline-start:26px;border-inline-start:4px solid var(--vibrant); font-family:"Archivo","Montserrat",sans-serif;font-weight:600; /* Sized one clear step under the section h2 above it (which lands at 30px on desktop) — at the old 28px the quote and its own heading were within 2px of each other and the hierarchy read flat. Still comfortably above the 19px lead, so it keeps its pull-quote weight. */ font-size:clamp(18px,1.9vw,23px);line-height:1.45;color:var(--head);max-width:46ch; } /* 8 · FAQ accordion (native
) */ .bbc-svc__faq{margin-top:8px;border-top:1px solid var(--line);} .bbc-svc__faq-item{border-bottom:1px solid var(--line);} .bbc-svc__faq-q{ /* the 44px gutter reserves room for the +/- marker, which is positioned inset-inline-end — so the gutter has to be logical too, or RTL text runs under the marker. */ cursor:pointer;list-style:none;padding-block:22px;padding-inline:0 44px;position:relative; font-family:"Archivo","Montserrat",sans-serif;font-weight:700;font-size:18px;color:var(--head); } .bbc-svc__faq-q::-webkit-details-marker{display:none;} .bbc-svc__faq-q::after{ content:"+";position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%); font-size:26px;font-weight:400;color:var(--forest);transition:transform .2s ease; } .bbc-svc__faq-item[open] .bbc-svc__faq-q::after{content:"\2013";} .bbc-svc__faq-a{padding:0 0 24px;color:#3d4650;font-size:16px;max-width:66ch;} /* Bottom CTA band */ .bbc-svc__final{ background:linear-gradient(120deg,var(--forest),var(--vibrant));color:#fff; padding-block:clamp(64px,8vw,96px);text-align:center; } .bbc-svc__final-h{font-family:"Archivo","Montserrat",sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,40px);margin:0 0 12px;color:#fff;} .bbc-svc__final-s{font-size:clamp(16px,1.5vw,19px);color:rgba(255,255,255,.9);margin:0 0 30px;} .bbc-svc__final .bbc-svc__btn--accent{background:#fff;color:var(--forest) !important;box-shadow:0 14px 30px rgba(0,0,0,.18);} .bbc-svc__final .bbc-svc__btn--accent:hover{background:#f2f5f3;} /* Trust bar (credentials strip under hero) */ .bbc-svc__trust{background:var(--tint);border-bottom:1px solid var(--line);padding-block:18px;} .bbc-svc__trust-list{ list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center; align-items:center;gap:12px 30px; } .bbc-svc__trust-item{ font:700 14px/1.3 "Montserrat",sans-serif;color:var(--head); display:flex;align-items:center;gap:10px; } .bbc-svc__trust-item::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--vibrant);flex:0 0 auto; } /* 4b · Proof stats (case-study fallback) */ .bbc-svc__stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;text-align:center; } .bbc-svc__stat{padding:12px;} .bbc-svc__stat-n{ display:block;font-family:"Archivo","Montserrat",sans-serif;font-weight:800; font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--forest); } .bbc-svc__stat-l{display:block;margin-top:10px;color:var(--slate);font-size:15px;font-weight:600;} /* 6 · Method eyebrow (on the dark How-We-Work band) */ .bbc-svc__method{ text-transform:uppercase;letter-spacing:.14em;font:700 13px/1 "Montserrat",sans-serif; color:var(--vibrant);margin:0 0 14px; } /* RTL (Arabic — Cairo forced globally on html[lang=ar]) */ html[lang="ar"] .bbc-svc, .bbc-svc[dir="rtl"]{font-family:"Cairo",sans-serif;} html[lang="ar"] .bbc-svc__h2,html[lang="ar"] .bbc-svc__hero-h,html[lang="ar"] .bbc-svc__card-t, html[lang="ar"] .bbc-svc__step-t,html[lang="ar"] .bbc-svc__why-t,html[lang="ar"] .bbc-svc__faq-q, html[lang="ar"] .bbc-svc__quote,html[lang="ar"] .bbc-svc__final-h,html[lang="ar"] .bbc-svc__trust-item, html[lang="ar"] .bbc-svc__stat-n,html[lang="ar"] .bbc-svc__stat-l,html[lang="ar"] .bbc-svc__method, /* these set their font via the `font:` SHORTHAND (Montserrat/Archivo), which overrides the inherited Cairo — without them, Arabic button labels and the hero kicker fell back to a default system Arabic face instead of Cairo. */ html[lang="ar"] .bbc-svc__btn,html[lang="ar"] .bbc-svc__kicker, html[lang="ar"] .bbc-svc__step-n{font-family:"Cairo",sans-serif;} /* Responsive */ @media (max-width:781px){ .bbc-svc__sec{padding-block:60px;} .bbc-svc__why{gap:22px;} } /* ============================================================================ V2 VISUAL SYSTEM — icons + light hero graphic. Scoped to .bbc-svc--v2 so pages without the opt-in flag render exactly as before. (SEO page only for now.) ========================================================================= */ /* Shared icon chip (services + steps) */ .bbc-svc__ic{ width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px; background:rgba(40,180,116,.12);color:var(--forest); } .bbc-svc__ic svg{width:28px;height:28px;} /* 1 · Hero (v2) — light, two-column, with branded graphic */ .bbc-svc--v2 .bbc-svc__hero--art{ background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);color:var(--head); padding:clamp(72px,9vw,120px) 0 clamp(64px,8vw,104px); } .bbc-svc--v2 .bbc-svc__hero--art::before{display:none;} /* remove the dark radial glow */ .bbc-svc--v2 .bbc-svc__hero--art .bbc-svc__inner{max-width:1180px;} .bbc-svc__hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center; } .bbc-svc--v2 .bbc-svc__hero--art .bbc-svc__kicker{color:var(--forest);} .bbc-svc--v2 .bbc-svc__hero--art .bbc-svc__hero-h{color:var(--head);max-width:15ch;} .bbc-svc--v2 .bbc-svc__hero--art .bbc-svc__hero-b{color:#3d4650;max-width:48ch;} .bbc-svc__hero-art{margin-inline-start:auto;max-width:460px;width:100%;} .bbc-svc__hero-art svg{display:block;width:100%;height:auto;} /* Self-serve hero media (image / video / oEmbed) fills the same slot as the SVG motif */ .bbc-svc__hero-media{display:block;width:100%;height:auto;border-radius:20px;} .bbc-svc__hero-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0f2318;} .bbc-svc__hero-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} /* Trust bar (v2) — dark strip under the light hero */ .bbc-svc--v2 .bbc-svc__trust{background:var(--ink);border-bottom:0;padding-block:20px;} .bbc-svc--v2 .bbc-svc__trust-item{color:#fff;} .bbc-svc--v2 .bbc-svc__trust-item::before{background:var(--vibrant);} /* 5 · Why-choose icon (v2) — square chip when an icon key is set */ .bbc-svc__why-ic--svg{ width:46px;height:46px;border-radius:12px;background:rgba(40,180,116,.12); color:var(--forest);font-size:0; } .bbc-svc__why-ic--svg svg{width:24px;height:24px;} /* 6 · How-we-work steps (v2) — icon chip + faint corner number */ .bbc-svc__step--icon{position:relative;padding-top:8px;} .bbc-svc__step-num{ position:absolute;top:0;inset-inline-end:0; font:800 26px/1 "Archivo","Montserrat",sans-serif;color:rgba(255,255,255,.16); } .bbc-svc__step-ic{background:rgba(40,180,116,.16);color:var(--vibrant);} /* v2 responsive */ @media (max-width:860px){ .bbc-svc__hero-grid{grid-template-columns:1fr;gap:34px;} .bbc-svc__hero-art{margin:0 auto;max-width:320px;} } /* v2 RTL — Cairo already forced; icon chips are direction-agnostic */ html[lang="ar"] .bbc-svc__step-num{font-family:"Cairo",sans-serif;} /* RTL glyph mirroring — ONLY glyphs whose meaning follows reading direction: the megaphone (points "forward" at the audience) and the two hero motifs built around a forward-pointing element (the megaphone in `reach`, the send-arrow + paper plane in `email`). Deliberately NOT mirrored: play triangles and media marks (media controls stay LTR by convention), charts/graphs, the magnifier, networks and cursors — mirroring those would be noise, not correctness. */ html[lang="ar"] .bbc-svc svg[data-icon="megaphone"], html[lang="ar"] .bbc-svc__hero-art svg[data-art="reach"], html[lang="ar"] .bbc-svc__hero-art svg[data-art="email"]{transform:scaleX(-1);} /* ============================================================================ V2 · DARK EDITORIAL VARIANT (.bbc-svc--dark). Same template, different direction: ink hero + glowing graphic, outlined circular icons, horizontal service cards, connected process timeline. Applied to Social Media page only (comparison build). ========================================================================= */ /* Hero — keep it dark (restore the glow the light variant removed) */ .bbc-svc--dark .bbc-svc__hero--art{background:var(--ink);color:#fff;} .bbc-svc--dark .bbc-svc__hero--art::before{display:block;} .bbc-svc--dark .bbc-svc__hero--art .bbc-svc__kicker{color:var(--vibrant);} .bbc-svc--dark .bbc-svc__hero--art .bbc-svc__hero-h{color:#fff;} .bbc-svc--dark .bbc-svc__hero--art .bbc-svc__hero-b{color:#c7cdd2;} /* Icons — outlined circular rings instead of soft filled chips */ .bbc-svc--dark .bbc-svc__ic, .bbc-svc--dark .bbc-svc__why-ic--svg{ background:transparent;border:2px solid rgba(25,113,73,.4);color:var(--forest);border-radius:50%; } /* Service cards — icon on TOP (long titles get full card width, no narrow-column overflow), compact icon + title, EQUAL height per row. Symmetric padding. Content top-aligned; with the title-overflow gone the height variance is small, so equal height reads clean, not empty. */ .bbc-svc--dark .bbc-svc__grid{align-items:stretch;} .bbc-svc--dark .bbc-svc__card{ display:flex;flex-direction:column;padding:28px 24px; } .bbc-svc--dark .bbc-svc__card .bbc-svc__ic{ width:46px;height:46px;margin:0 0 16px;flex:0 0 auto; } .bbc-svc--dark .bbc-svc__card .bbc-svc__ic svg{width:22px;height:22px;} .bbc-svc--dark .bbc-svc__card-t{ font-size:1.06rem;line-height:1.32;margin:0 0 10px;text-wrap:balance;min-height:2.64em; } .bbc-svc--dark .bbc-svc__card-d{ font-size:.92rem;line-height:1.55;margin:0; } /* Process — connected timeline, outlined vibrant nodes, CENTRED number-over-icon + content. The number sits ABOVE its icon (in flow, not the corner), so the connecting line has to sit at the new icon centre: 8px step padding + 20px number + 14px gap + 26px (half the 52px icon) = 68px. */ .bbc-svc--dark .bbc-svc__steps{position:relative;} .bbc-svc--dark .bbc-svc__steps::before{ content:"";position:absolute;top:68px;inset-inline:9%;height:2px;z-index:0; background:linear-gradient(90deg,transparent,rgba(40,180,116,.45),transparent); } .bbc-svc--dark .bbc-svc__step{position:relative;z-index:1;text-align:center;} .bbc-svc--dark .bbc-svc__step .bbc-svc__ic{margin-inline:auto;} .bbc-svc--dark .bbc-svc__step-ic{ background:var(--ink);border:2px solid rgba(40,180,116,.55);color:var(--vibrant); } .bbc-svc--dark .bbc-svc__step-num{ position:static;display:block;text-align:center; font-size:20px;line-height:1;margin:0 0 14px;color:var(--vibrant);opacity:.85; } /* Dark-variant RTL: mirror the horizontal card + timeline (logical props already handle inset) */ @media (max-width:540px){ .bbc-svc--dark .bbc-svc__steps::before{display:none;} /* stacked on mobile — no line */ } /* ============================================================================ V2 · DARK — team layout comments (2026-07-27). Section alignment pass: - 2 Positioning + 3 Sub-services + 6 How-We-Work: centred header/body/CTA. - 5 Why-Choose: title (+CTA) on the left, cards in a grid on the right, title top edge aligned with the top card row. Investment (7) + FAQ (8) + everything below left untouched. ========================================================================= */ /* 2 · Positioning — centre headline, body, CTA. Body widened to ~match the section-below content width (wraps to ~2 lines instead of a narrow column). */ .bbc-svc--dark .bbc-svc__pos .bbc-svc__inner{text-align:center;} .bbc-svc--dark .bbc-svc__pos .bbc-svc__h2{margin-inline:auto;max-width:30ch;} .bbc-svc--dark .bbc-svc__pos .bbc-svc__lead{margin-inline:auto;max-width:980px;} .bbc-svc--dark .bbc-svc__pos .bbc-svc__cta{text-align:center;} /* 3 · Sub-services — centre headline + CTA, and the icon + title inside each card */ .bbc-svc--dark .bbc-svc__subsec > .bbc-svc__inner > .bbc-svc__h2{text-align:center;margin-inline:auto;max-width:30ch;} .bbc-svc--dark .bbc-svc__subsec .bbc-svc__cta{text-align:center;} .bbc-svc--dark .bbc-svc__subsec .bbc-svc__card .bbc-svc__ic{margin-inline:auto;} .bbc-svc--dark .bbc-svc__subsec .bbc-svc__card-t{text-align:center;} /* 6 · How We Work — centre method eyebrow, headline, CTA; breathing room around steps */ .bbc-svc--dark .bbc-svc__how .bbc-svc__method, .bbc-svc--dark .bbc-svc__how .bbc-svc__h2{text-align:center;} .bbc-svc--dark .bbc-svc__how .bbc-svc__h2{margin-inline:auto;} .bbc-svc--dark .bbc-svc__how .bbc-svc__steps{margin-top:58px;} .bbc-svc--dark .bbc-svc__how .bbc-svc__cta{text-align:center;margin-top:44px;} /* 5 · Why-Choose — two-column: title alone in the first column and centred against the whole second column, 4 cards top-right, CTA directly beneath them across that column's full width. The title spans both rows so "centred" means centred on cards+CTA together, not on the cards alone — otherwise it drifts up as soon as the CTA row exists. */ .bbc-svc--dark .bbc-svc__whysec .bbc-svc__inner{ display:grid;align-items:start; grid-template-columns:minmax(240px,330px) 1fr; grid-template-rows:auto auto; grid-template-areas:"title cards" "title cta"; column-gap:56px;row-gap:32px; } .bbc-svc--dark .bbc-svc__whysec .bbc-svc__h2{grid-area:title;margin:0;max-width:none;align-self:center;} .bbc-svc--dark .bbc-svc__whysec .bbc-svc__why{grid-area:cards;} .bbc-svc--dark .bbc-svc__whysec .bbc-svc__cta{grid-area:cta;margin-top:0;} /* The button is inline-block everywhere else, so widen it only here. */ .bbc-svc--dark .bbc-svc__whysec .bbc-svc__cta .bbc-svc__btn{display:block;width:100%;text-align:center;} @media (max-width:860px){ .bbc-svc--dark .bbc-svc__whysec .bbc-svc__inner{ grid-template-columns:1fr;grid-template-areas:"title" "cards" "cta";row-gap:24px; } } /* --- Positioning section with video (Adel 2026-08-01): text + video side by side, start-aligned instead of centred. Logical props so AR/RTL mirrors for free. --- */ .bbc-svc--v2 .bbc-svc__pos--media .bbc-svc__pos-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; text-align:start; } .bbc-svc--v2 .bbc-svc__pos--media .bbc-svc__pos-copy{text-align:start;} .bbc-svc--v2 .bbc-svc__pos--media .bbc-svc__pos-copy .bbc-svc__h2, .bbc-svc--v2 .bbc-svc__pos--media .bbc-svc__pos-copy .bbc-svc__lead{ margin-inline:0; max-width:none; text-align:start; } .bbc-svc--v2 .bbc-svc__pos-media{ border-radius:16px; overflow:hidden; line-height:0; box-shadow:0 18px 44px rgba(0,0,0,.16); /* Reserve the box up front: a