@font-face { font-family:'Open Sans'; src:url('/assets/fonts/opensans_regular-webfont.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Open Sans'; src:url('/assets/fonts/opensans_semibold-webfont.woff') format('woff'); font-weight:600; font-display:swap; }
@font-face { font-family:Purista; src:url('/assets/fonts/purista_medium-webfont.woff') format('woff'); font-weight:500; font-display:swap; }

:root {
  --font-body:'Open Sans',sans-serif;
  --font-heading:Purista,var(--font-body);
  --ink:#193849;
  --blue:#286399;
  --deep:#0f4361;
  --pale:#f0f3f3;
  --muted:#465760;
  --line:#d5dfe2;
  --shell:clamp(24px,5.5vw,100px);
  /* Logo size: 1 = normal, 1.1 = 10% larger, 0.9 = 10% smaller. */
  --logo-scale:1;
  /* The logo and bar reach their minimum size together. */
  --logo-width:clamp(313.5px,calc((100vw - 100px) * var(--logo-scale)),calc(627px * var(--logo-scale)));
  /* The visible wordmark starts at x=270 in the 627px SVG canvas. */
  --logo-left:calc(var(--shell) - var(--logo-width) * 270 / 627);
  --header-nav-height:84px;
  --header-bar-height:calc(var(--logo-width) * 64 / 627);
  --header:calc(var(--header-nav-height) + var(--header-bar-height));
  --logo-blue:#3da1ff;
  --section-title-size:clamp(2rem,3.2vw,3.3rem);
  --catalog-title-size:clamp(2rem,3.2vw,3.3rem);
  --detail-title-size:var(--catalog-title-size);
  --intro-size:clamp(1.05rem,1.4vw,1.4rem);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header); }
