@import url('https://fonts.googleapis.com/css?family=Open+Sans|Secular+One');

/* ─── CSS Custom Properties ────────────────────────────────────────────────── */
:root {
  --client-width: 360px;
  --color-transparent: transparent;
  --color-white-opaque: rgba(255,255,255,0);
  --color-white: #FFFFFF;
  --color-white-darker: #F1F1F1;
  --color-black: #000000;
  --color-gray: #0B0E11;
  --color-gray-opaque: rgba(7,14,17,.5);
  --color-blue-dark: #0043b0;
  --color-blue-normal: #0060F8;
  --color-blue-light: #c0d8ff;
  --color-blue-lightest: #ecf3ff;
  --color-blue-opaque: rgba(12,25,31,.9);
  --font-family: 'Open Sans', sans-serif;
  --font-family-title: 'Secular One', sans-serif;
  --font-weight-thin: 200;
  --font-weight-extra-light: 300;
  --font-weight-light: 400;
  --font-weight-regular: 500;
  --font-weight-medium: 600;
  --font-weight-semi-bold: 700;
  --font-weight-bold: 800;
  --font-weight-extra-bold: 900;
  --font-size-xxs: .75rem;
  --font-size-xs: .9375rem;
  --font-size-s: 1.0625rem;
  --font-size-m: 1.1875rem;
  --font-size-ml: 1.5rem;
  --font-size-l: 1.625rem;
  --font-size-xl: 2.125rem;
  --font-size-xxl: 2.5rem;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --zi-hide: -9999px;
  --zi-plus-one: 1;
  --zi-modal: 9;
  --zi-popover: 99;
  --border-radius: 3px;
  --box-shadow: rgb(76,4,99) 0px 2px 10px -5px;
  --transition-timer-100ms: .1s;
  --transition-easeInOutQuad: cubic-bezier(.455,.03,.515,.955);
  --scroll-background: var(--color-transparent);
  --scroll-thumb: var(--color-gray);
  --scroll-pip-width: 8px;
  --scroll-pip-height: 8px;
  --border-radius-sb: 0;
  --header-height: 220px;
  --header-height-mobile: 420px;
  --hero-mask-background: linear-gradient(60deg, var(--color-blue-opaque), var(--color-white-opaque));
  --hero-text-color: var(--color-white);
  --testimonial-background: var(--color-white);
  --testimonial-color: var(--color-text);
  --testimonial-quote-fill: var(--color-blue-normal);
  --color-primary: var(--color-blue-normal);
  --color-secondary: var(--color-blue-light);
  --color-text: var(--color-black);
  --color-background-primary: var(--color-white-darker);
  --color-background-secondary: var(--color-blue-light);
}

@media (min-width: 768px) {
  :root {
    --font-size-xxs: .6875rem;
    --font-size-xs: .875rem;
    --font-size-s: 1rem;
    --font-size-m: 1.125rem;
    --font-size-ml: 1.375rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2rem;
  }
}

/* ─── Reset / Base ──────────────────────────────────────────────────────────── */
*, ::before, ::after {
  box-sizing: border-box;
}

body, html {
  min-height: 100vh;
  min-width: var(--client-width);
  margin: 0;
  background-attachment: fixed;
  background-color: var(--color-background-primary);
  background-size: 100vw 100vh;
  font-family: var(--font-family);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-light);
  letter-spacing: 1px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: var(--color-white);
  text-size-adjust: none;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-background);
}

@media (max-width: 768px) {
  body, html {
    font-size: var(--font-size-s);
  }
}

body::-webkit-scrollbar, html::-webkit-scrollbar {
  width: var(--scroll-pip-width);
  height: var(--scroll-pip-height);
}
body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: var(--border-radius-sb);
}
body::-webkit-scrollbar-track, html::-webkit-scrollbar-track {
  background: var(--scroll-background);
}

a:link, a:visited, a:hover, a:active {
  color: var(--color-primary);
}

p { line-height: 1.5; }

