/* =================================================================
   AI Services — full-stack service page (EN only)
   Added 2026-08 for AICenter/ai-services.html.
   Every selector is namespaced under `.svcs-*` so nothing here can
   collide with the legacy `ai-consultation.css` still used by
   consultation.tw.html. Public classes (.eyebrow, .wrap-wide,
   .btn*, .breadcrumb, h1/h2/h3/p from base.css + components.css)
   are reused as-is and never redefined globally.
   Dark-hero colours are hardcoded the same way ai-product.css does.
   ================================================================= */

/* The step numbers / deliverable chips use the corporate blue that already
   exists in tokens.css — `--accent` (#2563eb, the same blue as the
   rgba(37, 99, 235, …) gradients). No new colour is introduced. */

/* =================================================================
   HERO — dark, two columns (copy left, diagram right)
   Visual reference: `.product-hero.is-dark` in ai-product.css
   ================================================================= */
.svcs-hero {
  --svcs-hero-bg: #0b1220;          /* one step darker than --bg-dark */
  --svcs-hero-soft: rgba(248, 250, 252, 0.75);
  --svcs-hero-faint: rgba(248, 250, 252, 0.55);
  --svcs-hero-hairline: rgba(248, 250, 252, 0.10);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--space-16));
  padding-bottom: var(--space-16);
  background: var(--svcs-hero-bg);
  color: var(--text-on-dark);
}
/* ambient green/blue glow, tinted to read on a dark ground */
.svcs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 12% -15%, rgba(133, 194, 38, 0.16), transparent 62%),
    radial-gradient(ellipse 65% 45% at 95% 15%, rgba(37, 99, 235, 0.20), transparent 64%);
  pointer-events: none;
}
.svcs-hero > * { position: relative; }

/* breadcrumb on dark */
.svcs-hero .breadcrumb { color: var(--svcs-hero-faint); }
.svcs-hero .breadcrumb a { color: var(--svcs-hero-soft); }
.svcs-hero .breadcrumb a:hover { color: var(--asrock-light); }

/* two columns from 901px up; below that the image follows the copy */
.svcs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 901px) {
  .svcs-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
  }
}

/* ---- left column: copy ---- */
.svcs-hero .eyebrow {
  color: var(--asrock);
  background: rgba(133, 194, 38, 0.12);
  border-color: rgba(133, 194, 38, 0.35);
}
.svcs-hero h1 {
  color: var(--text-on-dark);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  line-height: 1.08;
  margin-bottom: var(--space-5);
}
.svcs-hero .lede {
  color: var(--svcs-hero-soft);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 0 var(--space-8);
}
.svcs-hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* outline button needs light ink/border on dark */
.svcs-hero .btn-ghost {
  color: var(--text-on-dark);
  background: rgba(248, 250, 252, 0.04);
  border-color: rgba(248, 250, 252, 0.28);
}
.svcs-hero .btn-ghost:hover {
  background: rgba(248, 250, 252, 0.10);
  border-color: rgba(248, 250, 252, 0.55);
  color: var(--text-on-dark);
}

/* ---- right column: the PNG already ships its own dark card + padding,
        so it is rendered plain — no wrapper panel, just a hairline ---- */
.svcs-hero-media { margin: 0; }
.svcs-hero-media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--svcs-hero-hairline);
}

/* =================================================================
   Shared section rhythm (01 / 02 / 03 / 04)
   ================================================================= */
.svcs-why,
.svcs-model,
.svcs-caps,
.svcs-timeline {
  padding: var(--space-20) 0;
  scroll-margin-top: calc(var(--nav-h) + var(--space-6));
  color: var(--text);
}
.svcs-why { background: var(--bg-page); }
.svcs-model { background: var(--bg-page); }
.svcs-caps { background: var(--bg-card); border-top: 1px solid var(--border); }
.svcs-timeline { background: var(--bg-page); }

