/* ===========================================================================
   Pillar — Services page
   Scoped to .pillar-services. Full-width editorial layout.
   Barlow · #1a1a1a on #fff · gold accent (#e6ae48) · #e2e2e2 hairlines.
   Sections: hero → capabilities → industries (dark) →
             getting started (grey) → CTA.
   =========================================================================== */

.pillar-services {
    --svc-accent:     #e6ae48;   /* accent: numbers, eyebrow, bullets — gold, matches the rest of the site */
    --svc-ink:        #1a1a1a;
    --svc-grey:       #6b6b6b;   /* body copy */
    --svc-line:       #e2e2e2;   /* hairlines */
    --svc-dark:       #1a1a1a;   /* industries band */
    --svc-soft:       #f5f5f4;   /* getting-started band */
    /* Gutters scale with the viewport, so content widens as the window grows
       but never runs edge to edge. --svc-max is only a safety ceiling for
       ultra-wide monitors; below ~2400px the gutters are what bind. */
    --svc-gutter:     clamp(24px, 6vw, 180px);
    --svc-max:        2400px;
}

.pillar-services *,
.pillar-services *::before,
.pillar-services *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.pillar-services {
    font-family: 'Barlow', sans-serif;
    color: var(--svc-ink);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

/* Content wrap — centred and capped so copy doesn't sprawl on wide screens.
   Section backgrounds (dark / grey bands) still run edge to edge. */
.svc-wrap {
    width: 100%;
    max-width: var(--svc-max);
    margin: 0 auto !important;
    padding: 0 var(--svc-gutter);
}

/* Stockholm sets font-family / font-style on bare element selectors, which
   beats inheritance from .pillar-services — force ours back or headings
   render in the theme font (and h3 comes through italic). */
.pillar-services h1,
.pillar-services h2,
.pillar-services h3,
.pillar-services p,
.pillar-services li,
.pillar-services a {
    font-family: 'Barlow', sans-serif !important;
    font-style: normal !important;
}

.pillar-services h1,
.pillar-services h2,
.pillar-services h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: inherit;
    text-transform: none;
}

.pillar-services p { margin: 0; }
.pillar-services ul { list-style: none; padding-left: 0; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.svc-hero {
    padding: 230px 0 110px;   /* extra top space between the nav and the copy */
}

/* Headline left, eyebrow + intro right — the home page's "Who we are"
   block with the two columns swapped. */
.svc-hero__top {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 96px;
    align-items: start;
}

.svc-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--svc-accent);
    margin-bottom: 20px !important;
}

.svc-hero__title {
    font-size: 76px;
    font-weight: 700;
    line-height: 1.02;
    margin: 0 !important;
}

.svc-hero__lede {
    font-size: 18px;
    line-height: 1.65;
    color: var(--svc-grey);
}

/* Hero mosaic — up to four images, adapts to how many are set */
.svc-hero__media {
    display: grid;
    gap: 6px;
    margin-top: 72px;
}

.svc-hero__cell { overflow: hidden; }

.svc-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Four images: big 2x2 on the left, wide top right, two small beneath it */
.svc-hero__media--4 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(400px, 34vw, 760px);
}
.svc-hero__media--4 .svc-hero__cell--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.svc-hero__media--4 .svc-hero__cell--2 { grid-column: 3 / 5; grid-row: 1 / 2; }
.svc-hero__media--4 .svc-hero__cell--3 { grid-column: 3 / 4; grid-row: 2 / 3; }
.svc-hero__media--4 .svc-hero__cell--4 { grid-column: 4 / 5; grid-row: 2 / 3; }

/* Empty slots — visible to logged-in editors only, so the mosaic keeps its
   shape in the editor preview and shows where each image goes. */
.svc-hero__cell--ph {
    position: relative;
    background: #f1f1f0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.035) 0 10px,
        rgba(0, 0, 0, 0)     10px 20px
    );
}

.svc-hero__cell--ph span {
    position: absolute;
    left: 16px;
    bottom: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #a6a6a2;
}

/* Fewer than four: even split */
.svc-hero__media--1 { grid-template-columns: 1fr;              height: clamp(320px, 28vw, 620px); }
.svc-hero__media--2 { grid-template-columns: repeat(2, 1fr);   height: clamp(280px, 24vw, 540px); }
.svc-hero__media--3 { grid-template-columns: repeat(3, 1fr);   height: clamp(240px, 21vw, 460px); }

/* ── Capabilities ─────────────────────────────────────────────────────────── */

.svc-caps {
    padding-bottom: 40px;
}

