@charset "UTF-8";
:root {
/* Core palette */
--white: #ffffff;
--black: #000000;
--primary-yellow: #F2B500;
--dark-background: #332600;
--vibrant-coral: #FF6F61;
--bright-aqua: #00CFC1;
--light-grey: #F2F1EF;
--dark-grey: #A7A7A7;
/* Semantic aliases */
--text-primary: var(--black);
--text-secondary: #3f3f3f;
--text-muted: var(--dark-grey);
--surface-main: var(--white);
--surface-soft: var(--light-grey);
--surface-dark: var(--dark-background);
--surface-footer: #0f1116;
--surface-footer-inner: #0f1116;
--border-light: rgba(0, 0, 0, 0.08);
--border-dark: rgba(255, 255, 255, 0.12);
/* Brand aliases */
--brand-yellow: var(--primary-yellow);
--brand-coral: var(--vibrant-coral);
--brand-aqua: var(--bright-aqua);
--bg-dark: var(--dark-background);
/* Shared motion */
--ease-smooth: cubic-bezier(.22,.61,.36,1);
--t-fast: .2s var(--ease-smooth);
--t-med: .35s var(--ease-smooth);
--t-slow: .75s var(--ease-smooth);
/* Radius */
--radius-sm: 10px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-pill: 999px;
--oxiti-radius: 12px;
/* Footer / pills */
--footer-bg: #0f1116;
--footer-bg-inner: #0f1116;
--pill-bg: #1A1A1A;
--pill-fg: var(--primary-yellow);
--pill-size: 30px;
--pill-pad: 12px;
--pill-gap: 14px;
--pill-shadow: 0 0 18px var(--pill-fg), 0 0 1px rgba(255,255,255,.15) inset;
/* Footer reveal */
--wm-opacity: .08;
--wm-stick-top: 0;
--wm-curtain-height: 45vh;
--wm-soft-edge: 24px;
/* Gradients */
--gradient-aqua-yellow: linear-gradient(180deg, #00CFC1 0%, #F2B500 100%);
--gradient-coral-dark: linear-gradient(180deg, #FF6F61 0%, #332600 100%);
--gradient-light-dark-grey: linear-gradient(180deg, #F2F1EF 0%, #A7A7A7 100%); }
.has-white-color {
color: var(--white) !important; }
.has-black-color {
color: var(--black) !important; }
.has-primary-yellow-color {
color: var(--primary-yellow) !important; }
.has-dark-background-color {
color: var(--dark-background) !important; }
.has-vibrant-coral-color {
color: var(--vibrant-coral) !important; }
.has-bright-aqua-color {
color: var(--bright-aqua) !important; }
.has-light-grey-color {
color: var(--light-grey) !important; }
.has-dark-grey-color {
color: var(--dark-grey) !important; }
.has-white-background-color {
background-color: var(--white) !important; }
.has-black-background-color {
background-color: var(--black) !important; }
.has-primary-yellow-background-color {
background-color: var(--primary-yellow) !important; }
.has-dark-background-background-color {
background-color: var(--dark-background) !important; }
.has-vibrant-coral-background-color {
background-color: var(--vibrant-coral) !important; }
.has-bright-aqua-background-color {
background-color: var(--bright-aqua) !important; }
.has-light-grey-background-color {
background-color: var(--light-grey) !important; }
.has-dark-grey-background-color {
background-color: var(--dark-grey) !important; }
.has-gradient-aqua-yellow-background {
background: var(--gradient-aqua-yellow) !important; }
.has-gradient-coral-darkbg-background {
background: var(--gradient-coral-dark) !important; }
.has-gradient-light-dark-grey-background {
background: var(--gradient-light-dark-grey) !important; }
.text-gradient-aqua-yellow {
background: var(--gradient-aqua-yellow);
-webkit-background-clip: text;
background-clip: text;
color: transparent; }
.text-gradient-coral-dark {
background: var(--gradient-coral-dark);
-webkit-background-clip: text;
background-clip: text;
color: transparent; }
/**
* Containers (parent wrapper approach)
* Usage:
*
*
*
*
*/
.container,
.container-sm,
.container-lg,
.container-xxl {
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
padding-left: 24px;
padding-right: 24px; }
@media (max-width: 900px) {
.container,
.container-sm,
.container-lg,
.container-xxl {
padding-left: 18px;
padding-right: 18px; } }
@media (max-width: 600px) {
.container,
.container-sm,
.container-lg,
.container-xxl {
padding-left: 14px;
padding-right: 14px; } }
.container {
max-width: 1200px; }
.container-sm {
max-width: 920px; }
.container-lg {
max-width: 1440px; }
.container-xxl {
max-width: 1640px; }
.container-flush {
padding-left: 0 !important;
padding-right: 0 !important; }
/**
* Grid System
*/
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr); }
.grid.align-top {
align-items: start; }
.grid.align-center {
align-items: center; }
.grid.align-bottom {
align-items: end; }
.grid.justify-start {
text-align: left; }
.grid.justify-center {
text-align: center; }
.grid.justify-end {
text-align: right; }
.grid > .column.align-top {
align-self: start; }
.grid > .column.align-center {
align-self: center; }
.grid > .column.align-bottom {
align-self: end; }
.grid > .column.justify-start {
text-align: left; }
.grid > .column.justify-center {
text-align: center; }
.grid > .column.justify-end {
text-align: right; }
.grid > .column.width-1 {
grid-column: span 1; }
.grid > .column.width-2 {
grid-column: span 2; }
.grid > .column.width-3 {
grid-column: span 3; }
.grid > .column.width-4 {
grid-column: span 4; }
.grid > .column.width-5 {
grid-column: span 5; }
.grid > .column.width-6 {
grid-column: span 6; }
.grid > .column.width-7 {
grid-column: span 7; }
.grid > .column.width-8 {
grid-column: span 8; }
.grid > .column.width-9 {
grid-column: span 9; }
.grid > .column.width-10 {
grid-column: span 10; }
.grid > .column.width-11 {
grid-column: span 11; }
.grid > .column.width-12 {
grid-column: span 12; }
.grid > .column.order-0 {
order: 0; }
.grid > .column.order-1 {
order: 1; }
.grid > .column.order-2 {
order: 2; }
.grid > .column.order-3 {
order: 3; }
.grid > .column.order-4 {
order: 4; }
.grid > .column.order-5 {
order: 5; }
.grid > .column.order-6 {
order: 6; }
@media (max-width: 1800px) {
.grid > .column.width-1800-1 {
grid-column: span 1; }
.grid > .column.width-1800-2 {
grid-column: span 2; }
.grid > .column.width-1800-3 {
grid-column: span 3; }
.grid > .column.width-1800-4 {
grid-column: span 4; }
.grid > .column.width-1800-5 {
grid-column: span 5; }
.grid > .column.width-1800-6 {
grid-column: span 6; }
.grid > .column.width-1800-7 {
grid-column: span 7; }
.grid > .column.width-1800-8 {
grid-column: span 8; }
.grid > .column.width-1800-9 {
grid-column: span 9; }
.grid > .column.width-1800-10 {
grid-column: span 10; }
.grid > .column.width-1800-11 {
grid-column: span 11; }
.grid > .column.width-1800-12 {
grid-column: span 12; }
.grid > .column.order-1800-0 {
order: 0; }
.grid > .column.order-1800-1 {
order: 1; }
.grid > .column.order-1800-2 {
order: 2; }
.grid > .column.order-1800-3 {
order: 3; }
.grid > .column.order-1800-4 {
order: 4; }
.grid > .column.order-1800-5 {
order: 5; }
.grid > .column.order-1800-6 {
order: 6; } }
@media (max-width: 1700px) {
.grid > .column.width-1700-1 {
grid-column: span 1; }
.grid > .column.width-1700-2 {
grid-column: span 2; }
.grid > .column.width-1700-3 {
grid-column: span 3; }
.grid > .column.width-1700-4 {
grid-column: span 4; }
.grid > .column.width-1700-5 {
grid-column: span 5; }
.grid > .column.width-1700-6 {
grid-column: span 6; }
.grid > .column.width-1700-7 {
grid-column: span 7; }
.grid > .column.width-1700-8 {
grid-column: span 8; }
.grid > .column.width-1700-9 {
grid-column: span 9; }
.grid > .column.width-1700-10 {
grid-column: span 10; }
.grid > .column.width-1700-11 {
grid-column: span 11; }
.grid > .column.width-1700-12 {
grid-column: span 12; }
.grid > .column.order-1700-0 {
order: 0; }
.grid > .column.order-1700-1 {
order: 1; }
.grid > .column.order-1700-2 {
order: 2; }
.grid > .column.order-1700-3 {
order: 3; }
.grid > .column.order-1700-4 {
order: 4; }
.grid > .column.order-1700-5 {
order: 5; }
.grid > .column.order-1700-6 {
order: 6; } }
@media (max-width: 1600px) {
.grid > .column.width-1600-1 {
grid-column: span 1; }
.grid > .column.width-1600-2 {
grid-column: span 2; }
.grid > .column.width-1600-3 {
grid-column: span 3; }
.grid > .column.width-1600-4 {
grid-column: span 4; }
.grid > .column.width-1600-5 {
grid-column: span 5; }
.grid > .column.width-1600-6 {
grid-column: span 6; }
.grid > .column.width-1600-7 {
grid-column: span 7; }
.grid > .column.width-1600-8 {
grid-column: span 8; }
.grid > .column.width-1600-9 {
grid-column: span 9; }
.grid > .column.width-1600-10 {
grid-column: span 10; }
.grid > .column.width-1600-11 {
grid-column: span 11; }
.grid > .column.width-1600-12 {
grid-column: span 12; }
.grid > .column.order-1600-0 {
order: 0; }
.grid > .column.order-1600-1 {
order: 1; }
.grid > .column.order-1600-2 {
order: 2; }
.grid > .column.order-1600-3 {
order: 3; }
.grid > .column.order-1600-4 {
order: 4; }
.grid > .column.order-1600-5 {
order: 5; }
.grid > .column.order-1600-6 {
order: 6; } }
@media (max-width: 1500px) {
.grid > .column.width-1500-1 {
grid-column: span 1; }
.grid > .column.width-1500-2 {
grid-column: span 2; }
.grid > .column.width-1500-3 {
grid-column: span 3; }
.grid > .column.width-1500-4 {
grid-column: span 4; }
.grid > .column.width-1500-5 {
grid-column: span 5; }
.grid > .column.width-1500-6 {
grid-column: span 6; }
.grid > .column.width-1500-7 {
grid-column: span 7; }
.grid > .column.width-1500-8 {
grid-column: span 8; }
.grid > .column.width-1500-9 {
grid-column: span 9; }
.grid > .column.width-1500-10 {
grid-column: span 10; }
.grid > .column.width-1500-11 {
grid-column: span 11; }
.grid > .column.width-1500-12 {
grid-column: span 12; }
.grid > .column.order-1500-0 {
order: 0; }
.grid > .column.order-1500-1 {
order: 1; }
.grid > .column.order-1500-2 {
order: 2; }
.grid > .column.order-1500-3 {
order: 3; }
.grid > .column.order-1500-4 {
order: 4; }
.grid > .column.order-1500-5 {
order: 5; }
.grid > .column.order-1500-6 {
order: 6; } }
@media (max-width: 1400px) {
.grid > .column.width-1400-1 {
grid-column: span 1; }
.grid > .column.width-1400-2 {
grid-column: span 2; }
.grid > .column.width-1400-3 {
grid-column: span 3; }
.grid > .column.width-1400-4 {
grid-column: span 4; }
.grid > .column.width-1400-5 {
grid-column: span 5; }
.grid > .column.width-1400-6 {
grid-column: span 6; }
.grid > .column.width-1400-7 {
grid-column: span 7; }
.grid > .column.width-1400-8 {
grid-column: span 8; }
.grid > .column.width-1400-9 {
grid-column: span 9; }
.grid > .column.width-1400-10 {
grid-column: span 10; }
.grid > .column.width-1400-11 {
grid-column: span 11; }
.grid > .column.width-1400-12 {
grid-column: span 12; }
.grid > .column.order-1400-0 {
order: 0; }
.grid > .column.order-1400-1 {
order: 1; }
.grid > .column.order-1400-2 {
order: 2; }
.grid > .column.order-1400-3 {
order: 3; }
.grid > .column.order-1400-4 {
order: 4; }
.grid > .column.order-1400-5 {
order: 5; }
.grid > .column.order-1400-6 {
order: 6; } }
@media (max-width: 1300px) {
.grid > .column.width-1300-1 {
grid-column: span 1; }
.grid > .column.width-1300-2 {
grid-column: span 2; }
.grid > .column.width-1300-3 {
grid-column: span 3; }
.grid > .column.width-1300-4 {
grid-column: span 4; }
.grid > .column.width-1300-5 {
grid-column: span 5; }
.grid > .column.width-1300-6 {
grid-column: span 6; }
.grid > .column.width-1300-7 {
grid-column: span 7; }
.grid > .column.width-1300-8 {
grid-column: span 8; }
.grid > .column.width-1300-9 {
grid-column: span 9; }
.grid > .column.width-1300-10 {
grid-column: span 10; }
.grid > .column.width-1300-11 {
grid-column: span 11; }
.grid > .column.width-1300-12 {
grid-column: span 12; }
.grid > .column.order-1300-0 {
order: 0; }
.grid > .column.order-1300-1 {
order: 1; }
.grid > .column.order-1300-2 {
order: 2; }
.grid > .column.order-1300-3 {
order: 3; }
.grid > .column.order-1300-4 {
order: 4; }
.grid > .column.order-1300-5 {
order: 5; }
.grid > .column.order-1300-6 {
order: 6; } }
@media (max-width: 1200px) {
.grid > .column.width-1200-1 {
grid-column: span 1; }
.grid > .column.width-1200-2 {
grid-column: span 2; }
.grid > .column.width-1200-3 {
grid-column: span 3; }
.grid > .column.width-1200-4 {
grid-column: span 4; }
.grid > .column.width-1200-5 {
grid-column: span 5; }
.grid > .column.width-1200-6 {
grid-column: span 6; }
.grid > .column.width-1200-7 {
grid-column: span 7; }
.grid > .column.width-1200-8 {
grid-column: span 8; }
.grid > .column.width-1200-9 {
grid-column: span 9; }
.grid > .column.width-1200-10 {
grid-column: span 10; }
.grid > .column.width-1200-11 {
grid-column: span 11; }
.grid > .column.width-1200-12 {
grid-column: span 12; }
.grid > .column.order-1200-0 {
order: 0; }
.grid > .column.order-1200-1 {
order: 1; }
.grid > .column.order-1200-2 {
order: 2; }
.grid > .column.order-1200-3 {
order: 3; }
.grid > .column.order-1200-4 {
order: 4; }
.grid > .column.order-1200-5 {
order: 5; }
.grid > .column.order-1200-6 {
order: 6; } }
@media (max-width: 1100px) {
.grid > .column.width-1100-1 {
grid-column: span 1; }
.grid > .column.width-1100-2 {
grid-column: span 2; }
.grid > .column.width-1100-3 {
grid-column: span 3; }
.grid > .column.width-1100-4 {
grid-column: span 4; }
.grid > .column.width-1100-5 {
grid-column: span 5; }
.grid > .column.width-1100-6 {
grid-column: span 6; }
.grid > .column.width-1100-7 {
grid-column: span 7; }
.grid > .column.width-1100-8 {
grid-column: span 8; }
.grid > .column.width-1100-9 {
grid-column: span 9; }
.grid > .column.width-1100-10 {
grid-column: span 10; }
.grid > .column.width-1100-11 {
grid-column: span 11; }
.grid > .column.width-1100-12 {
grid-column: span 12; }
.grid > .column.order-1100-0 {
order: 0; }
.grid > .column.order-1100-1 {
order: 1; }
.grid > .column.order-1100-2 {
order: 2; }
.grid > .column.order-1100-3 {
order: 3; }
.grid > .column.order-1100-4 {
order: 4; }
.grid > .column.order-1100-5 {
order: 5; }
.grid > .column.order-1100-6 {
order: 6; } }
@media (max-width: 1000px) {
.grid > .column.width-1000-1 {
grid-column: span 1; }
.grid > .column.width-1000-2 {
grid-column: span 2; }
.grid > .column.width-1000-3 {
grid-column: span 3; }
.grid > .column.width-1000-4 {
grid-column: span 4; }
.grid > .column.width-1000-5 {
grid-column: span 5; }
.grid > .column.width-1000-6 {
grid-column: span 6; }
.grid > .column.width-1000-7 {
grid-column: span 7; }
.grid > .column.width-1000-8 {
grid-column: span 8; }
.grid > .column.width-1000-9 {
grid-column: span 9; }
.grid > .column.width-1000-10 {
grid-column: span 10; }
.grid > .column.width-1000-11 {
grid-column: span 11; }
.grid > .column.width-1000-12 {
grid-column: span 12; }
.grid > .column.order-1000-0 {
order: 0; }
.grid > .column.order-1000-1 {
order: 1; }
.grid > .column.order-1000-2 {
order: 2; }
.grid > .column.order-1000-3 {
order: 3; }
.grid > .column.order-1000-4 {
order: 4; }
.grid > .column.order-1000-5 {
order: 5; }
.grid > .column.order-1000-6 {
order: 6; } }
@media (max-width: 900px) {
.grid > .column.width-900-1 {
grid-column: span 1; }
.grid > .column.width-900-2 {
grid-column: span 2; }
.grid > .column.width-900-3 {
grid-column: span 3; }
.grid > .column.width-900-4 {
grid-column: span 4; }
.grid > .column.width-900-5 {
grid-column: span 5; }
.grid > .column.width-900-6 {
grid-column: span 6; }
.grid > .column.width-900-7 {
grid-column: span 7; }
.grid > .column.width-900-8 {
grid-column: span 8; }
.grid > .column.width-900-9 {
grid-column: span 9; }
.grid > .column.width-900-10 {
grid-column: span 10; }
.grid > .column.width-900-11 {
grid-column: span 11; }
.grid > .column.width-900-12 {
grid-column: span 12; }
.grid > .column.order-900-0 {
order: 0; }
.grid > .column.order-900-1 {
order: 1; }
.grid > .column.order-900-2 {
order: 2; }
.grid > .column.order-900-3 {
order: 3; }
.grid > .column.order-900-4 {
order: 4; }
.grid > .column.order-900-5 {
order: 5; }
.grid > .column.order-900-6 {
order: 6; } }
@media (max-width: 800px) {
.grid > .column.width-800-1 {
grid-column: span 1; }
.grid > .column.width-800-2 {
grid-column: span 2; }
.grid > .column.width-800-3 {
grid-column: span 3; }
.grid > .column.width-800-4 {
grid-column: span 4; }
.grid > .column.width-800-5 {
grid-column: span 5; }
.grid > .column.width-800-6 {
grid-column: span 6; }
.grid > .column.width-800-7 {
grid-column: span 7; }
.grid > .column.width-800-8 {
grid-column: span 8; }
.grid > .column.width-800-9 {
grid-column: span 9; }
.grid > .column.width-800-10 {
grid-column: span 10; }
.grid > .column.width-800-11 {
grid-column: span 11; }
.grid > .column.width-800-12 {
grid-column: span 12; }
.grid > .column.order-800-0 {
order: 0; }
.grid > .column.order-800-1 {
order: 1; }
.grid > .column.order-800-2 {
order: 2; }
.grid > .column.order-800-3 {
order: 3; }
.grid > .column.order-800-4 {
order: 4; }
.grid > .column.order-800-5 {
order: 5; }
.grid > .column.order-800-6 {
order: 6; } }
@media (max-width: 700px) {
.grid > .column.width-700-1 {
grid-column: span 1; }
.grid > .column.width-700-2 {
grid-column: span 2; }
.grid > .column.width-700-3 {
grid-column: span 3; }
.grid > .column.width-700-4 {
grid-column: span 4; }
.grid > .column.width-700-5 {
grid-column: span 5; }
.grid > .column.width-700-6 {
grid-column: span 6; }
.grid > .column.width-700-7 {
grid-column: span 7; }
.grid > .column.width-700-8 {
grid-column: span 8; }
.grid > .column.width-700-9 {
grid-column: span 9; }
.grid > .column.width-700-10 {
grid-column: span 10; }
.grid > .column.width-700-11 {
grid-column: span 11; }
.grid > .column.width-700-12 {
grid-column: span 12; }
.grid > .column.order-700-0 {
order: 0; }
.grid > .column.order-700-1 {
order: 1; }
.grid > .column.order-700-2 {
order: 2; }
.grid > .column.order-700-3 {
order: 3; }
.grid > .column.order-700-4 {
order: 4; }
.grid > .column.order-700-5 {
order: 5; }
.grid > .column.order-700-6 {
order: 6; } }
@media (max-width: 600px) {
.grid > .column.width-600-1 {
grid-column: span 1; }
.grid > .column.width-600-2 {
grid-column: span 2; }
.grid > .column.width-600-3 {
grid-column: span 3; }
.grid > .column.width-600-4 {
grid-column: span 4; }
.grid > .column.width-600-5 {
grid-column: span 5; }
.grid > .column.width-600-6 {
grid-column: span 6; }
.grid > .column.width-600-7 {
grid-column: span 7; }
.grid > .column.width-600-8 {
grid-column: span 8; }
.grid > .column.width-600-9 {
grid-column: span 9; }
.grid > .column.width-600-10 {
grid-column: span 10; }
.grid > .column.width-600-11 {
grid-column: span 11; }
.grid > .column.width-600-12 {
grid-column: span 12; }
.grid > .column.order-600-0 {
order: 0; }
.grid > .column.order-600-1 {
order: 1; }
.grid > .column.order-600-2 {
order: 2; }
.grid > .column.order-600-3 {
order: 3; }
.grid > .column.order-600-4 {
order: 4; }
.grid > .column.order-600-5 {
order: 5; }
.grid > .column.order-600-6 {
order: 6; } }
@media (max-width: 500px) {
.grid > .column.width-500-1 {
grid-column: span 1; }
.grid > .column.width-500-2 {
grid-column: span 2; }
.grid > .column.width-500-3 {
grid-column: span 3; }
.grid > .column.width-500-4 {
grid-column: span 4; }
.grid > .column.width-500-5 {
grid-column: span 5; }
.grid > .column.width-500-6 {
grid-column: span 6; }
.grid > .column.width-500-7 {
grid-column: span 7; }
.grid > .column.width-500-8 {
grid-column: span 8; }
.grid > .column.width-500-9 {
grid-column: span 9; }
.grid > .column.width-500-10 {
grid-column: span 10; }
.grid > .column.width-500-11 {
grid-column: span 11; }
.grid > .column.width-500-12 {
grid-column: span 12; }
.grid > .column.order-500-0 {
order: 0; }
.grid > .column.order-500-1 {
order: 1; }
.grid > .column.order-500-2 {
order: 2; }
.grid > .column.order-500-3 {
order: 3; }
.grid > .column.order-500-4 {
order: 4; }
.grid > .column.order-500-5 {
order: 5; }
.grid > .column.order-500-6 {
order: 6; } }
@media (max-width: 400px) {
.grid > .column.width-400-1 {
grid-column: span 1; }
.grid > .column.width-400-2 {
grid-column: span 2; }
.grid > .column.width-400-3 {
grid-column: span 3; }
.grid > .column.width-400-4 {
grid-column: span 4; }
.grid > .column.width-400-5 {
grid-column: span 5; }
.grid > .column.width-400-6 {
grid-column: span 6; }
.grid > .column.width-400-7 {
grid-column: span 7; }
.grid > .column.width-400-8 {
grid-column: span 8; }
.grid > .column.width-400-9 {
grid-column: span 9; }
.grid > .column.width-400-10 {
grid-column: span 10; }
.grid > .column.width-400-11 {
grid-column: span 11; }
.grid > .column.width-400-12 {
grid-column: span 12; }
.grid > .column.order-400-0 {
order: 0; }
.grid > .column.order-400-1 {
order: 1; }
.grid > .column.order-400-2 {
order: 2; }
.grid > .column.order-400-3 {
order: 3; }
.grid > .column.order-400-4 {
order: 4; }
.grid > .column.order-400-5 {
order: 5; }
.grid > .column.order-400-6 {
order: 6; } }
.grid.gap-25 {
gap: 25px; }
.grid.gap-50 {
gap: 50px; }
/**
* Spacing Utilities
*/
.mt0 {
margin-top: 0px !important; }
.mb0 {
margin-bottom: 0px !important; }
.pt0 {
padding-top: 0px !important; }
.pb0 {
padding-bottom: 0px !important; }
.pl0 {
padding-left: 0px !important; }
.pr0 {
padding-right: 0px !important; }
.mt10 {
margin-top: 10px !important; }
.mb10 {
margin-bottom: 10px !important; }
.pt10 {
padding-top: 10px !important; }
.pb10 {
padding-bottom: 10px !important; }
.pl10 {
padding-left: 10px !important; }
.pr10 {
padding-right: 10px !important; }
.mt20 {
margin-top: 20px !important; }
.mb20 {
margin-bottom: 20px !important; }
.pt20 {
padding-top: 20px !important; }
.pb20 {
padding-bottom: 20px !important; }
.pl20 {
padding-left: 20px !important; }
.pr20 {
padding-right: 20px !important; }
.mt25 {
margin-top: 25px !important; }
.mb25 {
margin-bottom: 25px !important; }
.pt25 {
padding-top: 25px !important; }
.pb25 {
padding-bottom: 25px !important; }
.pl25 {
padding-left: 25px !important; }
.pr25 {
padding-right: 25px !important; }
.mt30 {
margin-top: 30px !important; }
.mb30 {
margin-bottom: 30px !important; }
.pt30 {
padding-top: 30px !important; }
.pb30 {
padding-bottom: 30px !important; }
.pl30 {
padding-left: 30px !important; }
.pr30 {
padding-right: 30px !important; }
.mt40 {
margin-top: 40px !important; }
.mb40 {
margin-bottom: 40px !important; }
.pt40 {
padding-top: 40px !important; }
.pb40 {
padding-bottom: 40px !important; }
.pl40 {
padding-left: 40px !important; }
.pr40 {
padding-right: 40px !important; }
.mt50 {
margin-top: 50px !important; }
.mb50 {
margin-bottom: 50px !important; }
.pt50 {
padding-top: 50px !important; }
.pb50 {
padding-bottom: 50px !important; }
.pl50 {
padding-left: 50px !important; }
.pr50 {
padding-right: 50px !important; }
.mt60 {
margin-top: 60px !important; }
.mb60 {
margin-bottom: 60px !important; }
.pt60 {
padding-top: 60px !important; }
.pb60 {
padding-bottom: 60px !important; }
.pl60 {
padding-left: 60px !important; }
.pr60 {
padding-right: 60px !important; }
.mt70 {
margin-top: 70px !important; }
.mb70 {
margin-bottom: 70px !important; }
.pt70 {
padding-top: 70px !important; }
.pb70 {
padding-bottom: 70px !important; }
.pl70 {
padding-left: 70px !important; }
.pr70 {
padding-right: 70px !important; }
.mt80 {
margin-top: 80px !important; }
.mb80 {
margin-bottom: 80px !important; }
.pt80 {
padding-top: 80px !important; }
.pb80 {
padding-bottom: 80px !important; }
.pl80 {
padding-left: 80px !important; }
.pr80 {
padding-right: 80px !important; }
.mt90 {
margin-top: 90px !important; }
.mb90 {
margin-bottom: 90px !important; }
.pt90 {
padding-top: 90px !important; }
.pb90 {
padding-bottom: 90px !important; }
.pl90 {
padding-left: 90px !important; }
.pr90 {
padding-right: 90px !important; }
.mt100 {
margin-top: 100px !important; }
.mb100 {
margin-bottom: 100px !important; }
.pt100 {
padding-top: 100px !important; }
.pb100 {
padding-bottom: 100px !important; }
.pl100 {
padding-left: 100px !important; }
.pr100 {
padding-right: 100px !important; }
.mt120 {
margin-top: 120px !important; }
.mb120 {
margin-bottom: 120px !important; }
.pt120 {
padding-top: 120px !important; }
.pb120 {
padding-bottom: 120px !important; }
.pl120 {
padding-left: 120px !important; }
.pr120 {
padding-right: 120px !important; }
.mt140 {
margin-top: 140px !important; }
.mb140 {
margin-bottom: 140px !important; }
.pt140 {
padding-top: 140px !important; }
.pb140 {
padding-bottom: 140px !important; }
.pl140 {
padding-left: 140px !important; }
.pr140 {
padding-right: 140px !important; }
.mt160 {
margin-top: 160px !important; }
.mb160 {
margin-bottom: 160px !important; }
.pt160 {
padding-top: 160px !important; }
.pb160 {
padding-bottom: 160px !important; }
.pl160 {
padding-left: 160px !important; }
.pr160 {
padding-right: 160px !important; }
.mt180 {
margin-top: 180px !important; }
.mb180 {
margin-bottom: 180px !important; }
.pt180 {
padding-top: 180px !important; }
.pb180 {
padding-bottom: 180px !important; }
.pl180 {
padding-left: 180px !important; }
.pr180 {
padding-right: 180px !important; }
.mt200 {
margin-top: 200px !important; }
.mb200 {
margin-bottom: 200px !important; }
.pt200 {
padding-top: 200px !important; }
.pb200 {
padding-bottom: 200px !important; }
.pl200 {
padding-left: 200px !important; }
.pr200 {
padding-right: 200px !important; }
/* =========================================================
GUTENBERG → FRAMEWORK BRIDGE
Scope: ONLY column parents
========================================================= */
/**
* Base Gutenberg columns reset
*/
.wp-block-columns {
width: 100%;
box-sizing: border-box; }
/**
* Parent-controlled column width system
* This class is the explicit opt-in
*/
.parent-columns-width {
margin-left: auto;
margin-right: auto;
width: 100%;
box-sizing: border-box;
padding-left: 24px;
padding-right: 24px; }
@media (max-width: 900px) {
.parent-columns-width {
padding-left: 18px;
padding-right: 18px; } }
@media (max-width: 600px) {
.parent-columns-width {
padding-left: 14px;
padding-right: 14px; } }
/* ===============================
WIDTH MODES
=============================== */
/* STANDARD (default container) */
.parent-columns-width:not(.wide-width):not(.small-width):not(.xs-width):not(.full-width) {
max-width: 1200px; }
/* WIDE */
.parent-columns-width.wide-width {
max-width: 1440px; }
/* SMALL */
.parent-columns-width.small-width {
max-width: 920px; }
/* EXTRA SMALL */
.parent-columns-width.xs-width {
max-width: 920px; }
/* FULL WIDTH (edge-to-edge) */
.parent-columns-width.full-width {
max-width: none;
padding-left: 0;
padding-right: 0; }
/* ===============================
COLUMN GAPS
=============================== */
/**
* Gutenberg columns gap alignment
* Mirrors your grid gap logic
*/
.parent-columns-width > .wp-block-column {
box-sizing: border-box; }
/* Default gap */
.wp-block-columns {
gap: 24px; }
/* Tablet */
@media (max-width: 900px) {
.wp-block-columns {
gap: 18px; } }
/* Mobile */
@media (max-width: 600px) {
.wp-block-columns {
gap: 14px; } }
/* ===============================
OPTIONAL: ALIGNMENTS
=============================== */
.wp-block-columns.align-top {
align-items: flex-start; }
.wp-block-columns.align-center {
align-items: center; }
.wp-block-columns.align-bottom {
align-items: flex-end; }
html.lenis, html.lenis body {
height: auto; }
.lenis.lenis-smooth {
scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain; }
.lenis.lenis-stopped {
overflow: hidden; }
.lenis.lenis-smooth iframe {
pointer-events: none; }
.skew-up {
font-kerning: none;
overflow: hidden; }
.skew-up .line {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
.skew-up .word {
transform: translateY(100px); }
* {
font-variant-ligatures: none; }
html {
line-height: 1.6em;
-webkit-text-size-adjust: 100%;
scroll-behavior: auto; }
body {
margin: 0; }
main {
display: block; }
hr {
box-sizing: content-box;
height: 0;
overflow: visible; }
a {
background-color: transparent;
text-decoration: none;
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-ms-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all; }
abbr[title] {
border-bottom: none; }
b,
strong {
font-weight: bold; }
.italic {
font-style: italic; }
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em; }
small {
font-size: 80%; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em;
font-size: 50%; }
sup {
top: -0.5em;
font-size: 50%; }
img,
iframe {
border-style: none; }
img {
width: 100%;
height: auto; }
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0; }
button,
input {
overflow: visible; }
button,
select {
text-transform: none; }
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
appearance: button; }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
fieldset {
padding: 0.35em 0.75em 0.625em; }
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal; }
progress {
vertical-align: baseline; }
textarea {
overflow: auto; }
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
[type="search"] {
-webkit-appearance: textfield;
appearance: textfield;
outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit; }
details {
display: block; }
summary {
display: list-item; }
template,
[hidden] {
display: none; }
.clear {
clear: both; }
.clear-left {
clear: left; }
.clear-float {
clear: right; }
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
margin: 0;
padding: 0; }
h1:where(.wp-block-heading).has-background,
h2:where(.wp-block-heading).has-background,
h3:where(.wp-block-heading).has-background,
h4:where(.wp-block-heading).has-background,
h5:where(.wp-block-heading).has-background,
h6:where(.wp-block-heading).has-background {
padding: 0; }
p.has-background {
padding: 0; }
.smooth {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-ms-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all; }
body {
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 1.2;
color: var(--text-primary, var(--black)); }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Outfit", sans-serif;
font-weight: 600;
line-height: 1.3;
margin-top: 0;
margin-bottom: 1.25rem; }
h1.bold,
h1 strong,
h2.bold,
h2 strong,
h3.bold,
h3 strong,
h4.bold,
h4 strong,
h5.bold,
h5 strong,
h6.bold,
h6 strong {
font-weight: 700; }
h1.bolder,
h2.bolder,
h3.bolder,
h4.bolder,
h5.bolder,
h6.bolder {
font-weight: 800; }
h1 {
font-size: 3.4rem;
line-height: 1.05; }
h2 {
font-size: 2.6rem;
line-height: 1.1; }
h2.wp-block-heading {
font-size: 2.6rem; }
@media (max-width: 700px) {
h2.wp-block-heading {
font-size: 2rem;
line-height: 1.15; } }
h3 {
font-size: 1.9rem;
line-height: 1.15; }
h4 {
font-size: 1.3rem;
line-height: 1.2; }
h5,
h6 {
font-size: 1rem;
line-height: 1.3; }
p {
margin-top: 0;
margin-bottom: 0; }
p + p {
margin-top: 18px; }
p + p.no-margin {
margin-top: 0; }
.xs-text {
font-size: 0.75rem;
line-height: 1.4; }
.small-text {
font-size: 0.875rem;
line-height: 1.5; }
.mid-text {
font-size: 1rem;
line-height: 1.6; }
.large-text {
font-size: 1.125rem;
line-height: 1.65; }
@media (max-width: 900px) {
.large-text {
font-size: 1.05rem;
line-height: 1.6; } }
@media (max-width: 700px) {
.large-text {
font-size: 1rem;
line-height: 1.6; } }
.xs-header {
font-size: 1.1rem;
line-height: 1.2; }
@media (max-width: 700px) {
.xs-header {
font-size: 1rem;
line-height: 1.2; } }
.small-header {
font-size: 1.35rem;
line-height: 1.2; }
@media (max-width: 900px) {
.small-header {
font-size: 1.25rem;
line-height: 1.2; } }
@media (max-width: 700px) {
.small-header {
font-size: 1.15rem;
line-height: 1.2; } }
.mid-header {
font-size: 1.75rem;
line-height: 1.15; }
@media (max-width: 700px) {
.mid-header {
font-size: 1.5rem;
line-height: 1.15; } }
.big-header {
font-size: 2.6rem;
line-height: 1.05; }
@media (max-width: 700px) {
.big-header {
font-size: 2rem;
line-height: 1.08; } }
body.font-size-large {
font-size: 1.2rem;
line-height: 1.75; }
body.font-size-large .xs-text {
font-size: 0.9rem; }
body.font-size-large .small-text {
font-size: 1rem; }
body.font-size-large .mid-text {
font-size: 1.15rem; }
body.font-size-large .large-text {
font-size: 1.3rem;
line-height: 1.75; }
@media (max-width: 700px) {
body.font-size-large .large-text {
font-size: 1.15rem;
line-height: 1.7; } }
body.font-size-large .xs-header {
font-size: 1.35rem;
line-height: 1.2; }
@media (max-width: 700px) {
body.font-size-large .xs-header {
font-size: 1.25rem;
line-height: 1.2; } }
body.font-size-large .small-header {
font-size: 1.6rem;
line-height: 1.15; }
@media (max-width: 700px) {
body.font-size-large .small-header {
font-size: 1.45rem;
line-height: 1.15; } }
body.font-size-large .mid-header {
font-size: 2rem;
line-height: 1.1; }
@media (max-width: 700px) {
body.font-size-large .mid-header {
font-size: 1.8rem;
line-height: 1.1; } }
body.font-size-large .big-header {
font-size: 3rem;
line-height: 1.02; }
@media (max-width: 700px) {
body.font-size-large .big-header {
font-size: 2.3rem;
line-height: 1.05; } }
/* Gutenberg helpers */
.heading-xs {
font-size: 1rem !important;
line-height: 1.2 !important; }
.heading-sm {
font-size: 1.2rem !important;
line-height: 1.2 !important; }
.heading-md {
font-size: 1.3rem !important;
line-height: 1.2 !important; }
.heading-lg {
font-size: 1.9rem !important;
line-height: 1.15 !important; }
.heading-xl {
font-size: 2.6rem !important;
line-height: 1.1 !important; }
.heading-hero {
font-size: 3.4rem !important;
line-height: 1.05 !important; }
.text-sm {
font-size: 0.9rem !important; }
.text-md {
font-size: 1rem !important; }
.text-lg {
font-size: 1.125rem !important; }
.text-xl {
font-size: 1.25rem !important; }
.no-margin {
margin-bottom: 0 !important; }
.font-heading {
font-family: "Outfit", sans-serif !important; }
.font-body {
font-family: "DM Sans", sans-serif !important; }
.st-highlight {
font-weight: 700; }
:root {
--header-float-top: 18px;
--header-float-gap: 18px;
--header-max-width: 1700px;
--overlay-max-width: 1740px; }
/* -------------------------------------------------------
Global header/nav state
-------------------------------------------------------- */
html.nav-open,
html.nav-open body {
overflow: hidden; }
/* -------------------------------------------------------
Header shell
-------------------------------------------------------- */
.site-header {
position: relative;
z-index: 1000; }
.header-bar {
position: fixed;
top: var(--header-float-top);
left: var(--header-float-gap);
right: var(--header-float-gap);
z-index: 1200;
pointer-events: none; }
.header-bar-inner {
pointer-events: auto;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(10px);
max-width: var(--header-max-width);
margin-left: auto;
margin-right: auto;
overflow: hidden;
transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease; }
.header-bar-inner.bar-inner-open {
background: #332600;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
.header-bar-inner.bar-inner-open .site-logo .logo-text,
.header-bar-inner.bar-inner-open .site-logo svg path,
.header-bar-inner.bar-inner-open .site-logo svg g,
.header-bar-inner.bar-inner-open .site-logo svg polygon,
.header-bar-inner.bar-inner-open .site-logo svg rect {
fill: #ffffff; }
.header-bar-inner.bar-inner-open .site-logo svg circle {
fill: #F2B500; }
.header-bar-inner.bar-inner-open .btn-menu {
background: #F2B500;
color: #332600;
border-color: rgba(255, 255, 255, 0.14); }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 42px; }
.header-left {
display: flex;
align-items: center;
gap: 16px;
min-width: 0; }
.header-right {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0; }
/* -------------------------------------------------------
Logo
-------------------------------------------------------- */
.site-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 0; }
.site-logo img,
.site-logo svg {
display: block;
width: auto;
height: auto;
max-height: 46px; }
.site-logo:hover, .site-logo:focus-visible {
opacity: 0.92;
outline: none; }
/* -------------------------------------------------------
Menu button
-------------------------------------------------------- */
.btn-menu {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #F2B500;
color: #332600;
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
appearance: none;
transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.btn-menu .btn-menu__icon {
font-size: 18px;
line-height: 1;
position: relative;
top: -1px; }
.btn-menu .btn-menu__text {
line-height: 1; }
.btn-menu:hover, .btn-menu:focus-visible {
background: #FF6F61;
color: #ffffff;
border-color: rgba(255, 111, 97, 0.8);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(255, 111, 97, 0.2);
outline: none; }
/* -------------------------------------------------------
Overlay navigation
-------------------------------------------------------- */
.overlay-nav {
position: fixed;
top: 20px;
left: var(--header-float-gap);
right: var(--header-float-gap);
bottom: 24px;
max-width: var(--overlay-max-width);
margin-left: auto;
margin-right: auto;
border-radius: 14px;
background: #332600;
transform: translateY(-110%);
transition: transform 650ms cubic-bezier(0.77, 0, 0.18, 1);
padding-top: 60px;
display: flex;
flex-direction: column;
overflow-y: auto;
z-index: 1100;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38); }
.overlay-nav[hidden] {
display: block !important; }
.overlay-nav .container-xxl {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%; }
html.nav-open .overlay-nav {
transform: translateY(0); }
/* -------------------------------------------------------
Overlay footer row
-------------------------------------------------------- */
.overlay-nav .header-row {
margin-top: auto;
margin-bottom: 30px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 13px; }
.overlay-nav .header-copy,
.overlay-nav .header-credit,
.overlay-nav .header-link {
color: rgba(255, 255, 255, 0.82); }
.overlay-nav .header-link {
text-decoration: none;
transition: color 0.25s ease, opacity 0.25s ease; }
.overlay-nav .header-link:hover, .overlay-nav .header-link:focus-visible {
color: #F2B500;
opacity: 1;
outline: none; }
/* -------------------------------------------------------
Menu wrapper
-------------------------------------------------------- */
.overlay-menu-wrap {
position: relative;
padding-top: 80px;
padding-bottom: 120px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
flex: 1; }
.nav-badge {
position: absolute;
right: 40px;
bottom: 100px;
width: 150px;
opacity: 0.9;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center; }
.nav-badge .site-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%; }
.nav-badge svg,
.nav-badge img {
display: block;
width: 100%;
height: auto;
max-height: none; }
.nav-badge .logo-text,
.nav-badge svg path,
.nav-badge svg g,
.nav-badge svg polygon,
.nav-badge svg rect {
fill: #ffffff; }
.nav-badge svg circle {
fill: #F2B500; }
/* -------------------------------------------------------
Reset
-------------------------------------------------------- */
.overlay-menu,
.overlay-menu ul {
list-style: none;
margin: 0;
padding: 0; }
/* -------------------------------------------------------
Main menu
-------------------------------------------------------- */
.overlay-menu {
display: flex;
flex-direction: column;
gap: 16px;
padding-right: 69%; }
.overlay-menu > li {
display: inline-block;
position: relative;
opacity: 0;
transform: translateY(40px);
transition: .45s ease; }
.overlay-menu > li > a {
display: inline-block;
font-family: var(--font-heading, "Outfit", sans-serif);
font-size: 42px;
line-height: 1.05;
letter-spacing: -0.02em;
color: #ffffff;
text-decoration: none;
transition: color 0.25s ease, opacity 0.25s ease; }
.overlay-menu > li:hover > a,
.overlay-menu > li > a:hover,
.overlay-menu > li > a:focus-visible, .overlay-menu > li.submenu-open > a, .overlay-menu > li.current-menu-item > a, .overlay-menu > li.current-menu-ancestor > a, .overlay-menu > li.current_page_item > a, .overlay-menu > li.current_page_ancestor > a {
color: #F2B500;
outline: none; }
html.nav-open .overlay-menu > li {
opacity: 1;
transform: translateY(0); }
html.nav-open .overlay-menu > li:nth-child(1) {
transition-delay: 0.25s; }
html.nav-open .overlay-menu > li:nth-child(2) {
transition-delay: 0.3s; }
html.nav-open .overlay-menu > li:nth-child(3) {
transition-delay: 0.35s; }
html.nav-open .overlay-menu > li:nth-child(4) {
transition-delay: 0.4s; }
html.nav-open .overlay-menu > li:nth-child(5) {
transition-delay: 0.45s; }
html.nav-open .overlay-menu > li:nth-child(6) {
transition-delay: 0.5s; }
html.nav-open .overlay-menu > li:nth-child(7) {
transition-delay: 0.55s; }
html.nav-open .overlay-menu > li:nth-child(8) {
transition-delay: 0.6s; }
html.nav-open .overlay-menu > li:nth-child(9) {
transition-delay: 0.65s; }
html.nav-open .overlay-menu > li:nth-child(10) {
transition-delay: 0.7s; }
html.nav-open .overlay-menu > li:nth-child(11) {
transition-delay: 0.75s; }
html.nav-open .overlay-menu > li:nth-child(12) {
transition-delay: 0.8s; }
html.nav-open .overlay-menu > li:nth-child(13) {
transition-delay: 0.85s; }
html.nav-open .overlay-menu > li:nth-child(14) {
transition-delay: 0.9s; }
html.nav-open .overlay-menu > li:nth-child(15) {
transition-delay: 0.95s; }
html.nav-open .overlay-menu > li:nth-child(16) {
transition-delay: 1s; }
html.nav-open .overlay-menu > li:nth-child(17) {
transition-delay: 1.05s; }
html.nav-open .overlay-menu > li:nth-child(18) {
transition-delay: 1.1s; }
html.nav-open .overlay-menu > li:nth-child(19) {
transition-delay: 1.15s; }
html.nav-open .overlay-menu > li:nth-child(20) {
transition-delay: 1.2s; }
/* -------------------------------------------------------
Submenus
-------------------------------------------------------- */
.overlay-menu .sub-menu {
display: flex;
flex-direction: column;
gap: 12px;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity .35s ease, transform .35s ease; }
.overlay-menu li.submenu-open > .sub-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto; }
.overlay-menu li.submenu-open > .sub-menu > li {
opacity: 1;
transform: translateY(0); }
.overlay-menu li.submenu-open > .sub-menu > li {
opacity: 0;
transform: translateY(10px);
transition: .3s ease; }
/* -------------------------------------------------------
Level 2
-------------------------------------------------------- */
.overlay-menu > li > .sub-menu {
position: absolute;
top: 0;
left: 110%;
width: 70%;
font-size: 24px; }
.overlay-menu > li > .sub-menu > li {
display: flex;
align-items: center; }
.overlay-menu > li > .sub-menu > li > a {
display: inline-block;
font-family: var(--font-heading, "Outfit", sans-serif);
font-size: 24px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.95);
text-decoration: none;
transition: color 0.25s ease, opacity 0.25s ease; }
.overlay-menu > li > .sub-menu > li:hover > a,
.overlay-menu > li > .sub-menu > li > a:hover,
.overlay-menu > li > .sub-menu > li > a:focus-visible, .overlay-menu > li > .sub-menu > li.submenu-open > a, .overlay-menu > li > .sub-menu > li.current-menu-item > a, .overlay-menu > li > .sub-menu > li.current-menu-ancestor > a, .overlay-menu > li > .sub-menu > li.current_page_item > a, .overlay-menu > li > .sub-menu > li.current_page_ancestor > a {
color: #F2B500;
outline: none; }
/* -------------------------------------------------------
Level 3
-------------------------------------------------------- */
.overlay-menu > li > .sub-menu > li {
position: relative; }
.overlay-menu > li > .sub-menu > li > .sub-menu {
position: absolute;
top: 0;
left: 110%;
width: 100%; }
.overlay-menu > li > .sub-menu > li > .sub-menu li {
display: flex;
align-items: center; }
.overlay-menu > li > .sub-menu > li > .sub-menu li > a {
flex: 1;
font-family: var(--font-heading, "Outfit", sans-serif);
font-size: 20px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
opacity: 0.95;
transition: color 0.25s ease, opacity 0.25s ease; }
.overlay-menu > li > .sub-menu > li > .sub-menu li:hover > a,
.overlay-menu > li > .sub-menu > li > .sub-menu li > a:hover,
.overlay-menu > li > .sub-menu > li > .sub-menu li > a:focus-visible, .overlay-menu > li > .sub-menu > li > .sub-menu li.current-menu-item > a, .overlay-menu > li > .sub-menu > li > .sub-menu li.current-menu-ancestor > a, .overlay-menu > li > .sub-menu > li > .sub-menu li.current_page_item > a, .overlay-menu > li > .sub-menu > li > .sub-menu li.current_page_ancestor > a {
color: #F2B500;
outline: none; }
/* -------------------------------------------------------
Toggle button
-------------------------------------------------------- */
.submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
margin-left: 16px;
position: relative;
top: -12px;
background: none;
border: none;
color: #ffffff;
font-size: 32px;
font-weight: 200;
line-height: 1;
cursor: pointer;
transition: color 0.25s ease, transform 0.25s ease; }
.submenu-toggle:hover, .submenu-toggle:focus-visible {
color: #F2B500;
outline: none;
transform: scale(1.05); }
.submenu-toggle__minus {
display: none; }
li.submenu-open > .submenu-toggle {
color: #F2B500; }
li.submenu-open > .submenu-toggle .submenu-toggle__plus {
display: none; }
li.submenu-open > .submenu-toggle .submenu-toggle__minus {
display: block; }
li.submenu-open .sub-menu .submenu-toggle {
top: -5px; }
/* -------------------------------------------------------
Mobile
-------------------------------------------------------- */
@media (max-width: 900px) {
:root {
--header-float-gap: 14px;
--header-float-top: 12px; }
.header-bar-inner {
padding: 12px 14px; }
.header-inner {
gap: 16px; }
.site-logo img,
.site-logo svg {
max-height: 40px; }
.btn-menu {
height: 42px;
padding: 0 14px;
font-size: 14px; }
.btn-menu .btn-menu__icon {
font-size: 16px;
top: 0; }
.overlay-nav {
left: 14px;
right: 14px; }
.overlay-nav .header-row {
flex-direction: column;
align-items: flex-start;
gap: 12px; }
.overlay-menu {
padding-right: 0; }
.overlay-menu > li {
flex-wrap: wrap; }
.overlay-menu > li > a {
font-size: 22px; }
.overlay-menu .sub-menu {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-5px);
transition: max-height .45s ease, opacity .35s ease, transform .35s ease; }
.overlay-menu li.submenu-open > .sub-menu {
max-height: 600px;
opacity: 1;
transform: translateY(0); }
.overlay-menu > li > .sub-menu {
position: static;
width: 100%;
margin-top: 10px;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 5px; }
.overlay-menu > li > .sub-menu > li {
display: flex;
align-items: center;
flex-wrap: wrap; }
.overlay-menu > li > .sub-menu > li > a {
flex: 1;
font-size: 18px; }
.overlay-menu > li > .sub-menu > li > .sub-menu {
position: static;
width: 100%;
margin-top: 6px;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 3px; }
.overlay-menu > li > .sub-menu > li > .sub-menu > li {
display: block; }
.submenu-toggle {
margin-left: auto;
top: -5px; }
.nav-badge {
display: none; } }
@media (max-width: 700px) {
.header-bar-inner {
padding: 10px 12px;
border-radius: 12px; }
.site-logo img,
.site-logo svg {
max-height: 36px; }
.btn-menu {
padding: 0 12px; }
.btn-menu .btn-menu__text {
font-size: 13px; } }
.site-footer,
.footer {
position: relative;
overflow: hidden;
background: var(--footer-bg, #050816);
color: #dfe3ea; }
.footer-inner {
position: relative;
background: var(--footer-bg-inner, #050816);
padding: 38px 28px 20px;
border-radius: 14px;
margin: 0 18px 18px;
overflow: hidden; }
@media (max-width: 900px) {
.footer-inner {
padding: 22px 18px 18px;
margin: 0 12px 12px; } }
.footer > .container-lg,
.site-footer > .container-lg {
position: relative;
z-index: 1; }
/* =========================================================
TOP AREA
========================================================= */
.footer-main {
align-items: start; }
.footer-col-middle {
display: flex;
flex-direction: column;
min-height: 100%; }
.footer-col-middle__inner {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
gap: 34px; }
@media (max-width: 900px) {
.footer-col-middle__inner {
gap: 24px; } }
@media (max-width: 900px) {
.footer-nav-column {
text-align: left; } }
/* =========================================================
HEADING / COPY
========================================================= */
.footer-heading,
.footer .footer-heading {
font-family: var(--font-heading, "Outfit", sans-serif);
font-weight: 700;
font-size: 1.1rem;
line-height: 1.2;
margin: 0 0 14px;
color: #ffffff; }
.footer-quote {
margin: 0 0 10px;
font-family: var(--font-heading, "Outfit", sans-serif);
font-weight: 700;
font-size: clamp(2rem, 3.2vw, 3.6rem);
line-height: 0.96;
letter-spacing: -0.03em;
color: #ffffff;
text-wrap: balance; }
.footer-quote span {
color: #F2B500; }
@media (max-width: 900px) {
.footer-quote {
max-width: 100%;
font-size: clamp(1.9rem, 8vw, 2.8rem); } }
.footer-quote-sub {
margin: 0;
font-size: 1.05rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.82); }
@media (max-width: 900px) {
.footer-quote-sub {
font-size: 0.98rem;
max-width: 100%; } }
/* =========================================================
VIDEO
========================================================= */
.fv-wrap {
position: relative;
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #0b0f15;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
aspect-ratio: 4 / 5;
min-height: 500px; }
@media (max-width: 900px) {
.fv-wrap {
aspect-ratio: 16 / 10;
min-height: 260px; } }
@media (max-width: 700px) {
.fv-wrap {
aspect-ratio: 16 / 11;
min-height: 220px; } }
.fv-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
filter: contrast(105%) saturate(105%); }
.fv-cta {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 164px;
padding: 18px 22px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-family: var(--font-body, "DM Sans", sans-serif);
font-size: 1rem;
font-weight: 700;
line-height: 1.1;
text-align: center;
backdrop-filter: blur(10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease; }
.fv-cta:hover, .fv-cta:focus-visible {
transform: translate(-50%, -50%) scale(1.04);
background: rgba(255, 255, 255, 0.24);
outline: none; }
.fv-cta__icon {
font-size: 1rem;
line-height: 1; }
.fv-controls {
position: absolute;
right: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px;
border-radius: 999px;
background: rgba(14, 18, 27, 0.45);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.fv-btn {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 0;
border-radius: 999px;
cursor: pointer;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
transition: background 0.2s ease, transform 0.15s ease; }
.fv-btn:hover, .fv-btn:focus-visible {
background: rgba(255, 255, 255, 0.14);
transform: translateY(-1px);
outline: none; }
.fv-btn:active {
transform: translateY(0); }
.fv-btn--pause.is-paused svg {
display: none; }
.fv-btn--pause.is-paused::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent #fff;
margin-left: 2px; }
.fv-btn--mute.is-muted svg {
display: none; }
.fv-btn--mute.is-muted::before {
content: '🔇';
font-size: 15px; }
/* =========================================================
CONTACT
========================================================= */
.footer-contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px; }
.footer-contact-item {
display: flex;
align-items: center;
gap: 14px;
margin: 0; }
.footer-contact-text {
font-size: 1.15rem;
line-height: 1.35;
color: rgba(255, 255, 255, 0.9); }
@media (max-width: 900px) {
.footer-contact-text {
font-size: 1rem; } }
/* =========================================================
SHARED ICON PILLS
========================================================= */
.footer-socials ul,
.footer-contact ul {
list-style: none;
margin: 0;
padding: 0; }
.footer-socials .sm,
.footer-contact .sm {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--pill-size, 44px);
height: var(--pill-size, 44px);
padding: var(--pill-pad, 12px);
border-radius: 50%;
background: var(--pill-bg, #1a1a1a);
color: var(--pill-fg, #F2B500);
text-decoration: none;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
backdrop-filter: blur(2px);
will-change: transform, box-shadow, background;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease; }
.footer-socials .sm i,
.footer-contact .sm i {
font-size: 18px;
line-height: 1; }
.footer-socials .sm:hover, .footer-socials .sm:focus-visible,
.footer-contact .sm:hover,
.footer-contact .sm:focus-visible {
outline: none;
transform: translateY(-1px) scale(1.06);
background: rgba(255, 255, 255, 0.08);
box-shadow: var(--pill-shadow, 0 0 18px rgba(242, 181, 0, 0.45)); }
/* =========================================================
SOCIALS
========================================================= */
.footer-socials {
margin-top: 4px; }
.footer-socials-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 14px; }
.footer-socials-list li {
margin: 0; }
/* social-specific size only */
.footer-socials .sm {
width: 30px;
height: 30px; }
/* =========================================================
RIGHT MENU
========================================================= */
.footer-menu {
list-style: none;
margin: 0;
padding: 0; }
.footer-menu li {
margin: 0 0 10px; }
.footer-menu a {
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
font-size: 1.2rem;
line-height: 1.35;
transition: color 0.2s ease, opacity 0.2s ease; }
.footer-menu a:hover, .footer-menu a:focus-visible {
color: #F2B500;
outline: none; }
/* =========================================================
DIVIDER
========================================================= */
.footer-hr {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 18px 0 28px; }
/* =========================================================
WORDMARK AREA
========================================================= */
.footer-reveal {
position: relative; }
.footer-wordmark {
position: relative; }
.upperside {
position: relative;
line-height: 0; }
.upperside svg,
.upperside img {
display: block;
width: 100%;
height: auto; }
.upperside svg {
opacity: 0.28; }
.footer-wordmark__text {
display: block;
font-family: var(--font-heading, "Outfit", sans-serif);
font-size: clamp(5rem, 18vw, 16rem);
line-height: 0.9;
font-weight: 800;
letter-spacing: -0.06em;
color: rgba(255, 255, 255, 0.2);
text-transform: lowercase; }
/* =========================================================
LOWER PILL
========================================================= */
.lowerside {
margin-top: 18px;
padding: 12px 22px;
border-radius: 999px;
background: var(--pill-bg, #1a1a1a);
color: var(--pill-fg, #F2B500);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, background 0.2s ease, color 0.2s ease; }
.lowerside:hover {
transform: translateY(-1px) scale(1.02);
box-shadow: var(--pill-shadow, 0 0 18px rgba(242, 181, 0, 0.45)); }
.lowerside * {
color: inherit;
text-decoration: none; }
.footer-lower {
align-items: center; }
.footer-lower__left,
.footer-lower__center,
.footer-lower__right {
display: flex;
align-items: center;
min-height: 100%; }
.footer-lower__left {
justify-content: flex-start; }
@media (max-width: 900px) {
.footer-lower__left {
justify-content: center; } }
.footer-lower__center {
justify-content: center;
text-align: center; }
.footer-lower__right {
justify-content: flex-end; }
@media (max-width: 900px) {
.footer-lower__right {
justify-content: center; } }
.footer-legal {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
justify-content: inherit; }
.footer-legal li {
margin: 0; }
.footer-legal a {
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
font-size: 0.98rem;
line-height: 1.2;
transition: color 0.2s ease; }
.footer-legal a:hover, .footer-legal a:focus-visible {
color: #F2B500;
outline: none; }
.est {
font-size: 1rem;
line-height: 1.2;
color: #F2B500;
letter-spacing: 0.04em;
white-space: nowrap; }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.footer-main {
gap: 28px; }
.footer-nav-column {
padding-top: 8px; }
.footer-menu a {
font-size: 1.05rem; }
.footer-hr {
margin: 24px 0 22px; }
.footer-wordmark__text {
font-size: clamp(4.5rem, 20vw, 8rem); }
.lowerside {
padding: 14px 16px;
border-radius: 24px; }
.footer-lower {
gap: 14px; } }
@media (max-width: 700px) {
.footer-quote-sub {
font-size: 0.95rem; }
.footer-contact-item {
align-items: flex-start; }
.footer-contact .sm,
.footer-socials .sm {
width: 46px;
height: 46px;
flex-basis: 46px; }
.footer-socials-list {
gap: 10px; }
.footer-legal {
justify-content: center; }
.est {
font-size: 0.95rem; } }
@media (prefers-reduced-motion: reduce) {
.fv-cta,
.fv-btn,
.footer-socials .sm,
.footer-contact .sm,
.footer-menu a,
.lowerside {
transition: none !important;
transform: none !important; } }
/* =========================================================
THEME.SHARED
Shared structural / utility theme styles only
Header and footer now live in:
- _scss/header.scss
- _scss/footer.scss
========================================================= */
/* -------------------------------------------------------
Column gap utility classes
------------------------------------------------------- */
.column-gap.gap20 {
column-gap: 20px; }
.column-gap.gap40 {
column-gap: 40px; }
.column-gap.gap60 {
column-gap: 60px; }
.column-gap.gap80 {
column-gap: 80px; }
.column-gap.gap100 {
column-gap: 100px; }
.column-gap.gap120 {
column-gap: 120px; }
.column-gap.gap140 {
column-gap: 140px; }
.column-gap.gap160 {
column-gap: 160px; }
.column-gap.gap180 {
column-gap: 180px; }
.column-gap.gap200 {
column-gap: 200px; }
/* Apply only to Gutenberg columns */
.wp-block-columns.gap20 {
gap: 20px; }
.wp-block-columns.gap40 {
gap: 40px; }
.wp-block-columns.gap60 {
gap: 60px; }
.wp-block-columns.gap80 {
gap: 80px; }
.wp-block-columns.gap100 {
gap: 100px; }
.wp-block-columns.gap120 {
gap: 120px; }
.wp-block-columns.gap140 {
gap: 140px; }
.wp-block-columns.gap160 {
gap: 160px; }
.wp-block-columns.gap180 {
gap: 180px; }
.wp-block-columns.gap200 {
gap: 200px; }
/* -------------------------------------------------------
Global UI helpers
------------------------------------------------------- */
html.nav-open,
html.nav-open body {
overflow: hidden; }
#main {
overflow: hidden; }
.editor-styles-wrapper .ukiyo {
transform: none !important; }
.wp-block-separator {
border-top: 1px solid currentColor;
opacity: 0.4; }
/* -------------------------------------------------------
Shared mixins
Keep here only if still reused elsewhere
------------------------------------------------------- */
/* -------------------------------------------------------
Inline section graphic
------------------------------------------------------- */
.has-section-graphic {
position: relative;
isolation: isolate; }
.has-section-graphic.overflow-hidden {
overflow: hidden; }
.has-section-graphic > .oxiti-section-graphic,
.has-section-graphic > .geo-section-graphic {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: var(--section-graphic-opacity, 0.25);
mix-blend-mode: var(--section-graphic-blend, normal);
transform: rotate(var(--section-graphic-rotate, 0deg));
transform-origin: center;
display: flex;
align-items: center;
justify-content: center;
top: var(--section-graphic-offset-top, 0);
left: var(--section-graphic-offset-left, 0); }
.has-section-graphic[style*="--section-graphic-layer:mid"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-layer:mid"] > .geo-section-graphic {
z-index: 2; }
.has-section-graphic > * {
position: relative;
z-index: 1; }
/* -------------------------------------------------------
Graphic position logic
------------------------------------------------------- */
.has-section-graphic[style*="--section-graphic-pos:left top"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:left top"] > .geo-section-graphic {
align-items: flex-start;
justify-content: flex-start; }
.has-section-graphic[style*="--section-graphic-pos:center top"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:center top"] > .geo-section-graphic {
align-items: flex-start;
justify-content: center; }
.has-section-graphic[style*="--section-graphic-pos:right top"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:right top"] > .geo-section-graphic {
align-items: flex-start;
justify-content: flex-end; }
.has-section-graphic[style*="--section-graphic-pos:left center"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:left center"] > .geo-section-graphic {
align-items: center;
justify-content: flex-start; }
.has-section-graphic[style*="--section-graphic-pos:center"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:center center"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:center"] > .geo-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:center center"] > .geo-section-graphic {
align-items: center;
justify-content: center; }
.has-section-graphic[style*="--section-graphic-pos:right center"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:right center"] > .geo-section-graphic {
align-items: center;
justify-content: flex-end; }
.has-section-graphic[style*="--section-graphic-pos:left bottom"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:left bottom"] > .geo-section-graphic {
align-items: flex-end;
justify-content: flex-start; }
.has-section-graphic[style*="--section-graphic-pos:center bottom"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:center bottom"] > .geo-section-graphic {
align-items: flex-end;
justify-content: center; }
.has-section-graphic[style*="--section-graphic-pos:right bottom"] > .oxiti-section-graphic,
.has-section-graphic[style*="--section-graphic-pos:right bottom"] > .geo-section-graphic {
align-items: flex-end;
justify-content: flex-end; }
/* -------------------------------------------------------
Graphic sizing
------------------------------------------------------- */
.has-section-graphic > .oxiti-section-graphic svg,
.has-section-graphic > .geo-section-graphic svg {
width: var(--section-graphic-width, auto);
height: auto;
max-width: 100%; }
/* -------------------------------------------------------
Graphic colour override
------------------------------------------------------- */
.oxiti-section-graphic svg .graphic-1,
.oxiti-section-graphic svg .graphic-2,
.oxiti-section-graphic svg .graphic-3,
.oxiti-section-graphic svg .graphic-4,
.oxiti-section-graphic svg .graphic-5,
.oxiti-section-graphic svg .graphic-6,
.oxiti-section-graphic svg .graphic-7,
.oxiti-section-graphic svg .graphic-8,
.oxiti-section-graphic svg .graphic-9,
.geo-section-graphic svg .graphic-1,
.geo-section-graphic svg .graphic-2,
.geo-section-graphic svg .graphic-3,
.geo-section-graphic svg .graphic-4,
.geo-section-graphic svg .graphic-5,
.geo-section-graphic svg .graphic-6,
.geo-section-graphic svg .graphic-7,
.geo-section-graphic svg .graphic-8,
.geo-section-graphic svg .graphic-9 {
fill: var(--section-graphic-colour) !important; }
.oxiti-section-graphic.overflow-hidden,
.geo-section-graphic.overflow-hidden {
overflow: hidden; }
.oxiti-section-graphic.overflow-visible,
.geo-section-graphic.overflow-visible {
overflow: visible; }
.geo-button-block {
display: flex;
flex-wrap: wrap;
gap: var(--btn-gap); }
.geo-button-block.is-align-left {
justify-content: flex-start; }
.geo-button-block.is-align-center {
justify-content: center; }
.geo-button-block.is-align-right {
justify-content: flex-end; }
/* ======================================
HEADING SCALE (Fluid)
====================================== */
.wp-block-heading.heading-xs {
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.4; }
.wp-block-heading.heading-sm {
font-size: clamp(22px, 1.8vw, 28px);
line-height: 1.15; }
.wp-block-heading.heading-md {
font-size: clamp(28px, 2.4vw, 38px);
line-height: 1.25; }
.wp-block-heading.heading-lg {
font-size: clamp(36px, 3.2vw, 52px);
line-height: 1.2; }
.wp-block-heading.heading-xl {
font-size: clamp(48px, 4vw, 68px);
line-height: 1.1; }
.wp-block-heading.heading-hero {
font-size: clamp(56px, 6vw, 96px);
line-height: 1; }
/* ======================================
PARAGRAPH SCALE
====================================== */
p.text-sm {
font-size: clamp(16px, 1.1vw, 18px);
line-height: 1.6; }
p.text-md {
font-size: clamp(18px, 1.2vw, 24px);
line-height: 1.55; }
p.text-lg {
font-size: clamp(24px, 1.4vw, 28px);
line-height: 1.45; }
p.text-xl {
font-size: clamp(28px, 1.6vw, 36px);
line-height: 1.35; }
/******* ANIMATING **********/
.animating {
opacity: 0;
transform: translate(0, 50px);
transition: all 1.2s; }
.animating.in-view {
opacity: 1;
transform: translate(0, 0); }
.animating.in-view.delay1 {
transition-delay: 300ms; }
.animating.in-view.delay2 {
transition-delay: 600ms; }
.animating.in-view.delay3 {
transition-delay: 900ms; }
.animating.in-view.delay4 {
transition-delay: 1200ms; }
.animating.in-view.delay5 {
transition-delay: 1500ms; }
.animating.in-view.delay6 {
transition-delay: 1800ms; }
.animating.in-view.delay7 {
transition-delay: 2100ms; }
.animating.in-view.delay8 {
transition-delay: 2400ms; }
.animating.in-view.delay9 {
transition-delay: 2700ms; }
.animating.in-view.delay10 {
transition-delay: 3000ms; }
.animating.in-view.delay11 {
transition-delay: 3300ms; }
.animating.in-view.delay12 {
transition-delay: 3600ms; }
/* =========================================================
SH BUTTON (global, CSS-variable driven)
Used everywhere, including Gravity Forms
========================================================= */
.sh-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 25px;
background: var(--sh-btn-bg);
border: 2px solid var(--sh-btn-border);
color: var(--sh-btn-text);
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
text-decoration: none;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.6s ease;
/* Corner details */ }
.sh-btn:hover {
border-color: var(--sh-btn-border-hover); }
.sh-btn::before, .sh-btn::after {
content: "";
position: absolute;
inset: -2px;
pointer-events: none; }
.sh-btn::before {
background: linear-gradient(var(--sh-btn-corner), var(--sh-btn-corner)) 0 0/6px 2px no-repeat, linear-gradient(var(--sh-btn-corner), var(--sh-btn-corner)) 0 0/2px 6px no-repeat, linear-gradient(var(--sh-btn-corner), var(--sh-btn-corner)) 100% 0/6px 2px no-repeat, linear-gradient(var(--sh-btn-corner), var(--sh-btn-corner)) 100% 0/2px 6px no-repeat; }
.sh-btn::after {
background: linear-gradient(var(--sh-btn-corner), var(--sh-btn-corner)) 0 100%/6px 2px no-repeat, linear-gradient(var(--sh-btn-corner), var(--sh-btn-corner)) 0 100%/2px 6px no-repeat, linear-gradient(var(--sh-btn-corner), var(--sh-btn-corner)) 100% 100%/6px 2px no-repeat, linear-gradient(var(--sh-btn-corner), var(--sh-btn-corner)) 100% 100%/2px 6px no-repeat; }
.sh-btn .content {
position: relative;
overflow: hidden;
font-size: inherit;
line-height: 1.2em;
height: 1.2em; }
.sh-btn .text,
.sh-btn .hover-text {
display: block;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.sh-btn .hover-text {
position: absolute;
left: 0;
bottom: -100%; }
@media (max-width: 768px) {
.sh-btn {
padding: 10px 15px;
font-size: 14px; } }
/* =========================================================
GRAVITY FORMS VARIANT
========================================================= */
.sh-btn--gf {
/* Bronze theme for GF buttons */
--sh-btn-bg: transparent;
--sh-btn-border: var(--bronze);
--sh-btn-border-hover: var(--bronze);
--sh-btn-text: var(--bronze);
--sh-btn-corner: var(--bronze); }
/* Layout for submit button */
.sh-btn.sh-btn--gf {
width: 100%;
margin: 30px auto 0;
display: flex; }
/* Center inside Gravity Forms footer */
.gform_footer,
.gform_page_footer {
text-align: center; }
.gform_footer,
.gform_footer.top_label {
position: relative;
z-index: 10;
padding: 0 !important;
margin: 0 !important;
line-height: 0 !important; }
/* Prevent weird overflow from wrappers */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
overflow: visible !important; }
.gform_footer,
.gform_footer *:not(button) {
pointer-events: none; }
button.sh-btn {
pointer-events: auto; }
/* ==========================================================================
STATIONERS' HALL — Gravity Forms Styling
========================================================================== */
.sh-form,
.gform_wrapper {
--form-border: #FFFFFF;
--form-bg: #ffffff;
--form-text: #4A4A4A;
--form-placeholder: #A8A8A8;
font-family: inherit; }
/* ---------------------------------------------
GLOBAL FIELD SPACING
--------------------------------------------- */
.gform_wrapper .gfield {
margin-bottom: 5px; }
.gform_wrapper .gfield_label {
font-size: 15px;
font-weight: 500;
text-transform: none;
color: var(--form-text);
margin-bottom: 0; }
.gform_required_legend {
display: none; }
.gform_wrapper.gravity-theme .ginput_container_date input {
width: 100%; }
/* ---------------------------------------------
INPUT + TEXTAREA
--------------------------------------------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
width: 100%;
background: var(--form-bg);
border: 1px solid var(--form-border);
padding: 14px 16px !important;
font-size: 16px;
color: var(--form-text);
border-radius: 0;
outline: none;
appearance: none; }
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
color: var(--form-placeholder); }
/* ---------------------------------------------
TWO-COLUMN LAYOUT (like your screenshot)
--------------------------------------------- */
.gform_wrapper .gform_fields {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 24px 40px; }
.gform_wrapper .gfield.gfield--width-full {
grid-column: 1 / 3; }
/* force email, phone etc. into two columns */
.gform_wrapper .left-half,
.gform_wrapper .right-half {
grid-column: span 1; }
/* ---------------------------------------------
SECTION TITLES — matches kicker-stacked style
--------------------------------------------- */
.gform_wrapper .gsection_title {
position: relative;
display: flex;
align-items: center;
gap: 14px;
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bronze);
margin: 40px 0 20px; }
/* decorative line + dots */
.gform_wrapper .gsection_title::before,
.gform_wrapper .gsection_title::after {
content: '';
display: inline-block;
width: 60px;
height: 2px;
background: var(--bronze); }
.gform_wrapper .gsection_title::before {
margin-right: 8px; }
.gform_wrapper .gsection_title::after {
margin-left: 8px;
border-radius: 50%;
width: 6px;
height: 6px; }
/* ---------------------------------------------
SELECT FIELD — custom arrow
--------------------------------------------- */
.gform_wrapper select {
background-image: linear-gradient(45deg, transparent 50%, var(--bronze) 50%), linear-gradient(135deg, var(--bronze) 50%, transparent 50%);
background-position: calc(100% - 18px) calc(1em - 3px), calc(100% - 13px) calc(1em - 3px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat; }
/* ---------------------------------------------
SUBMIT BUTTON
--------------------------------------------- */
.gform_wrapper .gform_footer input[type="submit"] {
display: block;
width: 100%;
background: transparent;
border: 1px solid var(--bronze);
padding: 16px 22px;
text-align: center;
font-size: 16px;
letter-spacing: 0.06em;
color: var(--bronze);
text-transform: uppercase;
cursor: pointer;
transition: 0.25s ease; }
.gform_wrapper .gform_footer input[type="submit"]:hover {
background: var(--bronze);
color: #fff; }
/* ---------------------------------------------
CHECKBOX + CONSENT (matches screenshot)
--------------------------------------------- */
.gform_wrapper .ginput_container_consent input[type="checkbox"] {
width: 16px;
height: 16px;
border: 1px solid var(--bronze);
margin-right: 10px;
appearance: none;
cursor: pointer;
position: relative; }
.gform_wrapper .ginput_container_consent input[type="checkbox"]:checked::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--bronze);
top: 2px;
left: 2px; }
.gform_wrapper .ginput_container_consent label {
display: flex;
align-items: center;
line-height: 1.4;
cursor: pointer; }
/* ---------------------------------------------
HR separator
--------------------------------------------- */
.gform_wrapper .gsection {
border-top: 1px solid var(--bronze);
padding-top: 20px; }
.gform_footer,
.gform_page_footer {
position: relative;
z-index: 20;
overflow: visible !important;
/* IMPORTANT */
line-height: normal !important;
/* Fix collapsed box */
min-height: auto !important;
/* Ensures natural height */
padding: 20px 0 !important;
/* Gives breathing room */ }
.gform_footer,
.gform_footer *:not(button) {
pointer-events: none; }
.sh-btn.sh-btn--gf {
position: relative;
z-index: 50;
/* Bring above GF wrappers */ }
@media (max-width: 900px) {
.wp-block-columns {
display: flex;
flex-wrap: wrap !important; }
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
margin-left: 0 !important; }
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column {
margin-top: 20px; }
.wp-block-columns .wp-block-heading.has-text-align-right {
text-align: left; }
.wp-block-spacer {
height: 30px !important; }
.sh-paragraph-kicker__line {
width: 50px; }
.page-id-1407 .news-slider__header {
display: none; }
.wp-block-columns.pt120.pb120 {
padding-top: 20px !important;
padding-bottom: 50px !important; }
.wp-block-columns.pb60 {
padding-bottom: 30px !important; }
.wp-block-columns.pt30.pb30,
.wp-block-columns.pt80,
.wp-block-columns.pt50 {
padding-top: 20px !important;
padding-bottom: 20px !important; }
.wp-block-columns.gap0 {
gap: 20px; }
.wp-block-columns.pl0,
.wp-block-columns.pr0,
.wp-block-heading.pl0,
.wp-block-heading.pr0,
p.pl0,
p.pr0 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap20 {
gap: 20px; }
.wp-block-columns.pl20,
.wp-block-columns.pr20,
.wp-block-heading.pl20,
.wp-block-heading.pr20,
p.pl20,
p.pr20 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap25 {
gap: 20px; }
.wp-block-columns.pl25,
.wp-block-columns.pr25,
.wp-block-heading.pl25,
.wp-block-heading.pr25,
p.pl25,
p.pr25 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap30 {
gap: 20px; }
.wp-block-columns.pl30,
.wp-block-columns.pr30,
.wp-block-heading.pl30,
.wp-block-heading.pr30,
p.pl30,
p.pr30 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap40 {
gap: 20px; }
.wp-block-columns.pl40,
.wp-block-columns.pr40,
.wp-block-heading.pl40,
.wp-block-heading.pr40,
p.pl40,
p.pr40 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap50 {
gap: 20px; }
.wp-block-columns.pl50,
.wp-block-columns.pr50,
.wp-block-heading.pl50,
.wp-block-heading.pr50,
p.pl50,
p.pr50 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap60 {
gap: 20px; }
.wp-block-columns.pl60,
.wp-block-columns.pr60,
.wp-block-heading.pl60,
.wp-block-heading.pr60,
p.pl60,
p.pr60 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap70 {
gap: 20px; }
.wp-block-columns.pl70,
.wp-block-columns.pr70,
.wp-block-heading.pl70,
.wp-block-heading.pr70,
p.pl70,
p.pr70 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap80 {
gap: 20px; }
.wp-block-columns.pl80,
.wp-block-columns.pr80,
.wp-block-heading.pl80,
.wp-block-heading.pr80,
p.pl80,
p.pr80 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap90 {
gap: 20px; }
.wp-block-columns.pl90,
.wp-block-columns.pr90,
.wp-block-heading.pl90,
.wp-block-heading.pr90,
p.pl90,
p.pr90 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap100 {
gap: 20px; }
.wp-block-columns.pl100,
.wp-block-columns.pr100,
.wp-block-heading.pl100,
.wp-block-heading.pr100,
p.pl100,
p.pr100 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap120 {
gap: 20px; }
.wp-block-columns.pl120,
.wp-block-columns.pr120,
.wp-block-heading.pl120,
.wp-block-heading.pr120,
p.pl120,
p.pr120 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap140 {
gap: 20px; }
.wp-block-columns.pl140,
.wp-block-columns.pr140,
.wp-block-heading.pl140,
.wp-block-heading.pr140,
p.pl140,
p.pr140 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap160 {
gap: 20px; }
.wp-block-columns.pl160,
.wp-block-columns.pr160,
.wp-block-heading.pl160,
.wp-block-heading.pr160,
p.pl160,
p.pr160 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap180 {
gap: 20px; }
.wp-block-columns.pl180,
.wp-block-columns.pr180,
.wp-block-heading.pl180,
.wp-block-heading.pr180,
p.pl180,
p.pr180 {
padding-left: 20px !important;
padding-right: 20px !important; }
.wp-block-columns.gap200 {
gap: 20px; }
.wp-block-columns.pl200,
.wp-block-columns.pr200,
.wp-block-heading.pl200,
.wp-block-heading.pr200,
p.pl200,
p.pr200 {
padding-left: 20px !important;
padding-right: 20px !important; }
.pt30 {
padding-top: 30px !important; }
.pb30 {
padding-bottom: 30px !important; }
.pt40 {
padding-top: 30px !important; }
.pb40 {
padding-bottom: 30px !important; }
.pt50 {
padding-top: 30px !important; }
.pb50 {
padding-bottom: 30px !important; }
.pt60 {
padding-top: 30px !important; }
.pb60 {
padding-bottom: 30px !important; }
.pt70 {
padding-top: 30px !important; }
.pb70 {
padding-bottom: 30px !important; }
.pt80 {
padding-top: 30px !important; }
.pb80 {
padding-bottom: 30px !important; }
.pt90 {
padding-top: 30px !important; }
.pb90 {
padding-bottom: 30px !important; }
.pt100 {
padding-top: 30px !important; }
.pb100 {
padding-bottom: 30px !important; }
.pt120 {
padding-top: 30px !important; }
.pb120 {
padding-bottom: 30px !important; }
.pt140 {
padding-top: 30px !important; }
.pb140 {
padding-bottom: 30px !important; }
.pt160 {
padding-top: 30px !important; }
.pb160 {
padding-bottom: 30px !important; }
.pt180 {
padding-top: 30px !important; }
.pb180 {
padding-bottom: 30px !important; }
.pt200 {
padding-top: 30px !important; }
.pb200 {
padding-bottom: 30px !important; }
.titlebar-text-image-block .titlebar-text-image {
padding-top: 40px; }
figure.wp-block-image img,
figure.is-resized img {
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
object-fit: cover; }
.wp-block-image {
margin: 0 !important; } }