/* Company profile: cobalt for the story, ice blue for the method. */
.about-page { --cobalt:#1d5097; --ink:#143455; --ice:#e8f2fb; --sky:#bedcf5; }
.about-opening { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,400px); gap:clamp(22px,5vw,84px); align-items:center; padding:clamp(30px,4vw,64px) max(var(--as-gutter),calc((100% - 1360px)/2)); background:linear-gradient(120deg,#153964,#204e88 64%,#2861a6); }
.about-intro { padding:16px 0; align-self:center; }
.about-kicker { display:flex; align-items:center; gap:14px; color:#d4e9fd; font-size:11px; font-weight:600; letter-spacing:.16em; }
.about-kicker::before { content:''; width:32px; height:2px; background:#9ed0ff; }
.about-intro h1 { color:#fff; font-size:clamp(45px,5.15vw,84px); line-height:1.04; letter-spacing:-.055em; margin:28px 0 24px; }
.about-intro h1 em { color:#b8dcff; }
.about-lead { color:#eef6ff; max-width:43ch; font-size:clamp(16px,1.35vw,21px); line-height:1.65; }
.about-story-link { display:inline-flex; align-items:center; min-height:44px; margin-top:25px; color:white; font-size:14px; text-decoration-color:#aaceee; }
.about-hero-image { width:100%; background:#143455; }
.about-hero-image img { width:100%; height:auto; display:block; }
.about-hero-image figcaption { padding:12px 16px; color:white; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; }
.about-hero-image figcaption strong { font-size:16px; } .about-hero-image figcaption span { font-size:12px; }
.about-page .company-facts { max-width:none; padding-inline:max(var(--as-gutter),calc((100% - 1500px)/2 + var(--as-gutter))); background:var(--ice); border:0; }
.about-page .company-facts>div { border-color:#a0bdd7; }
.about-page .company-facts strong,.about-page .company-story h2,.about-workshop h2,.about-page .document-copy h2 { color:var(--cobalt); }
.about-page .company-story .lead { color:var(--ink); }
.about-page .company-story { align-items:start; column-gap:6%; }
.about-page .company-story .company-detail { grid-column:1; grid-row:2; align-self:start; }
.about-page .company-story .body { grid-column:2; grid-row:1 / 3; }
.about-page .company-detail img { width:100%; height:auto; display:block; }
.about-page .company-detail figcaption { background:var(--ink); color:#edf6ff; padding:12px 18px; }
.about-page .process-section { background:#e6f0fa; }
.about-page .process-section h2 { color:var(--ink); }
.about-page .process-grid { gap:clamp(18px,3vw,46px); }
.about-page .process-grid li { border-top:2px solid #8fafd0; padding-top:17px; }
.about-page .process-grid .num { display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px; padding:0; border:0; background:var(--cobalt); border-radius:50%; color:white; margin-bottom:18px; }
.about-page .process-grid h3,.about-page .equipment-grid h3 { color:var(--cobalt); }
.about-workshop { display:grid; grid-template-columns:1.12fr 1fr; align-items:start; gap:24px 6%; }
.about-workshop .section-top { grid-column:1 / -1; margin-bottom:12px; }
.about-site-photo img { width:100%; height:auto; display:block; }
.about-workshop .equipment-grid { display:grid; grid-template-columns:1fr; margin-top:0; }
.about-site-photo figcaption { padding:10px 0; color:#436380; font-size:12px; }
.about-page .equipment-grid { margin-top:28px; gap:30px; }
.about-page .equipment-grid>div { border:0; border-left:3px solid #5488b8; background:#f0f5fa; padding:22px 28px; }
.about-page .values-band { background:#214e83; }
.about-page .values-grid h3 { color:#c2e3ff; }
.about-page .values-grid p { color:#f2f7fc; }
.about-page .download-section { background:#f5f8fb; }
.about-page .document-cover { background:#dce8f3; }
@media(max-width:760px){
 .about-opening { grid-template-columns:1fr; padding:32px var(--as-gutter) 24px; gap:18px; }
 .about-intro { padding:0; }
 .about-intro h1 { margin:20px 0 17px; font-size:clamp(43px,8.5vw,60px); }
 .about-lead { font-size:16px; }
 .about-story-link { margin-top:13px; }
 .about-hero-image { max-width:380px; justify-self:center; }
 
 .about-hero-image figcaption { padding:11px 14px; }
 .about-hero-image figcaption span { font-size:11px; }
 .about-page .equipment-grid { gap:18px; }
 .about-page .equipment-grid>div { padding:19px; }
}

@media(max-width:760px){
 .about-page .company-story .body,.about-page .company-story .company-detail { grid-column:1; grid-row:auto; }
 .about-workshop { grid-template-columns:1fr; }
 .about-workshop .equipment-grid { margin:0; }
}