:root {
    --navy: #101a28;
    --navy-soft: #172233;
    --navy-dark: #080f19;
    --ivory: #f7f4ed;
    --paper: #ffffff;
    --stone: #ebe7dd;
    --silver: #c9cbcc;
    --silver-light: #e8e8e6;
    --pewter: #747b80;
    --text: #171717;
    --muted: #6b6d70;
    --line: rgba(16, 26, 40, 0.12);
    --line-dark: rgba(255, 255, 255, 0.13);
    --radius: 3px;
    --shadow: 0 22px 70px rgba(8, 15, 25, 0.14);
    --shadow-soft: 0 14px 42px rgba(8, 15, 25, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Inter", sans-serif; background: var(--ivory); color: var(--text); line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, .serif { font-family: "Cormorant Garamond", serif; }
.container { max-width: 1180px; }
.page { background: linear-gradient(rgba(16, 26, 40, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 26, 40, 0.025) 1px, transparent 1px), var(--ivory); background-size: 48px 48px; }

.btn { border-radius: var(--radius); padding: 0.84rem 1.1rem; font-size: 0.9rem; font-weight: 750; border-width: 1px; transition: 0.16s ease; }
.btn-dark-clean { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-dark-clean:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; transform: translateY(-1px); }
.btn-silver-clean { background: linear-gradient(135deg, #ffffff, #c9cbcc); color: var(--navy); border-color: rgba(255, 255, 255, 0.45); }
.btn-silver-clean:hover { background: #ffffff; color: var(--navy); transform: translateY(-1px); }
.btn-outline-clean, .btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-outline-clean:hover, .btn-ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.top-strip { background: var(--navy-dark); color: rgba(255,255,255,0.7); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.navbar { padding: 0.82rem 0; background: rgba(247,244,237,0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.navbar-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.logo-box { width: 48px; height: 48px; background: var(--navy) center/contain no-repeat; border: 1px solid rgba(16,26,40,0.2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 48px; }
.logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.logo-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)), var(--navy); }
.brand-copy { line-height: 1; min-width: 0; }
.brand-copy strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.06rem; letter-spacing: 0.12em; color: var(--navy); font-weight: 700; white-space: nowrap; }
.brand-copy span { display: block; margin-top: 0.22rem; font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--pewter); white-space: nowrap; }
.navbar-toggler { border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); padding: 0.5rem 0.65rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 0.18rem rgba(116,123,128,0.16); }
.navbar-nav .nav-link { color: var(--muted); font-size: 0.9rem; font-weight: 650; padding-left: 0.82rem; padding-right: 0.82rem; }
.navbar-nav .nav-link:hover { color: var(--navy); }
.nav-cta { margin-left: 0.55rem; }

.hero { position: relative; min-height: calc(100svh - 109px); display: flex; align-items: center; padding: 5rem 0; color: #fff; background: radial-gradient(circle at 78% 12%, rgba(201,203,204,0.18), transparent 25%), linear-gradient(135deg, rgba(8,15,25,0.97), rgba(16,26,40,0.98)), var(--navy); overflow: hidden; }
.hero:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 92%); pointer-events: none; }
.hero:after { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; bottom: 24px; border: 1px solid rgba(255,255,255,0.07); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; }
.hero-logo-wrap { width: 245px; height: 170px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.035) center/contain no-repeat; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 1.45rem; overflow: hidden; }
.hero-logo-blank { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent), rgba(255,255,255,0.025); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.65rem; border: 1px solid var(--line-dark); background: rgba(255,255,255,0.045); color: rgba(255,255,255,0.72); border-radius: var(--radius); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.05rem; }
.eyebrow:before { content: ""; width: 7px; height: 7px; background: var(--silver); border-radius: 50%; box-shadow: 0 0 0 5px rgba(201,203,204,0.12); }
.hero h1 { color: #f5f1e9; font-size: clamp(3.1rem, 7.2vw, 7.4rem); line-height: 0.84; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 1.1rem; font-weight: 700; }
.hero h1 span { display: block; font-family: "Inter", sans-serif; color: var(--silver); font-size: clamp(0.82rem, 1.35vw, 1.05rem); letter-spacing: 0.5em; font-weight: 500; margin-top: 1rem; }
.hero-lead { max-width: 720px; color: rgba(255,255,255,0.76); font-size: clamp(1.02rem, 1.8vw, 1.22rem); margin-bottom: 1.55rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.72rem; margin-bottom: 1.55rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero-meta span { display: inline-flex; align-items: center; min-height: 34px; padding: 0.46rem 0.58rem; border: 1px solid rgba(255,255,255,0.11); background: rgba(255,255,255,0.045); color: rgba(255,255,255,0.66); border-radius: var(--radius); font-size: 0.8rem; font-weight: 650; }
.hero-image-panel { border: 1px solid rgba(255,255,255,0.11); background: rgba(255,255,255,0.035); border-radius: var(--radius); padding: 0.75rem; box-shadow: 0 24px 80px rgba(0,0,0,0.26); }
.hero-image { min-height: 480px; border-radius: var(--radius); background: linear-gradient(to top, rgba(8,15,25,0.92), rgba(8,15,25,0.08) 58%), url("https://images.pexels.com/photos/18013308/pexels-photo-18013308.jpeg"); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.hero-note { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; border: 1px solid rgba(255,255,255,0.13); background: rgba(8,15,25,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); padding: 1rem; }
.note-label { color: rgba(255,255,255,0.58); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 850; margin-bottom: 0.4rem; }
.hero-note h2 { color: #fff; font-size: 1.65rem; line-height: 0.95; margin-bottom: 0.55rem; }
.hero-note p { color: rgba(255,255,255,0.68); font-size: 0.92rem; margin: 0; }

section { padding: 5.2rem 0; }
.section-white { background: var(--paper); }
.section-cream { background: var(--ivory); }
.section-sage { background: linear-gradient(135deg, #edf2ea, #f7f4ed); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-stone { background: linear-gradient(135deg, #ebe7dd, #f7f4ed); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: 2.2rem; }
.kicker { color: var(--pewter); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 850; margin-bottom: 0.65rem; }
.section-head h2, .split-copy h2, .dark-panel h2, .contact-side h2, .quote h2 { color: var(--navy); font-size: clamp(2.5rem, 5vw, 5rem); line-height: 0.92; letter-spacing: -0.035em; margin: 0; max-width: 880px; }
.section-head p { max-width: 710px; color: var(--muted); font-size: 1.02rem; margin: 1rem 0 0; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.split-copy { padding: clamp(1.55rem, 4vw, 3.2rem); }
.split-copy h2 { color: var(--navy); font-size: clamp(2.35rem, 4.6vw, 4.45rem); line-height: 0.92; letter-spacing: -0.035em; margin-bottom: 1rem; }
.split-copy p { color: var(--muted); }
.split-image { height: 100%; min-height: 440px; background: linear-gradient(to top, rgba(8,15,25,0.33), transparent 58%), url("https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=1200&q=85"); background-size: cover; background-position: center; }
.tick-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.72rem; }
.tick-list li { display: flex; align-items: flex-start; gap: 0.68rem; color: var(--muted); }
.tick-list i { color: var(--navy); margin-top: 0.18rem; }
.service-card { height: 100%; background: rgba(255,255,255,0.88); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; transition: 0.16s ease; }
.service-card:hover { transform: translateY(-3px); border-color: rgba(116,123,128,0.42); box-shadow: var(--shadow-soft); }
.service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.service-icon { width: 40px; height: 40px; border-radius: var(--radius); background: linear-gradient(135deg, #ffffff, #c9cbcc); display: grid; place-items: center; color: var(--navy); }
.service-dot { width: 10px; height: 10px; border: 2px solid var(--pewter); background: #fff; border-radius: 50%; }
.service-card h3 { color: var(--navy); font-size: 1.42rem; line-height: 1; margin-bottom: 0.55rem; }
.service-card p { color: var(--muted); font-size: 0.94rem; margin: 0; }
.dark-section { background: radial-gradient(circle at 75% 15%, rgba(201,203,204,0.16), transparent 26%), linear-gradient(135deg, var(--navy-dark), var(--navy)); color: #fff; position: relative; overflow: hidden; }
.dark-section:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.038) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.75; pointer-events: none; }
.dark-section .container { position: relative; z-index: 2; }
.dark-panel { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.045); border-radius: var(--radius); padding: clamp(1.45rem, 4vw, 3rem); }
.dark-panel h2 { color: #f5f1e9; }
.dark-panel p, .dark-panel li { color: rgba(255,255,255,0.72); }
.logo-display { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.035) center/contain no-repeat; border-radius: var(--radius); min-height: 360px; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.logo-display-blank { width: min(100%, 360px); aspect-ratio: 1 / 1; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent), rgba(255,255,255,0.025); }
.process-card { height: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); padding: 1.15rem; }
.process-num { width: 40px; height: 40px; border-radius: var(--radius); background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 0.78rem; font-weight: 850; margin-bottom: 1rem; }
.process-card h3 { color: var(--navy); font-size: 1.42rem; line-height: 1; margin-bottom: 0.55rem; }
.process-card p { color: var(--muted); margin: 0; font-size: 0.94rem; }
.credentials { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.credential-row { display: grid; grid-template-columns: 42px 1fr; gap: 0.85rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.credential-row:last-child { border-bottom: 0; }
.credential-icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--stone); color: var(--navy); display: grid; place-items: center; }
.credential-row strong { color: var(--navy); }
.credential-row p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.94rem; }
.quote { background: linear-gradient(120deg, rgba(8,15,25,0.86), rgba(8,15,25,0.64)), url("https://images.unsplash.com/photo-1490730141103-6cac27aaab94?auto=format&fit=crop&w=1800&q=85"); background-size: cover; background-position: center; color: #fff; }
.quote h2 { color: #fff; font-size: clamp(2.6rem, 5.5vw, 5.5rem); line-height: 0.92; letter-spacing: -0.035em; max-width: 980px; margin-bottom: 1rem; }
.quote p { color: rgba(255,255,255,0.74); max-width: 690px; font-size: 1.02rem; }
.contact-shell { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.contact-side { height: 100%; padding: clamp(1.45rem, 4vw, 3rem); background: linear-gradient(135deg, rgba(201,203,204,0.5), rgba(247,244,237,1)), var(--stone); }
.contact-side h2 { color: var(--navy); font-size: clamp(2.4rem, 4.6vw, 4.5rem); line-height: 0.92; letter-spacing: -0.035em; margin-bottom: 1rem; }
.contact-side p { color: var(--muted); }
.contact-line { display: grid; grid-template-columns: 28px 1fr; gap: 0.65rem; padding: 0.9rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.contact-line i { color: var(--navy); margin-top: 0.2rem; }
.contact-form { padding: clamp(1.45rem, 4vw, 3rem); }
.form-label { color: var(--navy); font-size: 0.86rem; font-weight: 750; }
.form-control, .form-select { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 0.9rem; color: var(--text); }
.form-control:focus, .form-select:focus { border-color: var(--pewter); box-shadow: 0 0 0 0.2rem rgba(116,123,128,0.16); }
textarea.form-control { min-height: 135px; resize: vertical; }
.footer { background: var(--navy-dark); color: #fff; padding: 3.3rem 0 1.8rem; }
.footer p, .footer a { color: rgba(255,255,255,0.64); }
.footer a:hover { color: #fff; }
.footer .brand-copy strong { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); padding-top: 1.2rem; margin-top: 2rem; font-size: 0.86rem; }

@media (max-width: 991px) {
    .navbar-collapse { padding-top: 0.8rem; }
    .navbar-nav { background: rgba(255,255,255,0.94); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem; box-shadow: var(--shadow-soft); }
    .navbar-nav .nav-link { padding: 0.75rem 0.85rem; }
    .nav-cta { margin-left: 0; padding: 0.4rem; }
    .nav-cta .btn { width: 100%; }
    .hero { min-height: auto; padding: 3.6rem 0; }
    .hero-image-panel { margin-top: 1.8rem; }
    .hero-image { min-height: 360px; }
    .split-image { min-height: 320px; }
    .logo-display { margin-top: 1.5rem; min-height: 280px; }
}

@media (max-width: 575px) {
    .top-strip { display: none; }
    .navbar { padding: 0.64rem 0; }
    .logo-box { width: 42px; height: 42px; flex-basis: 42px; }
    .brand-copy strong { font-size: 0.92rem; letter-spacing: 0.09em; }
    .brand-copy span { font-size: 0.56rem; letter-spacing: 0.26em; }
    .hero { padding: 2.7rem 0 3.15rem; }
    .hero:after { left: 12px; right: 12px; top: 12px; bottom: 12px; }
    .hero-logo-wrap { width: 172px; height: 112px; margin-bottom: 1.2rem; }
    .hero h1 { font-size: 2.95rem; letter-spacing: 0.065em; }
    .hero h1 span { font-size: 0.78rem; letter-spacing: 0.34em; }
    .hero-actions .btn { width: 100%; }
    .hero-meta span { font-size: 0.76rem; }
    .hero-image { min-height: 315px; }
    .hero-note { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 0.9rem; }
    section { padding: 3.8rem 0; }
    .section-head h2, .split-copy h2, .dark-panel h2, .contact-side h2 { font-size: 2.45rem; }
    .service-card, .process-card, .panel, .dark-panel, .contact-shell, .credentials { border-radius: 3px; }
    .quote h2 { font-size: 2.55rem; }
}