/* Matong's corporate system: shared type, spacing, surfaces and interactions. */
:root{--gutter:20px;--section-space:clamp(52px,7vw,88px);--content-width:1240px;--radius:6px;--hover-surface:var(--tone-10536b);--header-height:73px;--action-surface:var(--tone-c53547);--accent-ink:var(--tone-ffabb2)}
.wrap{width:min(var(--content-width),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.section{padding-block:var(--section-space)}
.section-heading{margin-bottom:clamp(26px,4vw,42px)}
.eyebrow{font-size:var(--type-_75rem);letter-spacing:.12em}
.intro p,.service-card p,.split-copy p,.values-grid p,.editorial-list p,.policy-article p,.responsibility-copy p{font-size:var(--type-1rem);line-height:1.6}
.intro p,.split-copy p,.policy-article p{max-width:65ch}
.service-card h3,.project-card h3{font-size:var(--type-1_16rem);line-height:1.35}
.service-capabilities,.project-card h3+p,.project-client{font-size:var(--type-_82rem)}
.resource-card p,.capability-list p,.office-panel p,.document-list>a>span:last-child{font-size:var(--type-_94rem)}
.footer-grid p,.footer-grid>div>a:not(.brand),.footer-grid h3{font-size:var(--type-_875rem);line-height:1.6}
.footer-bottom{font-size:var(--type-_75rem);flex-wrap:wrap;gap:var(--space-4)}
.footer-grid>div>a:not(.brand){min-height:44px;margin-top:4px;padding-block:var(--space-2);overflow-wrap:anywhere}
.footer-grid .brand{margin-bottom:20px}
.footer-grid .footer-contact{font-style:normal;font-size:var(--type-_875rem);color:var(--muted);line-height:1.6}
.footer-contact a{display:block;min-height:44px;padding-block:10px}
.footer-grid .social-links a::after{display:none}
.footer-grid .social-links a{min-height:44px;padding:0}
.contact-line{font-size:var(--type-_94rem);min-height:48px;overflow-wrap:anywhere}
.form-grid label,.form-heading p,.form-status{font-size:var(--type-_875rem)}
.form-grid input,.form-grid select,.form-grid textarea{font-size:var(--type-1rem);border-radius:3px}
.form-grid label{line-height:1.5}
.enquiry-intro>p{font-size:var(--type-1rem);max-width:50ch}
.tone-blue{background:var(--navy)}
.tone-deep{background:var(--deep)}
.tone-lighter{background:var(--surface-hover)}
.tone-blue,.tone-deep,.tone-lighter{color:var(--ink)}

/* Sticky remains in flow: the following header slides in without layout movement. */
.header{background:var(--navy);top:0}
.header::after{background:var(--deep);box-shadow:0 8px 24px var(--tone-021c2950)}

.header:focus-within,.nav-open .header{animation:none}


/* Full-width real imagery, bounded copy and one clear primary action. */
.hero{min-height:calc(100svh - var(--header-height));min-height:max(680px,calc(100svh - var(--header-height)))}
.hero-image{inset:0}
.hero-image::after{background:linear-gradient(90deg,var(--tone-042b3df5) 0%,var(--tone-042b3da6) 48%,var(--tone-042b3d38) 100%),linear-gradient(0deg,var(--tone-042b3dcc),transparent 65%)}
.hero-image::before{display:none}
.hero-slides{opacity:1}
.hero-content{padding-top:clamp(60px,10vh,110px);padding-bottom:180px}
.hero h1{max-width:14ch;font-size:clamp(3rem,6.3vw,5.3rem);line-height:1.04;letter-spacing:-.045em}
.hero-content>p{font-size:var(--type-1rem);max-width:43ch;color:var(--tone-dfebf0);line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.hero-actions .text-link{color:var(--white)}
.hero-bottom>p,.hero-bottom>p span{font-size:var(--type-_75rem);letter-spacing:.02em}
.hero-selector button{font-size:var(--type-_8rem)}
.hero-playback{font-size:var(--type-_75rem)}
.hero-motion .hero-actions{animation:hero-arrive .6s var(--motion-ease) .3s both}
.hero-motion .hero-actions .button{animation:none}
.hero-motion .hero-content h1{animation-delay:.1s}
.hero-motion .hero-content>p{animation-delay:var(--duration-fast)}

/* One opacity layer produces the same brand highlight on every interactive card. */
.interactive-card{position:relative;isolation:isolate;border-radius:var(--radius)}
.interactive-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:var(--hover-surface);border:1px solid var(--accent-ink);opacity:0;transition:opacity var(--duration) var(--motion-ease)}
.interactive-card:focus-visible::before,.interactive-card:focus-within::before{opacity:1}
.interactive-card:focus-visible{outline-offset:3px}
.service-card,.project-card{padding:var(--space-4)}
.project-card>div{padding:var(--space-5) var(--space-1) var(--space-1)}
.service-card .card-image,.project-photo{height:auto;aspect-ratio:4 / 3;border-radius:4px}
.service-card .card-image img,.project-photo img{height:100%;width:100%;object-fit:cover}
.project-card h3 a{gap:14px}
.project-card h3 svg{margin-top:4px}
.resource-card:hover,.navy-card:hover{background:var(--paper)}
.resource-card{border-radius:var(--radius);min-height:300px}
.resource-card.navy-card:hover{background:var(--deep)}
.document-list>a,.mega-links>a,.principles>a{position:relative;isolation:isolate}
.document-list>a::before,.mega-links>a::before,.principles>a::before{content:'';position:absolute;inset:0 -10px;z-index:-1;background:var(--hover-surface);border-radius:3px;opacity:0;transition:opacity var(--duration) var(--motion-ease);pointer-events:none}
.document-list>a:focus-visible::before,.mega-links>a:focus-visible::before,.principles>a:focus-visible::before{opacity:1}
.motion-card::after{inset:0;border-radius:inherit;box-shadow:0 12px 28px var(--tone-021c2933)}
.button{border-radius:3px;font-size:var(--type-_875rem);background:var(--action-surface)}
.button.light-button{background:var(--white);color:var(--navy)}
.nav-contact:focus-visible::after,.mega-links a:focus-visible::after,.footer-bottom a:focus-visible::after{transform:scaleX(1)}

/* Four service tabs remain visible; the feature panel has reserved image/copy space. */
.showcase-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:24px}
.showcase-tab{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-content:start;text-align:left;min-height:106px;padding:17px;border:1px solid var(--line);background:var(--deep);font-size:var(--type-_875rem);line-height:1.4}
.showcase-tab>span{font-size:var(--type-_7rem);letter-spacing:.07em;color:var(--muted);grid-column:1}
.showcase-tab>strong{font-weight:500;grid-column:1/-1}
.showcase-tab>svg{width:20px;height:20px;color:var(--accent-ink);grid-column:2;grid-row:1}
.showcase-tab[aria-selected=true]::before{opacity:1}
.showcase-tab[aria-selected=true]>span{color:var(--accent-ink)}
.showcase-panel{display:grid;grid-template-columns:minmax(0,1fr);background:var(--navy);border-radius:var(--radius);overflow:hidden;min-width:0}
.showcase-photo{height:215px;overflow:hidden}
.showcase-photo img{width:100%;height:100%;object-fit:cover}
.showcase-copy{padding:26px;min-height:340px;display:flex;align-items:start;flex-direction:column}
.showcase-copy .eyebrow{font-size:var(--type-_7rem);margin-bottom:16px;color:var(--accent-ink)}
.showcase-copy h3{font-size:clamp(1.6rem,3vw,2.3rem);max-width:22ch;line-height:1.2}
.showcase-copy>p{margin-top:18px;color:var(--muted);font-size:var(--type-1rem);max-width:48ch}
.showcase-copy .service-capabilities{border:0;padding:0;margin:22px 0;font-size:var(--type-_875rem)}
.showcase-copy .text-link{margin-top:auto;gap:14px;font-size:var(--type-_875rem)}
.showcase-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px}
.showcase-playback{border:1px solid var(--line);border-radius:3px;padding:10px 15px;min-height:44px;font-size:var(--type-_8rem)}
.showcase-playback:disabled{opacity:.7;cursor:default}
.showcase-position{font-size:var(--type-_8rem);color:var(--muted);font-variant-numeric:tabular-nums}
.showcase-panel.is-entering{animation:showcase-arrive .55s var(--motion-ease) both}
@keyframes showcase-arrive{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}
.service-showcase:not(.showcase-ready) .showcase-tabs,.service-showcase:not(.showcase-ready) .showcase-controls{display:none}
.service-showcase:not(.showcase-ready) .showcase-panel{margin-bottom:24px}

