:root { --navy: #18304a; --navy-deep: #0d2033; --blue: #2b7db7; --sky: #499ec5; --rust: #bf6445; --rust-dark: #9c472f; --orange: #cb9056; --sand: #d3a164; --ink: #102336; --muted: #5d7080; --paper: #ffffff; --mist: #f4f6f7; --line: #dbe3e8; --success: #176c4a; --danger: #a72c2c; --shadow: 0 22px 55px rgba(13, 32, 51, .13); --shadow-soft: 0 12px 30px rgba(13, 32, 51, .09); --radius: .25rem; --wrap: min(1120px, calc(100% - 2rem)); color-scheme: light; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.65; } body.menu-open { overflow: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-underline-offset: .2em; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; } .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; border-radius: .2rem; color: #fff; background: var(--navy); } .skip-link:focus { top: 1rem; } .wrap { width: var(--wrap); margin-inline: auto; } .section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; } .eyebrow { margin: 0 0 .75rem; color: var(--rust-dark); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; } .eyebrow::before { content: ""; display: inline-block; width: 1.8rem; height: 2px; margin: 0 .65rem .2rem 0; background: currentColor; } .eyebrow--light { color: #fff; } .eyebrow--warm { color: var(--orange); } h1, h2, h3 { margin: 0; color: var(--navy); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; } h1 { font-size: clamp(3rem, 6.7vw, 5.75rem); } h2 { font-size: clamp(2.15rem, 4.3vw, 3.7rem); } h3 { font-size: 1.28rem; letter-spacing: -.025em; } p { margin: 0 0 1rem; } .lead { color: var(--muted); font-size: clamp(1.03rem, 1.7vw, 1.2rem); } .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; } .button { min-height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .8rem 1.25rem; border: 1px solid var(--navy); border-radius: .1rem; color: #fff; background: var(--navy); font-size: .85rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; } .button:hover { transform: translateY(-2px); background: #244760; box-shadow: 0 10px 24px rgba(13,32,51,.17); } .button--accent { border-color: var(--rust-dark); background: var(--rust-dark); } .button--accent:hover { border-color: #7f3423; background: #7f3423; } .button--outline-light { border-color: rgba(255,255,255,.65); color: #fff; background: rgba(13,32,51,.24); backdrop-filter: blur(6px); } .button--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.13); } .button--small { min-height: 2.7rem; padding: .58rem 1rem; } .button[disabled] { opacity: .55; cursor: not-allowed; transform: none; } .utility-bar { min-height: 2rem; display: flex; align-items: center; color: #d9e3e9; background: var(--navy-deep); font-size: .69rem; } .utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .utility-inner p { margin: 0; letter-spacing: .08em; text-transform: uppercase; } .utility-contact { display: flex; align-items: center; gap: .6rem; } .utility-contact a { color: #fff; text-decoration: none; } .utility-contact a:hover { color: var(--orange); } .site-header { position: sticky; top: 0; z-index: 50; height: 4.75rem; border-bottom: 1px solid rgba(13,32,51,.09); background: rgba(255,255,255,.97); box-shadow: 0 4px 15px rgba(13,32,51,.04); transition: box-shadow .2s; } .site-header.scrolled { box-shadow: 0 10px 28px rgba(13,32,51,.1); } .nav-shell { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; } .brand { width: 104px; display: block; text-decoration: none; } .brand img { width: 104px; height: 60px; object-fit: contain; } .brand-text { display: none; } .nav-links { display: flex; align-items: center; gap: 1.45rem; } .nav-links > a:not(.button) { color: var(--navy); font-size: .78rem; font-weight: 780; text-decoration: none; } .nav-links > a:not(.button):hover { color: var(--rust-dark); } .lang-switch { display: inline-flex; padding: .15rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; } .lang-switch button { min-width: 2.25rem; min-height: 2rem; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: .68rem; font-weight: 850; cursor: pointer; } .lang-switch button[aria-pressed="true"] { color: #fff; background: var(--navy); } .menu-toggle { display: none; width: 2.9rem; height: 2.9rem; border: 1px solid var(--line); border-radius: .15rem; color: var(--navy); background: #fff; cursor: pointer; } .menu-toggle span { display: block; width: 1.15rem; height: 2px; margin: 4px auto; background: currentColor; } .hero-v2 { position: relative; min-height: clamp(620px, 76vh, 790px); display: grid; align-items: center; overflow: hidden; color: #fff; background: var(--navy-deep); } .hero-media, .hero-media img, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-media img { object-fit: cover; object-position: center; } .hero-shade { z-index: 1; background: linear-gradient(90deg, rgba(6,19,31,.96) 0%, rgba(13,32,51,.87) 35%, rgba(13,32,51,.35) 65%, rgba(13,32,51,.12) 100%); } .hero-content { position: relative; z-index: 2; padding: 5.5rem 0 9rem; } .hero-content h1 { max-width: 10.7ch; color: #fff; text-shadow: 0 4px 22px rgba(0,0,0,.24); } .hero-lead { max-width: 590px; margin-top: 1.25rem; color: #dce7ed; font-size: clamp(1rem, 1.7vw, 1.2rem); } .hero-feature-wrap { position: relative; z-index: 4; margin-top: -5rem; } .hero-features { display: grid; grid-template-columns: repeat(3,1fr); box-shadow: var(--shadow); } .hero-feature { min-height: 10rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.35rem 1.4rem; border-right: 1px solid rgba(255,255,255,.12); color: #fff; background: var(--navy); } .hero-feature:nth-child(2) { background: #223f5c; } .hero-feature--accent { background: var(--rust-dark); } .hero-feature .feature-no { align-self: start; color: var(--orange); font-size: .68rem; font-weight: 900; letter-spacing: .12em; } .hero-feature--accent .feature-no { color: #fff; } .hero-feature h2 { color: #fff; font-size: 1.05rem; letter-spacing: -.02em; } .hero-feature p { margin: .3rem 0 0; color: #c8d5dd; font-size: .76rem; line-height: 1.45; } .hero-feature--accent p { color: #f6dfd7; } .hero-feature a { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; transition: background .2s; } .hero-feature a:hover { background: rgba(255,255,255,.13); } .category-ribbon { padding: 4.25rem 0 1rem; background: #fff; } .ribbon-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ribbon-grid span { min-height: 4.4rem; display: grid; place-items: center; padding: .8rem 1rem; border-right: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-align: center; text-transform: uppercase; } .ribbon-grid span:last-child { border-right: 0; } .intro-section { padding-top: 5.8rem; } .intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem,7vw,6.5rem); align-items: end; } .intro-grid h2 { max-width: 12ch; } .intro-grid .lead { max-width: 610px; } .intro-signoff { display: inline-flex; align-items: center; gap: .7rem; margin-top: .8rem; color: var(--navy); font-size: .82rem; font-weight: 800; } .intro-signoff::before { content: ""; width: 2.5rem; height: 2px; background: var(--rust); } .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 3.5rem; } .service-card { min-height: 18rem; display: flex; flex-direction: column; padding: 1.8rem; border: 1px solid var(--line); border-top: 4px solid var(--rust); background: #fff; box-shadow: var(--shadow-soft); transition: transform .22s, box-shadow .22s; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .service-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; margin-bottom: 2rem; border-radius: 50%; color: #fff; background: var(--navy); font-size: .82rem; font-weight: 900; } .service-card h3 { max-width: 14ch; } .service-card p { margin: .8rem 0 1.3rem; color: var(--muted); font-size: .88rem; } .service-card a { margin-top: auto; color: var(--rust-dark); font-size: .78rem; font-weight: 850; text-decoration: none; } .service-card a span { margin-left: .3rem; } .split-story { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 680px; margin-top: 1.5rem; color: #fff; background: var(--navy-deep); } .split-copy { display: grid; place-items: center; padding: clamp(3rem,7vw,7rem) max(2rem,calc((100vw - 1120px)/2)); } .split-inner { max-width: 640px; } .split-copy h2 { max-width: 13ch; color: #fff; } .split-copy > .split-inner > p:not(.eyebrow) { max-width: 600px; margin-top: 1.35rem; color: #c2d0d9; } .story-steps { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.16); } .story-steps li { display: flex; align-items: center; gap: .9rem; padding: 1.15rem .2rem; border-bottom: 1px solid rgba(255,255,255,.16); } .story-steps li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.16); } .story-steps span { color: var(--orange); font-size: .72rem; font-weight: 900; } .story-steps strong { color: #fff; font-size: .87rem; } .split-photo { position: relative; min-height: 680px; margin: 0; overflow: hidden; } .split-photo img { width: 100%; height: 100%; object-fit: cover; } .split-photo figcaption { position: absolute; right: 0; bottom: 0; padding: .65rem 1rem; color: #fff; background: rgba(13,32,51,.83); font-size: .68rem; } .categories-section { background: var(--mist); } .section-heading { display: grid; grid-template-columns: 1fr .9fr; gap: 4rem; align-items: end; margin-bottom: 3rem; } .section-heading h2 { max-width: 13ch; } .product-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; } .product-card { position: relative; min-height: 21rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 2rem; color: #fff; background: var(--blue); } .product-card--light { color: var(--ink); background: #e5edf1; } .product-card--rust { background: var(--rust-dark); } .product-card--dark { background: var(--navy-deep); } .product-card > span { position: absolute; left: 2rem; top: 1.5rem; z-index: 2; font-size: .72rem; font-weight: 900; letter-spacing: .12em; } .product-card h3 { position: relative; z-index: 2; max-width: 15ch; color: inherit; font-size: clamp(1.6rem,3vw,2.4rem); } .product-card p { position: relative; z-index: 2; max-width: 38ch; margin: .8rem 0 0; color: inherit; opacity: .82; font-size: .9rem; } .product-shape { position: absolute; inset: 1.5rem 1.5rem auto auto; width: 45%; height: 58%; opacity: .24; transform: rotate(-8deg); } .product-shape i { position: absolute; display: block; border: 3px solid #fff; } .product-shape i:nth-child(1) { inset: 0 30% 25% 0; } .product-shape i:nth-child(2) { inset: 18% 0 8% 32%; } .product-shape i:nth-child(3) { width: 32%; height: 32%; right: 15%; bottom: 0; background: #fff; } .product-card--light .product-shape i { border-color: var(--navy); } .product-card--light .product-shape i:nth-child(3) { background: var(--navy); } .product-shape--round i { border-radius: 50%; } .product-shape--tech { transform: rotate(4deg); } .product-shape--tech i:nth-child(1), .product-shape--tech i:nth-child(2) { border-radius: .6rem; } .product-shape--tools { transform: rotate(12deg); } .b2b-panel { padding: clamp(4.5rem,8vw,7rem) 0; color: #fff; background: var(--navy); } .b2b-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem,7vw,7rem); align-items: center; } .b2b-grid h2 { max-width: 13ch; color: #fff; } .b2b-grid > div > p:not(.eyebrow) { max-width: 620px; margin: 1.2rem 0 1.8rem; color: #cad7df; } .b2b-process { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.17); } .b2b-process li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(255,255,255,.17); } .b2b-process span { color: var(--orange); font-size: 1.5rem; font-weight: 300; } .b2b-process strong { display: block; color: #fff; } .b2b-process small { color: #b8c8d2; } .photo-cta { position: relative; min-height: 420px; display: grid; align-items: center; overflow: hidden; color: #fff; background: var(--navy-deep); } .photo-cta > img, .photo-cta-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .photo-cta > img { object-fit: cover; } .photo-cta-shade { background: linear-gradient(90deg, rgba(13,32,51,.15) 0%, rgba(13,32,51,.58) 42%, rgba(13,32,51,.96) 100%); } .photo-cta-content { position: relative; z-index: 2; display: grid; justify-items: start; padding-left: min(48%, 560px); } .photo-cta h2 { max-width: 13ch; color: #fff; } .photo-cta .button { margin-top: 1.4rem; } .contact-section { background: #fff; } .contact-layout { display: grid; grid-template-columns: .82fr 1.18fr; box-shadow: var(--shadow); } .contact-aside { display: grid; grid-template-rows: 15rem auto; color: #fff; background: var(--navy-deep); } .contact-aside-photo { background: linear-gradient(rgba(13,32,51,.15),rgba(13,32,51,.55)), url('/images/hero-wholesale-v2.webp') 72% center/cover no-repeat; } .contact-aside-body { padding: 2.2rem; } .contact-aside h2 { max-width: 10ch; color: #fff; font-size: clamp(2rem,3.4vw,3rem); } .contact-aside-body > p:not(.eyebrow) { margin-top: 1rem; color: #c2d0d9; } .contact-list { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; } .contact-list span { display: block; color: var(--orange); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .contact-list a { color: #fff; font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; } .form-card { padding: clamp(1.5rem,4vw,3rem); border: 1px solid var(--line); background: #fff; } .form-title { margin-bottom: 2rem; } .form-title h2 { font-size: clamp(1.8rem,3vw,2.7rem); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field { display: grid; gap: .4rem; } .field--full { grid-column: 1/-1; } .field-reset { margin: 0; padding: 0; border: 0; } .field label, .choice-label { color: var(--navy); font-size: .76rem; font-weight: 820; } .field input, .field select, .field textarea { width: 100%; min-height: 3.15rem; padding: .72rem .85rem; border: 1px solid #b8c8d2; border-radius: 0; color: var(--ink); background: #fff; } .field textarea { min-height: 8rem; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid rgba(43,125,183,.14); } .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); } .field-help { color: var(--muted); font-size: .72rem; } .checkbox { display: flex; align-items: flex-start; gap: .7rem; } .checkbox input { width: 1.1rem; height: 1.1rem; margin-top: .23rem; accent-color: var(--navy); } .checkbox label { color: var(--muted); font-size: .77rem; } .hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .form-status { min-height: 1.4rem; margin: .9rem 0 0; font-size: .82rem; font-weight: 750; } .form-status[data-kind="success"] { color: var(--success); } .form-status[data-kind="error"] { color: var(--danger); } .protection-note { margin-top: .9rem; padding: .75rem 1rem; border-left: 3px solid var(--rust); color: var(--muted); background: var(--mist); font-size: .72rem; } .legal-hero { padding: 8rem 0 4.5rem; background: linear-gradient(125deg,var(--mist) 0 70%,#e0e9ee 70%); } .legal-hero h1 { max-width: 15ch; font-size: clamp(2.8rem,6vw,5rem); } .legal-hero .lead { margin-top: 1rem; } .legal-body { max-width: 820px; padding: 4rem 0 7rem; } .legal-body h2 { max-width: none; margin: 2.5rem 0 .7rem; font-size: 1.65rem; } .legal-body h3 { margin: 1.5rem 0 .5rem; } .legal-body ul { padding-left: 1.25rem; } .legal-notice { padding: 1rem 1.2rem; border-left: 4px solid var(--rust); background: #fff3ed; } .contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2.5rem,6vw,5rem); } .check-list { margin: 2rem 0; padding: 0; list-style: none; display: grid; gap: .8rem; } .check-list li { display: flex; gap: .7rem; color: var(--muted); } .check-list li::before { content: "✓"; flex: 0 0 auto; width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--rust-dark); font-size: .7rem; font-weight: 900; } .site-footer { padding: 4.5rem 0 2rem; color: #c8d6df; background: #091a29; } .footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .9fr; gap: 3rem; } .footer-brand { max-width: 32rem; } .footer-brand img { width: 116px; height: 68px; object-fit: contain; filter: brightness(0) invert(1); } .footer-brand p { margin-top: 1.2rem; } .site-footer h2 { margin-bottom: 1rem; color: #fff; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; } .footer-links { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; } .footer-links a { color: #dce7ed; text-decoration: none; } .footer-links a:hover { color: var(--orange); } .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .74rem; } @media (max-width: 960px) { .menu-toggle { display: block; } .nav-links { position: fixed; inset: 4.75rem 0 auto; display: none; align-items: stretch; padding: 1.25rem 1rem 2rem; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 20px 40px rgba(13,32,51,.14); } .nav-links.open { display: grid; } .nav-links > a:not(.button) { min-height: 2.8rem; display: flex; align-items: center; font-size: .9rem; } .nav-links .button { justify-content: center; } .nav-links .lang-switch { justify-self: start; } .hero-features { grid-template-columns: 1fr; } .hero-feature { min-height: 7rem; } .ribbon-grid { grid-template-columns: 1fr 1fr; } .ribbon-grid span:nth-child(2) { border-right: 0; } .ribbon-grid span:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .intro-grid, .section-heading, .b2b-grid, .contact-layout, .contact-grid { grid-template-columns: 1fr; } .intro-grid, .section-heading { gap: 1.5rem; } .service-grid { grid-template-columns: 1fr; } .service-card { min-height: auto; } .split-story { grid-template-columns: 1fr; } .split-photo { min-height: 560px; } .photo-cta-content { padding-left: 42%; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1/-1; } } @media (max-width: 700px) { :root { --wrap: min(100% - 1.2rem,1120px); } .utility-bar { display: none; } .site-header { height: 4.4rem; } .brand, .brand img { width: 92px; } .brand img { height: 54px; } .nav-links { inset: 4.4rem 0 auto; } .hero-v2 { min-height: 720px; align-items: end; } .hero-media img { object-position: center top; } .hero-shade { background: linear-gradient(180deg,rgba(6,19,31,.14) 0%,rgba(6,19,31,.48) 45%,rgba(6,19,31,.97) 85%); } .hero-content { padding: 5.5rem 0 8.5rem; } .hero-content h1 { max-width: 10ch; font-size: clamp(3rem,14vw,4.5rem); } .hero-lead { font-size: .98rem; } .actions { display: grid; } .actions .button { width: 100%; } .hero-feature-wrap { margin-top: -5rem; } .hero-feature { padding: 1rem; } .category-ribbon { padding-top: 3rem; } .ribbon-grid { grid-template-columns: 1fr; } .ribbon-grid span { border-right: 0; border-bottom: 1px solid var(--line); } .ribbon-grid span:last-child { border-bottom: 0; } .intro-grid h2, .section-heading h2 { max-width: none; } .split-copy { padding: 4.5rem 1rem; } .story-steps { grid-template-columns: 1fr; } .story-steps li:nth-child(odd) { border-right: 0; } .split-photo { min-height: 470px; } .product-grid { grid-template-columns: 1fr; } .product-card { min-height: 18rem; } .photo-cta { min-height: 520px; align-items: end; } .photo-cta > img { object-position: 24% center; } .photo-cta-shade { background: linear-gradient(180deg,rgba(13,32,51,.1),rgba(13,32,51,.9) 68%); } .photo-cta-content { padding: 0 0 3.5rem; } .photo-cta h2 { max-width: 12ch; } .contact-aside { grid-template-rows: 13rem auto; } .contact-aside-body, .form-card { padding: 1.35rem; } .form-grid { grid-template-columns: 1fr; } .field--full { grid-column: auto; } .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } .footer-bottom { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media print { .utility-bar, .site-header, .site-footer, .actions { display: none; } .legal-hero { padding-top: 2rem; } body { color: #000; } } body.modal-open { overflow: hidden; } .utility-bar { position: relative; } .utility-bar::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg,var(--navy) 0 16.66%,var(--blue) 16.66% 33.32%,var(--sky) 33.32% 49.98%,var(--rust) 49.98% 66.64%,var(--orange) 66.64% 83.3%,var(--sand) 83.3%); } .site-header::after { content: ""; position: absolute; left: max(1rem,calc((100vw - 1120px)/2)); bottom: -1px; width: 4.4rem; height: 4px; background: var(--blue); clip-path: polygon(8% 0,100% 0,92% 100%,0 100%); } .brand { position: relative; } .brand::after { content: ""; position: absolute; right: -1rem; top: 50%; width: 1.25rem; height: .28rem; background: var(--rust); transform: translateY(-50%) skewX(-28deg); } .hero-v2::before, .hero-v2::after { content: ""; position: absolute; z-index: 2; pointer-events: none; } .hero-v2::before { right: -8vw; top: 11%; width: clamp(14rem,32vw,34rem); height: clamp(4rem,9vw,9rem); border: 1px solid rgba(255,255,255,.22); transform: skewX(-28deg); } .hero-v2::after { right: 7vw; bottom: 19%; width: clamp(8rem,18vw,17rem); height: 1rem; background: linear-gradient(90deg,var(--rust),var(--orange),var(--sand)); transform: skewX(-30deg); box-shadow: 0 1.7rem 0 rgba(73,158,197,.78); opacity: .88; } .hero-content::before { content: ""; display: block; width: 5.8rem; height: .55rem; margin-bottom: 1.35rem; background: linear-gradient(90deg,var(--blue) 0 52%,transparent 52% 58%,var(--rust) 58% 78%,var(--sand) 78%); transform: skewX(-30deg); transform-origin: left; } .hero-content h1 { position: relative; } .hero-content h1::after { content: ""; display: block; width: 3.8rem; height: .28rem; margin-top: 1.05rem; background: var(--sky); transform: skewX(-30deg); } .hero-features { position: relative; } .hero-features::before { content: ""; position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg,var(--blue) 0 33.33%,var(--sky) 33.33% 66.66%,var(--orange) 66.66%); } .hero-feature { position: relative; overflow: hidden; } .hero-feature::after { content: ""; position: absolute; right: -1.8rem; bottom: -2.4rem; width: 7rem; height: 5rem; border: 1px solid rgba(255,255,255,.13); transform: skewX(-28deg); } .ribbon-grid span { position: relative; overflow: hidden; } .ribbon-grid span::before { content: ""; position: absolute; left: 1.1rem; top: 0; width: 2.5rem; height: 4px; background: var(--navy); transform: skewX(-28deg); } .ribbon-grid span:nth-child(2)::before { background: var(--blue); } .ribbon-grid span:nth-child(3)::before { background: var(--rust); } .ribbon-grid span:nth-child(4)::before { background: var(--sand); } .intro-section { position: relative; overflow: hidden; } .intro-section::before { content: "ACN"; position: absolute; right: -2.5vw; top: 2rem; color: rgba(24,48,74,.035); font-size: clamp(9rem,22vw,22rem); font-weight: 950; letter-spacing: -.09em; line-height: 1; pointer-events: none; } .intro-grid, .service-grid, .company-showcase { position: relative; z-index: 1; } .intro-grid > div:first-child { position: relative; padding-left: 1.4rem; } .intro-grid > div:first-child::before { content: ""; position: absolute; left: 0; top: .2rem; bottom: .25rem; width: .42rem; background: linear-gradient(var(--blue) 0 34%,var(--sky) 34% 54%,var(--rust) 54% 78%,var(--sand) 78%); transform: skewY(-20deg); } .company-showcase { position: relative; min-height: 34rem; margin-top: clamp(3rem,6vw,5rem); overflow: hidden; background: var(--navy); box-shadow: var(--shadow); } .company-showcase::before { content: ""; position: absolute; z-index: 2; right: -3rem; top: 2.5rem; width: 14rem; height: 4.5rem; border: 2px solid rgba(255,255,255,.36); transform: skewX(-30deg); } .company-showcase::after { content: ""; position: absolute; z-index: 2; left: -2rem; bottom: 4.8rem; width: 12rem; height: 1rem; background: linear-gradient(90deg,var(--blue),var(--sky),var(--orange)); transform: skewX(-30deg); } .company-showcase > img { width: 100%; height: clamp(34rem,56vw,43rem); object-fit: cover; } .company-showcase figcaption { position: absolute; z-index: 3; right: 1rem; bottom: .8rem; padding: .5rem .75rem; color: #fff; background: rgba(13,32,51,.82); font-size: .68rem; } .company-showcase-card { position: absolute; z-index: 3; left: clamp(1rem,5vw,4rem); bottom: clamp(2rem,7vw,5rem); max-width: 25rem; padding: 1.5rem 1.7rem 1.3rem; color: #fff; background: rgba(24,48,74,.94); box-shadow: 0 18px 40px rgba(6,19,31,.24); backdrop-filter: blur(8px); } .company-showcase-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg,var(--blue) 0 35%,var(--sky) 35% 55%,var(--rust) 55% 78%,var(--sand) 78%); } .company-showcase-card > span { display: block; margin-bottom: .55rem; color: var(--sand); font-size: 2.5rem; font-weight: 950; letter-spacing: -.08em; } .company-showcase-card p { margin: 0; color: #e3ebf0; font-size: .9rem; } .service-grid { margin-top: 1rem; } .service-card { position: relative; overflow: hidden; border-top: 0; } .service-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 43%; height: .32rem; background: var(--blue); transform: skewX(-30deg); transform-origin: left; } .service-card:nth-child(2)::before { background: var(--rust); } .service-card:nth-child(3)::before { background: var(--sand); } .service-card::after { content: ""; position: absolute; right: -2.2rem; top: 2.4rem; width: 6.5rem; height: 3.2rem; border: 1px solid rgba(43,125,183,.18); transform: skewX(-30deg); } .service-icon { border-radius: .25rem; clip-path: polygon(13% 0,100% 0,87% 100%,0 100%); } .service-card:nth-child(2) .service-icon { background: var(--rust); } .service-card:nth-child(3) .service-icon { color: var(--navy); background: var(--sand); } .split-story { position: relative; overflow: hidden; } .split-story::before { content: ""; position: absolute; z-index: 2; left: calc(52.5% - 2rem); top: 0; width: 4rem; height: 100%; background: var(--navy-deep); clip-path: polygon(0 0,100% 0,22% 100%,0 100%); pointer-events: none; } .story-steps li { position: relative; } .story-steps li::after { content: ""; position: absolute; right: .7rem; width: 1.4rem; height: .3rem; background: var(--blue); transform: skewX(-28deg); opacity: .65; } .categories-section { position: relative; overflow: hidden; background: linear-gradient(145deg,#f5f7f8 0 62%,#eaf0f3 62%); } .categories-section::before { content: ""; position: absolute; left: -8rem; top: 7rem; width: 18rem; height: 8rem; border: 1px solid rgba(43,125,183,.16); transform: skewX(-28deg); } .categories-section .section-heading { position: relative; } .categories-section .section-heading::after { content: ""; position: absolute; right: 0; top: -1rem; width: 6rem; height: .55rem; background: linear-gradient(90deg,var(--rust),var(--orange),var(--sand)); transform: skewX(-30deg); } .product-grid { position: relative; } .product-card { --card-accent: var(--blue); min-height: 31rem; padding: 0; border: 0; color: var(--ink); background: #fff; box-shadow: var(--shadow-soft); transition: transform .25s, box-shadow .25s; } .product-card--light { --card-accent: var(--sky); } .product-card--rust { --card-accent: var(--rust); } .product-card--dark { --card-accent: var(--sand); } .product-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); } .category-open { width: 100%; height: 100%; display: grid; grid-template-rows: 16rem 1fr; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; } .product-media { position: relative; display: block; overflow: hidden; background: var(--navy); } .product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 52%,rgba(13,32,51,.34)); } .product-media::before { content: ""; position: absolute; z-index: 2; left: -1rem; bottom: 1.2rem; width: 7rem; height: .65rem; background: var(--card-accent); transform: skewX(-30deg); box-shadow: 1.7rem 1rem 0 rgba(255,255,255,.72); } .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; } .category-open:hover .product-media img { transform: scale(1.045); } .product-card-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 1.6rem 1.8rem 1.8rem; border-top: 5px solid var(--card-accent); } .product-card-body::after { content: ""; position: absolute; right: -1.6rem; top: 1.6rem; width: 5.2rem; height: 2rem; border: 1px solid rgba(24,48,74,.12); transform: skewX(-30deg); } .product-card .product-index { position: static; margin-bottom: .55rem; color: var(--card-accent); font-size: .68rem; font-weight: 900; letter-spacing: .15em; } .product-card h3 { position: relative; z-index: 2; max-width: 19ch; color: var(--navy); font-size: clamp(1.45rem,2.4vw,2rem); } .product-card p { color: var(--muted); } .product-link { position: relative; margin-top: auto; padding-top: .8rem; color: var(--navy); font-size: .75rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .product-link::after { content: "→"; display: inline-block; margin-left: .55rem; color: var(--card-accent); transition: transform .2s; } .category-open:hover .product-link::after { transform: translateX(.3rem); } .category-dialog { width: min(1060px,calc(100% - 2rem)); max-height: min(88vh,820px); padding: 0; border: 0; color: var(--ink); background: #fff; box-shadow: 0 35px 90px rgba(6,19,31,.38); overflow: auto; } .category-dialog::backdrop { background: rgba(6,19,31,.78); backdrop-filter: blur(7px); } .category-dialog-shell { position: relative; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); min-height: 610px; } .category-dialog-shell::before { content: ""; position: absolute; z-index: 3; left: calc(46% - 2rem); top: 0; width: 4rem; height: 100%; background: #fff; clip-path: polygon(78% 0,100% 0,22% 100%,0 100%); pointer-events: none; } .category-dialog-close { position: fixed; z-index: 5; right: max(calc((100vw - min(1060px,calc(100vw - 2rem)))/2 + .7rem),1.7rem); top: max(calc((100vh - min(88vh,820px))/2 + .7rem),1.7rem); width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); color: var(--navy); background: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-soft); } .category-dialog-media { min-height: 610px; overflow: hidden; background: var(--navy); } .category-dialog-media img { width: 100%; height: 100%; object-fit: cover; } .category-dialog-copy { position: relative; padding: clamp(3.5rem,6vw,5rem) clamp(1.5rem,4vw,3.4rem) 2rem; } .category-dialog-copy::before { content: ""; position: absolute; top: 1.5rem; left: clamp(1.5rem,4vw,3.4rem); width: 5rem; height: .55rem; background: linear-gradient(90deg,var(--blue) 0 42%,var(--sky) 42% 62%,var(--rust) 62% 82%,var(--sand) 82%); transform: skewX(-30deg); } .category-dialog h2 { max-width: 12ch; font-size: clamp(2rem,4vw,3.3rem); } .category-dialog-description { margin: 1.2rem 0; color: var(--muted); } .category-dialog-points { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .55rem; } .category-dialog-points li { position: relative; padding-left: 1.4rem; color: var(--navy); font-size: .84rem; font-weight: 750; } .category-dialog-points li::before { content: ""; position: absolute; left: 0; top: .65em; width: .72rem; height: .3rem; background: var(--rust); transform: skewX(-28deg); } .dialog-cta { display: grid; gap: .9rem; padding: 1.15rem; border-left: 4px solid var(--sand); background: var(--mist); } .dialog-cta h3 { font-size: 1.03rem; } .dialog-cta p { margin: .45rem 0 0; color: var(--muted); font-size: .77rem; } .dialog-cta .button { justify-self: start; min-height: 2.75rem; padding: .65rem 1rem; } .b2b-panel { position: relative; overflow: hidden; background: linear-gradient(120deg,var(--navy-deep) 0 62%,var(--navy) 62%); } .b2b-panel::before { content: ""; position: absolute; right: -3rem; top: 4rem; width: 20rem; height: 7rem; border: 1px solid rgba(255,255,255,.13); transform: skewX(-28deg); } .b2b-panel::after { content: ""; position: absolute; left: 5vw; bottom: 0; width: 9rem; height: .65rem; background: linear-gradient(90deg,var(--blue),var(--rust),var(--sand)); transform: skewX(-28deg); } .b2b-grid { position: relative; z-index: 1; } .site-footer { position: relative; overflow: hidden; padding: 0 0 2rem; background: #091a29; } .site-footer::before { content: ""; display: block; height: .45rem; background: linear-gradient(90deg,var(--navy) 0 16.66%,var(--blue) 16.66% 33.32%,var(--sky) 33.32% 49.98%,var(--rust) 49.98% 66.64%,var(--orange) 66.64% 83.3%,var(--sand) 83.3%); } .footer-geometry { position: absolute; inset: 0; pointer-events: none; opacity: .22; } .footer-geometry i, .footer-geometry b { position: absolute; display: block; transform: skewX(-28deg); } .footer-geometry i:nth-child(1) { right: -5rem; top: 6rem; width: 22rem; height: 7rem; border: 1px solid #fff; } .footer-geometry i:nth-child(2) { right: 4rem; top: 15rem; width: 11rem; height: .7rem; background: var(--blue); } .footer-geometry i:nth-child(3) { left: -3rem; bottom: 5rem; width: 13rem; height: 4rem; border: 1px solid var(--sand); } .footer-geometry b { right: 4vw; bottom: -2rem; color: rgba(255,255,255,.12); font-size: 13rem; } .footer-intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end; padding: clamp(4rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,4rem); border-bottom: 1px solid rgba(255,255,255,.13); } .footer-intro .eyebrow { grid-column: 1/-1; } .footer-intro h2 { max-width: 15ch; color: #fff; font-size: clamp(2rem,4.8vw,4.25rem); } .footer-contact-link { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.2rem; color: #fff; border: 1px solid rgba(255,255,255,.35); text-decoration: none; font-size: .8rem; font-weight: 850; } .footer-contact-link::after { content: "→"; color: var(--orange); } .footer-contact-link:hover { background: rgba(255,255,255,.07); } .footer-grid { position: relative; z-index: 1; padding-top: 3.2rem; } .footer-brand img { filter: brightness(0) invert(1); } .footer-palette { display: flex; width: 11rem; height: .42rem; margin-top: 1.5rem; transform: skewX(-28deg); } .footer-palette i { flex: 1; background: var(--navy); } .footer-palette i:nth-child(2) { background: var(--blue); } .footer-palette i:nth-child(3) { background: var(--sky); } .footer-palette i:nth-child(4) { background: var(--rust); } .footer-palette i:nth-child(5) { background: var(--orange); } .footer-palette i:nth-child(6) { background: var(--sand); } .footer-contact li { display: grid; } .footer-contact span { color: var(--orange); font-size: .6rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .footer-bottom { position: relative; z-index: 1; } @media (max-width: 960px) { .company-showcase { min-height: 30rem; } .company-showcase > img { height: 34rem; } .split-story::before { display: none; } .category-dialog-shell { grid-template-columns: 1fr; } .category-dialog-shell::before { display: none; } .category-dialog-media { min-height: 20rem; max-height: 34vh; } .category-dialog-copy { padding-top: 4.5rem; } } @media (max-width: 700px) { .site-header::after { left: .6rem; } .hero-v2::before { top: 16%; right: -9rem; } .hero-v2::after { right: -2rem; bottom: 38%; opacity: .62; } .company-showcase { width: 100%; min-height: 34rem; } .company-showcase > img { height: 34rem; object-position: 58% center; } .company-showcase-card { right: 1rem; bottom: 2.7rem; max-width: none; } .company-showcase figcaption { right: .5rem; bottom: .35rem; max-width: calc(100% - 1rem); } .category-open { grid-template-rows: 14rem 1fr; } .product-card { min-height: 29rem; } .category-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); } .category-dialog-media { min-height: 15rem; max-height: 28vh; } .category-dialog-copy { padding: 4.2rem 1.2rem 1.2rem; } .category-dialog-copy::before { left: 1.2rem; } .category-dialog-close { right: 1rem; top: 1rem; } .footer-intro { grid-template-columns: 1fr; } .footer-intro .eyebrow { grid-column: auto; } .footer-contact-link { justify-self: start; } } @media print { .category-dialog { display: none; } }