/* ==========================================================================
   pages/connect.css — Connect page + embedded About contact section
   No external marble image required
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

@font-face{
  font-family: "Italianno";
  src: url("../../fonts/Italianno.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body.connect,
.about-page .contact-body{
  /* typography + copy */
  --contact-title: #E0DAD9;
  --contact-copy: rgba(226, 231, 239, 0.92);
  --contact-copy-soft: rgba(178, 188, 204, 0.88);
  --contact-muted: rgba(152, 164, 182, 0.82);

  /* row accents */
  --contact-accent-green: #6FA36C;
  --contact-accent-tan: #B79C6B;
  --contact-accent-blue: #6F9CC7;

  /* CTA borders */
  --contact-cta-border-green: rgba(111, 163, 108, 0.72);
  --contact-cta-border-tan: rgba(183, 156, 107, 0.74);
  --contact-cta-border-blue: rgba(111, 156, 199, 0.74);

  /* geometry */
  --contact-card-pad-x: 24px;
  --contact-card-pad-y: 10px;
  --contact-logo-col: 220px;
  --contact-card-gap: 14px;
  --contact-cta-col: 220px;
  --contact-cta-box-width: 208px;
  --contact-arc-end-inset: 8px;
  --contact-arc-cta-touch: 12px;
  --contact-arc-cta-anchor: 64px;
  --contact-cta-bottom-glow-width: 160px;

  --contact-down-nudge-x: 0px;
}

.connect-page{
  position: relative;
  z-index: 1;
  padding-bottom: 72px;
}

/* --------------------------------------------------------------------------
   Page atmosphere
   -------------------------------------------------------------------------- */

