/* Shared client showcase and dedicated portfolio page. */
.client-preview { padding: 110px 0 120px; }
.client-preview-intro { max-width: 360px; }
.client-preview-intro p { color: #617269; font-size: 16px; line-height: 1.85; }
.client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.client-card { display: block; min-width: 0; position: relative; perspective: 1000px; }
.client-card-surface {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid #d9dfd6;
  border-radius: 8px;
  box-shadow: 0 5px 0 #e3e9de, 0 9px 0 #d1dacf, 0 22px 36px -18px rgba(10, 48, 38, .22);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .25s ease-out, box-shadow .25s, border-color .25s;
}
.client-card:hover .client-card-surface,
.client-card:focus-visible .client-card-surface {
  border-color: #91a88e;
  box-shadow: 0 5px 0 #dce6d7, 0 9px 0 #c7d5c3, 0 30px 44px -20px rgba(10, 48, 38, .32);
}
.client-card:focus-visible { outline: 3px solid #976f29; outline-offset: 7px; border-radius: 8px; }
.client-logo-stage { height: 205px; padding: 26px; display: grid; place-items: center; background: #fff; border-radius: 8px 8px 0 0; }
.client-logo { display: block; width: 100%; height: auto; max-height: 150px; object-fit: contain; }
.client-logo-imaviz { max-width: 270px; }
.client-logo-minedge { width: auto; max-width: 150px; }
.client-logo-maaden { max-width: 230px; }
.client-card-copy { padding: 25px 25px 27px; border-top: 1px solid #e4e8e0; background: #fafbf7; border-radius: 0 0 8px 8px; }
.client-region { display: block; min-height: 2.6em; font-size: 10px; font-weight: 800; line-height: 1.4; letter-spacing: .12em; color: #50735c; }
.client-card h3 { margin: 10px 0 9px; font-size: 21px; line-height: 1.35; letter-spacing: -.035em; }
.client-card p { color: #65746b; font-size: 14px; line-height: 1.65; min-height: 3.3em; margin: 0 0 24px; }
.client-card-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #2c5e46; font-size: 13px; font-weight: 700; }
.client-card-link .icon { transition: transform .2s; }
.client-card:hover .client-card-link .icon { transform: translate(2px, -2px); }
.relationship-note { margin: 32px 0 0; max-width: 760px; font-size: 14px; line-height: 1.8; color: #64756a; }

/* Contact details wrap at narrow widths without shrinking the email address. */
.contact-methods > a { font-size: 15px; }
.contact-value { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.contact-value small { font-size: 11px; color: #b2c6ba; letter-spacing: .035em; }
.contact-value > span { line-height: 1.5; }
.footer-links { flex-wrap: wrap; justify-content: flex-end; }
.service-detail-left { min-width: 0; }

/* Portfolio hero uses the same lightweight 3D geological globe as the home page. */
.portfolio-hero { min-height: 0; }
.portfolio-hero .hero-main { min-height: 690px; grid-template-columns: 56% 44%; padding-top: 120px; }
.portfolio-hero .hero-copy { padding: 0 0 58px; }
.portfolio-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 37px; color: #a7bfb6; font-size: 12px; }
.portfolio-breadcrumb a { border-bottom: 1px solid #5a7768; }
.portfolio-breadcrumb a:hover { color: var(--gold); }
.portfolio-breadcrumb [aria-current] { color: #e4e9dc; }
.portfolio-hero h1 { white-space: normal; font-size: clamp(46px, 4.5vw, 70px); line-height: 1.12; letter-spacing: -.06em; margin-block: 26px; }
.portfolio-hero .hero-lead { max-width: 490px; font-size: 16px; }
.portfolio-hero .hero-stage { height: 535px; margin-left: -5px; }
.portfolio-hero .hero-eyebrow { font-size: 10px; line-height: 1.6; }
.portfolio-hero .annotation-top { top: 60px; }
.portfolio-hero .stage-coordinates { top: 114px; left: 4px; }
.portfolio-hero .annotation-bottom { bottom: 65px; left: 10px; }
.portfolio-hero .drag-hint { bottom: 65px; right: 0; }
.portfolio-hero-foot { display: flex; gap: 20px; justify-content: space-between; padding: 28px 0 34px; border-top: 1px solid #ffffff25; color: #c9d6cc; font-size: 10px; line-height: 1.7; letter-spacing: .12em; }
.download-format { font-size: 10px; color: #dfc18c; letter-spacing: .1em; }
.portfolio-clients { padding: 100px 0 92px; }
.portfolio-clients .section-heading > p,
.project-section .section-heading > p { width: 340px; font-size: 16px; }

/* Project scopes are fully visible and linkable, including without JavaScript. */
.project-section { padding: 30px 0 110px; }
.project-section .section-heading { margin-bottom: 64px; }
.project-entry {
  scroll-margin-top: 105px;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
  gap: 68px;
  padding: 52px 0;
  border-top: 1px solid #ced9cb;
}
.project-entry:last-child { padding-bottom: 0; }
.project-number { font-family: Georgia, serif; font-size: 42px; color: #a38b5d; line-height: 1; }
.project-eyebrow { font-size: 10px; font-weight: 800; color: #55775f; letter-spacing: .11em; line-height: 1.8; margin: 23px 0 14px; }
.project-identity h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.045em; margin-bottom: 25px; }
.project-facts { display: grid; gap: 16px; margin: 0 0 30px; }
.project-facts div { display: grid; gap: 6px; }
.project-facts dt { font-size: 11px; font-weight: 800; color: #687d6d; text-transform: uppercase; letter-spacing: .06em; }
.project-facts dd { margin: 0; color: #304e3d; font-size: 15px; line-height: 1.65; }
.project-description { font-size: 18px; line-height: 1.85; color: #3d5648; margin: 0 0 30px; }
.project-scope h4 { font-size: 12px; color: #4d7059; text-transform: uppercase; letter-spacing: .11em; margin: 0 0 18px; }
.project-work { list-style: none; padding: 0; margin: 0; display: grid; gap: 17px; }
.project-work li { position: relative; padding-left: 25px; font-size: 16px; line-height: 1.85; color: #566b5c; }
.project-work li::before { content: ''; position: absolute; left: 0; top: .75em; width: 7px; height: 7px; border: 1px solid #a08857; transform: rotate(45deg); }
.project-entry:target .project-number { color: #7a5b23; }

/* Offset mineral plates echo geological strata without implying project data. */
.copper-project { position: relative; overflow: hidden; padding: 100px 0 105px; background: radial-gradient(ellipse at 12% 80%, #173d38, transparent 60%), #081f28; }
.copper-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 85px; }
.project-status { display: flex; align-items: center; gap: 10px; margin: 32px 0 22px; color: #e8c989; font-size: 12px; font-weight: 650; }
.project-status .status-dot { background: #d3ae65; }
.copper-project h2 { font-size: clamp(40px, 4vw, 59px); margin-bottom: 24px; }
.copper-project h2 em { color: var(--gold); font-family: Georgia, serif; font-weight: 400; }
.copper-overview > p { font-size: 16px; line-height: 1.9; color: #c0d1c6; }
.copper-overview .copper-location { display: flex; gap: 10px; align-items: center; color: #e3d2b1; font-size: 14px; }
.copper-scope { padding: 33px; align-self: start; border: 1px solid #86b59738; background: #16413955; border-radius: 5px; box-shadow: 0 22px 50px #0000001a; }
.copper-scope h3 { margin-bottom: 25px; font-size: 22px; color: #f1efde; }
.copper-scope .project-work { gap: 15px; }
.copper-scope .project-work li { color: #c3d4c7; font-size: 15px; }
.copper-scope .project-work li::before { border-color: #d3af6e; }
.mineral-stack { position: relative; height: 180px; width: 260px; max-width: 100%; margin: 25px auto 0; perspective: 750px; }
.mineral-stack span { position: absolute; width: 195px; height: 135px; left: 24px; top: 0; border: 1px solid #97b89b77; border-radius: 4px; background: linear-gradient(135deg, #3a6a54, #133c37); transform: rotateX(57deg) rotateZ(-32deg); box-shadow: 0 14px 0 #123c33, 0 25px 35px #00000033; }
.mineral-stack span:nth-child(1) { top: 75px; background: #1b3839; border-color: #647e6f; }
.mineral-stack span:nth-child(2) { top: 50px; background: linear-gradient(135deg, #947047, #5d4734); border-color: #b39567; }
.mineral-stack span:nth-child(3) { top: 25px; background: linear-gradient(135deg, #667e5d, #2a4d3d); }
.mineral-stack span:nth-child(4) { background: linear-gradient(135deg, #b49458, #4e6745); border-color: #dbc08a; }

.portfolio-contact { padding: 110px 0 120px; }
.portfolio-contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 80px; align-items: center; }
.portfolio-contact h2 { font-size: clamp(36px, 3.8vw, 54px); margin: 23px 0; }
.portfolio-contact p { max-width: 510px; color: #657367; font-size: 16px; line-height: 1.85; margin-bottom: 27px; }
.portfolio-contact-panel { padding: 33px; background: #eaf0e5; border: 1px solid #d5dfce; border-radius: 5px; min-width: 0; box-shadow: 0 5px 0 #d7e0d1; }
.portfolio-contact-panel h3 { font-size: 22px; margin-bottom: 24px; }
.portfolio-contact-group { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid #cbd8c4; }
.portfolio-contact-group + .portfolio-contact-group { margin-top: 23px; }
.portfolio-contact-group > span { font-size: 12px; font-weight: 800; color: #54705a; }
.portfolio-contact-group small { margin-top: 6px; font-size: 11px; color: #5b7161; }
.portfolio-contact-group a { width: fit-content; max-width: 100%; font-size: 16px; line-height: 1.6; color: #1d4c34; overflow-wrap: anywhere; }
.portfolio-contact-group a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1100px) {
  .client-grid { gap: 18px; }
  .client-card-copy { padding: 22px 20px; }
  .client-card h3 { font-size: 19px; }
  .client-logo-stage { height: 180px; padding: 22px; }
  .client-logo { max-height: 130px; }
  .client-logo-minedge { max-width: 130px; }
  .portfolio-hero .hero-main { grid-template-columns: 57% 43%; min-height: 650px; }
  .portfolio-hero h1 { font-size: clamp(43px, 5.3vw, 59px); }
  .portfolio-hero .hero-stage { height: 450px; }
  .portfolio-hero .hero-actions { gap: 10px; }
  .portfolio-hero .button { padding-inline: 15px; gap: 14px; }
  .portfolio-hero .hero-lead { font-size: 15px; }
  .project-entry { gap: 40px; }
  .copper-grid { gap: 45px; }
  .portfolio-contact-grid { gap: 45px; }
}
@media (max-width: 800px) {
  .client-grid { grid-template-columns: 1fr; gap: 26px; }
  .client-card-surface { display: grid; grid-template-columns: .8fr 1.2fr; }
  .client-logo-stage { height: auto; min-height: 210px; padding: 25px; border-radius: 8px 0 0 8px; }
  .client-logo { max-height: 150px; }
  .client-card-copy { border-top: 0; border-left: 1px solid #e4e8e0; border-radius: 0 8px 8px 0; padding: 26px; }
  .client-region, .client-card p { min-height: 0; }
  .client-card h3 { font-size: 21px; }
  .client-card p { margin-bottom: 20px; }
  .portfolio-hero .hero-main { grid-template-columns: 1fr; padding-top: 125px; }
  .portfolio-hero .hero-copy { padding-bottom: 0; }
  .portfolio-hero h1 { font-size: clamp(43px, 6.6vw, 65px); max-width: 650px; }
  .portfolio-hero .hero-stage { width: min(100%, 540px); height: 415px; margin: 10px auto 0; }
  .portfolio-hero .hero-lead { max-width: 580px; font-size: 16px; }
  .portfolio-hero-foot { flex-wrap: wrap; justify-content: flex-start; gap: 10px 24px; font-size: 9px; }
  .portfolio-clients .section-heading, .project-section .section-heading { display: block; }
  .portfolio-clients .section-heading > p, .project-section .section-heading > p { width: auto; margin: 22px 0 0; }
  .project-entry { grid-template-columns: 1fr; gap: 30px; }
  .project-facts { grid-template-columns: 1fr 1fr; gap: 18px 30px; }
  .copper-grid { grid-template-columns: 1fr; gap: 35px; }
  .mineral-stack { display: none; }
  .portfolio-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .client-preview, .portfolio-clients, .portfolio-contact { padding: 80px 0 85px; }
  .client-preview-intro { margin-top: 22px; }
  .client-preview-intro p { font-size: 15px; }
  .portfolio-hero .hero-stage { height: 380px; }
  .portfolio-hero .hero-eyebrow { font-size: 9px; letter-spacing: .12em; }
  .portfolio-hero .annotation-top { top: 36px; }
  .portfolio-hero .stage-coordinates { top: 80px; }
  .portfolio-hero .annotation-bottom, .portfolio-hero .drag-hint { bottom: 42px; }
  .project-section { padding: 0 0 80px; }
  .project-section .section-heading { margin-bottom: 36px; }
  .project-entry { padding-block: 38px; scroll-margin-top: 85px; }
  .project-description { font-size: 17px; }
  .project-work li { font-size: 15px; }
  .copper-project { padding: 80px 0; }
  .copper-scope { padding: 25px; }
  .portfolio-contact-panel { padding: 28px; }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .client-card-surface { display: block; }
  .client-logo-stage { height: 185px; min-height: 0; border-radius: 8px 8px 0 0; }
  .client-card-copy { border-left: 0; border-top: 1px solid #e4e8e0; border-radius: 0 0 8px 8px; }
  .portfolio-breadcrumb { margin-bottom: 29px; }
  .portfolio-hero .hero-main { padding-top: 112px; }
  .portfolio-hero h1 { font-size: 42px; }
  .portfolio-hero .hero-actions { max-width: 100%; flex-direction: column; align-items: stretch; }
  .portfolio-hero .hero-stage { height: 335px; }
  .portfolio-hero-foot { display: grid; gap: 10px; }
  .project-facts { grid-template-columns: 1fr; }
  .portfolio-contact-panel { padding: 24px; }
  .contact-methods > a { gap: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-card-surface { transform: none !important; transition: none; }
}