:root{
--bg:#0d160e;
--cream:#f2eadb;
--soft:#d9d3c0;
--gold:#b99b5b;
--gold-soft:#a99562;
--olive:#a5a681;
--line:rgba(201,177,113,.48);
--panel:rgba(9,16,10,.70);
--max:920px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
min-height:100vh;
background:#0d160e;
color:var(--cream);
font-family:Georgia,"Times New Roman",serif;
overflow-x:hidden;
}

/* The supplied reference image provides the realistic foliage/texture.
The central gradient masks its baked-in text so the live HTML below
stays selectable, responsive and accessible. */
.page{
    min-height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:48px 24px 34px;
    background:
    linear-gradient(
        90deg,
        rgba(8,15,9,.12) 0%,
        rgba(8,15,9,.36) 16%,
        rgba(8,15,9,.92) 31%,
        rgba(8,15,9,.96) 50%,
        rgba(8,15,9,.92) 69%,
        rgba(8,15,9,.36) 84%,
        rgba(8,15,9,.12) 100%
    ),
    linear-gradient(
        180deg,
        rgba(6,12,7,.48),
        rgba(7,13,8,.14) 20%,
        rgba(7,13,8,.22) 80%,
        rgba(6,12,7,.65)
    ),
    url("resources/img/common/common-background.png") center center / cover no-repeat;
    isolation:isolate;
}

.page::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:
radial-gradient(circle at 50% 42%,rgba(73,91,53,.20),transparent 38%),
linear-gradient(180deg,transparent 70%,rgba(4,10,5,.52));
pointer-events:none;
}

.page::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.08;
background-image:url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode:screen;
}

.content{
width:min(100%,var(--max));
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
position:relative;
z-index:2;
}

.brand{
display:flex;
flex-direction:column;
align-items:center;
margin-bottom:42px;
}

.brand_logo {
    width: 150px;
}

.logo-mark{
width:70px;
height:92px;
margin-bottom:7px;
filter:drop-shadow(0 0 8px rgba(196,166,91,.12));
}

.brand-name{
color:#d1bd8c;
font-size:clamp(26px,3.2vw,42px);
letter-spacing:.27em;
padding-left:.27em;
line-height:1;
}

.collective{
margin-top:12px;
display:flex;
align-items:center;
gap:12px;
color:#b8ad87;
font:11px/1 Arial,sans-serif;
letter-spacing:.42em;
text-transform:uppercase;
padding-left:.42em;
}
.collective::before,.collective::after{
content:"";
width:28px;
height:1px;
background:var(--line);
}

.eyebrow{
color:#aaa783;
font:10px/1.2 Arial,sans-serif;
letter-spacing:.42em;
text-transform:uppercase;
margin-bottom:18px;
}

h1{
margin:0;
color:#f4ecdd;
font-size:clamp(48px,7.3vw,64px);
font-weight:400;
line-height:.96;
letter-spacing:.17em;
padding-left:.17em;
text-shadow:0 2px 18px rgba(0,0,0,.16);
}

.divider{
width:min(360px,68vw);
margin:27px auto 20px;
display:flex;
align-items:center;
gap:16px;
}
.divider span{
flex:1;
height:1px;
background:var(--line);
}
.divider img{
width:28px;
color:var(--gold);
}

.tagline{
color:#b8b38e;
font-size:clamp(20px,2.4vw,30px);
letter-spacing:.04em;
margin-bottom:27px;
}

.intro{
max-width:690px;
color:#e4dfd2;
font-size:clamp(16px,1.55vw,16px);
line-height:1.8;
margin:0;
}

.glimpse{
margin-top:38px;
width:min(690px,92vw);
}

.glimpse-title{
color:#c4aa69;
font:10px/1.2 Arial,sans-serif;
letter-spacing:.34em;
text-transform:uppercase;
margin-bottom:17px;
}

.tiles{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.tile{
position:relative;
aspect-ratio:1/1;
border:1px solid rgba(194,164,92,.36);
overflow:hidden;
background:#273428;
box-shadow:0 7px 25px rgba(0,0,0,.18);
}

.tile::before{
content:"";
position:absolute;
inset:-10%;
background-size:cover;
background-position:center;
filter:saturate(.8) contrast(1.05);
}
.tile::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 38%,rgba(0,0,0,.28));
}

