/* Golden Twilight tokens follow the supplied palette; neutral surfaces provide    breathing room for the official black/gold artwork and project photography. */
:root {
  --ink:#000814;
  --navy:#001d3d;
  --blue:#003566;
  --yellow:#ffc300;
  --yellow-light:#ffd60a;
  --paper:#fff;
  --soft:#f2f3f1;
  --line:#dce0e3;
  --muted:#53616c;
  --radius:5px;
  --page:1280px;
  --gutter:clamp(20px,5vw,80px);
  --display:'Segoe UI',Arial,sans-serif;
  --body:'Segoe UI',Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:115px
}

body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased
}

body.modal-open {
  overflow:hidden
}

img {
  display:block;
  max-width:100%;
  height:auto
}

a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed
}

h1,h2,h3,p {
  margin:0 0 1.1rem
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.04em
}

h1 {
  font-size:clamp(44px,5.7vw,84px)
}

h2 {
  font-size:clamp(32px,3.5vw,52px)
}

h3 {
  font-size:25px;
  letter-spacing:-.025em
}

p {
  max-width:70ch
}

address {
  font-style:normal
}

button {
  color:inherit
}

::selection {
  color:var(--ink);
  background:var(--yellow)
}

:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}

.hero :focus-visible,.site-footer :focus-visible,.approach-band :focus-visible,.lightbox :focus-visible {
  outline-color:var(--yellow-light)
}

[hidden] {
  display:none!important
}

.wrap {
  width:min(var(--page),calc(100% - var(--gutter)*2));
  margin-inline:auto
}

.section {
  padding-block:clamp(64px,7.5vw,112px)
}

.soft {
  background:var(--soft)
}

.serif {
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.05em
}

.lead {
  font-size:clamp(19px,1.6vw,24px);
  line-height:1.5;
  letter-spacing:-.02em
}

.muted,.section-note {
  color:var(--muted)
}

.section-note {
  font-size:14px;
  line-height:1.65;
  margin-block:22px 32px;
  max-width:88ch
}

.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;
  top:-100px;
  left:16px;
  padding:12px 20px;
  z-index:99;
  background:var(--yellow);
  color:var(--ink)
}

.skip-link:focus {
  top:12px
}

.preview-bar {
  min-height:28px;
  background:var(--navy);
  color:#e2e8ed;
  text-align:center;
  font-size:10px;
  letter-spacing:.08em;
  padding:5px 15px;
  text-transform:uppercase
}

.preview-bar span {
  margin-left:14px;
  color:#bac7d3
}

.site-header {
  position:sticky;
  top:0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);
  z-index:30;
  border-bottom:1px solid #e8ebed
}

.header-inner {
  width:min(1440px,calc(100% - var(--gutter)*2));
  margin:auto;
  min-height:96px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.brand {
  width:240px;
  display:block;
  flex-shrink:0
}

.brand img {
  width:240px;
  height:70px;
  object-fit:contain
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:32px
}

.site-header nav>a:not(.button) {
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  padding:14px 0;
  position:relative
}

.site-header nav>a[aria-current]:after {
  position:absolute;
  bottom:6px;
  left:0;
  right:0;
  height:2px;
  background:var(--ink);
  content:''
}

.site-header nav>a:hover {
  color:var(--blue)
}

.button {
  display:inline-flex;
  min-height:54px;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:14px 23px;
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  border-radius:var(--radius);
  transition:background .2s,transform .2s,box-shadow .2s
}

.button span,.text-link span {
  font-size:23px;
  line-height:1;
  transition:transform .2s
}

.button:hover {
  background:var(--blue);
  color:#fff;
  box-shadow:0 5px 18px #00081418
}

.button:hover span,.text-link:hover span {
  transform:translate(2px,-2px)
}

.button.yellow {
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow)
}

.button.yellow:hover {
  background:var(--yellow-light)
}

.button.small {
  min-height:46px;
  font-size:13px;
  padding:12px 18px;
  gap:25px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:30px;
  min-height:48px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid #ffffff75
}

.text-link.dark {
  color:var(--ink);
  border-color:#98a1aa
}

.menu-toggle {
  display:none
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.17em;
  line-height:1.5;
  text-transform:uppercase;
  margin-bottom:28px
}

.eyebrow>span {
  width:6px;
  height:6px;
  flex-shrink:0;
  background:var(--yellow);
  display:inline-block
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:720px;
  color:#fff;
  background:var(--ink);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.hero-image {
  position:absolute;
  inset:0;
  z-index:-3
}

.hero-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 48%
}

.hero:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(0,8,20,.97) 0%,rgba(0,8,20,.87) 25%,rgba(0,8,20,.28) 80%),linear-gradient(0deg,rgba(0,8,20,.88),transparent 40%)
}

.hero-grid {
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.12;
  background-image:linear-gradient(90deg,#ffffff55 1px,transparent 1px);
  background-size:25% 100%;
  pointer-events:none
}

.hero-content {
  padding-top:80px;
  padding-bottom:60px
}

.hero h1 {
  font-size:clamp(54px,6.6vw,96px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.055em;
  margin-bottom:25px
}

.hero h1>span {
  color:var(--yellow-light)
}

.hero-content>p:not(.eyebrow) {
  font-size:17px;
  color:#d8dfe5;
  line-height:1.7
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:34px
}

.hero-bottom {
  min-height:100px;
  display:grid;
  grid-template-columns:1fr 1fr 180px;
  gap:24px;
  align-items:center;
  border-top:1px solid #ffffff35;
  padding:24px 0;
  color:#d8dfe5;
  font-size:11px
}

.hero-bottom>div {
  display:flex;
  gap:20px;
  align-items:center
}

.hero-since {
  font-size:38px;
  font-weight:300;
  color:#fff;
  letter-spacing:-.04em
}

.hero-bottom>div>span:last-child {
  max-width:100px;
  line-height:1.5
}

.hero-caption {
  display:grid;
  grid-template-columns:1fr 30px;
  grid-template-rows:auto auto;
  gap:2px;
  text-decoration:none;
  justify-self:start
}

.hero-caption .label {
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.1em
}

.hero-caption strong {
  font-size:15px;
  font-weight:500;
  color:#fff
}

.hero-caption>span:last-child {
  grid-column:2;
  grid-row:1/3;
  font-size:24px;
  align-self:center;
  margin-left:20px
}

.scroll-cue {
  justify-self:end;
  text-decoration:none;
  display:flex;
  gap:30px;
  align-items:center
}

.scroll-cue span {
  font-size:24px
}

.intro-section,.two-column {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,8vw,130px)
}

.intro-section h2 {
  font-size:clamp(36px,4vw,60px)
}

.intro-copy {
  padding-top:25px
}

.intro-copy>p:not(.lead) {
  color:var(--muted);
  font-size:15px
}

.intro-copy>.text-link {
  margin-top:10px
}

.capability-section {
  background:var(--soft)
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:44px
}

.section-heading h2 {
  margin-bottom:0
}

.section-heading>p {
  font-size:14px;
  color:var(--muted);
  margin-bottom:5px
}

.service-list {
  border-top:1px solid #b8c0c7
}

.service-row {
  display:grid;
  grid-template-columns:100px 1fr 60px;
  gap:25px;
  align-items:center;
  border-bottom:1px solid #c9cfd3;
  min-height:155px;
  padding:30px 0;
  text-decoration:none;
  transition:padding .25s,background .25s
}

.service-row:hover {
  padding-left:18px;
  padding-right:18px;
  background:#fff
}

.service-number {
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

.service-row h3 {
  font-size:clamp(25px,2.6vw,38px);
  margin-bottom:10px
}

.service-row p {
  font-size:14px;
  color:var(--muted);
  margin:0;
  max-width:65ch
}

.service-row>span:last-child {
  font-size:30px;
  width:54px;
  height:54px;
  border:1px solid #9ba7b1;
  border-radius:50%;
  display:grid;
  place-items:center
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:42px 28px
}

.project-image {
  display:block;
  position:relative;
  overflow:hidden;
  background:#dde2e6;
  aspect-ratio:4/3;
  border-radius:var(--radius)
}

.project-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)
}

