/* ey-assets build 2026-07-14 23:17 */
:root { --color-forest: #1E3A2A; --color-ivory: #F6F1E7; --color-bronze: #A9812F; --color-bronze-hover: #9B772B; --color-bronze-deep: #85661F; --color-bronze-deep-hover: #6F551A; --color-bronze-bright: #C9A45C; --color-ink: #22302A; --color-hairline: rgba(30, 58, 42, 0.15); --color-hairline-ivory: rgba(246, 241, 231, 0.18); --color-muted: rgba(34, 48, 42, 0.72); --color-muted-ivory: rgba(246, 241, 231, 0.72); --font-heading: 'Fraunces', 'Playfair Display', serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --text-display: 72px; --leading-display: 1.05; --text-h1: 44px; --leading-h1: 1.1; --text-h2: 30px; --leading-h2: 1.2; --text-h3: 20px; --leading-h3: 1.3; --text-body: 18px; --leading-body: 1.55; --text-small: 14px; --leading-small: 1.45; --text-label: 13px; --tracking-label: 0.06em; --text-button: 17px; --spacing-unit: 4px; --section-gap: 110px; --element-gap: 24px; --card-padding: 20px; --page-max-width: 1280px; --radius-lg: 8px; --radius-pill: 9999px; --ease: cubic-bezier(0.625, 0.05, 0, 1); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink); background: var(--color-ivory); font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; border-radius: var(--radius-lg); } a { color: inherit; } h1, h2, .display { font-family: var(--font-heading); font-weight: 600; color: var(--color-forest); font-optical-sizing: auto; } h1 { font-size: var(--text-h1); line-height: var(--leading-h1); } h2 { font-size: var(--text-h2); line-height: var(--leading-h2); } h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-h3); line-height: var(--leading-h3); color: var(--color-forest); } .display { font-size: clamp(42px, 6.6vw, 92px); line-height: 1.02; letter-spacing: -0.02em; } .display em, .display i { font-style: italic; font-weight: 560; } p + p { margin-top: 16px; } h1, h2, h3, .intro-statement { text-wrap: balance; } p { text-wrap: pretty; } .small { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-muted); } .kicker { display: block; font-family: var(--font-body); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); } .container { max-width: var(--page-max-width); margin-inline: auto; padding-inline: 32px; } .site-nav { position: sticky; top: 0; z-index: 50; background: var(--color-ivory); padding-block: 16px; border-bottom: 1px solid transparent; transition: padding 0.2s var(--ease), border-color 0.2s var(--ease); } .site-nav.is-scrolled { padding-block: 10px; border-bottom-color: var(--color-hairline); } .nav-inner { max-width: var(--page-max-width); margin-inline: auto; padding-inline: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .wordmark { font-family: var(--font-heading); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--color-forest); text-decoration: none; white-space: nowrap; font-optical-sizing: auto; } .dot { color: var(--color-bronze); } .wordmark-mark { display: inline-block; width: 32px; height: 32px; border-radius: 0; vertical-align: middle; margin-right: 10px; margin-top: -3px; } .nav-pill { display: flex; align-items: center; background: var(--color-forest); border-radius: var(--radius-pill); padding: 7px 12px; gap: 4px; } .nav-pill a { font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ivory); text-decoration: none; padding: 4px 12px; border-radius: var(--radius-pill); white-space: nowrap; transition: color 0.2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .nav-pill a:hover { color: var(--color-bronze-bright); } } .nav-pill a[aria-current="page"] { color: var(--color-bronze-bright); } .nav-cta { flex-shrink: 0; } .btn { display: inline-block; font-family: var(--font-body); font-size: var(--text-button); font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 160ms var(--ease-out); text-align: center; } .btn:active { transform: scale(0.97); } .btn:disabled { pointer-events: none; } .btn-primary { background: var(--color-bronze-deep); color: var(--color-ivory); border: none; border-radius: var(--radius-pill); padding: 16px 32px; } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--color-bronze-deep-hover); } } .btn-primary.btn-nav { padding: 12px 24px; font-size: 15px; } .btn-wide { width: 50%; padding-block: 10px; } .btn-ghost { background: transparent; color: var(--color-forest); border: 1px solid var(--color-forest); border-radius: var(--radius-lg); padding: 12px 28px; } @media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: var(--color-forest); color: var(--color-ivory); } } .band .btn-ghost, .btn-ghost-ivory { background: transparent; color: var(--color-ivory); border: 1px solid var(--color-ivory); border-radius: var(--radius-lg); padding: 12px 28px; } @media (hover: hover) and (pointer: fine) { .band .btn-ghost:hover, .btn-ghost-ivory:hover { background: var(--color-ivory); color: var(--color-forest); } } .link-arrow { font-size: var(--text-button); font-weight: 600; color: var(--color-bronze-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .link-arrow::after { content: "\2192"; display: inline-block; margin-left: 8px; text-decoration: none; transition: transform 0.3s var(--ease-out); } .band .link-arrow { color: var(--color-bronze-bright); } @media (hover: hover) and (pointer: fine) { .link-arrow:hover { color: var(--color-bronze-deep-hover); } .band .link-arrow:hover { color: var(--color-ivory); } .link-arrow:hover::after { transform: translateX(4px); } } .link-inline { color: var(--color-bronze-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .band .link-inline { color: var(--color-bronze-bright); } @media (hover: hover) and (pointer: fine) { .link-inline:hover { color: var(--color-bronze-deep-hover); } .band .link-inline:hover { color: var(--color-ivory); } } main > * + * { margin-top: var(--section-gap); } main { padding-bottom: var(--section-gap); } main:has(> .band:last-child) { padding-bottom: 0; } main > .cta-close { margin-top: 64px; } main > .gap-tight { margin-top: 40px; } main > .gap-80 { margin-top: calc(var(--section-gap) * 0.8); } main > .gap-70 { margin-top: calc(var(--section-gap) * 0.7); } main.tight-end { padding-bottom: 64px; } .band { background: var(--color-forest); color: var(--color-ivory); padding-block: 96px; } .band-bronze { background: var(--color-bronze-deep); } .band-tight { padding-block: 40px; } .band-bronze .btn-primary { background: var(--color-ivory); color: var(--color-bronze-deep); } @media (hover: hover) and (pointer: fine) { .band-bronze .btn-primary:hover { background: var(--color-forest); color: var(--color-ivory); } } .band h1, .band h2, .band h3, .band .display { color: var(--color-ivory); } .band p { color: var(--color-ivory); } .band .muted, .band .small { color: var(--color-muted-ivory); } .band .kicker { color: var(--color-muted-ivory); } .hairline { border: none; border-top: 1px solid var(--color-hairline); } .band .hairline { border-top-color: var(--color-hairline-ivory); } .hero { padding-top: 96px; } .hero .kicker { margin-bottom: 24px; color: var(--color-forest); } .hero-headline { max-width: 1100px; } .hero-sub { font-size: 20px; line-height: 1.5; max-width: 720px; margin-top: 28px; color: var(--color-ink); } .hero-actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .giant-wordmark { font-family: var(--font-heading); font-weight: 500; color: var(--color-forest); font-size: 16.4vw; line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap; text-align: center; user-select: none; font-optical-sizing: auto; } .giant-wordmark .flip { font-style: italic; } .giant-wordmark span { white-space: pre; } .hero-wordmark { margin-top: 88px; overflow: hidden; padding-bottom: 3vw; margin-bottom: -3vw; } .row { display: grid; grid-template-columns: 280px 1fr; gap: var(--element-gap); align-items: start; } .row + .row { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--color-hairline); } .band .row + .row { border-top-color: var(--color-hairline-ivory); } .row-label .kicker { color: var(--color-forest); } .band .row-label .kicker { color: var(--color-bronze-bright); } .row-body { max-width: 720px; } .row-body h2 { margin-bottom: 20px; } .row-body .btn, .row-body .link-arrow { margin-top: 28px; display: inline-block; } .cta-block { text-align: center; } .cta-block h2 { max-width: 640px; margin-inline: auto; } .cta-block p { max-width: 600px; margin-inline: auto; margin-top: 20px; } .cta-block .btn { margin-top: 36px; } .card { background: var(--color-ivory); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; align-items: flex-start; } .card h3 { margin-bottom: 16px; } .card .btn { margin-top: auto; } .card p { margin-bottom: 28px; } .doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--element-gap); } .doors .kicker { margin-bottom: 12px; } .doors .card { transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out); } .doors .card h3, .doors .card p { transition: color 0.5s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .doors .card:hover { background: var(--color-forest); border-color: var(--color-forest); } .doors .card:hover h3, .doors .card:hover p { color: var(--color-ivory); } .doors .card:hover .btn-ghost { color: var(--color-ivory); border-color: var(--color-ivory); } .doors .card:hover .btn-ghost:hover { background: var(--color-ivory); color: var(--color-forest); } } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--element-gap); margin-block: 48px; } .stat-figure { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h1); line-height: var(--leading-h1); color: var(--color-bronze); font-optical-sizing: auto; } .stat-label { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-muted); margin-top: 8px; max-width: 260px; } .band .stat-label { color: var(--color-muted-ivory); } .stats-centered .stat { text-align: center; } .stats-centered .stat-label { margin-inline: auto; } .badge { display: inline-block; font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; border-radius: var(--radius-pill); padding: 4px 12px; border: 1px solid var(--color-forest); color: var(--color-forest); } .band .badge { border-color: var(--color-ivory); color: var(--color-ivory); } .form-grid { display: grid; gap: 24px; max-width: 640px; } .field label { display: block; font-size: 16px; font-weight: 600; color: var(--color-forest); margin-bottom: 10px; line-height: 1.4; } .field .req { color: var(--color-bronze-deep); } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 17px; color: var(--color-ink); background: var(--color-ivory); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 16px 24px; transition: border-color 0.2s var(--ease-out); appearance: none; } .field select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E3A2A' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; } .field input::placeholder, .field textarea::placeholder { color: var(--color-muted); } .field select:has(option[value=""]:checked) { color: var(--color-muted); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-forest); } .form-note { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-muted); border-left: 1px solid var(--color-hairline); padding-left: 20px; } .form-note a { color: var(--color-bronze-deep); } .form-grid .btn { width: 100%; } .ba-form-head { text-align: center; margin-bottom: 32px; } .ba-form-head h2 { font-size: clamp(30px, 4.4vw, 40px); line-height: 1.12; } .ba-form-sub { margin-top: 14px; font-size: 18px; color: var(--color-muted); max-width: 540px; margin-inline: auto; } .form-section-head { margin-top: 12px; padding-top: 32px; border-top: 1px solid var(--color-hairline); text-align: center; } .form-section-head h3 { font-size: 20px; color: var(--color-forest); } .ba-form-note { border-left: 0; padding-left: 0; text-align: center; max-width: 720px; margin-inline: auto; } main .form-grid { margin-inline: auto; } .form-submitted-note { opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .form-submitted-note.is-in { opacity: 1; transform: none; } .disclaimer-box { border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: var(--card-padding); font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-muted); max-width: 860px; } .site-footer { background: var(--color-forest); color: var(--color-ivory); overflow: hidden; } main:has(> .band:last-child) + .site-footer { margin-top: 0; border-top: 1px solid var(--color-hairline-ivory); } .footer-wordmark-wrap { padding-top: 80px; margin-inline: -8px; } .footer-wordmark-wrap .giant-wordmark { color: var(--color-ivory); font-size: 17.2vw; margin-bottom: -0.06em; } .footer-inner { padding-block: 80px; } .footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .footer-cta p { max-width: 560px; font-size: var(--text-h3); line-height: var(--leading-h3); } .footer-inner .hairline { margin-block: 56px; } .footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; } .footer-col .kicker { color: var(--color-muted-ivory); margin-bottom: 16px; } .footer-col ul { list-style: none; } .footer-col li + li { margin-top: 8px; } .footer-col a { font-size: var(--text-small); color: var(--color-ivory); text-decoration: none; transition: color 0.2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--color-bronze-bright); } } .footer-brand .wordmark { font-size: 30px; color: var(--color-ivory); } .footer-brand p { font-size: var(--text-small); color: var(--color-muted-ivory); margin-top: 12px; max-width: 320px; } .footer-lockup { display: flex; align-items: center; gap: 18px; } .footer-lockup img { width: 76px; height: 76px; border-radius: 0; flex: none; } .footer-lockup p { margin-top: 6px; } .footer-legal { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--color-hairline-ivory); } .footer-legal p { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-muted-ivory); max-width: 860px; } .footer-legal p + p { margin-top: 12px; } .footer-v2 .footer-top { padding-block: 64px 0; } .footer-v2 .footer-wordmark-wrap { padding-top: 48px; } .footer-v2 .footer-bottom { padding: 62px 11.8vw 0; } .footer-v2 .footer-bottom > .kicker { color: var(--color-muted-ivory); margin-bottom: 20px; } .footer-nav-row { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; } .footer-nav-row a { font-size: 17px; color: var(--color-ivory); text-decoration: none; transition: color 0.2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .footer-nav-row a:hover { color: var(--color-bronze-bright); } } .footer-v2 .footer-legal { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-hairline-ivory); text-align: center; } .footer-v2 .footer-legal p { margin-inline: auto; } .footer-v2 .footer-legal a { color: var(--color-ivory); text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .footer-v2 .footer-legal a:hover { color: var(--color-bronze-bright); } } .reveal { transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .js .reveal { opacity: 0; transform: translateY(12px); } .js .reveal.is-in { opacity: 1; transform: none; } [data-reveal="words"] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; } [data-reveal="words"] .wi { display: inline-block; transition: transform 0.65s var(--ease); } .js [data-reveal="words"]:not(.is-in) .wi { transform: translateY(112%); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .js .entrance { opacity: 1; transform: none; transition: none; } [data-reveal="words"] .wi { transform: none !important; transition: none; } .link-arrow::after { transition: none; } .btn:active { transform: none; } .form-submitted-note { transform: none; } .hero-bg { animation: none; } .giant-wordmark .lift { transform: none; transition: none; } } .ph { background: #D8D3C8; border-radius: var(--radius-lg); position: relative; overflow: hidden; } .ph::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(34, 48, 42, 0.4); text-align: center; padding: 8px; } img.ph, video.ph { width: 100%; object-fit: cover; display: block; } img.ph-contain { object-fit: contain; background: transparent; } .ph-portrait { aspect-ratio: 3 / 4; } .ph-landscape { aspect-ratio: 16 / 10; } .ph-square { aspect-ratio: 1; } .ph-circle { aspect-ratio: 1; border-radius: 50%; } .band .ph { background: #2C4636; } .band .ph::after { color: rgba(246, 241, 231, 0.4); } .hero-home { position: relative; overflow: hidden; padding-top: 64px; padding-bottom: 48px; min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); display: flex; flex-direction: column; justify-content: space-between; } .hero-home .giant-wordmark { font-size: 18.5vw; } .hero-home .hero-wordmark { overflow: hidden; margin-top: 0; } .hero-foot { display: flex; justify-content: center; } .hero-home .container { width: 100%; } .intro { display: none; } .js .intro { position: fixed; inset: 0; z-index: 200; background: var(--color-ivory); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s var(--ease); } .intro.done { opacity: 0; pointer-events: none; } .intro-mask { overflow: hidden; padding-block: 0.06em; } .intro-mark { display: flex; align-items: center; font-family: var(--font-heading); font-weight: 500; font-size: 11vw; line-height: 1; letter-spacing: -0.02em; color: var(--color-forest); white-space: nowrap; transform: translateY(115%); transition: transform 0.7s var(--ease); font-optical-sizing: auto; } .intro-mark.in { transform: none; } .intro-slot { position: relative; display: inline-block; width: 0; height: 0.82em; margin-inline: 0; overflow: hidden; transition: width 0.55s var(--ease), margin 0.55s var(--ease); } .intro-slot.open { width: 0.82em; margin-inline: 0.05em; } .intro-img { position: absolute; inset: 0; opacity: 0; } .intro-img.active { opacity: 1; } .intro-img.i1 { background: #C6BFB0 url('https://edwardyeo.com/wp-content/ey-assets/edward-yeo-teaching-web.jpg') center/cover no-repeat; } .intro-img.i2 { background: #B8B09F url('https://edwardyeo.com/wp-content/ey-assets/edward-yeo-car-web.jpg') center/cover no-repeat; } .intro-img.i3 { background: linear-gradient(180deg, rgba(18, 26, 21, 0.45) 0%, rgba(18, 26, 21, 0.15) 45%, rgba(18, 26, 21, 0.6) 100%), #D8D3C8 url('https://edwardyeo.com/wp-content/ey-assets/edward-yeo-hero-web.jpg') center/cover no-repeat; } .intro-zoom { position: fixed; z-index: 210; background: linear-gradient(180deg, rgba(18, 26, 21, 0.45) 0%, rgba(18, 26, 21, 0.15) 45%, rgba(18, 26, 21, 0.6) 100%), #D8D3C8 url('https://edwardyeo.com/wp-content/ey-assets/edward-yeo-hero-web.jpg') center/cover no-repeat; transition: left 0.85s var(--ease), top 0.85s var(--ease), width 0.85s var(--ease), height 0.85s var(--ease), opacity 0.5s var(--ease); } body.intro-lock { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .intro { display: none; } } .entrance { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .entrance { opacity: 0; transform: translateY(24px); } .js body.is-loaded .entrance { opacity: 1; transform: none; } .entrance-1 { transition-delay: 0.1s; } .entrance-2 { transition-delay: 0.25s; } .entrance-3 { transition-delay: 0.55s; } .giant-wordmark .lift { display: inline-block; transform: translateY(140%); transition: transform 0.9s var(--ease); } body.is-loaded .giant-wordmark .lift { transform: none; } @keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } } .hero-bg { animation: heroZoom 1.6s var(--ease) backwards; } .chapter { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .chapter.flip .chapter-media { order: 2; } .chapter-num { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 96px; line-height: 1; color: var(--color-bronze); margin-bottom: 20px; font-optical-sizing: auto; } .chapter-body h2 { margin-bottom: 20px; } .chapter-body .btn, .chapter-body .link-arrow { margin-top: 28px; display: inline-block; } .media-compact .chapter-media .ph { width: min(260px, 100%); margin-inline: auto; } .split-services { background: var(--color-forest); padding-top: 48px; } .split-head { text-align: center; padding-inline: 24px; margin-bottom: 48px; } .split-head h2 { color: var(--color-ivory); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 12px; } .split-panels { display: grid; grid-template-columns: 1fr 1fr; } .split-panel { padding: 25px clamp(24px, 5vw, 96px) 24px; transition: background-color 0.5s var(--ease-out); } .split-panel + .split-panel { border-left: 1px solid var(--color-hairline-ivory); } .split-panel-inner { max-width: 620px; margin-inline: auto; } .split-panel h3 { font-family: var(--font-heading); font-weight: 600; font-size: 36px; line-height: 1.15; text-align: center; color: var(--color-ivory); margin-bottom: 8px; font-optical-sizing: auto; } .split-panel .split-sub { text-align: center; color: var(--color-muted-ivory); margin-bottom: 32px; } .split-panel p { color: var(--color-ivory); } .split-panel .ph { width: min(420px, 100%); margin-inline: auto; margin-bottom: 32px; } .split-panel h3, .split-panel p { transition: color 0.5s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .split-panel:hover { background: var(--color-ivory); } .split-panel:hover h3 { color: var(--color-forest); } .split-panel:hover p { color: var(--color-ink); } .split-panel:hover .split-sub { color: var(--color-muted); } } h2.svc-title { font-size: 36px; line-height: 1.15; margin-bottom: 8px; } .svc-sub { color: var(--color-muted); } .chapter-body .svc-sub { margin-bottom: 24px; } .values-head { text-align: center; margin-bottom: 56px; } .values-head p { max-width: 740px; margin-inline: auto; margin-top: 16px; color: var(--color-muted); } .band .values-head p { color: var(--color-muted-ivory); } .ethic-backdrop { position: relative; overflow: hidden; } .ethic-bg { position: absolute; inset: 0; z-index: 0; } .ethic-bg .ph { width: 100%; height: 100%; border-radius: 0; background: #2C4636; } .ethic-bg .ph::after { color: rgba(246, 241, 231, 0.35); } .ethic-backdrop > .container { position: relative; z-index: 1; } .trait-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .trait-card { position: relative; display: flex; } .trait-card::before { content: ""; position: absolute; inset: 0; transform: translateY(10px); border-radius: 16px; background: var(--color-bronze); } .trait-inner { position: relative; flex: 1; background: var(--color-ivory); border-radius: 16px; padding: 32px 28px; min-height: 460px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transition: transform 0.5s var(--ease-out); } .trait-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--color-forest); } .trait-card p { color: var(--color-ink); } .trait-card p + p { margin-top: 12px; } .ethic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--element-gap); } .ethic-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 580px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 28px; } .ethic-media { position: absolute; inset: -12% 0; z-index: 0; } .ethic-media .ph { width: 100%; height: 100%; border-radius: 0; background: #4A5A50; } .ethic-media .ph::after { color: rgba(246, 241, 231, 0.45); } .ethic-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(18, 26, 21, 0.62) 0%, rgba(18, 26, 21, 0.24) 45%, rgba(18, 26, 21, 0.8) 100%); } .ethic-top, .ethic-body { position: relative; z-index: 2; } .ethic-top { text-align: center; } .ethic-num { display: block; font-size: var(--text-small); font-weight: 600; letter-spacing: var(--tracking-label); color: rgba(246, 241, 231, 0.8); margin-bottom: 10px; } .ethic-top h3 { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--color-ivory); } .ethic-body p { color: var(--color-ivory); font-size: 16px; line-height: 1.5; } .ethic-body p + p { margin-top: 12px; } .band-values { padding-block: 56px; } .values-foot { text-align: center; margin-top: 48px; } .drift-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--element-gap); } .drift-grid br, .gallery-wall br, .nav-pill br, .footer-nav-row br, .float-canvas br, .carousel-set br, .row-label br { display: none; } .drift-grid .drift-item { transition: transform 0.5s var(--ease-out), border-color 0.2s var(--ease-out); } .float-scene { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } .float-item { position: absolute; } .float-item .ph { width: 100%; height: 100%; border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%; position: relative; z-index: 1; } .float-item:nth-child(even) .ph { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; } .float-item::before { content: ""; position: absolute; inset: 0; transform: translate(12px, 14px); border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%; background: var(--color-bronze); } .float-item:nth-child(even)::before { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; } .fi-2::before { background: var(--color-forest); } .float-item { transition: transform 0.7s var(--ease-out); } @media (min-width: 961px) { .float-canvas { position: relative; min-height: 560px; } .fi-1 { width: 340px; height: 340px; left: 0; top: 150px; } .fi-2 { width: 210px; height: 210px; left: 330px; top: 30px; } .fi-3 { width: 170px; height: 170px; left: 400px; top: 300px; } .fi-4 { width: 130px; height: 130px; left: 150px; top: 0; } } @media (prefers-reduced-motion: reduce) { .float-item { animation: none; } } .gallery-wall div.ph > img { width: 100%; height: 100%; object-fit: cover; display: block; } .fix-top > img { object-position: center top; } .fix-zoom-lg > img { transform: scale(1.9); object-position: center 60%; } .fix-zoom-sm > img { transform: scale(1.35); object-position: center 55%; } .fix-zoom-md > img { transform: scale(1.6); object-position: center 62%; } img.fix-focus-right { object-position: 82% center; } .gallery-wall { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; grid-auto-flow: dense; gap: var(--element-gap); margin-block: 48px 64px; } .gallery-wall .ph { width: 100%; height: 100%; } .gw-c2 { grid-column: span 2; } .gw-r2 { grid-row: span 2; } .gw-r3 { grid-row: span 3; } .awards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--element-gap); margin-top: 48px; } .award-card { border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: var(--card-padding); } .award-card .ph { margin-bottom: 16px; } .award-card p { font-size: var(--text-small); color: var(--color-muted); line-height: var(--leading-small); } .hero-bg { position: absolute; left: 0; right: 0; top: -12%; bottom: -12%; z-index: 0; border-radius: 0; background-size: cover; background-position: center; } .hero-bg::after { align-items: flex-end; justify-content: flex-end; padding: 24px; } .hero-home .hero-bg { background-image: linear-gradient(180deg, rgba(18, 26, 21, 0.45) 0%, rgba(18, 26, 21, 0.15) 45%, rgba(18, 26, 21, 0.6) 100%), url('https://edwardyeo.com/wp-content/ey-assets/edward-yeo-hero-web.jpg'); } .hero-home .kicker { color: var(--color-ivory); } .hero-home .giant-wordmark { color: var(--color-ivory); } .hero-home .container, .hero-home .hero-wordmark { position: relative; z-index: 1; } .hero-home .hero-wordmark { margin-top: 64px; } .hero-home + .band { margin-top: 0; } .intro-statement { font-family: var(--font-heading); font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; color: var(--color-forest); max-width: 920px; margin-inline: auto; font-optical-sizing: auto; } .intro-block { text-align: center; } .intro-block .kicker { margin-bottom: 24px; } .carousel { overflow: hidden; display: grid; gap: var(--element-gap); } .carousel-row { display: flex; width: max-content; } .carousel-set { display: flex; gap: var(--element-gap); padding-right: var(--element-gap); flex: none; animation: none; } .carousel-row { animation: marquee 45s linear infinite; } .carousel-row.reverse { animation-direction: reverse; } .carousel:hover .carousel-row { animation-play-state: paused; } @keyframes marquee { to { transform: translate3d(-50%, 0, 0); } } .carousel-card { display: flex; align-items: center; gap: 16px; background: var(--color-ivory); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 16px 24px 16px 16px; width: 380px; flex: none; } .carousel-card .ph { width: 64px; height: 64px; flex: none; } .carousel-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; } .carousel-card p { font-size: 17px; line-height: 1.35; } .proof-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .proof-sticky .kicker { margin-bottom: 20px; } .feed { display: grid; gap: var(--element-gap); } .feed-card { display: grid; gap: 16px; border: 1px solid var(--color-hairline-ivory); border-radius: var(--radius-lg); padding: var(--card-padding); text-decoration: none; color: inherit; transition: border-color 0.2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .feed-card:hover { border-color: var(--color-bronze); } } .feed-meta { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-bronze-bright); } .feed-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1.25; transition: color 0.2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .feed-card:hover h3 { color: var(--color-bronze-bright); } } .feed-card .small { color: var(--color-muted-ivory); } .row-index { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 44px; line-height: 1; color: var(--color-bronze); font-optical-sizing: auto; } .row-label .ph-circle { width: min(200px, 100%); margin-bottom: 20px; } .row-label .ph-circle ~ .kicker { width: min(200px, 100%); text-align: center; } .row-label .ph-landscape { width: min(220px, 100%); margin-top: 16px; } .row-label .stat { margin-top: 24px; } .h2-xl { font-size: var(--text-h1); line-height: var(--leading-h1); } .h2-sub { margin-top: -8px; margin-bottom: 24px; } .case-ph { margin-bottom: 24px; } @media (min-width: 1120px) { .case-row .row-body { max-width: none; } .case-row .row-body p, .case-row .case-ph { max-width: 720px; } .case-row .row-body h2 { white-space: nowrap; font-size: min(25px, calc((100vw - 368px) * 0.0281)); } } .card > .ph { margin-bottom: 24px; width: 100%; } @media (min-width: 961px) { .row-label { position: sticky; top: 132px; } .proof-sticky { position: sticky; top: 132px; } } @media (max-width: 960px) { .hero-home { min-height: 70vh; padding-top: 40px; } .hero-home .giant-wordmark { font-size: 17.5vw; } .chapter { grid-template-columns: 1fr; gap: 24px; align-items: start; } .chapter.flip .chapter-media { order: 0; } .chapter-num { font-size: 56px; } .split-services { padding-top: 32px; } .trait-grid { grid-template-columns: 1fr; } .trait-inner { min-height: 0; gap: 28px; } .ethic-grid { grid-template-columns: 1fr; } .ethic-card { min-height: 460px; } .gallery-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 90px; } .float-scene { grid-template-columns: 1fr; gap: 40px; } .float-canvas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .float-item { position: relative; aspect-ratio: 1; } .split-panels { grid-template-columns: 1fr; } .split-panel { padding-block: 20px 32px; } .split-panel + .split-panel { border-left: none; border-top: 1px solid var(--color-hairline-ivory); } .split-head { margin-bottom: 32px; } .split-panel h3, h2.svc-title { font-size: 28px; } .awards-grid { grid-template-columns: repeat(2, 1fr); } .proof-split { grid-template-columns: 1fr; gap: 40px; } .carousel-card { width: 300px; } [data-parallax] { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .carousel-row { animation: none; } [data-parallax] { transform: none !important; } } @media (max-width: 960px) { :root { --text-h1: 32px; --text-h2: 24px; --text-h3: 18px; --text-body: 17px; --section-gap: 64px; } .container, .nav-inner { padding-inline: 20px; } .hero { padding-top: 48px; } .hero-sub { font-size: 18px; } .band { padding-block: 64px; } .nav-inner { flex-wrap: wrap; row-gap: 12px; } .nav-pill { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } .nav-pill::-webkit-scrollbar { display: none; } .nav-pill.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); } .btn-primary.btn-nav { padding: 10px 20px; font-size: 14px; } .btn-wide { width: 100%; } .row { grid-template-columns: 1fr; gap: 16px; } .row + .row { margin-top: 40px; padding-top: 40px; } .doors { grid-template-columns: 1fr; } .card { padding: 28px; } .stats { grid-template-columns: 1fr; gap: 32px; } .footer-cols { grid-template-columns: 1fr; } .footer-wordmark-wrap { padding-top: 48px; } .footer-inner { padding-block: 56px; } .footer-v2 .footer-top { padding-block: 48px 0; } .footer-v2 .footer-bottom { padding: 48px 11.8vw 0; } .footer-nav-row { justify-content: center; } .hero-wordmark { margin-top: 48px; } } @media (max-width: 480px) { .drift-grid { grid-template-columns: 1fr; } } .et_pb_section{padding:0!important;background:transparent!important}.et_pb_row{padding:0!important;width:100%!important;max-width:100%!important}.et_pb_column{padding:0!important}.et_pb_code{margin:0!important}#page-container{background:#F6F1E7}.et_pb_contact_form_container{margin-bottom:0!important;max-width:720px;margin-left:auto!important;margin-right:auto!important;float:none!important}.et_pb_contact_form input,.et_pb_contact_form select,.et_pb_contact_form textarea{background:#F6F1E7!important;border:1px solid rgba(30,58,42,0.15)!important;border-radius:8px!important;padding:16px 24px!important;font-family:'Source Sans 3',sans-serif!important;font-size:17px!important;color:#22302A!important}.et_pb_contact_form input:focus,.et_pb_contact_form select:focus,.et_pb_contact_form textarea:focus{border-color:#1E3A2A!important;box-shadow:none!important;outline:none!important}.et_pb_contact_form ::placeholder{color:rgba(34,48,42,0.72)!important;opacity:1}.et_pb_contact_form .et_pb_contact_field{margin-bottom:24px!important}.et_pb_contact_submit{background:#85661F!important;color:#F6F1E7!important;border:none!important;border-radius:9999px!important;padding:16px 32px!important;font-family:'Source Sans 3',sans-serif!important;font-weight:700!important;font-size:17px!important;cursor:pointer;transition:background-color 0.2s var(--ease-out),transform 160ms var(--ease-out)}@media (hover:hover) and (pointer:fine){.et_pb_contact_submit:hover{background:#6F551A!important}}.et_pb_contact_submit:active{transform:scale(0.97)}.et_pb_button:after{display:none!important}
#main-content .container{padding-top:0!important}#main-content main>*+*{margin-top:var(--section-gap)!important}#main-content main>.cta-close{margin-top:64px!important}#main-content main>.gap-tight{margin-top:40px!important}#main-content main>.gap-80{margin-top:calc(var(--section-gap)*.8)!important}#main-content main>.gap-70{margin-top:calc(var(--section-gap)*.7)!important}#main-content .footer-v2 .footer-top{padding-top:64px!important}.et_pb_contact_form_label{display:block!important;font-family:'Source Sans 3',system-ui,sans-serif;font-size:16px;font-weight:600;color:#1E3A2A;margin-bottom:10px;line-height:1.4}.et_pb_contact_form select:has(option[value=""]:checked){color:rgba(34,48,42,0.72)!important}body.page-id-7178 .et_pb_code main{padding-bottom:0!important}.ba-form-note{margin-bottom:64px}.et_pb_contact_form .et_contact_bottom_container{float:none!important;width:100%!important;margin:0!important;text-align:center}.et_pb_contact_submit{width:100%!important}.et_pb_contact_form select.et_contact_error,.et_pb_contact_form input.et_contact_error,.et_pb_contact_form textarea.et_contact_error{border-color:red!important}
/* --- tool-cards tail, build 2026-08-17 (v19) --- */
/* ============================================================
   Tool cards (/tools/ dashboard) — dark cards on ivory, image
   greyscale at rest -> colour on hover (food-dashboard ref).
   All br rules guard against Divi's wpautop injections.
   ============================================================ */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tool-section-title { margin: 0 0 20px; }
.tool-section + .tool-section { margin-top: 56px !important; }
.tool-grid br { display: none; }
.tool-card {
  display: flex;
  flex-direction: column;
  background: var(--color-forest);
  border-radius: 16px;
  padding: 12px 12px 8px;
  text-decoration: none;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(30, 58, 42, 0.28); }
.tool-card-media { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; }
.tool-card-media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  filter: grayscale(1);
  transform: scale(1.01);
  transition: filter 0.5s ease, transform 0.7s var(--ease-out);
}
.tool-card:hover .tool-card-media img { filter: grayscale(0); transform: scale(1.05); }
@media (hover: none) { .tool-card-media img { filter: none; } }
.tool-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(246, 241, 231, 0.94);
  color: var(--color-forest);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
}
.tool-card-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 24px; line-height: 1.2;
  color: var(--color-ivory);
  margin: 18px 8px 6px;
}
.tool-card-sub { color: var(--color-muted-ivory); font-size: 15px; line-height: 1.45; margin: 0 8px 18px; }
.tool-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 8px; margin-top: auto; }
.tool-price-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-ivory); }
.tool-price-value { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--color-bronze-bright); }
.tool-card-btn {
  background: var(--color-ivory); color: var(--color-bronze-deep);
  font-weight: 700; font-size: 15px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.tool-card:hover .tool-card-btn { background: var(--color-bronze); color: var(--color-ivory); }
@media (max-width: 980px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card-media { aspect-ratio: 16 / 9; }
}

/* Tools page: tighter gap between nav and title */
.hero--tight { padding-top: 40px; }