/* Real staff photography, editorial names and roles, with no invented biographies. */
.team-intro{display:grid;gap:28px;margin-bottom:36px;align-items:end}
.team-intro h2{font-size:clamp(2.1rem,4vw,3.1rem);max-width:17ch}
.team-intro p{font-size:var(--type-1rem);line-height:1.6;color:var(--muted);max-width:48ch}
.team-intro .eyebrow{color:var(--accent-ink);margin-bottom:16px}
.team-grid.modern-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px var(--space-4)}
.team-card{min-width:0;background:var(--deep);overflow:hidden;border-radius:var(--radius)}
.team-profile{display:block;height:100%}
.team-photo{height:auto;aspect-ratio:4 / 5;overflow:hidden;background:var(--tone-d8e2e6)}
.modern-team .team-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .5s var(--motion-ease)}
.team-card:nth-child(4) .team-photo img{object-position:58% center}
.team-copy{padding:18px 15px 22px}
.team-number{display:block;color:var(--accent-ink);font-size:var(--type-_7rem);letter-spacing:.08em;margin-bottom:14px}
.team-copy h3{font-size:clamp(1rem,2vw,1.3rem);line-height:1.3;letter-spacing:-.02em;margin:0}
.team-copy p{margin:10px 0 0;font-size:var(--type-_875rem);line-height:1.5;color:var(--muted)}
.team-heading .text-link{margin-top:22px}
.team-page-intro{margin-bottom:42px;font-size:var(--type-1rem);max-width:60ch;color:var(--muted)}
.modern-team .team-card:target{outline:2px solid var(--accent-ink);outline-offset:5px}

