html { scroll-behavior: smooth; font-size: 17px; }
@media (min-width: 1024px) { html { font-size: 17.5px; } }
body { background: #F7F4EF; }

/* ---------- Hero ---------- */
.hero-tlc {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(70,137,174,0.45) 0%, rgba(70,137,174,0) 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(163,192,48,0.16) 0%, rgba(163,192,48,0) 60%),
    #132A36;
}
.hero-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lotus mark, drawn from the logo's petal motif */
.lotus-breathe { animation: lotusBreathe 9s cubic-bezier(0.45, 0, 0.55, 1) infinite; transform-origin: 50% 85%; }
@keyframes lotusBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.035) rotate(-1.5deg); }
}

/* Live status dot */
.status-dot { position: relative; }
.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
  animation: statusPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes statusPing {
  0% { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

/* ---------- Load-in + scroll reveal ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { opacity: 0; animation: riseIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn-press { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.35s ease; }
.btn-press:hover { transform: translateY(-1px); }
.btn-press:active { transform: translateY(1px) scale(0.98); }
.btn-press .btn-arrow { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-press:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Form ---------- */
.field {
  width: 100%;
  border: 1px solid #E3DCD1;
  background: #FFFFFF;
  border-radius: 0.75rem;
  padding: 0.75rem 0.95rem;
  font-size: 1rem; /* 16px avoids iOS zoom */
  color: #1C1F22;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field::placeholder { color: #A39C92; }
.field:focus { outline: none; border-color: #2E6888; box-shadow: 0 0 0 4px rgba(46,104,136,0.14); }
.field-error { display: none; color: #B4432F; font-size: 0.8125rem; }
.field:user-invalid { border-color: #B4432F; box-shadow: 0 0 0 4px rgba(180,67,47,0.10); }
.field:user-invalid ~ .field-error { display: block; }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235F5A53'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
  padding-right: 2.5rem;
}

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 0.75rem; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 56s; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- FAQ ---------- */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-plus { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item[open] .faq-body { animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- How it works: dotted connectors ---------- */
.step-line {
  position: absolute;
  left: 23px; top: 56px; bottom: -8px;
  border-left: 2px dotted rgba(247,244,239,0.35);
}
@media (min-width: 768px) {
  .step-line { left: 64px; right: 16px; top: 23px; bottom: auto; border-left: 0; border-top: 2px dotted rgba(247,244,239,0.35); }
}
.step-line::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px; border-radius: 9999px;
  background: #A3C030;
  left: -4px; top: 0;
  animation: stepTravelY 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@media (min-width: 768px) {
  .step-line::after { top: -4px; left: 0; animation-name: stepTravelX; }
}
@keyframes stepTravelY { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }
@keyframes stepTravelX { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }

/* ---------- OCD loop diagram ---------- */
.ocd-orbit { transform: rotate(-90deg); transform-origin: 50% 50%; animation: ocdOrbit 7s linear infinite; }
@keyframes ocdOrbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -257.6; } }

/* ---------- Insurance logos ---------- */
.logo-card { flex: 0 0 auto; width: 190px; height: 92px; display: grid; place-items: center; padding: 18px 22px; border: 1px solid #E3DCD1; border-radius: 1.25rem; background: #fff; }
.logo-card img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }
@media (max-width: 640px) { .logo-card { width: 150px; height: 76px; padding: 14px 16px; } .logo-card img { max-height: 38px; } }

/* ---------- Team ---------- */
.team-photo img { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.team-card:hover .team-photo img { transform: scale(1.04); }
.photo-tile img { transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.photo-tile:hover img { transform: scale(1.05); }
.photo-tile .tile-overlay {
  background: linear-gradient(to top,
    rgba(19,42,54,1) 0%,
    rgba(19,42,54,0.97) 25%,
    rgba(19,42,54,0.85) 45%,
    rgba(19,42,54,0.45) 68%,
    rgba(19,42,54,0.1) 88%,
    rgba(19,42,54,0) 100%);
}
.photo-tile h3, .photo-tile p { text-shadow: 0 1px 12px rgba(10,22,30,0.55); }

/* Team slider drag */
.team-track.is-draggable { cursor: grab; }
.team-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.team-track img { -webkit-user-drag: none; user-select: none; }

/* Team slider */
.team-track { scroll-behavior: smooth; scrollbar-width: none; }
.team-track::-webkit-scrollbar { display: none; }
.slider-btn:disabled { opacity: 0.35; cursor: default; transform: none; }

/* Dot grid used as a quiet texture */
.dot-grid { background-image: radial-gradient(circle, #CFC6B8 1.4px, transparent 1.4px); background-size: 18px 18px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .lotus-breathe, .status-dot::after, .marquee-track, .step-line::after, .ocd-orbit { animation: none !important; }
}