:root { --ink:#10232b; --ink2:#18343d; --teal:#087d91; --aqua:#9ee4e8; --paper:#f5f6f3; --white:#fff; --muted:#52666b; --line:#cad4d2; --red:#d92118; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 Arial, Helvetica, sans-serif; }
    a { color:inherit; }
    a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid #22a9bb; outline-offset:4px; }
    img { display:block; max-width:100%; }
    .wrap { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
    .site-header { background:var(--ink); color:var(--white); position:relative; z-index:10; }
    .header-inner { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
    .brand { display:inline-flex; align-items:center; gap:13px; text-decoration:none; min-width:0; }
    .brand img { width:55px; height:55px; object-fit:contain; background:#fff; border-radius:4px; }
    .brand-name { font-weight:800; letter-spacing:.115em; font-size:17px; line-height:1.15; white-space:nowrap; }
    .brand-name small { display:block; color:var(--aqua); font-size:11px; letter-spacing:.31em; margin-top:4px; }
    .desktop-nav { display:flex; align-items:center; gap:31px; }
    .desktop-nav a { text-decoration:none; color:#d8e4e4; font-size:14px; font-weight:700; }
    .desktop-nav a:hover { color:#fff; }
    .desktop-nav .nav-call { background:var(--aqua); color:var(--ink); padding:11px 18px; border-radius:3px; }
    .mobile-menu { display:none; }
    .hero { background:var(--ink); color:#fff; overflow:hidden; }
    .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; min-height:600px; }
    .hero-copy { padding:78px 5vw 78px max(24px, calc((100vw - 1180px)/2)); align-self:center; }
    .eyebrow { margin:0 0 24px; color:var(--aqua); font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
    h1,h2,h3,p { margin-top:0; }
    h1 { font-size:clamp(43px,5.25vw,78px); font-weight:700; line-height:1.04; letter-spacing:-.055em; max-width:670px; margin-bottom:27px; }
    .hero-copy > p:not(.eyebrow) { max-width:550px; color:#d3e0df; font-size:18px; line-height:1.62; margin-bottom:34px; }
    .actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
    .button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 20px; border-radius:3px; text-decoration:none; font-weight:800; font-size:15px; white-space:nowrap; transition:transform .2s ease,background .2s ease; }
    .button:hover { transform:translateY(-2px); }
    .button-primary { background:var(--red); color:#fff; }
    .button-secondary { border:1px solid #789097; color:#fff; }
    .hero-art { position:relative; min-height:500px; background:linear-gradient(135deg,#1b4853,#10232b); }
    .hero-art img { width:100%; height:100%; object-fit:cover; object-position:center; position:absolute; inset:0; }
    .hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,35,43,.2),transparent 55%),linear-gradient(0deg,rgba(16,35,43,.2),transparent 35%); pointer-events:none; }
    .hero-art .image-label { position:absolute; z-index:1; bottom:30px; right:30px; background:rgba(16,35,43,.88); border-left:3px solid var(--aqua); padding:11px 15px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
    .proof { background:var(--teal); color:#fff; }
    .proof-inner { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding-block:25px; }
    .proof-item { display:flex; align-items:baseline; gap:12px; border-right:1px solid rgba(255,255,255,.33); font-size:13px; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
    .proof-item:last-child { border:0; }
    .proof-item strong { font-size:22px; letter-spacing:-.04em; line-height:1; }
    section { scroll-margin-top:24px; }
    .section-pad { padding:105px 0; }
    .section-heading { max-width:850px; margin-bottom:42px; }
    .section-heading .eyebrow { color:var(--teal); margin-bottom:13px; }
    h2 { font-size:clamp(33px,4vw,52px); line-height:1.12; letter-spacing:-.045em; margin-bottom:17px; }
    .section-heading p:last-child { color:var(--muted); font-size:18px; max-width:680px; margin:0; }
    .service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
    .service { background:#fff; padding:32px; min-height:232px; }
    .service .number { font-size:13px; color:var(--teal); font-weight:800; letter-spacing:.14em; }
    .service h3 { font-size:23px; line-height:1.2; margin:26px 0 12px; letter-spacing:-.035em; }
    .service p { color:var(--muted); margin:0; }
    .work { background:#e8eeeb; }
    .work-layout { display:grid; grid-template-columns: .78fr 1.22fr; gap:70px; }
    .work-intro { position:sticky; top:30px; align-self:start; }
    .work-intro .eyebrow { color:var(--teal); }
    .work-intro p { color:var(--muted); font-size:18px; max-width:380px; }
    .work-intro .section-link { display:inline-block; margin-top:16px; color:#075d6d; font-weight:800; text-underline-offset:4px; }
    .case { border-top:1px solid #9aafad; padding:28px 0 34px; display:grid; grid-template-columns:60px 1fr; gap:20px; }
    .case:last-child { border-bottom:1px solid #9aafad; }
    .case .index { color:var(--teal); font-size:14px; font-weight:800; }
    .case h3 { font-size:25px; line-height:1.2; letter-spacing:-.035em; margin-bottom:10px; }
    .case p { color:var(--muted); margin:0; max-width:510px; }
    .case-image { display:block; aspect-ratio:1.65; overflow:hidden; margin-bottom:18px; background:#c4d1d0; }
    .case-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
    .case-image:hover img { transform:scale(1.03); }
    .case h3 a { text-decoration:none; }
    .case h3 a:hover { text-decoration:underline; text-underline-offset:4px; }
    .projects-main { background:var(--paper); }
    .projects-intro { padding:86px 0 48px; max-width:900px; }
    .projects-intro .eyebrow { color:var(--teal); margin-bottom:15px; }
    .projects-intro p:last-child { color:var(--muted); font-size:18px; max-width:680px; }
    .project-entry { border-top:1px solid var(--line); padding:42px 0 64px; scroll-margin-top:30px; }
    .project-entry-header { display:grid; grid-template-columns: .75fr 1fr; gap:50px; align-items:start; margin-bottom:22px; }
    .project-entry .project-number { color:var(--teal); font-size:13px; font-weight:800; letter-spacing:.15em; }
    .project-entry h2 { font-size:clamp(27px,3vw,39px); margin:8px 0 0; }
    .project-entry-header p { color:var(--muted); font-size:17px; margin:0; max-width:640px; }
    .photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .photo-thumb { display:block; width:100%; padding:0; border:0; aspect-ratio:1.35; overflow:hidden; background:#d7dfdd; cursor:pointer; }
    .photo-thumb:first-child:nth-last-child(2),.photo-thumb:first-child:nth-last-child(2) ~ .photo-thumb { aspect-ratio:1.55; }
    .photo-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
    .photo-thumb:hover img { transform:scale(1.035); }
    .photo-viewer { position:fixed; inset:0; width:100vw; max-width:none; max-height:none; height:100dvh; margin:0; padding:52px 24px 16px; border:0; background:#0b1c22; color:#fff; }
    .photo-viewer::backdrop { background:rgba(5,17,22,.9); }
    .viewer-content { height:100%; display:flex; flex-direction:column; align-items:center; }
    .viewer-content h2 { max-width:calc(100% - 100px); margin:0 0 12px; font-size:clamp(19px,2.5vw,28px); text-align:center; letter-spacing:-.02em; }
    .viewer-stage { position:relative; display:flex; align-items:center; width:100%; flex:1; min-height:0; }
    .viewer-canvas { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:pan-y; }
    .viewer-canvas.is-zoomed { touch-action:none; cursor:grab; }
    .viewer-canvas.is-dragging { cursor:grabbing; }
    .viewer-image { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; user-select:none; will-change:transform; }
    .viewer-arrow,.viewer-close { border:1px solid #70858b; background:#18343d; color:#fff; cursor:pointer; }
    .viewer-arrow { position:absolute; z-index:1; top:50%; transform:translateY(-50%); width:46px; height:60px; border-radius:4px; font-size:38px; line-height:1; }
    .viewer-prev { left:8px; }.viewer-next { right:8px; }
    .viewer-arrow:hover,.viewer-close:hover { background:#286777; }
    .viewer-close { position:absolute; top:10px; right:12px; width:42px; height:42px; border-radius:4px; font-size:31px; line-height:1; }
    .viewer-toolbar { display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; min-height:50px; padding-top:8px; }
    .viewer-count { margin:0; color:#c3d9dc; font-size:15px; font-weight:700; }
    .viewer-zoom-controls { display:flex; align-items:center; gap:7px; }
    .viewer-zoom-controls button { min-width:40px; min-height:38px; border:1px solid #70858b; border-radius:4px; background:#18343d; color:#fff; font-size:21px; cursor:pointer; }
    .viewer-zoom-controls button:hover { background:#286777; }
    .viewer-zoom-controls button:disabled { opacity:.4; cursor:default; }
    .viewer-zoom-controls .viewer-zoom-reset { padding-inline:11px; font-size:14px; }
    .viewer-zoom-level { min-width:49px; text-align:center; font-size:14px; font-variant-numeric:tabular-nums; }
    .projects-return { display:inline-block; color:#075d6d; font-weight:800; margin:0 0 75px; text-underline-offset:4px; }
    .about { background:#fff; }
    .about-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap:90px; align-items:start; }
    .about .eyebrow { color:var(--teal); }
    .about-copy { font-size:19px; line-height:1.65; color:#355056; }
    .about-copy p:last-child { margin-bottom:0; }
    .contact { background:var(--ink); color:#fff; padding:92px 0; }
    .contact-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; }
    .contact h2 { max-width:690px; margin-bottom:15px; }
    .contact p { color:#b8caca; font-size:18px; margin-bottom:0; }
    .contact-links { display:grid; gap:15px; }
    .contact-link { display:block; padding:18px 20px; border:1px solid #45636a; text-decoration:none; transition:background .2s; }
    .contact-link:hover { background:var(--ink2); }
    .contact-link span { display:block; color:var(--aqua); text-transform:uppercase; font-size:12px; letter-spacing:.14em; font-weight:800; margin-bottom:5px; }
    .contact-link strong { font-size:24px; line-height:1.2; overflow-wrap:anywhere; }
    footer { background:#0b1c22; color:#a8bbbd; font-size:13px; }
    .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:25px; }
    footer a { color:#e4eeee; text-decoration:none; }
    @media(max-width:900px) {
      .desktop-nav { display:none; }
      .mobile-menu { display:block; position:relative; }
      .mobile-menu summary { cursor:pointer; list-style:none; font-weight:700; border:1px solid #617a80; padding:9px 13px; border-radius:3px; }
      .mobile-menu summary::-webkit-details-marker { display:none; }
      .mobile-menu nav { position:absolute; right:0; top:49px; width:min(280px,85vw); display:grid; background:#173039; border:1px solid #526e74; box-shadow:0 16px 35px #09161c55; }
      .mobile-menu nav a { padding:12px 18px; text-decoration:none; border-bottom:1px solid #3a535a; }
      .hero-grid { grid-template-columns:1fr; }
      .hero-copy { padding:65px 24px 60px; width:min(740px,100%); margin-inline:auto; }
      .hero-art { min-height:340px; }
      .work-layout,.about-grid,.contact-grid { grid-template-columns:1fr; gap:30px; }
      .work-intro { position:static; }
      .project-entry-header { grid-template-columns:1fr; gap:14px; }
    }
    @media(max-width:650px) {
      .wrap { width:min(100% - 36px,1180px); }
      .header-inner { min-height:72px; }
      .brand img { width:46px; height:46px; }
      .brand-name { font-size:13px; letter-spacing:.08em; }
      .brand-name small { font-size:9px; }
      .hero-copy { padding:51px 18px 54px; }
      h1 { font-size:clamp(42px,10.6vw,60px); }
      .hero-copy > p:not(.eyebrow) { font-size:17px; }
      .hero-art { min-height:270px; }
      .hero-art .image-label { right:16px; bottom:16px; }
      .proof-inner { grid-template-columns:1fr; gap:0; padding-block:8px; }
      .proof-item { padding:12px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.3); }
      .proof-item:last-child { border:0; }
      .section-pad { padding:70px 0; }
      .service-grid { grid-template-columns:1fr; }
      .service { min-height:0; padding:25px; }
      .service h3 { margin-top:14px; }
      .case { grid-template-columns:40px 1fr; gap:10px; }
      .projects-intro { padding:60px 0 35px; }
      .project-entry { padding:34px 0 48px; }
      .photo-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
      .photo-thumb { aspect-ratio:1; }
      .photo-thumb:first-child { grid-column:1/-1; aspect-ratio:1.55; }
      .photo-viewer { padding:58px 0 12px; }
      .viewer-content h2 { max-width:calc(100% - 72px); font-size:19px; padding-inline:10px; }
      .viewer-arrow { width:38px; height:54px; font-size:31px; }
      .viewer-prev { left:4px; }.viewer-next { right:4px; }
      .viewer-toolbar { gap:8px 18px; padding-inline:8px; }
      .contact { padding:70px 0; }
      .contact-link strong { font-size:20px; }
      .footer-inner { flex-direction:column; align-items:flex-start; }
    }
    @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button,.case-image img,.photo-thumb img { transition:none; } }