:root {
      --cream: #f4f1ea;
      --cream-2: #ece7dd;
      --ink: #14110f;
      --ink-soft: #2a2622;
      --muted: #6b655d;
      --line: #d9d3c8;
      --white: #ffffff;
      --radius: 14px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { background: var(--cream); scroll-behavior: smooth; }

    body {
      font-family: "Inter", system-ui, sans-serif;
      color: var(--ink);
      background: var(--cream);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    .serif { font-family: "Cormorant Garamond", Georgia, serif; }

    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

    .eyebrow {
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
    }

    a { color: inherit; text-decoration: none; }

    .rule { width: 46px; height: 1px; background: var(--ink); opacity: 0.5; }

  
    /* ---------- Hero ---------- */
    .hero {
      background: linear-gradient(90deg, var(--cream-2) 0%, var(--cream-2) 42%, #e4ddd2 100%);
      overflow: hidden;
    }
    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      align-items: center;
      max-width: 1080px;
      margin: 0 auto;
      min-height: 380px;
    }
    .hero-copy { padding: 70px 24px; }
    .hero-copy h1 {
      font-family: "Cormorant Garamond", serif;
      font-size: 60px;
      line-height: 1.02;
      font-weight: 500;
      margin: 18px 0 20px;
    }
    .hero-copy .rule { margin-bottom: 22px; }
    .hero-copy p { color: var(--ink-soft); max-width: 260px; font-size: 15px; }
    .hero-img { height: 100%; min-height: 380px; }
    .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ---------- Steps ---------- */
    .steps-section { padding: 80px 0 90px; }
    .steps-head { text-align: center; max-width: 560px; margin: 0 auto 60px; }
    .steps-head h2 {
      font-family: "Cormorant Garamond", serif;
      font-size: 40px;
      font-weight: 500;
    }
    .steps-head .rule { margin: 18px auto 22px; }
    .steps-head p { color: var(--ink-soft); font-size: 15px; }

    .timeline {
      max-width: 620px;
      margin: 0 auto;
      position: relative;
    }
    .step {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 28px;
      padding-bottom: 44px;
      position: relative;
    }
    .step:last-child { padding-bottom: 0; }
    /* connecting dashed line between icons */
    .step:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 43px;
      top: 88px;
      bottom: 0;
      border-left: 1px dashed var(--line);
    }
    .step-icon {
      position: relative;
      width: 88px; height: 88px;
      border-radius: 50%;
      background: var(--cream-2);
      display: grid;
      place-items: center;
      z-index: 1;
    }
    .step-icon svg { width: 40px; height: 40px; color: var(--ink-soft); }
    .step-num {
      position: absolute;
      top: -4px; left: -4px;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      display: grid;
      place-items: center;
    }
    .step-body { padding-top: 8px; }
    .step-body h3 { font-size: 18px; margin-bottom: 8px; }
    .step-body p { font-size: 14px; color: var(--muted); max-width: 440px; }

    /* ---------- CTA banner ---------- */
    .cta {
      background: var(--cream-2);
      border-radius: var(--radius);
      padding: 28px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 90px;
    }
    .cta-left { display: flex; align-items: center; gap: 24px; }
    .cta-badge {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: var(--ink);
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .cta-badge svg { width: 24px; height: 24px; color: #fff; }
    .cta-left h3 { font-size: 16px; margin-bottom: 4px; }
    .cta-left p { font-size: 13px; color: var(--muted); }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--ink);
      color: var(--white);
      padding: 14px 26px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      transition: opacity 0.2s ease;
    }
    .btn:hover { opacity: 0.85; }
    .btn svg { width: 15px; height: 15px; }

   

    /* ---------- Responsive ---------- */
    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-img { min-height: 300px; }
      .foot { grid-template-columns: 1fr 1fr; }
      .cta { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 560px) {
      .nav-links { display: none; }
      .hero-copy h1 { font-size: 46px; }
      .steps-head h2 { font-size: 32px; }
      .step { grid-template-columns: 64px 1fr; gap: 18px; }
      .step-icon { width: 64px; height: 64px; }
      .step-icon svg { width: 30px; height: 30px; }
      .step:not(:last-child)::before { left: 31px; top: 64px; }
      .foot { grid-template-columns: 1fr; }
      .foot-bottom { flex-direction: column; gap: 8px; }
    }
  
@media screen and (min-width:1000px) {
    .wrap-column {
        display: grid;
        grid-template-columns: 2.4fr 3fr;
        gap: 50px;
        max-width: 1200px;
    }
}
.size-guide-img-col {
    max-width: 100%;
    width: 100%;
    height: 635px;
}
.size-guide-img-col img {
    width: 100%;
    height: 100%;
}