/* ---------------------------------------------------------------------------
   Enquiry dialog
   ---------------------------------------------------------------------------
   Same editorial system as the pages behind it: hairline rules, one red
   accent, Poppins throughout. Scoped to .gs- so it cannot reach the legacy
   Bootstrap forms elsewhere on the site.
   --------------------------------------------------------------------------- */

.gs-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(16px, 4vh, 56px) 16px;
    overflow-y: auto;
}

.gs-modal[hidden] { display: none; }

body.gs-modal-open { overflow: hidden; }

.gs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 13, .62);
    animation: gsFade .2s ease both;
}

.gs-modal-panel {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    background: #fff;
    border-top: 4px solid var(--red, #c02228);
    box-shadow: 0 30px 80px rgba(20, 12, 13, .3);
    animation: gsRise .26s cubic-bezier(.22, .61, .36, 1) both;
    overflow: hidden;
}

/* Left column: the reason to fill it in. Right column: the form itself. */
.gs-modal-head {
    background: var(--ink, #1a1a1a);
    color: #fff;
    padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 38px);
}

.gs-modal-form {
    padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px);
}

.gs-modal-points {
    list-style: none;
    margin: 0 0 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.gs-modal-points li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.gs-modal-points li:last-child { border-bottom: 0; }

.gs-modal-points strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.gs-modal-points span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .74);
}

