@layer components {
    @scope (.form-contact-T01) {
        :scope {
            /* Container Query for fluid typography & spacing */
            container-type: inline-size;

            background-color: #ffffff;
            /* 16px -> 48px @ 320 -> 960 */
            margin: 0 auto;
        }

        .header {
            text-align: left;
            margin-bottom: clamp(1.5rem, 1rem + 2.5cqi, 2.5rem);
        }

        .description {
            /* 14px -> 16px @ 320 -> 960 */
            font-size: clamp(0.875rem, 0.8125rem + 0.3125cqi, 1rem);
            color: oklch(0.2 0.05 250);
            line-height: 1.8;
            text-wrap: pretty;
            font-weight: 600;
        }

        .form {
            display: grid;
            gap: clamp(1.5rem, 1rem + 2.5cqi, 2.5rem);
        }

        .group {
            display: grid;
            gap: 0.5rem;
        }

        .label {
            /* Responsive Font Size: 14px -> 16px (@ 375px -> 1200px) */
            font-size: clamp(0.875rem, 0.818rem + 0.242cqi, 1rem);
            font-weight: 600;
            color: oklch(0.3 0.03 250);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .input,
        .textarea {
            width: 100%;
            font-family: inherit;
            /* Responsive Font Size: 14px -> 16px (@ 375px -> 1200px) */
            font-size: clamp(0.875rem, 0.818rem + 0.242cqi, 1rem);
            padding: 0.75rem 1rem;
            border: none;
            /* border-radius: 4px; */
            background-color: oklch(94.81% 0 0);
            /* #EEEEEE */
            color: oklch(0.2 0.05 250);
            transition: box-shadow 0.2s ease, background-color 0.2s ease;
        }

        .textarea {
            resize: vertical;
            min-height: 180px;
            /* Modern property to allow textarea to fit its content initially */
            field-sizing: content;
        }

        .input:hover,
        .textarea:hover {
            background-color: oklch(0.9 0 0);
        }

        .input:focus-visible,
        .textarea:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px oklch(0.6 0.15 250 / 0.2);
            background-color: oklch(0.9 0 0);
        }

        .error-message {
            color: oklch(55% 0.2 25);
            /* Professional red */
            /* Responsive Font Size: 14px -> 16px (@ 375px -> 1200px) */
            font-size: clamp(0.875rem, 0.818rem + 0.242cqi, 1rem);
            font-weight: 600;
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;

            &::before {
                content: "!";
                display: grid;
                place-items: center;
                width: 1.25rem;
                height: 1.25rem;
                background-color: oklch(55% 0.2 25);
                color: #fff;
                border-radius: 50%;
                font-size: 0.75rem;
            }
        }

        .submit {
            text-align: center;
            margin-top: clamp(0.5rem, 0rem + 2.5cqi, 1.5rem);
        }

        .button-base-T01 {
            /* Responsive Min-Width: 120px -> 200px (@ 375px -> 1200px) */
            min-width: clamp(7.5rem, 5.227rem + 9.697cqi, 12.5rem); 
        }
    }
}