.svcs-why h2,
.svcs-model h2,
.svcs-caps h2,
.svcs-timeline h2 { max-width: 28ch; margin: 0 0 var(--space-5); }
.svcs-lede {
  max-width: 62ch;
  margin: 0 0 var(--space-12);
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* =================================================================
   01 · Why Work With Us — 4 cards
   03 · What We Can Build — 8 cards (same card, tighter body)
   ================================================================= */
.svcs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .svcs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}
@media (min-width: 1100px) {
  .svcs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.svcs-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base),
              box-shadow var(--dur-base);
}
@media (hover: hover) {
  .svcs-card:hover {
    transform: translateY(-2px);
    border-color: var(--asrock);
    box-shadow: var(--shadow-sm);
  }
}
.svcs-card .num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.svcs-card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
}
.svcs-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dim);
}
/* the 8-card capabilities grid carries more items — tighten the body */
.svcs-grid.is-tight .svcs-card { gap: var(--space-2); }
.svcs-grid.is-tight .svcs-card h3 { font-size: 1.12rem; }
.svcs-grid.is-tight .svcs-card p { font-size: 0.9rem; }

/* the 04 timeline puts all five stages side by side on desktop */
@media (min-width: 1100px) {
  .svcs-grid.is-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .svcs-grid.is-timeline .svcs-card { min-height: 230px; }
}

/* =================================================================
   02 · Our Engagement Model — 5 stacked full-width rows
   ================================================================= */
.svcs-rows { display: flex; flex-direction: column; gap: var(--space-5); }

.svcs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
@media (hover: hover) {
  .svcs-row:hover { border-color: var(--asrock); box-shadow: var(--shadow-sm); }
}
/* desktop: [number] [title] [scope] [deliverable] */
@media (min-width: 900px) {
  .svcs-row {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.1fr) 260px;
    gap: var(--space-8);
    align-items: start;
    padding: var(--space-8);
  }
}

.svcs-row-num {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1.4;
}
.svcs-row-title h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}
.svcs-row-sub {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-dim);
}

.svcs-row-scope {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svcs-row-scope li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.svcs-row-deliverable {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card-tint-blue);
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 10px;
}
.svcs-row-deliverable .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.svcs-row-deliverable .name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

@media (max-width: 639px) {
  .svcs-why,
  .svcs-model,
  .svcs-caps,
  .svcs-timeline { padding: var(--space-16) 0; }
  .svcs-row { padding: var(--space-5); }
}

/* =================================================================
   NEXT STEP — dark closing CTA
   Same ground as the hero so the page opens and closes on dark.
   (Hero's custom props are scoped to .svcs-hero, so restate them.)
   ================================================================= */
.svcs-next {
  --svcs-hero-bg: #0b1220;
  --svcs-hero-soft: rgba(248, 250, 252, 0.75);
  padding: var(--space-16) 0 var(--space-20);
  background: var(--svcs-hero-bg);
  color: var(--text-on-dark);
  /* centred Next Step pill, same placement as the center/*.html product CTAs */
  text-align: center;
}
.svcs-next .eyebrow {
  color: var(--asrock);
  background: rgba(133, 194, 38, 0.12);
  border-color: rgba(133, 194, 38, 0.35);
}
.svcs-next-inner {
  max-width: 860px;
  margin: 0 auto;
  padding-top: var(--space-8);
  text-align: center;
}
.svcs-next-inner h2 {
  color: var(--text-on-dark);
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-6);
}
.svcs-next-inner p {
  color: var(--svcs-hero-soft);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 auto var(--space-8);
}
.svcs-next-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* outline button needs light ink/border on dark */
.svcs-next .btn-ghost {
  color: var(--text-on-dark);
  background: rgba(248, 250, 252, 0.04);
  border-color: rgba(248, 250, 252, 0.28);
}
.svcs-next .btn-ghost:hover {
  background: rgba(248, 250, 252, 0.10);
  border-color: rgba(248, 250, 252, 0.55);
  color: var(--text-on-dark);
}

/* =================================================================
   design-system typography (body.ds-type scope)
   -----------------------------------------------------------------
   Implements docs/design/AI_CENTER_DESIGN_SYSTEM.md § Typography the
   same way ai-home.css does for index.html.
   EVERY rule in this block is scoped to .ds-type, a class set on
   <body> by all four ai-services builds (EN/TC/JP/KR). The scope is
   the only thing that keeps any future page loading this stylesheet
   without the class untouched — never add a bare selector here.
   Spec sizes/tracking were tuned for Latin type; CJK headlines
   inherit them — flag visual issues rather than forking per language.

   Spec values are desktop-first fixed px; clamp() is used only so the
   narrow viewports do not overflow — at >=1440px every clamp lands on
   the spec value. #111827 is the spec's text colour; no token matches
   it (tokens.css --text is #0f172a), so it is a literal here. This page
   has two dark grounds (.svcs-hero and .svcs-next, both #0b1220): their
   headings restate the scale but deliberately omit colour, so the
   existing --text-on-dark ink survives.
   ================================================================= */

