/* About template only; uses the shared MSS palette and typography. */
.page-template-about-us .site-main { padding-block: 0; }
.mss-about-page { --about-inset: clamp(1.4rem, 3.2vw, 3rem); padding-block: 2rem 3rem; }
.about-breadcrumb { font-size:.75rem; color:var(--mss-stone); margin-bottom:1.8rem; }
.about-breadcrumb ol { display:flex; flex-wrap:wrap; gap:.7rem; list-style:none; margin:0; padding:0; }
.about-breadcrumb li + li::before { content:"/"; margin-right:.7rem; color:var(--mss-gold-ink); }
.about-breadcrumb a { color:inherit; text-decoration:none; }
.about-breadcrumb a:hover { text-decoration:underline; }
.about-hero { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-bottom:3rem; }
.about-hero .eyebrow { margin-bottom:1rem; }
.about-hero h1 { font-size:clamp(2.7rem,4.3vw,4.15rem); max-width:18ch; line-height:1.1; margin-bottom:1.4rem; }
.about-intro { max-width:58ch; color:var(--mss-stone); font-size:1rem; line-height:1.8; }
.about-actions { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.about-portrait { position:relative; isolation:isolate; overflow:hidden; min-width:0; height:28rem; border:1px solid #d6cebd; background:linear-gradient(135deg,#e6dfd1,#f8f5ee 52%,#e5dece); border-radius:8rem .4rem .4rem .4rem; box-shadow:0 18px 40px rgb(20 34 56 / 5%); }
.about-portrait::after { content:""; position:absolute; inset:1rem; border:1px solid rgb(156 130 78 / 23%); border-radius:7rem .2rem .2rem .2rem; pointer-events:none; }
.about-featured { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:.24; }
.about-orbit { position:absolute; width:115%; aspect-ratio:1; top:-9%; left:14%; border:1px solid #bda570; border-radius:50%; }
.about-orbit::after { content:""; position:absolute; inset:1.4rem; border:1px solid rgb(185 154 91 / 25%); border-radius:50%; }
.about-plane { position:absolute; bottom:-9%; height:77%; width:39%; border:1px solid #c8bfae; transform:skewY(-26deg); background:repeating-linear-gradient(90deg,transparent 0 22px,#d0c8b8 23px,transparent 24px),linear-gradient(90deg,#e1dbce,#f1ece2); }
.about-plane-back { left:-7%; height:61%; }
.about-plane-front { right:-9%; height:83%; background-color:#e8e2d7; }
.about-architecture { position:absolute; inset:17% 11% 21%; }
.about-tower { position:absolute; bottom:0; border:1px solid #b4a58a; background:repeating-linear-gradient(90deg,transparent 0 22px,rgb(250 247 240 / 80%) 23px 25px),repeating-linear-gradient(0deg,transparent 0 38px,#c7beb0 39px 40px),linear-gradient(120deg,#e6e0d4,#c8c6bb); }
.about-tower-rear { left:3%; width:30%; height:62%; transform:skewY(-18deg); background-color:#ded9ce; }
.about-tower-main { left:32%; width:37%; height:100%; transform:skewY(-18deg); box-shadow:-12px 12px 24px rgb(20 34 56 / 5%); }
.about-tower-side { left:69%; width:23%; height:100%; transform:skewY(28deg); transform-origin:top left; background:repeating-linear-gradient(90deg,transparent 0 18px,#e8e2d6 19px 20px),repeating-linear-gradient(0deg,transparent 0 38px,#c7beb0 39px 40px),#bfc1b8; }
.about-plinth { position:absolute; left:-5%; right:-6%; bottom:-9%; height:11%; background:#e9e2d3; border-top:1px solid #b9a16b; transform:skewY(-10deg); box-shadow:0 8px 0 #dcd4c3; }
.about-inset { position:absolute; bottom:8%; left:9%; right:auto; padding:.8rem 1.1rem; background:var(--mss-navy); color:var(--mss-soft-gold); border-left:2px solid var(--mss-soft-gold); box-shadow:0 10px 24px rgb(20 34 56 / 12%); display:flex; align-items:center; justify-content:center; gap:.9rem; }
.about-inset span { font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; }
.about-inset .mss-icon { width:1.5rem; height:1.5rem; flex-shrink:0; }
.mss-about-content .wp-block-group > .wp-block-group__inner-container { display:contents; }
.about-section { padding:var(--about-inset); margin:0; }
.about-section h2 { font-size:clamp(1.9rem,3vw,2.9rem); max-width:24ch; margin-bottom:1.1rem; }
.about-section .eyebrow { margin-bottom:.75rem; }
.about-section p { color:var(--mss-stone); }
.about-section p:last-child { margin-bottom:0; }
.about-who { display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; background:var(--mss-warm-white); border:1px solid var(--mss-border); }
.about-who h2 { max-width:20ch; }
.about-who-copy p { font-size:.94rem; }
.about-who-copy .text-link { margin-top:.7rem; min-height:44px; }
.about-services { margin-top:1.4rem; background:#eee9df; border:1px solid #e2d9c9; }
.about-section-intro { font-size:.9rem; max-width:60ch; }
.about-service-index { list-style:none; margin:1.7rem 0 0; padding:0; border-top:1px solid #cfc2a9; }
.about-service-index li { border-bottom:1px solid #cfc2a9; }
.about-service-index a { display:grid; grid-template-columns:1.6rem 2.5rem 1.15fr 1fr 1.2rem; gap:1.2rem; align-items:center; padding:1.35rem 0; text-decoration:none; color:var(--mss-navy); transition:background 180ms; }
.about-service-number { font-size:.7rem; color:var(--mss-gold-ink); letter-spacing:.08em; }
.about-service-index .mss-icon { width:1.7rem; height:1.7rem; color:var(--mss-gold-ink); }
.about-service-index .mss-icon:last-child { width:1.2rem; }
.about-service-title { font-family:var(--mss-font-heading); font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.25; letter-spacing:-.025em; }
.about-service-description { color:var(--mss-stone); font-size:.83rem; max-width:32ch; }
.about-service-index a:hover { background:rgb(252 250 246 / 65%); }
.about-service-index a .mss-icon:last-child, .about-service-links .mss-icon { transition:transform 180ms; }
.about-service-index a:hover .mss-icon:last-child, .about-service-links a:hover .mss-icon { transform:translateX(3px); }
.about-approach { background:var(--mss-warm-white); margin-block:1.4rem; }
.about-approach .about-section-heading h2 { max-width:26ch; }
.about-principles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.7rem; margin-top:1.6rem; counter-reset:principle; }
.about-principle { border-top:1px solid #cdbb96; padding-top:1.1rem; }
.about-principle::before { counter-increment:principle; content:counter(principle,decimal-leading-zero); display:block; font-size:.7rem; letter-spacing:.1em; color:var(--mss-gold-ink); margin-bottom:.7rem; }
.about-principle h3 { font-family:var(--mss-font-heading); font-size:1.55rem; font-weight:400; margin-bottom:.65rem; }
.about-principle p { font-size:.85rem; line-height:1.7; }
.about-why { background:var(--mss-navy); color:var(--mss-ivory); display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; }
.about-why .eyebrow { color:var(--mss-soft-gold); }
.about-why h2 { max-width:16ch; }
.about-pillars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 2rem; }
.about-pillar { border-top:1px solid #6c6758; padding-top:1.2rem; }
.about-pillar > .mss-icon, .about-pillar .wp-block-group__inner-container > .mss-icon { color:var(--mss-soft-gold); margin-bottom:1rem; width:1.7rem; height:1.7rem; }
.about-pillar h3 { font-size:.98rem; line-height:1.4; font-weight:600; margin-bottom:.65rem; }
.about-pillar p { color:#cbd0d9; font-size:.84rem; }
.about-process { padding-block:3rem; }
.about-process h2 { max-width:none; }
.about-timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; list-style:none; padding:0; margin:2rem 0 0; counter-reset:step; }
.about-timeline li { position:relative; border-top:1px solid #cdbb96; padding:1.6rem 1.5rem 0 0; color:var(--mss-stone); font-size:.85rem; }
.about-timeline li::before { counter-increment:step; content:counter(step,decimal-leading-zero); display:block; font-size:.75rem; letter-spacing:.12em; color:var(--mss-gold-ink); margin-bottom:.9rem; }
.about-timeline li::after { content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border:1px solid var(--mss-gold-ink); background:var(--mss-ivory); transform:rotate(45deg); }
.about-timeline strong { display:block; color:var(--mss-navy); font-size:.98rem; font-weight:600; line-height:1.4; margin-bottom:.6rem; }
.about-statement { position:relative; isolation:isolate; overflow:hidden; background:#eae5da; border-left:3px solid #bca36d; padding-block:2.7rem; }
.about-statement::after { content:""; position:absolute; z-index:-1; width:23rem; height:23rem; border:1px solid rgb(164 141 96 / 35%); border-radius:50%; right:-5rem; top:-5rem; box-shadow:0 0 0 2rem rgb(185 154 91 / 5%); }
.about-statement h2 { font-size:clamp(2.1rem,3.6vw,3.3rem); max-width:27ch; }
.about-statement p:not(.eyebrow) { max-width:65ch; font-size:.95rem; }
.about-related { background:var(--mss-warm-white); margin-block:1.4rem; }
.about-related h2 { font-size:1.8rem; max-width:none; }
.about-service-links { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; padding:0; margin:1.5rem 0 0; }
.about-service-links a { display:flex; justify-content:space-between; gap:.8rem; align-items:center; min-height:75px; padding:.75rem 0; border-block:1px solid var(--mss-border); color:var(--mss-navy); text-decoration:none; }
.about-service-links .about-service-title { font-family:var(--mss-font-body); font-size:.8rem; font-weight:600; line-height:1.5; letter-spacing:0; }
.about-service-links .mss-icon { width:1rem; height:1rem; color:var(--mss-gold-ink); }
.about-closing { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:2rem; background:var(--mss-navy); color:var(--mss-ivory); border-left:3px solid var(--mss-soft-gold); }
.about-closing .eyebrow { color:var(--mss-soft-gold); }
.about-closing h2 { max-width:20ch; }
.about-closing p { color:#cbd0d9; }
.about-closing .about-actions { justify-content:flex-end; }
.about-closing .button-outline { color:var(--mss-ivory); border-color:#7a8392; }
.about-closing .button-outline:hover { background:#293b52; }
.about-closing [data-cta="whatsapp"] > .mss-icon { color:var(--mss-soft-gold); }
.about-contact-secondary { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; flex-basis:100%; justify-content:flex-end; padding-top:.4rem; }
.about-closing .about-contact-secondary .contact-action { color:var(--mss-ivory); min-height:44px; font-size:.82rem; }
.about-contact-secondary .mss-icon { color:var(--mss-soft-gold); width:1.05rem; height:1.05rem; }
.about-closing a:focus-visible { outline-color:var(--mss-soft-gold); }
.about-section, .about-section h2 { scroll-margin-top:calc(var(--mss-header-offset) + 1rem); }
@media(max-width:1100px) {
 .about-hero { gap:2rem; }
 .about-portrait { height:26rem; }
 .about-hero .button { padding-inline:1rem; gap:.8rem; }
 .about-who, .about-why { gap:2rem; }
 .about-principles { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .about-service-index a { gap:1rem; grid-template-columns:1.5rem 2rem 1.1fr 1fr 1.2rem; }
 .about-service-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .about-closing { grid-template-columns:1fr; gap:1.4rem; }
 .about-closing .about-actions, .about-contact-secondary { justify-content:flex-start; }
}
@media(max-width:800px) {
 .about-hero { grid-template-columns:1fr; }
 .about-hero h1 { max-width:22ch; }
 .about-portrait { height:21rem; max-width:34rem; width:100%; justify-self:center; }
 .about-who, .about-why { grid-template-columns:1fr; gap:1.5rem; }
 .about-why h2 { max-width:26ch; }
 .about-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2rem; }
 .about-service-index a { grid-template-columns:1.4rem 2rem 1fr 1.2rem; gap:.5rem .9rem; }
 .about-service-description { grid-column:3; max-width:none; }
 .about-service-index .mss-icon:last-child { grid-column:4; grid-row:1 / 3; }
}
@media(max-width:600px) {
 .mss-about-page { padding-block:1.4rem 2rem; }
 .about-breadcrumb { margin-bottom:1.4rem; font-size:.7rem; }
 .about-hero { gap:1.7rem; padding-bottom:2rem; }
 .about-hero h1 { font-size:2.4rem; max-width:19ch; }
 .about-intro { font-size:.94rem; }
 .about-portrait { height:18rem; border-top-left-radius:5rem; }
 .about-portrait::after { border-top-left-radius:4rem; }
 .about-inset { left:9%; right:auto; padding:.75rem; gap:.7rem; }
 .about-inset span { font-size:.6rem; letter-spacing:.12em; }
 .about-hero .button { padding-inline:.85rem; font-size:.77rem; }
 .about-section h2 { font-size:1.9rem; }
 .about-who-copy p { font-size:.9rem; }
 .about-service-index a { grid-template-columns:1.15rem 1fr 1.2rem; padding-block:1.2rem; }
 .about-service-index a > .mss-icon:not(:last-child) { display:none; }
 .about-service-title { font-size:1.35rem; }
 .about-service-description { grid-column:2; font-size:.8rem; }
 .about-service-index .mss-icon:last-child { grid-column:3; }
 .about-principles, .about-pillars, .about-timeline { grid-template-columns:1fr; }
 .about-timeline { gap:1.5rem; border-left:1px solid #cdbb96; margin-left:.25rem; }
 .about-timeline li { border-top:0; padding:0 0 0 1.5rem; }
 .about-timeline li::after { left:-4px; top:.5rem; }
 .about-timeline li::before { margin-bottom:.45rem; }
 .about-process { padding-block:2.3rem; }
 .about-service-links { grid-template-columns:1fr; gap:0; }
 .about-service-links a { min-height:55px; border-top:0; }
 .about-service-links li:first-child a { border-top:1px solid var(--mss-border); }
 .about-related h2 { font-size:1.7rem; }
 .about-closing .about-actions { flex-direction:column; align-items:stretch; }
 .about-contact-secondary { justify-content:center; flex-basis:auto; gap:.5rem 1.4rem; }
 .about-closing .button { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
 .mss-about-page a, .mss-about-page .mss-icon { transition:none!important; }
 .mss-about-page a:hover .mss-icon { transform:none; }
}