@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
--navy:#0B2348;
--gold:#B08B4F;
--blue:#31547F;
--ivory:#F7F4ED;
--grey:#E9EBEE;
--charcoal:#20242A;
--white:#fff;
--line:rgba(11,35,72,.12);
--shadow:0 18px 50px rgba(11,35,72,.10)
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font-family:"DM Sans",Arial,sans-serif;
color:var(--charcoal);
background:var(--ivory);
line-height:1.6
}

a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}

.container{
width:min(1180px,calc(100% - 40px));
margin:auto
}

/* =========================
   HEADER - WARM IVORY
   ========================= */

.site-header{
position:sticky;
top:0;
z-index:100;
background:var(--ivory);
border-bottom:1px solid rgba(11,35,72,.12);
box-shadow:0 8px 28px rgba(11,35,72,.08)
}

.nav-wrap{
width:min(1260px,calc(100% - 36px));
height:88px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px
}

.brand-logo{
display:flex;
align-items:center;
flex:none
}

.brand-logo img{
display:block;
width:205px;
height:auto;
filter:none
}

.main-nav{
display:flex;
align-items:center;
gap:4px
}

.main-nav>a{
color:var(--navy);
padding:12px 11px;
font-size:14px;
font-weight:600;
letter-spacing:.01em;
transition:.2s
}

.main-nav>a:not(.nav-cta):hover{
color:var(--gold)
}

.nav-cta{
background:var(--gold);
color:var(--navy)!important;
padding:12px 18px!important;
margin-left:8px
}

.nav-cta:hover{
background:#c39d60
}

.menu-btn{
display:none;
background:none;
border:0;
padding:8px
}

.menu-btn span{
display:block;
width:25px;
height:2px;
background:var(--navy);
margin:5px
}

/* =========================
   HERO
   ========================= */

.hero{
background:var(--navy);
color:#fff;
min-height:650px;
display:flex;
align-items:center;
position:relative;
overflow:hidden
}

.hero:after{
content:"";
position:absolute;
width:650px;
height:650px;
border:1px solid rgba(176,139,79,.28);
border-radius:50%;
right:-210px;
top:-170px;
box-shadow:0 0 0 80px rgba(176,139,79,.035),0 0 0 160px rgba(176,139,79,.025)
}

.hero-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:50px;
align-items:center;
position:relative;
z-index:1
}

.eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
color:var(--gold);
font-size:12px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase
}

.eyebrow:before{
content:"";
width:34px;
height:1px;
background:var(--gold)
}

h1,h2,h3,h4{
font-family:Manrope,Arial,sans-serif;
line-height:1.08;
margin:0 0 20px;
color:var(--navy)
}

.hero h1{
font-size:clamp(46px,6vw,76px);
letter-spacing:-.045em;
color:#fff;
max-width:750px
}

.hero p{
font-size:19px;
max-width:650px;
color:rgba(255,255,255,.75);
margin:0 0 32px
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border:1px solid transparent;
font-weight:700;
font-size:14px;
cursor:pointer;
transition:.2s
}

.btn-gold{
background:var(--gold);
color:var(--navy)
}

.btn-gold:hover{
transform:translateY(-2px);
background:#c39d60
}

.btn-light{
border-color:rgba(255,255,255,.35);
color:#fff
}

.btn-light:hover{
border-color:var(--gold);
color:var(--gold)
}

.hero-panel{
min-height:420px;
border:1px solid rgba(255,255,255,.15);
background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
padding:30px;
display:flex;
flex-direction:column;
justify-content:space-between
}

.world{
height:260px;
position:relative;
overflow:hidden;
background:radial-gradient(circle at 35% 45%,rgba(176,139,79,.22),transparent 30%),radial-gradient(circle at 70% 65%,rgba(49,84,127,.35),transparent 34%)
}

.world:before{
content:"";
position:absolute;
inset:20px;
background:repeating-linear-gradient(0deg,transparent 0 34px,rgba(255,255,255,.08) 35px 36px),repeating-linear-gradient(90deg,transparent 0 48px,rgba(255,255,255,.06) 49px 50px);
border-radius:50%
}

.route{
position:absolute;
height:1px;
background:var(--gold);
transform-origin:left center;
opacity:.75
}

.r1{
width:180px;
left:20%;
top:42%;
transform:rotate(16deg)
}

.r2{
width:210px;
left:47%;
top:56%;
transform:rotate(-18deg)
}

.r3{
width:150px;
left:35%;
top:70%;
transform:rotate(10deg)
}

.panel-note{
display:flex;
justify-content:space-between;
gap:15px;
border-top:1px solid rgba(255,255,255,.12);
padding-top:18px
}

.panel-note strong{
font-size:15px
}

