:root {
--color-bg: #f6f6f6;
--color-surface: #ececec;
--color-field: #ffffff;
--color-text: #1a1a1a;
--color-muted: #636363;
--color-border: rgb(26 26 26 / 0.12);
--color-border-strong: #858585;
--color-ink: #1a1a1a;
--color-on-ink: #f6f6f6;
--color-muted-on-ink: #b3b3b3;
--color-on-ink-fixed: #f6f6f6;
--color-muted-on-ink-fixed: #b3b3b3;
--color-border-on-ink-fixed: rgb(246 246 246 / 0.16);
--color-ink-soft: #404040;
--color-accent: #f96161;
--color-accent-hover: #fa7b7b;
--color-accent-strong: #f96161;
--color-on-accent: var(--color-text);
--gradient-brand: linear-gradient(to bottom right, var(--color-accent), var(--color-blue));
--color-pink: #b06095;
--color-purple: #8754bd;
--color-blue: #4d43f5;
--service-step-2: color-mix(in srgb, var(--color-blue) 80%, var(--color-accent));
--service-step-3: color-mix(in srgb, var(--color-blue) 60%, var(--color-accent));
--service-step-4: color-mix(in srgb, var(--color-blue) 40%, var(--color-accent));
--service-step-5: color-mix(in srgb, var(--color-blue) 20%, var(--color-accent));
--color-blue-on-ink: color-mix(in srgb, var(--color-blue) 60%, white);
--gradient-button: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 50%, var(--color-blue) 100%);
--gradient-button-dark: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink) 50%, var(--color-ink-soft) 100%);
--color-border-on-ink: rgb(246 246 246 / 0.16);
--color-lava-coral: rgb(249 97 97 / 0.42);
--color-lava-blue: rgb(77 67 245 / 0.35);
--color-lava-pink: rgb(176 96 149 / 0.35);
--color-lava-purple: rgb(135 84 189 / 0.35);
--duration-lava: 22s;
--mask-ticker: linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
--ticker-distance: 0px;
--ticker-duration: 10s;
--gradient-display: linear-gradient(to right, var(--color-accent), var(--color-pink));
--color-backdrop: rgb(26 26 26 / 0.25);
--color-shadow: rgb(0 0 0 / 0.55);
--color-trend-up: #3ecf8e;
--color-trend-down: var(--color-accent);
--color-black: #000000;
--color-linkedin: #0a66c2;
--color-signal: #f5c400;
--color-yes: #00ff84;
--border-work-logo: 0.25rem;
--size-video-play: 5rem;
--size-work-logo: 5rem;
--size-score-circle: 8rem;
--size-score-circle-lg: 12.5rem;
--ratio-score-number: 0.4;
--duration-confetti: 4200ms;
--color-stack-1: #f96161;
--color-stack-2: #db5c7a;
--color-stack-3: #bf5792;
--color-stack-4: #a452ab;
--color-stack-5: #874dc4;
--color-stack-6: #6a49dc;
--color-stack-7: #4d43f5;
--color-client-pwr: #ff5000;
--color-client-stannergill: #221d19;
--color-client-skydive: #d8272e;
--color-client-brushworks: #80bab5;
--color-client-brushworks-black: #000000;
--color-client-cairngorm: #111c4e;
--color-client-dunnet: #1a2838;
--color-client-glamis: #012784;
--color-client-caledonia: #003e51;
--color-client-adc: #0477a1;
--color-client-primrose: #09212e;
--color-client-pendle: #058685;
--color-client-pmc: #0f102e;
--color-client-bell-ingram: #222d8b;
--color-client-midton: #006094;
--color-client-russwood: #295643;
--color-client-tailormade: #b94404;
--color-client-nc500: #1d3b52;
--color-client-benmore: #2a3f35;
--color-client-highland-hangout: #3a2f22;
--color-client-balnagown: #3c4d47;
--color-client-landmark-park: #2d4a22;
--color-client-tuminds: #0c5976;
--color-client-st-margarets-school: #1b2a52;
--color-client-wood-leisure: #2b4a3f;
--color-client-heatherlea: #2f4a2f;
--color-client-invest-in-stirling: #1f3a5f;
--color-client-national-wallace-monument: #0b2a5b;
--color-client-sais: #1c4a7a;
--font-heading: "Stack Sans Headline", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Doto", ui-monospace, "SFMono-Regular", Menlo, monospace;
--font-hand: "Caveat", "Comic Sans MS", cursive;
--font-pixel: "Press Start 2P", ui-monospace, monospace;
--font-body: "Stack Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--text-sm: 0.875rem;
--text-display: clamp(0.8125rem, 3.9cqi, 1.5rem);
--tracking-display: 0.04em;
--text-base: 1.0625rem;
--text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
--text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
--text-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
--text-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
--text-4xl: clamp(2.75rem, 1.5rem + 6vw, 7rem);
--text-footer-slogan: 13.8cqi;
--opacity-grain: 0.05;
--mask-grain: linear-gradient(to top, black, transparent 45%);
--text-hero-home: clamp(2.25rem, 1rem + 5vw, 5.5rem);
--weight-regular: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-heading: 500;
--weight-display: 900;
--leading-tight: 1.05;
--leading-snug: 1.25;
--leading-normal: 1.6;
--tracking-tight: -0.02em;
--tracking-wide: 0.08em;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
--gutter: var(--island-inset);
--section-space: 2.5rem;
--flow-7: var(--space-6);
--flow-8: 2.5rem;
--flow-9: var(--space-7);
--flow-10: var(--space-8);
--container-max: 80rem;
--color-orb-claude: #d97757;
--color-orb-dark: #000000;
--color-orb-adobe: #000b1d;
--color-orb-cortex: #190039;
--color-orb-wordpress: #3858e9;
--color-orb-kittl: #dfff00;
--gradient-orb-azzoo: linear-gradient(to bottom, #451e9e, #180b37);
--gradient-orb-canva: linear-gradient(150deg, #00c4cc, #3b6ee4 55%, #6a3ee8);
--size-orb-lg: clamp(5.5rem, 9vw, 8.5rem);
--size-orb-md: clamp(4.5rem, 7.5vw, 7.25rem);
--size-orb-sm: clamp(3.5rem, 5vw, 4.75rem);
--size-orb-lg-compact: 4.75rem;
--size-orb-md-compact: 3.75rem;
--size-orb-sm-compact: 3rem;
--color-orb-shadow: rgb(26 26 26 / 0.3);
--blur-orb-shadow: 0.875rem;
--orb-cast-x: 1.25rem;
--orb-cast-y: 2rem;
--size-word-orb-lg: 6.5rem;
--size-word-orb-md: 5rem;
--size-word-orb-sm: 3.75rem;
--word-orb-reach-x: 2.5rem;
--word-orb-reach-y: 3.5rem;
--quadrant-orb-reach-x: 6rem;
--quadrant-orb-reach-y: 7rem;
--size-sitemap-thumb: 2.5rem;
--size-sitemap-column: 18rem;
--size-cookie-art: clamp(6rem, 14vw, 10rem);
--size-sand-art: clamp(9rem, 22vw, 14rem);
--duration-cookie-turn: 40s;
--duration-cookie-arrive: 1.4s;
--duration-policy-swing: 3.5s;
--duration-policy-float: 4s;
--shadow-cookie: 0 0.75rem 1rem rgb(0 0 0 / 0.28);
--shadow-cookie-near: 0 0.125rem 0.25rem rgb(0 0 0 / 0.3);
--size-wand: clamp(2rem, 7vw, 6rem);
--zap-reach: 0.6rem;
--duration-zap: 600ms;
--radius-word-orb: var(--radius-md);
--orb-tall-w: 0.82;
--orb-tall-h: 1.22;
--orb-portrait-w: 0.86;
--orb-portrait-h: 1.16;
--delay-word-orb-hold: 1100ms;
--duration-orb-pop: 550ms;
--duration-orb-hide: 250ms;
--delay-orb-step: 60ms;
--ease-orb-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-orb-hide: cubic-bezier(0.5, 0, 0.75, 0);
--duration-word-orbit: 14s;
--orb-push: 3.5rem;
--float-distance: 0.75rem;
--float-drift: 0.5rem;
--measure: 38rem;
--measure-article: 43.75rem;
--measure-wide: 50rem;
--measure-copy: 30ch;
--measure-heading: 18ch;
--measure-heading-sm: 16ch;
--measure-heading-xs: 14ch;
--border-width: 1px;
--border-width-strong: 2px;
--line-width: 2px;
--focus-width: 3px;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-pill: 999px;
--radius-island: 1.25rem;
--island-inset: 1.25rem;
--shadow-card: 0 1.5rem 3.75rem rgb(0 0 0 / 0.45);
--shadow-card-hover: 0 0.125rem 0.25rem rgb(26 26 26 / 0.04), 0 1.25rem 1.75rem -1rem rgb(26 26 26 / 0.16);
--scale-card-subtle: 1.015;
--shadow-lift: 0 1.25rem 2.5rem rgb(0 0 0 / 0.25);
--footer-hold: 0px;
--footer-stick: 0px;
--gradient-reveal-shade: linear-gradient(rgb(0 0 0 / 0.35), transparent);
--deck-height: min(58vh, 31rem);
--sport-hero-min: 35rem;
--text-hero: clamp(3.2rem, 11.2vw, 12.8rem);
--leading-hero: 0.92;
--hero-text-line: 0.46;
--marker-size: 2.75rem;
--touch-target: 2.75rem;
--input-height: 3rem;
--checkbox-size: 1.5rem;
--underline-offset: 0.2em;
--title-mask-bleed: 0.15em;
--bar-height: 3.25rem;
--bar-width: 40rem;
--bar-top: 1.25rem;
--bar-gap: 0.625rem;
--header-height: calc(var(--bar-height) + var(--bar-top) + var(--bar-gap));
--width-ds-menu: 15rem;
--logo-height: 1.75rem;
--blur-backdrop: 0.5rem;
--marquee-logo-size: 12.5rem;
--sector-media-height: min(28rem, 50vh);
--indicator-size: 0.3125rem;
--indicator-stretch: 2.1875rem;
--duration-medium: 300ms;
--duration-link: 300ms;
--ease-link: cubic-bezier(0.4, 0, 0.2, 1);
--duration-slow: 600ms;
--duration-orbit: 70s;
--opacity-bar-hover: 0.7;
--burger-spread: 0.1875rem;
--width-carousel-slide: calc(100vw - 2 * var(--gutter));
--width-carousel-slide-portrait: min(20rem, 72vw);
--aspect-carousel-portrait: 1180 / 2556;
--scale-carousel-rest: 0.9;
--opacity-carousel-dim: 0.5;
--opacity-kicker-on-gradient: 0.85;
--height-carousel-logo: clamp(1.75rem, 1.25rem + 1.5vw, 3rem);
--size-carousel-logo: clamp(3.25rem, 2.5rem + 2.5vw, 5rem);
--width-carousel-logo: 12rem;
--width-ds-swatch: 9rem;
--width-ds-sample: 15rem;
--size-drag-cursor: 4.5rem;
--opacity-dot: 0.3;
--duration-carousel: 7s;
--duration-carousel-move: 700ms;
--delay-list-item: 150ms;
--duration-list-item: 350ms;
--shift-list-item: -0.75rem;
--stagger-carousel: 70ms;
--ease-carousel: cubic-bezier(0.16, 1, 0.3, 1);
--gradient-carousel-scrim: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.25) 40%, transparent 65%);
--color-carousel-track: rgb(246 246 246 / 0.22);
--color-carousel-tag: rgb(246 246 246 / 0.5);
--duration-float: 5s;
--duration-button: 350ms;
--stagger-button: 12ms;
--duration-header-in: 700ms;
--duration-marquee: 60s;
--opacity-dim: 0.15;
--opacity-partner: 0.6;
--scale-active: 1.04;
--duration-photo: 900ms;
--duration-photo-fade: 700ms;
--ease-photo: cubic-bezier(0.37, 0, 0.63, 1);
--size-package-row: clamp(9rem, 6.5rem + 5vw, 11.5rem);
--size-package-row-tall: clamp(15.5rem, 12rem + 4vw, 16rem);
--perspective-flip: 60rem;
--duration-flip: 600ms;
--size-story-figure: calc(100svh - var(--header-height) - var(--space-6));
--size-story-step: 85svh;
--duration-story: 800ms;
--delay-flip-close: 500ms;
--height-page-glow: min(100vh, 56rem);
--mask-page-glow: linear-gradient(to bottom, black 55%, transparent);
--size-package-icon: clamp(2rem, 1.5rem + 1.5vw, 3rem);
--text-tile: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
--width-phone: 22rem;
--radius-phone: 3rem;
--radius-phone-screen: 2.25rem;
--shadow-phone: 0 2rem 4rem rgb(0 0 0 / 0.35);
--size-join-frame-phone: 1.25rem;
--size-join-frame: 2.5rem;
--size-hero-tile-xl: clamp(9rem, 14vw, 17rem);
--size-hero-tile-lg: clamp(8rem, 12vw, 14.5rem);
--size-hero-tile-md: clamp(6.5rem, 9.5vw, 11.5rem);
--size-hero-tile-sm: clamp(5.5rem, 8vw, 9.5rem);
--hero-text-half: 25rem;
--distance-hero-tile-float: 0.5rem;
--distance-hero-tile-rise: 2rem;
--duration-hero-tile-float: 6s;
--duration-hero-tile-in: 900ms;
--duration-hero-tile-hover: 400ms;
--duration-hero-tile-swap: 250ms;
--delay-hero-tiles: 1.3s;
--scale-hero-tile-hover: 1.08;
--size-signal-mini-width: 4.25rem;
--size-signal-mini-height: 5.75rem;
--border-width-signal-mini: 0.25rem;
--size-switch-width: 3.5rem;
--size-switch-height: 2rem;
--size-signal: 26rem;
--border-width-signal: 0.875rem;
--opacity-led-off: 0.13;
--duration-signal: 5s;
--shadow-led: 0 0 0.25rem;
--shadow-led-glow: 0 0 0.75rem;
--shadow-signal: 0 2.5rem 4rem rgb(0 0 0 / 0.85), 0 0.75rem 1.5rem rgb(0 0 0 / 0.6), 0 0.125rem 0.25rem rgb(0 0 0 / 0.5);
--gradient-industry-scrim: linear-gradient(to bottom, rgb(26 26 26 / 0.55) 0%, rgb(26 26 26 / 0.35) 45%, rgb(26 26 26 / 0.85) 100%);
--hero-fit: 17cqw;
--hero-fit-long: 8.5cqw;
--next-up-shift: 0.86;
--next-up-room: 250vh;
--duration-nudge: 1.6s;
--opacity-ring-track: 0.3;
--size-next-up-edge: 6rem;
--gradient-next-up-edge: linear-gradient(to right, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.22) 30%, rgb(0 0 0 / 0) 100%);
--width-next-up-thumb: 26rem;
--color-corner-button: var(--color-pink);
--gradient-corner-button: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink) 50%, var(--color-blue) 100%);
--width-corner-label: 12rem;
--width-say-hi: 19rem;
--width-brand-check: 46rem;
--duration-drawer: 500ms;
--color-backdrop-drawer: rgb(26 26 26 / 0.55);
--size-careers-fact: 12rem;
--size-slop-choice: 4.75rem;
--size-nav-cover: 3rem;
--size-case-hero-min: 36rem;
--size-case-logo: 5.5rem;
--bento-gap: 0.75rem;
--size-highlight: 60rem;
--gradient-case-scrim: linear-gradient(to top, var(--color-ink) 0%, rgb(26 26 26 / 0.8) 45%, rgb(26 26 26 / 0.45) 100%);
--gradient-partners-scrim: linear-gradient(to top, rgb(26 26 26 / 0.9) 0%, rgb(26 26 26 / 0.6) 28%, rgb(26 26 26 / 0) 62%);
--gradient-partners-scrim-tall: linear-gradient(to top, rgb(26 26 26 / 0.92) 0%, rgb(26 26 26 / 0.75) 40%, rgb(26 26 26 / 0.35) 58%, rgb(26 26 26 / 0) 72%);
--gradient-careers-scrim: linear-gradient(to top, rgb(26 26 26 / 0.85) 0%, rgb(26 26 26 / 0.5) 30%, rgb(26 26 26 / 0) 60%), linear-gradient(to right, rgb(26 26 26 / 0.6) 0%, rgb(26 26 26 / 0.25) 40%, rgb(26 26 26 / 0) 60%);
--duration-nav-fade: 250ms;
--delay-nav-hold: 750ms;
--delay-case-swap: 250ms;
--duration-case-swap: 300ms;
--duration-tile-drop: 650ms;
--ease-tile-drop: cubic-bezier(0.34, 1.7, 0.64, 1);
--delay-tile-drop: 70ms;
--delay-select-step: 30ms;
--scale-select-closed: 0.94;
--scale-count-bump: 1.2;
--duration-swipe: 380ms;
--height-fighter-pic: 11rem;
--width-fight: 72rem;
--size-fight-arrow-width: 0.8em;
--size-fight-arrow-height: 0.9em;
--shift-fight-arrow: -0.08em;
--size-fight-face: 3.5rem;
--size-fight-tile: 4rem;
--height-fight-bust: 82%;
--height-fight-bust-select: 64%;
--height-fight-vs: 62%;
--height-fight-bar: 1.25rem;
--size-pixel: 4px;
--size-pixel-half: 2px;
--text-pixel-xs: 0.625rem;
--text-pixel-sm: 0.75rem;
--text-pixel-md: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
--text-pixel-lg: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
--text-pixel-xl: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
--text-fight-tv: clamp(0.375rem, 1.05cqw, 1rem);
--text-pixel-xxl: clamp(1.75rem, 1rem + 4vw, 4rem);
--color-fight-veil: rgb(26 26 26 / 0.82);
--color-fight-damage: rgb(249 97 97 / 0.35);
--gradient-scanlines: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.16) 2px 3px);
--gradient-fight-segments: repeating-linear-gradient(to right, transparent 0 calc(10% - 2px), rgb(0 0 0 / 0.35) calc(10% - 2px) 10%);
--size-arcade: 4.5rem;
--size-arcade-depth: 0.375rem;
--size-arcade-bezel: 0.5rem;
--width-arcade-pad: 7rem;
--duration-press: 80ms;
--color-arcade-shine: rgb(255 255 255 / 0.45);
--gradient-arcade-coral: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--color-accent), white 60%) 0 10%, var(--color-accent) 45%, color-mix(in srgb, var(--color-accent), black 25%) 100%);
--gradient-arcade-purple: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--color-purple), white 55%) 0 10%, var(--color-purple) 45%, color-mix(in srgb, var(--color-purple), black 30%) 100%);
--shadow-arcade-coral: 0 var(--size-arcade-depth) 0 color-mix(in srgb, var(--color-accent), black 45%), 0 0 0 var(--size-arcade-bezel) var(--color-black), 0 var(--size-arcade-depth) 0 var(--size-arcade-bezel) var(--color-black);
--shadow-arcade-purple: 0 var(--size-arcade-depth) 0 color-mix(in srgb, var(--color-purple), black 45%), 0 0 0 var(--size-arcade-bezel) var(--color-black), 0 var(--size-arcade-depth) 0 var(--size-arcade-bezel) var(--color-black);
--shadow-arcade-pressed: 0 0 0 var(--size-arcade-bezel) var(--color-black), 0 calc(var(--size-arcade-depth) * -1) 0 var(--size-arcade-bezel) var(--color-black);
--duration-blink: 1s;
--gradient-fight-logo: linear-gradient(to bottom, var(--color-on-ink) 0 20%, var(--color-accent) 20% 55%, var(--color-pink) 55% 80%, var(--color-purple) 80%);
--gradient-fight-vs: linear-gradient(110deg, var(--color-accent) 0 46%, var(--color-black) 46% 54%, var(--color-purple) 54%);
--gradient-fight-select: linear-gradient(to right, var(--color-purple), transparent 35% 65%, var(--color-accent));
--pause-slop-answer: 900ms;
--width-profile-cert: 5.5rem;
--size-toggle-width: 2.75rem;
--size-toggle-height: 1.5rem;
--size-toggle-inset: 0.1875rem;
--width-polaroid: 14rem;
--width-polaroid-lg: 17rem;
--padding-polaroid: 0.75rem;
--height-polaroid-caption: 3.25rem;
--shadow-polaroid: 0 0.25rem 0.5rem rgb(0 0 0 / 0.12), 0 1.25rem 2rem -0.75rem rgb(0 0 0 / 0.28);
--scale-polaroid-hover: 1.06;
--size-linkedin-icon: 2rem;
--scale-card-hover: 1.02;
--scale-fan-rest: 1.02;
--scale-fan-hover: 1.1;
--opacity-fan-hover: 0.75;
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--duration-pill-arrive: 700ms;
--delay-pill-arrive: 500ms;
--size-quiz-key: 2rem;
--size-brand-check-logo-height: 2.75rem;
--color-quiz-option: rgb(26 26 26 / 0.2);
--color-quiz-option-hover: rgb(26 26 26 / 0.35);
--color-quiz-outline: color-mix(in srgb, currentColor 25%, transparent);
--color-quiz-track: rgb(246 246 246 / 0.3);
--duration-quiz-step: 350ms;
--duration-quiz-leave: 200ms;
--shift-quiz-step: 0.625rem;
--pause-quiz-answer: 300ms;
--size-stage-rise: 3.5rem;
--duration-stages-line: 2.4s;
--delay-stages-line: 0.7s;
--size-stage-dot: 1rem;
--size-stage-dot-here: 1.5rem;
--height-meter: 0.5rem;
--height-quiz-segment: 0.25rem;
--color-stage-value: color-mix(in srgb, var(--color-accent) 12%, transparent);
--color-meter-track: var(--color-muted-on-ink);
--size-select-chevron: 0.5rem;
--duration-tab: 400ms;
--text-slop-score: 29cqi;
--size-switch-inset: 0.25rem;
--size-alert-hand: 4.5rem;
--duration-throb: 2.2s;
--opacity-throb-low: 0.45;
--duration-switch: 250ms;
--shift-nutshell: 1rem;
}
@media (min-width: 768px) {
:root {
--next-up-shift: 0.7;
--gutter: var(--space-6);
--section-space: 5rem;
--width-carousel-slide: min(72rem, 86vw);
--flow-7: var(--space-7);
--flow-8: var(--space-8);
--flow-9: var(--space-9);
--flow-10: var(--space-10);
--bar-top: 2.5rem;
}
}
@media (min-width: 1024px) {
:root {
--section-space: var(--space-10);
}
}
