/* Griffith Consulting Group · service pages (services/*.html)
   Loads after css/site.css and reuses its tokens and components: .wrap,
   .eyebrow, .btn3d, .section-head, .lede, .art-frame, .tbl, .chart, .you-we,
   .week, .chip, .you-get. This file adds only the page layout and the few
   pieces the home page has no version of. */

/* ---------------------------------------------------------------- hero */
.p-hero { padding: 40px 0 72px; position: relative; }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.p-hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.4rem); font-weight: 600; margin: 22px 0 20px; }
.p-hero h1 em { font-style: normal; color: var(--accent); }
.p-hero .hero-actions { margin-bottom: 0; }
.p-art { margin: 0; min-width: 0; }
.p-art .iso { width: 100%; height: auto; }
.p-art figcaption { margin-top: 10px; padding: 0 8px; }

.crumbs ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .75rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }

/* ---------------------------------------------------------------- sections */
.p-sec { padding: 88px 0; position: relative; }
.p-sec--alt { background: color-mix(in oklab, var(--bg-2) 82%, transparent); border-block: 1px solid var(--line); }
.p-sec .section-head { margin-bottom: 40px; }
.p-sec .section-head h2 { margin-top: 0; }
.p-sec a:not([class]) { color: var(--accent); text-underline-offset: 3px; }

/* diamond marker, the same shape as the home page trust icons */
.p-card-ico { display: block; width: 24px; height: 24px; border-radius: 5px; background: var(--c); box-shadow: 4px 4px 0 color-mix(in oklab, var(--c) 45%, transparent); transform: rotate(45deg) scale(.82); }

/* what you get */
.p-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.p-card { padding: 24px 22px; border-radius: var(--radius); background: var(--bg); }
.p-card h3 { font-size: 1.12rem; font-weight: 600; margin: 18px 0 8px; }
.p-card p { color: var(--muted); font-size: .95rem; }

/* how it works */
.p-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.p-steps::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 0;
  border-top: 1.5px dashed var(--line-2);
}
.p-step { position: relative; }
.p-step-num {
  position: relative; display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 9px;
  border-radius: 10px; border: 2px solid var(--c); background: var(--bg); color: var(--ink);
  font-size: .95rem; font-weight: 600; box-shadow: 4px 4px 0 var(--c);
}
.p-step h3 { font-size: 1.12rem; font-weight: 600; margin: 20px 0 8px; }
.p-step p { color: var(--muted); font-size: .95rem; max-width: 34ch; }

/* who it's for, with a case note */
.p-who { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.p-who--solo { grid-template-columns: minmax(0, 760px); }
.p-who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.p-who-list li { --rest: 4px; --high: 7px; position: relative; padding: 14px 18px 14px 46px; border-radius: 12px; background: var(--bg); }
.p-who-list li::before {
  content: ""; position: absolute; left: 19px; top: 1.45em; width: 10px; height: 10px; border-radius: 2px;
  background: var(--pc, var(--accent)); transform: rotate(45deg);
}
.p-case {
  --c: var(--ocean);
  padding: 26px; border-radius: 18px; background: var(--bg);
}
.p-case h3 { font-size: 1.3rem; font-weight: 600; margin: 18px 0 8px; }
.p-case p { color: var(--muted); font-size: .97rem; }
.p-case .p-credit { margin-top: 12px; font-size: .75rem; }
.p-credit a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* working-with-ai.html: a pull quote in the case card, and the founder photo beside the background list */
.p-quote blockquote { margin: 20px 0 0; padding-left: 18px; border-left: 3px solid var(--c); }
.p-quote blockquote p { font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.4; font-weight: 500; color: var(--ink); }
.p-portrait { margin: 0; justify-self: center; width: min(100%, 340px); }
.p-portrait img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.p-try { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .8rem; color: var(--accent); text-underline-offset: 3px; }
.p-try span { transition: translate .3s var(--ease-spring); }
.p-try:hover span { translate: 4px 0; }

/* faq */
.p-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.p-faq { display: grid; gap: 12px; }
.p-q { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: border-color .2s, box-shadow .3s; }
.p-q[open] { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); box-shadow: var(--shadow); }
.p-q summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 500; position: relative; }
.p-q summary::-webkit-details-marker { display: none; }
.p-q summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
  transition: transform .35s var(--ease-spring);
}
.p-q[open] summary::after { transform: rotate(135deg); }
.p-q p { padding: 0 20px 20px; color: var(--muted); }

/* other services and the closing call to action */
.p-more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.p-more-card {
  position: relative; display: grid; gap: 6px; height: 100%; padding: 20px 44px 20px 20px; border-radius: var(--radius);
  background: var(--bg); text-decoration: none;
}
.p-more-card b { font-weight: 600; }
.p-more-card span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.p-more-card i { position: absolute; top: 18px; right: 18px; font-style: normal; color: var(--muted); transition: translate .3s var(--ease-spring), color .2s; }
.p-more-card:hover i { translate: 4px 0; color: var(--ink); }

