/* ==========================================================
   Microsoft Cloud & Business Transformation
   page-ms-cloud.css  v2.0
   Content source: Revamped-Microsoft-Cloud-webpage.pdf (2026-07)
   Enqueued only on this page template.

   SHARED from intone-design-system.css (NOT duplicated here):
     .svc-hero, .is-clip-text              — hero (matches home page hero design)
     .svc-hero-tagline, __body             — hero subhead
     .home-service-row, __image, __content, __heading, __body,
       __tagline, --image-right            — 4 alternating rows
     .intone-callout, --light-bg, ul li    — bullet callouts
     .home-ready, __arch, __bg-text, __content, __text, __cta-btns
     .btn-cta-white, .btn-cta-outline
     .reveal

   Page-specific (this file — .ms-*):
     .ms-btn                               — hero primary CTA (dark fill)
     .ms-plain-section                     — "How Enterprises Solve This"
     .ms-goldlist                          — gold-left-border bullet list
     .ms-persona-table                     — "if you are / anxiety / how we help" table
     .ms-outcomes-section, .ms-outcome-card — horizontal outcome-card scroller
     .ms-proof                             — case-study card
     .ms-vs-table                          — 4-col competitor comparison table
   ========================================================== */

.intone-ms-page {
  --ms-gold: var(--ds-gold, #f6b43f);
  --ms-navy: #09101d;
  --ms-ink: var(--ds-dark-900, #141414);
  --gutter: clamp(20px, 4vw, 50px);
}

.intone-ms-page *,
.intone-ms-page *::before,
.intone-ms-page *::after {
  box-sizing: border-box;
}

/* ── Inline links to the Microsoft Cloud sub-pages ──
   Scoped to .intone-ms-page since .svc-hero-tagline / .intone-callout are
   shared DS components used on other pages without this treatment.
   Clean gold underline (no background — the gold highlight was removed
   2026-07-13 as it hurt readability); the inline arrow below still signals
   "clickable" without it. */
.intone-ms-page .svc-hero-tagline__body a,
.intone-ms-page .intone-callout ul li a,
.intone-ms-page .ms-goldlist li a,
.intone-ms-page .ms-outcome-card__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ms-gold);
  text-underline-offset: 3px;
  font-weight: 600;
  transition: text-decoration-thickness 0.2s ease, color 0.2s ease;
}
.intone-ms-page .svc-hero-tagline__body a:hover,
.intone-ms-page .intone-callout ul li a:hover,
.intone-ms-page .ms-goldlist li a:hover,
.intone-ms-page .ms-outcome-card__text a:hover {
  color: var(--ms-gold);
  text-decoration-thickness: 3px;
}
/* .ms-goldlist / .ms-outcome-card links already carry their own <strong>/
   uppercase color — keep the link's own color/weight from bleeding onto
   text that shouldn't change (the <strong> stays whatever color it was). */
.intone-ms-page .ms-goldlist li a strong { color: inherit; }

/* Small inline arrow so a linked phrase reads as clickable at a glance,
   not just via the gold highlight. Uses mask + background-color:currentColor
   so it always matches the surrounding (inherited) text color. */
.intone-ms-page .svc-hero-tagline__body a::after,
.intone-ms-page .intone-callout ul li a::after,
.intone-ms-page .ms-goldlist li a::after,
.intone-ms-page .ms-outcome-card__text a::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M10 5l3 3-3 3' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M10 5l3 3-3 3' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}


/* ═══════════════════════════════════════════════════════════
   HERO CTA (below .svc-hero-tagline, white bg — needs a dark-fill
   button, not the white-fill .btn-hero-fill built for dark heroes)
   ═══════════════════════════════════════════════════════ */
