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

        :root {
          --cream: #f5f0e8;
          --cream-dark: #ede5d5;
          --warm-brown: #6b4f3a;
          --dark-brown: #3a2a1e;
          --forest-green: #3d5a3e;
          --forest-green-light: #4e7050;
          --burn-orange: #C15E22;
          --burn-orange-dark: #AE551F;
          --text-body: #5a4535;
          --text-light: #8a7060;
          --section-divider: #c8b89a;
          --error-color: #9a3a2a;
          --font-serif: 'Cormorant Garamond', Georgia, serif;
          --font-body: 'EB Garamond', Georgia, serif;
        }

        html { scroll-behavior: smooth; }
        body {
          font-family: var(--font-body);
          background-color: var(--cream-dark);
          color: var(--text-body);
          overflow-x: hidden;
        }

        /* ====== PAGE ====== */
        .page {
          margin-top: 61px;
          padding: 56px 24px 80px;
          max-width: 860px;
          margin-left: auto;
          margin-right: auto;
        }

        /* ====== TITLE ====== */
        .title-block {
          text-align: center;
          margin-bottom: 48px;
          animation: fadeUp 0.9s ease both;
        }
        .title-block h1 {
          font-family: var(--font-serif);
          font-size: clamp(2.2rem, 5vw, 3.2rem);
          font-weight: 400;
          color: var(--dark-brown);
          letter-spacing: 0.03em;
          margin-bottom: 0.2em;
        }
        .divider-dots {
          display: flex; align-items: center; justify-content: center;
          gap: 6px; margin: 14px 0 24px;
        }
        .divider-dots span {
          width: 5px; height: 5px; border-radius: 50%;
          background: var(--section-divider); display: block;
        }
        .divider-dots span:nth-child(2) { width: 4px; height: 4px; opacity: 0.6; }

        .divider-dots::before,
        .divider-dots::after {
          content: '';
          flex: 1;
          display: block;
          height: 1px;
          background: var(--section-divider);
          min-width: 100px;
        }

        .title-service {
            font-family: var(--font-serif);
            font-style: bold;
            font-size: clamp(1.2rem, 2.5vw, 1.5rem);
            color: var(--warm-brown);
            line-height: 1.6;
            margin-bottom: 0.35em;
        }

        .title-intro {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: clamp(1.05rem, 2vw, 1.3rem);
          color: var(--warm-brown);
          line-height: 1.6;
          margin-bottom: 0.35em;
        }
        .title-sub {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: clamp(0.95rem, 1.6vw, 1.1rem);
          color: var(--text-light);
          line-height: 1.65;
        }
        .title-sub strong { font-weight: 500; color: var(--text-body); font-style: normal; }

        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        /* ====== FORM CARD ====== */
        .form-card {
          background: #fff;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 8px 40px rgba(58,42,30,0.09);
          display: grid;
          grid-template-columns: 260px 1fr;
          animation: fadeUp 0.9s ease 0.15s both;
        }

        .form-image { position: relative; overflow: hidden; }
        .form-image img {
          width: 100%; height: 100%;
          object-fit: cover;
          object-position: center 20%;
          display: block;
          filter: sepia(0.1) brightness(0.93);
          transition: transform 0.6s ease;
        }
        .form-card:hover .form-image img { transform: scale(1.03); }

        .form-panel {
          padding: 36px 32px 40px;
          display: flex; flex-direction: column; gap: 20px;
        }

        /* ====== FIELDS ====== */
        .field-group { display: flex; flex-direction: column; gap: 7px; }

        .field-label {
          font-family: var(--font-body);
          font-size: 0.97rem;
          color: var(--text-body);
          letter-spacing: 0.03em;
        }
        .field-label .req { color: var(--error-color); margin-left: 2px; font-size: 0.85rem; }
        .field-label .opt { color: var(--text-light); font-size: 0.88rem; font-style: italic; }

        .field-input {
          width: 100%;
          padding: 12px 15px;
          background: var(--cream);
          border: 1.5px solid transparent;
          border-radius: 8px;
          font-family: var(--font-body);
          font-size: 1rem;
          color: var(--dark-brown);
          outline: none;
          transition: border-color 0.25s, box-shadow 0.25s, background 0.2s;
        }
        .field-input:focus {
          border-color: var(--section-divider);
          background: #fff;
          box-shadow: 0 0 0 3px rgba(200,184,154,0.2);
        }
        .field-input.has-error {
          border-color: var(--error-color);
          box-shadow: 0 0 0 3px rgba(154,58,42,0.1);
        }

        .field-error-msg {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: 0.82rem;
          color: var(--error-color);
          display: none;
        }
        .field-group.show-error .field-error-msg { display: block; }

        /* ====== CHECKBOX ====== */
        .checkbox-wrap {
          display: flex; align-items: flex-start; gap: 11px;
          cursor: pointer; user-select: none;
        }
        .checkbox-wrap input[type="checkbox"] {
          appearance: none; -webkit-appearance: none;
          width: 18px; height: 18px; min-width: 18px;
          border: 1.5px solid var(--section-divider);
          border-radius: 4px; background: var(--cream);
          cursor: pointer; position: relative; margin-top: 2px;
          transition: border-color 0.2s, background 0.2s;
        }
        .checkbox-wrap input[type="checkbox"]:checked {
          background: var(--forest-green);
          border-color: var(--forest-green);
        }
        .checkbox-wrap input[type="checkbox"]:checked::after {
          content: '';
          position: absolute;
          top: 2px; left: 5px;
          width: 5px; height: 8px;
          border: 1.5px solid #fff;
          border-top: none; border-left: none;
          transform: rotate(45deg);
        }
        .checkbox-wrap span {
          font-family: var(--font-body);
          font-size: 0.97rem;
          color: var(--text-body);
          line-height: 1.5;
        }

        /* ====== RADIO ====== */
        .radio-section { display: flex; flex-direction: column; gap: 11px; }
        .radio-title {
          font-family: var(--font-body);
          font-size: 0.97rem;
          color: var(--text-body);
          letter-spacing: 0.03em;
        }
        .radio-title .req { color: var(--error-color); margin-left: 2px; font-size: 0.85rem; }

        .radio-options { display: flex; flex-direction: column; gap: 10px; }
        .radio-option { display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
        .radio-option input[type="radio"] {
          appearance: none; -webkit-appearance: none;
          width: 18px; height: 18px; min-width: 18px;
          border: 1.5px solid var(--section-divider);
          border-radius: 50%; background: var(--cream);
          cursor: pointer; position: relative;
          transition: border-color 0.2s;
        }
        .radio-option input[type="radio"]:checked { border-color: var(--forest-green); }
        .radio-option input[type="radio"]:checked::after {
          content: '';
          position: absolute; top: 50%; left: 50%;
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--forest-green);
          transform: translate(-50%, -50%);
        }
        .radio-option span {
          font-family: var(--font-body);
          font-size: 0.97rem;
          color: var(--text-body);
        }
        .radio-error {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: 0.82rem;
          color: var(--error-color);
          display: none;
        }
        .radio-section.show-error .radio-error { display: block; }

        #grp-payment{
            margin-top: 20px;
        }

        /* ====== SUBMIT BTN ====== */
        .submit-btn {
          width: 100%;
          padding: 15px 28px;
          background: var(--burn-orange);
          color: #fff;
          font-family: var(--font-body);
          font-size: 1.05rem;
          letter-spacing: 0.08em;
          border: none; border-radius: 100px;
          cursor: pointer;
          transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
          box-shadow: 0 4px 20px rgba(61,90,62,0.25);
          position: relative; overflow: hidden;
          margin-top: 4px;
        }
        .submit-btn:hover {
          background: var(--burn-orange-dark);
          transform: translateY(-2px);
          box-shadow: 0 8px 28px rgba(61,90,62,0.3);
        }
        .submit-btn:active { transform: translateY(0); }
        .submit-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

        .btn-label { transition: opacity 0.2s; }
        .btn-spinner {
          display: none;
          position: absolute; top: 50%; left: 50%;
          transform: translate(-50%, -50%);
          width: 20px; height: 20px;
          border: 2px solid rgba(255,255,255,0.35);
          border-top-color: #fff;
          border-radius: 50%;
          animation: spin 0.7s linear infinite;
        }
        .submit-btn.loading .btn-label { opacity: 0; }
        .submit-btn.loading .btn-spinner { display: block; }

        @keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

        /* ====== SUCCESS STATE ====== */
        .success-panel {
          display: none;
          text-align: center;
          padding: 56px 32px;
          animation: fadeUp 0.6s ease both;
        }
        .success-panel.visible { display: block; }
        .success-icon { font-size: 2.8rem; margin-bottom: 16px; }
        .success-panel h2 {
          font-family: var(--font-serif);
          font-size: 1.9rem; font-weight: 400;
          color: var(--dark-brown); margin-bottom: 12px;
        }
        .success-panel p {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: 1.05rem;
          color: var(--text-light); line-height: 1.75;
        }

        /* ====== THANKS NOTE ====== */
        .form-thanks {
          text-align: center;
          margin-top: 18px;
          animation: fadeUp 0.9s ease 0.3s both;
        }
        .form-thanks p {
          font-family: var(--font-serif);
          font-style: italic;
          font-weight: bold;
          font-size: 1rem;
          color: var(--text-body);
        }

        /* ====== NEXT SECTION ====== */
        .next-section {
          margin-top: 56px;
          padding-top: 48px;
          border-top: 1px solid var(--section-divider);
          text-align: center;
          animation: fadeUp 0.9s ease 0.35s both;
        }
        .next-section h2 {
          font-family: var(--font-serif);
          font-size: clamp(1.3rem, 3vw, 1.9rem);
          font-weight: 400; color: var(--dark-brown);
          letter-spacing: 0.02em; line-height: 1.35;
          margin-bottom: 20px;
        }
        .next-section p {
          font-family: var(--font-body);
          font-size: clamp(0.97rem, 1.5vw, 1.07rem);
          color: var(--text-body);
          line-height: 1.85;
          max-width: 560px; margin: 0 auto;
        }
        .next-section p strong { font-weight: 500; color: var(--dark-brown); }
        .next-section p em { font-style: italic; }

        /* ====== RESPONSIVE ====== */
        @media (max-width: 767px) {
          .page { padding: 40px 16px 64px; }
          .form-card { grid-template-columns: 1fr; border-radius: 12px; }
          .form-image { aspect-ratio: 3/2; max-height: 200px; }
          .form-image img { object-position: center 30%; }
          .form-panel { padding: 26px 20px 30px; gap: 18px; }
          .next-section { margin-top: 40px; padding-top: 36px; }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
          .form-card { grid-template-columns: 200px 1fr; }
          .form-panel { padding: 30px 26px; }
        }

        @media (min-width: 1024px) {
          .page { padding: 64px 48px 80px; }
        }