/* ==========================================================================
   BrokeRisk : components.
   Four different treatments carry the four content types: bento panels for
   solutions, an axis rail for the process, pill tags for industries, and
   rule-separated blocks for the differentiators. One repeated card kit is
   what makes a page look generated, so there isn't one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); box-shadow: 0 10px 30px -14px rgba(36,82,200,.85); }

.btn--ghost { border-color: var(--line-hard); color: var(--text); }
.btn--ghost:hover { border-color: var(--blue-line); color: var(--blue-bright); background: var(--blue-dim); }

.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn--block { inline-size: 100%; }

/* --------------------------------------------------------------------------
   Hero risk panel : the one place boldness is spent
   -------------------------------------------------------------------------- */
.panel {
  margin: 0;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: linear-gradient(160deg, rgba(26,31,40,.9), rgba(20,24,31,.82));
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel__title { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; color: var(--text); }
.panel__chip {
  padding: .2rem .55rem;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-xs);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--slate);
}
.panel__client { margin-block-start: .2rem; font-size: .8125rem; color: var(--slate); }

/* Score gauge */
.panel__score { display: flex; align-items: center; gap: 1.1rem; margin-block: 1.4rem; }
.gauge { inline-size: 118px; block-size: 66px; flex: none; }
.gauge__track { stroke: var(--line-hard); }
.gauge__value { stroke: var(--gold); stroke-dasharray: var(--score) 100; }
.js .gauge__value { stroke-dasharray: 0 100; transition: stroke-dasharray 1.1s var(--ease); }
.js .panel.is-live .gauge__value { stroke-dasharray: var(--score) 100; }

.panel__scoreval { font-size: 2.4rem; line-height: 1; color: var(--text); font-weight: 500; }
.panel__scorelabel { font-size: .8125rem; color: var(--slate); margin-block-start: .35rem; white-space: nowrap; }