.project-image:hover>img {
  transform:scale(1.045)
}

.image-arrow {
  position:absolute;
  right:15px;
  bottom:15px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:#fff;
  border-radius:50%;
  font-size:22px
}

.project-no {
  position:absolute;
  top:15px;
  left:15px;
  background:var(--navy);
  color:#fff;
  font-size:10px;
  padding:4px 9px;
  border-radius:2px;
  letter-spacing:.04em
}

.card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:18px 0 12px;
  color:var(--muted)
}

.review-tag {
  font-size:10px;
  line-height:1.5;
  letter-spacing:.02em;
  padding:4px 7px;
  background:#fff3c6;
  color:#5a4100;
  display:inline-block;
  border-radius:2px;
  white-space:normal
}

.project-card h3 {
  font-size:25px;
  margin-bottom:0
}

.project-card h3 a {
  text-decoration:none
}

.project-card h3 a:hover {
  text-decoration:underline
}

.approach-band {
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden
}

.approach-inner {
  padding-block:80px;
  display:grid;
  grid-template-columns:60px 1.3fr 1fr;
  gap:40px;
  align-items:center
}

.approach-inner h2 {
  font-size:clamp(30px,3.2vw,46px);
  margin-bottom:0
}

.approach-inner>div:last-child p {
  color:#c6d3de;
  font-size:15px
}

.technical-mark {
  font-size:68px;
  font-weight:200;
  color:var(--yellow);
  line-height:1
}

.site-footer {
  background:var(--ink);
  color:#fff;
  padding:80px 0 25px
}

.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:45px;
  padding-bottom:65px;
  border-bottom:1px solid #ffffff25
}

.footer-top h2 {
  font-size:clamp(34px,3.7vw,54px);
  margin-bottom:0
}

.footer-top .eyebrow {
  color:var(--yellow)
}

.footer-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr 1.2fr .8fr;
  gap:45px;
  padding-block:65px
}

.footer-grid h3 {
  font-size:12px;
  letter-spacing:.03em;
  font-weight:600;
  margin-bottom:25px
}

.footer-grid p,.footer-grid address,.footer-grid a {
  font-size:12px;
  color:#b7c1cc;
  line-height:1.9
}

.footer-grid .muted {
  font-size:10px
}

.footer-grid a {
  display:block;
  text-decoration:none;
  margin-bottom:8px;
  overflow-wrap:anywhere
}

.footer-grid a:hover {
  color:var(--yellow)
}

.footer-wordmark {
  font-size:42px!important;
  color:#fff!important;
  font-weight:300;
  line-height:1!important;
  letter-spacing:-.03em
}

.footer-wordmark span {
  font-size:13px;
  letter-spacing:.1em
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-top:24px;
  border-top:1px solid #ffffff25;
  font-size:9px;
  color:#aab7c3
}

.footer-bottom p {
  margin-bottom:0
}

.footer-bottom>div {
  display:flex;
  gap:25px
}

.footer-bottom a {
  text-decoration:none
}

.page-intro {
  padding-block:75px 64px
}

.page-intro h1 {
  margin-bottom:24px;
  max-width:20ch
}

.page-intro .lead {
  color:var(--muted);
  max-width:62ch;
  margin-bottom:0
}

.page-intro .eyebrow {
  color:var(--blue)
}

.page-intro+.section {
  padding-top:15px
}

.split-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}

.editorial-image {
  height:650px;
  background:var(--soft);
  overflow:hidden;
  border-radius:var(--radius)
}

.editorial-image img {
  height:100%;
  width:100%;
  object-fit:cover
}

.split-section p {
  font-size:15px;
  color:var(--muted)
}

.large-year {
  font-size:90px;
  letter-spacing:-.07em;
  font-weight:300;
  color:var(--blue);
  display:block;
  line-height:1;
  margin-bottom:45px
}

.large-year span {
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:13px;
  color:var(--muted)
}

.value-grid,.sector-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px;
  margin-top:45px
}

.value-grid article {
  border-top:1px solid #b9c3cb;
  padding-top:25px
}

.value-grid h3 {
  font-size:23px;
  margin-top:30px
}

.value-grid p,.sector-grid p {
  font-size:14px;
  color:var(--muted)
}

.facts {
  margin:0 0 28px
}

.facts>div {
  padding:17px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:150px 1fr;
  gap:25px
}

.facts dt {
  font-size:12px;
  color:var(--muted)
}

.facts dd {
  font-size:14px;
  margin:0;
  overflow-wrap:anywhere;
  white-space:pre-line
}

.services-overview {
  padding-bottom:30px
}

.services-overview .service-row {
  border-top:1px solid var(--line);
  border-bottom:0;
  padding-block:45px
}

.services-overview .service-row:last-child {
  border-bottom:1px solid var(--line)
}

.sector-grid article {
  padding:30px 22px;
  background:var(--soft)
}

.sector-grid h3 {
  font-size:22px
}

.service-detail {
  padding-bottom:85px
}

.service-detail-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  border-top:1px solid var(--line);
  padding-top:30px;
  margin-bottom:70px
}

.service-detail-heading>p {
  max-width:45ch;
  font-size:20px;
  color:var(--muted)
}

.scope-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px 80px;
  margin-bottom:60px
}

.scope-grid article {
  padding-top:22px;
  border-top:1px solid var(--line)
}

.scope-grid h2 {
  font-size:28px;
  margin-top:25px
}

.scope-grid p {
  font-size:15px;
  color:var(--muted)
}

.notice {
  border:1px solid #e0cd85;
  background:#fff9e4;
  padding:20px 25px;
  font-size:13px;
  line-height:1.7;
  color:#4b401e;
  max-width:none;
  border-radius:var(--radius)
}

.notice p {
  margin:8px 0 0
}

.portfolio-section {
  padding-bottom:90px
}

.portfolio-toolbar {
  margin-top:45px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px
}

