/* Start custom CSS for html, class: .elementor-element-9750a5c *//* =========================================================
KAUSORA LEAF — OUR STORY HERO
CINEMATIC / EDITORIAL / PREMIUM
========================================================= */
.kl-story-hero{
--kl-green:#263A18;
--kl-gold:#B7964E;
--kl-gold-light:#D6BB76;
--kl-cream:#F5F2E8;
position:relative;
width:100%;
height:
clamp(500px,68vh,620px);
overflow:hidden;
background:
var(--kl-green);
color:#fff;
font-family:
"Montserrat",
Arial,
sans-serif;
}
/* =========================================================
HERO IMAGE
========================================================= */
.kl-story-hero-image{
position:absolute;
inset:0;
overflow:hidden;
}
.kl-story-hero-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 55%;
transform:
scale(1.06);
transition:
transform 1.2s
cubic-bezier(.2,.7,.2,1);
}
/* =========================================================
OVERLAY
========================================================= */
.kl-story-hero-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
90deg,
rgba(18,27,11,.68) 0%,
rgba(18,27,11,.35) 42%,
rgba(18,27,11,.08) 75%,
rgba(18,27,11,.18) 100%
),
linear-gradient(
0deg,
rgba(18,27,11,.58) 0%,
transparent 45%
);
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-story-leaf-layer{
position:absolute;
inset:0;
z-index:4;
pointer-events:none;
overflow:hidden;
}
.kl-story-leaf{
position:absolute;
top:-25px;
display:block;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#A4B56C,
#4E682A
);
opacity:.62;
filter:
drop-shadow(
0 2px 3px
rgba(0,0,0,.25)
);
animation:
klStoryLeafFall
var(--leaf-time)
linear
var(--leaf-delay)
infinite;
}
.kl-story-leaf::after{
content:"";
position:absolute;
left:8%;
top:50%;
width:84%;
height:1px;
background:
rgba(245,242,232,.7);
transform:
rotate(-18deg);
}
@keyframes klStoryLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.62;
}
38%{
transform:
translate3d(
calc(var(--leaf-drift) * .35),
190px,
0
)
rotate(
calc(var(--leaf-rotate) * .3)
)
scale(1);
}
65%{
transform:
translate3d(
calc(var(--leaf-drift) * -.35),
390px,
0
)
rotate(
calc(var(--leaf-rotate) * .65)
)
scale(.92);
}
88%{
opacity:.3;
}
100%{
transform:
translate3d(
var(--leaf-drift),
650px,
0
)
rotate(
var(--leaf-rotate)
)
scale(.7);
opacity:0;
}
}
/* =========================================================
CONTENT
========================================================= */
.kl-story-hero-content{
position:absolute;
z-index:5;
left:
clamp(25px,8vw,125px);
top:50%;
width:
min(600px,75%);
transform:
translateY(-42%);
}
.kl-story-eyebrow{
display:flex;
align-items:center;
gap:12px;
margin-bottom:20px;
color:
var(--kl-gold-light);
font-size:9px;
font-weight:700;
letter-spacing:.28em;
}
.kl-story-eyebrow span{
width:35px;
height:1px;
background:
var(--kl-gold-light);
}
.kl-story-hero h1{
margin:0;
color:#fff;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(52px,6.5vw,88px);
font-weight:400;
line-height:.9;
letter-spacing:-.035em;
}
.kl-story-hero h1 em{
display:block;
margin-left:65px;
color:
var(--kl-gold-light);
font-style:italic;
}
.kl-story-hero-content > p{
max-width:400px;
margin:
27px 0 0;
color:
rgba(255,255,255,.78);
font-size:12px;
line-height:1.8;
letter-spacing:.015em;
}
/* =========================================================
LOCATION
========================================================= */
.kl-story-location{
display:flex;
align-items:center;
gap:12px;
margin-top:28px;
}
.kl-location-mark{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border:
1px solid
rgba(214,187,118,.7);
border-radius:50%;
color:
var(--kl-gold-light);
font-size:17px;
font-weight:300;
}
.kl-story-location div:last-child{
display:flex;
flex-direction:column;
gap:3px;
}
.kl-story-location small{
color:
var(--kl-gold-light);
font-size:6px;
font-weight:700;
letter-spacing:.18em;
}
.kl-story-location strong{
color:
rgba(255,255,255,.85);
font-size:9px;
font-weight:500;
letter-spacing:.04em;
}
/* =========================================================
BOTTOM STORY STRIP
========================================================= */
.kl-story-bottom{
position:absolute;
z-index:6;
left:0;
right:0;
bottom:0;
height:70px;
padding:
0 clamp(25px,8vw,125px);
display:flex;
align-items:center;
justify-content:space-between;
border-top:
1px solid
rgba(255,255,255,.16);
background:
linear-gradient(
90deg,
rgba(20,30,12,.32),
transparent
);
}
.kl-story-bottom-left{
display:flex;
align-items:center;
gap:12px;
color:
rgba(255,255,255,.65);
font-size:7px;
font-weight:600;
letter-spacing:.16em;
}
.kl-story-bottom-left span:first-child{
color:
var(--kl-gold-light);
}
.kl-story-bottom-left i{
width:28px;
height:1px;
background:
var(--kl-gold);
}
/* =========================================================
SCROLL
========================================================= */
.kl-story-scroll{
display:flex;
align-items:center;
gap:13px;
cursor:pointer;
}
.kl-story-scroll > span{
color:
rgba(255,255,255,.6);
font-size:6px;
font-weight:600;
letter-spacing:.16em;
}
.kl-scroll-line{
position:relative;
width:42px;
height:1px;
background:
rgba(255,255,255,.35);
overflow:hidden;
}
.kl-scroll-line i{
position:absolute;
left:-100%;
top:0;
width:100%;
height:100%;
background:
var(--kl-gold-light);
animation:
klScrollLine
2.2s
ease-in-out
infinite;
}
@keyframes klScrollLine{
0%{
left:-100%;
}
50%{
left:0;
}
100%{
left:100%;
}
}
/* =========================================================
CORNER BRAND DETAIL
========================================================= */
.kl-story-corner{
position:absolute;
z-index:6;
right:25px;
top:50%;
transform:
translateY(-50%)
rotate(90deg);
transform-origin:center;
color:
rgba(255,255,255,.3);
font-size:6px;
font-weight:600;
letter-spacing:.25em;
}
.kl-story-corner span{
color:
var(--kl-gold-light);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-story-hero{
height:
clamp(500px,65vh,580px);
}
.kl-story-hero-content{
left:7%;
width:70%;
}
.kl-story-hero h1{
font-size:
clamp(48px,7vw,72px);
}
.kl-story-hero h1 em{
margin-left:40px;
}
.kl-story-corner{
display:none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-story-hero{
height:
530px;
}
.kl-story-hero-image img{
object-position:
58% center;
}
.kl-story-hero-overlay{
background:
linear-gradient(
180deg,
rgba(18,27,11,.18) 0%,
rgba(18,27,11,.38) 38%,
rgba(18,27,11,.78) 100%
);
}
.kl-story-hero-content{
left:22px;
right:22px;
bottom:100px;
top:auto;
width:auto;
transform:none;
}
.kl-story-eyebrow{
gap:8px;
margin-bottom:15px;
font-size:7px;
letter-spacing:.22em;
}
.kl-story-eyebrow span{
width:23px;
}
.kl-story-hero h1{
font-size:
clamp(45px,13vw,58px);
line-height:.88;
}
.kl-story-hero h1 em{
margin-left:28px;
}
.kl-story-hero-content > p{
max-width:290px;
margin-top:20px;
font-size:10px;
line-height:1.75;
}
.kl-story-location{
margin-top:20px;
}
.kl-location-mark{
width:28px;
height:28px;
font-size:14px;
}
.kl-story-location small{
font-size:5px;
}
.kl-story-location strong{
font-size:8px;
}
.kl-story-bottom{
height:63px;
padding:
0 22px;
}
.kl-story-bottom-left{
gap:8px;
font-size:6px;
}
.kl-story-bottom-left i{
width:18px;
}
.kl-story-scroll > span{
display:none;
}
.kl-scroll-line{
width:35px;
}
.kl-story-leaf{
opacity:.55;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-story-hero{
height:500px;
}
.kl-story-hero-content{
bottom:92px;
}
.kl-story-hero h1{
font-size:43px;
}
.kl-story-hero-content > p{
font-size:9px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-story-leaf,
.kl-scroll-line i{
animation:none !important;
}
.kl-story-hero-image img{
transform:scale(1.04) !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4e080cb *//* =========================================================
KAUSORA LEAF — OUR STORY V3
========================================================= */
.kl-journey-v3{
--green:#263A18;
--deep:#17240F;
--gold:#B7964E;
--gold2:#D5BA74;
--cream:#F5F2E8;
--white:#fff;
position:relative;
overflow:hidden;
background:var(--cream);
color:var(--green);
font-family:
"Montserrat",
Arial,
sans-serif;
}
/* =========================================================
BACKGROUND
========================================================= */
.kl-v3-bg-word{
position:absolute;
top:18%;
right:-8%;
color:
rgba(38,58,24,.025);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(150px,22vw,330px);
line-height:.7;
white-space:nowrap;
transform:rotate(90deg);
pointer-events:none;
}
/* =========================================================
LEAVES
========================================================= */
.kl-v3-leaves{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:1;
}
.kl-v3-leaf{
position:absolute;
top:-25px;
display:block;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#81934D,
#405A22
);
opacity:.22;
animation:
klV3Leaf
var(--duration)
linear
var(--delay)
infinite;
}
.kl-v3-leaf:after{
content:"";
position:absolute;
width:85%;
height:1px;
left:7%;
top:50%;
background:
rgba(245,242,232,.6);
transform:rotate(-18deg);
}
@keyframes klV3Leaf{
0%{
transform:
translate3d(0,-30px,0)
rotate(0)
scale(.5);
opacity:0;
}
12%{
opacity:.25;
}
40%{
transform:
translate3d(
calc(var(--drift)*.4),
350px,
0
)
rotate(
calc(var(--rotation)*.4)
)
scale(1);
}
70%{
transform:
translate3d(
calc(var(--drift)*-.3),
700px,
0
)
rotate(
calc(var(--rotation)*.7)
)
scale:.9;
}
100%{
transform:
translate3d(
var(--drift),
1100px,
0
)
rotate(var(--rotation))
scale:.7;
opacity:0;
}
}
/* =========================================================
CONTAINER
========================================================= */
.kl-v3-container{
position:relative;
z-index:3;
width:min(1180px,88%);
margin:auto;
padding:
95px 0 105px;
}
/* =========================================================
INTRO
========================================================= */
.kl-v3-intro{
display:grid;
grid-template-columns:
1.3fr .7fr;
gap:90px;
align-items:end;
padding-bottom:75px;
}
.kl-v3-intro-tag{
display:flex;
align-items:center;
gap:10px;
margin-bottom:20px;
color:var(--gold);
font-size:8px;
font-weight:700;
letter-spacing:.25em;
}
.kl-v3-intro-tag span{
width:28px;
height:1px;
background:var(--gold);
}
.kl-v3-intro h2{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(58px,7vw,88px);
line-height:.82;
font-weight:400;
letter-spacing:-.045em;
}
.kl-v3-intro h2 i{
display:block;
color:var(--gold);
font-style:italic;
}
.kl-v3-intro-right p{
max-width:360px;
margin:0;
color:
rgba(38,58,24,.58);
font-size:11px;
line-height:1.9;
}
/* =========================================================
JOURNEY
========================================================= */
.kl-v3-journey{
position:relative;
}
.kl-v3-line{
position:absolute;
left:50%;
top:0;
width:50px;
height:100%;
transform:
translateX(-50%);
overflow:visible;
z-index:0;
}
.kl-v3-line-base{
fill:none;
stroke:
rgba(183,150,78,.18);
stroke-width:1;
}
.kl-v3-line-progress{
fill:none;
stroke:
var(--gold);
stroke-width:1.5;
stroke-linecap:round;
}
/* =========================================================
MILESTONES
========================================================= */
.kl-v3-milestone{
position:relative;
display:grid;
grid-template-columns:
1fr 1fr;
gap:110px;
align-items:center;
min-height:520px;
margin-bottom:70px;
opacity:0;
transform:translateY(40px);
transition:
opacity .8s ease,
transform .8s ease;
}
.kl-v3-milestone.kl-v3-visible{
opacity:1;
transform:translateY(0);
}
.kl-v3-left{
padding-right:70px;
}
.kl-v3-right{
padding-left:70px;
}
.kl-v3-marker{
position:absolute;
left:50%;
top:50%;
width:48px;
height:48px;
transform:
translate(-50%,-50%);
display:flex;
align-items:center;
justify-content:center;
border:
1px solid var(--gold);
border-radius:50%;
background:var(--cream);
box-shadow:
0 0 0 8px var(--cream);
z-index:5;
}
.kl-v3-marker span{
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.1em;
}
/* =========================================================
COPY
========================================================= */
.kl-v3-copy small{
display:block;
margin-bottom:18px;
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.2em;
}
.kl-v3-copy h3{
max-width:470px;
margin:0 0 23px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px,5vw,70px);
line-height:.83;
font-weight:400;
letter-spacing:-.04em;
}
.kl-v3-copy h3 em{
display:block;
color:var(--gold);
font-style:italic;
}
.kl-v3-copy p{
max-width:440px;
margin:
0 0 14px;
color:
rgba(38,58,24,.6);
font-size:11px;
line-height:1.9;
}
.kl-v3-copy p strong{
color:var(--green);
}
/* =========================================================
IMAGE
========================================================= */
.kl-v3-image{
position:relative;
height:430px;
overflow:hidden;
background:#dedbcf;
}
.kl-v3-image img{
width:100%;
height:100%;
object-fit:cover;
transition:
transform 1s
cubic-bezier(.2,.7,.2,1);
}
.kl-v3-image:hover img{
transform:scale(1.08);
}
.kl-v3-image:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
transparent 60%,
rgba(20,30,12,.5)
);
}
.kl-v3-image > span{
position:absolute;
left:22px;
bottom:20px;
z-index:2;
color:#fff;
font-size:7px;
font-weight:700;
letter-spacing:.2em;
}
/* =========================================================
QUOTE
========================================================= */
.kl-v3-quote{
padding:
75px 0 100px;
text-align:center;
}
.kl-v3-quote > span{
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.22em;
}
.kl-v3-quote h3{
margin:
18px auto 12px;
max-width:700px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(50px,6vw,75px);
line-height:.85;
font-weight:400;
letter-spacing:-.035em;
}
.kl-v3-quote h3 i{
color:var(--gold);
font-style:italic;
}
.kl-v3-quote p{
margin:0;
color:
rgba(38,58,24,.4);
font-size:9px;
}
/* =========================================================
NAME CHANGE
========================================================= */
.kl-v3-name-card{
display:flex;
align-items:center;
justify-content:center;
gap:25px;
min-height:190px;
padding:25px;
background:var(--green);
color:var(--cream);
}
.kl-v3-name-card div{
display:flex;
flex-direction:column;
gap:8px;
}
.kl-v3-name-card small{
color:var(--gold2);
font-size:6px;
font-weight:700;
letter-spacing:.18em;
}
.kl-v3-name-card strong{
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:25px;
font-weight:400;
}
.kl-v3-name-card > span{
color:var(--gold2);
font-size:25px;
}
/* =========================================================
NEW ONLINE / REACH SECTION
========================================================= */
.kl-v3-reach{
position:relative;
display:grid;
grid-template-columns:
150px 1fr 55px;
align-items:center;
gap:45px;
margin:
10px 0 90px;
padding:
38px 45px;
background:
rgba(255,255,255,.62);
border:
1px solid
rgba(38,58,24,.11);
box-shadow:
0 20px 55px
rgba(38,58,24,.045);
overflow:hidden;
opacity:0;
transform:
translateY(25px);
transition:
opacity .8s ease,
transform .8s ease;
}
.kl-v3-reach.kl-v3-visible{
opacity:1;
transform:
translateY(0);
}
.kl-v3-reach:before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:
var(--gold);
transform:
scaleY(0);
transform-origin:bottom;
transition:
transform .6s ease;
}
.kl-v3-reach:hover:before{
transform:
scaleY(1);
}
.kl-reach-year{
color:
rgba(38,58,24,.12);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:78px;
line-height:.7;
letter-spacing:-.05em;
}
.kl-reach-heading > span{
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.2em;
}
.kl-reach-heading h3{
margin:
8px 0 16px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(40px,4.5vw,58px);
line-height:.8;
font-weight:400;
letter-spacing:-.035em;
}
.kl-reach-heading h3 em{
color:var(--gold);
font-style:italic;
}
.kl-reach-copy p{
max-width:560px;
margin:
0 0 20px;
color:
rgba(38,58,24,.58);
font-size:10px;
line-height:1.8;
}
.kl-reach-platforms{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.kl-platform{
display:flex;
align-items:center;
gap:9px;
padding:
8px 13px;
border:
1px solid
rgba(38,58,24,.12);
background:
rgba(245,242,232,.55);
transition:
transform .3s ease,
border-color .3s ease,
background .3s ease;
}
.kl-platform:hover{
transform:
translateY(-3px);
border-color:
var(--gold);
background:
#fff;
}
.kl-platform span{
color:var(--gold);
font-size:6px;
font-weight:700;
}
.kl-platform strong{
color:var(--green);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:18px;
font-weight:500;
}
.kl-reach-arrow{
display:flex;
align-items:center;
justify-content:center;
width:43px;
height:43px;
border:
1px solid
rgba(183,150,78,.45);
border-radius:50%;
color:var(--gold);
font-size:18px;
transition:
transform .4s ease,
background .4s ease;
}
.kl-v3-reach:hover
.kl-reach-arrow{
transform:
rotate(45deg);
background:
rgba(183,150,78,.08);
}
/* =========================================================
THANK YOU
========================================================= */
.kl-v3-thanks{
display:flex;
align-items:center;
gap:30px;
padding-top:25px;
opacity:0;
transform:
translateY(25px);
transition:
opacity .9s ease,
transform .9s ease;
}
.kl-v3-thanks.kl-v3-visible{
opacity:1;
transform:translateY(0);
}
.kl-v3-thanks-line{
flex:1;
height:1px;
background:
rgba(183,150,78,.35);
}
.kl-v3-thanks-content{
width:min(600px,70%);
text-align:center;
}
.kl-v3-thanks-content small{
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.2em;
}
.kl-v3-thanks-content h3{
margin:
16px 0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(68px,8vw,105px);
font-weight:400;
font-style:italic;
line-height:.7;
}
.kl-v3-thanks-content p{
max-width:500px;
margin:
0 auto 14px;
color:
rgba(38,58,24,.58);
font-size:11px;
line-height:1.9;
}
.kl-v3-thanks-content p strong{
color:var(--gold);
}
.kl-v3-signature{
margin-top:28px;
color:
rgba(38,58,24,.45);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:17px;
font-style:italic;
}
.kl-v3-signature b{
display:block;
color:var(--green);
font-size:21px;
font-weight:500;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-v3-container{
width:90%;
}
.kl-v3-intro{
gap:50px;
}
.kl-v3-milestone{
gap:60px;
}
.kl-v3-left{
padding-right:40px;
}
.kl-v3-right{
padding-left:40px;
}
.kl-v3-reach{
grid-template-columns:
110px 1fr 45px;
gap:25px;
padding:32px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-v3-container{
width:89%;
padding:
70px 0 80px;
}
/* INTRO */
.kl-v3-intro{
display:block;
padding-bottom:55px;
}
.kl-v3-intro h2{
font-size:49px;
}
.kl-v3-intro p{
margin-top:25px;
font-size:10px;
}
/* JOURNEY LINE */
.kl-v3-line{
left:8px;
width:20px;
}
/* MILESTONE */
.kl-v3-milestone{
display:flex;
flex-direction:column;
align-items:stretch;
gap:22px;
min-height:auto;
margin-bottom:65px;
padding-left:30px;
}
.kl-v3-left,
.kl-v3-right{
padding:0;
}
.kl-v3-marker{
left:8px;
top:0;
width:30px;
height:30px;
transform:
translate(-50%,0);
box-shadow:
0 0 0 5px var(--cream);
}
.kl-v3-marker span{
font-size:6px;
}
.kl-v3-copy h3{
font-size:43px;
}
.kl-v3-copy p{
font-size:10px;
}
.kl-v3-image{
height:320px;
}
/* QUOTE */
.kl-v3-quote{
padding:
55px 0 80px;
}
.kl-v3-quote h3{
font-size:46px;
}
/* NAME */
.kl-v3-name-card{
min-height:160px;
gap:12px;
padding:18px;
}
.kl-v3-name-card strong{
font-size:18px;
}
.kl-v3-name-card > span{
font-size:18px;
}
/* NEW REACH */
.kl-v3-reach{
display:block;
margin:
5px 0 75px;
padding:
30px 23px 25px;
}
.kl-reach-year{
font-size:57px;
margin-bottom:17px;
}
.kl-reach-heading h3{
font-size:42px;
margin:
8px 0 15px;
}
.kl-reach-copy p{
font-size:10px;
}
.kl-reach-platforms{
gap:7px;
}
.kl-platform{
padding:
7px 10px;
}
.kl-platform strong{
font-size:16px;
}
.kl-reach-arrow{
position:absolute;
top:23px;
right:20px;
width:35px;
height:35px;
font-size:15px;
}
/* THANK YOU */
.kl-v3-thanks{
gap:8px;
}
.kl-v3-thanks-content{
width:84%;
}
.kl-v3-thanks-content h3{
font-size:68px;
}
.kl-v3-thanks-content p{
font-size:10px;
}
.kl-v3-signature{
font-size:15px;
}
.kl-v3-leaf{
opacity:.17;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-v3-intro h2{
font-size:44px;
}
.kl-v3-copy h3{
font-size:39px;
}
.kl-v3-quote h3{
font-size:42px;
}
.kl-reach-heading h3{
font-size:39px;
}
.kl-v3-thanks-content h3{
font-size:60px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-v3-leaf{
animation:none !important;
}
.kl-v3-milestone,
.kl-v3-reach,
.kl-v3-thanks{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5b6e234 *//* =========================================================
KAUSORA LEAF — FOUNDER SECTION
========================================================= */
.kl-founder{
--green:#263A18;
--deep:#17240F;
--gold:#B7964E;
--gold-light:#D5BA74;
--cream:#F5F2E8;
position:relative;
width:100%;
overflow:hidden;
background:#fff;
color:var(--green);
font-family:
"Montserrat",
Arial,
sans-serif;
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-founder-leaves{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:1;
}
.kl-founder-leaf{
position:absolute;
top:-30px;
display:block;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#71883F,
#30491C
);
opacity:.18;
animation:
founderLeafFall
var(--leaf-duration)
linear
var(--leaf-delay)
infinite;
}
.kl-founder-leaf::after{
content:"";
position:absolute;
width:85%;
height:1px;
top:50%;
left:7%;
background:
rgba(255,255,255,.65);
transform:rotate(-15deg);
}
@keyframes founderLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.22;
}
45%{
transform:
translate3d(
calc(var(--leaf-drift) * .4),
420px,
0
)
rotate(
calc(var(--leaf-rotate) * .45)
)
scale(1);
}
75%{
transform:
translate3d(
calc(var(--leaf-drift) * -.25),
720px,
0
)
rotate(
calc(var(--leaf-rotate) * .75)
)
scale(.9);
}
100%{
transform:
translate3d(
var(--leaf-drift),
1100px,
0
)
rotate(
var(--leaf-rotate)
)
scale(.7);
opacity:0;
}
}
/* =========================================================
WRAPPER
========================================================= */
.kl-founder-wrap{
position:relative;
z-index:3;
width:min(1180px,88%);
min-height:620px;
margin:auto;
padding:
95px 0;
display:grid;
grid-template-columns:
.9fr 1.1fr;
gap:100px;
align-items:center;
}
/* =========================================================
IMAGE
========================================================= */
.kl-founder-visual{
position:relative;
opacity:0;
transform:
translateX(-35px);
transition:
opacity .9s ease,
transform 1s
cubic-bezier(.2,.7,.2,1);
}
.kl-founder-visual.kl-founder-visible{
opacity:1;
transform:
translateX(0);
}
.kl-founder-image{
position:relative;
height:520px;
overflow:hidden;
background:
var(--cream);
}
.kl-founder-image::before{
content:"";
position:absolute;
inset:14px;
border:
1px solid
rgba(213,186,116,.55);
z-index:2;
pointer-events:none;
}
.kl-founder-image img{
width:100%;
height:100%;
object-fit:cover;
transform:
scale(1.05);
transition:
transform .3s linear;
}
.kl-founder-image::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
transparent 55%,
rgba(20,31,12,.55)
);
pointer-events:none;
}
.kl-founder-image-label{
position:absolute;
left:30px;
bottom:28px;
z-index:3;
color:#fff;
}
.kl-founder-image-label span{
display:block;
margin-bottom:7px;
font-size:7px;
font-weight:700;
letter-spacing:.22em;
}
.kl-founder-image-label strong{
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:29px;
font-weight:400;
letter-spacing:.02em;
}
/* =========================================================
IMAGE NUMBER
========================================================= */
.kl-founder-number{
position:absolute;
right:-27px;
top:40px;
color:
rgba(183,150,78,.22);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:90px;
line-height:1;
z-index:4;
}
/* =========================================================
CONTENT
========================================================= */
.kl-founder-content{
opacity:0;
transform:
translateX(35px);
transition:
opacity .9s ease .15s,
transform 1s
cubic-bezier(.2,.7,.2,1);
}
.kl-founder-content.kl-founder-visible{
opacity:1;
transform:
translateX(0);
}
/* =========================================================
EYEBROW
========================================================= */
.kl-founder-eyebrow{
display:flex;
align-items:center;
gap:12px;
margin-bottom:20px;
color:var(--gold);
font-size:8px;
font-weight:700;
letter-spacing:.22em;
}
.kl-founder-eyebrow span{
width:30px;
height:1px;
background:var(--gold);
}
/* =========================================================
HEADING
========================================================= */
.kl-founder-content h2{
margin:0 0 32px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(55px,6vw,78px);
line-height:.82;
font-weight:400;
letter-spacing:-.045em;
}
.kl-founder-content h2 em{
display:block;
color:var(--gold);
font-style:italic;
}
/* =========================================================
MESSAGE
========================================================= */
.kl-founder-message{
position:relative;
padding-left:35px;
}
.kl-founder-quote{
position:absolute;
left:0;
top:-17px;
color:
rgba(183,150,78,.4);
font-family:
Georgia,
serif;
font-size:52px;
line-height:1;
}
.kl-founder-message p{
max-width:570px;
margin:
0 0 17px;
color:
rgba(38,58,24,.64);
font-size:11px;
line-height:1.95;
}
.kl-founder-message strong{
color:var(--green);
font-weight:700;
}
/* =========================================================
SIGNATURE
========================================================= */
.kl-founder-sign{
display:flex;
align-items:center;
gap:22px;
margin-top:30px;
}
.kl-founder-line{
width:48px;
height:1px;
background:
var(--gold);
}
.kl-founder-signature{
display:flex;
flex-direction:column;
gap:3px;
}
.kl-founder-signature span{
color:
rgba(38,58,24,.42);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:13px;
font-style:italic;
}
.kl-founder-signature strong{
color:var(--green);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:24px;
font-weight:500;
font-style:italic;
}
.kl-founder-signature small{
color:var(--gold);
font-size:6px;
font-weight:700;
letter-spacing:.16em;
}
/* =========================================================
BOTTOM BRAND DETAIL
========================================================= */
.kl-founder-bottom{
display:flex;
align-items:center;
justify-content:space-between;
max-width:570px;
margin-top:45px;
padding-top:17px;
border-top:
1px solid
rgba(38,58,24,.09);
}
.kl-founder-bottom > span{
color:
rgba(38,58,24,.38);
font-size:7px;
font-weight:700;
letter-spacing:.18em;
}
.kl-founder-leaf-icon{
display:flex;
align-items:center;
gap:4px;
}
.kl-founder-leaf-icon span{
display:block;
width:9px;
height:15px;
border-radius:
100% 0 100% 0;
background:var(--gold);
transform:rotate(-25deg);
}
.kl-founder-leaf-icon span:nth-child(2){
transform:
rotate(25deg)
translateY(-3px);
background:var(--green);
}
.kl-founder-leaf-icon span:nth-child(3){
transform:
rotate(45deg);
background:
var(--gold-light);
}
/* =========================================================
HOVER
========================================================= */
.kl-founder-image{
cursor:default;
}
.kl-founder-image:hover::before{
border-color:
rgba(213,186,116,.9);
}
.kl-founder-image:hover
.kl-founder-image-label strong{
letter-spacing:.05em;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:950px){
.kl-founder-wrap{
width:90%;
grid-template-columns:
.9fr 1.1fr;
gap:55px;
}
.kl-founder-image{
height:470px;
}
.kl-founder-number{
right:-15px;
font-size:70px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-founder-wrap{
width:89%;
display:flex;
flex-direction:column;
gap:55px;
padding:
70px 0 75px;
min-height:auto;
align-items:stretch;
}
/* IMAGE */
.kl-founder-visual{
width:92%;
margin-left:auto;
}
.kl-founder-image{
height:430px;
}
.kl-founder-number{
right:-17px;
top:20px;
font-size:65px;
}
.kl-founder-image-label{
left:24px;
bottom:24px;
}
.kl-founder-image-label strong{
font-size:25px;
}
/* CONTENT */
.kl-founder-content{
width:100%;
}
.kl-founder-eyebrow{
font-size:7px;
}
.kl-founder-content h2{
font-size:52px;
margin-bottom:27px;
}
.kl-founder-message{
padding-left:27px;
}
.kl-founder-quote{
font-size:42px;
}
.kl-founder-message p{
font-size:10px;
line-height:1.9;
}
.kl-founder-sign{
margin-top:25px;
}
.kl-founder-signature strong{
font-size:22px;
}
.kl-founder-bottom{
margin-top:35px;
}
.kl-founder-bottom > span{
font-size:6px;
}
.kl-founder-leaves{
opacity:.7;
}
.kl-founder-leaf{
opacity:.16;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-founder-image{
height:390px;
}
.kl-founder-content h2{
font-size:47px;
}
.kl-founder-message p{
font-size:9.5px;
}
.kl-founder-bottom > span{
font-size:5.5px;
letter-spacing:.12em;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-founder-leaf{
animation:none !important;
}
.kl-founder-visual,
.kl-founder-content{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */