@charset "UTF-8";
/* =========================================================
   HFS REMODELING INNOVATIONS
   BASE CSS
   STANDARD DESKTOP / LAPTOP
   =========================================================

   This is the primary website design.

   Intended primarily for:
   - Standard desktop monitors
   - Laptop computers
   - MacBook Pro reference device

   This section contains the existing desktop/laptop CSS.

   IMPORTANT:
   Do not place these existing styles inside a media query.
   They remain the default foundation of the website.

   ========================================================= */

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

html,
body {
    overflow-x: hidden;
}

body {
    font-family: Avenir, sans-serif;
    background-color: #0A183A;
    color: white;
}

/* HERO SECTION */

.hero {
    min-height: 100vh;
    padding: 40px 80px;

    background:
        url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070");

    background-size: cover;
    background-position: center;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 24, 58, 0.48);
}

nav,
.hero-content {
    position: relative;
    z-index: 2;
}

/* NAVIGATION */

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 34px;
    padding-left: 20px;
    padding-right: 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo img {
  width: 36px;
  height: auto;
  display: block;
}

.logo span {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: white;
}

.nav-links {
    list-style: none;
}

.nav-links li {
    margin-bottom: 10px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

/* HERO CONTENT */

.hero-content {
    max-width: 720px;
    margin-top: 72px;
    padding-left: 30px;
}

.hero-content h1 {
    font-size: 48px;
    max-width: 680px;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-bottom: 26px;
    font-weight: 500;
    font-family: 'Playfair Display', serif;
}

.hero-content p {
    font-size: 15px;
    line-height: 2;
    margin-top: 12px;
    margin-bottom: 44px;
    max-width: 460px;
    color: #CFCFC8;
    letter-spacing: 0.5px;
}

.hero-button {
    display: inline-block;
    padding: 16px 42px;
    background: transparent;
    color: #F5F5F2;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid rgba(184,149,94,0.72);
    border-radius: 0px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    transition: all 0.3s ease;
}

.hero-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* BELIEF SECTION */

.belief-section {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 95px 80px 140px;
}

.belief-container {
    max-width: 850px;
    margin: 0 auto;
}

.section-label {
    font-family: Avenir, sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #B8955E;
    margin-bottom: 28px;
}

.belief-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 38px;
}

.belief-intro {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    line-height: 1.45;
    max-width: 760px;
    margin-bottom: 42px;
}

.belief-container p {
    font-size: 16px;
    line-height: 1.9;
    max-width: 720px;
    margin-bottom: 26px;
}

/* STANDARD SECTION */

.standard-section {
  background-color: #0A183A;
  color: #F5F5F2;
  padding: 90px 80px;
}

.standard-container {
  max-width: 8500px;
  margin: 0 auto;
}

.standard-container h2 {
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 36px;
}

.standard-intro {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  line-height: 1.45;
  max-width: 780px;
  margin-bottom: 70px;
}

.standard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.standard-grid h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 18px;
}

.standard-grid p {
  font-size: 15px;
  line-height: 1.9;
  color: #CFCFC8;
}

/* APPROACH SECTION */

.approach-section {
  background-color: #F5F5F2;
  color: #0A183A;
  padding: 110px 80px 130px;
}

.approach-container {
  max-width: 850px;
  margin: 0 auto;
}

.approach-container h2 {
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 36px;
}

.approach-intro {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  line-height: 1.45;
  max-width: 780px;
  margin-bottom: 70px;
}

.approach-grid {
  display: grid;
   grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.approach-grid h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 18px;
}

.approach-grid p {
  font-size: 15px;
  line-height: 1.9;
  color: #0A183A;
}

/* PROJECTS SECTION */

.projects-section {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 110px 80px 130px;
}

.projects-container {
    max-width: 1280px;
    margin: 0 auto;
}

.projects-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 36px;
}

.projects-intro {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    line-height: 1.45;
    max-width: 900px;
    margin-bottom: 70px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
    margin-top: 70px;
}

.project-card {
    border-top: 1px solid rgba(200, 169, 107, 0.45);
    padding-top: 28px;
}

.project-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    background-color: rgba(245, 245, 242, 0.12);
    margin-bottom: 28px;
}
.project-location {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #B8955E;
    margin-bottom: 14px;
}

.project-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 18px;
}

.project-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #CFCFC8;
}

/* SERVICES SECTION */

.services-section {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 110px 80px 130px;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
}

.services-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 36px;
}

.services-intro {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    line-height: 1.45;
    max-width: 850px;
    margin-bottom: 70px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 42px 70px;
}

.service-card {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 28px;
}

.service-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 18px;
}

.service-card p {
    font-size: 15px;
    line-height: 1.9;
    color: #0A183A;
}

/* WHY HFS SECTION */

.why-hfs-section {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 130px 80px;
}

.why-hfs-container {
    max-width: 1200px;
    margin: 0 auto;
}

.why-hfs-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 36px;
}

.why-hfs-intro {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    line-height: 1.45;
    max-width: 900px;
    margin-bottom: 80px;
}

.why-hfs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 80px;
}

.why-card {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 28px;
}

.why-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 18px;
}

.why-card p {
    font-size: 16px;
    line-height: 1.9;
    color: #0A183A;
}

/* CONSULTATION SECTION */

.consultation-section {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 130px 80px;
}

.consultation-container {
    max-width: 1200px;
    margin: 0 auto;
}

.consultation-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 36px;
}

.consultation-intro {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    line-height: 1.45;
    max-width: 850px;
    margin-bottom: 80px;
}

.consultation-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 58px 80px;
}

.consultation-step {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 28px;
}

.consultation-step span {
    display: block;
    font-size: 12px;
    letter-spacing: 3px;
    color: #B8955E;
    margin-bottom: 18px;
}

.consultation-step h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 18px;
}

.consultation-step p {
    font-size: 15px;
    line-height: 1.9;
    color: #CFCFC8;
}

.consultation-note {
    margin-top: 90px;
    max-width: 720px;
}

.consultation-note p {
    font-size: 16px;
    line-height: 1.9;
    color: #CFCFC8;
    margin-bottom: 34px;
}

.consultation-button {
    display: inline-block;
    padding: 16px 42px;
    border: 1px solid rgba(184, 149, 94, 0.72);
	background-color: transparent;
    color: #F5F5F2;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.consultation-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* FINAL CTA SECTION */

.cta-section {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 140px 80px;
    text-align: center;
}

.cta-container {
    max-width: 900px;
    margin: 0 auto;
}

.cta-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 40px;
}

.cta-text {
    font-size: 17px;
    line-height: 2;
    max-width: 760px;
    margin: 0 auto 24px;
    color: #0A183A;
}

.cta-button {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 48px;
    border: 1px solid rgba(184,149,94,.75);
	background-color: transparent;
    text-decoration: none;
    color: #0A183A;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
}

.cta-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* FOOTER */

.site-footer {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 80px 80px 34px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr;
    gap: 60px;

    border-top: 1px solid rgba(200,169,107,.35);
    padding-top: 42px;
}

.footer-brand h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 18px;
}

.footer-brand p,
.footer-contact p:not(.footer-label) {
    font-size: 14px;
    line-height: 1.8;
    color: #CFCFC8;
}

.footer-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #C8A96B;
    margin-bottom: 18px;
}

.footer-contact a {
    color: #CFCFC8;
    text-decoration: none;
    transition: color .3s ease;
}

.footer-contact a:hover {
    color: #C8A96B;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a {
    color: #F5F5F2;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    transition: color .3s ease;
}