/* Exposure bars */
.panel__bars { display: grid; gap: .7rem; padding-block: 1.25rem; border-block: 1px solid var(--line); }
.exposure { display: grid; grid-template-columns: 5.5rem 1fr 2.2rem; align-items: center; gap: .75rem; font-size: .8125rem; }
.exposure__name { color: var(--text-2); }
.exposure__track { block-size: 6px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.exposure__fill {
  display: block;
  block-size: 100%;
  inline-size: var(--v);
  border-radius: var(--r-pill);
  background: var(--gold);
}
.js .exposure__fill { inline-size: 0; transition: inline-size .9s var(--ease); }
.js .panel.is-live .exposure__fill { inline-size: var(--v); }
/* The bars carry a scale: gold marks the elevated exposures, blue the ones
   already under control. Colour is doing work here, not decorating. */
.exposure--low .exposure__fill { background: var(--blue-bright); opacity: .75; }
.exposure__val { text-align: end; color: var(--text); }

.panel__trend { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block-start: 1.1rem; }
.panel__trendlabel { font-size: .75rem; color: var(--slate); }
.spark { inline-size: 128px; block-size: 34px; flex: none; }
.spark path { stroke: var(--gold); }
.js .spark path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.3s var(--ease) .25s;
}
.js .panel.is-live .spark path { stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   Solutions : bento, deliberately unequal spans
   -------------------------------------------------------------------------- */
.bento { display: grid; gap: clamp(.85rem, 1.6vw, 1.25rem); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__item--wide, .bento__item--full { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento__item--wide { grid-column: span 2; }
  .bento__item--full { grid-column: span 3; }
}

.bento__item {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.bento__item:hover { border-color: var(--line-hard); background: var(--raised); }

.bento__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--blue-line);
  background: var(--blue-dim);
  color: var(--blue-bright);
  margin-block-end: 1.1rem;
}
.bento__icon svg { inline-size: 20px; block-size: 20px; }
.bento__item h3 { margin-block-end: .5rem; }
.bento__item p { color: var(--slate); font-size: .9375rem; }

/* The featured cell carries a little more air and a hairline accent */
.bento__item--wide { border-color: var(--blue-line); background: linear-gradient(140deg, rgba(76,141,255,.08), transparent 58%), var(--surface); }
.bento__item--wide p { max-inline-size: 52ch; }

/* --------------------------------------------------------------------------
   Approach : numbers sitting on an axis rule, not in circles
   -------------------------------------------------------------------------- */
.rail { display: grid; gap: clamp(2rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 860px) { .rail { grid-template-columns: repeat(4, 1fr); } }

.step { position: relative; padding-block-start: 2.1rem; border-block-start: 1px solid var(--line); }
.step__n {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: translateY(-50%);
  padding-inline-end: .7rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--gold);
}
.step h3 { margin-block-end: .5rem; }
.step p { color: var(--slate); font-size: .9375rem; max-inline-size: 36ch; }

/* --------------------------------------------------------------------------
   Why BrokeRisk : rule-separated blocks forming a cross, no boxes
   -------------------------------------------------------------------------- */
.why__grid { display: grid; }
@media (min-width: 820px) { .why__grid { grid-template-columns: 1fr 1fr; } }

.why__item { padding-block: clamp(1.75rem, 3vw, 2.5rem); border-block-start: 1px solid var(--line); }
@media (min-width: 820px) {
  .why__item:nth-child(odd) { padding-inline-end: clamp(2rem, 4vw, 3.5rem); border-inline-end: 1px solid var(--line); }
  .why__item:nth-child(even) { padding-inline-start: clamp(2rem, 4vw, 3.5rem); }
}
/* Scoped through .why__item so it outranks the ".why__item p" rule below.
   The stat is a paragraph element, so the two selectors would otherwise tie
   and the later one would silently win. */
.why__item .why__stat {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--gold);
  line-height: 1;
  max-inline-size: none;
}
.why__item h3 { margin-block: .85rem .5rem; }
.why__item p { color: var(--slate); font-size: .9375rem; max-inline-size: 44ch; }

/* --------------------------------------------------------------------------
   Industries : tags, not cards
   -------------------------------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: .65rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: .9375rem;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.pill:hover { border-color: var(--blue-line); color: var(--text); background: var(--blue-dim); }
.pill svg { inline-size: 16px; block-size: 16px; color: var(--blue-bright); flex: none; }

/* --------------------------------------------------------------------------
   Testimonials : two wide panels per row
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: clamp(.85rem, 1.6vw, 1.25rem); }
@media (min-width: 900px) { .quotes { grid-template-columns: 1fr 1fr; } }

.quote {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.quote__stars { display: flex; gap: .15rem; color: var(--gold); margin-block-end: 1rem; }
.quote__stars svg { inline-size: 15px; block-size: 15px; }
.quote__stars .is-empty { color: var(--line-hard); }
.quote blockquote { font-size: 1.0625rem; line-height: 1.6; color: var(--text); flex: 1; }
.quote figcaption { margin-block-start: 1.4rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--line); }
.quote__who { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--text); }
.quote__org { font-size: .8125rem; color: var(--slate); margin-block-start: .15rem; }

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */
.stats { display: grid; border-block: 1px solid var(--line); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.stat + .stat { border-block-start: 1px solid var(--line-soft); }
@media (min-width: 760px) {
  .stat + .stat { border-block-start: 0; border-inline-start: 1px solid var(--line); padding-inline-start: clamp(1.25rem, 2.5vw, 2rem); }
  .stat:not(:last-child) { padding-inline-end: clamp(1rem, 2vw, 1.5rem); }
}
.stat__num { font-family: var(--font-mono); font-size: clamp(2rem, 3.8vw, 2.9rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; color: var(--text); }
.stat__unit { color: var(--gold); }
.stat__label { margin-block-start: .7rem; font-size: .875rem; color: var(--slate); max-inline-size: 24ch; }

/* --------------------------------------------------------------------------
   FAQ : heading held in its own column, accordion offset beside it
   -------------------------------------------------------------------------- */
.faq__layout { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 960px) {
  .faq__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); }
  .faq__aside { position: sticky; inset-block-start: 7rem; align-self: start; }
}

