
/* Brand pages extend the existing KITAPOS system: light, indigo, Plus Jakarta Sans.
   Editorial layout; variance 5 / motion 2 / density 4. No additional runtime. */
.brand-main {padding-top:112px;color:var(--ink);}
.brand-main h1,.brand-main h2,.brand-main h3 {font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.045em;}
.brand-main h1 {font-size:clamp(42px,4.6vw,64px);font-weight:650;line-height:1.12;}
.brand-main h2,.brand-main h3 {font-weight:600;}
.brand-main h2 {font-size:clamp(30px,3.2vw,44px);line-height:1.2;}
.brand-main p,.brand-main dd {font-size:17px;line-height:1.8;color:var(--muted);}
.brand-hero {padding-bottom:80px;}
.brand-hero-grid {display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
.brand-intro>p {max-width:48ch;margin:24px 0 28px;}
.brand-photo {margin:0;min-width:0;}
.brand-photo img {display:block;width:100%;height:320px;object-fit:cover;object-position:center 12%;border-radius:28px;}
.brand-photo figcaption {font-size:12px;line-height:1.65;color:var(--muted);margin-top:12px;}
.brand-text-link {display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:16px;font-weight:600;color:var(--accent);}
.brand-text-link:hover {text-decoration:underline;text-underline-offset:5px;}
.brand-story {display:grid;grid-template-columns:1fr 1.55fr;gap:80px;padding-top:64px;padding-bottom:96px;border-top:1px solid var(--line);scroll-margin-top:100px;}
.brand-founder {display:flex;gap:20px;align-items:flex-start;}
.brand-founder img {border-radius:50%;width:88px;height:88px;flex-shrink:0;}
.brand-founder h2 {font-size:26px;letter-spacing:-.03em;margin:2px 0 6px;}
.brand-founder p {font-size:13px;line-height:1.7;}
.brand-prose>p+p {margin-top:20px;}
.brand-prose>h2 {margin-bottom:28px;}
.brand-prose>.brand-text-link {margin-top:24px;}
.brand-principles {background:#f7f7fb;padding:80px 0;}
.brand-principle-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px;}
.brand-principle-list dt {font-size:21px;font-weight:600;line-height:1.5;letter-spacing:-.03em;margin-bottom:12px;}
.brand-principle-list dd {font-size:16px;}
.brand-direction,.brand-custom-grid {display:grid;grid-template-columns:1fr 1fr;gap:80px;}
.brand-direction {padding-top:96px;padding-bottom:96px;}
.brand-main .brand-label {font-size:12px;letter-spacing:.1em;font-weight:600;color:var(--accent)!important;margin-bottom:20px;}
.brand-closing {padding-top:64px;padding-bottom:80px;border-top:1px solid var(--line);text-align:center;}
.brand-closing .btn-solid {margin-top:28px;}
.brand-closing p {margin:20px auto 0;max-width:50ch;}
.brand-service {padding-top:64px;padding-bottom:96px;border-top:1px solid var(--line);}
.brand-section-heading {max-width:660px;margin-bottom:48px;}
.brand-section-heading p {margin-top:20px;}
.brand-service-list {display:grid;grid-template-columns:1fr 1fr;gap:40px 72px;}
.brand-service-list li {display:flex;gap:22px;align-items:flex-start;}
.brand-step {font-size:13px;color:var(--accent);font-weight:600;padding-top:7px;}
.brand-service-list h3 {font-size:25px;line-height:1.35;margin-bottom:12px;}
.brand-service-list p {font-size:16px;}
.brand-main .btn-solid {min-height:48px;font-size:16px;}
@media(max-width:1023px) {
 .brand-main {padding-top:96px;}
 .brand-hero-grid {gap:32px;grid-template-columns:1fr 1fr;}
 .brand-main h1 {font-size:44px;}
 .brand-photo img {height:300px;}
 .brand-story {grid-template-columns:1fr;gap:40px;padding-block:56px 72px;}
 .brand-prose,.brand-section-heading {max-width:72ch;}
 .brand-direction,.brand-custom-grid {gap:40px;}
 .brand-principle-list {gap:24px;}
 .brand-service-list {gap:32px;}
 .brand-hero {padding-bottom:64px;}
}
@media(max-width:650px) {
 .brand-main {padding-top:88px;}
 .brand-main h1 {font-size:36px;letter-spacing:-.045em;}
 .brand-main h2 {font-size:30px;}
 .brand-main p,.brand-main dd {font-size:14px;line-height:1.7;}
 .brand-hero-grid,.brand-direction,.brand-custom-grid,.brand-principle-list,.brand-service-list {grid-template-columns:1fr;gap:32px;}
 .brand-photo img {height:auto;aspect-ratio:1.35;}
 .brand-hero,.brand-service {padding-bottom:56px;}
 .brand-principles {padding-block:56px;}
 .brand-direction {padding-block:56px;}
 .brand-story {padding-block:40px 56px;gap:32px;}
 .brand-founder h2 {font-size:24px;}
 .brand-founder p {font-size:12px;}
 .brand-closing {padding-block:48px 56px;}
 .brand-main .btn-solid {font-size:14px;padding-inline:18px;gap:8px;}
 .brand-service {padding-top:40px;}
 .brand-service-list h3 {font-size:23px;}
 .brand-service-list li {gap:16px;}
}
.legal-hero { padding: clamp(112px,13vw,168px) 0 clamp(40px,5vw,60px); border-bottom: 1px solid var(--line); }
.legal-eff { font-size: .86rem; color: var(--faint); margin-top: 18px; }
.legal-body { padding: clamp(44px,6vw,72px) 0 clamp(72px,9vw,120px); }
.legal-grid { display: grid; gap: clamp(32px,5vw,64px); align-items: start; }
@media (min-width: 1024px) { .legal-grid { grid-template-columns: 240px minmax(0,1fr); } }
.legal-toc { position: sticky; top: 96px; display: grid; gap: 9px; align-content: start; }
.legal-toc strong { font-family: var(--f-sans, inherit); font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.legal-toc a { font-size: .92rem; color: var(--muted); line-height: 1.45; transition: color var(--dur) ease; }
.legal-toc a:hover { color: var(--ink); }
@media (max-width: 1023px) { .legal-toc { position: static; padding-bottom: 8px; border-bottom: 1px solid var(--line); } }

.legal { max-width: 72ch; }
.legal h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; font-size: clamp(1.35rem,2.6vw,1.9rem); color: var(--ink); margin: clamp(40px,5vw,60px) 0 14px; scroll-margin-top: 96px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-weight: 800; font-size: 1.02rem; color: var(--ink); margin: 26px 0 8px; letter-spacing: -.01em; }
.legal p { color: var(--muted); line-height: 1.72; margin: 0 0 14px; font-size: 1rem; }
.legal ul, .legal ol { margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.legal li { position: relative; padding-left: 26px; color: var(--muted); line-height: 1.66; }
.legal ul li::before { content: ''; position: absolute; left: 8px; top: .68em; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.legal ol { counter-reset: legal-ol; }
.legal ol li { counter-increment: legal-ol; }
.legal ol li::before { content: counter(legal-ol) '.'; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--accent); font-size: .92rem; line-height: 1.75; }
.legal strong { color: var(--ink); font-weight: 700; }
.legal a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-note { border: 1px solid var(--line); background: var(--card); border-radius: 20px; padding: clamp(20px,3vw,28px); margin: 22px 0; }
.legal-note p:last-child { margin-bottom: 0; }
.legal-dl { display: grid; gap: 18px; margin: 0 0 18px; }
.legal-dl > div { display: grid; gap: 4px; }
.legal-dl dt { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.legal-dl dd { margin: 0; color: var(--ink); line-height: 1.6; font-size: 1.02rem; }
.legal-table { width: 100%; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 0 0 18px; }
.legal-table th, .legal-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .95rem; vertical-align: top; }
.legal-table tr:last-child th, .legal-table tr:last-child td { border-bottom: 0; }
.legal-table th { font-weight: 800; color: var(--ink); background: var(--raise); }
.legal-table td { color: var(--muted); }
.contact-cards { display: grid; gap: 16px; margin: 0 0 22px; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.contact-card { border: 1px solid var(--line); background: var(--card); border-radius: 22px; padding: 24px; display: grid; gap: 7px; align-content: start; }
.contact-card h3 { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.contact-card p { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.contact-card span { color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* Public information pages follow the same saved theme as the homepage. */
:root[data-theme='dark'] .public-page .legal-hero,
:root[data-theme='dark'] .contact-page .legal-hero,
:root[data-theme='dark'] .brand-principles{background:var(--raise)}
:root[data-theme='dark'] .public-page .legal-note,
:root[data-theme='dark'] .contact-page .contact-card{background:var(--card);border-color:var(--line)}
:root[data-theme='dark'] .public-page .legal-table th{background:var(--raise)}
:root[data-theme='dark'] .public-page .legal-table,
:root[data-theme='dark'] .public-page .legal-table td,
:root[data-theme='dark'] .public-page .legal-table th{border-color:var(--line)}
:root[data-theme='dark'] .public-breadcrumb,
:root[data-theme='dark'] .public-page .legal-eff,
:root[data-theme='dark'] .contact-page .contact-card h3{color:var(--faint)}
/* Public pages inherit the homepage brand tokens and shared navigation/footer. */
.public-page [hidden] {display:none!important;}
.public-page :focus-visible {outline:3px solid #6556e8;outline-offset:4px;}
.public-page #main-content:focus:not(:focus-visible) {outline:none;}
.public-page .legal-hero {padding:120px 0 64px;background:#f7f7fb;border:0;}
.public-breadcrumb {display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13px;line-height:1.7;color:#686575;margin-bottom:36px;}
.public-breadcrumb a:hover {color:var(--accent);text-decoration:underline;}
.public-page .public-hero-copy .eyebrow {font-size:12px;color:var(--accent);letter-spacing:.12em;margin-bottom:18px;}
.public-page .public-hero-copy h1 {font-size:clamp(42px,4.6vw,64px);font-weight:650;line-height:1.08;letter-spacing:-2.6px;max-width:19ch;margin:0 0 24px;}
.public-page .public-hero-copy .lede {font-size:20px;line-height:1.6;max-width:62ch;margin:0;}
.public-page .legal-eff {font-size:13px;line-height:1.7;color:#686575;max-width:84ch;margin-top:24px;}
.public-page .legal-grid {grid-template-columns:220px minmax(0,1fr);gap:72px;}
.public-page .legal-toc {top:calc(var(--public-nav-offset) + 36px);gap:0;padding-right:24px;border-right:1px solid var(--line);transition:top .22s var(--ease);}
.public-page .legal-toc strong {font-size:11px;letter-spacing:.12em;margin-bottom:16px;}
.public-page .legal-toc a {padding:10px 0;font-size:14px;line-height:1.6;min-height:44px;}
.public-page .legal {min-width:0;max-width:76ch;}
.public-page .legal h2 {font-size:30px;font-weight:500;line-height:1.2;letter-spacing:-1px;}
.public-page .legal h3 {font-weight:600;}
.public-page .legal p,.public-page .legal li {font-size:16px;line-height:1.85;}
.public-page .legal a {overflow-wrap:anywhere;}
.public-page .legal-note {background:#f7f7fb;border-radius:24px;padding:28px;}
.public-page .legal-table {border-radius:0;}
.public-page .legal-table th {font-weight:600;}
.public-page .legal-table td,.public-page .legal-table th {line-height:1.7;}
.public-page .legal-dl>div {padding-bottom:16px;border-bottom:1px solid var(--line);}
.public-page .legal-dl dt {letter-spacing:.08em;font-weight:600;margin-bottom:5px;}
.contact-page .legal-hero {background:#fff;}
.contact-page .public-hero-layout {display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:center;}
.contact-page .legal-eff {display:none;}
.public-hero-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.contact-hero-photo {position:relative;aspect-ratio:1.1;overflow:hidden;border-radius:32px;background:#eeedf7;}
.contact-hero-photo img {display:block;width:100%;height:100%;object-fit:cover;object-position:center 34%;}
.contact-hero-photo::after {content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#151322ad);}
.contact-hero-photo figcaption {position:absolute;z-index:1;left:24px;right:24px;bottom:24px;font-size:16px;line-height:1.5;color:#fff;text-align:center;}
.contact-page .legal-body {padding-top:32px;}
.contact-page .contact-cards {gap:20px;margin:28px 0 56px;}
.contact-page .contact-card {border:1px solid var(--line);border-radius:24px;background:#f7f7fb;padding:28px;gap:14px;}
.contact-page .contact-card h3 {font-size:12px;letter-spacing:.08em;color:#686575;}
.contact-page .contact-card p {font-size:17px;line-height:1.65;font-weight:500;color:var(--ink);}
.contact-page .contact-card p a {text-decoration:none;}
.contact-page .contact-card p a:hover {text-decoration:underline;}
.contact-page .contact-card span {font-size:14px;line-height:1.75;}
@media(max-width:1023px) {
 .public-page .legal-hero {padding-top:96px;}
 .public-page .legal-grid {grid-template-columns:1fr;gap:40px;}
 .public-page .legal-toc {position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 24px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;}
 .public-page .legal-toc strong {grid-column:1/-1;margin-bottom:8px;}
 .public-page .legal {max-width:72ch;}
 .public-page .public-hero-copy h1,.contact-page .public-hero-copy h1 {font-size:44px;}
 .contact-page .public-hero-layout {gap:32px;grid-template-columns:1.2fr 1fr;}
 .contact-page .public-hero-copy .lede {font-size:17px;}
 .contact-hero-photo {aspect-ratio:.8;}
}
@media(max-width:650px) {
 .public-page .legal-hero {padding:88px 0 40px;}
 .public-page .public-hero-copy h1,.contact-page .public-hero-copy h1 {font-size:36px;letter-spacing:-1.5px;}
 .public-page .public-hero-copy .lede {font-size:14px;line-height:1.7;}
 .public-breadcrumb {margin-bottom:28px;font-size:12px;}
 .public-page .legal-eff {font-size:12px;}
 .public-page .legal-body {padding:32px 0 56px;}
 .public-page .legal h2 {font-size:27px;line-height:1.25;}
 .public-page .legal p,.public-page .legal li {font-size:15px;line-height:1.8;}
 .public-page .legal-toc {grid-template-columns:1fr;gap:0;}
 .public-page .legal-toc a {padding-block:12px;}
 .public-page .legal-note {padding:20px;border-radius:20px;}
 .public-page .legal-table td,.public-page .legal-table th {padding:12px 10px;font-size:13px;}
 .contact-page .public-hero-layout {grid-template-columns:1fr;gap:32px;}
 .contact-hero-photo {aspect-ratio:1.3;border-radius:24px;}
 .public-hero-actions {flex-direction:column;align-items:stretch;}
 .contact-page .contact-cards {grid-template-columns:1fr;gap:16px;}
 .contact-page .contact-card {padding:24px;}
}