.footer-links a:hover {
    color: #C8A96B;
}

.footer-bottom {
    max-width: 1200px;
    margin: 54px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(245,245,242,.12);
}

.footer-bottom p {
    font-size: 12px;
    letter-spacing: 1px;
    color: #AFAFA8;
}

/* CONTACT PAGE */

.contact-hero {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 70px;
}

.contact-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 28px;
}

.contact-hero p {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
}

.contact-details {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 40px 80px 120px;
}

.contact-details-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    border-top: 1px solid rgba(200, 169, 107, 0.35);
    padding-top: 56px;
}

.contact-card {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 28px;
}

.contact-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 18px;
}

.contact-card p,
.contact-card a {
    font-size: 16px;
    line-height: 1.8;
    color: #CFCFC8;
    text-decoration: none;
}

.contact-card a:hover {
    color: #C8A96B;
}

.contact-consultation {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 90px 80px 130px;
}

.contact-consultation-inner {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(200, 169, 107, 0.35);
    padding-top: 56px;
}

.contact-consultation h2 {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 18px;
}

.contact-consultation p {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.9;
    color: #CFCFC8;
    margin-bottom: 34px;
}

.contact-button {
    display: inline-block;
    padding: 16px 42px;
    border: 1px solid rgba(184, 149, 94, 0.72);
    color: #F5F5F2;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* SERVICES PAGE */

.services-page-hero {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 80px;
}

.services-page-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.services-page-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 28px;
}

.services-page-hero p {
    max-width: 780px;
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
}

.services-page-list {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px;
}

.services-page-list-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px 90px;
}

.service-detail {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 30px;
}

.service-detail h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 22px;
}

.service-detail p {
    font-size: 16px;
    line-height: 1.9;
    color: #0A183A;
    margin-bottom: 18px;
}

.services-page-cta {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 130px;
}

.services-page-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.services-page-cta h2 {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 30px;
}

.services-page-cta p {
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
    margin-bottom: 38px;
}

/* CONSULTATION PAGE */

.consultation-page-hero {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 80px;
}

.consultation-page-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.consultation-page-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 28px;
}

.consultation-page-hero p {
    max-width: 780px;
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
}


/* CONSULTATION PROCESS */

.consultation-process {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 80px 80px 100px;
}

.consultation-process-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.consultation-process h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 50px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
}

.process-step {
    border-top: 1px solid rgba(184, 149, 94, 0.5);
    padding-top: 24px;
}

.process-step h3 {
    font-size: 13px;
    letter-spacing: 3px;
    color: #B8955E;
    margin-bottom: 18px;
}

.process-step h4 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 14px;
}

.process-step p {
    font-size: 15px;
    line-height: 1.8;
    color: #CFCFC8;
}


/* CONSULTATION FORM */

.consultation-form-section {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px;
}

.consultation-form-inner {
    max-width: 900px;
    margin: 0 auto;
}

.consultation-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 50px;
}

/* Hide consultation form after successful submission */
.consultation-form[hidden] {
    display: none !important;
}

/* Success-state spacing */
.consultation-form-section.is-success {
    padding-top: 80px;
    padding-bottom: 90px;
}

/* Success message */
.consultation-success {
    padding: 0;
    max-width: 760px;
}

.consultation-success .section-label {
    margin-bottom: 18px;
}

.consultation-success h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 16px;
}
.consultation-success p {
    max-width: 620px;
    margin-bottom: 0;
    line-height: 1.8;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #B8955E;
    margin-bottom: 12px;
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: Avenir, sans-serif;
    font-size: 15px;
    padding: 16px 18px;
    border: 1px solid rgba(10, 24, 58, 0.22);
    background-color: #FFFFFF;
    color: #0A183A;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #B8955E;
}

.consultation-submit {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 48px;
    border: 1px solid rgba(184,149,94,.75);
    background-color: transparent;
    text-decoration: none;
    color: #0A183A;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
}

.consultation-submit:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* LEOMA COMMERCIAL CONVERSION PAGE */

.leoma-hero {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 90px;
}

.leoma-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.leoma-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 28px;
}

.leoma-hero p {
    max-width: 780px;
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
}

.leoma-feature-image {
    background-color: #0A183A;
    padding: 0 80px 120px;
}

.leoma-feature-image-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.leoma-feature-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.leoma-story {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px;
}

.leoma-story-inner {
    max-width: 900px;
    margin: 0 auto;
}

.leoma-story h2,
.leoma-gallery h2,
.leoma-outcome h2 {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 34px;
}

.leoma-story p,
.leoma-outcome p {
    font-size: 17px;
    line-height: 2;
    color: #0A183A;
    margin-bottom: 24px;
}

.leoma-scope {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 30px 80px 120px;
}

.leoma-scope-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 54px;
}

.leoma-scope-block {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 28px;
}

.leoma-scope-block h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 22px;
}

.leoma-scope-block p {
    font-size: 15px;
    line-height: 1.9;
    color: #0A183A;
    margin-bottom: 18px;
}

.leoma-gallery {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px;
}

.leoma-gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.leoma-gallery h2 {
    color: #F5F5F2;
}

.leoma-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    margin-top: 60px;
}

.leoma-gallery-item img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    margin-bottom: 18px;
}

.leoma-gallery-item p {
    font-size: 14px;
    line-height: 1.8;
    color: #CFCFC8;
}

.leoma-outcome {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px 130px;
}

.leoma-outcome-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.leoma-outcome p {
    margin-bottom: 42px;
}

.leoma-button {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 48px;
    border: 1px solid rgba(184,149,94,.75);
	background-color: transparent;
    text-decoration: none;
    color: #0A183A;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
}

.leoma-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* PROJECTS PORTFOLIO PAGE */

.projects-page-hero {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 90px;
}

.projects-page-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.projects-page-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 28px;
}

.projects-page-hero p {
    max-width: 780px;
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
}

.projects-page-grid-section {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px;
}

.projects-page-grid-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px;
}

.portfolio-card {
    display: block;
    text-decoration: none;
    color: #0A183A;
}

.portfolio-card img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
    margin-bottom: 28px;
}

.portfolio-card-content {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 24px;
}

.portfolio-category {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #B8955E;
    margin-bottom: 16px;
}

.portfolio-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 18px;
}

.portfolio-card p {
    font-size: 15px;
    line-height: 1.9;
    color: #0A183A;
    margin-bottom: 20px;
}

.portfolio-card span {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #0A183A;
    border-bottom: 1px solid #B8955E;
    padding-bottom: 6px;
}

.portfolio-card:hover span {
    color: #B8955E;
}

.projects-page-cta {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 130px;
}

.projects-page-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.projects-page-cta h2 {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 30px;
}

.projects-page-cta p {
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
    margin-bottom: 42px;
}

.portfolio-button {
    display: inline-block;
    padding: 16px 42px;
    border: 1px solid rgba(184, 149, 94, 0.72);
	background-color: transparent;
    color: #F5F5F2;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.portfolio-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* DUPLEX CEILING RESTORATION PAGE */

.duplex-hero {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 90px;
}

.duplex-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.duplex-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 28px;
}

.duplex-hero p {
    max-width: 780px;
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
}

.duplex-feature-image {
    background-color: #0A183A;
    padding: 0 80px 120px;
}

.duplex-feature-image-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.duplex-feature-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.duplex-story {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px;
}

.duplex-story-inner,
.duplex-performance-inner,
.duplex-outcome-inner {
    max-width: 900px;
    margin: 0 auto;
}

.duplex-story h2,
.duplex-performance h2,
.duplex-gallery h2,
.duplex-outcome h2 {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 34px;
}

