/* About page. Builds on brand.css (tokens, .intro, .stats, .contact, footer). */
.about-hero{position:relative;min-height:min(86vh,820px);display:flex;flex-direction:column;justify-content:space-between;padding:28px var(--gutter) 0;color:#fff;background:var(--jw-navy-900) url(/assets/bulk-agency-operations.jpg) center/cover no-repeat;overflow:hidden}
.about-hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,24,53,.94) 0%,rgba(0,24,53,.82) 45%,rgba(0,24,53,.45) 100%)}
.about-hero>*:not(.about-hero-shade){position:relative}
.about-crumb{display:flex;gap:12px;font-size:10px;color:#b8c8d4}
.about-crumb a:hover{color:var(--jw-teal-500)}
.about-hero-copy{max-width:880px;padding:70px 0 60px}
.about-hero .eyebrow,.about-mission-lead .eyebrow,.about-why .eyebrow,.careers-openings .eyebrow,.contact-desks .eyebrow{background:var(--jw-teal-500);color:var(--jw-navy-900)}
.about-hero h1{font-family:var(--font-display);font-size:clamp(48px,6.6vw,108px);line-height:.98;letter-spacing:-.02em;font-weight:600;margin:24px 0 26px}
.about-hero h1 span{color:var(--jw-teal-500)}
.about-hero-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:#d3e0e8;max-width:560px;margin:0}
.about-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px 34px;margin-top:36px}
.about-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-height:56px;padding:16px 24px;background:var(--jw-yellow-500);color:var(--jw-navy-900);font-weight:700;font-size:13px;transition:transform .2s}
.about-btn span{font-size:22px;font-weight:400}
.about-btn:hover{transform:translateY(-2px)}
.about-hero-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.2);padding:20px 0;font-size:9px;letter-spacing:1.6px;color:#c6d4de}

.about-hero~.intro .introcopy a:not(.textlink),.about-mission a,.about-letter a,.about-offices .about-section-head a{color:var(--jw-teal-800);font-weight:600;text-decoration:underline;text-decoration-color:var(--jw-teal-500);text-decoration-thickness:2px;text-underline-offset:3px}
.about-hero~.intro .introcopy p:not(.lead){font-size:14px;line-height:1.85;color:var(--muted)}

