/* =====================================================================
   Pillar — Individual Service page stylesheet
   Loaded only on the "Pillar — Service" template (see inc/pillar-service.php).
   All rules are scoped under .pillar-service so they never leak into, or
   get overridden by, the Stockholm theme. Sharp corners, no shadows —
   matches the Work/Blog + homepage visual language, with the theme's orange accent.
   ===================================================================== */

.pillar-service{
  --ink:#161616;
  --body:#4a4a4a;
  --body-soft:#6a6a6a;
  --muted:#a0a0a0;
  --hair:#ededed;
  --accent:#e6ae48;      /* theme brand orange (rgb 230,174,72) — numbers, eyebrows, numerals */
  --cta-bg:#e6ae48;      /* gold CTA band — matches the brand accent (per design) */
  --panel:#f4f4f4;
  --panel-line:#e6e6e6;
  --caption:#9a9a9a;
  /* Match the site's content grid: left-aligned, wide max-width, 96px gutters
     (the main /our-services/ page uses .svc-wrap max-width 2400 / padding 96,
     with headings + the capabilities grid all sitting at 96px from the left).
     This replaced a centered 1320 column that pushed content too far in. */
  --maxw:2400px;
  --pad:96px;

  font-family:"Barlow",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.pillar-service *{box-sizing:border-box;}
.pillar-service img{max-width:100%;display:block;}
.pillar-service a{color:inherit;text-decoration:none;}

.pillar-service .psvc-eyebrow{
  font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}

/* ===================== THEME HEADER (white on top) =====================
   The sitewide Stockholm header is transparent with DARK text at the top of
   the page — invisible over our dark hero. These rules (unscoped on purpose;
   the stylesheet only loads on this template) turn the nav + logo white while
   the header is transparent, and hand control straight back to the theme once
   it scrolls into its solid white state (it then adds `.scrolled`). */
body.page-template-pillar-service .page_header:not(.scrolled) .menu-item > a,
body.page-template-pillar-service .page_header:not(.scrolled) .menu-item > a:hover,
body.page-template-pillar-service .page_header:not(.scrolled) .q_menu .menu-item > a{
  color:#fff !important;
}
/* Swap the dark logo for the light one while transparent. */
body.page-template-pillar-service .page_header:not(.scrolled) img.normal{opacity:0 !important;}
body.page-template-pillar-service .page_header:not(.scrolled) img.light{opacity:1 !important;}
/* Mobile hamburger lines white while transparent. */
body.page-template-pillar-service .page_header:not(.scrolled) .mobile_menu_button,
body.page-template-pillar-service .page_header:not(.scrolled) .mobile_menu_button span{color:#fff !important;}

/* ============================ HERO ============================
   Content is TOP-aligned with a fixed top padding so the eyebrow sits the same
   distance below the sitewide header (a fixed 90px bar) on every page,
   regardless of how many lines the title wraps to. min-height keeps the band
   tall on short (one-line) titles. */
.pillar-service .psvc-hero{background:var(--ink);color:#fff;min-height:520px;}
.pillar-service .psvc-hero__inner{max-width:var(--maxw);margin:0 auto;width:100%;padding:130px var(--pad) 100px;}
.pillar-service .psvc-hero__eyebrow{margin-bottom:22px;font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);}
.pillar-service .psvc-hero__title{font-weight:700;font-size:76px;line-height:1.0;letter-spacing:-.03em;max-width:14ch;margin:0;color:#fff !important;}
.pillar-service .psvc-hero__intro{margin:34px 0 0;max-width:600px;font-weight:400;font-size:18px;line-height:1.65;color:rgba(255,255,255,.72);}

/* ======================= PROCESS INTRO =======================
   Big, editorial two-column band — matches the homepage "Seattle-based
   product development…" intro (52px / 700 / tight leading). */
.pillar-service .psvc-process{background:#fff;}
.pillar-service .psvc-process__inner{
  max-width:var(--maxw);margin:0 auto;padding:120px var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:76px;align-items:center;
}
.pillar-service .psvc-process__title{
  font-weight:700;font-size:70px;line-height:1.0;letter-spacing:-.035em;
  max-width:14ch;margin:0;color:var(--ink) !important;
}
/* Paragraph block centered horizontally within its column (sits over the
   middle of the photos below) and vertically centered against the heading. */
.pillar-service .psvc-process__body{
  font-weight:400;font-size:22px;line-height:1.6;color:var(--body);margin:0 auto;max-width:560px;
}

/* ======================= FEATURED STEPS =======================
   Full-bleed rows: text on the left (aligned to the centered content column),
   photo on the right bleeding to the page edge. Consecutive photos are
   separated by only a 4px gap. Bigger heading/body to match the scale. */
.pillar-service .psvc-steps{max-width:none;margin:0;padding:0;}
/* 4px between every photo AND a 4px gap after the last one before the dark
   "What's included" band. */
.pillar-service .psvc-step{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border-top:none;padding:0;margin-bottom:4px;
}
.pillar-service .psvc-step__text{
  max-width:none;align-self:center;
  padding:56px var(--pad) 56px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
/* Thin, grey, non-italic index — like the capability numbers, a touch larger. */
.pillar-service .psvc-step__num{
  font-style:normal;font-weight:400;font-size:16px;line-height:1;letter-spacing:2px;
  color:#8a8f98;-webkit-text-stroke:0;margin-bottom:22px;
}
.pillar-service .psvc-step__heading{font-weight:700;font-size:46px;line-height:1.08;letter-spacing:-.025em;margin:0 0 24px;color:var(--ink) !important;}
.pillar-service .psvc-step__body{font-weight:400;font-size:21px;line-height:1.6;color:var(--body);margin:0;max-width:540px;}
.pillar-service .psvc-step__media{
  position:relative;min-height:600px;background:var(--panel);overflow:hidden;
  background-image:repeating-linear-gradient(135deg,var(--panel) 0,var(--panel) 9px,var(--panel-line) 9px,var(--panel-line) 10px);
}
.pillar-service .psvc-step__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pillar-service .psvc-step__caption{
  position:absolute;left:26px;bottom:22px;font-family:"Roboto Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.02em;color:var(--caption);z-index:2;
}

/* ======================= CAPABILITIES =========================
   Matches the main service page's "categories" grid: bg #1a1a1a, muted-grey
   numbers, white 21px titles, hairline dividers BETWEEN cells only (no orange,
   no outer top/bottom/side lines). Vertical rule = border-left on cells that
   aren't first in their row; horizontal rule = border-top on rows 2+. */
.pillar-service .psvc-caps{background:#1a1a1a;color:#fff;}
.pillar-service .psvc-caps__inner{max-width:var(--maxw);margin:0 auto;padding:112px var(--pad) 120px;}
.pillar-service .psvc-caps__head{margin-bottom:60px;}
.pillar-service .psvc-caps__head .psvc-eyebrow{margin-bottom:24px;color:var(--muted);}
.pillar-service .psvc-caps__title{font-weight:700;font-size:40px;line-height:1.05;letter-spacing:-.02em;max-width:16ch;margin:0;color:#fff !important;}
.pillar-service .psvc-caps__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.pillar-service .psvc-caps__card{
  display:flex;flex-direction:column;min-height:140px;padding:34px 32px 40px 0;
}
/* Cells after a divider get left padding so the number/title don't touch the line. */
.pillar-service .psvc-caps__card:not(:nth-child(4n+1)){border-left:1px solid rgba(255,255,255,.16);padding-left:32px;}
.pillar-service .psvc-caps__card:nth-child(n+5){border-top:1px solid rgba(255,255,255,.16);}
.pillar-service .psvc-caps__card .n{color:#8a8f98;font-weight:400;font-size:12px;letter-spacing:2px;margin-bottom:26px;}
.pillar-service .psvc-caps__card .name{font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.005em;color:#fff !important;}

/* =================== EXPLORE OTHER SERVICES ===================
   White band so it reads as a distinct section from the dark grid above it.
   The current page stays in the list but is greyed out and non-clickable. */
.pillar-service .psvc-explore{background:#fff;color:var(--ink);}
.pillar-service .psvc-explore__inner{max-width:var(--maxw);margin:0 auto;padding:104px var(--pad) 112px;}
.pillar-service .psvc-explore__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px;}
.pillar-service .psvc-explore__title{font-weight:700;font-size:40px;line-height:1.05;letter-spacing:-.025em;margin:0;color:var(--ink) !important;}
.pillar-service .psvc-explore__all{font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--body-soft);white-space:nowrap;transition:color .2s;}
.pillar-service .psvc-explore__all:hover{color:var(--ink);}
.pillar-service .psvc-explore__row{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;
  padding:26px 6px;border-bottom:1px solid var(--hair);transition:padding .25s;
}
.pillar-service .psvc-explore__row:first-child{border-top:1px solid var(--hair);}
.pillar-service .psvc-explore__row .n{color:var(--accent);font-weight:600;font-size:13px;}
.pillar-service .psvc-explore__row .name{font-weight:700;font-size:26px;letter-spacing:-.01em;color:var(--ink) !important;}
.pillar-service .psvc-explore__row .arrow{font-size:20px;color:var(--muted);transition:transform .25s,color .25s;}
.pillar-service .psvc-explore__row:hover{padding-left:16px;}
.pillar-service .psvc-explore__row:hover .arrow{transform:translateX(8px);color:var(--ink);}
.pillar-service .psvc-explore__row.is-current{opacity:.38;pointer-events:none;}

/* ============================ CTA ============================= */
.pillar-service .psvc-cta{background:var(--cta-bg);color:#fff;text-align:center;padding:150px var(--pad);}
.pillar-service .psvc-cta__title{font-weight:700;font-size:80px;line-height:1.0;letter-spacing:-.035em;max-width:14ch;margin:0 auto 48px;color:#fff !important;}
.pillar-service .psvc-cta__btn{
  display:inline-block;background:#fff;color:var(--ink);font-weight:600;font-size:16px;
  letter-spacing:.02em;padding:22px 46px;transition:background .2s,color .2s;
}
.pillar-service .psvc-cta__btn:hover{background:var(--ink);color:#fff;}

/* ============================ RESPONSIVE ============================= */
/* Capabilities grid: 4 → 2 columns on tablet. Recompute the internal-only
   dividers for the new column count (vertical = not-first-in-row;
   horizontal = rows 2+; never an outer top/bottom line). */
@media(max-width:1300px){
  .pillar-service{--pad:56px;}
}
@media(max-width:1100px){
  .pillar-service .psvc-caps__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pillar-service .psvc-caps__card:not(:nth-child(4n+1)){border-left:none;padding-left:0;}
  .pillar-service .psvc-caps__card:nth-child(n+5){border-top:none;}
  .pillar-service .psvc-caps__card:not(:nth-child(2n+1)){border-left:1px solid rgba(255,255,255,.16);padding-left:32px;}
  .pillar-service .psvc-caps__card:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16);}
}
@media(max-width:900px){
  .pillar-service{--pad:26px;}
  .pillar-service .psvc-hero__title{font-size:48px;}
  .pillar-service .psvc-hero{min-height:auto;}
  .pillar-service .psvc-hero__inner{padding:120px var(--pad) 72px;}
  .pillar-service .psvc-process__inner{grid-template-columns:1fr;gap:24px;padding:72px var(--pad);}
  .pillar-service .psvc-process__title{font-size:44px;}
  .pillar-service .psvc-process__body{font-size:19px;}
  .pillar-service .psvc-step{grid-template-columns:1fr;gap:0;margin-bottom:4px;}
  .pillar-service .psvc-step__text{max-width:none;padding:44px var(--pad) 40px;order:2;}
  .pillar-service .psvc-step__heading{font-size:34px;}
  .pillar-service .psvc-step__body{font-size:19px;}
  .pillar-service .psvc-step__media{min-height:340px;order:1;}
  .pillar-service .psvc-caps__inner{padding:72px var(--pad) 80px;}
  .pillar-service .psvc-caps__head{margin-bottom:44px;}
  .pillar-service .psvc-caps__title{font-size:32px;}
  .pillar-service .psvc-explore__head{flex-direction:column;align-items:flex-start;gap:12px;}
  .pillar-service .psvc-explore__title{font-size:28px;}
  .pillar-service .psvc-explore__row .name{font-size:20px;}
  .pillar-service .psvc-cta{padding:96px var(--pad);}
  .pillar-service .psvc-cta__title{font-size:48px;}
}
@media(max-width:560px){
  .pillar-service .psvc-caps__grid{grid-template-columns:1fr;}
  .pillar-service .psvc-caps__card:not(:nth-child(2n+1)){border-left:none;padding-left:0;}
  .pillar-service .psvc-caps__card:nth-child(n+3){border-top:none;}
  .pillar-service .psvc-caps__card:not(:first-child){border-top:1px solid rgba(255,255,255,.16);}
  .pillar-service .psvc-caps__card{min-height:0;padding:26px 0 30px;}
  .pillar-service .psvc-caps__card .n{margin-bottom:14px;}
  .pillar-service .psvc-process__title{font-size:38px;}
}