.duplex-story p,
.duplex-performance p,
.duplex-outcome p {
    font-size: 17px;
    line-height: 2;
    color: #0A183A;
    margin-bottom: 24px;
}

.duplex-scope {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 30px 80px 120px;
}

.duplex-scope-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 54px;
}

.duplex-scope-block {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 28px;
}

.duplex-scope-block h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 22px;
}

.duplex-scope-block p {
    font-size: 15px;
    line-height: 1.9;
    color: #0A183A;
    margin-bottom: 18px;
}

.duplex-performance {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px;
}

.duplex-gallery {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px;
}

.duplex-gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.duplex-gallery h2 {
    color: #F5F5F2;
}

.duplex-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    margin-top: 60px;
}

.duplex-gallery-item img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    margin-bottom: 18px;
}

.duplex-gallery-item p {
    font-size: 14px;
    line-height: 1.8;
    color: #CFCFC8;
}

.duplex-outcome {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px 130px;
}

.duplex-outcome-inner {
    text-align: center;
}

.duplex-outcome p {
    margin-bottom: 28px;
}

.duplex-consultation-button {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 48px;
    border: 1px solid rgba(184,149,94,.75);
	background-color: transparent;
    text-decoration: none;
    color: #0A183A;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
}

.duplex-consultation-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* BATHROOM RESTORATION & RECONSTRUCTION PAGE */

.bathroom-hero {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 90px;
}

.bathroom-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.bathroom-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 28px;
}

.bathroom-hero p {
    max-width: 780px;
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
}

.bathroom-feature-image {
    background-color: #0A183A;
    padding: 0 80px 120px;
}

.bathroom-feature-image-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.bathroom-feature-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.bathroom-story,
.bathroom-detail,
.bathroom-storage {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px;
}

.bathroom-story-inner,
.bathroom-detail-inner,
.bathroom-storage-inner,
.bathroom-outcome-inner {
    max-width: 900px;
    margin: 0 auto;
}

.bathroom-story h2,
.bathroom-detail h2,
.bathroom-storage h2,
.bathroom-gallery h2,
.bathroom-outcome h2 {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 34px;
}

.bathroom-story p,
.bathroom-detail p,
.bathroom-storage p,
.bathroom-outcome p {
    font-size: 17px;
    line-height: 2;
    color: #0A183A;
    margin-bottom: 24px;
}

.bathroom-scope {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 30px 80px 120px;
}

.bathroom-scope-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 54px;
}

.bathroom-scope-block {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 28px;
}

.bathroom-scope-block h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 22px;
}

.bathroom-scope-block p {
    font-size: 15px;
    line-height: 1.9;
    color: #0A183A;
    margin-bottom: 18px;
}

.bathroom-gallery {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px;
}

.bathroom-gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.bathroom-gallery h2 {
    color: #F5F5F2;
}

.bathroom-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    margin-top: 60px;
}

.bathroom-gallery-item img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    margin-bottom: 18px;
}

.bathroom-gallery-item p {
    font-size: 14px;
    line-height: 1.8;
    color: #CFCFC8;
}

.bathroom-outcome {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px 130px;
}

.bathroom-outcome-inner {
    text-align: center;
}

.bathroom-outcome p {
    margin-bottom: 28px;
}

.bathroom-consultation-button {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 48px;
    border: 1px solid rgba(184,149,94,.75);
	background-color: transparent;
    text-decoration: none;
    color: #0A183A;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
}

.bathroom-consultation-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* CABINET REFINISHING PAGE */

.cabinet-hero {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px 90px;
}

.cabinet-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.cabinet-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 28px;
}

.cabinet-hero p {
    max-width: 780px;
    font-size: 17px;
    line-height: 1.9;
    color: #CFCFC8;
}

.cabinet-feature-image {
    background-color: #0A183A;
    padding: 0 80px 120px;
}

.cabinet-feature-image-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.cabinet-feature-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.cabinet-story,
.cabinet-refinishing-process,
.cabinet-preservation {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px;
}

.cabinet-story-inner,
.cabinet-refinishing-process-inner,
.cabinet-preservation-inner,
.cabinet-outcome-inner {
    max-width: 900px;
    margin: 0 auto;
}

.cabinet-story h2,
.cabinet-refinishing-process h2,
.cabinet-preservation h2,
.cabinet-gallery h2,
.cabinet-outcome h2 {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 34px;
}

.cabinet-story p,
.cabinet-refinishing-process p,
.cabinet-preservation p,
.cabinet-outcome p {
    font-size: 17px;
    line-height: 2;
    color: #0A183A;
    margin-bottom: 24px;
}

.cabinet-scope {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 30px 80px 120px;
}

.cabinet-scope-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 54px;
}

.cabinet-scope-block {
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 28px;
}

.cabinet-scope-block h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 22px;
}

.cabinet-scope-block p {
    font-size: 15px;
    line-height: 1.9;
    color: #0A183A;
    margin-bottom: 18px;
}

.cabinet-gallery {
    background-color: #0A183A;
    color: #F5F5F2;
    padding: 120px 80px;
}

.cabinet-gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.cabinet-gallery h2 {
    color: #F5F5F2;
}

.cabinet-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-top: 60px;
}

.cabinet-gallery-item img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    margin-bottom: 18px;
}

.cabinet-gallery-item p {
    font-size: 14px;
    line-height: 1.8;
    color: #CFCFC8;
}

.cabinet-outcome {
    background-color: #F5F5F2;
    color: #0A183A;
    padding: 120px 80px 130px;
}

.cabinet-outcome-inner {
    text-align: center;
}

.cabinet-outcome p {
    margin-bottom: 28px;
}

.cabinet-consultation-button {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 48px;
    border: 1px solid rgba(184,149,94,.75);
	background-color: transparent;
    text-decoration: none;
    color: #0A183A;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
}

.cabinet-consultation-button:hover {
    background-color: #C8A96B;
    color: #0A183A;
}

/* =========================================================
   END BASE CSS
   STANDARD DESKTOP / LAPTOP
   ========================================================= */


/* =========================================================
   LARGE DESKTOP CSS
   1440px AND ABOVE
   =========================================================

   Purpose:
   Refine the standard desktop design for larger monitors.

   This is NOT a redesign.

   Primary considerations:
   - Control maximum content width
   - Prevent excessive stretching
   - Preserve intentional negative space
   - Refine large-screen image presentation
   - Maintain restrained typography

   ========================================================= */

@media screen and (min-width: 1440px) {


    /* =====================================================
       LARGE DESKTOP — GLOBAL
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — INDEX.HTML
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — SERVICES.HTML
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — PROJECTS.HTML
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — LEOMA COMMERCIAL CONVERSION
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — DUPLEX PROJECT
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — BATHROOM-RENOVATION.HTML
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — CABINET-REFINISHING.HTML
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — CONTACT.HTML
       ===================================================== */


    /* =====================================================
       LARGE DESKTOP — CONSULTATION.HTML
       ===================================================== */


}


/* =========================================================
   END LARGE DESKTOP CSS
   ========================================================= */

/* =========================================================
   TABLET CSS
   769px TO 1024px
   =========================================================

   Purpose:
   Adapt the desktop/laptop experience for tablet screens.

   This is NOT a redesign.

   Primary considerations:
   - Preserve the luxury visual language
   - Maintain comfortable horizontal spacing
   - Reduce multi-column layouts where necessary
   - Prevent typography from feeling oversized
   - Preserve image quality and proportions
   - Keep buttons and navigation touch-friendly
   - Maintain strong visual hierarchy
   - Avoid compressed desktop layouts

   Reference devices:
   - iPad
   - iPad Air
   - iPad Pro portrait
   - Android tablets

   ========================================================= */