.filter-group {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.filter {
  background:#fff;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:30px;
  font-size:12px;
  padding:10px 19px;
  white-space:nowrap
}

.filter.active {
  background:var(--navy);
  color:#fff;
  border-color:var(--navy)
}

.filter:hover {
  border-color:var(--navy)
}

.project-search {
  border-bottom:1px solid #9ba7b1;
  display:flex;
  align-items:center;
  gap:15px;
  min-width:210px
}

.project-search>span:not(.sr-only) {
  font-size:25px
}

.project-search input {
  width:100%;
  min-width:0;
  min-height:44px;
  border:0;
  background:transparent;
  font-size:13px
}

.breadcrumb {
  display:flex;
  gap:15px;
  font-size:11px;
  padding-top:30px;
  color:var(--muted)
}

.breadcrumb+.page-intro {
  padding-top:45px
}

.gallery-stage {
  position:relative;
  height:min(65vw,660px);
  min-height:260px;
  display:grid;
  place-items:center;
  background:#e5e9eb;
  margin:0;
  overflow:hidden;
  border-radius:var(--radius)
}

.gallery-main {
  object-fit:scale-down;
  max-height:100%;
  height:100%;
  width:100%;
  transition:opacity .2s
}

.gallery-main.is-loading {
  opacity:.35
}

.expand-image {
  position:absolute;
  bottom:20px;
  right:20px;
  min-height:44px;
  padding:12px 17px;
  border:0;
  background:#fff;
  font-size:12px;
  border-radius:var(--radius)
}

.gallery-loading,.image-error {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:14px;
  margin:0;
  z-index:1;
  pointer-events:none;
  color:var(--navy)
}

.image-error {
  background:#e5e9eb;
  padding:30px;
  text-align:center
}

.gallery-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:18px 0
}

.gallery-toolbar>div {
  display:flex;
  gap:9px
}

.icon-button {
  width:46px;
  height:46px;
  flex-shrink:0;
  border:1px solid #b8c3cc;
  background:transparent;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1
}

.icon-button:hover {
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow)
}

.gallery-count {
  margin:0;
  font-size:13px;
  font-variant-numeric:tabular-nums
}

.gallery-hint {
  font-size:11px;
  color:var(--muted)
}

.gallery-thumbs {
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:7px 3px 17px;
  scrollbar-width:thin;
  max-height:110px
}

.gallery-thumbs button {
  width:90px;
  height:65px;
  flex-shrink:0;
  background:var(--soft);
  border:2px solid transparent;
  padding:0;
  border-radius:2px;
  overflow:hidden
}

.gallery-thumbs button[aria-pressed=true] {
  border-color:var(--navy);
  outline:2px solid var(--yellow);
  outline-offset:1px
}

.gallery-thumbs img {
  width:100%;
  height:100%;
  object-fit:cover
}

.project-description>div>p:not(.lead) {
  font-size:13px;
  color:var(--muted)
}

.lightbox {
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:24px 35px;
  background:#000814f5;
  color:#fff;
  border:0;
  overflow:auto
}

.lightbox::backdrop {
  background:var(--ink)
}

.lightbox-top {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center
}

.lightbox-caption {
  font-size:13px;
  margin:0;
  color:#d8dfe5
}

.lightbox-stage {
  height:calc(100dvh - 180px);
  min-height:200px;
  display:grid;
  grid-template-columns:50px 1fr 50px;
  align-items:center;
  gap:20px;
  margin-top:15px;
  touch-action:pan-y
}

.lightbox-stage img {
  width:100%;
  height:100%;
  min-height:0;
  object-fit:scale-down;
  max-width:1600px;
  max-height:100%;
  margin:auto
}

.lightbox-help,.lightbox-status {
  text-align:center;
  font-size:11px;
  color:#c7d2dd;
  margin:10px 0 0
}

.credential-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-top:50px
}

.credential-grid article {
  background:#fff;
  border:1px solid var(--line);
  padding:30px
}

.credential-grid h3 {
  margin-top:30px
}

.credential-grid p {
  font-size:14px;
  color:var(--muted)
}

.contact-grid {
  display:grid;
  grid-template-columns:1.35fr 1fr .8fr;
  gap:50px
}

.contact-grid>article {
  border-top:1px solid var(--line);
  padding-top:30px
}

.contact-grid>article>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin-top:30px
}

.contact-large {
  font-size:clamp(17px,1.65vw,24px);
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding-bottom:15px;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere
}

.contact-grid address {
  font-size:15px;
  color:var(--muted)
}

.person {
  border-bottom:1px solid var(--line);
  padding:5px 0 24px;
  margin-bottom:24px
}

.person h3 {
  font-size:24px
}

.person a {
  font-size:16px;
  text-decoration:none;
  display:flex;
  justify-content:space-between
}

.prose {
  max-width:850px;
  padding-bottom:90px
}

.prose h2 {
  font-size:28px;
  margin:35px 0 20px
}

.prose p {
  color:var(--muted)
}

.error-actions {
  display:flex;
  gap:30px;
  align-items:center;
  margin-bottom:100px
}

.quote-layout {
  display:grid;
  grid-template-columns:.75fr 1.6fr;
  gap:90px;
  padding-bottom:100px
}

.quote-layout aside {
  padding-top:10px
}

.quote-layout aside h2 {
  font-size:34px
}

.quote-layout aside>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted)
}

.contact-block {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:35px 0;
  padding-block:25px
}

.contact-block h3 {
  font-size:20px
}

.contact-block>a {
  font-size:14px;
  overflow-wrap:anywhere
}

.contact-block p {
  font-size:13px;
  margin-top:25px
}

.contact-block p:last-child {
  margin-bottom:0
}

.contact-block p a {
  font-size:18px
}

.preview-notice {
  margin-bottom:35px
}

fieldset {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}

.form-section {
  border-top:1px solid var(--line);
  padding-top:30px;
  margin-top:28px
}

.form-section h2 {
  font-size:26px;
  margin-bottom:30px;
  display:flex;
  gap:20px;
  align-items:center
}

.form-section h2>span {
  font-size:11px;
  letter-spacing:0;
  color:var(--muted)
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px
}

.field {
  margin-bottom:24px;
  min-width:0
}

.field>label {
  display:block;
  font-size:12px;
  font-weight:600;
  margin-bottom:10px
}

.field>label>span[aria-hidden] {
  color:#685000
}

.field input:not([type=checkbox]),.field select,.field textarea {
  width:100%;
  min-width:0;
  border:1px solid #a3afb8;
  border-radius:var(--radius);
  background:#fff;
  color:var(--ink);
  padding:13px 14px;
  min-height:50px;
  font-size:14px;
  line-height:1.6
}

.field textarea {
  resize:vertical
}

.field select {
  padding-right:30px
}

.field-hint {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  margin:8px 0
}

.field-error {
  font-size:12px;
  color:#9c2622;
  line-height:1.6;
  margin-top:8px
}

.field [aria-invalid=true] {
  border-color:#9c2622!important;
  background:#fff9f7!important
}

