@font-face {
  font-family: Heebo;
  src: url("https://fonts.gstatic.com/s/heebo/v28/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: Heebo;
  src: url("https://fonts.gstatic.com/s/heebo/v28/NGS6v5_NC0k9P9H2TbFhsqMA.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --ink: #141d2c;
  --text: #20242a;
  --blue: #075e86;
  --icon-blue: #28769b;
  --light-blue: #edf6fa;
  --line: #d5dce2;
  --rule: #8cb6c8;
  --content-width: 73rem;
  --edge-space: clamp(1rem, 3vw, 2rem);
  --inset: max(var(--edge-space), (100% - var(--content-width)) / 2);
  --round: 1rem;
  --section-gap: clamp(2rem, 3.4vw, 3rem);
  --title-size: clamp(1.65rem, 3.7vw, 2.25rem);
  --body-size: 1.0625rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background: #fff;
  color: var(--text);
  font-family: Heebo, Arial, sans-serif;
}

body {
  margin: 0;
  font-size: var(--body-size);
  line-height: 1.4;
}

h1, h2, h3, p, figure {
  margin: 0;
}

h1, h2, h3 {
  color: var(--ink);
  font-weight: 850;
  line-height: 1.13;
}

h2 {
  font-size: var(--title-size);
}

a {
  color: inherit;
}

img {
  display: block;
  max-inline-size: 100%;
}

ul, ol {
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 3px solid #1975a2;
  outline-offset: 4px;
}

section, #services {
  scroll-margin-block-start: 0.75rem;
}

.icon-definitions {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.icon {
  display: block;
  inline-size: 1em;
  block-size: 1em;
  flex: none;
}

.skip-link {
  position: absolute;
  z-index: 3;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  color: var(--blue);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1rem);
  min-block-size: clamp(5.75rem, 8vw, 7rem);
  padding-inline: var(--inset);
  border-block-end: 1px solid #e5edf2;
}

.site-logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: block;
  inline-size: clamp(5.25rem, 8vw, 7rem);
}

.site-logo img {
  inline-size: 100%;
  block-size: auto;
}

.site-name {
  color: #111725;
  font-size: 1.4375rem;
  font-weight: 900;
  text-decoration: none;
}

.desktop-nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.25vw, 1.85rem);
  font-size: 1rem;
  font-weight: 550;
}

.desktop-nav a, .mobile-menu a {
  text-decoration: none;
}

.desktop-nav a:hover, .mobile-menu a:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mobile-menu {
  display: none;
}

.header-phone {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: none;
  padding: 0.6rem 0.95rem;
  border: 1px solid #d4e4ed;
  border-radius: 999px;
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 740;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover {
  background: var(--light-blue);
}

@media (min-width: 1024px) {
  .header-phone { display: inline-flex; }
}

.hero {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  padding-inline: var(--inset);
}

.hero-image, .hero-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.hero-image {
  object-fit: cover;
  object-position: center 28%;
  filter: brightness(0.6);
  z-index: -3;
}

.hero-video {
  object-fit: contain;
  z-index: -2;
}

.hero-copy {
  color: #fff;
  max-inline-size: min(80%, 42rem);
  text-align: center;
}

.hero h1, .hero p {
  text-shadow: 0 1px 2px #0d1316, 0 2px 12px #0d1316;
}

.hero h1 {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: inherit;
}

.hero p {
  font-size: clamp(1.25rem, 2vw, 1.5625rem);
  margin-block: 0.38em 0.9em;
  line-height: 1.2;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-block-size: 44px;
  padding: 0.5em 1.15em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.16;
  text-align: center;
  text-decoration: none;
}

.button-primary {
  background: var(--blue);
  color: #fff;
}

.button-primary:hover {
  background: #064d6d;
}

.hero .button {
  border-color: #fff;
}

.hero .button:focus-visible {
  outline-color: #fff;
}

.section-inset {
  margin-inline: var(--inset);
}

.about {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.3fr);
  align-items: stretch;
  gap: clamp(1.25rem, 3.1vw, 2.5rem);
  margin-block: var(--section-gap) 0;
}

.about::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 calc(-0.6 * var(--section-gap));
  pointer-events: none;
  background: linear-gradient(153deg, transparent 0 79%, #f3f9fc 79%, #fff 98%);
}

