/* Remove white space in bottom of the page */
.dialog-off-canvas-main-canvas {
  margin-bottom: -1px;
}

/* Hamburger Button Styles */
#header-1.pt_nav_header .pt_header_type .top-header {
  background-color: #fff;
}

#header-1.pt_nav_header #main.shrink.stricky {
  background-image: none !important;
  background-color: var(--text-color, #19274D) !important;
  height: 75px;
}

#pt-header .pt-nav-link {
  color: #fff;
}

#pt-header .navbar li a.pt-nav-link:hover,
#pt-header .navbar li a.pt-nav-link:focus,
#pt-header .navbar li a.pt-nav-link.active {
  color: var(--secondary-color);
}

/* ==================================================================== */

/* Burger Button Styles */
#pt-header .navbar-collapse {
  justify-content: end;
  gap: 25px;
}

#pt-header .navbar-collapse .navbar-nav {
  gap: 25px;
}

#pt-header button {
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 40px;
  height: 30px;
  padding: 0;
  margin: 0;
  z-index: 1001;
  transition: all 0.3s ease;
}

#pt-header .bar {
  display: block;
  height: 3px;
  background-color: #fff;
  margin: 3px 0;
  transition: transform 0.28s ease, opacity 0.2s ease, width 0.28s ease;
  border-radius: 2px;
}

#pt-header .bar:nth-child(1) {
  width: 30px;
}

#pt-header .bar:nth-child(2) {
  width: 25px;
}

#pt-header .bar:nth-child(3) {
  width: 20px;
}

/* Animation for the burger to cross — symmetric X (bars 1 & 3 grow to 30px,
   shift to the middle bar's line and rotate ±45° about their own centres). */
#pt-header button.active .bar:nth-child(1) {
  width: 30px;
  transform: translateY(9px) rotate(45deg);
}

#pt-header button.active .bar:nth-child(2) {
  opacity: 0;
}

#pt-header button.active .bar:nth-child(3) {
  width: 30px;
  transform: translateY(-9px) rotate(-45deg);
}
/* ==================================================================== */

/* Breadcrumb — clear the position:absolute site header on smaller viewports */
@media screen and (max-width: 1199px) {
  #breadcrumb { padding-top: 92px; }
}
@media screen and (max-width: 576px) {
  #breadcrumb { padding-top: 80px; }
}

/* Brand-lock dark surfaces — site header + homepage hero align with footer / #contact / work-detail intro */
#header-1.pt_nav_header .pt_header_type,
.pt_header_type.header-1 {
  background-color: var(--text-color, #19274D) !important;
}

#header-1.pt_nav_header #main,
#header-1.pt_nav_header #main.shrink.stricky {
  background-color: var(--text-color, #19274D) !important;
  background-image: none !important;
}

/* Hero */
#hero{
  padding: 0;
}
#hero-with-bg {
  min-height: calc(100vh - 75px);
  min-height: calc(100dvh - 75px);
  gap: 2rem;
  background-color: var(--text-color, #19274D) !important;
}

#hero .inner-wrapper{
  top: 150px!important;
  left: 152px;
}
#hero .container{
  position: unset;
}
#hero .title-card {
  padding: 30px 52px;
  background: var(--primary-color);
  border-radius: 30px 30px 30px 0px;
  margin-bottom: 35px;
  width: 380px;
}
#hero-with-bg .content-wrapper {
  padding-right: 15px;
  padding-left: 15px;
}
#hero-with-bg .pt-title {
  font-size: clamp(2.5rem, 8vw, 4.2rem);
  margin-bottom: clamp(1rem, 3vw, 2rem);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: clamp(-0.5px, 0.1vw, 1px);
  word-spacing: clamp(1px, 0.3vw, 3px);
  padding: 0 clamp(1rem, 8vw, 4rem);
  animation: fadeInUp 0.8s ease-out forwards;
}
#hero-with-bg .subtitle {
  display: flex;
  flex-direction: column;
  color: #BFC6D4;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  padding: 0 1.5rem;
  max-width: 58ch;
  margin-inline: auto;
  line-height: 1.4;
  letter-spacing: 1px;
  text-wrap: balance;
}

#hero-with-bg .subtitle--split {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}

#hero-with-bg .subtitle__line {
  display: block;
  max-width: 100%;
}

#hero-with-bg .subtitle--split .subtitle__line:first-child {
  font-weight: 600;
  color: #E5EAF2;
}

#hero-with-bg .subtitle--split .subtitle__line:last-child {
  font-size: 0.85em;
  font-weight: 400;
  font-style: italic;
  opacity: 0.78;
  letter-spacing: 0.6px;
}
#hero .pt-title, #hero-with-bg .pt-title {
  color: var(--white-text);
}
#hero .cta-link,
#hero-with-bg .cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  color: var(--secondary-color, #0cbebe) !important;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 200ms ease;
}

#hero .cta-link::before,
#hero-with-bg .cta-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 36px;
  height: 2px;
  background-color: currentColor;
  transition: width 180ms ease-out;
}

#hero .cta-link__arrow,
#hero-with-bg .cta-link__arrow {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  transition: transform 200ms ease;
}

#hero .cta-link:hover,
#hero .cta-link:focus-visible,
#hero-with-bg .cta-link:hover,
#hero-with-bg .cta-link:focus-visible {
  color: #fff !important;
}

#hero .cta-link:hover::before,
#hero .cta-link:focus-visible::before,
#hero-with-bg .cta-link:hover::before,
#hero-with-bg .cta-link:focus-visible::before {
  width: 64px;
}

#hero .cta-link:hover .cta-link__arrow,
#hero .cta-link:focus-visible .cta-link__arrow,
#hero-with-bg .cta-link:hover .cta-link__arrow,
#hero-with-bg .cta-link:focus-visible .cta-link__arrow {
  transform: translateX(3px);
}
#hero .cta-link i{
  font-size: 12px;
  color:var(--white-text);
}
#hero .video-play{
  background-color: var(--secondary-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height:35px;
  padding: 0px 10px 0px 13px!important;
  position: relative;
  z-index: 2;
}
#hero .image-wrapper{
  height: 620px;
  overflow: hidden;
  width: 100%;
  z-index: 2;
}
#hero .image-wrapper:after{
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#hero .inner-wrapper::before{
  background-image: url(../images/grid.png);
  content: '';
  position: absolute;
  left: -56%;
  top: 53px;
  width: 215px;
  z-index: 4;
  height: 226px;
  background-repeat: no-repeat;
  background-color: var(--primary-color);
  background-position: center;
}
.btn-cta-wrapper {
  width: 200px;
  height: 60px;
  margin: 70px auto 0;
  z-index: 5;
}
.btn-cta {
  min-width: 200px;
  min-height: 60px;
  display: inline-flex;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 1.3px;
  font-weight: 700;
  color: #313133;
  background: #4FD1C5;
  background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
}

.btn-cta::before {
  content: '';
  border-radius: 1000px;
  min-width: calc(200px + 12px);
  min-height: calc(60px + 12px);
  border: 6px solid #00FFCB;
  box-shadow: 0 0 60px rgba(0,255,203,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.btn-cta:hover,
.btn-cta:focus {
  color: #313133 !important;
}

.btn-cta:hover::before,
.btn-cta:focus::before {
  opacity: 1;
}

.btn-cta::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #00FFCB;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 2.4s infinite;
}

.btn-cta:hover::after,
.btn-cta:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}

/* Our clients */
#our-clients {
  padding: 104px 0 112px;
  border-top: 1px solid rgba(58, 75, 206, 0.14);
  position: relative;
  overflow: hidden;
}

#our-clients .our-clients-wrap {
  margin-top: 36px;
}

.client-proof__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary-color, #0cbebe);
  margin: 0 0 12px;
}

.client-proof__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.client-proof__heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--primary-color, #19274D);
  margin-bottom: 2rem;
  letter-spacing: -0.015em;
}

.client-proof__intro {
  color: rgba(25, 39, 77, 0.72);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.65;
  margin: 0;
}

/* Marquee carousel — Lullabot-style pure-CSS scroll, no JS.
 * Items are rendered twice in the markup so animation can loop seamlessly
 * from 0 to -50%. Gradient masks fade the leading/trailing edge so logos
 * appear to enter/exit smoothly. */
.brands {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.brands__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: max-content;
}

.brands.animated .brands__items {
  animation: ukrx-brands-scroll 40s linear infinite;
}

@keyframes ukrx-brands-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .brands.animated .brands__items { animation: none; }
}

/* All logos render at uniform 240x120 canvas (raster <img> kept for legacy /
 * non-SVG uploads). Padding around each item produces the inter-logo gap. */
.brands__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 120px;
  padding: 0 24px;
}

.brands__item::before { display: none; }

.brands__item-svg,
.brands__item-svg svg,
.brands__item img {
  display: block;
  width: 240px;
  height: 120px;
}

.brands__item img {
  object-fit: contain;
}

.brands__item-svg,
.brands__item img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  opacity: 0.74;
  transition: filter 180ms ease, opacity 180ms ease;
}

.brands__item:hover .brands__item-svg,
.brands__item:hover img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  opacity: 1;
}

.brands:hover .brands__items { animation-play-state: paused; }

.brands__item:hover img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  #our-clients .row:first-child {
    justify-content: center;
  }

  #our-clients .client-proof__kicker,
  #our-clients .client-proof__heading,
  #our-clients .client-proof__intro {
    text-align: center;
  }
}

/* Our services */
#services {
  background:
    radial-gradient(ellipse 720px 280px at 25% 14%, rgba(12, 190, 190, 0.18), transparent 70%),
    #19274D;
}

#services .service-item h4 {
  color: var(--primary-color, #19274D);
}

#services .services-tour__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary-color, #0cbebe);
  margin: 0 0 12px;
}

#services .services-tour__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

#services .services-tour__heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}

#services .services-tour__intro {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.65;
  margin: 0 0 3rem;
  max-width: 60ch;
}

/* Whole tile is a clickable <a class="service-item">. Reset link defaults so
   typography inherits cleanly; the inner h4/body/more-link keep their own colors. */
#services .service-item {
  display: block;
  border: 1px solid rgba(25, 39, 77, 0.08);
  border-radius: 12px;
  background: #fff;
  padding: 48px 32px 36px;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

#services .service-item:hover,
#services .service-item:focus-visible {
  text-decoration: none;
  color: inherit;
}

#services .service-item:focus-visible {
  outline: 2px solid var(--secondary-color, #0cbebe);
  outline-offset: 4px;
}

#services .row > [class*="col-"] {
  margin-bottom: 24px;
}

#services .service-item:hover {
  border-color: rgba(12, 190, 190, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -16px rgba(25, 39, 77, 0.18);
}

#services .service-item .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
}

#services .service-item .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#services .service-item .icon:empty::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  margin: 14px auto;
  border-radius: 50%;
  background: var(--secondary-color, #0cbebe);
  opacity: 0.35;
}

