// `|| {}` guards against _ds_bundle.js failing to load in production (a
// real network failure, not reproducible on localhost): destructuring
// straight off `undefined` would throw here and abort the rest of this
// file's top-level code (see Shell.jsx for the full mechanism this fixes).
const { Tabs, Tag, Kicker, Button, Rule } = window.INKStudioDesignSystem_0136e3 || {};
// Genuine portfolio work only — every entry below has real supplied photography or video.
// No fabricated clients, dates or quantities: fields are omitted where not actually known.
const PROJECTS = [
// Collaborations — INK's participation in events run by others. Presented as
// participation only; nothing here claims INK organised or managed the event.
// `focal` (optional): a CSS object-position override consumed only by the
// Home showcase carousel's fixed-frame cover-crop (see MASTER_CARD_RATIO
// in Home.jsx) — for assets whose meaningful content sits off-center, so
// the standardized card frame crops in on the right part of the image
// instead of a plain center-crop. The Work grid page ignores it (it sizes
// each Frame to the item's own `ratio` instead, uncropped).
{ title: "Event stage — partner recognition", cat: "Collab", tags: ["Collaborations", "Event Participation"], ratio: "981 / 1280", src: "assets/photography/collab-stage-recognition.jpg", focal: "50% 35%" },
{ title: "Partner wall — event collaboration", cat: "Collab", tags: ["Collaborations", "Event Participation"], ratio: "803 / 1280", src: "assets/photography/collab-partner-wall.jpg" },
{ title: "Event credits — collaboration", cat: "Collab", tags: ["Collaborations", "Event Participation"], ratio: "899 / 1305", src: "assets/photography/collab-event-credits.jpg", focal: "50% 32%" },
// Print & Merchandise
{ title: "Sticker sheet no.4", cat: "Print", tags: ["Print & Merchandise", "Stickers"], ratio: "1 / 1", src: "assets/photography/sticker-sheets.jpg" },
{ title: "Sticker sheet — print run", cat: "Print", tags: ["Print & Merchandise", "Stickers"], ratio: "3 / 4", src: "assets/photography/print-process.jpg", focal: "50% 68%" },
{ title: "SEED COFFEE poster", cat: "Print", tags: ["Print & Merchandise", "Poster design"], ratio: "1080 / 1350", src: "assets/photography/seed-coffee-poster.jpg", focal: "50% 6%" },
{ title: "Cultural sticker packs", cat: "Print", tags: ["Print & Merchandise", "Stickers"], ratio: "9 / 16", src: "assets/photography/sticker-cultural-kfupm.jpg" },
{ title: "Graduation sticker sheet", cat: "Print", tags: ["Print & Merchandise", "Stickers"], ratio: "9 / 16", src: "assets/photography/sticker-graduation-sheet.jpg", zoom: 0.78 },
{ title: "FABLAB sticker sheet", cat: "Print", tags: ["Print & Merchandise", "Stickers"], ratio: "9 / 16", src: "assets/photography/sticker-fablab.jpg", focal: "50% 72%" },
// 3D Printing & Custom Objects
{ title: "Award set — 3D printed", cat: "3D", tags: ["3D Printing & Custom Objects", "Awards"], ratio: "3 / 4", src: "assets/photography/award-3d-print.jpg", zoom: 0.72 },
{ title: "Class of 2026 award", cat: "3D", tags: ["3D Printing & Custom Objects", "Awards"], ratio: "3 / 4", src: "assets/photography/award-2026-grad.jpg", zoom: 0.72 },
{ title: "Graduation cap figurines", cat: "3D", tags: ["3D Printing & Custom Objects", "Custom models"], ratio: "1 / 1", src: "assets/photography/custom-grad-figurines.jpg" },
{ title: "KSA plate keychains", cat: "3D", tags: ["3D Printing & Custom Objects", "Keychains"], ratio: "3 / 4", src: "assets/photography/custom-keychains.jpg" },
{ title: "Custom plate medals", cat: "3D", tags: ["3D Printing & Custom Objects", "Medals"], ratio: "3 / 4", src: "assets/photography/custom-plate-medals.jpg" },
{ title: "أرشدني wayfinding pins", cat: "3D", tags: ["3D Printing & Custom Objects", "Pins & badges"], ratio: "1 / 1", src: "assets/photography/custom-pins-badges.jpg" },
// Media Production
{ title: "Product photography — drink series", cat: "Media", tags: ["Media Production", "Product Photography"], ratio: "1600 / 898", src: "assets/photography/product-drink-03.jpg" },
{ title: "Product photography — drink series II", cat: "Media", tags: ["Media Production", "Product Photography"], ratio: "2000 / 1333", src: "assets/photography/product-drink-02.jpg" },
{ title: "Product photography — packaged snack", cat: "Media", tags: ["Media Production", "Product Photography"], ratio: "2000 / 1333", src: "assets/photography/product-snack-packaging.jpg" },
{ title: "Automotive photography — night shot", cat: "Media", tags: ["Media Production", "Photography"], ratio: "2000 / 1333", src: "assets/photography/automotive-night.jpg" },
{ title: "Studio setup — behind the scenes", cat: "Media", tags: ["Media Production", "Behind the scenes"], ratio: "2000 / 1333", src: "assets/photography/studio-setup-bts.jpg" },
// Motion & Animation
{ title: "Good vibes — motion loop", cat: "Motion", tags: ["Motion & Animation", "Motion graphics"], ratio: "2736 / 2050", video: "assets/motion/good-vibes-loop.mp4" },
{ title: "Coffee beans — title reveal", cat: "Motion", tags: ["Motion & Animation", "Animation"], ratio: "2736 / 2050", video: "assets/motion/coffee-beans-reveal.mp4" },
{ title: "Animated mascot loop", cat: "Motion", tags: ["Motion & Animation", "Animation"], ratio: "2304 / 3004", video: "assets/motion/glow-mascot-loop.mp4", zoom: 0.6 },
{ title: "Gradient loader animation", cat: "Motion", tags: ["Motion & Animation", "Animation"], ratio: "1280 / 958", video: "assets/motion/gradient-loader-loop.mp4" },
];
// Canonical family order for the grouped "All" view — matches the tab order.
const FAMILY_ORDER = ["Collab", "Media", "Motion", "Print", "3D"];
const AR_DIGITS = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
function arDigits(n) {
return String(n).replace(/[0-9]/g, (d) => AR_DIGITS[+d]);
}
// Arabic count-noun agreement for "piece(s)" — plain standard-Arabic rule,
// not a single noun mechanically reused after every number: 1 takes the
// singular, 2 the dual, 3-10 the plural ("قطع"), 11+ reverts to the
// singular tamyiz ("قطعة") used after a number. Every count this page
// actually shows (3, 4, 5, 6, 24) is covered by this.
function arPieceWord(n) {
if (n === 1) return "قطعة";
if (n === 2) return "قطعتان";
if (n >= 3 && n <= 10) return "قطع";
return "قطعة";
}
// Animates between arbitrary from/to values whenever `to` changes (counts up or
// down), reusing the same cubic ease-out curve as the homepage's CountUp — just
// tuned faster for instant filter-switch feedback rather than a scroll reveal.
function FilterCountUp({ to, duration = 480, format }) {
const [n, setN] = React.useState(to);
const prevRef = React.useRef(to);
React.useEffect(() => {
const from = prevRef.current;
if (from === to) return;
let raf, start;
const step = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(Math.round(from + (to - from) * eased));
if (p < 1) raf = requestAnimationFrame(step);
else prevRef.current = to;
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [to]);
return <>{format ? format(n) : n};
}
function ProjectCard({ p, i }) {
return (
{p.title}
{p.tags.map((t) => {t})}
);
}
// A living background for the whole Work page — the homepage hero's own
// soft colored forms (.ink-blob, the same vermilion/cobalt/saffron/pine
// family) recomposed at a different scale, crop and spread than the hero:
// larger, a couple cropped by the viewport edge, distributed down the
// entire scrollable page instead of held inside one hero band, so the
// canvas keeps going as the grid is browsed rather than stopping after
// the first screen. A scroll-linked parallax wrapper (separate from each
// blob's own continuous morph/drift loop, so the two transforms never
// fight over the same element) gives the forms a small, slow sense of
// depth as the page scrolls. Two small monochrome production marks — crop
// marks and one registration mark, the same shapes QuadScenePrint already
// draws on the Services page — add a touch of studio texture without
// turning into decoration. Pure background: aria-hidden, pointer-events
// none, zIndex 0 behind the actual content (zIndex 1), never inside a
// project card, and never the visual priority over the photography.
// A compact vocabulary of the studio's own recurring motifs — reused
// exactly as they read elsewhere on the site (yellow print/merch, blue
// media, green 3D, red motion) rather than inventing new shapes — each
// rendered small enough to read as a background accent, never a
// foreground illustration.
function BgTote({ color }) {
return (
);
}
function BgTag({ color }) {
return (
);
}
function BgCard({ color }) {
return (
);
}
function BgCamera({ color }) {
return (
);
}
function BgMic({ color }) {
return (
);
}
function BgCube({ color }) {
const s = 13;
const top = `M${s * 1.5},0 L${s * 2.9},${s * 0.8} L${s * 1.5},${s * 1.6} L${s * 0.1},${s * 0.8} Z`;
const left = `M${s * 0.1},${s * 0.8} L${s * 1.5},${s * 1.6} L${s * 1.5},${s * 3.2} L${s * 0.1},${s * 2.4} Z`;
const right = `M${s * 2.9},${s * 0.8} L${s * 1.5},${s * 1.6} L${s * 1.5},${s * 3.2} L${s * 2.9},${s * 2.4} Z`;
return (
);
}
function BgMotionCircle({ color }) {
return ;
}
function BgMotionSquare({ color }) {
return ;
}
function BgMotionTriangle({ color }) {
return ;
}
function BgCropMarks({ color }) {
return (
);
}
function BgRegMark({ color }) {
return (
);
}
function BgSticker({ color }) {
return (
);
}
// The same production-light glyph as the homepage Package cards' own
// ProductionLayer (identical path data) — reused, not reinvented.
function BgLight({ color }) {
return (
);
}
// Additive vocabulary — new individual objects for the Work background's
// second pass, in the same stroke-only line-art language as the shapes
// above (no fills but small dot/accent details, same weight range).
function BgNotebook({ color }) {
return (
);
}
function BgBrochure({ color }) {
return (
);
}
function BgPrinter({ color }) {
return (
);
}
function BgPrintSheet({ color }) {
return (
);
}
function BgAirplane({ color }) {
return (
);
}
function BgTrain({ color }) {
return (
);
}
function BgTripod({ color }) {
return (
);
}
function BgClapperboard({ color }) {
return (
);
}
function BgFilmFrame({ color }) {
return (
);
}
function BgTrophy({ color }) {
return (
);
}
function BgShieldAward({ color }) {
return (
);
}
function BgMedal({ color }) {
return (
);
}
function BgBadge({ color }) {
return (
);
}
function BgGeo({ color }) {
return (
);
}
function BgBox({ color }) {
return (
);
}
const BG_SHAPES = {
tote: BgTote, tag: BgTag, card: BgCard, camera: BgCamera, mic: BgMic, light: BgLight, cube: BgCube, mCircle: BgMotionCircle, mSquare: BgMotionSquare, mTriangle: BgMotionTriangle, crop: BgCropMarks, reg: BgRegMark, sticker: BgSticker,
notebook: BgNotebook, brochure: BgBrochure, printer: BgPrinter, printSheet: BgPrintSheet, airplane: BgAirplane, train: BgTrain, tripod: BgTripod, clapperboard: BgClapperboard, filmFrame: BgFilmFrame, trophy: BgTrophy, shieldAward: BgShieldAward, medal: BgMedal, badge: BgBadge, geo: BgGeo, box: BgBox,
};
// Fixed discipline colors — the same vocabulary reused sitewide: yellow
// for print/merch, blue for media, green for 3D, red/orange for motion.
const BG_COLOR = {
tote: "var(--saffron-500)", tag: "var(--saffron-500)", card: "var(--saffron-500)", sticker: "var(--saffron-500)",
notebook: "var(--saffron-500)", brochure: "var(--saffron-500)", printer: "var(--saffron-500)", printSheet: "var(--saffron-500)", box: "var(--saffron-500)",
camera: "var(--cobalt-600)", mic: "var(--cobalt-600)", light: "var(--cobalt-600)", tripod: "var(--cobalt-600)", clapperboard: "var(--cobalt-600)", filmFrame: "var(--cobalt-600)",
cube: "var(--pine-500)", trophy: "var(--pine-500)", shieldAward: "var(--pine-500)", medal: "var(--pine-500)", badge: "var(--pine-500)", geo: "var(--pine-500)",
mCircle: "var(--vermilion-500)", mSquare: "var(--vermilion-500)", mTriangle: "var(--vermilion-500)", airplane: "var(--vermilion-500)", train: "var(--vermilion-500)",
};
// A large library of individually-placed, individually-scaled objects,
// each with its own position — NOT grouped into repeated icon clusters.
// Left/right sides and vertical spacing are deliberately staggered
// (never paired at the same height) so the page reads as continuously,
// organically populated rather than "cluster — gap — cluster — gap".
// Sizes vary deliberately: mostly medium/medium-large, a few small
// accents, and a handful of larger feature graphics that read as real
// illustrations rather than tiny icons. `dx` is each object's own
// individual inset from its edge (also varied, for the "generous but
// intentional spacing" look) — re-clamped against the real grid gutter
// at render time so ordinary objects still never sit on top of a card;
// the handful of large feature objects are allowed the same occasional
// soft edge-bleed the atmospheric blobs already use.
const MOTIF_LIBRARY = [
{ type: "tote", side: "left", top: "2%", dx: 18, size: 86 },
{ type: "camera", side: "right", top: "5%", dx: 24, size: 46 },
{ type: "cube", side: "left", top: "9%", dx: 30, size: 42 },
{ type: "mCircle", side: "right", top: "8%", dx: 60, size: 26 },
{ type: "tag", side: "right", top: "12%", dx: 20, size: 28 },
{ type: "card", side: "left", top: "15%", dx: 22, size: 58 },
{ type: "mic", side: "right", top: "18%", dx: 30, size: 36 },
{ type: "tag", side: "left", top: "21%", dx: 50, size: 30 },
{ type: "mSquare", side: "right", top: "25%", dx: 22, size: 28 },
{ type: "camera", side: "left", top: "26%", dx: 66, size: 32 },
{ type: "sticker", side: "left", top: "28%", dx: 36, size: 46 },
{ type: "light", side: "right", top: "32%", dx: 26, size: 38 },
{ type: "mTriangle", side: "left", top: "36%", dx: 60, size: 28 },
{ type: "cube", side: "right", top: "39%", dx: 20, size: 92 },
{ type: "sticker", side: "right", top: "41%", dx: 68, size: 24 },
{ type: "tote", side: "left", top: "43%", dx: 24, size: 54 },
{ type: "camera", side: "right", top: "46%", dx: 40, size: 42 },
{ type: "mSquare", side: "left", top: "48%", dx: 22, size: 26 },
{ type: "card", side: "left", top: "50%", dx: 60, size: 36 },
{ type: "mCircle", side: "right", top: "53%", dx: 24, size: 30 },
{ type: "tag", side: "left", top: "57%", dx: 20, size: 66 },
{ type: "mic", side: "right", top: "60%", dx: 44, size: 40 },
{ type: "cube", side: "right", top: "62%", dx: 22, size: 50 },
{ type: "sticker", side: "left", top: "64%", dx: 64, size: 26 },
{ type: "mSquare", side: "right", top: "67%", dx: 22, size: 56 },
{ type: "light", side: "left", top: "71%", dx: 30, size: 44 },
{ type: "mTriangle", side: "right", top: "74%", dx: 56, size: 30 },
{ type: "card", side: "right", top: "76%", dx: 20, size: 34 },
{ type: "cube", side: "left", top: "78%", dx: 26, size: 60 },
{ type: "tote", side: "right", top: "81%", dx: 18, size: 88 },
{ type: "camera", side: "left", top: "85%", dx: 46, size: 36 },
{ type: "card", side: "right", top: "88%", dx: 24, size: 50 },
{ type: "mTriangle", side: "left", top: "90%", dx: 62, size: 24 },
{ type: "mCircle", side: "left", top: "91%", dx: 56, size: 26 },
{ type: "tag", side: "right", top: "94%", dx: 30, size: 40 },
{ type: "cube", side: "left", top: "95%", dx: 26, size: 36 },
{ type: "mic", side: "left", top: "97%", dx: 22, size: 32 },
{ type: "sticker", side: "right", top: "99%", dx: 40, size: 28 },
// --- Additive pass: new production/creative vocabulary, individually
// placed in the gaps between the entries above (never at the same
// top as an existing one) — same free-distribution/depth-via-scale
// approach, not a second system layered on top.
{ type: "notebook", side: "right", top: "3.5%", dx: 22, size: 50 },
{ type: "trophy", side: "left", top: "6.5%", dx: 44, size: 34 },
{ type: "airplane", side: "right", top: "10.5%", dx: 40, size: 30 },
{ type: "badge", side: "left", top: "13.5%", dx: 60, size: 24 },
{ type: "brochure", side: "right", top: "19.5%", dx: 24, size: 40 },
{ type: "filmFrame", side: "left", top: "23%", dx: 30, size: 46 },
{ type: "printer", side: "right", top: "30%", dx: 46, size: 36 },
{ type: "geo", side: "left", top: "34%", dx: 50, size: 28 },
{ type: "medal", side: "right", top: "37.5%", dx: 26, size: 32 },
{ type: "tripod", side: "left", top: "44.5%", dx: 22, size: 38 },
{ type: "shieldAward", side: "right", top: "54.5%", dx: 40, size: 30 },
{ type: "printSheet", side: "left", top: "58.5%", dx: 24, size: 44 },
{ type: "train", side: "right", top: "68.5%", dx: 20, size: 34 },
{ type: "clapperboard", side: "left", top: "72.5%", dx: 36, size: 40 },
{ type: "notebook", side: "right", top: "82.5%", dx: 50, size: 26 },
{ type: "airplane", side: "left", top: "86.5%", dx: 42, size: 22 },
{ type: "box", side: "right", top: "92.5%", dx: 20, size: 48 },
];
const MOTIF_FLOATS = ["work-bg-float-a", "work-bg-float-b", "work-bg-float-c"];
// Evenly-spaced selection of n items from a library array (preserving
// order), used to thin a fixed spread-across-the-page library down to
// fewer, still-evenly-distributed instances for shorter filtered pages.
function pickEven(arr, n) {
if (n >= arr.length) return arr;
if (n <= 1) return [arr[Math.floor((arr.length - 1) / 2)]];
const out = [];
for (let i = 0; i < n; i++) out.push(arr[Math.round((i * (arr.length - 1)) / (n - 1))]);
return out;
}
// Large, slow-moving atmospheric forms — the site's own colored blobs —
// a fixed library spread the entire way down the page; thinned by count.
const FORM_LIBRARY = [
{ size: 460, left: "-12%", top: "1%", color: "var(--vermilion-500)", op: 0.07, driftDur: 17, driftDelay: -2, k: 0.025 },
{ size: 300, right: "-7%", top: "13%", color: "var(--saffron-500)", op: 0.085, driftDur: 13, driftDelay: -6, k: -0.035 },
{ size: 360, left: "3%", top: "25%", color: "var(--cobalt-600)", op: 0.06, driftDur: 19, driftDelay: -4, k: 0.03 },
{ size: 260, right: "-9%", top: "37%", color: "var(--pine-500)", op: 0.075, driftDur: 15, driftDelay: -1, k: -0.03 },
{ size: 240, left: "40%", top: "49%", color: "var(--vermilion-500)", op: 0.055, driftDur: 21, driftDelay: -8, k: 0.028 },
{ size: 340, left: "-10%", top: "61%", color: "var(--saffron-500)", op: 0.07, driftDur: 18, driftDelay: -3, k: -0.032 },
{ size: 280, right: "-6%", top: "73%", color: "var(--cobalt-600)", op: 0.065, driftDur: 16, driftDelay: -7, k: 0.034 },
{ size: 300, left: "6%", top: "85%", color: "var(--vermilion-500)", op: 0.06, driftDur: 20, driftDelay: -5, k: -0.026 },
{ size: 240, right: "2%", top: "95%", color: "var(--pine-500)", op: 0.07, driftDur: 14, driftDelay: -2, k: 0.03 },
];
// Small print/production accents — a fixed library, thinned by count.
const MARK_LIBRARY = [
{ type: "crop", size: 50, left: "5%", top: "9%" },
{ type: "reg", size: 24, right: "10%", top: "20%" },
{ type: "crop", size: 40, right: "6%", top: "38%" },
{ type: "reg", size: 22, left: "7%", top: "50%" },
{ type: "crop", size: 44, left: "4%", top: "68%" },
{ type: "reg", size: 24, right: "9%", top: "80%" },
{ type: "crop", size: 36, right: "5%", top: "91%" },
];
// A continuous, freely-distributed background system running the full
// length of the (long, filterable) Work page: each studio object —
// print/merch in yellow, media in blue, 3D in green, motion in red —
// has its own individual position, never grouped into repeated icon
// packs, plus a handful of large soft atmospheric forms as a secondary
// layer underneath it all. Quantity (how many individual objects, forms
// and marks appear) scales proportionally with `count`, the number of
// project pieces the current filter is showing, against MOTIF_LIBRARY's
// own 24-piece "All" baseline — so a short filtered page still gets a
// genuinely populated spread sized to its own (shorter) page rather
// than one token cluster, while "All" gets the full, richest spread.
// Percentages are relative to the whole scrollable page height, so the
// composition adapts automatically to each filter's actual page length.
// Independent per-item drift/rotation/timing and a slow scroll parallax
// keep it alive without ever tracking the cursor or moving as a group.
// The real usable gutter beside the (max-width, centered) project grid —
// (viewportWidth - containerMax) / 2, minus a small safety buffer — so
// ordinary objects can be clamped to never reach past the grid's own
// edge into a card, at any viewport width, not just the mobile
// breakpoint. container-max is 1280px sitewide (tokens/spacing.css);
// floors at 26px (the page-margin gutter mobile/medium widths fall back
// to) and caps at 140px on wide screens — generous enough that the
// library's larger feature-scale objects mostly clear it too, with only
// the occasional soft edge-bleed at narrower desktop widths, which is
// the same treatment the atmospheric forms already use.
function useEdgeGutter() {
const compute = () => (typeof window === "undefined" ? 140 : Math.max(26, Math.min(140, (window.innerWidth - 1280) / 2 - 8)));
const [gutter, setGutter] = React.useState(compute);
React.useEffect(() => {
const onResize = () => setGutter(compute());
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
return gutter;
}
function WorkBackdrop({ reduced, count }) {
const rootRef = React.useRef(null);
const narrow = useIsNarrow();
const edgeGutter = useEdgeGutter();
React.useEffect(() => {
if (reduced) return;
let raf = null;
const update = () => {
raf = null;
if (rootRef.current) rootRef.current.style.setProperty("--workScrollY", `${window.scrollY}px`);
};
const onScroll = () => { if (raf == null) raf = requestAnimationFrame(update); };
update();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf != null) cancelAnimationFrame(raf); };
}, [reduced]);
// Proportional to the "All" (24-piece) baseline the libraries are
// authored for, so a shorter filtered page gets fewer objects but at
// the same visual density per page-length, never a bare minimum.
const ratio = Math.max(0.28, Math.min(1, (count || 24) / 24));
const motifs = pickEven(MOTIF_LIBRARY, Math.max(10, Math.round(MOTIF_LIBRARY.length * ratio)));
const forms = pickEven(FORM_LIBRARY, Math.max(3, Math.round(FORM_LIBRARY.length * ratio)));
const marks = pickEven(MARK_LIBRARY, Math.max(2, Math.round(MARK_LIBRARY.length * ratio)));
return (
{forms.map((f, i) => {
// On narrow viewports the large atmospheric sizes and off-edge
// negative left/right offsets are clamped so they never extend
// past the page edge — `right`/`left` position the box edge
// independently of its size, so shrinking size alone can't fix
// horizontal overflow; the offset itself has to be non-negative.
// (inset, not 0%, to leave room for the ink-drift keyframe's own
// 14px horizontal wobble without poking back past the edge)
const size = narrow ? Math.min(f.size, 190) : f.size;
const left = narrow && f.left != null && parseFloat(f.left) < 0 ? "4%" : f.left;
const right = narrow && f.right != null && parseFloat(f.right) < 0 ? "4%" : f.right;
return (
);
})}
{motifs.map((m, i) => {
const Shape = BG_SHAPES[m.type];
// Each object is individually sized and inset — not identical
// across a group — and re-clamped against the real grid gutter
// so ordinary (non-feature) objects stay clear of the cards;
// the library's few large feature objects (size > gutter) are
// allowed the same soft edge-bleed the atmospheric forms use.
const size = narrow ? Math.min(m.size, m.size > 70 ? 56 : 34) : m.size;
const inset = Math.min(m.dx, Math.max(6, edgeGutter - size));
const op = size >= 70 ? 0.22 : size >= 44 ? 0.3 : size >= 32 ? 0.34 : 0.3;
const floatAnim = MOTIF_FLOATS[i % MOTIF_FLOATS.length];
const dur = 6400 + (i * 337) % 3600 + size * 20;
const edgeProp = m.side === "left" ? "left" : "right";
const parallaxK = m.side === "left" ? 0.045 : -0.045;
return (
);
}
// ---------------------------------------------------------------------------
// Services page — the deeper "what can INK actually make" exploration linked
// from the nav (Home stays the quick introduction, Contact is where a project
// starts). The four-discipline section below is one immersive 2x2 quadrant
// canvas (not four cards): hovering/focusing/tapping a quadrant pulls it
// forward with its own dark field, accent color and a large scene-scale
// animation, while the other three recede quietly. Packages further down
// reuses Home's own Packages component verbatim: packagesData, PackageCard,
// Section, Reveal, useIsNarrow, useReducedMotion and useInView are all
// already global (Shell.jsx and Home.jsx load before this file), so that
// section matches the homepage's already-approved hover-expand interaction
// instead of inventing a second visual language for the same idea. Home
// itself is untouched throughout — this only reuses its component.
// ---------------------------------------------------------------------------
// Content + per-discipline identity as plain data. row/col place each
// service in the 2x2 canvas (0,0 top-left … 1,1 bottom-right); accent/glow/bg
// give each an distinct black-field mood using colors already in the token
// set (vermilion=red, cobalt=electric blue, saffron=warm orange, pine=green)
// rather than introducing new ones.
function quadrantServicesData(ar) {
return [
{
id: "media", slug: "media-production", n: "01", row: 0, col: 0,
accent: "var(--cobalt-600)", glow: "27,54,204", bg: "linear-gradient(160deg, #1d1211 0%, #100b0a 100%)",
title: ar ? "إنتاج إعلامي" : "Media Production",
tagline: ar ? "قصص موثقة بالشكل الصحيح." : "Stories captured properly.",
items: ar
? ["تغطية الفعاليات", "تصوير فوتوغرافي", "تصوير فيديو", "تصوير المنتجات", "أفلام ترويجية", "مقابلات", "المونتاج والمعالجة النهائية"]
: ["Event coverage", "Photography", "Videography", "Product photography", "Promotional films", "Interviews", "Editing & post-production"],
},
{
id: "motion", slug: "motion-animation", n: "02", row: 0, col: 1,
accent: "var(--vermilion-500)", glow: "226,58,24", bg: "linear-gradient(160deg, #10131f 0%, #0a0c14 100%)",
title: ar ? "الموشن والأنيميشن" : "Motion & Animation",
tagline: ar ? "نمنح الأفكار حركة." : "Making ideas move.",
items: ar
? ["موشن جرافيك", "أنيميشن الشعارات", "محتوى متحرك", "شاشات الفعاليات", "موشن لمنصات التواصل", "المؤثرات البصرية"]
: ["Motion graphics", "Logo animation", "Animated content", "Event screens", "Social media motion", "Visual effects"],
},
{
id: "print", slug: "print-merchandise", n: "03", row: 1, col: 0,
accent: "var(--saffron-500)", glow: "240,179,44", bg: "linear-gradient(160deg, #1d1710 0%, #110d09 100%)",
title: ar ? "الطباعة والمنتجات" : "Print & Merchandise",
tagline: ar ? "أشياء يمكن حملها واستخدامها وأخذها إلى المنزل." : "Things people can hold, use and take home.",
items: ar
? ["حقائب قماشية", "دفاتر وقرطاسية", "ملصقات وشيتات ملصقات", "بطاقات عمل", "بوسترات ومواد الفعاليات", "لوحات PVC / فوركس ولافتات", "هدايا الفعاليات", "مطبوعات مخصصة"]
: ["Tote bags", "Notebooks & stationery", "Stickers & sticker sheets", "Business cards", "Posters & event materials", "PVC / Forex boards & signage", "Event giveaways", "Custom printed pieces"],
},
{
id: "custom3d", slug: "3d-custom", n: "04", row: 1, col: 1,
accent: "var(--pine-500)", glow: "30,122,85", bg: "linear-gradient(160deg, #0e1a15 0%, #08110e 100%)",
title: ar ? "التصميم الثلاثي الأبعاد والقطع المخصصة" : "3D & Custom Objects",
tagline: ar ? "إبداع يتجاوز السطح المسطح." : "Made beyond the flat surface.",
items: ar
? ["جوائز وكؤوس", "ميداليات ودروع", "دبابيس وشارات", "مجسمات مخصصة", "ستاندات وواجهات عرض", "قطع بعلامة تجارية", "قطع حسب الطلب"]
: ["Awards & trophies", "Medals & plaques", "Pins & badges", "Custom models", "Stands & displays", "Branded objects", "Made-to-order pieces"],
},
];
}
// ---------------------------------------------------------------------------
// Quadrant scenes — large, full-bleed art direction for the active state,
// not a small decorative icon. Each is built the same way: elements that
// draw/scale/slide into place once (a CSS transition keyed off `active`),
// nested inside a wrapper that then carries the slow ambient loop (a
// separate CSS `animation` on a *different* element/property than the
// entrance transition, so the two never fight over the same property).
// Ambient loops are skipped outright under prefers-reduced-motion; the
// one-time entrance transitions still play since they communicate state.
// ---------------------------------------------------------------------------
// Media Production — a cinematic viewfinder: large corner frame marks, a
// diagonal exposure sweep that passes through once, and a focus box that
// pulls into the frame and then holds a slow breathing pulse.
function QuadSceneMedia({ active, reduced, accent }) {
const corners = [
"M46,42 L104,42 M46,42 L46,96",
"M354,42 L296,42 M354,42 L354,96",
"M46,258 L104,258 M46,258 L46,204",
"M354,258 L296,258 M354,258 L354,204",
];
return (
);
}
// Motion & Animation — three bold outline forms fly into a composition and
// settle into slow, independent drift; a trajectory line self-draws behind
// them, and one dot keeps travelling it.
function QuadSceneMotion({ active, reduced, accent }) {
const d = "M50,240 C130,240 120,96 220,96 C290,96 276,190 350,158";
return (
);
}
// Print & Merchandise — a small set of physical pieces (a card, a poster
// sheet, a sticker with a confined halftone patch, a tag, a tote-bag
// outline) slide in from different edges once, overlap loosely like items
// arranged on a studio table, and settle; the poster and tote then hold a
// slow independent sway. Crop marks and one registration mark on the
// poster, plus a small dot cluster on the sticker, carry the "physical
// print" read without covering the quadrant in dots.
function QuadScenePrint({ active, ar, reduced, accent }) {
return (
);
}
// 3D & Custom Objects — a converging perspective grid fades in behind a
// faceted wireframe solid (not a plain cube) that unflattens from a
// squashed silhouette into full depth, then holds a slow restrained sway.
function QuadScene3D({ active, reduced, accent }) {
const cx = 210, cy = 150;
const depthLines = [0, 1, 2, 3, 4].map((i) => {
const t = i / 4;
const y = 40 + t * 220;
const spread = 40 + t * 260;
return ;
});
const converge = [-160, -80, 0, 80, 160].map((x, i) => (
));
const s = 46;
const top = `M${cx},${cy - s} L${cx + s * 0.86},${cy - s * 0.5} L${cx},${cy} L${cx - s * 0.86},${cy - s * 0.5} Z`;
const left = `M${cx - s * 0.86},${cy - s * 0.5} L${cx},${cy} L${cx},${cy + s} L${cx - s * 0.86},${cy + s * 0.5} Z`;
const right = `M${cx + s * 0.86},${cy - s * 0.5} L${cx},${cy} L${cx},${cy + s} L${cx + s * 0.86},${cy + s * 0.5} Z`;
return (
);
}
const QUADRANT_SCENES = { media: QuadSceneMedia, motion: QuadSceneMotion, print: QuadScenePrint, custom3d: QuadScene3D };
function ServiceQuadrant({ svc, ar, reduced, corner, active, onEnter, onFocus, onBlur, onToggle, setPage }) {
const Scene = QUADRANT_SCENES[svc.id];
const align = corner === "tr" || corner === "br" ? "flex-end" : "flex-start";
return (
);
}
// Mobile/tablet equivalent of the same identity: a compact 2x2 tile grid for
// selection (numeral + title only, no hover available) with the exact same
// rich scene/tagline/list revealing in a full-width panel directly below —
// avoids clipping a tall detail list inside a small fixed-aspect tile.
function ServiceQuadrantTile({ svc, ar, active, onToggle }) {
return (
);
}
function ServiceQuadrantPanel({ svc, ar, reduced, setPage }) {
const Scene = QUADRANT_SCENES[svc.id];
return (
{svc.tagline}
{svc.items.map((it) => (
—{it}
))}
);
}
// The four-discipline section — one 2x2 canvas divided by a single hairline
// cross rather than four bordered cards. Desktop: hover/focus on a quadrant
// grows its row+column via CSS Grid track sizing (the other three compress
// in response) and turns it into a dark, accented, animated scene; a short
// editorial statement sits at the canvas center, fading back once a
// quadrant is active so it never competes or blocks interaction (it is
// pointer-events:none throughout). Mobile: the same four disciplines as a
// compact tappable tile grid with the identical rich content expanding in
// a panel underneath.
// The exact same glyph WhatWeMake's own card already uses for each
// discipline (Home.jsx) — reused so the mobile ambient motif is a familiar
// "existing visual motif from that service card," never a new symbol.
const SERVICE_AMBIENT_ICON = { media: "camera", motion: "clapperboard", print: "printer", custom3d: "box" };
function ServiceQuadrantGrid({ ar, setPage, target }) {
const narrow = useIsNarrow();
const reduced = useReducedMotion();
const [activeId, setActiveId] = React.useState(null);
const SERVICES = quadrantServicesData(ar);
const activeSvc = SERVICES.find((s) => s.id === activeId) || null;
const corners = ["tl", "tr", "bl", "br"];
const sectionRef = React.useRef(null);
// Landing here from a Home service card or a footer service link: open
// that exact quadrant and scroll it into view, the same as if the user
// had hovered/tapped it directly.
React.useEffect(() => {
if (!target || !SERVICES.some((s) => s.id === target)) return;
setActiveId(target);
const raf = requestAnimationFrame(() => {
sectionRef.current && sectionRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
});
return () => cancelAnimationFrame(raf);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [target]);
const colTemplate = !activeSvc ? "1fr 1fr" : activeSvc.col === 0 ? "1.32fr 0.68fr" : "0.68fr 1.32fr";
const rowTemplate = !activeSvc ? "1fr 1fr" : activeSvc.row === 0 ? "1.32fr 0.68fr" : "0.68fr 1.32fr";
return (
{/* The section's own ambient environment, reacting to the selected
service rather than only its detail panel (which already has its
own rich dark/glow treatment — see ServiceQuadrantPanel). Reuses
that exact same service's `glow` RGB triplet already authored in
quadrantServicesData, as a soft, restrained radial wash behind
the whole selector + panel rather than a flat background swap —
low enough opacity that the kicker/heading text above it and the
panel's own darker card both stay perfectly readable throughout
the 420ms crossfade between services.
On mobile the eyebrow ("SERVICES") and the restored "One idea,
four ways..." heading sit well above the radial's own center
(62% down the section), so a lone radial barely reached them —
the whole point of this task's "entire feature region" ask. A
second, full-bleed top-to-bottom tint layered underneath it
brings that same service's atmosphere all the way up to the very
top of the section (and down past the panel), while the radial
on top still gives the grid/panel area its own extra emphasis —
together the whole region visibly shifts, not just its lower
half. Desktop keeps the original single radial exactly as before
(its kicker/heading sit inline with the grid, not stacked above
it, so the same reach problem doesn't exist there).
This round doubled the mobile opacities outright (the previous
pass's version read as "barely perceptible" per this task's own
complaint) and added two large, service-colored ambient blobs
plus that service's own line icon (the same glyph WhatWeMake's
card already uses for it — camera/clapperboard/printer/box, not
a new symbol) rendered huge and faint near the top and bottom of
the region, so the transformation reads as the whole area's
atmosphere changing, not just a background tint. */}
{narrow && activeSvc ? (
) : null}
{ar ? "الخدمات" : "Services"}
{/* On mobile the grid's own centered "One idea. Four ways..."
overlay (below) never renders — it's sized/positioned for
resting inside the desktop grid's empty center cross and reads
as a tiny illegible label at phone width — so the page opened
with nothing but the bare "Services" kicker. Restoring the
phrase as a real heading here, at full mobile display size,
gives the page the same intentional opening beat every other
page has before its content starts. */}
{narrow ? (
{ar ? <>فكرة واحدة، أربع طرق لتحقيقها. : <>One idea, four ways to make it.}
) : null}
))}
{/* Central editorial statement — decorative only, never intercepts
a hover/click, and recedes once a quadrant takes over so it
never competes with the active scene. */}
{!narrow ? (
{ar ? <>فكرة واحدة. أربع طرق لتحقيقها. : <>One idea. Four ways to make it real.}
);
}
// Quieter refinement of Home's own "How we work" idea, scoped to Services —
// same four steps, same concept, but a plain horizontal editorial rail
// instead of the homepage's stat row. A thin red accent line fills in once
// the rail scrolls into view; skipped under prefers-reduced-motion.
// ---------------------------------------------------------------------------
// "Build the Experience" — the Services-page treatment of the four packages.
// Home's own Packages/PackageCard section (four hover-expand cards) stays the
// homepage's quick introduction; this is a completely different interactive
// piece for the same four tiers, reusing only the CONTENT (packagesData —
// already global via Home.jsx's script-load order) so names/copy/includes
// stay consistent with what's already established, never Home's card layout
// or components. The four tiers are framed as one project that visibly
// builds — each stage's layer stays on the canvas when a later stage is
// selected, and gracefully exits again when stepping back — rather than
// four separate panels.
// ---------------------------------------------------------------------------
// The abstract "project" composition. Four cumulative layers keyed purely by
// `level` (0-3): every shape's own visibility is `level >= N`, so stepping
// forward always leaves earlier layers untouched while later ones fade in,
// and stepping back simply reverses the same opacity/transform transitions —
// no separate enter/exit logic needed. Ambient motion (REC pulse, the
// traveling dot) is skipped outright under prefers-reduced-motion; the
// one-time entrance transitions still play since they communicate state.
function BuildCanvas({ level, reduced, ar }) {
const NEUTRAL = "rgba(246,243,237,0.6)";
const MERCH = "var(--saffron-500)";
const EVENT = "var(--cobalt-600)";
const MOTION = "var(--vermilion-500)";
const THREED = "var(--pine-500)";
const at = (n) => level >= n;
const motionD = "M110,270 C170,230 190,150 246,150 C300,150 330,90 400,56";
return (
);
}
// Horizontal stage rail — numbered selectors, not tabs or cards. Hover/focus
// previews a stage (desktop only); clicking locks it. A red progress line
// fills to the active stage, echoing the rail already used in How We Work.
function PackageStepper({ stages, activeIndex, narrow, onHover, onSelect }) {
return (
);
}
// The right-hand details panel's own per-tier "material" — the exact
// same glow language the Home Packages cards already use (MerchLayer's
// gold sweep + glints, ProductionLayer's blue sweep + crystalline white
// glints, ScenePkgFull's radial multicolor bloom — same colors, same
// gradients, same keyframe), reused here rather than invented fresh, so
// the two interfaces read as the same four package identities. Starter
// gets no layer at all — the plain dark panel already is "the base
// level." All three colored layers stay mounted at all times and only
// cross-fade their own opacity (the same active/inactive pattern used
// throughout this file), so switching tiers is one smooth material
// change with no flash — never a hard swap between DOM layers. Applied
// only to this details panel, never the illustration canvas beside it.
function PackageGlowPanel({ index, reduced, children }) {
const merch = index === 1;
const event = index === 2;
const full = index === 3;
return (
{/* Local keyframes — Home's own WhatWeMake component defines the
same-named ink-svc-sweep animation, but that CSS only exists in
the DOM while that component is mounted, so it's redeclared
identically here for this page. ink-svc-sweep-b is this page's
own — a wider excursion for the Event Presence blue streak, so
it never locks perfectly in step with the white sweep's
ink-svc-sweep timing. */}
{/* Merch — warm golden sheen + two gold glints. */}
{[{ x: "insetInlineStart", xv: 22, y: "top", yv: 18, d: "0s" }, { x: "insetInlineEnd", xv: 26, y: "bottom", yv: 32, d: "1.4s" }].map((g, i) => (
))}
{/* Event Presence — a very subtle static cobalt base underneath
(Home's ProductionLayer tint, kept faint rather than removed),
plus TWO independently-traveling streaks: a soft blue one and
the brighter white sheen Home's own Event Presence card already
carries (it composes PrintLayer underneath ProductionLayer, so
that "traveling" light is literally PrintLayer's sweep, reused
verbatim). The blue streak runs a different width/duration/
phase than the white one (own keyframe, own timing) so the two
drift in and out of alignment instead of locking together. */}
{[{ x: "insetInlineStart", xv: 24, y: "top", yv: 22, d: "0s" }, { x: "insetInlineEnd", xv: 26, y: "bottom", yv: 36, d: "1.6s" }].map((g, i) => (
))}
{/* Full Experience — the same dark-cosmic radial multicolor bloom
ScenePkgFull washes its whole card with, PLUS the moving gold
and white sweeps Full Experience already inherits on Home (it
composes MerchLayer and PrintLayer underneath its own bloom and
MotionLayer) — both reused verbatim, layered on top of the
bloom rather than replacing it. */}
{children}
);
}
// The section itself — an editorial construction table, not a card grid.
// lockedIndex is the committed selection (click/tap); hoverIndex is a
// transient desktop-only preview that falls back to lockedIndex the moment
// the pointer leaves the rail. Both the canvas and the info panel read the
// same resolved index, so "preview" and "select" always stay in sync.
// The exact same glyph each package's own PackageCard/PackageInfoPanel icon
// already uses (see packagesData in Home.jsx) — reused for the mobile
// ambient motif rather than invented fresh.
const PACKAGE_AMBIENT_ICON = { starter: "package", merch: "shopping-bag", event: "camera", full: "sparkles" };
function BuildExperience({ ar, setPage }) {
const narrow = useIsNarrow();
const reduced = useReducedMotion();
const [lockedIndex, setLockedIndex] = React.useState(0);
const [hoverIndex, setHoverIndex] = React.useState(null);
const [dragging, setDragging] = React.useState(false);
const [dragX, setDragX] = React.useState(0);
const dragRef = React.useRef({ startX: 0, startY: 0, active: false, horizontal: false });
const PACKAGES = packagesData(ar);
const activeIndex = hoverIndex ?? lockedIndex;
const activePkg = PACKAGES[activeIndex];
const lastIndex = PACKAGES.length - 1;
const goTo = (i) => {
setLockedIndex(Math.max(0, Math.min(lastIndex, i)));
setHoverIndex(null);
};
// Direct-manipulation drag/swipe on the canvas itself, resolving into the
// exact same setLockedIndex the timeline and arrows use — one state
// machine, so all four navigation methods can never disagree. The canvas
// only nudges a few px while dragging (tactile feedback, not a slide
// between "pages"); the actual stage change — and its layer transitions —
// only commits once the pointer is released past the threshold.
// touchAction:"pan-y" lets the browser keep native vertical scrolling
// while this handles the horizontal axis, and the up-front |dx| vs |dy|
// check bails out of the drag entirely for a mostly-vertical gesture.
const onCanvasPointerDown = (e) => {
if (e.pointerType === "mouse" && e.button !== 0) return;
dragRef.current = { startX: e.clientX, startY: e.clientY, active: true, horizontal: false };
setDragging(true);
};
const onCanvasPointerMove = (e) => {
const st = dragRef.current;
if (!st.active) return;
const dx = e.clientX - st.startX;
const dy = e.clientY - st.startY;
if (!st.horizontal) {
if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return;
if (Math.abs(dy) > Math.abs(dx)) { st.active = false; return; }
st.horizontal = true;
try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {}
}
setDragX(Math.max(-56, Math.min(56, dx * 0.35)));
};
const endDrag = (e) => {
const st = dragRef.current;
if (st.active && st.horizontal) {
const dx = e.clientX - st.startX;
const THRESHOLD = 64;
if (dx <= -THRESHOLD) goTo(lockedIndex + 1);
else if (dx >= THRESHOLD) goTo(lockedIndex - 1);
}
dragRef.current.active = false;
setDragging(false);
setDragX(0);
};
const arrowStyle = {
position: "absolute", top: "50%", transform: "translateY(-50%)", zIndex: 2,
width: 34, height: 34, borderRadius: "50%",
border: "1px solid rgba(246,243,237,0.35)", background: "rgba(20,17,22,0.55)",
color: "rgba(246,243,237,0.85)", display: "flex", alignItems: "center", justifyContent: "center",
transition: "opacity 300ms ease, border-color 220ms ease, background 220ms ease",
};
const activeMood = PACKAGE_MOODS[activePkg.id];
// Full Experience is the premium/final tier and its ambient shouldn't
// reuse the generic per-package glow RGB below — that gold (240,179,44)
// sat one shade off Merch's own gold (230,163,44), so selecting either
// tier washed this whole region in nearly the same amber. A flat white/
// charcoal pass at this fixed it but read as plain grey rather than the
// premium final tier, so this is now a genuinely deep-space direction
// instead: near-black carrying a whisper of midnight blue-violet (never
// enough to read as "purple", just enough to feel like atmosphere
// rather than flat grey) plus one soft violet-toned haze standing in
// for a distant nebula. Gold stays concentrated in the sparkle icons
// themselves (below), which get their own richer, warmer, faintly
// luminous tone instead of the flat generic accent — so this is the
// only place in the whole region gold actually shows. The other three
// packages are untouched — same single-color glow treatment as before.
const isFullMood = activePkg.id === "full";
const FULL_COSMIC_GOLD = "#ffd479";
const packageWash = isFullMood
? "linear-gradient(180deg, rgba(10,9,20,0.40) 0%, rgba(14,12,24,0.16) 30%, rgba(20,15,32,0.18) 60%, rgba(8,7,15,0.36) 100%)"
: `linear-gradient(180deg, rgba(${activeMood.glow},0.16) 0%, rgba(${activeMood.glow},0.06) 30%, rgba(${activeMood.glow},0.06) 60%, rgba(${activeMood.glow},0.14) 100%)`;
const packageBlobA = isFullMood
? "radial-gradient(circle, rgba(112,92,196,0.24), rgba(112,92,196,0) 70%)"
: `radial-gradient(circle, rgba(${activeMood.glow},0.46), rgba(${activeMood.glow},0) 70%)`;
const packageBlobB = isFullMood
? "radial-gradient(circle, rgba(7,6,14,0.66), rgba(7,6,14,0) 72%)"
: `radial-gradient(circle, rgba(${activeMood.glow},0.36), rgba(${activeMood.glow},0) 72%)`;
return (
{/* Full Experience's sparkles get their own richer, warmer gold
plus a faint glow (a drop-shadow, not an animated filter —
cheap to paint since it never changes) so they read as small
luminous light sources against the cosmic wash above, rather
than the same flat accent color every other tier's ambient
icon uses. */}
) : null}
>
{ar ? "ابنِ التجربة" : "Build the experience"}
{ar ? "أربع مراحل لمشروع واحد — كل مرحلة تُبنى فوق التي قبلها." : "Four stages of one project — each one builds on the last."}
{/* Subtle, secondary pricing note — never competes visually with the
package canvas above it (small label + muted caption only). */}
{ar ? "تسعير أفضل للمشاريع المجمّعة" : "Bundled project pricing"}
{ar ? "عند جمع عدة خدمات في مشروع واحد، يمكن أن تكون التكلفة الإجمالية أفضل من طلب كل خدمة بشكل منفصل." : "Combining services can reduce the total project cost compared with ordering each separately."}