:root {
  --navy: #0b2145;
  --navy-light: #142f59;

  --red: #e71920;
  --red-dark: #c9141a;

  --text: #334158;
  --muted: #697386;

  --cream: #f8f5f1;
  --soft-red: #fff2f2;

  --line: #ececef;

  --white: #ffffff;
}


/* ========================================
   RESET
======================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: #ffffff;

  color: var(--text);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
}


img {
  display: block;

  max-width: 100%;
}


a {
  color: inherit;

  text-decoration: none;
}


button,
input,
textarea {
  font: inherit;
}


button {
  cursor: pointer;
}


.container {
  width: min(
    1200px,
    calc(100% - 40px)
  );

  margin-inline: auto;
}


/* ========================================
   HEADER
======================================== */

.site-header {
  height: 82px;

  position: relative;

  z-index: 100;

  background:
    rgba(
      255,
      255,
      255,
      0.98
    );

  border-bottom:
    1px solid
    rgba(
      11,
      33,
      69,
      0.07
    );
}


.header-inner {
  height: 82px;

  display: flex;

  align-items: center;

  gap: 28px;
}


.brand {
  margin-right: auto;

  display: flex;

  align-items: center;
}


.brand img {
  width: 185px;

  height: auto;
}


.desktop-nav {
  height: 100%;

  display: flex;

  align-items: center;

  gap: 27px;
}


.desktop-nav a {
  height: 100%;

  position: relative;

  display: flex;

  align-items: center;

  color: #314058;

  font-size: 13.5px;

  font-weight: 500;
}


.desktop-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: 18px;

  height: 2px;

  background:
    var(--red);

  transform:
    scaleX(0);

  transition:
    transform
    0.2s ease;
}


.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  transform:
    scaleX(1);
}


.header-cta {
  min-height: 45px;

  padding:
    0 22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  border-radius:
    999px;

  background:
    var(--red);

  color:
    #ffffff;

  font-size:
    13px;

  font-weight:
    700;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.header-cta:hover {
  background:
    var(--red-dark);

  transform:
    translateY(-1px);
}


.mobile-toggle {
  display:
    none;

  width:
    42px;

  height:
    42px;

  padding:
    8px;

  border:
    0;

  background:
    transparent;
}


.mobile-toggle span {
  width:
    24px;

  height:
    2px;

  display:
    block;

  margin:
    5px auto;

  background:
    var(--navy);
}


.mobile-menu {
  display:
    none;
}


/* ========================================
   HERO
======================================== */

.hero {
  background:
    #ffffff;

  overflow:
    hidden;
}


.hero-grid {
  height:
    525px;

  display:
    grid;

  grid-template-columns:
    43% 57%;

  align-items:
    stretch;
}


.hero-content {
  position:
    relative;

  z-index:
    5;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    34px 30px
    30px 0;
}


.eyebrow {
  margin:
    0 0 15px;

  color:
    var(--red);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.22em;
}


.hero h1 {
  margin:
    0;

  max-width:
    520px;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      45px,
      4vw,
      61px
    );

  font-weight:
    700;

  line-height:
    1.02;

  letter-spacing:
    -0.035em;
}


.hero h1 em {
  color:
    var(--red);

  font-style:
    normal;
}


.hero-description {
  max-width:
    505px;

  margin:
    20px 0 23px;

  color:
    #4f5d71;

  font-size:
    14.5px;

  line-height:
    1.65;
}


.hero-buttons {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  flex-wrap:
    wrap;
}


.btn {
  height:
    43px;

  padding:
    0 20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  border-radius:
    999px;

  font-size:
    12.5px;

  font-weight:
    700;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.btn:hover {
  transform:
    translateY(-1px);
}


.btn-primary {
  background:
    var(--red);

  color:
    #ffffff;
}


.btn-primary:hover {
  background:
    var(--red-dark);
}


.btn-secondary {
  background:
    #ffffff;

  color:
    var(--navy);

  border:
    1px solid
    #aab3c0;
}


.hero-signature {
  width:
    fit-content;

  margin-top:
    25px;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    19px;

  font-style:
    italic;

  font-weight:
    600;

  transform:
    rotate(-3deg);
}


.hero-signature span {
  margin-left:
    8px;

  color:
    var(--red);

  font-family:
    Arial,
    sans-serif;

  font-size:
    23px;

  font-style:
    normal;

  font-weight:
    400;
}


/* ========================================
   HERO IMAGE
======================================== */

.hero-image {
  position:
    relative;

  height:
    525px;

  overflow:
    hidden;

  background:
    var(--cream);

  width:
    calc(
      100% +
      (
        100vw -
        min(
          1200px,
          calc(100vw - 40px)
        )
      ) / 2
    );

  max-width:
    none;
}


.hero-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    61% center;
}