#services .service-item:hover .icon {
  animation: unset !important;
}

#services .service-item.migration .icon {
  width: 56px;
}

#services .service-item.devops h4 {
  max-width: none;
}

#services .service-item {
  position: relative;
}

#services .service-item.maintenance::before {
  content: 'D7 long-tail';
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-color, #0cbebe);
}

#services .service-item .more-link {
  position: relative;
  display: inline-block;
  color: var(--secondary-color, #0cbebe);
  font-weight: 600;
  margin-top: 0.5rem;
}

#services .service-item .more-link::before {
  content: '';
  background-color: currentColor;
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 41px;
  height: 2px;
  z-index: 0;
  transition: width .3s ease-in-out;
}

#services .service-item:hover .more-link::before,
#services .service-item:focus-visible .more-link::before {
  width: 100%;
}

#services .services-tour__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
  text-align: center;
}

#services .services-tour__cta-text {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  margin: 0;
}

#services .services-tour__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--secondary-color, #0cbebe);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 200ms ease;
}

#services .services-tour__cta-link:hover,
#services .services-tour__cta-link:focus-visible {
  color: #fff;
}

#services .services-tour__cta-arrow {
  display: inline-block;
  transition: transform 180ms ease;
}

#services .services-tour__cta-link:hover .services-tour__cta-arrow,
#services .services-tour__cta-link:focus-visible .services-tour__cta-arrow {
  transform: translateX(4px);
}

/* Portfolio case → bottom CTA reuses the existing `#contact.pt-section` dark
   block (navy + radial-gradients + flat underline form fields) defined further
   below. Empty hook kept for layout-only future tweaks. */

/* CTA block */
#cta-block {
  padding-left: 15px;
  padding-right: 15px;
}

#cta-block > div:has(.cta-title) {
  gap: 1rem;
}

#cta-block .cta-title {
  font-size: 30px;
}

/* Footer — darker navy than the brand-blue CTA form above for a clear band break */
.footer {
  background: #19274D;
  border-top: 4px solid var(--secondary-color);
}

/* Footer — agency refinement: positioning, hierarchy, spacing, hover consistency */
.footer .footer-top.pt-section {
  padding: 72px 0 36px;
}

.footer .footer-logo {
  margin-bottom: 20px;
}

.footer__tagline {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.005em;
  max-width: 34ch;
  margin: 0 0 36px;
}

.footer .footer-contact {
  margin-top: 0;
}

.footer .footer-four {
  padding-left: 0;
  gap: 20px;
}

.footer a,
.footer .footer-contact .phone a,
.footer .footer-four ul li a {
  transition: color 180ms ease, opacity 180ms ease;
}

.footer a:hover,
.footer .footer-contact .phone a:hover,
.footer .footer-four ul li a:hover {
  color: var(--secondary-color) !important;
  opacity: 1;
}

.footer .footer-four .copyright {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}

@media screen and (max-width: 768px) {
  .footer .footer-top.pt-section {
    padding: 56px 0 28px;
  }
  .footer__tagline {
    margin-bottom: 28px;
  }
  .footer .footer-four {
    padding-left: 0;
    margin-top: 36px;
  }
}


/* Responsive adjustments */
@media screen and (max-width: 1199px) {
  #pt-header button {
    display: flex;
  }

  /* Full-screen overlay menu — slides in from the top.
     No Bootstrap collapse: `.show` is toggled directly in JS so the slide
     starts on the same frame as the tap (was ~350ms of dead air before).
     Standard ease-in-out, no overshoot bounce. */
  #pt-header .navbar-collapse {
    position: fixed;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--text-color, #19274D);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    z-index: 1000;
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: top;
  }

  #pt-header .navbar-collapse.show {
    top: 0;
    opacity: 1;
    visibility: visible;
  }

  /* Menu items styles */
  #pt-header .navbar-collapse .navbar-nav {
    list-style: none;
    width: 100%;
    max-width: 800px;
    gap: 0;
    text-align: center;
  }

  #pt-header .navbar-nav a {
    font-size: clamp(22px, 6vw, 28px);
  }

  #pt-header .nav-item {
    margin: 14px 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  #pt-header .navbar-collapse.show .nav-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Quick, tight stagger — whole list is in within ~0.45s of the tap. */
  #pt-header .navbar-collapse.show .nav-item:nth-child(1) { transition-delay: 0.05s; }
  #pt-header .navbar-collapse.show .nav-item:nth-child(2) { transition-delay: 0.10s; }
  #pt-header .navbar-collapse.show .nav-item:nth-child(3) { transition-delay: 0.15s; }
  #pt-header .navbar-collapse.show .nav-item:nth-child(4) { transition-delay: 0.20s; }
  #pt-header .navbar-collapse.show .nav-item:nth-child(5) { transition-delay: 0.25s; }
  #pt-header .navbar-collapse.show .nav-item:nth-child(n+6) { transition-delay: 0.30s; }

  #pt-header .navbar-collapse .nav-link {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
    position: relative;
    padding: 5px 0;
  }

  /* `#pt-header .navbar-collapse .nav-link` (1,3,0) beats the starter-kit
     `#pt-header .navbar li a:hover {color:#000}` (1,2,2) — without this the
     hover state goes black-on-navy. Keep weight steady too (kit forces 700). */
  #pt-header .navbar-collapse .nav-link:hover,
  #pt-header .navbar-collapse .nav-link:focus-visible,
  #pt-header .navbar-collapse .nav-link.active {
    color: var(--secondary-color, #0cbebe);
    font-weight: 600;
  }

  #pt-header .navbar-collapse .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color, #0cbebe);
    transform: translateX(-50%);
    transition: width 0.22s ease;
  }

  #pt-header .navbar-collapse .nav-link:hover::after,
  #pt-header .navbar-collapse .nav-link:focus-visible::after,
  #pt-header .navbar-collapse .nav-link.active::after {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  #hero-with-bg .pt-title {
    font-size: clamp(3rem, 7vw, 4.5rem);
    margin-bottom: 1.5rem;
  }

  #hero-with-bg .subtitle {
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  }
}

@media screen and (max-width: 991px) {
  #cta-block > div:has(.cta-title) {
    flex-flow: column;
  }
}

@media screen and (max-width: 768px) {
  #hero-with-bg {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem;
    gap: 1.75rem;
  }

  #hero-with-bg .content-wrapper {
    padding: 0;
  }

  #hero-with-bg .pt-title {
    font-size: clamp(2.5rem, 9vw, 3.5rem);
    padding: 0;
    line-height: 1.15;
  }

  #hero-with-bg .subtitle {
    max-width: 58ch;
    padding: 0;
    line-height: 1.35;
    letter-spacing: 0.5px;
  }
}

@media screen and (max-width: 480px) {
  #hero-with-bg {
    padding: 1rem;
    gap: 1.25rem;
  }

  #hero-with-bg .content-wrapper {
    padding: 0;
  }

  #hero-with-bg .pt-title {
    font-size: clamp(2rem, 10vw, 3rem);
    margin-bottom: 1rem;
    padding: 0;
  }

  #hero-with-bg .subtitle {
    font-size: clamp(0.95rem, 3.9vw, 1.12rem);
    max-width: 58ch;
    padding: 0;
    line-height: 1.3;
    letter-spacing: 0.35px;
  }
}

/* ============================================================
   Selected Work — sc-card component
   ============================================================ */

.selected-work {
  background: linear-gradient(to bottom, #f7f8fa 0%, #f7f8fa 70%, #fff 100%);
}

.selected-work__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary-color, #0cbebe);
  margin: 0 0 12px;
}

.selected-work__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--secondary-color, #0cbebe);
  display: inline-block;
}

.selected-work__heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--primary-color, #19274D);
  margin-bottom: 2rem;
  letter-spacing: -0.015em;
}

.selected-work__view-all-wrap {
  text-align: center;
  margin-top: 5rem;
}

.selected-work__view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  margin-top: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary-color, #19274D);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 200ms ease;
}

.selected-work__view-all::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 36px;
  height: 2px;
  background-color: currentColor;
  transition: width 180ms ease-out;
}

.selected-work__view-all .sc-card__arrow {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  transition: transform 200ms ease;
}

.selected-work__view-all:hover,
.selected-work__view-all:focus-visible {
  color: var(--secondary-color, #0cbebe);
}

.selected-work__view-all:hover::before,
.selected-work__view-all:focus-visible::before {
  width: 100%;
}

.selected-work__view-all:hover .sc-card__arrow,
.selected-work__view-all:focus-visible .sc-card__arrow {
  transform: translateX(4px);
}

/* Tags — editorial kicker: letter-spaced caps, middle-dot separator */
.selected-work__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin-bottom: 14px;
}

.selected-work__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.selected-work__tag + .selected-work__tag::before {
  content: '·';
  display: inline-block;
  margin: 0 0.5em;
  opacity: 0.6;
}

.selected-work__tag--dark {
  color: var(--secondary-color, #0cbebe);
  background: transparent;
  border: 0;
}

/* ---- Base card ---- */
.sc-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  background: var(--primary-color, #19274D);
  transition: opacity 0.3s ease;
}

.sc-card:hover {
  text-decoration: none;
  color: inherit;
}

/* Background image layer */
.sc-card__bg {
  position: absolute;
  inset: 0;
  background-image: var(--sc-bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
  z-index: 0;
}

.sc-card:hover .sc-card__bg {
  transform: scale(1.04);
}

/* Neighbor dimming — featured row */
.sc-row--featured:hover .sc-card {
  opacity: 0.75;
}

.sc-row--featured .sc-card:hover {
  opacity: 1;
}

/* Neighbor dimming — secondary row (gentler) */
.sc-row--secondary-wrap:hover .sc-card {
  opacity: 0.7;
}

.sc-row--secondary-wrap .sc-card:hover {
  opacity: 1;
}

/* ---- Featured card (loop.first → .sc-row--featured) ---- */
.sc-row--featured {
  margin-bottom: 20px;
}

.row.sc-row--secondary-wrap {
  --bs-gutter-x: 20px;
  margin-left: -10px;
  margin-right: -10px;
}

.row.sc-row--secondary-wrap > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

.sc-row--featured .sc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(25, 39, 77, 0.08);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

/* Hide secondary-content in featured; bg-layer not needed (using real <img>) */
.sc-row--featured .sc-card__secondary-content,
.sc-row--featured .sc-card__bg {
  display: none;
}

/* Image as top figure — Zoocha-style, not bg-splash */
.sc-row--featured .sc-card__secondary-image {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  order: -1;
}

.sc-row--featured .sc-card__secondary-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}

.sc-row--featured .sc-card:hover .sc-card__secondary-image img {
  transform: scale(1.03);
}

.sc-row--featured .sc-card__featured-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2.5rem 2.5rem;
}

