/* ==========================================================================
   Collabrum Advisory — Components
   Geometry, hover mechanics and transition timings are the reference's own,
   read out of its computed styles and stylesheets.
   ========================================================================== */

/* ---------- Section title -------------------------------------------------
   eyebrow 13px/700 uppercase tracked · heading 50px/500 lh 1.2               */

.section-title { display: block; }

.section-title__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

/* Any deep surface, including the hero, which is not a .section--deep. */
.section--deep .section-title__eyebrow,
.hero .section-title__eyebrow,
.contact-cta__panel .section-title__eyebrow { color: var(--on-deep-muted); }

.section-title__heading {
  font-size: var(--text-3xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--color-deep);
}

.section--deep .section-title__heading { color: var(--color-white); }

.section-title--center { text-align: center; }
.section-title--center .section-title__heading { margin-inline: auto; }

/* ---------- Buttons -------------------------------------------------------
   Reference mechanic: pill holds a label plus a 40px circular arrow on the
   right. On hover the right arrow scales to 0, a left arrow scales in at
   left:10px, the label slides 55px right, and the padding swaps sides.       */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  height: 56px;
  padding: 0 10px 0 30px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--dur-slow);
}

.btn__label  { transition: var(--dur-slow); }

.btn__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-ink);
  transition: var(--dur-slow);
}

.btn__arrow svg { width: 16px; height: 16px; stroke-width: 2; }

.btn__arrow--left {
  position: absolute;
  left: 10px;
  scale: 0;
}

.btn__arrow--right { scale: 1; }

.btn:hover,
.btn:focus-visible {
  padding-left: 10px;
  padding-right: 38px;
  gap: 0;
}

.btn:hover .btn__label,
.btn:focus-visible .btn__label { transform: translateX(55px); }

.btn:hover .btn__arrow--left,
.btn:focus-visible .btn__arrow--left { scale: 1; }

.btn:hover .btn__arrow--right,
.btn:focus-visible .btn__arrow--right { scale: 0; }

/* Variants */
.btn--dark {
  background: var(--color-deep);
  color: var(--color-white);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--on-primary);
}

.btn--primary .btn__arrow { background: var(--color-white); }


/* Block button — pricing / engagement cards, form submit */
.btn--block {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 58px;
  padding: 0 30px;
  gap: 0;
  border-radius: var(--radius-btn);
  font-weight: var(--fw-medium);
}

.btn--block:hover,
.btn--block:focus-visible { padding: 0 30px; }

.btn--block:hover .btn__label,
.btn--block:focus-visible .btn__label { transform: none; }

.btn--upper {
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  font-weight: var(--fw-semibold);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

/* Text link with underline reveal */
.link-underline {
  position: relative;
  font-weight: var(--fw-medium);
  color: var(--color-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.link-underline:hover { color: var(--color-primary); }

/* ---------- Cards ---------------------------------------------------------
   Sharp corners, 1px hairlines, no shadows — as measured.                    */

.card {
  position: relative;
  background: var(--color-white);
  border: var(--hairline);
  border-radius: var(--radius-card);
}


/* Feature block — line-art icon, title, hairline, copy */
.feature {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature__icon {
  width: 80px;
  height: 80px;
  color: var(--color-deep);
}

.feature__icon svg { width: 100%; height: 100%; stroke-width: 1.25; }

.feature__title {
  padding-bottom: 20px;
  border-bottom: var(--hairline);
  font-size: var(--text-xl);
  color: var(--color-deep);
}

.feature__text { margin: 0; }

.section--deep .feature__icon,
.section--deep .feature__title { color: var(--color-white); }

/* Step card — badge straddles the top edge */
.step {
  position: relative;
  padding: 46px 30px 40px;
  border: var(--hairline);
  text-align: center;
}

.step__badge {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--color-deep);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.step__media {
  width: 148px;
  height: 148px;
  margin: 14px auto 28px;
  border-radius: 50%;
  overflow: hidden;
}

.step__media img { width: 100%; height: 100%; object-fit: cover; }

.step__title { margin-bottom: 12px; font-size: var(--text-xl); color: var(--color-deep); }
.step__text  { margin: 0; }

/* Checklist — shared by service panels and forms */
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li + li { margin-top: 6px; }

.checklist svg {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 6px;
  color: var(--color-deep);
  stroke-width: 2.5;
}

.section--deep .checklist svg { color: var(--color-primary); }

/* Case tile — full-bleed, image zooms on hover */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.tile:hover img,
.tile:focus-visible img { transform: scale(1.3); }

.tile__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 32px 30px;
  background: linear-gradient(to top, rgba(var(--color-deep-rgb), .92), transparent);
  color: var(--color-white);
}

.tile__eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}

.tile__title { color: var(--color-white); font-size: var(--text-xl); }

/* Post card */
.post { display: flex; flex-direction: column; }

.post__media { aspect-ratio: 16 / 10; overflow: hidden; }

.post__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.post:hover .post__media img { transform: scale(1.08); }

.post__body { padding-top: 24px; }

.post__meta {
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.post__title { font-size: var(--text-xl); color: var(--color-deep); }
.post a:hover .post__title, .post__title a:hover { color: var(--color-primary); }

/* Service card (grid page) */
.service-card {
  display: flex;
  flex-direction: column;
  border: var(--hairline);
  background: var(--color-white);
}

.service-card__media { aspect-ratio: 3 / 2; overflow: hidden; }

.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.service-card:hover .service-card__media img { transform: scale(1.08); }

.service-card__body { padding: 32px 30px 36px; }

.service-card__icon {
  width: 56px; height: 56px;
  margin-bottom: 20px;
  color: var(--color-deep);
  transition: transform var(--dur-base) var(--ease);
}

.service-card:hover .service-card__icon { transform: rotate(30deg); }

.service-card__title { margin-bottom: 12px; font-size: var(--text-xl); color: var(--color-deep); }

/* Icon box — contact rows, header phone */
.iconbox { display: flex; gap: 18px; align-items: flex-start; }

.iconbox__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-deep);
  color: var(--color-white);
}

.iconbox__icon svg { width: 20px; height: 20px; }

.section--deep .iconbox__icon {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--on-deep-border);
}

