/* Cielo sereno · shared visual foundation.
   Phase 1 is opt-in on reference routes. Booking and legal styles remain isolated. */
.serene-site {
  --background: 247 250 252;
  --foreground: 16 24 32;
  --card: 255 255 255;
  --card-foreground: 16 24 32;
  --muted: 234 244 250;
  --muted-foreground: 52 76 91;
  --border: 201 218 229;
  --input: 143 168 185;
  --secondary: 234 244 250;
  --secondary-foreground: 16 24 32;
  --primary: 46 49 200;
  --ring: 46 49 200;
  --serene-deep: #123449;
  --serene-gutter: 20px;
  --serene-space: 56px;
  font-family: "Inter", system-ui, sans-serif;
  background: #f7fafc;
  color: #101820;
}
.serene-page { font-family: "Inter", system-ui, sans-serif; }
.serene-page .font-sans:not(h1,h2,h3) { font-family: "Inter", system-ui, sans-serif; }
.serene-page :is(h1,h2,h3) { font-family: "Manrope","Inter",system-ui,sans-serif; font-synthesis: none; }
.serene-page h3 { font-weight: 600; line-height: 1.25; letter-spacing: -.025em; }
.serene-page .container-canvas { max-width: 1280px; }
.serene-page .canvas-px { padding-left: var(--serene-gutter); padding-right: var(--serene-gutter); }
.serene-page :is(p, li) { text-wrap: pretty; }
.serene-page .serene-section { padding-block: var(--serene-space); }
.serene-page .serene-breadcrumb { border: 0; background: #eaf4fa; }
.serene-page .serene-breadcrumb > div { padding-block: 24px 0; font-family: "Inter", system-ui, sans-serif; font-size: 12px; }
.serene-page .serene-breadcrumb :is(.container-canvas, nav) { flex-wrap: wrap; row-gap: 4px; }
.serene-page .serene-breadcrumb .truncate { overflow: visible; text-overflow: clip; white-space: normal; }
.serene-page .serene-hero { background: linear-gradient(180deg,#eaf4fa 0%,#f7fafc 100%); border: 0; }
.serene-page .serene-hero > [aria-hidden] { display: none; }
.serene-page .serene-hero > .container-canvas { padding-block: 40px var(--serene-space); }
.serene-page .serene-hero h1 { max-width: 18ch; }
.serene-page .serene-hero p { max-width: 64ch; }
.serene-page .serene-hero .animate-draw-underline { display: none; }
.serene-page .serene-hero-copy > p { margin-top: 24px; font-size: clamp(17px,1.4vw,19px); line-height: 1.65; }
.serene-page .serene-hero-copy .serene-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.serene-page :is(.btn-primary,.btn-secondary,.btn-ghost-dark) {
  min-height: 48px; height: auto; max-width: 100%; padding: 12px 22px;
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; line-height: 1.5;
  font-weight: 500; letter-spacing: 0; text-align: center;
  border-radius: 999px; box-shadow: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.serene-page .btn-primary { background: #2e31c8; color: #fff; }
.serene-page .btn-secondary { background: #fff; color: #101820; border-color: #8fa8b9; }
.serene-page :is(a,button,summary,input,select,textarea):focus-visible {
  outline: 3px solid #2e31c8; outline-offset: 4px;
}
.serene-page :is(.serene-card,.serene-identity) {
  border: 1px solid #c9dae5; border-radius: 20px; background: #fff;
  box-shadow: 0 5px 20px -12px rgb(18 52 73 / .16);
}
.serene-page .serene-interactive {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.serene-page :is(.serene-tone,.serene-cta-panel) { background: #eaf4fa; color: #101820; }
.serene-page :is(.serene-tone,.serene-cta-panel) :is([class~="text-bg"],[class~="text-white"]) { color: #101820; }
.serene-page :is(.serene-tone,.serene-cta-panel) [class*="text-bg/"] { color: #344c5b; }
.serene-page :is(.serene-tone,.serene-cta-panel) .btn-primary { color: #fff; }
.serene-page .serene-cta-panel { border-radius: 24px; border: 1px solid #c9dae5; }
.serene-page .serene-tone [class*="divide-"] { border-color: #c9dae5; }
.serene-page .serene-tone img[src*="dark"],
.serene-page .serene-tone img[src*="n8n"] { background: #123449; border-radius: 12px; padding: 12px; }
.serene-page .serene-tone .display:not(h1,h2,h3) { font-family: "Manrope","Inter",sans-serif; font-size: clamp(30px,3vw,44px); line-height: 1.15; font-weight: 550; }
.serene-page .serene-metric { margin-top: 24px; padding: 20px 24px; border: 1px solid #c9dae5; border-radius: 16px; background: #fff; }
.serene-page .serene-metric strong { display: block; font-family: "Manrope","Inter",sans-serif; font-size: 32px; font-weight: 550; line-height: 1.2; color: #123449; }
.serene-page .serene-metric p { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.serene-page .serene-metric small { display: block; margin-top: 12px; font-size: 11px; letter-spacing: .08em; color: #344c5b; }
.serene-process { padding: 28px; border: 1px solid #c9dae5; border-radius: 24px; background: #fff; }
.serene-process .serene-process-label { margin: 0 0 24px; font-family: "JetBrains Mono",monospace; font-size: 11px; letter-spacing: .1em; color: #344c5b; text-transform: uppercase; }
.serene-process ol { display: grid; list-style: none; margin: 0; padding: 0; gap: 24px; }
.serene-process li { position: relative; display: flex; align-items: center; gap: 16px; border: 1px solid #c9dae5; border-radius: 14px; padding: 15px 18px; background: #f7fafc; font-size: 15px; font-weight: 500; }
.serene-process li + li::before { content: ""; position: absolute; height: 24px; width: 1px; top: -25px; left: 34px; background: #8fa8b9; }
.serene-process .serene-node { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 10px; background: #eaf4fa; color: #2e31c8; font-family: "JetBrains Mono",monospace; font-size: 12px; }
.serene-process li:last-child { background: #eaf4fa; border-color: #8fa8b9; }
.serene-identity { display: grid; justify-items: center; align-content: center; gap: 28px; padding: 40px 24px; width: 100%; max-width: 360px; min-height: 280px; }
.serene-identity-logo { width: 112px; height: 112px; object-fit: contain; }
.serene-identity-badge { display: flex; justify-content: center; align-items: center; max-width: 100%; padding: 0; }
.serene-identity-badge img { display: block; width: auto; height: auto; max-width: min(240px,100%); max-height: 104px; object-fit: contain; }
.serene-identity-badge[data-dark="true"] { padding: 12px; border-radius: 14px; background: #123449; }
.serene-identity-badge[data-dark="true"] img { max-height: 140px; max-width: 140px; }
.serene-identity a { max-width: 100%; font-size: 13px; color: #2e31c8; text-align: center; text-decoration: underline; text-underline-offset: 4px; line-height: 1.6; }
.serene-page .serene-editorial-hero > .container-canvas { padding-bottom: 48px; }
.serene-page .serene-editorial-hero h1 { font-size: clamp(34px,4.3vw,56px) !important; max-width: 23ch; }
.serene-page .serene-editorial-body { font-size: 18px; line-height: 1.75; }
.serene-page .serene-editorial-body p { font-size: inherit; line-height: inherit; }
.serene-page .serene-editorial-body h2 { margin-top: 48px; margin-bottom: 20px; font-size: clamp(28px,2.6vw,34px); }
.serene-page .serene-editorial-body h3 { margin-top: 32px; margin-bottom: 16px; font-family: "Manrope","Inter",sans-serif; font-weight: 600; }
.serene-page .serene-editorial-body a { text-underline-offset: 4px; }
@media(min-width:640px) { .serene-site { --serene-gutter:32px; --serene-space:80px; } }
@media(min-width:1100px) { .serene-site { --serene-gutter:48px; --serene-space:112px; } }
@media(max-width:1023px) {
  .serene-page .serene-partner-grid { gap: 28px; }
  .serene-identity { justify-self: start; grid-template-columns: auto 1fr; gap: 16px 24px; min-height: 0; width: 100%; max-width: 480px; padding: 20px; }
  .serene-identity-logo { width: 56px; height: 56px; }
  .serene-identity-badge img { max-width: 160px; max-height: 72px; }
  .serene-identity-badge[data-dark="true"] img { max-width: 112px; max-height: 112px; }
  .serene-identity a { grid-column: 1 / -1; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .serene-page a.serene-interactive:hover { transform: translateY(-2px); border-color: #8fa8b9; box-shadow: 0 10px 22px -16px rgb(18 52 73 / .24); }
  .serene-page .btn-primary:hover { background: #2528ad; opacity: 1; }
  .serene-page .btn-secondary:hover { background: #eaf4fa; }
  .serene-page :is(.btn-primary,.btn-secondary):active { transform: translateY(1px); }
}
@media(prefers-reduced-motion:reduce) {
  .serene-page .serene-interactive, .serene-page :is(.btn-primary,.btn-secondary) { transition: none; transform: none; }
}

/* Informational cards stay still; motion communicates an action only. */
.serene-page article.group { box-shadow: none; }
.serene-page article.group:hover { transform: none; box-shadow: none; }
.serene-page article.group [class*="group-hover:scale"],
.serene-page article.group [class*="group-hover:translate"],
.serene-page article.group [class*="group-hover:rotate"] { transform: none; }
.serene-page article.group [class*="blur-"][aria-hidden] { display: none; }
.serene-page .serene-tone p[style] { color: #123449; }

@media(min-width:640px) {
  .serene-process ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .serene-process li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .serene-process li:nth-child(3) { grid-column: 2; grid-row: 2; }
  .serene-process li:nth-child(4) { grid-column: 1; grid-row: 2; }
  .serene-process li + li::before { left: -29px; top: 50%; width: 28px; height: 1px; }
  .serene-process li:nth-child(3)::before { left: 50%; top: -29px; width: 1px; height: 28px; }
  .serene-process li:nth-child(4)::before { left: auto; right: -29px; }
  .serene-page .serene-metric { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px 16px; padding: 18px 20px; }
  .serene-page .serene-metric p { margin-top: 0; }
  .serene-page .serene-metric small { grid-column: 1 / -1; margin-top: 0; }
}

/* Keep non-pilot templates on their existing alignment during phase 1. */
.serene-page .serene-service-grid { align-items:start; }


/* Home uses the same materials with a distinct sequence of compositions. */
.serene-page .serene-home-clients { border:0; background:#f7fafc; }
.serene-page .serene-home-clients > div { max-width:none; padding-block:56px 16px; }
.serene-page .serene-home-clients-row {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  justify-items:center;
  align-items:start;
  gap:28px 16px;
  margin-top:18px;
}
.serene-page .serene-client-logo { width:auto; max-width:100%; min-width:0; }
/* Preserve the blue case badge while meeting 4.5:1 on its darker hover fill. */
.serene-page .serene-home-clients .serene-client-logo a { color:#225bda; }
@media (min-width:640px) {
  .serene-page .serene-home-clients-row { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px 20px; }
}
@media (min-width:960px) {
  .serene-page .serene-home-clients-row { grid-template-columns:repeat(6, minmax(0, 1fr)); gap:24px 16px; }
}
@media (min-width:1100px) {
  .serene-page .serene-home-clients-row {
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:0 20px;
  }
  .serene-page .serene-client-logo { width:auto; max-width:none; flex:0 0 auto; }
}
.serene-page .serene-home-services > div,
.serene-page .serene-home-why > div,
.serene-page .serene-home-method .container-canvas,
.serene-page .serene-home-testimonials > div { padding-block:var(--serene-space); }
.serene-page .serene-home-services > div { padding-top:40px; }
.serene-home-services .serene-services-grid { display:grid; grid-template-columns:1fr; gap:18px; margin-top:36px; }
.serene-service-card { display:flex; min-width:0; min-height:304px; flex-direction:column; justify-content:space-between; gap:30px; padding:28px; }
.serene-service-card .serene-service-icon { position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#eaf4fa; color:#2e31c8; margin-bottom:24px; }
.serene-service-card .serene-service-icon::after { content:""; position:absolute; left:60px; top:24px; width:42px; height:1px; background:#c9dae5; }
.serene-service-card .serene-service-icon::before { content:""; position:absolute; left:102px; top:20px; width:9px; height:9px; border:1px solid #8fa8b9; border-radius:50%; background:#f7fafc; }
.serene-service-card h3 { margin-bottom:16px; font-size:24px; }
.serene-service-card p { font-size:15px; line-height:1.65; color:#344c5b; }
.serene-service-card .serene-service-link { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:500; color:#2e31c8; }
.serene-page .serene-home-tiers { background:#f7fafc; padding-block:16px; }
.serene-home-tiers-panel { padding:36px 24px; border-radius:28px; background:#123449; color:#fff; }
.serene-home-tiers-panel h2 { color:#fff; }
.serene-home-tiers-panel .serene-tier-intro { color:#d7e7f1; font-size:16px; line-height:1.65; max-width:56ch; margin-top:20px; }
.serene-home-tiers-grid { display:grid; grid-template-columns:1fr; gap:20px; margin-top:36px; }
.serene-tier-card { display:flex; min-width:0; flex-direction:column; border:1px solid #547183; border-radius:18px; overflow:hidden; background:#183e55; }
.serene-tier-card > img { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
.serene-tier-card-copy { display:flex; flex:1; flex-direction:column; gap:16px; padding:24px; }
.serene-page .serene-tier-card h3 { color:#fff; font-size:28px; }
.serene-tier-card p { color:#e0ecf4; font-size:15px; line-height:1.65; }
.serene-tier-card .serene-tier-range { font-family:"JetBrains Mono",monospace; font-size:11px; color:#c5dbe8; }
.serene-tier-card .serene-tier-name { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.serene-page .serene-tier-card:focus-visible { outline-color:#fff; outline-offset:5px; }
.serene-home-method > section { background:#f7fafc; }
.serene-home-method [class*="text-5xl"] { font-family:"Manrope","Inter",sans-serif; font-size:34px; font-weight:550; color:#123449!important; }
.serene-home-method [class*="transition-colors"] { color:inherit; transition:none; }
.serene-home-method [class~="translate-x-1"] { transform:none; }
.serene-page .serene-home-testimonials { background:#eaf4fa; color:#101820; }
.serene-home-testimonials [class*="text-bg/"] { color:#344c5b; }
.serene-home-testimonials [class~="text-bg"] { color:#101820; }
.serene-home-testimonials article { background:#fff; border:1px solid #c9dae5; border-radius:20px; }
.serene-home-testimonials article:hover { background:#fff; border-color:#c9dae5; }
.serene-home-testimonials article > [aria-hidden="true"]:is(div,span.absolute) { display:none; }
.serene-home-testimonials article [class*="group-hover:"] { transform:none; filter:none; animation:none; }
.serene-home-testimonials article [class*="border-bg/"] { border-color:#c9dae5; }
.serene-home-testimonials article [class*="bg-bg/"] { background:#eaf4fa; }
.serene-home-testimonials article [class*="motion-safe:group-hover"] { display:none; }
.serene-page .serene-home-why { border:0; }
.serene-home-why .serene-reasons-grid { display:grid; grid-template-columns:1fr; gap:28px; margin-top:44px; }
.serene-reasons-grid > div { border-color:#c9dae5; padding-top:24px; }
.serene-home-why h3 { font-size:24px; }
@media(min-width:768px) {
  .serene-home-services .serene-services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:48px; }
  .serene-home-tiers-panel { padding:48px 36px; }
  .serene-tier-card-copy { padding:20px; }
}
@media(min-width:1024px) {
  .serene-home-tiers-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .serene-home-why .serene-reasons-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:1100px) {
  .serene-home-services .serene-services-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .serene-home-tiers-panel { padding:56px 40px; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .serene-page .serene-tier-card:hover { transform:translateY(-2px); border-color:#b4d1e2; }
}
@media(prefers-reduced-motion:reduce) { .serene-tier-card { transition:none; } }

.serene-page .serene-home-tiers-panel h2 { font-size:clamp(30px,3.4vw,44px); max-width:20ch; }
.serene-page :is(.serene-service-card,.serene-tier-card,.serene-home-why) h3 { font-family:"Manrope","Inter",sans-serif; font-weight:600; letter-spacing:-.025em; line-height:1.2; }

/* Shared CaseGridCard styling. Append to public/styles/cielo-sereno.css.
   This is an integration fragment, not a separately linked product stylesheet.
   Scope stays inside public .serene-page; Call/legal do not opt into it. */
.serene-page .serene-case-card { border-radius: 20px; background: #fff; box-shadow: 0 5px 20px -12px rgb(18 52 73 / .16); transition: border-color 200ms ease,transform 200ms ease,box-shadow 200ms ease; }
.serene-page .serene-case-card .public-case-card-brand { padding: 24px; background: #fff; }
.serene-page .serene-case-card .public-case-card-identity > span { background: #f7fafc; border-color: #c9dae5; line-height: 1.5; }
.serene-page .serene-case-card .serene-case-summary { font: 600 21px/1.3 "Manrope","Inter",sans-serif; letter-spacing: -.025em; color: #101820; }
.serene-page .serene-case-result { border-left: 2px solid #c9dae5; padding-left: 16px; }
.serene-page .serene-case-metric { font: 550 28px/1.25 "Manrope","Inter",sans-serif; letter-spacing: -.025em; color: #123449; overflow-wrap: anywhere; }
.serene-page .serene-case-qualifier { margin-top: 6px; font: 400 14px/1.6 "Inter",system-ui,sans-serif; color: #344c5b; }
.serene-page .serene-case-card-footer { flex-wrap: wrap; gap: 12px; font: 500 13px/1.5 "Inter",system-ui,sans-serif; background: #f7fafc; min-height: 56px; }
.serene-page .serene-case-card:hover { transform: none; box-shadow: 0 5px 20px -12px rgb(18 52 73 / .16); }
@media(max-width:639px) {
  .serene-page .serene-case-card .public-case-card-brand { padding: 20px; }
  .serene-page .serene-case-card > div:not(.public-case-card-brand) { padding-inline: 20px; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .serene-page .serene-case-card:hover { transform: translateY(-2px); border-color: #8fa8b9; box-shadow: 0 10px 22px -16px rgb(18 52 73 / .24); }
}
@media(prefers-reduced-motion:reduce) {
  .serene-page .serene-case-card { transition: none; }
}