/*========================================================

BHW CONSULT
GLOBAL DESIGN STANDARD
VERSION 3.0

Corporate Investment Advisory Platform

Version : 3.0
Date    : July 2026

Used by:

• Home
• About
• Services
• Investment Intelligence
• WireSettle
• Strategy Session
• Landing Pages
• Reports

========================================================*/


/*========================================================
ROOT VARIABLES
========================================================*/

:root{

    /* Corporate Colours */

    --primary:#1e3a8a;
    --primary-dark:#172554;
    --primary-light:#3b82f6;

    --secondary:#0f766e;

    --accent:#2563eb;

    --success:#15803d;
    --warning:#d97706;

    /* Text */

    --text:#334155;
    --text-light:#64748b;

    /* Backgrounds */

    --background:#f8fafc;
    --white:#ffffff;

    /* Borders */

    --border:#e2e8f0;

    /* Shadows */

    --shadow-soft:0 5px 18px rgba(0,0,0,.05);
    --shadow-medium:0 10px 28px rgba(0,0,0,.08);

    /* Radius */

    --radius:14px;

    /* Width */

    --container:1080px;

}


/*========================================================
GLOBAL RESET
========================================================*/

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Segoe UI',Arial,sans-serif;

    background:var(--background);

    color:var(--text);

    font-size:15px;

    line-height:1.65;

    overflow-x:hidden;

}

img{

    max-width:100%;
    height:auto;
    display:block;

}

a{

    color:var(--primary);

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:var(--primary-light);

}


/*========================================================
TYPOGRAPHY
========================================================*/

h1,h2,h3,h4,h5{

    color:var(--primary);

    font-weight:700;

    line-height:1.15;

    margin-bottom:18px;

}

h1{

    font-size:40px;

}

h2{

    font-size:30px;

}

h3{

    font-size:22px;

}

h4{

    font-size:18px;

}

p{

    margin-bottom:18px;

    color:var(--text);

}

.small{

    font-size:.90rem;

}

.lead{

    font-size:1.15rem;

    color:var(--text-light);

    max-width:760px;

}


/*========================================================
LAYOUT
========================================================*/

.container{

    max-width:var(--container);

    margin:auto;

    padding:0 22px;

}

section{

    padding:42px 22px;

}

.section-title{

    margin-bottom:12px;

}

.section-intro{

    max-width:760px;

    margin-bottom:28px;

}


/*========================================================
NAVIGATION
========================================================*/

nav{

    position:sticky;

    top:0;

    background:#ffffff;

    border-bottom:1px solid var(--border);

    z-index:999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 22px;

}

.logo{

    height:34px;

}

nav a{

    font-size:13px;

    font-weight:600;

    margin-left:16px;

}

.lang-switch{

    font-size:12px;

}


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

.hero{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:50px;

    align-items:center;

    padding:50px 0;

}

.hero h1{

    margin-bottom:20px;

}

.hero p{

    max-width:700px;

}

.profile{

    max-width:240px;

    border-radius:18px;

    box-shadow:var(--shadow-medium);

}


/*========================================================
BUTTONS
========================================================*/

.btn{

    display:inline-block;

    padding:12px 22px;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

    transition:.25s;

    margin-right:8px;

    margin-bottom:8px;

}

.btn-primary{

    background:var(--primary);

    color:#ffffff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    color:#ffffff;

}

.btn-secondary{

    border:2px solid var(--primary);

    color:var(--primary);

    background:#ffffff;

}

.btn-secondary:hover{

    background:var(--primary);

    color:#ffffff;

}


/*========================================================
GRID SYSTEM
========================================================*/

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:22px;

}

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}


/*========================================================
CARD SYSTEM
========================================================*/

.card{

    background:#ffffff;

    border-radius:var(--radius);

    padding:24px;

    box-shadow:var(--shadow-soft);

    transition:.25s;

}

.card:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-medium);

}

.border-blue{

    border-top:5px solid var(--primary);

}

.border-light{

    border-top:5px solid var(--accent);

}

.border-green{

    border-top:5px solid var(--secondary);

}

.border-slate{

    border-top:5px solid #475569;

}


/*========================================================
PROMOTION PANELS
========================================================*/

.report-promo{

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    box-shadow:var(--shadow-soft);

    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:30px;

    align-items:center;

}

.report-side{

    background:var(--primary);

    color:#ffffff;

    padding:24px;

    border-radius:14px;

}

.report-side h3{

    color:#ffffff;

}

.masterclass-promo{

    background:#ffffff;

    border-left:5px solid var(--primary);

    padding:26px;

    border-radius:14px;

    box-shadow:var(--shadow-soft);

}
/*========================================================
INVESTMENT INTELLIGENCE COMPONENTS
VERSION 3.0
========================================================*/


/*========================================================
RESEARCH LABEL
========================================================*/