.pump-gallery figure{min-width:0;margin:0}
.pump-photo{display:block;width:100%;padding:0;border-radius:8px;position:relative;isolation:isolate}
.pump-photo img{width:100%;height:auto;max-height:none;aspect-ratio:3 / 4;object-fit:cover;object-position:center 35%;transition:transform .5s var(--motion-ease)}
.pump-photo .photo-enlarge{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--tone-ffffff70);border-radius:50%;background:var(--tone-042b3de6);color:white}
.pump-gallery figcaption{font-size:var(--type-_875rem);color:var(--muted);line-height:1.6;margin-top:14px}
.project-detail .text-link{font-size:var(--type-_94rem)}
.project-detail dd{font-size:var(--type-1rem);line-height:1.6}
.project-detail>div>p{font-size:var(--type-1rem)}
.gallery-item>img,.split-copy>img{border-radius:var(--radius)}
.gallery-item>span{font-size:var(--type-_875rem)}
.gallery-item.interactive-card:not(.pump-photo){padding:var(--space-3)}
.pump-photo::after{content:'';position:absolute;inset:1px;border:2px solid var(--accent-ink);border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--duration) var(--motion-ease)}
.pump-photo:focus-visible::after{opacity:1}
.gallery-dialog .gallery-meta p{font-size:var(--type-_875rem)}
.company-facts>div>span{font-size:var(--type-_94rem)}
.client-label{font-size:var(--type-_875rem)}
.client-label small{font-size:var(--type-_75rem);line-height:1.5}