.tile img {
width: 100%;
}

.hint{
max-width:680px;
color:#b9b69c;
font-size:clamp(15px,1.4vw,18px);
line-height:1.7;
margin:28px 0 27px;
}

.values{
display:flex;
justify-content:center;
gap:48px;
margin-bottom:37px;
font:10px/1 Arial,sans-serif;
letter-spacing:.34em;
text-transform:uppercase;
color:#ded9c7;
}

.value{
display:flex;
align-items:center;
gap:10px;
}
.value::before{
content:"";
width:7px;
height:7px;
border:1px solid var(--gold);
transform:rotate(45deg);
}

.signup{width:min(640px,92vw)}
.signup-title{
color:#ece6d8;
font-size:17px;
margin-bottom:12px;
}

form{
display:flex;
gap:10px;
width:100%;
}

input{
flex:1;
min-width:0;
height:57px;
border:1px solid rgba(190,165,99,.48);
background:rgba(7,13,8,.38);
color:#fff;
outline:none;
padding:0 18px;
font:14px Arial,sans-serif;
}
input::placeholder{color:#8d907f}
input:focus{border-color:#c8ac68;background:rgba(7,13,8,.58)}

button{
height:57px;
padding:0 27px;
border:1px solid #958457;
background:#697452;
color:#f5efe1;
cursor:pointer;
font:11px Arial,sans-serif;
letter-spacing:.18em;
text-transform:uppercase;
transition:.22s ease;
}
button:hover{background:#7d8963;transform:translateY(-1px)}

.form-message{
min-height:20px;
margin-top:8px;
color:#c9b981;
font:12px Arial,sans-serif;
}

.socials{
display:flex;
gap:17px;
margin:20px 0 24px;
}

.social{
width:42px;
height:42px;
border:1px solid rgba(192,164,95,.52);
border-radius:50%;
display:grid;
place-items:center;
color:#c5b47c;
text-decoration:none;
font:16px Arial,sans-serif;
transition:.2s;
}
.social:hover{background:rgba(189,158,87,.12);transform:translateY(-2px)}

footer{
color:#817f6c;
font:9px/1.4 Arial,sans-serif;
letter-spacing:.16em;
text-transform:uppercase;
}

@media(max-width:760px){
.page{
align-items:flex-start;
padding:38px 16px 28px;
background-position:center center;
background-attachment:scroll;
}

.content{padding-top:15px}
.brand{margin-bottom:31px}
.logo-mark{width:59px;height:78px}
.brand-name{font-size:23px}
.collective{font-size:8px;letter-spacing:.34em}
.collective::before,.collective::after{width:20px}

.eyebrow{
font-size:8px;
letter-spacing:.28em;
margin-bottom:14px;
}

h1{
font-size:clamp(42px,12.5vw,67px);
letter-spacing:.10em;
padding-left:.10em;
}

.divider{margin:20px auto 17px}
.tagline{font-size:18px;line-height:1.45;margin-bottom:22px}
.intro{font-size:14.5px;line-height:1.75}
.intro br.desktop{display:none}

.glimpse{margin-top:30px}
.glimpse-title{font-size:8px;letter-spacing:.27em}
.tiles{gap:7px}

.hint{font-size:14px;margin:22px 0}
.values{gap:18px 27px;flex-wrap:wrap;font-size:8px;letter-spacing:.23em;margin-bottom:30px}

.signup-title{font-size:15px}
form{flex-direction:column;gap:8px}
input,button{width:100%;height:54px}
button{padding:0}
.socials{margin-top:17px}
footer{font-size:8px;letter-spacing:.10em}
}

@media(max-width:430px){
.page{padding-left:13px;padding-right:13px}
.brand-name{font-size:20px}
.collective{font-size:7px}
h1{font-size:40px}
.tagline{font-size:16.5px}
.intro{font-size:14px}
.tiles{gap:5px}
.social{width:39px;height:39px}
.divider img{
width:20px;
}
}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}