/* pages-company.css: Consulting, About, Contact, Careers and FAQ.
   Loaded after style.css; every rule is scoped to its page (body.p-<name>).
   Drawings are only the LINE (logo red, rising) or the LEDGER (a grid of cells). */

/* ---------- Shared: a rising line with labelled nodes (careers, contact) ---------- */
.node-line { margin: 0; display: grid; }
.node-line > svg, .node-line > ol { grid-area: 1 / 1; }
.node-line > svg { width: 100%; height: var(--nl-h, 260px); overflow: visible; }
.node-line > svg path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.node-line > ol { position: relative; }
.node-line li { position: absolute; left: var(--x); top: var(--y); padding: 20px 0 0; margin-left: -9px; white-space: nowrap; font: 600 var(--fs-l)/1.2 var(--sans); letter-spacing: 0; }
.node-line li::before { content: ""; position: absolute; left: 0; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 4px var(--red); }
.node-line li:last-child { margin-left: 0; padding: 0 0 20px; transform: translate(calc(-100% + 9px), -100%); text-align: right; }
.node-line li:last-child::before { left: auto; right: 0; top: auto; bottom: -9px; }
.node-line li:last-child::before { background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .mo .node-line { clip-path: inset(-30% 100% -30% -4%); animation: nl-wipe 1400ms var(--ease-in-out) 250ms forwards; }
}
@keyframes nl-wipe { to { clip-path: inset(-30% -4% -30% -4%); } }

/* type: one smaller heading step shared by these pages (service titles, FAQ groups, names, values) */
.p-consulting, .p-about, .p-faq, .p-contact, .p-careers, .p-security { --fs-h2s: max(calc(var(--fs-l) * 1.1), calc(var(--fs-h2) * 0.6)); }  /* the floor keeps these headings a step above the lead on phones */

/* =========================================================
   Consulting
   ========================================================= */
.p-consulting .c-hero { align-items: end; }
.p-consulting .c-hero-copy { grid-row: 2; }
/* hero drawing: one rising line ending in a filled node (the four steps live lower down) */
.p-consulting .c-rise { position: relative; grid-column: 8 / -1; grid-row: 2; height: clamp(180px, 18vw, 280px); margin: 40px 0 36px; }
.p-consulting .c-rise svg { width: 100%; height: 100%; overflow: visible; }
.p-consulting .c-rise path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p-consulting .c-node { position: absolute; left: 98.5%; top: 5%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .mo .p-consulting .c-rise { clip-path: inset(-30% 100% -30% -4%); animation: nl-wipe 1400ms var(--ease-in-out) 250ms forwards; }
}
@media (max-width: 899px) {
  .p-consulting .c-rise { grid-column: 1 / -1; grid-row: 3; height: 120px; margin: 48px 12px 32px 0; }
}

/* services: the h2 and the CIO text on the left (5), the engagement models on the right (7) */
.p-consulting .svc-lead { margin-top: 0; padding-top: 0; box-shadow: none; row-gap: 48px; align-items: end; }
.p-consulting .svc-lead-text { grid-column: 1 / span 5; }
.p-consulting .svc-cio { margin-top: clamp(32px, 3.4vw, 56px); padding-top: clamp(24px, 2.4vw, 36px); box-shadow: inset 0 3px 0 var(--ink); }
.p-consulting .svc-title, .p-consulting .svc-card h3 { font-size: var(--fs-h2s); line-height: 1.08; letter-spacing: -0.015em; max-width: 16ch; }
.p-consulting .ticks li, .p-consulting .svc-card p { font-size: var(--fs-b); }
.p-consulting .svc-pair { align-items: start; }
.p-consulting .svc-card:nth-child(2) { margin-top: 0; }

