@import url("https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:wght@400;500&family=Montserrat:wght@500;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Inter:wght@400&family=Montserrat:wght@400;600;700&display=swap");


/* ==================================================
   RESET
================================================== */

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


/* ==================================================
   PAGE
================================================== */

html {
    background: #171A1F;
}

body {
    min-width: 1440px;
    min-height: 100vh;

    background: #171A1F;
    color: #F1EDE6;

    font-family: "Montserrat", sans-serif;
}


/* ==================================================
   HOMEPAGE PARENT
================================================== */

.homepage-parent {
    display: flex;

    width: 1440px;
    height: 5790px;

    padding: 10px 10px 10px 16px;

    flex-direction: column;
    align-items: center;

    gap: 6px;

    margin: 0 auto;

    background: #171A1F;
}


/* ==================================================
   NAVIGATION PARENT
================================================== */

.navigation-parent {
    display: flex;

    width: 1440px;
    height: 226px;

    padding: 12px 24px;

    justify-content: center;
    align-items: center;

    gap: 223px;

    flex-shrink: 0;

    border: 2px solid #5D5D5D;
    border-radius: 10px;

    background: rgba(32, 37, 43, 0.50);
}


/* ==================================================
   LOGO
================================================== */

.logo {
    display: flex;

    width: 384px;
    height: 198px;

    padding: 20px 32px;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 8px;
    flex-shrink: 0;
}

.logo-line {
    display: flex;

    align-items: center;
    justify-content: center;

    white-space: nowrap;
}

.logo-mark {
    font-family: "Allura", cursive;
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;

    color: #5F8F83;
}

.logo-name {
    margin-left: 16px;

    font-family: "Cormorant Garamond", serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;

    color: #F1EDE6;
}

.logo-tagline {
    width: 100%;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;

    letter-spacing: 0.19em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    color: #F1EDE4;
}


/* ==================================================
   NAVIGATION LINKS CONTAINER
================================================== */

.navigation-links {
    display: flex;

    width: 670px;
    height: 152px;

    padding: 45px 58px 45px 18px;

    justify-content: center;
    align-items: center;

    gap: 43px;
    flex-shrink: 0;
}


/* ==================================================
   NAVIGATION LINKS
================================================== */

.navigation-link {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.19em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    color: #F1EDE6;

    transition: color 180ms ease;
}

.navigation-link:hover,
.navigation-link:focus-visible {
    color: #D9785A;
}


/* ==================================================
   GET STARTED BUTTON
================================================== */

.navigation-cta {
    display: flex;

    width: 195px;
    height: 62px;

    padding: 12px 24px;

    justify-content: center;
    align-items: center;

    gap: 8px;
    flex-shrink: 0;

    border: 2px solid rgba(214, 179, 106, 0.75);
    border-radius: 10px;

    background: #C96A4E;

    box-shadow: 0 4px 4px 0 rgba(214, 179, 106, 0.40);

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.19em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    color: #F1EDE6;

    transition:
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.navigation-cta:hover,
.navigation-cta:focus-visible {
    background: #D9785A;

    transform: translateY(-2px);

    box-shadow: 0 8px 12px 0 rgba(214, 179, 106, 0.40);
}


/* ==================================================
   EMPTY SECTIONS — BUILT NEXT
================================================== */

.hero,
.services,
.why-jh-solutions,
.cta {
    width: 100%;
    flex-shrink: 0;
}

/* ==================================================
   CONTACT PAGE
================================================== */

.contact-page {
    display: flex;
    width: 1440px;
    height: 2170px;
    margin: 0 auto;
    padding: 11px 10px 9px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #171A1F;
}

.contact-page > * { flex-shrink: 0; }

.contact-page .navigation-parent {
    width: 1440px;
    gap: 470px;
}

.contact-page .navigation-parent .logo {
    width: 448px;
    height: 275px;
}

.contact-navigation-links {
    display: flex;
    width: 432px;
    height: 128px;
    padding: 45px 58px 45px 18px;
    align-items: center;
    justify-content: center;
    gap: 43px;
    flex-shrink: 0;
}

.contact-navigation-links .navigation-link {
    font-size: 16px;
    line-height: 38px;
    letter-spacing: 3.04px;
}

.contact-hero {
    display: flex;
    width: 1420px;
    height: 397px;
    padding: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    border: 2px solid #5D5D5D;
    border-radius: 10px;
    background: #20252B;
}

.contact-hero-copy {
    display: flex;
    width: 1400px;
    height: 396px;
    padding: 36px 26px 26px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: #F1EDE6;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    top: -1.6px;
    left: -1.6px;
}

.contact-hero h1,
.contact-hero h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
}

.contact-hero h1 {
    margin-bottom: 38px;
    color: #C96F4A;
    letter-spacing: 6.08px;
}

.contact-hero h2 {
    margin-bottom: 38px;
    color: #F1EDE6;
    letter-spacing: 6.08px;
}

.contact-hero p {
    color: #F1EDE6;
    font: 500 16px/38px "Montserrat", sans-serif;
    letter-spacing: 3.04px;
}

.contact-card {
    position: relative;
    display: flex;
    width: 1420px;
    height: 1098px;
    padding: 28px 0 24px;
    align-items: center;
    justify-content: center;
    border: 2px solid #5D5D5D;
    border-radius: 10px;
    background: #20252B;
}

.contact-about {
    display: flex;
    width: 688px;
    height: 1046px;
    padding: 10px 4px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 688px;
}

.contact-portrait {
    display: block;
    width: 542px;
    height: 380px;
    flex-shrink: 0;
    border-radius: 10px;
}

.contact-introduction {
    display: flex;
    width: 658px;
    height: 636px;
    padding: 57.5px 58px 122.5px 42px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    color: #F1EDE6;
}

.contact-introduction h2,
.contact-details h2 {
    color: #D9785A;
    font: 600 24px/38px "Cormorant Garamond", serif;
    letter-spacing: 4.56px;
}

.contact-introduction p,
.contact-info-copy p,
.contact-expectations p {
    color: #F1EDE6;
    font: 500 16px/38px "Montserrat", sans-serif;
    letter-spacing: 3.04px;
}

.contact-introduction h2,
.contact-introduction p {
    width: 409px;
}

.contact-accent-line {
    display: block;
    width: 109px;
    height: 1px;
    margin: 34.5px 0 40.5px;
    background: #D9785A;
}