.p-cta {
  margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 32px; border-radius: 18px; background: var(--bg-2); border: 1px dashed var(--line-2);
}
.p-cta h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; }
.p-cta p { color: var(--muted); margin-top: 8px; }

/* ---------------------------------------------------------------- SEO figure */
.anatomy { display: grid; gap: 14px; padding: 18px 14px; }
.an-serp, .an-page { display: grid; gap: 8px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.an-serp { padding: 16px 18px; margin-right: 28px; }
.an-page { padding: 0 18px 18px; margin-left: 28px; overflow: hidden; }
.an-url { font-size: .72rem; color: var(--muted); }
.an-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.an-title { font-size: 1.05rem; font-weight: 500; color: var(--accent); }
.an-desc { font-size: .85rem; line-height: 1.45; color: var(--muted); }
.an-bar { display: flex; align-items: center; gap: 5px; margin: 0 -18px 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: .68rem; color: var(--muted); }
.an-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.an-bar span { margin-left: 8px; }
.an-h1 { font-size: 1.35rem; font-weight: 600; }
.an-h2 { font-size: 1rem; font-weight: 600; }
.an-lines { display: grid; gap: 5px; }
.an-lines i { display: block; height: 7px; border-radius: 4px; background: var(--bg-3); }
.an-lines i:nth-child(2) { width: 72%; }
.an-link { color: var(--accent); font-size: .88rem; text-underline-offset: 3px; }
.an-pin {
  flex: none; font: 500 .66rem/1 var(--f-mono); font-style: normal; white-space: nowrap; padding: 5px 8px; border-radius: 999px;
  color: var(--ink); background: color-mix(in oklab, var(--bark) 22%, var(--bg)); border: 1px solid color-mix(in oklab, var(--bark) 45%, transparent);
  animation: pop-in .5s var(--ease-spring) both; animation-delay: calc(500ms + var(--i) * 150ms);
}

/* content page: the sample week pops in on load */
.p-week { padding: 16px 14px; }
.p-hero .post { animation: pop-in .5s var(--ease-spring) both; animation-delay: calc(600ms + var(--i) * 140ms); }
.p-week .post i { font-style: normal; }
.p-art--week { margin-top: 48px; max-width: 760px; }

/* SEO page: the data card under the agents list */
.p-stat { margin-top: 28px; }

/* ---------------------------------------------------------------- data page */
.p-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 32px; }
.p-jump a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--bg); font-size: .78rem; text-decoration: none;
  transition: border-color .2s, translate .3s var(--ease-spring);
}
.p-jump a::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); transform: rotate(45deg); }
.p-jump a span { color: var(--muted); }
.p-jump a:hover { border-color: var(--c); translate: 0 -2px; }