.conditional {
  padding:24px 24px 0;
  background:var(--soft);
  border-radius:var(--radius);
  margin-bottom:25px
}

.checkbox-label {
  display:flex!important;
  align-items:flex-start;
  gap:12px;
  font-size:12px!important;
  font-weight:400!important
}

.checkbox-label input {
  width:19px;
  height:19px;
  flex-shrink:0;
  margin:2px 0;
  accent-color:var(--navy)
}

.form-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:30px
}

.reset-button {
  min-height:44px;
  background:none;
  border:0;
  font-size:12px;
  text-decoration:underline
}

.error-summary {
  border:1px solid #9c2622;
  background:#fff6f3;
  padding:22px;
  margin-bottom:25px;
  font-size:13px;
  color:#7b1d19
}

.error-summary ul {
  padding-left:20px;
  margin-bottom:0
}

.error-summary a {
  display:inline-block;
  min-height:30px
}

.enquiry-review {
  margin-top:40px;
  padding:30px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:var(--radius)
}

.enquiry-review h2 {
  font-size:30px
}

.enquiry-review .notice {
  margin-bottom:20px
}

.enquiry-review .facts>div {
  grid-template-columns:130px 1fr
}

.enquiry-review .button {
  margin-top:20px
}

.image-unavailable {
  min-height:240px;
  background:var(--soft);
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:14px
}

.failed-image {
  opacity:.15
}

.failed-image-wrap:after {
  position:absolute;
  content:'Photograph unavailable';
  inset:0;
  display:grid;
  place-items:center;
  color:var(--ink);
  font-size:13px
}

.reveal-ready {
  transition:opacity .6s,translate .6s
}

.reveal-ready:not(.in-view) {
  opacity:1;
  translate:0 12px
}

.reveal-ready.in-view {
  opacity:1;
  translate:0
}

@media(min-width:1500px) {
  .hero {
    min-height:790px
  }

  .hero-content {
    padding-top:95px
  }

}

@media(max-width:1100px) {
  .site-header nav {
    gap:23px
  }

  .brand,.brand img {
    width:200px
  }

  .header-inner {
    gap:20px;
    min-height:85px
  }

  .hero {
    min-height:670px
  }

  .hero-content {
    padding-top:65px
  }

  .footer-grid {
    gap:30px;
    grid-template-columns:1fr 1fr
  }

  .quote-layout {
    gap:45px
  }

  .contact-grid {
    gap:30px
  }

  .value-grid,.sector-grid {
    grid-template-columns:1fr 1fr
  }

  .split-section {
    gap:45px
  }

  .editorial-image {
    height:570px
  }

  .hero-caption {
    justify-self:center
  }

  .card-meta {
    align-items:flex-start;
    flex-wrap:wrap
  }

  .facts>div {
    grid-template-columns:120px 1fr;
    gap:15px
  }

  .approach-inner {
    gap:25px;
    grid-template-columns:40px 1.3fr 1fr
  }

  .credential-grid {
    gap:15px
  }

  .credential-grid article {
    padding:24px
  }

}

@media(max-width:850px) {
  .site-header nav {
    gap:18px
  }

  .site-header nav>a:not(.button) {
    font-size:12px
  }

  .site-header .button.small {
    font-size:11px;
    gap:10px;
    padding:10px 13px
  }

  .brand,.brand img {
    width:170px
  }

  .hero-bottom {
    grid-template-columns:1fr 1fr
  }

  .scroll-cue {
    display:none
  }

  .project-grid {
    grid-template-columns:1fr 1fr
  }

  .project-grid>.project-card:last-child:nth-child(3) {
    grid-column:auto
  }

  .intro-section,.two-column {
    gap:40px
  }

  .intro-section h2 {
    font-size:36px
  }

  .service-row {
    grid-template-columns:60px 1fr 50px
  }

  .approach-inner {
    grid-template-columns:1fr 1fr
  }

  .technical-mark {
    display:none
  }

  .quote-layout {
    grid-template-columns:1fr;
    gap:35px
  }

  .quote-layout aside {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 30px
  }

  .quote-layout aside>.eyebrow,.quote-layout aside>.section-note {
    grid-column:1/-1
  }

  .quote-layout aside h2 {
    grid-column:1
  }

  .quote-layout aside>.contact-block {
    grid-column:2;
    grid-row:2/5;
    margin:0
  }

  .quote-layout aside>p:not(.eyebrow) {
    grid-column:1
  }

  .scope-grid {
    gap:35px
  }

  .contact-grid {
    grid-template-columns:1fr 1fr
  }

  .contact-grid>article:last-child {
    grid-column:1/-1
  }

  .credential-grid {
    grid-template-columns:1fr
  }

  .credential-grid article h3 {
    margin-top:18px
  }

  .credential-grid article p {
    max-width:80ch
  }

  .split-section {
    gap:30px
  }

  .editorial-image {
    height:520px
  }

  .large-year {
    font-size:75px
  }

  .portfolio-toolbar {
    flex-direction:column;
    gap:25px
  }

  .project-search {
    width:100%
  }

  .gallery-hint {
    max-width:160px;
    text-align:right;
    font-size:10px
  }

}