h1, h2, h3 {
  line-height: 1.3;
  margin: 0;
}
h1 {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semi-bold);
}
h2 { margin-bottom: var(--spacing-20); }
h3 { font-size: var(--font-size-m); }

ul {
  list-style-type: circle;
  margin: 0 0 0 var(--spacing-20);
  padding: 0;
}

input, button {
  font-size: inherit;
  font-family: inherit;
}
button:focus:not(:focus-visible) { outline: none; }

/* ─── Section ───────────────────────────────────────────────────────────────── */
section {
  background: var(--color-background-primary);
  padding: var(--spacing-80);
}
section h2 {
  align-items: center;
  display: flex;
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-20);
  gap: var(--spacing-8);
}
section h2 svg {
  fill: var(--color-primary);
  display: block;
  height: var(--spacing-40);
  width: var(--spacing-40);
}
section h2 span {
  color: var(--color-black);
  display: block;
  line-height: var(--spacing-48);
  margin-left: var(--spacing-8);
}
section p { color: var(--color-text); }

@media (max-width: 1024px) {
  section { padding: var(--spacing-60); }
}
@media (max-width: 768px) {
  section { padding: var(--spacing-40); }
}

.section-secondary {
  background: var(--color-blue-light);
}
.section-secondary h2 svg { fill: var(--color-blue-dark); }
.section-secondary h2 span { color: var(--color-blue-dark); }
.section-secondary p { color: var(--color-text); }

/* ─── Card Grid ─────────────────────────────────────────────────────────────── */
.m-card-grid-row {
  margin-bottom: var(--spacing-40);
}
.m-card-grid-row:last-child { margin-bottom: 0; }

.m-card-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
}
.m-card-grid-2 {
  display: grid;
  column-gap: var(--spacing-40);
  row-gap: var(--spacing-40);
  grid-template-columns: 1fr 1fr;
}
.m-card-grid-3 {
  display: grid;
  column-gap: var(--spacing-40);
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1024px) {
  .m-card-grid-2, .m-card-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .m-card-grid-2, .m-card-grid-3 { grid-template-columns: 1fr; }
}

/* ─── Card ──────────────────────────────────────────────────────────────────── */
.m-card {
  background: var(--color-white);
  border-radius: var(--spacing-12);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-40);
}
.m-card .title-svg svg {
  height: var(--spacing-40);
  width: var(--spacing-40);
}
.m-card .title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
}
.m-card .m-button { width: auto; }

.value-statement {
  color: var(--color-blue-normal);
  font-family: var(--font-family-title);
}

/* ─── Testimonial ───────────────────────────────────────────────────────────── */
.m-testimonial-list .m-testimonial:last-child { margin-bottom: 0; }

.m-testimonial {
  background: var(--testimonial-background);
  border-radius: var(--spacing-12);
  box-shadow: var(--box-shadow);
  color: var(--testimonial-color);
  margin-bottom: var(--spacing-40);
  padding: var(--spacing-40);
}

@media (max-width: 1024px) {
  .m-testimonial {
    margin: 0 var(--spacing-40) var(--spacing-40) var(--spacing-40);
  }
}
@media (max-width: 768px) {
  .m-testimonial {
    margin: 0 var(--spacing-12) var(--spacing-40) var(--spacing-12);
    padding: var(--spacing-20);
  }
}

.m-testimonial .text-con {
  position: relative;
  display: grid;
  gap: var(--spacing-20);
  grid-template-columns: 1fr 10%;
}
.m-testimonial .quote {
  position: absolute;
  right: 0;
  fill: var(--testimonial-quote-fill);
  height: var(--spacing-40);
  width: var(--spacing-40);
}
@media (max-width: 1024px) {
  .m-testimonial .quote {
    height: var(--spacing-28);
    width: var(--spacing-28);
  }
}
.m-testimonial .person {
  font-weight: var(--font-weight-semi-bold);
  margin-top: var(--spacing-20);
  text-align: right;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.m-button {
  align-items: center;
  background: var(--color-primary);
  border-radius: var(--border-radius);
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-s);
  justify-content: center;
  margin: 0;
  outline: none;
  padding: var(--spacing-8) var(--spacing-12);
  text-align: center;
  text-decoration: none;
  transition: var(--transition-timer-100ms) var(--transition-easeInOutQuad);
}
.m-button > svg {
  display: block;
  height: 22px;
  margin-right: var(--spacing-8);
  width: 22px;
}
.m-button .text {
  display: block;
  line-height: var(--spacing-20);
}
.m-button:hover > svg { fill: var(--color-white); }

