:root{
  --primary:#00103e; --secondary:#ae3108; --accent:#f4bf00;
  --surface:#fbf8ff; --on-surface:#191a28; --muted:#444650;
  --outline:#c5c6d2; --low:#f4f2ff; --high:#e8e6fa;
  --head:"Work Sans",sans-serif; --body:"Hanken Grotesk",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--surface);color:var(--on-surface);font:400 16px/1.5 var(--body)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:#fe693f;color:#601500}


.container{max-width:1280px;margin:0 auto;padding:0 20px;width:100%}
.label{font-size: 1rem;line-height:1.2;letter-spacing:.05em;font-weight:700}
.small{font-size:12px;line-height:1.2;font-weight:500}
.h-xl{font:700 48px/1.1 var(--head);letter-spacing:-.02em}
.h-lg{font:600 32px/1.2 var(--head);letter-spacing:-.01em;font-weight:700}
.h-md{font:600 24px/1.3 var(--head);font-weight:700}
.lead{font-size:18px;line-height:1.6;color:var(--muted)}
.cap{text-transform:uppercase}
.section{padding:80px 0}

/* Header */
header{position:sticky;top:0;z-index:50;height:80px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--outline);transition:all .3s}
header.scrolled{height:64px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
header .container{height:100%;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:48px;width:48px;object-fit:contain}
.brand-text{display:flex;flex-direction:column}
.brand-name{font:700 24px/1.3 var(--head);color:var(--primary);line-height:1.25}
.brand-sub{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.025em;text-transform:uppercase}
.nav-wrap{display:none;align-items:center;gap:32px}
nav{display:flex;gap:24px}
nav a{transition:color .15s;}
nav a:hover{color:var(--primary)}
nav a.active{color:var(--primary);border-bottom:2px solid var(--accent);padding-bottom:4px}
.btn-call{display:flex;align-items:center;gap:8px;background:var(--primary);color:#fff;padding:8px 24px;border-radius:12px;font-weight:700;font-size:14px}
.btn-call .material-symbols-outlined{font-size:14px}
.menu-btn{background:none;border:0;color:var(--primary)}
.menu-btn .material-symbols-outlined{font-size:30px}

/* Hero */
.hero{position:relative;min-height:80vh;display:flex;align-items:center;background:#f5f5f5;overflow:hidden;padding:48px 0}
.hero-bg{display:none;position:absolute;right:0;top:0;width:33.333%;height:100%;background:var(--low);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1fr;gap:80px;align-items:center;position:relative;z-index:20}
.hero-copy{max-width:576px}
.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:24px;color:var(--primary)}
.eyebrow span:first-child{width:48px;height:2px;background:var(--accent)}
.eyebrow span:last-child{letter-spacing:.1em}
.hero h1{color:var(--primary);margin-bottom:24px}
.hero .lead{max-width:448px;margin-bottom:40px}
.btn-row{display:flex;flex-direction:column;gap:16px}
.btn{height:56px;padding:0 32px;border-radius:12px;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.btn-solid{background:var(--primary);color:#fff;border:0}
.btn-solid:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:rgba(0,16,62,.05)}
.hero-img{display:none;position:relative;height:600px}
/*.hero-img::before{content:"";position:absolute;inset:0;background:rgba(244,191,0,.1);border-radius:24px;transform:rotate(-2deg) scale(1.05)}*/
.hero-img img{position:relative;z-index:10;width:100%;height:100%;object-fit:cover;border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}

/* Badges */
.badges{padding:48px 0;background:#fff;border-top:1px solid var(--outline);border-bottom:1px solid var(--outline)}
.badges .container{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:32px}
.badge{display:flex;align-items:center;gap:16px}
.badge-icon{width:56px;height:56px;background:var(--high);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;filter:grayscale(1);transition:filter .3s}
.badge:hover .badge-icon{filter:grayscale(0)}
.badge-title{display:block;color:var(--primary)}
.badge-sub{display:block;color:var(--muted)}

/* Services */
.services{background:#fff}
.section-head{text-align:center;max-width:672px;margin:0 auto 80px}
.section-head h2{color:var(--primary);margin-bottom:16px}
.cards{display:flex;flex-direction:column;gap:48px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(197,198,210,.3);border-radius:24px;overflow:hidden;transition:box-shadow .5s}
.card:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.card-body{padding:48px;display:flex;flex-direction:column;justify-content:center}
.card-media{height:256px;overflow:hidden}
.card-media img {width:100%;height:512px;object-fit:cover;transition:transform .7s}
.card:hover .card-media img{transform:scale(1.05)}
.card-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:32px;color:#fff}
.card-icon .material-symbols-outlined{font-size:30px}
.card-icon.gold{background:var(--accent);box-shadow:0 10px 15px -3px rgba(244,191,0,.2)}
.card-icon.navy{background:var(--primary);box-shadow:0 10px 15px -3px rgba(0,16,62,.2)}
.card h3{color:var(--primary);margin-bottom:16px}
.card p{margin-bottom:32px}
.card-link{color:var(--primary);font-weight:700;display:flex;align-items:center;gap:8px;transition:gap .2s}
.card:hover .card-link{gap:16px}
.mini-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:48px}
.mini{padding:32px;background:#f5f5f5;border:1px solid rgba(197,198,210,.2);border-radius:16px;text-align:center;transition:all .2s}
.mini:hover{background:#ebebeb;box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.mini .material-symbols-outlined{font-size:36px;color:var(--primary);margin-bottom:16px}
.mini h4{color:var(--primary);margin-bottom:8px}
.mini p{color:var(--muted)}
.mini img{display:block;margin:0 auto 16px}

/* About */
.about{background:var(--primary);color:#fff}
.about-grid{display:grid;grid-template-columns:1fr;gap:80px;align-items:center}
.about h2{margin-bottom:32px}
.about-text{font-size:18px;line-height:1.625;font-weight:300;opacity:.8}
.about-text p+p{margin-top:24px}
.person{margin-top:48px;display:flex;align-items:center;gap:24px;padding:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px}
.person img{width:80px;height:80px;border-radius:12px;object-fit:cover;filter:grayscale(1);transition:filter .3s}
.person img:hover{filter:grayscale(0)}
.person-name{font-weight:700;font-size:20px;line-height:1.4}
.person-role{color:var(--accent);font-weight:500;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat{background:rgba(255,255,255,.1);padding:40px;border-radius:16px;text-align:center}
.stat strong{display:block;font:700 48px/1.1 var(--head);letter-spacing:-.02em;margin-bottom:8px}
.stat span{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;opacity:.6}
.rating{grid-column:span 2;background:var(--accent);padding:4px;border-radius:16px;margin-top:16px}
.rating-inner{background:var(--primary);padding:40px;border-radius:8px;text-align:center}
.stars{display:flex;justify-content:center;color:var(--accent);margin-bottom:16px}
.rating-inner .h-md{margin-bottom:4px}
.rating-inner p:last-child{font-size:14px;opacity:.6}

/* Contact */
.contact{background:#fff}
.contact-box{background:var(--low);border-radius:40px;padding:32px}
.contact-grid{display:grid;grid-template-columns:1fr;gap:64px}
.contact h2{color:var(--primary);margin-bottom:24px}
.contact .lead{margin-bottom:48px}
.info-list {display:flex; flex-direction:column; gap:32px }
.info { display:flex; align-items:center; gap:24px }
.info-icon { width:64px; height:64px; background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--primary); box-shadow:0 1px 2px rgba(0,0,0,.05); box-shadow: 10px 25px 50px -12px rgba(0,0,0,.25) ; transition:box-shadow .5s }
.info:hover .info-icon {} 
.info-label{color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.1em}
.info-value{font-size:20px;line-height:1.4;font-weight:700;color:var(--primary)}
form{background:#fff;padding:32px;border-radius:24px;box-shadow:0 20px 25px 5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:24px}
.form-row{display:grid;grid-template-columns:1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{color:var(--primary)}
.field input,.field select,.field textarea{font:inherit;border:1px solid var(--outline);border-radius:8px;outline:none;background:#fff;transition:border-color .2s}
.field input,.field select{height:48px;padding:0 16px}
.field textarea{height:128px;padding:16px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
form button{width:100%;background:var(--primary);color:#fff;height:56px;border:0;border-radius:8px;font-weight:700;font-size:18px;transition:box-shadow .2s}
form button:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}

/* Footer */
footer{background:#f5f5f5;padding:48px 0;border-top:1px solid var(--outline)}
footer .container{display:flex;flex-direction:column;align-items:center;gap:32px}
.foot-brand{display:flex;align-items:center;gap:16px;color:var(--primary)}
.foot-brand img{height:40px;width:40px;object-fit:contain;filter:grayscale(1)}
.foot-links{display:flex;gap:32px;color:var(--muted)}
.foot-links a:hover{color:var(--primary)}

/* Responsive */
@media (min-width:640px){
  .btn-row{flex-direction:row}
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:768px){
  .nav-wrap{display:flex}
  .menu-btn{display:none}
  .hero-bg,.hero-img{display:block}
  .hero-grid,.about-grid{grid-template-columns:1fr 1fr}
  .card{flex-direction:row}
  .card-body,.card-media{width:50%}
  .card-body{padding:64px}
  .card-media{height:auto}
  .card.flip .card-body{order:1}
  .card.flip .card-media{order:2}
  footer .container{flex-direction:row;justify-content:space-between}
  .contact-box{padding:64px}
  form{padding:48px}
}
@media (min-width:1024px){
  .mini-grid{grid-template-columns:repeat(4,1fr)}
  .contact-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .h-xl{font-size:40px}
  .card-media.first{order:-1}
}