/* engagement models: a three-cell strip, each cell with its own small line */
.p-consulting .models { grid-column: 7 / -1; align-self: end; background: none; padding: 0; border-radius: 0; }
.p-consulting .models-h { font: 600 var(--fs-b)/1.3 var(--sans); margin-bottom: 16px; }
.p-consulting .models-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.p-consulting .model { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.2vw, 32px); background: var(--paper-2); font: inherit; }
.p-consulting .model:first-child { border-radius: 6px 0 0 6px; }
.p-consulting .model:last-child { border-radius: 0 6px 6px 0; }
/* a year of working together, month by month: bar height = how much of our time that month */
.p-consulting .models-key { margin: -6px 0 16px; font-size: var(--fs-14); color: var(--muted); max-width: 60ch; }
.p-consulting .m-yr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: stretch; width: 100%; max-width: 180px; height: 48px; margin-bottom: 14px; }
.p-consulting .m-yr i { position: relative; display: block; border-radius: 2px; background: var(--paper); }
.p-consulting .m-yr i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h, 0) * 1%); border-radius: 2px; background: var(--red); transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .mo .p-consulting .m-yr.is-armed i::after { transform: scaleY(0); }
  .mo .p-consulting .m-yr.is-play i::after { transform: none; transition: transform 420ms var(--ease-out) calc(150ms + var(--i, 0) * 40ms); }
}
.p-consulting .m-name { font: 600 var(--fs-l)/1.2 var(--sans); letter-spacing: 0; }
.p-consulting .model { transition: opacity 200ms ease; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .p-consulting .models-list:hover .model:not(:hover) { opacity: 0.5; } }
.p-consulting .models-list.is-picked .model:not(.is-picked) { opacity: 0.5; }
.p-consulting .model p { font-size: var(--fs-b); color: var(--ink); max-width: 34ch; }
/* 900-1199: the right column is narrow, so the models stack as rows with the drawing beside */
@media (min-width: 900px) and (max-width: 1199px) {
  .p-consulting .svc-lead-text { grid-column: 1 / span 6; }
  .p-consulting .models-list { grid-template-columns: 1fr; }
  .p-consulting .model { grid-template-columns: 112px 1fr; column-gap: 20px; row-gap: 6px; padding: 20px 24px; }
  .p-consulting .model:first-child { border-radius: 6px 6px 0 0; }
  .p-consulting .model:last-child { border-radius: 0 0 6px 6px; }
  .p-consulting .m-art { grid-row: span 2; height: 44px; margin: 4px 0 0; }
}
@media (max-width: 899px) {
  .p-consulting .svc-title, .p-consulting .svc-card h3 { max-width: none; }
  .p-consulting .svc-lead-text, .p-consulting .models { grid-column: 1 / -1; }
}
@media (max-width: 743px) {
  .p-consulting .models-list { grid-template-columns: 1fr; }
  .p-consulting .model { grid-template-columns: 112px 1fr; column-gap: 20px; row-gap: 6px; }
  .p-consulting .model:first-child { border-radius: 6px 6px 0 0; }
  .p-consulting .model:last-child { border-radius: 0 0 6px 6px; }
  .p-consulting .m-art { grid-row: span 2; height: 44px; margin: 4px 0 0; }
}

/* =========================================================
   About
   ========================================================= */
/* hero: "Abhyudaya means rising", drawn (assets/rising.css + rising.js): a crescent moon rides the rising line,
   waxes to full and warms into the sun, while the hero's misty-blue night tint fades to cream */
