/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
body { -webkit-text-size-adjust: none; }

/* Box Model */
*, *:before, *:after { box-sizing: border-box; }

/* Basic */
@-ms-viewport { width: device-width; }
html { scroll-behavior: smooth; }
body { background: #ffffff; -ms-overflow-style: scrollbar; position: relative; padding-top: 4.5em; /* Adjusted for header height */ }
body.is-loading *, body.is-loading *:before, body.is-loading *:after { animation: none !important; transition: none !important; }

@media screen and (max-width: 480px) {
	html, body { min-width: 320px; }
}

/* Type */
body, input, select, textarea {
	font-family: "Lato", sans-serif;
	font-size: 13pt; /* Slightly smaller base */
	font-weight: 300;
	line-height: 1.75; /* Improved readability */
	color: #333333; /* Dark grey text */
}
a { color: #c88ea5; text-decoration: none; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; border-bottom: 1px dotted rgba(200, 142, 165, 0.5); /* Subtle underline */ }
a:hover { color: #333333; border-bottom-color: #333333; }
strong, b { font-weight: 700; color: #333333; }
em, i { font-style: italic; }
p { margin: 0 0 1.5em 0; }

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 1em 0;
	color: #4a3f4f; /* Dark Plum for headings */
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; border-bottom: none; }
h1 { font-size: 2.2em; letter-spacing: -0.01em; }
h2 { font-size: 1.8em; letter-spacing: -0.01em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; font-weight: 400; }
h6 { font-size: 0.9em; font-weight: 400; }

blockquote {
	border-left: 4px solid #c88ea5; /* Primary color */
	margin: 0 0 1.5em 0;
	padding: 0.5em 0 0.5em 1.5em;
	font-style: italic;
	color: #555;
}
blockquote footer { margin-top: 0.5em; font-style: normal; font-weight: bold; color: #333; }
blockquote footer:before { content: '— '; }

code { font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; background-color: #f1f1f1; border: 1px solid #ddd; border-radius: 3px; }
pre { font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0 1.5em 0; background-color: #f1f1f1; padding: 1em 1.5em; overflow-x: auto; border-radius: 3px; line-height: 1.6; }
pre code { border: none; background: none; padding: 0; margin: 0; }

hr { border: 0; border-bottom: 1px solid #dddddd; margin: 2em 0; }

/* Responsive Grid (KEEPING skel.js structure) */
.container { margin-left: auto; margin-right: auto; width: 65em; } /* Default width */
@media screen and (max-width: 1280px) { .container { width: 90%; max-width: 65em; } }
@media screen and (max-width: 980px) { .container { width: 90%; } }
@media screen and (max-width: 736px) { .container { width: 90% !important; } }
@media screen and (max-width: 480px) { .container { width: 90% !important; } }

.row { display: flex; flex-wrap: wrap; box-sizing: border-box; margin: 0 0 -1px -2em; /* Default Gutter */ }
.row > * { box-sizing: border-box; padding: 0 0 0 2em; /* Default Gutter */ }
.row.uniform { display:flex; flex-direction:column; }
.row.uniform > * { padding: 2em 0 0 2em; /* Default Gutter */ }
.row.uniform { margin: -2em 0 -1px -2em; /* Default Gutter */ }
/* Smaller gutter variations */
.row.\35 0\25 > * { padding: 0 0 0 1em; }
.row.\35 0\25 { margin: 0 0 -1px -1em; }
.row.uniform.\35 0\25 > * { padding: 1em 0 0 1em; }
.row.uniform.\35 0\25 { margin: -1em 0 -1px -1em; }
/* No gutter */
.row.\30 \25 > * { padding: 0; }
.row.\30 \25 { margin: 0 0 -1px 0; }
.row.uniform.\30 \25 > * { padding: 0; }
.row.uniform.\30 \25 { margin: 0 0 -1px 0; }

/* Grid Units (KEEP) */
.\31 2u { width: 100%; } .\31 1u { width: 91.66667%; } .\31 0u { width: 83.33333%; } .\39 u { width: 75%; } .\38 u { width: 66.66667%; } .\37 u { width: 58.33333%; } .\36 u { width: 50%; } .\35 u { width: 41.66667%; } .\34 u { width: 33.33333%; } .\33 u { width: 25%; } .\32 u { width: 16.66667%; } .\31 u { width: 8.33333%; }
.\31 2u\$, .\31 1u\$, .\31 0u\$, .\39 u\$, .\38 u\$, .\37 u\$, .\36 u\$, .\35 u\$, .\34 u\$, .\33 u\$, .\32 u\$, .\31 u\$ { clear: left; } /* $ suffix for clearing */

/* Responsive Units (KEEP) */
/* Medium */ @media screen and (max-width: 980px) { .row { margin: 0 0 -1px -1.5em; } .row > * { padding: 0 0 0 1.5em; } .row.uniform > * { padding: 1.5em 0 0 1.5em; } .row.uniform { margin: -1.5em 0 -1px -1.5em; } /* Halved Gutter */ .\31 2u\28medium\29 { width: 100% !important; margin-left: 0 !important; } .\36 u\28medium\29 { width: 50% !important; } .\34 u\28medium\29 { width: 33.33333% !important; } /* Add other common % if needed */ .\31 2u\$\28medium\29 { clear: left !important; } }
/* Small */ @media screen and (max-width: 736px) { .row { margin: 0 0 -1px -1.25em; } .row > * { padding: 0 0 0 1.25em; } .row.uniform > * { padding: 1.25em 0 0 1.25em; } .row.uniform { margin: -1.25em 0 -1px -1.25em; } /* Further Reduced Gutter */ .\31 2u\28small\29 { width: 100% !important; margin-left: 0 !important; } .\36 u\28small\29 { width: 50% !important; } /* Often used */ .\31 2u\$\28small\29 { clear: left !important; } }
/* XSmall */ @media screen and (max-width: 480px) { .row { margin: 0 0 -1px -1.25em; } .row > * { padding: 0 0 0 1.25em; } .row.uniform > * { padding: 1.25em 0 0 1.25em; } .row.uniform { margin: -1.25em 0 -1px -1.25em; } .\31 2u\28xsmall\29 { width: 100% !important; margin-left: 0 !important; } .\31 2u\$\28xsmall\29 { clear: left !important; } }

/* Section/Article */
section, article { margin: 0 0 2em 0; }
section > :last-child, article > :last-child { margin-bottom: 0; }
section.special, article.special { text-align: center; }
header.major { text-align: center; margin-bottom: 2em; }
header.major h1, header.major h2, header.major h3 { margin-bottom: 0.5em; }
header.major p { color: #777; font-size: 1.1em; margin-top: -0.5em; }

/* Image */
.image { border: 0; display: inline-block; position: relative; border-radius: 4px; /* Soft radius */ }
.image img { display: block; width: 100%; border-radius: 4px; }
.image.fit { display: block; width: 100%; margin: 0 0 1.5em 0; }
.image.left { float: left; margin: 0 1.5em 1em 0; max-width: 40%; }
.image.right { float: right; margin: 0 0 1em 1.5em; max-width: 40%; }
.image.main { display: block; width: 100%; margin: 0 0 2.5em 0; }

/* Lists */
ol { list-style: decimal; margin: 0 0 1.5em 0; padding-left: 1.25em; }
ol li { padding-left: 0.25em; }
ul { list-style: disc; margin: 0 0 1.5em 0; padding-left: 1em; }
ul li { padding-left: 0.5em; }
ul.alt { list-style: none; padding-left: 0; }
ul.alt li { border-top: 1px solid #dddddd; padding: 0.75em 0; }
ul.alt li:first-child { border-top: 0; padding-top: 0; }
ul.icons { list-style: none; padding-left: 0; cursor: default; margin: 0; }
ul.icons li { display: inline-block; padding: 0 0.75em 0 0; }
ul.icons li:last-child { padding-right: 0; }
ul.icons li .icon:before { font-size: 1.5em; } /* Slightly smaller icons */
ul.actions { list-style: none; padding-left: 0; cursor: default; margin: 0 0 1.5em 0; }
ul.actions li { display: inline-block; padding: 0 0.75em 0 0; vertical-align: middle; }
ul.actions li:last-child { padding-right: 0; }
ul.actions.vertical li { display: block; padding: 0.75em 0 0 0; }
ul.actions.vertical li:first-child { padding-top: 0; }
ul.actions.vertical li > * { margin-bottom: 0; }
ul.actions.fit { display: flex; width: 100%; }
ul.actions.fit li { flex: 1; padding: 0 0.5em 0 0; }
ul.actions.fit li:last-child { padding-right: 0; }
ul.actions.fit li > * { width: 100%; margin-bottom: 0; }

/* Table */
.table-wrapper { overflow-x: auto; margin: 0 0 1.5em 0; }
table { width: 100%; }
table tbody tr { border-bottom: 1px solid #dddddd; }
table tbody tr:nth-child(even) { background-color: #f8f8f8; /* Subtle striping */ }
table td { padding: 0.75em 0.75em; }
table th { font-size: 0.9em; font-weight: 700; padding: 0.75em 0.75em; text-align: left; color: #333333; }
table thead { border-bottom: 2px solid #aaaaaa; }
table tfoot { border-top: 2px solid #aaaaaa; }

/* Buttons */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
	appearance: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	border-radius: 4px; /* Softer corners */
	border: none;
	cursor: pointer;
	display: inline-block;
	font-size: 0.9em; /* Slightly larger base */
	font-weight: 700;
	height: 3.25em; /* Adjusted height */
	line-height: 3.25em;
	padding: 0 1.75em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	background-color: #4a3f4f; /* Dark plum */
	color: #ffffff !important; /* Ensure important for specificity */
    letter-spacing: 0.05em;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover {
	background-color: #5e5064; /* Lighter plum */
	color: #ffffff !important;
}
input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, button:active, .button:active {
	background-color: #3a313f; /* Darker plum */
}

/* Special Button (Primary Action) */
input[type="submit"].special, input[type="reset"].special, input[type="button"].special, button.special, .button.special {
	background-color: #c88ea5; /* Dusty Rose */
	color: #ffffff !important;
}
input[type="submit"].special:hover, input[type="reset"].special:hover, input[type="button"].special:hover, button.special:hover, .button.special:hover {
	background-color: #d19eaf; /* Lighter Dusty Rose */
}
input[type="submit"].special:active, input[type="reset"].special:active, input[type="button"].special:active, button.special:active, .button.special:active {
	background-color: #b87e97; /* Darker Dusty Rose */
}

/* Alt Button (Outline) */
input[type="submit"].alt, input[type="reset"].alt, input[type="button"].alt, button.alt, .button.alt {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px #dddddd; /* Grey outline */
	color: #4a3f4f !important; /* Dark plum text */
}
input[type="submit"].alt:hover, input[type="reset"].alt:hover, input[type="button"].alt:hover, button.alt:hover, .button.alt:hover {
	background-color: rgba(106, 77, 110, 0.05); /* Very light plum background */
	border-color: #c88ea5; /* Primary color outline */
    box-shadow: inset 0 0 0 2px #c88ea5;
    color: #c88ea5 !important;
}
input[type="submit"].alt:active, input[type="reset"].alt:active, input[type="button"].alt:active, button.alt:active, .button.alt:active {
	background-color: rgba(106, 77, 110, 0.1); /* Slightly darker light plum */
}

input[type="submit"].icon:before, input[type="reset"].icon:before, input[type="button"].icon:before, button.icon:before, .button.icon:before {
    margin-right: 0.5em;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
}
input[type="submit"].fit, input[type="reset"].fit, input[type="button"].fit, button.fit, .button.fit { display: block; width: 100%; margin: 0 0 1em 0; }
input[type="submit"].small, input[type="reset"].small, input[type="button"].small, button.small, .button.small { font-size: 0.8em; height: 2.75em; line-height: 2.75em; padding: 0 1.25em; }
input[type="submit"].disabled, input[type="submit"]:disabled, input[type="reset"].disabled, input[type="reset"]:disabled, input[type="button"].disabled, input[type="button"]:disabled, button.disabled, button:disabled, .button.disabled, .button:disabled { pointer-events: none; opacity: 0.5; }

/* Forms */
form { margin: 0 0 2em 0; }
label {
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    margin: 0 0 0.75em 0;
    color: #4a3f4f; /* Dark Plum */
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
    appearance: none;
    background: #fdfdfd; /* Slightly off-white background */
    border: 1px solid #cccccc; /* Slightly softer border */
    border-radius: 5px; /* Slightly more rounded */
    color: inherit;
    display: block;
    outline: 0;
    padding: 0.75em 1em; /* Adjusted padding */
    text-decoration: none;
    width: 100%;
    height: 3em; /* Slightly taller inputs */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    font-size: 0.95em; /* Slightly larger input text */
    /* Remove margin-bottom here, let row padding handle it */
}
textarea {
    padding: 0.75em 1em;
    line-height: 1.6;
    height: auto;
    min-height: 8em;
}
select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.4,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.4,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3C8.2,11.9,8.5,11.7,8.9,11.7C9.3,11.7,9.6,11.9,9.4,12.3z' fill='%23aaaaaa' /%3E%3C/svg%3E"); /* Slightly darker arrow */
    background-position: right 0.75em center;
    background-repeat: no-repeat;
    background-size: 1.25em;
    padding-right: 2.5em;
    text-overflow: ellipsis;
    height: 3em; /* Match other inputs */
}
select option {
    color: #333333;
    background: #ffffff;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: #c88ea5; /* Primary color focus */
    box-shadow: 0 0 0 2px rgba(200, 142, 165, 0.25); /* Subtle focus shadow */
}

/* Checkboxes and Radio Buttons (Optional: Keep existing or use improved style) */
input[type="checkbox"], input[type="radio"] {
    opacity: 0; position: absolute; z-index: -1; width: 1px; height: 1px; overflow: hidden; /* Hide visually but keep accessible */
}
input[type="checkbox"] + label, input[type="radio"] + label {
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: 300; /* Match body text */
    line-height: 1.65em; /* Align with custom box */
    padding-left: 2.5em; /* Increased padding */
    position: relative;
    margin-right: 1em; /* Space between options */
    margin-bottom: 0.5em; /* Space below options */
    color: #333; /* Ensure label text color is clear */
}
input[type="checkbox"] + label:before, input[type="radio"] + label:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0; /* Align top */
    width: 1.65em;
    height: 1.65em;
    border: 1px solid #cccccc;
    background: #fdfdfd;
    border-radius: 4px; /* Slightly rounded */
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="radio"] + label:before {
    border-radius: 50%; /* Keep radios round */
}
input[type="checkbox"]:checked + label:before {
    background-color: #c88ea5;
    border-color: #c88ea5;
    color: #ffffff;
    content: '\f00c'; /* Checkmark */
    font-family: FontAwesome;
    text-align: center;
    line-height: 1.65em; /* Vertically center icon */
    font-size: 0.9em;
}
input[type="radio"]:checked + label:before {
    background-color: #fdfdfd; /* Keep background light */
    border-color: #c88ea5;
    color: #c88ea5; /* Use accent color for dot */
    content: '\f111'; /* Circle (dot) */
    font-family: FontAwesome;
    text-align: center;
    line-height: 1.65em; /* Vertically center icon */
    font-size: 0.7em; /* Adjust dot size */
}
input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before {
    border-color: #c88ea5;
    box-shadow: 0 0 0 2px rgba(200, 142, 165, 0.25); /* Focus outline */
}

/* Placeholder Text */
::-webkit-input-placeholder { color: #aaaaaa !important; opacity: 1.0; }
:-moz-placeholder { color: #aaaaaa !important; opacity: 1.0; }
::-moz-placeholder { color: #aaaaaa !important; opacity: 1.0; }
:-ms-input-placeholder { color: #aaaaaa !important; opacity: 1.0; }

/* General Form Row Adjustments (For forms NOT in .landing-form-section) */
form:not(.landing-form-section form) .row.uniform > * { /* Reduce top padding in uniform rows */
    padding-top: 1em;
}
form:not(.landing-form-section form) .row.uniform { /* Adjust negative margin for reduced padding */
    margin-top: -1em;
}
form:not(.landing-form-section form) input,
form:not(.landing-form-section form) select,
form:not(.landing-form-section form) textarea {
    margin-bottom: 1em; /* Add default space below fields outside landing forms */
}
form:not(.landing-form-section form) button[type="submit"],
form:not(.landing-form-section form) .button[type="submit"] {
    margin-top: 1em; /* Add space above submit button */
}
@media screen and (max-width: 480px) {
    form:not(.landing-form-section form) .row.uniform > * { /* Reduce padding further on xsmall */
        padding-top: 0.75em;
    }
    form:not(.landing-form-section form) .row.uniform {
        margin-top: -0.75em;
    }
    form:not(.landing-form-section form) input,
    form:not(.landing-form-section form) select,
    form:not(.landing-form-section form) textarea {
         margin-bottom: 0.75em; /* Adjust space below fields */
    }
}

/* Landing Page Form Specific Styles */
.landing-form-section {
    background-color: #f8f8f8; /* Slightly different background */
    padding: 2em;
    border-radius: 6px;
    margin-top: 0; /* Remove top margin if it's inside a column */
    margin-bottom: 0; /* Remove bottom margin if it's inside a column */
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.landing-form-section h3 {
    margin-top: 0;
    margin-bottom: 1.5em;
    text-align: center;
    color: #4a3f4f;
    font-weight: 700;
    line-height: 1.3;
}

/* Ensure landing form uses the 50% gutter row correctly */
.landing-form-section form .row.uniform.\35 0\25 {
    margin: -1em 0 -1px -1em; /* Negative margin for 50% gutter */
}
.landing-form-section form .row.uniform.\35 0\25 > * {
    padding: 1em 0 0 1em; /* Top and left padding for 50% gutter */
}

/* Ensure inputs within landing form rows don't have extra margin */
.landing-form-section form .row > * > input,
.landing-form-section form .row > * > select,
.landing-form-section form .row > * > textarea {
    margin-bottom: 0; /* Remove margin, rely on row padding */
}

.landing-form-section textarea {
    min-height: 6em;
}

/* Adjust spacing for the submit button container in landing forms */
 .landing-form-section .actions {
    margin-top: 1.5em; /* Space above the button */
    margin-bottom: 0;
 }
 .landing-form-section .actions li {
     padding: 0;
 }
 .landing-form-section .button.fit {
     margin: 0;
 }

 /* Slightly darker placeholders for landing form */
 .landing-form-section ::-webkit-input-placeholder { color: #999999 !important; }
 .landing-form-section :-moz-placeholder { color: #999999 !important; }
 .landing-form-section ::-moz-placeholder { color: #999999 !important; }
 .landing-form-section :-ms-input-placeholder { color: #999999 !important; }

/* Responsive adjustments for landing form */
@media screen and (max-width: 736px) {
    .landing-form-section {
        padding: 1.5em;
    }
    .landing-form-section h3 {
        margin-bottom: 1.2em;
    }
     .landing-form-section .row.uniform.\35 0\25 > * {
         padding-top: 1em; /* Adjust padding if needed, but 12u$(xsmall) usually handles layout */
     }
     .landing-form-section .row.uniform.\35 0\25 {
         /* Adjust negative margin if padding changes */
     }
     .landing-form-section .actions {
          margin-top: 1.25em; /* Adjust button spacing */
     }
}
/* Force landing page form Name/Email fields to stack on xsmall */
@media screen and (max-width: 480px) {
    .landing-form-section form .row.uniform {
        width: 100% !important; /* Override 6u */
        margin-left: 0 !important;
        clear: none !important; /* Prevent clearing issues */
    }
     .landing-form-section form .row.uniform {
        width: 100% !important;
        margin-left: 0 !important;
        clear: none !important;
    }
    .landing-form-section form .row.uniform.\35 0\25 {
        margin: -1em 0 -1px -1em; /* Keep consistent negative margin */
    }
    .landing-form-section form .row.uniform.\35 0\25 > * {
         padding: 1em 0 0 1em; /* Keep consistent padding */
    }
     .landing-form-section textarea {
        min-height: 5em; /* Slightly smaller on mobile */
    }
}


/* Header */
#header {
	background: #ffffff; /* White background */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	color: #333333; /* Dark text */
	cursor: default;
	height: 4.5em; /* Slightly shorter */
	line-height: 4.5em;
	position: fixed;
	left: 0; top: 0; width: 100%;
	z-index: 10001;
}
#header .inner { max-width: 65em; width: calc(100% - 4em); margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: space-between; }
#header .logo { color: #c88ea5; /* Primary color logo */ font-size: 1.5em; font-weight: 700; height: inherit; line-height: inherit; margin: 0; padding: 0; text-decoration: none; border-bottom: none; }
#header nav a { color: #555555; display: inline-block; padding: 0 1em; text-decoration: none; font-weight: 700; font-size: 0.9em; text-transform: uppercase; border-bottom: none; }
#header nav a:hover { color: #c88ea5; }
#header nav a:last-child { padding-right: 0; }

@media screen and (max-width: 980px) {
	#header nav { display: none; }
}
@media screen and (max-width: 736px) {
	#header .inner { width: calc(100% - 2em); }
    #header nav a { padding: 0 0.5em; }
    #header .logo { font-size: 1.25em; }
}

/* Nav Panel Toggle */
.navPanelToggle {
	position: fixed; text-decoration: none; height: 4em; right: 1em; top: 0.25em; width: 4em; display: none; z-index: 10002; border: none;
}
.navPanelToggle .fa-bars { color: #4a3f4f; font-size: 1.5em; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media screen and (max-width: 980px) { .navPanelToggle { display: block; } }

/* Nav Panel */
#navPanel {
	transform: translateX(20em);
	transition: transform 0.3s ease, visibility 0.3s ease;
	visibility: hidden;
	overflow-y: auto;
	position: fixed; right: 0; top: 0;
	background: #4a3f4f; /* Dark plum */
	color: #ffffff;
	height: 100%; max-width: 80%; width: 18em; /* Slightly narrower */
	padding: 1.5em;
	z-index: 10003;
	display: none; /* Initially hidden, skel toggles */
}
#navPanel.visible { transform: translateX(0); visibility: visible; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); }
#navPanel a { border-top: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; font-weight: 700; display: block; padding: 0.75em 0; text-decoration: none; border-bottom: none; font-size: 0.9em; text-transform: uppercase; }
#navPanel a:first-child { border-top: none; }
#navPanel a:hover { color: rgba(255, 255, 255, 0.8); }
#navPanel .close {
	text-decoration: none; transition: color 0.2s ease-in-out; border: 0; color: rgba(255, 255, 255, 0.5); cursor: pointer;
	display: block; height: 4em; position: absolute; right: 0; text-align: right; top: 0; width: 4em; padding-right: 1.25em;
}
#navPanel .close:before { content: '\f00d'; font-family: FontAwesome; width: 3em; height: 3em; line-height: 3em; display: block; position: absolute; right: 0.25em; top: 0.25em; text-align: center; font-size: 1.25em; }
#navPanel .close:hover { color: #ffffff; }
@media screen and (max-width: 980px) { #navPanel { display: block; } }


/* Banner */
#banner {
	background-color: #4a3f4f; /* Fallback color */
	color: #ffffff;
	padding: 8em 0 6em 0; /* Reduced padding */
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../../assets/images/banners/mainPageBanner.webp"); /* Overlay + image */
	background-size: cover;
	background-position: center center;
	text-align: center; /* Center align banner content */
	position: relative;
	z-index: 999; /* Below header */
}
#banner .inner { max-width: 55em; width: calc(100% - 4em); margin: 0 auto; position: relative; z-index: 2; }
#banner h1 { color: #ffffff; font-size: 2.5em; margin: 0 0 0.5em 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
#banner h1 span { font-weight: 300; /* Lighter weight for span */ }
#banner p { color: rgba(255, 255, 255, 0.9); font-size: 1.2em; margin-bottom: 1.5em; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); }
#banner .button.alt { background: transparent; box-shadow: inset 0 0 0 2px #ffffff; color: #ffffff !important; }
#banner .button.alt:hover { background: rgba(255, 255, 255, 0.1); }

@media screen and (max-width: 736px) {
	#banner { padding: 5em 0 3em 0; }
	#banner h1 { font-size: 1.8em; }
	#banner p { font-size: 1em; }
    #banner .inner { width: calc(100% - 2em); }
}

/* Main Content Sections */
#main { padding: 4em 0 2em 0; background-color: #ffffff; }
#one { padding: 4em 0 2em 0; background-color: #ffffff; } /* Example sections */
#two { padding: 4em 0 2em 0; background-color: #f8f8f8; /* Light grey background */ }
#three { padding: 4em 0 2em 0; background-color: #ffffff; }

/* Specific section content (example for #two if using flex) */
#two .inner { display: flex; flex-wrap: wrap; }
#two .inner article { padding: 2em; width: 50%; }
@media screen and (max-width: 980px) {
    #two .inner article { width: 100%; padding: 1.5em 0; }
    #two .inner article:first-child { padding-bottom: 1em; }
    #two .inner article:last-child { padding-top: 1em; }
}

/* Footer */
#footer {
	background-color: #4a3f4f; /* Dark Plum */
	color: rgba(255, 255, 255, 0.6); /* Lighter text for contrast */
	padding: 4em 0 2em 0;
    margin-bottom: 0em;
}
#footer .inner { max-width: 65em; width: calc(100% - 4em); margin: 0 auto; }
#footer h4 { color: #ffffff; margin-bottom: 1em; }
#footer ul { list-style: none; padding-left: 0; margin-bottom: 1.5em; }
#footer ul li { padding: 0.25em 0; }
#footer a { color: #d4af7a; /* Soft Gold links */ border-bottom-color: rgba(212, 175, 122, 0.4); }
#footer a { color: #d4af7a; /* Soft Gold links */ border-bottom-color: rgba(212, 175, 122, 0.4); }
#footer a:hover { color: #ffffff; border-bottom-color: #ffffff; }
#footer .icons a { border-bottom: none; }

/* --- Apply Font Awesome font explicitly to footer icons --- */
#footer .icons a .icon:before {
	font-family: FontAwesome !important; /* Force FontAwesome font */
	font-style: normal;        /* Ensure not italic */
    font-weight: normal;       /* Ensure not bold */
    display: inline-block;     /* Needed for rendering */
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	/* Existing styles below */
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.2s ease;
}
/* --- End explicit FA application --- */

#footer .icons a:hover .icon:before {
	color: #ffffff;
}

/* You might also want to ensure the base icon class has Font Awesome if the above isn't enough */
/*
#footer .icons .icon.fa {
    font-family: FontAwesome !important;
}
*/
#footer label { color: #ffffff; }
#footer input[type="email"] { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; margin-bottom: 1em; /* Ensure spacing */ }
#footer input[type="email"]:focus { border-color: #d4af7a; box-shadow: 0 0 0 1px #d4af7a; }
#footer ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.4) !important; }
#footer :-moz-placeholder { color: rgba(255, 255, 255, 0.4) !important; }
#footer ::-moz-placeholder { color: rgba(255, 255, 255, 0.4) !important; }
#footer :-ms-input-placeholder { color: rgba(255, 255, 255, 0.4) !important; }
#footer .button.alt { background-color: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3); color: #ffffff !important; }
#footer .button.alt:hover { background-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 2px #ffffff; }
#footer .copyright { font-size: 0.8em; text-align: center; color: rgba(255, 255, 255, 0.4); margin-top: 3em; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2em; }
#footer .copyright a { color: rgba(255, 255, 255, 0.4); }
#footer .copyright a:hover { color: #ffffff; }

@media screen and (max-width: 736px) {
    #footer { padding: 3em 0 1.5em 0; }
    #footer .inner { width: calc(100% - 2em); }
    #footer .copyright { margin-top: 2em; padding-top: 1.5em; }
}

/* Landing Page Hero Section */
#landing-hero {
	color: #ffffff;
	padding: 6em 0 4em 0;
	text-align: center;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Specific Backgrounds for Each Landing Page Hero */
body.landing-eyebrows #landing-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/banners/genericPageBanner.webp'); }
body.landing-lips #landing-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/banners/genericPageBanner (1).webp'); }
body.landing-eyeliner #landing-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/banners/genericPageBanner.jpg'); }
body.landing-facial-shading #landing-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/banners/genericPageBanner.webp'); }
body.landing-paramedical #landing-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/banners/genericPageBanner (1).webp'); }
body.landing-training #landing-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/banners/genericPageBanner.jpg'); }
body.landing-general-pmu #landing-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/banners/genericPageBanner.webp'); }
body.landing-correction-removal #landing-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/banners/genericPageBanner (1).webp'); }

#landing-hero .inner { position: relative; z-index: 2; max-width: 55em; margin: 0 auto; width: calc(100% - 4em); }
#landing-hero h1 { color: #ffffff; font-size: 2.5em; margin-bottom: 0.5em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); }
#landing-hero p { color: rgba(255, 255, 255, 0.9); font-size: 1.2em; margin-bottom: 1.5em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
#landing-hero .actions { margin-top: 1em; }
/* Button styles already defined should work, ensure .special has correct primary color */

/* Landing Page Content Adjustments */
#main.landing-content { padding-top: 3em; padding-bottom: 3em; }
body.landing-page #banner { display: none; } /* Hide default banner on landing pages */

.gallery-section h3 { text-align: center; margin-bottom: 1.5em; }

/* Utility Classes */
.text-center { text-align: center; }

@media screen and (max-width: 736px) {
	#landing-hero { padding: 4em 0 3em 0; }
	#landing-hero h1 { font-size: 2em; }
	#landing-hero p { font-size: 1em; }
    #main.landing-content { padding-top: 2em; padding-bottom: 2em; }
    body, input, select, textarea { font-size: 12pt; } /* Consistent mobile font size */
}


/* --- Content Max Width and Padding --- */

/* Apply to the .inner container within main content sections */
#main > .inner,
#one > .inner,    /* Target specific known section IDs if needed */
#two > .inner,
#three > .inner,
section:not(#landing-hero):not(#footer):not(#banner) > .inner { /* General rule for sections, excluding header/hero/footer */
	max-width: 68em;  /* Limits maximum content width (adjust as needed, e.g., 65em, 70em) */
	width: 100%;      /* Use available width up to max-width */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5em; /* Horizontal padding */
	padding-right: 1.5em; /* Horizontal padding */
}

/* Responsive Adjustments for Padding */
@media screen and (max-width: 736px) {
	#main > .inner,
	#one > .inner,
	#two > .inner,
	#three > .inner,
    section:not(#landing-hero):not(#footer):not(#banner) > .inner {
		padding-left: 1em; /* Slightly reduce padding on smaller screens */
		padding-right: 1em;
	}
}

/* Ensure sections themselves don't have conflicting horizontal padding */
section {
    padding-left: 0;
    padding-right: 0;
}
/* Re-apply specific padding for known sections if needed */
#main { padding: 4em 0 2em 0; } /* Keep vertical padding */
#one { padding: 4em 0 2em 0; }
#two { padding: 4em 0 2em 0; background-color: #f8f8f8; }
#three { padding: 4em 0 2em 0; }
#main.landing-content { padding-top: 3em; padding-bottom: 3em; } /* Landing page vertical */

/* Ensure header/banner/footer maintain their own specific inner styles */
#header .inner { max-width: 65em; width: calc(100% - 4em); margin: 0 auto; padding-left: 0; padding-right: 0; } /* Reset padding */
#banner .inner { max-width: 55em; width: calc(100% - 4em); margin: 0 auto; padding-left: 0; padding-right: 0; } /* Reset padding */
#footer .inner { max-width: 65em; width: calc(100% - 4em); margin: 0 auto; padding-left: 0; padding-right: 0; } /* Reset padding */

@media screen and (max-width: 736px) {
    #header .inner { width: calc(100% - 2em); }
    #banner .inner { width: calc(100% - 2em); }
    #footer .inner { width: calc(100% - 2em); }
}



/* --- Image Gallery --- */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em; /* Space between images */
    margin: 0 0 1.5em 0; /* Bottom margin for the gallery container */
    padding: 0; /* Reset default padding */
    list-style: none; /* Remove list style if you were using <ul> */
}

.image-gallery .gallery-item {
    flex: 1 1 calc(33.333% - 1em); /* Default: 3 columns. Calculation accounts for gap. */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    margin-bottom: 0; /* Remove any potential extra bottom margin from child elements */
}

/* Style for the image container within a gallery item */
.image-gallery .gallery-item .image.fit {
    margin-bottom: 0; /* Remove default margin from .image.fit */
    display: block; /* Ensure it behaves as a block */
    line-height: 0; /* Remove extra space below image */
}

/* Style for the image itself */
.image-gallery .gallery-item .image.fit img {
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Optional: match existing image style */
    object-fit: cover; /* Ensures images cover the area, might crop slightly */
    aspect-ratio: 1 / 1; /* Optional: Enforce square aspect ratio, adjust if needed */
}

/* Optional: Remove styling from .box.alt if it interferes with the gallery layout */
.box.alt.gallery-box {
    padding: 0;
    margin: 0 0 1.5em 0;
    border: none;
    background: none;
    box-shadow: none;
}


/* --- Responsive adjustments for gallery --- */

/* Medium screens (e.g., tablets) */
@media screen and (max-width: 980px) {
    .image-gallery .gallery-item {
        flex-basis: calc(50% - 0.75em); /* 2 columns */
    }
    .image-gallery {
        gap: 1.25em; /* Adjust gap */
    }
}

/* Small screens (e.g., large phones) */
@media screen and (max-width: 736px) {
     /* Keep 2 columns, or switch to 1 if preferred */
      .image-gallery {
        gap: 1em; /* Adjust gap */
    }
     .image-gallery .gallery-item .image.fit img {
        aspect-ratio: 4 / 3; /* Adjust aspect ratio for smaller screens if needed */
    }
}

/* Extra small screens (e.g., phones) */
@media screen and (max-width: 480px) {
    .image-gallery .gallery-item {
        flex-basis: 100%; /* 1 column */
    }
     .image-gallery {
        gap: 1em; /* Adjust gap */
    }
    .image-gallery .gallery-item .image.fit img {
        aspect-ratio: 16 / 10; /* Adjust aspect ratio */
    }
}


/* --- Form Input Width Fix --- */
/* Ensure inputs/selects/textareas fill their column container within form rows */
form .row > div[class*="u"] > input[type="text"],
form .row > div[class*="u"] > input[type="password"],
form .row > div[class*="u"] > input[type="email"],
form .row > div[class*="u"] > input[type="tel"],
form .row > div[class*="u"] > select,
form .row > div[class*="u"] > textarea {
    width: 100%;
    box-sizing: border-box; /* Ensure padding/border are included in the 100% width */
    vertical-align: top; /* Align elements consistently if heights differ slightly */
}

/* Remove default bottom margin added outside landing forms if it causes issues within rows */
form:not(.landing-form-section form) .row input,
form:not(.landing-form-section form) .row select,
form:not(.landing-form-section form) .row textarea {
    margin-bottom: 0; /* Let row padding handle vertical spacing */
}

/* Ensure the container divs themselves don't collapse unexpectedly */
form .row > div[class*="u"] {
    display: inline-block; /* Or flex, depending on exact layout needs, but inline-block often works */
    vertical-align: top;
    width: auto; /* Let grid classes control width */
}

/* Reset display for specific form layouts if needed */
form .row.uniform > div[class*="u"] {
     display: block; /* Rows in uniform context usually stack */
}

/* Ensure visible labels on contact form don't prevent input width */
#main form label {
    margin-bottom: 0.5em; /* Adjust spacing if needed */
}

/* ============================================= */
/* Contact Page Form Layout Override             */
/* ============================================= */

/* Ensure the wrapper column itself has no inherent padding issues */
#main .row > .form-column-wrapper {
	padding-left: 0 !important; /* Remove gutter padding */
    /* Ensure it behaves like a block container */
    display: block !important;
    width: 66.66667% !important; /* Explicitly set width based on 8u */
}

/* Target the container where the form is loaded */
#contact-form-container {
    padding: 0 !important; /* Remove any potential padding on the container itself */
}

/* Target the form's internal row */
#contact-form-container form .row.uniform.\35 0\25 {
	margin-left: 0 !important; /* Remove negative left margin */
    /* You might still need top margin for spacing between rows */
    /* margin-top: -1em; */
}

/* Target the columns (6u, 12u, etc.) INSIDE the form's row */
#contact-form-container form .row.uniform.\35 0\25 > * {
	padding-left: 0 !important; /* Remove the internal left padding */
	padding-right: 0 !important; /* Also remove right padding just in case */
    /* Re-apply top padding for vertical spacing */
    padding-top: 1em !important;
    padding-bottom: 0 !important; /* Remove bottom padding */
}

/* Ensure inputs/textarea fill 100% of their parent column */
#contact-form-container input[type="text"],
#contact-form-container input[type="email"],
#contact-form-container input[type="tel"],
#contact-form-container input[type="password"],
#contact-form-container textarea,
#contact-form-container select {
	width: 100% !important;
    box-sizing: border-box !important; /* Include padding/border in width */
}

/* Responsive adjustments */
@media screen and (max-width: 980px) {
	#main .row > .form-column-wrapper {
		width: 100% !important; /* Becomes full width */
		padding-left: 0 !important; /* Ensure padding is still removed */
        margin-left: 0 !important; /* Reset margin */
	}
    #contact-form-container form .row.uniform.\35 0\25 > * {
        padding-top: 1.5em !important; /* Adjust spacing if needed for medium */
    }
}

@media screen and (max-width: 736px) {
    #contact-form-container form .row.uniform.\35 0\25 > * {
        padding-top: 1.25em !important; /* Adjust spacing if needed for small */
    }
}

@media screen and (max-width: 480px) {
     /* Ensure xsmall stacking works correctly without horizontal padding */
     #contact-form-container form .row.uniform.\35 0\25 > div[class*="u"] {
         padding-left: 0 !important;
         padding-right: 0 !important;
         padding-top: 1.25em !important; /* Adjust top padding for xsmall stack */
     }
     /* Ensure 6u columns become full width */
      #contact-form-container form .row.uniformu,
      #contact-form-container form .row.uniform {
        width: 100% !important;
        margin-left: 0 !important;
      }
}


#top-cta-bar {
    background-color: #c88ea5; /* Dusty Rose - Primary Accent */
    color: #ffffff;
    text-align: center;
    padding: 0.6em 1em; /* Adjust padding as needed */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10002; /* Above content, below nav panel */
    font-size: 0.95em;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.02em;
    line-height: 1.4; /* Ensure text wraps cleanly if needed */
}

#top-cta-bar a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

#top-cta-bar a:hover {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.85);
}

/* Adjust header position to be below the CTA bar */
#header {
    /* Calculated CTA bar height: 0.6em + 0.6em + (1.4 * 0.95em) = 1.2em + 1.33em = 2.53em */
    top: 2.53em; /* Position header directly below calculated CTA height */
}

/* Adjust main content padding to account for BOTH bars */
body {
    /* Header height (4.5em) + CTA bar height (2.53em) = 7.03em */
    padding-top: 7.03em; /* Increase padding to clear both bars */
}

/* Adjust Nav Panel Toggle position */
.navPanelToggle {
     /* Align with header top (2.53em) + existing offset (0.25em) = 2.78em */
     top: 2.78em;
}

/* Adjust Nav Panel position */
#navPanel {
	top: 2.53em; /* Start below the CTA bar */
    height: calc(100% - 2.53em); /* Adjust height */
}


