/* =========================================================
   GS Group of Companies - inner pages
   (about, services, contact ... ) Loaded AFTER style.css and
   reuses its colour tokens, so light / dark theme works as-is.
   ========================================================= */

:root {
    --line: rgba(20, 20, 30, .28);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --line: rgba(255, 255, 255, .28);
    color-scheme: dark;
}

html:has(.subnav) {
    scroll-padding-top: calc(var(--header-h-sm) + 64px);
}

/* ---------- Page hero ---------- */
.phero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-deep));
    padding: calc(var(--header-h) + clamp(40px, 8vw, 112px)) 0 clamp(48px, 7vw, 96px);
}

.phero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.phero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.phero--img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(20, 4, 8, .7), rgba(20, 4, 8, 0) 45%),
        linear-gradient(100deg, rgba(20, 4, 8, .9) 10%, rgba(20, 4, 8, .6) 60%, rgba(20, 4, 8, .4));
}

/* soft gold glow for the picture-less hero */
.phero--plain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 480px at 88% 0%, rgba(200, 150, 46, .28), transparent 70%);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 clamp(20px, 3vw, 36px);
    font-size: .82rem;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .72);
}

.crumbs li+li::before {
    content: "/";
    margin-right: 10px;
    opacity: .5;
}

.crumbs a:hover,
.crumbs a:focus-visible {
    color: var(--gold-soft);
}

.phero__t {
    margin: 0 0 clamp(14px, 2vw, 22px);
    max-width: 15em;
    font-size: clamp(2.1rem, 6.2vw, 4.8rem);
    line-height: 1.05;
    font-weight: 300;
    letter-spacing: -.025em;
}

.phero__lead {
    margin: 0;
    max-width: 58ch;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: rgba(255, 255, 255, .85);
}

/* big outlined year behind the About hero */
.phero__ghost {
    position: absolute;
    right: var(--pad);
    bottom: -.14em;
    z-index: -1;
    font-size: clamp(7rem, 26vw, 22rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(227, 182, 88, .38);
    pointer-events: none;
    user-select: none;
}

/* three quick contact points inside the Contact hero */
.quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(36px, 6vw, 72px);
    border-top: 1px solid rgba(255, 255, 255, .25);
}

.quick>li {
    padding: 18px clamp(12px, 2vw, 28px) 0 0;
}

.quick>li+li {
    padding-left: clamp(12px, 2vw, 28px);
    border-left: 1px solid rgba(255, 255, 255, .25);
}

.quick span {
    display: block;
    margin-bottom: 4px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-soft);
}

.quick a,
.quick p {
    margin: 0;
    font-size: clamp(1rem, 1.9vw, 1.5rem);
    font-weight: 300;
    overflow-wrap: anywhere;
}

.quick a:hover {
    color: var(--gold-soft);
}

/* ---------- Buttons ---------- */
.btn--line {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
}

.btn--line:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1205;
}

/* ---------- Editorial two-column ---------- */
.edit {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(24px, 6vw, 96px);
    align-items: start;
}

.edit__label {
    position: sticky;
    top: calc(var(--header-h-sm) + 28px);
}

.edit__body p {
    margin: 0 0 1.2em;
    max-width: 68ch;
    color: var(--muted);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
}

.edit__body p:first-child {
    color: var(--text);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.45;
    font-weight: 300;
}

.sec-gap {
    margin-top: clamp(40px, 6vw, 80px);
}

/* ---------- Group directory (table) ---------- */
.dir {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dir th {
    padding: 0 16px 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.dir td {
    padding: 20px 16px 20px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--muted);
}

.dir td:first-child {
    width: 34%;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading);
}

.dir td:nth-child(2) {
    width: 22%;
    color: var(--text);
}

.dir tbody tr {
    transition: background-color .2s;
}

@media (hover: hover) {
    .dir tbody tr:hover {
        background: var(--surface);
    }
}

/* ---------- "What we stand for" rows ---------- */
.man {
    border-bottom: 1px solid var(--border);
}

.man li {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 8px clamp(24px, 5vw, 80px);
    align-items: baseline;
    padding: clamp(20px, 2.6vw, 34px) 0;
    border-top: 1px solid var(--border);
}

.man b {
    display: flex;
    align-items: baseline;
    gap: 18px;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 300;
    letter-spacing: -.015em;
    color: var(--heading);
}