@media screen and (min-width: 769px) and (max-width: 1024px) {


    /* =====================================================
       TABLET - GLOBAL
       ===================================================== */



    /* =====================================================
       TABLET - INDEX.HTML
       ===================================================== */



    /* =====================================================
       TABLET - SERVICES.HTML
       ===================================================== */



    /* =====================================================
       TABLET - PROJECTS.HTML
       ===================================================== */



    /* =====================================================
       TABLET - LEOMA COMMERCIAL CONVERSION
       ===================================================== */



    /* =====================================================
       TABLET - DUPLEX CEILING RESTORATION
       ===================================================== */



    /* =====================================================
       TABLET - BATHROOM-RENOVATION.HTML
       ===================================================== */



    /* =====================================================
       TABLET - CABINET-REFINISHING.HTML
       ===================================================== */



    /* =====================================================
       TABLET - CONTACT.HTML
       ===================================================== */



    /* =====================================================
       TABLET - CONSULTATION.HTML
       ===================================================== */


}


/* =========================================================
   END TABLET CSS
   ========================================================= */

/* =========================================================
   PHONE CSS
   768px AND BELOW
   =========================================================

   Purpose:
   Adapt the HFS Remodeling Innovations website
   specifically for standard smartphone displays.

   This is NOT a redesign.

   The desktop/laptop design remains the visual foundation.
   This section only adjusts layout, spacing, typography,
   navigation, imagery, and interaction where necessary
   for comfortable smartphone viewing.

   Primary reference device:
   - Samsung Galaxy S25 Ultra

   Additional considerations:
   - Large Android phones
   - Large iPhones
   - Standard smartphones
   - Portrait orientation

   Primary objectives:
   - Preserve the luxury visual language
   - Maintain intentional negative space
   - Prevent horizontal overflow
   - Maintain readable typography
   - Prevent oversized desktop typography
   - Preserve image proportions and intentional cropping
   - Stack layouts only where necessary
   - Maintain comfortable touch targets
   - Maintain consistent horizontal margins
   - Prevent compressed desktop layouts
   - Preserve strong visual hierarchy

   IMPORTANT:
   Page-specific corrections should remain underneath
   the corresponding HTML section whenever possible.

   ========================================================= */

@media screen and (max-width: 768px) {


    /* =====================================================
       PHONE - GLOBAL
       ===================================================== */
	
	/* =========================================================
       PHONE - GLOBAL
       Shared rules for all HTML pages
      ========================================================= */


/* ---------------------------------------------------------
   GLOBAL DOCUMENT CONTROL
   --------------------------------------------------------- */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
}

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


/* ---------------------------------------------------------
   GLOBAL IMAGE CONTROL
   --------------------------------------------------------- */

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   GLOBAL NAVIGATION
   --------------------------------------------------------- */

nav {
    width: 100%;
    padding: 30px 7% 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
}


/* Logo / company identity */

nav .logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
}

nav .logo img {
    width: 28px;
    height: auto;
    flex-shrink: 0;
}

nav .logo span {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}


/* Navigation links */

.nav-links {
    width: 100%;
    margin: 0;
    padding: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    list-style: none;
}

.nav-links li {
    margin: 0;
    padding: 0;
}