.contact-divider {
    width: 1px;
    height: 915px;
    position: absolute;
    left: 676.4px;
    flex-shrink: 0;
    background: rgba(93, 93, 93, 0.5);
}

.contact-details {
    display: flex;
    width: 752px;
    height: 1046px;
    padding: 0 64px;
    flex-direction: column;
    align-items: flex-end;
    gap: 31px;
    flex: 0 0 752px;
    margin-left: -20px;
    position: relative;
    top: 8px;
}

.contact-get-in-touch {
    display: flex;
    width: 624px;
    height: 496px;
    padding: 0 10px 10px 0;
    gap: 10px;
}

.contact-icon-column {
    display: flex;
    width: 100px;
    height: 496px;
    padding: 45px 20px 22px;
    flex-direction: column;
    align-items: center;
    gap: 73px;
}

.contact-icon-column img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

.contact-icon-column img:first-child {
    width: 50px;
    height: 50px;
    margin: 5px;
}

.contact-icon-column .contact-icon-email {
    width: 50px;
    height: 50px;
    margin: 0;
}

.contact-info-copy {
    display: flex;
    width: 371px;
    height: 496px;
    flex-direction: column;
    gap: 10px;
}

.contact-info-copy h2 { width: 218px; height: 38px; text-align: center; white-space: nowrap; }
.contact-info-copy p { width: 371px; height: 448px; }

.contact-expectations {
    display: flex;
    flex-shrink: 0;
    width: 624px;
    height: 527px;
    padding: 66px 40px 10px;
    flex-direction: column;
    align-items: flex-start;
}

.contact-expectations h2 { margin-bottom: 30px; }
.contact-expectations h2 { width: 262px; white-space: nowrap; }
.contact-expectations p { width: 462px; height: 304px; white-space: nowrap; }
.contact-expectations p span { color: #D6B36A; }

/* ==================================================
   SERVICES PAGE
================================================== */

.services-page {
    display: flex;
    width: 1440px;
    height: 5584px;
    margin: 0 auto;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #171A1F;
}

.services-page > * { flex-shrink: 0; }
.services-page .navigation-parent .logo { width:448px; height:275px; }
.services-page .navigation-link-contact { font-size: 20px; letter-spacing: 3.8px; }

.services-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 1420px;
    height: 675px;
    padding: 0 327px 39px;
    place-items: end center;
    overflow: hidden;
    border: 1px solid #5D5D5D;
    border-radius: 10px;
    background: rgba(41,47,54,.5);
}

