/* Illustrated openings use the available viewport without clipping complete copy. */
body.site-white.site-refined[data-page] .standard-hero {
  --opening-gap: clamp(12px, 2svh, 22px);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 100vh !important;
  min-height: 100svh !important;
  padding-block: calc(var(--site-header-clearance, 96px) + 12px) clamp(20px, 4svh, 48px) !important;
  background: #fff !important;
}
body.site-white.site-refined[data-page] .standard-hero > .container {
  container-type: inline-size;
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important;
  column-gap: clamp(24px, 3.5vw, 56px);
  row-gap: 0;
  align-items: start;
}
body.site-white.site-refined[data-page] .standard-hero > .container > * {
  grid-column: 1;
  min-width: 0;
  margin-block: 0 var(--opening-gap) !important;
}
body.site-white.site-refined[data-page] .standard-hero > .container > .breadcrumb-nav {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: var(--opening-gap) !important;
}
body.site-white.site-refined[data-page] .standard-hero > .container > :is(.eyebrow, .guide-kicker) {
  grid-row: 2;
  margin-bottom: clamp(10px, 1.5svh, 16px) !important;
}
body.site-white.site-refined[data-page] .standard-hero > .container > h1 {
  grid-row: 3;
  max-width: 100% !important;
  /* Bound complete words by the heading's 1.7fr column, not the full viewport. */
  font-size: min(clamp(2rem, min(3.5vw, 5.8svh), 4rem), calc((100cqi - clamp(24px, 3.5vw, 56px)) / 2.7 * 1.7 * .13)) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}
body.site-white.site-refined[data-page] .standard-hero > .container > p {
  max-width: 66ch !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: clamp(1rem, min(1.2vw, 2.2svh), 1.125rem) !important;
  line-height: 1.5 !important;
}
body.site-white.site-refined[data-page] .standard-hero > .container > :is(.button, .button-row, .text-link) {
  margin-block: 0 !important;
  justify-self: start;
}
body.site-white.site-refined[data-page] .standard-hero .button-row { gap: 10px; }
body.site-white.site-refined[data-page] .standard-hero .button {
  min-height: 48px;
  padding-block: 12px;
  line-height: 1.25;
}
body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual {
  grid-column: 2 !important;
  grid-row: 2 / 7;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: min(500px, 55svh);
  margin: 0 !important;
  pointer-events: none;
  user-select: none;
}
.standard-hero-visual > img { display: block; width: 100%; height: auto; }