.research-label{

    display:inline-block;

    background:#dbeafe;

    color:var(--primary);

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.6px;

    padding:7px 16px;

    border-radius:999px;

    margin-bottom:14px;

}


/*========================================================
FEATURED REPORT
========================================================*/

.featured-report{

    background:#ffffff;

    border-radius:18px;

    padding:34px;

    box-shadow:var(--shadow-medium);

    display:grid;

    grid-template-columns:1.45fr .85fr;

    gap:40px;

    align-items:center;

    margin:30px 0 45px;

}

.featured-report h2{

    margin-bottom:10px;

}

.featured-report h3{

    margin-bottom:16px;

}

.report-summary{

    max-width:700px;

    margin-bottom:20px;

}

.report-cover{

    text-align:center;

}

.report-cover img{

    max-width:290px;

    margin:auto;

    border-radius:8px;

    box-shadow:0 14px 34px rgba(0,0,0,.15);

}


/*========================================================
DOWNLOAD BADGE
========================================================*/

.download-badge{

    display:inline-block;

    background:#dcfce7;

    color:#166534;

    padding:7px 14px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:16px;

}


/*========================================================
SERIES GRID
========================================================*/

.series-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

    margin-top:28px;

}

.series-card{

    background:#ffffff;

    border-radius:16px;

    padding:24px;

    box-shadow:var(--shadow-soft);

    border-top:5px solid var(--primary);

    transition:.25s;

}

.series-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-medium);

}

.series-card h3{

    margin-bottom:10px;

}

.series-card p{

    margin-bottom:14px;

}


/*========================================================
STATUS BADGES
========================================================*/

.status{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

}

.available{

    background:#dcfce7;

    color:#166534;

}

.coming-soon{

    background:#e2e8f0;

    color:#64748b;

}


/*========================================================
STATISTICS GRID
========================================================*/

.stats-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:20px;

    margin:30px 0;

}

.stat-card{

    background:#ffffff;

    padding:22px;

    border-radius:16px;

    text-align:center;

    box-shadow:var(--shadow-soft);

}

.stat-card strong{

    display:block;

    font-size:34px;

    color:var(--primary);

    margin-bottom:8px;

}

.stat-card span{

    font-size:13px;

    color:var(--text-light);

}


/*========================================================
HIGHLIGHT PANEL
========================================================*/

.highlight-panel{

    background:#eff6ff;

    border-left:5px solid var(--primary);

    border-radius:14px;

    padding:24px;

    margin:30px 0;

}

.highlight-panel h3{

    margin-bottom:10px;

}


/*========================================================
EXECUTIVE SUMMARY
========================================================*/

.executive-summary{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    box-shadow:var(--shadow-soft);

    margin:35px 0;

}


/*========================================================
QUOTE PANEL
========================================================*/

.quote-panel{

    background:#1e3a8a;

    color:#ffffff;

    border-radius:18px;

    padding:30px;

    margin:35px 0;

}

.quote-panel p{

    color:#ffffff;

    font-size:20px;

    line-height:1.5;

    font-style:italic;

}

.quote-panel cite{

    display:block;

    margin-top:20px;

    font-style:normal;

    font-weight:600;

}


/*========================================================
SCORECARD BANNER
========================================================*/

.scorecard-banner{

    background:linear-gradient(135deg,#1e3a8a,#2563eb);

    color:#ffffff;

    padding:36px;

    border-radius:18px;

    margin:40px 0;

}

.scorecard-banner h2,

.scorecard-banner h3,

.scorecard-banner p{

    color:#ffffff;

}


/*========================================================
TIMELINE
========================================================*/

.timeline{

    border-left:4px solid var(--primary);

    padding-left:30px;

    margin:40px 0;

}

.timeline-item{

    margin-bottom:28px;

}

.timeline-item h4{

    margin-bottom:8px;

}


/*========================================================
REPORT TABLE
========================================================*/

.report-table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

    background:#ffffff;

    box-shadow:var(--shadow-soft);

}

.report-table th{

    background:var(--primary);

    color:#ffffff;

    padding:16px;

    text-align:left;

}

.report-table td{

    padding:15px;

    border-bottom:1px solid var(--border);

}


/*========================================================
SECTION DIVIDER
========================================================*/

.section-divider{

    border-top:1px solid var(--border);

    margin:50px 0;

}


/*========================================================
CALL OUT BOX
========================================================*/

.callout{

    background:#f8fafc;

    border:1px solid var(--border);

    border-radius:14px;

    padding:22px;

    margin:28px 0;

}


/*========================================================
RESPONSIVE ADDITIONS
========================================================*/

@media(max-width:900px){

.featured-report{

grid-template-columns:1fr;

text-align:center;

}

.report-cover{

margin-top:25px;

}

.series-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.stats-grid{

grid-template-columns:1fr;

}

.report-cover img{

max-width:220px;

}

}
/*========================================================
BHW CONSULT
GLOBAL DESIGN STANDARD
VERSION 3.0

PART 3

Forms
Landing Pages
Homepage Banner
Utilities
Responsive Refinements

========================================================*/


