/* About Us: a continuous, animated journey in graphite and warm gold. */
.about-experience{--about-gold:#ffc48a;--about-line:#3d4142;--about-copy:#b8c2c8;isolation:isolate;min-width:0}
.about-experience *{box-sizing:border-box}
.about-experience a:focus-visible{outline:2px solid var(--about-gold);outline-offset:5px}
.about-chapter{position:relative;padding:64px 0;min-width:0;scroll-margin-top:24px}
.about-chapter+.about-chapter{border-top:1px solid var(--about-line)}
.about-experience .about-kicker{font-size:.8125rem;line-height:1.6;letter-spacing:1.3px;color:#deb28c;font-weight:700;margin:0 0 20px}
.about-experience h1{font-size:clamp(2.5rem,4.5vw,4.3rem);line-height:1.08;letter-spacing:-1.7px;margin:0 0 26px;color:#f4f3ee;font-weight:750}
.about-experience h2{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.13;letter-spacing:-1.1px;margin:0 0 25px;color:#f4f3ee}
.about-experience h1 em,.about-experience h2 em{font-style:normal;color:var(--about-gold)}
.about-experience p{font-size:1.0625rem;line-height:1.8;color:var(--about-copy);margin:0 0 20px}
.about-experience .about-lead{font-size:1.25rem;line-height:1.55;color:#e0e5e6}
.about-experience p a,.about-text-link{color:var(--about-gold);text-decoration:underline;text-underline-offset:5px}
.about-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}
.about-actions .button,.about-spec-copy>.button,.about-closing .button{font-size:1rem;min-height:52px;padding:14px 23px}
.about-opening{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-top:36px}
.about-promise-stage{position:relative;padding:32px;overflow:hidden;border:1px solid #7c644b;border-radius:24px;background:radial-gradient(ellipse at 70% 0,#cf9b5330,transparent 65%),linear-gradient(145deg,#1e2529,#0d1317);box-shadow:inset 0 1px 0 #fff1,0 20px 45px #0003}
.about-experience .about-stage-label{font-size:.8125rem;letter-spacing:1.6px;color:#cbb49a;line-height:1.5;margin:0 0 24px}
.about-promise-type{position:relative;display:grid;gap:6px;padding:12px 0 30px;border-bottom:1px solid #b6946b40;overflow:hidden;font-size:clamp(2rem,3.4vw,3rem);font-weight:650;line-height:1.18;letter-spacing:-1px;color:#f0ede7}
.about-promise-type strong{position:relative;z-index:1;color:var(--about-gold);font-weight:800;animation:about-promise-glow 6s ease-in-out infinite}
.about-promise-beam{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 10%,#ffe2b718 48%,transparent 75%);transform:translateX(-100%);animation:about-promise-light 6s ease-in-out infinite}
.about-promise-route{display:grid;margin-top:24px}
.about-route-item{display:grid;grid-template-columns:32px minmax(0,1fr) 26px;gap:12px;align-items:center;position:relative;padding:17px 0;color:#d6dbdd;border-bottom:1px solid #ffffff0c;animation:about-route-focus 9s ease-in-out infinite;animation-delay:calc(var(--step)*3s)}
.about-route-item strong{font-size:1rem;font-weight:600;line-height:1.4}
.about-route-number{font-size:.8125rem;line-height:1.4;color:#9a9e9f;animation:about-route-number 9s ease-in-out infinite;animation-delay:calc(var(--step)*3s)}
.about-route-check{width:26px;height:26px;border:1px solid #6c685c;border-radius:50%;padding:5px;animation:about-route-mark 9s ease-in-out infinite;animation-delay:calc(var(--step)*3s)}
.about-route-check svg,.about-response-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.about-experience .about-stage-foot{font-size:.75rem;letter-spacing:1px;color:#c9af91;line-height:1.5;margin:23px 0 0}
.about-chapter-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end;margin-bottom:32px}
.about-chapter-heading h2,.about-chapter-heading>p{margin-bottom:0}
.about-brand-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.about-brand-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;padding:20px 12px 16px;border:1px solid #3a4348;border-radius:14px;background:linear-gradient(145deg,#192228,#10171b);animation:about-brand-wave 16s ease-in-out infinite;animation-delay:calc(var(--brand-order)*1s);transition:background .2s,border-color .2s}
.about-brand-tile:hover{border-color:var(--about-gold);background:#282720}
.about-experience .about-brand-art{display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:70px;min-height:70px;max-height:70px;overflow:hidden}
.about-experience .about-brand-art>img,.about-experience .about-brand-art>svg{display:block;flex:none;width:100%;max-width:150px;min-width:0;height:100%;max-height:70px;object-fit:contain;object-position:center;overflow:hidden;margin:0;padding:0}
.about-brand-name{font-size:.875rem;color:#d2d9dd;font-weight:600;line-height:1.4;text-align:center;overflow-wrap:anywhere;min-height:2.8em;display:flex;align-items:center;justify-content:center}
.about-text-link{display:inline-block;font-size:1rem;line-height:1.5;margin-top:24px;padding-block:8px}
.about-spec-chapter{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-spec-board{position:relative;border:1px solid #5c5145;border-radius:24px;padding:24px 28px;background:radial-gradient(ellipse at 50% 0,#c3915121,transparent 55%),linear-gradient(140deg,#1a242a,#0c1318);overflow:hidden}
.about-spec-centre{position:relative;width:220px;height:220px;margin:0 auto 12px;display:grid;place-items:center;text-align:center}
.about-spec-orbit{position:absolute;inset:0;display:block;width:100%;height:100%;fill:none}
.about-orbit-base{stroke:#605342;stroke-width:1}
.about-orbit-sweep{stroke:#ffd09a;stroke-width:2;stroke-linecap:round;stroke-dasharray:110 493;transform-origin:110px 110px;animation:about-orbit-turn 12s linear infinite}
.about-orbit-inner{stroke:#80674a;stroke-width:1;stroke-dasharray:1 9;transform-origin:110px 110px;animation:about-orbit-turn 40s linear infinite reverse}
.about-spec-centre>div{display:grid;gap:10px}
.about-spec-centre span{font-size:.75rem;letter-spacing:1.8px;color:#cdb699;line-height:1.5}
.about-spec-centre strong{font-size:1.625rem;font-weight:650;line-height:1.15;color:#f9d9b5;letter-spacing:-.4px}
.about-spec-list{padding:0;margin:0;list-style:none;display:grid;gap:10px}
.about-spec-list li{position:relative;display:flex;align-items:center;gap:15px;padding:16px;border:1px solid #39454d;border-radius:12px;overflow:hidden;animation:about-spec-focus 9s ease-in-out infinite;animation-delay:calc(var(--step)*3s)}
.about-spec-index{flex:none;font-size:.875rem;color:#dcad7f;font-weight:650}
.about-spec-list li>div{display:grid;gap:5px;min-width:0}
.about-spec-list strong{font-size:1rem;line-height:1.4;color:#e4e9e9;font-weight:600}
.about-spec-list li>div>span{font-size:.875rem;line-height:1.5;color:#b1bec5}
.about-spec-line{position:absolute;height:2px;bottom:0;left:0;right:0;background:linear-gradient(90deg,#c18a52,#ffd49b);transform:scaleX(0);transform-origin:left;animation:about-spec-progress 9s ease-in-out infinite;animation-delay:calc(var(--step)*3s)}
.about-experience .about-board-note{font-size:.875rem;line-height:1.6;color:#b8b4ac;text-align:center;margin:18px 0 0}
.about-team-chapter{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-enquiry-board{padding:32px;border:1px solid #56544e;border-radius:24px;background:radial-gradient(ellipse at 0 20%,#9c8c6c22,transparent 60%),linear-gradient(145deg,#1b252a,#10171b)}
.about-enquiry-head{display:grid;gap:12px;border-bottom:1px solid #645946;padding-bottom:25px;margin-bottom:10px}
.about-enquiry-head>span,.about-enquiry-line>span{font-size:.75rem;letter-spacing:1px;color:#cfb496;line-height:1.5}
.about-enquiry-head strong{font-size:1.875rem;line-height:1.2;font-weight:650;letter-spacing:-.6px;color:#f2eee7}
.about-enquiry-line{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid #3a4449;animation:about-enquiry-arrive 9s ease-in-out infinite;animation-delay:calc(var(--step)*3s)}
.about-enquiry-line strong{font-size:1rem;font-weight:550;line-height:1.5;color:#e1e6e6}
.about-enquiry-response{display:flex;align-items:center;gap:14px;margin-top:24px;padding:18px 16px;border:1px solid #8a7051;border-radius:14px;background:#c3965210;animation:about-reply-glow 9s ease-in-out infinite}
.about-response-icon{color:#f0bd83;border:1px solid #b48c5e;flex:none;width:30px;height:30px;padding:6px;border-radius:50%}
.about-experience .about-enquiry-response p{font-size:.875rem;line-height:1.6;margin:0;color:#c6cbd0}
.about-enquiry-response strong{color:#ffd0a0;font-weight:650}
.about-phone{display:inline-block;font-size:1rem;line-height:1.5;color:#d5c3ae;padding:12px 0}
.about-closing{position:relative;text-align:center;padding:40px 20px 48px;margin:0 0 36px;border-top:1px solid #7c6349;border-bottom:1px solid #3b3833;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#d89d4d16,transparent 75%)}
.about-experience .about-closing p{font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.25;letter-spacing:-.8px;color:#edeae4;margin-bottom:26px}
.about-closing strong{font-weight:700;color:var(--about-gold);animation:about-promise-glow 6s ease-in-out infinite}
/* Each chapter runs only while visible. Static content remains readable without JS. */
.about-experience [data-about-chapter]:not(.is-in-view) *{animation-play-state:paused!important}
.about-experience[data-motion-paused] *{animation-play-state:paused!important}
.about-motion-ready .about-chapter.is-in-view>.about-opening-copy,.about-motion-ready .about-chapter.is-in-view>.about-chapter-heading,.about-motion-ready .about-chapter.is-in-view>.about-spec-copy,.about-motion-ready .about-chapter.is-in-view>.about-team-copy{animation:about-chapter-arrive .65s ease-out both}
@keyframes about-chapter-arrive{from{opacity:.7;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes about-promise-glow{0%,100%{color:#f4b978;text-shadow:0 0 0 #f6be7800}50%{color:#ffddb0;text-shadow:0 0 28px #f6be781f}}
@keyframes about-promise-light{0%,15%{transform:translateX(-100%)}65%,100%{transform:translateX(100%)}}
@keyframes about-route-focus{0%,8%,38%,100%{color:#c3cccf}14%,30%{color:#ffcf9a}}
@keyframes about-route-number{0%,8%,38%,100%{color:#9a9e9f}14%,30%{color:#ffcf9a}}
@keyframes about-route-mark{0%,8%,38%,100%{border-color:#6c685c;color:#b7afa2;background:transparent}14%,30%{border-color:#e5af70;color:#ffd6a2;background:#e9b57119}}
@keyframes about-brand-wave{0%,4%,23%,100%{border-color:#3a4348;box-shadow:inset 0 1px 0 #ffffff03}8%,17%{border-color:#b99364;box-shadow:inset 0 1px 0 #ffe2b518,0 0 18px #dda1530c}}
@keyframes about-orbit-turn{to{transform:rotate(360deg)}}
@keyframes about-spec-focus{0%,4%,36%,100%{border-color:#39454d;background:transparent}12%,28%{border-color:#a98961;background:#c89b4e0b}}
@keyframes about-spec-progress{0%,4%{transform:scaleX(0);opacity:0}9%{opacity:1}28%{transform:scaleX(1);opacity:1}36%,100%{transform:scaleX(1);opacity:0}}
@keyframes about-enquiry-arrive{0%,4%,42%,100%{transform:none;opacity:.75}14%,31%{transform:translateX(5px);opacity:1}}
@keyframes about-reply-glow{0%,55%,100%{border-color:#8a7051;background:#c3965210}70%,88%{border-color:#e1b783;background:#c3965220}}
@media(max-width:1000px){.about-opening,.about-spec-chapter,.about-team-chapter,.about-chapter-heading{gap:32px}.about-promise-stage,.about-enquiry-board{padding:25px}.about-spec-board{padding:22px}.about-experience h1{font-size:clamp(2.4rem,4.7vw,3.5rem)}}
@media(max-width:760px){
 .about-chapter{padding:36px 0;scroll-margin-top:12px}
 .about-opening,.about-spec-chapter,.about-team-chapter,.about-chapter-heading{grid-template-columns:1fr;gap:28px}
 .about-opening{padding-top:18px}
 .about-experience h1{font-size:clamp(2.2rem,8vw,3.4rem);letter-spacing:-1.1px;margin-bottom:20px}
 .about-experience h2{font-size:clamp(1.875rem,7vw,2.8rem);letter-spacing:-.8px;margin-bottom:20px}
 .about-experience p{font-size:1rem;line-height:1.75;margin-bottom:18px}
 .about-experience .about-lead{font-size:1.125rem;line-height:1.6}
 .about-experience .about-kicker{font-size:.8125rem;margin-bottom:15px;letter-spacing:.8px}
 .about-promise-stage{padding:25px;border-radius:20px}
 .about-promise-type{font-size:clamp(2rem,8vw,3rem);padding-bottom:23px}
 .about-experience .about-stage-label{margin-bottom:15px}
 .about-promise-route{margin-top:16px}
 .about-route-item{padding:16px 0}
 .about-actions{gap:10px;margin-top:22px}
 .about-actions .button{flex:1;padding:13px 14px;font-size:.9375rem;white-space:normal;min-width:125px}
 .about-chapter-heading{gap:0;margin-bottom:24px}
 .about-chapter-heading>p{margin-bottom:0}
 .about-brand-grid{gap:8px}
 .about-brand-tile{padding:14px 6px 12px;gap:9px;border-radius:10px}
 .about-experience .about-brand-art{height:48px;min-height:48px;max-height:48px}
 .about-experience .about-brand-art>img,.about-experience .about-brand-art>svg{max-height:48px;max-width:100%}
 .about-brand-name{font-size:.875rem;line-height:1.4;min-height:2.8em}
 .about-spec-board{padding:20px;border-radius:20px}
 .about-spec-centre{width:190px;height:190px;margin-bottom:20px}
 .about-spec-centre strong{font-size:1.5rem}
 .about-spec-list li{padding:15px 12px;gap:12px}
 .about-team-copy{grid-row:1}
 .about-enquiry-board{padding:24px;border-radius:20px}
 .about-enquiry-head strong{font-size:1.75rem}
 .about-enquiry-response{padding:15px 12px;gap:10px}
 .about-phone{width:100%;text-align:center;padding-bottom:0}
 .about-closing{padding:30px 10px 34px;margin-bottom:24px}
 .about-closing .button{width:100%;max-width:380px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){.about-experience *{animation:none!important;transition:none!important}.about-promise-beam,.about-spec-line{display:none}.about-route-check{color:#e7c29a}.about-enquiry-line{opacity:1}}
