/* CS-020: presentation only. Runtime, scoring, routes and integrations stay intact. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/manrope-latin-v4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.serene-contact {
  --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: 108 135 152;
  --secondary: 234 244 250;
  --secondary-foreground: 16 24 32;
  --primary: 46 49 200;
  --ring: 46 49 200;
  font: 400 16px/1.65 "Inter",system-ui,sans-serif;
  background: #f7fafc;
  color: #101820;
}
.serene-contact > .container-canvas { max-width: 1280px; padding: 40px 20px 64px; }
.serene-contact .serene-contact-eyebrow { margin: 0 auto 32px; max-width: 1152px; font: 500 12px/1.5 "Inter",system-ui,sans-serif; color: #344c5b; }
.serene-contact .font-sans:not(h1,h2,h3) { font-family: "Inter",system-ui,sans-serif; }
.serene-contact :is(h1,h2) { font-family: "Manrope","Inter",sans-serif; font-synthesis: none; text-wrap: balance; }
.serene-contact h1 { max-width: 24ch; font-size: clamp(34px,4.4vw,56px); font-weight: 550; line-height: 1.1; letter-spacing: -.035em; }
.serene-contact h2 { font-size: clamp(28px,3.2vw,40px); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
.serene-contact h1 .display { font: inherit; }
.serene-contact h3 { font-family: "Manrope","Inter",system-ui,sans-serif; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.serene-contact header { margin-bottom: 32px; }
.serene-contact header > p { max-width: 65ch; font-size: 17px; line-height: 1.7; }
.serene-contact :is(p,li) { text-wrap: pretty; }
.serene-contact :is(button,a,input,select,textarea):focus-visible { outline: 3px solid #2e31c8; outline-offset: 4px; }
.serene-contact label:has(input:focus-visible) { outline: 3px solid #2e31c8; outline-offset: 4px; }
.serene-contact :is(.btn-primary,.btn-secondary) { min-height: 48px; max-width: 100%; padding: 12px 20px; border-radius: 999px; font: 500 14px/1.5 "Inter",system-ui,sans-serif; letter-spacing: 0; box-shadow: none; white-space: normal; text-align: center; }
.serene-contact .btn-primary { background: #2e31c8; color: #fff; }
.serene-contact .btn-secondary { border: 1px solid #6c8798; background: #fff; color: #101820; }
.serene-contact :is(button,a)[class~="bg-primary"] { color: #fff; min-height: 48px; }
.serene-contact button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.serene-contact button { min-height: 44px; }
.serene-contact button:not(:disabled) { transition: background-color 180ms ease,border-color 180ms ease,transform 180ms ease; }
.serene-contact button.group { box-shadow: 0 5px 20px -12px rgb(18 52 73 / .16); }
.serene-contact :is(button,article,div)[class~="bg-fg"] { background: #eaf4fa; color: #101820; border-color: #c9dae5; box-shadow: none; }
.serene-contact button[class~="bg-fg"] { background: #fff; border-radius: 18px; }
.serene-contact [class~="bg-fg"] :is([class~="text-bg"],[class~="text-primary-fg"]) { color: #101820; }
.serene-contact [class~="bg-fg"] [class*="text-bg/"] { color: #344c5b; }
/* Translucent helper text stays lighter than body copy but keeps 4.5:1 on white and #f7fafc. */
.serene-contact :is([class~="text-muted-fg/60"],[class~="text-muted-fg/70"]) { color: #5e727e; }
.serene-contact [class~="bg-fg"] [class*="border-bg/"] { border-color: #c9dae5; }
.serene-contact [class~="bg-fg"] :is(a,button)[class~="bg-primary"] { color: #fff; }
.serene-contact a[class~="bg-fg"] { background: #123449; color: #fff; min-height: 48px; }
.serene-contact button[aria-pressed="true"] { background: #eaf4fa; border-color: #2e31c8; box-shadow: inset 0 0 0 1px #2e31c8; }
.serene-contact button[aria-pressed] h3 { color: #101820; }
.serene-contact button[aria-pressed] [class*="fill-bg/"] { fill: #2e31c8; }
.serene-contact button[aria-pressed] [class*="stroke-bg/"] { stroke: #8fa8b9; }
.serene-contact button[aria-pressed="true"] [class*="stroke-bg/"] { stroke: #2e31c8; }
.serene-contact button[aria-pressed] :is(.display,.font-display) { font: 550 clamp(28px,3.3vw,44px)/1.15 "Manrope","Inter",sans-serif; letter-spacing: -.03em; }
.serene-contact button[class*="h-["] { height: auto; min-height: 180px; padding: 20px; }
.serene-contact button[class*="h-["] > .flex-1 { min-height: 76px; padding-block: 16px; }
.serene-contact button[class*="h-["] h3 { font-size: 17px; }
.serene-contact button[class*="h-["] p:not(.font-mono) { font-size: 14px; line-height: 1.55; }
/* Secondary-tool categories are one non-wrapping row. At 390px a later tab receives focus outside the viewport. */
.serene-contact .overflow-x-auto { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
.serene-contact button[class*="min-h-[340px]"] { min-height: 290px; height: auto; padding: 28px; border-radius: 20px; }
.serene-contact button[class*="min-h-[340px]"] .font-display[aria-hidden] { font: 550 36px/1.1 "Manrope","Inter",sans-serif; letter-spacing: -.03em; color: #8fa8b9; }
.serene-contact button[class*="min-h-[340px]"] h3 { font-size: 25px; }
.serene-contact button[class*="min-h-[340px]"] > p { font-size: 15px; line-height: 1.65; }
.serene-contact button[class*="min-h-[340px]"] > p.font-mono { font-size: 11px; }
.serene-contact button[class*="min-h-[340px]"] > span:last-child { font: 500 13px/1.5 "Inter",system-ui,sans-serif; text-transform: none; letter-spacing: 0; }
.serene-contact button[class*="min-h-[220px]"] { min-height: 210px; border-radius: 20px; }
.serene-contact button[class*="min-h-[220px]"] .font-display { font: 550 32px/1.2 "Manrope","Inter",sans-serif; letter-spacing: -.025em; }
.serene-contact button.group > [aria-hidden].pointer-events-none,
.serene-contact article > [aria-hidden].pointer-events-none { display: none; }
.serene-contact button.group [class*="group-hover:rotate"],
.serene-contact button.group [class*="group-hover:scale"] { transform: none; }
.serene-contact button.group:hover { transform: none; }
.serene-contact .grid { min-width: 0; }
.serene-contact .grid-cols-6 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.serene-contact .grid-cols-6 button { min-height: 220px; padding: 16px 12px; }
.serene-contact .grid-cols-6 button .hidden { display: block; }
.serene-contact .grid-cols-6 button > div { padding-inline: 0; }
.serene-contact input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.sr-only),
.serene-contact textarea,
.serene-contact select { min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid #6c8798; border-radius: 12px; background: #fff; color: #101820; font: 400 16px/1.6 "Inter",system-ui,sans-serif; }
.serene-contact :is(input,textarea)::placeholder { color: #5b7180; opacity: 1; }
.serene-contact :is(input,textarea,select)[class*="border-red"] { border-color: #b42318; }
.serene-contact :is(input,textarea,select):focus { border-color: #2e31c8; }
.serene-contact :is(input,textarea,select)[class*="border-red"]:focus { border-color: #b42318; }
.serene-contact label.font-mono { font: 500 13px/1.5 "Inter",system-ui,sans-serif; letter-spacing: 0; text-transform: none; color: #344c5b; }
.serene-contact label:has(> input[type="radio"]),
.serene-contact label:has(> input[type="checkbox"].sr-only) { min-height: 48px; border-radius: 12px; font: 500 14px/1.5 "Inter",system-ui,sans-serif; }
.serene-contact button[class~="pr-8"] { padding: 12px 40px 12px 14px; border: 1px solid #6c8798; border-radius: 12px; background: #fff; font-size: 16px; color: #344c5b; }
.serene-contact button[class~="pr-8"] > svg { right: 14px; }
.serene-contact div:has(> input[type="tel"]) { padding-left: 12px; border: 1px solid #6c8798; border-radius: 12px; background: #fff; }
.serene-contact input[type="tel"] { border: 0; background: transparent; }
.serene-contact :is([role="alert"],[class*="text-red-"]) { color: #b42318; }
.serene-contact p[role="alert"] { font-size: 13px; line-height: 1.6; }
.serene-contact div[role="alert"] { border-radius: 14px; background: #fff2f0; border-color: #f3b6af; }
.serene-contact [role="alert"] button { min-width: 44px; min-height: 44px; }
.serene-contact [role="progressbar"] { margin-top: 8px; }
.serene-contact [role="progressbar"] > div { height: 4px; }
.serene-contact .animate-kitt-scan { display: none; }
.serene-contact article[class~="bg-fg"] { border-radius: 24px; padding: 28px; }
.serene-contact article[class~="bg-fg"] h2 { font-size: clamp(30px,3.5vw,44px); }
.serene-contact .flex:has(> .btn-primary):has(> .btn-secondary) { flex-wrap: wrap; justify-content: center; }
@media(min-width:640px) {
  .serene-contact > .container-canvas { padding-inline: 32px; padding-top: 48px; padding-bottom: 80px; }
  .serene-contact .grid-cols-6 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .serene-contact header { margin-bottom: 40px; }
}
@media(min-width:1100px) {
  .serene-contact > .container-canvas { padding-inline: 48px; padding-top: 56px; padding-bottom: 112px; }
  .serene-contact .grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .serene-contact .grid-cols-6 button { min-height: 260px; }
  .serene-contact article[class~="bg-fg"] { padding: 40px; }
}
@media(max-width:639px) {
  .serene-contact h1 { letter-spacing: -.025em; }
  .serene-contact button[class*="h-["] { padding: 16px; }
  .serene-contact button[class*="h-["] h3 { font-size: 15px; }
  .serene-contact button[class*="h-["] .display { font-size: 28px; }
  .serene-contact button[class*="h-["] .items-baseline { flex-wrap: wrap; }
  .serene-contact button[class*="min-h-[340px]"] { padding: 24px; }
  .serene-contact .grid:has(> button[class~="bg-fg"]) { gap: 12px; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .serene-contact button.group:not(:disabled):hover { transform: translateY(-2px); border-color: #8fa8b9; }
  .serene-contact button.group[aria-pressed="true"]:hover { border-color: #2e31c8; }
  .serene-contact .btn-primary:not(:disabled):hover { background: #2528ad; }
  .serene-contact .btn-secondary:not(:disabled):hover { background: #eaf4fa; }
}
@media(prefers-reduced-motion:reduce) {
  .serene-contact *, .serene-contact *::before, .serene-contact *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}