.nav-links a {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.17em;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   GLOBAL TYPOGRAPHY SAFETY
   --------------------------------------------------------- */

h1,
h2,
h3,
p {
    max-width: 100%;
}

h1,
h2,
h3 {
    overflow-wrap: normal;
    word-break: normal;
}

p {
    overflow-wrap: break-word;
}


/* ---------------------------------------------------------
   GLOBAL SECTION LABEL
   --------------------------------------------------------- */

.section-label {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.20em;
    margin-bottom: 22px;
}


/* ---------------------------------------------------------
   GLOBAL BUTTON / LINK SAFETY
   --------------------------------------------------------- */

.hero-button,
.consultation-button,
.cta-button,
.contact-button,
.portfolio-button,
.leoma-button,
.duplex-consultation-button,
.bathroom-consultation-button,
.cabinet-consultation-button {
    max-width: 100%;
}


/* ---------------------------------------------------------
   GLOBAL FORM SAFETY
   --------------------------------------------------------- */

input,
textarea,
select,
button {
    max-width: 100%;
    font: inherit;
}


/* ---------------------------------------------------------
   GLOBAL MOBILE CONTENT CONTROL
   --------------------------------------------------------- */

.hero-content,
.belief-container,
.standard-container,
.approach-container,
.projects-container,
.services-container,
.why-hfs-container,
.consultation-container,
.cta-container,
.footer-container,
.contact-hero-inner,
.contact-details-inner {
    width: 86%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}


    /* =====================================================
       PHONE - INDEX.HTML
       ===================================================== */
	
	/* ---------------------------------------------------------
       INDEX.HTML - HERO
       --------------------------------------------------------- */

.hero {
    min-height: 100svh;
    padding: 26px 0 58px;
    background-size: cover;
    background-position: center center;
}


/* Hero content */

.hero-content {
    width: 86%;
    max-width: none;
    margin: 74px auto 0;
    padding: 0;
}


/* Main hero heading */

.hero-content h1 {
    max-width: 620px;
    margin: 0 0 38px;
    font-size: 40px;
    line-height: 1.04;
    letter-spacing: -0.02em;
}


/* Hero supporting copy */

.hero-content p {
    max-width: 560px;
    margin: 0 0 38px;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.01em;
}


/* Hero consultation button */

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 52px;
    padding: 16px 30px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.20em;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   INDEX.HTML - BELIEF SECTION
   --------------------------------------------------------- */

.belief-section {
    padding: 82px 0 96px;
}

.belief-container {
    width: 86%;
    max-width: none;
}

.belief-container h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.belief-intro {
    font-size: 23px;
    line-height: 1.45;
    max-width: 100%;
    margin-bottom: 34px;
}

.belief-container p {
    font-size: 15px;
    line-height: 1.85;
    max-width: 100%;
    margin-bottom: 22px;
}


/* ---------------------------------------------------------
   INDEX.HTML - STANDARD SECTION
   --------------------------------------------------------- */

.standard-section {
    padding: 82px 0;
}

.standard-container {
    width: 86%;
    max-width: none;
}

.standard-container h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.standard-intro {
    font-size: 19px;
    line-height: 1.45;
    max-width: 100%;
    margin-bottom: 48px;
}

.standard-grid {
    grid-template-columns: 1fr;
    gap: 36px;
}

.standard-grid h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.standard-grid p {
    font-size: 15px;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   INDEX.HTML - APPROACH SECTION
   --------------------------------------------------------- */

.approach-section {
    padding: 88px 0 96px;
}

.approach-container {
    width: 86%;
    max-width: none;
}

.approach-container h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.approach-intro {
    font-size: 21px;
    line-height: 1.45;
    max-width: 100%;
    margin-bottom: 34px;
}

.approach-grid {
    grid-template-columns: 1fr;
    gap: 42px;
}

.approach-grid h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.approach-grid p {
    font-size: 15px;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   INDEX.HTML - PROJECTS SECTION
   --------------------------------------------------------- */

.projects-section {
    padding: 88px 0 96px;
}

.projects-container {
    width: 86%;
    max-width: none;
}

.projects-container h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.projects-intro {
    font-size: 20px;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: 48px;
}

.projects-grid {
    grid-template-columns: 1fr;
    gap: 64px;
    margin-top: 48px;
}

.project-card {
    padding-top: 16px;
}

.project-image {
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: 28px;
}

.project-location {
    font-size: 10px;
    letter-spacing: 0.20em;
    margin-bottom: 10px;
}

.project-card h3 {
    font-size: 25px;
    line-height: 1.18;
    margin-bottom: 16px;
}

.project-card p {
    font-size: 15px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   INDEX.HTML - SERVICES SECTION
   --------------------------------------------------------- */

.services-section {
    padding: 88px 0 96px;
}

.services-container {
    width: 86%;
    max-width: none;
}

.services-container h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.services-intro {
    font-size: 20px;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: 48px;
}

.services-grid {
    grid-template-columns: 1fr;
    gap: 36px;
}

.service-card {
    padding-top: 24px;
}

.service-card h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.service-card p {
    font-size: 15px;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   INDEX.HTML - WHY HFS
   --------------------------------------------------------- */

.why-hfs-section {
    padding: 92px 0;
}

.why-hfs-container {
    width: 86%;
    max-width: none;
}

.why-hfs-container h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.why-hfs-intro {
    font-size: 20px;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: 48px;
}

.why-hfs-grid {
    grid-template-columns: 1fr;
    gap: 36px;
}

.why-card {
    padding-top: 24px;
}

.why-card h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.why-card p {
    font-size: 15px;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   INDEX.HTML - CONSULTATION
   --------------------------------------------------------- */

.consultation-section {
    padding: 92px 0;
}

.consultation-container {
    width: 86%;
    max-width: none;
}

.consultation-container h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.consultation-intro {
    font-size: 20px;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: 48px;
}

.consultation-steps {
    grid-template-columns: 1fr;
    gap: 36px;
}

.consultation-step {
    padding-top: 24px;
}

.consultation-step h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.consultation-step p {
    font-size: 15px;
    line-height: 1.85;
}

.consultation-note {
    margin-top: 48px;
    max-width: 100%;
}

.consultation-note p {
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 28px;
}

.consultation-submit {
    width: 100%;
    max-width: 330px;
}

.consultation-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78%;
    max-width: 330px;
    padding: 17px 22px;
    font-size: 11px;
    letter-spacing: 0.20em;
}
	
/* ---------------------------------------------------------
   INDEX.HTML - FINAL CTA
   --------------------------------------------------------- */

.cta-section {
    padding: 96px 0;
}

.cta-container {
    width: 86%;
    max-width: none;
}

.cta-container h2 {
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 24px;
}

.cta-text {
    font-size: 15px;
    line-height: 1.85;
    max-width: 100%;
    margin-bottom: 24px;
}

.cta-button {
    width: 100%;
    max-width: 330px;
    padding: 17px 22px;
    font-size: 11px;
    letter-spacing: 0.18em;
}

/* =========================================================
   PHONE - INDEX.HTML - FOOTER
   ========================================================= */

.site-footer {
    padding: 28px 0 30px;
}

.footer-container {
    width: 86%;
    max-width: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 24px;
}

/* Footer brand */

.footer-brand h3 {
    font-size: 28px;
    line-height: 1.12;
    margin-bottom: 16px;
}

.footer-brand p {
    font-size: 15px;
    line-height: 1.8;
}


/* Footer contact */

.footer-label {
    font-size: 11px;
    letter-spacing: 0.20em;
    margin-bottom: 14px;
}

.footer-contact p:not(.footer-label) {
    font-size: 15px;
    line-height: 1.8;
}


/* Footer navigation */

.footer-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
	
.footer-links .footer-label {
    margin-bottom: 0;
}	
	
.footer-links a {
    font-size: 11px;
    letter-spacing: 0.18em;
}


/* Footer copyright */

.footer-bottom {
    width: 86%;
    max-width: none;
    margin: 42px auto 0;
    padding-top: 24px;
}

.footer-bottom p {
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

    /* =====================================================
       PHONE - SERVICES.HTML
       ===================================================== */
	/* ---------------------------------------------------------
   		SERVICES.HTML - HERO
   	   --------------------------------------------------------- */

.services-page-hero {
    padding: 90px 0 88px;
}

.services-page-hero-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.services-page-hero h1 {
    max-width: 100%;
    font-size: 40px;
    line-height: 1.08;
    margin-bottom: 28px;
}

.services-page-hero p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.8;
}


	/* ---------------------------------------------------------
   		SERVICES.HTML - SERVICE LIST
   	   --------------------------------------------------------- */

.services-page-list {
    padding: 88px 0 96px;
}

.services-page-list-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 54px;
}


/* Individual service blocks */

.service-detail {
    width: 100%;
    padding-top: 26px;
}

.service-detail h2 {
    max-width: 100%;
    font-size: 28px;
    line-height: 1.16;
    margin-bottom: 20px;
}

.service-detail p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}


/* Remove unnecessary trailing paragraph space */

.service-detail p:last-child {
    margin-bottom: 0;
}


	/* ---------------------------------------------------------
   		SERVICES.HTML - FINAL CTA
   	   --------------------------------------------------------- */

.services-page-cta {
    padding: 96px 0 98px;
}

.services-page-cta-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
}

.services-page-cta h2 {
    max-width: 100%;
    margin: 0 auto 28px;
    font-size: 38px;
    line-height: 1.14;
}

.services-page-cta p {
    max-width: 100%;
    margin: 0 auto 32px;
    font-size: 15px;
    line-height: 1.85;
}


/* CTA button */

.services-page-cta .consultation-button,
.services-page-cta .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 330px;
    min-height: 54px;

    padding: 17px 22px;

    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-align: center;
}


	/* ---------------------------------------------------------
   		SERVICES.HTML - MOBILE SAFETY
   	   --------------------------------------------------------- */

.services-page-hero-inner,
.services-page-list-inner,
.services-page-cta-inner,
.service-detail {
    min-width: 0;
}

.services-page-hero h1,
.services-page-hero p,
.service-detail h2,
.service-detail p,
.services-page-cta h2,
.services-page-cta p {
    overflow-wrap: normal;
    word-break: normal;
}

    /* =====================================================
       PHONE - PROJECTS.HTML
       ===================================================== */

/* ---------------------------------------------------------
   PROJECTS.HTML - HERO
   --------------------------------------------------------- */

.projects-page-hero {
    padding: 90px 0 88px;
}

.projects-page-hero-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.projects-page-hero h1 {
    max-width: 100%;
    font-size: 40px;
    line-height: 1.08;
    margin-bottom: 28px;
}

.projects-page-hero p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   PROJECTS.HTML - PORTFOLIO GRID
   --------------------------------------------------------- */

.projects-page-grid-section {
    padding: 88px 0 96px;
}

.projects-page-grid-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
}


/* Individual project cards */

.portfolio-card {
    width: 100%;
}

.portfolio-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 24px;
}

.portfolio-card-content {
    padding-top: 22px;
}

.portfolio-category {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.20em;
    margin-bottom: 14px;
}

.portfolio-card h2 {
    max-width: 100%;
    font-size: 28px;
    line-height: 1.16;
    margin-bottom: 18px;
}

.portfolio-card p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}

.portfolio-card span {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.18em;
}


/* ---------------------------------------------------------
   PROJECTS.HTML - FINAL CTA
   --------------------------------------------------------- */

.projects-page-cta {
    padding: 96px 0 92px;
}

.projects-page-cta-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
}

.projects-page-cta h2 {
    max-width: 100%;
    margin: 0 auto 28px;
    font-size: 38px;
    line-height: 1.14;
}