.panel-note span{
color:rgba(255,255,255,.55);
font-size:12px
}

/* =========================
   SECTIONS
   ========================= */

.section{
padding:96px 0
}

.section-white{
background:#fff
}

.section-soft{
background:var(--grey)
}

.section-navy{
background:var(--navy);
color:#fff
}

.section-head{
max-width:730px;
margin-bottom:42px
}

.section-head h2{
font-size:clamp(34px,4vw,52px);
letter-spacing:-.035em
}

.section-navy h2,
.section-navy h3{
color:#fff
}

.section-head p{
font-size:17px;
color:#5b6470
}

.section-navy .section-head p{
color:rgba(255,255,255,.7)
}

/* =========================
   TRUST
   ========================= */

.trust{
display:grid;
grid-template-columns:repeat(4,1fr);
border:1px solid var(--line);
background:#fff
}

.trust-item{
padding:28px;
border-right:1px solid var(--line)
}

.trust-item:last-child{
border-right:0
}

.trust-item b{
display:block;
color:var(--navy);
font-size:14px;
margin-bottom:7px;
letter-spacing:.04em
}

.trust-item span{
font-size:14px;
color:#68717d
}

/* =========================
   CARDS
   ========================= */

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}

.card{
background:#fff;
border:1px solid var(--line);
padding:28px;
transition:.25s
}

.card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow)
}

.card-num{
color:var(--gold);
font-weight:800;
font-size:13px;
letter-spacing:.12em
}

.card h3{
font-size:23px;
margin-top:35px
}

.card p{
color:#68717d;
margin-bottom:0
}

/* =========================
   CATEGORIES
   ========================= */

.category-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line)
}

.category{
background:var(--ivory);
min-height:160px;
padding:28px;
display:flex;
align-items:end;
position:relative
}

.category:before{
content:"";
position:absolute;
top:28px;
left:28px;
width:36px;
height:2px;
background:var(--gold)
}

.category h3{
font-size:20px;
margin:0
}

/* =========================
   BRANDS
   ========================= */

.brand-strip{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px
}

.brand-chip{
background:#fff;
border:1px solid var(--line);
min-height:100px;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
text-align:center;
font-weight:800;
color:var(--navy);
letter-spacing:-.01em
}

.brand-chip span{
max-width:150px
}

.brand-chip:hover{
border-color:var(--gold)
}

/* =========================
   SPLIT
   ========================= */

.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center
}

.large-number{
font-family:Manrope;
font-size:120px;
line-height:.8;
color:rgba(176,139,79,.28);
font-weight:800
}

.check-list{
display:grid;
gap:18px
}

.check{
display:flex;
gap:15px
}

.check i{
width:25px;
height:25px;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--gold);
color:var(--navy);
font-style:normal;
font-weight:800;
flex:none
}

.check b{
display:block;
margin-bottom:2px;
color:var(--navy)
}

.check span{
font-size:14px;
color:#68717d
}

/* =========================
   PROCESS
   ========================= */

.process{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
border-top:1px solid rgba(255,255,255,.18)
}

.step{
padding:30px 22px;
border-right:1px solid rgba(255,255,255,.18)
}

.step:last-child{
border:0
}

.step .n{
color:var(--gold);
font-weight:800;
font-size:13px
}

.step h3{
font-size:21px;
margin-top:30px
}

.step p{
color:rgba(255,255,255,.65);
font-size:14px
}

/* =========================
   CTA
   ========================= */

.cta-band{
background:var(--gold);
padding:58px 0
}

.cta-band-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px
}

.cta-band h2{
margin:0;
color:var(--navy);
font-size:38px
}

.cta-band p{
margin:7px 0 0;
color:rgba(11,35,72,.72)
}

/* =========================
   PAGE HERO
   ========================= */

.page-hero{
padding:90px 0 75px;
background:var(--navy);
color:#fff
}

.page-hero h1{
font-size:clamp(42px,5vw,64px);
color:#fff;
max-width:800px
}

.page-hero p{
max-width:700px;
color:rgba(255,255,255,.72);
font-size:18px
}

/* =========================
   FILTERS
   ========================= */

.filters{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:0 0 28px
}

.filter,
.search{
border:1px solid var(--line);
background:#fff;
padding:12px 15px;
color:var(--navy)
}

.filter{
cursor:pointer
}

.filter.active{
background:var(--navy);
color:#fff
}

.search{
width:min(350px,100%);
outline:none
}

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

.brand-card{
background:#fff;
border:1px solid var(--line);
min-height:145px;
padding:20px;
display:flex;
flex-direction:column;
justify-content:space-between
}

.brand-mark{
height:72px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:var(--navy);
font-family:Manrope;
font-size:19px;
font-weight:800
}