body.connect{
  position: relative;
  background:
    radial-gradient(circle at 50% 8%, rgba(125, 141, 172, 0.08), transparent 18%),
    radial-gradient(circle at 18% 60%, rgba(54, 74, 108, 0.07), transparent 26%),
    radial-gradient(circle at 78% 54%, rgba(40, 73, 118, 0.12), transparent 26%),
    linear-gradient(180deg, #01040a 0%, #040911 20%, #07101a 50%, #03070e 100%);
}

body.connect::before,
body.connect::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.connect::before{
  opacity: 0.10;
  background:
    radial-gradient(circle at 50% 6%, rgba(165, 178, 198, 0.05), transparent 18%),
    radial-gradient(circle at 22% 62%, rgba(54, 74, 108, 0.05), transparent 22%),
    radial-gradient(circle at 78% 54%, rgba(52, 96, 152, 0.07), transparent 24%);
  mix-blend-mode: screen;
}

body.connect::after{
  opacity: 0.18;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 68%, rgba(0,0,0,0.36) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  background-size: auto, 260px 260px;
  mix-blend-mode: soft-light;
}

/* --------------------------------------------------------------------------
   Surface container
   -------------------------------------------------------------------------- */

.contact-body .section-card.card--surface{
  position: relative;
  overflow: hidden;
  padding: 22px 22px 28px;
  border-radius: 26px;
  border: 1px solid rgba(182, 194, 212, 0.10);
  background:
    radial-gradient(circle at 20% 36%, rgba(25, 44, 82, 0.18), transparent 32%),
    radial-gradient(circle at 78% 70%, rgba(26, 58, 100, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(8, 14, 25, 0.94), rgba(7, 11, 20, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 28px 70px rgba(0, 0, 0, 0.42);
}

.contact-body .section-card.card--surface::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 44%, rgba(54, 74, 108, 0.06), transparent 18%),
    radial-gradient(ellipse at 30% 72%, rgba(118, 136, 162, 0.018), transparent 14%),
    radial-gradient(ellipse at 48% 20%, rgba(182, 182, 178, 0.018), transparent 13%),
    radial-gradient(ellipse at 78% 54%, rgba(72, 112, 168, 0.10), transparent 18%),
    radial-gradient(ellipse at 56% 86%, rgba(90, 84, 101, 0.05), transparent 18%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, auto, auto, 240px 240px;
  opacity: 0.12;
  mix-blend-mode: soft-light;
}

.contact-body .section-card.card--surface::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0.012) 18%,
      transparent 36%,
      rgba(255,255,255,0.009) 48%,
      transparent 62%,
      rgba(255,255,255,0.012) 76%,
      transparent 100%
    );
  mix-blend-mode: screen;
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.contact-body .section-head{
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: var(--contact-logo-col) minmax(0, 1fr) var(--contact-cta-col);
  gap: var(--contact-card-gap);
  align-items: center;
}

.contact-body .section-title{
  grid-column: 2;
  margin: 0;
  text-align: center;
  color: #f2f4f8;
  font-family: "Italianno", serif;
  font-size: clamp(2.4rem, 1.7rem + 1.6vw, 3.4rem);
  line-height: 1.05;
  text-shadow:
    0 0 20px rgba(220, 228, 242, 0.16),
    0 1px 4px rgba(0, 0, 0, 0.5);
}

.contact-body .section-sub{
  grid-column: 2;
  margin: 6px 0 0;
  text-align: center;
  color: var(--contact-muted);
}

/* --------------------------------------------------------------------------
   Contact sequence
   -------------------------------------------------------------------------- */

.contact-sequence{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 30px;
  overflow: visible;
}

.contact-sequence-card{
  position: relative;
  display: grid;
  grid-template-columns: var(--contact-logo-col) minmax(0, 1fr) var(--contact-cta-col);
  align-items: center;
  gap: var(--contact-card-gap);
  min-height: 142px;
  padding: var(--contact-card-pad-y) var(--contact-card-pad-x) 24px;
  overflow: visible;
  isolation: isolate;
  border: 1px solid rgba(190, 202, 220, 0.08);
  background:
    radial-gradient(circle at 18% 34%, rgba(58, 74, 98, 0.12), transparent 20%),
    radial-gradient(circle at 76% 54%, rgba(48, 86, 142, 0.18), transparent 24%),
    radial-gradient(circle at 52% 22%, rgba(177, 176, 170, 0.04), transparent 16%),
    linear-gradient(180deg, rgba(9, 15, 25, 0.94), rgba(8, 13, 23, 0.96)),
    linear-gradient(135deg, #060a12 0%, #09101b 40%, #0a1320 64%, #050912 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    inset 0 24px 34px rgba(255,255,255,0.012),
    inset 0 -26px 34px rgba(0,0,0,0.18),
    0 16px 34px rgba(0, 0, 0, 0.34);
}

.contact-sequence-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 52%, rgba(66, 84, 110, 0.14), transparent 18%),
    radial-gradient(ellipse at 24% 28%, rgba(56, 70, 90, 0.08), transparent 16%),
    radial-gradient(ellipse at 34% 72%, rgba(150, 165, 188, 0.018), transparent 16%),
    radial-gradient(ellipse at 50% 18%, rgba(198, 199, 196, 0.03), transparent 14%),
    radial-gradient(ellipse at 68% 34%, rgba(32, 61, 102, 0.12), transparent 16%),
    radial-gradient(ellipse at 82% 56%, rgba(73, 116, 176, 0.22), transparent 20%),
    radial-gradient(ellipse at 56% 86%, rgba(83, 82, 98, 0.08), transparent 18%);
  opacity: 0.68;
  filter: blur(24px) saturate(104%);
}

.contact-sequence-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      108deg,
      transparent 0%,
      rgba(255,255,255,0.020) 10%,
      transparent 18%,
      rgba(255,255,255,0.012) 27%,
      transparent 36%,
      rgba(255,255,255,0.016) 45%,
      transparent 54%,
      rgba(255,255,255,0.010) 63%,
      transparent 72%,
      rgba(255,255,255,0.014) 82%,
      transparent 100%
    ),
    linear-gradient(
      72deg,
      transparent 0%,
      rgba(221, 194, 144, 0.012) 18%,
      transparent 28%,
      rgba(143, 177, 220, 0.010) 42%,
      transparent 56%,
      rgba(255,255,255,0.008) 68%,
      transparent 82%,
      rgba(195, 205, 216, 0.012) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  background-size: auto, auto, 260px 260px;
  opacity: 0.22;
  mix-blend-mode: soft-light;
}

