:root {
  --ink: #102632;
  --blue: #087bbc;
  --blue-dark: #075b91;
  --sky: #e7f4fa;
  --paper: #f8f7f3;
  --sand: #e8dfd0;
  --line: #d4dbdb;
  --muted: #5f6e74;
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; transform: translateY(-110%); left: 16px; top: 16px; padding: 10px 14px; z-index: 9999; color: white; background: var(--blue-dark); border-radius: 4px; transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.section { padding: 132px 0; }

.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; color: white; transition: background .25s, box-shadow .25s; }
.site-header.scrolled { position: fixed; background: rgba(16,38,50,.96); box-shadow: 0 3px 18px rgba(0,0,0,.16); }
.header-inner { min-height: 98px; display: flex; align-items: center; gap: 28px; }
.brand { width: 172px; flex: 0 0 auto; }
.brand img, .footer-brand img { width: 100%; height: auto; filter: brightness(0) invert(1); }
.desktop-nav { display: flex; gap: clamp(18px, 2vw, 32px); margin-left: auto; font-size: 13px; font-weight: 700; }
.desktop-nav a { position: relative; padding: 8px 0; }
.desktop-nav a::after { content: ""; position: absolute; bottom: 1px; left: 0; height: 1px; width: 0; background: white; transition: width .2s; }
.desktop-nav a:hover::after { width: 100%; }
.header-phone { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.header-phone svg { fill: none; stroke: currentColor; width: 15px; stroke-width: 1.8; }
.button { display: inline-flex; justify-content: center; gap: 19px; align-items: center; padding: 15px 22px; background: var(--blue); border: 1px solid var(--blue); color: #fff; cursor: pointer; font-size: 13px; line-height: 1.4; font-weight: 800; transition: transform .2s, background .2s, border .2s; }
.button:hover { transform: translateY(-2px); background: var(--blue-dark); border-color: var(--blue-dark); }
.button span { font-size: 18px; font-weight: 400; line-height: .7; }
.button-small { padding: 12px 15px; font-size: 11px; gap: 10px; }
.menu-toggle, .mobile-nav { display: none; }

.hero { min-height: min(810px, 100vh); color: white; background: var(--ink); position: relative; overflow: hidden; padding-top: 98px; }
.hero::before { content: ""; width: 55vw; height: 55vw; max-width: 830px; max-height: 830px; border-radius: 50%; position: absolute; right: -17vw; top: -23vw; background: var(--blue); opacity: .93; }
.hero::after { content: ""; position: absolute; width: 70vw; height: 1px; background: rgba(255,255,255,.14); transform: rotate(-39deg); right: -15vw; top: 64%; }
.hero-grid { min-height: calc(min(810px, 100vh) - 98px); display: grid; grid-template-columns: .97fr 1.03fr; align-items: center; gap: 4vw; position: relative; z-index: 2; }
.hero-copy { padding: 68px 0 64px; }
.eyebrow { margin: 0 0 20px; color: var(--blue-dark); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; }
.eyebrow span { width: 23px; height: 1px; display: inline-block; vertical-align: middle; margin: 0 9px 2px 0; background: currentColor; }
.hero .eyebrow, .eyebrow-light { color: #a7d5ed; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.045em; font-family: var(--serif); font-weight: 400; line-height: .96; }
h1 { margin-bottom: 26px; font-size: clamp(58px, 7.2vw, 100px); }
h1 em, h2 em { font-weight: 400; color: #65bae5; }
.hero-intro { max-width: 465px; color: #d6e1e5; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; gap: 27px; align-items: center; margin-top: 34px; }
.text-link { display: inline-flex; align-items: center; gap: 11px; border-bottom: 1px solid currentColor; padding-bottom: 4px; font-size: 12px; font-weight: 800; }
.text-link span { font-size: 16px; transition: transform .2s; }.text-link:hover span { transform: translateY(3px); }
.hero-proof { display: flex; gap: 14px; align-items: center; margin-top: 72px; }
.proof-mark { color: #70c3ea; font-size: 43px; font-weight: 700; letter-spacing: -.07em; line-height: .9; }.proof-mark span { font-size: 22px; vertical-align: top; }
.hero-proof p { margin: 0; color: #afc0c7; font-size: 10px; line-height: 1.55; }.hero-proof strong { color: #fff; font-weight: 700; }
.hero-visual { height: min(650px, calc(100vh - 140px)); min-height: 480px; position: relative; align-self: end; }
.hero-arch { position: absolute; z-index: -1; top: 1.5%; right: 1%; width: 95%; height: 88%; border: 1px solid rgba(255,255,255,.22); border-bottom: 0; border-radius: 360px 360px 0 0; }
.hero-image-frame { position: absolute; inset: 9% 10% 0 7%; overflow: hidden; border-radius: 250px 250px 0 0; box-shadow: 20px 25px 0 rgba(0,0,0,.11); }
.hero-image-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(4,56,83,.25), transparent 54%); }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.hero-card { display: flex; gap: 12px; align-items: center; position: absolute; top: 17%; right: -1%; padding: 14px 15px; color: var(--ink); background: #fff; box-shadow: 0 13px 25px rgba(0,0,0,.18); font-size: 10px; }
.hero-card strong, .hero-card small { display: block; }.hero-card small { color: #758085; margin-top: 2px; font-size: 8px; }.card-icon { color: var(--blue); font-size: 21px; }
.hero-caption { position: absolute; left: -2%; bottom: 6%; color: white; font-family: var(--serif); font-size: 17px; line-height: 1.05; }
.hero-line { height: 4px; width: clamp(240px, 32vw, 520px); background: var(--blue); position: absolute; bottom: 0; left: 0; z-index: 3; }

.intro-strip { padding: 32px 0; background: var(--blue); color: white; }.strip-grid { display: flex; justify-content: space-between; align-items: center; gap: 30px; }.strip-grid p { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 31px); letter-spacing: -.02em; }.circle-link { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 22px; transition: .2s; }.circle-link:hover { background: white; color: var(--blue); transform: rotate(45deg); }

.section-heading { display: grid; grid-template-columns: 1fr .65fr; align-items: end; gap: 60px; margin-bottom: 62px; }.section-heading h2 { margin: 0; font-size: clamp(48px, 5vw, 70px); }.section-heading h2 em { color: var(--blue); }.heading-copy { margin: 0 0 5px; color: var(--muted); max-width: 430px; font-size: 15px; line-height: 1.7; }.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.product-card { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; overflow: hidden; }.product-card-blue { color: white; background: #1977a7; }.product-card-sand { background: var(--sand); }.product-image { min-height: 100%; position: relative; overflow: hidden; }.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }.product-card:hover .product-image img { transform: scale(1.04); }.product-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,33,47,.22), transparent 42%); }.product-image p { position: absolute; z-index: 1; top: 18px; left: 18px; margin: 0; color: white; font-size: 10px; font-weight: 800; }.product-image-light img { object-position: 50% center; }.product-image-detail img { object-position: 38% center; }.product-content { align-self: center; padding: 42px 28px; }.product-label { margin-bottom: 17px; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; opacity: .75; }.product-content h3 { margin: 0 0 19px; font: 400 clamp(34px, 3.2vw, 46px)/.94 var(--serif); letter-spacing: -.04em; }.product-content h3 em { font-style: italic; }.product-content > p:not(.product-label) { margin-bottom: 24px; font-size: 12px; line-height: 1.75; }.product-content ul { padding: 0; list-style: none; margin: 0 0 30px; font-size: 11px; line-height: 1.5; }.product-content li { padding: 8px 0 8px 15px; border-top: 1px solid rgba(16,38,50,.16); position: relative; }.product-content li::before { content: "✓"; position: absolute; left: 0; color: inherit; font-weight: 800; }.product-card-blue li { border-color: rgba(255,255,255,.2); }.product-more { padding: 0 0 5px; border: 0; border-bottom: 1px solid currentColor; color: inherit; background: none; cursor: pointer; font-size: 11px; font-weight: 800; }.product-more span { margin-left: 10px; font-size: 14px; }.veka-note { width: fit-content; max-width: 710px; margin: 38px auto 0; text-align: center; color: var(--muted); font-size: 12px; }

.feature { padding: 0; overflow: hidden; background: var(--ink); color: white; }.feature-grid { display: grid; min-height: 725px; grid-template-columns: 1fr 1fr; align-items: center; gap: 11vw; }.feature-visual { align-self: stretch; min-height: 570px; position: relative; }.feature-photo { position: absolute; inset: 0 5% 0 -3vw; overflow: hidden; }.feature-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,38,55,.45), transparent 60%); }.feature-photo img { width: 100%; height: 100%; object-fit: cover; }.window-outline { position: absolute; z-index: 2; width: 148px; height: 187px; right: 11%; bottom: 9%; border: 8px solid rgba(255,255,255,.75); display: grid; grid-template-columns: 1fr 1fr; }.window-outline span { border: 1px solid rgba(255,255,255,.75); }.feature-label { z-index: 2; position: absolute; left: 1%; bottom: 12%; font: 30px/.95 var(--serif); }.feature-copy { padding: 80px 0; }.feature-copy h2, .process-heading h2 { margin: 0 0 29px; font-size: clamp(46px, 4.5vw, 67px); }.feature-copy p:not(.eyebrow) { max-width: 470px; color: #c1d0d6; font-size: 14px; line-height: 1.8; }.text-link-light { color: white; margin-top: 18px; }

.compact-heading { grid-template-columns: 1fr; }.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }.benefit { padding: 33px 26px 10px 0; border-right: 1px solid var(--line); min-height: 250px; }.benefit:not(:first-child) { padding-left: 26px; }.benefit:last-child { border-right: 0; }.benefit-icon { color: var(--blue); margin-bottom: 38px; font: 31px/1 var(--serif); }.benefit h3 { font: 400 23px var(--serif); letter-spacing: -.02em; margin-bottom: 10px; }.benefit p { color: var(--muted); max-width: 210px; font-size: 12px; line-height: 1.7; }

.process { background: var(--blue); color: white; }.process-grid { display: grid; grid-template-columns: .74fr 1fr; gap: 11vw; }.process-heading { position: sticky; height: max-content; top: 120px; }.process-heading h2 em { color: #c3e5f5; }.process-heading > p:not(.eyebrow) { color: #d8edf7; max-width: 355px; font-size: 14px; line-height: 1.8; }.button-outline { margin-top: 22px; color: white; background: transparent; border-color: rgba(255,255,255,.7); }.button-outline:hover { color: var(--blue); background: white; border-color: white; }.process-steps { padding: 0; margin: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.35); }.process-steps li { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 30px 0 28px; border-bottom: 1px solid rgba(255,255,255,.35); }.process-steps span { color: #bbebff; font-size: 11px; font-weight: 800; }.process-steps h3 { margin: 0 0 8px; font: 400 29px var(--serif); letter-spacing: -.025em; }.process-steps p { margin: 0; max-width: 370px; color: #d8edf7; font-size: 12px; line-height: 1.7; }

.inspiration-top { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 50px; }.inspiration-top h2 { margin-bottom: 0; font-size: clamp(48px, 5vw, 70px); }.inspiration-top p:not(.eyebrow) { max-width: 320px; margin: 0 0 7px; color: var(--muted); font-size: 13px; line-height: 1.75; }.gallery { display: grid; grid-template-columns: 1.25fr .58fr .87fr; grid-template-rows: 280px 210px; gap: 17px; }.gallery figure { margin: 0; position: relative; overflow: hidden; }.gallery figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,34,45,.66), transparent 50%); }.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }.gallery figure:hover img { transform: scale(1.04); }.gallery figcaption { position: absolute; z-index: 1; bottom: 16px; left: 17px; color: white; font: 17px var(--serif); }.gallery-large { grid-row: span 2; }.gallery-tall { grid-row: span 2; }.gallery-tall img { object-position: 41% center; }.gallery-wide { grid-column: 3; }.gallery-wide img { object-position: 60% center; }

.contact { background: #eef3f3; }.contact-grid { display: grid; grid-template-columns: .9fr 1fr; align-items: start; gap: 11vw; }.contact-copy h2 { margin: 0 0 24px; font-size: clamp(48px, 4.5vw, 66px); }.contact-copy h2 em { color: var(--blue); }.contact-copy > p:not(.eyebrow) { color: var(--muted); max-width: 420px; font-size: 14px; line-height: 1.8; }.contact-details { margin-top: 44px; }.contact-details a { display: block; margin: 13px 0; font-size: 13px; font-weight: 700; }.contact-details span { width: 86px; display: inline-block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.quote-form { padding: 34px; background: white; box-shadow: 0 22px 45px rgba(30,57,65,.08); }.form-heading { margin-bottom: 25px; }.form-heading span { font: 27px var(--serif); }.form-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.quote-form label { display: block; margin-bottom: 15px; color: var(--ink); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.quote-form input, .quote-form select, .quote-form textarea { width: 100%; margin-top: 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0; color: var(--ink); outline: none; background: transparent; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }.quote-form textarea { resize: vertical; }.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--blue); }.form-submit { margin-top: 9px; width: 100%; }.form-note { margin: 13px 0 0; color: #7b8587; font-size: 9px; line-height: 1.55; }

.footer { padding: 56px 0 25px; color: white; background: var(--ink); }.footer-top { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 55px; padding-bottom: 44px; }.footer-brand { display: block; width: 178px; }.footer-top p { max-width: 470px; margin: 0; color: #adbec4; font-size: 12px; line-height: 1.8; }.back-top { font-size: 11px; font-weight: 800; }.footer-bottom { display: flex; gap: 25px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); color: #9caeb4; font-size: 10px; }.footer-bottom a:last-child { margin-left: -8px; }

.product-dialog { width: min(750px, calc(100% - 36px)); border: 0; padding: 0; background: var(--paper); box-shadow: 0 20px 50px rgba(0,0,0,.35); }.product-dialog::backdrop { background: rgba(10,28,38,.73); backdrop-filter: blur(2px); }.dialog-content { padding: 65px; }.dialog-content h2 { margin: 0 0 20px; color: var(--blue); font-size: clamp(42px, 5vw, 62px); }.dialog-content > p:not(.eyebrow) { max-width: 590px; color: var(--muted); font-size: 15px; line-height: 1.75; }.dialog-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; margin: 36px 0; }.dialog-columns h3 { margin: 0 0 12px; font: 24px var(--serif); }.dialog-columns p, .dialog-columns li { color: var(--muted); font-size: 12px; line-height: 1.75; }.dialog-columns ul { padding-left: 18px; }.dialog-close { position: absolute; top: 16px; right: 18px; border: 0; cursor: pointer; color: var(--ink); background: none; font-size: 28px; }
.toast { visibility: hidden; opacity: 0; position: fixed; z-index: 50; right: 24px; bottom: 24px; width: min(380px, calc(100% - 48px)); padding: 18px; color: white; background: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 12px; transform: translateY(10px); transition: opacity .25s, transform .25s; }.toast.show { visibility: visible; opacity: 1; transform: translateY(0); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }.reveal-delay { transition-delay: .12s; }.reveal-delay-2 { transition-delay: .24s; }.reveal-delay-3 { transition-delay: .36s; }

@media (max-width: 980px) {
  .desktop-nav { display: none; }.header-phone { margin-left: auto; }.hero-grid { grid-template-columns: 1fr .85fr; }.product-card { grid-template-columns: 1fr; }.product-image { min-height: 290px; }.product-content { padding: 32px; }.feature-grid { gap: 6vw; }.contact-grid, .process-grid { gap: 7vw; }.benefit { padding-right: 18px; }.benefit:not(:first-child) { padding-left: 18px; }
}

@media (max-width: 700px) {
  .container { width: min(100% - 36px, 560px); }.section { padding: 86px 0; }.header-inner { min-height: 74px; gap: 14px; }.brand { width: 144px; }.header-phone, .header-cta { display: none; }.menu-toggle { width: 38px; height: 38px; display: grid; gap: 5px; place-content: center; margin-left: auto; border: 1px solid rgba(255,255,255,.55); color: white; background: transparent; cursor: pointer; }.menu-toggle span { width: 16px; height: 1px; display: block; background: currentColor; transition: transform .2s; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }.mobile-nav { position: absolute; top: 74px; left: 0; right: 0; padding: 16px 9%; background: var(--ink); box-shadow: 0 12px 20px rgba(0,0,0,.18); }.mobile-nav.open { display: grid; }.mobile-nav a { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 13px; font-weight: 700; }.hero { min-height: auto; padding-top: 74px; }.hero::before { width: 92vw; height: 92vw; top: -45vw; right: -38vw; }.hero-grid { display: block; min-height: 0; }.hero-copy { padding: 74px 0 24px; }.hero-intro { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-proof { margin-top: 45px; }.hero-visual { height: 390px; min-height: 0; margin: 10px -18px 0; }.hero-image-frame { inset: 7% 5% 0 13%; border-radius: 210px 210px 0 0; }.hero-arch { top: 1%; width: 82%; right: 0; }.hero-card { right: 1%; top: 13%; }.hero-caption { left: 3%; bottom: 7%; }.strip-grid { align-items: flex-start; }.strip-grid p { font-size: 22px; }.section-heading, .inspiration-top { display: block; margin-bottom: 43px; }.heading-copy, .inspiration-top p:not(.eyebrow) { margin-top: 22px; }.product-grid, .feature-grid, .contact-grid, .process-grid { display: block; }.product-grid { gap: 17px; }.product-card { margin-bottom: 17px; }.product-image { min-height: 270px; }.product-content { padding: 31px 24px; }.feature-grid { width: 100%; }.feature-visual { min-height: 480px; }.feature-photo { inset: 0 0 0 -5%; }.feature-copy { width: min(100% - 36px, 560px); margin: auto; padding: 75px 0; }.benefit-grid { grid-template-columns: 1fr 1fr; }.benefit { min-height: 220px; padding: 25px 18px 15px 0; }.benefit:nth-child(2) { border-right: 0; }.benefit:nth-child(3) { padding-left: 0; }.benefit-icon { margin-bottom: 25px; }.process-heading { position: static; }.process-heading h2 { margin-bottom: 24px; }.process-steps { margin-top: 48px; }.process-steps li { grid-template-columns: 47px 1fr; }.gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 170px; gap: 10px; }.gallery-large { grid-row: span 2; }.gallery-tall { grid-row: auto; }.gallery-wide { grid-column: 2; }.contact-details { margin-bottom: 47px; }.quote-form { padding: 25px 20px; }.footer-top { display: block; padding-bottom: 35px; }.footer-top p { margin: 24px 0; }.footer-bottom { flex-wrap: wrap; gap: 12px 20px; }.footer-bottom a:last-child { margin-left: 0; }.dialog-content { padding: 50px 25px 30px; }.dialog-columns { grid-template-columns: 1fr; gap: 15px; margin: 27px 0; }
}

@media (max-width: 390px) { h1 { font-size: 53px; }.hero-card { display: none; }.benefit-grid { grid-template-columns: 1fr; }.benefit, .benefit:not(:first-child), .benefit:nth-child(3) { min-height: auto; padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--line); }.benefit:last-child { border-bottom: 0; }.gallery { grid-template-rows: 190px 150px; } }