/* World 1 · Services page (/services). Owns only this page.
   No new visual system: every material here is one of the approved World 1 tokens.
     - warm plate + 30px inner radius   = the .ins-box / .cs-card pattern in css/style.css
     - azure glass rims, --gl-az, --gl-signal, --gl-rim-az = the appended glass blocks in css/style.css
     - eyebrow / folio numerals, hairline rows = the legal + concierge typography (Inter, tight tracking)
     - chips reuse the shared .tags component, .btn* reuse the shared capsules
   Breakpoints follow the site: 1199 and 809 for type, 1100 / 900 / 620 for layout. */

/* ============================ 1. INTRO ============================ */
.svcx-head{padding:210px 0 0}
.svcx-head .h120{line-height:120px}
.svcx-head .lead30{margin-top:50px;max-width:720px}
.svcx-index{margin-top:50px;display:flex;flex-wrap:wrap;gap:8px}
.svcx-index a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:30px;background:var(--white);color:var(--ink);font-size:14px;font-weight:500;letter-spacing:-.018em;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(15,23,42,.06),0 6px 16px rgba(6,26,54,.05);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.svcx-index a:hover{background:#fff;transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.95),0 0 0 1px rgba(150,200,255,.5),0 10px 24px rgba(30,123,230,.14)}
.svcx-index a:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring)}
.svcx-index .n{font-size:11px;font-weight:600;letter-spacing:.1em;color:#1E7BE6;font-variant-numeric:tabular-nums}

/* ============================ 2. THE FIVE ============================
   One grid for all five. The folio stays in the same outer rail on every row; only the
   media and the text column swap (rows 02 and 04 carry .alt), so the rhythm alternates
   without any service becoming its own layout. */
.svcx-list{padding:110px 0 0}
.svcx{display:grid;column-gap:60px;padding:0 0 96px;scroll-margin-top:120px;
  grid-template-columns:96px minmax(0,1fr) minmax(0,560px);
  grid-template-rows:auto auto auto minmax(0,1fr);
  grid-template-areas:"folio head media" "folio copy media" "folio caps media" "folio cta media"}
.svcx+.svcx{padding-top:96px;border-top:1px solid var(--hair)}
.svcx.alt{grid-template-columns:96px minmax(0,560px) minmax(0,1fr);
  grid-template-areas:"folio media head" "folio media copy" "folio media caps" "folio media cta"}
.svcx>*{min-width:0}

/* the folio: an azure optical numeral with the small orange registration point above it */
.svcx-folio{grid-area:folio;position:relative;padding-top:28px;font-size:64px;font-weight:400;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--studio-blue)}
.svcx-folio::before{content:"";position:absolute;left:3px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .svcx-folio{background:var(--gl-az);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

.svcx-head-t{grid-area:head}
.svcx-h{display:flex;flex-direction:column;gap:14px}
.svcx-name{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1E7BE6}
.svcx-prop{font-size:45px;font-weight:400;line-height:1.06;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}

/* body copy in the Concierge system: 400, calm tracking, muted ink. The one .svcx-line per service is ink at 500. */
.svcx-copy{grid-area:copy;margin-top:26px;max-width:540px;font-size:17px;font-weight:400;line-height:1.6;letter-spacing:-.014em;color:#5B6478}
.svcx-copy .svcx-line{color:var(--ink);font-weight:500;letter-spacing:-.018em}
.svcx-copy p+p{margin-top:16px}

.svcx-caps{grid-area:caps;margin-top:34px;max-width:540px}
.svcx-caps-t{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1E7BE6}
.svcx-caps-t::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(30,123,230,.3),rgba(30,123,230,0))}
.svcx-caps .tags{margin-top:16px}

.svcx-cta{grid-area:cta;align-self:start;justify-self:start;margin-top:30px;display:inline-flex;align-items:center;gap:11px;height:46px;padding:0 20px;border-radius:999px;color:var(--ink);font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:-.018em;background:var(--gl-silver);box-shadow:var(--gl-rim-silver);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.svcx-cta:hover{background:var(--gl-silver-h);box-shadow:var(--gl-rim-silver-h);transform:translateY(-1px)}
.svcx-cta:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring)}
.svcx-cta i{display:none}
.svcx-cta svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform .3s var(--ease)}
.svcx-cta:hover svg{transform:translate(2px,-2px)}