.gs-modal-direct {
    margin: 0 !important;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .74) !important;
}
.gs-modal-direct a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.gs-modal-direct a:hover { border-bottom-color: #fff; }

@keyframes gsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.gs-modal-close {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    font-size: 30px;
    line-height: 1;
    color: var(--muted, #6b6b6b);
    cursor: pointer;
    transition: color .18s ease;
}
.gs-modal-close:hover { color: var(--red, #c02228); }

.gs-modal-eyebrow {
    margin: 0 0 10px;
    color: #f2a5a8 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red, #c02228);
}

.gs-modal-head h2 {
    margin: 0 0 12px !important;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.1vw, 30px) !important;
    font-weight: 700;
    line-height: 1.14 !important;
    letter-spacing: -.04em !important;
    color: #fff !important;
}

.gs-modal-head p {
    margin: 0 0 4px;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

/* Honeypot: present for bots, absent for people and screen readers. */
.gs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gs-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
}

.gs-field { margin: 0 0 18px; }

.gs-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink, #1a1a1a);
}

.gs-field label span { color: var(--red, #c02228); }

.gs-field input,
.gs-field textarea {
    width: 100%;
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink, #1a1a1a);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(26, 26, 26, .24);
    border-radius: 0;
    transition: border-color .18s ease;
}

.gs-field textarea { resize: vertical; line-height: 1.6; }

.gs-field input:focus,
.gs-field textarea:focus {
    outline: none;
    border-bottom-color: var(--red, #c02228);
}

.gs-field input::placeholder,
.gs-field textarea::placeholder { color: rgba(26, 26, 26, .38); }

.gs-fieldset {
    margin: 6px 0 20px;
    padding: 18px 0 4px;
    border: 0;
    border-top: 1px solid rgba(26, 26, 26, .14);
}

.gs-fieldset legend {
    padding: 0;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink, #1a1a1a);
}

.gs-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
}

.gs-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink, #1a1a1a);
    cursor: pointer;
}

.gs-check input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--red, #c02228);
}

.gs-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(26, 26, 26, .14);
}

.gs-modal-submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 26px;
    background: var(--red, #c02228);
    color: #fff;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease;
}

.gs-modal-submit::after { content: "\2192"; font-weight: 700; }
.gs-modal-submit:hover { background: var(--red-dark, #8e1117); }

.gs-modal-call {
    font-size: 14px;
    color: var(--muted, #6b6b6b);
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 26, 26, .24);
    padding-bottom: 3px;
}
.gs-modal-call:hover { color: var(--red, #c02228); border-bottom-color: var(--red, #c02228); }

@media (max-width: 900px) {
    .gs-modal-panel { grid-template-columns: 1fr; }
    .gs-modal-points { display: none; }
    .gs-modal-head { padding-bottom: 22px; }
}

@media (max-width: 620px) {
    .gs-field-row,
    .gs-check-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .gs-modal-backdrop,
    .gs-modal-panel { animation: none; }
}

/* Legacy Bootstrap dialogs: the title is an h2 so it does not break the
   document outline, but it keeps the size it has always rendered at. */
.modal-title {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.43 !important;
    letter-spacing: normal !important;
}

/* ---------------------------------------------------------------------------
   Related reading — service pages pointing at the articles on their topic
   --------------------------------------------------------------------------- */
.gs-related {
    background: var(--paper, #faf6f6);
    padding: clamp(34px, 3.8vw, 60px) clamp(22px, 6vw, 104px);
    border-top: 1px solid rgba(26, 26, 26, .14);
}

.gs-related-inner { max-width: 1320px; margin: 0 auto; }

.gs-related-eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red, #c02228);
}

.gs-related h2 {
    margin: 0 0 30px !important;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 32px) !important;
    font-weight: 700;
    line-height: 1.14 !important;
    letter-spacing: -.04em !important;
    color: var(--ink, #1a1a1a);
    max-width: 24ch;
}

.gs-related-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(26, 26, 26, .14);
}

.gs-related-list li {
    border-bottom: 1px solid rgba(26, 26, 26, .14);
    border-right: 1px solid rgba(26, 26, 26, .14);
}

.gs-related-list li:nth-child(3n) { border-right: 0; }

.gs-related-list a {
    display: block;
    height: 100%;
    padding: 26px 28px 28px;
    text-decoration: none;
    transition: background .24s ease;
}

.gs-related-list li:first-child a { padding-left: 0; }
.gs-related-list li:last-child a { padding-right: 0; }
.gs-related-list a:hover { background: rgba(192, 34, 40, .05); }

.gs-related-list strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: clamp(15px, 1.2vw, 17.5px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.3;
    color: var(--ink, #1a1a1a);
    transition: color .2s ease;
}

.gs-related-list a:hover strong { color: var(--red, #c02228); }

.gs-related-list span {
    display: block;
    max-width: 60ch;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted, #6b6b6b);
}

@media (max-width: 900px) {
    .gs-related-list { grid-template-columns: 1fr; }
    .gs-related-list li { border-right: 0; }
    .gs-related-list a { padding-left: 0; padding-right: 0; }
}

/* ---------------------------------------------------------------------------
   Page FAQ — answer-first rows, so an answer engine can lift one cleanly
   --------------------------------------------------------------------------- */
.gs-faq {
    background: #fff;
    padding: clamp(34px, 3.8vw, 60px) clamp(22px, 6vw, 104px);
    border-top: 1px solid rgba(26, 26, 26, .14);
}

.gs-faq-inner { max-width: 1320px; margin: 0 auto; }

.gs-faq-eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red, #c02228);
}

.gs-faq h2 {
    margin: 0 0 30px !important;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 32px) !important;
    font-weight: 700;
    line-height: 1.14 !important;
    letter-spacing: -.04em !important;
    color: var(--ink, #1a1a1a);
    max-width: 24ch;
}

/* Two columns, so the block uses the full content width instead of running a
   narrow list down the left with the right side empty. Each answer still sits
   directly under its own question. */
.gs-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(34px, 4vw, 68px);
    align-content: start;
    border-top: 1px solid rgba(26, 26, 26, .14);
}

@media (max-width: 860px) {
    .gs-faq-list { grid-template-columns: 1fr; }
}

.gs-faq-item {
    padding: 24px 0 26px;
    border-bottom: 1px solid rgba(26, 26, 26, .14);
}

.gs-faq-item h3 {
    margin: 0 0 10px !important;
    max-width: none;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.35vw, 20px) !important;
    font-weight: 700;
    line-height: 1.32 !important;
    letter-spacing: -.03em !important;
    color: var(--ink, #1a1a1a);
}

.gs-faq-item p {
    margin: 0;
    max-width: none;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted, #6b6b6b);
}

.gs-faq-cta { margin: 26px 0 0; }

.gs-faq-cta a {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink, #1a1a1a);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ink, #1a1a1a);
    transition: color .2s ease, border-color .2s ease;
}

.gs-faq-cta a:hover { color: var(--red, #c02228); border-bottom-color: var(--red, #c02228); }

/* ---------------------------------------------------------------------------
   Container alignment on legacy pages
   ---------------------------------------------------------------------------
   The market-service and shopify templates lay content out in a 1320px column;
   the older pages use the Bootstrap .container. Appending these blocks to a
   legacy page left their edges 41px outside the page's own content column, so
   they read as bolted on. Here they inherit the container geometry instead.
   --------------------------------------------------------------------------- */
body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)):not(.ecommerce-case-page) .gs-faq,
body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)):not(.ecommerce-case-page) .gs-related {
    padding-left: 0;
    padding-right: 0;
}

body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)):not(.ecommerce-case-page) .gs-faq-inner,
body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)):not(.ecommerce-case-page) .gs-related-inner {
    width: 100%;
    max-width: 1170px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 1199px) {
    body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)) .gs-faq-inner,
    body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)) .gs-related-inner { max-width: 970px; }
}