.iconbox__label {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}

.iconbox__value { margin: 0; }

/* Pill tag — industries row */
.tag {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 30px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--on-deep-border);
  color: var(--color-white);
  font-size: var(--text-base);
  transition: var(--dur-base) var(--ease);
}

.tag:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--on-primary);
}

/* Counter */
.counter__value {
  font-size: var(--text-counter);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-deep);
}

.counter__label { margin: 0; }
.section--deep .counter__value { color: var(--color-white); }

/* Avatar cluster — no headshots supplied, monogram fallback */
.avatars { display: flex; align-items: center; }

.avatars__item {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-left: -12px;
  border-radius: 50%;
  border: 2px solid var(--color-deep);
  background: var(--color-deep-light);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.avatars__item:first-child { margin-left: 0; }

.avatars__item--more {
  background: var(--color-primary);
  color: var(--on-primary);
}

/* Quote card */
.quote { display: flex; flex-direction: column; gap: 24px; }
.quote__mark { width: 40px; height: 40px; color: var(--color-primary); }
.quote__text { font-size: var(--text-lg); line-height: 1.7; color: var(--color-heading); }

.quote__author { display: flex; align-items: center; gap: 14px; }
.quote__name   { font-weight: var(--fw-medium); color: var(--color-heading); }
.quote__role   { font-size: var(--text-sm); }

/* ---------- Accordion ------------------------------------------------------ */

.accordion__item { border-bottom: var(--hairline); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  width: 100%;
  padding: 26px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  color: var(--color-deep);
  transition: color var(--dur-base) var(--ease);
}

.accordion__trigger:hover { color: var(--color-primary); }

.accordion__icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  transition: transform var(--dur-base) var(--ease);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}

.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: 26px; margin: 0; }

/* ---------- Forms ---------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}

.field__control {
  width: 100%;
  height: 61px;
  padding: 14px 20px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-input);
  background: var(--color-white);
  font-size: var(--text-base);
  color: var(--color-heading);
  transition: border-color var(--dur-base) var(--ease);
}

textarea.field__control {
  height: auto;
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 20px;
  padding-right: 48px;
}

.field__control::placeholder { color: var(--color-text); }
.field__control:hover { border-color: var(--color-border); }

.field__control:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .18);
}

.field__control[aria-invalid="true"] { border-color: #C0392B; }

.field__error {
  font-size: var(--text-sm);
  color: #C0392B;
}

.form__hint {
  margin: 12px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: center;
}

.form__status {
  margin-top: 16px;
  font-size: var(--text-sm);
}

.form__status[data-state="success"] { color: var(--color-secondary); }
.form__status[data-state="error"]   { color: #C0392B; }

/* ---------- Breadcrumb ------------------------------------------------------ */

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--on-deep-muted);
}

.breadcrumb svg { width: 16px; height: 16px; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current] { color: var(--color-white); font-weight: var(--fw-medium); }

/* ---------- Back to top ------------------------------------------------------ */

.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: var(--z-totop);
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--on-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}

.to-top[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top svg { width: 20px; height: 20px; }