/* Kicker tags on light bg: teal (overrides white default) */
.sc-row--featured .selected-work__tag {
  color: var(--secondary-color, #0cbebe);
}

.sc-row--featured .sc-card__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  color: var(--primary-color, #19274D);
  margin: 0 0 0.6rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.sc-row--featured .sc-card__lead {
  font-size: 1.05rem;
  color: #2d3748;
  margin: 0 0 0.75rem;
  line-height: 1.5;
  max-width: 640px;
}

.sc-row--featured .sc-card__summary {
  font-size: 0.9375rem;
  color: #4a5568;
  margin: 0 0 1.25rem;
  max-width: 640px;
  line-height: 1.6;
}

/* Inline text-link matching .footer__hero-link standard */
.sc-row--featured .sc-card__read-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary-color, #19274D);
  text-decoration: none;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: color 200ms ease;
}

.sc-row--featured .sc-card__read-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 36px;
  height: 2px;
  background-color: currentColor;
  transition: width 180ms ease-out;
}

.sc-row--featured .sc-card__arrow {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  transition: transform 200ms ease;
}

.sc-row--featured .sc-card:hover .sc-card__read-link,
.sc-row--featured .sc-card:focus-visible .sc-card__read-link {
  color: var(--secondary-color, #0cbebe);
}

.sc-row--featured .sc-card:hover .sc-card__read-link::before,
.sc-row--featured .sc-card:focus-visible .sc-card__read-link::before {
  width: 100%;
}

.sc-row--featured .sc-card:hover .sc-card__arrow,
.sc-row--featured .sc-card:focus-visible .sc-card__arrow {
  transform: translateX(4px);
}

/* ---- Featured header row: tags (left) + tech stack (right) ---- */
.sc-row--featured .sc-card__header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-bottom: 6px;
}

.sc-row--featured .sc-card__header-row .selected-work__tags {
  margin-bottom: 0;
}

.sc-row--featured .sc-card__header-row .sc-card__stack {
  margin-left: auto;
}

.sc-row--featured .sc-card__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Specificity bump only inside #portfolio to beat legacy `#portfolio ul { margin-top/bottom }` rule from starter-kit style.css. */
#portfolio .sc-row--featured .sc-card__stack { margin: 0; }

/* On the /our-work listing the featured-style cards are half-width, so a
   row of "2 tags + 4 stack badges" can't sit on one line and the
   space-between layout wraps awkwardly. There: stack the two groups —
   tags on top, the tech-stack list below, left-aligned and free to wrap. */
.sc-row--listing .sc-card__header-row {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
.sc-row--listing .sc-card__header-row .sc-card__stack {
  margin-left: 0;
}

#portfolio .sc-row--featured .sc-card__stack-item,
.sc-row--featured .sc-card__stack-item {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color, #19274D);
  background: rgba(25, 39, 77, 0.06);
  border-radius: 3px;
  padding: 4px 8px;
  white-space: nowrap;
}

/* ---- Secondary cards (remaining rows → .sc-row--secondary-wrap) ---- */

/* Hide featured content in secondary context */
.sc-row--secondary-wrap .sc-card__featured-inner,
.sc-row--secondary-wrap .sc-card__bg {
  display: none;
}

.sc-row--secondary-wrap .sc-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(25, 39, 77, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}


.sc-row--secondary-wrap .sc-card__secondary-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
  z-index: 1;
}

.sc-row--secondary-wrap .sc-card__secondary-image {
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  order: -1;
}

.sc-row--secondary-wrap .sc-card__secondary-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}

.sc-row--secondary-wrap .sc-card:hover .sc-card__secondary-image img {
  transform: scale(1.04);
}

.sc-row--secondary-wrap .sc-card__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary-color, #19274D);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.sc-row--secondary-wrap .sc-card__lead {
  font-size: 0.8125rem;
  color: #4a5568;
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.sc-row--secondary-wrap .sc-card__summary {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0 0 0.875rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sc-row--secondary-wrap .sc-card__read-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary-color, #19274D);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 200ms ease;
}

.sc-row--secondary-wrap .sc-card__read-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 28px;
  height: 2px;
  background-color: currentColor;
  transition: width 180ms ease-out;
}

.sc-row--secondary-wrap .sc-card__arrow {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  transition: transform 200ms ease;
}

.sc-row--secondary-wrap .sc-card:hover .sc-card__read-link,
.sc-row--secondary-wrap .sc-card:focus-visible .sc-card__read-link {
  color: var(--secondary-color, #0cbebe);
}

.sc-row--secondary-wrap .sc-card:hover .sc-card__read-link::before,
.sc-row--secondary-wrap .sc-card:focus-visible .sc-card__read-link::before {
  width: 100%;
}

.sc-row--secondary-wrap .sc-card:hover .sc-card__arrow,
.sc-row--secondary-wrap .sc-card:focus-visible .sc-card__arrow {
  transform: translateX(4px);
}



/* Responsive — tablet (<=992px): secondary cards flip to column (image top, text below) */
@media screen and (max-width: 992px) {
  .sc-row--featured .sc-card__secondary-image {
    aspect-ratio: 16 / 9;
  }

  .sc-row--featured .sc-card__featured-inner {
    padding: 1.75rem 1.75rem 2rem;
  }

  .sc-row--secondary-wrap .sc-card__secondary-image {
    aspect-ratio: 16 / 9;
  }

  .sc-row--secondary-wrap .sc-card__secondary-content {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

/* Responsive — mobile (<=768px): cards stack vertically */
@media screen and (max-width: 768px) {
  .selected-work__heading {
    margin-bottom: 1.5rem;
  }

  .sc-row--featured .sc-card__featured-inner {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .sc-row--featured .sc-card__lead {
    font-size: 0.95rem;
  }

  .sc-row--featured .sc-card__summary {
    font-size: 0.875rem;
  }

  #portfolio .sc-row--featured .sc-card__header-row,
  .sc-row--featured .sc-card__header-row {
    display: block;
  }

  #portfolio .sc-row--featured .sc-card__header-row .selected-work__tags,
  .sc-row--featured .sc-card__header-row .selected-work__tags {
    margin-bottom: 6px;
  }

  #portfolio .sc-row--featured .sc-card__header-row .sc-card__stack,
  .sc-row--featured .sc-card__header-row .sc-card__stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
  }

  #portfolio .sc-row--featured .sc-card__stack-item,
  .sc-row--featured .sc-card__stack-item {
    font-size: 0.62rem;
    padding: 3px 7px;
    letter-spacing: 0.06em;
  }

  .sc-row--secondary-wrap > [class*="col-"] + [class*="col-"] {
    margin-top: 20px;
  }
}

/* Responsive — small mobile (<=480px) */
@media screen and (max-width: 480px) {
  .selected-work__heading {
    margin-bottom: 1.25rem;
  }

  .sc-row--featured .sc-card__secondary-image {
    aspect-ratio: 4 / 3;
  }

  .sc-row--featured .sc-card__featured-inner {
    padding: 1.25rem 1rem 1.5rem;
  }

  .sc-row--featured .sc-card__read-link {
    font-size: 0.9375rem;
  }

  .sc-row--secondary-wrap .sc-card__secondary-image {
    aspect-ratio: 3 / 2;
  }

  .sc-row--secondary-wrap .sc-card__title {
    font-size: 1.05rem;
  }

  .sc-row--secondary-wrap .sc-card__secondary-content {
    padding: 1.125rem 1.125rem 1.25rem;
  }

  .selected-work__tag {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  #portfolio .sc-row--featured .sc-card__stack-item,
  .sc-row--featured .sc-card__stack-item {
    font-size: 0.56rem;
    padding: 2px 6px;
    letter-spacing: 0.05em;
  }
}

/* ============================================================
   Case page — full view mode for node.portfolio
   ============================================================ */

.work-detail {
  --case-tint: #eef1ff;
  --case-rule: rgba(58, 75, 206, 0.14);
  --case-accent: var(--secondary-color, #0cbebe);
  --case-ink: #19274D;
  --case-muted: #5b6578;
  color: var(--case-ink);
  background: #fff;
}

/* Intro */
.work-detail__intro {
  padding: 40px 0 72px;
  background: #fff;
  color: var(--case-ink);
  border-bottom: 1px solid rgba(25, 39, 77, 0.18);
}

.work-detail__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--case-accent);
  margin: 0 0 24px;
}

.work-detail__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--case-accent);
  display: inline-block;
}

/* Tags — pill rendering; covers both Drupal field structures (with/without .field__items wrapper) */
.work-detail__tags { margin-bottom: 20px; }

.work-detail__tags .field,
.work-detail__tags .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-detail__tags .field__item,
.work-detail__tags > span {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(25, 39, 77, 0.16);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-ink);
  background: #fff;
  line-height: 1.4;
}

.work-detail__title {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: var(--case-ink);
  overflow-wrap: break-word;
}

.work-detail__headline {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 500;
  color: #2d3748;
  line-height: 1.4;
  margin: 0 0 1.5rem;
  max-width: 42ch;
}

.work-detail__lead {
  font-size: 1.2rem;
  color: #4a5568;
  line-height: 1.7;
  max-width: 65ch;
}

/* Descendant p needs explicit font/color: legacy style.css `p` rule (font-size 18px, color var(--text-color)) targets the element and beats inheritance. */
.work-detail__lead p {
  margin: 0 0 0.75rem;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.work-detail__lead p:last-child { margin-bottom: 0; }

/* Meta strip — accent left-border cards on white; dark→white seam replaces top rule */
.work-detail__meta {
  padding: 40px 0 56px;
  background: #fff;
}

.work-detail__meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
}

.work-detail__meta-item {
  padding: 4px 28px;
  border-left: 2px solid var(--case-accent);
}

.work-detail__meta-item:first-child { padding-left: 0; border-left: 0; }

.work-detail__meta-item dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--case-muted);
  margin-bottom: 10px;
}

.work-detail__meta-item dd {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--case-ink);
  margin: 0;
  line-height: 1.3;
}

.work-detail__meta-item dd a {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.work-detail__meta-item dd a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 28px;
  background: currentColor;
  transition: width 180ms ease;
}

.work-detail__meta-item dd a:hover::after { width: 100%; }

/* Intro tag row — tags (left) + tech stack (right) on the same line */
.work-detail__tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-bottom: 14px;
}

.work-detail__tag-row .work-detail__tags {
  margin: 0;
}

#portfolio .work-detail__tag-row .work-detail__stack,
.work-detail__tag-row .work-detail__stack {
  margin-left: auto;
}

#portfolio .work-detail__stack,
.work-detail__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-detail__stack-item {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--case-ink, #19274D);
  background: rgba(25, 39, 77, 0.06);
  border-radius: 3px;
  padding: 5px 9px;
}

/* Featured image — large, confident, framed in a tinted zone so it reads as an artifact */
.work-detail__hero-image {
  margin: 0;
  padding: 0 0 96px;
  background: #fff;
}

.work-detail__hero-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(10, 18, 40, 0.04),
    0 28px 72px rgba(10, 18, 40, 0.12);
  display: block;
}