/* --- 0 · one family everywhere: remap the display/mono aliases to Inter --- */
.ds-type {
  --font-display: var(--font-body);   /* was "Space Grotesk" */
  --font-mono: var(--font-body);      /* was ui-monospace */
}

/* --- 1 · hero headline — 700 / 72px / 1.05 / -0.04em ---
   colour omitted: the hero ground is dark, see block header. */
.ds-type .svcs-hero h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.75rem, 5vw + 1rem, 4.5rem);   /* 44px → 72px (max from 1120px up) */
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* --- 2 · section headlines — 700 / 48px / 1.1 / -0.03em / #111827 --- */
.ds-type .svcs-why h2,
.ds-type .svcs-model h2,
.ds-type .svcs-caps h2,
.ds-type .svcs-timeline h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);      /* 32px → 48px (max from 1280px up) */
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #111827;
}
/* the closing CTA is the second dark ground: same scale, no colour. */
.ds-type .svcs-next-inner h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* --- 3 · card titles — 600 / 28px / 1.25 ---
   .svcs-card is one component shared by three grids (01 / 03 / 04) and
   .svcs-row-title h3 is 02's row heading; the spec defines a single card
   title size, so all four read at 28px. Letter-spacing is left alone —
   the spec does not name one, so each selector keeps its own tracking. */
.ds-type .svcs-card h3,
.ds-type .svcs-row-title h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.25;
}
/* .svcs-grid.is-tight out-specifies the rule above (3 classes vs 2), so the
   8-card capabilities grid must be lifted explicitly. is-tight keeps its
   tighter gap; only its type returns to the spec tier. */
.ds-type .svcs-grid.is-tight .svcs-card h3 {
  font-size: 1.75rem;
  line-height: 1.25;
}

/* --- 4 · large body copy — 400 / 20px / 1.65, 70–80ch measure --- */
.ds-type .svcs-hero .lede,
.ds-type .svcs-lede,
.ds-type .svcs-next-inner p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.65;
}
/* measure: the existing caps all stay inside the band at 20px — hero lede
   38rem (≈55ch), section lede 62ch, closing CTA 60ch. */

/* --- 5 · standard body copy — 400 / 18px / 1.6 --- */
.ds-type .svcs-card p,
.ds-type .svcs-row-sub,
.ds-type .svcs-row-scope li,
.ds-type .svcs-row-deliverable .name {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}
/* .svcs-row-sub (500) and the deliverable .name (600) are emphasis lines
   rather than prose, so they keep their weight; the prose members of the
   tier take the spec's 400. */
.ds-type .svcs-card p,
.ds-type .svcs-row-scope li {
  font-weight: 400;
}
/* same specificity story as the is-tight card title above */
.ds-type .svcs-grid.is-tight .svcs-card p {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* --- 6 · navigation — 500 / 16px --- */
.ds-type .nav-primary a {
  font-size: 1rem;
  font-weight: 500;
}
/* the header "Contact" pill is a button, not a nav link: the pre-existing
   .nav-primary a rule out-specifies .btn and was flattening it to 500 */
.ds-type .nav-primary a.btn {
  font-weight: 600;
}

/* --- 7 · buttons — 600 / 16px / 52px tall / pill ---
   components.css .btn is already a pill (999px); the size, the spec's
   literal 9999px and the measured height are restated, and .btn-green's
   700 is normalised back to the spec's 600. Vertical padding is dropped in
   favour of min-height so the border-box measures exactly 52px including
   the 1px transparent border. */
.ds-type .btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 9999px;
}
/* .btn-sm is an explicit small variant — the only one on this page is the
   header "Contact" pill, which has to fit a 64px bar. It opts out of the
   52px standard height only; its text stays 16px/600 like the nav row. */
.ds-type .btn-sm {
  min-height: 40px;
}

/* --- 8 · small labels — 600 / 12px / uppercase / 0.08em ---
   the six section eyebrows, the card index / "WEEK n" chips in 01·03·04,
   and 02's DELIVERABLE label. */
.ds-type .eyebrow,
.ds-type .svcs-card .num,
.ds-type .svcs-row-deliverable .label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- 9 · auxiliary text the spec does not define (.breadcrumb, 02's
   .svcs-row-num numeral, the footer) keeps its existing relative size;
   all of it is already >= 12px and picks up Inter from step 0. --- */