:root {
   color-scheme: light;
   --ink: #0e1a1f;
   --muted: #4b5a63;
   --accent: #2f5f7c;
   --accent-2: #b65b3a;
   --paper: #f4f2ee;
   --mist: #eef1f4;
   --line: #dde3e8;
 }
 
 * {
   box-sizing: border-box;
 }
 
 body {
   margin: 0;
   font-family: "Helvetica Neue", Arial, sans-serif;
   color: var(--ink);
   background: var(--paper);
 }
 
 a {
   color: var(--accent);
   text-decoration: none;
 }
 
 a.inline-cta {
   font-weight: 600;
   border-bottom: 2px solid rgba(47, 95, 124, 0.35);
 }
 
 img {
   max-width: 100%;
   display: block;
 }
 
 .top-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 24px 8vw 10px;
 }
 
 .brand {
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
 
 .nav-links {
   display: flex;
   gap: 18px;
   font-size: 0.95rem;
 }
 
 .hero {
   display: flex;
   flex-direction: column;
   gap: 22px;
   padding: 40px 8vw 20px;
 }
 
 .hero-card {
   display: flex;
   flex-direction: column;
   gap: 18px;
   background: #ffffff;
   border-radius: 18px;
   padding: 28px;
   box-shadow: 0 18px 40px rgba(14, 26, 31, 0.08);
 }
 
 .hero-title {
   font-size: clamp(2.4rem, 4vw, 3.4rem);
   margin: 0;
 }
 
 .hero-subtitle {
   color: var(--muted);
   font-size: 1.1rem;
 }
 
 .hero-media {
   display: flex;
   justify-content: center;
   padding: 12px 0 0;
 }
 
 .primary-btn,
 .secondary-btn {
   border: none;
   padding: 12px 20px;
   border-radius: 999px;
   font-weight: 600;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
 }
 
 .primary-btn {
   background: var(--accent);
   color: #fff;
 }
 
 .secondary-btn {
   background: transparent;
   color: var(--accent);
   border: 1px solid rgba(47, 95, 124, 0.4);
 }
 
 .story {
   max-width: 820px;
   margin: 0 auto;
   padding: 10px 18px 80px;
 }
 
 .story-section {
   display: flex;
   flex-direction: column;
   gap: 18px;
   padding: 34px 0;
   border-bottom: 1px solid var(--line);
 }
 
 .story-section.alt {
   background: var(--mist);
   margin: 0 -18px;
   padding: 34px 18px;
   border-radius: 20px;
 }
 
 .story-section h2 {
   margin: 0;
   font-size: clamp(1.6rem, 2.5vw, 2.1rem);
 }
 
 .story-section p {
   margin: 0;
   line-height: 1.6;
   color: var(--muted);
 }
 
 .figure-inline {
   display: flex;
   gap: 18px;
   align-items: center;
   flex-wrap: wrap;
 }
 
 .figure-inline img {
   width: 180px;
 }
 
 .pull-quote {
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--ink);
   border-left: 4px solid var(--accent-2);
   padding-left: 14px;
 }
 
 .layered-card {
   display: flex;
   flex-direction: column;
   gap: 14px;
   background: #fff;
   padding: 20px;
   border-radius: 16px;
   box-shadow: 0 14px 28px rgba(14, 26, 31, 0.08);
 }
 
 .timeline {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
 .timeline-item {
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }
 
 .timeline-step {
   min-width: 38px;
   min-height: 38px;
   border-radius: 50%;
   background: var(--accent-2);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
 }
 
 .services-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
 }
 
 .service-card {
   flex: 1 1 240px;
   background: #fff;
   border-radius: 16px;
   padding: 18px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   border: 1px solid rgba(14, 26, 31, 0.08);
 }
 
 .price {
   font-size: 1.3rem;
   font-weight: 700;
 }
 
 .badge {
   align-self: flex-start;
   background: rgba(47, 95, 124, 0.1);
   color: var(--accent);
   padding: 4px 10px;
   border-radius: 999px;
   font-size: 0.85rem;
 }
 
 .form-shell {
   display: flex;
   flex-direction: column;
   gap: 16px;
   background: #fff;
   padding: 22px;
   border-radius: 16px;
   box-shadow: 0 18px 34px rgba(14, 26, 31, 0.08);
 }
 
 .form-shell label {
   font-weight: 600;
   margin-bottom: 6px;
   display: block;
 }
 
 .form-shell input,
 .form-shell select,
 .form-shell textarea {
   width: 100%;
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid var(--line);
   font-size: 1rem;
 }
 
 .form-row {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .sticky-cta {
   position: fixed;
   right: 16px;
   bottom: 16px;
   background: var(--accent-2);
   color: #fff;
   padding: 10px 16px;
   border-radius: 999px;
   display: flex;
   align-items: center;
   gap: 10px;
   box-shadow: 0 10px 20px rgba(14, 26, 31, 0.18);
   z-index: 10;
 }
 
 .sticky-cta a {
   color: #fff;
   font-weight: 600;
 }
 
 .footer {
   background: var(--ink);
   color: #fff;
   padding: 40px 8vw;
 }
 
 .footer a {
   color: #fff;
 }
 
 .footer-links {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 12px;
 }
 
 .cookie-banner {
   position: fixed;
   left: 16px;
   bottom: 16px;
   right: 16px;
   background: #fff;
   border-radius: 14px;
   padding: 16px;
   display: none;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   box-shadow: 0 12px 30px rgba(14, 26, 31, 0.12);
   z-index: 12;
 }
 
 .cookie-actions {
   display: flex;
   gap: 10px;
 }
 
 .page-shell {
   max-width: 820px;
   margin: 0 auto;
   padding: 30px 18px 80px;
 }
 
 .page-shell h1 {
   margin-top: 0;
 }
 
 .contact-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
 }
 
 .contact-card {
   flex: 1 1 220px;
   background: #fff;
   padding: 18px;
   border-radius: 14px;
   border: 1px solid var(--line);
 }
 
 .legal-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   color: var(--muted);
 }
 
 @media (min-width: 920px) {
   .hero {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
   }
 
   .hero-card {
     flex: 1 1 55%;
   }
 
   .hero-media {
     flex: 1 1 40%;
   }
 
   .form-row {
     flex-direction: row;
   }
 }