/* Body — narrower reading column, lead paragraph, polished blockquote */
.work-detail__body {
  padding: 8px 0 96px;
  background: #fff;
  font-size: 1.0625rem;
  color: #2d3748;
  line-height: 1.8;
}

.work-detail__body .field--name-body {
  max-width: 68ch;
}

/* Descendant p needs explicit font/color: legacy style.css `p` rule targets the element and beats inheritance. */
.work-detail__body p:not(.work-detail__kicker) {
  margin: 0 0 1.35rem;
  font-size: 1.0625rem;
  color: #2d3748;
  line-height: 1.8;
  font-family: inherit;
}

/* Lead-in paragraph: first <p> in body field — selector without `>` covers both wrapped (.field__item) and unwrapped renders */
.work-detail__body .field--name-body p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--case-ink);
  margin-bottom: 1.75rem;
}

.work-detail__body h2 {
  font-size: clamp(1.625rem, 2.8vw, 2rem);
  font-weight: 800;
  color: var(--case-ink);
  letter-spacing: -0.01em;
  margin: 3rem 0 1.25rem;
  line-height: 1.2;
}

.work-detail__body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--case-ink);
  margin: 2rem 0 0.75rem;
  line-height: 1.3;
}

.work-detail__body h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--case-ink);
  margin: 1.75rem 0 0.5rem;
  line-height: 1.35;
}

/* Pull-quote — larger, non-italic, accent bar */
.work-detail__body blockquote {
  border-left: 4px solid var(--case-accent);
  padding: 0.25rem 0 0.25rem 2rem;
  margin: 2.5rem 0;
  font-size: 1.35rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
  color: var(--case-ink);
}

.work-detail__body blockquote p {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  margin-bottom: 0.75rem;
}
.work-detail__body blockquote p:last-child { margin-bottom: 0; }

.work-detail__body ul,
.work-detail__body ol { margin: 0 0 1.35rem; padding-left: 1.5rem; }
.work-detail__body li { margin-bottom: 0.5rem; }

.work-detail__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.75rem 0;
}

.work-detail__body figure {
  margin: 1.75rem 0;
}
.work-detail__body figure img {
  margin: 0;
  border: 1px solid var(--case-rule, rgba(25, 39, 77, 0.08));
}
.work-detail__body figure a.popup-image {
  display: block;
  cursor: zoom-in;
}
.work-detail__body figure a.popup-image img {
  transition: opacity 0.2s ease;
}
.work-detail__body figure a.popup-image:hover img {
  opacity: 0.92;
}
.work-detail__body figcaption {
  font-size: 0.9rem;
  color: #6b7280;
  margin-top: 0.6rem;
  line-height: 1.4;
}

/* Outcomes — inline at the top of body, Lullabot-style: kicker + H2 + tidy list,
   sits as part of prose flow, separated by a hairline rule. */
.work-detail__outcomes {
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--case-rule, rgba(25, 39, 77, 0.08));
}

.work-detail__outcomes-heading {
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  font-weight: 800;
  color: var(--case-ink, #19274d);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 1.25rem;
}

.work-detail__outcomes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.work-detail__outcomes-item {
  position: relative;
  padding-left: 28px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--case-ink, #19274d);
}

.work-detail__outcomes-item::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--case-accent, #0cbebe);
  font-weight: 800;
}

/* Related — section kicker + headline, 2-up spacious grid */
.work-detail__related {
  padding: 104px 0 112px;
  background: var(--case-tint);
  border-top: 1px solid var(--case-rule);
}

.work-detail__related-header {
  margin: 0 0 48px;
}

.work-detail__related-heading {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 800;
  color: var(--case-ink);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
}

/* Scoped contrast bump for related cards inside work page */
.work-detail__related .sc-row--secondary-wrap .sc-card__title {
  color: var(--case-ink);
  font-size: 1.18rem;
}
.work-detail__related .sc-row--secondary-wrap .sc-card__lead {
  color: #2d3748;
  font-weight: 500;
}
.work-detail__related .sc-row--secondary-wrap .sc-card__summary {
  color: #4a5568;
}
.work-detail__related .sc-row--secondary-wrap .sc-card__read-link {
  color: var(--case-ink);
  font-weight: 700;
}

/* Prevent long URLs in meta from breaking layout at any width */
.work-detail__meta-item dd { overflow-wrap: anywhere; }

/* ============================================================
   Service inner page — `node--services--full.html.twig`
   Reuses the case-page design tokens; lighter structure (intro + body + CTA).
   ============================================================ */
.service-page {
  --case-tint: #eef1ff;
  --case-rule: rgba(58, 75, 206, 0.14);
  --case-accent: var(--secondary-color, #0cbebe);
  --case-ink: #19274D;
  --case-muted: #5b6578;
  color: var(--case-ink);
  background: #fff;
}

.service-page__intro {
  padding: 56px 0;
  background: #fff;
  color: var(--case-ink);
  border-bottom: 1px solid rgba(25, 39, 77, 0.18);
}

.service-page__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--case-accent);
  margin: 0 0 24px;
}

.service-page__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--case-accent);
  display: inline-block;
}

.service-page__title {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: var(--case-ink);
  overflow-wrap: break-word;
}

.service-page__lead {
  font-size: 1.2rem;
  color: #4a5568;
  line-height: 1.7;
  max-width: 65ch;
}

.service-page__lead p {
  margin: 0 0 0.75rem;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

.service-page__lead p:last-child { margin-bottom: 0; }

.service-page__body {
  padding: 56px 0;
  background: #fff;
  font-size: 1.0625rem;
  color: #2d3748;
  line-height: 1.8;
}

.service-page__body .field--name-body {
  max-width: 68ch;
}

.service-page__body p {
  margin: 0 0 1.35rem;
  font-size: 1.0625rem;
  color: #2d3748;
  line-height: 1.8;
  font-family: inherit;
}

.service-page__body h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: var(--case-ink);
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1.25rem;
  line-height: 1.2;
}

.service-page__body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--case-ink);
  margin: 2rem 0 0.75rem;
  line-height: 1.3;
}

.service-page__body ul,
.service-page__body ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}

.service-page__body li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.service-page__thesis {
  padding: 32px 0;
  background: #fff;
}

.service-page__thesis-body {
  position: relative;
  padding: 8px 0 8px 28px;
  border-left: 4px solid var(--case-accent);
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--case-ink);
  font-weight: 500;
  max-width: 70ch;
}

.service-page__thesis-body p {
  margin: 0 0 0.85rem;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.service-page__thesis-body p:last-child { margin-bottom: 0; }

.service-page__capabilities {
  padding: 64px 0;
  background: #f7f8fa;
  border-top: 1px solid rgba(25, 39, 77, 0.08);
  border-bottom: 1px solid rgba(25, 39, 77, 0.08);
}

.service-page__capabilities-header {
  margin: 0 0 36px;
}

.service-page__capabilities-heading {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: var(--case-ink);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}

.service-page__capabilities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  counter-reset: cap;
}

.service-page__capability {
  position: relative;
  background: #fff;
  border: 1px solid rgba(25, 39, 77, 0.12);
  border-radius: 12px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.service-page__capability:hover {
  border-color: var(--case-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 190, 190, 0.10);
}

.service-page__capability-num {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--case-accent);
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}

.service-page__capability-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--case-ink);
  margin: 0;
  line-height: 1.3;
}

.service-page__capability-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: #4a5568;
  margin: 0;
}

.service-page__related {
  padding: 56px 0;
  background: #fff;
}

.service-page__related-header {
  margin: 0 0 36px;
}

.service-page__related-heading {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: var(--case-ink);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}

@media screen and (max-width: 992px) {
  .service-page__intro { padding: 40px 0; }
  .service-page__lead { font-size: 1.125rem; }
  .service-page__thesis { padding: 24px 0; }
  .service-page__capabilities { padding: 48px 0; }
  .service-page__capabilities-header { margin: 0 0 28px; }
  .service-page__capabilities-list { gap: 20px; }
  .service-page__body { padding: 40px 0; }
  .service-page__related { padding: 40px 0; }
  .service-page__related-header { margin: 0 0 28px; }
}

@media screen and (max-width: 768px) {
  .service-page__capabilities-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-page__capability { padding: 24px 24px 22px; }
  .service-page__capability-num { font-size: 1.5rem; }
}

@media screen and (max-width: 576px) {
  .service-page__intro { padding: 32px 0; }
  .service-page__lead { font-size: 1.0625rem; line-height: 1.65; }
  .service-page__thesis { padding: 20px 0; }
  .service-page__thesis-body {
    padding: 6px 0 6px 18px;
    border-left-width: 3px;
    font-size: 1.0625rem;
    line-height: 1.6;
  }
  .service-page__capabilities { padding: 40px 0; }
  .service-page__capabilities-header { margin: 0 0 24px; }
  .service-page__capability { padding: 20px 20px 18px; }
  .service-page__capability-title { font-size: 1.0625rem; }
  .service-page__capability-desc { font-size: 0.9375rem; line-height: 1.6; }
  .service-page__body { padding: 32px 0; }
  .service-page__related { padding: 32px 0; }
  .service-page__related-header { margin: 0 0 24px; }
}

/* Responsive */
@media screen and (max-width: 1199px) {
  .work-detail__intro { padding: 36px 0 56px; }
  .work-detail__hero-image { padding-bottom: 80px; }
  .work-detail__related { padding: 88px 0 96px; }
}

@media screen and (max-width: 992px) {
  .work-detail__intro { padding: 32px 0 48px; }
  .work-detail__meta { padding: 32px 0 44px; }
  .work-detail__meta-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; column-gap: 12px; }
  .work-detail__meta-item { padding: 4px 20px; }
  .work-detail__meta-item:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .work-detail__hero-image { padding-bottom: 64px; }
  .work-detail__hero-image img { border-radius: 12px; }
  .work-detail__body { padding: 8px 0 72px; }
  .work-detail__body .field--name-body p:first-of-type { font-size: 1.15rem; }
  .work-detail__body h2 { margin: 2.25rem 0 1rem; }
  .work-detail__body h3 { margin: 1.75rem 0 0.6rem; }
  .work-detail__related { padding: 72px 0 80px; }
  .work-detail__related-header { margin: 0 0 36px; }
}

@media screen and (max-width: 768px) {
  .work-detail__intro { padding: 28px 0 40px; }
  .work-detail__title { margin-bottom: 1rem; }
  .work-detail__headline { font-size: 1.2rem; margin-bottom: 1.25rem; }
  .work-detail__lead { font-size: 1.1rem; line-height: 1.65; max-width: none; }
  .work-detail__meta { padding: 28px 0 36px; }
  .work-detail__hero-image { padding-bottom: 48px; }
  .work-detail__body blockquote { font-size: 1.15rem; padding-left: 1.25rem; margin: 2rem 0; }
  .work-detail__related { padding: 60px 0 72px; }
}