.about-copy {
  display: grid;
  align-content: start;
  gap: 0.38em;
  border-inline-end: 1px solid var(--line);
  padding: clamp(1.25rem, 3vw, 2.5rem) 0 1.25rem clamp(1rem, 3.1vw, 2.5rem);
}

.about-copy::before, .faq h2::after {
  content: "";
  display: block;
  inline-size: clamp(1.8rem, 6vw, 3.5rem);
  block-size: 2px;
  background: var(--icon-blue);
  margin-block-end: 0.42em;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #e8ebed;
  border-radius: var(--round);
  padding: 0.75rem;
  background: rgb(255 255 255 / 72%);
  list-style: none;
}

.service-grid li {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.1em;
  padding: clamp(0.65rem, 1.35vw, 1rem) 0.5em;
  text-align: center;
}

.service-grid li:nth-child(odd) {
  border-inline-end: 1px solid #edf0f2;
}

.service-grid li:nth-child(-n+2) {
  border-block-end: 1px solid #edf0f2;
}

.service-grid .icon {
  color: var(--blue);
  font-size: 2.125rem;
  margin-block-end: 0.12em;
}

.service-grid h3 {
  font-size: 1.1875rem;
}

.service-grid p {
  font-size: 1rem;
  line-height: 1.22;
}

.work, .process {
  margin-block-start: var(--section-gap);
}

.ruled-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 3vw, 2.75rem);
  text-align: center;
}

.ruled-title::before, .ruled-title::after {
  content: "";
  flex: 0 1 8rem;
  block-size: 1px;
  background: var(--rule);
}

.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr) minmax(0, 0.84fr);
  gap: clamp(0.35rem, 0.9vw, 0.875rem);
  margin-block-start: clamp(0.85rem, 2vw, 1.75rem);
}

.work-photo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: end;
  justify-content: center;
  min-inline-size: 0;
  block-size: clamp(13rem, 24vw, 20rem);
  overflow: hidden;
  border-radius: calc(var(--round) * 0.75);
}

.work-photo img, .work-photo::after {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.work-photo img {
  object-fit: cover;
  z-index: -2;
}

.work-cladding img {
  object-position: center 42%;
}

.work-photo::after {
  content: "";
  z-index: -1;
  background: linear-gradient(transparent 64%, rgb(10 15 20 / 70%));
}

.work-photo figcaption {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 850;
  line-height: 1.18;
  padding: 0.58em 0.22em;
  text-align: center;
}

.panel {
  border-radius: var(--round);
  background: var(--light-blue);
}

.process {
  padding: clamp(0.85rem, 2vw, 1.625rem) clamp(0.75rem, 1.85vw, 1.5rem)
    clamp(0.85rem, 2.4vw, 1.5rem);
}

.process-steps {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  margin-block: clamp(1rem, 2vw, 1.5rem);
  --step-size: clamp(2.15rem, 5vw, 2.875rem);
  list-style: none;
}

.process-steps::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: calc(var(--step-size) / 2);
  inset-inline: 9%;
  block-size: 1px;
  background: var(--rule);
}

.process-steps li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.45em;
  color: var(--ink);
  font-size: clamp(0.76rem, 2.2vw, 1rem);
  font-weight: 830;
  line-height: 1.16;
  text-align: center;
}

.step-icon {
  display: grid;
  place-items: center;
  inline-size: var(--step-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--icon-blue);
  color: #fff;
}

.step-icon .icon {
  inline-size: 58%;
  block-size: 58%;
}

.process-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  block-size: clamp(3.8rem, 10vw, 6.75rem);
  overflow: hidden;
  border-radius: calc(var(--round) * 0.72);
}

.process-images img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  object-fit: cover;
}

.process-images img:last-child {
  object-position: 40% center;
}

.areas, .faq {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  margin-block-start: clamp(1.25rem, 3vw, 2.25rem);
}

.areas {
  border-block-end: 1px solid #eef1f3;
  padding-block-end: clamp(1rem, 2.5vw, 1.75rem);
}

.areas h2, .faq h2 {
  padding-inline: clamp(0.5rem, 1.5vw, 1rem);
  font-size: clamp(1.4rem, 2.75vw, 2rem);
}