/* the visual: warm plate, 30px inner radius, one azure specular pass across the glass.
   Same plate for all five; only the aperture changes, and only because the source asset does.
   16/10 suits the 16:9 client photography, .sq keeps the square studio still life uncropped. */
.svcx-media{grid-area:media;align-self:start;margin:0;position:relative;background:var(--beige);border-radius:40px;padding:10px;--svcx-ar:16/10}
.svcx-media.sq{--svcx-ar:1/1}
/* height:auto is load-bearing: an intrinsic height attribute on the img is a presentational
   hint that would otherwise win over aspect-ratio and render the plate at full source height. */
.svcx-media img{display:block;width:100%;height:auto;aspect-ratio:var(--svcx-ar);object-fit:cover;border-radius:30px;background:var(--dark)}
.svcx-sheen{position:absolute;inset:10px;border-radius:30px;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.06) 26%,rgba(255,255,255,0) 52%)}
.svcx-media::after{content:"";position:absolute;inset:0;border-radius:40px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(15,23,42,.05),0 30px 70px rgba(6,26,54,.09)}

/* ============================ 3. HOW THIS WORKS ============================
   Was a beige card (#F5F5E9, r40, p60) around plain text. Now the same two-column block on the page white,
   opened by the same hairline the five rows above use, in the same rhythm (96px). */