/* Responsive Adjustments for CTA Bar */
@media screen and (max-width: 736px) {
     /* Mobile CTA bar height: 0.7em + 0.7em + (1.4 * 0.9em) = 1.4em + 1.26em = 2.66em */
     #top-cta-bar {
        padding: 0.7em 0.5em;
        font-size: 0.9em;
     }
     #header {
        top: 2.66em;
     }
      body {
        /* Mobile header height (4.5em) + mobile CTA height (2.66em) = 7.16em */
        padding-top: 7.16em;
      }
       .navPanelToggle {
           /* Align with header top (2.66em) + existing offset (0.25em) = 2.91em */
           top: 2.91em;
       }
        #navPanel {
            top: 2.66em;
            height: calc(100% - 2.66em);
        }
}
@media screen and (max-width: 480px) {
     /* XSmall CTA bar height: 0.8em + 0.8em + (1.4 * 0.85em) = 1.6em + 1.19em = 2.79em */
     #top-cta-bar {
        padding: 0.8em 0.5em;
        font-size: 0.85em;
     }
      #header {
        top: 2.79em;
      }
       body {
        /* XSmall header height (4.5em) + xsmall CTA height (2.79em) = 7.29em */
        padding-top: 7.29em;
       }
       .navPanelToggle {
           /* Align with header top (2.79em) + existing offset (0.25em) = 3.04em */
           top: 3.04em;
       }
         #navPanel {
            top: 2.79em;
            height: calc(100% - 2.79em);
        }
}