.svc-hero-tagline { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.ms-hero-cta { display: flex; }
.ms-btn {
  display: inline-flex;
  align-items: center;
  background: var(--ms-ink);
  color: #fff;
  border: 2px solid var(--ms-ink);
  padding: 16px 32px;
  font-family: var(--ds-font-heading);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ms-btn:hover { background: var(--ms-gold); border-color: var(--ms-gold); color: #141414; text-decoration: none; }
[data-theme="dark"] .ms-btn { background: #f4f6f9; color: #141414; border-color: #f4f6f9; }
[data-theme="dark"] .ms-btn:hover { background: var(--ms-gold); border-color: var(--ms-gold); color: #141414; }


/* ═══════════════════════════════════════════════════════════
   "HOW ENTERPRISES SOLVE THIS" — plain light section, no image
   ═══════════════════════════════════════════════════════ */
.ms-plain-section { background: var(--t-surface); padding: clamp(56px, 7vw, 100px) var(--gutter); }
.ms-plain-section__inner { max-width: 900px; margin: 0 auto; }
.ms-plain-section__heading { font-family: var(--ds-font-heading); font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.15; text-transform: uppercase; color: var(--t-text); margin: 0 0 clamp(16px, 2vw, 24px); }
.ms-plain-section__lead { font-family: var(--ds-font-heading); font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; line-height: 1.4; color: var(--t-text); margin: 0 0 clamp(20px, 2.5vw, 32px); }
.ms-plain-section__closing { font-family: var(--ds-font-heading); font-size: clamp(18px, 1.9vw, 24px); font-weight: 400; font-style: italic; line-height: 1.4; color: var(--t-text-muted, #5b6472); margin: clamp(20px, 2.5vw, 32px) 0 0; }


/* ═══════════════════════════════════════════════════════════
   GOLDLIST — "How We Build on Microsoft Cloud" 4-item list
   ═══════════════════════════════════════════════════════ */
.ms-goldlist { list-style: none; margin: 0 0 clamp(20px, 2.4vw, 32px); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-goldlist li { background: var(--t-bg); border-left: 6px solid var(--ms-gold); padding: 16px 20px 16px 22px; font-family: var(--ds-font-heading); font-size: clamp(14px, 1.4vw, 16px); font-weight: 500; line-height: 1.4; color: var(--t-text); transition: transform 0.3s ease, border-left-width 0.3s ease; }
.ms-goldlist li:hover { transform: translateX(6px); border-left-width: 12px; }
.ms-goldlist li strong { color: var(--t-text); }


/* ═══════════════════════════════════════════════════════════
   PERSONA / DOCUMENTED-ANXIETY TABLE
   Dark navy header row, alternating body rows, italic quote column
   ═══════════════════════════════════════════════════════ */
.ms-persona-section { background: var(--t-bg); padding: clamp(56px, 7vw, 100px) var(--gutter); }
.ms-persona-section__inner { max-width: 1352px; margin: 0 auto; }

.ms-persona-table { display: flex; flex-direction: column; border: 1px solid var(--t-border-strong, #d3dae4); }
.ms-persona-table__row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.6fr; }
.ms-persona-table__row:not(.ms-persona-table__row--head):nth-of-type(even) { background: var(--t-surface); }
.ms-persona-table__row--head { background: var(--ms-navy); }
.ms-persona-table__row--head .ms-persona-table__cell { font-family: var(--ds-font-heading); font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px); }
.ms-persona-table__cell { font-family: var(--ds-font-heading); font-size: clamp(14px, 1.3vw, 16px); font-weight: 400; line-height: 1.45; color: var(--t-text); padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 24px); border-top: 1px solid var(--t-border-strong, #d3dae4); }
.ms-persona-table__row--head .ms-persona-table__cell { border-top: 0; }
.ms-persona-table__cell--role { font-weight: 700; }
.ms-persona-table__cell--quote { font-style: italic; color: var(--t-text-muted, #5b6472); }


/* ═══════════════════════════════════════════════════════════
   OUTCOME CARDS — "What Changes When It's Done Right"
   Mirrors the Application Development .ad-outcomes-* pattern
   ═══════════════════════════════════════════════════════ */
.ms-outcomes-section { background: var(--t-bg); padding: clamp(56px, 7vw, 100px) var(--gutter); }
.ms-outcomes-section__inner { max-width: 1352px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 24px); }
.ms-outcomes-section__header { border-top: 1px solid var(--t-text); padding-top: clamp(16px, 1.8vw, 21px); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.ms-outcomes-section__heading { font-family: var(--ds-font-heading); font-size: clamp(24px, 2.5vw, 36px); font-weight: 700; text-transform: uppercase; color: var(--t-text); margin: 0; }
.ms-outcomes-section__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ds-font-heading); font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; color: var(--t-text); text-decoration: none; white-space: nowrap; transition: opacity 0.2s ease; }
.ms-outcomes-section__link:hover { opacity: 0.7; text-decoration: none; }

.ms-outcomes-cards { display: flex; gap: clamp(12px, 1.5vw, 24px); align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.ms-outcome-card { background: var(--t-surface); flex: 1 0 clamp(200px, 20vw, 280px); min-height: 320px; overflow: hidden; position: relative; padding: clamp(32px, 3vw, 62px) clamp(16px, 2vw, 20px) clamp(16px, 2vw, 24px); display: flex; align-items: flex-start; }
.ms-outcome-card__text { font-family: 'Public Sans', sans-serif; font-size: clamp(15px, 1.5vw, 24px); font-weight: 500; line-height: 1.36; text-transform: uppercase; color: var(--t-text); margin: 0; }


/* ═══════════════════════════════════════════════════════════
   PROOF IN PRACTICE — case-study card (mirrors lm-proof)
   ═══════════════════════════════════════════════════════ */
.ms-proof { background: var(--t-bg); padding: clamp(64px, 8vw, 120px) var(--gutter); }
.ms-proof__inner { max-width: 1280px; margin: 0 auto; }
.ms-proof__meta { margin-bottom: 32px; }
.ms-proof__tag { display: inline-block; font-family: var(--ds-font-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ms-gold); padding: 6px 14px; border: 1.5px solid var(--ms-gold); }

.ms-proof__card { display: grid; grid-template-columns: 1fr 280px; gap: clamp(40px, 5vw, 80px); align-items: start; background: var(--t-surface); padding: clamp(32px, 4vw, 56px); border-left: 4px solid var(--ms-gold); }
.ms-proof__title { font-family: var(--ds-font-heading); font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.2; color: var(--t-text); margin: 0 0 24px; text-transform: uppercase; }
.ms-proof__body { font-family: var(--ds-font-heading); font-size: clamp(15px, 1.4vw, 17px); font-weight: 400; line-height: 1.7; color: var(--t-text-muted, #5b6472); margin: 0 0 16px; }
.ms-proof__body:last-of-type { margin-bottom: 28px; }
.ms-proof__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ds-font-heading); font-size: 15px; font-weight: 600; color: var(--t-text); text-decoration: none; border-bottom: 2px solid var(--ms-gold); padding-bottom: 2px; transition: color 200ms, border-color 200ms; }
.ms-proof__link:hover { color: var(--ms-gold); text-decoration: none; }

.ms-proof__logo-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 8px; }
.ms-proof__client-label { font-family: var(--ds-font-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-text-muted, #5b6472); margin: 0; }
.ms-proof__trusted-agencies { font-family: var(--ds-font-heading); font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: var(--t-text); margin: 0; text-align: center; }
.ms-proof__client-sector { font-family: var(--ds-font-heading); font-size: 12px; font-weight: 500; color: var(--t-text-muted, #5b6472); margin: 0; }


/* ═══════════════════════════════════════════════════════════
   WHY INTONE VS OTHER MICROSOFT PARTNERS — 4-col comparison table
   Last column ("Intone Microsoft Practice") highlighted gold-tint
   ═══════════════════════════════════════════════════════ */
.ms-vs-section { background: var(--t-surface); padding: clamp(56px, 7vw, 100px) var(--gutter); }
.ms-vs-section__inner { max-width: 1352px; margin: 0 auto; }
.ms-vs-section__header { border-top: 1px solid var(--t-text); padding-top: clamp(16px, 1.8vw, 21px); margin-bottom: clamp(28px, 3.5vw, 44px); }
.ms-vs-section__heading { font-family: var(--ds-font-heading); font-size: clamp(24px, 2.8vw, 40px); font-weight: 700; text-transform: uppercase; color: var(--t-text); margin: 0; }

.ms-vs-table { display: flex; flex-direction: column; background: var(--t-bg); }
.ms-vs-table__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr; }
.ms-vs-table__row--head .ms-vs-table__cell { font-family: var(--ds-font-heading); font-size: clamp(12px, 1.1vw, 14px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-text); border-bottom: 2px solid var(--ms-gold); padding-bottom: clamp(10px, 1.2vw, 14px); }
.ms-vs-table__cell { font-family: var(--ds-font-heading); font-size: clamp(14px, 1.3vw, 16px); font-weight: 400; line-height: 1.4; color: var(--t-text-muted, #5b6472); padding: clamp(14px, 1.6vw, 20px) clamp(12px, 1.4vw, 18px); border-top: 1px solid var(--t-border-strong, #d3dae4); }
.ms-vs-table__row--head .ms-vs-table__cell { border-top: 0; }
.ms-vs-table__cell:first-child { padding-left: 0; }
.ms-vs-table__cell--label { font-weight: 700; color: var(--t-text); }
.ms-vs-table__cell--win { background: rgba(246, 180, 63, 0.12); color: var(--t-text); font-weight: 600; }
.ms-vs-table__row--head .ms-vs-table__cell--win { background: rgba(246, 180, 63, 0.22); }


/* ═══════════════════════════════════════════════════════════
   FINAL CTA arch two-button row (matches other pages' pattern)
   ═══════════════════════════════════════════════════════ */
.ms-intro-row { display: flex; gap: 16px; flex-wrap: wrap; }


/* ════ RESPONSIVE ════ */
@media (max-width: 960px) {
  /* Content-before-image on mobile for every alternating row on this page,
     regardless of desktop left/right variant — the shared DS component's
     default mobile behavior just falls back to DOM order (image-first for
     the plain variant, content-first for --image-right), so left/right rows
     were inconsistent with each other. Reading the heading/body first is
     more scannable than opening on a full-width photo, so pin it here. */
  .intone-ms-page .home-service-row__content { order: 0; }
  .intone-ms-page .home-service-row__image,
  .intone-ms-page .home-service-row--image-right .home-service-row__image { order: 1; }

  /* Shorter image band on mobile — the shared 280px height reads oversized
     against this page's much shorter goldlist/callout text blocks. */
  .intone-ms-page .home-service-row__image { height: 220px; }

  .ms-persona-table__row { grid-template-columns: 1fr; }
  .ms-persona-table__row--head { display: none; }
  .ms-persona-table__cell { border-top: 0; border-bottom: 1px solid var(--t-border-strong, #d3dae4); padding: 14px clamp(16px, 3vw, 22px); }
  .ms-persona-table__cell--quote::before { content: 'Documented Anxiety'; display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-gold); font-style: normal; margin-bottom: 4px; }
  .ms-persona-table__cell[data-label]:not(.ms-persona-table__cell--quote)::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-gold); margin-bottom: 4px; }

  .ms-vs-table__row { grid-template-columns: 1fr; gap: 0; border-bottom: 2px solid var(--t-border-strong, #d3dae4); padding-bottom: 8px; margin-bottom: 8px; }
  .ms-vs-table__row--head { display: none; }
  .ms-vs-table__cell { border-top: 0; padding: 6px 0; }
  .ms-vs-table__cell[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--t-text); }
  .ms-vs-table__cell--win { background: none; padding: 6px 12px; border-left: 3px solid var(--ms-gold); }
}

@media (max-width: 700px) {
  .ms-outcomes-cards { flex-wrap: wrap; }
  .ms-outcome-card { flex: 1 0 calc(50% - 0.75rem); min-height: 260px; }

  .ms-proof__card { grid-template-columns: 1fr; }
  .ms-proof__logo-side { padding-top: 0; }
}

@media (max-width: 480px) {
  .intone-ms-page .home-service-row__image { height: 180px; }
  .ms-outcome-card { flex: 1 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .intone-ms-page .reveal { opacity: 1; transform: none; transition: none; }
  .intone-ms-page *, .intone-ms-page *::before { transition: none !important; }
}

.ms-midcta { background: var(--t-surface); padding: clamp(28px, 3.5vw, 44px) var(--gutter); }
.ms-midcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 28px); }
.ms-midcta__text { font-family: var(--ds-font-heading); font-size: clamp(17px, 2.4vw, 38px); font-weight: 600; line-height: 1.3; max-width: 46ch; margin: 0; color: var(--t-text); }
@media (max-width: 860px) { .ms-midcta__inner { flex-direction: column; align-items: flex-start; } }