.city-list, .faq-list {
  min-inline-size: 0;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: clamp(0.6rem, 2.6vw, 1.75rem);
}

.city-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.38rem, 1vw, 0.85rem);
  color: var(--ink);
  font-size: 0.9375rem;
  list-style: none;
}

.city-list li {
  position: relative;
  background: #e7f2f8;
  border-radius: 0.52em;
  padding: 0.26em 0.86em;
}

.city-list li + li::before {
  content: "";
  position: absolute;
  inline-size: 0.19em;
  block-size: 0.19em;
  inset-inline-start: -0.345em;
  inset-block-start: calc(50% - 0.095em);
  border-radius: 50%;
  background: var(--blue);
}

.faq {
  align-items: start;
}

.faq h2 {
  padding-block-start: 0.14em;
}

.faq h2::after {
  margin-block: 0.65em 0;
}

.faq-list {
  display: grid;
  gap: 0.3em;
  font-size: 1rem;
}

.faq-list details {
  border: 1px solid #e8ebed;
  border-radius: 0.55em;
}

.faq-list details[open] {
  background: #e6f2f8;
  border-color: #e6f2f8;
}

.faq-list summary, .mobile-menu summary {
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker, .mobile-menu summary::-webkit-details-marker {
  display: none;
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65em;
  min-block-size: max(44px, 1.86em);
  padding: 0.18em 0.9em;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.28;
}

.faq-list summary::after {
  content: "+";
  flex: 0 0 1em;
  color: var(--blue);
  font-size: 1.4em;
  line-height: 0.9;
  text-align: center;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  padding: 0 0.9em 0.38em;
  line-height: 1.3;
}

.contact {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1.53fr) minmax(0, 1fr);
  margin-block-start: var(--section-gap);
  background: linear-gradient(135deg, #e8f4f9, #e2f0f7);
  overflow: hidden;
}

.contact-copy {
  align-self: center;
  padding: clamp(1.25rem, 3.2vw, 2rem) clamp(0.85rem, 2.5vw, 1.75rem);
  text-align: center;
}

.contact-copy p {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  margin-block: 0.35em 0.9em;
}

.contact-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.6vw, 0.875rem);
}

.button-outline {
  border-color: var(--icon-blue);
  background: #fff;
  color: var(--blue);
}

.button-outline:hover {
  background: #f5fbfe;
}

.contact-image {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  max-block-size: clamp(12rem, 19vw, 15rem);
  object-fit: cover;
  object-position: center 55%;
  clip-path: polygon(0 0, 100% 0, 77% 100%, 0 100%);
}

.site-footer {
  margin-block-start: var(--section-gap);
  padding-block: clamp(2rem, 5vw, 3.8rem) 1.1rem;
  background: linear-gradient(125deg, #142638 0%, #102033 58%, #172f42 100%);
  border-block-start: 3px solid #327e9f;
  color: #e6f0f7;
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 0.86fr)) minmax(0, 1.15fr);
  gap: clamp(1rem, 2.7vw, 2.35rem);
}

.footer-brand p, .footer-reach p {
  max-inline-size: 31ch;
  margin-block-start: 0.6rem;
  color: #cbdce8;
  line-height: 1.65;
}

.footer-identity {
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-weight: 840;
  font-size: 1.14rem;
}

.footer-identity img {
  inline-size: 3.7rem;
  block-size: auto;
  flex: none;
  border-radius: 0.65rem;
  background: #f6fbff;
}

.footer-group h2 {
  color: #fff;
  font-size: 1.04rem;
}

.footer-group ul {
  display: grid;
  gap: 0.26rem;
  margin-block-start: 0.65rem;
  list-style: none;
}

.footer-group li a, .footer-phone {
  display: inline-block;
  padding-block: 0.25rem;
}

.site-footer a:not(.button) {
  text-underline-offset: 0.2em;
}

.footer-group li a, .footer-top, .footer-phone {
  text-decoration: none;
}

.site-footer a:not(.button):hover {
  color: #fff;
  text-decoration: underline;
}

.footer-phone {
  margin-block: 0.3rem 0.45rem;
  font-size: 1.06rem;
  font-weight: 750;
}

.footer-reach .button {
  display: flex;
  inline-size: fit-content;
  background: #17698d;
  color: #fff;
}