@media (max-width: 991px) {
    body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)) .gs-faq-inner,
    body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)) .gs-related-inner { max-width: 750px; }
}

@media (max-width: 767px) {
    body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)) .gs-faq-inner,
    body:not(.market-service-page):not(.shopify-cluster-page):not(:has(.home-page)) .gs-related-inner { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Shared chrome aligned to the content measure
   ---------------------------------------------------------------------------
   The header nav sat in a 1140px box, page content in 1252px and the footer in
   1170px, so nothing lined up down the left edge. On the rebuilt pages all
   three now share the section measure. Legacy pages keep the Bootstrap
   geometry they were designed against.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {

    body.market-service-page #gptw-navigation > .container,
    body.shopify-cluster-page #gptw-navigation > .container,
    body:has(.home-page) #gptw-navigation > .container,
    body.ecommerce-case-page #gptw-navigation > .container,
    body.market-service-page header .container:has(.desktop-bottom),
    body.shopify-cluster-page header .container:has(.desktop-bottom),
    body.home-page header .container:has(.desktop-bottom),
    body.ecommerce-case-page header .container:has(.desktop-bottom) {
        width: 100%;
        max-width: calc(1320px + 2 * clamp(22px, 6vw, 104px));
        margin-right: auto;
        margin-left: auto;
        padding-right: clamp(22px, 6vw, 104px);
        padding-left: clamp(22px, 6vw, 104px);
    }

    body.market-service-page footer .container,
    body.shopify-cluster-page footer .container,
    body:has(.home-page) footer .container,
    body.ecommerce-case-page footer .container {
        width: 100%;
        max-width: calc(1320px + 2 * clamp(22px, 6vw, 104px));
        padding-right: clamp(22px, 6vw, 104px);
        padding-left: clamp(22px, 6vw, 104px);
    }
}

/* The nav row keeps its own 10px gutter from the legacy stylesheet, which
   pushed the logo past the content edge and the call to action past the right
   one. Zero it so the row spans exactly the content measure. */
@media (min-width: 1200px) {
    body.market-service-page #gptw-navigation .desktop-bottom,
    body.shopify-cluster-page #gptw-navigation .desktop-bottom,
    body:has(.home-page) #gptw-navigation .desktop-bottom,
    body.ecommerce-case-page #gptw-navigation .desktop-bottom {
        padding-right: 0;
        padding-left: 0;
    }

    body.market-service-page #gptw-navigation .desktop-right,
    body.shopify-cluster-page #gptw-navigation .desktop-right,
    body:has(.home-page) #gptw-navigation .desktop-right,
    body.ecommerce-case-page #gptw-navigation .desktop-right {
        padding-right: 0;
    }
}