.services-page-hero-copy {
    display: flex;
    width: 963px;
    height: 602px;
    padding-top: 53px;
    grid-area: 1 / 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.services-page-hero h1 { color:#D9785A; font:700 32px/33px "Cormorant Garamond",serif; letter-spacing:4.8px; margin-bottom:37px; }
.services-page-hero h2 { color:#F1EDE6; font:600 24px/33px "Cormorant Garamond",serif; letter-spacing:4.8px; margin-bottom:33px; }
.services-page-hero p { color:#F1EDE6; font:500 16px/33px Montserrat,sans-serif; letter-spacing:4.8px; }

.services-page-primary {
    display:flex; width:309px; height:62px; padding:12px 24px; align-items:center; justify-content:center;
    border:2px solid rgba(214,179,106,.75); border-radius:10px; background:#C96A4E;
    box-shadow:0 4px 4px rgba(214,179,106,.4); color:#F1EDE6;
    font:800 16px/38px Montserrat,sans-serif; letter-spacing:3.04px; text-decoration:none; white-space:nowrap;
}
.services-page-hero > .services-page-primary { grid-area:1 / 1; }

.services-page-intro { width:929px; height:81px; display:flex; align-items:center; text-align:center; color:#F1EDE6; font:600 16px/27px Montserrat,sans-serif; letter-spacing:4.8px; }
.services-page-category { width:1420px; height:27px; color:#5F8F83; font:700 24px/27px "Cormorant Garamond",serif; letter-spacing:4.8px; }
.services-page-intro + .services-page-category { letter-spacing:7.2px; }

.offering-card {
    width:1420px; padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:20px;
    overflow:hidden; border:2px solid #5D5D5D; border-radius:10px; background:#20252B; color:#F1EDE6;
}
.consultation-card { height:397px; }
.service-offering { height:360px; }
.offering-card h3 { width:583px; height:23px; color:#FFF; font:700 20px/27px "Cormorant Garamond",serif; letter-spacing:6px; }
.service-offering h3 { width:292px; height:27px; letter-spacing:4px; }
.offering-card h3 span { color:#D6B36A; }
.offering-columns { display:flex; align-items:flex-start; overflow:hidden; flex-shrink:0; }
.consultation-columns { width:1392px; height:349px; padding:0 24px 24px; gap:40px; }
.offering-columns section { height:310px; padding:6px 10px; background:rgba(41,47,54,.5); border:1px solid rgba(93,93,93,.15); overflow:hidden; }
.consultation-columns section { flex-shrink:0; }
.consultation-columns section:nth-child(1){width:290px;padding:6px 0 4px}.consultation-columns section:nth-child(2){width:344px;padding:6px 10px}.consultation-columns section:nth-child(3){width:290px;padding:6px 0 10px}.consultation-columns section:nth-child(4){width:300px;padding:6px 0}
.offering-card h4 { color:#FFF; font:600 16px/27px Montserrat,sans-serif; letter-spacing:3.2px; }
.offering-card section p { color:#F1EDE6; font:500 12px/27px Montserrat,sans-serif; letter-spacing:2.4px; }
.offering-price p { font-size:14px!important; line-height:16px!important; letter-spacing:.96px!important; }
.offering-price small { display:block; margin-top:8px; color:#F1EDE6; font:500 14px/15px Montserrat,sans-serif; letter-spacing:2.8px; }

.founding-consultation .consultation-columns > section { display:flex; flex-direction:column; align-items:flex-start; }
.founding-consultation { padding:24px; }
.founding-consultation .consultation-columns h4 { white-space:nowrap; }
.founding-consultation .founding-purpose { gap:0; }
.founding-consultation .founding-purpose h4 { width:238px; height:26px; display:flex; align-items:center; margin-bottom:-25px; }
.founding-consultation .founding-purpose p { display:flex; flex-direction:column; justify-content:center; width:290px; height:181px; letter-spacing:3.6px; }
.founding-consultation .founding-includes h4 { width:104px; height:27px; letter-spacing:2.8px; }
.founding-consultation .founding-includes h4 .includes-colon { font-family:Inter,sans-serif; font-size:14px; font-weight:800; line-height:27px; letter-spacing:2.8px; }
.founding-consultation .founding-includes-primary { gap:10px; }
.founding-consultation .founding-includes-primary-body { display:flex; align-items:flex-start; width:323px; height:247px; }
.founding-consultation .founding-includes-primary p { display:flex; flex-direction:column; justify-content:center; width:323px; height:247px; }
.founding-consultation .founding-includes-secondary { gap:0; }
.founding-consultation .founding-includes-secondary p { display:flex; flex-direction:column; justify-content:center; width:228px; height:161px; }
.founding-consultation .founding-price { gap:0; }
.founding-consultation .founding-price h4 { width:88px; height:27px; }
.founding-consultation .founding-price-intro { display:flex; flex-direction:column; justify-content:center; width:297px; height:48px; color:#F1EDE6; font-size:14px; line-height:10px; letter-spacing:4.8px; }
.founding-consultation .founding-price-intro strong { font-family:Inter,sans-serif; font-weight:600; }
.founding-consultation .founding-price-intro span:last-child { font-family:Montserrat,sans-serif; font-weight:500; }
.founding-consultation .founding-price-options { display:flex; flex-direction:column; justify-content:center; width:298px; height:98px; color:#F1EDE6; font-family:Montserrat,sans-serif; font-size:14px; line-height:16px; letter-spacing:.96px; }
.founding-consultation .founding-price-options p { width:auto; height:16px; color:inherit; font:inherit; letter-spacing:inherit; }
.founding-consultation .founding-price-options strong { font-weight:600; }
.founding-consultation .founding-price-options .price-symbol { font-weight:800; }
.founding-consultation .founding-price-options .price-detail { font-size:12px; font-weight:500; }
.founding-consultation .founding-price-options .price-detail-hour { font-size:14px; line-height:16px; letter-spacing:.96px; }
.founding-consultation .founding-price-options .price-or { font-size:16px; font-weight:600; }
.founding-consultation .founding-price-note { display:flex; align-items:center; width:297.25px; height:111px; color:#F1EDE6; }
.founding-consultation .founding-price-note p { width:297.25px; height:auto; color:inherit; font:500 14px/15px Montserrat,sans-serif; line-height:15px!important; letter-spacing:2.8px!important; }

.standard-consultation .consultation-columns > section { display:flex; flex-direction:column; align-items:flex-start; }
.standard-consultation { padding:24px; }
.standard-consultation .standard-purpose { gap:7px; }
.standard-consultation .standard-purpose h4 { width:238px; height:26px; display:flex; align-items:center; }
.standard-consultation .standard-purpose-body { display:flex; flex-direction:column; justify-content:center; width:290px; height:181px; color:#F1EDE6; font:500 12px/27px Montserrat,sans-serif; letter-spacing:3.6px; white-space:pre-wrap; }
.standard-consultation .standard-purpose-body p { width:290px; height:auto; color:inherit; font:inherit; letter-spacing:inherit; }
.standard-consultation .standard-includes { gap:26px; }
.standard-consultation .standard-includes h4 { width:104px; height:27px; letter-spacing:2.8px; }
.standard-consultation .standard-includes h4 .standard-includes-colon { font-family:Inter,sans-serif; font-size:14px; font-weight:800; line-height:27px; letter-spacing:2.8px; }
.standard-consultation .standard-includes-primary-body { display:flex; align-items:flex-start; width:323px; height:189px; }
.standard-consultation .standard-includes-primary p { display:flex; flex-direction:column; justify-content:center; width:323px; height:189px; }
.standard-consultation .standard-includes-secondary-body { display:flex; flex-direction:column; justify-content:center; width:228px; height:108px; color:#F1EDE6; font:500 12px/27px Montserrat,sans-serif; letter-spacing:2.4px; white-space:pre-wrap; }
.standard-consultation .standard-includes-secondary-body p { width:228px; height:auto; color:inherit; font:inherit; letter-spacing:inherit; }
.standard-consultation .standard-price { gap:88px; }
.standard-consultation .standard-price h4 { width:88px; height:27px; }
.standard-consultation .standard-price-body { flex-direction:column; justify-content:center; width:297.25px; height:111px; color:#F1EDE6; font:500 14px/23px Montserrat,sans-serif; font-size:14px!important; line-height:23px!important; letter-spacing:2.8px!important; white-space:pre-line; transform:translateY(-69px); }

.service-columns { width:1384px; height:261px; padding:0; gap:40px; }
.service-columns section { height:261px; padding:6px; flex-shrink:0; border:0; background:rgba(41,47,54,.5); }
.service-columns section:nth-child(1){width:290px}.service-columns section:nth-child(2){width:280px}.service-columns section:nth-child(3){width:290px;padding:8px 6px 6px}.service-columns section:nth-child(4){width:170px;height:253px;padding:10px 6px}.service-columns section:nth-child(5){width:170px}
.service-price { height:172px; color:#FFF; font:600 14px/27px Montserrat,sans-serif; letter-spacing:2.8px; }

.homepage-refresh-card { padding:24px; }
.homepage-refresh-card > h3 { width:323px; height:27px; }
.homepage-refresh-card .homepage-refresh-columns { width:1384px; height:261px; gap:40px; }
.homepage-refresh-card .homepage-refresh-columns > section { display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; height:261px; border:1px solid rgba(93,93,93,.15); color:#F1EDE6; }
.homepage-refresh-card .homepage-purpose { width:290px; padding:6px; gap:24px; }
.homepage-refresh-card .homepage-purpose h4 { display:flex; align-items:center; width:238px; height:26px; }
.homepage-refresh-card .homepage-purpose p { display:flex; flex-direction:column; justify-content:center; width:238px; }
.homepage-refresh-card .homepage-includes-primary { width:280px; padding:6px; gap:34px; }
.homepage-refresh-card .homepage-includes-primary h4 { display:flex; align-items:center; width:104px; height:27px; letter-spacing:2.8px; }
.homepage-refresh-card .homepage-includes-primary h4 span:last-child { font-family:Inter,sans-serif; font-size:14px; font-weight:800; }
.homepage-refresh-card .homepage-includes-primary-body { display:flex; align-items:flex-start; width:245px; height:144px; }
.homepage-refresh-card .homepage-includes-primary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; height:118px; }
.homepage-refresh-card .homepage-includes-secondary { width:290px; padding:8px 6px 6px; gap:20px; }
.homepage-refresh-card .homepage-includes-secondary h4 { display:flex; align-items:center; width:104px; height:27px; }
.homepage-refresh-card .homepage-includes-secondary-body { display:flex; align-items:center; justify-content:center; }
.homepage-refresh-card .homepage-includes-secondary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; }
.homepage-refresh-card .homepage-deliverable { width:170px; height:253px!important; padding:10px 6px; gap:24px; }
.homepage-refresh-card .homepage-deliverable h4 { display:flex; align-items:center; width:137px; height:27px; white-space:nowrap; }
.homepage-refresh-card .homepage-deliverable h4 span:first-child { font-size:14px; }
.homepage-refresh-card .homepage-deliverable h4 span:last-child { font-family:Inter,sans-serif; font-size:16px; font-weight:800; }
.homepage-refresh-card .homepage-deliverable-body { display:flex; align-items:flex-start; width:174px; height:68px; }
.homepage-refresh-card .homepage-deliverable-body p { display:flex; flex-direction:column; justify-content:center; width:174px; height:31px; }
.homepage-refresh-card .homepage-price { width:170px; padding:6px; }
.homepage-refresh-card .homepage-price-frame { display:flex; flex-direction:column; align-items:flex-start; width:160px; height:161px; }
.homepage-refresh-card .homepage-price-frame p { width:160px; height:162px; color:#F1EDE6; font:600 14px/27px Montserrat,sans-serif; letter-spacing:2.8px; text-transform:uppercase; white-space:pre-wrap; }

.branding-refresh-card { padding:24px; }
.branding-refresh-card > h3 { width:319px; height:27px; }
.branding-refresh-card .branding-refresh-columns { width:1384px; height:261px; gap:40px; }
.branding-refresh-card .branding-refresh-columns > section { display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; height:261px; border:1px solid rgba(93,93,93,.15); color:#F1EDE6; }
.branding-refresh-card .branding-purpose { width:290px; padding:6px; gap:20px; }
.branding-refresh-card .branding-purpose h4 { display:flex; align-items:center; width:238px; height:26px; }
.branding-refresh-card .branding-purpose p { display:flex; flex-direction:column; justify-content:center; width:238px; }
.branding-refresh-card .branding-includes-primary { width:280px; padding:6px; gap:36px; }
.branding-refresh-card .branding-includes-primary h4 { display:flex; align-items:center; width:104px; height:27px; letter-spacing:2.8px; }
.branding-refresh-card .branding-includes-primary h4 span:last-child { font-family:Inter,sans-serif; font-size:14px; font-weight:800; }
.branding-refresh-card .branding-includes-primary-body { display:flex; align-items:flex-start; width:245px; height:144px; }
.branding-refresh-card .branding-includes-primary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; height:118px; }
.branding-refresh-card .branding-includes-secondary { width:290px; padding:8px 6px 6px; gap:16px; }
.branding-refresh-card .branding-includes-secondary-body { display:flex; align-items:center; justify-content:center; width:245px; }
.branding-refresh-card .branding-includes-secondary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; height:137px; color:#FFF; }
.branding-refresh-card .branding-deliverable { width:170px; height:253px!important; padding:10px 6px; gap:20px; }
.branding-refresh-card .branding-deliverable h4 { display:flex; align-items:center; width:137px; height:27px; white-space:nowrap; }
.branding-refresh-card .branding-deliverable h4 span:first-child { font-size:14px; }
.branding-refresh-card .branding-deliverable h4 span:last-child { font-family:Inter,sans-serif; font-size:16px; font-weight:800; }
.branding-refresh-card .branding-deliverable-body { display:flex; align-items:flex-start; width:174px; height:68px; }
.branding-refresh-card .branding-deliverable-body p { display:flex; flex-direction:column; justify-content:center; width:174px; height:31px; }
.branding-refresh-card .branding-price { width:170px; padding:6px; }
.branding-refresh-card .branding-price-frame { display:flex; flex-direction:column; align-items:flex-start; width:160px; height:161px; }
.branding-refresh-card .branding-price-frame p { display:flex; flex-direction:column; justify-content:center; width:160px; height:172px; color:#F1EDE6; font:600 14px/27px Montserrat,sans-serif; letter-spacing:2.8px; text-transform:uppercase; white-space:pre-wrap; }

.one-page-website-card { padding:24px; }
.one-page-website-card > h3 { width:319px; height:27px; }
.one-page-website-card .one-page-columns { width:1384px; height:261px; gap:40px; }
.one-page-website-card .one-page-columns > section { display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; height:261px; border:1px solid rgba(93,93,93,.15); color:#F1EDE6; }
.one-page-website-card .one-page-purpose { width:290px; padding:6px; gap:22px; }
.one-page-website-card .one-page-purpose h4 { display:flex; align-items:center; width:238px; height:26px; }
.one-page-website-card .one-page-purpose p { display:flex; flex-direction:column; justify-content:center; width:238px; }
.one-page-website-card .one-page-includes-primary { width:280px; padding:6px; gap:16px; }
.one-page-website-card .one-page-includes-primary h4 { display:flex; align-items:center; width:104px; height:27px; letter-spacing:2.8px; }
.one-page-website-card .one-page-includes-primary h4 span:last-child { font-family:Inter,sans-serif; font-size:14px; font-weight:800; }
.one-page-website-card .one-page-includes-primary-body { display:flex; align-items:flex-start; width:245px; height:144px; }
.one-page-website-card .one-page-includes-primary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; }
.one-page-website-card .one-page-includes-secondary { width:290px; padding:8px 6px 6px; gap:16px; }
.one-page-website-card .one-page-includes-secondary h4 { display:flex; align-items:center; width:104px; height:27px; }
.one-page-website-card .one-page-includes-secondary-body { display:flex; align-items:center; justify-content:center; width:245px; }
.one-page-website-card .one-page-includes-secondary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; }
.one-page-website-card .one-page-deliverable { width:170px; height:253px!important; padding:10px 6px; gap:12px; }
.one-page-website-card .one-page-deliverable h4 { display:flex; align-items:center; width:137px; height:27px; white-space:nowrap; }
.one-page-website-card .one-page-deliverable h4 span:first-child { font-size:14px; }
.one-page-website-card .one-page-deliverable h4 span:last-child { font-family:Inter,sans-serif; font-size:16px; font-weight:800; }
.one-page-website-card .one-page-deliverable-body { display:flex; align-items:flex-start; width:174px; height:68px; }
.one-page-website-card .one-page-deliverable-body p { display:flex; flex-direction:column; justify-content:center; width:174px; height:31px; }
.one-page-website-card .one-page-price { width:170px; padding:6px; }
.one-page-website-card .one-page-price-frame { display:flex; flex-direction:column; align-items:flex-start; width:160px; height:161px; }
.one-page-website-card .one-page-price-copy { display:flex; flex-direction:column; justify-content:center; width:160px; height:172px; color:#F1EDE6; font:600 16px/27px Montserrat,sans-serif; letter-spacing:3.2px; text-transform:uppercase; }
.one-page-website-card .one-page-price-copy p { width:160px; height:auto; color:inherit; font:inherit; font-size:16px!important; line-height:27px!important; letter-spacing:3.2px!important; }
.one-page-website-card .one-page-price-copy .one-page-price-label { font-size:14px!important; }
.one-page-website-card .one-page-price-value span:last-child { font-weight:500; }

.small-business-card { padding:24px; }
.small-business-card > h3 { width:392px; height:27px; }
.small-business-card .small-business-columns { width:1384px; height:261px; gap:40px; }
.small-business-card .small-business-columns > section { display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; height:261px; border:1px solid rgba(93,93,93,.15); color:#F1EDE6; }
.small-business-card .small-business-purpose { width:290px; padding:6px; gap:24px; }
.small-business-card .small-business-purpose h4 { display:flex; align-items:center; width:238px; height:26px; }
.small-business-card .small-business-purpose p { display:flex; flex-direction:column; justify-content:center; width:238px; }
.small-business-card .small-business-includes-primary { width:280px; padding:6px; gap:26px; }
.small-business-card .small-business-includes-primary h4 { display:flex; align-items:center; width:104px; height:27px; letter-spacing:2.8px; }
.small-business-card .small-business-includes-primary h4 span:last-child { font-family:Inter,sans-serif; font-size:14px; font-weight:800; }
.small-business-card .small-business-includes-primary-body { display:flex; align-items:flex-start; width:245px; height:144px; }
.small-business-card .small-business-includes-primary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; height:118px; }
.small-business-card .small-business-includes-secondary { width:290px; padding:8px 6px 6px; gap:24px; }
.small-business-card .small-business-includes-secondary h4 { display:flex; align-items:center; width:104px; height:27px; }
.small-business-card .small-business-includes-secondary-body { display:flex; align-items:center; justify-content:center; width:245px; height:108px; }
.small-business-card .small-business-includes-secondary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; }
.small-business-card .small-business-deliverable { width:170px; height:253px!important; padding:10px 6px; gap:20px; }
.small-business-card .small-business-deliverable h4 { display:flex; align-items:center; width:137px; height:27px; white-space:nowrap; }
.small-business-card .small-business-deliverable h4 span:first-child { font-size:14px; }
.small-business-card .small-business-deliverable h4 span:last-child { font-family:Inter,sans-serif; font-size:16px; font-weight:800; }
.small-business-card .small-business-deliverable-body { display:flex; align-items:flex-start; width:174px; height:68px; }
.small-business-card .small-business-deliverable-body p { display:flex; flex-direction:column; justify-content:center; width:174px; height:31px; color:#FFF; }
.small-business-card .small-business-price { width:170px; padding:6px; }
.small-business-card .small-business-price-frame { display:flex; flex-direction:column; align-items:flex-start; width:160px; height:161px; }
.small-business-card .small-business-price-frame p { display:flex; flex-direction:column; justify-content:center; width:160px; height:172px; color:#F1EDE6; font:600 14px/27px Montserrat,sans-serif; letter-spacing:2.8px; text-transform:uppercase; white-space:pre-wrap; }

.website-redesign-card { padding:24px; }
.website-redesign-card > h3 { width:max-content; height:27px; }
.website-redesign-card .website-redesign-columns { width:1384px; height:261px; gap:40px; }
.website-redesign-card .website-redesign-columns > section { display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; height:261px; border:1px solid rgba(93,93,93,.15); color:#F1EDE6; }
.website-redesign-card .redesign-purpose { width:290px; padding:6px; gap:22px; }
.website-redesign-card .redesign-purpose h4 { display:flex; align-items:center; width:238px; height:26px; }
.website-redesign-card .redesign-purpose p { display:flex; flex-direction:column; justify-content:center; width:238px; }
.website-redesign-card .redesign-includes-primary { width:280px; padding:6px; gap:16px; }
.website-redesign-card .redesign-includes-primary h4 { display:flex; align-items:center; width:104px; height:27px; letter-spacing:2.8px; }
.website-redesign-card .redesign-includes-primary h4 span:last-child { font-family:Inter,sans-serif; font-size:14px; font-weight:800; }
.website-redesign-card .redesign-includes-primary-body { display:flex; align-items:flex-start; width:245px; height:144px; }
.website-redesign-card .redesign-includes-primary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; }
.website-redesign-card .redesign-includes-secondary { width:290px; padding:8px 6px 6px; gap:16px; }
.website-redesign-card .redesign-includes-secondary h4 { display:flex; align-items:center; width:104px; height:27px; }
.website-redesign-card .redesign-includes-secondary-body { display:flex; align-items:center; justify-content:center; width:245px; }
.website-redesign-card .redesign-includes-secondary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; }
.website-redesign-card .redesign-deliverable { width:170px; height:253px!important; padding:10px 6px; gap:12px; }
.website-redesign-card .redesign-deliverable h4 { display:flex; align-items:center; width:137px; height:27px; white-space:nowrap; }
.website-redesign-card .redesign-deliverable h4 span:first-child { font-size:14px; }
.website-redesign-card .redesign-deliverable h4 span:last-child { font-family:Inter,sans-serif; font-size:16px; font-weight:800; }
.website-redesign-card .redesign-deliverable-body { display:flex; align-items:flex-start; width:174px; height:68px; }
.website-redesign-card .redesign-deliverable-body p { display:flex; flex-direction:column; justify-content:center; width:174px; }
.website-redesign-card .redesign-price { width:170px; padding:6px; }
.website-redesign-card .redesign-price-frame { display:flex; flex-direction:column; align-items:flex-start; width:160px; height:161px; }
.website-redesign-card .redesign-price-frame p { display:flex; flex-direction:column; justify-content:center; width:160px; height:172px; color:#F1EDE6; font:600 14px/27px Montserrat,sans-serif; letter-spacing:2.8px; text-transform:uppercase; white-space:pre-wrap; }

.website-maintenance-card { padding:24px; }
.website-maintenance-card > h3 { width:max-content; height:27px; }
.website-maintenance-card .maintenance-columns { width:1384px; height:261px; gap:40px; }
.website-maintenance-card .maintenance-columns > section { display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; height:261px; border:1px solid rgba(93,93,93,.15); color:#F1EDE6; }
.website-maintenance-card .maintenance-purpose { width:290px; padding:6px; gap:24px; }
.website-maintenance-card .maintenance-purpose h4 { display:flex; align-items:center; width:238px; height:26px; }
.website-maintenance-card .maintenance-purpose p { display:flex; flex-direction:column; justify-content:center; width:238px; }
.website-maintenance-card .maintenance-includes-primary { width:280px; padding:6px; gap:24px; }
.website-maintenance-card .maintenance-includes-primary h4 { display:flex; align-items:center; width:104px; height:27px; letter-spacing:2.8px; }
.website-maintenance-card .maintenance-includes-primary h4 span:last-child { font-family:Inter,sans-serif; font-size:14px; font-weight:800; }
.website-maintenance-card .maintenance-includes-primary-body { display:flex; align-items:flex-start; width:245px; height:144px; }
.website-maintenance-card .maintenance-includes-primary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; }
.website-maintenance-card .maintenance-includes-secondary { width:290px; padding:8px 6px 6px; gap:24px; }
.website-maintenance-card .maintenance-includes-secondary h4 { display:flex; align-items:center; width:104px; height:27px; }
.website-maintenance-card .maintenance-includes-secondary-body { display:flex; align-items:center; justify-content:center; width:245px; }
.website-maintenance-card .maintenance-includes-secondary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; }
.website-maintenance-card .maintenance-deliverable { width:170px; height:253px!important; padding:10px 6px; gap:96px; }
.website-maintenance-card .maintenance-deliverable h4 { display:flex; align-items:center; width:137px; height:27px; white-space:nowrap; }
.website-maintenance-card .maintenance-deliverable h4 span:first-child { font-size:14px; }
.website-maintenance-card .maintenance-deliverable h4 span:last-child { font-family:Inter,sans-serif; font-size:16px; font-weight:800; }
.website-maintenance-card .maintenance-deliverable-body { display:flex; align-items:flex-start; width:174px; height:68px; }
.website-maintenance-card .maintenance-deliverable-body p { display:flex; flex-direction:column; justify-content:center; width:174px; height:31px; }
.website-maintenance-card .maintenance-price { width:170px; padding:6px; }
.website-maintenance-card .maintenance-price-frame { display:flex; flex-direction:column; align-items:flex-start; width:160px; height:161px; }
.website-maintenance-card .maintenance-price-frame p { display:flex; flex-direction:column; justify-content:center; width:160px; color:#F1EDE6; font:600 14px/27px Montserrat,sans-serif; letter-spacing:2.8px; text-transform:uppercase; white-space:pre-wrap; }

.website-rescue-card { padding:24.4px; }
.website-rescue-card .service-columns > section { display:flex; flex-direction:column; align-items:flex-start; height:261px; border:1px solid rgba(93,93,93,.15); color:#FFF; }
.website-rescue-card .service-columns > section p { color:#FFF; }
.website-rescue-card .rescue-purpose { gap:22px; }
.website-rescue-card .rescue-purpose h4 { display:flex; align-items:center; width:238px; height:26px; }
.website-rescue-card .rescue-purpose-copy { display:flex; flex-direction:column; justify-content:center; width:238px; height:81px; }
.website-rescue-card .rescue-purpose-copy p { width:238px; }
.website-rescue-card .rescue-includes { gap:16px; }
.website-rescue-card .rescue-includes h4 { width:104px; height:27px; }
.website-rescue-card .rescue-includes-primary h4 { letter-spacing:2.8px; }
.website-rescue-card .rescue-includes-primary h4 span:first-child { font:600 16px/27px Montserrat,sans-serif; }
.website-rescue-card .rescue-includes-primary h4 span:last-child { font:800 14px/27px Inter,sans-serif; }
.website-rescue-card .rescue-includes-primary-body { width:245px; height:144px; }
.website-rescue-card .rescue-includes-primary-body p { display:flex; flex-direction:column; justify-content:center; width:245px; height:118px; }
.website-rescue-card .rescue-includes-secondary-body,
.website-rescue-card .rescue-includes-secondary-body p { width:245px; height:137px; }
.website-rescue-card .rescue-includes-secondary-body p { display:flex; flex-direction:column; justify-content:center; }
.website-rescue-card .service-columns > .rescue-deliverable { align-self:flex-start; height:253px; padding:10px 6px; gap:12px; }
.website-rescue-card .rescue-deliverable h4 { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; width:137px; height:27px; white-space:nowrap; text-transform:uppercase; }
.website-rescue-card .rescue-deliverable h4 span:first-child { font-size:14px; line-height:27px; }
.website-rescue-card .rescue-deliverable h4 span:last-child { font-size:16px; line-height:27px; }
.website-rescue-card .rescue-deliverable-body { display:flex; align-items:flex-start; width:174px; height:68px; }
.website-rescue-card .rescue-deliverable-body p { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; width:174px; height:31px; }
.website-rescue-card .rescue-price-frame { width:160px; height:161px; }
.website-rescue-card .rescue-price-copy { display:flex; flex-direction:column; justify-content:center; width:160px; height:172px; color:#FFF; font-family:Montserrat,sans-serif; font-weight:600; line-height:27px; letter-spacing:3.2px; text-transform:uppercase; }
.website-rescue-card .rescue-price-copy p { width:160px; height:27px; color:inherit; font-family:inherit; font-weight:inherit; line-height:27px; letter-spacing:inherit; }
.website-rescue-card .rescue-price-label { font-size:14px; }
.website-rescue-card .rescue-price-copy .rescue-price-label:nth-of-type(4) { height:54px; }
.website-rescue-card .rescue-price-value { font-size:16px; }
.website-rescue-card .rescue-price-value span:last-child { font-weight:500; }

.services-page-cta {
    position:relative; width:1420px; height:509px; display:block;
    border:2px solid #5D5D5D; border-radius:10px; background:#20252B; color:#F1EDE6; text-align:center;
}
.services-page-cta h2 { position:absolute; top:52.4px; left:715.4px; transform:translateX(-50%); color:#D9785A; font:600 32px/37px "Cormorant Garamond",serif; letter-spacing:6.08px; white-space:nowrap; }
.services-page-cta h3 { position:absolute; top:126.4px; left:715.4px; transform:translateX(-50%); font:600 16px/37px Montserrat,sans-serif; letter-spacing:3.04px; white-space:nowrap; }
.services-page-cta p { position:absolute; top:163.4px; left:715.4px; transform:translateX(-50%); font:600 16px/37px Montserrat,sans-serif; letter-spacing:3.04px; white-space:nowrap; }
.services-page-cta .services-page-primary { position:absolute; top:364.4px; left:566.4px; flex-shrink:0; }
/* ==================================================
   WHY JH SOLUTIONS
================================================== */

.why-jh-solutions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    height: 2234px;
    padding: 27px 67px;
    gap: 27px;
    overflow: hidden;
}

.why-jh-title {
    flex-shrink: 0;

    width: 100%;
    height: 115px;

    color: #5F8F83;
    font-family: "Cormorant Garamond", serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 115px;
}

.why-jh-row {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;

    overflow-wrap: break-word;
}

.why-jh-intro-row {
    width: 100%;
    height: 382px;
    padding: 46px 0;
    gap: 62px;
    overflow: hidden;
}

.why-jh-intro-lead {
    flex-shrink: 0;

    width: 100%;
    height: 38px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.8px;
}

.why-jh-intro-copy {
    flex-shrink: 0;

    width: 508px;
    height: 190px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.04px;
}

.why-jh-about-row {
    width: 100%;
    height: 138px;
    padding: 4px 0;
    gap: 16px;
}

.why-jh-heading {
    flex-shrink: 0;

    width: 100%;
    height: 37px;

    color: #5F8F83;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 6.08px;
}

.why-jh-heading-large {
    height: 38px;
    font-size: 36px;
    letter-spacing: 6.84px;
}

.why-jh-copy {
    flex-shrink: 0;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.04px;
}

.why-jh-about-copy {
    width: 100%;
    height: 76px;
}

.why-jh-help-row {
    width: 846px;
    height: 394px;
    padding: 28px 0;
    gap: 111px;
}

.why-jh-list {
    width: 846px;
}

.why-jh-help-row .why-jh-list {
    height: 190px;
}

.why-jh-principles-row {
    width: 846px;
    height: 357px;
    padding: 15px 0;
    gap: 62px;
}

.why-jh-principles-row .why-jh-list {
    height: 228px;
}

.why-jh-exists-row {
    align-items: center;
    justify-content: center;

    width: 896px;
    height: 230px;
    padding: 8px 0;
    gap: 62px;
}

.why-jh-exists-copy {
    width: 100%;
    height: 114px;
}

.why-jh-mission-row {
    align-items: center;

    width: 1216px;
    height: 190px;
    padding: 7px 0;
    gap: 62px;
}

.why-jh-mission-copy {
    flex-shrink: 0;

    width: 100%;
    height: 76px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.8px;
}

/* ==================================================
   CTA
================================================== */

.cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 893px;
    padding: 32px 307px;
    gap: 10px;
    overflow: hidden;

    border: 2px solid #5D5D5D;
    border-radius: 10px;
    background: rgba(32, 37, 43, 0.50);
}

.cta-panel {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 885px;
    height: 580px;
    padding: 67px 32px;

    border: 2px solid #5D5D5D;
    background: rgba(41, 47, 54, 0.50);
}

.cta-copy-stage {
    flex-shrink: 0;

    width: 821px;
    height: 647px;

    color: #F1EDE6;
    text-align: center;
}

.cta-title {
    height: 38px;
    margin-top: 76px;

    color: #D9785A;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 6.08px;
}

.cta-lead {
    height: 76px;
    margin-top: 38px;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.04px;
}

.cta-copy {
    height: 152px;
    margin-top: 38px;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.04px;
}

.cta-primary-button,
.cta-secondary-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    height: 62px;

    border-radius: 10px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 38px;
    letter-spacing: 3.04px;
    text-decoration: none;
    white-space: nowrap;
}

.cta-primary-button {
    width: 309px;
    padding: 12px 24px;

    border: 2px solid rgba(214, 179, 106, 0.75);
    background: #C96A4E;
    box-shadow: 0 4px 4px 0 rgba(214, 179, 106, 0.40);

    font-weight: 800;
}

.cta-secondary-button {
    width: 192px;
    padding: 10px;

    border: 2px solid #5D5D5D;
    background: rgba(93, 93, 93, 0.15);
    box-shadow: 0 4px 4px 0 rgba(93, 93, 93, 0.15);

    font-weight: 600;
}

/* ==================================================
   FOOTER
================================================== */

.footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 1420px;
    height: 379px;
    padding: 24px 30px;
    gap: 165px;
    overflow: hidden;

    border: 2px solid #5D5D5D;
    border-radius: 10px;
    background: #20252B;
}

.footer-brand {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 588px;
    height: 331px;
    padding: 10px;
    gap: 24px;
    overflow: hidden;
}

.footer-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 448px;
    height: 131px;
    padding: 20px 32px;
    overflow: hidden;
}

.footer-logo-frame {
    position: relative;
    flex-shrink: 0;

    width: 384px;
    height: 235px;
    overflow: hidden;
    transform: none;
}

.footer-logo-line {
    position: absolute;
    top: 75px;
    left: 24px;

    display: block;
    width: 481px;
    height: 102px;

    text-align: left;
}

.footer .logo-mark {
    line-height: 38px;
}

.footer .logo-name {
    margin-left: 0;

    font-weight: 500;
    line-height: 38px;
    letter-spacing: 0.48px;
}

.footer-logo-space {
    color: #F1EDE6;
    font-family: "Allura", cursive;
    font-size: 80px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: 15.2px;
}

.footer-logo-s {
    font-weight: 400;
}

.footer-logo-tagline {
    position: absolute;
    top: 134px;
    left: 24px;

    width: 361px;
    height: 118px;

    font-size: 12px;
    font-weight: 500;
    line-height: 77px;
    letter-spacing: 2.4px;
    text-align: left;
}

.footer-description {
    flex-shrink: 0;

    width: 470px;
    height: 111px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 37px;
    letter-spacing: 2.8px;
    text-align: left;
    white-space: nowrap;
}

.footer-links {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 534px;
    height: 331px;
    padding: 17px;
    gap: 13px;
    overflow: hidden;
}

.footer-link {
    flex-shrink: 0;

    width: 214px;
    height: 67px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.04px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: #D9785A;
}

.footer-copyright {
    flex-shrink: 0;

    width: 403px;
    height: 37px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 37px;
    letter-spacing: 2.8px;
    text-align: center;
    white-space: nowrap;
}

/* ==================================================
   SERVICES
================================================== */

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

    height: 1441px;
    padding: 10px;
}

.services-panel {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 1421px;
    padding: 23px 10px 10px;
    gap: 35px;
    overflow: hidden;

    border: 2px solid #5D5D5D;
    border-radius: 10px;
    background: rgba(32, 37, 43, 0.50);
}

.services-eyebrow {
    flex-shrink: 0;

    width: 199px;
    height: 113px;

    color: #D9785A;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 6.08px;
    white-space: nowrap;
}

.services-title {
    flex-shrink: 0;

    width: 719px;
    height: 136px;

    color: #F1EDE6;
    font-family: "Cormorant Garamond", serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 90px;
    text-align: center;
}

.services-intro-wrap {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.services-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 994px;
    height: 199px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: 3.8px;
}

.services-row {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    gap: 16px;
    padding: 10px;
}

.services-row-one {
    width: calc(100% + 4px);
}

.services-row-two {
    width: 1400px;
}

.service-card {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    height: 303px;
    gap: 40px;
    overflow: hidden;

    border: 2px solid #5D5D5D;
    border-radius: 10px;
    background: #292F36;
}

.service-card-one,
.service-card-two {
    flex: 1 0 0;
    min-width: 0;
    padding: 10px 8px 10px 10px;
}

.service-card-three,
.service-card-four {
    flex: 0 0 672px;
}

.service-card-three {
    padding: 10px 23px 10px 10px;
}

.service-card-four {
    padding: 10px 8px 0 10px;
}

.service-icon {
    display: block;
    flex-shrink: 0;
}

.service-icon-large {
    width: 170px;
    height: 170px;
}

.service-icon-folder-wrap {
    position: relative;
    flex-shrink: 0;

    width: 150px;
    height: 150px;
}

.service-icon-folder {
    position: absolute;
    inset: 3.13%;

    width: 93.74%;
    height: 93.74%;
}

.service-icon-support {
    width: 149.671px;
    height: 149.609px;
}

.service-card-copy {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;

    gap: 26px;
}

.service-card-copy-narrow {
    width: 350px;
}

.service-card-title {
    width: 369px;
    height: 44px;

    color: #D6B36A;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: 4.56px;
}

.service-card-text {
    width: 369px;

    color: #F1EDE6;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 31px;
    letter-spacing: 0.96px;
}

.service-card-text-medium {
    height: 126px;
    font-weight: 500;
    letter-spacing: 1.28px;
}

.service-card-text-inter {
    font-family: "Inter", sans-serif;
    letter-spacing: 1.12px;
}

.service-card-text-support {
    height: 102px;
    letter-spacing: 1.28px;
}

.services-cta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 269px;
    height: 62px;
    padding: 10px 22px;

    border: 2px solid rgba(214, 179, 106, 0.75);
    border-radius: 10px;
    background: #C96A4E;
    box-shadow: 0 4px 4px rgba(214, 179, 106, 0.40);

    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: 3.04px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

/* =========================
   HERO
========================= */

.hero {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.hero-card {
    width: 1400px;
    height: 532px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 60px;
    padding: 10px;
    overflow: hidden;

    background: rgba(32, 37, 43, 0.5);

    border: 2px solid #5D5D5D;
    border-radius: 10px;
}

/* =========================
   HERO TITLE
========================= */

.hero-title {
    width: 943px;

    color: #F1EDE6;

    font-family: "Cormorant Garamond", serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 90px;

    text-align: center;

    margin: 0;
}

/* =========================
   HERO TEXT
========================= */

.hero-text {
    width: 943px;

    color: #F1EDE6;

    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 39px;
    letter-spacing: 4px;

    margin: 0;

    text-align: center;
}

/* =========================
   BUTTON ROW
========================= */

.hero-buttons {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 10px;

    padding: 10px;
}

/* =========================
   PRIMARY BUTTON
========================= */

.hero-primary-button {

    display: flex;
    width: 309px;

    justify-content: center;
    align-items: center;

    padding: 12px 24px;

    border-radius: 10px;

    border: 2px solid rgba(214,179,106,.75);

    background: #C96A4E;

    box-shadow: 0 4px 4px rgba(214,179,106,.40);

    color: #F1EDE6;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: 3.04px;
    text-transform: uppercase;

    text-decoration: none;

    transition: .2s ease;
}

.hero-primary-button:hover {
    transform: translateY(-2px);
}


/* =========================
   SECONDARY BUTTON
========================= */

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

    padding: 10px;
    gap: 10px;

    border-radius: 10px;
    border: 2px solid #5D5D5D;

    background: rgba(93, 93, 93, 0.15);

    box-shadow: 0 4px 4px rgba(93, 93, 93, 0.15);

    color: #F1EDE6;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.04px;
    text-transform: uppercase;

    text-decoration: none;

    transition: 0.2s ease;
}

.hero-secondary-button:hover {
    background: rgba(93, 93, 93, 0.25);
}

/* Shared CTA interaction */
.navigation-cta,
.hero-primary-button,
.hero-secondary-button,
.services-cta,
.cta-primary-button,
.cta-secondary-button,
.services-page-primary {
    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.navigation-cta:hover,
.navigation-cta:focus-visible,
.hero-primary-button:hover,
.hero-primary-button:focus-visible,
.hero-secondary-button:hover,
.hero-secondary-button:focus-visible,
.services-cta:hover,
.services-cta:focus-visible,
.cta-primary-button:hover,
.cta-primary-button:focus-visible,
.cta-secondary-button:hover,
.cta-secondary-button:focus-visible,
.services-page-primary:hover,
.services-page-primary:focus-visible {
    color: #F1EDE6;
    background-color: #D9785A;
    border-color: rgba(214, 179, 106, 0.75);
    box-shadow: 0 8px 12px rgba(214, 179, 106, 0.40);
    transform: translateY(-2px);
}

/* ==================================================
   EMPTY SECTIONS
================================================== */

.services,
.why-jh-solutions,
.cta {
    width: 100%;
    flex-shrink: 0;
}
