.method-hero { padding:17px 0 20px; background:radial-gradient(ellipse at 85% 70%,#c4e7ff88,transparent 60%),linear-gradient(110deg,#f2f9ff,#e8f5ff); border-bottom:1px solid #deebfb; }.methodology-page .container { max-width:1360px; }.method-hero nav { display:flex; gap:9px; font-size:.72rem; color:#526a8d; margin-bottom:15px; }.method-hero nav a { color:#285493; }.method-hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr); gap:28px; align-items:center; }.lipicode-bold .method-hero h1 { font-size:clamp(2.3rem,3.8vw,3.4rem); line-height:1.13; letter-spacing:-.04em; color:#091541; margin:0 0 12px; }.method-hero h1 span { color:#0067ff; }.method-hero p { color:#48618a; font-size:.96rem; line-height:1.6; max-width:660px; margin:0; }.method-hero img { width:100%; height:210px; object-fit:contain; }.method-hero ul { list-style:none; display:flex; flex-wrap:wrap; gap:10px 18px; padding:0; margin:18px 0 0; color:#315a90; font-size:.7rem; }
.method-overview { display:grid; grid-template-columns:minmax(0,1fr) 295px; gap:18px; padding-top:18px; padding-bottom:18px; }.method-main { min-width:0; }.method-main h2 { font-size:1.36rem; color:#13274b; margin:0 0 7px; letter-spacing:-.025em; }.method-main > header p { font-size:.83rem; color:#576e90; line-height:1.6; margin:0 0 13px; }.method-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }.method-steps > article { display:flex; flex-direction:column; position:relative; padding:15px 10px 10px; text-align:center; border:1px solid #dce9fb; border-radius:10px; background:#fff; }.method-step-number { position:absolute; top:9px; left:9px; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#0067ef; background:#ddedff; font-size:.75rem; font-weight:700; }.method-icon { display:grid; place-items:center; width:47px; height:49px; border-radius:12px; background:#e4f1ff; color:#0875ff; }.method-icon svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.method-steps .method-icon { margin:0 auto 12px; }.method-steps article:nth-child(2) .method-icon,.method-tech article:nth-child(4) .method-icon { background:#f0e6ff; color:#8840ed; }.method-steps article:nth-child(3) .method-icon,.method-tech article:nth-child(3) .method-icon { background:#e0f8ef; color:#00af7d; }.method-steps article:nth-child(4) .method-icon,.method-tech article:nth-child(2) .method-icon { background:#fff0df; color:#f29a20; }.method-steps h3 { font-size:.8rem; line-height:1.45; color:#1b3053; margin:0 0 8px; }.method-steps p { font-size:.76rem; line-height:1.6; color:#4a6387; margin:0 0 12px; }.method-steps small { display:block; margin-top:auto; padding:10px 7px; border-radius:8px; color:#1262d3; background:#f0f7ff; font-size:.7rem; line-height:1.55; }.method-main .method-tech-title { margin:19px 0 11px; font-size:1.2rem; }.method-tech { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.method-tech > article { padding:14px; border-radius:10px; border:1px solid #e2edfb; background:#f6faff; }.method-tech .method-icon { width:37px; height:39px; margin-bottom:9px; }.method-tech svg { width:24px; height:24px; }.method-tech h3 { font-size:.79rem; line-height:1.45; margin:0 0 7px; color:#1e365b; }.method-tech p { font-size:.74rem; line-height:1.65; margin:0; color:#526b8d; }
.method-sidebar { display:grid; gap:13px; align-content:start; }.method-sidebar section { padding:16px; border:1px solid #dce9fb; border-radius:10px; background:#fff; }.method-sidebar h2 { font-size:.94rem; line-height:1.4; color:#183054; margin:0 0 12px; }.method-sidebar ul { list-style:none; padding:0; margin:0; }.method-sidebar li { position:relative; padding-left:19px; margin-bottom:10px; font-size:.77rem; line-height:1.6; color:#4b6385; }.method-sidebar li::before { content:"✓"; position:absolute; left:0; color:#0875ff; font-weight:700; }.method-sidebar li:last-child { margin-bottom:0; }.method-sidebar p { font-size:.78rem; line-height:1.7; color:#526b8e; margin:0 0 12px; }.method-sidebar .method-commitment { background:#eef7ff; }.method-sidebar a { color:#0067ed; font-size:.76rem; }.method-sidebar .method-contact-button { display:inline-block; padding:9px 22px; border-radius:22px; color:white; background:linear-gradient(110deg,#168aff,#005cff); }
.methodology-body { padding-top:18px; padding-bottom:25px; border-top:1px solid #e1ebf8; }.methodology-body > section { display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid #eaf1fb; scroll-margin-top:90px; }.methodology-body > section > span { color:#0875ff; font-size:.85rem; font-weight:700; }.methodology-body h2 { font-size:1.05rem; color:#233b60; margin:0 0 10px; }.methodology-body p { font-size:.8rem; color:#526984; line-height:1.75; margin:0 0 9px; }.methodology-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.methodology-cards article { border:1px solid #e1eaf7; border-radius:9px; padding:14px; }.methodology-cards h3 { font-size:.85rem; color:#243e64; margin:0 0 8px; }.methodology-cards code { display:block; font-size:.75rem; overflow-wrap:anywhere; margin:10px 0; }.methodology-contact { color:#0067ed; font-size:.8rem; }
.methodology-page a:focus-visible { outline:3px solid #7db8ff; outline-offset:3px; }
@media(max-width:1100px) { .method-overview { grid-template-columns:minmax(0,1fr) 260px; }.method-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }.method-tech { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { .method-overview,.method-hero-grid { grid-template-columns:1fr; }.method-hero img { display:none; }.method-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }.method-sidebar > section:first-child { grid-column:1/-1; } }
@media(max-width:500px) { .method-steps,.method-tech,.method-sidebar,.methodology-cards { grid-template-columns:1fr; }.method-steps > article { text-align:left; padding:15px; }.method-steps .method-icon { margin:0 0 12px 30px; }.methodology-body > section { grid-template-columns:24px minmax(0,1fr); gap:10px; } }
/* Reference-style hero and distinct pastel process/technology tiles. */
.method-hero-art { position:relative; height:210px; }.method-hero-art img { width:100%; height:245px; object-fit:contain; }.method-hero-art > span { position:absolute; right:-5%; top:55px; color:#0061e7; font-style:italic; font-size:1.1rem; line-height:1.45; font-weight:700; transform:rotate(-9deg); border-bottom:3px solid #0060ed; }
.method-steps > article { overflow:visible; }
.method-steps > article:not(:last-child)::after { content:"→"; position:absolute; right:-16px; top:68px; color:#40a8ff; font-size:2rem; font-weight:800; z-index:2; text-shadow:0 1px 3px white; }
.lipicode-bold .page-main .methodology-page .method-icon { color:#0875ff!important; background:#e6f2ff!important; width:49px!important; height:51px!important; border-radius:12px!important; box-shadow:none!important; }
.lipicode-bold .page-main .methodology-page .method-steps article:nth-child(2) .method-icon,.lipicode-bold .page-main .methodology-page .method-tech article:nth-child(4) .method-icon { color:#8b3af2!important; background:#f0e5ff!important; }
.lipicode-bold .page-main .methodology-page .method-steps article:nth-child(3) .method-icon,.lipicode-bold .page-main .methodology-page .method-tech article:nth-child(3) .method-icon { color:#00ba88!important; background:#e0f9ef!important; }
.lipicode-bold .page-main .methodology-page .method-steps article:nth-child(4) .method-icon,.lipicode-bold .page-main .methodology-page .method-tech article:nth-child(2) .method-icon { color:#ff9a18!important; background:#fff1df!important; }
.method-tech > article { background:#f3f9ff; }.method-tech > article:nth-child(2) { background:#fff9f1; }.method-tech > article:nth-child(3) { background:#effbf7; }.method-tech > article:nth-child(4) { background:#f8f3ff; }
.lipicode-bold .page-main .methodology-page .method-steps h3 { font-size:.83rem!important; line-height:1.4!important; }
.lipicode-bold .page-main .methodology-page .method-steps p { font-size:.78rem!important; line-height:1.55!important; }
.method-sidebar h2 { display:flex; align-items:center; gap:9px; }
.method-side-symbol { display:inline-flex; color:#0875ff; flex:0 0 26px; }.method-side-symbol svg { width:26px; height:28px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round; }.method-bulb { color:#ffac16; }
.method-side-question { display:grid; place-items:center; width:27px; height:29px; flex:0 0 27px; color:white; background:linear-gradient(130deg,#22b7ff,#0063ff); border-radius:50% 50% 50% 4px; font-size:1.2rem; }
.method-sidebar li { padding-left:23px; }.method-sidebar li::before { display:grid; place-items:center; width:16px; height:16px; top:2px; border-radius:50%; background:#e1efff; color:#0875ff; font-size:.72rem; }
@media(max-width:1100px) { .method-hero-art > span { display:none; }.method-steps > article::after { display:none; } }
@media(max-width:800px) { .method-hero-art { display:none; } }
/* Keep the detailed methods in the same column and card system as technology. */
.method-overview{align-items:start}
.method-main>.methodology-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:0;border:0;min-width:0}
.method-main>.methodology-body>section{position:relative;display:block;margin:0;padding:15px;border:1px solid #dce9fb;border-radius:10px;background:#f3f9ff;min-width:0;align-self:start}
.method-main>.methodology-body>section:nth-child(2),.method-main>.methodology-body>section:nth-child(3){grid-column:1/-1;background:transparent}
.method-main>.methodology-body>section:nth-child(4){background:#effbf7}
.method-main>.methodology-body>section:nth-child(5){background:#fff9f1}
.method-main>.methodology-body>section:nth-child(6){background:#f8f3ff}
.method-main>.methodology-body>section>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#e2efff;color:#0875ff;font-size:.72rem;margin-bottom:9px}
.lipicode-bold .page-main .method-main>.methodology-body h2{font-size:.94rem!important;line-height:1.4!important;margin:0 0 8px}
.lipicode-bold .page-main .method-main>.methodology-body p{font-size:.78rem!important;line-height:1.65!important;margin:0 0 9px}
.method-main>.methodology-body p:last-child{margin-bottom:0}
.method-main>.methodology-body .methodology-cards{gap:10px;align-items:start}
.method-main>.methodology-body .methodology-cards article{padding:13px;background:#f3f9ff;border:1px solid #dce9fb;border-radius:10px;min-width:0}
.method-main>.methodology-body .methodology-cards article:nth-child(2){background:#fff9f1}
.method-main>.methodology-body .methodology-cards article:nth-child(3){background:#effbf7}
.method-main>.methodology-body .methodology-cards article:nth-child(4){background:#f8f3ff}
.method-main>.methodology-body .methodology-cards h3{font-size:.82rem;margin:0 0 7px}
@media(max-width:600px){.method-main>.methodology-body,.method-main>.methodology-body .methodology-cards{grid-template-columns:1fr}.method-main>.methodology-body>section{grid-column:1}}
/* Flow independent sections into two columns without empty grid cells. */
.method-main>.methodology-body{display:block;columns:2;column-gap:12px}
.method-main>.methodology-body>section{display:inline-block;vertical-align:top;width:100%;box-sizing:border-box;margin:0 0 12px;break-inside:avoid;grid-column:auto!important}
.method-main>.methodology-body .methodology-cards{grid-template-columns:minmax(0,1fr)}
@media(max-width:600px){.method-main>.methodology-body{columns:1}}
/* Pair comparable sections so both columns finish together. */
.method-main>.methodology-body{display:grid;columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.method-main>.methodology-body>section{display:block;width:auto;margin:0;align-self:stretch;break-inside:auto}
.method-main>.methodology-body>section:nth-child(1){order:1}
.method-main>.methodology-body>section:nth-child(4){order:2}
.method-main>.methodology-body>section:nth-child(2){order:3}
.method-main>.methodology-body>section:nth-child(3){order:4}
.method-main>.methodology-body>section:nth-child(5){order:5}
.method-main>.methodology-body>section:nth-child(6){order:6}
@media(max-width:600px){.method-main>.methodology-body{grid-template-columns:1fr}.method-main>.methodology-body>section{order:initial!important}}