.projects-page-cta p {
    max-width: 100%;
    margin: 0 auto 32px;
    font-size: 15px;
    line-height: 1.85;
}

.projects-page-cta .portfolio-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 330px;
    min-height: 54px;

    padding: 17px 22px;

    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-align: center;
}


/* ---------------------------------------------------------
   PROJECTS.HTML - MOBILE SAFETY
   --------------------------------------------------------- */

.projects-page-hero-inner,
.projects-page-grid-inner,
.projects-page-cta-inner,
.portfolio-card {
    min-width: 0;
}

.projects-page-hero h1,
.projects-page-hero p,
.portfolio-card h2,
.portfolio-card p,
.projects-page-cta h2,
.projects-page-cta p {
    overflow-wrap: normal;
    word-break: normal;
}
    /* =====================================================
       PHONE - LEOMA-COMMERCIAL-CONVERSION.HTML
       ===================================================== */
/* ----------------------------------------------------------
   LEOMA-COMMERCIAL-CONVERSION.HTML - HERO
   ---------------------------------------------------------- */

.leoma-hero {
    padding: 90px 0 88px;
}

.leoma-hero-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.leoma-hero h1 {
    max-width: 100%;
    font-size: 40px;
    line-height: 1.08;
    margin-bottom: 28px;
}

.leoma-hero p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.8;
}


/* ----------------------------------------------------------
   LEOMA-COMMERCIAL-CONVERSION.HTML - FEATURE IMAGE
   ---------------------------------------------------------- */

.leoma-feature-image {
    padding: 0 0 88px;
}

.leoma-feature-image-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.leoma-feature-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}


/* ----------------------------------------------------------
   LEOMA-COMMERCIAL-CONVERSION.HTML - STORY
   ---------------------------------------------------------- */

.leoma-story {
    padding: 88px 0 96px;
}

.leoma-story-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.leoma-story h2,
.leoma-outcome h2 {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 28px;
}

.leoma-story p,
.leoma-outcome p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 22px;
}


/* ----------------------------------------------------------
   LEOMA-COMMERCIAL-CONVERSION.HTML - SCOPE
   ---------------------------------------------------------- */

.leoma-scope {
    padding: 88px 0 96px;
}

.leoma-scope-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
}

.leoma-scope-block {
    width: 100%;
    padding-top: 24px;
}

.leoma-scope-block h2 {
    max-width: 100%;
    font-size: 28px;
    line-height: 1.16;
    margin-bottom: 20px;
}

.leoma-scope-block p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}

.leoma-scope-block p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   LEOMA-COMMERCIAL-CONVERSION.HTML - GALLERY
   ---------------------------------------------------------- */

.leoma-gallery {
    padding: 88px 0 96px;
}

.leoma-gallery-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.leoma-gallery h2 {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 28px;
}

.leoma-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 42px;
}

.leoma-gallery-item {
    width: 100%;
}

.leoma-gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    margin-bottom: 18px;
}

.leoma-gallery-item p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.8;
}


/* ----------------------------------------------------------
   LEOMA-COMMERCIAL-CONVERSION.HTML - OUTCOME / FINAL CTA
   ---------------------------------------------------------- */

.leoma-outcome {
    padding: 96px 0 104px;
}

.leoma-outcome-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
}

.leoma-outcome h2 {
    margin-left: auto;
    margin-right: auto;
}

.leoma-outcome p {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
}

.leoma-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 330px;
    min-height: 54px;
    padding: 17px 22px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-align: center;
}


/* ----------------------------------------------------------
   LEOMA-COMMERCIAL-CONVERSION.HTML - MOBILE SAFETY
   ---------------------------------------------------------- */

.leoma-hero-inner,
.leoma-feature-image-inner,
.leoma-story-inner,
.leoma-scope-inner,
.leoma-gallery-inner,
.leoma-outcome-inner,
.leoma-scope-block,
.leoma-gallery-item {
    min-width: 0;
}

.leoma-hero h1,
.leoma-hero p,
.leoma-story h2,
.leoma-story p,
.leoma-scope-block h2,
.leoma-scope-block p,
.leoma-gallery h2,
.leoma-gallery-item p,
.leoma-outcome h2,
.leoma-outcome p {
    overflow-wrap: normal;
    word-break: normal;
}

    /* =====================================================
       PHONE - DUPLEX-CEILING-RESTORATION.HTML
       ===================================================== */

/* ---------------------------------------------------------
   DUPLEX-CEILING-RESTORATION.HTML - HERO
   --------------------------------------------------------- */

.duplex-hero {
    padding: 96px 0 88px;
}

.duplex-hero-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.duplex-hero h1 {
    max-width: 100%;
    font-size: 40px;
    line-height: 1.08;
    margin-bottom: 28px;
}

.duplex-hero p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   DUPLEX-CEILING-RESTORATION.HTML - FEATURE IMAGE
   --------------------------------------------------------- */

.duplex-feature-image {
    padding: 0 0 88px;
}

.duplex-feature-image-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.duplex-feature-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}


/* ---------------------------------------------------------
   DUPLEX-CEILING-RESTORATION.HTML - STORY
   --------------------------------------------------------- */

.duplex-story {
    padding: 88px 0 96px;
}

.duplex-story-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.duplex-story h2,
.duplex-performance h2,
.duplex-outcome h2 {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 28px;
}

.duplex-story p,
.duplex-performance p,
.duplex-outcome p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 22px;
}


/* ---------------------------------------------------------
   DUPLEX-CEILING-RESTORATION.HTML - SCOPE
   --------------------------------------------------------- */

.duplex-scope {
    padding: 88px 0 96px;
}

.duplex-scope-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
}

.duplex-scope-block {
    width: 100%;
    padding-top: 24px;
}

.duplex-scope-block h2 {
    max-width: 100%;
    font-size: 28px;
    line-height: 1.16;
    margin-bottom: 20px;
}

.duplex-scope-block p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}

.duplex-scope-block p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   DUPLEX-CEILING-RESTORATION.HTML - PERFORMANCE
   --------------------------------------------------------- */

.duplex-performance {
    padding: 88px 0 96px;
}

.duplex-performance-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   DUPLEX-CEILING-RESTORATION.HTML - GALLERY
   --------------------------------------------------------- */

.duplex-gallery {
    padding: 88px 0 96px;
}

.duplex-gallery-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.duplex-gallery h2 {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 28px;
}

.duplex-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 42px;
}

.duplex-gallery-item {
    width: 100%;
}

.duplex-gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    margin-bottom: 18px;
}

.duplex-gallery-item p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   DUPLEX-CEILING-RESTORATION.HTML - OUTCOME / FINAL CTA
   --------------------------------------------------------- */

.duplex-outcome {
    padding: 96px 0 104px;
}

.duplex-outcome-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
}

.duplex-outcome h2 {
    margin-left: auto;
    margin-right: auto;
}

.duplex-outcome p {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
}

.duplex-consultation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 330px;
    min-height: 54px;

    padding: 17px 22px;

    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-align: center;
}


/* ---------------------------------------------------------
   DUPLEX-CEILING-RESTORATION.HTML - MOBILE SAFETY
   --------------------------------------------------------- */

.duplex-hero-inner,
.duplex-feature-image-inner,
.duplex-story-inner,
.duplex-scope-inner,
.duplex-performance-inner,
.duplex-gallery-inner,
.duplex-outcome-inner,
.duplex-scope-block,
.duplex-gallery-item {
    min-width: 0;
}

