@charset "UTF-8";                           /* Declares the character encoding for the stylesheet */

/* GLOBAL BOX-SIZING RESET TO FIX MOBILE OVERFLOW RESIZE ISSUE I'M HAVING */
*, *::before, *::after {               /* Apply to all elements and their pseudo-elements */
  box-sizing: border-box;              /* Use border-box model for predictable sizing */
}

/* FIX FOR LONG UNBROKEN TEXT STRINGS CAUSING OVERFLOW */
p, h1, h2, h3, h4, h5, h6, address, a, button, strong {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* FIX EDGECASE OF HORIZONTAL SCROLLBAR ON SMALL SCREENS */
html {
    overflow-x: hidden;
}
  
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* THIS IS THE PAGE BODY STYLESHEET FOR ALL PAGES EXCEPT ABOUT.HTML    */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* This stylesheet only contains styles for everything but the header, navigation, and footer. */
/* Header & Footer styles are managed by the styles.css stylesheet located in the root directory of this project */

/* STYLESHEET BY: Willow Poortenga */
/* NOTE: Comments throughout the stylesheet explain each section and style for clarity and maintainability and some 
were autocompleted from VSCode while writing to help me keep track of "What does what". This stlyesheet took me forever
to make, and I'm going to be applying most of what I'm doing on here to my own personal site - so that's why I went a little bit
overboard with the styling rules. No AI was used in the making of the rules themselves, only in helping make the descriptions of
rules I made and forgot the purpose of, or to help me get a better understanding of what order certain rules should be in / what would
be a better fit for my usecase (most of the time it was a google search with my own research that led to the answer I needed and for
this assignment, the book was heavily used or stackoverflow). Before submitting my final, I will be reaching out to
classmates and the professor for feedback. THIS CSS HAS NOT BEEN VALIDATED YET AS IT IS STILL A WORK IN PROGRESS. ERRORS ARE PRONE TO EXIST */

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* START OF PAGE_BODY.CSS                                               */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* THEME EXTENSIONS (page-body specific variables that complement / borrowed from styles.css palette) */
:root {
    --page-bg: #FBFAF7;                  /* Page background behind main content */
    --card-bg: #FCF9F5;                  /* Card background color used for article containers */
    --card-border: rgba(0,0,0,0.035);    /* Border color for subtle separation of cards */
    --muted-text: #333;                  /* Default body copy color for readability */
    --accent: #c8a045;                   /* Gold accent color to match header palette */
    --gutter: 18px;                        /* Horizontal gutter used across layout */
    --container-max: 1200px;               /* Maximum width for main content container */
    --radius: 12px;                        /* Default border radius for cards and images */
    --shadow-soft: 0 8px 22px rgba(0,0,0,0.06); /* Soft shadow used for elevation */
    --img-pad-mobile: 14px;                /* Padding applied around images on mobile */
    --img-pad-desktop: 18px;               /* Padding applied around images on desktop */
    --contact-gap: 14px;                   /* Vertical gap used between image and aside on contact page */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* RESET / BASE FOR MAIN CONTENT                                        */
/* Main content wrapper: constrained width, centered, and readable     */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
main {
    width: 100%;                            /* Use full available width of the parent */
    max-width: var(--container-max);        /* Constrain to the global container max width */
    margin: 20px auto;                      /* Vertical spacing and horizontal centering */
    padding: 0 var(--gutter);               /* Horizontal inner spacing using the gutter variable */
    color: var(--muted-text);               /* Default text color for main content */
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Cross-platform font stack */
    line-height: 1.6;                       /* Comfortable line height for paragraphs */
    background: transparent;                /* Keep background transparent to show page bg */
}

/* subtle page background behind main */
body {
    background: var(--page-bg);             /* Soft off-white page background */
    overflow-x: hidden;                     /* Prevent horizontal overflow from any rogue element */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ARTICLE CARD - MOBILE FIRST                                         */
/* Card styles for articles inside <main> (mobile-first)               */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
main article {
    background: var(--card-bg);             /* Background color for article card */
    border: 1px solid var(--card-border);   /* Thin border to separate card from page */
    border-radius: 10px;                    /* Rounded corners for a softer card look */
    box-shadow: var(--shadow-soft);         /* Soft drop shadow to lift card off page */
    margin: 14px 0;                         /* Vertical spacing between article cards */
    overflow: visible;                      /* Allow visual positioning of aside; not clipped */
    padding: 18px;                          /* Inner padding for article content on mobile */
    box-sizing: border-box;                 /* Include padding in width calculations */
    max-width: 100%;                        /* Prevent article from stretching wider than viewport */
}

/* Article title: mobile-first, centered and prominent */
main article > h2 {                         /* Target h2 titles directly inside articles */
    font-size: 1.35rem;                     /* Mobile title size for prominence */
    margin-bottom: 8px;                     /* Space below the title for rhythm */
    color: #111;                          /* Strong title color for contrast */
    font-weight: 700;                       /* Bold weight to emphasize the title */
    text-align: center;                     /* Center titles on mobile */
    letter-spacing: 0.2px;                  /* Slight letter spacing for polish */
}

/* Section subheading: mobile-first, centered */
main article section > h3 {                 /* Target h3 headings inside sections */
    font-size: 1rem;                        /* Subheading size on mobile */
    margin: 6px 0 12px;                     /* Top and bottom spacing for rhythm */
    color: #444;                          /* Muted color for subheadings */
    font-weight: 600;                       /* Slightly bold to create hierarchy */
    text-align: center;                     /* Center subheadings on mobile */
}

/* Section subheading: mobile-first, centered */
main article section > h4 {                 /* Target h4 subheadings inside sections */
    font-size: 1rem;                        /* Subheading size on mobile */
    margin: 6px 0 12px;                     /* Top and bottom spacing for rhythm */
    color: #444;                          /* Muted color for subheadings */
    font-weight: 600;                       /* Slightly bold to create hierarchy */
    text-align: center;                     /* Center subheadings on mobile */
}

/* Slightly larger "About our Company" and "Our Services" headings on index */
main article > section:first-of-type > h3 { /* Target first section h3 (About our Company) */
    font-size: 1.15rem;                     /* Slightly larger for emphasis */
    margin-top: 6px;                        /* Maintain vertical rhythm */
    margin-bottom: 12px;                    /* Maintain spacing below heading */
}

main article > section:nth-of-type(2) > h3 {/* Target second section h3 (Our Services) */
    font-size: 1.15rem;                     /* Slightly larger for emphasis */
    margin-top: 6px;                        /* Maintain vertical rhythm */
    margin-bottom: 12px;                    /* Maintain spacing below heading */
}

/* Section wrapper: stacked on mobile */
main article section {
    display: block;                         /* Stack section content vertically on mobile */
    margin-bottom: 12px;                    /* Space after section for rhythm */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* IMAGE / FIGURE RULES (CENTERED IMAGES)                              */
/* Images are centered inside articles on all viewports                 */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
img {
    display: block;                         /* Make image a block-level element for predictable layout */
    max-width: 100%;                        /* Prevent overflow of images */
    height: auto;                           /* Preserve intrinsic aspect ratio */
    border-radius: var(--radius);           /* Rounded corners for visual consistency */
    box-shadow: 0 6px 16px rgba(0,0,0,0.04);/* Gentle shadow to lift images slightly */
    object-fit: cover;                      /* Crop image to fill its box while preserving aspect */
    object-position: center;                /* Center the focal point of the image */
}

/* Images inside articles: centered and padded like a visual card */
main article img {
    display: block;                         /* Ensure block-level behavior */
    width: 100%;                            /* Let image fill container */
    padding-left: var(--img-pad-mobile);    /* Padding on left for card effect */
    padding-right: var(--img-pad-mobile);   /* Padding on right for card effect */
    height: auto;                           /* Maintain aspect ratio */
    max-height: 420px;                      /* Limit max height for mobile viewports */
    margin: 0 auto calc(var(--contact-gap) + 6px) auto; /* Center image and add vertical spacing below */
    background: #ffffff;                  /* White background to separate image from card */
    border-radius: var(--radius);           /* Rounded corners for visual consistency */
    box-shadow: 0 6px 16px rgba(0,0,0,0.04); /* Gentle shadow to lift images slightly */
    object-fit: cover;                      /* Crop image to fill its box while preserving aspect */
    object-position: center;                /* Center the focal point of the image */
    box-sizing: border-box;                 /* Include padding in width calculations */
}

main article section img + aside,           /* Aside that immediately follows an image inside a section */
main article section img ~ aside {          /* Aside that is a later sibling of the image inside a section */
    width: 100%;                            /* Full width on mobile */
    padding-left: var(--img-pad-mobile);    /* Match image padding on left */
    padding-right: var(--img-pad-mobile);   /* Match image padding on right */
}

/* Figure and caption centered */
main article section figure {               /* Figure wrapper for images with captions */
    display: block;                         /* Default block flow for figure on mobile */
    margin: 0 0 14px 0;                     /* Space below the figure */
    padding: 0;                             /* Reset any default figure padding */
    text-align: center;                     /* Center caption and figure content */
}

main article section figure figcaption {    /* Caption styling for images */
    margin-top: 12px;                       /* Space between image and caption */
    padding: 0;                             /* Reset figcaption padding for consistent spacing */
    color: var(--muted-text);               /* Use muted text color for caption copy */
    font-size: 0.98rem;                     /* Slightly smaller than body for caption readability */
    text-align: center;                     /* Center caption text */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* "OUR SERVICES" DECORATIVE LINE                                      */
/* Decorative bar inserted above the "Our Services" heading on index   */
/* This took me most of Thanksgiving Break to figure out, and I can't  */
/* be bothered to explain how it works here. Just trust me???   maybe  */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
main article > section:nth-of-type(2) > h3::before {    /* Target the second section h3 (Our Services) */
    content: "";                            /* Render pseudo-element */
    display: block;                         /* Occupy its own line */
    width: 72px;                            /* Fixed width for the decorative bar */
    height: 6px;                            /* Thickness of the bar */
    background: linear-gradient(90deg, var(--accent), rgba(200,160,69,0.6)); /* Gold gradient accent */
    margin: 0 auto 12px;                    /* Center the bar and add spacing below it */
    border-radius: 4px;                     /* Slight rounding for a softer look */
    box-shadow: 0 4px 10px rgba(200,160,69,0.12); /* Subtle glow to emphasize the bar */
}

/* Slightly reduce the bar on small screens for balance */
@media screen and (max-width: 420px) {
    main article > section:nth-of-type(2) > h3::before {    /* Target the same decorative bar */
        width: 48px;                         /* Narrower width for small viewports */
        height: 5px;                         /* Slightly thinner */
        margin-bottom: 10px;                 /* Slightly reduced spacing */
    }
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* LISTS, NESTED LISTS, AND SERVICE ITEMS                              */
/* Ensure readable spacing and hierarchy for services pages            */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
main article ul {
    margin: 8px 0 12px 20px;                /* Indent and vertical spacing */
    padding: 0;                             /* Reset list padding */
    list-style: disc;                       /* Use disc bullets for unordered lists */
}

main article ul ul {
    margin-left: 18px;                      /* Additional indent for nested lists */
    list-style: circle;                     /* Circle bullets for nested lists */
}

main article li {
    margin: 6px 0;                          /* Vertical spacing between list items */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* CONTACT PAGE: place aside directly below the contact image          */
/* This rule assumes the aside has been moved inside the same section  */
/* as the image and placed immediately after the <img> element.       */
/* That HTML change is the recommended approach for predictable layout.*/
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* Aside that immediately follows an image inside a section: image -> aside -> paragraph */
main article section > img + aside {        /* Aside that immediately follows an image inside a section */
    display: block;                         /* Ensure block-level behavior */
    margin: 0 auto calc(var(--contact-gap)) auto; /* Center aside and add vertical spacing below it */
    width: 100%;                            /* Full width on mobile */
    padding-left: var(--img-pad-mobile);    /* Match image padding on left */
    padding-right: var(--img-pad-mobile);   /* Match image padding on right */
    background: rgba(88,88,88,0.03);      /* Very subtle tint to separate aside visually */
    border-left: 4px solid rgba(0,0,0,0.03);/* Thin left accent to indicate aside */
    border-radius: 8px;                     /* Slight rounding for aside */
    box-sizing: border-box;                 /* Include padding in width calculations */
}

/* If aside is a later sibling of the image in the same section, still place it below the image */
main article section img ~ aside {          /* Aside that is a later sibling of the image inside a section */
    display: block;                         /* Ensure block-level behavior */
    margin: 0 auto calc(var(--contact-gap)) auto; /* Center aside and add vertical spacing below it */
    width: 100%;                            /* Full width on mobile */
    padding-left: var(--img-pad-mobile);    /* Match image padding on left */
    padding-right: var(--img-pad-mobile);   /* Match image padding on right */
    background: rgba(88,88,88,0.03);      /* Very subtle tint to separate aside visually */
    border-left: 4px solid rgba(0,0,0,0.03);/* Thin left accent to indicate aside */
    border-radius: 8px;                     /* Slight rounding for aside */
    box-sizing: border-box;                 /* Include padding in width calculations */
}

/* Ensure aside heading and paragraphs have consistent spacing */
main article section > img + aside h3,      /* Heading inside aside following image */
main article section img ~ aside h3 {       /* Heading inside aside following image */
    margin: 0 0 8px 0;                      /* Tight spacing above/below heading */
    font-size: 1rem;                        /* Heading size for aside */
    color: #222;                          /* Strong color for aside heading */
    font-weight: 700;                       /* Bold weight for emphasis */
}

main article section > img + aside p,       /* Paragraphs inside aside following image */
main article section img ~ aside p {        /* Paragraphs inside aside following image */
    margin: 0;                              /* Reset margins to avoid extra gaps */
    color: var(--muted-text);               /* Muted text color for aside copy */
    font-size: 0.98rem;                     /* Slightly smaller than body for aside */
    line-height: 1.5;                       /* Comfortable line height */
}

/* Push the section's following paragraph/address down so aside doesn't overlap */
main article section img ~ aside + p,       /* Paragraph following aside */
main article section img ~ aside + address, /* Address following aside */
main article section > img + aside + p,     /* Paragraph following aside */
main article section > img + aside + address { /* Address following aside */
    margin-top: 12px;                       /* Space above content to separate from aside */
}

/* FIX ISSUE WITH H3 NOT BEING CENTERED CORRECTLY IN SOME INSTANCES */
h3 {
    text-align: center;                    /* Ensure h3 headings are centered */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ACCESSIBILITY / UTILITIES                                           */
/* Respect user preferences and provide helper utilities               */
/* Found out about these online and adapted for this project.          */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
img[alt=""] {
    display: block;                         /* Ensure decorative images behave as block elements */
}

@media (prefers-reduced-motion: reduce) {   /* Media query for users who prefer reduced motion */
    * {
        transition: none !important;        /* Disable transitions when user prefers reduced motion */
        animation: none !important;         /* Disable animations when user prefers reduced motion */
    }
}

/* Helper utilities */
.u-center {
    display: block;                         /* Ensure block-level behavior */
    margin-left: auto;                      /* Auto left margin */
    margin-right: auto;                     /* Auto right margin */
}

.u-muted {
    color: var(--muted-text);               /* Muted color for less prominent copy */
    font-size: 0.95rem;                     /* Slightly smaller than body */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* BLOCKQUOTE / TESTIMONIAL STYLES                                     */
/* Styles for quoted testimonials inside articles                      */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
main article blockquote {
    margin: 16px auto;                      /* Vertical spacing around blockquote */
    padding: 14px 18px;                     /* Inner padding for readability */
    border-left: 4px solid var(--accent);   /* Gold accent bar for emphasis */
    background: rgba(200,160,69,0.04);      /* Very subtle tinted background */
    border-radius: 8px;                     /* Rounded corners for softer look */
    font-style: italic;                     /* Italicize quote text for distinction */
    color: var(--muted-text);               /* Use muted text color for body copy */
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);/* Gentle shadow for elevation */
}

main article blockquote p {
    margin: 0;                              /* Remove default paragraph margins */
    line-height: 1.6;                       /* Comfortable line height */
}

main article blockquote footer {
    margin-top: 10px;                       /* Space above attribution */
    font-size: 0.95rem;                     /* Slightly smaller than body text */
    font-style: normal;                     /* Reset italics for attribution */
    color: #555;                            /* Muted color for attribution */
    text-align: right;                      /* Align attribution to the right */
}

main article blockquote cite {
    font-weight: 600;                       /* Slightly bold for author name */
    color: var(--accent);                   /* Gold accent color for emphasis */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* CONTACT FORM STYLES (MOBILE FIRST - BUT FOR ALL SCREEN SIZES)       */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
main article form {
    background: var(--card-bg);             /* Match article card background */
    border: 1px solid var(--card-border);   /* Subtle border for separation */
    border-radius: var(--radius);           /* Rounded corners consistent with site */
    box-shadow: var(--shadow-soft);         /* Soft shadow for elevation */
    padding: 16px;                          /* Inner padding for breathing room */
    margin: 14px 0;                         /* Vertical spacing around form */
    box-sizing: border-box;                 /* Include padding in width calculations */
}

main article form label {
    display: block;                         /* Labels stacked above inputs */
    margin: 10px 0 4px;                     /* Vertical rhythm for labels */
    font-weight: 600;                       /* Slightly bold for clarity */
    color: #222;                          /* Strong label color */
    font-size: 0.95rem;                     /* Slightly smaller than headings */
}

main article form input,
main article form textarea {
    width: 100%;                            /* Full width for mobile readability */
    padding: 10px;                          /* Comfortable inner padding */
    margin-bottom: 12px;                    /* Space below each field */
    border: 1px solid var(--card-border);   /* Subtle border consistent with cards */
    border-radius: 6px;                     /* Rounded corners for softer look */
    font-family: inherit;                   /* Match site font stack */
    font-size: 0.95rem;                     /* Harmonize with body text */
    box-sizing: border-box;                 /* Include padding in width */
    background: #fff;                     /* White background for clarity */
}

main article form textarea {
    min-height: 120px;                      /* Ensure visible area for text */
    resize: vertical;                       /* Allow vertical resizing only */
}

main article form button {
    display: block;                         /* Button occupies its own line */
    width: 100%;                            /* Full width for mobile tap targets */
    padding: 12px;                          /* Comfortable padding */
    background: var(--accent);              /* Gold accent background */
    color: #fff;                          /* White text for contrast */
    border: none;                           /* Remove default border */
    border-radius: 6px;                     /* Rounded corners consistent with inputs */
    font-size: 1rem;                        /* Readable button text */
    font-weight: 700;                       /* Bold for emphasis */
    cursor: pointer;                        /* Pointer cursor for interactivity */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);/* Subtle shadow for elevation */
}

main article form button:hover {            /* Hover effect for button */
    background: #a88436;                  /* Darker gold on hover */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* RESPONSIVE ADJUSTMENTS (TABLET + DESKTOP)                           */
/* Keep images centered and scale padding/limits for larger screens    */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* Tablet @media query */
@media screen and (min-width: 640px) {
    main {
        padding: 0 calc(var(--gutter) + 6px);    /* Slightly increase horizontal padding on larger screens */
    }

    main article {
        padding: 20px;                          /* Increase inner padding for tablet/desktop */
        border-radius: 12px;                    /* Slightly larger corner radius on larger screens */
    }

    main article img {
        width: 100%;                            /* Full width within article card */
        padding-left: var(--img-pad-desktop);   /* Increase padding around images on tablet+ */
        padding-right: var(--img-pad-desktop);  /* Increase padding around images on tablet+ */
        max-height: 520px;                      /* Increase max height for larger viewports */
        box-shadow: 0 8px 24px rgba(0,0,0,0.06); /* Slightly stronger shadow on tablet+ */
    }

    figure figcaption {
        font-size: 1rem;                        /* Slightly larger caption text on tablet+ */
    }

    /* Aside width and spacing on tablet */
    main article section img + aside,           /* Aside that immediately follows an image inside a section */
    main article section img ~ aside {          /* Aside that is a later sibling of the image inside a section */
        width: 100%;                            /* Full width on tablet */
        padding-left: var(--img-pad-desktop);   /* Desktop padding to match image */
        padding-right: var(--img-pad-desktop);  /* Desktop padding to match image */
        margin-bottom: calc(var(--contact-gap) + 6px);   /* Slightly larger bottom gap */
    }

    /* Scale the slightly larger index headings on tablet */
    main article > section:first-of-type > h3,  /* Target first section h3 (About our Company) */
    main article > section:nth-of-type(2) > h3 {    /* Target second section h3 (Our Services) */
        font-size: 1.25rem;                     /* Increase a bit more on tablet for readability */
    }
}

/* Desktop @media query */
@media screen and (min-width: 1024px) {
    main {
        margin: 28px auto;                      /* More breathing room on large screens */
    }

    main article {
        padding: 28px;                          /* Generous padding for desktop reading */
        max-width: 980px;                       /* Slightly narrower card width for readable measure */
        margin-left: auto;                      /* Center article card horizontally */
        margin-right: auto;                     /* Center article card horizontally */
    }

    main article img {
        width: 100%;                            /* Full width within article card */
        padding-left: var(--img-pad-desktop);   /* Maintain desktop padding around images */
        padding-right: var(--img-pad-desktop);  /* Maintain desktop padding around images */
        margin-bottom: calc(var(--contact-gap) + 12px); /* Larger vertical spacing below image */
        border-radius: calc(var(--radius) + 2px);  /* Slightly larger radius for desktop */
        box-shadow: 0 12px 36px rgba(0,0,0,0.08); /* Stronger shadow for desktop */
    }

    main article section img + aside,           /* Aside that immediately follows an image inside a section */
    main article section img ~ aside {          /* Aside that is a later sibling of the image inside a section */
        padding-left: var(--img-pad-desktop);   /* Desktop padding to match image */
        padding-right: var(--img-pad-desktop);  /* Desktop padding to match image */
        margin-bottom: calc(var(--contact-gap) + 12px); /* Larger bottom gap on desktop */
    }

    main article > section:nth-of-type(2) > h3::before {   /* Target the second section h3 (Our Services) */
        width: 96px;                            /* Wider decorative bar for desktop */
        height: 8px;                            /* Thicker bar for emphasis on desktop */
        margin-bottom: 16px;                    /* More spacing below the bar */
    }

    /* Desktop scale for the index headings */
    main article > section:first-of-type > h3,  /* Target first section h3 (About our Company) */
    main article > section:nth-of-type(2) > h3 {    /* Target second section h3 (Our Services) */
        font-size: 1.35rem;                     /* Desktop size for the emphasized headings */
    }
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* END OF PAGE_BODY.CSS                                                */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */