/* ==========================================================================
   Additions to the Corebyte design.

   Kept in a separate file, loaded after corebyte.css, so re-exporting the
   design does not wipe them. Everything here reuses the design's own custom
   properties, so it inherits any palette change made upstream.

   Covers the parts the original static page had no markup for: the portfolio
   strip driven by the CRM, the contact form, and the inner pages.
   ========================================================================== */

/* --- What We Do items are links now, not inert divs --- */
.wwd-item {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.wwd-item:hover .wwd-icon-box {
  background: var(--blue);
  color: var(--white);
}
.wwd-item .wwd-icon-box svg {
  width: 22px;
  height: 22px;
}

/* --- Portfolio strip on the home page --- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.work-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex;
  flex-direction: column;
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #c7dbff;
}

.work-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
}
.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.work-card:hover .work-card-media img { transform: scale(1.05); }

.work-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, #eef4ff 0%, #e0f2fe 100%);
}
.work-card-placeholder img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.work-card-type {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #d9e7ff;
}

.work-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.work-card-body h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; }
.work-card-body h3 a { color: var(--ink); text-decoration: none; }
.work-card-body h3 a:hover { color: var(--blue); }
.work-card-body p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; flex: 1; }

.work-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.work-card-live {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.work-card-live:hover { color: var(--blue); }

.work-more { text-align: center; margin-top: 40px; }

/* --- Get in touch banner ---
   Text left, action right, decorative waves filling what was dead space on
   the right of the old centred layout. --- */
.cta-banner-section { padding: 72px 0; background: var(--bg); }

.cta-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 30px 44px;
  border-radius: 22px;
  border: 1px solid #e4ecf7;
  background: linear-gradient(115deg, #ffffff 0%, #f4f8ff 55%, #eef5ff 100%);
  box-shadow: var(--shadow-sm);
}

.cta-wave {
  position: absolute;
  top: 0;
  height: 100%;
  width: 220px;
  pointer-events: none;
}
.cta-wave-left { left: 0; }
.cta-wave-right { right: 0; }

.cta-banner-copy { position: relative; z-index: 1; }
.cta-banner-copy h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.cta-banner-copy p {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
  margin: 2px 0 0;
  line-height: 1.3;
}

.cta-banner-action {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-cta:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(47, 111, 237, .55);
}
.btn-cta .arrow { transition: transform .25s ease; }
.btn-cta:hover .arrow { transform: translateX(3px); }

.cta-banner-note { font-size: 11.5px; color: var(--muted); }

@media (max-width: 760px) {
  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
    gap: 22px;
  }
  .cta-wave { display: none; }
  .cta-banner-copy h2, .cta-banner-copy p { font-size: 19px; }
}

/* --- Contact page --- */
.contact-section { padding: 96px 0; background: var(--white); border-top: 1px solid var(--line); }
.contact-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 32px; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  margin-top: 44px;
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-form-card,
.contact-aside-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.contact-aside-card + .contact-aside-card { margin-top: 20px; }
.contact-aside-card h4 {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 14px;
}
.contact-aside-card a { color: var(--ink); text-decoration: none; display: block; margin-bottom: 8px; }
.contact-aside-card a:hover { color: var(--blue); }
.contact-aside-card ol { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.8; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .req { color: var(--blue); }

.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .12);
}
.field .error { color: #dc2626; font-size: 12.5px; margin-top: 6px; }
.field input.is-invalid,
.field textarea.is-invalid { border-color: #dc2626; }

.form-alert {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 22px;
}
.form-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

.form-success {
  text-align: center;
  padding: 48px 32px;
}
.form-success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #ecfdf5;
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.form-success h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; }
.form-success p { color: var(--ink-soft); margin: 0 0 20px; }

/* The honeypot must be reachable by a bot but never by a person. */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* --- Inner pages (portfolio index, case study, service detail, about) --- */
.page-head {
  background: var(--grad-radial);
  color: var(--white);
  padding: 150px 0 72px;
}
.page-head .eyebrow { color: #7dd3fc; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.15;
  margin: 14px 0 0;
  color: var(--white);
}
.page-head p { color: #c7d2e5; font-size: 17px; line-height: 1.7; max-width: 640px; margin: 16px 0 0; }
.page-head .crumbs { font-size: 14px; color: #94a3b8; }
.page-head .crumbs a { color: #7dd3fc; text-decoration: none; }

.page-body { padding: 72px 0; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 20px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.filter-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-right: 6px;
}
.chip {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--white);
  transition: all .2s ease;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip-on { background: var(--blue); border-color: var(--blue); color: var(--white); }

.empty-state {
  text-align: center;
  padding: 72px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
}

.prose-body { color: var(--ink-soft); font-size: 16.5px; line-height: 1.8; }
.prose-body h2, .prose-body h3 { font-family: var(--font-display); color: var(--ink); margin-top: 32px; }
.prose-body a { color: var(--blue); }
.prose-body ul, .prose-body ol { padding-left: 22px; }
.prose-body li { margin-bottom: 8px; }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.meta-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  backdrop-filter: blur(8px);
}
.meta-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
.meta-card dd { margin: 6px 0 0; font-weight: 600; color: var(--white); }
.meta-card.is-live { border-color: rgba(6, 182, 212, .5); background: rgba(6, 182, 212, .1); }
.meta-card.is-live dt { color: #22d3ee; }
.meta-card a { color: var(--white); text-decoration: none; }
.meta-card a:hover { color: #22d3ee; }

.case-block {
  border-radius: var(--radius);
  padding: 30px;
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--white);
}
.case-block h2 { font-family: var(--font-display); font-size: 19px; margin: 0 0 12px; color: var(--ink); }
.case-block p { margin: 0; color: var(--ink-soft); line-height: 1.75; }
.case-challenge { border-left: 4px solid var(--amber); }
.case-solution { border-left: 4px solid var(--blue); }
.case-result { border-left: 4px solid var(--green); }

.tech-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.tech-pill {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--white);
}

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 18px; }
.gallery-grid img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.gallery-grid figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

.service-detail-price { font-size: 15px; color: var(--ink-soft); margin-top: 22px; }
.service-detail-price strong { font-size: 26px; color: var(--ink); font-family: var(--font-display); }

.feature-list { list-style: none; padding: 0; margin: 20px 0 0; }
.feature-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #eef4ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* --- Pagination --- */
.pagination-row { margin-top: 48px; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pager-btn,
.pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}
.pager-btn:hover,
.pager-page:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pager-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  background: var(--bg);
}
.pager-btn.is-disabled:hover {
  border-color: var(--line);
  color: var(--ink-soft);
}

.pager-pages { display: flex; gap: 6px; margin: 0 4px; }

.pager-page.is-current {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.pager-gap { color: var(--muted); padding: 0 4px; align-self: center; }

.pager-summary {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  margin: 16px 0 0;
}

@media (max-width: 560px) {
  .pager-btn { padding: 0 10px; font-size: 13px; }
  .pager-pages { flex-wrap: wrap; justify-content: center; }
}

.footer-address { color: #94a3b8; font-size: 14px; line-height: 1.6; display: block; }

@media (prefers-reduced-motion: reduce) {
  .work-card, .work-card-media img { transition: none; }
}