/* Header style */
.m-button-header {
  background: var(--color-white);
  color: var(--color-primary) !important;
}
.m-button-header > svg { fill: var(--color-primary); }
.m-button-header:hover { background: var(--color-primary); color: var(--color-white) !important; }
.m-button-header:hover > svg { fill: var(--color-white); }

/* Content / "Get a Quote" style */
.m-button-content {
  background: var(--color-blue-lightest);
  border: 1px solid var(--color-blue-light);
  color: var(--color-black) !important;
}
.m-button-content > svg { fill: var(--color-blue-normal); }
.m-button-content:hover {
  background: var(--color-primary);
  border: 1px solid var(--color-blue-light);
  color: var(--color-white) !important;
}
.m-button-content:hover > svg { fill: var(--color-white); }

/* Footer style */
.m-button-footer { background: var(--color-white) !important; color: var(--color-text) !important; }
.m-button-footer:hover { background: var(--color-primary); color: var(--color-white) !important; }
.m-button-footer:hover > svg { fill: var(--color-white); }

/* Collapse text on small mobile */
@media (max-width: 560px) {
  .m-button-collapse-mobile > svg { margin-right: 0; }
  .m-button-collapse-mobile .text { display: none; }
}

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.m-hero {
  place-content: center;
  display: grid;
  gap: 0;
  grid-template-areas: "hero";
  grid-template-columns: 1fr;
  grid-template-rows: 240px;
}
@media (max-width: 768px) {
  .m-hero { grid-template-rows: 230px; }
}
@media (max-width: 563px) {
  .m-hero { grid-template-rows: 280px; }
}
@media (max-width: 385px) {
  .m-hero { grid-template-rows: 330px; }
}

.m-hero .image-con { grid-area: hero; }
.m-hero .image-con .image {
  display: block;
  height: 100%;
  min-width: var(--client-width);
  object-fit: cover;
  width: 100%;
}
.m-hero .mask {
  background: var(--hero-mask-background);
  display: grid;
  grid-area: hero;
  max-width: 100%;
}
.m-hero .content {
  display: flex;
  flex-direction: column;
  grid-area: hero;
  gap: var(--spacing-12);
  margin: var(--spacing-20);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.m-hero .content .logo { height: var(--spacing-80); }
.m-hero .content .logo svg { width: var(--spacing-80); }

.m-hero .content .text h1 {
  color: var(--color-white);
  font-size: var(--font-size-xl);
  font-family: var(--font-family-title);
  margin: 0;
  text-shadow: rgba(60,60,60,0.5) 2px 2px 4px;
}
@media (max-width: 300px) {
  .m-hero .content .text h1 { font-size: var(--font-size-l); }
}

.m-hero .content .actions { display: flex; gap: var(--spacing-12); flex-wrap: wrap; justify-content: center; }

/* ─── Footer ────────────────────────────────────────────────────────────────── */
footer {
  background: var(--color-black);
  padding: var(--spacing-80) var(--spacing-20);
  margin: 0 auto;
}
@media (max-width: 768px) {
  footer { padding: var(--spacing-60) var(--spacing-12); }
}
footer .links {
  display: flex;
  font-size: var(--font-size-xs);
  gap: var(--spacing-12);
  justify-content: center;
  margin-bottom: var(--spacing-40);
}
footer .address {
  color: var(--color-white);
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-12);
  text-align: center;
}
footer .fine-print {
  color: var(--color-white);
  text-align: center;
}
footer .copyright, footer .rights {
  font-size: var(--font-size-xxs);
}