.footer-reach .button:hover {
  background: #217a9e;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.65rem 1.15rem;
  margin-block-start: clamp(1.3rem, 3vw, 2.3rem);
  padding-block-start: 0.9rem;
  border-block-start: 1px solid #6b879a65;
  color: #cbdce8;
  font-size: 0.85rem;
}

.site-footer :focus-visible {
  outline-color: #8ad3f3;
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.85rem;
  }

  .footer-brand, .footer-reach {
    grid-column: 1 / -1;
  }

  .footer-group li a, .footer-phone {
    min-block-size: 2rem;
  }
}

@media (min-width: 761px) {
  .hero .button {
    min-block-size: 46px;
  }

  .service-grid {
    min-block-size: 16rem;
  }

  .work-cladding {
    block-size: auto;
    margin-block-start: -0.375rem;
  }

  .work-ceramic img {
    object-position: center 86%;
  }

  .city-list li {
    padding: 0.42em 1em;
  }

  .faq-list {
    gap: 0.5em;
  }

  .contact-copy {
    padding-inline-end: clamp(1.5rem, 3.5vw, 3.25rem);
  }

  .contact-image {
    object-position: center 68%;
  }
}

@media (max-width: 760px) {
  :root {
    --body-size: 1.05rem;
    --edge-space: clamp(0.75rem, 2.1vw, 1rem);
    --section-gap: clamp(1.55rem, 5vw, 2.4rem);
  }

  .site-header {
    position: relative;
    z-index: 2;
    min-block-size: 5.2rem;
  }

  .site-logo {
    inline-size: clamp(4.65rem, 21vw, 5.25rem);
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    grid-column: 2;
    grid-row: 1;
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
  }

  .mobile-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-block-size: 44px;
    padding-inline: 0.85rem;
    border: 1px solid #dae9f0;
    border-radius: 999px;
    background: #f3f9fc;
    color: var(--ink);
  }

  .menu-mark {
    inline-size: 1rem;
    block-size: 0.7rem;
    border-block: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  }

  .mobile-menu nav {
    display: grid;
    position: absolute;
    inset-block-start: calc(100% - 1px);
    inset-inline: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.65rem var(--inset) 0.85rem;
    background: #fff;
    border-block-end: 1px solid var(--line);
    box-shadow: 0 0.7rem 1.4rem rgb(20 29 44 / 12%);
  }

  .mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: 0.45rem;
    border-radius: 0.6rem;
    background: #f3f8fb;
    text-align: center;
  }

  .hero-image {
    object-position: 32% center;
  }

  .hero-copy {
    max-inline-size: 100%;
  }

  .hero h1 {
    font-size: clamp(2.05rem, 7.7vw, 3.65rem);
  }

  .hero p {
    margin-block-end: 0.85em;
    font-size: clamp(1.14rem, 4.5vw, 1.9rem);
  }

  .service-grid .icon {
    font-size: clamp(1.7rem, 6.25vw, 2.125rem);
  }

  .service-grid h3 {
    font-size: clamp(0.95rem, 2.7vw, 1.1875rem);
  }

  .service-grid p {
    font-size: clamp(0.82rem, 2.36vw, 1rem);
  }

  .work-photo {
    block-size: clamp(9.2rem, 44vw, 21rem);
  }

  .contact {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  }

  .contact-image {
    max-block-size: none;
  }
}

@media (max-width: 520px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }

  .about-copy {
    gap: 0.35rem;
    padding: 0 0.4rem;
    border: 0;
  }

  .service-grid li {
    min-block-size: 6rem;
  }

  .work-photo figcaption {
    font-size: clamp(0.72rem, 3.25vw, 1rem);
  }

  .ruled-title {
    gap: clamp(0.45rem, 2.2vw, 0.75rem);
  }

  .ruled-title::before, .ruled-title::after {
    flex: 1 1 0;
    max-inline-size: 18vw;
  }

  .process-steps {
    gap: 0.45rem;
  }

  .process-steps li > span:last-child {
    max-inline-size: 4.1em;
  }

  .areas, .faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .areas h2, .faq h2 {
    padding: 0;
  }

  .faq h2::after {
    margin-block: 0.38em 0;
  }

  .city-list, .faq-list {
    border: 0;
    padding-inline-start: 0;
  }

  .city-list li {
    padding-inline: 0.65em;
  }

  .city-list li + li::before {
    content: none;
  }

  .contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-copy {
    padding-block: 1.25rem;
  }

  .contact .button {
    padding-inline: 0.85em;
  }

  .contact-image {
    block-size: clamp(8.75rem, 47vw, 13rem);
    object-position: center 68%;
    clip-path: none;
  }

}