.brand-meta{
display:flex;
justify-content:space-between;
align-items:center;
font-size:11px;
color:#78818c;
text-transform:uppercase;
letter-spacing:.08em
}

.brand-link{
color:var(--gold);
font-weight:800
}

/* =========================
   CONTACT FORM
   ========================= */

.form-wrap{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:60px
}

.contact-points{
display:grid;
gap:20px
}

.contact-point{
border-top:1px solid var(--line);
padding-top:16px
}

.contact-point b{
display:block;
color:var(--navy)
}

.contact-point span{
color:#68717d;
font-size:14px
}

.form{
background:#fff;
border:1px solid var(--line);
padding:32px;
box-shadow:var(--shadow)
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px
}

.field{
display:grid;
gap:7px
}

.field.full{
grid-column:1/-1
}

.field label{
font-size:12px;
font-weight:800;
color:var(--navy);
text-transform:uppercase;
letter-spacing:.06em
}

.field input,
.field textarea,
.field select{
border:1px solid #d6dbe0;
padding:13px 14px;
outline:none;
background:#fff;
color:var(--charcoal)
}

.field textarea{
min-height:130px;
resize:vertical
}

.field input:focus,
.field textarea:focus,
.field select:focus{
border-color:var(--gold)
}

.form-status{
margin-top:15px;
font-size:14px
}

.success{
color:#24613b
}

.error{
color:#9a2f2f
}

/* =========================
   FOOTER
   ========================= */

.footer{
background:var(--navy);
color:#fff;
padding:70px 0 25px
}

.footer-grid{
display:grid;
grid-template-columns:1.5fr .7fr .7fr 1fr;
gap:45px
}

.footer-logo{
width:210px;
background:#fff;
padding:6px;
margin-bottom:18px
}

.footer p{
color:rgba(255,255,255,.58);
font-size:14px;
max-width:340px
}

.footer h4{
color:#fff;
font-size:14px;
margin-bottom:16px
}

.footer-grid a:not(.footer-cta){
display:block;
color:rgba(255,255,255,.64);
font-size:14px;
margin:8px 0
}

.footer-grid a:not(.footer-cta):hover{
color:var(--gold)
}

.footer-cta{
color:var(--gold);
font-weight:800
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);
margin-top:45px;
padding-top:18px;
display:flex;
justify-content:space-between;
color:rgba(255,255,255,.45);
font-size:12px
}

/* =========================
   TABLET
   ========================= */

@media(max-width:1050px){

.main-nav>a{
padding:11px 7px;
font-size:13px
}

.brand-logo img{
width:180px
}

.hero-grid{
grid-template-columns:1fr
}

.hero-panel{
display:none
}

.brand-grid{
grid-template-columns:repeat(3,1fr)
}

}

/* =========================
   MOBILE
   ========================= */

@media(max-width:800px){

.nav-wrap{
height:74px
}

.brand-logo img{
width:175px
}

.menu-btn{
display:block
}

.main-nav{
display:none;
position:absolute;
top:74px;
left:0;
right:0;
background:var(--ivory);
padding:12px 18px 20px;
flex-direction:column;
align-items:stretch;
border-top:1px solid rgba(11,35,72,.12)
}

.main-nav.open{
display:flex
}

.main-nav>a{
padding:13px 8px;
color:var(--navy)
}

.nav-cta{
margin:5px 0 0;
text-align:center
}

.hero{
min-height:560px
}

.section{
padding:70px 0
}

.trust{
grid-template-columns:1fr 1fr
}

.trust-item:nth-child(2){
border-right:0
}

.trust-item{
border-bottom:1px solid var(--line)
}

.cards,
.category-grid,
.process,
.split,
.form-wrap{
grid-template-columns:1fr
}

.brand-strip{
grid-template-columns:repeat(3,1fr)
}

.brand-grid{
grid-template-columns:repeat(2,1fr)
}

.process{
border-top:0
}

.step{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.18)
}

.footer-grid{
grid-template-columns:1fr 1fr
}

.cta-band-inner{
align-items:flex-start;
flex-direction:column
}

.form-grid{
grid-template-columns:1fr
}

.field.full{
grid-column:auto
}

}

/* =========================
   SMALL MOBILE
   ========================= */

@media(max-width:520px){

.container{
width:min(100% - 28px,1180px)
}

.hero h1{
font-size:45px
}

.hero p{
font-size:16px
}

.trust{
grid-template-columns:1fr
}

.trust-item{
border-right:0!important
}

.brand-strip{
grid-template-columns:repeat(2,1fr)
}

.brand-grid{
grid-template-columns:1fr
}

.footer-grid{
grid-template-columns:1fr
}

.footer-bottom{
flex-direction:column;
gap:7px
}

.page-hero{
padding:70px 0 55px
}

}