/* ==========================================================================
   Credirelief — site additions and responsive corrections
   Written to match the existing palette so nothing here introduces a new
   visual language.

     ink     #0B1F2E      sprout  #2FB673      meadow  #14805A
     harbor  #123A5C      mist    #F4F8F7      whatsapp #25D366

   Plain CSS on purpose: the site's Tailwind build is purged, so utility
   classes that aren't already used somewhere in the markup do not exist in
   the compiled stylesheet. Anything new is written out longhand.
   ========================================================================== */

:root {
  --cr-ink: #0b1f2e;
  --cr-sprout: #2fb673;
  --cr-meadow: #14805a;
  --cr-harbor: #123a5c;
  --cr-mist: #f4f8f7;
  --cr-wa: #25d366;
  --cr-header-h: 68px;
}

/* --------------------------------------------------------------- baseline */

html,
body {
  overflow-x: hidden;
}

*,
*::before,
*::after {
  min-width: 0;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------- header (always solid)

   The build shipped a transparent header with ink-coloured text on every
   page. On the homepage that sits over a near-black hero, so the logo and
   wordmark were effectively invisible. A solid bar is readable on every
   page and needs no JavaScript to stay correct.                            */

header.fixed {
  background: #fff !important;
  border-bottom: 1px solid rgba(11, 31, 46, 0.08);
}

.cr-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.cr-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.cr-tagline {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--cr-meadow);
  margin-top: 2px;
  white-space: nowrap;
}

footer .cr-tagline {
  color: var(--cr-sprout);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
}

@media (max-width: 380px) {
  header .cr-tagline {
    font-size: 0.5rem;
    letter-spacing: 0.05em;
  }
}

/* ------------------------------------------------------------ mobile menu

   The original mobile panel only ever existed inside the React bundle, so
   below 1024px the site had no navigation at all once the bundle was
   removed. This is a real panel in the markup.                             */

.cr-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  color: var(--cr-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .cr-menu-btn {
    display: none;
  }
}

.cr-menu-btn span {
  position: relative;
  display: block;
  height: 2px;
  width: 20px;
  background: currentColor;
  transition: transform 0.28s ease, opacity 0.2s ease;
}

.cr-menu-btn span::before,
.cr-menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  width: 20px;
  background: currentColor;
  transition: transform 0.28s ease;
}

.cr-menu-btn span::before {
  top: -7px;
}
.cr-menu-btn span::after {
  top: 7px;
}

.cr-menu-btn[aria-expanded="true"] span {
  background: transparent;
}
.cr-menu-btn[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}
.cr-menu-btn[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

.cr-mobile-nav {
  display: none;
  position: fixed;
  inset: var(--cr-header-h) 0 auto 0;
  background: #fff;
  border-bottom: 1px solid rgba(11, 31, 46, 0.08);
  box-shadow: 0 18px 40px -24px rgba(11, 31, 46, 0.45);
  padding: 0.5rem 1.5rem 1.5rem;
  z-index: 49;
  max-height: calc(100vh - var(--cr-header-h));
  overflow-y: auto;
}

.cr-mobile-nav.is-open {
  display: block;
}

@media (min-width: 1024px) {
  .cr-mobile-nav.is-open {
    display: none;
  }
}

.cr-mobile-nav a {
  display: block;
  padding: 0.85rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(11, 31, 46, 0.75);
  border-bottom: 1px solid rgba(11, 31, 46, 0.07);
  text-decoration: none;
}

.cr-mobile-nav a:last-of-type {
  border-bottom: 0;
}

.cr-mobile-nav .cr-mobile-cta {
  margin-top: 1rem;
  border-bottom: 0;
  text-align: center;
  background: var(--cr-meadow);
  color: #fff;
  border-radius: 9999px;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
}

/* -------------------------------------------------------- WhatsApp button */

.cr-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--cr-wa);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: 0 10px 24px -14px rgba(37, 211, 102, 0.9);
}

.cr-wa:hover {
  background: #1da851;
  transform: translateY(-1px);
  color: #fff;
}

.cr-wa svg {
  height: 1.15em;
  width: 1.15em;
  flex: none;
  fill: currentColor;
}

/* sits next to the sprout-green primary CTA on dark sections */
.cr-wa--ondark {
  background: #fff;
  color: #0e7a4a;
  padding: 0.95rem 1.75rem;
  box-shadow: none;
}

.cr-wa--ondark:hover {
  background: var(--cr-wa);
  color: #fff;
}

/* quieter variant for the dark footer column */
.cr-wa--sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.8rem;
  box-shadow: none;
}

/* floating chat button — every screen size */
.cr-wa-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 48;
  height: 3.5rem;
  width: 3.5rem;
  padding: 0;
  border-radius: 9999px;
  box-shadow: 0 14px 30px -8px rgba(11, 31, 46, 0.55);
}

.cr-wa-float svg {
  height: 1.85rem;
  width: 1.85rem;
}

/* gentle attention pulse, once the page has settled */
.cr-wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid var(--cr-wa);
  animation: cr-pulse 2.6s ease-out infinite;
}

@keyframes cr-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-wa-float::after { animation: none; opacity: 0; }
}

/* ------------------------------------------------------------ social icons */

.cr-social {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.cr-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}

.cr-social a:hover {
  background: var(--cr-sprout);
  border-color: var(--cr-sprout);
  color: var(--cr-ink);
}

.cr-social svg {
  height: 1.05rem;
  width: 1.05rem;
  fill: currentColor;
}

/* ------------------------------------------------- hero situations list

   Rebuilt from the five cards the original build left scattered across the
   hero. Sits in the right-hand column on desktop, below the hero copy on
   smaller screens.                                                        */

.cr-situations-col {
  align-self: center;
}

.cr-situations {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  padding: 1.35rem 1.4rem;
  backdrop-filter: blur(2px);
}

.cr-situations-title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cr-sprout);
  margin: 0 0 0.35rem;
}

.cr-situation {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.cr-situation:last-child {
  border-bottom: 0;
  padding-bottom: 0.2rem;
}

.cr-situation-icon {
  flex: none;
  height: 2.6rem;
  width: 2.6rem;
  border-radius: 9999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1px;
}

.cr-situation-icon svg {
  height: 100%;
  width: 100%;
}

.cr-situation-body h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.cr-situation-body p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.25rem 0 0;
}

@media (max-width: 1023px) {
  .cr-situations {
    margin-top: 2.5rem;
  }
}

/* ---------------------------------------------------------- client reviews */

.cr-reviews {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cr-reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cr-reviews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cr-review {
  display: flex;
  flex-direction: column;
  background: var(--cr-mist);
  border: 1px solid rgba(11, 31, 46, 0.06);
  border-radius: 1rem;
  padding: 1.75rem;
  margin: 0;
}

.cr-review blockquote {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(11, 31, 46, 0.72);
  flex: 1;
}

.cr-review-mark {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--cr-sprout);
  margin-bottom: 0.85rem;
}

.cr-review figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.cr-review-avatar {
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  border-radius: 9999px;
  background: var(--cr-harbor);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.cr-review-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cr-ink);
}

/* --------------------------------------------------- services page imagery */

.cr-svc-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cr-mist);
}

.cr-svc-media img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cr-svc-card:hover .cr-svc-media img {
  transform: scale(1.04);
}

/* keeps every card the same height so the grid rows stay aligned */
.cr-svc-card {
  display: flex;
  flex-direction: column;
}

.cr-svc-card > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cr-svc-card > div:last-child > a {
  margin-top: auto;
}

@supports not (aspect-ratio: 16 / 9) {
  .cr-svc-media {
    height: 200px;
  }
}

/* ----------------------------------------------------------- contact form */

