:root { --al-ink: #092d2b; --al-teal: #1a7772; --al-cream: #f4f1e8; --al-lime: #d9eb79; --al-line: #092d2b33; }
.alurvia-site { background: var(--al-cream); color: var(--al-ink); }
.al-shell, .alurvia-header { width: min(1420px, calc(100% - 72px)); margin-inline: auto; }
.alurvia-header { height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--al-line); position: relative; z-index: 10; }
.alurvia-logo { display: inline-flex; align-items: center; gap: 7px; font: 800 29px var(--display); letter-spacing: -.08em; line-height: 1; }
.al-logo-icon { display: block; width: 38px; height: 38px; flex: none; margin-right: 4px; }
.alurvia-logo > span:last-child { color: var(--al-teal); margin-left: -7px; }
.al-mark { width: 35px; height: 35px; border-radius: 50%; background: var(--al-teal); color: var(--al-cream); display: grid; place-items: center; font: 600 20px var(--display); letter-spacing: 0; transform: rotate(18deg); margin-right: 4px; }
.alurvia-header nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 700; }
.alurvia-header nav a:hover { color: var(--al-teal); }
.alurvia-header .al-nav-cta { background: var(--al-ink); color: white; padding: 11px 17px; border: 1px solid var(--al-ink); }
.alurvia-header .al-nav-cta:hover { color: white; background: var(--al-teal); }
.al-hero { width: min(1420px, calc(100% - 72px)); margin-inline: auto; min-height: 760px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 55px; align-items: center; padding: 80px 0 105px; }
.al-kicker, .al-early, .al-section-id, .al-contact-tag { font: 11px var(--mono); letter-spacing: .07em; }
.al-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.al-kicker a { border-bottom: 1px solid currentColor; }
.al-kicker span { color: var(--al-teal); }
.al-hero h1 { font: 700 clamp(60px, 6vw, 98px)/.99 var(--display); letter-spacing: -.075em; margin: 28px 0 30px; }
.al-hero h1 em, .al-problem h2 em, .al-contact h2 em { color: var(--al-teal); font-style: normal; }
.al-hero-copy > p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.65; max-width: 650px; color: #3a5450; }
.al-hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 32px; font-weight: 700; font-size: 13px; }
.al-button { display: inline-flex; align-items: center; gap: 32px; background: var(--al-teal); color: white; min-height: 55px; padding: 0 23px; border: 1px solid var(--al-ink); box-shadow: 5px 5px 0 var(--al-ink); font-size: 14px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.al-button:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--al-ink); }
.al-early { margin-top: 65px; color: var(--al-teal); }
.al-hero-visual { min-height: 560px; background: var(--al-lime); border: 1px solid var(--al-ink); position: relative; overflow: hidden; box-shadow: 12px 12px 0 var(--al-ink); }
.al-visual-grid { position: absolute; inset: 0; background-image: linear-gradient(#092d2b19 1px,transparent 1px),linear-gradient(90deg,#092d2b19 1px,transparent 1px); background-size: 38px 38px; }
.flow-card { position: absolute; width: min(64%, 340px); min-height: 115px; background: var(--al-cream); border: 1px solid var(--al-ink); padding: 14px 20px; box-shadow: 5px 5px 0 var(--al-ink); z-index: 2; }
.flow-card small, .flow-card span { display: block; font: 10px var(--mono); color: var(--al-teal); }
.flow-card strong { display: block; font: 700 24px var(--display); letter-spacing: -.05em; margin: 5px 0; }
.flow-one { top: 44px; left: 30px; transform: rotate(-4deg); }
.flow-two { top: 210px; right: 28px; transform: rotate(3deg); }
.flow-three { bottom: 58px; left: 45px; transform: rotate(-2deg); }
.flow-line { position: absolute; width: 1px; height: 78%; background: var(--al-ink); left: 50%; top: 10%; transform: rotate(18deg); }
.al-visual-footer { position: absolute; bottom: 12px; right: 18px; font: 9px var(--mono); }
.al-strip { background: var(--al-ink); color: var(--al-cream); display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; padding: 18px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.al-strip b { color: var(--al-lime); }
.al-problem, .al-audience { padding-block: 115px; }
.al-section-id { padding-bottom: 20px; border-bottom: 1px solid currentColor; }
.al-problem-grid, .al-audience-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: end; padding-top: 65px; }
.al-problem h2, .al-services h2, .al-audience h2, .al-process h2, .al-contact h2 { font-size: clamp(46px, 5.2vw, 77px); }
.al-problem p { max-width: 530px; font-size: 19px; color: #3a5450; }
.al-services { background: var(--al-ink); color: var(--al-cream); padding: 110px 0 125px; }
.al-services-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; padding: 62px 0 70px; }
.al-services-head p { max-width: 320px; color: #b7c9c2; }
.al-service-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.al-service-grid article { min-height: 400px; padding: 30px; border: 1px solid var(--al-cream); display: flex; flex-direction: column; }
.al-service-grid article + article { border-left: 0; }
.al-service-grid article:nth-child(2) { background: var(--al-teal); }
.al-service-grid article > span { font: 10px var(--mono); color: var(--al-lime); }
.service-glyph { font: 80px var(--display); margin: auto; color: var(--al-lime); }
.al-service-grid h3 { font-size: 31px; }
.al-service-grid p { font-size: 14px; color: #d4dfd9; }
.al-audience-grid { align-items: start; }
.al-audience-grid article { display: grid; grid-template-columns: 45px 1fr; border-top: 1px solid var(--al-ink); padding: 26px 0; }
.al-audience-grid article > span { color: var(--al-teal); font: 11px var(--mono); }
.al-audience-grid h3 { font-size: 27px; }
.al-audience-grid p { grid-column: 2; color: #3a5450; margin: 8px 0 0; }
.al-audience-note { border-top: 1px solid var(--al-ink); padding-top: 22px; font: 12px var(--mono); }
.al-process { background: var(--al-lime); padding: 110px 0 120px; border-block: 1px solid var(--al-ink); }
.al-process h2 { padding: 65px 0; }
.al-process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.al-process-grid article { border-top: 1px solid var(--al-ink); padding-top: 18px; }
.al-process-grid article > span { color: var(--al-teal); font: 11px var(--mono); }
.al-process-grid h3 { font-size: 32px; margin-top: 35px; }
.al-process-grid p { max-width: 300px; font-size: 14px; }
.al-contact { padding-block: 120px 140px; }
.al-contact h2 { max-width: 1000px; margin: 22px 0; }
.al-contact p { color: #3a5450; margin-bottom: 35px; }
.al-footer { background: var(--al-ink); color: var(--al-cream); padding: 70px max(36px, calc((100vw - 1420px)/2)) 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.al-footer .al-mark { background: var(--al-lime); color: var(--al-ink); }
.al-footer .alurvia-logo > span:last-child { color: var(--al-lime); }
.al-footer p { color: #b7c9c2; font-size: 13px; }
.al-footer > div:nth-child(2) { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.al-footer > div:nth-child(2) span { font: 10px var(--mono); color: var(--al-lime); }
.al-footer-bottom { grid-column: 1/-1; border-top: 1px solid #ffffff44; padding-top: 18px; display: flex; justify-content: space-between; font: 10px var(--mono); color: #b7c9c2; }
@media (max-width: 1050px) { .al-hero, .al-problem-grid, .al-audience-grid { grid-template-columns: 1fr; gap: 45px; } .al-hero-visual { min-height: 510px; } }
@media (max-width: 760px) { .al-shell, .alurvia-header, .al-hero { width: min(100% - 28px,1420px); } .alurvia-header { height: 76px; } .alurvia-header nav { gap: 10px; } .alurvia-header nav a:not(.al-nav-cta) { display: none; } .alurvia-header .al-nav-cta { font-size: 10px; padding: 9px; } .al-hero { padding: 58px 0 80px; } .al-hero h1 { font-size: clamp(47px, 12vw, 68px); } .al-hero-actions { flex-direction: column; align-items: flex-start; } .al-early { margin-top: 40px; } .al-hero-visual { min-height: 450px; box-shadow: 7px 7px 0 var(--al-ink); } .flow-card { min-height: 100px; width: 72%; } .flow-card strong { font-size: 20px; } .flow-one { left: 15px; top: 30px; } .flow-two { right: 15px; top: 165px; } .flow-three { left: 22px; bottom: 45px; } .al-strip { gap: 12px; font-size: 9px; } .al-problem, .al-audience, .al-contact { padding-block: 85px; } .al-problem-grid, .al-audience-grid { padding-top: 45px; } .al-services, .al-process { padding: 85px 0; } .al-services-head { display: block; padding: 45px 0; } .al-service-grid, .al-process-grid { grid-template-columns: 1fr; } .al-service-grid article { min-height: 320px; } .al-service-grid article + article { border-left: 1px solid var(--al-cream); border-top: 0; } .service-glyph { font-size: 60px; } .al-process h2 { padding: 45px 0; } .al-footer { grid-template-columns: 1fr; gap: 35px; } .al-footer > div:nth-child(2) { align-items: flex-start; } .al-footer-bottom { display: flex; flex-direction: column; gap: 8px; } }