:root{--ink:#121b2d;--navy:#062b5a;--blue:#0066c7;--orange:#ff5a1f;--cream:#fffaf2;--muted:#68758a;--line:#e9e6e1}html{scroll-padding-top:25px}body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 56px));margin:auto}.topbar{height:32px;background:var(--navy);color:#e4ebf1;font-size:15px}.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.nav{height:76px;background:#fff;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5;box-shadow:0 2px 18px #064a940a}.logo{display:flex;align-items:center;padding:4px 9px;border-radius:8px;background:#fff;min-width:185px;min-height:70px}.logo-image{display:block;width:167px;max-height:63px;object-fit:contain}.navlinks{display:flex;gap:26px;align-items:center;font-size:15px;font-weight:700}.navlinks a:hover,.navlinks .current{color:var(--orange)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--orange);color:#fff;font-size:15px;font-weight:800;letter-spacing:.025em;padding:11px 16px 11px 20px;border-radius:30px;box-shadow:0 6px 15px #ff5a1f2b;transition:transform .2s}.btn:hover{transform:translateY(-2px)}.btn .arrow{display:grid;place-items:center;background:#fff;color:var(--orange);width:29px;height:29px;border-radius:50%;font-size:18px}.menu-btn{display:none;border:0;background:transparent;color:var(--navy);font-size:26px}
.project-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;padding:72px 0 85px}.project-hero:before{content:'';position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,#06152df2 2%,#092955df 55%,#0b2c54ab),url('../images/project-structural-design.jpg') center 47%/cover}.project-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:45px;align-items:center}.crumb{font-size:15px;color:#d2dce7}.crumb a{color:#fff}.crumb span{padding:0 9px;color:var(--orange)}.project-hero .eyebrow,.project-kicker{font-size:15px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#ff9a62}.project-hero h1{font:800 clamp(45px,6vw,73px)/1.02 var(--display);letter-spacing:-.065em;margin:20px 0 17px;max-width:680px}.project-hero h1 em{font-style:normal;color:var(--orange)}.project-hero p{max-width:610px;color:#d8e2f0;font-size:17px;line-height:1.75;margin:0 0 26px}.hero-meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;color:#fff;font-size:15px}.hero-meta span{display:inline-flex;gap:9px;align-items:center}.hero-meta b{color:var(--orange);font-size:18px}.hero-collage{height:380px;position:relative}.collage-main,.collage-small{position:absolute;overflow:hidden;border:5px solid #fff;border-radius:13px;box-shadow:0 20px 45px #0005}.collage-main{inset:16px 40px 16px 0}.collage-main img,.collage-small img{width:100%;height:100%;object-fit:cover;display:block}.collage-small{width:43%;height:45%;right:0;bottom:0}.collage-tag{position:absolute;left:0;top:0;background:#fff;color:var(--ink);padding:16px 19px;border-radius:12px;box-shadow:0 9px 28px #0003}.collage-tag strong{display:block;color:var(--orange);font:800 24px var(--display)}.collage-tag span{font-size:15px;font-weight:700}
.project-nav-section{padding:40px 0 0;background:var(--cream)}.project-index{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px 24px;box-shadow:0 9px 30px #062b5a09}.project-index-label{font-size:15px;font-weight:800;color:var(--navy);white-space:nowrap}.project-index-links{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.project-index-links a{padding:9px 13px;border:1px solid var(--line);border-radius:22px;font-size:15px;font-weight:700;color:var(--muted);transition:.2s}.project-index-links a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.project-cases{padding:30px 0 100px;background:var(--cream)}.project-case{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;margin-top:30px;min-height:460px;background:#fff;border:1px solid #e9e5df;border-radius:20px;overflow:hidden;box-shadow:0 14px 38px #062b5a10;scroll-margin-top:22px}.project-case:nth-child(even) .case-image{order:2}.case-image{position:relative;min-height:440px;background:var(--navy);overflow:hidden}.case-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;display:block;transition:transform .5s}.project-case:hover .case-image img{transform:scale(1.035)}.case-image:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#06152d9c)}.case-image-caption{position:absolute;z-index:1;left:24px;bottom:22px;color:#fff;font-size:15px;font-weight:700}.case-image-index{position:absolute;z-index:1;left:22px;top:22px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;font:800 19px var(--display);box-shadow:0 0 0 7px #ffffff50}.case-copy{padding:clamp(28px,4vw,54px);display:flex;flex-direction:column;justify-content:center}.case-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.case-category{font-size:15px;letter-spacing:.13em;color:var(--orange);font-weight:800}.case-number{font-size:15px;color:#9aa2ab;font-weight:800}.case-copy h2{font:800 clamp(29px,3.5vw,43px)/1.1 var(--display);letter-spacing:-.05em;margin:0 0 14px}.case-copy>p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 22px}.case-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:23px}.case-detail{padding:13px 14px;border-radius:10px;background:var(--cream);border:1px solid #f0ece6}.case-detail span{display:block;color:var(--orange);font-size:15px;font-weight:800;margin-bottom:4px}.case-detail strong{font-size:15px;line-height:1.45}.case-copy h3{font:800 17px var(--display);margin:0 0 10px}.case-points{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:9px 13px}.case-points li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:#364253}.case-points li:before{content:'✓';position:absolute;left:0;top:0;color:var(--orange);font-weight:900}.case-actions{display:flex;align-items:center;gap:17px;flex-wrap:wrap}.case-actions .text-link{font-size:15px;font-weight:800;color:var(--navy)}.case-actions .text-link span{color:var(--orange);margin-left:5px}.portfolio-note{max-width:840px;margin:30px auto 0;padding:17px 20px;border-left:4px solid var(--orange);background:#fff;color:var(--muted);font-size:15px;line-height:1.65;border-radius:0 10px 10px 0}
.project-cta{background:var(--navy);color:#fff;padding:68px 0}.project-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.project-cta h2{font:800 clamp(31px,4vw,45px)/1.1 var(--display);margin:9px 0}.project-cta h2 em{font-style:normal;color:var(--orange)}.project-cta p{font-size:16px;line-height:1.65;color:#d8e2f0;max-width:680px;margin:0}
.footer{background:#06244c;color:#fff;padding:60px 0 22px}.footer-main{display:grid;grid-template-columns:1.1fr .8fr 1.1fr 1fr;gap:35px;padding-bottom:48px}.footer-brand-col{padding-right:10px}.footer .logo{display:inline-flex}.footer-copy,.footer-cta-column>p{font-size:15px;line-height:1.65;color:#d5e1ef;margin:18px 0 20px}.footer h4{font:800 20px var(--display);margin:4px 0 22px;padding-bottom:16px;border-bottom:1px solid #ffffff55}.footer-links{display:grid;gap:12px}.footer-links a{position:relative;padding-left:20px;color:#e2eaf3;font-size:15px}.footer-links a:before{content:'↗';position:absolute;left:0;color:var(--orange);font-weight:800}.footer-socials{display:flex;gap:9px}.footer-socials a{width:39px;height:39px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px}.footer-contact-list{display:grid;gap:17px}.footer-contact-list>a{display:flex;align-items:center;gap:13px;color:#fff}.footer-contact-list>a>span:first-child{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:20px}.footer-contact-list strong,.footer-contact-list small{display:block}.footer-contact-list strong{font:800 16px var(--display);color:var(--orange);margin-bottom:4px}.footer-contact-list small{font-size:15px;color:#e2eaf3}.footer-enquiry-link{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #ffffff9c;border-radius:30px;padding:9px 10px 9px 18px;color:#fff;font-size:15px;font-weight:700}.footer-enquiry-link span{width:39px;height:39px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:20px}.footer-bottom{min-height:68px;border:1px solid #ffffff80;border-radius:50px;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#e4ebf4;font-size:15px}.footer-bottom>span:last-child{display:flex;align-items:center;gap:10px}.footer-bottom a{color:#fff}.footer-bottom i{font-style:normal;color:var(--orange)}
@media(max-width:900px){.project-hero-grid{gap:24px}.hero-collage{height:320px}.project-case{min-height:0}.case-image{min-height:390px}.case-copy{padding:28px}.footer-main{grid-template-columns:1fr 1fr;gap:34px 28px}}
@media(max-width:700px){.wrap{width:min(var(--max),calc(100% - 34px))}.topbar{font-size:15px}.topbar .wrap{gap:10px}.topbar .wrap>span:last-child{display:none}.nav{height:68px}.logo{min-width:155px;min-height:60px;padding:3px 6px}.logo-image{width:140px;max-height:54px}.menu-btn{display:block}.nav>.btn{display:none}.navlinks{display:none;position:absolute;top:68px;left:-17px;right:-17px;padding:17px;background:var(--navy);color:#fff;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 15px 25px #062b5a30}.navlinks.open{display:flex}.navlinks a{padding:12px 8px;font-size:15px}.navlinks .btn{display:flex;align-self:flex-start;margin-top:9px}.project-hero{padding:42px 0 56px}.project-hero-grid{grid-template-columns:1fr;gap:27px}.project-hero h1{font-size:45px;margin-top:16px}.project-hero p{font-size:16px}.hero-collage{height:265px}.collage-main{inset:12px 28px 12px 0}.collage-small{width:42%;height:44%}.collage-tag{padding:12px 14px}.project-nav-section{padding-top:24px}.project-index{align-items:flex-start;flex-direction:column;padding:17px}.project-index-links{justify-content:flex-start;flex-wrap:nowrap;width:100%;overflow:auto;padding-bottom:4px}.project-index-links a{flex:none}.project-cases{padding:18px 0 62px}.project-case,.project-case:nth-child(even){grid-template-columns:1fr;margin-top:18px;border-radius:15px}.case-image{order:0!important;min-height:270px}.case-copy{padding:23px 19px 25px}.case-copy h2{font-size:30px}.case-copy>p{font-size:15px}.case-details{gap:8px}.case-detail{padding:11px}.case-detail strong,.case-detail span{font-size:15px}.case-points{grid-template-columns:1fr}.project-cta{padding:53px 0}.project-cta-inner{align-items:flex-start;flex-direction:column}.footer{padding:48px 0 18px}.footer-main{grid-template-columns:1fr 1fr;gap:28px 18px;padding-bottom:32px}.footer-brand-col{grid-column:1/-1}.footer h4{font-size:17px;margin-bottom:14px;padding-bottom:11px}.footer-bottom{border-radius:18px;padding:14px;align-items:flex-start;flex-direction:column;font-size:15px}}

.topbar{display:none}
.nav{position:absolute;top:0;left:0;right:0;z-index:10;width:100%;max-width:none;margin:0;height:72px;padding:0 max(8.5%,calc((100% - 1240px)/2));background:rgba(9,13,13,.2);box-shadow:none;color:#fff}
.nav .logo{font-size:24px;color:#ff5a1f;background:#fff;border-radius:9px;padding:3px 8px;min-width:164px;min-height:66px;justify-content:center}
.nav .logo-image{display:block;width:148px;max-height:60px;object-fit:contain}
.navlinks{gap:28px;color:#fff;font-size:15px}
.navlinks a{color:#fff;font-size:15px}
.navlinks a:first-child{color:#fff}
.navlinks a.current{color:var(--orange)}
.navlinks .btn{display:none}
.nav>.btn{display:inline-flex;background:var(--orange);padding:9px 10px 9px 18px;border-radius:30px;min-width:142px;justify-content:space-between}
.nav>.btn .arrow{width:29px;height:29px;background:white;color:var(--orange)}
@media(max-width:850px){.nav{padding:0 24px}.navlinks{gap:17px}.navlinks a{font-size:15px}}
@media(max-width:700px){.nav{height:64px;padding:0 17px}.nav .logo{min-width:145px;min-height:59px;padding:3px 6px}.nav .logo-image{width:132px;max-height:53px}.menu-btn{display:block}.nav>.btn{display:none}.navlinks{display:none;position:absolute;left:0;right:0;top:64px;padding:14px 20px 20px;background:#062b5a;color:#fff;box-shadow:0 15px 20px #064a941a;flex-direction:column;align-items:stretch;gap:0}.navlinks.open{display:flex}.navlinks a{padding:12px 0;border-bottom:1px solid #ffffff25;color:#fff;font-size:15px}.navlinks a:first-child{color:#fff}.navlinks a.current{color:var(--orange)}.navlinks .btn{display:flex;justify-content:space-between;margin-top:12px;border:0}.navlinks{z-index:11}}

/* Shared tablet navigation and footer layout */
@media (min-width: 601px) and (max-width: 1024px) {
  .nav { height: 72px; padding: 0 28px; }
  .nav .menu-btn { display: grid !important; place-items: center; width: 46px; height: 46px; margin-left: auto; position: relative; z-index: 13; border: 1px solid #ffffff60; border-radius: 50%; color: #fff; background: #062b5a; cursor: pointer; }
  .nav .navlinks { display: none !important; position: absolute; top: 72px; left: 22px; right: 22px; z-index: 12; padding: 12px 20px 18px; flex-direction: column; align-items: stretch; gap: 0; color: #fff; background: #062b5a; border: 1px solid #ffffff24; border-radius: 0 0 16px 16px; box-shadow: 0 18px 36px #071b3370; }
  .nav .navlinks.open { display: flex !important; }
  .nav .navlinks a { padding: 14px 2px; color: #fff; border-bottom: 1px solid #ffffff25; }
  .nav .navlinks .btn { display: flex; justify-content: space-between; margin-top: 12px; padding: 10px 12px 10px 18px; border: 0; border-radius: 40px; background: var(--orange); }
  .nav > .btn { display: none; }
  .footer-reference .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
  .footer-reference .footer-brand-col, .footer-reference .footer-cta-column { grid-column: 1 / -1; }
  .footer-reference .footer-brand-col, .footer-reference .footer-column { min-width: 0; }
  .footer-reference .footer-bottom { align-items: flex-start; flex-wrap: wrap; border-radius: 20px; gap: 12px 22px; }
  .footer-reference .footer-bottom > span:last-child { flex-wrap: wrap; }
}

/* Shared phone navigation and footer corrections */
@media (max-width: 600px) {
  .nav .menu-btn { display: grid !important; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff60; border-radius: 50%; background: #062b5a; color: #fff; font-size: 19px; }
  .nav .navlinks { display: none !important; top: 66px; left: 12px; right: 12px; padding: 10px 18px 16px; border: 1px solid #ffffff24; border-radius: 0 0 15px 15px; background: #062b5a; box-shadow: 0 16px 34px #071b3370; }
  .nav .navlinks.open { display: flex !important; }
  .nav .navlinks a { color: #fff; font-size: 15px; }
  .nav .navlinks .btn { display: flex; }
  .nav > .btn { display: none; }
  .footer-reference { padding: 48px 0 18px; }
  .footer-reference .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 16px; padding-bottom: 30px; }
  .footer-reference .footer-brand-col, .footer-reference .footer-cta-column { grid-column: 1 / -1; }
  .footer-reference .footer-brand-col, .footer-reference .footer-column { min-width: 0; }
  .footer-reference .footer-bottom { min-height: 0; align-items: flex-start; flex-direction: column; flex-wrap: wrap; gap: 10px; padding: 15px; border-radius: 16px; font-size: 13px; line-height: 1.5; }
  .footer-reference .footer-bottom > span:last-child { flex-wrap: wrap; gap: 6px 8px; }
  .footer-reference .footer-contact-list > a > span:last-child { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 600px) { .nav { height: 66px; } }

/* Give each project detail card the full tablet width so its content can wrap cleanly. */
@media (min-width: 701px) and (max-width: 1024px) {
  .project-case,
  .project-case:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
  }

  .project-case:nth-child(even) .case-image {
    order: 0;
  }

  .case-image {
    min-width: 0;
    min-height: clamp(290px, 36vw, 380px);
  }

  .case-copy {
    min-width: 0;
    padding: 34px clamp(26px, 5vw, 52px);
  }

  .case-topline,
  .case-details,
  .case-points,
  .case-actions {
    min-width: 0;
  }

  .case-details,
  .case-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-detail,
  .case-detail strong,
  .case-points li {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 700px) {
  .case-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .case-copy,
  .case-detail {
    min-width: 0;
  }
}


/* Keep phone footers in a clear, readable single-column flow. */
@media (max-width: 600px) {
  .footer-reference .footer-main { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .footer-reference .footer-brand-col, .footer-reference .footer-column, .footer-reference .footer-cta-column { grid-column: auto; min-width: 0; }
  .footer-reference .footer-copy, .footer-reference .footer-cta-column > p { font-size: 15px; line-height: 1.6; }
  .footer-reference .footer-column h4 { font-size: 18px; }
  .footer-reference .footer-links a { font-size: 15px; }
  .footer-reference .footer-contact-list > a { min-width: 0; }
  .footer-reference .footer-contact-list > a > span:last-child { min-width: 0; }
  .footer-reference .footer-contact-list small { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
  .footer-reference .footer-bottom > span:first-child { overflow-wrap: anywhere; }
}