@media (prefers-reduced-motion: no-preference) {
  .about[data-motion-state] h2,
  .service-grid[data-motion-state] li,
  .areas[data-motion-state] h2,
  .contact[data-motion-state] .contact-actions {
    position: relative;
  }

  .about[data-motion-state] h2::after,
  .service-grid[data-motion-state] li::after,
  .areas[data-motion-state] h2::after,
  .contact[data-motion-state] .contact-actions::after {
    content: "";
    position: absolute;
    inline-size: 1.8rem;
    block-size: 1px;
    background: var(--icon-blue);
    opacity: 0.68;
    pointer-events: none;
  }

  .about[data-motion-state] h2::after,
  .areas[data-motion-state] h2::after {
    inset-block-end: -0.12em;
    inset-inline-start: 0;
  }

  .areas[data-motion-state] h2::after {
    inset-inline-start: clamp(0.5rem, 1.5vw, 1rem);
  }

  .service-grid[data-motion-state] li::after {
    inset-block-start: 0.35rem;
    inset-inline-start: 0.35rem;
    inline-size: 0.78rem;
    block-size: 0.32rem;
    border-block-start: 1px solid var(--rule);
    border-inline-start: 1px solid var(--rule);
    background: transparent;
    --line-delay: calc(var(--arrival-delay, 0ms) + 80ms);
  }

  .contact[data-motion-state] .contact-actions::after {
    inset-inline: 0;
    inset-block-end: -0.56rem;
    margin-inline: auto;
  }

  .work .ruled-title::after {
    --line-delay: 115ms;
  }

  .about[data-motion-state="ready"] h2::after,
  .service-grid[data-motion-state="ready"] li::after,
  .work[data-motion-state="ready"] .ruled-title::before,
  .work[data-motion-state="ready"] .ruled-title::after,
  .areas[data-motion-state="ready"] h2::after,
  .faq[data-motion-state="ready"] h2::after,
  .contact[data-motion-state="ready"] .contact-actions::after,
  .process-steps[data-motion-state="ready"]::after {
    transform: scaleX(0);
  }

  .about[data-motion-state="playing"] h2::after,
  .service-grid[data-motion-state="playing"] li::after,
  .work[data-motion-state="playing"] .ruled-title::before,
  .work[data-motion-state="playing"] .ruled-title::after,
  .areas[data-motion-state="playing"] h2::after,
  .faq[data-motion-state="playing"] h2::after,
  .contact[data-motion-state="playing"] .contact-actions::after {
    transform-origin: right center;
    animation: draw-architect-line 460ms cubic-bezier(0.2, 0.65, 0.35, 1) var(--line-delay, 0ms) both;
  }

  .hero-copy[data-motion-state="playing"] > :is(h1, p),
  .service-grid[data-motion-state="playing"] li > :is(.icon, h3, p),
  .areas[data-motion-state="playing"] .city-list li,
  .faq[data-motion-state="playing"] h2,
  .contact[data-motion-state="playing"] .contact-copy > :is(h2, p) {
    animation: arrive-architect var(--arrival-duration, 540ms) cubic-bezier(0.2, 0.7, 0.35, 1)
      var(--arrival-delay, 0ms) backwards;
  }

  .hero-copy {
    --arrival-duration: 680ms;
    --arrival-distance: 1rem;
    --arrival-opacity: 0.74;
  }

  .hero-copy > p,
  .contact-copy > p {
    --arrival-delay: 85ms;
  }

  .faq h2::after {
    --line-delay: 95ms;
  }

  .service-grid li {
    --arrival-duration: 570ms;
    --arrival-distance: 0.9rem;
    --arrival-opacity: 0.52;
  }

  .service-grid li:nth-child(2) { --arrival-delay: 95ms; }
  .service-grid li:nth-child(3) { --arrival-delay: 190ms; }
  .service-grid li:nth-child(4) { --arrival-delay: 285ms; }
  .city-list li:nth-child(2) { --arrival-delay: 55ms; }
  .city-list li:nth-child(3) { --arrival-delay: 110ms; }
  .city-list li:nth-child(4) { --arrival-delay: 165ms; }
  .city-list li:nth-child(5) { --arrival-delay: 220ms; }

  .gallery .work-photo:nth-child(2) { --gallery-delay: 105ms; }
  .gallery .work-photo:nth-child(3) { --gallery-delay: 210ms; }

  .gallery[data-motion-state="playing"] .work-photo img {
    animation: settle-architect-photo 720ms cubic-bezier(0.2, 0.65, 0.35, 1)
      var(--gallery-delay, 0ms) backwards;
  }

  .gallery[data-motion-state="playing"] .work-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to left, rgb(157 205 228 / 50%), rgb(211 232 241 / 28%));
    border-inline-start: 1px solid rgb(7 94 134 / 50%);
    transform: scaleX(0);
    transform-origin: left center;
    animation: clear-architect-photo 720ms cubic-bezier(0.3, 0.65, 0.45, 1)
      var(--gallery-delay, 0ms) backwards;
  }

  .process-steps[data-motion-state]::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: calc(var(--step-size) / 2);
    inset-inline: 9%;
    block-size: 2px;
    background: var(--blue);
    box-shadow: 0 0 0.35rem rgb(7 94 134 / 25%);
    transform-origin: right center;
    pointer-events: none;
  }

  .process-steps[data-motion-state="playing"]::after {
    animation: draw-architect-line 1040ms linear both;
  }

  .process-steps li:nth-child(2) { --step-delay: 260ms; }
  .process-steps li:nth-child(3) { --step-delay: 520ms; }
  .process-steps li:nth-child(4) { --step-delay: 780ms; }
  .process-steps li:nth-child(5) { --step-delay: 1040ms; }

  .process-steps[data-motion-state="playing"] .step-icon {
    animation: mark-architect-step 360ms ease-out var(--step-delay, 0ms);
  }

  .desktop-nav a, .mobile-menu a {
    position: relative;
  }

  .desktop-nav a::after, .mobile-menu a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -0.16em;
    block-size: 1px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 180ms ease-out;
    pointer-events: none;
  }

  .mobile-menu a::after {
    inset-inline: 0;
    margin-inline: auto;
    inset-block-end: 0.38rem;
    inline-size: 2rem;
  }

  .desktop-nav a:hover, .mobile-menu a:hover {
    text-decoration: none;
  }

  :is(.desktop-nav, .mobile-menu) a:is(:hover, :focus-visible, :active)::after {
    transform: scaleX(1);
  }

  .mobile-menu[open] nav {
    animation: open-architect-menu 170ms ease-out both;
  }

  .button:is([href^="tel:"], [href^="https://wa.me/"]) {
    transition: transform 150ms ease-out, background-color 150ms ease-out;
  }

  .button:is([href^="tel:"], [href^="https://wa.me/"]):active {
    transform: scale(0.975);
  }

  @media (hover: hover) and (pointer: fine) {
    .work-photo img {
      transition: transform 350ms ease-out;
    }

    .work-photo:hover img {
      transform: scale(1.035);
    }
  }

  @media (max-width: 520px) {
    .areas[data-motion-state] h2::after {
      inset-inline-start: 0;
    }
  }

  @supports (interpolate-size: allow-keywords) and selector(::details-content) and (transition-behavior: allow-discrete) {
    .faq-list details::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      interpolate-size: allow-keywords;
      transition: block-size 210ms ease, opacity 170ms ease, content-visibility 210ms allow-discrete;
    }

    .faq-list details[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

@keyframes draw-architect-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes arrive-architect {
  from {
    opacity: var(--arrival-opacity, 0.64);
    transform: translateY(var(--arrival-distance, 0.62rem));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes settle-architect-photo {
  from {
    scale: 1.12;
    translate: 4% 0;
  }
  to {
    scale: 1;
    translate: 0 0;
  }
}

@keyframes clear-architect-photo {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes mark-architect-step {
  45% {
    transform: scale(1.19);
    background: var(--blue);
    box-shadow: 0 0 0 0.3rem rgb(7 94 134 / 26%);
  }
}

@keyframes open-architect-menu {
  from {
    opacity: 0.55;
    transform: translateY(-0.3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.inner-hero-copy, .story-copy)[data-motion-state="ready"]::before {
    transform: scaleX(0);
  }

  :is(.inner-hero-copy, .story-copy)[data-motion-state="playing"]::before {
    animation: draw-architect-line 680ms cubic-bezier(0.2, 0.65, 0.35, 1) both;
  }

  :is(.inner-hero-copy, .story-copy)[data-motion-state="playing"] > :is(h1, h2, p),
  .inner-grid[data-motion-state="playing"] > .inner-card,
  .inner-cta[data-motion-state="playing"] :is(h2, p) {
    --arrival-opacity: 0.78;
    --arrival-distance: 0.9rem;
    animation: arrive-architect 620ms cubic-bezier(0.2, 0.7, 0.35, 1) var(--inner-delay, 0ms) backwards;
  }

  .inner-grid > .inner-card:nth-child(2) { --inner-delay: 90ms; }
  .inner-grid > .inner-card:nth-child(3) { --inner-delay: 180ms; }
  .inner-grid > .inner-card:nth-child(n+4) { --inner-delay: 240ms; }
  .inner-hero-copy > p, .story-copy > p, .inner-cta p { --inner-delay: 85ms; }

  .inner-grid[data-motion-state="playing"] > .inner-card:focus-within {
    animation: none;
  }

  :is(.inner-hero-media, .story-media)[data-motion-state="playing"] img {
    animation: settle-architect-photo 740ms cubic-bezier(0.2, 0.65, 0.35, 1) backwards;
  }

  :is(.inner-hero-media, .story-media)[data-motion-state="playing"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to left, rgb(157 205 228 / 50%), rgb(211 232 241 / 28%));
    border-inline-start: 1px solid rgb(7 94 134 / 50%);
    transform: scaleX(0);
    transform-origin: left center;
    animation: clear-architect-photo 740ms cubic-bezier(0.3, 0.65, 0.45, 1) backwards;
  }
}

:is(.desktop-nav, .mobile-menu) a[aria-current="page"] {
  color: var(--blue);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.42em;
}

.inner-page main {
  padding-block: clamp(0.5rem, 1.8vw, 1.35rem) clamp(1.75rem, 4.8vw, 3.5rem);
}

.inner-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(146deg, #f5fafc 0 66%, #e9f4fa 66% 100%);
  border: 1px solid #dfeaf0;
  border-radius: var(--round);
}

.inner-hero-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(0.55rem, 1.45vw, 1.05rem);
  padding: clamp(1.5rem, 4.4vw, 4.15rem);
}

.inner-hero-copy:only-child {
  grid-column: 1 / -1;
  min-block-size: clamp(12rem, 23vw, 19rem);
}

.inner-hero-copy::before {
  content: "";
  inline-size: clamp(2rem, 5vw, 4.5rem);
  block-size: 2px;
  background: var(--blue);
  transform-origin: right center;
}

.inner-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.65rem);
  max-inline-size: 22ch;
  text-wrap: balance;
}

.inner-hero-copy > p {
  max-inline-size: 54ch;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.62;
}

.inner-hero-media {
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  min-block-size: clamp(15rem, 27vw, 23rem);
  overflow: hidden;
  background: #dbe7ed;
}

.inner-hero-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.inner-hero-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 2px;
  background: var(--rule);
}

