*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

@font-face{
font-family:"Shanolia";
src:url("./assets/fonts/ShanoliaRegular-MAr8n.ttf") format("truetype");
font-weight:400;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"WahIki";
src:url("./assets/fonts/WahIki-R9l7v.otf") format("opentype");
font-weight:400;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Lato";
src:url("./assets/fonts/lato/Lato-Regular.ttf") format("truetype");
font-weight:400;
font-style:normal;
font-display:swap;
}

:root{
--hero-bg-delay:2.2s;
--hero-offset:160px;
--hero-section-offset:140px;
--founder-duration:2.5s;
--float-fade-duration:0.35s;
}

@media (max-width: 1200px){
:root{
--hero-offset:clamp(0px, 3.8vw, 90px);
}
}

body{
font-family:"Lato", sans-serif;
background:#0f0f0f;
color:white;
line-height:1.6;
letter-spacing:0.6px;
opacity:0;
animation:page-fade 0.6s ease-out 0s forwards;
}

body.portfolio-page:not(.philosophy-page):not(.home-page){
position:relative;
background:
radial-gradient(circle at 50% -4%, rgba(215, 252, 255, 0.26), transparent 22%),
radial-gradient(circle at 50% 10%, rgba(101, 218, 243, 0.16), transparent 34%),
radial-gradient(circle at 18% 22%, rgba(76, 193, 220, 0.18), transparent 28%),
radial-gradient(circle at 84% 18%, rgba(34, 134, 181, 0.2), transparent 30%),
linear-gradient(180deg, #4698b3 0%, #1f6886 10%, #103a52 26%, #0a2230 52%, #071722 78%, #040c12 100%);
overflow-x:hidden;
}

body.portfolio-page:not(.philosophy-page):not(.home-page)::before,
body.portfolio-page:not(.philosophy-page):not(.home-page)::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
}

body.portfolio-page:not(.philosophy-page):not(.home-page)::before{
background:
radial-gradient(circle at 50% 2%, rgba(255,255,255,0.12), transparent 16%),
radial-gradient(60% 24% at 22% 18%, rgba(210, 252, 255, 0.1), transparent 72%),
radial-gradient(54% 22% at 78% 16%, rgba(186, 245, 255, 0.09), transparent 74%),
radial-gradient(68% 28% at 50% 30%, rgba(201, 250, 255, 0.08), transparent 76%),
linear-gradient(180deg, rgba(201, 250, 255, 0.1), rgba(201, 250, 255, 0) 24%);
mix-blend-mode:screen;
opacity:0.48;
transform:scale(1.16);
filter:blur(12px);
animation:underwater-caustics-shift 15s ease-in-out infinite alternate;
}