@media(max-width:680px) {
  :root {
    --gutter:22px
  }

  html {
    scroll-padding-top:90px
  }

  .preview-bar {
    font-size:8px;
    letter-spacing:.06em;
    padding-block:5px;
    min-height:24px
  }

  .preview-bar span {
    display:none
  }

  .header-inner {
    min-height:77px;
    gap:15px
  }

  .brand,.brand img {
    width:178px
  }

  .brand img {
    height:52px
  }

  .menu-toggle {
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:4px;
    padding:9px 12px;
    min-height:44px;
    font-size:11px
  }

  .menu-toggle span {
    font-size:16px
  }

  .site-header nav {
    display:none;
    position:absolute;
    left:0;
    top:100%;
    right:0;
    background:#fff;
    padding:18px var(--gutter) 25px;
    box-shadow:0 16px 20px #00081412;
    border-bottom:1px solid var(--line);
    align-items:stretch;
    gap:0
  }

  .site-header nav.is-open {
    display:flex;
    flex-direction:column
  }

  .site-header nav>a:not(.button) {
    font-size:16px;
    padding:14px 0;
    border-bottom:1px solid var(--line)
  }

  .site-header nav>a[aria-current]:after {
    display:none
  }

  .site-header nav>a[aria-current] {
    color:var(--blue)
  }

  .site-header .button.small {
    margin-top:20px;
    font-size:13px;
    padding:13px 17px
  }

  .hero {
    min-height:720px
  }

  .hero-content {
    padding-top:60px;
    padding-bottom:45px
  }

  .hero h1 {
    font-size:clamp(48px,12vw,70px);
    line-height:1.05
  }

  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.14em;
    gap:9px;
    margin-bottom:30px
  }

  .hero-content>p:not(.eyebrow) {
    font-size:14px;
    line-height:1.8
  }

  .hero-image img {
    object-position:60% center
  }

  .hero:before {
    background:linear-gradient(90deg,#000814ee,#000814a3 60%,#00081460),linear-gradient(0deg,#000814f0,transparent 70%)
  }

  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    margin-top:28px
  }

  .hero-actions .button {
    font-size:12px;
    min-height:50px;
    padding:12px 17px;
    gap:24px
  }

  .hero-actions .text-link {
    font-size:12px
  }

  .hero-bottom {
    padding-block:20px;
    gap:18px;
    min-height:95px
  }

  .hero-bottom>div {
    gap:13px
  }

  .hero-since {
    font-size:30px
  }

  .hero-bottom>div>span:last-child {
    font-size:9px;
    max-width:80px
  }

  .hero-caption {
    justify-self:end
  }

  .hero-caption .label {
    font-size:7px
  }

  .hero-caption strong {
    font-size:12px
  }

  .hero-caption>span:last-child {
    font-size:17px;
    margin-left:5px
  }

  .intro-section,.two-column,.split-section {
    grid-template-columns:1fr;
    gap:28px
  }

  .intro-section h2 {
    font-size:39px
  }

  .intro-copy {
    padding:0
  }

  .intro-copy .lead {
    font-size:21px
  }

  .intro-copy>p:not(.lead) {
    font-size:14px
  }

  .eyebrow {
    font-size:9px;
    margin-bottom:22px
  }

  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:25px;
    margin-bottom:32px
  }

  .section-heading>p {
    font-size:13px
  }

  .section-heading h2 {
    font-size:37px
  }

  .section-note {
    font-size:12px
  }

  .service-row {
    grid-template-columns:30px 1fr 35px;
    gap:13px;
    padding:27px 0;
    min-height:150px;
    align-items:start
  }

  .service-row>span:first-child {
    padding-top:7px;
    font-size:10px
  }

  .service-row h3 {
    font-size:26px;
    line-height:1.15
  }

  .service-row p {
    font-size:12px;
    line-height:1.7
  }

  .service-row>span:last-child {
    width:34px;
    height:34px;
    font-size:21px;
    margin-top:3px
  }

  .service-row:hover {
    padding-left:5px;
    padding-right:5px
  }

  .project-grid {
    grid-template-columns:1fr;
    gap:36px
  }

  .project-image {
    aspect-ratio:1.35
  }

  .project-card h3 {
    font-size:26px
  }

  .card-meta {
    font-size:9px;
    margin-top:16px
  }

  .approach-inner {
    grid-template-columns:1fr;
    padding-block:60px;
    gap:25px
  }

  .approach-inner h2 {
    font-size:35px
  }

  .approach-inner>div:last-child p {
    font-size:14px
  }

  .footer-top {
    align-items:flex-start;
    flex-direction:column;
    gap:30px;
    padding-bottom:45px
  }

  .footer-top h2 {
    font-size:37px
  }

  .footer-top .button {
    font-size:12px;
    padding:13px 17px;
    gap:25px
  }

  .site-footer {
    padding-top:60px
  }

  .footer-grid {
    padding-block:45px;
    gap:35px 20px;
    grid-template-columns:1fr 1fr
  }

  .footer-grid>div:first-child {
    grid-column:1/-1
  }

  .footer-grid>div:nth-child(3) {
    grid-column:1/-1;
    grid-row:3
  }

  .footer-grid h3 {
    font-size:11px;
    margin-bottom:17px
  }

  .footer-grid a,.footer-grid address {
    font-size:11px
  }

  .footer-grid>div:nth-child(3) a {
    min-height:32px
  }

  .footer-bottom {
    flex-direction:column;
    gap:14px;
    font-size:8px
  }

  .footer-bottom p {
    line-height:1.8
  }

  .page-intro {
    padding-block:50px
  }

  .page-intro h1 {
    font-size:clamp(39px,10vw,58px);
    max-width:16ch
  }

  .page-intro .lead {
    font-size:18px
  }

  .large-year {
    font-size:80px;
    margin-bottom:35px
  }

  .editorial-image {
    height:390px
  }

  .split-section>div:last-child {
    padding-top:15px
  }

  .value-grid,.sector-grid {
    gap:30px 20px
  }

  .value-grid h3 {
    font-size:22px
  }

  .value-grid p,.sector-grid p {
    font-size:12px
  }

  .sector-grid article {
    padding:25px 18px
  }

  .sector-grid h3 {
    font-size:21px
  }

  .services-overview .service-row {
    padding-block:30px
  }

  .scope-grid {
    grid-template-columns:1fr;
    gap:28px
  }

  .scope-grid h2 {
    font-size:27px
  }

  .scope-grid p {
    font-size:14px
  }

  .service-detail-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
    margin-bottom:45px
  }

  .service-detail-heading>p {
    font-size:18px
  }

  .service-detail-heading .button {
    font-size:12px
  }

  .notice {
    font-size:12px;
    padding:18px
  }

  .portfolio-toolbar {
    margin-top:30px
  }

  .filter-group {
    gap:7px
  }

  .filter {
    font-size:11px;
    padding:10px 15px
  }

  .gallery-stage {
    height:300px;
    min-height:0
  }

  .gallery-main {
    object-fit:contain
  }

  .expand-image {
    font-size:10px;
    bottom:12px;
    right:12px;
    padding:9px 12px
  }

  .gallery-toolbar {
    gap:10px
  }

  .gallery-hint {
    display:none
  }

  .gallery-thumbs button {
    width:80px;
    height:60px
  }

  .lightbox {
    padding:16px
  }

  .lightbox-stage {
    height:calc(100dvh - 190px);
    grid-template-columns:1fr;
    position:relative;
    margin:20px 0
  }

  .lightbox-stage>button {
    position:absolute;
    bottom:0;
    background:#001d3de0;
    z-index:2
  }

  .lightbox-prev {
    left:0
  }

  .lightbox-next {
    right:0
  }

  .lightbox-stage img {
    height:calc(100% - 60px);
    align-self:start
  }

  .lightbox-help {
    font-size:10px
  }

  .project-description .lead {
    font-size:18px
  }

  .facts>div {
    grid-template-columns:100px 1fr;
    gap:20px
  }

  .facts dt {
    font-size:11px
  }

  .facts dd {
    font-size:12px
  }

  .contact-grid {
    grid-template-columns:1fr;
    gap:40px
  }

  .contact-grid>article:last-child {
    grid-column:auto
  }

  .contact-grid>article>h2 {
    font-size:32px
  }

  .contact-large {
    font-size:23px
  }

  .contact-grid .person h3 {
    font-size:24px
  }

  .quote-layout aside {
    display:block
  }

  .quote-layout aside h2 {
    font-size:32px
  }

  .quote-layout aside>.contact-block {
    margin-top:30px
  }

  .form-grid {
    grid-template-columns:1fr;
    gap:0
  }

  .form-section h2 {
    font-size:23px;
    gap:15px
  }

  .field {
    margin-bottom:22px
  }

  .field input:not([type=checkbox]),.field select,.field textarea {
    font-size:16px
  }

  .field>label {
    font-size:12px
  }

  .form-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:12px
  }

  .form-actions .button {
    width:100%;
    font-size:12px;
    padding:13px 17px;
    gap:15px
  }

  .reset-button {
    padding-left:0
  }

  .enquiry-review {
    padding:20px
  }

  .enquiry-review .facts>div {
    grid-template-columns:1fr;
    gap:8px
  }

  .quote-layout {
    padding-bottom:65px
  }

  .prose p {
    font-size:14px
  }

  .prose h2 {
    font-size:26px
  }

  .error-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:20px
  }

}