/* Real project thumbnails, presented as a single editorial composition. */
.standard-hero-visual--portfolio {
  position: relative;
  aspect-ratio: 8 / 7;
  isolation: isolate;
}
.standard-hero-visual--portfolio::before {
  position: absolute;
  inset: 5% 4% 7%;
  border-radius: 48% 52% 42% 58%;
  background: #f0f7f7 !important;
  content: "";
  z-index: -1;
}
body.site-white.site-refined[data-page] .standard-hero-project {
  position: absolute;
  overflow: hidden;
  width: 86%;
  border: 1px solid #cddfe2 !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(32, 59, 74, .09) !important;
}
.standard-hero-project:first-child { top: 12%; left: 0; transform: rotate(-5deg); }
.standard-hero-project:last-child { right: 0; bottom: 6%; transform: rotate(5deg); }
.standard-hero-project::before {
  display: block;
  height: 22px;
  background: radial-gradient(circle, #438f98 2px, transparent 2.5px) 8px 8px / 8px 6px no-repeat,
    radial-gradient(circle, #d8ad65 2px, transparent 2.5px) 17px 8px / 8px 6px no-repeat,
    radial-gradient(circle, #b93d35 2px, transparent 2.5px) 26px 8px / 8px 6px no-repeat,
    #fff;
  content: "";
}
.standard-hero-project img { display: block; width: 100%; aspect-ratio: 1.8; object-fit: cover; object-position: top; }



/* Results can extend the introduction naturally when the visitor searches. */
body.site-white.site-refined[data-page] .standard-hero--directory > .container > :is(.directory-search, noscript, nav:not(.breadcrumb-nav)) {
  grid-column: 1 / -1;
  max-width: 100% !important;
}
body.site-white.site-refined[data-page] .standard-hero--directory > .container > .standard-hero-visual {
  grid-row: 2 / 5;
  max-width: min(300px, 34svh);
}
body.site-white.site-refined[data-page] .standard-hero--brief > .container > .standard-hero-visual { max-width: min(300px, 40svh); }
body.site-white.site-refined[data-page] .standard-hero .directory-search { margin-top: 0 !important; }
body.site-white.site-refined[data-page] .standard-hero .directory-search-help { margin-block: 8px 12px; }
body.site-white.site-refined[data-page] .standard-hero .directory-search-suggestions { margin-top: 0; }
body.site-white.site-refined[data-page] .standard-hero .directory-context-links { margin-block: 0 !important; }
body.site-white.site-refined[data-page] .standard-hero > .container > nav:not(.breadcrumb-nav) { margin-bottom: 0 !important; }

/* Tablet portrait: title and artwork share a row; the complete description uses the width. */
@media (700px <= width < 1000px) {
  body.site-white.site-refined[data-page] .standard-hero > .container {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
    column-gap: 24px;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > * { grid-column: 1 / -1; }
  body.site-white.site-refined[data-page] .standard-hero > .container > h1 {
    grid-column: 1;
    font-size: min(clamp(2rem, min(4.4vw, 6svh), 2.75rem), calc((100cqi - 24px) / 2.8 * 1.8 * .13)) !important;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual {
    grid-row: 3;
    max-width: min(230px, 38svh);
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > p { max-width: 100% !important; }
}

/* Phone: a small illustration accompanies the label instead of adding a tall image row. */
@media (width < 700px) {
  body.site-white.site-refined[data-page] .standard-hero {
    --opening-gap: clamp(10px, 1.6svh, 16px);
    padding-block: calc(var(--site-header-clearance, 90px) + 6px) max(16px, env(safe-area-inset-bottom)) !important;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container {
    grid-template-columns: minmax(0, 1fr) clamp(64px, 18vw, 88px) !important;
    column-gap: 16px;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > * { grid-column: 1 / -1; }
  body.site-white.site-refined[data-page] .standard-hero > .container > :is(.eyebrow, .guide-kicker) {
    grid-column: 1;
    align-self: center;
    font-size: .75rem;
    line-height: 1.4;
    letter-spacing: .09em;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > h1 {
    /* Keep long words whole when the reader enlarges the preferred text size. */
    font-size: min(clamp(1.625rem, 7.4vw, 2rem), 13cqi) !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > p {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual {
    grid-column: 2 !important;
    grid-row: 2;
    align-self: center;
    width: 100%;
    max-width: 88px;
    margin-bottom: var(--opening-gap) !important;
  }
  body.site-white.site-refined[data-page] .standard-hero .standard-hero-project { border-radius: 4px; }
  .standard-hero-visual--portfolio .standard-hero-project::before { height: 6px; background-size: 3px 3px; background-position: 3px 2px, 8px 2px, 13px 2px; }
  body.site-white.site-refined[data-page] .standard-hero > .container > .button-row { width: 100%; }
  body.site-white.site-refined[data-page] .standard-hero .button { min-height: 46px; padding: 10px 14px; font-size: .9375rem; }
  body.site-white.site-refined[data-page] .standard-hero .directory-search-suggestions { gap: 6px; }
  body.site-white.site-refined[data-page] .standard-hero .directory-search-suggestions button { padding: 8px 10px; }
}

@media (width < 700px) and (height <= 900px) {
  body.site-white.site-refined[data-page] .standard-hero {
    --opening-gap: 8px;
    padding-block: calc(var(--site-header-clearance, 90px) + 4px) max(12px, env(safe-area-inset-bottom)) !important;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > :is(.eyebrow, .guide-kicker) { margin-bottom: 10px !important; }
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual { max-width: 56px; }
  body.site-white.site-refined[data-page] .standard-hero > .container > p { line-height: 1.4 !important; }
}
@media (width < 700px) and (height <= 700px) {
  body.site-white.site-refined[data-page] .standard-hero > .container > h1 { font-size: min(clamp(1.625rem, min(7.4vw, 4svh), 2rem), 13cqi) !important; }
  body.site-white.site-refined[data-page] .standard-hero > .container > p { line-height: 1.4 !important; }
}

/* Short landscape screens keep every word reachable with ordinary page scrolling. */
@media (min-width: 700px) and (max-height: 600px) {
  body.site-white.site-refined[data-page] .standard-hero { --opening-gap: 10px; padding-bottom: 16px !important; }
  body.site-white.site-refined[data-page] .standard-hero > .container { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) !important; column-gap: 20px; }
  body.site-white.site-refined[data-page] .standard-hero > .container > h1 { font-size: min(2rem, calc((100cqi - 20px) / 3.4 * 2.4 * .13)) !important; }
}
@media print {
  body.site-white.site-refined[data-page] .standard-hero > .container { display: block !important; }
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual { display: none !important; }
  body.site-white.site-refined[data-page] .standard-hero { display: block; min-height: 0 !important; padding: 0 !important; }
  body.site-white.site-refined[data-page] .brief-model:has(.brief-print-output:not(:empty)) .standard-hero--brief { display: none !important; }
}

/* On phones the illustration has a full row, rather than a tiny label icon.
   The opening grows naturally when complete copy needs more room. */
@media screen and (width < 700px) {
  body.site-white.site-refined[data-page] .standard-hero > .container {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > :is(.eyebrow, .guide-kicker) {
    grid-column: 1 / -1;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual {
    grid-column: 1 / -1 !important;
    grid-row: 4;
    justify-self: center;
    align-self: center;
    width: clamp(192px, 64vw, 280px);
    max-width: 100%;
    margin-block: 2px max(12px, var(--opening-gap)) !important;
  }
  body.site-white.site-refined[data-page] .standard-hero .standard-hero-project {
    border-radius: 8px;
  }
  .standard-hero-visual--portfolio .standard-hero-project::before {
    height: 14px;
    background-size: 5px 5px;
    background-position: 6px 5px, 14px 5px, 22px 5px;
  }
}
/* A short landscape phone has more horizontal room: the illustration sits
   beside the heading while paragraphs and actions keep the full width. */
@media screen and (480px <= width < 700px) and (orientation: landscape) {
  body.site-white.site-refined[data-page] .standard-hero > .container {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
    column-gap: 20px;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > :is(.eyebrow, .guide-kicker, h1) {
    grid-column: 1;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > h1 {
    font-size: min(clamp(1.625rem, min(7.4vw, 4svh), 2rem), calc((100cqi - 20px) / 2.8 * 1.8 * .13)) !important;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual {
    grid-column: 2 !important;
    grid-row: 2 / 4;
    width: 100%;
    max-width: 220px;
    margin-block: 0 var(--opening-gap) !important;
  }
}
/* A quiet, accessible invitation to continue beyond each illustrated opening. */
@media screen {
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-scroll {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    margin: clamp(16px, 2.4svh, 28px) 0 0 !important;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #176d77 !important;
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: .025em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .standard-hero-scroll > span:first-child { min-width: 0; }
  body.site-white.site-refined[data-page] .standard-hero-scroll-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #afcdd1 !important;
    border-radius: 50%;
    background: #f4f9f9;
    transition: border-color .2s ease, background-color .2s ease;
  }
  .standard-hero-scroll-icon svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  body.site-white.site-refined[data-page] .standard-hero .standard-hero-scroll:hover {
    color: #125761 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  body.site-white.site-refined[data-page] .standard-hero-scroll:hover .standard-hero-scroll-icon {
    border-color: #438f98 !important;
    background: #e7f3f3;
  }
  body.site-white.site-refined[data-page] .standard-hero .standard-hero-scroll:focus-visible {
    outline: 2px solid #176d77;
    outline-offset: 4px;
  }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .standard-hero-scroll-icon svg { animation: standard-hero-scroll-down 1.6s ease-in-out 3; }
}
@keyframes standard-hero-scroll-down {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}
/* Show the hint before the photograph and long copy on portrait phones. */
@media screen and (width < 700px) {
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-scroll {
    grid-row: 4;
    justify-self: start;
    margin: 0 0 10px !important;
    padding-inline: 0 6px;
    font-size: .8125rem;
    gap: 10px;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual { grid-row: 5; }
}
@media screen and (480px <= width < 700px) and (orientation: landscape) {
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual { grid-row: 2 / 4; }
}
/* On short desktop/tablet screens the cue comes directly after the breadcrumb, so it cannot
   be pushed below the first screen by a long title. Text stays in normal flow. */
@media screen and (max-height: 450px),
  screen and (700px <= width < 1000px) and (max-height: 800px),
  screen and (min-width: 1000px) and (max-height: 700px) {
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-scroll {
    grid-row: 2;
    justify-self: start;
    margin: 0 0 8px !important;
    padding-inline: 0 6px;
  }
  body.site-white.site-refined[data-page] .standard-hero > .container > :is(.eyebrow, .guide-kicker) { grid-row: 3; }
  body.site-white.site-refined[data-page] .standard-hero > .container > h1 { grid-row: 4; }
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual { grid-row: 3 / 8; }
}
@media screen and (max-height: 800px) and (700px <= width < 1000px) {
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual { grid-row: 4; }
}
@media screen and (max-height: 450px) and (width < 700px) {
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual { grid-row: 5; }
}
@media screen and (max-height: 450px) and (480px <= width < 700px) and (orientation: landscape) {
  body.site-white.site-refined[data-page] .standard-hero > .container > .standard-hero-visual { grid-row: 3 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  body.site-white.site-refined[data-page] .standard-hero-scroll-icon { transition: none; }
  .standard-hero-scroll-icon svg { animation: none; }
}
@media (forced-colors: active) {
  body.site-white.site-refined[data-page] .standard-hero-scroll-icon,
  body.site-white.site-refined[data-page] .standard-hero-scroll:hover .standard-hero-scroll-icon { border-color: currentColor !important; }
}
@media print {
  .standard-hero-scroll { display: none !important; }
}