.hero-note {
  position:
    absolute;

  top:
    28px;

  right:
    25px;

  z-index:
    4;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-style:
    italic;

  text-align:
    right;

  transform:
    rotate(-3deg);
}


.hero-note strong {
  font-size:
    21px;

  font-weight:
    600;

  line-height:
    1.1;
}


.hero-note small {
  margin-top:
    3px;

  color:
    #465873;

  font-size:
    13px;

  font-weight:
    600;
}


.hero-note span {
  margin-top:
    2px;

  color:
    var(--red);

  font-family:
    Arial,
    sans-serif;

  font-size:
    22px;

  font-style:
    normal;
}


/* ========================================
   TRUST
======================================== */

.trust-section {
  background:
    #ffffff;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.trust-grid {
  height:
    102px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );
}


.trust-item {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  padding:
    15px;
}


.trust-item:not(:last-child)::after {
  content:
    "";

  position:
    absolute;

  top:
    25px;

  right:
    0;

  bottom:
    25px;

  width:
    1px;

  background:
    var(--line);
}


.trust-icon {
  width:
    45px;

  height:
    45px;

  flex:
    0 0 45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    var(--soft-red);
}


.trust-icon svg,
.service-icon svg,
.contact-detail-icon svg {
  fill:
    none;

  stroke:
    var(--red);

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.trust-icon svg {
  width:
    23px;

  height:
    23px;
}


.trust-item strong {
  display:
    block;

  color:
    var(--navy);

  font-size:
    13.5px;

  line-height:
    1.25;
}


.trust-item span {
  display:
    block;

  margin-top:
    2px;

  color:
    #788292;

  font-size:
    12px;
}


/* ========================================
   SHARED
======================================== */

.section-label {
  margin:
    0 0 12px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  color:
    var(--red);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.2em;
}


.section-label span {
  width:
    38px;

  height:
    1.5px;

  background:
    var(--red);
}


/* ========================================
   ABOUT
======================================== */

.about-section {
  padding:
    72px 0 78px;

  background:
    #ffffff;
}


.about-grid {
  display:
    grid;

  grid-template-columns:
    1fr 0.9fr;

  align-items:
    center;

  gap:
    62px;
}


.about-image {
  height:
    365px;

  overflow:
    hidden;

  border-radius:
    22px;

  box-shadow:
    0 15px 40px
    rgba(
      11,
      33,
      69,
      0.07
    );
}


.about-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}


.about-content h2,
.why-content h2,
.contact-info h2 {
  margin:
    0 0 19px;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      36px,
      3.6vw,
      49px
    );

  line-height:
    1.06;

  letter-spacing:
    -0.025em;
}


.about-content h2 em,
.why-content h2 em,
.contact-info h2 em {
  color:
    var(--red);

  font-style:
    normal;
}


.about-content p {
  max-width:
    500px;

  margin:
    0 0 11px;

  color:
    #626e80;

  font-size:
    14px;

  line-height:
    1.7;
}


.about-button {
  height:
    42px;

  margin-top:
    11px;

  padding:
    0 20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  border:
    1px solid
    #a9b2bf;

  border-radius:
    999px;

  color:
    var(--navy);

  font-size:
    12.5px;

  font-weight:
    700;
}


/* ========================================
   SERVICES
======================================== */

.services-section {
  padding:
    78px 0 88px;

  background:
    linear-gradient(
      180deg,
      #fbf9f7 0%,
      #ffffff 100%
    );

  border-top:
    1px solid
    #f0eeee;
}


.services-heading {
  margin-bottom:
    38px;

  display:
    grid;

  grid-template-columns:
    1fr 0.85fr;

  gap:
    80px;

  align-items:
    end;
}