@media(max-width:360px) {
  :root {
    --gutter:18px
  }

  .brand,.brand img {
    width:152px
  }

  .menu-toggle {
    gap:7px;
    padding:9px 10px
  }

  .hero h1 {
    font-size:46px
  }

  .hero-bottom {
    gap:8px
  }

  .hero-caption .label {
    font-size:6px
  }

  .hero-caption strong {
    font-size:11px
  }

  .hero-bottom>div {
    gap:9px
  }

  .hero-since {
    font-size:27px
  }

  .hero-bottom>div>span:last-child {
    font-size:8px
  }

  .footer-top h2 {
    font-size:32px
  }

  .value-grid,.sector-grid {
    grid-template-columns:1fr
  }

  .contact-large {
    font-size:21px
  }

  .service-row {
    grid-template-columns:22px 1fr 30px;
    gap:9px
  }

  .service-row h3 {
    font-size:24px
  }

  .service-row>span:last-child {
    width:30px;
    height:30px
  }

  .page-intro h1 {
    font-size:38px
  }

}

/* Shared location, developer credit, in-page navigation and motion controls. */
html {
  scroll-padding-top:calc(var(--header-height,96px) + 85px);
}

/* Directions belong to the Contact page; the footer keeps a compact legal row. */
.contact-grid {
  grid-template-columns:1.2fr 1fr;
  gap:clamp(40px,8vw,120px);
}

.location-section {
  padding-bottom:90px;
}

.location-panel {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(30px,5vw,80px);
  padding:clamp(28px,4.5vw,64px);
  border-radius:var(--radius);
  background:var(--navy);
  color:#fff;
}

.location-details h2 {
  font-size:clamp(32px,3.3vw,48px);
  margin-bottom:30px;
}

.location-details address {
  color:#d4dfe9;
  font-size:15px;
  line-height:1.9;
}

.location-details address strong {
  color:#fff;
  font-weight:500;
}

.location-details>p:last-child {
  color:#aebfcf;
  font-size:12px;
  line-height:1.8;
  margin:25px 0 0;
}

.directions-links {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  min-width:0;
}

.direction-card {
  display:flex;
  align-items:center;
  gap:20px;
  min-height:88px;
  padding:20px 24px;
  border:1px solid #ffffff35;
  border-radius:var(--radius);
  background:#ffffff06;
  color:#fff;
  text-decoration:none;
}

.direction-index {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:34px;
  height:34px;
  border:1px solid #ffffff28;
  border-radius:50%;
  color:var(--yellow-light);
  font-size:10px;
}

.direction-copy {
  display:grid;
  gap:4px;
  min-width:0;
}

.direction-copy strong {
  font-size:17px;
  font-weight:500;
  letter-spacing:-.02em;
}

.direction-copy>span {
  color:#b5c6d7;
  font-size:11px;
}

.direction-arrow {
  margin-left:auto;
  font-size:25px;
  color:var(--yellow-light);
}

.direction-card:hover {
  border-color:var(--yellow);
  background:#ffffff0d;
}

.location-panel :focus-visible {
  outline-color:var(--yellow);
}

.footer-grid .footer-contact {margin-bottom:8px}
.footer-grid .footer-contact a {display:inline;margin:0}
.footer-address {width:fit-content}
.address-action {display:block;margin-top:10px;color:var(--yellow);font-size:10px}
.address-action>span {margin-left:6px}
.person h3 .whatsapp-contact {font:inherit;text-decoration:none}
.person h3 .whatsapp-contact:hover {color:var(--blue);text-decoration:underline}