/* Full section width — caps run to the same gutter as the hero above (no extra
   inset), so the block reaches the hero-image edges left and right. */

.svc-cap {
    display: grid;
    /* Left column (grows with the section): big editorial title + description.
       Right column: the two-column capability list, flush to the right gutter. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 72px;
    align-items: start;
    padding: 64px 0;
    border-top: 1px solid var(--svc-line);
}

.svc-cap__head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

/* Title + description share the space beside the number and wrap within it. */
.svc-cap__headtext {
    flex: 1 1 auto;
    min-width: 0;
}

/* Linked capability — the whole heading block is the click target. */
a.svc-cap__head--link {
    text-decoration: none !important;
    color: inherit !important;
}

.svc-cap__head--link .svc-cap__title {
    transition: color 0.2s ease;
}

/* Arrow only appears on the linked ones */
.svc-cap__head--link .svc-cap__title::after {
    content: '↗';
    display: inline-block;
    margin-left: 12px;
    font-size: 0.62em;
    font-weight: 500;
    vertical-align: 0.28em;
    color: var(--svc-accent);
    opacity: 0;
    transform: translate(-6px, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.svc-cap__head--link:hover .svc-cap__title { color: var(--svc-accent) !important; }

.svc-cap__head--link:hover .svc-cap__title::after {
    opacity: 1;
    transform: translate(0, 0);
}

.svc-cap__num {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    color: var(--svc-accent);
    padding-top: 16px;
    font-variant-numeric: tabular-nums;
}

/* Large, editorial section title. */
.svc-cap__title {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-bottom: 24px !important;
}

/* Description — sits beneath the title in the left column. */
.svc-cap__desc {
    font-size: 18px;
    line-height: 1.7;
    color: var(--svc-grey);
    max-width: 460px;
}

/* Capability list — right column, two tight columns. Capped so the two
   columns cluster together instead of spreading across the width. */
.svc-cap__list {
    column-count: 2;
    column-gap: 24px;
    max-width: 500px;
}

.svc-cap__item {
    position: relative;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    font-size: 16px;
    line-height: 1.45;
    color: var(--svc-ink);
    padding: 8px 0 8px 18px;
}

.svc-cap__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--svc-accent);
}

/* ── Industries (dark band) ───────────────────────────────────────────────── */

.svc-ind {
    background: var(--svc-dark);
    color: #fff;
    padding: 110px 0 120px;
}

.svc-ind__title {
    font-size: 46px;
    font-weight: 700;
    color: #fff;
    max-width: 14em;
    margin-bottom: 64px !important;
}

.svc-ind__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.svc-ind__cell {
    padding: 34px 32px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* Linked tile — whole cell is the click target, straight through to the
   Work page with that industry's filter already applied. */
a.svc-ind__cell--link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.2s ease;
}

.svc-ind__cell--link .svc-ind__name,
.svc-ind__cell--link .svc-ind__label { transition: color 0.2s ease; }

.svc-ind__cell--link:hover { background: rgba(255, 255, 255, 0.04); }
.svc-ind__cell--link:hover .svc-ind__name  { color: var(--svc-accent) !important; }
.svc-ind__cell--link:hover .svc-ind__label { color: #c9ccd2 !important; }
/* No left rule on the first cell of each row, and no rule above the top row —
   the horizontal hairlines only ever sit *between* rows. */
.svc-ind__cell:nth-child(4n + 1)  { border-left: 0; padding-left: 0; }
.svc-ind__cell:nth-child(-n + 4)  { border-top: 0; }

.svc-ind__label {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    color: #8a8f98;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}

.svc-ind__name {
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px !important;
}

.svc-ind__desc {
    font-size: 15px;
    line-height: 1.6;
    color: #9a9ea6;
}

/* ── Getting started (light grey band) ────────────────────────────────────── */

.svc-start {
    background: var(--svc-soft);
    padding: 100px 0 110px;
}

.svc-start__title {
    font-size: 42px;
    font-weight: 700;
    max-width: 12em;
    margin-bottom: 56px !important;
}

.svc-start__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.svc-start__cell {
    padding: 0 32px;
    border-left: 1px solid #dcdcda;
}
.svc-start__cell:first-child { border-left: 0; padding-left: 0; }

.svc-start__num {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--svc-accent);
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}

.svc-start__name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px !important;
}

.svc-start__desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--svc-grey);
}

.svc-start__note {
    font-size: 14px;
    line-height: 1.7;
    color: #8a8a86;
    max-width: 680px;
    margin-top: 56px !important;
}