.services-heading h2 {
  margin:
    0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      38px,
      3.7vw,
      51px
    );

  line-height:
    1.06;

  letter-spacing:
    -0.03em;
}


.services-heading h2 em {
  color:
    var(--red);

  font-style:
    normal;
}


.services-intro {
  max-width:
    465px;

  margin:
    0 0 4px;

  color:
    #667286;

  font-size:
    14px;

  line-height:
    1.7;
}


.services-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    16px;
}


.service-card {
  min-height:
    350px;

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  padding:
    27px 24px
    25px;

  overflow:
    hidden;

  background:
    #ffffff;

  border:
    1px solid
    #eaebee;

  border-radius:
    18px;

  box-shadow:
    0 10px 35px
    rgba(
      11,
      33,
      69,
      0.035
    );

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}


.service-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(
      231,
      25,
      32,
      0.22
    );

  box-shadow:
    0 18px 42px
    rgba(
      11,
      33,
      69,
      0.08
    );
}


.service-card::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    3px;

  background:
    var(--red);

  transform:
    scaleX(0);

  transform-origin:
    left;

  transition:
    transform
    0.25s ease;
}


.service-card:hover::after {
  transform:
    scaleX(1);
}


.service-icon {
  width:
    50px;

  height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--soft-red);

  border-radius:
    50%;
}


.service-icon svg {
  width:
    24px;

  height:
    24px;
}


.service-number {
  position:
    absolute;

  top:
    25px;

  right:
    23px;

  color:
    #d7dbe1;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    18px;

  font-weight:
    600;
}


.service-card h3 {
  margin:
    25px 0 12px;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    22px;

  line-height:
    1.15;
}


.service-card p {
  margin:
    0 0 24px;

  color:
    #697487;

  font-size:
    13.5px;

  line-height:
    1.68;
}


.service-card a {
  margin-top:
    auto;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--navy);

  font-size:
    12.5px;

  font-weight:
    700;
}


.service-card a span {
  color:
    var(--red);
}


/* ========================================
   WHY
======================================== */

.why-section {
  padding:
    88px 0 94px;

  overflow:
    hidden;

  background:
    #ffffff;
}


.why-grid {
  display:
    grid;

  grid-template-columns:
    0.95fr 1.05fr;

  align-items:
    center;

  gap:
    90px;
}


.why-description {
  max-width:
    520px;

  margin:
    0 0 29px;

  color:
    #667286;

  font-size:
    14px;

  line-height:
    1.75;
}


.why-points {
  display:
    grid;

  gap:
    18px;
}


.why-point {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    14px;
}


.why-check {
  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    2px;

  border-radius:
    50%;

  background:
    var(--soft-red);

  color:
    var(--red);

  font-size:
    14px;

  font-weight:
    700;
}


.why-point strong {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--navy);

  font-size:
    14px;
}


.why-point span {
  max-width:
    420px;

  display:
    block;

  color:
    #788294;

  font-size:
    12.5px;

  line-height:
    1.6;
}


