/* Shared JP Atelier identity. The V2 homepage is in home-v2.css. */
@font-face {
  font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/assets/fonts/InterVariable.woff2') format('woff2');
}
:root {
  --jp-midnight:#0a0f1c; --jp-navy:#111d30; --jp-blue:#3b82f6; --jp-blue-hover:#2563eb;
  --jp-text:#111827; --jp-muted:#64748b; --jp-off-white:#f8fafc; --jp-white:#fff; --jp-border:#e5e7eb;
  --jp-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --jp-secondary:#526176; --jp-on-dark:#e2e8f0; --jp-button:#2563eb; --jp-button-hover:#1d4ed8;
  --jp-focus:#2563eb; --jp-error:#b42335; --jp-radius:12px; --jp-control-radius:7px;
  --jp-gap:24px; --jp-card-padding:24px; --jp-section-space:clamp(64px,6vw,88px);
  --jp-header-height:76px; --jp-page-heading:clamp(34px,3.65vw,52px);
  /* CSS and site.js share the 1100px navigation breakpoint; mobile content uses 600px. */
  --ink:var(--jp-text); --graphite:var(--jp-midnight); --graphite-2:var(--jp-navy);
  --warm:var(--jp-off-white); --paper:#fff; --white:#fff; --blue:var(--jp-blue);
  --aqua:#bfdbfe; --muted:var(--jp-muted); --line:var(--jp-border); --line-dark:#334155;
  --radius-sm:8px; --radius-md:12px; --container:min(1240px,calc(100% - 64px));
  --shadow-soft:0 3px 12px rgba(15,23,42,.025);
}
body { font-family:var(--jp-font); background:var(--jp-white); color:var(--jp-text); }
html { scrollbar-gutter:stable; scroll-padding-top:calc(var(--jp-header-height) + 20px); }
::selection { background:#bfdbfe; color:#0a0f1c; }
:focus-visible { outline:3px solid var(--jp-focus); outline-offset:4px; }
#main:focus { outline:none; }
#main [id] { scroll-margin-top:20px; }
body .skip-link { top:16px; left:16px; max-width:calc(100% - 32px); transform:translateY(calc(-100% - 32px)); z-index:1000; transition:none; background:#fff; color:var(--jp-text); }
body .skip-link:focus { transform:translateY(0); }
.jp-icon { display:block; width:26px; height:26px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
body .site-header { background:var(--jp-midnight); color:#fff; border-bottom:1px solid #263244; backdrop-filter:none; }
body .site-header .nav-wrap { width:var(--container); min-height:var(--jp-header-height); }
body .site-header .brand { width:200px; flex-basis:200px; }
body .site-header .brand img { width:200px; height:47px; }
body .site-header .nav { gap:28px; }
body .site-header .nav a { color:var(--jp-on-dark); font-size:14px; min-height:44px; display:inline-flex; align-items:center; }
body .site-header .nav a:hover,body .site-header .nav a[aria-current=page] { color:#93c5fd; }
body .site-header .nav .nav-cta,body .btn-primary { background:var(--jp-button); border-color:var(--jp-button); color:#fff; border-radius:var(--jp-control-radius); }
body .site-header .nav .nav-cta:hover,body .btn-primary:hover { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
body .site-header .nav-toggle { background:transparent; color:#fff; border-color:#475569; }
#main .page-hero { background:#f8fafc; border-bottom:1px solid #e5e7eb; padding:clamp(44px,5.5vw,76px) 0; }
#main .page-hero::before { background:none; }
#main .page-hero .h1 { font-size:var(--jp-page-heading); line-height:1.12; letter-spacing:-.045em; max-width:1000px; color:var(--jp-text); text-wrap:balance; }
#main .page-hero .lede { color:#526176; max-width:760px; font-size:18px; }
#main .page-hero .breadcrumbs { font-size:14px; color:#64748b; margin-bottom:28px; }
#main .page-hero .breadcrumbs a:hover { color:#1d4ed8; }
#main :is(.h2,.h3) { letter-spacing:-.035em; line-height:1.2; }
#main .section { padding:var(--jp-section-space) 0; }
#main :is(.warm,.phase2-ecosystem) { background:#f8fafc; }
#main :is(.dark,.graphite,.cta-band,.phase2-showcase--dark,.phase2-flagship) { background:#0a0f1c; color:#fff; }
#main .phase2-flagship::after,#main .phase2-showcase::before { background:none; }
#main :is(.plain-card,.product-card,.service,.phase2-capability,.phase3-ecosystem-node,.phase2-product-story,.phase3-insight-card,.phase3-contact-map) { border-radius:12px; box-shadow:var(--shadow-soft); }
#main :is(.plain-card,.service,.phase2-capability,.phase3-ecosystem-node) { border-color:#e5e7eb; }
#main :is(.plain-card,.service,.phase2-capability,.phase3-ecosystem-node):hover { border-color:#93c5fd; }
#main :is(.phase3-ecosystem-node,.phase2-product-story) { background:#fff; }
#main .phase3-kicker,body .eyebrow { color:#526176; letter-spacing:.14em; }
#main :is(.dark,.graphite,.cta-band) :is(.eyebrow,.phase3-kicker) { color:#93c5fd; }
#main .phase3-kicker::before { background:#3b82f6; box-shadow:none; }
#main .phase3-techline { background:#e5e7eb; }
#main .phase3-techline::after { animation:none; display:none; }
#main .form-shell form { box-shadow:none; border-radius:12px; }
#main .field :is(input,textarea,select) { background:#f8fafc; border-radius:7px; font-size:16px; }
#main .field label { font-weight:600; }
body :is(.btn,.jp-button) { min-height:48px; padding:12px 20px; border-radius:var(--jp-control-radius); font-size:15px; font-weight:600; line-height:1.45; justify-content:center; gap:12px; }
body :is(.btn,.jp-button):disabled { opacity:.65; cursor:wait; transform:none; }
#main .form-shell form { padding:clamp(20px,3vw,36px); border:1px solid var(--jp-border); background:#fff; }
#main .form-grid { gap:24px 20px; }
#main .field { gap:9px; }
#main .field label { font-size:15px; line-height:1.5; }
#main .field :is(input,select) { min-height:48px; }
#main .field textarea { min-height:144px; resize:vertical; }
#main .field :is(input,textarea,select):focus-visible { outline:2px solid var(--jp-focus); outline-offset:2px; }
#main .field input[type=file] { padding:10px; width:100%; color:var(--jp-secondary); font-size:14px; }
#main .field input[type=file]::file-selector-button { font:inherit; border:1px solid #cbd5e1; border-radius:5px; background:#fff; color:var(--jp-text); padding:8px 12px; margin-right:12px; cursor:pointer; }
#main .field-validation-error { display:block; font-size:14px; line-height:1.55; color:var(--jp-error); }
#main .input-validation-error { background:#fff8f8; }
#main .form-error:not(:empty) { padding:16px; color:var(--jp-error); background:#fff1f2; border:1px solid #fecdd3; font-size:15px; }
#main .form-note { font-size:14px; line-height:1.6; margin-top:12px; }
#main .faq-item { border:1px solid var(--jp-border); border-radius:var(--jp-radius); padding:0; overflow:hidden; }
#main .faq-item summary { padding:20px 24px; line-height:1.55; font-size:16px; list-style-position:inside; }
#main .faq-item summary:hover { background:#f8fafc; }
#main .faq-item summary:focus-visible { outline-offset:-4px; }
#main .faq-item[open] summary { background:#f8fafc; }
#main .faq-item p { padding:0 24px 24px; margin:16px 0 0; font-size:16px; color:var(--jp-secondary); }
#main :is(.dark,.graphite) .faq-item { border-color:var(--line-dark); }
#main :is(.dark,.graphite) .faq-item p { color:var(--jp-on-dark); }
#main :is(.dark,.graphite) .faq-item summary:hover,#main :is(.dark,.graphite) .faq-item[open] summary { background:var(--jp-navy); color:var(--jp-on-dark); }
#main .phase2-flagship { gap:36px; box-shadow:none; border-radius:var(--jp-radius); }
#main .phase2-flagship-copy h2 { font-size:clamp(36px,3.4vw,48px); line-height:1.15; }
#main .phase2-products { padding:var(--jp-section-space) 0; }
#main .phase2-product-story { padding:var(--jp-card-padding); gap:32px; }
#main .phase2-product-story :is(.jpa-demo,.phase2-staypicker-visual) { min-height:0; }
#main .phase2-section-heading { gap:32px; margin-bottom:32px; }
#main .phase2-copy-block p,#main .phase3-about-intro p:not(.big-quote) { font-size:17px; line-height:1.75; }
#main .phase3-contact-flow li { min-width:0; }
#main .phase3-contact-flow strong { display:block; line-height:1.45; }
#main .phase3-contact-flow small { display:block; margin-top:8px; font-size:14px; line-height:1.6; }
#main .phase3-contact-map-head { flex-wrap:wrap; gap:8px 16px; font-size:12px; line-height:1.6; letter-spacing:.08em; }
#main .phase2-demo figcaption,#main .jpa-demo-caption { font-size:14px; line-height:1.65; }
#main .mono,#main .phase2-capability>span,#main .phase3-ecosystem-node>span { color:var(--jp-secondary); font-size:12px; line-height:1.6; }
#main :is(.dark,.graphite,.cta-band,.phase2-flagship,.phase2-showcase--dark) .mono { color:#93c5fd; }
#main :is(.projects-feature--myrent,.phase2-featured-projects) .mono { color:#93c5fd; }
#main .projects-portfolio .lede { color:var(--jp-secondary); }
#main .jpa-demo-steps li { font-size:14px; line-height:1.5; }
#main .jpa-demo-controls { gap:12px; }
#main .jpa-demo-controls>span { font-size:13px; }
#main .jpa-demo-controls button { min-height:44px; font-size:13px; }
#main .idea-success { background:var(--jp-navy); border-radius:var(--jp-radius); box-shadow:none; }
#main .idea-success .h2 { font-size:clamp(30px,3vw,42px); line-height:1.2; }
#main .idea-success p { color:var(--jp-on-dark); font-size:16px; line-height:1.7; }
.jp-mobile-diagram { display:none; }
#main .toc { border-left:2px solid #dbeafe; padding-left:24px; }
#main .article-body { font-size:17px; line-height:1.8; }
#main .article-body a:not(.btn) { color:var(--jp-button); }
#main .article-body :is(h2,h3) { letter-spacing:-.03em; line-height:1.25; }
body .site-footer { background:#0a0f1c; color:#fff; border-top:1px solid #263244; padding:48px 0 24px; }
.footer-intro { display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:center; padding-bottom:32px; border-bottom:1px solid #263244; }
.footer-intro img { width:220px; height:53px; }
.footer-intro p { margin:0; max-width:650px; color:#cbd5e1; font-size:15px; }
body .footer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px; padding-top:32px; border:0; }
body .footer-col h3 { color:#fff; font-size:14px; letter-spacing:0; text-transform:none; margin:0 0 18px; }
body .footer-col a,body .footer-col p,body .footer-end { color:#cbd5e1; font-size:14px; line-height:1.7; }
body .footer-col a { display:block; min-height:40px; padding-block:7px; }
body .footer-col a:hover { color:#93c5fd; }
body .footer-end { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:32px; border-top:1px solid #263244; padding-top:24px; }
@media(max-width:1100px) {
  :root { --jp-header-height:72px; }
  body .site-header .nav-wrap { min-height:72px; }
  body .site-header.has-nav .nav-wrap { flex-wrap:nowrap; gap:12px; height:72px; }
  body .site-header.has-nav .nav { background:#0a0f1c; border-color:#334155; gap:0; }
  body .site-header.has-nav .nav a { display:flex; min-height:48px; }
}
@media(max-width:768px) {
  :root { --container:min(1240px,calc(100% - 40px)); }
  .footer-intro { grid-template-columns:1fr; gap:20px; }
  body .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
}
@media(max-width:560px) {
  :root { --jp-section-space:48px; --jp-card-padding:20px; --jp-page-heading:clamp(32px,8.4vw,38px); }
  :root { --container:min(1240px,calc(100% - 32px)); }
  body .site-header .brand,body .site-header .brand img { width:176px; flex-basis:176px; }
  #main .page-hero .lede { font-size:17px; }
  body .footer-grid { grid-template-columns:1fr; gap:28px; }
  body .footer-col a { overflow-wrap:anywhere; }
  body .h1,body .h2 { overflow-wrap:anywhere; }
}
@media(max-width:380px) {
  body .site-header .brand,body .site-header .brand img { width:150px; flex-basis:150px; }
  body .site-header .nav-toggle { padding-inline:10px; }
}
@media(max-width:600px) {
  #main .phase3-contact-map { padding:20px; }
  #main .phase3-contact-flow li { grid-template-columns:24px minmax(0,1fr); gap:12px; }
  #main .phase2-flagship,#main .phase2-product-story { padding:24px 20px; gap:24px; }
  #main .jpa-demo>svg { display:none; }
  #main .jpa-demo-steps { grid-template-columns:1fr; padding:16px; gap:8px; }
  #main .jpa-demo-steps li { display:flex; gap:16px; align-items:center; padding:12px; font-size:15px; }
  #main .phase2-demo>svg { display:none; }
  .jp-mobile-diagram { display:grid; gap:20px; list-style:none; padding:20px; margin:0; }
  .jp-mobile-diagram li { position:relative; border:1px solid #cbd5e1; border-radius:8px; padding:16px; font-size:15px; line-height:1.65; }
  .jp-mobile-diagram li:not(:last-child)::after { content:"↓"; position:absolute; top:100%; left:50%; height:20px; line-height:20px; color:#60a5fa; }
  .jp-mobile-diagram strong { display:block; font-size:16px; margin-bottom:8px; }
  .jp-mobile-diagram span { display:block; }
  #main .phase2-demo figcaption { padding:16px 20px; }
  #main .faq-item summary { padding:18px 20px; }
  #main .faq-item p { padding-inline:20px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}