/* About FRAMETRAXX: warm editorial surfaces and direct, readable company details. */
.about-page{--about-dark:#251a15;--about-cream:#f6f0e9;--about-accent:#8fe8df;color:#2e1f18;background:#fbf8f4}
.about-page .wrap{max-width:1240px}
.about-page :is(h1,h2,h3){letter-spacing:-.045em;line-height:1.12}
.about-page :is(p,a){overflow-wrap:anywhere}
.about-page .eyebrow{font-size:11px;letter-spacing:.15em;font-weight:650;color:#8d3e2a;margin-bottom:22px}
.about-page .about-hero,.about-page .about-work,.about-page .about-outro{background:var(--about-dark);color:#fff9f2}
.about-page :is(.about-hero,.about-work,.about-outro) .eyebrow{color:var(--about-accent)}
.about-page .about-hero :is(h1,p),.about-page .about-work :is(h2,p),.about-page .about-outro :is(h2,p){color:inherit}
.about-page .about-hero .eyebrow,.about-page .about-work .eyebrow,.about-page .about-outro .eyebrow{color:var(--about-accent)}
.about-hero{overflow:hidden;padding:26px 0 0}
.about-hero .breadcrumb{color:#d8c6b7;margin-bottom:44px;font-size:12px}
.about-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;padding-bottom:58px}
.about-page .about-hero h1{font-size:clamp(44px,4.7vw,68px);font-weight:650;color:#fff9f2;margin:0 0 26px}
.about-page .about-hero h1 em{color:var(--about-accent)}
.about-page .about-hero .about-lead{font-size:17px;line-height:1.85;max-width:470px;color:#e2d3c6;margin-bottom:30px}
.about-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.about-page :is(.about-hero,.about-outro) .button.secondary{color:#fff9f2;border-color:#88766a;background:transparent}
.about-page :is(.about-hero,.about-outro) .button.secondary:hover{background:#ffffff12;border-color:#fff9f2}
.about-hero-note{display:flex;align-items:center;gap:10px;font-size:12px;color:#d8c6b7;margin-top:30px}
.about-note-line{height:1px;width:25px;background:var(--about-accent);flex:none}
.about-hero-visual{margin:0;position:relative;align-self:stretch;min-height:450px;overflow:hidden;border-radius:120px 14px 14px 14px;background:#3a2d24}
.about-hero-visual>img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0;object-position:48% center}
.about-hero-visual:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#17100eeb)}
.about-hero-visual figcaption{position:absolute;z-index:1;bottom:30px;left:28px;right:28px;display:flex;align-items:center;gap:16px;color:#fff9f2}
.about-visual-mark{font-size:46px;font-weight:750;letter-spacing:-.08em;line-height:1;color:var(--about-accent)}
.about-hero-visual figcaption strong{display:block;font-size:15px;line-height:1.4;font-weight:550}
.about-hero-visual figcaption div>span{display:block;font-size:11px;margin-top:4px;color:#f5e9df}
.about-hero-visual figcaption>.icon{margin-left:auto;width:26px;height:26px;color:var(--about-accent)}
.about-hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #ffffff26;padding:20px 0;color:#d8c6b7;font-size:12px}
.about-hero-bottom a{display:inline-flex;align-items:center;gap:14px;color:#fff9f2;min-height:32px}
.about-hero-bottom .icon{width:15px;height:15px}
.about-approach{padding-block:88px 90px;scroll-margin-top:32px}
.about-section-heading{max-width:735px}
.about-page .about-section-heading h2,.about-page .about-people h2{font-size:clamp(32px,3.1vw,44px);margin-bottom:24px;color:#2e1f18}
.about-section-heading>p:last-child{max-width:620px;line-height:1.85;color:#68584b;font-size:16px}
.about-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:42px}
.about-values article{position:relative;border:1px solid #e4d7c9;border-radius:12px;padding:30px;display:flex;flex-direction:column;align-items:flex-start;background:#fffdf9}
.about-value-icon{display:grid;place-items:center;background:#f3e9dc;border-radius:50%;width:46px;height:46px;color:#88432e;margin-bottom:30px}
.about-value-icon .icon{width:21px;height:21px}
.about-value-number{position:absolute;right:28px;top:36px;font-size:12px;color:#786653;font-variant-numeric:tabular-nums}
.about-page .about-values h3{font-size:25px;margin-bottom:18px;color:#2e1f18}
.about-values p{font-size:14px;line-height:1.85;color:#68584b;margin-bottom:24px}
.about-text-link{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;line-height:1.6;padding-block:7px;color:#803b29}
.about-text-link .icon{width:17px;height:17px;transition:transform .2s}
.about-text-link:hover .icon{transform:translateX(4px)}
.about-values .about-text-link{margin-top:auto}
.about-work{padding-block:74px 80px}
.about-work-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:70px;margin-bottom:38px}
.about-page .about-work h2{font-size:clamp(32px,3.1vw,44px);color:#fff9f2}
.about-page .about-work-heading>div>p:not(.eyebrow){font-size:15px;line-height:1.85;color:#e2d3c6;margin-bottom:12px;max-width:390px}
.about-work .about-text-link{color:var(--about-accent)}
.about-projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.about-project{display:flex;flex-direction:column;position:relative;padding:25px 24px 29px;border:1px solid #ffffff30;border-radius:10px;min-height:270px;background:#ffffff06;transition:background .2s,border-color .2s}
.about-project:hover{background:#ffffff0c;border-color:var(--about-accent)}
.about-project-type{color:#d8c6b7;font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:32px}
.about-client-name{font-size:31px;line-height:1.07;letter-spacing:-.045em;font-weight:600;min-height:74px;display:flex;align-items:center;color:#fff9f2}
.about-client-zdf{font-size:50px;letter-spacing:-.07em}
.about-client-logo{height:74px;display:flex;align-items:center}
.about-client-logo img{max-width:150px;max-height:64px;width:auto;object-fit:contain}
.about-project-copy{font-size:12px;color:#e2d3c6;line-height:1.8;margin-top:25px;padding-right:10px}
.about-project-arrow{position:absolute;right:16px;bottom:16px;color:var(--about-accent)}
.about-project-arrow .icon{width:16px;height:16px}
.about-people{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center;padding-block:86px 90px;scroll-margin-top:32px}
.about-people-story>p:not(.eyebrow){font-size:15px;color:#68584b;line-height:1.9;margin-bottom:18px;max-width:510px}
.about-person-card{padding:34px;border:1px solid #dfd0bf;border-radius:14px;background:var(--about-cream)}
.about-person-heading{display:flex;align-items:center;gap:18px;padding-bottom:26px;border-bottom:1px solid #d9cbbc}
.about-monogram{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#e4d5c3;color:#51311f;font-size:21px;font-weight:600;letter-spacing:-.06em;flex:none}
.about-page .about-person-heading h3{font-size:24px;line-height:1.3;color:#2e1f18}
.about-person-heading p{font-size:11px;color:#68584b;margin-top:5px}
.about-page .about-person-intro{font-size:20px;line-height:1.5;letter-spacing:-.025em;color:#2e1f18;margin:26px 0 20px}
.about-contact-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px;border-bottom:1px solid #dfd0bf;color:#2e1f18}
.about-contact-link>span{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:550}
.about-contact-link .icon{width:18px;height:18px;color:#88432e}
.about-contact-link small{display:block;font-weight:400;font-size:11px;color:#68584b;margin-bottom:3px}
.about-contact-link:hover{color:#803b29}
.about-page .about-location{font-size:11px;color:#68584b;margin-top:22px}
.about-outro{padding-block:56px}
.about-outro>.wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
.about-page .about-outro h2{font-size:clamp(36px,4vw,54px);margin-bottom:16px;color:#fff9f2}
.about-page .about-outro p:not(.eyebrow){font-size:15px;line-height:1.8;color:#e2d3c6}
.about-page :focus-visible{outline:3px solid #13766d;outline-offset:5px}
.about-page :is(.about-hero,.about-work,.about-outro) :focus-visible{outline-color:var(--about-accent)}
@media(max-width:1050px){.about-hero-grid{gap:35px;grid-template-columns:1fr 1fr}.about-page .about-hero h1{font-size:49px}.about-hero-visual{min-height:460px;border-top-left-radius:90px}.about-values{gap:16px}.about-values article{padding:25px}.about-page .about-values h3{font-size:23px}.about-people{gap:45px}.about-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.about-project{min-height:245px}.about-work-heading{gap:40px}}
@media(max-width:740px){.about-hero{padding-top:20px}.about-hero .breadcrumb{margin-bottom:32px}.about-hero-grid{grid-template-columns:1fr;gap:34px;padding-bottom:30px}.about-page .about-hero h1{font-size:clamp(40px,8vw,56px)}.about-page .about-hero .about-lead{font-size:15px;line-height:1.8}.about-hero-visual{min-height:0;height:340px;border-top-left-radius:85px}.about-hero-note{margin-top:24px}.about-hero-bottom{align-items:flex-start;font-size:10px;gap:16px}.about-hero-bottom>span{max-width:140px}.about-hero-bottom a{font-size:11px;min-height:28px}.about-hero-visual figcaption{left:22px;right:22px;bottom:23px}.about-hero-visual figcaption strong{font-size:13px}.about-hero-visual figcaption div>span{font-size:10px}.about-approach{padding-block:54px}.about-values{grid-template-columns:1fr;gap:16px;margin-top:30px}.about-values article{padding:26px}.about-value-icon{margin-bottom:24px}.about-page .about-values h3{font-size:26px}.about-values p{max-width:480px}.about-work{padding-block:50px}.about-work-heading{grid-template-columns:1fr;gap:25px}.about-projects{gap:12px}.about-project{padding:20px 17px;min-height:250px}.about-client-name{font-size:26px}.about-client-zdf{font-size:44px}.about-client-logo img{max-width:120px}.about-project-type{font-size:9px;letter-spacing:.08em}.about-project-copy{font-size:11px;padding-right:0}.about-people{grid-template-columns:1fr;gap:30px;padding-block:54px}.about-person-card{padding:26px}.about-outro{padding-block:44px}.about-outro>.wrap{flex-direction:column;align-items:flex-start;gap:28px}.about-page .eyebrow{font-size:10px;margin-bottom:18px}.about-section-heading>p:last-child{font-size:15px}}
@media(max-width:370px){.about-hero-visual{height:300px}.about-projects{grid-template-columns:1fr}.about-project{min-height:220px}.about-contact-link>span{font-size:13px}.about-actions{align-items:stretch;flex-direction:column}.about-actions .button{justify-content:center}.about-hero-visual figcaption>.icon{display:none}}