/* ==========================================================================
   Wasit Insurance - components
   Each section gets its own texture on purpose: policies are bordered cards,
   why-us is unboxed, FAQ is hairline rules, testimonials are quote blocks.
   A single repeated card kit is what makes a page look generated.
   ========================================================================== */

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

.btn--primary { background: var(--gold); color: var(--navy-900); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--gold-soft); box-shadow: var(--shadow-2); }

.btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); background: rgba(200,162,74,.08); }

.btn--outline { border-color: var(--navy-800); color: var(--navy-800); }
.btn--outline:hover { background: var(--navy-800); color: #fff; }

.btn--sm { padding: .7rem 1.2rem; font-size: .9rem; }
.btn--block { inline-size: 100%; }

/* --------------------------------------------------------------------------
   Policy cards - bordered, flat, lifting only on hover
   -------------------------------------------------------------------------- */
.policy {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.policy:hover { border-color: var(--gold); box-shadow: var(--shadow-2); transform: translateY(-3px); }

.policy__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-lg); /* the arc, at card scale */
  background: var(--gold-wash);
  color: var(--gold-ink);
  margin-block-end: 1.35rem;
}
.policy__icon svg { inline-size: 26px; block-size: 26px; }

.policy h3 { margin-block-end: .6rem; }
.policy p { color: var(--ink-60); font-size: .975rem; }

.policy__link {
  margin-block-start: 1.4rem;
  font-weight: 600;
  font-size: .925rem;
  color: var(--gold-ink);
  text-decoration: none;
  border-block-end: 1.5px solid currentColor;
  align-self: start;
  padding-block-end: 2px;
}
.policy__link:hover { color: var(--navy-800); }

/* --------------------------------------------------------------------------
   Why us - no boxes, a gold rule does the structural work
   -------------------------------------------------------------------------- */
.why__item { padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--gold); }
.why__item svg { inline-size: 28px; block-size: 28px; color: var(--gold-ink); margin-block-end: 1rem; }
.why__item h3 { margin-block-end: .55rem; }
.why__item p { color: var(--ink-60); font-size: .975rem; max-inline-size: 46ch; }

/* --------------------------------------------------------------------------
   How it works - the only numbered content, because it is the only sequence
   -------------------------------------------------------------------------- */
/* The connector is positioned against the step grid, not the whole section,
   so it links the four numerals rather than drifting across the heading.
   With four columns the numeral centres sit at 12.5% and 87.5%. */
.steps__track { position: relative; }
.steps__arc {
  display: none;
  position: absolute;
  inset-block-start: 26px;
  inset-inline-start: 12.5%;
  inline-size: 75%;
  block-size: auto;
  color: var(--line);
  z-index: 0;
}
@media (min-width: 1000px) { .steps__arc { display: block; } }

.steps__grid { position: relative; z-index: 1; }

.step__num {
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1.5px solid var(--gold);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-block-end: 1.35rem;
}
.section--mist .step__num { background: var(--mist); }
.step h3 { margin-block-end: .55rem; }
.step p { color: var(--ink-60); font-size: .975rem; max-inline-size: 34ch; }

/* --------------------------------------------------------------------------
   Testimonials - quote blocks; scroll-snap rail on mobile, grid on desktop
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 340px);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 1.25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.quotes > * { scroll-snap-align: start; }

@media (min-width: 900px) {
  .quotes {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-block-end: 0;
    gap: clamp(1.25rem, 2.2vw, 1.75rem);
  }
}

.quote {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.quote__stars { display: flex; gap: .15rem; color: var(--gold); margin-block-end: 1.1rem; }
.quote__stars svg { inline-size: 18px; block-size: 18px; }
.quote__stars .is-empty { color: var(--line); }

.quote blockquote { font-size: 1.0625rem; line-height: 1.66; color: var(--navy-700); flex: 1; }
.quote figcaption { margin-block-start: 1.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }
.quote__name { font-family: var(--font-display); font-weight: 600; color: var(--navy-800); }
.quote__meta { font-size: .875rem; color: var(--ink-60); margin-block-start: .15rem; }

.quotes__hint { margin-block-start: 1rem; font-size: .85rem; color: var(--ink-60); }
@media (min-width: 900px) { .quotes__hint { display: none; } }

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
.stat { border-inline-start: 2px solid rgba(200,162,74,.45); padding-inline-start: 1.35rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: .46em; font-weight: 600; letter-spacing: 0; }

.stat__label { margin-block-start: .7rem; color: var(--navy-200); font-size: .95rem; max-inline-size: 22ch; }

/* --------------------------------------------------------------------------
   FAQ - hairline rules, no cards.
   Answers are open in the markup, so with JS off this is a readable list of
   questions and answers. JS collapses them into an accordion on load.
   -------------------------------------------------------------------------- */
