/* Local open-source fonts. Licences are in ../assets/fonts/. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/fonts-barlow-condensed-600.ttf') format('truetype'); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/fonts-barlow-400.ttf') format('truetype'); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/fonts-barlow-600.ttf') format('truetype'); }
/* EDIT BRAND COLOURS HERE. No framework or build tool is required. */
:root {
  --navy: #08264e;
  --blue: #006dff;
  --cyan: #46caff;
  --ink: #102f5c;
  --muted: #425b7e;
  --line: #d8e2ee;
  --paper: #ffffff;
  --heading-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body-font: Barlow, 'Segoe UI', Arial, sans-serif;
  --gutter: clamp(1.25rem, 4.4vw, 5.5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body-font); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, summary, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
::selection { background: var(--blue); color: white; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; padding: .8rem 1rem; background: white; z-index: 20; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 100px; padding: 12px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 2rem; background: white; position: relative; z-index: 5; }
.brand { flex-shrink: 0; }
.brand img { width: 105px; height: auto; }
.navigation { display: flex; align-items: center; gap: clamp(1.5rem, 2.7vw, 3rem); font-size: .9375rem; font-weight: 500; }
.navigation > a:not(.button) { position: relative; padding: .6rem 0; }
.navigation > a:not(.button)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 100%; height: 2px; background: var(--blue); transition: right .2s; }
.navigation > a:hover::after { right: 0; }
.navigation > a:hover { color: var(--blue); }
.navigation > .button:hover { color: white; }
.menu-toggle { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 2rem; min-height: 48px; padding: .85rem 1.5rem; font-size: .875rem; font-weight: 500; letter-spacing: .025em; transition: background .2s, color .2s, border-color .2s; }
.button > span { font-size: 1.4rem; line-height: 1; }
.button-navy { color: white; background: var(--navy); border: 1px solid var(--navy); }
.button-navy:hover { background: var(--blue); border-color: var(--blue); }
.button-outline { border: 1px solid rgba(255,255,255,.8); color: white; }
.button-outline:hover { color: var(--navy); background: white; }
.hero { background: var(--navy); color: white; }
.hero-stage { min-height: clamp(580px, 48vw, 760px); position: relative; isolation: isolate; overflow: hidden; }
.comparison-visual, .hero-image, .blueprint-layer, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center 15%; user-select: none; }
.blueprint-layer { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.hero-shade { background: linear-gradient(90deg, rgba(4,26,58,.98) 0%, rgba(4,26,58,.87) 24%, rgba(4,26,58,.45) 39%, rgba(4,26,58,0) 58%); }
.hero-copy { position: relative; z-index: 3; padding: clamp(4rem, 6.4vw, 7rem) 0 3rem var(--gutter); width: min(46%, 650px); pointer-events: none; }
.hero-copy .button { pointer-events: auto; }
.eyebrow { font-size: .8125rem; text-transform: uppercase; font-weight: 600; letter-spacing: .22em; line-height: 1.6; margin: 0 0 1.1rem; color: var(--blue); }
.hero-copy .eyebrow { color: var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--heading-font); font-weight: 600; }
h1 { text-transform: uppercase; font-size: clamp(3.5rem, 6.5vw, 6.7rem); line-height: 1.06; letter-spacing: -.018em; margin-bottom: 1.7rem; }
h1 span { color: #1685ff; }
.hero-description { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; margin-bottom: 2.5rem; }
.comparison-controls { position: absolute; inset: 0; z-index: 2; }
#reveal-slider { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; margin: 0; cursor: ew-resize; opacity: 0; z-index: 4; touch-action: pan-y; }
#reveal-slider::-webkit-slider-thumb { appearance: none; width: 44px; height: 100%; background: transparent; }
#reveal-slider::-moz-range-thumb { width: 44px; height: 44px; border: none; background: transparent; }
.divider { position: absolute; height: 100%; width: 2px; background: white; left: clamp(2px, var(--split), calc(100% - 2px)); top: 0; pointer-events: none; box-shadow: 0 0 14px #001a4a33; }
.drag-handle { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--navy); box-shadow: 0 4px 24px #071d4c26; transition: box-shadow .2s; }
.drag-handle svg { width: 30px; height: 22px; }
.drag-hint { position: absolute; left: 20px; top: calc(48% + 32px); white-space: nowrap; padding: 5px 12px; border-radius: 4px; border: 1px solid #ffffff66; background: #08264ee6; font-size: .8125rem; }
.hero-stage.is-dragging .drag-hint { opacity: 0; }
#reveal-slider:focus-visible + .divider .drag-handle { outline: 3px solid var(--cyan); outline-offset: 5px; }
.concept-label { position: absolute; right: 1.5rem; bottom: 1.3rem; font-size: .75rem; letter-spacing: .17em; text-transform: uppercase; background: #08264e80; padding: .25rem .5rem; }
.hero-foot { min-height: 62px; padding: 1rem var(--gutter); display: flex; align-items: center; gap: 2.3rem; border-top: 1px solid #ffffff1c; }
.hero-foot p { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.small-rule { width: 36px; height: 2px; background: #ffffffb3; }
.foot-separator { padding: 0 .7rem; color: #829bb8; }
.section-container { padding-left: var(--gutter); padding-right: var(--gutter); }
.expertise { padding-top: 3rem; padding-bottom: 4rem; }
.section-intro { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.section-intro .eyebrow { margin-bottom: .65rem; }
h2 { font-size: clamp(2.3rem, 4vw, 3.7rem); line-height: 1.13; letter-spacing: -.015em; margin-bottom: 0; }
.intro-description { color: var(--muted); margin: 0 0 .2rem; font-size: 1rem; }
.showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.3vw, 2.6rem); align-items: start; }
.showcase-card { scroll-margin-top: 2rem; min-width: 0; }
.showcase-card summary { list-style: none; cursor: pointer; }
.showcase-card summary::-webkit-details-marker { display: none; }
.card-number { font-weight: 600; color: #124d98; font-size: 1rem; }
h3 { margin: 0 0 .6rem; text-transform: uppercase; font-size: clamp(1.65rem, 2.3vw, 2.4rem); line-height: 1.15; }
.card-image { display: block; aspect-ratio: 1.3; overflow: hidden; background: #e4eaf1; margin-bottom: .8rem; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.project-image img { object-position: center 53%; transform: scale(1.65); }
.design-image img { object-position: 70% center; }
.showcase-card summary:hover .card-image img { transform: scale(1.035); }
.showcase-card summary:hover .project-image img { transform: scale(1.7); }
.card-caption { display: block; color: var(--muted); font-size: .875rem; min-height: 2.8em; line-height: 1.5; }
.card-action { display: flex; justify-content: space-between; align-items: center; color: var(--blue); }
.action-rule { width: 50px; height: 2px; background: var(--blue); transition: width .25s; }
.card-arrow { font-family: var(--body-font); font-size: 2rem; line-height: 1.1; transition: transform .25s; }
.showcase-card[open] .card-arrow { transform: rotate(-90deg); }
.showcase-card[open] .action-rule { width: 75px; }
.card-detail { padding-top: 1rem; margin-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; }
.card-detail p { margin-bottom: 1rem; }
.card-detail strong { color: var(--navy); }
.card-detail ul { padding-left: 1.2rem; margin: 0; }
.card-detail li { margin-bottom: .5rem; }
.contact { background: #f0f5fb; border-top: 1px solid var(--line); padding-top: 2.5rem; padding-bottom: 2rem; }
.contact-top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; }
.contact-top .eyebrow { margin-bottom: .7rem; }
.contact h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.contact-bottom { border-top: 1px solid var(--line); padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 2rem; color: var(--muted); font-size: .875rem; }
.contact-bottom strong { color: var(--navy); }
.contact-bottom p { margin: .3rem 0 0; }
address { font-style: normal; }
.contact-links { display: flex; flex-direction: column; align-items: flex-end; }
.contact-links a:hover { text-decoration: underline; }
@media (min-width: 1800px) { .hero-copy { width: 46%; max-width: 780px; } }
@media (max-width: 1020px) {
  .site-header { min-height: 90px; }
  .brand img { width: 90px; }
  .navigation { gap: 1.3rem; }
  .navigation .button { padding: .7rem 1rem; gap: 1rem; }
  .hero-copy { width: 51%; }
  .section-intro { align-items: start; }
  .intro-description { max-width: 270px; }
  .desktop-break { display: none; }
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.3rem 1.5rem; }
  h3 { font-size: 2rem; }
  .card-caption { min-height: 0; }
  .contact-bottom { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .site-header { min-height: 82px; padding-top: 10px; padding-bottom: 10px; }
  .brand img { width: 81px; }
  .menu-toggle { display: flex; gap: .8rem; align-items: center; background: white; color: var(--navy); border: 1px solid var(--line); padding: .65rem .9rem; font-size: .875rem; cursor: pointer; }
  .navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; padding: 1rem var(--gutter) 1.5rem; border-top: 1px solid var(--line); box-shadow: 0 12px 20px #08264e1a; }
  .navigation.is-open { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
  .hero-stage { height: auto; min-height: 0; padding-bottom: 330px; }
  .comparison-visual, .comparison-controls { top: auto; height: 330px; bottom: 0; }
  .hero-image { object-position: 62% center; }
  .hero-shade { background: linear-gradient(180deg, #08264e55, transparent 28%); }
  .hero-copy { position: relative; padding: 2rem var(--gutter); width: 100%; }
  .hero-copy .eyebrow { font-size: .75rem; margin-bottom: .9rem; }
  h1 { font-size: clamp(3.2rem, 12vw, 4.3rem); margin-bottom: 1rem; line-height: 1; }
  .hero-description { font-size: 1rem; line-height: 1.55; margin-bottom: 1.3rem; max-width: 420px; }
  .hero-copy .button { min-height: 46px; padding: .7rem 1rem; }
  .drag-handle { width: 48px; height: 48px; }
  .drag-hint { font-size: .75rem; left: 12px; top: calc(48% + 30px); }
  .concept-label { right: .75rem; bottom: .75rem; font-size: .75rem; }
  .hero-foot { flex-wrap: wrap; gap: .6rem; padding: 1rem var(--gutter); }
  .hero-foot p { font-size: .75rem; letter-spacing: .1em; }
  .hero-foot p:last-child { width: 100%; color: #b6c9e4; }
  .small-rule { display: none; }
  .section-intro { flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
  .intro-description { max-width: 100%; }
  .expertise { padding-top: 2rem; padding-bottom: 2.5rem; }
  h2 { font-size: 2.4rem; }
  .eyebrow { font-size: .75rem; letter-spacing: .15em; }
  .showcase-grid { gap: 2rem 1rem; }
  h3 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
  .card-image { aspect-ratio: 1; }
  .card-caption { min-height: 3em; }
  .card-detail { font-size: .9375rem; }
  .contact-top { align-items: start; flex-direction: column; gap: 1.3rem; }
  .contact-bottom { flex-direction: column; gap: 1rem; }
  .contact-links { align-items: start; }
}
@media (max-width: 360px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .hero-copy .button { gap: .75rem; font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* SHARED NAVIGATION & COMBINED CAPABILITIES / DESIGN PAGE */
.navigation [aria-current="page"] { color: var(--blue); }
.navigation [aria-current="page"]::after { right: 0 !important; }
.showcase-link { display: block; }
.showcase-link:hover .card-image img { transform: scale(1.035); }
.showcase-link .card-action { font-size: .875rem; font-weight: 600; min-height: 36px; }
.capability-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; align-items: center; background: var(--navy); color: white; padding-top: 2rem; padding-bottom: 4rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .8rem; color: #b8cbe4; font-size: .8125rem; margin-bottom: 3.4rem; }
.breadcrumb a:hover { color: white; text-decoration: underline; }
.capability-hero .eyebrow { color: var(--cyan); }
.capability-hero h1 { font-size: clamp(3rem, 5.6vw, 5.75rem); line-height: 1.02; text-transform: none; margin-bottom: 1.6rem; }
.capability-hero h1 span { color: #55b7ff; }
.capability-hero-copy > p:not(.eyebrow) { max-width: 510px; color: #cbd8ea; font-size: 1rem; }
.capability-hero-copy > .page-lead { font-size: 1.2rem !important; color: white !important; line-height: 1.6; }
.capability-hero .button { margin-top: 1rem; }
.capability-hero-visual { margin: 3rem 0 0; border: 1px solid #73adce40; }
.capability-hero-visual img { width: 100%; height: auto; aspect-ratio: 1.08; object-fit: cover; object-position: 70% center; }
.capability-hero-visual figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; font-size: .8125rem; color: #cfdfef; border-top: 1px solid #73adce40; }
.capability-hero-visual figcaption span { font-size: .75rem; color: #97b9d6; }
.services { padding-top: 5rem; padding-bottom: 5rem; }
.service-row { display: grid; grid-template-columns: .15fr .85fr 1fr; gap: 2rem; padding: 2.3rem 0; border-top: 1px solid var(--line); }
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-number { color: var(--blue); font-family: var(--heading-font); font-size: 1.8rem; line-height: 1.2; }
.service-kicker { font-size: .8125rem; color: var(--muted); margin-bottom: .7rem; }
.service-row h3 { text-transform: none; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.08; }
.service-description { color: var(--muted); max-width: 580px; }
.service-description p { margin-bottom: 1.2rem; }
.service-description ul { margin: 0; padding-left: 1.1rem; }
.service-description li { margin: .4rem 0; padding-left: .35rem; }
.service-description li::marker { color: var(--blue); }
.delivery { padding-top: 4rem; padding-bottom: 4rem; background: #edf4fc; }
.process-grid { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1.5rem; }
.process-grid li { border-top: 2px solid #9bbbe3; padding-top: 1rem; }
.process-grid li > span { color: var(--blue); font-size: .875rem; font-weight: 600; }
.process-grid h3 { font-size: 1.8rem; text-transform: none; margin: 1rem 0 .7rem; }
.process-grid p { color: var(--muted); font-size: .9375rem; margin: 0; }
.sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-top: 4rem; padding-bottom: 4rem; }
.sector-list { padding: 0; margin: 0; list-style: none; }
.sector-list li { border-bottom: 1px solid var(--line); padding: 1.05rem 0; font-size: 1.125rem; }
.sector-list li:first-child { border-top: 1px solid var(--line); }
@media (max-width: 1050px) {
  .navigation { gap: 1.1rem; font-size: .875rem; }
  .process-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; }
  .service-row { grid-template-columns: 40px 1fr 1.2fr; gap: 1.2rem; }
  .capability-hero { gap: 2rem; }
}
@media (max-width: 800px) {
  .navigation { gap: .8rem; font-size: .8125rem; }
  .capability-hero { grid-template-columns: 1fr; padding-bottom: 2rem; }
  .capability-hero h1 { font-size: clamp(3rem, 8vw, 4.6rem); }
  .capability-hero-visual { margin: 0; }
  .capability-hero-visual img { aspect-ratio: 1.7; }
  .breadcrumb { margin-bottom: 2rem; }
  .service-row { grid-template-columns: 40px 1fr; }
  .service-description { grid-column: 2; max-width: none; }
  .service-row h3 br { display: none; }
  .services { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (max-width: 700px) {
  .navigation { font-size: .9375rem; }
  .showcase-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .showcase-grid h3 { font-size: 2rem; }
  .showcase-grid .card-image { aspect-ratio: 1.6; }
  .card-caption { min-height: 0; margin-bottom: .75rem; }
  .capability-hero-visual figcaption { flex-direction: column; gap: .3rem; }
  .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 1rem; }
  .sectors { grid-template-columns: 1fr; gap: 2rem; }
  .delivery, .sectors { padding-top: 3rem; padding-bottom: 3rem; }
}

/* CONTACT: shared by the homepage and dedicated contact page. */
.contact-destination { padding-top: 5rem; padding-bottom: 5rem; background: #edf3f9; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.12fr; max-width: 1440px; margin: auto; gap: 1.5rem; }
.contact-panel { background: #fff; padding: clamp(1.7rem, 3.5vw, 3.5rem); border-radius: 18px; border: 1px solid #e0e8f1; }
.contact-panel h1, .contact-panel h2 { font-family: var(--heading-font); font-size: clamp(2.7rem, 4.2vw, 4.4rem); line-height: 1.02; text-transform: none; margin: 0 0 1.4rem; }
.contact-panel h1 span, .contact-panel h2 span { color: #0066dc; }
.contact-intro { color: var(--muted); max-width: 450px; margin: 0 0 1.9rem; line-height: 1.75; }
.contact-information { margin: 0; }
.contact-information > div { display: grid; grid-template-columns: 85px 1fr; gap: 1rem; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.contact-information dt { font-size: .7rem; letter-spacing: .1em; font-weight: 600; padding-top: .3rem; color: var(--muted); }
.contact-information dd { margin: 0; font-size: .95rem; line-height: 1.75; overflow-wrap: anywhere; }
.contact-information address { font-style: normal; }
.contact-information a { text-decoration: none; }
.contact-information a:hover, .contact-directions:hover { text-decoration: underline; }
.contact-actions { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.whatsapp-button { background: #087c47; color: white; border-radius: 6px; }
.whatsapp-button:hover { background: #056038; }
.contact-directions { font-weight: 600; font-size: .875rem; text-underline-offset: 5px; }
.contact-map { position: relative; min-height: 580px; border-radius: 18px; overflow: hidden; background: #dce6ee; border: 1px solid #d7e0ea; }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 580px; border: 0; }
.map-caption { position: absolute; pointer-events: none; bottom: 36px; left: 20px; right: 20px; display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: #ffffffed; border: 1px solid #fff; border-radius: 8px; box-shadow: 0 6px 25px #08264e15; }
.map-caption strong, .map-caption span:not(.location-dot) { display: block; }
.map-caption strong { font-size: .9rem; }
.map-caption span:not(.location-dot) { font-size: .75rem; color: var(--muted); margin-top: 3px; }
.location-dot { width: 10px; height: 10px; border-radius: 50%; background: #006dff; box-shadow: 0 0 0 5px #006dff15; flex-shrink: 0; }
.site-footer { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-top: 1.6rem; padding-bottom: 1.6rem; font-size: .8rem; }
.site-footer span { color: var(--muted); }
.site-footer a { margin-left: auto; }
.contact-page .contact-destination { padding-top: 3rem; padding-bottom: 3rem; }
@media (max-width: 900px) {
 .contact-layout { grid-template-columns: 1fr; }
 .contact-map, .contact-map iframe { min-height: 420px; }
 .contact-map iframe { height: 420px; }
 .contact-panel h1, .contact-panel h2 { font-size: 3.2rem; }
}
@media (max-width: 480px) {
 .contact-destination { padding-top: 3rem; padding-bottom: 3rem; }
 .contact-information > div { grid-template-columns: 1fr; gap: .35rem; }
 .contact-panel { padding: 1.5rem; }
 .contact-panel h1, .contact-panel h2 { font-size: 2.7rem; }
 .contact-actions { gap: 1.2rem; }
 .site-footer { gap: .6rem; }
 .site-footer strong { width: 100%; }
}
.navigation a.button[aria-current="page"] { color: white; }

/* Reference homepage: three editorial cards and stronger condensed typography. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/fonts-barlow-condensed-700.ttf') format('truetype'); }
.navigation { font-family: var(--body-font); font-weight: 600; font-size: .875rem; letter-spacing: .01em; }
.site-header { min-height: 80px; padding-top: 8px; padding-bottom: 8px; }
.brand img { width: 100px; }
.reference-home h1, .reference-home h2, .reference-home h3 { font-weight: 700; }
.reference-home .hero-copy h1 { font-size: clamp(3.7rem,7.2vw,7rem); line-height: .98; letter-spacing: -.025em; }
.reference-home .hero-stage { min-height: clamp(580px,48vw,760px); }
.reference-home .hero-copy { width: min(46%,650px); }
.reference-home .hero-foot { min-height: 48px; }
.reference-home .expertise h2 { font-size: clamp(2.7rem,4.8vw,4.5rem); }
.reference-home .showcase-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.3%; }
.reference-home .showcase-grid h3 { font-size: clamp(1.8rem,2.6vw,2.6rem); margin-bottom: .4rem; }
.reference-home .card-caption { font-size: .8125rem; min-height: 3em; }
.reference-card { aspect-ratio: 264 / 215; background-image: url('../assets/images/homepage-reference.png'); background-size: 475% 583.26%; background-repeat: no-repeat; }
.reference-capabilities { background-position: 5.45% 91.35%; }
.reference-projects { background-position: 35.05% 91.35%; }
.reference-technology { background-position: 64.85% 91.35%; }
.reference-design { background-position: 94.75% 91.35%; }
.showcase-note { margin: 1.5rem 0 0; color: var(--muted); font-size: .75rem; }
@media(max-width:1020px) { .reference-home .showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; } }
@media(max-width:700px) {
 .reference-home .hero-stage { min-height: 0; }
 .reference-home .hero-copy { width: 100%; }
 .reference-home .hero-copy h1 { font-size: clamp(3.5rem,13vw,5rem); }
 .reference-home .showcase-grid { grid-template-columns: 1fr; }
 .reference-home .reference-card { aspect-ratio: 264 / 215; }
 .brand img { width: 81px; }
}

/* Expandable Capabilities & Design preview. */
.preview-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.2rem 0; }
.preview-gallery figure { margin: 0; min-width: 0; }
.preview-gallery img { width: 100%; height: auto; aspect-ratio: 1.15; object-fit: cover; border-radius: 3px; }
.preview-gallery figcaption { font-size: .875rem; color: var(--navy); line-height: 1.4; margin-top: .55rem; }
.preview-gallery small { display: block; color: var(--muted); font-size: .75rem; }
.preview-more { margin-top: .3rem; }
/* Project photography uses profile images, framed to focus on the actual work. */
.project-photo { width:100%; aspect-ratio:1.5; background-repeat:no-repeat; background-size:100% auto; background-color:#eaf1f8; }
.photo-elmina { background-image:url('../assets/images/elmina-bridge.jpg'); background-position:center 54%; }
.photo-westport { background-image:url('../assets/images/westport.jpg'); background-position:center 80%; }
.photo-lrt3 { background-image:url('../assets/images/lrt3.jpg'); background-position:center 50%; }
.preview-gallery .project-photo { aspect-ratio:1.15; background-size:140% auto; border-radius:3px; }
.collection-intro { background:var(--navy); color:white; padding-top:2.5rem; padding-bottom:3.5rem; }
.collection-intro .breadcrumb { margin-bottom:2rem; }
.collection-intro h1 { text-transform:none; font-weight:700; font-size:clamp(3rem,6vw,6rem); }
.collection-intro > p:last-child { max-width:650px; font-size:1.2rem; color:#d2e1f2; margin-bottom:0; }
.project-collection { padding-top:4rem; padding-bottom:2rem; }
.project-feature { display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center; margin-bottom:4rem; }
.project-feature:nth-child(even) .project-photo { order:2; }
.project-copy h2 { margin-bottom:1.2rem; }
.project-copy > p:not(.eyebrow) { color:var(--muted); font-size:1.1rem; }
.project-scope { border-top:1px solid var(--line); padding-top:1rem; font-size:.9rem!important; }
.collection-cta { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-top:3rem; padding-bottom:3rem; background:#edf3f9; }
.technology-collection { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; padding-top:4rem; padding-bottom:4rem; }
.technology-feature { border:1px solid var(--line); }
.technology-feature > img { width:100%; aspect-ratio:1.65; object-fit:cover; }
.technology-feature > div { padding:2rem; }
.technology-feature h2 { margin-bottom:1rem; }
.technology-feature p:last-child { color:var(--muted); margin-bottom:0; }
.collection-page .process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:700px) {
 .project-feature,.technology-collection { grid-template-columns:1fr; gap:1.5rem; }
 .project-feature:nth-child(even) .project-photo { order:0; }
 .collection-cta { align-items:flex-start; flex-direction:column; }
 .collection-page .process-grid { grid-template-columns:1fr; }
}
.collection-intro .eyebrow { color: var(--cyan); }

/* The preview is a sibling of the three cards, spanning the complete grid. */
.showcase-toggle { display:block; width:100%; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
.showcase-toggle h3 { font-family:var(--heading-font); }
.showcase-toggle[aria-expanded="true"] .card-arrow { transform:rotate(-90deg); }
.showcase-toggle[aria-expanded="true"] .action-rule { width:75px; }
.showcase-panel { grid-column:1 / -1; margin-top:1.5rem; padding:2rem; background:#edf3f9; border-top:2px solid var(--blue); }
.showcase-panel[hidden] { display:none; }
.showcase-panel .preview-gallery { gap:1.5rem; margin:1.5rem 0; }
.showcase-panel .preview-gallery img,.showcase-panel .preview-gallery .project-photo { aspect-ratio:1.8; }
.showcase-panel .preview-gallery .project-photo { background-size:100% auto; }
.showcase-panel > p { max-width:700px; }
.showcase-panel > ul { display:flex; flex-wrap:wrap; gap:.5rem 2rem; }
.showcase-panel figcaption { font-size:1.1rem; font-weight:600; }
.reference-home .showcase-grid { row-gap:1rem; }
@media(max-width:700px) {
 .showcase-panel { padding:1.2rem; }
 .showcase-panel .preview-gallery { grid-template-columns:1fr; }
}

/* Immersive editorial direction: steel, scale and technical drawing. */
.showcase-toggle { transition:opacity .25s,transform .25s; }
.showcase-toggle:hover { transform:translateY(-5px); }
.showcase-grid:has(.showcase-toggle[aria-expanded="true"]) .showcase-toggle[aria-expanded="false"] { opacity:.6; }
.showcase-grid .showcase-toggle:hover { opacity:1!important; }
.immersive-panel { background:#061c36; color:#fff; margin:2rem 0 0; padding:2rem clamp(1.25rem,3vw,3rem); border:1px solid #416384; position:relative; overflow:hidden; }
.immersive-panel::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(#88bddd09 1px,transparent 1px),linear-gradient(90deg,#88bddd09 1px,transparent 1px); background-size:48px 48px; }
.immersive-panel > * { position:relative; }
.preview-topline { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#90abc5; font-size:.7rem; letter-spacing:.17em; padding-bottom:1.2rem; border-bottom:1px solid #ffffff26; }
.preview-close { background:none; border:1px solid #ffffff40; color:white; padding:.5rem .8rem; cursor:pointer; font-size:.85rem; }
.preview-close:hover { background:#fff; color:#08264e; }
.preview-editorial { display:grid; grid-template-columns:1.4fr 1fr; align-items:end; gap:3rem; padding:2.7rem 0 2rem; }
.preview-editorial .eyebrow { color:#67d7ff; font-size:.7rem; letter-spacing:.16em; }
.reference-home .showcase-grid .preview-editorial h3 { color:white; text-transform:none; font-size:clamp(2.7rem,4.7vw,5rem); line-height:1.02; margin:0; }
.preview-editorial h3 em { font-style:normal; color:#59bcff; }
.preview-lead { max-width:320px; justify-self:end; }
.preview-lead p { color:#b7cde2; font-size:1.1rem; line-height:1.55; }
.editorial-link { display:flex; align-items:center; justify-content:space-between; gap:2rem; color:white; padding:1rem 0; border-bottom:1px solid #6ad6ff; font-size:1rem; }
.editorial-link span { color:#6ad6ff; font-size:1.8rem; transition:transform .2s; }
.editorial-link:hover span { transform:translate(3px,-3px); }
.immersive-panel .preview-gallery { grid-template-columns:1.2fr 1fr; gap:1.2rem; margin:0 0 1.5rem; align-items:start; }
.immersive-panel .preview-gallery figure { position:relative; overflow:hidden; background:#0e3455; }
.immersive-panel .preview-gallery figure:nth-child(2) { margin-top:3rem; }
.immersive-panel .preview-gallery img,.immersive-panel .preview-gallery .project-photo { aspect-ratio:1.45; border-radius:0; transition:transform .7s; }
.immersive-panel .preview-gallery figure:hover img { transform:scale(1.04); }
.immersive-panel .preview-gallery figcaption { padding:1rem 1.2rem; color:#fff; margin:0; border-top:1px solid #ffffff20; font-family:var(--heading-font); font-size:1.5rem; font-weight:600; }
.immersive-panel .preview-gallery small { color:#97b5cf; font-family:var(--body-font); font-size:.75rem; }
.preview-baseline { display:flex; justify-content:space-between; border-top:1px solid #ffffff26; padding-top:1.2rem; color:#90abc5; font-size:.65rem; letter-spacing:.16em; }
.immersive-panel:not([hidden]) { animation:panel-reveal .5s ease both; }
@keyframes panel-reveal { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
/* Image-led inner pages. */
.collection-intro { position:relative; isolation:isolate; min-height:610px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.collection-intro::before { content:''; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.collection-intro::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#03162af5 0%,#03162ac9 42%,#03162a30 100%); }
.projects-page .collection-intro::before { background-image:url('../assets/images/elmina-bridge.jpg'); background-position:center 53%; background-size:100% auto; }
.technology-page .collection-intro::before { background-image:url('../assets/images/robotic-welding.jpg'); background-position:right center; }
.collection-intro h1 { font-size:clamp(3.8rem,7vw,7.5rem); line-height:1; max-width:850px; }
.collection-intro .breadcrumb { margin-bottom:3rem; }
.collection-intro > p:last-child { max-width:520px; }
.project-collection { background:#061c36; padding-top:5rem; padding-bottom:2rem; }
.project-feature { grid-template-columns:1.4fr 1fr; gap:0; margin-bottom:5rem; }
.project-feature .project-photo { aspect-ratio:1.15; }
.project-copy { background:#0c2c4c; padding:2.5rem; margin-left:-2.5rem; position:relative; border-top:2px solid #46caff; color:#fff; }
.project-copy h2 { font-size:clamp(2.4rem,3.8vw,4rem); line-height:1; }
.project-copy .eyebrow { color:#67d7ff; font-size:.75rem; }
.project-copy > p:not(.eyebrow) { color:#c1d3e5; }
.project-copy .project-scope { border-color:#ffffff30; }
.project-feature:nth-child(even) { grid-template-columns:1fr 1.4fr; }
.project-feature:nth-child(even) .project-copy { margin-left:0; margin-right:-2.5rem; z-index:1; }
.technology-collection { background:#061c36; gap:2rem; }
.technology-feature { border:1px solid #284967; background:#0b2946; color:#fff; }
.technology-feature:nth-child(2) { margin-top:4rem; }
.technology-feature .eyebrow { color:#67d7ff; }
.technology-feature p:last-child { color:#c1d3e5; }
.technology-feature h2 { font-size:3rem; }
.capabilities-page .capability-hero { position:relative; isolation:isolate; min-height:650px; background:#061c36; }
.capabilities-page .capability-hero::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#061c36 10%,#061c3680),url('../assets/images/portal-blueprint.png') center/cover; opacity:.65; }
.capabilities-page .capability-hero h1 { font-weight:700; font-size:clamp(3.8rem,6vw,6.5rem); }
.capabilities-page .capability-hero-visual { transform:rotate(-3deg); box-shadow:20px 24px 0 #46caff12; }
.capabilities-page .services { background:#061c36; color:white; }
.capabilities-page .services .intro-description,.capabilities-page .service-description { color:#b7cde2; }
.capabilities-page .service-row { border-color:#ffffff26; padding:2.5rem 0; }
.capabilities-page .service-number { color:#67d7ff; font-size:3rem; }
.capabilities-page .service-kicker { color:#8eaac3; }
.capabilities-page .services .eyebrow { color:#67d7ff; }
@media(max-width:800px) {
 .preview-editorial { grid-template-columns:1fr; gap:1.5rem; }
 .preview-lead { justify-self:start; max-width:none; width:100%; }
 .immersive-panel .preview-gallery { grid-template-columns:1fr 1fr; }
 .project-feature,.project-feature:nth-child(even) { grid-template-columns:1fr; }
 .project-feature:nth-child(even) .project-photo { order:0; }
 .project-copy,.project-feature:nth-child(even) .project-copy { margin:-2rem 1rem 0; padding:1.5rem; }
 .capabilities-page .capability-hero-visual { transform:none; box-shadow:none; }
}
@media(max-width:550px) {
 .preview-topline > span:nth-child(2) { display:none; }
 .immersive-panel .preview-gallery { grid-template-columns:1fr; }
 .immersive-panel .preview-gallery figure:nth-child(2) { margin-top:0; }
 .preview-baseline { font-size:.55rem; gap:1rem; }
 .collection-intro { min-height:550px; }
 .projects-page .collection-intro::before { background-size:auto 130%; }
 .collection-intro h1 { font-size:3.7rem; }
 .technology-feature:nth-child(2) { margin-top:0; }
 .project-collection { padding-top:3rem; }
 .project-feature { margin-bottom:3rem; }
}
@media(prefers-reduced-motion:reduce) { .immersive-panel:not([hidden]) { animation:none; } .showcase-toggle,.editorial-link span,.immersive-panel .preview-gallery img { transition:none; } }
.immersive-panel .preview-gallery .photo-elmina { background-size:130% auto; background-position:center 53%; }
.immersive-panel .preview-gallery .photo-westport { background-size:145% auto; background-position:center 76%; }
.showcase-grid:has(.showcase-toggle[aria-expanded="true"]) .showcase-toggle[aria-expanded="false"] { opacity:.78; }

/* Clean editorial direction: white space, steel-blue accents and large imagery. */
.immersive-panel { background:#fff; color:var(--navy); border:0; border-top:1px solid var(--line); padding:2rem 0 0; margin-top:2rem; overflow:visible; }
.immersive-panel::before { display:none; }
.preview-topline { color:var(--muted); border:0; padding-bottom:.5rem; }
.preview-topline > span:nth-child(2) { display:none; }
.preview-close { color:var(--navy); border:1px solid var(--line); border-radius:50px; padding:.5rem 1rem; }
.preview-close:hover { background:var(--navy); color:white; }
.preview-editorial { padding:1.6rem 0 2rem; gap:2rem; }
.preview-editorial .eyebrow { color:var(--blue); }
.reference-home .showcase-grid .preview-editorial h3 { color:var(--navy); font-size:clamp(2.6rem,4.8vw,4.6rem); }
.preview-editorial h3 em { color:var(--blue); }
.preview-lead p { color:var(--muted); }
.editorial-link { color:var(--navy); border-bottom:1px solid var(--navy); font-weight:600; }
.editorial-link span { color:var(--blue); }
.immersive-panel .preview-gallery { grid-template-columns:1.3fr 1fr; gap:2rem; }
.immersive-panel .preview-gallery figure { background:transparent; }
.immersive-panel .preview-gallery figure:nth-child(2) { margin-top:0; }
.immersive-panel .preview-gallery img,.immersive-panel .preview-gallery .project-photo { aspect-ratio:1.5; }
.immersive-panel .preview-gallery figcaption { color:var(--navy); padding:1rem 0; border:0; font-size:1.6rem; }
.immersive-panel .preview-gallery small { color:var(--muted); }
.preview-baseline { color:var(--muted); border-color:var(--line); padding-bottom:1rem; }
.showcase-grid:has(.showcase-toggle[aria-expanded="true"]) .showcase-toggle[aria-expanded="false"] { opacity:1; }
.showcase-toggle[aria-expanded="true"] .action-rule { width:100px; }
/* Inner pages follow the homepage's white canvas. */
.collection-intro { background:white; color:var(--navy); min-height:480px; padding-top:3rem; padding-bottom:3rem; }
.collection-intro::before,.collection-intro::after { display:none; }
.collection-intro h1 { font-size:clamp(3.8rem,7vw,7rem); letter-spacing:-.025em; }
.collection-intro .eyebrow { color:var(--blue); }
.collection-intro > p:last-child { color:var(--muted); max-width:620px; }
.collection-intro .breadcrumb { color:var(--muted); }
.project-collection { background:white; padding-top:1rem; }
.project-feature { grid-template-columns:1.45fr 1fr; gap:3rem; margin-bottom:5rem; }
.project-feature .project-photo { aspect-ratio:1.4; }
.project-copy { background:none; padding:0; margin:0; border:0; color:var(--navy); }
.project-copy .eyebrow { color:var(--blue); }
.project-copy > p:not(.eyebrow) { color:var(--muted); }
.project-copy .project-scope { border-color:var(--line); }
.project-feature:nth-child(even) { grid-template-columns:1fr 1.45fr; }
.project-feature:nth-child(even) .project-copy { margin:0; }
.technology-collection { background:white; padding-top:1rem; gap:3rem; }
.technology-feature { border:0; background:white; color:var(--navy); }
.technology-feature:nth-child(2) { margin-top:0; }
.technology-feature > div { padding:1.5rem 0; }
.technology-feature .eyebrow { color:var(--blue); }
.technology-feature p:last-child { color:var(--muted); }
.capabilities-page .capability-hero { background:white; color:var(--navy); min-height:580px; }
.capabilities-page .capability-hero::before { display:none; }
.capabilities-page .capability-hero .eyebrow { color:var(--blue); }
.capabilities-page .capability-hero-copy > p:not(.eyebrow),.capabilities-page .capability-hero-copy > .page-lead { color:var(--muted)!important; }
.capabilities-page .capability-hero .button-outline { color:var(--navy); border-color:var(--navy); }
.capabilities-page .capability-hero .button-outline:hover { background:var(--navy); color:white; }
.capabilities-page .capability-hero-visual { transform:none; box-shadow:none; border:0; }
.capabilities-page .capability-hero-visual figcaption { color:var(--navy); border:0; padding:1rem 0; }
.capabilities-page .capability-hero-visual figcaption span { color:var(--muted); }
.capabilities-page .services { background:white; color:var(--navy); border-top:1px solid var(--line); }
.capabilities-page .services .intro-description,.capabilities-page .service-description { color:var(--muted); }
.capabilities-page .service-row { border-color:var(--line); }
.capabilities-page .service-number,.capabilities-page .services .eyebrow { color:var(--blue); }
.capabilities-page .service-kicker { color:var(--muted); }
@media(max-width:800px) {
 .project-feature,.project-feature:nth-child(even) { grid-template-columns:1fr; gap:1.5rem; }
 .project-copy,.project-feature:nth-child(even) .project-copy { margin:0; padding:0; }
 .immersive-panel .preview-gallery { gap:1rem; }
}
@media(max-width:550px) {
 .immersive-panel .preview-gallery { grid-template-columns:1fr; }
 .collection-intro { min-height:0; }
 .collection-intro h1 { font-size:3.6rem; }
}

/* Architectural portfolio: one curated stage instead of expanding cards. */
.studio-showcase { padding:5rem var(--gutter) 2rem; background:#f8f9fb; }
.studio-intro { display:grid; grid-template-columns:1fr auto; align-items:end; gap:1rem 3rem; margin-bottom:3rem; }
.studio-intro .eyebrow { grid-column:1/-1; margin:0; font-size:.72rem; }
.studio-intro h2 { font-size:clamp(3rem,5.6vw,6rem); line-height:.96; font-weight:700; letter-spacing:-.025em; }
.studio-intro h2 span { color:#93a4b8; }
.studio-intro > p:last-child { color:var(--muted); margin:0; }
.studio-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:3rem; }
.studio-menu { display:flex; flex-direction:column; align-self:start; }
.studio-menu > button { text-align:left; color:#6b7b90; background:transparent; border:0; border-top:1px solid #ccd5df; padding:1.3rem 2rem 1.3rem 0; position:relative; cursor:pointer; transition:color .25s; }
.studio-menu > button small { display:block; font-size:.65rem; letter-spacing:.14em; margin-bottom:.7rem; }
.studio-menu > button > span { display:block; font-family:var(--heading-font); font-weight:600; font-size:2.4rem; line-height:.95; }
.studio-menu > button b { position:absolute; right:0; top:2.5rem; font-size:1.5rem; font-weight:400; }
.studio-menu > button[aria-selected="true"] { color:var(--blue); border-top:2px solid var(--blue); }
.studio-menu > button:hover { color:var(--navy); }
.studio-signature { margin-top:3rem; font-size:.65rem; letter-spacing:.1em; line-height:1.8; color:#7d8da0; }
.studio-signature span { display:block; margin-top:1rem; font-size:.6rem; }
.studio-panel { min-width:0; }
.studio-panel[hidden] { display:none; }
.studio-screen { position:relative; min-height:490px; aspect-ratio:1.55; background-color:#123755; background-repeat:no-repeat; background-size:cover; overflow:hidden; color:white; isolation:isolate; }
.studio-screen::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#03172d44,transparent 35%,#03172dbb); }
.visual-blueprint { background-image:url('../assets/images/portal-blueprint.png'); background-position:center; }
.visual-cutting { background-image:url('../assets/images/cnc-cutting.jpg'); background-position:center; }
.visual-welding { background-image:url('../assets/images/robotic-welding.jpg'); background-position:center; }
.visual-elmina { background-image:url('../assets/images/elmina-bridge.jpg'); background-size:125% auto; background-position:center 53%; }
.visual-westport { background-image:url('../assets/images/westport.jpg'); background-size:140% auto; background-position:center 76%; }
.screen-top { position:absolute; top:1.5rem; left:1.7rem; right:1.7rem; display:flex; justify-content:space-between; gap:1rem; font-size:.6rem; letter-spacing:.16em; }
.studio-screen h3 { position:absolute; bottom:2rem; left:2rem; margin:0; text-transform:none; font-size:clamp(3.2rem,5.5vw,6rem); font-weight:700; line-height:.94; letter-spacing:-.02em; max-width:90%; text-shadow:0 2px 25px #03172d33; }
.screen-tag { position:absolute; right:1rem; bottom:1rem; font-size:.5rem; letter-spacing:.15em; }
.studio-caption { display:grid; grid-template-columns:1fr auto; gap:2rem; padding:1.5rem 0; border-bottom:1px solid #ccd5df; }
.studio-caption h4 { font-family:var(--heading-font); font-size:1.8rem; margin:0 0 .3rem; font-weight:600; }
.studio-caption p { color:var(--muted); font-size:.95rem; max-width:440px; margin:0; }
.studio-caption > a { align-self:center; font-size:.85rem; font-weight:600; display:flex; gap:1.5rem; align-items:center; }
.studio-caption > a span { display:grid; place-items:center; width:46px; height:46px; border:1px solid #bac7d6; border-radius:50%; color:var(--blue); font-size:1.5rem; transition:background .2s,color .2s; }
.studio-caption > a:hover span { background:var(--blue); color:#fff; border-color:var(--blue); }
.studio-filmstrip { display:flex; gap:1.5rem; padding-top:1rem; }
.film-frame { display:flex; flex:1; gap:.9rem; align-items:center; text-align:left; padding:.5rem 0; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; }
.frame-photo { width:76px; height:54px; flex-shrink:0; background-color:#0b2946; background-size:cover; }
.frame-photo.visual-elmina { background-size:125% auto; }
.frame-photo.visual-westport { background-size:140% auto; }
.film-frame > span:last-child { font-size:.9rem; }
.film-frame small { display:block; font-size:.6rem; letter-spacing:.1em; }
.film-frame[aria-pressed="true"] { border-color:var(--blue); color:var(--navy); }
.studio-end { margin-top:3rem; padding-top:1rem; border-top:1px solid #ccd5df; display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:.15em; color:#7d8da0; }
.studio-panel:not([hidden]) .studio-screen { animation:gallery-in .55s ease both; }
@keyframes gallery-in { from { opacity:.25; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
/* Projects become a photographic sequence, with captions on the image. */
.projects-page .collection-intro { min-height:0; padding-top:3rem; padding-bottom:3rem; display:grid; grid-template-columns:1fr 1fr; align-items:end; }
.projects-page .collection-intro .breadcrumb,.projects-page .collection-intro .eyebrow { grid-column:1/-1; }
.projects-page .collection-intro h1 { font-size:clamp(4rem,7.8vw,8rem); margin:0; }
.projects-page .collection-intro > p:last-child { padding-left:3rem; max-width:500px; font-size:1.1rem; }
.projects-page .project-collection { padding-top:1rem; }
.projects-page .project-feature,.projects-page .project-feature:nth-child(even) { display:block; position:relative; min-height:630px; margin:0 0 2rem; overflow:hidden; }
.projects-page .project-feature .project-photo { position:absolute; inset:0; height:100%; aspect-ratio:auto; background-size:125% auto; }
.projects-page .project-feature .photo-westport { background-size:145% auto; background-position:center 76%; }
.projects-page .project-feature .photo-lrt3 { background-position:center 51%; }
.projects-page .project-copy,.projects-page .project-feature:nth-child(even) .project-copy { position:absolute; bottom:0; left:0; right:0; padding:7rem 3rem 2.5rem; margin:0; background:linear-gradient(transparent,#03172df2); color:#fff; }
.projects-page .project-copy h2 { font-size:clamp(3rem,5vw,5rem); max-width:700px; }
.projects-page .project-copy > p:not(.eyebrow) { color:#d5e2ee; max-width:640px; }
.projects-page .project-copy .eyebrow { color:#7fd7ff; }
.projects-page .project-scope { display:none; }
/* Technology: large alternating image and typography, no card grid. */
.technology-collection { display:block; }
.technology-feature { display:grid; grid-template-columns:1.25fr 1fr; align-items:center; gap:4rem; margin-bottom:4rem; }
.technology-feature:nth-child(2) { grid-template-columns:1fr 1.25fr; }
.technology-feature:nth-child(2) > img { order:2; }
.technology-feature > img { aspect-ratio:1.15; }
.technology-feature h2 { font-size:clamp(3.5rem,6vw,6rem); line-height:.95; }
.technology-feature > div { border-top:1px solid var(--line); padding-top:2rem; }
.technology-page .collection-intro h1 { font-size:clamp(4rem,7vw,7rem); }
/* Capabilities: full-bleed concept image and an oversized process index. */
.capabilities-page .capability-hero { grid-template-columns:1fr 1.1fr; gap:4rem; }
.capabilities-page .capability-hero-visual img { aspect-ratio:.95; }
.capabilities-page .service-row { grid-template-columns:90px 1fr 1fr; gap:2rem; padding:3rem 0; }
.capabilities-page .service-number { font-size:5rem; line-height:1; color:#b7c6d8; }
.capabilities-page .service-row h3 { font-size:clamp(2.5rem,4vw,4rem); }
@media(max-width:1000px) {
 .studio-layout { grid-template-columns:180px minmax(0,1fr); gap:1.5rem; }
 .studio-screen { min-height:420px; }
 .studio-caption { grid-template-columns:1fr; gap:1rem; }
 .studio-caption > a { justify-self:start; }
 .capabilities-page .capability-hero { gap:2rem; }
}
@media(max-width:700px) {
 .studio-showcase { padding-top:3rem; }
 .studio-intro { grid-template-columns:1fr; gap:1.2rem; }
 .studio-intro h2 { font-size:3.5rem; }
 .studio-layout { grid-template-columns:1fr; }
 .studio-menu { flex-direction:row; gap:.8rem; }
 .studio-menu > button { flex:1; padding:.8rem 0; }
 .studio-menu > button > span { font-size:1.4rem; }
 .studio-menu > button small { font-size:.5rem; }
 .studio-menu > button b,.studio-signature { display:none; }
 .studio-screen { min-height:380px; aspect-ratio:.95; }
 .studio-screen h3 { font-size:3.4rem; left:1.2rem; }
 .studio-screen.visual-elmina { background-size:auto 190%; }
 .studio-screen.visual-westport { background-size:auto 220%; }
 .studio-filmstrip { gap:1rem; }
 .frame-photo { width:50px; height:42px; }
 .film-frame { gap:.5rem; }
 .film-frame > span:last-child { font-size:.8rem; }
 .studio-end { gap:1rem; font-size:.5rem; }
 .projects-page .collection-intro { display:block; }
 .projects-page .collection-intro > p:last-child { padding:1.5rem 0 0; }
 .projects-page .project-feature,.projects-page .project-feature:nth-child(even) { min-height:570px; }
 .projects-page .project-feature .project-photo { background-size:auto 180%; }
 .projects-page .project-feature .photo-westport { background-size:auto 220%; }
 .projects-page .project-copy,.projects-page .project-feature:nth-child(even) .project-copy { padding:5rem 1.3rem 1.5rem; }
 .technology-feature,.technology-feature:nth-child(2) { grid-template-columns:1fr; gap:1rem; }
 .technology-feature:nth-child(2) > img { order:0; }
 .capabilities-page .capability-hero { grid-template-columns:1fr; }
 .capabilities-page .service-row { grid-template-columns:48px 1fr; gap:1rem; }
 .capabilities-page .service-number { font-size:3rem; }
}
@media(prefers-reduced-motion:reduce) { .studio-panel:not([hidden]) .studio-screen { animation:none; } }
.studio-intro h2 span { color:#657b94; }

/* Soft architectural texture behind the portfolio gallery. */
.studio-showcase {
 position:relative; isolation:isolate;
 background-color:#edf2f7;
 background-image:radial-gradient(ellipse at 95% 22%,#bddbff70 0%,transparent 48%),radial-gradient(ellipse at 0% 90%,#d1deeb80 0%,transparent 48%),linear-gradient(135deg,#f8fafc 0%,#edf2f7 60%,#e4edf7 100%);
}
.studio-showcase::before {
 content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
 background:repeating-linear-gradient(125deg,transparent 0px,transparent 159px,#6084a90b 160px,#6084a90b 161px,transparent 162px,transparent 320px);
}
.studio-showcase::after {
 content:''; position:absolute; width:38%; height:62%; top:8%; right:0; z-index:-1; pointer-events:none;
 border-top:1px solid #7f9fbd25; border-left:1px solid #7f9fbd25; transform:skewY(-12deg);
}
.studio-screen { box-shadow:0 18px 45px -22px #193f6855; }
.studio-filmstrip { border-bottom:1px solid #b7c9dc55; padding-bottom:.5rem; }

/* Architectural backdrop: visible structure and scale behind the gallery. */
.studio-showcase {
 background-color:#dce6ef;
 background-image:linear-gradient(110deg,#f2f5f8 0%,#e5edf4 38%,#c9dced 100%);
 overflow:hidden;
}
.studio-showcase::before {
 inset:0; opacity:.16;
 background-image:url('../assets/images/portal-blueprint.png');
 background-repeat:no-repeat; background-size:auto 110%; background-position:72% center;
 mix-blend-mode:multiply;
 mask-image:linear-gradient(90deg,transparent 0%,#000 35%,#000 85%,transparent 100%);
}
.studio-showcase::after {
 content:'02'; top:-3rem; right:1%; width:auto; height:auto;
 font-family:var(--heading-font); font-weight:700; font-size:clamp(16rem,32vw,38rem);
 line-height:1; letter-spacing:-.06em; color:#4a78a41a;
 border:0; transform:none;
}
.studio-intro { position:relative; padding-bottom:2rem; border-bottom:1px solid #8ba5be70; }
.studio-menu { padding:1.5rem; background:#f5f8fbba; border:1px solid #ffffffb3; backdrop-filter:blur(12px); }
.studio-layout { gap:2rem; }
.studio-menu > button:first-child { border-top:0; }
.studio-menu > button[aria-selected="true"] { color:#0061d1; }
.studio-screen { border:6px solid #ffffffc9; box-shadow:0 24px 50px -20px #193f6866; }
.studio-caption { padding:1.5rem; background:#f8fbfdd9; border:1px solid #ffffffa6; border-top:0; }
.studio-filmstrip { padding:1rem 1.5rem; background:#eaf1f7b8; }
.studio-end { border-color:#8ba5be70; color:#425c76; }
@media(max-width:700px) {
 .studio-menu { padding:.8rem; }
 .studio-showcase::after { font-size:18rem; top:1rem; right:-1rem; }
 .studio-showcase::before { background-size:auto 85%; opacity:.12; }
 .studio-caption { padding:1.2rem; }
 .studio-filmstrip { padding:.7rem; }
 .studio-screen { border-width:4px; }
}

.visual-elmina,.frame-photo.visual-elmina { background-image:url("../assets/images/projects-elmina-01.png"); background-size:cover!important; background-position:center; }
.visual-westport,.frame-photo.visual-westport { background-image:url("../assets/images/reefer-gantry-enhanced.png"); background-size:cover!important; background-position:center; }

/* User-supplied project archive. */
.portfolio-library { padding-top:2rem; padding-bottom:4rem; }
.portfolio-library-head { display:flex; justify-content:space-between; gap:2rem; border-top:1px solid var(--line); padding-top:2rem; }
.portfolio-library-head > p:last-child { color:var(--muted); }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.portfolio-filters button { padding:.65rem 1rem; border:1px solid #ccd7e4; background:white; color:var(--navy); cursor:pointer; border-radius:2px; }
.portfolio-filters button[aria-pressed="true"] { background:var(--navy); color:white; border-color:var(--navy); }
.portfolio-count { font-size:.8rem; color:var(--muted); }
.portfolio-index { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 2rem; align-items:start; }
.portfolio-entry[hidden] { display:none; }
.portfolio-entry summary { list-style:none; cursor:pointer; }
.portfolio-entry summary::-webkit-details-marker { display:none; }
.portfolio-cover { position:relative; overflow:hidden; background:#e7eef6; }
.portfolio-cover img { width:100%; aspect-ratio:1.5; object-fit:cover; transition:transform .4s; }
.portfolio-entry summary:hover img { transform:scale(1.025); }
.portfolio-cover > span { position:absolute; bottom:1rem; right:1rem; background:#fff; color:var(--navy); padding:.35rem .6rem; font-size:.65rem; letter-spacing:.1em; }
.portfolio-entry-label { position:relative; padding:1.2rem 2rem 1.2rem 0; border-bottom:1px solid var(--line); }
.portfolio-entry-label small { color:var(--blue); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-entry-label h2 { font-size:2rem; margin-top:.5rem; }
.portfolio-expand { position:absolute; right:0; top:1.8rem; color:var(--blue); font-size:1.7rem; }
.portfolio-entry[open] .portfolio-expand { transform:rotate(45deg); }
.portfolio-entry-content { padding-top:1.5rem; }
.portfolio-entry-content > p { color:var(--muted); }
.portfolio-photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.project-photo-open { padding:0; background:#eef3f8; border:0; position:relative; cursor:zoom-in; }
.project-photo-open img { width:100%; height:160px; object-fit:contain; }
.project-photo-open span { position:absolute; bottom:0; right:0; padding:.3rem .5rem; background:var(--navy); color:white; font-size:.65rem; }
.project-lightbox { border:0; padding:1rem; background:#061c36; color:white; width:min(1100px,95vw); max-height:95vh; }
.project-lightbox::backdrop { background:#03101ce8; }
.project-lightbox > img { width:100%; height:75vh; object-fit:contain; }
.project-lightbox > p { margin:1rem 0 0; }
.lightbox-close { display:block; margin-left:auto; padding:.6rem 1rem; background:white; color:var(--navy); border:0; cursor:pointer; }
@media(max-width:700px) { .portfolio-index { grid-template-columns:1fr; } .portfolio-library-head { display:block; } .portfolio-entry-label h2 { font-size:1.8rem; } }
@media(prefers-reduced-motion:reduce) { .portfolio-cover img { transition:none; } }

/* Shared architectural backdrop across the inner pages. */
.capabilities-page main,.collection-page main,main.contact-page {
 position:relative; isolation:isolate; overflow:hidden;
 background-color:#dce6ef;
 background-image:linear-gradient(110deg,#f2f5f8 0%,#e5edf4 38%,#c9dced 100%);
}
.capabilities-page main::before,.collection-page main::before,main.contact-page::before {
 content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.16;
 background-image:url('../assets/images/portal-blueprint.png'); background-repeat:repeat-y;
 background-size:1400px auto; background-position:70% top; mix-blend-mode:multiply;
 mask-image:linear-gradient(90deg,transparent,#000 30%,#000 85%,transparent);
}
.capabilities-page .capability-hero,.capabilities-page .services,.capabilities-page .sectors,
.collection-page .collection-intro,.collection-page .portfolio-library,.collection-page .technology-collection,
main.contact-page .contact-destination { background:transparent; }
.capabilities-page .service-row { background:#f8fbfdba; padding:2.5rem 1.5rem; margin-bottom:1rem; border:1px solid #ffffffb3; }
.capabilities-page .delivery,.collection-page .delivery { background:#f8fbfdc9; }
.collection-page .technology-feature { background:#f8fbfdc9; padding:1.5rem; border:1px solid #ffffffb3; }
.portfolio-entry { background:#f8fbfdd9; border:1px solid #ffffffb3; }
.portfolio-entry-label,.portfolio-entry-content { padding-left:1.2rem; padding-right:1.2rem; }
.portfolio-entry-content { padding-bottom:1.2rem; }
.portfolio-expand { right:1rem; }
.collection-cta { background:#f8fbfdd9; }
main.contact-page .contact-panel { background:#ffffffeb; box-shadow:0 18px 45px -25px #193f6850; }
main.contact-page .contact-map { box-shadow:0 18px 45px -25px #193f6850; }
@media(max-width:700px) {
 .capabilities-page main::before,.collection-page main::before,main.contact-page::before { background-size:900px auto; opacity:.12; }
 .capabilities-page .service-row { padding:1.5rem 1rem; }
 .collection-page .technology-feature { padding:1rem; }
}

/* Inner pages: a quieter architectural palette, without the large drawing. */
.capabilities-page main,.collection-page main,main.contact-page {
 background:#f3f5f7;
 background-image:radial-gradient(ellipse at 100% 0%,#dce8f5 0%,transparent 48%);
}
.capabilities-page main::before,.collection-page main::before,main.contact-page::before { display:none; }
.collection-intro,.capabilities-page .capability-hero {
 border-bottom:1px solid #d5dfe9;
 background:linear-gradient(115deg,#fff 20%,#edf2f7 100%);
 position:relative;
}
.collection-intro::after { display:block; content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--blue); z-index:0; }
.collection-intro > * { position:relative; z-index:1; }
.collection-page .portfolio-library { background:#f3f5f7; }
.portfolio-library-head { border-top:0; }
.portfolio-entry { background:white; border:1px solid #dde4eb; box-shadow:0 8px 22px -18px #092c5060; }
.portfolio-entry-label { padding-top:1.4rem; padding-bottom:1.5rem; }
.portfolio-cover { margin:8px 8px 0; }
.portfolio-filters button { border-radius:30px; }
.capabilities-page .services { background:#f3f5f7; }
.capabilities-page .service-row { background:white; border:1px solid #dde4eb; }
.capabilities-page .delivery,.collection-page .delivery { background:#e7edf4; }
.capabilities-page .sectors { background:#fff; }
.collection-page .technology-collection { background:#f3f5f7; }
.collection-page .technology-feature { background:white; border:1px solid #dde4eb; box-shadow:0 8px 22px -18px #092c5060; }
.collection-cta { background:#e7edf4; }
main.contact-page .contact-destination { background:transparent; }
main.contact-page .contact-panel { background:white; border-radius:8px; border:1px solid #dde4eb; box-shadow:0 12px 30px -22px #193f6850; }
main.contact-page .contact-map { border-radius:8px; border:1px solid #dde4eb; }

/* Warm architectural canvas for inner pages. */
.capabilities-page main,.collection-page main,main.contact-page {
 background-color:#f6f2eb;
 background-image:radial-gradient(ellipse at 100% 4%,#e6d5b978 0%,transparent 43%),radial-gradient(ellipse at 0% 65%,#efe2cd85 0%,transparent 45%);
}
.capabilities-page main::before,.collection-page main::before,main.contact-page::before {
 display:block; content:''; position:absolute; inset:-180px -18% auto auto; width:72%; height:1000px;
 border:1px solid #c6ac8240; border-radius:50%; transform:rotate(-28deg); z-index:-1; opacity:1;
 background:linear-gradient(135deg,#ffffff55,transparent 70%); mask-image:none; mix-blend-mode:normal;
 box-shadow:0 0 0 65px #ffffff25,0 0 0 66px #c6ac8225,0 0 0 150px #ffffff18,0 0 0 151px #c6ac821c;
}
.collection-page .collection-intro,.capabilities-page .capability-hero { background:transparent; border-bottom:1px solid #d9cdbb; }
.collection-intro::after { display:none; }
.collection-page .portfolio-library,.collection-page .technology-collection,.capabilities-page .services,.capabilities-page .sectors { background:transparent; }
.portfolio-library-head { border-color:#d9cdbb; }
.portfolio-entry,.collection-page .technology-feature,.capabilities-page .service-row { background:#fffdf9; border-color:#e4dacb; box-shadow:0 12px 30px -24px #785c3855; }
.portfolio-cover { background:#eee5d8; }
.portfolio-entry-label { border-color:#e4dacb; }
.portfolio-filters button { background:#fffdf9; border-color:#d9cdbb; }
.portfolio-filters button[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); }
.capabilities-page .delivery,.collection-page .delivery,.collection-cta { background:#ece4d7; }
main.contact-page .contact-panel { background:#fffdf9; border-color:#e4dacb; box-shadow:0 12px 30px -22px #785c3840; }
main.contact-page .contact-map { border-color:#d9cdbb; }
@media(max-width:700px) {
 .capabilities-page main::before,.collection-page main::before,main.contact-page::before { width:100%; right:-45%; height:650px; }
}
/* Tube and structural-section laser cutting: authentic demonstration imagery. */
.laser-showcase {margin:5rem 0 1rem;scroll-margin-top:110px}
.laser-heading {display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:end;margin-bottom:2rem}
.laser-heading h2 {font-size:clamp(3.5rem,6.5vw,6.5rem);line-height:.95;margin:.6rem 0 0}
.laser-heading h3 {font-size:1.8rem;line-height:1.1;margin:0 0 1rem}
.laser-heading p:not(.eyebrow) {line-height:1.7;max-width:38rem}
.laser-video-link {display:inline-flex;align-items:center;gap:2rem;padding:.8rem 0;border-bottom:2px solid #006dff;color:#08264e;font-weight:600}
.laser-showcase figure {margin:0;background:#fffdf9;overflow:hidden;border:1px solid #e4dacb}
.laser-showcase img {display:block;width:100%;height:auto}
.laser-showcase figcaption {display:flex;gap:1.5rem;align-items:center;padding:1.2rem 1.5rem;font-size:1rem;color:#08264e}
.laser-showcase figcaption span {font-size:.75rem;letter-spacing:.12em;font-weight:600;color:#006dff;white-space:nowrap}
.laser-details {display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem;align-items:start}
.laser-credit {font-size:.8rem;line-height:1.5;opacity:.75;margin:1rem 0}
@media(max-width:700px) {.laser-heading {grid-template-columns:1fr;gap:1.5rem}.laser-details {grid-template-columns:1fr}.laser-showcase {margin-top:3rem}.laser-showcase figcaption {align-items:flex-start;flex-direction:column;gap:.5rem;padding:1rem}}
.careers-section {position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);padding-top:4rem;padding-bottom:5rem;border-top:1px solid #d9cdbb}
.careers-intro h2 {font-size:clamp(3rem,5.3vw,5.5rem);line-height:1;margin:1rem 0 1.5rem;color:#08264e}
.careers-section p {line-height:1.7}
.careers-content {padding:2rem;background:#fffdf9;border:1px solid #e4dacb}
.careers-content h3 {font-size:1.8rem;line-height:1.15;margin:0 0 .75rem}
.career-roles {list-style:none;padding:0;margin:1.5rem 0 2rem;counter-reset:careers}
.career-roles li {counter-increment:careers;display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid #e4dacb;font-weight:600}
.career-roles li::before {content:'0' counter(careers);color:#006dff;font-size:.8rem;padding-top:.2rem}
.careers-apply .button {margin-top:.5rem}
.careers-email {display:block;margin-top:1rem;color:#08264e;overflow-wrap:anywhere}
@media(max-width:700px) {.careers-section {grid-template-columns:1fr;padding-top:2.5rem;padding-bottom:3rem}.careers-content {padding:1.25rem}}

/* Keep the showcase composed on wide and ultrawide displays. */
.studio-showcase > .studio-intro,
.studio-showcase > .studio-layout,
.studio-showcase > .studio-end {max-width:1280px;margin-left:auto;margin-right:auto}
.navigation {font-family:var(--body-font);font-size:1.0625rem;font-weight:600}
@media(min-width:1100px) {
 .studio-showcase > .studio-layout {grid-template-columns:230px minmax(0,1fr)}
 .studio-screen {min-height:0;aspect-ratio:1.7;max-height:600px}
 .studio-screen h3 {font-size:clamp(3.2rem,4vw,4.5rem)}
}
@media(max-width:900px) and (min-width:701px) {.navigation {font-size:.9375rem}}

/* Edge-to-edge homepage gallery images. */
.studio-showcase .studio-screen { border: 0; }
.studio-showcase .screen-tag { display: none; }


/* Selected Elmina entrance bridge photograph. */
.visual-elmina,.frame-photo.visual-elmina {background-image:url("../assets/images/elmina-enhanced.png");background-position:center;}

/* Sharper machinery visuals and dedicated tube-cutting preview. */
.visual-cutting {background-image:url('../assets/images/cnc-enhanced.png')}
.visual-welding {background-image:url('../assets/images/welding-enhanced.png')}
.visual-tube {background-image:url('../assets/images/technology-tube-cutting.png');background-size:cover;background-position:center}

.studio-caption p { white-space: pre-line; }

/* Flowing process circles, inspired by the connected-loop reference. */
.capabilities-page .delivery:has(.process-flow) {background:linear-gradient(125deg,#fffdf9,#eef5fc);overflow:hidden}
.process-grid.process-flow {grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 0;max-width:1200px;margin:3rem auto 0;padding:1rem 0}
.process-grid.process-flow li {border:0;padding:0 8px;position:relative}
.process-orbit {position:relative;min-height:310px;aspect-ratio:1.05;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.7rem 2.2rem;isolation:isolate}
.process-orbit::before {content:'';position:absolute;inset:5px;border:3px solid #2275b7;border-right-color:transparent;border-radius:50%;transform:rotate(-35deg);z-index:-1;box-shadow:inset 8px 6px 18px #123b6610, -5px 7px 18px #123b660b}
.process-orbit::after {content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:#0874db;right:12%;top:13%;box-shadow:0 0 0 6px #edf5fc}
.process-flow li:nth-child(2) .process-orbit,.process-flow li:nth-child(5) .process-orbit {transform:translateY(24px)}
.process-flow li:nth-child(even) .process-orbit::before {transform:rotate(145deg);border-color:#6b9fbe;border-right-color:transparent}
.process-flow li:nth-child(even) .process-orbit::after {top:auto;right:auto;bottom:13%;left:12%;background:#527fa9}
.process-step {font-family:var(--body-font);font-size:.7rem;letter-spacing:.18em;color:#5985ab;margin-bottom:.7rem}
.process-icon {width:42px;height:42px;color:#006dff;margin-bottom:.2rem}
.process-flow .process-orbit h3 {font-size:2rem;margin:.55rem 0 .65rem}
.process-flow .process-orbit p {font-size:.95rem;line-height:1.5;max-width:235px}
@media(min-width:1000px) {.process-flow li:nth-child(3n+2)::before {content:'';position:absolute;left:-17px;top:48%;width:34px;height:3px;background:#5b96bd;transform:rotate(-40deg)}}
@media(max-width:700px) {.process-grid.process-flow {grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.process-grid.process-flow li {padding:0}.process-orbit {min-height:260px;aspect-ratio:auto;padding:2rem 1rem}.process-flow li:nth-child(n) .process-orbit {transform:none}.process-flow .process-orbit h3 {font-size:1.6rem}.process-flow .process-orbit p {font-size:.85rem}.process-orbit::before {inset:0;border-width:2px}}
@media(max-width:420px) {.process-grid.process-flow {grid-template-columns:1fr;max-width:300px}.process-orbit {min-height:290px;aspect-ratio:1}.process-flow .process-orbit p {font-size:.95rem}}
.capabilities-page .capability-hero h1 span {color:#657b94}
.vertical-reveal {position:relative;aspect-ratio:1;overflow:hidden;touch-action:pan-x}
.capabilities-page .vertical-reveal img {position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
.reveal-drawing {clip-path:inset(0 0 calc(100% - var(--reveal)) 0)}
.vertical-divider {position:absolute;top:var(--reveal);left:0;right:0;border-top:2px solid white;pointer-events:none;filter:drop-shadow(0 2px 4px #08264e44)}
.vertical-divider span {position:absolute;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;background:white;border-radius:50%;color:#08264e;font-size:30px}
.vertical-divider b {position:absolute;top:30px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#08264e;color:white;padding:5px 10px;font-size:12px;font-weight:400}
.vertical-slider {position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ns-resize;touch-action:none}
.vertical-reveal:focus-within {outline:3px solid #006dff;outline-offset:4px}
.process-grid.process-flow {display:flex;gap:0;max-width:1440px;overflow-x:auto;padding:12px 0 24px;scroll-snap-type:x proximity}
.process-grid.process-flow li {flex:1 0 180px;min-width:0;padding:0 4px;scroll-snap-align:start}
.process-flow li:nth-child(n) .process-orbit {transform:none;min-height:230px;aspect-ratio:auto;padding:24px 16px}
.process-flow li::before {display:none}
.process-flow .process-orbit h3 {font-size:1.65rem;margin:8px 0}
.process-flow .process-orbit p {font-size:.85rem;line-height:1.45}
.process-flow .process-icon {width:32px;height:32px}
.process-orbit::before {border-width:2px}
.capabilities-page #delivery-heading {font-size:clamp(2.3rem,3.2vw,3.4rem)}
/* Consistent inner-page navigation and protected process text. */
.capabilities-page .capability-hero {padding-top:3rem;row-gap:0;align-items:start}
.capabilities-page .capability-hero > .breadcrumb {grid-column:1/-1;margin:0 0 3rem;color:var(--muted)}
.capabilities-page .capability-hero > .breadcrumb a:hover {color:var(--blue)}
.capabilities-page .capability-hero-visual {margin-top:0}
.technology-page .collection-intro {justify-content:flex-start}
.process-flow li:nth-child(n) .process-orbit {min-height:275px;padding:42px 28px}
.process-orbit::before {border-radius:45%;transform:none!important;inset:4px}
.process-flow li:nth-child(even) .process-orbit::before {transform:rotate(180deg)!important}
.process-orbit::after {top:8%;right:8%}
.process-flow li:nth-child(even) .process-orbit::after {bottom:8%;left:8%}
.process-flow .process-orbit p {max-width:170px}
@media(max-width:700px) {.process-grid.process-flow li {flex-basis:210px}.capabilities-page .capability-hero > .breadcrumb {margin-bottom:2rem}}
/* Restore flowing process arcs with a clear central text area. */
.capabilities-page .capability-hero h1 span {color:var(--blue)}
.process-grid.process-flow li {flex-basis:210px}
.process-flow li:nth-child(n) .process-orbit {min-height:290px;padding:48px 30px}
.process-flow .process-orbit::before {inset:0;border-radius:50%;transform:rotate(-35deg)!important;box-shadow:inset 8px 6px 18px #123b6610,-5px 7px 18px #123b660b}
.process-flow li:nth-child(even) .process-orbit::before {transform:rotate(145deg)!important}
.process-flow .process-orbit::after {top:13%;right:12%}
.process-flow li:nth-child(even) .process-orbit::after {top:auto;right:auto;bottom:13%;left:12%}
.process-flow .process-orbit p {max-width:150px;font-size:.85rem;line-height:1.45}
.process-flow .process-orbit h3 {font-size:1.55rem}
/* Six process steps fit the available width without a scroll container. */
.capabilities-page .process-grid.process-flow {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;max-width:none;overflow:visible;scroll-snap-type:none;padding:16px 0 24px}
.capabilities-page .process-grid.process-flow li {min-width:0;padding:0 3px}
.capabilities-page .process-flow li:nth-child(n) .process-orbit {min-height:270px;padding:40px 18px;aspect-ratio:auto}
.capabilities-page .process-flow .process-orbit p {max-width:100%;font-size:clamp(.7rem,1vw,.85rem);overflow-wrap:anywhere}
.capabilities-page .process-flow .process-orbit h3 {font-size:clamp(.9rem,1.8vw,1.55rem)}
@media(max-width:700px) {
 .capabilities-page .process-flow li:nth-child(n) .process-orbit {min-height:170px;padding:22px 3px}
 .capabilities-page .process-flow .process-orbit p {display:none}
 .capabilities-page .process-flow .process-orbit h3 {font-size:clamp(.55rem,2.1vw,.9rem)}
 .capabilities-page .process-flow .process-icon {width:24px;height:24px}
 .capabilities-page .process-flow .process-step {font-size:.6rem;letter-spacing:0}
 .capabilities-page .process-orbit::after {width:7px;height:7px;box-shadow:0 0 0 3px #edf5fc}
}

#contact-details { scroll-margin-top: 100px; }
/* Interactive steel assembly concept. */
#studio-capabilities .studio-screen.visual-blueprint {background-image:none;background-color:#05264c}
.assembly-svg {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.assembly-stage {transform-box:fill-box;transform-origin:center;transition:opacity .12s linear,transform .12s linear}
#studio-capabilities .studio-screen:not(.visual-blueprint) .assembly-svg {display:none}
.assembly-controls {padding:1.3rem 1.5rem;background:#082e55;color:white}
.assembly-controls>div {display:flex;justify-content:space-between;gap:1rem;align-items:center}
.assembly-controls label {font-weight:600;font-size:1rem}
.assembly-controls output {color:#80d8ff;font-size:.85rem}
.assembly-controls input {display:block;width:100%;margin:1.1rem 0;accent-color:#39c5ff;cursor:ew-resize;height:24px}
.assembly-controls p {font-size:.75rem;color:#afc8df;margin:0}
#studio-capabilities:has(.studio-screen:not(.visual-blueprint)) .assembly-controls {display:none}
#studio-capabilities .visual-blueprint h3 {font-size:clamp(2rem,3.5vw,3.4rem);max-width:35%;pointer-events:none}
@media(max-width:700px){.assembly-controls>div{align-items:start;flex-direction:column;gap:.3rem}#studio-capabilities .visual-blueprint h3{font-size:2rem;max-width:60%}.assembly-svg{height:80%}}
@media(prefers-reduced-motion:reduce){.assembly-stage{transition:none}}

#studio-capabilities .original-assembly {height:100%;}

/* Continuous soft-edged reveal keeps the original blueprint intact. */
#studio-capabilities .studio-screen.visual-blueprint {background-color:#052b53;background-image:linear-gradient(#308cc118 1px,transparent 1px),linear-gradient(90deg,#308cc118 1px,transparent 1px);background-size:25px 25px}
.blueprint-auto {position:absolute;inset:0;overflow:hidden}
.blueprint-auto img {width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;mask-image:linear-gradient(to top,#000 0%,#000 43%,transparent 53%,transparent 100%);mask-size:100% 230%;mask-position:0 0;transition:mask-position 4.5s cubic-bezier(.25,.1,.25,1),opacity .8s ease}
.blueprint-auto.is-built img {opacity:1;mask-position:0 100%}
#studio-capabilities .studio-screen:not(.visual-blueprint) .blueprint-auto {display:none}
#studio-capabilities .visual-blueprint h3 {font-size:clamp(3.2rem,4vw,4.5rem);max-width:90%}
@media(max-width:700px){#studio-capabilities .visual-blueprint h3 {font-size:3.4rem}}
@media(prefers-reduced-motion:reduce){.blueprint-auto img {transition:none;opacity:1;mask-image:none}}

/* Component-by-component automatic blueprint assembly. */
.blueprint-sequence {display:block;width:100%;height:100%}
.build-part {stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.build-finish {opacity:0}
.is-built .build-part {animation:trace-member 1.5s ease-in-out forwards}
.is-built .part-0 {animation-delay:.2s}
.is-built .part-1 {animation-delay:1.7s}
.is-built .part-2 {animation-delay:3.2s}
.is-built .part-3 {animation-delay:4.7s}
.is-built .part-4 {animation-delay:6.2s}
.is-built .part-5 {animation-delay:7.7s}
.is-built .build-finish {animation:finish-blueprint 1.2s ease 9s forwards}
@keyframes trace-member {0%{stroke-dashoffset:1;opacity:0}10%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes finish-blueprint {to{opacity:1}}
@media(prefers-reduced-motion:reduce){.build-part {animation:none!important;stroke-dashoffset:0;opacity:1}.build-finish {animation:none!important;opacity:1}}

/* Whole steel members assemble; no photographic slicing or reveal masks. */
.steel-demo {width:100%;height:100%;display:block}
.demo-piece {opacity:0;transform-box:fill-box;transform-origin:center bottom}
.blueprint-auto.is-built .demo-column {animation:column-arrive 1.15s cubic-bezier(.2,.7,.3,1) var(--delay) forwards}
.blueprint-auto.is-built .demo-beam {animation:beam-arrive 1.2s cubic-bezier(.2,.7,.3,1) var(--delay) forwards}
.blueprint-auto.is-built .demo-joint {animation:joint-arrive .7s ease-out var(--delay) forwards}
@keyframes column-arrive {from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
@keyframes beam-arrive {from{opacity:0;transform:translateY(-75px)}to{opacity:1;transform:translateY(0)}}
@keyframes joint-arrive {from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.demo-piece {animation:none!important;opacity:1;transform:none}}

/* Restore the detailed architectural illustration with restrained motion. */
.blueprint-auto.detailed-blueprint img {mask-image:none;opacity:0;transform:scale(1.025);transition:opacity 1.6s ease,transform 2.8s cubic-bezier(.2,.65,.3,1)}
.blueprint-auto.detailed-blueprint.is-built img {opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.blueprint-auto.detailed-blueprint img {opacity:1;transform:none;transition:none}}

.detailed-frame {width:100%;height:100%;display:block}
.detail-member {opacity:0;transform:translateY(9px)}
.is-built .detail-member {animation:detail-arrive 1.5s cubic-bezier(.2,.65,.3,1) var(--arrival) both}
@keyframes detail-arrive {to{opacity:1;transform:translateY(0)}}
.replay-build {display:block;margin:.8rem 0 .2rem auto;border:0;background:transparent;color:#0b559b;font:600 .85rem var(--body-font);cursor:pointer;padding:.5rem}
#studio-capabilities:has(.studio-screen:not(.visual-blueprint)) .replay-build {display:none}
@media(prefers-reduced-motion:reduce){.detail-member {animation:none!important;opacity:1;transform:none}}
/* Projected 3D I-section mesh: complete components, individually animated. */
.engineered-frame {display:block;width:100%;height:100%}
.portal-member {opacity:0;transform:translateY(-12px)}
.is-built .portal-member {animation:portal-assemble .7s cubic-bezier(.2,.7,.3,1) var(--arrival) both}
@keyframes portal-assemble {to {opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.portal-member {animation:none!important;opacity:1;transform:none}}

/* Close the showcase navigation with a divider below Technology. */
.studio-menu > button:last-of-type { border-bottom:1px solid #ccd5df; }

/* Shared inner-page headline scale matches Our Expertise. */
.capabilities-page .capability-hero h1,
.projects-page .collection-intro h1,
.technology-page .collection-intro h1 {
 font-size:clamp(3.8rem,6vw,6.5rem);
 font-weight:700;
 line-height:1.02;
 letter-spacing:-.025em;
}

/* Keep archive covers crisp without enlarging them on hover. */
.projects-page .portfolio-library {max-width:1280px;margin-inline:auto;}
.projects-page .portfolio-cover img {filter:url(#cover-clarity);transform:none;}
.projects-page .portfolio-entry summary:hover img {transform:none;}

/* Soft gallery viewer and consistent image clarity. */
.project-lightbox {background:#eef2f5;color:var(--navy);border-radius:8px;box-shadow:0 20px 70px #223d5933;}
.project-lightbox::backdrop {background:#8b9cab99;backdrop-filter:blur(5px);}
.project-lightbox > img,.project-photo-open img {filter:url(#cover-clarity);}
.lightbox-close {background:#fff;color:var(--navy);border-radius:4px;}

/* Technology adopts the Expertise process arcs, in a single three-step row. */
.technology-page .delivery {background:linear-gradient(125deg,#fffdf9,#eef5fc);}
.technology-page .process-grid.process-flow {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px;gap:18px;overflow:visible;scroll-snap-type:none;margin:2rem auto 0;}
.technology-page .process-flow li:nth-child(n) .process-orbit {min-height:290px;padding:45px 32px;}
.technology-page .process-flow .process-orbit p {max-width:210px;font-size:.95rem;}
.technology-page .process-flow .process-orbit h3 {font-size:1.8rem;}
@media(max-width:600px){
 .technology-page .process-grid.process-flow {gap:4px;}
 .technology-page .process-flow li:nth-child(n) .process-orbit {min-height:220px;padding:28px 9px;}
 .technology-page .process-flow .process-orbit p {font-size:.7rem;}
 .technology-page .process-flow .process-orbit h3 {font-size:1.25rem;}
}

/* Anchor the architectural backdrop independently of each tab's content height. */
.studio-showcase::before {
 background-size:auto 1200px;
 background-position:72% 0;
}
@media(max-width:700px) {
 .studio-showcase::before {background-size:auto 850px;background-position:65% 0;}
}

/* Drawing first; dragging down uncovers the finished structure above the handle. */
.reveal-drawing {clip-path:inset(var(--reveal) 0 0 0);}
.vertical-divider span {transform:translate(-50%,clamp(-24px,calc(24px - var(--reveal)),0px));}
.vertical-reveal {isolation:isolate;}
.studio-screen {touch-action:pan-y pinch-zoom;}
@media(max-width:700px){
 .capabilities-page .capability-hero {row-gap:2.5rem;}
 .capabilities-page .capability-hero-visual {margin:0;min-width:0;}
 .capabilities-page .vertical-reveal {margin-top:1rem;}
 .capabilities-page .process-grid.process-flow,
 .technology-page .process-grid.process-flow {display:grid;grid-template-columns:1fr;gap:12px;overflow:visible;margin-top:1.5rem;padding:0;max-width:none;}
 .capabilities-page .process-grid.process-flow li,
 .technology-page .process-grid.process-flow li {padding:0;}
 .capabilities-page .process-flow li:nth-child(n) .process-orbit,
 .technology-page .process-flow li:nth-child(n) .process-orbit {display:grid;grid-template-columns:32px 1fr;gap:5px 14px;min-height:0;aspect-ratio:auto;padding:18px 20px;text-align:left;border:1px solid #d5e2ee;border-left:3px solid #287fbe;border-radius:12px;background:#ffffffb8;transform:none;}
 .capabilities-page .process-flow .process-orbit::before,
 .capabilities-page .process-flow .process-orbit::after,
 .technology-page .process-flow .process-orbit::before,
 .technology-page .process-flow .process-orbit::after {display:none;}
 .capabilities-page .process-flow .process-step,
 .technology-page .process-flow .process-step {grid-column:1;grid-row:1;margin:0;font-size:.7rem;}
 .capabilities-page .process-flow .process-icon,
 .technology-page .process-flow .process-icon {grid-column:1;grid-row:2 / 4;width:28px;height:28px;margin:0;}
 .capabilities-page .process-flow .process-orbit h3,
 .technology-page .process-flow .process-orbit h3 {grid-column:2;grid-row:1 / 3;font-size:1.5rem;margin:0;}
 .capabilities-page .process-flow .process-orbit p,
 .technology-page .process-flow .process-orbit p {display:block;grid-column:2;font-size:.9rem;line-height:1.45;max-width:none;margin:0;overflow-wrap:normal;}
}

/* Connected milestones replace the decorative C-curves. */
.capabilities-page .process-grid.process-flow,
.technology-page .process-grid.process-flow {gap:0;}
.capabilities-page .process-grid.process-flow li,
.technology-page .process-grid.process-flow li {padding:0 10px;}
.capabilities-page .process-flow li:nth-child(n) .process-orbit,
.technology-page .process-flow li:nth-child(n) .process-orbit {min-height:220px;padding:0 10px 22px;display:flex;align-items:center;justify-content:flex-start;border:0;border-radius:0;background:none;transform:none;}
.capabilities-page .process-flow .process-orbit::before,
.capabilities-page .process-flow .process-orbit::after,
.technology-page .process-flow .process-orbit::before,
.technology-page .process-flow .process-orbit::after {display:none;}
.process-flow .process-step {position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:1px solid #8bb8d9;border-radius:50%;background:#edf5fc;color:#0869b7;letter-spacing:.06em;margin:0 0 18px;}
.process-grid.process-flow li:not(:last-child)::after {content:'';position:absolute;left:50%;top:22px;width:100%;height:1px;background:#8bb8d9;pointer-events:none;}
@media(max-width:700px){
 .capabilities-page .process-grid.process-flow,
 .technology-page .process-grid.process-flow {gap:0;}
 .capabilities-page .process-grid.process-flow li,
 .technology-page .process-grid.process-flow li {padding:0;}
 .capabilities-page .process-flow li:nth-child(n) .process-orbit,
 .technology-page .process-flow li:nth-child(n) .process-orbit {display:grid;grid-template-columns:44px 30px 1fr;gap:6px 12px;min-height:112px;padding:0 0 24px;text-align:left;align-items:start;}
 .capabilities-page .process-flow .process-step,
 .technology-page .process-flow .process-step {grid-column:1;grid-row:1 / 3;width:40px;height:40px;margin:0;font-size:.75rem;}
 .capabilities-page .process-flow .process-icon,
 .technology-page .process-flow .process-icon {grid-column:2;grid-row:1;width:26px;height:26px;margin:5px 0 0;}
 .capabilities-page .process-flow .process-orbit h3,
 .technology-page .process-flow .process-orbit h3 {grid-column:3;grid-row:1;font-size:1.4rem;margin:2px 0 0;}
 .capabilities-page .process-flow .process-orbit p,
 .technology-page .process-flow .process-orbit p {grid-column:3;grid-row:2;font-size:.9rem;}
 .process-grid.process-flow li:not(:last-child)::after {left:20px;top:40px;width:1px;height:calc(100% - 40px);}
}

/* A quiet photographic introduction, with the work blended to the right. */
.reference-home .project-hero {background:#082342;}
.project-hero .hero-image {object-position:center;}
.project-hero .hero-shade {background:linear-gradient(90deg,#061c3640,transparent 65%);}
@media(max-width:700px){
 .reference-home .project-hero {padding-bottom:240px;}
 .project-hero .comparison-visual {inset:0;}
 .project-hero .hero-image {object-position:68% bottom;}
 .project-hero .hero-shade {background:linear-gradient(180deg,#061c36 0%,#061c36ee 35%,#061c3666 65%,transparent);}
 .reference-home .project-hero .hero-copy {position:relative;z-index:2;}
}

/* Reserve two description lines as expertise slides change. */
#studio-capabilities .studio-caption p {min-height:3.2em;line-height:1.6;}

/* Preserve source resolution when viewing project photographs. */
.project-lightbox > img {
 width:auto;
 height:auto;
 max-width:100%;
 max-height:75vh;
 display:block;
 margin-inline:auto;
 object-fit:contain;
}

/* Project subtitle hierarchy and restrained clarity for the Genting source. */
.portfolio-entry-label h2 .project-title-detail {display:block;font-family:inherit;font-size:.65em;line-height:1.35;font-weight:500;margin-top:.35em;}
.projects-page #genting-highland-skypark-roof-top-protection-platform .portfolio-cover img {filter:url(#genting-clarity);}

/* Vector arrows remain consistent across desktop and phone fonts. */
.direction-icon {width:1em;height:1em;display:inline-block;vertical-align:middle;flex-shrink:0;}
.studio-caption a > span {display:inline-flex;align-items:center;justify-content:center;}

/* Keep the complete project montage visible on wide monitors. */
@media (min-width:1600px) {
 .reference-home .project-hero {min-height:clamp(760px,42vw,940px);background:#061c36;}
 .project-hero .hero-image {object-fit:contain;object-position:right center;}
 .project-hero .hero-shade {background:linear-gradient(90deg,#061c36 0%,#061c3640 30%,transparent 55%);}
}

/* Wide-screen technology: balanced pairs instead of oversized vertical panels. */
@media (min-width:1500px) {
 .technology-page .technology-collection {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;max-width:1920px;margin-inline:auto;}
 .technology-page .technology-feature,.technology-page .technology-feature:nth-child(2) {display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:1.5rem;}
 .technology-page .technology-feature > img {order:0;aspect-ratio:16 / 9;object-fit:contain;background:#fff;}
 .technology-page .technology-feature > div {padding:1.75rem .5rem .5rem;}
 .technology-page .technology-feature h2 {font-size:clamp(2.8rem,3vw,4rem);line-height:1.05;}
 .technology-page .laser-showcase {grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;margin:2rem 0 1rem;}
 .technology-page .laser-heading {grid-column:1 / -1;margin:0;align-items:center;}
 .technology-page .laser-heading h2 {font-size:clamp(3rem,3.5vw,4.5rem);}
 .technology-page .laser-showcase .laser-main {margin:0!important;display:flex;flex-direction:column;}
 .technology-page .laser-main img {aspect-ratio:16 / 10;object-fit:contain;background:#fff;}
 .technology-page .laser-main figcaption {flex:1;align-items:flex-start;flex-direction:column;gap:.5rem;}
}

/* Let project cards use wide displays from left to right. */
@media (min-width:1500px) {
 .projects-page .portfolio-library {max-width:none;width:100%;}
 .projects-page .portfolio-index {grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
}
@media (min-width:2200px) {
 .projects-page .portfolio-index {grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* Continuous gallery backdrop, including the captions and filmstrip. */
.studio-showcase::before {background-size:cover;background-position:center;bottom:0;}
@media (min-width:1500px) {
 .capabilities-page .capability-hero {grid-template-columns:minmax(0,1fr) minmax(0,660px);gap:3rem 5rem;align-items:center;padding-bottom:3rem;}
 .capabilities-page .capability-hero-visual {width:100%;max-width:660px;justify-self:end;}
 .capabilities-page .capability-hero h1 {font-size:clamp(4.5rem,4.4vw,6rem);}
 .capabilities-page .capability-hero-copy > p:not(.eyebrow) {font-size:1.125rem;max-width:580px;}
 .projects-page .portfolio-entry-label h2 {font-size:clamp(1.8rem,1.5vw,2.25rem);line-height:1.15;}
 .technology-page .technology-feature p:last-child {font-size:1.125rem;line-height:1.6;}
}
@media (min-width:1600px) {
 .project-hero .comparison-visual {background:linear-gradient(90deg,#061c36cc,#061c3644),url('../assets/images/home-project-blend.png') left center / cover no-repeat;}
 .project-hero .hero-image {left:auto;right:0;width:auto;max-width:100%;height:100%;aspect-ratio:1672 / 941;object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 28%);}
 .project-hero .hero-shade {background:linear-gradient(90deg,#061c3680,transparent 65%);}
}

.projects-wide-intro {display:none;}
@media (min-width:1500px) {
 .projects-page .projects-intro-copy,.projects-page .projects-archive-note {display:none;}
 .projects-page .projects-wide-intro {display:block;margin:0 0 1rem;max-width:38rem;font-size:1.125rem;line-height:1.7;color:var(--muted);}
 .projects-page .portfolio-library-head {align-items:center;}
}
@media (min-width:1600px) {
 .project-hero .comparison-visual {background:#061c36;}
 .project-hero .hero-image {left:0;right:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:fill;mask-image:none;}
 .project-hero .hero-shade {background:linear-gradient(90deg,#061c3655,transparent 50%);}
}

/* Phone hero: readable introduction followed by the complete project montage. */
@media (max-width:700px) {
 .reference-home .project-hero {display:flex;flex-direction:column;min-height:0;padding-bottom:0;background:#061c36;}
 .reference-home .project-hero .hero-copy {order:0;width:100%;padding:2.25rem var(--gutter) 1.75rem;}
 .reference-home .project-hero .hero-copy h1 {font-size:clamp(3rem,12.5vw,4.5rem);line-height:1;margin-bottom:1.25rem;}
 .project-hero .hero-description {font-size:1rem;line-height:1.6;max-width:34rem;}
 .project-hero .comparison-visual {position:relative;order:1;inset:auto;width:100%;height:auto;aspect-ratio:1672 / 941;}
 .project-hero .hero-image {object-fit:contain;object-position:center;width:100%;height:100%;}
 .project-hero .hero-shade {background:linear-gradient(180deg,#061c36 0%,#061c3640 18%,transparent 38%);}
}

/* A single project photograph keeps the phone introduction compact. */
@media (max-width:700px) {
 .project-hero .comparison-visual {aspect-ratio:auto;height:180px;}
 .project-hero .hero-image {object-fit:cover;object-position:center 44%;}
 .project-hero .hero-shade {background:linear-gradient(180deg,#061c36 0%,#061c3633 25%,transparent 55%);}
}

.mobile-hero-bridge,.mobile-hero-projects {display:none;}
@media (max-width:700px) {
 .project-hero .mobile-hero-bridge {display:block;position:absolute;top:0;right:0;width:62%;height:225px;object-fit:cover;object-position:60% center;opacity:.8;mask-image:linear-gradient(90deg,transparent 0%,#000 65%),linear-gradient(180deg,#000 50%,transparent 100%);mask-composite:intersect;pointer-events:none;}
 .reference-home .project-hero .hero-copy {background:linear-gradient(90deg,#061c36aa,transparent 85%);}
 .project-hero .comparison-visual {height:180px;}
 .project-hero .comparison-visual > picture,.project-hero .comparison-visual > .hero-shade {display:none;}
 .project-hero .mobile-hero-projects {display:grid;grid-template-columns:1fr 1fr;gap:4px;height:100%;}
 .project-hero .mobile-hero-projects img {width:100%;height:100%;min-width:0;object-fit:cover;}
 .project-hero .mobile-hero-projects img:first-child {object-position:center 55%;}
 .project-hero .mobile-hero-projects img:last-child {object-position:65% center;}
}

/* Blend the phone project photographs into one continuous hero. */
@media (max-width:700px) {
 .project-hero .comparison-visual {height:205px;margin-top:-20px;background:#061c36;}
 .project-hero .mobile-hero-projects {display:block;position:relative;overflow:hidden;background:#061c36;}
 .project-hero .mobile-hero-projects img {position:absolute;top:0;height:100%;width:68%;mask-composite:intersect;}
 .project-hero .mobile-hero-projects img:first-child {left:0;object-position:center 55%;mask-image:linear-gradient(90deg,#000 35%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 28%,#000 75%,transparent 100%);}
 .project-hero .mobile-hero-projects img:last-child {right:0;object-position:65% center;mask-image:linear-gradient(90deg,transparent 0%,#000 60%),linear-gradient(180deg,transparent 0%,#000 28%,#000 75%,transparent 100%);}
 .project-hero .mobile-hero-projects::after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,#061c3622,#08264e33);pointer-events:none;}
}