.p-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.p-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: center;
  padding: 28px; border-radius: 18px; background: var(--bg);
  scroll-margin-top: 100px;
}
.p-stage-top { display: flex; align-items: center; gap: 14px; }
.p-stage-ico .iso { width: 92px; height: auto; }
.p-stage h3 { font-size: 1.35rem; font-weight: 600; margin: 14px 0 8px; }
.p-stage p { color: var(--muted); }
.p-stage .you-get { border-left-color: var(--c); }
.p-stage-ex { min-width: 0; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.p-fix { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p-fix li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "was to now" "why why why";
  gap: 6px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); font-size: .82rem;
}
.p-was { grid-area: was; color: var(--muted); text-decoration: line-through; }
.p-sp { color: var(--moss); text-decoration: none; display: inline-block; }
.p-to { grid-area: to; color: var(--muted); }
.p-now { grid-area: now; justify-self: start; padding: 1px 6px; border-radius: 3px; background: color-mix(in oklab, var(--sand) 35%, transparent); }
.p-why { grid-area: why; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.p-calc { display: grid; gap: 14px; padding: 20px 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.p-calc-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.p-calc p { color: var(--ink); font-size: 1.05rem; }
.p-calc p .mono { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.p-calc b { color: var(--accent); font-size: 1.3rem; font-weight: 600; }

.p-chart .bar-row { grid-template-columns: 96px minmax(0, 1fr) 44px; }
.p-chart-note { margin-top: 6px; font-size: .9rem; color: var(--muted); }

.p-trust { display: grid; gap: 18px; padding: 32px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.p-trust h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; }
.p-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.p-trust li { color: var(--muted); font-size: .96rem; }
.p-trust li b { display: block; color: var(--ink); margin: 12px 0 4px; font-weight: 600; }
.p-trust-close { font: 600 1.2rem/1.4 var(--f-display); letter-spacing: -0.01em; padding-top: 16px; border-top: 1px dashed var(--line-2); }

/* ---------------------------------------------------------------- raised boxes
   Component boxes stand as solid blocks, like the 3D buttons, with no colored line on top. Each box starts flat
   and extrudes toward the lower right as it scrolls into view (js/site.js adds is-up, a beat apart along a row).
   Pointing at a box raises it further. Without scripts, and in calm mode, boxes start raised. */
@property --lift { syntax: '<length>'; inherits: false; initial-value: 0px; }
.p-card, .p-case, .p-more-card, .p-who-list li, .p-stage {
  --side: var(--accent-side);
  border: 1.5px solid color-mix(in oklab, var(--side) 45%, var(--line));
  box-shadow:
    calc(var(--lift) * .125) calc(var(--lift) * .125) 0 var(--side),
    calc(var(--lift) * .25) calc(var(--lift) * .25) 0 var(--side),
    calc(var(--lift) * .375) calc(var(--lift) * .375) 0 var(--side),
    calc(var(--lift) * .5) calc(var(--lift) * .5) 0 var(--side),
    calc(var(--lift) * .625) calc(var(--lift) * .625) 0 var(--side),
    calc(var(--lift) * .75) calc(var(--lift) * .75) 0 var(--side),
    calc(var(--lift) * .875) calc(var(--lift) * .875) 0 var(--side),
    var(--lift) var(--lift) 0 var(--side),
    calc(var(--lift) * 1.6) calc(var(--lift) * 2.2) 24px -14px rgb(0 0 0 / .4);
  translate: calc(var(--lift) * -.5) calc(var(--lift) * -.5);
  transition: --lift .6s var(--ease-spring), border-color .3s;
}
.p-card, .p-case, .p-more-card { --rest: 7px; --high: 12px; }
.p-stage { --rest: 6px; --high: 9px; }
html:not(.js) :is(.p-card, .p-case, .p-more-card, .p-who-list li, .p-stage), .is-up { --lift: var(--rest); }
.is-up { border-color: color-mix(in oklab, var(--side) 70%, var(--line)); }
@media (hover: hover) {
  .is-up:hover { --lift: var(--high); transition-duration: .35s; }
  .p-more-card.is-up:hover { border-color: var(--side); }
}
.p-more-card:active { --lift: 2px !important; transition-duration: .06s; }
.static :is(.p-card, .p-case, .p-more-card, .p-who-list li, .p-stage) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.p-card, .p-case, .p-more-card, .p-who-list li, .p-stage) { transition: none; }
}

/* ---------------------------------------------------------------- static captures */
.static [data-page-root] *, .static [data-page-root] *::before, .static [data-page-root] *::after { animation: none !important; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .p-cards, .p-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .p-steps::before { display: none; }
}
@media (max-width: 960px) {
  .p-hero { padding: 64px 0 56px; }
  .p-hero-grid, .p-who, .p-faq-grid, .p-stage { grid-template-columns: minmax(0, 1fr); }
  .p-hero-grid { gap: 32px; }
  .p-who { gap: 32px; }
  .p-trust ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .p-sec { padding: 64px 0; }
  .p-cards, .p-more, .p-steps { grid-template-columns: minmax(0, 1fr); }
  .p-steps { row-gap: 26px; }
  .p-stage { padding: 20px 16px; gap: 22px; }
  .p-cta, .p-trust { padding: 22px 18px; }
  .anatomy { padding: 10px 4px; }
  .an-serp { margin-right: 10px; }
  .an-page { margin-left: 10px; }
  .an-row { gap: 8px; }
  .an-title { font-size: .95rem; }
  .an-h1 { font-size: 1.12rem; }
  .an-pin { padding: 4px 6px; font-size: .6rem; }
  .p-week .week-head { flex-wrap: wrap; row-gap: 2px; }
  .p-week .post { display: flex; flex-direction: column; font-size: .6rem; padding: 5px 2px; }
  .p-week .post i { display: none; }
  .p-chart .bar-row { grid-template-columns: 98px minmax(0, 1fr) 32px; }
  .p-fix li { font-size: .76rem; gap: 6px 8px; }
}

/* Stage pages (tools/stages.mjs): three cards in a row, the stage icon drawn large in the hero,
   and the link from each stage on the data engineering overview to its own page */
.p-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-icos { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 4vw, 44px); padding: clamp(20px, 3vw, 40px) 12px clamp(12px, 2vw, 24px); }
.p-ico { display: grid; justify-items: center; gap: 12px; flex: 0 1 250px; min-width: 0; }
.p-art .p-ico .iso { width: 100%; max-width: 250px; }
.p-ico .mono { font-size: .76rem; color: var(--muted); text-align: center; }
.p-stage-more { margin-top: 14px; }
.p-stage-more a { font-weight: 600; color: var(--ink); text-decoration-color: var(--c); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.p-stage-more a:hover { text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .p-cards--3 { grid-template-columns: minmax(0, 1fr); }
}
.p-icos > .p-ico:only-child { flex-basis: 340px; }
.p-art .p-ico:only-child .iso { max-width: 340px; }