/*========================================================
UTILITY CLASSES
========================================================*/

.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

.full-width{width:100%;}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.pt-20{padding-top:20px;}
.pt-40{padding-top:40px;}

.pb-20{padding-bottom:20px;}
.pb-40{padding-bottom:40px;}

.rounded{
border-radius:14px;
}

.shadow{
box-shadow:var(--shadow-soft);
}


/*========================================================
INVESTMENT BANNER
========================================================*/

.investment-banner{

background:linear-gradient(135deg,#1e3a8a,#2563eb);

color:#ffffff;

padding:30px;

border-radius:18px;

margin:35px 0;

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

align-items:center;

}

.investment-banner h2,
.investment-banner h3,
.investment-banner p{

color:#ffffff;

}

.banner-buttons{

margin-top:20px;

}


/*========================================================
DOWNLOAD PAGE
========================================================*/

.download-page{

max-width:760px;

margin:auto;

}

.download-cover{

text-align:center;

margin-bottom:30px;

}

.download-cover img{

max-width:280px;

margin:auto;

box-shadow:var(--shadow-medium);

border-radius:8px;

}


/*========================================================
DOWNLOAD FORM
========================================================*/

.download-form{

background:#ffffff;

padding:34px;

border-radius:18px;

box-shadow:var(--shadow-soft);

margin-top:30px;

}

.download-form h2{

margin-bottom:20px;

}

.download-form label{

display:block;

font-weight:600;

margin-top:16px;

margin-bottom:6px;

color:var(--primary);

}

.download-form input,
.download-form select,
.download-form textarea{

width:100%;

padding:12px;

border:1px solid var(--border);

border-radius:8px;

font-size:14px;

background:#ffffff;

transition:.25s;

}

.download-form input:focus,
.download-form select:focus,
.download-form textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(37,99,235,.12);

}

.download-form textarea{

min-height:120px;

resize:vertical;

}


/*========================================================
CHECKBOXES / RADIO BUTTONS
========================================================*/

.form-options{

margin-top:20px;

}

.form-options label{

display:block;

font-weight:500;

margin-bottom:8px;

color:var(--text);

}


/*========================================================
SUCCESS PANEL
========================================================*/

.success-panel{

background:#ecfdf5;

border-left:6px solid var(--success);

padding:28px;

border-radius:14px;

margin:35px 0;

}

.success-panel h2{

color:var(--success);

}


/*========================================================
THANK YOU PANEL
========================================================*/

.thank-you{

text-align:center;

background:#ffffff;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow-soft);

}

.thank-you h1{

margin-bottom:18px;

}

.thank-you p{

max-width:640px;

margin:auto auto 20px;

}


/*========================================================
HOMEPAGE REPORT STRIP
========================================================*/

.home-report{

background:#eff6ff;

border:1px solid #bfdbfe;

padding:20px;

border-radius:14px;

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin:30px 0;

}

.home-report strong{

color:var(--primary);

display:block;

margin-bottom:6px;

}


/*========================================================
FEATURE LIST
========================================================*/

.feature-list{

list-style:none;

padding:0;

margin:20px 0;

}

.feature-list li{

padding:8px 0;

padding-left:28px;

position:relative;

}

.feature-list li:before{

content:"✓";

position:absolute;

left:0;

color:var(--success);

font-weight:bold;

}


/*========================================================
REPORT COVER DISPLAY
========================================================*/

.report-display{

display:grid;

grid-template-columns:320px 1fr;

gap:40px;

align-items:start;

margin:40px 0;

}

.report-display img{

box-shadow:var(--shadow-medium);

border-radius:10px;

}


/*========================================================
AUTHOR PANEL
========================================================*/

.author-panel{

display:grid;

grid-template-columns:120px 1fr;

gap:20px;

align-items:center;

background:#ffffff;

padding:24px;

border-radius:16px;

box-shadow:var(--shadow-soft);

margin-top:40px;

}

.author-panel img{

border-radius:50%;

}


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

.footer-cta{

background:#0f172a;

color:#ffffff;

padding:45px;

border-radius:18px;

text-align:center;

margin:50px 0;

}

.footer-cta h2,
.footer-cta p{

color:#ffffff;

}


/*========================================================
RESPONSIVE REFINEMENTS
========================================================*/

@media(max-width:900px){

.investment-banner{

grid-template-columns:1fr;

text-align:center;

}

.report-display{

grid-template-columns:1fr;

text-align:center;

}

.author-panel{

grid-template-columns:1fr;

text-align:center;

}

.home-report{

flex-direction:column;

text-align:center;

}

}

@media(max-width:600px){

.download-form{

padding:24px;

}

.investment-banner{

padding:24px;

}

.footer-cta{

padding:28px;

}

}