.duplex-hero h1,
.duplex-hero p,
.duplex-story h2,
.duplex-story p,
.duplex-scope-block h2,
.duplex-scope-block p,
.duplex-performance h2,
.duplex-performance p,
.duplex-gallery h2,
.duplex-gallery-item p,
.duplex-outcome h2,
.duplex-outcome p {
    overflow-wrap: normal;
    word-break: normal;
}

    /* =====================================================
       PHONE - BATHROOM-RENOVATION.HTML
       ===================================================== */

/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - HERO
   --------------------------------------------------------- */

.bathroom-hero {
    padding: 90px 0 88px;
}

.bathroom-hero-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.bathroom-hero h1 {
    max-width: 100%;
    font-size: 40px;
    line-height: 1.08;
    margin-bottom: 28px;
}

.bathroom-hero p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - FEATURE IMAGE
   --------------------------------------------------------- */

.bathroom-feature-image {
    padding: 0 0 88px;
}

.bathroom-feature-image-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.bathroom-feature-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - PROJECT STORY
   --------------------------------------------------------- */

.bathroom-story {
    padding: 88px 0 96px;
}

.bathroom-story-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.bathroom-story h2 {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 28px;
}

.bathroom-story p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 22px;
}

.bathroom-story p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - DETAIL
   --------------------------------------------------------- */

.bathroom-detail {
    padding: 88px 0 96px;
}

.bathroom-detail-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.bathroom-detail h2 {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 28px;
}

.bathroom-detail p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 22px;
}

.bathroom-detail p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - STORAGE
   --------------------------------------------------------- */

.bathroom-storage {
    padding: 88px 0 96px;
}

.bathroom-storage-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.bathroom-storage h2 {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 28px;
}

.bathroom-storage p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 22px;
}

.bathroom-storage p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - SCOPE
   --------------------------------------------------------- */

.bathroom-scope {
    padding: 88px 0 96px;
}

.bathroom-scope-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
}

.bathroom-scope-block {
    width: 100%;
    padding-top: 24px;
}

.bathroom-scope-block h2 {
    max-width: 100%;
    font-size: 28px;
    line-height: 1.16;
    margin-bottom: 20px;
}

.bathroom-scope-block p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}

.bathroom-scope-block p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - GALLERY
   --------------------------------------------------------- */

.bathroom-gallery {
    padding: 88px 0 96px;
}

.bathroom-gallery-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.bathroom-gallery h2 {
    max-width: 100%;
    font-size: 38px;
    line-height: 1.14;
    margin-bottom: 28px;
}

.bathroom-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 42px;
}

.bathroom-gallery-item {
    width: 100%;
}

.bathroom-gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    margin-bottom: 18px;
}

.bathroom-gallery-item p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - PROJECT OUTCOME
   --------------------------------------------------------- */

.bathroom-outcome {
    padding: 96px 0 104px;
}

.bathroom-outcome-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
}

.bathroom-outcome h2 {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;

    font-size: 38px;
    line-height: 1.14;
}

.bathroom-outcome p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;

    font-size: 15px;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - CONSULTATION BUTTON
   --------------------------------------------------------- */

.bathroom-consultation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 330px;
    min-height: 54px;

    margin-top: 40px;
    padding: 17px 22px;

    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-align: center;
}


/* ---------------------------------------------------------
   BATHROOM-RENOVATION.HTML - MOBILE SAFETY
   --------------------------------------------------------- */

.bathroom-hero-inner,
.bathroom-feature-image-inner,
.bathroom-story-inner,
.bathroom-detail-inner,
.bathroom-storage-inner,
.bathroom-scope-inner,
.bathroom-gallery-inner,
.bathroom-outcome-inner,
.bathroom-scope-block,
.bathroom-gallery-item {
    min-width: 0;
}

.bathroom-hero h1,
.bathroom-hero p,
.bathroom-story h2,
.bathroom-story p,
.bathroom-detail h2,
.bathroom-detail p,
.bathroom-storage h2,
.bathroom-storage p,
.bathroom-scope-block h2,
.bathroom-scope-block p,
.bathroom-gallery h2,
.bathroom-gallery-item p,
.bathroom-outcome h2,
.bathroom-outcome p {
    overflow-wrap: normal;
    word-break: normal;
}

    /* =====================================================
       PHONE - CABINET-REFINISHING.HTML
       ===================================================== */

/* ---------------------------------------------------------
   CABINET HERO
   --------------------------------------------------------- */

.cabinet-hero {
    padding: 90px 0 88px;
}

.cabinet-hero-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.cabinet-hero h1 {
    font-size: 40px;
    line-height: 1.08;
    margin-bottom: 28px;
}

.cabinet-hero p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   CABINET FEATURE IMAGE
   --------------------------------------------------------- */

.cabinet-feature-image {
    padding: 0 0 88px;
}

.cabinet-feature-image-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.cabinet-feature-image img {
    width: 100%;
    height: auto;
	aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
}


/* ---------------------------------------------------------
   CABINET STORY
   --------------------------------------------------------- */

.cabinet-story {
    padding: 88px 0 96px;
}

.cabinet-story-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.cabinet-story h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.cabinet-story p {
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 24px;
}


/* ---------------------------------------------------------
   CABINET REFINISHING PROCESS
   --------------------------------------------------------- */

.cabinet-refinishing-process {
    padding: 88px 0 96px;
}

.cabinet-refinishing-process-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.cabinet-refinishing-process h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.cabinet-refinishing-process p {
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 24px;
}


/* ---------------------------------------------------------
   CABINET PRESERVATION
   --------------------------------------------------------- */

.cabinet-preservation {
    padding: 88px 0 96px;
}

.cabinet-preservation-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.cabinet-preservation h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.cabinet-preservation p {
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 24px;
}


/* ---------------------------------------------------------
   CABINET SCOPE
   --------------------------------------------------------- */

.cabinet-scope {
    padding: 30px 0 96px;
}

.cabinet-scope-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

.cabinet-scope-block {
    padding-top: 24px;
}

.cabinet-scope-block h2 {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 18px;
}

.cabinet-scope-block p {
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}


/* ---------------------------------------------------------
   CABINET GALLERY
   --------------------------------------------------------- */

.cabinet-gallery {
    padding: 92px 0 100px;
}

.cabinet-gallery-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
}

.cabinet-gallery h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 28px;
}

.cabinet-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    margin-top: 48px;
}

.cabinet-gallery-item {
    width: 100%;
}

.cabinet-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-bottom: 18px;
}
.cabinet-gallery-item p {
    font-size: 15px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   CABINET OUTCOME
   --------------------------------------------------------- */

.cabinet-outcome {
    padding: 96px 0 110px;
}

.cabinet-outcome-inner {
    width: 86%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
}

.cabinet-outcome h2 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 30px;
}

.cabinet-outcome p {
    font-size: 15px;
    line-height: 1.85;
    margin: 0 auto 24px;
    max-width: 100%;
}


/* ---------------------------------------------------------
   CABINET CONSULTATION BUTTON
   --------------------------------------------------------- */

.cabinet-consultation-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 330px;

    margin: 42px auto 0;
    padding: 17px 22px;

    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.20em;
    text-align: center;
    white-space: nowrap;
}

    /* =====================================================
       PHONE - CONTACT.HTML
       ===================================================== */

/* ----------------------------------------------------------
   CONTACT HERO
   ---------------------------------------------------------- */

.contact-hero {
    padding: 80px 0 40px;
}

.contact-hero-inner {
    width: 86%;
    margin: 0 auto;
}

.contact-hero h1 {
    font-size: 40px;
    line-height: 1.06;
    margin: 0 0 24px;
}