.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.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-800);
  text-align: start;
  cursor: pointer;
}
.faq__q:hover { color: var(--gold-ink); }

.faq__icon {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  color: var(--gold-ink);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq__item.is-collapsed .faq__icon { transform: none; }

/* Height animation via grid rows - no measuring, no max-height guesswork */
.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 is still read by screen readers and still holds tab stops.
   visibility:hidden takes it out of both, 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.6rem; color: var(--ink-60); max-inline-size: 68ch; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact__details { display: grid; gap: 1.4rem; margin-block-start: 2.25rem; }
.contact__details > div { display: flex; gap: .9rem; align-items: start; }
.contact__details svg { inline-size: 20px; block-size: 20px; color: var(--gold-ink); flex: none; margin-block-start: .25rem; }
.contact__details a { color: var(--navy-800); text-decoration: none; font-weight: 500; }
.contact__details a:hover { color: var(--gold-ink); }
.contact__details span { display: block; font-size: .85rem; color: var(--ink-60); }

.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-1);
}
.form__row { display: grid; gap: 1.25rem; margin-block-end: 1.25rem; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: .45rem; margin-block-end: 1.25rem; }
.form__row .form__field { margin-block-end: 0; }

.form__label { font-size: .9rem; font-weight: 600; color: var(--navy-700); }
.form__label .req { color: var(--err); margin-inline-start: .15rem; }

.form__input {
  inline-size: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form__input::placeholder { color: #9AA5B4; }
.form__input:hover { border-color: #C9D3E0; }
.form__input:focus { border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(19,49,92,.09); outline: none; }
textarea.form__input { resize: vertical; min-block-size: 130px; }

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='%235B6675' 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 1rem center;
  background-size: 18px;
  padding-inline-end: 2.75rem;
}

.form__input[aria-invalid='true'] { border-color: var(--err); }
.form__input[aria-invalid='true']:focus { box-shadow: 0 0 0 4px rgba(179,38,30,.1); }

.form__error {
  display: none;
  font-size: .85rem;
  color: var(--err);
  font-weight: 500;
}
.form__error.is-shown { display: block; }

.form__note { margin-block-start: 1.1rem; font-size: .85rem; color: var(--ink-60); 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;
}
/* Clear the floating WhatsApp button on narrow screens */
@media (max-width: 620px) {
  .toast-region { inset-block-end: 5.75rem; }
}
.toast {
  display: flex;
  align-items: start;
  gap: .8rem;
  padding: 1rem 1.15rem;
  background: var(--navy-800);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  font-size: .95rem;
  line-height: 1.5;
  animation: toast-in .35s var(--ease) both;
}
.toast svg { inline-size: 20px; block-size: 20px; color: var(--gold); flex: none; margin-block-start: .1rem; }
.toast.is-leaving { animation: toast-out .3s var(--ease) both; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   Floating contact button
   -------------------------------------------------------------------------- */
.floating-cta {
  position: fixed;
  inset-block-end: clamp(1.1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1.1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.25rem;
  border-radius: var(--r-pill);
  /* WhatsApp's mid green (#128C7E) gives white text only 4.14:1. This is their
     darker brand green, still recognisable, and clears AA at 5.2:1. */
  background: #0E7A6D;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 4px 12px rgba(7,27,51,.18), 0 14px 32px -14px rgba(7,27,51,.5);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.floating-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(7,27,51,.2), 0 20px 40px -14px rgba(7,27,51,.55); }
.floating-cta svg { inline-size: 22px; block-size: 22px; }
@media (max-width: 560px) {
  .floating-cta span { display: none; }
  .floating-cta { padding: .9rem; }
}

/* --------------------------------------------------------------------------
   Scroll reveal - short distance, fast, once
   -------------------------------------------------------------------------- */
/* Scoped to .js (set by an inline script in the head) so that if the scripts
   never load, no content is left permanently invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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

/* The one orchestrated moment: the hero settling in on load */
.js .hero__figure { animation: figure-in 1s var(--ease) .15s both; }
@keyframes figure-in { from { opacity: 0; transform: scale(.96); } }

.js .hero .arc-pulse {
  stroke-dasharray: 380;
  animation: arc-draw 1.5s var(--ease) .35s both;
}
@keyframes arc-draw { from { stroke-dashoffset: 380; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero__figure, .js .hero .arc-pulse { animation: none; }
}