@media screen and (max-width: 576px) {
  .work-detail__intro { padding: 24px 0 36px; }
  .work-detail__kicker { margin-bottom: 18px; font-size: 0.68rem; letter-spacing: 0.14em; }
  .work-detail__tags { margin-bottom: 16px; }
  .work-detail__tags .field__item,
  .work-detail__tags > span { padding: 4px 10px; font-size: 0.64rem; letter-spacing: 0.1em; }
  .work-detail__title { margin-bottom: 0.875rem; }
  .work-detail__lead { font-size: 1.05rem; line-height: 1.6; }
  .work-detail__meta-grid { grid-template-columns: 1fr; row-gap: 20px; column-gap: 0; }
  .work-detail__meta-item,
  .work-detail__meta-item:first-child,
  .work-detail__meta-item:nth-child(2n+1) { padding: 0 0 0 14px; border-left: 0; position: relative; }
  .work-detail__meta-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--case-accent);
  }
  .work-detail__meta-item dt { margin-bottom: 6px; }
  .work-detail__meta-item dd { font-size: 1.05rem; }
  .work-detail__hero-image img { border-radius: 10px; }
  .work-detail__body { padding: 4px 0 56px; font-size: 1rem; line-height: 1.7; }
  .work-detail__body p:not(.work-detail__kicker) { margin: 0 0 1.15rem; font-size: 1rem; line-height: 1.7; }
  .work-detail__body .field--name-body p:first-of-type { font-size: 1.1rem; margin-bottom: 1.35rem; }
  .work-detail__body h2 { margin: 2rem 0 0.75rem; }
  .work-detail__body h3 { margin: 1.5rem 0 0.5rem; }
  .work-detail__body h4 { margin: 1.25rem 0 0.4rem; }
  .work-detail__body blockquote { font-size: 1.075rem; padding-left: 1rem; margin: 1.75rem 0; }
  .work-detail__body img { margin: 1.25rem 0; border-radius: 6px; }
  .work-detail__related { padding: 48px 0 60px; }
  .work-detail__related-header { margin: 0 0 24px; }
}

@media screen and (max-width: 420px) {
  .work-detail__intro { padding: 20px 0 32px; }
  .work-detail__related { padding: 40px 0 52px; }
}

/* ============================================================
   Get a Quote (#contact) — rebuild over legacy style.css
   ============================================================ */

#portfolio-bottom-section #contact,
#contact.pt-section {
  background: #0f1a38;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(58, 75, 206, 0.35), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(12, 190, 190, 0.18), transparent 50%);
  padding: 112px 0 120px;
  position: relative;
  overflow: hidden;
}

#contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

#contact > .container { position: relative; z-index: 1; }

#contact > .container > .row {
  align-items: start;
  row-gap: 48px;
}

#contact > .container > .row > .col-12:first-child {
  text-align: left !important;
  max-width: 100% !important;
  flex: 0 0 auto;
  width: 45%;
}

#contact > .container > .row > .col-12:nth-child(2) {
  max-width: 100% !important;
  flex: 0 0 auto;
  width: 55%;
  padding-left: 40px;
}

#contact h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 18px;
}

#contact h2::before {
  content: 'Start a project';
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary-color, #0cbebe);
  margin-bottom: 20px;
}

#contact p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 38ch;
  margin: 0 0 32px;
}

.contact-trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.contact-trust__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.contact-trust__dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary-color, #0cbebe);
  margin-top: 8px;
}

/* Form — flat, underline-style inputs */
#contact .pt-form-element,
#contact input.form-control,
#contact textarea.form-control {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-size: 1rem !important;
  padding: 14px 2px !important;
  min-height: 56px !important;
  box-shadow: none !important;
  transition: border-color 180ms ease;
}

#contact textarea.form-control {
  min-height: 120px !important;
  resize: vertical;
  line-height: 1.55;
}

#contact .pt-form-element::placeholder,
#contact input.form-control::placeholder,
#contact textarea.form-control::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
  font-weight: 400;
}

#contact .pt-form-element:focus,
#contact input.form-control:focus,
#contact textarea.form-control:focus {
  border-bottom-color: var(--secondary-color, #0cbebe) !important;
  outline: none !important;
  background: transparent !important;
  color: #fff !important;
}

#contact .form-item { margin-bottom: 28px; }

/* === Ukrainix primary CTA — unified spec ===
   Single design for all primary actions: header Contact, form Submit, etc.
   Teal fill so the button stays visible on both light and dark surfaces (the
   form lives on `#0f1a38` navy where any navy fill disappears). Hover: lift +
   slight teal-darken + teal-tinted shadow — keeps the engineering motion
   without flipping into an invert state. */
.btn.btn-primary.varient-1,
#contact .btn-white,
#contact input[type="submit"],
#contact button[type="submit"],
#contact .webform-button--submit {
  background-color: var(--secondary-color, #0cbebe) !important;
  border: 1px solid var(--secondary-color, #0cbebe) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 13px 28px !important;
  width: auto !important;
  min-width: 0 !important;
  cursor: pointer;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.btn.btn-primary.varient-1:hover,
#contact .btn-white:hover,
#contact input[type="submit"]:hover,
#contact button[type="submit"]:hover,
#contact .webform-button--submit:hover {
  background-color: #0aa4a4 !important;
  border-color: #0aa4a4 !important;
  color: #fff !important;
}

.btn.btn-primary.varient-1:focus-visible,
#contact .btn-white:focus-visible,
#contact input[type="submit"]:focus-visible,
#contact button[type="submit"]:focus-visible,
#contact .webform-button--submit:focus-visible {
  background-color: #0aa4a4 !important;
  border-color: #0aa4a4 !important;
  color: #fff !important;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.btn.btn-primary.varient-1:active,
#contact .btn-white:active,
#contact input[type="submit"]:active,
#contact button[type="submit"]:active,
#contact .webform-button--submit:active {
  background-color: #089090 !important;
  border-color: #089090 !important;
}

@media screen and (max-width: 992px) {
  #portfolio-bottom-section #contact,
  #contact.pt-section { padding: 80px 20px 88px; }
  #contact > .container > .row > .col-12:first-child,
  #contact > .container > .row > .col-12:nth-child(2) {
    width: 100%;
    padding-left: 0;
  }
}

@media screen and (max-width: 576px) {
  #portfolio-bottom-section #contact,
  #contact.pt-section { padding: 64px 18px 72px; }
}

/* ============================================================
   Footer rebuild — hero statement + info band + bottom bar
   ============================================================ */

.footer .footer-top.pt-section {
  padding: 96px 0 32px;
}

.footer__hero {
  padding-bottom: 56px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}

.footer__statement {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 30ch;
  margin: 0;
}

.footer__statement em {
  font-style: normal;
  color: var(--secondary-color, #0cbebe);
}

/* Match site CTA pattern: white default, teal on hover, 36px → 100% underline */
.footer__hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  transition: color 200ms ease;
}

.footer__hero-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 36px;
  height: 2px;
  background-color: currentColor;
  transition: width 180ms ease-out;
}

.footer__hero-link:hover,
.footer__hero-link:focus-visible {
  color: var(--secondary-color, #0cbebe) !important;
  text-decoration: none;
  opacity: 1 !important;
}

.footer__hero-link:hover::before,
.footer__hero-link:focus-visible::before {
  width: 100%;
}

.footer__hero-link .footer__arrow {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  transition: transform 200ms ease;
}

.footer__hero-link:hover .footer__arrow,
.footer__hero-link:focus-visible .footer__arrow {
  transform: translateX(4px);
}

/* Info band — restyle existing columns, uppercase micro-labels above blocks */
.footer .footer-logo {
  margin-bottom: 28px;
  margin-left: 0;
}

.footer__tagline {
  display: none;
}

.footer-col__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
}

/* Neutralize legacy icon circles — clean text rows */
.footer .footer-contact .address,
.footer .footer-contact .phone {
  display: block;
  margin-bottom: 18px;
}

.footer .footer-contact .address .icon,
.footer .footer-contact .phone .icon {
  display: none;
}

.footer .footer-contact .address p,
.footer .footer-contact .phone a {
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  opacity: 1 !important;
  width: 100% !important;
  line-height: 1.55;
  font-weight: 500;
}

.footer .footer-contact .phone a { text-decoration: none; }

/* Right column — tighter, label-driven; right-aligned on desktop */
.footer .footer-four {
  padding-left: 0;
  gap: 0;
  text-align: right;
  align-items: flex-end;
}

.footer .footer-four #block-ukrainix-certificates,
.footer .footer-four #block-ukrainix-sociallinks-2 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.footer .footer-four ul {
  justify-content: flex-end;
  padding-left: 0;
}

.footer .footer-four #block-ukrainix-certificates {
  margin-bottom: 40px;
}

.footer .footer-four #block-ukrainix-certificates img {
  max-width: 80px;
  height: auto;
  opacity: 0.9;
}

.footer .footer-four #block-ukrainix-sociallinks-2 {
  opacity: 1;
  margin-bottom: 0;
}

.footer .footer-four ul {
  gap: 14px;
  margin: 0;
}

.footer .footer-four ul li {
  padding-right: 0;
  font-size: 18px;
}

.footer .footer-four ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85) !important;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 200ms ease;
}

.footer .footer-four ul li a:hover {
  border-color: var(--secondary-color, #0cbebe);
  background: var(--secondary-color, #0cbebe);
  color: #0f1a38 !important;
  transform: translateY(-2px);
}

/* Bottom bar — copyright + identity micro */
.footer .footer-four .copyright {
  width: 100%;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}

/* Uniform hover transition for all footer links */
.footer a {
  transition: color 180ms ease, opacity 180ms ease;
}

.footer a:hover {
  color: var(--secondary-color, #0cbebe) !important;
  opacity: 1 !important;
}

@media screen and (max-width: 992px) {
  .footer .footer-top.pt-section { padding: 72px 20px 28px; }
  .footer .footer-top.pt-section > .row { align-items: flex-start; }
  .footer__hero {
    padding-bottom: 40px;
    margin-bottom: 36px;
    align-items: flex-start;
    gap: 28px;
  }
  /* First footer column (logo, OFFICE label, address, phone) — center on mobile */
  .footer .footer-top.pt-section > .row > .col-12:first-child {
    text-align: center;
  }
  .footer .footer-top.pt-section > .row > .col-12:first-child .footer-logo { margin-left: auto; margin-right: auto; }
  .footer .footer-top.pt-section > .row > .col-12:first-child .footer-col__label { text-align: center; }
  .footer .footer-contact .address,
  .footer .footer-contact .phone { text-align: center; }
  .footer .footer-contact .address p,
  .footer .footer-contact .phone a { text-align: center; display: block; }

  .footer .footer-four {
    margin-top: 36px;
    height: auto !important;
    text-align: center;
    align-items: center;
  }
  .footer .footer-four #block-ukrainix-certificates,
  .footer .footer-four #block-ukrainix-sociallinks-2 {
    justify-content: center;
    text-align: center;
  }
  .footer .footer-four #block-ukrainix-sociallinks-2 > * { margin-left: auto; margin-right: auto; }
  .footer .footer-four ul {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: auto;
  }
  .footer .footer-four ul li { padding: 0; }
  .footer .footer-four .copyright {
    text-align: center;
    margin-top: 32px;
  }
}

@media screen and (max-width: 576px) {
  .footer .footer-top.pt-section { padding: 56px 18px 24px; }
  .footer__statement { font-size: 1.4rem; max-width: none; }
  .footer__hero { padding-bottom: 32px; margin-bottom: 28px; gap: 24px; }
  .footer .footer-four #block-ukrainix-certificates img { max-width: 64px; }
}

/* ============================================================
   Work listing page — paragraph.portfolio_grid (node /our-work)
   Hero → 2-col grid of .sc-card (listing variant) → dark CTA band.
   Reuses homepage card template; listing overrides flatten the featured/secondary split.
   ============================================================ */
.work-page {
  --work-ink: #19274D;
  --work-muted: #5b6578;
  --work-accent: var(--secondary-color, #0cbebe);
  background: #fff;
  color: var(--work-ink);
}

.work-page__intro {
  padding: 56px 0 48px;
  border-bottom: 1px solid rgba(25, 39, 77, 0.1);
}

.work-page__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--work-accent);
  margin: 0 0 22px;
}

.work-page__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--work-accent);
  display: inline-block;
}