.why-visual {
  min-height:
    430px;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.why-visual::before {
  content:
    "";

  position:
    absolute;

  width:
    410px;

  height:
    410px;

  border-radius:
    50%;

  background:
    #f8f5f1;
}


.why-visual::after {
  content:
    "";

  position:
    absolute;

  width:
    310px;

  height:
    310px;

  border:
    1px solid
    rgba(
      231,
      25,
      32,
      0.10
    );

  border-radius:
    50%;
}


.why-card {
  position:
    relative;

  z-index:
    3;

  border-radius:
    24px;

  background:
    #ffffff;

  box-shadow:
    0 20px 55px
    rgba(
      11,
      33,
      69,
      0.10
    );
}


.why-card-main {
  width:
    330px;

  padding:
    42px 35px 38px;
}


.why-heart {
  width:
    54px;

  height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    24px;

  border-radius:
    50%;

  background:
    var(--soft-red);

  color:
    var(--red);

  font-size:
    29px;
}


.why-card-main p {
  margin:
    0 0 8px;

  color:
    var(--red);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}


.why-card-main strong {
  display:
    block;

  margin-bottom:
    15px;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    30px;

  line-height:
    1.1;
}


.why-card-main > span {
  display:
    block;

  color:
    #6b7688;

  font-size:
    13px;

  line-height:
    1.65;
}


.why-stat {
  position:
    absolute;

  z-index:
    5;

  min-width:
    125px;

  padding:
    17px 21px;

  background:
    #ffffff;

  border-radius:
    16px;

  box-shadow:
    0 12px 35px
    rgba(
      11,
      33,
      69,
      0.10
    );
}


.why-stat strong,
.why-stat span {
  display:
    block;
}


.why-stat strong {
  color:
    var(--red);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    23px;
}


.why-stat span {
  margin-top:
    2px;

  color:
    #737e8f;

  font-size:
    11px;
}


.why-stat-top {
  top:
    65px;

  right:
    10px;
}


.why-stat-bottom {
  left:
    10px;

  bottom:
    57px;
}


/* ========================================
   CTA
======================================== */

.cta-section {
  padding:
    18px 0 82px;

  background:
    #ffffff;
}


.cta-box {
  min-height:
    225px;

  position:
    relative;

  overflow:
    hidden;

  padding:
    45px 52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;

  border-radius:
    25px;

  background:
    var(--navy);
}


.cta-box::before,
.cta-box::after {
  content:
    "";

  position:
    absolute;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    50%;
}


.cta-box::before {
  width:
    310px;

  height:
    310px;

  top:
    -160px;

  right:
    -60px;
}


.cta-box::after {
  width:
    215px;

  height:
    215px;

  right:
    75px;

  bottom:
    -150px;
}


.cta-content {
  position:
    relative;

  z-index:
    2;
}


.cta-content p {
  margin:
    0 0 10px;

  color:
    #ff7377;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.2em;
}


.cta-content h2 {
  margin:
    0 0 12px;

  color:
    #ffffff;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      32px,
      3.1vw,
      44px
    );

  line-height:
    1.07;
}


.cta-content > span {
  max-width:
    530px;

  display:
    block;

  color:
    #c9d0da;

  font-size:
    13px;

  line-height:
    1.65;
}


.cta-button {
  min-height:
    48px;

  position:
    relative;

  z-index:
    3;

  padding:
    0 24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  flex-shrink:
    0;

  border-radius:
    999px;

  background:
    var(--red);

  color:
    #ffffff;

  font-size:
    12.5px;

  font-weight:
    700;
}


/* ========================================
   CONTACT
======================================== */

.contact-section {
  padding:
    82px 0 92px;

  background:
    linear-gradient(
      180deg,
      #fbf9f7 0%,
      #ffffff 100%
    );

  border-top:
    1px solid
    #f0eeee;
}


.contact-grid {
  display:
    grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap:
    85px;

  align-items:
    center;
}


.contact-description {
  max-width:
    490px;

  margin:
    0 0 30px;

  color:
    #697487;

  font-size:
    14px;

  line-height:
    1.75;
}


.contact-details {
  display:
    grid;

  gap:
    16px;
}


