/* Services are a personal studio offer; products have their own showcase. */
.inner-page .header { min-height: 100px; }
.inner-page .header nav { margin-left: auto; }
.inner-page h1, .inner-page h2, .inner-page h3 { letter-spacing: -.035em; }
.service-hero { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(40px,7vw,110px); align-items: center; padding-block: 80px 88px; }
.hero-copy h1 { font-size: clamp(50px,5.65vw,80px); font-weight: 400; line-height: 1.06; margin-bottom: 32px; }
.hero-copy h1 strong { font-weight: 700; }
.hero-copy .lede { font-size: 18px; max-width: 44ch; margin-bottom: 28px; }
.service-author { display: flex; align-items: center; gap: 14px; font-size: 12px; margin: 32px 0 0; }
.service-author img { width: 40px; height: 48px; object-fit: cover; object-position: 70% center; }
.service-art { margin: 0; min-width: 0; align-self: center; }
.service-art svg { display: block; width: 100%; height: auto; fill: none; stroke: none; }
.service-art figcaption { font-size: 13px; text-align: center; margin-top: 24px; color: var(--muted); }
.statement-band { background: #e9ece4; }
.statement { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8%; align-items: center; padding-block: 64px; }
.statement h2 { color: var(--ink); font-size: clamp(30px,3.4vw,46px); }
.statement p { margin: 0; max-width: 56ch; }
.page-section { padding-block: 90px; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.35fr); gap: 10%; }
.section-intro h2, .quiet-section > h2 { font-size: clamp(32px,3.8vw,50px); margin-bottom: 25px; }
.section-intro p { max-width: 38ch; }
.capability-rows article { border-top: 1px solid var(--line); padding-block: 24px; }
.capability-rows article:first-child { border-color: var(--ink); }
.capability-rows article:last-child { padding-bottom: 0; }
.capability-rows h3 { font-size: 22px; margin-bottom: 14px; }
.capability-rows p { margin: 0; max-width: 62ch; color: var(--muted); }
.quiet-section { border-top: 1px solid var(--line); padding-block: 70px 90px; }
.quiet-section.has-art { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); column-gap: clamp(40px,7vw,110px); align-items: start; }
.quiet-section.has-art > :not(.section-art) { grid-column: 1; }
.quiet-section.has-art > .section-art { grid-column: 2; grid-row: 1 / span 2; width: min(100%,500px); justify-self: end; align-self: center; }
.section-intro + .section-art { width: min(100%,320px); margin-top: 56px; }
.process { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; padding: 0; margin: 40px 0 0; list-style: none; }
.process li { border-top: 1px solid var(--ink); padding-top: 22px; }
.process h3 { font-size: 22px; margin-bottom: 15px; }
.process p { margin: 0; color: var(--muted); }
.page-contact { background: var(--ink); color: var(--paper); }
.page-contact > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 70px; }
.page-contact h2 { font-size: clamp(36px,4.5vw,60px); color: var(--citron); margin-bottom: 24px; }
.page-contact p { max-width: 49ch; margin: 0; }
.page-contact .button { flex-shrink: 0; }
.page-contact :focus-visible { outline-color: var(--citron); }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 34px; font-size: 12px; }
.page-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.page-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.proof-band { background: var(--lilac); padding-block: 65px; }
.proof-band h2 { font-size: 38px; margin-bottom: 35px; }
.proof-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8%; }
.proof-pair article { border-top: 1px solid var(--ink); padding-top: 24px; }
.proof-pair h3 { font-size: 28px; margin-bottom: 18px; }
.proof-pair p { max-width: 56ch; }