.work-page__title {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 1.1rem;
  color: var(--work-ink);
}

.work-page__lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--work-muted);
  max-width: 40em;
  margin: 0;
}

/* Grid wrapper */
.work-page__grid {
  padding: 64px 0 80px;
}

/* Listing = .sc-row--featured used in 2-col context (col-md-6 wrappers). Overrides only what changes: per-row margin (no trailing spacer), vertical gap between rows, tighter inner padding for denser layout. */
.row.sc-row--featured.sc-row--listing {
  margin-bottom: 0;
  --bs-gutter-x: 28px;
  row-gap: 28px;
}

.sc-row--listing .sc-card__featured-inner {
  padding: 1.75rem 1.875rem 2rem;
}

.sc-row--listing .sc-card__title {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  min-height: calc(2 * 1.15em); /* reserve 2 lines so 1-line titles don't shrink the card */
}

/* Equal-height cards in the /our-work listing — stretch to row height,
   reserve 2 title lines + clamp summary to 3 lines + bottom-anchored
   read-link, so all cards look balanced regardless of title/summary length. */
.sc-row--listing .sc-card {
  height: 100%;
}
.sc-row--listing .sc-card__featured-inner {
  flex: 1;
}
.sc-row--listing .sc-card__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(3 * 1.6em); /* line-height from .sc-card__summary */
}
.sc-row--listing .sc-card__read-link {
  margin-top: auto;
}

/* Dark CTA band */
.work-page__cta {
  background: var(--work-ink);
  color: #fff;
  padding: 72px 0;
}

.work-page__cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
}

.work-page__cta-text {
  max-width: 42em;
}

.work-page__cta-heading {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 10px;
}

.work-page__cta-sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.work-page__cta-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff !important;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 200ms ease;
}

.work-page__cta-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 36px;
  height: 2px;
  background-color: currentColor;
  transition: width 180ms ease-out;
}

.work-page__cta-link:hover,
.work-page__cta-link:focus-visible {
  color: var(--work-accent, #0cbebe) !important;
  text-decoration: none;
}

.work-page__cta-link:hover::before,
.work-page__cta-link:focus-visible::before {
  width: 100%;
}

.work-page__cta-arrow {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  transition: transform 200ms ease;
}

.work-page__cta-link:hover .work-page__cta-arrow,
.work-page__cta-link:focus-visible .work-page__cta-arrow {
  transform: translateX(4px);
}

@media screen and (max-width: 992px) {
  .work-page__intro { padding: 44px 0 36px; }
  .work-page__grid { padding: 48px 0 64px; }
  .row.sc-row--featured.sc-row--listing { row-gap: 24px; }
  .sc-row--listing .sc-card__featured-inner { padding: 1.5rem 1.625rem 1.75rem; }
}

@media screen and (max-width: 768px) {
  .work-page__intro { padding: 36px 0 28px; }
  .work-page__grid { padding: 36px 0 48px; }
  .row.sc-row--featured.sc-row--listing { row-gap: 20px; }
  .work-page__cta { padding: 56px 0; }
  .work-page__cta-inner { gap: 24px; }
}

/* ============================================================
   Page-title band — replaces legacy starter-kit `#banner` hero-image splash.
   Engineering-first: thin H1 band, no image, no overlay.
   Selectors scoped under `#banner` beat the legacy `#banner h1 { position: absolute ... }` rule (specificity 1,0,1 <= ours).
   ============================================================ */
#banner .page-title-band {
  padding: 48px 0 40px;
  background: #fff;
  border-bottom: 1px solid rgba(25, 39, 77, 0.1);
}

#banner .page-title-band__title {
  position: static;
  display: block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: #19274D;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

@media screen and (max-width: 768px) {
  #banner .page-title-band { padding: 36px 0 28px; }
}

/* Credibility band — thin stat strip used on homepage (between hero and
 * selected work) and on /about (between mission and principles). White bg
 * with subtle teal hairlines top + bottom — reads as a natural extension
 * of the white section above (Mission / Hero), not a loud peer panel. */
.credibility-band {
  background: #fff;
  border-top: 1px solid rgba(12, 190, 190, 0.20);
  border-bottom: 1px solid rgba(12, 190, 190, 0.20);
  padding: 32px 0;
}

.credibility-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

.credibility-band__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.credibility-band__metric {
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
}

.credibility-band__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5b6578;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .credibility-band { padding: 22px 0; }
  .credibility-band__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 16px;
  }
}

@media screen and (max-width: 420px) {
  .credibility-band__metric { font-size: 1.25rem; }
  .credibility-band__label { font-size: 0.75rem; }
}

/* CTA band — single homepage conversion block. Brand-teal-tinted bg with
 * radial accent makes a clean visual break between the navy services
 * section above and the white testimonials section below. Text-link CTA
 * matches the hero and services-tour patterns (unified across the site). */
#cta-block.cta-band {
  position: relative;
  background:
    radial-gradient(ellipse 720px 320px at 22% 50%, rgba(12, 190, 190, 0.28) 0%, rgba(12, 190, 190, 0) 65%),
    #e8f6f6;
  border-top: 1px solid rgba(12, 190, 190, 0.20);
  border-bottom: 1px solid rgba(12, 190, 190, 0.20);
  padding: 56px 0;
  overflow: hidden;
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cta-band__text {
  flex: 1 1 auto;
  min-width: 0;
}

.cta-band__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 14px;
}

.cta-band__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#cta-block.cta-band .cta-band__heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.cta-band__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #0cbebe;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color 200ms ease, border-color 200ms ease;
}

.cta-band__cta:hover,
.cta-band__cta:focus-visible {
  color: #0aa8a8;
  border-color: #0cbebe;
  text-decoration: none;
}

.cta-band__arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.cta-band__cta:hover .cta-band__arrow,
.cta-band__cta:focus-visible .cta-band__arrow {
  transform: translateX(4px);
}

@media screen and (max-width: 768px) {
  #cta-block.cta-band { padding: 44px 0; }
  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

/* Testimonials band — engineering-first 3-col grid. No avatars, brand-teal
 * opening quote-mark accent, attribution below. Replaces the legacy
 * starter-kit owl-carousel + center-aligned heading. */
#testimonials.testimonials-band {
  background: #fff;
  padding: 64px 0;
}

#testimonials.testimonials-band::after,
#testimonials.testimonials-band .container::after {
  content: none;
}

.testimonials-band__header {
  margin: 0 0 40px;
}

.testimonials-band__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 14px;
}

.testimonials-band__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#testimonials.testimonials-band .testimonials-band__heading {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.testimonials-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonials-band__cell {
  display: flex;
}

.testimonials-band__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(25, 39, 77, 0.12);
  border-radius: 12px;
  padding: 24px 28px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.testimonials-band__item:hover {
  border-color: #0cbebe;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 190, 190, 0.10);
}

.testimonials-band__quote-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 0.7;
  color: #0cbebe;
  margin: 0 0 4px;
}

.testimonials-band__quote {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #2d3748;
  margin: 0 0 24px;
  flex: 1 1 auto;
}

.testimonials-band__quote p {
  margin: 0 0 0.75rem;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.testimonials-band__quote p:last-child { margin-bottom: 0; }

.testimonials-band__attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(25, 39, 77, 0.10);
  padding-top: 16px;
  background: transparent;
}

.testimonials-band__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #19274D;
  letter-spacing: 0;
  line-height: 1.3;
}

.testimonials-band__role {
  font-size: 0.8125rem;
  color: #5b6578;
  font-weight: 500;
  line-height: 1.4;
}

@media screen and (max-width: 992px) {
  #testimonials.testimonials-band { padding: 48px 0; }
  .testimonials-band__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .testimonials-band__header { margin: 0 0 32px; }
}

@media screen and (max-width: 576px) {
  #testimonials.testimonials-band { padding: 40px 0; }
  .testimonials-band__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .testimonials-band__item { padding: 28px 22px 22px; }
  .testimonials-band__item::before { font-size: 3rem; top: 4px; left: 16px; }
}

/* Services list page (`/services`) — engineering-first horizontal rows.
 * Each service is a full-width card row: brand SVG icon + title + lead +
 * trailing read-more affordance. Mirrors the engineering tone of
 * portfolio cases and inner service detail pages. */
#services-grid.services-page {
  background: #fff;
  padding: 64px 0 80px;
}

#services-grid.services-page,
#services-grid.services-page .container,
#services-grid.services-page::after,
#services-grid.services-page .container::after {
  background-image: none;
}

.services-page__header {
  max-width: 70ch;
  margin: 0 0 48px;
}

.services-page__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 16px;
}

.services-page__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#services-grid.services-page .services-page__heading {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

#services-grid.services-page .services-page__intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #4a5568;
  margin: 0;
}

.services-page__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services-page__rows .service-list,
.services-page__rows .views-element-container,
.services-page__rows .views-element-container > div {
  display: contents;
}

.services-page__row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid rgba(25, 39, 77, 0.12);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.services-page__row:hover,
.services-page__row:focus-visible {
  border-color: #0cbebe;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 190, 190, 0.10);
  text-decoration: none;
  color: inherit;
}

.services-page__row-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.services-page__row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.services-page__row-text {
  min-width: 0;
}

.services-page__row-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #19274D;
  margin: 0 0 4px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.services-page__row-lead {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a5568;
}

.services-page__row-lead p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.services-page__row-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: #0cbebe;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.services-page__row-cta-label {
  display: inline-block;
}

.services-page__row-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.services-page__row:hover .services-page__row-arrow,
.services-page__row:focus-visible .services-page__row-arrow {
  transform: translateX(4px);
}