.man i {
    flex: 0 0 auto;
    font-style: normal;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent);
}

.man span {
    color: var(--muted);
}

/* ---------- Strengths + pull quote ---------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.dash {
    border-bottom: 1px solid var(--border);
}

.dash li {
    position: relative;
    padding: 14px 0 14px 30px;
    border-top: 1px solid var(--border);
}

.dash li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.45em;
    width: 16px;
    height: 2px;
    background: var(--gold);
}

.pull {
    position: relative;
    margin: 0;
    padding-top: clamp(44px, 6vw, 84px);
}

.pull::before {
    content: "\201C";
    position: absolute;
    left: -.04em;
    top: 0;
    font: 400 clamp(6rem, 13vw, 11rem)/1 Georgia, "Times New Roman", serif;
    color: var(--gold);
    opacity: .45;
}

.pull p {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.28;
    font-weight: 300;
    letter-spacing: -.015em;
    color: var(--heading);
}

/* ---------- Offices ---------- */
.offices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 56px);
}

.offices>div {
    padding-top: 16px;
    border-top: 2px solid var(--gold);
}

.offices h3 {
    margin: 0 0 10px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-soft);
}

.offices address,
.offices p {
    margin: 0;
    font-style: normal;
    color: rgba(255, 255, 255, .88);
}

.sec--dark .offices+.cta-row {
    margin-top: clamp(32px, 5vw, 56px);
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

/* ---------- Closing call-to-action ---------- */
.cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
}

.cta .h2 {
    margin: 0;
    max-width: 18em;
}

/* ---------- Services: sticky index ---------- */
.subnav {
    position: sticky;
    top: var(--header-h-sm);
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.subnav__in {
    display: flex;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--pad);
    overflow-x: auto;
    scrollbar-width: none;
}

.subnav__in::-webkit-scrollbar {
    display: none;
}

.subnav a {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 16px clamp(12px, 2vw, 26px) 14px 0;
    margin-right: clamp(4px, 1.5vw, 20px);
    border-bottom: 2px solid transparent;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--muted);
    transition: color .2s, border-color .2s;
}

.subnav a i {
    font-style: normal;
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--accent);
}

.subnav a:hover,
.subnav a.is-on {
    color: var(--heading);
    border-bottom-color: var(--gold);
}

/* ---------- Services: chapters ---------- */
.chap {
    padding: clamp(56px, 8vw, 112px) 0;
    background: var(--bg);
}

.chap--alt {
    background: var(--surface);
}

.chap__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(24px, 6vw, 96px);
    align-items: start;
}

.chap__head {
    position: sticky;
    top: calc(var(--header-h-sm) + 84px);
}

.chap__n {
    display: block;
    margin-bottom: 12px;
    font-size: clamp(4rem, 9vw, 8rem);
    line-height: .9;
    font-weight: 800;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent);
}

.chap__t {
    margin: 0 0 6px;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--heading);
}

.chap__brand {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--accent);
}

.chap__fig {
    position: relative;
    margin: 0 0 clamp(24px, 3vw, 36px);
    background: linear-gradient(135deg, var(--maroon), var(--maroon-deep));
}

.chap__fig img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.chap__fig figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 8px 14px;
    background: var(--maroon);
    color: #fff;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.chap__lead {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    line-height: 1.5;
    font-weight: 300;
    color: var(--text);
}

.kv {
    display: grid;
    grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr));
    margin: clamp(24px, 3vw, 36px) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.kv li {
    padding: 18px 12px 18px 0;
}

.kv li+li {
    padding-left: clamp(12px, 2vw, 24px);
    border-left: 1px solid var(--border);
}

.kv b {
    display: block;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--accent);
}

.kv span {
    font-size: .85rem;
    color: var(--muted);
}

.def {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(20px, 4vw, 48px);
    margin: 0;
}

.def>div {
    padding: 16px 0;
    border-top: 1px solid var(--border);
}

.def dt {
    font-weight: 600;
    color: var(--heading);
}

.def dd {
    margin: 4px 0 0;
    font-size: .93rem;
    color: var(--muted);
}

.def--one {
    grid-template-columns: 1fr;
}

.chap__sub {
    margin: clamp(24px, 3vw, 36px) 0 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}

.flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
}

/* sequence: the arrow trails each step, so a wrapped line never starts with one */
.flow li:not(:last-child)::after {
    content: "\2192";
    margin: 0 12px;
    color: var(--gold);
}

/* inline lists with thin dividers. The list is shifted left and clipped by the
   divider width, so a wrapped line never starts with a stray divider. */
.slash,
.branches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin-left: -14px;
    clip-path: inset(0 0 0 14px);
}

.slash li,
.branches li {
    padding: 0 13px;
    border-left: 1px solid var(--line);
}

.tagline {
    margin: clamp(24px, 3vw, 36px) 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--gold);
    font-size: clamp(1.2rem, 2.4vw, 1.9rem);
    font-weight: 300;
    line-height: 1.3;
    color: var(--heading);
}

/* ---------- Contact ---------- */
.cgrid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 7vw, 112px);
    align-items: start;
}

.form {
    display: grid;
    gap: 26px;
    margin-top: clamp(20px, 3vw, 32px);
}

.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.fld {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fld label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.fld input,
.fld select,
.fld textarea {
    width: 100%;
    padding: 10px 0;
    font: inherit;
    color: var(--text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    outline: 0;
    transition: border-color .2s, box-shadow .2s;
}

/* Dropdown list: the select itself is transparent, so the popup list needs its
   own solid background, otherwise it renders white with light (unreadable) text.
   Uses the theme tokens, so it is dark in dark mode and white in light mode. */
.fld select {
    color-scheme: light;
    cursor: pointer;
}

:root[data-theme="dark"] .fld select {
    color-scheme: dark;
}

.fld select option,
.fld select optgroup {
    background-color: var(--bg);
    color: var(--text);
}

.fld select option:checked {
    background-color: var(--gold);
    color: #1a1205;
}

.fld textarea {
    min-height: 130px;
    resize: vertical;
}

.fld input:focus,
.fld select:focus,
.fld textarea:focus {
    border-bottom-color: var(--gold);
    box-shadow: 0 1px 0 var(--gold);
}

.fld input:user-invalid,
.fld textarea:user-invalid {
    border-bottom-color: #c0392b;
}

.fnote {
    margin: 0;
    font-size: .85rem;
    color: var(--muted);
}

.fnote[data-state="ok"] {
    color: var(--accent);
    font-weight: 600;
}

.form .btn {
    justify-self: start;
    cursor: pointer;
}

.info {
    margin: clamp(20px, 3vw, 32px) 0 0;
}

.info>div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 4px 16px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
}

.info>div:last-child {
    border-bottom: 1px solid var(--border);
}

.info dt {
    padding-top: 3px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.info dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.info address {
    font-style: normal;
}

.info a:hover {
    color: var(--accent);
}

.info .link-arrow {
    margin-top: 6px;
    font-size: .9rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {

    .edit,
    .chap__grid,
    .split,
    .cgrid {
        grid-template-columns: 1fr;
    }

    .edit__label,
    .chap__head {
        position: static;
    }

    .chap__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 18px;
    }

    .chap__n {
        margin: 0;
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

    .chap__head>div {
        flex: 1 1 200px;
    }

    .offices {
        grid-template-columns: 1fr;
    }

    .man li {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dir thead {
        display: none;
    }

    .dir,
    .dir tbody,
    .dir tr,
    .dir td {
        display: block;
        width: auto;
    }

    .dir tr {
        padding: 18px 0;
        border-bottom: 1px solid var(--border);
    }

    .dir td {
        width: auto !important;
        padding: 2px 0;
        border: 0;
    }

    .dir td::before {
        content: attr(data-l);
        display: block;
        margin-top: 8px;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .dir td:first-child::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .kv {
        grid-template-columns: 1fr;
    }

    .kv li+li {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 640px) {

    .def,
    .frow {
        grid-template-columns: 1fr;
    }

    .quick {
        grid-template-columns: 1fr;
    }

    .quick>li+li {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .25);
        margin-top: 16px;
    }

    .quick>li {
        padding-bottom: 0;
    }

    .info>div {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 560px) {
    .phero__ghost {
        display: none;
    }
}

@media (max-width: 380px) {
    .subnav a {
        font-size: .84rem;
    }

    .phero__t {
        font-size: 2rem;
    }
}