.map-popup {
  width:min(560px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:clamp(22px,4vw,36px);
  border:1px solid #ffffff30;
  border-top:3px solid var(--yellow);
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  box-shadow:0 28px 90px #0008;
  overflow:auto;
}
.map-popup[open] {animation:map-popup-enter .25s ease-out}
.map-popup::backdrop {background:#000814b8;backdrop-filter:blur(5px)}
.map-popup-header {display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.map-popup .eyebrow {color:var(--yellow);font-size:10px;margin-bottom:16px}
.map-popup h2 {font-size:clamp(28px,5vw,38px);margin-bottom:22px}
.map-popup address {color:#d4dfe9;font-size:13px;line-height:1.8;margin-bottom:10px;max-width:34ch}
.map-popup>p {color:#b5c6d7;font-size:12px;margin-bottom:24px}
.map-popup-close {display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #ffffff35;border-radius:50%;background:transparent;font-size:16px}
.map-popup-close:hover {border-color:var(--yellow);color:var(--yellow)}
.map-popup :focus-visible {outline-color:var(--yellow)}
.map-popup .direction-card {gap:14px;padding:18px 16px;min-height:80px}
.map-popup .direction-copy strong {font-size:16px}
@keyframes map-popup-enter {from {opacity:0;transform:translateY(12px)}to {opacity:1;transform:translateY(0)}}

.footer-bottom {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px 25px;
}

.footer-bottom .footer-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px 20px;
}

.footer-meta>a {
  display:inline-flex;
  align-items:center;
  min-height:24px;
}

.footer-bottom .developer-credit {
  justify-self:center;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  color:#d4dfe9;
  text-align:center;
  white-space:nowrap;
}

.footer-bottom .developer-credit:hover {
  color:var(--yellow-light);
}

@media(max-width:680px) {
  .footer-bottom {grid-template-columns:1fr;text-align:center}
  .footer-bottom .footer-meta {justify-content:center}
}

.section-navigation {
  position:sticky;
  top:var(--header-height,96px);
  z-index:20;
  background:#fffffffa;
  backdrop-filter:blur(14px);
  border-block:1px solid var(--line);
}

.section-navigation-inner {
  display:flex;
  align-items:center;
  gap:28px;
  min-height:62px;
}

.section-nav-label {
  flex-shrink:0;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.section-navigation-links {
  display:flex;
  min-width:0;
  gap:24px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding:7px 4px;
}

.section-navigation-links a {
  flex-shrink:0;
  max-width:280px;
  display:block;
  min-height:44px;
  padding-block:13px 10px;
  border-bottom:2px solid transparent;
  font-size:11px;
  font-weight:500;
  line-height:1.6;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.section-navigation-links a[aria-current] {
  border-bottom-color:var(--yellow);
  color:var(--blue);
}

.section-with-divider {
  position:relative;
}

.section-divider {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#b5c0cb55,transparent);
  pointer-events:none;
}

.motion-heading {
  position:relative;
}

.motion-heading:after {
  content:'';
  position:absolute;
  bottom:-13px;
  left:0;
  width:42px;
  height:2px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}

.motion-heading.in-view:after {
  transform:scaleX(1);
}

.reveal-ready {
  transition:translate .85s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}

.reveal-ready:not(.in-view) {
  translate:0 24px;
}

.scroll-top {
  position:fixed;
  z-index:25;
  right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  display:grid;
  place-items:center;
  width:48px;
  height:52px;
  padding:2px 4px;
  background:transparent;
  border:0;
  border-radius:4px;
  box-shadow:none;
  text-decoration:none;
  visibility:hidden;
  opacity:0;
  translate:0 12px;
  pointer-events:none;
  transition:opacity .25s,translate .35s,visibility .25s;
}

.crane-icon {
  display:block;
  width:40px;
  height:44px;
  overflow:hidden;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px #0005);
}

.scroll-top.is-visible {
  opacity:1;
  visibility:visible;
  translate:0;
  pointer-events:auto;
}

.scroll-top.is-returning .crane-icon {
  animation:crane-rise .65s cubic-bezier(.2,.8,.2,1);
}

@keyframes crane-rise {
  0%,100% {transform:translateY(0)}
  40% {transform:translateY(-6px)}
  70% {transform:translateY(1px)}
}

@keyframes hover-jump {
  0% {transform:translateY(0)}
  45% {transform:translateY(-7px)}
  75% {transform:translateY(-2px)}
  100% {transform:translateY(-4px)}
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .button,.project-card,.service-row,.site-header nav>a,.filter,.icon-button,.directions-links a,.developer-credit,.section-navigation-links a,.scroll-top {
    transition:transform .25s,box-shadow .25s,background .25s;
  }

  .button:hover,.site-header nav>a:hover,.filter:hover,.icon-button:hover,.directions-links a:hover,.developer-credit:hover,.section-navigation-links a:hover,.scroll-top:hover {
    animation:hover-jump .42s cubic-bezier(.2,.8,.2,1) both;
  }

  .project-card:hover {
    transform:translateY(-5px);
  }

  .service-row:hover {
    transform:translateY(-3px);
  }
}

@media(max-width:680px) {
  .section-navigation-inner {gap:12px;min-height:56px}
  .section-nav-label {display:none}
  .section-navigation-links {gap:20px}
  .section-navigation-links a {font-size:10px;max-width:240px}
  .contact-grid {grid-template-columns:1fr;gap:38px}
  .location-panel {grid-template-columns:1fr;gap:30px;padding:28px 22px}
  .location-section {padding-bottom:65px}
  .location-details h2 {font-size:34px}
  .direction-card {padding:18px 15px;gap:13px;min-height:84px}
  .direction-copy strong {font-size:16px}
  .direction-copy>span {font-size:10px}
  .direction-index {width:30px;height:30px}
  .direction-arrow {font-size:22px}
  .scroll-top {right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:44px;height:48px;padding:2px 4px}
  .crane-icon {width:36px;height:40px}
  .site-footer {padding-bottom:65px}
  .footer-bottom {font-size:9px}
  .footer-bottom .footer-meta {gap:5px 16px}
}

.mobile-menu-intro,.mobile-collection-toolbar,.mobile-collection-progress {display:none}
.enquiry-trap {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#submission-message {margin-block:20px;color:#7b1d19}
#enquiry-receipt {margin-block:24px;padding:20px;background:#fff9e4;border:1px solid #e0cd85;line-height:1.8}
#send-enquiry {margin-right:12px;margin-bottom:12px}
.mobile-collection {display:contents}
html.menu-open,body.menu-open {overflow:hidden}
.menu-backdrop {position:fixed;inset:0;z-index:28;background:#000814b3;backdrop-filter:blur(4px)}
.site-header .no-js-nav {position:static;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;gap:12px;max-height:none;padding:12px 20px;background:#fff;color:var(--ink);border:0;border-radius:0;box-shadow:none}
.site-header .no-js-nav>a:not(.button) {font-size:14px;color:var(--ink)}

@media(max-width:900px),(max-width:1100px) and (pointer:coarse) {
  .header-inner {min-height:76px;gap:14px}
  .brand,.brand img {width:176px}
  .brand img {height:54px}
  .menu-toggle {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:96px;min-height:48px;padding:10px 14px;border:1px solid var(--navy);border-radius:5px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:600}
  .menu-toggle .menu-label {font-size:12px}
  .menu-toggle .menu-icon {position:relative;display:block;width:18px;height:16px}
  .menu-icon i {position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .menu-icon i:nth-child(1) {top:0}
  .menu-icon i:nth-child(2) {top:7px}
  .menu-icon i:nth-child(3) {top:14px}
  .menu-toggle[aria-expanded=true] .menu-icon i:nth-child(1) {transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] .menu-icon i:nth-child(2) {opacity:0}
  .menu-toggle[aria-expanded=true] .menu-icon i:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
  .site-header nav {display:none;position:absolute;top:100%;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:6px;max-height:calc(100dvh - var(--header-height,76px) - 44px);padding:20px;border:1px solid #ffffff30;border-top:3px solid var(--yellow);border-radius:0 0 8px 8px;background:var(--navy);color:#fff;box-shadow:0 18px 44px #0005;overflow-y:auto;overscroll-behavior:contain}
  .site-header nav.is-open {display:flex;animation:map-popup-enter .2s ease-out}
  .mobile-menu-intro {display:block;margin:0 0 8px;color:#adbdcc;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
  .site-header nav>a:not(.button) {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:12px 14px;border:1px solid transparent;border-radius:4px;font-size:17px;color:#fff}
  .site-header nav>a:not(.button)::after {position:static;content:'↗';height:auto;width:auto;background:none;font-size:19px;color:var(--yellow)}
  .site-header nav>a[aria-current]:not(.button) {border-color:#ffffff24;background:#ffffff0b;color:var(--yellow-light)}
  .site-header nav>a[aria-current]:not(.button)::after {display:block;content:'Current page';font-size:10px;font-weight:400;color:#b9c9d8}
  .site-header nav>a:hover {background:#ffffff0b;color:var(--yellow-light)}
  .site-header nav :focus-visible {outline-color:var(--yellow)}
  .site-header .button.small {min-height:52px;margin-top:12px;padding:14px;font-size:14px;background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
}

@media(min-width:600px) and (max-width:1100px) and (max-height:540px) {
  .site-header nav.is-open {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:14px 18px}
  .site-header nav .mobile-menu-intro {grid-column:1/-1;margin-bottom:2px}
  .site-header nav>a:not(.button) {min-height:48px;font-size:14px;padding:10px 12px}
  .site-header .button.small {min-height:48px;margin:0;font-size:13px;padding:10px 12px}
}

@media(max-width:680px) {
  .section {padding-block:52px}
  .page-intro {padding-block:40px}
  .section-navigation-links a {font-size:12px}
  .section-navigation-inner {min-height:58px}
  .field input,.field select,.field textarea,.project-search input {font-size:16px}
  .filter,.expand-image {min-height:44px}
  .mobile-collection {display:block;min-width:0}
  .mobile-collection-toolbar {display:flex;align-items:center;gap:10px;min-height:48px;margin:8px 0;color:var(--muted)}
  .mobile-collection-count {font-size:12px;font-weight:600;color:var(--navy)}
  .mobile-collection-cue {margin-left:auto;font-size:10px;white-space:nowrap}
  .mobile-collection-toolbar button {min-height:44px;min-width:64px;padding:8px 4px;margin-left:auto;border:0;background:none;font-size:12px;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
  .mobile-collection-full .mobile-collection-toolbar {width:min(var(--page),calc(100% - var(--gutter)*2));margin-inline:auto}
  .mobile-scroll-list {display:flex;flex-direction:column;gap:0;max-height:clamp(260px,56svh,440px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--blue) #e6e9ec;scroll-snap-type:y proximity;scroll-padding-block:8px;padding:0 14px;border:1px solid var(--line);border-radius:6px;touch-action:pan-y;overscroll-behavior-y:auto}
  .mobile-scroll-list>* {flex-shrink:0;scroll-snap-align:start}
  .mobile-scroll-list:focus-visible {outline-offset:3px}
  .mobile-collection.is-expanded>.mobile-scroll-list {max-height:none;overflow:visible;scroll-snap-type:none}
  .mobile-collection.has-scroll>.mobile-collection-progress {display:block;width:100%;height:3px;margin-top:6px;border:0;appearance:none;background:#e6e9ec;accent-color:var(--blue)}
  .mobile-collection-progress::-webkit-progress-bar {background:#e6e9ec}
  .mobile-collection-progress::-webkit-progress-value {background:var(--blue)}
  .mobile-collection-full>.mobile-collection-progress {width:calc(100% - var(--gutter)*2);margin-inline:auto}
  .project-grid.mobile-scroll-list>.project-card {display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .project-grid.mobile-scroll-list>.project-card:last-child:nth-child(3) {grid-column:auto;max-width:none}
  .mobile-scroll-list .project-image {grid-column:1;grid-row:1/3;width:96px;aspect-ratio:1}
  .mobile-scroll-list .project-no {top:5px;left:5px;padding:2px 5px;font-size:8px}
  .mobile-scroll-list .image-arrow {width:26px;height:26px;right:5px;bottom:5px;font-size:16px}
  .mobile-scroll-list .card-meta {grid-column:2;margin:0;align-self:end;font-size:9px;line-height:1.5;letter-spacing:.03em}
  .mobile-scroll-list .project-card h3 {grid-column:2;font-size:20px;line-height:1.2;align-self:start}
  .mobile-scroll-list .project-card h3 a {display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
  .mobile-scroll-list .service-row,.services-overview.mobile-scroll-list .service-row {padding:20px 0;min-height:145px;grid-template-columns:22px minmax(0,1fr) 30px;gap:10px}
  .mobile-scroll-list .service-row h3 {font-size:23px;margin-bottom:10px}
  .mobile-scroll-list .service-row p {margin-bottom:0;font-size:13px}
  .mobile-scroll-list .service-row:hover {padding-inline:0}
  .mobile-scroll-list>article {padding:22px 0;border-bottom:1px solid var(--line)}
  .mobile-scroll-list>article:last-child {border-bottom:0}
  .scope-grid.mobile-scroll-list {margin-bottom:32px}
  .scope-grid.mobile-scroll-list h2 {font-size:24px;margin:12px 0}
  .value-grid.mobile-scroll-list h3,.sector-grid.mobile-scroll-list h3 {font-size:23px;margin:12px 0}
  .mobile-scroll-list>article p {font-size:14px;margin-bottom:0;line-height:1.75}
  .sector-grid.mobile-scroll-list>article {background:transparent}
  .credential-grid.mobile-scroll-list>article {padding:24px 0;border:0;border-bottom:1px solid var(--line)}
  .gallery-thumbs.mobile-scroll-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:184px;padding:8px}
  .gallery-thumbs.mobile-scroll-list button {width:100%;height:72px;min-width:0;scroll-snap-align:start}
  .gallery-thumbs.mobile-scroll-list img {width:100%;height:100%;object-fit:cover}
  .gallery-thumbs.mobile-scroll-list~.mobile-collection-progress {margin-bottom:12px}
  .service-detail-heading {margin-bottom:28px}
  .service-list.mobile-scroll-list,.services-overview.mobile-scroll-list {max-height:340px}
  .scope-grid.mobile-scroll-list,.credential-grid.mobile-scroll-list {max-height:360px}
  .value-grid.mobile-scroll-list,.sector-grid.mobile-scroll-list {max-height:330px}
  .filter-group {flex-wrap:nowrap;width:100%;overflow-x:auto;padding-bottom:8px}
  .filter-group .filter {flex-shrink:0}
  .portfolio-section #project-count {margin-block:12px 8px}
  .mobile-scroll-list .reveal-ready {translate:none;opacity:1}
  .footer-grid a,.footer-grid address,.footer-grid p {font-size:13px}
  .footer-grid a {min-height:40px;display:flex;align-items:center}
  .footer-grid .footer-contact a {display:inline-flex;align-items:center;min-height:40px}
  .footer-grid .footer-address {display:block}
  .person h3 .whatsapp-contact {display:inline-flex;align-items:center;min-height:44px}
}

@media(max-width:360px) {
  .brand,.brand img {width:152px}
  .menu-toggle {min-width:90px;padding:10px 12px;gap:10px}
  .project-grid.mobile-scroll-list>.project-card {grid-template-columns:82px minmax(0,1fr);column-gap:12px}
  .mobile-scroll-list .project-image {width:82px}
  .mobile-scroll-list .project-card h3 {font-size:18px}
  .mobile-collection-cue {font-size:9px}
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

  .reveal-ready {
    opacity:1!important;
    translate:none!important
  }

  .project-image:hover>img {
    transform:none
  }

  .scroll-top,.button,.project-card,.service-row,.site-header nav>a {
    transform:none!important;
  }

  .motion-heading:after {
    transform:none;
  }

}

@media print {
  .mobile-collection-toolbar,.mobile-collection-progress {display:none!important}
  .mobile-scroll-list {max-height:none!important;overflow:visible!important;border:0}
  .preview-bar,.site-header,.site-footer,.hero-actions,.gallery-thumbs,.gallery-toolbar,.expand-image,.section-navigation,.scroll-top {
    display:none
  }

  .wrap {
    width:100%
  }

  .hero {
    min-height:auto;
    background:#fff;
    color:#000
  }

  .hero-image,.hero-grid {
    display:none
  }

  .hero:before {
    display:none
  }

  .hero-content {
    padding:0
  }

  .hero h1>span,.hero p {
    color:#000!important
  }

  .section {
    padding-block:30px
  }

  .project-grid {
    grid-template-columns:1fr 1fr
  }

  .hero-bottom {
    display:none
  }

}