section,header,footer{
overflow-x:hidden;
max-width:100%;
box-sizing:border-box;
}
.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:flex-end;
padding:8rem 0 5rem;
background:linear-gradient(145deg,#2F3B3A 0%,#4A6470 48%,#7D8B69 100%);
color:var(--soft-mist);
overflow:hidden;
}
.hero-media{
position:absolute;
inset:0;
z-index:0;
}
.hero-media img{
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.05);
transition:transform 8s ease;
}
.hero.is-ready .hero-media img{transform:scale(1)}
.hero-overlay{
position:absolute;
inset:0;
background:rgba(47,59,58,0.44);
z-index:1;
}
.hero-content{
position:relative;
z-index:2;
width:min(100% - 2.5rem,var(--container));
margin-inline:auto;
padding-bottom:1rem;
}
.hero .eyebrow{color:var(--riesling-sand);margin-bottom:1rem}
.hero h1{
color:var(--soft-mist);
max-width:16ch;
margin-bottom:1.25rem;
}
.hero .lead{
color:rgba(242,244,241,0.88);
margin-bottom:2rem;
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:0.9rem;
}
.section{
padding:6.5rem 0;
position:relative;
}
.section-mist{
background:linear-gradient(180deg,#F2F4F1 0%,#E4E9E4 100%);
}
.section-olive{
background:linear-gradient(160deg,#7D8B69 0%,#A6B39A 100%);
color:var(--valley-charcoal);
}
.section-olive h2,.section-olive h3{color:var(--valley-charcoal)}
.section-limestone{background:var(--limestone)}
.section-dark{
background:var(--valley-charcoal);
color:rgba(242,244,241,0.86);
}
.section-dark h2,.section-dark h3{color:var(--soft-mist)}
.section-head{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:2.5rem;
align-items:end;
margin-bottom:3.5rem;
}
.section-head.single{
grid-template-columns:1fr;
max-width:42rem;
}
.section-head .lead{margin:0}
.value-editorial{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:4rem;
align-items:start;
}
.value-editorial .big-quote{
font-family:var(--font-display);
font-size:clamp(1.8rem,3.2vw,2.8rem);
line-height:1.25;
letter-spacing:-0.02em;
color:var(--river-slate);
}
.value-list{
display:flex;
flex-direction:column;
gap:1.75rem;
padding-top:0.5rem;
}
.value-item{
padding-bottom:1.5rem;
border-bottom:1px solid rgba(74,100,112,0.18);
}
.value-item h3{margin-bottom:0.55rem}
.value-item p{color:rgba(42,48,46,0.78);line-height:1.65}
.signature{
display:grid;
grid-template-columns:1.15fr 0.85fr;
min-height:70vh;
}
.signature-visual{
position:relative;
min-height:420px;
overflow:hidden;
}
.signature-visual img{
width:100%;height:100%;
object-fit:cover;
}
.signature-visual .cap{
position:absolute;
left:1.5rem;bottom:1.5rem;
background:rgba(242,244,241,0.92);
padding:0.85rem 1.1rem;
border-radius:14px;
font-family:var(--font-meta);
font-size:0.75rem;
letter-spacing:0.06em;
text-transform:uppercase;
}
.signature-copy{
background:var(--valley-charcoal);
color:rgba(242,244,241,0.86);
padding:clamp(2.5rem,5vw,4.5rem);
display:flex;
flex-direction:column;
justify-content:center;
gap:1.25rem;
}
.signature-copy h2{color:var(--soft-mist)}
.signature-copy .lead{color:rgba(242,244,241,0.78)}
.showcase{
display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:1.25rem;
}
.showcase-main,.showcase-side article{
position:relative;
overflow:hidden;
border-radius:var(--radius-lg);
background:var(--limestone);
box-shadow:var(--shadow-soft);
}
.showcase-main{min-height:560px}
.showcase-side{
display:grid;
grid-template-rows:1fr 1fr;
gap:1.25rem;
}
.showcase-side article{min-height:270px}
.showcase-main img,.showcase-side img{
width:100%;height:100%;
object-fit:cover;
transition:transform 1.2s ease;
}
.showcase-main:hover img,.showcase-side article:hover img{transform:scale(1.04)}
.showcase-body{
position:absolute;
inset:auto 0 0 0;
padding:1.6rem;
background:linear-gradient(transparent,rgba(47,59,58,0.78));
color:var(--soft-mist);
}
.showcase-body .meta{color:var(--riesling-sand);margin-bottom:0.4rem}
.showcase-body h3{color:var(--soft-mist);margin-bottom:0.35rem}
.showcase-body p{font-size:0.92rem;opacity:0.9;max-width:36ch}
.insight{
display:grid;
grid-template-columns:0.75fr 1.25fr;
gap:3.5rem;
}
.insight-aside{
position:sticky;
top:calc(var(--header-h) + 1.5rem);
align-self:start;
}
.insight-aside .num{
font-family:var(--font-meta);
font-size:clamp(3rem,6vw,5rem);
color:var(--amber-clay);
line-height:1;
margin-bottom:0.75rem;
}
.insight-prose p{
margin-bottom:1.35rem;
font-size:1.05rem;
line-height:1.7;
color:rgba(42,48,46,0.84);
}
.insight-prose h3{
margin:2rem 0 1rem;
font-family:var(--font-head);
font-weight:600;
}
.services-hybrid{
display:grid;
grid-template-columns:1fr;
gap:0;
border-top:1px solid rgba(74,100,112,0.2);
}
.service-row{
display:grid;
grid-template-columns:0.35fr 1fr 0.45fr;
gap:2rem;
align-items:center;
padding:2rem 0;
border-bottom:1px solid rgba(74,100,112,0.18);
}
.service-row .idx{
font-family:var(--font-meta);
color:var(--riesling-sand);
font-size:0.85rem;
}
.service-row h3{margin-bottom:0.4rem}
.service-row p{color:rgba(42,48,46,0.75);max-width:48ch}
.service-row .meta-col{
text-align:right;
font-family:var(--font-meta);
font-size:0.78rem;
letter-spacing:0.05em;
text-transform:uppercase;
color:var(--river-slate);
}
.timeline{
position:relative;
padding-left:1.5rem;
}
.timeline::before{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:2px;
background:linear-gradient(var(--amber-clay),var(--meadow-sage));
}
.timeline-item{
position:relative;
padding:0 0 2.75rem 2rem;
}
.timeline-item::before{
content:"";
position:absolute;
left:-1.5rem;top:0.35rem;
width:12px;height:12px;
border-radius:50%;
background:var(--amber-clay);
box-shadow:0 0 0 4px rgba(180,111,78,0.18);
transform:translateX(-5px);
}
.timeline-item .meta{margin-bottom:0.45rem}
.timeline-item h3{margin-bottom:0.55rem}
.timeline-item p{color:rgba(42,48,46,0.78);max-width:52ch;line-height:1.65}
.social-proof{
display:grid;
grid-template-columns:1fr 1fr;
gap:2rem;
}
.quote-card{
background:rgba(242,244,241,0.55);
border-radius:var(--radius);
padding:2rem;
box-shadow:var(--shadow-soft);
transition:transform 0.4s ease,box-shadow 0.4s ease;
}
.quote-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lift);
}
.quote-card blockquote{
font-family:var(--font-display);
font-size:1.35rem;
line-height:1.4;
margin-bottom:1.25rem;
color:var(--valley-charcoal);
}
.quote-card .who{
font-family:var(--font-meta);
font-size:0.78rem;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--river-slate);
}
.logo-strip{
display:flex;
flex-wrap:wrap;
gap:1rem;
align-items:center;
margin-top:2rem;
}
.logo-strip span{
padding:0.7rem 1.1rem;
border:1px solid rgba(242,244,241,0.2);
border-radius:999px;
font-family:var(--font-meta);
font-size:0.75rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:rgba(242,244,241,0.7);
}
.case-mini{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1rem;
margin-top:2rem;
}
.case-mini article{
padding:1.25rem;
border-radius:18px;
background:rgba(242,244,241,0.08);
border:1px solid rgba(242,244,241,0.12);
}
.case-mini .num{
font-family:var(--font-meta);
color:var(--riesling-sand);
font-size:1.6rem;
margin-bottom:0.35rem;
}
.case-mini p{font-size:0.9rem;color:rgba(242,244,241,0.78)}
.cta-block{
padding:6rem 0;
background:linear-gradient(145deg,#2F3B3A,#4A6470);
text-align:center;
color:var(--soft-mist);
}
.cta-block h2{color:var(--soft-mist);max-width:18ch;margin:0 auto 1rem}
.cta-block .lead{margin:0 auto 2rem;color:rgba(242,244,241,0.82)}
.cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:0.9rem}
.contact-band{
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
align-items:start;
}
.contact-info .line{
margin-bottom:1.1rem;
font-size:1.02rem;
}
.contact-info .line strong{
display:block;
font-family:var(--font-meta);
font-size:0.72rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--river-slate);
margin-bottom:0.25rem;
font-weight:500;
}
.form-card{
background:var(--soft-mist);
border-radius:var(--radius-lg);
padding:2rem;
box-shadow:var(--shadow-soft);
}
.form-group{margin-bottom:1.15rem}
.form-group label{
display:block;
font-family:var(--font-meta);
font-size:0.72rem;
letter-spacing:0.07em;
text-transform:uppercase;
margin-bottom:0.45rem;
color:var(--river-slate);
}
.form-group input,.form-group textarea{
width:100%;
padding:0.95rem 1rem;
border-radius:14px;
background:var(--limestone);
border:1px solid transparent;
transition:border-color 0.25s ease,background 0.25s ease;
}
.form-group input:focus,.form-group textarea:focus{
outline:none;
border-color:var(--river-slate);
background:#fff;
}
.form-group textarea{min-height:140px;resize:vertical}
.form-note{font-size:0.82rem;color:rgba(42,48,46,0.6);margin-top:0.85rem}
.marquee-wrap{
overflow:hidden;
max-width:100vw;
padding:2.5rem 0;
background:var(--soft-mist);
border-block:1px solid rgba(74,100,112,0.1);
}
.mq-row{
display:flex;
width:max-content;
white-space:nowrap;
animation:mq-left 48s linear infinite;
}
.mq-row.rev{animation-name:mq-right}
.mq-row span{
font-family:var(--font-display);
font-size:clamp(20px,3vw,38px);
text-transform:uppercase;
letter-spacing:0.04em;
opacity:0.12;
padding:0 1.5rem;
color:var(--valley-charcoal);
}
@keyframes mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.dest-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.25rem;
}
.dest-card{
border-radius:var(--radius);
overflow:hidden;
background:var(--soft-mist);
box-shadow:var(--shadow-soft);
transition:transform 0.45s ease,box-shadow 0.45s ease;
}
.dest-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-lift);
}
.dest-card .media{
aspect-ratio:4/5;
overflow:hidden;
}
.dest-card .media img{
width:100%;height:100%;
object-fit:cover;
transition:transform 1.1s ease;
}
.dest-card:hover .media img{transform:scale(1.05)}
.dest-card .body{padding:1.35rem 1.4rem 1.6rem}
.dest-card .body h3{margin:0.4rem 0 0.55rem}
.dest-card .body p{font-size:0.92rem;color:rgba(42,48,46,0.75);line-height:1.6}
.dest-meta{
display:flex;flex-wrap:wrap;gap:0.5rem;
margin-top:1rem;
}
.dest-meta span{
font-family:var(--font-meta);
font-size:0.7rem;
letter-spacing:0.05em;
text-transform:uppercase;
padding:0.3rem 0.6rem;
border-radius:999px;
background:var(--limestone);
color:var(--river-slate);
}
.landscape-cats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1rem;
}
.landscape-cat{
padding:1.75rem;
border-radius:var(--radius);
background:rgba(242,244,241,0.55);
border:1px solid rgba(47,59,58,0.08);
transition:transform 0.35s ease,background 0.35s ease;
}
.landscape-cat:hover{
transform:translateY(-4px);
background:var(--soft-mist);
}
.landscape-cat .ico{
width:36px;height:36px;
margin-bottom:1rem;
stroke:var(--amber-clay);
fill:none;
stroke-width:1.5;
}
.landscape-cat h3{margin-bottom:0.45rem;font-size:1.2rem}
.landscape-cat p{font-size:0.92rem;color:rgba(42,48,46,0.72)}
.routes-table{
display:grid;
gap:0;
}
.route-line{
display:grid;
grid-template-columns:1.2fr 0.8fr 0.6fr 1.2fr;
gap:1.25rem;
align-items:center;
padding:1.5rem 0;
border-bottom:1px solid rgba(74,100,112,0.16);
}
.route-line h3{font-size:1.25rem}
.route-line .meta{margin:0}
.page-hero{
padding:9rem 0 4rem;
background:linear-gradient(145deg,#2F3B3A 0%,#4A6470 55%,#7D8B69 100%);
color:var(--soft-mist);
position:relative;
overflow:hidden;
}
.page-hero h1{color:var(--soft-mist);max-width:14ch;margin-bottom:1rem}
.page-hero .lead{color:rgba(242,244,241,0.85)}
.page-hero .eyebrow{color:var(--riesling-sand);margin-bottom:0.85rem}
.stats-row{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.25rem;
}
.stat{
padding:1.5rem;
border-radius:var(--radius);
background:rgba(242,244,241,0.5);
text-align:center;
}
.stat .num{
font-family:var(--font-meta);
font-size:clamp(1.8rem,3vw,2.6rem);
color:var(--amber-clay);
display:block;
margin-bottom:0.35rem;
}
.stat .lbl{
font-family:var(--font-meta);
font-size:0.72rem;
letter-spacing:0.07em;
text-transform:uppercase;
color:var(--river-slate);
}
.faq-list{max-width:760px}
.faq-item{
border-bottom:1px solid rgba(74,100,112,0.18);
}
.faq-q{
width:100%;
text-align:left;
padding:1.35rem 2.5rem 1.35rem 0;
font-family:var(--font-head);
font-weight:600;
font-size:1.05rem;
cursor:pointer;
position:relative;
}
.faq-q::after{
content:"+";
position:absolute;
right:0;top:50%;
transform:translateY(-50%);
font-size:1.4rem;
color:var(--amber-clay);
transition:transform 0.3s ease;
}
.faq-item.is-open .faq-q::after{content:"–"}
.faq-a{
max-height:0;
overflow:hidden;
transition:max-height 0.45s ease,padding 0.3s ease;
}
.faq-item.is-open .faq-a{
max-height:320px;
padding-bottom:1.25rem;
}
.faq-a p{color:rgba(42,48,46,0.78);line-height:1.65}
.map-wrap{
border-radius:var(--radius-lg);
overflow:hidden;
min-height:360px;
box-shadow:var(--shadow-soft);
}
.map-wrap iframe{
width:100%;
height:420px;
border:0;
display:block;
filter:grayscale(0.15) contrast(1.02);
}
.thanks-page{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:6rem 1.5rem;
background:linear-gradient(160deg,#F2F4F1,#E4E9E4 40%,#DDE3DE);
text-align:center;
}
.thanks-card{
max-width:560px;
}
.thanks-card .mark{
width:72px;height:72px;
margin:0 auto 1.75rem;
border-radius:50%;
background:linear-gradient(135deg,var(--cta-from),var(--cta-to));
display:flex;align-items:center;justify-content:center;
color:#fff;
font-size:1.8rem;
}
.thanks-card h1{margin-bottom:1rem}
.thanks-card .lead{margin:0 auto 2rem}
.legal-page{
padding:8.5rem 0 5rem;
background:linear-gradient(180deg,#F2F4F1,#E4E9E4);
}
.legal-page article{
max-width:820px;
margin:0 auto;
}
.legal-page h1{margin-bottom:0.75rem}
.legal-page .meta{margin-bottom:2.5rem;display:block}
.legal-page h2{
font-family:var(--font-head);
font-size:1.35rem;
margin:2.25rem 0 0.85rem;
letter-spacing:-0.01em;
}
.legal-page h3{
font-family:var(--font-head);
font-size:1.1rem;
margin:1.5rem 0 0.65rem;
}
.legal-page p,.legal-page li{
margin-bottom:0.9rem;
line-height:1.7;
color:rgba(42,48,46,0.84);
font-size:0.98rem;
}
.legal-page ul,.legal-page ol{
padding-left:1.25rem;
margin-bottom:1rem;
}
.legal-page li{list-style:disc}
.legal-page ol li{list-style:decimal}
.about-split{
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
align-items:center;
}
.about-split .media{
border-radius:var(--radius-lg);
overflow:hidden;
min-height:420px;
}
.about-split .media img{width:100%;height:100%;object-fit:cover;min-height:420px}
.portfolio-editorial{
display:flex;
flex-direction:column;
gap:4rem;
}
.port-row{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:2.5rem;
align-items:center;
}
.port-row.reverse{grid-template-columns:0.9fr 1.1fr}
.port-row.reverse .port-copy{order:-1}
.port-media{
border-radius:var(--radius-lg);
overflow:hidden;
min-height:380px;
box-shadow:var(--shadow-soft);
}
.port-media img{width:100%;height:100%;object-fit:cover;min-height:380px}
.port-copy .meta{margin-bottom:0.6rem}
.port-copy h2{margin-bottom:0.85rem;font-size:clamp(1.6rem,2.8vw,2.3rem)}
.port-copy p{margin-bottom:1rem;color:rgba(42,48,46,0.78);line-height:1.65}
@media (hover:hover) and (pointer:fine){
.dest-card:hover{transform:translateY(-8px) rotateX(0deg)}
}
@media (min-width:1025px){
.hero-media.js-parallax img{
will-change:transform;
}
}
@media (max-width:1024px){
.hero{min-height:92vh;align-items:center;padding:7rem 0 4rem}
.section-head,.value-editorial,.signature,.showcase,.insight,.contact-band,.about-split,.social-proof{
grid-template-columns:1fr;
}
.signature{min-height:auto}
.signature-visual{min-height:360px}
.showcase-main{min-height:420px}
.service-row{grid-template-columns:1fr;gap:0.75rem}
.service-row .meta-col{text-align:left}
.dest-grid,.landscape-cats{grid-template-columns:repeat(2,1fr)}
.route-line{grid-template-columns:1fr 1fr;gap:0.5rem 1rem}
.stats-row{grid-template-columns:repeat(2,1fr)}
.case-mini{grid-template-columns:1fr}
.port-row,.port-row.reverse{grid-template-columns:1fr}
.port-row.reverse .port-copy{order:0}
.insight-aside{position:static}
}
@media (max-width:720px){
.dest-grid,.landscape-cats,.stats-row{grid-template-columns:1fr}
.route-line{grid-template-columns:1fr}
.section{padding:4.5rem 0}
.hero-content{width:min(100% - 1.5rem,var(--container))}
.showcase-side{grid-template-rows:auto auto}
}
html,body{
overflow-x:hidden!important;
max-width:100vw;
}