/* --- Social Proof Section --- Enhanced UI/UX --- */
.social-proof-section {
    padding: 4em 0 4em 0; /* Increased padding */
    background-color: #f7f7f9; /* Slightly different light background */
    /* Optional subtle pattern/gradient: */
    /* background-image: linear-gradient(135deg, #f7f7f9 0%, #fdfdfd 100%); */
}

.social-proof-section .inner {
    max-width: 70em; /* Slightly wider container */
}

.social-proof-section .major.special h2 {
    color: #4a3f4f; /* Use main heading color */
    margin-bottom: 0.25em;
}
.social-proof-section .major.special p {
    font-size: 1.1em;
    color: #666;
}

.reviews-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2em; /* Increased gap */
    justify-content: center;
    margin-bottom: 3em;
}

.platform-reviews-container {
    flex: 1 1 320px; /* Base size, allow growing */
    max-width: calc(33.333% - 1.34em); /* Adjust calc for new gap */
    background-color: #ffffff;
    border-radius: 8px; /* Smoother radius */
    border: 1px solid #e0e0e0;
    border-top-width: 4px; /* Thicker top border for branding */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Enhanced shadow */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden; /* Clip content if needed */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.platform-reviews-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Platform specific top borders */
.platform-reviews-container.google-card { border-top-color: #DB4437; }
.platform-reviews-container.yelp-card { border-top-color: #d32323; }
.platform-reviews-container.facebook-card { border-top-color: #3b5998; }

.review-source {
    font-weight: 700;
    font-size: 1.1em;
    padding: 1em 1.5em 0.75em 1.5em; /* Adjusted padding */
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #fafafa; /* Slight header background */
    border-radius: 8px 8px 0 0; /* Match top radius, remove bottom */
}
/* Platform specific header text colors */
.review-source.google > div:first-child { color: #DB4437; }
.review-source.yelp > div:first-child { color: #d32323; }
.review-source.facebook > div:first-child { color: #3b5998; }

.review-source > div:first-child { /* Platform title */
     display: flex;
     align-items: center;
     margin-bottom: 0.5em;
     font-size: 1.05em; /* Slightly larger title */
}

.review-source .fa { /* Platform icon */
    margin-right: 0.6em;
    font-size: 1.25em; /* Larger platform icon */
    min-width: 1.25em;
}

/* Rating Display styling */
.rating-display {
    font-size: 0.9em;
    font-weight: normal;
    color: #555;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.rating-display .stars {
    margin-right: 0.6em;
    color: #f0ad4e; /* Gold color for stars */
    letter-spacing: 2px;
}

/* --- Apply Font Awesome font explicitly to star icons --- */
.rating-display .stars .fa {
    font-family: FontAwesome !important; /* Force FontAwesome font */
    font-size: 1.2em;          /* Control star size */
    font-style: normal;        /* Ensure not italic */
    font-weight: normal;       /* Ensure not bold */
    display: inline-block;     /* Needed for rendering */
    line-height: 1;            /* Consistent line height */
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0; /* Reset margin */
}
/* --- End explicit FA application --- */


/* Ensure correct FA characters display (These might be redundant if above works, but keep for safety) */
.rating-display .stars .fa-star::before { content: "\f005"; }
.rating-display .stars .fa-star-half-o::before { content: "\f123"; }
.rating-display .stars .fa-star-o::before { content: "\f006"; } /* Empty star if needed */

.rating-display .rating-value {
    font-weight: 600;
    margin-right: 0.5em;
    color: #333;
}
.rating-display .review-count {
    font-size: 0.9em;
    color: #777;
}


/* Fixed Height Content Area */
.review-content-area {
    padding: 1.5em; /* Padding for the text */
    flex-grow: 1; /* Allow this area to grow */
    height: 300px; /* --- FIXED HEIGHT --- Adjust as needed */
    overflow-y: auto; /* Add scroll if content exceeds height */
    position: relative; /* Needed for absolute positioning of slides if using transitions */
    background-color: #fff; /* Ensure background */
}

/* Review Slide Styling within fixed area */
.review-card.review-slide {
    display: none;
    flex-direction: column;
    /* If using fade transition: */
    /* position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 1.5em;
    opacity: 0;
    transition: opacity 0.4s ease-in-out; */
}

.review-card.review-slide.active-slide {
    display: flex; /* Show the active slide */
    /* If using fade transition: */
    /* opacity: 1;
    z-index: 2; */
}

.review-text {
    font-style: normal; /* Remove default italic? Optional */
    color: #444; /* Darker text */
    margin-bottom: 1em;
    flex-grow: 1;
    line-height: 1.65; /* Improved readability */
    font-size: 0.95em;
    border-left: 3px solid #c88ea5; /* Accent border */
    padding-left: 1em;
    margin-left: 0;
}
.review-text::before { content: open-quote; font-size: 1.4em; color: #c88ea5; margin-right: 0.1em; } /* Optional quote marks */
.review-text::after { content: close-quote; font-size: 1.4em; color: #c88ea5; margin-left: 0.1em; }


.review-author {
    font-weight: 600; /* Semi-bold */
    color: #555;
    font-size: 0.9em;
    text-align: right;
    margin-top: auto;
    padding-top: 0.5em; /* Space above author */
}

.review-date {
    font-weight: normal;
    color: #888;
    font-size: 0.9em;
    display: block;
}

/* Review Controls Styling - Enhanced */
.review-controls {
    text-align: center;
    padding: 0.75em 1.5em; /* Padding around buttons */
    border-top: 1px solid #eee;
    background-color: #fafafa; /* Match header background */
    border-radius: 0 0 8px 8px; /* Match bottom radius */
    margin-top: auto; /* Ensure it's at the bottom */
}

.review-controls button {
    appearance: none;
    background: #fff; /* White background */
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.4em;
    width: 2.6em; /* Slightly larger */
    height: 2.6em;
    padding: 0;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.review-controls button img.control-icon {
    display: block;
    width: 50%; /* Adjust icon size */
    height: 50%;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.review-controls button:hover {
    background-color: #eee;
    border-color: #bbb;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.review-controls button:hover img.control-icon {
    opacity: 0.9;
}

.review-controls button:active {
    background-color: #ddd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
    transform: scale(0.95); /* Click feedback */
}

/* Review Links Section */
.review-links {
    margin-top: 3em; /* More space above links */
}
.review-links p {
    margin-bottom: 1.2em;
    font-weight: 600; /* Semi-bold */
    color: #4a3f4f;
    font-size: 1.05em;
}
.review-links .button.alt {
    margin: 0 0.5em 0.5em 0.5em; /* Space around buttons */
    font-size: 0.9em; /* Slightly smaller buttons */
}


/* Responsive adjustments */
@media screen and (max-width: 980px) {
    .platform-reviews-container {
        max-width: calc(50% - 1em); /* Adjust calc for gap */
        flex-basis: calc(50% - 1em);
    }
     .reviews-container {
        gap: 1.5em; /* Adjust gap */
    }
}

@media screen and (max-width: 736px) {
    .platform-reviews-container {
        max-width: 85%;
        flex-basis: 85%;
        margin-left: auto;
        margin-right: auto;
    }
     .reviews-container {
        gap: 2em; /* Increase gap for single column */
    }
    .review-content-area {
         height: 220px; /* Adjust fixed height for mobile if needed */
    }
}
@media screen and (max-width: 480px) {
    .social-proof-section {
        padding: 3em 0;
    }
    .platform-reviews-container {
        max-width: 95%;
        flex-basis: 95%;
    }
    .review-source {
        font-size: 1em;
        padding: 0.75em 1em 0.5em 1em;
    }
    .rating-display {
        font-size: 0.85em;
    }
     .review-content-area {
         padding: 1.25em;
         height: 240px; /* May need more height on small screens */
    }
    .review-text {
        font-size: 0.9em;
    }
    .review-controls {
        padding: 0.5em 1em;
    }
    .review-controls button {
         width: 2.8em; /* Even larger tap targets */
         height: 2.8em;
    }
}

/* --- FAQ Accordion Styles --- */
.faq-accordion {
    margin-top: 2em;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden; /* Ensures children stay within rounded corners */
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
}
.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    appearance: none;
    border: none;
    color: #4a3f4f; /* Dark plum text */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1em; /* Slightly larger question font */
    font-weight: 600; /* Semi-bold */
    padding: 1em 1.5em;
    text-align: left;
    width: 100%;
    transition: background-color 0.2s ease-in-out;
}
.faq-question span {
    flex-grow: 1;
    padding-right: 1em; /* Space between text and icon */
}

.faq-question:hover,
.faq-question:focus {
    outline: none;
}

.faq-question .faq-icon {
    flex-shrink: 0;
    width: 1.5em; /* Ensure icon has space */
    text-align: center;
    transition: transform 0.3s ease-in-out;
    font-size: 1.2em; /* Adjust icon size */
    color: #c88ea5; /* Accent color for icon */
}

/* Rotate icon when question is active/expanded */
.faq-question.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    /* Use max-height for transition */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding: 0 1.5em; /* Only apply padding when open */
}
/* Style the content inside the answer */
.faq-answer p,
.faq-answer ul {
    margin-bottom: 1em;
    line-height: 1.7;
    /* color: #555; */ /* Remove this line or change to darker */
    color: #333333; /* CHANGE: Use darker text color for better contrast */
}
.faq-answer ul {
    margin-left: 1.5em; /* Indent lists */
    padding-left: 0.5em;
    list-style: disc;
}
.faq-answer ul li {
    margin-bottom: 0.5em;
}
.faq-answer > *:last-child {
    margin-bottom: 0; /* Remove bottom margin from last element */
}

/* ADD: Specific style for links within the answer for better contrast */
.faq-answer a {
    color: #4a3f4f; /* CHANGE: Use darker plum (heading color) for links inside answers */
    border-bottom-color: rgba(74, 63, 79, 0.5); /* Match link color */
}
.faq-answer a:hover {
    color: #c88ea5; /* Use accent color on hover */
    border-bottom-color: rgba(200, 142, 165, 0.5);
}


/* Responsive adjustments for FAQ */
@media screen and (max-width: 736px) {
    .faq-question {
        font-size: 1em;
        padding: 0.8em 1em;
    }
    .faq-answer {
        padding: 0 1em;
    }
     .faq-answer.open {
        padding: 1.2em 1em;
    }
    .faq-question .faq-icon {
        font-size: 1.1em;
    }
}
/* --- Consultation Page Layout Fix --- */
#main .row.items-start {
    align-items: flex-start; /* Align items to the top */
    display: flex !important; /* Ensure flex display overrides any potential conflicts */
    flex-wrap: wrap !important; /* Ensure wrapping */
}

#main .row > .column-container {
    display: block !important; /* Ensure columns behave as blocks within the flex row */
    padding-top: 0 !important; /* Remove potential extra top padding */
    margin-bottom: 0 !important; /* Remove potential extra bottom margin */
     /* Widths are handled by 6u/12u$(medium) classes */
}

/* Ensure the form section doesn't cause unexpected width issues */
#consultation-form-container {
    width: 100%;
    box-sizing: border-box;
}

/* Ensure the image span behaves correctly */
#main .row .image.fit {
    margin-top: 0; /* Align image closer to top if needed */
}

/* Responsive stacking should still be handled by 12u$(medium) */
@media screen and (max-width: 980px) {
    #main .row.items-start {
        display: block !important; /* Revert to block display for stacking */
    }
     #main .row > .column-container {
         width: 100% !important; /* Ensure full width when stacked */
         margin-bottom: 2em !important; /* Add space between stacked items */
     }
      #main .row > .column-container:last-child {
         margin-bottom: 0 !important;
     }
}
/* --- End Consultation Page Layout Fix --- */