/* About: editorial photography, full portrait and readable biography. */
.brand-about-page{--about-ink:#242330;--about-ivory:#f5f3ef;--about-violet:#6f58ae;--about-line:#dedbd6;background:var(--about-ivory);color:var(--about-ink)}
.samilo-brand .brand-about-page p{color:#686773}
.about-hero{padding-block:clamp(50px,6vw,88px);background:var(--about-ivory);border-block-end:1px solid var(--about-line);position:relative}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,7vw,100px);align-items:center}
.about-hero-copy{max-inline-size:690px}
.samilo-brand .about-kicker{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--about-violet);font-weight:700;margin-block:0 22px;display:flex;align-items:center;gap:12px}
.about-kicker:before{content:'';inline-size:22px;block-size:1px;background:currentColor;flex-shrink:0}
html[dir=rtl] .samilo-brand .about-kicker{letter-spacing:0;font-size:12px}
.samilo-brand .about-hero h1{font-size:clamp(45px,5.6vw,76px);line-height:1.08;letter-spacing:-.05em;color:var(--about-ink);margin-block:0 22px;max-inline-size:680px}
html[dir=rtl] .samilo-brand .about-hero h1{letter-spacing:0;line-height:1.4;font-size:clamp(43px,5vw,64px)}
.about-heading-dot{color:var(--about-violet)}
.samilo-brand .about-role{font-size:clamp(23px,2.4vw,31px);font-weight:500;line-height:1.5;color:var(--about-ink);margin-block:0 25px;max-inline-size:650px}
.samilo-brand .about-intro{font-size:17px;line-height:1.85;max-inline-size:620px;margin-block:0 26px}
.samilo-brand .about-legacy-identity{font-size:14px;line-height:1.8;margin-block:0 26px}
.about-actions{gap:24px;margin-block:30px 36px!important}
.about-actions .brand-text-link{font-size:14px;min-block-size:44px;display:inline-flex;align-items:center;gap:14px;color:var(--about-ink)}
.about-facts{display:flex;gap:50px;border-block-start:1px solid var(--about-line);padding-block-start:24px;margin:0}
.about-facts>div{display:flex;flex-direction:column;gap:5px}
.about-facts dt{font-size:24px;font-weight:600;line-height:1.4}
.about-facts dd{font-size:11px;color:#74717c;margin:0;max-inline-size:180px}
.about-portrait{position:relative;margin:0;inline-size:100%;max-inline-size:355px;justify-self:center;align-self:center}
.about-portrait-frame{background:#dddcd7;border:1px solid #dedbd6;border-radius:4px;padding:0;overflow:visible;position:relative}
.about-portrait-frame:after{content:'';position:absolute;inset:12px;border:1px solid #ffffff28;pointer-events:none}
.about-portrait picture{display:block;inline-size:100%;block-size:auto}
.samilo-brand .about-portrait .about-portrait-image{display:block;inline-size:100%;block-size:auto;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center;filter:none;border-radius:3px}
.about-portrait figcaption{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-block:15px;font-size:11px;line-height:1.5;border-block-end:1px solid var(--about-line)}
.about-portrait figcaption strong{font-weight:600;color:var(--about-ink);font-size:13px}
.about-portrait figcaption span{color:#76717c}
.about-story,.about-biography,.about-values,.about-skills,.about-testimonials,.about-faq,.about-connect{padding-block:clamp(64px,7vw,100px)}
.about-story{background:#fff}
.about-story-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);gap:clamp(35px,6vw,76px);align-items:center}
.about-workspace,.about-collaboration{margin:0;position:relative;min-inline-size:0}
.about-workspace picture,.about-collaboration picture{display:block;overflow:hidden;border-radius:4px;background:#e2e0dc}
.about-workspace .about-editorial-image img,.about-collaboration .about-editorial-image img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .8s ease;filter:saturate(.88)}
.about-workspace:hover .about-editorial-image img,.about-collaboration:hover .about-editorial-image img{transform:scale(1.025);filter:saturate(1)}
.about-workspace figcaption{font-size:11px;line-height:1.6;color:#77707e;padding-block-start:12px}
.samilo-brand .brand-about-page :is(.about-story-copy,.about-biography-heading,.about-section-heading,.about-connect-copy) h2{font-size:clamp(27px,3.2vw,42px);line-height:1.23;letter-spacing:-.035em;margin-block:0 26px;color:var(--about-ink)}
html[dir=rtl] .samilo-brand .brand-about-page :is(.about-story-copy,.about-biography-heading,.about-section-heading,.about-connect-copy) h2{line-height:1.6;letter-spacing:0;font-size:clamp(27px,3vw,36px)}
.samilo-brand .about-story-copy>p:not(.about-kicker){font-size:16px;line-height:1.9;margin-block-end:28px}
.about-story-copy .brand-text-link,.about-biography-heading .brand-text-link{font-size:14px;display:inline-flex;gap:14px;align-items:center;min-height:44px;border-block-end:1px solid #c7bfd5;padding-block:8px}
.about-biography-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(40px,7vw,94px);align-items:start}
.about-biography-heading{position:sticky;inset-block-start:130px;max-inline-size:400px}
.about-biography-content{max-inline-size:780px;min-inline-size:0}
.about-chapter{padding-block:30px;border-block-start:1px solid var(--about-line)}
.about-chapter:first-child{padding-block-start:0;border-block-start:0}
.about-chapter:last-child{padding-block-end:0}
.samilo-brand .about-chapter h2{font-size:22px;line-height:1.45;letter-spacing:-.02em;margin-block:0 14px;color:var(--about-ink)}
.samilo-brand .about-chapter p,.samilo-brand .about-authored-biography p{font-size:16px;line-height:1.95;margin-block:0 20px}
.about-chapter p:last-child{margin-block-end:0}
.about-biography-content a{color:var(--about-violet);text-decoration:underline;text-underline-offset:4px}
.about-biography-content a:hover{color:#33234f}
.about-authored-biography ul,.about-authored-biography ol{margin-block:24px;padding-inline-start:24px}
.about-authored-biography img{max-inline-size:100%;height:auto;object-fit:contain}
.about-values{background:#eae6f0;border-block:1px solid #ded8e8}
.about-section-heading{max-inline-size:650px;margin-block-end:38px}
.about-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.about-value-card{padding:30px 28px;background:#f8f6fb;border:1px solid #dcd6e6;border-radius:4px;transition:translate .3s ease,border-color .3s ease}
.about-value-card:hover{translate:0 -5px;border-color:#a391c7}
.about-card-number{font-size:12px;color:#8c7da5;display:block;margin-block-end:35px;font-variant-numeric:tabular-nums}
.samilo-brand .about-value-card h3{font-size:23px;margin-block:0 14px;line-height:1.45}
.samilo-brand .about-value-card p{font-size:15px;line-height:1.85;margin:0}
.about-skills{background:#fff}
.about-skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.about-skill-card{padding:28px;border:1px solid var(--about-line);border-radius:4px;min-inline-size:0}
.about-skill-title{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-block-end:22px}
.samilo-brand .about-skill-title h3{font-size:22px;line-height:1.5;margin:0}
.about-skill-title>span{font-size:12px;line-height:1.5;color:#7a6c94;border:1px solid #d5cde1;padding:4px 8px;border-radius:4px;margin-block-start:5px}
.about-skill-card ul{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.about-skill-card li{padding:7px 11px;background:#f6f4f8;border:1px solid #e8e4ed;border-radius:3px;font-size:12px;line-height:1.6;color:#5c5669}
.about-testimonials{background:#eae6f0}
.about-quote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.about-quote{background:#fbfafe;border:1px solid #ded8e8;border-radius:4px;margin:0;padding:32px;min-inline-size:0}
.about-quote blockquote{font-size:16px;line-height:1.9;color:#5b5368;border:0;padding:0;margin:0 0 28px;position:relative}
.about-quote blockquote:before{content:'“';font-size:64px;line-height:.8;display:block;color:#b2a2ce;margin-block-end:18px;font-family:Georgia,serif}
.about-quote figcaption{display:flex;gap:14px;align-items:center;padding-block-start:20px;border-block-start:1px solid #e3dced}
.about-quote figcaption img{width:56px;height:56px;object-fit:cover;flex-shrink:0;border-radius:50%}
.about-quote figcaption strong{font-size:14px;font-weight:600;display:block;color:#302439}
.about-quote figcaption span{font-size:11px;line-height:1.75;color:#81748c;display:block;margin-block-start:4px}
.about-quote figcaption a{text-decoration:underline;text-underline-offset:3px}
.about-faq-list{border-block-start:1px solid var(--about-line)}
.about-faq-list details{border-block-end:1px solid var(--about-line);padding-block:23px}
.about-faq-list summary{display:flex;gap:20px;align-items:center;justify-content:space-between;font-size:18px;line-height:1.8;font-weight:500;cursor:pointer;list-style:none;min-block-size:44px}
.about-faq-list summary::-webkit-details-marker{display:none}
.about-faq-list summary span{font-size:25px;font-weight:300;color:var(--about-violet);transition:rotate .2s ease;flex-shrink:0}
.about-faq-list details[open] summary span{rotate:45deg}
.samilo-brand .about-faq-list p{font-size:16px;line-height:1.9;margin-block:18px 0;padding-inline-end:35px}
.about-connect{background:#fff}
.about-connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#ece7f3;border:1px solid #e1d9e9;border-radius:4px;overflow:hidden;align-items:stretch}
.about-connect-copy{padding:clamp(32px,4.6vw,64px);align-self:center}
.about-collaboration{height:100%}
.about-collaboration picture{height:100%;border-radius:0}
.about-collaboration .about-editorial-image img{height:100%;min-height:360px;aspect-ratio:1.2;object-fit:cover}
.samilo-brand .about-connect-copy p:not(.about-kicker){font-size:16px;line-height:1.9;margin-block-end:28px}
@media(max-width:1000px){.about-hero-grid{gap:40px;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr)}.about-portrait{max-inline-size:320px}.about-story-grid,.about-biography-grid{gap:40px}.about-facts{gap:30px}.about-biography-heading{inset-block-start:110px}.about-value-grid{gap:16px}.about-value-card{padding:25px 22px}.about-connect-copy{padding:35px}.about-quote{padding:26px}}
@media(max-width:760px){.about-hero{padding-block:40px 44px}.about-hero-grid,.about-story-grid,.about-biography-grid,.about-connect-grid{grid-template-columns:1fr;gap:36px}.about-hero-copy{max-inline-size:none}.samilo-brand .about-hero h1{font-size:48px;line-height:1.1;margin-block-end:18px}html[dir=rtl] .samilo-brand .about-hero h1{font-size:44px;line-height:1.35}.samilo-brand .about-role{font-size:23px;line-height:1.55;margin-block-end:20px}.samilo-brand .about-intro{font-size:16px;line-height:1.9}.about-actions{gap:20px;margin-block:26px 30px!important;flex-wrap:wrap}.about-facts{padding-block-start:20px;gap:35px}.about-facts dt{font-size:22px}.about-facts dd{font-size:11px}.about-portrait{max-inline-size:285px}.about-portrait figcaption{gap:12px;font-size:10px}.about-portrait figcaption strong{font-size:12px}.about-story,.about-biography,.about-values,.about-skills,.about-testimonials,.about-faq,.about-connect{padding-block:58px}.about-story-grid{gap:28px}.about-biography-heading{position:static;max-inline-size:none}.samilo-brand .brand-about-page :is(.about-story-copy,.about-biography-heading,.about-section-heading,.about-connect-copy) h2{font-size:30px;margin-block-end:20px}html[dir=rtl] .samilo-brand .brand-about-page :is(.about-story-copy,.about-biography-heading,.about-section-heading,.about-connect-copy) h2{font-size:27px}.about-kicker{margin-block-end:17px!important}.about-value-grid,.about-skill-grid,.about-quote-grid{grid-template-columns:1fr;gap:17px}.about-value-card,.about-skill-card,.about-quote{padding:26px}.about-card-number{margin-block-end:22px}.about-section-heading{margin-block-end:30px}.about-connect-grid{gap:0}.about-collaboration .about-editorial-image img{min-height:0;height:auto;aspect-ratio:16/10}.about-connect-copy{padding:32px 26px}.about-faq-list summary{font-size:17px}.about-faq-list p{padding-inline-end:0!important}.about-chapter{padding-block:26px}.samilo-brand .about-chapter h2{font-size:22px;line-height:1.55}.samilo-brand .about-chapter p,.samilo-brand .about-authored-biography p{font-size:16px}.about-workspace .about-editorial-image img{aspect-ratio:4/3}.about-quote figcaption{align-items:start}.about-quote blockquote{font-size:15px;line-height:1.9}}
@media(max-width:360px){.samilo-brand .about-hero h1{font-size:41px}html[dir=rtl] .samilo-brand .about-hero h1{font-size:38px}.about-facts{gap:25px}.about-portrait{max-inline-size:260px}.about-portrait figcaption{flex-direction:column;align-items:start;gap:4px}.about-actions .brand-button{font-size:14px}.about-skill-card,.about-value-card,.about-quote{padding:22px}}
@media(prefers-reduced-motion:reduce){.brand-about-page *{animation:none!important;transition:none!important}.about-workspace:hover .about-editorial-image img,.about-collaboration:hover .about-editorial-image img{transform:none}.about-value-card:hover{translate:none}}

/* On phones the portrait follows the name and role, ahead of the long biography. */
@media(max-width:760px){.about-hero-grid{gap:0}.about-hero-copy{display:contents}.about-hero-copy>.about-kicker{order:0}.about-hero-copy>h1{order:1}.about-hero-copy>.about-role{order:2}.about-portrait{order:3;margin-block:8px 34px}.about-hero-copy>.about-intro{order:4}.about-hero-copy>.about-legacy-identity{order:5}.about-hero-copy>.about-actions{order:6}.about-hero-copy>.about-facts{order:7}}
html[dir=rtl] .about-facts dt[dir=ltr]{text-align:right}

.about-authored-biography[dir=auto]{text-align:start}

.about-profile-details{border:1px solid var(--about-line);border-radius:4px;background:#fff;padding:6px 22px}
.about-profile-details>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;cursor:pointer;list-style:none;font-size:17px;line-height:1.7;color:var(--about-ink)}
.about-profile-details>summary::-webkit-details-marker{display:none}.about-profile-details>summary>span{font-size:25px;color:var(--about-violet);transition:rotate .2s ease}.about-profile-details[open]>summary>span{rotate:45deg}
.about-profile-details[open]>.about-authored-biography{border-block-start:1px solid var(--about-line);padding-block:25px 15px;margin-block-start:6px}
@media(max-width:760px){.about-profile-details{padding-inline:18px}.about-profile-details>summary{font-size:15px}}