/* * Pharaon — Why Choose Us * * SCOPE RULE: every selector starts at .ph-why-page, a body class added only on * /why-choose-us/. Nothing here reaches another page, the header or the footer. * * TYPOGRAPHY RULE: no font-family is declared. Headings inherit * --themeht-typography-secondary-font-family and body copy inherits * --themeht-typography-body-font-family from Renvo. Only size, weight, * line-height, letter-spacing and case are set. * * MARKUP NOTE: Elementor's e_optimized_markup experiment is active on this site, * so Image and Heading widgets render without .elementor-widget-container. * Selectors anchor on

and .elementor-heading-title, which exist either way. */ /* * ELEMENTOR KIT DEFAULTS * * The kit (post 7) has no global typography or colour set, so Elementor emits * its factory defaults and applies them to core widgets — every Heading would be * Roboto at #6EC1E4 and every Text Editor Roboto. The kit variables are * re-pointed at the Renvo variables for this page rather than editing the kit, * which would change every page on the site. No new family is introduced: these * are the two families the theme already loads. * * The selector carries an element so it outranks .elementor-kit-7, which sits on * the same , independently of stylesheet order. */ body.ph-why-page { --e-global-typography-primary-font-family: var(--themeht-typography-secondary-font-family); --e-global-typography-secondary-font-family: var(--themeht-typography-secondary-font-family); --e-global-typography-text-font-family: var(--themeht-typography-body-font-family); --e-global-typography-accent-font-family: var(--themeht-typography-body-font-family); --e-global-typography-primary-font-weight: 500; --e-global-typography-secondary-font-weight: 500; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-weight: 500; --e-global-color-primary: var(--themeht-text-color, #200043); --e-global-color-secondary: var(--themeht-text-color, #200043); --e-global-color-text: var(--themeht-body-color, #444444); --e-global-color-accent: var(--themeht-primary-color, #273791); } /* ------------------------------------------------------------------ tokens */ .ph-why-page { --w-blue: var(--themeht-primary-color, #273791); --w-blue-deep: #101a46; --w-blue-ink: #0a0f2e; --w-orange: #f5901f; /* orange as small text on a light surface: #f5901f is 2.36:1 on white, * this is 5.8:1 and reads as the same accent */ --w-orange-ink: #9a5200; --w-ink: var(--themeht-text-color, #200043); --w-body: var(--themeht-body-color, #444444); --w-muted: #64748b; --w-light: #f5f7fa; --w-line: #e4e7ee; --w-line-dark: rgba(255, 255, 255, .16); --w-white: #fff; --w-2: 8px; --w-3: 12px; --w-4: 16px; --w-5: 24px; --w-6: 32px; --w-7: 48px; --w-8: 64px; --w-9: 80px; --w-10: 96px; --w-11: 120px; --w-r-img: 12px; --w-r-card: 14px; --w-r-sm: 6px; /* measured at runtime by wcu.js */ --w-hdr-static: 198px; --w-hdr-h: 128px; --w-nav-h: 52px; } /* Section padding is set with the Elementor padding control on each section so * it stays editable; only the anchor offset lives here. */ .ph-why-page .w-section { scroll-margin-top: calc(var(--w-hdr-h) + var(--w-nav-h) + 16px); } .ph-why-page .w-tone-light { background-color: var(--w-light); } .ph-why-page .w-tone-white { background-color: var(--w-white); } .ph-why-page .w-tone-dark { background-color: var(--w-blue-deep); } /* ---------------------------------------------------------- type patterns */ .ph-why-page .w-eyebrow .elementor-heading-title { font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--w-blue); display: inline-flex; align-items: center; gap: 10px; } .ph-why-page .w-eyebrow .elementor-heading-title::before { content: ""; width: 26px; height: 2px; background: var(--w-orange); flex: 0 0 26px; } .ph-why-page .w-tone-dark .w-eyebrow .elementor-heading-title, .ph-why-page .w-on-image .w-eyebrow .elementor-heading-title { color: var(--w-orange); } .ph-why-page .w-h2 .elementor-heading-title { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.1; font-weight: 500; letter-spacing: -.015em; color: var(--w-ink); max-width: 24ch; } .ph-why-page .w-h2-wide .elementor-heading-title { max-width: 34ch; } .ph-why-page .w-h3 .elementor-heading-title { font-size: 1.375rem; line-height: 1.3; font-weight: 500; letter-spacing: -.008em; color: var(--w-ink); } .ph-why-page .w-h4 .elementor-heading-title { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; letter-spacing: -.003em; color: var(--w-ink); } .ph-why-page .w-lead .elementor-heading-title { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; font-weight: 400; color: var(--w-ink); max-width: 48ch; } .ph-why-page .w-body p, .ph-why-page .w-body ul, .ph-why-page .w-body ol { font-size: 1rem; line-height: 1.75; color: var(--w-body); margin-bottom: 1.15em; } .ph-why-page .w-body p:last-child, .ph-why-page .w-body ul:last-child { margin-bottom: 0; } .ph-why-page .w-tone-dark .w-h2 .elementor-heading-title, .ph-why-page .w-tone-dark .w-h3 .elementor-heading-title, .ph-why-page .w-tone-dark .w-h4 .elementor-heading-title, .ph-why-page .w-tone-dark .w-lead .elementor-heading-title, .ph-why-page .w-on-image .w-h2 .elementor-heading-title, .ph-why-page .w-on-image .w-h3 .elementor-heading-title { color: var(--w-white); } .ph-why-page .w-tone-dark .w-body p, .ph-why-page .w-tone-dark .w-body ul, .ph-why-page .w-on-image .w-body p { color: rgba(255, 255, 255, .76); } .ph-why-page .w-rule .elementor-divider-separator { border-top-color: var(--w-line) !important; } .ph-why-page .w-tone-dark .w-rule .elementor-divider-separator, .ph-why-page .w-on-image .w-rule .elementor-divider-separator { border-top-color: var(--w-line-dark) !important; } /* ---------------------------------------------------------------- buttons */ .ph-why-page .w-btn .elementor-button { display: inline-flex; align-items: center; gap: 10px; padding: 17px 30px; border-radius: 8px; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2; border: 1px solid transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .ph-why-page .w-btn .elementor-button:hover { transform: translateY(-2px); } .ph-why-page .w-btn-primary .elementor-button { background-color: var(--w-orange); color: #1b1200; } .ph-why-page .w-btn-primary .elementor-button:hover { background-color: #ffa338; } .ph-why-page .w-btn-blue .elementor-button { background-color: var(--w-blue); color: var(--w-white); } .ph-why-page .w-btn-blue .elementor-button:hover { background-color: #1d2b74; } .ph-why-page .w-btn-ghost .elementor-button { background-color: transparent; color: var(--w-white); border-color: rgba(255, 255, 255, .45); } .ph-why-page .w-btn-ghost .elementor-button:hover { background-color: rgba(255, 255, 255, .12); border-color: var(--w-white); } .ph-why-page .w-btn-outline .elementor-button { background-color: transparent; color: var(--w-blue); border-color: var(--w-line); } .ph-why-page .w-btn-outline .elementor-button:hover { background-color: var(--w-blue); border-color: var(--w-blue); color: var(--w-white); } /* quiet text link with a moving arrow */ .ph-why-page .w-link .elementor-button { background: none; border: 0; padding: 0; color: var(--w-blue); font-size: .9375rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .ph-why-page .w-link .elementor-button::after { content: ""; width: 18px; height: 8px; background: currentColor; clip-path: polygon(0 3px, 11px 3px, 11px 0, 18px 4px, 11px 8px, 11px 5px, 0 5px); transition: transform .25s ease; } .ph-why-page .w-link .elementor-button:hover { color: var(--w-orange-ink); } .ph-why-page .w-link .elementor-button:hover::after { transform: translateX(5px); } .ph-why-page .w-tone-dark .w-link .elementor-button, .ph-why-page .w-on-image .w-link .elementor-button { color: var(--w-white); } .ph-why-page .w-tone-dark .w-link .elementor-button:hover, .ph-why-page .w-on-image .w-link .elementor-button:hover { color: var(--w-orange); } /* * KEYBOARD FOCUS * Renvo removes every focus ring site-wide with * a, button, input { outline: medium none !important; } base.css:24 * so !important is the only way to answer it. Confined to this page. */ .ph-why-page a:focus-visible, .ph-why-page button:focus-visible, .ph-why-page .elementor-button:focus-visible, .ph-why-page .w-nav__link:focus-visible { outline: 3px solid var(--w-orange) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(245, 144, 31, .28); border-radius: var(--w-r-sm); } .ph-why-page .w-tone-dark a:focus-visible, .ph-why-page .w-tone-dark .elementor-button:focus-visible, .ph-why-page .w-on-image a:focus-visible, .ph-why-page .w-on-image .elementor-button:focus-visible { box-shadow: 0 0 0 6px rgba(255, 255, 255, .22); } /* ------------------------------------------------------------------ images */ .ph-why-page .w-img img { border-radius: var(--w-r-img); display: block; width: 100%; height: auto; } /* the supporting photographs are crops, not full-height portraits */ .ph-why-page .w-quality-section .w-img img, .ph-why-page .w-supply .w-img img { aspect-ratio: 4 / 3; object-fit: cover; } /* ------------------------------------------------------------------- grids */ /* * Elementor lays containers out with flex, and a flex-wrap row of children at * width:25% cannot hold four across once a gap is added. These switch the * container to grid so the column count is exact; the gap still comes from the * Elementor gap control, so spacing stays editable. Children of a .w-grid-* * container therefore carry no width setting. */ .ph-why-page [class*="w-grid-"] { display: grid; } .ph-why-page .w-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-why-page .w-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ph-why-page .w-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ph-why-page .w-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1200px) { .ph-why-page .w-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .ph-why-page .w-grid-3, .ph-why-page .w-grid-4, .ph-why-page .w-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-why-page .w-grid-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .ph-why-page .w-grid-3, .ph-why-page .w-grid-4, .ph-why-page .w-grid-5 { grid-template-columns: minmax(0, 1fr); } } /* =========================================================== 00 NAVIGATOR */ .ph-why-page .w-nav { position: fixed; top: var(--w-hdr-h); left: 0; right: 0; z-index: 500; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--w-line); transform: translateY(-115%); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease; } .ph-why-page .w-nav.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .ph-why-page .w-nav__inner { max-width: 1320px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; /* a literal height, not var(--w-nav-h): wcu.js measures the rendered bar to * set that variable, so reading it back here would be circular */ height: 52px; } .ph-why-page .w-nav__inner::-webkit-scrollbar { display: none; } .ph-why-page .w-nav__link { flex: 0 0 auto; padding: 8px 13px; border-radius: 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--w-muted); white-space: nowrap; position: relative; transition: color .2s ease, background-color .2s ease; } .ph-why-page .w-nav__link:hover { color: var(--w-blue); background: rgba(39, 55, 145, .07); } .ph-why-page .w-nav__link[aria-current="true"] { color: var(--w-blue); background: rgba(39, 55, 145, .09); } .ph-why-page .w-nav__link[aria-current="true"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; background: var(--w-orange); border-radius: 2px; } /* =============================================================== 01 HERO */ .ph-why-page .w-hero { position: relative; background-color: var(--w-blue-ink); background-position: center center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .ph-why-page .w-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 46, .62) 0%, rgba(10, 15, 46, .74) 45%, rgba(10, 15, 46, .94) 100%), linear-gradient(97deg, rgba(16, 26, 70, .82) 0%, rgba(16, 26, 70, .18) 70%); pointer-events: none; } .ph-why-page .w-hero > .e-con-inner { position: relative; z-index: 1; min-height: max(560px, calc(100svh - var(--w-hdr-static))); justify-content: center; } .ph-why-page .w-hero-h1 .elementor-heading-title { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; font-weight: 500; letter-spacing: -.03em; color: var(--w-white); max-width: 14ch; text-wrap: balance; } .ph-why-page .w-hero-claim .elementor-heading-title { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--w-white); max-width: 30ch; } /* the three-part claim reads as a set, not a sentence */ .ph-why-page .w-hero-claim .elementor-heading-title .w-sep { color: var(--w-orange); margin: 0 .35em; font-weight: 400; } .ph-why-page .w-hero-body p { font-size: 1.0625rem; line-height: 1.72; color: rgba(255, 255, 255, .82); max-width: 62ch; } /* ==================================================== 02 TRUST METRICS */ .ph-why-page .w-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ph-why-page .w-metric { border-left: 1px solid var(--w-line); padding-left: var(--w-5); } .ph-why-page .w-metric:first-child { border-left: 0; padding-left: 0; } .ph-why-page .w-metric-value .elementor-heading-title { font-size: clamp(2.125rem, 3.4vw, 3.25rem); line-height: 1; font-weight: 500; letter-spacing: -.03em; color: var(--w-blue); font-variant-numeric: tabular-nums; } .ph-why-page .w-metric-value .elementor-heading-title .w-unit { font-size: .38em; letter-spacing: 0; margin-left: .16em; color: var(--w-orange-ink); } .ph-why-page .w-metric-label .elementor-heading-title { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--w-muted); margin-top: 10px; max-width: 20ch; } .ph-why-page .w-metric-note p { font-size: .8125rem; line-height: 1.6; color: var(--w-muted); font-style: italic; } /* ================================================ 03 SIX REASONS BENTO */ /* * Six cards at three sizes rather than six identical tiles: two feature cards * carry a photograph, four compact cards carry the claim and its evidence. */ .ph-why-page .w-reasons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; } .ph-why-page .w-reason { position: relative; background: var(--w-white); border: 1px solid var(--w-line); border-radius: var(--w-r-card); overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } /* the body column fills the card so each card's link sits on the same line */ .ph-why-page .w-reason > .e-con:last-child { flex-grow: 1; } .ph-why-page .w-reason .w-link { margin-top: auto; padding-top: var(--w-3); } .ph-why-page .w-reason:hover { border-color: rgba(39, 55, 145, .3); box-shadow: 0 18px 44px rgba(16, 26, 70, .1); transform: translateY(-3px); } /* the bento spans, as classes rather than per-element custom CSS so the layout * stays legible in the editor's class field */ .ph-why-page .w-span-2 { grid-column: span 2; } .ph-why-page .w-span-3 { grid-column: span 3; } .ph-why-page .w-span-4 { grid-column: span 4; } .ph-why-page .w-reason-figure figure { margin: 0; line-height: 0; } .ph-why-page .w-reason-figure img { width: 100%; height: 236px; object-fit: cover; border-radius: 0; display: block; transition: transform .6s cubic-bezier(.22, .68, .32, 1); } .ph-why-page .w-reason:hover .w-reason-figure img { transform: scale(1.045); } .ph-why-page .w-reason-num .elementor-heading-title { font-size: .75rem; font-weight: 700; letter-spacing: .18em; color: var(--w-orange-ink); font-variant-numeric: tabular-nums; } .ph-why-page .w-reason-body p { font-size: .9375rem; line-height: 1.7; color: var(--w-body); } /* the evidence line — what backs the claim up */ .ph-why-page .w-evidence ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .ph-why-page .w-evidence ul li { font-size: .75rem; font-weight: 600; letter-spacing: .01em; line-height: 1.35; color: var(--w-blue); background: rgba(39, 55, 145, .07); border: 1px solid rgba(39, 55, 145, .14); border-radius: 100px; padding: 6px 13px; } .ph-why-page .w-tone-dark .w-evidence ul li, .ph-why-page .w-on-image .w-evidence ul li { color: var(--w-white); background: rgba(255, 255, 255, .08); border-color: var(--w-line-dark); } /* the benefit callout — the signature component of this page */ .ph-why-page .w-benefit p { font-size: .9375rem; line-height: 1.6; color: var(--w-ink); font-weight: 500; margin: 0; padding: 14px 0 0 16px; border-left: 3px solid var(--w-orange); position: relative; } .ph-why-page .w-benefit p::before { content: "What this means for you"; display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-orange-ink); margin-bottom: 6px; } .ph-why-page .w-tone-dark .w-benefit p { color: var(--w-white); } .ph-why-page .w-tone-dark .w-benefit p::before { color: var(--w-orange); } /* ============================================ 04 EVIDENCE FEATURE */ .ph-why-page .w-doc { background: rgba(255, 255, 255, .04); border: 1px solid var(--w-line-dark); border-radius: var(--w-r-card); padding: var(--w-4); transition: border-color .3s ease, background-color .3s ease; } .ph-why-page .w-doc:hover { border-color: rgba(245, 144, 31, .45); background: rgba(255, 255, 255, .07); } .ph-why-page .w-doc figure { margin: 0; line-height: 0; } .ph-why-page .w-doc img { width: 100%; height: auto; border-radius: 6px; background: #fff; display: block; } .ph-why-page .w-doc-cap .elementor-heading-title { font-size: .8125rem; font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, .82); margin-top: var(--w-4); } .ph-why-page .w-doc-cap .elementor-heading-title .w-doc-ref { display: block; font-size: .75rem; font-weight: 500; color: rgba(255, 255, 255, .55); margin-top: 4px; font-variant-numeric: tabular-nums; } /* the measured results, as a table rather than a claim */ .ph-why-page .w-datatable table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ph-why-page .w-datatable table, .ph-why-page .w-datatable tr, .ph-why-page .w-datatable th, .ph-why-page .w-datatable td { /* Renvo fills table headers with a solid colour; the table has to read as * data on this section's own dark ground */ background: transparent; border: 0; } .ph-why-page .w-datatable th, .ph-why-page .w-datatable td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--w-line-dark); font-size: .875rem; line-height: 1.45; vertical-align: baseline; } .ph-why-page .w-datatable thead th { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); padding-bottom: 9px; } .ph-why-page .w-datatable tbody th { font-weight: 500; color: rgba(255, 255, 255, .8); } .ph-why-page .w-datatable td { color: var(--w-white); font-weight: 600; } .ph-why-page .w-datatable td:last-child { color: rgba(255, 255, 255, .62); font-weight: 500; } .ph-why-page .w-datatable tbody tr:last-child th, .ph-why-page .w-datatable tbody tr:last-child td { border-bottom: 0; } .ph-why-page .w-verdict p { font-size: .9375rem; line-height: 1.6; color: var(--w-white); background: rgba(245, 144, 31, .12); border: 1px solid rgba(245, 144, 31, .4); border-radius: 10px; padding: 14px 18px; margin: 0; } .ph-why-page .w-verdict p strong { color: var(--w-orange); } /* ============================================ 05 QC WORKFLOW */ .ph-why-page .w-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; } .ph-why-page .w-flow::before, .ph-why-page .w-flow::after { content: ""; position: absolute; top: 21px; left: 12%; right: 12%; height: 2px; border-radius: 2px; } .ph-why-page .w-flow::before { background: var(--w-line); } .ph-why-page .w-flow::after { background: linear-gradient(90deg, var(--w-blue), var(--w-orange)); transform: scaleX(var(--w-progress, 0)); transform-origin: left center; transition: transform .8s cubic-bezier(.22, .68, .32, 1); } .ph-why-page .w-step { position: relative; text-align: center; padding: 0 var(--w-4); } .ph-why-page .w-step-dot .elementor-heading-title { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: var(--w-white); border: 2px solid var(--w-line); display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--w-muted); font-variant-numeric: tabular-nums; position: relative; z-index: 1; transition: border-color .4s ease, background-color .4s ease, color .4s ease, box-shadow .4s ease; } .ph-why-page .w-step.is-in .w-step-dot .elementor-heading-title { border-color: var(--w-blue); background: var(--w-blue); color: var(--w-white); box-shadow: 0 0 0 6px rgba(39, 55, 145, .12); } .ph-why-page .w-step:last-child.is-in .w-step-dot .elementor-heading-title { border-color: var(--w-orange); background: var(--w-orange); color: #1b1200; box-shadow: 0 0 0 6px rgba(245, 144, 31, .18); } .ph-why-page .w-step-title .elementor-heading-title { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--w-ink); margin-top: var(--w-4); } .ph-why-page .w-step-body p { font-size: .875rem; line-height: 1.65; color: var(--w-body); margin-top: 8px; } /* ============================================ 06 PRODUCT DEPTH */ .ph-why-page .w-prod { background: var(--w-white); border: 1px solid var(--w-line); border-radius: var(--w-r-card); overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .ph-why-page .w-prod:hover { border-color: rgba(39, 55, 145, .28); box-shadow: 0 16px 40px rgba(16, 26, 70, .1); transform: translateY(-3px); } .ph-why-page .w-prod-figure { background: var(--w-light); border-bottom: 1px solid var(--w-line); padding: var(--w-5) var(--w-4); } .ph-why-page .w-prod-figure img { width: 100%; height: 96px; object-fit: contain; border-radius: 0; mix-blend-mode: multiply; transition: transform .4s ease; } .ph-why-page .w-prod:hover .w-prod-figure img { transform: scale(1.05); } .ph-why-page .w-prod-spec .elementor-heading-title { font-size: .8125rem; font-weight: 500; line-height: 1.5; color: var(--w-blue); font-variant-numeric: tabular-nums; } /* ZICO swatch strip */ .ph-why-page .w-swatches { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--w-3); } .ph-why-page .w-swatch figure { position: relative; margin: 0; overflow: hidden; border-radius: 8px; line-height: 0; } .ph-why-page .w-swatch img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; border-radius: 0; display: block; transition: transform .45s ease; } .ph-why-page .w-swatch:hover img { transform: scale(1.06); } .ph-why-page .w-swatch .widget-image-caption { position: absolute; left: 7px; bottom: 7px; margin: 0; font-size: .625rem; font-weight: 700; letter-spacing: .07em; line-height: 1.2; color: #171717; background: rgba(255, 255, 255, .93); border-radius: 4px; padding: 3px 7px; } /* ============================================ 07 RELIABLE SUPPLY */ .ph-why-page .w-supply { position: relative; background-color: var(--w-blue-ink); background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .ph-why-page .w-supply::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 46, .9) 0%, rgba(16, 26, 70, .93) 100%); pointer-events: none; } .ph-why-page .w-supply > .e-con-inner { position: relative; z-index: 1; } .ph-why-page .w-pillar { border-top: 2px solid var(--w-line-dark); padding-top: var(--w-5); transition: border-color .3s ease; } .ph-why-page .w-pillar:hover { border-top-color: var(--w-orange); } .ph-why-page .w-pillar-icon .elementor-icon { font-size: 24px; color: var(--w-orange); margin-bottom: var(--w-3); display: inline-block; } /* ============================================ 08 APPLICATIONS */ .ph-why-page .w-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 180px; gap: var(--w-4); } .ph-why-page .w-tile, .ph-why-page .w-tile > .elementor-widget-container { height: 100%; } .ph-why-page .w-tile figure { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: var(--w-r-img); } .ph-why-page .w-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; transition: transform .6s cubic-bezier(.22, .68, .32, 1); } .ph-why-page .w-tile:hover img { transform: scale(1.055); } .ph-why-page .w-tile figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 46, 0) 42%, rgba(10, 15, 46, .84) 100%); pointer-events: none; opacity: .93; transition: opacity .35s ease; } .ph-why-page .w-tile:hover figure::after { opacity: 1; } .ph-why-page .w-tile .widget-image-caption { position: absolute; left: 18px; right: 18px; bottom: 15px; margin: 0; z-index: 2; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--w-white); line-height: 1.35; text-align: left; text-shadow: 0 1px 10px rgba(10, 15, 46, .55); } /* two landscape tiles over three portrait tiles */ .ph-why-page .w-tile-wide { grid-column: span 3; grid-row: span 2; } .ph-why-page .w-tile-tall { grid-column: span 2; grid-row: span 2; } /* ============================================ 09 PARTNERSHIP */ .ph-why-page .w-support { border-top: 2px solid var(--w-line); padding-top: var(--w-5); transition: border-color .3s ease; } .ph-why-page .w-support:hover { border-top-color: var(--w-blue); } .ph-why-page .w-support-icon .elementor-icon { font-size: 22px; color: var(--w-blue); margin-bottom: var(--w-3); display: inline-block; } .ph-why-page .w-logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--w-3); } .ph-why-page .w-logo { background: var(--w-white); border: 1px solid var(--w-line); border-radius: 10px; padding: var(--w-4) var(--w-3); display: flex; align-items: center; justify-content: center; min-height: 96px; transition: border-color .3s ease, box-shadow .3s ease; } .ph-why-page .w-logo:hover { border-color: rgba(39, 55, 145, .26); box-shadow: 0 12px 30px rgba(16, 26, 70, .08); } .ph-why-page .w-logo img { max-height: 48px; width: auto; max-width: 100%; object-fit: contain; border-radius: 4px; filter: grayscale(1) contrast(1.08); opacity: .84; transition: filter .35s ease, opacity .35s ease; } .ph-why-page .w-logo:hover img { filter: grayscale(0); opacity: 1; } /* ============================================ 10 GROWTH CHART */ /* * A column chart rather than a timeline: the height of each column is driven by * --w-bar, set from the authored figure, so the shape is data and not decoration. */ .ph-why-page .w-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: var(--w-5); border-bottom: 2px solid var(--w-line); padding-bottom: 0; } .ph-why-page .w-col { display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-height: 340px; } .ph-why-page .w-col-val .elementor-heading-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--w-ink); font-variant-numeric: tabular-nums; text-align: center; margin-bottom: 10px; } .ph-why-page .w-col-val .elementor-heading-title .w-unit { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--w-muted); margin-top: 3px; } /* * The bar is an empty Container carrying a w-bar-N class. Its height is the * datum; the count above it and the year below it carry the text, so the bar * needs no content and no accessible name. * * The height is set in pixels, not per cent. A percentage height on a flex item * only resolves when the flex container has a *definite* height, and .w-col has * min-height rather than height — so height:12% fell back to auto and every bar * collapsed to its padding. --w-bar stays because the mobile layout uses it as a * width, where the grid cell it sits in does give a definite basis. */ .ph-why-page .w-col-bar { height: var(--w-bar-h, 6px); padding: 0; background: linear-gradient(180deg, var(--w-blue) 0%, #1b2a6e 100%); border-radius: 8px 8px 0 0; transform: scaleY(var(--w-grow, 0)); transform-origin: bottom center; transition: transform .9s cubic-bezier(.22, .68, .32, 1); } /* machines / 50 * 260px */ .ph-why-page .w-bar-12 { --w-bar: 12; --w-bar-h: 31px; } .ph-why-page .w-bar-26 { --w-bar: 26; --w-bar-h: 68px; } .ph-why-page .w-bar-34 { --w-bar: 34; --w-bar-h: 88px; } .ph-why-page .w-bar-50 { --w-bar: 50; --w-bar-h: 130px; } .ph-why-page .w-bar-100 { --w-bar: 100; --w-bar-h: 260px; } .ph-why-page .w-col--plan .w-col-bar { background: linear-gradient(180deg, var(--w-orange) 0%, #d97706 100%); } .ph-why-page .w-col-year .elementor-heading-title { font-size: 1rem; font-weight: 600; letter-spacing: .02em; color: var(--w-ink); text-align: center; padding-top: var(--w-4); font-variant-numeric: tabular-nums; } .ph-why-page .w-col-note .elementor-heading-title { display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a4a00; background: rgba(245, 144, 31, .16); border: 1px solid rgba(245, 144, 31, .38); border-radius: 100px; padding: 4px 10px; margin: 8px auto 0; } .ph-why-page .w-chart-legend p { font-size: .8125rem; line-height: 1.6; color: var(--w-muted); } /* ============================================ 11 TRUST STACK + CTA */ .ph-why-page .w-stack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 6px; } .ph-why-page .w-stack ul li { font-size: .875rem; font-weight: 600; letter-spacing: .01em; color: var(--w-white); background: rgba(255, 255, 255, .08); border: 1px solid var(--w-line-dark); border-radius: 100px; padding: 10px 18px; position: relative; } .ph-why-page .w-stack ul li + li::before { content: "+"; color: var(--w-orange); font-weight: 500; margin-right: 14px; margin-left: -4px; } .ph-why-page .w-stack-result .elementor-heading-title { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--w-orange); text-align: center; } .ph-why-page .w-cta { position: relative; background-color: var(--w-blue-ink); background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .ph-why-page .w-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(102deg, rgba(10, 15, 46, .96) 0%, rgba(16, 26, 70, .9) 55%, rgba(16, 26, 70, .84) 100%); pointer-events: none; } .ph-why-page .w-cta > .e-con-inner { position: relative; z-index: 1; } .ph-why-page .w-cta-h2 .elementor-heading-title { font-size: clamp(2.125rem, 3.8vw, 3.5rem); line-height: 1.08; font-weight: 500; letter-spacing: -.025em; color: var(--w-white); max-width: 20ch; } .ph-why-page .w-cta-body p { font-size: 1.0625rem; line-height: 1.72; color: rgba(255, 255, 255, .82); max-width: 56ch; } .ph-why-page .w-contact-item { border-top: 1px solid var(--w-line-dark); padding-top: var(--w-4); } .ph-why-page .w-contact-icon .elementor-icon { font-size: 18px; color: var(--w-orange); } .ph-why-page .w-contact-label .elementor-heading-title { font-size: .6875rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 6px; } .ph-why-page .w-contact-value p { font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0; } .ph-why-page .w-contact-value a { color: var(--w-white); border-bottom: 1px solid rgba(255, 255, 255, .3); transition: color .25s ease, border-color .25s ease; } .ph-why-page .w-contact-value a:hover { color: var(--w-orange); border-color: var(--w-orange); } /* ================================================== reveal on scroll */ .ph-why-page .w-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22, .68, .32, 1), transform .7s cubic-bezier(.22, .68, .32, 1); will-change: opacity, transform; } .ph-why-page .w-reveal.is-in { opacity: 1; transform: none; } /* if the script never runs, nothing may stay invisible */ .ph-why-page.ph-why-no-js .w-reveal { opacity: 1; transform: none; } .ph-why-page.ph-why-no-js .w-col-bar { transform: scaleY(1); } .ph-why-page.ph-why-no-js .w-flow::after { transform: scaleX(1); } /* =============================================================== TABLET */ @media (max-width: 1200px) { .ph-why-page .w-bento { grid-auto-rows: 156px; } .ph-why-page .w-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ph-why-page .w-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .ph-why-page { --w-nav-h: 0px; } /* the navigator would compete with the site header on small screens */ .ph-why-page .w-nav { display: none; } .ph-why-page .w-h2 .elementor-heading-title { max-width: 28ch; } .ph-why-page .w-hero-h1 .elementor-heading-title { max-width: 18ch; } .ph-why-page .w-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--w-6) var(--w-5); } .ph-why-page .w-metric:nth-child(3) { border-left: 0; padding-left: 0; } .ph-why-page .w-reasons { grid-template-columns: minmax(0, 1fr); } .ph-why-page .w-reason--feature, .ph-why-page .w-reason--compact { grid-column: span 1; } /* the workflow becomes a vertical list */ .ph-why-page .w-flow { grid-template-columns: minmax(0, 1fr); } .ph-why-page .w-flow::before, .ph-why-page .w-flow::after { left: 21px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; } .ph-why-page .w-flow::after { background: linear-gradient(180deg, var(--w-blue), var(--w-orange)); transform: scaleY(var(--w-progress, 0)); transform-origin: center top; } .ph-why-page .w-step { text-align: left; padding: 0 0 var(--w-6) 68px; position: relative; } .ph-why-page .w-step:last-child { padding-bottom: 0; } /* Elementor gives every widget position:relative, so an absolutely positioned * heading would anchor to its own widget wrapper — which already sits inside * the step's 68px indent. The widget itself is taken out of flow instead. */ .ph-why-page .w-step-dot { position: absolute; left: 0; top: 0; width: 44px; } .ph-why-page .w-step-dot .elementor-heading-title { margin: 0; } .ph-why-page .w-step-title .elementor-heading-title { margin-top: 6px; } .ph-why-page .w-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } .ph-why-page .w-tile-wide { grid-column: span 2; grid-row: span 2; } .ph-why-page .w-tile-tall { grid-column: span 1; grid-row: span 2; } .ph-why-page .w-chart { gap: var(--w-3); } .ph-why-page .w-col { min-height: 268px; } .ph-why-page .w-bar-12 { --w-bar-h: 24px; } .ph-why-page .w-bar-26 { --w-bar-h: 52px; } .ph-why-page .w-bar-34 { --w-bar-h: 68px; } .ph-why-page .w-bar-50 { --w-bar-h: 100px; } .ph-why-page .w-bar-100 { --w-bar-h: 200px; } } /* =============================================================== MOBILE */ @media (max-width: 767px) { .ph-why-page .w-h2 .elementor-heading-title, .ph-why-page .w-h2-wide .elementor-heading-title, .ph-why-page .w-hero-h1 .elementor-heading-title, .ph-why-page .w-cta-h2 .elementor-heading-title, .ph-why-page .w-hero-claim .elementor-heading-title { max-width: none; } .ph-why-page .w-hero > .e-con-inner { min-height: max(500px, calc(100svh - var(--w-hdr-static))); } .ph-why-page .w-hero-h1 .elementor-heading-title { font-size: clamp(2rem, 10vw, 2.75rem); line-height: 1.08; } .ph-why-page .w-hero-claim .elementor-heading-title { font-size: 1.125rem; } .ph-why-page .w-hero-body p { font-size: 1rem; } .ph-why-page .w-hero-cta .elementor-widget, .ph-why-page .w-cta-row .elementor-widget { width: 100%; } .ph-why-page .w-hero-cta .elementor-button, .ph-why-page .w-cta-row .elementor-button { width: 100%; justify-content: center; } .ph-why-page .w-metric { border-left: 0; padding-left: 0; } .ph-why-page .w-metric-value .elementor-heading-title { font-size: 1.875rem; } .ph-why-page .w-metric-label .elementor-heading-title { font-size: .6875rem; letter-spacing: .05em; } .ph-why-page .w-reason-figure img { height: 190px; } .ph-why-page .w-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ph-why-page .w-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 124px; } .ph-why-page .w-tile .widget-image-caption { left: 12px; right: 12px; bottom: 11px; font-size: .625rem; letter-spacing: .09em; } .ph-why-page .w-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-why-page .w-logo { min-height: 88px; } .ph-why-page .w-logo img { max-height: 40px; } /* the chart turns into rows so the labels stay readable */ .ph-why-page .w-chart { grid-template-columns: minmax(0, 1fr); border-bottom: 0; gap: var(--w-4); } .ph-why-page .w-col { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 6px var(--w-4); min-height: 0; border-bottom: 1px solid var(--w-line); padding-bottom: var(--w-4); } .ph-why-page .w-col-year { grid-column: 1; grid-row: 1; } .ph-why-page .w-col-bar { grid-column: 2; grid-row: 1; } .ph-why-page .w-col-val { grid-column: 3; grid-row: 1; } .ph-why-page .w-col-note { grid-column: 2 / -1; grid-row: 2; } .ph-why-page .w-col-year .elementor-heading-title { padding-top: 0; text-align: left; } .ph-why-page .w-col-bar { height: 12px; width: calc(var(--w-bar, 0) * 1%); min-width: 8px; border-radius: 0 6px 6px 0; transform: scaleX(var(--w-grow, 0)); transform-origin: left center; } .ph-why-page .w-col-val .elementor-heading-title { text-align: right; margin-bottom: 0; font-size: .9375rem; } .ph-why-page .w-col-val .elementor-heading-title .w-unit { display: inline; margin-left: .3em; } .ph-why-page .w-col-note .elementor-heading-title { margin: 0; } .ph-why-page .w-datatable th, .ph-why-page .w-datatable td { font-size: .8125rem; padding: 9px 8px 9px 0; } .ph-why-page .w-stack ul { justify-content: flex-start; } .ph-why-page .w-stack ul li { font-size: .8125rem; padding: 8px 14px; } } @media (max-width: 380px) { .ph-why-page .w-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--w-5) var(--w-4); } .ph-why-page .w-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ph-why-page .w-bento { grid-auto-rows: 112px; } } /* ================================================== reduced motion */ @media (prefers-reduced-motion: reduce) { .ph-why-page .w-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .ph-why-page .w-flow::after, .ph-why-page .w-col-bar, .ph-why-page .w-nav { transition: none; } .ph-why-page .w-btn .elementor-button:hover, .ph-why-page .w-reason:hover, .ph-why-page .w-prod:hover { transform: none; } .ph-why-page .w-tile:hover img, .ph-why-page .w-swatch:hover img, .ph-why-page .w-reason:hover .w-reason-figure img, .ph-why-page .w-prod:hover .w-prod-figure img { transform: none; } .ph-why-page .w-link .elementor-button:hover::after { transform: none; } }