.p-about .hero--about .hero-in { padding-bottom: clamp(150px, 14vw, 230px); }
.p-about .ab-horizon { position: absolute; z-index: 0; left: max(var(--m), calc((100% - var(--max)) / 2)); right: max(var(--m), calc((100% - var(--max)) / 2)); top: 26%; bottom: clamp(56px, 9vw, 130px); pointer-events: none; }  /* lifted so the whole rise shows on a 900px-tall laptop */
/* hero infographic: ADBCS forks into two separate businesses, each with its own team */
.p-about .hero--about .hero-copy { max-width: 620px; }
.ab-split { margin-top: clamp(28px, 3vw, 40px); }
.abs-root { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 16px -10px rgba(31, 58, 95, 0.35); position: relative; z-index: 1; left: 50%; transform: translateX(-50%); margin-bottom: 14px; }
.abs-root .brand-a { width: 26px; height: 26px; }
.abs-root .brand-name { font-size: 1.125rem; }
/* the fork: a stem from the root, then a bar that drops into each card */
.abs-fork { display: block; position: relative; height: 26px; margin: 0 25%; border: 2px solid var(--red); border-bottom: 0; border-radius: 10px 10px 0 0; }
.abs-fork::before { content: ""; position: absolute; left: calc(50% - 1px); top: -16px; height: 16px; border-left: 2px solid var(--red); }
.abs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.abs-card { padding: 16px 18px 18px; border-radius: 6px; border-top: 3px solid var(--card-c); background: var(--card-bg); }
.abs-card--c { --card-c: #B9514A; --card-bg: var(--red-tint); }
.abs-card--s { --card-c: var(--navy); --card-bg: var(--band); }
.abs-tag { font: 600 var(--fs-14)/1.2 var(--sans); letter-spacing: 0.01em; color: var(--muted); }
.abs-name { margin-top: 4px; font: 600 var(--fs-l)/1.2 var(--sans); }
.abs-name a { color: var(--ink); text-decoration: none; }
.abs-name a::after { content: " →"; color: var(--card-c); }
.abs-name a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .abs-name a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.abs-fork, .abs-card { transition: border-color 200ms ease, opacity 200ms ease; }
.ab-split:has(.abs-card--c:is(:hover, :focus-within)) .abs-fork { border-right-color: #EDCBC7; }
.ab-split:has(.abs-card--s:is(:hover, :focus-within)) .abs-fork { border-left-color: #EDCBC7; }
.ab-split:has(.abs-card--c:is(:hover, :focus-within)) .abs-card--s, .ab-split:has(.abs-card--s:is(:hover, :focus-within)) .abs-card--c { opacity: 0.6; }
.abs-list { margin-top: 8px; font-size: var(--fs-14); line-height: 1.5; color: #4a4950; }
/* motion: the stem drops from the chip, the fork opens to both sides, then the two cards rise in. Plays once on open, with the hero line */
@media (prefers-reduced-motion: no-preference) {
  .mo .abs-fork::before { transform-origin: top; transform: scaleY(0); animation: abs-grow 260ms var(--ease-out) 450ms forwards; }
  .mo .abs-fork { clip-path: inset(-20px calc(50% - 2px) -2px calc(50% - 2px)); animation: abs-open 420ms var(--ease-in-out) 680ms forwards; }
  .mo .abs-card { animation: abs-in 500ms var(--ease-out) 1000ms backwards; }  /* backwards: hidden while waiting, then hands back to normal styles so the hover fade works */
  .mo .abs-card--s { animation-delay: 1080ms; }
  .mo.first-visit .abs-fork::before { animation-delay: 900ms; }
  .mo.first-visit .abs-fork { animation-delay: 1130ms; }
  .mo.first-visit .abs-card { animation-delay: 1450ms; }
  .mo.first-visit .abs-card--s { animation-delay: 1530ms; }
}
@keyframes abs-grow { to { transform: none; } }
@keyframes abs-open { to { clip-path: inset(-20px -2px -2px -2px); } }
@keyframes abs-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 479px) {
  .abs-cards { grid-template-columns: 1fr; gap: 12px; }
  .abs-root { left: 0; transform: none; }
  .abs-fork { margin: 0 0 0 28px; width: 0; height: 22px; border: 0; border-left: 2px solid var(--red); border-radius: 0; }
  .abs-fork::before { display: none; }
}
/* below 1180px the infographic reaches the drawing, so the drawing moves under the content */
@media (max-width: 1179px) {
  .p-about .hero--about .hero-in { padding-bottom: 48px; }
  .p-about .ab-horizon { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: clamp(220px, 40vw, 360px); margin-top: 40px; }
}

/* the person: name, figures plate, years ledger and bio across eight columns */
.p-about .lead-sec .person { grid-column: 5 / -1; }
.p-about .lead-sec .lead-title { grid-column: 1 / span 4; position: sticky; top: 120px; max-width: 11ch; }
@media (max-width: 1023px) {
  .p-about .lead-sec .lead-title { grid-column: 1 / -1; position: static; max-width: none; }
  .p-about .lead-sec .person { grid-column: 1 / span 10; }
}
.p-about .bio p { font-size: var(--fs-b); }
.p-about .bio .lead { font-size: var(--fs-l); }
.p-about .years { margin: 48px 0 0; display: grid; gap: 14px; }
.p-about .years-cells, .p-about .years-cap { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); column-gap: clamp(2px, 0.35vw, 5px); }
.p-about .years-cells i { display: block; height: clamp(44px, 5vw, 76px); border-radius: 2px; background: var(--cell); }
.p-about .years-cells i.ey { background: var(--blue); }
.p-about .yc-ey { grid-column: 1 / 17; font: 600 var(--fs-l)/1.2 var(--sans); color: var(--navy); }
.p-about .yc-all { grid-column: 17 / -1; justify-self: end; font: 600 var(--fs-l)/1.2 var(--sans); white-space: nowrap; }
.p-about .years--sap .yc-ey { grid-column: 1 / 24; }
.p-about .years--sap .yc-all { grid-column: 24 / -1; }
.p-about .years--20 :is(.years-cells, .years-cap) { grid-template-columns: repeat(20, minmax(0, 1fr)); }
.p-about .years--20 .yc-ey { grid-column: 1 / 15; }
.p-about .years--20 .yc-all { grid-column: 15 / -1; }
.p-about .years--35 :is(.years-cells, .years-cap) { grid-template-columns: repeat(35, minmax(0, 1fr)); }
.p-about .years--35 .yc-ey { grid-column: 1 / 25; }
.p-about .years--35 .yc-all { grid-column: 25 / -1; }
.p-about .lead-grid--next { margin-top: clamp(72px, 9vw, 128px); }
.p-about .lead-sec > .wrap > .lead-title { max-width: none; position: static; margin-bottom: clamp(32px, 4vw, 56px); }
.p-about .ppl.is-on .lead-side { position: static; }
.ppl-track{display:flex;flex-direction:column;gap:0}
.ppl.is-on .ppl-view{overflow:hidden;transition:height .45s ease}
.ppl.is-on .ppl-track{flex-direction:row;align-items:flex-start;gap:0;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.ppl.is-on .ppl-track>*{flex:0 0 100%;min-width:0;margin-top:0}
.ppl-nav{display:flex;align-items:center;gap:10px;margin-top:28px}
.ppl-btn{width:40px;height:40px;flex:none;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ppl-btn:hover{border-color:var(--blue)}
.ppl-dots{display:flex;gap:4px}
.ppl-dot{width:36px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center}
.ppl-dot::before{content:"";display:block;width:100%;height:4px;border-radius:2px;background:var(--ink);opacity:.45;transition:opacity .3s,background-color .3s}
.ppl-dot[aria-current="true"]::before{background:var(--blue);opacity:1}
@media (prefers-reduced-motion: reduce){.ppl.is-on .ppl-view,.ppl.is-on .ppl-track{transition:none}}

.p-about .bio { margin-top: 48px; }
/* type: tokens only */
.p-about .about-h { font-size: var(--fs-d); }
.p-about .val-h, .p-about .person-name, .p-about .rise-steps--years h3 { font-size: var(--fs-h2s); }
@media (max-width: 899px) { .p-about .lead-sec .person { grid-column: 1 / -1; } }

/* =========================================================
   Contact and Careers
   ========================================================= */
/* topics: single-column radio rows, so every option reads on one line at any form width */
.p-contact .topic-opts { grid-template-columns: 1fr; gap: 8px; }
.p-contact .topic-box { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 14px 16px 14px 52px; }
.p-contact .topic-box::before { content: ""; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ctl); }
.p-contact .topic input:checked + .topic-box::before { box-shadow: inset 0 0 0 2px var(--tc), inset 0 0 0 6px #fff; background: var(--tc); }
.p-contact .topic-sub { font-size: var(--fs-b); }

/* contact: a two-node line, from "You write" up to the reply */
.p-contact .reply-line { --nl-h: clamp(96px, 8vw, 128px); max-width: 560px; margin: 96px 0 56px; }
.p-contact .reply-line li:first-child { margin-left: 0; }
.p-contact .reply-line li:last-child { white-space: normal; width: min(11em, 70vw); }
.p-contact .contact-h, .p-careers .contact-h { font-size: var(--fs-h2); }
.p-contact .big-link { font-size: var(--fs-h2s); }

/* careers: a four-node career line through the experience bands */
.p-careers .career-line { margin-top: 48px; --nl-h: clamp(130px, 12vw, 170px); max-width: 620px; }
.p-careers .career-line li b { font-weight: 500; }
.p-careers .career-line figcaption { grid-row: 2; margin-top: 52px; color: var(--muted); max-width: 44ch; }
.p-careers .areas dd { font-size: var(--fs-b); }

/* =========================================================
   FAQ
   ========================================================= */
.p-faq .faq-toc { grid-column: 1 / span 4; }
.p-faq .faq-groups { grid-column: 6 / -1; }
.p-faq .faq-toc.subnav { position: sticky; top: 112px; z-index: 1; background: none; }
.p-faq .faq-toc .subnav-list { display: grid; gap: 4px; padding: 0; }
.p-faq .faq-toc .subnav-list a { position: relative; display: block; padding: 10px 0; font: 600 var(--fs-l)/1.25 var(--sans); letter-spacing: 0; color: var(--ink); }
.p-faq .faq-toc .subnav-list a::after { left: -14px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; background: var(--navy); transform: scaleY(0); transform-origin: top; }
.p-faq .faq-toc .subnav-list a[aria-current] { color: var(--navy); }
.p-faq .faq-toc .subnav-list a[aria-current]::after,
.p-faq .faq-toc .subnav-list a:focus-visible::after { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { .p-faq .faq-toc .subnav-list a:hover::after { transform: scaleY(1); } }
.p-faq .faq-toc .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.p-faq .faq-toc a[aria-current] .n { color: var(--navy); }
@media (max-width: 899px) {
  .p-faq .faq-toc, .p-faq .faq-groups { grid-column: 1 / -1; }
  .p-faq .faq-toc.subnav { position: static; }
  .p-faq .faq-toc .subnav-list { display: grid; }
}

/* rows: open answers sit on a tone step instead of between hairlines */
.p-faq .faq { gap: 4px; }
.p-faq .qa, .p-faq .qa:first-child { box-shadow: none; border-radius: 6px; padding-inline: clamp(14px, 1.6vw, 24px); }
.p-faq .qa.is-open { background: var(--paper-2); }
.p-faq .qa-in p { padding-right: 0; max-width: 62ch; }
.mo .p-faq .qa { transition: background-color 240ms ease; }

/* the security group's masking example: a small band panel under the group heading */
.p-faq .faq-group .h2s { font-size: var(--fs-h2s); }
.p-faq .faq-mask { margin: 0 0 24px; padding: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 32px); background: var(--band); border-radius: 12px; }
.p-faq .fm-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4em; row-gap: 0.1em; font: 600 var(--fs-l)/1.25 var(--sans); letter-spacing: 0; max-width: none; }
.p-faq .fm-name > span { white-space: nowrap; }
.p-faq .fm-src { color: var(--ink); }
.p-faq .fm-arr { color: var(--blue); font-family: var(--sans); font-weight: 400; }
.p-faq .fm-name .js-mask { display: inline-block; color: var(--navy); }
.p-faq .fm-cap { margin: 8px 0 0; color: var(--muted); }

/* hero: the index starts close under the lead */
.p-faq .hero--page .hero-in { padding-bottom: clamp(40px, 4vw, 64px); }
.p-faq .faq-page { padding-top: 0; }

/* =========================================================
   Tablets (744-1023): deliberate two-column compositions
   ========================================================= */
@media (min-width: 744px) and (max-width: 899px) {
  /* consulting: copy beside the four-step line; services side by side */
  .p-consulting .c-hero-copy { grid-column: 1 / span 6; }
  .p-consulting .c-rise { grid-column: 8 / -1; grid-row: 2; height: 160px; margin: 40px 12px 36px 0; }
  .p-consulting .svc-card:nth-child(1) { grid-column: 1 / span 6; }
  .p-consulting .svc-card:nth-child(2) { grid-column: 7 / -1; }
  /* about: values as heading and line side by side; three figures in a row */
  .p-about .val { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .p-about .val-h { grid-column: 1 / span 7; }
  .p-about .val p { grid-column: 8 / -1; }
  /* faq: index beside the answers */
  .p-faq .faq-toc { grid-column: 1 / span 4; }
  .p-faq .faq-toc.subnav { position: sticky; top: 96px; }
  .p-faq .faq-groups { grid-column: 5 / -1; }
  .p-faq .qa-q button { font-size: 1.1875rem; gap: 16px; }
  .p-faq .qa, .p-faq .qa:first-child { padding-inline: 14px; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  /* the scroll-linked engagement path: narrower columns, so the copy steps sit tighter */
  .p-consulting .engage .rise-step p { font-size: var(--fs-b); }
  .p-consulting .engage .rise-step > * { max-width: 22ch; }
}
@media (min-width: 744px) and (max-width: 1023px) {
  /* contact and careers: the intro is two columns above a full-width form */
  .p-contact .contact-side, .p-careers .contact-side { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
  .p-contact .contact-side > *, .p-careers .contact-side > * { grid-column: 1 / span 6; }
  .p-contact .contact-direct { grid-column: 8 / -1; grid-row: 1 / span 2; margin-top: 12px; }
  .p-contact .offices { grid-column: 8 / -1; grid-row: 3; grid-template-columns: 1fr; margin-top: 0; }
  .p-contact .contact-side .lead { grid-row: 2; }
  .p-contact .reply-line { grid-row: 3; }
  .p-careers .contact-side .career-line { grid-row: 3; }
  .p-careers .areas { grid-column: 8 / -1; grid-row: 1 / span 4; margin-top: 8px; }
  .p-careers .pref { grid-column: 8 / -1; grid-row: 5; }
  .p-careers .careers .contact-h, .p-careers .contact-h { white-space: normal; }
}

/* touch targets: stand-alone links get at least 44px of height */
.p-consulting .svc-lead-text .lnk { padding-top: 12px; padding-bottom: 6px; }
.p-contact .big-link { padding-top: 10px; padding-bottom: 8px; }
.p-faq .crumb .lnk { padding-block: 14px 10px; }
.p-faq .crumb ol { align-items: center; margin-bottom: 16px; }
/* phones: the consulting headline stays at two lines */
@media (max-width: 600px) { .p-consulting .hero--c .display { font-size: 8.7vw; letter-spacing: -0.035em; } }

/* the portrait: under the heading in the left column, framed in the site's pale blue with the rising line */
.p-about .lead-sec .lead-side { grid-column: 1 / span 4; position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 32px; }
.p-about .lead-sec .lead-side .lead-title { position: static; grid-column: auto; }
.p-about .portrait { position: relative; top: auto; grid-column: auto; margin: 0; max-width: 340px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--band); }
.p-about .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 1023px) {
  .p-about .lead-sec .lead-side { grid-column: 1 / -1; position: static; flex-direction: row; align-items: end; gap: clamp(24px, 4vw, 48px); }
  .p-about .portrait { width: clamp(180px, 34vw, 300px); flex: none; }
}
@media (max-width: 559px) {
  .p-about .lead-sec .lead-side { flex-direction: column; align-items: start; }
  .p-about .portrait { width: 100%; max-width: 300px; }
}

/* About, Our Story: no lead beside the heading (29 October), so the timeline starts close under it and its rising end fills the space on the right */
.story-about .eng-head { margin-bottom: clamp(8px, 1.5vw, 24px); }
@media (max-width: 899px) { .story-about .eng-head { margin-bottom: clamp(24px, 4vw, 40px); } }

/* About, Our Story told as a story (fx.js adds .is-story): a red pen draws the line and stops at each year; the dot fills
   with a small pop and the year and its line rise in; 2026 ends with one soft halo. Phones: the years arrive in turn.
   Once on view. Reduced motion or no script: the finished timeline. */
@media (prefers-reduced-motion: no-preference) {
  .mo .rise.is-story .rise-svg { clip-path: inset(-10% 100% -10% -2%); transition: none; }
  .mo .rise.is-story .rise-step > * { opacity: 0; transform: translateY(8px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
  .mo .rise.is-story .rise-step.is-on > * { opacity: 1; transform: none; }
  .mo .rise.is-story .rise-step.is-on > p { transition-delay: 90ms; }
  .mo .rise.is-story .rise-step.is-on::after { opacity: 1; transform: none; }
  .mo .rise.is-story .rise-step.is-on::before { animation: rise-pop 420ms var(--ease-out); }
  .mo .rise.is-story .rise-step:last-child.is-on::after { animation: rise-halo 1100ms var(--ease-out) 200ms; }
  .rise-pen { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--paper-2, #F2F0EB), 0 0 12px rgba(209, 101, 93, 0.55); pointer-events: none; z-index: 1; }
}
@keyframes rise-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes rise-halo { 0% { box-shadow: 0 0 0 0 rgba(209, 101, 93, 0.45); } 100% { box-shadow: 0 0 0 16px rgba(209, 101, 93, 0); } }