.inner-hero-pair > div {
  position: relative;
  overflow: hidden;
}

.inner-hero-media figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  padding: 1.6rem 1rem 0.6rem;
  background: linear-gradient(transparent, rgb(20 29 44 / 76%));
  color: #fff;
  font-size: 0.9rem;
}

.inner-section, .inner-cta {
  margin-block-start: clamp(2rem, 4.5vw, 3.7rem);
}

.inner-section-intro {
  display: grid;
  gap: 0.5rem;
  margin-block-end: clamp(1rem, 2.5vw, 1.6rem);
}

.inner-section-intro > p {
  max-inline-size: 63ch;
  line-height: 1.65;
}

.inner-split, .inner-grid {
  display: grid;
  gap: clamp(0.7rem, 1.8vw, 1.3rem);
  align-items: stretch;
}

.inner-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.inner-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.inner-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inner-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.65rem;
  min-inline-size: 0;
  padding: clamp(1rem, 2.5vw, 1.7rem);
  border: 1px solid #dfe8ef;
  border-radius: calc(var(--round) * 0.82);
  background: linear-gradient(153deg, #fff 74%, #f4f9fc 100%);
}

.inner-card h3 {
  font-size: clamp(1.16rem, 2.2vw, 1.42rem);
}

.inner-card p, .inner-card li {
  line-height: 1.63;
}

