/* =============================================================
   /tietoa (views/landing/about.php), on the landing design system (landing.css section 6).
   Page classes are .ab-*; the shared .lp-* classes are used as they are.
   Bands: Kaura head · Pinta story · Kuusi company sheet · Jäkälä early customers · Kaura data and contact ·
   Pinta method · Kuusi CTA.
   ============================================================= */

/* ---------- head: the portrait disc with a caption on a hairline (the front page's detector captions) ---------- */
.ab-portrait { --d: clamp(250px, 26vw, 400px); position: relative; justify-self: center; width: var(--d); margin: 0 auto; padding: 14px 0 118px; }
.ab-portrait__disc { position: relative; display: grid; place-items: center; width: var(--d); height: var(--d); border-radius: 50%; background: var(--kuusi);
    box-shadow: 0 46px 70px -34px rgba(20,35,31,.42), 0 8px 20px -10px rgba(20,35,31,.25); }
.ab-portrait__disc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ab-portrait__mono { font: 700 calc(var(--d) * .34)/1 var(--lp-display); letter-spacing: -.06em; color: var(--kaura); transform: translateX(-.02em); }
.ab-portrait__ring { position: absolute; left: -14px; top: -14px; width: calc(100% + 28px); height: calc(100% + 28px); overflow: visible; pointer-events: none; }
.ab-portrait__ring circle { fill: none; stroke: rgba(31,77,71,.38); stroke-width: .28; }
.ab-portrait__note { position: absolute; left: calc(50% - (var(--d) / 2 + 14px) * .342); top: calc(14px + var(--d) / 2 + (var(--d) / 2 + 14px) * .94);
    padding: 57px 0 0 16px; white-space: nowrap; color: var(--kuusi); }
.ab-portrait__note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 6px; width: 1px; background: rgba(31,77,71,.55); }
.ab-portrait__k { display: block; font: 600 16px/1.3 var(--lp-body); }
.ab-portrait__v { display: block; margin-top: 4px; font: 600 17px/24px var(--lp-body); color: var(--yo); }

/* ---------- story: a letter ---------- */
.ab-letter > p:not(.ab-sign) { margin: 0; max-width: 33em; font: 400 clamp(19px, 1.55vw, 23px)/1.62 var(--lp-body); color: #3F4D49; text-wrap: pretty; }
.ab-letter > p + p:not(.ab-sign) { margin-top: 1em; }
.ab-sign { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; }
.ab-sign__mono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; flex: none; object-fit: cover; background: var(--kuusi); color: var(--kaura); font: 700 20px/1 var(--lp-display); letter-spacing: -.04em; }
.ab-sign b { display: block; font: 700 22px/1.15 var(--lp-display); letter-spacing: -.02em; color: var(--kuusi); }
.ab-sign b + span { display: block; margin-top: 3px; font: 500 15.5px/1.35 var(--lp-body); color: var(--muted); }

/* ---------- company: H2 and story left, the registry facts as a spec sheet right ---------- */
.ab-co__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.ab-co__copy .lp-lead { max-width: 32em; }
.ab-sheet { margin: 6px 0 0; border-top: 2px solid var(--kaura); }
.ab-sheet__row { display: grid; grid-template-columns: minmax(118px, 11.5em) minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: clamp(18px, 1.8vw, 26px) 0; border-bottom: 1px solid rgba(241,243,242,.22); }
.ab-sheet dt { font: 600 15px/1.4 var(--lp-body); color: var(--on-kuusi-2); }
.ab-sheet dd { margin: 0; font: 600 clamp(21px, 2vw, 30px)/1.2 var(--lp-display); letter-spacing: -.018em; color: var(--kaura); overflow-wrap: anywhere; }
.ab-sheet a { display: inline-flex; align-items: center; gap: 10px; color: var(--kaura); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgba(241,243,242,.4); transition: text-decoration-color .2s; }
.ab-sheet a:hover { text-decoration-color: currentColor; }
.ab-sheet__ext { width: 18px; height: 18px; opacity: .7; }

/* ---------- early customers: three promises, the lead phrase large ---------- */
.ab-three { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--kuusi); }
.ab-three li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px clamp(40px, 5vw, 96px); align-items: baseline; padding: clamp(24px, 2.6vw, 38px) 0; border-bottom: 1px solid rgba(31,77,71,.2); }
.ab-three b { font: 700 clamp(26px, 2.6vw, 40px)/1.08 var(--lp-display); letter-spacing: -.03em; color: var(--kuusi); text-wrap: balance; }
.ab-three li > span { display: block; max-width: 32em; font: 500 clamp(17px, 1.3vw, 19px)/1.55 var(--lp-body); color: #3F4D49; text-wrap: pretty; }
.ab-three li > span::first-letter { text-transform: uppercase; }

/* ---------- data and contact ---------- */
.ab-two { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px clamp(40px, 7vw, 128px); align-items: start; }
.ab-ticks { gap: 14px; margin-top: 30px; font-size: 17px; color: var(--yo); }
.ab-ticks svg { margin-top: 4px; }
.ab-contact { margin-top: 0; padding: clamp(28px, 3vw, 44px); }
.ab-contact__t { margin: 0; font: 700 clamp(30px, 2.8vw, 42px)/1.05 var(--lp-display); letter-spacing: -.03em; color: var(--kaura); }
.ab-contact__p { margin: 16px 0 0; max-width: 28em; font: 500 17px/1.55 var(--lp-body); color: var(--on-kuusi-2); }
.ab-contact__mail { display: inline-block; margin-top: 26px; font: 700 clamp(28px, 2.9vw, 44px)/1.1 var(--lp-display); letter-spacing: -.03em; color: var(--kaura);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: rgba(241,243,242,.4); transition: text-decoration-color .2s; overflow-wrap: anywhere; }
.ab-contact__mail:hover { text-decoration-color: currentColor; }
.ab-contact__tel { margin: 14px 0 0; font: 500 16.5px/1.4 var(--lp-body); color: var(--on-kuusi-2); }
.ab-contact__tel a { color: var(--kaura); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(241,243,242,.4); }
.ab-contact__go { margin-top: 30px; }

/* ---------- method ---------- */
.ab-method__text { max-width: 40rem; }

/* no photo yet: the monogram stands in, smaller, and only where there is room beside the H1 */
.ab-portrait--mono { --d: clamp(180px, 15vw, 224px); }

/* ---------- breakpoints ---------- */
@media (max-width: 1023px) {
    .ab-portrait { --d: 230px; justify-self: start; margin: 0 0 0 14px; padding-bottom: 112px; }
    .ab-portrait--mono { --d: 180px; }
    .ab-co__grid, .ab-two { grid-template-columns: minmax(0, 1fr); }
    .ab-three li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .ab-portrait--mono { display: none; }
    .ab-head .lp-head__grid { gap: 0; }
}
@media (max-width: 639px) {
    .ab-portrait { --d: 200px; }
    .ab-sheet__row { grid-template-columns: minmax(0, 1fr); }
    .ab-contact { padding: 26px 20px 24px; }
    .ab-contact__go { width: 100%; }
    .ab-sign { margin-top: 30px; }
}