@media(hover:hover) and (pointer:fine){
 .interactive-card:hover::before,.document-list>a:hover::before,.mega-links>a:hover::before,.principles>a:hover::before{opacity:1}
 .interactive-card:hover{z-index:1}
 .team-card:hover .team-photo img,.pump-photo:hover img{transform:scale(1.06)}
 .pump-photo:hover::after{opacity:1}
}
@media(min-width:741px){
 :root{--gutter:32px;--header-height:88px}
 .showcase-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
 .showcase-panel{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);min-height:375px}
 .showcase-photo{height:100%;min-height:375px}
 .showcase-copy{min-height:375px;padding:34px}
 .team-intro{grid-template-columns:1.15fr 1fr;gap:70px}
 .team-grid.modern-team{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
 .team-copy{padding:22px var(--space-5) 26px}
 .intro{padding-block:var(--section-space)}
}
@media(min-width:1100px){:root{--gutter:48px}.showcase-copy{padding:44px}.showcase-tab{padding:var(--space-5)}.team-copy{min-height:174px}}
@media(max-width:740px){
 .hero{min-height:700px}
 .hero-content{padding-top:64px;padding-bottom:208px}
 .hero h1{font-size:clamp(2.75rem,11vw,3.8rem);max-width:13ch}
 .hero-content>p{font-size:var(--type-1rem);max-width:34ch;margin-top:24px;margin-bottom:24px}
 .hero .eyebrow{font-size:var(--type-_66rem);line-height:1.8;max-width:36ch;margin-bottom:24px}
 .hero-bottom>p{display:none}
 .hero-bottom{padding-block:14px;gap:var(--space-2)}
 .hero-selector{gap:14px;justify-content:space-between}
 .hero-selector button{font-size:var(--type-_72rem);gap:7px;min-height:44px}
 .hero-selector button span{font-size:var(--type-_65rem)}
 .hero-playback{font-size:var(--type-_72rem)}
 .hero-actions{gap:10px 18px}
 .hero-actions .button{min-height:48px;padding:var(--space-3) var(--space-4);font-size:var(--type-_86rem);gap:18px}
 .hero-actions .text-link{font-size:var(--type-_86rem)}
 .intro{padding-block:var(--section-space);gap:var(--space-6)}
 .service-grid.service-carousel{grid-auto-columns:minmax(0,88%);gap:14px;padding:var(--space-1) 3px 14px}
 .service-carousel .card-image{height:auto;aspect-ratio:4 / 3}
 .service-carousel-controls{padding-right:110px}
 .service-card h3{font-size:var(--type-1_15rem)}
 .service-card p{font-size:var(--type-_94rem)}
 .service-capabilities{font-size:var(--type-_83rem)}
 .project-grid{gap:28px}
 .project-photo{height:auto;aspect-ratio:4 / 3}
 .project-card h3{font-size:var(--type-1_2rem)}
 .resource-card{padding:28px;min-height:270px}
 .resource-card>span{font-size:var(--type-_7rem);margin-bottom:24px}
 .resource-card p{font-size:var(--type-_94rem)}
 .responsibility-copy{padding:var(--section-space) var(--gutter)}
 .footer-grid{gap:30px var(--space-5)}
 .footer-grid h3{margin-bottom:14px}
 .footer-bottom>div{gap:var(--space-4)}
 .footer-grid p{max-width:100%}
 .company-facts{gap:26px}
}
@media(max-width:359px){
 .team-grid.modern-team{grid-template-columns:1fr}
 .team-photo{aspect-ratio:1 / 1}
 .hero h1{font-size:var(--type-2_6rem)}
 .hero-selector{gap:var(--space-2)}
 .hero-selector button{font-size:var(--type-_66rem)}
 .showcase-tab{padding:14px;font-size:var(--type-_8rem)}
 .showcase-copy{padding:22px;min-height:365px}
}
@media(prefers-reduced-motion:reduce){
 .header.is-scrolled,.hero-motion .hero-actions,.showcase-panel.is-entering{animation:none}
 .interactive-card::before,.document-list>a::before,.mega-links>a::before,.principles>a::before,.modern-team .team-photo img,.pump-photo img{transition:none}
 .team-card:hover .team-photo img,.pump-photo:hover img{transform:none}
}
@media print{.hero-actions,.showcase-tabs,.showcase-controls,.photo-enlarge{display:none}.showcase-panel[hidden]{display:grid!important}.team-copy p,.team-number{color:var(--tone-123644)}.interactive-card::before{display:none}.modern-team{grid-template-columns:repeat(2,minmax(0,1fr))!important}.tone-blue,.tone-deep,.tone-lighter{background:white;color:black}}