.svcx-fit{padding:0}
.svcx-fit-inner{padding:96px 0 0;border-top:1px solid var(--hair)}
.svcx-fit-grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);column-gap:60px;align-items:start}
.svcx-fit h2{font-size:45px;font-weight:400;line-height:1.06;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.svcx-fit-lead{margin-top:24px;max-width:400px;font-size:17px;font-weight:400;line-height:1.6;letter-spacing:-.014em;color:#5B6478}
.svcx-terms{font-size:17px;font-weight:400;line-height:1.6;letter-spacing:-.014em;color:#5B6478}
.svcx-terms li{position:relative;padding:18px 0 18px 24px;border-top:1px solid var(--hair)}
.svcx-terms li:last-child{border-bottom:1px solid var(--hair)}
.svcx-terms li::before{content:"";position:absolute;left:0;top:27px;width:6px;height:6px;border-radius:50%;background:var(--studio-blue)}
.svcx-terms b{color:var(--ink);font-weight:500;letter-spacing:-.018em}
.svcx-more{margin-top:24px;font-size:15px;font-weight:400;letter-spacing:-.014em;color:#5B6478}
.svcx-more a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.svcx-more a:hover{text-decoration-color:var(--studio-blue)}
.svcx-more a:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring);border-radius:6px}

/* ============================ 4. CONTACT ============================
   Was a solid azure card (r40, p70/60, white type). Now the same close every other World 1 page uses
   (homepage .final, /cases .pf-close): page white, one azure hairline, ink headline, muted line, the
   primary button carries the accent. Same copy, same actions, same hand-off pill under it. */
.svcx-close{padding:96px 0 0}
.svcx-close-card{position:relative;padding:40px 0 0;border-top:1px solid rgba(35,135,232,.26);color:var(--ink)}
.svcx-close-card h2{max-width:760px;font-size:45px;font-weight:400;line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.svcx-close-card p{margin-top:22px;max-width:560px;font-size:17px;font-weight:400;line-height:1.6;letter-spacing:-.014em;color:#5B6478}
.svcx-close-actions{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
/* the shared .btn-dot is white, which disappears on the cream capsule: give it the orange signal */
.svcx-close-actions .btn-light .btn-dot{background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
.svcx-close-note{margin:0;font-size:14px;font-weight:400;color:#5B6478;letter-spacing:-.012em}

/* the one handoff to the second world: small, quiet, under the close */
.svcx-portal{margin-top:34px;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 20px;border-radius:30px;background:var(--white);color:#5B6478;font-size:13.5px;font-weight:500;letter-spacing:-.015em;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(15,23,42,.06),0 6px 16px rgba(6,26,54,.05);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.svcx-portal:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.95),0 0 0 1px rgba(150,200,255,.55),0 10px 24px rgba(30,123,230,.16)}
.svcx-portal:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring)}
.svcx-portal i{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.6)}
.svcx-portal b{color:var(--ink);font-weight:600}
.svcx-portal-go{display:inline-flex;align-items:center;gap:7px;flex:none}
.svcx-portal svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;color:var(--ink)}

/* the footer is a sibling of <main>: ".main-svcx .footer" never matched and the hand-off pill sat on the footer hairline (0px) */
.main-svcx ~ .footer{padding-top:120px}   /* padding, not margin: a margin would expose the body white behind the page ground */

/* ============================ RESPONSIVE ============================ */
@media (max-width:1199px){
  .svcx-folio{font-size:52px;padding-top:24px}
  .svcx-prop,.svcx-fit h2,.svcx-close-card h2{font-size:30px;line-height:33px}
  .svcx-copy,.svcx-terms,.svcx-fit-lead,.svcx-close-card p{font-size:15px;line-height:1.55}
}
@media (max-width:1100px){
  .svcx,.svcx.alt{column-gap:24px;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"folio head" ". copy" ". media" ". caps" ". cta"}
  .svcx-media{margin-top:34px}
  .svcx-copy,.svcx-caps{max-width:640px}
  .svcx-fit-grid{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .svcx-fit-lead{max-width:none}
  .svcx-fit-inner{padding-top:64px}
}
@media (max-width:900px){
  .svcx-head{padding-top:130px}
  .svcx-head .lead30{margin-top:30px}
  .svcx-index{margin-top:34px}
  .svcx-list{padding-top:70px}
  .svcx{padding-bottom:64px}
  .svcx+.svcx{padding-top:64px}
  .svcx-close{padding-top:64px}
  .svcx-close-card{padding-top:30px}
  .main-svcx ~ .footer{padding-top:80px}
}
@media (max-width:809px){
  .svcx-prop,.svcx-fit h2,.svcx-close-card h2{font-size:26px;line-height:1.12}
  .svcx-copy,.svcx-terms,.svcx-fit-lead,.svcx-close-card p{font-size:14px;line-height:1.55}
  .svcx-folio{font-size:42px;padding-top:20px}
  .svcx-terms li{padding:15px 0 15px 22px}
  .svcx-terms li::before{top:23px}
}
@media (max-width:620px){
  .svcx,.svcx.alt{column-gap:0;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"folio" "head" "copy" "media" "caps" "cta"}
  .svcx-folio{padding-top:16px;margin-bottom:14px}
  .svcx-media{margin-top:28px;border-radius:30px;padding:8px;--svcx-ar:3/2}
  .svcx-media img{border-radius:22px}
  .svcx-sheen{inset:8px;border-radius:22px}
  .svcx-media::after{border-radius:30px}
  .svcx-fit-inner{padding-top:48px}
  .svcx-close-actions{gap:14px}
  .svcx-close-actions .btn{width:100%;justify-content:center}
  /* the handoff wraps to two lines: the bead stays on the first line of the question,
     "Enter AI LAB" drops underneath instead of stranding the bead on a row of its own */
  .svcx-portal{align-items:flex-start;flex-wrap:wrap;row-gap:4px}
  .svcx-portal i{margin-top:6px}
  .svcx-portal-txt{flex:1 1 200px}
  .svcx-portal-go{margin-left:19px}
}
@media (prefers-reduced-motion:reduce){
  .svcx-index a,.svcx-cta,.svcx-cta svg,.svcx-portal{transition:none}
}