.contact-hero p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 20px;
}


/* ----------------------------------------------------------
   CONTACT DETAILS
   ---------------------------------------------------------- */

.contact-details {
    padding: 0;
}

.contact-details-inner {
    width: 86%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0;
    align-items: start;
    align-content: start;
    border-top: 1px solid rgba(184, 149, 94, 0.45);
    padding-top: 0;
}


/* ----------------------------------------------------------
   CONTACT CARDS
   ---------------------------------------------------------- */

.contact-card {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 24px 0;
    display: block;
    border-top: none;
    border-bottom: 1px solid rgba(184, 149, 94, 0.45);
}

.contact-card:last-child {
    border-bottom: none;
	padding-bottom: 26px;
}

.contact-card h2 {
    font-size: 28px;
    line-height: 1.15;
    margin: 0 0 14px;
}

.contact-card p,
.contact-card a {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 0;
}

.contact-card p + p {
    margin-top: 10px;
}

.contact-card a[href^="mailto:"] {
    display: block;
    width: 100%;

    font-size: clamp(13px, 3.8vw, 15px);

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ----------------------------------------------------------
   PRIVATE CONSULTATION
   ---------------------------------------------------------- */

.contact-consultation {
    padding: 64px 0 48px;
}

.contact-consultation-inner {
    width: 86%;
    margin: 0 auto;
    padding-top: 0;
    border-top: none;
	text-align: center;
}

.contact-consultation h2 {
    font-size: 38px;
    line-height: 1.08;
    margin: 0 0 36px;
}

.contact-consultation p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 auto 30px;
}


/* ----------------------------------------------------------
   CONSULTATION BUTTON
   ---------------------------------------------------------- */

.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin: 20px 0 0;
    padding: 17px 16px;

    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-align: center;
    white-space: normal;
}


/* ----------------------------------------------------------
   PHONE SAFETY
   ---------------------------------------------------------- */

.contact-hero,
.contact-details,
.contact-consultation {
    overflow-x: hidden;
}

.contact-hero-inner,
.contact-details-inner,
.contact-consultation-inner,
.contact-card {
    box-sizing: border-box;
}

.contact-hero h1,
.contact-card h2,
.contact-consultation h2 {
    overflow-wrap: normal;
    word-break: normal;
}

.contact-hero p,
.contact-card p,
.contact-card a,
.contact-consultation p {
    overflow-wrap: break-word;
}

    /* =====================================================
       PHONE - CONSULTATION.HTML
       ===================================================== */

	/* -------------------------------------------------------
       CONSULTATION HERO
       ------------------------------------------------------- */

     .consultation-page-hero {
        padding: 80px 0 40px;
        overflow-x: hidden;
    }

    .consultation-page-hero-inner {
        width: 86%;
        max-width: none;
        margin: 0 auto;
    }

    .consultation-page-hero h1 {
        font-size: 40px;
        line-height: 1.08;
        margin-bottom: 32px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .consultation-page-hero p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.8;
        margin: 0 0 18px;
    }


    /* -------------------------------------------------------
       CONSULTATION PROCESS
       ------------------------------------------------------- */

    .consultation-process {
        padding: 40px 0 56px;
        overflow-x: hidden;
    }

    .consultation-process-inner {
        width: 86%;
        max-width: none;
        margin: 0 auto;
    }

    .consultation-process h2 {
        font-size: 38px;
        line-height: 1.12;
        margin-bottom: 48px;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .process-step {
        padding: 32px 0 40px;
    }

    .process-step:first-child {
        padding-top: 24px;
    }

    .process-step h3 {
        font-size: 11px;
        letter-spacing: 0.20em;
        margin-bottom: 18px;
    }

    .process-step h4 {
        font-size: 26px;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .process-step p {
        font-size: 15px;
        line-height: 1.8;
        max-width: 100%;
    }


    /* -------------------------------------------------------
       CONSULTATION FORM
       ------------------------------------------------------- */

    .consultation-form-section {
        padding: 64px 0 72px;
        overflow-x: hidden;
    }

    .consultation-form-inner {
        width: 86%;
        max-width: none;
        margin: 0 auto;
    }

	/* =========================================================
   		SUCCESS STATE
   	   ========================================================= */

.consultation-form-section.is-success {
    padding-top: 44px;
    padding-bottom: 56px;
}
	
.consultation-form[hidden] {
    display: none !important;
}

.consultation-success {
    padding: 0;
    max-width: 100%;
}

.consultation-success .section-label {
    margin-bottom: 20px;
}

.consultation-success h2 {
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 24px;
}

.consultation-success p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   FORM
   ========================================================= */

    .consultation-form {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .form-group,
    .form-group.full-width {
        grid-column: 1;
        width: 100%;
        min-width: 0;
    }

    .form-group label {
        font-size: 10px;
        letter-spacing: 0.20em;
        margin-bottom: 12px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        font-size: 15px;
        padding: 17px 16px;
    }

    .form-group textarea {
        min-height: 180px;
    }


    /* -------------------------------------------------------
       SUBMIT BUTTON
       ------------------------------------------------------- */

    .consultation-submit {
        grid-column: 1;
        justify-self: stretch;

        width: 100%;
        box-sizing: border-box;

        margin-top: 24px;
        padding: 20px 18px;

        text-align: center;
        white-space: normal;
    }
}

/* =========================================================
   END PHONE CSS
   768px AND BELOW
   ========================================================= */

/* =========================================================
   SMALL PHONE CSS
   480px AND BELOW
   =========================================================

   Purpose:
   Refine the standard phone experience for narrower
   smartphone displays.

   This section builds upon the responsive philosophy
   established for standard phones while addressing
   situations where available horizontal space becomes
   significantly more limited.

   This is NOT a separate visual design.

   Primary considerations:
   - Narrow Android phones
   - Smaller iPhones
   - Older smartphone displays
   - Narrow browser viewports

   Primary objectives:
   - Preserve the luxury visual language
   - Maintain readable typography
   - Prevent horizontal overflow
   - Protect minimum horizontal margins
   - Prevent headings from becoming crowded
   - Prevent buttons from exceeding viewport width
   - Maintain comfortable touch targets
   - Refine image cropping where necessary
   - Preserve intentional negative space
   - Maintain clear visual hierarchy

   IMPORTANT:
   Only make additional corrections here when the
   standard phone layout becomes too compressed.

   ========================================================= */

@media screen and (max-width: 480px) {


    /* =====================================================
       SMALL PHONE - GLOBAL
       ===================================================== */



    /* =====================================================
       SMALL PHONE - INDEX.HTML
       ===================================================== */



    /* =====================================================
       SMALL PHONE - SERVICES.HTML
       ===================================================== */



    /* =====================================================
       SMALL PHONE - PROJECTS.HTML
       ===================================================== */



    /* =====================================================
       SMALL PHONE - LEOMA-COMMERCIAL-CONVERSION.HTML
       ===================================================== */



    /* =====================================================
       SMALL PHONE - DUPLEX-CEILING-RESTORATION.HTML
       ===================================================== */



    /* =====================================================
       SMALL PHONE - BATHROOM-RENOVATION.HTML
       ===================================================== */



    /* =====================================================
       SMALL PHONE - CABINET-REFINISHING.HTML
       ===================================================== */



    /* =====================================================
       SMALL PHONE - CONTACT.HTML
       ===================================================== */



    /* =====================================================
       SMALL PHONE - CONSULTATION.HTML
       ===================================================== */


}


/* =========================================================
   END SMALL PHONE CSS
   480px AND BELOW
   ========================================================= */