@media screen and (max-width: 992px) {
  #services-grid.services-page { padding: 48px 0 64px; }
  .services-page__header { margin: 0 0 36px; }
  .services-page__row {
    grid-template-columns: 56px 1fr;
    gap: 18px 20px;
    padding: 20px 22px;
  }
  .services-page__row-icon { width: 48px; height: 48px; }
  .services-page__row-cta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 4px;
  }
  .services-page__row-cta-label { display: none; }
}

@media screen and (max-width: 576px) {
  #services-grid.services-page { padding: 40px 0 48px; }
  .services-page__header { margin: 0 0 28px; }
  .services-page__row { padding: 18px 18px; }
  #services-grid.services-page .services-page__intro { font-size: 1rem; }
}

/* ==========================================================================
   About page — engineering-first reconstruction (UKRX-22)
   Mission · Principles · Heritage timeline · Founder · Numbers · CTA
   ========================================================================== */

/* Mission — engineering-first hero (kicker + H2 + lead) */
#about-mission.about-mission {
  background: #fff;
  padding: 64px 0 56px;
  border-bottom: 1px solid rgba(25, 39, 77, 0.08);
}

.about-mission__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 16px;
}

.about-mission__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#about-mission .about-mission__heading {
  font-size: clamp(1.875rem, 3.6vw, 2.5rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

.about-mission__lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #4a5568;
  max-width: 70ch;
}

.about-mission__lead p {
  margin: 0 0 1rem;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.about-mission__lead p:last-child { margin-bottom: 0; }

/* Principles band — numbered card grid */
#principles.principles-band {
  background: #f7f8fa;
  padding: 64px 0;
  border-bottom: 1px solid rgba(25, 39, 77, 0.08);
}

.principles-band__header {
  margin: 0 0 36px;
}

.principles-band__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 14px;
}

.principles-band__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#principles .principles-band__heading {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.principles-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.principles-band__item {
  background: #fff;
  border: 1px solid rgba(25, 39, 77, 0.12);
  border-radius: 12px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.principles-band__item:hover {
  border-color: #0cbebe;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 190, 190, 0.10);
}

.principles-band__num {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0cbebe;
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}

.principles-band__item-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #19274D;
  margin: 0;
  line-height: 1.3;
}

.principles-band__item-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a5568;
  margin: 0;
}

/* About story — vertical engineering chronology */
#story.about-story {
  background: #fff;
  padding: 64px 0;
}

.about-story__header {
  margin: 0 0 36px;
}

.about-story__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 14px;
}

.about-story__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#story.about-story .about-story__heading {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.about-story__timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 32px;
  position: relative;
  max-width: 78ch;
}

.about-story__timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(12, 190, 190, 0.30);
}

.about-story__milestone {
  position: relative;
  padding: 0 0 28px;
}

.about-story__milestone:last-child { padding-bottom: 0; }

.about-story__milestone::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0cbebe;
  box-shadow: 0 0 0 4px #fff;
}

.about-story__milestone-year {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #0cbebe;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  font-feature-settings: "tnum" 1;
}

.about-story__milestone-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: #2d3748;
  margin: 0;
}

/* Founder card */
#founder.about-founder {
  background: #fff;
  padding: 64px 0;
}

#founder.about-founder::after,
#founder.about-founder .container::after {
  background-image: none;
  content: none;
}

.about-founder__header {
  margin: 0 0 32px;
}

.about-founder__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 14px;
}

.about-founder__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#founder.about-founder .about-founder__heading {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.about-founder__card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: start;
  background: #f7f8fa;
  border: 1px solid rgba(25, 39, 77, 0.12);
  border-radius: 12px;
  padding: 32px;
  max-width: 880px;
}

.about-founder__card--no-photo {
  grid-template-columns: 1fr;
}

.about-founder__photo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.about-founder__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(25, 39, 77, 0.10);
}

.about-founder__name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.about-founder__role {
  font-size: 0.9375rem;
  color: #5b6578;
  font-weight: 500;
}

.about-founder__bio {
  font-size: 1rem;
  line-height: 1.7;
  color: #2d3748;
  margin: 0;
}

@media screen and (max-width: 992px) {
  #about-mission.about-mission { padding: 48px 0 40px; }
  #about-mission .about-mission__heading { font-size: clamp(1.625rem, 4vw, 2rem); }
  .about-mission__lead { font-size: 1rem; }

  #principles.principles-band { padding: 48px 0; }
  .principles-band__header { margin: 0 0 28px; }
  .principles-band__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  #story.about-story { padding: 48px 0; }
  .about-story__header { margin: 0 0 28px; }

  #founder.about-founder { padding: 48px 0; }
  .about-founder__card {
    grid-template-columns: 140px 1fr;
    gap: 24px;
    padding: 24px;
  }
}

@media screen and (max-width: 576px) {
  #about-mission.about-mission { padding: 36px 0 32px; }
  #principles.principles-band { padding: 40px 0; }
  .principles-band__list { grid-template-columns: 1fr; }
  .principles-band__item { padding: 20px 20px 18px; }

  #story.about-story { padding: 40px 0; }
  .about-story__timeline { padding-left: 28px; }
  .about-story__milestone::before { left: -28px; width: 14px; height: 14px; }

  #founder.about-founder { padding: 40px 0; }
  .about-founder__card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
  }
  .about-founder__photo {
    max-width: 160px;
  }
  .about-founder__name { font-size: 1.125rem; }
}

/* Founder photo — circular crop, branded ring */
.about-founder__photo img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(25, 39, 77, 0.10);
}

/* Team grid — engineering cards with circular photos */
#team.team-grid {
  background: #fff;
  padding: 64px 0;
  border-top: 1px solid rgba(25, 39, 77, 0.08);
  border-bottom: 1px solid rgba(25, 39, 77, 0.08);
}

#team.team-grid::after,
#team.team-grid .container::after {
  background-image: none;
  content: none;
}

.team-grid__header {
  margin: 0 0 36px;
}

.team-grid__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 14px;
}

.team-grid__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#team.team-grid .team-grid__heading {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.team-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.team-grid__cell { display: flex; }

.team-grid__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  background: #f7f8fa;
  border: 1px solid rgba(25, 39, 77, 0.10);
  border-radius: 12px;
  padding: 28px 24px 26px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.team-grid__card:hover {
  border-color: #0cbebe;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 190, 190, 0.10);
}

.team-grid__photo {
  width: 168px;
  height: 168px;
  flex-shrink: 0;
}

.team-grid__photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(25, 39, 77, 0.10);
  display: block;
}

.team-grid__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-grid__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.team-grid__role {
  font-size: 0.875rem;
  color: #5b6578;
  font-weight: 500;
  line-height: 1.4;
}

@media screen and (max-width: 992px) {
  #team.team-grid { padding: 48px 0; }
  .team-grid__header { margin: 0 0 28px; }
  .team-grid__list { gap: 18px; }
  .team-grid__photo { width: 140px; height: 140px; }
}

/* Below tablet-landscape: switch to a 1-col horizontal-card layout
 * (photo left, name + role right). The previous 3-col grid kept showing
 * at 576–991px and squeezed photos and role labels. */
@media screen and (max-width: 768px) {
  #team.team-grid { padding: 40px 18px; }
  .team-grid__list { grid-template-columns: 1fr; gap: 14px; }
  .team-grid__card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 22px 22px;
    gap: 22px;
  }
  .team-grid__photo { width: 110px; height: 110px; }
}

@media screen and (max-width: 576px) {
  .team-grid__card { padding: 20px 20px; gap: 18px; }
  .team-grid__photo { width: 96px; height: 96px; }
}

/* ==========================================================================
   Contact page (UKRX-23) — engineering-first form section + direct details
   ========================================================================== */

/* Form section — kicker + H1 + lead + form. White bg, mirrors about-mission
 * pattern so /contact reads like the same engineering-first design family. */
#contact.contact-form {
  background: #fff;
  padding: 64px 0 56px;
  border-bottom: 1px solid rgba(25, 39, 77, 0.08);
}

#contact.contact-form::after,
#contact.contact-form .container::after {
  background-image: none;
  content: none;
}

/* `#contact p { color: var(--white-text) }` in legacy style.css (specificity
 * 0,1,1) wins over a bare class. Prefix kicker with #contact.contact-form
 * to defeat the cascade. */
#contact.contact-form .contact-form__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 16px;
}

#contact.contact-form .contact-form__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#contact.contact-form .contact-form__heading {
  font-size: clamp(1.875rem, 3.6vw, 2.5rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

#contact.contact-form .contact-form__lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #4a5568;
  max-width: 70ch;
  margin: 0 0 2rem;
}

.contact-form__form {
  margin-top: 0;
}

/* 2-col composition: form on the left, sidebar (details + trust) on the
 * right. Stacks vertically below 992px. */
.contact-form__row {
  margin-top: 0.75rem;
}

.contact-form__main {
  /* Form column. Full-width inside the col-lg-7. */
}

.contact-form__aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media screen and (min-width: 992px) {
  .contact-form__aside {
    padding-left: 1rem;
  }
}

/* Sidebar — direct details list */
.contact-form__details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form__details-item {
  background: #fff;
  border: 1px solid rgba(25, 39, 77, 0.10);
  border-radius: 12px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__details-item:hover {
  border-color: #0cbebe;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 190, 190, 0.10);
}

/* Specificity prefix — defeats legacy `#contact p { color: var(--white-text) }` */
#contact.contact-form .contact-form__details-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0;
}

#contact.contact-form .contact-form__details-value {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #19274D;
  text-decoration: none;
  letter-spacing: -0.005em;
  line-height: 1.4;
  word-break: break-word;
}

#contact.contact-form a.contact-form__details-value {
  align-self: flex-start;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}

#contact.contact-form a.contact-form__details-value:hover,
#contact.contact-form a.contact-form__details-value:focus-visible {
  color: #0aa8a8;
  border-color: #0cbebe;
  text-decoration: none;
}

.contact-form__details-value--plain {
  font-weight: 500;
  color: #2d3748 !important;
}

/* (trust-title rule moved below near .contact-form__trust to keep title
 *  and list co-located.) */

/* Force the webform (and its internal Bootstrap row) to take full width
 * of the col-lg-7 wrapper. Defensive — defeats any inherited constraints. */
#contact.contact-form .contact-form__form,
#contact.contact-form .webform-submission-form {
  width: 100%;
  max-width: none !important;
}

#contact.contact-form .webform-submission-form > .row {
  margin-left: -12px;
  margin-right: -12px;
}

#contact.contact-form .webform-submission-form > .row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}

/* Override legacy .pt-form-element (border: 3px solid var(--white-text);
 * height: 70px; padding: 15px 30px) which made inputs invisible on the
 * white contact-form bg. Engineering-first inputs: thin navy border, navy
 * text, brand-teal focus ring. */
