/* The opening presents every service; its content can grow with larger text. */
.home-page .hero-services ul { list-style: none; margin: 0; padding: 0; }
.home-page .hero-services a { display: flex; align-items: center; gap: 12px; }
.home-page .hero-service-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.home-page .hero-service-arrow { width: 18px; height: 18px; flex: 0 0 18px; }
.home-page .hero-service-thumb { display: none; }
.home-page .hero-gallery { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-page .hero-photo { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; border-radius: 5px; background: #27464a; }
.home-page .hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-position, center); }
.home-page .hero-photo::after { content: ''; position: absolute; inset: 25% 0 0; background: linear-gradient(transparent, #071c20e8); pointer-events: none; }
.home-page .hero-photo-label { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; padding: 12px; color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.home-page .hero-photo:focus-visible { outline-color: var(--mint); outline-offset: 3px; }
@media (hover: hover) {
 .home-page .hero-photo:hover { box-shadow: 0 0 0 2px var(--mint); }
}
@media screen and (min-width: 601px) and (max-width: 1000px) {
 .home-page .hero-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
@media screen {
 .home-page.hero-in-view > .floating-contact { visibility: hidden; opacity: 0; pointer-events: none; }
 .home-page .hero {
  --hero-viewport-height: 100vh;
  --hero-space: max(0px, calc(var(--hero-viewport-height) - var(--hero-chrome-height, calc(var(--header-height, 96px) + 44px))));
  background: var(--navy-deep);
 }
 @supports (height: 100svh) {
  /* Keep the photo crop stable as browser bars toggle; svh still adapts to rotation. */
  .home-page .hero { --hero-viewport-height: 100svh; }
 }
 .home-page .hero-grid {
  min-height: var(--hero-space);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(24px, 3.5svh, 44px);
  align-items: center;
 }
 .home-page .hero-content { max-width: none; }
 .home-page .hero .eyebrow { font-size: .8125rem; line-height: 1.6; letter-spacing: .065em; margin-bottom: 16px; }
 .home-page .hero h1 { font-size: clamp(2.25rem, 3.5vw, 3.75rem); line-height: 1.12; letter-spacing: -.045em; max-width: none; margin: 0; text-wrap: balance; }
 .home-page .hero h1 em { margin-top: .04em; }
 .home-page .hero .hero-intro { font-size: 1rem; line-height: 1.75; color: #d2dedc; max-width: 49ch; margin: 16px 0 22px; }
 .home-page .hero-services ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid #486366; }
 .home-page .hero-services li { min-width: 0; border-bottom: 1px solid #486366; }
 .home-page .hero-services a { min-height: 70px; height: 100%; padding: 13px 0; color: var(--paper); font-size: .9375rem; line-height: 1.5; font-weight: 500; transition: color .18s, background .18s; }
 .home-page .hero-services a > span { min-width: 0; flex: 1; }
 .home-page .hero-service-icon { color: var(--mint); }
 .home-page .hero-services .hero-service-arrow { width: 15px; height: 15px; flex-basis: 15px; color: #a7c4c0; }
 .home-page .hero-services a:focus-visible { outline-color: var(--mint); outline-offset: 3px; border-radius: 2px; }
 .home-page .hero-actions { flex-direction: row; align-items: stretch; margin-top: 26px; gap: 12px; max-width: none; }
 .home-page .hero-actions .button { min-height: 50px; padding: 12px 18px; font-size: .9375rem; line-height: 1.5; gap: 16px; flex: 0 1 auto; }
 .home-page .hero-visual { position: relative; display: block; min-height: 0; align-self: stretch; }
 .home-overview { background: var(--navy-deep); color: var(--paper); }
 .home-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(28px, 4.5vw, 76px); padding-block: 36px 42px; border-top: 1px solid #456467; align-items: center; }
 .home-intro { min-width: 0; }
 .home-intro > p { font-size: 1.1875rem; line-height: 1.8; color: #d2dedc; max-width: 42ch; margin: 0; }
 .home-overview .hero-signature { display: flex; margin-top: 22px; }
 .home-overview .hero-project { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; border-radius: 5px; padding: 25px 28px; gap: 8px 22px; }
 .home-overview .hero-project > span:first-child,
 .home-overview .hero-project strong,
 .home-overview .hero-project-note { grid-column: 1 / -1; }
 .home-overview .hero-project strong { font-size: 1.5rem; }
 .home-overview .hero-project-note { color: #d2dedc; font-size: 1rem; line-height: 1.65; }
 .home-overview .hero-project-category { font-size: .875rem; line-height: 1.6; color: var(--mint); margin-top: 10px; }
 .home-overview .project-link-label { margin-top: 10px; }
 @media (hover: hover) {
  .home-page .hero-services a:hover { color: var(--mint); background: #ffffff08; }
 }
 @media (max-width: 1200px) and (min-width: 1001px) {
  .home-page .hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr); gap: 28px; }
  .home-page .hero-services ul { column-gap: 18px; }
  .home-page .hero-services a { gap: 9px; }
 }
 @media (max-width: 1100px) {
  .home-overview .hero-project { grid-template-columns: 1fr; }
 }
 @media (max-width: 1000px) {
  .home-page .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(12px, 2svh, 28px); }
  .home-page .hero h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); text-wrap: initial; }
  .home-page .hero .hero-intro { max-width: 60ch; }
  .home-page .hero-services a { min-height: 60px; }
 }
 @media (max-width: 700px) {
  .home-page .hero-grid { padding-block: clamp(16px, 2.5svh, 24px); gap: 16px; }
  .home-overview-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 28px; }
  .home-intro > p { font-size: 1.125rem; }
  .home-overview .hero-project { padding: 24px; }
 }
 @media (max-width: 600px) {
  .home-page .hero-grid { position: relative; grid-template-rows: auto; gap: 0; align-items: center; }
  .home-page .hero-content { z-index: 1; }
  .home-page .hero-visual { position: absolute; inset: 0; z-index: -1; }
  .home-page .hero .eyebrow { font-size: .75rem; letter-spacing: .035em; margin-bottom: 12px; }
  .home-page .hero h1 { font-size: clamp(1.625rem, 7vw, 2.5rem); line-height: 1.14; }
  .home-page .hero .hero-intro { display: none; }
  .home-page .hero-services { margin-top: 18px; }
  .home-page .hero-services ul { grid-template-columns: minmax(0, 1fr); }
  .home-page .hero-services a { min-height: 44px; padding-block: 9px; font-size: .9375rem; gap: 12px; }
  .home-page .hero-service-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .home-page .hero-actions { flex-direction: row; flex-wrap: nowrap; margin-top: 18px; gap: 10px; }
  .home-page .hero-actions .button { flex: 1 1 0; min-width: 0; padding: 10px; min-height: 46px; font-size: .875rem; gap: 8px; }
  .home-page .hero-actions .hero-service-arrow { width: 14px; height: 14px; flex-basis: 14px; }
 }
 /* Compact desktop windows keep the same composition with tighter spacing. */
 @media (min-width: 1001px) and (max-height: 740px) {
  .home-page .hero-grid { padding-block: 18px; }
  .home-page .hero .eyebrow { margin-bottom: 10px; }
  .home-page .hero h1 { font-size: clamp(1.75rem, 4.6svh, 2.5rem); }
  .home-page .hero .hero-intro { margin-block: 12px 16px; line-height: 1.6; }
  .home-page .hero-services a { min-height: 54px; padding-block: 9px; }
  .home-page .hero-actions { margin-top: 18px; }
 }
 /* On shorter phones reduce spacing, keeping all six services readable. */
 @media (max-width: 600px) and (max-height: 780px) {
  .home-page .hero-grid { padding-block: 14px; }
  .home-page .hero h1 { font-size: clamp(1.625rem, 7vw, 2rem); }
  .home-page .hero .eyebrow { margin-bottom: 8px; }
  .home-page .hero .hero-intro { display: none; }
  .home-page .hero-services { margin-top: 16px; }
  .home-page .hero-services a { padding-block: 7px; font-size: .875rem; gap: 10px; }
  .home-page .hero-actions { flex-direction: row; flex-wrap: nowrap; margin-top: 14px; gap: 8px; }
  .home-page .hero-actions .button { flex: 1 1 0; min-width: 0; padding: 8px 10px; font-size: .875rem; gap: 8px; }
  .home-page .hero-actions .hero-service-arrow { width: 14px; height: 14px; flex-basis: 14px; }
 }
 @media (max-width: 600px) and (max-height: 620px) {
  .home-page .header-inner { min-height: 64px; }
  .home-page .brand img { width: 90px; }
  .home-page .hero-grid { padding-block: 8px; }
  .home-page .hero .eyebrow { margin-bottom: 6px; }
  .home-page .hero-services { margin-top: 8px; }
  .home-page .hero-actions { margin-top: 8px; }
 }
 @media (max-width: 479px) and (max-height: 567px) {
  .home-page .topbar { display: none; }
  .home-page .hero .eyebrow { display: none; }
  .home-page .hero h1 { font-size: 1.5rem; }
  .home-page .hero-services a { min-height: 38px; padding-block: 5px; line-height: 1.4; }
 }
 @media (min-width: 601px) and (max-width: 1000px) and (min-height: 501px) and (max-height: 950px) {
  .home-page .hero-grid { position: relative; grid-template-rows: auto; padding-block: 12px; gap: 0; }
  .home-page .hero-content { z-index: 1; }
  .home-page .hero .eyebrow { margin-bottom: 10px; }
  .home-page .hero h1 { font-size: clamp(1.75rem, 5svh, 2.5rem); }
  .home-page .hero .hero-intro { display: none; }
  .home-page .hero-services { margin-top: 12px; }
  .home-page .hero-services a { min-height: 50px; padding-block: 6px; line-height: 1.45; }
  .home-page .hero-actions { margin-top: 18px; }
  .home-page .hero-visual { position: absolute; inset: 0; z-index: -1; }
 }
 /* Landscape phones use two columns for text and services, with a low
    header. Language selection remains available in the navigation menu. */
 @media (min-width: 480px) and (max-height: 600px) and (orientation: landscape) {
  .home-page .topbar { display: none; }
  .home-page .header-inner { min-height: 64px; }
  .home-page .brand img { width: 90px; }
  .home-page .hero-grid { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding-block: 14px; gap: 0; }
  .home-page .hero-content { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); grid-template-rows: auto auto auto; gap: 12px 24px; align-items: center; z-index: 1; }
  .home-page .hero .eyebrow { grid-column: 1; grid-row: 1; font-size: .75rem; line-height: 1.4; margin: 0; }
  .home-page .hero h1 { grid-column: 1; grid-row: 2; font-size: clamp(1.5rem, 3.6vw, 2rem); }
  .home-page .hero .hero-intro { display: none; }
  .home-page .hero-services { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .home-page .hero-services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .home-page .hero-services a { min-height: 54px; padding-block: 8px; font-size: .875rem; line-height: 1.4; gap: 8px; }
  .home-page .hero-service-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .home-page .hero-services .hero-service-arrow { display: none; }
  .home-page .hero-actions { grid-column: 1; grid-row: 3; flex-direction: column; flex-wrap: nowrap; margin: 0; gap: 6px; }
  .home-page .hero-actions .button { flex: 0 1 auto; min-height: 44px; padding: 8px 12px; font-size: .875rem; gap: 10px; }
  .home-page .hero-visual { position: absolute; inset: 0; z-index: -1; }
 }
 @media (min-width: 480px) and (max-width: 700px) and (max-height: 600px) and (orientation: landscape) {
  .home-page .hero-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px 18px; }
  .home-page .hero h1 { font-size: 1.5rem; }
  .home-page .hero-services ul { grid-template-columns: minmax(0, 1fr); }
  .home-page .hero-services a { min-height: 34px; padding-block: 5px; font-size: .875rem; }
 }
 @media (min-width: 1024px) and (max-height: 600px) {
  /* Desktop navigation has no language choices inside a mobile menu. */
  .home-page .topbar { display: block; }
  .home-page .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .home-page .hero-actions .button { flex: 1 1 auto; }
 }
 html:not(.js) .home-page .hero-grid { min-height: 0; }
 /* Keep the photo rows visible even when scripts cannot initialize the hero. */
 html:not(.js) .home-page .hero-gallery { position: static; grid-template-rows: none; }
 html:not(.js) .home-page .hero-photo { aspect-ratio: 4 / 3; }
}
/* Compact layouts pair each service with its own photograph. The images are
   positioned inside the existing rows, preserving the opening's height. */
@media screen and (max-width: 600px),
       screen and (min-width: 601px) and (max-width: 1000px) and (min-height: 501px) and (max-height: 950px),
       screen and (min-width: 480px) and (max-height: 600px) and (orientation: landscape) {
 .home-page .hero-visual { display: none; }
 .home-page .hero-services .hero-service-icon { display: none; }
 .home-page .hero-services a { position: relative; padding-inline-start: 68px; }
 .home-page .hero-service-thumb { display: block; position: absolute; left: 0; top: 4px; width: 56px; height: calc(100% - 8px); border-radius: 3px; object-fit: cover; object-position: var(--photo-position, center); }
}
@media screen and (max-width: 350px) {
 .home-page .hero-services a { padding-inline-start: 54px; }
 .home-page .hero-service-thumb { width: 44px; }
 .home-page .hero-services .hero-service-arrow { display: none; }
}
@media screen and (min-width: 601px) and (max-width: 1000px) and (min-height: 501px) and (max-height: 950px) {
 .home-page .hero-services a { min-height: clamp(50px, 8svh, 76px); padding-inline-start: calc(clamp(40px, 12vw - 32px, 72px) + 8px); }
 .home-page .hero-service-thumb { width: clamp(40px, 12vw - 32px, 72px); }
 .home-page .hero-services .hero-service-arrow { display: none; }
}
@media screen and (min-width: 480px) and (max-height: 600px) and (orientation: landscape) {
 .home-page .hero-services ul { grid-template-columns: minmax(0, 1fr); }
 .home-page .hero-services a { min-height: 36px; padding-block: 4px; }
}
@media screen and (min-width: 480px) and (max-width: 700px) and (max-height: 600px) and (orientation: landscape) {
 .home-page .hero-services a { min-height: 34px; padding-inline-start: 50px; }
 .home-page .hero-service-thumb { width: 42px; top: 3px; height: calc(100% - 6px); }
}
@media print {
 .home-page .hero-gallery { position: static; grid-template-rows: repeat(3, 140px); }
}
/* Large portrait tablets have room for a broad mosaic below the service list. */
@media screen and (min-width: 1001px) and (max-width: 1200px) and (orientation: portrait) {
 .home-page .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 2svh, 28px); }
 .home-page .hero .hero-intro { max-width: 60ch; }
 .home-page .hero-services a { min-height: 60px; }
 .home-page .hero-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
/* Use the extra room on taller phones for recognizable service photographs. */
@media screen and (max-width: 600px) and (min-height: 621px) and (orientation: portrait) {
 .home-page .hero-services a { min-height: clamp(44px, calc((100svh - 360px) / 6), 66px); padding-inline-start: 80px; }
 .home-page .hero-service-thumb { width: 68px; }
 .home-page .hero-services .hero-service-arrow { display: none; }
}
/* Browser controls can leave a landscape phone with less than 320px of height. */
@media screen and (min-width: 480px) and (max-height: 340px) and (orientation: landscape) {
 .home-page .header-inner { min-height: 52px; }
 .home-page .brand img { width: 80px; }
 .home-page .hero-grid { padding-block: 4px; }
 .home-page .hero-content { grid-template-rows: auto auto; row-gap: 8px; }
 .home-page .hero .eyebrow { display: none; }
 .home-page .hero h1 { grid-row: 1; font-size: 1.375rem; }
 .home-page .hero-services { grid-row: 1 / 3; }
 .home-page .hero-services a { min-height: 30px; padding-block: 2px; padding-inline-start: 46px; }
 .home-page .hero-service-thumb { width: 38px; top: 2px; height: calc(100% - 4px); }
 .home-page .hero-actions { grid-row: 2; }
 .home-page .hero-actions .button { min-height: 38px; padding-block: 6px; }
}
/* Short portrait windows keep the same six links and both primary actions. */
@media screen and (max-width: 479px) and (max-height: 480px) {
 .home-page .header-inner { min-height: 48px; }
 .home-page .brand img { width: 80px; }
 .home-page .menu-toggle { min-height: 44px; padding: 8px 12px; font-size: .875rem; }
 .home-page .hero-grid { padding-block: 2px; }
 .home-page .hero h1 { font-size: 1.375rem; }
 .home-page .hero-services { margin-top: 6px; }
 .home-page .hero-services a { min-height: clamp(28px, calc((100svh - 240px) / 5), 40px); padding: 2px 0 2px 46px; }
 .home-page .hero-service-thumb { width: 38px; top: 1px; height: calc(100% - 2px); }
 .home-page .hero-services .hero-service-arrow { display: none; }
 .home-page .hero-actions { margin-top: 6px; }
 .home-page .hero-actions .button { min-height: 42px; padding: 6px 8px; }
}