.contact-sequence-card__frame{
  display: none;
}

.contact-sequence-card__glow{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 48%, rgba(92, 112, 138, 0.035), transparent 15%),
    radial-gradient(circle at 78% 54%, rgba(110, 167, 225, 0.06), transparent 18%);
}

.contact-sequence-card__logo,
.contact-sequence-card__content,
.contact-sequence-card__cta-wrap{
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   Large icon
   -------------------------------------------------------------------------- */

.contact-sequence-card__logo{
  display: flex;
  align-items: stretch;
  justify-content: center;
  align-self: stretch;
  min-height: 0;
}

.contact-sequence-card__logo-wrap{
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.contact-sequence-card__logo-img{
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.34));
}

/* --------------------------------------------------------------------------
   Middle column
   -------------------------------------------------------------------------- */

.contact-sequence-card__content{
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 42rem;
  padding-right: 0;
  text-align: center;
}

.contact-sequence-card__title{
  margin: 0 auto 8px;
  max-width: 44ch;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.12rem, 0.9rem + 0.68vw, 1.62rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  color: #f0f3f8;
}

.contact-sequence-card__text{
  margin: 0 auto;
  max-width: 34rem;
  color: var(--contact-copy);
  font-size: clamp(1rem, 1.08vw, 1.2rem);
  line-height: 1.32;
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   CTA box
   -------------------------------------------------------------------------- */

.contact-sequence-card__cta-wrap{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
}

.contact-sequence-card__cta-wrap::before{
  content: none;
}

.contact-sequence-card__cta{
  position: relative;
  z-index: 1;
  display: block;
  width: var(--contact-cta-box-width);
  min-width: 0;
  max-width: 100%;
  padding: 14px 16px 13px;
  border-radius: 14px;
  text-decoration: none;
  text-align: center;
  color: rgba(243, 246, 250, 0.96);
  border: 1px solid var(--contact-row-cta-border);
  background:
    linear-gradient(180deg, rgba(73, 89, 112, 0.30), rgba(44, 55, 73, 0.24));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 28px rgba(0,0,0,0.24);
  backdrop-filter: blur(2px);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  overflow: visible;
}

.contact-sequence-card__cta::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid var(--contact-row-line);
  opacity: 0.84;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.10),
      transparent
    ) 50% calc(100% - 1px) / 104px 1px no-repeat;
  box-shadow:
    0 0 8px var(--contact-row-glow-soft),
    0 0 18px var(--contact-row-glow),
    0 0 28px var(--contact-row-glow-soft),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}

.contact-sequence-card__cta::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: var(--contact-cta-bottom-glow-width);
  height: 10px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 18%,
      rgba(255,255,255,0.16) 34%,
      var(--contact-row-line) 50%,
      rgba(255,255,255,0.16) 66%,
      transparent 82%,
      transparent 100%
    ) center bottom / 156px 1.5px no-repeat,
    radial-gradient(
      ellipse at center bottom,
      var(--contact-row-glow-soft) 0%,
      var(--contact-row-glow) 30%,
      rgba(255,255,255,0) 68%
    );
  opacity: 0.86;
}

.contact-sequence-card__cta[href]:hover,
.contact-sequence-card__cta[href]:focus-visible{
  transform: translateY(-1px);
  outline: none;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 32px rgba(0,0,0,0.30);
}

.contact-sequence-card__cta[href]:hover::before,
.contact-sequence-card__cta[href]:focus-visible::before{
  opacity: 0.96;
  box-shadow:
    0 0 10px var(--contact-row-glow-soft),
    0 0 22px var(--contact-row-glow),
    0 0 32px var(--contact-row-glow-soft);
}