.inner-card ul, .inner-card ol {
  padding-inline-start: 1.2em;
}

.inner-card .icon {
  color: var(--icon-blue);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.inner-card img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--round) * 0.58);
}

.inner-card a:not(.button) {
  color: var(--blue);
  font-weight: 720;
  text-underline-offset: 0.2em;
}

.inner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.4vw, 0.85rem);
  align-items: center;
}

.inner-hero .inner-actions {
  margin-block-start: 0.25rem;
}

.inner-cta {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3.75vw, 2.6rem);
  background: linear-gradient(145deg, #eef7fb, #e2f0f7);
}

.inner-cta > div:first-child {
  display: grid;
  gap: 0.45rem;
}

.inner-cta p {
  max-inline-size: 58ch;
  line-height: 1.6;
}

.inner-cta .inner-actions {
  margin-block-start: 0.15rem;
}

@media (max-width: 640px) {
  .inner-hero, .inner-split, .inner-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .inner-hero-media {
    min-block-size: clamp(9.75rem, 47vw, 15rem);
  }

  .inner-hero-copy {
    padding: clamp(1.15rem, 4vw, 1.55rem);
  }

  .inner-hero-copy:only-child {
    min-block-size: 0;
  }
}


@media (min-width: 641px) {
  #stages .inner-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .inner-page .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .inner-page .gallery .work-photo:first-child {
    grid-column: 1 / -1;
    block-size: clamp(12.5rem, 62vw, 18rem);
  }
}