.contact-detail {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


a.contact-detail {
  transition:
    transform
    0.2s ease;
}


a.contact-detail:hover {
  transform:
    translateX(3px);
}


.contact-detail-icon {
  width:
    43px;

  height:
    43px;

  flex:
    0 0 43px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    var(--soft-red);
}


.contact-detail-icon svg {
  width:
    21px;

  height:
    21px;
}


.contact-detail span,
.contact-detail strong {
  display:
    block;
}


.contact-detail span {
  margin-bottom:
    2px;

  color:
    #8992a0;

  font-size:
    10px;

  font-weight:
    600;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}


.contact-detail strong {
  color:
    var(--navy);

  font-size:
    13px;

  line-height:
    1.5;
}


.contact-form-wrap {
  padding:
    35px;

  background:
    #ffffff;

  border:
    1px solid
    #ececef;

  border-radius:
    22px;

  box-shadow:
    0 18px 50px
    rgba(
      11,
      33,
      69,
      0.06
    );
}


.form-heading {
  margin-bottom:
    25px;
}


.form-heading span {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--red);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.form-heading h3 {
  margin:
    0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    27px;
}


.form-row {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;
}


.form-group {
  margin-bottom:
    15px;
}


.form-group label {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #4c5a70;

  font-size:
    11px;

  font-weight:
    600;
}


.form-group input,
.form-group textarea {
  width:
    100%;

  border:
    1px solid
    #dde1e6;

  outline:
    none;

  border-radius:
    11px;

  background:
    #ffffff;

  color:
    var(--navy);

  font-size:
    13px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.form-group input {
  height:
    45px;

  padding:
    0 14px;
}


.form-group textarea {
  min-height:
    118px;

  padding:
    13px 14px;

  resize:
    vertical;
}


.form-group input:focus,
.form-group textarea:focus {
  border-color:
    rgba(
      231,
      25,
      32,
      0.55
    );

  box-shadow:
    0 0 0 3px
    rgba(
      231,
      25,
      32,
      0.06
    );
}


.honeypot {
  position:
    absolute !important;

  left:
    -9999px !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;
}


.privacy-check {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  margin:
    2px 0 18px;

  color:
    #788294;

  font-size:
    10.5px;

  line-height:
    1.5;
}


.privacy-check input {
  margin-top:
    3px;

  accent-color:
    var(--red);
}


.privacy-check a {
  color:
    var(--navy);

  text-decoration:
    underline;

  text-underline-offset:
    2px;
}


.form-submit {
  height:
    45px;

  padding:
    0 22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--red);

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    700;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}


.form-submit:hover:not(:disabled) {
  background:
    var(--red-dark);

  transform:
    translateY(-1px);
}


.form-submit:disabled {
  opacity:
    0.65;

  cursor:
    not-allowed;
}


.form-message {
  display:
    none;

  margin:
    15px 0 0;

  padding:
    12px 14px;

  border-radius:
    9px;

  font-size:
    11.5px;

  line-height:
    1.55;
}


.form-message.show {
  display:
    block;
}


.form-message.success {
  background:
    #eef8f1;

  border:
    1px solid
    #d7ebdc;

  color:
    #356e44;
}


.form-message.error {
  background:
    #fff2f2;

  border:
    1px solid
    #f0d1d2;

  color:
    #9e292e;
}


/* ========================================
   FOOTER
======================================== */

.footer {
  padding:
    56px 0 25px;

  background:
    #081b38;

  color:
    #ffffff;
}


.footer-top {
  display:
    grid;

  grid-template-columns:
    1.5fr 0.75fr
    0.9fr 0.7fr;

  gap:
    55px;

  padding-bottom:
    45px;
}


.footer-brand img {
  width:
    180px;

  margin-bottom:
    18px;

  padding:
    8px 12px;

  border-radius:
    9px;

  background:
    #ffffff;
}


.footer-brand p {
  max-width:
    320px;

  margin:
    0;

  color:
    #aeb8c8;

  font-size:
    12.5px;

  line-height:
    1.7;
}


.footer-column {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    10px;
}


.footer-column strong {
  margin-bottom:
    5px;

  color:
    #ffffff;

  font-size:
    12px;
}


.footer-column a,
.footer-column span {
  color:
    #aeb8c8;

  font-size:
    11.5px;

  line-height:
    1.5;
}


.footer-column a:hover {
  color:
    #ffffff;
}


.footer-bottom {
  padding-top:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  color:
    #8793a6;

  font-size:
    10.5px;
}


.footer-love {
  color:
    #dbdee5;
}


/* ========================================
   LEGAL PAGES
======================================== */

.legal-header {
  height:
    82px;

  background:
    #ffffff;

  border-bottom:
    1px solid
    var(--line);
}


.legal-header-inner {
  height:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.legal-header .brand {
  margin-right:
    0;
}


.legal-back {
  min-height:
    40px;

  padding:
    0 18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    #d6dbe2;

  border-radius:
    999px;

  color:
    var(--navy);

  font-size:
    12px;

  font-weight:
    700;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}


.legal-back:hover {
  background:
    #f8f9fa;

  border-color:
    #bbc3cf;
}


.legal-main {
  min-height:
    70vh;

  padding:
    72px 0 85px;

  background:
    linear-gradient(
      180deg,
      #fbf9f7 0%,
      #ffffff 340px
    );
}


.legal-container {
  max-width:
    900px;
}


.legal-heading {
  margin-bottom:
    34px;
}


.legal-heading h1 {
  margin:
    0 0 11px;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      42px,
      5vw,
      60px
    );

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}


.legal-heading > p:last-child {
  margin:
    0;

  color:
    #737e8f;

  font-size:
    14px;
}


.legal-card {
  padding:
    48px 52px;

  background:
    #ffffff;

  border:
    1px solid
    #eaebee;

  border-radius:
    22px;

  box-shadow:
    0 18px 55px
    rgba(
      11,
      33,
      69,
      0.055
    );
}


.legal-card section {
  padding-bottom:
    28px;

  margin-bottom:
    28px;

  border-bottom:
    1px solid
    #eef0f2;
}


.legal-card section:last-of-type {
  margin-bottom:
    0;
}


.legal-card h2 {
  margin:
    0 0 13px;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    22px;

  line-height:
    1.25;
}


.legal-card p,
.legal-card li {
  color:
    #626f81;

  font-size:
    13.5px;

  line-height:
    1.8;
}


.legal-card p {
  margin:
    0 0 13px;
}


.legal-card p:last-child {
  margin-bottom:
    0;
}


.legal-card strong {
  color:
    var(--navy);
}


.legal-card a {
  color:
    var(--navy);

  font-weight:
    600;

  text-decoration:
    underline;

  text-decoration-color:
    rgba(
      11,
      33,
      69,
      0.25
    );

  text-underline-offset:
    3px;
}


.legal-card a:hover {
  color:
    var(--red);
}


.legal-card ul {
  margin:
    12px 0 18px;

  padding-left:
    23px;
}


.legal-notice {
  margin-top:
    31px;

  padding:
    18px 20px;

  border-left:
    3px solid
    var(--red);

  border-radius:
    0 10px 10px 0;

  background:
    #fff7f7;

  color:
    #687487;

  font-size:
    12px;

  line-height:
    1.7;
}


.legal-footer {
  padding:
    25px 0;

  background:
    #081b38;

  color:
    #aeb8c8;
}


.legal-footer-inner {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  font-size:
    11px;
}


.legal-footer-inner div {
  display:
    flex;

  gap:
    20px;
}


.legal-footer a:hover {
  color:
    #ffffff;
}


/* ========================================
   TABLET
======================================== */

@media (
  max-width:
  980px
) {

  .desktop-nav,
  .header-cta {
    display:
      none;
  }


  .mobile-toggle {
    display:
      block;
  }


  .mobile-menu {
    position:
      absolute;

    top:
      82px;

    left:
      0;

    right:
      0;

    padding:
      12px 20px
      20px;

    background:
      #ffffff;

    border-bottom:
      1px solid
      var(--line);

    box-shadow:
      0 12px 25px
      rgba(
        11,
        33,
        69,
        0.08
      );
  }


  .mobile-menu.open {
    display:
      block;
  }


  .mobile-menu a {
    display:
      block;

    padding:
      12px 4px;

    color:
      var(--navy);

    font-size:
      14px;

    font-weight:
      600;

    border-bottom:
      1px solid
      #f1f1f1;
  }


  .hero-grid {
    height:
      auto;

    grid-template-columns:
      1fr;
  }


  .hero-content {
    padding:
      52px 0 38px;
  }


  .hero-image {
    width:
      100%;

    height:
      470px;

    border-radius:
      22px;
  }


  .hero-image img {
    object-position:
      60% center;
  }


  .trust-grid {
    height:
      auto;

    grid-template-columns:
      1fr 1fr;
  }


  .trust-item {
    min-height:
      92px;
  }


  .trust-item:nth-child(2)::after {
    display:
      none;
  }


  .trust-item:nth-child(1),
  .trust-item:nth-child(2) {
    border-bottom:
      1px solid
      var(--line);
  }


  .about-grid,
  .why-grid,
  .contact-grid {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  .about-image {
    height:
      410px;
  }


  .services-heading {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  .services-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .why-visual {
    max-width:
      600px;

    width:
      100%;

    margin-inline:
      auto;
  }


  .cta-box {
    padding:
      40px 38px;
  }


  .footer-top {
    grid-template-columns:
      1.3fr 1fr 1fr;

    gap:
      40px;
  }


  .footer-column:last-child {
    grid-column:
      2 / 3;
  }

}


/* ========================================
   MOBILE
======================================== */

@media (
  max-width:
  600px
) {

  .container {
    width:
      calc(100% - 28px);
  }


  .site-header,
  .header-inner,
  .legal-header,
  .legal-header-inner {
    height:
      70px;

    min-height:
      70px;
  }


  .brand img {
    width:
      155px;
  }


  .mobile-menu {
    top:
      70px;
  }


  .hero-content {
    padding:
      40px 0 32px;
  }


  .eyebrow {
    font-size:
      9.5px;
  }


  .hero h1 {
    font-size:
      43px;
  }


  .hero-description {
    font-size:
      14px;
  }


  .hero-buttons {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .btn {
    width:
      100%;
  }


  .hero-signature {
    margin-top:
      21px;

    font-size:
      18px;
  }


  .hero-image {
    width:
      100%;

    height:
      375px;

    border-radius:
      18px;
  }


  .hero-image img {
    object-position:
      62% center;
  }


  .hero-note {
    top:
      18px;

    right:
      14px;
  }


  .hero-note strong {
    font-size:
      17px;
  }


  .hero-note small {
    font-size:
      11px;
  }


  .trust-item {
    min-height:
      105px;

    flex-direction:
      column;

    gap:
      8px;

    text-align:
      center;
  }


  .trust-icon {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;
  }


  .trust-item strong {
    font-size:
      12px;
  }


  .trust-item span {
    font-size:
      11px;
  }


  .about-section,
  .why-section,
  .contact-section {
    padding:
      58px 0 65px;
  }


  .about-image {
    height:
      300px;

    border-radius:
      18px;
  }


  .about-content h2,
  .why-content h2,
  .contact-info h2 {
    font-size:
      37px;
  }


  .about-content p,
  .why-description,
  .contact-description {
    font-size:
      14px;
  }


  .services-section {
    padding:
      60px 0 68px;
  }


  .services-heading {
    margin-bottom:
      27px;
  }


  .services-heading h2 {
    font-size:
      37px;
  }


  .services-grid {
    grid-template-columns:
      1fr;
  }


  .service-card {
    min-height:
      300px;
  }


  .why-visual {
    min-height:
      410px;
  }


  .why-visual::before {
    width:
      330px;

    height:
      330px;
  }


  .why-visual::after {
    width:
      245px;

    height:
      245px;
  }


  .why-card-main {
    width:
      270px;

    padding:
      34px 28px;
  }


  .why-card-main strong {
    font-size:
      26px;
  }


  .why-stat {
    min-width:
      105px;

    padding:
      13px 16px;
  }


  .why-stat-top {
    top:
      45px;

    right:
      0;
  }


  .why-stat-bottom {
    left:
      0;

    bottom:
      43px;
  }


  .cta-section {
    padding:
      0 0 60px;
  }


  .cta-box {
    min-height:
      0;

    padding:
      35px 25px;

    flex-direction:
      column;

    align-items:
      flex-start;

    border-radius:
      20px;
  }


  .cta-content h2 {
    font-size:
      33px;
  }


  .cta-button {
    width:
      100%;
  }


  .contact-form-wrap {
    padding:
      27px 20px;

    border-radius:
      18px;
  }


  .form-row {
    grid-template-columns:
      1fr;

    gap:
      0;
  }


  .form-submit {
    width:
      100%;
  }


  .footer {
    padding-top:
      45px;
  }


  .footer-top {
    grid-template-columns:
      1fr;

    gap:
      30px;

    padding-bottom:
      35px;
  }


  .footer-column:last-child {
    grid-column:
      auto;
  }


  .footer-bottom {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      9px;
  }


  .legal-back {
    min-height:
      36px;

    padding:
      0 13px;

    font-size:
      10.5px;
  }


  .legal-main {
    padding:
      48px 0 60px;
  }


  .legal-heading {
    margin-bottom:
      25px;
  }


  .legal-heading h1 {
    font-size:
      42px;
  }


  .legal-card {
    padding:
      29px 21px;

    border-radius:
      17px;
  }


  .legal-card h2 {
    font-size:
      20px;
  }


  .legal-card p,
  .legal-card li {
    font-size:
      13px;
  }


  .legal-footer-inner {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      12px;
  }

}