.contact-sequence-card__cta-label,
.contact-sequence-card__cta-value{
  position: relative;
  z-index: 1;
  display: block;
}

.contact-sequence-card__cta-label{
  margin-bottom: 4px;
  color: rgba(229, 234, 242, 0.84);
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: nowrap;
}

.contact-sequence-card__cta-value{
  font-size: clamp(1rem, 1.1vw, 1.45rem);
  line-height: 1.15;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   Social icons
   -------------------------------------------------------------------------- */

.contact-sequence-card__socialline{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 6px 0 8px;
}

.contact-sequence-card__socialtext{
  color: var(--contact-copy);
  font-size: 1rem;
  line-height: 1.2;
}

.contact-sequence-card__socials{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-sequence-card__socialchip{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.contact-sequence-card__socialchip img{
  display: block;
  object-fit: contain;
  transition: transform 160ms ease, opacity 160ms ease;
}

.contact-sequence-card__socialchip:hover img,
.contact-sequence-card__socialchip:focus-visible img{
  transform: scale(1.04);
}

.socialchip--sez img{ width: 28px; height: 28px; }
.socialchip--facebook img{ width: 26px; height: 26px; transform: scale(2); transform-origin: center; }
.socialchip--twitter img{ width: 26px; height: 26px; }
.socialchip--bluesky img{ width: 28px; height: 26px; transform: scale(1.0); transform-origin: center; }
.socialchip--reddit img{ width: 24px; height: 24px; }
.socialchip--patreon img{ width: 28px; height: 28px; }
.socialchip--substack img{ width: 24px; height: 24px; }

.contact-inline{
  color: #d2a831;
  text-decoration: none;
  border-bottom: 0;
}

.contact-inline:hover,
.contact-inline:focus-visible{
  text-decoration: none;
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Connector arc lines
   -------------------------------------------------------------------------- */

.contact-sequence-card__arc{
  position: absolute;
  z-index: 2;
  left: calc(
    var(--contact-card-pad-x)
    + (var(--contact-logo-col) / 2)
    - var(--contact-arc-end-inset)
  );
  right: calc(
    var(--contact-card-pad-x)
    + (var(--contact-cta-box-width) / 2)
    - var(--contact-arc-cta-touch)
  );
  bottom: 10px;
  height: 72px;
  opacity: 0.38;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 100% 100%;
}

.contact-sequence-card__arc::before,
.contact-sequence-card__arc::after{
  content: none !important;
  display: none !important;
}

.contact-sequence-card--row-1 .contact-sequence-card__arc{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L744 58 C850 58 920 54 962 38 C983 30 994 18 999 6' fill='none' stroke='%236FA36C' stroke-opacity='0.55' stroke-width='1.7' stroke-linecap='round' stroke-dasharray='5 7'/%3E%3C/svg%3E");
}

.contact-sequence-card--row-2 .contact-sequence-card__arc{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L744 58 C850 58 920 54 962 38 C983 30 994 18 999 6' fill='none' stroke='%23B79C6B' stroke-opacity='0.55' stroke-width='1.7' stroke-linecap='round' stroke-dasharray='5 7'/%3E%3C/svg%3E");
}

.contact-sequence-card--row-3 .contact-sequence-card__arc{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L744 58 C850 58 920 54 962 38 C983 30 994 18 999 6' fill='none' stroke='%236F9CC7' stroke-opacity='0.55' stroke-width='1.7' stroke-linecap='round' stroke-dasharray='5 7'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Downward arrows between cards
   -------------------------------------------------------------------------- */

.contact-sequence-card__down{
  position: absolute;
  z-index: 4;
  left: calc(50% + var(--contact-down-nudge-x));
  bottom: -28px;
  transform: translateX(-50%);
  width: 28px;
  height: 30px;
  pointer-events: none;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: visible;
  opacity: 0.96;
  background:
    radial-gradient(
      ellipse at 50% 82%,
      var(--contact-row-glow-soft) 0%,
      rgba(255,255,255,0) 72%
    );
}

.contact-sequence-card__down::before,
.contact-sequence-card__down::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.contact-sequence-card__down::before{
  top: 0;
  width: 2px;
  height: 17px;
  border-radius: 999px;
  background: var(--contact-row-line);
  box-shadow:
    0 0 2px var(--contact-row-glow-core),
    0 0 5px var(--contact-row-glow),
    0 0 10px var(--contact-row-glow-soft);
}

.contact-sequence-card__down::after{
  bottom: 1px;
  width: 15px;
  height: 11px;
  background:
    linear-gradient(
      45deg,
      transparent 38%,
      rgba(255,255,255,0.14) 41%,
      var(--contact-row-line) 45% 57%,
      transparent 60%
    ) left center / 50% 100% no-repeat,
    linear-gradient(
      -45deg,
      transparent 38%,
      rgba(255,255,255,0.14) 41%,
      var(--contact-row-line) 45% 57%,
      transparent 60%
    ) right center / 50% 100% no-repeat;
  filter:
    drop-shadow(0 0 2px var(--contact-row-glow-core))
    drop-shadow(0 0 5px var(--contact-row-glow))
    drop-shadow(0 0 11px var(--contact-row-glow-soft));
  opacity: 1;
}

.contact-sequence-card:last-child .contact-sequence-card__down{
  display: none;
}

/* --------------------------------------------------------------------------
   Row accents
   -------------------------------------------------------------------------- */

.contact-sequence-card--row-1{
  --contact-row-line: var(--contact-accent-green);
  --contact-row-cta-border: var(--contact-cta-border-green);
  --contact-row-glow-core: rgba(111, 163, 108, 0.75);
  --contact-row-glow: rgba(111, 163, 108, 0.46);
  --contact-row-glow-soft: rgba(111, 163, 108, 0.24);
}

.contact-sequence-card--row-2{
  --contact-row-line: var(--contact-accent-tan);
  --contact-row-cta-border: var(--contact-cta-border-tan);
  --contact-row-glow-core: rgba(183, 156, 107, 0.78);
  --contact-row-glow: rgba(183, 156, 107, 0.48);
  --contact-row-glow-soft: rgba(183, 156, 107, 0.24);
}

.contact-sequence-card--row-3{
  --contact-row-line: var(--contact-accent-blue);
  --contact-row-cta-border: var(--contact-cta-border-blue);
  --contact-row-glow-core: rgba(111, 156, 199, 0.75);
  --contact-row-glow: rgba(111, 156, 199, 0.46);
  --contact-row-glow-soft: rgba(111, 156, 199, 0.24);
}

/* --------------------------------------------------------------------------
   Desktop-specific arc geometry
   -------------------------------------------------------------------------- */

@media (min-width: 981px){
  body.connect{
    --contact-arc-cta-anchor: 116px;
  }

  .contact-sequence-card__arc{
    right: calc(
      var(--contact-card-pad-x)
      + (var(--contact-cta-box-width) / 2)
      - var(--contact-arc-cta-touch)
    );
    opacity: 0.44;
  }

  .contact-sequence-card--row-1 .contact-sequence-card__arc{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L826 58 C920 58 965 50 986 26 C994 17 998 10 1000 4' fill='none' stroke='%236FA36C' stroke-opacity='0.58' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='4.6 6.2'/%3E%3C/svg%3E");
  }

  .contact-sequence-card--row-2 .contact-sequence-card__arc{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L826 58 C920 58 965 50 986 26 C994 17 998 10 1000 4' fill='none' stroke='%23B79C6B' stroke-opacity='0.58' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='4.6 6.2'/%3E%3C/svg%3E");
  }

  .contact-sequence-card--row-3 .contact-sequence-card__arc{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L826 58 C920 58 965 50 986 26 C994 17 998 10 1000 4' fill='none' stroke='%236F9CC7' stroke-opacity='0.58' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='4.6 6.2'/%3E%3C/svg%3E");
  }
}

@media (min-width: 1200px){
  .contact-sequence-card--row-1 .contact-sequence-card__arc{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L854 58 C940 58 978 46 992 20 C997 12 999 7 1000 3' fill='none' stroke='%236FA36C' stroke-opacity='0.58' stroke-width='1.85' stroke-linecap='round' stroke-dasharray='4.5 6'/%3E%3C/svg%3E");
  }

  .contact-sequence-card--row-2 .contact-sequence-card__arc{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L854 58 C940 58 978 46 992 20 C997 12 999 7 1000 3' fill='none' stroke='%23B79C6B' stroke-opacity='0.58' stroke-width='1.85' stroke-linecap='round' stroke-dasharray='4.5 6'/%3E%3C/svg%3E");
  }

  .contact-sequence-card--row-3 .contact-sequence-card__arc{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M10 18 C10 46 22 58 54 58 L854 58 C940 58 978 46 992 20 C997 12 999 7 1000 3' fill='none' stroke='%236F9CC7' stroke-opacity='0.58' stroke-width='1.85' stroke-linecap='round' stroke-dasharray='4.5 6'/%3E%3C/svg%3E");
  }
}

/* --------------------------------------------------------------------------
   Responsive — 1120px
   -------------------------------------------------------------------------- */

@media (max-width: 1120px){
  body.connect{
    --contact-logo-col: 188px;
    --contact-cta-col: 210px;
    --contact-cta-box-width: 198px;
    --contact-card-gap: 14px;
    --contact-card-pad-x: 20px;
  }

  .contact-body .section-head{
    grid-template-columns: var(--contact-logo-col) minmax(0, 1fr) var(--contact-cta-col);
    gap: var(--contact-card-gap);
  }

  .contact-sequence{
    gap: 28px;
  }

  .contact-sequence-card{
    min-height: 134px;
    padding: 10px var(--contact-card-pad-x) 24px;
  }

  .contact-sequence-card__text{
    font-size: clamp(0.95rem, 1vw, 1.08rem);
  }
}

/* --------------------------------------------------------------------------
   Responsive — 980px
   -------------------------------------------------------------------------- */

@media (max-width: 980px){
  body.connect{
    --contact-logo-col: 160px;
    --contact-cta-col: 200px;
    --contact-cta-box-width: 188px;
    --contact-card-gap: 12px;
    --contact-card-pad-x: 18px;
    --contact-card-pad-y: 8px;
    --contact-down-nudge-x: 0px;
  }

  .contact-body .section-head{
    grid-template-columns: var(--contact-logo-col) minmax(0, 1fr) var(--contact-cta-col);
    gap: var(--contact-card-gap);
  }

  .contact-body .section-title,
  .contact-body .section-sub{
    grid-column: 2;
    text-align: center;
  }

  .contact-body .section-card.card--surface{
    padding: 18px 16px 22px;
  }

  .contact-sequence{
    gap: 26px;
  }

  .contact-sequence-card{
    grid-template-columns: var(--contact-logo-col) minmax(0, 1fr) var(--contact-cta-col);
    min-height: 126px;
    padding: var(--contact-card-pad-y) var(--contact-card-pad-x) 22px;
  }

  .contact-sequence-card__content{
    max-width: 100%;
  }

  .contact-sequence-card__title{
    max-width: 28ch;
  }

  .contact-sequence-card__text{
    max-width: 28rem;
    font-size: 0.98rem;
  }

  .contact-sequence-card__cta{
    width: var(--contact-cta-box-width);
    padding: 11px 12px 10px;
  }

  .contact-sequence-card__cta-label{
    font-size: 0.80rem;
  }

  .contact-sequence-card__cta-value{
    font-size: 0.92rem;
  }

  .contact-sequence-card__arc{
    bottom: 8px;
    height: 72px;
    opacity: 0.66;
  }

  .contact-sequence-card__down{
    bottom: -26px;
    width: 24px;
    height: 28px;
  }

  .contact-sequence-card__down::before{
    height: 15px;
  }

  .contact-sequence-card__down::after{
    width: 12px;
    height: 9px;
  }
}

/* --------------------------------------------------------------------------
   Responsive — 860px
   -------------------------------------------------------------------------- */

@media (max-width: 860px){
  body.connect{
    --contact-logo-col: 132px;
    --contact-card-gap: 12px;
    --contact-card-pad-x: 16px;
    --contact-card-pad-y: 8px;
    --contact-cta-box-width: 320px;
    --contact-down-nudge-x: 0px;
  }

  .contact-body .section-head{
    grid-template-columns: var(--contact-logo-col) minmax(0, 1fr);
    gap: var(--contact-card-gap);
  }

  .contact-body .section-title,
  .contact-body .section-sub{
    grid-column: 2;
    text-align: center;
  }

  .contact-sequence{
    gap: 28px;
  }

  .contact-sequence-card{
    grid-template-columns: var(--contact-logo-col) minmax(0, 1fr);
    min-height: 0;
    padding: 10px var(--contact-card-pad-x) 22px;
    align-items: center;
  }

  .contact-sequence-card__logo{
    align-self: stretch;
    justify-content: center;
  }

  .contact-sequence-card__content{
    justify-self: center;
    align-self: center;
    width: 100%;
    max-width: 34rem;
    text-align: center;
  }

  .contact-sequence-card__text{
    max-width: 30rem;
    font-size: 0.96rem;
  }

  .contact-sequence-card__cta-wrap{
    grid-column: 2;
    justify-content: center;
    margin-top: 6px;
  }

  .contact-sequence-card__cta{
    width: min(100%, var(--contact-cta-box-width));
    padding: 12px 14px 11px;
  }

  .contact-sequence-card__arc{
    left: calc(var(--contact-card-pad-x) + (var(--contact-logo-col) / 2) - var(--contact-arc-end-inset));
    right: calc(50% - ((var(--contact-logo-col) + var(--contact-card-gap)) / 2) - var(--contact-arc-end-inset));
    bottom: 8px;
    height: 72px;
  }

  .contact-sequence-card__down{
    left: 50%;
    bottom: -26px;
  }
}

/* --------------------------------------------------------------------------
   Responsive — 640px
   -------------------------------------------------------------------------- */

@media (max-width: 640px){
  .connect-page{
    padding-bottom: 56px;
  }

  .contact-body .section-head{
    display: block;
    text-align: center;
  }

  .contact-body .section-title,
  .contact-body .section-sub{
    text-align: center;
  }

  .contact-body .section-card.card--surface{
    border-radius: 20px;
    padding: 16px 14px 18px;
  }

  .contact-sequence{
    gap: 16px;
  }

  .contact-sequence-card{
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 14px 14px 14px;
    overflow: hidden;
  }

  .contact-sequence-card__logo{
    justify-content: center;
    align-self: auto;
    width: 100%;
  }

  .contact-sequence-card__logo-wrap{
    width: 110px;
    height: 110px;
  }

  .contact-sequence-card__logo-img{
    width: auto;
    height: 100%;
    max-width: 100%;
  }

  .contact-sequence-card__content{
    justify-self: stretch;
    max-width: none;
    padding-right: 0;
  }

  .contact-sequence-card__text{
    max-width: none;
    font-size: 0.96rem;
  }

  .contact-sequence-card__cta-wrap{
    grid-column: auto;
    justify-content: flex-start;
    margin-top: 2px;
  }

  .contact-sequence-card__cta{
    width: 100%;
    max-width: none;
  }

  .contact-sequence-card__socialline{
    gap: 10px;
  }

  .contact-sequence-card__socials{
    gap: 8px;
  }

  .contact-sequence-card__arc,
  .contact-sequence-card__down{
    display: none;
  }
}