:root { /* ---------- Blues. Swan is the brief; Deep and Abyss are the same hue taken darker, because a palette needs tonal range. ---------- */ --swan: #34677C; --swan-deep: #234959; --swan-abyss: #102A33; --swan-ink: #1B5068; /* links and eyebrows on light surfaces */ --accent: #34677C; --shallow: #B7D4E4; --shallow-soft: #DCEAF2; --shallow-line: #9FC3D8; /* ---------- Whites ---------- */ --white: #FFFFFF; --silk: #F5F8FA; --paper: #FFFFFF; --paper-alt: #DCEAF2; /* ---------- Text ---------- */ --ink: #2A333B; --basalt: #2A333B; --charcoal: #3C4750; --muted: #4D5860; --slate: #4D5860; --line: #DCE6EC; /* ---------- Milestone ramp. Deepens with the journey: shallow water to deep water. 3.31 / 4.64 / 7.21 / 11.14 on white. ---------- */ --b1: #6094AD; --b2: #3F7C95; --b3: #2A5D73; --b4: #19404E; /* ---------- Legacy tone names, remapped into the blue family. These are referenced by inline styles in the HTML, so the names must survive even though the values are all blue now. Spread across lightness so icons stay distinguishable. ---------- */ --navy: #16323F; --plum: #1B3E52; --teal: #24566A; --gold: #2E6A7F; --rust: #3A7C92; --green: #4A90A6; --steel: #234959; --gold-soft: #B7D4E4; --gold-shadow: #1B5068; /* ---------- Finish: silky. Shadows carry the hue, never black. Large blue fills get a soft two-stop sheen. Both are what make the surface read as silk rather than flat colour. ---------- */ --shadow-tint: 16,42,51; --sheen: .07; /* ---------- Type ---------- */ --display: 'Source Serif 4', Georgia, 'Times New Roman', serif; --body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --max: 1180px; --radius: 4px; --radius-sm: 3px; } /* ================================================================== Variant switch. Default is B - Shallow (white page, light-blue bands). Change data-theme on in each page to try others. ================================================================== */ html[data-theme="silk"] { --page: var(--silk); --band: var(--white); --band-line: var(--line); } html[data-theme="shallow"], html:not([data-theme]) { --page: var(--white); --band: var(--shallow-soft); --band-line: var(--shallow-line); } html[data-theme="swan"] { --page: var(--white); --band: var(--silk); --band-line: var(--line); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; line-height: 1.6; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; } /* .top-accent removed - decorative gradient rule replaced by the brand bar motif */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 12px 20px; font-family: var(--ui); font-size: 14px; font-weight: 600; } .skip-link:focus { left: 0; } .eyebrow { font-family: var(--ui); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-shadow); font-weight: 700; } .eyebrow.on-dark { color: var(--gold-soft); } h1, h2 { font-family: var(--display); margin: 0; letter-spacing: -0.015em; color: var(--ink); } h3, h4 { font-family: var(--ui); margin: 0; letter-spacing: -0.005em; color: var(--ink); } h1 { font-size: clamp(36px, 5.1vw, 60px); font-weight: 700; line-height: 1.08; } h2 { font-size: clamp(27px, 3.2vw, 39px); font-weight: 700; line-height: 1.16; } h3 { font-size: 19px; font-weight: 600; line-height: 1.35; } p { margin: 0 0 16px; color: var(--charcoal); } p.lead { font-size: 19px; color: var(--charcoal); max-width: 640px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 14px; font-weight: 600; letter-spacing: 0.1px; padding: 13px 24px; border-radius: var(--radius-sm); border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(14,26,36,0.14); transition: transform .12s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(14,26,36,0.24); background: var(--navy); border-color: var(--navy); } .btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(14,26,36,0.14); } .btn.on-dark { border-color: var(--gold); background: var(--gold); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.22); } .btn.on-dark:hover { background: #B0842B; border-color: #B0842B; color: #fff; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.34); } .btn.ghost { background: transparent; color: var(--ink); border-color: #C4CFD8; box-shadow: none; } .btn.ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 4px 10px -2px rgba(14,26,36,0.22); } .btn.ghost-light { background: transparent; border-color: rgba(255,255,255,0.42); color: #fff; box-shadow: none; } .btn.ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; box-shadow: none; } .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } /* ---------- Nav (shaded, 3D-feeling) ---------- */ .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.97); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { display: flex; align-items: center; gap: 12px; } .brand svg { width: 26px; height: 30px; } .brand-text { font-family: var(--ui); font-weight: 600; font-size: 16px; letter-spacing: 0.09em; } .brand-text span { color: var(--gold); } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--charcoal); padding: 8px 14px; border-radius: var(--radius-sm); border-bottom: 2px solid transparent; transition: background .16s ease, color .16s ease, border-color .16s ease; } .nav-links a:hover { background: var(--paper-alt); color: var(--ink); } .nav-links a.active { color: var(--ink); border-bottom-color: var(--gold); border-radius: 0; } .nav-cta { display: flex; align-items: center; gap: 22px; } .nav-toggle { display: none; } @media (max-width: 860px) { .nav-links { display: none; } .nav-cta .btn.ghost { display: none; } .nav-toggle { display: block; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; } .mobile-menu { display: none; flex-direction: column; border-top: 1px solid var(--line); background: var(--paper); } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--ui); font-weight: 600; font-size: 14px; padding: 18px 32px; border-bottom: 1px solid var(--line); } } @media (min-width: 861px) { .mobile-menu { display: none !important; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%); color: var(--paper); padding: 100px 0 88px; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 84% 18%, rgba(158,117,36,0.18), transparent 48%); pointer-events: none; } .hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; } .hero h1 { color: var(--paper); margin: 18px 0 22px; } .hero h1 em { font-style: normal; color: var(--gold-soft); } .hero p.lead { color: #D7DEE3; } .hero-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; } .bar-graphic { display: flex; align-items: flex-end; gap: 14px; height: 260px; justify-content: center; } .bar-graphic .bar { width: 34px; border-radius: 6px 6px 0 0; transform-origin: bottom; animation: growBar 1.1s cubic-bezier(.2,.8,.2,1) both; } .bar-graphic .bar:nth-child(1){ height: 90px; background: var(--teal); animation-delay: .05s;} .bar-graphic .bar:nth-child(2){ height: 150px; background: var(--steel); animation-delay: .18s;} .bar-graphic .bar:nth-child(3){ height: 220px; background: var(--rust); animation-delay: .32s;} .bar-graphic .bar:nth-child(4){ height: 260px; background: var(--gold); animation-delay: .46s;} @keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .bar-graphic .bar { animation: none; } } @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .bar-graphic { margin-top: 20px; height: 180px; } } /* ---------- Trust strip ---------- */ .trust-strip { border-bottom: 1px solid var(--line); background: var(--paper-alt); } .trust-strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); padding: 30px 32px; } .trust-strip .item { padding: 0 24px; border-left: 3px solid var(--line); font-size: 14px; color: var(--charcoal); } .trust-strip .item strong { display: block; font-family: var(--ui); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 3px; } .trust-strip .item:nth-child(1) { border-left-color: var(--teal); } .trust-strip .item:nth-child(2) { border-left-color: var(--gold); } .trust-strip .item:nth-child(3) { border-left-color: var(--rust); } @media (max-width: 780px) { .trust-strip .wrap { grid-template-columns: 1fr; gap: 18px; } .trust-strip .item { padding: 10px 0 0 16px; } } /* ---------- Section shell ---------- */ .section { padding: 100px 0; } .section.tight { padding: 76px 0; } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head .eyebrow { display: block; margin-bottom: 14px; } .section.alt { background: var(--paper-alt); } .section.dark { background: var(--ink); color: var(--paper); } .section.dark h2 { color: var(--paper); } /* ---------- Process ---------- */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .process-step { background: var(--paper); padding: 32px 26px 28px; border-top: 4px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 10px 24px -14px rgba(20,33,43,0.18); transition: transform .2s ease, box-shadow .2s ease; } .process-step:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(14,26,36,0.24); } .process-step:nth-child(1) { border-top-color: var(--teal); } .process-step:nth-child(2) { border-top-color: var(--steel); } .process-step:nth-child(3) { border-top-color: var(--rust); } .process-step:nth-child(4) { border-top-color: var(--gold); } .stage-bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-bottom: 22px; } .stage-bars i { display: block; width: 8px; border-radius: 2px 2px 0 0; background: var(--line); } .stage-bars i:nth-child(1){ height: 30%; } .stage-bars i:nth-child(2){ height: 55%; } .stage-bars i:nth-child(3){ height: 78%; } .stage-bars i:nth-child(4){ height: 100%; } .process-step:nth-child(1).in-view .stage-bars i:nth-child(1) { background: var(--teal); } .process-step:nth-child(2).in-view .stage-bars i:nth-child(-n+2) { background: var(--steel); } .process-step:nth-child(3).in-view .stage-bars i:nth-child(-n+3) { background: var(--rust); } .process-step:nth-child(4).in-view .stage-bars i { background: var(--gold); } .process-step h3 { margin-bottom: 10px; } .process-step p { font-size: 15px; margin-bottom: 0; } @media (max-width: 900px) { .process-grid { grid-template-columns: 1fr; } } /* ---------- Cards / grids ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .card { background: var(--paper); padding: 32px 28px; border-top: 4px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 10px 26px -14px rgba(20,33,43,0.16); transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(14,26,36,0.26); border-top-width: 4px; } .card h3 { margin-bottom: 12px; } .card ul { margin: 0; padding-left: 18px; color: var(--charcoal); font-size: 15px; } .card ul li { margin-bottom: 6px; } .card .tag { font-family: var(--ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; display: inline-block; padding: 5px 10px; border-radius: var(--radius-sm); margin-bottom: 16px; } .card.c-gold { border-top-color: var(--gold); } .tag.t-gold { background: rgba(158,117,36,.13); color: var(--gold-shadow); } .card.c-teal { border-top-color: var(--teal); } .tag.t-teal { background: rgba(20,101,92,.13); color: #0F4F47; } .card.c-navy { border-top-color: var(--steel); } .tag.t-navy { background: rgba(35,73,107,.13); color: #1B3A55; } .card.c-rust { border-top-color: var(--rust); } .tag.t-rust { background: rgba(143,85,32,.13); color: #6F4218; } .card.c-plum { border-top-color: var(--plum); } .tag.t-plum { background: rgba(92,68,112,.13); color: #4A3559; } .card.c-green { border-top-color: var(--green); } .tag.t-green { background: rgba(47,115,80,.13); color: #245A3E; } @media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* ---------- Pricing CTA (replaces upfront rates) ---------- */ .pricing-note { background: var(--paper-alt); border-radius: var(--radius); padding: 40px; text-align: center; margin-top: 12px; box-shadow: 0 1px 2px rgba(20,33,43,0.04), 0 10px 26px -16px rgba(20,33,43,0.14); } .pricing-note h3 { margin-bottom: 10px; } .pricing-note p { max-width: 520px; margin: 0 auto 22px; } /* ---------- Boundary / disclaimer card ---------- */ .boundary { background: var(--ink); color: var(--paper); padding: 46px; border-radius: var(--radius); border-left: 6px solid var(--gold); } .boundary h3 { color: var(--paper); margin-bottom: 14px; } .boundary p { color: #C9CBCF; } .boundary ul { color: #C9CBCF; padding-left: 18px; } .boundary ul li { margin-bottom: 8px; } /* ---------- CTA band ---------- */ .cta-band { background: linear-gradient(120deg, var(--ink), var(--navy) 70%); color: var(--paper); padding: 78px 0; text-align: center; } .cta-band h2 { color: var(--paper); margin-bottom: 18px; } .cta-band p { color: #D7DEE3; max-width: 520px; margin: 0 auto 30px; } /* ---------- Why row ---------- */ .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .why-item { padding-top: 18px; border-top: 3px solid var(--line); } .why-item:nth-child(1){ border-top-color: var(--teal); } .why-item:nth-child(2){ border-top-color: var(--gold); } .why-item:nth-child(3){ border-top-color: var(--rust); } .why-item:nth-child(4){ border-top-color: var(--plum); } .why-item h3 { font-size: 18px; margin-bottom: 8px; } .why-item p { font-size: 14.5px; margin-bottom: 0; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ footer { background: var(--ink); color: #C9CBCF; padding: 72px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.12); } .footer-brand .brand-text { color: var(--paper); } .footer-brand p { color: #A7ADB3; font-size: 14px; margin-top: 16px; max-width: 260px; } .footer-col h4 { font-family: var(--ui); font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 18px; font-weight: 700; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col ul li { margin-bottom: 12px; } .footer-col a { font-size: 14px; color: #C9CBCF; transition: color .15s ease; } .footer-col a:hover { color: var(--gold-soft); } .footer-bottom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 0 40px; } .footer-contact-line { font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--paper); } .footer-contact-line a:hover { color: var(--gold-soft); } .footer-contact-line .sep { color: #4A5560; margin: 0 10px; } .disclaimer { font-size: 12.5px; color: #8F969C; line-height: 1.6; max-width: 720px; margin: 0 auto; } .disclaimer strong { color: #C9CBCF; } .footer-meta { font-family: var(--ui); font-size: 12px; color: #767D83; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- Page hero ---------- */ .page-hero { padding: 72px 0 60px; background: linear-gradient(135deg, var(--ink), var(--navy) 100%); color: var(--paper); position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 18%, rgba(158,117,36,0.16), transparent 46%); } .page-hero .wrap { position: relative; } .page-hero h1 { color: var(--paper); } .page-hero p.lead { color: #D7DEE3; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .contact-panel { background: var(--paper); padding: 42px; border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 10px 26px -14px rgba(20,33,43,0.14); } .contact-panel.dark { background: var(--ink); color: var(--paper); } .contact-panel.dark h3 { color: var(--paper); } .field { margin-bottom: 20px; } .field label { display: block; font-family: var(--ui); font-size: 13px; font-weight: 700; color: var(--charcoal); margin-bottom: 8px; } .field input, .field textarea, .field select { width: 100%; padding: 13px 14px; font-family: var(--body); font-size: 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,101,92,0.16); } .info-list { list-style: none; margin: 0 0 30px; padding: 0; } .info-list li { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.12); } .info-list a { text-decoration: none; } .info-list a:hover { color: var(--gold-soft); } .info-list .label { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--gold-soft); display: block; margin-bottom: 4px; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } /* ---------- About ---------- */ .value-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 40px; margin-top: 10px; } .value-list .value-num { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; display: block; margin-bottom: 8px; } .value-list .v1 .value-num { color: var(--teal); } .value-list .v2 .value-num { color: var(--gold); } .value-list .v3 .value-num { color: var(--rust); } .value-list .v4 .value-num { color: var(--plum); } @media (max-width: 700px) { .value-list { grid-template-columns: 1fr; } } /* ---------- Legal pages ---------- */ .legal-body h2 { font-size: 24px; margin: 44px 0 14px; } .legal-body h2:first-child { margin-top: 0; } .legal-body p, .legal-body li { color: var(--charcoal); font-size: 15.5px; } .legal-body ul { padding-left: 20px; } .legal-updated { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--slate); margin-bottom: 8px; } /* ---------- Testimonials ---------- */ .testimonial-card { background: var(--paper); padding: 32px; border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 10px 26px -14px rgba(20,33,43,0.16); border-top: 4px solid var(--gold); } .testimonial-card p.quote { font-size: 17px; color: var(--ink); font-style: italic; margin-bottom: 18px; } .testimonial-card .who { font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--charcoal); } .placeholder-flag { display: inline-block; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--rust); background: rgba(143,85,32,.12); padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 14px; } /* ---------- Blog ---------- */ .blog-card { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 10px 26px -14px rgba(20,33,43,0.16); border-top: 4px solid var(--teal); transition: transform .2s ease, box-shadow .2s ease; } .blog-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(14,26,36,0.26); } .blog-card .inner { padding: 30px 28px; } .blog-card .cat { font-family: var(--ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--teal); margin-bottom: 10px; display: block; } .blog-card h3 { margin-bottom: 10px; } .blog-card p { font-size: 14.5px; } .blog-card .read-more { font-family: var(--ui); font-size: 13px; font-weight: 700; color: var(--gold-shadow); } .blog-card h3 a { transition: color .15s ease; } .blog-card h3 a:hover { color: var(--teal); } .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .reveal.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Photography (hero + card imagery) ---------- */ .hero { background-image: linear-gradient(135deg, rgba(20,33,43,0.88) 0%, rgba(29,59,87,0.82) 60%, rgba(43,76,111,0.80) 100%), url('https://images.pexels.com/photos/29121628/pexels-photo-29121628.jpeg?auto=compress&cs=tinysrgb&w=1920'); background-size: cover; background-position: center; } .hero::before { background: radial-gradient(circle at 84% 18%, rgba(158,117,36,0.20), transparent 48%); } .page-hero { background-image: linear-gradient(135deg, rgba(20,33,43,0.90) 0%, rgba(29,59,87,0.86) 100%), url('https://images.pexels.com/photos/16229056/pexels-photo-16229056.jpeg?auto=compress&cs=tinysrgb&w=1920'); background-size: cover; background-position: center; } .card { padding: 0; overflow: hidden; } .card-photo { height: 168px; background-size: cover; background-position: center; } .card-body { padding: 28px 28px 32px; } .card-body h3 { margin-bottom: 12px; } .card .tag { margin-bottom: 16px; } .photo-credit { font-family: var(--ui); font-size: 11px; color: var(--slate); text-align: right; margin-top: 8px; } .wa-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .wa-gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 10px 26px -14px rgba(20,33,43,0.16); } .wa-gallery img { width: 100%; height: 220px; object-fit: cover; display: block; } .wa-gallery figcaption { padding: 14px 18px 18px; font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--charcoal); } @media (max-width: 860px) { .wa-gallery { grid-template-columns: 1fr; } } /* ---------- Human photography placements ---------- */ .hero-photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px -22px rgba(0,0,0,0.6); aspect-ratio: 5 / 4; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; } @media (max-width: 900px) { .hero-photo { aspect-ratio: 16 / 10; margin-top: 8px; } } .why-intro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 52px; align-items: center; margin-bottom: 56px; } .why-photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 14px 30px -16px rgba(20,33,43,0.22); } .why-photo img { width: 100%; height: 300px; object-fit: cover; display: block; } @media (max-width: 860px) { .why-intro { grid-template-columns: 1fr; } .why-photo img { height: 220px; } } .contact-photo { height: 150px; background-size: cover; background-position: center; } /* superseded below */ /* ---------- City Orientation landmarks ---------- */ .landmark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .landmark-card { border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 10px 26px -14px rgba(20,33,43,0.16); transition: transform .2s ease, box-shadow .2s ease; } .landmark-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(20,33,43,0.22); } .landmark-photo { height: 200px; background-size: cover; background-position: center; } .landmark-body { padding: 24px 24px 26px; } .landmark-body h3 { margin-bottom: 8px; font-size: 19px; } .landmark-body p { font-size: 14.5px; margin-bottom: 0; } @media (max-width: 960px) { .landmark-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .landmark-grid { grid-template-columns: 1fr; } } /* ================================================================ REVAMP ADDITIONS — Aug 2026 Two-pillar structure, mentorship clusters, service groups. All values reuse existing :root tokens. Nothing above is changed. ================================================================ */ /* ---------- Nav: six items need more room than four ---------- */ @media (max-width: 1010px) { .nav-links { display: none; } .nav-cta .btn.ghost { display: none; } .nav-toggle { display: block; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; } .mobile-menu { display: none; flex-direction: column; border-top: 1px solid var(--line); background: var(--paper); } .mobile-menu.open { display: flex !important; } .mobile-menu a { font-family: var(--ui); font-weight: 600; font-size: 14px; padding: 18px 32px; border-bottom: 1px solid var(--line); } } @media (min-width: 1011px) { .mobile-menu { display: none !important; } } .nav-links a { padding: 9px 12px; } /* ---------- Two pillars (home) ---------- */ .pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .pillar { position: relative; background: var(--white); border-radius: var(--radius); border-top: 5px solid var(--line); padding: 38px 34px 34px; box-shadow: 0 1px 2px rgba(20,33,43,0.05), 0 10px 26px -14px rgba(20,33,43,0.16); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; } .pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(20,33,43,0.22); } .pillar.p-teal { border-top-color: var(--teal); } .pillar.p-gold { border-top-color: var(--gold); } .pillar .pillar-kicker { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; display: block; margin-bottom: 12px; } .pillar.p-teal .pillar-kicker { color: var(--teal); } .pillar.p-gold .pillar-kicker { color: var(--gold-shadow); } .pillar h3 { font-size: 25px; margin-bottom: 12px; } .pillar > p { font-size: 15px; } .pillar ul { list-style: none; margin: 6px 0 26px; padding: 0; } .pillar ul li { font-size: 14.5px; color: var(--charcoal); padding: 9px 0 9px 22px; border-bottom: 1px solid var(--line); position: relative; } .pillar ul li:last-child { border-bottom: none; } .pillar ul li::before { content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; border-radius: 2px; background: var(--line); } .pillar.p-teal ul li::before { background: var(--teal); } .pillar.p-gold ul li::before { background: var(--gold); } .pillar .pillar-cta { margin-top: auto; } @media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; } } /* ---------- Service / cluster group headings ---------- */ .svc-group { margin-top: 56px; } .svc-group:first-of-type { margin-top: 0; } .svc-group-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 2px solid var(--line); } .svc-group-head h2 { font-size: 23px; margin: 0; } .svc-group-head span { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--slate); } @media (max-width: 560px) { .svc-group-head { flex-direction: column; gap: 6px; } } /* ---------- Inline guardrail note on a card ---------- */ .guard-note { margin-top: 16px; margin-bottom: 0; padding: 12px 14px; background: var(--paper-alt); border-left: 3px solid var(--rust); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.55; color: var(--charcoal); } .card .guard-note { font-size: 12.5px; } /* ---------- Audience note ---------- */ .audience-note { background: var(--paper-alt); border-left: 5px solid var(--teal); border-radius: var(--radius); padding: 30px 34px; max-width: 780px; } .audience-note h3 { font-size: 19px; margin-bottom: 10px; } .audience-note p { font-size: 15px; margin-bottom: 0; color: var(--charcoal); } /* ---------- Billing split ---------- */ .billing-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .billing-split > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; } .billing-split h3 { font-size: 18px; margin-bottom: 10px; } .billing-split p { font-size: 14.5px; margin-bottom: 0; } .billing-split .basis { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--gold-shadow); display: block; margin-bottom: 10px; } @media (max-width: 780px) { .billing-split { grid-template-columns: 1fr; } } /* ================= Added: sticky mobile call bar ================= */ .mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.14); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; } .mobile-cta a { flex: 1; text-align: center; justify-content: center; font-family: var(--ui); font-size: 14px; font-weight: 600; padding: 12px 10px; border-radius: var(--radius-sm); } .mobile-cta .call { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.42); } .mobile-cta .book { background: var(--gold); color: #fff; border: 1px solid var(--gold); } @media (max-width: 860px) { .mobile-cta { display: flex; } body { padding-bottom: 68px; } } /* ================= Added: condensed footer legal ================= */ .legal-line { font-size: 12.5px; color: #8F969C; line-height: 1.6; max-width: 720px; margin: 0 auto; text-align: center; } .legal-line a { color: #C9CBCF; text-decoration: underline; text-underline-offset: 2px; } .legal-line a:hover { color: var(--gold-soft); } /* ================= Added: brand bar rule (replaces gradient accent) ================= */ .bar-rule { display: flex; align-items: flex-end; gap: 4px; height: 18px; margin-bottom: 18px; } .bar-rule i { display: block; width: 6px; background: var(--line); border-radius: 1px; } .bar-rule i:nth-child(1) { height: 40%; background: var(--navy); } .bar-rule i:nth-child(2) { height: 68%; background: var(--teal); } .bar-rule i:nth-child(3) { height: 100%; background: var(--gold); } /* ================= Added: homepage proof / testimonial row ================= */ .proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .proof-quote { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 28px 26px; } .proof-quote h3 { font-size: 17px; margin-bottom: 10px; } .proof-quote p { font-size: 15px; color: var(--charcoal); margin-bottom: 16px; } .proof-quote .who { font-family: var(--ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold-shadow); } @media (max-width: 860px) { .proof-row { grid-template-columns: 1fr; } } /* ================= Added: reduced motion, applied globally ================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .process-step { opacity: 1 !important; transform: none !important; } } /* ================================================================ Service iconography + depth layer Inline SVG (transparent), CSS-driven motion. Flash/plugin-free: runs in every current browser. ================================================================ */ /* --- Icon plate: sits half-over the card photo --- */ .svc-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: -50px 0 16px; position: relative; z-index: 2; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px -8px rgba(14,26,36,0.34); transition: transform .28s cubic-bezier(.22,.7,.3,1), box-shadow .28s ease; } .svc-icon svg { width: 27px; height: 27px; } .card:hover .svc-icon { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(14,26,36,0.42); } /* Draw-on effect: the stroke traces itself when the card scrolls in */ .card .svc-icon svg [stroke], .card .svc-icon svg path, .card .svc-icon svg circle, .card .svc-icon svg rect { stroke-dasharray: 120; stroke-dashoffset: 120; } .card.in-view .svc-icon svg path, .card.in-view .svc-icon svg circle, .card.in-view .svc-icon svg rect { animation: svcDraw .9s cubic-bezier(.4,0,.2,1) forwards; } .card.in-view .svc-icon svg *:nth-child(2) { animation-delay: .12s; } .card.in-view .svc-icon svg *:nth-child(3) { animation-delay: .24s; } .card.in-view .svc-icon svg *:nth-child(4) { animation-delay: .34s; } @keyframes svcDraw { to { stroke-dashoffset: 0; } } /* --- Translucent scrim over card photography --- Gives the "see-through" depth without washing the image out. --- */ .card-photo { position: relative; transition: transform .5s cubic-bezier(.22,.7,.3,1); } .card { position: relative; } .card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(14,26,36,0.00) 0%, rgba(14,26,36,0.10) 55%, rgba(14,26,36,0.55) 100% ); transition: opacity .4s ease; } .card:hover .card-photo { transform: scale(1.035); } .card { overflow: hidden; } /* --- Frosted panel: translucent surface over the dark hero --- */ .glass { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding: 26px 28px; color: #E8EEF3; } .glass h3 { color: #fff; } .glass p { color: #C2CDD6; margin-bottom: 0; } /* --- Pillar list ticks, drawn in --- */ .pillar ul li { position: relative; } /* --- Accessibility floor: everything above stops on request --- */ @media (prefers-reduced-motion: reduce) { .card .svc-icon svg path, .card .svc-icon svg circle, .card .svc-icon svg rect { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; } .card:hover .card-photo, .card:hover .svc-icon { transform: none !important; } .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.10); } } /* ================================================================ Hero: four-stage journey animation Inline SVG + CSS. No Lottie player, no plugin, ~6KB total. Full cycle 9s, then repeats. ================================================================ */ .journey { position: relative; } .journey svg { width: 100%; height: auto; overflow: visible; } .j-base { stroke: rgba(255,255,255,0.16); stroke-width: 1.5; stroke-dasharray: 3 6; } /* --- bars grow from the baseline --- */ .j-bar { transform-origin: center bottom; transform-box: fill-box; transform: scaleY(0); rx: 2; } .j-bar.b1 { fill: rgba(35,73,107,0.55); animation: jGrow 9s ease-out infinite; animation-delay: .3s; } .j-bar.b2 { fill: rgba(20,101,92,0.55); animation: jGrow 9s ease-out infinite; animation-delay: 1.6s; } .j-bar.b3 { fill: rgba(158,117,36,0.50); animation: jGrow 9s ease-out infinite; animation-delay: 2.9s; } .j-bar.b4 { fill: rgba(217,184,106,0.45);animation: jGrow 9s ease-out infinite; animation-delay: 4.2s; } @keyframes jGrow { 0% { transform: scaleY(0); } 9%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } } /* --- connecting path draws itself --- */ .j-path { fill: none; stroke: var(--gold-soft); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: jDraw 9s cubic-bezier(.35,0,.25,1) infinite; } @keyframes jDraw { 0% { stroke-dashoffset: 520; } 55%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 520; } } /* --- nodes pop as the path reaches them --- */ .j-node { fill: #0E1A24; stroke: var(--gold-soft); stroke-width: 2.5; transform-origin: center; transform-box: fill-box; transform: scale(0); } .j-node.n1 { animation: jPop 9s cubic-bezier(.3,1.4,.5,1) infinite; animation-delay: .3s; } .j-node.n2 { animation: jPop 9s cubic-bezier(.3,1.4,.5,1) infinite; animation-delay: 1.6s; } .j-node.n3 { animation: jPop 9s cubic-bezier(.3,1.4,.5,1) infinite; animation-delay: 2.9s; } .j-node.n4 { animation: jPop 9s cubic-bezier(.3,1.4,.5,1) infinite; animation-delay: 4.2s; } @keyframes jPop { 0% { transform: scale(0); } 5%, 85% { transform: scale(1); } 100% { transform: scale(0); } } /* --- stage numbers --- */ .j-num { font-family: var(--ui); font-size: 9px; font-weight: 700; fill: var(--gold-soft); text-anchor: middle; opacity: 0; } .j-num.s1 { animation: jFade 9s ease infinite; animation-delay: .55s; } .j-num.s2 { animation: jFade 9s ease infinite; animation-delay: 1.85s; } .j-num.s3 { animation: jFade 9s ease infinite; animation-delay: 3.15s; } .j-num.s4 { animation: jFade 9s ease infinite; animation-delay: 4.45s; } /* --- labels --- */ .j-label { font-family: var(--ui); font-size: 14px; font-weight: 600; fill: #E8EEF3; text-anchor: middle; opacity: 0; } .j-label.l1 { animation: jRise 9s ease infinite; animation-delay: .55s; } .j-label.l2 { animation: jRise 9s ease infinite; animation-delay: 1.85s; } .j-label.l3 { animation: jRise 9s ease infinite; animation-delay: 3.15s; } .j-label.l4 { animation: jRise 9s ease infinite; animation-delay: 4.45s; } @keyframes jFade { 0% { opacity: 0; } 6%, 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes jRise { 0% { opacity: 0; transform: translateY(6px); } 7%, 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(6px); } } /* --- travelling marker --- */ .j-marker { fill: #fff; opacity: .9; } .journey-cap { font-family: var(--ui); font-size: 13.5px; font-weight: 500; color: #9FAEBB; text-align: center; margin: 6px 0 0; } @media (max-width: 900px) { .journey { margin-top: 28px; } .j-label { font-size: 15px; } } /* --- Accessibility floor: show the finished state, no motion --- */ @media (prefers-reduced-motion: reduce) { .j-bar, .j-node, .j-num, .j-label, .j-path { animation: none !important; } .j-bar { transform: scaleY(1); } .j-node { transform: scale(1); } .j-num, .j-label { opacity: 1; transform: none; } .j-path { stroke-dashoffset: 0; } .j-marker { display: none; } } /* ================================================================ Section iconography — pillars & commitments ================================================================ */ .pillar-icon, .commit-icon { margin: 0 0 18px; } .pillar { position: relative; } .pillar:hover .pillar-icon, .proof-quote:hover .commit-icon { transform: translateY(-3px); } .pillar.in-view .svc-icon svg path, .pillar.in-view .svc-icon svg circle, .pillar.in-view .svc-icon svg rect, .proof-quote.in-view .svc-icon svg path, .proof-quote.in-view .svc-icon svg circle, .proof-quote.in-view .svc-icon svg rect { animation: svcDraw .9s cubic-bezier(.4,0,.2,1) forwards; } .pillar.in-view .svc-icon svg *:nth-child(2), .proof-quote.in-view .svc-icon svg *:nth-child(2) { animation-delay: .12s; } .pillar.in-view .svc-icon svg *:nth-child(3), .proof-quote.in-view .svc-icon svg *:nth-child(3) { animation-delay: .24s; } .pillar.in-view .svc-icon svg *:nth-child(4), .proof-quote.in-view .svc-icon svg *:nth-child(4) { animation-delay: .34s; } .pillar .svc-icon svg path, .pillar .svc-icon svg circle, .pillar .svc-icon svg rect, .proof-quote .svc-icon svg path, .proof-quote .svc-icon svg circle, .proof-quote .svc-icon svg rect { stroke-dasharray: 120; stroke-dashoffset: 120; } /* ================================================================ Scope split — the honesty positioning, made visual ================================================================ */ .scope-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0 32px; } .scope-col { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: var(--radius); padding: 24px 24px 20px; } .scope-head { display: flex; align-items: center; gap: 9px; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase; margin-bottom: 16px; } .scope-head em { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 3px; font-size: 13px; } .scope-do .scope-head { color: #7FD4B8; } .scope-do .scope-head em { background: rgba(127,212,184,0.16); } .scope-refer .scope-head { color: var(--gold-soft); } .scope-refer .scope-head em { background: rgba(217,184,106,0.16); } .scope-col ul { list-style: none; margin: 0; padding: 0; } .scope-col li { font-family: var(--ui); font-size: 14.5px; color: #DCE3E9; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08); opacity: 0; transform: translateX(-8px); } .scope-refer li { transform: translateX(8px); } .scope-col li:last-child { border-bottom: none; } .scope-col li span { display: block; font-size: 12.5px; color: #8C97A1; margin-top: 2px; } .boundary.in-view .scope-col li { animation: scopeIn .5s cubic-bezier(.3,.8,.3,1) forwards; } .boundary.in-view .scope-col li:nth-child(1) { animation-delay: .10s; } .boundary.in-view .scope-col li:nth-child(2) { animation-delay: .20s; } .boundary.in-view .scope-col li:nth-child(3) { animation-delay: .30s; } .boundary.in-view .scope-col li:nth-child(4) { animation-delay: .40s; } .boundary.in-view .scope-col li:nth-child(5) { animation-delay: .50s; } @keyframes scopeIn { to { opacity: 1; transform: translateX(0); } } @media (max-width: 720px) { .scope-split { grid-template-columns: 1fr; } } /* ================================================================ CTA band — photograph reinstated at the conversion point ================================================================ */ .cta-band.has-photo { position: relative; background-image: linear-gradient(100deg, rgba(14,26,36,0.94) 0%, rgba(18,58,90,0.86) 52%, rgba(18,58,90,0.62) 100%), url('https://images.pexels.com/photos/4339910/pexels-photo-4339910.jpeg?auto=compress&cs=tinysrgb&w=1600'); background-size: cover; background-position: center 32%; } .cta-band.has-photo .wrap { position: relative; text-align: left; max-width: 940px; } .cta-band.has-photo h2 { max-width: 15ch; } .cta-band.has-photo p { margin: 0 0 30px; max-width: 46ch; } @media (max-width: 760px) { .cta-band.has-photo { background-image: linear-gradient(180deg, rgba(14,26,36,0.93), rgba(18,58,90,0.90)), url('https://images.pexels.com/photos/4339910/pexels-photo-4339910.jpeg?auto=compress&cs=tinysrgb&w=900'); } .cta-band.has-photo .wrap { text-align: center; } .cta-band.has-photo h2, .cta-band.has-photo p { max-width: none; margin-left: auto; margin-right: auto; } } /* ================================================================ Accessibility floor ================================================================ */ @media (prefers-reduced-motion: reduce) { .scope-col li { opacity: 1 !important; transform: none !important; animation: none !important; } .pillar:hover .pillar-icon, .proof-quote:hover .commit-icon { transform: none !important; } .pillar .svc-icon svg *, .proof-quote .svc-icon svg * { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; } } /* ================================================================ FIX: contact panel photograph Was 150px tall with centre anchoring, which cropped through faces. ================================================================ */ .contact-photo { height: 260px; background-size: cover; background-position: center 28%; position: relative; } .contact-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,36,0) 55%, rgba(14,26,36,0.85) 100%); } @media (max-width: 860px) { .contact-photo { height: 210px; background-position: center 26%; } } @media (max-width: 520px) { .contact-photo { height: 170px; } } /* ================================================================ Icons rebuilt: coloured, dimensional tiles Gradient fill + inset bevel + coloured cast shadow. The tile takes its hue from the inline `color` on each icon, so the existing per-service colour coding still drives it. ================================================================ */ .svc-icon { width: 56px; height: 56px; border: none; border-radius: 14px; background-color: currentColor; background-image: linear-gradient(150deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.10) 42%, rgba(0,0,0,0.10) 72%, rgba(0,0,0,0.22) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.55), inset 0 -2px 5px rgba(0,0,0,0.22), 0 10px 20px -8px currentColor, 0 4px 10px -3px rgba(14,26,36,0.38); transition: transform .32s cubic-bezier(.22,.8,.28,1), box-shadow .32s ease; } /* icon glyph sits white on the coloured tile */ .svc-icon svg { width: 28px; height: 28px; stroke: #FFFFFF; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.28)); } .svc-icon svg [fill="currentColor"] { fill: #FFFFFF; } /* lift and tilt on card hover */ .card:hover .svc-icon, .pillar:hover .pillar-icon, .proof-quote:hover .commit-icon { transform: translateY(-5px) rotate(-3deg) scale(1.04); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 -2px 5px rgba(0,0,0,0.22), 0 18px 30px -10px currentColor, 0 8px 16px -4px rgba(14,26,36,0.42); } /* service-card icons overlap the photo above them */ .card .svc-icon { margin: -52px 0 18px; } /* pillar + commitment icons sit inline, slightly larger presence */ .pillar-icon, .commit-icon { margin: 0 0 20px; } @media (prefers-reduced-motion: reduce) { .card:hover .svc-icon, .pillar:hover .pillar-icon, .proof-quote:hover .commit-icon { transform: none !important; } } /* ================================================================ FIX 1 — Card photography was cropping through faces 168px on a ~560px-wide card slices a landscape photo through its middle band. Taller, and anchored above centre. ================================================================ */ .card-photo { height: 210px; background-size: cover; background-position: center 28%; } @media (max-width: 900px) { .card-photo { height: 235px; background-position: center 26%; } } @media (max-width: 560px) { .card-photo { height: 190px; } } /* Lighter scrim: the previous one darkened faces in the lower third */ .card-photo::after { background: linear-gradient( 180deg, rgba(14,26,36,0.00) 0%, rgba(14,26,36,0.04) 62%, rgba(14,26,36,0.30) 100% ); } /* ================================================================ FIX 2 — Icon tile was colliding with the tag badge .svc-icon was inline-flex, so the tag flowed alongside it and the two sat on the same line at mismatched heights. The icon now occupies its own row and overlaps the photo cleanly. ================================================================ */ .card .card-body { position: relative; } .card .svc-icon { display: flex; /* own row — tag no longer flows beside it */ margin: -54px 0 16px; /* overlaps the photo above by ~54px */ position: relative; z-index: 3; } /* tag sits on its own line, left-aligned under the icon */ .card .card-body .tag { display: inline-block; margin: 0 0 14px; } /* pillar + commitment icons have no photo above them */ .pillar-icon, .commit-icon { display: flex; margin: 0 0 20px; } @media (max-width: 560px) { .card .svc-icon { margin: -52px 0 14px; } } /* ================================================================ FIX 3 — Unified grid hover across every page One shared treatment: lift, subtle scale, layered shadow, and a warming of the border. Applied to every card-like tile. ================================================================ */ .card, .blog-card, .process-step, .proof-quote, .testimonial-card, .pillar, .wa-gallery figure, .why-item { transition: transform .34s cubic-bezier(.22,.8,.28,1), box-shadow .34s cubic-bezier(.22,.8,.28,1), border-color .34s ease; will-change: transform; } .card:hover, .blog-card:hover, .process-step:hover, .proof-quote:hover, .testimonial-card:hover, .pillar:hover, .wa-gallery figure:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 2px 4px rgba(14,26,36,0.05), 0 18px 34px -14px rgba(14,26,36,0.30), 0 34px 56px -26px rgba(14,26,36,0.22); } /* .why-item has no panel — give it a quieter version */ .why-item { padding: 18px 16px 16px; margin: 0 -16px; border-radius: var(--radius); } .why-item:hover { background: rgba(255,255,255,0.72); box-shadow: 0 12px 26px -16px rgba(14,26,36,0.24); transform: translateY(-3px); } .section.alt .why-item:hover { background: #fff; } /* keep the accent rule from thickening the layout on hover */ .card:hover { border-top-width: 4px; } /* pillars carry a border rather than a shadow by default */ .pillar { border-radius: var(--radius); } @media (prefers-reduced-motion: reduce) { .card, .blog-card, .process-step, .proof-quote, .testimonial-card, .pillar, .wa-gallery figure, .why-item { transition: none !important; } .card:hover, .blog-card:hover, .process-step:hover, .proof-quote:hover, .testimonial-card:hover, .pillar:hover, .wa-gallery figure:hover, .why-item:hover { transform: none !important; } } /* Touch devices: no hover state, so don't leave tiles stuck mid-lift */ @media (hover: none) { .card:hover, .blog-card:hover, .process-step:hover, .proof-quote:hover, .testimonial-card:hover, .pillar:hover, .wa-gallery figure:hover, .why-item:hover { transform: none; } } /* ================================================================== ============ THEME REBUILD ===================================== Everything below supersedes the older rules. Ordered by cascade, so this block wins. Written against the token system above. ================================================================== */ body { background: var(--page); color: var(--ink); } /* ---------- Type ---------- */ h1, h2 { font-family: var(--display); color: var(--swan-abyss); letter-spacing: -.015em; } h3, h4 { font-family: var(--ui); color: var(--swan-deep); } a { color: var(--swan-ink); } p { color: var(--muted); } .lead { color: var(--ink); } .eyebrow { color: var(--swan-ink); letter-spacing: 1.4px; } .eyebrow.on-dark { color: var(--shallow); } /* ---------- Buttons ---------- */ .btn { border-radius: var(--radius-sm); border: 1px solid var(--swan-deep); background: var(--swan-deep); color: #fff; box-shadow: 0 1px 2px rgba(var(--shadow-tint), .16); transition: transform .16s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease; } .btn:hover { transform: translateY(-1px); background: var(--swan); border-color: var(--swan); box-shadow: 0 7px 18px -6px rgba(var(--shadow-tint), .34); } .btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(var(--shadow-tint), .18); } .btn.ghost { background: transparent; color: var(--swan-deep); border-color: var(--shallow-line); box-shadow: none; } .btn.ghost:hover { background: var(--swan-deep); color: #fff; border-color: var(--swan-deep); box-shadow: 0 7px 18px -6px rgba(var(--shadow-tint), .30); } /* on a dark surface (CTA band, footer) */ .btn.on-dark { background: #fff; color: var(--swan-abyss); border-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.20); } .btn.on-dark:hover { background: var(--shallow); border-color: var(--shallow); color: var(--swan-abyss); box-shadow: 0 8px 20px -6px rgba(0,0,0,.34); } .btn.ghost-light { background: transparent; border-color: rgba(255,255,255,.44); color: #fff; box-shadow: none; } .btn.ghost-light:hover { background: rgba(255,255,255,.13); border-color: #fff; } /* heroes are LIGHT in this theme, so the dark-context variants are re-mapped inside them rather than editing every page's markup */ .hero .eyebrow.on-dark, .page-hero .eyebrow.on-dark { color: var(--swan-ink); } .hero .btn.on-dark, .page-hero .btn.on-dark { background: var(--swan-deep); color: #fff; border-color: var(--swan-deep); box-shadow: 0 1px 2px rgba(var(--shadow-tint), .16); } .hero .btn.on-dark:hover, .page-hero .btn.on-dark:hover { background: var(--swan); border-color: var(--swan); box-shadow: 0 7px 18px -6px rgba(var(--shadow-tint), .34); } .hero .btn.ghost-light, .page-hero .btn.ghost-light { background: var(--white); color: var(--swan-deep); border-color: var(--shallow-line); } .hero .btn.ghost-light:hover, .page-hero .btn.ghost-light:hover { background: var(--swan-deep); color: #fff; border-color: var(--swan-deep); } /* ---------- Navigation ---------- */ .site-nav { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); box-shadow: none; } .site-nav .wrap { height: 88px; } .brand svg { width: 36px; height: 42px; } .brand-text { font-size: 20px; letter-spacing: .10em; color: var(--swan-abyss); } .nav-links a { color: var(--charcoal); border-radius: var(--radius-sm); border-bottom: 2px solid transparent; } .nav-links a:hover { background: var(--shallow-soft); color: var(--swan-abyss); } .nav-links a.active { color: var(--swan-abyss); border-bottom-color: var(--swan); background: transparent; border-radius: 0; } .nav-toggle { color: var(--swan-abyss); border-color: var(--line); } .mobile-menu { background: #fff; border-top: 1px solid var(--line); } .mobile-menu a { color: var(--charcoal); border-bottom: 1px solid var(--line); } .mobile-menu a:hover { background: var(--shallow-soft); } /* ---------- Hero: light, with the photograph as a ghost ---------- */ .hero, .page-hero { background-color: var(--shallow-soft); background-blend-mode: normal; color: var(--ink); border-bottom: 1px solid var(--shallow-line); } .hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(220,234,242,.93) 100%); } .hero::after, .page-hero::after { display: none; } .hero h1, .page-hero h1 { color: var(--swan-abyss); } .hero h1 em { font-style: normal; color: var(--accent); } .hero .lead, .page-hero .lead { color: var(--muted); } /* ---------- Milestone diagram: white card, deepening bars ---------- */ .journey { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 16px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 5px -2px rgba(var(--shadow-tint), .08), 0 24px 52px -28px rgba(var(--shadow-tint), .30); } .journey::before { display: none; } .j-base { stroke: var(--line); } .j-bar.b1 { fill: var(--b1); } .j-bar.b2 { fill: var(--b2); } .j-bar.b3 { fill: var(--b3); } .j-bar.b4 { fill: var(--b4); } .j-bar, .j-node { filter: none; } .j-path { stroke: var(--swan-deep); stroke-width: 2.5; filter: none; } .j-node { fill: #fff; stroke: var(--swan-deep); stroke-width: 2.5; } .j-num { fill: var(--swan-deep); font-weight: 700; filter: none; } .j-label { fill: var(--ink); font-weight: 600; font-size: 14px; stroke: none; paint-order: normal; filter: none; } .j-marker { fill: var(--swan-deep); opacity: .9; } .journey-cap { color: var(--muted); text-shadow: none; padding-top: 8px; } /* ---------- Sections ---------- */ .section { background: transparent; } .section.alt { background: var(--band); border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); } .section-head h2 { color: var(--swan-abyss); } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--band); border-bottom: 1px solid var(--band-line); } .trust-strip .item { border-left-color: var(--shallow-line); color: var(--muted); } .trust-strip .item strong { color: var(--swan-abyss); } /* ---------- Cards ---------- */ .card, .blog-card, .process-step, .proof-quote, .landmark-card, .contact-panel, .pillar { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); } .card { border-top: 3px solid var(--swan); } .card.c-navy { border-top-color: var(--navy); } .card.c-teal { border-top-color: var(--teal); } .card.c-gold { border-top-color: var(--gold); } .card.c-rust { border-top-color: var(--rust); } .card.c-plum { border-top-color: var(--plum); } .card.c-green { border-top-color: var(--green); } .card:hover, .blog-card:hover, .process-step:hover, .proof-quote:hover, .landmark-card:hover, .pillar:hover, .wa-gallery figure:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 3px 6px -3px rgba(var(--shadow-tint), .10), 0 22px 44px -20px rgba(var(--shadow-tint), .26), 0 40px 64px -34px rgba(var(--shadow-tint), .18); } .card:hover { border-top-width: 4px; } /* ---------- Tags: blue tints, one family ---------- */ .card .tag, .tag { background: var(--shallow-soft); color: var(--swan-ink); border-radius: var(--radius-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; font-size: 11.5px; } .tag.t-navy, .tag.t-teal, .tag.t-gold, .tag.t-rust, .tag.t-plum, .tag.t-green { background: var(--shallow-soft); color: var(--swan-ink); } html[data-theme="shallow"] .card .tag { background: var(--shallow); } /* ---------- Icon tiles ---------- */ .svc-icon { width: 56px; height: 56px; border-radius: 14px; border: none; background-color: currentColor; background-image: linear-gradient(150deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.10) 44%, rgba(0,0,0,.10) 72%, rgba(0,0,0,.22) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.50), inset 0 -2px 5px rgba(0,0,0,.20), 0 10px 22px -9px currentColor, 0 3px 9px -4px rgba(var(--shadow-tint), .34); } .svc-icon svg { stroke: #fff; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.26)); } .card:hover .svc-icon, .pillar:hover .pillar-icon, .proof-quote:hover .commit-icon { transform: translateY(-5px) rotate(-3deg) scale(1.04); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.56), inset 0 -2px 5px rgba(0,0,0,.20), 0 18px 32px -11px currentColor, 0 8px 16px -5px rgba(var(--shadow-tint), .38); } /* ---------- Card photography ---------- */ .card-photo::after { background: linear-gradient(180deg, rgba(16,42,51,0) 0%, rgba(16,42,51,.04) 62%, rgba(16,42,51,.30) 100%); } /* ---------- Pillars ---------- */ .pillar.p-teal { border-top: 3px solid var(--teal); } .pillar.p-gold { border-top: 3px solid var(--gold); } .pillar-kicker { color: var(--swan-ink); } /* ---------- Scope split ---------- */ .boundary { background: var(--swan-deep); color: #fff; } .boundary::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(158deg, rgba(255,255,255,var(--sheen)) 0%, rgba(0,0,0,calc(var(--sheen) * .85)) 100%); } .boundary .wrap { position: relative; } .boundary h2, .boundary h3 { color: #fff; } .boundary p, .boundary li { color: #C6D8E2; } .scope-col { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); } .scope-do .scope-head { color: var(--shallow); } .scope-do .scope-head em { background: rgba(183,212,228,.18); } .scope-refer .scope-head { color: #A8C8DA; } .scope-refer .scope-head em { background: rgba(168,200,218,.16); } .scope-col li { color: #DCE7EE; border-bottom-color: rgba(255,255,255,.10); } .scope-col li span { color: #A9C2D0; } /* ---------- CTA band ---------- */ .cta-band { background: linear-gradient(162deg, rgba(255,255,255,var(--sheen)) 0%, rgba(0,0,0,calc(var(--sheen) * .9)) 100%), var(--swan-deep); color: #fff; } .cta-band h2 { color: #fff; } .cta-band p { color: #C6D8E2; } .cta-band.has-photo { background-image: linear-gradient(100deg, rgba(16,42,51,.95) 0%, rgba(35,73,89,.90) 52%, rgba(35,73,89,.70) 100%), url('https://images.pexels.com/photos/4339910/pexels-photo-4339910.jpeg?auto=compress&cs=tinysrgb&w=1600'); } @media (max-width: 760px) { .cta-band.has-photo { background-image: linear-gradient(180deg, rgba(16,42,51,.94), rgba(35,73,89,.93)), url('https://images.pexels.com/photos/4339910/pexels-photo-4339910.jpeg?auto=compress&cs=tinysrgb&w=900'); } } /* ---------- Why items ---------- */ .why-item:hover { background: var(--white); box-shadow: 0 14px 30px -18px rgba(var(--shadow-tint), .26); } .section.alt .why-item:hover { background: #fff; } /* ---------- Forms ---------- */ .field input, .field textarea, .field select { border: 1px solid var(--shallow-line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--swan); box-shadow: 0 0 0 3px rgba(52,103,124,.18); } .field label { color: var(--swan-abyss); } /* ---------- Contact panels ---------- */ .contact-panel.dark { background: linear-gradient(160deg, rgba(255,255,255,var(--sheen)) 0%, rgba(0,0,0,calc(var(--sheen) * .8)) 100%), var(--swan-abyss); color: #fff; } .contact-panel.dark h3 { color: #fff; } .info-list .label { color: var(--shallow); } .contact-photo::after { background: linear-gradient(180deg, rgba(16,42,51,0) 55%, rgba(16,42,51,.85) 100%); } /* ---------- Guard / audience notes ---------- */ .guard-note, .audience-note, .pricing-note { background: var(--shallow-soft); border-left: 3px solid var(--swan); color: var(--muted); } /* ---------- Bar rule motif ---------- */ .bar-rule i:nth-child(1) { background: var(--b2); } .bar-rule i:nth-child(2) { background: var(--b3); } .bar-rule i:nth-child(3) { background: var(--b4); } .stage-bars i { background: var(--shallow-line); } .stage-bars i.on { background: var(--swan); } /* ---------- Footer ---------- */ footer { background: linear-gradient(180deg, rgba(255,255,255,var(--sheen)) 0%, rgba(0,0,0,calc(var(--sheen) * .7)) 100%), var(--swan-abyss); color: #9FB6C2; } footer h4, .footer-brand .brand-text { color: #fff; } footer a { color: #CBDDE7; } footer a:hover { color: #fff; } .footer-col a { color: #B4C8D4; } .legal-line { color: #8AA1AE; } .legal-line a { color: #BACDD9; } .footer-bottom, .footer-meta { border-top-color: rgba(255,255,255,.12); color: #8AA1AE; } /* ---------- Mobile CTA ---------- */ .mobile-cta { background: var(--swan-abyss); border-top-color: rgba(255,255,255,.14); } .mobile-cta .call { border-color: rgba(255,255,255,.44); color: #fff; } .mobile-cta .book { background: var(--swan); border-color: var(--swan); color: #fff; } /* ---------- Focus ---------- */ :focus-visible { outline: 2px solid var(--swan); outline-offset: 3px; } .skip-link { background: var(--swan-abyss); } /* ---------- Blog / read-more ---------- */ .read-more { color: var(--swan-ink); } .blog-card .cat { color: var(--swan-ink); } /* ---------- Accessibility floor ---------- */ @media (hover: none) { .card:hover, .blog-card:hover, .process-step:hover, .proof-quote:hover, .landmark-card:hover, .pillar:hover, .wa-gallery figure:hover, .why-item:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .card:hover, .blog-card:hover, .process-step:hover, .proof-quote:hover, .landmark-card:hover, .pillar:hover, .why-item:hover, .card:hover .svc-icon, .pillar:hover .pillar-icon, .proof-quote:hover .commit-icon { transform: none !important; } } /* ================================================================== FIX — the cityscape was being erased, and the diagram had a panel Two corrections: 1. The hero carried BOTH the old dark navy gradient and a new 90% white overlay. Two scrims fighting, and the photo lost. Now a single light scrim at 72%, so the city reads through. 2. The milestone diagram no longer sits in its own card. It draws directly onto the hero, as agreed. ================================================================== */ .hero { background-image: linear-gradient(172deg, rgba(242,247,250,.76) 0%, rgba(242,247,250,.70) 46%, rgba(220,234,242,.78) 100%), url('https://images.pexels.com/photos/29121628/pexels-photo-29121628.jpeg?auto=compress&cs=tinysrgb&w=1920'); background-size: cover; background-position: center 38%; background-color: var(--shallow-soft); } .page-hero { background-image: linear-gradient(172deg, rgba(242,247,250,.78) 0%, rgba(220,234,242,.82) 100%), url('https://images.pexels.com/photos/16229056/pexels-photo-16229056.jpeg?auto=compress&cs=tinysrgb&w=1920'); background-size: cover; background-position: center 42%; background-color: var(--shallow-soft); } /* the white overlay that was erasing the photo */ .hero::before, .page-hero::before { display: none; } .hero .wrap, .page-hero .wrap { position: relative; z-index: 1; } /* text sits slightly darker over photography */ .hero .lead, .page-hero .lead { color: #414A52; } .hero .eyebrow.on-dark, .page-hero .eyebrow.on-dark { color: #17475C; } /* ---------- Diagram: no panel, drawn on the hero ---------- */ .journey { background: none; border: none; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .journey::before { display: none; } /* Bar 1 darkened: a mid-blue on a near-white sky measured 2.80. #54879F gives 3.32 while staying lighter than bar 2, so the stages still deepen in order. */ .j-bar.b1 { fill: #54879F; } .j-bar.b2 { fill: var(--b2); } .j-bar.b3 { fill: var(--b3); } .j-bar.b4 { fill: var(--b4); } /* labels get a soft light halo so they hold over the photograph without the heavy outline that reads as a sticker */ .j-label { fill: var(--swan-abyss); font-weight: 600; stroke: rgba(255,255,255,.85); stroke-width: 3px; paint-order: stroke; } .j-base { stroke: rgba(35,73,89,.28); } .j-path { stroke: var(--swan-deep); } .j-node { fill: #fff; stroke: var(--swan-deep); } .j-num { fill: var(--swan-deep); } .journey-cap { color: #414A52; text-shadow: 0 1px 3px rgba(255,255,255,.9); } /* Edgeless wash behind the diagram — not a panel. A radial lightening that fades to nothing, so the bars always have a light canvas regardless of which part of the photograph sits behind them. */ .journey { position: relative; } .journey::after { content: ""; position: absolute; inset: -16% -12% -20% -12%; background: radial-gradient( ellipse 74% 66% at 52% 52%, rgba(246,250,252,.82) 0%, rgba(246,250,252,.62) 44%, rgba(246,250,252,.28) 72%, rgba(246,250,252,0) 100% ); pointer-events: none; z-index: 0; } .journey svg, .journey-cap { position: relative; z-index: 1; } /* ================================================================== FIX — footer was ~620px tall for ~300px of content Every value was tuned for a marketing section, not a footer: 72px top padding, 40px grid gaps, 12px between links, and a centred disclaimer set at near-body size. Tightened throughout. ================================================================== */ footer { padding: 52px 0 0; } .footer-grid { grid-template-columns: 1.6fr 1fr 1.15fr 1fr; gap: 28px 36px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.11); } .footer-brand .brand { gap: 11px; } .footer-brand .brand svg { width: 26px; height: 31px; flex: none; } .footer-brand .brand-text { font-size: 16px; letter-spacing: .09em; } .footer-brand p { font-size: 13px; line-height: 1.55; margin-top: 10px; max-width: 290px; color: #93A9B6; } .footer-col h4 { font-size: 11.5px; letter-spacing: .8px; margin-bottom: 11px; font-weight: 600; color: var(--shallow); } .footer-col ul li { margin-bottom: 6px; } .footer-col a { font-size: 13.5px; line-height: 1.5; } .footer-bottom { gap: 8px; padding: 20px 0 26px; } .footer-contact-line { font-size: 13.5px; } .legal-line { font-size: 11.5px; line-height: 1.55; max-width: 800px; color: #7F97A5; } .footer-meta { font-size: 11.5px; color: #7F97A5; } @media (max-width: 900px) { footer { padding: 40px 0 0; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 28px; padding-bottom: 24px; } .footer-brand { grid-column: 1 / -1; } .footer-brand p { max-width: none; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { padding: 18px 0 22px; } .legal-line { font-size: 11px; } } /* ================================================================== CTA band matched to the hero treatment Light scrim over the photograph, dark text, filled button — the same language as the top banner rather than a dark slab. Scrim is 80% here against the hero's 72%, because this photo is a dark interior while the hero is a bright cityscape. Matching the *number* would not have matched the *look*. ================================================================== */ /* Plain CTA band (10 inner pages) — light, no photograph. Keeping the photo off these avoids repeating one image on every page of the site. */ .cta-band { background-color: var(--shallow-soft); background-image: linear-gradient(172deg, var(--silk) 0%, var(--shallow-soft) 62%, #D2E3EC 100%); border-top: 1px solid var(--shallow-line); border-bottom: 1px solid var(--shallow-line); position: relative; } /* Homepage CTA — the photograph, under the same light scrim as the hero */ .cta-band.has-photo { background-image: linear-gradient(172deg, rgba(242,247,250,.82) 0%, rgba(242,247,250,.76) 48%, rgba(220,234,242,.84) 100%), url('https://images.pexels.com/photos/4339910/pexels-photo-4339910.jpeg?auto=compress&cs=tinysrgb&w=1600'); background-size: cover; background-position: center 30%; } .cta-band .wrap { position: relative; z-index: 1; } .cta-band h2 { color: var(--swan-abyss); } .cta-band p { color: #414A52; } .cta-band .eyebrow { color: #17475C; } /* the button was white-on-dark; on a light band it needs to be filled */ .cta-band .btn.on-dark { background: var(--swan-deep); color: #fff; border-color: var(--swan-deep); box-shadow: 0 1px 2px rgba(var(--shadow-tint), .16); } .cta-band .btn.on-dark:hover { background: var(--swan); border-color: var(--swan); box-shadow: 0 7px 18px -6px rgba(var(--shadow-tint), .34); } .cta-band .btn.ghost-light { background: var(--white); color: var(--swan-deep); border-color: var(--shallow-line); } .cta-band .btn.ghost-light:hover { background: var(--swan-deep); color: #fff; border-color: var(--swan-deep); } @media (max-width: 760px) { .cta-band.has-photo { background-image: linear-gradient(180deg, rgba(242,247,250,.86), rgba(220,234,242,.88)), url('https://images.pexels.com/photos/4339910/pexels-photo-4339910.jpeg?auto=compress&cs=tinysrgb&w=900'); } } /* ================================================================== Scope & Referrals: dark slab -> light band It was the only dark surface left mid-page once the hero, bands and CTA all went light, so it read as a leftover rather than an anchor. Now a light band, with the weight carried by structure instead of darkness: two differentiated cards, a heavier rule, larger type. ================================================================== */ .boundary { background: linear-gradient(172deg, var(--silk) 0%, var(--shallow-soft) 58%, #D2E3EC 100%); color: var(--ink); border-top: 1px solid var(--shallow-line); border-bottom: 1px solid var(--shallow-line); } .boundary::before { display: none; } .boundary h2 { color: var(--swan-abyss); } .boundary h3 { color: var(--swan-deep); } .boundary p { color: var(--muted); } .boundary .eyebrow { color: var(--swan-ink); } /* The two columns now differ by surface rather than by opacity. White for what you handle, tinted for what you refer on — the same semantic split, carried without a dark background. */ .scope-col { border-radius: var(--radius); border: 1px solid var(--shallow-line); box-shadow: 0 2px 4px -2px rgba(var(--shadow-tint), .07), 0 16px 34px -22px rgba(var(--shadow-tint), .22); } .scope-do { background: var(--white); border-left: 3px solid var(--swan); } .scope-refer { background: rgba(255,255,255,.55); border-left: 3px solid var(--shallow-line); } .scope-do .scope-head { color: var(--swan-ink); } .scope-do .scope-head em { background: rgba(52,103,124,.14); color: var(--swan-deep); } .scope-refer .scope-head { color: var(--muted); } .scope-refer .scope-head em { background: rgba(77,88,96,.12); color: var(--muted); } .scope-col li { color: var(--ink); border-bottom-color: var(--line); } .scope-col li span { color: var(--muted); } /* the button here was white-on-dark */ .boundary .btn.on-dark { background: var(--swan-deep); color: #fff; border-color: var(--swan-deep); box-shadow: 0 1px 2px rgba(var(--shadow-tint), .16); } .boundary .btn.on-dark:hover { background: var(--swan); border-color: var(--swan); box-shadow: 0 7px 18px -6px rgba(var(--shadow-tint), .34); } .boundary .btn.ghost-light { background: var(--white); color: var(--swan-deep); border-color: var(--shallow-line); } .boundary .btn.ghost-light:hover { background: var(--swan-deep); color: #fff; border-color: var(--swan-deep); } /* guard note sat on the dark panel */ .boundary .guard-note { background: rgba(255,255,255,.7); border-left-color: var(--swan); color: var(--muted); } /* ================================================================== FIX — boundary list text was still coloured for a dark panel `.boundary p` was re-coloured when the panel went light, but `.boundary li` was not, so it kept #C6D8E2 and vanished. The inline style="color:#fff" on each has also been removed from the HTML — inline styles beat the stylesheet, so no CSS rule could have fixed those. ================================================================== */ .boundary ul, .boundary ul li, .boundary li { color: var(--ink); } .boundary li strong { color: var(--swan-deep); font-weight: 600; } .boundary ul li::marker { color: var(--swan); } .boundary .eyebrow, .boundary .eyebrow.on-dark { color: var(--swan-ink); } /* the same pattern appears in guard notes and pillar scope blocks */ .guard-note strong, .audience-note strong, .pricing-note strong { color: var(--swan-deep); } .guard-note li, .audience-note li { color: var(--ink); } /* ================================================================== FIX — specificity: `.hero p.lead` (0,2,1) was beating `.hero .lead` (0,2,0), so the hero paragraph kept its old pale colour even after the hero went light. Matching specificity here. ================================================================== */ .hero p.lead, .page-hero p.lead { color: #414A52; } .cta-band p, .cta-band .lead { color: #414A52; } .boundary p, .boundary ul, .boundary p.lead { color: var(--muted); } .boundary li { color: var(--ink); }