.about-mission{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,4vw,60px);align-items:stretch}
.about-mission>article{padding:34px;border:1px solid var(--border)}
.about-mission-lead{background:var(--jw-navy-900);color:#fff;border-color:var(--jw-navy-900)!important}
.about-mission-lead h2{font-size:clamp(34px,3.2vw,50px);line-height:1.02}
.about-mission-lead h2 span{color:var(--jw-teal-500)}
.about-mission-lead p:not(.eyebrow){color:#c9d7e0;font-size:14px;line-height:1.8;margin:22px 0 0}
.about-mission h3{font-size:22px;font-weight:600;margin:0 0 14px}
.about-mission article:not(.about-mission-lead) p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}

.about-director{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:start;background:var(--jw-tint-blue,#f5fafe);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.about-director-photo{margin:0;position:sticky;top:30px}
.about-director-photo img{display:block;width:100%;height:auto;aspect-ratio:573/716;object-fit:cover}
.about-director-photo figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);font-size:12px}
.about-director-photo figcaption strong{font-size:16px}
.about-director-photo figcaption span{color:var(--muted)}
.about-director-copy h2{line-height:1.02}
.about-director blockquote{margin:34px 0 30px;padding:0 0 0 26px;border-left:4px solid var(--jw-teal-500)}
.about-director blockquote p{font-size:clamp(20px,1.8vw,27px);line-height:1.45;font-weight:500;color:var(--jw-navy-900);margin:0}
.about-letter p{font-size:15px;line-height:1.9;color:#334b65;margin:0 0 18px}
.about-letter p:first-child{font-weight:600;color:var(--jw-navy-900)}
.about-letter .about-signoff{font-weight:600;color:var(--jw-navy-900);margin-top:28px}
.about-signature{position:relative;width:min(260px,70%);aspect-ratio:520/249;margin:6px 0 4px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.about-signature canvas{display:block;width:100%;height:100%;pointer-events:none}
.about-signature-shield{position:absolute;inset:0}
@media print{.about-signature{visibility:hidden}}
.about-signer{display:flex;flex-direction:column;gap:4px;margin:0!important}
.about-signer strong{font-size:16px;color:var(--jw-navy-900)}
.about-signer span{font-size:12px;color:var(--muted)}
.about-social{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:34px;padding-top:22px;border-top:1px solid var(--border);font-size:12px;font-weight:600}
.about-social span{font-size:9px;letter-spacing:1.6px;color:var(--muted);font-weight:600}
.about-social a:hover{color:var(--jw-teal-800)}

.about-section-head{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:end;margin-bottom:44px}
.about-section-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.about-section-head p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted);margin:0;max-width:460px}
.about-index{display:block;font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--jw-teal-800);margin-bottom:22px}
.about-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}
.about-value-grid article{padding:34px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .2s}
.about-value-grid article:hover{background:var(--jw-tint-teal,#e4faf7)}
.about-value-grid h3,.about-why-grid h3,.about-office-grid h3{font-size:22px;font-weight:600;margin:0 0 12px}
.about-value-grid p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}

.about-why{background:var(--jw-navy-900);color:#fff}
.about-why h2 span{color:var(--jw-teal-500)}
.about-why .about-section-head p:not(.eyebrow){color:#c3d2dc}
.about-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.about-why-grid article{padding:34px;border:1px solid #2c4660}
.about-why-grid article::before{content:'';display:block;width:34px;height:3px;background:var(--jw-teal-500);margin-bottom:26px}
.about-why-grid p{font-size:13px;line-height:1.8;color:#c3d2dc;margin:0}

.about-office-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.about-office-grid article{display:flex;flex-direction:column;padding:28px;border:1px solid var(--border);background:#fff}
.about-office-grid h3{font-size:18px}
.about-office-grid p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 20px;flex:1}
.about-office-grid a{font-size:12px;font-weight:600;padding:10px 0;border-top:1px solid var(--border);overflow-wrap:anywhere}
.about-office-grid a:hover{color:var(--jw-teal-800)}

/* Contact */
.contact-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:clamp(34px,4vw,56px);padding-bottom:0}
.contact-quick a{display:flex;flex-direction:column;gap:10px;padding:26px 28px;background:#fff;border:1px solid var(--border);margin-left:-1px;transition:background .2s}
.contact-quick a:hover{background:var(--jw-tint-teal,#e4faf7)}
.contact-quick span{font-size:9px;font-weight:700;letter-spacing:1.6px;color:var(--jw-teal-800)}
.contact-quick strong{font-size:clamp(15px,1.3vw,19px);font-weight:600;color:var(--jw-navy-900);overflow-wrap:anywhere}
.contact-office-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.contact-office{display:flex;flex-direction:column;padding:34px;border:1px solid var(--border);background:#fff}
.contact-office h3{font-size:30px;font-weight:600;margin:0 0 6px}
.contact-company{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 18px}
.contact-office address,.contact-group address{font-style:normal;font-size:13px;line-height:1.8;color:#334b65}
.contact-phones{display:flex;flex-direction:column;margin:18px 0}
.contact-phones a{font-size:14px;font-weight:600;padding:5px 0;color:var(--jw-navy-900)}
.contact-phones a:hover,.contact-emails a:hover,.contact-map:hover{color:var(--jw-teal-800)}
.contact-emails{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--border)}
.contact-emails li{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--border)}
.contact-emails span{font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.contact-emails a{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.contact-map{margin-top:auto;font-size:12px;font-weight:700;color:var(--jw-teal-800);padding-top:6px}
.contact-desks{background:var(--jw-navy-900);color:#fff}
.contact-desks h2 span{color:var(--jw-teal-500)}
.contact-desks .about-section-head p:not(.eyebrow){color:#c3d2dc}
.contact-desk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.contact-desk-grid a{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid #2c4660;transition:border-color .2s,background .2s}
.contact-desk-grid a:hover{border-color:var(--jw-teal-500);background:#06244a}
.contact-desk-grid span{font-size:11px;color:#9fb6c6}
.contact-desk-grid strong{font-size:18px;font-weight:600}
.contact-desk-grid em{font-style:normal;font-size:12px;font-weight:600;color:var(--jw-teal-500);overflow-wrap:anywhere;margin-top:auto}
.contact-desk-note{margin:28px 0 0;font-size:12px;color:#c3d2dc}
.contact-desk-note a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--jw-teal-500);text-underline-offset:3px}
.contact-groups .about-section-head a{color:var(--jw-teal-800);font-weight:600;text-decoration:underline;text-decoration-color:var(--jw-teal-500);text-underline-offset:3px}
.contact-region{margin-top:34px}
.contact-region h3{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--jw-navy-900);padding:16px 0;margin:0 0 16px;border-top:2px solid var(--jw-navy-900)}
.contact-group-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.contact-group{display:flex;flex-direction:column;padding:22px;border:1px solid var(--border);background:#fff}
.contact-group h4{font-size:17px;font-weight:600;margin:0}
.contact-country{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--jw-teal-800);margin:4px 0 12px}
.contact-group address{font-size:12px;line-height:1.7}
.contact-group .contact-phones{margin:12px 0 0}
.contact-group .contact-phones a{font-size:12px;padding:3px 0}
.contact-person{font-size:12px;font-weight:600;margin-top:10px;color:var(--jw-navy-900)}
.contact-fax{font-size:11px;color:var(--muted);margin-top:2px}

/* Join JW Family */
.careers-openings{background:var(--jw-navy-900);color:#fff}
.careers-openings h2 span{color:var(--jw-teal-500)}
.careers-openings .about-section-head p:not(.eyebrow){color:#c3d2dc}
.careers-empty{display:flex;align-items:center;gap:34px;padding:38px;border:1px dashed #3b5a78}
.careers-empty-mark{font-family:var(--font-display);font-size:clamp(70px,8vw,120px);font-weight:600;line-height:1;color:var(--jw-teal-500)}
.careers-empty h3{font-size:26px;font-weight:600;margin:0 0 10px}
.careers-empty p{font-size:14px;line-height:1.8;color:#c3d2dc;margin:0;max-width:620px}
.careers-cv-card{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:36px;border:1px solid var(--border);background:var(--jw-tint-blue,#f5fafe)}
.careers-cv-card h3{font-size:24px;font-weight:600;margin:0 0 10px}
.careers-cv-card p{font-size:14px;line-height:1.8;color:var(--muted);margin:0;max-width:560px}
.careers-cv-card .about-btn{flex-shrink:0}
.careers-note{font-size:12px;color:var(--muted);margin:20px 0 0}
.careers-note a{color:var(--jw-teal-800);font-weight:600}
@media(max-width:1100px){
.contact-quick,.contact-desk-grid,.contact-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.contact-office-grid{grid-template-columns:1fr 1fr}
.about-mission{grid-template-columns:1fr 1fr}
.about-mission-lead{grid-column:1/-1}
.about-office-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
.about-director{grid-template-columns:1fr}
.about-director-photo{position:static;max-width:420px}
.about-section-head{grid-template-columns:1fr;gap:20px}
.about-value-grid,.about-why-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.contact-quick,.contact-office-grid,.contact-desk-grid,.contact-group-grid{grid-template-columns:1fr}
.contact-office{padding:26px}
.careers-empty,.careers-cv-card{flex-direction:column;align-items:flex-start;padding:26px}
.about-hero{min-height:auto}
.about-hero-copy{padding:50px 0 44px}
.about-hero h1{font-size:44px}
.about-hero-copy>p:not(.eyebrow){font-size:15px}
.about-hero-bottom{flex-direction:column;gap:6px;font-size:8px}
.about-mission,.about-value-grid,.about-why-grid,.about-office-grid{grid-template-columns:1fr}
.about-mission>article,.about-value-grid article,.about-why-grid article{padding:26px}
.about-director blockquote{padding-left:18px}
}