.story-panel, .detail-band {
  margin-block-start: clamp(2rem, 4.5vw, 3.7rem);
}

.story-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dfeaf0;
  border-radius: var(--round);
  background: linear-gradient(147deg, #f9fcfd 40%, #e9f4fa 100%);
}

.story-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.85rem;
  min-inline-size: 0;
  padding: clamp(1.3rem, 3.8vw, 3.1rem);
}

.story-copy::before {
  content: "";
  inline-size: clamp(1.8rem, 4.5vw, 3.5rem);
  block-size: 2px;
  background: var(--blue);
  transform-origin: right center;
}

.story-copy > p, .story-copy blockquote {
  max-inline-size: 55ch;
  line-height: 1.65;
}

.story-copy blockquote {
  margin: 0;
  padding: 0.75rem 1rem;
  border-inline-start: 3px solid var(--icon-blue);
  border-radius: 0.45rem;
  background: #fff;
}

.story-list {
  display: grid;
  gap: 0.38rem;
  padding-inline-start: 1.2em;
  line-height: 1.55;
}

.story-list li::marker {
  color: var(--icon-blue);
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}

.detail-tags li {
  padding: 0.27rem 0.65rem;
  border-radius: 999px;
  background: #dcecf5;
  color: #17475e;
  font-size: 0.85rem;
  font-weight: 620;
}

.story-media {
  position: relative;
  isolation: isolate;
  min-block-size: clamp(13rem, 27vw, 22rem);
  overflow: hidden;
  background: #e1ebef;
}

.story-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 50%;
}

.story-media figcaption {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1.6rem 1rem 0.6rem;
  background: linear-gradient(transparent, rgb(20 29 44 / 80%));
  color: #fff;
  font-size: 0.9rem;
}

.text-link {
  color: var(--blue);
  font-weight: 720;
  text-underline-offset: 0.2em;
}

.section-end {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(0.85rem, 2.3vw, 1.4rem);
}

@media (max-width: 640px) {
  .story-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-media {
    min-block-size: clamp(10.5rem, 50vw, 15rem);
  }
}

.site-header .site-logo img {inline-size:100%; block-size:auto}
.footer-logo{inline-size:3.7rem;flex:none}
.footer-logo img{inline-size:100%;block-size:auto}
.footer-logo img { max-block-size: none !important; object-fit: contain; }