#contact.contact-form .pt-form-element,
#contact.contact-form input[type="text"],
#contact.contact-form input[type="email"],
#contact.contact-form input[type="tel"],
#contact.contact-form textarea {
  background-color: #fff !important;
  border: 1px solid rgba(25, 39, 77, 0.18) !important;
  border-radius: 8px !important;
  height: auto !important;
  padding: 14px 16px !important;
  color: #19274D !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#contact.contact-form textarea {
  min-height: 180px;
  resize: vertical;
}

#contact.contact-form .pt-form-element:focus,
#contact.contact-form input[type="text"]:focus,
#contact.contact-form input[type="email"]:focus,
#contact.contact-form input[type="tel"]:focus,
#contact.contact-form textarea:focus {
  border-color: #0cbebe !important;
  box-shadow: 0 0 0 3px rgba(12, 190, 190, 0.15) !important;
  outline: none !important;
  /* Reassert dark text on focus — the legacy `#contact textarea.form-control:focus`
   * rule earlier in this file sets color:#fff (for the old dark-bg form design)
   * and beats our `#contact.contact-form textarea` non-focus rule on specificity.
   * Without this, typed text disappears on the white form once focused. */
  color: #19274D !important;
}

#contact.contact-form .pt-form-element::placeholder,
#contact.contact-form input::placeholder,
#contact.contact-form textarea::placeholder {
  color: #5b6578 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}

/* Submit button — left-align in actions wrapper. Visual style itself comes
 * from the unified `#contact .webform-button--submit` rule below in
 * custom-style.css (matches header Contact pill / .btn.btn-primary.varient-1).
 * No custom border-radius / padding override here. */
#contact.contact-form .form-actions {
  justify-content: flex-start !important;
  margin-top: 0.5rem;
}

#contact.contact-form .form-actions .form-control {
  width: auto !important;
}

/* Trust list inside the sidebar — Reply-time / discovery / engineering-first
 * scoping. Vertical stack (sidebar is narrow). */
#contact.contact-form .contact-form__trust-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 4px;
}

.contact-form__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #2d3748;
}

.contact-form__trust-item::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: #0cbebe;
}

/* Contact details — 3-col band below the form */
#contact-details.contact-details {
  background: #f7f8fa;
  padding: 56px 0 64px;
}

#contact-details.contact-details::after,
#contact-details.contact-details .container::after {
  background-image: none;
  content: none;
}

.contact-details__header {
  margin: 0 0 32px;
}

.contact-details__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0 0 14px;
}

.contact-details__kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #0cbebe;
  display: inline-block;
}

#contact-details.contact-details .contact-details__heading {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  color: #19274D;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.contact-details__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.contact-details__item {
  background: #fff;
  border: 1px solid rgba(25, 39, 77, 0.10);
  border-radius: 12px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-details__item:hover {
  border-color: #0cbebe;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 190, 190, 0.10);
}

.contact-details__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0cbebe;
  margin: 0;
}

#contact-details.contact-details .contact-details__value {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #19274D;
  text-decoration: none;
  letter-spacing: -0.005em;
  line-height: 1.4;
  word-break: break-word;
}

#contact-details.contact-details a.contact-details__value {
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}

#contact-details.contact-details a.contact-details__value:hover,
#contact-details.contact-details a.contact-details__value:focus-visible {
  color: #0aa8a8;
  border-color: #0cbebe;
  text-decoration: none;
}

.contact-details__value--plain {
  font-weight: 500;
  color: #2d3748 !important;
}

@media screen and (max-width: 992px) {
  #contact.contact-form { padding: 48px 0 40px; }
  #contact.contact-form .contact-form__heading { font-size: clamp(1.625rem, 4vw, 2rem); }
  #contact.contact-form .contact-form__lead { font-size: 1rem; }
  .contact-form__row { margin-top: 0.5rem; }
  .contact-form__aside { margin-top: 32px; padding-left: 0; }
  #contact-details.contact-details { padding: 44px 0 48px; }
  .contact-details__header { margin: 0 0 24px; }
  .contact-details__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media screen and (max-width: 576px) {
  /* 18px horizontal section padding to match other pages
   * (#contact.pt-section, .footer-top, .work-detail, .service-page, etc). */
  #contact.contact-form { padding: 36px 18px 32px; }
  #contact-details.contact-details { padding: 36px 18px 40px; }
  .contact-details__list { grid-template-columns: 1fr; gap: 14px; }
  .contact-details__item { padding: 20px 20px 18px; }
}

/* ==================================================================== */
/* Error pages (404 / 403) — engineering-first, no starter-kit hero splash */
/* ==================================================================== */
#error-page.error-page {
  background-color: var(--text-color, #19274D);
  color: #fff;
  padding: clamp(80px, 14vh, 160px) 0;
  min-height: calc(100vh - 320px);
  display: flex;
  align-items: center;
}

#error-page .error-page__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

#error-page .error-page__code {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: clamp(96px, 18vw, 180px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: rgba(12, 190, 190, 0.22);
}

#error-page .error-page__title {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 18px;
}

#error-page .error-page__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto 32px;
  max-width: 560px;
}

#error-page .error-page__lead a {
  color: var(--secondary-color, #0CBEBE);
  border-bottom: 1px solid rgba(12, 190, 190, 0.4);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

#error-page .error-page__lead a:hover {
  border-bottom-color: var(--secondary-color, #0CBEBE);
}

#error-page .error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

#error-page .error-page__actions .btn {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: 6px;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#error-page .error-page__actions .btn-primary {
  background-color: var(--secondary-color, #0CBEBE);
  border-color: var(--secondary-color, #0CBEBE);
  color: #fff;
}

#error-page .error-page__actions .btn-primary:hover {
  background-color: #0AA8A8;
  border-color: #0AA8A8;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(12, 190, 190, 0.25);
}

#error-page .error-page__actions .btn-outline-light {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

#error-page .error-page__actions .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  transform: translateY(-1px);
}

@media screen and (max-width: 576px) {
  #error-page.error-page { padding: 60px 0 80px; min-height: auto; }
  #error-page .error-page__code { font-size: clamp(72px, 22vw, 120px); }
  #error-page .error-page__actions .btn { width: 100%; max-width: 280px; }
}

/* ============================================================
   Cookie consent — Klaro! (drupal/klaro, UKRX-47)
   Adopts site teal as primary, navy as text. Bottom-right notice,
   centered modal. Buttons follow primary-CTA spec (teal fill, white text,
   hover = lift + teal-darken + teal-tinted shadow).
   ============================================================ */
.klaro {
  --klaro-primary-color: #0cbebe;
  --klaro-link-color: #0cbebe;
  --klaro-link-color-hover: #0aa6a6;
  --klaro-link-decoration: underline;
  --klaro-link-decoration-hover: underline;

  --klaro-button-bg: #0cbebe;
  --klaro-button-text-color: #ffffff;
  --klaro-button-border: 1px solid #0cbebe;
  --klaro-button-border-radius: 8px;
  --klaro-button-padding: 10px 18px;
  --klaro-button-font-size: 0.875rem;
  --klaro-button-font-weight: 600;
  --klaro-button-line-height: 1.2;
  --klaro-button-box-shadow: 0 2px 8px rgba(12, 190, 190, 0.18);
  --klaro-button-bg-hover: #0aa6a6;
  --klaro-button-text-color-hover: #ffffff;
  --klaro-button-border-hover: 1px solid #0aa6a6;
  --klaro-button-focus-outline: 2px solid #0cbebe;
  --klaro-button-focus-outline-offset: 2px;

  --klaro-slider-bg: #d3d6dd;
  --klaro-slider-bg-active: #0cbebe;
  --klaro-slider-bg-required: #19274d;

  --font-size: 14px;
  --font-family: inherit;
  --title-font-family: inherit;
}

.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal {
  font-family: inherit;
  color: #19274d;
}

/* Bottom-right notice positioning + soft card */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  max-width: 380px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(25, 39, 77, 0.18), 0 2px 8px rgba(25, 39, 77, 0.08);
  background: #ffffff;
  border: 1px solid rgba(25, 39, 77, 0.08);
  padding: 18px 20px;
  bottom: 20px;
  right: 20px;
  z-index: 1080;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  margin-top: 0;
  padding: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4a5374;
  margin-bottom: 14px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p a {
  color: #0cbebe;
  text-decoration: underline;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p a:hover {
  color: #0aa6a6;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* All Klaro buttons: smooth lift on hover matching site CTA spec */
.klaro button.cm-btn,
.klaro .cm-btn {
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.klaro button.cm-btn:hover,
.klaro .cm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(12, 190, 190, 0.32);
}

/* Decline as outline-secondary (clear hierarchy: Accept is primary) */
.klaro .cookie-notice .cn-decline,
.klaro .cookie-modal .cm-btn-decline {
  background: transparent !important;
  color: #4a5374 !important;
  border: 1px solid #c4c9d4 !important;
  box-shadow: none !important;
}
.klaro .cookie-notice .cn-decline:hover,
.klaro .cookie-modal .cm-btn-decline:hover {
  background: rgba(25, 39, 77, 0.04) !important;
  color: #19274d !important;
  border-color: #19274d !important;
  box-shadow: 0 4px 12px rgba(25, 39, 77, 0.12) !important;
}

/* "Customize / Learn more" as plain link */
.klaro .cookie-notice .cn-learn-more {
  background: transparent !important;
  color: #0cbebe !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 6px !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}
.klaro .cookie-notice .cn-learn-more:hover {
  color: #0aa6a6 !important;
  transform: none;
  box-shadow: none !important;
}

/* Modal card */
.klaro .cookie-modal .cm-modal {
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(25, 39, 77, 0.28);
}
.klaro .cookie-modal .cm-header h1 {
  color: #19274d;
  font-weight: 700;
}
.klaro .cookie-modal .cm-services .cm-service .cm-list-title,
.klaro .cookie-modal .cm-purposes .cm-purpose .cm-list-title {
  color: #19274d;
}

/* Hide title in the notice (we use show_notice_title: false but reinforce) */
.klaro.hide-consent-dialog-title .cookie-notice .cn-title { display: none; }

/* Footer Cookies revocation link */
.footer .footer-four .copyright .cookies-link {
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.32);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.footer .footer-four .copyright .cookies-link:hover {
  color: #0cbebe;
  border-bottom-color: #0cbebe;
}
.footer .footer-four .copyright .copyright__sep {
  display: inline-block;
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.28);
}

@media screen and (max-width: 576px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    max-width: none;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 12px 12px 0 0;
  }
  .footer .footer-four .copyright .copyright__sep { margin: 0 6px; }
}

/* Clutch icon — Font Awesome doesn't include Clutch as a brand glyph,
   so paragraph--social_links.html.twig emits inline SVG for clutch.co URLs.
   Size/color must match the sibling FA <i> icons (UKRX-48).
   FA-replaced SVGs get default sizing via FA's own CSS classes; ours needs
   explicit display + dimensions so it doesn't collapse inside the flex link. */
.svg-clutch {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -0.125em;
  fill: currentColor;
}