body.portfolio-page:not(.philosophy-page):not(.home-page)::after{
background:
radial-gradient(42% 55% at 18% 32%, rgba(203, 250, 255, 0.16), transparent 72%),
radial-gradient(38% 48% at 82% 28%, rgba(167, 236, 255, 0.13), transparent 74%),
radial-gradient(50% 70% at 50% 12%, rgba(255,255,255,0.08), transparent 76%);
mix-blend-mode:screen;
opacity:0.34;
filter:blur(20px);
animation:underwater-light-sway 18s ease-in-out infinite alternate;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles{
position:fixed;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:0;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles::before,
body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles::before{
background:
radial-gradient(circle, rgba(220, 249, 255, 0.16) 0 1px, transparent 1.5px) 0 0/150px 150px,
radial-gradient(circle, rgba(188, 240, 255, 0.12) 0 1px, transparent 1.5px) 40px 30px/190px 190px,
radial-gradient(circle, rgba(255,255,255,0.1) 0 1.2px, transparent 1.8px) 10px 80px/220px 220px;
opacity:0.4;
animation:underwater-particle-drift 26s linear infinite;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles::after{
background:
linear-gradient(180deg, transparent 0%, transparent 56%, rgba(4, 12, 18, 0.18) 74%, rgba(3, 8, 12, 0.55) 100%),
radial-gradient(ellipse at 50% 100%, rgba(16, 55, 72, 0.5), transparent 60%);
opacity:0.9;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span{
position:absolute;
bottom:-12vh;
display:block;
border-radius:50%;
background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.78), rgba(196, 243, 255, 0.28) 38%, rgba(196, 243, 255, 0.08) 60%, transparent 72%);
box-shadow:inset 0 0 10px rgba(255,255,255,0.18);
opacity:0;
mix-blend-mode:screen;
animation:underwater-bubble-rise 14s linear infinite;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(1){
left:7%;
width:18px;
height:18px;
animation-delay:0s;
animation-duration:15s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(2){
left:16%;
width:10px;
height:10px;
animation-delay:2s;
animation-duration:12s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(3){
left:28%;
width:26px;
height:26px;
animation-delay:5s;
animation-duration:18s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(4){
left:39%;
width:14px;
height:14px;
animation-delay:1.5s;
animation-duration:13s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(5){
left:51%;
width:22px;
height:22px;
animation-delay:4s;
animation-duration:17s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(6){
left:63%;
width:12px;
height:12px;
animation-delay:7s;
animation-duration:11s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(7){
left:74%;
width:28px;
height:28px;
animation-delay:3s;
animation-duration:19s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(8){
left:82%;
width:16px;
height:16px;
animation-delay:6s;
animation-duration:14s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(9){
left:90%;
width:11px;
height:11px;
animation-delay:9s;
animation-duration:12.5s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span:nth-child(10){
left:58%;
width:8px;
height:8px;
animation-delay:10s;
animation-duration:10s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .team,
body.portfolio-page:not(.philosophy-page):not(.home-page) .process-hero,
body.portfolio-page:not(.philosophy-page):not(.home-page) .process-overview,
body.portfolio-page:not(.philosophy-page):not(.home-page) .process-storyboard,
body.portfolio-page:not(.philosophy-page):not(.home-page) .process-timeline,
body.portfolio-page:not(.philosophy-page):not(.home-page) .process-showcase,
body.portfolio-page:not(.philosophy-page):not(.home-page) .process-closing,
body.portfolio-page:not(.philosophy-page):not(.home-page) footer{
position:relative;
z-index:1;
}

/* HEADER */

header{
display:flex;
justify-content:flex-start;
align-items:center;
padding:12px 44px;
background:#141414;
position:sticky;
top:0;
left:0;
right:0;
z-index:10;
overflow:hidden;
opacity:1;
animation:none;
}

.portfolio-page header{
opacity:1;
animation:none;
}

.logo{
transition:opacity 0.2s ease;
display:inline-flex;
align-items:center;
opacity:1;
animation:none;
margin-top:8px;
}

.logo img{
display:block;
height:36px;
width:auto;
object-fit:contain;
transition:transform 0.25s ease;
}

.logo:hover img{
transform:scale(1.06);
}

.nav-links{
display:flex;
align-items:center;
justify-content:flex-end;
gap:24px;
position:relative;
z-index:1;
order:2;
flex:1;
margin-left:auto;
}

.nav-close{
display:none;
position:absolute;
top:12px;
right:24px;
width:44px;
height:44px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.2);
background:transparent;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.nav-close span{
position:absolute;
width:18px;
height:2px;
background:#fff;
}

.nav-close span:first-child{
transform:rotate(45deg);
}

.nav-close span:last-child{
transform:rotate(-45deg);
}

.menu-open{
overflow:visible;
}

.nav-links a{
text-decoration:none;
color:white;
font-size:14px;
transition:transform 0.25s ease;
}

.nav-links > a:hover{
transform:scale(1.06);
}

.nav-cta{
display:flex;
gap:12px;
align-items:center;
position:relative;
}

.nav-cta-toggle{
border:1px solid rgba(255,255,255,0.35);
background:#141414;
color:#fff;
padding:9px 14px;
border-radius:999px;
font-size:11px;
letter-spacing:0.8px;
text-transform:uppercase;
cursor:pointer;
transition:transform 0.25s ease, box-shadow 0.25s ease;
box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}

.nav-cta-toggle:hover{
transform:scale(1.06);
}

.nav-cta-menu{
display:flex;
gap:12px;
}

.nav-cta.is-open .nav-cta-menu{
display:flex;
}

.nav-cta .cta{
flex:0 0 auto;
text-align:center;
padding:9px 12px;
border-radius:999px;
font-size:11px;
letter-spacing:0.8px;
text-transform:uppercase;
border:1px solid transparent;
border-top:0;
text-decoration:none;
transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.nav-cta .cta:hover{
transform:scale(1.06);
}

.nav-cta .cta.primary{
background:#141414;
color:#fff;
border-color:rgba(255,255,255,0.35);
box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}

.nav-cta .cta.primary:hover{
background:#fff;
color:#111;
border-color:#fff;
box-shadow:none;
}

.nav-cta .cta.ghost{
background:#141414;
color:#fff;
border-color:rgba(255,255,255,0.35);
box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}

.nav-cta .cta.ghost:hover{
background:#fff;
color:#111;
border-color:#fff;
box-shadow:none;
}

.nav-toggle{
display:flex;
width:46px;
height:46px;
border:1px solid #2a2a2a;
border-radius:50%;
background:transparent;
color:white;
align-items:center;
justify-content:center;
gap:6px;
padding:8px;
cursor:pointer;
position:absolute;
right:80px;
top:50%;
transform:translateY(-50%);
z-index:1001;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
order:3;
}

.nav-links.is-open{
position:absolute;
top:100%;
right:0;
left:0;
background:
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 24%, rgba(255,255,255,0) 100%),
linear-gradient(180deg, rgba(18,24,30,0.94), rgba(10,14,20,0.9));
border:1px solid rgba(255,255,255,0.12);
border-top-color:rgba(255,255,255,0.18);
box-shadow:
0 18px 42px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.12);
display:flex;
flex-direction:column;
align-items:center;
padding:0 0 18px;
z-index:999;
}

.nav-links.is-open > a{
display:grid;
place-items:center;
margin:0;
padding:0 24px;
height:50px;
line-height:1.2;
width:100%;
border-top:1px solid #1b1b1b;
text-align:center;
}

.nav-links.is-open > a:first-of-type{
border-top:1px solid rgba(255,255,255,0.08);
}

.nav-links.is-open .nav-cta{
padding:18px 24px 22px;
width:100%;
align-items:center;
}

.nav-links.is-open .nav-cta .cta{
flex:1;
text-align:center;
}

@media (min-width: 901px){
.nav-toggle{
display:none;
opacity:0;
pointer-events:none;
}

.nav-cta-menu{
position:absolute;
top:46px;
right:0;
flex-direction:column;
background:#141414;
border:1px solid rgba(255,255,255,0.18);
border-radius:12px;
padding:10px;
display:none;
min-width:180px;
box-shadow:0 14px 30px rgba(0,0,0,0.45);
}

.nav-cta-menu .cta{
width:100%;
justify-content:center;
}
}

@media (max-width: 900px){
.nav-cta-toggle{
display:none;
}

.nav-cta-menu{
position:static;
flex-direction:column;
align-items:center;
width:100%;
}
}

.nav-links > a{
display:inline-flex;
align-items:center;
}

.nav-links > a > span{
position:relative;
top:1px;
}

body.desktop-scrolled .nav-toggle{
opacity:1;
pointer-events:auto;
}

.nav-toggle span{
display:block;
width:16px;
height:2px;
background:white;
transition:transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span{
position:absolute;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
transform:rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
transform:rotate(-45deg);
}

header::before{
content:"";
position:absolute;
inset:-80%;
background:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%);
transform:scale(0.15);
opacity:0;
pointer-events:none;
z-index:0;
}

header > *{
position:relative;
z-index:1;
}

.reveal-on-load{
opacity:0;
transform:translateY(16px);
}

.reveal-on-load.is-visible{
opacity:1;
transform:translateY(0);
}

.reveal-on-load .reveal-word{
display:inline-block;
opacity:0;
transform:translateY(14px);
}

.reveal-on-load.is-visible .reveal-word{
animation:var(--word-animation, reveal-up) var(--word-duration, 0.8s) var(--word-ease, ease) forwards;
animation-delay:var(--word-delay, 0s);
}

/* HERO */

.hero{
height:clamp(52vh, 42vw, 68vh);
margin-top:var(--hero-section-offset);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
padding:0;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background-image: URL(./e5e588f1-ffee-4b55-b93e-504518776a24.JPG);
background-size:cover;
background-position:center 78%;
opacity:0;
animation:hero-bg-fade-flip 3s ease-in-out var(--hero-bg-delay) forwards;
z-index:0;
}

.hero::after{
content:none;
}

.hero-text{
position:relative;
z-index:1;
transform:translateY(var(--hero-offset));
background:transparent;
color:#fff;
padding:0;
border-radius:0;
max-width:none;
}

.hero-text h1{
font-size:68px;
font-family:"WahIki", "Shanolia", serif;
position:relative;
display:inline-block;
color:#fff;
line-height:1.08;
letter-spacing:2px;
text-shadow:
0 1px 0 rgba(0,0,0,0.6),
0 2px 0 rgba(0,0,0,0.55),
0 3px 0 rgba(0,0,0,0.5),
0 4px 6px rgba(0,0,0,0.55),
0 10px 18px rgba(0,0,0,0.45);
}

.hero-word{
display:inline-block;
margin-right:12px;
}

.hero-word:last-child{
margin-right:0;
}

.hero-letter{
display:inline-block;
opacity:0;
transform:translateY(-18px);
animation:hero-letter-drop 0.75s ease forwards;
animation-delay:var(--hero-delay, 0s);
}

.hero-text p{
opacity:0;
animation:page-fade 1.2s ease-out 0.3s forwards;
text-shadow:
0 1px 0 rgba(0,0,0,0.6),
0 2px 5px rgba(0,0,0,0.65);
font-size:28px;
}

.hero-text p:not(.hero-subtitle){
text-shadow:
0 1px 0 rgba(0,0,0,0.85),
0 2px 0 rgba(0,0,0,0.8),
0 3px 0 rgba(0,0,0,0.75),
0 4px 6px rgba(0,0,0,0.8),
0 10px 18px rgba(0,0,0,0.7);
}

.hero-text h1::after{
content:none;
}

.hero-text p{
margin-top:-4px;
letter-spacing:3px;
}

.hero-text .hero-subtitle{
margin-top:12px;
letter-spacing:0.4px;
font-size:17px;
line-height:1.2;
max-width:700px;
margin-left:auto;
margin-right:auto;
white-space:nowrap;
animation:none;
}

.hero-text .hero-subtitle .reveal-word-group{
display:inline-block;
white-space:nowrap;
}

.hero-text .hero-subtitle br:first-of-type{
display:none;
}

/* FOUNDER */

.founder{
display:flex;
align-items:center;
gap:40px;
padding:80px 10%;
margin-top:0;
background:#141414;
border-top:1px solid rgba(255,255,255,0.06);
border-bottom:1px solid rgba(255,255,255,0.06);
position:relative;
overflow:hidden;
opacity:1;
transform:none;
animation:none;
}

.founder > *{
position:relative;
z-index:1;
opacity:0;
transform:translateY(6px);
animation:founder-slide-in var(--founder-duration, 7s) var(--founder-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) var(--founder-delay, 1.2s) forwards;
}

.founder-media{
flex:0 0 auto;
width:260px;
height:260px;
border-radius:12px;
overflow:hidden;
box-shadow:0 24px 50px rgba(0,0,0,0.45);
}

.founder-media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.founder-content h3{
font-size:36px;
letter-spacing:2px;
margin-top:-6px;
margin-bottom:10px;
font-family:"WahIki", serif;
}

.founder-content p{
max-width:520px;
margin:0 0 10px;
}

.founder-kicker{
font-size:13px;
letter-spacing:1.4px;
text-transform:uppercase;
opacity:0.72;
}

/* INTRO */

.intro{
padding:24px 20% 80px;
text-align:center;
}

.intro h2{
font-family:"WahIki", serif;
font-size:40px;
margin-bottom:20px;
}

.entirety-feature{
display:grid;
grid-template-columns:minmax(0, 1.45fr) minmax(280px, 380px);
gap:18px;
align-items:stretch;
margin-top:0;
text-align:left;
width:calc(100% - 6%);
margin-right:auto;
padding-left:0;
}

body.home-page .entirety-feature{
grid-template-columns:1fr;
width:min(100%, 820px);
margin-left:auto;
margin-right:auto;
}

.entirety-copy{
display:flex;
align-items:center;
justify-content:center;
min-height:420px;
text-align:center;
}

body.home-page .entirety-copy{
min-height:auto;
padding:8px 0 0;
}

.entirety-copy p{
margin:0;
font-size:15px;
line-height:1.55;
color:#173243;
max-width:78ch;
margin-left:auto;
margin-right:auto;
}

.entirety-image{
justify-self:end;
width:min(100%, 420px);
max-width:none;
height:420px;
border-radius:28px;
overflow:hidden;
box-shadow:0 22px 44px rgba(15,47,63,0.14);
transform:translateX(-18px);
}

.entirety-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}

.intro-quote{
max-width:760px;
margin:0 auto;
padding:28px 32px;
background:#141414;
border:1px solid rgba(255,255,255,0.08);
border-radius:24px;
color:rgba(255,255,255,0.92);
font-size:18px;
line-height:1.9;
text-align:center;
}

.intro-quote-text{
display:block;
}

.home-black-section{
min-height:320px;
background:#141414;
position:relative;
z-index:1;
padding:34px 0 48px;
overflow:hidden;
}

.home-pool-slider{
position:relative;
overflow:hidden;
padding:0 30px;
}

.home-pool-slider::before,
.home-pool-slider::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:96px;
z-index:2;
pointer-events:none;
}

.home-pool-slider::before{
left:0;
background:linear-gradient(90deg, #141414 0%, rgba(20,20,20,0) 100%);
}

.home-pool-slider::after{
right:0;
background:linear-gradient(270deg, #141414 0%, rgba(20,20,20,0) 100%);
}

.home-pool-track{
display:flex;
width:max-content;
gap:22px;
will-change:transform;
transform:translate3d(0, 0, 0);
}

.home-pool-slide{
flex:0 0 460px;
height:300px;
margin:0;
border-radius:26px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 20px 44px rgba(0,0,0,0.32);
background:#0f0f0f;
}

.home-pool-slide img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

.home-pool-slide:nth-child(odd) img{
transform:scale(1.02);
}


/* SERVICES */

.services{
display:flex;
gap:40px;
padding:100px 10%;
}

.service{
background:#1a1a1a;
padding:40px;
flex:1;
}

.philosophy-page .services,
.home-page .services{
flex-wrap:wrap;
justify-content:center;
padding-top:0;
}

.philosophy-page .service,
.home-page .service{
flex:0 0 calc(50% - 20px);
}

.services-title{
flex:0 0 100%;
font-family:"WahIki", serif;
font-size:clamp(34px, 4vw, 48px);
text-align:center;
margin:0 0 16px;
letter-spacing:1px;
}

.service h3{
font-family:"WahIki", serif;
margin-bottom:10px;
}

/* PORTFOLIO */

.portfolio{
padding:120px 10%;
}

.portfolio h2{
font-family:"WahIki", serif;
font-size:36px;
margin-bottom:60px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 280px));
justify-content:center;
gap:20px;
}

.project{
width:280px;
height:250px;
background:#333;
}

/* PROCESS */

.process{
padding:150px 20%;
text-align:center;
}

.process-page .hero{
height:clamp(62vh, 54vw, 90vh);
align-items:flex-end;
padding:0 7% 72px;
}

.process-page .hero::before{
background-image:
linear-gradient(180deg, rgba(2, 12, 18, 0.18), rgba(2, 12, 18, 0.68)),
url("./Images Ref/b384c9bc-1d45-44a0-8d76-bbc743f34cbf.JPG");
background-position:center center;
opacity:1;
animation:hero-bg-fade 0.45s ease-out 0s forwards;
}

.process-page .hero-text{
max-width:900px;
margin:0 auto;
transform:none;
}

.process-kicker{
margin-bottom:12px;
font-size:12px;
letter-spacing:0.28em;
text-transform:uppercase;
opacity:0.78;
}

.process-page .hero-text .hero-subtitle{
max-width:720px;
white-space:normal;
font-size:18px;
line-height:1.55;
opacity:0.9;
}

.process-overview,
.process-storyboard,
.process-timeline,
.process-showcase,
.process-closing{
position:relative;
padding:96px 8%;
}

.process-overview{
display:grid;
grid-template-columns:minmax(0, 1.05fr) minmax(300px, 0.95fr);
gap:34px;
align-items:center;
}

.process-section-kicker{
margin:0 0 12px;
font-size:12px;
letter-spacing:0.24em;
text-transform:uppercase;
color:rgba(209, 242, 255, 0.82);
}

.process-overview-copy h2,
.process-storyboard-heading h2,
.process-timeline-heading h2,
.process-showcase-copy h2,
.process-closing h2{
font-family:"WahIki", serif;
font-size:clamp(38px, 4.5vw, 56px);
line-height:1.02;
margin-bottom:16px;
}

.process-overview-copy p,
.process-storyboard .story-card p,
.process-timeline .timeline-step p,
.process-showcase-copy p,
.process-closing p{
color:rgba(233, 248, 255, 0.82);
}

.process-pillars{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:14px;
margin-top:28px;
}

.process-pillars div,
.process-metrics div{
padding:18px 18px 20px;
border:1px solid rgba(214, 244, 255, 0.26);
border-radius:22px;
background:linear-gradient(180deg, rgba(203, 241, 255, 0.18), rgba(128, 210, 235, 0.08));
backdrop-filter:blur(16px);
box-shadow:
0 18px 42px rgba(0,0,0,0.16),
inset 0 1px 0 rgba(255,255,255,0.18);
}

.process-pillars strong,
.process-metrics strong{
display:block;
margin-bottom:8px;
font-size:12px;
letter-spacing:0.22em;
text-transform:uppercase;
color:#9ae3ff;
}

.process-overview-media,
.story-card img,
.showcase-panel img{
overflow:hidden;
border-radius:28px;
}

.process-overview-media{
position:relative;
min-height:480px;
border:1px solid rgba(180, 236, 255, 0.16);
background:linear-gradient(180deg, rgba(12, 25, 32, 0.85), rgba(7, 16, 22, 0.92));
box-shadow:0 28px 68px rgba(0,0,0,0.28);
}

.process-overview-media::before{
content:"";
position:absolute;
inset:20px;
border:1px solid rgba(255,255,255,0.14);
border-radius:22px;
pointer-events:none;
}

.process-overview-media img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

.process-storyboard{
padding-top:38px;
}

.process-storyboard-heading,
.process-timeline-heading{
max-width:760px;
margin:0 auto 36px;
text-align:center;
}

.storyboard-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:22px;
position:relative;
}

.story-card{
padding:18px 18px 22px;
border-radius:30px;
background:linear-gradient(180deg, rgba(215, 246, 255, 0.16), rgba(125, 204, 230, 0.08));
border:1px solid rgba(214, 244, 255, 0.24);
backdrop-filter:blur(18px);
box-shadow:
0 24px 58px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.18);
transform:translateY(0);
transition:transform 0.28s ease, border-color 0.28s ease;
}

.story-card:hover{
transform:translateY(-6px);
border-color:rgba(163, 231, 255, 0.28);
}

.story-card-featured{
transform:translateY(18px);
}

.story-card-featured:hover{
transform:translateY(12px);
}

.story-label{
display:inline-flex;
padding:8px 14px;
border-radius:999px;
background:rgba(154, 227, 255, 0.12);
border:1px solid rgba(154, 227, 255, 0.18);
font-size:11px;
letter-spacing:0.18em;
text-transform:uppercase;
margin-bottom:16px;
}

.story-card img{
width:100%;
height:320px;
display:block;
object-fit:cover;
margin-bottom:18px;
}

.story-card h3,
.timeline-step h3{
font-family:"WahIki", serif;
font-size:28px;
margin-bottom:8px;
}

.storyboard-flow{
grid-column:1 / -1;
display:flex;
justify-content:center;
gap:44px;
margin-top:18px;
font-size:12px;
letter-spacing:0.28em;
text-transform:uppercase;
color:rgba(196, 239, 255, 0.66);
}

.storyboard-flow span{
position:relative;
padding:0 18px;
}

.storyboard-flow span::after{
content:"";
position:absolute;
top:50%;
left:100%;
width:28px;
height:1px;
background:rgba(196, 239, 255, 0.38);
}

.storyboard-flow span:last-child::after{
content:none;
}

.process-timeline{
padding-top:72px;
}

.timeline-track{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:18px;
align-items:start;
}

.timeline-step{
position:relative;
padding:28px 22px 24px;
border-radius:28px;
background:linear-gradient(180deg, rgba(213, 245, 255, 0.14), rgba(124, 205, 230, 0.08));
border:1px solid rgba(214, 244, 255, 0.22);
backdrop-filter:blur(16px);
box-shadow:
0 18px 44px rgba(0,0,0,0.16),
inset 0 1px 0 rgba(255,255,255,0.16);
}

.timeline-step::before{
content:"";
position:absolute;
top:22px;
left:22px;
right:22px;
height:1px;
background:linear-gradient(90deg, rgba(154, 227, 255, 0.45), rgba(154, 227, 255, 0));
}

.timeline-number{
display:inline-grid;
place-items:center;
width:44px;
height:44px;
margin-bottom:18px;
border-radius:50%;
background:linear-gradient(180deg, rgba(164, 235, 255, 0.22), rgba(164, 235, 255, 0.06));
border:1px solid rgba(164, 235, 255, 0.22);
font-weight:600;
color:#b2ebff;
}

.process-showcase{
display:grid;
grid-template-columns:minmax(0, 0.92fr) minmax(0, 1.08fr);
gap:28px;
align-items:start;
}

.process-showcase-copy{
position:sticky;
top:112px;
}

.process-metrics{
display:grid;
gap:12px;
margin-top:26px;
}

.process-showcase-media{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:18px;
}

.showcase-panel{
margin:0;
padding:14px;
border-radius:28px;
background:linear-gradient(180deg, rgba(215, 246, 255, 0.14), rgba(123, 206, 232, 0.08));
border:1px solid rgba(214, 244, 255, 0.22);
backdrop-filter:blur(18px);
box-shadow:
0 22px 56px rgba(0,0,0,0.16),
inset 0 1px 0 rgba(255,255,255,0.16);
}

.showcase-panel-tall{
grid-row:span 2;
}

.showcase-panel img{
width:100%;
height:100%;
min-height:240px;
display:block;
object-fit:cover;
}

.showcase-panel-tall img{
min-height:520px;
}

.showcase-panel figcaption{
padding:14px 6px 2px;
font-size:13px;
letter-spacing:0.04em;
color:rgba(221, 246, 255, 0.72);
}

.process-closing{
text-align:center;
padding-top:84px;
padding-bottom:108px;
}

.process-closing p{
max-width:760px;
margin:0 auto 26px;
}

.process-closing a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 26px;
border-radius:999px;
text-decoration:none;
color:#05121a;
background:#c6f2ff;
border:1px solid #c6f2ff;
font-size:12px;
font-weight:700;
letter-spacing:0.2em;
text-transform:uppercase;
transition:transform 0.2s ease, box-shadow 0.2s ease;
box-shadow:0 18px 40px rgba(63, 204, 255, 0.18);
}

.process-closing a:hover{
transform:translateY(-2px);
box-shadow:0 24px 48px rgba(63, 204, 255, 0.24);
}

.process-heading{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-bottom:24px;
}

.process-heading h2{
margin:0;
}

.process-tabs{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.process-tab{
padding:12px 20px;
border-radius:999px;
border:1px solid rgba(23,50,67,0.2);
background:rgba(255,255,255,0.68);
color:#173243;
font:inherit;
letter-spacing:0.4px;
transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.process-tab:hover{
background:#173243;
color:#fff;
border-color:#173243;
transform:translateY(-1px);
}

.process-tab.is-active{
background:#173243;
color:#fff;
border-color:#173243;
}

.steps{
display:flex;
justify-content:space-between;
margin-top:40px;
}

/* CONTACT */

.contact{
padding:150px 20%;
background:#111;
text-align:center;
}

form{
max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}

input,textarea{
padding:12px;
border:none;
background:#222;
color:white;
}

button{
padding:12px;
background:white;
color:black;
border:none;
cursor:pointer;
}

/* FOOTER */

footer{
padding:40px;
text-align:center;
background:#111;
}

.footer-shell{
display:grid;
grid-template-columns:1.4fr 0.9fr;
gap:28px;
align-items:start;
max-width:1100px;
margin:0 auto;
text-align:left;
}

.footer-kicker{
margin:0 0 10px;
font-family:"WahIki", serif;
font-size:28px;
line-height:1;
}

.footer-brand p:last-child{
margin:0;
max-width:44ch;
opacity:0.8;
}

.footer-contact{
display:flex;
flex-direction:column;
gap:10px;
}

.footer-contact a{
color:inherit;
text-decoration:none;
opacity:0.82;
transition:opacity 0.2s ease, transform 0.2s ease;
}

.footer-contact a:hover{
opacity:1;
transform:translateX(2px);
}

.whatsapp-float{
position:fixed;
right:72px;
bottom:70px;
width:50px;
height:50px;
border-radius:50%;
background:#1aa9c3;
border:1px solid #159bb2;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
box-shadow:0 14px 30px rgba(0,0,0,0.45);
z-index:999;
transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
opacity:0;
overflow:visible;
isolation:isolate;
--float-pulse-delay:calc(var(--float-delay, 0s) + var(--float-fade-duration, 1.2s));
animation:page-fade var(--float-fade-duration, 1.2s) ease-out var(--float-delay, 0s) forwards,
whatsapp-float-pulse 2.2s ease-in-out var(--float-pulse-delay, 0s) infinite;
}

.whatsapp-float::before{
content:"";
position:absolute;
inset:-8px;
border-radius:50%;
border:2px solid rgba(26,169,195,0.6);
opacity:0;
animation:float-ring 2.2s ease-out var(--float-pulse-delay, 0s) infinite;
z-index:-1;
}

.float-bubbles{
position:absolute;
left:50%;
bottom:100%;
width:8px;
height:8px;
pointer-events:none;
transform:translateX(-50%);
z-index:-1;
}

.float-bubbles::before,
.float-bubbles::after{
content:"";
position:absolute;
left:50%;
bottom:0;
width:7px;
height:7px;
background:rgba(255,255,255,0.55);
border-radius:50%;
opacity:0;
transform:translateX(-50%);
animation:bubble-rise 3s ease-out var(--float-pulse-delay, 0s) infinite;
}

.float-bubbles::before{
box-shadow:
-26px 6px 0 0 rgba(255,255,255,0.45),
-14px 16px 0 0 rgba(255,255,255,0.38),
6px 12px 0 0 rgba(255,255,255,0.4),
18px 22px 0 0 rgba(255,255,255,0.32),
-4px 30px 0 0 rgba(255,255,255,0.3),
12px 38px 0 0 rgba(255,255,255,0.26),
-20px 46px 0 0 rgba(255,255,255,0.24);
}

.float-bubbles::after{
width:5px;
height:5px;
background:rgba(255,255,255,0.5);
box-shadow:
-30px 12px 0 0 rgba(255,255,255,0.32),
20px 10px 0 0 rgba(255,255,255,0.34),
-10px 24px 0 0 rgba(255,255,255,0.28),
14px 30px 0 0 rgba(255,255,255,0.26),
-22px 36px 0 0 rgba(255,255,255,0.22),
8px 44px 0 0 rgba(255,255,255,0.2);
animation-delay:calc(var(--float-pulse-delay, 0s) + 0.4s);
}

.whatsapp-float img{
width:86px;
height:86px;
object-fit:contain;
transform:translateX(2px);
position:relative;
z-index:1;
}

.whatsapp-float:hover{
transform:translateY(-3px);
background:#159bb2;
box-shadow:0 18px 36px rgba(0,0,0,0.55);
}

.whatsapp-float:focus-visible{
outline:2px solid #fff;
outline-offset:4px;
}

.quick-chat{
position:fixed;
right:72px;
bottom:136px;
width:min(320px, calc(100vw - 32px));
padding:18px;
border-radius:22px;
background:rgba(255,255,255,0.96);
border:1px solid rgba(18,56,76,0.12);
box-shadow:0 24px 54px rgba(10,34,46,0.18);
backdrop-filter:blur(12px);
z-index:998;
opacity:0;
transform:translateY(16px) scale(0.96);
pointer-events:none;
transition:opacity 0.22s ease, transform 0.22s ease;
}

.quick-chat.is-open{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}

.quick-chat-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}

.quick-chat-kicker{
margin:0;
font-size:12px;
font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:#0e6079;
}

.quick-chat-close{
padding:0;
background:transparent;
border:none;
font-size:12px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:#12384c;
}

.quick-chat-body{
display:grid;
gap:10px;
margin-bottom:14px;
}

.quick-chat-message,
.quick-chat-response{
padding:12px 14px;
border-radius:16px;
font-size:14px;
line-height:1.6;
}

.quick-chat-message-bot{
background:#e7f4f8;
color:#12384c;
}

.quick-chat-response{
background:#12384c;
color:#fff;
min-height:72px;
}

.quick-chat-options{
display:grid;
gap:8px;
}

.quick-chat-option{
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(18,56,76,0.12);
background:#f5f9fb;
color:#173243;
font-size:13px;
line-height:1.45;
text-align:left;
transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.quick-chat-option:hover{
transform:translateY(-1px);
border-color:rgba(14,96,121,0.35);
background:#ebf4f7;
}

.quick-chat-option.is-active{
background:#dff0f5;
border-color:rgba(14,96,121,0.34);
}

.intro,
.services,
.portfolio,
.process,
.contact,
footer{
opacity:0;
animation:page-fade 1.2s ease-out 0.3s forwards;
}

@keyframes header-ripple-glow{
0%{
transform:scale(0.15);
opacity:0.0;
}
60%{
opacity:0.7;
}
100%{
transform:scale(1.1);
opacity:0.0;
}
}

@keyframes hero-text-shine{
0%{
background-position:0% 50%;
opacity:0;
}
35%{
opacity:1;
}
100%{
background-position:200% 50%;
opacity:0;
}
}

@keyframes hero-letter-drop{
0%{
opacity:0;
transform:translateY(-22px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

@keyframes logo-fade-in{
0%{
opacity:0;
}
100%{
opacity:1;
}
}

@keyframes page-fade{
0%{
opacity:0;
}
100%{
opacity:1;
}
}

@keyframes reveal-up{
0%{
opacity:0;
transform:translateY(16px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

@keyframes reveal-up-soft{
0%{
opacity:0;
transform:translateY(6px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

@keyframes reveal-fade{
0%{
opacity:0;
}
100%{
opacity:1;
}
}

@keyframes hero-bg-fade{
0%{
opacity:0;
transform:scale(1.02);
}
100%{
opacity:1;
transform:scale(1);
}
}

@keyframes hero-bg-fade-flip{
0%{
opacity:0;
transform:scaleX(-1) scale(1.02);
}
100%{
opacity:1;
transform:scaleX(-1) scale(1);
}
}

@keyframes founder-slide-in{
0%{
opacity:0;
transform:translateY(6px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

@keyframes whatsapp-float-pulse{
0%{
transform:translateY(0) scale(1);
box-shadow:0 14px 30px rgba(0,0,0,0.45);
}
50%{
transform:translateY(-10px) scale(1.07);
box-shadow:0 22px 44px rgba(0,0,0,0.6);
}
100%{
transform:translateY(0) scale(1);
box-shadow:0 14px 30px rgba(0,0,0,0.45);
}
}

@keyframes float-ring{
0%{
opacity:0.55;
transform:scale(0.85);
}
70%{
opacity:0;
transform:scale(1.25);
}
100%{
opacity:0;
transform:scale(1.35);
}
}

@keyframes bubble-rise{
0%{
opacity:0;
transform:translateY(4px) scale(0.6);
}
20%{
opacity:0.75;
}
100%{
opacity:0;
transform:translateY(-54px) scale(1.05);
}
}

@media (max-width: 900px){
:root{
--hero-offset:90px;
--hero-section-offset:100px;
}

header{
padding:20px 24px;
overflow:visible;
background:#141414;
}

.nav-toggle{
opacity:1;
pointer-events:auto;
order:0;
margin-left:auto;
position:relative;
right:auto;
top:auto;
transform:none;
}

.nav-links{
position:absolute;
top:100%;
right:0;
left:0;
display:flex;
flex-direction:column;
align-items:center;
padding:18px 0 20px;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-18px);
transition:
opacity 0.28s ease,
transform 0.32s ease,
visibility 0s linear 0.32s;
}

.nav-links.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
transition:
opacity 0.28s ease,
transform 0.32s ease,
visibility 0s linear 0s;
}

.nav-links.is-open > a{
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
padding:0 24px;
height:50px;
line-height:1.2;
}

.nav-links:not(.is-open) > a{
display:none;
}

.hero-text h1{
font-size:clamp(42px, 8.5vw, 58px);
}

.hero-text p{
font-size:clamp(20px, 3.8vw, 24px);
}

.hero-text .hero-subtitle{
font-size:clamp(15px, 2.6vw, 17px);
max-width:680px;
white-space:normal;
letter-spacing:0.2px;
}

.founder{
flex-direction:column;
align-items:flex-start;
padding:70px 24px;
}

@media (min-width: 601px) and (max-width: 900px){
:root{
--hero-offset:clamp(0px, 4.5vw, 60px);
--hero-section-offset:80px;
}

body.home-page .hero-text p.hero-subtitle{
font-size:clamp(20px, 3.4vw, 24px);
}

.hero-text .hero-subtitle{
word-break:keep-all;
overflow-wrap:normal;
}

.hero-text .hero-subtitle .reveal-word-group{
display:inline-flex;
flex-wrap:nowrap;
}
}

.founder-media{
width:220px;
height:220px;
}

.intro{
padding:90px 24px;
}

.intro-quote{
padding:24px 26px;
}

.home-black-section{
min-height:280px;
padding:28px 0 36px;
}

.home-pool-slider{
padding:0 24px;
}

.home-pool-slider::before,
.home-pool-slider::after{
width:64px;
}

.home-pool-slide{
flex-basis:380px;
height:250px;
}

.portfolio{
padding:90px 24px;
}

.process-page .hero{
height:auto;
min-height:74vh;
padding:0 24px 48px;
}

.process-overview,
.process-showcase{
grid-template-columns:1fr;
}

.process-pillars,
.timeline-track{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.storyboard-grid{
grid-template-columns:1fr;
}

.story-card-featured,
.story-card-featured:hover{
transform:none;
}

.process-showcase-copy{
position:static;
}

.process-showcase-media{
grid-template-columns:1fr 1fr;
}

.showcase-panel-tall{
grid-row:auto;
grid-column:1 / -1;
}

.process-overview,
.process-storyboard,
.process-timeline,
.process-showcase,
.process-closing{
padding-left:24px;
padding-right:24px;
}

.philosophy-page .service,
.home-page .service{
flex:1 0 100%;
}

.gallery{
display:flex;
gap:20px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:6px;
}

.project{
flex:0 0 280px;
height:250px;
scroll-snap-align:start;
}

.contact{
padding:80px 20px;
}

form{
max-width:100%;
width:100%;
}

input,textarea{
width:100%;
font-size:16px;
}

.whatsapp-float{
right:58px;
bottom:52px;
width:46px;
height:46px;
}
}

@media (max-width: 600px){
:root{
--hero-offset:60px;
--hero-section-offset:72px;
}

.hero-text .hero-subtitle{
font-size:clamp(14px, 4.2vw, 16px);
white-space:normal;
}

.hero-text .hero-subtitle br:first-of-type{
display:inline;
}

.hero-break{
display:block;
}


.hero-text p:not(.hero-subtitle){
margin-top:-14px;
}

.hero-text p{
font-size:clamp(20px, 5.2vw, 24px);
}

.hero-text h1{
line-height:1.1;
}

.hero-text .hero-subtitle{
margin-top:10px;
}

.hero-word{
display:block;
margin-right:0;
}

.hero-word + .hero-word{
margin-top:6px;
}

.founder{
padding:60px 16px;
}

.founder-media{
width:200px;
height:200px;
}

.intro{
padding:80px 16px;
}

.intro-quote{
padding:22px 20px;
font-size:16px;
line-height:1.8;
}

.home-black-section{
min-height:230px;
padding:22px 0 28px;
}

.home-pool-slider{
padding:0 16px;
}

.home-pool-slider::before,
.home-pool-slider::after{
width:42px;
}

.home-pool-track{
gap:14px;
}

.home-pool-slide{
flex-basis:300px;
height:210px;
border-radius:18px;
}

.portfolio{
padding:80px 16px;
}

.process-page .hero{
padding:0 16px 42px;
}

.process-page .hero-text .hero-subtitle{
font-size:16px;
line-height:1.6;
}

.process-overview,
.process-storyboard,
.process-timeline,
.process-showcase,
.process-closing{
padding-left:16px;
padding-right:16px;
}

.process-overview-media{
min-height:300px;
}

.process-pillars,
.timeline-track,
.process-showcase-media{
grid-template-columns:1fr;
}

.story-card{
padding:16px;
border-radius:24px;
}

.story-card img{
height:250px;
}

.storyboard-flow{
gap:18px;
font-size:11px;
letter-spacing:0.2em;
flex-wrap:wrap;
}

.storyboard-flow span{
padding:0 10px;
}

.storyboard-flow span::after{
width:14px;
}

.showcase-panel{
border-radius:24px;
}

.showcase-panel img,
.showcase-panel-tall img{
min-height:220px;
}

.gallery{
gap:16px;
}

.project{
flex-basis:260px;
height:250px;
}

.contact{
padding:70px 16px;
}
}


.philosophy-hero{
height:clamp(52vh, 42vw, 68vh);
background-image:url("./e64c8f3c-8463-477f-9725-1f479011976c.JPG");
background-size:cover;
background-position:center 56%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

body.home-page .philosophy-hero{
background-image:none;
background-color:#141414;
}

.philosophy-page,
.home-page{
animation:page-fade 0.25s ease-out 0s forwards;
}

.philosophy-page .hero-text p,
.home-page .hero-text p{
animation:page-fade 0.3s ease-out 0.05s forwards;
}

body.philosophy-page .hero-text p{
margin-top:12px;
}

body.home-page .hero-text p.hero-subtitle{
font-size:clamp(22px, 2.2vw, 28px);
line-height:1.18;
}

.philosophy-detail-page .hero::before{
background-image:url("./e64c8f3c-8463-477f-9725-1f479011976c.JPG");
background-position:center 56%;
animation:hero-bg-fade-flip 0.45s ease-out 0s forwards;
}

.philosophy-page .intro,
.philosophy-page .services,
.philosophy-page .process,
.philosophy-page footer,
.home-page .intro,
.home-page .services,
.home-page .process,
.home-page footer{
animation:page-fade 0.3s ease-out 0.05s forwards;
}


/* TEAM PAGE */

.team{
padding:120px 10%;
text-align:center;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .team{
padding-top:96px;
padding-bottom:96px;
}

.team h1{
font-family:"WahIki", serif;
font-size:48px;
margin-bottom:10px;
}

.team-intro{
max-width:600px;
margin:auto;
margin-bottom:80px;
opacity:0.8;
}

.team-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
align-items:start;
}

.team-grid-lead{
grid-template-columns:minmax(320px,420px);
justify-content:center;
margin-bottom:42px;
}

.team-grid-primary{
grid-template-columns:repeat(3,minmax(250px,1fr));
justify-content:stretch;
margin-bottom:34px;
align-items:start;
}

.team-grid-secondary{
grid-template-columns:repeat(2,minmax(260px,1fr));
justify-content:stretch;
margin-bottom:30px;
gap:28px;
align-items:start;
}

.team-grid-tertiary{
grid-template-columns:repeat(2,minmax(240px,1fr));
justify-content:stretch;
gap:28px;
align-items:start;
}

.team-member{
background:linear-gradient(180deg, rgba(14, 25, 31, 0.92), rgba(11, 18, 24, 0.9));
border:1px solid rgba(124, 219, 255, 0.12);
box-shadow:
0 18px 40px rgba(0,0,0,0.28),
inset 0 1px 0 rgba(255,255,255,0.04);
padding:26px;
border-radius:24px;
transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
position:relative;
overflow:hidden;
--team-shift-y:0px;
--team-rotate:0deg;
transform:translateY(var(--team-shift-y)) rotate(var(--team-rotate));
}

.team-member:hover{
transform:translateY(calc(var(--team-shift-y) - 6px)) rotate(var(--team-rotate));
box-shadow:
0 26px 54px rgba(0,0,0,0.32),
inset 0 1px 0 rgba(255,255,255,0.06);
border-color:rgba(124, 219, 255, 0.24);
}

.team-member::before{
content:"";
position:absolute;
inset:0 auto auto 0;
width:110px;
height:110px;
background:radial-gradient(circle, rgba(182, 239, 255, 0.18), rgba(182, 239, 255, 0) 72%);
pointer-events:none;
opacity:0.7;
}

.team-member img{
width:100%;
height:220px;
object-fit:cover;
border-radius:18px 8px 18px 8px;
margin-bottom:15px;
}

.team-photo-paul{
object-position:center 24%;
}

.team-photo-devendran{
object-position:center 32%;
}

.team-photo-pvs{
object-position:center 42%;
}

.team-photo-prithviraj{
object-position:center 40%;
}

.team-photo-darshan{
object-position:center 28%;
}

.team-photo-paul,
.team-photo-darshan{
object-fit:contain;
background:rgba(7, 18, 24, 0.72);
}

.team-photo-thangalapalan{
object-position:center 52%;
}

.team-photo-susan{
object-position:center 42%;
}

.team-member h3{
font-size:20px;
margin-bottom:5px;
}

.team-grid-lead .team-member{
padding:30px;
border-radius:28px;
}

.team-grid-lead .team-member img{
height:320px;
border-radius:20px;
}

.team-grid-primary .team-member{
padding:28px;
}

.team-grid-primary .team-member:nth-child(1){
--team-shift-y:10px;
}

.team-grid-primary .team-member:nth-child(2){
--team-shift-y:0px;
}

.team-grid-primary .team-member:nth-child(3){
--team-shift-y:16px;
}

.team-grid-primary .team-member img{
height:280px;
}

.team-grid-secondary .team-member{
padding:24px;
}

.team-grid-secondary .team-member:nth-child(1){
--team-shift-y:8px;
}

.team-grid-secondary .team-member:nth-child(2){
--team-shift-y:0px;
}

.team-grid-secondary .team-member:nth-child(3){
--team-shift-y:14px;
}

.team-grid-secondary .team-member:nth-child(4){
--team-shift-y:0px;
}

.team-grid-secondary .team-member img{
height:250px;
}

.team-grid-secondary .team-member h3{
font-size:20px;
}

.team-grid-tertiary .team-member{
padding:22px;
}

.team-grid-tertiary .team-member:nth-child(1){
--team-shift-y:8px;
}

.team-grid-tertiary .team-member:nth-child(2){
--team-shift-y:0px;
}

.team-grid-tertiary .team-member:nth-child(3){
--team-shift-y:12px;
}

.team-grid-tertiary .team-member:nth-child(4){
--team-shift-y:0px;
}

.team-grid-tertiary .team-member img{
height:220px;
}

.team-grid-tertiary .team-member h3{
font-size:19px;
}

.team-grid-tertiary .role{
font-size:14px;
}

.team-grid-tertiary .years{
font-size:13px;
}

.role{
font-size:14px;
opacity:0.7;
}

.years{
font-size:13px;
margin-top:4px;
opacity:0.6;
}

@media (max-width: 1000px){
.team-grid-primary{
grid-template-columns:repeat(2,minmax(240px,1fr));
}

.team-grid-secondary{
grid-template-columns:repeat(2,minmax(240px,1fr));
}

.team-grid-tertiary{
grid-template-columns:repeat(2,minmax(240px,1fr));
}

.team-grid-primary .team-member:nth-child(1),
.team-grid-primary .team-member:nth-child(2),
.team-grid-primary .team-member:nth-child(3),
.team-grid-secondary .team-member:nth-child(1),
.team-grid-secondary .team-member:nth-child(2),
.team-grid-secondary .team-member:nth-child(3),
.team-grid-secondary .team-member:nth-child(4),
.team-grid-tertiary .team-member:nth-child(1),
.team-grid-tertiary .team-member:nth-child(2),
.team-grid-tertiary .team-member:nth-child(3),
.team-grid-tertiary .team-member:nth-child(4){
--team-shift-y:0px;
--team-rotate:0deg;
}

body.portfolio-page:not(.philosophy-page):not(.home-page)::before{
opacity:0.34;
}

body.portfolio-page:not(.philosophy-page):not(.home-page)::after{
opacity:0.28;
}
}

@media (max-width: 700px){
.team-grid-primary,
.team-grid-secondary,
.team-grid-tertiary,
.team-grid-lead{
grid-template-columns:1fr;
gap:22px;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .team{
padding-top:82px;
padding-bottom:82px;
}

body.portfolio-page:not(.philosophy-page):not(.home-page)::before{
opacity:0.34;
animation-duration:22s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page)::after{
opacity:0.24;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles span{
animation-duration:11s;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .underwater-bubbles::before{
opacity:0.26;
}

.team-member,
.team-grid-lead .team-member,
.team-grid-primary .team-member:nth-child(1),
.team-grid-primary .team-member:nth-child(2),
.team-grid-primary .team-member:nth-child(3),
.team-grid-secondary .team-member:nth-child(1),
.team-grid-secondary .team-member:nth-child(2),
.team-grid-secondary .team-member:nth-child(3),
.team-grid-secondary .team-member:nth-child(4),
.team-grid-tertiary .team-member:nth-child(1),
.team-grid-tertiary .team-member:nth-child(2),
.team-grid-tertiary .team-member:nth-child(3),
.team-grid-tertiary .team-member:nth-child(4){
--team-shift-y:0px;
--team-rotate:0deg;
}

.team-grid-primary .team-member img,
.team-grid-secondary .team-member img,
.team-grid-tertiary .team-member img{
height:240px;
}
}

@keyframes underwater-caustics-shift{
0%{
transform:translate3d(-3%, -1%, 0) scale(1.18) rotate(-2deg);
}
50%{
transform:translate3d(2%, 1%, 0) scale(1.24) rotate(1.5deg);
}
100%{
transform:translate3d(-1%, 3%, 0) scale(1.16) rotate(-1deg);
}
}

@keyframes underwater-light-sway{
0%{
transform:translate3d(-3%, 0, 0) scale(1);
}
100%{
transform:translate3d(3%, 2%, 0) scale(1.06);
}
}

@keyframes underwater-bubble-rise{
0%{
transform:translate3d(0, 0, 0) scale(0.75);
opacity:0;
}
10%{
opacity:0.5;
}
50%{
transform:translate3d(18px, -48vh, 0) scale(1);
opacity:0.72;
}
100%{
transform:translate3d(-22px, -108vh, 0) scale(1.18);
opacity:0;
}
}

@keyframes underwater-particle-drift{
0%{
transform:translate3d(0, 0, 0);
}
50%{
transform:translate3d(-18px, 24px, 0);
}
100%{
transform:translate3d(14px, 52px, 0);
}
}

/* Philosophy page light background override */

body.philosophy-page,
body.home-page{
background:linear-gradient(180deg, #eff2f3 0%, #e6ebee 100%);
color:#173243;
overflow-x:hidden;
}

body.home-page{
background:
radial-gradient(circle at 50% -10%, rgba(142, 201, 219, 0.22), transparent 24%),
radial-gradient(circle at 18% 18%, rgba(117, 184, 207, 0.12), transparent 26%),
linear-gradient(180deg, #f0f5f7 0%, #e7eff2 56%, #dfe9ee 100%);
}

body.process-page{
background:
radial-gradient(circle at 50% -10%, rgba(142, 201, 219, 0.22), transparent 24%),
radial-gradient(circle at 18% 18%, rgba(117, 184, 207, 0.12), transparent 26%),
linear-gradient(180deg, #f0f5f7 0%, #e7eff2 56%, #dfe9ee 100%);
color:#173243;
overflow-x:hidden;
}

body.process-page header{
background:rgba(236, 244, 247, 0.96);
border-bottom:1px solid rgba(23,50,67,0.1);
box-shadow:0 14px 34px rgba(15,47,63,0.08);
backdrop-filter:blur(10px);
}

body.process-page header::before{
background:radial-gradient(circle at 20% 50%, rgba(142,213,235,0.3), rgba(142,213,235,0) 60%);
}

body.process-page .nav-links a,
body.process-page .nav-links.is-open > a{
color:#173243;
}

body.process-page .nav-links.is-open{
background:linear-gradient(180deg, rgba(248,252,253,0.96), rgba(229,238,242,0.97));
border-color:rgba(23,50,67,0.12);
box-shadow:0 18px 42px rgba(15,47,63,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}

body.process-page .nav-links.is-open > a{
border-top:1px solid rgba(23,50,67,0.08);
}

body.process-page .nav-toggle{
border-color:rgba(23,50,67,0.18);
color:#173243;
}

body.process-page .nav-toggle span{
background:#173243;
}

body.process-page .nav-cta-toggle,
body.process-page .nav-cta .cta.primary{
background:#12384c;
color:#fff;
border-color:#12384c;
box-shadow:none;
}

body.process-page .nav-cta .cta.ghost{
background:transparent;
color:#12384c;
border-color:rgba(18,56,76,0.22);
box-shadow:none;
}

body.process-page .nav-cta .cta.primary:hover,
body.process-page .nav-cta .cta.ghost:hover{
background:#0f2d3d;
color:#fff;
border-color:#0f2d3d;
}

body.process-page .underwater-bubbles{
display:none;
}

body.process-page::before,
body.process-page::after{
display:none;
}

body.process-page .process-overview,
body.process-page .process-storyboard,
body.process-page .process-timeline,
body.process-page .process-showcase,
body.process-page .process-closing,
body.process-page footer{
color:#173243;
}

body.process-page .process-section-kicker{
color:#3e6d82;
}

body.process-page .process-overview-copy p,
body.process-page .process-storyboard .story-card p,
body.process-page .process-timeline .timeline-step p,
body.process-page .process-showcase-copy p,
body.process-page .process-closing p,
body.process-page .showcase-panel figcaption,
body.process-page .storyboard-flow{
color:#3e6272;
}

body.process-page .process-overview-copy h2,
body.process-page .process-storyboard-heading h2,
body.process-page .process-timeline-heading h2,
body.process-page .process-showcase-copy h2,
body.process-page .process-closing h2,
body.process-page .story-card h3,
body.process-page .timeline-step h3{
color:#12384c;
}

body.process-page .process-pillars strong,
body.process-page .process-metrics strong,
body.process-page .timeline-number,
body.process-page .story-label{
color:#0f5f78;
}

body.process-page .process-pillars div,
body.process-page .process-metrics div,
body.process-page .story-card,
body.process-page .timeline-step,
body.process-page .showcase-panel,
body.process-page .process-overview-media{
background:linear-gradient(180deg, rgba(255,255,255,0.68), rgba(226,239,245,0.52));
border-color:rgba(23,50,67,0.12);
box-shadow:
0 18px 42px rgba(15,47,63,0.08),
inset 0 1px 0 rgba(255,255,255,0.65);
}

body.philosophy-page header,
body.home-page header{
background:rgba(239,242,243,0.96);
border-bottom:1px solid rgba(23,50,67,0.1);
box-shadow:0 14px 34px rgba(15,47,63,0.08);
backdrop-filter:blur(10px);
}

body.home-page header{
background:rgba(236, 244, 247, 0.96);
}

body.philosophy-page header::before,
body.home-page header::before{
background:radial-gradient(circle at 20% 50%, rgba(142,213,235,0.3), rgba(142,213,235,0) 60%);
}

body.philosophy-page .nav-links a,
body.philosophy-page .nav-links.is-open > a,
body.home-page .nav-links a,
body.home-page .nav-links.is-open > a{
color:#173243;
}

body.philosophy-page .nav-links.is-open,
body.home-page .nav-links.is-open{
background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(235,240,243,0.96));
border-color:rgba(23,50,67,0.12);
box-shadow:0 18px 42px rgba(15,47,63,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}

body.home-page .nav-links.is-open{
background:linear-gradient(180deg, rgba(248,252,253,0.96), rgba(229,238,242,0.97));
}

body.philosophy-page .nav-links.is-open > a,
body.home-page .nav-links.is-open > a{
border-top:1px solid rgba(23,50,67,0.08);
}

body.philosophy-page .nav-toggle,
body.home-page .nav-toggle{
border-color:rgba(23,50,67,0.18);
color:#173243;
}

body.philosophy-page .nav-toggle span,
body.home-page .nav-toggle span{
background:#173243;
}

body.philosophy-page .nav-cta-toggle,
body.philosophy-page .nav-cta .cta.primary,
body.home-page .nav-cta-toggle,
body.home-page .nav-cta .cta.primary{
background:#12384c;
color:#fff;
border-color:#12384c;
box-shadow:none;
}

body.philosophy-page .nav-cta .cta.ghost,
body.home-page .nav-cta .cta.ghost{
background:transparent;
color:#12384c;
border-color:rgba(18,56,76,0.22);
box-shadow:none;
}

body.philosophy-page .nav-cta .cta.primary:hover,
body.philosophy-page .nav-cta .cta.ghost:hover,
body.home-page .nav-cta .cta.primary:hover,
body.home-page .nav-cta .cta.ghost:hover{
background:#0f2d3d;
color:#fff;
border-color:#0f2d3d;
}

body.philosophy-page .intro,
body.philosophy-page .services,
body.philosophy-page .process,
body.philosophy-page footer,
body.home-page .intro,
body.home-page .services,
body.home-page .process,
body.home-page footer{
color:#173243;
}

body.philosophy-page .process{
padding-top:88px;
}

body.home-page .home-founder{
background:linear-gradient(180deg, rgba(255,255,255,0.58), rgba(227,238,242,0.76));
border-top:1px solid rgba(23,50,67,0.08);
border-bottom:1px solid rgba(23,50,67,0.08);
box-shadow:0 18px 40px rgba(15,47,63,0.06);
margin-bottom:14px;
}

body.home-page .home-founder .founder-media{
border-radius:28px;
box-shadow:0 22px 48px rgba(15,47,63,0.16);
}

body.home-page .home-founder .founder-content h3{
color:#12384c;
}

body.home-page .home-founder .founder-content p{
color:#173243;
max-width:58ch;
}

body.home-page .home-systems{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:18px;
padding:56px 7% 88px;
}

body.home-page .home-systems-heading{
grid-column:1 / -1;
text-align:center;
margin-bottom:8px;
}

body.home-page .home-systems-kicker{
margin:0 0 8px;
font-size:12px;
letter-spacing:1.8px;
text-transform:uppercase;
color:rgba(18,56,76,0.68);
}

body.home-page .home-systems-heading h2{
margin:0;
font-family:"WahIki", serif;
font-size:clamp(32px, 3vw, 44px);
line-height:1.05;
color:#12384c;
}

body.home-page .home-systems-cta{
grid-column:1 / -1;
display:flex;
justify-content:center;
margin-top:12px;
}

body.home-page .home-systems-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:190px;
padding:13px 24px;
border-radius:999px;
background:#12384c;
color:#fff;
text-decoration:none;
font-size:12px;
letter-spacing:1.2px;
text-transform:uppercase;
border:1px solid #12384c;
box-shadow:0 14px 28px rgba(15,47,63,0.12);
transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

body.home-page .home-systems-cta a:hover{
transform:translateY(-2px);
background:#0f2d3d;
border-color:#0f2d3d;
}

body.home-page .system-card{
position:relative;
overflow:hidden;
border-radius:18px;
min-height:300px;
box-shadow:0 22px 48px rgba(15,47,63,0.12);
background:#dce8ed;
}

body.home-page .system-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}

body.home-page .system-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(10,24,32,0.08) 0%, rgba(10,24,32,0.18) 38%, rgba(10,24,32,0.72) 100%);
}

body.home-page .system-card h3{
position:absolute;
left:20px;
right:20px;
bottom:20px;
z-index:1;
margin:0;
font-family:"WahIki", serif;
font-size:clamp(27px, 2.1vw, 34px);
letter-spacing:1px;
color:#f6feff;
text-shadow:0 10px 24px rgba(0,0,0,0.28);
}

body.philosophy-page .intro,
body.home-page .intro{
padding:108px 10% 80px;
}

body.philosophy-page .intro h2,
body.home-page .intro h2{
padding-right:0;
}

body.philosophy-page .intro > p,
body.home-page .intro > p{
width:min(100%, 52ch);
margin-left:auto;
margin-right:auto;
margin-bottom:132px;
padding-right:0;
text-align:center;
font-size:clamp(18px, 1.45vw, 24px);
line-height:1.5;
white-space:normal;
}

body.philosophy-page .service,
body.home-page .service{
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:flex-end;
min-height:280px;
padding:36px 32px;
background-color:#103244;
background-image:
linear-gradient(180deg, rgba(6,20,28,0.08) 0%, rgba(6,20,28,0.24) 38%, rgba(6,20,28,0.74) 100%),
var(--service-bg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border:1px solid rgba(255,255,255,0.18);
border-radius:24px;
box-shadow:0 18px 40px rgba(15,47,63,0.12);
isolation:isolate;
color:#f6feff;
}

body.philosophy-page .service::before,
body.home-page .service::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
z-index:0;
}

body.philosophy-page .service > *,
body.home-page .service > *{
position:relative;
z-index:1;
}

body.philosophy-page .service h3,
body.philosophy-page .service p,
body.home-page .service h3,
body.home-page .service p{
color:inherit;
text-shadow:0 8px 18px rgba(0,0,0,0.28);
}

body.philosophy-page .services .service:nth-child(1),
body.home-page .services .service:nth-child(1){
--service-bg:url("./assets/filtration-mechanical.svg");
}

body.philosophy-page .services .service:nth-child(2),
body.home-page .services .service:nth-child(2){
--service-bg:url("./assets/filtration-sand.svg");
}

body.philosophy-page .services .service:nth-child(3),
body.home-page .services .service:nth-child(3){
--service-bg:url("./assets/filtration-carbon.svg");
}

body.philosophy-page .services .service:nth-child(4),
body.home-page .services .service:nth-child(4){
--service-bg:url("./assets/filtration-uv.svg");
}

body.philosophy-page .services .service:nth-child(5),
body.home-page .services .service:nth-child(5){
--service-bg:url("./assets/filtration-polish.svg");
}

body.philosophy-page .steps div,
body.home-page .steps div{
padding:18px 20px;
border-radius:18px;
background:rgba(255,255,255,0.72);
border:1px solid rgba(23,50,67,0.08);
box-shadow:0 12px 28px rgba(15,47,63,0.06);
}

body.philosophy-page footer,
body.home-page footer{
background:#e1e7ea;
border-top:1px solid rgba(23,50,67,0.08);
}

body.home-page footer{
background:#dce8ed;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) header{
background:rgba(236, 244, 247, 0.96);
border-bottom:1px solid rgba(23,50,67,0.1);
box-shadow:0 14px 34px rgba(15,47,63,0.08);
backdrop-filter:blur(10px);
}

body.portfolio-page:not(.philosophy-page):not(.home-page) header::before{
background:radial-gradient(circle at 20% 50%, rgba(142,213,235,0.3), rgba(142,213,235,0) 60%);
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-links a,
body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-links.is-open > a{
color:#173243;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-links.is-open{
background:linear-gradient(180deg, rgba(248,252,253,0.96), rgba(229,238,242,0.97));
border-color:rgba(23,50,67,0.12);
box-shadow:0 18px 42px rgba(15,47,63,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-links.is-open > a{
border-top:1px solid rgba(23,50,67,0.08);
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-toggle{
border-color:rgba(23,50,67,0.18);
color:#173243;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-toggle span{
background:#173243;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-cta-toggle,
body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-cta .cta.primary{
background:#12384c;
color:#fff;
border-color:#12384c;
box-shadow:none;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-cta .cta.ghost{
background:transparent;
color:#12384c;
border-color:rgba(18,56,76,0.22);
box-shadow:none;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-cta .cta.primary:hover,
body.portfolio-page:not(.philosophy-page):not(.home-page) .nav-cta .cta.ghost:hover{
background:#0f2d3d;
color:#fff;
border-color:#0f2d3d;
}

body.portfolio-page:not(.philosophy-page):not(.home-page){
background:
radial-gradient(circle at 50% -4%, rgba(215, 252, 255, 0.28), transparent 22%),
radial-gradient(circle at 50% 10%, rgba(101, 218, 243, 0.18), transparent 34%),
radial-gradient(circle at 18% 22%, rgba(76, 193, 220, 0.16), transparent 28%),
radial-gradient(circle at 84% 18%, rgba(34, 134, 181, 0.16), transparent 30%),
linear-gradient(180deg, #8ec9db 0%, #75b8cf 12%, #5da6c0 28%, #d8edf3 62%, #edf5f7 100%);
color:#12384c;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .team-member{
background:linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.18));
border:1px solid rgba(255,255,255,0.4);
box-shadow:
0 20px 44px rgba(15,47,63,0.12),
inset 0 1px 0 rgba(255,255,255,0.45);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}

body.portfolio-page:not(.philosophy-page):not(.home-page) .team h1,
body.portfolio-page:not(.philosophy-page):not(.home-page) .team-intro,
body.portfolio-page:not(.philosophy-page):not(.home-page) .team-member h3,
body.portfolio-page:not(.philosophy-page):not(.home-page) .team-member p,
body.portfolio-page:not(.philosophy-page):not(.home-page) footer{
color:#12384c;
}

body.portfolio-page:not(.philosophy-page):not(.home-page) footer{
background:#dce8ed;
border-top:1px solid rgba(23,50,67,0.08);
}

@media (max-width: 1100px){
body.philosophy-page .intro > p,
body.home-page .intro > p{
width:min(100%, 760px);
white-space:normal;
}

body.home-page .home-systems{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.footer-shell{
grid-template-columns:1fr;
gap:18px;
text-align:center;
}

.footer-brand p:last-child{
margin-left:auto;
margin-right:auto;
}

.footer-contact{
align-items:center;
}
}

@media (max-width: 600px){
.quick-chat{
right:16px;
bottom:118px;
width:calc(100vw - 32px);
}

body.philosophy-page .service,
body.home-page .service{
min-height:220px;
padding:28px 24px;
}

.steps{
flex-direction:column;
gap:14px;
align-items:stretch;
}

.process-tabs{
gap:10px;
}

.process-tab{
padding:10px 16px;
font-size:14px;
}

body.philosophy-page .intro,
body.home-page .intro{
padding:24px 20px 80px;
}

body.philosophy-page .intro h2,
body.philosophy-page .intro > p,
body.home-page .intro h2,
body.home-page .intro > p{
padding-right:0;
margin-right:0;
}

body.philosophy-page .intro > p{
margin-bottom:56px;
}

body.home-page .hero-text p.hero-subtitle{
font-size:clamp(18px, 4.5vw, 22px);
line-height:1.18;
}

body.home-page .home-systems{
grid-template-columns:1fr;
padding:26px 20px 72px;
}

body.home-page .system-card{
min-height:260px;
}

body.home-page .entirety-feature{
grid-template-columns:1fr;
gap:24px;
width:auto;
margin-left:auto;
margin-right:auto;
padding-left:0;
}

body.home-page .entirety-copy{
align-items:center;
justify-content:center;
padding:52px 0 0;
}

body.home-page .entirety-copy p{
display:block;
}
}