/* ── Closing CTA ──────────────────────────────────────────────────────────── */

.svc-cta {
    background: var(--svc-accent);   /* gold band — matches the individual service pages' CTA */
    color: #fff;
    padding: 150px 0;
    text-align: center;
}

.svc-cta__title {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    max-width: 15ch;
    color: #fff !important;
    margin: 0 auto 30px !important;
}

.svc-cta__lede {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    max-width: 560px;
    margin: 0 auto 48px !important;
}

.svc-cta__btn {
    display: inline-block;
    background: #fff;
    color: var(--svc-ink) !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    padding: 22px 46px;
    transition: background 0.2s ease, color 0.2s ease;
}
.svc-cta__btn:hover { background: var(--svc-ink); color: #fff !important; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1300px) {
    .svc-hero__title { font-size: 62px; }
    .svc-hero__top { gap: 64px; }
    .svc-cap { gap: 56px; }
    .svc-cap__title { font-size: 46px; }
    .svc-ind__title { font-size: 40px; }
    .svc-cta__title { font-size: 58px; }
}

@media (max-width: 1100px) {
    .svc-hero { padding: 190px 0 90px; }
    .svc-hero__title { font-size: 52px; }
    /* Copy drops below the headline rather than beside it */
    .svc-hero__top { grid-template-columns: 1fr; gap: 30px; }
    .svc-hero__lede { max-width: 640px; }
    .svc-hero__media { margin-top: 56px; }

    /* Capabilities stack: heading block (title + description) above the list */
    .svc-cap {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .svc-cap__title { font-size: 42px; }
    .svc-cap__desc { max-width: 640px; }

    /* Four-up grids become two-up */
    .svc-ind__grid,
    .svc-start__grid { grid-template-columns: repeat(2, 1fr); }
    .svc-ind__cell:nth-child(4n + 1) { border-left: 1px solid rgba(255,255,255,0.16); padding-left: 32px; }
    .svc-ind__cell:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
    /* Top row is now cells 1–2, not 1–4 */
    .svc-ind__cell:nth-child(-n + 4) { border-top: 1px solid rgba(255,255,255,0.16); }
    .svc-ind__cell:nth-child(-n + 2) { border-top: 0; }
    .svc-start__cell:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
    .svc-start__cell { margin-bottom: 40px; }
}

@media (max-width: 780px) {
    .svc-hero { padding: 160px 0 72px; }
    .svc-hero__title { font-size: 40px; }
    .svc-hero__lede { font-size: 17px; }
    .svc-hero__media { margin-top: 44px; height: auto !important; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .svc-hero__media .svc-hero__cell { grid-column: auto !important; grid-row: auto !important; }
    .svc-hero__media img { height: 220px; }
    .svc-hero__cell--ph { min-height: 220px; }   /* no img to give it height */
    .svc-eyebrow { margin-bottom: 20px !important; }

    .svc-cap { padding: 44px 0; }
    .svc-cap__title { font-size: 34px; }
    .svc-cap__num { padding-top: 11px; }
    .svc-cap__list { column-count: 1; max-width: none; }

    .svc-ind { padding: 76px 0 84px; }
    .svc-ind__title { font-size: 32px; margin-bottom: 44px !important; }
    .svc-start { padding: 72px 0 80px; }
    .svc-start__title { font-size: 32px; margin-bottom: 40px !important; }

    .svc-cta { padding: 100px 0; }
    .svc-cta__title { font-size: 44px; }
}

@media (max-width: 560px) {
    .svc-hero__title { font-size: 34px; }
    .svc-hero__media { grid-template-columns: 1fr; }
    .svc-hero__media img { height: 240px; }
    .svc-hero__cell--ph { min-height: 240px; }

    /* Single column everywhere; drop vertical rules */
    .svc-ind__grid,
    .svc-start__grid { grid-template-columns: 1fr; }
    .svc-ind__cell,
    .svc-ind__cell:nth-child(4n + 1),
    .svc-ind__cell:nth-child(2n + 1) { border-left: 0; padding-left: 0; padding-right: 0; }
    /* Single column — only the very first cell loses its top rule */
    .svc-ind__cell:nth-child(-n + 4) { border-top: 1px solid rgba(255,255,255,0.16); }
    .svc-ind__cell:first-child       { border-top: 0; }
    .svc-start__cell,
    .svc-start__cell:nth-child(2n + 1) { border-left: 0; padding-left: 0; padding-right: 0; }

    .svc-cta__title { font-size: 34px; }
    .svc-cta__btn { padding: 18px 34px; width: 100%; }
}