.cr-form {
  display: grid;
  gap: 1.15rem;
}

@media (min-width: 640px) {
  .cr-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cr-form .cr-field--wide {
    grid-column: 1 / -1;
  }
}

.cr-field {
  display: block;
}

.cr-field > span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(11, 31, 46, 0.7);
}

.cr-hint {
  font-style: normal;
  font-weight: 400;
  opacity: 0.55;
}

.cr-field input,
.cr-field select,
.cr-field textarea {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(11, 31, 46, 0.12);
  background: #fff;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--cr-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.cr-field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B1F2E'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.9rem;
  padding-right: 2.4rem;
}

.cr-field textarea {
  min-height: 130px;
  resize: vertical;
}

.cr-field input::placeholder,
.cr-field textarea::placeholder {
  color: rgba(11, 31, 46, 0.35);
}

.cr-field input:focus,
.cr-field select:focus,
.cr-field textarea:focus {
  outline: none;
  border-color: var(--cr-sprout);
  box-shadow: 0 0 0 3px rgba(47, 182, 115, 0.28);
}

.cr-hp {
  position: absolute;
  left: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.cr-submit {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  cursor: pointer;
  background: var(--cr-ink);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.9rem 1.75rem;
  border-radius: 9999px;
  transition: background-color 0.25s ease;
}

.cr-submit:hover {
  background: var(--cr-harbor);
}

.cr-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.cr-form-note {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(11, 31, 46, 0.5);
}

.cr-form-status {
  grid-column: 1 / -1;
  border-radius: 0.75rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  display: none;
}

.cr-form-status.is-ok {
  display: block;
  background: rgba(47, 182, 115, 0.12);
  color: #0e6b45;
}

.cr-form-status.is-err {
  display: block;
  background: rgba(180, 71, 43, 0.1);
  color: #8f3520;
}

/* ------------------------------------------------------------- accordions */

.cr-acc-panel {
  overflow: hidden;
}

.cr-js .cr-acc-panel[hidden] {
  display: none;
}

.cr-acc-btn {
  cursor: pointer;
  background: none;
  border: 0;
  font: inherit;
}

.cr-acc-icon {
  transition: transform 0.3s ease;
}

.cr-acc-btn[aria-expanded="true"] .cr-acc-icon {
  transform: rotate(45deg);
}

/* -------------------------------------------------------- scroll reveals

   Content is visible by default. The bundle used to set opacity:0 inline
   and rely on JavaScript to reveal it, so any script failure left whole
   sections blank. Now the hidden state is only applied once JS is running
   and an observer is guaranteed to undo it.                               */

.cr-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.cr-js [data-reveal].cr-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cr-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------- responsive corrections */

/* the fixed header needs clear air above page content on small screens */
@media (max-width: 1023px) {
  main > section:first-child {
    padding-top: 6.5rem;
  }
}

/* two-column contact/consultation layouts collapse cleanly */
@media (max-width: 1023px) {
  .container-page.grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .lg\:sticky {
    position: static !important;
  }
}

/* long headlines were overflowing on narrow phones */
@media (max-width: 640px) {
  h1 {
    font-size: 1.85rem !important;
    line-height: 1.22 !important;
  }
  h2 {
    font-size: 1.55rem !important;
    line-height: 1.28 !important;
  }
  .container-page {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }
  section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* tablet: stop 3- and 4-up grids from squeezing to unreadable columns */
@media (min-width: 641px) and (max-width: 1023px) {
  .container-page {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }
}

/* stacked CTA buttons should fill the row rather than sit half-width */
@media (max-width: 480px) {
  .cr-cta-stack {
    flex-direction: column;
    align-items: stretch;
  }
  .cr-cta-stack > a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* keep the floating WhatsApp button clear of the footer text */
@media (max-width: 1023px) {
  footer {
    padding-bottom: 4.5rem;
  }
}