/* ============================================================ DFL. - Global Stylesheet Design: Clean, professional, consulting - PwC-inspired Approach: Mobile-first, responsive ============================================================ */ /* --- Fonts: Runda served via Adobe Fonts (Typekit) --- */ /* in HTML */ /* --- CSS Custom Properties (Design Tokens) --- */ :root { /* Colours - Dark (footer & dark sections only) */ --color-primary-950: #16262F; --color-primary-900: #1a2f3a; --color-primary-800: #2a4450; --color-primary-700: #3d5a6b; /* Colours - Accent (Deep Crimson) */ --color-accent: #A60000; --color-accent-dark: #8B0000; --color-accent-light: #C41E1E; /* Colours - Light surfaces */ --color-white: #ffffff; --color-surface-light: #FBF9D9; --color-surface-muted: #e8e4d0; --color-border-light: #d4d0bc; /* Colours - Text */ --color-text-primary: #1a1a1a; --color-text-secondary: #4a4a4a; --color-text-on-dark: #f1f5f9; --color-text-muted: #7a7a7a; /* Colours - Palette accents (inner pages) */ --color-teal: #8DBFC9; --color-cream: #FBF9D9; --color-gold: #E4BB61; --color-crimson: #A60000; --color-dark-navy: #16262F; /* Typography */ --font-family: "runda", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-heading: "runda", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-body: 16px; --font-size-body-lg: 18px; --font-size-sm: 14px; --font-size-xs: 12px; --font-size-h1: 32px; --font-size-h2: 28px; --font-size-h3: 22px; --font-size-h4: 18px; --font-size-hero: 36px; --font-size-stat: 40px; --line-height-body: 1.6; --line-height-heading: 1.15; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; /* Spacing */ --section-padding-y: 56px; --section-padding-x: 20px; --max-width: 1440px; --content-width: 1200px; --prose-width: 75ch; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Header */ --header-height: 72px; } /* --- Desktop overrides --- */ @media (min-width: 768px) { :root { --font-size-body: 18px; --font-size-h1: 48px; --font-size-h2: 36px; --font-size-h3: 28px; --font-size-h4: 22px; --font-size-hero: 56px; --font-size-stat: 56px; --section-padding-y: 100px; --section-padding-x: 40px; } } @media (min-width: 1024px) { :root { --font-size-hero: 64px; --font-size-h1: 56px; --font-size-h2: 40px; --font-size-stat: 64px; --section-padding-y: 120px; --section-padding-x: 60px; } } @media (min-width: 1440px) { :root { --font-size-hero: 72px; } } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-family); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-primary); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; color: inherit; border: none; background: none; } button { cursor: pointer; } /* --- Skip to content (accessibility) --- */ .skip-to-content { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 12px 24px; background: var(--color-accent); color: var(--color-primary-950); font-weight: 500; border-radius: 0; transition: top var(--transition-fast); } .skip-to-content:focus { top: 0; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3 { font-family: var(--font-family-heading); font-weight: 400; line-height: var(--line-height-heading); letter-spacing: -0.01em; } h4, h5, h6 { font-weight: 700; line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-tight); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } h4 { font-size: var(--font-size-h4); } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } .text-muted { color: var(--color-text-muted); } .text-secondary { color: var(--color-text-secondary); } .text-accent { color: var(--color-accent); } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--content-width); margin-left: auto; margin-right: auto; padding-left: var(--section-padding-x); padding-right: var(--section-padding-x); } .container--wide { max-width: var(--max-width); } .container--narrow { max-width: var(--prose-width); } .section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); } .section--dark { background-color: var(--color-primary-950); color: var(--color-text-on-dark); } .section--navy { background-color: var(--color-primary-900); color: var(--color-text-on-dark); } .section--light { background-color: var(--color-surface-light); } .section--white { background-color: var(--color-white); } .section--cream { background-color: var(--color-cream); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; font-size: var(--font-size-sm); font-weight: 500; line-height: 1; border-radius: 0; text-transform: uppercase; letter-spacing: 0.04em; transition: all var(--transition-base); white-space: nowrap; min-height: 48px; min-width: 44px; } .btn--primary { background-color: var(--color-accent); color: var(--color-white); } .btn--primary:hover { background-color: var(--color-accent-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(166, 0, 0, 0.25); } .btn--secondary { background-color: transparent; color: var(--color-text-primary); border: 2px solid var(--color-border-light); } .btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); background-color: rgba(166, 0, 0, 0.04); } .btn--secondary-dark { background-color: transparent; color: var(--color-text-primary); border: 2px solid var(--color-border-light); } .btn--secondary-dark:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn--ghost { background: transparent; color: var(--color-accent); padding: 8px 0; font-weight: 500; } .btn--ghost::after { content: '\2192'; transition: transform var(--transition-fast); } .btn--ghost:hover::after { transform: translateX(4px); } .btn--sm { padding: 10px 20px; font-size: var(--font-size-sm); min-height: 40px; } /* ============================================================ HEADER & NAVIGATION ============================================================ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-height); display: flex; align-items: center; background-color: var(--color-white); border-bottom: 1px solid transparent; transition: background-color var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .header--scrolled { background-color: var(--color-white); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-bottom-color: var(--color-surface-muted); } .header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--section-padding-x); } .header__logo { display: flex; align-items: center; gap: 0; font-size: 28px; font-weight: 500; color: var(--color-text-primary); letter-spacing: -0.03em; z-index: 1001; } .header__logo-icon { width: 36px; height: 36px; background: var(--color-accent); border-radius: 0; display: flex; align-items: center; justify-content: center; } .header__logo-icon svg { width: 20px; height: 20px; } /* Desktop Nav */ .nav { display: none; align-items: center; gap: 4px; } @media (min-width: 1024px) { .nav { display: flex; } } .nav__item { position: relative; } .nav__link { display: flex; align-items: center; gap: 4px; padding: 8px 16px; font-size: 15px; font-weight: 500; color: var(--color-text-primary); transition: color var(--transition-fast); border-radius: 0; } .nav__link:hover, .nav__link--active { color: var(--color-accent); } .nav__link--active { position: relative; } .nav__link--active::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; background: var(--color-accent); border-radius: 0; } .nav__chevron { width: 16px; height: 16px; transition: transform var(--transition-fast); } .nav__item:hover .nav__chevron { transform: rotate(180deg); } /* Dropdown */ .nav__dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 240px; background: var(--color-white); border: 1px solid var(--color-surface-muted); border-radius: 0; padding: 8px; opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), visibility var(--transition-fast); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); } .nav__item:hover .nav__dropdown { opacity: 1; visibility: visible; } .nav__dropdown-link { display: block; padding: 10px 16px; font-size: 14px; color: var(--color-text-secondary); border-radius: 0; transition: all var(--transition-fast); } .nav__dropdown-link:hover { background: var(--color-surface-light); color: var(--color-text-primary); } /* Header CTA */ .header__cta { display: none; } @media (min-width: 1024px) { .header__cta { display: inline-flex; } } /* Hamburger */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; z-index: 1001; } @media (min-width: 1024px) { .hamburger { display: none; } } .hamburger__line { width: 100%; height: 2px; background: var(--color-text-primary); border-radius: 2px; transition: all var(--transition-base); transform-origin: center; } .hamburger--active .hamburger__line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger--active .hamburger__line:nth-child(2) { opacity: 0; } .hamburger--active .hamburger__line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile Menu */ .mobile-menu { position: fixed; inset: 0; z-index: 999; background: var(--color-white); display: flex; flex-direction: column; padding: calc(var(--header-height) + 24px) var(--section-padding-x) 24px; opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); overflow-y: auto; } .mobile-menu--active { opacity: 1; visibility: visible; } .mobile-menu__link { display: block; padding: 16px 0; font-size: 24px; font-weight: 500; color: var(--color-text-primary); border-bottom: 1px solid var(--color-surface-muted); transition: color var(--transition-fast); } .mobile-menu__link:hover { color: var(--color-accent); } .mobile-menu__sub { padding-left: 20px; } .mobile-menu__sub-link { display: block; padding: 12px 0; font-size: 16px; color: var(--color-text-secondary); transition: color var(--transition-fast); } .mobile-menu__sub-link:hover { color: var(--color-accent); } .mobile-menu__cta { margin-top: auto; padding-top: 24px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: auto; display: flex; align-items: center; background: var(--color-white); color: var(--color-text-primary); padding-top: calc(var(--header-height) + 80px); padding-bottom: 80px; overflow: hidden; } /* Hero background image support */ .hero--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .hero--has-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 38, 47, 0.82) 0%, rgba(22, 38, 47, 0.65) 50%, rgba(22, 38, 47, 0.45) 100%); z-index: 0; } /* Inner heroes need even stronger overlay because images vary */ .hero--inner.hero--has-bg::after { background: rgba(22, 38, 47, 0.72); } .hero--inner.hero--has-bg { background-blend-mode: normal; background-color: rgba(22, 38, 47, 0.3); } .hero--has-bg .hero__headline { color: var(--color-white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .hero--has-bg .hero__sub { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .hero--has-bg .hero__content, .hero--has-bg .container { position: relative; z-index: 2; } /* Video hero text treatment - white text over dark gradient overlay */ .hero--video .hero__headline { color: var(--color-white); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .hero--video .hero__headline-accent { color: #FF4D4D; } .hero--video .hero__sub { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .hero--video .hero__content { position: relative; z-index: 2; } /* Secondary button on video hero needs white border + text for readability */ .hero--video .btn--secondary, .hero--video .btn--secondary-dark { color: var(--color-white); border-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(2px); } .hero--video .btn--secondary:hover, .hero--video .btn--secondary-dark:hover { color: var(--color-white); border-color: var(--color-white); background-color: rgba(255, 255, 255, 0.15); } .hero::before { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: linear-gradient(180deg, rgba(251, 249, 217, 0.3) 0%, transparent 100%); pointer-events: none; } .hero--has-bg::before { display: none; } .hero__content { position: relative; z-index: 1; max-width: 800px; } .hero__headline { font-family: var(--font-family-heading); font-size: var(--font-size-hero); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 24px; } .hero__headline-accent { color: var(--color-accent); } .hero__sub { font-size: var(--font-size-body-lg); color: var(--color-text-muted); max-width: 600px; margin-bottom: 40px; line-height: 1.7; } @media (min-width: 768px) { .hero__sub { font-size: 20px; } } .hero__buttons { display: flex; flex-wrap: wrap; gap: 16px; } /* Inner page hero (smaller) */ .hero--inner { min-height: auto; padding-top: calc(var(--header-height) + 60px); padding-bottom: 60px; } @media (min-width: 768px) { .hero--inner { padding-top: calc(var(--header-height) + 80px); padding-bottom: 80px; } } .hero--inner .hero__headline { font-size: var(--font-size-h1); } /* Inner hero with background image */ .hero--inner.hero--has-bg { min-height: 360px; } @media (min-width: 768px) { .hero--inner.hero--has-bg { min-height: 420px; } } /* ============================================================ CONTENT IMAGE BLOCKS ============================================================ */ .content-image { width: 100%; height: auto; display: block; object-fit: cover; } .content-image--contained { max-height: 480px; } /* Image + text split layout */ .split { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; } @media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } } .split--reverse .split__image { order: -1; } @media (min-width: 768px) { .split--reverse .split__image { order: 1; } } .split__image { position: relative; min-height: 280px; overflow: hidden; } .split__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .split__content { padding: 40px var(--section-padding-x); display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .split__content { padding: 60px 48px; } } @media (min-width: 1024px) { .split__content { padding: 80px 64px; } } /* Section background image */ .section--bg-image { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } .section--bg-image::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.88); z-index: 0; } .section--bg-image > * { position: relative; z-index: 1; } /* Inline figure */ .content-figure { margin: 40px 0; } .content-figure img { width: 100%; height: auto; display: block; } .content-figure figcaption { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-surface-muted); } /* ============================================================ BREADCRUMBS ============================================================ */ .breadcrumbs { padding: 16px 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } .breadcrumbs a { color: var(--color-text-muted); transition: color var(--transition-fast); } .breadcrumbs a:hover { color: var(--color-accent); } .breadcrumbs__separator { margin: 0 8px; opacity: 0.5; } .breadcrumbs__current { color: var(--color-text-primary); } /* ============================================================ PROBLEM STATEMENT ============================================================ */ .problem { text-align: center; } .problem__text { max-width: var(--prose-width); margin: 0 auto; font-size: var(--font-size-body-lg); color: var(--color-text-secondary); line-height: 1.8; } @media (min-width: 768px) { .problem__text { font-size: 20px; } } .problem__label { display: inline-block; font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 16px; } /* ============================================================ CAPABILITY PILLARS (Numbered 01–04) ============================================================ */ .pillars__header { margin-bottom: 64px; } .pillars__label { display: inline-block; font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 16px; } .pillars__title { font-family: var(--font-family-heading); font-size: var(--font-size-h2); font-weight: 400; max-width: 600px; } .pillar { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 32px 0; border-top: 1px solid rgba(22, 38, 47, 0.18); } @media (min-width: 768px) { .pillar { grid-template-columns: 80px 1fr; gap: 24px; padding: 40px 0; } } .pillar__number { font-size: var(--font-size-stat); font-weight: 700; color: var(--color-accent); line-height: 1; letter-spacing: var(--letter-spacing-tight); } .pillar__content { max-width: 700px; } .pillar__title { font-size: var(--font-size-h3); margin-bottom: 12px; color: var(--color-text-primary); } .pillar__desc { color: var(--color-text-muted); margin-bottom: 16px; line-height: 1.7; } .pillar__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--color-accent); font-size: var(--font-size-sm); transition: gap var(--transition-fast); } .pillar__link:hover { gap: 10px; } .pillar__link::after { content: '\2192'; } /* ============================================================ STATS BAR ============================================================ */ .stats { border-top: 1px solid var(--color-surface-muted); border-bottom: 1px solid var(--color-surface-muted); } .stats__grid { display: grid; grid-template-columns: 1fr; gap: 40px; text-align: center; } @media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } @media (min-width: 1024px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } } .stat__number { font-size: var(--font-size-stat); font-weight: 700; color: var(--color-accent); line-height: 1; letter-spacing: var(--letter-spacing-tight); margin-bottom: 8px; } .stat__label { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.4; } /* ============================================================ SECTOR PREVIEW CARDS ============================================================ */ .sector-preview__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .sector-preview__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sector-preview__grid { grid-template-columns: repeat(4, 1fr); } } .sector-card { position: relative; padding: 32px; background: var(--color-white); border: 1px solid var(--color-surface-muted); border-radius: 0; transition: all var(--transition-base); display: flex; flex-direction: column; min-height: 200px; } .sector-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .sector-card__icon { width: 48px; height: 48px; margin-bottom: 20px; color: var(--color-accent); } .sector-card__title { font-size: var(--font-size-h4); margin-bottom: 12px; color: var(--color-text-primary); } .sector-card__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 20px; flex: 1; } .sector-card__link { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-accent); display: inline-flex; align-items: center; gap: 6px; transition: gap var(--transition-fast); } .sector-card__link:hover { gap: 10px; } .sector-card__link::after { content: '\2192'; } /* ============================================================ CASE STUDY ============================================================ */ .case-study-section__header { margin-bottom: 48px; } .case-study-card { background: var(--color-primary-800); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .case-study-card { grid-template-columns: 1fr 1fr; } } .case-study-card__image { background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900)); min-height: 240px; display: flex; align-items: center; justify-content: center; padding: 40px; } .case-study-card__image-placeholder { font-size: 14px; color: var(--color-text-muted); text-align: center; } .case-study-card__body { padding: 32px; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .case-study-card__body { padding: 48px; } } .case-study-card__tag { font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 16px; } .case-study-card__title { font-size: var(--font-size-h3); margin-bottom: 16px; } .case-study-card__desc { color: var(--color-text-muted); margin-bottom: 24px; } /* ============================================================ CTA BAND ============================================================ */ .cta-band { text-align: center; background: var(--color-cream); border-top: 1px solid var(--color-surface-muted); } .cta-band__title { font-family: var(--font-family-heading); font-size: var(--font-size-h2); font-weight: 400; margin-bottom: 16px; color: var(--color-text-primary); } .cta-band__text { color: var(--color-text-secondary); max-width: 500px; margin: 0 auto 32px; } /* ============================================================ CYBER SECURITY CALLOUT ============================================================ */ .security-callout { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background: rgba(166, 0, 0, 0.06); border: 1px solid rgba(166, 0, 0, 0.15); border-radius: 0; } .security-callout__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--color-accent); margin-top: 2px; } .security-callout__text { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; } .security-callout__text strong { color: var(--color-accent); font-weight: 500; } /* On light backgrounds */ .section--white .security-callout, .section--light .security-callout { background: rgba(166, 0, 0, 0.04); border-color: rgba(166, 0, 0, 0.12); } .section--white .security-callout__text, .section--light .security-callout__text { color: var(--color-text-secondary); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--color-primary-950); color: var(--color-text-on-dark); border-top: 1px solid rgba(255, 255, 255, 0.06); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 60px 0; } @media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 80px 0; } } .footer__brand { max-width: 320px; } .footer__logo { display: flex; align-items: center; gap: 0; font-size: 18px; font-weight: 500; color: var(--color-white); margin-bottom: 16px; } /* Brand period - crimson accent on "DFL." logo anywhere it appears */ .logo-dot { color: var(--color-accent); } .footer__desc { font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.7); line-height: 1.7; } .footer__social { display: flex; gap: 12px; margin-top: 16px; } .footer__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .footer__social-link:hover { color: var(--color-accent); border-color: var(--color-accent); background-color: rgba(166, 0, 0, 0.1); } .footer__heading { font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; } .footer__links { display: flex; flex-direction: column; gap: 12px; } .footer__link { font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.7); transition: color var(--transition-fast); } .footer__link:hover { color: var(--color-accent); } .footer__bottom { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--font-size-xs); color: rgba(255, 255, 255, 0.5); } @media (min-width: 768px) { .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } } .footer__legal-links { display: flex; gap: 24px; } .footer__legal-links a { transition: color var(--transition-fast); } .footer__legal-links a:hover { color: var(--color-accent); } /* ============================================================ CAPABILITY DETAIL PAGE ============================================================ */ .capability-content { display: grid; grid-template-columns: 1fr; gap: 64px; } @media (min-width: 768px) { .capability-content { gap: 80px; } } .capability-block__label { display: inline-block; font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 16px; } .capability-block__title { font-size: var(--font-size-h3); margin-bottom: 16px; } .capability-block__text { color: var(--color-text-secondary); line-height: 1.8; max-width: var(--prose-width); } .capability-block__text p + p { margin-top: 1em; } .deliverables-list { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; } @media (min-width: 768px) { .deliverables-list { grid-template-columns: repeat(2, 1fr); } } .deliverable-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--color-surface-light); border-radius: 0; } .deliverable-item__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-accent); margin-top: 2px; } .deliverable-item__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* On dark backgrounds */ .section--dark .deliverable-item, .section--navy .deliverable-item { background: rgba(255, 255, 255, 0.04); } .section--dark .deliverable-item__text, .section--navy .deliverable-item__text { color: var(--color-text-muted); } /* ============================================================ PARTNER GRID ============================================================ */ .partners-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .partners-grid { grid-template-columns: repeat(3, 1fr); } } /* Single-partner layout - centered card with breathing room on all viewports */ .partners-grid--single { grid-template-columns: 1fr !important; max-width: 460px; margin-left: auto; margin-right: auto; } .partner-card { padding: 32px; background: var(--color-surface-light); border: 1px solid var(--color-surface-muted); border-radius: 0; text-align: center; transition: all var(--transition-base); } .partner-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); } .partner-card__logo { height: 48px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } .partner-card__logo img { max-height: 100%; object-fit: contain; } .partner-card__name { font-size: var(--font-size-h4); font-weight: 700; margin-bottom: 8px; } .partner-card__type { font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin-bottom: 12px; } .partner-card__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* On dark backgrounds */ .section--dark .partner-card, .section--navy .partner-card { background: var(--color-primary-800); border-color: rgba(255, 255, 255, 0.06); } .section--dark .partner-card__desc, .section--navy .partner-card__desc { color: var(--color-text-muted); } /* ============================================================ CONTACT FORM ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } } .form-group { margin-bottom: 24px; } .form-label { display: block; font-size: var(--font-size-sm); font-weight: 500; margin-bottom: 8px; color: var(--color-text-primary); } .form-input, .form-textarea { width: 100%; padding: 14px 16px; font-size: var(--font-size-body); border: 1.5px solid var(--color-surface-muted); border-radius: 0; background: var(--color-white); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(166, 0, 0, 0.12); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); } .form-textarea { min-height: 160px; resize: vertical; } .form-error { font-size: var(--font-size-xs); color: #ef4444; margin-top: 6px; display: none; } .form-group--error .form-input, .form-group--error .form-textarea { border-color: #ef4444; } .form-group--error .form-error { display: block; } .form-success { padding: 24px; background: rgba(166, 0, 0, 0.06); border: 1px solid rgba(166, 0, 0, 0.15); border-radius: 0; text-align: center; display: none; } .form-success--visible { display: block; } .form-success__title { font-size: var(--font-size-h4); font-weight: 700; color: var(--color-accent); margin-bottom: 8px; } /* Dark background forms */ .section--dark .form-label, .section--navy .form-label { color: var(--color-text-on-dark); } .section--dark .form-input, .section--dark .form-textarea, .section--navy .form-input, .section--navy .form-textarea { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--color-text-on-dark); } .section--dark .form-input:focus, .section--dark .form-textarea:focus, .section--navy .form-input:focus, .section--navy .form-textarea:focus { border-color: var(--color-accent); } /* Honeypot - hidden from real users */ .form-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none; } /* Contact info sidebar */ .contact-info__item { margin-bottom: 32px; } .contact-info__label { font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 8px; } .contact-info__value { font-size: var(--font-size-body); } .contact-info__value a { color: var(--color-accent); transition: opacity var(--transition-fast); } .contact-info__value a:hover { opacity: 0.8; } /* ============================================================ COOKIE CONSENT ============================================================ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998; background: var(--color-white); border-top: 1px solid var(--color-surface-muted); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); padding: 20px var(--section-padding-x); transform: translateY(100%); transition: transform var(--transition-slow); } .cookie-banner--visible { transform: translateY(0); } .cookie-banner__inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } @media (min-width: 768px) { .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; } } .cookie-banner__text { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.5; } .cookie-banner__text a { color: var(--color-accent); text-decoration: underline; } .cookie-banner__buttons { display: flex; gap: 12px; flex-shrink: 0; } /* ============================================================ BACK TO TOP ============================================================ */ .back-to-top { position: fixed; bottom: 24px; right: 24px; z-index: 900; width: 44px; height: 44px; border-radius: 0; background: var(--color-primary-800); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-white); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--transition-base); cursor: pointer; } .back-to-top--visible { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--color-accent); color: var(--color-primary-950); border-color: var(--color-accent); } /* ============================================================ PILLAR CARDS (What We Do overview) ============================================================ */ .pillar-cards { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .pillar-cards { grid-template-columns: repeat(2, 1fr); } } .pillar-card { padding: 32px; background: var(--color-surface-light); border: 1px solid var(--color-surface-muted); border-radius: 0; transition: all var(--transition-base); } .pillar-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .pillar-card__number { font-size: var(--font-size-h2); font-weight: 700; color: var(--color-accent); margin-bottom: 12px; line-height: 1; } .pillar-card__title { font-size: var(--font-size-h4); margin-bottom: 12px; } .pillar-card__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 20px; line-height: 1.7; } /* On dark backgrounds */ .section--dark .pillar-card, .section--navy .pillar-card { background: var(--color-primary-800); border-color: rgba(255, 255, 255, 0.06); } .section--dark .pillar-card__number, .section--navy .pillar-card__number { color: rgba(255, 255, 255, 0.06); } .section--dark .pillar-card__desc, .section--navy .pillar-card__desc { color: var(--color-text-muted); } /* ============================================================ PROSE CONTENT (About, Legal pages) ============================================================ */ .prose { max-width: var(--prose-width); } .prose h2 { margin-top: 48px; margin-bottom: 16px; } .prose h3 { margin-top: 32px; margin-bottom: 12px; } .prose p { margin-bottom: 1.2em; line-height: 1.8; color: var(--color-text-secondary); } .prose ul, .prose ol { margin-bottom: 1.2em; padding-left: 24px; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: 8px; color: var(--color-text-secondary); line-height: 1.7; } .prose a { color: var(--color-accent); text-decoration: underline; } .prose a:hover { color: var(--color-accent-dark); } .prose strong { color: var(--color-text-primary); font-weight: 500; } /* Prose on dark */ .section--dark .prose p, .section--dark .prose li { color: var(--color-text-muted); } .section--dark .prose strong { color: var(--color-white); } /* ============================================================ INSIGHTS / BLOG ============================================================ */ .insights-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .insights-grid { grid-template-columns: repeat(3, 1fr); } } .insight-card { border-radius: 0; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-surface-muted); transition: all var(--transition-base); } .insight-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .insight-card__image { height: 200px; background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-950)); } .insight-card__body { padding: 24px; } .insight-card__tag { font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin-bottom: 8px; } .insight-card__title { font-size: var(--font-size-h4); margin-bottom: 8px; } .insight-card__excerpt { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* ============================================================ PLACEHOLDER STATE ============================================================ */ .placeholder-state { text-align: center; padding: 80px 24px; } .placeholder-state__icon { width: 64px; height: 64px; margin: 0 auto 24px; color: var(--color-text-muted); opacity: 0.4; } .placeholder-state__title { font-size: var(--font-size-h3); margin-bottom: 8px; } .placeholder-state__text { color: var(--color-text-secondary); max-width: 400px; margin: 0 auto; } /* ============================================================ SCROLL ANIMATIONS ============================================================ */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up--visible { opacity: 1; transform: translateY(0); } /* Staggered children */ .stagger > .fade-up:nth-child(1) { transition-delay: 0ms; } .stagger > .fade-up:nth-child(2) { transition-delay: 80ms; } .stagger > .fade-up:nth-child(3) { transition-delay: 160ms; } .stagger > .fade-up:nth-child(4) { transition-delay: 240ms; } .stagger > .fade-up:nth-child(5) { transition-delay: 320ms; } .stagger > .fade-up:nth-child(6) { transition-delay: 400ms; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } } /* ============================================================ UTILITIES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .text-center { text-align: center; } .text-left { text-align: left; } .mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-48 { margin-bottom: 48px; } .mb-64 { margin-bottom: 64px; } .mt-24 { margin-top: 24px; } .mt-48 { margin-top: 48px; } .mx-auto { margin-left: auto; margin-right: auto; } .max-w-prose { max-width: var(--prose-width); } /* ============================================================ CASE STUDIES - FULL PAGE ============================================================ */ .cs-full { max-width: 900px; } .cs-full__header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; } .cs-full__tag { display: inline-block; font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); padding: 6px 14px; border: 1px solid var(--color-accent); line-height: 1; } .cs-full__timeline { display: inline-block; font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding: 6px 14px; background: var(--color-surface-light); border: 1px solid var(--color-surface-muted); line-height: 1; } .section--light .cs-full__timeline { background: var(--color-white); } .cs-full__title { font-family: var(--font-family-heading); font-size: var(--font-size-h2); font-weight: 400; line-height: var(--line-height-heading); margin-bottom: 12px; color: var(--color-text-primary); } .cs-full__client { font-size: var(--font-size-body); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 40px; max-width: var(--prose-width); } .cs-full__body { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; } @media (min-width: 768px) { .cs-full__body { grid-template-columns: 1fr 1fr; gap: 48px; } } .cs-full__subtitle { font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 16px; } .cs-full__challenge p { color: var(--color-text-secondary); line-height: 1.8; } .cs-full__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cs-full__list li { position: relative; padding-left: 20px; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.7; } .cs-full__list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; background: var(--color-accent); } .cs-full__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 40px; background: var(--color-primary-950); margin-bottom: 32px; } @media (min-width: 768px) { .cs-full__metrics { grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 48px; } } .cs-full__metric { text-align: center; } .cs-full__metric-number { display: block; font-size: var(--font-size-stat); font-weight: 700; color: var(--color-accent); line-height: 1; letter-spacing: var(--letter-spacing-tight); margin-bottom: 8px; } .cs-full__metric-label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.4; } .cs-full__scope { padding: 24px; background: rgba(166, 0, 0, 0.04); border: 1px solid rgba(166, 0, 0, 0.12); } .cs-full__scope-label { display: block; font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin-bottom: 8px; } .cs-full__scope p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 0; } /* Case study preview cards (homepage) */ .cs-preview-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; } @media (min-width: 768px) { .cs-preview-grid { grid-template-columns: repeat(2, 1fr); } } .cs-preview { padding: 32px; background: var(--color-white); border: 1px solid var(--color-surface-muted); transition: all var(--transition-base); display: flex; flex-direction: column; } .cs-preview:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .cs-preview__tag { display: inline-block; font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 16px; } .cs-preview__title { font-family: var(--font-family-heading); font-size: var(--font-size-h3); font-weight: 400; line-height: var(--line-height-heading); margin-bottom: 12px; color: var(--color-text-primary); } .cs-preview__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 24px; flex: 1; } .cs-preview__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: 24px; border-top: 1px solid var(--color-surface-muted); } .cs-preview__stat-number { display: block; font-size: 28px; font-weight: 700; color: var(--color-accent); line-height: 1; letter-spacing: var(--letter-spacing-tight); margin-bottom: 4px; } @media (min-width: 768px) { .cs-preview__stat-number { font-size: 32px; } } .cs-preview__stat-label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.3; } /* ============================================================ LEADERSHIP TEAM GRID ============================================================ */ .team-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } } .team-card { text-align: center; padding: 32px 24px; } .team-card__avatar { width: 200px; height: 200px; margin: 0 auto 24px; background: var(--color-surface-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(166, 0, 0, 0.2); } .team-card__initials { font-family: var(--font-family); font-size: 48px; font-weight: 700; color: var(--color-accent); letter-spacing: 0.04em; line-height: 1; user-select: none; } .team-card__name { font-family: var(--font-family-heading); font-size: var(--font-size-h4); font-weight: 400; color: var(--color-white); margin-bottom: 4px; } .team-card__role { font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin-bottom: 16px; } .team-card__bio { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; max-width: 360px; margin: 0 auto; } /* ============================================================ RESEARCH REPORT CARDS (Insights page) ============================================================ */ .report-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .report-card { padding: 40px; background: var(--color-surface-light); border: 1px solid var(--color-surface-muted); border-radius: 0; transition: all var(--transition-base); } .report-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); } .report-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; } .report-card__tag { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 0; } .report-card__tag--research { background: rgba(166, 0, 0, 0.1); color: var(--color-accent); } .report-card__tag--analysis { background: rgba(168, 85, 247, 0.1); color: #a855f7; } .report-card__tag--perspective { background: rgba(34, 197, 94, 0.1); color: #22c55e; } .report-card__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); } .report-card__title { font-family: var(--font-family-heading); font-size: var(--font-size-h3); font-weight: 400; color: var(--color-text-primary); margin-bottom: 16px; line-height: 1.25; } .report-card__summary { font-size: var(--font-size-body); color: var(--color-text-secondary); line-height: 1.8; margin-bottom: 24px; } .report-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--font-size-sm); color: var(--color-accent); transition: gap var(--transition-fast); } .report-card__link:hover { gap: 10px; } .report-card__link::after { content: '\2192'; } @media (min-width: 768px) { .report-card { padding: 48px; } } /* ============================================================ REPORT ARTICLE - Reusable styles for insight/report pages ============================================================ */ .report-article { max-width: 760px; margin: 0 auto; } /* Report meta bar (tag, date, reading time) */ .report-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .report-meta__tag { display: inline-block; background: var(--color-accent); color: var(--color-white); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 2px; } .report-meta__separator { color: var(--color-text-muted); font-size: var(--font-size-sm); } .report-meta__date, .report-meta__reading { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* Author line */ .report-author { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border-light); } /* Report body prose */ .report-body h2 { font-family: var(--font-family-heading); font-size: var(--font-size-h2); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-primary); margin-top: 56px; margin-bottom: 20px; } .report-body h2:first-child { margin-top: 0; } .report-body h3 { font-family: var(--font-family-heading); font-size: var(--font-size-h3); line-height: var(--line-height-heading); color: var(--color-text-primary); margin-top: 40px; margin-bottom: 16px; } .report-body p { font-family: var(--font-family); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); margin-bottom: 20px; } /* Stat callout - dark strip with large blue number */ .report-stat-callout { background: var(--color-primary-900); padding: 32px; margin: 40px 0; display: flex; align-items: center; gap: 24px; } .report-stat-callout__number { font-family: var(--font-family-heading); font-size: var(--font-size-stat); line-height: 1; color: var(--color-accent); letter-spacing: var(--letter-spacing-tight); flex-shrink: 0; } .report-stat-callout__desc { font-family: var(--font-family); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-on-dark); } @media (max-width: 599px) { .report-stat-callout { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; } } /* ============================================================ CYBER SECURITY - FOUNDATION LAYER DIAGRAM Dedicated visual for cyber-security.html Shows 5 capability cards stacked on a foundation plate ============================================================ */ .cyber-foundation { background: var(--color-primary-950); color: var(--color-text-on-dark); padding: var(--section-padding-y) var(--section-padding-x); position: relative; overflow: hidden; } .cyber-foundation::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(166, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(166, 0, 0, 0.04) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .cyber-foundation > .container { position: relative; z-index: 1; } .cyber-foundation__header { max-width: 820px; margin-bottom: 64px; } .cyber-foundation__eyebrow { display: inline-block; font-size: var(--font-size-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 20px; } .cyber-foundation__heading { font-family: var(--font-family-heading); font-size: var(--font-size-h1); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-tight); color: var(--color-white); margin-bottom: 24px; } .cyber-foundation__intro { font-size: var(--font-size-body-lg); line-height: var(--line-height-body); color: var(--color-text-muted); max-width: 75ch; } /* --- The stack (capabilities on top, plate beneath) --- */ .cyber-stack { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .cyber-stack__capabilities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 0 0 0; position: relative; z-index: 2; } .cyber-stack__cap { background: var(--color-primary-800); border: 1px solid var(--color-primary-700); border-bottom: none; padding: 24px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 120px; transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base); } .cyber-stack__cap:hover { background: var(--color-primary-700); border-color: var(--color-accent); transform: translateY(-2px); } .cyber-stack__cap-num { font-family: var(--font-family-heading); font-size: 22px; color: var(--color-accent); letter-spacing: var(--letter-spacing-tight); line-height: 1; } .cyber-stack__cap-label { font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-white); line-height: 1.3; } /* --- Foundation plate beneath the capabilities --- */ .cyber-stack__plate { background: linear-gradient(180deg, var(--color-accent-dark) 0%, #0369a1 100%); border: 1px solid var(--color-accent); padding: 32px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; z-index: 1; box-shadow: 0 -8px 24px rgba(166, 0, 0, 0.15), 0 12px 32px rgba(0, 0, 0, 0.4); } .cyber-stack__plate::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent-light); opacity: 0.6; } .cyber-stack__plate-icon { width: 32px; height: 32px; color: var(--color-white); flex-shrink: 0; } .cyber-stack__plate-label { font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); line-height: 1.3; } /* --- Tablet: 3 columns for capabilities --- */ @media (min-width: 768px) { .cyber-stack__capabilities { grid-template-columns: repeat(3, 1fr); gap: 16px; } .cyber-stack__cap { padding: 28px 24px; min-height: 140px; } .cyber-stack__cap-num { font-size: 28px; } .cyber-stack__cap-label { font-size: var(--font-size-body); } .cyber-stack__plate { padding: 40px 32px; } .cyber-stack__plate-icon { width: 40px; height: 40px; } .cyber-stack__plate-label { font-size: var(--font-size-body); } } /* --- Desktop: 5 columns, all capabilities in one row --- */ @media (min-width: 1024px) { .cyber-stack__capabilities { grid-template-columns: repeat(5, 1fr); gap: 20px; } .cyber-stack__cap { padding: 32px 24px; min-height: 160px; } .cyber-stack__cap-num { font-size: 32px; } .cyber-stack__plate { padding: 48px 40px; gap: 20px; } } /* ============================================================ CYBER SECURITY - RULES OF ENGAGEMENT GRID 6 numbered rules on dark section ============================================================ */ .rules-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; } .rule-item { background: var(--color-primary-800); border: 1px solid var(--color-primary-700); border-left: 3px solid var(--color-accent); padding: 28px 24px; transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base); } .rule-item:hover { background: var(--color-primary-700); transform: translateY(-2px); } .rule-item__num { font-family: var(--font-family-heading); font-size: 28px; color: var(--color-accent); letter-spacing: var(--letter-spacing-tight); line-height: 1; margin-bottom: 16px; } .rule-item__title { font-family: var(--font-family); font-size: var(--font-size-h4); font-weight: 700; color: var(--color-white); line-height: 1.3; margin-bottom: 12px; letter-spacing: var(--letter-spacing-tight); } .rule-item__desc { font-family: var(--font-family); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-muted); } @media (min-width: 768px) { .rules-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 56px; } .rule-item { padding: 32px 28px; } .rule-item__num { font-size: 36px; margin-bottom: 20px; } } @media (min-width: 1024px) { .rules-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; } .rule-item { padding: 40px 32px; } .rule-item__num { font-size: 40px; } } /* ============================================================ HERO - VIDEO BACKGROUND VARIANT Used on homepage. Full-bleed looping video behind text overlay. ============================================================ */ .hero--video { position: relative; overflow: hidden; background-color: var(--color-dark-navy, #16262F); min-height: 85vh; color: var(--color-white); } .hero--video .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; opacity: 1; pointer-events: none; } .hero--video::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(22, 38, 47, 0.75) 0%, rgba(22, 38, 47, 0.55) 50%, rgba(22, 38, 47, 0.40) 100% ); z-index: 1; pointer-events: none; } .hero--video::after { display: none; } .hero--video > .container { position: relative; z-index: 2; } /* Reduced motion: hide the video, fall back to poster background */ @media (prefers-reduced-motion: reduce) { .hero--video .hero__video { display: none; } .hero--video { background-image: url('../images/hero-bg.jpg'); background-size: cover; background-position: center; } }