body { margin:0; background:#fff; color:var(--ink); font:16px/1.65 var(--font-body); }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
button,a,input,select,summary { touch-action:manipulation; }
button { cursor:pointer; border:0; }
img { max-width:100%; display:block; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:var(--font-heading); font-weight:500; line-height:1.12; }
h1 { font-size:clamp(2.8rem,5.9vw,5.9rem); letter-spacing:-.035em; }
h2 { font-size:var(--section-title-size); letter-spacing:-.025em; }
h3 { font-size:1.55rem; }
p+p { margin-top:20px; }
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid #297bbd; outline-offset:5px; }
:where(.about-hero,.contact) :focus-visible { outline-color:#b2def8; }
.section-shell { padding:88px var(--shell); }
.eyebrow { display:block; color:var(--blue); font:.7rem/1.5 var(--font-body); letter-spacing:.11em; text-transform:uppercase; font-weight:600; margin-bottom:22px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:50px; padding:13px 22px; text-decoration:none; font-size:.85rem; font-weight:600; background:var(--blue); color:#fff; border:1px solid var(--blue); transition:background .2s,color .2s; }
.button:hover { background:var(--deep); border-color:var(--deep); }
.button-outline { background:transparent; color:var(--ink); border-color:var(--line); }
.button-outline:hover { color:#fff; }
.skip-link { position:fixed; top:-100px; left:12px; z-index:100; padding:12px; background:#fff; }
.skip-link:focus { top:12px; }

/* Shared navigation */
.site-header { height:var(--header); background:#fff; color:var(--ink); position:sticky; top:0; z-index:30; }
.header-navigation { height:var(--header-nav-height); position:relative; display:flex; align-items:center; justify-content:flex-end; padding:0 var(--shell); }
/* The 627 x 108 complete logo has its waterline at y=44. */
/* Crop the extended left waterline at the viewport edge, keeping the wordmark at the page gutter. */
.brand { position:absolute; left:0; top:calc(var(--header-nav-height) - var(--logo-width) * 46 / 627); display:block; width:calc(var(--logo-left) + var(--logo-width)); overflow:hidden; z-index:1; }
.brand img { position:relative; left:var(--logo-left); width:var(--logo-width); max-width:none; height:auto; }
.header-brand-bar { height:var(--header-bar-height); display:flex; align-items:center; gap:16px; padding-right:var(--shell); background:var(--logo-blue); border-top:1px solid; }
.header-since { position:relative; z-index:2; flex-shrink:0; margin-left:auto; color:#444; white-space:nowrap; font:700 clamp(.9rem,1.8vw,1.4rem)/1.2 var(--font-heading); }
.header-brand-bar :focus-visible { outline-color:var(--ink); }
.site-header nav { position:relative; z-index:2; display:flex; align-items:center; gap:40px; }
.site-header nav a { position:relative; padding-top:9px; padding-bottom:9px; text-decoration:none; font-family:var(--font-heading); font-size:1.3rem; font-weight:400; }
.site-header nav a:hover { color:var(--blue); }
.site-header nav a:not(.language)::after { content:''; position:absolute; inset:0 -16px; border:1px solid transparent; pointer-events:none; }
.site-header nav a[aria-current]::after { border-color:var(--line); }
.language { border-left:1px solid var(--line); padding-left:20px; }
.menu-toggle { position:relative; z-index:2; display:none; background:none; color:var(--ink); padding:10px; }

/* Opening About section and artwork share the existing deep-blue palette. */
.about-hero.section-shell { background:var(--deep); color:#c0d0d8; padding-top:54px; overflow:hidden; }
.about-intro { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:start; }
.about-copy { position:relative; z-index:1; margin-right:32px; }
.about-hero .lead { color:#fff; margin-top:24px; font-size:var(--intro-size); font-weight:600; line-height:1.65; }
.about-history,.about-team,.about-anniversary { font-size:var(--intro-size); line-height:1.65; }
.about-anniversary { margin-top:28px; }
.about-art { min-width:0; }
.about-carousel { container-type:inline-size; }
.about-carousel-picture { display:block; aspect-ratio:3/2; margin-top:24px; background:var(--deep); }
.about-carousel-picture img { width:100%; height:100%; object-fit:cover; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent); mask-composite:intersect; }
.about-carousel-slide figcaption,.about-carousel-title { color:#fff; font:500 clamp(1rem,3cqi,1.2rem)/1.3 var(--font-heading); overflow-wrap:anywhere; text-wrap:balance; }
.about-carousel-slide figcaption { min-height:2.6em; margin-top:18px; }
.about-carousel-controls { display:flex; align-items:center; gap:8px; margin-top:16px; }
.about-carousel-controls.is-interactive { display:grid; grid-template-columns:44px minmax(0,1fr) 44px 44px; row-gap:12px; }
.about-carousel-title { display:none; min-width:0; text-align:center; }
.is-interactive .about-carousel-title { grid-column:1/-1; grid-row:1; display:flex; align-items:center; justify-content:center; min-height:2.6em; }
.about-carousel:has(.is-interactive) figcaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.about-carousel-controls [data-carousel-toggle] { grid-column:1; grid-row:2; }
.about-carousel-controls .about-carousel-count { grid-column:2; grid-row:2; }
.about-carousel-controls [data-carousel-prev] { grid-column:3; grid-row:2; }
.about-carousel-controls [data-carousel-next] { grid-column:4; grid-row:2; }
.about-carousel-controls [hidden] { display:none; }
.about-carousel-controls button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; color:#fff; border:1px solid #708c9b; font-size:1.2rem; }
.about-carousel-controls button:hover { background:#ffffff18; }
.about-carousel-controls svg { fill:currentColor; }
.about-carousel-count { font-size:.85rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Shared project cards in the catalogue and awards. */
.project-arrow { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:29px; height:29px; border:1px solid var(--line); border-radius:50%; font-size:1rem; transition:background .2s,color .2s; }
.project-card a:hover .project-arrow { background:var(--blue); border-color:var(--blue); color:#fff; }

.project-card { --card-title-size:1.2rem; min-width:0; }
.project-card a { display:block; text-decoration:none; }
.project-image { position:relative; aspect-ratio:1.6; background:#dfebf2; overflow:hidden; }
.project-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.project-card a:hover img { transform:scale(1.035); }
.project-card-content { padding:22px 0; }
.project-card .eyebrow { font-size:calc(var(--card-title-size) * .9); letter-spacing:.05em; margin-bottom:12px; }
.project-title { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.project-card h3 { font-size:var(--card-title-size); line-height:1.2; }
.project-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; color:#5c707b; font-size:calc(var(--card-title-size) * .9); line-height:1.45; margin-top:20px; }
.project-meta>span:last-child { flex-shrink:0; }

/* Services, awards and contact */
.services { --service-title-size:1.4rem; background:var(--pale); }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; margin-bottom:44px; }
.section-heading>div { max-width:700px; }
.services-list { border-top:1px solid #bdcdd8; }
.service-row { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:40px; align-items:start; padding:18px 0; border-bottom:1px solid #c9d6df; }
.service-row h3 { font-size:var(--service-title-size); line-height:1.3; }
.service-row p { color:var(--muted); font-size:calc(var(--service-title-size) * .9); }
.software { --software-title-size:1.4rem; margin-top:56px; color:var(--muted); font-size:calc(var(--software-title-size) * .7); }
.software h3 { color:var(--ink); font-size:var(--software-title-size); margin-bottom:24px; }
.software-layout { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:48px; align-items:start; }
.software-copy,.software-video { min-width:0; }
.software-video video { display:block; width:100%; height:auto; background:var(--deep); }
.software-video figcaption { font-size:max(.875rem,.65em); margin-top:12px; }
.software ul { padding-left:1.2em; line-height:1.5; margin-top:0; margin-bottom:26px; }
.software li+li { margin-top:8px; }
.software p { line-height:1.5; }
.software a { display:inline-block; margin-top:22px; text-underline-offset:5px; }
.awards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.contact { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(220px,.7fr) minmax(0,1fr); gap:4vw; background:var(--deep); color:#fff; }
.contact-main,.contact-info,.contact-map { min-width:0; }
.contact h2 { margin-bottom:34px; }
.contact-mail,.contact-phone { display:table; font:500 clamp(1rem,2vw,2rem)/1.4 Purista,sans-serif; text-decoration:none; border-bottom:1px solid #85bada; padding-bottom:8px; overflow-wrap:anywhere; }
.contact-phone { margin-top:18px; }
.contact-invitation { font:500 calc(var(--section-title-size) * .5)/1.25 var(--font-heading); margin-top:32px; }
.contact-info { padding-top:8px; }
.contact-info h3 { font-size:1.35rem; margin-bottom:20px; }
.contact-info p { color:#c0d0d8; }
.company-details { margin-top:25px; border-top:1px solid #557381; padding-top:22px; }
.company-details h3 { margin:0 0 12px; font-size:1.1rem; }
.company-details p { font-size:.95rem; }
.contact-map iframe { display:block; width:100%; min-height:340px; height:100%; border:0; background:var(--pale); }
.site-footer { display:flex; justify-content:space-between; gap:30px; align-items:center; padding:28px var(--shell); color:var(--muted); font-size:.7rem; background:#fff; }
.site-footer>a { font-weight:600; text-decoration:none; color:var(--ink); }

/* Catalogue and project details */
.catalog-heading,.detail-heading { padding-top:48px; padding-bottom:55px; background:var(--pale); }
.breadcrumb,.breadcrumbs a { text-decoration:none; color:var(--muted); }
.breadcrumb-sep { margin:0 15px; }
.catalog-heading>div:first-child,.breadcrumbs { font-size:calc(var(--catalog-title-size) * .4); line-height:1.35; }
.catalog-title,.detail-title { margin-top:45px; }
.catalog-title { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.catalog-title h1,.detail-title h1 { font-size:var(--catalog-title-size); overflow-wrap:break-word; }
.catalog-body { padding-top:35px; }
.category-dropdown { display:none; }
.category-dropdown label { display:block; margin-bottom:8px; font-size:.875rem; color:var(--muted); }
.category-dropdown select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:0; background:#f3f6f8; color:var(--ink); font-size:1rem; }
.category-dropdown button { margin-top:10px; padding:10px 16px; background:var(--deep); color:#fff; }
.category-dropdown.is-interactive button { display:none; }
.category-tabs { display:flex; flex-wrap:wrap; gap:10px; border-bottom:1px solid var(--line); padding-bottom:26px; }
.category-tabs button { max-width:100%; padding:11px 15px; font-size:calc(var(--catalog-title-size) * .4); line-height:1.3; text-align:left; color:var(--muted); background:#f3f6f8; border:1px solid transparent; overflow-wrap:anywhere; }
.category-tabs button.active { background:var(--deep); color:white; }
.category-tabs button:hover { border-color:var(--blue); }
.category-tabs span { opacity:.65; margin-left:8px; }
.results-bar { display:flex; justify-content:space-between; align-items:center; margin:32px 0; font-size:calc(var(--catalog-title-size) * .45); line-height:1.4; color:var(--muted); }
.results-bar strong { color:var(--ink); }
.catalog-grid,.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.catalog-grid { gap:40px 30px; }
.catalog-grid .project-card { --card-title-size:1.4rem; border-bottom:1px solid var(--line); }
.image-placeholder { height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; background:var(--deep); color:white; gap:10px; }
.image-placeholder span { font-family:Purista,sans-serif; font-size:2rem; }
.image-placeholder small { color:#abcada; }
.pagination { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:45px; }
.pagination a { padding:9px 18px; border:1px solid var(--line); text-decoration:none; }
.pagination a[aria-current] { background:var(--deep); color:white; border-color:var(--deep); }
.empty-state { text-align:center; padding:90px 30px; }
.empty-state h2 { margin-bottom:20px; }
.empty-state .button { margin-top:30px; }

.breadcrumbs { color:var(--muted); overflow-wrap:anywhere; }
.detail-metadata.section-shell { padding-top:0; padding-bottom:32px; }
.detail-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; border-bottom:1px solid var(--line); }
.detail-facts>div { padding:24px 0; display:flex; flex-direction:column; gap:14px; font-size:calc(var(--detail-title-size) * .5); line-height:1.4; overflow-wrap:anywhere; }
.detail-facts>div>span { color:var(--muted); }
.detail-facts strong { font-weight:600; }
.documentation-stage { display:block; white-space:pre-line; }
.detail-cover { margin:0 var(--shell); }
.detail-cover-link { display:block; position:relative; cursor:zoom-in; }
.detail-cover img { width:100%; height:auto; max-height:630px; object-fit:contain; background:var(--pale); }
.detail-cover figcaption { font-size:.8rem; color:var(--muted); margin-top:12px; }
.detail-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6vw; align-items:start; }
.detail-content--full { grid-template-columns:minmax(0,1fr); }
.detail-aside { min-width:0; font-size:1.14rem; color:var(--muted); }
.project-description { min-width:0; color:var(--muted); font-size:clamp(.9rem,1.3vw,1rem); }
.project-description h2 { font-family:var(--font-body); font-size:1.56rem; font-weight:600; line-height:1.4; margin-bottom:25px; margin-top:45px; color:var(--ink); }
.project-description h2:first-child { margin-top:0; }
.project-description p,.project-description ul,.project-description ol { color:var(--muted); font-size:inherit; line-height:1.8; overflow-wrap:break-word; }
.table-scroll { overflow:auto; margin:25px 0; }
.project-description table { width:100%; border-collapse:collapse; font-size:inherit; line-height:1.5; overflow-wrap:break-word; }
.project-description th,.project-description td { text-align:left; vertical-align:top; padding:16px; border:1px solid var(--line); min-width:100px; }
.project-description th { font-weight:400; background:var(--pale); width:48%; color:var(--muted); }
.project-gallery { padding-top:15px; }
.gallery-grid { gap:35px 24px; }
.gallery-grid img { width:100%; height:240px; object-fit:contain; background:var(--pale); }
.gallery-grid a { display:block; }
.gallery-grid figcaption { font-size:.8rem; color:#5c707b; margin-top:12px; }
.gallery-video { grid-column:1/-1; max-width:1000px; }
.gallery-video video { max-width:100%; width:100%; background:var(--deep); }
.detail-bottom { padding-top:0; }
.preview-banner { background:#f1ddad; padding:16px var(--shell); font-weight:600; }
.lightbox { position:fixed; inset:0; margin:0; border:0; padding:0; background:#0b202e; color:white; width:100vw; height:100dvh; max-width:none; max-height:none; overflow:hidden; }
.lightbox::backdrop { background:rgba(4,14,22,.9); }
.lightbox figure { position:absolute; inset:0; display:grid; grid-template-rows:minmax(0,1fr) auto; }
.lightbox-stage { min-width:0; min-height:0; overflow:hidden; touch-action:none; user-select:none; cursor:zoom-in; }
.lightbox-stage.is-zoomed { cursor:grab; }
.lightbox-stage.is-panning { cursor:grabbing; }
.lightbox img { width:100%; height:100%; max-width:none; object-fit:contain; transform-origin:center; user-select:none; -webkit-user-drag:none; }
.lightbox figcaption { display:flex; justify-content:space-between; gap:20px; max-height:20dvh; overflow:auto; padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); font-size:.85rem; background:#0b202e; }
.lightbox-count { flex-shrink:0; font-variant-numeric:tabular-nums; }
.lightbox button { position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:#0b202ebf; color:white; font-size:2rem; touch-action:manipulation; }
.lightbox button:focus-visible { outline-offset:-4px; }
.lightbox button[hidden] { display:none; }
.lightbox-close { top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); }
.lightbox .lightbox-zoom { top:max(12px,env(safe-area-inset-top)); right:calc(max(12px,env(safe-area-inset-right)) + 60px); font-size:1rem; }
.lightbox-prev { left:max(8px,env(safe-area-inset-left)); top:50%; transform:translateY(-50%); }
.lightbox-next { right:max(8px,env(safe-area-inset-right)); top:50%; transform:translateY(-50%); }
html.viewer-open { overflow:hidden; }

/* Responsive layouts */
@media (max-width:1400px) {
  .contact { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:42px; }
  .contact-map { grid-column:1/-1; }
  .contact-map iframe { height:360px; }
}
@media (max-width:1100px) {
  .about-intro { gap:30px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
  .site-header nav { gap:20px; }
  .software-layout { gap:32px; }
  .detail-content { gap:40px; }
  .detail-facts { gap:20px; }
}
@media (max-width:1050px) {
  :root { --header-nav-height:64px; }
  .header-navigation { padding:0 24px; }
  .menu-toggle { display:block; }
  .site-header nav { display:none; position:absolute; top:var(--header); left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; padding:25px; box-shadow:0 10px 15px #102c3e40; max-height:calc(100dvh - var(--header)); overflow-y:auto; }
  .site-header nav.open { display:flex; }
  .site-header nav a { font-size:1rem; padding:12px; }
  .site-header nav a:not(.language)::after { inset:0; }
  .language { border:0; }
}
@media (max-width:850px) {
  .about-hero.section-shell,.services.section-shell { padding-top:42px; padding-bottom:35px; }
  .about-intro { grid-template-columns:minmax(0,1fr); gap:24px; }
  .about-copy { margin-right:0; }
  .about-art { width:100%; max-width:650px; justify-self:center; }

  .section-shell { padding-top:64px; padding-bottom:64px; }
  .section-heading { gap:25px; }
  .service-row { gap:28px; }
  .software-layout { grid-template-columns:minmax(0,1fr); }
  .awards-grid { gap:25px; }
  .contact { gap:50px; }
  .catalog-grid,.gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-facts { grid-template-columns:minmax(0,1fr); gap:0; }
  .detail-facts>div+div { border-top:1px solid var(--line); }
  .detail-content { grid-template-columns:1fr; gap:40px; }
  .gallery-grid img { height:210px; }
  .site-footer { flex-wrap:wrap; }
  .site-footer span:nth-child(2) { display:none; }
}
@media (max-width:560px) {
  .about-hero.section-shell,.services.section-shell { padding-top:34px; padding-bottom:34px; }
  .about-intro { gap:20px; }
  .about-hero .lead { margin-top:22px; }
  .about-art { width:calc(100% + 24px); margin:0 -12px; }

  .section-heading { display:block; }
  .services { --service-title-size:1.3rem; }
  .service-row { grid-template-columns:minmax(0,1fr); gap:12px; padding:23px 0; }
  .software { margin-top:40px; }
  .awards-grid { grid-template-columns:1fr; gap:30px; }
  .contact { grid-template-columns:1fr; gap:35px; }
  .contact-info { padding-top:0; }
  .contact-mail,.contact-phone { font-size:clamp(1.4rem,6vw,1.8rem); }
  .contact h2 { margin-bottom:30px; }
  .contact-map iframe { height:320px; min-height:320px; }
  .site-footer { padding:25px var(--shell); font-size:.7rem; gap:20px; }
  .catalog-title,.detail-title { margin-top:30px; }
  .catalog-title { display:block; }
  .catalog-heading,.detail-heading { padding-top:28px; padding-bottom:35px; }
  .category-tabs { padding-bottom:18px; gap:8px; }
  .catalog-filters { display:none; }
  .category-dropdown { display:block; padding-bottom:18px; border-bottom:1px solid var(--line); }
  .category-tabs button { padding:10px 12px; }
  .catalog-grid { grid-template-columns:1fr; gap:25px; }
  .project-card-content { padding-top:18px; }
  .catalog-grid .project-card { --card-title-size:1.2rem; }
  .catalog-grid .project-card .eyebrow { font-size:.8rem; }
  .catalog-grid .project-meta { font-size:.875rem; }
  .catalog-body { padding-top:25px; }
  .gallery-grid { grid-template-columns:1fr; gap:28px; }
  .gallery-grid img { height:auto; max-height:360px; }
  .detail-content { padding-top:40px; }
  .project-description th,.project-description td { padding:12px; }
  .project-gallery .section-heading>span { display:block; margin-top:15px; }
}
@media (max-width:319px) {
  .header-since { position:absolute; top:16px; right:96px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none!important; }
}