/* A product opens as a complete proposition, followed by its visible mechanism. */
.product-hero { background: var(--ink); color: var(--paper); padding-block: 66px 38px; }
.product-opening { text-align: center; max-width: 1040px; margin-inline: auto; }
.product-opening h1 { font-size: clamp(46px,5.3vw,76px); font-weight: 400; line-height: 1.12; margin-bottom: 25px; }
.product-opening h1 strong { color: var(--citron); font-weight: 400; }
.product-opening h1 strong span { display: inline-block; }
.product-opening .lede { max-width: 57ch; font-size: 18px; margin: 0 auto 28px; }
.product-hero :focus-visible { outline-color: var(--citron); }
.persona-showcase { margin: 58px 0 0; }
.identity-ledger { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); color: var(--ink); }
.identity-ledger > div { min-width: 0; background: var(--paper); padding: 25px 30px 32px; }
.identity-ledger > div:nth-child(2) { background: var(--lilac); }
.identity-ledger > div:nth-child(3) { background: var(--citron); }
.identity-ledger span { font-size: 13px; }
.identity-ledger strong { display: block; font-size: clamp(26px,2.8vw,40px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; margin-block: 25px 12px; }
.identity-ledger p { font-size: 13px; overflow-wrap: anywhere; margin: 0; }
.persona-showcase figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; margin-top: 20px; }
.persona-showcase figcaption span { color: #cbd6c5; font-size: 12px; }
.product-thought .statement { display: block; text-align: center; padding-block: 90px 70px; max-width: 780px; }
.product-thought h2 { font-size: clamp(32px,3.5vw,48px); font-weight: 400; margin-bottom: 24px; }
.product-thought p { margin-inline: auto; max-width: 65ch; }
.product-page .page-section { display: block; padding-block: 65px 85px; border-top: 1px solid var(--line); }
.product-page .section-intro { text-align: center; max-width: 720px; margin: 0 auto 55px; }
.product-page .section-intro h2 { font-weight: 400; }
.product-page .section-intro p { max-width: 56ch; margin-inline: auto; }
.product-page .capability-rows { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 9%; max-width: 1060px; margin-inline: auto; }
.product-page .capability-rows article { border-color: var(--line); padding-block: 25px 0; }
.product-page .capability-rows h3 { font-size: 24px; }
.product-page .quiet-section { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; }
.product-page .quiet-section h2 { font-weight: 400; }
.product-explanation p { max-width: 65ch; }
.product-explanation p:last-child { margin-bottom: 0; }
.product-page .page-contact { background: var(--lilac); color: var(--ink); text-align: center; }
.product-page .page-contact > .wrap { display: block; padding-block: 80px; }
.product-page .page-contact h2 { color: var(--ink); font-weight: 400; }
.product-page .page-contact p { margin-inline: auto; }
.product-page .page-contact .button { margin-top: 30px; background: var(--ink); color: var(--paper); }
.product-page .page-contact .button:hover { background: #3b5a49; }
.product-page .page-contact :focus-visible { outline-color: #8659ce; }
@media (max-width: 1000px) {
  .service-hero { gap: 36px; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  .page-section { gap: 6%; }
  .page-footer { flex-wrap: wrap; }
  .identity-ledger > div { padding-inline: 20px; }
}
@media (max-width: 760px) {
  .inner-page .header { padding-top: 18px; min-height: 110px; }
  .inner-page .header nav { justify-content: flex-start; gap: 25px; }
  .service-hero { grid-template-columns: minmax(0,1fr); padding-block: 45px 45px; gap: 30px; }
  .hero-copy h1 { font-size: clamp(45px,11.5vw,64px); margin-bottom: 25px; }
  .hero-copy .lede { font-size: 17px; }
  .service-author { margin-top: 25px; }
  .service-art { width: min(100%,310px); justify-self: center; }
  .service-art figcaption { margin-top: 4px; font-size: 12px; }
  .statement { grid-template-columns: minmax(0,1fr); gap: 25px; padding-block: 45px; }
  .page-section { grid-template-columns: minmax(0,1fr); gap: 22px; padding-block: 55px; }
  .quiet-section { padding-block: 48px 55px; }
  .quiet-section.has-art { grid-template-columns: minmax(0,1fr); }
  .quiet-section.has-art > .section-art { grid-column: 1; grid-row: auto; width: min(100%,300px); justify-self: center; margin-top: 36px; }
  .section-intro + .section-art { width: min(100%,220px); margin: 32px auto 0; }
  .process { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .proof-band { padding-block: 45px; }
  .proof-pair { grid-template-columns: minmax(0,1fr); gap: 35px; }
  .page-contact > .wrap { display: block; padding-block: 50px; }
  .page-contact .button { margin-top: 30px; }
  .page-footer { display: block; }
  .page-footer nav { margin-block: 12px; gap: 0 20px; }
  .page-footer > span { display: block; margin-top: 18px; }
  .product-hero { padding-block: 45px 30px; }
  .product-opening h1 { font-size: clamp(38px,9.9vw,62px); }
  .product-opening .lede { font-size: 16px; }
  .product-opening .lede br { display: none; }
  .persona-showcase { margin-top: 38px; }
  .identity-ledger { grid-template-columns: minmax(0,1fr); }
  .identity-ledger > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 5px 15px; padding: 20px; align-items: baseline; }
  .identity-ledger span { grid-row: span 2; font-size: 12px; }
  .identity-ledger strong { font-size: 25px; margin: 0; }
  .identity-ledger p { font-size: 11px; }
  .persona-showcase figcaption { display: block; font-size: 12px; }
  .persona-showcase figcaption span { display: block; margin-top: 6px; line-height: 1.6; }
  .product-thought .statement { padding-block: 55px; }
  .product-page .page-section { padding-block: 50px 55px; }
  .product-page .section-intro { margin-bottom: 35px; }
  .product-page .capability-rows { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .product-page .quiet-section { grid-template-columns: minmax(0,1fr); gap: 5px; }
  .product-page .page-contact > .wrap { padding-block: 55px; }
}

/* Legal pages (privacy, terms): a single readable column. */
.legal { max-width: 70ch; padding-block: 64px 96px; }
.legal-head { border-bottom: 1px solid var(--ink); padding-bottom: 24px; margin-bottom: 32px; }
.legal-head h1 { font-size: clamp(40px,5vw,64px); font-weight: 400; margin-bottom: 16px; }
.legal-meta { font-size: 13px; color: var(--muted); margin: 0; }
.legal-toc { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 40px; }
.legal-toc h2 { font-size: 14px; letter-spacing: 0; margin-bottom: 8px; }
.legal-toc ol { margin: 0; padding-left: 1.4em; columns: 2 220px; font-size: 14px; line-height: 1.9; }
.legal h2 { font-size: clamp(24px,2.6vw,30px); margin: 56px 0 18px; scroll-margin-top: 24px; }
.legal h3 { font-size: 19px; letter-spacing: -.02em; margin: 36px 0 14px; scroll-margin-top: 24px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; }
.legal ul { padding-left: 1.2em; margin: 0 0 24px; }
.legal li { margin-bottom: 8px; }
.legal code { font-size: .9em; background: #e9ece4; padding: 1px 5px; overflow-wrap: anywhere; }
.legal a { overflow-wrap: anywhere; }
.legal-table { overflow-x: auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--line); }
.legal-table thead th { border-top: 1px solid var(--ink); font-size: 13px; }
.legal-table tbody th { width: 9em; font-weight: 700; }
.legal-callout { background: var(--lilac); padding: 20px 24px; margin: 0 0 24px; }
.legal-callout p { margin: 0; }
@media (max-width: 760px) { .legal { padding-block: 40px 64px; } }
.legal-clauses { list-style: none; padding: 0; margin: 0 0 24px; }
.legal-clauses li { position: relative; padding-left: 3em; scroll-margin-top: 24px; }
.legal-num { position: absolute; left: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  /* Row-header tables read as label over value; multi-column tables keep their horizontal scroll. */
  .legal-table table:not(:has(thead)) { min-width: 0; }
  .legal-table tbody tr:has(> th[scope=row]) > * { display: block; width: auto; }
  .legal-table tbody th[scope=row] { padding-bottom: 2px; }
  .legal-table tbody th[scope=row] + td { border-top: 0; padding-top: 0; }
  .legal-table table:has(thead):not(:has(th:nth-child(3))) { min-width: 0; }
  /* Masquerade personas: label above name and address so the address never breaks mid-word. */
  .identity-ledger > div { display: block; }
  .identity-ledger strong { margin: 6px 0 4px; }
  .identity-ledger p { font-size: 12px; }
}
@media (max-width: 760px) { .legal-head h1 { hyphens: auto; overflow-wrap: break-word; } }