.faq__item { border-block-end: 1px solid var(--line); }
.faq__item:first-child { border-block-start: 1px solid var(--line); }
.faq__heading { margin: 0; font: inherit; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  inline-size: 100%;
  padding-block: 1.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.faq__q:hover { color: var(--blue-bright); }
.faq__icon { flex: none; inline-size: 20px; block-size: 20px; color: var(--blue-bright); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq__item.is-collapsed .faq__icon { transform: none; }

/* Grid rows animate cleanly with no height measuring */
.faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--ease); }
.faq__item.is-collapsed .faq__a { grid-template-rows: 0fr; }
.faq__a > div { overflow: hidden; visibility: visible; transition: visibility 0s; }
/* A clipped panel still holds tab stops and is still read aloud. Hiding it
   properly, delayed so the collapse still animates. */
.faq__item.is-collapsed .faq__a > div { visibility: hidden; transition: visibility 0s .32s; }
.faq__a p { padding-block-end: 1.5rem; color: var(--slate); font-size: .9375rem; max-inline-size: 66ch; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); } }

.contact__details { display: grid; gap: 1.3rem; margin-block-start: 2rem; }
.contact__details > div { display: flex; gap: .85rem; align-items: start; }
.contact__details svg { inline-size: 18px; block-size: 18px; color: var(--blue-bright); flex: none; margin-block-start: .3rem; }
.contact__details a { color: var(--text); text-decoration: none; font-weight: 500; }
.contact__details a:hover { color: var(--blue-bright); }
.contact__details span { display: block; font-size: .8125rem; color: var(--slate); }

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 3vw, 2.25rem);
}
.form__row { display: grid; gap: 1.1rem; margin-block-end: 1.1rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: .4rem; margin-block-end: 1.1rem; }
.form__row .form__field { margin-block-end: 0; }

.form__label { font-size: .8125rem; font-weight: 500; color: var(--text-2); }
.form__label .req { color: var(--danger); margin-inline-start: .15rem; }

.form__input {
  inline-size: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: .9375rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* #5C6879 gave placeholder text only 3.44:1 on the input ground. This clears
   AA at 5.21:1 and still reads as secondary against the entered value. */
.form__input::placeholder { color: #78859A; }
.form__input:hover { border-color: #3A4657; }
.form__input:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px var(--blue-dim); outline: none; }
textarea.form__input { resize: vertical; min-block-size: 120px; }

select.form__input {
  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='%238593A6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 17px;
  padding-inline-end: 2.5rem;
}

.form__input[aria-invalid='true'] { border-color: var(--danger); }
.form__input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(255,107,94,.16); }

.form__error { display: none; font-size: .8125rem; color: var(--danger); }
.form__error.is-shown { display: block; }
.form__note { margin-block-start: 1rem; font-size: .8125rem; color: var(--slate); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: grid;
  gap: .6rem;
  inline-size: min(calc(100% - 2rem), 440px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: start;
  gap: .75rem;
  padding: .95rem 1.1rem;
  background: var(--raised);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.5;
  animation: toast-in .35s var(--ease) both;
}
.toast svg { inline-size: 19px; block-size: 19px; color: var(--blue-bright); flex: none; margin-block-start: .12rem; }
.toast.is-leaving { animation: toast-out .3s var(--ease) both; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   Scroll reveal : a short scale plus lift, closer to a panel loading than
   to the usual slide up
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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

/* The single orchestrated moment: the risk panel assembling on load */
.js .panel { animation: panel-in .8s var(--ease) .1s both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .js .panel { animation: none; } }